/* OVERRIDE CSS - CORPORATE COLOR PALETTE */
.footer{bottom:15px;}
.login-container .validation-error{color:#d32f2f;}
.login-container .page-container{padding-top:0px;}
body.login-container, body.root-content{background-image: url('../images/bg.jpg');background-color: #f8f9fb;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}
.select2-selection--multiple .select2-search--inline .select2-search__field{margin-left:7px !important;}
.page-title{padding: 10px 36px 32px 0;}
.page-header-content{padding:0px;}

.form-group label{font-weight:bold;}
label.validation-error-label{font-weight: normal;}
.form-group.has-feedback-image input[type=text]{padding-left:70px;}
.form-group.has-feedback-image .form-control-feedback{width:65px;}
.req{color:#d32f2f;}
.no-resize{resize:none;}
body.sidebar-xs a.navbar-brand > span{display: none !important;}
.picker--opened .picker__holder{color:#1e2a36;}
.select2.select2-container{color:#1e2a36;}

.modal-backdrop{z-index:1000;}
.modal{z-index:1001;}
.modal-body-create{position:relative;}
.modal-body-create .modal-loading{position:absolute;
    width: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;
    text-align:center;
}

.panel.has-bg-image{background-image:url(../images/backgrounds/panel_bg.png)}
.element-hover{cursor:pointer;}
.content-input .panel-footer{background-color:#1e2a36;}
button.saveCreate{min-width:100px;margin-right:10px;}

/* HELPER */
.p0{padding:0px;}
.m0{margin:0px;}
.mb0{margin-bottom:0px;}
.mt0{margin-top:0px;}
.ml10{margin-left:10px;}
.mr10{margin-right:10px;}
.bt0{border-top: 0px !important;}
.b0{border:0px !important;}
.font13{font-size:13px;}
.font18{font-size: 18px;}
.font10{font-size: 10px;}
table.table-striped-bold{border-bottom: 2px solid #d7dce3;}
table.table-striped-bold tr td{border-top: 2px solid #d7dce3;}

/* DATATABLE */
.dataTables_processing{
    left:45%;
    margin:0px;
    width: auto;
    background: none;
    background-color: rgba(1, 74, 154, 0.9);
    color: #FFF;
    padding: 20px;
    border-radius:5px;
    height: auto;
}
.datatable-header{border-bottom:0px;}
.toolbar-item-datatable{padding:20px;display:inline-block;}

.calendar{margin-left:-15px !important;}
.daterangepicker.dropdown-menu{margin-top:-5px;}

/* PRIMARY COLOR PALETTE */
.sidebar{background-color: #051930 !important;}
.navbar-header{
    background-color: #051930 !important;
}
/* Match navbar brand area width to sidebar on desktop */
@media (min-width: 769px){
    .header-highlight .navbar-header{width:260px !important;}
    .sidebar-xs .header-highlight .navbar-header{width:56px !important;}
}
.navigation>li.active>a, .navigation>li.active>a:focus, .navigation>li.active>a:hover {
    background-color: #3b73c5 !important;
    color: #fff;
}

/* BUTTONS - PRIMARY PALETTE */
.btn-primary {
    background-color: #014a9a !important;
    border-color: #014a9a !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #3b73c5 !important;
    border-color: #3b73c5 !important;
}
.btn-info {
    background-color: #0288d1 !important;
    border-color: #0288d1 !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: #3b73c5 !important;
    border-color: #3b73c5 !important;
}
.btn-success {
    background-color: #2e8b57 !important;
    border-color: #2e8b57 !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: #3b73c5 !important;
    border-color: #3b73c5 !important;
}
.btn-warning {
    background-color: #ffb100 !important;
    border-color: #ffb100 !important;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background-color: #3b73c5 !important;
    border-color: #3b73c5 !important;
}
.btn-danger {
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: #3b73c5 !important;
    border-color: #3b73c5 !important;
}

/* STATUS COLORS */
.label-success, .bg-success {
    background-color: #2e8b57 !important;
    color: #ffffff !important;
}
.label-info, .bg-info {
    background-color: #0288d1 !important;
    color: #ffffff !important;
}
.label-warning, .bg-warning {
    background-color: #ffb100 !important;
    color: #1e2a36 !important;
}
.label-danger, .bg-danger {
    background-color: #d32f2f !important;
    color: #ffffff !important;
}

/* ALERT COLORS */
.alert-success {
    background-color: #e8f5e9 !important;
    border-color: #2e8b57 !important;
    color: #2e8b57 !important;
}
.alert-info {
    background-color: #e0f7fa !important;
    border-color: #0288d1 !important;
    color: #0288d1 !important;
}
.alert-warning {
    background-color: #fff3cd !important;
    border-color: #ffb100 !important;
    color: #1e2a36 !important;
}
.alert-danger {
    background-color: #ffebee !important;
    border-color: #d32f2f !important;
    color: #d32f2f !important;
}

/* PANEL COLORS */
.panel-primary > .panel-heading {
    background-color: #014a9a !important;
    border-color: #014a9a !important;
    color: #ffffff !important;
}
.panel-info > .panel-heading {
    background-color: #0288d1 !important;
    border-color: #0288d1 !important;
    color: #ffffff !important;
}
.panel-success > .panel-heading {
    background-color: #2e8b57 !important;
    border-color: #2e8b57 !important;
    color: #ffffff !important;
}
.panel-warning > .panel-heading {
    background-color: #ffb100 !important;
    border-color: #ffb100 !important;
    color: #1e2a36 !important;
}

/* BACKGROUND COLORS */
body {
    background-color: #f8f9fb !important;
}
.page-container, .content-wrapper {
    background-color: #f8f9fb !important;
}

.panel-flat > .panel-heading {
    background-color: #f8f9fb !important;
    border-bottom: 1px solid #d7dce3 !important;
    color: #1e2a36 !important;
}

/* TEXT COLORS */
.text-primary, .panel-title, .page-title h4 {
    color: #1e2a36 !important;
}
.text-muted, .help-block, .panel .text-muted {
    color: #5f6b7a !important;
}
.navbar-brand {
    color: #ffffff !important;
}
.sidebar .navigation > li > a {
    color: #cfd8e3 !important; /* light gray for readability on dark sidebar */
}
.sidebar .navigation > li > a:hover {
    background-color: #2a3a4f !important; /* subtle hover per reference UI */
    color: #ffffff !important;
}

/* FORM ELEMENTS */
.form-control {
    border-color: #d7dce3 !important;
    background-color: #ffffff !important;
    color: #1e2a36 !important;
}
.form-control:focus {
    border-color: #3b73c5 !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 115, 197, 0.25) !important;
}

/* TABLE COLORS */
.table > thead > tr > th {
    background-color: #f8f9fb !important;
    border-color: #d7dce3 !important;
    color: #1e2a36 !important;
}
.table > tbody > tr > td {
    border-color: #d7dce3 !important;
    color: #1e2a36 !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f5f9ff !important;
}

/* ACCENT COLORS */
.progress-bar {
    background-color: #00bcd4 !important;
}
.datatable-header {
    background-color: #f8f9fb !important;
    border-bottom: 1px solid #d7dce3 !important;
}

/* HOVER EFFECTS */
.table > tbody > tr:hover {
    background-color: #f5f9ff !important;
}
.panel:hover {
    box-shadow: 0 2px 8px rgba(1, 74, 154, 0.1) !important;
}

/* NAVIGATION LINKS */
a, a:link, a:visited {
    color: #014a9a;
}
a:hover, a:focus, a:active {
    color: #3b73c5;
}

/* NAVBAR USER DROPDOWN */
.navbar-nav > li > .dropdown-menu {
    background-color: #ffffff !important;
    border-color: #d7dce3 !important;
}
.navbar-nav > li > .dropdown-menu > li > a {
    color: #1e2a36 !important;
}
.navbar-nav > li > .dropdown-menu > li > a:hover {
    background-color: #f5f9ff !important;
    color: #014a9a !important;
}

/* SIDEBAR NAVIGATION */
.sidebar .navigation > li > ul {
    background-color: #1a2330 !important; /* slightly darker than main sidebar */
}
.sidebar .navigation > li > ul > li > a {
    color: #82b1ff !important;
}
.sidebar .navigation > li > ul > li > a:hover {
    background-color: #3b73c5 !important;
    color: #ffffff !important;
}

/* TABS */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: #014a9a !important;
    border-color: #014a9a !important;
    color: #ffffff !important;
}

/* PAGINATION */
.pagination > li > a,
.pagination > li > span {
    color: #014a9a !important;
    border-color: #d7dce3 !important;
}
.pagination > li.active > a,
.pagination > li.active > span {
    background-color: #014a9a !important;
    border-color: #014a9a !important;
    color: #ffffff !important;
}

/* CARDS AND PANELS */
.card, .panel {
    border-color: #d7dce3 !important;
}
.card-header, .panel-heading {
    background-color: #f8f9fb !important;
    border-bottom-color: #d7dce3 !important;
    color: #1e2a36 !important;
}

/* INPUT GROUPS */
.input-group-addon {
    background-color: #f8f9fb !important;
    border-color: #d7dce3 !important;
    color: #5f6b7a !important;
}

/* BADGES */
.badge {
    background-color: #82b1ff !important;
    color: #1e2a36 !important;
}

/* TOOLTIPS */
.tooltip-inner {
    background-color: #014a9a !important;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #014a9a !important;
}

/* WELCOME CARDS AND DASHBOARD */
.welcome-card {
    background: linear-gradient(135deg, #014a9a 0%, #3b73c5 100%) !important;
    color: #ffffff !important;
}

/* LOADING STATES */
.loading-overlay {
    background-color: rgba(248, 249, 251, 0.8) !important;
}

/* CHART COLORS */
.chart-primary {
    background-color: #014a9a !important;
}
.chart-secondary {
    background-color: #00bcd4 !important;
}
.chart-success {
    background-color: #2e8b57 !important;
}
.chart-warning {
    background-color: #ffb100 !important;
}
.chart-info {
    background-color: #0288d1 !important;
}

.image-container-product{border-radius:8px;background-color:#cccccc;width:195px;height:195px;position:relative;overflow:hidden;}
.image-container-product a{width:100%;text-align:center;padding:5px 0;background-color:#323232;color:#FFF;display:inline-block;}
.image-container-product.image-exist a{width:49%;}
.image-container-product .overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
    z-index:100;
}
.image-container-product:hover .overlay, .image-container-product img:hover .overlay{height:30px;}
.image-container-product img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* NEW  LAYOUTS */
.nav.navbar-nav li a.btn{padding-bottom:11px;}
.nav.navbar-nav.main-navbar li a{border-bottom:3px solid #f8f9fb;padding-bottom:10px;}
.nav.navbar-nav.main-navbar li.active a{border-bottom-color:#014a9a;font-weight: bold;color:#1e2a36;}
table.table thead tr.bg-slate-800{background-color:#f8f9fb;color:#1e2a36;text-transform: uppercase;}

/* LAYER */
.page-layer .page-layer-overlay{opacity:0;visibility: hidden;background-color:rgba(0,0,0,0.6);position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;transition: all .5s ease .1s;}
.page-layer .page-layer-1{position:fixed;bottom:0px;background:#FFF;top:0px;z-index:101;transition: all .5s ease .1s;}
.page-layer .page-layer-1.layer-xs{right:-650px;width:650px;}
.page-layer .page-layer-1.layer-def{right:-896px;width:896px;}
.page-layer .page-layer-1.layer-lg{right:-1224px;width:1224px;}
.page-layer.active .page-layer-overlay{visibility: visible;opacity:1;}
.page-layer.active .page-layer-1{right:0;transition: all .5s ease .1s;}
.page-layer.active .page-layer-1.layer-xs{width:650px;}
.page-layer.active .page-layer-1.layer-def{width:896px;}
.page-layer.active .page-layer-1.layer-lg{width:1224px;}
.page-layer-1 .page-layer-bottom{position:absolute;bottom:0px;padding:20px;background:#f8f9fb;width:100%; border-top: 1px solid #d7dce3;}
.page-layer-1 .page-layer-content{position:absolute;top:0;left:0;bottom:76px;right:0;overflow-y:auto;}
.page-layer-1 .page-layer-content .page-layer-wrapper{padding:20px;}
.page-layer-1 .page-layer-content .page-layer-wrapper h4{border-bottom:1px solid #d7dce3;padding-bottom:10px;}
.page-layer .nav-tabs.nav-tabs-solid>.active>a, .nav-tabs.nav-tabs-solid>.active>a:focus, .nav-tabs.nav-tabs-solid>.active>a:hover{color:#1e2a36;}
.page-layer .nav-tabs.nav-tabs-bottom>li.active>a, .nav-tabs.nav-tabs-bottom>li.active>a:focus, .nav-tabs.nav-tabs-bottom>li.active>a:hover{background-color:#f8f9fb;font-weight: bold;}
.page-layer-1 .page-layer-bottom button{margin-left:5px;}
/*.page-layer-1 .page-layer-content fieldset legend{font-weight:bold;color:#ff8100;}*/
fieldset legend{font-weight:bold;color:#ff8100;}

/* TABLE INPUT */
table.table-input{border: none;}
table.table-input thead tr th{border:none;padding:0 0 5px 0;}
table.table-input tbody tr:first-child > td{border-top: 1px solid #d7dce3;}
table.table-input tbody tr td input[type=text], table.table-input tbody tr td select{border-radius:0px;border:none;}
table.table-input tbody tr td .select2-selection.select2-selection--single{border:none;}
table.table-input tbody tr td .form-group.has-feedback{margin:0;}
table.table-input tbody tr td .has-feedback .form-control{padding-right:90px;}
table.table-input tbody tr td .form-control-feedback{right:10px !important;width: auto !important;color:#5f6b7a;}

/* TABLE NO PADDING */
table.table-no-padding tbody tr td{padding:0px;}
table.table-no-padding tbody tr td span{padding:10px 15px;display:block;}
table.table-no-padding tbody tr td.muted{background:#f8f9fb;}
table.table-no-padding tbody tr td input[type=text], table.table-no-padding tbody tr td select{border:0px;}

/* TABLE CLEAN */
table.table-clean tbody tr td{padding:0px;}
table.table-clean tbody tr td span{display:block;padding:8px 20px;}
table.table-clean tbody tr td span.switchery{padding:0px;}
table.table-clean tbody tr td div.checkbox.checkbox-switchery.switchery-xs{margin-bottom:0px;}
table.table-clean tbody tr td input[type=text], table.table-clean tbody tr td select{border:none;}
.dt-header .btn.btn-default.active{background:#014a9a;border-color:#014a9a;color:#FFF;}
tr.bg-teal.selected{color:#1e2a36;}
td.dataTables_empty{text-align:center !important;}

table tbody tr.alpha-info{background-color: #e0f7fa !important;}
table tbody tr.alpha-warning{background-color: #fcd6ac !important;}
table tbody tr.alpha-danger{background-color: #fd9baa !important;}
table tbody tr.alpha-success{background-color: #e8f5e9 !important;}

.form-group.form-extend{margin-bottom:5px;}

/** DATETIMEPICKER OVERIDE **/
.datepicker.datepicker-dropdown.dropdown-menu{width:290px !important;}

/* DATERANGEPICKER */
.daterangepicker .ranges{border: 0px;box-shadow: none;-webkit-box-shadow: none;}
.drp-selected{display: none !important;}

/* PANEL */
.panel-featured1{line-height:18px;}
.panel-featured1 h6{ltext-transform: uppercase;margin:0;padding:0;font-weight: bold;color:#797979;font-size: 14px;}
.panel-featured1 span{font-size: 20px;}
.panel-footer{padding: 15px 20px;}

/** BOOTBOX **/
.bootbox.modal .modal-header h4.modal-title{color:#f44336 !important;font-weight:bold;}
.bootbox.modal .modal-header .close{top:35%;}

/* MODAL DATATABLE */
.modal-dt{padding: 0px;}
.modal-dt .datatable-header{float:left !important;}
.modal-dt .datatable-header .dataTables_filter input{border: 0px !important;}
.toolbar-item-dt{float: right; padding: 20px;}
.toolbar-item-dt{min-width: 200px;}
.modal-footer{padding-top:20px;background: #f8f9fb;border-top: 1px solid #d7dce3;}

.radio-feature{padding:8px;border:1px solid #d7dce3;}
.radio-feature label{width:100%;padding-left:35px;}
.radio-feature label .choice{margin-left:10px;}

.navbar-fixed-top{z-index:99 !important;}
.sidebar-main{z-index:98 !important;}
.sidebar{background-color: #051930 !important;}
.navbar-header{
    background-color: #051930 !important;
}
.navigation>li.active>a, .navigation>li.active>a:focus, .navigation>li.active>a:hover {
    background-color: #3b73c5 !important;
    color: #fff;
}
.navbar-nav>.dropdown-user img{width:30px;height:30px;}
.sidebar-xs .navbar-brand > span, .sidebar-xs .navbar-brand > small{display:none !important;}

/* BOARD */
.board-container{height:100px;background: linear-gradient(135deg, #014a9a 0%, #3b73c5 100%);border-radius:3px;display:block;}
.board-container .board-title{color:#FFF;font-weight: bold;font-size: 15px;padding:10px;display: inline-block;width:80%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.board-detail-container{margin-bottom: 20px;}
.board-detail-container h1.board-detail-title{font-size:22px;font-weight:bold;margin-top:0px;display:inline-block;}
.board-detail-container .board-members img{width:30px;height:30px;display:inline-block;border-radius:50%;}
.board-detail-container .board-members{min-width: 30px;min-height:30px;text-align:center;}
span.board-detail-header-divider{float:left;height:16px;border-left:1px solid #d7dce3;margin: 8px 8px 12px 4px;}

.board-list-items .panel .panel-heading{padding:10px;background-color: #f8f9fb;border-bottom: 1px solid #d7dce3;}
.board-list-items .panel > .panel-heading h6{margin: 0px;width:80%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size:15px;font-weight:bold;}
.board-list-items .panel .panel-body{padding: 0 10px 10px 10px;}
.board-list-items .board-list-container:hover{border: 1px solid #014a9a;background-color: #f5f9ff;}
button.add-card, button.add-list{text-align: left;border:none;background-color: #f8f9fb;border: 1px solid #d7dce3;}
button.add-card:hover, button.add-list:hover{background-color: #f5f9ff;border-color: #3b73c5;}
span.card-title{display: block;width: 80%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

@media screen and (max-width:768px) {
    .toolbar-item-datatable{width:100%;}
    .datatable-header{float:none;}
    .nav-tabs:before{content:''}
    .page-layer .page-layer-1.layer-xs,.page-layer .page-layer-1.layer-lg, .page-layer .page-layer-1.layer-def{width:100% !important;right:-100%;}
    .page-layer.active .page-layer-1.layer-xs,.page-layer.active .page-layer-1.layer-lg,.page-layer.active .page-layer-1.layer-def{right:0;}
    .page-header-content>.visible-elements{border: 0px;}
}

@media screen and (min-width: 769px) {
    .nav-tabs.nav-tabs-bottom>li.active>a:after{background-color: #014a9a;}
    .navbar-top{padding-top:0px;}
}

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    body { font-size: 95%; }
}