/*variables*/
:root {
  --pad:5%;
  --cl-bl-80: #eaf5fe;
  --cl-bl-70: #00a1e0;
  --cl-bl-60: #1b96ff;
  --cl-bl-50: #0176d3;
  --cl-bl-40: #0b5cab;
  --cl-bl-20: #1e2d50;
  --cl-bl-10: #032e61ff;
  --cl-bl-0: #032d60;
  --cl-gn-70: #bee4c7;
  --cl-gn-60: #28a745;
  --cl-gn-50: #4a8057;
  --cl-gn-40: #396547;
  --cl-gr-100: #F3F1F1;
  --cl-gr-90: #e5e5e5;
  --cl-gr-60: #939393;
  --cl-gr-50: #747474;
  --cl-gr-30: #444;
  --cl-gr-20: #181818;
  --cl-yl-90: #ffffe0;
  --cl-yl-80: #fffacd;
  --cl-yl-70: #ffff00;
  --cl-yl-60: #eee600;
  --cl-yl-50: #eed202;
  --cl-or-70: #ffe8bf;
  --cl-rd-60: #dc3545;
  --cl-wh-20: #FAF9F6;
  --cl-wh: #FFF;

  --cl-pl-gn: #77DD77;
  --cl-pl-yl: #FDFD96;
  --cl-pl-or: #ffb347;
  --cl-pl-rd: #FF6961;
  --cl-pl-bl: #AEC6CF;

  --cl-btn-primary: var(--cl-bl-40);
  --cl-btn-secondary: var(--cl-gr-50);
  --cl-head-fore: var(--cl-bl-40);
  --cl-head-back: var(--cl-bl-80);
  --cl-foot-fore: var(--cl-bl-80);
  --cl-foot-back: var(--cl-bl-40);
  --cl-footer-light:var(--cl-gr-100);

  --cl-h1: var(--cl-bl-30);
  --cl-h2: var(--cl-bl-40);
  --cl-h3: var(--cl-bl-50);
  --cl-h4: var(--cl-bl-60);
  --cl-h5: var(--cl-bl-70);
  --cl-h6: var(--cl-gn-40);
  
  --font-body: 'Montserrat', sans-serif;
  --font-heading: 'Poppins', sans-serif;
}
/*variables*/

html {
  overflow-y: scroll;
  background-color: var(--cl-wh);
}
body {
  font-family: var(--font-body);
  font-size: 9pt;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  padding: 0;
  margin: 0;
}

h1 {
    font-size: 2.5em;
    color: var(--cl-h1);
    margin-left: -50px;
    padding-left: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
}

h2 {
    font-size: 2em;
    color: var(--cl-h2);
    margin-left: -20px;
    padding-left: 20px;
}

h3 {
    font-size: 1.5em;
    color: var(--cl-h3);
}

h4 {
    font-size: 1.3em;
    color: var(--cl-h4);
}

h5 {
    font-size: 1.1em;
    color: var(--cl-h5);
}
h6 {
  font-size: 1em;
  color: var(--cl-h6);
}
a, a:visited {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: underline;
}
a.lbtn {
  display: inline-block;
  color: var(--cl-h3);
  background-color: var(--cl-wh-20);
  margin: 0px 10px 0px 10px;
  padding: 5px 10px 5px 10px;
  font-weight: bold;
  border-radius: 20px;
}
a.lbtn:hover {
  text-decoration: none;
  background-color: var(--cl-h3);
  color: var(--cl-wh-20);
}
a.lbtn i.fa {
  padding-right: 5px;
  font-size: 1.2em;
  vertical-align: middle;
}
.header {
  background-color: var(--cl-head-back);
  position: fixed;
  z-index: 15;
}
.header .site-logo {
  display: inline-block;
  max-height: 50px;
  margin: 5px;
}

