﻿@charset "UTF-8";

.logoimg{background-image:url("../../images/logo.png?ver=hyundai"); background-repeat:no-repeat; background-size:contain; height:25px;width:150px;}

:root {
  --default-fc: #212121;
  --default-fc-blue: #0061f2;
  --default-active: #09b9e6;
  --default-active-light: #e0e0e0;
  --default-bg: #fff;
  --default-bg-dark: #212529;
  --default-bg-darkgray: #494949;
  --default-menu-width: 250px;
  --default-top-height: 3.5rem;
  --dafault-form-border: #a8a8a8;
  --default-title: #465b74;

  --main-color:#464646;
  --main-color-dark:#3c3c3c;
  --main-color-light:#747474;
  --main-color-lighter:#8d8d8d;

  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-body-color: #1d1f1f;
}
@media ( max-width: 1024px ) {
  :root {--default-top-height: 4.2rem;}
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
ol,
ul {
  list-style: none;
}
html {
  height: 100%;
}
body {
  height: 100%;
  line-height: 1.5;
  margin: 0;
  font-family: var(--bs-font-sans-serif);/*'Noto Sans KR', Sans-Serif;*/
  font-size: .9rem;
  font-weight: 400;
  color: var(--default-fc);
  background-color: var(--default-bg);
  overflow:hidden;
  min-width:900px;
  overflow-x:auto;
}
/**::-webkit-scrollbar {
    width: .6rem;*/  /* 스크롤바의 너비 */
    /*height: .56rem;
}
*::-webkit-scrollbar-thumb {
    height: .56rem;*/ /* 스크롤바의 길이 */
    /*background: rgb(128 128 128 / 0.8);*/ /* 스크롤바의 색상 */
    /*border-radius: 0px;
}
*::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 0.10);*/  /*스크롤바 뒷 배경 색상*/
/*}*/
a {text-decoration: none; }
a:hover,
a:focus {
  text-decoration: none;
}
img {
  outline: none;
  vertical-align: middle;
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;}
p{margin-top:0;margin-bottom:1rem}
ol,ul{margin-top:0;margin-bottom:.1em}
b,strong{font-weight:bolder}
.small,small{font-size:.75em !important}
sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}
sup{top:-.5em}
img,svg{vertical-align:middle}
table{border-collapse:collapse}
tbody,td,th,thead,tr{border:0 solid;border-color:inherit}
label{display:inline-block}
[role=button]{cursor:pointer}
select{word-wrap:normal;}
select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}
iframe{border:0}
input[type=checkbox],input[type=radio]{width: 16px;height: 16px;}
input[type=checkbox] + label,
input[type=radio] + label{
  display: inline-block;
  cursor: pointer;
}
input[disabled]{
  border:1px solid #ddd; background:#f6f6f6;
}
input::placeholder {color:#999}
input::-webkit-input-placeholder {color:#999}
input:-ms-input-placeholder {color:#999}
.check_box{
    line-height:1.8;
}
.check_box input {
    float: left;
    margin: 6px 0;
    padding: 0;
}
.check_box label {
    margin: 3px 13px 0 4px !important;
}
.form-label{margin-bottom:.5rem}
.form-control{padding:.35rem .5rem;line-height:1;height:32px; font-weight:400;background-clip:padding-box;border:1px solid var(--dafault-form-border);border-radius:3px;outline:0}
/*.form-select{display:block;width:100%;padding:.45rem 3.375rem .45rem 1.125rem;-moz-padding-start:calc(1.125rem - 3px);font-weight:400;line-height:1;color:#69707a;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23363d47' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1.125rem center;background-size:16px 12px;border:1px solid #c5ccd6;border-radius:.35rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.form-select:focus{border-color:tint-color(#0061f2,50%);outline:0;box-shadow:0 0 0 .2rem rgba(0,97,242,.25)}
.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:1.125rem;background-image:none}
.form-select:disabled{background-color:#e0e5ec}
.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #69707a}*/
.form-readonly{border:none !important;}
.form-readonly:focus{outline:none;}

#login_wrap #login_element_wrap #login_frame {
  position:absolute;
  left:50%;
  top:48%;
  transform: translate(-50%, -50%);
  width: 1370px;
  height: 648px;
  color: #b5b5b5;
  background: #ffffff;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.43);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.43);
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.43);
}
#login_wrap #login_element_wrap #login_frame .left_area {
  float: left;
  width: 694px;
  height: 100%;
  padding: 0;
}
#login_wrap #login_element_wrap #login_frame .right_area {
  float: left;
  margin: 75px 10px 0 150px;
}
#login_wrap #login_element_wrap #login_frame .right_area .login_title .login_txt {
  font-size: 25px;
  font-weight: 800;
  color: #212122;
}
#login_wrap #login_element_wrap #login_frame .right_area .login_title .title_txt {
  line-height: 50px;
  font-size: 21px;
  font-weight: 500;
  color: var(--default-title);
}
#login_wrap #login_element_wrap #login_frame .right_area .inbox {
  margin: 10px 0 0 0;
  font-size: 15px;
  font-weight: 500;
}
#login_wrap #login_element_wrap #login_frame .right_area .inbox .loginInput {
  margin: 20px 0 0 0;
  width: 365px;
}
#login_wrap #login_element_wrap #login_frame .right_area .inbox .loginInput input {
  width:100%;
  height: 39px;
  margin: 20px 0 0 0;
  padding: 0 20px;
  font-size: 21px;
  color: #3d3c3c;
  background-color: #f1f1f1;
  border: none;
  border-bottom: 1px solid #dddddd;
  outline: none;
}
#login_wrap #login_element_wrap #login_frame .right_area .inbox .loginInput input.login_id {
  margin: 10px 0 0 0;
  background: url('../../images/login/login_icon_people.png') no-repeat center right;
}
#login_wrap #login_element_wrap #login_frame .right_area .inbox .loginInput input.login_pw {
  margin: 30px 0 10px 0;
  background: url('../../images/login/login_icon_lock.png') no-repeat center right;
}
#login_wrap #login_element_wrap #login_frame .right_area .inbox .bt_login {
  width: 100%;
  height: 55px;
  margin: 45px 0 0 0;
  font-size: 16px;
  color: #FFFFFF;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
  background: var(--main-color);
  /*border-radius: 5px;*/
  outline: none;
}
#login_wrap #login_element_wrap #login_frame .right_area .inbox .bt_login:hover {
  background:#2b2b2b;
}
#login_wrap #login_element_wrap #login_frame .right_area .txt_notice {
  width: 100%;
  margin: 20px 0 0 0;
  line-height: 28px;
  text-align: center;
  font-size: 12px;
}

