:root {
  --main-gradient: linear-gradient(10deg, var(--bs-blue-500), var(--bs-blue-900));
  --main-gradient-reverse: linear-gradient(10deg, var(--bs-blue-900), var(--bs-blue-500));
  --main-logo-gradient: linear-gradient(0deg, rgba(255,160,82,1) 6%, rgba(255,193,7,1) 55%, rgba(255,0,0,1) 97%);
  --audio-gradient: linear-gradient(0deg, white, var(--bs-blue-1000));
  --main-circle-gradient: radial-gradient(circle, var(--bs-blue-500) 0%, var(--bs-blue-900) 100%);
  --main-circle-gradient-dark: radial-gradient(circle, var(--bs-blue-600) 0%, var(--bs-blue-900) 100%);
  --main-gradient-light: linear-gradient(5deg, var(--bs-gray-100) 0%, var(--bs-blue-100) 100%);
  --main-gradient-light-darker: linear-gradient(5deg, var(--bs-gray-200) 0%, var(--bs-blue-200) 100%);
  --main-gradient-dark: linear-gradient(0deg, var(--bs-blue-600), var(--bs-blue-1000));
  --main-gradient-dark-icon: linear-gradient(150deg, var(--bs-blue-600), var(--bs-blue-1000));
  --main-gradient-dark-silver: linear-gradient(180deg, var(--bs-gray-100) 30%, var(--bs-gray-600) 96%);
  --main-gradient-dark-silver-user: linear-gradient(180deg, var(--bs-gray-100) 30%, var(--bs-gray-400) 96%);
  --main-gradient-dark-silver-user-focus: linear-gradient(180deg, var(--bs-gray-100) 10%, var(--bs-gray-500) 100%);
  --main-gradient-silver: linear-gradient(180deg, var(--bs-gray-100) 60%, var(--bs-gray-500) 90%);
  --main-gradient-silver-portrait: radial-gradient(circle, var(--bs-gray-100) 60%, var(--bs-gray-500) 90%);
  --main-gradient-silver-icon: linear-gradient(180deg, var(--bs-gray-300) 0%, var(--bs-gray-600) 50%);
  --main-gradient-light-dark: linear-gradient(15deg, var(--bs-blue-400) 15%, var(--bs-blue-900));
  --main-gradient-hover: linear-gradient(0deg, var(--bs-blue-500), var(--bs-blue-900));
  --main-gradient-progress: linear-gradient(10deg, var(--bs-blue-900), var(--bs-blue-500));
  --footer-gradient: linear-gradient(2deg, var(--bs-blue-300), var(--bs-blue-900));
  --my-silver-gradient-linear: linear-gradient(10deg, var(--bs-blue-900) 2%, rgba(247,247,247,1) 37%, rgba(244,244,244,1) 63%, var(--bs-blue-900) 99%);
  --my-silver-gradient-linear_2: linear-gradient(10deg, var(--bs-gray-200) 5%, var(--bs-blue-800) 50%, var(--bs-gray-200) 95%);
  --my-silver-gradient-linear_3: linear-gradient(10deg, var(--bs-gray-100) 5%, var(--bs-gray-400) 50%, var(--bs-gray-100) 95%);
  --my-silver-gradient-circle_2: radial-gradient(circle, rgba(244,244,244,1) 32%, var(--bs-blue-800) 99%);
  --my-silver-gradient: radial-gradient(circle, white 40%, var(--bs-gray-500) 70%);
  --my-accent-gradient-circle: radial-gradient(circle, rgba(255,49,49,1) 0%, rgba(255,145,77,1) 100%);
  --bestseller-gradient: linear-gradient(45deg, #f8c700, #f87700);
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-my-green: #b7dd00;
  --bs-blue-100: #cfe2ff;
  --bs-blue-200: #9ec5fe;
  --bs-blue-300: #6ea8fe;
  --bs-blue-400: #3d8bfd;
  --bs-blue-500: #0d6efd;
  --bs-blue-600: #0a58ca;
  --bs-blue-700: #084298;
  --bs-blue-800: #052c65;
  --bs-blue-900: #031633;
  --bs-blue-1000: #000a1a;
  --bs-orange-accent: #FF9B00;
  --bs-yellow-500: #cacd1e;
  --bs-red-500: #dc3545;
  --bs-my-yellow: #ffc107;
  --bs-orange-course: #f28841;
}

@font-face {
  font-family: "Italianno-Regular";
  src: local("Italianno-Regular"), url("../fonts/Italianno-Regular.ttf") format("truetype");
}
.font-kanit {
  font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

i {
  color: var(--bs-my-yellow);
}
i.color-inherit {
  color: inherit !important;
}

i.title-icon {
  font-size: xx-large;
  background: inherit;
  background-image: var(--main-gradient-dark-silver);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

i.silver-icon {
  background: inherit;
  background-image: var(--main-gradient-silver-icon);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

i.user-icon {
  background: inherit;
  background-image: var(--main-gradient-dark-icon);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

i.logout-icon {
  color: var(--bs-blue-800);
  transition: color 500ms linear;
  color: lightgrey;
}

audio {
  border-radius: 10px;
}

@media (orientation: portrait) {
  html {
    scroll-padding-top: 5.6rem;
  }
}

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-gray-200);
  --bs-tooltip-color: var(--bs-blue-900);
}

.bold {
  font-weight: bold;
}

.bg-white {
  background: white !important;
}

.bg-silver {
  background: var(--my-silver-gradient-linear) !important;
}

.bg-silver2 {
  background: var(--my-silver-gradient-linear_2) !important;
}

.bg-navy {
  background: var(--main-gradient);
}

.bg-blue-800 {
  background: var(--bs-blue-800);
}

.bg-navy-circle {
  background: var(--main-circle-gradient);
}

.bg-navy-0dg {
  background: var(--main-gradient-progress);
}

.bg-offcanvas {
  background: linear-gradient(10deg, var(--bs-blue-900), var(--bs-blue-600));
}

.bg-navy-dark {
  background: var(--bs-blue-900);
}

.bg-basket {
  background: var(--bs-gray-700);
}

.bg-gray {
  background: var(--bs-gray-500);
}

.bg-bestseller {
  background: var(--bestseller-gradient);
}

.border-navy {
  border: 1px solid var(--bs-blue-800);
  box-shadow: 6px 6px 8px var(--bs-gray-400);
}

.standard-shadow {
  box-shadow: 6px 6px 8px var(--bs-gray-400);
}

.deep-shadow {
  box-shadow: 10px 10px 15px var(--bs-gray-500);
}

.standard-border {
  border: 1px solid var(--bs-blue-800);
}

.blue-600 {
  color: var(--bs-blue-700) !important;
}
.blue-600:hover {
  color: var(--bs-blue-900) !important;
}

body {
  min-height: 100vh;
  background-color: white;
}
body a {
  text-decoration: none !important;
  color: inherit;
}

section {
  background: white;
}

.signature {
  font-family: Italianno-Regular, serif;
  font-size: 2.5rem;
  padding-right: 1.5rem;
}
@media (orientation: portrait) {
  .signature {
    padding-right: 1rem;
  }
}

#mainNav a.navbar-brand.fw-bold {
  color: var(--bs-blue-800);
}
#mainNav a.navbar-brand.fw-bold:hover {
  color: var(--bs-blue-700);
}

#itemTab button {
  color: var(--bs-blue-800);
}
#itemTab button:hover {
  color: var(--bs-blue-700);
}

