0byt3m1n1-V2

Path: /home/xncercjb/domains/quickspace.co.th/public_html_bak2/admin/css/ [ Home ]
File: style.cs-09102023
body{
	font-family: "tahoma";
}

img{ border:0;}
a, a:hover, a:focus { text-decoration: none; color:inherit; }
textarea{
    resize: vertical;
}
.cleaner {clear:both; width:100%; height:0px;}
.h30{clear:both; width:100%; height:30px;}
.h20{clear:both; width:100%; height:20px;}
.h10{clear:both; width:100%; height:10px;}
.h5{clear:both; width:100%; height:5px;}

.top5{ margin-top:2px;}
.top10{ padding-top:10px;}
.top15{ padding-top:15px;}
.top20{ padding-top:20px;}
.top30{ padding-top:30px;}

.left{ float:left;}
.right{ float:right;}
.center{text-align:center;}
.padding0{ padding:0px !important;}
.padding5{ padding:5px ;}
.padding10{ padding:10px ;}
.padding-b5{ padding-bottom:5px !important;}
.margin0{margin:0px  !important;}
.margin-t0{margin-top:0px  !important;}

.w20{width:20% !important;}
.w30{width:30% !important;}
.w40{width:40% !important;}
.w50{width:50% !important;}
.w60{width:60% !important;}
.w70{width:70% !important;}
.w100{width:100% !important;}

.space20{ padding-left:20px;}
.space40{ padding-left:40px;}
.scroll-x{
	overflow-x:scroll;
	width:100%;
}
.scroll-y{
	overflow-y:scroll;
	width:100%;
}

/*-----FONT-----////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.font8{ font-size:0.8em !important}
.font10{ font-size:1em}
.font12{ font-size:1.2em}
.font14{ font-size:1.4em}
.font16{ font-size:1.6em}
.font18{ font-size:1.8em}
.font20{ font-size:2em}
.font22{ font-size:2.2em}
.font24{ font-size:2.4em}
.font26{ font-size:2.6em}

/*-----COLOR-----////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.white{color:#FFFFFF;}
.grey{color:#5B5B5B;}
.black{color:#000000;}
.orange{color:#EF9540;}
.green{color:#3AD17A;}
.red{color:#E74C3C;}

/*-----HEADER-----////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#header{
	background:#110e10;
	color:#fff;
	padding:10px;
}
.page-logo{
}
.page-logo img{
	float:left;
	/*width:3em;*/
	height: 2.5em;
	float:left;
	margin-top:0.2em;
}
.page-logo a{
	float:left;
	margin-top:0.1em;
}
.top-menu ul{
	padding: 0;
	margin: 0 1em 0 0;
}
.top-menu li{
	color: #BFBFBF;
	float: right;
	font-size:1em;
	list-style: none;
	padding: 0.55em;
	margin: 0 0.2em;
}
.top-menu li a{
	padding:0;
}
.top-menu .admin-info{
	padding: 0.5em;
}
.top-menu li:hover{
	background: #393939;
}
.top-menu .admin-display{
	width: 1.5em;
	height: 1.5em;
	margin-right:5px;
	border-radius: 3em;
}

/*-----MAIN CONTENT-----////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#main-content{
	margin-left:2.6em;
	padding:10px;
}
#main-content .title{
	font-size:1.6em;
	color:#5b5b5b;
	margin:0.5em 0 0.3em 0;
	border-bottom:1px solid #ddd;
}
#main-content .title i:before{
	font-size:0.9em !important;
}
#main-content .title .tool{
	margin-top:-0.2em;
	float:right;
	list-style:none;
}
#main-content .title .tool li{
	float:left;
	margin-right:0.5em;
}
#main-content .title .tool [class^="bt-"], #main-content .tool-bottom [class^="bt-"]{
	font-size:0.7em !important;
}
#main-content .tool-bottom{
	font-size:1.6em;
	color:#5b5b5b;
	margin:0.5em 0 0.3em 0;
	border-top:1px solid #ddd;
}
#main-content .tool-bottom ul{
	padding:0;
	margin-left:0;
	margin-top:-0.3em;
	list-style:none;
}
#main-content .tool-bottom li{
	float:left;
	margin-right:0.5em;
}

/*-----LOGIN-----////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.page-login{
	background:#1f1f1f;
}
.page-login-logo{
	margin-top:4em;
}
.page-login-logo img{
	height:4em;
	margin-top:-0.8em;
}
.form-login{
	background:#eceef1;
	border-radius:5px 5px 10px 10px;
	margin:2em;
}
.form-login ul{
	list-style:none;
	margin:0;
	padding:1.4em 1em;
}
.form-login input[type=text], .form-login input[type=password]{
	font-family: 'century_gothic';
	width:100%;
	height:1.8em;
	background:#dde3ec;
	border:1px solid #dde3ec;
	margin:0.2em 0;
	padding:0 0.5em;
}
.form-login input[type=text]:focus, .form-login input[type=password]:focus{
	outline:none;
	border:1px solid #ffd7a9;
}
.form-login input[type=checkbox]{
	margin-left:1em;
}
.form-login .contact{
	font-family: 'DBHelvethaicaX-Reg';
	font-size:1.4em;
	color:#ddd;
	background:#3d3d3d;
	border-radius:0 0 5px 5px;
	padding:0.2em 0;
}
.form-login .contact a{
	color:#ddd;
	text-decoration:none;
}
/*****************************************************************/