#top .navbar{position:relative;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.3rem;}
#top .topnav{position:fixed;top:0;right:0;left:0;z-index:1030; color:#3d3d3d;min-width:900px}
#top .topnav .btn-icon {margin-top:0px;}
#top .topnav .logo {margin-top:10px;}
#top .top-app-bar{padding-left: 0;
  height: var(--default-top-height);
  z-index: 1040;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
#top .topnav .menu-list {margin: 0 .5rem;}
@media ( max-width: 1024px ) {
  #top .navbar {padding-top:.65rem;}
  #top .topnav .menu-list {font-size:1.5rem;margin:0 1.2rem; }
  #top .topnav .logo logoimg {margin-top:0px;}
}

#container{
  padding-top: var(--default-top-height);
}
#container-left {
  position: absolute;
  height: 100vh;
  width:var(--default-menu-width);
  z-index: 1038;
  overflow:hidden;
  border-right:1px solid #e0e0e0;
}
#container-left .drawer {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-wrap: nowrap;
  border-right-width: 1px;
}
#container-left .drawer .drawer-menu {
  overflow-y: auto;
  flex-grow: 1;
}
#container-left .drawer .drawer-menu .nav {
  flex-direction: column;
  flex-wrap: nowrap;
}
#container-left .drawer .drawer-menu .nav a {cursor:pointer;}
#container-left .drawer .drawer-menu .nav .drawer-menu-heading {
  padding-top: 1.15rem;
  padding-right: .5rem;
  padding-bottom: 0.4rem;
  padding-left: .8rem;
  font-size: 1.05rem;
}
#container-left .drawer .drawer-menu .nav .drawer-menu-heading i {
  padding-right:.6rem;
}
#container-left .drawer .drawer-menu .nav .drawer-menu-divider {
  display: block;
  height: 0px;
  border-top-style: solid;
  border-top-width: 1px;
  margin-top: 1.15rem;
  margin-bottom: 0;
}
#container-left .drawer .drawer-menu .nav .nav-link {
  display: flex;
  align-items: center;
  padding-top: 0.55rem;
  padding-bottom: 0.5rem;
  padding-left: 2.0rem;
  padding-right: 1.3rem;
  position: relative;
  font-size: .8rem;
  line-height: 1;
  min-height: 1.8rem;
}
#container-left .drawer .drawer-menu .nav .nav-link .nav-link-icon {
  display: inline-flex;
  margin-right: 1rem;
}
#container-left .drawer .drawer-menu .nav .nav-link .nav-link-icon i.material-icons {
  font-size: 1.25rem;
}
#container-left .drawer .drawer-menu .nav .nav-link .drawer-collapse-arrow {
  display: inline-block;
  margin-left: auto;
  transition: transform 0.15s ease;
}
#container-left .drawer .drawer-menu .nav .nav-link .drawer-collapse-arrow i.material-icons {
  font-size: 1.125rem;
}
#container-left .drawer .drawer-menu .nav .nav-link.collapsed .drawer-collapse-arrow {
  transform: rotate(-90deg);
}
#container-left .drawer .drawer-menu .nav .nav-link.active {
  font-weight: bold;
}

