/* root */
:root {
  /* Navbar icons */
  --light-icon-discover: url(../assets/icon_discover.svg);
  --light-icon-discover-selected: url(../assets/icon_discover_on.svg);
  --light-icon-lisafive: url(../assets/icon_lisafive.svg);
  --light-icon-lisafive-selected: url(../assets/icon_lisafive_on.svg);
  --light-icon-profile: url(../assets/icon_profile.svg);
  --light-icon-profile-selected: url(../assets/icon_profile_on.svg);
  /* Image rounded corners */
  --image-rounded-corner: 10%;
  --image-rounded-corner-px: 20px;
  /* Colors */
  --lisa-blue: #3399ff;
  --lisa-blue-shade1: #0072e4;

  /* Light mode */
  --light-background-color: white;
  --light-inverse-background-color-rgba-alpha: rgba(0, 0, 0, 0.7);
  --light-navbar-background: #f8f8f8;
  --light-searchbar-background: white;
  --light-font-color: black;
  --light-button-background: #f8f9fa;
  --light-button-background-hover: #f3f4f5; /*#eeeff0*/
  --light-carousel-indicators: #d9d9d9;
  --light-secondary-button-font-color: #6c757d;
  --light-red-font: #dc3545;
  --light-notification-background: #333333;
  --light-perpetual-white: white;
  --light-background-color-shade2: #fbfbfb;
  --light-footer: black;
  /* Dark mode */
  /*--light-background-color: #1a1a1a;
  --light-inverse-background-color-rgba-alpha: rgba(255, 255, 255, 0.85);
  --light-navbar-background: #333333;
  --light-searchbar-background: #333333;
  --light-font-color: #f9f9f9;
  --light-button-background: #333333; /*#404040; /*#343a40;*
  --light-button-background-hover: #404040; /*#3e444d;*
  --light-carousel-indicators: #595959;
  --light-secondary-button-font-color: #6c757d;
  --light-red-button-font: #dc3545;
  --light-notification-background: #333333;
  --light-perpetual-white: white;
  --light-background-color-shade2: #4d4d4d;
  --light-footer: #333333;*/
}

/* Font */

  /* static */
  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 100;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-Thin.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-Thin.woff?v=3.18") format("woff");
  }
  @font-face {
    font-family: 'Inter';
    font-style:  italic;
    font-weight: 100;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-ThinItalic.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-ThinItalic.woff?v=3.18") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 200;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-ExtraLight.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-ExtraLight.woff?v=3.18") format("woff");
  }
  @font-face {
    font-family: 'Inter';
    font-style:  italic;
    font-weight: 200;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-ExtraLightItalic.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-ExtraLightItalic.woff?v=3.18") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 300;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-Light.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-Light.woff?v=3.18") format("woff");
  }
  @font-face {
    font-family: 'Inter';
    font-style:  italic;
    font-weight: 300;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-LightItalic.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-LightItalic.woff?v=3.18") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-Regular.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-Regular.woff?v=3.18") format("woff");
  }
  @font-face {
    font-family: 'Inter';
    font-style:  italic;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-Italic.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-Italic.woff?v=3.18") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 500;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-Medium.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-Medium.woff?v=3.18") format("woff");
  }
  @font-face {
    font-family: 'Inter';
    font-style:  italic;
    font-weight: 500;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-MediumItalic.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-MediumItalic.woff?v=3.18") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 600;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-SemiBold.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-SemiBold.woff?v=3.18") format("woff");
  }
  @font-face {
    font-family: 'Inter';
    font-style:  italic;
    font-weight: 600;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-SemiBoldItalic.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-SemiBoldItalic.woff?v=3.18") format("woff");
  }
  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-Bold.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-Bold.woff?v=3.18") format("woff");
  }
  @font-face {
    font-family: 'Inter';
    font-style:  italic;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-BoldItalic.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-BoldItalic.woff?v=3.18") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 800;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-ExtraBold.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-ExtraBold.woff?v=3.18") format("woff");
  }
  @font-face {
    font-family: 'Inter';
    font-style:  italic;
    font-weight: 800;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-ExtraBoldItalic.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-ExtraBoldItalic.woff?v=3.18") format("woff");
  }

  @font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 900;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-Black.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-Black.woff?v=3.18") format("woff");
  }
  @font-face {
    font-family: 'Inter';
    font-style:  italic;
    font-weight: 900;
    font-display: swap;
    src: url("../assets/fonts/inter/Inter-BlackItalic.woff2?v=3.18") format("woff2"),
         url("../assets/fonts/inter/Inter-BlackItalic.woff?v=3.18") format("woff");
  }

  /* variable */
  @font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url("../assets/fonts/inter/Inter-roman.var.woff2") format("woff2");
  }
  @font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance: 'Italic';
    src: url("../assets/fonts/inter/Inter-italic.var.woff2") format("woff2");
  }


