@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

    * {
        box-sizing: border-box;
    }

    body {
        display: flex;
        background-color: #f6f5f7;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: "Poppins", sans-serif;
        overflow: hidden;
        height: 100vh;
    }

    h1 {
        font-weight: 700;
        letter-spacing: -1.5px;
        margin: 0;
        margin-bottom: 15px;
    }

        h1.title {
            font-size: 45px;
            line-height: 45px;
            margin: 0;
            text-shadow: 0 0 10px rgba(16,64,74,0.5);
        }

    p {
        font-size: 16px;
        font-weight: 100;
        line-height: 20px;
        letter-spacing: 0.5px;
        margin: 20px 0 30px;
        text-shadow: 0 0 10px rgba(21,64,74,0.5);
    }

    span {
        font-size: 14px;
        margin-top: 25px;
    }

    a {
        color: #333;
        font-size: 14px;
        text-decoration: none;
        margin: 15px 0;
        transition: 0.3s ease-in-out;
    }

        a:hover {
            color: #4bb6b7;
        }

    .content {
        display: flex;
        width: 100%;
        height: 50px;
        align-items: center;
        justify-content: space-around;
    }

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

    .checkbox2 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 15px;
    }

    .content input {
        accent-color: #333;
        width: 12px;
        height: 12px;
    }

    .content label {
        font-size: 14px;
        user-select: none;
        padding-left: 5px;
    }
button, .button {
        position: relative;
        border-radius: 20px;
        border: 1px solid #4bb6b7;
        background-color: #4bb6b7;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        margin: 10px;
        padding: 12px 80px;
        letter-spacing: 1px;
        text-transform: capitalize;
        transition: 0.3s ease-in-out;
    }

        button:hover, .button:hover {
            letter-spacing: 3px;
        }

        button:active, .button:hover {
            transform: scale(0.95);
        }

        button:focus, .button:hover {
            outline: none;
        }

        button.ghost {
            background-color: rgba(225, 225, 225, 0.2);
            border: 2px solid #fff;
            color: #fff;
        }

            button.ghost i {
                position: absolute;
                opacity: 0;
                transition: 0.3s ease-in-out;
            }

                button.ghost i.register {
                    right: 70px;
                }

                button.ghost i.login {
                    left: 70px;
                }

            button.ghost:hover i.register {
                right: 40px;
                opacity: 1;
            }

            button.ghost:hover i.login {
                left: 40px;
                opacity: 1;
            }

    .form {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 50px;
        height: 100%;
        text-align: center;
    }

    input {
        background-color: #eee;
        border-radius: 10px;
        border: none;
        padding: 12px 15px;
        margin: 8px 0;
        width: 100%;
    }

    .container {
        background-color: #fff;
        border-radius: 25px;
        box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0, 0, 0, 0.22);
        position: relative;
        overflow: hidden;
        width: 768px;
        max-width: 100%;
        min-height: 600px;
    }

    .form-container {
        position: absolute;
        top: 0;
        height: 100%;
        transition: all 0.6s ease-in-out;
    }

    .login-container {
        left: 0;
        width: 50%;
        z-index: 2;
    }

    .container.right-panel-active .login-container {
        transform: translateX(100%);
    }

    .register-container {
        left: 0;
        width: 50%;
        opacity: 0;
        z-index: 1;
    }

    .container.right-panel-active .register-container {
        transform: translateX(100%);
        opacity: 1;
        z-index: 5;
        animation: show 0.6s;
    }

    @keyframes show {
        0%, 49.99% {
            opacity: 0;
            z-index: 1;
        }

        50%, 100% {
            opacity: 1;
            z-index: 5;
        }
    }

    .overlay-container {
        position: absolute;
        top: 0;
        left: 50%;
        width: 50%;
        height: 100%;
        overflow: hidden;
        transition: transform 0.6s ease-in-out;
        z-index: 100;
    }

    .container.right-panel-active .overlay-container {
        transform: translate(-100%);
    }

        .overlay::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(46,94,109, 0.4) 40%, rgba(46,94,109, 0) );
        }

    .container.right-panel-active .overlay {
        transform: translateX(50%);
    }

    .overlay-panel {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 40px;
        text-align: center;
        top: 0;
        height: 100%;
        width: 50%;
        transform: translateX(0);
        transition: transform 0.6s ease-in-out;
    }

    .overlay-left {
        transform: translateX(-20%);
    }

    .container.right-panel-active .overlay-left {
        transform: translateX(0);
    }

    .overlay-right {
        right: 0;
        transform: translateX(0);
    }

    .container.right-panel-active .overlay-right {
        transform: translateX(20%);
    }

    .social-container {
        margin: 20px 0;
    }

        .social-container a {
            border: 1px solid #dddddd;
            border-radius: 50%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin: 0 5px;
            height: 40px;
            width: 40px;
            transition: 0.3s ease-in-out;
        }

            .social-container a:hover {
                border: 1px solid #4bb6b7;
            }

    select {
        width: 100%;
        border-radius: 7px;
        border: 1px solid #ccc;
        background-color: #eee;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

        select:hover,
        select:focus {
            border-color: #4bb6b7;
            outline: none;
            background-color: #fff;
        }

        select option {
            background-color: #fff;
            color: #333;
            padding: 10px;
            font-size: 14px;
        }

            select option:checked {
                background-color: #4bb6b7;
                color: #fff;
            }

        select:active option:checked {
            background-color: #4bb6b7;
            color: #fff;
        }
            select {
        width: 100%;
        max-width: 400px;
        border-radius: 15px; 
        border: 1px solid #4bb6b7;
        background-color: #fff;
        font-size: 14px; 
        color: #333;
        padding: 8px 15px; 
        margin-bottom: 15px; 
        text-transform: capitalize;
        cursor: pointer;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); 
        transition: all 0.3s ease-in-out;
    }

        select:hover {
            border-color: #4bb6b7;
            background-color: #f6f5f7;
            box-shadow: 0 5px 7px rgba(0, 0, 0, 0.15);
        }

        select:focus {
            outline: none;
            border-color: #4bb6b7;
            background-color: #fff;
            box-shadow: 0 0 6px rgba(75, 182, 183, 0.5); 
        }

        select option {
            background-color: #fff;
            color: #333;
            font-size: 13px; 
            padding: 8px;
        }

            select option:checked {
                background-color: #4bb6b7;
                color: #fff;
            }
            .contrasenias {
    margin: 0; 
    padding: 0; 
    width: 100%; 
    box-sizing: border-box;
}
.contrasenias {
    position: relative;
    display: flex;
    align-items: center;
}

.toggle-password {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #666;
    margin: 0; 
    padding: 0;
    top:10px; 
}

.toggle-password:focus {
    outline: none;
}
   .custom-textbox {

    width: 100%;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 12px 15px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #333;
    resize: none; 
    overflow-y: auto; 
    word-wrap: break-word;
    white-space: pre-wrap;
    transition: all 0.3s ease-in-out;
}

.custom-textbox:focus {
    border-color: #4bb6b7;
    background-color: #fff;
    outline: none;
}