#container-left .drawer .drawer-footer {
  height:120px;
  padding-top: .8rem;
  padding-bottom: 0rem;
  padding-left: 2.3rem;
  padding-right: 1rem;
  flex-shrink: 0;
}
#container-left .drawer-light {
  background-color: #fff;
  color: #616161;
}
#container-left .drawer-light .drawer-menu .drawer-menu-heading {
  color: var(--default-fc);
}
#container-left .drawer-light .drawer-menu .drawer-menu-divider {
  border-color: #e0e0e0;
}
#container-left .drawer-light .drawer-menu .nav-link {
  --mdc-ripple-fg-size: 0;
  --mdc-ripple-left: 0;
  --mdc-ripple-top: 0;
  --mdc-ripple-fg-scale: 1;
  --mdc-ripple-fg-translate-end: 0;
  --mdc-ripple-fg-translate-start: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  will-change: transform, opacity;
  overflow: hidden;
  color: #616161;
}
#container-left .drawer-light .drawer-menu .nav-link::before, .drawer-light .drawer-menu .nav-link::after {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  content: "";
}
#container-left .drawer-light .drawer-menu .nav-link::before {
  transition: opacity 15ms linear, background-color 15ms linear;
  z-index: 1;
}
#container-left .drawer-light .drawer-menu .nav-link::after {
  z-index: 0;
}
#container-left .drawer-light .drawer-menu .nav-link.mdc-ripple-upgraded::before {
  transform: scale(var(--mdc-ripple-fg-scale, 1));
}
#container-left .drawer-light .drawer-menu .nav-link.mdc-ripple-upgraded::after {
  top: 0;
  left: 0;
  transform: scale(0);
  transform-origin: center center;
}
#container-left .drawer-light .drawer-menu .nav-link.mdc-ripple-upgraded--unbounded::after {
  top: var(--mdc-ripple-top, 0);
  left: var(--mdc-ripple-left, 0);
}
#container-left .drawer-light .drawer-menu .nav-link.mdc-ripple-upgraded--foreground-activation::after {
  -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
          animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
}
#container-left .drawer-light .drawer-menu .nav-link.mdc-ripple-upgraded--foreground-deactivation::after {
  -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
          animation: mdc-ripple-fg-opacity-out 150ms;
  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}