.header .site-name {
  font-size: 2.5em;
  margin: auto;
  font-family: var(--font-heading);
  color: var(--cl-head-fore);
}
img.profile {
  max-height:50px;
  border-radius: 50%;
  border: solid 2px var(--cl-bl-50);
  margin: 5px;
}
div.body {
  position: relative;
  padding-top: 70px;
  min-height: calc(100vh - 90px);
  z-index: 5;
  width: 100%!important;
}
div.body div {
  z-index: 10;
}
.footer
{
  position: relative;
  font-size: 0.8em;
  background-color: var(--cl-footer-light);
  padding-bottom: 20px;
  z-index: 15;
}
.footer a {
  font-weight: 900;
}

.sf-logo {
  color: transparent;
  font: 0/0 a;
  text-shadow: none;
  display: inline-block;
  width: 50px;
  height: 35px;
  text-align: center;
  margin: 0 3px -13px 3px;
  background-image: url("/images/sf-logo.png");
  background-size: 100%;
}
.heroku-logo {
  color: transparent;
  font: 0/0 a;
  text-shadow: none;
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  margin: 0 3px -20px 3px;
  background-image: url("/images/heroku-logo.png");
  background-size: 100%;
}
.sf-logo:hover, .heroku-logo:hover{
  text-decoration: none;
}

.copy-right {
  position: fixed;
  bottom: 0;
  background-color: var(--cl-foot-back);
  color: var(--cl-foot-fore);
  text-align: center;
  padding: 5px 10px 5px 10px;
}

.menu {
  position: absolute;
  display: inline-block;
  z-index: 20;
}
.menu .icon {
  position: fixed;
  display: inline-block;
  width: 40px;
  font-size: 1.5em;
  text-align: center;
  padding: 5px;
  border-radius: 10%;
  margin: 15px 5px 5px 5px;
  background-color: var(--cl-head-back);
}