/*-----BUTTON-----////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.bt-login{
	font-family: 'century_gothic';
	font-size:0.8em;
	font-weight:bold;
	border:2px solid #EF9540;
	color:#fff;
	background:#EF9540;
	padding:0.3em 1em;
}
.bt-login:hover, .bt-login:focus{
	background:#e37b00;
	border:2px solid #e37b00;
	outline:none;
}
.bt-save{
    font-family: 'DBHelvethaicaX-Reg';
	font-size:1em;
	font-weight:bold;
	border:1px solid #2d8f3c;
	color:#2d8f3c;
	background:#FFF;
	padding:0em 1em;
}
.bt-save:hover, .bt-save:focus{
	background:#247530;
	border:1px solid #247530;
	outline:none;
	color:#FFF;
}
.bt-clear{
    font-family: 'DBHelvethaicaX-Reg';
	font-size:1em;
	font-weight:bold;
	border:1px solid #EF9540;
	color:#EF9540;
	background:#fff;
	padding:0em 1em;
}
.bt-clear:hover, .bt-clear:focus{
	background:#EF9540;
	color:#fff;
	border:1px solid #EF9540;
	outline:none;
}
.bt-more{
    font-family: 'DBHelvethaicaX-Reg';
	background:#fff;
	border:0;
	color:#4984b9;
	padding:0;
	margin-right:20px;
	border-bottom:1px solid #fff;
}
.bt-more:hover, .bt-more:focus{
	outline:none;
	border-bottom:1px dashed #4984b9;
}
.bt-add, .bt-new{
	cursor:pointer;
    font-family: 'DBHelvethaicaX-Reg';
	font-size:1em;
	font-weight:bold;
	border:1px solid #3498db;
	color:#fff;
	background:#3498db;
	padding:0.2em 1em 0.1em 1em;
}
.bt-add:hover, .bt-add:focus{
	background:#2980b9;
	border:1px solid #2980b9;
	outline:none;
}
.bt-edit2{
	background:#e67e22;
	border:1px solid #e67e22;
}
.bt-edit2:hover{
	background:#d35400;
	border:1px solid #d35400;
}
.bt-new{
	background:#1abc9c;
	border:1px solid #1abc9c;
}
.bt-new:hover{
	background:#16a085;
	border:1px solid #16a085;
}
a.bt_edit{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	color:#252525;
	z-index:9;
}
.bt_edit{
	width:100%;
	color:#252525;
}

.fileUpload {
	position: relative;
	overflow: hidden;
	background:#FAFAFA;
	padding:2px 20px;
	font-size:20px;
	border:1px solid #CCC;
	color:#999;
	display:inline;
}
.fileUpload input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	line-height:30px;
	opacity: 0;
	filter: alpha(opacity=0);
}
.boxfileup{
	padding:0px 6px;
	background:#FFF;
}

/*-----WIDGET-BOX-----////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

[class^="widget-box-"]{
	margin:20px 10px ;
	position:relative;
	border:1px solid #4B77BE;
}
[class^="widget-box-"] .widget-title{
    font-family: 'DBHelvethaicaX-Reg';
	padding:3px 10px;
	background:#4B77BE;
	color:#fff;
	font-size:1.2em;
	width:100%
}
[class^="widget-box-"] .widget-tool{
	position:absolute;
	list-style:none;
	top:0;
	right:0;
	padding:0;
	margin:0;
}
[class^="widget-box-"] .widget-tool li{
	color:#fff;
	cursor:pointer;
	float:left;
	height:40px;
	width:35px;
	text-align:center;
	padding-top:6px;
}
[class^="widget-box-"] .widget-tool li i{
	display:block;
	width:100%;
	height:100%;
}
[class^="widget-box-"] .widget-tool li a i{
	color:#fff;
}
[class^="widget-box-"] .widget-tool li:hover{
	background:#416db4;
	color:#fff;
}
[class^="widget-box-"] .dropdown-menu{
	background:#eee;
	font-size:1em;
}
[class^="widget-box-"] .dropdown-menu li{
	color:#fff;
	cursor:pointer;
	height:auto;
	width:100%;
	text-align:left;
	padding-top:6px;
	background:#eee;
}
[class^="widget-box-"] .dropdown-menu li a{
	display:block;
	width:100%;
}
[class^="widget-box-"] .dropdown-menu li:hover{
	background:#fff !important;
	color:#fff;
}
[class^="widget-box-"] .dropdown-menu li:hover a{
	background:#fff;
}
[class^="widget-box-"] .widget-inbox{
	padding:5px;
}
[class^="widget-box-"] .widget-inbox-cate{
	max-height:220px;
	padding:5px 20px;
	overflow-y:scroll;
}
[class^="widget-box-"] .widget-inbox-cate.nonpadding{
	padding:5px 0;
}
[class^="widget-box-"] .widget-inbox .main-cate{
	padding:0;
	margin:0;
	list-style:none;
}
[class^="widget-box-"] .widget-inbox .sub-cate-1, [class^="widget-box-"] .widget-inbox .sub-cate-2{
	padding:0 0 0 20px;
	margin:0;
	list-style:none;
}
[class^="widget-box-"] .widget-select{
	margin:5px 5px 0 5px;
	border-bottom:1px solid #ddd;
}
[class^="widget-box-"] [class^="selected-item-"], .table-bordered [class^="selected-item-"]{
	color:#fff;
	border-radius:2px;
	margin:0 5px 5px 0;
	padding:2px 8px 0px 5px;
	width:auto;
	display:inline-block;
	border:1px solid #ddd;
}
[class^="widget-box-"] .add-cate{
	color:#999;
	border-radius:2px;
	margin:0 5px 5px 0;
	padding:2px 8px 0px 5px;
	width:auto;
	display:inline-block;
	border:1px dashed #aaa;
	cursor:pointer;
}
[class^="widget-box-"] .add-cate-box{
	display:none;
}
[class^="widget-box-"] .add-cate-box select, .select-tag{
	border: 1px solid #ddd;
	height:32px;
	padding:0;
	margin:0;
	width:40%;
}
[class^="widget-box-"] input{
	border: 1px solid #ddd;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
[class^="widget-box-"] .add-cate-box input{
	border: 1px solid #ddd;
	margin-left:-5px;
	width:40%;
}
[class^="widget-box-"] .add-cate-box button{
	border: 1px solid #ddd;
	margin-left:-1px;
	width:20%;
}
[class^="widget-box-"] .add-cate-box select:focus, [class^="widget-box-"] .add-cate-box input:focus, [class^="widget-box-"] .add-cate-box button:focus{
	outline:none;
}
[class^="selected-item-"] [class^="fa-"]{
	margin-left:2px;
	cursor:pointer;
}


.selected-item-blue{ background:#77AAD6;}
.selected-item-violet{ background:#A692CC;}
.selected-item-yellow{ background:#EFCC6B;}
.selected-item-grey{ background:#95a5a6;}
.selected-item-green{ background:#7BD186;}
.selected-item-black{ background:#2c3e50;}
.selected-item-silver{ background:#bdc3c7;}
.selected-item-orange{ background:#e67e22;}
.selected-item-red{ background:#ea7c72;}
.selected-item-pink{ background:#EF82B8;}
.selected-item-turquoise{ background:#1abc9c;}

/*widget-box-turquoise*/
.widget-box-turquoise{
	border:1px solid #1abc9c;
}
.widget-box-turquoise .widget-title{
	background:#1abc9c;
}
.widget-box-turquoise .widget-tool li:hover ,.widget-box-turquoise .widget-tool .active{
	background:#16a085;
}/*widget-box-turquoise*/

