@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'), url(../font/NYDWBdD4gIq26G5XYbHsFD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Regular'), local('Roboto-Regular'), url(../font/HV_H5nosKj8mZupFxrHqHA.woff) format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'), url(../font/mbmhprMH69Zi6eEPBYVFhT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(../font/PwZc-YbIL414wB9rB1IAPT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: local('Roboto Black'), local('Roboto-Black'), url(../font/phsu-QZXz1JBv0PbFoPmED8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(../font/7m8l7TlFO-S3VkhHuR0at0bnXQ06sCSpaytluCdpFnY.woff) format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'), url(../font/siQR0c1plrd8i43rIfDOFfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
    }

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(../font/OLffGBTaF0XFOW1gnuHF0UbnXQ06sCSpaytluCdpFnY.woff) format('woff');
}

@font-face {
    font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(../font/t6Nd4cfPRhZP44Q5QAjcC0bnXQ06sCSpaytluCdpFnY.woff) format('woff');
}

@font-face {
    font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), url(../font/bmC0pGMXrhphrZJmniIZpUbnXQ06sCSpaytluCdpFnY.woff) format('woff');
}
@font-face {
  font-family: 'UTM-BryantLG';
  font-style: normal; 
  src: local('UTM-BryantLG'), local('UTM-BryantLG'), url(../fonts/UTM-BryantLG.woff) format('woff');
 
}
html {
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    background: #fbfbfb;
    font-weight: 300;
    font-size: 15px;
    color: #D2D2D2;
    -webkit-font-smoothing: antialiased;
}
body.login,.fakeblur{
     background: url(./background/lg/night.jpg) fixed;
        background-size: 100% 100%;
    background-position: center;
}
body.login.morning,.fakeblur.morning{
     background: url(./background/lg/morning.jpg) fixed;
     background-size: 100%
    
}
body.login.noon,.fakeblur.noon{
     background: url(./background/lg/noon.jpg) fixed;
     background-size: 100%
     
}
body.login.afternoon,.fakeblur.afternoon{
     background: url(./background/lg/afternoon.jpg) fixed;
    background-size: 100% auto
}
body.login.night,.fakeblur.night{
     background: url(./background/lg/night.jpg) fixed;
     background-size: 100% auto
     
}
.fakeblur{
   position: absolute;
    left: -10%;
    top: -10%;
    border-radius: 10px;
    width: 123%;
    height: 118%;
    -webkit-filter: blur(5px);
    filter: blur(25px);
    background-position: center;
    z-index: 0;

}
.fakeopa{
    position: absolute;
    left: 0px;
    top:0px;
    width: 100%;
    height: 100%; 
    /*background-color: rgba(0, 0, 0, 0.08);*/
}
@media only screen and (max-width: 900px){
    body.login,.fakeblur{ 
    background-size: auto 100% !important;
    background-position: center;
    }
} 

a {
    color: #555;
    text-decoration: none;
}
.table{
    display: table;
    width: 100%;
    height: 100%;
    position: relative;
}
.table-cell{
    display: table-cell;
    width: 100%;
    height: 100%;
    
}
.table-cell.middle{
    vertical-align: middle; 
}
.container-wrap{
    background-color: rgba(0, 0, 0, 0.09);
    width: 405px;
    margin: auto;
    height: auto;
    overflow: hidden;
    position: relative;
    padding-bottom: 20px;
    top: 17%;
    border-radius: 30px;
    box-shadow: 1px 1px 1px 1px #18191b4f;
}
.container-wrap.full{
    width: 100%;
    height: 100%;
    top:0px;
    border-radius: 0px
}
.container-wrap.full .fakeopa{
    background-color: rgba(0, 0, 0, 0.6);
    width: 200%;
    height: 200%;
}
.container {
    width: 305px;
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    color: #fff;
    margin-bottom: auto;
}
.container-wrap.full .container{
    width: 100%;
    height: 100%;
    margin-top: 0px;
}
.container > header {
    margin: 0px;
    position: relative;
    display: block;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}

.container > header h1 {
    font-size: 30px;
    line-height: 38px;
    margin: 0;
    position: relative;
    font-weight: 300;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}

.container > header h2 {
    font-size: 14px;
    font-weight: 300;
    margin: 0;
    padding: 15px 0 5px 0;
    font-family: Cambria, Georgia, serif;
    font-style: italic;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}

@font-face {
    font-family: "FontAwesome";
    src: url('../font/fontawesome-webfont.eot');
    src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), 
    url('../font/fontawesome-webfont.woff') format('woff'), 
    url('../font/fontawesome-webfont.ttf') format('truetype'), 
    url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*  Font Awesome styles
    ------------------------------------------------------- */
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
}

