/* CLPT Brand Styling for use with the Central Suite */
/* A suite designed and developed by the Web Development Team at CLPT */

:root{
    /* CLPT Primary Color from Header on the Website and the Logo */
    --primary-color: #332d71;
    /* Secondary Color is a lighter shade of the primary color */
    --secondary-color: #5d5d98;


    /* Bootstrap Colors */
    --custom-blue: #bdd4e7;
    --custom-blue-cadet: #58A4B0;
    --custom-green: #57a773;
    --custom-alt-green: #20732c;
    --custom-grey: #BBBBBB;
    --custom-grey-ash: #999999;
    --custom-grey-black: #313131;
    --custom-orange: #FEB95F;
    --custom-pink: #EABFCB;
    --custom-purple: #DEC1FF;
    --custom-red: #db5461;
    --custom-red-alt: #b64b56;
    --custom-white: #FFFDFD;
    --custom-yellow: #FCCA46;
    --custom-yellow-alt: #ffc733;

    /* Application Colors */
    --assets-default: #aa63bf;
    --bookings-default: #6768a9;
    --compliance-default: #e3593f
    --library-default: #55afaf;  
    --record-default: #efbf5a;
    --safeguarding-default: #ea4460;

    /* School Colors: */
    --broadmeadow-primary: #2d4a7e;
    --broadmeadow-secondary: #ba1b2a;
    --coleridge-primary: #12aba8;
    --coleridge-secondary: #005aa2;
    --coppice-primary: #9f79b4;
    --coppice-secondary: #FFF;
    --deyncourt-primary: #c9261c;
    --deyncourt-secondary: #000;
    --eastdene-primary: #ffe351;
    --eastdene-secondary: #005b9e;
    --eastwood-primary: #eb612f;
    --eastwood-secondary: #013b81;
    --heathpark-primary: #001b54;
    --heathpark-secondary: #0059a3;
    --kingfisher-primary: #ffcd00;
    --kingfisher-secondary: #bbbbbb;
    --moseley-primary: #72277f;
    --moseley-secondary: #f7a600;
    --newbridge-primary: #69488e;
    --newbridge-secondary: #69488e;
    --riversides-primary: #345d9d;
    --riversides-secondary: #8ab7e9;
    --westcroft-primary: #004875;
    --westcroft-secondary: #f4e504;
    --vale-primary: #6fb1c8;
    --vale-secondary: #fdca00;
    --woden-primary: #213a81;
    --woden-secondary: #ffe351;
    --wvtc-primary: #4a972a;
    --wvtc-secondary: #c51846;
}

body{
    font-size: 16px !important;
    padding: 0px !important;
    margin: 0px !important;
    font-family: Quicksand, "Arial" !important;
}

/* Header */

/* Main Area */

main{
    min-height: calc(100vh - 17.2rem);
}

/* Footer */

footer{
    background-color: var(--secondary-color);
    padding: 2rem;
}

/* Login Screen */

.login-logo{
    height: 150px;
    max-width: 100%
}

.loginForm {
    background-color: rgb(240, 239, 239);
    color: var(--primary-color);
    padding: 100px;
    border-radius: 2px;
    box-shadow: 5px 5px 30px rgb(56, 56, 56);
}

/* Background Colors */

.bg-green {
    background-color: var(--custom-green) !important;
    color: #fff;
    border-radius: 3px;
}

.bg-grey {
    background-color: var(--custom-grey) !important;
    color: #fff;
    border-radius: 3px;
}

.bg-red{
    background-color: var(--custom-red) !important;
    color: white;
}

.bg-yellow {
    background-color: var(--custom-yellow) !important;
    color: #666;
    border-radius: 3px;
}

.bg-blue {
    background-color: var(--custom-blue-cadet) !important;
    color: #666;
    border-radius: 3px;
}

.bg-primary-main{
    background-color: var(--primary-color) !important;
    color: white !important;
}

.bg-secondary-main{
    background-color: var(--secondary-color) !important;
    color: white !important;
}

/* Buttons */

.theme-btn{
    display: inline-block;
    font-weight: 400;
    line-height: 1.6;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    padding: .5rem .7rem;
    margin-left: .25rem;
    margin-right: .25rem;
}

.theme-btn i ~ span{
    margin-left: .25rem;
}

.theme-btn span ~ i{
    margin-left: .25rem;
}

