:root {
  --lisio-background-color-secondary: #fff;

  --lisio-font-color-primary: #000;
  --lisio-font-color-secondary: #fdc72a;

  --lisio-color-red: #ad1a00;
  --lisio-color-red-hover: #791200;
  --lisio-color-grey: #555555;
  --lisio-color-grey-hover: #5e5e5e;
  --lisio-color-grey2: #888;
  --lisio-color-hover: rgba(0, 0, 0, 0.5);
  --lisio-color-blue-green: #015e66;

  --lisio-switch-track-active: #fee394;

  --lisio-border-radius-extra-large: 30px;
  --lisio-border-radius-large: 27px;
  --lisio-border-radius-medium: 19px;
  --lisio-border-radius-small: 10px;

  --lisio-font-size-extra-tall: 24px;
  --lisio-font-size-tall: 22px;
  --lisio-font-size-medium: 20px;
  --lisio-font-size-regular: 18px;
  --lisio-font-size-small: 16px;

  --lisio-font-family: "Calibri", sans-serif;
}

.justify-content-between {
  justify-content: space-between;
}
.justify-content-around {
  justify-content: space-around;
}

.d-block {
  display: block !important;
}
.center {
  text-align: center !important;
}
html,
body {
  margin: 0;
  /*height: 100%;
  height: -moz-available;
  height: -webkit-fill-available;
  height: fill-available;
  overflow: hidden;*/
  /* width: 390vw; */
}

body#lisio-new-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  position: relative;
  right: 0;
  width: 100%;
  height: 100vh;
  /* border-top-left-radius: var(--lisio-border-radius-large);
  border-top-right-radius: var(--lisio-border-radius-large);
  border-bottom-left-radius: var(--lisio-border-radius-small);
  border-bottom-right-radius: var(--lisio-border-radius-small); */
  border-radius: var(--lisio-border-radius-large);
  /* background-color: var(--lisio-background-color-primary); */
  background-color: var(--lisio-background-color-secondary);
  box-shadow: -3px 0px 5px -1px rgba(121, 121, 121, 0.8);
  /* row-gap: 8px; */
  font-family: "Calibri", sans-serif;
  overflow: hidden;
}

.show-title-focus-visible:focus {
  outline: solid 2px black;
  outline-offset: 2px;
}
h1:focus-visible,
h2:focus-visible {
  outline: 0;
}

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-button:single-button {
  border-radius: 5px 5px 0 0;
  height: 16px;
  width: 16px;
  background-position: center 4px;
  background-repeat: no-repeat;
}

::-webkit-scrollbar-button:single-button:decrement {
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.38266 0.582898C3.76314 -0.105299 4.75247 -0.105301 5.13296 0.582897L7.99081 5.75194C8.3593 6.41843 7.87724 7.23579 7.11566 7.23579H1.39995C0.638374 7.23579 0.156311 6.41844 0.524802 5.75194L3.38266 0.582898Z' fill='%233D3D3F'/%3E%3C/svg%3E%0A");
}

::-webkit-scrollbar-button:single-button:increment {
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.13523 7.40901C4.75376 8.0965 3.76444 8.09468 3.38493 7.40578L0.534439 2.23146C0.166897 1.56429 0.650121 0.747822 1.4117 0.749229L7.1274 0.759786C7.88898 0.761193 8.36987 1.57944 8.00043 2.24525L5.13523 7.40901Z' fill='%233D3D3F'/%3E%3C/svg%3E%0A");
}

::-webkit-scrollbar-track {
  background: #95969d;
}

::-webkit-scrollbar-thumb {
  background: #3d3d3f;
  border-radius: 16px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3d3d3f;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
}

/*sections*/

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95%;
  /* row-gap: 16px; */
  overflow-y: auto;
  margin-bottom: 8px;
  padding: 8px 0 8px 0;
  margin-top: 8px;
  min-height: 60%;
  overscroll-behavior: contain;
}

.show-title-focus-visible:focus {
  outline: solid 2px black;
  outline-offset: 2px;
}

h1:focus-visible,
h2:focus-visible {
  outline: 0;
}

section.hidden {
  display: none;
}

input.lisio-custom-input.hidden:not([type="radio"]),
input.lisio-custom-input.hidden:not([type="number"]),
input.lisio-custom-input.hidden:not([type="text"]) {
  opacity: 0;
  width: 0;
  height: 0;
}