a [class^="icon-"], a [class*=" icon-"] {
    display: inline-block;
    text-decoration: inherit;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
    vertical-align: top;
    font-size: 1.3333333333333333em;
}

.btn [class^="icon-"], .btn [class*=" icon-"] {
  /* keeps button heights with and without icons the same */
    line-height: .9em;
}

li [class^="icon-"], li [class*=" icon-"] {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}

li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
    width: 1.875em;
}

li[class^="icon-"], li[class*=" icon-"] {
    margin-left: 0;
    list-style-type: none;
}

li[class^="icon-"]:before, li[class*=" icon-"]:before {
    text-indent: -2em;
    text-align: center;
}

li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
    text-indent: -1.3333333333333333em;
}

.icon-user:before {
    content: "\f007";
}

.icon-lock:before {
    content: "\f023";
}

.icon-arrow-right:before {
    content: "\f061";
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    behavior: url(../img/ie-css3.htc);
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.form-1 {
    width: 250px;
    margin: 20px auto 0px auto;
    padding: 10px;
    position: relative;
    /*background: white;*/
    behavior: url(../img/ie-css3.htc);
    -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2);
    color: #fff;
}
.form-1 a{
    color: #fff !important
}
.form-1 .field {
    position: relative;
}

.form-1 .field i {
    left: 0px;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;
    color: #777777;
    text-align: center;
    line-height: 42px;
    pointer-events: none;
    behavior: url(../img/ie-css3.htc);
}

.form-1 input[type=text],
.form-1 input[type=password] {
    font-size: 13px;
    font-weight: 400;
    width: 100%;
    padding: 10px 18px 10px 45px;
    border: 1px solid #f0f0f0 !important;
    background: url(../img/bg.jpg) repeat top left;
    behavior: url(../img/ie-css3.htc);
    background: #fbfbfb;
}

.form-1 input[type=text] {
    margin-bottom: 10px;
}

.form-1 input[type=text]:focus,
.form-1 input[type=password]:focus,
.form-1 button[type=submit]:focus {
    outline: none;
}

.form-1 .submit {
    width: 65px;
    height: 65px;
    position: absolute;
    top: 19px;
    right: -25px;
    padding: 10px;
    z-index: 2;
    background: #ffffff;
    border-radius: 50%;
    behavior: url(../img/ie-css3.htc);
    -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2);
}

.form-1 button {
    width: 100%;
    height: 100%;
    margin-top: -1px;
    font-size: 1.4em;
    line-height: 1.75;
    color: white;
    border: none;
    border-radius: inherit;
    cursor: pointer;
    behavior: url(../img/ie-css3.htc);
}

.form-1 button:hover,
.form-1 button[type=submit]:focus {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    behavior: url(../img/ie-css3.htc);
}

.form-1 button:active {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3),
        inset 0 3px 4px rgba(0,0,0,0.3);
    behavior: url(../img/ie-css3.htc);
}

.body-wrap {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 100%;
    width: 100%;
    position: absolute;
}

.footer {
    clear: both;
    margin-top: 40px;
    color:#fff;
}

.failed {
    color: red;
    padding: 5px 0px;
    display: block;
    font-size: 12px;
}

@media only screen and (min-height: 319px) and (orientation:landscape) {
    .container {
        margin-top: 15px;
    }

    .footer {
        clear: both;
        margin-top: 10px;
    }
}

@media only screen and (min-height: 479px) and (orientation:landscape) {
    .container {
      /*  margin-top: 55px;*/
    }

    .footer {
        clear: both; 
    }
}

@media only screen and (min-height: 767px) and (orientation:landscape) {
    .container {
        margin-top: 35px;
    }

    .footer {
        clear: both;
       /* margin-top: 60px;*/
    }
} 

