@charset "utf-8";

:not(:defined) {
   visibility: hidden;
}

:root,
:host,
.sl-theme-light {
   --main-color-1: #34436f;
   --main-color-2: #e4e6ee;
   --accent-color-1: #0e1d48;
}

:host,
.sl-theme-dark {
   --main-color-1: black;
   --main-color-2: black;
   --accent-color-1: black;
}

html {
   background-color: var(--main-color-1);
}

.mainColor1 {
   background-color: var(--main-color-1);
}

.mainColor2 {
   background-color: var(--main-color-2);
}

.accentColor1 {
   background-color: var(--accent-color-1);
}

html {
   font: normal normal normal 12pt/1.4em Arial, 'ms ｐゴシック', 'ｍｓ pgothic', '돋움', dotum, helvetica, sans-serif;
}

/********** Header **********/

header>div {
   display: flex;
   justify-content: space-between;
}

#HeaderHamburger {
   padding: 5px;
   /* width: fit-content; */
}

#HeaderGeneral {
   padding: 5px;
   /* display: flex; */
   /* flex-direction: row; */
   /* margin-left: auto; */
   /* width: fit-content; */
}

.sl-theme-light #HeaderContainer sl-icon-button::part(base) {
   color: #fbfbfb;
}

.sl-theme-light #HeaderContainer sl-icon-button::part(base):hover {
   color: var(--sl-color-primary-600);
}

.sl-theme-light #HeaderContainer sl-icon-button::part(base):active {
   color: var(--sl-color-primary-700);
}

/********** Header **********/

/********** Nav **********/

nav {
   overflow: hidden;
   transition: all 2s ease;
   /* transition-property: all; */
   /* transition-duration: .5s; */
   /* transition-timing-function: cubic-bezier(0, 1, 0.5, 1); */
}

#navElements {
   padding: 10px 20px;
   display: flex;
   /* display: grid; */
   /* grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); */
}

#navElements .navShortcutButtons {
   margin: 10px;
   width: 58px;
   text-align: center;
   align-items: center;
   justify-content: center;
   display: flex;
}

#navElements .navShortcutButtons a {
   /* padding: 5px; */
   /* width: 58px; */
   /* height: 50px; */
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

.active {
   color: var(--sl-color-primary-600);
}

/* For pc users */
@media only screen and (min-width:800px) {
   #NavExpand {
      display: none;
   }
}

/* For mobile users */
@media only screen and (max-width:800px) {
   nav {
      max-height: 0px;
   }
}

/********** Nav **********/

/********** Main Body **********/

body {
   margin: 0;
}

#MainBody {
   margin: 0 25px;
}

.SiteNotifications {
   background-color: #fdedd8;
   text-align: justify;
   color: white;
   display: flow-root;
}

.SiteNotification {
   border-bottom: black 1px solid;
}

.SiteNotificationMessage {
   max-width: 1000px;
   margin: 0 auto;
   padding: 10px;
}

.SiteNotificationGood {
   background-color: #4a9169;
   /* color: #2b7515; */
   /* background: #dafdcb; */
   /* border: 1px solid #617c42; */
}

.SiteNotificationWarn {
   background-color: #db9c1f;
   /* color: #756e15; */
   /* background: #fffbb9; */
   /* border: 1px solid #87803e; */
}

.SiteNotificationError {
   background-color: #ce3636;
   /* color: #ba3939; */
   /* background: #ffe0e0; */
   /* border: 1px solid #a33a3a; */
}

.SiteNotificationInfo {
   background-color: #36548e;
   /* color: #204a8e; */
   /* background: #c9ddff; */
   /* border: 1px solid #4c699b; */
}

.PageTitle {
   font-size: 47px;
   font-weight: normal;
   margin: 40px 0;
   line-height: 50px;
   text-align: center;
}

.clearBoth {
   clear: both;
}

#PageBody {
   padding: 10px;
}

/* overrite the jquery ui classes */
table.dataTable .ui-state-default,
table.dataTable .ui-widget-content .ui-state-default,
table.dataTable .ui-widget-header .ui-state-default,
table.dataTable .ui-button,
html .ui-button.ui-state-disabled:hover,
table.dataTable .ui-button.ui-state-disabled:active {
   border: none;
   border-bottom: 1px solid var(--sl-color-gray-500);
   background: none;
}

