html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Open Sans', Arial, sans-serif;
            background: #f5f6fa;
            overflow: auto;
        }
        .login-title strong {
            font-family: 'Raleway', Arial, sans-serif;
            font-weight: 700;
            font-style: normal;
            font-size: 32px;
            line-height: 100%;
            letter-spacing: 2%;
            vertical-align: middle;
            display: inline-block;
        }
        .login-root {
            display: flex;
            height: 100vh;
            min-height: 768px;
            overflow: hidden;
        }
        .login-left {
            flex: 1;
            background: #C3DF9E;
            min-width: 50vw;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-right {
            flex: 1;
            min-width: 50vw;
            background: #fff url('../img/background/background_login.png') center top / cover no-repeat;
            background-attachment: scroll; /* padrão, acompanha o container */
            position: relative;
            overflow: hidden;
        }
        .bg-hypnobox-2 {
            position: absolute;
            width: 640.99px;
            height: 249.39px;
            left: 0;
            top: 0;
            background: url('../img/background/background_login.png') no-repeat center/cover;
            transform: rotate(-180deg);
            z-index: 4;
        }
        .bg-hypnobox-3 {
            position: absolute;
            width: 607.59px;
            height: 261.56px;
            left: 0;
            bottom: 0;
            background: url('../img/background/background_login.png') no-repeat center/cover;
            z-index: 5;
        }
        /* Login box centralizada na coluna esquerda */
        .login-box {
            width: 524px;
            height: 535px;
            opacity: 1;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
            min-width: unset;
            max-width: unset;
            position: relative;
            z-index: 10;
        }
        .login-title {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 30px;
            text-align: left;
            color: #222;
            padding-left:40px;
            padding-top:40px;
        }
        .login-form {
            width: 100%;
        }
        .login-form input[type="text"] {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 15px;
            background: #f9fafb;
            margin-bottom: 16px;
            transition: border 0.2s;
            padding-left:20px;            
        }
        .login-form input[type="text"]:focus,
        .login-form input[type="password"]:focus {
            border-color: #87BF3E;
            outline: none;
            background: #fff;
            padding-left:20px;            
        }
        
        .input-password-wrapper {
            position: relative;
            width: 444px;
        }

        .login-form input[type="text"]{
            width: 444px;
            height: 54px;
            border-radius: 10px;
            border-width: 1px;
            border-style: solid;
            border-color: #d1d5db;
            padding: 0px 0px 0px 16px;
            font-size: 15px;
            background: #f9fafb;
            opacity: 1;
            box-sizing: border-box;
            margin-bottom: 20px;
            transition: border 0.2s;
            margin-left:40px;              
        }

        .login-form input[type="password"] {
            width: 444px;
            height: 54px;
            border-radius: 10px;
            border-width: 1px;
            border-style: solid;
            border-color: #d1d5db;
            padding: 0px 0px 0px 16px;
            font-size: 15px;
            background: #f9fafb;
            opacity: 1;
            box-sizing: border-box;
            margin-bottom: 10px;
            transition: border 0.2s;
            margin-left:40px;            
        }        
        .input-password-wrapper input[type="password"],
        .input-password-wrapper input[type="text"] {
            width: 100%;
            height: 54px;
            border-radius: 10px;
            border-width: 1px;
            border-style: solid;
            border-color: #d1d5db;
            padding: 9px 16px 9px 16px;
            font-size: 15px;
            background: #f9fafb;
            opacity: 1;
            box-sizing: border-box;
            
            transition: border 0.2s;
        }
        .input-label {
            display: block;
            width: 52px;
            height: 16px;
            font-family: 'Inter', Arial, sans-serif;
            font-weight: 700;
            font-style: normal;
            font-size: 16px;
            line-height: 16px;
            letter-spacing: 2%;
            vertical-align: middle;
            opacity: 1;
            margin-bottom: 8px;
            padding-left:40px;  
        }
        .form-group {
            margin-bottom: 0px;
        }        
        
        .toggle-password {
            position: absolute;
            left: 440px;
            top: 43%;
            transform: translateY(-50%);
            cursor: pointer;
            user-select: none;
            height: 24px;
            /*width: 24px;*/
            display: flex;
            align-items: center;
            z-index: 2;
        } 
        
        .toggle-password.showing::after {
            content: "";
            position: absolute;
            left: -3px;
            top: 45%;
            width: 30px;
            height: 2px;
            background: #858585;
            transform: rotate(311deg) translateY(33%);
            pointer-events: none;
        }

        .toggle-password svg {
            vertical-align: middle;
        }
        .login-form .forgot {
            width: 124px;
            height: 15px;
            opacity: 1;
            text-align: right;
            vertical-align: middle;
            margin-left: auto;
            margin-bottom: 20px;
            margin-right: 40px;
        }
        .login-form .forgot a {
            font-family: 'Inter', Arial, sans-serif;
            font-weight: 500;
            font-style: normal;
            font-size: 12px;
            line-height: 100%;
            letter-spacing: 0%;
            color: #87BF3E;
            text-decoration: underline;
            cursor: pointer;
            opacity: 1;
            vertical-align: middle;
            display: inline-block;
            text-decoration: none;
        }
        .login-form .btn-main {
            display: block;
            margin: 20px auto 10px auto; /* centraliza e dá espaçamento superior */
            width: 444px;
            height: 46px;
            border: none;
            border-radius: 40px;
            background: #87BF3E;
            color: #fff;
            opacity: 1;
            font-family: 'Raleway', Arial, sans-serif;
            font-weight: 700;
            font-style: normal;
            font-size: 16px;
            line-height: 16px;
            letter-spacing: 2%;
            text-align: center;
            vertical-align: middle;
            text-transform: uppercase;
            transition: background 0.2s;
            cursor: pointer;
            box-sizing: border-box;
            padding: 0;
        }
        .login-form .btn-main:hover {
            background: #6ea32e;
        }        
        .login-form .btn-sso {
            width: 100%;
            padding: 12px 0;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            background: #2d2d2d;
            color: #fff;
            margin-bottom: 12px;
            transition: background 0.2s;
        }
        .login-form .btn-sso:hover {
            background: #1a1a1a;
        }
        .login-form .btn-google {
            /*width: 100%;*/
            /*margin-top: 10px;*/
            display: flex;
            justify-content: center;
        }
        .msg-error {
            min-height: 40px;
            height: 0;
            margin: 0;
            padding: 0;
            /*visibility: hidden;*/
        }
        .msg-error.show {
            height: auto;
            min-height: unset;
            margin: 10px 0 10px 0;
            padding: 0;
            visibility: visible;
        }
        .msg-error.show p {
            color: #e74c3c;
            font-size: 14px;
            font-weight: 700;
            margin: 0;
            text-align: center;
        }

        .msg-error p {
            margin: 10px 0 10px 0;
            color: #e74c3c;
            font-size: 14px;
            font-weight: 700;
            margin: 0;
            text-align: center;
            visibility: visible;
        }        

        #hypno_txt_login_email::placeholder {
            color: #9B9C9B;
            font-family: 'Inter', Arial, sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 22px;
        }

        #hypno_txt_login_senha::placeholder {
            color: #9B9C9B;
            font-family: 'Inter', Arial, sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 22px;
        }
        /* Lado direito com imagem, SVG e texto centralizado */
        .login-right-content {
            display: flex;
            flex-direction: column;
            justify-content: center;   /* Centraliza verticalmente */
            align-items: center;       /* Centraliza horizontalmente */
            height: 100%;
            width: 100%;
            padding: 0 16px;
            box-sizing: border-box;
            padding-bottom: 80px; /* Espaço para o footer */
        }
        .login-right-img {
            max-width: 360.32px;
            width: 100%;
            height: 120.94px;
            margin-bottom: 30px;
            /*margin-left: 105px;*/
        }
        .login-right-svg {
            margin-bottom: 16px;
        }
        .login-right-text {
            font-family: 'Raleway', Arial, sans-serif;
            font-weight: 800;
            font-style: normal;
            font-size: 42px;
            line-height: 100%;
            letter-spacing: 1%;
            margin-top: 0;
            margin-bottom: 0;
            padding: 0;
            width:426px;
            height:169px;
            margin-left: 105px;
        }
        .login-right-text strong {
            color: #4D5152;
            display: block;
            font-family: 'Raleway', Arial, sans-serif;
            font-weight: 800;
            font-style: normal;
            font-size: 42px;
            line-height: 100%;
            letter-spacing: 1%;
        }
        .login-right-text span {
            color: #5B8A49;
            display: block;
            font-family: 'Raleway', Arial, sans-serif;
            font-weight: 600; /* SemiBold */
            font-style: normal;
            font-size: 36px;
            line-height: 46px;
            letter-spacing: 1%;
            margin-top: 8px;
        }
        .bg-hypnobox-footer {
            position: absolute;
            width: 100%;
            height: 30%;
            top:70%;
            transform: rotate(0deg);
            opacity: 1;
            z-index: 10;
            pointer-events: none;
            background: #fff url('../img/background/bg-hypnobox_2.png') right center / contain no-repeat;
            padding: 40px 20px; /* ajuste conforme seu layout */    
        }

        .divider-ou {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 444px;
            margin: 0px auto 30px auto;
            height: 24px;
            position: relative;
            opacity: 1;
        }
        .divider-ou::before,
        .divider-ou::after {
            content: "";
            flex: 1;
            border-bottom: 1px solid #BCBCBC;
            height: 0;
        }
        .divider-ou span {
            font-family: 'Raleway', Arial, sans-serif;
            font-weight: 700;
            font-size: 14px;
            line-height: 16px;
            letter-spacing: 0.02em;
            color: #9B9C9B;
            margin: 0 16px;
            text-transform: uppercase;
            background: #fff;
            padding: 0 8px;
            display: flex;
            align-items: center;
        }  
        
        .sso-buttons-row {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin: 0 auto auto auto;
            width: 100%;
        }

        .btn-google-sso {
            width: 216px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 40px;
            border: 1px solid #9B9C9B;
            background: #fff;
            font-family: 'Raleway', Arial, sans-serif;
            font-weight: 700;
            font-size: 14px;
            line-height: 16px;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: #545555;
            height: 46px;
            cursor: pointer;
            transition: background 0.2s;
            opacity: 1;
            gap: 0px;            
        }
        .btn-microsoft-sso {
            width: 238px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 40px;
            border: 1px solid #9B9C9B;
            background: #fff;
            font-family: 'Raleway', Arial, sans-serif;
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: #545555;
            /*height: 46px;*/
            cursor: pointer;
            transition: background 0.2s;
            opacity: 1;
            gap: 0px;            
        }
        .btn-sso-center {
            /*margin: 0 auto;*/
            /*display: flex;*/

        }
        .icon-sso {
            width: 24px;
            height: 24px;
            margin-right: 12px;
        }        

        /* Responsivo */
        @media (max-width: 1400px) {
            .bg-hypnobox-footer {
                width: 90vw;
                min-width: 320px;
                max-width: 100vw;
                height: 0px;
                left: 5vw;
                top: auto;
                bottom: 0;
                background-size: contain;
                transform: rotate(0deg);
                padding: 0;
            }

            .login-right-content {
                display: flex;
                flex-direction: column;
                justify-content: center;   /* Centraliza verticalmente */
                align-items: center;       /* Centraliza horizontalmente */
                height: 100%;
                width: 100%;
                padding: 0 8px;
                box-sizing: border-box;
            }
        }
        /* Responsivo */
        @media (max-width: 900px) {
            .login-root {
                flex-direction: column;
            }
            .login-left, .login-right {
                min-width: 100vw;
                width: 100vw;
                height: 50vh;
            }
            .login-title { text-align: center; }
            .login-right-content { padding: 24px 8px 0 8px; }
            .mask-group, .rectangle-516, .rectangle-590, .bg-hypnobox-2, .bg-hypnobox-3 {
                display: none;
            }

            .login-right-text,
            .login-right-img {
                margin-left: 0 !important;
                width: 100% !important;
                max-width: 100vw !important;
                text-align: center;
            }    

            .bg-hypnobox-footer {
                display: none;
            }

        }

        .form-group.error input,
        .input-password-wrapper.error input {
            border: 2px solid #e74c3c !important;
            background: #fff0f0;
        }        

/* Adicione ao seu CSS */
        .btn-gray {
            background: #545555;
            color: #fff;
            border-radius: 40px;
            border: 1px solid #545555;
            font-family: 'Inter', Arial, sans-serif;
            font-size: 16px;
            font-weight: 700;
            line-height: 22px;
            padding: 12px 0;
            cursor: pointer;
            transition: background 0.2s;
            box-shadow: none;
            outline: none;
        }
        .btn-green {
            background: #87BF3E;
            color: #fff;
            border-radius: 40px;
            border: 1px solid #87BF3E;
            font-family: 'Inter', Arial, sans-serif;
            font-size: 16px;
            font-weight: 700;
            line-height: 22px;
            padding: 12px 0;
            cursor: pointer;
            transition: background 0.2s;
            box-shadow: none;
            outline: none;
        }        
        .btn-gray:hover {
            background: #363738;
            border-color: #363738;
        }