/*widget-box-green*/
.widget-box-green{
	border:1px solid #2ecc71;
}
.widget-box-green .widget-title{
	background:#2ecc71;
}
.widget-box-green .widget-tool li:hover ,.widget-box-green .widget-tool .active{
	background:#27ae60;
}/*widget-box-green*/

/*widget-box-blue*/
.widget-box-blue{
	border:1px solid #3498db;
}
.widget-box-blue .widget-title{
	background:#3498db;
}
.widget-box-blue .widget-tool li:hover ,.widget-box-blue .widget-tool .active{
	background:#2980b9;
}/*widget-box-blue*/

/*widget-box-violet*/
.widget-box-violet{
	border:1px solid #9b59b6;
}
.widget-box-violet .widget-title{
	background:#9b59b6;
}
.widget-box-violet .widget-tool li:hover ,.widget-box-violet .widget-tool .active{
	background:#8e44ad;
}/*widget-box-violet*/

/*widget-box-yellow*/
.widget-box-yellow{
	border:1px solid #f1c40f;
}
.widget-box-yellow .widget-title{
	background:#f1c40f;
}
.widget-box-yellow .widget-tool li:hover ,.widget-box-yellow .widget-tool .active{
	background:#f39c12;
}/*widget-box-yellow*/

/*widget-box-orange*/
.widget-box-orange{
	border:1px solid #e67e22;
}
.widget-box-orange .widget-title{
	background:#e67e22;
}
.widget-box-orange .widget-tool li:hover ,.widget-box-orange .widget-tool .active{
	background:#d35400;
}/*widget-box-orange*/

