/* -------------Colors------------- */
/* Light Mode Styling */
@media (prefers-color-scheme: light) {
    body,
    #body-wrapper,
    #mainBody {
        background-color: #dad5dd;
        /* background-color: rgb(34, 34, 34); */
        /* color: ; */
    }

    #header {
        background-color: #cfc0d7;
        color: black;
        border: solid 1px rgb(44,44,44);
    }

    #logo {
        filter: saturate(0.5);
    }

    #heading {
        color: #2c2c2c;
    }

    #switchLabel,
    #semesterValue,
    label[for="semesterSlider"] {
        color: black;
    }

    .slider {
        /* background-color: rgba(0, 0, 0, 0.5); */
        background-color: #b2bcc2;
    }
    
    .slider:before {
        background-color: white;
    }
    
    input:checked + .slider {
        background-color: rgb(158, 83, 196);
    }
    
    input:focus + .slider {
        box-shadow: 0 0 1px rgb(158, 83, 196);
    }

    #controlPanel {
        border: solid 1px #3f3f3f;
        color: #3f3f3f;
        background-color: #b2bcc2;
    }

    .panelBtns {
        background-color: rgb(158, 83, 196, 0.75);
        color: rgb(14, 16, 16);
        border: 1px solid #3f3f3f;
    }

    code {
            background-color: #b8b6b684;
            color: white;
        }

    .popup {
        /* background-color: rgba(201, 201, 201, 0.95); */
        background-color: whitesmoke;
        border-color: rgb(158, 83, 196);
        color: black;
        border: 1px solid rgb(158, 83, 196);
    }

    #codeSentMsg {
        color: rgb(158, 83, 196);
    }

    .headerBtns, .addRowBtns, .toggleBtn{
        filter: invert(0);
    }
    .addRowBtns {
        color: whitesmoke;
    }

    .toggleBtn {
        color: whitesmoke;
        background-color: rgb(158, 83, 196);
        color: black;
    }

    .tableGroup {
        border: solid 1px rgb(196, 83, 196);
        background-color: #b2bcc2;
    }

    #tableName {
        background-color: #b2bcc2;
        color: black;
    }

    .headerRows {
        background-color: rgb(217, 236, 255);
        color: black;
    }

    .firstCol {
        background-color: rgb(168, 1, 1);
        color: black;
    }

    td {
        border: 1px solid #c2bbb2;
        /* background-color: #3d444d; */
        color: #c2bbb2;
    }

    input,
    input[type="text"],
    .ui-autocomplete,
    .courseInput[type="checkbox"] {
        background-color: rgba(255, 255, 255, 0.99);
        /* color: #212529; */
    }

    input:disabled {
        background-color:rgba(255, 255, 255, 0.25);
    }

    #selects {
        color: black;
    }

    #footer {
        background-color: rgb(158, 83, 196, 0.75);
        color: black;
    }

    #hoverText {
        background-color: rgba(0, 0, 0, 0.75);
        color: white;
    }

    #legend {
        color: inherit;
        font-weight: bold;
    }

}