.menu .icon:hover {
  background-color: var(--cl-head-fore);
  color: var(--cl-head-back);
  cursor: pointer;
}
.menu .menu-option {
  z-index: 20;
  left:-1000px;
  display: flex;
  flex-direction: column;
  position: fixed;
  padding: 5px 10px 5px 10px;
  width: 25%;
  margin: 60px 0px 0px 0px;
  border-bottom-right-radius: 10px;
  height: calc((100vh) - 70px);
  background-color: var(--cl-head-back);
}
.menu .menu-option ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu .menu-option li {
  margin: 0;
  padding: 0;
  border-bottom: solid 1px var(--cl-bl-70);
}
.menu .menu-option li a {
  display: block;
  padding: 10px 10px 10px 10px;
}
.menu .menu-option li.active {
  font-weight: bold;
  border-bottom-width: 2px;
}
.menu .menu-option li a:hover {
  background-color: var(--cl-head-fore);
  color: var(--cl-head-back);
  text-decoration: none;
}
.menu .menu-option a i {
  font-size: 1.2em;
  margin: 0px 10px 0px 0px;
}
.powered {
  display: block;
  border-top: solid 1px var(--cl-bl-70);
  width: 100%;
  text-align: center;
  margin-top: auto!important;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  color: var(--cl-bl-40);
}
/*Utility Classes*/
.h-100 {
  height: 100vh;
}
.w-100 {
  width:100%;
}
.w-150 {
  width:150%;
}
.w-120 {
  width:120%;
}
.h-75 {
  height: 75vh;
}
.h-50 {
  height: 50vh;
}
.pad {
  padding-left:var(--pad);
  padding-right:var(--pad);
}
.pad0 {
  padding: 0 !important;
}
.marg0 {
  margin: 0;
}
.pad0 {
  padding: 0;
}
.pad10 {
  padding-left: 10px;
  padding-right: 10px;
}
.pad20 {
  padding-left: 20px;
  padding-right: 20px;
}
.pad40 {
  padding-left: 40px;
  padding-right: 40px;
}
.mar20 {
  margin-left: 20px;
  margin-right: 20px;
}
.border {
  border: solid 1px var(--cl-gr-90);
}
.c {
  text-align: center;
}
.r {
  text-align: right;
}
.red {
  color: var(--cl-rd-60);
}
.small {
  font-size: 0.8em;
}
ul.link {
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul.link a {
  color: var(--cl-gr-30);
  padding: 10px;
}
ul.link a:hover {
  color: var(--cl-gr-20);
}
ul.social a {
  font-size: 3em;
  color: var(--cl-gr-60);
  padding: 10px;
}
ul.social a:hover {
  color: var(--cl-h2);
}
ul.normal {
  list-style: disc;
  margin-left: 30px;;
}
.tile {
  margin: 10px;
  padding: 20px;
  display: inline-block;
  vertical-align: top;
  border-radius:10px;
  background-color: var(--cl-wh);
  box-shadow: 0 2px 8px -2px hsla(0,0%,9%,.08), 0 8px 12px -2px hsla(0,0%,9%,.16);
}
.tile-chart {
  margin: 10px;
  padding: 20px;
  border-radius:10px;
  background-color: var(--cl-wh);
  box-shadow: 0 2px 8px -2px hsla(0,0%,9%,.08), 0 8px 12px -2px hsla(0,0%,9%,.16);
}
.bg-cover {
  position: absolute;
  left: 0;
  top:0;
  background-color: black;
  opacity: 50%;
  width: 100%;
  height: 100vh;
  z-index: 7;
}
div.body .bg {
  position: absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(2px);
  -webkit-filter: blur(2px);
  z-index: 7;
}
div.body .bg-partner {
  background-image: url("/images/bg-partnership.jpeg");
}
div.body .bg-customer {
  background-image: url("/images/bg-customer.jpeg");
}
*[data-tool-tip] {
  position: relative;
}

  *[data-tool-tip]::after {
      content: attr(data-tool-tip);
      position: absolute;
      bottom: 0;
      left: 15px;
      display: inline-block;
      background-color: var(--cl-yl-70);
      color: black;
      font-size: 0.9em;
      padding: 5px 15px 5px 15px;
      border-radius: 5px;
      transform: scale(0);
      transition: transform ease-out 150ms, bottom ease-out 150ms;
  }

  *[data-tool-tip].show::after, *[data-tool-tip]:hover::after {
      transform: scale(1);
      bottom: 100%;
  }
.data-val-msg {
  position: absolute;
  top:initial;
  left: 15px;
  max-width:90%;
  margin-top: 50px;
  display: inline-block;
  background-color: #EF3342;
  color: white;
  font-size: 0.9em;
  padding: 5px 15px 5px 15px;
  border-radius: 5px;
  transform: scale(0);
  transition: transform ease-out 150ms, bottom ease-out 150ms;
}

  .data-val-msg.show {
      transform: scale(1);
      -webkit-transform: scale(1);
  }
  .banner {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 20;
    background-color: white;
    color: var(-cl-h1);
    box-shadow: 0 0 5px var(--cl-h2);
    padding: 20px;
    width: auto;
    min-width: 40%;
    max-width: 50%;
    line-height: 180%;
}
.banner .fa-window-close {
    font-size: 2em;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    color: var(--cl-gr-30);
}

    .banner .fa-window-close:hover {
        color: var(--cl-h2);
    }

.banner .head {
    font-size: 1.5em;
    font-weight: bold;
    display: block;
    padding-bottom: 5px;
    margin-bottom: 10px;
    color: var(--cl-h2);
    border-bottom: 2px solid var(--cl-h2);
}

.banner .content {
    max-height: 75vh;
    overflow-y: none;
}

.banner ul, .list-border {
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: error;
}

.banner li, .list-border li {
    border-bottom: solid 1px var(--cl-gr-90);
    padding: 5px 5px 5px 5px;
    margin-bottom: 2px;
}

    .banner li:before {
        counter-increment: error;
        content: counter(error);
        font-weight: bold;
        display: inline-block;
        height: 30px;
        width: 30px;
        text-align: center;
        padding-top: 3px;
        margin-right: 5px;
        border-radius: 2px;
        background-color: var(--cl-h2);
        color: var(--cl-wh);
    }

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:var(--cl-gr-60);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  top:2px;
  left:2px;
  background-color: var(--cl-wh);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--cl-gn-60);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--cl-gr-90);
}

input:checked + .slider:before {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}

