@charset "utf-8";

/* General 
--------------------------------------------------------------------------------------------------------*/
* { outline: none !important; }
.window-resizing * { transition: none !important; }
html, body { min-width: 320px; min-height: 100vh; }
body { font-family: 'Poppins', sans-serif; background: #fafafa; font-size: 14px; line-height: 20px; -ms-overflow-style: scrollbar; margin-top:0;}
button, input[type="button"], input[type="submit"], a { cursor: pointer; }
input[type=text], input[type=email], input[type=password], textarea { font-family: 'Poppins', sans-serif; -moz-appearance: none; -webkit-appearance: none; appearance: none; }
::-moz-focus-inner { border: 0; }
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }
option:not(:checked) { color: black; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -moz-box-shadow: 0 0 0 30px white inset !important; -webkit-box-shadow: 0 0 0 30px white inset !important; box-shadow: 0 0 0 30px white inset !important; }
.primary-link{color:#17a2b8;text-decoration:none;}
.primary-link:hover,.primary-link:focus,.primary-link:active{text-decoration:underline;color:#17a2b8;}
.btn-list>.btn{display:inline-block;vertical-align:top;margin-right:8px;}

/* buttons
--------------------------------------------------------------------------------------------------------*/
.btn { font-size: inherit; }
/*.btn-outline-info { background-color: #fff; }*/
/*.btn-outline-danger { background-color: #fff; }*/

/* navbar 
--------------------------------------------------------------------------------------------------------*/
.navbar { padding: 13px 0 12px; border: none; border-radius: 0; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16); z-index: 9; }
.navbar-btn { box-shadow: none; outline: none !important; border: none; }
.navbar .navbar-collapse li>a:first-child:last-child { display: block; }
.navbar .navbar-collapse li>a:first-child:last-child>img { display: block; }

/* table
--------------------------------------------------------------------------------------------------------*/
.table-striped tbody tr:nth-of-type(odd) { background-color: #f4f4f4; }
.table td, .table th { padding: 8px; }
.table thead th { font-weight: 600; vertical-align: middle; }

/* card
--------------------------------------------------------------------------------------------------------*/
.card-header { background: #f2f2f2; padding: 12px 15px; }

/* content 
--------------------------------------------------------------------------------------------------------*/
.wrapper{display:block;}
#content { padding:15px 40px 50px 265px; min-height: 100vh; transition: all .2s cubic-bezier(0.35, 0, 0.25, 1); width:auto;position:static;}
#content.active { padding-left: 15px; }
#content>.container-fluid { padding-left: 10px; padding-right: 10px; }
.footer{padding:15px;text-align:center;padding-left:265px;margin-top:-50px;transition: all .2s cubic-bezier(0.35, 0, 0.25, 1);}
#content.active+.footer{padding-left:15px;}

/* forms
--------------------------------------------------------------------------------------------------------*/
.form-control {background-color: #fff;font-size: inherit;}
.form-control:focus { box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25); border-color: #17a2b8; }
select.form-control { appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; background: #fff url('../images/ic-chevron-down.svg') right no-repeat; -webkit-background-size: 22px 22px; background-size: 22px 22px; }

/* data table 
--------------------------------------------------------------------------------------------------------*/
.dataTables_wrapper .border-dark { border-color: #c3c3c3 !important; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after { bottom: 50%; transform: translateY(50%); }
.dataTables_length .custom-select-sm, select.form-control-sm.custom-select-sm:not([size]):not([multiple]) { font-size: 14px; height: 36px; }
.dataTables_wrapper>.row:last-child { align-items: center; }
.dataTables_wrapper>.row .dataTables_length>label{margin:0;}

/* dropdown */
.dropdown-item.active, .dropdown-item:active { color: #fff; background-color: #17a2b8; }
.dropdown-toggle:after { transition: all .2s cubic-bezier(0.35, 0, 0.25, 1); }

/* bootstrap-select
--------------------------------------------------------------------------------------------------------*/
.bootstrap-select>.dropdown-toggle { border-color: #ced4da !important; height: 38px; padding-right: 24px; background: url('../images/ic-chevron-down.svg') right no-repeat !important; -webkit-background-size: 22px 22px !important; background-size: 22px 22px !important; }
.bootstrap-select.show .dropdown-toggle, .bootstrap-select.show .dropdown-toggle:focus, .bootstrap-select.show>select.mobile-device:focus+.dropdown-toggle, .bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle { box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25) !important; outline: 0 !important; border-color: #17a2b8 !important; }
.bootstrap-select .dropdown-menu li a { padding: 8px 15px; }
.bootstrap-select .dropdown-menu { min-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 20000; font-size: inherit; }
.bootstrap-select .bs-searchbox { padding: 4px 15px 12px; }
.bootstrap-select>.dropdown-toggle:after { display: none; }

/*notification panel
--------------------------------------------------------------------------------------------------------*/
.notification-panel{position: fixed;top: 0;bottom: 0;width: 480px;z-index: 10;background: #fff;box-shadow: 0 0 40px rgba(0,0,0,0.3);overflow:auto;opacity:0;right:-480px;visibility:hidden;transition:all 0.2s;}
.notification-visible .notification-panel{right:0;opacity:1;visibility:visible;}
.notification-panel .panel-header{padding:12px 8px 20px 20px;display:flex;align-items:center;}
.notification-panel .panel-header>h5{margin:0;}
    .notification-panel .panel-header > button {margin-left: auto;border: 0;background: url('../images/ic-close.svg') center no-repeat;background-size:24px 24px;height:40px;width:40px;opacity:0.5;transition:all 0.2s;}
        .notification-panel .panel-header > button:hover, .notification-panel .panel-header > button:focus, .notification-panel .panel-header > button:active{opacity:0.87;}
    .notification-panel .panel-body{padding:0 20px 20px;}
    .notification-panel .panel-body>.body-header{display:flex;padding-bottom:8px;}
    .notification-panel .panel-body>.body-header>.right-block{margin-left:auto;}
    .notification-list{border-bottom:1px solid #e1e1e1;padding:0;margin:0;list-style:none;}
.notification-list>li{padding:12px 0;border-top:1px solid #e1e1e1;}
.notification-list>li>.title{display:flex;padding-bottom:6px;}
.notification-list>li>.title>img{height:18px;flex-basis:18px;display:block;margin-right:8px;min-width:18px;max-width:18px;margin-top:3px;}
.notification-list>li>.title>p{margin:0;padding:0;line-height:24px;}
.notification-list>li>.title>button{margin-left: auto;border: 0;background: url('../images/ic-close.svg') center no-repeat;background-size:16px 16px;height:24px;flex-basis:24px;min-width:24px;max-width:24px; opacity:0.5;transition:all 0.2s;}
.notification-list>li>.title>button:hover, .notification-list>li>.title>button:focus, .notification-list>li>.title>button:active{opacity:0.87;}
.notification-list > li>.description{padding:0;margin:0;}
        .notification-list > li>.time{text-align:right;opacity:0.64;padding:0;margin:0;}

/*aside panel*/
.aside-panel{position: fixed;top: 0;bottom: 0;width: 480px;z-index: 10;background: #fff;box-shadow: 0 0 40px rgba(0,0,0,0.3);overflow:auto;opacity:0;right:-480px;visibility:hidden;transition:all 0.2s;display:flex;flex-direction:column;}
.aside-panel-visible .aside-panel.active{right:0;opacity:1;visibility:visible;}
.aside-panel .panel-header{padding:12px 8px 12px 20px;display:flex;align-items:center;border-bottom:1px solid #dee2e6;}
.aside-panel .panel-header>h5{margin:0;}
    .aside-panel .panel-header > button {margin-left: auto;border: 0;background: url('../images/ic-close.svg') center no-repeat;background-size:24px 24px;height:40px;width:40px;opacity:0.5;transition:all 0.2s;}
        .aside-panel .panel-header > button:hover, .aside-panel .panel-header > button:focus, .aside-panel .panel-header > button:active{opacity:0.87;}
    .aside-panel .panel-body{flex-grow:1;overflow:auto;}
    .aside-panel .panel-body >.inner{padding:16px 20px;}
    .aside-panel .panel-footer{padding:12px 20px;border-top:1px solid #dee2e6;background:#f9f9f9;}

/*edit-column-aside*/
.edit-column-aside{width:800px;}
.column-filter-block{display:flex;height:calc(100vh - 165px);}
.column-filter-block .right,.column-filter-block .left{border:1px solid #dee2e6;padding:12px;min-width:calc(50% - 36px);max-width:calc(50% - 36px);flex-basis:calc(100% - 36px);display:flex;flex-direction:column;}
.column-filter-block .middle{min-width:72px;max-width:72px;flex-basis:72px;}
.column-filter-block h4{font-size:18px;line-height:24px;font-weight:600;}
.column-filter-block p{padding-bottom:12px;margin:0;}
.column-filter-block .sort-list{flex-grow:1;overflow:auto;margin:0;list-style:none;padding:0;}
.column-filter-block .sort-list>li>button{display:flex;align-items:center;background:none;border:0;transition:all 0.2s ease;padding:6px 8px;text-align:left;width:100%;}
    .column-filter-block .sort-list > li > button>img{height:16px;width:16px;flex-basis:16px;display:block;margin-left:6px;opacity:0.48;}
    .column-filter-block .sort-list > li > button:hover, .column-filter-block .sort-list > li > button:focus.column-filter-block .sort-list > li > button:active {
        background: #f2f2f2;
    }
.column-filter-block .sort-list>li>button.selected{background:#ebebeb;}
.column-filter-block .middle{display:flex;align-items:center;justify-content:center;flex-direction:column;}
.column-filter-block .middle>button{background:none;border:0;opacity:0.48;transition:all 0.2s ease;background:none;padding:8px;margin:0;}
.column-filter-block .middle>button>img{height:28px;width:28px;display:block;}
.column-filter-block .middle>button:hover,.column-filter-block .middle>button:focus,.column-filter-block .middle>button:active{opacity:0.84;}

/*empty state*/
.empty-state{padding:72px 0;text-align:center;}
.empty-state>img{height:64px;width:64px;opacity:0.24;display:block;margin:0 auto 20px;}
.empty-state>p{margin:0;padding:0 0 8px;}

/*Sortable*/
#sortable {list-style-type: none; margin: 0; padding: 0; width: 100%;}
    #sortable li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em;}
    html > body #sortable li {height: 2em; line-height: 1.2em;}

.ui-state-highlight {height: 1.5em; line-height: 1.2em;}

#sortableGrid1 {list-style-type: none; margin: 0; padding: 0; width: 100%;}
    #sortableGrid1 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1em; height: 1.5em;}
    html > body #sortableGrid1 li {height: 2em; line-height: 1.2em;}

#sortableGrid2 {list-style-type: none; margin: 0; padding: 0; width: 100%;}
    #sortableGrid2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1em; height: 1.5em;}
    html > body #sortableGrid2 li {height: 2em; line-height: 1.2em;}

#sortableGrid1, #sortableGrid2 {border: 1px solid #eee; width: 100%; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px;}
    #sortableGrid1 li, #sortableGrid2 li {margin: 0 5px 5px 5px; padding: 5px; font-size: 1em; width: 97%;}

@media(max-width:575px){
    .notification-panel{width: 320px;right:-320px;}
    .notification-panel .panel-header{padding:12px 8px 15px 15px;}
    .notification-panel .panel-body{padding:0 15px 15px;}
}

@media(max-width:768px) {
    #content {
        padding: 15px 0px 0px 0px;
    }
    .footer {
        padding-left: 0px;
    }
}

/*@media(min-width:500px) {
    #content.active {
        width: 100%;
        padding-left: 255px;
    }
}*/


.dis-none{
    display:none !important;
}
.dis-block {
    display:block !important;
}

.error {
    font-size: 12px;
    padding: 6px 0 4px;
    color: red;
    display: block;
}