.labelContainer{
    position: absolute;
    /* top: -48px; */
    /* left: 0px; */
    width: 100%;
    height: 100%;
    text-align: center;
    left: 0px;
    top: 33px !important;
    font-size: 21px;
    
    font-family: 'UTM-BryantLG';

}
.labelContainer a{
    color: #fff !important;
}
.rockerlogo{
   font-family: 'UTM-BryantLG' 
}
.rockerlogo .iconlogo{
    display: inline-block;
    position: relative;
}
.rockerlogo .iconlogo.smalls{ 
    border:10px solid #3e9ab0;
    border-radius: 100%;
    margin-top: 3px; 
}
.rockerlogo .iconlogo.smalls.updatelogo{
    width: 104px;
    height: 104px;
    padding: 2px;
    margin: auto;
    display: -webkit-inline-box;
}
.rockerlogo .iconlogo.smalls.updatelogo span{
    font-size: 14px;
}
.rockerlogo .text{
    font-size: 147px;
    display: inline-block;
    line-height: 100px;
}
.textnote{
    font-family: 'UTM-BryantLG';
    padding: 20px 0px;
}
@media only screen and (max-width: 606px){
    .rockerlogo .text{
        display: none;
    }
}
.progress {
    display: block;
    text-align: center;
    width: 0;
    height: 3px;
    background: red;
    transition: width .3s;
}
.progress.hide {
    opacity: 0;
    transition: opacity 1.3s;
}
.css3 * {
    webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.1s;
}
/*bg process bar*/ 
.daonguoc .slide,.rect-auto,.c100.p51 .slice,.c100.p52 .slice,.c100.p53 .slice,.c100.p54 .slice,.c100.p55 .slice,.c100.p56 .slice,.c100.p57 .slice,.c100.p58 .slice,.c100.p59 .slice,.c100.p60 .slice,.c100.p61 .slice,.c100.p62 .slice,.c100.p63 .slice,.c100.p64 .slice,.c100.p65 .slice,.c100.p66 .slice,.c100.p67 .slice,.c100.p68 .slice,.c100.p69 .slice,.c100.p70 .slice,.c100.p71 .slice,.c100.p72 .slice,.c100.p73 .slice,.c100.p74 .slice,.c100.p75 .slice,.c100.p76 .slice,.c100.p77 .slice,.c100.p78 .slice,.c100.p79 .slice,.c100.p80 .slice,.c100.p81 .slice,.c100.p82 .slice,.c100.p83 .slice,.c100.p84 .slice,.c100.p85 .slice,.c100.p86 .slice,.c100.p87 .slice,.c100.p88 .slice,.c100.p89 .slice,.c100.p90 .slice,.c100.p91 .slice,.c100.p92 .slice,.c100.p93 .slice,.c100.p94 .slice,.c100.p95 .slice,.c100.p96 .slice,.c100.p97 .slice,.c100.p98 .slice,.c100.p99 .slice,.c100.daonguoc .slice {
    clip: rect(auto,auto,auto,auto);
}

