@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: Raleway, sans-serif;
        }

        body {
            background: linear-gradient(135deg, rgba(29, 29, 29, .05), rgba(29, 29, 29, .05) 17%, rgba(27, 27, 27, .05) 0, rgba(27, 27, 27, .05) 34%, rgba(31, 31, 31, .05) 0, rgba(31, 31, 31, .05) 93%, hsla(0, 0%, 94.9%, .05) 0, hsla(0, 0%, 94.9%, .05)), linear-gradient(135deg, hsla(0, 0%, 50.6%, .05), hsla(0, 0%, 50.6%, .05) 66%, hsla(0, 0%, 45.9%, .05) 0, hsla(0, 0%, 45.9%, .05) 91%, hsla(0, 0%, 78%, .05) 0, hsla(0, 0%, 78%, .05)), linear-gradient(135deg, rgba(31, 31, 31, .07), rgba(31, 31, 31, .07) 15%, hsla(0, 0%, 54.5%, .07) 0, hsla(0, 0%, 54.5%, .07) 23%, hsla(0, 0%, 78.4%, .07) 0, hsla(0, 0%, 78.4%, .07) 29%, hsla(0, 0%, 40%, .07) 0, hsla(0, 0%, 40%, .07)), linear-gradient(100deg, #00b8be, #000000e3);
            background-size: cover;
        }

        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .screen {
            padding: 0px;
            max-width: 325px;
            margin: auto;
            background: #0002;
            border-radius: 7px;
            box-shadow: 0px 0px 10px #01c1c8;
            margin-top: 4rem;
            margin-bottom: 4rem;
        }

        .screen__content {
            z-index: 1;
            position: relative;
            height: 100%;
        }

        .screen__background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
        }

        .login {
            width: 100%;
            padding: 40px;
            padding-top: 60px;
        }

        .login__field {
            padding: 20px 0px;
            position: relative;
        }

        .login__icon {
            position: absolute;
            top: 33px;
            color: #fffb00;
            padding-left: 10px;
        }

        .login__input {
            padding: 14px;
            padding-left: 30px;
            font-weight: 700;
            width: 100%;
            transition: .2s;
            border-radius: 5px;
            font-size: 14px;
            letter-spacing: 0.1rem;
        }

        .login__input:active,
        .login__input:focus,
        .login__input:hover {
            outline: none;
            border-bottom-color: #0000;
        }

        .login__submit {
            background: #F05A41 !important;
            font-size: 18px;
            margin-top: 10px;
            padding: 10px 2px;
            border-radius: 10px;
            font-weight: 700;
            color: #fff;
            cursor: pointer;
            transition: .2s;
            border: none;
            width: 50%;
        }

        .login__submit:active,
        .login__submit:focus,
        .login__submit:hover {
            border-color: #F05A41 !important;
            outline: none;
            background: #F05A41 !important;
        }

        .button__icon {
            font-size: 24px;
            margin-left: auto;
            color: #fff;
        }

        .social-login {
            position: absolute;
            height: 120px;
            width: 100%;
        }

        .social-icons {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .social-login__icon {
            padding: 20px 10px;
            color: #fff;
            text-decoration: none;
            text-shadow: 0px 0px 8px #7875B5;
            font-size: 30px;
        }

        .social-login__icon:hover {
            transform: scale(1.5);
        }

        .input_bg {
            background: #0001 !important;
            border: 1px solid #01c1c8 !important;
            box-shadow: 0px 0px 3px #01c1c83d !important;
            color: #fff !important;
        }

        .input_bg:focus {
            border: 1px solid #01c1c8 !important;
            box-shadow: 0px 0px 3px #01c1c8 !important;
            color: #fff !important
        }


        @media screen and (max-width: 575px) {
            .tm-hero-section.tm-style1 {
                padding-top: 40px;
                padding-bottom: 20px;
            }
        }