label {

color: white;

}



#frm-passwordForm {

    border-top: 1px solid #3f4954;

}



.help-block {

color: #c25d4b;

}



#loginbox .form-actions {

    margin-top: 0px;

}



body {

height: auto;

}



h1, h2, h3, h4, p {

    color: white;

    font-weight: normal;text-align: center;

    display: block;



}



h1 {

    font-size: 25px;



}



h2,legend {font-size: 20px}



#guide {

padding-bottom: 25px;

}



#guide:after {

    content: ' ';

    clear: both;

    display: block;

}



#guide a {

width: 45%;

    margin: 2.5%;

    padding-top: 45%;

    display: block;

    float: left;

    position: relative;

    color: white;

    transition: all 0.3s;

    font-weight: bold;

}

#guide:hover a {



    transform: scale(0.95);

}



#guide a:hover, #guide a:focus{

    transform: scale(1.05);

}



#guide {

width: 100%;

}



#guide:after {

    content: ' ';

    clear: both;

}





#guide a .text {

    position: absolute;

    bottom: 10%;

    left: 0px;

    text-align: center;

    width: 100%;

    display: block;

    font-size: 16px;

}



#guide .icon {

position: absolute;

    top: 0;

    left: 0;

    width: 50%;

    height: 50%;

    margin: 25%;

    font-size: calc(30px + 3vw);

    vertical-align: middle;

    text-align: center;

}



#front {



    margin: 50px auto 40px;

}

 .container {

    min-width: 400px;

    max-width: 500px;

    width: 50% ;

    position: relative;

}



.regbody .container {

    min-width: 400px;

    max-width: 95%;

    width: 600px;

    position: relative;

}



.list .btn {

    width: calc(100% - 10px);

    box-sizing: border-box;

    margin: 3px 0;

}



@media (max-width: 480px) {

    #front {

        margin: 50px 2.5%;

    }



    .container {

        width: 95% !important;

        min-width: 250px !important;

    }



    body {

        margin-bottom: 0px;

        }

}



#frontbody {

    margin:0 auto;

    text-align: center;

}



#front .logo {

max-width: 300px;

}



@media(max-width: 1350px) {

    h1 {font-size: 20px}

    h2,legend {font-size: 16px}

    #guide a .text {

        bottom: 5%;

        font-size: 14px;

    }

}



.registration .form-horizontal .control-label, .registration .form-horizontal .controls {

}



#front .registration input, #front .registration select, #front .registration textarea{

   width: 100%;

    box-sizing: border-box;

    font-size: 18px;

    border-radius: 0px;

    padding: 10px;

    height: auto;

}



#front .registration .checkbox input {

    width: auto;

}



#front .registration .checkbox label {

text-align: left;

}



textarea {

    resize:vertical;

}



.big input, .big select {

    font-size: 20px !important;;

}



.registration {

    margin: 30px 0 15px;

    padding: 15px 0 0;

    border-top: 1px solid #3f4954;

    border-bottom: 1px solid #3f4954;

}



.registration div:last-child .fullbtn{

margin-bottom:  0px !important;

}



#front .registration input[type=submit] {

width: auto;

padding: 15px;

float: none;

display: inline-block;

}



input[type=submit] {

display: block;

    float: left;

}



.logoh {



    display: block;

    position: relative;

    text-align: center;

    margin: 0px;

    height: 150px;

    width: 100%;

}





.regbody .logoh {

    width: 150px;

    height: 75px;

    margin: 0px 0px -75px;

}



.regbody {

margin-top: 0px !important;

}



.regbody #front {

margin-top: 15px;

}



.regbody h1 {

font-size: 20px;

    margin: 17px 0px;

    text-align: right;

}



.regbody  h2 {

margin: 30px 0 0;

}



#frontbody, .logoh, .logo,#front {

    transition: all 0.3s;

}



select:invalid {

color: #999 !important;

}



select:focus {

    color: #000 !important;

}



.fullbtn {

width: 100%;

    box-sizing: border-box;

    margin: 0px 0px 20px;

    padding: 20px;

    display: block;

    color: white;

    font-size: 20px;

    transition: all 0.3s;

    line-height: 150%;

}



a.fullbtn:hover, a.fullbtn:focus {

    color: white !important;

    transform: scale(1.05,1.1);

}





.logoh a img {

border-width:  0px;

}



.smile {

display:block;

-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);

    font-size: 20px;

    margin: 0px 0px 20px;

}



@keyframes alert-animation {

    0% {height: 0px; opacity: 0; margin-top: 0px;margin-bottom: 0px; padding-top: 0px;padding-bottom: 0px;border-top-width: 0px;border-bottom-width: 0px;}

    10% {height: auto; opacity: 1; padding: 10px;border-top-width: 1px;border-bottom-width: 1px}

    90% {height: auto; opacity: 1; padding: 10px;border-top-width: 1px;border-bottom-width: 1px}

    100% {height: 0px; opacity: 0; margin-top: 0px;margin-bottom: 0px; padding-top: 0px;padding-bottom: 0px;border-top-width: 0px;border-bottom-width: 0px;}

}

@keyframes alert-animation-fast {

    0% {height: auto; opacity: 1; padding: 10px;border-top-width: 1px;border-bottom-width: 1px}

    90% {height: auto; opacity: 1; padding: 10px;border-top-width: 1px;border-bottom-width: 1px}

    100% {height: 0px; opacity: 0; margin-top: 0px;margin-bottom: 0px; padding-top: 0px;padding-bottom: 0px;border-top-width: 0px;border-bottom-width: 0px;}

}



.flash-alert {

    animation-name: alert-animation;

    animation-duration: 4s;

    animation-fill-mode: forwards;

    overflow: hidden;

}



