@import './constants/colors.scss';
@import './components/BreadCrumbs/index.scss';
@import './components/GradeFilter/index.scss';
@import './components/HomeSearchBox/index.scss';
@import './components/Location/index.scss';
@import './components/Navbar/index.scss';
@import './components/NavbarDrawer/NavbarDrawer.scss';
@import './components/Textarea/index.scss';
@import './components/Timer/index.scss';
@import './components/Vocal/Vocal.scss';
@import './views/Auth/index.scss';
@import './views/About/index.scss';
@import './views/Contact/index.scss';
@import './views/Course/index.scss';
@import './views/Courses/index.scss';
@import './views/Faq/index.scss';
@import './views/Home/index.scss';
@import './views/Subscription/index.scss';
@import './views/VideoTube/index.scss';

.submit {
  background-color: $green;
  color: white;
  border-radius: 6px;
  border: 0px;
  font-weight: 300;
}

.mobile,
.desktop {
  display: flex;
}

.bg-black{
  background-color: black !important;
  .MuiFormControl-root {
    color: $gray7 !important;
    label {
      background: black !important;
      color: #b5b5b5;
    }
  }
  .MuiOutlinedInput-notchedOutline {
    border-color: $gray4 !important;
    color: green !important;
  }
  
  .MuiOutlinedInput-input {
    color: $green4 !important;
    &:focus {
      border: 1px solid $green4 !important;
    }
  }
  
  
  .MuiInputLabel-shrink {
    background-color: black !important;
    color: $green4 !important;
  }
  
  .Mui-focused {
    color: rgba(0, 0, 0, 1) !important;
    border-color: $green4 !important;
    color: $green4 !important;
  }

}

.bg-white{
  background-color: white !important;
  .MuiFormControl-root {
    color: $gray7 !important;
    label {
      background: white !important;
      color: #b5b5b5;
    }
  }
  .MuiOutlinedInput-notchedOutline {
    border-color: $green1 !important;
    color: green !important;
    background-color: white;
  }
  
  .MuiOutlinedInput-input {
    color: $gray5 !important;
    &:focus {
      border: 1px solid $green4 !important;
    }
  }
  
  
  .MuiInputLabel-shrink {
    background-color: black !important;
    color: $green4 !important;
  }
  
  .Mui-focused {
    color: rgba(0, 0, 0, 1) !important;
    border-color: $green4 !important;
    color: $green4 !important;
  }
}

p {
  line-height: 1.5;
}

.submit-large {
  padding: 12px 24px;
}

.submit-medium {
  padding: 10px 20px;
}

.submit-small {
  padding: 8px 16px;
}

.rec-arrow-left {
  top: calc(50% - 22px) !important;
  right: -20px !important;
}

.rec-arrow-right {
  top: calc(50% - 22px) !important;
  left: -20px !important;
}

.rec-dot_active {
  background-color: green !important;
  color: white !important;
  // box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important;
}

.Carousel-button-10 {
  background-color: white !important;
}
.rec-pagination {
  z-index: 200;
  // left: calc(50% - 20px) !important;
  & button {
    background-color: white;
    margin: 2px !important;
    box-shadow: 0px 0px 0px rgba(100, 100, 100, 1);
    &:focus {
      box-shadow: 0px 0px 0px rgba(100, 100, 100, 1);
    }
  }
}

.rec-slider-container {
  margin: 0px !important;
}

.rec-arrow {
  position: absolute !important;
  z-index: 100;
  background-color: inherit !important;
  box-shadow: none !important;
  border: 0px !important;
  color: white !important;
  &:focus {
    color: white !important;
  }
  &:disabled {
    color: black !important;
    display: none !important;
  }
  &:enabled {
    color: white !important;
  }
  &:hover {
    color: white;
  }
}

.rec-slider-container {
  border-radius: 10px;
}

.main {
  width: 100%;
  overflow-x: hidden;
  padding-top: 60px;
  min-height: 100vh;
  position: relative;
  padding-bottom: 20px;
  font-family: numeralLight;
  &__light{
    background: white;
  }
  &__dark{
    background : black;
  }
  .footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
  }
  main {
    width: 100%;
    margin: 0px auto;
  }
}

.MuiFormControl-root {
  width: 100%;
  margin: 10px auto !important;
  .MuiSelect-iconOutlined {
    display: none;
  }
  .MuiSelect-outlined.MuiSelect-outlined {
    padding-right: 15px;
  }
  color: $gray7 !important;
}

.MuiSelect-select:focus {
  // background-color: inherit !important;
  // color: #4d4d4d !important;
  border: 1px solid #707070;
}

.MuiMenu-list {
}