@media (max-width: 480px){
    .theme-btn span{
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 992px){
    .theme-btn span.secondary-label{
        display: none;
    }
}

.btn-green {
    transition: 0.15s ease-in-out;
    background-color: var(--custom-green);
    color: #fff;
    border-color: var(--custom-green);
}

.btn-green:hover {
    color: #fff;
    background-color: var(--custom-alt-green);
    border-color: var(--custom-alt-green);
}

.btn-grey {
    transition: 0.15s ease-in-out;
    background-color: var(--custom-grey);
    color: var(--custom-grey-black);
    border-color: var(--custom-grey);
}

.btn-grey:hover {
    color: var(--custom-grey-black);
    background-color: var(--custom-grey-ash);
    border-color: var(--custom-grey-ash);
}

.btn-red {
    transition: 0.15s ease-in-out;
    background-color: var(--custom-red);
    color: #fff;
    border-color: var(--custom-red);
}

.btn-red:hover {
    background-color: var(--custom-red-alt);
    color: #fff;
    border-color: var(--custom-red-alt);
}


.btn-yellow {
    transition: 0.15s ease-in-out;
    background-color: var(--custom-yellow);
    color: #666;
    border-color: var(--custom-yellow);
}

.btn-yellow:hover {
    color: #666;
    background-color: var(--custom-yellow-alt);
    border-color: var(--custom-yellow-alt);
}

.btn-blue {
    transition: 0.15s ease-in-out;
    background-color: var(--custom-blue);
    color: #666;
    border-color: var(--custom-blue);
}

.btn-blue:hover {
    color: #666;
    background-color: var(--custom-blue-cadet);
    border-color: var(--custom-blue-cadet);
}

.btn-purple {
    transition: 0.15s ease-in-out;
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.btn-purple:hover {
    color: #fff;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-purple-alt{
    color: #fff;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-purple-alt:hover{
    color: var(--primary-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.submit-btn {
    background-color: var(--custom-grey-ash) !important;
    color: var(--primary-color);
    transition: ease 250ms;
    opacity: 100%;
    border: 1px solid var(--primary-color);
}

.submit-btn:hover {
    background-color: var(--primary-color) !important;
    color: rgb(255, 255, 255);
    transform: scale(1.02);
    opacity: 100%;
}

.resetBtn {
    background-color: transparent;

    color: white;
    transition: ease 250ms;
    opacity: 100%;
    width: 40%;
    border: 1px solid white;
}

.resetBtn:hover {
    background-color: white;
    color: var(--primary-color);
}

/* Pagination */

.pagination-holder{
	margin-top: 4rem;
	margin-bottom: 4rem;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.pagination-buttons{
	margin-bottom: 1.5rem;
}

.pagination-buttons a{
	display: inline-block;
}

.page-btn{
	background-color: var(--custom-grey);
	color: var(--main_color);
	border-radius: 10%;
	text-align:center;
	text-decoration: none;
	padding: .5rem;
	min-width: 3rem;
	transition: .2s;
}

.page-btn:hover{
	background-color: var(--main-color);
	color: var(--custom-grey);
	transform: scale(1.1);

}

.page-btn.active{
	background-color: var(--custom-grey);
	color: var(--main_color);
	transform: scale(1.1);
}

.prev-btn, .next-btn{
	background-color: var(--primary-color);
	color: #FFF;
}

.prev-btn:hover, .next-btn:hover{
    background-color: var(--primary-color);
    color: var(--custom-grey);
}

/* Headings */

.main-header{
    color: var(--primary-color);
    margin: auto;
    text-align: center;
}

.main-header + hr{
    width: 25%;
    margin: auto;
    margin-bottom: 1rem;
}

/* Tables */

/* Custom Table */
.custom-table{
	width:100%;
	font-size: 1.1rem;
	font-weight: 600;
	border: none;
}

.custom-table thead tr, .custom-table tfoot tr{
	color: var(--primary-color);
}

.custom-table thead tr{
    border-bottom: solid 2px var(--secondary-color);
}

.custom-table tfoot tr{
    border-top: solid 2px var(--secondary-color);
}

/* CLPT Brand */
.custom-table th{
	text-align: center;
    padding: .5rem;
    color: var(--primary-color);
}

.custom-table tr, .custom-table td, .custom-table th{
	border: none;
	border-collapse: collapse;
}

.custom-table tbody tr:nth-child(even){
    background-color: #f2f2f2;
}

.custom-table tbody tr:nth-child(even):hover{
    background-color: #bfd1ec;
}

.custom-table tbody tr:nth-child(odd):hover{
    background-color: #bfd1ec;
}

.custom-table td{
	padding: .5rem;
	font-size: 1rem;
	font-weight: 400;
}

.custom-table .actions{
	text-align:center;
}

.custom-table .action-th{
	width: 90px;
    text-align:end;
}

.custom-table .action-th .no-arrow::after{
	content: none;
}

/* PDF preview */

.pdf-preview{
    min-height: 500px;
    width: 100%;
}

/* Tabs Area */
.tab-content{
    border-bottom: solid 1px #dee2e6 !important;
    border-left: solid 1px #dee2e6 !important;
    border-right: solid 1px #dee2e6 !important;
    padding: 1.5rem !important;
    background-color: #FFF !important;
}

.nav-tabs .nav-link.active{
    background-color: #FFF !important;
    border-bottom-color: transparent;
}

.nav-tabs .nav-link{
    color: var(--primary-color) !important;
}

.cursor-pointer{
    cursor: pointer !important;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 30px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 10px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(51, 45, 113, .2);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }


.profileImage{
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #e2e2e2;
    background: #fff;
    margin: auto;
    margin-top: auto;
    margin-top: 40px;
}

body {
    font-size: 16px;
    padding: 0px !important;
    margin: 0px !important;
    font-family: Quicksand, "Arial";
}

/*view height*/
.page-vh {
    min-height: calc(100vh - 17.2rem);
}

/*users show page grey background*/
.min-box {
    min-height: 400px !important;
}

.offset-badge{
    font-size: .7rem;
    position: absolute;
    top: -60%;
    right: -20%;
    border-radius: .8rem;
    padding: .25rem;
    font-weight: 800;
}

#header-logo {
    width: 400px;
    height: auto;
}

#logo {
    width: 50px;
    height: auto;
}

.logo {
    width: 600px;
    height: auto;
}

.logo-small {
    width: 350px;
    height: auto;
}

.forgotPassContent {
    display: none;
}

.forgotPassForm {
    position: relative;
    bottom: 60px;
}

#reset-instruction {
    font-size: 15px;
}

.customForm {
    background-color: rgb(255, 255, 255);
    color: #332d71;
    padding: 50px;
    border-radius: 2px;
    box-shadow: 10px 5px 20px rgb(56, 56, 56);
}



.addStaffForm {
    background-color: rgb(255, 255, 255);
    color: #332d71;
    padding: 100px !important;
    border-radius: 2px;
    box-shadow: 10px 10px 30px rgb(56, 56, 56);
}

/*progress bar*/
#myBar {
    width: 10%;
    height: 25px;
    background-color: var(--main_purple);
    border-radius: 5px;
    text-align: center; /* To center it horizontally (if you want) */
    line-height: 30px; /* To center it vertically */
    color: white;
    font-size: 15px;
}

.options-icon:hover {
    color: #f1f1f7 !important;
    transform: scale(1.3);
    transition: ease 250ms;
}

.search-icon:hover {
    background-color: #332d71;
    color: white;
    transition: ease 250ms;
    cursor: pointer;
}

/* .chart-container {
    position: relative;
    height: 40vh;
    width:40vh;
} */

.notification:hover {
    background-color: #5b569a;
    color: white;
}

.option:hover {
    background-color: #5b569a;
    color: white;
}



.custom-input {
    border: 1px solid #332d71;
    background-color: rgb(240, 239, 239);
}

.notify:hover {
    background-color: #f4f3fd;
}

.custom-radius {
    border-radius: 30px;
}

.table-shadow {
    box-shadow: 1px 1px 10px rgb(94, 93, 93) !important;
}

.staff-member:hover {
    background-color: #dbdbed;
    cursor: pointer;
    transition: ease, 300ms;
}

.notification-item:hover {
    background-color: #dbdbed;
    transition: ease, 300ms;
}




/* Footer */

.footer {
    position: relative;
    bottom: 0px;
}


.loginForm {
    background-color: rgb(240, 239, 239);
    color: #332d71;
    padding: 100px;
    border-radius: 2px;
    box-shadow: 5px 5px 30px rgb(56, 56, 56);
}

.forgot-pw-active {
    display: flex;
}

@keyframes forgot-password-contentFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes forgot-password-contentFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.box{
    width: 100%;
    height: 100%;
}

.container{
    max-width: 1400px !important;
}

/* Headings */

h3 + hr {
    margin-bottom: 3rem !important;
    margin-left: auto;
    margin-right: auto;
    width: 25%;
}


.custom-blue {
    background-color: #332d71;
}

.custom-red {
    background-color: rgb(249, 65, 65);
}

.custom-red:hover {
    background-color: rgb(248, 94, 94);
}

.custom-dark-red {
    background-color: #b65651;
}

.transparent-red {
    background-color: #f8dfde;
}

.custom-grey {
    background-color: rgb(240, 239, 239) !important;
    color: #332d71;
    transition: ease 250ms;
    opacity: 100%;
    border: 1px solid #332d71;
}

.custom-grey:hover {
    background-color: #332d71 !important;
    color: rgb(240, 239, 239);
    transform: scale(1.02);
    opacity: 100%;
}

.transparent-blue {
    background-color: #f4f3fd;
}

.table-bg {
    background-color: #fbfbfc;
}

.custom-color {
    background-color: #332d71;
}

.custom-dark-grey {
    background-color: rgb(120, 121, 114);
    color: white;
    opacity: 80%;
}

.custom-dark-grey:hover {
    background-color: rgb(88, 86, 86);
    color: white;
    transform: scale(1.02);
    opacity: 80%;
}



/* Text Color */

/* CLPT text colour*/
.text-purple {
    color: #332d71 !important;
}

.text-green {
    color: var(--main_green);
}

.text-grey {
    color: var(--main_grey);
}

.text-red {
    color: var(--main_red);
}

.text-yellow {
    color: var(--main_yellow);
}

.text-blue {
    color: var(--main_blue);
}

.custom-dark-red-text {
    color: #b65651;
}

.custom-blue-text {
    color: #332d71;
}

/* Links */

.custom-link {
    color: #332d71 !important;
    text-decoration: none !important;
}

.custom-link:hover {
    color: #262162 !important;
    text-decoration: none !important;
}

/* Borders */

.border-green {
    border: var(--main_green);
}

.border-grey {
    border: var(--main_grey);
}

.border-red {
    border: var(--main_red);
}

.border-yellow {
    border: var(--main_yellow);
}

.border-blue {
    border: var(--main_blue);
}


/* Tooltips */

.tooltip-danger .tooltip-inner {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #721c24;
}

.tooltip-danger .tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #721c24;
}

