body { padding-top: 3.4rem; background: #F5F9FC}

a, button { outline: none}

.loading-state:after { content:''; display:block; background:rgba(0,0,0,0.5) url(../img/loading32.svg) no-repeat center center; position:absolute; left:0; right:0; top:0; bottom:0;/* opacity:0.5;*/ z-index:10000}
body.loading-state:after { background:rgba(0,0,0,0.5) url(../img/loading32.svg) no-repeat center center; position:fixed}
table.loading-state { position: relative}
table.loading-state:after { background:rgba(255,255,255,0.5) url(../img/loading32.svg) no-repeat center center; position:absolute; z-index: 0}
.modal .loading-state { position: relative; min-height:50px}
.modal .loading-state:after { background:rgba(255,255,255,0.5) url(../img/loading32.svg) no-repeat center center; position:absolute}
input.loading-state { background-image: url(../img/loading16.svg); background-position: right 10px center; background-repeat: no-repeat }
.loading-state.sm:after { background-image: url(../img/loading16.svg)}

/*a { color: #286090}*/

/* Header */
header nav.navbar-dark { background: var(--dark); box-shadow: 0 0 5px rgba(0,0,0,0.5);} /* 0.97*/
header .navbar-brand { font-size:1.5rem; line-height:1.7rem; padding-left: 0.5rem; padding-right: 0.5rem; margin-left:-0.5rem; border-radius: 3px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease}
header .navbar-brand:hover { background: var(--green)}
header .navbar-brand:hover .badge { background: #ffa700}
header .nav-link { border-radius: 3px; margin-right: 5px}
header .nav-link:hover { background: rgba(255,255,255,0.1)}

header .notification-block { margin-right: 5px;}
header .notification-block > a { padding-left: 0.9rem !important; padding-right: 0.9rem !important; margin-right: 0}
header .notification-block > a > .badge { position: absolute; right: 1px; top: 4px; box-shadow: -1px 0 0 var(--dark)}
header .notification-block .dropdown-menu.loading-state { min-height: 43px}
header .notification-block .dropdown-menu { font-size: 12px}
header .notification-block .dropdown-menu.loading-state:after { background:rgba(255,255,255,0.5) url(../img/loading16.svg) no-repeat center center}
header .notification-block .dropdown-menu .dropdown-item .text { margin-right: 40px}
header .notification-block .dropdown-menu .badge { position: absolute; right: 20px; margin-top: 2px;}
header .notification-block .dropdown-menu .dropdown-item i, .notification-list .notice-name i { position: relative; font-size: 16px; color: rgba(39,58,75,0.8) }

.icon-success:after { content: '\f00c'; font-family: "Font Awesome 5 Pro"; font-weight: normal; color: var(--green); position: absolute; right: -30%; text-shadow: -1px 0 0 rgba(255,255,255,1)}
.icon-error:after { content: '\f00d'; font-family: "Font Awesome 5 Pro"; font-weight: normal; color: var(--danger); position: absolute; right: -10%; text-shadow: -1px 0 0 rgba(255,255,255,1)}

header .user-block > .nav-link { line-height: 2.5rem; padding: 0rem 1rem; position: relative; min-width: 3rem; text-align: right}
/*header .user-block { line-height:2.2rem}*/
header .user-block > .nav-link img { height: 2.1rem; position: relative; background: var(--dark)}
header .user-block > .nav-link img[src^="data:image"] { display: none}
header .user-block > .nav-link i { position: absolute; top: 11px; right: 23px;}
header .language-menu button { color: rgba(255,255,255,.5); border: none !important;}
header .language-menu button:hover, header .language-select button:focus { color: rgba(255,255,255,.75); background: rgba(255,255,255,0.1); box-shadow: none;}
/* end Header */

.horizontal-mode .container-fluid > .row { display: block;}

/* Sidebar */
.sidebar { position: fixed; top: 51px; bottom: 0; left: 0; z-index: 1000; padding: 20px 0; overflow-x: hidden; overflow-y: auto; border-right: 1px solid #eee; background: var(--dark-90)}
.sidebar .nav {	margin-bottom: 20px;}
.sidebar .nav-item { width: 100%; list-style: none; position: relative;}
.sidebar .nav-item + .nav-item { margin-left:0;}
.sidebar .nav-link { padding: .7rem 1rem; border-radius: 0; color: rgba(255,255,255,.75);}
.sidebar .nav-link:hover { color: rgba(255,255,255,1); background: var(--dark)}
.sidebar .nav-link.active { border-left: solid 3px var(--green); background:var(--dark)} /*, .sidebar .show > .nav-link*/
.sidebar .nav-item i[class^="fa"] { width: 20px; margin-right: 5px; text-align: center}
.sidebar .nav ul { margin: 0; padding: 0 0 0 30px; border-left: solid 3px rgba(255,255,255,.25); background:var(--dark)}
.sidebar .nav .active ul { border-color: var(--green)}
.sidebar .nav ul .nav-link.active {border: none;}
.sidebar .nav ul .nav-link:hover { background: transparent;}
.sidebar .nav-item ul { display: none}
.sidebar .nav-item.active > ul, .sidebar .nav-item.open > ul { display: block;}
.sidebar .nav-item .submenu-toggle { background: transparent; border: none; outline: none; display: inline-block; position: absolute; right: 0; top: 0; padding: .7rem 0; width: 30px; text-align: center; color: rgba(255,255,255,.75);}
.sidebar .nav-item .submenu-toggle:hover { color: rgba(255,255,255,1)}
.sidebar .nav-item .submenu-toggle:after { content: '\f105'; font-family: "Font Awesome 5 Pro"; font-weight: normal;}
.sidebar .nav-item.active .submenu-toggle:after, .sidebar .nav-item.open .submenu-toggle:after { content: '\f107'}

.horizontal-mode .sidebar { right: 0; bottom: auto; padding: 5px 0 0; border-right: none;}
.horizontal-mode .sidebar .nav { margin-bottom: 0;}
.horizontal-mode .sidebar .nav-item { width: auto}
.horizontal-mode .sidebar .nav-link { border-bottom: solid 3px transparent;}
.horizontal-mode .sidebar .nav-link.active { border-left: none; border-bottom: solid 3px var(--green); background:var(--dark)}
.horizontal-mode .sidebar .nav-item.submenu > .nav-link { padding-right: 30px;}
.horizontal-mode .sidebar .nav-item .submenu-toggle:after { content: '\f107'}
.horizontal-mode .sidebar .nav ul { position: fixed; display: none; background: var(--dark-90); padding: 0; border: none; margin-top: 0;}
.horizontal-mode .sidebar .nav .nav-item.submenu:hover ul { display: block;}

.sidebar-toggle { background: transparent; border: none; outline: none; display: inline-block; position: absolute; padding:0; width: 100%; text-align: center; color: rgba(255,255,255,.75); position: absolute; bottom: 0; background: var(--dark-90);}
.sidebar-toggle:hover { color: rgba(255,255,255,1)}
.sidebar-toggle:after { content: '\f102'; font-family: "Font Awesome 5 Pro"; font-weight: lighter;}
.horizontal-mode .sidebar-toggle { width: auto; right: 0; padding: .7rem .5rem; border-bottom: solid 3px var(--dark)}
.horizontal-mode .sidebar-toggle:after { content: '\f100';}
/* end Sidebar */

/* Login form */
.form-signin { max-width: 300px; margin: 0 auto; background: var(--dark-90); color: rgba(255,255,255,.75)}
.form-signin .form-signin-heading { background: var(--dark); font-size: 20px; line-height: 65px; height: 65px; color: #fff; font-weight: 400; text-align: center; margin: 0}
.form-signin form { padding: 15px;}
.form-signin .checkbox { margin: 5px; font-size: 14px; font-weight: normal}
.form-signin .form-control { font-size: 14px; margin-bottom: 15px}
.form-signin .form-control:focus { z-index: 2;}
/* end Login form */

.horizontal-mode .page-wrap { padding: 0 20px;}

.page-header { background: #fff; margin-bottom: 10px; box-shadow: 0 0 16px rgba(73,89,106,.1); padding: 15px 0}
.horizontal-mode .page-header  { position: fixed; left: 0; right: 0; top: 100px; padding: 15px 40px 5px; background: rgba(255,255,255,0.9); z-index: 2; box-shadow: 0 0 5px rgba(0,0,0,0.5);}
h1 { padding-bottom: 9px; margin-bottom: 20px; border-bottom: 1px solid #eee}
.horizontal-mode .page-header h2 { margin-bottom: 0px;}

.page-content { background: #fff; border-top: solid 3px rgba(39,58,75,0.15); padding: 20px; box-shadow: 0 0 16px rgba(73,89,106,.1);}
.horizontal-mode .page-content { margin-top: 145px;}

.footable-filtering-search .dropdown-toggle .caret { display: none}

.modal-body { max-width: 100%; overflow-x: auto}
.modal-full { max-width: 95%}

.result-details { font-size: 12px}
.result-details hr { margin-top: 0.5rem; margin-bottom: 0.5rem;}

.hidden { display:none !important}

/* User label */
.label-user-admin { background: var(--green); color: #fff}
.label-user-moder { background: var(--warning); color: #fff}
.label-user-user { background: var(--cyan); color: #fff}
/* end User label */

.badge[data-target^="edit-"] { cursor: pointer;}

.notes-item .notes-userinfo { float: left; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; margin:0 10px }
.notes-item .notes-userinfo i { font-size: 32px}
.notes-item .notes-body { overflow: hidden}

.fileupload-list { padding: 10px 0 0}
.fileupload-list .item { display: inline-block; position: relative; padding: 10px 10px 15px; margin-bottom: 10px; min-width: 100%;}
.fileupload-list .item.hidden { display: none}
.fileupload-list .item .title { margin-right: 40px; padding-bottom: 7px; display: inline-block;}
.fileupload-list .cancel { float: right}
.fileupload-list.fileupload-multiple .item { display: block; max-width: 400px; padding:10px 0; margin-bottom: 0;}
.fileupload-list.fileupload-multiple .item small.size { float: right; width: 70px; padding-left:10px }
.fileupload-list .item button.title.warning:before { content: '\f071'; font-family: "Font Awesome 5 Pro"; font-weight: bold; color: var(--warning); position: absolute; left: 0}
.fileupload-list .item button[name="remove"] { position: absolute; right: 10px;/* top: 5px*/}

.table-active label { margin-top: 7px}

.checkall + label {  border-bottom:dashed 1px var(--primary); line-height: 16px; display: inline-block; padding-top: 4px}

input.lang-input, textarea.lang-input { background-repeat:no-repeat; background-position:right 10px center; padding-right: 30px }
textarea.lang-input { background-position:right 10px top 10px }
.card.lang-input { background-repeat:no-repeat; background-position:right 10px top 10px}
.editor { position: relative}
.editor .lang-flag { display: block; width: 16px; height: 11px; position: absolute; top: 10px; right: 11px}
/*.editor { background-position:right 10px top 0; background-repeat: no-repeat; padding:20px 0 0; margin-top: -20px}*/
.mce-branding-powered-by { display: none !important}
.live-input input { padding: 0; min-width: 10px; border: none; border-bottom: dashed 1px #000; font-family: inherit; font-size: inherit;}
.live-input .placeholder { display: none;}

  /* SWITCHES */
.switch-inline { float: right}
.onoffswitch { position: relative; width: 54px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none}
.onoffswitch-checkbox { display: none}
.onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid var(--primary); border-radius: 4px}
.onoffswitch-inner { display: block; width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;}
.onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 32px; padding: 0; line-height: 32px; font-size: 10px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}
.switch-inline .onoffswitch-inner:before, .switch-inline .onoffswitch-inner:after { height: 16px; line-height: 16px}
.onoffswitch-inner:before { content: "ДА"; padding-left: 7px; background-color: var(--primary); color: #FFFFFF}
.onoffswitch-inner:after { content: "НЕТ"; padding-right: 7px; background-color: #FFFFFF; color: #919191; text-align: right}
.onoffswitch-switch { display: block; width: 18px; margin: 0; background: #FFFFFF; border: 2px solid var(--primary); border-radius: 4px; position: absolute; top: 0; bottom: 0; right: 36px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0}

/* Dropzone */
div.dropZone { border:dashed 1px var(--primary); color:var(--gray-dark); background:rgba(0, 0, 0, 0.03); font-size:12px; text-align:center; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; padding:20px 0; margin:5px 0}
.upload-list { clear:left; overflow:hidden; padding:5px}
.upload-list .item { float:left; margin:0 5px 5px 0; position:relative; border:solid 1px #afafaf; width:160px; height:160px; text-align:center; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; padding-top: -1px;}
.upload-list .item img {/* margin:0; padding:0;*/ display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height:100%; max-width:100%}
.upload-list .item .actions { position:absolute; top:0; left:0; right:0; background:rgba(255,255,255,0.5); display:none; box-shadow:none; font-size:14px; line-height:16px; padding:2px; box-sizing: border-box}
.upload-list .item span.title { position:absolute; background:rgba(0,0,0,0.5); color:#fff; left:0; right:0; bottom:0; line-height:12px; font-size:10px; display:block; text-align:left; padding:2px 5px}

.upload-list .item.youtube-type:after { position: absolute; left: 3px; top: 3px; content:"\f167"; font-family: "Font Awesome 5 Brands"; color: #f70000; line-height: 20px; font-size: 24px; background: #fff; border-radius: 3px}
/*.upload-list .item .actions .delete { float:right; width:16px; height:16px; margin:2px 2px 0 0; color:#C00; text-decoration:none }*/

form fieldset.border { padding:10px 15px 5px; margin-bottom: 15px;}
form fieldset.border + fieldset.border { margin-top: 15px;}
form fieldset.border legend { display: inline-block; width: auto; padding: 0 7px; font-size:16px; line-height: 18px; margin:0 0 0 -7px }

.sorting-handle { display:inline-block; width:24px; cursor:move; text-align:center; opacity: 0.5;}
.sorting-handle:hover { opacity:1}
.sortable-ghost td { background:rgba(149,165,166,.3)}

.page-collaps { width: 10px; display: inline-block}

.badge-group .badge:first-child { border-radius: .25rem 0 0 .25rem}
.badge-group .badge:last-child { border-radius: 0 .25rem .25rem 0}
.badge-group .badge:only-child { border-radius: .25rem}

th[data-sort] { cursor:pointer}
th[data-sort]:before { content:'\2195'; margin-right:5px; opacity:0.3; font-size: 16px; line-height: 16px}
th[data-sort][data-sort-dir="desc"]:before { content:'\2191'; opacity:1}
th[data-sort][data-sort-dir="asc"]:before { content:'\2193'; opacity:1}

/*.error_log { position: fixed; bottom: 0}*/
.error_log { position: fixed; left: 50%; bottom: 0; right: 0; background: rgba(0,0,0,0.15); z-index: 10;}
.error_log .error_log_details { padding: 10px 10px 20px}
.error_log_button { position: fixed; right: 5px; bottom: 5px; z-index: 11;}

.list-error { background: var(--dark-90)}

.modal-window .preview img { max-width: 100%}

.tree-view, .tree-view ul { margin: 0; padding: 0}
.tree-view li { list-style: none; position: relative; padding-left: 23px}
.tree-view .folder { font-weight: 500}
.tree-view .folder li { font-weight: normal}
.tree-view .folder > span { position: absolute; left: 0;}
.tree-view .folder > span:before { content: '\f07b'; font-family: "Font Awesome 5 Pro"; font-weight: 900; position: absolute; left: 0; color:var(--yellow); cursor: pointer; margin-top: -2px; font-size: 1rem}
.tree-view .folder.open > span:before { content: '\f07c'}

table tr td.table-active { background: #e9ecef}

.highlight { background: #f8f9fa}

/* table scroll style */

table .fixedHeader tr th:first-child, table .scrollContent tr td:first-child {
  width: 18%;
}
table .fixedHeader tr th:nth-child(n + 2), table .scrollContent tr td:nth-child(n + 2) {
  width: 8%;
}
html>body tbody.scrollContent {
display: block;
height: calc( 100vh - 250px);
overflow: auto;
width: 100%
}

html>body thead.fixedHeader {
display: table;
overflow: auto;
width: 100%
}
table .fixedHeader tr th:nth-child(2), table .scrollContent tr td:nth-child(2) {
  width: 10%;
}
@media (max-width : 1200px) {
#project-table {
  font-size: .75rem;
}
#project-table .btn-group-xs>.btn,#project-table .btn-xs {

  font-size: .4rem;

}
}
#project-table  td,   #project-table th {
  padding: .75rem 1%;

}

.widget { border-radius: 5px; padding: 35px 20px; margin-bottom: 10px; margin-top: 10px;}
a.widget { display: block; cursor: pointer; text-decoration: none;}
.widget h1 { border-bottom: none;}
.widget h2, .widget h3 { margin-top: 5px; margin-bottom: 0;}
.widget-text-box { padding: 20px; border: 1px solid #e7eaec; background: #ffffff;}
.widget-head-color-box { border-radius: 5px 5px 0 0; margin-top: 10px;}
.widget .flot-chart { height: 100px;}
.widget { position:relative; overflow:hidden}
.widget.bg-primary, .widget.bg-success, .widget.bg-info, .widget.bg-warning, .widget.bg-danger, .widget.bg-secondary { color: #fff;}
.widget .ibg {position:absolute; width:200px; font-size:250px; line-height:250px; color:rgba(0,0,0,0.05); bottom:-20px; right:-30px; z-index:0}
.widget div { position:relative}
.widget div i { font-size:90px; margin-bottom: 10px;}
.widget.white-bg .ibg { color:rgba(0,0,0,0.07) }

.cut-text { max-height: 100%; overflow: auto;}

.badge.badge-normal { padding: .3rem .4rem; font-size: inherit}
.badge.badge-label.badge-group + .badge.badge-label.badge-group { border-top-left-radius: 0; border-bottom-left-radius: 0}