@font-face{

    src:url('../GlacialIndifference-Regular.otf');

    font-family: 'glash';

}

.login{

    transition: 0.3s ease-in-out;

        font-family: 'glash' !important;



}

.civico{

    color: #fff !important;

}

@media (min-width:992px){

   .page-sidebar-wrapper{

        display: none;

    }

    .page-header.navbar .menu-toggler.sidebar-toggler{

        display: none;

    }

    .page-header.navbar .page-logo{

            width: 130px;

    }   

    .page-content-wrapper .page-content{

        margin-left: 0px;

    } 

}

@media (max-width:991px)

{

   .my_menu{

        display: none;

    } 

    .page-header.navbar .top-menu{

        clear: inherit !important;

        float: right;

    }

    .menu-toggler{

        float: left !important;

    }

    .page-sidebar {

        height: 100%;

    }

    .sub-menu{

        border-left: 5px solid #ed6b75;

    }

    .mobile-back-btn{

        float: left;

        font-size: 20px;

        color: #ed6b75;

    }

    .sidebar-mobile-offcanvas-toggler .responsive-toggler{

        display: inline-block !important;

    }

}

@media (max-width:400px)

{

    .full-screen-btn{

        display: none;

    }

}

@media (min-width:767px)

{

    .login .alert{

        position: absolute;

        width: 85%;

        text-align: center;

        left: 420px;

        top:0;

    }

    .top-opener{

        width: calc(100% - 20px);

    }

}

.login .alert{

    margin-top: 15px;

    margin-bottom: 15px;

    background-color: rgba(232,106,106,0.4);

    color:#fff;

    border:0;

}



.my_menu{

    float: left;

}

.navbar-default{

    display: inline-block;

    background: transparent;

    padding-left: 50px;

    border: 0;

}

.nav>li, .nav>li>a{

    display: inline-block;

    color: #fff; 

}

.nav>li>a{

    padding: 15px 15px;

    font-size: 14px;

}

.drop{

    display: inline-block !important;

    transform: rotate(0deg);

    cursor: pointer;

    transition-duration: 0.3s;

    transition-property: transform;

    transition-timing-function: ease-in-out;

}



.drop-container{

    padding: 8px 15px;

}

.top-opener{

    height: 400px;

    top: 0;

    z-index: 1056;

    width: calc(100% - 38px);

    position: fixed;

    background-color: #f1f4f7;

}

.nav>li>a:hover,.nav>li>a:focus,.drop-container:hover{

    background-color: #3f4f62;

}

.navbar-default>li i{  

    color:#c6cfda;

}

.navbar-default i{

    font-size: 20px;

    

}

.back-btn{

       position: absolute;

    left: 0;

    top: 15px;

    color: #ed6b75;

}

.back-btn:hover{

    color: #f88888;;

}

.page-wrapper,.page-sidebar-mobile-offcanvas.page-sidebar-mobile-offcanvas-open .page-sidebar-wrapper,.page-sidebar-mobile-offcanvas .page-sidebar-wrapper{

    top:50px !important;

}



.page-header.navbar{

    position: fixed !important;

}

.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-toggle{

    padding-bottom: 10px;

}

.submenu i{

    font-size: 16px;

}

.page-quick-sidebar-wrapper{

    top:50px;

}

.page-quick-sidebar-toggler{

    top:60px;

}

.hider{

    display: none !important;

}

.full-screen-btn{

    background-color: #3f4f62;

    z-index: 10500;

    width: 0px;

    height: 0px;

    border-radius: 40px;

    transition-duration: 0.5s;

    transition-property: width,height,opacity,position,transform;

    transition-timing-function: ease-in-out;

    top: 3px;

    right: 322px;

    opacity: 0;

    position: absolute;

    font-size: 0px;

}

.full-screen-btn-activated:hover{

    transform: rotate(90deg);

    transition-timing-function: ease-in-out;

    transition-property: width,height,opacity,position,transform;

}

.full-screen-btn-activated{  

    width: 40px;

    height: 40px;

    transform: rotate(360deg);

    transition-property: width,height,opacity,position,transform;

    transition-timing-function: ease-in-out;

    opacity: 1;

    font-size: 16px;

    padding: 8px 13px;

    cursor:pointer;

}

.full-screen-btn i{

    color: #fff;

    

}