.tooltip-danger .tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #721c24;
}

.tooltip-danger .tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #721c24;
}

.tooltip-danger .tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #721c24;
}

/* Tabs */

.nav-tabs .nav-link {
    color: var(--main-color);
}

.nav-tabs .nav-link.active {
    background-color: #fff !important;
}

.tab-content {
    border-left: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
}

.nav-link.tab.active {
    background-color: #f4f3fd !important;
    /* border-bottom: solid, 1px #f4f3fd ; */
    border-color: #dee2e6 #dee2e6 #f4f3fd !important;
}

/* Tables */

/* bottom-left border-radius */
table tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

/* top-left border-radius */
table tr:first-child th:first-child {
    border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
    border-top-right-radius: 6px;
}

th.orderBy{
    cursor: pointer;
}

/* Alerts */

.error-item {
    list-style: none;
}

.alerts {
    width: 50%;
    margin: 20px auto;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 0 15px 5px #ccc;
    position: fixed;
    top: 15%;
    left: 25%;
    z-index: 1;
}

/*alerts styles for component handlers*/
.alert-colour-success {
    border-left: 5px solid #178344;
    border-radius: 3px;
    background-color: #a8f0c6;
}

.alert-colour-danger {
    border-left: 5px solid #8f130c;
    border-radius: 3px;
    background-color: #f7a7a3;
}

