@charset "UTF-8";
/*
  CSS for skaleo dashboard
  Syntax: CSS
  Created by: Bartłomiej Kowalczyk
  Date: 24/11/22
  Last update: 17/06/23
  Version: 0.35
*/


    /* VARIABLES */
  :root {
    --skaleo-global-secondary: #fefefe;
    --skaleo-global-accent: #2B70F0;
    --skaleo-global-accent-lighter: #e0eafc;
    --skaleo-global-text-color: #2F3542;
    --skaleo-light-grey-blueish: #ecf2fe;
    --skaleo-very-light-grey-blueish: #f3f7fe;
    --skaleo-light-grey-red: #ffd1dd;
    --skaleo-font-satoshi: "satoshi", Sans-serif;
  }

  .skaleo-card, .skaleo-card-text, .skaleo-card-title,
  .skaleo-link, .skaleo-input, .skaleo-input-label,
  .skaleo-checkbox-label, .skaleo-button {
      font-family: var(--skaleo-font-satoshi);
  }

  .skaleo-pager, .skaleo-flexbox-row, .skaleo-flexbox-column,
  .skaleo-center-items, .skaleo-align-left-items {
    display: flex;
  }
  
  .info-icon { width:15px; } 

  /* COMPONENTS */
  .skaleo-card {
      margin: 4em auto;
      width: 80vw;
      box-shadow: 0px 8px 80px rgba(0, 0, 0, 0.07), 0px 3.34221px 33.4221px rgba(0, 0, 0, 0.0503198),
        0px 1.7869px 17.869px rgba(0, 0, 0, 0.0417275), 0px 1.00172px 10.0172px rgba(0, 0, 0, 0.035),
        0px 0.532008px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 0.221381px 2.21381px rgba(0, 0, 0, 0.0196802);
      border-radius: 15px;
      padding: 1em 3em;
      background-color: #fff;
  }

  .skaleo-card-small {
    width: 30vw;
    padding: 1em 5em;
  }

  .skaleo-card-info {
    width: 40vw;
    padding: 1em 3em;
  }

  .skaleo-card-sub {
    width:auto;
    background-color: var(--skaleo-very-light-grey-blueish);
  }

  .skaleo-flexbox-row {
      flex-direction: row;
      flex-wrap: wrap;
      padding: 1em 1.2em;
      width: 100%;
  }

  .skaleo-flexbox-column {
      flex-direction: column;
      flex-wrap:wrap;
      flex-basis: 100%;
      flex: 1;
      justify-content: end;
      gap: .5em;
  }


  .skaleo-card-title {
      color: var(--skaleo-global-text-color);
      font-size: 3.5em;
      font-weight: bold;
  }

  .skaleo-card-text {
      text-align: center;
      color: var(--skaleo-global-text-color);
      font-size: 1.2em;
  }

  .skaleo-text-left {
      text-align: left !important;
  }

  .skaleo-text-small {
      font-size: .65em !important;
  }

  .skaleo-text-medium {
      font-size: .8em !important;
  }

  .skaleo-text-large {
    font-size: 1.4em !important;
  }

  .skaleo-text-extra-large {
    font-size: 2em !important;
  }

  .skaleo-text-greyed-out {
      opacity: .5 !important;
  }

  .skaleo-text-highlight {
      color: var(--skaleo-global-accent);
      font-weight: 600;
  }


  .skaleo-input-label {
      display:block;
      font-weight: 400;
      font-size: 1.2em;
      cursor:pointer;
  }

  .skaleo-helper { width:100%; }

  .skaleo-invalid > input.skaleo-input {
    background: var(--skaleo-light-grey-red);
  }

  input.skaleo-input, select.skaleo-select {
      display:block;
      color: var(--skaleo-global-accent);
      font-weight: 700;
      background-color: var(--skaleo-light-grey-blueish);
      border-width: 0px !important;
      border-radius: 6px !important;
  }

  input.skaleo-input[readonly], select.skaleo-select[readonly] {
    color: var(--e-global-color-text);
    opacity: .7;
    cursor: default;
  }

  input.skaleo-input::placeholder {
      color: var(--skaleo-global-accent);
      opacity: .3;
  }

  input.skaleo-input {
    padding: .5em 1rem;
  }

  select.skaleo-select {
    padding: 10px 1rem;
  }

  .skaleo-helper > input.skaleo-input, .skaleo-helper > select.skaleo-select { width:70%; }

  .skaleo-flexbox-column-checkbox {
      flex-direction: row;
      justify-content: normal;
  }

  .skaleo-checkbox{
      display:block;
      color: var(--skaleo-global-accent);
      background-color: var(--skaleo-light-grey-blueish);
      border-width: 0px !important;
      border-radius: 6px !important;
  }

  .skaleo-checkbox-label { 
      width:60%;
      display: block;
      font-weight: 400;
      font-size: 1.2em;
      cursor:pointer;
  }

  .skaleo-button {
      width: fit-content;
      font-size: 1.3em;
      font-weight: 500;
      fill: #FFFFFF;
      color: var(--skaleo-global-secondary);
      padding: .2em 1em;
      background-color: #2B70F0;
      border-color: var(--skaleo-global-accent);
      border-radius: 199px 199px 199px 199px;
      box-shadow: 0px 6px 16px 0px rgba(10.49999999999998, 9.769565217391285, 9.769565217391285, 0.14);
      cursor: pointer;
      transition: all 250ms cubic-bezier(0, .41, .62, 1.12);
  }

  .skaleo-button:hover {
      color: var(--skaleo-global-accent);
      background: #fff;
      border-color: #fff;
  }

  .skaleo-button:focus {
      color: #FFFFFF;
      background-color: #2B70F0; 
      border-color: var(--skaleo-global-accent);
      outline: none !important;
  }

  .skaleo-button-secondary {
    font-size: 1em;
    fill: #FFFFFF;
    color: var(--skaleo-global-text-color);
    background-color: var(--skaleo-global-secondary);
    border-color: var(--skaleo-global-text-color);
  }
  
  .skaleo-button-round {
    /* display:flex;
    justify-content: center;
    align-items: center; */
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
  }

  .skaleo-button-secondary:hover {
    color: var(--skaleo-global-accent);
    background: #fff;
    border-color: #fff;
  }

  .skaleo-button-secondary:focus {
    color: var(--skaleo-global-accent);
    background-color: var(--skaleo-global-secondary); 
  }

  /* Groups button for the same font-size */
  .skaleo-button-group-big .skaleo-button {
    font-size: 1.3em;
  }
  
  .skaleo-pager {
    flex-wrap: nowrap;
    flex-direction: column;
    padding: .5em 0 .5em 0;
  }

  .skaleo-button-pager {
    font-size: 1em;
    color: var(--skaleo-global-text-color);
    background-color: var(--skaleo-vary-light-grey-blueish);
    border-color: var(--skaleo-global-text-color);
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.14);
  }

  .skaleo-button-pager:hover {
    color: var(--skaleo-global-accent);
    background-color: var(--skaleo-global-accent-lighter); 
  }

  .skaleo-button-pager:focus {
    color: var(--skaleo-global-accent);
    background-color: var(--skaleo-global-accent-lighter); 
    border: none;
  }

  .skaleo-button-pager.skaleo-selected { 
    font-weight: 900;
    background-color: var(--skaleo-light-grey-blueish);
  }

  .skaleo-icon-container {
    position: relative;
    width: 102px;
    height: 102px;
  }

  .skaleo-icon {
    position: absolute;
    left: 25%;
    top: 25%;
  }

  .skaleo-flexbox-column-button {
    flex:none;
  }



  /* UTILITIES */
  .skaleo-flexbox-nowrap { flex-wrap: nowrap; }
  .skaleo-gap-top { margin-top: .5em; }
  .skaleo-gap-bottom { margin-bottom: .5em; }
  .skaleo-gap-left { margin-left: 1.2em; }
  .skaleo-gap-right { margin-right: 1.2em; }
  .skaleo-no-margins { margin: 0 !important; }
  .skaleo-no-paddings { padding: 0 !important; }
  .skaleo-hidden { display: none; }
  .skaleo-text-center { text-align: center; }
  .skaleo-align-text-input { align-items: center; }
  .skaleo-flexbox-gap { gap: 1em; }
  .skaleo-center-items { justify-content: center; }
  .skaleo-align-left-items { justify-content: left; }
  .skaleo-allow-transition { transition: all 250ms cubic-bezier(0, .41, .62, 1.12); }


  /* MOBILE */

  @media screen and (max-width: 1700px) {
    .skaleo-card-small {
        width: 40vw;
        padding: 1em;
    }

    .skaleo-flexbox-column-mobile { 
      display: flex;
      flex-direction: column;
      flex-wrap:wrap;
      flex-basis: 100%;
      flex: 1;
      justify-content: end;
      gap: .5em;
    }

  }

  @media screen and (max-width: 900px) {

      .skaleo-card {
          padding: 1em;
      }

      .skaleo-card-small {
        width: 80vw;
        padding: 1em;
      }

      .skaleo-card-info {
        width: 80vw;
        padding: 1em;
      }

      .skaleo-card-sub {
        padding: 2em .5em;
      }

      .skaleo-flexbox-row, .skaleo-flexbox-column {
          display: block;
      }

      .skaleo-flexbox-row {
          padding: 0 1.2em;
      }

      .skaleo-flexbox-column {
          padding: 1em 0;
      }

      .skaleo-input-label {
          padding-bottom: 1em;
      }

      .skaleo-card-sub, .skaleo-card-sub .skaleo-input,
      .skaleo-card-sub .skaleo-select { font-size: .8em; }

      .skaleo-helper > .skaleo-input, .skaleo-helper > .skaleo-select { width: 100%; }

      .skaleo-card-title {
          font-size: 2.5em !important;
      }   

      .skaleo-card-text {
          font-size: .8em;
      } 


      .skaleo-flexbox-column-checkbox {
          display:flex;
      }

      .skaleo-checkbox-label { 
          width:90%;
      }

      .skaleo-icon-container {
        transform: scale(0.7);
      }

      .skaleo-pager {
        font-size: .8em;
      }


      /* UTILITY */

      .skaleo-mobile-hidden { display:none; }
      .skaleo-center-items {
        display:flex;
        max-width: 100% !important; /* should this be here? */
      }
      .skaleo-flexbox-wrap-mobile { flex-wrap: wrap; }

      

  }

  @media screen and (max-width: 600px) {
      .skaleo-card-sub .skaleo-select, .skaleo-card-sub .skaleo-input {
        max-width: 90% !important;
      }

      .skaleo-pager .skaleo-button-pager {
        font-size: .7em;
        padding: .2em .5em;
      }
  }

  @media screen and (max-width: 400px) {


    .skaleo-pager .skaleo-button-pager {
      font-size: .6em;
      padding: .2em .5em;
    }
}