/*widget-box-red*/
.widget-box-red{
	border:1px solid #e74c3c;
}
.widget-box-red .widget-title{
	background:#e74c3c;
}
.widget-box-red .widget-tool li:hover ,.widget-box-red .widget-tool .active{
	background:#c0392b;
}/*widget-box-red*/

/*widget-box-grey*/
.widget-box-grey{
	border:1px solid #95a5a6;
}
.widget-box-grey .widget-title{
	background:#95a5a6;
}
.widget-box-grey .widget-tool li:hover ,.widget-box-grey .widget-tool .active{
	background:#7f8c8d;
}/*widget-box-grey*/

/*widget-box-pink*/
.widget-box-pink{
	border:1px solid #EF82B8;
}
.widget-box-pink .widget-title{
	background:#EF82B8;
}
.widget-box-pink .widget-tool li:hover ,.widget-box-pink .widget-tool .active{
	background:#EF55A1;
}/*widget-box-pink*/

/*widget-box-sky*/
.widget-box-sky{
	border:1px solid #03a9f4;
}
.widget-box-sky .widget-title{
	background:#03a9f4;
}
.widget-box-sky .widget-tool li:hover ,.widget-box-sky .widget-tool .active{
	background:#0094d8;
}/*widget-box-sky*/

/*-----PAGE-FORM-----////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

[class^="page-"] .form-box{
	padding:0.5em;
    font-family: 'DBHelvethaicaX-Reg';
}
[class^="page-"] .form-box .lang-th:before{
	background:#f8cb4f;
	color:#444;
	padding:2px 6.5px 0px 5px;
	content:"TH";
	font-style:normal;
}
[class^="page-"] .form-box .lang-en:before{
	background:#e95f43;
	color:#444;
	padding:2px 5px 0px 5px;
	content:"EN";
	font-style:normal;
}
[class^="page-"] .form-box label:not(.css-label){
	padding:7.5px;
}
[class^="page-"] .form-box .form-control{
    font-family: 'DBHelvethaicaX-Reg';
}
[class^="page-"] .form-box .form-control:focus{
	outline:none;
	border:1px solid #999;
	box-shadow:0;
}
[class^="page-"] .form-box .unit{
	height:34px;
	border:1px solid #ccc;
	border-left:0;
}
[class^="page-"] .form-box .delete-option{
	font-size:1.2em;
	color:#e14e4e;
	border:1px solid #e14e4e;
	padding:0 8px;
	cursor:pointer;
	border-radius:2px;
}
[class^="page-"] .form-box .delete-option:hover{
	background:#e14e4e;
	color:#fff;
}
[class^="page-"] .form-box .selected-option{
	cursor:text;
}
[class^="page-"] .form-box .input-option{
	border:0;
}
[class^="page-"] .form-box .input-option:focus, [class^="page-"] .form-box .unit:focus, input, select{
	outline:none;
}
[class^="page-"] .form-box .selected-option .active{
	border:1px solid #34495e;
}

/*-----CHECKBOX-----////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

input[type=checkbox].css-checkbox {
	position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox + label.css-label {
	padding-left:25px;
	height:16px; 
	display:inline-block;
	line-height:16px;
	background-repeat:no-repeat;
	background-position: 0 0;
	/*font-size:19px;
	vertical-align:middle;*/
	cursor:pointer;

}
input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -16px;
}
label.css-label {
	background-image:url(../images/checkbox.png);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*-----PRODUCT LIST-----////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.product-list, .record-list{
	min-width:700px;
}
.product-list select, .record-list select{
	height:30px;
	border:1px solid #ccc;
	max-width:100px;
}
.record-list .width-auto{
	max-width:100% !important;
}
.product-list .form-control, .record-list select .form-control{
	min-width:100px;
}
.table-bordered th{
	background:#eee;
}
.publushed, .unpublushed{
	width:80px;
	display:block;
	text-align:center;
	color:#fff;
	cursor:pointer;
	background:#2ecc71;
	border:1px solid #2ecc71;
	overflow:hidden;
	position:relative;
}
.publushed:before, .unpublushed:before{
	font-family: 'FontAwesome';
	content:"\f0d7";
	color:#FFF;
	position:absolute;
	right:5px;
	top:-1px;
}
.unpublushed{
	background:#e74c3c;
	border:1px solid #e74c3c;
}
.publushed select, .unpublushed select{
	cursor:pointer;
	width:100px;
	border:0;
	background:transparent;
}
.bt-edit, .save-edit{
	/*width:70px;*/
	display:block;
	text-align:center;
	color:#fff;
	background:#e67e22;
	line-height:32px;
	height:32px;
	cursor:pointer;
}
.bt-edit:hover{
	background:#d35400;
}
.bt-sub{
	display:block;
	text-align:center;
	color:#fff;
	background:#3498db;
	line-height:32px;
	height:32px;
	cursor:pointer;
}
.bt-sub:hover{
	background:#428bca;
}
.save-edit{
	background:#27ae60;
}
.save-edit:hover{
	background:#2ecc71;
}
.bt-view{
	color:#fff;
	width:110px;
	display:block;
	text-align:center;
	background:#9b59b6;
}
.bt-view:hover{
	background:#8e44ad;
}
.table-bordered .quantity-input{
	border:1px solid #ccc;
	height:34px;
	max-width:70px;
}
.records-info{
	padding:0;
	list-style:none;
}
.records-info-bottom{
	margin:0;
	margin-top:10px;
	float:right;
}
.records-info li{
	display:inline-block;
}
.records-info input{
	height:30px;
	border:1px solid #ccc;
	text-align:center;
}
.records-info .bt-prev, .records-info .bt-next{
	display:inline-block;
	background:#ddd;
	padding:0 10px;
	border-radius:2px;
	color:#444;
}
.records-info .bt-prev:hover, .records-info .bt-next:hover{
	background:#ccc;
}
.records-info select{
	height:30px;
	border:1px solid #ccc;
	
}
.order-total{
	background:#ddd;
	padding:10px 25px;
	margin-right:10px;
}
.order-total table{
	width:100%;
	text-align:right;
}
.shipping-type{
	margin:25px 10px;
	display:inline-block;
}
.shipping-type .shipping-select{
	float:left;
	vertical-align:middle;
}
.shipping-type .shipping-display{
	text-align:center;
	width:222px;
	padding:25px 25px;
	border:1px solid #fcad64;
	float:left;
	font-size:1.2em;
}
.shipping-type .shipping-display img{
	min-height:100px;
	max-width:180px;
	margin-top:25px;
}
.shipping-type .arrow_box {
	position: relative;
	background: #fff;
	border: 1px solid #fcad64;
}
.shipping-type .arrow_box:after, .shipping-type .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.shipping-type .arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #fff;
	border-width: 30px;
	margin-left: -30px;
	z-index:10;
}
.shipping-type .arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-top-color: #fcad64;
	border-width: 32px;
	margin-left: -32px;
	z-index:9;
}
.shipping-type .sub-shipping{
	padding:50px 25px 25px 25px;
	border:1px solid #fcad64;
	float:left;
	width:90%;
	margin-top:-1px;
	margin-left:25px;
	min-height:152px;
	display:none;
}
.shipping-type .sub-shipping input[type=text]{
	height:25px;
	max-width:100px;
}
.shipping-type input[type=radio], .shipping-type i{
	cursor:pointer;
}
.shipping-type .fa-plus-circle{
	padding:0 5px;
	color:#2ecc71;
}
.shipping-type .fa-minus-circle{
	padding:0 5px;
	color:#e74c3c
}
.shipping-type .fa-plus-circle:hover{
	color:#27ae60;
}
.shipping-type .fa-minus-circle:hover{
	color:#c0392b
}
.shipping-not-selected{
	border-color:#ccc !important;
}
.shipping-not--selected:before{
	border-left-color:#ccc !important;
}


