/* cusomer style */
/* 기업명 : APPROTIUM */

.btn,.btn:hover{border-color:transparent;}
.btn-primary, .progress-bar, .progress-label .progress-bar .label {background-color:var(--vz-blue);}
.btn-primary:hover, .btn-primary:active{background-color:var(--vz-blue);}
.btn-info{background-color: #58caea;}
.btn-info:hover, .btn-info:active{background-color: #58caea}
.card-radio .form-check-input:checked+.form-check-label:before{color:var(--vz-blue);}

.progress-label .progress-bar .label:after {border-top-color: #58caea;}
.page-item.active .page-link{border-color: var(--vz-blue); background-color: var(--vz-blue);}
#back-to-top{background-color:#7d94cf;}

/* [p] auth > login  */
.acm-wrapper.auth-page-wrapper{
	height:100vh; overflow:hidden; font-size:16px;
	/* background:url(/swimming-monster-rd/public/images/acm/swimming-monster-login.png) center / cover no-repeat;  */
}
.acm-wrapper.auth-page-wrapper::-webkit-scrollbar{display:none;}
.acm-wrapper .auth-page-content,.acm-wrapper .container{height:100%;}
.acm-wrapper .card{
	 width:40vw; background-color:rgba(var(--vz-white-rgb), 0.76);  
	 box-shadow: 0 19px 38px rgba(var(--vz-primary-rgb),0.30), 0 15px 12px rgba(var(--vz-primary-rgb), 0.22);
 }
.acm-wrapper .card-body{padding:1.6rem 1.3rem 1.3rem;}
.acm-wrapper .auth-header{padding-top:3rem; font-size:1.7rem; color:var(--vz-white);}
.acm-wrapper .auth-header h2{font-size:2rem; line-height:1;}
.acm-wrapper .login-form{display:flex; justify-content:space-between; gap:1vw; margin-top:1.5rem;}
.acm-wrapper .login-form form{flex-basis:70%;}
.acm-wrapper .login-form form ~ div{flex-basis:30%;}
.acm-wrapper .form-icon .form-control{padding-left:110px;}
.acm-wrapper .form-icon label{position:absolute; top:0.55em; left:1em;}
.acm-wrapper .login-form .btn-primary{width:100%; height:100%;}
.acm-wrapper .form-check{margin-right:1rem;}
.acm-wrapper .form-check:after{
	display:inline-block; position:relative; top:1px; left:calc(0.5rem - 1px);
	width:1px; height:12px; content:""; background-color:var(--vz-body-color);
}
.acm-wrapper .ri-eye-fill{margin: -10px 0 0 -25px;}
.acm-wrapper .copyright{opacity:0.6;}

/* [p] acm-table  */
.acm-table{table-layout:fixed; caption-side:top;}
.acm-table.table>:not(caption)>*>* {padding:0.35em;}
.acm-table caption{border:solid var(--vz-border-color); border-width:1px 1px 0 1px; padding:0.3em; text-align:center;}
.acm-table th{color:var(--vz-white); background-color:var(--tui-heading-color);}
.acm-table th[scope='row']{color:inherit; background-color:var(--vz-body-bg);}
.acm-table td{position:relative; vertical-align:middle;}
.acm-table td span{position:absolute; bottom:0.5em; right:0.5em; color:var(--vz-gray-600)} 
.acm-table input{border:none; outline:none; width:100%;}
.acm-table textarea{margin-bottom:-0.4em;}
.acm-table input:read-only,.acm-table textarea:read-only{color:#666; background-color:transparent;}
.acm-table .bg-gray{background-color:#f6f6f6;}

/* color */
:root {
  --main-color01:rgb(58, 58, 58); /* sidebar 배경 */
  --button-blue-color01:rgb(62, 148,249); /* 버튼 파란색 배경 */
  --main-blue-color02:rgb(29, 143, 254, 0.85);
	
  --vz-body-bg: #fff;
  --vz-body-color: #212529;
  --vz-body-color-rgb: 33, 37, 41;
  --vz-vertical-menu-bg: #fff;
  --vz-vertical-menu-item-color: #6d7080;
  --vz-vertical-menu-item-hover-color: #5ea3cb;
  --vz-vertical-menu-item-active-color: #5ea3cb;
  --vz-vertical-menu-sub-item-color: #7c7f90;
  --vz-vertical-menu-sub-item-hover-color: #5ea3cb;
  --vz-vertical-menu-sub-item-active-color: #5ea3cb;
  --vz-vertical-menu-title-color: #919da9;
  --vz-vertical-menu-bg-dark:var(--main-color01);
  --vz-vertical-menu-item-color-dark: white;
  --vz-vertical-menu-item-hover-color-dark: #fff;
  --vz-vertical-menu-item-active-color-dark: #fff;
  --vz-vertical-menu-sub-item-color-dark: #fff;
  --vz-vertical-menu-sub-item-hover-color-dark: #fff;
  --vz-vertical-menu-sub-item-active-color-dark: #fff;
  --vz-vertical-menu-title-color-dark: #a4b0bf;
  --vz-header-bg: #fff;
  --vz-header-item-color: #e9ecef;
  --vz-header-bg-dark: #323835;
  --vz-header-item-color-dark: #a4b0bf;
  --vz-topbar-search-bg: #f3f3f9;
  --vz-topbar-user-bg: rgb(88, 204, 255, 0.15);
  --vz-topbar-user-bg-dark: rgb(88, 204, 255, 0.15);
  --vz-footer-bg: #fff;
  --vz-footer-color: #98a6ad;
  --vz-topnav-bg: #fff;
  --vz-topnav-item-color: #6d7080;
  --vz-topnav-item-color-active: #5ea3cb;
  --vz-twocolumn-menu-iconview-bg: #fff;
  --vz-twocolumn-menu-bg: #fff;
  --vz-twocolumn-menu-iconview-bg-dark: var(--vz-vertical-menu-bg-dark);
  --vz-twocolumn-menu-bg-dark: #363a38;
  --vz-twocolumn-menu-item-color-dark: var(--vz-vertical-menu-item-color-dark);
  --vz-twocolumn-menu-item-active-color-dark: #fff;
  --vz-twocolumn-menu-item-active-bg-dark: rgba(255, 255, 255, 0.15);
  --vz-boxed-body-bg: #e7e7e7;
  --vz-heading-color: #495057;
  --vz-light: #f3f6f9;
  --vz-light-rgb: 243, 246, 249;
  --vz-dark: #212529;
  --vz-dark-rgb: 33, 37, 41;
  --vz-link-color: #5ea3cb;
  --vz-link-hover-color: #5ea3cb;
  --vz-border-color: #e9ebec;
  --vz-dropdown-bg: #fff;
  --vz-dropdown-link-color: #212529;
  --vz-dropdown-link-hover-color: #1e2125;
  --vz-dropdown-link-hover-bg: #f3f6f9;
  --vz-dropdown-border-width: 0;
  --vz-card-bg: #fff;
  --vz-card-cap-bg: #fff;
  --vz-card-logo-dark: block;
  --vz-card-logo-light: none;
  --vz-modal-bg: #fff;
  --vz-nav-tabs-link-active-color: #495057;
  --vz-nav-tabs-link-active-bg: #f1f1f1;
  --vz-accordion-button-active-color: #5593b7;
  --vz-progress-bg: #eff2f7;
  --vz-toast-background-color: rgba(255, 255, 255, 0.85);
  --vz-toast-border-color: rgba(0, 0, 0, 0.1);
  --vz-toast-header-border-color: rgba(0, 0, 0, 0.05);
  --vz-list-group-hover-bg: #f3f6f9;
  --vz-popover-bg: #fff;
  --vz-pagination-hover-bg: #eff2f7;
  --vz-input-bg: #fff;
  --vz-input-border: #ced4da;
  --vz-input-focus-border: #afd1e5;
  --vz-input-disabled-bg: #eff2f7;
  --vz-input-group-addon-bg: #eff2f7;
  --vz-input-check-border: var(--vz-input-border);
  --vz-blue: #2e90fa;
  --vz-indigo: #405189;
  --vz-purple: #7084c7;
  --vz-pink: #f672a7;
  --vz-red: #fa896b;
  --vz-orange: #f1963b;
  --vz-yellow: #f7b84b;
  --vz-green: #6ada7d;
  --vz-teal: #02a8b5;
  --vz-cyan: #58caea;
  --vz-white: #fff;
  --vz-gray: #878a99;
  --vz-gray-dark: #343a40;
  --vz-gray-100: #f3f6f9;
  --vz-gray-200: #eff2f7;
  --vz-gray-300: #e9ebec;
  --vz-gray-400: #ced4da;
  --vz-gray-500: #adb5bd;
  --vz-gray-600: #878a99;
  --vz-gray-700: #495057;
  --vz-gray-800: #343a40;
  --vz-gray-900: #212529;
  --vz-primary: #5ea3cb;
  --vz-secondary: #7084c7;
  --vz-success: #6ada7d;
  --vz-info: #58caea;
  --vz-warning: #f7b84b;
  --vz-danger: #fa896b;
  --vz-light: #f3f6f9;
  --vz-dark: #212529;
  --vz-primary-rgb: 94, 163, 203;
  --vz-secondary-rgb: 112, 132, 199;
  --vz-success-rgb: 106, 218, 125;
  --vz-info-rgb: 88, 202, 234;
  --vz-warning-rgb: 247, 184, 75;
  --vz-danger-rgb: 250, 137, 107;
  --vz-light-rgb: 243, 246, 249;
  --vz-dark-rgb: 33, 37, 41;
  --vz-white-rgb: 255, 255, 255;
  --vz-black-rgb: 0, 0, 0;
  --vz-body-color-rgb: 33, 37, 41;
  --vz-body-bg-rgb: 241, 241, 241;  
  --vz-body-color: #212529;
  --vz-body-bg: #fff;
}

[data-layout-mode=dark] {
  --vz-gray-100: #1a1d21;
  --vz-gray-200: #212529;
  --vz-gray-300: #2a2f34;
  --vz-gray-400: #878a99;
  --vz-gray-500: #adb5bd;
  --vz-gray-600: #bfc8e2;
  --vz-gray-700: #ced4da;
  --vz-gray-800: #eff2f7;
  --vz-gray-900: #f3f6f9;
  --vz-body-bg: #fff;
  --vz-body-color: #ced4da;
  --vz-body-color-rgb: 206, 212, 218;
  --vz-vertical-menu-bg: #fff;
  --vz-vertical-menu-item-color: #5f6270;
  --vz-vertical-menu-item-hover-color: #5ea3cb;
  --vz-vertical-menu-item-active-color: #5ea3cb;
  --vz-vertical-menu-sub-item-color: #686b7b;
  --vz-vertical-menu-sub-item-hover-color: #5ea3cb;
  --vz-vertical-menu-sub-item-active-color: #5ea3cb;
  --vz-vertical-menu-title-color: #878a99;
  --vz-vertical-menu-bg-dark: rgb(29, 143, 254);
  --vz-vertical-menu-item-color-dark: white;
  --vz-vertical-menu-item-hover-color-dark: #fff;
  --vz-vertical-menu-item-active-color-dark: #fff;
  --vz-vertical-menu-sub-item-color-dark: #fff;
  --vz-vertical-menu-sub-item-hover-color-dark: #fff;
  --vz-vertical-menu-sub-item-active-color-dark: #fff;
  --vz-vertical-menu-title-color-dark: #89929b;
  --vz-header-bg: #292e32;
  --vz-header-item-color: #e9ecef;
  --vz-header-bg-dark: #212529;
  --vz-header-item-color-dark: #89929b;
  --vz-topbar-search-bg: #1a1d21;
  --vz-topbar-user-bg: rgb(88, 204, 255, 0.15);
  --vz-topbar-user-bg-dark: rgb(88, 204, 255, 0.15);
  --vz-footer-bg: #212529;
  --vz-footer-color: #878a99;
  --vz-topnav-bg: #272b30;
  --vz-topnav-item-color: #878a99;
  --vz-topnav-item-color-active: #fff;
  --vz-twocolumn-menu-iconview-bg: #fff;
  --vz-twocolumn-menu-bg: #fff;
  --vz-twocolumn-menu-iconview-bg-dark: var(--vz-vertical-menu-bg-dark);
  --vz-twocolumn-menu-bg-dark: #272b30;
  --vz-twocolumn-menu-item-color-dark: var(--vz-vertical-menu-item-color-dark);
  --vz-twocolumn-menu-item-active-color-dark: #fff;
  --vz-twocolumn-menu-item-active-bg-dark: rgba(255, 255, 255, 0.15);
  --vz-boxed-body-bg: #111316;
  --vz-heading-color: #ced4da;
  --vz-light: #2a2f34;
  --vz-light-rgb: 42, 47, 52;
  --vz-dark: #eff2f7;
  --vz-dark-rgb: 239, 242, 247;
  --vz-link-color: #ced4da;
  --vz-link-hover-color: #ced4da;
  --vz-border-color: #32383e;
  --vz-dropdown-bg: #292e33;
  --vz-dropdown-link-color: #adb5bd;
  --vz-dropdown-link-hover-color: #b9bfc4;
  --vz-dropdown-link-hover-bg: #2f343a;
  --vz-dropdown-border-width: 1px;
  --vz-card-bg: #212529;
  --vz-card-cap-bg: #212529;
  --vz-card-logo-dark: none;
  --vz-card-logo-light: block;
  --vz-modal-bg: #212529;
  --vz-nav-tabs-link-active-color: #f3f6f9;
  --vz-nav-tabs-link-active-bg: #2a2f34;
  --vz-accordion-button-active-color: #fff;
  --vz-progress-bg: #2a2f34;
  --vz-toast-background-color: rgba(42, 47, 52, 0.85);
  --vz-toast-border-color: rgba(255, 255, 255, 0.1);
  --vz-toast-header-border-color: rgba(255, 255, 255, 0.05);
  --vz-list-group-hover-bg: #272b30;
  --vz-popover-bg: #23282c;
  --vz-pagination-hover-bg: #2a2f34;
  --vz-input-bg: #262a2f;
  --vz-input-border: #2a2f34;
  --vz-input-focus-border: #33393f;
  --vz-input-disabled-bg: #212529;
  --vz-input-group-addon-bg: #2a2f34;
  --vz-input-check-border: #33393f;
}

[data-sidebar=gradient] {
  --vz-vertical-menu-bg-gradient: linear-gradient(to right, var(--vz-primary), var(--vz-success));
  --vz-vertical-menu-border-gradient: var(--vz-success);
  --vz-twocolumn-menu-bg-dark: var(--vz-success);
}

[data-sidebar=gradient-2] {
  --vz-vertical-menu-bg-gradient: linear-gradient(to right, var(--vz-info), var(--vz-secondary));
  --vz-vertical-menu-border-gradient: var(--vz-secondary);
  --vz-twocolumn-menu-bg-dark: var(--vz-secondary);
}

[data-sidebar=gradient-3] {
  --vz-vertical-menu-bg-gradient: linear-gradient(to right, var(--vz-info), var(--vz-success));
  --vz-vertical-menu-border-gradient: var(--vz-success);
  --vz-twocolumn-menu-bg-dark: var(--vz-success);
}

[data-sidebar=gradient-4] {
  --vz-vertical-menu-bg-gradient: linear-gradient(to right, var(--vz-dark), var(--vz-primary));
  --vz-vertical-menu-border-gradient: var(--vz-primary);
  --vz-twocolumn-menu-bg-dark: var(--vz-primary);
}

.header-icon {
	color : var(--vz-vertical-menu-bg-dark);
}


.small-title {
	font-weight : 700;
	font-size : 26px;
	margin-top : 24px;
	margin-bottom : 16px;
}


.sensor-card {
}

.sensor-card .label {
	color : #777;
	font-weight : 600;
	font-size : 12px;
	padding-left : 8px;
}

.sensor-card .content {
	display : flex;
	border-radius : 1rem;
	background-color: rgb(88, 204, 255, 0.15);
	
	color : black;
	font-weight : 700;
}

.sensor-card .content > div:nth-child(1){
	width : 60%;
}

.sensor-card .content > div:nth-child(2){
	width : 40%;
}

.sensor-card .content .name{
	font-size : 16px;
	padding-left : 12px;
	padding-top : 8px;
}

.sensor-card .content .value{
	font-size : 32px;
	padding-left : 12px;
	padding-bottom : 8px;
}

.sensor-card .content .image-layout{
	display:flex;
	justify-content:center;
	align-items:center;
}

.close-container {
	width : 100%;
	
	display : flex;
	justify-content : end;	
}

.close-button {
	background : red;
	width : 40px;
	height : 40px;
	border-radius : 0.5rem;
	
	display : flex;
	justify-content : center;
	align-items : center;
}

.close-container > i {
	cursor : pointer;
	font-size : 32px;
	color : #555;
}

.open-container {
	display : none;	
	margin-left : 20px;
}

.open-container > i {
	cursor : pointer;
	font-size : 40px;
	color : rgb(29, 143, 254);
}

label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom:0;
/*   cursor: pointer; */
}


.toggle {
  appearance: none;
  position: relative;
  border: max(2px, 0.1em) solid gray;
  border-radius: 1.25em;
  width: 2.25em;
  height: 1.25em;
}

.toggle::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  transform: scale(0.8);
  background-color: gray;
  transition: left 250ms linear;
}

.toggle:checked {
  background-color: tomato;
  border-color: tomato;
}

.toggle:checked::before {
  background-color: white;
  left: 1em;
}

.toggle:disabled {
  border-color: lightgray;
  opacity: 0.7;
  cursor: not-allowed;
}

.toggle:disabled:before {
  background-color: lightgray;
}

.toggle:disabled + span {
  opacity: 0.7;
  cursor: not-allowed;
}

.toggle:focus-visible {
  outline-offset: max(2px, 0.1em);
  outline: max(2px, 0.1em) solid tomato;
}

.toggle:enabled:hover {
  box-shadow: 0 0 0 max(4px, 0.2em) lightgray;
}


.scheduleCellHighlight {
	color: #ffffff;
	background :#317bff !important;	
}

.highlight-cell {
	font-weight:bold !important; 
	color:#ff7777 !important;
}
.bold-cell {
	font-weight: bold !important;
}