@import "about_section";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root {
  --AppsilonBlue: #0099F9;
  --AppsilonNavi: #15354A;
  --AppsilonIce:  #A6D5E0;
  --AppsilonMint: #1AFFD5;
  --AppsilonYellow: #FCD73D;
  --AppsilonRose: #FF364A;
  --AppsilonPurple: #770F7C;
  --AppsilonGray: #6E757B;
  --AppsilonLightGray: #8A8E91;
  --AppsilonAsh: #B3B8BA;
  --AppsilonSnow: #FFFFFF;

  --AppsilonBlue-weak-1: #4CB8FB;
  --AppsilonBlue-weak-2: #80CCFC;
  --AppsilonBlue-weak-3: #CCEBFE;
  --AppsilonBlue-strong-1: #0085E1;
  --AppsilonBlue-strong-2: #0071CD;
  --AppsilonBlue-strong-3: #005DB9;

  --AppsilonNavi-weak-1: #29495E;
  --AppsilonNavi-weak-2: #3D5D72;
  --AppsilonNavi-weak-3: #517186;
  --AppsilonNavi-strong-1: #0B2B40;
  --AppsilonNavi-strong-2: #012136;
  --AppsilonNavi-strong-3: #00172C;

  --AppsilonIce-weak-1: #B4DCE4;
  --AppsilonIce-weak-2: #C3E3EA;
  --AppsilonIce-weak-3: #E1F1F4;
  --AppsilonIce-strong-1: #92C1CC;
  --AppsilonIce-strong-2: #7EADB8;
  --AppsilonIce-strong-3: #6A99A4;

  --AppsilonMint-weak-1: #8CFFEA;
  --AppsilonMint-weak-2: #C2FFF4;
  --AppsilonMint-weak-3: #EBFFFB;
  --AppsilonMint-strong-1: #00E1B7;
  --AppsilonMint-strong-2: #00CDA3;
  --AppsilonMint-strong-3: #00B999;

  --AppsilonYellow-weak-1: #FDE16E;
  --AppsilonYellow-weak-2: #FEEB9E;
  --AppsilonYellow-weak-3: #FEF5CE;
  --AppsilonYellow-strong-1: #E8C329;
  --AppsilonYellow-strong-2: #D4AF15;
  --AppsilonYellow-strong-3: #C09B01;

  --AppsilonRose-weak-1: #FF8692;
  --AppsilonRose-weak-2: #FFAFB7;
  --AppsilonRose-weak-3: #FFD7DB;
  --AppsilonRose-strong-1: #D70E22;
  --AppsilonRose-strong-2: #C3000E;
  --AppsilonRose-strong-3: #AF0000;

  --AppsilonPurple-weak-1: #994B9D;
  --AppsilonPurple-weak-2: #BB87BE;
  --AppsilonPurple-weak-3: #DDC3DE;
  --AppsilonPurple-strong-1: #630068;
  --AppsilonPurple-strong-2: #4F0054;
  --AppsilonPurple-strong-3: #3B0040;

  --AppsilonGray-weak-1: #92989C;
  --AppsilonGray-weak-2: #B7BABD;
  --AppsilonGray-weak-3: #DBDDDE;
  --AppsilonGray-strong-1: #767A7D;
  --AppsilonGray-strong-2: #464D53;
  --AppsilonGray-strong-3: #32393F;

  --AppsilonLightGray-weak-1: #A7AAAD;
  --AppsilonLightGray-weak-2: #C4C6C8;
  --AppsilonLightGray-weak-3: #E2E3E3;
  --AppsilonLightGray-strong-1: #767A7D;
  --AppsilonLightGray-strong-2: #626669;
  --AppsilonLightGray-strong-3: #4E5255;

  --AppsilonAsh-weak-1: #C6CACB;
  --AppsilonAsh-weak-2: #D9DCDD;
  --AppsilonAsh-weak-3: #ECEDEE;
  --AppsilonAsh-strong-1: #9FA4A6;
  --AppsilonAsh-strong-2: #8B9092;
  --AppsilonAsh-strong-3: #777C7E;

  /* Project Specific Variables */
  --AppsilonColor-primary: var(--AppsilonBlue);
  --AppsilonColor-success: var(--AppsilonMint-strong-3);
  --AppsilonColor-info: var(--AppsilonSnow);
  --AppsilonColor-warning: var(--AppsilonNavi-weak-3);
  --AppsilonColor-danger: var(--AppsilonSnow);

  --AppsilonBackground-primary: var(--AppsilonNavi);
  --AppsilonBackground-success: var(--AppsilonMint);
  --AppsilonBackground-info: var(--AppsilonBlue);
  --AppsilonBackground-warning: var(--AppsilonYellow);
  --AppsilonBackground-danger: var(--AppsilonRose);

  --AppsilonHighlight-primary: var(--AppsilonNavi-strong-3);
  --AppsilonHighlight-success: var(--AppsilonMint-strong-3);
  --AppsilonHighlight-info: var(--AppsilonBlue-strong-3);
  --AppsilonHighlight-warning: var(--AppsilonYellow-strong-3);
  --AppsilonHighlight-danger: var(--AppsilonRose-strong-3);

  --AppsilonForms-accent: var(--AppsilonNavi);
}


body {
  background-color: rgba(225, 223, 221, 0.2);
  min-height: 611px;
  margin: 0;
}

.ms-Nav {
  background-color: white;
}

/* Assign grid instructions to our parent grid container */
.grid-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: 54px 1fr 140px;
  grid-template-areas:
    "header header"
    "sidenav main"
    "footer footer";
  height: 100vh;
}

/* Give every child element its grid name */
.header {
  grid-area: header;
  background-color: #fff;
  display: flex;
  height: 64px;
}