//INPUT
.MuiFormControl-root {
  width: 100%;
  margin: 10px auto !important;
  .MuiSelect-iconOutlined {
    display: none;
  }
  .MuiSelect-outlined.MuiSelect-outlined {
    padding-right: 15px;
  }
  color: $gray7 !important;
  label {
    width: fit-content;
    text-align: center;
  }
}
.MuiOutlinedInput-notchedOutline {
  top: 0px !important;
}
.MuiOutlinedInput-notchedOutline {
  border-color: $gray4 !important;
  border-width: 1px !important;
  border-radius: 10px !important;
}

.MuiOutlinedInput-input {
  padding: 15px 14px !important;
  font-family: numeralLight;
  &:focus {
    border-radius: 10px;
    transform: translateY(0px);
    border-radius: 10px !important;
    z-index: 120;
  }
}
.MuiInputLabel-outlined {
  font-family: numeralLight !important;
  display: inline !important;
  position: absolute;
  text-align: right !important;
  right: 15px !important;
  top: 50% !important;
  padding: 0px !important;
  transform: translate(0px, -50%) scale(1) !important;
}
.MuiInputLabel-shrink {
  text-align: center !important;
  display: inline;
  position: absolute;
  right: 0px !important;
  top: -8px !important;
  transform: translate(0px, 0px) scale(0.85) !important;
  padding: 0px 10px !important;
  z-index: 130 !important;
}

.MuiInputBase-input {
  height: auto !important;
}

//SELECT
.MuiMenuItem-root {
  background: #272727 !important;
  border-bottom: 1px solid #707070 !important;
  color: white !important;
  font-size: 14px !important;
  font-family: numeralLight !important;
  padding: 20px !important;
}

.MuiSelect-root {
  font-family: numeralLight !important;
  color: white !important;
}

.MuiOutlinedInput-notchedOutline legend {
  display: none !important;
}

//JOL PLayer
.tooltip {
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}

//Menu
.bg-black{
  .MuiButton-root {
    color: white !important;
  }
}
.MuiButton-root {
  font-family: numeralLight !important;
  span {
    margin-left: 0px !important;
    margin-right: 5px;
  }
}

.MuiPopover-paper{
  transform : translateX(50%) !important;
}

.MuiPaper-root {
  .MuiList-root {
    display: flex !important;
    width: 200px !important;
    flex-wrap: wrap !important;
    li {
      width: 100px;
      display: flex !important;
      justify-content: center !important;
      text-align: center !important;
      padding: 0px !important;
      a{
        color: white;
        width: 100%;
        height: 100%;
        padding: 5px 0px;
      }
      &:nth-child(even) {
        border-right: 1px solid #555 !important;
      }
    }
  }
}


//Toastify
.Toastify{
  *{
    font-family: numeralLight !important;
  }
}

//Loader
.full-loader{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.261);
  position: fixed;
  top: 0px;
  left: 0px;
}

//blur filter
.blur{
  filter: blur(8px);
}


@media screen and (min-width: 1441px) {
  .submit {
    font-size: 16px;
  }
  .main {
    main {
      max-width: 1350px;
    }
  }
  .mobile {
    display: none !important;
  }
  .MuiFormControl-root {
    label {
      font-size: 14px;
    }
  }
  .MuiOutlinedInput-input {
    font-size: 20px;
  }
  .MuiPaper-root {
    .MuiList-root {
      li {
        font-size: 13px !important;
      }
    }
  }
}

@media screen and (min-width: 1008px) and (max-width: 1440px) {
  .submit {
    font-size: calc(100vw / 80);
  }
  .main {
    main {
      max-width: 1250px;
    }
  }
  .mobile {
    display: none !important;
  }
  .MuiFormControl-root {
    label {
      font-size: calc(100vw / 110) !important;
    }
  }

  .MuiPaper-root {
    .MuiList-root {
      width : 160px !important;
      li {
        width : 80px !important;
        font-size: calc(100vw / 110) !important;
      }
    }
  }

  .MuiOutlinedInput-input {
    font-size: calc(100vw / 80) !important;
  }
}

@media screen and (min-width: 641px) and (max-width: 1007px) {
  .main {
    main {
      max-width: 900px;
    }
  }
  .desktop {
    display: none !important;
  }
  .submit-large {
    font-size: calc(100vw / 38) !important;
  }
  .MuiFormControl-root {
    label {
      font-size: calc(100vw / 40) !important;
    }
  }
  .MuiOutlinedInput-input {
    font-size: calc(100vw / 45) !important;
  }
}

@media screen and (max-width: 640px) {
  .main {
    main {
      max-width: 500px;
    }
  }
  .desktop {
    display: none !important;
  }
  .submit {
    font-size: calc(100vw / 25) !important;
  }
  .MuiFormControl-root {
    label {
      font-size: calc(100vw / 30) !important;
    }
  }
  .MuiOutlinedInput-input {
    font-size: calc(100vw / 30) !important;
  }
  .MuiSelect-select {
    line-height: 1.5 !important;
  }
}