/***************** font-face *****************/
@font-face {
    font-family: 'ThaiSans Neue';
    src: url('../fonts/ThaiSansNeue-Regular.eot');
    src: url('../fonts/ThaiSansNeue-Regular.eot?') format('embedded-opentype'),
    	url('../fonts/ThaiSansNeue-Regular.woff?') format('woff'),
    	url('../fonts/ThaiSansNeue-Regular.ttf?') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ThaiSans Neue';
    src: url('../fonts/ThaiSansNeue-Bold.eot');
    src: url('../fonts/ThaiSansNeue-Bold.eot?') format('embedded-opentype'),
    	url('../fonts/ThaiSansNeue-Bold.woff?') format('woff'),
    	url('../fonts/ThaiSansNeue-Bold.ttf?') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'ThaiSans Neue';
    src: url('../fonts/ThaiSansNeue-Italic.eot');
    src: url('../fonts/ThaiSansNeue-Italic.eot?') format('embedded-opentype'),
    	url('../fonts/ThaiSansNeue-Italic.woff?') format('woff'),
    	url('../fonts/ThaiSansNeue-Italic.ttf?') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'ThaiSans Neue';
    src: url('../fonts/ThaiSansNeue-BoldItalic.eot');
    src: url('../fonts/ThaiSansNeue-BoldItalic.eot?') format('embedded-opentype'),
    	url('../fonts/ThaiSansNeue-BoldItalic.woff?') format('woff'),
    	url('../fonts/ThaiSansNeue-BoldItalic.ttf?') format('truetype');
    font-weight: bold;
    font-style: italic;
}
 /***************** font-face : THSarabunNew *****************/
@font-face {
    font-family: 'THSarabunNew';
    src: url('../fonts/THSarabunNew.eot');
    src: url('../fonts/THSarabunNew.eot?') format('embedded-opentype'),
    	url('../fonts/THSarabunNew.woff?') format('woff'),
    	url('../fonts/THSarabunNew.ttf?') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'THSarabunNew';
    src: url('../fonts/THSarabunNewBold.eot');
    src: url('../fonts/THSarabunNewBold.eot?') format('embedded-opentype'),
    	url('../fonts/THSarabunNewBold.woff?') format('woff'),
    	url('../fonts/THSarabunNewBold.ttf?') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'THSarabunNew';
    src: url('../fonts/THSarabunNewItalic.eot');
    src: url('../fonts/THSarabunNewItalic.eot?') format('embedded-opentype'),
    	url('../fonts/THSarabunNewItalic.woff?') format('woff'),
    	url('../fonts/THSarabunNewItalic.ttf?') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'THSarabunNew';
    src: url('../fonts/THSarabunNewBoldItalic.eot');
    src: url('../fonts/THSarabunNewBoldItalic.eot?') format('embedded-opentype'),
    	url('../fonts/THSarabunNewBoldItalic.woff?') format('woff'),
    	url('../fonts/THSarabunNewBoldItalic.ttf?') format('truetype');
    font-weight: bold;
    font-style: italic;
}

 /***************** font-face : Prompt *****************/
@font-face {
   font-family: 'Prompt Medium';
   src: url('../fonts/Prompt-Medium.ttf');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: 'Prompt Regular';
   src: url('../fonts/Prompt-Regular.ttf');
   font-weight: normal;
   font-style: normal;
}
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/PROMPT-REGULAR.TTF?') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/PROMPT-BOLD.TTF?') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/PROMPT-ITALIC.TTF?') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/PROMPT-BOLDITALIC.TTF?') format('truetype');
  font-weight: bold;
  font-style: italic;
}