.flash-quick-alert {

    animation-name: alert-animation-fast;

    animation-duration: 2s;

    height: auto; opacity: 1; padding: 10px;border-top-width: 1px;border-bottom-width: 1px;

    animation-fill-mode: forwards;

    overflow: hidden;

}



.help-block {

color: white;

    text-align: left;

}



.text-danger {



    color: #c25d4b;

}



.form-horizontal .control-group {

    margin: 20px 0;

}



legend {

color: white;

    border-bottom: 1px solid #3f4954;

    margin-bottom: 0px;

}



ul input {

padding: 0px !important;

}



#spinner {

display: block;

font-size: 100px;

    color: white;

    position:fixed;

    left: 50%;

    top: 50%;

    padding: 25px;

    width: 100px;

    height: 100px;

    margin: -120px 0 0 -75px;

    z-index: 100;

    animation-name: rotate;

    animation-duration: 2s;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

    background: rgba(255,255,255,0.3);

    border-radius: 75px;

    display: none;

}



@keyframes rotate {

    from {transform: rotate(0deg);}

    to {transform: rotate(360deg);}

}



.fillbox {

overflow: hidden;

    max-height: 80px;

    position: relative;

}



.fillbox .arrow {

    float: right;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;;

}



.fillbox.open .arrow {

    -webkit-transform: rotate(180deg);

    -moz-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    -o-transform: rotate(180deg);

    transform: rotate(180deg);

}



.fillbox.open {

    max-height: inherit;

}



.fillbox.open .fillboxend {

    height: 0px

}



.fillboxend {

content: " ";

    display:block;

    width: 100%;

    height: 60px;

    box-shadow: inset 0px -35px 25px -10px rgba(46,54,63,1);

    position: absolute;

    bottom: 0px;

    cursor: pointer;

}



.fillbox h4 {

text-align: left;

    border-bottom: 1px solid #3f4954;

    font-size: 14px;

    padding-bottom: 5px;

    cursor: pointer;

}



.fillbox a {

display: block;

    color: white;

    text-align: left;

}



.fillbox a:hover {

padding-left: 10px;

}



.animate {

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}



.bigform .control-label {

    display: block;

    text-align: left;

    width: 100%;

    height: auto;

    margin: 0;

    padding: 0;

}



.bigform .control-label label {

margin: 0 0 15px 0;

    font-size: 20px;

}

.bigform .form-group {

margin-bottom: 15px

}



.bigform .controls input {

padding: 15px !important;

    display: inline-block !important;

    margin: 0px auto;

    float: right;

}





.bigform .controls {

width: 100%;

    margin: 0px 0 15px;

    text-align: center;

}



.slide-in {

    overflow: hidden;

    animation-name: slide;

    animation-iteration-count: 1;

    animation-timing-function: ease-out;

    animation-duration: 0.3s;

}



@keyframes slide {

    0% {

        max-height: 0px;

        padding-top: 0px;

        padding-bottom: 0px;

    }

    100% {

        max-height: 500px;

    }

}



input[name="lostPwd"] {



}



.navbar-inverse {

    background-color: rgba(0,0,0,0.5);

    height: 40px;

    top: 0px;

}







.navbar .icon {

    margin-top: 3px !important;

}



.navbar a {

    -webkit-transition: all 0.2s;

    -moz-transition: all 0.2s;

    -ms-transition: all 0.2s;

    -o-transition: all 0.2s;

    transition: all 0.2s;

    border-bottom: 0px solid rgba(0,0,0,0.8);

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

}



.navbar a:hover, .navbar a:focus {

   padding: 10px 15px 15px !important;

    margin: 0px -10px;

    z-index: 2;

    background: #0f1114 !important;

}



.step-login .help-block {

    display: none;

}

.step-login .text-danger {

    display: block;

}



.datagrid  {

background: white;

}



.list{

    color: white;

    width: 100%;

}



.list td ,.list th{

padding: 5px;

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

text-align: left;

}



.list a {

color: white;

}



.list tr:hover td, .list th {

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

}



.list tr {

margin: 5px 0;

    border-collapse: collapse;

    border-top: 2px solid #2E363F;

}



a:hover, a:active, a:focus {

    /* styling for any way a link is about to be used */

    outline: 0 !important;

}



input[readonly] {

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

    cursor: default;

    color: white;

    border: 0;

}



.username {

marign: 0;

}



.username .icon {

display: block;

    font-size: 50px;

    width: 50px;

    height: 50px;

    margin: 0px auto;

    color: #27a9e3;

}



.red {

    color: #cc0000

}



.green {

    color: #00cc00

}



.fullbtn {

position: relative;

}



.fullbtn .smalldate {

    position: absolute;

    right: 8px;

    bottom: 3px;

    color: rgba(255,255,255,0.5);

    font-size: 14px;

}



.small-lost {

    background: transparent;

    color: white;

    text-shadow: none;

    border: 0;

    /*padding: 15px 0px !important;*/

    transition: 0.3s all !important;

}



.form-group {

    text-align: left;

    display: flex;

    justify-content: stretch;

    align-items: center;

    margin: 5px 0;

}



.bigform .form-group {

    display: block;

}



.bigform .form-group .control-label{

    margin-left: 15px;

}



.form-group .col-sm-9 {

    flex-grow: 1;

    margin-left: 15px;

}



.navbar .nav {

    margin: 0 0px 0 0;

}



.navbar .nav>li>a {

    float: none;

    padding: 10px 5px 10px;

}



.navbar .nav:nth-child(2) {

    display: inline-block;

    margin: 0px auto;

    float: none;

    }