/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-v20-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
       url('../fonts/roboto-v20-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('../fonts/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-mono-200 - latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/roboto-mono-v8-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-mono-v8-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-mono-v8-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-mono-v8-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-mono-v8-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-mono-v8-latin-200.svg#RobotoMono') format('svg'); /* Legacy iOS */
}
/* roboto-mono-regular - latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-mono-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-mono-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-mono-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-mono-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-mono-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-mono-v8-latin-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */
}
/* roboto-mono-500 - latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-mono-v8-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-mono-v8-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-mono-v8-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-mono-v8-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-mono-v8-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-mono-v8-latin-500.svg#RobotoMono') format('svg'); /* Legacy iOS */
}
/* system default */
@font-face {
	font-family: system;
	font-style: normal;
	font-weight: 300;
	src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

:root{
    --base: #EBE9E6;
    --base: #EFEDED;
    --base-dark: #E1DFDC;
    --base-light: #F5F3F0;
    --gold: #FFD687;
    --dark: #4a4a4a;

    --bg-warning: #ffc85f;
    --bg-warning-hover: #FFD687;
    --bg-warning-active: #FFD687;
}

html,
body {
	margin: 0;
	height: 100%;
	font-family: Roboto, system;

	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-ms-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;

	background-color: var(--base);
}

a {
	text-decoration: none;
	color: #307FE2;
	color: #ffc800;
}
a:hover {
	text-decoration: underline;
}

.text-underline {
	text-decoration: underline;
}

[rel] {
	cursor: pointer;
}

::selection {
	background: #B8E1BE; /* WebKit/Blink Browsers */
}
::-moz-selection {
	background: #B8E1BE; /* Gecko Browsers */
}
.user-select-none {
	user-select: none !important;
}

@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.opa-25,
.opa-25 * {
	opacity: .25;
}
.opa-5,
.opa-5 *,
.opa-50,
.opa-50 * {
	opacity: .5;
}
.opa-75,
.opa-75 * {
	opacity: .75;
}

.guideline::after {
	content: '';
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 2000;
	height: 1rem;
	padding-right: .5rem;
	opacity: 1;
	border-right: 1px solid red;
	color: #c00;
	text-align: right;
	font-size: .5rem;
	line-height: .5rem;
}
	.guideline-480::after {
		content: '480px';
		width: 480px;
	}
	.guideline-768::after {
		content: '768px';
		width: 768px;
	}
	.guideline-1024::after {
		content: '1024px';
		width: 1024px;
	}

/* form */

.required::before {
	content: '*';
	display: inline-block;
	float: right;
	color: red;
}

/* bootstrap */

.table-lg > thead > tr > th,
.table-lg > thead > tr > td,
.table-lg > tbody > tr > th,
.table-lg > tbody > tr > td {
	padding: 1rem;
	/*line-height: 2rem;*/
}

.table th.btn-inside,
.table td.btn-inside {
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.dropdown-menu {
	height: auto;
	max-height: 300px;
	overflow-x: hidden;
}

.modal-backdrop.show {
	opacity: .25;
}

.custom-switch.custom-switch-lg .custom-control-label::before {
	width: 3rem;
	height: 1.75rem;
	border-radius: 1.25rem;
}
.custom-switch.custom-switch-lg .custom-control-label::after {
	width: calc(1.75rem - 4px);
	height: calc(1.75rem - 4px);
	border-radius: 1.25rem;
	box-shadow: 2px 2px 3px rgba(0,0,0,.1);
}
.custom-switch.custom-switch-lg .custom-control-input:checked~.custom-control-label::after {
	transform: translateX(1.25rem);
	box-shadow: -2px 2px 3px rgba(0,0,0,.2);
}

.btn-outline-silver {
	border-color: #BFBFBF;
	color: #6c757d;
}

@media (max-width: 768px) {
	.modal {
		position: fixed;
		top: 56px;
		bottom: 0;
		height: auto;
	}
	.modal.fade .modal-dialog {
		transform: none;
		transition: top .3s ease-out;
	}
	.modal.show .modal-dialog {
		transform: translate(0, -30px);
		transform: none;
		top: 0;
	}

	.modal-dialog {
		position: absolute;
		top: 30px;
		bottom: 0;
		margin: 0;
		width: 100%;
		max-width: 100%;
	}
	.modal-content {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		border-radius: 0;
		border: 0 none;
	}
}

/*.overflow-auto::-webkit-scrollbar {
    -webkit-appearance: none;
}
.overflow-auto::-webkit-scrollbar:vertical {
    width: 11px;
}
.overflow-auto::-webkit-scrollbar:horizontal {
    height: 11px;
}
.menu.overflow-auto::-webkit-scrollbar-thumb {
	border-radius: 8px;
    border: 3px solid #4A4A4A;
    background-color: rgba(255,255,255, .3);
}
.users.overflow-auto::-webkit-scrollbar-thumb {
	border-radius: 8px;
    border: 3px solid #fff;
    background-color: rgba(0,0,0, .3);
}*/

.text-holiday{
	color: #D48F78;
}

.bg-base-light {
	background-color: var(--base-light);
}
.bg-base-dark {
	background-color: var(--base-dark);
}
.bg-dark {
	background-color: var(--dark) !important;
}

.larger,
.font-larger {
	font-size: 125%;
}

.btn {
	padding: .25rem 1rem;
}

.btn-warning {
	background-color: var(--bg-warning);
	border-color: var(--bg-warning);
}
	.btn-warning:hover {
		background-color: var(--bg-warning-hover);
		border-color: var(--bg-warning-hover);
	}
	.btn-warning:not(:disabled):not(.disabled).active,
	.btn-warning:not(:disabled):not(.disabled):active {
		background-color: var(--bg-warning-active);
		border-color: var(--bg-warning-active);
	}
	.btn-warning.focus,
	.btn-warning:focus {
		background-color: var(--bg-warning-hover);
		border-color: var(--bg-warning-hover);
		box-shadow: 0 0 0 0.2rem rgba(43, 177, 78, 0.5);
	}

.bg-baselight {
	background-color: var(--base-light) !important;
}

.sort-asc,
.sort-desc {
	position: relative;
}
.sort-asc::before,
.sort-desc::before {
	content: '';
	position: absolute;
	right: 0;
	margin-right: .75rem;
	margin-left: -3px;
	width: 0;
	height: 0;
	border-style: solid;
}
.sort-desc::before {
	top: 1px;
	border-color: #ccc transparent transparent transparent;
	border-width: 6px 6px 0 6px;
}
.sort-asc::before {
	bottom: 1px;
	border-color: transparent transparent #ccc transparent;
	border-width: 0 6px 6px 6px;
}

.table-th-sticky {
	border-collapse: separate;
	border-spacing: 0;
	/* override .table-responsive (overflow-x: auto) */
	overflow-x: unset;
}
	.table-th-sticky thead th,
	.table-th-sticky .sticky {
		position: sticky;
		top: 0;
		background-color: #e5eaed;
		z-index: 2;
		border-width: 1px 1px 1px 0;
	}

	.table-th-sticky thead tr:nth-child(2) th,
	.table-th-sticky .sticky.sticky2 {
		top: 3rem;
	}
	.table-th-sticky thead tr:nth-child(3) th {
		top: 6rem;
	}

	.table-sm.table-th-sticky thead tr:nth-child(2) th,
	.table-sm.table-th-sticky .sticky.sticky2 {
		top: 2rem;
	}
	.table-sm.table-th-sticky thead tr:nth-child(3) th {
		top: 4rem;
	}

	.table-dark.table-th-sticky thead th {
		background-color: #343a40;
	}

	.table-th-sticky.table-bordered {
		border: 0 none;
	}
	.table-th-sticky.table-bordered thead th {
		border-bottom-width: 1px;
	}

/* override datetime-picker */

.bootstrap-datetimepicker-widget.dropdown-menu {
	width: 17rem;
}

/* myalert */

.myalert {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 300px;
	z-index: 1100;
}
	.myalert .alert {
		margin-bottom: .5rem;
		box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
		background-color: #fff;
		border-width: 0 0 0 5px;
		border-left-style: solid;
		border-radius: .5rem 0 0 .5rem;
	}
	.myalert .alert-content {
		color: #333;
	}
	.myalert .myalert-success {
		border-left-color: #009EFF;
	}
	.myalert .myalert-warning {
		border-left-color: #FF9F00;
	}
	.myalert .myalert-danger {
		border-left-color: #ff0000;
	}

/* layout */

/* z-index
.guideline			2000
.modal				1050
.modal-backdrop		1040
.modals				1000
.header				10
.sidebar			5
*/

.layout {
	display: flex;
	overflow-x: hidden;
}

.apps {
	position: relative;
	height: 100%;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	display: none;
	width: 100%;
	background-color: #4A4A4A;
	justify-content: space-between;
}
	.header .bars {
		display: none;
	}

@media (max-width: 768px) {
	.header {
		display: flex;
	}
	.header .bars {
		display: inline-block;
	}
	.header-actions .dropdown-menu {
		opacity: 0;
		top: 0;
		right: 0;
		border: 0 none;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0.8) 100%);
		box-shadow: 0 2px 4px rgba(0,0,0,.1);

		transform: matrix(1, 0, 0, 1, 0, 40) !important;
		transition: transform 0.2s cubic-bezier(0.2, 1, 0.2, 1) 0s, opacity 0.2s cubic-bezier(0.2, 1, 0.2, 1) 0s;
	}
	.header-actions .dropdown-menu.show {
		opacity: 1;
		transform: matrix(1, 0, 0, 1, 0, 54) !important;
		transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1) 0s, opacity 0.5s cubic-bezier(0.2, 1, 0.2, 1) 0s;
	}
}

	.sidebar_collapse .header {
		display: flex;
	}
	.sidebar_collapse .header .bars {
		display: inline-block;
	}
	.sidebar_collapse .header-actions .dropdown-menu {
		opacity: 0;
		top: 0;
		right: 0;
		border: 0 none;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		background: rgb(255,255,255);
		background: linear-gradient(90deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0.8) 100%);
		box-shadow: 0 2px 4px rgba(0,0,0,.1);

		transform: matrix(1, 0, 0, 1, 0, 40) !important;
		transition: transform 0.2s cubic-bezier(0.2, 1, 0.2, 1) 0s, opacity 0.2s cubic-bezier(0.2, 1, 0.2, 1) 0s;
	}
	.sidebar_collapse .header-actions .dropdown-menu.show {
		opacity: 1;
		transform: matrix(1, 0, 0, 1, 0, 54) !important;
		transition: transform 0.5s cubic-bezier(0.2, 1, 0.2, 1) 0s, opacity 0.5s cubic-bezier(0.2, 1, 0.2, 1) 0s;
	}

