/** Primary styles **/
body {
    margin: 0;
    padding: 0;
}

/** Color Palette
    * Black: #000
        Blue: #53c8e9, 83,200,233
        Yellow/Green: #d4fa21 , 212,250,33
        Purple: #7e47ba, 126,71,186


        Dark Blue: #007db3,  0,125,179
        Dark Green: #4c8113, 76,129,19
        Dark Purple: #583282, 88,50,130


**/
/** Override primary Bootstrap colors. **/

:root,[data-bs-theme=light]  {
    --bs-blue: #53c8e9;
    --bs-indigo: #7e47ba;
    --bs-purple: #7e47ba;
    --bs-yellow: #d4fa21;
    --bs-green: #4c8113;
    --bs-primary: #53c8e9;
    --bs-primary-dark: #007db3;
    --bs-primary-rgb: 83,200,233;

    --bs-secondary: #7e47ba;
    --bs-secondary-dark: #583282;

    --bs-secondary-rgb: 126,71,186;
}



.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-dark);
    --bs-btn-hover-border-color: var(--bs-primary-dark);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-dark);
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary)
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary-dark);
    --bs-btn-hover-border-color: var(--bs-secondary-dark);
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary-dark);
    --bs-btn-active-border-color: var(--bs-secondary-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary)
}


.bg-primary, .btn-primary {
    /* background-color: rgb(51, 122, 183) !important; */
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

/** Medical clearance recommendation color **/
.purple1 {
    background-color: var(--bs-purple);
}
/** Level colors **/
.level-1, .blue {
    background-color: rgb(7, 57, 146);
}
.level-2, .green {
    background-color: rgb(76, 129, 19);
}
.level-3, .purple2 {
    background-color: rgb(100, 30, 118);
}
.level-4, .black {
    background-color: rgb(0, 0, 0);
}

.program-card {
    height: 660px;
    min-height: 660px;
    max-height: 660px;
}
.program-card .card-desc {
    max-height: 210px;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.table.dataTable {
    max-width: 100% !important;
}

/** Upload Spread Area **/

#drop-area {
    border: 2px dashed #aaa;
    padding: 30px 20px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
    border-radius: 8px;
    min-height: 2in;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    position: relative;
  }

.drop-text {
    font-size: 18px;
    color: #888;
}

  #dropped-content {
    width: calc(100% - 23px);
    height: 200px;
    min-height: 69px;
    max-height: 312px;
    margin-top: 20px;
    font-size: 16px;
    padding: 10px;
    border: 1px solid #555;
    resize: vertical;
    background-color: #444;
    color: #fff;
    outline: none;
    border-radius: 8px;
  }

  #dropped-content::-webkit-scrollbar {
    width: 8px;
  }

  #dropped-content::-webkit-scrollbar-track {
    background-color: #444;
  }

  #dropped-content::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
  }

  #dropped-content::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
  }

  .drop-icon i {
    color: #888;
    font-size: 4.5rem;
  }
#drop-area .upload-control {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    opacity: 0;
}