:root {
  /* THEME COLORS */
  --theme-clr-primary: #4949BE;
  --theme-clr-primary-light: #E6F0F8;
  --theme-clr-primary-dark: #000062;

  --theme-clr-secondary: #A325DE;
  --theme-clr-secondary-light: #F1D5FF;
  --theme-clr-secondary-dark: #49006C;

  --theme-clr-tertiary: #7272FF;
  --theme-clr-tertiary-light: #DADAF2;
  --theme-clr-tertiary-dark: #121288;

  /* BRANDING GRADIENTS */
  --theme-clr-gradient: linear-gradient(336deg, var(--theme-clr-primary) 0%, var(--theme-clr-secondary) 100%);

  /* BASE COLORS */
  --theme-clr-base-light: #FFFFFF;
  --theme-clr-base-mid0: #f1f1f1;
  --theme-clr-base-mid1: #ebebeb;
  --theme-clr-base-mid2: #cbcbcb;
  --theme-clr-base-mid3: #ababab;
  --theme-clr-base-mid4: #8b8b8b;
  --theme-clr-base-mid5: #6b6b6b;
  --theme-clr-base-mid6: #404040;
  --theme-clr-base-dark: #2b2b2b;

  --theme-clr-backdrop-light: rgba(113, 113, 113, .1);
  --theme-clr-backdrop-mid: rgba(113, 113, 113, .7);
  --theme-clr-backdrop-dark: rgba(113, 113, 113, .9);

  --theme-clr-palette-green: #27AE60;
  --theme-clr-palette-green-light: #D5FFE6;
  --theme-clr-palette-red: #D34A4A;
  --theme-clr-palette-red-light: #FFCCCC;
  --theme-clr-palette-yellow: #FFCE00;
  --theme-clr-palette-yellow-light: #FFF0BE;
  --theme-clr-palette-blue: #4882B5;
  --theme-clr-palette-blue-light: #BCE0FF;
  --theme-clr-palette-orange: #FF9900;
  --theme-clr-palette-orange-light: #FFEDD1;
  
  --error-clr: var(--theme-clr-palette-red);
  --error-border: var(--theme-clr-shadow-red);

  --theme-font-size-small: 12px;
  --theme-font-size-mid: 14px;

  /* BORDER RADIUS SIZES */
  --theme-border-radius-extra-small: 3px;
  --theme-border-radius-small: 5px;
  --theme-border-radius-big: 10px;

  /* SHADOWS */
  --theme-clr-shadow-primary: 0 3px 10px var(--theme-clr-primary-light);
  --theme-clr-shadow-secondary: 0 3px 10px var(--theme-clr-secondary-light);
  --theme-clr-shadow-inner: inset 0 0 6px var(--theme-clr-base-mid3);
  --theme-clr-shadow-error: 0 0px 6px var(--theme-clr-palette-red-light);
  --theme-clr-shadow-popup: 0 10px 30px var(--theme-clr-base-mid2);
  --theme-clr-shadow-blue: 0 3px 6px rgba(80, 139, 190, .2);
  --theme-clr-shadow-red: 0 3px 6px rgba(255, 0, 0, .2);
  --theme-clr-shadow-dark: 0 15px 30px rgba(0, 0, 0, .08);

  /* LOADEROVERLAY */
  --theme-clr-loaderoverlay-color: rgb(249 249 249 / 69%);

  /* COM:MODAL */
  --theme-modal-header-color: var(--theme-clr-primary);
  --theme-modal-footer-color: var(--theme-clr-base-mid1);
  --theme-modal-background-color: var(--theme-clr-base-light);
  --theme-modal-body-color: var(--theme-clr-base-dark);
  --theme-modal-shadow: var(--theme-clr-shadow-dark);
  --theme-modal-header-button-color: var(--theme-clr-base-light);
  --theme-modal-header-subheading-color: var(--theme-clr-base-light);
  --theme-modal-footer-background-color: var(--theme-clr-base-mid1);

  /* COM:TOAST */
  --theme-toast-info-color: var(--theme-clr-palette-blue);
  --theme-toast-error-color: var(--theme-clr-palette-red);
  --theme-toast-warning-color: var(--theme-clr-palette-yellow);
  --theme-toast-success-color: var(--theme-clr-palette-green);
  --theme-toast-content-color: var(--theme-clr-base-light);
  --theme-toast-actions-color: var(--theme-clr-base-light);
  --theme-toast-border-radius: var(--theme-border-radius-small);

  /* COM:INPUT */
  --theme-input-border-radius: var(--theme-border-radius-small);
  --theme-input-border-color: var(--theme-clr-base-mid2);
  --theme-input-dark-background-color: var(--theme-clr-base-mid1);
  --theme-input-dark-border-color: var(--theme-clr-base-mid4);
  
  /* COM:BUTTON */
  --theme-button-border-radius: var(--theme-border-radius-small);

  --theme-font-size-small: 12px;
  --theme-font-size-mid: 14px;
  
  /********************************************************************************/
  /********************************** OLD STYLES **********************************/
  /********************************************************************************/
  --clr-background: #F2F2F2;
  /* --clr-background: linear-gradient(to bottom, #ffffff 1%,#eaeaea 100%); */
  --clr-blue-gradient: linear-gradient(to bottom,  #284f6e 1%,#376690 100%);
  --clr-white: #fff;
  --clr-midblue: #80B4DD;
  --clr-midlightblue: #486984;
  --clr-darkblue: #284F6E;
  --clr-darkblue-hover: #376690;
  --clr-greyblue: #69849a;
  --clr-lightgreyblue: #889eaf;
  --clr-midgrey: #A2A5A9;
  --clr-midlightgrey: #E5E5E6;
  --clr-darkgrey: #404040;
  --clr-red: #D34A4A;
  --clr-lightgrey: #F7F7F7;
  --clr-blue: #4782B5;
  --clr-lightblue: #DFE8EF;
  --clr-lightestblue: #e6f0f8;
  --clr-grey: #E5E5E6;
  --clr-orange: #ff9900;
  --clr-grey-backdrop: rgba(113, 113, 113, .7);
  --clr-lightred: #ffebeb;
  --clr-lightgreen: #e0fff5;
  --clr-lightyellow: #FFFFCC;
  --clr-lightred-hover: #ffcbcb;
  --clr-lightgreen-hover: #b1ffe6;
  --clr-lightyellow-hover: #ffff96;
  --clr-green: green;
  /* --clr-red: red; */
  --clr-green-background:  #e9f7ef;
  --clr-red-background:  #f9ebe9;
  --clr-blue-info: #2e6bb9;
  --clr-black: #000000;
  --clr-black-transparent50: #00000080;
  --clr-toast-red: #C0392B;
  --clr-toast-yellow: #FFCE00;
  --clr-toast-green: #27AE60;
  --clr-toast-blue: #4882B5;
  --clr-darkyellow: #DBA800;
  --clr-midgreen: #52CB8E;

  --clr-azami-blue: #4949be;
  --clr-azami-dark-blue: #2F0091;
  --clr-azami-blue-light: #D4D4EC;
  --clr-azami-blue-hover: #1c8fd6;
  --clr-azami-blue-glass: rgb(4 110 178 / 14%);
  --clr-azami-violet: #bd2eee;
  --clr-azami-violet-dark: #9810FA;
  --clr-azami-blurple-glass: #0F0FB933;
  --clr-azami-blurple: #4A49BE;
  --clr-azami-btn-gradient: linear-gradient(336deg, rgba(2,110,179,1) 0%, rgba(189,47,238,1) 100%);
  --clr-azami-btn-gradient-hover: linear-gradient(285.92deg, #005EAD 2.68%, #AC30E3 96.8%),
  linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  --clr-azami-gradient: linear-gradient(90deg, rgba(2,110,179,1) 0%, rgba(189,47,238,1) 100%);
  --clr-azami-btn-cancel: rgba(189, 46, 238, 0.1);
  --clr-azami-lightgrey: #E5F0F7;
  --clr-azami-light-blurple: #dbdbf2;

  --clr-ipeer-blue: #2B3FFD;
  
  --clr-greyed-out-background: #ededed;
  --clr-highlight-background: #fef8c6;

  /* --clr-darkgrey: #262626; */
  --clr-table-header: rgba(203, 203, 203, .4);
  --clr-tooltip-text: #ddd;
  --clr-tooltip-background: rgba(64, 64, 64);
  --clr-adjustment-table-row: rgba(255, 206, 0, .08);

  --clr-priority-1: #c0392b;
  --clr-priority-2: #ff8383;
  --clr-priority-3: #bd2fee;
  --clr-priority-4: #10b5b5;
  --clr-priority-5: #439bff;

  --radius: 10px;
  --radius-small: 5px;

  --shadow: 0 15px 30px rgba(0, 0, 0, .08);
  --shadow-low: 0 15px 30px rgba(0, 0, 0, .1);
  --shadow-center: 0px 0px 30px rgba(0, 0, 0, .1);
  --shadow-blue: 0 3px 6px rgba(80, 139, 190, .2);
  --shadow-lightblue: 0 5px 15px rgba(44, 88, 121, .2);
  --shadow-red: 0 3px 6px rgba(255, 0, 0, .2);

  --tooltip-margin: 30px;
  --tooltip-arrow-size: 10px;
}

::placeholder {
  color: var(--clr-midgrey);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: 'Roboto', sans-serif;
}

html, body {
  height: 100%;
  background: transparent linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%) 0% 0% no-repeat padding-box;
  background-attachment: fixed;
}

#root {
  height: 100%;
}

