/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');*/

body {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    position: relative;
}
.container-main {
	background: #ffffff;
	min-width: 1024px;
	overflow: auto;
}
.main-content {
	width: 50%;
}
.main-content .content h1, .sidebar-right h2 {
	font-size: 20px;
}
.main-content .content h1 {
	margin-bottom: 20px;
}
.main-content .content {
	color: #333333;
}
.main-content.fix-content {
	width: calc(100% - 200px);
}
/* FORM LOGIN
------------------*/
.container-login:before {
	/*background-color: rgba(0,0,0,0.7);*/
	background-color: #fff;
}
.box-login {
	width: 90%;
	max-width: 320px;
	color: #333333;
	/*background-image: linear-gradient(#a5df50, #2373ac);*/
	/*background-image: linear-gradient(#ffffff, #ffffff);*/
	background: #f6f8fa;
  border: 1px solid #d8d8d8;
  box-shadow: 0px 40px 30px -20px rgba(0, 0, 0, 0.3);
}
.box-login h3 {
	font-weight: normal;
}
.box-login .form_login .row100 input[type=email]{
	font-weight: normal;
	font-size: 14px;
	color: #333333;
}
.box-login .label-checkbox100 {
	font-size: 14px;
}
.box-login .label-checkbox100::before {
  background: #fff;
  border: 1px solid #333;
}
.input-checkbox100:checked + .label-checkbox100::before {
  color: #333;
}
.box-login .form_login .row100 button {
	transition: all .2s;
	font-size: 14px;
	font-weight: normal;
	border: 2px solid transparent;
	padding: 7px 35px;
	background-color: #2373ac;
	color: #fff;
}
.box-login .form_login .row100 button:hover {
	background-color: #ffffff;
	border: 2px solid #2373ac;
	color: #2373ac;
}
.box-login .form_login .row100 input[type=email] {
	border-bottom: 2px solid #000000;
}
.box-login .form_login .row100 input[type=email]::-webkit-input-placeholder{
  color: #333;
}
.box-login .form_login .row100 input[type=email]:-ms-input-placeholder{
  color: #333;
}
.box-login .form_login .row100 input[type=email]::placeholder{
  color: #333;
}
.box-login .form_login .row100 input[type=email]:focus::-webkit-input-placeholder {
  color: transparent;
}
.box-login .form_login .row100 input[type=email]:focus:-ms-input-placeholder {
  color: transparent;
}
.box-login .form_login .row100 input[type=email]:focus::placeholder {
  color: transparent;
}
.box-login .form_login .row100 input[type=email]:focus{
  border-bottom: 2px solid rgba(0,0,0,1);
}

input[type="text"],
textarea,
select {
	border: 1px solid #d8d8d8;
	border-radius: 3px;
}
.box-login .err {
	font-size: 12px;
	font-weight: normal;
	color: #f00;
}


/* SIDEBAR
------------------*/
.sidebar-left {
	min-width: 200px;
	padding: 20px 10px;
}
.sidebar-left .papa {
	margin-bottom: 10px;
}
.sidebar-left .papa label {
	display: block;
	font-size: 16px;
	font-weight: 500;
/*	padding: 10px 0;
	background: #000000;*/
}
.sidebar-left .papa .sub {
	margin: 0 10px;
}
.sidebar-left .papa .sub li {
	border-bottom: 1px solid #999999;
}
.sidebar-left .papa .sub li {
	display: block;
	padding: 7px 0;
}

/* SIDE BAR RIGHT 
--------------------*/

.sidebar-right {
	width: 24%;
	max-width: 350px;
	min-width: 300px;
}
.sort_room label {
	font-size: 14px;
	font-weight: normal;
	color: #000000;
}
.sidebar-right .list_booking {
	color: #333333;
}
.sidebar-right .list_booking li {
	background: #f6f8fa !important;
	border-radius: 5px;
	position: relative;
	/*flex-direction: column;*/
	padding: 5px 15px;
	margin-bottom: 5px;
}
.sidebar-right .list_booking li:before {
	content: "";
	width: 4px;
	height: 100%;
	background: #2373ac;
	position: absolute;
	top: 0;
	left: 0;
}
.sidebar-right .list_booking li .time, 
.sidebar-right .list_booking li .room,
.sidebar-right .list_booking li .team,
.sidebar-right .list_booking li .comment {
	padding: 5px 0;
}
.sort_room select {
	max-width: 65%;
}