#container-left .drawer-light .drawer-menu .nav-link::before, .drawer-light .drawer-menu .nav-link::after {
  top: calc(50% - 100%);
  left: calc(50% - 100%);
  width: 200%;
  height: 200%;
}
#container-left .drawer-light .drawer-menu .nav-link::before, .drawer-light .drawer-menu .nav-link::after {
  background-color: #616161;
}
#container-left .drawer-light .drawer-menu .nav-link:hover::before, .drawer-light .drawer-menu .nav-link.mdc-ripple-surface--hover::before {
  opacity: 0.1;
}
#container-left .drawer-light .drawer-menu .nav-link.mdc-ripple-upgraded--background-focused::before, .drawer-light .drawer-menu .nav-link:not(.mdc-ripple-upgraded):focus::before {
  transition-duration: 75ms;
  opacity: 0.15;
}
#container-left .drawer-light .drawer-menu .nav-link:not(.mdc-ripple-upgraded)::after {
  transition: opacity 150ms linear;
}
#container-left .drawer-light .drawer-menu .nav-link:not(.mdc-ripple-upgraded):active::after {
  transition-duration: 75ms;
  opacity: 0.2;
}
#container-left .drawer-light .drawer-menu .nav-link .drawer-collapse-arrow {
  color: #757575;
}
#container-left .drawer-light .drawer-menu .nav-link:hover {
  color: var(--default-fc);
}
#container-left .drawer-light .drawer-menu .nav-link.active {
  color: var(--main-color);
  background-color: var(--default-active-light);
}
#container-left .drawer-light .drawer-menu .nav-link.active .nav-link-icon {
  color: var(--default-active);
}
#container-left .drawer-light .drawer-footer {
  background-color: #efefef;
  color: #757575;
}
#container-left .drawer-light .caption {
  color: var(--default-fc);
}

#container-right {
  display: inline-block;
  position: absolute;
  left: var(--default-menu-width);
  right: 0;
  height: 100%;
  padding:0;
  float:left;
  z-index:1038;
}
#container-right #menu_content_tab {
  position: absolute;
  width: 100%;
  height: 33px;
  border-top: 1px solid #e0e0e0;
  display:inline-block;
  background:var(--default-bg);
  padding: 0 .5em;
}
#container-right #menu_content_tab .tab {
  z-index: 1038;
  float: right;
  position: relative;
  margin-left: -1px;
  height: 90%;
  color: var(--default-fc);
  background: #fff;
  border: 1px solid #c5c5c5;
  border-top:none;
  border-radius: 0 0 .45rem .45rem;
  font-size:.73rem;
  font-weight:500;
  cursor: pointer;
}
#container-right #menu_content_tab .tab:hover {
  background-color: rgb(90, 90, 90, 0.1);
}
#container-right #menu_content_tab .tab .tab_title {
  padding: .3rem 1.6rem .3rem .8rem;
 }
#container-right #menu_content_tab .tab-active {
  background-color: var(--default-active-light);
  border-color: transparent;
}
#container-right #menu_content_tab .tab-active:hover {
  background-color: #aae8ee;
}

#container-right #menu_content_tab .tab-close {
  position: absolute;
  top: 0px;right: 0px;bottom:0px;
  padding:.3rem;
  width: 20px;
}
#container-right #menu_content_tab .tab-close:hover{
  font-size:.82rem;
}
#container-right #menu_content_tab .fixTab .tab_title {
  padding:.3rem .8rem;
}

