/* fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Material+Icons&display=swap');
@font-face {
  font-family: 'Harabara Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Harabara Bold'), url('../fonts/Harabara.woff') format('woff');
}

/* global overrides */
:root {
  /* shoelace */
  --sl-font-sans: 'DM Sans', sans-serif;
  --sl-tooltip-arrow-size: 0;
  --sl-z-index-tooltip: 500;
  --sl-color-primary-50: hsl(227 100% 93%);
  --sl-color-primary-100: hsl(231 100% 87%);
  --sl-color-primary-200: hsl(232 100% 81%);
  --sl-color-primary-300: hsl(232 100% 75%);
  --sl-color-primary-400: hsl(231 87% 67%);
  --sl-color-primary-500: hsl(227 66% 54%);
  --sl-color-primary-600: hsl(217 100% 37%);
  --sl-color-primary-700: hsl(222 100% 31%);
  --sl-color-primary-800: hsl(227 100% 26%);
  --sl-color-primary-900: hsl(234 100% 21%);
  --sl-color-primary-950: hsl(234 100% 16%);

  /* custom */
  --lw-font-heading: 'Harabara Bold';
  --lw-color-white: white;
}

/* shoelace light theme overrides */
/* https://github.com/shoelace-style/shoelace/blob/current/src/themes/light.css */
:root,
:host,
.sl-theme-light {
  
  /* custom */
  --lw-logo: url('../img/logo-light.svg');
  --lw-table: var(--sl-color-neutral-0);
}

/* shoelace dark theme overrides */
/* https://github.com/shoelace-style/shoelace/blob/current/src/themes/dark.css */
:host,
.sl-theme-dark {

  /* custom */
  --lw-logo: url('../img/logo-dark.svg');
  --lw-table: var(--sl-color-neutral-50);
}

/* general */
.test{border:1px solid red}
html,body{height:100%;overflow:hidden!important}
body{font-family:var(--sl-font-sans);display:flex;flex-direction:column;color:var(--sl-color-neutral-900)}

/* links */
a,a:hover,a:focus{text-decoration:none}

/* Override certain Shoelace components */
sl-checkbox::part(checked-icon),
sl-tree-item::part(checkbox__checked-icon),
sl-tree-item::part(checkbox__indeterminate-icon){color: var(--lw-color-white)}
sl-option[aria-selected="false"]::part(base){background-color:transparent}
sl-option[aria-selected="false"]::part(label),
sl-option[tabindex="0"]::part(label){color: var(--sl-color-neutral-700)}
sl-option[aria-selected="true"]::part(base){background-color: var(--sl-color-primary-600)}
sl-option[aria-selected="true"]::part(checked-icon),
sl-option[aria-selected="true"]::part(label){color: var(--lw-color-white)}

/* alignment */
.lw-align-left{text-align:left}
.lw-align-right{text-align:right}
.lw-align-center{text-align:center}

/* width & height */
.lw-h-100{height:100%}
.lw-w-100{width:100%}

/* spacing */
.lw-margin-none{margin:0!important}
.lw-margin-top-2x-small{margin-top:var(--sl-spacing-2x-small)!important}
.lw-margin-bottom-2x-small{margin-bottom:var(--sl-spacing-2x-small)!important}
.lw-margin-top-x-small{margin-top:var(--sl-spacing-x-small)!important}
.lw-margin-bottom-x-small{margin-bottom:var(--sl-spacing-x-small)!important}
.lw-margin-top-small{margin-top:var(--sl-spacing-small)!important}
.lw-margin-bottom-small{margin-bottom:var(--sl-spacing-small)!important}
.lw-margin-top-medium{margin-top:var(--sl-spacing-medium)!important}
.lw-margin-bottom-medium{margin-bottom:var(--sl-spacing-medium)!important}
.lw-margin-top-large{margin-top:var(--sl-spacing-large)!important}
.lw-margin-bottom-large{margin-bottom:var(--sl-spacing-large)!important}
.lw-margin-top-x-large{margin-top:var(--sl-spacing-x-large)!important}
.lw-margin-bottom-x-large{margin-bottom:var(--sl-spacing-x-large)!important}
.lw-margin-top-2x-large{margin-top:var(--sl-spacing-2x-large)!important}
.lw-margin-bottom-2x-large{margin-bottom:var(--sl-spacing-2x-large)!important}

