﻿body {
    font-family: 'Work Sans';
    background-color: #fff;
}
.titleLogin {
    font-family: 'Work Sans';
    font-weight: 700;
    color: var(--blue-gray);
    font-size: 3rem;
}
.subtitleLogin {
    font-family: 'Work Sans';
    font-weight: 600;
    color: var(--blue-gray);
    font-size: 1.2rem;
}

.forgotPasswordLogin {
    font-family: 'Work Sans';
    font-weight: 600;
    color: var(--blue-gray);
    font-size: 1rem;
    text-decoration:none;
}
/* Form Login */
.img-login {
    max-width: 250px;
    min-width: 180px;
    margin-bottom: 2em;
    align-items: center;
}

.side-form {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-grad, .btn-grad:hover {
    background-image: linear-gradient(to right, #F1DC21 0%, #FACE7F 100%);
    color: #fff;
    size: 18px;
    font-weight: bolder;
}

input, .input-group-text {
    background-color: #f2f5f9 !important;
    border-bottom: 1px solid #ced4da;
    border-top: 1px solid #ced4da;
    border-left: 1px solid #ced4da;
}

.text-gray, .text-gray:hover {
    color: #afb3ae !important;
    text-decoration: none;
}

::placeholder {
    color: #f2f5f9 !important;
}

:-ms-input-placeholder {
    color: #f2f5f9 !important;
}

::-ms-input-placeholder {
    color: #f2f5f9 !important;
}
.logoKufferath {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom:0;
}
@media (max-width: 1200px) {
    .img-login {
        margin-top: 40px;
    }
    .titleLogin {
        font-family: 'Work Sans';
        font-weight: 700;
        color: var(--blue-gray);
        font-size: 2rem;
    }
    @media (max-width: 767px) {
        .text-gray {
            color: #5e5e5d !important;
        }

    }

    /* Checkbox */
    .toggle-flip input[type="checkbox"] {
        display: none;
    }

        .toggle-flip input[type="checkbox"] + .flip-indecator {
            position: relative;
            width: 60px;
            height: 30px;
            display: block;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-perspective: 90px;
            perspective: 90px;
        }

            .toggle-flip input[type="checkbox"] + .flip-indecator:before, .toggle-flip input[type="checkbox"] + .flip-indecator:after {
                position: absolute;
                top: 0;
                left: 0;
                display: inline-block;
                width: 100%;
                line-height: 30px;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                text-align: center;
                border-radius: 3px;
                -webkit-transition: all 0.5s ease;
                -o-transition: all 0.5s ease;
                transition: all 0.5s ease;
            }

            .toggle-flip input[type="checkbox"] + .flip-indecator:before {
                content: attr(data-toggle-off);
                background-color: #ddd;
            }

            .toggle-flip input[type="checkbox"] + .flip-indecator:after {
                content: attr(data-toggle-on);
                background-color: #009688;
                color: #fff;
                -webkit-transform: rotateY(-180deg);
                transform: rotateY(-180deg);
            }

        .toggle-flip input[type="checkbox"]:checked + .flip-indecator:before {
            -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
        }

        .toggle-flip input[type="checkbox"]:checked + .flip-indecator:after {
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }

        .toggle-flip input[type="checkbox"]:disabled + .flip-indecator {
            cursor: not-allowed !important;
            color: #ccc;
        }
}

.title_form {
    color: #5E5E5D;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.backLogin {
    color: #5E5E5D;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-decoration: none;
}