/* DEFAULTS */

.main-screen-section {
  width: 100%;
  border-radius: 10px 0 0 10px;
  /* padding: 0 20px 15px 20px; */
  padding-bottom: 15px;
  align-items: center;
  /* display: flex; */
  position: relative;
}

.main-screen-section.subheader {
  display: flex;
}

.main-screen-section.subheader.padding {
  padding: 0 20px;
}

.main-screen-section.white {
  padding: 20px;
  background-color: var(--clr-white);
}

.main-screen-section.full-height {
  min-height: calc(100% - 130px);
}

.main-screen-section.no-padding {
  padding: 0;
}

.main-screen-section__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--clr-darkgrey);
  flex-grow: 1;
  color: var(--clr-azami-violet);
}

.main-screen-section p {
  font-size: 14px;
  margin: 10px 0;
  color: var(--clr-midgrey)
}

.main-screen-section__headbox {
  display: flex;
  text-align: right;
  flex-grow: 1;
  justify-content: flex-end;
}

  .main-screen-section__headbox h4 {
    font-size: 16px;
    font-weight: 500;
    color: var(--clr-darkgrey);
  }

  .main-screen-section__details-content__body {
    padding: 15px 20px;
  }

    .main-screen-section__section {
      margin: 15px 0;
      display: flex;
      gap: 20px;
    }

    .main-screen-section__section.half {
      width: 50%;
    }

  .main-screen-section__details-content__footer {
    width: 100%;
    height: 55px;
    background-color: var(--clr-lightgrey);
    border-radius: var(--radius);
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
  }   

.pointer {
  cursor: pointer;
}

.subtitle {
  color: var(--clr-midgrey);
}

.dot-separator {
  height: 3px;
  width: 3px;
  background-color: var(--clr-midgrey);
  border-radius: 50%;
}