/* typography */
h1,h2,h3,h4,h5,h6{font-family:var(--lw-font-heading);margin:0;letter-spacing:.03em;text-transform:capitalize}
.lw-title{margin:var(--sl-spacing-2x-small) 0 var(--sl-spacing-small)}

/* text colors */
.lw-text-muted{color:var(--sl-color-neutral-500)!important}
.lw-text-danger{color:var(--sl-color-danger-600)!important}
.lw-text-success{color:var(--sl-color-success-600)!important}
.lw-text-primary{color:var(--sl-color-primary-600)!important}

/* text sizes */
.lw-text-md{font-size:var(--sl-font-size-medium)}
.lw-text-lg{font-size:var(--sl-font-size-large)}
.lw-text-xl{font-size:var(--sl-font-size-x-large)}
.lw-text-xxl{font-size:var(--sl-font-size-2x-large)}

/* bg colors */
.lw-bg-danger-100{background-color:var(--sl-color-danger-200)!important}

/* button */
.lw-button::part(label),.lw-button::part(prefix),.lw-button::part(suffix){color:var(--lw-color-white)}
.lw-button-wide::part(base){padding:0;min-width:120px}
.lw-outline-button::part(base):hover{color:var(--lw-color-white)}
.lw-outline-button[disabled]::part(base):hover{color:initial}
.lw-wrap-button::part(base){line-height:normal;height:auto;padding:var(--sl-spacing-large) 0;border-radius:var(--sl-border-radius-large);white-space:normal}

/* button icon */
.lw-button-icon::part(label){display:flex;align-items:center}

/* radio button */
.lw-radio-button::part(button){color:var(--sl-color-neutral-700)}
.lw-radio-button::part(button):hover{background-color:transparent;border-color:var(--sl-color-neutral-300)}
.lw-radio-button::part(button--checked){color:var(--lw-color-white)}
.lw-radio-button::part(button--checked):hover{color:var(--lw-color-white);background-color:var(--sl-color-primary-600);border-color:var(--sl-color-primary-600)}

/* upload button */
.lw-upload::part(body){padding:var(--sl-spacing-2x-small)}
.lw-upload-thumbnail{width:100px;height:100px;background-size:contain;background-repeat:no-repeat;background-position:center;display:flex;align-items:center;justify-content:center;}
.lw-upload-button{position:relative;padding:0 var(--sl-spacing-medium);height:var(--sl-input-height-medium);border-radius:var(--sl-border-radius-pill);border:var(--sl-input-border-width) solid var(--sl-color-neutral-300);display:inline-flex;align-items:center;justify-content:center;font-size:var(--sl-button-font-size-medium);color:var(--sl-color-neutral-700);font-weight:var(--sl-font-weight-semibold);cursor:pointer;transition:var(--sl-transition-x-fast) background-color,var(--sl-transition-x-fast) color,var(--sl-transition-x-fast) border,var(--sl-transition-x-fast) box-shadow}
.lw-upload-button:hover,.lw-upload-button:focus{background-color:var(--sl-color-primary-50);border-color:var(--sl-color-primary-300);color:var(--sl-color-primary-700)}
.lw-upload-button input[type=file]{opacity:0;width:.1px;height:.1px;position:absolute}

/* tree */
.lw-tree-item::part(item--selected){background-color:transparent;border-color:transparent;color:var(--sl-color-neutral-1000)}
.lw-tree-buttons sl-tree-item::part(expand-button){rotate:none}
.lw-tree-lines{--indent-guide-width:1px}

/* tab */
.lw-tab[active]::part(base){color:var(--sl-color-neutral-900)}
.lw-tab-panel::part(base){padding:0}

/* form */
.lw-form{padding:var(--sl-spacing-2x-large) var(--sl-spacing-2x-large)}
.lw-form-group{margin-bottom:var(--sl-spacing-x-large)}
.lw-form-label{display:block;margin-bottom:var(--sl-spacing-2x-small)}

/* range */
.lw-range{--track-color-active: var(--sl-color-primary-600)}
.lw-range::part(tooltip){opacity:1}

/* dialog */
.lw-dialog{text-align:left}
.lw-dialog-wide{--width:50vw}