/* Dark Mode Styling */
@media (prefers-color-scheme: dark) {
    body,
    #body-wrapper,
    #mainBody {
        background-color: #222;
        /* color: ; */
    }

    #header {
        /* background-color: #343a40; */
        color: white;
        border: solid 1px rgb(35, 35, 35);
    }

    #logo {
        filter: invert(0.25);
    }

    #heading {
        color: lightgrey;
    }

    #switchLabel,
    #semesterValue,
    label[for="semesterSlider"] {
        color: white;
    }

    .slider {
    background-color: #ccc;
    }
    
    .slider:before {
        background-color: whitesmoke;
    }
    
    input:checked + .slider {
        background-color: rgb(158, 83, 196);
    }
    
    input:focus + .slider {
        box-shadow: 0 0 1px rgb(158, 83, 196);
    }

    #controlPanel {
        border: solid 1px rgb(196, 83, 196);
        color: silver;
        background-color: #3d444d
    }

    .panelBtns {
        background-color: rgb(158, 83, 196, 0.75);
        color: rgb(241, 239, 239);
        border: 1px solid silver;
    }

    code {
        background-color: #b8b6b684;
        color: white;
    }

    .popup {
        background-color: whitesmoke;
        border-color: rgb(158, 83, 196);
        color: black;
        border: 1px solid rgb(158, 83, 196);
    }

    #codeSentMsg {
        color: rgb(158, 83, 196);
    }

    .headerBtns, .addRowBtns, .toggleBtn{
        filter: invert(1);
    }
    .addRowBtns {
        color: whitesmoke;
    }
    .toggleBtn {
        color: whitesmoke;
        background-color: rgb(158, 83, 196);
        color: black;
    }

    .tableGroup {
        border: solid 1px rgb(196, 83, 196);
        background-color: #3d444d;
    }

    #tableName {
        background-color: #3d444d;
        color: white;
    }

    .headerRows {
        background-color: slategrey;
        color: whitesmoke;
    }

    .firstCol {
        background-color: rgb(199, 2, 2);
        color: white;
    }

    td {
        border: 1px solid #3d444d;
        /* background-color: #3d444d; */
        color: #3d444d;
    }

    input,
    input[type="text"],
    .ui-autocomplete,
    .courseInput[type="checkbox"] {
        background-color: rgba(255, 255, 255, 0.99);
        /* color: #212529; */
    }

    input:disabled {
        background-color:rgba(255, 255, 255, 0.25);
    }

    #selects {
        color: white;
    }

    #footer {
        background-color: rgb(158, 83, 196, 0.75);
        color: white;
    }
    #hoverText {
        background-color: rgba(255, 255, 255, 0.75);
        color: black;
    }

    #legend {
        color: white;
    }
}
/* ----------Other Styling--------- */

body{
    font-family: Georgia, 'Times New Roman', Times, serif;
    /* font-family: Arial, Helvetica, sans-serif;
    font-family: Helvetica, sans-serif; */
    font-size: large;
    font-weight:bold;
    min-height: 100vh;
    /* background-color:  */
}

#body-wrapper {
    display: flex;
    flex-direction: column;
    
    min-height: 100vh;
    width: 100%;
    /* order: 1px solid rgb(35, 35, 35); */
    row-gap: 2%;    
}

#header{
    width: 100%;
    height: auto;

    z-index: 1;
    font-size: large;

    display: flex;
    flex-direction: row;
    align-items: center;
    /* align-content: center; */
    justify-content: space-between;   
    
    /* font-family:     , sans-serif; */
    /* font-weight: 200; */
    /* background-color: black; */
}

#logo {
    /* height: 1%; */
    padding-left: 1%;
    width: 15%;

    flex-shrink: 1;
    flex-basis: 10%;
    align-self: center;
    justify-self: center;
}

#heading{
    margin: none;
    /* font-size: 1.5em; */
    font-weight: bold;
    text-align: center;
    align-content: center;

    flex-grow: 1;
    /* align-self: baseline; */
    justify-self: center;
}

.headerBtns {
    border: none;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    font-family: inherit;
    margin-right: 1%;
    flex-shrink: 1;
    width: 2%;
    height: auto;
}

#switchContainer{
    display: flex;
    flex-direction: column;
    width: 10%;
    margin-left: 1%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
}

#switchLabel{
    align-self: center;
    justify-self: center;

    font-weight: bold;
    font-size: large;
    /* margin-top: 3%;
    margin-bottom: 1%;
    margin-right: 5%; */
    margin: 2%;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.switch {
    position: relative;
    display: inline-flex;
    width: 60px;
    height: 34px;
    align-self: center;
    justify-self: center;
    margin-top: 1%;
}
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: rgb(158, 83, 196);
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px rgb(158, 83, 196);
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;

  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/* -------------------------------- */

#controlPanel{
    padding-top: 1%;
    padding-bottom: 1%;
    /* border-bottom: rgb(63, 44, 44) solid 2px; */
    
    font-family: inherit;
    width: 100%;
    height: 20%;
    font-size: large;

    display: flex;
    flex-direction: row;
    align-self: auto;
    /*justify-content: center; */
    gap: 1%;
    border-radius: 5px;
}

#sliderWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 40vw;
    /* margin-left: 2%; */
    /* margin-right: 2%; */
}

