@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: GothamPro;
	src: url("../fonts/GothamPro.eot");
	src: url("../fonts/GothamPro.otf");
	src: url("../fonts/GothamPro.ttf");
}
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
body {
	font-family: GothamPro;
	font-weight: 500;
	font-size: 95%;
	background: #f1f6f4;
}
a {
	color: #b3ae31;
}
a: hover {
	color: #333;
}
img {
	max-width: 100%;
	border: none;
}
select {
	font-family: GothamPro;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 213.333 213.333' style='enable-background:new 0 0 213.333 213.333;' xml:space='preserve' width='512px' height='512px'%3e%3cg%3e%3cg%3e%3cg%3e%3cpolygon points='0,53.333 106.667,160 213.333,53.333 ' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%23999999'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .70em auto, 100%;
}
::-webkit-scrollbar {
	margin-right: 4px;
  	width: 10px;
}
::-webkit-scrollbar-track {
	background: #eee;
}
::-webkit-scrollbar-thumb {
	background: #d2d2c6;
}
.btn-submit {
	color: #fff;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	text-shadow: 1px 1px 1px #696509;
	font-family: GothamPro;
	background: #979214;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#a09b14), to(#928c12));
	background-image: -o-linear-gradient(top, #a09b14, #928c12);
	background-image: linear-gradient(to bottom, #a09b14, #928c12);
	border: 1px solid #a09b14;
	outline: none;
}
.btn-submit:hover {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#928c12), to(#a09b14));
	background-image: -o-linear-gradient(top, #928c12, #a09b14);
	background-image: linear-gradient(to bottom, #928c12, #a09b14);
}
.swal-modal {
	width: 498px;
	border-radius: 0;
}
.swal-text {
	text-align: center;
}
.swal-button {
	font-family: GothamPro;
	font-weight: 500;
}
.swal-button.swal-button--select {
	background-color: #979214;
}
.swal-button.swal-button--select:not([disabled]):hover {
	background-color: #7d790f;
}
.swal-button.swal-button--select:focus {
	-webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(218, 216, 160);
	        box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(218, 216, 160);
}
/* ----     full 1/1 		half 1/2 		third 1/3		fourth 1/4    fifth 1/5  ---- */
.w-twelve {
	width: 100%;
}
.w-eleven-ninety-nine {
	width: 99%;
}
.w-eleven-ninety-six {
	width: 96.5%;
}
.w-eleven-half {
	width: 95.83333333333334%;
}
.w-eleven-third {
	width: 94.93333333333334%;
}
.w-eleven-left {
	width: 93.75000000000001%;
}
.w-eleven {
	width: 91.66666666666667%;
}
.w-ten-half {
	width: 87.5%;
}
.w-ten-eighty-six {
	width: 86.41666666666667%;
}
.w-ten-left {
	width: 85.41666666666667%;
}
.w-ten {
	width: 83.33333333333333%;
}
.w-nine-half {
	width: 79.16666666666667%;
}
.w-nine-left {
	width: 77.08333333333334%;
}
.w-nine {
	width: 75%;
}
.w-eight-third {
	width: 71.93333333333334%;
}
.w-eight-half {
	width: 70.83333333333334%;
}
.w-eight-left-plus {
	width: 69.5%;
}
.w-eight-left {
	width: 68.66666666666667%;
}
.w-eight {
	width: 66.66666666666667%;
}
.w-seven-half {
	width: 62.5%;
}
.w-seven-left {
	width: 60.33333333333333%;
}
.w-seven-left-minus {
	width: 59.3%;
}
.w-seven {
	width: 58.33333333333333%;
}
/* .w-six-fifty-seven {
	width: 57.5%;
} */
.w-six-half {
	width: 54.16666666666667%;
}
.w-six-left {
	width: 52.16666666666667%;
}
.w-six-fivty-one {
	width: 51.3%;
}
.w-six {
	width: 50%;
}
.w-five-forty-nine {
	width: 49%;
}
.w-five-forty-seven {
	width: 47%;
}
.w-five-half {
	width: 45.83333333333334%;
}
.w-five-third {
	width: 44.79166666666668%;
}
.w-five-left {
	width: 43.75000000000001%;
}
.w-five {
	width: 41.66666666666667%;
}
.w-four-third {
	width: 39.58333333333334%;
}
.w-four-half {
	width: 37.5%;
}
.w-four-left {
	width: 39.5%;
}
.w-four {
	width: 33.33333333333333%;
}
.w-three-half {
	width: 29.16666666666667%;
}
.w-three-third {
	width: 28.70500000000001%;
}
.w-three-left {
	width: 27.08333333333334%;
}
.w-three {
	width: 25%;
}
.w-two-half {
	width: 20.83333333333334%;
}
.w-two-third {
	width: 20.35166666666668%;
}
.w-two-left {
	width: 18.75000000000001%;
}
.w-two {
	width: 16.66666666666667%;
}
.w-one-half {
	width: 12.5%;
}
.w-one-left {
	width: 10.41666666666667%;
}
.w-one-left-minus {
	width: 10%;
}
.w-one {
	width: 8.333333333333333%;
}
.w-third {
	width: 6.25%;
}
.w-half {
	width: 4.166666666666667%;
}
.w-left {
	width: 2.777777777777778‬%;
}

.badge.green {
	color: #fff;
	background-color: #3aca1b;
}
.badge.red {
	color: #fff;
	background-color: #fd1414;
}
.badge.blue {
	color: #fff;
	background-color: #119fde;
}
.badge.grey {
	background-color: #dedede;
}


/* ----------------------------------------------------------- */
/* ----------------------- login form ------------------------ */
/* ----------------------------------------------------------- */
.index {
	height: 100vh;
	padding: 4% 9% 0;
	background: url(../images/system/index-cover.png) no-repeat;
	background-size: cover;
}
.index main {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 560px;
	background: rgba(255,255,255,0.7);
}
.index .developer,
.index aside {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
}
.index .developer {
	-ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
	padding: 5% 0 0;
}
.index aside {
	margin: 5% 0;
	padding: 2% 4%;
	height: 80%;
	border-left: 1px solid #09a7e0;
}
.index .developer .compWrap {
	margin-top: 2em;
	text-align: center;
}
.index .developer .compWrap img {
	width: 300px;
}
.index .developer .social {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 4% 30% 0;
}
.index .developer .social .box {
	-ms-flex-preferred-size: 25%;
	    flex-basis: 25%;
	text-align: center;
}
.index .developer .social .box span {
	width: 45px;
	height: 45px; line-height: 45px;
	font-size: 1.2em;
	color: #fff;
	background-color: #25a8e0;
	border-radius: 99em;
}
.index .developer .social .box .facebook {
	background-color: #253d80;
}
.index .developer .social .box .twitter {
	background-color: #259ed9;
}
.index .developer .social .box .youtube {
	background-color: #af1f2b;
}
.index .developer .social .box .linked {
	background-color: #09a7e0;
}

/* -- */
.index aside h2 {
	font-size: 1.7em;
	color: #09a7e0;
	font-weight: 500;
	letter-spacing: -1px;
}
.index aside p {
	margin: 10px 0;
	font-size: 0.95em;
}
.index aside .record {
	position: relative;
	width: 90%;
	padding: 2% 0;
	background: #fff;
	border: 1px solid #ddd;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.index aside .record:nth-child(1) {
	margin-top: 5%;
	border-bottom: none;
}
.index aside .record.borderless {
	margin-top: 3%;
	padding: 0;
	background: transparent;
	border: none;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.index aside .record:nth-child(7) {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
.index aside .record.highlight {
	border: 1px solid #f00;
}
.index aside .record .icon {
	-ms-flex-preferred-size: 15%;
	    flex-basis: 15%;
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
	text-align: center;
	color: #999;
	font-size: 1.3em;
}
.index aside .record .loginText {
	-ms-flex-preferred-size: 85%;
	    flex-basis: 85%;
	height: 34px;
	padding-left: 3%;
	font-family: GothamPro;
	font-size: 0.9em;
	border: none;
	border-left: 1px solid #ddd;
}
.index aside .record.two .loginText {
	position: relative;
}
.index aside .record .loginText:focus {
	outline: none;
}
.index aside .record.two .show-password {
	position: absolute;
	right: 0;
	padding-right: 13px;
	text-align: right;
	line-height: 30px;
	color: #948d11;
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	display: none;
}
.index aside .record.two .show-password.visible {
	display: inline-block;
}
.index aside .record.two .show-password::after {
	content: 'Show';
}
.index aside .record.two .show-password.on::after {
	content: 'Hide';
}
.index aside .tooltip {
	position: absolute;
	left: 15%; top: 44px;
	padding: 1.5% 3%;
	background-color: #f1c45a;
	color: #333;
	text-align: center;
	font-size: 0.8em;
	display: none;
}
.index aside .tooltip::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 16%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #f1c45a transparent;
}
.index aside .error {
	margin: 2% 16.5% 0;
	color: #f00;
	font-size: 0.9em;
	display: none;
}
.index aside .error::before {
	font-family: 'Font Awesome 5 Pro';
	content: '\f06a';
	color: #f00;
	margin-right: 8px;
}
.index aside .process {
	margin: 2% 16.5%;
	color: #979214;
	font-size: 0.9em;
	display: none;
}
.index aside .process i {
	margin-right: 10px;
	-webkit-animation: spinner 1s linear infinite;
	        animation: spinner 1s linear infinite;
	color: #979214;
}
.index aside .switchWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.index aside .switchWrap input[type='checkbox'] {
	opacity: 0;
	filter: alpha(opacity=0);
	display: none;
}
.index aside .record .switch {
	position: relative;
	margin-right: 12px;
	width: 62px;
	height: 34px;
	background: #ccc;
	z-index: 0;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	cursor: pointer;
}
.index aside .record .switch:after {
	content: ' ';
	height: 29px;
	width: 30px;
	background: #fff;
	position: absolute;
	z-index: 2;
	top: 2px;
	left: 3px;
	-webkit-transition-duration: 300ms;
	     -o-transition-duration: 300ms;
	        transition-duration: 300ms;
	-webkit-box-shadow: 0 2px 5px #999;
	        box-shadow: 0 2px 5px #999;
}
.index aside .record .switch.switchOn {
	background: #09a7e0;
}
.index aside .record .switch.switchOn:after {
	left: 29px;
}
.index aside .record .switchLabel {
	font-size: 0.95em;
}
.index aside .record .switchLabel:hover {
	cursor: pointer;
}
.index aside .record .forgot {
	text-decoration: none;
	font-size: 0.95em;
}
.index aside .record .forgot:hover,
.index aside .record .forgot:focus {
	text-decoration: underline;
}
.index aside .record .submitBtn {
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
	margin: 2% 0 1%;
	height: 40px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	font-family: GothamPro;
	color: #fff;
	font-size: 1em;
	background: #8c8512;
	border: none;
}
.index aside .record .submitBtn:hover {
	background: #797309;
}
.index aside .record .copy-right {
	margin: 10% 5% 0;
	color: #666;
	font-size: 0.95em;
}
.index aside .record .version {
	margin: 2% 5% 0;
	font-size: 0.95em;
	color: #666;
}




/* ----------------------------------------------------------- */
/* -------------------- forgot password ---------------------- */
/* ----------------------------------------------------------- */

.forgot-pass {
	height: 100vh;
}
.forgot-pass .bar {
	background-color: #fffee5;
}
.forgot-pass .bar.top {
	padding: 1.5% 10%;
}
.forgot-pass .bar.bottom {
	height: 6px;
	background-color: #ada743;
}
.forgot-pass .bar .logo-wrap img {
	width: 250px;
}
.forgot-pass .section {
	margin: 3% 10% 0;
}
.forgot-pass .section .title {
	margin-bottom: 20px;
	color: #666;
	font-size: 2em;
	font-weight: 500;
}
.forgot-pass .section .title.success {
	color: #339900;
}
.forgot-pass .section .content {
	display: flex;
	flex-wrap: wrap;
}
.forgot-pass .section .content .info-part {
	flex-basis: 50%;
	display: flex;
	justify-content: space-between;
}
.forgot-pass .section .content .form-part {
	flex-basis: 50%;
	padding-left: 20px;
	border-left: 1px solid rgba(200, 200, 200, 0.9);
}
.forgot-pass .section .content .buttons {
	flex-basis: 100%;
	height: 60px;
	margin: 4% 0;
	padding: 0 2%;
	background: rgba(181, 181, 181, 0.2);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.forgot-pass .section .content .info-part .img-wrap {
	flex-basis: 38%;
}
.forgot-pass .section .content .info-part .text {
	flex-basis: 59%;
	line-height: 21px;
	word-wrap: break-word;
}
.forgot-pass .section .content .info-part .img-wrap img {
	width: 100%;
	border: none;
}
.forgot-pass .section .content .info-part .text .second {
	margin-top: 10px;
}
.forgot-pass .section .content .info-part .text span {
	font-weight: 600;
}
.forgot-pass .section .content .form-part .record.two {
	margin-top: 3%;
}
.forgot-pass .section .form-part .record .label-box {
	margin-bottom: 8px;
	color: #444;
}
.forgot-pass .section .form-part .record .input-text {
	width: 60%;
	height: 34px;
	padding-left: 10px;
	color: #666;
	border: 1px solid #ccc;
	border-radius: 2px;
}
.forgot-pass .section .form-part .input-text:focus {
	outline: none;
	background-color: #d7f9cf;
	border-color: #aaa;
}
.forgot-pass .section .form-part .record .input-text.error {
	border-color: #f00;
}
.forgot-pass .section .form-part .input-text::-webkit-input-placeholder {
	color: #aaa;
}
.forgot-pass .section .form-part .input-text::-moz-placeholder {
	color: #aaa;
}
.forgot-pass .section .form-part .input-text:-ms-input-placeholder {
	color: #aaa;
}
.forgot-pass .section .form-part .input-text::-ms-input-placeholder {
	color: #aaa;
}
.forgot-pass .section .form-part .input-text::placeholder {
	color: #aaa;
}
.forgot-pass .section .form-part label.error {
	display: block;
	margin-top: 8px;
	color: #f00;
	line-height: 22px;
	display: none;
}
.forgot-pass .section .form-part label.error::before {
	font-family: "Font Awesome 5 Pro";
	content: '\f06a';
	color: #f00;
	margin-right: 8px;
}
.forgot-pass .section .form-part label.error.show {
	display: block;
}
.forgot-pass .buttons .back-btn {
	color: #19a2da;
	text-decoration: none;
	order: 1;
}
.forgot-pass .buttons .back-btn:hover {
	text-decoration: underline;
}
.forgot-pass .buttons .btn-submit {
	padding: 8px 30px;
	order: 2;
	font-size: 1.05em;
}
/*
.forgot-pass div#imgWrap2 img {
	float: right;
	width: 430px;
	height: 200px;
	border: none;
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.forgot-pass div#imgWrap2 img:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
}*/



/* ----------------------------------------------------------- */
/* ---------------------- dashboard -------------------------- */
/* ----------------------------------------------------------- */

.main-wrap {
	width: 100%;
	min-height: 652px;
	padding-left: 5.5%;
	color: #666;
}
.main-wrap .middlebar {
	position: relative;
	height: 100vh;
}
.main-wrap .sidebar {
	position: fixed;
	min-height: 100vh;
	width: 5.5%;
	top: 0;
	left: 0;
	background: #979214;
	z-index: 5;
	outline: none;
}
.sidebar .logoWrap {
	padding-top: 5%;
	min-height: 64px;
	text-align: center;
	background: #716d0d;
}
.sidebar .logoWrap img {
	position: relative;
	width: 50px;
}
.sidebar ul {
	margin-top: 10%;
	list-style: none;
	padding: 0.5em 0;
}
.sidebar ul li {
	position: relative;
	text-align: center;
	color: white;
}
.sidebar > ul > li:hover {
	background-color: rgba(0, 0, 0, 0.1) !important;
}
.sidebar > ul > li.active {
	background-color: rgba(0, 0, 0, 0.3) !important;
}
.sidebar > ul > li > a {
	display: block;
	padding: 12% 7%;
	color: white;
	text-decoration: none;
}
.sidebar > ul > li > a i {
	font-size: 1.5em;
}
.sidebar > ul > li .tooltiptext {
	visibility: hidden;
	position: absolute;
	top: 22%;
	left: 92px;
	width: 300px;
	z-index: 800;
}
.sidebar > ul > li .tooltiptext .text {
	position: relative;
	float: left;
	padding: 6px 10px;
	font-size: 0.8em;
	background-color: rgba(0,0,0,0.6);z-index: 10000;
}
.sidebar > ul > li:hover .tooltiptext {
	visibility: visible;
}
.sidebar footer {
	position: absolute;
	bottom: 50px;
	line-height: 20px;
	color: white;
	text-align: center;
	width: 100%;
}
/* --- */
.middlebar .top-bar {
	padding: 0 2%;
	height: 64px;
	color: #fff;
	background: #a7a7a7;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.middlebar .top-bar .top-menus {
	-ms-flex-preferred-size: 94%;
	    flex-basis: 94%;
}
.middlebar .top-bar .profile-icon {
	-ms-flex-preferred-size: 4%;
	    flex-basis: 4%;
	text-align: right;
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
}
.middlebar .top-bar .top-menus ul {
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.middlebar .top-bar .top-menus ul li {
	margin: 0 3px;
	text-align: center;
	cursor: pointer;
}
.middlebar .top-bar .top-menus ul li.active {
	height: 64px;
	background-color: #fff;
	border-left: 1px solid #c5c5b9;
	border-right: 1px solid #c5c5b9;
}
.middlebar .top-bar .top-menus ul li:nth-child(1) {
	margin-left: 0;
}
.middlebar .top-bar .top-menus ul li a {
	display: inline-block;
	height: 63px;
	padding: 0 10px;
	color: #fff;
	text-decoration: none;
}
.middlebar .top-bar .top-menus ul li.active a {
	color: #09a7e0;
	font-weight: 600;
}
.middlebar .top-bar .top-menus ul li span {
	display: block;
	font-size: 0.85em;
}
.middlebar .top-bar .top-menus ul li span.fal {
	margin: 12px 0 4px;
	font-size: 1.2em;
}
.middlebar .top-bar .top-menus ul li.active span.fal {
	font-weight: 400;
}
.middlebar .top-bar .icon {
	position: relative;
	width: 38px; height: 38px;
	display: inline-block;
}
.middlebar .top-bar .icon > img {
	width: 100%;
	height: 100%;
	border: 2px solid #fff;
	background-size: cover;
	background-position: center center;
	border-radius: 99em;
	cursor: pointer;
}
.middlebar .top-bar .drop-down {
    position: absolute;
	right: 1%;
	width: 23%;
	top: 64px;
    color: #333;
	background: #fff;
	border: 1px solid rgba(100, 100, 100, 0.2);
	-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
	        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	display: none;
}
.middlebar .top-bar .drop-down:after,
.middlebar .top-bar .drop-down:before {
    content: '';
    display: block;
    position: absolute;
	right: 6%;
    width: 0;
    height: 0;
    border-style: solid;
}
.middlebar .top-bar .drop-down:after {
    top: -20px;
    border-color: transparent transparent #d8d58b transparent;
    border-width: 11px;
}
.middlebar .top-bar .drop-down:before {
    top: -21px;
    border-color: transparent transparent #fff transparent;
    border-width: 11px;
}
.middlebar .top-bar .drop-down .row {
	padding: 2.5% 5%;
	font-size: 0.9em;
	border-bottom: 1px solid #aaa;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.middlebar .top-bar .drop-down .row:last-child {
	padding: 2% 5%;
	border-bottom: none;
}
.middlebar .top-bar .drop-down .row.bar {
	background: #d8d58b;
	font-size: 0.95em;
}
.middlebar .top-bar .drop-down .row .photo {
	-ms-flex-preferred-size: 62px;
	    flex-basis: 62px;
	height: 62px;
	position: relative;
}
.middlebar .top-bar .drop-down .row .links {
	margin-top: 5px;
	min-width: 0;
	-ms-flex-preferred-size: 73%;
	    flex-basis: 73%;
}
.middlebar .top-bar .drop-down .photo img {
	width: 100%;
	height: 100%;
	border-radius: 99em;
	border: 1px solid #999;
}
.middlebar .top-bar .drop-down .overlay {
	position: absolute;
	width: 100%;
	height: 0;
	bottom: 0;
	text-align: center;
	overflow: hidden;
	border-radius: 99em;
}
.middlebar .top-bar .drop-down .row .photo:hover .overlay {
	height: 100%;
	background: #09a7e0;
	cursor: pointer;
}
.middlebar .top-bar .drop-down .overlay span {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 0.9em;
	color: #fff;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.middlebar .top-bar .drop-down .overlay span i {
	display: block;
	margin-bottom: 5px;
}
.middlebar .top-bar .drop-down .row .links p {
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	text-align: left;
}
.middlebar .top-bar .drop-down .row .links p.name {
	font-weight: 600;
}
.middlebar .top-bar .drop-down .row .links p.user {
	color: #666;
}
.middlebar .top-bar .drop-down .row.button {
	padding: 3% 5%;
	background: #efefef;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.middlebar .top-bar .drop-down .row.button .change-pass {
	color: #b3ae31;
	cursor: pointer;
}
.middlebar .top-bar .drop-down .row.button .change-pass span {
	position: relative;
	left: 8px;
	font-size: 0.95em;
}
.middlebar .top-bar .drop-down .row.button .logout {
	-ms-flex-preferred-size: 35%;
	    flex-basis: 35%;
	padding: 2.5% 0;
	text-align: center;
	color: #666;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #dcdcdc;
}

/* --- */
.middlebar .options-bar {
	padding: 0 2%;
	height: 46px;
	background: #fff;
	border-bottom: 1px solid #c3d3d8;
}
.middlebar .options-bar.dash {
	height: 36px;
	color: #888;
	font-size: 0.8em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.middlebar .options-bar.dash span {
	line-height: 36px;
}
.middlebar .options-bar.dash .month-wrap input {
	height: 27px;
	padding-left: 8px;
	color: #666;
	font-family: GothamPro;
	font-size: 0.97em;
	border: 1px solid #ccc;
	outline: none;
}
.middlebar .options-bar ul {
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.middlebar .options-bar ul li {
	margin: 0 10px;
	height: 46px;
	line-height: 46px;
	font-size: 0.85em;
	cursor: pointer;
}
.middlebar .options-bar ul li:nth-child(1) {
	margin-left: 3px;
}
.middlebar .options-bar ul li a {
	color: #666;
	text-decoration: none;
}
.middlebar .options-bar ul li.active a {
	color: #09a7e0;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-decoration: underline;
}
.middlebar .options-bar ul li:hover a {
	color: #09a7e0;
	text-decoration: underline;
}
/* -- content -- */
.dashboard .bars {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0.5% 2% 0;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.dashboard .bars .section.left {
	-ms-flex-preferred-size: 72.5%;
	    flex-basis: 72.5%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.dashboard .bars .section.right {
	-ms-flex-preferred-size: 27%;
	    flex-basis: 27%;
	background: #fff;
	border: 1px solid #ddd;
	position: relative;
}
.dashboard .bars .section .items {
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
	margin-bottom: 0.7%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.dashboard .bars .section .sales-chart {
	padding: 20px;
	background: #fff;
	border: 1px solid #ddd;
	-ms-flex-preferred-size: 70%;
	    flex-basis: 70%;
}
.dashboard .bars .section .receivable-chart {
	padding: 20px;
    text-align: center;
	background: #fff;
	border: 1px solid #ddd;
	-ms-flex-preferred-size: 29.2%;
	    flex-basis: 29.2%;
}
.dashboard .bars .section .items .item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-ms-flex-preferred-size: 19.4%;
	    flex-basis: 19.4%;
	padding: 18px 10px;
	color: rgba(255,255,255,0.9);
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-decoration: none;
}
.dashboard .bars .section .items .item:nth-child(1) {
	background-color: #b1ab1d;
}
.dashboard .bars .section .items .item:nth-child(2) {
	background-color: #51bcef;
}
.dashboard .bars .section .items .item:nth-child(3) {
	background-color: #79c447;
}
.dashboard .bars .section .items .item:nth-child(4) {
	background-color: #51bcef;
}
.dashboard .bars .section .items .item:nth-child(5) {
	background-color: #b1ab1d;
}
.dashboard .bars .section .items .item .icon {
	-ms-flex-preferred-size: 28%;
	    flex-basis: 28%;
	text-align: center;
	font-size: 1.5em;
}
.dashboard .bars .section .items .item .details {
	-ms-flex-preferred-size: 72%;
	    flex-basis: 72%;
	padding-left: 12px;
	border-left: 1px solid #fff;
}
.dashboard .bars .section .items .item .number {
	font-size: 1.1em;
	font-weight: 600;
}
.dashboard .bars .section .items .item .label {
	font-size: 0.95em;
	margin-top: 3px;
}
.dashboard .bars .section .sales-chart header {
	padding-bottom: 8px;
	margin: 0 7px 20px;
	border-bottom: 1px solid #e7e7e7;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.dashboard .bars .section .sales-chart header .title {
	font-weight: 600;
}
.dashboard .bars .section .receivable-chart .title {
	display: block;
	margin: 0 40px 20px;
	text-align: center;
    font-size: 1.05em;
    font-weight: 600;
}
.dashboard .bars .section .receivable-chart .total {
    margin-top: 22px;
}
.dashboard .bars .section .receivable-chart .amount {
    margin-top: 3px;
    font-weight: 600;
    color: #979214;
}
.dashboard .bars .section.right .title {
	margin: 20px 30px 0;
	font-size: 0.95em;
}
.dashboard .bars .section.right .amount {
	margin: 8px 30px 0;
	font-size: 1.4em;
}
.dashboard .bars .section.right .text {
	margin: 14px 30px 0;
	font-size: 0.95em;
	color: #888;
}
.dashboard .bars .section.right .top-charts {
	margin: 36px 30px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.dashboard .bars .section.right .top-charts .summary {
	margin-right: 24px;
}
.dashboard .bars .section.right .top-charts .summary .number {
	font-weight: 600;
	font-size: 1.05em;
}
.dashboard .bars .section.right .top-charts .summary .line-chart {
	margin: 4px 0;
	min-width: 100px;
	height: 10px;
	background-color: #e3e3e3;
}
.dashboard .bars .section.right .top-charts .summary .line-chart i {
	display: block;
	max-width: 140px;
	height: 10px;
	background-color: #b1ab18;
}
.dashboard .bars .section.right .top-charts .summary.orders .line-chart i {
	background-color: #46bfea;
}
.dashboard .bars .section.right .chart {
	position: absolute;
	width: 100%;
	bottom: 0;
}
/* -- */
.dashboard .bars.second {
	margin: 0.6% 2% 0;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}
.dashboard .bars.second .box {
	background: #fff;
	border: 1px solid #ddd;
}
.dashboard .bars.second .box.projects {
	-ms-flex-preferred-size: 50.8%;
	    flex-basis: 50.8%;
}
.dashboard .bars.second .box.user-activity {
	-ms-flex-preferred-size: 21.3%;
	    flex-basis: 21.3%;
	margin-left: 0.5%;
}
.dashboard .bars.second .box.finance {
	-ms-flex-preferred-size: 26.9%;
	    flex-basis: 26.9%;
	margin-left: 0.5%;
}
.dashboard .bars.second .box .title {
	padding: 15px 25px;
	font-size: 1em;
	color: #185e80;
	letter-spacing: 0.1px;
	background-color: #51bcef;
}
.dashboard .bars.second .box.user-activity .title, .dashboard .bars.second .box.finance .title {
	color: #736f0e;
	background-color: #dad9b9;
}
.dashboard .bars.second .box article {
	height: 340px;
	overflow-y: scroll;
}
.dashboard .bars.second .box.user-activity article {
	padding-top: 2%;
}
.dashboard .bars.second .box article .not-found {
	display: block;
	margin-top: 20px;
	text-align: center;
	color: #aaa;
	font-size: 0.9em;
	font-style: italic;
}
.dashboard .bars.second .box.user-activity article .not-found {
	font-size: 0.85em;
}
.dashboard .bars.second .box article .record {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	padding: 0 25px;
	font-size: 0.87em;
	height: 38px;
	line-height: 38px;
	border-bottom: 1px dotted #ccc;
}
.dashboard .bars.second .box article .record:nth-child(1) {
	font-size: 0.9em;
}
.dashboard .bars.second .box article .record.header {
	height: 40px;
	line-height: 40px;
	font-weight: 600;
	background: #f1f6f4;
}
.dashboard .bars.second .box.finance article .record.header {
	background: #f1f0e4;
}
.dashboard .bars.second .box article .record .cave {
	padding-right: 8px;
    height: 38px;
	overflow: hidden;
}
.dashboard .bars.second .box article .record .cave a {
	color: #666;
}
.dashboard .bars.second .box article .record .cave .badge {
	padding: 3px 10px;
	font-size: 0.9em;
	border-radius: 10px;
}
.dashboard .bars.second .box article .record .cave .badge.empty {
	padding: 0 5px;
	font-size: 0.95em;
	border-radius: 0;
}
.dashboard .bars.second .box.user-activity .user {
	margin: 10px 23px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.dashboard .bars.second .box.user-activity .user .image {
	-ms-flex-preferred-size: 16%;
	    flex-basis: 16%;
	height: 40px;
}
.dashboard .bars.second .box.user-activity .user .image img {
	width: 100%;
	border-radius: 99em;
}
.dashboard .bars.second .box.user-activity .user .details {
	-ms-flex-preferred-size: 78%;
	    flex-basis: 78%;
	margin-top: 4px;
	font-size: 0.9em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.dashboard .bars.second .box.user-activity .user .details .name {
	font-weight: 600;
	max-width: 98px;
	height: 17px;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
    white-space: nowrap;
	overflow: hidden;
}
.dashboard .bars.second .box.user-activity .user .details .time {
	margin-left: 7px;
	color: #999;height: 17px;
	font-size: 0.8em;
}
.dashboard .bars.second .box.user-activity .user .details .activity {
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
	font-size: 0.95em;
}
/* --- popup form -- */
.dashboard .state {
	position: absolute;
	top: 0;
	left: -100vw;
}
.dashboard .state:checked ~ .content {
	-webkit-transform: none;
	    -ms-transform: none;
	        transform: none;
}
.dashboard .state:checked ~ .backdrop {
	bottom: 0;
	opacity: 1;
	z-index: 1;
}
.dashboard .pop-up-form {
	position: fixed;
	top: 96px;
	right: 0;
	left: 0;
	height: 0;
	z-index: 3000;
}
.dashboard .pop-up-form .content {
	overflow: hidden;
	position: relative;
	z-index: 2000;
	width: 500px;
	max-height: 95vh;
	margin: 20px auto;
	background: #fff;
	-webkit-transform: translateY(-200%);
	    -ms-transform: translateY(-200%);
	        transform: translateY(-200%);
	-webkit-transition: 0.3s -webkit-transform ease-in-out;
	transition: 0.3s -webkit-transform ease-in-out;
	-o-transition: 0.3s transform ease-in-out;
	transition: 0.3s transform ease-in-out;
	transition: 0.3s transform ease-in-out, 0.3s -webkit-transform ease-in-out;
}
.dashboard .pop-up-form .header {
	height: 36px;
	line-height: 36px;
	color: #555;
	background-color: #ededed;
	border-bottom: 1px solid #aaa;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.dashboard .pop-up-form .header h3 {
	padding-left: 25px;
	font-size: 0.95em;
	font-weight: 600;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	white-space: nowrap;
}
.dashboard .pop-up-form .header label.close {
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	font-size: 1.3em;
	font-weight: 600;
	background-color: #ddd;
	cursor: pointer;
	border-bottom: 1px solid #aaa;
}
.dashboard .pop-up-form .header label.close:hover {
	color: #333;
	background-color: #ccc;
}
.dashboard .popup-body {
	padding: 10px 25px 20px;
}
.dashboard .pop-up-form .row {
	margin-top: 2%;
}
.dashboard .pop-up-form .label-part {
	font-size: 0.82em;
	margin-bottom: 5px;
	color: #666;
}
.dashboard .popup-body .input-text {
	height: 28px;
	padding-left: 8px;
	color: #666;
	font-family: GothamPro;
	font-size: 0.8em;
	border: 1px solid #ccc;
	outline: none;
}
.dashboard .input-text.error {
	border: 1px solid #f00;
}
.dashboard .input-text::-webkit-input-placeholder {
	color: #aaa;
}
.dashboard .input-text::-moz-placeholder {
	color: #aaa;
}
.dashboard .input-text:-ms-input-placeholder {
	color: #aaa;
}
.dashboard .input-text::-ms-input-placeholder {
	color: #aaa;
}
.dashboard .input-text::placeholder {
	color: #aaa;
}
.dashboard .input-text:focus {
	border: 1px solid #b3ae34;
	background-color: #e7ffe7;
}
.dashboard .pop-up-form label.error {
	margin: 5px 0 10px;
	font-size: 0.85em;
	color: #f00;
	display: none;
}
.dashboard .pop-up-form label.error.show {
	display: block;
}
.dashboard .popup-body .btn-submit {
	margin-top: 10px;
	padding: 8px 22px;
}
.dashboard .popup-body .process {
	position: relative;
	top: 2px;
	margin-left: 10px;
	line-height: 39px;
	width: 20px;
	font-size: 1.2em;
	display: none;
}
.dashboard .popup-body .process i {
	-webkit-animation: spinner 1s linear infinite;
	        animation: spinner 1s linear infinite;
	color: #979214;
}
.dashboard .pop-up-form .backdrop {
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 100%;
	left: 0;
	opacity: 0;
	background: rgba(0, 0, 0, 0.6);
	-webkit-transition: 0.3s opacity ease-in-out;
	-o-transition: 0.3s opacity ease-in-out;
	transition: 0.3s opacity ease-in-out;
}



/* ----------------------------------------------------------- */
/* ---------------------- workplace -------------------------- */
/* ----------------------------------------------------------- */

/* -------- unknown -------- */
.unknown {
	margin: 1% 2%;
	padding: 2%;
	min-height: 230px;
	font-size: 0.85em;
	background: #fff url(../images/system/oops.png) 94% 25px no-repeat;
	border: 1px dotted #ccc;
}
.unknown h3 {
	font-size: 1.3em;
	margin-bottom: 1%;
}
.unknown ul {
	margin: 0.5% 3%;
}
.unknown p, .unknown ul li {
	line-height: 21px;
}

/* -------- site -------- */
.workplace .site {
	border: 1px dotted #f00;
}
.workplace .load-page {
	margin: 1% 2%;
	padding: 1.5% 1.5% 2%;
	min-height: 230px;
	font-size: 0.85em;
	background: #fff;
	border: 1px dotted #b9c8cc;
}
.workplace .load-page .header-bar {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin-bottom: 15px;
}
.workplace .load-page .header-bar .page-title {
	-ms-flex-preferred-size: 40%;
	    flex-basis: 40%;
	padding-left: 20px;
	font-size: 1.25em;
}
.workplace .load-page .header-bar .commands {
	-ms-flex-preferred-size: 60%;
	    flex-basis: 60%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}
.workplace .load-page .header-bar .commands input[type='text'] {
	-ms-flex-preferred-size: 30%;
	    flex-basis: 30%;
	padding-left: 10px;
	height: 33px;
	border: 1px solid #ccc;
	border-radius: 3px;
	outline: none;
}
.workplace .load-page .header-bar .commands input[type='text']::-webkit-input-placeholder {
	color: #bbb;
}
.workplace .load-page .header-bar .commands input[type='text']::-moz-placeholder {
	color: #bbb;
}
.workplace .load-page .header-bar .commands input[type='text']:-ms-input-placeholder {
	color: #bbb;
}
.workplace .load-page .header-bar .commands input[type='text']::-ms-input-placeholder {
	color: #bbb;
}
.workplace .load-page .header-bar .commands input[type='text']::placeholder {
	color: #bbb;
}
.workplace .load-page .header-bar .commands select {
	width: 13%;
	margin-left: 7px;
	padding: 0 10px;
	height: 33px;
	font-size: 0.97em;
	border: 1px solid #ccc;
	border-radius: 3px;
	outline: none;
}
.workplace .load-page .header-bar .commands .link {
	margin-left: 7px;
	padding: 8px;
	font-size: 1.1em;
	color: #777;
	border: 1px solid #ccc;
	border-radius: 3px;
	cursor: pointer;
}
.workplace .load-page .header-bar .commands .link:hover {
	color: #09a7e0;
	border: 1px solid #09a7e0;
}
.workplace .load-page .header-bar .commands .add-btn {
	margin-left: 7px;
	padding: 8px 22px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	background-color: #b3ae31;
	border: 1px solid #b3ae31;
	border-radius: 3px;
	cursor: pointer;
}
.workplace .load-page .header-bar .commands .add-btn.secondary {
	background-color: #51bae6;
    border: 1px solid #53abd0;
}
.workplace .load-page .header-bar .commands .add-btn i {
	margin-right: 6px;
}
.workplace .load-page .header-bar .commands .add-btn:hover {
	background-color: #a5a02b;
}
.workplace .load-page .header-bar .commands .add-btn.secondary:hover {
	background-color: #45a8d2;
}
.workplace .load-page .filter-bar {
	padding: 10px 20px;
	border: 1px solid #e7e7e7;
	border-radius: 3px 3px 0 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	display: none;
}
/* --- */
.workplace .load-page .titles {
	border: 1px solid #e7e7e7;
	border-top: none;
	background-color: #dadacf;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding-right: 10px;
}
.workplace .load-page .titles.with-round {
	border-radius: 3px 3px 0 0;
}
.workplace .load-page .titles .cave {
	-ms-flex-preferred-size: auto;
	    flex-basis: auto;
	margin-left: 1%;
	padding-left: 20px;
	height: 38px;
	line-height: 38px;
	font-weight: 600;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
    white-space: nowrap;
	overflow: hidden;
}
.workplace .load-page .titles .cave:first-child {
	margin: 0;
}
.workplace .load-page #dynamic-sect {
	position: relative;
}
.workplace .load-page #dynamic-sect .overlay {
	background-color: rgba(255, 255, 255, 0.5);
	z-index: 999;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100% ;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	display: none;
}
.workplace .load-page #dynamic-sect .overlay.show {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.workplace .load-page #dynamic-sect .overlay.first-time {
	height: calc(100% - 62px);
}
.workplace .load-page #dynamic-sect .overlay .process {
	position: absolute;
	top: 42%;
	font-size: 1.3em;
}
.workplace .load-page #dynamic-sect .overlay .process i {
	-webkit-animation: spinner 1s linear infinite;
	        animation: spinner 1s linear infinite;
}
.workplace .load-page #dynamic-sect .data-table {
	padding: 5px 0 10px;
	border-left: 1px solid #e7e7e7;
	border-bottom: 1px solid #d4d3b8;
	min-height: 90px;
	max-height: 540px;
	overflow: hidden;
	overflow-y: scroll;
}
.workplace .load-page #dynamic-sect .data-table .empty {
	text-align: center;
    color: #aaa;
    font-style: italic;
	line-height: 50px;
}
.workplace .load-page .data-table .record {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-bottom: 1px solid #e7e7e7;
}
.workplace .load-page .data-table .record .cave {
	margin-left: 1%;
	padding-left: 20px;
	height: 34px;
	line-height: 34px;
	font-size: 0.97em;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
    white-space: nowrap;
	overflow: hidden;
}
.workplace .load-page .data-table .record .cave:first-child {
	margin: 0;
}
.workplace .load-page .data-table .record:last-child {
	border-bottom: none;
}
.workplace .load-page .data-table .record:hover {
	background-color: #e6e6e1;
}
.workplace .load-page .data-table .record .btn {
	margin-right: 4px;
	padding: 6px;
	color: #444;
	text-decoration: none;
	cursor: pointer;
	opacity: 0.8;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.workplace .load-page .data-table .record .btn.scrap {
	padding: 6px 9px;
}
.workplace .load-page .data-table .record .btn:hover {
	font-weight: 900;
	color: #979214;
	border-color: #979214;
	opacity: 1;
}
.workplace .load-page .data-table .record .btn.edit:hover {
	color: #15a513;
	border-color: #15a513;
}
.workplace .load-page .data-table .record .btn.delete:hover {
	color: #ea1414;
	border-color: #ea1414;
}
.workplace .load-page .data-table .record .btn.scrap:hover {
	color: #51bae6;
	border-color: #51bae6;
}
.workplace .load-page .data-table .record a {
	color: #666;
}
/* --- */
.workplace .load-page #dynamic-sect .bottom-bar {
	padding: 13px 20px;
	border: 1px solid #e7e7e7;
	border-radius: 0 0 3px 3px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.workplace .load-page .bottom-bar .pagination {
	-ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.workplace .load-page .bottom-bar .pagination .page {
	position: relative;
	margin-right: 3px;
	min-width: 34px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-line-pack: center;
	    align-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	border-radius: 3px;
	border: 1px solid #ccc;
}
.workplace .load-page .bottom-bar .pagination .page::before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 300;
}
.workplace .load-page .bottom-bar .pagination .page.first::before {
	content: '\f323';
}
.workplace .load-page .bottom-bar .pagination .page.previous::before {
	content: '\f053';
}
.workplace .load-page .bottom-bar .pagination .page.next::before {
	content: '\f054';
}
.workplace .load-page .bottom-bar .pagination .page.last::before {
	content: '\f324';
}
.workplace .load-page .bottom-bar .pagination .page.active {
	color: #fff;
	background-color: #b3ae31;
	border-color: #b3ae31;
}
.workplace .load-page .bottom-bar .pagination .page a {
	padding: 7px 12px;
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px;
    text-decoration: none;
    color: #999;
}
/* --- */
.workplace .load-page .bottom-bar .per-page {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.workplace .load-page .bottom-bar .per-page p {
	margin: 0 7px;
}
.workplace .load-page .bottom-bar .per-page select {
	width: 10%;
	margin: 0 5px;
	padding: 7px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	outline: none;
}
.workplace .load-page .bottom-bar .per-page input {
	margin-left: 7px;
	width: 7%;
	padding: 7px;
	font-family: GothamPro;
	border: 1px solid #ccc;
	border-radius: 4px;
	outline: none;
}
.workplace .load-page .bottom-bar .per-page button {
	margin-left: 7px;
	padding: 7px;
	color: #fff;
	background-color: #b3ae31;
	border: 1px solid #b3ae31;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
}


/* ----------------------------------------------------------- */
/* ------------------------- the form ------------------------ */
/* ----------------------------------------------------------- */

.workplace .the-form {
	margin: 1% 2%;
	font-size: 0.85em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.workplace .the-form > aside {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
	-ms-flex-preferred-size: 21%;
	    flex-basis: 21%;
	text-align: right;
}
.workplace .the-form > aside .btn-cancel {
	display: inline-block;
	padding: 7px 40px 7px 33px;
	color: #999;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: #ededed;
	border: 1px solid #dcdcdc;
}
.workplace .the-form > aside .btn-cancel::before {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 300;
	content: "\f060";
	margin-right: 7px;
}
.workplace .the-form > section {
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
	-ms-flex-preferred-size: 78%;
	    flex-basis: 78%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.workplace .the-form > section.second {
	-webkit-box-ordinal-group: 4;
	    -ms-flex-order: 3;
	        order: 3;
	margin-top: 1.2%;
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
}
.workplace .the-form > section.less-down {
	margin-top: 0.5%;
}
.workplace .the-form > section.flex-end {
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}
.workplace .the-form > section.justify {
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.workplace .the-form > section fieldset {
	position: relative;
	-ms-flex-preferred-size: 32.2%;
	    flex-basis: 32.2%;
	padding: 46px 20px 14px;
	background: #fff;
	border: 1px solid #dadada;
}
.workplace .the-form > section fieldset.second {
	margin-left: 18px;
}
.workplace .the-form > section fieldset.no-legend {
	padding: 0;
}
.workplace .the-form > section fieldset.gray {
	background-color: #e4e4e4;
}
.workplace .the-form > section fieldset.full-w {
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
}
.workplace .the-form > section fieldset.w-seventy-three {
	-ms-flex-preferred-size: 73.8%;
	    flex-basis: 73.8%;
}
.workplace .the-form > section fieldset.w-sixty-six {
	-ms-flex-preferred-size: 66.1%;
	    flex-basis: 66.1%;
}
.workplace .the-form > section fieldset.w-forty-seven {
	-ms-flex-preferred-size: 47%;
	    flex-basis: 47%;
}
.workplace .the-form > section fieldset.w-thirty-three {
	-ms-flex-preferred-size: 32.5%;
	    flex-basis: 32.5%;
}
.workplace .the-form > section fieldset.w-twenty-five {
	-ms-flex-preferred-size: 25.2%;
	    flex-basis: 25.2%;
}
.workplace .the-form > section fieldset.w-eighteen {
	-ms-flex-preferred-size: 18%;
	    flex-basis: 18%;
}
.workplace .the-form > section fieldset legend {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	padding: 8px 20px;
	font-weight: 600;
	letter-spacing: 0.2px;
	background-color: #deded4;
	border-bottom: 1px solid #dadada;
}
.workplace .the-form > section fieldset legend.text-center {
	text-align: center;
}
.workplace .the-form.b4system > section fieldset legend {
	background-color: #dfe9ec;
	border-bottom: 1px solid #d0d9dc;
}
.workplace .the-form > section .record {
	margin-bottom: 5px;
}
.workplace .the-form > section .record.half {
	width: 49%;
	display: inline-block;
}
.workplace .the-form > section .record.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.workplace .the-form > section .record.one-line {
	padding: 14px 20px;
	margin-bottom: 0;
}
.workplace .the-form > section .label-part {
	margin-bottom: 6px;
	font-size: 0.95em;
}
.workplace .the-form > section .record .value-part {
	position: relative;
}
.workplace .the-form > section .record .value-part.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.workplace .the-form > section .record .value-part.half {
	width: 49%;
	display: inline-block;
}
.workplace .the-form > section .add-dynamic-row {
	display: inline-block;
	position: relative;
	margin: 4px 0 15px;
	padding-left: 22px;
	color: #b0ab26;
	cursor: pointer;
}
.workplace .the-form > section .add-dynamic-row::before {
	font-family: "Font Awesome 5 Pro";
	content: '\f055';
	font-weight: 300;
	font-size: 1.15em;
	position: absolute;
	left: 0;
}
.workplace .the-form > section .fa-times-circle {
	margin-left: 3px;
	color: #aaa;
	font-size: 1.15em;
	font-weight: 300;
	cursor: pointer;
}
.workplace .the-form > section .suggest {
	position: absolute;
	left: 1px;
	top: 28px;
	min-height: 30px;
	max-height: 200px;
	background: #fff;
	outline: 1px solid #bbb;
	z-index: 100;
	overflow-y: scroll;
	display: none;
}
.workplace .the-form > section .suggest.show {
	display: inline-block;
}
.workplace .the-form > section .suggest .fas {
	margin: 0 5px 0 10px;
	padding: 8px 5px;
	color: #979214;
}
.workplace .the-form > section .suggest.loading::after {
	content: 'loading..';
	font-size: 0.9em;
}
.workplace .the-form > section .suggest .not-found {
	padding-left: 10px;
	line-height: 30px;
	font-size: 0.95em;
}
.workplace .the-form > section .suggest a {
	display: block;
	color: #666;
	cursor: pointer;
}
.workplace .the-form > section .suggest .srch-option {
	padding: 7px 10px;
	font-size: 0.95em;
	border-bottom: 1px dotted #ccc;
}
.workplace .the-form > section .suggest .srch-option:hover {
	background-color: #eee;
}
.workplace .the-form > section .suggest .srch-option p {
	line-height: 16px;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.workplace .the-form > section .suggest .srch-option p span {
	font-weight: 600;
}
.workplace .the-form > section .suggest .srch-option p span::after {
	content: ' ';
}
.workplace .the-form > section .display-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	display: none;
}
.workplace .the-form > section .display-info.show {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.workplace .the-form > section .display-info .section {
	-ms-flex-preferred-size: 48%;
	    flex-basis: 48%;
	padding-right: 4%;
}
.workplace .the-form > section .display-info .section.left {
	border-right: 1px solid #ccc;
}
.workplace .the-form > section .generated-data {
	margin-top: 10px;
	font-size: 0.95em;
}
.workplace .the-form > section .generated-data.hide {
	display: none;
}
.workplace .the-form > section .generated-data.first {
	margin-top: 0;
}
.workplace .the-form .w-sixty-six .display-info .section > div:nth-child(1) {
	margin-top: 0;
}
.workplace .the-form > section .generated-data span {
	display: block;
	margin-bottom: 3px;
	font-weight: 600;
}
.workplace .the-form > section .no-record {
	text-align: center;
	color: #aaa;
	font-style: italic;
}
.workplace .the-form > section .no-record.receipt-form {
	line-height: 50px;
}
.workplace .input-text,
.workplace .drop-box,
.workplace textarea {
	height: 27px;
	padding-left: 8px;
	color: #666;
	font-family: GothamPro;
	font-size: 0.97em;
	border: 1px solid #ccc;
	outline: none;
}
.workplace .input-text:-moz-read-only:not(.datepicker) {
	background-color: #efefef;
}
.workplace .input-text:read-only:not(.datepicker) {
	background-color: #efefef;
}
.workplace .input-text.second,
.workplace .drop-box.second,
.workplace textarea.second {
	margin-left: 10px;
}
.workplace .input-text.order2,
.workplace .drop-box.order2,
.workplace textarea.order2 {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
}
.workplace .input-text.error,
.workplace .drop-box.error,
.workplace textarea.error {
	border: 1px solid #f00;
}
.workplace .input-text::-webkit-input-placeholder, .workplace textarea::-webkit-input-placeholder{
	color: #aaa;
}
.workplace .input-text::-moz-placeholder, .workplace textarea::-moz-placeholder{
	color: #aaa;
}
.workplace .input-text:-ms-input-placeholder, .workplace textarea:-ms-input-placeholder{
	color: #aaa;
}
.workplace .input-text::-ms-input-placeholder, .workplace textarea::-ms-input-placeholder{
	color: #aaa;
}
.workplace .input-text::placeholder,
.workplace textarea::placeholder{
	color: #aaa;
}
.workplace textarea {
	height: auto;
	max-height: 100px;
	padding: 8px;
	resize: none;
	resize: vertical;
}
.workplace .the-form .fstdropdown-select {
    display: none;
}
.workplace .input-text:focus,
.workplace .drop-box:focus,
.workplace .drop-box:focus optgroup,
.workplace textarea:focus {
	border: 1px solid #b3ae34;
	background-color: #e7ffe7;
}
.workplace .input-text:-moz-read-only:not(.datepicker):focus {
	border-color: #ccc;
}
.workplace .input-text:read-only:not(.datepicker):focus {
	border-color: #ccc;
}
.workplace .drop-box:focus,
.workplace .the-form .select-list:focus {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 213.333 213.333' style='enable-background:new 0 0 213.333 213.333;' xml:space='preserve' width='512px' height='512px'%3e%3cg%3e%3cg%3e%3cg%3e%3cpolygon points='0,53.333 106.667,160 213.333,53.333 ' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%23979214'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}
.workplace label.error {
	margin: 5px 0 10px;
	font-size: 0.9em;
	color: #f00;
	display: none;
}
.workplace label.error.show {
	display: block;
}
.workplace label.error::before {
	font-family: "Font Awesome 5 Pro";
	content: '\f06a';
	margin-top: 2px;
	margin-right: 8px;
}
.workplace label.error.top10 {
	margin-top: 10px;
}
.workplace .hint {
	margin-left: 5px;
	font-style: italic;
}
.workplace .the-form .buttons {
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
	margin: 1.5% 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-ordinal-group: 5;
	    -ms-flex-order: 4;
	        order: 4;
}
.workplace .the-form .buttons.w-ninety-two {
	-ms-flex-preferred-size: 92.5%;
	    flex-basis: 92.5%;
}
.workplace .the-form .buttons.w-sixty-six {
	-ms-flex-preferred-size: 66.1%;
	    flex-basis: 66.1%;
}
.workplace .the-form .buttons.w-fifty-eight {
	-ms-flex-preferred-size: 58.6%;
	    flex-basis: 58.6%;
}
.workplace .the-form .buttons.w-fifty {
	-ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
}
.workplace .the-form .buttons .btn-submit {
	display: inline-block;
	padding: 8px 40px;
	font-size: 1.2em;
}
.workplace .the-form .buttons .btn-submit.second {
	margin-right: 10px;
}
.workplace .the-form .buttons .btn-submit.minus {
	background: #a7a7a7;
	border: 1px solid #989898;
}
.workplace .the-form.b4system .buttons .btn-submit {
	background: #51bae6;
	border: 1px solid #53abd0;
	/*text-shadow: 1px 1px 1px #096c96;*/
}
.workplace .the-form .buttons .process {
	margin-right: 15px;
	width: 20px;
	font-size: 1.3em;
	display: none;
}
.workplace .the-form .buttons .process i {
	-webkit-animation: spinner 1s linear infinite;
	        animation: spinner 1s linear infinite;
	color: #979214;
}
.workplace .the-form .add-new {
	position: relative;
	margin-left: -3px;
	width: 30px;
	height: 27px; line-height: 27px;
	text-align: center;
	font-size: 1.1em;
	border: 1px solid #ccc;
	border-left: none;
	cursor: pointer;
}
.workplace .the-form .flex .add-new {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
}
.workplace .the-form .flex .add-new.no-fstdropdown {
	margin-left: 0;
	height: 27px; line-height: 25px;
	-webkit-box-ordinal-group: 1;
	    -ms-flex-order: 0;
	        order: 0;
}
.workplace .the-form .add-new:hover {
	color: #979214;
	font-weight: 500;
	background-color: #efefe1;
}
.workplace .the-form .inline-btn {
	margin: 0 10px;
	height: 27px;
	padding: 0 16px;
	color: #fff;
	background-color: #51bae6;
    border: 1px solid #53abd0;
	cursor: pointer;
}
.workplace .the-form .inline-btn:hover {
	background-color: #45a8d2;
}
.workplace .the-form > section .record.one-line label.error {
	margin: 0;
}
/* --- popup form -- */
.workplace .state {
	position: absolute;
	top: 0;
	left: -100vw;
}
.workplace .state:checked ~ .content {
	-webkit-transform: none;
	    -ms-transform: none;
	        transform: none;
}
.workplace .state:checked ~ .backdrop {
	bottom: 0;
	opacity: 1;
	z-index: 1;
}
.workplace .pop-up-form {
	position: fixed;
	top: 96px;
	right: 0;
	left: 0;
	height: 0;
	z-index: 3000;
}
.workplace .pop-up-form .content {
	/* overflow: hidden; */
	position: relative;
	z-index: 2000;
	width: 500px;
	max-height: 95vh;
	margin: 20px auto;
	background: #fff;
	-webkit-transform: translateY(-200%);
	    -ms-transform: translateY(-200%);
	        transform: translateY(-200%);
	-webkit-transition: 0.3s -webkit-transform ease-in-out;
	transition: 0.3s -webkit-transform ease-in-out;
	-o-transition: 0.3s transform ease-in-out;
	transition: 0.3s transform ease-in-out;
	transition: 0.3s transform ease-in-out, 0.3s -webkit-transform ease-in-out;
}
.workplace .pop-up-form.thousand .content {
	width: 1000px;
}
.workplace .pop-up-form.eight-hundred .content {
	width: 800px;
}
.workplace .pop-up-form.six-hundred .content {
	width: 600px;
}
.workplace .pop-up-form .header {
	height: 36px;
	line-height: 36px;
	color: #555;
	background-color: #ededed;
	border-bottom: 1px solid #aaa;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.workplace .pop-up-form .header h3 {
	padding-left: 25px;
	font-size: 0.95em;
	font-weight: 600;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	white-space: nowrap;
}
.workplace .pop-up-form .header label.close {
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	font-size: 1.3em;
	font-weight: 600;
	background-color: #ddd;
	cursor: pointer;
	border-bottom: 1px solid #aaa;
}
.workplace .pop-up-form .header label.close:hover {
	color: #333;
	background-color: #ccc;
}
.workplace .popup-body {
	padding: 10px 25px 20px;
}
.workplace .pop-up-form .row {
	margin-top: 2%;
}
.workplace .pop-up-form .label-part {
	font-size: 0.82em;
	margin-bottom: 5px;
	color: #666;
}
.workplace .pop-up-form .value-part.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}
.workplace .popup-body .value-part.commission {
	position: relative;
}
.workplace .popup-body .input-text {
	font-size: 0.8em;
}
.workplace .popup-body .value-part.commission .input-text {
	padding-left: 40px;
}
.workplace .popup-body .drop-box {
	font-size: 0.85em;
}
.workplace .popup-body textarea {
	font-size: 0.85em;
}
.workplace .popup-body .checkbox-wrap {
	position: absolute;
	width: 15%;
	height: 27px;
	cursor: pointer;
	border: 1px solid #ccc;
	background-color: #fff;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.workplace .popup-body .checkbox-wrap input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.workplace .popup-body .checkmark {
	position: absolute;
	width: 30px;
	height: 27px;
	line-height: 26px;
	text-align: center;
	font-size: 0.9em;
}
.workplace .popup-body .checkmark:after {
	font-family: 'Font Awesome 5 Pro';
	content: "\f070";
	color: #25b0ef;
}
.workplace .popup-body .checkbox-wrap input:checked ~ .checkmark:after {
	content: "\f06e";
	color: #999;
}
.workplace .popup-body .hint {
	font-size: 0.9em;
}
.workplace .pop-up-form label.error {
	margin-top: 5px;
	font-size: 0.85em;
}
.workplace .popup-body .btn-submit {
	margin-top: 10px;
	padding: 8px 22px;
}
.workplace .popup-body .process {
	position: relative;
	top: 2px;
	margin-left: 10px;
	line-height: 39px;
	width: 20px;
	font-size: 1.2em;
	display: none;
}
.workplace .popup-body .process i {
	-webkit-animation: spinner 1s linear infinite;
	        animation: spinner 1s linear infinite;
	color: #979214;
}
.workplace .pop-up-form .backdrop {
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 100%;
	left: 0;
	opacity: 0;
	background: rgba(0, 0, 0, 0.6);
	-webkit-transition: 0.3s opacity ease-in-out;
	-o-transition: 0.3s opacity ease-in-out;
	transition: 0.3s opacity ease-in-out;
}
.workplace .pop-up-form .add-new {
	width: 36px;
	height: 27px;
	line-height: 26px;
	text-align: center;
	border: 1px solid #ccc;
	border-left: none;
	cursor: pointer;
}
.workplace .pop-up-form .value-part.flex .add-new {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
}
.workplace .pop-up-form .add-new:hover {
	color: #979214;
	font-weight: 500;
	background-color: #efefe1;
}
/* -- */
.workplace .popup-body.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.workplace .popup-body .section {
	display: inline-block;
	-ms-flex-preferred-size: 48.5%;
	    flex-basis: 48.5%;
	padding: 5px 0;
}
.workplace .pop-up-form .row.half {
	width: 49%;
	display: inline-block;
}
.workplace .pop-up-form .row.third {
	width: 33%;
	display: inline-block;
}
.workplace .pop-up-form .btn-area {
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
	margin: 20px 0 10px;
	padding: 10px 0;
	border-top: 1px solid #c3bd11;
}

/* ------  add to list ------ */
.workplace .the-form > section fieldset.no-padding {
	padding: 31px 0 5px;
}
.workplace .the-form > section fieldset .add-bundle {
	position: absolute;
	top: 0; right: 0;
	padding: 8px 15px;
	background: #d2d2c6;
	cursor: pointer;
}
.workplace .the-form > section fieldset .add-bundle i {
	margin-right: 8px;
}
.workplace .the-form > section fieldset .add-bundle:hover {
	background-color: #d6d6c9;
}
.workplace .the-form .elements {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	padding: 8px 20px;
	border-bottom: 1px solid #ccc;
	position: relative;
}
.workplace .the-form .elements.header {
	background-color: #f1f1ec;
}
.workplace .the-form .elements.controls {
	padding: 14px 20px;
}
.workplace .the-form .elements:nth-last-child(1) {
	border-bottom: none;
}
.workplace .the-form .elements > div {
	position: relative;
	padding-right: 8px;
}
.workplace .the-form .elements > div.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.workplace .the-form .elements > div.flex label.error {
	-webkit-box-ordinal-group: 4;
	    -ms-flex-order: 3;
	        order: 3;
}
.workplace .the-form .elements > div label.error {
	margin-top: 5px;
	margin-bottom: 0;
	font-size: 0.95em;
}
.workplace .the-form .elements > .dollar::before {
	content: '$';
	padding: 0 9px;
	height: 28px; line-height: 28px;
	border-right: 1px solid #bbb;
	position: absolute;
}
.workplace .the-form .elements > div input.input-text {
	width: 100%;
	height: 28px;
	padding-left: 7px;
	color: #555;
}
.workplace .the-form .elements > .dollar input.input-text {
	padding-left: 32px;
}
.workplace .the-form .elements > .commission input.input-text {
	width: 70%;
}
.workplace .the-form .checkbox-wrap {
	position: relative;
	width: 30%;
	height: 28px;
	cursor: pointer;
	border: 1px solid #ccc;
	border-right: none;
	background-color: #fff;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.workplace .the-form .checkbox-wrap input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.workplace .the-form .checkmark {
	width: 100%;
	height: 27px;
	line-height: 27px;
	text-align: center;
	position: absolute;
}
.workplace .the-form .checkbox-wrap:hover input ~ .checkmark {
	background-color: #ccc;
}
.workplace .the-form .checkmark:after {
	font-family: 'Font Awesome 5 Pro';
	content: "\f070";
	color: #25b0ef;
}
.workplace .the-form .checkbox-wrap input:checked ~ .checkmark:after {
	content: "\f06e";
	color: #999;
}
.workplace .the-form .elements .add-to-list {
	display: block;
	height: 28px;
	line-height: 26px;
	text-align: center;
	color: #8b8612;
	border: 1px solid #8b8612;
	background-color: #efefe0;
	cursor: pointer;
}
.workplace .the-form .elements .add-to-list:hover {
	background-color: #e6e6d3;
}
/* --- */
.workplace .the-form > section.table-list {
	display: inline-block;
	margin-top: 0.5%;
	padding: 25px 10px 25px 20px;
	min-height: 160px;
	max-height: 260px;
	background: #fff;
    border: 1px solid #dadada;
	overflow: hidden;
	overflow-y: scroll;
}
.workplace .the-form > section.table-list.payroll {
    margin-top: 0.1%;
    padding: 15px 10px 15px 20px;
    counter-reset: section;
}
.workplace .the-form > section.table-list.error {
    border-color: #f00;
}
.workplace .the-form > section.table-list:empty::before {
	position: relative;
	display: inline-block;
	top: 40%;
	width: 100%;
	text-align: center;
    content: 'Your item list is empty.';
    color: #aaa;
    font-style: italic;
}
.workplace .the-form > section.table-list.payroll:empty::before {
    content: "Payroll list is empty, click 'Calculate' button.";
}
.workplace .the-form > section.table-list.error:empty::before {
    color: #f00;
}
.workplace .the-form > section.table-list .one-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
    border: 1px solid #dadada;
    border-bottom: none;
}
.workplace .the-form > section.table-list .one-list:nth-last-child(1) {
    border-bottom: 1px solid #dadada;
}
.workplace .the-form > section.table-list .one-list span {
	padding: 2px 8px;
    border-left: 1px solid #dadada;
}
.workplace .the-form > section.table-list .one-list span:first-child {
    border-left: none;
}
.workplace .the-form > section.table-list .one-list .serial {
	line-height: 24px;
}
.workplace .the-form > section.table-list .one-list .serial::before {
	counter-increment: section;
	content: counter(section)".";
}
.workplace .the-form > section.table-list input {
	min-height: 24px;
	width: 100%;
	color: #444;
	border: none;
	outline: none;
}
.workplace .the-form > section.table-list input:-moz-read-only {
	-moz-user-select: none;
	     user-select: none;
}
.workplace .the-form > section.table-list input:read-only {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.workplace .the-form .table-list .remove-btn {
	line-height: 24px;
	color: #666;
	text-decoration: none;
	cursor: pointer;
}
.workplace .the-form .table-list .remove-btn::before {
	font-family: 'Font Awesome 5 Pro';
	content: '\f2ed';
	margin-right: 5px;
}
.workplace .the-form .table-list .remove-btn:hover {
	color: #9e991d;
	font-weight: 600;
}
.workplace .the-form .table-list .remove-employee {
	line-height: 24px;
	color: #666;
	text-decoration: none;
	cursor: pointer;
}
.workplace .the-form .table-list .remove-employee::before {
	font-family: 'Font Awesome 5 Pro';
	content: '\f2ed';
	margin-right: 5px;
}
.workplace .the-form .table-list .remove-employee:hover {
	color: #9e991d;
	font-weight: 600;
}
/* -- */

.workplace .the-form .fstdiv {
    position: relative;
    height: 26px;
}
.workplace .the-form .fstdiv.second {
    margin-left: 10px;
}
.workplace .the-form .fstdiv.open {
    z-index: 2147483647;
}
.workplace .the-form .fstdropdown {
	display: block;
    width: 100%;
    border: 1px solid #ccc;
    cursor: pointer;
    background: white;
    outline: none;
}
.workplace .the-form .fstdropdown.error {
    border-color: #f00;
}
.workplace .the-form .fstdiv.open > .fstdropdown {
    position: absolute;
}
.workplace .the-form .fstdropdown > .fstselected {
    padding-left: 8px;
    padding-right: 30px;
    height: 25px;
    line-height: 25px;
    font-size: 0.97em;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.workplace .the-form .fstdropdown > .fstselected::after {
    position: absolute;
    top: 54%;
    display: block;
    height: 0;
    margin-top: -3px;
    content: ' ';
    right: 11px;
    border-color: #999 transparent transparent;
    border-style: solid;
    border-width: 5px 5px 0;
}
.workplace .the-form .fstdropdown.open > .fstselected::after {
    display: none;
}
.workplace .the-form .fstdropdown > .fstlist {
    display: none;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
.workplace .the-form .fstdropdown.open > .fstlist {
    display: block;
}
.workplace .the-form .fstlist > div {
    padding: 6px 12px;
    font-size: 0.95em;
}
.workplace .the-form .fstdropdown.open:hover {
    border: 1px solid #b3ae34;
}
.workplace .the-form .fstlist > div:hover {
    background-color: #979214;
    color: #fff;
}
.workplace .the-form .fstlist > div.selected {
    background-color: #ddd;
    color: #262626;
}
.workplace .the-form .fstsearchinput {
    padding: 4px;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    background-color: #fff;
    border: 1px solid #ccc;
    color: #555;
    display: none;
}
.workplace .the-form .fstdropdown.open > .fstsearch {
    display: block;
    padding: 4px;
}
.workplace .the-form .fstdropdown.open .fstsearchinput {
    display: block;
}
.workplace .the-form .fstdropdown .hideFst, .fstdropdown-select.fstcreated {
    display: none;
}
.workplace .the-form .fstAll:hover {
    background-color: #337ab7
}
.workplace .the-form .open .fstAll {
    display: block;
}



/* --- */
.workplace .the-form .upload-wrap {
	min-height: 140px;
	margin: 10px 0;
	padding: 20px 25px;
	border: 1px dashed #ccc;
}
.workplace .the-form .upload-wrap .hint {
	position: absolute;
    line-height: 31px;
    margin-left: 10px;
}

/* --- */
.workplace .the-form fieldset .invoices {
	font-size: 0.95em;
	border: 1px solid #ddd;
	display: none;
}
.workplace .the-form fieldset .invoices.loading {
	border: none;
}
.workplace .the-form fieldset .invoices.show {
	display: block;
}
.workplace .the-form fieldset .invoices .process {
	text-align: center;
	display: block;
	line-height: 180px;
	border: none;
}
.workplace .the-form fieldset .invoices .process i {
	font-size: 1.3em;
	margin-right: 10px;
	-webkit-animation: spinner 1s linear infinite;
	        animation: spinner 1s linear infinite;
	color: #979214;
}
.workplace .the-form fieldset .invoices .process::after {
	content: 'loading..';
}
.workplace .the-form fieldset .invoices .title {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	padding: 7px 25px;
	font-weight: 600;
	border-bottom: 1px solid #ddd;
	background-color: #f1f1ec;
}
.workplace .the-form fieldset .invoices .invoices-list {
	max-height: 292px;
    overflow: hidden;
    overflow-y: scroll;
    counter-reset: section;
}
.workplace .the-form fieldset .invoices .invoices-list .list {
    padding-left: 25px;
    padding-right: 15px;
    border-bottom: 1px solid #ddd;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.workplace .the-form fieldset .invoices .invoices-list .list:nth-last-child(1) {
    border-bottom: none;
}
.workplace .the-form fieldset .invoices .invoices-list .list .cave {
	padding: 6px 0;
}
.workplace .the-form fieldset .invoices .invoices-list .list .serial::before {
	counter-increment: section;
	content: counter(section)".";
}
.workplace .the-form fieldset .invoices .invoices-list .list .input-text {
	height: 25px;
	border-color: #dadada;
}
.workplace .the-form fieldset .invoices .invoices-list .list .input-text.error {
	border-color: #f00;
}
.workplace .the-form fieldset .invoices .invoices-list .list .input-text ~ i {
	margin-left: 10px;
    color: #f00;
    font-size: 1.1em;
    display: none;
}
.workplace .the-form fieldset .invoices .not-found {
	text-align: center;
	color: #aaa;
	font-style: italic;
}

/* -- */
.workplace .the-form .switch-box input {
	display: none;
}
.workplace .the-form .switch-box label {
	display: block;
	border: 1px solid #ccc;
	color: #aaa;
	height: 28px;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.workplace .the-form .switch-box input:checked + label {
	border: 1px solid #c7c128;
	color: #b1ab12;
	background-color: #f1f1ec;
}
.workplace .the-form .switch-box label > * {
	position: absolute;
	-webkit-transition: opacity 0.2s ease;
	-o-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
}
.workplace .the-form .switch-box input + label > :last-child {
	opacity: 1;
}
.workplace .the-form .switch-box input:checked + label > :first-child {
	opacity: 1;
}
.workplace .the-form .switch-box input:checked + label > :last-child {
	opacity: 0;
}

/* -- */
.workplace .the-form fieldset.pay-methods {
	padding: 46px 0 0;
}
.workplace .the-form fieldset .amount-title {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 0.95em;
	margin-bottom: 6px;
	padding: 0 20px;
}
.workplace .the-form fieldset .amount-controls {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 0 20px 10px;
}
.workplace .the-form fieldset .amount-controls .cave.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.workplace .the-form fieldset .amount-controls .cave.flex .fstdiv:nth-child(2) {
	margin-top: 10px;
}
.workplace .the-form fieldset .amount-controls .cave.flex .fstdropdown-select {
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
}
.workplace .the-form fieldset .amount-controls .cave.flex label.error {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
}
.workplace .the-form fieldset .line {
	margin: 15px 0 25px;
	height: 1px;
	background-color: #dadada;
}
.workplace .the-form fieldset .summary {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 0 20px;
}
.workplace .the-form fieldset .summary .cave {
	margin-bottom: 25px;
}
.workplace .the-form fieldset .summary .cave span {
	display: block;
	margin-bottom: 10px;
}
.workplace .the-form fieldset .summary .cave input {
	width: 90%;
	font-size: 1.5em;
	color: #777;
	background-color: transparent;
	border: none;
	outline: none;
}
.workplace .the-form fieldset .summary .cave #nextBalance {
	color: #999313;
}
.workplace .the-form fieldset .summary .cave textarea {
	width: 90%;
	padding: 0;
	font-size: 1.4em;
	background-color: transparent;
	border: none;
	resize: none;
}

/* --- */

.workplace .the-form .check-box-wrap {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.workplace .the-form .check-box-wrap.second {
	margin-left: 10px;
}
.workplace .the-form .check-box-wrap input[type='checkbox'] {
	opacity: 0;
	filter: alpha(opacity=0);
	display: none;
}
.workplace .the-form .check-box-wrap .switch {
	position: absolute;
	width: 40px;
	height: 27px;
	background: #ccc;
	z-index: 0;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	cursor: pointer;
}
.workplace .the-form .check-box-wrap .switch:after {
	content: ' ';
	height: 21px;
	width: 16px;
	background: #fff;
	position: absolute;
	z-index: 2;
	top: 3px;
	left: 3px;
	-webkit-transition-duration: 300ms;
	     -o-transition-duration: 300ms;
	        transition-duration: 300ms;
}
.workplace .the-form .check-box-wrap input[type=checkbox]:checked ~ .switch {
	background-color: #b3b371;
}
.workplace .the-form .check-box-wrap input[type=checkbox]:checked ~ .switch:after {
	left: 21px;
}
.workplace .the-form .check-box-wrap .switch-label {
	position: relative;
	font-size: 0.95em;
	cursor: pointer;
	margin-left: 48px;
}
/* -- */
.workplace .the-form .radio-box-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin-top: 12px;
}
.workplace .the-form .radio-box-wrap input[type=radio] {
	position: absolute;
	visibility: hidden;
}
.workplace .the-form .radio-box-wrap .radio-label {
	position: relative;
	padding: 0 20px 0 30px;
	min-width: 200px;
	z-index: 9;
	cursor: pointer;
	-webkit-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	transition: all 0.25s linear;
}
.workplace .the-form .radio-box-wrap:hover .radio-label {
	color: #09a7e0;
}
.workplace .the-form .radio-box-wrap .switch {
	position: absolute;
	border: 2px solid #aaa;
	border-radius: 100%;
	height: 18px;
	width: 18px;
	z-index: 1;
	-webkit-transition: border 0.25s linear;
	-o-transition: border 0.25s linear;
	transition: border 0.25s linear;
}
.workplace .the-form .radio-box-wrap:hover .switch {
	border-color: #09a7e0;
}
.workplace .the-form .radio-box-wrap .switch::before {
	display: block;
	position: absolute;
	content: '';
	border-radius: 100%;
	height: 8px;
	width: 8px;
	top: 3px;
	left: 3px;
	-webkit-transition: background 0.25s linear;
	-o-transition: background 0.25s linear;
	transition: background 0.25s linear;
}
.workplace .the-form .radio-box-wrap input[type=radio]:checked ~ .switch {
	border-color: #a7a116;
}
.workplace .the-form .radio-box-wrap input[type=radio]:checked ~ .switch::before {
	background: #a7a116;
}
.workplace .the-form .radio-box-wrap input[type=radio]:checked ~ .radio-label {
	color: #a7a116;
}



/* ----------------------------------------------------------- */
/* ------------------------- user page ----------------------- */
/* ----------------------------------------------------------- */


.workplace .the-form .user-priviliges fieldset legend label {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.workplace .the-form .user-priviliges fieldset legend label input {
	-webkit-transform: scale(1.2);
	    -ms-transform: scale(1.2);
	        transform: scale(1.2);
}
.workplace .the-form .user-priviliges fieldset legend label span {
	margin-left: 10px;
}
.workplace .the-form .user-priviliges .grant-list .privilege {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	min-width: 160px;
	margin-bottom: 10px;
}
.workplace .the-form .user-priviliges .grant-list .privilege.w-full {
	width: 100%;
}
.workplace .the-form .user-priviliges .grant-list .privilege input {
	-webkit-transform: scale(1.2);
	    -ms-transform: scale(1.2);
	        transform: scale(1.2);
}
.workplace .the-form .user-priviliges .grant-list .privilege span {
	margin-left: 10px;
}
.workplace .the-form .user-priviliges .grant-list .grant-record {
	background-color: #fff;
	border: 1px solid #dadada;
	border-top: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.workplace .the-form .user-priviliges .grant-list .grant-record.title {
	background-color: #ededed;
	border-top: 1px solid #dadada;
}
.workplace .the-form .user-priviliges .grant-list .grant-record .cave {
	padding: 5px 10px;
	border-left: 1px solid #ccc;
}
.workplace .the-form .user-priviliges .grant-list .grant-record .cave:nth-child(4n+1) {
	padding-left: 20px;
}
.workplace .the-form .user-priviliges .grant-list .grant-record.title .cave {
	padding: 6px 10px;
}
.workplace .the-form .user-priviliges .grant-list .grant-record .cave:nth-child(4n+1) {
	border-left: none;
}






/* ----------------------------------------------------------- */
/* ------------------------- show page ----------------------- */
/* ----------------------------------------------------------- */

.workplace .show-page {
	margin: 1% 2%;
	font-size: 0.85em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.workplace .show-page > aside {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
	-ms-flex-preferred-size: 21%;
	    flex-basis: 21%;
	text-align: right;
}
.workplace .show-page > aside .btn-cancel {
	display: inline-block;
	padding: 7px 40px 7px 33px;
	color: #999;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: #ededed;
	border: 1px solid #dcdcdc;
}
.workplace .show-page > aside .btn-cancel::before {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 300;
	content: "\f060";
	margin-right: 7px;
}
.workplace .show-page > aside .btn-print {
	margin-right: 20px;
	text-decoration: none;
	cursor: pointer;
}
.workplace .show-page > aside .btn-print::before {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 500;
	content: "\f02f";
	margin-right: 7px;
}
.workplace .show-page > aside .print-options {
	display: block;
	margin-top: 40px;
}
.workplace .show-page > aside .print-btn {
	display: block;
	margin-bottom: 7px;
	text-decoration: none;
	cursor: pointer;
}
.workplace .show-page > aside .print-btn::after {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 500;
	content: "\f02f";
	margin-left: 10px;
}
.workplace .show-page > aside .actions {
	display: block;
	margin-top: 15px;
}
.workplace .show-page > aside .actions .close-btn,
.workplace .show-page > aside .actions .depreciate-balance-btn {
	display: inline-block;
	min-width: 180px;
	height: 30px;
	line-height: 28px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: #51bae6;
    border: 1px solid #53abd0;
}
.workplace .show-page > aside .actions .depreciate-balance-btn {
	min-width: 188px;
}
.workplace .show-page > aside .actions .close-btn:hover,
.workplace .show-page > aside .actions .depreciate-balance-btn:hover {
	background-color: #45a8d2;
}
.workplace .show-page > aside .actions .close-btn:hover {
	background-color: #45a8d2;
}
.workplace .show-page > section {
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
	-ms-flex-preferred-size: 78%;
	    flex-basis: 78%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.workplace .show-page > section.second {
	-webkit-box-ordinal-group: 4;
	    -ms-flex-order: 3;
	        order: 3;
	margin-top: 1.2%;
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
}
.workplace .show-page > section.flex-end {
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}
.workplace .show-page > section fieldset {
	position: relative;
	-ms-flex-preferred-size: 30%;
	    flex-basis: 30%;
	padding: 42px 20px 10px;
	background: #fff;
	border: 1px solid #dadada;
}
.workplace .show-page > section fieldset.full-w {
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
}
.workplace .show-page > section fieldset.w-seventy-three {
	-ms-flex-preferred-size: 73.8%;
	    flex-basis: 73.8%;
}
.workplace .show-page > section fieldset.w-seventy-two {
	-ms-flex-preferred-size: 72.5%;
	    flex-basis: 72.5%;
}
.workplace .show-page > section fieldset.w-sixty-six {
	-ms-flex-preferred-size: 66.1%;
	    flex-basis: 66.1%;
}
.workplace .show-page > section fieldset.w-forty-eight {
	-ms-flex-preferred-size: 48%;
	    flex-basis: 48%;
}
.workplace .show-page > section fieldset.w-forty {
	-ms-flex-preferred-size: 42.5%;
	    flex-basis: 42.5%;
}
.workplace .show-page > section fieldset.w-thirty-two {
	-ms-flex-preferred-size: 32.2%;
	    flex-basis: 32.2%;
}
.workplace .show-page > section fieldset.w-twenty-three {
	-ms-flex-preferred-size: 23.4%;
	    flex-basis: 23.4%;
}
.workplace .show-page > section fieldset.second {
	margin-left: 18px;
}
.workplace .show-page > section fieldset legend {
	width: 100%;
	position: absolute;
	top: 0; left: 0;
	padding: 8px 20px;
	font-weight: 600;
	letter-spacing: 0.2px;
	background: #deded4;
	border-bottom: 1px solid #dadada;
}
.workplace .show-page.b4system > section fieldset legend {
	background-color: #dfe9ec;
	border-bottom: 1px solid #d0d9dc;
}
.workplace .show-page > section fieldset legend .edit {
	position: absolute;
	top: 0;
	right: 10px;
	padding: 0 10px;
	height: 31px;
	line-height: 31px;
	color: #979214;
	cursor: pointer;
	display: none;
}
.workplace .show-page > section fieldset:hover legend .edit {
	display: block;
}
.workplace .show-page > section fieldset .add-item {
	position: absolute;
	top: 0; right: 0;
	width: 11%;
	padding: 8px 0 8px 14px;
	background: #d2d2c6;
	cursor: pointer;
}
.workplace .show-page > section fieldset .add-item i {
	margin-right: 8px;
}
.workplace .show-page > section fieldset .add-item:hover {
	font-weight: 600;
	background-color: #d6d6c9;
}
.workplace .show-page > section fieldset .record {
	margin-bottom: 12px;
}
.workplace .show-page > section fieldset .record.less-top {
	margin-bottom: 5px;
}
.workplace .show-page > section fieldset .record.half {
	width: 49%;
    display: inline-block;
}
.workplace .show-page > section .label-part {
	margin-bottom: 5px;
	font-size: 0.9em;
	font-weight: 600;
}
.workplace .show-page > section .record .value-part.half {
    width: 49%;
    display: inline-block;
    -o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.workplace .show-page > section .record .value-part.thirty-five {
    width: 32%;
    display: inline-block;
    -o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.workplace .show-page > section .record .value-part.fiveteen {
    width: 16%;
    display: inline-block;
    -o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.workplace .show-page > section .record .value-part.fiveteen i {
	cursor: pointer;
	margin-right: 5px;
	display: none;
}
.workplace .show-page > section .record:hover .value-part.fiveteen i {
	display: inline;
}
.workplace .show-page > section .record .value-part.fiveteen .fa-pencil-alt:hover {
	color: #979214;
	font-weight: 600;
}
.workplace .show-page > section .record .value-part.fiveteen .fa-trash-alt:hover {
	color: #f00;
	font-weight: 600;
}
.workplace .show-page > section .add-dynamic-row {
	display: inline-block;
	position: relative;
	margin: 4px 0 15px;
	padding-left: 22px;
	color: #b0ab26;
	cursor: pointer;
}
.workplace .show-page > section .add-dynamic-row::before {
	font-family: "Font Awesome 5 Pro";
	content: '\f055';
	font-weight: 300;
	font-size: 1.15em;
	position: absolute;
	left: 0;
}
.workplace .show-page > section .record .value-part .under-line {
	color: #666;
}
.workplace .show-page > section .record .value-part .edit {
	margin-left: 10px;
	color: #b3ae31;
	cursor: pointer;
}
.workplace .show-page > section .record .value-part .edit::after {
	content: 'change';
	font-family: GothamPro;
	margin-left: 5px;
}
.workplace .show-page > section fieldset .record .no-row {
	color: #aaa;
	font-style: italic;
	margin-bottom: 10px;
}
.workplace .show-page > section fieldset.no-padding {
	padding: 31px 0 0px;
}
/* -- */
.workplace .show-page > section fieldset .two-columns {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 5px 0;
}
.workplace .show-page section .section {
	-ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
	padding-bottom: 10px;
	padding-right: 25px;
}
.workplace .show-page .section.left {
	-ms-flex-preferred-size: calc(35% + 17px);
	    flex-basis: calc(35% + 17px);
	border-right: 1px solid #ccc;
}
.workplace .show-page .section.right {
	padding-left: 15px;
}
.workplace .show-page .section .generated-data {
	margin-top: 12px;
	font-size: 0.97em;
}
.workplace .show-page .section .generated-data:first-child {
	margin-top: 0;
}
.workplace .show-page .section .generated-data span {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
}
.workplace .show-page .section .generated-data p {
	margin-top: 5px;
}
.workplace .show-page .section .generated-data p:nth-child(0n+2) {
	margin-top: 0;
}
.workplace .show-page .section .generated-data .under-line {
	color: #666;
}
/* --- */
.workplace .show-page .titles {
	padding-right: 0.7%;
	background-color: #eaeadf;
	border-bottom: 1px solid #ddd;
}
.workplace .show-page .elements {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	padding: 6px 20px;
}
.workplace .show-page .elements > div {
	position: relative;
	padding-right: 8px;
}
.workplace .show-page .table-list {
	min-height: 100px;
	max-height: 260px;
	overflow: hidden;
	overflow-y: scroll;
	counter-reset: section;
}
.workplace .show-page .table-list.height200 {
	min-height: 200px;
	max-height: 460px;
}
.workplace .show-page .table-list:empty::before {
	position: absolute;
	top: 60%;
	width: 100%;
	text-align: center;
    content: 'Your item list is empty.';
    color: #aaa;
    font-style: italic;
}
.workplace .show-page .table-list .elements {
	padding: 7px 20px;
	font-size: 0.97em;
	border-bottom: 1px solid #ddd;
}
.workplace .show-page .table-list .elements.is_summary_yes {
	font-weight: 600;
	color: #555;
}
.workplace .show-page .table-list .elements:hover {
	background-color: #efefef;
}
.workplace .show-page .table-list .elements div {
	overflow: hidden;
	padding-right: 15px;
}
.workplace .show-page .table-list .elements .wrap {
	overflow: visible;
	padding-right: 0;
	white-space: normal;
}
.workplace .show-page .table-list .elements .serial::before {
	counter-increment: section;
	content: counter(section)".";
}
.workplace .show-page .table-list .elements .visible-no {
	text-decoration: line-through;
}
.workplace .show-page .table-list .elements .btn {
	cursor: pointer;
	font-size: 0.95em;
	color: #888;
	opacity: 0.5;
	filter: alpha(opacity=50);
}
.workplace .show-page .table-list .elements:hover .btn {
	opacity: 1;
	filter: alpha(opacity=100);
}
.workplace .show-page .table-list .elements .btn.second {
	margin-left: 20px;
}
.workplace .show-page .table-list .elements .btn:before {
	margin-right: 8px;
	font-family: 'Font Awesome 5 Pro';
	content: "\f616";
}
.workplace .show-page .table-list .elements .btn.edit:before {
	content: "\f040";
}
.workplace .show-page .table-list .elements .btn.delete:before {
	content: "\f2ed";
}
.workplace .show-page .table-list .elements .btn.delete:before {
	content: "\f2ed";
}
.workplace .show-page .table-list .elements .btn.plus:before {
	content: "\f067";
}
.workplace .show-page .table-list .elements .btn.minus:before {
	content: "\f068";
}
.workplace .show-page .table-list .elements .btn:hover {
	font-weight: 600;
}
.workplace .show-page > section .totals {
	position: relative;
	width: 99.3%;
	margin-bottom: 5px;
	padding: 8px 20px;
	font-weight: 600;
	color: #555;
	letter-spacing: 0.2px;
	background: #deded4;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border: 1px solid #dadada;
}
.workplace .show-page > section .totals.down {
	margin-bottom: 20px;
}
.workplace .show-page > section .totals::after {
	position: absolute;
	right: -11px;
	top: -1px;
	content: ' ';
	background-color: #deded4;
	width: 0.7%;
	height: 33px;
	border-right: 1px solid #dadada;
	border-bottom: 1px solid #dadada;
}
/* --- */
.workplace .show-page > section.justify {
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.workplace .show-page .brief {
	-ms-flex-preferred-size: 32.6%;
	    flex-basis: 32.6%;
	background: #fff;
	border: 1px solid #dadada;
	min-width: 0;
	position: relative;
}
.workplace .show-page > section .brief header {
	padding: 8px 20px;
	font-weight: 600;
	letter-spacing: 0.2px;
	background: #deded4;
	border-bottom: 1px solid #dadada;
}
.workplace .show-page > section .brief .title-links {
	position: absolute;
    top: 0;
    right: 0;
}
.workplace .show-page > section .brief .title-links .link {
	padding: 9px 10px;
	font-size: 1.1em;
	color: #666;
	text-decoration: none;
    background-color: #d0d0c4;
    cursor: pointer;
}
.workplace .show-page > section .brief .inside-list {
	padding: 5px 20px;
}
.workplace .show-page > section .brief .inside-list .empty {
	line-height: 48px;
	text-align: center;
	color: #aaa;
	font-style: italic;
}
.workplace .show-page > section .brief .inside-list .overlay {
	background-color: rgba(255, 0, 0, 0.1);
	height: 40px; line-height: 40px;
	text-align: center;
	display: none;
}
.workplace .show-page > section .brief .inside-list .overlay.show {
	display: block;
}
.workplace .show-page > section .brief .inside-list .overlay .process {
	font-size: 1.5em;
}
.workplace .show-page > section .brief .inside-list .overlay .process i {
	-webkit-animation: spinner 1s linear infinite;
	        animation: spinner 1s linear infinite;
}
.workplace .show-page > section .brief .inside-list .record {
	padding: 7px 0;
	border-bottom: 1px solid #ddd;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.workplace .show-page > section .brief .inside-list .record .cave {
	overflow: hidden;
	padding-right: 15px;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.97em;
}
.workplace .show-page > section .brief .inside-list .record.title .cave {
	font-weight: 600;
}
.workplace .show-page > section .brief .inside-list .cave a {
	color: #666;
}
/* --- */
.workplace .show-page .summary p {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 7px 0;
	border-bottom: 1px solid #dadada;
}
.workplace .show-page .summary p:first-child {
	padding-top: 3px;
}
.workplace .show-page .summary p:nth-last-child(1) {
	border-bottom: none;
}
.workplace .show-page .summary p .title {
	-ms-flex-preferred-size: 33%;
	    flex-basis: 33%;
}
.workplace .show-page .summary p .value {
	-ms-flex-preferred-size: 65%;
	    flex-basis: 65%;
	font-size: 1.1em;
	font-weight: 600;
}
.workplace .show-page .summary p .edit {
	-ms-flex-preferred-size: 2%;
	    flex-basis: 2%;
	cursor: pointer;
	display: none;
}
.workplace .show-page .summary:hover p .edit {
	display: inline-block;
}


.workplace .popup-body .fstdiv {
    position: relative;
    height: 26px;
}
.workplace .popup-body .fstdiv.second {
    margin-left: 10px;
}
.workplace .popup-body .fstdiv.open {
    z-index: 2147483647;
}
.workplace .popup-body .fstdropdown {
	display: block;
    width: 100%;
    border: 1px solid #ccc;
    cursor: pointer;
    background: white;
    outline: none;
}
.workplace .popup-body .fstdropdown.error {
    border-color: #f00;
}
.workplace .popup-body .fstdiv.open > .fstdropdown {
    position: absolute;
}
.workplace .popup-body .fstdropdown > .fstselected {
    padding-left: 8px;
    padding-right: 30px;
    height: 25px;
    line-height: 25px;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.workplace .popup-body .fstdropdown > .fstselected::after {
    position: absolute;
    top: 54%;
    display: block;
    height: 0;
    margin-top: -3px;
    content: ' ';
    right: 11px;
    border-color: #999 transparent transparent;
    border-style: solid;
    border-width: 5px 5px 0;
}
.workplace .popup-body .fstdropdown.open > .fstselected::after {
    display: none;
}
.workplace .popup-body .fstdropdown > .fstlist {
    display: none;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
.workplace .popup-body .fstdropdown.open > .fstlist {
    display: block;
}
.workplace .popup-body .fstlist > div {
    padding: 6px 12px;
    font-size: 0.8em;
}
.workplace .popup-body .fstdropdown.open:hover {
    border: 1px solid #b3ae34;
}
.workplace .popup-body .fstlist > div:hover {
    background-color: #979214;
    color: #fff;
}
.workplace .popup-body .fstlist > div.selected {
    background-color: #ddd;
    color: #262626;
}
.workplace .popup-body .fstsearchinput {
    padding: 4px;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    background-color: #fff;
    border: 1px solid #ccc;
    color: #555;
    display: none;
}
.workplace .popup-body .fstdropdown.open > .fstsearch {
    display: block;
    padding: 4px;
}
.workplace .popup-body .fstdropdown.open .fstsearchinput {
    display: block;
}
.workplace .popup-body .fstdropdown .hideFst, .fstdropdown-select.fstcreated {
    display: none;
}
.workplace .popup-body .fstAll:hover {
    background-color: #337ab7
}
.workplace .popup-body .open .fstAll {
    display: block;
}
/* ----------------------------------------------------------- */
/* ------------------------- user page ----------------------- */
/* ----------------------------------------------------------- */


.workplace .show-page .user-priviliges .grant-list .privilege {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	min-width: 155px;
	margin-bottom: 10px;
}
.workplace .show-page .user-priviliges .w-forty-eight .grant-list .privilege {
	width: 220px;
}
.workplace .show-page .user-priviliges .grant-list .privilege.w-full {
	width: 100%;
}
.workplace .show-page .user-priviliges .grant-list .privilege .checkbox {
	width: 24px;
}
.workplace .show-page .user-priviliges .grant-list .privilege span {
	color: #777;
}
.workplace .show-page .user-priviliges .grant-list .privilege .checkbox::before {
	content: '\f05a';
	font-family: "Font Awesome 5 Pro";
	font-style: normal;
	color: #c7c7c7;
}
.workplace .show-page .user-priviliges .grant-list .privilege .checkbox.on::before {
	content: '\f00c';
	font-weight: 600;
	color: #4bb966;
}
.workplace .show-page .user-priviliges .grant-list .privilege .checkbox.off::before {
	content: '\f00d';
}
.workplace .show-page .user-priviliges .grant-list .privilege .checkbox.on ~ span {
	color: #333;
}




/* --- files  */
.workplace .show-page .upload-files {
    margin: 10px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.workplace .show-page .upload-files .file {
	-ms-flex-preferred-size: 35%;
	    flex-basis: 35%;
	margin-bottom: 14px;
	margin-right: 18px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.workplace .show-page .upload-files .file:nth-child(2n+2) {
	-ms-flex-preferred-size: 39%;
	    flex-basis: 39%;
}
.workplace .show-page .upload-files .file .icon {
	-ms-flex-preferred-size: 40px;
	    flex-basis: 40px;
	text-align: center;
	line-height: 36px;
	border-radius: 5px;
	font-size: 0.95em;
	background-color: #deded4;
}
.workplace .show-page .upload-files .file .icon.pdf {
	color: #fff;
	background-color: #de1112;
}
.workplace .show-page .upload-files .file .icon.doc,
.workplace .show-page .upload-files .file .icon.docx {
	color: #fff;
	background-color: #185abd;
}
.workplace .show-page .upload-files .file .icon.xls,
.workplace .show-page .upload-files .file .icon.xlsx {
	color: #fff;
	background-color: #138e52;
}
.workplace .show-page .upload-files .file .icon.pptx {
	color: #fff;
	background-color: #d24625;
}
.workplace .show-page .upload-files .file .icon.zip,
.workplace .show-page .upload-files .file .icon.rar {
	background-color: #e8d882;
}
.workplace .show-page .upload-files .file .icon.txt {
	background-color: #eee;
}
.workplace .show-page .upload-files .file .icon.jpg,
.workplace .show-page .upload-files .file .icon.png,
.workplace .show-page .upload-files .file .icon.gif,
.workplace .show-page .upload-files .file .icon.jpeg {
	background-color: #d8efb7;
}
.workplace .show-page .upload-files .file .icon.mp3 {
	background-color: #f6c603;
}
.workplace .show-page .upload-files .file .icon.mp4 {
	background-color: #51a3d9;
}
.workplace .show-page .upload-files .file .file-details {
	-ms-flex-preferred-size: calc(100% - 52px);
	    flex-basis: calc(100% - 52px);
}
.workplace .show-page .upload-files .file .file-details .name {
	display: block;
	margin-bottom: 3px;
	font-weight: 700;
	color: #777;
	font-size: 0.95em;
	max-height: 15px;
	overflow: hidden;
}
.workplace .show-page .upload-files .file .file-details .size {
	color: #999;
	display: inline;
}
.workplace .show-page .upload-files .file .file-details .delete {
	color: #999;
	margin-left: 20px;
	cursor: pointer;
	display: none;
}
.workplace .show-page .upload-files .file:hover .delete {
	display: inline;
}
.workplace .show-page .upload-files .file .file-details .delete::before {
	font-family: "Font Awesome 5 Pro";
	content: '\f00d';
	margin-right: 7px;
}
.workplace .show-page .upload-files .file .file-details .delete:hover {
	color: #f00;
}
.workplace .show-page .upload-files .no-record {
	-ms-flex-preferred-size: 80%;
	    flex-basis: 80%;
	text-align: center;
	color: #aaa;
	font-style: italic;
}


/* -- reports -- */
.workplace .report-page {
	margin: 1% 2%;
	font-size: 0.85em;
}
.workplace .report-page .title {
	width: 65%;
	padding: 10px 25px;
	font-weight: 600;
	background: #deded4;
	border-bottom: 1px solid #dadada;
}
.workplace .report-page .selectors {
	width: 65%;
	padding: 25px 25px 10px;
	background: #fff;
	border: 1px solid #dadada;
}
.report-page .selectors ul {
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.report-page .selectors ul li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin-bottom: 20px;
}
.report-page .selectors ul li input[type=radio] {
	position: absolute;
	visibility: hidden;
}
.report-page .selectors ul li label {
	position: relative;
	padding: 0 20px 0 30px;
	min-width: 200px;
	z-index: 9;
	cursor: pointer;
	-webkit-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	transition: all 0.25s linear;
}
.report-page .selectors ul li:hover label {
	color: #09a7e0;
}
.report-page .selectors ul li .check {
	position: absolute;
	border: 2px solid #aaa;
	border-radius: 100%;
	height: 18px;
	width: 18px;
	z-index: 1;
	-webkit-transition: border 0.25s linear;
	-o-transition: border 0.25s linear;
	transition: border 0.25s linear;
}
.report-page .selectors ul li:hover .check {
	border-color: #09a7e0;
}
.report-page .selectors ul li .check::before {
	display: block;
	position: absolute;
	content: '';
	border-radius: 100%;
	height: 8px;
	width: 8px;
	top: 3px;
	left: 3px;
	-webkit-transition: background 0.25s linear;
	-o-transition: background 0.25s linear;
	transition: background 0.25s linear;
}
.report-page .selectors input[type=radio]:checked ~ .check {
	border-color: #a7a116;
}
.report-page .selectors input[type=radio]:checked ~ .check::before {
	background: #a7a116;
}
.report-page .selectors input[type=radio]:checked ~ label {
	color: #a7a116;
}
.workplace .report-page .filters {
	margin-top: 10px;
	padding: 20px;
	width: 65%;
	background: #fff;
	border: 1px solid #dadada;
}
.workplace .report-page .filters .filter {
	margin-bottom: 8px;
	display: none;
}
.workplace .report-page .filters .filter.show {
	display: block;
}
.workplace .report-page .filters .filter .label {
	display: inline-block;
	min-width: 200px;
}
.workplace .report-page .filters .filter .input-text {
	height: 30px;
}
.workplace .report-page .filters .filter .drop-box {
	height: 30px;
}
.workplace .report-page .filters .filter .input-text.income-date,
.workplace .report-page .filters .filter .input-text.income-year {
	display: none;
}
.workplace .report-page .filters .filter .input-text.income-date.show,
.workplace .report-page .filters .filter .input-text.income-year.show {
	display: inline-block;
}
/*.workplace .report-page .filters .filter .input-text.income-year {
	display: none;
}*/
.workplace .report-page .buttons {
	margin-left: 204px;
}
.workplace .report-page .buttons .btn-display {
    width: 28.5%;
    padding: 7px 0;
    font-family: GothamPro;
    font-size: 1.1em;
    color: #fff;
    text-shadow: 1px 1px 0 #7b7823;
    background-color: #b3ae31;
    border: 1px solid #a29f30;
    outline: none;
    cursor: pointer;
}
.workplace .report-page .buttons .btn-display:hover {
    background-color: #9c982b;
}
.workplace .report-page .buttons .btn-display:disabled {
	color: #000;
	background: #999;
	border: 1px solid #666;
	text-shadow: none;
	opacity: 0.3;
	filter: alpha(opacity=30);
}
.workplace .report-page .buttons .process {
	margin-left: 12px;
	color: #979214;
	display: none;
}
.workplace .report-page .buttons .process i {
	margin-right: 10px;
	font-size: 1.2em;
	-webkit-animation: spinner 1s linear infinite;
	        animation: spinner 1s linear infinite;
	color: #979214;
}
.workplace .report-page label.error {
	margin: 10px 0 10px 203px;
	font-size: 1em;
}
.workplace .report-page .suggest {
	position: absolute;
	margin-left: 327px;
	min-height: 30px;
	max-height: 200px;
	background: #fff;
	outline: 1px solid #bbb;
	z-index: 100;
	overflow-y: scroll;
	display: none;
}
.workplace .report-page .suggest.show {
	display: block;
}
.workplace .report-page .suggest .fas {
	margin: 0 5px 0 10px;
	padding: 8px 5px;
	color: #979214;
}
.workplace .report-page .suggest.loading::after {
	content: 'loading..';
	font-size: 0.9em;
}
.workplace .report-page .suggest .not-found {
	padding-left: 10px;
	line-height: 30px;
	font-size: 0.95em;
}
.workplace .report-page .suggest a {
	display: block;
	color: #666;
	cursor: pointer;
}
.workplace .report-page .suggest .srch-option {
	padding: 7px 10px;
	font-size: 0.95em;
	border-bottom: 1px dotted #ccc;
}
.workplace .report-page .suggest .srch-option:hover {
	background-color: #eee;
}
.workplace .report-page .suggest .srch-option p {
	line-height: 16px;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.workplace .report-page .suggest .srch-option p span {
	font-weight: 600;
}
.workplace .report-page .suggest .srch-option p span::after {
	content: ' ';
}
/* -- report show */
.workplace .report-show {
	margin: 1% 2%;
	min-height: 100vh;
	padding: 1.5% 2% 2%;
	font-size: 0.9em;
	background: #fff;
	border: 1px dotted #b9c8cc;
}
.workplace .report-show .report-title {
	font-size: 1.25em;
	text-align: center;
}
.workplace .report-show > .filter {
	margin-top: 7px;
	font-size: 1.05em;
	font-weight: 500;
	color: #888;
	text-align: center;
}
.workplace .report-show .header-bar {
	margin-top: 15px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.workplace .report-show .header-bar .info {
	-ms-flex-preferred-size: 76%;
	    flex-basis: 76%;
	padding: 6px 15px;
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
	font-size: 0.95em;
	color: #2cb52c;
	background-color: rgba(0,255,0,0.1);
	border: 1px solid rgba(0,255,0,0.5);
	-ms-flex-item-align: end;
	    align-self: flex-end;
}
.workplace .report-show .header-bar .info.empty {
	color: #c3c3c3;
    background-color: rgba(220, 220, 220, 0.4);
    border: 1px solid rgb(228, 225, 225);
}
.workplace .report-show .header-bar .commands {
	-ms-flex-preferred-size: 24%;
	    flex-basis: 24%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}
.workplace .report-show .header-bar .commands .link {
	margin-left: 7px;
	padding: 6px 10px;
	color: #aaa;
	border: 1px solid #dcdcdc;
	cursor: pointer;
}
.workplace .report-show .header-bar .commands .link:hover {
	color: #09a7e0;
	border: 1px solid #09a7e0;
}
.workplace .report-show .header-bar .commands .back-btn {
	margin-left: 7px;
	padding: 6px 20px;
	text-align: center;
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
	color: #999;
	font-size: 0.9em;
	text-decoration: none;
    cursor: pointer;
    background-color: #ededed;
    border: 1px solid #dcdcdc;
}
.workplace .report-show .header-bar .commands .back-btn::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    content: "\f060";
    margin-right: 7px;
}
/* --- */
.workplace .report-show .table-header {
	margin-top: 15px;
	border: 1px solid #e4e4d6;
	background-color: #e4e4d7;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding-right: 15px; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.workplace .report-show .table-header.empty {
    background-color: #f1f1f1;
    color: #c1c1c1;
}
.workplace .report-show .cave {
	-ms-flex-preferred-size: auto;
	    flex-basis: auto;
	padding-left: 20px;
	height: 34px;
	line-height: 34px;
	font-size: 0.95em;
	font-weight: 600;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
    white-space: nowrap;
	overflow: hidden;
}
.workplace .report-show .report-table {
	padding: 5px 0 10px;
	border-left: 1px solid #e7e7e7;
	border-right: 1px solid #e7e7e7;
	border-bottom: 1px solid #ddd;
	min-height: 120px;
	max-height: 630px;
	overflow: hidden;
	overflow-y: scroll;
}
.workplace .report-show .report-table .no-record {
	line-height: 80px;
	text-align: center;
	font-style: italic;
	color: #d2d1d1;
}
.workplace .report-show .report-table .report-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-bottom: 1px solid #e7e7e7;
	padding-right: 6px;
}
.workplace .report-show .report-table .report-row:hover {
	background-color: rgba(190,190,190,0.25);
}
.workplace .report-show .report-table .report-row .cave {
	padding-left: 20px;
	height: 28px;
	line-height: 28px;
	font-size: 0.93em;
	font-weight: 500;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
    white-space: nowrap;
	overflow: hidden;
}
.workplace .report-show .summary-wrap {
	position: relative;
	margin-top: 15px;
}
.workplace .report-show .summary-wrap .summary-line {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding-right: 16px;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}
.workplace .report-show .summary-wrap .sum-cave {
	height: 34px;
	line-height: 34px;
	font-size: 0.93em;
	font-weight: 600;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
    white-space: nowrap;
	overflow: hidden;
	padding-left: 20px;
}
.workplace .report-show .summary-wrap .summary-line:nth-child(1) .sum-cave {
	border-top: 1px solid #d6d6cb;
	background-color: #e4e4d7;
}
.workplace .report-show .summary-wrap .summary-line:nth-child(2) .sum-cave {
	border-bottom: 1px solid #d6d6cb;
	font-weight: 500;
}
.workplace .report-show .summary-wrap .sum-cave:first-child {
	border-left: 1px solid #d6d6cb;
}
.workplace .report-show .summary-wrap .sum-cave.last::after {
	position: absolute;
	right: 1px; top: 0;
	content: ' ';
	width: 15px;
	height: 34px;
}
.workplace .report-show .summary-wrap .summary-line:nth-child(1) .sum-cave.last::after {
	background-color: #e4e4d7;
	border-top: 1px solid #d6d6cb;
	border-right: 1px solid #d6d6cb;
}
.workplace .report-show .summary-wrap .summary-line:nth-child(2) .sum-cave.last::after {
	border-bottom: 1px solid #d6d6cb;
	border-right: 1px solid #d6d6cb;
}
/* --- income statement --- */
.workplace .report-show .company-name {
	font-size: 1.3em;
	text-align: center;
	margin: 7px 0;
}
.workplace .report-show .commands-with-filter {
	margin: 0 150px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}
.workplace .report-show .commands-with-filter .filter {
	-ms-flex-preferred-size: 76.5%;
	    flex-basis: 76.5%;
	align-self: center;
	font-size: 1.05em;
	font-weight: 500;
	color: #888;
	text-align: center;
}
.workplace .report-show .commands-with-filter.balance {
	margin: 0 50px;
}
.workplace .report-show .commands-with-filter.balance .filter {
	-ms-flex-preferred-size: 86.5%;
	    flex-basis: 86.5%;
}
.workplace .report-show .commands-with-filter .back-btn {
	border: 1px solid blue;
	padding: 6px 20px;
	color: #999;
	font-size: 0.9em;
	text-decoration: none;
    cursor: pointer;
    background-color: #ededed;
    border: 1px solid #dcdcdc;
}
.workplace .report-show .commands-with-filter .back-btn::before {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    content: "\f060";
    margin-right: 7px;
}
.workplace .report-show .commands-with-filter .link {
	margin-right: 7px;
	padding: 6px 10px;
	text-decoration: none;
	color: #aaa;
	border: 1px solid #dcdcdc;
	cursor: pointer;
}
.workplace .report-show .income-statement .details {
	margin: 15px 150px;
	padding: 40px 80px;
	background-color: #f9f9f7;
    border: 1px solid #ddd;
}
.workplace .report-show .income-statement .details .title {
	display: block;
	margin-bottom: 8px;
	font-size: 0.95em;
	text-transform: uppercase;
	font-weight: bold;
}
.workplace .report-show .income-statement .details .title.second {
	margin-top: 15px;
}
.workplace .report-show .income-statement .one-record {
	padding: 6px 0;
	font-size: 0.95em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.workplace .report-show .income-statement .one-record.net {
	margin-top: 26px;
	font-weight: bold;
}
.workplace .report-show .income-statement .one-record:hover {
	background-color: #e8e8df;
}
.workplace .report-show .income-statement .one-record.net:hover {
	background-color: #f9f9f7;
}
.workplace .report-show .income-statement .one-record .step1 {
	-ms-flex-preferred-size: 88%;
	    flex-basis: 88%;
	padding-left: 15px;
}
.workplace .report-show .income-statement .one-record span:nth-child(2) {
	-ms-flex-preferred-size: 12%;
	    flex-basis: 12%;
	text-align: right;
	padding-right: 15px;
}
.workplace .report-show .income-statement .one-record.total span {
	-ms-flex-preferred-size: 88%;
	    flex-basis: 88%;
	padding-left: 30px;
	font-weight: bold;
	text-transform: uppercase;
}
.workplace .report-show .income-statement .one-record.net span:nth-child(1) {
	-ms-flex-preferred-size: 88%;
	    flex-basis: 88%;
}
.workplace .report-show .income-statement .one-record.total span:nth-child(2) {
	-ms-flex-preferred-size: 12%;
	    flex-basis: 12%;
	padding-bottom: 3px;
	border-bottom: 1px solid #666;
}
/* --- balance sheet --- */
.workplace .report-show .commands-with-filter.balance .back-btn {
	right: 50px;
}
.workplace .report-show .balance-sheet .details {
	margin: 15px 50px 0;
    border: 1px solid #dadada;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.workplace .report-show .balance-sheet .details .assets {
	-ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
}
.workplace .report-show .balance-sheet .details .liabilities {
	-ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
	border-left: 1px solid #dadada;
}
.workplace .report-show .balance-sheet .details .header {
	text-align: center;
	font-weight: 600;
	height: 34px;
	line-height: 34px;
	background-color: #e6e6df;
	border-bottom: 1px solid #dadada;
}
.workplace .report-show .balance-sheet .details .content {
	min-height: 320px;
	padding: 10px 0 30px;
}
.workplace .report-show .balance-sheet .footer {
	margin: 0 50px;
	border: 1px solid #dadada;
	border-top: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.workplace .report-show .balance-sheet .details .content .outer-label {
	font-weight: 600;
	padding: 5px 20px 5px;
}
.workplace .report-show .balance-sheet .details .content .outer-label:hover {
	background-color: #e8e8df;
}
.workplace .report-show .balance-sheet .details .content .inner-label {
	padding: 5px 20px 5px 35px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.workplace .report-show .balance-sheet .details .content .inner-label:hover {
	background-color: #e8e8df;
}
.workplace .report-show .balance-sheet .details .content .inner-label.deep {
	padding: 5px 20px 5px 50px;
}
.workplace .report-show .balance-sheet .details .content .inner-label.total {
	margin-bottom: 15px;
}
.workplace .report-show .balance-sheet .details .content .inner-label.total span:nth-child(2) {
	font-weight: 600;
	border-bottom: 1px solid #333;
}
.workplace .report-show .balance-sheet .footer .totals {
	height: 34px;
	line-height: 34px;
	padding: 0 20px;
	font-weight: 600;
	-ms-flex-preferred-size: 50%;
	    flex-basis: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.workplace .report-show .balance-sheet .footer .totals.liability {
	border-left: 1px solid #dadada;
}



/* ----------------------------------------------------------- */
/* ------------------------- docs page ----------------------- */
/* ----------------------------------------------------------- */

.workplace .files-wrap {
	margin: 1% 2%;
	padding: 2%;
	font-size: 0.85em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	background-color: #fff;
	border: 1px dotted #b9c8cc;
}
.workplace .files-wrap .files-side {
	-ms-flex-preferred-size: 23%;
	    flex-basis: 23%;
	background-color: #eaeadf;
}
.workplace .files-wrap .files-content {
	-ms-flex-preferred-size: 78%;
	    flex-basis: 78%;
	min-height: 200px;
}
.workplace .files-wrap .files-side .bottons {
	padding-bottom: 12px;
	border-bottom: 1px solid #dadada;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	background-color: #fff;
}
.workplace .files-wrap .files-side .bottons .upload {
	display: inline-block;
	padding: 5px 10px;
	font-size: 0.95em;
	cursor: pointer;
	color: #ada723;
    text-decoration: none;
    border: 1px solid #c1bb26;
}
.workplace .files-wrap .files-side .bottons .upload::before {
	content: "\f342";
	font-family: "Font Awesome 5 Pro";
	margin-right: 10px;
}
.workplace .files-wrap .files-side .bottons .create-folder {
	display: inline-block;
	margin-left: 10px;
	padding: 5px 10px;
	font-size: 1.1em;
	font-weight: 600;
	cursor: pointer;
	color: #777;
    border: 1px solid #999;
}
.workplace .files-wrap .files-side .folders {
    min-height: 400px;
    padding: 10px 20px;
}
.workplace .files-wrap .files-side .folders .folder {
	display: block;
	padding: 5px 0;
	font-size: 1em;
	color: #333;
	text-decoration: none;
	cursor: pointer;
}
.workplace .files-wrap .files-side .folders .folder input {
	display: none;
}
.workplace .files-wrap .files-side .folder input[type=radio]:checked ~ span {
	color: #989315;
	font-weight: 600;
	letter-spacing: 0.3px;
}
.workplace .files-wrap .files-side .folders .seperator {
	margin: 7px 0;
	border-bottom: 1px solid #dadada;
}
.workplace .files-wrap .files-content .header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	padding: 0 25px 12px;
	border-bottom: 1px solid #dadada;
}
.workplace .files-wrap .files-content .header .part {
	-ms-flex-preferred-size: 64%;
	    flex-basis: 64%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.workplace .files-wrap .files-content .header .part.right {
	-ms-flex-preferred-size: 36%;
	    flex-basis: 36%;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}
.workplace .files-wrap .files-content .header .folder-name {
	color: #ada723;
}
.workplace .files-wrap .files-content .header .seperator {
	height: 18px;
	margin: 0 10px;
	border-left: 1px solid #bbb;
}
.workplace .files-wrap .files-content .header span {
	font-size: 0.95em;
}
.workplace .files-wrap .files-content .header .drop-box {
	margin: 0 10px;
	height: 26px;
	width: 42%;
}
.workplace .files-wrap .files-content .header .btn {
	cursor: pointer;
}
.workplace .files-wrap .files-content .header .btn.move {
	margin: 0 8px;
}
.workplace .files-wrap .files-content .docs-wrap {
	margin: 0 7px;
	padding-left: 10px;
	position: relative;
}
.workplace .files-wrap .files-content .docs-wrap .overlay {
	background-color: rgba(255, 255, 255, 0.5);
	position: absolute;
	width: 100%;
	height: 400px;
	text-align: center;
	display: none;
}
.workplace .files-wrap .files-content .docs-wrap .overlay.show {
	display: inline-block;
}
.workplace .files-wrap .files-content .docs-wrap .overlay .process {
	position: absolute;
	top: 22%;
	font-size: 2em;
}
.workplace .files-wrap .files-content .docs-wrap .overlay .process i {
	-webkit-animation: spinner 1s linear infinite;
	        animation: spinner 1s linear infinite;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc {
	padding: 10px 8px;
	border-bottom: 1px solid #dadada;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc:hover {
	background-color: #efefef;
}
.workplace .files-wrap .files-content .docs-wrap .empty {
    text-align: center;
    color: #aaa;
    font-style: italic;
	line-height: 100px;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .pick {
	-ms-flex-preferred-size: 3.3%;
	    flex-basis: 3.3%;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details {
	-ms-flex-preferred-size: 75%;
	    flex-basis: 75%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon {
	-ms-flex-preferred-size: 3.5%;
	    flex-basis: 3.5%;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon::before {
	content: '\f15c';
	font-family: "Font Awesome 5 Pro";
	font-size: 2.3em;
	font-weight: 300;
	color: #aaa;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.pdf::before {
	content: '\f1c1';
	color: #de1112;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.doc::before,
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.docx::before {
	content: '\f1c2';
	color: #4589f1;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.xls::before,
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.xlsx::before {
	content: '\f1c3';
	color: #19ad65;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.ppt::before,
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.pptx::before {
	content: '\f1c4';
	color: #d24625;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.jpg::before,
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.jpeg::before,
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.png::before,
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.gif::before,
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.bmp::before,
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.tiff::before {
	content: '\f1c5';
	color: #a5c773;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.zip::before,
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.rar::before {
	content: '\f1c6';
	color: #e2c630;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.mp3::before,
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.aac::before {
	content: '\f1c7';
	color: #eabe08;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .icon.mp4::before {
	content: '\f1c8';
	color: #51a3d9;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .file-info {
	margin-left: 12px;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .file-info .name {
	display: block;
	color: #4186ef;
	margin-bottom: 5px;
	cursor: pointer;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .file-info .name:hover {
	text-decoration: underline;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .details .file-info p {
	font-size: 0.85em;
	color: #777;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .commands {
	-ms-flex-preferred-size: 21%;
	    flex-basis: 21%;
	visibility: hidden;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc:hover .commands {
	visibility: visible;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .commands .cmd {
	margin-left: 5px;
	cursor: pointer;
}
.workplace .files-wrap .files-content .docs-wrap .one-doc .commands .cmd:hover {
	font-weight: 600;
}








/* ----------------------------------------------------------- */
/* ---------------------- setting page ----------------------- */
/* ----------------------------------------------------------- */


.workplace .setting-page {
	margin: 1% 2%;
	font-size: 0.85em;
}
.workplace .setting-page .page-title {
	padding: 8px 22px;
	font-size: 1.2em;
	font-weight: 600;
	background: #deded4;
	border: 1px solid #dadada;
}
.workplace .setting-page .canvas-area {
	padding: 0 22px;
	background: #fff;
	border: 1px solid #ddd;
	border-top: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.workplace .setting-page .canvas-area .menu-bar {
	-ms-flex-preferred-size: 18%;
	    flex-basis: 18%;
	padding: 14px 0;
}
.workplace .setting-page .canvas-area .menu-bar .list {
	list-style: none;
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
}
.workplace .setting-page .canvas-area .menu-bar .list:last-child {
	border-bottom: none;
}
.workplace .setting-page .canvas-area .menu-bar .list:first-child {
	padding-top: 5px;
}
.workplace .setting-page .canvas-area .menu-bar .list li {
	padding: 3px 0;
}
.workplace .setting-page .canvas-area .menu-bar .list a {
	color: #666;
	text-decoration: none;
	display: block;
}
.workplace .setting-page .canvas-area .menu-bar .list a:hover {
	color: #a59e03;
	text-decoration: underline;
}
.workplace .setting-page .canvas-area .menu-bar .list .active a {
	color: #a59e03;
	font-weight: 600;
}
.workplace .setting-page .canvas-area .content {
	-ms-flex-preferred-size: 82%;
	    flex-basis: 82%;
	padding: 22px 25px;
	min-height: 350px;
	border-left: 1px solid #ddd;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-ms-flex-line-pack: start;
	    align-content: flex-start;
}
.workplace .setting-page .canvas-area .content .title {
	-ms-flex-preferred-size: 80%;
	    flex-basis: 80%;
	font-size: 1.1em;
	color: #a59e03;
}
.workplace .setting-page .canvas-area .content .title.with-btn {
	-ms-flex-preferred-size: 56%;
	    flex-basis: 56%;
}
.workplace .setting-page .canvas-area .add-new-btn {
	-ms-flex-item-align: start;
	    align-self: flex-start;
	-ms-flex-preferred-size: 14%;
	    flex-basis: 14%;
	text-align: center;
	line-height: 28px;
	background-color: #deded4;
	cursor: pointer;
}
.workplace .setting-page .canvas-area .content .edit-button {
	-ms-flex-preferred-size: 20%;
	    flex-basis: 20%;
	text-align: right;
	cursor: pointer;
	opacity: 0.7;
}
.workplace .setting-page .canvas-area .content .edit-button:hover {
	opacity: 1;
	font-weight: 600;
}
.workplace .setting-page .canvas-area .content .edit-button::before {
	content: "\f040";
	font-family: "Font Awesome 5 Pro";
	margin-right: 5px;
}
.workplace .setting-page .canvas-area .content .fields {
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
	margin-top: 15px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.workplace .setting-page .canvas-area .content .fields .record {
	margin-bottom: 20px;
}
.workplace .setting-page .canvas-area .content .fields .label-part {
	margin-bottom: 4px;
	font-size: 0.95em;
	font-weight: 600;
}
.workplace .setting-page .canvas-area .content .fields .value-part {
	line-height: 18px;
}
.workplace .setting-page .canvas-area .content .fields .value-part .badge {
	padding: 1px 3px;
}
.workplace .setting-page .canvas-area .content .line {
	width: 100%;
	height: 1px;
	margin: 20px 0;
	background-color: #ddd;
}
.workplace .setting-page .canvas-area .content.inside-unknown {
	display: block;
	background: #fff url(../images/system/oops.png) 94% 25px no-repeat;
}
.workplace .setting-page .inside-unknown h3 {
	font-size: 1.3em;
	margin-bottom: 1%;
}
.workplace .setting-page .inside-unknown ul {
	margin: 0.5% 3%;
}
.workplace .setting-page .inside-unknown p,
.workplace .setting-page .inside-unknown ul li {
	line-height: 21px;
}
/* -- */
.workplace .setting-page .canvas-area .inline-form {
	-ms-flex-preferred-size: 70%;
	    flex-basis: 70%;
	margin: 8px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.workplace .setting-page .canvas-area .inline-form form {
	-ms-flex-preferred-size: 80%;
	    flex-basis: 80%;
}
.workplace .setting-page .canvas-area .inline-form .add-new {
	-ms-flex-item-align: start;
	    align-self: flex-start;
	padding: 0 20px;
	line-height: 28px;
	background-color: #deded4;
	cursor: pointer;
}
.workplace .setting-page .canvas-area .inline-form .form-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.workplace .setting-page .canvas-area .inline-form .input-text {
	height: 28px;
}
.workplace .setting-page .canvas-area .inline-form .drop-box {
	height: 28px;
}
.workplace .setting-page .canvas-area .inline-form form .drop-box {
	border-left: none;
	border-right: none;
}
.workplace .setting-page .canvas-area .inline-form .btn-submit {
	padding: 0 20px;
	font-size: 1em;
}
.workplace .setting-page .canvas-area .inline-form label.error {
	margin: 8px 0 10px;
	font-size: 1em;
}
.workplace .setting-page .canvas-area .setting-list {
	margin: 10px 0;
	-ms-flex-preferred-size: 70%;
	    flex-basis: 70%;
}
.workplace .setting-page .canvas-area .setting-list.full-width {
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
}
.workplace .setting-page .canvas-area .setting-list .sub-title {
	padding: 8px 15px;
	background-color: #e0e0d9;
	border: 1px solid #e6e6e4;
}
.workplace .setting-page .canvas-area .setting-list .setting-data {
	min-height: 200px;
	max-height: 400px;
	border: 1px solid #e4e4db;
	border-top: none;
	overflow-y: scroll;
}
.workplace .setting-page .canvas-area .setting-list .setting-data.top-border {
	border-top: 1px solid #e4e4db;
}
.workplace .setting-page .canvas-area .setting-list .setting-data .table-row {
	padding: 8px 15px;
	border-bottom: 1px solid #e4e4db;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.workplace .setting-page .canvas-area .setting-list .setting-data .table-row:hover {
	background-color: #efefef;
}
.workplace .setting-page .canvas-area .setting-list .setting-data .table-row .btn {
	margin-right: 6px;
	cursor: pointer;
	color: #888;
	display: none;
}
.workplace .setting-page .canvas-area .setting-list .setting-data .table-row:hover .btn {
	display: inline-block;
}
.workplace .setting-page .canvas-area .setting-list .setting-data .table-row .btn:hover {
	font-weight: 600;
}
.workplace .setting-page .canvas-area .setting-list .setting-data .not-found {
	line-height: 80px;
	text-align: center;
	font-style: italic;
	color: #999;
}



/* ----------------------------------------------------------- */
/* ---------------------- popup center ----------------------- */
/* ----------------------------------------------------------- */

.popup-center {
	font-size: 0.9em;
	height: 100vh;
	background-color: #fff;
}
.popup-center header {
	padding: 0 20px;
    line-height: 36px;
    color: #333;
    font-weight: 600;
    background-color: #ededed;
    border-bottom: 1px solid #aaa;
}
.popup-center .content {
	padding: 15px 20px 20px;
}
.popup-center .content.flex {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.popup-center .content .section {
    display: inline-block;
    -ms-flex-preferred-size: 48.5%;
    flex-basis: 48.5%;
    padding: 5px 0;
}
.popup-center .content .btn-area {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    margin: 15px 0 10px;
    padding: 10px 0;
    border-top: 1px solid #c3bd11;
}
.popup-center .content .row {
	margin-top: 2%;
}
.popup-center .content .row.half {
	width: 49%;
	display: inline-block;
}
.popup-center .content .row.third {
	width: 32%;
	display: inline-block;
}
.popup-center .content .row.fourth {
	width: 24%;
	display: inline-block;
}
.popup-center .content .label-part {
	font-size: 0.9em;
	margin-bottom: 5px;
}
.popup-center .content .value-part.flex {
	display: flex;
}
.popup-center .content .input-text,
.popup-center .content .drop-box,
.popup-center .content textarea {
	height: 27px;
	line-height: 17px;
	padding-left: 8px;
	color: #4e4e4e;
	font-family: GothamPro;
	font-size: 0.9em;
	border: 1px solid #ccc;
	outline: none;
}
.popup-center .content .input-text:-moz-read-only:not(.datepicker) {
	background-color: #efefef;
}
.popup-center .content .input-text:read-only:not(.datepicker) {
	background-color: #efefef;
}
.popup-center .content .input-text.error,
.popup-center .content .drop-box.error,
.popup-center .content textarea.error {
	border: 1px solid #f00;
}
.popup-center .content .input-text::-webkit-input-placeholder,
.popup-center .content textarea::-webkit-input-placeholder{
	color: #aaa;
}
.popup-center .content .input-text::-moz-placeholder,
.popup-center .content textarea::-moz-placeholder{
	color: #aaa;
}
.popup-center .content .input-text:-ms-input-placeholder,
.popup-center .content textarea:-ms-input-placeholder{
	color: #aaa;
}
.popup-center .content .input-text::-ms-input-placeholder,
.popup-center .content textarea::-ms-input-placeholder{
	color: #aaa;
}
.popup-center .content .input-text::placeholder,
.popup-center .content textarea::placeholder{
	color: #aaa;
}
.popup-center .content textarea {
	height: auto;
	max-height: 100px;
	padding: 8px;
	resize: none;
	resize: vertical;
}
.popup-center .content .input-text:focus,
.popup-center .content .drop-box:focus,
.popup-center .content .drop-box:focus optgroup,
.popup-center .content textarea:focus {
	border: 1px solid #b3ae34;
	background-color: #e7ffe7;
}
.popup-center .content .drop-box:focus {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 213.333 213.333' style='enable-background:new 0 0 213.333 213.333;' xml:space='preserve' width='512px' height='512px'%3e%3cg%3e%3cg%3e%3cg%3e%3cpolygon points='0,53.333 106.667,160 213.333,53.333 ' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%23979214'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}
.popup-center .content .input-text:-moz-read-only:not(.datepicker):focus {
	border-color: #ccc;
}
.popup-center .content .input-text:read-only:not(.datepicker):focus {
	border-color: #ccc;
}
.popup-center .content .input-text.with-checkbox {
	padding-left: 43px;
}
.popup-center .content .checkbox-wrap {
	position: absolute;
	width: 7%;
	height: 27px;
	cursor: pointer;
	border: 1px solid #ccc;
	background-color: #fff;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.popup-center .content .checkbox-wrap input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.popup-center .content .checkmark {
	position: absolute;
	width: 100%;
	height: 27px;
	line-height: 26px;
	text-align: center;
	font-size: 0.9em;
}
.popup-center .content .checkmark:after {
	font-family: 'Font Awesome 5 Pro';
	content: "\f070";
	color: #25b0ef;
}
.popup-center .content .checkbox-wrap input:checked ~ .checkmark:after {
	content: "\f06e";
	color: #999;
}
.popup-center .content label.error {
	margin: 5px 0 10px;
	font-size: 0.9em;
	color: #f00;
	display: none;
}
.popup-center .content label.error.show {
	display: block;
}
.popup-center .content label.error::before {
	font-family: "Font Awesome 5 Pro";
	content: '\f06a';
	margin-top: 2px;
	margin-right: 8px;
}
.popup-center .content .btn-submit {
	margin-top: 10px;
	padding: 8px 22px;
}
.popup-center .content .process {
	position: relative;
	top: 2px;
	margin-left: 10px;
	line-height: 39px;
	width: 20px;
	font-size: 1.2em;
	display: none;
}
.popup-center .content .process i {
	-webkit-animation: spinner 1s linear infinite;
	        animation: spinner 1s linear infinite;
	color: #979214;
}
.popup-center .content .fstdropdown-select {
    display: none;
}
.popup-center .content .fstdiv {
    position: relative;
    height: 26px;
}
.popup-center .content .fstdiv.second {
    margin-left: 10px;
}
.popup-center .content .fstdiv.open {
    z-index: 2147483647;
}
.popup-center .content .fstdropdown {
	display: block;
    width: 100%;
    border: 1px solid #ccc;
    cursor: pointer;
    background: white;
    outline: none;
}
.popup-center .content .fstdropdown.error {
    border-color: #f00;
}
.popup-center .content .fstdiv.open > .fstdropdown {
    position: absolute;
}
.popup-center .content .fstdropdown > .fstselected {
    padding-left: 8px;
    padding-right: 30px;
    height: 25px;
    line-height: 25px;
    font-size: 0.97em;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.popup-center .content .fstdropdown > .fstselected::after {
    position: absolute;
    top: 54%;
    display: block;
    height: 0;
    margin-top: -3px;
    content: ' ';
    right: 11px;
    border-color: #999 transparent transparent;
    border-style: solid;
    border-width: 5px 5px 0;
}
.popup-center .content .fstdropdown.open > .fstselected::after {
    display: none;
}
.popup-center .content .fstdropdown > .fstlist {
    display: none;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
.popup-center .content .fstdropdown.open > .fstlist {
    display: block;
}
.popup-center .content .fstlist > div {
    padding: 6px 12px;
    font-size: 0.95em;
}
.popup-center .content .fstdropdown.open:hover {
    border: 1px solid #b3ae34;
}
.popup-center .content .fstlist > div:hover {
    background-color: #979214;
    color: #fff;
}
.popup-center .content .fstlist > div.selected {
    background-color: #ddd;
    color: #262626;
}
.popup-center .content .fstsearchinput {
    padding: 4px;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    background-color: #fff;
    border: 1px solid #ccc;
    color: #555;
    display: none;
}
.popup-center .content .fstdropdown.open > .fstsearch {
    display: block;
    padding: 4px;
}
.popup-center .content .fstdropdown.open .fstsearchinput {
    display: block;
}
.popup-center .content .fstdropdown .hideFst, .fstdropdown-select.fstcreated {
    display: none;
}
.popup-center .content .fstAll:hover {
    background-color: #337ab7
}
.popup-center .content .open .fstAll {
    display: block;
}

.workplace .my-profile {
	margin: 1% 2%;
	font-size: 0.85em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.workplace .my-profile .title {
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%;
	font-size: 1.4em;
	margin-bottom: 15px;
}
.workplace .my-profile .left {
	-ms-flex-preferred-size: 18%;
	    flex-basis: 18%;
}
.workplace .my-profile .right {
	-ms-flex-preferred-size: 75%;
	    flex-basis: 75%;
	margin-left: 25px;
	padding-top: 10px;
}
.workplace .my-profile .left .img-holder {
	border: 1px solid #999;
	position: relative;
}
.workplace .my-profile .left .img-holder img {
	border: none;
}
.workplace .my-profile .left .img-holder .progress-bar {
	background: none repeat scroll 0 0 #e0e0e0;
	padding: 3px 0;
	top: 45%;
	position: absolute;
	width: 100%;
	display: none;
}
.workplace .my-profile .left .img-holder .progress-bar .bar {
	height: 14px;
	background-color: #979214;
}
.workplace .my-profile .left .img-holder .progress-bar .percent {
	display: inline-block;
	width: 100%;
	position: absolute;
	text-align: center;
	top: 2px;
}
.workplace .my-profile .left .img-holder .img-change {
	margin-top: -6px;
	background-color: #979214;
	height: 38px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}
.workplace .my-profile .left .img-holder .img-change:hover {
	background-color: #8a8511;
}
.workplace .my-profile .left .img-holder .img-change input[type="file"] {
	position: absolute;
	width: 100%;
	height: 38px;
	opacity: 0;
	filter: alpha(opacity=0);
	cursor: pointer;
}
.workplace .my-profile .left .img-holder .img-change span {
	width: 100%;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.05em;
}
.workplace .my-profile .right .record {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 3px 5px;
}
.workplace .my-profile .right .record.top-down {
	margin-top: 15px;
}
.workplace .my-profile .right .record:hover {
	background-color: rgba(197, 197, 197, 0.3);
}
.workplace .my-profile .right .record .label-part {
	-ms-flex-preferred-size: 18%;
	    flex-basis: 18%;
}


/* upload file */
.js .inputfile {
    opacity: 0;
    position: absolute;
}
.inputfile + label {
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 7px 15px;
}
.workplace .pop-up-form .inputfile + label {
	font-size: 0.9em;
	padding: 5px 15px;
}
.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -4px;
    margin-right: 4px;
}
.inputfile-2 + label {
    color: #979214;
    border: 1px solid currentColor;
}
.inputfile-2:focus + label,
.inputfile-2.has-focus + label,
.inputfile-2 + label:hover {
    color: #807b10;
}



.btn-submit:disabled {
	color: #000;
	text-shadow: none;
	background: #ccc;
	border: 1px solid #999;
	opacity: 0.5;
	filter: alpha(opacity=50);
}
@-webkit-keyframes spinner {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spinner {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}