/* Html replace style */
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    html {
      transform: rotate(-90deg);
      transform-origin: left top;
      width: 100vh;
      overflow-x: hidden;
      position: absolute;
      top: 100%;
      left: 0;
    }
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: #388BD4;
    text-decoration: none;
}

a:hover {
    color: #388BD4;
}

a:visited {
    color: #388BD4;
}

a:active {
    color: #388BD4;
}

textarea {
    resize: none;
}

/* Global Style */
.bg-title {
    background-color: #a42765;
}

.bg-titlebar {
    background-image: url('/imgs/titlebar.jpg');
    background-repeat: repeat-x;
    height: 72px;
}

.bg-menubar {
    background-color: #ddd;
    height: 64px;
}

.bg-menubar a:active, a:link, a:visited {
    color: #a42765;
}

.master-content {
    padding-top: 72px;
    padding-bottom: 64px;
}

.chk-gray { accent-color: #888; }

.bg-black { background-color: #000; }
.bg-lightblue { background-color: #e9f3fe; }
.bg-gray { background-color: #888; }
.bg-darkgray { background-color: #555; }
.bg-lightgray { background-color: #ddd; }
.bg-red { background-color: #f00; }

.btn-blue {
    background-color: #388BD4;
    color: #fff;
    font-size: small;
}

.btn-blue:hover {
    background-color: #fff;
    border-color: #388BD4;
    color: #388BD4;
    font-size: small;
}

.btn-white {
    background-color: #fff;
    border-color: #888;
    color: #888;
    font-size: small;
}

.btn-white:hover {
    background-color: #888;
    color: #fff;
    font-size: small;
}

.btn-gray {
    background-color: #888;
    color: #fff;
    font-size: small;
}

.btn-gray:hover {
    background-color: #fff;
    border-color: #888;
    color: #888;
    font-size: small;
}

.btn-green {
    background-color: #71BC78;
    color: #fff;
    font-size: small;
}

.btn-green:hover {
    background-color: #fff;
    border-color: #71BC78;
    color: #71BC78;
    font-size: small;
}

.btn-red {
    background-color: #f00;
    color: #fff;
    font-size: small;
}

.btn-red:hover {
    background-color: #fff;
    border-color: #f00;
    color: #f00;
    font-size: small;
}

.btn-trans {
    background-color: transparent;
    border: none;
    color: #888;
    font-size: small;
}

.btn-trans:hover {
    background-color: #888;
    border-color: #888;
    color: #888;
    font-size: small;
}

.icon-blue {
    background-color: #388BD4;
    border-radius: 50%;
    color: #fff;
    margin-left: -18px;
    margin-top: 28px;
    padding: 5px 6px 5px 6px;
    position: absolute;
}

.icon-green {
    background-color: #71BC78;
    border-radius: 50%;
    color: #fff;
    margin-left: -18px;
    margin-top: 28px;
    padding: 5px 6px 5px 6px;
    position: absolute;
}

.icon-orange {
    background-color: #FFA343;
    border-radius: 50%;
    color: #fff;
    margin-left: -18px;
    margin-top: 28px;
    padding: 5px 6px 5px 6px;
    position: absolute;
}

.btn-num {
    background-color: #888;
    color: #fff;
    font-size: small;
}

.btn-num:focus, .btn-num.active {
    background-color: #FFA343;
    border-color: #fff;
    color: #fff;
    font-size: small;
}

.btn-num-pass {
    color: #fff;
}

.btn-num-pass i {
    color: #71BC78;
}

.btn-num-pass span {
    color: #fff;
}

.btn-num-pass:focus, .btn-num-pass.active{
    border-color: #fff;
}

.btn-num-nopass {
    color: #fff;
}
.btn-num-nopass i {
    color: #f00;
}

.btn-num-nopass span {
    color: #fff;
}

.btn-num-nopass:focus, .btn-num-nopass.active{
    border-color: #fff;
}

.txt-blue { color: #388BD4; }
.txt-green { color: #71BC78; }
.txt-gray { color: #888; }
.txt-darkgray { color: #555; }
.txt-lightgray { color: #ddd; }
.txt-white { color: #fff; }
.txt-red { color: #f00; }
.txt-yellow { color: #FDDD5C; }

.txt-42 { font-size: 42px; }

.w-20 { width: 20%; }

smaller, .smaller {
    font-size: 0.675em;
}

.txt-aling-justify {
    text-align: justify;
    text-justify: inter-word;
}

.div-action {
    background-color: #eee;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    bottom: 64;
    height: 0;
    overflow-x: hidden;
    position: fixed;
    transition: 0.1s;
    width: 100%;
    z-index: 9998;
}

.div-score {
    background-color: #000;
    bottom: 64;
    height: 0;
    overflow-x: hidden;
    position: fixed;
    transition: 0.1s;
    width: 100%;
    z-index: 9998;
}

.div-filter {
    background-color: #fff;
    height: 100%;
    overflow-x: hidden;
    position: fixed;
    right: 0;
    top: 0;
    transition: 0.1s;
    width: 0px;
    z-index: 9999;
}

.div-right-panel {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
    transition: 0.1s;
}

/* Login Page */
.txt-login{
    background-color: transparent;
    border-left: none;
    border-top: none;
    border-right: none;
    border-radius: 0%;
    color: white;
}

.txt-login::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #fff;
}

.txt-login:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fff;
}
  
.txt-login::-ms-input-placeholder { /* Microsoft Edge */
    color: #fff;
} 

.txt-login:focus {
    background-color: transparent;
    color: #fff;
}

.btn-login {
    background-color: #a42765;   
}

.img-icon-pass {
    content: url('/imgs/pass_icon.png');
}

.img-icon-nopass {
    content: url('/imgs/no_pass_icon.png');
}

.img-icon-na {
    content: url('/imgs/na_icon.png');
}

/* Homp Page */
.bg-home-profile {
    background-image: url('/imgs/profile_title.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 150px;
}

.progress-default {
    background-color: #fff;
    border: solid 1px #ddd;
    border-radius: 16px;
    height: 25px;
    padding: 2px;
}

.progress-bar-c1 {
    background-color: #ddd;
    border-radius: 16px;
    width: 100%;
}

.progress-bar-c1.approved {
    background-color: #FB7EFD;
    width: 100%;
}

.progress-bar-c2 {
    background-color: #7442C8;
    border-radius: 16px;
}

.progress-bar-c3 {
    background-color: #388BD4;
    border-radius: 16px;
}

.progress-bar-c4 {
    background-color: #71BC78;
    border-radius: 16px;
}

.progress-bar-c5 {
    background-color: #FDDD5C;
    border-radius: 16px;
}

.progress-bar-c6 {
    background-color: #ddd;
    border-radius: 16px;
    width: 100%;
}

.progress-bar-c6.approved {
    background-color: #FFA343;
    width: 100%;
}

.progress-bar-c7 {
    background-color: #FC2847;
    border-radius: 16px;
    width: 100%;
}

.check_noapprove {
    color: #ddd;
}

.check_approve {
    color: #00a018;
}