.text-logo-gradient {
  background: inherit;
  background-image: var(--main-logo-gradient);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.text-gradient-silver {
  background: inherit;
  background-image: var(--main-gradient-silver);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.text-gradient-color {
  background: inherit;
  background-image: var(--main-gradient);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.text-gradient-color-circle {
  background: inherit;
  background-image: var(--main-circle-gradient);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.text-gradient-color-dark {
  background: inherit;
  background-image: var(--main-gradient-dark);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.text-gradient-light-dark {
  background: inherit;
  background-image: var(--main-gradient-light-dark);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

#text-footer-gradient-color {
  color: var(--bs-blue-700);
  font-weight: bold;
}
#text-footer-gradient-color:hover {
  color: var(--bs-blue-900) !important;
}
@media (orientation: portrait) and (max-width: 400px) {
  #text-footer-gradient-color {
    font-size: 1.5rem;
  }
}
@media (orientation: portrait) and (max-width: 400px) and (max-width: 340px) {
  #text-footer-gradient-color {
    font-size: 1.2rem;
  }
}

.text-main {
  color: var(--bs-blue-800);
}
.text-main:hover {
  color: var(--bs-blue-700);
}

.text-my-primary {
  color: var(--bs-blue-800);
}

a.text-my-primary:hover {
  color: var(--bs-blue-600) !important;
}

a.standard-link:hover {
  color: var(--bs-blue-700) !important;
}

a.underline-link:hover {
  text-decoration: underline !important;
}

.text-my-primary-dark {
  color: var(--bs-blue-900);
}

.text-my-accent {
  color: var(--bs-blue-400);
}

.text-light-blue {
  color: var(--bs-blue-400);
}

.text-blue-700 {
  color: var(--bs-blue-700);
}

.text-muted {
  color: var(--bs-gray-200);
}

.text-gray {
  color: var(--bs-gray-400) !important;
}

.text-gray-dark {
  color: var(--bs-gray-700);
}

.text-dark-gray {
  color: var(--bs-gray-600);
}

.text-title-header {
  color: var(--bs-blue-800);
}

.kanit-font {
  font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

a.btn.btn-outline-dark.rounded-pill {
  background: var(--main-circle-gradient);
  border: none;
  color: white;
}
a.btn.btn-outline-dark.rounded-pill:hover {
  background: var(--main-gradient-hover);
}

.text-light-gray {
  color: var(--bs-gray-500);
}

section.cta {
  background-color: var(--bs-gray-100) !important;
}

ul.dropdown-menu.flag-item {
  min-width: 8.5rem;
}
ul.dropdown-menu.show {
  border: 1px solid var(--bs-blue-800);
}
@media (orientation: portrait) {
  ul.dropdown-menu.show {
    border: none;
  }
}
@media (max-width: 991px) {
  ul.dropdown-menu.show {
    border: none;
  }
}
ul.dropdown-menu.flag {
  min-width: 5rem;
}
ul.dropdown-menu a.dropdown-item {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 1px solid transparent;
  padding-right: 24px;
  background: transparent;
}
ul.dropdown-menu a.dropdown-item.section-title {
  color: var(--bs-blue-900);
}
ul.dropdown-menu a.dropdown-item.section-title:hover {
  color: var(--bs-blue-700);
}
ul.dropdown-menu a.dropdown-item:hover {
  color: var(--bs-blue-700);
}
ul.dropdown-menu a.dropdown-item:hover span {
  color: black;
}

button.btn.dropdown-toggle.menu-dropdown-btn {
  border: none;
  margin-top: 2px;
  padding-left: 0;
  color: var(--bs-blue-900);
}
button.btn.dropdown-toggle.menu-dropdown-btn:hover {
  color: var(--bs-blue-700);
}
button.btn.dropdown-toggle.menu-dropdown-btn:focus {
  border: none;
  box-shadow: none;
}
button.btn.dropdown-toggle.menu-dropdown-btn:active {
  border: none;
}

h1.fw-bolder {
  font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  user-select: none;
}

.lead.fw-normal {
  user-select: none;
}

div.contact-form-div input {
  width: 50%;
  border: 1px solid var(--bs-blue-800);
  border-radius: 5px;
  box-shadow: 10px 10px 15px var(--bs-gray-500);
  color: var(--bs-blue-800);
}
@media (orientation: portrait) {
  div.contact-form-div input {
    width: 80%;
  }
}
div.contact-form-div textarea {
  width: 50%;
  border: 1px solid var(--bs-blue-800);
  border-radius: 5px;
  box-shadow: 10px 10px 15px var(--bs-gray-500);
  color: var(--bs-blue-800);
}
@media (orientation: portrait) {
  div.contact-form-div textarea {
    width: 80%;
  }
}

@media (orientation: portrait) {
  .hide-on-small-devices {
    display: none !important;
  }
}
@media (max-width: 1200px) {
  .hide-on-small-devices {
    display: none !important;
  }
}

@media (orientation: portrait) {
  .logout-list-item {
    margin-bottom: 0.5rem !important;
  }
}
@media (max-width: 991px) {
  .logout-list-item {
    margin-bottom: 0.5rem !important;
  }
}

.tiny-mce-text-div img {
  max-width: 100%;
  border: 1px solid var(--bs-gray-400);
  box-shadow: 5px 5px 14px var(--bs-gray-600);
  margin-top: -0.8rem;
  margin-bottom: 1.3rem;
  border-radius: 5px;
}
.tiny-mce-text-div span {
  color: var(--bs-blue-800) !important;
  font-size: small !important;
  margin-bottom: 0.2rem;
}
.tiny-mce-text-div a:hover {
  color: var(--bs-blue-700) !important;
}
.tiny-mce-text-div a.try-again:hover {
  color: white !important;
}
.tiny-mce-text-div a.try-again:visited {
  color: white !important;
}
.tiny-mce-text-div table {
  border: none !important;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

div.lessons-container {
  padding-bottom: 0;
  border: 1px solid var(--bs-blue-800);
  border-radius: 10px;
}

.lesson-link-row {
  padding: 0.3rem;
  padding-right: 0;
  color: var(--bs-blue-800);
}
@media (orientation: portrait) {
  .lesson-link-row {
    padding-left: 0.8rem;
  }
}
@media (min-width: 768px) {
  .lesson-link-row {
    padding-left: 1.2rem;
  }
}
@media (min-width: 1400px) {
  .lesson-link-row {
    padding-left: 2rem;
  }
}
@media (min-width: 992px) {
  .lesson-link-row {
    font-size: 1.2rem;
  }
}
.lesson-link-row span {
  font-size: 0.9rem !important;
  color: var(--bs-blue-800);
}
.lesson-link-row:hover {
  color: var(--bs-blue-600) !important;
}
.lesson-link-row:hover span {
  letter-spacing: normal;
}

.footer-link {
  font-size: small;
}
.footer-link:hover {
  text-decoration: underline !important;
  color: var(--bs-blue-1000);
}

@media (orientation: portrait) {
  .mobile-margin-basket {
    margin-top: 1.4rem !important;
  }
}
@media (max-width: 1399px) {
  .mobile-margin-basket {
    margin-top: 1.4rem !important;
  }
}

@media (orientation: portrait) {
  .mobile-margin-top {
    margin-top: 0.8rem !important;
  }
}
@media (max-width: 1399px) {
  .mobile-margin-top {
    margin-top: 0.8rem !important;
  }
}

@media (orientation: portrait) {
  .mobile-more-spread {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
}
@media (max-width: 1399px) {
  .mobile-more-spread {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
}

div.progress.div-for-progress-bar {
  background: white;
  border: 1px solid white;
  margin: auto;
  width: 50%;
}
@media (orientation: portrait) {
  div.progress.div-for-progress-bar {
    width: 100%;
  }
}

.progress-section {
  background: white;
  padding-top: 0 !important;
}

.duration-section {
  background: white;
  padding: 1rem;
}

@media (orientation: portrait) {
  .hide-on-mobile {
    display: none;
  }
}

#offcanvasNavbar {
  width: 100%;
  border: none;
}
@media (orientation: portrait) {
  #offcanvasNavbar {
    width: 100%;
  }
}
@media (min-width: 576px) {
  #offcanvasNavbar {
    width: 60%;
  }
}

#basket-course-name {
  font-family: var(--bs-body-font-family);
}

@media (orientation: portrait) {
  a.btn.btn-outline-dark.mt-5.py-3.px-4.rounded-pill {
    margin-bottom: 3rem;
    margin-top: 3rem;
  }
}

.btn-group.media-choice {
  background: var(--bs-my-yellow);
  border-radius: 50rem;
}
.btn-group.media-choice a {
  border-radius: 50rem;
}
.btn-group.media-choice a:hover {
  background: var(--bs-blue-900);
}

.btn-group.excercise-div {
  background: var(--bs-my-yellow);
  border-radius: 50rem;
}
.btn-group.excercise-div a {
  border-radius: 50rem;
}
.btn-group.excercise-div a:hover {
  background: var(--bs-blue-800);
  color: white !important;
}
.btn-group.excercise-div a:hover i {
  color: var(--bs-my-yellow) !important;
  transition: color 500ms linear;
}
.btn-group.excercise-div button {
  color: white;
  border-radius: 50rem;
}
.btn-group.excercise-div button:hover {
  background: var(--main-circle-gradient);
}

.login-link {
  color: var(--bs-blue-800);
  font-weight: 600;
}
.login-link:hover {
  color: var(--bs-blue-600);
}

a.chosen-learning-type {
  background: var(--bs-blue-800);
  color: white;
  border-bottom: 1px solid transparent;
}
a.chosen-learning-type:hover {
  background: var(--bs-blue-800) !important;
}

.lesson-audio-div {
  border-top: 1px solid var(--bs-gray-400);
  width: 50%;
}
@media (orientation: portrait) {
  .lesson-audio-div {
    width: 90%;
    padding-left: 5px !important;
    padding-rigth: 5px !important;
    padding: auto;
  }
}

.lesson-audio-div-hr {
  width: 50%;
  background: var(--bs-gray-400);
  height: 1px;
  margin: auto;
}
@media (orientation: portrait) {
  .lesson-audio-div-hr {
    width: 90%;
  }
}

.footer-div-hr {
  width: 50%;
  background: var(--my-silver-gradient-linear_3);
  height: 1px;
  margin: auto;
}
@media (orientation: portrait) {
  .footer-div-hr {
    width: 90%;
  }
}

.item-div-hr {
  width: 70%;
  background: var(--my-silver-gradient-linear_2);
  height: 1px;
  margin: auto;
}

.lesson-video-div-50-100 {
  width: 100% !important;
}
@media (orientation: portrait) {
  .lesson-video-div-50-100 {
    width: 100% !important;
  }
}
.lesson-video-div-50-100 video {
  border-radius: 5px;
  box-shadow: 12px 12px 12px var(--bs-gray-600);
}

.hr-div-50-80 {
  width: 50% !important;
  background: var(--bs-gray-400);
  height: 1px;
  margin: auto;
}
@media (orientation: portrait) {
  .hr-div-50-80 {
    width: 80% !important;
  }
}

p.lessons-navigation-p {
  font-size: large;
}
@media (orientation: portrait) {
  p.lessons-navigation-p {
    font-size: medium;
  }
}

.header-div-main-type {
  padding-top: 2rem;
  padding-bottom: 2.2rem;
  margin-top: 5.6rem;
}
@media (min-width: 1400px) {
  .header-div-main-type {
    margin-top: 5rem;
  }
}

.header-div-middle-type {
  padding-top: 2.3rem;
  padding-bottom: 2.2rem;
}

.header-div-lesson-type {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
  margin-top: 5.6rem;
}
@media (min-width: 1400px) {
  .header-div-lesson-type {
    margin-top: 5rem;
  }
}

.header-div-excercise-type {
  padding-top: 4rem;
  padding-bottom: 0;
  margin-top: 5.6rem;
}
@media (orientation: landscape) and (max-height: 562px) {
  .header-div-excercise-type {
    padding-top: 0rem;
  }
}
@media (min-width: 1400px) {
  .header-div-excercise-type {
    margin-top: 5rem;
  }
}

.header-div-lesson-type-video {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

.excercise-img {
  position: absolute;
  top: 0;
  left: 0;
  max-height: 100%;
  border-radius: 5px 0 0 5px !important;
  box-shadow: none !important;
  border: none !important;
}

.excercise-img-example {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.8rem !important;
}

.excercise-img-background {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.8rem !important;
}

.pointer:hover {
  cursor: pointer;
}

.wrong-click-img {
  display: none;
  height: auto;
  position: absolute;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 1px solid var(--bs-gray-100) !important;
  background: var(--bs-gray-100);
  border-radius: 50% !important;
}

.audio-icon-element {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 40px;
  height: auto;
  opacity: 0.3;
}

#excercise-reset-button {
  background: var(--main-gradient);
}
#excercise-reset-button:hover {
  background: var(--main-circle-gradient);
}

.excercises-settings-input-div select {
  border-radius: 50px;
  width: 50%;
  border: 1px solid var(--bs-blue-800);
  padding: 0.3rem 1rem 0.3rem 1rem;
}
@media (orientation: portrait) {
  .excercises-settings-input-div select {
    width: 100%;
  }
}

a.lesson-11-anchor:hover {
  color: inherit;
}

.form-select {
  border: 1px solid var(--bs-blue-800) !important;
}
.form-select:focus {
  border-color: var(--bs-gray-400) !important;
  box-shadow: 0.2rem 0.2rem 0.5rem var(--bs-gray-400), -0.2rem -0.2rem 0.5rem var(--bs-gray-400) !important;
}

.section-with-lesson-content {
  padding-top: 1.4rem;
  padding-bottom: 2rem;
}

.audio-sticky {
  top: 5.7rem;
  opacity: 0.6 !important;
}
.audio-sticky.stopped {
  opacity: 1 !important;
}

#text-section-excercises {
  margin-bottom: 8rem !important;
}

