@import url(./ks-theme/_colours.css);
@import url(./ks-theme/ks-panel.css);
@import url(./ks-theme/ks-button.css);
@import url(./ks-theme/ks-select-content.css);
@import url(./ks-theme/ks-input-field.css);
@import url(./ks-theme/ks-checkbox.css);
@import url(./ks-theme/ks-dropdown.css);
@import url(./ks-theme/ks-toggle.css);
@import url(./ks-theme/ks-heading.css);
@import url(./ks-theme/ks-floating-menu.css);
@import url(./ks-theme/ks-input-filter.css);
@import url(./ks-theme/ks-slider.css);
@import url(./ks-theme/ks-tooltip.css);
@import url(./ks-theme/ks-item-label-pair.css);
@import url(./ks-theme/ks-status-indicator.css);
@import url(./ks-theme/ks-vertical-tabs.css);

@import url(./ks-theme/_fonts.css);

/* TODO: bootstrapista käyttöön jäävät oletusarvot tänne (fontti, fonttikoko, yms) */
body {
  font-family: "Poppins";
  font-size: 13px;
  color: var(--ks-font-color-primary);
}
*:link {
  text-decoration: none;
}
button, 
input, 
select, 
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
button {
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: white !important;
}

label {
  font-weight: normal;
}

/* Prevent user agent stylesheet styles */
table {
  font-size: 13px;
}

iframe {
  border: none;
}

:root {
  --ks-text-line-height: 1.428571429;
  --ks-panel-border-radius: 6px;
  --ks-layout-gap: 8px;
}

:root {
  --ks-font-color-input-label: var(--ks-font-color-secondary);
  --ks-font-color-title: var(--ks-font-color-accent);

  --ks-font-size: 14px;
  --ks-font-size-m: 14px;
  --ks-font-size-s: 12px;
  --ks-font-size-l: 16px;
  --ks-font-size-xs: 11px;
  --ks-font-size-xxs: 9px;

  --ks-margin-0: 0px;
  --ks-margin-1: 4px;
  --ks-margin-2: 8px;
  --ks-margin-3: 16px;
  --ks-margin-4: 24px;
  --ks-margin-5: 48px;

  --ks-padding-0: 0px;
  --ks-padding-1: 4px;
  --ks-padding-2: 8px;
  --ks-padding-3: 16px;
  --ks-padding-4: 24px;
  --ks-padding-5: 48px;

}


.ks-font-size {
  font-size: var(--ks-font-size) !important;
}
.ks-font-size-m {
  font-size: var(--ks-font-size) !important;
}


.ks-font-size-s {
  font-size: var(--ks-font-size-s) !important;
}

.ks-font-size-l {
  font-size: var(--ks-font-size-l) !important;
}

.ks-font-size-xs {
  font-size: var(--ks-font-size-xs) !important;
}
.ks-font-size-xxs {
  font-size: var(--ks-font-size-xxs) !important;
}

.ks-title {
  color: var(--ks-font-color-title);
}

.text-right {
  text-align: right !important;
}
.text-no-wrap {
  white-space: nowrap !important;
}

/* Koko 0 (0px) */
.ma-0 { margin: var(--ks-margin-0) !important; }
.mv-0 { margin-top: var(--ks-margin-0) !important;
        margin-bottom: var(--ks-margin-0) !important; }
.mh-0 { margin-left: var(--ks-margin-0) !important;
        margin-right: var(--ks-margin-0) !important; }
.mt-0 { margin-top: var(--ks-margin-0) !important; }
.mb-0 { margin-bottom: var(--ks-margin-0) !important; }
.ml-0 { margin-left: var(--ks-margin-0) !important; }
.mr-0 { margin-right: var(--ks-margin-0) !important; }

/* Koko 1 (4px) */
.ma-1 { margin: var(--ks-margin-1) !important; }
.mv-1 { margin-top: var(--ks-margin-1) !important;
        margin-bottom: var(--ks-margin-1) !important; }
.mh-1 { margin-left: var(--ks-margin-1) !important;
        margin-right: var(--ks-margin-1) !important; }
.mt-1 { margin-top: var(--ks-margin-1) !important; }
.mb-1 { margin-bottom: var(--ks-margin-1) !important; }
.ml-1 { margin-left: var(--ks-margin-1) !important; }
.mr-1 { margin-right: var(--ks-margin-1) !important; }

/* Koko 2 (8px) */
.ma-2 { margin: var(--ks-margin-2) !important; }
.mv-2 { margin-top: var(--ks-margin-2) !important;
        margin-bottom: var(--ks-margin-2) !important; }