table.dataTable.row-border tbody th,
table.dataTable.row-border tbody td,
table.dataTable.display tbody th,
table.dataTable.display tbody td {
   border-top: 1px solid var(--sl-color-gray-400);
}

table.dataTable.no-footer {
   border-bottom: 1px solid var(--sl-color-gray-500);
}

.FieldRequired {
   font-weight: bold;
}

.FieldOptional {
   font-style: italic;
}

.hidden {
   display: none;
}

.FormElement {
   margin-bottom: var(--sl-spacing-medium);
}

/********** Main Body **********/

/********** Footer **********/

#FooterLinks {
   /* clear: both; */
   text-align: left;
   padding: 25px;
}

footer a {
   text-decoration: none;
   /* margin: 0 auto; */
}

/********** Footer **********/

/********** Status Colors **********/

.ErrorTextColor {
   color: var(--sl-color-danger-500);
}

/* Alert Block */
.AlertMessage {
   padding: 10px;
   margin: 10px;
   color: #333;
   background: #fafafa;
   border: 1px solid #ccc;
   color: #fafafa;
}

/* Alert Colors */
.InfoAlertColor {
   /* color: #204a8e; */
   background: #36548e;
   border: 1px solid #4c699b;
}

.GoodAlertColor {
   /* color: #2b7515; */
   background: #4a9169;
   border: 1px solid #617c42;
}

.WarnAlertColor {
   /* color: #756e15; */
   background: #db9c1f;
   border: 1px solid #87803e;
}

.ErrorAlertColor {
   /* color: #ba3939; */
   background: #ce3636;
   border: 1px solid #a33a3a;
}

/********** Status Colors **********/

/********** Loading Indicator **********/