/***************** font-face : Kanit *****************/
@font-face {
	font-family: 'Kanit';
	src:url('../fonts/Kanit-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'Kanit';
	src:url('../fonts/Kanit-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
	font-family: 'Kanit';
	src:url('../fonts/Kanit-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
	font-family: 'Kanit';
	src:url('../fonts/Kanit-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/***************** font-face : K2D *****************/
@font-face {
	font-family: 'K2D';
	src:url('../fonts/K2D-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'K2D';
	src:url('../fonts/K2D-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
	font-family: 'K2D';
	src:url('../fonts/K2D-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
	font-family: 'K2D';
	src:url('../fonts/K2D-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/***************** font-face : DBHelvethaicaX *****************/
@font-face {
  font-family: 'DBHelvethaicaX';
  src: url('../fonts/DBHelvethaicaX-55Regular.eot');
  src: url('../fonts/DBHelvethaicaX-55Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/DBHelvethaicaX-55Regular.woff') format('woff'),
       url('../fonts/DBHelvethaicaX-55Regular.ttf') format('truetype'),
       url('../fonts/DBHelvethaicaX-55Regular.svg#DBHelvethaicaX-55Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'DBHelvethaicaX';
  src: url('../fonts/DBHelvethaicaX Med.TTF');
  font-weight: bold;
  font-style: bold;
}
@font-face {
  font-family: 'DBHelvethaicaX Med';
  src: url('../fonts/DBHelvethaicaX Med.TTF');
  font-weight: normal;
  font-style: normal;
}

/************** Layout ****************/
body {
	font-family: "Tahoma";
	font-size: 13px;
}

.login-logo, .register-logo {color: #fff; font-size: 30px;}

.content-wrapper {
	background-image: url('../img/white-bg.png');
}
.main-header {border-bottom: 2px solid #3abfbb;}
.main-header .logo {font-size: 1.2em;}
.main-header .logo .logo-lg img {height: 35px;}
.main-footer {
	background-color: #080B10;
	background-image: url('../img/black-bg.png');
 	background-repeat: no-repeat;
 	background-position: left;
	color: #fff;
	font-size: 12px;
}
.title-label label {font-weight: normal !important;}
.title-label {
	color: #ffffff;
	font-size: 29px;
	padding: 6px 10px;
	border-bottom:  none;
	margin-bottom: 25px;
	font-weight: normal !important;
	/*background: #3a8adc;*/
	background: linear-gradient( -47deg, #c64156, #183b6f);
	font-family: 'DBHelvethaicaX';
}
.title-label .fa {color: #fff;float: right;margin-right: 10px;margin-top: 5px;}
.panel-detail .title-label .fa {float: left;}

.bootstrap-dialog.type-primary .modal-header {background: linear-gradient( -47deg, #c64156, #183b6f);border-radius: 0px;}
.modal-header .close {color: #fff;opacity: initial;}
.eformdialoglist .bootstrap-dialog-message #dialogParamsList .params-list a {padding: 15px;color: #463d68;}
/***************** layout : breadcrumb *****************/
.content-header > .breadcrumb {
  position: relative;
  margin-top: 5px;
  top: 0;
  right: 0;
  float: none;
  background: #d2d6de;
  padding-left: 10px;
  font-size: 13px;
}
.content-header > .breadcrumb li:before {
  color: #97a0b3;
}


/*********** BOX **************/
.box-page > .box-header {
	background: #123558; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.box-header.with-border {border-bottom: none;}
.box-page > .box-header .box-title{
 	font-family: 'DBHelvethaicaX' ;
 	font-weight: normal;
 	font-size: 29px;
 	color: #ffffff;
}

.box-page .box-title-submenu {
	margin-bottom: -10px;
  margin-top: 10px;
}
.box-page .box-title-submenu .box-title-submenu-item {
	display: inline-block;
	padding: 0 10px;
	font-weight: normal;
	height: 45px;
	vertical-align: middle;
	line-height: 45px;
	font-size: 23px;
    font-family: 'DBHelvethaicaX';
}

  .box-title-submenu-item:hover {
    border-bottom: 3px solid #3A8ADC;
    cursor: pointer;
  }
/* .box-page .box-title-submenu .box-title-submenu-active {
	border-bottom: 3px solid #3A8ADC;
	color: #fff;
	cursor: pointer;
} */
.box-page .box-title-submenu .box-title-submenu-active {
  color: #fff !important;
  background: #1e3b6e;
  border: none !important;
}

.box-page .box-title-submenu .box-title-submenu-item a {
	color: #999;
  transition: all .35s;
}
.box-page .box-title-submenu .box-title-submenu-item a:hover {
	color: #fff;
}
.box-page .box-title-submenu .box-title-submenu-item:hover a{
  color: #fff
}
.box-page .box-title-submenu .box-title-submenu-item:hover {
	background: #1e3b6e;
  border: none !important;
}

/*********** Button Zone ******************/
.button-zone {
	margin-top: 5px;
	text-align: right;
}
.button-zone.button-zone-top {
	margin-bottom: 20px;
}
.button-zone .btn {
 	font-family: 'ThaiSans Neue' ;
 	font-size: 20px;
}

/***************** panel *****************/
.panel-detail {
	font-size: 16px;
}
.panel-detail .form-group {margin-bottom: 20px;}
.panel-detail input, .panel-detail select, .panel-detail textarea, .panel-detail .divControl {
	font-family: tahoma;
	font-size: 14px;
	padding-top: 5px;
}
.panel-detail .help-block {font-size: 12px; margin-bottom: 0px; color: #20409A;}
.panel-detail label.control-label { padding-top: 5px;font-family: 'DBHelvethaicaX Med';font-weight: normal;font-size: 25px;}
.panel-detail .form-inline.radio {padding-top: 5px;}
.panel-detail .radio-inline {padding-top: 0px;}
.panel-detail .btn {font-size: 13px;}

/************** Validation ***************/
.panel-detail .help-block.error, .help-block.error  {color: red; font-style: italic;}

.form-group .labelRequest::after {
	color: red;
	content: " *";
}

/************ Search Panel *****************/
.searchPanel {
	font-size: 16px;
}
.searchPanel input[type=text], .searchPanel select, .searchPanel .checkbox {
	font-family: 'tahoma' ;
	font-size: 13px;
}
.searchPanel label.control-label {}
.searchPanel .btn {font-size: 13px; padding-top: 4px; padding-bottom: 5px;}

/****************Check box & radio ******************/
.checkbox.with-icheck, .radio.with-icheck {
	
}
.checkbox.with-icheck label {
	padding-left: 0px;
}
.checkbox.with-icheck div[class*=icheckbox] {
	margin-right: 5px;
}
.radio.with-icheck label {
	padding-left: 0px;
}
.radio.with-icheck div[class*=iradio] {
	margin-right: 5px;
}

/********* DataTable *************/
.dataTables_wrapper {
	clear: both;
	position: relative;
}
table.dataTable thead > tr > th {padding-right: 15px !important;}
table.dataTable thead .sorting:after {font-size: 11px;top: 2px;}
.table>thead>tr>th {padding: 20px 8px;}
.table>tbody>tr>td {padding: 20px 8px;}
.table>caption+thead>tr:first-child>th {font-family: 'DBHelvethaicaX';font-size: 21px;font-weight: normal;text-align: center;}
table.dataTable tbody tr.even {background: #fbf8f8;}
.form-group {margin-bottom: 20px;}
.skin-smart .btn {line-height: 23px;}
.form-control-static {font-family: 'DBHelvethaicaX';font-size: 25px;padding-top:0px;}
.searchPanel label.control-label {font-family: 'DBHelvethaicaX';font-weight: normal;font-size: 21px;padding-top: 4px;}
.dataTable tbody tr td span.label {font-weight: normal; font-size: 14px;}
.dataTable caption {
	/*background-color: #3a8adc;*/
	background: linear-gradient( -47deg, #c64156, #183b6f);
	color: #ffffff;
	padding-left: 8px; 
	padding-right: 8px;
	font-size: 27px;
	font-family: 'DBHelvethaicaX';
    font-weight: normal;
}
.dataTable thead tr th {
	background: linear-gradient(#E6E6E6, #FFFFFF); 
	font-size: 16px;
	vertical-align: middle;
}
.dataTable tbody tr td {
	font-size: 14px;
}
.dataTable .bottom {font-size: 14px;}
.dataTable .bottom select {font-size: 13px;}
.dataTable .bottom .dataTables_info , .dataTable .bottom .dataTables_length {float: left; width: auto;}
.dataTable .bottom .dataTables_paginate{float: right; width: auto;}
.dataTable .bottom .dataTables_length {padding-top: 4px; margin-left: 10px; padding-left: 10px; border-left: 1px solid #ccc;}

.skin-smart .pagination > .active > a, 
.skin-smart .pagination > .active > a:focus, 
.skin-smart .pagination > .active > a:hover, 
.skin-smart .pagination > .active > span, 
.skin-smart .pagination > .active > span:focus, 
.skin-smart .pagination > .active > span:hover {
	background-color: #485B6E;
	border-color: #485B6E;
}
table.dataTable thead > tr > th.sorting_disabled {padding-right: 8px !important; padding-left: 8px }

/**************** Form Config *****************/
.form-config {padding: 15px 15px 0; background-color: #eee; border: 1px solid #D2D6DE; margin-top: 5px;}
.form-config .form-group {margin-left: 0px; margin-right: 0px;}
.panel-detail .form-config label.control-label, 
.form-config label.control-label  {padding-top: 0;}

/**************** Map *****************/
.mapThai .jqvmap-zoomin, .mapThai .jqvmap-zoomout {width: auto; height: auto;}
.mapDesc {margin-top: 10px;}
.mapDesc .box-desc {display: inline-block; padding: 5px;}
.mapDesc .box-color {width: 25px;}

/**************** Overwrite ****************/
.help-block { font-size: 12px; font-style:italic }
.skin-smart .btn {
	font-size: 16px;
}

.skin-smart .btn-primary {
  color: #fff;
  background-color: #485B6E;
  border-color: #485B6E;
}
.skin-smart .btn-primary:focus,
.skin-smart .btn-primary.focus {
  color: #fff;
  background-color: #2C3E50;
  border-color: #2C3E50;
}
.skin-smart .btn-primary:hover {
  color: #fff;
  background-color: #2C3E50;
  border-color: #2C3E50;
}
.skin-smart .btn-primary:active,
.skin-smart .btn-primary.active,
.skin-smart .open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #2C3E50;
  border-color: #2C3E50;
}
.skin-smart .btn-primary:active:hover,
.skin-smart .btn-primary.active:hover,
.skin-smart .open > .dropdown-toggle.btn-primary:hover,
.skin-smart .btn-primary:active:focus,
.skin-smart .btn-primary.active:focus,
.skin-smart .open > .dropdown-toggle.btn-primary:focus,
.skin-smart .btn-primary:active.focus,
.skin-smart .btn-primary.active.focus,
.skin-smart .open > .dropdown-toggle.btn-primary.focus {
  color: #fff;
  background-color: #2C3E50;
  border-color: #2C3E50;
}
.skin-smart .btn-primary:active,
.skin-smart .btn-primary.active,
.skin-smart .open > .dropdown-toggle.btn-primary {
  background-image: none;
}
/* .skin-smart .btn-primary .badge {
  color: #EA09B1;
  background-color: #fff;
}
.skin-smart .box.box-primary {
  border-top-color: #EA09B1;
}
.skin-smart .box.box-solid.box-primary {
  border: 1px solid #EA09B1;
}
.skin-smart .box.box-solid.box-primary > .box-header {
  color: #ffffff;
  background: #EA09B1;
  background-color: #EA09B1;
}
.skin-smart .box.box-info {
  border-top-color: #FA76D9;
}
.skin-smart .box.box-solid.box-info {
  border: 1px solid #FA76D9;
}
.skin-smart .box.box-solid.box-info > .box-header {
  color: #ffffff;
  background: #FA76D9;
  background-color: #FA76D9;
}
.skin-smart .btn-info {
  background-color: #FA76D9;
  border-color: #FF56D4;
}
.skin-smart .btn-info:hover,
.skin-smart .btn-info:active,
.skin-smart .btn-info.hover {
  background-color: #FF56D4;
} */

/************* overwrite ***************/
.skin-smart .sidebar {background-color: #262d33;}
.skin-smart .sidebar-menu {font-family: 'ThaiSans Neue' ; font-size: 18px;}
.skin-smart .sidebar-menu > li > a {border-left: 3px solid transparent;font-weight: normal;}
.skin-smart .sidebar-menu > li.active > a {font-weight: normal; background-color: #3a8adc;}
.skin-smart .sidebar-menu li *{color: white; font-size: 16px !important; }
.skin-smart .sidebar-menu li.header {font-size: 16px;}
.skin-smart .sidebar-menu > li > .treeview-menu {background-color: #88bdf3;}
.skin-smart .sidebar-menu > li > .treeview-menu li em {color:#333; font-size: 10px !important;}
.skin-smart .sidebar-menu .treeview-menu > li > a  {font-size: 14px !important; color: #333; font-family: 'tahoma';}
.skin-smart .user-panel {background-color: #262d33;}
.skin-smart .user-panel .user-panel-img {padding: 0px 5px ; text-align: center;}
.skin-smart .user-panel .user-panel-img .img-logo {max-width: 100%;}
.skin-smart .user-panel .user-system {font-weight: bold; font-size: 18px; color: #CCCCCC; text-align: center; font-family: "ThaiSans Neue"; padding: 5px;}
.skin-smart .user-panel .user-system-sub {font-family: 'ThaiSans Neue'; font-weight: bold; font-size: 18px; color: #FFFFFF; text-align: center; margin-bottom: 0px; margin-top: 5px;}
.skin-smart.sidebar-collapse .user-panel .user-panel-img {padding: 0px;}
.skin-smart.sidebar-collapse .user-panel .user-system {display: none;}
.skin-smart.sidebar-collapse .user-panel .user-system-sub {display: none;}
.skin-smart .divControl .jFiler-theme-default .jFiler-input {margin-bottom: 0px;}

.nav-tabs-custom>.nav-tabs>li.active {border-top-color: #FF9A19;}
.nav-tabs-custom>.nav-tabs>li.active > a { font-weight: bold; font-size: 17px; }

.noty_type_warning .noty_text > span {display: inline-block;}
.noty_type_warning .text-noty-warning {float: left; text-align: left; display: inline-block;}

/***************** Tab & validate *****************/
.nav-tabs li .warning {display: none;}
.nav-tabs li.warning .warning {display: inline-block;}

/*** jFiler ****/
.jFiler-items .icon-jfi-trash.jFiler-item-trash-action {display: inline-block;}

/*************** custom data sweet alert ***************/
.swal2-content { font-size: 1.4em; }
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel { font-size: 1.2em; }

/****************** bootstrap-select *****************/
.bootstrap-select button.btn.dropdown-toggle.btn-default,
.bootstrap-select>.dropdown-toggle.bs-placeholder, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:active, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover { 
	color: #555;
    background-image: unset;
    font-size: 14px;
    background: no-repeat;
    padding: 6px 15px;
    border-radius: 0;
}
.bootstrap-select .dropdown-menu>li>a { color: #555; }
.bootstrap-select .dropdown-menu>.active>a { color: #fff; }


/**************** File Dialog *****************/
.swal2-container {z-index: 20005;}

.divFiles.divFileManagement {z-index: 20000 !important; }
.divFiles.divFileManagement .modal-lg {width: 90%;}

.dialogFolderEdit ,
.dialogFolderShare ,
.dialogFileEdit ,
.dialogFileShare,
.dialogResize {z-index: 20001 !important; }

.dialogShareUserList {z-index: 20002 !important; }
.dialogShareUsergroupList {z-index: 20002 !important; }

.file-main-zone {margin-bottom: 15px;}
.file-detail-zone {height: 75px; background-color: #EEEEEE; padding: 7px 10px 8px;}
.file-detail-zone .file-info {font-size: 14px; line-height: 1.428;}
.file-detail-zone .file-selected {font-size: 16px;}

.file-main-zone .root-folder {margin-bottom: 15px;}

.file-main-zone .folders {border: 1px solid #000; background-color: #fff; padding: 0px; border-radius: 0px; margin-bottom: 15px;}
.file-main-zone .folders .folders-add {padding: 10px; border-bottom: 1px solid #000;}
.file-main-zone .folders .folders-add .folders-add-form {padding-top: 10px;}
.file-main-zone .folders .folders-add .folders-add-form .form-group {margin-bottom: 5px;}
.file-main-zone .folders .folders-list {}
.file-main-zone .folders .folders-list ul {list-style: none; padding-left: 0px; margin-bottom: 0;}
.file-main-zone .folders .folders-list li {padding: 10px; position: relative;}
.file-main-zone .folders .folders-list li > a {display: block; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.file-main-zone .folders .folders-list li > a.has-action {margin-right: 40px} 
.file-main-zone .folders .folders-list li > a .folder-tags {display: block; margin-left: 18px; white-space: normal;}
.file-main-zone .folders .folders-list li > a .folder-tag {padding: 2px 7px; margin: 2px 5px 0 0; display: inline-block; border: 1px solid #000; border-radius: 5px; color: #000;}
.file-main-zone .folders .folders-list li .remove {position: absolute; right: 10px; top: 10px; cursor: pointer;}
.file-main-zone .folders .folders-list li .share {position: absolute; right: 10px; top: 10px; cursor: pointer;}
.file-main-zone .folders .folders-list li .edit {position: absolute; right: 30px; top: 10px; cursor: pointer;}
.file-main-zone .folders .folders-list li.active {background-color: #eaf3fc;}
.file-main-zone .folders .folders-list .shared {color: green;}
.file-main-zone .folders .folders-list .unshare {color: #ccc;}
.file-main-zone .folders .folders-share-title {padding: 10px; border-bottom: 1px solid #000; font-family: 'DBHelvethaicaX'; font-size: 22px;}

.file-main-zone .files {border: 1px solid #000; background-color: #fff; padding: 0px; border-radius: 0px;}
.file-main-zone .files .files-upload {padding: 10px; border-bottom: 1px solid #000;}
.file-main-zone .files .files-list {}
.file-main-zone .files .files-list .files-list-action {padding: 10px; margin-bottom: 0px; border-bottom: 1px dashed #000;}
.file-main-zone .files .files-list .files-list-action .btn {font-size: 12px; padding: 2px 7px;}
.file-main-zone .files .files-list .files-list-action #pager {display: inline-block; margin: 0; font-size: 12px; vertical-align: bottom;}
.file-main-zone .files .files-list .files-list-action #pager ul.pagination {margin: 0; vertical-align: bottom;}
.file-main-zone .files .files-list .files-list-action #pager ul.pagination a {padding: 2px 10px;}
.file-main-zone .files .files-list .files-list-action #PageSize {width: 60px; font-size: 12px; padding: 2px 7px; height: auto; display: inline-block; vertical-align: bottom;}
.file-main-zone .files .files-list .files-list-action #SortType {width: 120px; font-size: 12px; padding: 2px 7px; height: auto; display: inline-block; vertical-align: bottom;}
.file-main-zone .files .files-list .files-list-action .files-list-action-btnzone {margin-top: 10px;}
.file-main-zone .files .files-list .files-list-action .files-list-search-zone {margin-bottom: 10px;}
.file-main-zone .files .files-list .files-list-action .files-list-search-zone .form-control {height: 29px;}
.file-main-zone .files .files-list .files-list-zone {padding: 10px; padding-bottom: 0px;}
.file-main-zone .files .files-list .files-list-zone .row {margin-right: -5px; margin-left: -5px;}
.file-main-zone .files .files-list .files-list-zone .row div[class^='col-'] {padding-right: 5px; padding-left: 5px;}
/*.file-main-zone .files .files-list .files-list-zone .file-box {position: relative; width: 100%; border: 1px solid #ccc; background-color: #eee; margin-bottom: 10px;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-inner {position: relative; width: 100%; padding-top: 100%;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-inner > div {position: absolute; top: 0; right: 0; left: 0; bottom: 0; padding: 10px;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-inner img {object-fit: contain; width: 100%; height: 100%;}
.file-main-zone .files .files-list .files-list-zone .file-box.active {background-color: #fff; border-color: #2c699e; box-shadow: 0px 0px 3px 2px #2c699e;} */

.file-main-zone .files .files-list .files-list-zone .file-box {position: relative; width: 100%; border: 1px solid #ccc; background-color: #eee; margin-bottom: 10px;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-image {float: left; width: 90px ;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-image .file-box-inner {position: relative; width: 100%; padding-top: 100%;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-image .file-box-inner > div {position: absolute; top: 0; right: 0; left: 0; bottom: 0; padding: 10px;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-image .file-box-inner img {object-fit: contain; width: 100%; height: 100%;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-info {margin-left: 90px; padding: 10px 60px 10px 0;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-info.has-action {padding-right: 35px;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-info .file-box-filename {font-weight: bold; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-info .file-box-info-row {display: flex;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-info .file-box-info-row > div {flex : 1;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-info .file-box-publishstatus {padding: 5px 10px; background-color: #ccc; color: #fff; display: inline-block; margin-top: -5px; margin-bottom: -5px;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-info .file-box-publishstatus.file-box-publishstatus-y {background-color: #009D4C;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-info .file-box-publishstatus.file-box-publishstatus-n {background-color: #F39C12;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-info .file-box-filesize {overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; font-size: 12px;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-info .file-box-fileext {overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; font-size: 12px;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-info .file-box-filetags {white-space: normal;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-info .file-box-filetag {padding: 2px 7px; margin: 2px 5px 0 0; display: inline-block; border: 1px solid #000;border-radius: 5px; color: #000; background-color: #fff;}
.file-main-zone .files .files-list .files-list-zone .file-box.active {background-color: #fff; border-color: #2c699e; box-shadow: 0px 0px 3px 2px #2c699e;} 
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-checkbox {position: absolute; top: 0; left: 0; width: 25px; height: 25px; text-align: center; line-height: 25px; z-index: 2000; }
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-action {position: absolute; top: 10px; right: 10px; width: 20px; text-align: center; z-index: 2000; }
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-action .file-box-action-icon {cursor: pointer;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-action .shared {color: green;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-action .unshare {color: #ccc;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-action .delete {color: red;}
.file-main-zone .files .files-list .files-list-zone .file-box .file-box-action.file-box-action-next {right: 35px; }

.file-main-zone .files .files-list .files-list-zone .files-list-notfound {width: 100%; padding: 15px; text-align: center; font-size: 20px; font-weight: bold; border: 1px dashed #ccc; margin-bottom: 10px;}

.file-main-zone .quota-zone {border: 1px solid #000; background-color: #fff; padding: 0px; border-radius: 0px; margin-bottom: 15px;}
.file-main-zone .quota-zone .quota-title {padding: 5px 10px; font-size: 13px; font-weight: bold;}
.file-main-zone .quota-zone .quota-progress {padding: 0px 10px;}
.file-main-zone .quota-zone .quota-progress .quota-progress-main {background-color: #f1f1f1; height: 10px;}
.file-main-zone .quota-zone .quota-progress .quota-progress-usage {background-color: #1a73e8; height: 10px;}
.file-main-zone .quota-zone .quota-progress .quota-progress-usage.over-quota {background-color: red;}
.file-main-zone .quota-zone .quota-desc {padding: 5px 10px; font-size: 12px;}

.d2ms-fileupload.qq-uploader {min-height: 100px; padding: 10px; border: 1px dashed #CCC; border-radius: 6px; position: relative; background-color: #FDFDFD;}
.d2ms-fileupload.qq-uploader::before {content: attr(qq-drop-area-text) " "; position: absolute; width: 100%; left: 0; text-align: center; top: 45%; opacity: 0.25; font-size: 200%;}
.d2ms-fileupload.qq-uploader .qq-upload-drop-area {background-color: #eaf3fc;}
.d2ms-fileupload.qq-uploader .qq-upload-desc {font-family: tahoma; font-size: 12px; margin-bottom: 5px;}

/**************** File Select & File Preview *****************/
.file-select-zone {}
.file-select-zone .file-btn-choosefile {}
.file-select-zone .file-preview {}
.file-select-zone .file-preview.ui-sortable .file-preview-box {cursor: move; }
.file-select-zone .file-preview .file-preview-box {position: relative; width: 180px; border: 1px solid #ccc; margin-top: 15px; margin-right: 15px; display: inline-block; background-color: #fff; box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);}
.file-select-zone .file-preview .file-preview-box:hover {box-shadow: 0 0 10px 0 rgb(0 0 0 / 40%);}
.file-select-zone .file-preview .file-preview-box .file-preview-remove {position: absolute; top: 0; right: 1px;color: red; font-size: 16px; cursor: pointer; line-height: 1; z-index: 1;}
.file-select-zone .file-preview .file-preview-box .file-preview-box-inner {position: relative; width: 100%; padding-top: 80%;}
.file-select-zone .file-preview .file-preview-box .file-preview-box-inner > div {position: absolute; top: 0; right: 0; left: 0; bottom: 0; padding: 10px;}
.file-select-zone .file-preview .file-preview-box .file-preview-box-inner img {object-fit: contain; width: 100%; height: 100%;}
.file-select-zone .file-preview .file-preview-box .file-preview-fileurl {position: absolute; bottom: 0; right: 0; left: 0; width: 100%; background-color: rgba(0,0,0,0.5); padding: 5px 10px; overflow: hidden; text-overflow: ellipsis;}
.file-select-zone .file-preview .file-preview-box .file-preview-fileurl a {color: #fff; white-space: nowrap;}

/**************** File upload overwrite *****************/
.qq-upload-list li.qq-upload-fail {
    background-color: #f5d7d7;
    color: #424242;
    border-bottom: 1px solid #decaca;
    border-top: 1px solid #fce6e6;
}
.qq-upload-status-text {
    font-size: 14px;
    font-weight: 700;
    display: block;
}


.skin-smart .sidebar-menu > li.active > a,
.skin-smart .sidebar-menu > li:hover > a { background: #405189 !important; }
.skin-smart .sidebar-menu > li:hover a span { color: #fff !important; }

.form-control-static .btn > em { position: relative; top: 2px; }
.input-group-btn .btn > em { position: relative; top: 2px; margin-right: 3px; }


/* x-twitter */
.fa.custom-x-twitter {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url('../fonts/x-twitter.svg');
  background-size: contain;
  background-repeat: no-repeat;
}


/* dialogShortener */
.dialogShortener.bootstrap-dialog {
  font-family: 'K2D';
}
.dialogShortener.bootstrap-dialog .modal-dialog {
  width: 80%;
}
.dialogShortener.bootstrap-dialog .modal-content {
  border-radius: 15px;
}
.dialogShortener.bootstrap-dialog .modal-header {
  display: none;
}
.dialogShortener.bootstrap-dialog .modal-footer {
  text-align: center;
}
.dialogShortener.bootstrap-dialog .modal-footer .btn {
  font-family: 'K2D';
  background-color: #666666;
  color: #fff;
  font-size: 16px !important;
}
.dialogShortener.bootstrap-dialog .shortener-header {
  text-align: center;
  color: #0A2B66;
  font-size: 28px;
  font-weight: bold;
}
.dialogShortener.bootstrap-dialog .shortener-header .shortener-header-logo {margin-bottom: 15px;}
.dialogShortener.bootstrap-dialog .shortener-header .shortener-header-title {margin-bottom: 15px;}
.dialogShortener.bootstrap-dialog .shortener-body {
  display: flex;
  color: #000;
  font-size: 18px;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-block:first-child {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-block:last-child {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-block {
  flex: 1;
  border: 1px dashed #ccc;
  text-align: center;
  padding: 15px;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-title {
  font-weight: bold;
  margin-bottom: 5px;  
  font-size: 25px;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-subtitle {
  margin-bottom: 15px;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-url {
  padding: 10px;
  background-color: #F2F2F2;
  font-weight: bold;
  margin-bottom: 15px;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-qrcode {
  margin-bottom: 15px;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-qrcode img {
  width: 150px;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-button {
  width: 100%;
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-button .btn,
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-button .btn:hover {
  font-family: 'K2D';
  font-size: 16px !important;
  color: #fff;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-button .btn.btn-shortener-copy {
  background-color: #42B9B1;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-button .btn.btn-shortener-link {
  background-color: #247CB3;
}
.dialogShortener.bootstrap-dialog .shortener-body .shortener-body-button .btn.btn-shortener-qrcode {
  background-color: #C877B8;
}

/* dialogResize */
.dialogResize.bootstrap-dialog {
  font-family: 'K2D';
}
.dialogResize.bootstrap-dialog .modal-dialog {
  width: 80%;
}

.dialogResizePreview.bootstrap-dialog {
  z-index: 1000000 !important;
}
.dialogResizePreview.bootstrap-dialog .modal-dialog {
  width: 70%;
}
.dialogResizePreview.bootstrap-dialog .modal-dialog .dialog-resize-preview canvas {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}