/* CALENDAR 
------------------*/
div#calendar {
	max-width: 850px;
	border: 1px solid #d8d8d8;
}
div#calendar div.header {
	background: #2875c7;
}
div#calendar ul.dates {
	display: flex;
  flex-wrap: wrap;
}
div#calendar ul.label li {
	font-weight: bold;
	margin-right: 3px;
	width: calc( (100% / 7) - 3px + ( 3px / 7 ) );
}
div#calendar ul.dates li {
	height: auto;
	font-size: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #f6f8fa;
	margin-top: 3px;
	margin-right: 3px;
	width: calc( (100% / 7) - 3px + ( 3px / 7 ) );
}
div#calendar ul.dates li:hover,
div#calendar ul.dates li.active_day:hover {
	background: #E3F2FF;
}
div#calendar ul.dates li.active_day {
	background: #f6f8fa;
}
div#calendar ul.dates li.active_day .day {
	color: #000000;
}
div#calendar ul.dates li.active_day .event span {
	font-size: 10px;
	font-weight: normal;
	font-family: arial;
	display: flex;
	justify-content: center;
	align-items: center;
}
div#calendar ul.dates li.old {
	color: #a4a4a4;
	opacity: 1;
	filter: alpha(opacity= 1);
}
div#calendar ul.dates li.this_day {
	background: #18509C;
}
div#calendar ul.dates li.this_day .day {
	color: #ffffff;
}
div#calendar ul.dates li.select_day {
	background: #E3F2FF;
}
/* div#calendar ul.dates li.active_day .event span.term_3,
.sidebar-right .list_booking li.room_3:before {
	background: #2373ac !important;
}
div#calendar ul.dates li.active_day .event span.term_5,
.sidebar-right .list_booking li.room_5:before {
	background: #f24034 !important;
}
div#calendar ul.dates li.active_day .event span.term_4,
.sidebar-right .list_booking li.room_4:before {
	background: #ffab40 !important;
} */


/* BOOKING FORM
--------------------*/
.modal-container .modal-inner {
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
border-radius: 5px;
overflow: hidden;
width: 80%;
max-width: 800px;
}
.modal-container .modal-inner .modal-body {
	color: #333333;
	border: none;
}
.modal-footer {
	border: none;
	justify-content: center;
}
.modal-container .modal-inner .modal-body > table {
}
.modal-container .modal-inner .modal-body > table > tbody > tr > th {
	padding: 0 10px 5px 0;
	vertical-align: middle;
} 
.modal-container .modal-inner .modal-body > table > tbody > tr > td {
	padding: 0 0 5px 0;
}
.modal-footer .mess_err {
	color: #E74133;
	font-weight: normal;
	height: auto;
	line-height: 1.5;
}
.modal-footer .mess_err.show_err {
	background: #F6F3D1;
	border-radius: 3px;
	border: 1px solid #F8BB00;
}

.modal-footer .btn {
	max-width: 200px;
	height: auto;
	padding: 10px 0;
	margin: 0 5px;
}
#booking_room ul li {
	padding: 5px;
	margin-bottom: 0;
}
#booking_room ul li:last-child {
	padding: 5px;
}
#booking_room ul li.duplicate {
	background: #F6F3D1;
	color: #000000;
}
select#start_h, select#end_h,
select#start_i, select#end_i {
	width: 50px;
}
.modal-container .modal-inner .modal-body .box_loop {
	display: flex;
	justify-content: flex-start;
}
.modal-container .modal-inner .modal-body .box_loop label {
	margin-right: 10px;
}

/* LIST ROOM
-------------------*/
.main-content .list_room {
	padding-top: 25px;
}
.main-content .list_room .box_room {
	border-radius: 5px;
	background: #f6f8fa !important;
	border: 1px solid #d8d8d8;
}
.main-content .list_room .box_room .info_room {
	color: #333333;
	font-weight: bold;
}
.main-content .list_room .box_room .info_room h3 {
	font-weight: bold;
	text-align: left;
	font-size: 18px;
}

/* MY BOOKING
---------------------*/
.my_booking table {
	border: 1px solid #d8d8d8;
	box-sizing: border-box;
	border-spacing: 0px;
	border-collapse: collapse;
}
.my_booking table thead tr th {
	padding: 10px;
	border: 1px solid #d8d8d8;
}
.my_booking table tbody tr td {
	color: #333333;
	padding: 10px;
	border: 1px solid #d8d8d8;
}
.cancel_room {
	font-weight: normal;
}

/* SETTING 
----------------*/
.setting .box_action h3 {
	font-size: 14px;
	font-weight: bold;
	margin: 15px 0;
}
.setting .box_action p {
	display: flex;
	margin-bottom: 5px;
}
.setting .box_action p label {
	width: 100px;
	display: flex;
	align-items: center;
}
.setting .box_action input[type=password] {
	padding: 6px;
	border: 1px solid #d8d8d8;
	border-radius: 3px;
}
.setting .box_action .show_err {
	color: #f00;
}