.lds-ring {
   display: inline-block;
   position: fixed;
   width: 80px;
   height: 80px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.lds-ring div {
   box-sizing: border-box;
   display: block;
   position: absolute;
   width: 64px;
   height: 64px;
   margin: 8px;
   border: 8px solid #fff;
   border-radius: 50%;
   animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
   border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
   animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
   animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
   animation-delay: -0.15s;
}

@keyframes lds-ring {
   0% {
      transform: rotate(0deg);
   }

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

/********** Loading Indicator **********/

/********** Icon Buttons **********/

/* Base style */
.iconButton {
   display: inline-block;
   text-decoration: none;
   font-size: 1.3em;
   padding: 3px;
   background-color: transparent;
   border: none;
   cursor: pointer;
   font-style: normal;
}

.iconButton:not(.fa):not(.fab):not(.fal):not(.far):not(.fas) {
   font-family: "FontAwesome";
}

.iconButton:before,
.iconButton i {
   transition: all 0.2s ease;
}

.iconButton:hover:before,
.iconButton i:hover {
   transition: all 0.2s ease;
}

/* Default Button */
.iconButtonDefault:before,
.iconButtonDefault i {
   color: #3080B0;
}

.iconButtonDefault:hover:before,
.iconButtonDefault i:hover {
   color: #90D0F0;
}

.iconButtonEye:before {
   content: "\f06e"
}

/* Edit Button */
.iconButtonEdit:before {
   color: #997733;
   content: "\f040";
}

.iconButtonEdit:hover:before {
   color: #FFBB33;
}

/* Edit Pad */
.iconButtonEditPad:before {
   color: #997733;
   content: "\f044";
}

.iconButtonEditPad:hover:before {
   color: #FFBB33;
}

/* Delete Button */
.iconButtonDelete:before {
   color: #555555;
   content: "\f1f8";
}

.iconButtonDelete:hover:before {
   color: #FF6666;
}

/* Confirm Button */
.iconButtonConfirm:before {
   color: #00BB00;
   content: "\f00c";
}

.iconButtonConfirm:hover:before {
   color: #55FF55;
}

/* Cancel Button */
.iconButtonCancel:before {
   color: #BB0000;
   content: "\f00d";
}

.iconButtonCancel:hover:before {
   color: #FF6666;
}

/* CheckIn Button */
.iconButtonCheckIn:before {
   color: #3080B0;
   content: "\f046";
}

.iconButtonCheckIn:hover:before {
   color: #90D0F0;
}

/* Disabled Button */
.iconButton.iconButtonDisabled:before,
.iconButton:disabled:before,
.iconButtonDisabled i,
.iconButton:disabled i {
   /* color: #AFAFAF; */
   color: var(--sl-color-gray-500);
   opacity: 0.3;
}

.iconButtonDisabled,
.iconButton:disabled {
   cursor: default;
   pointer-events: none;
}

/********** Icon Buttons **********/

/********** Link Buttons **********/

/* Base Style */
.linkButton,
input[type="submit"].linkButton {
   text-decoration: none;
   border: 2px solid;
   border-radius: 5px;
   padding: 5px 11px 5px 2px;
   color: white !important;
   margin: 5px 3px;
   font-size: 1em;
   line-height: 1.2;
   cursor: pointer;
   transition: all 0.5s ease;
   display: inline-block;
}

.linkButton:hover,
input[type="submit"]:hover.linkButton {
   transition: all 0.5s ease;
   border-width: 2px;
   border-style: solid;
}

.linkButton:before {
   padding: 0px 8px;
   color: white;
}

/* Default Button */
.linkButtonDefaultV1::before {
   font-family: "FontAwesome";
}

.linkButtonDefaultV2::before {
   font-family: "Font Awesome 5 Free";
}

.linkButtonDefault,
input[type="submit"].linkButtonDefault {
   background-color: #0969a5;
   border-color: #0969a5;
   padding: 5px 10px;
}

.linkButtonDefault:hover,
input[type="submit"]:hover.linkButtonDefault {
   background-color: #0c85d1;
   border-color: #0c85d1;
}

/* Save Button */
.linkButtonSave {
   background-color: #29aa29;
   border-color: #29aa29;
}

.linkButtonSave:hover {
   background-color: #23bc23;
   border-color: #23bc23;
}

.linkButtonSave:before {
   content: "\f0c7";
   font-family: "FontAwesome";
}

/* OK Button */
.linkButtonCheck {
   background-color: #29aa29;
   border-color: #29aa29;
}

.linkButtonCheck:hover {
   background-color: #23bc23;
   border-color: #23bc23;
}

.linkButtonCheck:before {
   content: "\f00c";
   font-family: "FontAwesome";
}

/* Delete Button*/
.linkButtonDelete {
   background-color: #cc2424;
   border-color: #cc2424;

}

.linkButtonDelete:hover {
   background-color: #e82929;
   border-color: #e82929;
}

.linkButtonDelete:before {
   content: "\f1f8";
   font-family: "FontAwesome";
}

/* Restore Button */
.linkButtonRestore {
   background-color: #0969a5;
   border-color: #0969a5;

}

.linkButtonRestore:hover {
   background-color: #0c85d1;
   border-color: #0c85d1;
}

.linkButtonRestore:before {
   content: "\f0e2";
   font-family: "FontAwesome";
}

/* Search Button */
.linkButtonSearch {
   background-color: #0969a5;
   border-color: #0969a5;

}

.linkButtonSearch:hover {
   background-color: #0c85d1;
   border-color: #0c85d1;
}

.linkButtonSearch:before {
   content: "\f002";
   font-family: "FontAwesome";
}

/* Clear Button */
.linkButtonClear,
.linkButtonCancel {
   background-color: #cc2424;
   border-color: #cc2424;
}

.linkButtonClear:hover,
.linkButtonCancel:hover {
   background-color: #e82929;
   border-color: #e82929;
}

.linkButtonClear:before,
.linkButtonCancel:before {
   content: "\f00d";
   font-family: "FontAwesome";
}

/* Add Button */
.linkButtonAdd,
input[type="submit"].linkButtonAdd {
   background-color: #29aa29;
   border-color: #29aa29;
}

.linkButtonAdd:hover {
   background-color: #23bc23;
   border-color: #23bc23;
}

.linkButtonAdd:before {
   content: "\f067";
   font-family: "FontAwesome";
}

/* Disabled Buttons */
.linkButtonDisabled,
input[type="submit"].linkButton.linkButtonDisabled,
button.linkButton:disabled {
   background-color: #AFAFAF;
   border-color: #AFAFAF;
   pointer-events: none;
   cursor: none;
}

/********** Link Buttons **********/
/********** Pre Load Spinner ***********/
#spinner {
   display: none;
   height: 100%;
   width: 100%;
   background-color: #80808040;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1000;
}

/*************** Site Notification *****************/
.notifyContainer {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
}

.notifyMessage {
   padding: 5px;
}