/*******************************************************DATE PICKER*/
.ui-datepicker{
	font-family: 'century_gothic';
	font-size:0.7em;
	background:#fff;
	border:1px solid #1abc9c;
	border-radius:2px;
	margin-top:5px;
	display:none;
}
.ui-datepicker .ui-datepicker-header{
	background:#1abc9c;
	padding:15px;
}
.ui-datepicker .ui-datepicker-title{
	margin:5px auto;
	text-align:center;
}
.ui-datepicker .ui-datepicker-prev{
	position:absolute;
	left:3px;
	top:15px;
}
.ui-datepicker .ui-datepicker-next{
	position:absolute;
	right:3px;
	top:15px;
}
.ui-datepicker .ui-datepicker-next:hover, .ui-datepicker .ui-datepicker-prev:hover{
	background:rgba(0,0,0,0.1);
}
.ui-datepicker .ui-datepicker-prev:before, .ui-datepicker .ui-datepicker-next:before{
	font-family: 'FontAwesome';
	content:"\f053";
	cursor:pointer;
	display:block;
	padding:5px;
	color:#fff;
}
.ui-datepicker .ui-datepicker-next:before{
	content:"\f054";
}
.ui-datepicker .ui-datepicker-calendar{
	margin:10px 15px;
}
.ui-datepicker .ui-datepicker-calendar a{
	display:block;
	padding:5px;
	color:#555;
	border:1px solid #fff;
}
.ui-datepicker .ui-datepicker-calendar a:not(.ui-state-active):hover{
	border:1px solid #1abc9c;
	color:#1abc9c;
	font-weight:bold;
}
.ui-datepicker .ui-datepicker-calendar thead th{
	color:#1abc9c;
	width:28px;
	height:28px;
}
.ui-datepicker .ui-datepicker-calendar tbody td{
	text-align:center;
}
.ui-datepicker .ui-datepicker-month, .ui-datepicker .ui-datepicker-year{
	font-size:1.2em;
	font-weight:bold;
	color:#fff;
}
.ui-datepicker .ui-datepicker-month[data-event="change"], .ui-datepicker .ui-datepicker-year[data-event="change"]{
	background:transparent;
	border:0;
	color:#000;
	cursor:pointer;
}
.ui-datepicker .ui-datepicker-current-day, .ui-datepicker .ui-datepicker-current-day a{
	background:#1abc9c;
	color:#fff;
	font-weight:bold;
}
.ui-datepicker .ui-datepicker-today{
	background:#ddd;
}



