:root {
  --bg-color: rgba(255, 255, 255, 1);
  --text-color: rgb(27, 27, 26);
  --text-soft-color: rgb(61, 59, 59);
  --text-strong-color: rgba(74, 74, 74, 1);
  --subtle-color: rgba(255, 248, 247, 1);
  --border-color: rgba(253, 224, 220, 1);
  --shadow-color: #3332;
  --input-color: rgba(255, 255, 255, 1);
  --outline-color: rgba(248, 176, 164, 1);
  --mark-color: rgba(230, 84, 0, 0.08);
  --special-color: #ea5c24;
  --special-color-lite: #e67245;
  --special-bg-color: #ea5c24;
  --special-text-color: rgba(255, 255, 255, 1);
  --special-shadow-color: rgba(126, 83, 75, 1);
  --special-mark-color: rgba(255, 255, 255, 0.4);
  --light-color: rgba(255, 240, 238, 1);
  --dark-color: rgba(96, 62, 56, 1);
  --program-viable:#9ccc9c;
  --enrollment-pending:#bfa250;
  --enrollment-waitlist:#4794a6;
}

/* @media (prefers-color-scheme: dark) {
  :root {
      --bg-color: rgba(32, 32, 32, 1);
      --text-color: rgba(231, 221, 220, 1);
      --text-soft-color: rgba(197, 185, 183, 1);
      --text-strong-color: rgba(187, 187, 187, 1);
      --subtle-color: rgba(44, 34, 33, 1);
      --border-color: rgba(65, 43, 39, 1);
      --shadow-color: #333;
      --input-color: rgba(28, 28, 28, 1);
      --outline-color: rgb(132, 62, 47);
      --mark-color: rgba(232, 96, 49, 0.08);
      --special-color: rgba(232, 96, 49, 1);
      --special-color-lite: #e67245;
      --special-bg-color: rgba(167, 67, 32, 1);
      --special-text-color: rgba(231, 221, 220, 1);
      --special-shadow-color: rgba(44, 26, 23, 1);
      --special-mark-color: rgba(231, 221, 220, 0.08);
      --light-color: rgba(250, 200, 193, 1);
      --dark-color: rgba(73, 46, 41, 1);
      --program-viable:#405540;
      --enrollment-pending:#776e3e;
      --enrollment-waitlist:#097b79;
      --text-color-rgb: 231, 221, 220;
      --bg-color-rgb: 32, 32, 32;
      --subtle-color-rgb: 44, 34, 33;
      --special-color-rgb: 232, 96, 49;
      --special-text-color-rgb: 231, 221, 220;
      --special-bg-color-rgb: 167, 67, 32;
      --shadow-color-rgb: 0, 0, 0;
      --special-shadow-color-rgb: 44, 26, 23;
      --outline-color-rgb: 234, 130, 107;
      --dark-color-rgb: 73, 46, 41;
      --light-color-rgb: 250, 200, 193;
  }
} */
/* Hidden Menu and footer */
nav {
    visibility: hidden;
}
.log_in {
    display: none;
}
footer {
    display: none;
}
.menu-container{
    display: none;
} 
.main-container{
    background: white;
}
.site-footer{
    visibility: hidden;
}

/* Preloader */
#preloader{
    height: 100vh;
    width: 100%;
    padding-top: 20vh;
    position: fixed;
    background: white;
    z-index: 100;
}
@keyframes slide {
    0% {
      transform: translate(0, 0);
    }
    2% {
      transform: translate(33px, 0);
    }
    12.5% {
      transform: translate(33px, 0);
    }
    15.5% {
      transform: translate(66px, 0);
    }
    25% {
      transform: translate(66px, 0);
    }
    27% {
      transform: translate(66px, 33px);
    }
    37.5% {
      transform: translate(66px, 33px);
    }
    39.5% {
      transform: translate(33px, 33px);
    }
    50% {
      transform: translate(33px, 33px);
    }
    52% {
      transform: translate(33px, 66px);
    }
    62.5% {
      transform: translate(33px, 66px);
    }
    64.5% {
      transform: translate(0, 66px);
    }
    75% {
      transform: translate(0, 66px);
    }
    77% {
      transform: translate(0, 33px);
    }
    87.5% {
      transform: translate(0, 33px);
    }
    89.5% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  svg#loading {
    display: block;
    margin: auto;
    width: 20rem;
    height: auto;
  }
  svg#loading .rect {
    animation: slide 10s ease infinite;
  }
  svg#loading #rect1 {
    animation-delay: 0s;
  }
  svg#loading #rect2 {
    animation-delay: -1.42857143s;
  }
  svg#loading #rect3 {
    animation-delay: -2.85714286s;
  }
  svg#loading #rect4 {
    animation-delay: -4.28571429s;
  }
  svg#loading #rect5 {
    animation-delay: -5.71428571s;
  }
  svg#loading #rect6 {
    animation-delay: -7.14285714s;
  }
  svg#loading #rect7 {
    animation-delay: -8.57142857s;
  }