/* Forms */

/*Check boxes*/
.checkmark {
    height: 25px;
    width: 25px;
    margin-right: 1rem;
    background-color: #eee;
}

input[type=checkbox] {
    accent-color: var(--main_purple);
}

input[type=file]::file-selector-button {
    color: white;
    background-color: var(--main_purple) !important;
    transition: 1s;
}

#placeholder-image {
    width: 1px;
    height: auto;
}

input[type="file"]::file-selector-button {
    background-color: rgb(240, 239, 239) !important;

    color: var(--primary-color);
    transition: ease 250ms;
    opacity: 100%;

    border: 1px solid var(--primary-color);
}

/* Pagination */

.pagination-holder{
	margin-top: 4rem;
	margin-bottom: 4rem;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.pagination-buttons{
	margin-bottom: 1.5rem;
}

.pagination-buttons a{
	display: inline-block;
}

.page-btn{
	background-color: var(--custom-grey);
	color: var(--main_color);
	border-radius: 10%;
	text-align:center;
	text-decoration: none;
	padding: .5rem;
	min-width: 3rem;
	transition: .2s;
}


.page-btn:hover{
	background-color: var(--main-color);
	color: var(--custom-grey);
	transform: scale(1.1);

}

.page-btn.active{
	background-color: var(--custom-grey);
	color: var(--main_color);
	transform: scale(1.1);
}

.prev-btn, .next-btn{
	background-color: var(--primary-color);
	color: #FFF;
}

.prev-btn:hover, .next-btn:hover{
    background-color: var(--primary-color);
    color: var(--custom-grey);
}

/* tooltips */

.tooltip-danger .tooltip-inner {
    color: #FFF;
    background-color: var(--custom-red);
    border: 1px solid var(--custom-red-alt);

}

.tooltip-success .tooltip-inner {
    color: var(--main_green);
    background-color:#a8f0c6;
    border: 1px solid var(--main_green);
}

.tooltip-warning .tooltip-inner {
    color: #333;
    background-color: var(--sec_yellow);
    border: 1px solid var(--main_yellow);
}

.tooltip-inner .h3{
	font-size: 1rem;
	text-decoration: underline;
	font-weight: 800;
}

.tooltip-danger.bs-tooltip-top .tooltip-arrow::before {
	border-top-color: var(--custom-red-alt);
}

.tooltip-danger.bs-tooltip-bottom .tooltip-arrow::before {
	border-bottom-color: var(--custom-red-alt);
}

.tooltip-danger.bs-tooltip-start .tooltip-arrow::before {
	border-left-color: var(--custom-red-alt);
}

.tooltip-danger.bs-tooltip-end .tooltip-arrow::before {
	border-right-color: var(--custom-red-alt);
}

.tooltip-success.bs-tooltip-top .tooltip-arrow::before {
	border-top-color: var(--main_green);
}

.tooltip-success.bs-tooltip-bottom .tooltip-arrow::before {
	border-bottom-color: var(--main_green);
}

.tooltip-success.bs-tooltip-start .tooltip-arrow::before {
	border-left-color: var(--main_green);
}

.tooltip-success.bs-tooltip-end .tooltip-arrow::before {
	border-right-color: var(--main_green);
}

.tooltip-warning.bs-tooltip-top .tooltip-arrow::before {
	border-top-color: var(--main_yellow);
}

.tooltip-warning.bs-tooltip-bottom .tooltip-arrow::before {
	border-bottom-color: var(--main_yellow);
}

.tooltip-warning.bs-tooltip-start .tooltip-arrow::before {
	border-left-color: var(--main_yellow);
}

.tooltip-warning.bs-tooltip-end .tooltip-arrow::before {
	border-right-color: var(--main_yellow);
}

.tooltip-danger .tooltip-inner ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#filter{
    transition: .2s;
}