/****************************************************FALT TOGGLE SWITCH*/
.switch{
	width:auto;
	display:inline-block;
	height:28px;
	vertical-align: middle;
}
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  /*display: block;*/
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
input.cmn-toggle-round-flat + label {
  padding: 2px;
  width: 50px;
  height: 25px;
  background-color: #dddddd;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}
input.cmn-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #fff;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 18px;
  background-color: #dddddd;
  border-radius: 52px;
  transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
  background-color: #8ce196;
}
input.cmn-toggle-round-flat:checked + label:after {
  margin-left: 24px;
  background-color: #8ce196;
}



/******************************************************RATING*/
.rating {
  display: inline-block;
  vertical-align:middle;
  margin-top:-5px;
}
.rating:hover label:before {
  content: "\f005";
  color: yellow;
}
.rating:hover label:hover ~ label:before {
  content: "\f006";
}
.rating input[type=radio]{
  display: none;
}
.rating label{
  cursor: pointer;
  font-size: 20px;
  color: yellow;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 35px;
  text-align: center;
  float: left;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  text-shadow: 0 3px 3px #2b3c4e;
}
.rating label:hover {
  font-size: 23px;
  color: yellow;
}
.rating label:before {
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  margin-top: 0;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  content: "\f005";
  color: yellow;
}
.rating input[type=radio]:checked + label ~ label:before {
  content: "\f006";
  color:#ddd;
}


/******************************************************SCROLL BAR*/
::-webkit-scrollbar {  
    width: 5px;  
	height:5px;
}  
::-webkit-scrollbar-track {  
    background-color:transparent;  
    border-left: 1px solid #transparent;  
}  
::-webkit-scrollbar-thumb {  
    background-color: #ccc;  
}  
::-webkit-scrollbar-thumb:hover {  
    background-color: #aaa;  
}  

.gn-scroller::-webkit-scrollbar {  
    width: 0px;  
	height:0px;
}  
.gn-scroller::-webkit-scrollbar-track {  
    background-color:transparent;  
    border-left: 1px solid #transparent;  
}  
.gn-scroller::-webkit-scrollbar-thumb {  
    background-color: #ccc;  
}  
.gn-scroller::-webkit-scrollbar-thumb:hover {  
    background-color: #aaa;  
}  


/*-----BANNER-----////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*.table-banner{

}
.table-banner th{
	padding:5px;
	text-align:center;
}
.table-banner tr td{
	padding:5px;
}*/

/*-----END -----////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.product-images .style-add-img,
.product-images3 .img , .product-images3 .add-img3,
.product-images2 .img , .product-images2 .add-img2,
.product-images .img, .product-images .add-img  {
	margin:1%;
	padding:0;
	width:31%;
	border:1px solid #fff;
	display:block;
	overflow:hidden;
	float:left;
	position:relative;
	padding-bottom:22%;
}
.full .review-pic2{
	width:100%;
	padding-bottom: 50%;
}
.product-images3 .img img,
.product-images2 .img img,
.product-images .img img{
	width:100%;
	cursor:move;
}
/******************************************/
.product-images .img, .product-images .add-logo{
	margin:1%;
	padding:0;
	width:31%;
	border:1px solid #fff;
	display:block;
	overflow:hidden;
	float:left;
	position:relative;
	padding-bottom:22%;
}
.product-images .img img{
	width:100%;
	cursor:move;
}
.product-images.full .add-logo, .product-images.full .del-logo, .product-images.full .review-pic {
   /* width: 100%;
    padding-bottom: 50%;*/
	width: 50%;
    padding-bottom: 25%;
    cursor: pointer;
    margin: 0;
}
.product-images .add-logo{
	text-align:center;
	width:100%;
	height: 98%;
	border:1px dashed #aaa;
	position:relative;
	cursor:pointer;
}
.product-images .add-logo span{
	position:absolute;
	display:block;
	font-size:24px;
	color:#aaa;
	top:50%;
	left:50%;
	margin-top:-45px;
	margin-left:-41px;
}
.product-images .add-logo span i{
	display:block;
}
.product-images .add-logo span i:before{
	margin-top:15px;
	font-size:40px;
}
/******************************************/

