/* @tailwind base; */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src:
    url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0')
      format('embedded-opentype'),
    url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
    url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
    url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
    url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular')
      format('svg');
  font-weight: normal;
  font-style: normal;
}

@layer {
  :root {
    --bya: 210 64% 20%; /* #123354 */

    --bya-bg: 210 16.7% 95.3%;
    --bya-blue: 205 100% 35%; /* #0068b3 */
    --bya-blue-lighter: 205 100% 95%; /* #e5f4ff */
    --bya-blue-light: 207 100% 82%; /* #a3d6ff */
    --bya-blue-dark: 205 100% 30%; /* #005999 */
    --bya-blue-darkest: 205 100% 22%; /* #004170 */

    --bya-gray: 0 0% 53%; /* #*/
    --bya-gray-lighter: 0 0% 93%; /* #*/
    --bya-gray-light: 0 0% 87%; /* #*/
    --bya-gray-dark: 0 0% 40%; /* #*/
    --bya-gray-darkest: 0 0% 20%; /* #*/

    --bya-green: 137 52% 34% /* #2a8443*/;
    --bya-green-lighter: 142 57% 96%; /* #effbf3*/
    --bya-green-light: 142 57% 91%; /* #dbf5e5*/
    --bya-green-dark: 142 57% 36%; /* #27904e*/
    --bya-green-darkest: 142 57% 20%; /* #16502b*/

    --bya-red: 358 86% 36%; /* #ab0d12*/
    --bya-red-lighter: 358 86% 98%; /* #fef6f6*/
    --bya-red-light: 358 86% 93%; /* #*/
    --bya-red-dark: 358 86% 38%; /* #*/
    --bya-red-darkest: 358 86% 23%; /* #*/

    --bya-yellow: 49 100% 46%; /* #ebc000 */
    --bya-yellow-lighter: 49 100% 95%; /* #fffae5 */
    --bya-yellow-light: 49 100% 80%; /* #ffec99 */
    --bya-yellow-dark: 49 100% 40%; /* #cca700*/
    --bya-yellow-darkest: 49 100% 27%; /* #8a7000*/

    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: var(--bya);
    --primary-foreground: 210 40% 98%;

    --secondary: var(--bya-blue);
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: var(--bya-blue-lighter);
    --accent-foreground: var(--bya);

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: var(--bya-blue);

    --radius: 0.25rem;
  }

  * {
    --tw-border-opacity: 1;
    border-color: hsla(var(--border) / var(--tw-border-opacity));
  }
  body {
    --tw-bg-opacity: 1;
    background-color: hsla(var(--background) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsla(var(--foreground) / var(--tw-text-opacity));
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
  }
}

.bya-main .static {
  position: static;
}

.bya-main .relative {
  position: relative;
}

.bya-main .col-span-1 {
  grid-column: span 1 / span 1;
}

.bya-main .col-span-10 {
  grid-column: span 10 / span 10;
}

.bya-main .col-span-11 {
  grid-column: span 11 / span 11;
}

.bya-main .col-span-12 {
  grid-column: span 12 / span 12;
}

.bya-main .col-span-2 {
  grid-column: span 2 / span 2;
}

.bya-main .col-span-3 {
  grid-column: span 3 / span 3;
}

.bya-main .col-span-4 {
  grid-column: span 4 / span 4;
}

.bya-main .col-span-5 {
  grid-column: span 5 / span 5;
}

.bya-main .col-span-6 {
  grid-column: span 6 / span 6;
}

.bya-main .col-span-7 {
  grid-column: span 7 / span 7;
}

.bya-main .col-span-8 {
  grid-column: span 8 / span 8;
}

.bya-main .col-span-9 {
  grid-column: span 9 / span 9;
}

.bya-main .col-span-full {
  grid-column: 1 / -1;
}

.bya-main .mb-4 {
  margin-bottom: 1rem;
}

.bya-main .block {
  display: block;
}

.bya-main .flex {
  display: flex;
}

.bya-main .hidden {
  display: none;
}

.bya-main .w-full {
  width: 100%;
}

.bya-main .max-w-96 {
  max-width: 24rem;
}

.bya-main .transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.bya-main .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.bya-main .flex-col {
  flex-direction: column;
}

.bya-main .flex-col-reverse {
  flex-direction: column-reverse;
}

.bya-main .justify-end {
  justify-content: flex-end;
}

.bya-main .gap-1\.5 {
  gap: 0.375rem;
}

.bya-main .gap-2 {
  gap: 0.5rem;
}

.bya-main .gap-4 {
  gap: 1rem;
}

.bya-main .gap-6 {
  gap: 1.5rem;
}

.bya-main .overflow-y-auto {
  overflow-y: auto;
}

.bya-main .border-0 {
  border-width: 0px;
}

.bya-main .bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bya-main .bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

.bya-main .p-0 {
  padding: 0px;
}

.bya-main .p-4 {
  padding: 1rem;
}

.bya-main .px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.bya-main .py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.bya-main .text-bya-green {
  --tw-text-opacity: 1;
  color: hsla(var(--bya-green) / var(--tw-text-opacity));
}

.bya-main .text-bya-yellow {
  --tw-text-opacity: 1;
  color: hsla(var(--bya-yellow) / var(--tw-text-opacity));
}

.bya-main .opacity-0 {
  opacity: 0;
}

.bya-main .opacity-100 {
  opacity: 1;
}

.bya-main .shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.bya-main .transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.bya-main .duration-300 {
  transition-duration: 300ms;
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

.bya-main .duration-300 {
  animation-duration: 300ms;
}

.bya-main .container {
  width: 100%;
}

@media (min-width: 640px) {
  .bya-main .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .bya-main .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .bya-main .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .bya-main .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .bya-main .container {
    max-width: 1536px;
  }
}

.bya-main .hover\:transition-colors:hover {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.bya-main .focus\:ring-bya-red:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: hsla(var(--bya-red) / var(--tw-ring-opacity));
}

@media (min-width: 640px) {
  .bya-main .sm\:p-0 {
    padding: 0px;
  }
}

@media (min-width: 1024px) {
  .bya-main .lg\:max-h-\[600px\] {
    max-height: 600px;
  }
}

@media (min-width: 1024px) {
  .bya-main .lg\:p-0 {
    padding: 0px;
  }
}

@media (min-width: 1280px) {
  .bya-main .xl\:col-span-3 {
    grid-column: span 3 / span 3;
  }
}

@media (min-width: 1280px) {
  .bya-main .xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }
}

@media (min-width: 1280px) {
  .bya-main .xl\:\!grid {
    display: grid !important;
  }
}

@media (min-width: 1280px) {
  .bya-main .xl\:grid {
    display: grid;
  }
}

@media (min-width: 1280px) {
  .bya-main .xl\:\!grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  .bya-main .xl\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .bya-main .xl\:flex-col {
    flex-direction: column;
  }
}
.bya-app > .bya-classroom,
.bya-app > .bya-course-booking,
.bya-app > .bya-case-reporting,
.bya-app > .bya-communication {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.bya-legacy,
#app {
  width: 100%;
}
.bya-legacy h1, #app h1 {
  font-family: dax;
}
.bya-legacy h1, #app h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.bya-legacy h2, #app h2 {
  font-family: dax;
}
.bya-legacy h2, #app h2 {
  font-size: 1.5rem;
  line-height: 2rem;
}
/* .tab-content {
   @apply shadow-md rounded-md;
} */
.bya-legacy .course-description.white-padding, #app .course-description.white-padding {
  border-radius: 0.375rem;
}
.bya-legacy .course-description.white-padding, #app .course-description.white-padding {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.bya-legacy .bya-panel, #app .bya-panel {
    box-shadow:
      0 4px 6px -1px rgb(0 0 0 / 0.1),
      0 2px 4px -2px rgb(0 0 0 / 0.1);
    border-radius: 0.375rem;
    background-color: white;
    padding: 1rem;
  }