label[for="semesterSlider"]{
    align-self: center;
    justify-self: center;
    width: auto;
    font-weight: bold;
    margin-left: 2%;
    flex-basis: 30vw;
}

#semesterValue {
    align-self: center;
    /* justify-self: start; */
    font-size: large;
    width: auto;
    flex-basis: 1vw;
}

input[type="range"], input[type="range"] + datalist { --thumb-width: 12px; --list-length: 8; }

input[type="range"] {

    width: 1fr;
    accent-color: rgb(196, 83, 196);
    cursor: ew-resize;

    align-self: center;
    z-index: 1;
    justify-self: center;
    flex-basis: 39vw;
}

/* credit to Ich-73 on stackoverflow regarding tick marks */
/* input[type="range"] + datalist {
    grid-area: slider;
    display: flex;
    margin-top: 2%;
    width: 100%;
    position: relative;
    
}

input[type="range"] + datalist option {
    width: calc((100% - 12px) / (var(--list-length) - 1));
    text-align: center;
    font-size: small;
    color: rgb(196, 196, 196);
}

input[type=range] + datalist option:first-child {
    width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
    text-align: left;
}
input[type=range] + datalist option:last-child {
    width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
    text-align: right;
} */

/* adding tick marks */
/* #semesterList {
    grid-area: ticks;
    width: 100%;
    
}
#semesterList option {
    width: 8%;
    text-align: center;
    font-size: small;
    color: white;
    writing-mode: vertical-lr;
}

datalist option {
    width: 12.5%;
    text-align: center;
    font-size: small;
    color: rgb(196, 83, 196);
    writing-mode: vertical-lr;
} */

#legend {
    display: flex;
    /* width: 60vw; */
    flex-direction: row;
    /* align-items: center; */
    align-self: auto;
    font-size: small;
    flex-basis: 60vw;
    /* writing-mode: vertical-lr; */
}

svg {
    width: 100%;
    height: 100%;
    /* margin-left: 1%; */
    /* margin-right: 1%; */
    flex-grow: 1;
}


/* -------------------------------- */

.popup{
    position: fixed;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    z-index: 1000;
    display: none; /* Hidden by default */
    border-radius: 5px;
    /* background-color: black; */
    /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); */
}

#closeIcon {
    width: 20px;
    /* margin-left: 10%; */

    right: 1px;
    cursor: pointer;
    float: right;

}

.emailfield {
    width: 100%;
}

#codeSentMsg{
    font-weight: bold;
    font-size: large;
    text-align: center;
    margin-top: 10px;
    display: none; /* Hidden by default */
}

/* -------------------------------- */

#mainBody{
    min-height: 100%;
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    width: 100%;

    z-index: 1;
    /* background-color: black; */
}

.tableGroup {
    width: 100%;
    border-radius: 5px;
    /* format: top, right, bottom, left */
    margin: 0.5% 0% 0.5% 0%;
}

#tableName{
    font-weight: bold;
    margin: auto;
    padding: 1%;

    /* width: 100%; */
    border-radius: 5px;
}

.toggleBtn{
    /* move to right */
    justify-self: flex-end;
    width: 1.75%;
    /* margin-bottom: 1%; */
    border: none;
    padding: 0.25%;
    font-size: large;
    font-weight: bold;
    cursor: pointer;
    /* border-radius: 5px; */
    font-family: inherit;
    background: url("imgs/down.png") no-repeat;
    background-size: contain;
    align-self: flex-end;
    justify-self: flex-end;
    float: right;

}

.editProgramBtn{
    /* move to right */
    justify-self: flex-end;
    width: 2.5%;
    /* display: none;  */
    /* margin-bottom: 1%; */
    border: none;
    padding-bottom: 0.5%;
    margin-left: 1%;
    font-size: large;
    font-weight: bold;
    cursor: pointer;
    /* border-radius: 5px; */
    font-family: inherit;
    background: url("imgs/edit_round.png") no-repeat;
    background-size: contain;
    align-self: flex-end;
    justify-self: flex-end;
    /* float: left; */
    filter: invert(1);

}

/* table{
    width: 100%;
    margin: 0 0;
    display: table;
    border-spacing: 1px;
}  */