/**/

.product-images3 .add-img3{
	width:200px;
	height:150px;
	text-align:center;
	float:left;
	border:1px dashed #aaa;
	position:relative;
	cursor:pointer;
}
.product-images .style-add-img,
.product-images3 .add-img3,
.product-images2 .add-img2,
.product-images .add-img{
	text-align:center;
	height: 98%;
	border:1px dashed #aaa;
	position:relative;
	cursor:pointer;
}

.product-images .style-add-img span,
.product-images3 .add-img3 span,
.product-images2 .add-img2 span,
.product-images .add-img span{
	position:absolute;
	display:block;
	font-size:24px;
	color:#aaa;
	top:50%;
	left:50%;
	margin-top:-45px;
	margin-left:-41px;
}
.product-images .style-add-img span i,
.product-images3 .add-img3 span i,
.product-images2 .add-img2 span i,
.product-images .add-img span i{
	display:block;
}
.product-images .style-add-img span i:before,
.product-images3 .add-img3 span i:before,
.product-images2 .add-img2 span i:before,
.product-images .add-img span i:before{
	margin-top:15px;
	font-size:40px;
}
.product-images3 .box-frame span,
.product-images2 .box-frame span,
.product-images .box-frame span{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-44px;
	margin-left:-20px;
	z-index:99;
	color:#fff;
	color:rgba(255,255,255,0.7);
	font-size:60px;
	font-family:"Arial Black", Gadget, sans-serif;
	cursor:move;
}
.product-images3 .box-frame img,
.product-images2 .box-frame img,
.product-images .box-frame img{
	width:100%;
	height:auto;
}
.product-images3 .box-frame a.del_img,
.product-images2 .box-frame a.del_img,
.product-images .box-frame a.del_img{
	position:absolute;
	top:0px;
	right:0px;
	width:25px;
	height:28px;
	background:#333;
	background:rgba(255,0,0,0.7);
	color:#FFF;
	text-align:center;
	display:none;
}
.product-images3 .default:before,
.product-images2 .default:before,
.product-images .default:before{
	font-family: 'FontAwesome';
	content:"\f02e";
	position:absolute;
	top:-6px;
	left:5px;
	color:#ff0;
	text-shadow:1px 1px 3px #666;
	font-size:24px;
}
.product-images.full .style-add-img, .product-images3.full .del-image,.product-images3.full .review-pic3,
.product-images3.full .add-img3, .product-images3.full .del-image,.product-images3.full .review-pic3,
.product-images2.full .add-img2, .product-images2.full .del-image,.product-images2.full .review-pic2,
.product-images.full .add-img, .product-images.full .del-image, .product-images.full .review-pic{
	width:100%;
	padding-bottom: 50%;
	cursor:pointer;
	margin:0;
}
.bg_pic{
	background:#9a9a9a;
	z-index:99;
}
.review-pic3{
	width:31%;
	height:150px;
	margin:1%;
	display:block;
	position:relative;
	border:1px dashed #ddd;
	float:left;
	padding-bottom:22%;
	overflow:hidden;
}
.review-pic3 img{
	width:100%;
}
.review-pic2,
.del-image, .review-pic{
	width:31%;
	margin:1%;
	display:block;
	position:relative;
	border:1px dashed #ddd;
	float:left;
	padding-bottom:22%;
	overflow:hidden;
}
.del-image input[type=checkbox].css-checkbox + label.css-label {
	padding-left:0;
	display:block;
    z-index: 9;
	position: absolute;
    top: 0px;
    left: 0px;
	width:16px;
}
.del-image .chk_del {
	position: absolute;
    top: 0px;
    left: 0px;
    color: #f00;
    background: #fff;
    line-height: 0px;
    padding: 0 1.5px;
    cursor: pointer;
    z-index: 9;
	display:block;
}
.del-image{ cursor:move;}
.review-pic2 img,
.del-image img, .review-pic img{
	position:absolute;
	max-width: 100%;
    max-height: 100%;
    width: auto;
}
.del-image i{
	position:absolute;
	top:0px;
	right:0px;
	color:#f00;
	background:#fff;
	line-height:0px;
	padding:0 1.5px;
	cursor:pointer;
	z-index:9;
}
.del-image .index2,
.del-image .index{
	position:absolute;
	top:50px;
	right:0px;
	color:#fff;
    color: #1abc9c;
    text-shadow: 1px 1px #ccc;
	line-height:0;
	font-size:100px;
	cursor:pointer;
	z-index:9;
	opacity:0.6;
	font-size:65px;
}
.add-pdf_en, .file-pdf_en,
.add-pdf, .file-pdf, .add-pdf-style, .file-pdf-style{
	padding:15px 0;
	display: inline-block;
}
.add-pdf_en span, .file-pdf_en span ,
.add-pdf span, .file-pdf span  ,
.add-pdf-style span, .file-pdf-style span{
	font-size:24px;
	color:#888;
	cursor:pointer;
}
.add-pdf_en i:before, .file-pdf_en i:before ,
.add-pdf i:before, .file-pdf i:before ,
.add-pdf-style i:before, .file-pdf-style i:before {
	font-size:40px;
	padding-right:15px;
	color:#aaa;
}
.del-pdf_en:before,
.del-pdf:before{
	font-size:20px !important;
	cursor:pointer;
	color:#e74c3c !important;
}