.daonguoc .fill, .pie,.c100 .bar,.c100.p51 .fill,.c100.p52 .fill,.c100.p53 .fill,.c100.p54 .fill,.c100.p55 .fill,.c100.p56 .fill,.c100.p57 .fill,.c100.p58 .fill,.c100.p59 .fill,.c100.p60 .fill,.c100.p61 .fill,.c100.p62 .fill,.c100.p63 .fill,.c100.p64 .fill,.c100.p65 .fill,.c100.p66 .fill,.c100.p67 .fill,.c100.p68 .fill,.c100.p69 .fill,.c100.p70 .fill,.c100.p71 .fill,.c100.p72 .fill,.c100.p73 .fill,.c100.p74 .fill,.c100.p75 .fill,.c100.p76 .fill,.c100.p77 .fill,.c100.p78 .fill,.c100.p79 .fill,.c100.p80 .fill,.c100.p81 .fill,.c100.p82 .fill,.c100.p83 .fill,.c100.p84 .fill,.c100.p85 .fill,.c100.p86 .fill,.c100.p87 .fill,.c100.p88 .fill,.c100.p89 .fill,.c100.p90 .fill,.c100.p91 .fill,.c100.p92 .fill,.c100.p93 .fill,.c100.p94 .fill,.c100.p95 .fill,.c100.p96 .fill,.c100.p97 .fill,.c100.p98 .fill,.c100.p99 .fill,.c100.daonguoc .fill {
    position: absolute;
    border: 0.1em solid #63d4b8;
    width: 0.8em;
    height: 0.8em;
    clip: rect(0em,0.6em,1.1em,0em);
    border-radius: 100%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.daonguoc .bar:after,.daonguoc .fill, .pie-fill,.c100.p51 .bar:after,.c100.p51 .fill,.c100.p52 .bar:after,.c100.p52 .fill,.c100.p53 .bar:after,.c100.p53 .fill,.c100.p54 .bar:after,.c100.p54 .fill,.c100.p55 .bar:after,.c100.p55 .fill,.c100.p56 .bar:after,.c100.p56 .fill,.c100.p57 .bar:after,.c100.p57 .fill,.c100.p58 .bar:after,.c100.p58 .fill,.c100.p59 .bar:after,.c100.p59 .fill,.c100.p60 .bar:after,.c100.p60 .fill,.c100.p61 .bar:after,.c100.p61 .fill,.c100.p62 .bar:after,.c100.p62 .fill,.c100.p63 .bar:after,.c100.p63 .fill,.c100.p64 .bar:after,.c100.p64 .fill,.c100.p65 .bar:after,.c100.p65 .fill,.c100.p66 .bar:after,.c100.p66 .fill,.c100.p67 .bar:after,.c100.p67 .fill,.c100.p68 .bar:after,.c100.p68 .fill,.c100.p69 .bar:after,.c100.p69 .fill,.c100.p70 .bar:after,.c100.p70 .fill,.c100.p71 .bar:after,.c100.p71 .fill,.c100.p72 .bar:after,.c100.p72 .fill,.c100.p73 .bar:after,.c100.p73 .fill,.c100.p74 .bar:after,.c100.p74 .fill,.c100.p75 .bar:after,.c100.p75 .fill,.c100.p76 .bar:after,.c100.p76 .fill,.c100.p77 .bar:after,.c100.p77 .fill,.c100.p78 .bar:after,.c100.p78 .fill,.c100.p79 .bar:after,.c100.p79 .fill,.c100.p80 .bar:after,.c100.p80 .fill,.c100.p81 .bar:after,.c100.p81 .fill,.c100.p82 .bar:after,.c100.p82 .fill,.c100.p83 .bar:after,.c100.p83 .fill,.c100.p84 .bar:after,.c100.p84 .fill,.c100.p85 .bar:after,.c100.p85 .fill,.c100.p86 .bar:after,.c100.p86 .fill,.c100.p87 .bar:after,.c100.p87 .fill,.c100.p88 .bar:after,.c100.p88 .fill,.c100.p89 .bar:after,.c100.p89 .fill,.c100.p90 .bar:after,.c100.p90 .fill,.c100.p91 .bar:after,.c100.p91 .fill,.c100.p92 .bar:after,.c100.p92 .fill,.c100.p93 .bar:after,.c100.p93 .fill,.c100.p94 .bar:after,.c100.p94 .fill,.c100.p95 .bar:after,.c100.p95 .fill,.c100.p96 .bar:after,.c100.p96 .fill,.c100.p97 .bar:after,.c100.p97 .fill,.c100.p98 .bar:after,.c100.p98 .fill,.c100.p99 .bar:after,.c100.p99 .fill,.c100.daonguoc .bar:after,.c100.daonguoc .fill {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.c100.daonguoc .bar {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
.c100 {
    position: relative;
    font-size: 120px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    float: left;
    margin: 0 0.1em 0.1em 0;
   /* background-color: #cccccc;*/
}

.c100 *,.c100 *:before,.c100 *:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.c100.center {
    float: none;
    margin: 0 auto;
}

.c100.big {
    font-size: 240px;
}

.c100.small {
    font-size: 80px;
}

.c100>span {
    position: absolute;
    width: 100%;
    z-index: 1;
    left: 0;
    top: 0; 
    line-height: 80px;
    font-size: 0.2em;
    color: #cccccc;
    display: block;
    font-size: 20px !important;
    text-align: center;
    white-space: nowrap;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.c100:after {
    position: absolute;
    top: 0.08em;
    left: 0.08em;
    display: block;
    content: " ";
    border-radius: 50%;
    /*background-color: #f5f5f5;*/
    width: 0.84em;
    height: 0.84em;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}

.c100 .slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0em,1em,1em,0.5em);
}
 

.c100.daonguoc .bar {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

.c100:hover {
    cursor: default;
}

.c100:hover>span {
    width: 3.33em;
    line-height: 3.33em;
    font-size: 0.3em;
    color: #307bbb;
}

.c100:hover:after {
    top: 0.04em;
    left: 0.04em;
    width: 0.92em;
    height: 0.92em;
}

.c100.dark {
    background-color: #777777;
}

.c100.dark .bar,.c100.dark .fill {
    border-color: #c6ff00!important;
}

.c100.dark>span {
    color: #777777;
}

.c100.dark:after {
    background-color: #666666;
}

.c100.dark:hover>span {
    color: #c6ff00;
}

.c100.green .bar,.c100.green .fill {
    border-color: #4db53c!important;
}

.c100.green:hover>span {
    color: #4db53c;
}

.c100.green.dark .bar,.c100.green.dark .fill {
    border-color: #5fd400!important;
}

.c100.green.dark:hover>span {
    color: #5fd400;
}

.c100.orange .bar,.c100.orange .fill {
    border-color: #dd9d22!important;
}

.c100.orange:hover>span {
    color: #dd9d22;
}

.c100.orange.dark .bar,.c100.orange.dark .fill {
    border-color: #e08833!important;
}

.c100.orange.dark:hover>span {
    color: #e08833;
}


/*ed process bar*/