/* input[type="password"] {
  color: transparent;
} */



/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
    font-family: Poppins-Regular;
    src: url('../fonts/Gandom-FD.ttf');
}

@font-face {
    font-family: Poppins-Medium;
    src: url('../fonts/Gandom-FD.ttf');
}

@font-face {
    font-family: Poppins-Bold;
    src: url('../fonts/Gandom-FD.ttf');
}

@font-face {
    font-family: Poppins-SemiBold;
    src: url('../fonts/Gandom-FD.ttf');
}

/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

@media only screen and (min-width:280px) and (max-width:480px) {

    .wrap-login1000 {
        margin-top:-50% !important;
    }
}

    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }

    .btn {
        display: inline-block;
        margin-bottom: 0;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        border-radius: 4px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .btn-custom {
        color: #fff;
        background-color: #04a3e7;
        border-color: #04a3e7;
        font-family: inherit;
    }

    .btn-danger {
        color: #fff;
        background-color: #d9534f;
        border-color: #d43f3a;
        font-family: inherit;
    }

    body, html {
        text-align: center !important;
        height: 100%;
        font-family: Poppins-Regular, sans-serif;
    }

    /*---------------------------------------------*/
    a {
        font-family: Poppins-Regular;
        font-size: 14px;
        line-height: 1.7;
        color: #666666;
        margin: 0px;
        transition: all 0.4s;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
    }

        a:focus {
            outline: none !important;
        }

        a:hover {
            text-decoration: none;
            color: #57b846;
        }

    /*---------------------------------------------*/
    h1, h2, h3, h4, h5, h6 {
        margin: 0px;
    }

    p {
        font-family: Poppins-Regular;
        font-size: 14px;
        line-height: 1.7;
        color: #666666;
        margin: 0px;
    }

    ul, li {
        margin: 0px;
        list-style-type: none;
    }


    /*---------------------------------------------*/
    input {
        outline: none;
        border: none;
    }

        input[type="number"] {
            -moz-appearance: textfield;
            appearance: none;
            -webkit-appearance: none;
        }

            input[type="number"]::-webkit-outer-spin-button,
            input[type="number"]::-webkit-inner-spin-button {
                -webkit-appearance: none;
            }

    textarea {
        outline: none;
        border: none;
    }

        textarea:focus, input:focus {
            border-color: transparent !important;
        }

            input:focus::-webkit-input-placeholder {
                color: transparent;
            }

            input:focus:-moz-placeholder {
                color: transparent;
            }

            input:focus::-moz-placeholder {
                color: transparent;
            }

            input:focus:-ms-input-placeholder {
                color: transparent;
            }

            textarea:focus::-webkit-input-placeholder {
                color: transparent;
            }

            textarea:focus:-moz-placeholder {
                color: transparent;
            }

            textarea:focus::-moz-placeholder {
                color: transparent;
            }

            textarea:focus:-ms-input-placeholder {
                color: transparent;
            }

    input::-webkit-input-placeholder {
        color: #999999;
    }

    input:-moz-placeholder {
        color: #999999;
    }

    input::-moz-placeholder {
        color: #999999;
    }

    input:-ms-input-placeholder {
        color: #999999;
    }

    textarea::-webkit-input-placeholder {
        color: #999999;
    }

    textarea:-moz-placeholder {
        color: #999999;
    }

    textarea::-moz-placeholder {
        color: #999999;
    }

    textarea:-ms-input-placeholder {
        color: #999999;
    }

    label {
        display: block;
        margin: 0;
    }

    /*---------------------------------------------*/
    button {
        outline: none !important;
        border: none;
        background: transparent;
    }

        button:hover {
            cursor: pointer;
        }

    iframe {
        border: none !important;
    }


    /*//////////////////////////////////////////////////////////////////
[ Utility ]*/
    .txt1 {
        font-family: Poppins-Regular;
        font-size: 13px;
        line-height: 1.4;
        color: #999999;
    }

    /*//////////////////////////////////////////////////////////////////
[ login ]*/

    .limiter {
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }

    .container-login100 {
        margin: 0px auto;
        width: 100%;
        min-height: 100vh;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 15px;
        /*background: #c6d0d4;*/
        background: url(../../img/bgloginpanel3.jpg?v=1) no-repeat;
        background-size: cover;
        background-position: center;
        height: 100%;
    }

    .container-login1000 {
        margin: 0px auto;
        width: 100%;
        min-height: 100vh;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: 15px;
        background: url(../../img/bglogin.jpg?v=2) no-repeat;
        background-size: cover;
        background-position: center;
    }

    .wrap-login100 {
        width: 685px;
        /*background: rgba(255,255,255,.2);*/
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        margin-top: -8%;
    }

    .wrap-login1000 {
        width: 670px;
        background: transparent;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    /*==================================================================
[ Title form ]*/
    .login100-form-title {
        margin: 0px auto;
        direction: rtl;
        width: 80%;
        position: relative;
        z-index: 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 70px 15px 74px 15px;
    }

    .login100-form-title-1 {
        font-family: Poppins-Bold;
        font-size: 30px;
        color: #dfff00;
        text-transform: uppercase;
        line-height: 1.2;
        text-align: center;
    }

    .login100-form-title::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        /*background-color: rgba(54,84,99,0.7);*/
        border-bottom: 3px dashed #fff;
    }


    .login1000-form-title {
        width: 100%;
        position: relative;
        z-index: 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 35px 15px 0px 15px;
    }

    .login1000-form-title-1 {
        font-family: Poppins-Bold;
        font-size: 30px;
        color: #fff;
        text-transform: uppercase;
        line-height: 1.2;
        text-align: center;
    }

    .login1000-form-title::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }


    /*==================================================================
[ Form ]*/

    .login100-form {
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 43px 150px 60px 150px;
    }


    /*------------------------------------------------------------------
[ Input ]*/

    .wrap-input100 {
        width: 100%;
        position: relative;
        border-bottom: 1px solid #b2b2b2;
    }

    .label-input100 {
        font-family: Poppins-Regular;
        font-size: 15px;
        color: #808080;
        line-height: 1.2;
        text-align: right;
        position: absolute;
        top: 14px;
        left: -105px;
        width: 80px;
    }

    /*---------------------------------------------*/
    .input100 {
        text-align: center;
        font-family: Poppins-Regular;
        font-size: 20px;
        color: #fff;
        line-height: 1.2;
        display: block;
        width: 100%;
        background: transparent;
        padding: 0 5px;
        border: 3px solid;
        border-top: none;
        border-left: none;
        border-right: none;
    }

    .input1000 {
        text-align: center;
        font-family: Poppins-Regular;
        font-size: 22px;
        color: #000;
        line-height: 1.2;
        display: block;
        width: 100%;
        background-color: rgba(255,255,255,.9);
        padding: 0 5px;
        border-bottom: 3px solid;
    }

    .focus-input100 {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
    }

        .focus-input100::before {
            content: "";
            display: block;
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 0;
            height: 1px;
            -webkit-transition: all 0.6s;
            -o-transition: all 0.6s;
            -moz-transition: all 0.6s;
            transition: all 0.6s;
            background: #57b846;
        }


    /*---------------------------------------------*/
    input.input100 {
        height: 45px;
    }


    .input100:focus + .focus-input100::before {
        width: 100%;
    }

    .has-val.input100 + .focus-input100::before {
        width: 100%;
    }

    /*==================================================================
[ Restyle Checkbox ]*/

    .input-checkbox100 {
        display: none;
    }

    .label-checkbox100 {
        font-family: Poppins-Regular;
        font-size: 13px;
        color: #fff;
        line-height: 1.4;
        display: block;
        position: relative;
        padding-left: 26px;
        cursor: pointer;
    }

        .label-checkbox100::before {
            content: "\f00c";
            font-family: FontAwesome;
            font-size: 13px;
            color: transparent;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 2px;
            background: #fff;
            border: 1px solid #e6e6e6;
            left: 0;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

    .input-checkbox100:checked + .label-checkbox100::before {
        color: #57b846;
    }

    /*------------------------------------------------------------------
[ Button ]*/
    .container-login100-form-btn {
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
    }

    .login100-form-btn {
        margin: 0px auto;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
        height: 50px;
        background-color: #5d727c;
        border-radius: 15px;
        font-family: Poppins-Regular;
        font-size: 17px;
        color: #fff;
        line-height: 1.2;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
        cursor: pointer;
        width: 380px;
        background-color: #0e1be1;
    }

    .login100-form-btnAmalk {
        margin: 0px auto;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
        height: 50px;
        background-color: #5d727c;
        border-radius: 15px;
        font-family: Poppins-Regular;
        font-size: 17px;
        color: #fff;
        line-height: 1.2;
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
        cursor: pointer;
        min-width: 180px;
    }

    .login100-form-btn:hover {
        background-color: #333333;
    }


    /*------------------------------------------------------------------
[ Responsive ]*/

    @media (max-width: 576px) {
        .login100-form {
            padding: 43px 15px 57px 117px;
        }
    }

    @media (max-width: 480px) {
        .login100-form {
            padding: 43px 15px 57px 15px;
        }

        .label-input100 {
            text-align: left;
            position: unset;
            top: unset;
            left: unset;
            width: 100%;
            padding: 0 5px;
        }
    }


    /*------------------------------------------------------------------
[ Alert validate ]*/

    .validate-input {
        position: relative;
    }

    .alert-validate::before {
        content: attr(data-validate);
        position: absolute;
        max-width: 70%;
        background-color: #fff;
        border: 1px solid #c80000;
        border-radius: 2px;
        padding: 4px 25px 4px 10px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 2px;
        pointer-events: none;
        font-family: Poppins-Medium;
        color: #c80000;
        font-size: 13px;
        line-height: 1.4;
        text-align: left;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: opacity 0.4s;
        -o-transition: opacity 0.4s;
        -moz-transition: opacity 0.4s;
        transition: opacity 0.4s;
    }

    .alert-validate::after {
        content: "\f06a";
        font-family: FontAwesome;
        display: block;
        position: absolute;
        color: #c80000;
        font-size: 15px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 8px;
    }

    .alert-validate:hover:before {
        visibility: visible;
        opacity: 1;
    }

    @media (max-width: 992px) {
        .alert-validate::before {
            visibility: visible;
            opacity: 1;
        }
    }