.programTable {
    width: 100%;
    margin: 0 0;
    /* padding-right: 0.5%; */
    display: table;
    border-spacing: 1px;
}

/* tr{
    width: 100%;
    border-bottom: 1px solid black;
} */

.headerRows { 
    text-align: center;
}

.firstCol{
    /*font-size-adjust: 0.8em;   */
    /* width:10%; */
    padding-left: 0.2%;
    width: auto;
    height: 10%;
    max-width: 10%;
    max-height: 10%;
    overflow-y: hidden;
    overflow-x: auto;
}

.courseInput, td, input, input:disabled {--size: 100%;}

td{
    height: auto;
    width: inherit;
    /* height: auto;  */
    /* width:fit-content; */
    /* width: inherit; */
    /* width: var(--size); */
    /* font-size: small; */
     
}

input{
    height: auto;
    /* width: inherit; */
    width: calc(var(--size) - 5%);
    /* width: 95%; */
}
input:disabled{
    /* height: auto; */
    height: auto;
    width: calc(var(--size) - 5%);
    /* width: 95%; */
    /* width: calc(var(--size)-5px); */
    cursor: not-allowed;
}

/* .courseInput{
    height: auto;
    width: var(--size);
    width: 100%;
} */

/* .ui-autocomplete-input {
    width: auto;
} */

/* for the autocompletes */
.ui-autocomplete {
    /* width: 100%; */
    /* Make sure the autocomplete menu doesn't go off the page */
    max-width: 25%;
    max-height: 25%;
    overflow-y: auto;
    overflow-x: hidden;
}

.addRowBtns{
    /* margin-top: 5%; */
    /* border: 1px solid whitesmoke; */
    /* margin: 1%; */
    font-size: larger;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    font-family: inherit;
}

#selects {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* justify-self: flex-end; */
    /* width: 99%; */


    font-size: medium;
    margin-top: 1%;
    font-family: inherit;

}

#selects h3 {
    flex-basis: 25%;
    align-self: center;
    justify-self: flex-start;   
    font-size-adjust: 0.8em;
    
}

#selects input[type="text"] {
    width: 100%;
    height: 100%;
    font-size: large;
    align-self: center;
    justify-self: flex-start;
    /* flex-basis: 10%; */
    /* font-size: inherit; */
    margin: 1%;
}

/* -------------------------------- */

#footer{
    text-align: center;
    margin-top: 1%;
    width: 100%;
    z-index:0;
} 

h3{
    padding-left: 2%;
}

.courseInput[type="checkbox"] {
    width: 100%;
    border-radius: 100px;
    accent-color: green;
}


#hoverText {
    position: absolute;
    padding: 5px;
    border-radius: 5px;
    display: none; /* Hidden by default */
    z-index: 1001;
}
#hoverTextContent {
    font-size: small;
    font-weight: bold;
}
/* 
.introjs-tooltipReferenceLayer{
    z-index: -999;
}

.introjs-helperLayer {
    z-index: 1000;
} */

code {
    font-family: monospace;
    font-size: small;
    padding: 2px 4px;
    border-radius: 3px;
}

.carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
    width: 70%;
    margin: auto;
  }

/* #guidePopup{
    opacity: 100%;
    background-color: rgba(255, 255, 255, 1);
} */

/* .introjs-relativePosition{
    z-index: 99999999999999;
} */

input[type="radio"] {
    margin-right: 10px;
    width: auto;
    font-weight: bolder;
}

.radioOption {
    margin-right: 20px;
    /* font-size: small; */
    font-weight: lighter;
}

#guideConfirm > button{
    background-color: rgb(158, 83, 196);
    color: white;
    font-weight: bold;
    font-size: large;
    cursor: pointer;
    border-radius: 5px;
    font-family: inherit;
    padding: 10px 20px;
}

.guideInputs{
    /* width: 95%; */
    /* height: 100%; */
    font-size: large;
    /* flex-basis: 10%; */
    /* font-size: inherit; */
    margin: 1%;

}

#guidePopup {
    z-index: 100;
    /* position: fixed;
    width: 100%;
    height: auto;
    top: calc(document.screen.height - this.height); */
    /* width: 100%;
    height: 100%; */

}