/* OVERRIDE CSS */
.footer{bottom:15px;}
.login-container .validation-error{color:#ff0000;}
.login-container .page-container{padding-top:0px;}
body.login-container, body.root-content{background-image: url('../images/bg.jpg');background-color: #000;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:#ff0000;}
.no-resize{resize:none;}
body.sidebar-xs a.navbar-brand > span{display: none !important;}
.picker--opened .picker__holder{color:#000;}
.select2.select2-container{color:#000;}

.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:#31393e;}
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 #dadada;}
table.table-striped-bold tr td{border-top: 2px solid #dadada;}

/* DATATABLE */
.dataTables_processing{
    left:45%;
    margin:0px;
    width: auto;
    background: none;
    background-color: rgba(0,0,0,0.8);
    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;}

.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 #f8f8f8;padding-bottom:10px;}
.nav.navbar-nav.main-navbar li.active a{border-bottom-color:#26a69a;font-weight: bold;color:#525252;}
table.table thead tr.bg-slate-800{background-color:#bbcdd0;color:#323232;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:#f3f3f3;width:100%;}
.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 #dadada;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:#323232;}
.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:#eaeaea;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 #ddd;}
table.table-input tbody tr td{padding:0px;}
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:#ddd;}

/* 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:#ddd;}
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:#26a69a;border-color:#26a69a;color:#FFF;}
tr.bg-teal.selected{color:#313131;}
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{text-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: #dadada;}
.modal-dt .datatable-footer{padding:0px;}
.toolbar-item-dt select{width: 200px;margin-left:10px;float:left;}

.radio-feature{padding:8px;border:1px solid #ddd;}
.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;}

.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-color:#1b6dc1;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 #999;margin: 8px 8px 12px 4px;}

.board-list-items .panel .panel-heading{padding:10px;background-color: transparent;}
.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 #999;background-color: #f3f3f3;}
button.add-card, button.add-list{text-align: left;border:none;}
button.add-card:hover, button.add-list:hover{background-color: #ddd;}
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: #0bab9e;}
    .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%; }
}