.bya-legacy .btn-small, #app .btn-small {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
.bya-legacy .btn-primary, #app .btn-primary {
    /* @apply bg-bya-blue text-sm rounded font-normal transition-colors; */
    background-color: #0068b3;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    transition-property: color, background-color, border-color,
      text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    font-weight: 400;
    line-height: 1.25rem;
  }
.bya-legacy .btn-primary:hover, #app .btn-primary:hover {
      background-color: #004170;
    }
.bya-legacy .btn-primary:disabled, #app .btn-primary:disabled {
      color: #878787;
      background-color: #dedede;
    }
.bya-legacy .btn-primary:disabled:hover, #app .btn-primary:disabled:hover {
        color: #878787;
        background-color: #dedede;
      }
.bya-legacy .btn-secondary, #app .btn-secondary {
  border-radius: 0.25rem;
}
.bya-legacy .btn-secondary, #app .btn-secondary {
  border-width: 2px;
}
.bya-legacy .btn-secondary, #app .btn-secondary {
  --tw-border-opacity: 1;
  border-color: hsla(var(--bya-blue) / var(--tw-border-opacity));
}
.bya-legacy .btn-secondary, #app .btn-secondary {
  padding-left: 1rem;
  padding-right: 1rem;
}
.bya-legacy .btn-secondary, #app .btn-secondary {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.bya-legacy .btn-secondary, #app .btn-secondary {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.bya-legacy .btn-secondary, #app .btn-secondary {
  font-weight: 400;
}
.bya-legacy .btn-secondary, #app .btn-secondary {
  --tw-text-opacity: 1;
  color: hsla(var(--bya-blue) / var(--tw-text-opacity));
}
.bya-legacy .btn-secondary, #app .btn-secondary {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.bya-legacy .btn-secondary:hover, #app .btn-secondary:hover {
      background-color: #0068b3;
      color: white;
    }
.bya-legacy .padding-col, #app .padding-col {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
.bya-legacy .faq-distance-course-form .faq-group, #app .faq-distance-course-form .faq-group {
    margin-left: -15px;
    margin-right: -15px;
    border-radius: 0.5rem;
    padding: 1rem 2rem;
  }

@media print {
  .bya-bg {
    background-color: white !important;
  }
}