@font-face {
    font-family: 'play_regular';
    src: url('../fonts/Play-Regular.ttf');
}

@font-face {
    font-family: 'poppins_regular';
    src: url('../fonts/Poppins-Regular.ttf');
}

@font-face {
    font-family: 'metro';
    src: url('../fonts/Metrophobic-Regular.ttf');
}
.error{
    color:red
}
body {
    font-family: 'metro', sans-serif !important;
    font-size: small;
}

.content-wrapper {
    background-color: #fcfcfc !important;
}

.preloader {
    background-color: #fff !important;
}

hr.dotted {
    border-top: 2px dotted #999;
}

.alert-ajax {
    position: absolute !important;
    width: 100%;
}

.btn-detail {
    font-size: 13px;
    font-weight: 600;
    color: #0e5ca9;
    background-color: #fff !important;
    border-color: #fefefe !important;
    box-shadow: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.btn-detail:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22);
    color: #fff;
    background-color: #0e5ca9 !important;
    font-weight: 300;
}

.card-primary.card-outline {
    border-top: 3px solid #0e5ca9 !important
}
.card-primary.card-outline-tabs>.card-header a.active {
    border-top: 3px solid #0e5ca9 !important;
}
.card-primary:not(.card-outline)>.card-header {
    background-color: #0e5ca9 !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #0e5ca9 !important;
}

.login-card-body,
.register-card-body {
    border-top: 4px solid #0e5ca9;
}

.bg-pcb {
    background-color: #0e5ca9 !important;
    color: #fff !important;
}
.navbar-light .navbar-nav .nav-link {
    color: #ffffff !important;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff !important;
    background-color: #0e5ca9;
}
.nav-pills .nav-link {
    color: #333 !important;
}
.bg-pct {
    background-color: #333 !important;
    color: #fff !important;
}

.txt-pcb {
    color: #0e5ca9 !important;
}

.txt-pct {
    color: #333 !important;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #333;
    color: #fff;
}

.small-box .icon {
    color: #333
}

.small-box>.small-box-footer {
    background-color: #0e5ca9;
    color: #fff !important;
}

.small-box>.small-box-footer:hover {
    background-color: #333;
    color: #fff !important;
}

.small-box:hover .icon {
    color: #333
}

.btn.bg-pcb:hover {
    background-color: #333 !important;
    color: #fff !important;
}

.txt-pcb:hover {
    color: #333 !important;
    text-decoration: underline;
}

#calendar .btn {
    background-color: #0e5ca9 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
}
.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
    height: 100px;
}

/* Right Side Modal */
.modal-dialog {
    max-width: 80%;
}

.modal-dialog-slideout {
    min-height: 100%;
    margin: 0 0 0 auto;
    background: #fff;
}

.modal.fade .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(100%, 0)scale(1);
    transform: translate(100%, 0)scale(1);
}

.modal.fade.show .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    display: flex;
    align-items: stretch;
    -webkit-box-align: stretch;
    height: 100%;
}

.modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-dialog-slideout .modal-content {
    border: 0;
}

.modal-dialog-slideout .modal-header,
.modal-dialog-slideout .modal-footer {
    height: 4rem;
    display: block;
}
/* loader */
.loader {
position: absolute;
background-color: #fff;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100vh;
z-index: 9999;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after {
position: absolute;
top: 0;
content: '';
}

.jimu-primary-loading:before {
left: -19.992px;
}

.jimu-primary-loading:after {
left: 19.992px;
-webkit-animation-delay: 0.32s !important;
animation-delay: 0.32s !important;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after,
.jimu-primary-loading {
background: #076fe5;
-webkit-animation: loading-keys-app-loading 0.8s  infinite ease-in-out;
animation: loading-keys-app-loading 0.8s infinite ease-in-out;
width: 13.6px;
height: 32px;
}

.jimu-primary-loading {
text-indent: -9999em;
margin: auto;
position: absolute;
right: calc(50% - 6.8px);
top: calc(50% - 16px);
-webkit-animation-delay: 0.16s !important;
animation-delay: 0.16s !important;
}

@-webkit-keyframes loading-keys-app-loading {

0%,
80%,
100% {
    opacity: .75;
    box-shadow: 0 0 #076fe5;
    height: 32px;
}

40% {
    opacity: 1;
    box-shadow: 0 -8px #076fe5;
    height: 40px;
}
}

@keyframes loading-keys-app-loading {

0%,
80%,
100% {
    opacity: .75;
    box-shadow: 0 0 #076fe5;
    height: 32px;
}

40% {
    opacity: 1;
    box-shadow: 0 -8px #076fe5;
    height: 40px;
}
}