.sidebar {
	top: 0;
	left: 0;
	z-index: 5;
	width: 240px;
	height: 100%;
	background-color: #4A4A4A;
	transform: matrix(1, 0, 0, 1, 0, 0);
	transition: transform 0.2s cubic-bezier(0.2, 1, 0.2, 1) 0s;
	box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

@media (max-width: 768px) {
	.sidebar {
		display: none;
		box-shadow: none;
		background-color: rgba(74,74,74,.9);
		transform: matrix(1, 0, 0, 1, -240, 0);
	}
	.sidebar_slided .sidebar {
		display: flex;
		transform: matrix(1, 0, 0, 1, 0, 0);

		position: absolute;
	}
}

	.sidebar_collapse .sidebar {
		box-shadow: none;
		background-color: rgba(74,74,74,.9);
		display: none;
	}
	.sidebar_collapse.sidebar_slided .sidebar {
	}

.working {
	width: 100%;
	overflow: hidden;
}

@media (max-width: 768px) {
	.working {
		margin-top: 50px;
		margin-left: 0;
		transform: matrix(1, 0, 0, 1, 0, 0);
	}
	.sidebar_slided .working {
		/*transform: matrix(1, 0, 0, 1, 240, 0);*/
	}
	.sidebar_slided .working::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		background-color: rgba(0,0,0,.1);
	}
}

	.sidebar_collapse .working {
		margin-top: 50px;
		margin-left: 0;
		transform: matrix(1, 0, 0, 1, 0, 0);
	}
	.sidebar_collapse.sidebar_slided .working {
		/*transform: matrix(1, 0, 0, 1, 240, 0);*/
	}
	.sidebar_collapse.sidebar_slided .working::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		background-color: rgba(0,0,0,.1);
	}