.my-side-wrapper{

    width: 320px;

    height: 100%;

    position: fixed;

    overflow: hidden;

    background: #21282e;

    transition: right .3s;

}

.my-side-wrapper-full-screen{

    width: 100%;

    transition: right .3s;

}

.page-quick-sidebar-wrapper{

    width: 365px;

    padding-left: 45px;

    background: transparent;

}

.page-quick-sidebar-wrapper-full-screen{

    width: 100%;

    padding-left: 0px;

}

.droper-active{

    transform: rotate(180deg);

    transition-duration: 0.3s;

    transition-property: transform;

    transition-timing-function: ease-in-out;

}





/*login pages styliNG*/

.login .content{

    width: auto;

    display: inline-block;

    vertical-align: middle;

    width: 400px;

    min-height: 100%;

    padding-right: 50px;

    padding-left: 50px;

}

.login .logo{

    display: inline-block;

    margin-left: auto;

    top: 50%;

    transform: translateY(-50%);

    float: right;

    right: 0;

    position: absolute;

    width: calc(100% - 405px);

    margin: auto;

}

.login .content .form-title{

    font-weight: bold;

    text-align: center;

    color: #fff;

    margin-bottom: 10px;

    margin-top: 10px;

}

.login input{

    background: transparent !important;

    color: #fff !important;

}

.login .form-group{

    margin-bottom: 15px !important;

}

.login .myblue{

    background-color:#575b66;

    color: #fff;

    float: left !important;

    margin-top: 20px !important;

    padding: 8px 30px;

}

.login .myblue:hover{

    background-color: #777983;

}

.login .content{

    background: rgba(0,0,0,0.6);

}

.login .myblue1{

    background-color: #777983;

    color: #fff;

    float: left !important;

    margin-top: 20px !important;

    margin-left: 25px;

    padding: 8px 30px;

}

.login .myblue1:hover{

    background-color: #575b66;

}

.form-group.form-md-line-input.has-success .form-control{

    border-bottom: 1px solid #dfdfe0;

}

.form-group.form-md-line-input.form-md-floating-label .form-control~label{

    color: #dfdfe0;

}

.login .my-btn-container{

    display: table;

    margin: auto !important;

    padding: 0px !important;

}

.form-group.form-md-line-input.has-success .form-control.edited:not([readonly])~.form-control-focus:after, .form-group.form-md-line-input.has-success .form-control.edited:not([readonly])~label:after, .form-group.form-md-line-input.has-success .form-control.focus:not([readonly])~.form-control-focus:after, .form-group.form-md-line-input.has-success .form-control.focus:not([readonly])~label:after, .form-group.form-md-line-input.has-success .form-control.form-control-static~.form-control-focus:after, .form-group.form-md-line-input.has-success .form-control.form-control-static~label:after, .form-group.form-md-line-input.has-success .form-control:focus:not([readonly])~.form-control-focus:after, .form-group.form-md-line-input.has-success .form-control:focus:not([readonly])~label:after{

    background: #dfdfe0;

}

.form-group.form-md-line-input.has-success .form-control.edited:not([readonly])~.help-block, .form-group.form-md-line-input.has-success .form-control.edited:not([readonly])~i, .form-group.form-md-line-input.has-success .form-control.edited:not([readonly])~label, .form-group.form-md-line-input.has-success .form-control.focus:not([readonly])~.help-block, .form-group.form-md-line-input.has-success .form-control.focus:not([readonly])~i, .form-group.form-md-line-input.has-success .form-control.focus:not([readonly])~label, .form-group.form-md-line-input.has-success .form-control.form-control-static~.help-block, .form-group.form-md-line-input.has-success .form-control.form-control-static~i, .form-group.form-md-line-input.has-success .form-control.form-control-static~label, .form-group.form-md-line-input.has-success .form-control:focus:not([readonly])~.help-block, .form-group.form-md-line-input.has-success .form-control:focus:not([readonly])~i, .form-group.form-md-line-input.has-success .form-control:focus:not([readonly])~label, .form-group.form-md-line-input.has-success label{

    color: #dfdfe0;

}

.form-group.form-md-line-input.has-error .form-control {

    border-bottom: 1px solid #e86a6a ;

}