#page_wrap {padding:.5rem; color:var(--bs-body-color);}
#page_title {height: 38px;color:#212832;padding: 0 .3rem;}
#page_title .page-header-title{ font-size:1rem;font-weight:bold;margin-top:.35rem;}
#page_title .page-path {
  font-size: .7rem;color: #888e9f;margin-top:.65rem;
}
#page_title .page-path .p_now {
  color: var(--default-fc);
  font-weight:600;
}

#page_main{
  width:100%;
  height:100vh;
  padding:0 .5rem;
  margin:0;
}

#search_area {
  width: 100%;
  color: var(--default-fc);
  overflow: hidden;
  font-size: .79rem !important;
  padding: .3rem 0rem .5rem 0rem;
}
#search_area ul {
  float:left;
  width:100%;
  display:inline-block;
}
#search_area > ul > li {
  float:left;height:58px;
  padding-top:.3rem;
  -webkit-flex-direction:row;
　flex-direction:row;
  margin-right:10px;
}
#search_area > ul > li > * {width:100%;}
#search_area > ul > li> label{
  font-weight:500;height:19px;
  margin-bottom:1px;
  margin-left:2px; white-space:nowrap;
}
#page_main .buttons {display:flex; justify-content:space-between;}
#page_main .buttons > div > .btn {min-width:60px;font-weight:500;margin-bottom:.25rem;}
#page_main .buttons .main-buttons .btn {min-width:80px;}
#page_main .buttons > label {height:auto;margin:0;padding:0;}

@media ( max-width: 1300px ) {
#search_area .buttons {}
}


