:root {
    /* Modal loader animation */
    --circle-diam: 40px;
    --circle-margin: -20px 0 0 -20px;
    --circle-col: #4f1f73;
}

/* =====================
       MODAL LOADER
    ====================== */

.modal-bkg {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1040; /* Sit on top */
    left: 0;
    top: 0px;
    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.3); /* Black w/ opacity */
}

.modal-logo-box {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -90px 0 0 -90px;
    width: 180px;
    height: 180px;
    z-index: 1040;
}

.circle1 {
    position: absolute;
    top: 10%;
    left: 50%;
    width: var(--circle-diam);
    height: var(--circle-diam);
    margin: var(--circle-margin);
    background-color: var(--circle-col);
    border-radius: 50%;
    animation: qfade 1s linear infinite;
    -webkit-animation: qfade 1s linear infinite;
}

.circle2 {
    position: absolute;
    top: 22%;
    left: 78%;
    width: var(--circle-diam);
    height: var(--circle-diam);
    margin: var(--circle-margin);
    background-color: var(--circle-col);
    border-radius: 50%;
    animation: qfade 1s linear infinite;
    -webkit-animation: qfade 1s linear infinite;
    animation-delay: -0.125s;
    -webkit-animation-delay: -0.125s;
}

.circle3 {
    position: absolute;
    top: 50%;
    left: 90%;
    width: var(--circle-diam);
    height: var(--circle-diam);
    margin: var(--circle-margin);
    background-color: var(--circle-col);
    border-radius: 50%;
    animation: qfade 1s linear infinite;
    -webkit-animation: qfade 1s linear infinite;
    animation-delay: -0.375s;
    -webkit-animation-delay: -0.375s;
}

.circle4 {
    position: absolute;
    top: 78%;
    left: 78%;
    width: var(--circle-diam);
    height: var(--circle-diam);
    margin: var(--circle-margin);
    background-color: var(--circle-col);
    border-radius: 50%;
    animation: qfade 1s linear infinite;
    -webkit-animation: qfade 1s linear infinite;
    animation-delay: -0.5s;
    -webkit-animation-delay: -0.5s;
}

.circle5 {
    position: absolute;
    top: 90%;
    left: 50%;
    width: var(--circle-diam);
    height: var(--circle-diam);
    margin: var(--circle-margin);
    background-color: var(--circle-col);
    border-radius: 50%;
    animation: qfade 1s linear infinite;
    -webkit-animation: qfade 1s linear infinite;
    animation-delay: -0.625s;
    -webkit-animation-delay: -0.625s;
}

.circle6 {
    position: absolute;
    top: 78%;
    left: 22%;
    width: var(--circle-diam);
    height: var(--circle-diam);
    margin: var(--circle-margin);
    background-color: var(--circle-col);
    border-radius: 50%;
    animation: qfade 1s linear infinite;
    -webkit-animation: qfade 1s linear infinite;
    animation-delay: -0.75s;
    -webkit-animation-delay: -0.75s;
}

.circle7 {
    position: absolute;
    top: 50%;
    left: 10%;
    width: var(--circle-diam);
    height: var(--circle-diam);
    margin: var(--circle-margin);
    background-color: var(--circle-col);
    border-radius: 50%;
    animation: qfade 1s linear infinite;
    -webkit-animation: qfade 1s linear infinite;
    animation-delay: -0.875s;
    -webkit-animation-delay: -0.875s;
}

.circle8 {
    position: absolute;
    top: 22%;
    left: 22%;
    width: var(--circle-diam);
    height: var(--circle-diam);
    margin: var(--circle-margin);
    background-color: var(--circle-col);
    border-radius: 50%;
    animation: qfade 1s linear infinite;
    -webkit-animation: qfade 1s linear infinite;
    animation-delay: -1s;
    -webkit-animation-delay: -1s;
}

@keyframes qfade {
    0% {
        opacity: 0.0;
    }

    20% {
        opacity: 1.0;
    }

    100% {
        opacity: 0.0;
    }
}

@-webkit-keyframes qfade {
    0% {
        opacity: 0.0;
    }

    20% {
        opacity: 1.0;
    }

    100% {
        opacity: 0.0;
    }
}

/* =====================
       END MODAL LOADER
    ====================== */

.scrollable-table {
    display: block;
    overflow: auto;
    height: 300px;
    
}

    .scrollable-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: #EEEEEE;
    }

.subject {
    width: 400px;
}

.last-col {
    width: 200px;
}


html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.table-text-width {
    width: 400px;
}

.form-group {
    margin-bottom: 10px;
}

.top-margin-10 {
    margin-top: 10px;
}

.centre {
    text-align: center;
}

.delete-ctrl {
    display: none;
}

.float-right {
    float: right;
}

.img-width-100 {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.img-width-80 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

label {
    font-weight: bold;
    margin-bottom: 2px;
}

.email-display {
    background-color: #c7e0fb;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.desc-width {
    width: 500px;
}