.form-group.form-md-line-input.has-error .form-control.edited:not([readonly])~.help-block, .form-group.form-md-line-input.has-error .form-control.edited:not([readonly])~i, .form-group.form-md-line-input.has-error .form-control.edited:not([readonly])~label, .form-group.form-md-line-input.has-error .form-control.focus:not([readonly])~.help-block, .form-group.form-md-line-input.has-error .form-control.focus:not([readonly])~i, .form-group.form-md-line-input.has-error .form-control.focus:not([readonly])~label, .form-group.form-md-line-input.has-error .form-control.form-control-static~.help-block, .form-group.form-md-line-input.has-error .form-control.form-control-static~i, .form-group.form-md-line-input.has-error .form-control.form-control-static~label, .form-group.form-md-line-input.has-error .form-control:focus:not([readonly])~.help-block, .form-group.form-md-line-input.has-error .form-control:focus:not([readonly])~i, .form-group.form-md-line-input.has-error .form-control:focus:not([readonly])~label, .form-group.form-md-line-input.has-error label{

        color: #e86a6a ;

}

.form-group.form-md-line-input.has-error .form-control.edited:not([readonly])~.form-control-focus:after, .form-group.form-md-line-input.has-error .form-control.edited:not([readonly])~label:after, .form-group.form-md-line-input.has-error .form-control.focus:not([readonly])~.form-control-focus:after, .form-group.form-md-line-input.has-error .form-control.focus:not([readonly])~label:after, .form-group.form-md-line-input.has-error .form-control.form-control-static~.form-control-focus:after, .form-group.form-md-line-input.has-error .form-control.form-control-static~label:after, .form-group.form-md-line-input.has-error .form-control:focus:not([readonly])~.form-control-focus:after, .form-group.form-md-line-input.has-error .form-control:focus:not([readonly])~label:after{

    background: #e86a6a ;

}

/*.tooltip{

    right: 0 !important;

    left: initial !important;

}*/

.SignupForm .tool,.ResetForm .tool,.AuthenticateForm .tool{

    position: absolute;

    right: -35px;

    top: 22px;

    bottom: 0;

    margin: auto;

}

.LoginForm .tool{

   margin-left: 8px;

   margin-top: 28px;

}

.SignupForm .tooltip-arrow{

    border-left-color: #fff !important;

}

.LoginForm .tooltip-arrow{

    display: none;

}

.tooltip-inner{

    background-color: #fff;

    color:#111;

    font-family: "Open Sans",sans-serif;

}

.Forgot{

    float: right;

    cursor: pointer;

}

.login{

    background: url('../../../pages/media/bg/5.jpg'), url('../img/overlay.png');

    background-size: cover,100% 100%;

    backface-visibility: visible;

    background-blend-mode: luminosity;

}

.Forgot:hover{

    text-decoration: underline;

}

.ResetForm .myblue,.ResetForm .myblue1,.AuthenticateForm .myblue1,.AuthenticateForm .myblue{

    width: 100%;

    padding-top: 12px;

    padding-bottom: 12px;

    margin-top: 30px !important;

}

.LoginForm .myblue{

    width: calc(100% - 35px );

    padding-top: 12px;

    padding-bottom: 12px;

}

.ResetForm .myblue1,.AuthenticateForm .myblue1{

    margin-left: 0px;

}

.ResetForm .domain{

    background-image: url('../img/internet.png');

    background-repeat: no-repeat;

    background-position: 10px center;

}

.ResetForm .id{

    background-image: url('../img/user.png');

    background-repeat: no-repeat;

    background-position: 10px center;

}

.ResetForm .mail{

    background-image: url('../img/mail.png');

    background-repeat: no-repeat;

    background-position: 10px center;

}

.ResetForm .pass{

    background-image: url('../img/locked.png');

    background-repeat: no-repeat;

    background-position: 10px center;

}

.AuthenticateForm .mobile{

    background-image: url('../img/mobile.png');

    background-repeat: no-repeat;

    background-position: 10px center;

}

.AuthenticateForm .phone{

    background-image: url('../img/phone-call.png');

    background-repeat: no-repeat;

    background-position: 10px center;

}

.ResetForm .help-container,.AuthenticateForm .help-container{

    position: relative;

    width: 100%;

    display: table;

    margin-top: 40px;

}

.ResetForm .tooltip-arrow,.AuthenticateForm .tooltip-arrow{

    border-left-color: #fff !important;

}

.ResetForm .reset-container,.AuthenticateForm .reset-container{

    text-align: center;

    margin: auto;

    margin-top: 40px;

    float: left;

    width: 100%;

}