/* breadcrumb */
.lw-breadcrumb-item::part(label){cursor:default;color:var(--sl-color-neutral-500)}
.lw-breadcrumb-item-active::part(label){cursor:default;color:var(--sl-color-neutral-700)}

/* theme */
.lw-theme-fixed{position:fixed;top:1rem;right:1rem}

/* main */
.lw-main{display:flex;flex:1;min-height:0}

/* header */
.lw-header{background-color:var(--sl-color-neutral-0);padding:var(--sl-spacing-medium) 0;box-shadow:var(--sl-shadow-small);}
.lw-brand{width:195px;height:40px;display:block;background-repeat:no-repeat;background-image:var(--lw-logo)}
.lw-brand-login{width:300px;height:61px}
.lw-header-avatar::part(base){width:40px;height:40px}
.lw-header-user{max-width:250px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:var(--sl-line-height-denser)}
.lw-header-button-user::part(base){text-align:left;align-items:center;padding:0}
.lw-header-button-user::part(label){font-size:var(--sl-font-size-small);font-weight:var(--sl-font-weight-bold);color:var(--sl-color-neutral-900);line-height:var(--sl-line-height-dense);padding-right:0}

/* nav */
.lw-nav{display:flex;flex-direction:column;background-color:var(--sl-color-primary-600);width:54px;overflow:hidden}
.lw-nav-scroll{flex:1;position:relative}
.lw-nav-open .lw-nav{width:300px}
.lw-nav-expanded,.lw-nav-button-collapse,.lw-nav-open .lw-nav-collapsed,.lw-nav-open .lw-nav-button-expand{display:none!important}
.lw-nav-open .lw-nav-expanded,.lw-nav-open .lw-nav-button-collapse{display:block!important}

/* nav (button) */
.lw-nav-button{width:100%}
.lw-nav-button::part(base){background-color:transparent;border-color:transparent;justify-content:start;align-items:start;height:auto;padding:var(--sl-spacing-medium);border-radius:0;outline:0}
.lw-nav-button::part(base):hover{background-color:var(--sl-color-primary-500);border-color:var(--sl-color-primary-500)}
.lw-nav-button::part(base):focus-visible{box-shadow:none}
.lw-nav-button::part(label){color:var(--lw-color-white);white-space:normal;font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-semibold);text-align:left;line-height:var(--sl-line-height-denser)}
.lw-nav-button::part(prefix){color:var(--lw-color-white);font-size:var(--sl-font-size-medium)}
.lw-nav-button.active::part(base){border-color:var(--sl-color-primary-700);background-color:var(--sl-color-primary-700)}
.lw-nav-button-expand::part(base):hover,.lw-nav-button-collapse::part(base):hover{background-color:transparent;border-color:transparent}
.lw-nav-button-expand .lw-nav-icon{transform:rotateY(180deg)}

/* nav (button icon) */
.lw-nav-button-icon{display:block}
.lw-nav-button-icon::part(base){padding:0}
.lw-nav-button-icon::part(label){padding:0;font-size:var(--sl-font-size-large)}
.lw-nav-icon{display:block;padding:var(--sl-spacing-medium)}

/* nav (dropdown) */
.lw-nav-dropdown{display:block}

/* nav (accordion) */
.lw-nav-details::part(header){color:var(--lw-color-white);align-items:start;padding:0;border-radius:0}
.lw-nav-details::part(header):hover{background-color:var(--sl-color-primary-500);border-color:var(--sl-color-primary-500)}
.lw-nav-details::part(base){background-color:var(--sl-color-primary-600);border-color:var(--sl-color-primary-600);border-radius:0}
.lw-nav-details::part(base):hover{background-color:var(--sl-color-primary-500)}
.lw-nav-details::part(base):focus-visible{box-shadow:none}
.lw-nav-details::part(content){padding-top:0}
.lw-nav-details::part(summary-icon){padding-top:var(--sl-spacing-medium);padding-bottom:var(--sl-spacing-medium);padding-right:var(--sl-spacing-medium);rotate:none}
.lw-nav-details.active::part(header),.lw-nav-details.active::part(base){border-color:var(--sl-color-primary-700);background-color:var(--sl-color-primary-700)}