.mh-2 { margin-left: var(--ks-margin-2) !important;
        margin-right: var(--ks-margin-2) !important; }
.mt-2 { margin-top: var(--ks-margin-2) !important; }
.mb-2 { margin-bottom: var(--ks-margin-2) !important; }
.ml-2 { margin-left: var(--ks-margin-2) !important; }
.mr-2 { margin-right: var(--ks-margin-2) !important; }

/* Koko 3 (16px) - Vuetifyn vakio */
.ma-3 { margin: var(--ks-margin-3) !important; }
.mv-3 { margin-top: var(--ks-margin-3) !important;
        margin-bottom: var(--ks-margin-3) !important; }
.mh-3 { margin-left: var(--ks-margin-3) !important;
        margin-right: var(--ks-margin-3) !important; }
.mt-3 { margin-top: var(--ks-margin-3) !important; }
.mb-3 { margin-bottom: var(--ks-margin-3) !important; }
.ml-3 { margin-left: var(--ks-margin-3) !important; }
.mr-3 { margin-right: var(--ks-margin-3) !important; }

/* Koko 4 (24px) */
.ma-4 { margin: var(--ks-margin-4) !important; }
.mv-4 { margin-top: var(--ks-margin-4) !important;
        margin-bottom: var(--ks-margin-4) !important; }
.mh-4 { margin-left: var(--ks-margin-4) !important;
        margin-right: var(--ks-margin-4) !important; }
.mt-4 { margin-top: var(--ks-margin-4) !important; }
.mb-4 { margin-bottom: var(--ks-margin-4) !important; }
.ml-4 { margin-left: var(--ks-margin-4) !important; }
.mr-4 { margin-right: var(--ks-margin-4) !important; }

/* Koko 5 (48px) */
.ma-5 { margin: var(--ks-margin-5) !important; }
.mv-5 { margin-top: var(--ks-margin-5) !important;
        margin-bottom: var(--ks-margin-5) !important; }
.mh-5 { margin-left: var(--ks-margin-5) !important;
        margin-right: var(--ks-margin-5) !important; }
.mt-5 { margin-top: var(--ks-margin-5) !important; }
.mb-5 { margin-bottom: var(--ks-margin-5) !important; }
.ml-5 { margin-left: var(--ks-margin-5) !important; }
.mr-5 { margin-right: var(--ks-margin-5) !important; }

/* Auto-asettelu (Keskittämiseen jne.) */
.ma-auto { margin: auto !important; }
.mv-auto { margin-top: auto !important;
           margin-bottom: auto !important; }