/* Layout */
.dashboard-circular{
    display: flex;
    justify-content: center;
}
#id_profile_section_form{
    padding: 0% 10%;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 6px 12px;
    border-radius: 17px;
    margin: 30px;
    background: ivory;
}
.sd_class_schedule_section_grid_card{
    box-shadow: rgba(0, 0, 0, 0.5) 0px 6px 12px;
    border-radius: 17px;
    transform: scale(0.97);
    background: ivory;
}
.sd_class_schedule_section_grid_card .fw-col-sm-4, .sd_class_schedule_section_grid_card .fw-col-sm-6, .sd_class_schedule_section_grid_card .fw-col-md-12{
    display: flex;
    justify-content: center;
    align-items: baseline;
}
.sd_class_schedule_section_grid_card span{
    border: 3px solid #ea5c24;
    border-radius: 17px;
    margin:10px;
    padding: 10px;
    background: white;
}
#sd_programs_section_grid, 
#sd_class_schedule_section_grid, 
#sd_teachers_section_grid
{
    display: flex;
    justify-content: center;
}
#sd_programs_section_grid_table, 
#sd_class_schedule_section_grid_table, 
#sd_teachers_section_grid_table{
    border-collapse: collapse;
    border: 3px solid #ea5c24;
}
#student_list_table,
#teacher_student_list_table
{
  width: 70vw;
  border-collapse: collapse;
  border: 3px solid #ea5c24;
}
table{
  border:none !important;
  width: 95vw;
  margin: 2.5vw;
  overflow-wrap: anywhere;  
  text-align: center;
  line-height: 1.8;
  border-collapse: separate !important; /* allow spacing between cell borders */
  border-spacing: 0 5px !important; /* NOTE: syntax is <horizontal value> <vertical value> */
}
table td, table tr {
  border-style : hidden!important;
  background: #3332;
  text-align: center;
  line-height: 1.8;
  border-collapse: separate; /* allow spacing between cell borders */
  border-spacing: 0 7px; /* NOTE: syntax is <horizontal value> <vertical value> */
}
tr:nth-child(even){
    background: #3332;
}
tr:nth-child(odd){
    background: #3332;
}
tr:nth-child(1){
  background: #ea5c24;
  color: white;
  border-style: hidden !important;
  font-size: 1rem;
}
#sd_programs_section_grid_view_details{
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 50px;
} 


/* modal */

.modal{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  border-radius: 17px;
  width: 80%; /* Could be more or less, depending on screen size */
}
.modal-header{
  text-align: center;
}
.modal-header h2{
  border-radius: 17px;
  background: #ea5c24;
  color: white;
  width: 25vw;
  margin: auto;
  margin-bottom: 20px;
}


/* Buttons and Inputs */
.dashboard-circular-button{
  color: #ea5c24;
  border-radius: 25px;
  border: 3px solid #ea5c24;
  height: 8rem;
  width: 33vw;
  text-align: center;
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}
.dashboard-circular-button a{
    color: #ea5c24;
}
.active_button_c{
  background-color: #e67245;
  color: white;
  border: 3px solid #ea5c24;
}
#id_profile_section_form input[type=text], #id_profile_section_form input[type=email], #id_profile_section_form input[type=tel]{
    border: 3px solid #ea5c24;
    border-radius: 17px;
    width: 100%;
    background: white;
}
#eeid_instructor_portal_instructor_profile_update_button{
    color: #ea5c24;
    border-radius: 17px;
    border: 3px solid #ea5c24;
    font-size: 1.2rem;
    margin: 20px;
    padding: 10px 100px;
    background: white;
}
#eeid_instructor_portal_instructor_profile_update_button:hover{
    background: #f7f3f1;
}
#id_class_schedule_section_grid_card_button{
    color: #ea5c24;
    border-radius: 17px;
    border: 3px solid #ea5c24;
    font-size: 1.2rem;
    margin: 20px;
    padding: 10px 100px;
    background: white;
}
.dash-buttons{
  background: #ea5c24;
  color: white;
  width: 100%;
  text-align: center;
  padding: 5px 15px;
  margin-top: 20px;
  font-size: 1rem;
  border-radius: 7px;
  border: 3px solid #ea5c24;
}
.dash-buttons:hover{
  color: #ea5c24;
  background: white;
  border: 3px solid #ea5c24;
}
.dash-buttons:disabled{
  color: #333;
  background: #666;
  border: 3px solid #3336;
}


/* i bubbles */
abbr[data-title],
.abbr_tooltip_right[data-title] {
    position: relative;

    /* ensure consistent styling across browsers */
    text-decoration: none;
}

abbr[data-title]:hover::after,
abbr[data-title]:focus::after {
    content: attr(data-title);
    /* position tooltip like the native one */
    position: absolute;
    left: -50px;
    bottom: -45px;
    width: auto;
    white-space: nowrap;

    background: var(--special-bg-color);
    color: var(--special-text-color);
    border-radius: 7px;
    box-shadow: 1px 1px 5px 0 var(--shadow-color);
    font-size: 1rem;
    padding: 3px 5px;

    z-index: 999;
}
.abbr_tooltip_right[data-title]:hover::after,
.abbr_tooltip_right[data-title]:focus::after{
  left: -240px;
  bottom: -5px;
}