html, body{
    height:100%; margin:0; padding:0; font-family: 'CircularStdBook', Arial, Helvetica, sans-serif; font-size:14px; color:#999; line-height:1.42857143;
}

::-webkit-input-placeholder {color:rgba(119,119,119,0.5) !important; opacity:1;}
:-moz-placeholder {color:rgba(119,119,119,0.5) !important; opacity:1;}
::-moz-placeholder {color:rgba(119,119,119,0.5) !important; opacity:1;}
:-ms-input-placeholder {color:rgba(119,119,119,0.5) !important; opacity:1;}

/* Angular ng-hide ng-show */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}
/* Angular ng-hide ng-show */

.spinner {
    margin: 100px auto 0;
    width: 70px;
    text-align: center;
}
.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #00b4d9;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
      }
}

/* AI Inline Loader Container (In-Modal) */
.ai-loader-inline {
    padding: 30px 15px;
    text-align: center;
}
/* Animation Element Box */
.ai-loader-inline .ai-loader {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Center Glowing Core */
.ai-loader-inline .core {
    width: 16px;
    height: 16px;
    background: #00bcd4;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
    animation: aiCorePulse 1.8s infinite ease-in-out;
}
/* Teal Outer Ring */
.ai-loader-inline .ring-1 {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #00bcd4;
    animation: aiRotateRing 1.2s infinite linear;
}
/* Golden Orange Inner Ring */
.ai-loader-inline .ring-2 {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: #ffbd5e;
    animation: aiRotateRingReverse 1.6s infinite linear;
}
/* Status Text Box */
.ai-loader-inline .ai-loader-text {
    font-size: 14px;
    font-weight: 500;
    color: #767676;
    min-height: 20px;
}
.ai-loader-inline .ai-loader-text .highlight {
    color: #ffbd5e;
    font-weight: 600;
}
/* Dynamic dots animation width reservation */
.ai-loader-inline .dots {
    display: inline-block;
    width: 12px;
    text-align: left;
}
/* Keyframes */
@keyframes aiCorePulse {
    0%, 100% { transform: scale(0.85); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
}
@keyframes aiRotateRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes aiRotateRingReverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.form-group{margin-bottom:20px; position:relative;}
.form-control{ padding:13px 20px; height:48px; font-size:16px; color:#777; box-shadow:none !important; font-family: 'CircularStdBook', Arial, Helvetica, sans-serif; border-color:#e2e2e2;}
.text-primary{color: #00b4d9;}
.btn{
font-family: 'Aller_Rg', Arial, Helvetica, sans-serif;
font-size: 16px;
padding: 13px 15px;
line-height: 20px;
font-weight: 400;
text-transform:uppercase;
border-radius: 30px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;}
.btn:hover{ opacity:0.9;}
.btn.btnYellow{background:#fcae27; color:#fff; border-color:#fcae27;}

header{ background:#fff; border-bottom:1px solid #d9d9d9; padding:10px 15px; height:50px; position:fixed; top:0; width:100%; z-index:1000; display:flex; align-items:center;}
header .header-logo{ display:block; width:130px; position:absolute; left:50%; margin-left:-57px;}
header .btn{border:none; border-radius: 3px; padding:6px 12px;}
header .btn.btn-back{float:left;}
header .btn.btn-manifest{float:right;}

.wrap{ padding-top:70px;}
.wrap .form-horizontal{ margin:20px 15px;}

.form-group.scan, .form-group.date-picker{ position:relative;}
.form-group.scan .form-control{ padding-right:50px;}
.form-group.scan .btn-search{ display:block; width:50px; height:46px; background:url(../images/icon-search.png) no-repeat 50% 50%; background-size:26px 26px; position:absolute; right:0px; top:0px; border:none;}

.form-group.date-picker label{position:absolute; padding: 13px 20px; height: 48px; width:100%; background:#ffffff;}
.form-group.date-picker input{disply:none;}

.sorting-result{ margin-bottom:15px;}
.sorting-result .inner{ padding:30px 15px; text-align:center; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.sorting-result .inner div{font-family: 'Aller_Bd', Arial, Helvetica, sans-serif; font-size:40px; vertical-align:middle; color:#00b4d9;}
.sorting-result .inner div small {font-size:20px; display:block;}
.sorting-result .inner div .seq {font-size:20px; display:inline-block; width:50px; height:50px; background:#45cc21;color:#ffffff; border-radius:25px; line-height:50px;}
.sorting-result .job-note{ color:#fcae27;}
label.error{color:#ff2a00; display: block; margin-top:10px;}
.login-panel{text-align: center; color:#00b4d9; line-height: 1.6;}

.tab{}
.tab a{display:block; float:left; width:50%; text-align:center; height:30px; line-height:28px; border:2px solid #00b4d9; color:#00b4d9; text-decoration:none; outline:none;}
.tab a.active{ background:#00b4d9; color:#fff;}
.tab a:first-child{ border-radius:15px 0px 0px 15px;}
.tab a:last-child{ border-radius:0px 15px 15px 0px;}
.tab.warehouse a{ border-radius:15px; width: 100%;}

.result-success,.result-failure{ display:block; width:80px; height:80px; background:url(../images/icon-scan-result.png) no-repeat 0px 0px; background-size:160px 80px; margin:20px auto 0;}
.result-success{ background-position:0px 0px;}
.result-failure{ background-position:-80px 0px;}

#manifest-list .scan-result{float:right; margin-right:10px;}
#manifest-list .arrow{float:right;}
#manifest-list .avatar{float:right;border-radius: 50%;overflow: hidden; margin-right: 5px; margin-top:-5px;}
#manifest-list .avatar img{width: 30px;height: 30px;}
#manifest-list .name{float:right; margin-right: 20px; padding-left: 10px;}
#manifest-list .user-info{float:right; margin-top:-8px;}
#manifest-list .user-info .name{float: left;display:block;margin-right:0;padding-left:0;font-size:13px;}
#manifest-list .user-info .mobile{display:block;padding-left:0; font-size:13px;}
#manifest-list .delete-btn{color:#f00;}

.modal-with-list .avatar{float:left;border-radius: 50%;overflow: hidden;margin-right: 5px; margin-top:-5px;}
.modal-with-list .avatar img{width: 30px;height: 30px;}
.modal-with-list .name{margin-right: 5px;}
.modal-with-list .mobile{margin-right: 5px;}
.modal-with-list .ticked{float:right; display: none}
.modal-with-list .list-group-item.active,
.modal-with-list .list-group-item.active:hover,
.modal-with-list .list-group-item.active:focus{background-color: #00b4d9; border-color: #00b4d9}
.modal-with-list .list-group-item.active .ticked{display:block;}

.select-user-info{float:left; display:block; margin-bottom: 10px;}
.select-user-info .avatar{float:left;border-radius: 50%;overflow: hidden; margin-right: 5px; margin-top:-5px;}
.select-user-info .avatar img{width: 30px;height: 30px;}
.select-user-info .name{float:left; display:block;margin-right: 10px;}
.select-user-info .mobile{float:left; display:block;}
.select-user-info+hr{clear: both;margin-top: 10px;margin-bottom: 10px;}

.modal .spinner{margin: 50px auto;}

#camera{-webkit-transform: scaleX(-1);}

.clearfix:after {clear: both;}