.brand {
	/*width: auto;*/
	/*height: 56px;*/
	width: 240px;
	height: 100px;
	display: flex;
	justify-content: left;
	align-items: center;
}
	.brand img {
		display: inline-block;
		width: auto;
		height: 40px;
		margin-left: 2.25rem;
		margin-top: 25px;
		margin-bottom: 25px;
	}

@media (max-width: 768px) {
	.brand {
		height: 50px;
	}
	.brand img {
		height: 30px;
		margin-left: 1rem;
		margin-top: 10px;
		margin-bottom: 10px;
	}
}
	.sidebar_collapse .brand {
		height: 50px;
	}
	.sidebar_collapse .brand img {
		height: 30px;
		margin-left: 1rem;
		margin-top: 10px;
		margin-bottom: 10px;
	}

/* .sidebar */

.sidebar > .menu {
	/*padding-bottom: 4rem;*/
}
@media (max-width: 768px) {
	.menu {
		margin-top: 1rem;
	}
}
	.menu .nav-link {
		position: relative;
		padding: 1rem 1rem 1rem 1.75rem;
		overflow: hidden;
		display: block;
		/*font-size: 1.25rem;
		line-height: 1.25rem;*/
	}
	.menu .nav-text,
	.menu .nav-link > i {
		white-space: nowrap;
	}
	.menu > .nav-item > .nav-link > i {
		margin-right: .5rem;
		/*font-size: 2rem;*/
		vertical-align: middle;
	}

	.menu .nav-item > .nav > .nav-item.active > .nav-link > .nav-text {
		color: var(--gold);
	}

	/* item note */
	.menu .nav-item > .nav > .nav-item > .nav-link > .nav-text+span {
		color: #9e9e9e !important;

		display: inline-block;
		padding: .25em .4em;
		font-size: 75%;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		white-space: nowrap;
		vertical-align: baseline;
		border-radius: .25rem;
	}
	.menu .nav-item > .nav > .nav-item.active > .nav-link > .nav-text+span {
		color: #212529 !important;
		background-color: #ffc107 !important;
	}

	.menu > .nav-item > .nav-link.nav-header {
		padding: .5rem 1rem 0 2rem;
		font-size: 80%;
		color: #bbb;
	}
	.menu > .nav-item > .nav-link {
		padding: 1rem 1rem 1rem 3.2rem;
		font-size: 80%;
		color: #bbb;
	}

	.menu > .nav-item > .nav-bottom-button {
		display: block;
		padding: 1rem 1rem 1rem 3.2rem;
		color: #fff;
		background-color: rgba(255 ,255 ,255 ,.1);
	}

	/* submenu */
	.menu .nav-item > .nav {
		margin: .5rem 0;
	}
	.menu .nav-item > .nav > .nav-item > .nav-link {
		overflow: hidden;
		display: block;
		padding: 0 .5rem 0 2rem;
		margin: 0 .5rem 0 .5rem;
		border-radius: 4px;
		line-height: 2.1rem;
		font-size: 100%;
		color: #fff;
	}
	.menu .nav-item > .nav > .nav-item > .nav-link:hover {
		background-color: #fff2;
	}
	.menu .nav-item > .nav > .nav-item.active > .nav-link::before {
		content: '';
		position: absolute;
		width: 4px;
		height: 4px;
		margin-top: 1rem;
		margin-left: -1rem;
		background: var(--gold);
	}