.ResetForm .reset-btn,.AuthenticateForm .reset-btn{

    background: transparent;

    outline: 0;

    border:0;

    margin: auto;

    font-family: "Open Sans",sans-serif;

    color: #fff;

    font-size: 20px;

}

.ResetForm .reset-btn:hover,.AuthenticateForm .reset-btn:hover{

    border-bottom: 1px solid #fff;

}

.ResetForm .form-title,.AuthenticateForm .form-title,.LoginForm .form-title,.Thankyou .form-title{

    margin-top: 50px !important;

}

.Thankyou h4:last-child{

    margin-top: 40px;

    font-size: 16px;

    text-align: center;

    line-height: 28px;

}

.Thankyou .click-me{

    font-weight: bold;

    cursor:pointer;

}

.Thankyou .click-me:hover{

    text-decoration: underline;

}

.LoginForm .form-title{

    margin-bottom: 40px !important;

}

.go-back:hover{

   background-color: #a4aebb;

}

.go-back{

    position: absolute;

    top:0;

    left:0;

    padding: 15px;  

}

.tool,.go-back{

    cursor: pointer;

}

.ResetForm .tooltip.in,.AuthenticateForm .tooltip.in,.SignupForm .tooltip.in{

    opacity: 1;

}

.AuthenticateForm .tool{

    top:5px;

}

.AuthenticateForm h5{

    color: #fff;

    text-align: center;

}

.AuthenticateForm .help-container{

    margin-bottom: 40px;

}

.Authenticate_code_container{

    clear: both;

    float: left;

    width: 100%;

    margin-top: 40px !important;

}

.AuthenticateForm form{

    float: left;

    width: 100%;

}

.SignupForm,.LoginForm,.ResetForm,.AuthenticateForm,.Thankyou,#Home{

    transform: translateX(-100%);

    transition-duration: 0.5s;

    transition-property: transform;

    transition-timing-function: ease-in-out;

    position: absolute;

}

.form-activated{

    transform: translateX(0) !important;

    transition-delay:0.3s;

    transition-duration: 0.5s;

    transition-property: transform;

    transition-timing-function: ease-in-out;

}

.LoginForm .action2{

    float: left;

    margin-top: 25px;

    width: 100%;

    text-align: center;

    cursor: pointer;

}

.LoginForm .my-btn-container{

    width: 100%;

}

.LoginForm .action2:hover{

    text-decoration: underline;

}

#Home h3{

    text-align: center;

    color: #fff;

}

#Civic,#Business,#Citizen{

    padding-top: 40px;

    padding-bottom: 40px;

    border-bottom: 1px solid #fff;

}

#Civic{

    padding-top: 20px;

}

#Citizen{

    border-bottom: 0px !important;

}

.content .home-btn{

    position: absolute;

    top:0;

    right: 15px;

    font-size: 20px;

    cursor: pointer;

}

.content .home-btn:hover{

    text-decoration: underline;

}

.SignupForm .Suggestion-box{

    position: absolute;

    width: 100%;

    height: 160px;

    overflow-y: auto;

    background-color: rgba(87,92,102,1);

    z-index: 1000;

    box-shadow: 0px 3px 8px #575b66;

}

.Suggestion-box h4{

    text-align: center;

}

.Suggestion-box-close{

    color: #fff;

    position: absolute;

    right: 5px;

    top: 2px;

    cursor: pointer;

}

.hide-box{

    display: none;

}

.Suggestion-box p{

    margin: 0;

    padding: 10px 15px;

    border-top: 1px solid #fff;

    cursor: pointer;

    transition: 0.2s ease-in-out;

}

.Suggestion-box p:hover{

    background-color: #777983;

    transition: 0.2s ease-in-out;

}

@media (max-width:700px)

{

    .login{  

        background-size: initial;

        background-repeat: no-repeat;

        background-position: center;

        background-attachment: fixed;

     }

    .login .content{

        width: 100%;

        padding : 15px;

    }

    .form-activated{

        background-position: 50% 20%;

    }

    .login .logo{

        display:none;

    }

    .SignupForm .tool, .ResetForm .tool, .AuthenticateForm .tool{

        right: -10px;

    }

    .ResetForm .tool{

        top: -55px;

    }

    .LoginForm .tool{

        float: right;

    }

    .SignupForm .action2,#Home .action2{

        margin-left: 15px;

    }

}