.fade-in {
  transition: opacity 2.3s ease-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-out {
  opacity: 1;
}
.fade-out.animate {
  opacity: 0.2;
  transition: opacity 1.5s linear;
}

/* HTML: <div class="loader"></div> */
.loader-excercise {
  width: 30%;
  height: 1.5rem;
  border-radius: 20px;
  color: var(--bs-blue-1000);
  border: 2px solid;
  position: relative;
  margin: auto;
}
@media (orientation: portrait) {
  .loader-excercise {
    width: 60%;
  }
}

.loader-excercise::before {
  content: "";
  position: absolute;
  margin: 2px;
  inset: 0 100% 0 0;
  border-radius: inherit;
  background: var(--main-circle-gradient);
  animation: l6 14s;
}

@keyframes l6 {
  100% {
    inset: 0;
  }
}
a.finish-excercises:hover {
  color: var(--bs-blue-900) !important;
}
a.finish-excercises:hover i {
  color: red !important;
}

.form-select {
  color: var(--bs-blue-900);
}

img.shop-image {
  max-width: 70%;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
img.shop-image.basket {
  position: absolute;
  top: 50%;
  left: 3rem;
  max-height: 40%;
  transform: translateY(-50%);
  margin: auto;
}

img.flag {
  max-width: 20px;
  border: 1px solid var(--bs-gray-500);
  border-radius: 2px;
}

div.next-lesson {
  margin-top: 2rem !important;
  text-align: center !important;
  padding-top: 1rem !important;
}

.video-frame {
  width: 65%;
  height: auto;
}
@media (orientation: portrait) {
  .video-frame {
    width: 100%;
  }
}

.black-border {
  border: 1px solid black;
}

.carousel-caption {
  color: var(--bs-blue-800);
  top: 50%;
  overflow: auto;
  min-height: 200px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.carousel {
  margin-top: 50px;
  background: inherit;
  border-radius: 10px;
  white-space: wrap;
}

.carousel-inner {
  min-height: 200px;
}

.data-acc {
  width: 100%;
  margin: auto;
  border-radius: 10px;
}
@media (min-width: 768px) {
  .data-acc {
    width: 70%;
  }
}
@media (min-width: 991px) {
  .data-acc {
    width: 65%;
  }
}
@media (min-width: 1081px) {
  .data-acc {
    width: 60%;
  }
}

.accordion-h5 {
  color: var(--bs-blue-900);
}
.accordion-h5:hover {
  color: var(--bs-blue-900);
}

.accordion-button {
  background: white;
}
.accordion-button:focus {
  background: white;
  box-shadow: none;
}
.accordion-button:not(.collapsed) {
  background: white;
}

.accordion-item {
  border: 1px solid var(--bs-blue-800);
}
.accordion-item a {
  text-decoration: none;
  color: var(--bs-blue-800);
}
.accordion-item a:hover {
  color: var(--bs-blue-800);
}

.mobile-show {
  display: flex;
  flex-direction: column;
}
@media (min-width: 576px) {
  .mobile-show {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .mobile-hide {
    display: none !important;
  }
}

.edit-user-form {
  width: 100%;
}
@media (min-width: 576px) {
  .edit-user-form {
    width: 90%;
  }
}
@media (min-width: 996px) {
  .edit-user-form {
    width: 70%;
  }
}
@media (min-width: 1200px) {
  .edit-user-form {
    width: 60%;
  }
}
.edit-user-form input {
  color: var(--bs-blue-800);
  font-size: 1rem !important;
}

@media (orientation: portrait) {
  .mobile-hidden {
    display: none;
  }
}

.password-input {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

.form-control-edit:focus {
  box-shadow: 1px 1px 5px var(--bs-blue-700), -1px -1px 5px var(--bs-blue-700);
}

.btn:disabled {
  color: white !important;
}

div.input-group {
  border: 1px solid var(--bs-blue-800);
  border-radius: 0.5rem;
}

img.payment-logo {
  filter: grayscale(90%);
  -webkit-filter: grayscale(90%);
}

@media (orientation: landscape) {
  .hide-on-desktop {
    display: none;
  }
}

div.loader {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  border: 0.8rem solid var(--bs-blue-400);
  border-radius: 50%;
  border-top: 0.8rem solid var(--bs-blue-900);
  width: 3.5rem;
  height: 3.5rem;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*# sourceMappingURL=global.css.map */