/* Body */

body { font-family: 'Inter',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";  }
@supports (font-variation-settings: normal) {
  body { font-family:'Inter var', system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; }
}

body{
  font-size: 16px;
  background-color: var(--light-background-color);
  color: var(--light-font-color);
}

/***********/
/* Top Navbar */
/***********/

.helpTopNavbar{
  background-color: var(--light-background-color) !important;
}

  /* navbar brand text */
.helpTopNavbar .navbar-brand{
  font-weight: 700; /* bold */
}
  /* links */
.helpTopNavbar .nav-link{
  color: inherit !important;
  font-weight: 700; /* bold */
}

.helpTopNavbar .nav-link:hover{
  filter: opacity(60%);
}

.helpTopNavbar .nav-link.active{
  text-decoration: underline;
  font-weight: 700; /* bold */
}

  /* toggler icon */
.helpTopNavbar svg{
  color: var(--light-font-color) !important;
}

  /* login button */
.helpLogIn{
  background-color: var(--lisa-blue);
  border-color: var(--lisa-blue);
  color: var(--light-background-color);
  /* rounded border */
  -webkit-border-radius: var(--image-rounded-corner-px);
  -moz-border-radius: var(--image-rounded-corner-px);
  border-radius: var(--image-rounded-corner-px);
}

.helpLogIn:hover {
  background-color: var(--lisa-blue-shade1);
  border-color: var(--lisa-blue-shade1);
  color: var(--light-background-color);
}

/***********/
/* Main column */
/***********/

  main{
    min-height: 60vh; /* main 60, bottom navbar 40 */
    padding-top: 60px; /* padding for top navbar */
  }

  header > div[class^="col-"],
  main > div[class^="col-"],
  footer > div[class^="col-"]{
    padding: 0px;
  }

  /* MAIN PAGE */

    /* helpMainTop */
    .helpMainTop{
      height: 70vh;
      min-height: 300px;
      background-color: var(--lisa-blue);
      text-align: center;
      padding: 1rem;
    }

    .helpMainTop h1{
      margin-left: auto;
      margin-right: auto;
      font-size: 3rem;
      color: var(--light-background-color);
    }

    /* helpMainContent */
    .helpMainContent{
      margin-top: 50px;
      margin-bottom: 50px;
    }

    .helpMainContentSection{
      height: 50vh;
      min-height: 250px;
      background-color: var(--light-background-color-shade2);
        /* position relative for stretched link */
      position: relative;
      /* rounded border */
      -webkit-border-radius: var(--image-rounded-corner-px);
      -moz-border-radius: var(--image-rounded-corner-px);
      border-radius: var(--image-rounded-corner-px);
    }

    .helpMainContentSection div{
      text-align: center;
    }

    .helpMainContentSection h2{
      margin-top: 1rem;
    }

    .helpMainContentSection h2 a{
      color: inherit;
      text-decoration:none;
    }

  /* OTHER SECTIONS */

    .helpContentContainer{
      padding-left: 25px;
      padding-right: 25px;
      padding-bottom: 100px;
    }

  /* document content */
.documentContent h2{
  font-weight: 700; /* bold */
  font-size: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.documentContent h3{
  font-weight: 700; /* bold */
  font-size: 1.2rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.documentContent a{
  color: var(--lisa-blue);
}

/***********/
/* Bottom Navbar */
/***********/

.helpBottomNavbar{
  min-height: 40vh; /* main 60, bottom navbar 40 */
  font-size: 0.9rem;
  color: var(--light-perpetual-white);
  background-color: var(--light-footer);
}

.helpBottomNavbar ul li{
  margin-bottom: 1rem;
}

.helpBottomNavbar a{
  color: inherit !important;
  text-decoration: none;
}

.helpBottomNavbar a:hover{
  filter: opacity(60%);
}

.helpBottomNavbar  div[class^="col-"]:first-child{
  text-align: center;
}

.helpBottomNavbar  div[class^="col-"]:last-child{
  text-align: center;
}

/***********/
/* HELP VERSION */
/***********/

  /* Top navigation */
  .topNavigation-help{
    padding: 10px 0px 10px 0px;
    background-color: var(--light-background-color);
  }

  .topNavigation-help a{
    text-decoration: none;
    color: inherit;
    font-size: 1.2rem;
  }

  .topNavigation-help a:first-child{
    padding-left: 0px;
  }

  .topNavigation-help a:last-child{
    padding-right: 0px;
  }

  .topNavigation-help a:hover{
    filter: opacity(60%);
  }

  /* Header */
  .collectionHeader-help{
    /*padding-bottom: 0px;*/
    padding-top: 15px;
    padding-bottom: 25px;
  }

  /* Title */
  .profileTitle-help{
    font-weight: 700; /* bold */
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0.2rem;
  }

  /* Content */
  .profileContent-help{
    padding-top: 15px;
    padding-bottom: 15px;
  }

  /* List group */
  .componentListGroup-help{
    text-align: center;
  }

  .componentListGroup-help .list-group-item{
    border: 1px solid transparent;
    background-color: var(--light-background-color);
    color: var(--light-font-color);
    margin-bottom: 1rem;
    /*font-weight: 500;
    font-size: 1.2rem;*/
  }

  .componentListGroup-help .list-group-item:last-child{
    margin-bottom: 0;
  }

  .componentListGroup-help .list-group-item:hover{
    filter: opacity(60%);
  }

  /** FORMS **/

  /* required fields text */
  .helpForm .rf{
    color: var(--light-red-font);
  }

  /* form subtitles */
  .helpForm h2{
    font-weight: 700; /* bold */
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
  }

  .helpForm input[type=text],
  .helpForm input[type=email],
  .helpForm input[type=password]{
    /*border: none;*/
    color: inherit;
    background-color: inherit;

    padding-left: 1rem;
    padding-right: 1rem;
    /* rounded border */
    -webkit-border-radius: var(--image-rounded-corner-px);
    -moz-border-radius: var(--image-rounded-corner-px);
    border-radius: var(--image-rounded-corner-px);
  }

  .helpForm label{
    font-weight: 600;
    /*font-size: 1.2rem;*/
  }

  .form-check label{
    font-weight: normal;
  }

  .helpForm select{
    /*border: none;*/
    color: inherit;
    background-color: inherit;

    padding-left: 1rem;
    padding-right: 1rem;
    /* rounded border */
    -webkit-border-radius: var(--image-rounded-corner-px);
    -moz-border-radius: var(--image-rounded-corner-px);
    border-radius: var(--image-rounded-corner-px);
  }

  .helpForm select option {
    background-color: var(--light-navbar-background);
  }

  .helpForm button{
    background-color: var(--lisa-blue) !important;
    border-color: var(--lisa-blue)!important;
    color: var(--light-background-color);
    /* rounded border */
    -webkit-border-radius: var(--image-rounded-corner-px);
    -moz-border-radius: var(--image-rounded-corner-px);
    border-radius: var(--image-rounded-corner-px);
  }

  .helpForm button:hover {
    background-color: var(--lisa-blue-shade1) !important;
    border-color: var(--lisa-blue-shade1) !important;
    color: var(--light-background-color);
  }

  .requestBlockRepresentative,
  .requestBlockRepresentativeOther,
  .requestBlockCategories{
    display: none;
  }

  .helpForm textarea{
    resize: none;
  }

    /* Sign up */
  /*
  .helpForm .signHeader{
    padding-bottom: 25px;
  }

  .helpForm .signLogo{
    width: 38px;
    height: 38px;
    margin-bottom: 5px;
  }

  .helpForm .printText{
    font-size: 0.8rem;
    color: var(--light-secondary-button-font-color);
  }

  .helpForm .acceptText a{
    color: var(--lisa-blue);
  }

  .helpForm .signFormBtn {
    background-color: var(--lisa-blue);
    border-color: var(--lisa-blue);
  }

  .helpForm .signFormContent{
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .helpForm .signFormBtn:hover{
    background-color: var(--lisa-blue-shade1);
    border-color: var(--lisa-blue-shade1);
  }
  */

/*************************************************************************/

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
}

/* Large devices (desktops, 992px and up)n*/
@media screen and (min-width: 992px) {

  .helpMainTop h1{
    font-size: 5rem;
  }

  .helpMainContentSection{
    height: 60vh;
  }

  .helpBottomNavbar  div[class^="col-"]:first-child{
    text-align: left;
  }

  .helpBottomNavbar  div[class^="col-"]:last-child{
    text-align: right;
  }

}

/* X-Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media screen and (min-width: 1400px) {
}


/***********/
/* Notes */
/***********/