.content-link{
    color: var(--main-color);
    text-decoration: none;
    transform: .2s;
}

.content-link:hover{
    font-size: 1.1rem;
    color: var(--main_purple);
}

.table-action{
    width: 5%;
}

.table-column:nth-child(odd){
    background-color: #FFF;
}

.table-column:nth-child(even){
    background-color: #f2f2f2;
}


.import-control {
    cursor: pointer;
    background-color: transparent;
    width: 100%;
    padding: 0.75rem;
    border: none;
    display: block;
    font-size: 12px;
    min-width: 120px;
}

.errors-table th{
    white-space: nowrap;
}

.errors-table td{
    vertical-align: middle;
}

.document-icon{
    min-width: 50px;
}

.search-overlay{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: #FFFDFD;
    padding: 1rem;
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-1%);
        opacity: 0;
    }
    100% {
        opacity: 100;
        transform: translateX(0);
    }
}

.slideIn {
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 0.7s ease-out 0s 1 slideInFromLeft;
}

/*traffic lights*/

.tl-container{
    border-radius: 100px;
}

.traffic-light{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    margin-bottom: .5rem;
}


.red {
    background: red;
    background-image: radial-gradient(brown, transparent);
    background-size: 5px 5px;
    border-radius: 50%;
    animation: 20s red infinite;
    border: dotted 2px red;
    box-shadow: 0 0 20px #111 inset, 0 0 10px red;
}

