@import url(colors.css);

body{
    font-weight: 300;
}
.navbar .fas, .navbar .nav-item a {
    color: #fff !important;
}
.home-hero {
    height: 100%;
}

/* misc */
.pointer {
    cursor: pointer;
}
.pointer-help {
    cursor: help;
}
.hint-badge {
  position: absolute; right: 10px; top: 10px;
}
.hint-badge-left {
  position: absolute; left: 10px; top: 10px;
}
.top-hit-badge-left {
    position: absolute;
    left: 10px;
    top: -10px;
}

/* text sizes */
.text-medium {
  font-size: 85%;
}
.text-small {
  font-size: 70%;
}
.text-tiny {
  font-size: 55%;
}

/* bg colors */
.background-radial-gradient {
    background-color: hsl(218, 41%, 15%);
    background-image: radial-gradient(650px circle at 0% 0%,
        hsl(218, 41%, 35%) 15%,
        hsl(218, 41%, 30%) 35%,
        hsl(218, 41%, 20%) 75%,
        hsl(218, 41%, 19%) 80%,
        transparent 100%),
      radial-gradient(1250px circle at 100% 100%,
        hsl(218, 41%, 45%) 15%,
        hsl(218, 41%, 30%) 35%,
        hsl(218, 41%, 20%) 75%,
        hsl(218, 41%, 19%) 80%,
        transparent 100%);
  }

  #radius-shape-1 {
    height: 220px;
    width: 220px;
    top: -60px;
    left: -130px;
    background: radial-gradient(#44006b, #ad1fff);
    overflow: hidden;
  }

  #radius-shape-2 {
    border-radius: 38% 62% 63% 37% / 70% 33% 67% 30%;
    bottom: -60px;
    right: -110px;
    width: 300px;
    height: 300px;
    background: radial-gradient(#44006b, #ad1fff);
    overflow: hidden;
  }

  .bg-glass {
    background-color: hsla(0, 0%, 100%, 0.9) !important;
    backdrop-filter: saturate(200%) blur(25px);
  }

/* overwrites */
.modal-backdrop.show {
    opacity: .8;
}
.nav-tabs .nav-link{
    color: #b7274b;
    background-color: #fff;
    border-right: 2px solid #eee;
}
.nav-tabs .nav-link .badge {
    background-color: #b7274b;
    color: #fff;
}

.nav-tabs .nav-link.active {
    color: #fff !important;
    background-color: #b7274b !important;
    border-color: #fff;
    border-right: none;
}
.nav-tabs .nav-link.active .badge {
    background-color: #fff;
    color: #b7274b;
}

/* select option icon by default is rounded */
.select-option-icon {
    border-radius: unset !important;
}
/* hide select all option in the multi select dropdown across site */
.select-dropdown-container .select-options-wrapper .select-all-option {
    display: none;
}
/* multi item carousel */
.carousel-control-next-icon:after, .carousel-control-prev-icon:after {
    background-color: #000;
    padding: 4px 8px;
    border-radius: 4px;
}

/* registration form css */
.flipped-image-horizontal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://www.sony-mea.com/image/9a43e66f9f397f868646b27fd4b61cdb?fmt=pjpeg&wid=2000&bgcolor=F1F5F9&bgc=F1F5F9&qlt=85');
    background-size: cover;
    transform: scaleX(-1);
}

/* x-scroll*/
.x-scroll {
    background-color: transparent;
    height:auto;
    overflow-x:auto;
    white-space: nowrap !important;
    display: flow;
}
  .x-scroll .scroll-item {
      background-color:transparent;
      display:inline-block;
      height:100%;
      white-space: normal;
  }
  .x-scroll.scroll-hidden::-webkit-scrollbar {
      width: 0 !important;
      -ms-overflow-style: none !important;
      display: none !important;
  }
  .x-scroll .scroll-item.image-item {
      width: 28%;
  }
.x-scroll-navigator.left-navigator{
  position: absolute;
  left: 20px;
  top: 48%;
  z-index: 1000;
}
.x-scroll-navigator.right-navigator{
  position: absolute;
  right: 20px;
  top: 48%;
  z-index: 1000;
}

/* radio button based toggle */
.radio-switch {
	display: inline-flex;
	overflow: hidden;
}

.radio-switch input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.radio-switch label {
    background-color: #fefefe;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    line-height: normal;
    text-align: center;
    padding: 8px 16px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
}

.radio-switch label:hover {
    cursor: pointer;
    background-color:#ecd0c6;
}

.radio-switch input:checked + label {
    background-color: #f15922;
    color: #fff;
    box-shadow: none;
}

.radio-switch label:first-of-type {
    border-radius: 4px 0 0 4px;
}

.radio-switch label:last-of-type {
    border-radius: 0 4px 4px 0;
}

.danger.lighten-4 {
    background-color: #ffd8d8 !important;
}

/* classroom related */


/* ============ color media queries ========= */
 /* -xs- Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .home-hero {
        height: 70vh;
    }
    .home-hero-text{
        margin-top: -200px;
        z-index: 100;
    }
    .x-scroll .scroll-item.image-item {
      width: 80%;
    }
    .lessons-list {
        max-height: 400px;
        overflow-y: scroll;
    }
    .lessons-list {
        max-height: 400px;
        overflow-y: scroll;
    }
}

 /* -sm- Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
    .home-hero {
        height: 70vh;
    }
    .home-hero-text{
        margin-top: -200px;
        z-index: 100;
    }
    .x-scroll .scroll-item.image-item {
      width: 68%;
    }
    .lessons-list {
        max-height: 400px;
        overflow-y: scroll;
    }
}

 /* -md- Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .x-scroll .scroll-item.image-item {
      width: 48%;
    }
    .lessons-list {
        max-height: 400px;
        overflow-y: scroll;
    }
}

 /* -lg- Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .x-scroll .scroll-item.image-item {
      width: 38%;
    }
    .lessons-list {
        max-height: 400px;
        overflow-y: scroll;
    }

}

 /* -xl- Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .lessons-list {
        max-height: 400px;
        overflow-y: scroll;
    }
}

/* -xxl- Extra Extra Large devices */
@media (min-width: 1400px) {
    .lessons-list {
        max-height: 500px;
        overflow-y: scroll;
    }

}