app/static/css/style.css

@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");
html {
  overflow: scroll;
}

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.modal-dialog {
  font-family: "Maven Pro", sans-serif;
  text-align: justify;
  font-style: normal;
}

@media only screen and (max-width: 767px) {
  .modal-dialog {
    width: 80vw;
    font-size: 12px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .modal-dialog {
    width: 70vw;
    font-size: 14px;
  }
}

@media only screen and (min-width: 1024px) {
  .modal-dialog {
    width: 55vw;
    font-size: 16px;
  }
}

.modal-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Maven Pro", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.1em;
  padding: 0 2em;
  color: #050c31;
}

.about-section {
  line-height: 1.1em;
  font-family: "Maven Pro", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1em;
  padding: 0 3em;
}

.about-section .about-descr {
  margin-bottom: 1.1em;
  line-height: 1em;
  font-family: "Maven Pro", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9em;
}

.about-section .about-header {
  font-family: "Maven Pro", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.1em;
  color: #050c31;
  margin-bottom: 0.75em;
}

.about-section .about-tag {
  font-family: "Maven Pro", sans-serif;
  font-style: normal;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0.8em 0;
}

.about-section .about-tag i {
  padding-right: 0.5em;
}

.about-section .about-tag .tag-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.5em 0.75em;
  margin-right: 0.5em;
  margin-top: 0.5em;
  gap: 0.25em;
  background: #dbf1ff;
  color: #050c31;
  border-radius: 4em;
}

.about-section .about-tag .tag-item a:link {
  text-decoration: none;
  color: #050c31;
}

.about-section .about-tag .tag-item:hover {
  background-color: #0099f9;
  color: #050c31;
}

.about-section hr {
  border: 0.1em solid #c4c4c4;
}

.about-section .card-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1em 0;
  font-size: 1em;
}

@media only screen and (max-width: 767px) {
  .about-section .card-section {
    flex-direction: column;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .about-section .card-section {
    flex-direction: row;
  }
}

@media only screen and (min-width: 1024px) {
  .about-section .card-section {
    flex-direction: row;
  }
}

.about-section .card-section .card-package {
  flex-basis: 30%;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 1.1em;
  gap: 1.1em;
  background: #172c40;
  border: 0.1em solid #ededed;
  box-shadow: 0 1em 2em rgba(0, 0, 0, 0.02);
  border-radius: 1em;
}

.about-section .card-section .card-empty {
  flex-basis: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-section .card-section .card-empty a:link {
  text-decoration: none;
  color: #0099f9;
}

.about-section .card-section .card-empty i {
  font-size: 3em;
  color: #dbf1ff;
  padding-left: 40%;
  padding-top: 20%;
  align-items: center;
}

.about-section .card-section .card-empty .card-empty-caption {
  font-family: "Maven Pro", sans-serif;
  font-style: normal;
  padding: 1em 0;
  font-size: 1.15em;
  line-height: 1.1em;
  font-weight: 600;
  align-items: center;
  text-align: center;
  color: #0099f9;
}

.about-section .card-section .card-heading {
  font-family: "Maven Pro", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.1em;
  color: white;
}

.about-section .card-section .card-content {
  font-family: "Maven Pro", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9em;
  line-height: 1.1em;
  text-align: center;
  color: #ecf5ff;
}

.about-section .card-section .card-footer {
  font-family: "Maven Pro", sans-serif;
  font-style: normal;
  align-items: center;
  text-align: center;
  color: #172c40;
  font-weight: 500;
  font-size: 1em;
  line-height: 0.5em;
  flex-direction: row;
  justify-content: center;
  padding: 0.75em 1em;
  gap: 0.8em;
  background: white;
  border-radius: 0.25em;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  margin-top: auto;
}

.about-section .card-section .card-footer a:link {
  text-decoration: none;
  color: #050c31;
}

.about-section .card-section .card-img img {
  height: 7em;
  width: 8em;
  align-items: center;
  object-fit: contain;
}

.about-section .appsilon-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0.5em;
  margin: 1rem 0;
  background: #f4f8fa;
  border-radius: 1em;
}

.about-section .appsilon-card .appsilon-pic {
  flex-shrink: 2;
  flex-basis: 20%;
  margin: auto;
}

.about-section .appsilon-card .appsilon-pic img {
  height: 3.2em;
  width: 8em;
  align-items: center;
}

.about-section .appsilon-card .appsilon-summary {
  flex-grow: 2;
  font-family: "Maven Pro", sans-serif;
  font-style: normal;
  margin: auto;
  flex-basis: 70%;
  font-size: 0.9em;
  line-height: 1em;
  color: #244059;
}

: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 {
  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, 0.1);
  }
  .app_header .app_header_title.mobile-toggled {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  }
  .app_header .react-container.cta {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  }
  .app_header.mobile-expanded {
    position: absolute;
    z-index: 1;
  }
  .mobile_controls {
    margin: 0 20px 0 10px;
  }
}