.mh-auto { margin-left: auto !important;
           margin-right: auto !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

/* Koko 0 (0px) */
.pa-0 { padding: var(--ks-padding-0) !important; }
.pv-0 { padding-top: var(--ks-padding-0) !important;
        padding-bottom: var(--ks-padding-0) !important; }
.ph-0 { padding-left: var(--ks-padding-0) !important;
        padding-right: var(--ks-padding-0) !important; }
.pt-0 { padding-top: var(--ks-padding-0) !important; }
.pb-0 { padding-bottom: var(--ks-padding-0) !important; }
.pl-0 { padding-left: var(--ks-padding-0) !important; }
.pr-0 { padding-right: var(--ks-padding-0) !important; }

/* Koko 1 (4px) */
.pa-1 { padding: var(--ks-padding-1) !important; }
.pv-1 { padding-top: var(--ks-padding-1) !important;
        padding-bottom: var(--ks-padding-1) !important; }
.ph-1 { padding-left: var(--ks-padding-1) !important;
        padding-right: var(--ks-padding-1) !important; }
.pt-1 { padding-top: var(--ks-padding-1) !important; }
.pb-1 { padding-bottom: var(--ks-padding-1) !important; }
.pl-1 { padding-left: var(--ks-padding-1) !important; }
.pr-1 { padding-right: var(--ks-padding-1) !important; }

/* Koko 2 (8px) */
.pa-2 { padding: var(--ks-padding-2) !important; }
.pv-2 { padding-top: var(--ks-padding-2) !important;
        padding-bottom: var(--ks-padding-2) !important; }
.ph-2 { padding-left: var(--ks-padding-2) !important;
        padding-right: var(--ks-padding-2) !important; }
.pt-2 { padding-top: var(--ks-padding-2) !important; }
.pb-2 { padding-bottom: var(--ks-padding-2) !important; }
.pl-2 { padding-left: var(--ks-padding-2) !important; }
.pr-2 { padding-right: var(--ks-padding-2) !important; }

/* Koko 3 (16px) */
.pa-3 { padding: var(--ks-padding-3) !important; }
.pv-3 { padding-top: var(--ks-padding-3) !important;
        padding-bottom: var(--ks-padding-3) !important; }
.ph-3 { padding-left: var(--ks-padding-3) !important;
        padding-right: var(--ks-padding-3) !important; }
.pt-3 { padding-top: var(--ks-padding-3) !important; }
.pb-3 { padding-bottom: var(--ks-padding-3) !important; }
.pl-3 { padding-left: var(--ks-padding-3) !important; }
.pr-3 { padding-right: var(--ks-padding-3) !important; }

/* Koko 4 (24px) */
.pa-4 { padding: var(--ks-padding-4) !important; }
.pv-4 { padding-top: var(--ks-padding-4) !important;
        padding-bottom: var(--ks-padding-4) !important; }
.ph-4 { padding-left: var(--ks-padding-4) !important;
        padding-right: var(--ks-padding-4) !important; }
.pt-4 { padding-top: var(--ks-padding-4) !important; }
.pb-4 { padding-bottom: var(--ks-padding-4) !important; }
.pl-4 { padding-left: var(--ks-padding-4) !important; }
.pr-4 { padding-right: var(--ks-padding-4) !important; }

/* Koko 5 (48px) */
.pa-5 { padding: var(--ks-padding-5) !important; }
.pv-5 { padding-top: var(--ks-padding-5) !important;
        padding-bottom: var(--ks-padding-5) !important; }
.ph-5 { padding-left: var(--ks-padding-5) !important;
        padding-right: var(--ks-padding-5) !important; }
.pt-5 { padding-top: var(--ks-padding-5) !important; }
.pb-5 { padding-bottom: var(--ks-padding-5) !important; }
.pl-5 { padding-left: var(--ks-padding-5) !important; }
.pr-5 { padding-right: var(--ks-padding-5) !important; }



.ks-monospace-number {
  font-family: "Roboto";
}

.ks-interact-left-rounded {
  border-radius: 999em 0 0 999em;
}
.ks-interact-no-rounding {
  border-radius: 0;
}
.ks-interact-right-rounded {
  border-radius: 0 999em 999em 0;
}
.ks-interact-rounded {
  border-radius: 999em;
}



.ks-v-table-container {
  clip-path: polygon(0 3px, 100% 3px, 100% 100%, 0 100%);
  overflow: scroll;
}

.ks-bg-semi-transparent {
  background: var(--ks-background-color-op85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ks-col-secondary);
  box-shadow: 0px 0px 20px var(--ks-base-color);
}

/* Row display to replace bootstrap's "row": by default the".ks-row-item"-items inside the ".ks-row"-container are stretched to fit the container width */
/* If no stretching is desired, "ks-row-item"-class can be simply omitted from the elements inside of "ks-row" */
/* Custom widths for the items can be set (calculated as a fraction of the available space) with opitional classes assigned to the items */
.ks-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;

  .ks-row-item {
    flex: 1;
  }

  .ks-row-item.col-2 {
    flex: 0 0 auto;
    width: calc(100% / 2);
  }
  .ks-row-item.col-3 {
    flex: 0 0 auto;
    width: calc(100% / 3);
  }
  .ks-row-item.col-4 {
    flex: 0 0 auto;
    width: calc(100% / 4);
  }
  .ks-row-item.col-5 {
    flex: 0 0 auto;
    width: calc(100% / 5);
  }
  .ks-row-item.col-6 {
    flex: 0 0 auto;
    width: calc(100% / 6);
  }
  .ks-row-item.col-7 {
    flex: 0 0 auto;
    width: calc(100% / 7);
  }
  .ks-row-item.col-8 {
    flex: 0 0 auto;
    width: calc(100% / 8);
  }
  .ks-row-item.col-9 {
    flex: 0 0 auto;
    width: calc(100% / 9);
  }
  .ks-row-item.col-10 {
    flex: 0 0 auto;
    width: calc(100% / 10);
  }
  .ks-row-item.col-11 {
    flex: 0 0 auto;
    width: calc(100% / 11);
  }
  .ks-row-item.col-12 {
    flex: 0 0 auto;
    width: calc(100% / 12);
  }
}


/* scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-corner {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: var(--ks-col-secondary)!important;
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-track-piece {
  background-color: transparent;
}




@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ks-spin {
  animation-name: spin;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center center;
}



/* Remove once bootstarp is no longer active */
.bootstrap-select .btn:focus {
  outline: none!important;
}