/* nav (menu) */
.lw-nav-menu{border-color:var(--sl-color-primary-600);background-color:var(--sl-color-primary-600);border-radius:var(--sl-border-radius-large);padding:var(--sl-spacing-large) 0}
.lw-nav-menu-label::part(base){color:var(--lw-color-white);font-size:var(--sl-font-size-medium);font-weight:var(--sl-font-weight-semibold);padding-bottom:var(--sl-spacing-medium);line-height:var(--sl-line-height-denser)}
.lw-nav-menu-item::part(base){white-space:normal;line-height:var(--sl-line-height-denser);padding-top:var(--sl-spacing-x-small)}
.lw-nav-menu-item::part(base):hover{border-color:transparent;background-color:transparent}
.lw-nav-menu-item::part(label){color:var(--lw-color-white);font-size:var(--sl-font-size-small)}
.lw-nav-menu-item::part(label):hover{color:var(--sl-color-primary-100)}
.lw-nav-menu-details{background-color:transparent;border-color:transparent;padding:0}

/* content */
.lw-content{flex:1;background-color:var(--sl-color-neutral-100);overflow-y:auto;padding:var(--sl-spacing-3x-large)}

/* card */
.lw-card{width:100%}
.lw-card::part(base){border:none;border-radius:0 0 var(--sl-border-radius-large) var(--sl-border-radius-large)}
.lw-card::part(body){padding:0 var(--sl-spacing-2x-small) var(--sl-spacing-2x-small)}

/* grid */
.lw-grid-paging-length{width:70px}
.lw-grid-header{position:sticky;top:-3rem;height:52px;z-index:3;padding:var(--sl-spacing-small) var(--sl-spacing-x-small) 0;background-color:var(--lw-table)}
.lw-grid-paging-length-label{color:var(--sl-color-neutral-500);display:block}

/* table */
.lw-table-fixed{table-layout:fixed}
.lw-table{width:100%!important}
.lw-table thead th{border:none;border-bottom-color:var(--sl-color-neutral-200)!important}
.lw-table.row-border tbody td{border-top:var(--sl-input-border-width) solid var(--sl-color-neutral-200)!important}
.lw-table thead .sorting::before,.lw-table thead .sorting::after{display:none!important}
.lw-table thead .sort-icon{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;padding-left:var(--sl-spacing-small)}
.lw-table thead .sorting span::before,.lw-table thead .sorting span::after{font-family:'Material Icons';font-size:var(--sl-font-size-large);width:20px;height:9px}
.lw-table thead .sorting span::before,.lw-table thead .sorting_asc_disabled span::before{content:'\e5ce';opacity:.125}
.lw-table thead .sorting_asc span::before{content:'\e5ce';opacity:.6}
.lw-table thead .sorting span::after,.lw-table thead .sorting_desc_disabled span::after{content:'\e5cf';opacity:.125}
.lw-table thead .sorting_desc span::after{content:'\e5cf';opacity:.6} 
.lw-table thead .lw-table-sort-none .sort-icon{display:none!important}

/* datatables */
table.dataTable.no-footer,.dataTables_wrapper.no-footer .dataTables_scrollBody{border:none}

/* datatables fixed header */
table.fixedHeader-floating{background-color:var(--lw-table)}
table.fixedHeader-floating.no-footer{border-bottom-width:0}
table.fixedHeader-locked{position:absolute!important;background-color:var(--lw-table)}
@media print {
table.fixedHeader-floating{display:none}
}

/* perfectscrollbar */
.ps{overflow:hidden!important;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto}
.ps__rail-x,.ps__rail-y{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;position:absolute}
.ps__rail-x{height:15px;bottom:0}
.ps__rail-y{width:15px;right:0}
.ps--active-x>.ps__rail-x,.ps--active-y>.ps__rail-y{display:block;background-color:transparent}
.ps>.ps__rail-x,.ps>.ps__rail-y{opacity:1}
.ps__thumb-x,.ps__thumb-y{background-color:var(--sl-color-neutral-400);border-radius:0;transition:background-color .2s linear;position:absolute}
.ps__thumb-x{height:5px;bottom:2px}
.ps__thumb-y{width:5px;right:2px}
.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y,.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:var(--sl-color-neutral-500)}
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none) {
.ps{overflow:auto!important}
}

a:visited { color: white; }

.lw-drawer::part(body) { display: flex; flex-direction: column; justify-content: space-evenly; }

.dt-buttons.hidden { display: none; }