.logo {
  height: 40px;
  margin: 12px 8px 12px 24px;
}

.sidenav {
  grid-area: sidenav;
  background-color: #fff;
  padding: 25px;
  margin-top: 10px;
}

.sidenav > div:nth-child(2) > div {
  margin-top: -370px;
  height: 100vh;
  padding-top: 370px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.main {
  grid-area: main;
  background-color: #faf9f8;
  padding-left: 40px;
  padding-right: 32px;
  margin-top: 10px;
  max-width: calc(100vw - 350px);
  max-height: calc(100vh - 100px);
  overflow: auto;
}

.footer {
  grid-area: footer;
  background-color: #f3f2f1;
  padding: 30px;

  border-color: var(--AppsilonBlue);
  border-image: linear-gradient(
    to right,
    var(--AppsilonMint) 0 12.5%,
    var(--AppsilonMint-weak-2) 0 25%,
    var(--AppsilonYellow-weak-1) 0 37.5%,
    var(--AppsilonRose-weak-1) 0 50%,
    var(--AppsilonPurple-weak-1) 0 62.5%,
    var(--AppsilonPurple-weak-2) 0 75%,
    var(--AppsilonBlue) 0 87.5%,
    var(--AppsilonBlue-weak-2) 0 100%
  ) 100% 1 0 stretch;
  border-top-style: solid;
  border-top-width: 3px;
}

.page-title {
  padding: 52px 0px;
}

.card {
  background: #fff;
  padding: 28px;
  margin-bottom: 28px;
  border-radius: 2px;
  background-clip: padding-box;
}

.platform_picker {
  padding: 0;
  grid-gap: 12px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(80px,1fr));
  margin-bottom: 25px;
}

.platform_picker > span {
  display: block;
}

.platform_item {
  width: 100%;
  min-width: 100%;
  height: 40px;
  padding: 8px;
  border: 1px solid #d2d0ce;
  font-size: 12px;
  outline: transparent;
  position: relative;
}

.platform_item .ms-Icon {
  color: #b4b3b1;
}

.ms-Shimmer-container {
  margin: 10px 0;
}

.app_header {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-areas:
    "logo . info mobile_controls"
    "separator separator separator separator"
    "title title title title"
    "menu menu menu menu"
    "cta cta cta cta";
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: auto 1fr auto auto;
  gap: 0px;
  align-items: stretch;
  justify-items: stretch;

  > .logo { grid-area: logo; }
  > .separator { grid-area: separator; }
  > .title { grid-area: title; }
  > .info { grid-area: info; }
  > .cta { grid-area: cta; }
  > .mobile_controls { grid-area: mobile_controls; }
}

@media (min-width: 1024px) {
  .app_header {
    grid-template-areas: "logo separator title mobile_controls . menu info cta";
    grid-template-rows: 40px;
    grid-template-columns: auto 1px auto auto 1fr auto auto auto;
    gap: 16px;
  }
}

#app_header {
  padding: 12px 0;
  justify-content: center;
  align-items: center;
  height: 64px;
  border-bottom: 1px solid #f2f4f8;
}

.app_header_vertical_separator {
  background: #C1C7CD;
  margin: 10px 0;
  height: calc(100% - 20px);
}

.app_header_title {
  user-select: none;
  color: #4D5358;
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.btn-cta {
  background: #0099f9;
  border-radius: 4px;
  color: white !important;
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  height: 40px;
  justify-content: center;
  margin: 12px 24px 12px 0;
  padding: 8px 16px 8px 16px;
}

.btn-nav_menu {
  background: transparent;
  border: none;
  color: #697077;
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
}

.btn-nav_menu:hover, .btn-nav_menu:active {
  color: #0099F9 !important;
  background-color: #F2FAFF !important;
}

.cta-icon {
  background: transparent !important;
  border: none;
  color: #0099f9 !important;
  height: 24px;
  width: 24px;
}

.header_control {
  display: none;
  justify-content: center;
  width: 20px;
}

.ms-OverflowSet {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-grow: 0;
    align-items: stretch;
}


@media (max-width: 1024px) {
  .app_header_vertical_separator {
    background: #C1C7CD;
    margin: 10px 0;
    height: 1px;
  }

  .app_header.mobile-collapsed {
    padding: 12px 24px 12px 0;
  }

  .app_header_title {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: #040A3C;
    padding-left: 50px;
  }

  .header_control {
    display: block;
    cursor: pointer;
    margin-top: 10px;
  }

  .btn-cta {
    color: white !important;
    font-size: 16px;
    height: 40px;
    padding: 8px 16px 8px 16px;
    margin: 12px 24px 12px 24px;
    justify-content: center;
    font-family: 'Maven Pro';
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    border-radius: 4px;
    background: #0099f9;
  }

  .btn-nav_menu {
    text-align: left;
  }

  #app_header.mobile-expanded .mobile-toggled,
  #app_header.mobile-expanded .header_collapse {
    display: flex !important;
  }

  #app_header.mobile-expanded .header_expand {
    display: none !important;
  }

  #app_header.mobile-collapsed .mobile-toggled,
  #app_header.mobile-collapsed .header_collapse {
    display: none !important;
  }

  #app_header.mobile-collapsed .header_expand {
    display: flex !important;
  }

  .app_header {
    padding-top: 0  !important;
  }

  .app_header .app_header_vertical_separator.mobile-toggled.separator {
    background: #fff;
    padding: 10px 0;
    margin: 0;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
  }

  .app_header .app_header_title.mobile-toggled {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.6);
  }

  .app_header .react-container.cta {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.6);
  }

  .app_header.mobile-expanded {
    position: absolute;
    z-index: 1;
  }

  .mobile_controls {
    margin: 0 20px 0 10px;
  }

}