/* overtime */

.overtime {
	width: 640px;
	margin-left: 1rem;
	/*background-color: #f0f0f0;*/
}

	@media (max-width: 768px) {
		.overtime {
			width: auto;
			height: 100%;
			margin-left: 0;
		}
	}

.month-records {
	display: flex;
	flex-direction: column;
}
.day-record {
	display: flex;
	padding: 3px 0;
	margin: 0;
	background-color: #fff;
	border-top: 1px solid #eee;
	line-height: 2.5rem;
}
.day-record:last-child {
	border-bottom: 1px solid #eee;
}

	.day-record .status {
		position: relative;
		width: 20px;
		/*margin-right: 10px;*/
		/*line-height: 1.9rem;*/
	}
	.day-record.today .status::after {
		content: '';
		position: absolute;
		top: 1.15rem;
		left: 7px;
		width: 6px;
		height: 6px;
		border-radius: 6px;
		background-color: #000;
	}

	.day-record .day {
		width: 100px;
		margin-right: 10px;
		text-align: right;
		white-space: nowrap;
	}
	.day-record.weekend .day {
		color: #cea558; /* gold */
		color: #ccc;
	}

	.day-record .blocks {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		/*margin-right: 10px;*/
	}

	.day-record .block {
		display: flex;
		justify-content: space-between;
		margin-top: 1px;
		/*font-size: .9rem;*/
		white-space: nowrap;
	}
	.day-record .block:first-child {
		margin-top: 0;
	}
	.day-record .block .period {
		padding: 0 .65rem;
		display: inline-block;
		border-radius: 3px;
	}
	.day-record .block:first-child .period {
		/*border-bottom-left-radius: 0;*/
		/*border-bottom-right-radius: 0;*/
	}
	.day-record .block:last-child .period {
		/*border-top-left-radius: 0;*/
		/*border-top-right-radius: 0;*/
	}
	.day-record .auditing .period {
		color: #fff;
		background-color: rgba(0,0,0,.4);
	}
	.day-record .confirmed .period {
		color: #fff;
		background: rgba(0,0,0,.8);
	}
	.day-record .rejected .period {
		color: #fff;
		background: rgba(220,53,69,.75);
	}

	/*.day-record .blocks .note {
		white-space: nowrap;
	}
	.day-record .blocks .note .la {
		line-height: 1.5rem;
		margin-left: 0px;
		vertical-align: bottom;
	}
	.day-record .block.auditing+.note .la {
		color: rgba(0,0,0,.4);
	}
	.day-record .block.rejected+.note .la {
		color: rgba(0,0,0,.1);
	}*/

	.day-record .status_text {
		padding: 0 .5rem;
		white-space: nowrap;
		text-align: right;
		width: 80px;
	}
	.day-record .block.auditing .status_text {
		color: #6c757d;
	}
	.day-record .block.rejected .status_text {
		color: #dc3545;
	}

	.day-record .block.auditing .period_text {
		color: #6c757d;
	}
	.day-record .block.rejected .period_text {
		color: #dc3545;
	}