.slider.round {
  border-radius: 30px;
}

.slider.round:before {
  border-radius: 50%;
}
/*Utility Classes*/

/*Bootstrap Overrides*/
.container-fluid {
  padding-left: 0;
  padding-right: 0;
}
.form .row > div {
  padding-top: 5px;
  padding-bottom: 5px;
  vertical-align: middle;
  border-bottom: solid 1px #dee2e6;
}
.form .fa-star {
  font-size: .6em;
  vertical-align:top;
  margin-right: 2px;
  margin-left: 2px;
}
.form-label {
  display: inline-block;
  font-size: inherit;
  font-weight: bold;
  margin-bottom: 5px;
  color: var(--cl-h1);
}
.form-control, .form-select {
  font-size: inherit;
  display: inline-block;
  width: 100%;
  border-color: var(--cl-gr-90);
}
.form-control:focus {
  box-shadow: 0 0 5px var(--cl-bl-60);
}

.form-control.is-invalid {
    box-shadow: 0 0 5px var(--cl-rd-60);
}

.form-control.is-valid:focus {
    box-shadow: 0 0 5px var(--cl-gn-60);
}
.input-group-text {
  font:inherit;
  background-color: var(--cl-bl-80);
}
.input-group-text.dir {
  cursor: pointer;
}
.btn {
  padding: 8px 25px 8px 25px;
  margin: 10px;
}
.btn .fa {
  padding-right: 10px;
}

.nav-tabs .nav-link {
  border-color: var(--cl-gr-90);
  color: var(--cl-h3);
  font-weight: bold;
}

  .nav-tabs .nav-link:not(.active) {
      background-color: var(--cl-wh-20);
  }
.nav-tabs .nav-link:hover {
  text-decoration: none;
}
.panel{
  border:solid 1px var(--cl-gr-90);
  border-radius: var(--bs-border-radius);
  padding: 10px;
}
.tab-content {
  border:solid 1px var(--cl-gr-90);
  border-bottom-left-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
  border-top: none;
  padding: 10px;
}
table.grid {
  min-width:100%;
  border:solid 1px var(--cl-gr-90);
  padding-bottom: 10px;
}
table.grid td, table.grid th {
  padding: 4px 5px 4px 5px;
}
table.grid thead {
  font-size: 0.8rem;
  background-color: var(--cl-bl-80);
}
table.grid tbody tr {
  font-size: 0.8rem;
  border:solid 1px var(--cl-gr-90);
}
table.grid tbody tr:has(> td.s-w) {
  background-color: var(--cl-yl-80);
}
table.grid tbody tr:has(> td.s-d) {
  background-color: var(--cl-wh-20);
}
table.grid tbody tr:has(> td.s-q) {
  background-color: var(--cl-gn-70);
}
table.grid tbody tr:has(> td.s-o) {
  background-color: var(--cl-yl-70);
}
table.grid tbody tr:has(> td.s-c) {
  background-color: var(--cl-or-70);
}
table.grid tbody tr:has(> td.s-b) {
  background-color: var(--cl-bl-80);
}
table.grid tbody tr:has(> td.s-gr) {
  background-color: var(--cl-wh-20);
}
/*Bootstrap Overrides*/

@media (max-width: 992px) {
  .header .site-logo {
    max-height: 35px;
  }
  .header .site-name {
    display: none;
  }
  img.profile {
    max-height:35px;
    margin: 5px 0px 5px 5px;
  }
  .menu .icon {
    margin-top: 5px;
  }
  .menu .menu-option {
    margin-top: 45px;
    width: 50%;
  }
  div.body {
    padding-top: 60px;
    min-height: calc(100vh - 200px);
  }
  .banner {
    max-width: 60%;
    min-width: 60%;
}
}
@media (max-width: 768px) {
  .menu .menu-option {
    width: 100%;
  }
  .footer{
    padding-bottom: 40px;
  }
  .banner {
      max-width: 100%;
      min-width: 100%;
  }
}
.slds-listbox {
  z-index: 25!important;
}
.hidden{
  display: none;
}