.welcome{
	padding:2%;
	text-align:center;
}
.sytems-box{
	border:2px solid #aaa;
	border-radius:10px;
	width:200px;
	height:200px;
	margin:0 15px;
	display:inline-block;
	position:relative;
}
.sytems-box i:before, .sytems-box i{
	font-size:100px;
	display:block;
	padding-top:15px;
	padding-bottom:5px;
}
.sytems-box a{
	display:block;
	color:#333;
}
.sytems-box p{
	position:absolute;
	width:176px;
	margin:0 10px;
	text-align:center;
	line-height:20px;
}

.lang{
	padding:0 5px;
	background:#EAEAEA;
	margin-left:5px;
	color:#000000;
}

/*--- Dashboard ---//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.dashboard [class^="col-"]{ padding:15px;}
[class^="box-info-"]{
	position:relative;
	height:150px;
	overflow:hidden;
	border-radius:10px;
}
[class^="box-info-"]::before{
	font-family: 'FontAwesome';
	color:#FFF;
	opacity:0.3;
    font-size: 110px;
    position: absolute;
    top: 15%;
    left: 2%;
}
[class^="box-info-"] .value{
	color:#fff;
	font-size:40px;
	text-align:right;
	margin-top:50px;
	margin-right:25px;
}
[class^="box-info-"] .detail{
	color:#fff;
	font-size:25px;
	float:right;
	text-align:right;
	margin-top:-15px;
	margin-right:25px;
}
[class^="box-info-"] .info-titile{
	color:#fff;
	padding:0px 10px;
	position:absolute;
	display:block;
	top:0px;
	width:100%;
	font-size:27px;
	text-align:left;
}


/*box-1 */ 
.box-info-box-1{background: #3276b5;}
.box-info-box-1::before{content:"\f152";}
.box-info-box-1 .info-titile{background: #0154a4;}

/*box-2 */
.box-info-box-2{background:#33a7d8;}
.box-info-box-2::before{content:"\f16b";}
.box-info-box-2 .info-titile{background:#0092ce;}

/*box-3 */
.box-info-box-3{background:#33b8a5}
.box-info-box-3::before{content:"\f006";}
.box-info-box-3 .info-titile{background:#00a88f;}

/*box-4 */
.box-info-box-4{background:#f99181;}
.box-info-box-4::before{content:"\f0f2";}
.box-info-box-4 .info-titile{background:#ff715b;}

/*box-5 */
.box-info-box-5{background:#f58d4e;}
.box-info-box-5::before{content:"\f0f4";}
.box-info-box-5 .info-titile{background:#f37020;}

/*box-6*/
.box-info-box-6{background:#f04950;}
.box-info-box-6::before{content:"\f0a1";}
.box-info-box-6 .info-titile{background:#ed1b24;}

/*box-7*/
.box-info-box-7{background:#e966ac;}
.box-info-box-7::before{content:"\f1ea";}
.box-info-box-7 .info-titile{background:#e44097;}

/*box-8*/
.box-info-box-8{background:#b868ad;}
.box-info-box-8::before{content:"\f130";}
.box-info-box-8 .info-titile{background:#a64499;}

/*box-9*/
.box-info-box-9{background:#8869ad;}
.box-info-box-9::before{content:"\f0ad";}
.box-info-box-9 .info-titile{background:#6b439b;}

div.tooltip-inner {
    font-size: 20px;
	max-width:300px;
}
.img_show{
	max-width:200px;
	max-height:100px;
}

.popover {
	width:350px;
}
.popover {
	width:500px;
}


label.css-label  img{
	max-height:20px;
	width:20px;
	border:1px solid #C0C0C0;
	border-radius: 2px;
}
.display-none{
	display:none !important;
}