.week-records {
	display: flex;
	flex-direction: column;
}
	.week-records .date {
		padding: 3px 1rem 3px 2.5rem;
		margin-top: .5rem;
		color: #555;
	}
	.week-records .date:first-child {
		/*margin-top: 0;*/
	}
	.audit-record {
		display: flex;
		padding: .5rem 0;
		margin: 0;
		background-color: #fff;
		border-top: 1px solid #eee;
	}
	.audit-record:last-child {
		border-bottom: 1px solid #eee;
	}
	.audit-record .status {
		position: relative;
		width: 20px;
		margin-right: 10px;
		line-height: 1.9rem;
	}
	.audit-record.today .status::after {
		content: '';
	}

.export-month {
	border-right: 1px solid #dee2e6;
	border-bottom: 1px solid #dee2e6;
	text-align: center;
	vertical-align: middle;

	display: flex;
	justify-content: center;
	align-items: center;
}
	.export-month:first-child {
		border-left: 1px solid #dee2e6;
	}
	.export-quarter:first-child .export-month {
		border-top: 1px solid #dee2e6;
	}

	.export-quarter:first-child .export-month:first-child {
		border-top-left-radius: 5px;
	}
	.export-quarter:first-child .export-month:last-child {
		border-top-right-radius: 5px;
	}
	.export-quarter:last-child .export-month:last-child {
		border-bottom-right-radius: 5px;
	}
	.export-quarter:last-child .export-month:first-child {
		border-bottom-left-radius: 5px;
	}
	.export-month [disabled] {
		opacity: .25;
	}





/* archives */

