@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap);

html, body {
        height: 100vh;
        width: 100vw;
        margin: 0;
        padding: 0;
        overflow: hidden; /* �T��u�� */
}
#app {
        height: 100vh;
        width: 100vw;
        overflow-y: hidden; /* �T�O���u�� */
}
.responsive-container {
        overflow: hidden;
}
@media (max-width: 1280px) { /* �]�w�T�����H�� */
#app {
            overflow-y: auto; /* �p�� 1280px �ɱҥΫ����u�� */
}
.responsive-container {
            overflow-y: auto; /* �p�� 1280px �ɱҥΫ����u�� */
}
html, body {
            overflow-y: auto; /* �p�� 1280px �ɱҥΫ����u�� */
}
}

@charset "UTF-8";
/* 1. color
========================================== */
/* 2. margin, padding
========================================== */
/* 3. shadow
========================================== */
/* 4. fonts
========================================== */
h2 {
  font-weight: 500;
}

a {
  text-decoration: none;
}

/* 1. 全域, html, body
========================================== */
:root {
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  --bgr: #262b31;
  --txt: #f2f2f2;
  --txtinvert: #262b31;
  --td: transparent;
  --yellow: #f9eead;
  --red: #e57d8d;
  --white: #f2f2f2;
  --secondary: #0068a7;
  --bgToPurple: #262b31;
  --bodybg: #262b31;
  --shadow-2: 0 4px 8px 5px rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --shadow-3: rgba(0, 0, 0, 0.5) 0px 5px 15px;
  --shadow-tr: rgba(0, 0, 0, 0.45) 0px 8px 5px -2px;
  --shadow-td: rgba(0, 0, 0, 0.45) 0px 9px 10px -9px inset;
  --topleftshadow: 8px 0 8px -4px rgba(0, 0, 0, 0.6);
  --darkshadow: drop-shadow(0 0 3px #343536);
  --themelogo: url(/img/logo.22503650.svg);
}

body {
  margin: 0;
  font-family: "Open Sans", "Noto Sans TC", "Work Sans", "Noto Sans SC", sans-serif;
  color: var(--txt);
  background-color: var(--bodybg);
  text-wrap: balance;
  overflow-x: hidden;
}

/* 2. hr
========================================== */
hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

/* 3. a
========================================== */
a {
  color: #2ec4c2;
  text-decoration: none;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

a:active {
  text-decoration: underline;
}

/* 4. table
========================================== */
table {
  caption-side: bottom;
  border-collapse: collapse;
  width: 100%;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: $middle-black;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: rgba(0, 0, 0, 0.01) middle-black;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
}

.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.table > tbody {
  vertical-align: inherit;
}

.table > thead {
  vertical-align: bottom;
}

.table-group-divider {
  border-top: 2px solid currentcolor;
}

.caption-top {
  caption-side: top;
}

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}

.table-borderless > :not(:first-child) {
  border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}

.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}

.table-active {
  --bs-table-accent-bg: var(--bs-table-active-bg);
  color: var(--bs-table-active-color);
}

.table-hover > tbody > tr:hover > * {
  transition: 0.5s;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-none {
  display: none;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-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;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

/* 6. disabled
========================================== */
.disabled-item {
  pointer-events: none;
}

/* 1. font size
========================================== */
html {
  font-size: 1rem;
}

@media only screen and (min-width: 969px) {
  html {
    font-size: 0.9375rem;
  }
}
@media only screen and (min-width: 1400px) {
  html {
    font-size: 0.9375rem;
  }
}
h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  margin: 0;
  font-weight: 500;
}

h1,
.h1 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
  h1,
  .h1 {
    font-size: 2.125rem;
  }
}
h2,
.h2 {
  font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
  h2,
  .h2 {
    font-size: 2rem;
  }
}
h3,
.h3 {
  font-size: calc(1.3rem + 0.6vw);
}

@media (min-width: 1200px) {
  h3,
  .h3 {
    font-size: 1.75rem;
  }
}
h4,
.h4 {
  font-size: calc(1.275rem + 0.3vw);
}

@media (min-width: 1200px) {
  h4,
  .h4 {
    font-size: 1.5rem;
  }
}
h5,
.h5 {
  font-size: 1.25rem;
}

h6,
.h6 {
  font-size: 1rem;
}

p {
  margin: 0;
  font-size: 1rem;
}

/* 2. text align
========================================== */
.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

/* 3. text colour
========================================== */
input[type=text]:not(.datePeriod),
input[type=password] {
  background-color: #03090A !important;
  border: 1px solid #2690a0;
  border-radius: 6px;
  padding: 12px 12px;
  letter-spacing: 1.2px;
}
input[type=text]:not(.datePeriod):focus,
input[type=password]:focus {
  outline: none;
  border: 1px solid #3DFDFE;
}

.login-form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}
.login-form-group select {
  width: 100%;
}
.login-form-group label {
  cursor: pointer;
}
.login-form-group select {
  background-color: #03090A;
  border: 1px solid #2690a0;
  border-radius: 6px;
  font-family: "Noto Sans TC", "Work Sans", "Noto Sans SC", sans-serif;
  font-size: 14px;
  line-height: 30px !important;
}
.login-form-group select option {
  padding: 12px;
}
.login-form-group .uk-select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/img/dropdownArrow.3e3e9053.svg);
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: 96.4% 50%;
  padding: 0 12px;
}
.login-form-group .uk-select:not([multiple]):not([size]) {
  height: 40px;
  vertical-align: middle;
  display: inline-block;
}
.login-form-group .uk-select:focus {
  outline: none;
  background-color: #03090A;
  border-color: #3DFDFE;
}

.login-form-area .uk-checkbox {
  display: inline-block;
  height: 16px;
  width: 16px;
  overflow: hidden;
  margin-top: -4px;
  margin-left: 0;
  margin-bottom: 0;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border: 1.5px solid #2690a0;
  transition: 0.2s ease-in-out;
  transition-property: background-color, border;
  box-sizing: border-box;
  border-radius: 3px;
}
.login-form-area .uk-checkbox:checked {
  background-image: url(/img/checked.44f3b580.svg);
  background-color: #3DFDFE;
  border-color: transparent;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #434346;
  -webkit-text-fill-color: #F1F1F1;
  -webkit-box-shadow: 0 0 0px 1000px #1B1B1C inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

body:has(.mainVisual-section) {
  margin: auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #03090a;
}
body:has(.mainVisual-section) main {
  width: 100%;
  min-height: calc(100vh - 46px - 26px);
}
@media only screen and (max-width: 768px) {
  body:has(.mainVisual-section) {
    grid-template-columns: 1fr;
  }
}

body:has(.platformVisual-section) {
  margin: auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #03090a;
}
body:has(.platformVisual-section) .country-lang-group {
  display: none;
}
body:has(.platformVisual-section) main {
  width: 100%;
  min-height: calc(100vh - 46px - 26px);
}

.login-section,
.mainVisual-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 768px) {
  .login-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 55vh;
    padding-top: 5vh;
    z-index: 1;
  }
  .mainVisual-section {
    height: 35vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}
.login-section .login-form-area {
  width: 50%;
}
.login-section .login-form-area .login-title {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.login-section .login-form-area .login-title img {
  width: 100px;
}
.login-section .login-form-area form {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  row-gap: 24px;
  font-size: 18px;
}
.login-section .login-form-area form .pw-div {
  position: relative;
}
.login-section .login-form-area form .pw-div .eyeicon-div {
  position: absolute;
  top: 39px;
  right: 3%;
}
.login-section .login-form-area form .pw-div input[type=checkbox] {
  display: none;
}
.login-section .login-form-area form .pw-div .eyeicon {
  cursor: pointer;
  padding-left: 20px;
  margin-left: -20px;
  background: url(/img/visibilityOff.9b336f06.svg) no-repeat center center;
  background-size: 20px 20px;
}
.login-section .login-form-area form .pw-div input[type=checkbox]:checked + .eyeicon {
  background-image: url(/img/visible.d8bbe42e.svg);
}
.login-section .login-form-area form .staySignedIn-div {
  margin-top: -12px;
}
.login-section .login-form-area form .staySignedIn-div .pwPattern {
  font-size: 14px;
}
.login-section .login-form-area form .staySignedIn-div #staySignedIn {
  margin-right: 6px;
}
.login-section .login-form-area form .language-div,
.login-section .login-form-area form .country-lang-div {
  margin-bottom: 12px;
}
.login-section .login-form-area form .btn-submit {
  margin-bottom: 46px;
  padding: 12px;
  cursor: pointer;
  font-family: "Noto Sans TC", "Work Sans", "Noto Sans SC", sans-serif;
  font-size: 16px;
  font-weight: 700;
  background-color: #3DFDFE;
  color: black;
  border: none;
  border-radius: 6px;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
}
.login-section .login-form-area form .backToLogin {
  color: #C0C3C5;
}

.mainVisual-section {
  background-image: url(/img/login.64f65da3.svg);
  background-repeat: no-repeat;
  background-position: center;
}
@media only screen and (min-width: 1920px) {
  .mainVisual-section {
    background-size: 70%;
  }
}

.platformVisual-section .platformVisual-inside {
  max-height: 100vh;
  position: relative;
  transition: 0.2s all linear;
}
.platformVisual-section .platformVisual-inside .platformVisual-image {
  width: 800px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media only screen and (max-width: 768px) {
  .platformVisual-section .platformVisual-inside .platformVisual-image {
    width: 100vw;
  }
}
.platformVisual-section .platformVisual-inside .login-title {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-bottom: 12px;
  border-radius: 6px;
  color: #f2f2f2;
  padding: 4px 8px;
}
.platformVisual-section .platformVisual-inside .login-title img {
  width: 80px;
}
@media (max-width: 576px) {
  .platformVisual-section .platformVisual-inside .login-title {
    width: 60px;
  }
}
.platformVisual-section .platformVisual-inside .platform-pin-div {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translate(-50%, -50%);
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .pin {
  width: 6vw;
  height: 6vw;
  background-repeat: no-repeat;
  background-position: center;
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 55px;
  border: 1px solid #3DFDFE;
  border-radius: 100%;
  z-index: -1;
}
@media (max-width: 576px) {
  .platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .pin::after {
    width: 90px;
    height: 35px;
  }
}
@media (max-width: 1280px) {
  .platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .pin {
    width: 10vw;
    height: 10vw;
  }
}
@media (max-width: 768px) {
  .platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .pin {
    width: 12vw;
    height: 12vw;
  }
}
@media (max-width: 576px) {
  .platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .pin {
    width: 17vw;
    height: 17vw;
  }
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .dataPlatformIcon {
  background-image: url(/img/platform_%E6%95%B8%E6%93%9A%E5%B9%B3%E5%8F%B0.a7688fea.svg);
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .dataPlatformIcon:hover {
  background-image: url(/img/platform_%E6%95%B8%E6%93%9A%E5%B9%B3%E5%8F%B0hover.57240304.svg);
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .solutionPlatformIcon {
  background-image: url(/img/platform_%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%A1%88%E5%B9%B3%E5%8F%B0.a855e5fe.svg);
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .solutionPlatformIcon:hover {
  background-image: url(/img/platform_%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%A1%88%E5%B9%B3%E5%8F%B0hover.de00d00c.svg);
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .pointsPlatformIcon {
  background-image: url(/img/platform_%E9%BB%9E%E6%95%B8%E7%87%9F%E9%81%8B%E5%B9%B3%E5%8F%B0.a1c0c770.svg);
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .pointsPlatformIcon:hover {
  background-image: url(/img/platform_%E9%BB%9E%E6%95%B8%E7%87%9F%E9%81%8B%E5%B9%B3%E5%8F%B0hover.cc92cf52.svg);
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .maintainPlatformIcon {
  background-image: url(/img/platform_%E7%B6%AD%E8%AD%B7%E7%AE%A1%E7%90%86%E5%B9%B3%E5%8F%B0.5ad41ead.svg);
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .maintainPlatformIcon:hover {
  background-image: url(/img/platform_%E7%B6%AD%E8%AD%B7%E7%AE%A1%E7%90%86%E5%B9%B3%E5%8F%B0hover.bf0e8ca6.svg);
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .othersPlatformIcon {
  background-image: url(/img/platform_%E5%85%B6%E5%AE%83%E7%AE%A1%E7%90%86%E5%B9%B3%E5%8F%B0.ec3bf68d.svg);
}
.platformVisual-section .platformVisual-inside .platform-pin-div a:not(.platform-name) .othersPlatformIcon:hover {
  background-image: url(/img/platform_%E5%85%B6%E5%AE%83%E7%AE%A1%E7%90%86%E5%B9%B3%E5%8F%B0hover.c9c13576.svg);
}
.platformVisual-section .platformVisual-inside .platform-pin-div .platform-name {
  margin-bottom: 12px;
  background-color: #03090A;
  border: 1px solid #606060;
  border-radius: 6px;
  color: #f2f2f2;
  text-align: center;
  padding: 4px;
  font-size: 0.8rem;
}
@media (max-width: 1024px) {
  .platformVisual-section .platformVisual-inside .platform-pin-div .platform-name {
    padding-bottom: 4px;
  }
}
@media (max-width: 576px) {
  .platformVisual-section .platformVisual-inside .platform-pin-div .platform-name {
    max-width: 120px;
    margin-bottom: 6px;
  }
}
.platformVisual-section .platformVisual-inside .noPermission {
  filter: grayscale(90%);
}
.platformVisual-section .platformVisual-inside .noPermission a {
  cursor: default;
}
.platformVisual-section .country-lang-group {
  position: absolute;
  top: 0;
  right: 0;
}
.platformVisual-section .country-lang-group .country-div {
  position: relative;
  width: 150px;
  display: inline-flex;
}
.platformVisual-section .country-lang-group .country-div::after {
  content: "";
  position: absolute;
  top: 12px;
  right: -6px;
  width: 1px;
  height: 18px;
  background-color: #3DFDFE;
}
.platformVisual-section .country-lang-group .country-div .main-menu {
  background-color: transparent !important;
  background-image: none !important;
  border: none;
  text-align: right;
  cursor: pointer;
}
.platformVisual-section .country-lang-group .country-lang-div {
  width: 80px;
  display: inline-flex;
}
.platformVisual-section .country-lang-group .country-lang-div .sub-menu {
  background-color: transparent !important;
  background-image: none !important;
  border: none;
  cursor: pointer;
}

.loginFooter {
  position: fixed;
  bottom: 0;
  height: auto;
  width: 100%;
}
.loginFooter .eng-copyright {
  margin-left: 20px;
}
.loginFooter .ch-copyright {
  margin-right: 20px;
}
.loginFooter .subfooter {
  background-color: transparent;
}
.loginFooter .subfooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 997;
  font-weight: 400;
  height: 26px;
}
@media only screen and (max-width: 768px) {
  .loginFooter .subfooter {
    flex-direction: column;
    justify-content: center;
    padding: 8px 0;
    line-height: 1.4em;
    height: -moz-fit-content;
    height: fit-content;
  }
  .loginFooter .eng-copyright,
  .loginFooter .ch-copyright {
    margin-left: 0;
    margin-right: 0;
  }
}
@media only screen and (max-width: 576px) {
  .loginFooter .eng-copyright,
  .loginFooter .ch-copyright {
    margin-left: 0;
    margin-right: 0;
  }
}

/* 您可以在此處保留原來的 CSS */

   /* @media only screen and (min-width: 1920px) {
        .mainVisual-section {
            background-size: 70%;
        }
    }*/
input[type="password"][data-v-8a57262a],
    input[type="text"][data-v-8a57262a] {
        border: 1px solid #2690a0; /* 你想要的邊框 */
}
input[type="password"][data-v-8a57262a]:focus,
        input[type="text"][data-v-8a57262a]:focus {
            border: 1px solid #3DFDFE; /* 你想要的邊框 */
}



/* Add the CSS from the original HTML here */
.login-section[data-v-f7b1e21e] {
        /* Original CSS styles */
}
.mainVisual-section[data-v-f7b1e21e] {
        /* Styles here if needed */
}




@charset "UTF-8";
/* 1. color
========================================== */
/* 2. margin, padding
========================================== */
/* 3. shadow
========================================== */
/* 4. fonts
========================================== */
h2 {
  font-weight: 500;
}

a {
  text-decoration: none;
}

/* 1. 全域, html, body
========================================== */
:root {
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  --bgr: #262b31;
  --txt: #f2f2f2;
  --txtinvert: #262b31;
  --td: transparent;
  --yellow: #f9eead;
  --red: #e57d8d;
  --white: #f2f2f2;
  --secondary: #0068a7;
  --bgToPurple: #262b31;
  --bodybg: #262b31;
  --shadow-2: 0 4px 8px 5px rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --shadow-3: rgba(0, 0, 0, 0.5) 0px 5px 15px;
  --shadow-tr: rgba(0, 0, 0, 0.45) 0px 8px 5px -2px;
  --shadow-td: rgba(0, 0, 0, 0.45) 0px 9px 10px -9px inset;
  --topleftshadow: 8px 0 8px -4px rgba(0, 0, 0, 0.6);
  --darkshadow: drop-shadow(0 0 3px #343536);
  --themelogo: url(/img/logo.22503650.svg);
}

body {
  margin: 0;
  font-family: "Open Sans", "Noto Sans TC", "Work Sans", "Noto Sans SC", sans-serif;
  color: var(--txt);
  background-color: var(--bodybg);
  text-wrap: balance;
  overflow-x: hidden;
}

/* 2. hr
========================================== */
hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

/* 3. a
========================================== */
a {
  color: #2ec4c2;
  text-decoration: none;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

a:active {
  text-decoration: underline;
}

/* 4. table
========================================== */
table {
  caption-side: bottom;
  border-collapse: collapse;
  width: 100%;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: $middle-black;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: rgba(0, 0, 0, 0.01) middle-black;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
}

.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.table > tbody {
  vertical-align: inherit;
}

.table > thead {
  vertical-align: bottom;
}

.table-group-divider {
  border-top: 2px solid currentcolor;
}

.caption-top {
  caption-side: top;
}

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}

.table-borderless > :not(:first-child) {
  border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}

.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}

.table-active {
  --bs-table-accent-bg: var(--bs-table-active-bg);
  color: var(--bs-table-active-color);
}

.table-hover > tbody > tr:hover > * {
  transition: 0.5s;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-none {
  display: none;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-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;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

/* 6. disabled
========================================== */
.disabled-item {
  pointer-events: none;
}

/* 1. font size
========================================== */
html {
  font-size: 1rem;
}

@media only screen and (min-width: 969px) {
  html {
    font-size: 0.9375rem;
  }
}
@media only screen and (min-width: 1400px) {
  html {
    font-size: 0.9375rem;
  }
}
h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  margin: 0;
  font-weight: 500;
}

h1,
.h1 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
  h1,
  .h1 {
    font-size: 2.125rem;
  }
}
h2,
.h2 {
  font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
  h2,
  .h2 {
    font-size: 2rem;
  }
}
h3,
.h3 {
  font-size: calc(1.3rem + 0.6vw);
}

@media (min-width: 1200px) {
  h3,
  .h3 {
    font-size: 1.75rem;
  }
}
h4,
.h4 {
  font-size: calc(1.275rem + 0.3vw);
}

@media (min-width: 1200px) {
  h4,
  .h4 {
    font-size: 1.5rem;
  }
}
h5,
.h5 {
  font-size: 1.25rem;
}

h6,
.h6 {
  font-size: 1rem;
}

p {
  margin: 0;
  font-size: 1rem;
}

/* 2. text align
========================================== */
.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

/* 3. text colour
========================================== */
input[type=password],
input[type=date],
input[type=time],
input[type=datetime-local],
select,
.form-bg {
  background-color: #1c2024;
  border: 1px solid #1c2024;
  border-radius: 6px;
  padding: 12px 12px;
  transition: 0.5s border ease;
}
input[type=password]:focus,
input[type=date]:focus,
input[type=time]:focus,
input[type=datetime-local]:focus,
select:focus,
.form-bg:focus {
  border: 1px solid #2690a0;
}

.uk-input, .modal .form-a .form-group .form-control {
  background-color: #1c2024;
  border: 1px solid #1c2024;
  border-radius: 6px;
  transition: 0.5s border ease;
}
.uk-input:focus, .modal .form-a .form-group .form-control:focus {
  border: 1px solid #2690a0;
}

textarea.uk-input, .modal .form-a .form-group textarea.form-control {
  height: auto;
}

input[type=date],
input[type=time],
input[type=datetime-local] {
  font-family: monospace;
}

.color-chips-select {
  background-color: #1c2024;
  border: 1px solid #1c2024;
  border-radius: 6px;
  padding: 12px 12px;
  transition: 0.5s border ease;
}

.form-group {
  display: flex;
  flex-direction: column;
}
.form-group .form-label {
  width: 100%;
  margin-bottom: 6px;
}
.form-group input {
  padding: 8px;
}
.form-group input[type=date] {
  margin-bottom: 6px;
}
.form-group select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/img/dropdownArrow.3e3e9053.svg);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: 95.2% 50%;
}
.form-group input[type=checkbox] {
  margin-right: 6px;
}

.button-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #434346;
  -webkit-text-fill-color: #F1F1F1;
  -webkit-box-shadow: 0 0 0px 1000px #1B1B1C inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

.checkbox-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkbox-chip {
  display: inline-block;
}

.custom-checkbox {
  display: none;
}

.checkbox-chip-label {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 20px;
  background-color: #1c2024;
  cursor: pointer;
  transition: background-color 0.3s;
}

.checkbox-square {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 3px;
  background-color: transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.checkbox-square::after {
  content: "";
  width: 6px;
  height: 10px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  border-color: transparent;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.3s;
}

.vehicleAllColor .checkbox-square {
  color: #262b31;
  width: -moz-fit-content;
  width: fit-content;
}
.vehicleAllColor .checkbox-square::after {
  border: none;
  width: 0;
  height: 0;
}

.vehicleAllColor {
  background-color: #f2f2f2;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .vehicleAllColor {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .vehicleAllColor .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .vehicleAllColor, #vehicleOrange:checked + .vehicleAllColor, #vehicleGold:checked + .vehicleAllColor, #vehicleYellow:checked + .vehicleAllColor, #vehicleGrey:checked + .vehicleAllColor, #vehicleSilver:checked + .vehicleAllColor, #vehicleWhite:checked + .vehicleAllColor {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .vehicleAllColor .checkbox-square::after, #vehicleOrange:checked + .vehicleAllColor .checkbox-square::after, #vehicleGold:checked + .vehicleAllColor .checkbox-square::after, #vehicleYellow:checked + .vehicleAllColor .checkbox-square::after, #vehicleGrey:checked + .vehicleAllColor .checkbox-square::after, #vehicleSilver:checked + .vehicleAllColor .checkbox-square::after, #vehicleWhite:checked + .vehicleAllColor .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .vehicleAllColor .checkbox-square::after {
  border: none;
  opacity: 0;
}

.black {
  background-color: #181818;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .black {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .black .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .black, #vehicleOrange:checked + .black, #vehicleGold:checked + .black, #vehicleYellow:checked + .black, #vehicleGrey:checked + .black, #vehicleSilver:checked + .black, #vehicleWhite:checked + .black {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .black .checkbox-square::after, #vehicleOrange:checked + .black .checkbox-square::after, #vehicleGold:checked + .black .checkbox-square::after, #vehicleYellow:checked + .black .checkbox-square::after, #vehicleGrey:checked + .black .checkbox-square::after, #vehicleSilver:checked + .black .checkbox-square::after, #vehicleWhite:checked + .black .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .black .checkbox-square::after {
  border: none;
  opacity: 0;
}

.blue {
  background-color: #339af0;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .blue {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .blue .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .blue, #vehicleOrange:checked + .blue, #vehicleGold:checked + .blue, #vehicleYellow:checked + .blue, #vehicleGrey:checked + .blue, #vehicleSilver:checked + .blue, #vehicleWhite:checked + .blue {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .blue .checkbox-square::after, #vehicleOrange:checked + .blue .checkbox-square::after, #vehicleGold:checked + .blue .checkbox-square::after, #vehicleYellow:checked + .blue .checkbox-square::after, #vehicleGrey:checked + .blue .checkbox-square::after, #vehicleSilver:checked + .blue .checkbox-square::after, #vehicleWhite:checked + .blue .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .blue .checkbox-square::after {
  border: none;
  opacity: 0;
}
.blue span {
  color: #333;
}

.brown {
  background-color: #a0522d;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .brown {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .brown .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .brown, #vehicleOrange:checked + .brown, #vehicleGold:checked + .brown, #vehicleYellow:checked + .brown, #vehicleGrey:checked + .brown, #vehicleSilver:checked + .brown, #vehicleWhite:checked + .brown {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .brown .checkbox-square::after, #vehicleOrange:checked + .brown .checkbox-square::after, #vehicleGold:checked + .brown .checkbox-square::after, #vehicleYellow:checked + .brown .checkbox-square::after, #vehicleGrey:checked + .brown .checkbox-square::after, #vehicleSilver:checked + .brown .checkbox-square::after, #vehicleWhite:checked + .brown .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .brown .checkbox-square::after {
  border: none;
  opacity: 0;
}

.gold {
  background-color: #e6b803;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .gold {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .gold .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .gold, #vehicleOrange:checked + .gold, #vehicleGold:checked + .gold, #vehicleYellow:checked + .gold, #vehicleGrey:checked + .gold, #vehicleSilver:checked + .gold, #vehicleWhite:checked + .gold {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .gold .checkbox-square::after, #vehicleOrange:checked + .gold .checkbox-square::after, #vehicleGold:checked + .gold .checkbox-square::after, #vehicleYellow:checked + .gold .checkbox-square::after, #vehicleGrey:checked + .gold .checkbox-square::after, #vehicleSilver:checked + .gold .checkbox-square::after, #vehicleWhite:checked + .gold .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .gold .checkbox-square::after {
  border: none;
  opacity: 0;
}
.gold span {
  color: #333;
}

.green {
  background-color: #28a745;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .green {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .green .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .green, #vehicleOrange:checked + .green, #vehicleGold:checked + .green, #vehicleYellow:checked + .green, #vehicleGrey:checked + .green, #vehicleSilver:checked + .green, #vehicleWhite:checked + .green {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .green .checkbox-square::after, #vehicleOrange:checked + .green .checkbox-square::after, #vehicleGold:checked + .green .checkbox-square::after, #vehicleYellow:checked + .green .checkbox-square::after, #vehicleGrey:checked + .green .checkbox-square::after, #vehicleSilver:checked + .green .checkbox-square::after, #vehicleWhite:checked + .green .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .green .checkbox-square::after {
  border: none;
  opacity: 0;
}

.grey {
  background-color: #a0a0a0;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .grey {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .grey .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .grey, #vehicleOrange:checked + .grey, #vehicleGold:checked + .grey, #vehicleYellow:checked + .grey, #vehicleGrey:checked + .grey, #vehicleSilver:checked + .grey, #vehicleWhite:checked + .grey {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .grey .checkbox-square::after, #vehicleOrange:checked + .grey .checkbox-square::after, #vehicleGold:checked + .grey .checkbox-square::after, #vehicleYellow:checked + .grey .checkbox-square::after, #vehicleGrey:checked + .grey .checkbox-square::after, #vehicleSilver:checked + .grey .checkbox-square::after, #vehicleWhite:checked + .grey .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .grey .checkbox-square::after {
  border: none;
  opacity: 0;
}
.grey span {
  color: #333;
}

.maroon {
  background-color: #8d0000;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .maroon {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .maroon .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .maroon, #vehicleOrange:checked + .maroon, #vehicleGold:checked + .maroon, #vehicleYellow:checked + .maroon, #vehicleGrey:checked + .maroon, #vehicleSilver:checked + .maroon, #vehicleWhite:checked + .maroon {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .maroon .checkbox-square::after, #vehicleOrange:checked + .maroon .checkbox-square::after, #vehicleGold:checked + .maroon .checkbox-square::after, #vehicleYellow:checked + .maroon .checkbox-square::after, #vehicleGrey:checked + .maroon .checkbox-square::after, #vehicleSilver:checked + .maroon .checkbox-square::after, #vehicleWhite:checked + .maroon .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .maroon .checkbox-square::after {
  border: none;
  opacity: 0;
}

.orange {
  background-color: #ff8c00;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .orange {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .orange .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .orange, #vehicleOrange:checked + .orange, #vehicleGold:checked + .orange, #vehicleYellow:checked + .orange, #vehicleGrey:checked + .orange, #vehicleSilver:checked + .orange, #vehicleWhite:checked + .orange {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .orange .checkbox-square::after, #vehicleOrange:checked + .orange .checkbox-square::after, #vehicleGold:checked + .orange .checkbox-square::after, #vehicleYellow:checked + .orange .checkbox-square::after, #vehicleGrey:checked + .orange .checkbox-square::after, #vehicleSilver:checked + .orange .checkbox-square::after, #vehicleWhite:checked + .orange .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .orange .checkbox-square::after {
  border: none;
  opacity: 0;
}
.orange span {
  color: #333;
}

.red {
  background-color: #cc0b0e;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .red {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .red .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .red, #vehicleOrange:checked + .red, #vehicleGold:checked + .red, #vehicleYellow:checked + .red, #vehicleGrey:checked + .red, #vehicleSilver:checked + .red, #vehicleWhite:checked + .red {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .red .checkbox-square::after, #vehicleOrange:checked + .red .checkbox-square::after, #vehicleGold:checked + .red .checkbox-square::after, #vehicleYellow:checked + .red .checkbox-square::after, #vehicleGrey:checked + .red .checkbox-square::after, #vehicleSilver:checked + .red .checkbox-square::after, #vehicleWhite:checked + .red .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .red .checkbox-square::after {
  border: none;
  opacity: 0;
}

.silver {
  background-color: #cfcfcf;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .silver {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .silver .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .silver, #vehicleOrange:checked + .silver, #vehicleGold:checked + .silver, #vehicleYellow:checked + .silver, #vehicleGrey:checked + .silver, #vehicleSilver:checked + .silver, #vehicleWhite:checked + .silver {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .silver .checkbox-square::after, #vehicleOrange:checked + .silver .checkbox-square::after, #vehicleGold:checked + .silver .checkbox-square::after, #vehicleYellow:checked + .silver .checkbox-square::after, #vehicleGrey:checked + .silver .checkbox-square::after, #vehicleSilver:checked + .silver .checkbox-square::after, #vehicleWhite:checked + .silver .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .silver .checkbox-square::after {
  border: none;
  opacity: 0;
}
.silver span {
  color: #333;
}

.white {
  background-color: #fdfdfd;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .white {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .white .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .white, #vehicleOrange:checked + .white, #vehicleGold:checked + .white, #vehicleYellow:checked + .white, #vehicleGrey:checked + .white, #vehicleSilver:checked + .white, #vehicleWhite:checked + .white {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .white .checkbox-square::after, #vehicleOrange:checked + .white .checkbox-square::after, #vehicleGold:checked + .white .checkbox-square::after, #vehicleYellow:checked + .white .checkbox-square::after, #vehicleGrey:checked + .white .checkbox-square::after, #vehicleSilver:checked + .white .checkbox-square::after, #vehicleWhite:checked + .white .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .white .checkbox-square::after {
  border: none;
  opacity: 0;
}
.white span {
  color: #333;
}

.yellow {
  background-color: #ffeb3b;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .yellow {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .yellow .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .yellow, #vehicleOrange:checked + .yellow, #vehicleGold:checked + .yellow, #vehicleYellow:checked + .yellow, #vehicleGrey:checked + .yellow, #vehicleSilver:checked + .yellow, #vehicleWhite:checked + .yellow {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .yellow .checkbox-square::after, #vehicleOrange:checked + .yellow .checkbox-square::after, #vehicleGold:checked + .yellow .checkbox-square::after, #vehicleYellow:checked + .yellow .checkbox-square::after, #vehicleGrey:checked + .yellow .checkbox-square::after, #vehicleSilver:checked + .yellow .checkbox-square::after, #vehicleWhite:checked + .yellow .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .yellow .checkbox-square::after {
  border: none;
  opacity: 0;
}
.yellow span {
  color: #333;
}

/* 2. validation
========================================== */
.main-section .valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #9ae8ce;
}
.main-section .valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: rgba(25, 135, 84, 0.9);
  border-radius: 0.375rem;
}
.main-section .was-validated :valid ~ .valid-feedback,
.main-section .was-validated :valid ~ .valid-tooltip,
.main-section .is-valid ~ .valid-feedback,
.main-section .is-valid ~ .valid-tooltip {
  display: block;
}
.main-section .was-validated .form-control:valid,
.main-section .form-control.is-valid {
  border-color: #9ae8ce;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%239ae8ce%27 d=%27M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.main-section .was-validated .form-control:valid:focus,
.main-section .form-control.is-valid:focus {
  border-color: #9ae8ce;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
.main-section .was-validated textarea.form-control:valid,
.main-section textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
.main-section .was-validated .form-select:valid,
.main-section .form-select.is-valid {
  border-color: #9ae8ce;
}
.main-section .was-validated .form-select:valid:not([multiple]):not([size]),
.main-section .was-validated .form-select:valid:not([multiple])[size="1"],
.main-section .form-select.is-valid:not([multiple]):not([size]),
.main-section .form-select.is-valid:not([multiple])[size="1"] {
  padding-right: 4.125rem;
  background-image: url("data:image/svg+xml;utf8,<svg fill=%27white%27 height=%2724%27 viewBox=%270 0 24 24%27 width=%2724%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M7 10l5 5 5-5z%27/><path d=%27M0 0h24v24H0z%27 fill=%27none%27/></svg>"), url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%239ae8ce%27 d=%27M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/%3e%3c/svg%3e");
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 32px 24px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.main-section .was-validated .form-select:valid:focus,
.main-section .form-select.is-valid:focus {
  border-color: #9ae8ce;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
.main-section .was-validated .form-control-color:valid,
.main-section .form-control-color.is-valid {
  width: calc(3rem + 1.5em + 0.75rem);
}
.main-section .was-validated .form-check-input:valid,
.main-section .form-check-input.is-valid {
  border-color: #9ae8ce;
}
.main-section .was-validated .form-check-input:valid:checked,
.main-section .form-check-input.is-valid:checked {
  background-color: #9ae8ce;
}
.main-section .was-validated .form-check-input:valid:focus,
.main-section .form-check-input.is-valid:focus {
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
.main-section .was-validated .form-check-input:valid ~ .form-check-label,
.main-section .form-check-input.is-valid ~ .form-check-label {
  color: #9ae8ce;
}
.main-section .was-validated .radio-group:has(input[type=radio][name=repairRequestMethod]:checked),
.main-section .radio-group.is-valid {
  border-color: #9ae8ce;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
.main-section .was-validated .radio-group:has(input[type=radio][name=repairRequestMethod]:checked) input[type=radio][name=repairRequestMethod]:checked,
.main-section input[type=radio][name=repairRequestMethod].is-valid {
  border-color: #9ae8ce;
  accent-color: #9ae8ce;
}
.main-section .form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}
.main-section .was-validated .input-group .form-control:valid,
.main-section .input-group .form-control.is-valid,
.main-section .was-validated .input-group .form-select:valid,
.main-section .input-group .form-select.is-valid {
  z-index: 1;
}
.main-section .was-validated .input-group .form-control:valid:focus,
.main-section .input-group .form-control.is-valid:focus,
.main-section .was-validated .input-group .form-select:valid:focus,
.main-section .input-group .form-select.is-valid:focus {
  z-index: 3;
}
.main-section .invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #eb9e9e;
}
.main-section .invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 0.375rem;
}
.main-section .was-validated :invalid ~ .invalid-feedback,
.main-section .was-validated :invalid ~ .invalid-tooltip,
.main-section .is-invalid ~ .invalid-feedback,
.main-section .is-invalid ~ .invalid-tooltip {
  display: block;
}
.main-section .was-validated .form-control:invalid,
.main-section .form-control.is-invalid {
  border-color: #eb9e9e;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23eb9e9e%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23eb9e9e%27 stroke=%27none%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.main-section .was-validated .form-control:invalid:focus,
.main-section .form-control.is-invalid:focus {
  border-color: #eb9e9e;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.main-section .was-validated textarea.form-control:invalid,
.main-section textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}
.main-section .was-validated .form-select:invalid,
.main-section .form-select.is-invalid {
  border-color: #eb9e9e;
}
.main-section .was-validated .form-select:invalid:not([multiple]):not([size]),
.main-section .was-validated .form-select:invalid:not([multiple])[size="1"],
.main-section .form-select.is-invalid:not([multiple]):not([size]),
.main-section .form-select.is-invalid:not([multiple])[size="1"] {
  padding-right: 4.125rem;
  background-image: url("data:image/svg+xml;utf8,<svg fill=%27white%27 height=%2724%27 viewBox=%270 0 24 24%27 width=%2724%27 xmlns=%27http://www.w3.org/2000/svg%27><path d=%27M7 10l5 5 5-5z%27/><path d=%27M0 0h24v24H0z%27 fill=%27none%27/></svg>"), url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23eb9e9e%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23eb9e9e%27 stroke=%27none%27/%3e%3c/svg%3e");
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 32px 24px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.main-section .was-validated .form-select:invalid:focus,
.main-section .form-select.is-invalid:focus {
  border-color: #eb9e9e;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.main-section .was-validated .form-control-color:invalid,
.main-section .form-control-color.is-invalid {
  width: calc(3rem + 1.5em + 0.75rem);
}
.main-section .was-validated .form-check-input:invalid,
.main-section .form-check-input.is-invalid {
  border-color: #eb9e9e;
}
.main-section .was-validated .form-check-input:invalid:checked,
.main-section .form-check-input.is-invalid:checked {
  background-color: #eb9e9e;
}
.main-section .was-validated .form-check-input:invalid:focus,
.main-section .form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.main-section .was-validated .form-check-input:invalid ~ .form-check-label,
.main-section .form-check-input.is-invalid ~ .form-check-label {
  color: #eb9e9e;
}
.main-section .was-validated .radio-group:has(input[type=radio][name=repairRequestMethod][required]):not(:has(input[type=radio][name=repairRequestMethod]:checked)),
.main-section .radio-group.is-invalid {
  border-color: #eb9e9e;
}
.main-section .was-validated .radio-group:has(input[type=radio][name=repairRequestMethod][required]):not(:has(input[type=radio][name=repairRequestMethod]:checked)) input[type=radio][name=repairRequestMethod],
.main-section input[type=radio][name=repairRequestMethod].is-invalid {
  border-color: #eb9e9e;
  accent-color: #eb9e9e;
}
.main-section .form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: 0.5em;
}
.main-section .was-validated .input-group .form-control:invalid,
.main-section .input-group .form-control.is-invalid,
.main-section .was-validated .input-group .form-select:invalid,
.main-section .input-group .form-select.is-invalid {
  z-index: 2;
}
.main-section .was-validated .input-group .form-control:invalid:focus,
.main-section .input-group .form-control.is-invalid:focus,
.main-section .was-validated .input-group .form-select:invalid:focus,
.main-section .input-group .form-select.is-invalid:focus {
  z-index: 3;
}
.main-section .check-password-feedback {
  font-size: 0.875rem;
  color: #eb9e9e;
}

.two-row-inputs {
  margin-left: auto;
}
.two-row-inputs div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.two-row-inputs div:not(:last-child) {
  margin-bottom: 12px;
}

.form-group:has(input[type=password], input[type=text]) {
  position: relative;
}
.form-group:has(input[type=password], input[type=text]) .col-8 {
  position: relative;
}
.form-group:has(input[type=password], input[type=text]) .showHidePassword {
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
}

.login-info-section .form-group:has(input[type=password], input[type=text]) .showHidePassword {
  top: 50%;
  transform: translateY(-50%);
}

/* 1. basic
========================================== */
button,
.btn {
  padding: 12px;
  cursor: pointer;
  border-style: none;
  border-radius: 6px;
  transition: 0.2s all ease;
}

/* 2. button style
========================================== */
.btn-submit {
  font-family: "Noto Sans TC", "Work Sans", "Noto Sans SC", sans-serif;
  font-size: 16px;
  font-weight: 700;
  background-color: #3DFDFE;
  color: black;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
}

.btn-blue {
  background-color: #29b3b0;
  color: black;
  font-weight: 600;
}
.btn-blue:hover {
  background-color: #2ec4c2;
}

.details-btn {
  background-color: #29b3b0;
  color: black;
  font-weight: 600;
}
.details-btn:hover {
  background-color: #2ec4c2;
}

.secondary-btn, html.dark div.dt-buttons > .dt-button {
  background-color: #315a6d;
  color: #f2f2f2;
}
.secondary-btn:hover, html.dark div.dt-buttons > .dt-button:hover {
  background-color: #35657a;
}

.tab-btn {
  background-color: #262b31;
  border-radius: 0;
  color: #C0C3C5;
  border-bottom: 1px solid #262b31;
}
.tab-btn:hover {
  background-color: #161a1f;
}
.tab-btn.active {
  color: #5dceff;
  border-bottom: 1px solid #5dceff;
}

.quick-select-btn {
  border: unset;
  color: #C0C3C5;
  background-color: #333b44;
}
.quick-select-btn:hover {
  background-color: #333f4d;
}
.quick-select-btn:active {
  background-color: #2d3a49;
}

.btn-reset {
  border: 1px solid #4d4d4d;
  background-color: inherit;
}
.btn-reset:hover {
  background-color: #383841;
}

.collapse-btn {
  cursor: pointer;
  width: 24px;
  height: 100%;
  background-color: #353c44;
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.collapse-btn i {
  margin-right: 0 !important;
  background-color: #29b3b0;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rwd-scroll-to-top-btn {
  display: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: #353c44;
  position: fixed;
  bottom: 8px;
  right: 0px;
  z-index: 10010;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
@media only screen and (max-width: 768px) {
  .rwd-scroll-to-top-btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.action-btn {
  background-color: #1750a3;
  font-weight: 600;
}
.action-btn:hover {
  background-color: #0068a7;
}
.action-btn:disabled {
  background-color: #4d4d4d;
  cursor: not-allowed;
}

.btn-red {
  background-color: #854954;
  border: none;
}
.btn-red:hover {
  background-color: #a14354;
}

div.dt-buttons {
  margin-bottom: 4px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

div.dt-buttons > .dt-button {
  cursor: pointer;
  border-style: none !important;
  border-radius: 6px;
  transition: 0.2s all ease;
  margin: 0 0 !important;
  align-self: stretch;
}
div.dt-buttons > .dt-button:active {
  border-style: none !important;
}

div.dt-buttons > .dt-button,
.tool-area .btn,
.tool-area button {
  font-size: 14px;
  font-family: "Open Sans", "Noto Sans TC", "Work Sans", "Noto Sans SC", sans-serif;
  padding: 8px 12px;
}
div.dt-buttons > .dt-button i,
.tool-area .btn i,
.tool-area button i {
  width: 15px;
  height: 15px;
}

.tool-area {
  margin-bottom: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.tool-area .import-files-btn input[type=file] {
  display: none;
}
.tool-area .import-files-btn img {
  margin-right: 12px;
}
.tool-area .notice {
  padding: 0 12px;
}
.tool-area i {
  margin-right: 6px;
}
@media only screen and (max-width: 576px) {
  .tool-area button,
  .tool-area .import-files-btn {
    width: 100%;
    margin-bottom: 12px;
  }
  .tool-area .import-files-btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

button i {
  margin-right: 6px;
}

table td .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-radius: 0.375rem;
  --bs-pagination-disabled-color: #6c757d;
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: #dee2e6;
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: #009ae8;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  background-color: rgba(0, 154, 232, 0.3);
}

.page-link:focus {
  z-index: 3;
  outline: 0;
  text-decoration: none;
}

.page-link.active,
.active > .page-link {
  z-index: 3;
  background-color: #009ae8;
}

.page-link.disabled,
.disabled > .page-link {
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
}

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}

.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}

.page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}

.pagination-lg {
  --bs-pagination-padding-x: 1.5rem;
  --bs-pagination-padding-y: 0.75rem;
  --bs-pagination-font-size: 1.25rem;
  --bs-pagination-border-radius: 0.5rem;
}

.pagination-sm {
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0.25rem;
  --bs-pagination-font-size: 0.875rem;
  --bs-pagination-border-radius: 0.25rem;
}

.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: #f2f2f2;
  --bs-modal-bg: #262b31;
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: 1px;
  --bs-modal-border-radius: 0.5rem;
  --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-modal-inner-border-radius: calc(0.5rem - 1px);
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-width: 1px;
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: #262b31;
  --bs-modal-footer-border-color: #606060;
  --bs-modal-footer-border-width: 1px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.show .modal-dialog {
  transform: none;
}

.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20000;
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-footer-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
  margin: calc(var(--bs-modal-header-padding-y) * -0.5) calc(var(--bs-modal-header-padding-x) * -0.5) calc(var(--bs-modal-header-padding-y) * -0.5) auto;
  font-size: 24px;
  font-family: Tahoma, Verdana, sans-serif;
  background-color: transparent;
}
.modal-header .btn-close::before {
  content: "×";
}

.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}

.modal-footer > * {
  margin: calc(var(--bs-modal-footer-gap) * 0.5);
}

@media (min-width: 576px) {
  .modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
  .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-right: auto;
    margin-left: auto;
  }
  .modal-sm {
    --bs-modal-width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: 800px;
  }
}
@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 1140px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  border-radius: 0;
}

.modal-fullscreen .modal-body {
  overflow-y: auto;
}

@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header,
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header,
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header,
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header,
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-header,
  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
}
.modal.fade {
  z-index: 10000000 !important;
}

.popover {
  --bs-popover-zindex: 1070;
  --bs-popover-max-width: 276px;
  --bs-popover-font-size: 0.875rem;
  --bs-popover-bg: #fff;
  --bs-popover-border-width: 1px;
  --bs-popover-border-color: var(--bs-border-color-translucent);
  --bs-popover-border-radius: 0.5rem;
  --bs-popover-inner-border-radius: calc(0.5rem - 1px);
  --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-popover-header-padding-x: 1rem;
  --bs-popover-header-padding-y: 0.5rem;
  --bs-popover-header-font-size: 1rem;
  --bs-popover-header-color: var(--bs-heading-color);
  --bs-popover-header-bg: #f0f0f0;
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: 1rem;
  --bs-popover-body-color: #212529;
  --bs-popover-arrow-width: 1rem;
  --bs-popover-arrow-height: 0.5rem;
  --bs-popover-arrow-border: var(--bs-popover-border-color);
  z-index: var(--bs-popover-zindex);
  display: block;
  max-width: var(--bs-popover-max-width);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-popover-font-size);
  word-wrap: break-word;
  background-color: var(--bs-popover-bg);
  background-clip: padding-box;
  border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-radius: var(--bs-popover-border-radius);
}

.popover .popover-arrow {
  display: block;
  width: var(--bs-popover-arrow-width);
  height: var(--bs-popover-arrow-height);
}

.popover .popover-arrow::before,
.popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}

.bs-popover-top > .popover-arrow,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
  bottom: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
}

.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before,
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
}

.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
  bottom: 0;
  border-top-color: var(--bs-popover-arrow-border);
}

.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  bottom: var(--bs-popover-border-width);
  border-top-color: var(--bs-popover-bg);
}

/* rtl:begin:ignore */
.bs-popover-end > .popover-arrow,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
  left: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}

.bs-popover-end > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before,
.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
}

.bs-popover-end > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
  left: 0;
  border-right-color: var(--bs-popover-arrow-border);
}

.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  left: var(--bs-popover-border-width);
  border-right-color: var(--bs-popover-bg);
}

/* rtl:end:ignore */
.bs-popover-bottom > .popover-arrow,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
  top: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
}

.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before,
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  border-width: 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
}

.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
  top: 0;
  border-bottom-color: var(--bs-popover-arrow-border);
}

.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  top: var(--bs-popover-border-width);
  border-bottom-color: var(--bs-popover-bg);
}

.bs-popover-bottom .popover-header::before,
.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--bs-popover-arrow-width);
  margin-left: calc(var(--bs-popover-arrow-width) * -0.5);
  content: "";
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg);
}

/* rtl:begin:ignore */
.bs-popover-start > .popover-arrow,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
  right: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}

.bs-popover-start > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before,
.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
}

.bs-popover-start > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
  right: 0;
  border-left-color: var(--bs-popover-arrow-border);
}

.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  right: var(--bs-popover-border-width);
  border-left-color: var(--bs-popover-bg);
}

/* rtl:end:ignore */
.popover-header {
  padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
  margin-bottom: 0;
  font-size: var(--bs-popover-header-font-size);
  color: var(--bs-popover-header-color);
  background-color: var(--bs-popover-header-bg);
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-top-left-radius: var(--bs-popover-inner-border-radius);
  border-top-right-radius: var(--bs-popover-inner-border-radius);
}

.popover-header:empty {
  display: none;
}

.popover-body {
  padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
  color: var(--bs-popover-body-color);
}

.tooltip {
  --bs-tooltip-zindex: 1080;
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-margin: ;
  --bs-tooltip-font-size: 0.875rem;
  --bs-tooltip-color: #fff;
  --bs-tooltip-bg: #000;
  --bs-tooltip-border-radius: 0.375rem;
  --bs-tooltip-opacity: 0.9;
  --bs-tooltip-arrow-width: 0.8rem;
  --bs-tooltip-arrow-height: 0.4rem;
  z-index: var(--bs-tooltip-zindex);
  display: block;
  padding: var(--bs-tooltip-arrow-height);
  margin: var(--bs-tooltip-margin);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-tooltip-font-size);
  word-wrap: break-word;
  opacity: 0;
}

.tooltip.show {
  opacity: var(--bs-tooltip-opacity);
}

.tooltip .tooltip-arrow {
  display: block;
  width: var(--bs-tooltip-arrow-width);
  height: var(--bs-tooltip-arrow-height);
}

.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
  bottom: 0;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
  border-top-color: var(--bs-tooltip-bg);
}

/* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
  left: 0;
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
  border-right-color: var(--bs-tooltip-bg);
}

/* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
  top: 0;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
  border-bottom-color: var(--bs-tooltip-bg);
}

/* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
  right: 0;
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
  border-left-color: var(--bs-tooltip-bg);
}

/* rtl:end:ignore */
.tooltip-inner {
  max-width: var(--bs-tooltip-max-width);
  padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
  color: var(--bs-tooltip-color);
  text-align: center;
  background-color: var(--bs-tooltip-bg);
  border-radius: var(--bs-tooltip-border-radius);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 46px;
  padding: 0 1%;
  background-color: var(--bgr);
  position: sticky;
  top: 0;
  left: 0;
  box-shadow: var(--shadow-2);
  z-index: 10000;
}
header.scroll {
  box-shadow: var(--shadow-2);
}
@media only screen and (max-width: 1280px) {
  header a:has(.logo) {
    padding-left: 56px;
  }
}
header .logo {
  width: 40px;
  height: 40px;
  margin: 4px;
  background-image: var(--themelogo);
  background-repeat: no-repeat;
}
header .header-subdiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
header .country-lang-signOut-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
header .country-lang-group select {
  border-radius: 6px;
  font-family: "Noto Sans TC", "Work Sans", "Noto Sans SC", sans-serif;
  font-size: 14px;
  line-height: 30px !important;
  color: #C0C3C5 !important;
}
header .country-lang-group select:hover {
  color: #3DFDFE !important;
}
header .country-lang-group select option {
  background-color: var(--bgr);
  color: var(--txt) !important;
  padding: 12px;
}
header .country-lang-group .country-div {
  position: relative;
  width: 150px;
  display: inline-flex;
}
header .country-lang-group .country-div::after {
  content: "";
  position: absolute;
  top: 12px;
  right: -6px;
  width: 1px;
  height: 18px;
  background-color: #3DFDFE;
}
header .country-lang-group .country-div .main-menu {
  background-color: transparent !important;
  background-image: none !important;
  border: none;
  text-align: right;
  cursor: pointer;
}
header .country-lang-group .country-lang-div {
  min-width: 80px;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-flex;
}
header .country-lang-group .country-lang-div .sub-menu {
  background-color: transparent !important;
  background-image: none !important;
  border: none;
  cursor: pointer;
}
header .signOut-group {
  margin-left: 12px;
  font-size: 14px;
}
header .signOut-group button {
  background-color: transparent;
  color: #C0C3C5;
}
header .signOut-group button:hover {
  color: #3DFDFE;
}
header .signOut-group i {
  margin-right: 6px;
}
header .signOut-group a {
  color: #C0C3C5;
  text-decoration: none;
  width: 100%;
  padding: 8px 12px;
}
header .signOut-group a:hover {
  color: #3DFDFE;
}
header .signOut-group .signOut-dropdown {
  width: -moz-fit-content;
  width: fit-content;
  min-width: unset;
  top: 45.5px !important;
}
header .signOut-group .signOut-dropdown div {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
header .signOut-group .signOut-dropdown div .divider {
  width: 100%;
  border: 1px solid #606060;
  margin: 5px 0;
}

/* header nav  */
header nav {
  width: 60vw;
  font-size: 14px;
}
header nav .uk-subnav {
  margin-bottom: 0;
}
header nav .uk-subnav .topPageLayer i {
  margin-right: 6px;
}
header nav .uk-subnav .topPageLayer[aria-expanded=true] {
  color: #3DFDFE;
  position: relative;
}
header nav .uk-subnav .topPageLayer[aria-expanded=true]::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 36px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
header nav .uk-subnav a {
  color: #f2f2f2;
}
header nav .uk-subnav a:hover {
  color: #3DFDFE;
}
header nav .uk-subnav .uk-nav a {
  font-weight: 300;
  padding: 8px 12px;
}
header nav .uk-subnav .uk-nav a:hover {
  color: #3DFDFE;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
header nav .uk-subnav .uk-nav a.inactive-link:hover {
  color: #3DFDFE;
  background-color: transparent;
}
header nav .uk-subnav .uk-nav-header {
  padding: 0;
}
header nav .uk-subnav .uk-nav-header i {
  margin-right: 6px;
  margin-left: 0;
  padding: 0;
}
header nav .uk-subnav .uk-nav-header i.link-to-other-country {
  margin-left: auto !important;
}
header nav .uk-subnav .uk-nav-header:not(:has(a)) {
  padding: 8px 12px;
}
header nav .uk-subnav .uk-nav-header:not(:first-child) {
  margin-top: 0px;
}
@media only screen and (max-width: 1280px) {
  header nav {
    display: none;
  }
}
header .activePage {
  color: #3DFDFE !important;
}
header .uk-dropdown-nav .uk-nav-divider {
  border: 1px solid #606060;
}
header .uk-dropbar {
  background: inherit !important;
  color: inherit !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.65);
}
header .uk-dropdown-dropbar {
  padding: 25px 0;
}

/* side bar  */
.primary-nav {
  display: none;
  position: fixed;
  z-index: 10010;
  left: -96vw;
}
@media only screen and (max-width: 1280px) {
  .primary-nav {
    display: block;
  }
}
.primary-nav .open-panel {
  border: none;
  padding: 0;
}
.primary-nav .hamburger {
  background: var(--bgr);
  position: relative;
  text-align: center;
  padding: 8px 0;
  width: 50px;
  height: 46px;
  left: 96vw;
  top: 0;
  z-index: 10030;
  cursor: pointer;
  transition: none;
}
.primary-nav .hamburger:before {
  content: "☰";
  /* hamburger icon */
  display: block;
  color: var(--white);
  line-height: 32px;
  font-size: 18px;
  font-weight: 600;
}
.primary-nav .topleftshadow {
  background: var(--bgr);
  position: absolute;
  text-align: center;
  padding: 13px 0;
  width: 50px;
  height: 46px;
  left: 210px;
  top: 0;
  z-index: 9980;
  border-style: none;
  box-shadow: var(--topleftshadow);
}
.primary-nav .menu {
  position: relative;
  margin-bottom: 3em;
  box-shadow: var(--topleftshadow);
}
.primary-nav .menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav .menu ul .space {
  height: 280px;
  margin-bottom: 60px;
}
.primary-nav .menu ul li {
  position: relative;
}
.primary-nav .menu ul li a,
.primary-nav .menu ul li label {
  display: block;
  white-space: nowrap;
  padding: 1em 1.5em 1em 1.5em;
  font-size: 16px;
  font-weight: var(--weight300to400);
  text-decoration: none !important;
  position: relative;
  color: var(--txt);
  cursor: pointer;
}
.primary-nav .menu ul li a .downarrow,
.primary-nav .menu ul li label .downarrow {
  color: var(--white);
  padding-top: 8px;
}
.primary-nav .menu ul li a:hover,
.primary-nav .menu ul li label:hover {
  background-color: #2690a0;
  color: #f2f2f2;
}
.primary-nav .menu ul li label {
  margin-bottom: 0;
  display: block;
}
.primary-nav .menu ul li .subLayerPage {
  padding-left: 3em;
  font-size: 14px;
}
.primary-nav .menu ul .activeNavli {
  color: #3DFDFE;
  font-weight: 500;
}
.primary-nav .menu ul .activeNavli a,
.primary-nav .menu ul .activeNavli label {
  color: #3DFDFE;
  font-weight: 500;
}
.primary-nav .menu ul .activeNavli .downarrow {
  color: #3DFDFE;
}
.primary-nav .menu ul .activeNavli .icon {
  color: #3DFDFE;
}
.primary-nav .menu ul .icon {
  position: absolute;
  top: 18px;
  right: 8px;
  pointer-events: none;
  width: 24px;
  height: 24px;
  color: white;
}
.primary-nav .menu ul .changethemegroup {
  display: none;
  cursor: default;
}
.primary-nav .menu ul .changethemegroup .changetheme {
  border-top: 1px solid var(--secondary);
  cursor: default;
}
.primary-nav .menu .menu-dropdown {
  top: 0;
  overflow-y: auto;
}
.primary-nav .menu .menu-dropdown .turnArrow {
  margin-top: -6px;
}
.primary-nav .menu .menu-dropdown li.sideSpacing {
  margin-bottom: 60px;
}
.primary-nav .menu input[type=checkbox] {
  display: none;
}
.primary-nav .menu input#menu[type=checkbox] {
  display: none;
}
.primary-nav .menu .sub-menu-dropdown {
  display: none;
}
.primary-nav .menu,
.primary-nav .menu a,
.primary-nav label {
  text-decoration: none !important;
  position: relative;
}
.primary-nav #menu:checked + ul.menu-dropdown {
  left: 0;
  animation: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}
.primary-nav .sub-menu-checkbox:checked + ul.sub-menu-dropdown {
  display: block !important;
  animation: grow 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}
.primary-nav {
  /*opacity*/
}
@keyframes grow {
  0% {
    display: none;
    opacity: 0;
  }
  50% {
    display: block;
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.primary-nav ul.menu-dropdown li.top-menu-hasdropdown ul.sub-menu-dropdown li.menu-hasdropdown:has(a[href="mapVideo.html"]) {
  display: none;
}

.menu {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 96vw;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 9990;
  background-color: var(--bgr);
}
.menu:hover {
  position: absolute;
  top: 0;
  transform: translate3d(210px, 0, 0);
  border-top: 46px solid var(--bgr);
}
.menu .overflow-container {
  position: relative;
  height: calc(100vh - 46px) !important;
  overflow-y: auto;
}
.menu .overflow-container::-webkit-scrollbar {
  height: 4px;
  width: 1px;
  border: 1px solid var(--bgr);
}
.menu .overflow-container {
  border-top: 46px solid var(--bgr);
  z-index: 9988;
  display: block;
}
.menu .overflow-container .downarrow {
  background: transparent;
  position: absolute;
  right: 50px;
  top: 9px;
  color: var(--white);
  width: 24px;
  height: 24px;
  text-align: center;
  display: block;
}
.menu .overflow-container .sub-menu-dropdown {
  background-color: rgba(0, 0, 0, 0.2);
}

.openNav .hamburger {
  box-shadow: 0 0 0 0;
}

.openNav .hamburger:before {
  content: "✕";
  /* close icon */
  display: block;
  color: var(--white);
  line-height: 32px;
  font-size: 16px;
  font-weight: 600;
}

.openNav .menu {
  border-top: 46px solid var(--bgr);
  position: absolute;
  transform: translate3d(96vw, 0, 0);
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}
.openNav .menu:hover {
  position: absolute;
  transform: translate3d(96vw, 0, 0);
  border-top: 46px solid var(--bgr);
}

footer {
  width: 100%;
  clear: both;
  height: 26px;
}
footer .subfooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bgr);
  color: var(--txt);
  box-shadow: var(--shadow-2);
  position: relative;
  z-index: 997;
  font-size: 14px;
  font-weight: var(--weight300to400);
  height: 26px;
}
footer .subfooter .eng-copyright {
  margin-left: 20px;
}
footer .subfooter .ch-copyright {
  margin-right: 20px;
}
@media only screen and (max-width: 768px) {
  footer .subfooter {
    flex-direction: column;
    justify-content: center;
    padding: 8px 0;
    line-height: 1.4em;
    height: -moz-fit-content;
    height: fit-content;
  }
  footer .subfooter .eng-copyright,
  footer .subfooter .ch-copyright {
    margin-left: 0;
    margin-right: 0;
  }
}
@media only screen and (max-width: 768px) {
  footer {
    height: -moz-fit-content;
    height: fit-content;
  }
}

.breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 4px 12px;
  box-shadow: var(--shadow-tr);
  color: #C0C3C5;
  margin-bottom: 12px;
  height: 24px;
}
.breadcrumb .page-position a {
  margin: 0 6px;
}
.breadcrumb .page-position a:first-child {
  margin-left: 0;
}
.breadcrumb .page-position a:last-child {
  margin-right: 0;
}
.breadcrumb li {
  list-style-type: none;
}
.breadcrumb li::after {
  content: ">";
  margin: 0 12px;
}
.breadcrumb li:last-child::after {
  content: "";
  margin: 0;
}
.breadcrumb li a {
  text-decoration: none;
  color: inherit;
}
@media only screen and (max-width: 768px) {
  .breadcrumb {
    height: -moz-fit-content;
    height: fit-content;
    flex-wrap: wrap;
  }
}

.LocationTree-section {
  position: relative;
}
.LocationTree-section .treeview-wrapper {
  padding: 12px 12px;
  height: calc(100vh - 46px - 26px - 24px - 24px - 12px - 28px);
  max-height: 100%;
  overflow-y: scroll;
}
.LocationTree-section .treeview-wrapper ul {
  list-style: none;
}
.LocationTree-section .treeview-wrapper #treeview {
  margin: 0;
  padding: 0;
}
.LocationTree-section .treeview-wrapper #treeview .uk-radio {
  margin-left: 2px;
  margin-right: 4px;
}
.LocationTree-section .treeview-wrapper #treeview .secondLayer {
  padding: 8px;
}
.LocationTree-section .treeview-wrapper #treeview .secondLayer li {
  padding: 8px;
}
.LocationTree-section .treeview-wrapper #treeview .secondLayer li:first-child {
  margin-top: 8px;
}
.LocationTree-section .treeview-wrapper #treeview .thirdLayer ul li:last-child {
  margin-bottom: -8px !important;
}
.LocationTree-section .treeview-wrapper .caret {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.LocationTree-section .treeview-wrapper .caret::before {
  content: "▶";
  color: rgb(185, 185, 185);
  display: inline-block;
  margin-right: 5px;
}
.LocationTree-section .treeview-wrapper .caret-down::before {
  transform: rotate(90deg);
}
.LocationTree-section .treeview-wrapper .nested {
  display: none;
}
.LocationTree-section .treeview-wrapper .active {
  display: block;
}
.LocationTree-section .location-collapse-btn {
  position: absolute;
  top: 0;
  right: 0;
}
@media only screen and (max-width: 1280px) {
  .LocationTree-section .location-collapse-btn {
    display: none;
  }
}
@media only screen and (max-width: 1280px) {
  .LocationTree-section .treeview-wrapper {
    height: 20.4vh;
  }
}
@media only screen and (max-width: 576px) {
  .LocationTree-section .treeview-wrapper {
    height: 37.4vh;
  }
}

/* 1. ================ location section collapse and expand */
.section-title-text,
.treeview-wrapper {
  transition: visibility 0s linear 0.3s;
  opacity: 1;
}

.LocationTree-section.collapsed {
  margin-right: -12px;
  z-index: 1;
}
.LocationTree-section.collapsed .section-title {
  box-shadow: none;
}
.LocationTree-section.collapsed .section-title-text {
  visibility: hidden !important;
  opacity: 0;
  transition: visibility 0s linear 0.3s;
}
.LocationTree-section.collapsed .treeview-wrapper {
  visibility: hidden !important;
  max-height: 70vh !important;
  overflow: hidden !important;
  opacity: 0;
  transition: visibility 0s linear 0.3s;
}

/* 2. ================ map location section collapse and expand */
.sections-group.map-location-group-collapsed {
  grid-template-columns: 12px calc(100% - 24px + 12px) !important;
}

/* 3. ================ dashboard location section collapse and expand */
.sections-group.dashboard-location-group-collapsed {
  grid-template-columns: 12px calc(100% - 24px + 12px) !important;
}

/* 4. ================ search location section collapse and expand */
.sections-group.search-location-group-collapsed {
  grid-template-columns: 12px 20% calc(80% - 24px + 12px) !important;
}

:root {
  --slider-thumb-size: 0px;
  --slider-height: 40px;
  --slider-width: 100%;
  --slider-track-thickness: 100%;
  --color-track: #606060;
}

.vertical-range-slider-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.vertical-range-slider-container .vertical-range-slider {
  position: relative;
  width: var(--slider-width);
  height: var(--slider-height);
  background: var(--color-track);
  border-radius: 0px 0px 6px 6px;
}
.vertical-range-slider-container .vertical-range-slider.humidity {
  width: 18px;
}
.vertical-range-slider-container .vertical-range-slider.temperature {
  width: 14px;
  border: 4px solid #f2f2f2;
  background: #f2f2f2;
}
.vertical-range-slider-container .vertical-range-slider.temperature::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translate(-50%);
  width: 25px;
  height: 25px;
  border-radius: 25px;
  background: inherit;
}
.vertical-range-slider-container .vertical-range-slider.electricity {
  width: 1.2vw;
  border-radius: 3px;
  outline: 2px solid #ce9f1f;
  background: #464233;
}
.vertical-range-slider-container .vertical-range-slider.electricity::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translate(-50%);
  width: 0.5vw;
  height: 4px;
  border-radius: 2px;
  background: #ce9f1f;
}
.vertical-range-slider-container .vertical-range-slider.electricity .fa-bolt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #dbdbdb;
  font-size: 1vw;
}
.vertical-range-slider-container .vertical-range-slider .vertical-range-slider__bar {
  position: absolute;
  left: calc(var(--slider-width) / 2 - var(--slider-track-thickness) / 2);
  bottom: 0;
  width: var(--slider-track-thickness);
  background: #979797;
  border-radius: 0px 0px 6px 6px;
  pointer-events: none;
  animation: goUp 1s ease;
}
@keyframes goUp {
  0% {
    height: 0;
  }
}
.vertical-range-slider-container input[type=range][orient=vertical] {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  writing-mode: vertical-lr;
  direction: rtl;
  pointer-events: none;
}
.vertical-range-slider-container input[type=range][orient=vertical]::-webkit-slider-runnable-track,
.vertical-range-slider-container input[type=range][orient=vertical]::-moz-range-track,
.vertical-range-slider-container input[type=range][orient=vertical]::-ms-track {
  border: none;
  background: var(--color-track);
  width: var(--slider-track-thickness);
  border-radius: 0px 0px 6px 6px;
}
.vertical-range-slider-container input[type=range][orient=vertical]::-webkit-slider-thumb,
.vertical-range-slider-container input[type=range][orient=vertical]::-moz-range-thumb,
.vertical-range-slider-container input[type=range][orient=vertical]::-ms-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  opacity: 0;
}

.half-doughnut-slider {
  position: relative;
  width: 200px;
  /* Adjust size as needed */
  height: 100px;
  margin: 20px;
}
.half-doughnut-slider .half-doughnut {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 100px 100px 0 0;
  /* Only top half visible */
  background-color: #009ae8;
}
.half-doughnut-slider .half-doughnut__fillClip {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color-track);
  transform-origin: bottom center;
  /* Set rotation point */
  transform: rotate(0deg);
  transition: transform 0.3s ease;
  /* Smooth transition */
}
.half-doughnut-slider .half-doughnut__cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #262b31;
  transform-origin: bottom center;
  transform: scale(0.9);
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}
.half-doughnut-slider .half-doughnut__value {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  font-weight: bold;
}
.half-doughnut-slider .humidity-slider {
  position: absolute;
  bottom: 0;
  left: 24%;
  width: 50%;
  pointer-events: none;
  opacity: 0;
}

.toast {
  --bs-toast-zindex: 1090;
  --bs-toast-padding-x: 0.75rem;
  --bs-toast-padding-y: 0.5rem;
  --bs-toast-spacing: 1.5rem;
  --bs-toast-max-width: 350px;
  --bs-toast-font-size: 0.875rem;
  --bs-toast-color: ;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-border-radius: 0.375rem;
  --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-border-width: var(--bs-border-width);
  --bs-toast-border-color: var(--bs-border-color-translucent);
  --bs-toast-border-radius: var(--bs-border-radius);
  --bs-toast-box-shadow: var(--bs-box-shadow);
  --bs-toast-header-color: var(--bs-secondary-color);
  --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-header-border-color: var(--bs-border-color-translucent);
  width: var(--bs-toast-max-width);
  max-width: 100%;
  font-size: var(--bs-toast-font-size);
  color: var(--bs-toast-color);
  pointer-events: auto;
  background-color: var(--bs-toast-bg);
  background-clip: padding-box;
  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
  box-shadow: var(--bs-toast-box-shadow);
  border-radius: var(--bs-toast-border-radius);
}

.toast.showing {
  opacity: 0;
}

.toast:not(.show) {
  display: none;
}

.toast-container {
  --bs-toast-zindex: 1090;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: var(--bs-toast-zindex);
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}

.toast-container > :not(:last-child) {
  margin-bottom: var(--bs-toast-spacing);
}

.toast-header {
  display: flex;
  align-items: center;
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
  color: var(--bs-toast-header-color);
  background-color: var(--bs-toast-header-bg);
  background-clip: padding-box;
  border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
  border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
  border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
}

.toast-header .btn-close {
  position: absolute;
  top: 8px;
  right: 8px;
}

.toast-body {
  padding: var(--bs-toast-padding-x);
  word-wrap: break-word;
}

.toast-header .btn-close {
  --bs-btn-close-color: #000;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23000%27%3e%3cpath d=%27M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z%27/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-opacity);
}
.toast-header .btn-close:hover {
  color: var(--bs-btn-close-color);
  text-decoration: none;
  opacity: var(--bs-btn-close-hover-opacity);
}
.toast-header .btn-close:focus {
  outline: 0;
  box-shadow: var(--bs-btn-close-focus-shadow);
  opacity: var(--bs-btn-close-focus-opacity);
}
.toast-header .btn-close:disabled, .toast-header .btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: var(--bs-btn-close-disabled-opacity);
}
.toast-header .btn-close-white {
  filter: var(--bs-btn-close-white-filter);
}
.toast-header [data-bs-theme=dark] .btn-close {
  filter: var(--bs-btn-close-white-filter);
}

/* 1. container
========================================== */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 96%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm,
  .container {
    max-width: 97%;
  }
}
@media (min-width: 768px) {
  .container-md,
  .container-sm,
  .container {
    max-width: 96%;
  }
}
@media (min-width: 992px) {
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 98%;
  }
}
@media (min-width: 1200px) {
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 98%;
  }
}
@media (min-width: 1400px) {
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 96%;
  }
}
/* 2. grid, row, col
========================================== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}

.col {
  flex: 1 0 0%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}
@media only screen and (max-width: 576px) {
  .col-4 {
    width: 100%;
  }
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}
@media only screen and (max-width: 576px) {
  .col-8 {
    flex: unset;
    width: 100%;
  }
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.33333333%;
}

.offset-2 {
  margin-left: 16.66666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333333%;
}

.offset-5 {
  margin-left: 41.66666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333333%;
}

.offset-8 {
  margin-left: 66.66666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333333%;
}

.offset-11 {
  margin-left: 91.66666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .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-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.66666667%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
/* 3. main
========================================== */
main {
  width: 100%;
  min-height: calc(100vh - 46px - 26px - 12px);
}
main .main-section {
  width: calc(100vw - 24px);
  min-height: calc(100vh - 46px - 26px - 24px);
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--shadow-2);
}
main .main-section .sections-group:not(:has(.Search-section)) {
  display: grid;
  width: calc(100vw - 24px - 12px);
  min-height: calc(100vh - 46px - 26px - 24px - 24px - 12px);
  grid-template-columns: 20% 80%;
  grid-template-rows: 1fr;
  gap: 0px 12px;
  grid-auto-flow: row;
  grid-template-areas: "LocationTree-section Result-section";
}
@media only screen and (max-width: 1280px) {
  main .main-section .sections-group:not(:has(.Search-section)) {
    width: calc(100vw - 24px);
    min-height: unset;
    grid-template-columns: 100%;
    gap: 12px 0;
    grid-template-areas: "LocationTree-section" "Result-section";
  }
}
main .main-section .sections-group:has(.Search-section) {
  display: grid;
  width: calc(100vw - 24px - 24px);
  min-height: calc(100vh - 46px - 26px - 24px - 24px - 12px);
  grid-template-columns: 20% 20% 60%;
  grid-template-rows: 1fr;
  gap: 0px 12px;
  grid-auto-flow: row;
  grid-template-areas: "LocationTree-section Search-section Result-section";
  transition: width 0.1s linear, grid-template-columns 0.5s ease;
}
@media only screen and (max-width: 1280px) {
  main .main-section .sections-group:has(.Search-section) {
    width: calc(100vw - 24px);
    grid-template-columns: 100%;
    gap: 12px 0;
    grid-template-areas: "LocationTree-section" "Search-section" "Result-section";
  }
}
main .main-section .sections-group {
  margin-bottom: 12px;
}
main .main-section .LocationTree-section {
  grid-area: LocationTree-section;
  box-shadow: var(--shadow-3);
}
main .main-section .Search-section {
  grid-area: Search-section;
  box-shadow: var(--shadow-3);
}
main .main-section .Result-section {
  grid-area: Result-section;
  box-shadow: var(--shadow-3);
}
main .main-section .section-title {
  padding: 4px 12px;
  box-shadow: var(--shadow-tr);
}
main .main-section .section-title i {
  margin-right: 6px;
}
main .main-section .sections-group.full-width {
  width: 100%;
  grid-template-columns: 100%;
  grid-template-areas: "Result-section";
}
@media only screen and (max-width: 1280px) {
  main .main-section .sections-group.full-width {
    width: calc(100vw - 24px);
    grid-template-columns: 100%;
    gap: 12px 0;
    grid-template-areas: "Result-section";
  }
}
main .rwd-buttons {
  display: none;
}
@media only screen and (max-width: 576px) {
  main .rwd-buttons {
    display: block;
    padding: 4px 12px;
    box-shadow: var(--shadow-3);
  }
  main .rwd-buttons .filter-btn {
    width: -webkit-fill-available;
  }
  main .rwd-buttons .filter-btn i {
    margin-right: 6px;
  }
  main .sections-group .LocationTree-section,
  main .sections-group .Search-section {
    display: none;
  }
  main .sections-group.sections-group:has(.Search-section) .rwd-buttons {
    margin-bottom: -12px;
  }
  main #filterModal .modal-body .LocationTree-section {
    margin-bottom: 12px;
  }
}

#loader-section {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  background-color: rgb(26, 29, 34);
  z-index: 10009;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 180px;
  height: 20px;
  -webkit-mask: radial-gradient(circle closest-side, #000 80%, rgba(0, 0, 0, 0)) left/20% 100%;
  mask: radial-gradient(circle closest-side, #000 80%, rgba(0, 0, 0, 0)) left/20% 100%;
  background: linear-gradient(#3DFDFE 0 0) left/0% 100% no-repeat #f2f2f2;
  animation: l17 1s infinite steps(6);
}

@keyframes l17 {
  100% {
    background-size: 120% 100%;
  }
}
.Result-section .dashboard-wrapper {
  padding: 12px 0 0 0;
}
.Result-section .dashboard-wrapper canvas {
  max-width: 100%;
}
.Result-section .dashboard-wrapper .statistics-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  max-width: 100%;
}
.Result-section .dashboard-wrapper .statistics-row:not(:last-child) {
  margin-bottom: 12px;
}
.Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-ratio {
  height: 428px;
}
.Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-ratio .chart-legend-popup {
  height: 140px;
}
.Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-detectors {
  height: 428px;
}
.Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-detectors .chart-legend-popup {
  height: 140px;
}
.Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-detectors .chart-total {
  top: 37.5%;
}
.Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) .statistics-trend {
  flex: 1;
}
.Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) .statistics-VDSchordDiagram {
  flex: 1;
}
.Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) .statistics-detectors {
  flex: 1;
}
.Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-levels) .statistics-detectors {
  flex: 1;
}
.Result-section .dashboard-wrapper .statistics-row.half .statistics-content,
.Result-section .dashboard-wrapper .statistics-row.half .statistics-trend {
  height: 350px;
}
.Result-section .dashboard-wrapper .statistics-row.half .statistics-content {
  flex: 1;
}
.Result-section .dashboard-wrapper .statistics-row.half .statistics-trend {
  flex: unset;
  width: 33.2vw;
}
.Result-section .dashboard-wrapper .statistics-row.half .statistics-trend .trend-wrapper {
  min-height: 260px;
}
.Result-section .dashboard-wrapper .statistics-row-list-group .statistics-row-group .statistics-list-rwd {
  display: none;
}
.Result-section .dashboard-wrapper .statistics-content {
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 8px 5px rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 8px;
  box-sizing: border-box;
}
.Result-section .dashboard-wrapper .statistics-trend {
  flex: 1;
  height: 280px;
}
.Result-section .dashboard-wrapper .statistics-images-pages {
  flex: 1;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
  overflow: hidden;
  padding-bottom: 12px;
}
.Result-section .dashboard-wrapper .statistics-images-pages .interactiveTitle {
  padding: 4px 12px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}
.Result-section .dashboard-wrapper .statistics-images-pages .interactiveTitle .img-btn-group {
  display: inline-flex;
  gap: 6px;
}
.Result-section .dashboard-wrapper .statistics-images-pages .images-page-group {
  display: flex;
  justify-content: center;
  gap: 4px;
  transition: transform 0.3s ease-in-out;
}
.Result-section .dashboard-wrapper .statistics-images-pages .img-outer {
  width: 136px;
  height: 77px;
  position: relative;
}
.Result-section .dashboard-wrapper .statistics-images-pages img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.Result-section .dashboard-wrapper .statistics-images-pages .no-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.Result-section .dashboard-wrapper .statistics-images-pages .page-arrow {
  position: absolute;
  top: 61%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
  width: 30px;
  height: 77px;
  background-color: rgba(53, 60, 68, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.Result-section .dashboard-wrapper .statistics-images-pages .hide {
  color: #606060;
  cursor: default;
}
.Result-section .dashboard-wrapper .statistics-images-pages .page-arrow.left {
  left: 8px;
}
.Result-section .dashboard-wrapper .statistics-images-pages .page-arrow.right {
  right: 8px;
}
.Result-section .dashboard-wrapper .statistics-images-pages .pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}
.Result-section .dashboard-wrapper .statistics-images-pages .pagination span {
  width: 10px;
  height: 10px;
  background: #C0C3C5;
  border-radius: 50%;
  cursor: pointer;
}
.Result-section .dashboard-wrapper .statistics-images-pages .pagination .active {
  background: #3DFDFE;
}
.Result-section .dashboard-wrapper .clickable-img {
  cursor: pointer;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 280px;
  position: relative;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram .chordTitle,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram .chordTitle {
  padding: 0 4px 0 8px;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: bold;
  display: inline-flex;
  justify-content: space-between;
  align-items: flex-start;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram .chordTitle i,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram .chordTitle i {
  margin-right: 6px;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram .chordTitle button i,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram .chordTitle button i {
  margin-right: 0;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram #chordContainer,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram #chordContainer {
  width: 250px;
  height: 250px;
  filter: saturate(2);
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram #chord-legend .legend-item,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram #chord-legend .legend-item {
  position: absolute;
  text-wrap: wrap;
  font-size: 0.75rem;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(1),
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(1) {
  top: 20%;
  left: 50%;
  width: 260px;
  transform: translate(-50%, 0);
  text-align: center;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(2),
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(2) {
  bottom: 6%;
  left: 50%;
  width: 260px;
  transform: translate(-50%, 0);
  text-align: center;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(3),
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(3) {
  top: 48%;
  left: 2.5%;
  width: 90px;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(4),
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(4) {
  top: 48%;
  right: 2%;
  width: 90px;
  text-align: right;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram .g2-tooltip,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram .g2-tooltip {
  background-color: rgb(0, 0, 0) !important;
  color: #f2f2f2 !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflowTotal {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgb(10, 10, 10);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 28px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflowTotal .VDStrafficflowTotalName {
  background-color: rgba(0, 0, 0, 0.3);
  color: #3DFDFE;
  border-radius: 50px;
  padding: 8px 12px;
  margin: 0 4px;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflowTotal .VDStrafficflowTotalAmount {
  border-radius: 50px;
  padding: 8px 12px;
  margin: 0 4px;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflowTotal .VDStrafficflowTotalAmount.highLevel {
  background-color: #97050c;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflowTotal .VDStrafficflowTotalAmount.middleLevel {
  background-color: #ce9f1f;
  color: black;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflowTotal .VDStrafficflowTotalAmount.lowLevel {
  background-color: #225c2a;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table {
  width: 100%;
  border-spacing: 1px;
  border-collapse: collapse;
  margin-bottom: 12px;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr {
  background-color: rgba(0, 0, 0, 0.3);
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr th,
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td {
  position: relative;
  text-align: center;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr th {
  padding: 8px 8px;
  border: 1px solid rgb(10, 10, 10);
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr th:first-child {
  border-bottom: none;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr th p {
  border-radius: 10px;
  padding: 4px 8px;
  margin-right: 8px;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr th img {
  width: 24px;
  height: 24px;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td {
  padding: 4px 8px 8px 8px;
  border: 1px solid rgb(10, 10, 10);
  border-top: none;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td p {
  display: inline;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td .subtd {
  display: flex;
  justify-content: space-between;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td .subtd span:nth-child(1) {
  padding: 8px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td .subtd span:nth-child(2) {
  padding: 8px;
  text-align: right;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td hr {
  margin: 2px 0 0 0;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table .dataTables_empty {
  font-weight: 300 !important;
  padding: 8px !important;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table img {
  width: 24px;
  height: 24px;
}
.Result-section .dashboard-wrapper .statistics-detectors {
  flex: 1;
  height: 280px;
  position: relative;
}
.Result-section .dashboard-wrapper .statistics-detectors .chart-legend-popup {
  height: 90px;
}
.Result-section .dashboard-wrapper .statistics-detectors .chart-legend-popup ul li {
  width: 100%;
}
.Result-section .dashboard-wrapper .statistics-ranking,
.Result-section .dashboard-wrapper .statistics-environmentControl-list,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels {
  flex: 1;
}
.Result-section .dashboard-wrapper .statistics-ranking .rankingTitle,
.Result-section .dashboard-wrapper .statistics-ranking .environmentControlListTitle,
.Result-section .dashboard-wrapper .statistics-ranking .environmentControlListTitle,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .rankingTitle,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .environmentControlListTitle,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .environmentControlListTitle,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .rankingTitle,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .environmentControlListTitle,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .environmentControlListTitle {
  padding: 0 8px;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: bold;
  display: inline-flex;
  justify-content: space-between;
  align-items: flex-start;
}
.Result-section .dashboard-wrapper .statistics-ranking .rankingTitle i,
.Result-section .dashboard-wrapper .statistics-ranking .environmentControlListTitle i,
.Result-section .dashboard-wrapper .statistics-ranking .environmentControlListTitle i,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .rankingTitle i,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .environmentControlListTitle i,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .environmentControlListTitle i,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .rankingTitle i,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .environmentControlListTitle i,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .environmentControlListTitle i {
  margin-right: 6px;
}
.Result-section .dashboard-wrapper .statistics-ranking .table-wrap,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .table-wrap,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .table-wrap {
  max-height: 200px;
  overflow-y: auto;
}
.Result-section .dashboard-wrapper .statistics-ranking table,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}
.Result-section .dashboard-wrapper .statistics-ranking table tr,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table tr,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table tr {
  background-color: rgba(0, 0, 0, 0.3);
  clip-path: xywh(0 0 100% 100% round 2em);
}
.Result-section .dashboard-wrapper .statistics-ranking table tr:hover,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table tr:hover,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table tr:hover {
  background-color: rgba(0, 0, 0, 0.4);
}
.Result-section .dashboard-wrapper .statistics-ranking table td,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table td,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table td {
  padding: 8px 12px;
}
.Result-section .dashboard-wrapper .statistics-ranking table td:first-child,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table td:first-child,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table td:first-child {
  padding-right: 0;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingIcon,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingIcon,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingIcon {
  text-align: center;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingIcon .rankingIconInside,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingIcon .rankingIconInside,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingIcon .rankingIconInside {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #606060;
  border-radius: 24px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingIcon .rankingIconInside:has(.fa-web-awesome),
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingIcon .rankingIconInside:has(.fa-web-awesome),
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingIcon .rankingIconInside:has(.fa-web-awesome) {
  border: none;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingIcon .fa-web-awesome,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingIcon .fa-web-awesome,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingIcon .fa-web-awesome {
  color: #3DFDFE;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingVDRoadName,
.Result-section .dashboard-wrapper .statistics-ranking table .rankingVDSRoadName,
.Result-section .dashboard-wrapper .statistics-ranking table .rankingIIDEventName,
.Result-section .dashboard-wrapper .statistics-ranking table .rankingQLDRoadName,
.Result-section .dashboard-wrapper .statistics-ranking table .doorName,
.Result-section .dashboard-wrapper .statistics-ranking table .fanName,
.Result-section .dashboard-wrapper .statistics-ranking table .personnelName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingVDRoadName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingVDSRoadName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingIIDEventName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingQLDRoadName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .personnelName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingVDRoadName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingVDSRoadName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingIIDEventName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingQLDRoadName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .personnelName {
  text-wrap: wrap;
  text-align: left;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount {
  font-variant-numeric: tabular-nums;
  text-align: right;
  float: right;
  font-weight: 600;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount div {
  padding: 8px;
  border-radius: 30px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount span:nth-child(2) {
  margin-left: 3px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount .levelPoint {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount.noLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount.noLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount.noLevel div {
  background-color: #1750a3;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount.highLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount.highLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount.highLevel div {
  background-color: #97050c;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount.middleLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount.middleLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount.middleLevel div {
  background-color: #ce9f1f;
  color: black;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount.lowLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount.lowLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount.lowLevel div {
  background-color: #225c2a;
}
.Result-section .dashboard-wrapper .statistics-ranking table .doorStatus,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorStatus,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorStatus {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.Result-section .dashboard-wrapper .statistics-ranking table .doorStatus div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorStatus div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorStatus div {
  padding: 8px;
  border-radius: 30px;
  width: -moz-fit-content;
  width: fit-content;
  float: right;
  text-wrap: nowrap;
}
.Result-section .dashboard-wrapper .statistics-ranking table .doorStatus span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorStatus span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorStatus span:nth-child(2) {
  margin-left: 3px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .doorStatus .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorStatus .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorStatus .levelPoint {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .doorStatus.doorOpen div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorStatus.doorOpen div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorStatus.doorOpen div {
  background-color: #225c2a;
}
.Result-section .dashboard-wrapper .statistics-ranking table .doorStatus.doorClosed div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorStatus.doorClosed div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorStatus.doorClosed div {
  background-color: #606060;
}
.Result-section .dashboard-wrapper .statistics-ranking table .fanStatus,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanStatus,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanStatus {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.Result-section .dashboard-wrapper .statistics-ranking table .fanStatus div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanStatus div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanStatus div {
  padding: 8px;
  border-radius: 30px;
  width: -moz-fit-content;
  width: fit-content;
  float: right;
  text-wrap: nowrap;
}
.Result-section .dashboard-wrapper .statistics-ranking table .fanStatus span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanStatus span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanStatus span:nth-child(2) {
  margin-left: 3px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .fanStatus .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanStatus .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanStatus .levelPoint {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .fanStatus.fanOn div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanStatus.fanOn div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanStatus.fanOn div {
  background-color: #225c2a;
}
.Result-section .dashboard-wrapper .statistics-ranking table .fanStatus.fanOff div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanStatus.fanOff div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanStatus.fanOff div {
  background-color: #97050c;
}
.Result-section .dashboard-wrapper .statistics-ranking table .accessControlStatus,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .accessControlStatus,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .accessControlStatus {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.Result-section .dashboard-wrapper .statistics-ranking table .accessControlStatus div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .accessControlStatus div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .accessControlStatus div {
  padding: 8px;
  border-radius: 30px;
  width: -moz-fit-content;
  width: fit-content;
  float: right;
  text-wrap: nowrap;
}
.Result-section .dashboard-wrapper .statistics-ranking table .accessControlStatus span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .accessControlStatus span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .accessControlStatus span:nth-child(2) {
  margin-left: 3px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .accessControlStatus .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .accessControlStatus .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .accessControlStatus .levelPoint {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .accessControlStatus.accessControlValid div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .accessControlStatus.accessControlValid div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .accessControlStatus.accessControlValid div {
  background-color: #225c2a;
}
.Result-section .dashboard-wrapper .statistics-ranking table .accessControlStatus.accessControlInvalid div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .accessControlStatus.accessControlInvalid div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .accessControlStatus.accessControlInvalid div {
  background-color: #97050c;
}
.Result-section .dashboard-wrapper .statistics-ranking {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels {
  display: grid;
  grid-template-rows: 0.2fr 2fr;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-self: stretch;
  flex: 1;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .enc-level-location {
  padding: 8px 12px;
  text-wrap: wrap;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .enc-level-location span:nth-child(1) {
  color: #3DFDFE;
  font-size: 16px;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .enc-state-group {
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 4px 12px;
  width: 100%;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .enc-state-group .enc-state {
  width: 0.8vw;
  height: 0.8vw;
  margin-right: 3px;
  border-radius: 20px;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .waterLevelOneAlert,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .oilLevelHigh {
  background-color: #e02626;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .waterLevelTwoAlert,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .oilLevelLow {
  background-color: #ff8555;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .waterLevelNormal,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .oilNormal {
  background-color: #24d13b;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .lowElectricity {
  background-color: #ffe6a3;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .moderateElectricity {
  background-color: #ce9f1f;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .highElectricity {
  background-color: #995c00;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .lowTemperature {
  background-color: #4fe3f3;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .moderateTemperature {
  background-color: #edbd35;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .highTemperature {
  background-color: #e02626;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .lowHumidity {
  background-color: #c2ebff;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .moderateHumidity {
  background-color: #5fb8e4;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .highHumidity {
  background-color: #056899;
}
.Result-section .dashboard-wrapper .statistics-ratio {
  flex: 1;
  height: 280px;
  position: relative;
}
.Result-section .dashboard-wrapper .statistics-ratio .usageStatus-icon {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  z-index: -1;
}
.Result-section .dashboard-wrapper .statistics-ratio .usageStatus-icon i {
  margin-right: 6px;
}
.Result-section .dashboard-wrapper .statistics-ratio .chart-legend-popup {
  height: 90px;
}
.Result-section .dashboard-wrapper .statistics-ratio .chart-legend-popup ul li {
  width: 100%;
}
.Result-section .dashboard-wrapper .chart-total {
  position: absolute;
  top: 38.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  font-weight: bold;
  pointer-events: none;
  z-index: -1;
}
.Result-section .dashboard-wrapper .half-dougnut {
  top: 50%;
}
.Result-section .dashboard-wrapper .chart-legend-popup {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: auto;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 8px;
  box-sizing: border-box;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}
.Result-section .dashboard-wrapper .chart-legend-popup ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.Result-section .dashboard-wrapper .chart-legend-popup ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Result-section .dashboard-wrapper .chart-legend-popup ul li span {
  display: inline-flex;
}
.Result-section .dashboard-wrapper .chart-legend-popup ul li .legend-color {
  margin-right: 6px;
  width: 10px;
  height: 10px;
  background-color: #fff;
}
.Result-section .dashboard-wrapper .chart-legend-popup ul li .legend-label {
  flex-grow: 1;
  margin-right: 6px;
  min-width: 30%;
  flex-basis: 30%;
  text-wrap: wrap;
}
.Result-section .dashboard-wrapper .chart-legend-popup ul li .legend-data {
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
  justify-content: right;
  min-width: 30%;
  flex-basis: 30%;
}
.Result-section .dashboard-wrapper .chart-legend-popup ul li .legend-percentage {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  justify-content: right;
  min-width: 30%;
  flex-basis: 30%;
}
@media only screen and (max-width: 1440px) {
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-ranking), .Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-list), .Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-levels) {
    flex-wrap: wrap;
  }
  .Result-section .dashboard-wrapper .statistics-row .statistics-ranking,
  .Result-section .dashboard-wrapper .statistics-row .statistics-environmentControl-list,
  .Result-section .dashboard-wrapper .statistics-row .statistics-environmentControl-levels {
    flex: 1 49%;
  }
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-levels) .statistics-detectors {
    flex: 1 49%;
  }
}
@media only screen and (max-width: 1280px) {
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-trend), .Result-section .dashboard-wrapper .statistics-row:has(.statistics-ranking), .Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-list), .Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-levels), .Result-section .dashboard-wrapper .statistics-row:has(.statistics-interactive-overall) {
    flex-wrap: wrap;
  }
  .Result-section .dashboard-wrapper .statistics-row .statistics-trend,
  .Result-section .dashboard-wrapper .statistics-row .statistics-detectors {
    flex: 1 99%;
  }
  .Result-section .dashboard-wrapper .statistics-row .statistics-ranking,
  .Result-section .dashboard-wrapper .statistics-row .statistics-environmentControl-list,
  .Result-section .dashboard-wrapper .statistics-row .statistics-environmentControl-levels {
    flex: 1 49%;
  }
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) {
    flex-wrap: wrap;
  }
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) .statistics-trend,
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) .statistics-VDSchordDiagram,
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) .statistics-detectors {
    flex: 1 99%;
  }
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-levels) .statistics-detectors {
    flex: 1 49%;
  }
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-ratio) {
    flex-wrap: wrap;
  }
  .Result-section .dashboard-wrapper .statistics-ratio {
    flex: 1 49%;
  }
  .Result-section .dashboard-wrapper .statistics-ratio:nth-last-child(1):nth-child(odd) {
    flex-basis: 100%;
    /* Last 1 item stretch to fit row if odd number of elements */
  }
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-row-group {
  display: flex;
  justify-content: stretch;
  flex-direction: column;
  flex: 6;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-row-group .interactive-table-section {
  width: -webkit-fill-available;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list {
  display: flex;
  align-self: stretch;
  flex: 1;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .statistics-content {
  width: -webkit-fill-available;
  height: calc(100% - 12px);
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-title {
  font-weight: bold;
  margin-bottom: 12px;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-groups {
  height: 700px;
  max-height: 100%;
  overflow-y: auto;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int1 {
  border-left: 2px solid #E0FFDF;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int1 .list-title .int-circle {
  background-color: #E0FFDF;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int2 {
  border-left: 2px solid #33FE34;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int2 .list-title .int-circle {
  background-color: #33FE34;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int3 {
  border-left: 2px solid #FFFE2E;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int3 .list-title .int-circle {
  background-color: #FFFE2E;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int4 {
  border-left: 2px solid #fd8530;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int4 .list-title .int-circle {
  background-color: #fd8530;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int5minus {
  border-left: 2px solid #ff5232;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int5minus .list-title .int-circle {
  background-color: #ff5232;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int5plus {
  border-left: 2px solid #c53d3f;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int5plus .list-title .int-circle {
  background-color: #c53d3f;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int6minus {
  border-left: 2px solid #9c4745;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int6minus .list-title .int-circle {
  background-color: #9c4745;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int6plus {
  border-left: 2px solid #9b4c86;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int6plus .list-title .int-circle {
  background-color: #9b4c86;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int7 {
  border-left: 2px solid #b51eeb;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group.int7 .list-title .int-circle {
  background-color: #b51eeb;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group .list-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-weight: 600;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group .list-title .int-circle {
  width: 15px;
  height: 15px;
  background-color: gray;
  border-radius: 30px;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group .uk-accordion > :nth-child(n+2) {
  padding-top: 0px;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group .list-accordion-group {
  margin-bottom: 0;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group .list-accordion-group li .list-accordion-title {
  background-color: #262b31;
  box-shadow: unset;
  font-weight: 400;
  border: 1px solid #353c44;
  letter-spacing: normal;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group .list-accordion-group li .list-accordion-content {
  letter-spacing: normal;
  margin-top: 0px;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-group .list-accordion-group li .list-accordion-content div {
  padding: 8px 12px 8px 28px;
  background-color: #353c44;
}
.Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .uk-accordion-content > div:empty + .interactive-list-sub-group {
  display: none;
}
.Result-section .interactive-dashboard-wrapper .statistics-interactive-overall {
  flex: 1;
  align-content: flex-start;
}
@media only screen and (max-width: 1280px) {
  .Result-section .interactive-dashboard-wrapper .statistics-interactive-overall {
    flex: 1 24%;
  }
}
.Result-section .interactive-dashboard-wrapper .statistics-interactive-overall.weather-card-wider {
  flex: 2;
  padding: 8px 12px;
}
@media only screen and (max-width: 1280px) {
  .Result-section .interactive-dashboard-wrapper .statistics-interactive-overall.weather-card-wider {
    flex: 1 100%;
  }
}
.Result-section .interactive-dashboard-wrapper .statistics-interactive-overall.earthquake-card-wider {
  flex: unset;
  width: 33.2vw;
  padding: 8px 12px;
}
@media only screen and (max-width: 1280px) {
  .Result-section .interactive-dashboard-wrapper .statistics-interactive-overall.earthquake-card-wider {
    flex: unset !important;
    width: 100%;
  }
}
@media only screen and (max-width: 1280px) {
  .Result-section .interactive-dashboard-wrapper .statistics-interactive-overall:has(.weather-card-item) {
    flex: 1 49%;
  }
}
@media only screen and (max-width: 1280px) {
  .Result-section .interactive-dashboard-wrapper .statistics-interactive-overall:has(.earthquake-card-item) {
    flex: 1 49%;
  }
}
.Result-section .interactive-dashboard-wrapper figure {
  margin: 0 0;
}
.Result-section .interactive-dashboard-wrapper .aqi-item,
.Result-section .interactive-dashboard-wrapper .interactive-item {
  border-radius: 0px;
  flex: 1;
  position: relative;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-title,
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-data,
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-status,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-title,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-data,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-status,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-title,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-data,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-status,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-title,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-data,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-status {
  font-weight: bold;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-title i,
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-data i,
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-status i,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-title i,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-data i,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-status i,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-title i,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-data i,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-status i,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-title i,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-data i,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-status i {
  margin-right: 6px;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-data,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-data,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-data,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-data {
  font-size: 28px;
  text-align: center;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .unit,
.Result-section .interactive-dashboard-wrapper .interactive-item .unit {
  font-size: 14px;
}
.Result-section .interactive-dashboard-wrapper .aqi-item.step-good .aqi-step:nth-child(1),
.Result-section .interactive-dashboard-wrapper .interactive-item.step-good .aqi-step:nth-child(1) {
  background-color: #24d13b;
}
.Result-section .interactive-dashboard-wrapper .aqi-item.step-moderate .aqi-step:nth-child(1),
.Result-section .interactive-dashboard-wrapper .aqi-item.step-moderate .aqi-step:nth-child(2),
.Result-section .interactive-dashboard-wrapper .interactive-item.step-moderate .aqi-step:nth-child(1),
.Result-section .interactive-dashboard-wrapper .interactive-item.step-moderate .aqi-step:nth-child(2) {
  background-color: #ffeb0a;
}
.Result-section .interactive-dashboard-wrapper .aqi-item.step-poor .aqi-step:nth-child(1),
.Result-section .interactive-dashboard-wrapper .aqi-item.step-poor .aqi-step:nth-child(2),
.Result-section .interactive-dashboard-wrapper .aqi-item.step-poor .aqi-step:nth-child(3),
.Result-section .interactive-dashboard-wrapper .interactive-item.step-poor .aqi-step:nth-child(1),
.Result-section .interactive-dashboard-wrapper .interactive-item.step-poor .aqi-step:nth-child(2),
.Result-section .interactive-dashboard-wrapper .interactive-item.step-poor .aqi-step:nth-child(3) {
  background-color: #e02626;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-steps,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-steps {
  display: flex;
  justify-content: space-between;
  gap: 0px;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-steps .aqi-step,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-steps .aqi-step {
  flex: 1;
  height: 10px;
  background-color: #606060;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .enc-level-group,
.Result-section .interactive-dashboard-wrapper .interactive-item .enc-level-group {
  position: relative;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .enc-level-group .interactive-data,
.Result-section .interactive-dashboard-wrapper .interactive-item .enc-level-group .interactive-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Result-section .interactive-dashboard-wrapper .aqi-item .LevelOneAlert,
.Result-section .interactive-dashboard-wrapper .interactive-item .LevelOneAlert {
  background-color: #e02626;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .LevelTwoAlert,
.Result-section .interactive-dashboard-wrapper .interactive-item .LevelTwoAlert {
  background-color: #e2551d;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .normalLevel,
.Result-section .interactive-dashboard-wrapper .interactive-item .normalLevel {
  background-color: #008bd1;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-custom-legend-group,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-custom-legend-group {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-custom-legend-group .interactive-custom-legend,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-custom-legend-group .interactive-custom-legend {
  display: inline-flex;
  gap: 12px;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-custom-legend-group .interactive-custom-legend.Avaliable,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-custom-legend-group .interactive-custom-legend.Avaliable {
  color: #24d13b;
}
.Result-section .interactive-dashboard-wrapper .aqi-item #carParkingChart,
.Result-section .interactive-dashboard-wrapper .aqi-item #motorParkingChart,
.Result-section .interactive-dashboard-wrapper .interactive-item #carParkingChart,
.Result-section .interactive-dashboard-wrapper .interactive-item #motorParkingChart {
  margin-bottom: 8px;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
.Result-section .interactive-dashboard-wrapper .interactive-item .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  color: #262b31 !important;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .apexcharts-tooltip span,
.Result-section .interactive-dashboard-wrapper .interactive-item .apexcharts-tooltip span {
  color: #323232;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .main-info,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .main-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .main-info .weather-loaction,
.Result-section .interactive-dashboard-wrapper .weather-card-item .main-info .interactive-data,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .main-info .weather-loaction,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .main-info .interactive-data {
  text-align: left;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .main-info .weather-loaction .temperature,
.Result-section .interactive-dashboard-wrapper .weather-card-item .main-info .weather-loaction .magnitude,
.Result-section .interactive-dashboard-wrapper .weather-card-item .main-info .interactive-data .temperature,
.Result-section .interactive-dashboard-wrapper .weather-card-item .main-info .interactive-data .magnitude,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .main-info .weather-loaction .temperature,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .main-info .weather-loaction .magnitude,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .main-info .interactive-data .temperature,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .main-info .interactive-data .magnitude {
  font-size: 38px;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .weather-type img,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .weather-type img {
  width: 84px;
  height: 70px;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .selected-tr-date-time,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .selected-tr-date-time {
  text-align: right;
  font-family: monospace;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .interactive-title,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .interactive-title {
  margin-bottom: 6px;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .echart-container,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .echart-container {
  width: 62px;
  height: 62px;
  pointer-events: none;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .data-chart-group,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .data-chart-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  line-height: 1;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .wd-type,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .wd-type {
  margin-top: 4px;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .wd-type img,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .wd-type img {
  width: 48px;
  height: 48px;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .interactive-data-level,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .interactive-data-level {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  line-height: 1;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .interactive-data-level:not(:has(.level-text)),
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .interactive-data-level:not(:has(.level-text)) {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .interactive-data-level .data-number,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .interactive-data-level .data-number {
  font-size: 28px;
  font-weight: bold;
  margin-right: 4px;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .interactive-data-level .level-text,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .interactive-data-level .level-text {
  margin-left: auto;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .interactive-data-columnChart,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .interactive-data-columnChart {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  line-height: 1;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .interactive-data-columnChart .interactive-data-level,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .interactive-data-columnChart .interactive-data-level {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart {
  position: relative;
  padding-top: 18px;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart:has(.focalDepth-steps),
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart:has(.focalDepth-steps) {
  padding-top: 0;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .level-pointer,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .level-pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  filter: drop-shadow(#000000 0px 3px 3px);
  transform: translate(-50%, 0);
  top: 10px;
  animation: pointerSlide 0.5s ease;
  z-index: 3000;
}
@keyframes pointerSlide {
  0% {
    left: 0;
  }
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .focalDepth-level-pointer,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .focalDepth-level-pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  filter: drop-shadow(#000000 0px 3px 3px);
  transform: translate(0%, -50%) rotate(-90deg);
  top: 0px;
  left: -8px;
  animation: none;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart.error .level-pointer,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart.error .level-pointer {
  display: none;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart.error .bar-steps .bar-step,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart.error .bar-steps .bar-step {
  background-color: #606060 !important;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .bar-steps,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .bar-steps {
  display: flex;
  justify-content: space-between;
  gap: 0px;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .bar-steps .bar-step,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .bar-steps .bar-step {
  flex: 1;
  height: 10px;
  background-color: #606060;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .bar-steps .bar-step:hover,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .bar-steps .bar-step:hover {
  transform: scaleY(1.5);
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step {
  flex: 1;
  height: 10px;
  background-color: #606060;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force0,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force0 {
  background-color: #e4e4e4;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force1,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force1 {
  background-color: #a3c4d7;
  /* Light air */
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force2,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force2 {
  background-color: #3ACCFF;
  /* Light breeze */
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force3,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force3 {
  background-color: #43e7e8;
  /* Gentle breeze */
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force4,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force4 {
  background-color: #42ebbe;
  /* Moderate breeze */
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force5,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force5 {
  background-color: #37CC01;
  /* Fresh breeze */
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force6,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force6 {
  background-color: #c7f774;
  /* Strong breeze */
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force7,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force7 {
  background-color: #e6e5b8;
  /* Near gale */
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force8,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force8 {
  background-color: #FFFF00;
  /* Gale */
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force9,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force9 {
  background-color: #FCCB66;
  /* Strong gale */
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force10,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force10 {
  background-color: #FA9A02;
  /* Storm */
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force11,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force11 {
  background-color: #F86566;
  /* Violent storm */
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step.force12,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step.force12 {
  background-color: #F968FC;
  /* Hurricane */
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain0,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain0 {
  background-color: #C2C2C2;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain1,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain1 {
  background-color: #9CFCFF;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain2,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain2 {
  background-color: #38C8FF;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain3,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain3 {
  background-color: #2B9BFF;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain4,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain4 {
  background-color: #1C63FF;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain5,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain5 {
  background-color: #279901;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain6,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain6 {
  background-color: #47FF02;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain7,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain7 {
  background-color: #FEFB06;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain8,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain8 {
  background-color: #FCC802;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain9,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain9 {
  background-color: #FA9502;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain10,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain10 {
  background-color: #F71702;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain11,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain11 {
  background-color: #CC1100;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain12,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain12 {
  background-color: #990900;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain13,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain13 {
  background-color: #960099;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain14,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain14 {
  background-color: #C900CC;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain15,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain15 {
  background-color: #F800FF;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .pp-steps .bar-step.rain16,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .pp-steps .bar-step.rain16 {
  background-color: #FCC9FF;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .uv-steps .bar-step.uv-step-low,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .uv-steps .bar-step.uv-step-low {
  background-color: #cde381;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .uv-steps .bar-step.uv-step-moderate,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .uv-steps .bar-step.uv-step-moderate {
  background-color: #fbbc23;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .uv-steps .bar-step.uv-step-high,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .uv-steps .bar-step.uv-step-high {
  background-color: #e57200;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .uv-steps .bar-step.uv-step-very-high,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .uv-steps .bar-step.uv-step-very-high {
  background-color: #d32d1b;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .uv-steps .bar-step.uv-step-extreme,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .uv-steps .bar-step.uv-step-extreme {
  background-color: #ac4a9b;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .intensity-steps .bar-step.intensity0,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .intensity-steps .bar-step.intensity0 {
  background-color: #FFFFFF;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .intensity-steps .bar-step.intensity1,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .intensity-steps .bar-step.intensity1 {
  background-color: #E0FFDF;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .intensity-steps .bar-step.intensity2,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .intensity-steps .bar-step.intensity2 {
  background-color: #33FE34;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .intensity-steps .bar-step.intensity3,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .intensity-steps .bar-step.intensity3 {
  background-color: #FFFE2E;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .intensity-steps .bar-step.intensity4,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .intensity-steps .bar-step.intensity4 {
  background-color: #fd8530;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .intensity-steps .bar-step.intensity5minus,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .intensity-steps .bar-step.intensity5minus {
  background-color: #ff5232;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .intensity-steps .bar-step.intensity5plus,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .intensity-steps .bar-step.intensity5plus {
  background-color: #c53d3f;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .intensity-steps .bar-step.intensity6minus,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .intensity-steps .bar-step.intensity6minus {
  background-color: #9c4745;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .intensity-steps .bar-step.intensity6plus,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .intensity-steps .bar-step.intensity6plus {
  background-color: #9b4c86;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .intensity-steps .bar-step.intensity7,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .intensity-steps .bar-step.intensity7 {
  background-color: #b51eeb;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .focalDepth-steps,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .focalDepth-steps {
  flex-direction: column;
  height: 100%;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .focalDepth-steps .bar-step,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .focalDepth-steps .bar-step {
  flex: unset;
  width: 20px;
  height: 14px;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .focalDepth-steps .bar-step:hover,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .focalDepth-steps .bar-step:hover {
  transform: scaleX(1.5);
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .focalDepth-steps .focalDepthVeryShallow,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .focalDepth-steps .focalDepthVeryShallow {
  background-color: #ffb8d8;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .focalDepth-steps .focalDepthShallow,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .focalDepth-steps .focalDepthShallow {
  background-color: #e7869c;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .focalDepth-steps .focalDepthIntermediate,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .focalDepth-steps .focalDepthIntermediate {
  background-color: #cf555f;
}
.Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .focalDepth-steps .focalDepthDeep,
.Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .focalDepth-steps .focalDepthDeep {
  background-color: #b72323;
}
.Result-section .interactive-dashboard-wrapper .statistics-trend {
  height: 280px;
}
.Result-section .interactive-dashboard-wrapper .statistics-trend .interactiveTitle {
  padding: 4px 12px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
}
.Result-section .interactive-dashboard-wrapper .statistics-trend .interactiveTitle .trend-btn-group {
  display: inline-flex;
  gap: 6px;
}
.Result-section .interactive-dashboard-wrapper .statistics-trend .trend-wrapper {
  min-height: 180px;
  max-height: 280px;
}
@media only screen and (max-width: 1280px) {
  .Result-section .interactive-dashboard-wrapper .statistics-trend {
    flex: unset !important;
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .Result-section .interactive-dashboard-wrapper .statistics-trend {
    height: -moz-fit-content;
    height: fit-content;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-trend .interactiveTitle {
    flex-direction: column;
    align-items: flex-start;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-trend .trend-btn-group:not(.weather-trend-btn-group) .tab-btn:nth-child(2), .Result-section .interactive-dashboard-wrapper .statistics-trend .trend-btn-group:not(.weather-trend-btn-group) .tab-btn:nth-child(3), .Result-section .interactive-dashboard-wrapper .statistics-trend .trend-btn-group:not(.weather-trend-btn-group) .tab-btn:nth-child(4), .Result-section .interactive-dashboard-wrapper .statistics-trend .trend-btn-group:not(.weather-trend-btn-group) .tab-btn:nth-child(5) {
    display: none;
  }
}
@media only screen and (max-width: 576px) {
  .Result-section .interactive-dashboard-wrapper .statistics-trend .trend-wrapper {
    height: 180px;
  }
}
.Result-section .interactive-dashboard-wrapper .statistics-content:has(.interactive-map-thumbnail) {
  padding: 0;
  height: 280px;
  flex: 0.5;
}
@media only screen and (max-width: 1280px) {
  .Result-section .interactive-dashboard-wrapper .statistics-content:has(.interactive-map-thumbnail) {
    flex: 1;
  }
}
.Result-section .interactive-dashboard-wrapper .interactive-map-thumbnail {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.Result-section .interactive-dashboard-wrapper .interactive-map-thumbnail #map {
  width: 100%;
  height: 100%;
}
.Result-section .interactive-dashboard-wrapper .interactive-page-section {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
  box-shadow: 0 4px 8px 5px rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 8px;
  box-sizing: border-box;
}
.Result-section .interactive-dashboard-wrapper .interactive-page-section .interactiveTitle {
  padding: 4px 12px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  display: inline-flex;
  justify-content: space-between;
  align-items: flex-start;
}
.Result-section .interactive-dashboard-wrapper .interactive-page-section .interactiveTitle .interactiveTitleTips {
  font-size: 14px;
  font-weight: 300;
  display: inline;
  color: #f88080;
}
.Result-section .interactive-dashboard-wrapper .interactive-table-section {
  max-height: 275px;
}
.Result-section .interactive-dashboard-wrapper .interactive-table-section .dt-container {
  max-height: 230px;
  overflow-y: auto;
}
.Result-section .interactive-dashboard-wrapper .interactive-table-section .dt-container thead tr {
  position: sticky;
  z-index: 2222;
  top: 0;
  background-color: #262b31;
}
.Result-section .interactive-dashboard-wrapper .interactive-table-section .dt-container .dt-layout-row {
  margin: 0 0;
}
.Result-section .interactive-dashboard-wrapper .interactive-table-section:has(#WLInteractiveTable) {
  max-height: 232px;
}
.Result-section .interactive-dashboard-wrapper .interactive-table-section:has(#WLInteractiveTable) .dt-container {
  max-height: 186px;
}
.Result-section .interactive-dashboard-wrapper .interactive-table-section #weatherInteractiveTable td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)),
.Result-section .interactive-dashboard-wrapper .interactive-table-section #weatherInteractiveTable th:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
  text-align: right;
}
@media only screen and (max-width: 576px) {
  .Result-section .interactive-dashboard-wrapper .interactive-table-section {
    max-height: 295px;
  }
  .Result-section .interactive-dashboard-wrapper .interactive-table-section:has(#WLInteractiveTable) {
    max-height: 295px;
  }
  .Result-section .interactive-dashboard-wrapper .interactive-table-section:has(#WLInteractiveTable) .dt-container {
    max-height: 230px;
  }
}
.Result-section .interactive-dashboard-wrapper .statistics-date-time {
  flex: 1;
  animation: attentionBorder 1.2s ease-in-out;
}
@keyframes attentionBorder {
  0% {
    outline: 1px solid #262b31;
  }
  50% {
    outline: 1px solid #29b3b0;
  }
  100% {
    outline: 1px solid #262b31;
  }
}
.Result-section .interactive-dashboard-wrapper .statistics-date-time #datetime-interactive {
  margin-bottom: 12px;
}
.Result-section .interactive-dashboard-wrapper .time-btn-group {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
}
@media only screen and (max-width: 768px) {
  .Result-section .interactive-dashboard-wrapper .time-btn-group {
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 1440px) {
  .Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list-computer {
    flex: 1.5;
  }
}
@media only screen and (max-width: 1280px) {
  .Result-section .interactive-dashboard-wrapper .statistics-row.half .statistics-trend,
  .Result-section .interactive-dashboard-wrapper .statistics-row.half .statistics-content:has(.interactive-map-thumbnail) {
    flex: 1 99%;
    width: 100%;
    height: 280px;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-row.half .statistics-trend .trend-wrapper,
  .Result-section .interactive-dashboard-wrapper .statistics-row.half .statistics-content:has(.interactive-map-thumbnail) .trend-wrapper {
    min-height: 200px;
    max-height: 200px;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-row-group .statistics-list-rwd {
    display: flex;
    margin-bottom: 12px;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-row-group .statistics-list-rwd .statistics-content {
    height: 280px;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-row-group .statistics-list-rwd .interactive-list-sub-groups {
    height: 230px;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list-computer {
    display: none !important;
  }
}
@media only screen and (max-width: 576px) {
  .Result-section .interactive-dashboard-wrapper .interactive-table-section {
    margin-bottom: 0px;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-row:has(.statistics-date-time) {
    position: fixed;
    left: 0;
    bottom: 0px;
    z-index: 10002;
    background-color: #262b31;
    width: 100%;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-row:has(.statistics-date-time) #datetime-interactive {
    margin-bottom: 0;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-row:has(.statistics-date-time) .time-btn-group {
    display: none;
  }
}

.large-img-outer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.large-img-outer #modal-large-img {
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 576px) {
  body:has(.statistics-date-time) footer {
    margin-bottom: 56px;
  }
}
:root {
  --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
  --popup-info-icon: 1vw;
}

@media (prefers-color-scheme: dark) {
  .map-tiles {
    filter: var(--map-tiles-filter, none);
  }
}
.map-section {
  display: flex;
  flex-direction: column;
  background-color: #262b31;
}
.map-section-body {
  display: flex;
  width: 100%;
  height: calc(100vh - 46px - 26px - 24px - 24px - 12px - 28px);
  padding: 12px 0 0 0;
}
.map-section-body #map-charts {
  width: 30%;
  max-height: 100%;
  overflow-y: scroll;
}
.map-section-body #map-charts::-webkit-scrollbar {
  display: none;
}
.map-section-body #map-charts .map-global-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.map-section-body #map-charts .map-global-toggle .master-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.map-section-body #map-charts .map-global-toggle .master-btn i {
  font-size: 14px;
}
.map-section-body #map-charts .map-global-toggle .master-btn:hover:not(.disabled) {
  filter: brightness(1.05);
}
.map-section-body #map-charts .map-global-toggle .master-btn.disabled {
  cursor: not-allowed !important;
  opacity: 0.55;
}
.map-section-body #map-charts .map-global-toggle .master-btn.show-all {
  color: #4fc3f7;
  background: rgba(1, 121, 169, 0.18);
  border-color: rgba(79, 195, 247, 0.55);
  box-shadow: 0 0 12px rgba(79, 195, 247, 0.25);
}
.map-section-body #map-charts .map-global-toggle .master-btn.show-all.disabled {
  color: #9aa4ae;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: not-allowed !important;
}
.map-section-body #map-charts .map-global-toggle .master-btn.hide-all {
  color: #c6cdd3;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
}
.map-section-body #map-charts .map-global-toggle .master-btn.hide-all:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.08);
}
.map-section-body #map-charts .map-global-toggle .master-btn.hide-all.disabled {
  color: #9aa4ae;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  cursor: not-allow !important;
}
.map-section-body #map-charts .map-chart-group {
  padding: 12px;
}
.map-section-body #map-charts .map-chart-group .chart-header {
  display: flex;
  justify-content: space-between;
}
.map-section-body #map-charts .map-chart-group .chart-header .chart-title {
  display: flex;
  color: rgba(255, 255, 255, 0.8);
}
.map-section-body #map-charts .map-chart-group .chart-header .chart-title p {
  margin: 0 8px 0 0;
}
.map-section-body #map-charts .map-chart-group .chart-header .chart-title .functions-icon {
  display: flex;
  align-items: center;
}
.map-section-body #map-charts .map-chart-group .chart-header .chart-title .functions-icon img {
  width: 18px;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 20px;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 4px;
  left: 0;
  right: 0;
  bottom: 4px;
  background-color: #c0c3c5;
  transition: 0.4s;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch .slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 0px;
  bottom: -4px;
  background-color: #f2f2f2;
  transition: 0.4s;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch .slider.round {
  border-radius: 20px;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch .slider.round::before {
  border-radius: 50%;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch input:checked + .slider {
  background-color: #2ec4c2;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch input:checked + .slider::before {
  transform: translateX(28.4px);
}
.map-section-body #map-charts .map-chart-group .chart-header .switch input:focus + .slider {
  box-shadow: 0 0 1px #2ec4c2;
}
.map-section-body #map-charts .map-chart-group .chart-body #chargingChart,
.map-section-body #map-charts .map-chart-group .chart-body #airboxChart,
.map-section-body #map-charts .map-chart-group .chart-body #APChart,
.map-section-body #map-charts .map-chart-group .chart-body #electricityChart {
  position: relative;
  height: 30vh;
  overflow: hidden;
  display: none;
}
.map-section-body .map-container {
  position: relative;
  width: 70%;
  height: 100%;
}
.map-section-body .map-container #map {
  width: 100%;
  height: calc(100% - 48px);
}
.map-section-body .map-container .map-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  top: 128px;
  left: 12px;
  z-index: 1000;
  cursor: pointer;
}
.map-section-body .map-container .map-tools .district-button,
.map-section-body .map-container .map-tools .village-button {
  background-color: #333b44;
}
.map-section-body .map-container .map-tools .district-button:hover,
.map-section-body .map-container .map-tools .village-button:hover {
  background-color: #262b31;
}
.map-section-body .map-container .map-tools .district-button.active,
.map-section-body .map-container .map-tools .village-button.active {
  background-color: #181b1f;
}
.map-section-body .map-container .zone-tools {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding-left: 8px;
  width: 100%;
  height: 48px;
  background-color: #242424;
}
.map-section-body .map-container .zone-tools .zone-button {
  border: unset;
  cursor: pointer;
  color: #C0C3C5;
  background-color: #333b44;
}
.map-section-body .map-container .zone-tools .zone-button:hover {
  background-color: #262b31;
}
.map-section-body .map-container .zone-tools .zone-button:active {
  background-color: #181b1f;
}
.map-section .abnormal {
  color: red;
}
.map-section .circle-shadow {
  box-shadow: 0 0 10px green;
}
.map-section .legend-group-wrap {
  display: flex;
  position: absolute;
  bottom: 20px;
  right: 10px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}
.map-section .legend {
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.map-section .legend .legend-title {
  font-weight: 700;
}
.map-section .legend .legend-unit {
  margin-bottom: 4px;
  padding: 2px;
  width: 100%;
  text-align: center;
  background-color: #6f6f6f;
  color: rgba(255, 255, 255, 0.87);
  border-radius: 5px;
}
.map-section .legend .legend-body {
  display: flex;
  justify-content: end;
  align-items: end;
  gap: 4px;
  padding-bottom: 10px;
}
.map-section .legend .legend-body .legend-ruler {
  display: flex;
  flex-direction: column;
  align-items: end;
  flex-direction: column-reverse;
  transform: translateY(10px);
}
.map-section .legend .legend-body .legend-ruler .number {
  display: inline-block;
  width: 18px;
  height: 18px;
  text-align: end;
}
.map-section .legend .legend-body .legend-ruler.rain-level-ruler {
  transform: translateY(0.75rem);
}
.map-section .legend .legend-body .legend-item-group {
  display: flex;
  flex-direction: column;
  align-items: end;
  background: transparent;
}
.map-section .legend .legend-body .legend-item-group .square {
  display: inline-block;
  margin-right: 5px;
  width: 18px;
  height: 18px;
}
.map-section .legend .legend-item {
  display: flex;
  align-items: center;
}
.map-section .legend .legend-item p {
  margin: 0px;
}
.map-section .legend .legend-item .square {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.map-section .legend .legend-item .wind-img,
.map-section .legend .legend-item .uv-img {
  margin-right: 5px;
  width: 12px;
  height: 12px;
}
.map-section .legend .legend-item .wind-img img,
.map-section .legend .legend-item .uv-img img {
  width: 100%;
}
.map-section .legend .legend-body-wrap {
  display: flex;
}
.map-section .legend .legend-body-wrap .legend-levels {
  margin-left: 8px;
}
.map-section .legend .legend-body-wrap .legend-levels p {
  margin: 0;
}
.map-section .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  color: #262b31 !important;
}
.map-section .leaflet-popup {
  margin-bottom: 30px;
}
.map-section .leaflet-container {
  font-family: unset;
}
.map-section .leaflet-container a.leaflet-popup-close-button {
  font: 18px/26px Tahoma, Verdana, sans-serif;
  color: #c0c3c5;
}
.map-section .leaflet-container a.leaflet-popup-close-button:hover {
  color: #c0c3c5;
}
.map-section .leaflet-popup-content-wrapper,
.map-section .leaflet-popup-tip {
  background-color: #272a2c !important;
  color: #f2f2f2 !important;
  white-space: nowrap;
}
.map-section .leaflet-popup-content {
  font-size: 1rem;
}
.map-section .leaflet-popup-content:has(.human-feature-info-group) {
  min-width: 140px !important;
}
.map-section .leaflet-popup-content:has(.vd-info-group) {
  min-width: 220px !important;
}
.map-section .leaflet-popup-content:has(.vds-info-group) {
  min-width: 500px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: 100%;
}
.map-section .leaflet-popup-content:has(.IID-info-group), .map-section .leaflet-popup-content:has(.tte-info-group) {
  min-width: 28vw !important;
}
.map-section .leaflet-popup-content:has(.parking-lots-info-group) {
  min-width: 330px !important;
}
.map-section .leaflet-popup-content tbody th,
.map-section .leaflet-popup-content tbody td {
  padding: 0.2rem 0.5rem;
  vertical-align: middle;
}
.map-section .popup-info-group:has(p) p {
  margin: 0;
}
.map-section .popup-info-group .popup-info-title-name p {
  margin: 8px 0;
  padding: 4px 8px;
  background-color: #2ec4c2;
  color: #03090A;
  font-weight: 600;
  border-radius: 4px;
  text-align: center;
}
.map-section .apexcharts-tooltip span {
  color: #323232;
}
.map-section .air-quality-info-group .air-quality {
  display: flex;
  align-items: center;
}
.map-section .air-quality-info-group .air-quality .air-quality-icon {
  display: inline-block;
  margin: 8px 4px 8px 0;
  width: 16px;
  height: 16px;
  background-color: #ccc;
  border-radius: 50%;
}
.map-section .air-quality-info-group .air-quality .air-quality-icon.good {
  background-color: #009858;
}
.map-section .air-quality-info-group .air-quality .air-quality-icon.normal {
  background-color: #edde4d;
}
.map-section .air-quality-info-group .air-quality .air-quality-icon.bad {
  background-color: #d70f0e;
}
.map-section .air-quality-info-group .air-info {
  display: flex;
}
.map-section .air-quality-info-group .air-info > p {
  margin: 4px 8px 4px 0 !important;
}
.map-section .human-feature-info-group .human-feature-gender-data .human-feature-gender-icon,
.map-section .human-feature-info-group .human-feature-gender-data .vd-category-icon,
.map-section .human-feature-info-group .human-feature-gender-data .human-feature-icon,
.map-section .human-feature-info-group .vd-category-data .human-feature-gender-icon,
.map-section .human-feature-info-group .vd-category-data .vd-category-icon,
.map-section .human-feature-info-group .vd-category-data .human-feature-icon,
.map-section .vd-info-group .human-feature-gender-data .human-feature-gender-icon,
.map-section .vd-info-group .human-feature-gender-data .vd-category-icon,
.map-section .vd-info-group .human-feature-gender-data .human-feature-icon,
.map-section .vd-info-group .vd-category-data .human-feature-gender-icon,
.map-section .vd-info-group .vd-category-data .vd-category-icon,
.map-section .vd-info-group .vd-category-data .human-feature-icon {
  margin-right: 4px;
  width: var(--popup-info-icon);
  height: var(--popup-info-icon);
}
.map-section .human-feature-info-group .human-feature-gender-data p,
.map-section .human-feature-info-group .vd-category-data p,
.map-section .vd-info-group .human-feature-gender-data p,
.map-section .vd-info-group .vd-category-data p {
  display: flex;
  align-items: center;
}
.map-section .human-feature-info-group .human-feature-gender-data .human-feature-table-wrapper,
.map-section .human-feature-info-group .vd-category-data .human-feature-table-wrapper,
.map-section .vd-info-group .human-feature-gender-data .human-feature-table-wrapper,
.map-section .vd-info-group .vd-category-data .human-feature-table-wrapper {
  overflow-y: scroll;
  scrollbar-width: none;
}
.map-section .human-feature-info-group .human-feature-gender-data .human-feature-table-wrapper::-webkit-scrollbar,
.map-section .human-feature-info-group .vd-category-data .human-feature-table-wrapper::-webkit-scrollbar,
.map-section .vd-info-group .human-feature-gender-data .human-feature-table-wrapper::-webkit-scrollbar,
.map-section .vd-info-group .vd-category-data .human-feature-table-wrapper::-webkit-scrollbar {
  display: none;
}
.map-section .human-feature-info-group .human-feature-gender-data .human-feature-table-wrapper .human-feature-table thead,
.map-section .human-feature-info-group .vd-category-data .human-feature-table-wrapper .human-feature-table thead,
.map-section .vd-info-group .human-feature-gender-data .human-feature-table-wrapper .human-feature-table thead,
.map-section .vd-info-group .vd-category-data .human-feature-table-wrapper .human-feature-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #272a2c !important;
}
.map-section .human-feature-info-group .human-feature-gender-data p,
.map-section .vd-info-group .human-feature-gender-data p {
  margin-bottom: 12px;
}
.map-section .vehicle-feature-info-group .vehicle-feature-lpr-amount {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  border-bottom: #494b4e solid 1px;
}
.map-section .vehicle-feature-info-group .vehicle-feature-lpr-amount span:nth-child(1) {
  margin-right: 4px;
}
.map-section .vehicle-feature-info-group .vehicle-feature-lpr-amount span:nth-child(2) {
  font-size: 1.25rem;
}
.map-section #VDChart {
  display: none;
  position: relative;
  height: 30vh;
  overflow: hidden;
}
.map-section .update-time {
  margin-bottom: 4px;
  color: #C0C3C5;
  font-variant-numeric: tabular-nums;
}
.map-section .IID-event-data .iid-event-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.map-section .IID-event-data .iid-event-icon img {
  margin-right: 4px;
  width: var(--popup-info-icon);
  height: var(--popup-info-icon);
}
.map-section .IID-event-data table th {
  padding: 0.2rem 0.5rem;
}
.map-section .qld-info-group .qld-data .qld-level {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.map-section .qld-info-group .qld-data .qld-level span {
  display: inline-block;
  margin-right: 4px;
  width: 16px;
  height: 16px;
  background-color: lightgray;
  border-radius: 50%;
}
.map-section .qld-info-group .qld-data .qld-level span.Smooth {
  background-color: #c4ffef;
}
.map-section .qld-info-group .qld-data .qld-level span.Heavy {
  background-color: #ffec1c;
}
.map-section .qld-info-group .qld-data .qld-level span.Congested {
  background-color: #e36962;
}
.map-section .tte-info-group .tte-event-data .tte-event-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.map-section .tte-info-group .tte-event-data .tte-event-icon img {
  margin-right: 4px;
  width: var(--popup-info-icon);
  height: var(--popup-info-icon);
}
.map-section .tte-info-group table th {
  padding: 0.2rem 0.5rem;
}
.map-section .parking-lots-info-group .parking-lots-data-group {
  line-height: 2;
}
.map-section .parking-lots-info-group .parking-lots-data-group .parking-note,
.map-section .parking-lots-info-group .parking-lots-data-group .parking-car,
.map-section .parking-lots-info-group .parking-lots-data-group .parking-motor,
.map-section .parking-lots-info-group .parking-lots-data-group .parking-occupancy-rate,
.map-section .parking-lots-info-group .parking-lots-data-group .parking-updatetime {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  text-wrap: wrap;
}
.map-section .vehicle-feature-type-data,
.map-section .IID-event-data,
.map-section .tte-event-data {
  max-height: 486px;
  overflow-y: auto;
}
.map-section .vehicle-feature-type-data table,
.map-section .IID-event-data table,
.map-section .tte-event-data table {
  width: 98%;
}
.map-section .vehicle-feature-type-data table tbody tr td .vehicle-picture-btn,
.map-section .vehicle-feature-type-data table tbody tr td .iid-picture-playback-btn,
.map-section .vehicle-feature-type-data table tbody tr td .tte-picture-playback-btn,
.map-section .IID-event-data table tbody tr td .vehicle-picture-btn,
.map-section .IID-event-data table tbody tr td .iid-picture-playback-btn,
.map-section .IID-event-data table tbody tr td .tte-picture-playback-btn,
.map-section .tte-event-data table tbody tr td .vehicle-picture-btn,
.map-section .tte-event-data table tbody tr td .iid-picture-playback-btn,
.map-section .tte-event-data table tbody tr td .tte-picture-playback-btn {
  background-image: url(/img/pictureSolid.e56add30.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  width: 16px;
  height: 16px;
  border: none;
  /* Hide text while keeping it accessible. JS中html 要有字，modal才能顯示照片 */
  text-indent: -9999px;
}
.map-section table.vehicle-feature-info-table td,
.map-section table.vehicle-feature-info-table th {
  text-align: center;
}
.map-section .vds-body-container {
  display: flex;
  gap: 12px;
  min-width: 36vw;
}
.map-section .vds-body-container .vds-chord-chart {
  width: 45%;
}
.map-section .vds-body-container .vds-chord-chart canvas {
  filter: saturate(2);
  transform: scale(0.8);
}
.map-section .vds-body-container .vds-chord-chart .g2-tooltip {
  background-color: rgb(0, 0, 0) !important;
  color: #f2f2f2 !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
}
.map-section .vds-body-container .vds-category-data {
  width: 55%;
}
.map-section .vds-body-container table.VDS-info-table {
  border-collapse: collapse;
}
.map-section .vds-body-container table.VDS-info-table td,
.map-section .vds-body-container table.VDS-info-table th {
  border: 1px solid rgb(10, 10, 10);
  text-align: center;
}
.map-section .vds-body-container table.VDS-info-table thead > tr:nth-child(1) > th:nth-child(1) {
  background-color: #065ba0;
}
.map-section .vds-body-container table.VDS-info-table thead > tr:nth-child(1) > th:nth-child(2) {
  background-color: #0b7c7b;
}
.map-section .vds-body-container table.VDS-info-table thead > tr:nth-child(1) > th:nth-child(3) {
  background-color: #846d3c;
}
.map-section .vds-body-container table.VDS-info-table thead > tr:nth-child(1) > th:nth-child(4) {
  background-color: #8e3b57;
}
.map-section .vds-body-container table.VDS-info-table thead > tr:nth-child(2) > th {
  background-color: #393f44;
}
.map-section .vds-body-container table.VDS-info-table .vds-info-category-icon,
.map-section .vds-body-container table.VDS-info-table .vds-info-direction-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.map-section .vds-body-container table.VDS-info-table .vds-info-category-icon img,
.map-section .vds-body-container table.VDS-info-table .vds-info-direction-icon img {
  padding: 4px;
  width: 24px;
  height: 24px;
}
.map-section .toast-container {
  color: #262b31;
}
.map-section .toast-container .toast-header,
.map-section .toast-container .toast-body {
  font-size: 1rem;
}

.picture-btn {
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.87);
  cursor: pointer;
}

.water-level-info-group .water-level-note .picture-btn {
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.87);
  cursor: pointer;
}

.pedestrian-modal-info-wrap {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "header header" "basic-info feature-info" "people-pic feature-pic";
  grid-gap: 4px;
}
.pedestrian-modal-info-wrap .pedestrian-section {
  width: 100%;
  min-height: 20px;
  background-color: #21262c;
  border: 1px solid lightblue;
}
.pedestrian-modal-info-wrap .pedestrian-header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info {
  grid-area: basic-info;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info .gender {
  display: flex;
  justify-content: center;
  width: 100%;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info .gender img {
  width: 18px;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info .head-pic {
  width: 100%;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info .head-pic img {
  width: 100%;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info {
  grid-area: feature-info;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .top-wrap,
.pedestrian-modal-info-wrap .pedestrian-feature-info .bottom-wrap {
  display: flex;
  align-items: center;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .top-wrap .top-color,
.pedestrian-modal-info-wrap .pedestrian-feature-info .top-wrap .bottom-color,
.pedestrian-modal-info-wrap .pedestrian-feature-info .bottom-wrap .top-color,
.pedestrian-modal-info-wrap .pedestrian-feature-info .bottom-wrap .bottom-color {
  display: inline-block;
  margin-right: 4px;
  width: 18px;
  height: 18px;
  border: 1px solid #6f6f6f;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .top-wrap .top-color.pattern,
.pedestrian-modal-info-wrap .pedestrian-feature-info .top-wrap .bottom-color.pattern,
.pedestrian-modal-info-wrap .pedestrian-feature-info .bottom-wrap .top-color.pattern,
.pedestrian-modal-info-wrap .pedestrian-feature-info .bottom-wrap .bottom-color.pattern {
  background-image: url(/img/pattern.d26ed97c.svg);
  background-size: cover;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px;
  padding: 2px 8px;
  background: rgb(3, 118, 156);
  border-radius: 5px;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item-image img {
  margin-right: 4px;
  width: 100%;
}
.pedestrian-modal-info-wrap .pedestrian-people-pic {
  grid-area: people-pic;
}
.pedestrian-modal-info-wrap .pedestrian-people-pic img {
  width: 100%;
}
.pedestrian-modal-info-wrap .pedestrian-feature-pic {
  grid-area: feature-pic;
}
.pedestrian-modal-info-wrap .pedestrian-feature-pic img {
  width: 100%;
}

.playback-btn {
  cursor: pointer;
}

.leaflet-popup-content {
  width: -moz-fit-content !important;
  width: fit-content !important;
}
.leaflet-popup-content td .picture-btn {
  background-image: url(/img/pictureSolid.e56add30.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  width: 16px;
  height: 16px;
  border: none;
  /* Hide text while keeping it accessible. JS中html 要有字，modal才能顯示照片 */
  text-indent: -9999px;
}

.pedestrian-modal-info-wrap .pedestrian-section {
  border: none;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info,
.pedestrian-modal-info-wrap .pedestrian-people-pic,
.pedestrian-modal-info-wrap .pedestrian-feature-pic {
  background-color: rgba(0, 0, 0, 0.2);
}
.pedestrian-modal-info-wrap .pedestrian-header {
  padding: 8px 12px;
  vertical-align: middle;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
}
.pedestrian-modal-info-wrap .pedestrian-header .playback span {
  margin-right: 6px;
}
.pedestrian-modal-info-wrap .pedestrian-header .playback .playback-btn {
  padding: 4px;
  background-color: #29b3b0;
}
.pedestrian-modal-info-wrap .pedestrian-header .playback .playback-btn .fa-solid {
  color: #262b31;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info .gender {
  padding: 8px;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info table {
  margin-bottom: 6px;
  border: transparent;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info table tr {
  border-top: none;
  border-bottom: 1px solid #606060;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  padding: 8px 8px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item .pill-item-image {
  width: 40px;
  height: 40px;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item .pill-item-image img {
  width: inherit;
  height: inherit;
  margin-right: 0;
}
.pedestrian-modal-info-wrap .pedestrian-feature-pic {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vehicle-modal-info-wrap {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "header header" "basic-info lpr" "logo car-pic";
  grid-gap: 4px;
}
.vehicle-modal-info-wrap .vehicle-section {
  width: 100%;
  min-height: 20px;
  background-color: #21262c;
  border: 1px solid lightblue;
}
.vehicle-modal-info-wrap .vehicle-header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
}
.vehicle-modal-info-wrap .vehicle-basic-info {
  grid-area: basic-info;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vehicle-modal-info-wrap .vehicle-basic-info .vehicle-color-wrap .vehicle-color {
  display: inline-block;
  margin-right: 4px;
  width: 18px;
  height: 18px;
  border: 1px solid #6f6f6f;
}
.vehicle-modal-info-wrap .vehicle-basic-info .vehicle-icon {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  width: 100%;
}
.vehicle-modal-info-wrap .vehicle-basic-info .vehicle-icon img {
  width: 80%;
}
.vehicle-modal-info-wrap .vehicle-lpr {
  grid-area: lpr;
}
.vehicle-modal-info-wrap .vehicle-lpr .subtitle {
  width: 100%;
}
.vehicle-modal-info-wrap .vehicle-lpr .subtitle p {
  text-align: center;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body {
  display: flex;
  gap: 4px;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-pic {
  width: 65%;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-pic img {
  width: 100%;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 35%;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-info .lpr-color-wrap .lpr-color {
  display: inline-block;
  margin-right: 4px;
  width: 18px;
  height: 18px;
  border: 1px solid #6f6f6f;
}
.vehicle-modal-info-wrap .vehicle-brand {
  grid-area: logo;
}
.vehicle-modal-info-wrap .vehicle-brand p {
  width: 100%;
  text-align: center;
}
.vehicle-modal-info-wrap .vehicle-brand .logo-pic {
  display: flex;
  justify-content: center;
  width: 100%;
}
.vehicle-modal-info-wrap .vehicle-brand .logo-pic img {
  width: 90%;
}
.vehicle-modal-info-wrap .vehicle-pic {
  grid-area: car-pic;
  width: 100%;
}
.vehicle-modal-info-wrap .vehicle-pic img {
  width: 100%;
}

.vehicle-feature-table-wrapper {
  max-height: 180px;
  overflow-y: scroll;
  scrollbar-width: none;
}
.vehicle-feature-table-wrapper::-webkit-scrollbar {
  display: none;
}
.vehicle-feature-table-wrapper .vehicle-feature-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #272a2c !important;
}

.air-pollution-info-group .aqi-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 8px 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 30px solid lightgrey;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical.good {
  border: 5px solid #009858;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical.moderate {
  border: 5px solid #edde4d;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical.poor {
  border: 5px solid #d70f0e;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical h1,
.air-pollution-info-group .aqi-wrap .aqi-numerical p {
  margin: 0;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical p:nth-child(2) {
  font-size: 1.5rem;
}
.air-pollution-info-group .aqi-wrap .air-pollution-data {
  width: 100%;
}
.air-pollution-info-group .aqi-wrap .air-pollution-data table.air-pollution-table {
  width: 100%;
}

.uv-info-group .uvLevelInfo.Low {
  color: #a7cd21;
  font-weight: 700;
}
.uv-info-group .uvLevelInfo.Moderate {
  color: #fbbc23;
  font-weight: 700;
}
.uv-info-group .uvLevelInfo.High {
  color: #e57200;
  font-weight: 700;
}
.uv-info-group .uvLevelInfo.Very.High {
  color: #d32d1b;
  font-weight: 700;
}
.uv-info-group .uvLevelInfo.Extreme {
  color: #ac4a9b;
  font-weight: 700;
}

.chart-wrap {
  width: 100%;
}
.chart-wrap .temperatureChart,
.chart-wrap .humidityChart {
  position: relative;
  width: 100%;
  height: 30vh;
  overflow: hidden;
}

.access-control-table-wrapper {
  max-height: 160px;
  overflow-y: scroll;
  scrollbar-width: none;
}
.access-control-table-wrapper::-webkit-scrollbar {
  display: none;
}
.access-control-table-wrapper .access-control-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #272a2c !important;
}

.door-status-info-group .door-status-info-data .door-status-group,
.door-status-info-group .door-status-info-data .fan-status-group,
.door-status-info-group .fan-status-info-data .door-status-group,
.door-status-info-group .fan-status-info-data .fan-status-group,
.fan-status-info-group .door-status-info-data .door-status-group,
.fan-status-info-group .door-status-info-data .fan-status-group,
.fan-status-info-group .fan-status-info-data .door-status-group,
.fan-status-info-group .fan-status-info-data .fan-status-group {
  display: flex;
  align-items: center;
}
.door-status-info-group .door-status-info-data .door-status-group .door-status,
.door-status-info-group .door-status-info-data .door-status-group .fan-status,
.door-status-info-group .door-status-info-data .fan-status-group .door-status,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status,
.door-status-info-group .fan-status-info-data .door-status-group .door-status,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status,
.fan-status-info-group .door-status-info-data .door-status-group .door-status,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status {
  margin-right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: lightgrey;
}
.door-status-info-group .door-status-info-data .door-status-group .door-status.Door.Closed, .door-status-info-group .door-status-info-data .door-status-group .door-status.Fan.Off,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Closed,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.Off,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Closed,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.Off,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Closed,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.Off,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Closed,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.Off,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Closed,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.Off,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Closed,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.Off,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Closed,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.Off,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Door.Closed,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Fan.Off,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Closed,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.Off,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Closed,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.Off,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Closed,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.Off {
  background-color: #8bb762;
}
.door-status-info-group .door-status-info-data .door-status-group .door-status.Door.Open, .door-status-info-group .door-status-info-data .door-status-group .door-status.Fan.On,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Open,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.On,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Open,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.On,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Open,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.On,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Open,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.On,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Open,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.On,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Open,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.On,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Open,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.On,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Door.Open,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Fan.On,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Open,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.On,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Open,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.On,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Open,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.On,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Open,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.On,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Open,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.On,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Open,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.On,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Open,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.On {
  background-color: #a03737;
}

.oil-level-info-group .oil-level-info-data .oil-level-group {
  display: flex;
  align-items: center;
}
.oil-level-info-group .oil-level-info-data .oil-level-group .oil-level {
  margin-right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: lightgrey;
}
.oil-level-info-group .oil-level-info-data .oil-level-group .oil-level.normal {
  background-color: #009858;
}
.oil-level-info-group .oil-level-info-data .oil-level-group .oil-level.high {
  background-color: #ef3f4d;
}
.oil-level-info-group .oil-level-info-data .oil-level-group .oil-level.low {
  background-color: #edde4d;
}

.map-section-body #map-charts {
  position: relative;
}

#map-charts.collapsed {
  width: 0px;
}
#map-charts.collapsed .map-chart-group {
  visibility: hidden !important;
  opacity: 0;
  transition: visibility 0s linear 0.3s;
}

.map-container.collapsed {
  width: 100%;
}

.leaflet-top .leaflet-control-zoom-in,
.leaflet-top .leaflet-control-zoom-out {
  border: 1px solid #C0C3C5;
}
.leaflet-top .leaflet-control-zoom-in span,
.leaflet-top .leaflet-control-zoom-out span {
  margin-left: -0.5px;
}
.leaflet-top .leaflet-control-fullscreen-button {
  border: 1px solid #C0C3C5 !important;
}
.leaflet-top .leaflet-control-zoom-in,
.leaflet-top .leaflet-control-zoom-out,
.leaflet-top .leaflet-control-fullscreen-button {
  background-color: #333b44;
  color: #f2f2f2;
}
.leaflet-top .leaflet-control-zoom-in:hover,
.leaflet-top .leaflet-control-zoom-out:hover,
.leaflet-top .leaflet-control-fullscreen-button:hover {
  background-color: #262b31;
}
.leaflet-top .leaflet-control-zoom-in.active, .leaflet-top .leaflet-control-zoom-in:active,
.leaflet-top .leaflet-control-zoom-out.active,
.leaflet-top .leaflet-control-zoom-out:active,
.leaflet-top .leaflet-control-fullscreen-button.active,
.leaflet-top .leaflet-control-fullscreen-button:active {
  background-color: #181b1f;
  text-decoration: none;
}
.leaflet-top .leaflet-control-zoom-out {
  border-top: none;
}

.leaflet-control-fullscreen-button {
  background-color: #333b44 !important;
  color: #f2f2f2;
}
.leaflet-control-fullscreen-button:hover {
  background-color: #262b31 !important;
}
.leaflet-control-fullscreen-button.active, .leaflet-control-fullscreen-button:active {
  background-color: #181b1f !important;
  text-decoration: none;
}

.leaflet-control-fullscreen a {
  background-size: 20px 20px;
}

.leaflet-touch .leaflet-control-fullscreen a {
  background-position: 4px 4px !important;
}

.map-container .map-tools {
  gap: 10px !important;
}
.map-container .map-tools .district-button,
.map-container .map-tools .village-button {
  width: 30px;
  height: 30px;
  border: 1px solid #C0C3C5;
  border-radius: 2px;
  padding: 4px;
}

.map-section-body .map-container .zone-tools small {
  color: #C0C3C5;
}

.leaflet-container .leaflet-control-attribution {
  background: #333b44;
  color: #C0C3C5;
}
.leaflet-container .leaflet-control-attribution a {
  color: #29b3b0;
}

.vehicle-modal-info-wrap .vehicle-section {
  border: none;
}
.vehicle-modal-info-wrap .vehicle-section:not(.vehicle-header) {
  background-color: rgba(0, 0, 0, 0.2);
}
.vehicle-modal-info-wrap .vehicle-header {
  padding: 8px 12px;
  vertical-align: middle;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
}
.vehicle-modal-info-wrap .vehicle-header .playback span {
  margin-right: 6px;
}
.vehicle-modal-info-wrap .vehicle-header .playback .playback-btn {
  padding: 4px;
  background-color: #29b3b0;
}
.vehicle-modal-info-wrap .vehicle-header .playback .playback-btn .fa-solid {
  color: #262b31;
}
.vehicle-modal-info-wrap .subtitle {
  padding: 8px;
}
.vehicle-modal-info-wrap .vehicle-type-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 8px;
  height: -webkit-fill-available;
}
.vehicle-modal-info-wrap .vehicle-lpr-body {
  background-color: rgba(0, 0, 0, 0.2);
}
.vehicle-modal-info-wrap .vehicle-lpr-body .lpr-info {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vehicle-modal-info-wrap .vehicle-lpr-body .lpr-info .lpr {
  padding: 12px 8px 8px 8px;
  border: 1px solid #C0C3C5;
  border-radius: 6px;
  position: relative;
}
.vehicle-modal-info-wrap .vehicle-lpr-body .lpr-info .lpr::before, .vehicle-modal-info-wrap .vehicle-lpr-body .lpr-info .lpr::after {
  content: "";
  position: absolute;
  top: 3px;
  height: 6px;
  width: 12px;
  border: 1px solid #C0C3C5;
  border-radius: 3px;
}
.vehicle-modal-info-wrap .vehicle-lpr-body .lpr-info .lpr::before {
  left: 5px;
}
.vehicle-modal-info-wrap .vehicle-lpr-body .lpr-info .lpr::after {
  right: 5px;
}
.vehicle-modal-info-wrap .vehicle-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.leaflet-popup-content table img {
  max-width: unset !important;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: 2px solid transparent;
}

.leaflet-bar a:last-child {
  border-bottom: 1px solid #C0C3C5;
}

.leaflet-popup-content:has(.qld-info-group) {
  min-width: 140px !important;
}

.map-section .update-time {
  font-family: monospace;
}

.modal-body .date-time {
  font-family: monospace;
}
.modal-body .IID-picture-playback-wrap,
.modal-body .TTE-picture-playback-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modal-body .IID-picture-playback-wrap .IID-picture-group,
.modal-body .IID-picture-playback-wrap .IID-playback-group,
.modal-body .IID-picture-playback-wrap .TTE-picture-group,
.modal-body .IID-picture-playback-wrap .TTE-playback-group,
.modal-body .TTE-picture-playback-wrap .IID-picture-group,
.modal-body .TTE-picture-playback-wrap .IID-playback-group,
.modal-body .TTE-picture-playback-wrap .TTE-picture-group,
.modal-body .TTE-picture-playback-wrap .TTE-playback-group {
  width: calc(50% - 4px);
}
@media only screen and (max-width: 768px) {
  .modal-body .IID-picture-playback-wrap .IID-picture-group,
  .modal-body .IID-picture-playback-wrap .IID-playback-group,
  .modal-body .IID-picture-playback-wrap .TTE-picture-group,
  .modal-body .IID-picture-playback-wrap .TTE-playback-group,
  .modal-body .TTE-picture-playback-wrap .IID-picture-group,
  .modal-body .TTE-picture-playback-wrap .IID-playback-group,
  .modal-body .TTE-picture-playback-wrap .TTE-picture-group,
  .modal-body .TTE-picture-playback-wrap .TTE-playback-group {
    width: 100%;
  }
}

.vds-info-category-icon img {
  padding: 4px;
  width: 36px !important;
  height: 36px !important;
}

.map-section .legend {
  background: #262b31;
  padding: 8px 12px;
}
.map-section .legend .legend-title {
  font-size: 14px;
}
.map-section .legend .legend-unit {
  background-color: rgba(0, 0, 0, 0.2);
  margin: 12px 0;
  font-size: 14px;
}
.map-section .legend .legend-item {
  padding: 4px 0;
  gap: 6px;
}
.map-section .legend .legend-item .wind-img,
.map-section .legend .legend-item .uv-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.map-section .legend .legend-body {
  gap: 12px;
}
.map-section .legend .legend-body .legend-ruler {
  gap: 4px;
  transform: unset;
}
.map-section .legend .legend-body .legend-ruler .number {
  font-size: 14px;
  width: unset;
}
.map-section .legend .legend-body .legend-ruler .number.over-300 {
  transform: unset;
}
.map-section .legend .legend-body .legend-ruler .number:first-child {
  margin-bottom: 3px;
}
.map-section .legend .legend-body .legend-item-group .square {
  height: 22px;
}
.map-section .legend .legend-body-wrap .legend-levels {
  margin-left: 12px;
}
.map-section .legend .legend-body-wrap .legend-levels p {
  padding: 4px 0;
}
.map-section .leaflet-popup-content:has(.environment-info-group) {
  min-width: 200px !important;
}
.map-section .leaflet-popup-content .water-level-picture-btn {
  position: relative;
  padding-left: 34px;
}
.map-section .leaflet-popup-content .water-level-picture-btn::before {
  position: absolute;
  top: 11px;
  left: 14px;
  content: "";
  background-image: url(/img/pictureSolid.e56add30.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
}
.map-section .leaflet-popup-content .water-level-picture-btn {
  border: none;
}
.map-section .environment-info-group .environment-note {
  line-height: 2;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 6px;
  text-wrap: wrap;
}
.map-section .environment-info-group .environment-note div {
  display: flex;
  justify-content: space-between;
}
.map-section .water-level-info-group .water-level-note div {
  display: flex;
  justify-content: space-between;
}
.map-section .water-level-info-group .water-level-note .picture-btn {
  width: 100%;
}
.map-section .update-time {
  margin-bottom: 6px;
}
.map-section .air-pollution-info-group .aqi-wrap .aqi-numerical {
  width: 130px;
  height: 130px;
  margin: 24px;
  margin-top: 12px;
}
.map-section .air-pollution-info-group .aqi-wrap .aqi-numerical p {
  padding: 4px 0;
}
.map-section .uv-level,
.map-section .uv-index {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.map-tiles {
  filter: var(--map-tiles-filter);
}

.air-pollution-info-group .aqi-wrap .aqi-numerical.good {
  border: 5px solid #24d13b;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical.moderate {
  border: 5px solid #ffeb0a;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical.poor {
  border: 5px solid #e02626;
}

.map-section .leaflet-popup-content .access-control-info-group tbody td {
  padding: 8px 12px !important;
}

.access-control-table-wrapper .access-control-table td {
  padding: 8px 12px;
}

.door-status-info-group .door-status-info-data .door-status-group .door-status.Door.Closed, .door-status-info-group .door-status-info-data .door-status-group .door-status.Fan.Off,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Closed,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.Off,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Closed,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.Off,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Closed,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.Off,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Closed,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.Off,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Closed,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.Off,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Closed,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.Off,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Closed,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.Off,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Door.Closed,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Fan.Off,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Closed,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.Off,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Closed,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.Off,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Closed,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.Off {
  background-color: #a03737;
}
.door-status-info-group .door-status-info-data .door-status-group .door-status.Door.Open, .door-status-info-group .door-status-info-data .door-status-group .door-status.Fan.On,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Open,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.On,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Open,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.On,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Open,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.On,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Open,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.On,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Open,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.On,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Open,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.On,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Open,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.On,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Door.Open,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Fan.On,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Open,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.On,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Open,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.On,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Open,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.On,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Open,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.On,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Open,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.On,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Open,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.On,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Open,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.On {
  background-color: #8bb762;
}

.force-icon {
  width: 12px;
  height: 12px;
  clip-path: polygon(50% 0%, 100% 100%, 50% 75%, 0 100%);
  background-color: #363d46;
  transform: rotate(90deg);
}
.force-icon.force0 {
  background-color: #e4e4e4;
  clip-path: none;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  /* Calm, no wind */
}
.force-icon.force1 {
  background-color: #a3c4d7;
  /* Light air */
}
.force-icon.force2 {
  background-color: #3accff;
  /* Light breeze */
}
.force-icon.force3 {
  background-color: #43e7e8;
  /* Gentle breeze */
}
.force-icon.force4 {
  background-color: #42ebbe;
  /* Moderate breeze */
}
.force-icon.force5 {
  background-color: #37cc01;
  /* Fresh breeze */
}
.force-icon.force6 {
  background-color: #c7f774;
  /* Strong breeze */
}
.force-icon.force7 {
  background-color: #e6e5b8;
  /* Near gale */
}
.force-icon.force8 {
  background-color: #ffff00;
  /* Gale */
}
.force-icon.force9 {
  background-color: #fccb66;
  /* Strong gale */
}
.force-icon.force10 {
  background-color: #fa9a02;
  /* Storm */
}
.force-icon.force11 {
  background-color: #f86566;
  /* Violent storm */
}
.force-icon.force12 {
  background-color: #f968fc;
  /* Hurricane */
}

.map-section .human-feature-info-group .human-feature-gender-data .human-feature-table-wrapper {
  max-height: 185px;
}

.map-section .vd-info-group .vd-category-data p {
  line-height: 2;
}
.map-section .vd-info-group .vd-category-data p img {
  margin-top: -4px;
}

.parking-updatetime span:nth-child(2) {
  font-family: monospace;
}

.door-status-info-group .door-status-info-data .door-status-group .door-status.Door.Closed {
  background-color: #C0C3C5;
}

.map-section .vehicle-feature-type-data,
.map-section .IID-event-data,
.map-section .tte-event-data {
  max-height: 486px;
  overflow-y: auto;
}
.map-section .vehicle-feature-type-data table,
.map-section .IID-event-data table,
.map-section .tte-event-data table {
  width: 98%;
}
.map-section .vehicle-feature-type-data table tbody tr td .iid-playback-btn,
.map-section .vehicle-feature-type-data table tbody tr td .tte-playback-btn,
.map-section .IID-event-data table tbody tr td .iid-playback-btn,
.map-section .IID-event-data table tbody tr td .tte-playback-btn,
.map-section .tte-event-data table tbody tr td .iid-playback-btn,
.map-section .tte-event-data table tbody tr td .tte-playback-btn {
  background-image: url(/img/playbackSolid.b7e6bc6a.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  width: 16px;
  height: 16px;
  border: none;
  /* Hide text while keeping it accessible. JS中html 要有字，modal才能顯示照片 */
  text-indent: -9999px;
}
.map-section .update-time {
  margin-bottom: 6px;
}
.map-section .update-frequency {
  margin-bottom: 6px;
  color: #C0C3C5;
}
.map-section .temperature-chart-wrap,
.map-section .humidity-chart-wrap {
  margin-top: 24px;
  margin-bottom: 12px;
}

.map-section .vds-body-container .vds-category-data {
  width: unset;
  flex-grow: 1;
}

/*
** 設備報修scss
*/
.popup-info-group .device-details .device-status {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.popup-info-group .device-details .device-status span {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: lightgrey;
}
.popup-info-group .device-details .device-status span:nth-child(1) {
  margin-right: 8px;
}
.popup-info-group .device-details .device-status span.Normal {
  background-color: #009858;
}
.popup-info-group .device-details .device-status span.Abnormal {
  background-color: #ef3f4d;
}
.popup-info-group .device-details .device-status span.Under.repair {
  background-color: #edde4d;
}

.idc-info-group .idc-table-wrap {
  max-height: 195px;
  overflow-y: scroll;
  scrollbar-width: none;
}
.idc-info-group .idc-table-wrap::-webkit-scrollbar {
  display: none;
}
.idc-info-group .idc-table-wrap .idc-table-group .device-name {
  padding: 8px 4px;
  border: rgba(255, 255, 255, 0.38) 1px solid;
}
.idc-info-group .idc-table-wrap .idc-table-group table {
  margin-bottom: 8px;
  width: 100%;
}
.idc-info-group .idc-table-wrap .idc-table-group table thead tr th:nth-of-type(1) {
  width: 70%;
}
.idc-info-group .idc-table-wrap .idc-table-group table thead tr th:nth-of-type(2) {
  width: 30%;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody .device-status-wrap {
  display: flex;
  align-items: center;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody .device-status-wrap .device-status {
  display: inline-block;
  margin-right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: lightgrey;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody .device-status-wrap .device-status.normal {
  background-color: #009858;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody .device-status-wrap .device-status.abnormal {
  background-color: #ef3f4d;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody .device-status-wrap .device-status.under-repair {
  background-color: #edde4d;
}

.popup-info-group .device-details {
  line-height: 2;
}

.idc-info-group .idc-address {
  margin-bottom: 6px;
}
.idc-info-group .idc-table-wrap {
  max-height: 290px;
}
.idc-info-group .idc-table-wrap .idc-table-group .device-name {
  padding: 8px 12px;
}
.idc-info-group .idc-table-wrap .idc-table-group table thead {
  display: none;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody .device-status-wrap {
  flex-wrap: wrap;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody tr td:nth-of-type(1) {
  width: 260px;
  max-width: 260px;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody tr td:nth-of-type(2) {
  width: 140px;
  max-width: 140px;
}
.idc-info-group .idc-table-wrap .idc-table-group table td {
  padding: 8px 12px;
  text-wrap: wrap;
}

.pedestrian-modal-info-wrap {
  display: grid;
  grid-template-columns: 1fr 6fr;
  grid-template-rows: auto auto;
  grid-template-areas: "header header" "basic-info feature-info" "people-pic feature-pic";
  grid-gap: 4px;
}

.pedestrian-modal-info-wrap .pedestrian-feature-pic {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pedestrian-modal-info-wrap .pedestrian-feature-pic img,
.pedestrian-modal-info-wrap .pedestrian-feature-pic video {
  flex: 1;
  width: 50%;
}

.vehicle-modal-info-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "header header header" "lpr basic-info logo" "car-pic car-pic car-pic";
  grid-gap: 4px;
}

.vehicle-modal-info-wrap .vehicle-type-body {
  justify-content: space-between;
  background-color: transparent;
  margin-bottom: 12px;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  background-color: transparent;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-pic,
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-info {
  width: 100%;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-info {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: bold;
}
.vehicle-modal-info-wrap .vehicle-brand {
  justify-content: space-between;
}
.vehicle-modal-info-wrap .vehicle-brand .vehicle-brand-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  margin-bottom: 12px;
  gap: 24px;
  padding: 8px;
}
.vehicle-modal-info-wrap .vehicle-pic {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vehicle-modal-info-wrap .vehicle-pic video {
  flex: 1;
  width: 50%;
}
.vehicle-modal-info-wrap .vehicle-pic img {
  width: 50%;
  max-height: 300px;
  -o-object-fit: contain;
     object-fit: contain;
}

.vehicle-modal-info-wrap .vehicle-basic-info .vehicle-icon img {
  width: 160px;
  height: 160px;
}

.vehicle-modal-info-wrap .vehicle-brand .logo-pic img {
  width: 160px;
  height: 160px;
}

.map-section-body .map-container .zone-tools {
  height: -moz-fit-content;
  height: fit-content;
  padding: 4px 8px;
  flex-wrap: wrap;
}

@media only screen and (max-width: 1280px) {
  .map-section-body {
    height: -moz-fit-content;
    height: fit-content;
    flex-direction: column;
  }
  .map-section-body #map-charts,
  .map-section-body .map-container {
    width: 100%;
  }
  .map-section-body .map-charts-collapse-btn {
    display: none;
  }
  .map-section-body #map-charts {
    height: 220px;
    overflow-y: scroll;
  }
  .map-section-body .map-container {
    height: -moz-fit-content;
    height: fit-content;
  }
  .map-section-body .map-container #map {
    height: 500px;
  }
}
@media only screen and (max-width: 768px) {
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content {
    width: 200px !important;
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.vd-info-group), .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.vds-info-group), .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.IID-info-group), .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.tte-info-group), .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.parking-lots-info-group) {
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.vds-info-group) {
    width: 200px !important;
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.vds-info-group) .vds-body-container {
    height: 260px;
    overflow-x: scroll;
  }
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.vds-info-group) .vds-body-container #chord-container-1 {
    display: none;
  }
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .human-feature-table-wrapper table th:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .human-feature-table-wrapper table td:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .vehicle-feature-table-wrapper table th:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .vehicle-feature-table-wrapper table td:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .IID-event-data table th:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .IID-event-data table td:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .tte-event-data table th:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .tte-event-data table td:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)) {
    /* Your styles for the selected columns */
    display: none;
    /* Example style */
  }
  .map-section .idc-info-group .idc-address {
    text-wrap: balance;
    margin-bottom: 6px;
  }
  .map-section .idc-info-group .device-status-wrap {
    float: right;
  }
  .map-section .idc-info-group .device-status-wrap span:nth-child(2) {
    display: none;
  }
}
@media only screen and (max-width: 1280px) {
  :root {
    --popup-info-icon: 20px;
  }
}
@media only screen and (max-width: 576px) {
  :root {
    --popup-info-icon: 20px;
  }
}

.map-section-body .map-container .zone-tools {
  flex-wrap: nowrap;
  padding: 0 12px;
  background-color: #262b31;
}
.map-section-body .map-container .zone-tools .zone-button-container {
  position: relative;
  overflow-x: auto;
  display: flex;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
}
.map-section-body .map-container .zone-tools .zone-button-container::-webkit-scrollbar {
  display: none;
}
.map-section-body .map-container .zone-tools .zone-button-group {
  display: flex;
}
.map-section-body .map-container .zone-tools .zone-button {
  flex-shrink: 0;
  width: 150px;
  border-radius: 0;
  white-space: normal;
  height: 48px;
  scroll-snap-align: start;
}
.map-section-body .map-container .zone-tools .zone-arrow {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #262b31;
}
.map-section-body .map-container .zone-tools .zone-arrow.left {
  margin-left: auto;
}
.map-section-body .map-container .zone-tools .zone-arrow .Hide {
  color: #606060;
  cursor: default;
}
.map-section-body .map-container.collapsed {
  width: calc(100% - 24px);
}

.Search-section {
  position: relative;
}
.Search-section .filter-wrapper {
  padding: 12px 24px 12px 12px;
}
.Search-section .filter-wrapper form {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
.Search-section .filter-wrapper form .form-scroll {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  height: 71.5vh;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 12px;
}
.Search-section .filter-wrapper form .button-group {
  padding-right: 12px;
}
@media only screen and (max-width: 1280px) {
  .Search-section .filter-wrapper {
    padding: 12px;
  }
  .Search-section .filter-wrapper form .form-scroll {
    height: 32vh;
  }
}
@media only screen and (max-width: 576px) {
  .Search-section .filter-wrapper {
    padding: 12px;
  }
  .Search-section .filter-wrapper form .form-scroll {
    height: 37vh;
  }
}

.Result-section .table-wrapper {
  max-width: inherit;
  padding: 12px 12px;
  height: calc(100vh - 46px - 26px - 24px - 24px - 12px - 28px);
  max-height: 100%;
  overflow-y: scroll;
}
.Result-section .table-wrapper table .pill {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
}
.Result-section .table-wrapper table th,
.Result-section .table-wrapper table td {
  text-align: left;
}
.Result-section .table-wrapper table .details-btn i {
  margin-right: 0;
}
.Result-section .table-wrapper table tr:hover,
.Result-section .table-wrapper table tr.child td.child:hover {
  transition: 0.2s background-color linear;
  background-color: rgba(10, 10, 10, 0.4);
}
.Result-section .table-wrapper table td .head-Picture img {
  width: 36px;
  height: 36px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50px;
}
.Result-section .table-wrapper table td:has(.vehicle-type), .Result-section .table-wrapper table td:has(.automobile-mark-picture) {
  min-width: 160px;
}
.Result-section .table-wrapper table td:has(.iid-events-type), .Result-section .table-wrapper table td:has(.tte-events-type) {
  min-width: 160px;
}
.Result-section .table-wrapper table td .vehicle-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
.Result-section .table-wrapper table td .vehicle-type img {
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 8px;
  margin-bottom: 14px;
}
.Result-section .table-wrapper table td .automobile-mark-picture {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
.Result-section .table-wrapper table td .automobile-mark-picture img {
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 8px;
}
.Result-section .table-wrapper table td .automobile-color {
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px;
  font-weight: bold;
}
.Result-section .table-wrapper table td .automobile-color.black {
  background-color: #181818;
}
.Result-section .table-wrapper table td .automobile-color.white {
  background-color: #fdfdfd;
}
.Result-section .table-wrapper table td .automobile-color.white span {
  color: #262b31;
}
.Result-section .table-wrapper table td .automobile-color.blue {
  background-color: #339af0;
}
.Result-section .table-wrapper table td .automobile-color.blue span {
  color: #262b31;
}
.Result-section .table-wrapper table td .automobile-color.brown {
  background-color: #a0522d;
}
.Result-section .table-wrapper table td .automobile-color.gold {
  background-color: #e6b803;
}
.Result-section .table-wrapper table td .automobile-color.gold span {
  color: #262b31;
}
.Result-section .table-wrapper table td .automobile-color.green {
  background-color: #28a745;
}
.Result-section .table-wrapper table td .automobile-color.grey {
  background-color: #a0a0a0;
}
.Result-section .table-wrapper table td .automobile-color.grey span {
  color: #262b31;
}
.Result-section .table-wrapper table td .automobile-color.maroon {
  background-color: #8d0000;
}
.Result-section .table-wrapper table td .automobile-color.orange {
  background-color: #ff8c00;
}
.Result-section .table-wrapper table td .automobile-color.orange span {
  color: #262b31;
}
.Result-section .table-wrapper table td .automobile-color.red {
  background-color: #cc0b0e;
}
.Result-section .table-wrapper table td .automobile-color.silver {
  background-color: #bbbab9;
}
.Result-section .table-wrapper table td .automobile-color.silver span {
  color: #262b31;
}
.Result-section .table-wrapper table td .automobile-color.yellow {
  background-color: #ffeb3b;
}
.Result-section .table-wrapper table td .automobile-color.yellow span {
  color: #262b31;
}
.Result-section .table-wrapper table td .license-plate-color {
  width: -moz-fit-content;
  width: fit-content;
  padding: 12px 12px 8px 12px;
  border-radius: 6px;
  position: relative;
  text-align: center;
  font-weight: bold;
}
.Result-section .table-wrapper table td .license-plate-color::before, .Result-section .table-wrapper table td .license-plate-color::after {
  content: "";
  position: absolute;
  top: 3px;
  height: 6px;
  width: 12px;
  background-color: #262b31;
  border-radius: 3px;
}
.Result-section .table-wrapper table td .license-plate-color::before {
  left: 5px;
}
.Result-section .table-wrapper table td .license-plate-color::after {
  right: 5px;
}
.Result-section .table-wrapper table td .whitePlateBlackWords {
  background-color: #f2f2f2;
  color: #181818;
}
.Result-section .table-wrapper table td .whitePlateRedWords {
  background-color: #f2f2f2;
  color: #cc0b0e;
}
.Result-section .table-wrapper table td .whitePlateGreenWords {
  background-color: #f2f2f2;
  color: #1d8034;
}
.Result-section .table-wrapper table td .yellowPlateBlackWords {
  background-color: #e6b803;
  color: #181818;
}
.Result-section .table-wrapper table td .redPlateWhiteWords {
  background-color: #cc0b0e;
  color: #f2f2f2;
}
.Result-section .table-wrapper table td .greenPlateWhiteWords {
  background-color: #1d8034;
  color: #f2f2f2;
}
.Result-section .table-wrapper table td i {
  margin-right: 6px;
}
.Result-section .table-wrapper table td i.fa-mars {
  color: #48CBFF;
}
.Result-section .table-wrapper table td i.fa-venus {
  color: #E81863;
}
.Result-section .table-wrapper table td i.fa-question {
  color: #C0C3C5;
}
.Result-section .table-wrapper table td .vehicle-counting-group,
.Result-section .table-wrapper table td .congestion-rate-group,
.Result-section .table-wrapper table td .travel-time-group,
.Result-section .table-wrapper table td .force-group,
.Result-section .table-wrapper table td .video-device-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
.Result-section .table-wrapper table td .vehicle-counting,
.Result-section .table-wrapper table td .congestion-rate,
.Result-section .table-wrapper table td .travel-time,
.Result-section .table-wrapper table td .video-device {
  width: 12px;
  height: 12px;
  border-radius: 24px;
}
.Result-section .table-wrapper table td .vehicle-counting.highLevel, .Result-section .table-wrapper table td .vehicle-counting.congested, .Result-section .table-wrapper table td .vehicle-counting.error,
.Result-section .table-wrapper table td .congestion-rate.highLevel,
.Result-section .table-wrapper table td .congestion-rate.congested,
.Result-section .table-wrapper table td .congestion-rate.error,
.Result-section .table-wrapper table td .travel-time.highLevel,
.Result-section .table-wrapper table td .travel-time.congested,
.Result-section .table-wrapper table td .travel-time.error,
.Result-section .table-wrapper table td .video-device.highLevel,
.Result-section .table-wrapper table td .video-device.congested,
.Result-section .table-wrapper table td .video-device.error {
  background-color: #e02626;
}
.Result-section .table-wrapper table td .vehicle-counting.middleLevel, .Result-section .table-wrapper table td .vehicle-counting.moderateTraffic, .Result-section .table-wrapper table td .vehicle-counting.underMaintenance,
.Result-section .table-wrapper table td .congestion-rate.middleLevel,
.Result-section .table-wrapper table td .congestion-rate.moderateTraffic,
.Result-section .table-wrapper table td .congestion-rate.underMaintenance,
.Result-section .table-wrapper table td .travel-time.middleLevel,
.Result-section .table-wrapper table td .travel-time.moderateTraffic,
.Result-section .table-wrapper table td .travel-time.underMaintenance,
.Result-section .table-wrapper table td .video-device.middleLevel,
.Result-section .table-wrapper table td .video-device.moderateTraffic,
.Result-section .table-wrapper table td .video-device.underMaintenance {
  background-color: #ffeb0a;
  color: black;
}
.Result-section .table-wrapper table td .vehicle-counting.lowLevel, .Result-section .table-wrapper table td .vehicle-counting.smooth, .Result-section .table-wrapper table td .vehicle-counting.available,
.Result-section .table-wrapper table td .congestion-rate.lowLevel,
.Result-section .table-wrapper table td .congestion-rate.smooth,
.Result-section .table-wrapper table td .congestion-rate.available,
.Result-section .table-wrapper table td .travel-time.lowLevel,
.Result-section .table-wrapper table td .travel-time.smooth,
.Result-section .table-wrapper table td .travel-time.available,
.Result-section .table-wrapper table td .video-device.lowLevel,
.Result-section .table-wrapper table td .video-device.smooth,
.Result-section .table-wrapper table td .video-device.available {
  background-color: #24d13b;
}
.Result-section .table-wrapper table td .force-group {
  gap: 12px;
}
.Result-section .table-wrapper table td .force-group .force-icon {
  width: 18px;
  height: 18px;
  clip-path: polygon(50% 0%, 100% 100%, 50% 75%, 0 100%);
  background-color: #363d46;
}
.Result-section .table-wrapper table td .force-group .force-icon.force0 {
  background-color: #e4e4e4;
  clip-path: none;
  border-radius: 20px;
  /* Calm, no wind */
}
.Result-section .table-wrapper table td .force-group .force-icon.force1 {
  background-color: #a3c4d7;
  /* Light air */
}
.Result-section .table-wrapper table td .force-group .force-icon.force2 {
  background-color: #3ACCFF;
  /* Light breeze */
}
.Result-section .table-wrapper table td .force-group .force-icon.force3 {
  background-color: #43e7e8;
  /* Gentle breeze */
}
.Result-section .table-wrapper table td .force-group .force-icon.force4 {
  background-color: #42ebbe;
  /* Moderate breeze */
}
.Result-section .table-wrapper table td .force-group .force-icon.force5 {
  background-color: #37CC01;
  /* Fresh breeze */
}
.Result-section .table-wrapper table td .force-group .force-icon.force6 {
  background-color: #c7f774;
  /* Strong breeze */
}
.Result-section .table-wrapper table td .force-group .force-icon.force7 {
  background-color: #e6e5b8;
  /* Near gale */
}
.Result-section .table-wrapper table td .force-group .force-icon.force8 {
  background-color: #FFFF00;
  /* Gale */
}
.Result-section .table-wrapper table td .force-group .force-icon.force9 {
  background-color: #FCCB66;
  /* Strong gale */
}
.Result-section .table-wrapper table td .force-group .force-icon.force10 {
  background-color: #FA9A02;
  /* Storm */
}
.Result-section .table-wrapper table td .force-group .force-icon.force11 {
  background-color: #F86566;
  /* Violent storm */
}
.Result-section .table-wrapper table td .force-group .force-icon.force12 {
  background-color: #F968FC;
  /* Hurricane */
}
.Result-section .table-wrapper table td .force-group .force-icon.N {
  transform: rotate(180deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.NNE {
  transform: rotate(202.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.NE {
  transform: rotate(225deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.ENE {
  transform: rotate(247.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.E {
  transform: rotate(270deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.ESE {
  transform: rotate(292.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.SE {
  transform: rotate(315deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.SSE {
  transform: rotate(337.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.S {
  transform: rotate(360deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.SSW {
  transform: rotate(382.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.SW {
  transform: rotate(405deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.WSW {
  transform: rotate(427.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.W {
  transform: rotate(450deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.WNW {
  transform: rotate(472.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.NW {
  transform: rotate(495deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.NNW {
  transform: rotate(517.5deg);
}
.Result-section .table-wrapper table td:has(.road-intersection) span, .Result-section .table-wrapper table td:has(.destination) span {
  display: inline-block;
}
.Result-section .table-wrapper table td:has(.road-intersection) .road-intersection,
.Result-section .table-wrapper table td:has(.road-intersection) .destination, .Result-section .table-wrapper table td:has(.destination) .road-intersection,
.Result-section .table-wrapper table td:has(.destination) .destination {
  border-radius: 6px;
  padding: 4px 8px;
  background-color: rgba(10, 10, 10, 0.2);
}
.Result-section .table-wrapper table td .vehicle-counting-period-from,
.Result-section .table-wrapper table td .vehicle-counting-period-to,
.Result-section .table-wrapper table td .iid-period-from,
.Result-section .table-wrapper table td .iid-period-to {
  display: inline;
  font-family: monospace;
}
.Result-section .table-wrapper table td.date, .Result-section .table-wrapper table td.time {
  font-family: monospace;
}
.Result-section .table-wrapper table td .search-picture-btn,
.Result-section .table-wrapper table td .search-playback-btn {
  font-size: 24px;
  background-color: transparent;
}
.Result-section .table-wrapper table td .search-picture-btn i,
.Result-section .table-wrapper table td .search-playback-btn i {
  color: #2ec4c2;
  margin-right: 0;
}
.Result-section .table-wrapper table td .search-picture-btn {
  font-size: 24px;
  padding: 0;
}
.Result-section .table-wrapper table td .search-picture-btn img {
  width: 60px;
  height: auto;
}
.Result-section .table-wrapper table td .iid-events-type,
.Result-section .table-wrapper table td .tte-events-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
.Result-section .table-wrapper table td .iid-events-type img,
.Result-section .table-wrapper table td .tte-events-type img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 8px;
}
.Result-section .table-wrapper table td .enc-state-group {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.Result-section .table-wrapper table td .enc-state-group .enc-state {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 20px;
}
.Result-section .table-wrapper table td .enc-state-group .pill {
  margin-left: 6px;
}
.Result-section .table-wrapper table td .enc-state-group .waterLevelOneAlert,
.Result-section .table-wrapper table td .enc-state-group .oilLevelHigh,
.Result-section .table-wrapper table td .enc-state-group .abnormal,
.Result-section .table-wrapper table td .enc-state-group .aqi-poor {
  background-color: #e02626;
}
.Result-section .table-wrapper table td .enc-state-group .aqi-poor {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border-radius: 0;
  width: 0.75vw;
  height: 0.75vw;
}
.Result-section .table-wrapper table td .enc-state-group .waterLevelTwoAlert,
.Result-section .table-wrapper table td .enc-state-group .oilLevelLow,
.Result-section .table-wrapper table td .enc-state-group .aqi-moderate {
  background-color: #ffeb0a;
}
.Result-section .table-wrapper table td .enc-state-group .aqi-moderate {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border-radius: 0;
  width: 0.7vw;
  height: 0.7vw;
}
.Result-section .table-wrapper table td .enc-state-group .waterLevelNormal,
.Result-section .table-wrapper table td .enc-state-group .oilLevelNormal,
.Result-section .table-wrapper table td .enc-state-group .normal,
.Result-section .table-wrapper table td .enc-state-group .aqi-good {
  background-color: #24d13b;
}
.Result-section .table-wrapper table td .enc-state-group .lowElectricity {
  background-color: #ffe6a3;
}
.Result-section .table-wrapper table td .enc-state-group .moderateElectricity {
  background-color: #ce9f1f;
}
.Result-section .table-wrapper table td .enc-state-group .highElectricity {
  background-color: #995c00;
}
.Result-section .table-wrapper table td .enc-state-group .tooLow {
  background-color: #4fe3f3;
}
.Result-section .table-wrapper table td .enc-state-group .tooHigh {
  background-color: #e02626;
}
.Result-section .table-wrapper table td .enc-state-group .dry {
  background-color: #c2ebff;
}
.Result-section .table-wrapper table td .enc-state-group .moist {
  background-color: #05b2dd;
}
.Result-section .table-wrapper table td .enc-state-group .rain {
  background-color: #c2ebff;
}
.Result-section .table-wrapper table td .enc-state-group .heavyRain {
  background-color: #FFFF00;
}
.Result-section .table-wrapper table td .enc-state-group .extremelyHeavyRain {
  background-color: #FA9A02;
}
.Result-section .table-wrapper table td .enc-state-group .torrentialRain {
  background-color: #F86566;
}
.Result-section .table-wrapper table td .enc-state-group .extremelyTorrentialRain {
  background-color: #F968FC;
}
.Result-section .table-wrapper table td .enc-state-group .uv-low {
  color: #cde381;
}
.Result-section .table-wrapper table td .enc-state-group .uv-moderate {
  color: #fbbc23;
}
.Result-section .table-wrapper table td .enc-state-group .uv-high {
  color: #e57200;
}
.Result-section .table-wrapper table td .enc-state-group .uv-very-high {
  color: #d32d1b;
}
.Result-section .table-wrapper table td .enc-state-group .uv-extreme {
  color: #ac4a9b;
}
.Result-section .table-wrapper table td .enc-state-group .Undetectable {
  background-color: #FFFFFF;
}
.Result-section .table-wrapper table td .enc-state-group .Slight {
  background-color: #E0FFDF;
}
.Result-section .table-wrapper table td .enc-state-group .Weak {
  background-color: #33FE34;
}
.Result-section .table-wrapper table td .enc-state-group .light {
  background-color: #FFFE2E;
}
.Result-section .table-wrapper table td .enc-state-group .moderate {
  background-color: #FE832D;
}
.Result-section .table-wrapper table td .enc-state-group .strong {
  background-color: #C43B3C;
}
.Result-section .table-wrapper table td .enc-state-group .Violent {
  background-color: #994644;
}
.Result-section .table-wrapper table td .enc-state-group .Extreme {
  background-color: #B61EEB;
}
.Result-section .table-wrapper table td .accessControlStatus,
.Result-section .table-wrapper table td .enc-i-text {
  padding: 4px 8px;
}
.Result-section .table-wrapper table td .accessControlStatus span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text span:nth-child(1) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 30px;
  margin-right: 6px;
}
.Result-section .table-wrapper table td .accessControlStatus span:nth-child(1) i,
.Result-section .table-wrapper table td .enc-i-text span:nth-child(1) i {
  margin-right: 0;
}
.Result-section .table-wrapper table td .accessControlStatus.accessControlValid span:nth-child(1), .Result-section .table-wrapper table td .accessControlStatus.open span:nth-child(1), .Result-section .table-wrapper table td .accessControlStatus.on span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text.accessControlValid span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text.open span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text.on span:nth-child(1) {
  background-color: #225c2a;
}
.Result-section .table-wrapper table td .accessControlStatus.accessControlInvalid span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text.accessControlInvalid span:nth-child(1) {
  background-color: #97050c;
}
.Result-section .table-wrapper table td .accessControlStatus.closed span:nth-child(1), .Result-section .table-wrapper table td .accessControlStatus.off span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text.closed span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text.off span:nth-child(1) {
  background-color: #606060;
}
.Result-section .table-wrapper table td .parking-space-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.Result-section .table-wrapper table td .parking-space-type img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 4px;
  border-radius: 3px;
  background-color: #1750a3;
}
.Result-section .table-wrapper table td.available {
  color: #24d13b;
}
.Result-section .table-wrapper table .noPlayback {
  pointer-events: none;
}
.Result-section .table-wrapper table .noPlayback i {
  color: #262b31 !important;
}
@media only screen and (max-width: 1280px) {
  .Result-section .table-wrapper table td .head-Picture img {
    width: 30px;
    height: 30px;
  }
}

.Result-section:has(.statistics-VDSchordDiagram) .table-wrapper {
  height: calc(100vh - 46px - 26px - 24px - 24px - 12px - 28px - 306px);
}

.statistics-VDSchordDiagram,
#statistics-VDSchordDiagram {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  min-height: 160px;
  position: relative;
  margin: 12px 0;
  border-bottom: 1px solid #606060;
}
.statistics-VDSchordDiagram .chordTitle,
#statistics-VDSchordDiagram .chordTitle {
  padding: 4px 12px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  display: inline-flex;
  justify-content: space-between;
  align-items: flex-start;
}
.statistics-VDSchordDiagram .chordTitle .chordTitleTips,
#statistics-VDSchordDiagram .chordTitle .chordTitleTips {
  font-size: 14px;
  font-weight: 300;
  display: inline;
  color: #f88080;
}
.statistics-VDSchordDiagram .chordTitle i,
#statistics-VDSchordDiagram .chordTitle i {
  margin-right: 6px;
}
.statistics-VDSchordDiagram .chordTitle button i,
#statistics-VDSchordDiagram .chordTitle button i {
  margin-right: 0;
}
.statistics-VDSchordDiagram #chordContainer,
#statistics-VDSchordDiagram #chordContainer {
  width: 250px;
  height: 250px;
  filter: saturate(2);
  visibility: hidden;
  display: none;
}
.statistics-VDSchordDiagram #chord-legend .legend-item,
#statistics-VDSchordDiagram #chord-legend .legend-item {
  position: absolute;
  text-wrap: wrap;
  font-size: 0.75rem;
}
.statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(1),
#statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(1) {
  top: 20%;
  left: 50%;
  width: 260px;
  transform: translate(-50%, 0);
  text-align: center;
}
.statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(2),
#statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(2) {
  bottom: 4%;
  left: 50%;
  width: 260px;
  transform: translate(-50%, 0);
  text-align: center;
}
.statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(3),
#statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(3) {
  top: 48%;
  left: 2.5%;
  width: 90px;
}
.statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(4),
#statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(4) {
  top: 48%;
  right: 2%;
  width: 90px;
  text-align: right;
}
.statistics-VDSchordDiagram .g2-tooltip,
#statistics-VDSchordDiagram .g2-tooltip {
  background-color: rgb(0, 0, 0) !important;
  color: #f2f2f2 !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
}

.search-filter-collapse-btn {
  position: absolute;
  top: 0;
  right: 0;
}
@media only screen and (max-width: 1280px) {
  .search-filter-collapse-btn {
    display: none;
  }
}

/* ================ dataTable components */
div.dt-container div.dt-layout-row {
  margin-top: 0;
  margin-bottom: 12px;
}

html.dark div.dt-buttons > .dt-button:focus:not(.disabled):hover, html.dark div.dt-buttons > .dt-button:focus:not(.disabled):focus, html.dark div.dt-buttons > .dt-button:focus:not(.disabled):active {
  outline: 0px solid #2690a0 !important;
}

html.dark div.dt-buttons > .dt-button {
  border: none;
  position: relative;
  line-height: 1;
  padding: 8px 12px;
}
html.dark div.dt-buttons > .dt-button:hover {
  background-color: #35657a !important;
  border: none;
}

.dt-search {
  display: none;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
  padding-top: 2px;
}

/* 1. ================ Filter section collapse and expand */
.section-title-text,
.filter-wrapper {
  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
  opacity: 1;
}

.Search-section.collapsed {
  margin-left: -12px;
  margin-right: -12px;
}
.Search-section.collapsed .section-title {
  box-shadow: none;
}
.Search-section.collapsed .section-title-text {
  visibility: hidden !important;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
}
.Search-section.collapsed .filter-wrapper {
  visibility: hidden !important;
  max-height: 70vh !important;
  overflow: hidden !important;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
}

/* 2. Collapsed state for sections-group */
.sections-group.search-filter-group-collapsed {
  grid-template-columns: 20% 0px 79.9% !important;
}

/* 3. Collapsed state for sections-group */
.sections-group.search-location-and-filter-group-collapsed {
  grid-template-columns: 12px 12px calc(100% - 24px) !important;
}

/* ================ Modal */
.modal .details-date-time-location,
.modal .details-total,
.modal .details-event-title {
  width: 100%;
  background-color: rgba(10, 10, 10, 0.2);
  border-bottom: 1px solid #606060;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  gap: 24px;
  font-variant-numeric: tabular-nums;
  color: #2ec4c2;
  text-wrap: wrap;
}
.modal .details-date-time-location i,
.modal .details-total i,
.modal .details-event-title i {
  margin-right: 6px;
}
.modal .details-date-time-location .vehicle-counting,
.modal .details-total .vehicle-counting,
.modal .details-event-title .vehicle-counting {
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
  color: #f2f2f2;
}
.modal .details-date-time-location .vehicle-counting.highLevel,
.modal .details-total .vehicle-counting.highLevel,
.modal .details-event-title .vehicle-counting.highLevel {
  background-color: #97050c;
}
.modal .details-date-time-location .vehicle-counting.middleLevel,
.modal .details-total .vehicle-counting.middleLevel,
.modal .details-event-title .vehicle-counting.middleLevel {
  background-color: #ce9f1f;
  color: black;
}
.modal .details-date-time-location .vehicle-counting.lowLevel,
.modal .details-total .vehicle-counting.lowLevel,
.modal .details-event-title .vehicle-counting.lowLevel {
  background-color: #225c2a;
}
.modal .details-date-time-location .details-date-time,
.modal .details-total .details-date-time,
.modal .details-event-title .details-date-time {
  font-family: monospace;
}
.modal .details-date-time-location .iid-events-type,
.modal .details-date-time-location .tte-events-type,
.modal .details-total .iid-events-type,
.modal .details-total .tte-events-type,
.modal .details-event-title .iid-events-type,
.modal .details-event-title .tte-events-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.modal .details-date-time-location .iid-events-type img,
.modal .details-date-time-location .tte-events-type img,
.modal .details-total .iid-events-type img,
.modal .details-total .tte-events-type img,
.modal .details-event-title .iid-events-type img,
.modal .details-event-title .tte-events-type img {
  width: 45px;
  height: 45px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 8px;
}
.modal .modal-header .secondary-btn, .modal .modal-header html.dark div.dt-buttons > .dt-button, html.dark .modal .modal-header div.dt-buttons > .dt-button {
  margin-left: 12px;
}
.modal .details-event-title {
  font-weight: bold;
  color: #f2f2f2;
  border-bottom: 1px solid #606060;
  margin-bottom: 0;
}
.modal .details-event-title .enc-state-group {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.modal .details-event-title .enc-state-group .enc-state {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 20px;
}
.modal .details-event-title .enc-state-group .waterLevelOneAlert,
.modal .details-event-title .enc-state-group .oilLevelHigh,
.modal .details-event-title .enc-state-group .abnormal {
  background-color: #e02626;
}
.modal .details-event-title .enc-state-group .waterLevelTwoAlert,
.modal .details-event-title .enc-state-group .oilLevelLow {
  background-color: #ffeb0a;
}
.modal .details-event-title .enc-state-group .waterLevelNormal,
.modal .details-event-title .enc-state-group .oilLevelNormal,
.modal .details-event-title .enc-state-group .normal {
  background-color: #24d13b;
}
.modal .details-event-title .enc-state-group .lowElectricity {
  background-color: #ffe6a3;
}
.modal .details-event-title .enc-state-group .moderateElectricity {
  background-color: #ce9f1f;
}
.modal .details-event-title .enc-state-group .highElectricity {
  background-color: #995c00;
}
.modal .details-event-title .enc-state-group .tooLow {
  background-color: #4fe3f3;
}
.modal .details-event-title .enc-state-group .tooHigh {
  background-color: #e02626;
}
.modal .details-event-title .enc-state-group .dry {
  background-color: #c2ebff;
}
.modal .details-event-title .enc-state-group .moist {
  background-color: #05b2dd;
}
.modal .details-event-title .enc-state-group .rain {
  background-color: #c2ebff;
}
.modal .details-event-title .enc-state-group .heavyRain {
  background-color: #FFFF00;
}
.modal .details-event-title .enc-state-group .extremelyHeavyRain {
  background-color: #FA9A02;
}
.modal .details-event-title .enc-state-group .torrentialRain {
  background-color: #F86566;
}
.modal .details-event-title .enc-state-group .extremelyTorrentialRain {
  background-color: #F968FC;
}
.modal .details-event-title .video-device-group {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.modal .details-event-title .video-device-group .video-device {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 20px;
}
.modal .details-event-title .vehicle-counting.highLevel, .modal .details-event-title .vehicle-counting.congested, .modal .details-event-title .vehicle-counting.error,
.modal .details-event-title .congestion-rate.highLevel,
.modal .details-event-title .congestion-rate.congested,
.modal .details-event-title .congestion-rate.error,
.modal .details-event-title .travel-time.highLevel,
.modal .details-event-title .travel-time.congested,
.modal .details-event-title .travel-time.error,
.modal .details-event-title .video-device.highLevel,
.modal .details-event-title .video-device.congested,
.modal .details-event-title .video-device.error {
  background-color: #e02626;
}
.modal .details-event-title .vehicle-counting.middleLevel, .modal .details-event-title .vehicle-counting.moderateTraffic, .modal .details-event-title .vehicle-counting.underMaintenance,
.modal .details-event-title .congestion-rate.middleLevel,
.modal .details-event-title .congestion-rate.moderateTraffic,
.modal .details-event-title .congestion-rate.underMaintenance,
.modal .details-event-title .travel-time.middleLevel,
.modal .details-event-title .travel-time.moderateTraffic,
.modal .details-event-title .travel-time.underMaintenance,
.modal .details-event-title .video-device.middleLevel,
.modal .details-event-title .video-device.moderateTraffic,
.modal .details-event-title .video-device.underMaintenance {
  background-color: #ffeb0a;
  color: black;
}
.modal .details-event-title .vehicle-counting.lowLevel, .modal .details-event-title .vehicle-counting.smooth, .modal .details-event-title .vehicle-counting.available,
.modal .details-event-title .congestion-rate.lowLevel,
.modal .details-event-title .congestion-rate.smooth,
.modal .details-event-title .congestion-rate.available,
.modal .details-event-title .travel-time.lowLevel,
.modal .details-event-title .travel-time.smooth,
.modal .details-event-title .travel-time.available,
.modal .details-event-title .video-device.lowLevel,
.modal .details-event-title .video-device.smooth,
.modal .details-event-title .video-device.available {
  background-color: #24d13b;
}
.modal .details-event-title .pill {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
}
.modal .details-event-title .enc-state-type-title {
  margin-right: 12px;
}
.modal .modal-body.enc-all-modal-body {
  margin-bottom: 12px;
}
.modal .modal-body.enc-all-modal-body .pill {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
}
.modal .modal-body.enc-all-modal-body .enc-details-type {
  width: 100%;
  color: #2ec4c2;
  border-bottom: 1px solid #2ec4c2;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 16px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-bottom: 12px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  background-color: #3A464F;
  border-radius: 6px;
  text-align: center;
  padding-bottom: 24px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card:has(.search-playback-btn), .modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card:has(.search-picture-btn) {
  padding-bottom: 0;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .details-name {
  width: 100%;
  padding: 8px;
  background-color: #2ec4c2;
  color: #262b31;
  font-size: 16px;
  font-weight: bold;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card img {
  width: 60px;
  height: 60px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .search-picture-btn img {
  width: 120px;
  height: auto;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card i {
  font-size: 36px;
  margin: 12px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card img[src$="enc_Fan on.svg"] {
  animation: rotation 2s infinite linear;
  color: #24d180;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .lowElectricity {
  color: #ffe6a3;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .moderateElectricity {
  color: #ce9f1f;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .highElectricity {
  color: #cc4008;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .normal {
  color: #24d13b;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .tooLow {
  color: #4fe3f3;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .tooHigh {
  color: #ff9e9e;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .dry {
  color: #c2ebff;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .moist {
  color: #05b2dd;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon {
  width: 18px;
  height: 18px;
  clip-path: polygon(50% 0%, 100% 100%, 50% 75%, 0 100%);
  background-color: #363d46;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force0 {
  background-color: #e4e4e4;
  clip-path: none;
  border-radius: 20px;
  /* Calm, no wind */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force1 {
  background-color: #a3c4d7;
  /* Light air */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force2 {
  background-color: #3ACCFF;
  /* Light breeze */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force3 {
  background-color: #43e7e8;
  /* Gentle breeze */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force4 {
  background-color: #42ebbe;
  /* Moderate breeze */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force5 {
  background-color: #37CC01;
  /* Fresh breeze */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force6 {
  background-color: #c7f774;
  /* Strong breeze */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force7 {
  background-color: #e6e5b8;
  /* Near gale */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force8 {
  background-color: #FFFF00;
  /* Gale */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force9 {
  background-color: #FCCB66;
  /* Strong gale */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force10 {
  background-color: #FA9A02;
  /* Storm */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force11 {
  background-color: #F86566;
  /* Violent storm */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force12 {
  background-color: #F968FC;
  /* Hurricane */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.N {
  transform: rotate(180deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.NNE {
  transform: rotate(202.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.NE {
  transform: rotate(225deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.ENE {
  transform: rotate(247.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.E {
  transform: rotate(270deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.ESE {
  transform: rotate(292.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.SE {
  transform: rotate(315deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.SSE {
  transform: rotate(337.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.S {
  transform: rotate(360deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.SSW {
  transform: rotate(382.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.SW {
  transform: rotate(405deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.WSW {
  transform: rotate(427.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.W {
  transform: rotate(450deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.WNW {
  transform: rotate(472.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.NW {
  transform: rotate(495deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.NNW {
  transform: rotate(517.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .enc-state {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 20px;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@media only screen and (max-width: 1280px) {
  .modal .modal-body.enc-all-modal-body .enc-details-card-group {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (max-width: 576px) {
  .modal .modal-body.enc-all-modal-body .enc-details-card-group {
    grid-template-columns: repeat(2, 1fr);
  }
}
.modal .modal-body.enc-all-modal-body .search-picture-btn,
.modal .modal-body.enc-all-modal-body .search-playback-btn {
  background-color: rgba(10, 10, 10, 0.2);
  width: 100%;
}
.modal .modal-body.enc-all-modal-body .search-picture-btn i,
.modal .modal-body.enc-all-modal-body .search-playback-btn i {
  color: #2ec4c2;
  font-size: 30px !important;
}
.modal .modal-body.enc-all-modal-body .noPlayback {
  pointer-events: none;
}
.modal .modal-body.enc-all-modal-body .noPlayback i {
  color: #262b31 !important;
}
.modal .modal-body .picture-video-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.modal .modal-body .picture-video-group img,
.modal .modal-body .picture-video-group video {
  width: 50%;
}
@media only screen and (max-width: 768px) {
  .modal .modal-body .picture-video-group {
    flex-direction: column;
  }
  .modal .modal-body .picture-video-group img,
  .modal .modal-body .picture-video-group video {
    width: 100%;
  }
}
.modal .modal-body .picture-group {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pedestrianAlldetailsModal .human-details-group {
  display: grid;
  grid-template-areas: "human-details-map-thumbnail human-details-body-picture human-details-visualization" "human-details-head-picture human-details-body-picture human-details-visualization" "human-details-scene-picture human-details-body-picture human-details-visualization" "human-details-video human-details-body-picture human-details-visualization";
  grid-template-columns: 1fr 1fr 3.2fr;
  grid-template-rows: 24% 24% 24% 24%;
  align-items: stretch;
  gap: 12px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-body-picture {
  grid-area: human-details-body-picture;
  aspect-ratio: 9/16;
  max-width: 100%;
  background-color: rgba(10, 10, 10, 0.2);
}
#pedestrianAlldetailsModal .human-details-group .human-details-body-picture img,
#pedestrianAlldetailsModal .human-details-group .human-details-body-picture video {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}
#pedestrianAlldetailsModal .human-details-group .human-details-map-thumbnail,
#pedestrianAlldetailsModal .human-details-group .human-details-head-picture,
#pedestrianAlldetailsModal .human-details-group .human-details-scene-picture,
#pedestrianAlldetailsModal .human-details-group .human-details-video {
  aspect-ratio: 16/9;
  max-width: 100%;
  max-height: 100%;
  background-color: rgba(10, 10, 10, 0.2);
}
#pedestrianAlldetailsModal .human-details-group .human-details-head-picture {
  grid-area: human-details-head-picture;
}
#pedestrianAlldetailsModal .human-details-group .human-details-head-picture img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}
#pedestrianAlldetailsModal .human-details-group .human-details-scene-picture {
  grid-area: human-details-scene-picture;
}
#pedestrianAlldetailsModal .human-details-group .human-details-scene-picture img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
#pedestrianAlldetailsModal .human-details-group .human-details-video {
  grid-area: human-details-video;
}
#pedestrianAlldetailsModal .human-details-group .human-details-video video {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization {
  grid-area: human-details-visualization;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title {
  color: #3DFDFE;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px 12px 0 12px;
  background-color: rgba(10, 10, 10, 0.2);
  border-radius: 6px 0px 0px 0px;
  position: relative;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title::before {
  content: "";
  position: absolute;
  top: 0;
  right: -28px;
  width: 28px;
  height: 28px;
  border-style: solid;
  border-width: 0 28px 28px 0;
  border-color: transparent transparent rgba(10, 10, 10, 0.2) transparent;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 8px 12px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title .human-details-gender span {
  color: #f2f2f2;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title .human-details-gender i {
  margin-right: 6px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title .human-details-gender i.fa-mars {
  color: #48CBFF;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title .human-details-gender i.fa-venus {
  color: #E81863;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title .human-details-gender i.fa-question {
  color: #C0C3C5;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title::before {
  content: "";
  position: absolute;
  top: 0;
  right: -28px;
  width: 28px;
  height: 36px;
  border-style: solid;
  border-width: 0 28px 36px 0;
  border-color: transparent transparent rgba(10, 10, 10, 0.2) transparent;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category {
  width: 100%;
  margin-bottom: 6px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  background-color: rgba(10, 10, 10, 0.2);
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 0px 6px 6px 6px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-self: stretch;
  background-color: rgba(10, 10, 10, 0.2);
  padding: 8px;
  border-radius: 6px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item img {
  width: 2.4vw;
  height: 2.4vw;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item:not(.wearing) img {
  filter: saturate(0) brightness(0.6);
  opacity: 0.1;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item:not(.wearing) .details-top-color {
  filter: saturate(0);
  opacity: 0.1;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item:not(.wearing) .details-top-color span {
  display: none;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item.wearing:hover {
  background-color: rgba(10, 10, 10, 0.5);
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color {
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 1px solid #363d46;
  border-radius: 6px;
  padding: 8px 12px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color span {
  z-index: 1;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.black {
  background-color: #181818;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.white {
  background-color: #fdfdfd;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.white span {
  color: #262b31;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.blue {
  background-color: #339af0;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.blue span {
  color: #262b31;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.brown {
  background-color: #a0522d;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.gold {
  background-color: #e6b803;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.gold span {
  color: #262b31;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.green {
  background-color: #28a745;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.grey {
  background-color: #a0a0a0;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.grey span {
  color: #262b31;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.maroon {
  background-color: #8d0000;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.orange {
  background-color: #ff8c00;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.orange span {
  color: #262b31;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.red {
  background-color: #cc0b0e;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.yellow {
  background-color: #ffeb3b;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.yellow span {
  color: #262b31;
}
@media only screen and (max-width: 1280px) {
  #pedestrianAlldetailsModal .human-details-group {
    width: 100%;
    grid-template-areas: "human-details-map-thumbnail human-details-head-picture human-details-body-picture" "human-details-scene-picture human-details-video human-details-body-picture" "human-details-visualization human-details-visualization human-details-visualization";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 20% 20% 1fr;
    align-items: flex-start;
  }
  #pedestrianAlldetailsModal .human-details-group .human-details-map-thumbnail,
  #pedestrianAlldetailsModal .human-details-group .human-details-head-picture,
  #pedestrianAlldetailsModal .human-details-group .human-details-scene-picture,
  #pedestrianAlldetailsModal .human-details-group .human-details-video {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: unset;
  }
  #pedestrianAlldetailsModal .human-details-group .human-details-scene-picture img,
  #pedestrianAlldetailsModal .human-details-group .human-details-scene-picture video,
  #pedestrianAlldetailsModal .human-details-group .human-details-video img,
  #pedestrianAlldetailsModal .human-details-group .human-details-video video {
    -o-object-fit: contain;
       object-fit: contain;
  }
  #pedestrianAlldetailsModal .human-details-group .human-details-body-picture {
    height: 100%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: unset;
  }
  #pedestrianAlldetailsModal .human-details-group .human-details-body-picture img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  #pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category:last-child {
    margin-bottom: 36px;
  }
  #pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item img {
    width: 4vw;
    height: 4vw;
  }
  #pedestrianAlldetailsModal .human-details-category {
    width: calc(100% - 12px);
  }
}

#vehicleAlldetailsModal .vehicle-details-group {
  max-width: 100%;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, calc(33.3333333333% - 8px));
  align-items: stretch;
  gap: 12px;
}
#vehicleAlldetailsModal .vehicle-details-group:has(.vehicle-details-container-number) {
  grid-template-columns: repeat(4, calc(25% - 9px));
}
#vehicleAlldetailsModal .vehicle-details-group:has(.vehicle-details-chassis-number) {
  grid-template-columns: repeat(4, calc(25% - 9px));
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-map-thumbnail,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-lpr,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-container-number,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-chassis-number,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture,
#vehicleAlldetailsModal .vehicle-details-group .automobile-mark {
  background-color: rgba(10, 10, 10, 0.2);
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-map-thumbnail {
  aspect-ratio: 16/9;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-map-thumbnail .thumbnail {
  width: auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-map-thumbnail .thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-lpr,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-container-number,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-chassis-number {
  aspect-ratio: 16/9;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-lpr img,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-container-number img,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-chassis-number img {
  height: 15vh;
  width: 100%;
  margin-top: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture {
  aspect-ratio: 16/9;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video .video,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video .whole-picture,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture .video,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture .whole-picture {
  width: auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video video,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video img,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture video,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .vehicle-type-icon {
  height: 15vh;
  width: 100%;
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type img {
  width: 10vw;
  height: 10vw;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 12px;
  padding-bottom: 24px;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color {
  border: 1px solid gray;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px 12px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  position: relative;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.black {
  background-color: #181818;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.white {
  background-color: #fdfdfd;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.white span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.blue {
  background-color: #339af0;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.blue span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.brown {
  background-color: #a0522d;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.gold {
  background-color: #e6b803;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.gold span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.green {
  background-color: #28a745;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.grey {
  background-color: #a0a0a0;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.grey span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.maroon {
  background-color: #8d0000;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.orange {
  background-color: #ff8c00;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.orange span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.red {
  background-color: #cc0b0e;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.silver {
  background-color: #bbbab9;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.silver span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.yellow {
  background-color: #ffeb3b;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.yellow span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .automobile-mark {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
#vehicleAlldetailsModal .vehicle-details-group .automobile-mark .automobile-mark-icon {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#vehicleAlldetailsModal .vehicle-details-group .automobile-mark img {
  width: 9vw;
  height: 9vw;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 12px;
}
#vehicleAlldetailsModal .vehicle-details-group .license-plate-number,
#vehicleAlldetailsModal .vehicle-details-group .container-number,
#vehicleAlldetailsModal .vehicle-details-group .chassis-number {
  padding: 12px 12px 8px 12px;
  border-radius: 6px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
#vehicleAlldetailsModal .vehicle-details-group .license-plate-color {
  padding: 12px 12px 8px 12px;
  border-radius: 6px;
  position: relative;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
#vehicleAlldetailsModal .vehicle-details-group .license-plate-color::before, #vehicleAlldetailsModal .vehicle-details-group .license-plate-color::after {
  content: "";
  position: absolute;
  top: 3px;
  height: 6px;
  width: 12px;
  background-color: #262b31;
  border-radius: 3px;
}
#vehicleAlldetailsModal .vehicle-details-group .license-plate-color::before {
  left: 5px;
}
#vehicleAlldetailsModal .vehicle-details-group .license-plate-color::after {
  right: 5px;
}
#vehicleAlldetailsModal .vehicle-details-group .whitePlateBlackWords {
  background-color: #f2f2f2;
  color: #181818;
}
#vehicleAlldetailsModal .vehicle-details-group .whitePlateRedWords {
  background-color: #f2f2f2;
  color: #cc0b0e;
}
#vehicleAlldetailsModal .vehicle-details-group .whitePlateGreenWords {
  background-color: #f2f2f2;
  color: #1d8034;
}
#vehicleAlldetailsModal .vehicle-details-group .yellowPlateBlackWords {
  background-color: #e6b803;
  color: #181818;
}
#vehicleAlldetailsModal .vehicle-details-group .redPlateWhiteWords {
  background-color: #cc0b0e;
  color: #f2f2f2;
}
#vehicleAlldetailsModal .vehicle-details-group .greenPlateWhiteWords {
  background-color: #1d8034;
  color: #f2f2f2;
}
#vehicleAlldetailsModal .vehicle-details-group .details-caption {
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid #262b31;
  width: 100%;
  text-align: center;
}
#vehicleAlldetailsModal .vehicle-details-group .details-caption .details-caption-title {
  color: #3DFDFE;
}
#vehicleAlldetailsModal .vehicle-details-group i {
  margin-right: 3px;
}
@media only screen and (max-width: 1280px) {
  #vehicleAlldetailsModal .vehicle-details-group {
    grid-template-rows: repeat(2, 0.85fr);
  }
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-details-map-thumbnail .thumbnail,
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video .video,
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture .whole-picture {
    width: auto;
    height: 100%;
  }
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-details-lpr img,
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-details-container-number img,
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-details-chassis-number img {
    width: 100%;
    height: auto;
  }
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-type .vehicle-type-icon img {
    width: 12vw;
    height: 12vw;
  }
  #vehicleAlldetailsModal .vehicle-details-group .automobile-mark img {
    width: 16vw;
    height: 16vw;
  }
}
@media only screen and (max-width: 768px) {
  #vehicleAlldetailsModal .vehicle-details-group {
    grid-template-columns: repeat(2, calc(50% - 10px)) !important;
    grid-template-rows: repeat(3, 0.85fr) !important;
  }
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-type .vehicle-type-icon img {
    width: 16vw;
    height: 16vw;
  }
  #vehicleAlldetailsModal .vehicle-details-group .automobile-mark img {
    width: 20vw;
    height: 20vw;
  }
}

#TrafficVDdetailsModal .vehicle-counting-period-from,
#TrafficVDdetailsModal .vehicle-counting-period-to,
#TrafficVDSdetailsModal .vehicle-counting-period-from,
#TrafficVDSdetailsModal .vehicle-counting-period-to {
  display: inline;
}
#TrafficVDdetailsModal .TrafficVDdetails,
#TrafficVDSdetailsModal .TrafficVDdetails {
  border-collapse: collapse;
}
#TrafficVDdetailsModal .TrafficVDdetails tr,
#TrafficVDSdetailsModal .TrafficVDdetails tr {
  background-color: transparent;
}
#TrafficVDdetailsModal .TrafficVDdetails td,
#TrafficVDdetailsModal .TrafficVDdetails th,
#TrafficVDSdetailsModal .TrafficVDdetails td,
#TrafficVDSdetailsModal .TrafficVDdetails th {
  border: 1px solid rgb(10, 10, 10);
  text-align: center;
  vertical-align: middle;
}
#TrafficVDdetailsModal .TrafficVDdetails tr > td:first-child,
#TrafficVDSdetailsModal .TrafficVDdetails tr > td:first-child {
  width: 1%;
}
#TrafficVDdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(2),
#TrafficVDSdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(2) {
  background-color: #065ba0;
}
#TrafficVDdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(3),
#TrafficVDSdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(3) {
  background-color: #0b7c7b;
}
#TrafficVDdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(4),
#TrafficVDSdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(4) {
  background-color: #846d3c;
}
#TrafficVDdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(5),
#TrafficVDSdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(5) {
  background-color: #8e3b57;
}
#TrafficVDdetailsModal .TrafficVDdetails .pill,
#TrafficVDSdetailsModal .TrafficVDdetails .pill {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
}
#TrafficVDdetailsModal .TrafficVDdetails i,
#TrafficVDSdetailsModal .TrafficVDdetails i {
  margin-right: 6px;
}
#TrafficVDdetailsModal .TrafficVDdetails tr:hover,
#TrafficVDdetailsModal .TrafficVDdetails tr.child td.child:hover,
#TrafficVDSdetailsModal .TrafficVDdetails tr:hover,
#TrafficVDSdetailsModal .TrafficVDdetails tr.child td.child:hover {
  transition: 0.2s background-color linear;
  background-color: rgba(10, 10, 10, 0.4);
}
#TrafficVDdetailsModal .TrafficVDdetails .dt-column-order::before,
#TrafficVDSdetailsModal .TrafficVDdetails .dt-column-order::before {
  display: none !important;
}
#TrafficVDdetailsModal .TrafficVDdetails .vehicle-type,
#TrafficVDSdetailsModal .TrafficVDdetails .vehicle-type {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
#TrafficVDdetailsModal .TrafficVDdetails .vehicle-type img,
#TrafficVDSdetailsModal .TrafficVDdetails .vehicle-type img {
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 8px;
  margin-bottom: 14px;
}
#TrafficVDdetailsModal .TrafficVDdetails .vehicle-type img.Pedestrian,
#TrafficVDSdetailsModal .TrafficVDdetails .vehicle-type img.Pedestrian {
  margin-top: 7px;
  margin-bottom: 7px;
}
#TrafficVDdetailsModal .TrafficVDdetails .vehicle-type span,
#TrafficVDSdetailsModal .TrafficVDdetails .vehicle-type span {
  width: 90px;
}
#TrafficVDdetailsModal .TrafficVDdetails .vds-info-category-icon,
#TrafficVDdetailsModal .TrafficVDdetails .vds-info-direction-icon,
#TrafficVDSdetailsModal .TrafficVDdetails .vds-info-category-icon,
#TrafficVDSdetailsModal .TrafficVDdetails .vds-info-direction-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#TrafficVDdetailsModal .TrafficVDdetails .vds-info-category-icon img,
#TrafficVDdetailsModal .TrafficVDdetails .vds-info-direction-icon img,
#TrafficVDSdetailsModal .TrafficVDdetails .vds-info-category-icon img,
#TrafficVDSdetailsModal .TrafficVDdetails .vds-info-direction-icon img {
  padding: 4px;
  width: 24px;
  height: 24px;
}
#TrafficVDdetailsModal .TrafficVDSdetails,
#TrafficVDSdetailsModal .TrafficVDSdetails {
  border-collapse: collapse;
}
#TrafficVDdetailsModal .TrafficVDSdetails tr,
#TrafficVDSdetailsModal .TrafficVDSdetails tr {
  background-color: transparent;
}
#TrafficVDdetailsModal .TrafficVDSdetails td,
#TrafficVDdetailsModal .TrafficVDSdetails th,
#TrafficVDSdetailsModal .TrafficVDSdetails td,
#TrafficVDSdetailsModal .TrafficVDSdetails th {
  border: 1px solid rgb(10, 10, 10);
  text-align: center;
  vertical-align: middle;
  padding: 8px 10px;
}
#TrafficVDdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(1),
#TrafficVDSdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(1) {
  background-color: #065ba0;
}
#TrafficVDdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(2),
#TrafficVDSdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(2) {
  background-color: #0b7c7b;
}
#TrafficVDdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(3),
#TrafficVDSdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(3) {
  background-color: #846d3c;
}
#TrafficVDdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(4),
#TrafficVDSdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(4) {
  background-color: #8e3b57;
}
#TrafficVDdetailsModal .TrafficVDSdetails thead > tr:nth-child(2) > th,
#TrafficVDSdetailsModal .TrafficVDSdetails thead > tr:nth-child(2) > th {
  background-color: #393f44;
}
#TrafficVDdetailsModal .TrafficVDSdetails .pill,
#TrafficVDSdetailsModal .TrafficVDSdetails .pill {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
}
#TrafficVDdetailsModal .TrafficVDSdetails i,
#TrafficVDSdetailsModal .TrafficVDSdetails i {
  margin-right: 6px;
}
#TrafficVDdetailsModal .TrafficVDSdetails tbody:hover,
#TrafficVDSdetailsModal .TrafficVDSdetails tbody:hover {
  transition: 0.2s background-color linear;
  background-color: rgba(10, 10, 10, 0.4);
}
#TrafficVDdetailsModal .TrafficVDSdetails .dt-column-order::before,
#TrafficVDSdetailsModal .TrafficVDSdetails .dt-column-order::before {
  display: none !important;
}
#TrafficVDdetailsModal .TrafficVDSdetails .vehicle-type,
#TrafficVDSdetailsModal .TrafficVDSdetails .vehicle-type {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
#TrafficVDdetailsModal .TrafficVDSdetails .vehicle-type img,
#TrafficVDSdetailsModal .TrafficVDSdetails .vehicle-type img {
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 8px;
  margin-bottom: 14px;
}
#TrafficVDdetailsModal .TrafficVDSdetails .vehicle-type img.Pedestrian,
#TrafficVDSdetailsModal .TrafficVDSdetails .vehicle-type img.Pedestrian {
  margin-top: 7px;
  margin-bottom: 7px;
}
#TrafficVDdetailsModal .TrafficVDSdetails .vehicle-type span,
#TrafficVDSdetailsModal .TrafficVDSdetails .vehicle-type span {
  width: 90px;
}
#TrafficVDdetailsModal .TrafficVDSdetails .vds-info-category-icon,
#TrafficVDdetailsModal .TrafficVDSdetails .vds-info-direction-icon,
#TrafficVDSdetailsModal .TrafficVDSdetails .vds-info-category-icon,
#TrafficVDSdetailsModal .TrafficVDSdetails .vds-info-direction-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#TrafficVDdetailsModal .TrafficVDSdetails .vds-info-category-icon img,
#TrafficVDdetailsModal .TrafficVDSdetails .vds-info-direction-icon img,
#TrafficVDSdetailsModal .TrafficVDSdetails .vds-info-category-icon img,
#TrafficVDSdetailsModal .TrafficVDSdetails .vds-info-direction-icon img {
  padding: 4px;
  width: 24px;
  height: 24px;
}
@media only screen and (max-width: 576px) {
  #TrafficVDdetailsModal .TrafficVDdetails .vehicle-type span,
  #TrafficVDdetailsModal .TrafficVDSdetails .vehicle-type span,
  #TrafficVDSdetailsModal .TrafficVDdetails .vehicle-type span,
  #TrafficVDSdetailsModal .TrafficVDSdetails .vehicle-type span {
    display: none;
  }
}

#TTEdetailsModal .details-event-title {
  border-bottom: none;
}

#TTEdetailsModal .details-event-title,
#parkingLotDetailsModal .details-event-title {
  margin-bottom: 0;
  align-items: center;
}
#TTEdetailsModal .details-event-title .fa-square-parking,
#parkingLotDetailsModal .details-event-title .fa-square-parking {
  color: #009ae8;
  font-size: 26px;
}
#TTEdetailsModal .details-event-title h5,
#parkingLotDetailsModal .details-event-title h5 {
  line-height: 1;
}
#TTEdetailsModal div.dt-container div.dt-layout-row,
#parkingLotDetailsModal div.dt-container div.dt-layout-row {
  margin: 0;
}
#TTEdetailsModal table,
#parkingLotDetailsModal table {
  border-collapse: collapse;
  margin-bottom: 12px;
}
#TTEdetailsModal table thead,
#parkingLotDetailsModal table thead {
  display: none;
}
#TTEdetailsModal table tr,
#parkingLotDetailsModal table tr {
  background-color: transparent;
}
#TTEdetailsModal table td,
#TTEdetailsModal table th,
#parkingLotDetailsModal table td,
#parkingLotDetailsModal table th {
  vertical-align: middle;
  padding: 8px 12px;
  width: 50%;
}
#TTEdetailsModal table td:nth-child(1),
#TTEdetailsModal table th:nth-child(1),
#parkingLotDetailsModal table td:nth-child(1),
#parkingLotDetailsModal table th:nth-child(1) {
  text-align: right;
}
#TTEdetailsModal table td:nth-child(2),
#TTEdetailsModal table th:nth-child(2),
#parkingLotDetailsModal table td:nth-child(2),
#parkingLotDetailsModal table th:nth-child(2) {
  text-align: left;
}
#TTEdetailsModal table .pill,
#parkingLotDetailsModal table .pill {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
}
#TTEdetailsModal table i,
#parkingLotDetailsModal table i {
  margin-right: 6px;
}
#TTEdetailsModal table tr:hover,
#TTEdetailsModal table tr.child td.child:hover,
#parkingLotDetailsModal table tr:hover,
#parkingLotDetailsModal table tr.child td.child:hover {
  transition: 0.2s background-color linear;
  background-color: rgba(10, 10, 10, 0.4);
}
#TTEdetailsModal table .details-date-time,
#parkingLotDetailsModal table .details-date-time {
  font-family: monospace;
}
#TTEdetailsModal table .tte-details-picture,
#parkingLotDetailsModal table .tte-details-picture {
  padding: 0;
  border-top: none;
}
#TTEdetailsModal .tte-license-plate-icon,
#parkingLotDetailsModal .tte-license-plate-icon {
  display: inline-flex;
  margin-right: 6px;
  width: 16px;
  height: 9px;
  border-radius: 2px;
  position: relative;
  text-align: center;
  background-color: #f2f2f2;
}
#TTEdetailsModal .tte-picture-group,
#parkingLotDetailsModal .tte-picture-group {
  width: 100%;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
#TTEdetailsModal .parking-space-type,
#parkingLotDetailsModal .parking-space-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
#TTEdetailsModal .parking-space-type img,
#parkingLotDetailsModal .parking-space-type img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 4px;
  border-radius: 3px;
  background-color: #1750a3;
}
#TTEdetailsModal .available,
#parkingLotDetailsModal .available {
  color: #24d13b;
}

#eventPictureModal .iid-period-from,
#eventPictureModal .iid-period-to,
#eventPictureModal .tte-period-from,
#eventPictureModal .tte-period-to,
#eventPlaybackModal .iid-period-from,
#eventPlaybackModal .iid-period-to,
#eventPlaybackModal .tte-period-from,
#eventPlaybackModal .tte-period-to,
#TTEdetailsModal .iid-period-from,
#TTEdetailsModal .iid-period-to,
#TTEdetailsModal .tte-period-from,
#TTEdetailsModal .tte-period-to {
  display: inline;
}

#airPollutionDetailsModal .details-date-time-location {
  flex-direction: column;
  gap: 12px;
}
#airPollutionDetailsModal div.dt-container div.dt-layout-row {
  margin-bottom: 6px;
}
#airPollutionDetailsModal .aqi-circle {
  position: relative;
  border: 10px solid #606060;
  border-radius: 300px;
  width: 180px;
  height: 180px;
  margin: 24px auto;
}
#airPollutionDetailsModal .aqi-circle .aqi-title,
#airPollutionDetailsModal .aqi-circle .aqi-data,
#airPollutionDetailsModal .aqi-circle .aqi-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 21px;
}
#airPollutionDetailsModal .aqi-circle .aqi-title {
  top: 26%;
}
#airPollutionDetailsModal .aqi-circle .aqi-status {
  top: 70%;
}
#airPollutionDetailsModal .aqi-circle.circle-good {
  border: 10px solid #24d13b;
}
#airPollutionDetailsModal .aqi-circle.circle-moderate {
  border: 10px solid #ffeb0a;
}
#airPollutionDetailsModal .aqi-circle.circle-poor {
  border: 10px solid #e02626;
}

@media print {
  body {
    background: white !important;
    background-color: white !important;
    color: black;
  }
}
.action-operate {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.modal .form-a .form-group {
  margin-bottom: 12px !important;
}
.modal .form-a .row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  margin: 0;
}
.modal .form-a .radio-group {
  display: flex;
  gap: 24px;
}
.modal .form-a .uk-radio {
  margin-right: 6px;
}
.modal .form-a .radios {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
}
.modal .form-a .radios .radio-group {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal .form-a .radios .radio-group > input {
  margin-right: 12px;
  margin-top: 0 !important;
}
.modal .form-a .radios .radio-group:not(:nth-last-child(1)) {
  margin-right: 46px;
}
.modal .form-a fieldset {
  border: none;
  margin-bottom: 12px;
}
.modal .form-a .two-date-inputs {
  padding: 0;
  margin-bottom: 0;
}
.modal .form-a .uk-input:disabled, .modal .form-a .form-group .form-control:disabled {
  background-color: #606060;
  border: none;
  opacity: 0.7;
}

[id*=view][id*=Modal] .tree-list input[type=checkbox],
[id*=view][id*=Modal] .tree-list label {
  pointer-events: none;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
[id*=view][id*=Modal] input,
[id*=view][id*=Modal] select,
[id*=view][id*=Modal] .form-control,
[id*=view][id*=Modal] .live-container-setting .images,
[id*=view][id*=Modal] .form-check-label,
[id*=view][id*=Modal] textarea,
[id*=view][id*=Modal] .showHidePassword {
  pointer-events: none;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
[id*=view][id*=Modal] .buttons .btn-next-step {
  margin-left: auto;
}
[id*=view][id*=Modal] .buttons .btn-previous-step {
  margin-right: auto;
}

.status-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
.status-group .status-dot {
  width: 12px;
  height: 12px;
  border-radius: 24px;
}
.status-group .status-grey {
  background-color: #606060;
}
.status-group .status-white {
  background-color: #f2f2f2;
}
.status-group .status-red {
  background-color: #e02626;
}
.status-group .status-yellow {
  background-color: #ffeb0a;
  color: black;
}
.status-group .status-green {
  background-color: #24d13b;
}

.pill-state {
  border-radius: 50px;
  padding: 0 8px;
  font-size: 1rem;
  margin: 0 12px;
}
.pill-state.green {
  background-color: #86bfa6;
  color: black;
}
.pill-state.green i {
  color: #22946e;
}
.pill-state.red {
  background-color: #ca7f77;
  color: black;
}
.pill-state.red i {
  color: #9c2121;
}
.pill-state i {
  margin-right: 6px;
}

[class*=-table] .table td {
  vertical-align: middle;
}

.tab-pill-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.tab-pill-group img {
  margin-right: 12px;
}

.tab-pill-gray {
  margin: 6px 0;
  padding: 4px 12px;
  background-color: #3a3a3a;
  border: #606060 1px solid;
  border-radius: 25px;
}

#not-found-area {
  height: calc(100vh - 46px - 26px);
  width: 100%;
}
#not-found-area h1 {
  position: absolute;
  top: 100px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  letter-spacing: 2px;
  text-align: center;
}

@media only screen and (min-width: 2561px) {
  :root {
    --slider-height: 80px;
  }
  html {
    font-size: 1.875rem;
  }
  html .filter-wrapper .form-group select,
  html .filter-wrapper .form-group input {
    font-size: 30px;
  }
  html .filter-wrapper .form-group select {
    background-size: 24px 24px;
  }
  html .filter-wrapper .form-group input[type=datetime-local] {
    height: 59px;
  }
  html .filter-wrapper form .form-scroll {
    min-height: 75vh;
  }
  html header > *,
  html header > * > *,
  html header .country-lang-group select,
  html header .signOut-group button,
  html footer .subfooter {
    font-size: 28px !important;
  }
  html .Result-section .dashboard-wrapper .statistics-ranking .rankingTitle,
  html .Result-section .dashboard-wrapper .statistics-ranking .environmentControlListTitle,
  html .Result-section .dashboard-wrapper .statistics-ranking .environmentControlListTitle,
  html .Result-section .dashboard-wrapper .statistics-environmentControl-list .rankingTitle,
  html .Result-section .dashboard-wrapper .statistics-environmentControl-list .environmentControlListTitle,
  html .Result-section .dashboard-wrapper .statistics-environmentControl-list .environmentControlListTitle,
  html .Result-section .dashboard-wrapper .statistics-environmentControl-levels .rankingTitle,
  html .Result-section .dashboard-wrapper .statistics-environmentControl-levels .environmentControlListTitle,
  html .Result-section .dashboard-wrapper .statistics-environmentControl-levels .environmentControlListTitle {
    font-size: 28px;
  }
  html .Result-section .interactive-dashboard-wrapper .statistics-trend .interactiveTitle,
  html .Result-section .interactive-dashboard-wrapper .interactive-page-section .interactiveTitle {
    font-size: 28px;
  }
  html .Result-section .interactive-dashboard-wrapper .statistics-trend .interactiveTitle button,
  html .Result-section .interactive-dashboard-wrapper .interactive-page-section .interactiveTitle button {
    font-size: 28px;
  }
  html .Result-section .interactive-dashboard-wrapper .statistics-trend .interactiveTitle .interactiveTitleTips,
  html .Result-section .interactive-dashboard-wrapper .interactive-page-section .interactiveTitle .interactiveTitleTips {
    font-size: 21px;
  }
  html .Result-section .interactive-dashboard-wrapper .statistics-images-pages .interactiveTitle {
    font-size: 28px;
  }
  html .Result-section .interactive-dashboard-wrapper .statistics-images-pages .img-outer {
    width: 180px;
  }
  html .Result-section .interactive-dashboard-wrapper .statistics-images-pages .pagination {
    gap: 15px;
  }
  html .Result-section .interactive-dashboard-wrapper .statistics-images-pages .pagination span {
    width: 25px;
    height: 25px;
  }
  html .Result-section .interactive-dashboard-wrapper .interactive-item #carParkingChart,
  html .Result-section .interactive-dashboard-wrapper .interactive-item #motorParkingChart {
    min-height: 30px !important;
    margin-bottom: 24px;
  }
  html .Result-section .zone-button-group button {
    font-size: 30px;
  }
  .dt-paging-button,
  .btn {
    font-size: 28px !important;
  }
  header {
    height: 92px;
  }
  header .logo {
    width: 80px;
    height: 80px;
  }
  .breadcrumb {
    height: 48px;
  }
  footer {
    height: 52px;
  }
  footer .subfooter {
    height: 52px;
  }
  main {
    min-height: 92.5vh;
  }
  main .main-section {
    min-height: 88vh;
  }
  main .main-section .sections-group:not(:has(.Search-section)),
  main .main-section .sections-group:has(.Search-section) {
    min-height: 88vh;
  }
  .LocationTree-section .treeview-wrapper {
    height: 85vh;
  }
  .Result-section .table-wrapper {
    height: 85vh;
  }
  header nav .uk-subnav li .uk-dropdown {
    top: 66px !important;
  }
  header .signOut-group .signOut-dropdown {
    top: 92px !important;
  }
  .map-section-body {
    height: 86vh;
  }
  .map-section-body #map-charts .map-chart-group .chart-header .chart-title .functions-icon img {
    width: 30px;
  }
  .map-section-body #map-charts .map-chart-group .chart-header .switch {
    transform: scale(2);
    transform-origin: top right;
  }
  .map-section-body .map-container #map {
    height: calc(100% - 96px);
  }
  .map-section-body .map-container .zone-tools .zone-button {
    width: 300px;
    height: 96px;
  }
  .map-section-body .map-container .leaflet-bar {
    transform: scale(2);
    transform-origin: top left;
  }
  .map-section-body .map-container .leaflet-control-fullscreen-button {
    margin-top: 42px;
  }
  .map-section-body .map-container .map-tools {
    transform: scale(2);
    transform-origin: top left;
    top: 256px;
  }
  .map-section-body .map-container .legend .legend-title {
    font-size: 28px;
  }
  .map-section-body .map-container .legend .legend-unit {
    font-size: 24px;
  }
  .map-section-body .map-container .legend .legend-body .legend-item-group .square {
    height: 38px;
  }
  .map-section-body .map-container .legend .legend-body .legend-ruler {
    gap: 20px;
    margin-bottom: 18px;
  }
  .map-section-body .map-container .legend .legend-body .legend-ruler .number {
    font-size: 24px;
  }
  .map-section-body .map-container .legend .legend-item .force-icon {
    width: 24px;
    height: 24px;
  }
  .map-section .air-pollution-info-group .aqi-wrap .aqi-numerical {
    width: 260px;
    height: 260px;
  }
  .map-section .human-feature-info-group .human-feature-gender-data .human-feature-table-wrapper {
    max-height: 300px;
  }
  .map-section .vehicle-feature-table-wrapper {
    max-height: 366px;
  }
  .map-section .access-control-table-wrapper {
    max-height: 318px;
  }
  .map-section .vds-body-container table.VDS-info-table .vds-info-direction-icon img {
    width: 48px;
    height: 48px;
  }
  .map-section .vds-info-category-icon img {
    width: 72px !important;
    height: 72px !important;
  }
  .map-section .leaflet-popup-content {
    margin: 26px 48px 26px 40px;
  }
  .map-section .leaflet-popup-content:has(.parking-lots-info-group) {
    min-width: 660px !important;
  }
  .map-section .leaflet-popup-content td .picture-btn,
  .map-section .leaflet-popup-content td .iid-picture-playback-btn,
  .map-section .leaflet-popup-content td .tte-picture-playback-btn {
    width: 46px !important;
    height: 46px !important;
  }
  .map-section .leaflet-popup-content td .iid-event-icon img,
  .map-section .leaflet-popup-content td .tte-event-icon img {
    width: 48px !important;
    height: 48px !important;
  }
  .map-section .leaflet-popup-content .water-level-picture-btn {
    font-size: 30px;
  }
  .map-section .leaflet-popup-content .water-level-picture-btn::before {
    width: 32px;
    height: 32px;
  }
  .map-section .apexcharts-tooltip > *, .map-section .apexcharts-tooltip > * > * {
    font-size: 30px !important;
  }
  .leaflet-container .leaflet-marker-pane img,
  .leaflet-container .arrow-icon {
    width: 80px !important;
    height: 80px !important;
  }
  .leaflet-container a.leaflet-popup-close-button {
    width: 48px;
    height: 48px;
    align-content: center;
  }
  .leaflet-container a.leaflet-popup-close-button span {
    font-size: 36px;
  }
  .vehicle-feature-type-data td:first-child img {
    width: 40px !important;
    height: 40px !important;
  }
  .collapse-btn i {
    width: 40px;
    height: 120px;
  }
  .Search-section .checkbox-square {
    width: 32px;
    height: 32px;
  }
  .Search-section .checkbox-square::after {
    width: 12px;
    height: 20px;
    border-width: 0 4px 4px 0;
  }
  .uk-checkbox {
    width: 32px;
    height: 32px;
  }
  .uk-radio {
    width: 32px;
    height: 32px;
  }
  .uk-icon svg {
    width: 24px;
    height: 24px;
  }
  html.dark div.dt-buttons > .dt-button {
    padding: 12px 28px;
  }
  .Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-ratio {
    height: 680px;
  }
  .Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-ratio .chart-legend-popup {
    height: 180px;
  }
  .Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-detectors {
    height: 480px;
  }
  .Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-detectors .chart-legend-popup {
    height: 180px;
  }
  .Result-section .dashboard-wrapper .statistics-row.half .statistics-content {
    height: 600px;
  }
  .Result-section .dashboard-wrapper .statistics-row.half .statistics-trend {
    height: 600px;
  }
  .Result-section .dashboard-wrapper .statistics-row.half .statistics-trend .trend-wrapper {
    min-height: 480px;
    max-height: 480px;
  }
  .Result-section .dashboard-wrapper .statistics-trend {
    height: 480px;
  }
  .Result-section .dashboard-wrapper .statistics-detectors {
    height: 480px;
    padding-bottom: 90px;
  }
  .Result-section .dashboard-wrapper .statistics-detectors .chart-legend-popup {
    height: 180px;
  }
  .Result-section .dashboard-wrapper .statistics-detectors .chart-total {
    top: 34.5%;
  }
  .Result-section .dashboard-wrapper .statistics-ratio {
    height: 480px;
    padding-bottom: 90px;
  }
  .Result-section .dashboard-wrapper .statistics-ratio .chart-legend-popup {
    height: 180px;
  }
  .Result-section .dashboard-wrapper .statistics-ratio .usageStatus-icon {
    font-size: 36px;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-trend {
    height: 600px;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-trend .trend-wrapper {
    min-height: 480px;
    max-height: 480px;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-content:has(.interactive-map-thumbnail) {
    height: 600px;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-row-list-group .statistics-list .interactive-list-sub-groups {
    height: 1440px;
  }
  .Result-section .interactive-dashboard-wrapper .interactive-table-section {
    max-height: -moz-fit-content;
    max-height: fit-content;
  }
  .Result-section .interactive-dashboard-wrapper .interactive-table-section .dt-container {
    max-height: 702px;
  }
  .Result-section .interactive-dashboard-wrapper .interactive-table-section:has(#WLInteractiveTable) {
    max-height: -moz-fit-content;
    max-height: fit-content;
  }
  .Result-section .interactive-dashboard-wrapper .interactive-table-section:has(#WLInteractiveTable) .dt-container {
    max-height: 702px;
  }
  .Result-section .interactive-dashboard-wrapper .aqi-item .aqi-data,
  .Result-section .interactive-dashboard-wrapper .aqi-item .interactive-data,
  .Result-section .interactive-dashboard-wrapper .interactive-item .aqi-data,
  .Result-section .interactive-dashboard-wrapper .interactive-item .interactive-data {
    font-size: 56px;
  }
  .Result-section .interactive-dashboard-wrapper .aqi-item .unit,
  .Result-section .interactive-dashboard-wrapper .interactive-item .unit {
    font-size: 28px;
  }
  .Result-section .interactive-dashboard-wrapper .aqi-item .aqi-steps .aqi-step,
  .Result-section .interactive-dashboard-wrapper .interactive-item .aqi-steps .aqi-step {
    height: 20px;
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .main-info .weather-loaction .temperature,
  .Result-section .interactive-dashboard-wrapper .weather-card-item .main-info .weather-loaction .magnitude,
  .Result-section .interactive-dashboard-wrapper .weather-card-item .main-info .interactive-data .temperature,
  .Result-section .interactive-dashboard-wrapper .weather-card-item .main-info .interactive-data .magnitude,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .main-info .weather-loaction .temperature,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .main-info .weather-loaction .magnitude,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .main-info .interactive-data .temperature,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .main-info .interactive-data .magnitude {
    font-size: 76px;
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .weather-type img,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .weather-type img {
    width: 168px;
    height: 140px;
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .echart-container div,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .echart-container div {
    scale: 2;
    transform-origin: top right;
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .wd-type img,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .wd-type img {
    width: 96px;
    height: 96px;
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .interactive-data-level .data-number,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .interactive-data-level .data-number {
    font-size: 56px;
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart {
    position: relative;
    padding-top: 36px;
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .level-pointer,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .level-pointer {
    width: 24px;
    height: 24px;
    top: 20px;
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .focalDepth-level-pointer,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .focalDepth-level-pointer {
    width: 24px;
    height: 24px;
    top: 0px;
    left: -16px;
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .bar-steps .bar-step,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .bar-steps .bar-step {
    height: 20px;
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .bar-steps .bar-step:hover,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .bar-steps .bar-step:hover {
    transform: scaleY(1.5);
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .wd-steps .bar-step,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .wd-steps .bar-step {
    height: 20px;
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .focalDepth-steps .bar-step,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .focalDepth-steps .bar-step {
    width: 40px;
    height: 28px;
  }
  .Result-section .interactive-dashboard-wrapper .weather-card-item .bar-steps-chart .focalDepth-steps .bar-step:hover,
  .Result-section .interactive-dashboard-wrapper .earthquake-card-item .bar-steps-chart .focalDepth-steps .bar-step:hover {
    transform: scaleX(1.5);
  }
  .Result-section .table-wrapper table td .head-Picture img,
  .Result-section .table-wrapper table td .parking-space-type img {
    width: 72px;
    height: 72px;
  }
  .Result-section .details-btn {
    font-size: 30px;
  }
  .Result-section table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
    min-width: 60px;
  }
  .Result-section .table-wrapper table td .enc-state-group .enc-state {
    width: 24px;
    height: 24px;
  }
  .Result-section .table-wrapper table td .force-group .force-icon {
    width: 36px;
    height: 36px;
  }
  .Result-section .table-wrapper table td .accessControlStatus span:nth-child(1),
  .Result-section .table-wrapper table td .enc-i-text span:nth-child(1) {
    width: 48px;
    height: 48px;
  }
  .Result-section .table-wrapper table td .search-picture-btn img {
    width: 120px;
    height: auto;
  }
  div.dt-button-collection {
    min-width: 242px !important;
    width: auto !important;
  }
  div.dt-button-collection * {
    font-size: 28px !important;
  }
  div.dt-button-collection .menu .dt-button {
    align-content: center;
  }
  div.dt-button-collection .menu .dt-button span {
    margin-right: 46px;
  }
  div.dt-button-collection .dt-button-active:after {
    margin-top: -20px;
  }
  .pedestrian-modal-info-wrap .pedestrian-basic-info .gender img {
    width: 50px;
  }
  .pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item .pill-item-image {
    width: 80px;
    height: 80px;
  }
  #vehicleAlldetailsModal .vehicle-details-group .whitePlateBlackWords,
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color {
    font-size: 28px;
  }
  #parkingLotDetailsModal .parking-space-type img {
    width: 72px;
    height: 72px;
  }
  .modal-header .btn-close::before {
    font-size: 50px;
  }
  .details-btn {
    font-size: 28px;
  }
  #airPollutionDetailsModal .aqi-circle {
    width: 360px;
    height: 360px;
  }
  #airPollutionDetailsModal .aqi-circle .aqi-title,
  #airPollutionDetailsModal .aqi-circle .aqi-data,
  #airPollutionDetailsModal .aqi-circle .aqi-status {
    font-size: 42px;
  }
  .modal .modal-header .secondary-btn, .modal .modal-header html.dark div.dt-buttons > .dt-button, html.dark .modal .modal-header div.dt-buttons > .dt-button {
    font-size: 28px;
    padding: 12px 28px;
  }
  .modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .details-name {
    font-size: 32px;
  }
  .modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card img {
    width: 120px;
    height: 120px;
  }
  .modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon {
    width: 36px;
    height: 36px;
  }
  .modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .search-picture-btn img {
    width: 240px;
  }
  .modal .vehicle-modal-info-wrap .vehicle-brand-body {
    gap: 180px;
  }
  .modal .vehicle-modal-info-wrap .vehicle-pic img {
    max-height: 686px;
  }
  .modal-lg,
  .modal-xl {
    --bs-modal-width: 2500px;
  }
  .modal-sm {
    --bs-modal-width: 600px;
  }
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::-moz-selection {
	background: transparent;
}
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container.leaflet-touch-zoom {
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;
	transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */
	
@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
.marker-cluster-small {
	background-color: rgba(181, 226, 140, 0.6);
	}
.marker-cluster-small div {
	background-color: rgba(110, 204, 57, 0.6);
	}

.marker-cluster-medium {
	background-color: rgba(241, 211, 87, 0.6);
	}
.marker-cluster-medium div {
	background-color: rgba(240, 194, 12, 0.6);
	}

.marker-cluster-large {
	background-color: rgba(253, 156, 115, 0.6);
	}
.marker-cluster-large div {
	background-color: rgba(241, 128, 23, 0.6);
	}

	/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
	background-color: rgb(181, 226, 140);
	}
.leaflet-oldie .marker-cluster-small div {
	background-color: rgb(110, 204, 57);
	}

.leaflet-oldie .marker-cluster-medium {
	background-color: rgb(241, 211, 87);
	}
.leaflet-oldie .marker-cluster-medium div {
	background-color: rgb(240, 194, 12);
	}

.leaflet-oldie .marker-cluster-large {
	background-color: rgb(253, 156, 115);
	}
.leaflet-oldie .marker-cluster-large div {
	background-color: rgb(241, 128, 23);
}

.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
	}
.marker-cluster div {
	width: 30px;
	height: 30px;
	margin-left: 5px;
	margin-top: 5px;

	text-align: center;
	border-radius: 15px;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
	}
.marker-cluster span {
	line-height: 30px;
	}
/*! UIkit 3.16.26 | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
/* ========================================================================
   Component: Base
 ========================================================================== */
/*
 * 1. Set `font-size` to support `rem` units
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Stylef
 */
/* Links
   ========================================================================== */
/*
   * Style
   */

 /* a,
 .uk-link {
   color: #1e87f0;
   text-decoration: none;
   cursor: pointer;
 }
 a:hover,
 .uk-link:hover,
 .uk-link-toggle:hover .uk-link {
   color: #0f6ecd;
   text-decoration: underline;
 } */
/* Text-level semantics
   ========================================================================== */
/*
   * 1. Add the correct text decoration in Edge.
   * 2. The shorthand declaration `underline dotted` is not supported in Safari.
   */
abbr[title] {
    /* 1 */
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
    /* 2 */
    -webkit-text-decoration-style: dotted;
}

/*
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
b,
strong {
    font-weight: bolder;
}

/*
   * 1. Consolas has a better baseline in running text compared to `Courier`
   * 2. Correct the odd `em` font sizing in all browsers.
   * 3. Style
   */
:not(pre)>code,
:not(pre)>kbd,
:not(pre)>samp {
    /* 1 */
    font-family: Consolas, monaco, monospace;
    /* 2 */
    font-size: 0.875rem;
    /* 3 */
    color: #f0506e;
    white-space: nowrap;
    padding: 2px 6px;
    background: #f8f8f8;
}

/*
   * Emphasize
   */
em {
    color: #f0506e;
}

/*
   * Insert
   */
ins {
    background: #ffd;
    color: #666;
    text-decoration: none;
}

/*
   * Mark
   */
mark {
    background: #ffd;
    color: #666;
}

/*
   * Quote
   */
q {
    font-style: italic;
}

/*
   * Add the correct font size in all browsers.
   */
small {
    font-size: 90%;
}

/*
   * Prevents `sub` and `sup` affecting `line-height` in all browsers.
   */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/*
   * Remove the gap between the element and the bottom of its parent container.
   */
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
   * 1. Constrain the element to its parent width.
   * 2. Preserve the intrinsic aspect ratio and auto-scale the height of an image if the `height` attribute is present.
   * 3. Take border and padding into account.
   */
canvas,
img,
svg,
video {
    /* 1 */
    max-width: 100% !important;
    /* 2 */
    height: auto;
    /* 3 */
    box-sizing: border-box;
}

/*
   * Deprecated: only needed for `img` elements with `uk-img`
   * 1. Hide `alt` text for lazy load images.
   * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
   */
img:not([src]) {
    /* 1 */
    visibility: hidden;
    /* 2 */
    min-width: 1px;
}

/*
   * Iframe
   * Remove border in all browsers
   */
iframe {
    border: 0;
}

/* Block elements
   ========================================================================== */
/*
   * Margins
   */
p,
ul,
ol,
dl,
pre,
address,
fieldset,
figure {
    margin: 0 0 12px 0;
}

/* Add margin if adjacent element */
 /* *+p,
 *+ul,
 *+ol,
 *+dl,
 *+pre,
 *+address,
 *+fieldset,
 *+figure {
     margin-top: 24px;
 } */

/* Lists
   ========================================================================== */
ul,
ol {
    padding-left: 24px;
}

/*
   * Reset margin for nested lists
   */
ul>li>ul,
ul>li>ol,
ol>li>ol,
ol>li>ul {
    margin: 0;
}

/* Description lists
   ========================================================================== */
dt {
    font-weight: bold;
}

dd {
    margin-left: 0;
}

/* Horizontal rules
   ========================================================================== */
/*
   * 1. Show the overflow in Chrome, Edge and IE.
   * 2. Add the correct text-align in Edge and IE.
   * 3. Style
   */
// hr,
.uk-hr {
    /* 1 */
    overflow: visible;
    /* 2 */
    text-align: inherit;
    /* 3 */
    margin: 0 0 20px 0;
    border: 0;
    border-top: 1px solid #e5e5e5;
}

/* Add margin if adjacent element */
*+hr,
*+.uk-hr {
    margin-top: 20px;
}

/* Address
   ========================================================================== */
address {
    font-style: normal;
}

/* Blockquotes
   ========================================================================== */
blockquote {
    margin: 0 0 20px 0;
    font-size: 1.25rem;
    line-height: 1.5;
    font-style: italic;
    color: #333;
}

/* Add margin if adjacent element */
*+blockquote {
    margin-top: 20px;
}

/*
   * Content
   */
blockquote p:last-of-type {
    margin-bottom: 0;
}

blockquote footer {
    margin-top: 10px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #666;
}

blockquote footer::before {
    content: "— ";
}

/* Preformatted text
   ========================================================================== */
/*
   * 1. Contain overflow in all browsers.
   */
pre {
    font: 0.875rem / 1.5 Consolas, monaco, monospace;
    color: #666;
    -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
    /* 1 */
    overflow: auto;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    background: #fff;
}

pre code {
    font-family: Consolas, monaco, monospace;
}

/* Focus
   ========================================================================== */
:focus {
    outline: none;
}

:focus-visible {
    outline: 0px dotted #333;
}

/* Selection pseudo-element
   ========================================================================== */
::-moz-selection {
    background: #606060;
    color: #f2f2f2;
    text-shadow: none;
}
::selection {
    background: #606060;
    color: #f2f2f2;
    text-shadow: none;
}

/* HTML5 elements
   ========================================================================== */
/*
   * 1. Add the correct display in Edge, IE 10+, and Firefox.
   * 2. Add the correct display in IE.
   */
details,
main {
    /* 2 */
    display: block;
}

/*
   * Add the correct display in all browsers.
   */
summary {
    display: list-item;
}

/*
   * Add the correct display in IE.
   */
template {
    display: none;
}

/* Pass media breakpoints to JS
   ========================================================================== */
/*
   * Breakpoints
   */
:root {
    --uk-breakpoint-s: 640px;
    --uk-breakpoint-m: 960px;
    --uk-breakpoint-l: 1200px;
    --uk-breakpoint-xl: 1600px;
}

/* ========================================================================
     Component: Link
   ========================================================================== */
/* Muted
   ========================================================================== */
a.uk-link-muted,
.uk-link-muted a,
.uk-link-toggle .uk-link-muted {
    color: #999;
}

a.uk-link-muted:hover,
.uk-link-muted a:hover,
.uk-link-toggle:hover .uk-link-muted {
    color: #666;
}

/* Text
   ========================================================================== */
a.uk-link-text,
.uk-link-text a,
.uk-link-toggle .uk-link-text {
    color: inherit;
}

a.uk-link-text:hover,
.uk-link-text a:hover,
.uk-link-toggle:hover .uk-link-text {
    color: #999;
}

/* Heading
   ========================================================================== */
a.uk-link-heading,
.uk-link-heading a,
.uk-link-toggle .uk-link-heading {
    color: inherit;
}

a.uk-link-heading:hover,
.uk-link-heading a:hover,
.uk-link-toggle:hover .uk-link-heading {
    color: #1e87f0;
    text-decoration: none;
}

/* Reset
   ========================================================================== */
/*
   * `!important` needed to override inverse component
   */
a.uk-link-reset,
.uk-link-reset a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Toggle
   ========================================================================== */
.uk-link-toggle {
    color: inherit !important;
    text-decoration: none !important;
}

/* ========================================================================
     Component: Heading
   ========================================================================== */
.uk-heading-small {
    font-size: 2.6rem;
    line-height: 1.2;
}

.uk-heading-medium {
    font-size: 2.8875rem;
    line-height: 1.1;
}

.uk-heading-large {
    font-size: 3.4rem;
    line-height: 1.1;
}

.uk-heading-xlarge {
    font-size: 4rem;
    line-height: 1;
}

.uk-heading-2xlarge {
    font-size: 6rem;
    line-height: 1;
}

/* Tablet Landscape and bigger */
@media (min-width: 960px) {
    .uk-heading-small {
        font-size: 3.25rem;
    }

    .uk-heading-medium {
        font-size: 3.5rem;
    }

    .uk-heading-large {
        font-size: 4rem;
    }

    .uk-heading-xlarge {
        font-size: 6rem;
    }

    .uk-heading-2xlarge {
        font-size: 8rem;
    }
}

/* Laptop and bigger */
@media (min-width: 1200px) {
    .uk-heading-medium {
        font-size: 4rem;
    }

    .uk-heading-large {
        font-size: 6rem;
    }

    .uk-heading-xlarge {
        font-size: 8rem;
    }

    .uk-heading-2xlarge {
        font-size: 116px;
    }
}

/* Primary
     Deprecated: Use `uk-heading-medium` instead
   ========================================================================== */
/* Tablet landscape and bigger */
/* Desktop and bigger */
/* Hero
     Deprecated: Use `uk-heading-xlarge` instead
   ========================================================================== */
/* Tablet landscape and bigger */
/* Desktop and bigger */
/* Divider
   ========================================================================== */
.uk-heading-divider {
    padding-bottom: calc(5px + 0.1em);
    border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
}

/* Bullet
   ========================================================================== */
.uk-heading-bullet {
    position: relative;
}

/*
   * 1. Using `inline-block` to make it work with text alignment
   * 2. Center vertically
   * 3. Style
   */
.uk-heading-bullet::before {
    content: "";
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    top: calc(-0.1 * 1em);
    vertical-align: middle;
    /* 3 */
    height: calc(4px + 0.7em);
    margin-right: calc(5px + 0.2em);
    border-left: calc(5px + 0.1em) solid #e5e5e5;
}

/* Line
   ========================================================================== */
/*
   * Clip the child element
   */
.uk-heading-line {
    overflow: hidden;
}

/*
   * Extra markup is needed to make it work with text align
   */
.uk-heading-line>* {
    display: inline-block;
    position: relative;
}

/*
   * 1. Center vertically
   * 2. Make the element as large as possible. It's clipped by the container.
   * 3. Style
   */
.uk-heading-line> ::before,
.uk-heading-line> ::after {
    content: "";
    /* 1 */
    position: absolute;
    top: calc(50% - (calc(0.2px + 0.05em) / 2));
    /* 2 */
    width: 2000px;
    /* 3 */
    border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
}

.uk-heading-line> ::before {
    right: 100%;
    margin-right: calc(5px + 0.3em);
}

.uk-heading-line> ::after {
    left: 100%;
    margin-left: calc(5px + 0.3em);
}

/* ========================================================================
     Component: Divider
   ========================================================================== */
/*
   * 1. Reset default `hr`
   * 2. Set margin if a `div` is used for semantical reason
   */
[class*='uk-divider'] {
    /* 1 */
    border: none;
    /* 2 */
    margin-bottom: 20px;
}

/* Add margin if adjacent element */
*+[class*='uk-divider'] {
    margin-top: 20px;
}

/* Icon
   ========================================================================== */
.uk-divider-icon {
    position: relative;
    height: 20px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23e5e5e5%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.uk-divider-icon::before,
.uk-divider-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    max-width: calc(50% - (50px / 2));
    border-bottom: 1px solid #e5e5e5;
}

.uk-divider-icon::before {
    right: calc(50% + (50px / 2));
    width: 100%;
}

.uk-divider-icon::after {
    left: calc(50% + (50px / 2));
    width: 100%;
}

/* Small
   ========================================================================== */
/*
   * 1. Fix height because of `inline-block`
   * 2. Using ::after and inline-block to make `text-align` work
   */
/* 1 */
.uk-divider-small {
    line-height: 0;
}

/* 2 */
.uk-divider-small::after {
    content: "";
    display: inline-block;
    width: 100px;
    max-width: 100%;
    border-top: 1px solid #e5e5e5;
    vertical-align: top;
}

/* Vertical
   ========================================================================== */
.uk-divider-vertical {
    width: -moz-max-content;
    width: max-content;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid #e5e5e5;
}

/* ========================================================================
     Component: List
   ========================================================================== */
.uk-list {
    padding: 0;
    list-style: none;
}

/*
   * Avoid column break within the list item, when using `column-count`
   */
.uk-list>* {
    -moz-column-break-inside: avoid;
         break-inside: avoid-column;
}

/*
   * Remove margin from the last-child
   */
.uk-list>*> :last-child {
    margin-bottom: 0;
}

/*
   * Style
   */
.uk-list> :nth-child(n+2),
.uk-list>*>ul {
    margin-top: 10px;
}

/* Marker modifiers
   * Moving `::marker` inside `::before` to style it differently
   * To style the `::marker` is currently only supported in Firefox and Safari
   ========================================================================== */
.uk-list-disc>*,
.uk-list-circle>*,
.uk-list-square>*,
.uk-list-decimal>*,
.uk-list-hyphen>* {
    padding-left: 30px;
}

/*
   * Type modifiers
   */
.uk-list-decimal {
    counter-reset: decimal;
}

.uk-list-decimal>* {
    counter-increment: decimal;
}

.uk-list-disc> ::before,
.uk-list-circle> ::before,
.uk-list-square> ::before,
.uk-list-decimal> ::before,
.uk-list-hyphen> ::before {
    content: "";
    position: relative;
    left: -30px;
    width: 30px;
    height: 1.5em;
    margin-bottom: -1.5em;
    display: list-item;
    list-style-position: inside;
    text-align: right;
}

.uk-list-disc> ::before {
    list-style-type: disc;
}

.uk-list-circle> ::before {
    list-style-type: circle;
}

.uk-list-square> ::before {
    list-style-type: square;
}

.uk-list-decimal> ::before {
    content: counter(decimal, decimal) '\200A.\00A0';
}

.uk-list-hyphen> ::before {
    content: '–\00A0\00A0';
}

/*
   * Color modifiers
   */
.uk-list-muted> ::before {
    color: #999 !important;
}

.uk-list-emphasis> ::before {
    color: #333 !important;
}

.uk-list-primary> ::before {
    color: #1e87f0 !important;
}

.uk-list-secondary> ::before {
    color: #222 !important;
}

/* Image bullet modifier
   ========================================================================== */
.uk-list-bullet>* {
    padding-left: 30px;
}

.uk-list-bullet> ::before {
    content: "";
    display: list-item;
    position: relative;
    left: -30px;
    width: 30px;
    height: 1.5em;
    margin-bottom: -1.5em;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/* Style modifiers
   ========================================================================== */
/*
   * Divider
   */
.uk-list-divider> :nth-child(n+2) {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e5e5;
}

/*
   * Striped
   */
.uk-list-striped>* {
    padding: 10px 10px;
}

.uk-list-striped>*:nth-of-type(odd) {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.uk-list-striped> :nth-of-type(odd) {
    background: #f8f8f8;
}

.uk-list-striped> :nth-child(n+2) {
    margin-top: 0;
}

/* Size modifier
   ========================================================================== */
.uk-list-large> :nth-child(n+2),
.uk-list-large>*>ul {
    margin-top: 20px;
}

.uk-list-collapse> :nth-child(n+2),
.uk-list-collapse>*>ul {
    margin-top: 0;
}

/*
   * Divider
   */
.uk-list-large.uk-list-divider> :nth-child(n+2) {
    margin-top: 20px;
    padding-top: 20px;
}

.uk-list-collapse.uk-list-divider> :nth-child(n+2) {
    margin-top: 0;
    padding-top: 0;
}

/*
   * Striped
   */
.uk-list-large.uk-list-striped>* {
    padding: 20px 10px;
}

.uk-list-collapse.uk-list-striped>* {
    padding-top: 0;
    padding-bottom: 0;
}

.uk-list-large.uk-list-striped> :nth-child(n+2),
.uk-list-collapse.uk-list-striped> :nth-child(n+2) {
    margin-top: 0;
}

/* ========================================================================
     Component: Description list
   ========================================================================== */
/*
   * Term
   */
.uk-description-list>dt {
    color: #333;
    font-size: 0.875rem;
    font-weight: normal;
    text-transform: uppercase;
}

.uk-description-list>dt:nth-child(n+2) {
    margin-top: 20px;
}

/*
   * Description
   */
/* Style modifier
   ========================================================================== */
/*
   * Line
   */
.uk-description-list-divider>dt:nth-child(n+2) {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

/* ========================================================================
     Component: Table
   ========================================================================== */
/*
   * 1. Remove most spacing between table cells.
   * 2. Behave like a block element
   * 3. Style
   */
.uk-table {
    /* 1 */
    border-collapse: collapse;
    border-spacing: 0;
    /* 2 */
    width: 100%;
    /* 3 */
    margin-bottom: 20px;
}

/* Add margin if adjacent element */
*+.uk-table {
    margin-top: 20px;
}

/* Header cell
   ========================================================================== */
/*
   * 1. Style
   */
.uk-table th {
    padding: 16px 12px;
    text-align: left;
    vertical-align: bottom;
    /* 1 */
    font-size: 0.875rem;
    font-weight: normal;
    color: #999;
    text-transform: uppercase;
}

/* Cell
   ========================================================================== */
.uk-table td {
    padding: 16px 12px;
    vertical-align: top;
}

/*
   * Remove margin from the last-child
   */
.uk-table td> :last-child {
    margin-bottom: 0;
}

/* Footer
   ========================================================================== */
.uk-table tfoot {
    font-size: 0.875rem;
}

/* Caption
   ========================================================================== */
.uk-table caption {
    font-size: 0.875rem;
    text-align: left;
    color: #999;
}

/* Alignment modifier
   ========================================================================== */
.uk-table-middle,
.uk-table-middle td {
    vertical-align: middle !important;
}

/* Style modifiers
   ========================================================================== */
/*
   * Divider
   */
.uk-table-divider>tr:not(:first-child),
.uk-table-divider> :not(:first-child)>tr,
.uk-table-divider> :first-child>tr:not(:first-child) {
    border-top: 1px solid #e5e5e5;
}

/*
   * Striped
   */
.uk-table-striped>tr:nth-of-type(odd),
.uk-table-striped tbody tr:nth-of-type(odd) {
    background: #f8f8f8;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

/*
   * Hover
   */
.uk-table-hover>tr:hover,
.uk-table-hover tbody tr:hover {
    background: #ffd;
}

/* Active state
   ========================================================================== */
.uk-table>tr.uk-active,
.uk-table tbody tr.uk-active {
    background: #ffd;
}

/* Size modifier
   ========================================================================== */
.uk-table-small th,
.uk-table-small td {
    padding: 10px 12px;
}

.uk-table-large th,
.uk-table-large td {
    padding: 22px 12px;
}

/* Justify modifier
   ========================================================================== */
.uk-table-justify th:first-child,
.uk-table-justify td:first-child {
    padding-left: 0;
}

.uk-table-justify th:last-child,
.uk-table-justify td:last-child {
    padding-right: 0;
}

/* Cell size modifier
   ========================================================================== */
.uk-table-shrink {
    width: 1px;
}

.uk-table-expand {
    min-width: 150px;
}

/* Cell link modifier
   ========================================================================== */
/*
   * Does not work with `uk-table-justify` at the moment
   */
.uk-table-link {
    padding: 0 !important;
}

.uk-table-link>a {
    display: block;
    padding: 16px 12px;
}

.uk-table-small .uk-table-link>a {
    padding: 10px 12px;
}

/* Responsive table
   ========================================================================== */
/* Phone landscape and smaller */
@media (max-width: 959px) {

    .uk-table-responsive,
    .uk-table-responsive tbody,
    .uk-table-responsive th,
    .uk-table-responsive td,
    .uk-table-responsive tr {
        display: block;
    }

    .uk-table-responsive thead {
        display: none;
    }

    .uk-table-responsive th,
    .uk-table-responsive td {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .uk-table-responsive th:not(:first-child):not(.uk-table-link),
    .uk-table-responsive td:not(:first-child):not(.uk-table-link),
    .uk-table-responsive .uk-table-link:not(:first-child)>a {
        padding-top: 5px !important;
    }

    .uk-table-responsive th:not(:last-child):not(.uk-table-link),
    .uk-table-responsive td:not(:last-child):not(.uk-table-link),
    .uk-table-responsive .uk-table-link:not(:last-child)>a {
        padding-bottom: 5px !important;
    }

    .uk-table-justify.uk-table-responsive th,
    .uk-table-justify.uk-table-responsive td {
        padding-left: 0;
        padding-right: 0;
    }
}

.uk-table tbody tr {
    transition: background-color 0.1s linear;
}

.uk-table-striped>tr:nth-of-type(even):last-child,
.uk-table-striped tbody tr:nth-of-type(even):last-child {
    border-bottom: 1px solid #e5e5e5;
}

/* ========================================================================
     Component: Icon
   ========================================================================== */
/*
   * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
   * 1. Remove margins in Chrome, Safari and Opera.
   * 2. Remove borders for `button`.
   * 3. Remove border-radius in Chrome.
   * 4. Address `overflow` set to `hidden` in IE.
   * 5. Correct `font` properties and `color` not being inherited for `button`.
   * 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 7. Remove default `button` padding and background color
   * 8. Style
   * 9. Fill all SVG elements with the current text color if no `fill` attribute is set
   * 10. Let the container fit the height of the icon
   */
.uk-icon {
    /* 1 */
    margin: 0;
    /* 2 */
    border: none;
    /* 3 */
    border-radius: 0;
    /* 4 */
    overflow: visible;
    /* 5 */
    font: inherit;
    color: inherit;
    /* 6 */
    text-transform: none;
    /* 7. */
    padding: 0;
    background-color: transparent;
    /* 8 */
    display: inline-block;
    /* 9 */
    fill: currentcolor;
    /* 10 */
    line-height: 0;
}

/* Required for `button`. */
button.uk-icon:not(:disabled) {
    cursor: pointer;
}

/*
   * Remove the inner border and padding in Firefox.
   */
.uk-icon::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
   * Set the fill and stroke color of all SVG elements to the current text color
   */
.uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve) {
    fill: currentcolor;
}

.uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) {
    stroke: currentcolor;
}

/*
   * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
   */
.uk-icon>* {
    transform: translate(0, 0);
}

/* Image modifier
   ========================================================================== */
/*
   * Display images in icon dimensions
   * 1. Required for `span` with background image
   * 2. Required for `image`
   */
.uk-icon-image {
    width: 20px;
    height: 20px;
    /* 1 */
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    /* 2 */
    -o-object-fit: scale-down;
       object-fit: scale-down;
    max-width: none;
}

/* Style modifiers
   ========================================================================== */
/*
   * Link
   * 1. Allow text within link
   */
.uk-icon-link {
    color: #999;
    /* 1 */
    text-decoration: none !important;
}

.uk-icon-link:hover {
    color: #666;
}

/* OnClick + Active */
.uk-icon-link:active,
.uk-active>.uk-icon-link {
    color: #595959;
}

/*
   * Button
   * 1. Center icon vertically and horizontally
   */
.uk-icon-button {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border-radius: 500px;
    background: #f8f8f8;
    color: #999;
    vertical-align: middle;
    /* 1 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color;
}

/* Hover */
.uk-icon-button:hover {
    background-color: #ebebeb;
    color: #666;
}

/* OnClick + Active */
.uk-icon-button:active,
.uk-active>.uk-icon-button {
    background-color: #dfdfdf;
    color: #666;
}

/* ========================================================================
     Component: Form Range
   ========================================================================== */
/*
   * 1. Remove default style.
   * 2. Define consistent box sizing.
   * 3. Remove `margin` in all browsers.
   * 4. Align to the center of the line box.
   * 5. Prevent content overflow if a fixed width is used.
   * 6. Take the full width.
   * 7. Remove white background in Chrome.
   */
.uk-range {
    /* 1 */
    -webkit-appearance: none;
    /* 2 */
    box-sizing: border-box;
    /* 3 */
    margin: 0;
    /* 4 */
    vertical-align: middle;
    /* 5 */
    max-width: 100%;
    /* 6 */
    width: 100%;
    /* 7 */
    background: transparent;
}

/* Focus */
.uk-range:focus {
    outline: none;
}

.uk-range::-moz-focus-outer {
    border: none;
}

/*
   * Improves consistency of cursor style for clickable elements
   */
.uk-range:not(:disabled)::-webkit-slider-thumb {
    cursor: pointer;
}

.uk-range:not(:disabled)::-moz-range-thumb {
    cursor: pointer;
}

/*
   * Track
   * 1. Safari doesn't have a focus state. Using active instead.
   */
/* Webkit */
.uk-range::-webkit-slider-runnable-track {
    height: 3px;
    background: #ebebeb;
    border-radius: 500px;
}

.uk-range:focus::-webkit-slider-runnable-track,
.uk-range:active::-webkit-slider-runnable-track {
    background: #dedede;
}

/* Firefox */
.uk-range::-moz-range-track {
    height: 3px;
    background: #ebebeb;
    border-radius: 500px;
}

.uk-range:focus::-moz-range-track {
    background: #dedede;
}

/*
   * Thumb
   * 1. Reset
   * 2. Style
   */
/* Webkit */
.uk-range::-webkit-slider-thumb {
    /* 1 */
    -webkit-appearance: none;
    margin-top: -7px;
    /* 2 */
    height: 15px;
    width: 15px;
    border-radius: 500px;
    background: #fff;
    border: 1px solid #cccccc;
}

/* Firefox */
.uk-range::-moz-range-thumb {
    /* 1 */
    border: none;
    /* 2 */
    height: 15px;
    width: 15px;
    margin-top: -7px;
    border-radius: 500px;
    background: #fff;
    border: 1px solid #cccccc;
}

/* ========================================================================
     Component: Form
   ========================================================================== */
/*
   * 1. Define consistent box sizing.
   *    Default is `content-box` with following exceptions set to `border-box`
   *    `select`, `input[type="checkbox"]` and `input[type="radio"]`
   *    `input[type="search"]` in Chrome, Safari and Opera
   *    `input[type="color"]` in Firefox
   * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
   * 3. Remove `border-radius` in iOS.
   * 4. Change font properties to `inherit` in all browsers.
   */
.uk-input,
.uk-select,
.uk-textarea,
.uk-radio,
.uk-checkbox {
    /* 1 */
    box-sizing: border-box;
    /* 2 */
    margin: 0;
    /* 3 */
    border-radius: 3px;
    /* 4 */
    font: inherit;
}

/*
   * Show the overflow in Edge.
   */
.uk-input {
    overflow: visible;
}

/*
   * Remove the inheritance of text transform in Firefox.
   */
.uk-select {
    text-transform: none;
}

/*
   * 1. Change font properties to `inherit` in all browsers
   * 2. Don't inherit the `font-weight` and use `bold` instead.
   * NOTE: Both declarations don't work in Chrome, Safari and Opera.
   */
.uk-select optgroup {
    /* 1 */
    font: inherit;
    /* 2 */
    font-weight: bold;
}

/*
   * Remove the default vertical scrollbar in IE 10+.
   */
.uk-textarea {
    overflow: auto;
}

/*
   * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
   */
.uk-input[type="search"]::-webkit-search-cancel-button,
.uk-input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
.uk-input[type="number"]::-webkit-inner-spin-button,
.uk-input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/*
   * Removes placeholder transparency in Firefox.
   */
.uk-input::-moz-placeholder,
.uk-textarea::-moz-placeholder {
    opacity: 1;
}

/*
   * Improves consistency of cursor style for clickable elements
   */
.uk-radio:not(:disabled),
.uk-checkbox:not(:disabled) {
    cursor: pointer;
}

/*
   * Define consistent border, margin, and padding.
   */
.uk-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

/* Input, select and textarea
   * Allowed: `text`, `password`, `datetime-local`, `date`,  `month`,
              `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`
   * Disallowed: `range`, `radio`, `checkbox`, `file`, `submit`, `reset` and `image`
   ========================================================================== */
/*
   * Remove default style in iOS.
   */
.uk-input,
.uk-textarea {
    -webkit-appearance: none;
}

/*
   * 1. Prevent content overflow if a fixed width is used
   * 2. Take the full width
   * 3. Reset default
   * 4. Style
   */
.uk-input,
.uk-select,
.uk-textarea {
    /* 1 */
    max-width: 100%;
    /* 2 */
    width: 100%;
    /* 3 */
    border: 0 none;
    /* 4 */
    padding: 0 12px;
    /* background: #03090A;
    border: 1px solid #2690a0; */
    border-radius: 6px;
    transition: 0.2s ease-in-out;
    transition-property: color, background-color, border;
}

/*
   * Single-line
   * 1. Allow any element to look like an `input` or `select` element
   * 2. Make sure line-height is not larger than height
   *    Also needed to center the text vertically
   */
.uk-input,
.uk-select:not([multiple]):not([size]) {
    height: 40px;
    vertical-align: middle;
    /* 1 */
    display: inline-block;
}

/* 2 */
.uk-input:not(input),
.uk-select:not(select) {
    line-height: 38px;
}

/*
   * Multi-line
   */
.uk-select[multiple],
.uk-select[size],
.uk-textarea {
    padding-top: 6px;
    padding-bottom: 6px;
    vertical-align: top;
}

.uk-select[multiple],
.uk-select[size] {
    resize: vertical;
}

/* Focus */
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    outline: none;
    background-color: #161a1f;
    border-color: #3DFDFE;
}

/* Disabled */
.uk-input:disabled,
.uk-select:disabled,
.uk-textarea:disabled {
    background-color: #f8f8f8;
    color: #999;
    border-color: #e5e5e5;
}

/*
   * Placeholder
   */
.uk-input::-moz-placeholder {
    color: #999;
}
.uk-input::placeholder {
    color: #999;
}

.uk-textarea::-moz-placeholder {
    color: #999;
}

.uk-textarea::placeholder {
    color: #999;
}

/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
   ========================================================================== */
/*
   * Small
   */
.uk-form-small {
    font-size: 0.875rem;
}

/* Single-line */
.uk-form-small:not(textarea):not([multiple]):not([size]) {
    height: 30px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Multi-line */
textarea.uk-form-small,
[multiple].uk-form-small,
[size].uk-form-small {
    padding: 5px 8px;
}

.uk-form-small:not(select):not(input):not(textarea) {
    line-height: 28px;
}

/*
   * Large
   */
.uk-form-large {
    font-size: 1.25rem;
}

/* Single-line */
.uk-form-large:not(textarea):not([multiple]):not([size]) {
    height: 55px;
    padding-left: 12px;
    padding-right: 12px;
}

/* Multi-line */
textarea.uk-form-large,
[multiple].uk-form-large,
[size].uk-form-large {
    padding: 7px 12px;
}

.uk-form-large:not(select):not(input):not(textarea) {
    line-height: 53px;
}

/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
   ========================================================================== */
/*
   * Error
   */
.uk-form-danger,
.uk-form-danger:focus {
    color: #f0506e;
    border-color: #f0506e;
}

/*
   * Success
   */
.uk-form-success,
.uk-form-success:focus {
    color: #32d296;
    border-color: #32d296;
}

/*
   * Blank
   */
.uk-form-blank {
    background: none;
    border-color: transparent;
}

.uk-form-blank:focus {
    border-color: #e5e5e5;
    border-style: solid;
}

/* Width modifiers (`uk-input`, `uk-select` and `uk-textarea`)
   ========================================================================== */
/*
   * Fixed widths
   * Different widths for mini sized `input` and `select` elements
   */
input.uk-form-width-xsmall {
    width: 50px;
}

select.uk-form-width-xsmall {
    width: 75px;
}

.uk-form-width-small {
    width: 130px;
}

.uk-form-width-medium {
    width: 200px;
}

.uk-form-width-large {
    width: 500px;
}

/* Select
   ========================================================================== */
/*
   * 1. Remove default style. Also works in Firefox
   * 2. Style
   * 3. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
   */
.uk-select:not([multiple]):not([size]) {
    /* 1 */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 2 */
    background-image: url(/img/dropdownArrow.3e3e9053.svg);
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: 96.4% 50%;
}

/* 3 */
.uk-select:not([multiple]):not([size]) option {
    color: black;
}

/*
   * Disabled
   */
.uk-select:not([multiple]):not([size]):disabled {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

/* Datalist
   ========================================================================== */
/*
   * 1. Remove default style in Chrome
   */
.uk-input[list] {
    padding-right: 20px;
    background-repeat: no-repeat;
    background-position: 100% 50%;
}

.uk-input[list]:hover,
.uk-input[list]:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

/* 1 */
.uk-input[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}

/* Radio and checkbox
   ========================================================================== */
/*
   * 1. Style
   * 2. Make box more robust so it clips the child element
   * 3. Vertical alignment
   * 4. Remove default style
   * 5. Fix black background on iOS
   * 6. Center icons
   */
.uk-radio,
.uk-checkbox {
    /* 1 */
    display: inline-block;
    height: 16px;
    width: 16px;
    /* 2 */
    overflow: hidden;
    /* 3 */
    margin-top: -4px;
    vertical-align: middle;
    /* 4 */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 5 */
    background-color: transparent;
    /* 6 */
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: 1.5px solid #2690a0;
    transition: 0.2s ease-in-out;
    transition-property: background-color, border;
}

.uk-radio {
    border-radius: 50%;
}

/* Focus */
.uk-radio:focus,
.uk-checkbox:focus {
    background-color: rgba(0, 0, 0, 0);
    outline: none;
    border-color: #2690a0;
}

/*
   * Checked
   */
.uk-radio:checked,
.uk-checkbox:checked,
.uk-checkbox:indeterminate {
    background-color: #3DFDFE;
    border-color: transparent;
}

/* Focus */
.uk-radio:checked:focus,
.uk-checkbox:checked:focus,
.uk-checkbox:indeterminate:focus {
    background-color: #3DFDFE;
}

/*
   * Icons
   */
.uk-radio:checked {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23000%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-checkbox:checked {
    background-image: url(/img/checked.44f3b580.svg);
}

.uk-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

/*
   * Disabled
   */
.uk-radio:disabled,
.uk-checkbox:disabled {
    background-color: #606060;
    border-color: #606060;
}

.uk-radio:disabled:checked {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23999%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-checkbox:disabled:checked {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-checkbox:disabled:indeterminate {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23999%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

/* Legend
   ========================================================================== */
/*
   * Legend
   * 1. Behave like block element
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove padding so people aren't caught out if they zero out fieldsets.
   * 4. Style
   */
.uk-legend {
    /* 1 */
    width: 100%;
    /* 2 */
    color: inherit;
    /* 3 */
    padding: 0;
    /* 4 */
    font-size: 1.5rem;
    line-height: 1.4;
}

/* Custom controls
   ========================================================================== */
/*
   * 1. Container fits its content
   * 2. Create position context
   * 3. Prevent content overflow
   * 4. Behave like most inline-block elements
   */
.uk-form-custom {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */
    max-width: 100%;
    /* 4 */
    vertical-align: middle;
}

/*
   * 1. Position and resize the form control to always cover its container
   * 2. Required for Firefox for positioning to the left
   * 3. Required for Webkit to make `height` work
   * 4. Hide controle and show cursor
   * 5. Needed for the cursor
   * 6. Clip height caused by 5. Needed for Webkit only
   */
.uk-form-custom select,
.uk-form-custom input[type="file"] {
    /* 1 */
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* 2 */
    left: 0;
    /* 3 */
    -webkit-appearance: none;
    /* 4 */
    opacity: 0;
    cursor: pointer;
}

.uk-form-custom input[type="file"] {
    /* 5 */
    font-size: 500px;
    /* 6 */
    overflow: hidden;
}

/* Label
   ========================================================================== */
.uk-form-label {
    color: #333;
    font-size: 0.875rem;
}

/* Layout
   ========================================================================== */
/*
   * Stacked
   */
.uk-form-stacked .uk-form-label {
    display: block;
    margin-bottom: 5px;
}

/*
   * Horizontal
   */
/* Tablet portrait and smaller */
@media (max-width: 959px) {

    /* Behave like `uk-form-stacked` */
    .uk-form-horizontal .uk-form-label {
        display: block;
        margin-bottom: 5px;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-form-horizontal .uk-form-label {
        width: 200px;
        margin-top: 7px;
        float: left;
    }

    .uk-form-horizontal .uk-form-controls {
        margin-left: 215px;
    }

    /* Better vertical alignment if controls are checkboxes and radio buttons with text */
    .uk-form-horizontal .uk-form-controls-text {
        padding-top: 7px;
    }
}

/* Icons
   ========================================================================== */
/*
   * 1. Set position
   * 2. Set width
   * 3. Center icon vertically and horizontally
   * 4. Style
   */
.uk-form-icon {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* 2 */
    width: 40px;
    /* 3 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* 4 */
    color: #999;
}

/*
   * Required for `a`.
   */
.uk-form-icon:hover {
    color: #666;
}

/*
   * Make `input` element clickable through icon, e.g. if it's a `span`
   */
.uk-form-icon:not(a):not(button):not(input) {
    pointer-events: none;
}

/*
   * Input padding
   */
.uk-form-icon:not(.uk-form-icon-flip)~.uk-input {
    padding-left: 40px !important;
}

/*
   * Position modifier
   */
.uk-form-icon-flip {
    right: 0;
    left: auto;
}

.uk-form-icon-flip~.uk-input {
    padding-right: 40px !important;
}

/* ========================================================================
     Component: Button
   ========================================================================== */
/*
   * 1. Remove margins in Chrome, Safari and Opera.
   * 2. Remove borders for `button`.
   * 3. Address `overflow` set to `hidden` in IE.
   * 4. Correct `font` properties and `color` not being inherited for `button`.
   * 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 6. Remove default style for `input type="submit"`in iOS.
   * 7. Style
   * 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
   *    Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements.
   * 9. Align text if button has a width
   * 10. Required for `a`.
   */
.uk-button {
    /* 1 */
    margin: 0;
    /* 2 */
    border: none;
    /* 3 */
    overflow: visible;
    /* 4 */
    font: inherit;
    color: inherit;
    /* 5 */
    text-transform: none;
    /* 6 */
    -webkit-appearance: none;
    border-radius: 0;
    /* 7 */
    display: inline-block;
    box-sizing: border-box;
    padding: 0 30px;
    vertical-align: middle;
    font-size: 0.875rem;
    /* 8 */
    line-height: 38px;
    /* 9 */
    text-align: center;
    /* 10 */
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color, border-color;
}

.uk-button:not(:disabled) {
    cursor: pointer;
}

/*
   * Remove the inner border and padding in Firefox.
   */
.uk-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Hover */
.uk-button:hover {
    /* 9 */
    text-decoration: none;
}

/* OnClick + Active */
/* Style modifiers
   ========================================================================== */
/*
   * Default
   */
.uk-button-default {
    background-color: transparent;
    color: #333;
    border: 1px solid #e5e5e5;
}

/* Hover */
.uk-button-default:hover {
    background-color: transparent;
    color: #333;
    border-color: #b2b2b2;
}

/* OnClick + Active */
.uk-button-default:active,
.uk-button-default.uk-active {
    background-color: transparent;
    color: #333;
    border-color: #999999;
}

/*
   * Primary
   */
.uk-button-primary {
    background-color: #1e87f0;
    color: #fff;
    border: 1px solid transparent;
}

/* Hover */
.uk-button-primary:hover {
    background-color: #0f7ae5;
    color: #fff;
}

/* OnClick + Active */
.uk-button-primary:active,
.uk-button-primary.uk-active {
    background-color: #0e6dcd;
    color: #fff;
}

/*
   * Secondary
   */
.uk-button-secondary {
    background-color: #222;
    color: #fff;
    border: 1px solid transparent;
}

/* Hover */
.uk-button-secondary:hover {
    background-color: #151515;
    color: #fff;
}

/* OnClick + Active */
.uk-button-secondary:active,
.uk-button-secondary.uk-active {
    background-color: #080808;
    color: #fff;
}

/*
   * Danger
   */
.uk-button-danger {
    background-color: #f0506e;
    color: #fff;
    border: 1px solid transparent;
}

/* Hover */
.uk-button-danger:hover {
    background-color: #ee395b;
    color: #fff;
}

/* OnClick + Active */
.uk-button-danger:active,
.uk-button-danger.uk-active {
    background-color: #ec2147;
    color: #fff;
}

/*
   * Disabled
   * The same for all style modifiers
   */
.uk-button-default:disabled,
.uk-button-primary:disabled,
.uk-button-secondary:disabled,
.uk-button-danger:disabled {
    background-color: transparent;
    color: #999;
    border-color: #e5e5e5;
}

/* Size modifiers
   ========================================================================== */
.uk-button-small {
    padding: 0 15px;
    line-height: 28px;
    font-size: 0.875rem;
}

.uk-button-large {
    padding: 0 40px;
    line-height: 53px;
    font-size: 0.875rem;
}

/* Text modifiers
   ========================================================================== */
/*
   * Text
   * 1. Reset
   * 2. Style
   */
.uk-button-text {
    /* 1 */
    padding: 0;
    line-height: 1.5;
    background: none;
    /* 2 */
    color: #333;
    position: relative;
}

.uk-button-text::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 100%;
    border-bottom: 1px solid currentColor;
    transition: right 0.3s ease-out;
}

/* Hover */
.uk-button-text:hover {
    color: #333;
}

.uk-button-text:hover::before {
    right: 0;
}

/* Disabled */
.uk-button-text:disabled {
    color: #999;
}

.uk-button-text:disabled::before {
    display: none;
}

/*
   * Link
   * 1. Reset
   * 2. Style
   */
.uk-button-link {
    /* 1 */
    padding: 0;
    line-height: 1.5;
    background: none;
    /* 2 */
    color: #333;
}

/* Hover */
.uk-button-link:hover {
    color: #999;
    text-decoration: none;
}

/* Disabled */
.uk-button-link:disabled {
    color: #999;
    text-decoration: none;
}

/* Group
   ========================================================================== */
/*
   * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements
   * 2. Behave like button
   * 3. Create position context
   */
.uk-button-group {
    /* 1 */
    display: inline-flex;
    /* 2 */
    vertical-align: middle;
    /* 3 */
    position: relative;
}

/* Group
       ========================================================================== */
/*
       * Collapse border
       */
.uk-button-group>.uk-button:nth-child(n+2),
.uk-button-group>div:nth-child(n+2) .uk-button {
    margin-left: -1px;
}

/*
       * Create position context to superimpose the successor elements border
       * Known issue: If you use an `a` element as button and an icon inside,
       * the active state will not work if you click the icon inside the button
       * Workaround: Just use a `button` or `input` element as button
       */
.uk-button-group .uk-button:hover,
.uk-button-group .uk-button:focus,
.uk-button-group .uk-button:active,
.uk-button-group .uk-button.uk-active {
    position: relative;
    z-index: 1;
}

/* ========================================================================
     Component: Progress
   ========================================================================== */
/*
   * 1. Add the correct vertical alignment in all browsers.
   * 2. Behave like a block element.
   * 3. Remove borders in Firefox.
   * 4. Remove default style in Chrome, Safari and Edge.
   * 5. Style
   */
.uk-progress {
    /* 1 */
    vertical-align: baseline;
    /* 2 */
    display: block;
    width: 100%;
    /* 3 */
    border: 0;
    /* 4 */
    background-color: #f8f8f8;
    /* 5 */
    margin-bottom: 20px;
    height: 15px;
    border-radius: 500px;
    overflow: hidden;
}

/* Add margin if adjacent element */
*+.uk-progress {
    margin-top: 20px;
}

/*
   * Show background color set on `uk-progress` in Chrome, Safari and Edge.
   */
.uk-progress::-webkit-progress-bar {
    background-color: transparent;
}

/*
   * Progress Bar
   * 1. Transitions don't work on `::-moz-progress-bar` pseudo element in Firefox yet.
   *    https://bugzilla.mozilla.org/show_bug.cgi?id=662351
   */
.uk-progress::-webkit-progress-value {
    background-color: #1e87f0;
    -webkit-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

.uk-progress::-moz-progress-bar {
    background-color: #1e87f0;
    /* 1 */
    -moz-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

/* ========================================================================
     Component: Section
   ========================================================================== */
/*
   * 1. Make it work with `100vh` and height in general
   */
.uk-section {
    display: flow-root;
    box-sizing: border-box;
    /* 1 */
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Desktop and bigger */
@media (min-width: 960px) {
    .uk-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }
}

/*
   * Remove margin from the last-child
   */
.uk-section> :last-child {
    margin-bottom: 0;
}

/* Size modifiers
   ========================================================================== */
/*
   * XSmall
   */
.uk-section-xsmall {
    padding-top: 20px;
    padding-bottom: 20px;
}

/*
   * Small
   */
.uk-section-small {
    padding-top: 40px;
    padding-bottom: 40px;
}

/*
   * Large
   */
.uk-section-large {
    padding-top: 70px;
    padding-bottom: 70px;
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-section-large {
        padding-top: 140px;
        padding-bottom: 140px;
    }
}

/*
   * XLarge
   */
.uk-section-xlarge {
    padding-top: 140px;
    padding-bottom: 140px;
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-section-xlarge {
        padding-top: 210px;
        padding-bottom: 210px;
    }
}

/* Style modifiers
   ========================================================================== */
/*
   * Default
   */
.uk-section-default {
    background: #fff;
}

/*
   * Muted
   */
.uk-section-muted {
    background: #f8f8f8;
}

/*
   * Primary
   */
.uk-section-primary {
    background: #1e87f0;
}

/*
   * Secondary
   */
.uk-section-secondary {
    background: #222;
}

/* Overlap modifier
   ========================================================================== */
/*
   * Reserved modifier to make a section overlap another section with an border image
   * Implemented by the theme
   */
/* ========================================================================
     Component: Container
   ========================================================================== */
/*
   * 1. Box sizing has to be `content-box` so the max-width is always the same and
   *    unaffected by the padding on different breakpoints. It's important for the size modifiers.
   */
.uk-container {
    display: flow-root;
    /* 1 */
    box-sizing: content-box;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/*
   * Remove margin from the last-child
   */
.uk-container> :last-child {
    margin-bottom: 0;
}

/*
   * Remove padding from nested containers
   */
.uk-container .uk-container {
    padding-left: 0;
    padding-right: 0;
}

/* Size modifier
   ========================================================================== */
.uk-container-xsmall {
    max-width: 750px;
}

.uk-container-small {
    max-width: 900px;
}

.uk-container-large {
    max-width: 1400px;
}

.uk-container-xlarge {
    max-width: 1600px;
}

.uk-container-expand {
    max-width: none;
}

/* Expand modifier
   ========================================================================== */
/*
   * Expand one side only
   */
.uk-container-expand-left {
    margin-left: 0;
}

.uk-container-expand-right {
    margin-right: 0;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {

    .uk-container-expand-left.uk-container-xsmall,
    .uk-container-expand-right.uk-container-xsmall {
        max-width: calc(50% + (750px / 2) - 30px);
    }

    .uk-container-expand-left.uk-container-small,
    .uk-container-expand-right.uk-container-small {
        max-width: calc(50% + (900px / 2) - 30px);
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {

    .uk-container-expand-left,
    .uk-container-expand-right {
        max-width: calc(50% + (1200px / 2) - 40px);
    }

    .uk-container-expand-left.uk-container-xsmall,
    .uk-container-expand-right.uk-container-xsmall {
        max-width: calc(50% + (750px / 2) - 40px);
    }

    .uk-container-expand-left.uk-container-small,
    .uk-container-expand-right.uk-container-small {
        max-width: calc(50% + (900px / 2) - 40px);
    }

    .uk-container-expand-left.uk-container-large,
    .uk-container-expand-right.uk-container-large {
        max-width: calc(50% + (1400px / 2) - 40px);
    }

    .uk-container-expand-left.uk-container-xlarge,
    .uk-container-expand-right.uk-container-xlarge {
        max-width: calc(50% + (1600px / 2) - 40px);
    }
}

/* Item
   ========================================================================== */
/*
   * Utility classes to reset container padding on the left or right side
   * Note: It has to be negative margin on the item, because it's specific to the item.
   */
.uk-container-item-padding-remove-left,
.uk-container-item-padding-remove-right {
    width: calc(100% + 15px);
}

.uk-container-item-padding-remove-left {
    margin-left: -15px;
}

.uk-container-item-padding-remove-right {
    margin-right: -15px;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {

    .uk-container-item-padding-remove-left,
    .uk-container-item-padding-remove-right {
        width: calc(100% + 30px);
    }

    .uk-container-item-padding-remove-left {
        margin-left: -30px;
    }

    .uk-container-item-padding-remove-right {
        margin-right: -30px;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {

    .uk-container-item-padding-remove-left,
    .uk-container-item-padding-remove-right {
        width: calc(100% + 40px);
    }

    .uk-container-item-padding-remove-left {
        margin-left: -40px;
    }

    .uk-container-item-padding-remove-right {
        margin-right: -40px;
    }
}

/* ========================================================================
     Component: Tile
   ========================================================================== */
.uk-tile {
    display: flow-root;
    position: relative;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-tile {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-tile {
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 70px;
        padding-bottom: 70px;
    }
}

/*
   * Remove margin from the last-child
   */
.uk-tile> :last-child {
    margin-bottom: 0;
}

/* Size modifiers
   ========================================================================== */
/*
   * XSmall
   */
.uk-tile-xsmall {
    padding-top: 20px;
    padding-bottom: 20px;
}

/*
   * Small
   */
.uk-tile-small {
    padding-top: 40px;
    padding-bottom: 40px;
}

/*
   * Large
   */
.uk-tile-large {
    padding-top: 70px;
    padding-bottom: 70px;
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-tile-large {
        padding-top: 140px;
        padding-bottom: 140px;
    }
}

/*
   * XLarge
   */
.uk-tile-xlarge {
    padding-top: 140px;
    padding-bottom: 140px;
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-tile-xlarge {
        padding-top: 210px;
        padding-bottom: 210px;
    }
}

/* Style modifiers
   ========================================================================== */
/*
   * Default
   */
.uk-tile-default {
    background-color: #fff;
}

/*
   * Muted
   */
.uk-tile-muted {
    background-color: #f8f8f8;
}

/*
   * Primary
   */
.uk-tile-primary {
    background-color: #1e87f0;
}

/*
   * Secondary
   */
.uk-tile-secondary {
    background-color: #222;
}

/* ========================================================================
     Component: Card
   ========================================================================== */
.uk-card {
    position: relative;
    box-sizing: border-box;
    transition: box-shadow 0.1s ease-in-out;
}

/* Sections
   ========================================================================== */
.uk-card-body {
    display: flow-root;
    padding: 30px 30px;
}

.uk-card-header {
    display: flow-root;
    padding: 15px 30px;
}

.uk-card-footer {
    display: flow-root;
    padding: 15px 30px;
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-card-body {
        padding: 40px 40px;
    }

    .uk-card-header {
        padding: 20px 40px;
    }

    .uk-card-footer {
        padding: 20px 40px;
    }
}

/*
   * Remove margin from the last-child
   */
.uk-card-body> :last-child,
.uk-card-header> :last-child,
.uk-card-footer> :last-child {
    margin-bottom: 0;
}

/* Media
   ========================================================================== */
/*
   * Reserved alignment modifier to style the media element, e.g. with `border-radius`
   * Implemented by the theme
   */
/* Title
   ========================================================================== */
.uk-card-title {
    font-size: 1.5rem;
    line-height: 1.4;
}

/* Badge
   ========================================================================== */
/*
   * 1. Position
   * 2. Size
   * 3. Style
   * 4. Center child vertically
   */
.uk-card-badge {
    /* 1 */
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    /* 2 */
    height: 22px;
    padding: 0 10px;
    /* 3 */
    background: #1e87f0;
    color: #fff;
    font-size: 0.875rem;
    /* 4 */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    border-radius: 2px;
    text-transform: uppercase;
}

/*
   * Remove margin from adjacent element
   */
.uk-card-badge:first-child+* {
    margin-top: 0;
}

/* Hover modifier
   ========================================================================== */
.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
    background-color: #fff;
    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

/* Style modifiers
   ========================================================================== */
/*
   * Default
   * Note: Header and Footer are only implemented for the default style
   */
.uk-card-default {
    background-color: #fff;
    color: #666;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.uk-card-default .uk-card-title {
    color: #333;
}

.uk-card-default.uk-card-hover:hover {
    background-color: #fff;
    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

.uk-card-default .uk-card-header {
    border-bottom: 1px solid #e5e5e5;
}

.uk-card-default .uk-card-footer {
    border-top: 1px solid #e5e5e5;
}

/*
   * Primary
   */
.uk-card-primary {
    background-color: #1e87f0;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.uk-card-primary .uk-card-title {
    color: #fff;
}

.uk-card-primary.uk-card-hover:hover {
    background-color: #1e87f0;
    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

/*
   * Secondary
   */
.uk-card-secondary {
    background-color: #222;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.uk-card-secondary .uk-card-title {
    color: #fff;
}

.uk-card-secondary.uk-card-hover:hover {
    background-color: #222;
    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

/* Size modifier
   ========================================================================== */
/*
   * Small
   */
.uk-card-small.uk-card-body,
.uk-card-small .uk-card-body {
    padding: 20px 20px;
}

.uk-card-small .uk-card-header {
    padding: 13px 20px;
}

.uk-card-small .uk-card-footer {
    padding: 13px 20px;
}

/*
   * Large
   */
/* Desktop and bigger */
@media (min-width: 1200px) {

    .uk-card-large.uk-card-body,
    .uk-card-large .uk-card-body {
        padding: 70px 70px;
    }

    .uk-card-large .uk-card-header {
        padding: 35px 70px;
    }

    .uk-card-large .uk-card-footer {
        padding: 35px 70px;
    }
}

/*
       * Default
       */
.uk-card-body>.uk-nav-default {
    margin-left: -30px;
    margin-right: -30px;
}

.uk-card-body>.uk-nav-default:only-child {
    margin-top: -15px;
    margin-bottom: -15px;
}

.uk-card-body>.uk-nav-default>li>a,
.uk-card-body>.uk-nav-default .uk-nav-header,
.uk-card-body>.uk-nav-default .uk-nav-divider {
    padding-left: 30px;
    padding-right: 30px;
}

.uk-card-body>.uk-nav-default .uk-nav-sub {
    padding-left: 45px;
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-card-body>.uk-nav-default {
        margin-left: -40px;
        margin-right: -40px;
    }

    .uk-card-body>.uk-nav-default:only-child {
        margin-top: -25px;
        margin-bottom: -25px;
    }

    .uk-card-body>.uk-nav-default>li>a,
    .uk-card-body>.uk-nav-default .uk-nav-header,
    .uk-card-body>.uk-nav-default .uk-nav-divider {
        padding-left: 40px;
        padding-right: 40px;
    }

    .uk-card-body>.uk-nav-default .uk-nav-sub {
        padding-left: 55px;
    }
}

/*
       * Small
       */
.uk-card-small>.uk-nav-default {
    margin-left: -20px;
    margin-right: -20px;
}

.uk-card-small>.uk-nav-default:only-child {
    margin-top: -5px;
    margin-bottom: -5px;
}

.uk-card-small>.uk-nav-default>li>a,
.uk-card-small>.uk-nav-default .uk-nav-header,
.uk-card-small>.uk-nav-default .uk-nav-divider {
    padding-left: 20px;
    padding-right: 20px;
}

.uk-card-small>.uk-nav-default .uk-nav-sub {
    padding-left: 35px;
}

/*
       * Large
       */
/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-card-large>.uk-nav-default {
        margin: 0;
    }

    .uk-card-large>.uk-nav-default:only-child {
        margin: 0;
    }

    .uk-card-large>.uk-nav-default>li>a,
    .uk-card-large>.uk-nav-default .uk-nav-header,
    .uk-card-large>.uk-nav-default .uk-nav-divider {
        padding-left: 0;
        padding-right: 0;
    }

    .uk-card-large>.uk-nav-default .uk-nav-sub {
        padding-left: 15px;
    }
}

/* ========================================================================
     Component: Close
   ========================================================================== */
/*
   * Adopts `uk-icon`
   */
.uk-close {
    color: #999;
    transition: 0.1s ease-in-out;
    transition-property: color, opacity;
}

/* Hover */
.uk-close:hover {
    color: #666;
}

/* ========================================================================
     Component: Spinner
   ========================================================================== */
/*
   * Adopts `uk-icon`
   */
/* SVG
   ========================================================================== */
.uk-spinner>* {
    animation: uk-spinner-rotate 1.4s linear infinite;
}

@keyframes uk-spinner-rotate {
    0% {
        transform: rotate(0deg);
    }

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

/*
   * Circle
   */
.uk-spinner>*>* {
    stroke-dasharray: 88px;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: uk-spinner-dash 1.4s ease-in-out infinite;
    stroke-width: 1;
    stroke-linecap: round;
}

@keyframes uk-spinner-dash {
    0% {
        stroke-dashoffset: 88px;
    }

    50% {
        stroke-dashoffset: 22px;
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 88px;
        transform: rotate(450deg);
    }
}

/* ========================================================================
     Component: Totop
   ========================================================================== */
/*
   * Addopts `uk-icon`
   */
.uk-totop {
    padding: 5px;
    color: #999;
    transition: color 0.1s ease-in-out;
}

/* Hover */
.uk-totop:hover {
    color: #666;
}

/* OnClick */
.uk-totop:active {
    color: #333;
}

/* ========================================================================
     Component: Marker
   ========================================================================== */
/*
   * Addopts `uk-icon`
   */
.uk-marker {
    padding: 5px;
    background: #222;
    color: #fff;
    border-radius: 500px;
}

/* Hover */
.uk-marker:hover {
    color: #fff;
}

/* ========================================================================
     Component: Alert
   ========================================================================== */
.uk-alert {
    position: relative;
    margin-bottom: 20px;
    padding: 15px 29px 15px 15px;
    background: #f8f8f8;
    color: #666;
}

/* Add margin if adjacent element */
*+.uk-alert {
    margin-top: 20px;
}

/*
   * Remove margin from the last-child
   */
.uk-alert> :last-child {
    margin-bottom: 0;
}

/* Close
   * Adopts `uk-close`
   ========================================================================== */
.uk-alert-close {
    position: absolute;
    top: 20px;
    right: 15px;
    color: inherit;
    opacity: 0.4;
}

/*
   * Remove margin from adjacent element
   */
.uk-alert-close:first-child+* {
    margin-top: 0;
}

/*
   * Hover
   */
.uk-alert-close:hover {
    color: inherit;
    opacity: 0.8;
}

/* Style modifiers
   ========================================================================== */
/*
   * Primary
   */
.uk-alert-primary {
    background: #d8eafc;
    color: #1e87f0;
}

/*
   * Success
   */
.uk-alert-success {
    background: #edfbf6;
    color: #32d296;
}

/*
   * Warning
   */
.uk-alert-warning {
    background: #fff6ee;
    color: #faa05a;
}

/*
   * Danger
   */
.uk-alert-danger {
    background: #fef4f6;
    color: #f0506e;
}

/*
       * Content
       */
.uk-alert h1,
.uk-alert h2,
.uk-alert h3,
.uk-alert h4,
.uk-alert h5,
.uk-alert h6 {
    color: inherit;
}

.uk-alert a:not([class]) {
    color: inherit;
    text-decoration: underline;
}

.uk-alert a:not([class]):hover {
    color: inherit;
    text-decoration: underline;
}

/* ========================================================================
     Component: Placeholder
   ========================================================================== */
.uk-placeholder {
    margin-bottom: 20px;
    padding: 30px 30px;
    background: transparent;
    border: 1px dashed #e5e5e5;
}

/* Add margin if adjacent element */
*+.uk-placeholder {
    margin-top: 20px;
}

/*
   * Remove margin from the last-child
   */
.uk-placeholder> :last-child {
    margin-bottom: 0;
}

/* ========================================================================
     Component: Badge
   ========================================================================== */
/*
   * 1. Style
   * 2. Center child vertically and horizontally
   */
.uk-badge {
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 500px;
    vertical-align: middle;
    /* 1 */
    background: #1e87f0;
    color: #fff !important;
    font-size: 11px;
    /* 2 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
}

/*
   * Required for `a`
   */
.uk-badge:hover {
    text-decoration: none;
}

/* ========================================================================
     Component: Label
   ========================================================================== */
.uk-label {
    display: inline-block;
    padding: 0 10px;
    background: #0068a7;
    line-height: 1.5;
    font-size: 0.875rem;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 2px;
    text-transform: uppercase;
}

/* Color modifiers
   ========================================================================== */
/*
   * Success
   */
.uk-label-success {
    background-color: #32d296;
    color: #fff;
}

/*
   * Warning
   */
.uk-label-warning {
    background-color: #faa05a;
    color: #fff;
}

/*
   * Danger
   */
.uk-label-danger {
    background-color: #f0506e;
    color: #fff;
}

/* ========================================================================
     Component: Overlay
   ========================================================================== */
.uk-overlay {
    padding: 30px 30px;
}

/*
   * Remove margin from the last-child
   */
.uk-overlay> :last-child {
    margin-bottom: 0;
}

/* Icon
   ========================================================================== */
/* Style modifiers
   ========================================================================== */
/*
   * Default
   */
.uk-overlay-default {
    background: rgba(255, 255, 255, 0.8);
}

/*
   * Primary
   */
.uk-overlay-primary {
    background: rgba(34, 34, 34, 0.8);
}

/* ========================================================================
     Component: Article
   ========================================================================== */
.uk-article {
    display: flow-root;
}

/*
   * Remove margin from the last-child
   */
.uk-article> :last-child {
    margin-bottom: 0;
}

/* Adjacent sibling
   ========================================================================== */
.uk-article+.uk-article {
    margin-top: 70px;
}

/* Title
   ========================================================================== */
.uk-article-title {
    font-size: 2.23125rem;
    line-height: 1.2;
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-article-title {
        font-size: 2.625rem;
    }
}

/* Meta
   ========================================================================== */
.uk-article-meta {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #999;
}

.uk-article-meta a {
    color: #999;
}

.uk-article-meta a:hover {
    color: #666;
    text-decoration: none;
}

/* ========================================================================
     Component: Comment
   ========================================================================== */
/* Sections
   ========================================================================== */
.uk-comment-body {
    display: flow-root;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.uk-comment-header {
    display: flow-root;
    margin-bottom: 20px;
}

/*
   * Remove margin from the last-child
   */
.uk-comment-body> :last-child,
.uk-comment-header> :last-child {
    margin-bottom: 0;
}

/* Title
   ========================================================================== */
.uk-comment-title {
    font-size: 1.25rem;
    line-height: 1.4;
}

/* Meta
   ========================================================================== */
.uk-comment-meta {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #999;
}

/* Avatar
   ========================================================================== */
/* List
   ========================================================================== */
.uk-comment-list {
    padding: 0;
    list-style: none;
}

/* Adjacent siblings */
.uk-comment-list> :nth-child(n+2) {
    margin-top: 70px;
}

/*
   * Sublists
   * Note: General sibling selector allows reply block between comment and sublist
   */
.uk-comment-list .uk-comment~ul {
    margin: 70px 0 0 0;
    padding-left: 30px;
    list-style: none;
}

/* Tablet and bigger */
@media (min-width: 960px) {
    .uk-comment-list .uk-comment~ul {
        padding-left: 100px;
    }
}

/* Adjacent siblings */
.uk-comment-list .uk-comment~ul> :nth-child(n+2) {
    margin-top: 70px;
}

/* Style modifier
   ========================================================================== */
.uk-comment-primary {
    padding: 30px;
    background-color: #f8f8f8;
}

/* ========================================================================
     Component: Search
   ========================================================================== */
/*
   * 1. Container fits its content
   * 2. Create position context
   * 3. Prevent content overflow
   * 4. Reset `form`
   */
.uk-search {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */
    max-width: 100%;
    /* 4 */
    margin: 0;
}

/* Input
   ========================================================================== */
/*
   * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
   */
.uk-search-input::-webkit-search-cancel-button,
.uk-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
   * Removes placeholder transparency in Firefox.
   */
.uk-search-input::-moz-placeholder {
    opacity: 1;
}

/*
   * 1. Define consistent box sizing.
   * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
   * 3. Remove `border-radius` in iOS.
   * 4. Change font properties to `inherit` in all browsers
   * 5. Show the overflow in Edge.
   * 6. Remove default style in iOS.
   * 7. Vertical alignment
   * 8. Take the full container width
   * 9. Style
   */
.uk-search-input {
    /* 1 */
    box-sizing: border-box;
    /* 2 */
    margin: 0;
    /* 3 */
    border-radius: 0;
    /* 4 */
    font: inherit;
    /* 5 */
    overflow: visible;
    /* 6 */
    -webkit-appearance: none;
    /* 7 */
    vertical-align: middle;
    /* 8 */
    width: 100%;
    /* 9 */
    border: none;
    color: #666;
}

.uk-search-input:focus {
    outline: none;
}

/* Placeholder */
.uk-search-input::-moz-placeholder {
    color: #999;
}
.uk-search-input::placeholder {
    color: #999;
}

/* Icon (Adopts `uk-icon`)
   ========================================================================== */
/*
   * Position above input
   * 1. Set position
   * 2. Center icon vertically and horizontally
   * 3. Style
   */
.uk-search .uk-search-icon {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* 2 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* 3 */
    color: #999;
}

/*
   * Required for `a`.
   */
.uk-search .uk-search-icon:hover {
    color: #999;
}

/*
   * Make `input` element clickable through icon, e.g. if it's a `span`
   */
.uk-search .uk-search-icon:not(a):not(button):not(input) {
    pointer-events: none;
}

/*
   * Position modifier
   */
.uk-search .uk-search-icon-flip {
    right: 0;
    left: auto;
}

/* Default modifier
   ========================================================================== */
.uk-search-default {
    width: 240px;
}

/*
   * Input
   */
.uk-search-default .uk-search-input {
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    background: transparent;
    border: 1px solid #e5e5e5;
}

/* Focus */
.uk-search-default .uk-search-input:focus {
    background-color: rgba(0, 0, 0, 0);
    border-color: #0068a7;
}

/*
   * Icon
   */
.uk-search-default .uk-search-icon {
    width: 40px;
}

.uk-search-default .uk-search-icon:not(.uk-search-icon-flip)~.uk-search-input {
    padding-left: 40px;
}

.uk-search-default .uk-search-icon-flip~.uk-search-input {
    padding-right: 40px;
}

/* Navbar modifier
   ========================================================================== */
.uk-search-navbar {
    width: 400px;
}

/*
   * Input
   */
.uk-search-navbar .uk-search-input {
    height: 40px;
    background: transparent;
    font-size: 1.5rem;
}

/* Focus */
/*
   * Icon
   */
.uk-search-navbar .uk-search-icon {
    width: 40px;
}

.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip)~.uk-search-input {
    padding-left: 40px;
}

.uk-search-navbar .uk-search-icon-flip~.uk-search-input {
    padding-right: 40px;
}

/* Large modifier
   ========================================================================== */
.uk-search-large {
    width: 500px;
}

/*
   * Input
   */
.uk-search-large .uk-search-input {
    height: 80px;
    background: transparent;
    font-size: 2.625rem;
}

/* Focus */
/*
   * Icon
   */
.uk-search-large .uk-search-icon {
    width: 80px;
}

.uk-search-large .uk-search-icon:not(.uk-search-icon-flip)~.uk-search-input {
    padding-left: 80px;
}

.uk-search-large .uk-search-icon-flip~.uk-search-input {
    padding-right: 80px;
}

/* Toggle
   ========================================================================== */
.uk-search-toggle {
    color: #999;
}

/* Hover */
.uk-search-toggle:hover {
    color: #666;
}

/* ========================================================================
     Component: Accordion
   ========================================================================== */
.uk-accordion {
    padding: 0;
    list-style: none;
    width: 100%;
    letter-spacing: 2px;

    ul {
        padding-left: 0;
    }

    li {
        list-style: none;
    }
}

.accordions {
    overflow-y: auto;

    @media only screen and (max-width: 1280px) {
        max-height: 36vh;
    }

    &:has(#treeView) {
        max-height: 85vh;

        @media only screen and (max-width: 1280px) {
            max-height: 36vh;
        }
    }
}

/* Item
   ========================================================================== */
.uk-accordion> :nth-child(n+2) {
    padding-top: 20px;
}

/* Title
   ========================================================================== */
.uk-accordion-title {
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: #f2f2f2;
    background-color: var(--secondary);
    box-shadow: var(--shadow-3);
    padding: 8px 12px;
    padding-right: 13px;
    font-weight: 600;
    letter-spacing: 2px;
}

.uk-accordion-title::before {
    content: "\002B";
    margin-left: 10px;
    float: right;
}

.uk-open>.uk-accordion-title::before {
    content: "\2212";
}

/* Hover */
.uk-accordion-title:hover {
    text-decoration: none;
}

/* Content
   ========================================================================== */
.uk-accordion-content {
    display: flow-root;
    margin-top: 12px;
}

/*
   * Remove margin from the last-child
   */
.uk-accordion-content> :last-child {
    margin-bottom: 0;
}

/* ========================================================================
     Component: Drop
   ========================================================================== */
/*
   * 1. Hide by default
   * 2. Set position
   * 3. Set a default width
   */
.uk-drop {
    /* 1 */
    display: none;
    /* 2 */
    position: absolute;
    z-index: 1020;
    --uk-position-offset: 20px;
    --uk-position-viewport-offset: 15px;
    /* 3 */
    box-sizing: border-box;
    width: 300px;
}

/* Show */
.uk-drop.uk-open {
    display: block;
}

/* Grid modifiers
   ========================================================================== */
.uk-drop-stack .uk-drop-grid>* {
    width: 100% !important;
}

/* Parent icon
   ========================================================================== */
.uk-drop-parent-icon {
    margin-left: 0.25em;
    transition: transform 0.3s ease-out;
}

[aria-expanded="true"]>.uk-drop-parent-icon {
    transform: rotateX(180deg);
}

/* ========================================================================
     Component: Dropbar
   ========================================================================== */
/*
   * Adopts `uk-drop`
   * 1. Reset drop
   * 2. Style
   */
.uk-dropbar {
    --uk-position-offset: 0;
    --uk-position-shift-offset: 0;
    --uk-position-viewport-offset: 0;
    /* 1 */
    width: auto;
    /* 2 */
    padding: 25px 15px 25px 15px;
    background: #fff;
    color: #666;
}

/*
   * Remove margin from the last-child
   */
.uk-dropbar> :last-child {
    margin-bottom: 0;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-dropbar {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-dropbar {
        padding-left: 40px;
        padding-right: 40px;
    }
}

.uk-dropbar :focus-visible {
    outline-color: #333 !important;
}

/* Size modifier
   ========================================================================== */
.uk-dropbar-large {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Direction modifier
   ========================================================================== */
.uk-dropbar-top {
    box-shadow: 0 12px 7px -6px rgba(0, 0, 0, 0.05);
}

.uk-dropbar-bottom {
    box-shadow: 0 -12px 7px -6px rgba(0, 0, 0, 0.05);
}

.uk-dropbar-left {
    box-shadow: 12px 0 7px -6px rgba(0, 0, 0, 0.05);
}

.uk-dropbar-right {
    box-shadow: -12px 0 7px -6px rgba(0, 0, 0, 0.05);
}

/* ========================================================================
     Component: Dropnav
   ========================================================================== */
/*
   * 1. Position
   * 2. Reset dropbar
   * 3. Width
   */
.uk-dropnav-dropbar {
    /* 1 */
    position: absolute;
    z-index: 980;
    /* 2 */
    padding: 0;
    /* 3 */
    left: 0;
    right: 0;
}

/* ========================================================================
     Component: Modal
   ========================================================================== */
/*
   * 1. Hide by default
   * 2. Set position
   * 3. Allow scrolling for the modal dialog
   * 4. Horizontal padding
   * 5. Mask the background page
   * 6. Fade-in transition
   */
.uk-modal {
    /* 1 */
    display: none;
    /* 2 */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1010;
    /* 3 */
    overflow-y: auto;
    /* 4 */
    padding: 15px 15px;
    /* 5 */
    background: rgba(0, 0, 0, 0.6);
    /* 6 */
    opacity: 0;
    transition: opacity 0.15s linear;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-modal {
        padding: 50px 30px;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-modal {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/*
   * Open
   */
.uk-modal.uk-open {
    opacity: 1;
}

/* Page
   ========================================================================== */
/*
   * Prevent scrollbars
   */
.uk-modal-page {
    overflow: hidden;
}

/* Dialog
   ========================================================================== */
/*
   * 1. Create position context for spinner and close button
   * 2. Dimensions
   * 3. `!important` is needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
   * 4. Style
   * 5. Slide-in transition
   */
.uk-modal-dialog {
    /* 1 */
    position: relative;
    /* 2 */
    box-sizing: border-box;
    margin: 0 auto;
    width: 600px;
    /* 3 */
    max-width: 100% !important;
    /* 4 */
    background: #fff;
    /* 5 */
    opacity: 0;
    transform: translateY(-100px);
    transition: 0.3s linear;
    transition-property: opacity, transform;
}

/*
   * Open
   */
.uk-open>.uk-modal-dialog {
    opacity: 1;
    transform: translateY(0);
}

/* Size modifier
   ========================================================================== */
/*
   * Container size
   * Take the same size as the Container component
   */
.uk-modal-container .uk-modal-dialog {
    width: 1200px;
}

/*
   * Full size
   * 1. Remove padding and background from modal
   * 2. Reset all default declarations from modal dialog
   */
/* 1 */
.uk-modal-full {
    padding: 0;
    background: none;
}

/* 2 */
.uk-modal-full .uk-modal-dialog {
    margin: 0;
    width: 100%;
    max-width: 100%;
    transform: translateY(0);
}

/* Sections
   ========================================================================== */
.uk-modal-body {
    display: flow-root;
    padding: 20px 20px;
}

.uk-modal-header {
    display: flow-root;
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.uk-modal-footer {
    display: flow-root;
    padding: 10px 20px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-modal-body {
        padding: 30px 30px;
    }

    .uk-modal-header {
        padding: 15px 30px;
    }

    .uk-modal-footer {
        padding: 15px 30px;
    }
}

/*
   * Remove margin from the last-child
   */
.uk-modal-body> :last-child,
.uk-modal-header> :last-child,
.uk-modal-footer> :last-child {
    margin-bottom: 0;
}

/* Title
   ========================================================================== */
.uk-modal-title {
    font-size: 2rem;
    line-height: 1.3;
}

/* Close
   * Adopts `uk-close`
   ========================================================================== */
[class*='uk-modal-close-'] {
    position: absolute;
    z-index: 1010;
    top: 10px;
    right: 10px;
    padding: 5px;
}

/*
   * Remove margin from adjacent element
   */
[class*='uk-modal-close-']:first-child+* {
    margin-top: 0;
}

/*
   * Hover
   */
/*
   * Default
   */
/*
   * Outside
   * 1. Prevent scrollbar on small devices
   */
.uk-modal-close-outside {
    top: 0;
    /* 1 */
    right: -5px;
    transform: translate(0, -100%);
    color: #ffffff;
}

.uk-modal-close-outside:hover {
    color: #fff;
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {

    /* 1 */
    .uk-modal-close-outside {
        right: 0;
        transform: translate(100%, -100%);
    }
}

/*
   * Full
   */
.uk-modal-close-full {
    top: 0;
    right: 0;
    padding: 10px;
    background: #fff;
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-modal-close-full {
        padding: 20px;
    }
}

/* ========================================================================
     Component: Slideshow
   ========================================================================== */
/*
   * 1. Prevent tab highlighting on iOS.
   */
.uk-slideshow {
    /* 1 */
    -webkit-tap-highlight-color: transparent;
}

/* Items
   ========================================================================== */
/*
   * 1. Create position and stacking context
   * 2. Reset list
   * 3. Clip child elements
   * 4. Prevent displaying the callout information on iOS.
   * 5. Disable horizontal panning gestures
   */
.uk-slideshow-items {
    /* 1 */
    position: relative;
    z-index: 0;
    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 3 */
    overflow: hidden;
    /* 4 */
    -webkit-touch-callout: none;
    /* 5 */
    touch-action: pan-y;
}

/* Item
   ========================================================================== */
/*
   * 1. Position items above each other
   * 2. Take the full width
   * 3. Clip child elements, e.g. for `uk-cover`
   * 4. Optimize animation
   */
.uk-slideshow-items>* {
    /* 1 */
    position: absolute;
    top: 0;
    left: 0;
    /* 2 */
    right: 0;
    bottom: 0;
    /* 3 */
    overflow: hidden;
    /* 4 */
    will-change: transform, opacity;
}

/*
   * Hide not active items
   */
.uk-slideshow-items> :not(.uk-active) {
    display: none;
}

/* ========================================================================
     Component: Slider
   ========================================================================== */
/*
   * 1. Prevent tab highlighting on iOS.
   */
.uk-slider {
    /* 1 */
    -webkit-tap-highlight-color: transparent;
}

/* Container
   ========================================================================== */
/*
   * 1. Clip child elements
   * 2. Prevent accidental scrolling through elements in slide getting focused
   */
.uk-slider-container {
    /* 1 */
    overflow: hidden;
    /* 2 */
    overflow: clip;
}

/*
   * Widen container to prevent box-shadows from clipping, `large-box-shadow`
   */
.uk-slider-container-offset {
    margin: -11px -25px -39px -25px;
    padding: 11px 25px 39px 25px;
}

/* Items
   ========================================================================== */
/*
   * 1. Optimize animation
   * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`.
   * 3. Disable horizontal panning gestures
   */
.uk-slider-items {
    /* 1 */
    will-change: transform;
    /* 2 */
    position: relative;
    /* 3 */
    touch-action: pan-y;
}

/*
   * 1. Reset list style without interfering with grid
   * 2. Prevent displaying the callout information on iOS.
   */
.uk-slider-items:not(.uk-grid) {
    display: flex;
    /* 1 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 2 */
    -webkit-touch-callout: none;
}

.uk-slider-items.uk-grid {
    flex-wrap: nowrap;
}

/* Item
   ========================================================================== */
/*
   * 1. Let items take content dimensions (0 0 auto)
   *    `max-width` needed to keep image responsiveness and prevent content overflow
   * 2. Create position context
   */
.uk-slider-items>* {
    /* 1 */
    flex: none;
    box-sizing: border-box;
    max-width: 100%;
    /* 2 */
    position: relative;
}

/* ========================================================================
     Component: Sticky
   ========================================================================== */
/*
   * 1. Create position context so it's t the same like when fixed.
   * 2. Create stacking context already when not sticky to have the same context
  *     for position set to `sticky` and `relative`
   * 2. More robust if padding and border are used and the sticky height is transitioned
   */
.uk-sticky {
    /* 1 */
    position: relative;
    /* 2 */
    z-index: 980;
    /* 3 */
    box-sizing: border-box;
}

/*
   * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
   */
.uk-sticky-fixed {
    margin: 0 !important;
    /* 1 */
    backface-visibility: hidden;
}

/*
   * Faster animations
   */
.uk-sticky[class*='uk-animation-'] {
    animation-duration: 0.2s;
}

.uk-sticky.uk-animation-reverse {
    animation-duration: 0.2s;
}

/*
   * Placeholder
   * Make content clickable for sticky cover and reveal effects
   */
.uk-sticky-placeholder {
    pointer-events: none;
}

/* ========================================================================
     Component: Off-canvas
   ========================================================================== */
/*
   * 1. Hide by default
   * 2. Set position
   */
.uk-offcanvas {
    /* 1 */
    display: none;
    /* 2 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
}

/*
   * Flip modifier
   */
.uk-offcanvas-flip .uk-offcanvas {
    right: 0;
    left: auto;
}

/* Bar
   ========================================================================== */
/*
   * 1. Set position
   * 2. Size and style
   * 3. Allow scrolling
   */
.uk-offcanvas-bar {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: -270px;
    /* 2 */
    box-sizing: border-box;
    width: 270px;
    padding: 20px 20px;
    background: #222;
    /* 3 */
    overflow-y: auto;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-offcanvas-bar {
        left: -350px;
        width: 350px;
        padding: 30px 30px;
    }
}

/* Flip modifier */
.uk-offcanvas-flip .uk-offcanvas-bar {
    left: auto;
    right: -270px;
}

/* Tablet landscape and bigger */
@media (min-width: 640px) {
    .uk-offcanvas-flip .uk-offcanvas-bar {
        right: -350px;
    }
}

/*
   * Open
   */
.uk-open>.uk-offcanvas-bar {
    left: 0;
}

.uk-offcanvas-flip .uk-open>.uk-offcanvas-bar {
    left: auto;
    right: 0;
}

/*
   * Slide Animation (Used in slide and push mode)
   */
.uk-offcanvas-bar-animation {
    transition: left 0.3s ease-out;
}

.uk-offcanvas-flip .uk-offcanvas-bar-animation {
    transition-property: right;
}

/*
   * Reveal Animation
   * 1. Set position
   * 2. Clip the bar
   * 3. Animation
   * 4. Reset position
   */
.uk-offcanvas-reveal {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* 2 */
    width: 0;
    overflow: hidden;
    /* 3 */
    transition: width 0.3s ease-out;
}

.uk-offcanvas-reveal .uk-offcanvas-bar {
    /* 4 */
    left: 0;
}

.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar {
    /* 4 */
    left: auto;
    right: 0;
}

.uk-open>.uk-offcanvas-reveal {
    width: 270px;
}

/* Tablet landscape and bigger */
@media (min-width: 640px) {
    .uk-open>.uk-offcanvas-reveal {
        width: 350px;
    }
}

/*
   * Flip modifier
   */
.uk-offcanvas-flip .uk-offcanvas-reveal {
    right: 0;
    left: auto;
}

/* Close
   * Adopts `uk-close`
   ========================================================================== */
.uk-offcanvas-close {
    position: absolute;
    z-index: 1000;
    top: 5px;
    right: 5px;
    padding: 5px;
}

/* Tablet landscape and bigger */
@media (min-width: 640px) {
    .uk-offcanvas-close {
        top: 10px;
        right: 10px;
    }
}

/*
   * Remove margin from adjacent element
   */
.uk-offcanvas-close:first-child+* {
    margin-top: 0;
}

/* Overlay
   ========================================================================== */
/*
   * Overlay the whole page. Needed for the `::before`
   * 1. Using `100vw` so no modification is needed when off-canvas is flipped
   * 2. Allow for closing with swipe gesture on devices with pointer events.
   */
.uk-offcanvas-overlay {
    /* 1 */
    width: 100vw;
    /* 2 */
    touch-action: none;
}

/*
   * 1. Mask the whole page
   * 2. Fade-in transition
   */
.uk-offcanvas-overlay::before {
    /* 1 */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.1);
    /* 2 */
    opacity: 0;
    transition: opacity 0.15s linear;
}

.uk-offcanvas-overlay.uk-open::before {
    opacity: 1;
}

/* Prevent scrolling
   ========================================================================== */
/*
   * Prevent horizontal scrollbar when the content is slide-out
   * Has to be on the `html` element too to make it work on the `body`
   * 1. `clip` is needed for `position: sticky` elements to keep their position
   */
.uk-offcanvas-page,
.uk-offcanvas-container {
    overflow-x: hidden;
    /* 1 */
    overflow-x: clip;
}

/* Container
   ========================================================================== */
/*
   * Prepare slide-out animation (Used in reveal and push mode)
   * Using `position: left` instead of `transform` because position `fixed` elements like sticky navbars
   * lose their fixed state and behaves like `absolute` within a transformed container
   * 1. Provide a fixed width and prevent shrinking
   */
.uk-offcanvas-container {
    position: relative;
    left: 0;
    transition: left 0.3s ease-out;
    /* 1 */
    box-sizing: border-box;
    width: 100%;
}

/*
   * Activate slide-out animation
   */
:not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
    left: 270px;
}

.uk-offcanvas-flip.uk-offcanvas-container-animation {
    left: -270px;
}

/* Tablet landscape and bigger */
@media (min-width: 640px) {
    :not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
        left: 350px;
    }

    .uk-offcanvas-flip.uk-offcanvas-container-animation {
        left: -350px;
    }
}

/* ========================================================================
     Component: Switcher
   ========================================================================== */
/*
   * Reset list
   */
.uk-switcher {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Items
   ========================================================================== */
/*
   * Hide not active items
   */
.uk-switcher> :not(.uk-active) {
    display: none;
}

/*
   * Remove margin from the last-child
   */
.uk-switcher>*> :last-child {
    margin-bottom: 0;
}

/* ========================================================================
     Component: Leader
   ========================================================================== */
.uk-leader {
    overflow: hidden;
}

/*
   * 1. Place element in text flow
   * 2. Never break into a new line
   * 3. Get a string back with as many repeating characters to fill the container
   * 4. Prevent wrapping. Overflowing characters will be clipped by the container
   */
.uk-leader-fill::after {
    /* 1 */
    display: inline-block;
    margin-left: 15px;
    /* 2 */
    width: 0;
    /* 3 */
    content: attr(data-fill);
    /* 4 */
    white-space: nowrap;
}

/*
   * Hide if media does not match
   */
.uk-leader-fill.uk-leader-hide::after {
    display: none;
}

/*
   * Pass fill character to JS
   */
:root {
    --uk-leader-fill-content: .;
}

/* ========================================================================
     Component: Notification
   ========================================================================== */
/*
   * 1. Set position
   * 2. Dimensions
   */
.uk-notification {
    /* 1 */
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1040;
    /* 2 */
    box-sizing: border-box;
    width: 350px;
}

/* Position modifiers
  ========================================================================== */
.uk-notification-top-right,
.uk-notification-bottom-right {
    left: auto;
    right: 10px;
}

.uk-notification-top-center,
.uk-notification-bottom-center {
    left: 50%;
    margin-left: -175px;
}

.uk-notification-bottom-left,
.uk-notification-bottom-right,
.uk-notification-bottom-center {
    top: auto;
    bottom: 10px;
}

/* Responsiveness
  ========================================================================== */
/* Phones portrait and smaller */
@media (max-width: 639px) {
    .uk-notification {
        left: 10px;
        right: 10px;
        width: auto;
        margin: 0;
    }
}

/* Message
  ========================================================================== */
.uk-notification-message {
    position: relative;
    padding: 15px;
    background: #f8f8f8;
    color: #666;
    font-size: 1.25rem;
    line-height: 1.4;
    cursor: pointer;
}

*+.uk-notification-message {
    margin-top: 10px;
}

/* Close
   * Adopts `uk-close`
   ========================================================================== */
.uk-notification-close {
    display: none;
    position: absolute;
    top: 20px;
    right: 15px;
}

.uk-notification-message:hover .uk-notification-close {
    display: block;
}

/* Style modifiers
   ========================================================================== */
/*
   * Primary
   */
.uk-notification-message-primary {
    color: #1e87f0;
}

/*
   * Success
   */
.uk-notification-message-success {
    color: #32d296;
}

/*
   * Warning
   */
.uk-notification-message-warning {
    color: #faa05a;
}

/*
   * Danger
   */
.uk-notification-message-danger {
    color: #f0506e;
}

/* ========================================================================
     Component: Tooltip
   ========================================================================== */
/*
   * 1. Hide by default
   * 2. Position
   * 3. Remove tooltip from document flow to keep the UIkit container from changing its size when injected into the document initially
   * 4. Dimensions
   * 5. Style
   */
.uk-tooltip {
    /* 1 */
    display: none;
    /* 2 */
    position: absolute;
    z-index: 1030;
    --uk-position-offset: 10px;
    --uk-position-viewport-offset: 10;
    /* 3 */
    top: 0;
    /* 4 */
    box-sizing: border-box;
    max-width: 200px;
    padding: 3px 6px;
    /* 5 */
    background: #666;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
}

/* Show */
.uk-tooltip.uk-active {
    display: block;
}

/* ========================================================================
     Component: Sortable
   ========================================================================== */
.uk-sortable {
    position: relative;
}

/*
   * Remove margin from the last-child
   */
.uk-sortable> :last-child {
    margin-bottom: 0;
}

/* Drag
   ========================================================================== */
.uk-sortable-drag {
    position: fixed !important;
    z-index: 1050 !important;
    pointer-events: none;
}

/* Placeholder
   ========================================================================== */
.uk-sortable-placeholder {
    opacity: 0;
    pointer-events: none;
}

/* Empty modifier
   ========================================================================== */
.uk-sortable-empty {
    min-height: 50px;
}

/* Handle
   ========================================================================== */
/* Hover */
.uk-sortable-handle:hover {
    cursor: move;
}

/* ========================================================================
     Component: Countdown
   ========================================================================== */
/* Item
   ========================================================================== */
/* Number
   ========================================================================== */
/*
   * 1. Make numbers all of the same size to prevent jumping. Must be supported by the font.
   * 2. Style
   */
.uk-countdown-number {
    /* 1 */
    font-variant-numeric: tabular-nums;
    /* 2 */
    font-size: 2rem;
    line-height: 0.8;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-countdown-number {
        font-size: 4rem;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-countdown-number {
        font-size: 6rem;
    }
}

/* Separator
   ========================================================================== */
.uk-countdown-separator {
    font-size: 16px;
    line-height: 1.6;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-countdown-separator {
        font-size: 2rem;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-countdown-separator {
        font-size: 3rem;
    }
}

/* Label
   ========================================================================== */
/* ========================================================================
     Component: Grid
   ========================================================================== */
/*
   * 1. Allow cells to wrap into the next line
   * 2. Reset list
   */
.uk-grid {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
   * Grid cell
   * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
   * Reset margin for e.g. paragraphs
   */
.uk-grid>* {
    margin: 0;
}

/*
   * Remove margin from the last-child
   */
.uk-grid>*> :last-child {
    margin-bottom: 0;
}

/* Gutter
   ========================================================================== */
/*
   * Default
   */
/* Horizontal */
.uk-grid {
    margin-left: -30px;
}

.uk-grid>* {
    padding-left: 30px;
}

/* Vertical */
.uk-grid+.uk-grid,
.uk-grid>.uk-grid-margin,
*+.uk-grid-margin {
    margin-top: 30px;
}

/* Desktop and bigger */
@media (min-width: 1200px) {

    /* Horizontal */
    .uk-grid {
        margin-left: -40px;
    }

    .uk-grid>* {
        padding-left: 40px;
    }

    /* Vertical */
    .uk-grid+.uk-grid,
    .uk-grid>.uk-grid-margin,
    *+.uk-grid-margin {
        margin-top: 40px;
    }
}

/*
   * Small
   */
/* Horizontal */
.uk-grid-small,
.uk-grid-column-small {
    margin-left: -15px;
}

.uk-grid-small>*,
.uk-grid-column-small>* {
    padding-left: 15px;
}

/* Vertical */
.uk-grid+.uk-grid-small,
.uk-grid+.uk-grid-row-small,
.uk-grid-small>.uk-grid-margin,
.uk-grid-row-small>.uk-grid-margin,
*+.uk-grid-margin-small {
    margin-top: 15px;
}

/*
   * Medium
   */
/* Horizontal */
.uk-grid-medium,
.uk-grid-column-medium {
    margin-left: -30px;
}

.uk-grid-medium>*,
.uk-grid-column-medium>* {
    padding-left: 30px;
}

/* Vertical */
.uk-grid+.uk-grid-medium,
.uk-grid+.uk-grid-row-medium,
.uk-grid-medium>.uk-grid-margin,
.uk-grid-row-medium>.uk-grid-margin,
*+.uk-grid-margin-medium {
    margin-top: 30px;
}

/*
   * Large
   */
/* Horizontal */
.uk-grid-large,
.uk-grid-column-large {
    margin-left: -40px;
}

.uk-grid-large>*,
.uk-grid-column-large>* {
    padding-left: 40px;
}

/* Vertical */
.uk-grid+.uk-grid-large,
.uk-grid+.uk-grid-row-large,
.uk-grid-large>.uk-grid-margin,
.uk-grid-row-large>.uk-grid-margin,
*+.uk-grid-margin-large {
    margin-top: 40px;
}

/* Desktop and bigger */
@media (min-width: 1200px) {

    /* Horizontal */
    .uk-grid-large,
    .uk-grid-column-large {
        margin-left: -70px;
    }

    .uk-grid-large>*,
    .uk-grid-column-large>* {
        padding-left: 70px;
    }

    /* Vertical */
    .uk-grid+.uk-grid-large,
    .uk-grid+.uk-grid-row-large,
    .uk-grid-large>.uk-grid-margin,
    .uk-grid-row-large>.uk-grid-margin,
    *+.uk-grid-margin-large {
        margin-top: 70px;
    }
}

/*
   * Collapse
   */
/* Horizontal */
.uk-grid-collapse,
.uk-grid-column-collapse {
    margin-left: 0;
}

.uk-grid-collapse>*,
.uk-grid-column-collapse>* {
    padding-left: 0;
}

/* Vertical */
.uk-grid+.uk-grid-collapse,
.uk-grid+.uk-grid-row-collapse,
.uk-grid-collapse>.uk-grid-margin,
.uk-grid-row-collapse>.uk-grid-margin {
    margin-top: 0;
}

/* Divider
   ========================================================================== */
.uk-grid-divider>* {
    position: relative;
}

.uk-grid-divider> :not(.uk-first-column)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid #e5e5e5;
}

/* Vertical */
.uk-grid-divider.uk-grid-stack>.uk-grid-margin::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid #e5e5e5;
}

/*
   * Default
   */
/* Horizontal */
.uk-grid-divider {
    margin-left: -60px;
}

.uk-grid-divider>* {
    padding-left: 60px;
}

.uk-grid-divider> :not(.uk-first-column)::before {
    left: 30px;
}

/* Vertical */
.uk-grid-divider.uk-grid-stack>.uk-grid-margin {
    margin-top: 60px;
}

.uk-grid-divider.uk-grid-stack>.uk-grid-margin::before {
    top: -30px;
    left: 60px;
}

/* Desktop and bigger */
@media (min-width: 1200px) {

    /* Horizontal */
    .uk-grid-divider {
        margin-left: -80px;
    }

    .uk-grid-divider>* {
        padding-left: 80px;
    }

    .uk-grid-divider> :not(.uk-first-column)::before {
        left: 40px;
    }

    /* Vertical */
    .uk-grid-divider.uk-grid-stack>.uk-grid-margin {
        margin-top: 80px;
    }

    .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before {
        top: -40px;
        left: 80px;
    }
}

/*
   * Small
   */
/* Horizontal */
.uk-grid-divider.uk-grid-small,
.uk-grid-divider.uk-grid-column-small {
    margin-left: -30px;
}

.uk-grid-divider.uk-grid-small>*,
.uk-grid-divider.uk-grid-column-small>* {
    padding-left: 30px;
}

.uk-grid-divider.uk-grid-small> :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-small> :not(.uk-first-column)::before {
    left: 15px;
}

/* Vertical */
.uk-grid-divider.uk-grid-small.uk-grid-stack>.uk-grid-margin,
.uk-grid-divider.uk-grid-row-small.uk-grid-stack>.uk-grid-margin {
    margin-top: 30px;
}

.uk-grid-divider.uk-grid-small.uk-grid-stack>.uk-grid-margin::before {
    top: -15px;
    left: 30px;
}

.uk-grid-divider.uk-grid-row-small.uk-grid-stack>.uk-grid-margin::before {
    top: -15px;
}

.uk-grid-divider.uk-grid-column-small.uk-grid-stack>.uk-grid-margin::before {
    left: 30px;
}

/*
   * Medium
   */
/* Horizontal */
.uk-grid-divider.uk-grid-medium,
.uk-grid-divider.uk-grid-column-medium {
    margin-left: -60px;
}

.uk-grid-divider.uk-grid-medium>*,
.uk-grid-divider.uk-grid-column-medium>* {
    padding-left: 60px;
}

.uk-grid-divider.uk-grid-medium> :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-medium> :not(.uk-first-column)::before {
    left: 30px;
}

/* Vertical */
.uk-grid-divider.uk-grid-medium.uk-grid-stack>.uk-grid-margin,
.uk-grid-divider.uk-grid-row-medium.uk-grid-stack>.uk-grid-margin {
    margin-top: 60px;
}

.uk-grid-divider.uk-grid-medium.uk-grid-stack>.uk-grid-margin::before {
    top: -30px;
    left: 60px;
}

.uk-grid-divider.uk-grid-row-medium.uk-grid-stack>.uk-grid-margin::before {
    top: -30px;
}

.uk-grid-divider.uk-grid-column-medium.uk-grid-stack>.uk-grid-margin::before {
    left: 60px;
}

/*
   * Large
   */
/* Horizontal */
.uk-grid-divider.uk-grid-large,
.uk-grid-divider.uk-grid-column-large {
    margin-left: -80px;
}

.uk-grid-divider.uk-grid-large>*,
.uk-grid-divider.uk-grid-column-large>* {
    padding-left: 80px;
}

.uk-grid-divider.uk-grid-large> :not(.uk-first-column)::before,
.uk-grid-divider.uk-grid-column-large> :not(.uk-first-column)::before {
    left: 40px;
}

/* Vertical */
.uk-grid-divider.uk-grid-large.uk-grid-stack>.uk-grid-margin,
.uk-grid-divider.uk-grid-row-large.uk-grid-stack>.uk-grid-margin {
    margin-top: 80px;
}

.uk-grid-divider.uk-grid-large.uk-grid-stack>.uk-grid-margin::before {
    top: -40px;
    left: 80px;
}

.uk-grid-divider.uk-grid-row-large.uk-grid-stack>.uk-grid-margin::before {
    top: -40px;
}

.uk-grid-divider.uk-grid-column-large.uk-grid-stack>.uk-grid-margin::before {
    left: 80px;
}

/* Desktop and bigger */
@media (min-width: 1200px) {

    /* Horizontal */
    .uk-grid-divider.uk-grid-large,
    .uk-grid-divider.uk-grid-column-large {
        margin-left: -140px;
    }

    .uk-grid-divider.uk-grid-large>*,
    .uk-grid-divider.uk-grid-column-large>* {
        padding-left: 140px;
    }

    .uk-grid-divider.uk-grid-large> :not(.uk-first-column)::before,
    .uk-grid-divider.uk-grid-column-large> :not(.uk-first-column)::before {
        left: 70px;
    }

    /* Vertical */
    .uk-grid-divider.uk-grid-large.uk-grid-stack>.uk-grid-margin,
    .uk-grid-divider.uk-grid-row-large.uk-grid-stack>.uk-grid-margin {
        margin-top: 140px;
    }

    .uk-grid-divider.uk-grid-large.uk-grid-stack>.uk-grid-margin::before {
        top: -70px;
        left: 140px;
    }

    .uk-grid-divider.uk-grid-row-large.uk-grid-stack>.uk-grid-margin::before {
        top: -70px;
    }

    .uk-grid-divider.uk-grid-column-large.uk-grid-stack>.uk-grid-margin::before {
        left: 140px;
    }
}

/* Match child of a grid cell
   ========================================================================== */
/*
   * Behave like a block element
   * 1. Wrap into the next line
   * 2. Take the full width, at least 100%. Only if no class from the Width component is set.
   * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids)
   */
.uk-grid-match>*,
.uk-grid-item-match {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
}

.uk-grid-match>*> :not([class*='uk-width']),
.uk-grid-item-match> :not([class*='uk-width']) {
    /* 2 */
    box-sizing: border-box;
    width: 100%;
    /* 3 */
    flex: auto;
}

/* ========================================================================
     Component: Nav
   ========================================================================== */
/*
   * Reset
   */
.uk-nav,
.uk-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
  * 1. Center content vertically, e.g. an icon
  * 2. Imitate white space gap when using flexbox
  * 3. Reset link
   */
.uk-nav li>a {
    /* 1 */
    display: flex;
    align-items: center;
    /* 2 */
    -moz-column-gap: 0.25em;
         column-gap: 0.25em;
    /* 3*/
    text-decoration: none;
}

/*
   * Items
   * Must target `a` elements to exclude other elements (e.g. lists)
   */
.uk-nav>li>a {
    padding: 5px 0;
}

/* Sublists
   ========================================================================== */
/*
   * Level 2
   * `ul` needed for higher specificity to override padding
   */
ul.uk-nav-sub {
    padding: 5px 0 5px 15px;
}

/*
   * Level 3 and deeper
   */
.uk-nav-sub ul {
    padding-left: 15px;
}

/*
   * Items
   */
.uk-nav-sub a {
    padding: 2px 0;
}

/* Parent icon
   ========================================================================== */
.uk-nav-parent-icon {
    margin-left: auto;
    transition: transform 0.3s ease-out;
}

.uk-nav>li.uk-open>a .uk-nav-parent-icon {
    transform: rotateX(180deg);
}

/* Header
   ========================================================================== */
.uk-nav-header {
    padding: 5px 0;
}

.uk-nav-header:not(:first-child) {
    margin-top: 20px;
}

/* Divider
   ========================================================================== */
.uk-nav .uk-nav-divider {
    margin: 5px 0;
}

/* Default modifier
   ========================================================================== */
.uk-nav-default {
    font-size: 0.875rem;
    line-height: 1.5;
}

/*
   * Items
   */
.uk-nav-default>li>a {
    color: #999;
}

/* Hover */
.uk-nav-default>li>a:hover {
    color: #666;
}

/* Active */
.uk-nav-default>li.uk-active>a {
    color: #333;
}

/*
   * Subtitle
   */
.uk-nav-default .uk-nav-subtitle {
    font-size: 12px;
}

/*
   * Header
   */
.uk-nav-default .uk-nav-header {
    color: #333;
}

/*
   * Divider
   */
.uk-nav-default .uk-nav-divider {
    border-top: 1px solid #e5e5e5;
}

/*
   * Sublists
   */
.uk-nav-default .uk-nav-sub {
    font-size: 0.875rem;
    line-height: 1.5;
}

.uk-nav-default .uk-nav-sub a {
    color: #999;
}

.uk-nav-default .uk-nav-sub a:hover {
    color: #666;
}

.uk-nav-default .uk-nav-sub li.uk-active>a {
    color: #333;
}

/* Primary modifier
   ========================================================================== */
.uk-nav-primary {
    font-size: 1.5rem;
    line-height: 1.5;
}

/*
   * Items
   */
.uk-nav-primary>li>a {
    color: #999;
}

/* Hover */
.uk-nav-primary>li>a:hover {
    color: #666;
}

/* Active */
.uk-nav-primary>li.uk-active>a {
    color: #333;
}

/*
   * Subtitle
   */
.uk-nav-primary .uk-nav-subtitle {
    font-size: 1.25rem;
}

/*
   * Header
   */
.uk-nav-primary .uk-nav-header {
    color: #333;
}

/*
   * Divider
   */
.uk-nav-primary .uk-nav-divider {
    border-top: 1px solid #e5e5e5;
}

/*
   * Sublists
   */
.uk-nav-primary .uk-nav-sub {
    font-size: 1.25rem;
    line-height: 1.5;
}

.uk-nav-primary .uk-nav-sub a {
    color: #999;
}

.uk-nav-primary .uk-nav-sub a:hover {
    color: #666;
}

.uk-nav-primary .uk-nav-sub li.uk-active>a {
    color: #333;
}

/* Secondary modifier
   ========================================================================== */
.uk-nav-secondary {
    font-size: 16px;
    line-height: 1.5;
}

.uk-nav-secondary> :not(.uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider) {
    margin-top: 0;
}

/*
   * Items
   */
.uk-nav-secondary>li>a {
    color: #333;
    padding: 10px 10px;
}

/* Hover */
.uk-nav-secondary>li>a:hover {
    color: #333;
    background-color: #f8f8f8;
}

/* Active */
.uk-nav-secondary>li.uk-active>a {
    color: #333;
    background-color: #f8f8f8;
}

/*
   * Subtitle
   */
.uk-nav-secondary .uk-nav-subtitle {
    font-size: 0.875rem;
    color: #999;
}

/* Hover */
.uk-nav-secondary>li>a:hover .uk-nav-subtitle {
    color: #666;
}

/* Active */
.uk-nav-secondary>li.uk-active>a .uk-nav-subtitle {
    color: #333;
}

/*
   * Header
   */
.uk-nav-secondary .uk-nav-header {
    color: #333;
}

/*
   * Divider
   */
.uk-nav-secondary .uk-nav-divider {
    border-top: 1px solid #e5e5e5;
}

/*
   * Sublists
   */
.uk-nav-secondary .uk-nav-sub {
    font-size: 0.875rem;
    line-height: 1.5;
}

.uk-nav-secondary .uk-nav-sub a {
    color: #999;
}

.uk-nav-secondary .uk-nav-sub a:hover {
    color: #666;
}

.uk-nav-secondary .uk-nav-sub li.uk-active>a {
    color: #333;
}

/* Alignment modifier
   ========================================================================== */
/*
   * 1. Center header
   * 2. Center items
   */
/* 1 */
.uk-nav-center {
    text-align: center;
}

/* 2 */
.uk-nav-center li>a {
    justify-content: center;
}

/* Sublists */
.uk-nav-center .uk-nav-sub,
.uk-nav-center .uk-nav-sub ul {
    padding-left: 0;
}

/* Parent icon  */
.uk-nav-center .uk-nav-parent-icon {
    margin-left: 0.25em;
}

/* Style modifier
   ========================================================================== */
/*
   * Divider
   * Naming is in plural to prevent conflicts with divider sub object.
   */
.uk-nav.uk-nav-divider> :not(.uk-nav-header, .uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider) {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #e5e5e5;
}

/* ========================================================================
     Component: Navbar
   ========================================================================== */
/*
   * 1. Create position context to center navbar group
   */
.uk-navbar {
    display: flex;
    /* 1 */
    position: relative;
}

/* Container
   ========================================================================== */
.uk-navbar-container:not(.uk-navbar-transparent) {
    background: #f8f8f8;
}

/* Groups
   ========================================================================== */
/*
   * 1. Align navs and items vertically if they have a different height
   */
.uk-navbar-left,
.uk-navbar-right,
[class*='uk-navbar-center'] {
    display: flex;
    gap: 15px;
    /* 1 */
    align-items: center;
}

/*
   * Horizontal alignment
   * 1. Create position context for centered navbar with sub groups (left/right)
   * 2. Fix text wrapping if content is larger than 50% of the container.
   * 3. Needed for dropdowns because a new position context is created
   *    `z-index` must be smaller than off-canvas
   * 4. Align sub groups for centered navbar
   */
.uk-navbar-right {
    margin-left: auto;
}

.uk-navbar-center:only-child {
    margin-left: auto;
    margin-right: auto;
    /* 1 */
    position: relative;
}

.uk-navbar-center:not(:only-child) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 2 */
    width: -moz-max-content;
    width: max-content;
    box-sizing: border-box;
    /* 3 */
    z-index: 990;
}

/* 4 */
.uk-navbar-center-left,
.uk-navbar-center-right {
    position: absolute;
    top: 0;
}

.uk-navbar-center-left {
    right: calc(100% + 15px);
}

.uk-navbar-center-right {
    left: calc(100% + 15px);
}

[class*='uk-navbar-center-'] {
    width: -moz-max-content;
    width: max-content;
    box-sizing: border-box;
}

/* Nav
   ========================================================================== */
/*
   * 1. Reset list
   */
.uk-navbar-nav {
    display: flex;
    gap: 15px;
    /* 1 */
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
   * Allow items to wrap into the next line
   * Only not `absolute` positioned groups
   */
.uk-navbar-left,
.uk-navbar-right,
.uk-navbar-center:only-child {
    flex-wrap: wrap;
}

/*
   * Items
   * 1. Center content vertically and horizontally
   * 2. Imitate white space gap when using flexbox
   * 3. Dimensions
   * 4. Style
   * 5. Required for `a`
   */
.uk-navbar-nav>li>a,
.uk-navbar-item,
.uk-navbar-toggle {
    /* 1 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 2 */
    -moz-column-gap: 0.25em;
         column-gap: 0.25em;
    /* 3 */
    box-sizing: border-box;
    min-height: 80px;
    /* 4 */
    font-size: 0.875rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* 5 */
    text-decoration: none;
}

/*
   * Nav items
   */
.uk-navbar-nav>li>a {
    padding: 0 0;
    color: #999;
    text-transform: uppercase;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color;
}

/*
   * Hover
   * Apply hover style also if dropdown is opened
   */
.uk-navbar-nav>li:hover>a,
.uk-navbar-nav>li>a[aria-expanded="true"] {
    color: #666;
}

/* OnClick */
.uk-navbar-nav>li>a:active {
    color: #333;
}

/* Active */
.uk-navbar-nav>li.uk-active>a {
    color: #333;
}

/* Parent icon modifier
   ========================================================================== */
.uk-navbar-parent-icon {
    margin-left: 4px;
    transition: transform 0.3s ease-out;
}

.uk-navbar-nav>li>a[aria-expanded="true"] .uk-navbar-parent-icon {
    transform: rotateX(180deg);
}

/* Item
   ========================================================================== */
.uk-navbar-item {
    padding: 0 0;
    color: #666;
}

/*
   * Remove margin from the last-child
   */
.uk-navbar-item> :last-child {
    margin-bottom: 0;
}

/* Toggle
   ========================================================================== */
.uk-navbar-toggle {
    padding: 0 0;
    color: #999;
}

.uk-navbar-toggle:hover,
.uk-navbar-toggle[aria-expanded="true"] {
    color: #666;
    text-decoration: none;
}

/*
   * Icon
   * Adopts `uk-icon`
   */
/* Hover */
/* Subtitle
   ========================================================================== */
.uk-navbar-subtitle {
    font-size: 0.875rem;
}

/* Justify modifier
   ========================================================================== */
.uk-navbar-justify .uk-navbar-left,
.uk-navbar-justify .uk-navbar-right,
.uk-navbar-justify .uk-navbar-nav,
.uk-navbar-justify .uk-navbar-nav>li,
.uk-navbar-justify .uk-navbar-item,
.uk-navbar-justify .uk-navbar-toggle {
    flex-grow: 1;
}

/* Style modifiers
   ========================================================================== */
/* Dropdown
   ========================================================================== */
/*
   * Adopts `uk-drop`
   * 1. Set a default width
   * 2. Style
   */
.uk-navbar-dropdown {
    --uk-position-offset: 15px;
    --uk-position-shift-offset: 0;
    --uk-position-viewport-offset: 15px;
    /* 1 */
    width: 200px;
    /* 2 */
    padding: 25px;
    background: #fff;
    color: #666;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

/*
   * Remove margin from the last-child
   */
.uk-navbar-dropdown> :last-child {
    margin-bottom: 0;
}

.uk-navbar-dropdown :focus-visible {
    outline-color: #333 !important;
}

/*
   * Grid
   * Adopts `uk-grid`
   */
/* Gutter Horizontal */
.uk-navbar-dropdown .uk-drop-grid {
    margin-left: -30px;
}

.uk-navbar-dropdown .uk-drop-grid>* {
    padding-left: 30px;
}

/* Gutter Vertical */
.uk-navbar-dropdown .uk-drop-grid>.uk-grid-margin {
    margin-top: 30px;
}

/*
   * Width modifier
   */
.uk-navbar-dropdown-width-2:not(.uk-drop-stack) {
    width: 400px;
}

.uk-navbar-dropdown-width-3:not(.uk-drop-stack) {
    width: 600px;
}

.uk-navbar-dropdown-width-4:not(.uk-drop-stack) {
    width: 800px;
}

.uk-navbar-dropdown-width-5:not(.uk-drop-stack) {
    width: 1000px;
}

/*
   * Size modifier
   */
.uk-navbar-dropdown-large {
    --uk-position-shift-offset: 0;
    padding: 40px;
}

/*
   * Dropbar modifier
   * 1. Reset dropdown width to prevent to early shifting
   * 2. Reset style
   * 3. Padding
   */
.uk-navbar-dropdown-dropbar {
    /* 1 */
    width: auto;
    /* 2 */
    background: transparent;
    /* 3 */
    padding: 25px 0 25px 0;
    --uk-position-offset: 0;
    --uk-position-shift-offset: 0;
    --uk-position-viewport-offset: 15px;
    box-shadow: none;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-navbar-dropdown-dropbar {
        --uk-position-viewport-offset: 30px;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-navbar-dropdown-dropbar {
        --uk-position-viewport-offset: 40px;
    }
}

.uk-navbar-dropdown-dropbar-large {
    --uk-position-shift-offset: 0;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Dropdown Nav
   * Adopts `uk-nav`
   ========================================================================== */
.uk-navbar-dropdown-nav {
    font-size: 0.875rem;
}

/*
   * Items
   */
.uk-navbar-dropdown-nav>li>a {
    color: #999;
}

/* Hover */
.uk-navbar-dropdown-nav>li>a:hover {
    color: #666;
}

/* Active */
.uk-navbar-dropdown-nav>li.uk-active>a {
    color: #333;
}

/*
   * Subtitle
   */
.uk-navbar-dropdown-nav .uk-nav-subtitle {
    font-size: 12px;
}

/*
   * Header
   */
.uk-navbar-dropdown-nav .uk-nav-header {
    color: #333;
}

/*
   * Divider
   */
.uk-navbar-dropdown-nav .uk-nav-divider {
    border-top: 1px solid #e5e5e5;
}

/*
   * Sublists
   */
.uk-navbar-dropdown-nav .uk-nav-sub a {
    color: #999;
}

.uk-navbar-dropdown-nav .uk-nav-sub a:hover {
    color: #666;
}

.uk-navbar-dropdown-nav .uk-nav-sub li.uk-active>a {
    color: #333;
}

/* Dropbar
   ========================================================================== */
/*
   * Adopts `uk-dropnav-dropbar`
   */
/*
   * Create navbar placeholder space if dropbar is behind navbar
   */
.uk-navbar-dropbar-behind::before {
    content: "";
    display: block;
    height: 80px;
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {

    .uk-navbar-left,
    .uk-navbar-right,
    [class*='uk-navbar-center'] {
        gap: 30px;
    }

    .uk-navbar-center-left {
        right: calc(100% + 30px);
    }

    .uk-navbar-center-right {
        left: calc(100% + 30px);
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-navbar-nav {
        gap: 30px;
    }
}

/* ========================================================================
     Component: Subnav
   ========================================================================== */
/*
   * 1. Allow items to wrap into the next line
   * 2. Center items vertically if they have a different height
   * 3. Gutter
   * 4. Reset list
   */
.uk-subnav {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    justify-content: space-evenly;
    align-items: center;
    /* 3 */
    margin-left: -20px;
    /* 4 */
    padding: 0;
    list-style: none;
}

/*
   * 1. Space is allocated solely based on content dimensions: 0 0 auto
   * 2. Gutter
   * 3. Create position context for dropdowns
   */
.uk-subnav>* {
    /* 1 */
    flex: none;
    /* 2 */
    padding-left: 20px;

    /* 3 */
    position: relative;
}

/* Items
   ========================================================================== */
/*
   * Items must target `a` elements to exclude other elements (e.g. dropdowns)
   * Using `:first-child` instead of `a` to support `span` elements for text
   * 1. Center content vertically, e.g. an icon
   * 2. Imitate white space gap when using flexbox
   * 3. Style
   */
.uk-subnav>*> :first-child {
    /* 1 */
    display: flex;
    align-items: baseline;
    /* 2 */
    -moz-column-gap: 0.25em;
         column-gap: 0.25em;
    /* 3 */
    color: #C0C3C5;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color;
}

/* Hover */
.uk-subnav>*>a:hover {
    color: #666;
    text-decoration: none;
}

/* Active */
.uk-subnav>.uk-active>a {
    color: #333;
}

/* Divider modifier
   ========================================================================== */
/*
   * Set gutter
   */
.uk-subnav-divider {
    margin-left: -41px;
}

/*
   * Align items and divider vertically
   */
.uk-subnav-divider>* {
    display: flex;
    align-items: center;
}

/*
   * Divider
   * 1. `nth-child` makes it also work without JS if it's only one row
   */
.uk-subnav-divider> ::before {
    content: "";
    height: 1.5em;
    margin-left: 0px;
    margin-right: 20px;
    border-left: 1px solid transparent;
}

/* 1 */
.uk-subnav-divider> :nth-child(n+2):not(.uk-first-column)::before {
    border-left-color: #e5e5e5;
}

/* Pill modifier
   ========================================================================== */
.uk-subnav-pill>*> :first-child {
    padding: 5px 10px;
    background: transparent;
    color: #999;
}

/* Hover */
.uk-subnav-pill>*>a:hover {
    background-color: #f8f8f8;
    color: #666;
}

/* OnClick */
.uk-subnav-pill>*>a:active {
    background-color: #f8f8f8;
    color: #666;
}

/* Active */
.uk-subnav-pill>.uk-active>a {
    background-color: #1e87f0;
    color: #fff;
}

/* Disabled
   * The same for all style modifiers
   ========================================================================== */
.uk-subnav>.uk-disabled>a {
    color: #999;
}

/* ========================================================================
     Component: Breadcrumb
   ========================================================================== */
/*
   * Reset list
   */
.uk-breadcrumb {
    padding: 0;
    list-style: none;
}

/*
   * 1. Doesn't generate any box and replaced by child boxes
   */
.uk-breadcrumb>* {
    display: contents;
}

/* Items
   ========================================================================== */
.uk-breadcrumb>*>* {
    font-size: 0.875rem;
    color: #999;
}

/* Hover */
.uk-breadcrumb>*> :hover {
    color: #666;
    text-decoration: none;
}

/* Disabled */
/* Active */
.uk-breadcrumb> :last-child>span,
.uk-breadcrumb> :last-child>a:not([href]) {
    color: #666;
}

/*
   * Divider
   * `nth-child` makes it also work without JS if it's only one row
   * 1. Remove space between inline block elements.
   * 2. Style
   */
.uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before {
    content: "/";
    display: inline-block;
    /* 1 */
    margin: 0 20px 0 calc(20px - 4px);
    /* 2 */
    font-size: 0.875rem;
    color: #999;
}

/* ========================================================================
     Component: Pagination
   ========================================================================== */
/*
   * 1. Allow items to wrap into the next line
   * 2. Gutter
   * 3. Reset list
   */
.uk-pagination {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin-left: 0;
    /* 3 */
    padding: 0;
    list-style: none;
}

/*
   * 1. Space is allocated solely based on content dimensions: 0 0 auto
   * 2. Gutter
   * 3. Create position context for dropdowns
   */
.uk-pagination>* {
    /* 1 */
    flex: none;
    /* 2 */
    padding-left: 0;
    /* 3 */
    position: relative;
}

/* Items
   ========================================================================== */
/*
   * 1. Prevent gap if child element is `inline-block`, e.g. an icon
   * 2. Style
   */
.uk-pagination>*>* {
    /* 1 */
    display: block;
    /* 2 */
    padding: 5px 10px;
    color: #999;
    transition: color 0.1s ease-in-out;
}

/* Hover */
.uk-pagination>*> :hover {
    color: #666;
    text-decoration: none;
}

/* Active */
.uk-pagination>.uk-active>* {
    color: #666;
}

/* Disabled */
.uk-pagination>.uk-disabled>* {
    color: #999;
}

/* ========================================================================
     Component: Tab
   ========================================================================== */
/*
   * 1. Allow items to wrap into the next line
   * 2. Gutter
   * 3. Reset list
   */
.uk-tab {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin-left: -20px;
    /* 3 */
    padding: 0;
    list-style: none;
    position: relative;
}

.uk-tab::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 0;
    border-bottom: 1px solid #e5e5e5;
}

/*
   * 1. Space is allocated solely based on content dimensions: 0 0 auto
   * 2. Gutter
   * 3. Create position context for dropdowns
   */
.uk-tab>* {
    /* 1 */
    flex: none;
    /* 2 */
    padding-left: 20px;
    /* 3 */
    position: relative;
}

/* Items
   ========================================================================== */
/*
   * Items must target `a` elements to exclude other elements (e.g. dropdowns)
   * 1. Center content vertically, e.g. an icon
   * 2. Imitate white space gap when using flexbox
   * 3. Center content if a width is set
   * 4. Style
   */
.uk-tab>*>a {
    /* 1 */
    display: flex;
    align-items: center;
    /* 2 */
    -moz-column-gap: 0.25em;
         column-gap: 0.25em;
    /* 3 */
    justify-content: center;
    /* 4 */
    padding: 5px 10px;
    color: #999;
    border-bottom: 1px solid transparent;
    font-size: 0.875rem;
    text-transform: uppercase;
    transition: color 0.1s ease-in-out;
}

/* Hover */
.uk-tab>*>a:hover {
    color: #666;
    text-decoration: none;
}

/* Active */
.uk-tab>.uk-active>a {
    color: #333;
    border-color: #1e87f0;
}

/* Disabled */
.uk-tab>.uk-disabled>a {
    color: #999;
}

/* Position modifier
   ========================================================================== */
/*
   * Bottom
   */
.uk-tab-bottom::before {
    top: 0;
    bottom: auto;
}

.uk-tab-bottom>*>a {
    border-top: 1px solid transparent;
    border-bottom: none;
}

/*
   * Left + Right
   * 1. Reset Gutter
   */
.uk-tab-left,
.uk-tab-right {
    flex-direction: column;
    /* 1 */
    margin-left: 0;
}

/* 1 */
.uk-tab-left>*,
.uk-tab-right>* {
    padding-left: 0;
}

.uk-tab-left::before {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    border-left: 1px solid #e5e5e5;
    border-bottom: none;
}

.uk-tab-right::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    border-left: 1px solid #e5e5e5;
    border-bottom: none;
}

.uk-tab-left>*>a {
    justify-content: left;
    border-right: 1px solid transparent;
    border-bottom: none;
}

.uk-tab-right>*>a {
    justify-content: left;
    border-left: 1px solid transparent;
    border-bottom: none;
}

.uk-tab .uk-dropdown {
    margin-left: 30px;
}

/* ========================================================================
     Component: Slidenav
   ========================================================================== */
/*
   * Adopts `uk-icon`
   */
.uk-slidenav {
    padding: 5px 10px;
    color: rgba(102, 102, 102, 0.5);
    transition: color 0.1s ease-in-out;
}

/* Hover */
.uk-slidenav:hover {
    color: rgba(102, 102, 102, 0.9);
}

/* OnClick */
.uk-slidenav:active {
    color: rgba(102, 102, 102, 0.5);
}

/* Icon modifier
   ========================================================================== */
/*
   * Previous
   */
/*
   * Next
   */
/* Size modifier
   ========================================================================== */
.uk-slidenav-large {
    padding: 10px 10px;
}

/* Container
   ========================================================================== */
.uk-slidenav-container {
    display: flex;
}

/* ========================================================================
     Component: Dotnav
   ========================================================================== */
/*
   * 1. Allow items to wrap into the next line
   * 2. Reset list
   * 3. Gutter
   */
.uk-dotnav {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 3 */
    margin-left: -12px;
}

/*
   * 1. Space is allocated solely based on content dimensions: 0 0 auto
   * 2. Gutter
   */
.uk-dotnav>* {
    /* 1 */
    flex: none;
    /* 2 */
    padding-left: 12px;
}

/* Items
   ========================================================================== */
/*
   * Items
   * 1. Hide text if present
   */
.uk-dotnav>*>* {
    display: block;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    /* 1 */
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid rgba(102, 102, 102, 0.4);
    transition: 0.2s ease-in-out;
    transition-property: background-color, border-color;
}

/* Hover */
.uk-dotnav>*> :hover {
    background-color: rgba(102, 102, 102, 0.6);
    border-color: transparent;
}

/* OnClick */
.uk-dotnav>*> :active {
    background-color: rgba(102, 102, 102, 0.2);
    border-color: transparent;
}

/* Active */
.uk-dotnav>.uk-active>* {
    background-color: rgba(102, 102, 102, 0.6);
    border-color: transparent;
}

/* Modifier: 'uk-dotnav-vertical'
   ========================================================================== */
/*
   * 1. Change direction
   * 2. Gutter
   */
.uk-dotnav-vertical {
    /* 1 */
    flex-direction: column;
    /* 2 */
    margin-left: 0;
    margin-top: -12px;
}

/* 2 */
.uk-dotnav-vertical>* {
    padding-left: 0;
    padding-top: 12px;
}

/* ========================================================================
     Component: Thumbnav
   ========================================================================== */
/*
   * 1. Allow items to wrap into the next line
   * 2. Reset list
   * 3. Gutter
   */
.uk-thumbnav {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 3 */
    margin-left: -15px;
}

/*
   * Space is allocated based on content dimensions, but shrinks: 0 1 auto
   * 1. Gutter
   */
.uk-thumbnav>* {
    /* 1 */
    padding-left: 15px;
}

/* Items
   ========================================================================== */
/*
   * Items
   */
.uk-thumbnav>*>* {
    display: inline-block;
    position: relative;
}

.uk-thumbnav>*>*::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4));
    transition: opacity 0.1s ease-in-out;
}

/* Hover */
.uk-thumbnav>*> :hover::after {
    opacity: 0;
}

/* Active */
.uk-thumbnav>.uk-active>*::after {
    opacity: 0;
}

/* Modifier: 'uk-thumbnav-vertical'
   ========================================================================== */
/*
   * 1. Change direction
   * 2. Gutter
   */
.uk-thumbnav-vertical {
    /* 1 */
    flex-direction: column;
    /* 2 */
    margin-left: 0;
    margin-top: -15px;
}

/* 2 */
.uk-thumbnav-vertical>* {
    padding-left: 0;
    padding-top: 15px;
}

/* ========================================================================
     Component: Iconnav
   ========================================================================== */
/*
   * 1. Allow items to wrap into the next line
   * 2. Reset list
   * 3. Gutter
   */
.uk-iconnav {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 3 */
    margin-left: -10px;
}

/*
   * Space is allocated based on content dimensions, but shrinks: 0 1 auto
   * 1. Gutter
   */
.uk-iconnav>* {
    /* 1 */
    padding-left: 10px;
}

/* Items
   ========================================================================== */
/*
   * Items must target `a` elements to exclude other elements (e.g. dropdowns)
   * 1. Center content vertically if there is still some text
   * 2. Imitate white space gap when using flexbox
   * 3. Force text not to affect item height
   * 4. Style
   * 5. Required for `a` if there is still some text
   */
.uk-iconnav>*>a {
    /* 1 */
    display: flex;
    align-items: center;
    /* 2 */
    -moz-column-gap: 0.25em;
         column-gap: 0.25em;
    /* 3 */
    line-height: 0;
    /* 4 */
    color: #999;
    /* 5 */
    text-decoration: none;
    font-size: 0.875rem;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color;
}

/* Hover */
.uk-iconnav>*>a:hover {
    color: #666;
}

/* Active */
.uk-iconnav>.uk-active>a {
    color: #666;
}

/* Modifier: 'uk-iconnav-vertical'
   ========================================================================== */
/*
   * 1. Change direction
   * 2. Gutter
   */
.uk-iconnav-vertical {
    /* 1 */
    flex-direction: column;
    /* 2 */
    margin-left: 0;
    margin-top: -10px;
}

/* 2 */
.uk-iconnav-vertical>* {
    padding-left: 0;
    padding-top: 10px;
}

/* ========================================================================
     Component: Dropdown
   ========================================================================== */
/*
   * Adopts `uk-drop`
   * 1. Reset drop and let text expand the width instead of wrapping
   * 2. Set a default width
   * 3. Style
   */
.uk-dropdown {
    --uk-position-offset: 10px;
    --uk-position-viewport-offset: 15px;
    /* 1 */
    width: auto;
    /* 2 */
    min-width: 200px;
    /* 3 */
    padding: 25px;
    background: #262b31;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.65);

}

/*
   * Remove margin from the last-child
   */
.uk-dropdown> :last-child {
    margin-bottom: 0;
}

.uk-dropdown :focus-visible {
    outline-color: #333 !important;
}

/* Size modifier
   ========================================================================== */
.uk-dropdown-large {
    padding: 40px;
}

/* Dropbar modifier
   ========================================================================== */
/*
   * 1. Reset dropdown width to prevent to early shifting
   * 2. Reset style
   * 3. Padding
   */
.uk-dropdown-dropbar {
    /* 1 */
    width: auto;
    /* 2 */
    background: transparent;
    /* 3 */
    padding: 5px 0 25px 0;
    --uk-position-viewport-offset: 15px;
    box-shadow: none;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-dropdown-dropbar {
        --uk-position-viewport-offset: 30px;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-dropdown-dropbar {
        --uk-position-viewport-offset: 40px;
    }
}

.uk-dropdown-dropbar-large {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Nav
   * Adopts `uk-nav`
   ========================================================================== */

/*
   * Items
   */
.uk-dropdown-nav>li>a {
    color: #999;
}

/* Hover + Active */
.uk-dropdown-nav>li>a:hover,
.uk-dropdown-nav>li.uk-active>a {
    color: #666;
}

/*
   * Subtitle
   */
.uk-dropdown-nav .uk-nav-subtitle {
    font-size: 12px;
}

/*
   * Header
   */
.uk-dropdown-nav .uk-nav-header {
    color: #f2f2f2;
}

/*
   * Divider
   */
.uk-dropdown-nav .uk-nav-divider {
    border-top: 1px solid #e5e5e5;
}

/*
   * Sublists
   */
.uk-dropdown-nav .uk-nav-sub a {
    color: #999;
}

.uk-dropdown-nav .uk-nav-sub a:hover,
.uk-dropdown-nav .uk-nav-sub li.uk-active>a {
    color: #666;
}

/* ========================================================================
     Component: Lightbox
   ========================================================================== */
/*
   * 1. Hide by default
   * 2. Set position
   * 3. Allow scrolling for the modal dialog
   * 4. Horizontal padding
   * 5. Mask the background page
   * 6. Fade-in transition
   * 7. Prevent cancellation of pointer events while dragging
   */
.uk-lightbox {
    /* 1 */
    display: none;
    /* 2 */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1010;
    /* 5 */
    background: #000;
    /* 6 */
    opacity: 0;
    transition: opacity 0.15s linear;
    /* 7 */
    touch-action: pinch-zoom;
}

/*
   * Open
   * 1. Center child
   * 2. Fade-in
   */
.uk-lightbox.uk-open {
    display: block;
    /* 2 */
    opacity: 1;
}

/*
   * Focus
   */
.uk-lightbox :focus-visible {
    outline-color: rgba(255, 255, 255, 0.7);
}

/* Page
   ========================================================================== */
/*
   * Prevent scrollbars
   */
.uk-lightbox-page {
    overflow: hidden;
}

/* Item
   ========================================================================== */
/*
   * 1. Center child within the viewport
   * 2. Not visible by default
   * 3. Color needed for spinner icon
   * 4. Optimize animation
   * 5. Responsiveness
   *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
   */
.uk-lightbox-items>* {
    /* 1 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* 2 */
    display: none;
    justify-content: center;
    align-items: center;
    /* 3 */
    color: rgba(255, 255, 255, 0.7);
    /* 4 */
    will-change: transform, opacity;
}

/* 5 */
.uk-lightbox-items>*>* {
    max-width: 100vw;
    max-height: 100vh;
}

.uk-lightbox-items>*> :not(iframe) {
    width: auto;
    height: auto;
}

.uk-lightbox-items>.uk-active {
    display: flex;
}

/* Toolbar
   ========================================================================== */
.uk-lightbox-toolbar {
    padding: 10px 10px;
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

.uk-lightbox-toolbar>* {
    color: rgba(255, 255, 255, 0.7);
}

/* Toolbar Icon (Close)
   ========================================================================== */
.uk-lightbox-toolbar-icon {
    padding: 5px;
    color: rgba(255, 255, 255, 0.7);
}

/*
   * Hover
   */
.uk-lightbox-toolbar-icon:hover {
    color: #fff;
}

/* Button (Slidenav)
   ========================================================================== */
/*
   * 1. Center icon vertically and horizontally
   */
.uk-lightbox-button {
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.7);
    /* 1 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Hover */
.uk-lightbox-button:hover {
    color: #fff;
}

/* OnClick */
/* Caption
   ========================================================================== */
.uk-lightbox-caption:empty {
    display: none;
}

/* Iframe
   ========================================================================== */
.uk-lightbox-iframe {
    width: 80%;
    height: 80%;
}

/* ========================================================================
     Component: Animation
   ========================================================================== */
[class*='uk-animation-'] {
    animation: 0.5s ease-out both;
}

/* Animations
   ========================================================================== */
/*
   * Fade
   */
.uk-animation-fade {
    animation-name: uk-fade;
    animation-duration: 0.8s;
    animation-timing-function: linear;
}

/*
   * Scale
   */
.uk-animation-scale-up {
    animation-name: uk-fade, uk-scale-up;
}

.uk-animation-scale-down {
    animation-name: uk-fade, uk-scale-down;
}

/*
   * Slide
   */
.uk-animation-slide-top {
    animation-name: uk-fade, uk-slide-top;
}

.uk-animation-slide-bottom {
    animation-name: uk-fade, uk-slide-bottom;
}

.uk-animation-slide-left {
    animation-name: uk-fade, uk-slide-left;
}

.uk-animation-slide-right {
    animation-name: uk-fade, uk-slide-right;
}

/*
   * Slide Small
   */
.uk-animation-slide-top-small {
    animation-name: uk-fade, uk-slide-top-small;
}

.uk-animation-slide-bottom-small {
    animation-name: uk-fade, uk-slide-bottom-small;
}

.uk-animation-slide-left-small {
    animation-name: uk-fade, uk-slide-left-small;
}

.uk-animation-slide-right-small {
    animation-name: uk-fade, uk-slide-right-small;
}

/*
   * Slide Medium
   */
.uk-animation-slide-top-medium {
    animation-name: uk-fade, uk-slide-top-medium;
}

.uk-animation-slide-bottom-medium {
    animation-name: uk-fade, uk-slide-bottom-medium;
}

.uk-animation-slide-left-medium {
    animation-name: uk-fade, uk-slide-left-medium;
}

.uk-animation-slide-right-medium {
    animation-name: uk-fade, uk-slide-right-medium;
}

/*
   * Kenburns
   */
.uk-animation-kenburns {
    animation-name: uk-kenburns;
    animation-duration: 15s;
}

/*
   * Shake
   */
.uk-animation-shake {
    animation-name: uk-shake;
}

/*
   * SVG Stroke
   * The `--uk-animation-stroke` custom property contains the longest path length.
   * Set it manually or use `uk-svg="stroke-animation: true"` to set it automatically.
   * All strokes are animated by the same pace and doesn't end simultaneously.
   * To end simultaneously, `pathLength="1"` could be used, but it's not working in Safari yet.
   */
.uk-animation-stroke {
    animation-name: uk-stroke;
    animation-duration: 2s;
    stroke-dasharray: var(--uk-animation-stroke);
}

/* Direction modifier
   ========================================================================== */
.uk-animation-reverse {
    animation-direction: reverse;
    animation-timing-function: ease-in;
}

/* Duration modifier
   ========================================================================== */
.uk-animation-fast {
    animation-duration: 0.1s;
}

/* Toggle animation based on the State of the Parent Element
   ========================================================================== */
.uk-animation-toggle:not(:hover):not(:focus) [class*='uk-animation-'] {
    animation-name: none;
}

/* Keyframes used by animation classes
   ========================================================================== */
/*
   * Fade
   */
@keyframes uk-fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*
   * Scale
   */
@keyframes uk-scale-up {
    0% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes uk-scale-down {
    0% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/*
   * Slide
   */
@keyframes uk-slide-top {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes uk-slide-bottom {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes uk-slide-left {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes uk-slide-right {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

/*
   * Slide Small
   */
@keyframes uk-slide-top-small {
    0% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes uk-slide-bottom-small {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes uk-slide-left-small {
    0% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes uk-slide-right-small {
    0% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

/*
   * Slide Medium
   */
@keyframes uk-slide-top-medium {
    0% {
        transform: translateY(-50px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes uk-slide-bottom-medium {
    0% {
        transform: translateY(50px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes uk-slide-left-medium {
    0% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes uk-slide-right-medium {
    0% {
        transform: translateX(50px);
    }

    100% {
        transform: translateX(0);
    }
}

/*
   * Kenburns
   */
@keyframes uk-kenburns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}

/*
   * Shake
   */
@keyframes uk-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-9px);
    }

    20% {
        transform: translateX(8px);
    }

    30% {
        transform: translateX(-7px);
    }

    40% {
        transform: translateX(6px);
    }

    50% {
        transform: translateX(-5px);
    }

    60% {
        transform: translateX(4px);
    }

    70% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(2px);
    }

    90% {
        transform: translateX(-1px);
    }
}

/*
   * Stroke
   */
@keyframes uk-stroke {
    0% {
        stroke-dashoffset: var(--uk-animation-stroke);
    }

    100% {
        stroke-dashoffset: 0;
    }
}

/* ========================================================================
     Component: Width
   ========================================================================== */
/* Equal child widths
   ========================================================================== */
[class*='uk-child-width']>* {
    box-sizing: border-box;
    width: 100%;
}

.uk-child-width-1-2>* {
    width: 50%;
}

.uk-child-width-1-3>* {
    width: calc(100% * 1 / 3.001);
}

.uk-child-width-1-4>* {
    width: 25%;
}

.uk-child-width-1-5>* {
    width: 20%;
}

.uk-child-width-1-6>* {
    width: calc(100% * 1 / 6.001);
}

.uk-child-width-auto>* {
    width: auto;
}

/*
   * 1. Reset the `min-width`, which is set to auto by default, because
   *    flex items won't shrink below their minimum intrinsic content size.
   *    Using `1px` instead of `0`, so items still wrap into the next line,
   *    if they have zero width and padding and the predecessor is 100% wide.
   */
.uk-child-width-expand> :not([class*='uk-width']) {
    flex: 1;
    /* 1 */
    min-width: 1px;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-child-width-1-1\@s>* {
        width: 100%;
    }

    .uk-child-width-1-2\@s>* {
        width: 50%;
    }

    .uk-child-width-1-3\@s>* {
        width: calc(100% * 1 / 3.001);
    }

    .uk-child-width-1-4\@s>* {
        width: 25%;
    }

    .uk-child-width-1-5\@s>* {
        width: 20%;
    }

    .uk-child-width-1-6\@s>* {
        width: calc(100% * 1 / 6.001);
    }

    .uk-child-width-auto\@s>* {
        width: auto;
    }

    .uk-child-width-expand\@s> :not([class*='uk-width']) {
        flex: 1;
        min-width: 1px;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-child-width-1-1\@m>* {
        width: 100%;
    }

    .uk-child-width-1-2\@m>* {
        width: 50%;
    }

    .uk-child-width-1-3\@m>* {
        width: calc(100% * 1 / 3.001);
    }

    .uk-child-width-1-4\@m>* {
        width: 25%;
    }

    .uk-child-width-1-5\@m>* {
        width: 20%;
    }

    .uk-child-width-1-6\@m>* {
        width: calc(100% * 1 / 6.001);
    }

    .uk-child-width-auto\@m>* {
        width: auto;
    }

    .uk-child-width-expand\@m> :not([class*='uk-width']) {
        flex: 1;
        min-width: 1px;
    }
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-child-width-1-1\@l>* {
        width: 100%;
    }

    .uk-child-width-1-2\@l>* {
        width: 50%;
    }

    .uk-child-width-1-3\@l>* {
        width: calc(100% * 1 / 3.001);
    }

    .uk-child-width-1-4\@l>* {
        width: 25%;
    }

    .uk-child-width-1-5\@l>* {
        width: 20%;
    }

    .uk-child-width-1-6\@l>* {
        width: calc(100% * 1 / 6.001);
    }

    .uk-child-width-auto\@l>* {
        width: auto;
    }

    .uk-child-width-expand\@l> :not([class*='uk-width']) {
        flex: 1;
        min-width: 1px;
    }
}

/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-child-width-1-1\@xl>* {
        width: 100%;
    }

    .uk-child-width-1-2\@xl>* {
        width: 50%;
    }

    .uk-child-width-1-3\@xl>* {
        width: calc(100% * 1 / 3.001);
    }

    .uk-child-width-1-4\@xl>* {
        width: 25%;
    }

    .uk-child-width-1-5\@xl>* {
        width: 20%;
    }

    .uk-child-width-1-6\@xl>* {
        width: calc(100% * 1 / 6.001);
    }

    .uk-child-width-auto\@xl>* {
        width: auto;
    }

    .uk-child-width-expand\@xl> :not([class*='uk-width']) {
        flex: 1;
        min-width: 1px;
    }
}

/* Single Widths
   ========================================================================== */
/*
   * 1. `max-width` is needed for the pixel-based classes
   */
[class*='uk-width'] {
    box-sizing: border-box;
    width: 100%;
    /* 1 */
    max-width: 100%;
}

/* Halves */
.uk-width-1-2 {
    width: 50%;
}

/* Thirds */
.uk-width-1-3 {
    width: calc(100% * 1 / 3.001);
}

.uk-width-2-3 {
    width: calc(100% * 2 / 3.001);
}

/* Quarters */
.uk-width-1-4 {
    width: 25%;
}

.uk-width-3-4 {
    width: 75%;
}

/* Fifths */
.uk-width-1-5 {
    width: 20%;
}

.uk-width-2-5 {
    width: 40%;
}

.uk-width-3-5 {
    width: 60%;
}

.uk-width-4-5 {
    width: 80%;
}

/* Sixths */
.uk-width-1-6 {
    width: calc(100% * 1 / 6.001);
}

.uk-width-5-6 {
    width: calc(100% * 5 / 6.001);
}

/* Pixel */
.uk-width-small {
    width: 150px;
}

.uk-width-medium {
    width: 300px;
}

.uk-width-large {
    width: 450px;
}

.uk-width-xlarge {
    width: 600px;
}

.uk-width-2xlarge {
    width: 750px;
}

/* Auto */
.uk-width-auto {
    width: auto;
}

/* Expand */
.uk-width-expand {
    flex: 1;
    min-width: 1px;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {

    /* Whole */
    .uk-width-1-1\@s {
        width: 100%;
    }

    /* Halves */
    .uk-width-1-2\@s {
        width: 50%;
    }

    /* Thirds */
    .uk-width-1-3\@s {
        width: calc(100% * 1 / 3.001);
    }

    .uk-width-2-3\@s {
        width: calc(100% * 2 / 3.001);
    }

    /* Quarters */
    .uk-width-1-4\@s {
        width: 25%;
    }

    .uk-width-3-4\@s {
        width: 75%;
    }

    /* Fifths */
    .uk-width-1-5\@s {
        width: 20%;
    }

    .uk-width-2-5\@s {
        width: 40%;
    }

    .uk-width-3-5\@s {
        width: 60%;
    }

    .uk-width-4-5\@s {
        width: 80%;
    }

    /* Sixths */
    .uk-width-1-6\@s {
        width: calc(100% * 1 / 6.001);
    }

    .uk-width-5-6\@s {
        width: calc(100% * 5 / 6.001);
    }

    /* Pixel */
    .uk-width-small\@s {
        width: 150px;
    }

    .uk-width-medium\@s {
        width: 300px;
    }

    .uk-width-large\@s {
        width: 450px;
    }

    .uk-width-xlarge\@s {
        width: 600px;
    }

    .uk-width-2xlarge\@s {
        width: 750px;
    }

    /* Auto */
    .uk-width-auto\@s {
        width: auto;
    }

    /* Expand */
    .uk-width-expand\@s {
        flex: 1;
        min-width: 1px;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {

    /* Whole */
    .uk-width-1-1\@m {
        width: 100%;
    }

    /* Halves */
    .uk-width-1-2\@m {
        width: 50%;
    }

    /* Thirds */
    .uk-width-1-3\@m {
        width: calc(100% * 1 / 3.001);
    }

    .uk-width-2-3\@m {
        width: calc(100% * 2 / 3.001);
    }

    /* Quarters */
    .uk-width-1-4\@m {
        width: 25%;
    }

    .uk-width-3-4\@m {
        width: 75%;
    }

    /* Fifths */
    .uk-width-1-5\@m {
        width: 20%;
    }

    .uk-width-2-5\@m {
        width: 40%;
    }

    .uk-width-3-5\@m {
        width: 60%;
    }

    .uk-width-4-5\@m {
        width: 80%;
    }

    /* Sixths */
    .uk-width-1-6\@m {
        width: calc(100% * 1 / 6.001);
    }

    .uk-width-5-6\@m {
        width: calc(100% * 5 / 6.001);
    }

    /* Pixel */
    .uk-width-small\@m {
        width: 150px;
    }

    .uk-width-medium\@m {
        width: 300px;
    }

    .uk-width-large\@m {
        width: 450px;
    }

    .uk-width-xlarge\@m {
        width: 600px;
    }

    .uk-width-2xlarge\@m {
        width: 750px;
    }

    /* Auto */
    .uk-width-auto\@m {
        width: auto;
    }

    /* Expand */
    .uk-width-expand\@m {
        flex: 1;
        min-width: 1px;
    }
}

/* Desktop and bigger */
@media (min-width: 1200px) {

    /* Whole */
    .uk-width-1-1\@l {
        width: 100%;
    }

    /* Halves */
    .uk-width-1-2\@l {
        width: 50%;
    }

    /* Thirds */
    .uk-width-1-3\@l {
        width: calc(100% * 1 / 3.001);
    }

    .uk-width-2-3\@l {
        width: calc(100% * 2 / 3.001);
    }

    /* Quarters */
    .uk-width-1-4\@l {
        width: 25%;
    }

    .uk-width-3-4\@l {
        width: 75%;
    }

    /* Fifths */
    .uk-width-1-5\@l {
        width: 20%;
    }

    .uk-width-2-5\@l {
        width: 40%;
    }

    .uk-width-3-5\@l {
        width: 60%;
    }

    .uk-width-4-5\@l {
        width: 80%;
    }

    /* Sixths */
    .uk-width-1-6\@l {
        width: calc(100% * 1 / 6.001);
    }

    .uk-width-5-6\@l {
        width: calc(100% * 5 / 6.001);
    }

    /* Pixel */
    .uk-width-small\@l {
        width: 150px;
    }

    .uk-width-medium\@l {
        width: 300px;
    }

    .uk-width-large\@l {
        width: 450px;
    }

    .uk-width-xlarge\@l {
        width: 600px;
    }

    .uk-width-2xlarge\@l {
        width: 750px;
    }

    /* Auto */
    .uk-width-auto\@l {
        width: auto;
    }

    /* Expand */
    .uk-width-expand\@l {
        flex: 1;
        min-width: 1px;
    }
}

/* Large screen and bigger */
@media (min-width: 1600px) {

    /* Whole */
    .uk-width-1-1\@xl {
        width: 100%;
    }

    /* Halves */
    .uk-width-1-2\@xl {
        width: 50%;
    }

    /* Thirds */
    .uk-width-1-3\@xl {
        width: calc(100% * 1 / 3.001);
    }

    .uk-width-2-3\@xl {
        width: calc(100% * 2 / 3.001);
    }

    /* Quarters */
    .uk-width-1-4\@xl {
        width: 25%;
    }

    .uk-width-3-4\@xl {
        width: 75%;
    }

    /* Fifths */
    .uk-width-1-5\@xl {
        width: 20%;
    }

    .uk-width-2-5\@xl {
        width: 40%;
    }

    .uk-width-3-5\@xl {
        width: 60%;
    }

    .uk-width-4-5\@xl {
        width: 80%;
    }

    /* Sixths */
    .uk-width-1-6\@xl {
        width: calc(100% * 1 / 6.001);
    }

    .uk-width-5-6\@xl {
        width: calc(100% * 5 / 6.001);
    }

    /* Pixel */
    .uk-width-small\@xl {
        width: 150px;
    }

    .uk-width-medium\@xl {
        width: 300px;
    }

    .uk-width-large\@xl {
        width: 450px;
    }

    .uk-width-xlarge\@xl {
        width: 600px;
    }

    .uk-width-2xlarge\@xl {
        width: 750px;
    }

    /* Auto */
    .uk-width-auto\@xl {
        width: auto;
    }

    /* Expand */
    .uk-width-expand\@xl {
        flex: 1;
        min-width: 1px;
    }
}

/* Intrinsic Widths
   ========================================================================== */
.uk-width-max-content {
    width: -moz-max-content;
    width: max-content;
}

.uk-width-min-content {
    width: -moz-min-content;
    width: min-content;
}

/* ========================================================================
     Component: Height
   ========================================================================== */
[class*='uk-height'] {
    box-sizing: border-box;
}

/*
   * Only works if parent element has a height set
   */
.uk-height-1-1 {
    height: 100%;
}

/*
   * Useful to create image teasers
   */
.uk-height-viewport {
    min-height: 100vh;
}

.uk-height-viewport-2 {
    min-height: 200vh;
}

.uk-height-viewport-3 {
    min-height: 300vh;
}

.uk-height-viewport-4 {
    min-height: 400vh;
}

/*
   * Pixel
   * Useful for `overflow: auto`
   */
.uk-height-small {
    height: 150px;
}

.uk-height-medium {
    height: 300px;
}

.uk-height-large {
    height: 450px;
}

.uk-height-max-small {
    max-height: 150px;
}

.uk-height-max-medium {
    max-height: 300px;
}

.uk-height-max-large {
    max-height: 450px;
}

/* ========================================================================
     Component: Text
   ========================================================================== */
/* Style modifiers
   ========================================================================== */
.uk-text-lead {
    font-size: 1.5rem;
    line-height: 1.5;
    color: #333;
}

.uk-text-meta {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #999;
}

.uk-text-meta>a {
    color: #999;
}

.uk-text-meta>a:hover {
    color: #666;
    text-decoration: none;
}

/* Size modifiers
   ========================================================================== */
.uk-text-small {
    font-size: 0.875rem;
    line-height: 1.5;
}

.uk-text-large {
    font-size: 1.5rem;
    line-height: 1.5;
}

.uk-text-default {
    font-size: 16px;
    line-height: 1.5;
}

/* Weight modifier
   ========================================================================== */
.uk-text-light {
    font-weight: 300;
}

.uk-text-normal {
    font-weight: 400;
}

.uk-text-bold {
    font-weight: 700;
}

.uk-text-lighter {
    font-weight: lighter;
}

.uk-text-bolder {
    font-weight: bolder;
}

/* Style modifier
   ========================================================================== */
.uk-text-italic {
    font-style: italic;
}

/* Transform modifier
   ========================================================================== */
.uk-text-capitalize {
    text-transform: capitalize !important;
}

.uk-text-uppercase {
    text-transform: uppercase !important;
}

.uk-text-lowercase {
    text-transform: lowercase !important;
}

/* Decoration modifier
   ========================================================================== */
.uk-text-decoration-none {
    text-decoration: none !important;
}

/* Color modifiers
   ========================================================================== */
.uk-text-muted {
    color: #999 !important;
}

.uk-text-emphasis {
    color: #333 !important;
}

.uk-text-primary {
    color: #1e87f0 !important;
}

.uk-text-secondary {
    color: #222 !important;
}

.uk-text-success {
    color: #32d296 !important;
}

.uk-text-warning {
    color: #faa05a !important;
}

.uk-text-danger {
    color: #f0506e !important;
}

/* Background modifier
   ========================================================================== */
/*
   * 1. The background clips to the foreground text. Works in all browsers.
   * 2. Default color is set to transparent.
   * 3. Container fits the text
   * 4. Style
   */
.uk-text-background {
    /* 1 */
    -webkit-background-clip: text;
    /* 2 */
    color: transparent !important;
    /* 3 */
    display: inline-block;
    /* 4 */
    background-color: #1e87f0;
    background-image: linear-gradient(90deg, #1e87f0 0%, #411ef0 100%);
}

/* Alignment modifiers
   ========================================================================== */
.uk-text-left {
    text-align: left !important;
}

.uk-text-right {
    text-align: right !important;
}

.uk-text-center {
    text-align: center !important;
}

.uk-text-justify {
    text-align: justify !important;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-text-left\@s {
        text-align: left !important;
    }

    .uk-text-right\@s {
        text-align: right !important;
    }

    .uk-text-center\@s {
        text-align: center !important;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-text-left\@m {
        text-align: left !important;
    }

    .uk-text-right\@m {
        text-align: right !important;
    }

    .uk-text-center\@m {
        text-align: center !important;
    }
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-text-left\@l {
        text-align: left !important;
    }

    .uk-text-right\@l {
        text-align: right !important;
    }

    .uk-text-center\@l {
        text-align: center !important;
    }
}

/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-text-left\@xl {
        text-align: left !important;
    }

    .uk-text-right\@xl {
        text-align: right !important;
    }

    .uk-text-center\@xl {
        text-align: center !important;
    }
}

/*
   * Vertical
   */
.uk-text-top {
    vertical-align: top !important;
}

.uk-text-middle {
    vertical-align: middle !important;
}

.uk-text-bottom {
    vertical-align: bottom !important;
}

.uk-text-baseline {
    vertical-align: baseline !important;
}

/* Wrap modifiers
   ========================================================================== */
/*
   * Prevent text from wrapping onto multiple lines
   */
.uk-text-nowrap {
    white-space: nowrap;
}

/*
   * 1. Make sure a max-width is set after which truncation can occur
   * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
   * 3. Fix for table cells
   */
.uk-text-truncate {
    /* 1 */
    max-width: 100%;
    /* 2 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2 */
th.uk-text-truncate,
td.uk-text-truncate {
    max-width: 0;
}

/*
   * Wrap long words onto the next line and break them if they are too long to fit.
   * 1. Make it work with table cells in all browsers.
   * Note: Not using `hyphens: auto` because it hyphenates text even if not needed.
   */
.uk-text-break {
    overflow-wrap: break-word;
}

/* 1 */
th.uk-text-break,
td.uk-text-break {
    word-break: break-word;
}

/* ========================================================================
     Component: Column
   ========================================================================== */
[class*='uk-column-'] {
    -moz-column-gap: 30px;
         column-gap: 30px;
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    [class*='uk-column-'] {
        -moz-column-gap: 40px;
             column-gap: 40px;
    }
}

/*
   * Fix image 1px line wrapping into the next column in Chrome
   */
[class*='uk-column-'] img {
    transform: translate3d(0, 0, 0);
}

/* Divider
   ========================================================================== */
/*
   * 1. Double the column gap
   */
.uk-column-divider {
    -moz-column-rule: 1px solid #e5e5e5;
         column-rule: 1px solid #e5e5e5;
    /* 1 */
    -moz-column-gap: 60px;
         column-gap: 60px;
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-column-divider {
        -moz-column-gap: 80px;
             column-gap: 80px;
    }
}

/* Width modifiers
   ========================================================================== */
.uk-column-1-2 {
    -moz-column-count: 2;
         column-count: 2;
}

.uk-column-1-3 {
    -moz-column-count: 3;
         column-count: 3;
}

.uk-column-1-4 {
    -moz-column-count: 4;
         column-count: 4;
}

.uk-column-1-5 {
    -moz-column-count: 5;
         column-count: 5;
}

.uk-column-1-6 {
    -moz-column-count: 6;
         column-count: 6;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-column-1-2\@s {
        -moz-column-count: 2;
             column-count: 2;
    }

    .uk-column-1-3\@s {
        -moz-column-count: 3;
             column-count: 3;
    }

    .uk-column-1-4\@s {
        -moz-column-count: 4;
             column-count: 4;
    }

    .uk-column-1-5\@s {
        -moz-column-count: 5;
             column-count: 5;
    }

    .uk-column-1-6\@s {
        -moz-column-count: 6;
             column-count: 6;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-column-1-2\@m {
        -moz-column-count: 2;
             column-count: 2;
    }

    .uk-column-1-3\@m {
        -moz-column-count: 3;
             column-count: 3;
    }

    .uk-column-1-4\@m {
        -moz-column-count: 4;
             column-count: 4;
    }

    .uk-column-1-5\@m {
        -moz-column-count: 5;
             column-count: 5;
    }

    .uk-column-1-6\@m {
        -moz-column-count: 6;
             column-count: 6;
    }
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-column-1-2\@l {
        -moz-column-count: 2;
             column-count: 2;
    }

    .uk-column-1-3\@l {
        -moz-column-count: 3;
             column-count: 3;
    }

    .uk-column-1-4\@l {
        -moz-column-count: 4;
             column-count: 4;
    }

    .uk-column-1-5\@l {
        -moz-column-count: 5;
             column-count: 5;
    }

    .uk-column-1-6\@l {
        -moz-column-count: 6;
             column-count: 6;
    }
}

/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-column-1-2\@xl {
        -moz-column-count: 2;
             column-count: 2;
    }

    .uk-column-1-3\@xl {
        -moz-column-count: 3;
             column-count: 3;
    }

    .uk-column-1-4\@xl {
        -moz-column-count: 4;
             column-count: 4;
    }

    .uk-column-1-5\@xl {
        -moz-column-count: 5;
             column-count: 5;
    }

    .uk-column-1-6\@xl {
        -moz-column-count: 6;
             column-count: 6;
    }
}

/* Make element span across all columns
   * Does not work in Firefox yet
   ========================================================================== */
.uk-column-span {
    -moz-column-span: all;
         column-span: all;
}

/* ========================================================================
     Component: Cover
   ========================================================================== */
/*
   * Works with iframes and embedded content
   * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
   * 2. Reset responsiveness for embedded content
   * 3. Center object
   * Note: Percent values on the `top` property only works if this element
   *       is absolute positioned or if the container has a height
   */
/* 1 */
[uk-cover],
[data-uk-cover] {
    /* 2 */
    max-width: none;
    /* 3 */
    position: absolute;
    left: 50%;
    top: 50%;
    --uk-position-translate-x: -50%;
    --uk-position-translate-y: -50%;
    transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
}

iframe[uk-cover],
iframe[data-uk-cover] {
    pointer-events: none;
}

/* Container
   ========================================================================== */
/*
   * 1. Parent container which clips resized object
   * 2. Needed if the child is positioned absolute. See note above
   */
.uk-cover-container {
    /* 1 */
    overflow: hidden;
    /* 2 */
    position: relative;
}

/* ========================================================================
     Component: Background
   ========================================================================== */
/* Color
   ========================================================================== */
.uk-background-default {
    background-color: #fff;
}

.uk-background-muted {
    background-color: #f8f8f8;
}

.uk-background-primary {
    background-color: #1e87f0;
}

.uk-background-secondary {
    background-color: #222;
}

/* Size
   ========================================================================== */
.uk-background-cover,
.uk-background-contain,
.uk-background-width-1-1,
.uk-background-height-1-1 {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.uk-background-cover {
    background-size: cover;
}

.uk-background-contain {
    background-size: contain;
}

.uk-background-width-1-1 {
    background-size: 100%;
}

.uk-background-height-1-1 {
    background-size: auto 100%;
}

/* Position
   ========================================================================== */
.uk-background-top-left {
    background-position: 0 0;
}

.uk-background-top-center {
    background-position: 50% 0;
}

.uk-background-top-right {
    background-position: 100% 0;
}

.uk-background-center-left {
    background-position: 0 50%;
}

.uk-background-center-center {
    background-position: 50% 50%;
}

.uk-background-center-right {
    background-position: 100% 50%;
}

.uk-background-bottom-left {
    background-position: 0 100%;
}

.uk-background-bottom-center {
    background-position: 50% 100%;
}

.uk-background-bottom-right {
    background-position: 100% 100%;
}

/* Repeat
   ========================================================================== */
.uk-background-norepeat {
    background-repeat: no-repeat;
}

/* Attachment
   ========================================================================== */
/*
   * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
   */
.uk-background-fixed {
    background-attachment: fixed;
    /* 1 */
    backface-visibility: hidden;
}

/*
   * Exclude touch devices because `fixed` doesn't work on iOS and Android
   */
@media (pointer: coarse) {
    .uk-background-fixed {
        background-attachment: scroll;
    }
}

/* Image
   ========================================================================== */
/* Phone portrait and smaller */
@media (max-width: 639px) {
    .uk-background-image\@s {
        background-image: none !important;
    }
}

/* Phone landscape and smaller */
@media (max-width: 959px) {
    .uk-background-image\@m {
        background-image: none !important;
    }
}

/* Tablet landscape and smaller */
@media (max-width: 1199px) {
    .uk-background-image\@l {
        background-image: none !important;
    }
}

/* Desktop and smaller */
@media (max-width: 1599px) {
    .uk-background-image\@xl {
        background-image: none !important;
    }
}

/* Blend modes
   ========================================================================== */
.uk-background-blend-multiply {
    background-blend-mode: multiply;
}

.uk-background-blend-screen {
    background-blend-mode: screen;
}

.uk-background-blend-overlay {
    background-blend-mode: overlay;
}

.uk-background-blend-darken {
    background-blend-mode: darken;
}

.uk-background-blend-lighten {
    background-blend-mode: lighten;
}

.uk-background-blend-color-dodge {
    background-blend-mode: color-dodge;
}

.uk-background-blend-color-burn {
    background-blend-mode: color-burn;
}

.uk-background-blend-hard-light {
    background-blend-mode: hard-light;
}

.uk-background-blend-soft-light {
    background-blend-mode: soft-light;
}

.uk-background-blend-difference {
    background-blend-mode: difference;
}

.uk-background-blend-exclusion {
    background-blend-mode: exclusion;
}

.uk-background-blend-hue {
    background-blend-mode: hue;
}

.uk-background-blend-saturation {
    background-blend-mode: saturation;
}

.uk-background-blend-color {
    background-blend-mode: color;
}

.uk-background-blend-luminosity {
    background-blend-mode: luminosity;
}

/* ========================================================================
     Component: Align
   ========================================================================== */
/*
   * Default
   */
[class*='uk-align'] {
    display: block;
    margin-bottom: 30px;
}

*+[class*='uk-align'] {
    margin-top: 30px;
}

/*
   * Center
   */
.uk-align-center {
    margin-left: auto;
    margin-right: auto;
}

/*
   * Left/Right
   */
.uk-align-left {
    margin-top: 0;
    margin-right: 30px;
    float: left;
}

.uk-align-right {
    margin-top: 0;
    margin-left: 30px;
    float: right;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-align-left\@s {
        margin-top: 0;
        margin-right: 30px;
        float: left;
    }

    .uk-align-right\@s {
        margin-top: 0;
        margin-left: 30px;
        float: right;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-align-left\@m {
        margin-top: 0;
        margin-right: 30px;
        float: left;
    }

    .uk-align-right\@m {
        margin-top: 0;
        margin-left: 30px;
        float: right;
    }
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-align-left\@l {
        margin-top: 0;
        float: left;
    }

    .uk-align-right\@l {
        margin-top: 0;
        float: right;
    }

    .uk-align-left,
    .uk-align-left\@s,
    .uk-align-left\@m,
    .uk-align-left\@l {
        margin-right: 40px;
    }

    .uk-align-right,
    .uk-align-right\@s,
    .uk-align-right\@m,
    .uk-align-right\@l {
        margin-left: 40px;
    }
}

/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-align-left\@xl {
        margin-top: 0;
        margin-right: 40px;
        float: left;
    }

    .uk-align-right\@xl {
        margin-top: 0;
        margin-left: 40px;
        float: right;
    }
}

/* ========================================================================
     Component: SVG
   ========================================================================== */
/*
   * 1. Fill all SVG elements with the current text color if no `fill` attribute is set
   * 2. Set the fill and stroke color of all SVG elements to the current text color
   */
/* 1 */
.uk-svg,
.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve) {
    fill: currentcolor;
}

.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) {
    stroke: currentcolor;
}

/*
   * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
   */
.uk-svg {
    transform: translate(0, 0);
}

/* ========================================================================
     Component: Utility
   ========================================================================== */
/* Panel
   ========================================================================== */
.uk-panel {
    display: flow-root;
    position: relative;
    box-sizing: border-box;
}

/*
   * Remove margin from the last-child
   */
.uk-panel> :last-child {
    margin-bottom: 0;
}

/*
   * Scrollable
   */
.uk-panel-scrollable {
    height: 170px;
    padding: 10px;
    border: 1px solid #e5e5e5;
    overflow: auto;
    resize: both;
}

/* Clearfix
   ========================================================================== */
/*
   * 1. `table-cell` is used with `::before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit
   * 2. `table` is used again with `::after` because `clear` only works with block elements.
   * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari
   */
/* 1 */
.uk-clearfix::before {
    content: "";
    display: table-cell;
}

/* 2 */
.uk-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Float
   ========================================================================== */
/*
   * 1. Prevent content overflow
   */
.uk-float-left {
    float: left;
}

.uk-float-right {
    float: right;
}

/* 1 */
[class*='uk-float-'] {
    max-width: 100%;
}

/* Overfow
   ========================================================================== */
.uk-overflow-hidden {
    overflow: hidden;
}

/*
   * Enable scrollbars if content is clipped
   */
.uk-overflow-auto {
    overflow: auto;
}

.uk-overflow-auto> :last-child {
    margin-bottom: 0;
}

/* Box Sizing
   ========================================================================== */
.uk-box-sizing-content {
    box-sizing: content-box;
}

.uk-box-sizing-border {
    box-sizing: border-box;
}

/* Resize
   ========================================================================== */
.uk-resize {
    resize: both;
}

.uk-resize-horizontal {
    resize: horizontal;
}

.uk-resize-vertical {
    resize: vertical;
}

/* Display
   ========================================================================== */
.uk-display-block {
    display: block !important;
}

.uk-display-inline {
    display: inline !important;
}

.uk-display-inline-block {
    display: inline-block !important;
}

/* Inline
   ========================================================================== */
/*
   * 1. Container fits its content
   * 2. Create position context
   * 3. Prevent content overflow
   * 4. Behave like most inline-block elements
   * 5. Force new layer without creating a new stacking context
   *    to fix 1px glitch when combined with overlays and transitions in Webkit
   * 6. Clip child elements
   */
[class*='uk-inline'] {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */
    max-width: 100%;
    /* 4 */
    vertical-align: middle;
    /* 5 */
    -webkit-backface-visibility: hidden;
}

.uk-inline-clip {
    /* 6 */
    overflow: hidden;
}

/* Responsive objects
   ========================================================================== */
/*
   * Preserve original dimensions
   * Because `img, `video`, `canvas` and  `audio` are already responsive by default, see Base component
   */
.uk-preserve-width,
.uk-preserve-width canvas,
.uk-preserve-width img,
.uk-preserve-width svg,
.uk-preserve-width video {
    max-width: none;
}

/*
   * Responsiveness
   * Corrects `max-width` and `max-height` behavior if padding and border are used
   */
.uk-responsive-width,
.uk-responsive-height {
    box-sizing: border-box;
}

/*
   * 1. Set a maximum width. `important` needed to override `uk-preserve-width img`
   * 2. Auto scale the height. Only needed if `height` attribute is present
   */
.uk-responsive-width {
    /* 1 */
    max-width: 100% !important;
    /* 2 */
    height: auto;
}

/*
   * 1. Set a maximum height. Only works if the parent element has a fixed height
   * 2. Auto scale the width. Only needed if `width` attribute is present
   * 3. Reset max-width, which `img, `video`, `canvas` and  `audio` already have by default
   */
.uk-responsive-height {
    /* 1 */
    max-height: 100%;
    /* 2 */
    width: auto;
    /* 3 */
    max-width: none;
}

/*
   * Fix initial iframe width. Without the viewport is expanded on iOS devices
   */
[uk-responsive],
[data-uk-responsive] {
    max-width: 100%;
}

/* Object
   ========================================================================== */
.uk-object-cover {
    -o-object-fit: cover;
       object-fit: cover;
}

.uk-object-contain {
    -o-object-fit: contain;
       object-fit: contain;
}

.uk-object-fill {
    -o-object-fit: fill;
       object-fit: fill;
}

.uk-object-none {
    -o-object-fit: none;
       object-fit: none;
}

.uk-object-scale-down {
    -o-object-fit: scale-down;
       object-fit: scale-down;
}

/*
   * Position
   */
.uk-object-top-left {
    -o-object-position: 0 0;
       object-position: 0 0;
}

.uk-object-top-center {
    -o-object-position: 50% 0;
       object-position: 50% 0;
}

.uk-object-top-right {
    -o-object-position: 100% 0;
       object-position: 100% 0;
}

.uk-object-center-left {
    -o-object-position: 0 50%;
       object-position: 0 50%;
}

.uk-object-center-center {
    -o-object-position: 50% 50%;
       object-position: 50% 50%;
}

.uk-object-center-right {
    -o-object-position: 100% 50%;
       object-position: 100% 50%;
}

.uk-object-bottom-left {
    -o-object-position: 0 100%;
       object-position: 0 100%;
}

.uk-object-bottom-center {
    -o-object-position: 50% 100%;
       object-position: 50% 100%;
}

.uk-object-bottom-right {
    -o-object-position: 100% 100%;
       object-position: 100% 100%;
}

/* Border
   ========================================================================== */
.uk-border-circle {
    border-radius: 50%;
}

.uk-border-pill {
    border-radius: 500px;
}

.uk-border-rounded {
    border-radius: 5px;
}

/*
   * Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
   */
.uk-inline-clip[class*='uk-border-'] {
    -webkit-transform: translateZ(0);
}

/* Box-shadow
   ========================================================================== */
.uk-box-shadow-small {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.uk-box-shadow-medium {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.uk-box-shadow-large {
    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

.uk-box-shadow-xlarge {
    box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16);
}

/*
   * Hover
   */
[class*='uk-box-shadow-hover'] {
    transition: box-shadow 0.1s ease-in-out;
}

.uk-box-shadow-hover-small:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.uk-box-shadow-hover-medium:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.uk-box-shadow-hover-large:hover {
    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
}

.uk-box-shadow-hover-xlarge:hover {
    box-shadow: 0 28px 50px rgba(0, 0, 0, 0.16);
}

/* Box-shadow bottom
   ========================================================================== */
/*
   * 1. Set position.
   * 2. Set style
   * 3. Fix shadow being clipped in Safari if container is animated
   */
@supports (filter: blur(0)) {
    .uk-box-shadow-bottom {
        display: inline-block;
        position: relative;
        z-index: 0;
        max-width: 100%;
        vertical-align: middle;
    }

    .uk-box-shadow-bottom::after {
        content: "";
        /* 1 */
        position: absolute;
        bottom: -30px;
        left: 0;
        right: 0;
        z-index: -1;
        /* 2 */
        height: 30px;
        border-radius: 100%;
        background: #444;
        filter: blur(20px);
        /* 3 */
        will-change: filter;
    }
}

/* Drop cap
   ========================================================================== */
/*
   * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
   *    https://bugzilla.mozilla.org/show_bug.cgi?id=214004
   * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
   *    https://bugzilla.mozilla.org/show_bug.cgi?id=317933
   */
.uk-dropcap::first-letter,
.uk-dropcap>p:first-of-type::first-letter {
    display: block;
    margin-right: 10px;
    float: left;
    font-size: 4.5em;
    line-height: 1;
    margin-bottom: -2px;
}

/* 2 */
@-moz-document url-prefix() {

    .uk-dropcap::first-letter,
    .uk-dropcap>p:first-of-type::first-letter {
        margin-top: 1.1%;
    }
}

/* Logo
   ========================================================================== */
/*
   * 1. Style
   * 2. Required for `a`
   * 3. Behave like image but can be overridden through flex utility classes
   */
.uk-logo {
    /* 1 */
    font-size: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #333;
    /* 2 */
    text-decoration: none;
}

/* 3 */
:where(.uk-logo) {
    display: inline-block;
    vertical-align: middle;
}

/* Hover */
.uk-logo:hover {
    color: #333;
    /* 1 */
    text-decoration: none;
}

.uk-logo :where(img, svg, video) {
    display: block;
}

.uk-logo-inverse {
    display: none;
}

/* Disabled State
   ========================================================================== */
.uk-disabled {
    pointer-events: none;
}

/* Drag State
   ========================================================================== */
/*
   * 1. Needed if moving over elements with have their own cursor on hover, e.g. links or buttons
   * 2. Fix dragging over iframes
   */
.uk-drag,
.uk-drag * {
    cursor: move;
}

/* 2 */
.uk-drag iframe {
    pointer-events: none;
}

/* Dragover State
   ========================================================================== */
/*
   * Create a box-shadow when dragging a file over the upload area
   */
.uk-dragover {
    box-shadow: 0 0 20px rgba(100, 100, 100, 0.3);
}

/* Blend modes
   ========================================================================== */
.uk-blend-multiply {
    mix-blend-mode: multiply;
}

.uk-blend-screen {
    mix-blend-mode: screen;
}

.uk-blend-overlay {
    mix-blend-mode: overlay;
}

.uk-blend-darken {
    mix-blend-mode: darken;
}

.uk-blend-lighten {
    mix-blend-mode: lighten;
}

.uk-blend-color-dodge {
    mix-blend-mode: color-dodge;
}

.uk-blend-color-burn {
    mix-blend-mode: color-burn;
}

.uk-blend-hard-light {
    mix-blend-mode: hard-light;
}

.uk-blend-soft-light {
    mix-blend-mode: soft-light;
}

.uk-blend-difference {
    mix-blend-mode: difference;
}

.uk-blend-exclusion {
    mix-blend-mode: exclusion;
}

.uk-blend-hue {
    mix-blend-mode: hue;
}

.uk-blend-saturation {
    mix-blend-mode: saturation;
}

.uk-blend-color {
    mix-blend-mode: color;
}

.uk-blend-luminosity {
    mix-blend-mode: luminosity;
}

/* Transform
  ========================================================================== */
.uk-transform-center {
    transform: translate(-50%, -50%);
}

/* Transform Origin
  ========================================================================== */
.uk-transform-origin-top-left {
    transform-origin: 0 0;
}

.uk-transform-origin-top-center {
    transform-origin: 50% 0;
}

.uk-transform-origin-top-right {
    transform-origin: 100% 0;
}

.uk-transform-origin-center-left {
    transform-origin: 0 50%;
}

.uk-transform-origin-center-right {
    transform-origin: 100% 50%;
}

.uk-transform-origin-bottom-left {
    transform-origin: 0 100%;
}

.uk-transform-origin-bottom-center {
    transform-origin: 50% 100%;
}

.uk-transform-origin-bottom-right {
    transform-origin: 100% 100%;
}

/* ========================================================================
     Component: Flex
   ========================================================================== */
.uk-flex {
    display: flex;
}

.uk-flex-inline {
    display: inline-flex;
}

/* Alignment
   ========================================================================== */
/*
   * Align items along the main axis of the current line of the flex container
   * Row: Horizontal
   */
.uk-flex-left {
    justify-content: flex-start;
}

.uk-flex-center {
    justify-content: center;
}

.uk-flex-right {
    justify-content: flex-end;
}

.uk-flex-between {
    justify-content: space-between;
}

.uk-flex-around {
    justify-content: space-around;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-flex-left\@s {
        justify-content: flex-start;
    }

    .uk-flex-center\@s {
        justify-content: center;
    }

    .uk-flex-right\@s {
        justify-content: flex-end;
    }

    .uk-flex-between\@s {
        justify-content: space-between;
    }

    .uk-flex-around\@s {
        justify-content: space-around;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-flex-left\@m {
        justify-content: flex-start;
    }

    .uk-flex-center\@m {
        justify-content: center;
    }

    .uk-flex-right\@m {
        justify-content: flex-end;
    }

    .uk-flex-between\@m {
        justify-content: space-between;
    }

    .uk-flex-around\@m {
        justify-content: space-around;
    }
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-flex-left\@l {
        justify-content: flex-start;
    }

    .uk-flex-center\@l {
        justify-content: center;
    }

    .uk-flex-right\@l {
        justify-content: flex-end;
    }

    .uk-flex-between\@l {
        justify-content: space-between;
    }

    .uk-flex-around\@l {
        justify-content: space-around;
    }
}

/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-flex-left\@xl {
        justify-content: flex-start;
    }

    .uk-flex-center\@xl {
        justify-content: center;
    }

    .uk-flex-right\@xl {
        justify-content: flex-end;
    }

    .uk-flex-between\@xl {
        justify-content: space-between;
    }

    .uk-flex-around\@xl {
        justify-content: space-around;
    }
}

/*
   * Align items in the cross axis of the current line of the flex container
   * Row: Vertical
   */
.uk-flex-stretch {
    align-items: stretch;
}

.uk-flex-top {
    align-items: flex-start;
}

.uk-flex-middle {
    align-items: center;
}

.uk-flex-bottom {
    align-items: flex-end;
}

/* Direction
   ========================================================================== */
.uk-flex-row {
    flex-direction: row;
}

.uk-flex-row-reverse {
    flex-direction: row-reverse;
}

.uk-flex-column {
    flex-direction: column;
}

.uk-flex-column-reverse {
    flex-direction: column-reverse;
}

/* Wrap
   ========================================================================== */
.uk-flex-nowrap {
    flex-wrap: nowrap;
}

.uk-flex-wrap {
    flex-wrap: wrap;
}

.uk-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/*
   * Aligns items within the flex container when there is extra space in the cross-axis
   * Only works if there is more than one line of flex items
   */
.uk-flex-wrap-stretch {
    align-content: stretch;
}

.uk-flex-wrap-top {
    align-content: flex-start;
}

.uk-flex-wrap-middle {
    align-content: center;
}

.uk-flex-wrap-bottom {
    align-content: flex-end;
}

.uk-flex-wrap-between {
    align-content: space-between;
}

.uk-flex-wrap-around {
    align-content: space-around;
}

/* Item ordering
   ========================================================================== */
/*
   * Default is 0
   */
.uk-flex-first {
    order: -1;
}

.uk-flex-last {
    order: 99;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-flex-first\@s {
        order: -1;
    }

    .uk-flex-last\@s {
        order: 99;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-flex-first\@m {
        order: -1;
    }

    .uk-flex-last\@m {
        order: 99;
    }
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-flex-first\@l {
        order: -1;
    }

    .uk-flex-last\@l {
        order: 99;
    }
}

/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-flex-first\@xl {
        order: -1;
    }

    .uk-flex-last\@xl {
        order: 99;
    }
}

/* Item dimensions
   ========================================================================== */
/*
   * Initial: 0 1 auto
   * Content dimensions, but shrinks
   */
/*
   * No Flex: 0 0 auto
   * Content dimensions
   */
.uk-flex-none {
    flex: none;
}

/*
   * Relative Flex: 1 1 auto
   * Space is allocated considering content
   */
.uk-flex-auto {
    flex: auto;
}

/*
   * Absolute Flex: 1 1 0%
   * Space is allocated solely based on flex
   */
.uk-flex-1 {
    flex: 1;
}

/* ========================================================================
     Component: Margin
   ========================================================================== */
/*
   * Default
   */
.uk-margin {
    margin-bottom: 20px;
}

*+.uk-margin {
    margin-top: 20px !important;
}

.uk-margin-top {
    margin-top: 20px !important;
}

.uk-margin-bottom {
    margin-bottom: 20px !important;
}

.uk-margin-left {
    margin-left: 20px !important;
}

.uk-margin-right {
    margin-right: 20px !important;
}

/* Small
   ========================================================================== */
.uk-margin-small {
    margin-bottom: 10px;
}

*+.uk-margin-small {
    margin-top: 10px !important;
}

.uk-margin-small-top {
    margin-top: 10px !important;
}

.uk-margin-small-bottom {
    margin-bottom: 10px !important;
}

.uk-margin-small-left {
    margin-left: 10px !important;
}

.uk-margin-small-right {
    margin-right: 10px !important;
}

/* Medium
   ========================================================================== */
.uk-margin-medium {
    margin-bottom: 40px;
}

*+.uk-margin-medium {
    margin-top: 40px !important;
}

.uk-margin-medium-top {
    margin-top: 40px !important;
}

.uk-margin-medium-bottom {
    margin-bottom: 40px !important;
}

.uk-margin-medium-left {
    margin-left: 40px !important;
}

.uk-margin-medium-right {
    margin-right: 40px !important;
}

/* Large
   ========================================================================== */
.uk-margin-large {
    margin-bottom: 40px;
}

*+.uk-margin-large {
    margin-top: 40px !important;
}

.uk-margin-large-top {
    margin-top: 40px !important;
}

.uk-margin-large-bottom {
    margin-bottom: 40px !important;
}

.uk-margin-large-left {
    margin-left: 40px !important;
}

.uk-margin-large-right {
    margin-right: 40px !important;
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-margin-large {
        margin-bottom: 70px;
    }

    *+.uk-margin-large {
        margin-top: 70px !important;
    }

    .uk-margin-large-top {
        margin-top: 70px !important;
    }

    .uk-margin-large-bottom {
        margin-bottom: 70px !important;
    }

    .uk-margin-large-left {
        margin-left: 70px !important;
    }

    .uk-margin-large-right {
        margin-right: 70px !important;
    }
}

/* XLarge
   ========================================================================== */
.uk-margin-xlarge {
    margin-bottom: 70px;
}

*+.uk-margin-xlarge {
    margin-top: 70px !important;
}

.uk-margin-xlarge-top {
    margin-top: 70px !important;
}

.uk-margin-xlarge-bottom {
    margin-bottom: 70px !important;
}

.uk-margin-xlarge-left {
    margin-left: 70px !important;
}

.uk-margin-xlarge-right {
    margin-right: 70px !important;
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-margin-xlarge {
        margin-bottom: 140px;
    }

    *+.uk-margin-xlarge {
        margin-top: 140px !important;
    }

    .uk-margin-xlarge-top {
        margin-top: 140px !important;
    }

    .uk-margin-xlarge-bottom {
        margin-bottom: 140px !important;
    }

    .uk-margin-xlarge-left {
        margin-left: 140px !important;
    }

    .uk-margin-xlarge-right {
        margin-right: 140px !important;
    }
}

/* Auto
   ========================================================================== */
.uk-margin-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.uk-margin-auto-top {
    margin-top: auto !important;
}

.uk-margin-auto-bottom {
    margin-bottom: auto !important;
}

.uk-margin-auto-left {
    margin-left: auto !important;
}

.uk-margin-auto-right {
    margin-right: auto !important;
}

.uk-margin-auto-vertical {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-margin-auto\@s {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .uk-margin-auto-left\@s {
        margin-left: auto !important;
    }

    .uk-margin-auto-right\@s {
        margin-right: auto !important;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-margin-auto\@m {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .uk-margin-auto-left\@m {
        margin-left: auto !important;
    }

    .uk-margin-auto-right\@m {
        margin-right: auto !important;
    }
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-margin-auto\@l {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .uk-margin-auto-left\@l {
        margin-left: auto !important;
    }

    .uk-margin-auto-right\@l {
        margin-right: auto !important;
    }
}

/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-margin-auto\@xl {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .uk-margin-auto-left\@xl {
        margin-left: auto !important;
    }

    .uk-margin-auto-right\@xl {
        margin-right: auto !important;
    }
}

/* Remove
   ========================================================================== */
.uk-margin-remove {
    margin: 0 !important;
}

.uk-margin-remove-top {
    margin-top: 0 !important;
}

.uk-margin-remove-bottom {
    margin-bottom: 0 !important;
}

.uk-margin-remove-left {
    margin-left: 0 !important;
}

.uk-margin-remove-right {
    margin-right: 0 !important;
}

.uk-margin-remove-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.uk-margin-remove-adjacent+*,
.uk-margin-remove-first-child> :first-child {
    margin-top: 0 !important;
}

.uk-margin-remove-last-child> :last-child {
    margin-bottom: 0 !important;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-margin-remove-left\@s {
        margin-left: 0 !important;
    }

    .uk-margin-remove-right\@s {
        margin-right: 0 !important;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-margin-remove-left\@m {
        margin-left: 0 !important;
    }

    .uk-margin-remove-right\@m {
        margin-right: 0 !important;
    }
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-margin-remove-left\@l {
        margin-left: 0 !important;
    }

    .uk-margin-remove-right\@l {
        margin-right: 0 !important;
    }
}

/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-margin-remove-left\@xl {
        margin-left: 0 !important;
    }

    .uk-margin-remove-right\@xl {
        margin-right: 0 !important;
    }
}

/* ========================================================================
     Component: Padding
   ========================================================================== */
.uk-padding {
    padding: 30px;
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-padding {
        padding: 40px;
    }
}

/* Small
   ========================================================================== */
.uk-padding-small {
    padding: 15px;
}

/* Large
   ========================================================================== */
.uk-padding-large {
    padding: 40px;
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-padding-large {
        padding: 70px;
    }
}

/* Remove
   ========================================================================== */
.uk-padding-remove {
    padding: 0 !important;
}

.uk-padding-remove-top {
    padding-top: 0 !important;
}

.uk-padding-remove-bottom {
    padding-bottom: 0 !important;
}

.uk-padding-remove-left {
    padding-left: 0 !important;
}

.uk-padding-remove-right {
    padding-right: 0 !important;
}

.uk-padding-remove-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.uk-padding-remove-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ========================================================================
     Component: Position
   ========================================================================== */
:root {
    --uk-position-margin-offset: 0px;
}

/* Directions
   ========================================================================== */
/*
   * 1. Prevent content overflow.
   */
[class*='uk-position-top'],
[class*='uk-position-bottom'],
[class*='uk-position-left'],
[class*='uk-position-right'],
[class*='uk-position-center'] {
    position: absolute !important;
    /* 1 */
    max-width: calc(100% - (var(--uk-position-margin-offset) * 2));
    box-sizing: border-box;
}

/*
   * Edges
   * Don't use `width: 100%` because it's wrong if the parent has padding.
   */
.uk-position-top {
    top: 0;
    left: 0;
    right: 0;
}

.uk-position-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}

.uk-position-left {
    top: 0;
    bottom: 0;
    left: 0;
}

.uk-position-right {
    top: 0;
    bottom: 0;
    right: 0;
}

/*
   * Corners
   */
.uk-position-top-left {
    top: 0;
    left: 0;
}

.uk-position-top-right {
    top: 0;
    right: 0;
}

.uk-position-bottom-left {
    bottom: 0;
    left: 0;
}

.uk-position-bottom-right {
    bottom: 0;
    right: 0;
}

/*
   * Center
   * 1. Fix text wrapping if content is larger than 50% of the container.
   *    Using `max-content` requires `max-width` of 100% which is set generally.
   */
.uk-position-center {
    top: calc(50% - var(--uk-position-margin-offset));
    left: calc(50% - var(--uk-position-margin-offset));
    --uk-position-translate-x: -50%;
    --uk-position-translate-y: -50%;
    transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
    /* 1 */
    width: -moz-max-content;
    width: max-content;
}

/* Vertical */
[class*='uk-position-center-left'],
[class*='uk-position-center-right'] {
    top: calc(50% - var(--uk-position-margin-offset));
    --uk-position-translate-y: -50%;
    transform: translate(0, var(--uk-position-translate-y));
}

.uk-position-center-left {
    left: 0;
}

.uk-position-center-right {
    right: 0;
}

.uk-position-center-left-out {
    right: 100%;
    width: -moz-max-content;
    width: max-content;
}

.uk-position-center-right-out {
    left: 100%;
    width: -moz-max-content;
    width: max-content;
}

/* Horizontal */
.uk-position-top-center,
.uk-position-bottom-center {
    left: calc(50% - var(--uk-position-margin-offset));
    --uk-position-translate-x: -50%;
    transform: translate(var(--uk-position-translate-x), 0);
    /* 1 */
    width: -moz-max-content;
    width: max-content;
}

.uk-position-top-center {
    top: 0;
}

.uk-position-bottom-center {
    bottom: 0;
}

/*
   * Cover
   */
.uk-position-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Margin
   ========================================================================== */
.uk-position-small {
    margin: 15px;
    --uk-position-margin-offset: 15px;
}

.uk-position-medium {
    margin: 30px;
    --uk-position-margin-offset: 30px;
}

.uk-position-large {
    margin: 30px;
    --uk-position-margin-offset: 30px;
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-position-large {
        margin: 50px;
        --uk-position-margin-offset: 50px;
    }
}

/* Schemes
   ========================================================================== */
.uk-position-relative {
    position: relative !important;
}

.uk-position-absolute {
    position: absolute !important;
}

.uk-position-fixed {
    position: fixed !important;
}

.uk-position-sticky {
    position: sticky !important;
}

/* Layer
   ========================================================================== */
.uk-position-z-index {
    z-index: 1;
}

.uk-position-z-index-zero {
    z-index: 0;
}

.uk-position-z-index-negative {
    z-index: -1;
}

/* ========================================================================
     Component: Transition
   ========================================================================== */
/* Transitions
   ========================================================================== */
/*
   * The toggle is triggered on touch devices by two methods:
   * 1. Using `:focus` and tabindex
   * 2. Using `:hover` and a `touchstart` event listener registered on the document
   *    (Doesn't work on Surface touch devices)
   */
:where(.uk-transition-fade),
:where([class*='uk-transition-scale']),
:where([class*='uk-transition-slide']) {
    --uk-position-translate-x: 0;
    --uk-position-translate-y: 0;
}

.uk-transition-fade,
[class*='uk-transition-scale'],
[class*='uk-transition-slide'] {
    --uk-translate-x: 0;
    --uk-translate-y: 0;
    --uk-scale-x: 1;
    --uk-scale-y: 1;
    transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y)) translate(var(--uk-translate-x), var(--uk-translate-y)) scale(var(--uk-scale-x), var(--uk-scale-y));
    transition: 0.3s ease-out;
    transition-property: opacity, transform, filter;
    opacity: 0;
}

/*
   * Fade
   */
.uk-transition-toggle:hover .uk-transition-fade,
.uk-transition-toggle:focus .uk-transition-fade,
.uk-transition-toggle .uk-transition-fade:focus-within,
.uk-transition-active.uk-active .uk-transition-fade {
    opacity: 1;
}

/*
   * Scale
   * 1. Make image rendering the same during the transition as before and after. Prefixed because of Safari.
   */
/* 1 */
[class*='uk-transition-scale'] {
    -webkit-backface-visibility: hidden;
}

.uk-transition-scale-up {
    --uk-scale-x: 1;
    --uk-scale-y: 1;
}

.uk-transition-scale-down {
    --uk-scale-x: 1.03;
    --uk-scale-y: 1.03;
}

/* Show */
.uk-transition-toggle:hover .uk-transition-scale-up,
.uk-transition-toggle:focus .uk-transition-scale-up,
.uk-transition-toggle .uk-transition-scale-up:focus-within,
.uk-transition-active.uk-active .uk-transition-scale-up {
    --uk-scale-x: 1.03;
    --uk-scale-y: 1.03;
    opacity: 1;
}

.uk-transition-toggle:hover .uk-transition-scale-down,
.uk-transition-toggle:focus .uk-transition-scale-down,
.uk-transition-toggle .uk-transition-scale-down:focus-within,
.uk-transition-active.uk-active .uk-transition-scale-down {
    --uk-scale-x: 1;
    --uk-scale-y: 1;
    opacity: 1;
}

/*
   * Slide
   */
.uk-transition-slide-top {
    --uk-translate-y: -100%;
}

.uk-transition-slide-bottom {
    --uk-translate-y: 100%;
}

.uk-transition-slide-left {
    --uk-translate-x: -100%;
}

.uk-transition-slide-right {
    --uk-translate-x: 100%;
}

.uk-transition-slide-top-small {
    --uk-translate-y: calc(-1 * 10px);
}

.uk-transition-slide-bottom-small {
    --uk-translate-y: 10px;
}

.uk-transition-slide-left-small {
    --uk-translate-x: calc(-1 * 10px);
}

.uk-transition-slide-right-small {
    --uk-translate-x: 10px;
}

.uk-transition-slide-top-medium {
    --uk-translate-y: calc(-1 * 50px);
}

.uk-transition-slide-bottom-medium {
    --uk-translate-y: 50px;
}

.uk-transition-slide-left-medium {
    --uk-translate-x: calc(-1 * 50px);
}

.uk-transition-slide-right-medium {
    --uk-translate-x: 50px;
}

/* Show */
.uk-transition-toggle:hover [class*='uk-transition-slide'],
.uk-transition-toggle:focus [class*='uk-transition-slide'],
.uk-transition-toggle [class*='uk-transition-slide']:focus-within,
.uk-transition-active.uk-active [class*='uk-transition-slide'] {
    --uk-translate-x: 0;
    --uk-translate-y: 0;
    opacity: 1;
}

/* Opacity modifier
   ========================================================================== */
.uk-transition-opaque {
    opacity: 1;
}

/* Duration modifiers
   ========================================================================== */
.uk-transition-slow {
    transition-duration: 0.7s;
}

/* ========================================================================
     Component: Visibility
   ========================================================================== */
/*
   * Hidden
   * `hidden` attribute also set here to make it stronger
   */
[hidden],
.uk-hidden {
    display: none !important;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-hidden\@s {
        display: none !important;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-hidden\@m {
        display: none !important;
    }
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-hidden\@l {
        display: none !important;
    }
}

/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-hidden\@xl {
        display: none !important;
    }
}

/*
   * Visible
   */
/* Phone portrait and smaller */
@media (max-width: 639px) {
    .uk-visible\@s {
        display: none !important;
    }
}

/* Phone landscape and smaller */
@media (max-width: 959px) {
    .uk-visible\@m {
        display: none !important;
    }
}

/* Tablet landscape and smaller */
@media (max-width: 1199px) {
    .uk-visible\@l {
        display: none !important;
    }
}

/* Desktop and smaller */
@media (max-width: 1599px) {
    .uk-visible\@xl {
        display: none !important;
    }
}

/* Visibility
   ========================================================================== */
.uk-invisible {
    visibility: hidden !important;
}

/* Based on the State of the Parent Element
   ========================================================================== */
/*
   * Mind that `display: none`, `visibility: hidden` and `opacity: 0`
   * remove the element from the accessibility tree and that
   * `display: none` and `visibility: hidden` are not focusable.
   *
   * The target stays visible if any element within receives focus through keyboard.
   */
/*
   * Remove space when hidden.
   * 1. Remove from document flow.
   * 2. Hide element and shrink its dimension. Can't use zero dimensions together
   *    with `overflow: hidden` it would remove it from the accessibility tree.
   * 3. Hide the single rendered pixel.
   * 4. Prevent text wrapping caused by `width: 1px` because it has side effects on vocalisation
   *    by screen readers and the visual tracking indicator of other assistive technologies.
   */
.uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
    /* 1 */
    position: absolute !important;
    /* 2 */
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    /* 3 */
    clip-path: inset(50%) !important;
    /* 4 */
    white-space: nowrap !important;
}

/*
   * Keep space when hidden.
   * Hide element without shrinking its dimension.
   * Unfortunately, can't use `clip-path: inset(50%)` because hover won't work
   * if the element is positioned outside of the toggle box.
   */
.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) {
    opacity: 0 !important;
}

/* Based on Hover Capability of the Pointing Device
   ========================================================================== */
/*
   * Hover
   */
/* Hide if primary pointing device doesn't support hover, e.g. touch screens. */
@media (hover: none) {
    .uk-hidden-touch {
        display: none !important;
    }
}

/* Hide if primary pointing device supports hover, e.g. mice. */
@media (hover) {
    .uk-hidden-notouch {
        display: none !important;
    }
}

/* ========================================================================
     Component: Inverse
   ========================================================================== */
/*
   * Implemented class depends on the general theme color
   * `uk-light` is for light colors on dark backgrounds
   * `uk-dark` is or dark colors on light backgrounds
   */
.uk-light,
.uk-section-primary:not(.uk-preserve-color),
.uk-section-secondary:not(.uk-preserve-color),
.uk-tile-primary:not(.uk-preserve-color),
.uk-tile-secondary:not(.uk-preserve-color),
.uk-card-primary.uk-card-body,
.uk-card-primary> :not([class*='uk-card-media']),
.uk-card-secondary.uk-card-body,
.uk-card-secondary> :not([class*='uk-card-media']),
.uk-overlay-primary,
.uk-offcanvas-bar {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light a,
.uk-light .uk-link,
.uk-section-primary:not(.uk-preserve-color) a,
.uk-section-primary:not(.uk-preserve-color) .uk-link,
.uk-section-secondary:not(.uk-preserve-color) a,
.uk-section-secondary:not(.uk-preserve-color) .uk-link,
.uk-tile-primary:not(.uk-preserve-color) a,
.uk-tile-primary:not(.uk-preserve-color) .uk-link,
.uk-tile-secondary:not(.uk-preserve-color) a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link,
.uk-card-primary.uk-card-body a,
.uk-card-primary.uk-card-body .uk-link,
.uk-card-primary> :not([class*='uk-card-media']) a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-link,
.uk-card-secondary.uk-card-body a,
.uk-card-secondary.uk-card-body .uk-link,
.uk-card-secondary> :not([class*='uk-card-media']) a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-link,
.uk-overlay-primary a,
.uk-overlay-primary .uk-link,
.uk-offcanvas-bar a,
.uk-offcanvas-bar .uk-link {
    color: #fff;
}

.uk-light a:hover,
.uk-light .uk-link:hover,
.uk-light .uk-link-toggle:hover .uk-link,
.uk-section-primary:not(.uk-preserve-color) a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link,
.uk-section-secondary:not(.uk-preserve-color) a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link,
.uk-tile-primary:not(.uk-preserve-color) a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link,
.uk-tile-secondary:not(.uk-preserve-color) a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link,
.uk-card-primary.uk-card-body a:hover,
.uk-card-primary.uk-card-body .uk-link:hover,
.uk-card-primary.uk-card-body .uk-link-toggle:hover .uk-link,
.uk-card-primary> :not([class*='uk-card-media']) a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-link:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-link-toggle:hover .uk-link,
.uk-card-secondary.uk-card-body a:hover,
.uk-card-secondary.uk-card-body .uk-link:hover,
.uk-card-secondary.uk-card-body .uk-link-toggle:hover .uk-link,
.uk-card-secondary> :not([class*='uk-card-media']) a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-link:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-link-toggle:hover .uk-link,
.uk-overlay-primary a:hover,
.uk-overlay-primary .uk-link:hover,
.uk-overlay-primary .uk-link-toggle:hover .uk-link,
.uk-offcanvas-bar a:hover,
.uk-offcanvas-bar .uk-link:hover,
.uk-offcanvas-bar .uk-link-toggle:hover .uk-link {
    color: #fff;
}

.uk-light :not(pre)>code,
.uk-light :not(pre)>kbd,
.uk-light :not(pre)>samp,
.uk-section-primary:not(.uk-preserve-color) :not(pre)>code,
.uk-section-primary:not(.uk-preserve-color) :not(pre)>kbd,
.uk-section-primary:not(.uk-preserve-color) :not(pre)>samp,
.uk-section-secondary:not(.uk-preserve-color) :not(pre)>code,
.uk-section-secondary:not(.uk-preserve-color) :not(pre)>kbd,
.uk-section-secondary:not(.uk-preserve-color) :not(pre)>samp,
.uk-tile-primary:not(.uk-preserve-color) :not(pre)>code,
.uk-tile-primary:not(.uk-preserve-color) :not(pre)>kbd,
.uk-tile-primary:not(.uk-preserve-color) :not(pre)>samp,
.uk-tile-secondary:not(.uk-preserve-color) :not(pre)>code,
.uk-tile-secondary:not(.uk-preserve-color) :not(pre)>kbd,
.uk-tile-secondary:not(.uk-preserve-color) :not(pre)>samp,
.uk-card-primary.uk-card-body :not(pre)>code,
.uk-card-primary.uk-card-body :not(pre)>kbd,
.uk-card-primary.uk-card-body :not(pre)>samp,
.uk-card-primary> :not([class*='uk-card-media']) :not(pre)>code,
.uk-card-primary> :not([class*='uk-card-media']) :not(pre)>kbd,
.uk-card-primary> :not([class*='uk-card-media']) :not(pre)>samp,
.uk-card-secondary.uk-card-body :not(pre)>code,
.uk-card-secondary.uk-card-body :not(pre)>kbd,
.uk-card-secondary.uk-card-body :not(pre)>samp,
.uk-card-secondary> :not([class*='uk-card-media']) :not(pre)>code,
.uk-card-secondary> :not([class*='uk-card-media']) :not(pre)>kbd,
.uk-card-secondary> :not([class*='uk-card-media']) :not(pre)>samp,
.uk-overlay-primary :not(pre)>code,
.uk-overlay-primary :not(pre)>kbd,
.uk-overlay-primary :not(pre)>samp,
.uk-offcanvas-bar :not(pre)>code,
.uk-offcanvas-bar :not(pre)>kbd,
.uk-offcanvas-bar :not(pre)>samp {
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.1);
}

.uk-light em,
.uk-section-primary:not(.uk-preserve-color) em,
.uk-section-secondary:not(.uk-preserve-color) em,
.uk-tile-primary:not(.uk-preserve-color) em,
.uk-tile-secondary:not(.uk-preserve-color) em,
.uk-card-primary.uk-card-body em,
.uk-card-primary> :not([class*='uk-card-media']) em,
.uk-card-secondary.uk-card-body em,
.uk-card-secondary> :not([class*='uk-card-media']) em,
.uk-overlay-primary em,
.uk-offcanvas-bar em {
    color: #fff;
}

.uk-light h1,
.uk-light .uk-h1,
.uk-light h2,
.uk-light .uk-h2,
.uk-light h3,
.uk-light .uk-h3,
.uk-light h4,
.uk-light .uk-h4,
.uk-light h5,
.uk-light .uk-h5,
.uk-light h6,
.uk-light .uk-h6,
.uk-light .uk-heading-small,
.uk-light .uk-heading-medium,
.uk-light .uk-heading-large,
.uk-light .uk-heading-xlarge,
.uk-light .uk-heading-2xlarge,
.uk-section-primary:not(.uk-preserve-color) h1,
.uk-section-primary:not(.uk-preserve-color) .uk-h1,
.uk-section-primary:not(.uk-preserve-color) h2,
.uk-section-primary:not(.uk-preserve-color) .uk-h2,
.uk-section-primary:not(.uk-preserve-color) h3,
.uk-section-primary:not(.uk-preserve-color) .uk-h3,
.uk-section-primary:not(.uk-preserve-color) h4,
.uk-section-primary:not(.uk-preserve-color) .uk-h4,
.uk-section-primary:not(.uk-preserve-color) h5,
.uk-section-primary:not(.uk-preserve-color) .uk-h5,
.uk-section-primary:not(.uk-preserve-color) h6,
.uk-section-primary:not(.uk-preserve-color) .uk-h6,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-small,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-medium,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-large,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-xlarge,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-2xlarge,
.uk-section-secondary:not(.uk-preserve-color) h1,
.uk-section-secondary:not(.uk-preserve-color) .uk-h1,
.uk-section-secondary:not(.uk-preserve-color) h2,
.uk-section-secondary:not(.uk-preserve-color) .uk-h2,
.uk-section-secondary:not(.uk-preserve-color) h3,
.uk-section-secondary:not(.uk-preserve-color) .uk-h3,
.uk-section-secondary:not(.uk-preserve-color) h4,
.uk-section-secondary:not(.uk-preserve-color) .uk-h4,
.uk-section-secondary:not(.uk-preserve-color) h5,
.uk-section-secondary:not(.uk-preserve-color) .uk-h5,
.uk-section-secondary:not(.uk-preserve-color) h6,
.uk-section-secondary:not(.uk-preserve-color) .uk-h6,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-small,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-medium,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-large,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-xlarge,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-2xlarge,
.uk-tile-primary:not(.uk-preserve-color) h1,
.uk-tile-primary:not(.uk-preserve-color) .uk-h1,
.uk-tile-primary:not(.uk-preserve-color) h2,
.uk-tile-primary:not(.uk-preserve-color) .uk-h2,
.uk-tile-primary:not(.uk-preserve-color) h3,
.uk-tile-primary:not(.uk-preserve-color) .uk-h3,
.uk-tile-primary:not(.uk-preserve-color) h4,
.uk-tile-primary:not(.uk-preserve-color) .uk-h4,
.uk-tile-primary:not(.uk-preserve-color) h5,
.uk-tile-primary:not(.uk-preserve-color) .uk-h5,
.uk-tile-primary:not(.uk-preserve-color) h6,
.uk-tile-primary:not(.uk-preserve-color) .uk-h6,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-small,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-medium,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-large,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-xlarge,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-2xlarge,
.uk-tile-secondary:not(.uk-preserve-color) h1,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h1,
.uk-tile-secondary:not(.uk-preserve-color) h2,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h2,
.uk-tile-secondary:not(.uk-preserve-color) h3,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h3,
.uk-tile-secondary:not(.uk-preserve-color) h4,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h4,
.uk-tile-secondary:not(.uk-preserve-color) h5,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h5,
.uk-tile-secondary:not(.uk-preserve-color) h6,
.uk-tile-secondary:not(.uk-preserve-color) .uk-h6,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-small,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-medium,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-large,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-xlarge,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-2xlarge,
.uk-card-primary.uk-card-body h1,
.uk-card-primary.uk-card-body .uk-h1,
.uk-card-primary.uk-card-body h2,
.uk-card-primary.uk-card-body .uk-h2,
.uk-card-primary.uk-card-body h3,
.uk-card-primary.uk-card-body .uk-h3,
.uk-card-primary.uk-card-body h4,
.uk-card-primary.uk-card-body .uk-h4,
.uk-card-primary.uk-card-body h5,
.uk-card-primary.uk-card-body .uk-h5,
.uk-card-primary.uk-card-body h6,
.uk-card-primary.uk-card-body .uk-h6,
.uk-card-primary.uk-card-body .uk-heading-small,
.uk-card-primary.uk-card-body .uk-heading-medium,
.uk-card-primary.uk-card-body .uk-heading-large,
.uk-card-primary.uk-card-body .uk-heading-xlarge,
.uk-card-primary.uk-card-body .uk-heading-2xlarge,
.uk-card-primary> :not([class*='uk-card-media']) h1,
.uk-card-primary> :not([class*='uk-card-media']) .uk-h1,
.uk-card-primary> :not([class*='uk-card-media']) h2,
.uk-card-primary> :not([class*='uk-card-media']) .uk-h2,
.uk-card-primary> :not([class*='uk-card-media']) h3,
.uk-card-primary> :not([class*='uk-card-media']) .uk-h3,
.uk-card-primary> :not([class*='uk-card-media']) h4,
.uk-card-primary> :not([class*='uk-card-media']) .uk-h4,
.uk-card-primary> :not([class*='uk-card-media']) h5,
.uk-card-primary> :not([class*='uk-card-media']) .uk-h5,
.uk-card-primary> :not([class*='uk-card-media']) h6,
.uk-card-primary> :not([class*='uk-card-media']) .uk-h6,
.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-small,
.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-medium,
.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-large,
.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-xlarge,
.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-2xlarge,
.uk-card-secondary.uk-card-body h1,
.uk-card-secondary.uk-card-body .uk-h1,
.uk-card-secondary.uk-card-body h2,
.uk-card-secondary.uk-card-body .uk-h2,
.uk-card-secondary.uk-card-body h3,
.uk-card-secondary.uk-card-body .uk-h3,
.uk-card-secondary.uk-card-body h4,
.uk-card-secondary.uk-card-body .uk-h4,
.uk-card-secondary.uk-card-body h5,
.uk-card-secondary.uk-card-body .uk-h5,
.uk-card-secondary.uk-card-body h6,
.uk-card-secondary.uk-card-body .uk-h6,
.uk-card-secondary.uk-card-body .uk-heading-small,
.uk-card-secondary.uk-card-body .uk-heading-medium,
.uk-card-secondary.uk-card-body .uk-heading-large,
.uk-card-secondary.uk-card-body .uk-heading-xlarge,
.uk-card-secondary.uk-card-body .uk-heading-2xlarge,
.uk-card-secondary> :not([class*='uk-card-media']) h1,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-h1,
.uk-card-secondary> :not([class*='uk-card-media']) h2,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-h2,
.uk-card-secondary> :not([class*='uk-card-media']) h3,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-h3,
.uk-card-secondary> :not([class*='uk-card-media']) h4,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-h4,
.uk-card-secondary> :not([class*='uk-card-media']) h5,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-h5,
.uk-card-secondary> :not([class*='uk-card-media']) h6,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-h6,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-small,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-medium,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-large,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-xlarge,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-2xlarge,
.uk-overlay-primary h1,
.uk-overlay-primary .uk-h1,
.uk-overlay-primary h2,
.uk-overlay-primary .uk-h2,
.uk-overlay-primary h3,
.uk-overlay-primary .uk-h3,
.uk-overlay-primary h4,
.uk-overlay-primary .uk-h4,
.uk-overlay-primary h5,
.uk-overlay-primary .uk-h5,
.uk-overlay-primary h6,
.uk-overlay-primary .uk-h6,
.uk-overlay-primary .uk-heading-small,
.uk-overlay-primary .uk-heading-medium,
.uk-overlay-primary .uk-heading-large,
.uk-overlay-primary .uk-heading-xlarge,
.uk-overlay-primary .uk-heading-2xlarge,
.uk-offcanvas-bar h1,
.uk-offcanvas-bar .uk-h1,
.uk-offcanvas-bar h2,
.uk-offcanvas-bar .uk-h2,
.uk-offcanvas-bar h3,
.uk-offcanvas-bar .uk-h3,
.uk-offcanvas-bar h4,
.uk-offcanvas-bar .uk-h4,
.uk-offcanvas-bar h5,
.uk-offcanvas-bar .uk-h5,
.uk-offcanvas-bar h6,
.uk-offcanvas-bar .uk-h6,
.uk-offcanvas-bar .uk-heading-small,
.uk-offcanvas-bar .uk-heading-medium,
.uk-offcanvas-bar .uk-heading-large,
.uk-offcanvas-bar .uk-heading-xlarge,
.uk-offcanvas-bar .uk-heading-2xlarge {
    color: #fff;
}

.uk-light blockquote,
.uk-section-primary:not(.uk-preserve-color) blockquote,
.uk-section-secondary:not(.uk-preserve-color) blockquote,
.uk-tile-primary:not(.uk-preserve-color) blockquote,
.uk-tile-secondary:not(.uk-preserve-color) blockquote,
.uk-card-primary.uk-card-body blockquote,
.uk-card-primary> :not([class*='uk-card-media']) blockquote,
.uk-card-secondary.uk-card-body blockquote,
.uk-card-secondary> :not([class*='uk-card-media']) blockquote,
.uk-overlay-primary blockquote,
.uk-offcanvas-bar blockquote {
    color: #fff;
}

.uk-light blockquote footer,
.uk-section-primary:not(.uk-preserve-color) blockquote footer,
.uk-section-secondary:not(.uk-preserve-color) blockquote footer,
.uk-tile-primary:not(.uk-preserve-color) blockquote footer,
.uk-tile-secondary:not(.uk-preserve-color) blockquote footer,
.uk-card-primary.uk-card-body blockquote footer,
.uk-card-primary> :not([class*='uk-card-media']) blockquote footer,
.uk-card-secondary.uk-card-body blockquote footer,
.uk-card-secondary> :not([class*='uk-card-media']) blockquote footer,
.uk-overlay-primary blockquote footer,
.uk-offcanvas-bar blockquote footer {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light hr,
.uk-light .uk-hr,
.uk-section-primary:not(.uk-preserve-color) hr,
.uk-section-primary:not(.uk-preserve-color) .uk-hr,
.uk-section-secondary:not(.uk-preserve-color) hr,
.uk-section-secondary:not(.uk-preserve-color) .uk-hr,
.uk-tile-primary:not(.uk-preserve-color) hr,
.uk-tile-primary:not(.uk-preserve-color) .uk-hr,
.uk-tile-secondary:not(.uk-preserve-color) hr,
.uk-tile-secondary:not(.uk-preserve-color) .uk-hr,
.uk-card-primary.uk-card-body hr,
.uk-card-primary.uk-card-body .uk-hr,
.uk-card-primary> :not([class*='uk-card-media']) hr,
.uk-card-primary> :not([class*='uk-card-media']) .uk-hr,
.uk-card-secondary.uk-card-body hr,
.uk-card-secondary.uk-card-body .uk-hr,
.uk-card-secondary> :not([class*='uk-card-media']) hr,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-hr,
.uk-overlay-primary hr,
.uk-overlay-primary .uk-hr,
.uk-offcanvas-bar hr,
.uk-offcanvas-bar .uk-hr {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-light :focus-visible,
.uk-section-primary:not(.uk-preserve-color) :focus-visible,
.uk-section-secondary:not(.uk-preserve-color) :focus-visible,
.uk-tile-primary:not(.uk-preserve-color) :focus-visible,
.uk-tile-secondary:not(.uk-preserve-color) :focus-visible,
.uk-card-primary.uk-card-body :focus-visible,
.uk-card-primary> :not([class*='uk-card-media']) :focus-visible,
.uk-card-secondary.uk-card-body :focus-visible,
.uk-card-secondary> :not([class*='uk-card-media']) :focus-visible,
.uk-overlay-primary :focus-visible,
.uk-offcanvas-bar :focus-visible {
    outline-color: #fff;
}

.uk-light a.uk-link-muted,
.uk-light .uk-link-muted a,
.uk-section-primary:not(.uk-preserve-color) a.uk-link-muted,
.uk-section-primary:not(.uk-preserve-color) .uk-link-muted a,
.uk-section-secondary:not(.uk-preserve-color) a.uk-link-muted,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-muted a,
.uk-tile-primary:not(.uk-preserve-color) a.uk-link-muted,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-muted a,
.uk-tile-secondary:not(.uk-preserve-color) a.uk-link-muted,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-muted a,
.uk-card-primary.uk-card-body a.uk-link-muted,
.uk-card-primary.uk-card-body .uk-link-muted a,
.uk-card-primary> :not([class*='uk-card-media']) a.uk-link-muted,
.uk-card-primary> :not([class*='uk-card-media']) .uk-link-muted a,
.uk-card-secondary.uk-card-body a.uk-link-muted,
.uk-card-secondary.uk-card-body .uk-link-muted a,
.uk-card-secondary> :not([class*='uk-card-media']) a.uk-link-muted,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-link-muted a,
.uk-overlay-primary a.uk-link-muted,
.uk-overlay-primary .uk-link-muted a,
.uk-offcanvas-bar a.uk-link-muted,
.uk-offcanvas-bar .uk-link-muted a {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light a.uk-link-muted:hover,
.uk-light .uk-link-muted a:hover,
.uk-light .uk-link-toggle:hover .uk-link-muted,
.uk-section-primary:not(.uk-preserve-color) a.uk-link-muted:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-muted a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-muted,
.uk-section-secondary:not(.uk-preserve-color) a.uk-link-muted:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-muted a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-muted,
.uk-tile-primary:not(.uk-preserve-color) a.uk-link-muted:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-muted a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-muted,
.uk-tile-secondary:not(.uk-preserve-color) a.uk-link-muted:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-muted a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-muted,
.uk-card-primary.uk-card-body a.uk-link-muted:hover,
.uk-card-primary.uk-card-body .uk-link-muted a:hover,
.uk-card-primary.uk-card-body .uk-link-toggle:hover .uk-link-muted,
.uk-card-primary> :not([class*='uk-card-media']) a.uk-link-muted:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-link-muted a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-link-toggle:hover .uk-link-muted,
.uk-card-secondary.uk-card-body a.uk-link-muted:hover,
.uk-card-secondary.uk-card-body .uk-link-muted a:hover,
.uk-card-secondary.uk-card-body .uk-link-toggle:hover .uk-link-muted,
.uk-card-secondary> :not([class*='uk-card-media']) a.uk-link-muted:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-link-muted a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-link-toggle:hover .uk-link-muted,
.uk-overlay-primary a.uk-link-muted:hover,
.uk-overlay-primary .uk-link-muted a:hover,
.uk-overlay-primary .uk-link-toggle:hover .uk-link-muted,
.uk-offcanvas-bar a.uk-link-muted:hover,
.uk-offcanvas-bar .uk-link-muted a:hover,
.uk-offcanvas-bar .uk-link-toggle:hover .uk-link-muted {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light a.uk-link-text:hover,
.uk-light .uk-link-text a:hover,
.uk-light .uk-link-toggle:hover .uk-link-text,
.uk-section-primary:not(.uk-preserve-color) a.uk-link-text:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-text a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-text,
.uk-section-secondary:not(.uk-preserve-color) a.uk-link-text:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-text a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-text,
.uk-tile-primary:not(.uk-preserve-color) a.uk-link-text:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-text a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-text,
.uk-tile-secondary:not(.uk-preserve-color) a.uk-link-text:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-text a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-text,
.uk-card-primary.uk-card-body a.uk-link-text:hover,
.uk-card-primary.uk-card-body .uk-link-text a:hover,
.uk-card-primary.uk-card-body .uk-link-toggle:hover .uk-link-text,
.uk-card-primary> :not([class*='uk-card-media']) a.uk-link-text:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-link-text a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-link-toggle:hover .uk-link-text,
.uk-card-secondary.uk-card-body a.uk-link-text:hover,
.uk-card-secondary.uk-card-body .uk-link-text a:hover,
.uk-card-secondary.uk-card-body .uk-link-toggle:hover .uk-link-text,
.uk-card-secondary> :not([class*='uk-card-media']) a.uk-link-text:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-link-text a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-link-toggle:hover .uk-link-text,
.uk-overlay-primary a.uk-link-text:hover,
.uk-overlay-primary .uk-link-text a:hover,
.uk-overlay-primary .uk-link-toggle:hover .uk-link-text,
.uk-offcanvas-bar a.uk-link-text:hover,
.uk-offcanvas-bar .uk-link-text a:hover,
.uk-offcanvas-bar .uk-link-toggle:hover .uk-link-text {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light a.uk-link-heading:hover,
.uk-light .uk-link-heading a:hover,
.uk-light .uk-link-toggle:hover .uk-link-heading,
.uk-section-primary:not(.uk-preserve-color) a.uk-link-heading:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-heading a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-heading,
.uk-section-secondary:not(.uk-preserve-color) a.uk-link-heading:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-heading a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-heading,
.uk-tile-primary:not(.uk-preserve-color) a.uk-link-heading:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-heading a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-heading,
.uk-tile-secondary:not(.uk-preserve-color) a.uk-link-heading:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-heading a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-link-toggle:hover .uk-link-heading,
.uk-card-primary.uk-card-body a.uk-link-heading:hover,
.uk-card-primary.uk-card-body .uk-link-heading a:hover,
.uk-card-primary.uk-card-body .uk-link-toggle:hover .uk-link-heading,
.uk-card-primary> :not([class*='uk-card-media']) a.uk-link-heading:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-link-heading a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-link-toggle:hover .uk-link-heading,
.uk-card-secondary.uk-card-body a.uk-link-heading:hover,
.uk-card-secondary.uk-card-body .uk-link-heading a:hover,
.uk-card-secondary.uk-card-body .uk-link-toggle:hover .uk-link-heading,
.uk-card-secondary> :not([class*='uk-card-media']) a.uk-link-heading:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-link-heading a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-link-toggle:hover .uk-link-heading,
.uk-overlay-primary a.uk-link-heading:hover,
.uk-overlay-primary .uk-link-heading a:hover,
.uk-overlay-primary .uk-link-toggle:hover .uk-link-heading,
.uk-offcanvas-bar a.uk-link-heading:hover,
.uk-offcanvas-bar .uk-link-heading a:hover,
.uk-offcanvas-bar .uk-link-toggle:hover .uk-link-heading {
    color: #fff;
}

.uk-light .uk-heading-divider,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-divider,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-divider,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-divider,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-divider,
.uk-card-primary.uk-card-body .uk-heading-divider,
.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-divider,
.uk-card-secondary.uk-card-body .uk-heading-divider,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-divider,
.uk-overlay-primary .uk-heading-divider,
.uk-offcanvas-bar .uk-heading-divider {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-heading-bullet::before,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-bullet::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-bullet::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-bullet::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-bullet::before,
.uk-card-primary.uk-card-body .uk-heading-bullet::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-bullet::before,
.uk-card-secondary.uk-card-body .uk-heading-bullet::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-bullet::before,
.uk-overlay-primary .uk-heading-bullet::before,
.uk-offcanvas-bar .uk-heading-bullet::before {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-heading-line> ::before,
.uk-light .uk-heading-line> ::after,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-line> ::before,
.uk-section-primary:not(.uk-preserve-color) .uk-heading-line> ::after,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-line> ::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-heading-line> ::after,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-line> ::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-heading-line> ::after,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-line> ::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-line> ::after,
.uk-card-primary.uk-card-body .uk-heading-line> ::before,
.uk-card-primary.uk-card-body .uk-heading-line> ::after,
.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-line> ::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-heading-line> ::after,
.uk-card-secondary.uk-card-body .uk-heading-line> ::before,
.uk-card-secondary.uk-card-body .uk-heading-line> ::after,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-line> ::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-heading-line> ::after,
.uk-overlay-primary .uk-heading-line> ::before,
.uk-overlay-primary .uk-heading-line> ::after,
.uk-offcanvas-bar .uk-heading-line> ::before,
.uk-offcanvas-bar .uk-heading-line> ::after {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-divider-icon,
.uk-section-primary:not(.uk-preserve-color) .uk-divider-icon,
.uk-section-secondary:not(.uk-preserve-color) .uk-divider-icon,
.uk-tile-primary:not(.uk-preserve-color) .uk-divider-icon,
.uk-tile-secondary:not(.uk-preserve-color) .uk-divider-icon,
.uk-card-primary.uk-card-body .uk-divider-icon,
.uk-card-primary> :not([class*='uk-card-media']) .uk-divider-icon,
.uk-card-secondary.uk-card-body .uk-divider-icon,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-divider-icon,
.uk-overlay-primary .uk-divider-icon,
.uk-offcanvas-bar .uk-divider-icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22rgba%28255,%20255,%20255,%200.2%29%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-light .uk-divider-icon::before,
.uk-light .uk-divider-icon::after,
.uk-section-primary:not(.uk-preserve-color) .uk-divider-icon::before,
.uk-section-primary:not(.uk-preserve-color) .uk-divider-icon::after,
.uk-section-secondary:not(.uk-preserve-color) .uk-divider-icon::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-divider-icon::after,
.uk-tile-primary:not(.uk-preserve-color) .uk-divider-icon::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-divider-icon::after,
.uk-tile-secondary:not(.uk-preserve-color) .uk-divider-icon::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-divider-icon::after,
.uk-card-primary.uk-card-body .uk-divider-icon::before,
.uk-card-primary.uk-card-body .uk-divider-icon::after,
.uk-card-primary> :not([class*='uk-card-media']) .uk-divider-icon::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-divider-icon::after,
.uk-card-secondary.uk-card-body .uk-divider-icon::before,
.uk-card-secondary.uk-card-body .uk-divider-icon::after,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-divider-icon::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-divider-icon::after,
.uk-overlay-primary .uk-divider-icon::before,
.uk-overlay-primary .uk-divider-icon::after,
.uk-offcanvas-bar .uk-divider-icon::before,
.uk-offcanvas-bar .uk-divider-icon::after {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-divider-small::after,
.uk-section-primary:not(.uk-preserve-color) .uk-divider-small::after,
.uk-section-secondary:not(.uk-preserve-color) .uk-divider-small::after,
.uk-tile-primary:not(.uk-preserve-color) .uk-divider-small::after,
.uk-tile-secondary:not(.uk-preserve-color) .uk-divider-small::after,
.uk-card-primary.uk-card-body .uk-divider-small::after,
.uk-card-primary> :not([class*='uk-card-media']) .uk-divider-small::after,
.uk-card-secondary.uk-card-body .uk-divider-small::after,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-divider-small::after,
.uk-overlay-primary .uk-divider-small::after,
.uk-offcanvas-bar .uk-divider-small::after {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-divider-vertical,
.uk-section-primary:not(.uk-preserve-color) .uk-divider-vertical,
.uk-section-secondary:not(.uk-preserve-color) .uk-divider-vertical,
.uk-tile-primary:not(.uk-preserve-color) .uk-divider-vertical,
.uk-tile-secondary:not(.uk-preserve-color) .uk-divider-vertical,
.uk-card-primary.uk-card-body .uk-divider-vertical,
.uk-card-primary> :not([class*='uk-card-media']) .uk-divider-vertical,
.uk-card-secondary.uk-card-body .uk-divider-vertical,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-divider-vertical,
.uk-overlay-primary .uk-divider-vertical,
.uk-offcanvas-bar .uk-divider-vertical {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-list-muted> ::before,
.uk-section-primary:not(.uk-preserve-color) .uk-list-muted> ::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-list-muted> ::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-list-muted> ::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-muted> ::before,
.uk-card-primary.uk-card-body .uk-list-muted> ::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-list-muted> ::before,
.uk-card-secondary.uk-card-body .uk-list-muted> ::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-list-muted> ::before,
.uk-overlay-primary .uk-list-muted> ::before,
.uk-offcanvas-bar .uk-list-muted> ::before {
    color: rgba(255, 255, 255, 0.5) !important;
}

.uk-light .uk-list-emphasis> ::before,
.uk-section-primary:not(.uk-preserve-color) .uk-list-emphasis> ::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-list-emphasis> ::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-list-emphasis> ::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-emphasis> ::before,
.uk-card-primary.uk-card-body .uk-list-emphasis> ::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-list-emphasis> ::before,
.uk-card-secondary.uk-card-body .uk-list-emphasis> ::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-list-emphasis> ::before,
.uk-overlay-primary .uk-list-emphasis> ::before,
.uk-offcanvas-bar .uk-list-emphasis> ::before {
    color: #fff !important;
}

.uk-light .uk-list-primary> ::before,
.uk-section-primary:not(.uk-preserve-color) .uk-list-primary> ::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-list-primary> ::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-list-primary> ::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-primary> ::before,
.uk-card-primary.uk-card-body .uk-list-primary> ::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-list-primary> ::before,
.uk-card-secondary.uk-card-body .uk-list-primary> ::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-list-primary> ::before,
.uk-overlay-primary .uk-list-primary> ::before,
.uk-offcanvas-bar .uk-list-primary> ::before {
    color: #fff !important;
}

.uk-light .uk-list-secondary> ::before,
.uk-section-primary:not(.uk-preserve-color) .uk-list-secondary> ::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-list-secondary> ::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-list-secondary> ::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-secondary> ::before,
.uk-card-primary.uk-card-body .uk-list-secondary> ::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-list-secondary> ::before,
.uk-card-secondary.uk-card-body .uk-list-secondary> ::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-list-secondary> ::before,
.uk-overlay-primary .uk-list-secondary> ::before,
.uk-offcanvas-bar .uk-list-secondary> ::before {
    color: #fff !important;
}

.uk-light .uk-list-bullet> ::before,
.uk-section-primary:not(.uk-preserve-color) .uk-list-bullet> ::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-list-bullet> ::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-list-bullet> ::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-bullet> ::before,
.uk-card-primary.uk-card-body .uk-list-bullet> ::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-list-bullet> ::before,
.uk-card-secondary.uk-card-body .uk-list-bullet> ::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-list-bullet> ::before,
.uk-overlay-primary .uk-list-bullet> ::before,
.uk-offcanvas-bar .uk-list-bullet> ::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-light .uk-list-divider> :nth-child(n+2),
.uk-section-primary:not(.uk-preserve-color) .uk-list-divider> :nth-child(n+2),
.uk-section-secondary:not(.uk-preserve-color) .uk-list-divider> :nth-child(n+2),
.uk-tile-primary:not(.uk-preserve-color) .uk-list-divider> :nth-child(n+2),
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-divider> :nth-child(n+2),
.uk-card-primary.uk-card-body .uk-list-divider> :nth-child(n+2),
.uk-card-primary> :not([class*='uk-card-media']) .uk-list-divider> :nth-child(n+2),
.uk-card-secondary.uk-card-body .uk-list-divider> :nth-child(n+2),
.uk-card-secondary> :not([class*='uk-card-media']) .uk-list-divider> :nth-child(n+2),
.uk-overlay-primary .uk-list-divider> :nth-child(n+2),
.uk-offcanvas-bar .uk-list-divider> :nth-child(n+2) {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-list-striped>*:nth-of-type(odd),
.uk-section-primary:not(.uk-preserve-color) .uk-list-striped>*:nth-of-type(odd),
.uk-section-secondary:not(.uk-preserve-color) .uk-list-striped>*:nth-of-type(odd),
.uk-tile-primary:not(.uk-preserve-color) .uk-list-striped>*:nth-of-type(odd),
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-striped>*:nth-of-type(odd),
.uk-card-primary.uk-card-body .uk-list-striped>*:nth-of-type(odd),
.uk-card-primary> :not([class*='uk-card-media']) .uk-list-striped>*:nth-of-type(odd),
.uk-card-secondary.uk-card-body .uk-list-striped>*:nth-of-type(odd),
.uk-card-secondary> :not([class*='uk-card-media']) .uk-list-striped>*:nth-of-type(odd),
.uk-overlay-primary .uk-list-striped>*:nth-of-type(odd),
.uk-offcanvas-bar .uk-list-striped>*:nth-of-type(odd) {
    border-top-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-list-striped> :nth-of-type(odd),
.uk-section-primary:not(.uk-preserve-color) .uk-list-striped> :nth-of-type(odd),
.uk-section-secondary:not(.uk-preserve-color) .uk-list-striped> :nth-of-type(odd),
.uk-tile-primary:not(.uk-preserve-color) .uk-list-striped> :nth-of-type(odd),
.uk-tile-secondary:not(.uk-preserve-color) .uk-list-striped> :nth-of-type(odd),
.uk-card-primary.uk-card-body .uk-list-striped> :nth-of-type(odd),
.uk-card-primary> :not([class*='uk-card-media']) .uk-list-striped> :nth-of-type(odd),
.uk-card-secondary.uk-card-body .uk-list-striped> :nth-of-type(odd),
.uk-card-secondary> :not([class*='uk-card-media']) .uk-list-striped> :nth-of-type(odd),
.uk-overlay-primary .uk-list-striped> :nth-of-type(odd),
.uk-offcanvas-bar .uk-list-striped> :nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.1);
}

.uk-light .uk-table th,
.uk-section-primary:not(.uk-preserve-color) .uk-table th,
.uk-section-secondary:not(.uk-preserve-color) .uk-table th,
.uk-tile-primary:not(.uk-preserve-color) .uk-table th,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table th,
.uk-card-primary.uk-card-body .uk-table th,
.uk-card-primary> :not([class*='uk-card-media']) .uk-table th,
.uk-card-secondary.uk-card-body .uk-table th,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table th,
.uk-overlay-primary .uk-table th,
.uk-offcanvas-bar .uk-table th {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-table caption,
.uk-section-primary:not(.uk-preserve-color) .uk-table caption,
.uk-section-secondary:not(.uk-preserve-color) .uk-table caption,
.uk-tile-primary:not(.uk-preserve-color) .uk-table caption,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table caption,
.uk-card-primary.uk-card-body .uk-table caption,
.uk-card-primary> :not([class*='uk-card-media']) .uk-table caption,
.uk-card-secondary.uk-card-body .uk-table caption,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table caption,
.uk-overlay-primary .uk-table caption,
.uk-offcanvas-bar .uk-table caption {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-table>tr.uk-active,
.uk-light .uk-table tbody tr.uk-active,
.uk-section-primary:not(.uk-preserve-color) .uk-table>tr.uk-active,
.uk-section-primary:not(.uk-preserve-color) .uk-table tbody tr.uk-active,
.uk-section-secondary:not(.uk-preserve-color) .uk-table>tr.uk-active,
.uk-section-secondary:not(.uk-preserve-color) .uk-table tbody tr.uk-active,
.uk-tile-primary:not(.uk-preserve-color) .uk-table>tr.uk-active,
.uk-tile-primary:not(.uk-preserve-color) .uk-table tbody tr.uk-active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table>tr.uk-active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table tbody tr.uk-active,
.uk-card-primary.uk-card-body .uk-table>tr.uk-active,
.uk-card-primary.uk-card-body .uk-table tbody tr.uk-active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-table>tr.uk-active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-table tbody tr.uk-active,
.uk-card-secondary.uk-card-body .uk-table>tr.uk-active,
.uk-card-secondary.uk-card-body .uk-table tbody tr.uk-active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table>tr.uk-active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table tbody tr.uk-active,
.uk-overlay-primary .uk-table>tr.uk-active,
.uk-overlay-primary .uk-table tbody tr.uk-active,
.uk-offcanvas-bar .uk-table>tr.uk-active,
.uk-offcanvas-bar .uk-table tbody tr.uk-active {
    background: rgba(255, 255, 255, 0.08);
}

.uk-light .uk-table-divider>tr:not(:first-child),
.uk-light .uk-table-divider> :not(:first-child)>tr,
.uk-light .uk-table-divider> :first-child>tr:not(:first-child),
.uk-section-primary:not(.uk-preserve-color) .uk-table-divider>tr:not(:first-child),
.uk-section-primary:not(.uk-preserve-color) .uk-table-divider> :not(:first-child)>tr,
.uk-section-primary:not(.uk-preserve-color) .uk-table-divider> :first-child>tr:not(:first-child),
.uk-section-secondary:not(.uk-preserve-color) .uk-table-divider>tr:not(:first-child),
.uk-section-secondary:not(.uk-preserve-color) .uk-table-divider> :not(:first-child)>tr,
.uk-section-secondary:not(.uk-preserve-color) .uk-table-divider> :first-child>tr:not(:first-child),
.uk-tile-primary:not(.uk-preserve-color) .uk-table-divider>tr:not(:first-child),
.uk-tile-primary:not(.uk-preserve-color) .uk-table-divider> :not(:first-child)>tr,
.uk-tile-primary:not(.uk-preserve-color) .uk-table-divider> :first-child>tr:not(:first-child),
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-divider>tr:not(:first-child),
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-divider> :not(:first-child)>tr,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-divider> :first-child>tr:not(:first-child),
.uk-card-primary.uk-card-body .uk-table-divider>tr:not(:first-child),
.uk-card-primary.uk-card-body .uk-table-divider> :not(:first-child)>tr,
.uk-card-primary.uk-card-body .uk-table-divider> :first-child>tr:not(:first-child),
.uk-card-primary> :not([class*='uk-card-media']) .uk-table-divider>tr:not(:first-child),
.uk-card-primary> :not([class*='uk-card-media']) .uk-table-divider> :not(:first-child)>tr,
.uk-card-primary> :not([class*='uk-card-media']) .uk-table-divider> :first-child>tr:not(:first-child),
.uk-card-secondary.uk-card-body .uk-table-divider>tr:not(:first-child),
.uk-card-secondary.uk-card-body .uk-table-divider> :not(:first-child)>tr,
.uk-card-secondary.uk-card-body .uk-table-divider> :first-child>tr:not(:first-child),
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table-divider>tr:not(:first-child),
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table-divider> :not(:first-child)>tr,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table-divider> :first-child>tr:not(:first-child),
.uk-overlay-primary .uk-table-divider>tr:not(:first-child),
.uk-overlay-primary .uk-table-divider> :not(:first-child)>tr,
.uk-overlay-primary .uk-table-divider> :first-child>tr:not(:first-child),
.uk-offcanvas-bar .uk-table-divider>tr:not(:first-child),
.uk-offcanvas-bar .uk-table-divider> :not(:first-child)>tr,
.uk-offcanvas-bar .uk-table-divider> :first-child>tr:not(:first-child) {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-table-striped>tr:nth-of-type(odd),
.uk-light .uk-table-striped tbody tr:nth-of-type(odd),
.uk-section-primary:not(.uk-preserve-color) .uk-table-striped>tr:nth-of-type(odd),
.uk-section-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd),
.uk-section-secondary:not(.uk-preserve-color) .uk-table-striped>tr:nth-of-type(odd),
.uk-section-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd),
.uk-tile-primary:not(.uk-preserve-color) .uk-table-striped>tr:nth-of-type(odd),
.uk-tile-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd),
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped>tr:nth-of-type(odd),
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd),
.uk-card-primary.uk-card-body .uk-table-striped>tr:nth-of-type(odd),
.uk-card-primary.uk-card-body .uk-table-striped tbody tr:nth-of-type(odd),
.uk-card-primary> :not([class*='uk-card-media']) .uk-table-striped>tr:nth-of-type(odd),
.uk-card-primary> :not([class*='uk-card-media']) .uk-table-striped tbody tr:nth-of-type(odd),
.uk-card-secondary.uk-card-body .uk-table-striped>tr:nth-of-type(odd),
.uk-card-secondary.uk-card-body .uk-table-striped tbody tr:nth-of-type(odd),
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table-striped>tr:nth-of-type(odd),
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table-striped tbody tr:nth-of-type(odd),
.uk-overlay-primary .uk-table-striped>tr:nth-of-type(odd),
.uk-overlay-primary .uk-table-striped tbody tr:nth-of-type(odd),
.uk-offcanvas-bar .uk-table-striped>tr:nth-of-type(odd),
.uk-offcanvas-bar .uk-table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-table-hover>tr:hover,
.uk-light .uk-table-hover tbody tr:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-table-hover>tr:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-table-hover tbody tr:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-table-hover>tr:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-table-hover tbody tr:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-table-hover>tr:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-table-hover tbody tr:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-hover>tr:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-hover tbody tr:hover,
.uk-card-primary.uk-card-body .uk-table-hover>tr:hover,
.uk-card-primary.uk-card-body .uk-table-hover tbody tr:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-table-hover>tr:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-table-hover tbody tr:hover,
.uk-card-secondary.uk-card-body .uk-table-hover>tr:hover,
.uk-card-secondary.uk-card-body .uk-table-hover tbody tr:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table-hover>tr:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table-hover tbody tr:hover,
.uk-overlay-primary .uk-table-hover>tr:hover,
.uk-overlay-primary .uk-table-hover tbody tr:hover,
.uk-offcanvas-bar .uk-table-hover>tr:hover,
.uk-offcanvas-bar .uk-table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
}

.uk-light .uk-icon-link,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-link,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-link,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-link,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link,
.uk-card-primary.uk-card-body .uk-icon-link,
.uk-card-primary> :not([class*='uk-card-media']) .uk-icon-link,
.uk-card-secondary.uk-card-body .uk-icon-link,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-icon-link,
.uk-overlay-primary .uk-icon-link,
.uk-offcanvas-bar .uk-icon-link {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-icon-link:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-link:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-link:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-link:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link:hover,
.uk-card-primary.uk-card-body .uk-icon-link:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-icon-link:hover,
.uk-card-secondary.uk-card-body .uk-icon-link:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-icon-link:hover,
.uk-overlay-primary .uk-icon-link:hover,
.uk-offcanvas-bar .uk-icon-link:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-icon-link:active,
.uk-light .uk-active>.uk-icon-link,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-link:active,
.uk-section-primary:not(.uk-preserve-color) .uk-active>.uk-icon-link,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-link:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-active>.uk-icon-link,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-link:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-active>.uk-icon-link,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-link:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-active>.uk-icon-link,
.uk-card-primary.uk-card-body .uk-icon-link:active,
.uk-card-primary.uk-card-body .uk-active>.uk-icon-link,
.uk-card-primary> :not([class*='uk-card-media']) .uk-icon-link:active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-active>.uk-icon-link,
.uk-card-secondary.uk-card-body .uk-icon-link:active,
.uk-card-secondary.uk-card-body .uk-active>.uk-icon-link,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-icon-link:active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-active>.uk-icon-link,
.uk-overlay-primary .uk-icon-link:active,
.uk-overlay-primary .uk-active>.uk-icon-link,
.uk-offcanvas-bar .uk-icon-link:active,
.uk-offcanvas-bar .uk-active>.uk-icon-link {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-icon-button,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-button,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-button,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-button,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button,
.uk-card-primary.uk-card-body .uk-icon-button,
.uk-card-primary> :not([class*='uk-card-media']) .uk-icon-button,
.uk-card-secondary.uk-card-body .uk-icon-button,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-icon-button,
.uk-overlay-primary .uk-icon-button,
.uk-offcanvas-bar .uk-icon-button {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-icon-button:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-button:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-button:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-button:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button:hover,
.uk-card-primary.uk-card-body .uk-icon-button:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-icon-button:hover,
.uk-card-secondary.uk-card-body .uk-icon-button:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-icon-button:hover,
.uk-overlay-primary .uk-icon-button:hover,
.uk-offcanvas-bar .uk-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-icon-button:active,
.uk-section-primary:not(.uk-preserve-color) .uk-icon-button:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-icon-button:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-icon-button:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-button:active,
.uk-card-primary.uk-card-body .uk-icon-button:active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-icon-button:active,
.uk-card-secondary.uk-card-body .uk-icon-button:active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-icon-button:active,
.uk-overlay-primary .uk-icon-button:active,
.uk-offcanvas-bar .uk-icon-button:active {
    background-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-input,
.uk-light .uk-select,
.uk-light .uk-textarea,
.uk-section-primary:not(.uk-preserve-color) .uk-input,
.uk-section-primary:not(.uk-preserve-color) .uk-select,
.uk-section-primary:not(.uk-preserve-color) .uk-textarea,
.uk-section-secondary:not(.uk-preserve-color) .uk-input,
.uk-section-secondary:not(.uk-preserve-color) .uk-select,
.uk-section-secondary:not(.uk-preserve-color) .uk-textarea,
.uk-tile-primary:not(.uk-preserve-color) .uk-input,
.uk-tile-primary:not(.uk-preserve-color) .uk-select,
.uk-tile-primary:not(.uk-preserve-color) .uk-textarea,
.uk-tile-secondary:not(.uk-preserve-color) .uk-input,
.uk-tile-secondary:not(.uk-preserve-color) .uk-select,
.uk-tile-secondary:not(.uk-preserve-color) .uk-textarea,
.uk-card-primary.uk-card-body .uk-input,
.uk-card-primary.uk-card-body .uk-select,
.uk-card-primary.uk-card-body .uk-textarea,
.uk-card-primary> :not([class*='uk-card-media']) .uk-input,
.uk-card-primary> :not([class*='uk-card-media']) .uk-select,
.uk-card-primary> :not([class*='uk-card-media']) .uk-textarea,
.uk-card-secondary.uk-card-body .uk-input,
.uk-card-secondary.uk-card-body .uk-select,
.uk-card-secondary.uk-card-body .uk-textarea,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-input,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-select,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-textarea,
.uk-overlay-primary .uk-input,
.uk-overlay-primary .uk-select,
.uk-overlay-primary .uk-textarea,
.uk-offcanvas-bar .uk-input,
.uk-offcanvas-bar .uk-select,
.uk-offcanvas-bar .uk-textarea {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    background-clip: padding-box;
    border-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-input:focus,
.uk-light .uk-select:focus,
.uk-light .uk-textarea:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-input:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-select:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-textarea:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-input:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-select:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-textarea:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-input:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-select:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-textarea:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-input:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-select:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-textarea:focus,
.uk-card-primary.uk-card-body .uk-input:focus,
.uk-card-primary.uk-card-body .uk-select:focus,
.uk-card-primary.uk-card-body .uk-textarea:focus,
.uk-card-primary> :not([class*='uk-card-media']) .uk-input:focus,
.uk-card-primary> :not([class*='uk-card-media']) .uk-select:focus,
.uk-card-primary> :not([class*='uk-card-media']) .uk-textarea:focus,
.uk-card-secondary.uk-card-body .uk-input:focus,
.uk-card-secondary.uk-card-body .uk-select:focus,
.uk-card-secondary.uk-card-body .uk-textarea:focus,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-input:focus,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-select:focus,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-textarea:focus,
.uk-overlay-primary .uk-input:focus,
.uk-overlay-primary .uk-select:focus,
.uk-overlay-primary .uk-textarea:focus,
.uk-offcanvas-bar .uk-input:focus,
.uk-offcanvas-bar .uk-select:focus,
.uk-offcanvas-bar .uk-textarea:focus {
    background-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-input::-moz-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-input::-moz-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-input::-moz-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-input::-moz-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-input::-moz-placeholder, .uk-card-primary.uk-card-body .uk-input::-moz-placeholder, .uk-card-primary> :not([class*='uk-card-media']) .uk-input::-moz-placeholder, .uk-card-secondary.uk-card-body .uk-input::-moz-placeholder, .uk-card-secondary> :not([class*='uk-card-media']) .uk-input::-moz-placeholder, .uk-overlay-primary .uk-input::-moz-placeholder, .uk-offcanvas-bar .uk-input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-input::placeholder,
.uk-section-primary:not(.uk-preserve-color) .uk-input::placeholder,
.uk-section-secondary:not(.uk-preserve-color) .uk-input::placeholder,
.uk-tile-primary:not(.uk-preserve-color) .uk-input::placeholder,
.uk-tile-secondary:not(.uk-preserve-color) .uk-input::placeholder,
.uk-card-primary.uk-card-body .uk-input::placeholder,
.uk-card-primary> :not([class*='uk-card-media']) .uk-input::placeholder,
.uk-card-secondary.uk-card-body .uk-input::placeholder,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-input::placeholder,
.uk-overlay-primary .uk-input::placeholder,
.uk-offcanvas-bar .uk-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-textarea::-moz-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-textarea::-moz-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-textarea::-moz-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-textarea::-moz-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-textarea::-moz-placeholder, .uk-card-primary.uk-card-body .uk-textarea::-moz-placeholder, .uk-card-primary> :not([class*='uk-card-media']) .uk-textarea::-moz-placeholder, .uk-card-secondary.uk-card-body .uk-textarea::-moz-placeholder, .uk-card-secondary> :not([class*='uk-card-media']) .uk-textarea::-moz-placeholder, .uk-overlay-primary .uk-textarea::-moz-placeholder, .uk-offcanvas-bar .uk-textarea::-moz-placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-textarea::placeholder,
.uk-section-primary:not(.uk-preserve-color) .uk-textarea::placeholder,
.uk-section-secondary:not(.uk-preserve-color) .uk-textarea::placeholder,
.uk-tile-primary:not(.uk-preserve-color) .uk-textarea::placeholder,
.uk-tile-secondary:not(.uk-preserve-color) .uk-textarea::placeholder,
.uk-card-primary.uk-card-body .uk-textarea::placeholder,
.uk-card-primary> :not([class*='uk-card-media']) .uk-textarea::placeholder,
.uk-card-secondary.uk-card-body .uk-textarea::placeholder,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-textarea::placeholder,
.uk-overlay-primary .uk-textarea::placeholder,
.uk-offcanvas-bar .uk-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-select:not([multiple]):not([size]),
.uk-section-primary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]),
.uk-section-secondary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]),
.uk-tile-primary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]),
.uk-tile-secondary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]),
.uk-card-primary.uk-card-body .uk-select:not([multiple]):not([size]),
.uk-card-primary> :not([class*='uk-card-media']) .uk-select:not([multiple]):not([size]),
.uk-card-secondary.uk-card-body .uk-select:not([multiple]):not([size]),
.uk-card-secondary> :not([class*='uk-card-media']) .uk-select:not([multiple]):not([size]),
.uk-overlay-primary .uk-select:not([multiple]):not([size]),
.uk-offcanvas-bar .uk-select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-light .uk-input[list]:hover,
.uk-light .uk-input[list]:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-input[list]:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-input[list]:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-input[list]:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-input[list]:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-input[list]:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-input[list]:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-input[list]:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-input[list]:focus,
.uk-card-primary.uk-card-body .uk-input[list]:hover,
.uk-card-primary.uk-card-body .uk-input[list]:focus,
.uk-card-primary> :not([class*='uk-card-media']) .uk-input[list]:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-input[list]:focus,
.uk-card-secondary.uk-card-body .uk-input[list]:hover,
.uk-card-secondary.uk-card-body .uk-input[list]:focus,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-input[list]:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-input[list]:focus,
.uk-overlay-primary .uk-input[list]:hover,
.uk-overlay-primary .uk-input[list]:focus,
.uk-offcanvas-bar .uk-input[list]:hover,
.uk-offcanvas-bar .uk-input[list]:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-light .uk-radio,
.uk-light .uk-checkbox,
.uk-section-primary:not(.uk-preserve-color) .uk-radio,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox,
.uk-section-secondary:not(.uk-preserve-color) .uk-radio,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox,
.uk-tile-primary:not(.uk-preserve-color) .uk-radio,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox,
.uk-tile-secondary:not(.uk-preserve-color) .uk-radio,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox,
.uk-card-primary.uk-card-body .uk-radio,
.uk-card-primary.uk-card-body .uk-checkbox,
.uk-card-primary> :not([class*='uk-card-media']) .uk-radio,
.uk-card-primary> :not([class*='uk-card-media']) .uk-checkbox,
.uk-card-secondary.uk-card-body .uk-radio,
.uk-card-secondary.uk-card-body .uk-checkbox,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-radio,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-checkbox,
.uk-overlay-primary .uk-radio,
.uk-overlay-primary .uk-checkbox,
.uk-offcanvas-bar .uk-radio,
.uk-offcanvas-bar .uk-checkbox {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-radio:focus,
.uk-light .uk-checkbox:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-radio:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-radio:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-radio:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-radio:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:focus,
.uk-card-primary.uk-card-body .uk-radio:focus,
.uk-card-primary.uk-card-body .uk-checkbox:focus,
.uk-card-primary> :not([class*='uk-card-media']) .uk-radio:focus,
.uk-card-primary> :not([class*='uk-card-media']) .uk-checkbox:focus,
.uk-card-secondary.uk-card-body .uk-radio:focus,
.uk-card-secondary.uk-card-body .uk-checkbox:focus,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-radio:focus,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-checkbox:focus,
.uk-overlay-primary .uk-radio:focus,
.uk-overlay-primary .uk-checkbox:focus,
.uk-offcanvas-bar .uk-radio:focus,
.uk-offcanvas-bar .uk-checkbox:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-radio:checked,
.uk-light .uk-checkbox:checked,
.uk-light .uk-checkbox:indeterminate,
.uk-section-primary:not(.uk-preserve-color) .uk-radio:checked,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-section-secondary:not(.uk-preserve-color) .uk-radio:checked,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-tile-primary:not(.uk-preserve-color) .uk-radio:checked,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-tile-secondary:not(.uk-preserve-color) .uk-radio:checked,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-card-primary.uk-card-body .uk-radio:checked,
.uk-card-primary.uk-card-body .uk-checkbox:checked,
.uk-card-primary.uk-card-body .uk-checkbox:indeterminate,
.uk-card-primary> :not([class*='uk-card-media']) .uk-radio:checked,
.uk-card-primary> :not([class*='uk-card-media']) .uk-checkbox:checked,
.uk-card-primary> :not([class*='uk-card-media']) .uk-checkbox:indeterminate,
.uk-card-secondary.uk-card-body .uk-radio:checked,
.uk-card-secondary.uk-card-body .uk-checkbox:checked,
.uk-card-secondary.uk-card-body .uk-checkbox:indeterminate,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-radio:checked,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-checkbox:checked,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-checkbox:indeterminate,
.uk-overlay-primary .uk-radio:checked,
.uk-overlay-primary .uk-checkbox:checked,
.uk-overlay-primary .uk-checkbox:indeterminate,
.uk-offcanvas-bar .uk-radio:checked,
.uk-offcanvas-bar .uk-checkbox:checked,
.uk-offcanvas-bar .uk-checkbox:indeterminate {
    background-color: #fff;
    border-color: #fff;
}

.uk-light .uk-radio:checked:focus,
.uk-light .uk-checkbox:checked:focus,
.uk-light .uk-checkbox:indeterminate:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-radio:checked:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:checked:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-radio:checked:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:checked:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-radio:checked:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:checked:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-radio:checked:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:checked:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate:focus,
.uk-card-primary.uk-card-body .uk-radio:checked:focus,
.uk-card-primary.uk-card-body .uk-checkbox:checked:focus,
.uk-card-primary.uk-card-body .uk-checkbox:indeterminate:focus,
.uk-card-primary> :not([class*='uk-card-media']) .uk-radio:checked:focus,
.uk-card-primary> :not([class*='uk-card-media']) .uk-checkbox:checked:focus,
.uk-card-primary> :not([class*='uk-card-media']) .uk-checkbox:indeterminate:focus,
.uk-card-secondary.uk-card-body .uk-radio:checked:focus,
.uk-card-secondary.uk-card-body .uk-checkbox:checked:focus,
.uk-card-secondary.uk-card-body .uk-checkbox:indeterminate:focus,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-radio:checked:focus,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-checkbox:checked:focus,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-checkbox:indeterminate:focus,
.uk-overlay-primary .uk-radio:checked:focus,
.uk-overlay-primary .uk-checkbox:checked:focus,
.uk-overlay-primary .uk-checkbox:indeterminate:focus,
.uk-offcanvas-bar .uk-radio:checked:focus,
.uk-offcanvas-bar .uk-checkbox:checked:focus,
.uk-offcanvas-bar .uk-checkbox:indeterminate:focus {
    background-color: #ffffff;
}

.uk-light .uk-radio:checked,
.uk-section-primary:not(.uk-preserve-color) .uk-radio:checked,
.uk-section-secondary:not(.uk-preserve-color) .uk-radio:checked,
.uk-tile-primary:not(.uk-preserve-color) .uk-radio:checked,
.uk-tile-secondary:not(.uk-preserve-color) .uk-radio:checked,
.uk-card-primary.uk-card-body .uk-radio:checked,
.uk-card-primary> :not([class*='uk-card-media']) .uk-radio:checked,
.uk-card-secondary.uk-card-body .uk-radio:checked,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-radio:checked,
.uk-overlay-primary .uk-radio:checked,
.uk-offcanvas-bar .uk-radio:checked {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23666%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-light .uk-checkbox:checked,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:checked,
.uk-card-primary.uk-card-body .uk-checkbox:checked,
.uk-card-primary> :not([class*='uk-card-media']) .uk-checkbox:checked,
.uk-card-secondary.uk-card-body .uk-checkbox:checked,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-checkbox:checked,
.uk-overlay-primary .uk-checkbox:checked,
.uk-offcanvas-bar .uk-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
}

.uk-light .uk-checkbox:indeterminate,
.uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-section-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-tile-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-tile-secondary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
.uk-card-primary.uk-card-body .uk-checkbox:indeterminate,
.uk-card-primary> :not([class*='uk-card-media']) .uk-checkbox:indeterminate,
.uk-card-secondary.uk-card-body .uk-checkbox:indeterminate,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-checkbox:indeterminate,
.uk-overlay-primary .uk-checkbox:indeterminate,
.uk-offcanvas-bar .uk-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-light .uk-form-label,
.uk-section-primary:not(.uk-preserve-color) .uk-form-label,
.uk-section-secondary:not(.uk-preserve-color) .uk-form-label,
.uk-tile-primary:not(.uk-preserve-color) .uk-form-label,
.uk-tile-secondary:not(.uk-preserve-color) .uk-form-label,
.uk-card-primary.uk-card-body .uk-form-label,
.uk-card-primary> :not([class*='uk-card-media']) .uk-form-label,
.uk-card-secondary.uk-card-body .uk-form-label,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-form-label,
.uk-overlay-primary .uk-form-label,
.uk-offcanvas-bar .uk-form-label {
    color: #fff;
}

.uk-light .uk-form-icon,
.uk-section-primary:not(.uk-preserve-color) .uk-form-icon,
.uk-section-secondary:not(.uk-preserve-color) .uk-form-icon,
.uk-tile-primary:not(.uk-preserve-color) .uk-form-icon,
.uk-tile-secondary:not(.uk-preserve-color) .uk-form-icon,
.uk-card-primary.uk-card-body .uk-form-icon,
.uk-card-primary> :not([class*='uk-card-media']) .uk-form-icon,
.uk-card-secondary.uk-card-body .uk-form-icon,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-form-icon,
.uk-overlay-primary .uk-form-icon,
.uk-offcanvas-bar .uk-form-icon {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-form-icon:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-form-icon:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-form-icon:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-form-icon:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-form-icon:hover,
.uk-card-primary.uk-card-body .uk-form-icon:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-form-icon:hover,
.uk-card-secondary.uk-card-body .uk-form-icon:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-form-icon:hover,
.uk-overlay-primary .uk-form-icon:hover,
.uk-offcanvas-bar .uk-form-icon:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-button-default,
.uk-section-primary:not(.uk-preserve-color) .uk-button-default,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-default,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default,
.uk-card-primary.uk-card-body .uk-button-default,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-default,
.uk-card-secondary.uk-card-body .uk-button-default,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-default,
.uk-overlay-primary .uk-button-default,
.uk-offcanvas-bar .uk-button-default {
    background-color: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-button-default:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-default:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-default:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default:hover,
.uk-card-primary.uk-card-body .uk-button-default:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-default:hover,
.uk-card-secondary.uk-card-body .uk-button-default:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-default:hover,
.uk-overlay-primary .uk-button-default:hover,
.uk-offcanvas-bar .uk-button-default:hover {
    background-color: transparent;
    color: #fff;
    border-color: #fff;
}

.uk-light .uk-button-default:active,
.uk-light .uk-button-default.uk-active,
.uk-section-primary:not(.uk-preserve-color) .uk-button-default:active,
.uk-section-primary:not(.uk-preserve-color) .uk-button-default.uk-active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default.uk-active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-default:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-default.uk-active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-default.uk-active,
.uk-card-primary.uk-card-body .uk-button-default:active,
.uk-card-primary.uk-card-body .uk-button-default.uk-active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-default:active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-default.uk-active,
.uk-card-secondary.uk-card-body .uk-button-default:active,
.uk-card-secondary.uk-card-body .uk-button-default.uk-active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-default:active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-default.uk-active,
.uk-overlay-primary .uk-button-default:active,
.uk-overlay-primary .uk-button-default.uk-active,
.uk-offcanvas-bar .uk-button-default:active,
.uk-offcanvas-bar .uk-button-default.uk-active {
    background-color: transparent;
    color: #fff;
    border-color: #fff;
}

.uk-light .uk-button-primary,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary,
.uk-card-primary.uk-card-body .uk-button-primary,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-primary,
.uk-card-secondary.uk-card-body .uk-button-primary,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-primary,
.uk-overlay-primary .uk-button-primary,
.uk-offcanvas-bar .uk-button-primary {
    background-color: #fff;
    color: #666;
}

.uk-light .uk-button-primary:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:hover,
.uk-card-primary.uk-card-body .uk-button-primary:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-primary:hover,
.uk-card-secondary.uk-card-body .uk-button-primary:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-primary:hover,
.uk-overlay-primary .uk-button-primary:hover,
.uk-offcanvas-bar .uk-button-primary:hover {
    background-color: #f2f2f2;
    color: #666;
}

.uk-light .uk-button-primary:active,
.uk-light .uk-button-primary.uk-active,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary:active,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary.uk-active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary.uk-active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary.uk-active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary.uk-active,
.uk-card-primary.uk-card-body .uk-button-primary:active,
.uk-card-primary.uk-card-body .uk-button-primary.uk-active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-primary:active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-primary.uk-active,
.uk-card-secondary.uk-card-body .uk-button-primary:active,
.uk-card-secondary.uk-card-body .uk-button-primary.uk-active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-primary:active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-primary.uk-active,
.uk-overlay-primary .uk-button-primary:active,
.uk-overlay-primary .uk-button-primary.uk-active,
.uk-offcanvas-bar .uk-button-primary:active,
.uk-offcanvas-bar .uk-button-primary.uk-active {
    background-color: #e6e6e6;
    color: #666;
}

.uk-light .uk-button-secondary,
.uk-section-primary:not(.uk-preserve-color) .uk-button-secondary,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary,
.uk-card-primary.uk-card-body .uk-button-secondary,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-secondary,
.uk-card-secondary.uk-card-body .uk-button-secondary,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-secondary,
.uk-overlay-primary .uk-button-secondary,
.uk-offcanvas-bar .uk-button-secondary {
    background-color: #fff;
    color: #666;
}

.uk-light .uk-button-secondary:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-secondary:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary:hover,
.uk-card-primary.uk-card-body .uk-button-secondary:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-secondary:hover,
.uk-card-secondary.uk-card-body .uk-button-secondary:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-secondary:hover,
.uk-overlay-primary .uk-button-secondary:hover,
.uk-offcanvas-bar .uk-button-secondary:hover {
    background-color: #f2f2f2;
    color: #666;
}

.uk-light .uk-button-secondary:active,
.uk-light .uk-button-secondary.uk-active,
.uk-section-primary:not(.uk-preserve-color) .uk-button-secondary:active,
.uk-section-primary:not(.uk-preserve-color) .uk-button-secondary.uk-active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-secondary.uk-active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-secondary.uk-active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-secondary.uk-active,
.uk-card-primary.uk-card-body .uk-button-secondary:active,
.uk-card-primary.uk-card-body .uk-button-secondary.uk-active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-secondary:active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-secondary.uk-active,
.uk-card-secondary.uk-card-body .uk-button-secondary:active,
.uk-card-secondary.uk-card-body .uk-button-secondary.uk-active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-secondary:active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-secondary.uk-active,
.uk-overlay-primary .uk-button-secondary:active,
.uk-overlay-primary .uk-button-secondary.uk-active,
.uk-offcanvas-bar .uk-button-secondary:active,
.uk-offcanvas-bar .uk-button-secondary.uk-active {
    background-color: #e6e6e6;
    color: #666;
}

.uk-light .uk-button-text,
.uk-section-primary:not(.uk-preserve-color) .uk-button-text,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-text,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-text,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-text,
.uk-card-primary.uk-card-body .uk-button-text,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-text,
.uk-card-secondary.uk-card-body .uk-button-text,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-text,
.uk-overlay-primary .uk-button-text,
.uk-offcanvas-bar .uk-button-text {
    color: #fff;
}

.uk-light .uk-button-text::before,
.uk-section-primary:not(.uk-preserve-color) .uk-button-text::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-text::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-text::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-text::before,
.uk-card-primary.uk-card-body .uk-button-text::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-text::before,
.uk-card-secondary.uk-card-body .uk-button-text::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-text::before,
.uk-overlay-primary .uk-button-text::before,
.uk-offcanvas-bar .uk-button-text::before {
    border-bottom-color: #fff;
}

.uk-light .uk-button-text:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-text:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-text:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-text:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-text:hover,
.uk-card-primary.uk-card-body .uk-button-text:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-text:hover,
.uk-card-secondary.uk-card-body .uk-button-text:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-text:hover,
.uk-overlay-primary .uk-button-text:hover,
.uk-offcanvas-bar .uk-button-text:hover {
    color: #fff;
}

.uk-light .uk-button-text:disabled,
.uk-section-primary:not(.uk-preserve-color) .uk-button-text:disabled,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-text:disabled,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-text:disabled,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-text:disabled,
.uk-card-primary.uk-card-body .uk-button-text:disabled,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-text:disabled,
.uk-card-secondary.uk-card-body .uk-button-text:disabled,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-text:disabled,
.uk-overlay-primary .uk-button-text:disabled,
.uk-offcanvas-bar .uk-button-text:disabled {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-button-link,
.uk-section-primary:not(.uk-preserve-color) .uk-button-link,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-link,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-link,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-link,
.uk-card-primary.uk-card-body .uk-button-link,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-link,
.uk-card-secondary.uk-card-body .uk-button-link,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-link,
.uk-overlay-primary .uk-button-link,
.uk-offcanvas-bar .uk-button-link {
    color: #fff;
}

.uk-light .uk-button-link:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-button-link:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-link:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-link:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-button-link:hover,
.uk-card-primary.uk-card-body .uk-button-link:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-button-link:hover,
.uk-card-secondary.uk-card-body .uk-button-link:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-button-link:hover,
.uk-overlay-primary .uk-button-link:hover,
.uk-offcanvas-bar .uk-button-link:hover {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light.uk-card-badge,
.uk-section-primary:not(.uk-preserve-color).uk-card-badge,
.uk-section-secondary:not(.uk-preserve-color).uk-card-badge,
.uk-tile-primary:not(.uk-preserve-color).uk-card-badge,
.uk-tile-secondary:not(.uk-preserve-color).uk-card-badge,
.uk-card-primary.uk-card-body.uk-card-badge,
.uk-card-primary> :not([class*='uk-card-media']).uk-card-badge,
.uk-card-secondary.uk-card-body.uk-card-badge,
.uk-card-secondary> :not([class*='uk-card-media']).uk-card-badge,
.uk-overlay-primary.uk-card-badge,
.uk-offcanvas-bar.uk-card-badge {
    background-color: #fff;
    color: #666;
}

.uk-light .uk-close,
.uk-section-primary:not(.uk-preserve-color) .uk-close,
.uk-section-secondary:not(.uk-preserve-color) .uk-close,
.uk-tile-primary:not(.uk-preserve-color) .uk-close,
.uk-tile-secondary:not(.uk-preserve-color) .uk-close,
.uk-card-primary.uk-card-body .uk-close,
.uk-card-primary> :not([class*='uk-card-media']) .uk-close,
.uk-card-secondary.uk-card-body .uk-close,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-close,
.uk-overlay-primary .uk-close,
.uk-offcanvas-bar .uk-close {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-close:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-close:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-close:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-close:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-close:hover,
.uk-card-primary.uk-card-body .uk-close:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-close:hover,
.uk-card-secondary.uk-card-body .uk-close:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-close:hover,
.uk-overlay-primary .uk-close:hover,
.uk-offcanvas-bar .uk-close:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-totop,
.uk-section-primary:not(.uk-preserve-color) .uk-totop,
.uk-section-secondary:not(.uk-preserve-color) .uk-totop,
.uk-tile-primary:not(.uk-preserve-color) .uk-totop,
.uk-tile-secondary:not(.uk-preserve-color) .uk-totop,
.uk-card-primary.uk-card-body .uk-totop,
.uk-card-primary> :not([class*='uk-card-media']) .uk-totop,
.uk-card-secondary.uk-card-body .uk-totop,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-totop,
.uk-overlay-primary .uk-totop,
.uk-offcanvas-bar .uk-totop {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-totop:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-totop:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-totop:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-totop:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-totop:hover,
.uk-card-primary.uk-card-body .uk-totop:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-totop:hover,
.uk-card-secondary.uk-card-body .uk-totop:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-totop:hover,
.uk-overlay-primary .uk-totop:hover,
.uk-offcanvas-bar .uk-totop:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-totop:active,
.uk-section-primary:not(.uk-preserve-color) .uk-totop:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-totop:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-totop:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-totop:active,
.uk-card-primary.uk-card-body .uk-totop:active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-totop:active,
.uk-card-secondary.uk-card-body .uk-totop:active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-totop:active,
.uk-overlay-primary .uk-totop:active,
.uk-offcanvas-bar .uk-totop:active {
    color: #fff;
}

.uk-light .uk-marker,
.uk-section-primary:not(.uk-preserve-color) .uk-marker,
.uk-section-secondary:not(.uk-preserve-color) .uk-marker,
.uk-tile-primary:not(.uk-preserve-color) .uk-marker,
.uk-tile-secondary:not(.uk-preserve-color) .uk-marker,
.uk-card-primary.uk-card-body .uk-marker,
.uk-card-primary> :not([class*='uk-card-media']) .uk-marker,
.uk-card-secondary.uk-card-body .uk-marker,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-marker,
.uk-overlay-primary .uk-marker,
.uk-offcanvas-bar .uk-marker {
    background: #f8f8f8;
    color: #666;
}

.uk-light .uk-marker:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-marker:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-marker:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-marker:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-marker:hover,
.uk-card-primary.uk-card-body .uk-marker:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-marker:hover,
.uk-card-secondary.uk-card-body .uk-marker:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-marker:hover,
.uk-overlay-primary .uk-marker:hover,
.uk-offcanvas-bar .uk-marker:hover {
    color: #666;
}

.uk-light .uk-badge,
.uk-section-primary:not(.uk-preserve-color) .uk-badge,
.uk-section-secondary:not(.uk-preserve-color) .uk-badge,
.uk-tile-primary:not(.uk-preserve-color) .uk-badge,
.uk-tile-secondary:not(.uk-preserve-color) .uk-badge,
.uk-card-primary.uk-card-body .uk-badge,
.uk-card-primary> :not([class*='uk-card-media']) .uk-badge,
.uk-card-secondary.uk-card-body .uk-badge,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-badge,
.uk-overlay-primary .uk-badge,
.uk-offcanvas-bar .uk-badge {
    background-color: #fff;
    color: #666 !important;
}

.uk-light .uk-label,
.uk-section-primary:not(.uk-preserve-color) .uk-label,
.uk-section-secondary:not(.uk-preserve-color) .uk-label,
.uk-tile-primary:not(.uk-preserve-color) .uk-label,
.uk-tile-secondary:not(.uk-preserve-color) .uk-label,
.uk-card-primary.uk-card-body .uk-label,
.uk-card-primary> :not([class*='uk-card-media']) .uk-label,
.uk-card-secondary.uk-card-body .uk-label,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-label,
.uk-overlay-primary .uk-label,
.uk-offcanvas-bar .uk-label {
    background-color: #fff;
    color: #666;
}

.uk-light .uk-article-meta,
.uk-section-primary:not(.uk-preserve-color) .uk-article-meta,
.uk-section-secondary:not(.uk-preserve-color) .uk-article-meta,
.uk-tile-primary:not(.uk-preserve-color) .uk-article-meta,
.uk-tile-secondary:not(.uk-preserve-color) .uk-article-meta,
.uk-card-primary.uk-card-body .uk-article-meta,
.uk-card-primary> :not([class*='uk-card-media']) .uk-article-meta,
.uk-card-secondary.uk-card-body .uk-article-meta,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-article-meta,
.uk-overlay-primary .uk-article-meta,
.uk-offcanvas-bar .uk-article-meta {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-search-input,
.uk-section-primary:not(.uk-preserve-color) .uk-search-input,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-input,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-input,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-input,
.uk-card-primary.uk-card-body .uk-search-input,
.uk-card-primary> :not([class*='uk-card-media']) .uk-search-input,
.uk-card-secondary.uk-card-body .uk-search-input,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-search-input,
.uk-overlay-primary .uk-search-input,
.uk-offcanvas-bar .uk-search-input {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-search-input::-moz-placeholder, .uk-section-primary:not(.uk-preserve-color) .uk-search-input::-moz-placeholder, .uk-section-secondary:not(.uk-preserve-color) .uk-search-input::-moz-placeholder, .uk-tile-primary:not(.uk-preserve-color) .uk-search-input::-moz-placeholder, .uk-tile-secondary:not(.uk-preserve-color) .uk-search-input::-moz-placeholder, .uk-card-primary.uk-card-body .uk-search-input::-moz-placeholder, .uk-card-primary> :not([class*='uk-card-media']) .uk-search-input::-moz-placeholder, .uk-card-secondary.uk-card-body .uk-search-input::-moz-placeholder, .uk-card-secondary> :not([class*='uk-card-media']) .uk-search-input::-moz-placeholder, .uk-overlay-primary .uk-search-input::-moz-placeholder, .uk-offcanvas-bar .uk-search-input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-search-input::placeholder,
.uk-section-primary:not(.uk-preserve-color) .uk-search-input::placeholder,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-input::placeholder,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-input::placeholder,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-input::placeholder,
.uk-card-primary.uk-card-body .uk-search-input::placeholder,
.uk-card-primary> :not([class*='uk-card-media']) .uk-search-input::placeholder,
.uk-card-secondary.uk-card-body .uk-search-input::placeholder,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-search-input::placeholder,
.uk-overlay-primary .uk-search-input::placeholder,
.uk-offcanvas-bar .uk-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-search .uk-search-icon,
.uk-section-primary:not(.uk-preserve-color) .uk-search .uk-search-icon,
.uk-section-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon,
.uk-tile-primary:not(.uk-preserve-color) .uk-search .uk-search-icon,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon,
.uk-card-primary.uk-card-body .uk-search .uk-search-icon,
.uk-card-primary> :not([class*='uk-card-media']) .uk-search .uk-search-icon,
.uk-card-secondary.uk-card-body .uk-search .uk-search-icon,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-search .uk-search-icon,
.uk-overlay-primary .uk-search .uk-search-icon,
.uk-offcanvas-bar .uk-search .uk-search-icon {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-search .uk-search-icon:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search .uk-search-icon:hover,
.uk-card-primary.uk-card-body .uk-search .uk-search-icon:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-search .uk-search-icon:hover,
.uk-card-secondary.uk-card-body .uk-search .uk-search-icon:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-search .uk-search-icon:hover,
.uk-overlay-primary .uk-search .uk-search-icon:hover,
.uk-offcanvas-bar .uk-search .uk-search-icon:hover {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-search-default .uk-search-input,
.uk-section-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input,
.uk-card-primary.uk-card-body .uk-search-default .uk-search-input,
.uk-card-primary> :not([class*='uk-card-media']) .uk-search-default .uk-search-input,
.uk-card-secondary.uk-card-body .uk-search-default .uk-search-input,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-search-default .uk-search-input,
.uk-overlay-primary .uk-search-default .uk-search-input,
.uk-offcanvas-bar .uk-search-default .uk-search-input {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-search-default .uk-search-input:focus,
.uk-section-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-default .uk-search-input:focus,
.uk-card-primary.uk-card-body .uk-search-default .uk-search-input:focus,
.uk-card-primary> :not([class*='uk-card-media']) .uk-search-default .uk-search-input:focus,
.uk-card-secondary.uk-card-body .uk-search-default .uk-search-input:focus,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-search-default .uk-search-input:focus,
.uk-overlay-primary .uk-search-default .uk-search-input:focus,
.uk-offcanvas-bar .uk-search-default .uk-search-input:focus {
    background-color: rgba(0, 0, 0, 0.05);
}

.uk-light .uk-search-navbar .uk-search-input,
.uk-section-primary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-navbar .uk-search-input,
.uk-card-primary.uk-card-body .uk-search-navbar .uk-search-input,
.uk-card-primary> :not([class*='uk-card-media']) .uk-search-navbar .uk-search-input,
.uk-card-secondary.uk-card-body .uk-search-navbar .uk-search-input,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-search-navbar .uk-search-input,
.uk-overlay-primary .uk-search-navbar .uk-search-input,
.uk-offcanvas-bar .uk-search-navbar .uk-search-input {
    background-color: transparent;
}

.uk-light .uk-search-large .uk-search-input,
.uk-section-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input,
.uk-card-primary.uk-card-body .uk-search-large .uk-search-input,
.uk-card-primary> :not([class*='uk-card-media']) .uk-search-large .uk-search-input,
.uk-card-secondary.uk-card-body .uk-search-large .uk-search-input,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-search-large .uk-search-input,
.uk-overlay-primary .uk-search-large .uk-search-input,
.uk-offcanvas-bar .uk-search-large .uk-search-input {
    background-color: transparent;
}

.uk-light .uk-search-toggle,
.uk-section-primary:not(.uk-preserve-color) .uk-search-toggle,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-toggle,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-toggle,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-toggle,
.uk-card-primary.uk-card-body .uk-search-toggle,
.uk-card-primary> :not([class*='uk-card-media']) .uk-search-toggle,
.uk-card-secondary.uk-card-body .uk-search-toggle,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-search-toggle,
.uk-overlay-primary .uk-search-toggle,
.uk-offcanvas-bar .uk-search-toggle {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-search-toggle:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-search-toggle:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-search-toggle:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-search-toggle:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-search-toggle:hover,
.uk-card-primary.uk-card-body .uk-search-toggle:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-search-toggle:hover,
.uk-card-secondary.uk-card-body .uk-search-toggle:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-search-toggle:hover,
.uk-overlay-primary .uk-search-toggle:hover,
.uk-offcanvas-bar .uk-search-toggle:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-accordion-title,
.uk-section-primary:not(.uk-preserve-color) .uk-accordion-title,
.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-title,
.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-title,
.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-title,
.uk-card-primary.uk-card-body .uk-accordion-title,
.uk-card-primary> :not([class*='uk-card-media']) .uk-accordion-title,
.uk-card-secondary.uk-card-body .uk-accordion-title,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-accordion-title,
.uk-overlay-primary .uk-accordion-title,
.uk-offcanvas-bar .uk-accordion-title {
    color: #fff;
}

.uk-light .uk-accordion-title:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-accordion-title:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-title:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-title:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-title:hover,
.uk-card-primary.uk-card-body .uk-accordion-title:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-accordion-title:hover,
.uk-card-secondary.uk-card-body .uk-accordion-title:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-accordion-title:hover,
.uk-overlay-primary .uk-accordion-title:hover,
.uk-offcanvas-bar .uk-accordion-title:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-grid-divider> :not(.uk-first-column)::before,
.uk-section-primary:not(.uk-preserve-color) .uk-grid-divider> :not(.uk-first-column)::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-grid-divider> :not(.uk-first-column)::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-grid-divider> :not(.uk-first-column)::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-grid-divider> :not(.uk-first-column)::before,
.uk-card-primary.uk-card-body .uk-grid-divider> :not(.uk-first-column)::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-grid-divider> :not(.uk-first-column)::before,
.uk-card-secondary.uk-card-body .uk-grid-divider> :not(.uk-first-column)::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-grid-divider> :not(.uk-first-column)::before,
.uk-overlay-primary .uk-grid-divider> :not(.uk-first-column)::before,
.uk-offcanvas-bar .uk-grid-divider> :not(.uk-first-column)::before {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before,
.uk-section-primary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before,
.uk-card-primary.uk-card-body .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before,
.uk-card-secondary.uk-card-body .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before,
.uk-overlay-primary .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before,
.uk-offcanvas-bar .uk-grid-divider.uk-grid-stack>.uk-grid-margin::before {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-nav-default>li>a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default>li>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default>li>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default>li>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default>li>a,
.uk-card-primary.uk-card-body .uk-nav-default>li>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-default>li>a,
.uk-card-secondary.uk-card-body .uk-nav-default>li>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-default>li>a,
.uk-overlay-primary .uk-nav-default>li>a,
.uk-offcanvas-bar .uk-nav-default>li>a {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-nav-default>li>a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default>li>a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default>li>a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default>li>a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default>li>a:hover,
.uk-card-primary.uk-card-body .uk-nav-default>li>a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-default>li>a:hover,
.uk-card-secondary.uk-card-body .uk-nav-default>li>a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-default>li>a:hover,
.uk-overlay-primary .uk-nav-default>li>a:hover,
.uk-offcanvas-bar .uk-nav-default>li>a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-nav-default>li.uk-active>a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default>li.uk-active>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default>li.uk-active>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default>li.uk-active>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default>li.uk-active>a,
.uk-card-primary.uk-card-body .uk-nav-default>li.uk-active>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-default>li.uk-active>a,
.uk-card-secondary.uk-card-body .uk-nav-default>li.uk-active>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-default>li.uk-active>a,
.uk-overlay-primary .uk-nav-default>li.uk-active>a,
.uk-offcanvas-bar .uk-nav-default>li.uk-active>a {
    color: #fff;
}

.uk-light .uk-nav-default .uk-nav-header,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-header,
.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-header,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-default .uk-nav-header,
.uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-header,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-default .uk-nav-header,
.uk-overlay-primary .uk-nav-default .uk-nav-header,
.uk-offcanvas-bar .uk-nav-default .uk-nav-header {
    color: #fff;
}

.uk-light .uk-nav-default .uk-nav-divider,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-divider,
.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-divider,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-default .uk-nav-divider,
.uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-divider,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-default .uk-nav-divider,
.uk-overlay-primary .uk-nav-default .uk-nav-divider,
.uk-offcanvas-bar .uk-nav-default .uk-nav-divider {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-nav-default .uk-nav-sub a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a,
.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub a,
.uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub a,
.uk-overlay-primary .uk-nav-default .uk-nav-sub a,
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-nav-default .uk-nav-sub a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub a:hover,
.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub a:hover,
.uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub a:hover,
.uk-overlay-primary .uk-nav-default .uk-nav-sub a:hover,
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-nav-default .uk-nav-sub li.uk-active>a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-default .uk-nav-sub li.uk-active>a,
.uk-card-primary.uk-card-body .uk-nav-default .uk-nav-sub li.uk-active>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub li.uk-active>a,
.uk-card-secondary.uk-card-body .uk-nav-default .uk-nav-sub li.uk-active>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-default .uk-nav-sub li.uk-active>a,
.uk-overlay-primary .uk-nav-default .uk-nav-sub li.uk-active>a,
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub li.uk-active>a {
    color: #fff;
}

.uk-light .uk-nav-primary>li>a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary>li>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary>li>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary>li>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary>li>a,
.uk-card-primary.uk-card-body .uk-nav-primary>li>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-primary>li>a,
.uk-card-secondary.uk-card-body .uk-nav-primary>li>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-primary>li>a,
.uk-overlay-primary .uk-nav-primary>li>a,
.uk-offcanvas-bar .uk-nav-primary>li>a {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-nav-primary>li>a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary>li>a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary>li>a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary>li>a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary>li>a:hover,
.uk-card-primary.uk-card-body .uk-nav-primary>li>a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-primary>li>a:hover,
.uk-card-secondary.uk-card-body .uk-nav-primary>li>a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-primary>li>a:hover,
.uk-overlay-primary .uk-nav-primary>li>a:hover,
.uk-offcanvas-bar .uk-nav-primary>li>a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-nav-primary>li.uk-active>a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary>li.uk-active>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary>li.uk-active>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary>li.uk-active>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary>li.uk-active>a,
.uk-card-primary.uk-card-body .uk-nav-primary>li.uk-active>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-primary>li.uk-active>a,
.uk-card-secondary.uk-card-body .uk-nav-primary>li.uk-active>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-primary>li.uk-active>a,
.uk-overlay-primary .uk-nav-primary>li.uk-active>a,
.uk-offcanvas-bar .uk-nav-primary>li.uk-active>a {
    color: #fff;
}

.uk-light .uk-nav-primary .uk-nav-header,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-header,
.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-header,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-header,
.uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-header,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-header,
.uk-overlay-primary .uk-nav-primary .uk-nav-header,
.uk-offcanvas-bar .uk-nav-primary .uk-nav-header {
    color: #fff;
}

.uk-light .uk-nav-primary .uk-nav-divider,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-divider,
.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-divider,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-divider,
.uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-divider,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-divider,
.uk-overlay-primary .uk-nav-primary .uk-nav-divider,
.uk-offcanvas-bar .uk-nav-primary .uk-nav-divider {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-nav-primary .uk-nav-sub a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a,
.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub a,
.uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub a,
.uk-overlay-primary .uk-nav-primary .uk-nav-sub a,
.uk-offcanvas-bar .uk-nav-primary .uk-nav-sub a {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-nav-primary .uk-nav-sub a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub a:hover,
.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub a:hover,
.uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub a:hover,
.uk-overlay-primary .uk-nav-primary .uk-nav-sub a:hover,
.uk-offcanvas-bar .uk-nav-primary .uk-nav-sub a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-nav-primary .uk-nav-sub li.uk-active>a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-primary .uk-nav-sub li.uk-active>a,
.uk-card-primary.uk-card-body .uk-nav-primary .uk-nav-sub li.uk-active>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub li.uk-active>a,
.uk-card-secondary.uk-card-body .uk-nav-primary .uk-nav-sub li.uk-active>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-primary .uk-nav-sub li.uk-active>a,
.uk-overlay-primary .uk-nav-primary .uk-nav-sub li.uk-active>a,
.uk-offcanvas-bar .uk-nav-primary .uk-nav-sub li.uk-active>a {
    color: #fff;
}

.uk-light .uk-nav-secondary>li>a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary>li>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary>li>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary>li>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary>li>a,
.uk-card-primary.uk-card-body .uk-nav-secondary>li>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-secondary>li>a,
.uk-card-secondary.uk-card-body .uk-nav-secondary>li>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-secondary>li>a,
.uk-overlay-primary .uk-nav-secondary>li>a,
.uk-offcanvas-bar .uk-nav-secondary>li>a {
    color: #fff;
}

.uk-light .uk-nav-secondary>li>a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary>li>a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary>li>a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary>li>a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary>li>a:hover,
.uk-card-primary.uk-card-body .uk-nav-secondary>li>a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-secondary>li>a:hover,
.uk-card-secondary.uk-card-body .uk-nav-secondary>li>a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-secondary>li>a:hover,
.uk-overlay-primary .uk-nav-secondary>li>a:hover,
.uk-offcanvas-bar .uk-nav-secondary>li>a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.uk-light .uk-nav-secondary>li.uk-active>a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary>li.uk-active>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary>li.uk-active>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary>li.uk-active>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary>li.uk-active>a,
.uk-card-primary.uk-card-body .uk-nav-secondary>li.uk-active>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-secondary>li.uk-active>a,
.uk-card-secondary.uk-card-body .uk-nav-secondary>li.uk-active>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-secondary>li.uk-active>a,
.uk-overlay-primary .uk-nav-secondary>li.uk-active>a,
.uk-offcanvas-bar .uk-nav-secondary>li.uk-active>a {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.uk-light .uk-nav-secondary .uk-nav-subtitle,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-subtitle,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-subtitle,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-subtitle,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-subtitle,
.uk-card-primary.uk-card-body .uk-nav-secondary .uk-nav-subtitle,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-secondary .uk-nav-subtitle,
.uk-card-secondary.uk-card-body .uk-nav-secondary .uk-nav-subtitle,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-secondary .uk-nav-subtitle,
.uk-overlay-primary .uk-nav-secondary .uk-nav-subtitle,
.uk-offcanvas-bar .uk-nav-secondary .uk-nav-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-nav-secondary>li>a:hover .uk-nav-subtitle,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary>li>a:hover .uk-nav-subtitle,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary>li>a:hover .uk-nav-subtitle,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary>li>a:hover .uk-nav-subtitle,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary>li>a:hover .uk-nav-subtitle,
.uk-card-primary.uk-card-body .uk-nav-secondary>li>a:hover .uk-nav-subtitle,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-secondary>li>a:hover .uk-nav-subtitle,
.uk-card-secondary.uk-card-body .uk-nav-secondary>li>a:hover .uk-nav-subtitle,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-secondary>li>a:hover .uk-nav-subtitle,
.uk-overlay-primary .uk-nav-secondary>li>a:hover .uk-nav-subtitle,
.uk-offcanvas-bar .uk-nav-secondary>li>a:hover .uk-nav-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-nav-secondary>li.uk-active>a .uk-nav-subtitle,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary>li.uk-active>a .uk-nav-subtitle,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary>li.uk-active>a .uk-nav-subtitle,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary>li.uk-active>a .uk-nav-subtitle,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary>li.uk-active>a .uk-nav-subtitle,
.uk-card-primary.uk-card-body .uk-nav-secondary>li.uk-active>a .uk-nav-subtitle,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-secondary>li.uk-active>a .uk-nav-subtitle,
.uk-card-secondary.uk-card-body .uk-nav-secondary>li.uk-active>a .uk-nav-subtitle,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-secondary>li.uk-active>a .uk-nav-subtitle,
.uk-overlay-primary .uk-nav-secondary>li.uk-active>a .uk-nav-subtitle,
.uk-offcanvas-bar .uk-nav-secondary>li.uk-active>a .uk-nav-subtitle {
    color: #fff;
}

.uk-light .uk-nav-secondary .uk-nav-header,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-header,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-header,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-header,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-header,
.uk-card-primary.uk-card-body .uk-nav-secondary .uk-nav-header,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-secondary .uk-nav-header,
.uk-card-secondary.uk-card-body .uk-nav-secondary .uk-nav-header,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-secondary .uk-nav-header,
.uk-overlay-primary .uk-nav-secondary .uk-nav-header,
.uk-offcanvas-bar .uk-nav-secondary .uk-nav-header {
    color: #fff;
}

.uk-light .uk-nav-secondary .uk-nav-divider,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-divider,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-divider,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-divider,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-divider,
.uk-card-primary.uk-card-body .uk-nav-secondary .uk-nav-divider,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-secondary .uk-nav-divider,
.uk-card-secondary.uk-card-body .uk-nav-secondary .uk-nav-divider,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-secondary .uk-nav-divider,
.uk-overlay-primary .uk-nav-secondary .uk-nav-divider,
.uk-offcanvas-bar .uk-nav-secondary .uk-nav-divider {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-nav-secondary .uk-nav-sub a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a,
.uk-card-primary.uk-card-body .uk-nav-secondary .uk-nav-sub a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-secondary .uk-nav-sub a,
.uk-card-secondary.uk-card-body .uk-nav-secondary .uk-nav-sub a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-secondary .uk-nav-sub a,
.uk-overlay-primary .uk-nav-secondary .uk-nav-sub a,
.uk-offcanvas-bar .uk-nav-secondary .uk-nav-sub a {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-nav-secondary .uk-nav-sub a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub a:hover,
.uk-card-primary.uk-card-body .uk-nav-secondary .uk-nav-sub a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-secondary .uk-nav-sub a:hover,
.uk-card-secondary.uk-card-body .uk-nav-secondary .uk-nav-sub a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-secondary .uk-nav-sub a:hover,
.uk-overlay-primary .uk-nav-secondary .uk-nav-sub a:hover,
.uk-offcanvas-bar .uk-nav-secondary .uk-nav-sub a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-nav-secondary .uk-nav-sub li.uk-active>a,
.uk-section-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub li.uk-active>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub li.uk-active>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub li.uk-active>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-secondary .uk-nav-sub li.uk-active>a,
.uk-card-primary.uk-card-body .uk-nav-secondary .uk-nav-sub li.uk-active>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav-secondary .uk-nav-sub li.uk-active>a,
.uk-card-secondary.uk-card-body .uk-nav-secondary .uk-nav-sub li.uk-active>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav-secondary .uk-nav-sub li.uk-active>a,
.uk-overlay-primary .uk-nav-secondary .uk-nav-sub li.uk-active>a,
.uk-offcanvas-bar .uk-nav-secondary .uk-nav-sub li.uk-active>a {
    color: #fff;
}

.uk-light .uk-nav.uk-nav-divider> :not(.uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider),
.uk-section-primary:not(.uk-preserve-color) .uk-nav.uk-nav-divider> :not(.uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider),
.uk-section-secondary:not(.uk-preserve-color) .uk-nav.uk-nav-divider> :not(.uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider),
.uk-tile-primary:not(.uk-preserve-color) .uk-nav.uk-nav-divider> :not(.uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider),
.uk-tile-secondary:not(.uk-preserve-color) .uk-nav.uk-nav-divider> :not(.uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider),
.uk-card-primary.uk-card-body .uk-nav.uk-nav-divider> :not(.uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider),
.uk-card-primary> :not([class*='uk-card-media']) .uk-nav.uk-nav-divider> :not(.uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider),
.uk-card-secondary.uk-card-body .uk-nav.uk-nav-divider> :not(.uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider),
.uk-card-secondary> :not([class*='uk-card-media']) .uk-nav.uk-nav-divider> :not(.uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider),
.uk-overlay-primary .uk-nav.uk-nav-divider> :not(.uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider),
.uk-offcanvas-bar .uk-nav.uk-nav-divider> :not(.uk-nav-divider)+ :not(.uk-nav-header, .uk-nav-divider) {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-navbar-nav>li>a,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav>li>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav>li>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav>li>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav>li>a,
.uk-card-primary.uk-card-body .uk-navbar-nav>li>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-navbar-nav>li>a,
.uk-card-secondary.uk-card-body .uk-navbar-nav>li>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-navbar-nav>li>a,
.uk-overlay-primary .uk-navbar-nav>li>a,
.uk-offcanvas-bar .uk-navbar-nav>li>a {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-navbar-nav>li:hover>a,
.uk-light .uk-navbar-nav>li>a[aria-expanded="true"],
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav>li:hover>a,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav>li>a[aria-expanded="true"],
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav>li:hover>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav>li>a[aria-expanded="true"],
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav>li:hover>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav>li>a[aria-expanded="true"],
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav>li:hover>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav>li>a[aria-expanded="true"],
.uk-card-primary.uk-card-body .uk-navbar-nav>li:hover>a,
.uk-card-primary.uk-card-body .uk-navbar-nav>li>a[aria-expanded="true"],
.uk-card-primary> :not([class*='uk-card-media']) .uk-navbar-nav>li:hover>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-navbar-nav>li>a[aria-expanded="true"],
.uk-card-secondary.uk-card-body .uk-navbar-nav>li:hover>a,
.uk-card-secondary.uk-card-body .uk-navbar-nav>li>a[aria-expanded="true"],
.uk-card-secondary> :not([class*='uk-card-media']) .uk-navbar-nav>li:hover>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-navbar-nav>li>a[aria-expanded="true"],
.uk-overlay-primary .uk-navbar-nav>li:hover>a,
.uk-overlay-primary .uk-navbar-nav>li>a[aria-expanded="true"],
.uk-offcanvas-bar .uk-navbar-nav>li:hover>a,
.uk-offcanvas-bar .uk-navbar-nav>li>a[aria-expanded="true"] {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-navbar-nav>li>a:active,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav>li>a:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav>li>a:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav>li>a:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav>li>a:active,
.uk-card-primary.uk-card-body .uk-navbar-nav>li>a:active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-navbar-nav>li>a:active,
.uk-card-secondary.uk-card-body .uk-navbar-nav>li>a:active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-navbar-nav>li>a:active,
.uk-overlay-primary .uk-navbar-nav>li>a:active,
.uk-offcanvas-bar .uk-navbar-nav>li>a:active {
    color: #fff;
}

.uk-light .uk-navbar-nav>li.uk-active>a,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-nav>li.uk-active>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-nav>li.uk-active>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-nav>li.uk-active>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-nav>li.uk-active>a,
.uk-card-primary.uk-card-body .uk-navbar-nav>li.uk-active>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-navbar-nav>li.uk-active>a,
.uk-card-secondary.uk-card-body .uk-navbar-nav>li.uk-active>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-navbar-nav>li.uk-active>a,
.uk-overlay-primary .uk-navbar-nav>li.uk-active>a,
.uk-offcanvas-bar .uk-navbar-nav>li.uk-active>a {
    color: #fff;
}

.uk-light .uk-navbar-item,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-item,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-item,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-item,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-item,
.uk-card-primary.uk-card-body .uk-navbar-item,
.uk-card-primary> :not([class*='uk-card-media']) .uk-navbar-item,
.uk-card-secondary.uk-card-body .uk-navbar-item,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-navbar-item,
.uk-overlay-primary .uk-navbar-item,
.uk-offcanvas-bar .uk-navbar-item {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-navbar-toggle,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle,
.uk-card-primary.uk-card-body .uk-navbar-toggle,
.uk-card-primary> :not([class*='uk-card-media']) .uk-navbar-toggle,
.uk-card-secondary.uk-card-body .uk-navbar-toggle,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-navbar-toggle,
.uk-overlay-primary .uk-navbar-toggle,
.uk-offcanvas-bar .uk-navbar-toggle {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-navbar-toggle:hover,
.uk-light .uk-navbar-toggle[aria-expanded="true"],
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-navbar-toggle[aria-expanded="true"],
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-toggle[aria-expanded="true"],
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-toggle[aria-expanded="true"],
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-toggle[aria-expanded="true"],
.uk-card-primary.uk-card-body .uk-navbar-toggle:hover,
.uk-card-primary.uk-card-body .uk-navbar-toggle[aria-expanded="true"],
.uk-card-primary> :not([class*='uk-card-media']) .uk-navbar-toggle:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-navbar-toggle[aria-expanded="true"],
.uk-card-secondary.uk-card-body .uk-navbar-toggle:hover,
.uk-card-secondary.uk-card-body .uk-navbar-toggle[aria-expanded="true"],
.uk-card-secondary> :not([class*='uk-card-media']) .uk-navbar-toggle:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-navbar-toggle[aria-expanded="true"],
.uk-overlay-primary .uk-navbar-toggle:hover,
.uk-overlay-primary .uk-navbar-toggle[aria-expanded="true"],
.uk-offcanvas-bar .uk-navbar-toggle:hover,
.uk-offcanvas-bar .uk-navbar-toggle[aria-expanded="true"] {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-subnav>*> :first-child,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav>*> :first-child,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav>*> :first-child,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav>*> :first-child,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav>*> :first-child,
.uk-card-primary.uk-card-body .uk-subnav>*> :first-child,
.uk-card-primary> :not([class*='uk-card-media']) .uk-subnav>*> :first-child,
.uk-card-secondary.uk-card-body .uk-subnav>*> :first-child,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-subnav>*> :first-child,
.uk-overlay-primary .uk-subnav>*> :first-child,
.uk-offcanvas-bar .uk-subnav>*> :first-child {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-subnav>*>a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav>*>a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav>*>a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav>*>a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav>*>a:hover,
.uk-card-primary.uk-card-body .uk-subnav>*>a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-subnav>*>a:hover,
.uk-card-secondary.uk-card-body .uk-subnav>*>a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-subnav>*>a:hover,
.uk-overlay-primary .uk-subnav>*>a:hover,
.uk-offcanvas-bar .uk-subnav>*>a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-subnav>.uk-active>a,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav>.uk-active>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav>.uk-active>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav>.uk-active>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav>.uk-active>a,
.uk-card-primary.uk-card-body .uk-subnav>.uk-active>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-subnav>.uk-active>a,
.uk-card-secondary.uk-card-body .uk-subnav>.uk-active>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-subnav>.uk-active>a,
.uk-overlay-primary .uk-subnav>.uk-active>a,
.uk-offcanvas-bar .uk-subnav>.uk-active>a {
    color: #fff;
}

.uk-light .uk-subnav-divider> :nth-child(n+2):not(.uk-first-column)::before,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav-divider> :nth-child(n+2):not(.uk-first-column)::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav-divider> :nth-child(n+2):not(.uk-first-column)::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav-divider> :nth-child(n+2):not(.uk-first-column)::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-divider> :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-primary.uk-card-body .uk-subnav-divider> :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-subnav-divider> :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-secondary.uk-card-body .uk-subnav-divider> :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-subnav-divider> :nth-child(n+2):not(.uk-first-column)::before,
.uk-overlay-primary .uk-subnav-divider> :nth-child(n+2):not(.uk-first-column)::before,
.uk-offcanvas-bar .uk-subnav-divider> :nth-child(n+2):not(.uk-first-column)::before {
    border-left-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-subnav-pill>*> :first-child,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill>*> :first-child,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill>*> :first-child,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill>*> :first-child,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill>*> :first-child,
.uk-card-primary.uk-card-body .uk-subnav-pill>*> :first-child,
.uk-card-primary> :not([class*='uk-card-media']) .uk-subnav-pill>*> :first-child,
.uk-card-secondary.uk-card-body .uk-subnav-pill>*> :first-child,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-subnav-pill>*> :first-child,
.uk-overlay-primary .uk-subnav-pill>*> :first-child,
.uk-offcanvas-bar .uk-subnav-pill>*> :first-child {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-subnav-pill>*>a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill>*>a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill>*>a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill>*>a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill>*>a:hover,
.uk-card-primary.uk-card-body .uk-subnav-pill>*>a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-subnav-pill>*>a:hover,
.uk-card-secondary.uk-card-body .uk-subnav-pill>*>a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-subnav-pill>*>a:hover,
.uk-overlay-primary .uk-subnav-pill>*>a:hover,
.uk-offcanvas-bar .uk-subnav-pill>*>a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-subnav-pill>*>a:active,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill>*>a:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill>*>a:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill>*>a:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill>*>a:active,
.uk-card-primary.uk-card-body .uk-subnav-pill>*>a:active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-subnav-pill>*>a:active,
.uk-card-secondary.uk-card-body .uk-subnav-pill>*>a:active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-subnav-pill>*>a:active,
.uk-overlay-primary .uk-subnav-pill>*>a:active,
.uk-offcanvas-bar .uk-subnav-pill>*>a:active {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-subnav-pill>.uk-active>a,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav-pill>.uk-active>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav-pill>.uk-active>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav-pill>.uk-active>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav-pill>.uk-active>a,
.uk-card-primary.uk-card-body .uk-subnav-pill>.uk-active>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-subnav-pill>.uk-active>a,
.uk-card-secondary.uk-card-body .uk-subnav-pill>.uk-active>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-subnav-pill>.uk-active>a,
.uk-overlay-primary .uk-subnav-pill>.uk-active>a,
.uk-offcanvas-bar .uk-subnav-pill>.uk-active>a {
    background-color: #fff;
    color: #666;
}

.uk-light .uk-subnav>.uk-disabled>a,
.uk-section-primary:not(.uk-preserve-color) .uk-subnav>.uk-disabled>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-subnav>.uk-disabled>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-subnav>.uk-disabled>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-subnav>.uk-disabled>a,
.uk-card-primary.uk-card-body .uk-subnav>.uk-disabled>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-subnav>.uk-disabled>a,
.uk-card-secondary.uk-card-body .uk-subnav>.uk-disabled>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-subnav>.uk-disabled>a,
.uk-overlay-primary .uk-subnav>.uk-disabled>a,
.uk-offcanvas-bar .uk-subnav>.uk-disabled>a {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-breadcrumb>*>*,
.uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb>*>*,
.uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb>*>*,
.uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb>*>*,
.uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb>*>*,
.uk-card-primary.uk-card-body .uk-breadcrumb>*>*,
.uk-card-primary> :not([class*='uk-card-media']) .uk-breadcrumb>*>*,
.uk-card-secondary.uk-card-body .uk-breadcrumb>*>*,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-breadcrumb>*>*,
.uk-overlay-primary .uk-breadcrumb>*>*,
.uk-offcanvas-bar .uk-breadcrumb>*>* {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-breadcrumb>*> :hover,
.uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb>*> :hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb>*> :hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb>*> :hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb>*> :hover,
.uk-card-primary.uk-card-body .uk-breadcrumb>*> :hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-breadcrumb>*> :hover,
.uk-card-secondary.uk-card-body .uk-breadcrumb>*> :hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-breadcrumb>*> :hover,
.uk-overlay-primary .uk-breadcrumb>*> :hover,
.uk-offcanvas-bar .uk-breadcrumb>*> :hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-breadcrumb> :last-child>*,
.uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb> :last-child>*,
.uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb> :last-child>*,
.uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb> :last-child>*,
.uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb> :last-child>*,
.uk-card-primary.uk-card-body .uk-breadcrumb> :last-child>*,
.uk-card-primary> :not([class*='uk-card-media']) .uk-breadcrumb> :last-child>*,
.uk-card-secondary.uk-card-body .uk-breadcrumb> :last-child>*,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-breadcrumb> :last-child>*,
.uk-overlay-primary .uk-breadcrumb> :last-child>*,
.uk-offcanvas-bar .uk-breadcrumb> :last-child>* {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before,
.uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-primary.uk-card-body .uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-secondary.uk-card-body .uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before,
.uk-overlay-primary .uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before,
.uk-offcanvas-bar .uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-pagination>*>*,
.uk-section-primary:not(.uk-preserve-color) .uk-pagination>*>*,
.uk-section-secondary:not(.uk-preserve-color) .uk-pagination>*>*,
.uk-tile-primary:not(.uk-preserve-color) .uk-pagination>*>*,
.uk-tile-secondary:not(.uk-preserve-color) .uk-pagination>*>*,
.uk-card-primary.uk-card-body .uk-pagination>*>*,
.uk-card-primary> :not([class*='uk-card-media']) .uk-pagination>*>*,
.uk-card-secondary.uk-card-body .uk-pagination>*>*,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-pagination>*>*,
.uk-overlay-primary .uk-pagination>*>*,
.uk-offcanvas-bar .uk-pagination>*>* {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-pagination>*> :hover,
.uk-section-primary:not(.uk-preserve-color) .uk-pagination>*> :hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-pagination>*> :hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-pagination>*> :hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-pagination>*> :hover,
.uk-card-primary.uk-card-body .uk-pagination>*> :hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-pagination>*> :hover,
.uk-card-secondary.uk-card-body .uk-pagination>*> :hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-pagination>*> :hover,
.uk-overlay-primary .uk-pagination>*> :hover,
.uk-offcanvas-bar .uk-pagination>*> :hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-pagination>.uk-active>*,
.uk-section-primary:not(.uk-preserve-color) .uk-pagination>.uk-active>*,
.uk-section-secondary:not(.uk-preserve-color) .uk-pagination>.uk-active>*,
.uk-tile-primary:not(.uk-preserve-color) .uk-pagination>.uk-active>*,
.uk-tile-secondary:not(.uk-preserve-color) .uk-pagination>.uk-active>*,
.uk-card-primary.uk-card-body .uk-pagination>.uk-active>*,
.uk-card-primary> :not([class*='uk-card-media']) .uk-pagination>.uk-active>*,
.uk-card-secondary.uk-card-body .uk-pagination>.uk-active>*,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-pagination>.uk-active>*,
.uk-overlay-primary .uk-pagination>.uk-active>*,
.uk-offcanvas-bar .uk-pagination>.uk-active>* {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-pagination>.uk-disabled>*,
.uk-section-primary:not(.uk-preserve-color) .uk-pagination>.uk-disabled>*,
.uk-section-secondary:not(.uk-preserve-color) .uk-pagination>.uk-disabled>*,
.uk-tile-primary:not(.uk-preserve-color) .uk-pagination>.uk-disabled>*,
.uk-tile-secondary:not(.uk-preserve-color) .uk-pagination>.uk-disabled>*,
.uk-card-primary.uk-card-body .uk-pagination>.uk-disabled>*,
.uk-card-primary> :not([class*='uk-card-media']) .uk-pagination>.uk-disabled>*,
.uk-card-secondary.uk-card-body .uk-pagination>.uk-disabled>*,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-pagination>.uk-disabled>*,
.uk-overlay-primary .uk-pagination>.uk-disabled>*,
.uk-offcanvas-bar .uk-pagination>.uk-disabled>* {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-tab::before,
.uk-section-primary:not(.uk-preserve-color) .uk-tab::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-tab::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-tab::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-tab::before,
.uk-card-primary.uk-card-body .uk-tab::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-tab::before,
.uk-card-secondary.uk-card-body .uk-tab::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-tab::before,
.uk-overlay-primary .uk-tab::before,
.uk-offcanvas-bar .uk-tab::before {
    border-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-tab>*>a,
.uk-section-primary:not(.uk-preserve-color) .uk-tab>*>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-tab>*>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-tab>*>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-tab>*>a,
.uk-card-primary.uk-card-body .uk-tab>*>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-tab>*>a,
.uk-card-secondary.uk-card-body .uk-tab>*>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-tab>*>a,
.uk-overlay-primary .uk-tab>*>a,
.uk-offcanvas-bar .uk-tab>*>a {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-tab>*>a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-tab>*>a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-tab>*>a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-tab>*>a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-tab>*>a:hover,
.uk-card-primary.uk-card-body .uk-tab>*>a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-tab>*>a:hover,
.uk-card-secondary.uk-card-body .uk-tab>*>a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-tab>*>a:hover,
.uk-overlay-primary .uk-tab>*>a:hover,
.uk-offcanvas-bar .uk-tab>*>a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-tab>.uk-active>a,
.uk-section-primary:not(.uk-preserve-color) .uk-tab>.uk-active>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-tab>.uk-active>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-tab>.uk-active>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-tab>.uk-active>a,
.uk-card-primary.uk-card-body .uk-tab>.uk-active>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-tab>.uk-active>a,
.uk-card-secondary.uk-card-body .uk-tab>.uk-active>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-tab>.uk-active>a,
.uk-overlay-primary .uk-tab>.uk-active>a,
.uk-offcanvas-bar .uk-tab>.uk-active>a {
    color: #fff;
    border-color: #fff;
}

.uk-light .uk-tab>.uk-disabled>a,
.uk-section-primary:not(.uk-preserve-color) .uk-tab>.uk-disabled>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-tab>.uk-disabled>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-tab>.uk-disabled>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-tab>.uk-disabled>a,
.uk-card-primary.uk-card-body .uk-tab>.uk-disabled>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-tab>.uk-disabled>a,
.uk-card-secondary.uk-card-body .uk-tab>.uk-disabled>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-tab>.uk-disabled>a,
.uk-overlay-primary .uk-tab>.uk-disabled>a,
.uk-offcanvas-bar .uk-tab>.uk-disabled>a {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-slidenav,
.uk-section-primary:not(.uk-preserve-color) .uk-slidenav,
.uk-section-secondary:not(.uk-preserve-color) .uk-slidenav,
.uk-tile-primary:not(.uk-preserve-color) .uk-slidenav,
.uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav,
.uk-card-primary.uk-card-body .uk-slidenav,
.uk-card-primary> :not([class*='uk-card-media']) .uk-slidenav,
.uk-card-secondary.uk-card-body .uk-slidenav,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-slidenav,
.uk-overlay-primary .uk-slidenav,
.uk-offcanvas-bar .uk-slidenav {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-slidenav:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-slidenav:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-slidenav:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-slidenav:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav:hover,
.uk-card-primary.uk-card-body .uk-slidenav:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-slidenav:hover,
.uk-card-secondary.uk-card-body .uk-slidenav:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-slidenav:hover,
.uk-overlay-primary .uk-slidenav:hover,
.uk-offcanvas-bar .uk-slidenav:hover {
    color: rgba(255, 255, 255, 0.95);
}

.uk-light .uk-slidenav:active,
.uk-section-primary:not(.uk-preserve-color) .uk-slidenav:active,
.uk-section-secondary:not(.uk-preserve-color) .uk-slidenav:active,
.uk-tile-primary:not(.uk-preserve-color) .uk-slidenav:active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-slidenav:active,
.uk-card-primary.uk-card-body .uk-slidenav:active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-slidenav:active,
.uk-card-secondary.uk-card-body .uk-slidenav:active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-slidenav:active,
.uk-overlay-primary .uk-slidenav:active,
.uk-offcanvas-bar .uk-slidenav:active {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-dotnav>*>*,
.uk-section-primary:not(.uk-preserve-color) .uk-dotnav>*>*,
.uk-section-secondary:not(.uk-preserve-color) .uk-dotnav>*>*,
.uk-tile-primary:not(.uk-preserve-color) .uk-dotnav>*>*,
.uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav>*>*,
.uk-card-primary.uk-card-body .uk-dotnav>*>*,
.uk-card-primary> :not([class*='uk-card-media']) .uk-dotnav>*>*,
.uk-card-secondary.uk-card-body .uk-dotnav>*>*,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-dotnav>*>*,
.uk-overlay-primary .uk-dotnav>*>*,
.uk-offcanvas-bar .uk-dotnav>*>* {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.9);
}

.uk-light .uk-dotnav>*> :hover,
.uk-section-primary:not(.uk-preserve-color) .uk-dotnav>*> :hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-dotnav>*> :hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-dotnav>*> :hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav>*> :hover,
.uk-card-primary.uk-card-body .uk-dotnav>*> :hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-dotnav>*> :hover,
.uk-card-secondary.uk-card-body .uk-dotnav>*> :hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-dotnav>*> :hover,
.uk-overlay-primary .uk-dotnav>*> :hover,
.uk-offcanvas-bar .uk-dotnav>*> :hover {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: transparent;
}

.uk-light .uk-dotnav>*> :active,
.uk-section-primary:not(.uk-preserve-color) .uk-dotnav>*> :active,
.uk-section-secondary:not(.uk-preserve-color) .uk-dotnav>*> :active,
.uk-tile-primary:not(.uk-preserve-color) .uk-dotnav>*> :active,
.uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav>*> :active,
.uk-card-primary.uk-card-body .uk-dotnav>*> :active,
.uk-card-primary> :not([class*='uk-card-media']) .uk-dotnav>*> :active,
.uk-card-secondary.uk-card-body .uk-dotnav>*> :active,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-dotnav>*> :active,
.uk-overlay-primary .uk-dotnav>*> :active,
.uk-offcanvas-bar .uk-dotnav>*> :active {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: transparent;
}

.uk-light .uk-dotnav>.uk-active>*,
.uk-section-primary:not(.uk-preserve-color) .uk-dotnav>.uk-active>*,
.uk-section-secondary:not(.uk-preserve-color) .uk-dotnav>.uk-active>*,
.uk-tile-primary:not(.uk-preserve-color) .uk-dotnav>.uk-active>*,
.uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav>.uk-active>*,
.uk-card-primary.uk-card-body .uk-dotnav>.uk-active>*,
.uk-card-primary> :not([class*='uk-card-media']) .uk-dotnav>.uk-active>*,
.uk-card-secondary.uk-card-body .uk-dotnav>.uk-active>*,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-dotnav>.uk-active>*,
.uk-overlay-primary .uk-dotnav>.uk-active>*,
.uk-offcanvas-bar .uk-dotnav>.uk-active>* {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: transparent;
}

.uk-light .uk-thumbnav>*>*::after,
.uk-section-primary:not(.uk-preserve-color) .uk-thumbnav>*>*::after,
.uk-section-secondary:not(.uk-preserve-color) .uk-thumbnav>*>*::after,
.uk-tile-primary:not(.uk-preserve-color) .uk-thumbnav>*>*::after,
.uk-tile-secondary:not(.uk-preserve-color) .uk-thumbnav>*>*::after,
.uk-card-primary.uk-card-body .uk-thumbnav>*>*::after,
.uk-card-primary> :not([class*='uk-card-media']) .uk-thumbnav>*>*::after,
.uk-card-secondary.uk-card-body .uk-thumbnav>*>*::after,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-thumbnav>*>*::after,
.uk-overlay-primary .uk-thumbnav>*>*::after,
.uk-offcanvas-bar .uk-thumbnav>*>*::after {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

.uk-light .uk-iconnav>*>a,
.uk-section-primary:not(.uk-preserve-color) .uk-iconnav>*>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-iconnav>*>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-iconnav>*>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav>*>a,
.uk-card-primary.uk-card-body .uk-iconnav>*>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-iconnav>*>a,
.uk-card-secondary.uk-card-body .uk-iconnav>*>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-iconnav>*>a,
.uk-overlay-primary .uk-iconnav>*>a,
.uk-offcanvas-bar .uk-iconnav>*>a {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-iconnav>*>a:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-iconnav>*>a:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-iconnav>*>a:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-iconnav>*>a:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav>*>a:hover,
.uk-card-primary.uk-card-body .uk-iconnav>*>a:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-iconnav>*>a:hover,
.uk-card-secondary.uk-card-body .uk-iconnav>*>a:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-iconnav>*>a:hover,
.uk-overlay-primary .uk-iconnav>*>a:hover,
.uk-offcanvas-bar .uk-iconnav>*>a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-iconnav>.uk-active>a,
.uk-section-primary:not(.uk-preserve-color) .uk-iconnav>.uk-active>a,
.uk-section-secondary:not(.uk-preserve-color) .uk-iconnav>.uk-active>a,
.uk-tile-primary:not(.uk-preserve-color) .uk-iconnav>.uk-active>a,
.uk-tile-secondary:not(.uk-preserve-color) .uk-iconnav>.uk-active>a,
.uk-card-primary.uk-card-body .uk-iconnav>.uk-active>a,
.uk-card-primary> :not([class*='uk-card-media']) .uk-iconnav>.uk-active>a,
.uk-card-secondary.uk-card-body .uk-iconnav>.uk-active>a,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-iconnav>.uk-active>a,
.uk-overlay-primary .uk-iconnav>.uk-active>a,
.uk-offcanvas-bar .uk-iconnav>.uk-active>a {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-text-lead,
.uk-section-primary:not(.uk-preserve-color) .uk-text-lead,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-lead,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-lead,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-lead,
.uk-card-primary.uk-card-body .uk-text-lead,
.uk-card-primary> :not([class*='uk-card-media']) .uk-text-lead,
.uk-card-secondary.uk-card-body .uk-text-lead,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-text-lead,
.uk-overlay-primary .uk-text-lead,
.uk-offcanvas-bar .uk-text-lead {
    color: rgba(255, 255, 255, 0.7);
}

.uk-light .uk-text-meta,
.uk-section-primary:not(.uk-preserve-color) .uk-text-meta,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-meta,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-meta,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-meta,
.uk-card-primary.uk-card-body .uk-text-meta,
.uk-card-primary> :not([class*='uk-card-media']) .uk-text-meta,
.uk-card-secondary.uk-card-body .uk-text-meta,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-text-meta,
.uk-overlay-primary .uk-text-meta,
.uk-offcanvas-bar .uk-text-meta {
    color: rgba(255, 255, 255, 0.5);
}

.uk-light .uk-text-muted,
.uk-section-primary:not(.uk-preserve-color) .uk-text-muted,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-muted,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-muted,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-muted,
.uk-card-primary.uk-card-body .uk-text-muted,
.uk-card-primary> :not([class*='uk-card-media']) .uk-text-muted,
.uk-card-secondary.uk-card-body .uk-text-muted,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-text-muted,
.uk-overlay-primary .uk-text-muted,
.uk-offcanvas-bar .uk-text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

.uk-light .uk-text-emphasis,
.uk-section-primary:not(.uk-preserve-color) .uk-text-emphasis,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-emphasis,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-emphasis,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-emphasis,
.uk-card-primary.uk-card-body .uk-text-emphasis,
.uk-card-primary> :not([class*='uk-card-media']) .uk-text-emphasis,
.uk-card-secondary.uk-card-body .uk-text-emphasis,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-text-emphasis,
.uk-overlay-primary .uk-text-emphasis,
.uk-offcanvas-bar .uk-text-emphasis {
    color: #fff !important;
}

.uk-light .uk-text-primary,
.uk-section-primary:not(.uk-preserve-color) .uk-text-primary,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-primary,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-primary,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-primary,
.uk-card-primary.uk-card-body .uk-text-primary,
.uk-card-primary> :not([class*='uk-card-media']) .uk-text-primary,
.uk-card-secondary.uk-card-body .uk-text-primary,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-text-primary,
.uk-overlay-primary .uk-text-primary,
.uk-offcanvas-bar .uk-text-primary {
    color: #fff !important;
}

.uk-light .uk-text-secondary,
.uk-section-primary:not(.uk-preserve-color) .uk-text-secondary,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-secondary,
.uk-tile-primary:not(.uk-preserve-color) .uk-text-secondary,
.uk-tile-secondary:not(.uk-preserve-color) .uk-text-secondary,
.uk-card-primary.uk-card-body .uk-text-secondary,
.uk-card-primary> :not([class*='uk-card-media']) .uk-text-secondary,
.uk-card-secondary.uk-card-body .uk-text-secondary,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-text-secondary,
.uk-overlay-primary .uk-text-secondary,
.uk-offcanvas-bar .uk-text-secondary {
    color: #fff !important;
}

.uk-light .uk-column-divider,
.uk-section-primary:not(.uk-preserve-color) .uk-column-divider,
.uk-section-secondary:not(.uk-preserve-color) .uk-column-divider,
.uk-tile-primary:not(.uk-preserve-color) .uk-column-divider,
.uk-tile-secondary:not(.uk-preserve-color) .uk-column-divider,
.uk-card-primary.uk-card-body .uk-column-divider,
.uk-card-primary> :not([class*='uk-card-media']) .uk-column-divider,
.uk-card-secondary.uk-card-body .uk-column-divider,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-column-divider,
.uk-overlay-primary .uk-column-divider,
.uk-offcanvas-bar .uk-column-divider {
    -moz-column-rule-color: rgba(255, 255, 255, 0.2);
         column-rule-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-logo,
.uk-section-primary:not(.uk-preserve-color) .uk-logo,
.uk-section-secondary:not(.uk-preserve-color) .uk-logo,
.uk-tile-primary:not(.uk-preserve-color) .uk-logo,
.uk-tile-secondary:not(.uk-preserve-color) .uk-logo,
.uk-card-primary.uk-card-body .uk-logo,
.uk-card-primary> :not([class*='uk-card-media']) .uk-logo,
.uk-card-secondary.uk-card-body .uk-logo,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-logo,
.uk-overlay-primary .uk-logo,
.uk-offcanvas-bar .uk-logo {
    color: #fff;
}

.uk-light .uk-logo:hover,
.uk-section-primary:not(.uk-preserve-color) .uk-logo:hover,
.uk-section-secondary:not(.uk-preserve-color) .uk-logo:hover,
.uk-tile-primary:not(.uk-preserve-color) .uk-logo:hover,
.uk-tile-secondary:not(.uk-preserve-color) .uk-logo:hover,
.uk-card-primary.uk-card-body .uk-logo:hover,
.uk-card-primary> :not([class*='uk-card-media']) .uk-logo:hover,
.uk-card-secondary.uk-card-body .uk-logo:hover,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-logo:hover,
.uk-overlay-primary .uk-logo:hover,
.uk-offcanvas-bar .uk-logo:hover {
    color: #fff;
}

.uk-light .uk-logo>picture:not(:only-of-type)> :not(.uk-logo-inverse),
.uk-light .uk-logo> :not(picture):not(.uk-logo-inverse):not(:only-of-type),
.uk-section-primary:not(.uk-preserve-color) .uk-logo>picture:not(:only-of-type)> :not(.uk-logo-inverse),
.uk-section-primary:not(.uk-preserve-color) .uk-logo> :not(picture):not(.uk-logo-inverse):not(:only-of-type),
.uk-section-secondary:not(.uk-preserve-color) .uk-logo>picture:not(:only-of-type)> :not(.uk-logo-inverse),
.uk-section-secondary:not(.uk-preserve-color) .uk-logo> :not(picture):not(.uk-logo-inverse):not(:only-of-type),
.uk-tile-primary:not(.uk-preserve-color) .uk-logo>picture:not(:only-of-type)> :not(.uk-logo-inverse),
.uk-tile-primary:not(.uk-preserve-color) .uk-logo> :not(picture):not(.uk-logo-inverse):not(:only-of-type),
.uk-tile-secondary:not(.uk-preserve-color) .uk-logo>picture:not(:only-of-type)> :not(.uk-logo-inverse),
.uk-tile-secondary:not(.uk-preserve-color) .uk-logo> :not(picture):not(.uk-logo-inverse):not(:only-of-type),
.uk-card-primary.uk-card-body .uk-logo>picture:not(:only-of-type)> :not(.uk-logo-inverse),
.uk-card-primary.uk-card-body .uk-logo> :not(picture):not(.uk-logo-inverse):not(:only-of-type),
.uk-card-primary> :not([class*='uk-card-media']) .uk-logo>picture:not(:only-of-type)> :not(.uk-logo-inverse),
.uk-card-primary> :not([class*='uk-card-media']) .uk-logo> :not(picture):not(.uk-logo-inverse):not(:only-of-type),
.uk-card-secondary.uk-card-body .uk-logo>picture:not(:only-of-type)> :not(.uk-logo-inverse),
.uk-card-secondary.uk-card-body .uk-logo> :not(picture):not(.uk-logo-inverse):not(:only-of-type),
.uk-card-secondary> :not([class*='uk-card-media']) .uk-logo>picture:not(:only-of-type)> :not(.uk-logo-inverse),
.uk-card-secondary> :not([class*='uk-card-media']) .uk-logo> :not(picture):not(.uk-logo-inverse):not(:only-of-type),
.uk-overlay-primary .uk-logo>picture:not(:only-of-type)> :not(.uk-logo-inverse),
.uk-overlay-primary .uk-logo> :not(picture):not(.uk-logo-inverse):not(:only-of-type),
.uk-offcanvas-bar .uk-logo>picture:not(:only-of-type)> :not(.uk-logo-inverse),
.uk-offcanvas-bar .uk-logo> :not(picture):not(.uk-logo-inverse):not(:only-of-type) {
    display: none;
}

.uk-light .uk-logo-inverse,
.uk-section-primary:not(.uk-preserve-color) .uk-logo-inverse,
.uk-section-secondary:not(.uk-preserve-color) .uk-logo-inverse,
.uk-tile-primary:not(.uk-preserve-color) .uk-logo-inverse,
.uk-tile-secondary:not(.uk-preserve-color) .uk-logo-inverse,
.uk-card-primary.uk-card-body .uk-logo-inverse,
.uk-card-primary> :not([class*='uk-card-media']) .uk-logo-inverse,
.uk-card-secondary.uk-card-body .uk-logo-inverse,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-logo-inverse,
.uk-overlay-primary .uk-logo-inverse,
.uk-offcanvas-bar .uk-logo-inverse {
    display: block;
}

.uk-light .uk-table-striped>tr:nth-of-type(even):last-child,
.uk-light .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-section-primary:not(.uk-preserve-color) .uk-table-striped>tr:nth-of-type(even):last-child,
.uk-section-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-section-secondary:not(.uk-preserve-color) .uk-table-striped>tr:nth-of-type(even):last-child,
.uk-section-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-tile-primary:not(.uk-preserve-color) .uk-table-striped>tr:nth-of-type(even):last-child,
.uk-tile-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped>tr:nth-of-type(even):last-child,
.uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-card-primary.uk-card-body .uk-table-striped>tr:nth-of-type(even):last-child,
.uk-card-primary.uk-card-body .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-card-primary> :not([class*='uk-card-media']) .uk-table-striped>tr:nth-of-type(even):last-child,
.uk-card-primary> :not([class*='uk-card-media']) .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-card-secondary.uk-card-body .uk-table-striped>tr:nth-of-type(even):last-child,
.uk-card-secondary.uk-card-body .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table-striped>tr:nth-of-type(even):last-child,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-overlay-primary .uk-table-striped>tr:nth-of-type(even):last-child,
.uk-overlay-primary .uk-table-striped tbody tr:nth-of-type(even):last-child,
.uk-offcanvas-bar .uk-table-striped>tr:nth-of-type(even):last-child,
.uk-offcanvas-bar .uk-table-striped tbody tr:nth-of-type(even):last-child {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.uk-light .uk-accordion-title::before,
.uk-section-primary:not(.uk-preserve-color) .uk-accordion-title::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-accordion-title::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-accordion-title::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-accordion-title::before,
.uk-card-primary.uk-card-body .uk-accordion-title::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-accordion-title::before,
.uk-card-secondary.uk-card-body .uk-accordion-title::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-accordion-title::before,
.uk-overlay-primary .uk-accordion-title::before,
.uk-offcanvas-bar .uk-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.uk-light .uk-open>.uk-accordion-title::before,
.uk-section-primary:not(.uk-preserve-color) .uk-open>.uk-accordion-title::before,
.uk-section-secondary:not(.uk-preserve-color) .uk-open>.uk-accordion-title::before,
.uk-tile-primary:not(.uk-preserve-color) .uk-open>.uk-accordion-title::before,
.uk-tile-secondary:not(.uk-preserve-color) .uk-open>.uk-accordion-title::before,
.uk-card-primary.uk-card-body .uk-open>.uk-accordion-title::before,
.uk-card-primary> :not([class*='uk-card-media']) .uk-open>.uk-accordion-title::before,
.uk-card-secondary.uk-card-body .uk-open>.uk-accordion-title::before,
.uk-card-secondary> :not([class*='uk-card-media']) .uk-open>.uk-accordion-title::before,
.uk-overlay-primary .uk-open>.uk-accordion-title::before,
.uk-offcanvas-bar .uk-open>.uk-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

/* ========================================================================
     Component: Print
   ========================================================================== */
@media print {

    *,
    *::before,
    *::after {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
.leaflet-control-fullscreen a {
    background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAAc0lEQVQ4jeWTUQqAMAxDU9lvzmx35hyg/owxZf7MCoKFMSjNI5TGIgKZVQBA0oxaSfpMJMkB7Nc+Sdsy3QGARUR3SNJWIKM+3WE6sLS/PuR0vWWfzfd3+FegJG/5XKpR/8PonYCSYnh+J2o767OvOkzP8gGSrFRBl4/ueQAAAABJRU5ErkJggg==) no-repeat 0 0;
    background-size:26px 52px;
    }
    .leaflet-touch .leaflet-control-fullscreen a {
      background-position: 2px 2px;
      }
    .leaflet-fullscreen-on .leaflet-control-fullscreen a {
      background-position:0 -26px;
      }
    .leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
      background-position: 2px -24px;
      }
  
  /* Do not combine these two rules; IE will break. */
  .leaflet-container:-webkit-full-screen {
    width:100%!important;
    height:100%!important;
    }
  .leaflet-container.leaflet-fullscreen-on {
    width:100%!important;
    height:100%!important;
    }
  
  .leaflet-pseudo-fullscreen {
    position:fixed!important;
    width:100%!important;
    height:100%!important;
    top:0!important;
    left:0!important;
    z-index:99999;
    }
  
  @media
    (min-resolution:192dpi) {
      .leaflet-control-fullscreen a {
        background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsSAAALEgHS3X78AAAA60lEQVRIie2WwQ2DMBAEh4jviRYogQ6SUighpaQElxI6cAluIboCyCMgiG2BUYj8gPlxMruWD3xb9H1PDkoAVX0AzcI6IyImRVBVW6BdWGJF5F4ODw1wXVj8TDEdqFe0ALhsENyVMlJ7AdaruQ2aDui8WgNUa8ZWRG4bjL4YvgUzr6nqE+/4sx318YzHHhumX8b9wSfQL3LdXMfr8Wl8Gp/GuzFGn5ZPcgBwqTEnlZj+eFe3TPOyw5unOxDoH6/H2efxnGbISHN+zdVBZo8ZV4S52N/IEnXk/YDsR+3naB+3QdMR5uo5FjJGnzdnGEDR4Q51/QAAAABJRU5ErkJggg==);
      }
    }

.welcome-menu-groups[data-v-2d5997a5] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.welcome-menu-group[data-v-2d5997a5] { min-width: 0; display: flex; flex-direction: column; padding: 18px; border: 1px solid #3b4652; border-radius: 12px; background: #29323c; transition: border-color .18s, background .18s;
}
.welcome-menu-group[data-v-2d5997a5]:hover, .welcome-menu-group[data-v-2d5997a5]:focus-within { border-color: #5c929b; background: #2d3944;
}
.group-heading[data-v-2d5997a5] { display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.group-icon[data-v-2d5997a5] { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: #203f47; color: #79e2df; font-size: 16px;
}
.welcome-menu-group h3[data-v-2d5997a5] { color: #f2f6fa; font-size: 15px; line-height: 1.5; font-weight: 600; margin: 0; overflow-wrap: anywhere;
}
.welcome-menu-group p[data-v-2d5997a5] { color: #b9c6d2; font-size: 12px; line-height: 1.7; margin: -4px 0 16px;
}
.welcome-menu-group ul[data-v-2d5997a5] { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: auto 0 0; padding: 0;
}
.welcome-menu-group li[data-v-2d5997a5] { flex: 1 1 auto;
}
.welcome-menu-group a[data-v-2d5997a5] { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; color: #dce6ef; border: 1px solid #465361; border-radius: 7px; font-size: 12px; line-height: 1.4; text-decoration: none; transition: background .18s, color .18s;
}
.link-arrow[data-v-2d5997a5] { font-size: 10px; opacity: .55;
}
.welcome-menu-group a[data-v-2d5997a5]:hover { color: #fff; background: #3b505d; border-color: #78c9cd;
}
.welcome-menu-group a[data-v-2d5997a5]:focus-visible { outline: 2px solid #8ce9e5; outline-offset: 3px;
}
.welcome-menu-group .router-link-exact-active[data-v-2d5997a5] { color: #a6f6ef; background: #204b50; border-color: #5cb6b1;
}
.is-current[data-v-2d5997a5] { border-color: #4d8e90;
}
.is-unavailable[data-v-2d5997a5] { background: #252d36; border-style: dashed;
}
.is-unavailable .group-icon[data-v-2d5997a5] { color: #94a3b3; background: #323c47;
}
.unavailable[data-v-2d5997a5] { align-self: flex-start; color: #aebdcb; background: #323c47; border-radius: 5px; padding: 5px 9px; font-size: 12px; margin-top: auto;
}
@media (max-width: 1100px) {
.welcome-menu-groups[data-v-2d5997a5] { grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.welcome-menu-group[data-v-2d5997a5], .welcome-menu-group a[data-v-2d5997a5] { transition: none;
}
}


.welcome-header[data-v-7221ab32] { gap: 16px;
}
.logo-container[data-v-7221ab32] { gap: 18px; flex-shrink: 0;
}
.logo-img[data-v-7221ab32] { height: 40px; width: auto;
}
.hamburger[data-v-7221ab32] { display: none; color: white; background: none; border: 0; padding: 8px; cursor: pointer;
}
.welcome-desktop-nav[data-v-7221ab32] { width: auto; flex: 1; min-width: 0;
}
.welcome-topics[data-v-7221ab32] { display: flex; justify-content: center; gap: 4px; list-style: none; margin: 0; padding: 0;
}
summary[data-v-7221ab32] { list-style: none; display: flex; align-items: center; gap: 5px; color: #f2f2f2; cursor: pointer; font-size: 14px; padding: 10px 8px; white-space: nowrap;
}
summary[data-v-7221ab32]:hover, summary[data-v-7221ab32]:focus-visible, details[open] > summary[data-v-7221ab32] { color: #3dfdfe; background: #19232d; border-radius: 4px;
}
summary[data-v-7221ab32]::-webkit-details-marker { display: none;
}
summary[data-v-7221ab32]::after { content: ''; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: -3px 2px 0 6px; opacity: .6;
}
details[open] > summary[data-v-7221ab32]::after { transform: rotate(225deg); margin-top: 3px;
}
summary[data-v-7221ab32]:focus-visible { outline: 2px solid #8ce9e5; outline-offset: -2px;
}
summary i[data-v-7221ab32] { margin-right: 4px;
}
.welcome-topic-panel[data-v-7221ab32] { position: absolute; top: 100%; left: 0; right: 0; padding: 24px 32px 28px; background: #202830; border-top: 1px solid #3e505b; border-bottom: 1px solid #445461; box-shadow: 0 18px 35px #0007; z-index: 3000; max-height: calc(100dvh - 70px); overflow-y: auto;
}
.welcome-panel-content[data-v-7221ab32] { max-width: 1320px; margin: 0 auto;
}
.welcome-panel-heading[data-v-7221ab32] { display: flex; align-items: center; gap: 10px; color: #7de0dc; margin-bottom: 18px;
}
.welcome-panel-heading h2[data-v-7221ab32] { color: #eef5fa; font-size: 18px; font-weight: 600; margin: 0;
}
.welcome-category-count[data-v-7221ab32] { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid #465764; border-radius: 20px; color: #b4c5d1; font-size: 12px;
}
.welcome-drawer-backdrop[data-v-7221ab32] { position: fixed; inset: 0; background: #0008; z-index: 10010;
}
.welcome-drawer[data-v-7221ab32] { position: absolute; inset: 0 auto 0 0; width: min(380px, 92vw); padding: 48px 20px 24px; overflow-y: auto; background: #262b31; box-sizing: border-box;
}
.welcome-drawer summary[data-v-7221ab32] { padding: 14px 8px;
}
.welcome-drawer[data-v-7221ab32] .welcome-menu-groups { grid-template-columns: 1fr; padding: 12px 8px 20px;
}
.welcome-close[data-v-7221ab32] { position: absolute; top: 6px; right: 14px; color: #fff; font-size: 28px; background: none; border: 0; cursor: pointer;
}
.welcome-drawer-account[data-v-7221ab32] { display: flex; justify-content: space-between; align-items: center; color: white; margin-top: 24px;
}
.welcome-drawer-account button[data-v-7221ab32] { color: white; background: #343c47; border: 0; padding: 8px 12px; cursor: pointer;
}
@media (max-width: 1500px) {
.hamburger[data-v-7221ab32] { display: block;
}
.welcome-desktop-nav[data-v-7221ab32] { display: none;
}
}


.uk-radio:checked {
        background-color: #2ec4c2 !important; /* 將選中的顏色改為綠色 (現代瀏覽器支援) */
}

    /* 當 TaichungTree 為 true 時，箭頭向下 */
#treeview .caret.open::before {
        transform: rotate(90deg); /* 向下旋轉箭頭 */
}

    /* 調整彈出視窗邊緣和箭頭為背景色 */
.leaflet-popup-content-wrapper {
        background-color: #262b31 !important;
        color: #fff; /* 設置文字顏色為白色以便可見 */
        padding: 10px !important; /* 可調整內容間距 */
        box-shadow: none !important; /* 移除陰影 */
        border: none !important;
        border-radius: 10px !important; /* 移除圓角 */
}
.zone-button-group {
        overflow-x: auto; /* 啟用 X 軸滾動 */
        overflow-y: hidden; /* 禁用 Y 軸滾動 */
        scrollbar-width: none; /* 隱藏滾動條（適用於 Firefox） */
        -ms-overflow-style: none; /* 隱藏滾動條（適用於 IE 和 Edge） */
}
.zone-button-group::-webkit-scrollbar {
            display: none; /* 隱藏滾動條（適用於 Chrome/Safari/Edge） */
}


.uk-radio[data-v-6bab05cb]:checked {
        background-color: #2ec4c2 !important; /* 將選中的顏色改為綠色 (現代瀏覽器支援) */
}

    /* 當 TaichungTree 為 true 時，箭頭向下 */
#treeview .caret.open[data-v-6bab05cb]::before {
        transform: rotate(90deg); /* 向下旋轉箭頭 */
}

    /* 調整彈出視窗邊緣和箭頭為背景色 */
.leaflet-popup-content-wrapper[data-v-6bab05cb] {
        background-color: #262b31 !important;
        color: #fff; /* 設置文字顏色為白色以便可見 */
        padding: 10px !important; /* 可調整內容間距 */
        box-shadow: none !important; /* 移除陰影 */
        border: none !important;
        border-radius: 10px !important; /* 移除圓角 */
}
.zone-button-group[data-v-6bab05cb] {
        overflow-x: auto; /* 啟用 X 軸滾動 */
        overflow-y: hidden; /* 禁用 Y 軸滾動 */
        scrollbar-width: none; /* 隱藏滾動條（適用於 Firefox） */
        -ms-overflow-style: none; /* 隱藏滾動條（適用於 IE 和 Edge） */
}
.zone-button-group[data-v-6bab05cb]::-webkit-scrollbar {
            display: none; /* 隱藏滾動條（適用於 Chrome/Safari/Edge） */
}


.uk-radio[data-v-045aef33]:checked {
        background-color: #2ec4c2 !important; /* 將選中的顏色改為綠色 (現代瀏覽器支援) */
}

    /* 當 TaichungTree 為 true 時，箭頭向下 */
#treeview .caret.open[data-v-045aef33]::before {
        transform: rotate(90deg); /* 向下旋轉箭頭 */
}

    /* 調整彈出視窗邊緣和箭頭為背景色 */
.leaflet-popup-content-wrapper[data-v-045aef33] {
        background-color: #262b31 !important;
        color: #fff; /* 設置文字顏色為白色以便可見 */
        padding: 10px !important; /* 可調整內容間距 */
        box-shadow: none !important; /* 移除陰影 */
        border: none !important;
        border-radius: 10px !important; /* 移除圓角 */
}
.zone-button-group[data-v-045aef33] {
        overflow-x: auto; /* 啟用 X 軸滾動 */
        overflow-y: hidden; /* 禁用 Y 軸滾動 */
        scrollbar-width: none; /* 隱藏滾動條（適用於 Firefox） */
        -ms-overflow-style: none; /* 隱藏滾動條（適用於 IE 和 Edge） */
}
.zone-button-group[data-v-045aef33]::-webkit-scrollbar {
            display: none; /* 隱藏滾動條（適用於 Chrome/Safari/Edge） */
}


.uk-radio[data-v-16a1ab2f]:checked {
        background-color: #2ec4c2 !important; /* 將選中的顏色改為綠色 (現代瀏覽器支援) */
}

    /* 當 TaichungTree 為 true 時，箭頭向下 */
#treeview .caret.open[data-v-16a1ab2f]::before {
        transform: rotate(90deg); /* 向下旋轉箭頭 */
}

    /* 調整彈出視窗邊緣和箭頭為背景色 */
.leaflet-popup-content-wrapper[data-v-16a1ab2f] {
        background-color: #262b31 !important;
        color: #fff; /* 設置文字顏色為白色以便可見 */
        padding: 10px !important; /* 可調整內容間距 */
        box-shadow: none !important; /* 移除陰影 */
        border: none !important;
        border-radius: 10px !important; /* 移除圓角 */
}
.zone-button-group[data-v-16a1ab2f] {
        overflow-x: auto; /* 啟用 X 軸滾動 */
        overflow-y: hidden; /* 禁用 Y 軸滾動 */
        scrollbar-width: none; /* 隱藏滾動條（適用於 Firefox） */
        -ms-overflow-style: none; /* 隱藏滾動條（適用於 IE 和 Edge） */
}
.zone-button-group[data-v-16a1ab2f]::-webkit-scrollbar {
            display: none; /* 隱藏滾動條（適用於 Chrome/Safari/Edge） */
}


.uk-radio[data-v-31fbda48]:checked {
        background-color: #2ec4c2 !important; /* 將選中的顏色改為綠色 (現代瀏覽器支援) */
}

    /* 當 TaichungTree 為 true 時，箭頭向下 */
#treeview .caret.open[data-v-31fbda48]::before {
        transform: rotate(90deg); /* 向下旋轉箭頭 */
}

    /* 調整彈出視窗邊緣和箭頭為背景色 */
.leaflet-popup-content-wrapper[data-v-31fbda48] {
        background-color: #262b31 !important;
        color: #fff; /* 設置文字顏色為白色以便可見 */
        padding: 10px !important; /* 可調整內容間距 */
        box-shadow: none !important; /* 移除陰影 */
        border: none !important;
        border-radius: 10px !important; /* 移除圓角 */
}
.zone-button-group[data-v-31fbda48] {
        overflow-x: auto; /* 啟用 X 軸滾動 */
        overflow-y: hidden; /* 禁用 Y 軸滾動 */
        scrollbar-width: none; /* 隱藏滾動條（適用於 Firefox） */
        -ms-overflow-style: none; /* 隱藏滾動條（適用於 IE 和 Edge） */
}
.zone-button-group[data-v-31fbda48]::-webkit-scrollbar {
            display: none; /* 隱藏滾動條（適用於 Chrome/Safari/Edge） */
}


.uk-radio[data-v-521ccdf7]:checked {
        background-color: #2ec4c2 !important; /* 將選中的顏色改為綠色 (現代瀏覽器支援) */
}

    /* 當 TaichungTree 為 true 時，箭頭向下 */
#treeview .caret.open[data-v-521ccdf7]::before {
        transform: rotate(90deg); /* 向下旋轉箭頭 */
}

    /* 調整彈出視窗邊緣和箭頭為背景色 */
.leaflet-popup-content-wrapper[data-v-521ccdf7] {
        background-color: #262b31 !important;
        color: #fff; /* 設置文字顏色為白色以便可見 */
        padding: 10px !important; /* 可調整內容間距 */
        box-shadow: none !important; /* 移除陰影 */
        border: none !important;
        border-radius: 10px !important; /* 移除圓角 */
        overflow-y: auto !important;
}
.zone-button-group[data-v-521ccdf7] {
        overflow-x: auto; /* 啟用 X 軸滾動 */
        overflow-y: hidden; /* 禁用 Y 軸滾動 */
        scrollbar-width: none; /* 隱藏滾動條（適用於 Firefox） */
        -ms-overflow-style: none; /* 隱藏滾動條（適用於 IE 和 Edge） */
}
.zone-button-group[data-v-521ccdf7]::-webkit-scrollbar {
            display: none; /* 隱藏滾動條（適用於 Chrome/Safari/Edge） */
}
.legend-group-wrap[data-v-521ccdf7] {
        position: absolute;
        width: -moz-fit-content !important;
        width: fit-content !important;
        top: auto;
        left: auto;
        bottom: 10px;
        right: 10px;
        resize: both;
        overflow: auto;
        min-width: 200px;
        min-height: 100px;
        max-width: 90vw;
        max-height: 60vh;
        border: 1px solid #ccc;
        background: white;
        padding: 8px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        z-index: 10000 !important;
}
.resize-corner[data-v-521ccdf7] {
        width: 12px;
        height: 12px;
        background-color: white; /* 白色背景 */
        position: absolute !important;
        z-index: 10002;
        border: 1px solid #aaa;
        border-radius: 2px;
}

    /* 固定在左上角 */
.resize-tl[data-v-521ccdf7] {
        top: -6px;
        left: -6px;
        cursor: nwse-resize;
}

    /* Leaflet Draw 按鈕背景色調整（右上角） */
.leaflet-draw-toolbar .leaflet-draw-toolbar-button[data-v-521ccdf7] {
        background-color: #333B44 !important;
        padding: 4px;
}
.map-hint-overlay[data-v-521ccdf7] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.35);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        animation: fadeIn-521ccdf7 0.3s ease;
}
.map-hint-box[data-v-521ccdf7] {
        background: rgba(30, 30, 30, 0.95);
        padding: 20px 30px;
        border-radius: 12px;
        text-align: center;
        color: #fff;
        box-shadow: 0 10px 25px rgba(0,0,0,0.4);
        max-width: 400px;
}
.hint-title[data-v-521ccdf7] {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 12px;
}
.hint-content[data-v-521ccdf7] {
        font-size: 18px;
        line-height: 1.8;
}
.hint-close[data-v-521ccdf7] {
        font-size: 14px;
        margin-top: 16px;
        color: #999;
}
@keyframes fadeIn-521ccdf7 {
from {
            opacity: 0;
}
to {
            opacity: 1;
}
}
.is-disabled[data-v-521ccdf7] {
        opacity: 0.4;
        cursor: not-allowed;
}
.hint-layer[data-v-521ccdf7] {
        position: absolute;
        top: 40px;
        right: 0;
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
}


.uk-radio[data-v-61271196]:checked {
        background-color: #2ec4c2 !important; /* 將選中的顏色改為綠色 (現代瀏覽器支援) */
}

    /* 當 TaichungTree 為 true 時，箭頭向下 */
#treeview .caret.open[data-v-61271196]::before {
        transform: rotate(90deg); /* 向下旋轉箭頭 */
}

    /* 調整彈出視窗邊緣和箭頭為背景色 */
.leaflet-popup-content-wrapper[data-v-61271196] {
        background-color: #262b31 !important;
        color: #fff; /* 設置文字顏色為白色以便可見 */
        padding: 10px !important; /* 可調整內容間距 */
        box-shadow: none !important; /* 移除陰影 */
        border: none !important;
        border-radius: 10px !important; /* 移除圓角 */
        overflow-y: auto !important;
}
.zone-button-group[data-v-61271196] {
        overflow-x: auto; /* 啟用 X 軸滾動 */
        overflow-y: hidden; /* 禁用 Y 軸滾動 */
        scrollbar-width: none; /* 隱藏滾動條（適用於 Firefox） */
        -ms-overflow-style: none; /* 隱藏滾動條（適用於 IE 和 Edge） */
}
.zone-button-group[data-v-61271196]::-webkit-scrollbar {
            display: none; /* 隱藏滾動條（適用於 Chrome/Safari/Edge） */
}
.legend-group-wrap[data-v-61271196] {
        position: absolute;
        width: -moz-fit-content !important;
        width: fit-content !important;
        top: auto;
        left: auto;
        bottom: 10px;
        right: 10px;
        resize: both;
        overflow: auto;
        min-width: 200px;
        min-height: 100px;
        max-width: 90vw;
        max-height: 60vh;
        border: 1px solid #ccc;
        background: white;
        padding: 8px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        z-index: 10000 !important;
}
.resize-corner[data-v-61271196] {
        width: 12px;
        height: 12px;
        background-color: white; /* 白色背景 */
        position: absolute !important;
        z-index: 10002;
        border: 1px solid #aaa;
        border-radius: 2px;
}

    /* 固定在左上角 */
.resize-tl[data-v-61271196] {
        top: -6px;
        left: -6px;
        cursor: nwse-resize;
}

    /* Leaflet Draw 按鈕背景色調整（右上角） */
.leaflet-draw-toolbar .leaflet-draw-toolbar-button[data-v-61271196] {
        background-color: #333B44 !important;
        padding: 4px;
}
.map-hint-overlay[data-v-61271196] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.35);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        animation: fadeIn-61271196 0.3s ease;
}
.map-hint-box[data-v-61271196] {
        background: rgba(30, 30, 30, 0.95);
        padding: 20px 30px;
        border-radius: 12px;
        text-align: center;
        color: #fff;
        box-shadow: 0 10px 25px rgba(0,0,0,0.4);
        max-width: 400px;
}
.hint-title[data-v-61271196] {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 12px;
}
.hint-content[data-v-61271196] {
        font-size: 18px;
        line-height: 1.8;
}
.hint-close[data-v-61271196] {
        font-size: 14px;
        margin-top: 16px;
        color: #999;
}
@keyframes fadeIn-61271196 {
from {
            opacity: 0;
}
to {
            opacity: 1;
}
}
.is-disabled[data-v-61271196] {
        opacity: 0.4;
        cursor: not-allowed;
}
.hint-layer[data-v-61271196] {
        position: absolute;
        top: 40px;
        right: 0;
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
}


.uk-radio[data-v-1d5b0482]:checked {
        background-color: #2ec4c2 !important; /* 將選中的顏色改為綠色 (現代瀏覽器支援) */
}

    /* 當 TaichungTree 為 true 時，箭頭向下 */
#treeview .caret.open[data-v-1d5b0482]::before {
        transform: rotate(90deg); /* 向下旋轉箭頭 */
}

    /* 調整彈出視窗邊緣和箭頭為背景色 */
.leaflet-popup-content-wrapper[data-v-1d5b0482] {
        background-color: #262b31 !important;
        color: #fff; /* 設置文字顏色為白色以便可見 */
        padding: 10px !important; /* 可調整內容間距 */
        box-shadow: none !important; /* 移除陰影 */
        border: none !important;
        border-radius: 10px !important; /* 移除圓角 */
}
.zone-button-group[data-v-1d5b0482] {
        overflow-x: auto; /* 啟用 X 軸滾動 */
        overflow-y: hidden; /* 禁用 Y 軸滾動 */
        scrollbar-width: none; /* 隱藏滾動條（適用於 Firefox） */
        -ms-overflow-style: none; /* 隱藏滾動條（適用於 IE 和 Edge） */
}
.zone-button-group[data-v-1d5b0482]::-webkit-scrollbar {
            display: none; /* 隱藏滾動條（適用於 Chrome/Safari/Edge） */
}


.uk-radio[data-v-ccdb5ec8]:checked {
        background-color: #2ec4c2 !important; /* 將選中的顏色改為綠色 (現代瀏覽器支援) */
}

    /* 當 TaichungTree 為 true 時，箭頭向下 */
#treeview .caret.open[data-v-ccdb5ec8]::before {
        transform: rotate(90deg); /* 向下旋轉箭頭 */
}

    /* 調整彈出視窗邊緣和箭頭為背景色 */
.leaflet-popup-content-wrapper[data-v-ccdb5ec8] {
        background-color: #262b31 !important;
        color: #fff; /* 設置文字顏色為白色以便可見 */
        padding: 10px !important; /* 可調整內容間距 */
        box-shadow: none !important; /* 移除陰影 */
        border: none !important;
        border-radius: 10px !important; /* 移除圓角 */
        overflow-y: auto !important;
}
.zone-button-group[data-v-ccdb5ec8] {
        overflow-x: auto; /* 啟用 X 軸滾動 */
        overflow-y: hidden; /* 禁用 Y 軸滾動 */
        scrollbar-width: none; /* 隱藏滾動條（適用於 Firefox） */
        -ms-overflow-style: none; /* 隱藏滾動條（適用於 IE 和 Edge） */
}
.zone-button-group[data-v-ccdb5ec8]::-webkit-scrollbar {
            display: none; /* 隱藏滾動條（適用於 Chrome/Safari/Edge） */
}

@charset "UTF-8";
:root {
  --dt-row-selected: 90, 118, 137;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 9, 10, 11;
  --dt-row-stripe: 0, 0, 0;
  --dt-row-hover: 0, 0, 0;
  --dt-column-ordering: 0, 0, 0;
  --dt-html-background: white;
}
:root.dark {
  --dt-html-background: rgb(33, 37, 41);
}

table.dataTable td.dt-control {
  text-align: center;
  cursor: pointer;
}
table.dataTable td.dt-control:before {
  display: inline-block;
  box-sizing: border-box;
  content: "";
  border-top: 5px solid transparent;
  border-left: 10px solid rgba(0, 0, 0, 0.5);
  border-bottom: 5px solid transparent;
  border-right: 0px solid transparent;
}
table.dataTable tr.dt-hasChild td.dt-control:before {
  border-top: 10px solid rgba(0, 0, 0, 0.5);
  border-left: 5px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 5px solid transparent;
}
table.dataTable tfoot:empty {
  display: none;
}

html.dark table.dataTable td.dt-control:before,
:root[data-bs-theme=dark] table.dataTable td.dt-control:before,
:root[data-theme=dark] table.dataTable td.dt-control:before {
  border-left-color: rgba(255, 255, 255, 0.5);
}
html.dark table.dataTable tr.dt-hasChild td.dt-control:before,
:root[data-bs-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before,
:root[data-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before {
  border-top-color: rgba(255, 255, 255, 0.5);
  border-left-color: transparent;
}

div.dt-scroll {
  width: 100%;
}

div.dt-scroll-body thead tr,
div.dt-scroll-body tfoot tr {
  height: 0;
}
div.dt-scroll-body thead tr th, div.dt-scroll-body thead tr td,
div.dt-scroll-body tfoot tr th,
div.dt-scroll-body tfoot tr td {
  height: 0 !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
}
div.dt-scroll-body thead tr th div.dt-scroll-sizing, div.dt-scroll-body thead tr td div.dt-scroll-sizing,
div.dt-scroll-body tfoot tr th div.dt-scroll-sizing,
div.dt-scroll-body tfoot tr td div.dt-scroll-sizing {
  height: 0 !important;
  overflow: hidden !important;
}

table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
  outline: none;
}
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before {
  position: absolute;
  display: block;
  bottom: 50%;
  content: "▲";
  content: "▲"/"";
}
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
  position: absolute;
  display: block;
  top: 50%;
  content: "▼";
  content: "▼"/"";
}
table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc, table.dataTable thead > tr > th.dt-ordering-asc, table.dataTable thead > tr > th.dt-ordering-desc,
table.dataTable thead > tr > td.dt-orderable-asc,
table.dataTable thead > tr > td.dt-orderable-desc,
table.dataTable thead > tr > td.dt-ordering-asc,
table.dataTable thead > tr > td.dt-ordering-desc {
  position: relative;
  padding-right: 30px;
}
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  width: 12px;
}
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
  left: 0;
  opacity: 0.125;
  line-height: 9px;
  font-size: 0.8em;
}
table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > td.dt-orderable-asc,
table.dataTable thead > tr > td.dt-orderable-desc {
  cursor: pointer;
}
table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
  outline: 2px solid rgba(0, 0, 0, 0.05);
  outline-offset: -2px;
}
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
  opacity: 0.6;
}
table.dataTable thead > tr > th.sorting_desc_disabled span.dt-column-order:after, table.dataTable thead > tr > th.sorting_asc_disabled span.dt-column-order:before,
table.dataTable thead > tr > td.sorting_desc_disabled span.dt-column-order:after,
table.dataTable thead > tr > td.sorting_asc_disabled span.dt-column-order:before {
  display: none;
}
table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
  outline: none;
}

div.dt-scroll-body > table.dataTable > thead > tr > th,
div.dt-scroll-body > table.dataTable > thead > tr > td {
  overflow: hidden;
}

:root.dark table.dataTable thead > tr > th.dt-orderable-asc:hover, :root.dark table.dataTable thead > tr > th.dt-orderable-desc:hover,
:root.dark table.dataTable thead > tr > td.dt-orderable-asc:hover,
:root.dark table.dataTable thead > tr > td.dt-orderable-desc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > th.dt-orderable-asc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > th.dt-orderable-desc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > td.dt-orderable-asc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > td.dt-orderable-desc:hover {
  outline: 2px solid rgba(255, 255, 255, 0.05);
}

div.dt-processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  margin-top: -22px;
  text-align: center;
  padding: 2px;
  z-index: 10;
}
div.dt-processing > div:last-child {
  position: relative;
  width: 80px;
  height: 15px;
  margin: 1em auto;
}
div.dt-processing > div:last-child > div {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgb(13, 110, 253);
  background: rgb(var(--dt-row-selected));
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
div.dt-processing > div:last-child > div:nth-child(1) {
  left: 8px;
  animation: datatables-loader-1 0.6s infinite;
}
div.dt-processing > div:last-child > div:nth-child(2) {
  left: 8px;
  animation: datatables-loader-2 0.6s infinite;
}
div.dt-processing > div:last-child > div:nth-child(3) {
  left: 32px;
  animation: datatables-loader-2 0.6s infinite;
}
div.dt-processing > div:last-child > div:nth-child(4) {
  left: 56px;
  animation: datatables-loader-3 0.6s infinite;
}

@keyframes datatables-loader-1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes datatables-loader-3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes datatables-loader-2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
table.dataTable.nowrap th, table.dataTable.nowrap td {
  white-space: nowrap;
}
table.dataTable th,
table.dataTable td {
  box-sizing: border-box;
}
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: right;
}
table.dataTable th.dt-left,
table.dataTable td.dt-left {
  text-align: left;
}
table.dataTable th.dt-center,
table.dataTable td.dt-center {
  text-align: center;
}
table.dataTable th.dt-right,
table.dataTable td.dt-right {
  text-align: right;
}
table.dataTable th.dt-justify,
table.dataTable td.dt-justify {
  text-align: justify;
}
table.dataTable th.dt-nowrap,
table.dataTable td.dt-nowrap {
  white-space: nowrap;
}
table.dataTable th.dt-empty,
table.dataTable td.dt-empty {
  text-align: center;
  vertical-align: top;
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
  text-align: left;
}
table.dataTable thead th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable tfoot td.dt-head-left {
  text-align: left;
}
table.dataTable thead th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable tfoot td.dt-head-center {
  text-align: center;
}
table.dataTable thead th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable tfoot td.dt-head-right {
  text-align: right;
}
table.dataTable thead th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable tfoot td.dt-head-justify {
  text-align: justify;
}
table.dataTable thead th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable tfoot td.dt-head-nowrap {
  white-space: nowrap;
}
table.dataTable tbody th.dt-body-left,
table.dataTable tbody td.dt-body-left {
  text-align: left;
}
table.dataTable tbody th.dt-body-center,
table.dataTable tbody td.dt-body-center {
  text-align: center;
}
table.dataTable tbody th.dt-body-right,
table.dataTable tbody td.dt-body-right {
  text-align: right;
}
table.dataTable tbody th.dt-body-justify,
table.dataTable tbody td.dt-body-justify {
  text-align: justify;
}
table.dataTable tbody th.dt-body-nowrap,
table.dataTable tbody td.dt-body-nowrap {
  white-space: nowrap;
}

:root {
  --dt-row-hover-alpha: 0.035;
  --dt-row-stripe-alpha: 0.023;
  --dt-column-ordering-alpha: 0.019;
  --dt-row-selected-stripe-alpha: 0.923;
  --dt-row-selected-column-ordering-alpha: 0.919;
}

/*
 * Table styles
 */
table.dataTable {
  width: 100%;
  margin: 0 auto;
  border-spacing: 0;
  /*
   * Header and footer styles
   */
  /*
   * Body styles
   */
}
table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold;
}
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
table.dataTable > thead > tr > th:active,
table.dataTable > thead > tr > td:active {
  outline: none;
}
table.dataTable > tfoot > tr > th,
table.dataTable > tfoot > tr > td {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  padding: 10px 10px 6px 10px;
}
table.dataTable > tbody > tr {
  background-color: transparent;
}
table.dataTable > tbody > tr:first-child > * {
  border-top: none;
}
table.dataTable > tbody > tr:last-child > * {
  border-bottom: none;
}
table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.9);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.9);
  color: rgb(255, 255, 255);
  color: rgb(var(--dt-row-selected-text));
}
table.dataTable > tbody > tr.selected a {
  color: rgb(9, 10, 11);
  color: rgb(var(--dt-row-selected-link));
}
table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td {
  padding: 8px 10px;
}
table.dataTable.row-border > tbody > tr > *, table.dataTable.display > tbody > tr > * {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
table.dataTable.row-border > tbody > tr:first-child > *, table.dataTable.display > tbody > tr:first-child > * {
  border-top: none;
}
table.dataTable.row-border > tbody > tr.selected + tr.selected > td, table.dataTable.display > tbody > tr.selected + tr.selected > td {
  border-top-color: rgba(13, 110, 253, 0.65);
  border-top-color: rgba(var(--dt-row-selected), 0.65);
}
table.dataTable.cell-border > tbody > tr > * {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}
table.dataTable.cell-border > tbody > tr > *:first-child {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}
table.dataTable.cell-border > tbody > tr:first-child > * {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
}
table.dataTable.stripe > tbody > tr:nth-child(odd) > *, table.dataTable.display > tbody > tr:nth-child(odd) > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.023);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), var(--dt-row-stripe-alpha));
}
table.dataTable.stripe > tbody > tr:nth-child(odd).selected > *, table.dataTable.display > tbody > tr:nth-child(odd).selected > * {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.923);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), var(--dt-row-selected-stripe-alpha));
}
table.dataTable.hover > tbody > tr:hover > *, table.dataTable.display > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.035);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), var(--dt-row-hover-alpha));
}
table.dataTable.hover > tbody > tr.selected:hover > *, table.dataTable.display > tbody > tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px #0d6efd !important;
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 1) !important;
}
table.dataTable.order-column > tbody tr > .sorting_1,
table.dataTable.order-column > tbody tr > .sorting_2,
table.dataTable.order-column > tbody tr > .sorting_3, table.dataTable.display > tbody tr > .sorting_1,
table.dataTable.display > tbody tr > .sorting_2,
table.dataTable.display > tbody tr > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.019);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), var(--dt-column-ordering-alpha));
}
table.dataTable.order-column > tbody tr.selected > .sorting_1,
table.dataTable.order-column > tbody tr.selected > .sorting_2,
table.dataTable.order-column > tbody tr.selected > .sorting_3, table.dataTable.display > tbody tr.selected > .sorting_1,
table.dataTable.display > tbody tr.selected > .sorting_2,
table.dataTable.display > tbody tr.selected > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.919);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), var(--dt-row-selected-column-ordering-alpha));
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_1, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_1 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.054);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha)));
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_2, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_2 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.047);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.007));
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_3, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.039);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.015));
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_1, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_1 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.954);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha)));
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_2, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_2 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.947);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.007));
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_3, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.939);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.015));
}
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.082);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha)));
}
table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.074);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.007));
}
table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.062);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.015));
}
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.982);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha)));
}
table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.974);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.007));
}
table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.962);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.015));
}
table.dataTable.compact thead th,
table.dataTable.compact thead td,
table.dataTable.compact tfoot th,
table.dataTable.compact tfoot td,
table.dataTable.compact tbody th,
table.dataTable.compact tbody td {
  padding: 4px;
}

div.dt-container div.dt-layout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0.75em 0;
}
div.dt-container div.dt-layout-row div.dt-layout-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
  justify-content: flex-start;
  margin-right: auto;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
  justify-content: flex-end;
  margin-left: auto;
}
div.dt-container div.dt-layout-row div.dt-layout-cell:empty {
  display: none;
}

@media screen and (max-width: 767px) {
  div.dt-container div.dt-layout-row:not(.dt-layout-table) {
    display: block;
  }
  div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell {
    display: block;
    text-align: center;
  }
  div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell > * {
    margin: 0.5em 0;
  }
  div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell.dt-layout-start {
    margin-right: 0;
  }
  div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell.dt-layout-end {
    margin-left: 0;
  }
}
div.dt-container div.dt-layout-start > *:not(:last-child) {
  margin-right: 1em;
}
div.dt-container div.dt-layout-end > *:not(:first-child) {
  margin-left: 1em;
}
div.dt-container div.dt-layout-full {
  width: 100%;
}
div.dt-container div.dt-layout-full > *:only-child {
  margin-left: auto;
  margin-right: auto;
}
div.dt-container div.dt-layout-table > div {
  display: block !important;
}

@media screen and (max-width: 767px) {
  div.dt-container div.dt-layout-start > *:not(:last-child) {
    margin-right: 0;
  }
  div.dt-container div.dt-layout-end > *:not(:first-child) {
    margin-left: 0;
  }
}
/*
 * Control feature layout
 */
div.dt-container {
  position: relative;
  clear: both;
}
div.dt-container .dt-search input {
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 5px;
  background-color: transparent;
  color: inherit;
  margin-left: 3px;
}
div.dt-container .dt-input {
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 5px;
  background-color: transparent;
  color: inherit;
}
div.dt-container select.dt-input {
  padding: 4px;
}
div.dt-container .dt-paging .dt-paging-button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  color: inherit !important;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
}
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
  color: inherit !important;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.05); /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* FF3.6+ */ /* IE10+ */ /* Opera 11.10+ */
  background: linear-gradient(to bottom, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%); /* W3C */
}
div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {
  cursor: default;
  color: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}
div.dt-container .dt-paging .dt-paging-button:hover {
  color: white !important;
  border: 1px solid #111;
  background-color: #111; /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* FF3.6+ */ /* IE10+ */ /* Opera 11.10+ */
  background: linear-gradient(to bottom, #585858 0%, #111 100%); /* W3C */
}
div.dt-container .dt-paging .dt-paging-button:active {
  outline: none;
  background-color: #0c0c0c; /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* FF3.6+ */ /* IE10+ */ /* Opera 11.10+ */
  background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%); /* W3C */
  box-shadow: inset 0 0 3px #111;
}
div.dt-container .dt-paging .ellipsis {
  padding: 0 1em;
}
div.dt-container .dt-length,
div.dt-container .dt-search,
div.dt-container .dt-info,
div.dt-container .dt-processing,
div.dt-container .dt-paging {
  color: inherit;
}
div.dt-container .dataTables_scroll {
  clear: both;
}
div.dt-container .dataTables_scroll div.dt-scroll-body {
  -webkit-overflow-scrolling: touch;
}
div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > th, div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > td, div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > th, div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > td {
  vertical-align: middle;
}
div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > th > div.dataTables_sizing,
div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > td > div.dataTables_sizing, div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > th > div.dataTables_sizing,
div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > td > div.dataTables_sizing {
  height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}
div.dt-container.dt-empty-footer tbody > tr:last-child > * {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
div.dt-container.dt-empty-footer .dt-scroll-body {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
div.dt-container.dt-empty-footer .dt-scroll-body tbody > tr:last-child > * {
  border-bottom: none;
}

html.dark {
  --dt-row-hover: 255, 255, 255;
  --dt-row-stripe: 255, 255, 255;
  --dt-column-ordering: 255, 255, 255;
}
html.dark table.dataTable > thead > tr > th,
html.dark table.dataTable > thead > tr > td {
  border-bottom: 1px solid rgb(89, 91, 94);
}
html.dark table.dataTable > thead > tr > th:active,
html.dark table.dataTable > thead > tr > td:active {
  outline: none;
}
html.dark table.dataTable > tfoot > tr > th,
html.dark table.dataTable > tfoot > tr > td {
  border-top: 1px solid rgb(89, 91, 94);
}
html.dark table.dataTable.row-border > tbody > tr > *, html.dark table.dataTable.display > tbody > tr > * {
  border-top: 1px solid rgb(64, 67, 70);
}
html.dark table.dataTable.row-border > tbody > tr:first-child > *, html.dark table.dataTable.display > tbody > tr:first-child > * {
  border-top: none;
}
html.dark table.dataTable.row-border > tbody > tr.selected + tr.selected > td, html.dark table.dataTable.display > tbody > tr.selected + tr.selected > td {
  border-top-color: rgba(13, 110, 253, 0.65);
  border-top-color: rgba(var(--dt-row-selected), 0.65);
}
html.dark table.dataTable.cell-border > tbody > tr > th,
html.dark table.dataTable.cell-border > tbody > tr > td {
  border-top: 1px solid rgb(64, 67, 70);
  border-right: 1px solid rgb(64, 67, 70);
}
html.dark table.dataTable.cell-border > tbody > tr > th:first-child,
html.dark table.dataTable.cell-border > tbody > tr > td:first-child {
  border-left: 1px solid rgb(64, 67, 70);
}
html.dark .dt-container.dt-empty-footer table.dataTable {
  border-bottom: 1px solid rgb(89, 91, 94);
}
html.dark .dt-container .dt-search input,
html.dark .dt-container .dt-length select {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: var(--dt-html-background);
}
html.dark .dt-container .dt-paging .dt-paging-button.current, html.dark .dt-container .dt-paging .dt-paging-button.current:hover {
  border: 1px solid rgb(89, 91, 94);
  background: rgba(255, 255, 255, 0.15);
}
html.dark .dt-container .dt-paging .dt-paging-button.disabled, html.dark .dt-container .dt-paging .dt-paging-button.disabled:hover, html.dark .dt-container .dt-paging .dt-paging-button.disabled:active {
  color: #666 !important;
}
html.dark .dt-container .dt-paging .dt-paging-button:hover {
  border: 1px solid rgb(53, 53, 53);
  background: rgb(53, 53, 53);
}
html.dark .dt-container .dt-paging .dt-paging-button:active {
  background: #3a3a3a;
}

/*
 * Overrides for RTL support
 */
*[dir=rtl] table.dataTable thead th,
*[dir=rtl] table.dataTable thead td,
*[dir=rtl] table.dataTable tfoot th,
*[dir=rtl] table.dataTable tfoot td {
  text-align: right;
}
*[dir=rtl] table.dataTable th.dt-type-numeric, *[dir=rtl] table.dataTable th.dt-type-date,
*[dir=rtl] table.dataTable td.dt-type-numeric,
*[dir=rtl] table.dataTable td.dt-type-date {
  text-align: left;
}
*[dir=rtl] div.dt-container div.dt-layout-cell.dt-start {
  text-align: right;
}
*[dir=rtl] div.dt-container div.dt-layout-cell.dt-end {
  text-align: left;
}
*[dir=rtl] div.dt-container div.dt-search input {
  margin: 0 3px 0 0;
}


.dt-length {
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-08ea68d4] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-08ea68d4] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-08ea68d4] {
        background: #3A464F;
        border-radius: 7.5px; border: none;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-08ea68d4] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-08ea68d4] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-08ea68d4] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-e9888b22] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-e9888b22] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-e9888b22] {
        background: #3A464F;
        border-radius: 7.5px; border: none;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-e9888b22] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-e9888b22] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-e9888b22] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.mapvideo-vlm-alert { display: flex; align-items: center; justify-content: center; background: #c82e45; border: 3px solid #fff0c1; border-radius: 50%; color: #fff; font-size: 24px; font-weight: 900; box-shadow: 0 0 0 3px #ff7844;
}
.mapvideo-vlm-cluster { display: flex; align-items: center; justify-content: center; background: #247d8c; border: 3px solid #c1f1ed; border-radius: 50%; color: white; font-weight: bold;
}
.mapvideo-vlm-cluster.is-abnormal { background: #c82e45; border-color: #ffe0ac;
}
.mapvideo-vlm-result { padding: 10px; background: #1d2c37; color: #e8f3fa; max-height: 180px; overflow: auto;
}
.mapvideo-vlm-result strong { color: #7ee1d3;
}
.mapvideo-vlm-result p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0;
}
.uk-radio:checked {
        background-color: #2ec4c2 !important; /* 將選中的顏色改為綠色 (現代瀏覽器支援) */
}

    /* 當 TaichungTree 為 true 時，箭頭向下 */
#treeview .caret.open::before {
        transform: rotate(90deg); /* 向下旋轉箭頭 */
}

    /* 調整彈出視窗邊緣和箭頭為背景色 */
.leaflet-popup-content-wrapper {
        background-color: #262b31 !important;
        color: #fff; /* 設置文字顏色為白色以便可見 */
        padding: 10px !important; /* 可調整內容間距 */
        box-shadow: none !important; /* 移除陰影 */
        border: none !important;
        border-radius: 10px !important; /* 移除圓角 */
}
.zone-button-group {
        overflow-x: auto; /* 啟用 X 軸滾動 */
        overflow-y: hidden; /* 禁用 Y 軸滾動 */
        scrollbar-width: none; /* 隱藏滾動條（適用於 Firefox） */
        -ms-overflow-style: none; /* 隱藏滾動條（適用於 IE 和 Edge） */
}
.zone-button-group::-webkit-scrollbar {
            display: none; /* 隱藏滾動條（適用於 Chrome/Safari/Edge） */
}
.map-hint-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.35);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        animation: fadeIn 0.3s ease;
}
.map-hint-box {
        background: rgba(30, 30, 30, 0.95);
        padding: 20px 30px;
        border-radius: 12px;
        text-align: center;
        color: #fff;
        box-shadow: 0 10px 25px rgba(0,0,0,0.4);
        max-width: 400px;
}
.hint-title {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 12px;
}
.hint-content {
        font-size: 18px;
        line-height: 1.8;
}
.hint-close {
        font-size: 14px;
        margin-top: 16px;
        color: #999;
}
@keyframes fadeIn {
from {
            opacity: 0;
}
to {
            opacity: 1;
}
}
.is-disabled {
        opacity: 0.4;
        cursor: not-allowed;
}
.hint-layer {
        position: absolute;
        top: 40px;
        right: 0;
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
}


.event-ticker[data-v-36c0c139] { min-width: 0; flex: 1; overflow: hidden; text-align: left; background: #34282b; border: 1px solid #825244; border-radius: 6px; color: #ffd4bd; padding: 7px 10px; font-size: 12px;
}
.event-ticker span[data-v-36c0c139] { display: inline-block; white-space: nowrap; animation: event-name-scroll-36c0c139 6s linear infinite;
}
.event-ticker:hover span[data-v-36c0c139], .event-ticker:focus-visible span[data-v-36c0c139] { animation-play-state: paused;
}
@keyframes event-name-scroll-36c0c139 {
0%, 15% { transform: translateX(12px); opacity: 0;
}
25%, 75% { transform: translateX(0); opacity: 1;
}
100% { transform: translateX(-25px); opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.event-ticker span[data-v-36c0c139] { animation: none;
}
}
.camera-count[data-v-36c0c139] { color: #bfd0dc; font-size: 12px;
}
.camera-count select[data-v-36c0c139] { background: #293946; color: #fff; padding: 6px; border: 1px solid #435665; border-radius: 5px;
}
.inference-compact[data-v-36c0c139] { font-size: 12px; white-space: normal;
}
.location-map[data-v-36c0c139] .vlm-map-abnormal { background: #c62e43 !important; color: #fff !important; border: 3px solid #ffe0b2 !important; box-shadow: 0 0 0 3px #ff693a, 0 3px 12px #7d001ccc !important; font-weight: 900;
}
.location-map[data-v-36c0c139] .vlm-camera-dot.vlm-map-abnormal { font-size: 22px;
}
.map-empty[data-v-36c0c139] { padding: 10px; color: #b9cbd6; font-size: 12px;
}
.location-list button[data-v-36c0c139] { font: inherit; line-height: inherit; padding: 0; background: transparent; border: 0; color: #ffb3bb; text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.event-center[data-v-36c0c139] { flex: 1; min-width: 180px; max-width: 520px; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.beacon-button[data-v-36c0c139] { display: flex; align-items: center; gap: 7px; flex-shrink: 0; border: 1px solid #425763; border-radius: 8px; padding: 6px 10px; color: #9caeb9; background: #25313a;
}
.has-events .beacon-button[data-v-36c0c139] { color: #ffd6a2; border-color: #f28e4b; background: #492b25;
}
.has-events .beacon-button svg[data-v-36c0c139] { color: #ff8b57; filter: drop-shadow(0 0 5px #ff5638);
}
.event-dialog[data-v-36c0c139] { width: min(1100px, 92vw); max-height: 88dvh; padding: 0; margin: auto; border: 1px solid #dd835c; border-radius: 12px; background: #1b2731; color: #eaf2f7; box-shadow: 0 20px 80px #000b;
}
.event-dialog[data-v-36c0c139]::backdrop { background: #000b;
}
.event-dialog header[data-v-36c0c139] { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; background: #3e292b;
}
.event-dialog header strong[data-v-36c0c139] { color: #ffbb96;
}
.event-dialog header button[data-v-36c0c139] { background: #573a3e; border: 1px solid #b98a8b; color: white; padding: 7px 12px; border-radius: 5px;
}
.event-dialog-body[data-v-36c0c139] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
}
.event-live[data-v-36c0c139] { background: #080d11; min-height: 220px; position: relative; display: flex; align-items: center; justify-content: center;
}
.event-live canvas[data-v-36c0c139] { position: absolute; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain;
}
.event-live img[data-v-36c0c139] { position: relative; width: 100%; height: min(55dvh, 560px); -o-object-fit: contain; object-fit: contain;
}
.event-live p[data-v-36c0c139] { position: absolute; bottom: 10px; background: #111c; padding: 8px;
}
.event-result[data-v-36c0c139] { padding: 18px; overflow-wrap: anywhere;
}
.event-result strong[data-v-36c0c139] { color: #80dad5;
}
.event-summary[data-v-36c0c139] { white-space: pre-wrap; line-height: 1.7;
}
@media (max-width: 700px) {
.event-dialog-body[data-v-36c0c139] { grid-template-columns: 1fr;
}
.event-center[data-v-36c0c139] { max-width: none; flex-basis: 100%;
}
}
.alert-error[data-v-36c0c139] { color: #ffc184; font-size: 12px;
}
.video-card.abnormal-camera[data-v-36c0c139] { border-color: #ff6c7b; box-shadow: inset 0 0 0 2px #ff6c7b;
}
.abnormal-badge[data-v-36c0c139] { margin-left: 8px; background: #8c2337; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 11px;
}
.vlm-main[data-v-36c0c139] { box-sizing: border-box; height: calc(100dvh - 72px); min-height: 0; padding: 12px 0; overflow: hidden;
}
.vlm-main .vlm-section[data-v-36c0c139] { display: flex; flex-direction: column; height: 100%; min-height: 0; margin-top: 0; overflow: hidden;
}
.vlm-section > .breadcrumb[data-v-36c0c139] { flex-shrink: 0;
}
.vlm-carousel[data-v-36c0c139] { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 12px; padding: 0 10px 10px;
}
.carousel-toolbar[data-v-36c0c139], .carousel-controls[data-v-36c0c139] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.carousel-toolbar[data-v-36c0c139] { justify-content: space-between; flex-shrink: 0; padding: 12px 14px; background: #1c252e; border: 1px solid #34414d; border-radius: 10px;
}
.summary-heading[data-v-36c0c139] { display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.summary-heading > strong[data-v-36c0c139] { font-size: 17px; letter-spacing: 0.04em;
}
.playback-badge[data-v-36c0c139] { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 20px; background: #183e3c; color: #8ce3d2; font-size: 11px;
}
.playback-badge[data-v-36c0c139]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.playback-badge.paused[data-v-36c0c139] { background: #3b3526; color: #e6cb86;
}
.summary-details[data-v-36c0c139] { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #aebdca; font-size: 12px; font-variant-numeric: tabular-nums;
}
.summary-details b[data-v-36c0c139] { color: #edf4fa;
}
.carousel-controls button[data-v-36c0c139] { padding: 9px 13px; border: 1px solid #435665; border-radius: 7px; background: #293946; color: #e0eaf1; font-size: 13px;
}
.carousel-controls button[data-v-36c0c139]:hover:not(:disabled) { background: #354b5a; border-color: #6b8b9e;
}
.carousel-controls button[data-v-36c0c139]:focus-visible { outline: 2px solid #73e1d4; outline-offset: 3px;
}
.carousel-controls .map-toggle[data-v-36c0c139] { background: transparent; color: #acc6d6; margin-right: 6px;
}
.carousel-controls .playback-control[data-v-36c0c139] { background: #245d62; border-color: #38838a; color: #ddfffa;
}
.carousel-controls button[data-v-36c0c139]:disabled { opacity: 0.5; cursor: default;
}
.video-grid[data-v-36c0c139] { display: grid; flex: 1; min-width: 0; min-height: 0; grid-template-columns: repeat(var(--camera-columns, 3), minmax(0, 1fr)); grid-template-rows: repeat(var(--camera-rows, 2), minmax(0, 1fr)); gap: 12px;
}
.carousel-content[data-v-36c0c139] { display: flex; flex: 1; min-height: 0; gap: 12px;
}
.location-panel[data-v-36c0c139] { flex: 0 0 230px; min-width: 0; overflow: auto; background: #1b252e; border: 1px solid #344652; border-radius: 10px;
}
.location-heading[data-v-36c0c139] { display: block; padding: 14px 12px; color: #bde9e4; font-size: 13px;
}
.location-map[data-v-36c0c139] .vlm-camera-dot { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #ffbf36; color: #152b3b; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #243b50, 0 3px 8px #0009;
}
.location-map[data-v-36c0c139] .vlm-camera-dot svg { flex: none; width: 20px; height: 20px;
}
.location-map[data-v-36c0c139] .vlm-camera-cluster { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 3px solid #fff; border-radius: 50%; background: #163d59; color: #fff; box-shadow: 0 0 0 3px #ffbf36, 0 3px 10px #0008; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.location-map[data-v-36c0c139] .vlm-camera-dot:hover, .location-map[data-v-36c0c139] .vlm-camera-dot:focus-visible,
.location-map[data-v-36c0c139] .vlm-camera-cluster:hover, .location-map[data-v-36c0c139] .vlm-camera-cluster:focus-visible { outline: 3px solid #ff7d17; outline-offset: 3px;
}
.map-actions[data-v-36c0c139] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 10px 10px;
}
.map-actions button[data-v-36c0c139] { background: #293f4c; border: 1px solid #526c7c; color: #e0edf5; padding: 5px 8px; border-radius: 5px; font-size: 12px;
}
.map-actions small[data-v-36c0c139] { color: #afc2cf; font-size: 11px;
}
.video-card.selected-camera[data-v-36c0c139] { border-color: #ffce66; box-shadow: 0 0 0 2px #ffce6680;
}
.location-map[data-v-36c0c139] .vlm-map-marker.vlm-map-selected { background: #ffce66; color: #36270c;
}
.location-map[data-v-36c0c139] { height: 260px; width: 100%; z-index: 0; background: #26333b;
}
.location-map[data-v-36c0c139] .leaflet-attribution-flag { display: none;
}
.location-list[data-v-36c0c139] { padding: 0 12px 0 42px; font-size: 12px; overflow-wrap: anywhere;
}
.location-list li[data-v-36c0c139] { margin: 0; padding: 10px 2px; border-bottom: 1px solid #303e49; color: #c0ced8;
}
.location-list li[data-v-36c0c139]::marker { color: #79d7cc; font-weight: 700;
}
.location-map[data-v-36c0c139] .vlm-map-marker { background: #2ec4c2; border: 2px solid white; border-radius: 12px; color: #10272a; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 1px 4px #0008;
}
.camera-title[data-v-36c0c139] { display: flex; align-items: center; gap: 9px; flex-shrink: 0; padding: 8px 10px; background: #202c36;
}
.camera-number[data-v-36c0c139] { flex-shrink: 0; min-width: 30px; padding: 2px 6px; border-radius: 5px; background: #314651; color: #a8ece2; text-align: center; font-size: 11px; font-weight: 700;
}
.camera-name[data-v-36c0c139] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dfebf3; font-size: 12px;
}
.video-card[data-v-36c0c139] { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; width: 100%; background: #111; border-radius: 8px; overflow: hidden; border: 1px solid #3a4a57; box-shadow: 0 3px 12px #0003;
}
.fullscreen-button[data-v-36c0c139] { flex-shrink: 0; padding: 5px 8px; border: 1px solid #486171; border-radius: 5px; background: #2a3b47; color: #d7eee9; font-size: 11px;
}
.fullscreen-button[data-v-36c0c139]:hover { background: #3b5966;
}
.fullscreen-button[data-v-36c0c139]:focus-visible { outline: 2px solid #73e1d4; outline-offset: 2px;
}
.video-card[data-v-36c0c139]:fullscreen { width: 100vw; height: 100dvh; max-width: none; border: 0; border-radius: 0; overflow-y: auto;
}
.video-card:fullscreen .camera-title[data-v-36c0c139] { padding: 12px 16px;
}
.video-card:fullscreen .camera-name[data-v-36c0c139] { font-size: 16px;
}
.video-card:fullscreen .fullscreen-button[data-v-36c0c139] { padding: 9px 14px; font-size: 14px;
}
.video-card[data-v-36c0c139]:fullscreen::backdrop { background: #000;
}
.camera-image[data-v-36c0c139] { position: relative; flex: 1; min-height: 0; overflow: hidden;
}
.camera-last-frame[data-v-36c0c139] { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
}
.camera-image img[data-v-36c0c139] { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; -o-object-fit: fill; object-fit: fill; display: block;
}
.inference-result[data-v-36c0c139] { flex: 0 0 48px; min-height: 0; padding: 5px 10px; overflow: auto; line-height: 1.4; background: #1a242d; border-top: 1px solid #34434f;
}
.inference-result strong[data-v-36c0c139] { color: #76d4d2; font-size: 12px;
}
.inference-meta[data-v-36c0c139] { display: flex; flex-wrap: wrap; gap: 2px 8px; color: #94b2c1; font-size: 11px; margin: 2px 0;
}
.inference-line[data-v-36c0c139] { margin: 1px 0; color: #d1dce3; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.inference-line b[data-v-36c0c139] { color: #92bbb9; font-weight: 500;
}
.inference-line.inference-alert[data-v-36c0c139] { color: #ffcb79;
}
.inference-placeholder[data-v-36c0c139] { margin: 3px 0 0; color: #8e9fac; font-size: 12px;
}
.image-status[data-v-36c0c139] { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; text-align: center;
}
@media (max-width: 1100px) {
.carousel-content[data-v-36c0c139] { flex-direction: column; overflow-y: auto;
}
.location-panel[data-v-36c0c139] { flex: none; overflow: visible;
}
.location-map[data-v-36c0c139] { height: 220px;
}
.video-grid[data-v-36c0c139] { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(340px, auto);
}
}
@media (max-width: 600px) {
.video-grid[data-v-36c0c139] { grid-template-columns: 1fr;
}
.carousel-controls[data-v-36c0c139] { width: 100%;
}
.carousel-controls button[data-v-36c0c139] { flex: 1; padding: 9px 6px;
}
.carousel-controls .map-toggle[data-v-36c0c139] { margin-right: 0;
}
}
.location-panel[data-v-36c0c139]:fullscreen { display: flex; flex-direction: column; width: 100vw; height: 100dvh; padding: 12px; border: 0; border-radius: 0; overflow: hidden;
}
.location-panel:fullscreen .location-map[data-v-36c0c139] { flex: 1; min-height: 0; height: auto; border-radius: 8px;
}
.location-panel:fullscreen .location-list[data-v-36c0c139] { display: none;
}
.location-panel:fullscreen .location-heading[data-v-36c0c139], .location-panel:fullscreen .map-actions[data-v-36c0c139] { flex-shrink: 0;
}
.location-panel:fullscreen .map-actions button[data-v-36c0c139] { padding: 9px 14px; font-size: 14px;
}
.location-panel[data-v-36c0c139]:fullscreen::backdrop { background: #111;
}
.map-error[data-v-36c0c139] { padding: 0 12px; color: #ffd19a;
}


@media (max-width: 1280px) { /* 設定響應式閾值 */
.sections-group {
            flex-direction: column; /* 改為上下排列 */
}
.LocationTree-section {
            width: 100% !important;
            height: 20vh !important;
}
.treeview-wrapper {
            height: 80% !important; /* 設定容器的最大高度，例如 20vh */
            overflow-y: auto; /* 當內容超出時啟用垂直捲動 */
            overflow-x: hidden; /* 隱藏水平捲動條 */
}
.Result-section {
            height: 60vh !important;
}
.collapse-btn {
            display: none !important;
}
}


@media (max-width: 1280px) { /* 設定響應式閾值 */
.sections-group {
            flex-direction: column; /* 改為上下排列 */
}
.LocationTree-section {
            width: 100% !important;
            height: 20vh !important;
}
.treeview-wrapper {
            height: 80% !important; /* 設定容器的最大高度，例如 20vh */
            overflow-y: auto; /* 當內容超出時啟用垂直捲動 */
            overflow-x: hidden; /* 隱藏水平捲動條 */
}
.Result-section {
            height: 60vh !important;
}
.collapse-btn {
            display: none !important;
}
}


@media (max-width: 1280px) { /* 設定響應式閾值 */
.sections-group {
            flex-direction: column; /* 改為上下排列 */
}
.LocationTree-section {
            width: 100% !important;
            height: 20vh !important;
}
.treeview-wrapper {
            height: 80% !important; /* 設定容器的最大高度，例如 20vh */
            overflow-y: auto; /* 當內容超出時啟用垂直捲動 */
            overflow-x: hidden; /* 隱藏水平捲動條 */
}
.Result-section {
            height: 60vh !important;
}
.collapse-btn {
            display: none !important;
}
}


@media (max-width: 1280px) { /* 設定響應式閾值 */
.sections-group {
            flex-direction: column; /* 改為上下排列 */
}
.LocationTree-section {
            width: 100% !important;
            height: 20vh !important;
}
.treeview-wrapper {
            height: 80% !important; /* 設定容器的最大高度，例如 20vh */
            overflow-y: auto; /* 當內容超出時啟用垂直捲動 */
            overflow-x: hidden; /* 隱藏水平捲動條 */
}
.Result-section {
            height: 60vh !important;
}
.collapse-btn {
            display: none !important;
}
}


@media (max-width: 1280px) { /* 設定響應式閾值 */
.sections-group {
            flex-direction: column; /* 改為上下排列 */
}
.LocationTree-section {
            width: 100% !important;
            height: 20vh !important;
}
.treeview-wrapper {
            height: 80% !important; /* 設定容器的最大高度，例如 20vh */
            overflow-y: auto; /* 當內容超出時啟用垂直捲動 */
            overflow-x: hidden; /* 隱藏水平捲動條 */
}
.Result-section {
            height: 60vh !important;
}
.collapse-btn {
            display: none !important;
}
}


@media (max-width: 1280px) { /* 設定響應式閾值 */
.sections-group {
            flex-direction: column; /* 改為上下排列 */
}
.LocationTree-section {
            width: 100% !important;
            height: 20vh !important;
}
.treeview-wrapper {
            height: 80% !important; /* 設定容器的最大高度，例如 20vh */
            overflow-y: auto; /* 當內容超出時啟用垂直捲動 */
            overflow-x: hidden; /* 隱藏水平捲動條 */
}
.Result-section {
            height: 60vh !important;
}
.collapse-btn {
            display: none !important;
}
}


@media (max-width: 1280px) { /* 設定響應式閾值 */
.sections-group {
            flex-direction: column; /* 改為上下排列 */
}
.LocationTree-section {
            width: 100% !important;
            height: 20vh !important;
}
.treeview-wrapper {
            height: 80% !important; /* 設定容器的最大高度，例如 20vh */
            overflow-y: auto; /* 當內容超出時啟用垂直捲動 */
            overflow-x: hidden; /* 隱藏水平捲動條 */
}
.Result-section {
            height: 60vh !important;
}
.collapse-btn {
            display: none !important;
}
}


@media (max-width: 1280px) { /* 設定響應式閾值 */
.sections-group {
            flex-direction: column; /* 改為上下排列 */
}
.LocationTree-section {
            width: 100% !important;
            height: 20vh !important;
}
.treeview-wrapper {
            height: 80% !important; /* 設定容器的最大高度，例如 20vh */
            overflow-y: auto; /* 當內容超出時啟用垂直捲動 */
            overflow-x: hidden; /* 隱藏水平捲動條 */
}
.Result-section {
            height: 60vh !important;
}
.collapse-btn {
            display: none !important;
}
}


    /* 表格基礎樣式 */
#airPollutionInteractiveTable[data-v-8d118e8e] {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
        background-color: #2f2f2f;
        color: #ffffff;
}
#airPollutionInteractiveTable thead tr[data-v-8d118e8e] {
            background-color: #1e1e1e;
}
#airPollutionInteractiveTable thead th[data-v-8d118e8e] {
            text-align: right; /* Location 列置中 */
            padding: 10px;
            border-bottom: 1px solid #444444;
}
#airPollutionInteractiveTable thead th[data-v-8d118e8e]:nth-child(2) {
                text-align: left; /* Location 列置中 */
}
#airPollutionInteractiveTable tbody tr[data-v-8d118e8e] {
            border-bottom: 1px solid #444444; /* 每筆數據小細線 */
}
#airPollutionInteractiveTable tbody td[data-v-8d118e8e] {
            text-align: right; /* 預設靠右 */
            padding: 10px;
}
#airPollutionInteractiveTable tbody td[data-v-8d118e8e]:nth-child(2) {
                text-align: left; /* Location 列置中 */
}

        /* 滑鼠懸停效果 */
#airPollutionInteractiveTable tbody tr[data-v-8d118e8e]:hover {
            cursor: pointer;
}

        /* 被選中行的樣式 */
#airPollutionInteractiveTable tbody tr.selected[data-v-8d118e8e] {
            background-color: #5a7689;
}



    /* 表格基礎樣式 */
#WLInteractiveTable[data-v-2f48ecaa] {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
        background-color: #2f2f2f;
        color: #ffffff;
}
#WLInteractiveTable thead tr[data-v-2f48ecaa] {
            background-color: #1e1e1e;
}
#WLInteractiveTable thead th[data-v-2f48ecaa] {
            text-align: right; /* Location 列置中 */
            padding: 10px;
            border-bottom: 1px solid #444444;
}
#WLInteractiveTable thead th[data-v-2f48ecaa]:nth-child(2) {
                text-align: left; /* Location 列置中 */
}
#WLInteractiveTable tbody tr[data-v-2f48ecaa] {
            border-bottom: 1px solid #444444; /* 每筆數據小細線 */
}
#WLInteractiveTable tbody td[data-v-2f48ecaa] {
            text-align: right; /* 預設靠右 */
            padding: 10px;
}
#WLInteractiveTable tbody td[data-v-2f48ecaa]:nth-child(2) {
                text-align: left; /* Location 列置中 */
}

        /* 滑鼠懸停效果 */
#WLInteractiveTable tbody tr[data-v-2f48ecaa]:hover {
            cursor: pointer;
}

        /* 被選中行的樣式 */
#WLInteractiveTable tbody tr.selected[data-v-2f48ecaa] {
            background-color: #5a7689;
}


    /* 表格基礎樣式 */
#airPollutionInteractiveTable[data-v-7b7165b8] {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
        background-color: #2f2f2f;
        color: #ffffff;
}
#airPollutionInteractiveTable thead tr[data-v-7b7165b8] {
            background-color: #1e1e1e;
}
#airPollutionInteractiveTable thead th[data-v-7b7165b8] {
            text-align: right; /* Location 列置中 */
            padding: 10px;
            border-bottom: 1px solid #444444;
}
#airPollutionInteractiveTable thead th[data-v-7b7165b8]:nth-child(2) {
                text-align: left; /* Location 列置中 */
}
#airPollutionInteractiveTable tbody tr[data-v-7b7165b8] {
            border-bottom: 1px solid #444444; /* 每筆數據小細線 */
}
#airPollutionInteractiveTable tbody td[data-v-7b7165b8] {
            text-align: right; /* 預設靠右 */
            padding: 10px;
}
#airPollutionInteractiveTable tbody td[data-v-7b7165b8]:nth-child(2) {
                text-align: left; /* Location 列置中 */
}

        /* 滑鼠懸停效果 */
#airPollutionInteractiveTable tbody tr[data-v-7b7165b8]:hover {
            cursor: pointer;
}

        /* 被選中行的樣式 */
#airPollutionInteractiveTable tbody tr.selected[data-v-7b7165b8] {
            background-color: #5a7689;
}



    /* 表格基礎樣式 */
#airPollutionInteractiveTable[data-v-629f6bc4] {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
        background-color: #2f2f2f;
        color: #ffffff;
}
#airPollutionInteractiveTable thead tr[data-v-629f6bc4] {
            background-color: #1e1e1e;
}
#airPollutionInteractiveTable thead th[data-v-629f6bc4] {
            text-align: right;
            padding: 10px;
            border-bottom: 1px solid #444444;
}
#airPollutionInteractiveTable thead th[data-v-629f6bc4]:nth-child(2) {
                text-align: left;
}
#airPollutionInteractiveTable tbody tr[data-v-629f6bc4] {
            border-bottom: 1px solid #444444;
}
#airPollutionInteractiveTable tbody td[data-v-629f6bc4] {
            text-align: right;
            padding: 10px;
}
#airPollutionInteractiveTable tbody td[data-v-629f6bc4]:nth-child(2) {
                text-align: left;
}
#airPollutionInteractiveTable tbody tr[data-v-629f6bc4]:hover {
            cursor: pointer;
}
#airPollutionInteractiveTable tbody tr.selected[data-v-629f6bc4] {
            background-color: #5a7689;
}


.dashboard-wrapper[data-v-3d5d4b85] {
        display: flex;
        flex-direction: column;
}
.statistics-row[data-v-3d5d4b85] {
        flex: 1; /* 讓每個 statistics-row 佔據 50% 高度 */
        display: flex;
        justify-content: center;
        align-items: center;
}
.statistics-content.statistics-ratio[data-v-3d5d4b85],
    .statistics-content.statistics-detectors[data-v-3d5d4b85] {
        width: 100%; /* 控制內容寬度 */
}



.dashboard-wrapper[data-v-c3e11c3e] {
        display: flex;
        flex-direction: column;
}
.statistics-row[data-v-c3e11c3e] {
        flex: 1; /* 讓每個 statistics-row 佔據 50% 高度 */
        display: flex;
        justify-content: center;
        align-items: center;
}
.statistics-content.statistics-ratio[data-v-c3e11c3e],
    .statistics-content.statistics-detectors[data-v-c3e11c3e] {
        width: 100%; /* 控制內容寬度 */
}



.dashboard-wrapper[data-v-b158a73e] {
        display: flex;
        flex-direction: column;
}
.statistics-row[data-v-b158a73e] {
        flex: 1; /* 讓每個 statistics-row 佔據 50% 高度 */
        display: flex;
        justify-content: center;
        align-items: center;
}
.statistics-content.statistics-ratio[data-v-b158a73e],
    .statistics-content.statistics-detectors[data-v-b158a73e] {
        width: 100%; /* 控制內容寬度 */
}



.dashboard-wrapper[data-v-f543c5c0] {
        display: flex;
        flex-direction: column;
}
.statistics-row[data-v-f543c5c0] {
        flex: 1; /* 讓每個 statistics-row 佔據 50% 高度 */
        display: flex;
        justify-content: center;
        align-items: center;
}
.statistics-content.statistics-ratio[data-v-f543c5c0],
    .statistics-content.statistics-detectors[data-v-f543c5c0] {
        width: 100%; /* 控制內容寬度 */
}



.dashboard-wrapper[data-v-8404ac50] {
        display: flex;
        flex-direction: column;
}
.statistics-row[data-v-8404ac50] {
        flex: 1; /* 讓每個 statistics-row 佔據 50% 高度 */
        display: flex;
        justify-content: center;
        align-items: center;
}
.statistics-content.statistics-ratio[data-v-8404ac50],
    .statistics-content.statistics-detectors[data-v-8404ac50] {
        width: 100%; /* 控制內容寬度 */
}



.dashboard-wrapper[data-v-511b4338] {
        display: flex;
        flex-direction: column;
}
.statistics-row[data-v-511b4338] {
        flex: 1; /* 讓每個 statistics-row 佔據 50% 高度 */
        display: flex;
        justify-content: center;
        align-items: center;
}
.statistics-content.statistics-ratio[data-v-511b4338],
    .statistics-content.statistics-detectors[data-v-511b4338] {
        width: 100%; /* 控制內容寬度 */
}



.dashboard-wrapper[data-v-393c2bcc] {
        display: flex;
        flex-direction: column;
}
.statistics-row[data-v-393c2bcc] {
        flex: 1; /* 讓每個 statistics-row 佔據 50% 高度 */
        display: flex;
        justify-content: center;
        align-items: center;
}
.statistics-content.statistics-ratio[data-v-393c2bcc],
    .statistics-content.statistics-detectors[data-v-393c2bcc] {
        width: 100%; /* 控制內容寬度 */
}



.dashboard-wrapper[data-v-7c1cfe70] {
        display: flex;
        flex-direction: column;
}
.statistics-row[data-v-7c1cfe70] {
        flex: 1; /* 讓每個 statistics-row 佔據 50% 高度 */
        display: flex;
        justify-content: center;
        align-items: center;
}
.statistics-content.statistics-ratio[data-v-7c1cfe70],
    .statistics-content.statistics-detectors[data-v-7c1cfe70] {
        width: 100%; /* 控制內容寬度 */
}



.statistics-content.statistics-ratio[data-v-29408fbf] {
        height: 50vh !important;
}


    /* 表格基礎樣式 */
#airPollutionInteractiveTable[data-v-4ec717a8] {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
        background-color: #2f2f2f;
        color: #ffffff;
}
#airPollutionInteractiveTable thead tr[data-v-4ec717a8] {
            background-color: #1e1e1e;
}
#airPollutionInteractiveTable thead th[data-v-4ec717a8] {
            text-align: right; /* Location 列置中 */
            padding: 10px;
            border-bottom: 1px solid #444444;
}
#airPollutionInteractiveTable thead th[data-v-4ec717a8]:nth-child(2) {
                text-align: left; /* Location 列置中 */
}
#airPollutionInteractiveTable tbody tr[data-v-4ec717a8] {
            border-bottom: 1px solid #444444; /* 每筆數據小細線 */
}
#airPollutionInteractiveTable tbody td[data-v-4ec717a8] {
            text-align: right; /* 預設靠右 */
            padding: 10px;
}
#airPollutionInteractiveTable tbody td[data-v-4ec717a8]:nth-child(2) {
                text-align: left; /* Location 列置中 */
}

        /* 滑鼠懸停效果 */
#airPollutionInteractiveTable tbody tr[data-v-4ec717a8]:hover {
            cursor: pointer;
}

        /* 被選中行的樣式 */
#airPollutionInteractiveTable tbody tr.selected[data-v-4ec717a8] {
            background-color: #5a7689;
}



.dashboard-wrapper[data-v-7ff8588e] {
        display: flex;
        flex-direction: column;
}
.statistics-row[data-v-7ff8588e] {
        flex: 1; /* 讓每個 statistics-row 佔據 50% 高度 */
        display: flex;
        justify-content: center;
        align-items: center;
}
.statistics-content.statistics-ratio[data-v-7ff8588e],
    .statistics-content.statistics-detectors[data-v-7ff8588e] {
        width: 100%; /* 控制內容寬度 */
}



.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}

    /* 更改上方按鈕的背景顏色 */
.dt-button.buttons-collection {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}
.dt-button.buttons-copy.buttons-html5 {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}
.dt-button.buttons-print {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}
.dt-button.buttons-excel.buttons-html5 {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}

    /* 更改下方選項集合的背景顏色 */
.dt-button-collection {
        background-color: #212529;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}

        /* 更改下方選項內部按鈕的背景顏色和邊框 */
.dt-button-collection .dt-button {
            background-color: transparent; /* 保持按鈕背景透明 */
            color: #ffffff; /* 設置按鈕文字為白色 */
            border: none; /* 移除按鈕邊框 */
}

    /* 鼠標懸停時的效果 (可選) */
.dt-button:hover {
        background-color: #495057; /* 深色背景 */
        color: #ffffff; /* 白色文字 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.01px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.01px solid gray; /* 設置每行的下邊框 */
        padding-top: 7.5px !important;
        padding-bottom: 7.5px !important;
}
th, td {
        white-space: normal; /* 允許文字換行 */
}


.form-select[data-v-5d0996ee] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg) !important;
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}

    /* 更改上方按鈕的背景顏色 */
.dt-button.buttons-collection {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}
.dt-button.buttons-copy.buttons-html5 {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}
.dt-button.buttons-print {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}
.dt-button.buttons-excel.buttons-html5 {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}

    /* 更改下方選項集合的背景顏色 */
.dt-button-collection {
        background-color: #212529;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}

        /* 更改下方選項內部按鈕的背景顏色和邊框 */
.dt-button-collection .dt-button {
            background-color: transparent; /* 保持按鈕背景透明 */
            color: #ffffff; /* 設置按鈕文字為白色 */
            border: none; /* 移除按鈕邊框 */
}

    /* 鼠標懸停時的效果 (可選) */
.dt-button:hover {
        background-color: #495057; /* 深色背景 */
        color: #ffffff; /* 白色文字 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.01px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.01px solid gray; /* 設置每行的下邊框 */
        padding-top: 7.5px !important;
        padding-bottom: 7.5px !important;
}
th, td {
        white-space: normal; /* 允許文字換行 */
}


.form-select[data-v-4fc8dc3d] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg) !important;
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}

    /* 更改上方按鈕的背景顏色 */
.dt-button.buttons-collection {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}
.dt-button.buttons-copy.buttons-html5 {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}
.dt-button.buttons-print {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}
.dt-button.buttons-excel.buttons-html5 {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}

    /* 更改下方選項集合的背景顏色 */
.dt-button-collection {
        background-color: #212529;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}

        /* 更改下方選項內部按鈕的背景顏色和邊框 */
.dt-button-collection .dt-button {
            background-color: transparent; /* 保持按鈕背景透明 */
            color: #ffffff; /* 設置按鈕文字為白色 */
            border: none; /* 移除按鈕邊框 */
}

    /* 鼠標懸停時的效果 (可選) */
.dt-button:hover {
        background-color: #495057; /* 深色背景 */
        color: #ffffff; /* 白色文字 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.01px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.01px solid gray; /* 設置每行的下邊框 */
        padding-top: 7.5px !important;
        padding-bottom: 7.5px !important;
}
th, td {
        white-space: normal; /* 允許文字換行 */
}


.form-select[data-v-56420bc4] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg) !important;
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
            border-top: 0.01px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.01px solid gray; /* 設置每行的下邊框 */
            padding-top: 7.5px !important;
            padding-bottom: 7.5px !important;
}


.form-select[data-v-6a29ea3a] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
            border-top: 0.01px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.01px solid gray; /* 設置每行的下邊框 */
            padding-top: 7.5px !important;
            padding-bottom: 7.5px !important;
}


.form-select[data-v-7c8d51cc] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-7c8d51cc] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-7c8d51cc] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-7c8d51cc] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-7c8d51cc] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-7c8d51cc] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length {
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}

    /* 更改上方按鈕的背景顏色 */
.dt-button.buttons-collection {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}
.dt-button.buttons-copy.buttons-html5 {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}
.dt-button.buttons-print {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}
.dt-button.buttons-excel.buttons-html5 {
        background-color: #315A6D !important;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}

    /* 更改下方選項集合的背景顏色 */
.dt-button-collection {
        background-color: #212529;
        color: #ffffff; /* 可選，設置文字顏色為白色 */
        border: none; /* 移除邊框 */
}

        /* 更改下方選項內部按鈕的背景顏色和邊框 */
.dt-button-collection .dt-button {
            background-color: transparent; /* 保持按鈕背景透明 */
            color: #ffffff; /* 設置按鈕文字為白色 */
            border: none; /* 移除按鈕邊框 */
}

    /* 鼠標懸停時的效果 (可選) */
.dt-button:hover {
        background-color: #495057; /* 深色背景 */
        color: #ffffff; /* 白色文字 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
th, td {
        white-space: normal; /* 允許文字換行 */
}


#TrafficVDSdetails[data-v-e781f4f8] {
        border: 0.5px solid black !important; /* 整個表格外框 */
        border-collapse: collapse !important; /* 合併邊框，避免雙線條 */
}
#TrafficVDSdetails th[data-v-e781f4f8],
        #TrafficVDSdetails td[data-v-e781f4f8] {
            border: 0.5px solid black !important; /* 單元格的邊框 */
            text-align: center !important; /* 可選：設置單元格內容居中 */
            padding: 8px; /* 可選：增加內邊距 */
}
#TrafficVDSdetails tr[data-v-e781f4f8] {
            border: 0.5px solid black !important; /* 行的邊框 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
            border-top: 0.01px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.01px solid gray; /* 設置每行的下邊框 */
            padding-top: 7.5px !important;
            padding-bottom: 7.5px !important;
}


.form-select[data-v-6b9f1726] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-6b9f1726] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-6b9f1726] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-6b9f1726] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-6b9f1726] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-6b9f1726] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
            border-top: 0.01px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.01px solid gray; /* 設置每行的下邊框 */
            padding-top: 7.5px !important;
            padding-bottom: 7.5px !important;
}


.form-select[data-v-0364982c] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-0364982c] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-0364982c] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-0364982c] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-0364982c] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-0364982c] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
            border-top: 0.01px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.01px solid gray; /* 設置每行的下邊框 */
            padding-top: 7.5px !important;
            padding-bottom: 7.5px !important;
}


.form-select[data-v-23108f66] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-23108f66] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-23108f66] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-23108f66] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-23108f66] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-23108f66] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
            border-top: 0.01px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.01px solid gray; /* 設置每行的下邊框 */
            padding-top: 7.5px !important;
            padding-bottom: 7.5px !important;
}


.form-select[data-v-1fc86ff4] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-1fc86ff4] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-1fc86ff4] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-1fc86ff4] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-1fc86ff4] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-1fc86ff4] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
            border-top: 0.01px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.01px solid gray; /* 設置每行的下邊框 */
            padding-top: 7.5px !important;
            padding-bottom: 7.5px !important;
}


.form-select[data-v-8faf6572] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-8faf6572] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-8faf6572] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-8faf6572] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-8faf6572] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-8faf6572] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-74be12c1] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-74be12c1] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-74be12c1] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-74be12c1] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-74be12c1] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-74be12c1] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-562a2bba] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-562a2bba] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-562a2bba] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-562a2bba] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-562a2bba] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-562a2bba] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length {
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-6faf90d4] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-6faf90d4] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-6faf90d4] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-6faf90d4] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-6faf90d4] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-6faf90d4] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-1d7fc0be] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-1d7fc0be] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-1d7fc0be] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-1d7fc0be] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-1d7fc0be] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-1d7fc0be] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-6ca43444] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-6ca43444] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-6ca43444] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-6ca43444] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-6ca43444] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-6ca43444] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-7449b5a2] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-7449b5a2] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-7449b5a2] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-7449b5a2] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-7449b5a2] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-7449b5a2] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-2afcc524] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-2afcc524] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-2afcc524] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-2afcc524] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-2afcc524] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-2afcc524] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-bcb701cc] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-bcb701cc] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-bcb701cc] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-bcb701cc] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-bcb701cc] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-bcb701cc] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-7d4dd2d0] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-7d4dd2d0] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-7d4dd2d0] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-7d4dd2d0] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-7d4dd2d0] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-7d4dd2d0] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-1b8c6df8] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-1b8c6df8] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-1b8c6df8] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-1b8c6df8] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-1b8c6df8] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-1b8c6df8] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-18f1602e] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-18f1602e] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-18f1602e] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-18f1602e] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-18f1602e] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-18f1602e] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-3b67a4aa] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-3b67a4aa] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-3b67a4aa] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-3b67a4aa] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-3b67a4aa] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-3b67a4aa] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-c2f29278] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-c2f29278] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-c2f29278] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-c2f29278] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-c2f29278] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-c2f29278] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-69d50f43] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-69d50f43] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-69d50f43] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-69d50f43] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-69d50f43] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-69d50f43] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-1c15aa55] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-1c15aa55] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-1c15aa55] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-1c15aa55] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-1c15aa55] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-1c15aa55] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-acb120b2] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-acb120b2] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-acb120b2] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-acb120b2] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-acb120b2] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-acb120b2] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-ba304412] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-ba304412] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-ba304412] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-ba304412] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-ba304412] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-ba304412] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-06d6b4d4] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-06d6b4d4] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-06d6b4d4] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-06d6b4d4] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-06d6b4d4] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-06d6b4d4] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.dt-length{
        display: none;
}
.dt-control {
        white-space: nowrap; /* 防止換行 */
}
.dt-center-check {
        width: 30px;
        padding: 0 !important;
}
.bottom {
        display: flex;
        justify-content: space-between; /* 使兩個元素位於左右 */
        align-items: center; /* 垂直居中 */
        padding: 10px;
}
.dt-info {
        flex: 1; /* 使 .dt-info 佔據剩餘空間 */
        text-align: left; /* 左對齊文本 */
}
.dt-paging {
        display: flex; /* 將分页控制器設為 flex 布局 */
        justify-content: flex-end; /* 使頁碼按鈕位於右側 */
}
.dt-button-collection {
        background-color: #212529 !important;
}
.dt-button {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

    /* 設置 .dt-button-info 的背景顏色和文字顏色 */
.dt-button-info {
        background-color: #212529 !important; /* 設定背景顏色 */
        color: white !important; /* 設定文字顏色 */
}

        /* 如果想要調整標題和內容文字的顏色 */
.dt-button-info h2 {
            color: white !important; /* 設定標題文字顏色 */
}
.dt-button-info div {
            color: white !important; /* 設定內容文字顏色 */
}
.dt-paging-button {
        color: #666666;
}

    /*移除 DataTables 預設的箭頭圖標*/
table.dataTable td.dt-control::before {
        content: none !important; /* 禁用預設的折疊箭頭 */
}
table {
        text-align: center; /* 水平居中 */
        vertical-align: middle; /* 垂直居中 */
}
tbody {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
tbody tr {
            border-top: 0.5px solid gray; /* 設置每行的上邊框 */
            border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}
ul.dtr-details {
        list-style-type: none; /* 移除所有列表標記 */
        padding-left: 0; /* 去掉左側的縮排 */
}
ul.dtr-details li {
        border-top: 0.5px solid gray; /* 設置每行的上邊框 */
        border-bottom: 0.5px solid gray; /* 設置每行的下邊框 */
}


.form-select[data-v-eda9a582] {
        background-image: url(/img/dropdownArrow.3e3e9053.svg);
}
.enc-details-card-group[data-v-eda9a582] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.5vw, 1fr)); /* 根據可用空間調整列數 */
        gap: 25px; /* 設定格子之間的間距 */
}
.enc-details-card[data-v-eda9a582] {
        background: #3A464F;
        border-radius: 10px;
        text-align: center;
        color: white;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* 讓內容從頂部開始對齊 */
        justify-content: flex-start;
        position: relative;
        gap: 15px; /* 設定元素之間的間隔 */
}
.enc-details-card h3[data-v-eda9a582] {
            background: #00c3c3;
            padding: 10px;
            margin: -15px -15px 10px -15px;
            border-radius: 10px 10px 0 0;
}
.enc-details-card img[data-v-eda9a582] {
            width: 60px;
            height: 60px;
            border-radius: 6px;
}
.details-name[data-v-eda9a582] {
        width: 100%;
        height: 40px;
        padding: 8px;
        color: black;
        font-weight: bold;
        background: #2EC4C2; /* 深色背景 */
        border-radius: 10px 10px 0 0; /* 只讓上方有圓角 */
        flex: 0 1 auto; /* 保持固定高度，不會變大 */
}


.uk-radio:checked {
        background-color: #2ec4c2 !important; /* 將選中的顏色改為綠色 (現代瀏覽器支援) */
}

    /* 當 TaichungTree 為 true 時，箭頭向下 */
#treeview .caret.open::before {
        transform: rotate(90deg); /* 向下旋轉箭頭 */
}

@charset "UTF-8";
/* 1. color
========================================== */
/* 2. margin, padding
========================================== */
/* 3. shadow
========================================== */
/* 4. fonts
========================================== */
h2 {
  font-weight: 500;
}

a {
  text-decoration: none;
}

/* 1. 全域, html, body
========================================== */
:root {
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  --bgr: #262b31;
  --txt: #f2f2f2;
  --txtinvert: #262b31;
  --td: transparent;
  --yellow: #f9eead;
  --red: #e57d8d;
  --white: #f2f2f2;
  --secondary: #0068a7;
  --bgToPurple: #262b31;
  --bodybg: #262b31;
  --shadow-2: 0 4px 8px 5px rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --shadow-3: rgba(0, 0, 0, 0.5) 0px 5px 15px;
  --shadow-tr: rgba(0, 0, 0, 0.45) 0px 8px 5px -2px;
  --shadow-td: rgba(0, 0, 0, 0.45) 0px 9px 10px -9px inset;
  --topleftshadow: 8px 0 8px -4px rgba(0, 0, 0, 0.6);
  --darkshadow: drop-shadow(0 0 3px #343536);
  --themelogo: url(/img/logo.22503650.svg);
}

body {
  margin: 0;
  font-family: "Open Sans", "Noto Sans TC", "Work Sans", "Noto Sans SC", sans-serif;
  color: var(--txt);
  background-color: var(--bodybg);
  text-wrap: balance;
  overflow-x: hidden;
}

/* 2. hr
========================================== */
hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

/* 3. a
========================================== */
a {
  color: #2ec4c2;
  text-decoration: none;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

a:active {
  text-decoration: underline;
}

/* 4. table
========================================== */
table {
  caption-side: bottom;
  border-collapse: collapse;
  width: 100%;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: $middle-black;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: rgba(0, 0, 0, 0.01) middle-black;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
}

.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.table > tbody {
  vertical-align: inherit;
}

.table > thead {
  vertical-align: bottom;
}

.table-group-divider {
  border-top: 2px solid currentcolor;
}

.caption-top {
  caption-side: top;
}

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}

.table-borderless > :not(:first-child) {
  border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}

.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}

.table-active {
  --bs-table-accent-bg: var(--bs-table-active-bg);
  color: var(--bs-table-active-color);
}

.table-hover > tbody > tr:hover > * {
  transition: 0.5s;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-none {
  display: none;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-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;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

/* 6. disabled
========================================== */
.disabled-item {
  pointer-events: none;
}

/* 1. font size
========================================== */
html {
  font-size: 1rem;
}

@media only screen and (min-width: 969px) {
  html {
    font-size: 0.9375rem;
  }
}
@media only screen and (min-width: 1400px) {
  html {
    font-size: 0.9375rem;
  }
}
h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  margin: 0;
  font-weight: 500;
}

h1,
.h1 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
  h1,
  .h1 {
    font-size: 2.125rem;
  }
}
h2,
.h2 {
  font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
  h2,
  .h2 {
    font-size: 2rem;
  }
}
h3,
.h3 {
  font-size: calc(1.3rem + 0.6vw);
}

@media (min-width: 1200px) {
  h3,
  .h3 {
    font-size: 1.75rem;
  }
}
h4,
.h4 {
  font-size: calc(1.275rem + 0.3vw);
}

@media (min-width: 1200px) {
  h4,
  .h4 {
    font-size: 1.5rem;
  }
}
h5,
.h5 {
  font-size: 1.25rem;
}

h6,
.h6 {
  font-size: 1rem;
}

p {
  margin: 0;
  font-size: 1rem;
}

/* 2. text align
========================================== */
.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

/* 3. text colour
========================================== */
input[type=password],
input[type=date],
input[type=time],
input[type=datetime-local],
select,
.form-bg,
.txt-input {
  background-color: #1c2024;
  border: 1px solid #1c2024;
  border-radius: 6px;
  padding: 12px 12px;
  transition: 0.5s border ease;
}
input[type=password]:focus,
input[type=date]:focus,
input[type=time]:focus,
input[type=datetime-local]:focus,
select:focus,
.form-bg:focus,
.txt-input:focus {
  border: 1px solid #2690a0;
}

input[type=date],
input[type=time],
input[type=datetime-local] {
  font-family: monospace;
}

.color-chips-select {
  background-color: #1c2024;
  border: 1px solid #1c2024;
  border-radius: 6px;
  padding: 12px 12px;
  transition: 0.5s border ease;
}

.form-group {
  display: flex;
  flex-direction: column;
}
.form-group .form-label {
  width: 100%;
  margin-bottom: 6px;
}
.form-group input {
  padding: 8px;
}
.form-group input[type=date] {
  margin-bottom: 6px;
}
.form-group select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/img/dropdownArrow.3e3e9053.svg);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: 95.2% 50%;
}
.form-group input[type=checkbox] {
  margin-right: 6px;
}

.button-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #434346;
  -webkit-text-fill-color: #F1F1F1;
  -webkit-box-shadow: 0 0 0px 1000px #1B1B1C inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

.checkbox-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkbox-chip {
  display: inline-block;
}

.custom-checkbox {
  display: none;
}

.checkbox-chip-label {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 20px;
  background-color: #1c2024;
  cursor: pointer;
  transition: background-color 0.3s;
}

.checkbox-square {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 3px;
  background-color: transparent;
  transition: background-color 0.3s, border-color 0.3s;
}
.checkbox-square::after {
  content: "";
  width: 6px;
  height: 10px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  border-color: transparent;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.3s;
}

.vehicleAllColor .checkbox-square {
  color: #262b31;
  width: -moz-fit-content;
  width: fit-content;
}
.vehicleAllColor .checkbox-square::after {
  border: none;
  width: 0;
  height: 0;
}

.vehicleAllColor {
  background-color: #f2f2f2;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .vehicleAllColor {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .vehicleAllColor .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .vehicleAllColor, #vehicleOrange:checked + .vehicleAllColor, #vehicleGold:checked + .vehicleAllColor, #vehicleYellow:checked + .vehicleAllColor, #vehicleGrey:checked + .vehicleAllColor, #vehicleSilver:checked + .vehicleAllColor, #vehicleWhite:checked + .vehicleAllColor {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .vehicleAllColor .checkbox-square::after, #vehicleOrange:checked + .vehicleAllColor .checkbox-square::after, #vehicleGold:checked + .vehicleAllColor .checkbox-square::after, #vehicleYellow:checked + .vehicleAllColor .checkbox-square::after, #vehicleGrey:checked + .vehicleAllColor .checkbox-square::after, #vehicleSilver:checked + .vehicleAllColor .checkbox-square::after, #vehicleWhite:checked + .vehicleAllColor .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .vehicleAllColor .checkbox-square::after {
  border: none;
  opacity: 0;
}

.black {
  background-color: #181818;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .black {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .black .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .black, #vehicleOrange:checked + .black, #vehicleGold:checked + .black, #vehicleYellow:checked + .black, #vehicleGrey:checked + .black, #vehicleSilver:checked + .black, #vehicleWhite:checked + .black {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .black .checkbox-square::after, #vehicleOrange:checked + .black .checkbox-square::after, #vehicleGold:checked + .black .checkbox-square::after, #vehicleYellow:checked + .black .checkbox-square::after, #vehicleGrey:checked + .black .checkbox-square::after, #vehicleSilver:checked + .black .checkbox-square::after, #vehicleWhite:checked + .black .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .black .checkbox-square::after {
  border: none;
  opacity: 0;
}

.blue {
  background-color: #339af0;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .blue {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .blue .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .blue, #vehicleOrange:checked + .blue, #vehicleGold:checked + .blue, #vehicleYellow:checked + .blue, #vehicleGrey:checked + .blue, #vehicleSilver:checked + .blue, #vehicleWhite:checked + .blue {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .blue .checkbox-square::after, #vehicleOrange:checked + .blue .checkbox-square::after, #vehicleGold:checked + .blue .checkbox-square::after, #vehicleYellow:checked + .blue .checkbox-square::after, #vehicleGrey:checked + .blue .checkbox-square::after, #vehicleSilver:checked + .blue .checkbox-square::after, #vehicleWhite:checked + .blue .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .blue .checkbox-square::after {
  border: none;
  opacity: 0;
}
.blue span {
  color: #333;
}

.brown {
  background-color: #a0522d;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .brown {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .brown .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .brown, #vehicleOrange:checked + .brown, #vehicleGold:checked + .brown, #vehicleYellow:checked + .brown, #vehicleGrey:checked + .brown, #vehicleSilver:checked + .brown, #vehicleWhite:checked + .brown {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .brown .checkbox-square::after, #vehicleOrange:checked + .brown .checkbox-square::after, #vehicleGold:checked + .brown .checkbox-square::after, #vehicleYellow:checked + .brown .checkbox-square::after, #vehicleGrey:checked + .brown .checkbox-square::after, #vehicleSilver:checked + .brown .checkbox-square::after, #vehicleWhite:checked + .brown .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .brown .checkbox-square::after {
  border: none;
  opacity: 0;
}

.gold {
  background-color: #e6b803;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .gold {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .gold .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .gold, #vehicleOrange:checked + .gold, #vehicleGold:checked + .gold, #vehicleYellow:checked + .gold, #vehicleGrey:checked + .gold, #vehicleSilver:checked + .gold, #vehicleWhite:checked + .gold {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .gold .checkbox-square::after, #vehicleOrange:checked + .gold .checkbox-square::after, #vehicleGold:checked + .gold .checkbox-square::after, #vehicleYellow:checked + .gold .checkbox-square::after, #vehicleGrey:checked + .gold .checkbox-square::after, #vehicleSilver:checked + .gold .checkbox-square::after, #vehicleWhite:checked + .gold .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .gold .checkbox-square::after {
  border: none;
  opacity: 0;
}
.gold span {
  color: #333;
}

.green {
  background-color: #28a745;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .green {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .green .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .green, #vehicleOrange:checked + .green, #vehicleGold:checked + .green, #vehicleYellow:checked + .green, #vehicleGrey:checked + .green, #vehicleSilver:checked + .green, #vehicleWhite:checked + .green {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .green .checkbox-square::after, #vehicleOrange:checked + .green .checkbox-square::after, #vehicleGold:checked + .green .checkbox-square::after, #vehicleYellow:checked + .green .checkbox-square::after, #vehicleGrey:checked + .green .checkbox-square::after, #vehicleSilver:checked + .green .checkbox-square::after, #vehicleWhite:checked + .green .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .green .checkbox-square::after {
  border: none;
  opacity: 0;
}

.grey {
  background-color: #a0a0a0;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .grey {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .grey .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .grey, #vehicleOrange:checked + .grey, #vehicleGold:checked + .grey, #vehicleYellow:checked + .grey, #vehicleGrey:checked + .grey, #vehicleSilver:checked + .grey, #vehicleWhite:checked + .grey {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .grey .checkbox-square::after, #vehicleOrange:checked + .grey .checkbox-square::after, #vehicleGold:checked + .grey .checkbox-square::after, #vehicleYellow:checked + .grey .checkbox-square::after, #vehicleGrey:checked + .grey .checkbox-square::after, #vehicleSilver:checked + .grey .checkbox-square::after, #vehicleWhite:checked + .grey .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .grey .checkbox-square::after {
  border: none;
  opacity: 0;
}
.grey span {
  color: #333;
}

.maroon {
  background-color: #8d0000;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .maroon {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .maroon .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .maroon, #vehicleOrange:checked + .maroon, #vehicleGold:checked + .maroon, #vehicleYellow:checked + .maroon, #vehicleGrey:checked + .maroon, #vehicleSilver:checked + .maroon, #vehicleWhite:checked + .maroon {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .maroon .checkbox-square::after, #vehicleOrange:checked + .maroon .checkbox-square::after, #vehicleGold:checked + .maroon .checkbox-square::after, #vehicleYellow:checked + .maroon .checkbox-square::after, #vehicleGrey:checked + .maroon .checkbox-square::after, #vehicleSilver:checked + .maroon .checkbox-square::after, #vehicleWhite:checked + .maroon .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .maroon .checkbox-square::after {
  border: none;
  opacity: 0;
}

.orange {
  background-color: #ff8c00;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .orange {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .orange .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .orange, #vehicleOrange:checked + .orange, #vehicleGold:checked + .orange, #vehicleYellow:checked + .orange, #vehicleGrey:checked + .orange, #vehicleSilver:checked + .orange, #vehicleWhite:checked + .orange {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .orange .checkbox-square::after, #vehicleOrange:checked + .orange .checkbox-square::after, #vehicleGold:checked + .orange .checkbox-square::after, #vehicleYellow:checked + .orange .checkbox-square::after, #vehicleGrey:checked + .orange .checkbox-square::after, #vehicleSilver:checked + .orange .checkbox-square::after, #vehicleWhite:checked + .orange .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .orange .checkbox-square::after {
  border: none;
  opacity: 0;
}
.orange span {
  color: #333;
}

.red {
  background-color: #cc0b0e;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .red {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .red .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .red, #vehicleOrange:checked + .red, #vehicleGold:checked + .red, #vehicleYellow:checked + .red, #vehicleGrey:checked + .red, #vehicleSilver:checked + .red, #vehicleWhite:checked + .red {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .red .checkbox-square::after, #vehicleOrange:checked + .red .checkbox-square::after, #vehicleGold:checked + .red .checkbox-square::after, #vehicleYellow:checked + .red .checkbox-square::after, #vehicleGrey:checked + .red .checkbox-square::after, #vehicleSilver:checked + .red .checkbox-square::after, #vehicleWhite:checked + .red .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .red .checkbox-square::after {
  border: none;
  opacity: 0;
}

.silver {
  background-color: #cfcfcf;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .silver {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .silver .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .silver, #vehicleOrange:checked + .silver, #vehicleGold:checked + .silver, #vehicleYellow:checked + .silver, #vehicleGrey:checked + .silver, #vehicleSilver:checked + .silver, #vehicleWhite:checked + .silver {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .silver .checkbox-square::after, #vehicleOrange:checked + .silver .checkbox-square::after, #vehicleGold:checked + .silver .checkbox-square::after, #vehicleYellow:checked + .silver .checkbox-square::after, #vehicleGrey:checked + .silver .checkbox-square::after, #vehicleSilver:checked + .silver .checkbox-square::after, #vehicleWhite:checked + .silver .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .silver .checkbox-square::after {
  border: none;
  opacity: 0;
}
.silver span {
  color: #333;
}

.white {
  background-color: #fdfdfd;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .white {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .white .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .white, #vehicleOrange:checked + .white, #vehicleGold:checked + .white, #vehicleYellow:checked + .white, #vehicleGrey:checked + .white, #vehicleSilver:checked + .white, #vehicleWhite:checked + .white {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .white .checkbox-square::after, #vehicleOrange:checked + .white .checkbox-square::after, #vehicleGold:checked + .white .checkbox-square::after, #vehicleYellow:checked + .white .checkbox-square::after, #vehicleGrey:checked + .white .checkbox-square::after, #vehicleSilver:checked + .white .checkbox-square::after, #vehicleWhite:checked + .white .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .white .checkbox-square::after {
  border: none;
  opacity: 0;
}
.white span {
  color: #333;
}

.yellow {
  background-color: #ffeb3b;
  border: 1px solid transparent;
}
.custom-checkbox:checked + .yellow {
  outline: 1px solid #606060;
  outline-offset: 2px;
}
.custom-checkbox:checked + .yellow .checkbox-square::after {
  border-color: #f2f2f2;
  opacity: 1;
}
#vehicleBlue:checked + .yellow, #vehicleOrange:checked + .yellow, #vehicleGold:checked + .yellow, #vehicleYellow:checked + .yellow, #vehicleGrey:checked + .yellow, #vehicleSilver:checked + .yellow, #vehicleWhite:checked + .yellow {
  outline: 1px solid #606060;
}
#vehicleBlue:checked + .yellow .checkbox-square::after, #vehicleOrange:checked + .yellow .checkbox-square::after, #vehicleGold:checked + .yellow .checkbox-square::after, #vehicleYellow:checked + .yellow .checkbox-square::after, #vehicleGrey:checked + .yellow .checkbox-square::after, #vehicleSilver:checked + .yellow .checkbox-square::after, #vehicleWhite:checked + .yellow .checkbox-square::after {
  border-color: #262b31;
  opacity: 1;
}
#vehicleAllColor:checked + .yellow .checkbox-square::after {
  border: none;
  opacity: 0;
}
.yellow span {
  color: #333;
}

/* 1. basic
========================================== */
button,
.btn {
  padding: 12px;
  cursor: pointer;
  border-style: none;
  border-radius: 6px;
  transition: 0.2s all ease;
}

/* 2. button style
========================================== */
.btn-submit {
  font-family: "Noto Sans TC", "Work Sans", "Noto Sans SC", sans-serif;
  font-size: 16px;
  font-weight: 700;
  background-color: #3DFDFE;
  color: black;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
}

.btn-blue {
  background-color: #29b3b0;
  color: black;
  font-weight: 600;
}
.btn-blue:hover {
  background-color: #2ec4c2;
}

.details-btn {
  background-color: #29b3b0;
  color: black;
  font-weight: 600;
}
.details-btn:hover {
  background-color: #2ec4c2;
}

.secondary-btn, html.dark div.dt-buttons > .dt-button {
  background-color: #315a6d;
  color: #f2f2f2;
}
.secondary-btn:hover, html.dark div.dt-buttons > .dt-button:hover {
  background-color: #35657a;
}

.tab-btn {
  background-color: #262b31;
  border-radius: 0;
  color: #C0C3C5;
  border-bottom: 1px solid #262b31;
}
.tab-btn:hover {
  background-color: #161a1f;
}
.tab-btn.active {
  color: #5dceff;
  border-bottom: 1px solid #5dceff;
}

.quick-select-btn {
  border: unset;
  color: #C0C3C5;
  background-color: #333b44;
}
.quick-select-btn:hover {
  background-color: #333f4d;
}
.quick-select-btn:active {
  background-color: #2d3a49;
}

.btn-reset {
  border: 1px solid #4d4d4d;
  background-color: inherit;
}
.btn-reset:hover {
  background-color: #383841;
}

.collapse-btn {
  cursor: pointer;
  width: 24px;
  height: 100%;
  background-color: #353c44;
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.collapse-btn i {
  margin-right: 0 !important;
  background-color: #29b3b0;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rwd-scroll-to-top-btn {
  display: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: #353c44;
  position: fixed;
  bottom: 8px;
  right: 0px;
  z-index: 10010;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
@media only screen and (max-width: 768px) {
  .rwd-scroll-to-top-btn {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-border-width: 1px;
  --bs-pagination-border-radius: 0.375rem;
  --bs-pagination-disabled-color: #6c757d;
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: #dee2e6;
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: #009ae8;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  background-color: rgba(0, 154, 232, 0.3);
}

.page-link:focus {
  z-index: 3;
  outline: 0;
  text-decoration: none;
}

.page-link.active,
.active > .page-link {
  z-index: 3;
  background-color: #009ae8;
}

.page-link.disabled,
.disabled > .page-link {
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
}

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}

.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}

.page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}

.pagination-lg {
  --bs-pagination-padding-x: 1.5rem;
  --bs-pagination-padding-y: 0.75rem;
  --bs-pagination-font-size: 1.25rem;
  --bs-pagination-border-radius: 0.5rem;
}

.pagination-sm {
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0.25rem;
  --bs-pagination-font-size: 0.875rem;
  --bs-pagination-border-radius: 0.25rem;
}

.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: #f2f2f2;
  --bs-modal-bg: #262b31;
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: 1px;
  --bs-modal-border-radius: 0.5rem;
  --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-modal-inner-border-radius: calc(0.5rem - 1px);
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-width: 1px;
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: #262b31;
  --bs-modal-footer-border-color: #606060;
  --bs-modal-footer-border-width: 1px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.show .modal-dialog {
  transform: none;
}

.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20000;
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-footer-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
  margin: calc(var(--bs-modal-header-padding-y) * -0.5) calc(var(--bs-modal-header-padding-x) * -0.5) calc(var(--bs-modal-header-padding-y) * -0.5) auto;
  font-size: 24px;
  font-family: Tahoma, Verdana, sans-serif;
  background-color: transparent;
}
.modal-header .btn-close::before {
  content: "×";
}

.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}

.modal-footer > * {
  margin: calc(var(--bs-modal-footer-gap) * 0.5);
}

@media (min-width: 576px) {
  .modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
  .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-right: auto;
    margin-left: auto;
  }
  .modal-sm {
    --bs-modal-width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: 800px;
  }
}
@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 1140px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  border-radius: 0;
}

.modal-fullscreen .modal-body {
  overflow-y: auto;
}

@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header,
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header,
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header,
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header,
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-header,
  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
}
.modal.fade {
  z-index: 10000000 !important;
}

.popover {
  --bs-popover-zindex: 1070;
  --bs-popover-max-width: 276px;
  --bs-popover-font-size: 0.875rem;
  --bs-popover-bg: #fff;
  --bs-popover-border-width: 1px;
  --bs-popover-border-color: var(--bs-border-color-translucent);
  --bs-popover-border-radius: 0.5rem;
  --bs-popover-inner-border-radius: calc(0.5rem - 1px);
  --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-popover-header-padding-x: 1rem;
  --bs-popover-header-padding-y: 0.5rem;
  --bs-popover-header-font-size: 1rem;
  --bs-popover-header-color: var(--bs-heading-color);
  --bs-popover-header-bg: #f0f0f0;
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: 1rem;
  --bs-popover-body-color: #212529;
  --bs-popover-arrow-width: 1rem;
  --bs-popover-arrow-height: 0.5rem;
  --bs-popover-arrow-border: var(--bs-popover-border-color);
  z-index: var(--bs-popover-zindex);
  display: block;
  max-width: var(--bs-popover-max-width);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-popover-font-size);
  word-wrap: break-word;
  background-color: var(--bs-popover-bg);
  background-clip: padding-box;
  border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-radius: var(--bs-popover-border-radius);
}

.popover .popover-arrow {
  display: block;
  width: var(--bs-popover-arrow-width);
  height: var(--bs-popover-arrow-height);
}

.popover .popover-arrow::before,
.popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}

.bs-popover-top > .popover-arrow,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
  bottom: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
}

.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before,
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
}

.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
  bottom: 0;
  border-top-color: var(--bs-popover-arrow-border);
}

.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  bottom: var(--bs-popover-border-width);
  border-top-color: var(--bs-popover-bg);
}

/* rtl:begin:ignore */
.bs-popover-end > .popover-arrow,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
  left: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}

.bs-popover-end > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before,
.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
}

.bs-popover-end > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
  left: 0;
  border-right-color: var(--bs-popover-arrow-border);
}

.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  left: var(--bs-popover-border-width);
  border-right-color: var(--bs-popover-bg);
}

/* rtl:end:ignore */
.bs-popover-bottom > .popover-arrow,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
  top: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
}

.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before,
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  border-width: 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
}

.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
  top: 0;
  border-bottom-color: var(--bs-popover-arrow-border);
}

.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  top: var(--bs-popover-border-width);
  border-bottom-color: var(--bs-popover-bg);
}

.bs-popover-bottom .popover-header::before,
.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--bs-popover-arrow-width);
  margin-left: calc(var(--bs-popover-arrow-width) * -0.5);
  content: "";
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg);
}

/* rtl:begin:ignore */
.bs-popover-start > .popover-arrow,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
  right: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}

.bs-popover-start > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before,
.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
}

.bs-popover-start > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
  right: 0;
  border-left-color: var(--bs-popover-arrow-border);
}

.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  right: var(--bs-popover-border-width);
  border-left-color: var(--bs-popover-bg);
}

/* rtl:end:ignore */
.popover-header {
  padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
  margin-bottom: 0;
  font-size: var(--bs-popover-header-font-size);
  color: var(--bs-popover-header-color);
  background-color: var(--bs-popover-header-bg);
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-top-left-radius: var(--bs-popover-inner-border-radius);
  border-top-right-radius: var(--bs-popover-inner-border-radius);
}

.popover-header:empty {
  display: none;
}

.popover-body {
  padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
  color: var(--bs-popover-body-color);
}

.tooltip {
  --bs-tooltip-zindex: 1080;
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-margin: ;
  --bs-tooltip-font-size: 0.875rem;
  --bs-tooltip-color: #fff;
  --bs-tooltip-bg: #000;
  --bs-tooltip-border-radius: 0.375rem;
  --bs-tooltip-opacity: 0.9;
  --bs-tooltip-arrow-width: 0.8rem;
  --bs-tooltip-arrow-height: 0.4rem;
  z-index: var(--bs-tooltip-zindex);
  display: block;
  padding: var(--bs-tooltip-arrow-height);
  margin: var(--bs-tooltip-margin);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-tooltip-font-size);
  word-wrap: break-word;
  opacity: 0;
}

.tooltip.show {
  opacity: var(--bs-tooltip-opacity);
}

.tooltip .tooltip-arrow {
  display: block;
  width: var(--bs-tooltip-arrow-width);
  height: var(--bs-tooltip-arrow-height);
}

.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
  bottom: 0;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
  border-top-color: var(--bs-tooltip-bg);
}

/* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
  left: 0;
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
  border-right-color: var(--bs-tooltip-bg);
}

/* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
  top: 0;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
  border-bottom-color: var(--bs-tooltip-bg);
}

/* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
  right: 0;
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
  border-left-color: var(--bs-tooltip-bg);
}

/* rtl:end:ignore */
.tooltip-inner {
  max-width: var(--bs-tooltip-max-width);
  padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
  color: var(--bs-tooltip-color);
  text-align: center;
  background-color: var(--bs-tooltip-bg);
  border-radius: var(--bs-tooltip-border-radius);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 46px;
  padding: 0 1%;
  background-color: var(--bgr);
  position: sticky;
  top: 0;
  left: 0;
  box-shadow: var(--shadow-2);
  z-index: 10000;
}
header.scroll {
  box-shadow: var(--shadow-2);
}
@media only screen and (max-width: 1280px) {
  header a:has(.logo) {
    padding-left: 56px;
  }
}
header .logo {
  width: 40px;
  height: 40px;
  margin: 4px;
  background-image: var(--themelogo);
  background-repeat: no-repeat;
}
header .header-subdiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
header .country-lang-signOut-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
header .country-lang-group select {
  border-radius: 6px;
  font-family: "Noto Sans TC", "Work Sans", "Noto Sans SC", sans-serif;
  font-size: 14px;
  line-height: 30px !important;
  color: #C0C3C5 !important;
}
header .country-lang-group select:hover {
  color: #3DFDFE !important;
}
header .country-lang-group select option {
  background-color: var(--bgr);
  color: var(--txt) !important;
  padding: 12px;
}
header .country-lang-group .country-div {
  position: relative;
  width: 150px;
  display: inline-flex;
}
header .country-lang-group .country-div::after {
  content: "";
  position: absolute;
  top: 12px;
  right: -6px;
  width: 1px;
  height: 18px;
  background-color: #3DFDFE;
}
header .country-lang-group .country-div .main-menu {
  background-color: transparent !important;
  background-image: none !important;
  border: none;
  text-align: right;
  cursor: pointer;
}
header .country-lang-group .country-lang-div {
  width: 80px;
  display: inline-flex;
}
header .country-lang-group .country-lang-div .sub-menu {
  background-color: transparent !important;
  background-image: none !important;
  border: none;
  cursor: pointer;
}
header .signOut-group {
  margin-left: 12px;
  font-size: 14px;
}
header .signOut-group button {
  background-color: transparent;
  color: #C0C3C5;
}
header .signOut-group button:hover {
  color: #3DFDFE;
}
header .signOut-group i {
  margin-right: 6px;
}
header .signOut-group a {
  color: #C0C3C5;
  text-decoration: none;
  width: 100%;
  padding: 8px 12px;
}
header .signOut-group a:hover {
  color: #3DFDFE;
}
header .signOut-group .signOut-dropdown {
  width: -moz-fit-content;
  width: fit-content;
  min-width: unset;
  top: 45.5px !important;
}
header .signOut-group .signOut-dropdown div {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
header .signOut-group .signOut-dropdown div .divider {
  width: 100%;
  border: 1px solid #606060;
  margin: 5px 0;
}

/* header nav  */
header nav {
  width: 60vw;
  font-size: 14px;
}
header nav .uk-subnav {
  margin-bottom: 0;
}
header nav .uk-subnav .topPageLayer i {
  margin-right: 6px;
}
header nav .uk-subnav .topPageLayer[aria-expanded=true] {
  color: #3DFDFE;
  position: relative;
}
header nav .uk-subnav .topPageLayer[aria-expanded=true]::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 36px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
header nav .uk-subnav a {
  color: #f2f2f2;
}
header nav .uk-subnav a:hover {
  color: #3DFDFE;
}
header nav .uk-subnav .uk-nav a {
  font-weight: 300;
  padding: 8px 12px;
}
header nav .uk-subnav .uk-nav a:hover {
  color: #3DFDFE;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
header nav .uk-subnav .uk-nav a.inactive-link:hover {
  color: #3DFDFE;
  background-color: transparent;
}
header nav .uk-subnav .uk-nav-header {
  padding: 0;
}
header nav .uk-subnav .uk-nav-header i {
  margin-right: 6px;
  margin-left: 0;
  padding: 0;
}
header nav .uk-subnav .uk-nav-header:not(:has(a)) {
  padding: 8px 12px;
}
header nav .uk-subnav .uk-nav-header:not(:first-child) {
  margin-top: 0px;
}
header nav i {
  margin-right: 6px;
}
header nav .first-level-title,
header nav .second-level-title {
  padding: 8px 12px;
}
@media only screen and (max-width: 1280px) {
  header nav {
    display: none;
  }
}
header .activePage {
  color: #3DFDFE !important;
}
header .uk-dropdown-nav .uk-nav-divider {
  border: 1px solid #606060;
}
header .uk-dropbar {
  background: inherit !important;
  color: inherit !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.65);
}
header .uk-dropdown-dropbar {
  padding: 25px 0;
}

/* side bar  */
.primary-nav {
  display: none;
  position: fixed;
  z-index: 10010;
  left: -96vw;
}
@media only screen and (max-width: 1280px) {
  .primary-nav {
    display: block;
  }
}
.primary-nav .open-panel {
  border: none;
  padding: 0;
}
.primary-nav .hamburger {
  background: var(--bgr);
  position: relative;
  text-align: center;
  padding: 8px 0;
  width: 50px;
  height: 46px;
  left: 96vw;
  top: 0;
  z-index: 10030;
  cursor: pointer;
  transition: none;
}
.primary-nav .hamburger:before {
  content: "☰";
  /* hamburger icon */
  display: block;
  color: var(--white);
  line-height: 32px;
  font-size: 18px;
  font-weight: 600;
}
.primary-nav .topleftshadow {
  background: var(--bgr);
  position: absolute;
  text-align: center;
  padding: 13px 0;
  width: 50px;
  height: 46px;
  left: 210px;
  top: 0;
  z-index: 9980;
  border-style: none;
  box-shadow: var(--topleftshadow);
}
.primary-nav .menu {
  position: relative;
  margin-bottom: 3em;
  box-shadow: var(--topleftshadow);
}
.primary-nav .menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav .menu ul .space {
  height: 280px;
  margin-bottom: 60px;
}
.primary-nav .menu ul li {
  position: relative;
}
.primary-nav .menu ul li a,
.primary-nav .menu ul li label {
  display: block;
  white-space: nowrap;
  padding: 1em 1.5em 1em 1.5em;
  font-size: 16px;
  font-weight: var(--weight300to400);
  text-decoration: none !important;
  position: relative;
  color: var(--txt);
  cursor: pointer;
}
.primary-nav .menu ul li a .downarrow,
.primary-nav .menu ul li label .downarrow {
  color: var(--white);
  padding-top: 8px;
}
.primary-nav .menu ul li a:hover,
.primary-nav .menu ul li label:hover {
  background-color: #2690a0;
  color: #f2f2f2;
}
.primary-nav .menu ul li label {
  margin-bottom: 0;
  display: block;
}
.primary-nav .menu ul li .subLayerPage {
  padding-left: 3em;
  font-size: 14px;
}
.primary-nav .menu ul .activeNavli {
  color: #3DFDFE;
  font-weight: 500;
}
.primary-nav .menu ul .activeNavli a,
.primary-nav .menu ul .activeNavli label {
  color: #3DFDFE;
  font-weight: 500;
}
.primary-nav .menu ul .activeNavli .downarrow {
  color: #3DFDFE;
}
.primary-nav .menu ul .activeNavli .icon {
  color: #3DFDFE;
}
.primary-nav .menu ul .icon {
  position: absolute;
  top: 18px;
  right: 8px;
  pointer-events: none;
  width: 24px;
  height: 24px;
  color: white;
}
.primary-nav .menu ul .changethemegroup {
  display: none;
  cursor: default;
}
.primary-nav .menu ul .changethemegroup .changetheme {
  border-top: 1px solid var(--secondary);
  cursor: default;
}
.primary-nav .menu .menu-dropdown {
  top: 0;
  overflow-y: auto;
}
.primary-nav .menu .menu-dropdown .turnArrow {
  margin-top: -6px;
}
.primary-nav .menu .menu-dropdown li.sideSpacing {
  margin-bottom: 60px;
}
.primary-nav .menu input[type=checkbox] {
  display: none;
}
.primary-nav .menu input#menu[type=checkbox] {
  display: none;
}
.primary-nav .menu .sub-menu-dropdown {
  display: none;
}
.primary-nav .menu,
.primary-nav .menu a,
.primary-nav label {
  text-decoration: none !important;
  position: relative;
}
.primary-nav #menu:checked + ul.menu-dropdown {
  left: 0;
  animation: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}
.primary-nav .sub-menu-checkbox:checked + ul.sub-menu-dropdown {
  display: block !important;
  animation: grow 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}
.primary-nav {
  /*opacity*/
}
@keyframes grow {
  0% {
    display: none;
    opacity: 0;
  }
  50% {
    display: block;
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.primary-nav ul.menu-dropdown li.top-menu-hasdropdown ul.sub-menu-dropdown li.menu-hasdropdown:has(a[href="mapVideo.html"]) {
  display: none;
}

.menu {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 96vw;
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 9990;
  background-color: var(--bgr);
}
.menu:hover {
  position: absolute;
  top: 0;
  transform: translate3d(210px, 0, 0);
  border-top: 46px solid var(--bgr);
}
.menu .overflow-container {
  position: relative;
  height: calc(100vh - 46px) !important;
  overflow-y: auto;
}
.menu .overflow-container::-webkit-scrollbar {
  height: 4px;
  width: 1px;
  border: 1px solid var(--bgr);
}
.menu .overflow-container {
  border-top: 46px solid var(--bgr);
  z-index: 9988;
  display: block;
}
.menu .overflow-container .downarrow {
  background: transparent;
  position: absolute;
  right: 50px;
  top: 9px;
  color: var(--white);
  width: 24px;
  height: 24px;
  text-align: center;
  display: block;
}
.menu .overflow-container .sub-menu-dropdown {
  background-color: rgba(0, 0, 0, 0.2);
}

.openNav .hamburger {
  box-shadow: 0 0 0 0;
}

.openNav .hamburger:before {
  content: "✕";
  /* close icon */
  display: block;
  color: var(--white);
  line-height: 32px;
  font-size: 16px;
  font-weight: 600;
}

.openNav .menu {
  border-top: 46px solid var(--bgr);
  position: absolute;
  transform: translate3d(96vw, 0, 0);
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}
.openNav .menu:hover {
  position: absolute;
  transform: translate3d(96vw, 0, 0);
  border-top: 46px solid var(--bgr);
}

footer {
  width: 100%;
  clear: both;
  height: 26px;
}
@media only screen and (max-width: 768px) {
  footer {
    height: -moz-fit-content;
    height: fit-content;
  }
}
footer .subfooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bgr);
  color: var(--txt);
  box-shadow: var(--shadow-2);
  position: relative;
  z-index: 997;
  font-size: 14px;
  font-weight: var(--weight300to400);
  height: 26px;
}
footer .subfooter .eng-copyright {
  margin-left: 20px;
}
footer .subfooter .ch-copyright {
  margin-right: 20px;
}
@media only screen and (max-width: 768px) {
  footer .subfooter {
    flex-direction: column;
    justify-content: center;
    padding: 8px 0;
    line-height: 1.4em;
    height: -moz-fit-content;
    height: fit-content;
  }
  footer .subfooter .eng-copyright,
  footer .subfooter .ch-copyright {
    margin-left: 0;
    margin-right: 0;
  }
}

.breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 4px 12px;
  box-shadow: var(--shadow-tr);
  color: #C0C3C5;
  margin-bottom: 12px;
  height: 24px;
}
.breadcrumb .page-position a {
  margin: 0 6px;
}
.breadcrumb .page-position a:first-child {
  margin-left: 0;
}
.breadcrumb .page-position a:last-child {
  margin-right: 0;
}
.breadcrumb li {
  list-style-type: none;
}
.breadcrumb li::after {
  content: ">";
  margin: 0 12px;
}
.breadcrumb li:last-child::after {
  content: "";
  margin: 0;
}
.breadcrumb li a {
  text-decoration: none;
  color: inherit;
}
@media only screen and (max-width: 768px) {
  .breadcrumb {
    height: -moz-fit-content;
    height: fit-content;
    flex-wrap: wrap;
  }
}

.LocationTree-section {
  position: relative;
}
.LocationTree-section .treeview-wrapper {
  padding: 12px 12px;
  height: calc(100vh - 46px - 26px - 24px - 24px - 12px - 28px);
  max-height: 100%;
  overflow-y: scroll;
}
.LocationTree-section .treeview-wrapper ul {
  list-style: none;
}
.LocationTree-section .treeview-wrapper #treeview {
  margin: 0;
  padding: 0;
}
.LocationTree-section .treeview-wrapper #treeview .uk-radio {
  margin-left: 2px;
  margin-right: 4px;
}
.LocationTree-section .treeview-wrapper #treeview .secondLayer {
  padding: 8px;
}
.LocationTree-section .treeview-wrapper #treeview .secondLayer li {
  padding: 8px;
}
.LocationTree-section .treeview-wrapper #treeview .secondLayer li:first-child {
  margin-top: 8px;
}
.LocationTree-section .treeview-wrapper #treeview .thirdLayer ul li:last-child {
  margin-bottom: -8px !important;
}
.LocationTree-section .treeview-wrapper .caret {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.LocationTree-section .treeview-wrapper .caret::before {
  content: "▶";
  color: rgb(185, 185, 185);
  display: inline-block;
  margin-right: 5px;
}
.LocationTree-section .treeview-wrapper .caret-down::before {
  transform: rotate(90deg);
}
.LocationTree-section .treeview-wrapper .nested {
  display: none;
}
.LocationTree-section .treeview-wrapper .active {
  display: block;
}
.LocationTree-section .location-collapse-btn {
  position: absolute;
  top: 0;
  right: 0;
}
@media only screen and (max-width: 1280px) {
  .LocationTree-section .location-collapse-btn {
    display: none;
  }
}
@media only screen and (max-width: 1280px) {
  .LocationTree-section .treeview-wrapper {
    height: 20.4vh;
  }
}
@media only screen and (max-width: 576px) {
  .LocationTree-section .treeview-wrapper {
    height: 37.4vh;
  }
}

/* 1. ================ location section collapse and expand */
.section-title-text,
.treeview-wrapper {
  transition: visibility 0s linear 0.3s;
  opacity: 1;
}

.LocationTree-section.collapsed {
  margin-right: -12px;
  z-index: 1;
}
.LocationTree-section.collapsed .section-title {
  box-shadow: none;
}
.LocationTree-section.collapsed .section-title-text {
  visibility: hidden !important;
  opacity: 0;
  transition: visibility 0s linear 0.3s;
}
.LocationTree-section.collapsed .treeview-wrapper {
  visibility: hidden !important;
  max-height: 70vh !important;
  overflow: hidden !important;
  opacity: 0;
  transition: visibility 0s linear 0.3s;
}

/* 2. ================ map location section collapse and expand */
.sections-group.map-location-group-collapsed {
  grid-template-columns: 12px calc(100% - 24px + 12px) !important;
}

/* 3. ================ dashboard location section collapse and expand */
.sections-group.dashboard-location-group-collapsed {
  grid-template-columns: 12px calc(100% - 24px + 12px) !important;
}

/* 4. ================ search location section collapse and expand */
.sections-group.search-location-group-collapsed {
  grid-template-columns: 12px 20% calc(80% - 24px + 12px) !important;
}

:root {
  --slider-thumb-size: 0px;
  --slider-height: 40px;
  --slider-width: 100%;
  --slider-track-thickness: 100%;
  --color-track: #606060;
}

.vertical-range-slider-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.vertical-range-slider-container .vertical-range-slider {
  position: relative;
  width: var(--slider-width);
  height: var(--slider-height);
  background: var(--color-track);
  border-radius: 0px 0px 6px 6px;
}
.vertical-range-slider-container .vertical-range-slider.humidity {
  width: 18px;
}
.vertical-range-slider-container .vertical-range-slider.temperature {
  width: 14px;
  border: 4px solid #f2f2f2;
  background: #f2f2f2;
}
.vertical-range-slider-container .vertical-range-slider.temperature::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translate(-50%);
  width: 25px;
  height: 25px;
  border-radius: 25px;
  background: inherit;
}
.vertical-range-slider-container .vertical-range-slider.electricity {
  width: 1.2vw;
  border-radius: 3px;
  outline: 2px solid #ce9f1f;
  background: #464233;
}
.vertical-range-slider-container .vertical-range-slider.electricity::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translate(-50%);
  width: 0.5vw;
  height: 4px;
  border-radius: 2px;
  background: #ce9f1f;
}
.vertical-range-slider-container .vertical-range-slider.electricity .fa-bolt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #dbdbdb;
  font-size: 1vw;
}
.vertical-range-slider-container .vertical-range-slider .vertical-range-slider__bar {
  position: absolute;
  left: calc(var(--slider-width) / 2 - var(--slider-track-thickness) / 2);
  bottom: 0;
  width: var(--slider-track-thickness);
  background: #979797;
  border-radius: 0px 0px 6px 6px;
  pointer-events: none;
  animation: goUp 1s ease;
}
@keyframes goUp {
  0% {
    height: 0;
  }
}
.vertical-range-slider-container input[type=range][orient=vertical] {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  writing-mode: vertical-lr;
  direction: rtl;
  pointer-events: none;
}
.vertical-range-slider-container input[type=range][orient=vertical]::-webkit-slider-runnable-track,
.vertical-range-slider-container input[type=range][orient=vertical]::-moz-range-track,
.vertical-range-slider-container input[type=range][orient=vertical]::-ms-track {
  border: none;
  background: var(--color-track);
  width: var(--slider-track-thickness);
  border-radius: 0px 0px 6px 6px;
}
.vertical-range-slider-container input[type=range][orient=vertical]::-webkit-slider-thumb,
.vertical-range-slider-container input[type=range][orient=vertical]::-moz-range-thumb,
.vertical-range-slider-container input[type=range][orient=vertical]::-ms-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  opacity: 0;
}

.half-doughnut-slider {
  position: relative;
  width: 200px;
  /* Adjust size as needed */
  height: 100px;
  margin: 20px;
}
.half-doughnut-slider .half-doughnut {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 100px 100px 0 0;
  /* Only top half visible */
  background-color: #009ae8;
}
.half-doughnut-slider .half-doughnut__fillClip {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color-track);
  transform-origin: bottom center;
  /* Set rotation point */
  transform: rotate(0deg);
  transition: transform 0.3s ease;
  /* Smooth transition */
}
.half-doughnut-slider .half-doughnut__cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #262b31;
  transform-origin: bottom center;
  transform: scale(0.9);
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}
.half-doughnut-slider .half-doughnut__value {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  font-weight: bold;
}
.half-doughnut-slider .humidity-slider {
  position: absolute;
  bottom: 0;
  left: 24%;
  width: 50%;
  pointer-events: none;
  opacity: 0;
}

.toast {
  --bs-toast-zindex: 1090;
  --bs-toast-padding-x: 0.75rem;
  --bs-toast-padding-y: 0.5rem;
  --bs-toast-spacing: 1.5rem;
  --bs-toast-max-width: 350px;
  --bs-toast-font-size: 0.875rem;
  --bs-toast-color: ;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-border-radius: 0.375rem;
  --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-border-width: var(--bs-border-width);
  --bs-toast-border-color: var(--bs-border-color-translucent);
  --bs-toast-border-radius: var(--bs-border-radius);
  --bs-toast-box-shadow: var(--bs-box-shadow);
  --bs-toast-header-color: var(--bs-secondary-color);
  --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-header-border-color: var(--bs-border-color-translucent);
  width: var(--bs-toast-max-width);
  max-width: 100%;
  font-size: var(--bs-toast-font-size);
  color: var(--bs-toast-color);
  pointer-events: auto;
  background-color: var(--bs-toast-bg);
  background-clip: padding-box;
  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
  box-shadow: var(--bs-toast-box-shadow);
  border-radius: var(--bs-toast-border-radius);
}

.toast.showing {
  opacity: 0;
}

.toast:not(.show) {
  display: none;
}

.toast-container {
  --bs-toast-zindex: 1090;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: var(--bs-toast-zindex);
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}

.toast-container > :not(:last-child) {
  margin-bottom: var(--bs-toast-spacing);
}

.toast-header {
  display: flex;
  align-items: center;
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
  color: var(--bs-toast-header-color);
  background-color: var(--bs-toast-header-bg);
  background-clip: padding-box;
  border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
  border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
  border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
}

.toast-header .btn-close {
  position: absolute;
  top: 8px;
  right: 8px;
}

.toast-body {
  padding: var(--bs-toast-padding-x);
  word-wrap: break-word;
}

.toast-header .btn-close {
  --bs-btn-close-color: #000;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23000%27%3e%3cpath d=%27M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z%27/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-opacity);
}
.toast-header .btn-close:hover {
  color: var(--bs-btn-close-color);
  text-decoration: none;
  opacity: var(--bs-btn-close-hover-opacity);
}
.toast-header .btn-close:focus {
  outline: 0;
  box-shadow: var(--bs-btn-close-focus-shadow);
  opacity: var(--bs-btn-close-focus-opacity);
}
.toast-header .btn-close:disabled, .toast-header .btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: var(--bs-btn-close-disabled-opacity);
}
.toast-header .btn-close-white {
  filter: var(--bs-btn-close-white-filter);
}
.toast-header [data-bs-theme=dark] .btn-close {
  filter: var(--bs-btn-close-white-filter);
}

/* 1. container
========================================== */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 96%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm,
  .container {
    max-width: 97%;
  }
}
@media (min-width: 768px) {
  .container-md,
  .container-sm,
  .container {
    max-width: 96%;
  }
}
@media (min-width: 992px) {
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 98%;
  }
}
@media (min-width: 1200px) {
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 98%;
  }
}
@media (min-width: 1400px) {
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 96%;
  }
}
/* 2. grid, row, col
========================================== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}

.col {
  flex: 1 0 0%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}
@media only screen and (max-width: 576px) {
  .col-4 {
    width: 100%;
  }
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}
@media only screen and (max-width: 576px) {
  .col-8 {
    flex: unset;
    width: 100%;
  }
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.33333333%;
}

.offset-2 {
  margin-left: 16.66666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333333%;
}

.offset-5 {
  margin-left: 41.66666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333333%;
}

.offset-8 {
  margin-left: 66.66666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333333%;
}

.offset-11 {
  margin-left: 91.66666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .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-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.66666667%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
/* 3. main
========================================== */
main {
  width: 100%;
  min-height: calc(100vh - 46px - 26px - 12px);
}
main .main-section {
  width: calc(100vw - 24px);
  min-height: calc(100vh - 46px - 26px - 24px);
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--shadow-2);
}
main .main-section .sections-group:not(:has(.Search-section)) {
  display: grid;
  width: calc(100vw - 24px - 12px);
  min-height: calc(100vh - 46px - 26px - 24px - 24px - 12px);
  grid-template-columns: 20% 80%;
  grid-template-rows: 1fr;
  gap: 0px 12px;
  grid-auto-flow: row;
  grid-template-areas: "LocationTree-section Result-section";
}
@media only screen and (max-width: 1280px) {
  main .main-section .sections-group:not(:has(.Search-section)) {
    width: calc(100vw - 24px);
    min-height: unset;
    grid-template-columns: 100%;
    gap: 12px 0;
    grid-template-areas: "LocationTree-section" "Result-section";
  }
}
main .main-section .sections-group:has(.Search-section) {
  display: grid;
  width: calc(100vw - 24px - 24px);
  min-height: calc(100vh - 46px - 26px - 24px - 24px - 12px);
  grid-template-columns: 20% 20% 60%;
  grid-template-rows: 1fr;
  gap: 0px 12px;
  grid-auto-flow: row;
  grid-template-areas: "LocationTree-section Search-section Result-section";
  transition: width 0.1s linear, grid-template-columns 0.5s ease;
}
@media only screen and (max-width: 1280px) {
  main .main-section .sections-group:has(.Search-section) {
    width: calc(100vw - 24px);
    grid-template-columns: 100%;
    gap: 12px 0;
    grid-template-areas: "LocationTree-section" "Search-section" "Result-section";
  }
}
main .main-section .sections-group {
  margin-bottom: 12px;
}
main .main-section .LocationTree-section {
  grid-area: LocationTree-section;
  box-shadow: var(--shadow-3);
}
main .main-section .Search-section {
  grid-area: Search-section;
  box-shadow: var(--shadow-3);
}
main .main-section .Result-section {
  grid-area: Result-section;
  box-shadow: var(--shadow-3);
}
main .main-section .section-title {
  padding: 4px 12px;
  box-shadow: var(--shadow-tr);
}
main .main-section .section-title i {
  margin-right: 6px;
}
main .rwd-buttons {
  display: none;
}
@media only screen and (max-width: 576px) {
  main .rwd-buttons {
    display: block;
    padding: 4px 12px;
    box-shadow: var(--shadow-3);
  }
  main .rwd-buttons .filter-btn {
    width: -webkit-fill-available;
  }
  main .rwd-buttons .filter-btn i {
    margin-right: 6px;
  }
  main .sections-group .LocationTree-section,
  main .sections-group .Search-section {
    display: none;
  }
  main .sections-group.sections-group:has(.Search-section) .rwd-buttons {
    margin-bottom: -12px;
  }
  main #filterModal .modal-body .LocationTree-section {
    margin-bottom: 12px;
  }
}

#loader-section {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  background-color: rgb(26, 29, 34);
  z-index: 10009;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 180px;
  height: 20px;
  -webkit-mask: radial-gradient(circle closest-side, #000 80%, rgba(0, 0, 0, 0)) left/20% 100%;
  mask: radial-gradient(circle closest-side, #000 80%, rgba(0, 0, 0, 0)) left/20% 100%;
  background: linear-gradient(#3DFDFE 0 0) left/0% 100% no-repeat #f2f2f2;
  animation: l17 1s infinite steps(6);
}

@keyframes l17 {
  100% {
    background-size: 120% 100%;
  }
}
.link-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: center;
  gap: 24px;
}

.link-card {
  padding: 24px;
  text-decoration: none;
  transition: transform 0.3s;
  box-shadow: var(--shadow-2);
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  font-size: 18px;
  font-weight: 500;
  background: #262B31;
  background: linear-gradient(185deg, rgb(38, 43, 49) 85%, rgba(46, 196, 194, 0.2) 100%);
  position: relative;
  overflow: hidden;
  text-wrap: auto;
}
.link-card::before, .link-card::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #3DFDFE;
}
.link-card::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}
.link-card::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}
.link-card:active {
  text-decoration: none;
}
.link-card:hover {
  transform: translateY(-5px);
}
.link-card img {
  width: 48px;
  height: 48px;
}

.Result-section .dashboard-wrapper {
  padding: 12px 0 0 0;
}
.Result-section .dashboard-wrapper canvas {
  max-width: 100%;
}
.Result-section .dashboard-wrapper .statistics-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  max-width: 100%;
}
.Result-section .dashboard-wrapper .statistics-row:not(:last-child) {
  margin-bottom: 12px;
}
.Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-ratio {
  height: 428px;
}
.Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-ratio .chart-legend-popup {
  height: 140px;
}
.Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-detectors {
  height: 428px;
}
.Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-detectors .chart-legend-popup {
  height: 140px;
}
.Result-section .dashboard-wrapper .statistics-row.single-ratio-row-height .statistics-detectors .chart-total {
  top: 37.5%;
}
.Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) .statistics-trend {
  flex: 1;
}
.Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) .statistics-VDSchordDiagram {
  flex: 1;
}
.Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) .statistics-detectors {
  flex: 1;
}
.Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-levels) .statistics-detectors {
  flex: 1;
}
.Result-section .dashboard-wrapper .statistics-content {
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 8px 5px rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 8px;
  box-sizing: border-box;
}
.Result-section .dashboard-wrapper .statistics-trend {
  flex: 1;
  height: 280px;
}
.Result-section .dashboard-wrapper .statistics-images-pages {
  flex: 1;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
  overflow: hidden;
  padding-bottom: 12px;
}
.Result-section .dashboard-wrapper .statistics-images-pages .interactiveTitle {
  padding: 4px 12px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}
.Result-section .dashboard-wrapper .statistics-images-pages .interactiveTitle .img-btn-group {
  display: inline-flex;
  gap: 6px;
}
.Result-section .dashboard-wrapper .statistics-images-pages .images-page-group {
  display: flex;
  justify-content: center;
  gap: 4px;
  transition: transform 0.3s ease-in-out;
}
.Result-section .dashboard-wrapper .statistics-images-pages .img-outer {
  width: 136px;
  height: 77px;
  position: relative;
}
.Result-section .dashboard-wrapper .statistics-images-pages img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.Result-section .dashboard-wrapper .statistics-images-pages .no-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}
.Result-section .dashboard-wrapper .statistics-images-pages .page-arrow {
  position: absolute;
  top: 61%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
  width: 30px;
  height: 77px;
  background-color: rgba(53, 60, 68, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.Result-section .dashboard-wrapper .statistics-images-pages .hide {
  color: #606060;
  cursor: default;
}
.Result-section .dashboard-wrapper .statistics-images-pages .page-arrow.left {
  left: 8px;
}
.Result-section .dashboard-wrapper .statistics-images-pages .page-arrow.right {
  right: 8px;
}
.Result-section .dashboard-wrapper .statistics-images-pages .pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}
.Result-section .dashboard-wrapper .statistics-images-pages .pagination span {
  width: 10px;
  height: 10px;
  background: #C0C3C5;
  border-radius: 50%;
  cursor: pointer;
}
.Result-section .dashboard-wrapper .statistics-images-pages .pagination .active {
  background: #3DFDFE;
}
.Result-section .dashboard-wrapper .clickable-img {
  cursor: pointer;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 280px;
  position: relative;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram .chordTitle,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram .chordTitle {
  padding: 0 4px 0 8px;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: bold;
  display: inline-flex;
  justify-content: space-between;
  align-items: flex-start;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram .chordTitle i,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram .chordTitle i {
  margin-right: 6px;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram .chordTitle button i,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram .chordTitle button i {
  margin-right: 0;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram #chordContainer,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram #chordContainer {
  width: 250px;
  height: 250px;
  filter: saturate(2);
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram #chord-legend .legend-item,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram #chord-legend .legend-item {
  position: absolute;
  text-wrap: wrap;
  font-size: 0.75rem;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(1),
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(1) {
  top: 20%;
  left: 50%;
  width: 260px;
  transform: translate(-50%, 0);
  text-align: center;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(2),
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(2) {
  bottom: 6%;
  left: 50%;
  width: 260px;
  transform: translate(-50%, 0);
  text-align: center;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(3),
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(3) {
  top: 48%;
  left: 2.5%;
  width: 90px;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(4),
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(4) {
  top: 48%;
  right: 2%;
  width: 90px;
  text-align: right;
}
.Result-section .dashboard-wrapper .statistics-VDSchordDiagram .g2-tooltip,
.Result-section .dashboard-wrapper #statistics-VDSchordDiagram .g2-tooltip {
  background-color: rgb(0, 0, 0) !important;
  color: #f2f2f2 !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflowTotal {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgb(10, 10, 10);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 28px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflowTotal .VDStrafficflowTotalName {
  background-color: rgba(0, 0, 0, 0.3);
  color: #3DFDFE;
  border-radius: 50px;
  padding: 8px 12px;
  margin: 0 4px;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflowTotal .VDStrafficflowTotalAmount {
  border-radius: 50px;
  padding: 8px 12px;
  margin: 0 4px;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflowTotal .VDStrafficflowTotalAmount.highLevel {
  background-color: #97050c;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflowTotal .VDStrafficflowTotalAmount.middleLevel {
  background-color: #ce9f1f;
  color: black;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflowTotal .VDStrafficflowTotalAmount.lowLevel {
  background-color: #225c2a;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table {
  width: 100%;
  border-spacing: 1px;
  border-collapse: collapse;
  margin-bottom: 12px;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr {
  background-color: rgba(0, 0, 0, 0.3);
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr th,
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td {
  position: relative;
  text-align: center;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr th {
  padding: 8px 8px;
  border: 1px solid rgb(10, 10, 10);
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr th:first-child {
  border-bottom: none;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr th p {
  border-radius: 10px;
  padding: 4px 8px;
  margin-right: 8px;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr th img {
  width: 24px;
  height: 24px;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td {
  padding: 4px 8px 8px 8px;
  border: 1px solid rgb(10, 10, 10);
  border-top: none;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td p {
  display: inline;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td .subtd {
  display: flex;
  justify-content: space-between;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td .subtd span:nth-child(1) {
  padding: 8px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td .subtd span:nth-child(2) {
  padding: 8px;
  text-align: right;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table tr td hr {
  margin: 2px 0 0 0;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table .dataTables_empty {
  font-weight: 300 !important;
  padding: 8px !important;
}
.Result-section .dashboard-wrapper #chordDetailsModal .VDStrafficflow-table img {
  width: 24px;
  height: 24px;
}
.Result-section .dashboard-wrapper .statistics-detectors {
  flex: 1;
  height: 280px;
  position: relative;
}
.Result-section .dashboard-wrapper .statistics-detectors .chart-legend-popup {
  height: 90px;
}
.Result-section .dashboard-wrapper .statistics-detectors .chart-legend-popup ul li {
  width: 100%;
}
.Result-section .dashboard-wrapper .statistics-ranking,
.Result-section .dashboard-wrapper .statistics-environmentControl-list,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels {
  flex: 1;
}
.Result-section .dashboard-wrapper .statistics-ranking .rankingTitle,
.Result-section .dashboard-wrapper .statistics-ranking .environmentControlListTitle,
.Result-section .dashboard-wrapper .statistics-ranking .environmentControlListTitle,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .rankingTitle,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .environmentControlListTitle,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .environmentControlListTitle,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .rankingTitle,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .environmentControlListTitle,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .environmentControlListTitle {
  padding: 0 8px;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: bold;
  display: inline-flex;
  justify-content: space-between;
  align-items: flex-start;
}
.Result-section .dashboard-wrapper .statistics-ranking .rankingTitle i,
.Result-section .dashboard-wrapper .statistics-ranking .environmentControlListTitle i,
.Result-section .dashboard-wrapper .statistics-ranking .environmentControlListTitle i,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .rankingTitle i,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .environmentControlListTitle i,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .environmentControlListTitle i,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .rankingTitle i,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .environmentControlListTitle i,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .environmentControlListTitle i {
  margin-right: 6px;
}
.Result-section .dashboard-wrapper .statistics-ranking .table-wrap,
.Result-section .dashboard-wrapper .statistics-environmentControl-list .table-wrap,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .table-wrap {
  max-height: 200px;
  overflow-y: auto;
}
.Result-section .dashboard-wrapper .statistics-ranking table,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}
.Result-section .dashboard-wrapper .statistics-ranking table tr,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table tr,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table tr {
  background-color: rgba(0, 0, 0, 0.3);
  clip-path: xywh(0 0 100% 100% round 2em);
}
.Result-section .dashboard-wrapper .statistics-ranking table tr:hover,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table tr:hover,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table tr:hover {
  background-color: rgba(0, 0, 0, 0.4);
}
.Result-section .dashboard-wrapper .statistics-ranking table td,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table td,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table td {
  padding: 8px 12px;
}
.Result-section .dashboard-wrapper .statistics-ranking table td:first-child,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table td:first-child,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table td:first-child {
  padding-right: 0;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingIcon,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingIcon,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingIcon {
  text-align: center;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingIcon .rankingIconInside,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingIcon .rankingIconInside,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingIcon .rankingIconInside {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #606060;
  border-radius: 24px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingIcon .rankingIconInside:has(.fa-web-awesome),
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingIcon .rankingIconInside:has(.fa-web-awesome),
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingIcon .rankingIconInside:has(.fa-web-awesome) {
  border: none;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingIcon .fa-web-awesome,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingIcon .fa-web-awesome,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingIcon .fa-web-awesome {
  color: #3DFDFE;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingVDRoadName,
.Result-section .dashboard-wrapper .statistics-ranking table .rankingVDSRoadName,
.Result-section .dashboard-wrapper .statistics-ranking table .rankingIIDEventName,
.Result-section .dashboard-wrapper .statistics-ranking table .rankingQLDRoadName,
.Result-section .dashboard-wrapper .statistics-ranking table .doorName,
.Result-section .dashboard-wrapper .statistics-ranking table .fanName,
.Result-section .dashboard-wrapper .statistics-ranking table .personnelName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingVDRoadName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingVDSRoadName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingIIDEventName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingQLDRoadName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanName,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .personnelName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingVDRoadName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingVDSRoadName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingIIDEventName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingQLDRoadName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanName,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .personnelName {
  text-wrap: wrap;
  text-align: left;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount {
  font-variant-numeric: tabular-nums;
  text-align: right;
  float: right;
  font-weight: 600;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount div {
  padding: 8px;
  border-radius: 30px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount span:nth-child(2) {
  margin-left: 3px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount .levelPoint {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount.noLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount.noLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount.noLevel div {
  background-color: #1750a3;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount.highLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount.highLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount.highLevel div {
  background-color: #97050c;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount.middleLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount.middleLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount.middleLevel div {
  background-color: #ce9f1f;
  color: black;
}
.Result-section .dashboard-wrapper .statistics-ranking table .rankingDataAmount.lowLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .rankingDataAmount.lowLevel div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .rankingDataAmount.lowLevel div {
  background-color: #225c2a;
}
.Result-section .dashboard-wrapper .statistics-ranking table .doorStatus,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorStatus,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorStatus {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.Result-section .dashboard-wrapper .statistics-ranking table .doorStatus div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorStatus div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorStatus div {
  padding: 8px;
  border-radius: 30px;
  width: -moz-fit-content;
  width: fit-content;
  float: right;
  text-wrap: nowrap;
}
.Result-section .dashboard-wrapper .statistics-ranking table .doorStatus span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorStatus span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorStatus span:nth-child(2) {
  margin-left: 3px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .doorStatus .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorStatus .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorStatus .levelPoint {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .doorStatus.doorOpen div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorStatus.doorOpen div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorStatus.doorOpen div {
  background-color: #225c2a;
}
.Result-section .dashboard-wrapper .statistics-ranking table .doorStatus.doorClosed div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .doorStatus.doorClosed div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .doorStatus.doorClosed div {
  background-color: #606060;
}
.Result-section .dashboard-wrapper .statistics-ranking table .fanStatus,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanStatus,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanStatus {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.Result-section .dashboard-wrapper .statistics-ranking table .fanStatus div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanStatus div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanStatus div {
  padding: 8px;
  border-radius: 30px;
  width: -moz-fit-content;
  width: fit-content;
  float: right;
  text-wrap: nowrap;
}
.Result-section .dashboard-wrapper .statistics-ranking table .fanStatus span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanStatus span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanStatus span:nth-child(2) {
  margin-left: 3px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .fanStatus .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanStatus .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanStatus .levelPoint {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .fanStatus.fanOn div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanStatus.fanOn div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanStatus.fanOn div {
  background-color: #225c2a;
}
.Result-section .dashboard-wrapper .statistics-ranking table .fanStatus.fanOff div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .fanStatus.fanOff div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .fanStatus.fanOff div {
  background-color: #97050c;
}
.Result-section .dashboard-wrapper .statistics-ranking table .accessControlStatus,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .accessControlStatus,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .accessControlStatus {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.Result-section .dashboard-wrapper .statistics-ranking table .accessControlStatus div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .accessControlStatus div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .accessControlStatus div {
  padding: 8px;
  border-radius: 30px;
  width: -moz-fit-content;
  width: fit-content;
  float: right;
  text-wrap: nowrap;
}
.Result-section .dashboard-wrapper .statistics-ranking table .accessControlStatus span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .accessControlStatus span:nth-child(2),
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .accessControlStatus span:nth-child(2) {
  margin-left: 3px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .accessControlStatus .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .accessControlStatus .levelPoint,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .accessControlStatus .levelPoint {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
.Result-section .dashboard-wrapper .statistics-ranking table .accessControlStatus.accessControlValid div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .accessControlStatus.accessControlValid div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .accessControlStatus.accessControlValid div {
  background-color: #225c2a;
}
.Result-section .dashboard-wrapper .statistics-ranking table .accessControlStatus.accessControlInvalid div,
.Result-section .dashboard-wrapper .statistics-environmentControl-list table .accessControlStatus.accessControlInvalid div,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels table .accessControlStatus.accessControlInvalid div {
  background-color: #97050c;
}
.Result-section .dashboard-wrapper .statistics-ranking {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels {
  display: grid;
  grid-template-rows: 0.2fr 2fr;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-self: stretch;
  flex: 1;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .enc-level-location {
  padding: 8px 12px;
  text-wrap: wrap;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .enc-level-location span:nth-child(1) {
  color: #3DFDFE;
  font-size: 16px;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .enc-state-group {
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 4px 12px;
  width: 100%;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .enc-state-group .enc-state {
  width: 0.8vw;
  height: 0.8vw;
  margin-right: 3px;
  border-radius: 20px;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .waterLevelOneAlert,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .oilLevelHigh {
  background-color: #e02626;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .waterLevelTwoAlert,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .oilLevelLow {
  background-color: #ff8555;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .waterLevelNormal,
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .oilNormal {
  background-color: #24d13b;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .lowElectricity {
  background-color: #ffe6a3;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .moderateElectricity {
  background-color: #ce9f1f;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .highElectricity {
  background-color: #995c00;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .lowTemperature {
  background-color: #4fe3f3;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .moderateTemperature {
  background-color: #edbd35;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .highTemperature {
  background-color: #e02626;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .lowHumidity {
  background-color: #c2ebff;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .moderateHumidity {
  background-color: #5fb8e4;
}
.Result-section .dashboard-wrapper .statistics-environmentControl-levels .enc-level-groups .enc-level-group .highHumidity {
  background-color: #056899;
}
.Result-section .dashboard-wrapper .statistics-ratio {
  flex: 1;
  height: 280px;
  position: relative;
}
.Result-section .dashboard-wrapper .statistics-ratio .usageStatus-icon {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  z-index: -1;
}
.Result-section .dashboard-wrapper .statistics-ratio .usageStatus-icon i {
  margin-right: 6px;
}
.Result-section .dashboard-wrapper .statistics-ratio .chart-legend-popup {
  height: 90px;
}
.Result-section .dashboard-wrapper .statistics-ratio .chart-legend-popup ul li {
  width: 100%;
}
.Result-section .dashboard-wrapper .chart-total {
  position: absolute;
  top: 38.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  font-weight: bold;
  pointer-events: none;
  z-index: -1;
}
.Result-section .dashboard-wrapper .half-dougnut {
  top: 50%;
}
.Result-section .dashboard-wrapper .chart-legend-popup {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: auto;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 8px;
  box-sizing: border-box;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}
.Result-section .dashboard-wrapper .chart-legend-popup ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.Result-section .dashboard-wrapper .chart-legend-popup ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Result-section .dashboard-wrapper .chart-legend-popup ul li span {
  display: inline-flex;
}
.Result-section .dashboard-wrapper .chart-legend-popup ul li .legend-color {
  margin-right: 6px;
  width: 10px;
  height: 10px;
  background-color: #fff;
}
.Result-section .dashboard-wrapper .chart-legend-popup ul li .legend-label {
  flex-grow: 1;
  margin-right: 6px;
  min-width: 30%;
  flex-basis: 30%;
  text-wrap: wrap;
}
.Result-section .dashboard-wrapper .chart-legend-popup ul li .legend-data {
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
  justify-content: right;
  min-width: 30%;
  flex-basis: 30%;
}
.Result-section .dashboard-wrapper .chart-legend-popup ul li .legend-percentage {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  justify-content: right;
  min-width: 30%;
  flex-basis: 30%;
}
@media only screen and (max-width: 1440px) {
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-ranking), .Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-list), .Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-levels) {
    flex-wrap: wrap;
  }
  .Result-section .dashboard-wrapper .statistics-row .statistics-ranking,
  .Result-section .dashboard-wrapper .statistics-row .statistics-environmentControl-list,
  .Result-section .dashboard-wrapper .statistics-row .statistics-environmentControl-levels {
    flex: 1 49%;
  }
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-levels) .statistics-detectors {
    flex: 1 49%;
  }
}
@media only screen and (max-width: 1280px) {
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-trend), .Result-section .dashboard-wrapper .statistics-row:has(.statistics-ranking), .Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-list), .Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-levels), .Result-section .dashboard-wrapper .statistics-row:has(.statistics-interactive-overall) {
    flex-wrap: wrap;
  }
  .Result-section .dashboard-wrapper .statistics-row .statistics-trend,
  .Result-section .dashboard-wrapper .statistics-row .statistics-detectors {
    flex: 1 99%;
  }
  .Result-section .dashboard-wrapper .statistics-row .statistics-ranking,
  .Result-section .dashboard-wrapper .statistics-row .statistics-environmentControl-list,
  .Result-section .dashboard-wrapper .statistics-row .statistics-environmentControl-levels {
    flex: 1 49%;
  }
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) {
    flex-wrap: wrap;
  }
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) .statistics-trend,
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) .statistics-VDSchordDiagram,
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-VDSchordDiagram) .statistics-detectors {
    flex: 1 99%;
  }
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-environmentControl-levels) .statistics-detectors {
    flex: 1 49%;
  }
  .Result-section .dashboard-wrapper .statistics-row:has(.statistics-ratio) {
    flex-wrap: wrap;
  }
  .Result-section .dashboard-wrapper .statistics-ratio {
    flex: 1 49%;
  }
  .Result-section .dashboard-wrapper .statistics-ratio:nth-last-child(1):nth-child(odd) {
    flex-basis: 100%;
    /* Last 1 item stretch to fit row if odd number of elements */
  }
}
.Result-section .interactive-dashboard-wrapper .statistics-interactive-overall {
  flex: 1;
  align-content: center;
}
@media only screen and (max-width: 1280px) {
  .Result-section .interactive-dashboard-wrapper .statistics-interactive-overall {
    flex: 1 24%;
  }
}
.Result-section .interactive-dashboard-wrapper .aqi-item,
.Result-section .interactive-dashboard-wrapper .interactive-item {
  border-radius: 0px;
  flex: 1;
  position: relative;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-title,
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-data,
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-status,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-title,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-data,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-status,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-title,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-data,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-status,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-title,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-data,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-status {
  font-weight: bold;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-title i,
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-data i,
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-status i,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-title i,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-data i,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-status i,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-title i,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-data i,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-status i,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-title i,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-data i,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-status i {
  margin-right: 6px;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-data,
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-data,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-data,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-data {
  font-size: 28px;
  text-align: center;
}
.Result-section .interactive-dashboard-wrapper .aqi-item.step-good .aqi-step:nth-child(1),
.Result-section .interactive-dashboard-wrapper .interactive-item.step-good .aqi-step:nth-child(1) {
  background-color: #24d13b;
}
.Result-section .interactive-dashboard-wrapper .aqi-item.step-moderate .aqi-step:nth-child(1),
.Result-section .interactive-dashboard-wrapper .aqi-item.step-moderate .aqi-step:nth-child(2),
.Result-section .interactive-dashboard-wrapper .interactive-item.step-moderate .aqi-step:nth-child(1),
.Result-section .interactive-dashboard-wrapper .interactive-item.step-moderate .aqi-step:nth-child(2) {
  background-color: #ffeb0a;
}
.Result-section .interactive-dashboard-wrapper .aqi-item.step-poor .aqi-step:nth-child(1),
.Result-section .interactive-dashboard-wrapper .aqi-item.step-poor .aqi-step:nth-child(2),
.Result-section .interactive-dashboard-wrapper .aqi-item.step-poor .aqi-step:nth-child(3),
.Result-section .interactive-dashboard-wrapper .interactive-item.step-poor .aqi-step:nth-child(1),
.Result-section .interactive-dashboard-wrapper .interactive-item.step-poor .aqi-step:nth-child(2),
.Result-section .interactive-dashboard-wrapper .interactive-item.step-poor .aqi-step:nth-child(3) {
  background-color: #e02626;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-steps,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-steps {
  display: flex;
  justify-content: space-between;
  gap: 0px;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .aqi-steps .aqi-step,
.Result-section .interactive-dashboard-wrapper .interactive-item .aqi-steps .aqi-step {
  flex: 1;
  height: 10px;
  background-color: #606060;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .enc-level-group,
.Result-section .interactive-dashboard-wrapper .interactive-item .enc-level-group {
  position: relative;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .enc-level-group .interactive-data,
.Result-section .interactive-dashboard-wrapper .interactive-item .enc-level-group .interactive-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Result-section .interactive-dashboard-wrapper .aqi-item .LevelOneAlert,
.Result-section .interactive-dashboard-wrapper .interactive-item .LevelOneAlert {
  background-color: #e02626;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .LevelTwoAlert,
.Result-section .interactive-dashboard-wrapper .interactive-item .LevelTwoAlert {
  background-color: #e2551d;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .normalLevel,
.Result-section .interactive-dashboard-wrapper .interactive-item .normalLevel {
  background-color: #008bd1;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-custom-legend-group,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-custom-legend-group {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-custom-legend-group .interactive-custom-legend,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-custom-legend-group .interactive-custom-legend {
  display: inline-flex;
  gap: 12px;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .interactive-custom-legend-group .interactive-custom-legend.Avaliable,
.Result-section .interactive-dashboard-wrapper .interactive-item .interactive-custom-legend-group .interactive-custom-legend.Avaliable {
  color: #24d13b;
}
.Result-section .interactive-dashboard-wrapper .aqi-item #carParkingChart,
.Result-section .interactive-dashboard-wrapper .aqi-item #motorParkingChart,
.Result-section .interactive-dashboard-wrapper .interactive-item #carParkingChart,
.Result-section .interactive-dashboard-wrapper .interactive-item #motorParkingChart {
  margin-bottom: 8px;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
.Result-section .interactive-dashboard-wrapper .interactive-item .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  color: #262b31 !important;
}
.Result-section .interactive-dashboard-wrapper .aqi-item .apexcharts-tooltip span,
.Result-section .interactive-dashboard-wrapper .interactive-item .apexcharts-tooltip span {
  color: #323232;
}
.Result-section .interactive-dashboard-wrapper .statistics-trend {
  height: 280px;
}
.Result-section .interactive-dashboard-wrapper .statistics-trend .interactiveTitle {
  padding: 4px 12px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
}
.Result-section .interactive-dashboard-wrapper .statistics-trend .interactiveTitle .trend-btn-group {
  display: inline-flex;
  gap: 6px;
}
.Result-section .interactive-dashboard-wrapper .statistics-trend .trend-wrapper {
  min-height: 180px;
  max-height: 280px;
}
@media only screen and (max-width: 1280px) {
  .Result-section .interactive-dashboard-wrapper .statistics-trend {
    flex: unset !important;
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .Result-section .interactive-dashboard-wrapper .statistics-trend .trend-btn-group .tab-btn:nth-child(2), .Result-section .interactive-dashboard-wrapper .statistics-trend .trend-btn-group .tab-btn:nth-child(3), .Result-section .interactive-dashboard-wrapper .statistics-trend .trend-btn-group .tab-btn:nth-child(4), .Result-section .interactive-dashboard-wrapper .statistics-trend .trend-btn-group .tab-btn:nth-child(5) {
    display: none;
  }
}
.Result-section .interactive-dashboard-wrapper .statistics-content:has(.interactive-map-thumbnail) {
  padding: 0;
  height: 280px;
  flex: 0.5;
}
@media only screen and (max-width: 1280px) {
  .Result-section .interactive-dashboard-wrapper .statistics-content:has(.interactive-map-thumbnail) {
    flex: 1;
  }
}
.Result-section .interactive-dashboard-wrapper .interactive-map-thumbnail {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.Result-section .interactive-dashboard-wrapper .interactive-map-thumbnail #map {
  width: 100%;
  height: 100%;
}
.Result-section .interactive-dashboard-wrapper .interactive-page-section {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
  box-shadow: 0 4px 8px 5px rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 8px;
  box-sizing: border-box;
}
.Result-section .interactive-dashboard-wrapper .interactive-page-section .interactiveTitle {
  padding: 4px 12px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  display: inline-flex;
  justify-content: space-between;
  align-items: flex-start;
}
.Result-section .interactive-dashboard-wrapper .interactive-page-section .interactiveTitle .interactiveTitleTips {
  font-size: 14px;
  font-weight: 300;
  display: inline;
  color: #f88080;
}
.Result-section .interactive-dashboard-wrapper .interactive-table-section {
  max-height: 275px;
  overflow-x: auto;
}
.Result-section .interactive-dashboard-wrapper .interactive-table-section:has(#WLInteractiveTable) {
  max-height: 234px;
}
.Result-section .interactive-dashboard-wrapper .statistics-date-time {
  flex: 1;
  animation: attentionBorder 1.2s ease-in-out;
}
@keyframes attentionBorder {
  0% {
    outline: 1px solid #262b31;
  }
  50% {
    outline: 1px solid #29b3b0;
  }
  100% {
    outline: 1px solid #262b31;
  }
}
.Result-section .interactive-dashboard-wrapper .statistics-date-time #datetime-interactive {
  margin-bottom: 12px;
}
.Result-section .interactive-dashboard-wrapper .time-btn-group {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
}
@media only screen and (max-width: 768px) {
  .Result-section .interactive-dashboard-wrapper .time-btn-group {
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 576px) {
  .Result-section .interactive-dashboard-wrapper .interactive-table-section {
    margin-bottom: 0px;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-row:has(.statistics-date-time) {
    position: fixed;
    left: 0;
    bottom: 0px;
    z-index: 10002;
    background-color: #262b31;
    width: 100%;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-row:has(.statistics-date-time) #datetime-interactive {
    margin-bottom: 0;
  }
  .Result-section .interactive-dashboard-wrapper .statistics-row:has(.statistics-date-time) .time-btn-group {
    display: none;
  }
}

.large-img-outer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.large-img-outer #modal-large-img {
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 576px) {
  body:has(.statistics-date-time) footer {
    margin-bottom: 56px;
  }
}
:root {
  --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
  --popup-info-icon: 1vw;
}

@media (prefers-color-scheme: dark) {
  .map-tiles {
    filter: var(--map-tiles-filter, none);
  }
}
.map-section {
  display: flex;
  flex-direction: column;
  background-color: #262b31;
}
.map-section-body {
  display: flex;
  width: 100%;
  height: calc(100vh - 46px - 26px - 24px - 24px - 12px - 28px);
  padding: 12px 0 0 0;
}
.map-section-body #map-charts {
  width: 30%;
  max-height: 100%;
  overflow-y: scroll;
}
.map-section-body #map-charts::-webkit-scrollbar {
  display: none;
}
.map-section-body #map-charts .map-chart-group {
  padding: 12px;
}
.map-section-body #map-charts .map-chart-group .chart-header {
  display: flex;
  justify-content: space-between;
}
.map-section-body #map-charts .map-chart-group .chart-header .chart-title {
  display: flex;
  color: rgba(255, 255, 255, 0.8);
}
.map-section-body #map-charts .map-chart-group .chart-header .chart-title p {
  margin: 0 8px 0 0;
}
.map-section-body #map-charts .map-chart-group .chart-header .chart-title .functions-icon {
  display: flex;
  align-items: center;
}
.map-section-body #map-charts .map-chart-group .chart-header .chart-title .functions-icon img {
  width: 18px;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 20px;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 4px;
  left: 0;
  right: 0;
  bottom: 4px;
  background-color: #c0c3c5;
  transition: 0.4s;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch .slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 0px;
  bottom: -4px;
  background-color: #f2f2f2;
  transition: 0.4s;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch .slider.round {
  border-radius: 20px;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch .slider.round::before {
  border-radius: 50%;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch input:checked + .slider {
  background-color: #2ec4c2;
}
.map-section-body #map-charts .map-chart-group .chart-header .switch input:checked + .slider::before {
  transform: translateX(28.4px);
}
.map-section-body #map-charts .map-chart-group .chart-header .switch input:focus + .slider {
  box-shadow: 0 0 1px #2ec4c2;
}
.map-section-body #map-charts .map-chart-group .chart-body #chargingChart,
.map-section-body #map-charts .map-chart-group .chart-body #airboxChart,
.map-section-body #map-charts .map-chart-group .chart-body #APChart,
.map-section-body #map-charts .map-chart-group .chart-body #electricityChart {
  position: relative;
  height: 30vh;
  overflow: hidden;
  display: none;
}
.map-section-body .map-container {
  position: relative;
  width: 70%;
  height: 100%;
}
.map-section-body .map-container #map {
  width: 100%;
  height: calc(100% - 48px);
}
.map-section-body .map-container .map-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  top: 128px;
  left: 12px;
  z-index: 1000;
  cursor: pointer;
}
.map-section-body .map-container .map-tools .district-button,
.map-section-body .map-container .map-tools .village-button {
  background-color: #333b44;
}
.map-section-body .map-container .map-tools .district-button:hover,
.map-section-body .map-container .map-tools .village-button:hover {
  background-color: #262b31;
}
.map-section-body .map-container .map-tools .district-button.active,
.map-section-body .map-container .map-tools .village-button.active {
  background-color: #181b1f;
}
.map-section-body .map-container .zone-tools {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding-left: 8px;
  width: 100%;
  height: 48px;
  background-color: #242424;
}
.map-section-body .map-container .zone-tools .zone-button {
  border: unset;
  cursor: pointer;
  color: #C0C3C5;
  background-color: #333b44;
}
.map-section-body .map-container .zone-tools .zone-button:hover {
  background-color: #262b31;
}
.map-section-body .map-container .zone-tools .zone-button:active {
  background-color: #181b1f;
}
.map-section .abnormal {
  color: red;
}
.map-section .circle-shadow {
  box-shadow: 0 0 10px green;
}
.map-section .legend-group-wrap {
  display: flex;
  position: absolute;
  bottom: 20px;
  right: 10px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}
.map-section .legend {
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.map-section .legend .legend-title {
  font-weight: 700;
}
.map-section .legend .legend-unit {
  margin-bottom: 4px;
  padding: 2px;
  width: 100%;
  text-align: center;
  background-color: #6f6f6f;
  color: rgba(255, 255, 255, 0.87);
  border-radius: 5px;
}
.map-section .legend .legend-body {
  display: flex;
  justify-content: end;
  align-items: end;
  gap: 4px;
  padding-bottom: 10px;
}
.map-section .legend .legend-body .legend-ruler {
  display: flex;
  flex-direction: column;
  align-items: end;
  flex-direction: column-reverse;
  transform: translateY(10px);
}
.map-section .legend .legend-body .legend-ruler .number {
  display: inline-block;
  width: 18px;
  height: 18px;
  text-align: end;
}
.map-section .legend .legend-body .legend-ruler .number.over-300 {
  transform: translateX(-7px);
}
.map-section .legend .legend-body .legend-item-group {
  display: flex;
  flex-direction: column;
  align-items: end;
  background: transparent;
}
.map-section .legend .legend-body .legend-item-group .square {
  display: inline-block;
  margin-right: 5px;
  width: 18px;
  height: 18px;
}
.map-section .legend .legend-item {
  display: flex;
  align-items: center;
}
.map-section .legend .legend-item p {
  margin: 0px;
}
.map-section .legend .legend-item .square {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.map-section .legend .legend-item .wind-img,
.map-section .legend .legend-item .uv-img {
  margin-right: 5px;
  width: 12px;
  height: 12px;
}
.map-section .legend .legend-item .wind-img img,
.map-section .legend .legend-item .uv-img img {
  width: 100%;
}
.map-section .legend .legend-body-wrap {
  display: flex;
}
.map-section .legend .legend-body-wrap .legend-levels {
  margin-left: 8px;
}
.map-section .legend .legend-body-wrap .legend-levels p {
  margin: 0;
}
.map-section .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  color: #262b31 !important;
}
.map-section .leaflet-popup {
  margin-bottom: 30px;
}
.map-section .leaflet-container {
  font-family: unset;
}
.map-section .leaflet-container a.leaflet-popup-close-button {
  font: 18px/26px Tahoma, Verdana, sans-serif;
  color: #c0c3c5;
}
.map-section .leaflet-container a.leaflet-popup-close-button:hover {
  color: #c0c3c5;
}
.map-section .leaflet-popup-content-wrapper,
.map-section .leaflet-popup-tip {
  background-color: #272a2c !important;
  color: #f2f2f2 !important;
  white-space: nowrap;
}
.map-section .leaflet-popup-content {
  font-size: 1rem;
}
.map-section .leaflet-popup-content:has(.human-feature-info-group) {
  min-width: 140px !important;
}
.map-section .leaflet-popup-content:has(.vd-info-group) {
  min-width: 220px !important;
}
.map-section .leaflet-popup-content:has(.vds-info-group) {
  min-width: 500px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: 100%;
}
.map-section .leaflet-popup-content:has(.IID-info-group), .map-section .leaflet-popup-content:has(.tte-info-group) {
  min-width: 28vw !important;
}
.map-section .leaflet-popup-content:has(.parking-lots-info-group) {
  min-width: 330px !important;
}
.map-section .leaflet-popup-content tbody th,
.map-section .leaflet-popup-content tbody td {
  padding: 0.2rem 0.5rem;
  vertical-align: middle;
}
.map-section .popup-info-group:has(p) p {
  margin: 0;
}
.map-section .popup-info-group .popup-info-title-name p {
  margin: 8px 0;
  padding: 4px 8px;
  background-color: #2ec4c2;
  color: #03090A;
  font-weight: 600;
  border-radius: 4px;
  text-align: center;
}
.map-section .apexcharts-tooltip span {
  color: #323232;
}
.map-section .air-quality-info-group .air-quality {
  display: flex;
  align-items: center;
}
.map-section .air-quality-info-group .air-quality .air-quality-icon {
  display: inline-block;
  margin: 8px 4px 8px 0;
  width: 16px;
  height: 16px;
  background-color: #ccc;
  border-radius: 50%;
}
.map-section .air-quality-info-group .air-quality .air-quality-icon.good {
  background-color: #009858;
}
.map-section .air-quality-info-group .air-quality .air-quality-icon.normal {
  background-color: #edde4d;
}
.map-section .air-quality-info-group .air-quality .air-quality-icon.bad {
  background-color: #d70f0e;
}
.map-section .air-quality-info-group .air-info {
  display: flex;
}
.map-section .air-quality-info-group .air-info > p {
  margin: 4px 8px 4px 0 !important;
}
.map-section .human-feature-info-group .human-feature-gender-data .human-feature-gender-icon,
.map-section .human-feature-info-group .human-feature-gender-data .vd-category-icon,
.map-section .human-feature-info-group .human-feature-gender-data .human-feature-icon,
.map-section .human-feature-info-group .vd-category-data .human-feature-gender-icon,
.map-section .human-feature-info-group .vd-category-data .vd-category-icon,
.map-section .human-feature-info-group .vd-category-data .human-feature-icon,
.map-section .vd-info-group .human-feature-gender-data .human-feature-gender-icon,
.map-section .vd-info-group .human-feature-gender-data .vd-category-icon,
.map-section .vd-info-group .human-feature-gender-data .human-feature-icon,
.map-section .vd-info-group .vd-category-data .human-feature-gender-icon,
.map-section .vd-info-group .vd-category-data .vd-category-icon,
.map-section .vd-info-group .vd-category-data .human-feature-icon {
  margin-right: 4px;
  width: var(--popup-info-icon);
  height: var(--popup-info-icon);
}
.map-section .human-feature-info-group .human-feature-gender-data p,
.map-section .human-feature-info-group .vd-category-data p,
.map-section .vd-info-group .human-feature-gender-data p,
.map-section .vd-info-group .vd-category-data p {
  display: flex;
  align-items: center;
}
.map-section .human-feature-info-group .human-feature-gender-data .human-feature-table-wrapper,
.map-section .human-feature-info-group .vd-category-data .human-feature-table-wrapper,
.map-section .vd-info-group .human-feature-gender-data .human-feature-table-wrapper,
.map-section .vd-info-group .vd-category-data .human-feature-table-wrapper {
  max-height: 200px;
  overflow-y: scroll;
  scrollbar-width: none;
}
.map-section .human-feature-info-group .human-feature-gender-data .human-feature-table-wrapper::-webkit-scrollbar,
.map-section .human-feature-info-group .vd-category-data .human-feature-table-wrapper::-webkit-scrollbar,
.map-section .vd-info-group .human-feature-gender-data .human-feature-table-wrapper::-webkit-scrollbar,
.map-section .vd-info-group .vd-category-data .human-feature-table-wrapper::-webkit-scrollbar {
  display: none;
}
.map-section .human-feature-info-group .human-feature-gender-data .human-feature-table-wrapper .human-feature-table thead,
.map-section .human-feature-info-group .vd-category-data .human-feature-table-wrapper .human-feature-table thead,
.map-section .vd-info-group .human-feature-gender-data .human-feature-table-wrapper .human-feature-table thead,
.map-section .vd-info-group .vd-category-data .human-feature-table-wrapper .human-feature-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #272a2c !important;
}
.map-section .human-feature-info-group .human-feature-gender-data p,
.map-section .vd-info-group .human-feature-gender-data p {
  margin-bottom: 12px;
}
.map-section .vehicle-feature-info-group .vehicle-feature-lpr-amount {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  border-bottom: #494b4e solid 1px;
}
.map-section .vehicle-feature-info-group .vehicle-feature-lpr-amount span:nth-child(1) {
  margin-right: 4px;
}
.map-section .vehicle-feature-info-group .vehicle-feature-lpr-amount span:nth-child(2) {
  font-size: 1.25rem;
}
.map-section #VDChart {
  display: none;
  position: relative;
  height: 30vh;
  overflow: hidden;
}
.map-section .update-time {
  margin-bottom: 4px;
  color: #C0C3C5;
  font-variant-numeric: tabular-nums;
}
.map-section .IID-event-data .iid-event-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.map-section .IID-event-data .iid-event-icon img {
  margin-right: 4px;
  width: var(--popup-info-icon);
  height: var(--popup-info-icon);
}
.map-section .IID-event-data table th {
  padding: 0.2rem 0.5rem;
}
.map-section .qld-info-group .qld-data .qld-level {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.map-section .qld-info-group .qld-data .qld-level span {
  display: inline-block;
  margin-right: 4px;
  width: 16px;
  height: 16px;
  background-color: lightgray;
  border-radius: 50%;
}
.map-section .qld-info-group .qld-data .qld-level span.Smooth {
  background-color: #c4ffef;
}
.map-section .qld-info-group .qld-data .qld-level span.Heavy {
  background-color: #ffec1c;
}
.map-section .qld-info-group .qld-data .qld-level span.Congested {
  background-color: #e36962;
}
.map-section .tte-info-group .tte-event-data .tte-event-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.map-section .tte-info-group .tte-event-data .tte-event-icon img {
  margin-right: 4px;
  width: var(--popup-info-icon);
  height: var(--popup-info-icon);
}
.map-section .tte-info-group table th {
  padding: 0.2rem 0.5rem;
}
.map-section .parking-lots-info-group .parking-lots-data-group {
  line-height: 2;
}
.map-section .parking-lots-info-group .parking-lots-data-group .parking-note,
.map-section .parking-lots-info-group .parking-lots-data-group .parking-car,
.map-section .parking-lots-info-group .parking-lots-data-group .parking-motor,
.map-section .parking-lots-info-group .parking-lots-data-group .parking-occupancy-rate,
.map-section .parking-lots-info-group .parking-lots-data-group .parking-updatetime {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  text-wrap: wrap;
}
.map-section .vehicle-feature-type-data,
.map-section .IID-event-data,
.map-section .tte-event-data {
  max-height: 486px;
  overflow-y: auto;
}
.map-section .vehicle-feature-type-data table,
.map-section .IID-event-data table,
.map-section .tte-event-data table {
  width: 98%;
}
.map-section .vehicle-feature-type-data table tbody tr td .vehicle-picture-btn,
.map-section .vehicle-feature-type-data table tbody tr td .iid-picture-playback-btn,
.map-section .vehicle-feature-type-data table tbody tr td .tte-picture-playback-btn,
.map-section .IID-event-data table tbody tr td .vehicle-picture-btn,
.map-section .IID-event-data table tbody tr td .iid-picture-playback-btn,
.map-section .IID-event-data table tbody tr td .tte-picture-playback-btn,
.map-section .tte-event-data table tbody tr td .vehicle-picture-btn,
.map-section .tte-event-data table tbody tr td .iid-picture-playback-btn,
.map-section .tte-event-data table tbody tr td .tte-picture-playback-btn {
  background-image: url(/img/pictureSolid.e56add30.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  width: 16px;
  height: 16px;
  border: none;
  /* Hide text while keeping it accessible. JS中html 要有字，modal才能顯示照片 */
  text-indent: -9999px;
}
.map-section table.vehicle-feature-info-table td,
.map-section table.vehicle-feature-info-table th {
  text-align: center;
}
.map-section .vds-body-container {
  display: flex;
  gap: 12px;
  min-width: 36vw;
}
.map-section .vds-body-container .vds-chord-chart {
  width: 45%;
}
.map-section .vds-body-container .vds-chord-chart canvas {
  filter: saturate(2);
  transform: scale(0.8);
}
.map-section .vds-body-container .vds-chord-chart .g2-tooltip {
  background-color: rgb(0, 0, 0) !important;
  color: #f2f2f2 !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
}
.map-section .vds-body-container .vds-category-data {
  width: 55%;
}
.map-section .vds-body-container table.VDS-info-table {
  border-collapse: collapse;
}
.map-section .vds-body-container table.VDS-info-table td,
.map-section .vds-body-container table.VDS-info-table th {
  border: 1px solid rgb(10, 10, 10);
  text-align: center;
}
.map-section .vds-body-container table.VDS-info-table thead > tr:nth-child(1) > th:nth-child(1) {
  background-color: #065ba0;
}
.map-section .vds-body-container table.VDS-info-table thead > tr:nth-child(1) > th:nth-child(2) {
  background-color: #0b7c7b;
}
.map-section .vds-body-container table.VDS-info-table thead > tr:nth-child(1) > th:nth-child(3) {
  background-color: #846d3c;
}
.map-section .vds-body-container table.VDS-info-table thead > tr:nth-child(1) > th:nth-child(4) {
  background-color: #8e3b57;
}
.map-section .vds-body-container table.VDS-info-table thead > tr:nth-child(2) > th {
  background-color: #393f44;
}
.map-section .vds-body-container table.VDS-info-table .vds-info-category-icon,
.map-section .vds-body-container table.VDS-info-table .vds-info-direction-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.map-section .vds-body-container table.VDS-info-table .vds-info-category-icon img,
.map-section .vds-body-container table.VDS-info-table .vds-info-direction-icon img {
  padding: 4px;
  width: 24px;
  height: 24px;
}
.map-section .toast-container {
  color: #262b31;
}
.map-section .toast-container .toast-header,
.map-section .toast-container .toast-body {
  font-size: 1rem;
}

.picture-btn {
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.87);
  cursor: pointer;
}

.water-level-info-group .water-level-note .picture-btn {
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.87);
  cursor: pointer;
}

.pedestrian-modal-info-wrap {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "header header" "basic-info feature-info" "people-pic feature-pic";
  grid-gap: 4px;
}
.pedestrian-modal-info-wrap .pedestrian-section {
  width: 100%;
  min-height: 20px;
  background-color: #21262c;
  border: 1px solid lightblue;
}
.pedestrian-modal-info-wrap .pedestrian-header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info {
  grid-area: basic-info;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info .gender {
  display: flex;
  justify-content: center;
  width: 100%;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info .gender img {
  width: 18px;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info .head-pic {
  width: 100%;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info .head-pic img {
  width: 100%;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info {
  grid-area: feature-info;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .top-wrap,
.pedestrian-modal-info-wrap .pedestrian-feature-info .bottom-wrap {
  display: flex;
  align-items: center;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .top-wrap .top-color,
.pedestrian-modal-info-wrap .pedestrian-feature-info .top-wrap .bottom-color,
.pedestrian-modal-info-wrap .pedestrian-feature-info .bottom-wrap .top-color,
.pedestrian-modal-info-wrap .pedestrian-feature-info .bottom-wrap .bottom-color {
  display: inline-block;
  margin-right: 4px;
  width: 18px;
  height: 18px;
  border: 1px solid #6f6f6f;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .top-wrap .top-color.pattern,
.pedestrian-modal-info-wrap .pedestrian-feature-info .top-wrap .bottom-color.pattern,
.pedestrian-modal-info-wrap .pedestrian-feature-info .bottom-wrap .top-color.pattern,
.pedestrian-modal-info-wrap .pedestrian-feature-info .bottom-wrap .bottom-color.pattern {
  background-image: url(/img/pattern.d26ed97c.svg);
  background-size: cover;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px;
  padding: 2px 8px;
  background: rgb(3, 118, 156);
  border-radius: 5px;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item-image img {
  margin-right: 4px;
  width: 100%;
}
.pedestrian-modal-info-wrap .pedestrian-people-pic {
  grid-area: people-pic;
}
.pedestrian-modal-info-wrap .pedestrian-people-pic img {
  width: 100%;
}
.pedestrian-modal-info-wrap .pedestrian-feature-pic {
  grid-area: feature-pic;
}
.pedestrian-modal-info-wrap .pedestrian-feature-pic img {
  width: 100%;
}

.playback-btn {
  cursor: pointer;
}

.leaflet-popup-content {
  width: -moz-fit-content !important;
  width: fit-content !important;
}
.leaflet-popup-content td .picture-btn {
  background-image: url(/img/pictureSolid.e56add30.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  width: 16px;
  height: 16px;
  border: none;
  /* Hide text while keeping it accessible. JS中html 要有字，modal才能顯示照片 */
  text-indent: -9999px;
}

.pedestrian-modal-info-wrap .pedestrian-section {
  border: none;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info,
.pedestrian-modal-info-wrap .pedestrian-people-pic,
.pedestrian-modal-info-wrap .pedestrian-feature-pic {
  background-color: rgba(0, 0, 0, 0.2);
}
.pedestrian-modal-info-wrap .pedestrian-header {
  padding: 8px 12px;
  vertical-align: middle;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
}
.pedestrian-modal-info-wrap .pedestrian-header .playback span {
  margin-right: 6px;
}
.pedestrian-modal-info-wrap .pedestrian-header .playback .playback-btn {
  padding: 4px;
  background-color: #29b3b0;
}
.pedestrian-modal-info-wrap .pedestrian-header .playback .playback-btn .fa-solid {
  color: #262b31;
}
.pedestrian-modal-info-wrap .pedestrian-basic-info .gender {
  padding: 8px;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info table {
  margin-bottom: 6px;
  border: transparent;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info table tr {
  border-top: none;
  border-bottom: 1px solid #606060;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  padding: 8px 8px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item .pill-item-image {
  width: 40px;
  height: 40px;
}
.pedestrian-modal-info-wrap .pedestrian-feature-info .other-items .pill-item .pill-item-image img {
  width: inherit;
  height: inherit;
  margin-right: 0;
}
.pedestrian-modal-info-wrap .pedestrian-feature-pic {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vehicle-modal-info-wrap {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "header header" "basic-info lpr" "logo car-pic";
  grid-gap: 4px;
}
.vehicle-modal-info-wrap .vehicle-section {
  width: 100%;
  min-height: 20px;
  background-color: #21262c;
  border: 1px solid lightblue;
}
.vehicle-modal-info-wrap .vehicle-header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
}
.vehicle-modal-info-wrap .vehicle-basic-info {
  grid-area: basic-info;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vehicle-modal-info-wrap .vehicle-basic-info .vehicle-color-wrap .vehicle-color {
  display: inline-block;
  margin-right: 4px;
  width: 18px;
  height: 18px;
  border: 1px solid #6f6f6f;
}
.vehicle-modal-info-wrap .vehicle-basic-info .vehicle-icon {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  width: 100%;
}
.vehicle-modal-info-wrap .vehicle-basic-info .vehicle-icon img {
  width: 80%;
}
.vehicle-modal-info-wrap .vehicle-lpr {
  grid-area: lpr;
}
.vehicle-modal-info-wrap .vehicle-lpr .subtitle {
  width: 100%;
}
.vehicle-modal-info-wrap .vehicle-lpr .subtitle p {
  text-align: center;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body {
  display: flex;
  gap: 4px;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-pic {
  width: 65%;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-pic img {
  width: 100%;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 35%;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-info .lpr-color-wrap .lpr-color {
  display: inline-block;
  margin-right: 4px;
  width: 18px;
  height: 18px;
  border: 1px solid #6f6f6f;
}
.vehicle-modal-info-wrap .vehicle-brand {
  grid-area: logo;
}
.vehicle-modal-info-wrap .vehicle-brand p {
  width: 100%;
  text-align: center;
}
.vehicle-modal-info-wrap .vehicle-brand .logo-pic {
  display: flex;
  justify-content: center;
  width: 100%;
}
.vehicle-modal-info-wrap .vehicle-brand .logo-pic img {
  width: 90%;
}
.vehicle-modal-info-wrap .vehicle-pic {
  grid-area: car-pic;
  width: 100%;
}
.vehicle-modal-info-wrap .vehicle-pic img {
  width: 100%;
}

.vehicle-feature-table-wrapper {
  max-height: 180px;
  overflow-y: scroll;
  scrollbar-width: none;
}
.vehicle-feature-table-wrapper::-webkit-scrollbar {
  display: none;
}
.vehicle-feature-table-wrapper .vehicle-feature-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #272a2c !important;
}

.air-pollution-info-group .aqi-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 8px 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 30px solid lightgrey;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical.good {
  border: 5px solid #009858;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical.moderate {
  border: 5px solid #edde4d;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical.poor {
  border: 5px solid #d70f0e;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical h1,
.air-pollution-info-group .aqi-wrap .aqi-numerical p {
  margin: 0;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical p:nth-child(2) {
  font-size: 1.5rem;
}
.air-pollution-info-group .aqi-wrap .air-pollution-data {
  width: 100%;
}
.air-pollution-info-group .aqi-wrap .air-pollution-data table.air-pollution-table {
  width: 100%;
}

.uv-info-group .uvLevelInfo.Low {
  color: #a7cd21;
  font-weight: 700;
}
.uv-info-group .uvLevelInfo.Moderate {
  color: #fbbc23;
  font-weight: 700;
}
.uv-info-group .uvLevelInfo.High {
  color: #e57200;
  font-weight: 700;
}
.uv-info-group .uvLevelInfo.Very.High {
  color: #d32d1b;
  font-weight: 700;
}
.uv-info-group .uvLevelInfo.Extreme {
  color: #ac4a9b;
  font-weight: 700;
}

.chart-wrap {
  width: 100%;
}
.chart-wrap .temperatureChart,
.chart-wrap .humidityChart {
  position: relative;
  width: 100%;
  height: 30vh;
  overflow: hidden;
}

.access-control-table-wrapper {
  max-height: 160px;
  overflow-y: scroll;
  scrollbar-width: none;
}
.access-control-table-wrapper::-webkit-scrollbar {
  display: none;
}
.access-control-table-wrapper .access-control-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #272a2c !important;
}

.door-status-info-group .door-status-info-data .door-status-group,
.door-status-info-group .door-status-info-data .fan-status-group,
.door-status-info-group .fan-status-info-data .door-status-group,
.door-status-info-group .fan-status-info-data .fan-status-group,
.fan-status-info-group .door-status-info-data .door-status-group,
.fan-status-info-group .door-status-info-data .fan-status-group,
.fan-status-info-group .fan-status-info-data .door-status-group,
.fan-status-info-group .fan-status-info-data .fan-status-group {
  display: flex;
  align-items: center;
}
.door-status-info-group .door-status-info-data .door-status-group .door-status,
.door-status-info-group .door-status-info-data .door-status-group .fan-status,
.door-status-info-group .door-status-info-data .fan-status-group .door-status,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status,
.door-status-info-group .fan-status-info-data .door-status-group .door-status,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status,
.fan-status-info-group .door-status-info-data .door-status-group .door-status,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status {
  margin-right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: lightgrey;
}
.door-status-info-group .door-status-info-data .door-status-group .door-status.Door.Closed, .door-status-info-group .door-status-info-data .door-status-group .door-status.Fan.Off,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Closed,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.Off,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Closed,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.Off,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Closed,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.Off,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Closed,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.Off,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Closed,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.Off,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Closed,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.Off,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Closed,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.Off,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Door.Closed,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Fan.Off,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Closed,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.Off,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Closed,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.Off,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Closed,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.Off {
  background-color: #8bb762;
}
.door-status-info-group .door-status-info-data .door-status-group .door-status.Door.Open, .door-status-info-group .door-status-info-data .door-status-group .door-status.Fan.On,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Open,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.On,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Open,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.On,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Open,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.On,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Open,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.On,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Open,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.On,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Open,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.On,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Open,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.On,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Door.Open,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Fan.On,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Open,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.On,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Open,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.On,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Open,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.On,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Open,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.On,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Open,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.On,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Open,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.On,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Open,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.On {
  background-color: #a03737;
}

.oil-level-info-group .oil-level-info-data .oil-level-group {
  display: flex;
  align-items: center;
}
.oil-level-info-group .oil-level-info-data .oil-level-group .oil-level {
  margin-right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: lightgrey;
}
.oil-level-info-group .oil-level-info-data .oil-level-group .oil-level.normal {
  background-color: #009858;
}
.oil-level-info-group .oil-level-info-data .oil-level-group .oil-level.high {
  background-color: #ef3f4d;
}
.oil-level-info-group .oil-level-info-data .oil-level-group .oil-level.low {
  background-color: #edde4d;
}

.map-section-body #map-charts {
  position: relative;
}

#map-charts.collapsed {
  width: 0px;
}
#map-charts.collapsed .map-chart-group {
  visibility: hidden !important;
  opacity: 0;
  transition: visibility 0s linear 0.3s;
}

.map-container.collapsed {
  width: 100%;
}

.leaflet-top .leaflet-control-zoom-in,
.leaflet-top .leaflet-control-zoom-out {
  border: 1px solid #C0C3C5;
}
.leaflet-top .leaflet-control-zoom-in span,
.leaflet-top .leaflet-control-zoom-out span {
  margin-left: -0.5px;
}
.leaflet-top .leaflet-control-fullscreen-button {
  border: 1px solid #C0C3C5 !important;
}
.leaflet-top .leaflet-control-zoom-in,
.leaflet-top .leaflet-control-zoom-out,
.leaflet-top .leaflet-control-fullscreen-button {
  background-color: #333b44;
  color: #f2f2f2;
}
.leaflet-top .leaflet-control-zoom-in:hover,
.leaflet-top .leaflet-control-zoom-out:hover,
.leaflet-top .leaflet-control-fullscreen-button:hover {
  background-color: #262b31;
}
.leaflet-top .leaflet-control-zoom-in.active, .leaflet-top .leaflet-control-zoom-in:active,
.leaflet-top .leaflet-control-zoom-out.active,
.leaflet-top .leaflet-control-zoom-out:active,
.leaflet-top .leaflet-control-fullscreen-button.active,
.leaflet-top .leaflet-control-fullscreen-button:active {
  background-color: #181b1f;
  text-decoration: none;
}
.leaflet-top .leaflet-control-zoom-out {
  border-top: none;
}

.leaflet-control-fullscreen-button {
  background-color: #333b44 !important;
  color: #f2f2f2;
}
.leaflet-control-fullscreen-button:hover {
  background-color: #262b31 !important;
}
.leaflet-control-fullscreen-button.active, .leaflet-control-fullscreen-button:active {
  background-color: #181b1f !important;
  text-decoration: none;
}

.leaflet-control-fullscreen a {
  background-size: 20px 20px;
}

.leaflet-touch .leaflet-control-fullscreen a {
  background-position: 4px 4px !important;
}

.map-container .map-tools {
  gap: 10px !important;
}
.map-container .map-tools .district-button,
.map-container .map-tools .village-button {
  width: 30px;
  height: 30px;
  border: 1px solid #C0C3C5;
  border-radius: 2px;
  padding: 4px;
}

.map-section-body .map-container .zone-tools small {
  color: #C0C3C5;
}

.leaflet-container .leaflet-control-attribution {
  background: #333b44;
  color: #C0C3C5;
}
.leaflet-container .leaflet-control-attribution a {
  color: #29b3b0;
}

.vehicle-modal-info-wrap .vehicle-section {
  border: none;
}
.vehicle-modal-info-wrap .vehicle-section:not(.vehicle-header) {
  background-color: rgba(0, 0, 0, 0.2);
}
.vehicle-modal-info-wrap .vehicle-header {
  padding: 8px 12px;
  vertical-align: middle;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
}
.vehicle-modal-info-wrap .vehicle-header .playback span {
  margin-right: 6px;
}
.vehicle-modal-info-wrap .vehicle-header .playback .playback-btn {
  padding: 4px;
  background-color: #29b3b0;
}
.vehicle-modal-info-wrap .vehicle-header .playback .playback-btn .fa-solid {
  color: #262b31;
}
.vehicle-modal-info-wrap .subtitle {
  padding: 8px;
}
.vehicle-modal-info-wrap .vehicle-type-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 8px;
  height: -webkit-fill-available;
}
.vehicle-modal-info-wrap .vehicle-lpr-body {
  background-color: rgba(0, 0, 0, 0.2);
}
.vehicle-modal-info-wrap .vehicle-lpr-body .lpr-info {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vehicle-modal-info-wrap .vehicle-lpr-body .lpr-info .lpr {
  padding: 12px 8px 8px 8px;
  border: 1px solid #C0C3C5;
  border-radius: 6px;
  position: relative;
}
.vehicle-modal-info-wrap .vehicle-lpr-body .lpr-info .lpr::before, .vehicle-modal-info-wrap .vehicle-lpr-body .lpr-info .lpr::after {
  content: "";
  position: absolute;
  top: 3px;
  height: 6px;
  width: 12px;
  border: 1px solid #C0C3C5;
  border-radius: 3px;
}
.vehicle-modal-info-wrap .vehicle-lpr-body .lpr-info .lpr::before {
  left: 5px;
}
.vehicle-modal-info-wrap .vehicle-lpr-body .lpr-info .lpr::after {
  right: 5px;
}
.vehicle-modal-info-wrap .vehicle-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.leaflet-popup-content table img {
  max-width: unset !important;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: 2px solid transparent;
}

.leaflet-bar a:last-child {
  border-bottom: 1px solid #C0C3C5;
}

.leaflet-popup-content:has(.qld-info-group) {
  min-width: 140px !important;
}

.map-section .update-time {
  font-family: monospace;
}

.modal-body .date-time {
  font-family: monospace;
}
.modal-body .IID-picture-playback-wrap,
.modal-body .TTE-picture-playback-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modal-body .IID-picture-playback-wrap .IID-picture-group,
.modal-body .IID-picture-playback-wrap .IID-playback-group,
.modal-body .IID-picture-playback-wrap .TTE-picture-group,
.modal-body .IID-picture-playback-wrap .TTE-playback-group,
.modal-body .TTE-picture-playback-wrap .IID-picture-group,
.modal-body .TTE-picture-playback-wrap .IID-playback-group,
.modal-body .TTE-picture-playback-wrap .TTE-picture-group,
.modal-body .TTE-picture-playback-wrap .TTE-playback-group {
  width: calc(50% - 4px);
}
@media only screen and (max-width: 768px) {
  .modal-body .IID-picture-playback-wrap .IID-picture-group,
  .modal-body .IID-picture-playback-wrap .IID-playback-group,
  .modal-body .IID-picture-playback-wrap .TTE-picture-group,
  .modal-body .IID-picture-playback-wrap .TTE-playback-group,
  .modal-body .TTE-picture-playback-wrap .IID-picture-group,
  .modal-body .TTE-picture-playback-wrap .IID-playback-group,
  .modal-body .TTE-picture-playback-wrap .TTE-picture-group,
  .modal-body .TTE-picture-playback-wrap .TTE-playback-group {
    width: 100%;
  }
}

.vds-info-category-icon img {
  padding: 4px;
  width: 36px !important;
  height: 36px !important;
}

.map-section .legend {
  background: #262b31;
  padding: 8px 12px;
}
.map-section .legend .legend-title {
  font-size: 14px;
}
.map-section .legend .legend-unit {
  background-color: rgba(0, 0, 0, 0.2);
  margin: 12px 0;
  font-size: 14px;
}
.map-section .legend .legend-item {
  padding: 4px 0;
  gap: 6px;
}
.map-section .legend .legend-item .wind-img,
.map-section .legend .legend-item .uv-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.map-section .legend .legend-body {
  gap: 12px;
}
.map-section .legend .legend-body .legend-ruler {
  gap: 4px;
  transform: unset;
}
.map-section .legend .legend-body .legend-ruler .number {
  font-size: 14px;
  width: unset;
}
.map-section .legend .legend-body .legend-ruler .number.over-300 {
  transform: unset;
}
.map-section .legend .legend-body .legend-ruler .number:first-child {
  margin-bottom: 3px;
}
.map-section .legend .legend-body .legend-item-group .square {
  height: 22px;
}
.map-section .legend .legend-body-wrap .legend-levels {
  margin-left: 12px;
}
.map-section .legend .legend-body-wrap .legend-levels p {
  padding: 4px 0;
}
.map-section .leaflet-popup-content:has(.environment-info-group) {
  min-width: 200px !important;
}
.map-section .leaflet-popup-content .water-level-picture-btn {
  position: relative;
  padding-left: 34px;
}
.map-section .leaflet-popup-content .water-level-picture-btn::before {
  position: absolute;
  top: 11px;
  left: 14px;
  content: "";
  background-image: url(/img/pictureSolid.e56add30.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
}
.map-section .leaflet-popup-content .water-level-picture-btn {
  border: none;
}
.map-section .environment-info-group .environment-note {
  line-height: 2;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 6px;
  text-wrap: wrap;
}
.map-section .environment-info-group .environment-note div {
  display: flex;
  justify-content: space-between;
}
.map-section .water-level-info-group .water-level-note div {
  display: flex;
  justify-content: space-between;
}
.map-section .water-level-info-group .water-level-note .picture-btn {
  width: 100%;
}
.map-section .update-time {
  margin-bottom: 6px;
}
.map-section .air-pollution-info-group .aqi-wrap .aqi-numerical {
  width: 130px;
  height: 130px;
  margin: 24px;
  margin-top: 12px;
}
.map-section .air-pollution-info-group .aqi-wrap .aqi-numerical p {
  padding: 4px 0;
}
.map-section .uv-level,
.map-section .uv-index {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.map-tiles {
  filter: var(--map-tiles-filter);
}

.air-pollution-info-group .aqi-wrap .aqi-numerical.good {
  border: 5px solid #24d13b;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical.moderate {
  border: 5px solid #ffeb0a;
}
.air-pollution-info-group .aqi-wrap .aqi-numerical.poor {
  border: 5px solid #e02626;
}

.map-section .leaflet-popup-content .access-control-info-group tbody td {
  padding: 8px 12px !important;
}

.access-control-table-wrapper .access-control-table td {
  padding: 8px 12px;
}

.door-status-info-group .door-status-info-data .door-status-group .door-status.Door.Closed, .door-status-info-group .door-status-info-data .door-status-group .door-status.Fan.Off,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Closed,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.Off,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Closed,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.Off,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Closed,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.Off,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Closed,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.Off,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Closed,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.Off,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Closed,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.Off,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Closed,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.Off,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Door.Closed,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Fan.Off,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Closed,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.Off,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Closed,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.Off,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Closed,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.Off,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Closed,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.Off {
  background-color: #a03737;
}
.door-status-info-group .door-status-info-data .door-status-group .door-status.Door.Open, .door-status-info-group .door-status-info-data .door-status-group .door-status.Fan.On,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Open,
.door-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.On,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Open,
.door-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.On,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Open,
.door-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.On,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Open,
.door-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.On,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Open,
.door-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.On,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Open,
.door-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.On,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Open,
.door-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.On,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Door.Open,
.fan-status-info-group .door-status-info-data .door-status-group .door-status.Fan.On,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Door.Open,
.fan-status-info-group .door-status-info-data .door-status-group .fan-status.Fan.On,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Door.Open,
.fan-status-info-group .door-status-info-data .fan-status-group .door-status.Fan.On,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Door.Open,
.fan-status-info-group .door-status-info-data .fan-status-group .fan-status.Fan.On,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Door.Open,
.fan-status-info-group .fan-status-info-data .door-status-group .door-status.Fan.On,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Door.Open,
.fan-status-info-group .fan-status-info-data .door-status-group .fan-status.Fan.On,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Door.Open,
.fan-status-info-group .fan-status-info-data .fan-status-group .door-status.Fan.On,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Door.Open,
.fan-status-info-group .fan-status-info-data .fan-status-group .fan-status.Fan.On {
  background-color: #8bb762;
}

.force-icon {
  width: 12px;
  height: 12px;
  clip-path: polygon(50% 0%, 100% 100%, 50% 75%, 0 100%);
  background-color: #363d46;
  transform: rotate(90deg);
}
.force-icon.force0 {
  background-color: #e4e4e4;
  clip-path: none;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  /* Calm, no wind */
}
.force-icon.force1 {
  background-color: #a3c4d7;
  /* Light air */
}
.force-icon.force2 {
  background-color: #3ACCFF;
  /* Light breeze */
}
.force-icon.force3 {
  background-color: #43e7e8;
  /* Gentle breeze */
}
.force-icon.force4 {
  background-color: #42ebbe;
  /* Moderate breeze */
}
.force-icon.force5 {
  background-color: #37CC01;
  /* Fresh breeze */
}
.force-icon.force6 {
  background-color: #c7f774;
  /* Strong breeze */
}
.force-icon.force7 {
  background-color: #e6e5b8;
  /* Near gale */
}
.force-icon.force8 {
  background-color: #FFFF00;
  /* Gale */
}
.force-icon.force9 {
  background-color: #FCCB66;
  /* Strong gale */
}
.force-icon.force10 {
  background-color: #FA9A02;
  /* Storm */
}
.force-icon.force11 {
  background-color: #F86566;
  /* Violent storm */
}
.force-icon.force12 {
  background-color: #F968FC;
  /* Hurricane */
}

.map-section .human-feature-info-group .human-feature-gender-data .human-feature-table-wrapper {
  max-height: 185px;
}

.map-section .vd-info-group .vd-category-data p {
  line-height: 2;
}
.map-section .vd-info-group .vd-category-data p img {
  margin-top: -4px;
}

.parking-updatetime span:nth-child(2) {
  font-family: monospace;
}

.door-status-info-group .door-status-info-data .door-status-group .door-status.Door.Closed {
  background-color: #C0C3C5;
}

.map-section .vehicle-feature-type-data,
.map-section .IID-event-data,
.map-section .tte-event-data {
  max-height: 486px;
  overflow-y: auto;
}
.map-section .vehicle-feature-type-data table,
.map-section .IID-event-data table,
.map-section .tte-event-data table {
  width: 98%;
}
.map-section .vehicle-feature-type-data table tbody tr td .iid-playback-btn,
.map-section .vehicle-feature-type-data table tbody tr td .tte-playback-btn,
.map-section .IID-event-data table tbody tr td .iid-playback-btn,
.map-section .IID-event-data table tbody tr td .tte-playback-btn,
.map-section .tte-event-data table tbody tr td .iid-playback-btn,
.map-section .tte-event-data table tbody tr td .tte-playback-btn {
  background-image: url(/img/playbackSolid.b7e6bc6a.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  width: 16px;
  height: 16px;
  border: none;
  /* Hide text while keeping it accessible. JS中html 要有字，modal才能顯示照片 */
  text-indent: -9999px;
}
.map-section .update-time {
  margin-bottom: 6px;
}
.map-section .update-frequency {
  margin-bottom: 6px;
  color: #C0C3C5;
}
.map-section .temperature-chart-wrap,
.map-section .humidity-chart-wrap {
  margin-top: 24px;
  margin-bottom: 12px;
}

.map-section .vds-body-container .vds-category-data {
  width: unset;
  flex-grow: 1;
}

/*
** 設備報修scss
*/
.popup-info-group .device-details .device-status {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.popup-info-group .device-details .device-status span {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: lightgrey;
}
.popup-info-group .device-details .device-status span:nth-child(1) {
  margin-right: 8px;
}
.popup-info-group .device-details .device-status span.Normal {
  background-color: #009858;
}
.popup-info-group .device-details .device-status span.Abnormal {
  background-color: #ef3f4d;
}
.popup-info-group .device-details .device-status span.Under.repair {
  background-color: #edde4d;
}

.idc-info-group .idc-table-wrap {
  max-height: 195px;
  overflow-y: scroll;
  scrollbar-width: none;
}
.idc-info-group .idc-table-wrap::-webkit-scrollbar {
  display: none;
}
.idc-info-group .idc-table-wrap .idc-table-group .device-name {
  padding: 8px 4px;
  border: rgba(255, 255, 255, 0.38) 1px solid;
}
.idc-info-group .idc-table-wrap .idc-table-group table {
  margin-bottom: 8px;
  width: 100%;
}
.idc-info-group .idc-table-wrap .idc-table-group table thead tr th:nth-of-type(1) {
  width: 70%;
}
.idc-info-group .idc-table-wrap .idc-table-group table thead tr th:nth-of-type(2) {
  width: 30%;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody .device-status-wrap {
  display: flex;
  align-items: center;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody .device-status-wrap .device-status {
  display: inline-block;
  margin-right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: lightgrey;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody .device-status-wrap .device-status.normal {
  background-color: #009858;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody .device-status-wrap .device-status.abnormal {
  background-color: #ef3f4d;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody .device-status-wrap .device-status.under-repair {
  background-color: #edde4d;
}

.popup-info-group .device-details {
  line-height: 2;
}

.idc-info-group .idc-address {
  margin-bottom: 6px;
}
.idc-info-group .idc-table-wrap {
  max-height: 290px;
}
.idc-info-group .idc-table-wrap .idc-table-group .device-name {
  padding: 8px 12px;
}
.idc-info-group .idc-table-wrap .idc-table-group table thead {
  display: none;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody .device-status-wrap {
  flex-wrap: wrap;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody tr td:nth-of-type(1) {
  width: 260px;
  max-width: 260px;
}
.idc-info-group .idc-table-wrap .idc-table-group table tbody tr td:nth-of-type(2) {
  width: 140px;
  max-width: 140px;
}
.idc-info-group .idc-table-wrap .idc-table-group table td {
  padding: 8px 12px;
  text-wrap: wrap;
}

.pedestrian-modal-info-wrap {
  display: grid;
  grid-template-columns: 1fr 6fr;
  grid-template-rows: auto auto;
  grid-template-areas: "header header" "basic-info feature-info" "people-pic feature-pic";
  grid-gap: 4px;
}

.pedestrian-modal-info-wrap .pedestrian-feature-pic {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pedestrian-modal-info-wrap .pedestrian-feature-pic img,
.pedestrian-modal-info-wrap .pedestrian-feature-pic video {
  flex: 1;
  width: 50%;
}

.vehicle-modal-info-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "header header header" "lpr basic-info logo" "car-pic car-pic car-pic";
  grid-gap: 4px;
}

.vehicle-modal-info-wrap .vehicle-type-body {
  justify-content: space-between;
  background-color: transparent;
  margin-bottom: 12px;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  background-color: transparent;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-pic,
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-info {
  width: 100%;
}
.vehicle-modal-info-wrap .vehicle-lpr .vehicle-lpr-body .lpr-info {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: bold;
}
.vehicle-modal-info-wrap .vehicle-brand {
  justify-content: space-between;
}
.vehicle-modal-info-wrap .vehicle-brand .vehicle-brand-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  margin-bottom: 12px;
  gap: 24px;
  padding: 8px;
}
.vehicle-modal-info-wrap .vehicle-pic {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vehicle-modal-info-wrap .vehicle-pic video {
  flex: 1;
  width: 50%;
}
.vehicle-modal-info-wrap .vehicle-pic img {
  width: 50%;
  max-height: 300px;
  -o-object-fit: contain;
     object-fit: contain;
}

.vehicle-modal-info-wrap .vehicle-basic-info .vehicle-icon img {
  width: 160px;
  height: 160px;
}

.vehicle-modal-info-wrap .vehicle-brand .logo-pic img {
  width: 160px;
  height: 160px;
}

.map-section-body .map-container .zone-tools {
  height: -moz-fit-content;
  height: fit-content;
  padding: 4px 8px;
  flex-wrap: wrap;
}

@media only screen and (max-width: 1280px) {
  .map-section-body {
    height: -moz-fit-content;
    height: fit-content;
    flex-direction: column;
  }
  .map-section-body #map-charts,
  .map-section-body .map-container {
    width: 100%;
  }
  .map-section-body .map-charts-collapse-btn {
    display: none;
  }
  .map-section-body #map-charts {
    height: 220px;
    overflow-y: scroll;
  }
  .map-section-body .map-container {
    height: -moz-fit-content;
    height: fit-content;
  }
  .map-section-body .map-container #map {
    height: 500px;
  }
}
@media only screen and (max-width: 768px) {
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content {
    width: 200px !important;
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.vd-info-group), .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.vds-info-group), .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.IID-info-group), .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.tte-info-group), .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.parking-lots-info-group) {
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.vds-info-group) {
    width: 200px !important;
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.vds-info-group) .vds-body-container {
    height: 260px;
    overflow-x: scroll;
  }
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content:has(.vds-info-group) .vds-body-container #chord-container-1 {
    display: none;
  }
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .human-feature-table-wrapper table th:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .human-feature-table-wrapper table td:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .vehicle-feature-table-wrapper table th:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .vehicle-feature-table-wrapper table td:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .IID-event-data table th:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .IID-event-data table td:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .tte-event-data table th:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)),
  .map-section .leaflet-popup-content-wrapper .leaflet-popup-content .tte-event-data table td:not(:first-child):not(:last-child):not(:nth-last-child(-n+2)) {
    /* Your styles for the selected columns */
    display: none;
    /* Example style */
  }
  .map-section .idc-info-group .idc-address {
    text-wrap: balance;
    margin-bottom: 6px;
  }
  .map-section .idc-info-group .device-status-wrap {
    float: right;
  }
  .map-section .idc-info-group .device-status-wrap span:nth-child(2) {
    display: none;
  }
}
@media only screen and (max-width: 1280px) {
  :root {
    --popup-info-icon: 20px;
  }
}
@media only screen and (max-width: 576px) {
  :root {
    --popup-info-icon: 20px;
  }
}

.map-section-body .map-container .zone-tools {
  flex-wrap: nowrap;
  padding: 0 12px;
  background-color: #262b31;
}
.map-section-body .map-container .zone-tools .zone-button-container {
  position: relative;
  overflow-x: auto;
  display: flex;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
}
.map-section-body .map-container .zone-tools .zone-button-container::-webkit-scrollbar {
  display: none;
}
.map-section-body .map-container .zone-tools .zone-button-group {
  display: flex;
}
.map-section-body .map-container .zone-tools .zone-button {
  flex-shrink: 0;
  width: 150px;
  border-radius: 0;
  white-space: normal;
  height: 48px;
  scroll-snap-align: start;
}
.map-section-body .map-container .zone-tools .zone-arrow {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #262b31;
}
.map-section-body .map-container .zone-tools .zone-arrow.left {
  margin-left: auto;
}
.map-section-body .map-container .zone-tools .Hide {
  color: #606060;
  cursor: default;
}

.map-container.collapsed {
  width: calc(100% - 24px);
}

.Search-section {
  position: relative;
}
.Search-section .filter-wrapper {
  padding: 12px 24px 12px 12px;
}
.Search-section .filter-wrapper form {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
.Search-section .filter-wrapper form .form-scroll {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  height: 71.5vh;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 12px;
}
.Search-section .filter-wrapper form .button-group {
  padding-right: 12px;
}
@media only screen and (max-width: 1280px) {
  .Search-section .filter-wrapper {
    padding: 12px;
  }
  .Search-section .filter-wrapper form .form-scroll {
    height: 32vh;
  }
}
@media only screen and (max-width: 576px) {
  .Search-section .filter-wrapper {
    padding: 12px;
  }
  .Search-section .filter-wrapper form .form-scroll {
    height: 37vh;
  }
}

.Result-section .table-wrapper {
  max-width: inherit;
  padding: 12px 12px;
  height: calc(100vh - 46px - 26px - 24px - 24px - 12px - 28px);
  max-height: 100%;
  overflow-y: scroll;
}
.Result-section .table-wrapper table .pill {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
}
.Result-section .table-wrapper table th,
.Result-section .table-wrapper table td {
  text-align: left;
}
.Result-section .table-wrapper table .details-btn i {
  margin-right: 0;
}
.Result-section .table-wrapper table tr:hover,
.Result-section .table-wrapper table tr.child td.child:hover {
  transition: 0.2s background-color linear;
  background-color: rgba(10, 10, 10, 0.4);
}
.Result-section .table-wrapper table td .head-Picture img {
  width: 36px;
  height: 36px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50px;
}
.Result-section .table-wrapper table td:has(.vehicle-type), .Result-section .table-wrapper table td:has(.automobile-mark-picture) {
  min-width: 160px;
}
.Result-section .table-wrapper table td:has(.iid-events-type), .Result-section .table-wrapper table td:has(.tte-events-type) {
  min-width: 160px;
}
.Result-section .table-wrapper table td .vehicle-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
.Result-section .table-wrapper table td .vehicle-type img {
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 8px;
  margin-bottom: 14px;
}
.Result-section .table-wrapper table td .automobile-mark-picture {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
.Result-section .table-wrapper table td .automobile-mark-picture img {
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 8px;
}
.Result-section .table-wrapper table td .automobile-color {
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px;
  font-weight: bold;
}
.Result-section .table-wrapper table td .automobile-color.black {
  background-color: #181818;
}
.Result-section .table-wrapper table td .automobile-color.white {
  background-color: #fdfdfd;
}
.Result-section .table-wrapper table td .automobile-color.white span {
  color: #262b31;
}
.Result-section .table-wrapper table td .automobile-color.blue {
  background-color: #339af0;
}
.Result-section .table-wrapper table td .automobile-color.blue span {
  color: #262b31;
}
.Result-section .table-wrapper table td .automobile-color.brown {
  background-color: #a0522d;
}
.Result-section .table-wrapper table td .automobile-color.gold {
  background-color: #e6b803;
}
.Result-section .table-wrapper table td .automobile-color.gold span {
  color: #262b31;
}
.Result-section .table-wrapper table td .automobile-color.green {
  background-color: #28a745;
}
.Result-section .table-wrapper table td .automobile-color.grey {
  background-color: #a0a0a0;
}
.Result-section .table-wrapper table td .automobile-color.grey span {
  color: #262b31;
}
.Result-section .table-wrapper table td .automobile-color.maroon {
  background-color: #8d0000;
}
.Result-section .table-wrapper table td .automobile-color.orange {
  background-color: #ff8c00;
}
.Result-section .table-wrapper table td .automobile-color.orange span {
  color: #262b31;
}
.Result-section .table-wrapper table td .automobile-color.red {
  background-color: #cc0b0e;
}
.Result-section .table-wrapper table td .automobile-color.silver {
  background-color: #bbbab9;
}
.Result-section .table-wrapper table td .automobile-color.silver span {
  color: #262b31;
}
.Result-section .table-wrapper table td .automobile-color.yellow {
  background-color: #ffeb3b;
}
.Result-section .table-wrapper table td .automobile-color.yellow span {
  color: #262b31;
}
.Result-section .table-wrapper table td .license-plate-color {
  width: -moz-fit-content;
  width: fit-content;
  padding: 12px 12px 8px 12px;
  border-radius: 6px;
  position: relative;
  text-align: center;
  font-weight: bold;
}
.Result-section .table-wrapper table td .license-plate-color::before, .Result-section .table-wrapper table td .license-plate-color::after {
  content: "";
  position: absolute;
  top: 3px;
  height: 6px;
  width: 12px;
  background-color: #262b31;
  border-radius: 3px;
}
.Result-section .table-wrapper table td .license-plate-color::before {
  left: 5px;
}
.Result-section .table-wrapper table td .license-plate-color::after {
  right: 5px;
}
.Result-section .table-wrapper table td .whitePlateBlackWords {
  background-color: #f2f2f2;
  color: #181818;
}
.Result-section .table-wrapper table td .whitePlateRedWords {
  background-color: #f2f2f2;
  color: #cc0b0e;
}
.Result-section .table-wrapper table td .whitePlateGreenWords {
  background-color: #f2f2f2;
  color: #1d8034;
}
.Result-section .table-wrapper table td .yellowPlateBlackWords {
  background-color: #e6b803;
  color: #181818;
}
.Result-section .table-wrapper table td .redPlateWhiteWords {
  background-color: #cc0b0e;
  color: #f2f2f2;
}
.Result-section .table-wrapper table td .greenPlateWhiteWords {
  background-color: #1d8034;
  color: #f2f2f2;
}
.Result-section .table-wrapper table td i {
  margin-right: 6px;
}
.Result-section .table-wrapper table td i.fa-mars {
  color: #48CBFF;
}
.Result-section .table-wrapper table td i.fa-venus {
  color: #E81863;
}
.Result-section .table-wrapper table td i.fa-question {
  color: #C0C3C5;
}
.Result-section .table-wrapper table td .vehicle-counting-group,
.Result-section .table-wrapper table td .congestion-rate-group,
.Result-section .table-wrapper table td .travel-time-group,
.Result-section .table-wrapper table td .force-group,
.Result-section .table-wrapper table td .video-device-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
.Result-section .table-wrapper table td .vehicle-counting,
.Result-section .table-wrapper table td .congestion-rate,
.Result-section .table-wrapper table td .travel-time,
.Result-section .table-wrapper table td .video-device {
  width: 12px;
  height: 12px;
  border-radius: 24px;
}
.Result-section .table-wrapper table td .vehicle-counting.highLevel, .Result-section .table-wrapper table td .vehicle-counting.congested, .Result-section .table-wrapper table td .vehicle-counting.error,
.Result-section .table-wrapper table td .congestion-rate.highLevel,
.Result-section .table-wrapper table td .congestion-rate.congested,
.Result-section .table-wrapper table td .congestion-rate.error,
.Result-section .table-wrapper table td .travel-time.highLevel,
.Result-section .table-wrapper table td .travel-time.congested,
.Result-section .table-wrapper table td .travel-time.error,
.Result-section .table-wrapper table td .video-device.highLevel,
.Result-section .table-wrapper table td .video-device.congested,
.Result-section .table-wrapper table td .video-device.error {
  background-color: #e02626;
}
.Result-section .table-wrapper table td .vehicle-counting.middleLevel, .Result-section .table-wrapper table td .vehicle-counting.moderateTraffic, .Result-section .table-wrapper table td .vehicle-counting.underMaintenance,
.Result-section .table-wrapper table td .congestion-rate.middleLevel,
.Result-section .table-wrapper table td .congestion-rate.moderateTraffic,
.Result-section .table-wrapper table td .congestion-rate.underMaintenance,
.Result-section .table-wrapper table td .travel-time.middleLevel,
.Result-section .table-wrapper table td .travel-time.moderateTraffic,
.Result-section .table-wrapper table td .travel-time.underMaintenance,
.Result-section .table-wrapper table td .video-device.middleLevel,
.Result-section .table-wrapper table td .video-device.moderateTraffic,
.Result-section .table-wrapper table td .video-device.underMaintenance {
  background-color: #ffeb0a;
  color: black;
}
.Result-section .table-wrapper table td .vehicle-counting.lowLevel, .Result-section .table-wrapper table td .vehicle-counting.smooth, .Result-section .table-wrapper table td .vehicle-counting.available,
.Result-section .table-wrapper table td .congestion-rate.lowLevel,
.Result-section .table-wrapper table td .congestion-rate.smooth,
.Result-section .table-wrapper table td .congestion-rate.available,
.Result-section .table-wrapper table td .travel-time.lowLevel,
.Result-section .table-wrapper table td .travel-time.smooth,
.Result-section .table-wrapper table td .travel-time.available,
.Result-section .table-wrapper table td .video-device.lowLevel,
.Result-section .table-wrapper table td .video-device.smooth,
.Result-section .table-wrapper table td .video-device.available {
  background-color: #24d13b;
}
.Result-section .table-wrapper table td .force-group {
  gap: 12px;
}
.Result-section .table-wrapper table td .force-group .force-icon {
  width: 18px;
  height: 18px;
  clip-path: polygon(50% 0%, 100% 100%, 50% 75%, 0 100%);
  background-color: #363d46;
}
.Result-section .table-wrapper table td .force-group .force-icon.force0 {
  background-color: #e4e4e4;
  clip-path: none;
  border-radius: 20px;
  /* Calm, no wind */
}
.Result-section .table-wrapper table td .force-group .force-icon.force1 {
  background-color: #a3c4d7;
  /* Light air */
}
.Result-section .table-wrapper table td .force-group .force-icon.force2 {
  background-color: #3ACCFF;
  /* Light breeze */
}
.Result-section .table-wrapper table td .force-group .force-icon.force3 {
  background-color: #43e7e8;
  /* Gentle breeze */
}
.Result-section .table-wrapper table td .force-group .force-icon.force4 {
  background-color: #42ebbe;
  /* Moderate breeze */
}
.Result-section .table-wrapper table td .force-group .force-icon.force5 {
  background-color: #37CC01;
  /* Fresh breeze */
}
.Result-section .table-wrapper table td .force-group .force-icon.force6 {
  background-color: #c7f774;
  /* Strong breeze */
}
.Result-section .table-wrapper table td .force-group .force-icon.force7 {
  background-color: #e6e5b8;
  /* Near gale */
}
.Result-section .table-wrapper table td .force-group .force-icon.force8 {
  background-color: #FFFF00;
  /* Gale */
}
.Result-section .table-wrapper table td .force-group .force-icon.force9 {
  background-color: #FCCB66;
  /* Strong gale */
}
.Result-section .table-wrapper table td .force-group .force-icon.force10 {
  background-color: #FA9A02;
  /* Storm */
}
.Result-section .table-wrapper table td .force-group .force-icon.force11 {
  background-color: #F86566;
  /* Violent storm */
}
.Result-section .table-wrapper table td .force-group .force-icon.force12 {
  background-color: #F968FC;
  /* Hurricane */
}
.Result-section .table-wrapper table td .force-group .force-icon.N {
  transform: rotate(0deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.NNE {
  transform: rotate(22.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.N {
  transform: rotate(0deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.NNE {
  transform: rotate(22.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.NE {
  transform: rotate(45deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.ENE {
  transform: rotate(67.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.E {
  transform: rotate(90deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.ESE {
  transform: rotate(112.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.SE {
  transform: rotate(135deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.SSE {
  transform: rotate(157.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.S {
  transform: rotate(180deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.SSW {
  transform: rotate(202.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.SW {
  transform: rotate(225deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.WSW {
  transform: rotate(247.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.W {
  transform: rotate(270deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.WNW {
  transform: rotate(292.5deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.NW {
  transform: rotate(315deg);
}
.Result-section .table-wrapper table td .force-group .force-icon.NNW {
  transform: rotate(337.5deg);
}
.Result-section .table-wrapper table td:has(.road-intersection) span, .Result-section .table-wrapper table td:has(.destination) span {
  display: inline-block;
}
.Result-section .table-wrapper table td:has(.road-intersection) .road-intersection,
.Result-section .table-wrapper table td:has(.road-intersection) .destination, .Result-section .table-wrapper table td:has(.destination) .road-intersection,
.Result-section .table-wrapper table td:has(.destination) .destination {
  border-radius: 6px;
  padding: 4px 8px;
  background-color: rgba(10, 10, 10, 0.2);
}
.Result-section .table-wrapper table td .vehicle-counting-period-from,
.Result-section .table-wrapper table td .vehicle-counting-period-to,
.Result-section .table-wrapper table td .iid-period-from,
.Result-section .table-wrapper table td .iid-period-to {
  display: inline;
  font-family: monospace;
}
.Result-section .table-wrapper table td.date, .Result-section .table-wrapper table td.time {
  font-family: monospace;
}
.Result-section .table-wrapper table td .search-picture-btn,
.Result-section .table-wrapper table td .search-playback-btn {
  font-size: 24px;
  background-color: transparent;
}
.Result-section .table-wrapper table td .search-picture-btn i,
.Result-section .table-wrapper table td .search-playback-btn i {
  color: #2ec4c2;
  margin-right: 0;
}
.Result-section .table-wrapper table td .search-picture-btn {
  font-size: 24px;
  padding: 0;
}
.Result-section .table-wrapper table td .search-picture-btn img {
  width: 60px;
  height: auto;
}
.Result-section .table-wrapper table td .iid-events-type,
.Result-section .table-wrapper table td .tte-events-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
.Result-section .table-wrapper table td .iid-events-type img,
.Result-section .table-wrapper table td .tte-events-type img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 8px;
}
.Result-section .table-wrapper table td .enc-state-group {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.Result-section .table-wrapper table td .enc-state-group .enc-state {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 20px;
}
.Result-section .table-wrapper table td .enc-state-group .pill {
  margin-left: 6px;
}
.Result-section .table-wrapper table td .enc-state-group .waterLevelOneAlert,
.Result-section .table-wrapper table td .enc-state-group .oilLevelHigh,
.Result-section .table-wrapper table td .enc-state-group .abnormal,
.Result-section .table-wrapper table td .enc-state-group .aqi-poor {
  background-color: #e02626;
}
.Result-section .table-wrapper table td .enc-state-group .aqi-poor {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border-radius: 0;
  width: 0.75vw;
  height: 0.75vw;
}
.Result-section .table-wrapper table td .enc-state-group .waterLevelTwoAlert,
.Result-section .table-wrapper table td .enc-state-group .oilLevelLow,
.Result-section .table-wrapper table td .enc-state-group .aqi-moderate {
  background-color: #ffeb0a;
}
.Result-section .table-wrapper table td .enc-state-group .aqi-moderate {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border-radius: 0;
  width: 0.7vw;
  height: 0.7vw;
}
.Result-section .table-wrapper table td .enc-state-group .waterLevelNormal,
.Result-section .table-wrapper table td .enc-state-group .oilLevelNormal,
.Result-section .table-wrapper table td .enc-state-group .normal,
.Result-section .table-wrapper table td .enc-state-group .aqi-good {
  background-color: #24d13b;
}
.Result-section .table-wrapper table td .enc-state-group .lowElectricity {
  background-color: #ffe6a3;
}
.Result-section .table-wrapper table td .enc-state-group .moderateElectricity {
  background-color: #ce9f1f;
}
.Result-section .table-wrapper table td .enc-state-group .highElectricity {
  background-color: #995c00;
}
.Result-section .table-wrapper table td .enc-state-group .tooLow {
  background-color: #4fe3f3;
}
.Result-section .table-wrapper table td .enc-state-group .tooHigh {
  background-color: #e02626;
}
.Result-section .table-wrapper table td .enc-state-group .dry {
  background-color: #c2ebff;
}
.Result-section .table-wrapper table td .enc-state-group .moist {
  background-color: #05b2dd;
}
.Result-section .table-wrapper table td .enc-state-group .rain {
  background-color: #c2ebff;
}
.Result-section .table-wrapper table td .enc-state-group .heavyRain {
  background-color: #FFFF00;
}
.Result-section .table-wrapper table td .enc-state-group .extremelyHeavyRain {
  background-color: #FA9A02;
}
.Result-section .table-wrapper table td .enc-state-group .torrentialRain {
  background-color: #F86566;
}
.Result-section .table-wrapper table td .enc-state-group .extremelyTorrentialRain {
  background-color: #F968FC;
}
.Result-section .table-wrapper table td .enc-state-group .uv-low {
  color: #cde381;
}
.Result-section .table-wrapper table td .enc-state-group .uv-moderate {
  color: #fbbc23;
}
.Result-section .table-wrapper table td .enc-state-group .uv-high {
  color: #e57200;
}
.Result-section .table-wrapper table td .enc-state-group .uv-very-high {
  color: #d32d1b;
}
.Result-section .table-wrapper table td .enc-state-group .uv-extreme {
  color: #ac4a9b;
}
.Result-section .table-wrapper table td .enc-state-group .Undetectable {
  background-color: #FFFFFF;
}
.Result-section .table-wrapper table td .enc-state-group .Slight {
  background-color: #E0FFDF;
}
.Result-section .table-wrapper table td .enc-state-group .Weak {
  background-color: #33FE34;
}
.Result-section .table-wrapper table td .enc-state-group .light {
  background-color: #FFFE2E;
}
.Result-section .table-wrapper table td .enc-state-group .moderate {
  background-color: #FE832D;
}
.Result-section .table-wrapper table td .enc-state-group .strong {
  background-color: #C43B3C;
}
.Result-section .table-wrapper table td .enc-state-group .Violent {
  background-color: #994644;
}
.Result-section .table-wrapper table td .enc-state-group .Extreme {
  background-color: #B61EEB;
}
.Result-section .table-wrapper table td .accessControlStatus,
.Result-section .table-wrapper table td .enc-i-text {
  padding: 4px 8px;
}
.Result-section .table-wrapper table td .accessControlStatus span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text span:nth-child(1) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 30px;
  margin-right: 6px;
}
.Result-section .table-wrapper table td .accessControlStatus span:nth-child(1) i,
.Result-section .table-wrapper table td .enc-i-text span:nth-child(1) i {
  margin-right: 0;
}
.Result-section .table-wrapper table td .accessControlStatus.accessControlValid span:nth-child(1), .Result-section .table-wrapper table td .accessControlStatus.open span:nth-child(1), .Result-section .table-wrapper table td .accessControlStatus.on span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text.accessControlValid span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text.open span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text.on span:nth-child(1) {
  background-color: #225c2a;
}
.Result-section .table-wrapper table td .accessControlStatus.accessControlInvalid span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text.accessControlInvalid span:nth-child(1) {
  background-color: #97050c;
}
.Result-section .table-wrapper table td .accessControlStatus.closed span:nth-child(1), .Result-section .table-wrapper table td .accessControlStatus.off span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text.closed span:nth-child(1),
.Result-section .table-wrapper table td .enc-i-text.off span:nth-child(1) {
  background-color: #606060;
}
.Result-section .table-wrapper table td .parking-space-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.Result-section .table-wrapper table td .parking-space-type img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 4px;
  border-radius: 3px;
  background-color: #1750a3;
}
.Result-section .table-wrapper table td.available {
  color: #24d13b;
}
.Result-section .table-wrapper table .noPlayback {
  pointer-events: none;
}
.Result-section .table-wrapper table .noPlayback i {
  color: #262b31 !important;
}
@media only screen and (max-width: 1280px) {
  .Result-section .table-wrapper table td .head-Picture img {
    width: 30px;
    height: 30px;
  }
}

.Result-section:has(.statistics-VDSchordDiagram) .table-wrapper {
  height: calc(100vh - 46px - 26px - 24px - 24px - 12px - 28px - 306px);
}

.statistics-VDSchordDiagram,
#statistics-VDSchordDiagram {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  min-height: 160px;
  position: relative;
  margin: 12px 0;
  border-bottom: 1px solid #606060;
}
.statistics-VDSchordDiagram .chordTitle,
#statistics-VDSchordDiagram .chordTitle {
  padding: 4px 12px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  display: inline-flex;
  justify-content: space-between;
  align-items: flex-start;
}
.statistics-VDSchordDiagram .chordTitle .chordTitleTips,
#statistics-VDSchordDiagram .chordTitle .chordTitleTips {
  font-size: 14px;
  font-weight: 300;
  display: inline;
  color: #f88080;
}
.statistics-VDSchordDiagram .chordTitle i,
#statistics-VDSchordDiagram .chordTitle i {
  margin-right: 6px;
}
.statistics-VDSchordDiagram .chordTitle button i,
#statistics-VDSchordDiagram .chordTitle button i {
  margin-right: 0;
}
.statistics-VDSchordDiagram #chordContainer,
#statistics-VDSchordDiagram #chordContainer {
  width: 250px;
  height: 250px;
  filter: saturate(2);
  visibility: hidden;
  display: none;
}
.statistics-VDSchordDiagram #chord-legend .legend-item,
#statistics-VDSchordDiagram #chord-legend .legend-item {
  position: absolute;
  text-wrap: wrap;
  font-size: 0.75rem;
}
.statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(1),
#statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(1) {
  top: 20%;
  left: 50%;
  width: 260px;
  transform: translate(-50%, 0);
  text-align: center;
}
.statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(2),
#statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(2) {
  bottom: 4%;
  left: 50%;
  width: 260px;
  transform: translate(-50%, 0);
  text-align: center;
}
.statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(3),
#statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(3) {
  top: 48%;
  left: 2.5%;
  width: 90px;
}
.statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(4),
#statistics-VDSchordDiagram #chord-legend .legend-item:nth-child(4) {
  top: 48%;
  right: 2%;
  width: 90px;
  text-align: right;
}
.statistics-VDSchordDiagram .g2-tooltip,
#statistics-VDSchordDiagram .g2-tooltip {
  background-color: rgb(0, 0, 0) !important;
  color: #f2f2f2 !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
  font-size: 14px !important;
}

.search-filter-collapse-btn {
  position: absolute;
  top: 0;
  right: 0;
}
@media only screen and (max-width: 1280px) {
  .search-filter-collapse-btn {
    display: none;
  }
}

/* ================ dataTable components */
div.dt-container div.dt-layout-row {
  margin-top: 0;
  margin-bottom: 12px;
}

html.dark div.dt-buttons > .dt-button:focus:not(.disabled):hover, html.dark div.dt-buttons > .dt-button:focus:not(.disabled):focus, html.dark div.dt-buttons > .dt-button:focus:not(.disabled):active {
  outline: 0px solid #2690a0 !important;
}

html.dark div.dt-buttons > .dt-button {
  border: none;
  position: relative;
  line-height: 1;
  padding: 8px 12px;
}
html.dark div.dt-buttons > .dt-button:hover {
  background-color: #35657a !important;
  border: none;
}

.dt-search {
  display: none;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
  padding-top: 2px;
}

/* 1. ================ Filter section collapse and expand */
.section-title-text,
.filter-wrapper {
  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
  opacity: 1;
}

.Search-section.collapsed {
  margin-left: -12px;
  margin-right: -12px;
}
.Search-section.collapsed .section-title {
  box-shadow: none;
}
.Search-section.collapsed .section-title-text {
  visibility: hidden !important;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
}
.Search-section.collapsed .filter-wrapper {
  visibility: hidden !important;
  max-height: 70vh !important;
  overflow: hidden !important;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
}

/* 2. Collapsed state for sections-group */
.sections-group.search-filter-group-collapsed {
  grid-template-columns: 20% 0px 79.9% !important;
}

/* 3. Collapsed state for sections-group */
.sections-group.search-location-and-filter-group-collapsed {
  grid-template-columns: 12px 12px calc(100% - 24px) !important;
}

/* ================ Modal */
.modal .details-date-time-location,
.modal .details-total,
.modal .details-event-title {
  width: 100%;
  background-color: rgba(10, 10, 10, 0.2);
  border-bottom: 1px solid #606060;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  gap: 24px;
  font-variant-numeric: tabular-nums;
  color: #2ec4c2;
  text-wrap: wrap;
}
.modal .details-date-time-location i,
.modal .details-total i,
.modal .details-event-title i {
  margin-right: 6px;
}
.modal .details-date-time-location .vehicle-counting,
.modal .details-total .vehicle-counting,
.modal .details-event-title .vehicle-counting {
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
  color: #f2f2f2;
}
.modal .details-date-time-location .vehicle-counting.highLevel,
.modal .details-total .vehicle-counting.highLevel,
.modal .details-event-title .vehicle-counting.highLevel {
  background-color: #97050c;
}
.modal .details-date-time-location .vehicle-counting.middleLevel,
.modal .details-total .vehicle-counting.middleLevel,
.modal .details-event-title .vehicle-counting.middleLevel {
  background-color: #ce9f1f;
  color: black;
}
.modal .details-date-time-location .vehicle-counting.lowLevel,
.modal .details-total .vehicle-counting.lowLevel,
.modal .details-event-title .vehicle-counting.lowLevel {
  background-color: #225c2a;
}
.modal .details-date-time-location .details-date-time,
.modal .details-total .details-date-time,
.modal .details-event-title .details-date-time {
  font-family: monospace;
}
.modal .details-date-time-location .iid-events-type,
.modal .details-date-time-location .tte-events-type,
.modal .details-total .iid-events-type,
.modal .details-total .tte-events-type,
.modal .details-event-title .iid-events-type,
.modal .details-event-title .tte-events-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.modal .details-date-time-location .iid-events-type img,
.modal .details-date-time-location .tte-events-type img,
.modal .details-total .iid-events-type img,
.modal .details-total .tte-events-type img,
.modal .details-event-title .iid-events-type img,
.modal .details-event-title .tte-events-type img {
  width: 45px;
  height: 45px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 8px;
}
.modal .modal-header .secondary-btn, .modal .modal-header html.dark div.dt-buttons > .dt-button, html.dark .modal .modal-header div.dt-buttons > .dt-button {
  margin-left: 12px;
}
.modal .details-event-title {
  font-weight: bold;
  color: #f2f2f2;
  border-bottom: 1px solid #606060;
  margin-bottom: 0;
}
.modal .details-event-title .enc-state-group {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.modal .details-event-title .enc-state-group .enc-state {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 20px;
}
.modal .details-event-title .enc-state-group .waterLevelOneAlert,
.modal .details-event-title .enc-state-group .oilLevelHigh,
.modal .details-event-title .enc-state-group .abnormal {
  background-color: #e02626;
}
.modal .details-event-title .enc-state-group .waterLevelTwoAlert,
.modal .details-event-title .enc-state-group .oilLevelLow {
  background-color: #ffeb0a;
}
.modal .details-event-title .enc-state-group .waterLevelNormal,
.modal .details-event-title .enc-state-group .oilLevelNormal,
.modal .details-event-title .enc-state-group .normal {
  background-color: #24d13b;
}
.modal .details-event-title .enc-state-group .lowElectricity {
  background-color: #ffe6a3;
}
.modal .details-event-title .enc-state-group .moderateElectricity {
  background-color: #ce9f1f;
}
.modal .details-event-title .enc-state-group .highElectricity {
  background-color: #995c00;
}
.modal .details-event-title .enc-state-group .tooLow {
  background-color: #4fe3f3;
}
.modal .details-event-title .enc-state-group .tooHigh {
  background-color: #e02626;
}
.modal .details-event-title .enc-state-group .dry {
  background-color: #c2ebff;
}
.modal .details-event-title .enc-state-group .moist {
  background-color: #05b2dd;
}
.modal .details-event-title .enc-state-group .rain {
  background-color: #c2ebff;
}
.modal .details-event-title .enc-state-group .heavyRain {
  background-color: #FFFF00;
}
.modal .details-event-title .enc-state-group .extremelyHeavyRain {
  background-color: #FA9A02;
}
.modal .details-event-title .enc-state-group .torrentialRain {
  background-color: #F86566;
}
.modal .details-event-title .enc-state-group .extremelyTorrentialRain {
  background-color: #F968FC;
}
.modal .details-event-title .video-device-group {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.modal .details-event-title .video-device-group .video-device {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 20px;
}
.modal .details-event-title .vehicle-counting.highLevel, .modal .details-event-title .vehicle-counting.congested, .modal .details-event-title .vehicle-counting.error,
.modal .details-event-title .congestion-rate.highLevel,
.modal .details-event-title .congestion-rate.congested,
.modal .details-event-title .congestion-rate.error,
.modal .details-event-title .travel-time.highLevel,
.modal .details-event-title .travel-time.congested,
.modal .details-event-title .travel-time.error,
.modal .details-event-title .video-device.highLevel,
.modal .details-event-title .video-device.congested,
.modal .details-event-title .video-device.error {
  background-color: #e02626;
}
.modal .details-event-title .vehicle-counting.middleLevel, .modal .details-event-title .vehicle-counting.moderateTraffic, .modal .details-event-title .vehicle-counting.underMaintenance,
.modal .details-event-title .congestion-rate.middleLevel,
.modal .details-event-title .congestion-rate.moderateTraffic,
.modal .details-event-title .congestion-rate.underMaintenance,
.modal .details-event-title .travel-time.middleLevel,
.modal .details-event-title .travel-time.moderateTraffic,
.modal .details-event-title .travel-time.underMaintenance,
.modal .details-event-title .video-device.middleLevel,
.modal .details-event-title .video-device.moderateTraffic,
.modal .details-event-title .video-device.underMaintenance {
  background-color: #ffeb0a;
  color: black;
}
.modal .details-event-title .vehicle-counting.lowLevel, .modal .details-event-title .vehicle-counting.smooth, .modal .details-event-title .vehicle-counting.available,
.modal .details-event-title .congestion-rate.lowLevel,
.modal .details-event-title .congestion-rate.smooth,
.modal .details-event-title .congestion-rate.available,
.modal .details-event-title .travel-time.lowLevel,
.modal .details-event-title .travel-time.smooth,
.modal .details-event-title .travel-time.available,
.modal .details-event-title .video-device.lowLevel,
.modal .details-event-title .video-device.smooth,
.modal .details-event-title .video-device.available {
  background-color: #24d13b;
}
.modal .details-event-title .pill {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
}
.modal .details-event-title .enc-state-type-title {
  margin-right: 12px;
}
.modal .modal-body.enc-all-modal-body {
  margin-bottom: 12px;
}
.modal .modal-body.enc-all-modal-body .pill {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
}
.modal .modal-body.enc-all-modal-body .enc-details-type {
  width: 100%;
  color: #2ec4c2;
  border-bottom: 1px solid #2ec4c2;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 16px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-bottom: 12px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  background-color: #3A464F;
  border-radius: 6px;
  text-align: center;
  padding-bottom: 24px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card:has(.search-playback-btn), .modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card:has(.search-picture-btn) {
  padding-bottom: 0;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .details-name {
  width: 100%;
  padding: 8px;
  background-color: #2ec4c2;
  color: #262b31;
  font-size: 16px;
  font-weight: bold;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card img {
  width: 60px;
  height: 60px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .search-picture-btn img {
  width: 120px;
  height: auto;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card i {
  font-size: 36px;
  margin: 12px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card img[src$="enc_Fan on.svg"] {
  animation: rotation 2s infinite linear;
  color: #24d180;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .lowElectricity {
  color: #ffe6a3;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .moderateElectricity {
  color: #ce9f1f;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .highElectricity {
  color: #cc4008;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .normal {
  color: #24d13b;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .tooLow {
  color: #4fe3f3;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .tooHigh {
  color: #ff9e9e;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .dry {
  color: #c2ebff;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .moist {
  color: #05b2dd;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon {
  width: 18px;
  height: 18px;
  clip-path: polygon(50% 0%, 100% 100%, 50% 75%, 0 100%);
  background-color: #363d46;
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force0 {
  background-color: #e4e4e4;
  clip-path: none;
  border-radius: 20px;
  /* Calm, no wind */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force1 {
  background-color: #a3c4d7;
  /* Light air */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force2 {
  background-color: #3ACCFF;
  /* Light breeze */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force3 {
  background-color: #43e7e8;
  /* Gentle breeze */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force4 {
  background-color: #42ebbe;
  /* Moderate breeze */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force5 {
  background-color: #37CC01;
  /* Fresh breeze */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force6 {
  background-color: #c7f774;
  /* Strong breeze */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force7 {
  background-color: #e6e5b8;
  /* Near gale */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force8 {
  background-color: #FFFF00;
  /* Gale */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force9 {
  background-color: #FCCB66;
  /* Strong gale */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force10 {
  background-color: #FA9A02;
  /* Storm */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force11 {
  background-color: #F86566;
  /* Violent storm */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.force12 {
  background-color: #F968FC;
  /* Hurricane */
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.N {
  transform: rotate(0deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.NNE {
  transform: rotate(22.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.N {
  transform: rotate(0deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.NNE {
  transform: rotate(22.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.NE {
  transform: rotate(45deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.ENE {
  transform: rotate(67.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.E {
  transform: rotate(90deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.ESE {
  transform: rotate(112.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.SE {
  transform: rotate(135deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.SSE {
  transform: rotate(157.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.S {
  transform: rotate(180deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.SSW {
  transform: rotate(202.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.SW {
  transform: rotate(225deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.WSW {
  transform: rotate(247.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.W {
  transform: rotate(270deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.WNW {
  transform: rotate(292.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.NW {
  transform: rotate(315deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .force-group .force-icon.NNW {
  transform: rotate(337.5deg);
}
.modal .modal-body.enc-all-modal-body .enc-details-card-group .enc-details-card .enc-state {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 20px;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@media only screen and (max-width: 1280px) {
  .modal .modal-body.enc-all-modal-body .enc-details-card-group {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (max-width: 576px) {
  .modal .modal-body.enc-all-modal-body .enc-details-card-group {
    grid-template-columns: repeat(2, 1fr);
  }
}
.modal .modal-body.enc-all-modal-body .search-picture-btn,
.modal .modal-body.enc-all-modal-body .search-playback-btn {
  background-color: rgba(10, 10, 10, 0.2);
  width: 100%;
}
.modal .modal-body.enc-all-modal-body .search-picture-btn i,
.modal .modal-body.enc-all-modal-body .search-playback-btn i {
  color: #2ec4c2;
  font-size: 30px !important;
}
.modal .modal-body.enc-all-modal-body .noPlayback {
  pointer-events: none;
}
.modal .modal-body.enc-all-modal-body .noPlayback i {
  color: #262b31 !important;
}
.modal .modal-body .picture-video-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.modal .modal-body .picture-video-group img,
.modal .modal-body .picture-video-group video {
  width: 50%;
}
@media only screen and (max-width: 768px) {
  .modal .modal-body .picture-video-group {
    flex-direction: column;
  }
  .modal .modal-body .picture-video-group img,
  .modal .modal-body .picture-video-group video {
    width: 100%;
  }
}

#pedestrianAlldetailsModal .human-details-group {
  display: grid;
  grid-template-areas: "human-details-map-thumbnail human-details-body-picture human-details-visualization" "human-details-head-picture human-details-body-picture human-details-visualization" "human-details-scene-picture human-details-body-picture human-details-visualization" "human-details-video human-details-body-picture human-details-visualization";
  grid-template-columns: 1fr 1fr 3.2fr;
  grid-template-rows: 24% 24% 24% 24%;
  align-items: stretch;
  gap: 12px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-body-picture {
  grid-area: human-details-body-picture;
  aspect-ratio: 9/16;
  max-width: 100%;
  background-color: rgba(10, 10, 10, 0.2);
}
#pedestrianAlldetailsModal .human-details-group .human-details-body-picture img,
#pedestrianAlldetailsModal .human-details-group .human-details-body-picture video {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}
#pedestrianAlldetailsModal .human-details-group .human-details-map-thumbnail,
#pedestrianAlldetailsModal .human-details-group .human-details-head-picture,
#pedestrianAlldetailsModal .human-details-group .human-details-scene-picture,
#pedestrianAlldetailsModal .human-details-group .human-details-video {
  aspect-ratio: 16/9;
  max-width: 100%;
  max-height: 100%;
  background-color: rgba(10, 10, 10, 0.2);
}
#pedestrianAlldetailsModal .human-details-group .human-details-head-picture {
  grid-area: human-details-head-picture;
}
#pedestrianAlldetailsModal .human-details-group .human-details-head-picture img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}
#pedestrianAlldetailsModal .human-details-group .human-details-scene-picture {
  grid-area: human-details-scene-picture;
}
#pedestrianAlldetailsModal .human-details-group .human-details-scene-picture img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
#pedestrianAlldetailsModal .human-details-group .human-details-video {
  grid-area: human-details-video;
}
#pedestrianAlldetailsModal .human-details-group .human-details-video video {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization {
  grid-area: human-details-visualization;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title {
  color: #3DFDFE;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px 12px 0 12px;
  background-color: rgba(10, 10, 10, 0.2);
  border-radius: 6px 0px 0px 0px;
  position: relative;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title::before {
  content: "";
  position: absolute;
  top: 0;
  right: -28px;
  width: 28px;
  height: 28px;
  border-style: solid;
  border-width: 0 28px 28px 0;
  border-color: transparent transparent rgba(10, 10, 10, 0.2) transparent;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 8px 12px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title .human-details-gender span {
  color: #f2f2f2;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title .human-details-gender i {
  margin-right: 6px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title .human-details-gender i.fa-mars {
  color: #48CBFF;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title .human-details-gender i.fa-venus {
  color: #E81863;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title .human-details-gender i.fa-question {
  color: #C0C3C5;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-title.gender-title::before {
  content: "";
  position: absolute;
  top: 0;
  right: -28px;
  width: 28px;
  height: 36px;
  border-style: solid;
  border-width: 0 28px 36px 0;
  border-color: transparent transparent rgba(10, 10, 10, 0.2) transparent;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category {
  width: 100%;
  margin-bottom: 6px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  background-color: rgba(10, 10, 10, 0.2);
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 0px 6px 6px 6px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-self: stretch;
  background-color: rgba(10, 10, 10, 0.2);
  padding: 8px;
  border-radius: 6px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item img {
  width: 2.4vw;
  height: 2.4vw;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item:not(.wearing) img {
  filter: saturate(0) brightness(0.6);
  opacity: 0.1;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item:not(.wearing) .details-top-color {
  filter: saturate(0);
  opacity: 0.1;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item:not(.wearing) .details-top-color span {
  display: none;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item.wearing:hover {
  background-color: rgba(10, 10, 10, 0.5);
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color {
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 1px solid #363d46;
  border-radius: 6px;
  padding: 8px 12px;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color span {
  z-index: 1;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.black {
  background-color: #181818;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.white {
  background-color: #fdfdfd;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.white span {
  color: #262b31;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.blue {
  background-color: #339af0;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.blue span {
  color: #262b31;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.brown {
  background-color: #a0522d;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.gold {
  background-color: #e6b803;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.gold span {
  color: #262b31;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.green {
  background-color: #28a745;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.grey {
  background-color: #a0a0a0;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.grey span {
  color: #262b31;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.maroon {
  background-color: #8d0000;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.orange {
  background-color: #ff8c00;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.orange span {
  color: #262b31;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.red {
  background-color: #cc0b0e;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.yellow {
  background-color: #ffeb3b;
}
#pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item .human-details-category-icon .details-top-color.yellow span {
  color: #262b31;
}
@media only screen and (max-width: 1280px) {
  #pedestrianAlldetailsModal .human-details-group {
    width: 100%;
    grid-template-areas: "human-details-map-thumbnail human-details-head-picture human-details-body-picture" "human-details-scene-picture human-details-video human-details-body-picture" "human-details-visualization human-details-visualization human-details-visualization";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 20% 20% 1fr;
    align-items: flex-start;
  }
  #pedestrianAlldetailsModal .human-details-group .human-details-map-thumbnail,
  #pedestrianAlldetailsModal .human-details-group .human-details-head-picture,
  #pedestrianAlldetailsModal .human-details-group .human-details-scene-picture,
  #pedestrianAlldetailsModal .human-details-group .human-details-video {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: unset;
  }
  #pedestrianAlldetailsModal .human-details-group .human-details-scene-picture img,
  #pedestrianAlldetailsModal .human-details-group .human-details-scene-picture video,
  #pedestrianAlldetailsModal .human-details-group .human-details-video img,
  #pedestrianAlldetailsModal .human-details-group .human-details-video video {
    -o-object-fit: contain;
       object-fit: contain;
  }
  #pedestrianAlldetailsModal .human-details-group .human-details-body-picture {
    height: 100%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: unset;
  }
  #pedestrianAlldetailsModal .human-details-group .human-details-body-picture img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  #pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category:last-child {
    margin-bottom: 36px;
  }
  #pedestrianAlldetailsModal .human-details-group .human-details-visualization .human-details-category-item img {
    width: 4vw;
    height: 4vw;
  }
  #pedestrianAlldetailsModal .human-details-category {
    width: calc(100% - 12px);
  }
}

#vehicleAlldetailsModal .vehicle-details-group {
  max-width: 100%;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, calc(33.3333333333% - 8px));
  align-items: stretch;
  gap: 12px;
}
#vehicleAlldetailsModal .vehicle-details-group:has(.vehicle-details-container-number) {
  grid-template-columns: repeat(4, calc(25% - 9px));
}
#vehicleAlldetailsModal .vehicle-details-group:has(.vehicle-details-chassis-number) {
  grid-template-columns: repeat(4, calc(25% - 9px));
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-map-thumbnail,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-lpr,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-container-number,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-chassis-number,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture,
#vehicleAlldetailsModal .vehicle-details-group .automobile-mark {
  background-color: rgba(10, 10, 10, 0.2);
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-map-thumbnail {
  aspect-ratio: 16/9;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-map-thumbnail .thumbnail {
  width: auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-map-thumbnail .thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-lpr,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-container-number,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-chassis-number {
  aspect-ratio: 16/9;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-lpr img,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-container-number img,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-chassis-number img {
  height: 15vh;
  width: 100%;
  margin-top: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture {
  aspect-ratio: 16/9;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video .video,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video .whole-picture,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture .video,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture .whole-picture {
  width: auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video video,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video img,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture video,
#vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .vehicle-type-icon {
  height: 15vh;
  width: 100%;
  margin-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type img {
  width: 10vw;
  height: 10vw;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 12px;
  padding-bottom: 24px;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color {
  border: 1px solid gray;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px 12px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  position: relative;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.black {
  background-color: #181818;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.white {
  background-color: #fdfdfd;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.white span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.blue {
  background-color: #339af0;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.blue span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.brown {
  background-color: #a0522d;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.gold {
  background-color: #e6b803;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.gold span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.green {
  background-color: #28a745;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.grey {
  background-color: #a0a0a0;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.grey span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.maroon {
  background-color: #8d0000;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.orange {
  background-color: #ff8c00;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.orange span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.red {
  background-color: #cc0b0e;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.silver {
  background-color: #bbbab9;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.silver span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.yellow {
  background-color: #ffeb3b;
}
#vehicleAlldetailsModal .vehicle-details-group .vehicle-type .automobile-color.yellow span {
  color: #262b31;
}
#vehicleAlldetailsModal .vehicle-details-group .automobile-mark {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
#vehicleAlldetailsModal .vehicle-details-group .automobile-mark .automobile-mark-icon {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#vehicleAlldetailsModal .vehicle-details-group .automobile-mark img {
  width: 9vw;
  height: 9vw;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 12px;
}
#vehicleAlldetailsModal .vehicle-details-group .license-plate-number,
#vehicleAlldetailsModal .vehicle-details-group .container-number,
#vehicleAlldetailsModal .vehicle-details-group .chassis-number {
  padding: 12px 12px 8px 12px;
  border-radius: 6px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
#vehicleAlldetailsModal .vehicle-details-group .license-plate-color {
  padding: 12px 12px 8px 12px;
  border-radius: 6px;
  position: relative;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
#vehicleAlldetailsModal .vehicle-details-group .license-plate-color::before, #vehicleAlldetailsModal .vehicle-details-group .license-plate-color::after {
  content: "";
  position: absolute;
  top: 3px;
  height: 6px;
  width: 12px;
  background-color: #262b31;
  border-radius: 3px;
}
#vehicleAlldetailsModal .vehicle-details-group .license-plate-color::before {
  left: 5px;
}
#vehicleAlldetailsModal .vehicle-details-group .license-plate-color::after {
  right: 5px;
}
#vehicleAlldetailsModal .vehicle-details-group .whitePlateBlackWords {
  background-color: #f2f2f2;
  color: #181818;
}
#vehicleAlldetailsModal .vehicle-details-group .whitePlateRedWords {
  background-color: #f2f2f2;
  color: #cc0b0e;
}
#vehicleAlldetailsModal .vehicle-details-group .whitePlateGreenWords {
  background-color: #f2f2f2;
  color: #1d8034;
}
#vehicleAlldetailsModal .vehicle-details-group .yellowPlateBlackWords {
  background-color: #e6b803;
  color: #181818;
}
#vehicleAlldetailsModal .vehicle-details-group .redPlateWhiteWords {
  background-color: #cc0b0e;
  color: #f2f2f2;
}
#vehicleAlldetailsModal .vehicle-details-group .greenPlateWhiteWords {
  background-color: #1d8034;
  color: #f2f2f2;
}
#vehicleAlldetailsModal .vehicle-details-group .details-caption {
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid #262b31;
  width: 100%;
  text-align: center;
}
#vehicleAlldetailsModal .vehicle-details-group .details-caption .details-caption-title {
  color: #3DFDFE;
}
#vehicleAlldetailsModal .vehicle-details-group i {
  margin-right: 3px;
}
@media only screen and (max-width: 1280px) {
  #vehicleAlldetailsModal .vehicle-details-group {
    grid-template-rows: repeat(2, 0.85fr);
  }
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-details-map-thumbnail .thumbnail,
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-details-video .video,
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-details-whole-picture .whole-picture {
    width: auto;
    height: 100%;
  }
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-details-lpr img,
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-details-container-number img,
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-details-chassis-number img {
    width: 100%;
    height: auto;
  }
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-type .vehicle-type-icon img {
    width: 12vw;
    height: 12vw;
  }
  #vehicleAlldetailsModal .vehicle-details-group .automobile-mark img {
    width: 16vw;
    height: 16vw;
  }
}
@media only screen and (max-width: 768px) {
  #vehicleAlldetailsModal .vehicle-details-group {
    grid-template-columns: repeat(2, calc(50% - 10px)) !important;
    grid-template-rows: repeat(3, 0.85fr) !important;
  }
  #vehicleAlldetailsModal .vehicle-details-group .vehicle-type .vehicle-type-icon img {
    width: 16vw;
    height: 16vw;
  }
  #vehicleAlldetailsModal .vehicle-details-group .automobile-mark img {
    width: 20vw;
    height: 20vw;
  }
}

#TrafficVDdetailsModal .vehicle-counting-period-from,
#TrafficVDdetailsModal .vehicle-counting-period-to,
#TrafficVDSdetailsModal .vehicle-counting-period-from,
#TrafficVDSdetailsModal .vehicle-counting-period-to {
  display: inline;
}
#TrafficVDdetailsModal .TrafficVDdetails,
#TrafficVDSdetailsModal .TrafficVDdetails {
  border-collapse: collapse;
}
#TrafficVDdetailsModal .TrafficVDdetails tr,
#TrafficVDSdetailsModal .TrafficVDdetails tr {
  background-color: transparent;
}
#TrafficVDdetailsModal .TrafficVDdetails td,
#TrafficVDdetailsModal .TrafficVDdetails th,
#TrafficVDSdetailsModal .TrafficVDdetails td,
#TrafficVDSdetailsModal .TrafficVDdetails th {
  border: 1px solid rgb(10, 10, 10);
  text-align: center;
  vertical-align: middle;
}
#TrafficVDdetailsModal .TrafficVDdetails tr > td:first-child,
#TrafficVDSdetailsModal .TrafficVDdetails tr > td:first-child {
  width: 1%;
}
#TrafficVDdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(2),
#TrafficVDSdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(2) {
  background-color: #065ba0;
}
#TrafficVDdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(3),
#TrafficVDSdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(3) {
  background-color: #0b7c7b;
}
#TrafficVDdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(4),
#TrafficVDSdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(4) {
  background-color: #846d3c;
}
#TrafficVDdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(5),
#TrafficVDSdetailsModal .TrafficVDdetails thead > tr:nth-child(1) > th:nth-child(5) {
  background-color: #8e3b57;
}
#TrafficVDdetailsModal .TrafficVDdetails .pill,
#TrafficVDSdetailsModal .TrafficVDdetails .pill {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
}
#TrafficVDdetailsModal .TrafficVDdetails i,
#TrafficVDSdetailsModal .TrafficVDdetails i {
  margin-right: 6px;
}
#TrafficVDdetailsModal .TrafficVDdetails tr:hover,
#TrafficVDdetailsModal .TrafficVDdetails tr.child td.child:hover,
#TrafficVDSdetailsModal .TrafficVDdetails tr:hover,
#TrafficVDSdetailsModal .TrafficVDdetails tr.child td.child:hover {
  transition: 0.2s background-color linear;
  background-color: rgba(10, 10, 10, 0.4);
}
#TrafficVDdetailsModal .TrafficVDdetails .dt-column-order::before,
#TrafficVDSdetailsModal .TrafficVDdetails .dt-column-order::before {
  display: none !important;
}
#TrafficVDdetailsModal .TrafficVDdetails .vehicle-type,
#TrafficVDSdetailsModal .TrafficVDdetails .vehicle-type {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
#TrafficVDdetailsModal .TrafficVDdetails .vehicle-type img,
#TrafficVDSdetailsModal .TrafficVDdetails .vehicle-type img {
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 8px;
  margin-bottom: 14px;
}
#TrafficVDdetailsModal .TrafficVDdetails .vehicle-type img.Pedestrian,
#TrafficVDSdetailsModal .TrafficVDdetails .vehicle-type img.Pedestrian {
  margin-top: 7px;
  margin-bottom: 7px;
}
#TrafficVDdetailsModal .TrafficVDdetails .vehicle-type span,
#TrafficVDSdetailsModal .TrafficVDdetails .vehicle-type span {
  width: 90px;
}
#TrafficVDdetailsModal .TrafficVDdetails .vds-info-category-icon,
#TrafficVDdetailsModal .TrafficVDdetails .vds-info-direction-icon,
#TrafficVDSdetailsModal .TrafficVDdetails .vds-info-category-icon,
#TrafficVDSdetailsModal .TrafficVDdetails .vds-info-direction-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#TrafficVDdetailsModal .TrafficVDdetails .vds-info-category-icon img,
#TrafficVDdetailsModal .TrafficVDdetails .vds-info-direction-icon img,
#TrafficVDSdetailsModal .TrafficVDdetails .vds-info-category-icon img,
#TrafficVDSdetailsModal .TrafficVDdetails .vds-info-direction-icon img {
  padding: 4px;
  width: 24px;
  height: 24px;
}
#TrafficVDdetailsModal .TrafficVDSdetails,
#TrafficVDSdetailsModal .TrafficVDSdetails {
  border-collapse: collapse;
}
#TrafficVDdetailsModal .TrafficVDSdetails tr,
#TrafficVDSdetailsModal .TrafficVDSdetails tr {
  background-color: transparent;
}
#TrafficVDdetailsModal .TrafficVDSdetails td,
#TrafficVDdetailsModal .TrafficVDSdetails th,
#TrafficVDSdetailsModal .TrafficVDSdetails td,
#TrafficVDSdetailsModal .TrafficVDSdetails th {
  border: 1px solid rgb(10, 10, 10);
  text-align: center;
  vertical-align: middle;
  padding: 8px 10px;
}
#TrafficVDdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(1),
#TrafficVDSdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(1) {
  background-color: #065ba0;
}
#TrafficVDdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(2),
#TrafficVDSdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(2) {
  background-color: #0b7c7b;
}
#TrafficVDdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(3),
#TrafficVDSdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(3) {
  background-color: #846d3c;
}
#TrafficVDdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(4),
#TrafficVDSdetailsModal .TrafficVDSdetails thead > tr:nth-child(1) > th:nth-child(4) {
  background-color: #8e3b57;
}
#TrafficVDdetailsModal .TrafficVDSdetails thead > tr:nth-child(2) > th,
#TrafficVDSdetailsModal .TrafficVDSdetails thead > tr:nth-child(2) > th {
  background-color: #393f44;
}
#TrafficVDdetailsModal .TrafficVDSdetails .pill,
#TrafficVDSdetailsModal .TrafficVDSdetails .pill {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
}
#TrafficVDdetailsModal .TrafficVDSdetails i,
#TrafficVDSdetailsModal .TrafficVDSdetails i {
  margin-right: 6px;
}
#TrafficVDdetailsModal .TrafficVDSdetails tbody:hover,
#TrafficVDSdetailsModal .TrafficVDSdetails tbody:hover {
  transition: 0.2s background-color linear;
  background-color: rgba(10, 10, 10, 0.4);
}
#TrafficVDdetailsModal .TrafficVDSdetails .dt-column-order::before,
#TrafficVDSdetailsModal .TrafficVDSdetails .dt-column-order::before {
  display: none !important;
}
#TrafficVDdetailsModal .TrafficVDSdetails .vehicle-type,
#TrafficVDSdetailsModal .TrafficVDSdetails .vehicle-type {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
#TrafficVDdetailsModal .TrafficVDSdetails .vehicle-type img,
#TrafficVDSdetailsModal .TrafficVDSdetails .vehicle-type img {
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 8px;
  margin-bottom: 14px;
}
#TrafficVDdetailsModal .TrafficVDSdetails .vehicle-type img.Pedestrian,
#TrafficVDSdetailsModal .TrafficVDSdetails .vehicle-type img.Pedestrian {
  margin-top: 7px;
  margin-bottom: 7px;
}
#TrafficVDdetailsModal .TrafficVDSdetails .vehicle-type span,
#TrafficVDSdetailsModal .TrafficVDSdetails .vehicle-type span {
  width: 90px;
}
#TrafficVDdetailsModal .TrafficVDSdetails .vds-info-category-icon,
#TrafficVDdetailsModal .TrafficVDSdetails .vds-info-direction-icon,
#TrafficVDSdetailsModal .TrafficVDSdetails .vds-info-category-icon,
#TrafficVDSdetailsModal .TrafficVDSdetails .vds-info-direction-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#TrafficVDdetailsModal .TrafficVDSdetails .vds-info-category-icon img,
#TrafficVDdetailsModal .TrafficVDSdetails .vds-info-direction-icon img,
#TrafficVDSdetailsModal .TrafficVDSdetails .vds-info-category-icon img,
#TrafficVDSdetailsModal .TrafficVDSdetails .vds-info-direction-icon img {
  padding: 4px;
  width: 24px;
  height: 24px;
}
@media only screen and (max-width: 576px) {
  #TrafficVDdetailsModal .TrafficVDdetails .vehicle-type span,
  #TrafficVDdetailsModal .TrafficVDSdetails .vehicle-type span,
  #TrafficVDSdetailsModal .TrafficVDdetails .vehicle-type span,
  #TrafficVDSdetailsModal .TrafficVDSdetails .vehicle-type span {
    display: none;
  }
}

#TTEdetailsModal .details-event-title {
  border-bottom: none;
}

#TTEdetailsModal .details-event-title,
#parkingLotDetailsModal .details-event-title {
  margin-bottom: 0;
  align-items: center;
}
#TTEdetailsModal .details-event-title .fa-square-parking,
#parkingLotDetailsModal .details-event-title .fa-square-parking {
  color: #009ae8;
  font-size: 26px;
}
#TTEdetailsModal .details-event-title h5,
#parkingLotDetailsModal .details-event-title h5 {
  line-height: 1;
}
#TTEdetailsModal div.dt-container div.dt-layout-row,
#parkingLotDetailsModal div.dt-container div.dt-layout-row {
  margin: 0;
}
#TTEdetailsModal table,
#parkingLotDetailsModal table {
  border-collapse: collapse;
  margin-bottom: 12px;
}
#TTEdetailsModal table thead,
#parkingLotDetailsModal table thead {
  display: none;
}
#TTEdetailsModal table tr,
#parkingLotDetailsModal table tr {
  background-color: transparent;
}
#TTEdetailsModal table td,
#TTEdetailsModal table th,
#parkingLotDetailsModal table td,
#parkingLotDetailsModal table th {
  vertical-align: middle;
  padding: 8px 12px;
  width: 50%;
}
#TTEdetailsModal table td:nth-child(1),
#TTEdetailsModal table th:nth-child(1),
#parkingLotDetailsModal table td:nth-child(1),
#parkingLotDetailsModal table th:nth-child(1) {
  text-align: right;
}
#TTEdetailsModal table td:nth-child(2),
#TTEdetailsModal table th:nth-child(2),
#parkingLotDetailsModal table td:nth-child(2),
#parkingLotDetailsModal table th:nth-child(2) {
  text-align: left;
}
#TTEdetailsModal table .pill,
#parkingLotDetailsModal table .pill {
  border: 1px solid gray;
  border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  margin: 2px;
}
#TTEdetailsModal table i,
#parkingLotDetailsModal table i {
  margin-right: 6px;
}
#TTEdetailsModal table tr:hover,
#TTEdetailsModal table tr.child td.child:hover,
#parkingLotDetailsModal table tr:hover,
#parkingLotDetailsModal table tr.child td.child:hover {
  transition: 0.2s background-color linear;
  background-color: rgba(10, 10, 10, 0.4);
}
#TTEdetailsModal table .details-date-time,
#parkingLotDetailsModal table .details-date-time {
  font-family: monospace;
}
#TTEdetailsModal table .tte-details-picture,
#parkingLotDetailsModal table .tte-details-picture {
  padding: 0;
  border-top: none;
}
#TTEdetailsModal .tte-license-plate-icon,
#parkingLotDetailsModal .tte-license-plate-icon {
  display: inline-flex;
  margin-right: 6px;
  width: 16px;
  height: 9px;
  border-radius: 2px;
  position: relative;
  text-align: center;
  background-color: #f2f2f2;
}
#TTEdetailsModal .tte-picture-group,
#parkingLotDetailsModal .tte-picture-group {
  width: 100%;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
#TTEdetailsModal .parking-space-type,
#parkingLotDetailsModal .parking-space-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
#TTEdetailsModal .parking-space-type img,
#parkingLotDetailsModal .parking-space-type img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 4px;
  border-radius: 3px;
  background-color: #1750a3;
}
#TTEdetailsModal .available,
#parkingLotDetailsModal .available {
  color: #24d13b;
}

#eventPictureModal .iid-period-from,
#eventPictureModal .iid-period-to,
#eventPictureModal .tte-period-from,
#eventPictureModal .tte-period-to,
#eventPlaybackModal .iid-period-from,
#eventPlaybackModal .iid-period-to,
#eventPlaybackModal .tte-period-from,
#eventPlaybackModal .tte-period-to,
#TTEdetailsModal .iid-period-from,
#TTEdetailsModal .iid-period-to,
#TTEdetailsModal .tte-period-from,
#TTEdetailsModal .tte-period-to {
  display: inline;
}

#airPollutionDetailsModal .details-date-time-location {
  flex-direction: column;
  gap: 12px;
}
#airPollutionDetailsModal div.dt-container div.dt-layout-row {
  margin-bottom: 6px;
}
#airPollutionDetailsModal .aqi-circle {
  position: relative;
  border: 10px solid #606060;
  border-radius: 300px;
  width: 180px;
  height: 180px;
  margin: 24px auto;
}
#airPollutionDetailsModal .aqi-circle .aqi-title,
#airPollutionDetailsModal .aqi-circle .aqi-data,
#airPollutionDetailsModal .aqi-circle .aqi-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 21px;
}
#airPollutionDetailsModal .aqi-circle .aqi-title {
  top: 26%;
}
#airPollutionDetailsModal .aqi-circle .aqi-status {
  top: 70%;
}
#airPollutionDetailsModal .aqi-circle.circle-good {
  border: 10px solid #24d13b;
}
#airPollutionDetailsModal .aqi-circle.circle-moderate {
  border: 10px solid #ffeb0a;
}
#airPollutionDetailsModal .aqi-circle.circle-poor {
  border: 10px solid #e02626;
}

@media print {
  body {
    background: white !important;
    background-color: white !important;
    color: black;
  }
}
#not-found-area {
  height: calc(100vh - 46px - 26px);
  width: 100%;
}
#not-found-area h1 {
  position: absolute;
  top: 100px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  letter-spacing: 2px;
  text-align: center;
}

.logo-container[data-v-17adeacb] {
        gap: 50px; /* 控制圖標與圖片的間距 */
}
.logo-img[data-v-17adeacb] {
        height: 40px; /* 圖片高度，可自行調整 */
        width: auto; /* 維持圖片比例 */
}
.link-card div[data-v-17adeacb] {
        color: #2ec4c2;
}
.link-card:hover div[data-v-17adeacb] {
        color: #2ec4c2;
}
[data-v-17adeacb] .first-letter {
        color: #ff0000 !important;
        font-weight: bold !important;
}
.image-grid[data-v-17adeacb] {
        display: flex;
        flex-wrap: wrap; /* 換行 */
        justify-content: space-between; /* 左右平均間距 */
        gap: 20px; /* 可選間距 */
}
.image-item[data-v-17adeacb] {
        width: calc(33.333% - 13.33px); /* 每排 3 張，扣掉間距 */
        text-align: center;
        margin-bottom: 20px;
}
.image-item img[data-v-17adeacb] {
            width: 100%;
            height: auto;
            border-radius: 8px; /* 可選 */
}
.image-caption[data-v-17adeacb] {
        margin-top: 8px;
        font-size: 14px;
        color: #333;
}