/*
==============================*/
img.logo-svg {
	width: 10rem;
}
.thumb_room img {
	margin-bottom: 1rem;
}
.sidebar-left {
	max-width: 285px;
}
.sidebar-left .papa label > i {
	min-width: 20px;
}
.sidebar-left .papa .sub {
    margin: 0 25px;
}
.header-sp {
	width: 100%;
  max-width: 100%;
}
.navbar-header {
  height: 54px;
  border-bottom: 2px solid #2373ac;
  border-top: 3px solid #fff;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: none;
	justify-content: space-between;
	align-items: center;
	z-index: 1000;
  background-color: #fff;
  position: relative;
}
.navbar-brand img {
	width: 65px;
	max-width: 100%;
}
.sidebar-toggle {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
  width: 30px;
	height: 30px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-size: 16px;
}

.sidebar-right h2 {
	margin-bottom: 20px;
}

.sidebar-right{
    padding: 20px;    
}
.sidebar-right .list_booking{
    padding: 0px;
}

.sidebar-left .papa .sub li {
	padding: 10px 0;
}

.main-content.fix-content {
    width: calc(100% - 285px);
}
.btn {
	transition: all .2s;
	font-weight: bold;
}
/*calendar*/
.ui-datepicker td span, .ui-datepicker td a {
	padding: .4em;
}
.ui-datepicker {
  width: 100%;
}
.ui-widget.ui-widget-content {
    background: #fff;
    padding: 15px;
    border-radius: 5px;
}
.ui-widget-header {
	background: transparent;
	border: none;
	color: #000;
}
.ui-datepicker .ui-datepicker-title {
    line-height: 1.5;
    font-size: 1rem;
}
.ui-datepicker th {
	color: #000;
}
.ui-datepicker td {
    outline: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    justify-self: center;
    align-self: center;
    border-radius: 50%;
    transition-duration: 0.2s;
    padding: 2px;
}

.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default, 
.ui-button, 
html .ui-button.ui-state-disabled:hover, 
html .ui-button.ui-state-disabled:active {
	color: #000;
	display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: #E3F2FF;
}

.ui-state-highlight, 
.ui-widget-content .ui-state-highlight, 
.ui-widget-header .ui-state-highlight {
	background: #ffab40;
	color: #fff;
}

.ui-state-active, .ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active, 
a.ui-button:active, 
.ui-button:active, 
.ui-button.ui-state-active:hover {
	background: #2875c7;
	color: #fff;
}

.ui-state-hover, 
.ui-widget-content .ui-state-hover, 
.ui-widget-header .ui-state-hover, 
.ui-state-focus, 
.ui-widget-content .ui-state-focus, 
.ui-widget-header .ui-state-focus, 
.ui-button:hover, 
.ui-button:focus {
  opacity: 1;
  background: #2875c7;
  color: #fff;
}
#booking_room{
	max-height: 56vh;
}
@media (max-width: 1024px){
	.modal-container .modal-inner .modal-body > table {
		width: 48%;
	}
	.navbar-header {
    display: flex;
	}
	.container-main {
		max-width: 100%;
		display: block;
		min-width: unset;
	}
	.sidebar-left {
		position: fixed;
		height: 100%;
    z-index: 999;
    left: -100%;
    transition: 0.3s all;
	}
	.sidebar-left .logo {
		display: none;
	}
	.sidebar-left .nav {
    overflow-y: auto;
    height: 100%;
	}
	.main-content,
	.sidebar-right,
	.main-content.fix-content {
	   width: 100%;
	}
	.main-content .content{
		padding: 20px;
	}
	.offcanvas-active .sidebar-left {
		left: 0;
	}
	.offcanvas-active .sidebar-toggle {
		background-color: #2373ac;
	}
	.offcanvas-active .container-main:before {
		content: '';
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 998;
	}

	.my_booking {
		height: auto;
    	overflow-x: auto;
	}
	.my_booking table {
		min-width: 840px;
	}
	.sidebar-right .list_booking {
		height: auto;
	}
	.modal-container .modal-inner .modal-body {
		height: 70vh;
    overflow-y: auto;
	}
}
@media (max-width: 640px){
	.main-content .list_room .box_room,
	.modal-container .modal-inner .modal-body > table,
	.modal-body #booking_room {
		width: 100%;
	}
	.modal-body #booking_room {
		margin-top: 20px;
	}
	.sidebar-right {
    max-width: 100%;
	}
	.modal-container .modal-inner .modal-body {
		display: block;
	}
	.modal-footer .btn {
    width: 45%;
	}
}

@media (max-width: 530px){
	#booking_room ul li {
		display: block;
	}
	#booking_room ul li .time,
	#booking_room ul li .team {
		width: 100%;
	}
	.modal-container .modal-inner .modal-body > table > tbody > tr {
    display: grid;
	}
	.modal-container .modal-inner .modal-body > table > tbody > tr > th {
		width: auto;
		text-align: left;
	}
	.modal-container .modal-inner .modal-body > table > tbody > tr > td {
		width: 100%;
	}

	.modal-container .modal-inner .modal-body .ui-datepicker {
		width: auto;
	}
	.modal-container .modal-inner .modal-body > table > tbody > tr > th::after {
		display: none;
	}
}