.btn{
  font-weight:400;line-height:1;color:#69707a;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;
  background-color:transparent;border:1px solid transparent;padding:.5rem 1rem .525rem 1rem;font-size:.9rem;/*border-radius:.3rem;*/
  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.btn{transition:none;font-weight:500;}
.btn:hover{text-decoration:none}
.btn-small{padding:.25rem;font-size:.7rem;line-height:1;}
.btn,.btn-icon{justify-content:center}
.btn-icon{padding:0;overflow:hidden;border-radius:100%;flex-shrink:0;height:calc((.875rem * 1) + (.875rem * 2) + (2px))!important;width:calc((.875rem * 1) + (.875rem * 2) + (2px))!important}
.btn-faicon{cursor:pointer;}
.btn-faicon:hover{opacity:.8;}
.btn-transparent-dark{color:rgba(33,40,50,.5);background-color:transparent;border-color:transparent;color:rgba(33,40,50,.5)!important}
.btn-transparent-dark:focus,.btn-transparent-dark:hover{color:rgba(33,40,50,.5);background-color:rgba(33,40,50,.1);border-color:transparent}
.btn-transparent-light{color:rgba(255, 255, 255, 0.55);background-color:transparent;border-color:transparent;color:rgba(255, 255, 255, 0.55)!important}
.btn-transparent-light:focus,.btn-transparent-light:hover{color:rgba(255, 255, 255, 0.55);background-color:rgba(255, 255, 255, 0.1);border-color:transparent}
.btn-primary{background:var(--main-color);color:#fff;border-color: var(--main-color)}
.btn-primary:hover{background:var(--main-color-dark);}
.btn-dark{background:#717171;color:#fff;border-color: #656565;}
.btn-dark:hover{background:#5a5a5a;color:#fff;border-color:transparent}
.btn-light{background:#e5e5e5;color:var(--default-fc);border-color: transparent}
.btn-light:hover{background:#e0e0e0;}
.btn-danger{background:var(--main-color-light);color:#fff;}
.btn-danger:hover{background:var(--main-color-lighter);color:#fff;}
.btn-lightshadow{background:#e0e0e0; color:var(--default-fc); box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);}
.btn-lightshadow:hover{background: #f5f5f5;}
.btn-shadow{box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);}
.shadow{box-shadow:0 .13rem 1.75rem 0 rgba(33,40,50,.15)!important}
.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}
.shadow-none{box-shadow:none!important}
.shadow-right{box-shadow:.13rem 0 1.75rem 0 rgba(33,40,50,.15)!important}
.f_red{color: #ff4848 !important;}
.f_blue{color: #0061f2 !important;}
.f_gray{color: #8b8b8b !important;}
.f_orange{color: #ff5435 !important;}
.f_link{color: #0061f2 !important; cursor:pointer;}
.f_link:hover{color: #004bbb;}
.f_green{color:#29ea1a !important}
.bg-blue{background: #0061f2 !important; color:#ffffff80!important;}
.bg-red{background: rgb(255 98 98 / 0.20) !important;}
.bg-white{background-color:#fff !important}
.bg-dark{background-color:#212529 !important}
.bg-lightgray{background:rgb(221 221 221 / 0.5) !important;}
.bg-lightwait {color: #01A251;background-color: #eef7f3;}
.bg-disabled {opacity:.55;}
.fl{float:left}
.fr{float:right}
.display_none {display:none !important}
.caption {
  font-size: 0.78rem;
  line-height: 1.25rem;
  letter-spacing: 0.0333333333em;
}
.title_cursor{cursor:default;}
.text-uppercase {text-transform: uppercase !important;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.border{border:1px solid var(--border-color);}
.border-top {border-top: 1px solid var(--border-color) !important;}
.border-bottom {border-bottom: 1px solid var(--border-color) !important;}
.border-right {border-right: 1px solid var(--border-color) !important;}
.border-dark{border-color:#616161 !important}
.datepicker{text-align:center; width:100%;padding-right: 25px;}
.datetimepicker{text-align:center; width:100%;padding-right: 25px;}
.datepicker-wrapper > * {float:left;}
.datepicker-wrapper > span {padding:.3rem;}
.datepicker-wrapper > div{position: relative;width: 115px;}
.datepicker-wrapper > div:before {
  font-family: "Font Awesome 5 Free";
  content: "\f073";
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  color: #5b5b5b;
  font-size: 1rem;
  padding-right: 0.5em;
  position: absolute;
  top: .2rem;
  right: 0;
}
.datetimepicker-wrapper > div {width: 140px;}
.picker1 {
  --dd-color1: var(--default-bg-darkgray) !important;
}
.pick-wke, .ui-datepicker-week-end, .ui-datepicker-week-end a {color: #f76400 !important;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {width:35%}
.ui-datepicker .ui-datepicker-title select{margin:1px 0 0 5px; border-radius:2px; padding:.2rem;}

.loader {
    border: 20px solid rgba(247, 247, 247, 0.8);
    border-top: 20px solid rgba(88, 185, 233, 0.9);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position:fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    display:none;
    z-index: 1051;
}
@keyframes spin {
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.alarm-bell {
    transform-origin:top;
    animation:bell 2s infinite linear;
}
@keyframes bell{
    0%, 50%{
        transform:rotate(0deg);
    }
    5%, 15%, 25%, 35%, 45% {
        transform: rotate(13deg);
    }
    10%, 20%, 30%, 40% {
        transform: rotate(-13deg);
    }
}

.border-blink{
  border:2px solid var(--default-active) !important;
  -webkit-animation:blink 1.5s ease-in-out infinite alternate;
  -moz-animation:blink 1.5s ease-in-out infinite alternate;
  animation:blink .6s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@-moz-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}

/*.bg-gradient{background-color:#0061f2!important; background-image:linear-gradient(135deg,#0061f2 0%,rgba(105,0,199,.8) 100%)!important;}
.bg-gradient{background-color:#0061f2!important; background-image:linear-gradient(135deg,rgb(27 27 27 / 0.80) 0%,rgb(70 70 70 / 0.80) 100%)!important;}*/

.me-auto {
  margin-right: auto !important;
}
.d-flex {
  display: flex !important;
}
.d-inline-flex {
  display: inline-flex !important;
}
.flex-row {
  flex-direction: row !important;
}
.flex-row-reverse {
  flex-direction: row-reverse !important;
}
.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-16, .col-18, .col, .col-auto {
  position: relative;
  width: 100%;
}
.col {
  padding-right: 15px;
}
.col-auto {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  width: auto;
  max-width: 100%;
}
.col-1 {
  -ms-flex: 0 0 8%;
  flex: 0 0 8%;
  max-width: 8%;
}
.col-2 {
  -ms-flex: 0 0 12%;
  flex: 0 0 12%;
  max-width: 12%;
}
.col-3 {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}
.col-4 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
.col-5 {
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%;
}
.col-16 {
  -ms-flex: 0 0 16%;
  flex: 0 0 16%;
  max-width: 16%;
}
.col-18 {
  -ms-flex: 0 0 18%;
  flex: 0 0 18%;
  max-width: 18%;
}
.col-date {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 10px;
}
.col-daterange{
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 250px;
}
.col-datetimerange{
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 300px;
}
@media ( max-width: 992px ) {
  /*.col-1, .col-2, .col-3, .col-4, .col-5, .col-16, .col-18, .col-date, .col-daterange, .col-datetimerange .col-datetimerange {
    -ms-flex: 0 0 48% !important;
    flex: 0 0 48% !important;
    width:48% !important;
    max-width: 48% !important;
  }*/
  #search_area ul {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 5px;
  }
  #search_area ul > *{
    width:100% !important; max-width:100%;
  }
}

@media ( max-width: 768px ) {
  #search_area ul {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
  }
  #search_area ul > *{
    width:95% !important; max-width:95%;
  }
}


.row {
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
.col-md-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}
.col-md-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.col-md-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-md-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}
.col-md-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}
.col-md-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
}

.ui-tabs{padding:0}
.ui-tabs .ui-tabs-nav {padding:0; border-radius:0px; border-bottom-right-radius:0 !important;border-bottom-left-radius:0 !important;background:rgba(0, 0, 0, .03);}
.ui-tabs .ui-tabs-nav li {margin-top:0px;font-size:.75rem;}
.ui-tabs .ui-tabs-nav li > a {color:#999;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {margin:0; padding:0;font-size:.8rem;background:#fff; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active > a {color:var(--main-color); border-left:1px solid var(--border-color); border-right:1px solid var(--border-color);}
.ui-tabs .ui-tabs-nav li:first-child > a{border-left:none;}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {padding: .5rem 1.2rem .45rem;}
.ui-tabs .ui-tabs-panel {padding: 0;}
.ui-widget.ui-widget-content {border:1px solid var(--border-color)}
.ui-tabs .ui-jqgrid-htable, .ui-tabs .ui-jqgrid-btable {border-left:0px;}
.ui-tabs .ui-jqgrid tr.jqgrow td:first-child{border-left:none;}
.ui-tabs .ui-jqgrid .ui-jqgrid-hbox {border:none;}

.form-check {
  display: block;
}
.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}

.form-check-input {
  width: 1.5em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}
.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input:active {
  filter: brightness(90%);
}
.form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #0d6efd;
  border-color: #0d6efd;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  opacity: 0.5;
}

.form-switch {
  padding-left: 2.5em;
}
.form-switch .form-check-input {
  width: 2.5em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control,
.input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus {
  z-index: 3;
}
.input-group .btn {
  position: relative;
  z-index: 2;
}
.input-group .btn:focus {
  z-index: 3;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 0.35rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  border-radius: 0.25rem;
}

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}

.input-group-lg > .form-select,
.input-group-sm > .form-select {
  padding-right: 3rem;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.form-check {
  display: block;
}
.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}

.form-check-input {
  width: 1.5em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}
.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input:active {
  filter: brightness(90%);
}
.form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #0d6efd;
  border-color: #0d6efd;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  opacity: 0.5;
}

.form-switch {
  padding-left: 2em;
}
.form-switch .form-check-input {
  width: 2.5em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