.yellow {
    background: yellow;
    background-image: radial-gradient(orange, transparent);
    background-size: 5px 5px;
    border-radius: 50%;
    border: dotted 2px yellow;
    animation: 20s yellow infinite;
    box-shadow: 0 0 20px #111 inset, 0 0 10px yellow;
}

.green {
    background: green;
    background-image: radial-gradient(lime, transparent);
    background-size: 5px 5px;
    border-radius: 50%;
    border: dotted 2px lime;
    box-shadow: 0 0 20px #111 inset, 0 0 10px lime;
    animation: 20s green infinite;
}

@keyframes red {
    0% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: 0.1;
    }
    80% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.1;
    }
}

@keyframes yellow {
    0% {
        opacity: 0.1;
    }
    20% {
        opacity: 0.1;
    }
    40% {
        opacity: 1;
    }
    50% {
        opacity: 0.1;
    }
    60% {
        opacity: 0.1;
    }
    80% {
        opacity: 0.1;
    }
    86% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes green {
    0% {
        opacity: 0.1;
    }
    40% {
        opacity: 0.1;
    }
    60% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    83% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.1;
    }
}

.red-light-text {/* 
    width: 500px;
    position: absolute;
    top: 28px;
    left: 110px; */
    animation: 20s red infinite;
}
.yellow-light-text {
    /* width: 500px;
    position: absolute;
    top: 28px;
    left: 110px; */
    animation: 20s yellow infinite;
}
.green-light-text {
    /* width: 500px;
    position: absolute;
    top: 30px;
    left: 110px; */
    animation: 20s green infinite;
}
@media only screen and (max-width: 575px) {
    #header-logo {
        width: 200px;
        height: auto;
    }

    .table-font {
        font-size: 0.7rem !important;
    }

    #subMenu{
        display: flex;
        justify-content:center;
        align-items: center;
    }

    .theme-btn,
    .page-btn{
        min-width: 50px;
        min-height: 50px;
        display: flex;
        justify-content:center;
        align-items: center;
        font-size: 1.3rem;
    }
}
@media only screen and (max-width: 768px) {
    #header-logo {
        width: 300px;
        height: auto;
    }

    .nav-tabs > a {
        width:100%;
        border: solid 1px var(--main_purple) !important;
        color: var(--main_purple) !important;
        margin-bottom: 1.5rem !important;
        border-radius: .25rem;
        background-color: var(--main-grey) !important;
    }

    .nav-tabs > a.nav-link.active{
        background-color: var(--main_purple) !important;
        color: #FFF !important;
    }
}
@media only screen and (max-width: 992px) {
    .chartDiv {
        width: 60px;
        height: 60px;
    }

    #header-logo {
        width: 300px;
        height: auto;
    }

    .ellipsis-icon {
        transform: rotate(90deg);
    }
}
@media only screen and (max-width: 1200px) {
    .forgotPassForm {
        position: relative;
        bottom: 30px;
    }

    .chart-container {
        position: relative;
        height: 30vh;
        width: 30vw;
    }

    .forgotPassContent {
        width: 100%;
        padding: 0px;
    }

    .loginForm {
        padding: 30px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .customCol {
        padding: 10px;
    }

    

    #reset-instruction {
        font-size: 12px;
        margin: 10px;
    }

    .loginContent {
        padding-top: 10px;
    }

    .header {
        font-size: 2rem;
    }

    .small-font {
        font-size: 1.5rem !important;
    }

    .custom-font-size {
        font-size: 1rem !important;
        /* font-size: 1.2rem !important; */
    }

    .custom-btn-fontsize {
        font-size: 0.7rem !important;
    }

    .custom-margin-top {
        margin-top: 125px;
    }

    .addStaffForm {
        padding: 20px !important;
    }

    #upload {
        font-size: 1rem !important;
    }

    #image-upload {
        font-size: 1rem !important;
    }

    .custom-header-font {
        font-size: 1.5rem;
    }
}
@media only screen and (max-width: 1400px) {
    .custom-header-font {
        font-size: 1.5rem;
    }

    .custom-margin-top {
        margin-top: 125px;
    }
    /* .chart-container {
        position: relative;
        height:50vh;
        width:50vh;
    } */
}