.layout-login {
	position: absolute;
	width: 100%;
	height: 100%;
}
	.layout-login:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		/*background: #EEF1F2;*/
		/*background: linear-gradient(-45deg, rgba(238,241,242,1) 0%, rgba(255,255,255,1) 25%);*/
		/*opacity: .5;*/

		background: #000;
		background-image: url(../img/planet-earth-4427436.jpg);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
		mix-blend-mode: overlay;
	}
	.layout-login .brand {
		display: block;
		height: 48px;
		margin-top: 1rem;
		margin-bottom: 3rem;
		background-image: url(../img/logo-intifar-planet-color.png);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
	}
	.layout-login .login-form {
		padding: 2rem;
		z-index: 1;
	}
	.layout-login .btn-link {
		color: #000;
	}


	.sidebar .menuitem {
		/*line-height: 14px;
		font-size: 14px;*/
		white-space: nowrap;
		padding-top: 8px;
	}
		.sidebar .menuitem.expand {
			background-color: #fff;
		}
		.sidebar .menuitem > a {
			display: block;
			padding: 8px 24px;
			color: #555;
			text-decoration: none;
		}
		.sidebar .menuitem > a i {
		}
		.sidebar .menuitem.active > a {
			padding-right: 21px;
			border-right: 3px solid #307FE2;
			color: #307FE2;
			/*background-color: #fff;*/
		}
		.sidebar .menuitem:not(.active) > a:hover {
			padding-right: 21px;
			border-right: 3px solid #307FE2;
			color: #333;
			/*background-color: #fff;*/
			-webkit-transition: none;
			-ms-transition: none;
			transition: none;
		}

	.sidebar .submenuitem {
		display: none;
	}
		.sidebar .submenuitem:first-of-type {
			padding-top: 12px;
		}
		.sidebar .submenuitem:last-child {
			padding-bottom: 12px;
		}
		.sidebar .expand .submenuitem,
		.sidebar .active .submenuitem {
			display: block;
		}

	.sidebar .submenuitem > a {
		display: block;
		padding: 10px 29px 10px 8px;
		margin-top: 2px;
		margin-left: 6px;
		text-align: right;
		color: #333;
	}
	.sidebar .submenuitem.active > a {
		color: #333;
		background-color: #fff;
	}
	.sidebar .submenuitem > a:hover {
		text-decoration: none;
	}

	.sidebar .submenuitem {
		line-height: 14px;
		font-size: 14px;
		white-space: nowrap;
	}

/* component */

.nav.nav-menuitem {
	margin-left: -1rem;
}
.nav-menuitem .nav-link {
	position: relative;
	/*padding: .5rem 2rem .5rem 0;*/
	padding-right: 1rem;
	padding-left: 1rem;
	margin-right: 4px;
	color: #777;
}
.nav-menuitem .nav-link:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	border-bottom: 2px solid #ccc;
}
	.nav-menuitem .nav-link.active {
		color: #307FE2;
		color: #000;
	}
	.nav-menuitem .nav-link.active:after {
		/*content: '';
		position: absolute;
		top: 100%;
		left: -1rem;
		width: 100%;
		border-bottom: 2px solid #307FE2;
		border-bottom: 2px solid #000;*/
		border-color: #000;
	}
	.nav-menuitem .nav-link.active .badge {
		background-color: #307FE2 !important;
		background-color: #000 !important;
	}

/* attend */

.punchtime {
	font-size: 90%;
}

.attend-note {
	margin-bottom: 0;
	margin-top: .5rem;
}
.attend-note:first-child {
	margin-top: 0;
}

.nodes-box {
	background-color: var(--base-light);
	box-shadow: 0 0.5rem .5rem rgba(0,0,0,.15);
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-radius: 7px;
}
	.nodes-box .nodes-header {
		padding: .5rem 1rem;
		border-bottom: 1px solid #dee2e6;
	}
	.nodes-box .nodes-header .header-text {
		padding: .5rem 1rem;
	}
	.nodes-box .node {
		position: relative;
		padding: .35rem 1.4rem;
		transition: all .2s ease 0s;
		color: #333;
	}
	.nodes-box .node:hover,
	.nodes-box .node:active,
	.nodes-box .node.active {
		background-color: var(--gold);
	}
	.nodes-box .node.noted::before {
		content: '';
		position: absolute;
		top: 0;
		width: 4px;
		height: 4px;
		margin-top: calc(1.25rem - 4px);
		margin-left: -.75rem;
		background: #999;
	}


.attend .attend-my-list .table tr.border-bottom {
	border-bottom: 2px solid var(--base) !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
	max-height: unset;
}