@charset "UTF-8";
/*!
=========================================================
* School Management System: 
=========================================================

* Copyright: 2022 SomaLink (https://somalink.org)
* Licensed: (https://somalink.org/licenses)
* Coded by: Julius Mwaniki CTO www.somalink.org

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
.table tr th{
	
	border:#eee 1px solid;
	
	position:relative;
	font-family:"Times New Roman", Times, serif;
	font-size:12px;
	text-transform:uppercase;
	}
	table tr td{
	
	border:#eee 1px solid;
	color:#000;
	position:relative;
	font-family:"Times New Roman", Times, serif;
	font-size:12px;
	
	text-transform:uppercase;
	}
	
#wb_Form1
{
   background-color: #07bb7383;
   border: 0px #000 solid;
  
}
.landing_container{

    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    background: var(--bg-box);
    margin-top: 5px;
}
.landing_container >h3{
    position: relative ;
}
.landing_container .side_header p{
    color: #00BFFF;
    clear: both;
}
.landing_container .side_header {
    clear: both;
}
.stuff_pending{
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    background: var(--bg-box);
    margin-top: 5px;
    align-content: center;
    
}

#photo
{
   
   background-color: #00BFFF;
   color: #050505;
   font-family:'Times New Roman', Times, serif;
   font-size: 12px;
   font-weight: bold;
}
.table tr th{
	
	border:#eee 1px solid;
	position:relative;
	font-family:"Times New Roman", Times, serif;
	font-size:12px;
	text-transform:uppercase;
}
table tr td{
	
	border:#eee 1px solid;
	color:#000;
	position:relative;
	font-family:"Times New Roman", Times, serif;
	font-size:12px;
	
	text-transform:uppercase;
}

#submit-button{
        margin: 1px;
        color: #07bb73;
}
#wb_Form1
{
   background-color: #fdfeff;
  
}
#photo
{
   background-color: #fdfeff;
   color: #000000;
   font-family:Arial;
   font-size: 12px;
}
*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
}


/* width */
::-webkit-scrollbar {
  width: 7px !important; 
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: var(--bg-box) !important;
  border-radius: var(--border-radius);
  margin: 3px 0 !important;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(193 193 193) !important; 
  border-radius: var(--border-radius) !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--bg-purple) !important; 
}

html{
    font-family: var(--font-family);
}

body{
    background: var(--bg-body);
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6{
    color: var(--white);
}


a{
    text-decoration: none !important;
}
p{
    font-size: 13px;
    color: var(--white);
}
#markAtdBtn{
    padding: 10px;
    background: var(--white);
    border: none;
    outline: none;
    color: var(--sec-white);
    /*border-radius: var(--border-radius-half);*/
}
#m_btn{
    padding: 10px;
    background: var(--white);
    border: none;
    outline: none;
    color: var(--sec-white);
    border-radius: none !important;
}

#smsBtn, #portalBtn, #markAtdBtn, #m_btn, #staffBtn{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#smsBtn i, #portalBtn i, #markAtdBtn i, #m_btn i, #staffBtn i {
    color: var(--sec-white);
    margin-left: 0;
}
#smsBtn img, #portalBtn img, #markAtdBtn img, #m_btn img, #staffBtn img{
    margin-left: 5px;
    width: 14px;
    height: 15px;
}

.span_active{
    visibility: hidden;
    display: none !important;

}
.no_records{
    display: flex;
    justify-content: center;
    align-items: center;
    background: red;
}
.atd_status_ok,
.atd_status_er,
.atd_status_hlf{
    padding: 5px;
    width: fit-content;
    font-size: 14px;
    margin: 5px;
    font-weight: 600;
    color: var(--sec-white);
    border-radius: var(--border-radius-half);
}
.atd_status1{
    display: flex;
}
.atd_status1 label{
    cursor: pointer;    
}
.atd_status1 label input[type="radio"]{
    display: none;
}
.atd_status1 label span i{
    display: none;
    margin: 0 !important;
}
.atd_status1 label span{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px dotted var(--border);
    padding: 5px;
    margin-right: 5px;
    height: 30px;
    width: 76px;
    font-weight: 500;
    color: var(--white);
    border-radius: var(--border-radius-half);
}
.atd_status1 label span p{
    font-size: 13px;
}
.atd_status1 label input[type="radio"]:checked ~ span{
    background: #ffc74c;
    color: var(--white);
    font-weight: 600;
}
.atd_status1 label input[type="radio"]:checked ~ .atd_pr{
    background: var(--success);
    color: var(--sec-white);
    font-weight: 600;
}
.atd_status1 label input[type="radio"]:checked ~ .atd_hd{
    background: var(--white);
    color: var(--sec-white);
    font-weight: 600;
}
.atd_status1 label input[type="radio"]:checked ~ .atd_ab{
    background: var(--danger);
    color: var(--sec-white);
    font-weight: 600;
}
.atd_status1 label input[type="radio"]:checked ~ span .atd_p{
    display: none;
}

.atd_status1 label input[type="radio"]:checked ~ span i{
    display: inline-block;
    color: var(--white);
    font-weight: 800;
}
.atd_status1 label input[type="radio"]:checked ~ .atd_pr i,
.atd_status1 label input[type="radio"]:checked ~ .atd_ab i,
.atd_status1 label input[type="radio"]:checked ~ .atd_hd i{
    color: var(--sec-white);
    font-weight: 800;
    font-size: 18px;
}
.atd_status{
    display: flex;
}
.atd_status label{
    cursor: pointer;    
}
.atd_status label input[type="checkbox"]{
    display: none;
}
.atd_status label span i{
    display: none;
    margin: 0 !important;
}
.atd_status label span{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px dotted var(--border);
    padding: 5px;
    margin-right: 5px;
    height: 30px;
    width: 76px;
    font-weight: 500;
    color: var(--white);
    border-radius: var(--border-radius-half);
}
.atd_status label span p{
    font-size: 13px;
}
.atd_status label input[type="checkbox"]:checked ~ span{
    background: #ffc74c;
    color: var(--white);
    font-weight: 600;
}
.atd_status label input[type="checkbox"]:checked ~ .atd_pr{
    background: var(--success);
    color: var(--sec-white);
    font-weight: 600;
}
.atd_status label input[type="checkbox"]:checked ~ .atd_hd{
    background: var(--white);
    color: var(--sec-white);
    font-weight: 600;
}
.atd_status label input[type="checkbox"]:checked ~ .atd_ab{
    background: var(--danger);
    color: var(--sec-white);
    font-weight: 600;
}
.atd_status label input[type="checkbox"]:checked ~ span .atd_p{
    display: none;
}

.atd_status label input[type="checkbox"]:checked ~ span i{
    display: inline-block;
    color: var(--white);
    font-weight: 800;
}
.atd_status label input[type="checkbox"]:checked ~ .atd_pr i,
.atd_status label input[type="checkbox"]:checked ~ .atd_ab i,
.atd_status label input[type="checkbox"]:checked ~ .atd_hd i{
    color: var(--sec-white);
    font-weight: 800;
    font-size: 18px;
}
.atd_status_ok{
    background: var(--success);
}
.atd_status_er{
    background: var(--danger);
}
.atd_status_hlf{
    background: #F29339;
}
.atd_status_ok i,
.atd_status_er i,
 .atd_status_hlf i{
    margin-right: 5px;
}
.title{
    font-family: var(--font-family);
    font-size: 14px;
    margin: 10px 0;
    color: var(--white);
    padding-left: 3px !important;
    padding-right: 3px !important;
}
i{
    margin-right: 5px;
    margin-left: 5px;
    color: var(--white);
}

.top_action{
    display: flex;
    justify-content: space-around;
}

.top_action button{
    margin-right: 5px;
}

.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
    padding: 0rem .5rem;
    height: 35px;
    background: var(--border);
    border-radius: var(--border-radius-half);
    color: var(--blue);
    border: 1.2pt solid var(--blue);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-family);
    margin: 2px;
}
.btn:hover{
    color: var(--sec-white);
    background: var(--blue);
}
.btn img{
    width: 15px;
    height: 15px;
    margin-left: 10px;
}
.btn i{
    font-size: 14px;
    color: var(--sec-white) !important;
}
.top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.btn-s{
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
    padding: 0px 10px;
    height: 30px;
    border: 1.3pt solid var(--blue);
    background: var(--border);
    border-radius: var(--border-radius-half) !important;
    color: var(--blue) !important;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-family);
    margin-left: 5px;

}
.btn-s:hover{
    background: var(--bg-purple) !important;
    color: var(--sec-white) !important;
}
.btn-s-d{
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
    padding: 4px 10px;
    background: var(--danger);
    border-radius: var(--border-radius-half);
    color: var(--sec-white);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-family);
    margin-left: 5px;

}

.btn-s-d:hover{
    background: var(--yellow);
    color: var(--white);
}
.btn-s:hover{
    background: var(--border);
    color: var(--white);
}

input{
    background: var(--bg-box) !important;
}


.page_loader{
    display: flex;
    z-index: 930;
    position: fixed;
    justify-content: center;
    align-items: center;
    right: 0;
    /*top: 10vh;*/
    background: var(--bg-body);
    /*background: red;*/
    width: 100vw;
    height: 100vh;
}
.page_loader img{
    width: 25px;
    height: 25px;
    margin-right: 10px;
}
.dash_loader{
    display: flex;
    z-index: 101;
    position: fixed;
    justify-content: center;
    align-items: center;
    right: 0;
    top: 10vh;
    background: var(--bg-body);
    /*background: red;*/
    width: calc(100vw - 8rem);
    height: 91vh;
}
.dash_loader img{
    width: 200px;
    height: 160px;
    margin-right: 10px;
}
.page_loader {
    font-size: 15px;
    color: var(--bg-blue);
}

.pay_loader{
    display: flex;
    z-index: 101;
    position: fixed;
    justify-content: center;
    align-items: center;
    right: 1.5rem;
    top: 10vh;
    background: var(--bg-body);
    width: 75vw;
    height: 91vh;
}
.pay_loader div{
    background: #ffc70c;
    width: 6px;
    height: 20px;
    margin-left: 5px;
    animation: pay_loader 1.2s infinite;
}

@keyframes pay_loader {
    50% {
        height: 40px;
    }
}

.pay_loader div:nth-child(1){
    animation-delay: -0.40s;
}

.pay_loader div:nth-child(2){
    animation-delay: -0.20s;
}

.pay_loader div:nth-child(3){
    animation-delay: 0s;
}
.pay_loader div:nth-child(4){
    animation-delay: .2s;
}

/*=============Btn Loader==========*/
.btn_loader {
    font-size: 15px;
    color: var(--bg-blue);
}

.btn_loader{
    display: flex;
    z-index: 800;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 17px;
}
.btn_loader div{
    background: linear-gradient(to bottom, #ffffff, #f0f0f0);
    width: 3pt;
    border-radius: var(--border-radius);
    height: 2px;
    margin-left: 3px;
    animation: btn_loader .5s infinite;
}

@keyframes btn_loader {
    50% {
        height: 17px;
        background: linear-gradient(to bottom, #ffffff, #f0f0f0);
    }
}

.btn_loader div:nth-child(1){
    animation-delay: -0.20s;
}

.btn_loader div:nth-child(2){
    animation-delay: -0.10s;
}

.btn_loader div:nth-child(3){
    animation-delay: 0s;
}


/*===========Fancy loader==========*/
.fancy_loader {
    font-size: 15px;
    color: var(--bg-blue);
}

.fancy_loader{
    display: flex;
    z-index: 800;
    position: fixed;
    justify-content: center;
    align-items: center;
    bottom: 2rem;
    right: 2rem;
    background: var(--filter);
    border-radius: var(--border-radius-half);
    width: 175px;
    height: 35px;
}
.fancy_loader div{
    background: linear-gradient(to bottom, #d53a9d, #743ad5);
    width: 4px;
    border-radius: var(--border-radius-2);
    height: 8px;
    margin-left: 5px;
    animation: fancy_loader .6s infinite;
}
.fancy_loader p{
    margin-left: 5px;
    font-size: 16px ;
    font-weight: 800;
    color: var(--white);
}

@keyframes fancy_loader {
    50% {
        height: 23px;
        background: linear-gradient(to bottom, #743ad5, #d53a9d);
    }
}

.fancy_loader div:nth-child(1){
    animation-delay: -0.30s;
}

.fancy_loader div:nth-child(2){
    animation-delay: -0.15s;
}

.fancy_loader div:nth-child(3){
    animation-delay: 0s;
}
.fancy_loader div:nth-child(4){
    animation-delay: .2s;
}
.suc_container{
    display: flex;
    text-align: center;
    align-items: center;
    width: 100%;
}
.error_wrap{
    background: red;
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  z-index: 720;
  width: 100%;
  min-height: 6vh;
  background-color: #f5cccc;
  border: 1px solid #f2bcbc;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 800;
  line-height: 16px;
  color: var(--white);
  overflow: hidden;
}
.success_wrap{
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  z-index: 720;
  width: 100%;
  min-height: 6vh;
  background-color: var(--success);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 800;
  line-height: 16px;
  color: white;
  overflow: hidden;
}
.err_header{
    position: fixed;
    display: flex;
    text-align: center;
    top: 10vh;
    right: 35%;
    padding: 1rem;
    background-color: #f5cccc;
    border: 1px solid #f2bcbc;
    min-width: 300px;
    max-width: 320px;
    font-weight: 500;
    transition: .5s ease-in-out;
    border-radius: var(--border-radius-half);
    z-index: 1000;
    color: var(--color);
    /*box-shadow: 0px 15px 28px -2px rgba(0,0,0,0.42);
    -webkit-box-shadow: 0px 15px 28px -2px rgba(0,0,0,0.42);
    -moz-box-shadow: 0px 15px 28px -2px rgba(0,0,0,0.42);*/
}
.suc_header{
    position: fixed;
    display: flex;
    text-align: center;
    top: 10vh;
    right: 35%;
    padding: 1rem;
    background-color: var(--success);
    border: 1px solid rgb(92 184 92);
    min-width: 300px;
    max-width: 320px;
    font-weight: 500;
    transition: .5s ease-in-out;
    border-radius: var(--border-radius-half);
    z-index: 1000;
    color: var(--sec-white);
    /*box-shadow: 0px 15px 28px -2px rgba(0,0,0,0.42);
    -webkit-box-shadow: 0px 15px 28px -2px rgba(0,0,0,0.42);
    -moz-box-shadow: 0px 15px 28px -2px rgba(0,0,0,0.42);*/
}
.pend_header{
    position: fixed;
    display: flex;
    text-align: center;
    top: 10vh;
    right: 2rem;
    padding: 1rem;
    background: #000;/*rgba(54, 162, 235, 0.6);*/
    min-width: 300px;
    max-width: 400px;
    transition: .5s ease-in-out;
    border-radius: var(--border-radius-half);
    z-index: 1000;
    color: white;
    box-shadow: 0px 15px 28px -2px rgba(0,0,0,0.42);
    -webkit-box-shadow: 0px 15px 28px -2px rgba(0,0,0,0.42);
    -moz-box-shadow: 0px 15px 28px -2px rgba(0,0,0,0.42);
}
#error,
#success,
#pending{
    display: none;
}
a {
    text-decoration: none;
    color: var(--white);
}
/*=============================
HEADER NEW STYLES
===============================*/
.sms_nav{
    display: flex;
    top: 0;
    justify-content: space-between;
    align-items: center;
    min-height: 10vh;
    width: 100%;
    background: var(--header-bg);
    backdrop-filter: blur(30px);
    box-shadow: 0 1px 1px -2px rgba(0,0,0,.2);
    position: sticky;
    z-index: 940;
    border-bottom: 1px solid var(--header-border);
}
.sms_nav-scroll{
  background-color: var(--bg-box);
  border: none;
}

.top_header_title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 2rem;
}
.top_header_title select{
    margin-right: 20px;
    border: none !important;
}
.top_header_title select{
    background: var(--border);
}
.top_header_title p{

    font-weight: 800;
    color: var(--white);
}

.sms_logo{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 2rem;
}
.sms_logo a{
    display: flex;
    align-items: center;
    justify-content: center;
}
.sms_logo a .logo div{
    position: relative;
    background: var(--bg-blue);
    margin: 4px;
    height: 3px;
}
.logo .logo1{
    width: 20px;
    transform: rotate(-45deg);
    left: -2px;
    /*bottom: 2px;*/
}
.logo .logo2{
    transform: rotate(0deg);
    width: 25px;
}
.logo .logo3{
    transform: rotate(-45deg);
    width: 20px;
    right: -5px;
    top: 1px;
}


.sms_logo>a>img{
  width: 60px;
  height: 50px;
  border-radius: 2px;
}

.nav-links{
  margin:  0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

    
}

.nav-links li{
    display: flex;
    text-align: center;
    list-style-type: none;
    padding: 0 .5rem;
}
.nav_grid .top-icon{
    font-size: 18px;
    color: var(--white);
}
.nav_grid .user{
    font-size: 18px;
    color: var(--white);
}
.nav-links .nav_grid{
    padding: .8rem;
}
.nav_grid{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav_title{
    transition: all .3s ease-in-out;
    position: absolute;
    font-family: var(--font-family);
    font-size: 14px;
    display: none;
    top: 9vh;
    color: var(--white);
    align-items: center;
    background: var(--bg-box);
    padding: 5px 15px;
    border-radius: var(--border-radius-1);
    border: 1px solid var(--filter);
}
.nav_grid:hover .nav_title{
    display: flex;
}
.login-grid:hover .nav_title{
    display: flex;
}
.nav-links .login-grid:hover .nav_grid, .nav-links .login-grid:focus .nav_grid{
    color: var(--bg-blue);
    background: var(--border);
    border-radius: var(--border-radius-half);
}
.nav-links li a{ 
    display: flex;
    text-decoration: none;
    color: var(--white);
}
.nav-links li .login_top{ 
    background: var(--bg-box);
    border: 2px solid #dfe2ef;
    color: #000;
    font-weight: 600;
    padding: .3rem 1rem;
    border-radius: var(--border-radius-2);
}
.nav-links .login-wrapper:hover a, .nav-links .login-wrapper:focus a{
    color: var(--bg-blue);
    background: #fff;
    border: 2px solid var(--bg-blue);
    border-radius: var(--border-radius-2);
    transition-duration: 0.6s ease-out;
}

/*================top-bar=====================*/
.top_nav{
    display: block;
}

.top_nav_active{
    display: block;
}
.toggle_nav{
    display: none !important;
}
.top_links{
    display: flex;
    /*justify-content:flex-start;*/
    justify-content: space-between;
    align-items: center;
    margin: 5px 2rem 0 2rem;
    /*padding: 0 2rem;*/
    /*background: red;*/
    /*border-bottom: 1px solid var(--border);*/
}
.top_links li{
    list-style: none;
}

.top_tab i{
    font-size: 13px;
    margin: 0;
    margin-right: 5px;
    color: var(--white);
}

.top_tab .drop_a,
.top_tab .a_regular{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    padding: 7px ;
    margin: 0 2.5pt;
    font-weight:500 ;
    color: var(--bg-box); 
    border: 1px solid var(--border);   
    color: var(--white);
    border-radius: var(--border-radius-1);
    background: var(--bg-box);

}
.drop_a .fa-chevron-right{
    margin: 0;
    margin-left: 3px;
    font-size: 14px;
    transition: transform .3s ease;
    /*color: var(--btn-blue);*/
}
.top_links .logout{
    background: var(--danger);
    border: 1px solid var(--danger);
    color: var(--sec-white);  
}
.top_links .logout i{
    color: var(--sec-white);
}
.top_links .logout:hover{
    background: red !important;
    border: 1px solid var(--danger) !important;
}
.top_tab .drop_a:hover,
.top_tab .a_regular:hover{
    background: var(--filter);
    border: 1px solid var(--filter);
    color: var(--white);
}
.top_tab .drop_a:hover i,
.top_tab .a_regular:hover i{
    color: var(--white);
} 
.top_nav ul li ul li a{
    padding: 10px;
    width: 100%;
}
.top_nav ul li ul li:hover i{
    /*background: #fef1e9;*/
    color: var(--white);
    
}

.top_tab .drop_a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top_tab>.drop_a:hover .top_nav ul ul {
    display: grid;
}

.top_nav ul li ul{
    position: absolute;
    z-index: 180;
    visibility: collapse;
    flex-direction: column;
    padding: 3px;
    /*margin-top: 2px;*/
    max-height: 300px !important;
    /*border: 1px solid var(--border);*/
    border-radius: var(--border-radius);
    background: var(--bg-box);
    box-shadow: 0 0 2px 0 rgb(34 47 62 / 20%), 0 4px 8px 0 rgb(34 47 62 / 15%);
}

.top_tab_drop:before, .dropdownn-menu:after{
  content: close-quote; 
  position: absolute;
  border: 10px solid transparent;
  border-top: 0px;
  left: 10px;
  top: -10px;
}
.top_tab_drop:before {
  top: -10px;
  border-bottom-color: var(--bg-box);
  box-shadow: 0 0 2px 0 rgb(34 47 62 / 20%), 0 4px 8px 0 rgb(34 47 62 / 15%);
}
.top_tab_drop:after {
  top: -10px;
  border-bottom-color: var(--bg-box);
  box-shadow: 0 0 2px 0 rgb(34 47 62 / 20%), 0 4px 8px 0 rgb(34 47 62 / 15%);
  z-index: 200;
}

.top_tab>ul>li{
    width: 100% auto;
    padding: 10px;
    background: var(--bg-box);
    border-bottom: 1px solid var(--border);
}
.top_tab>ul:hover .top_tab .a_regular{
    background: var(--filter) !important;
}
.top_tab ul li:last-child{
    border: none;
}
.top_tab>ul>li:hover{
    background: var(--mst-hover);
    border-radius: var(--border-radius);
}
.top_tab>ul>li a{
    font-weight: 600;
    font-size: 13px;
}

.top_tab:hover  ul{
    display: flex;
    visibility: visible;
    transition: 0.0005s;
    transition-delay: 0.0005ms;
}
.top_tab:hover .fa-chevron-right{
    transform: rotate(90deg);
}

/*=====================================================
---------------------ALL BURGERS-----------------------
=======================================================*/
.burger{
    display: none;
    margin-right: 2rem;
    cursor: pointer;
}

.burger div{
    width: 35px;
    height: 2px;
    background-color: black;
    margin: 6px;
    transition: all 0.3s ease;
}

.dropdown_burger{
    display: block;
    margin-right: 2rem;
    cursor: pointer;
}
.dropdown_burger div{
    width: 35px;
    height: 2px;
    background-color: black;
    margin: 6px;
    transition: transform 0.3s ease;
    background-color: var(--white);
}


.nav-active{
    transform: translateX(0%);
}

.toggle-burger .line1{
    -webkit-transform: rotate(-45deg) translate(-5px, 6px);
    transform: rotate(-45deg) translate(-5px, 6px);
    background-color: red;
}
.toggle-burger .line2{
     /*display: none; */
    opacity: 0;
}
.toggle-burger .line3{
    -webkit-transform: rotate(45deg) translate(-5px, -6px);
    transform: rotate(45deg) translate(-5px, -6px);
    background-color: red;
}

/*-------------dropdown burger----------*/
.toggle-dropdown_burger .bar1{
    -webkit-transform: rotate(-45deg) translate(-5px, 6px);
    transform: rotate(-45deg) translate(-5px, 6px);
    /*background-color: red;*/
}
.toggle-dropdown_burger .bar2{
     /*display: none; */
    opacity: 0;
}
.toggle-dropdown_burger .bar3{
    -webkit-transform: rotate(45deg) translate(-5px, -6px);
    transform: rotate(45deg) translate(-5px, -6px);
    /*background-color: red;*/
}




/* =================================================
------------------HOME CONTAINER--------------------
==================================================== */
.home_container{
    display: flex;
    height: 90vh;
    background-color: #fff;
    background: url(../images/3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    justify-content: center;
    
}

/* home_header_container */
.home_header_container{
    width: 65%;
    display: flex;
    flex-direction: column;
    background: transparent;
    align-items: center;
    margin: 0 auto;
    margin: 8vh 0;
}


/*===================================================
--------------------TOGGLE CHATS------------------
=====================================================*/
.chat_wrapper{
    position: relative;
}
.chat_wrapper img{
    width: 20px;
    height: 20px;
}

.chat_container{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 9vh;
    width: 350px;
    height: 70vh;
    padding: .5rem;
    max-height: 65vh;
    left: -10rem;
    background: var(--bg-box);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: 0 0 2px 0 rgb(34 47 62 / 20%), 0 4px 8px 0 rgb(34 47 62 / 15%);
    overflow-x: hidden;
    overflow-y: hidden;
    animation: growDown 400ms ease-in-out forwards;
    transform-origin: top center;
}
.chat_container_active{
    display: none;
}

/*===================================================
--------------------toggle-messages------------------
=====================================================*/


.toggle-messages img{
    width: 20px;
    height: 20px;
}
.message_container{
    flex-direction: column;
    position: absolute;
    top: 9vh;
    width: 350px;
    height: 70vh;
    padding: .5rem;
    height: auto;
    max-height: 65vh;
    /*left: -10rem;*/
    background: var(--bg-box);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: 0 0 2px 0 rgb(34 47 62 / 20%), 0 4px 8px 0 rgb(34 47 62 / 15%);
    overflow-x: hidden;
    overflow-y: hidden;
    animation: growDown 400ms ease-in-out forwards;
    transform-origin: top center;
    display: none !important;
}

.message_container_active{
    display: flex !important;
}
.message_container_inner{
    overflow-y: scroll;
}

.bell_button{
    margin-top: var(--margin-top);
}
.bell_button{
    display: flex;
    justify-content: center;
}
.bell_button button{
    border: none;
    display: flex;
    align-items: center;
    padding: .5rem 1rem ;
    background: var(--bg-blue);
    border-radius: var(--border-radius-2);
    color: var(--sec-white);
}
.bell_button button img{
    width: 13px;
    height: 13px;
    margin-right: 3px;
}

.toggle_x,
.toggle_y{
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-bottom: 1px solid var(--border);
    /*overflow-y: scroll;*/

}

.toggle_x .toggle_x_header,
.toggle_y .toggle_y_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-box);
}

.toggle_x .toggle_x_header h3,
.toggle_y .toggle_y_header h3{
    font-size: 17px;
    color: var(--bg-blue);
}

.toggle_y .toggle_y_header p,
.toggle_x .toggle_x_header p{
    font-size: 13px;
    font-weight: 600;
    background: rgb(238 237 253);
    color: var(--bg-blue);
    padding: .3rem 1rem;
    border-radius: var(--border-radius-2);
}

.toggle_x_messages,
.toggle_y_messages{
    display: flex;
    padding: .7rem 0;
    border-bottom: 1px solid var(--border);
    /*align-items: flex-start;*/
    /*justify-content: space-between;*/
}
.toggle_x_messages:last-child,
.toggle_y_messages:last-child{
    border: none !important;
    /*background: red;*/
}
.toggle_x_messages .toggle_x_messages-container,
.toggle_y_messages .toggle_y_messages-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.toggle_x_messages .toggle_x_messages-container h4,
.toggle_y_messages .toggle_y_messages-container h4{
    font-size: 15px;
    color: var(--white);
    margin-bottom: 3px;
}
.toggle_x_messages .toggle_x_messages-container span,
.toggle_y_messages .toggle_y_messages-container span{
    display: flex;
    text-align: left;
    font-size: 13px;
    color: var(--white);
}

.toggle_x_messages img,
.toggle_y_messages img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

/* The switch - the box around the slider */
.toggle_y_header span .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 23px;
}

/* Hide default HTML checkbox */
.toggle_y_header span .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s ease-out;
  border-radius: var(--border-radius-2);
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 4px;
  bottom: 4px;
  background-color: var(--bg-box);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--bg-blue);
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(29px);
}
.toggle_y_messages{
    display: flex;
}
.messages_wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.messages_wrapper .message_container{
    display: flex;
}



/*===================================================
--------------------profile_drop-------------
=====================================================*/
.profile_dropdown{
    position: relative;
    flex-direction: column;
    align-items: center;

}

.profile_image img{
    width: 120px;
    height: 130;
    margin-left: 15%;
    margin-top: -20%;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    object-fit: cover;
    object-position: center;

}
.academics_content{
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line when the container is too narrow */
    width: 100%;
    max-width: 100%;
}

.academics_content .fee_content_left{
    flex: 100%;
    max-width: 100%;
}

.academics_content .fee_content_right{
    flex: 1; /* Take up the remaining space on the right */
    /* max-width: ; */
}

@media screen and (min-width: 768px) {
    .academics_content .fee_content_left {
        flex: 1; /* Reset the flex value for the left content on larger screens */
        width: 100%;
        max-width: 768px; /* Set a fixed width for the left content on larger screens */
    }
    .academics_content .fee_content_right {
        flex: 1; /* Reset the flex value for the left content on larger screens */
        max-width: 100%;
    }
}
.profile_dropdown_content{
    flex-direction: column;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    transition: animation .3s ease-out;
    padding: 5px;
    margin-top: 7vh;
    position: absolute;
    background-color: var(--bg-box);
    box-shadow: var(--box-shadow);
    animation: growDown 400ms ease-in-out forwards;
    transform-origin: top center;
    display: none;
}

.profile_dropdown_active{
    display: flex !important;
}

.profile_dropdown_content_active{
    animation: growDown 400ms ease-in-out forwards;
    transform-origin: top center;
}


.profile_dropdown_content .profile_tag{    
    display: flex;
    align-items: center;
    font-size: 14px;
    border: none;
    padding: .5rem 2.3rem;
    border-bottom: 1px solid var(--border);
    color: var(--white);
}
.profile_tag:last-child{
    border: none;
    margin-top: var(--margin-top);
    background: var(--danger);
    color: var(--sec-white);
    border-radius: var(--border-radius-half);
    transition: all .3s ease-in-out;
}
.profile_tag:last-child:hover{
    background: red;
    color: var(--sec-white);
}
.profile_tag:hover{
    color: var(--white);
    background-color: var(--border);
    border-radius: var(--border-radius-half);
}
.profile_tag img{
    width: 16px;
    height: 16px;
    margin-right: 10px;
}
.profile_dropdown .profile_img{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-left: 5px;
    transition: transform 0.3s ease-in-out;
}


/*============================================== 
============ HEADER DROPDOW MENU============ 
===============================================*/
.dropdown{
    position: relative;
    transition: all .3s ease-in-out;

}
.dropdown_content_active {
    display: flex !important;
}
.dropdown_content{
    display: none;
    width: 250px;
    flex-direction: column;
    position: absolute;
    background: var(--bg-box);
    right: 2rem;
    top: 7.5vh;
    padding: 1rem;
    border-radius: var(--border-radius);
    box-shadow: 0 0 2px 0 rgb(34 47 62 / 20%), 0 4px 8px 0 rgb(34 47 62 / 15%);
    border: 1px solid var(--border);
    height: 85vh auto;
    max-height: 85vh;
    overflow-x: hidden;

}

.dropdown_content{
    transition: all 1s ease-out;
    animation: growDown 600ms ease-in-out forwards;
    transform-origin: top center;
}



.dropdown_content .dropdown_tag{
    display: flex;
    color: var(--white);
    align-items: center;
    opacity: 0;
    font-weight: 500;
    font-size: 15px;    
    padding: .5rem 2rem;
    background: var(--bg-box);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
}
.dropdown_tag img{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.dropdown_content .dropdown_tag:last-child{
    background: var(--bg-blue);
    color: var(--sec-white);
    border-radius: var(--border-radius);
    margin-top: var(--margin-top);
}
/*.dropdown_content .dropdown_tag:nth-last-child(-n + 2){
    border: none;
}*/
.dropdown_content .dropdown_tag:last-child:hover{
    background: #777;
    color: var(--sec-white);
}
.dropdown_content .dropdown_tag:hover{
    color: var(--white);
    background: var(--border);
    border-radius: var(--border-radius);
}

.controls_mobile{
    display: none;
}

/*====CREATE STUDENT OR TEACHER========*/
.create_form{
    width: 100%;
    background: var(--bg-box);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border);
    padding: 1rem;
    overflow-x: hidden;
}

.create_form form{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.create_form form .content_wrap{
    margin-bottom: 1.2rem;
    /*border-bottom: 1px solid var(--border);*/
}


.create_form form .category{
    font-size: 14px;
    /*color: var(--bl-color);*/
    width: fit-content;
    font-weight: 700;
    text-transform: uppercase;
    background: #c3f7e2;
    border: 1.6pt solid var(--bg-blue);
    padding: 6px .7rem;
    border-radius: var(--border-radius);
    color: var(--bg-blue);
}

.create_form form .form_content{
    margin: .8rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.create_form form .form_group{
    display: flex;
    flex-direction: column;
    background: var(--bg-box);
    /*padding: .5rem 1rem;*/
}

.create_form form .form_group label{
    margin-bottom: 10px;
    color: var(--bl-color);
    /*display: none;*/
}

.create_form form .form_group input, select{
    border: 1.3pt solid #1e63b5 !important;
    background: transparent;
    outline: none;
    border-radius: var(--border-radius-half);
    padding: 0.5rem;
    transition: all ease-in-out .03s;
    color: #3bc6ff !important;
    font-weight: 700;
}

.create_form form .form_group input:focus::placeholder, select:focus::placeholder {
  color: transparent;
  border-bottom: none;
}

.form_group select{
    outline: none;
    border-radius: none;
    border: 1px solid var(--border);
    padding: .5rem;
    color: var(--filter);
    background: transparent;
    transition: all ease-in-out .3s;
}
.form_group input{
    color: var(--white);
}
.form_group input:focus,
.form_group select:focus {
    background: transparent;
    border: 1px solid #6d4aff !important;
    outline: 2px solid rgba(114, 80, 255, .3) !important;
}

.form_group select:focus::placeholder {
  color: transparent;
  border: 1px solid #6d4aff;
    outline: 3px solid rgba(114, 80, 255, .3);
}

.form_control{
    display: grid;
    margin: 5px 0;
}

.form_control input{
    border: 1.3pt solid #1e63b5 !important;
    background: transparent;
    outline: none;
    border-radius: var(--border-radius-half);
    padding: 0.5rem;
    transition: all ease-in-out .03s;
    color: var(--white) !important;
    font-weight: 700;
}
.form_control input:focus, .form_control select:focus {
    outline: 1.6pt solid #1e63b5b3 !important;
}
.form_control label{
    margin-bottom: 10px;
    color: var(--bl-color);
    font-weight: 700;
    /*display: none;*/
}

.create_form form .btn_group{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--margin-top);
    padding: .5rem 0;
}
.create_form form button{
    font-size: 15px;
    display: flex;
    align-items: center;
    border: none;
    outline: none;
    background: var(--bg-purple);
    border: 1.5pt solid var(--bg-purple);
    border-radius: var(--border-radius-half);
    padding: .5rem 1rem;
    width: fit-content;
}
.create_form form button p{
    color: var(--sec-white) !important;
}
.create_form form button:hover{
    border: 1.5pt solid var(--btn-blue);
    background: var(--btn-blue);
    color: var(--sec-white) !important;
}
.create_form form button img{
    width: 15px;
    height: 15px;
    margin-right: 3px;
}

/*======================================================
-----------------------radio_upload_group---------------
========================================================*/
.radio_upload_group{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    text-align: center;
    height: 35px;
}
.radio_upload_group label{
    font-weight: 700;
    color: var(--btn-blue);
    text-align: center;
    font-size: 17px;
}



/*===========================================================
---------------------------fee_container--------------------
=============================================================*/
.fee_container{
    display: flex;
}
.fee_container_left{
    display: flex;
    flex-direction: column;
    width: 60%;
    margin-right: 20px;

}
.fee_container_left h2,
.fee_container_right h2{
    color: var(--bg-blue);
    margin-bottom: 10px;
}
.fee_container_left .s_details{
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    background: var(--bg-box);
    padding: 10px;
    border-radius: var(--border-radius);
}
.fee_container_left .s_details span{
    display: flex;
    align-items: center;
    margin: 5px 0;
}
.s_details span h4,
.payment_details span h4{
    color: var(--white);
    font-weight: 600;
    margin-right: 10px;
}
.s_details span p{
    color: var(--bg-blue);
}
.payment_summary,
.payment_details{
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    padding: 10px;
    background: var(--bg-box);
}
.payment_summary table thead tr td,
.payment_summary table tbody tr td {
    font-size: 17px;
    border-bottom: 1px solid var(--border);
    padding: 5px 0;
}
.payment_summary table tbody tr:last-child td{
    border: none;
}
.payment_summary table thead tr td,
.payment_summary table tbody tr td{
    display: flex;
    justify-content: space-between;
}

.fee_container_right{
    width: 40%;
}
.payment_details span{
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}
.payment_details span:last-child{
    border: none;
}
.payment_details span p{
    color: var(--white);
}

.payment_action{
    display: flex;
    margin-top: var(--margin-top);
    align-items: center;
    justify-content: center;
}
.payment_action button{
    margin: 10px;
    padding: 10px 10px;
    outline: none;
    border: none;
    background: var(--bg-blue);
    color: var(--sec-white);
    border-radius: var(--border-radius);
}
.status{
    background: #dcf8e9;
    color: #4bb787;
    font-size: 16px;
    width: fit-content;
    padding: 5px 10px;
    border-radius: var(--border-radius-half);
}
.status img{
    width: 16px;
    height: 16px;
    margin-right: 5px;
}
/*===========================================================
.timeline_container
=============================================================*/

.timeline_cards{
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-template-rows: masonry;

}
.timeline_card{
    width: 250px auto;
    height: 400px auto;
    background: var(--bg-box);
    
}
.timeline_card_first{
    background: none !important;
}

.events{
    display: flex;
    flex-direction: column;
}
.events .timeline_header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    align-items: center;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    background: var(--bg-box);
    padding: 10px;
}
.timeline_header h4, .timeline_header span{
    color: var(--white);
}
.events_content_cards{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}
.events_content_card{
    width: 200px auto;
    height: 220px auto;
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    background: var(--bg-box);
}
.events_content{
    margin: 10px 0;
    color: var(--white);
}
.timeline_time{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.timeline_time span a{
    text-decoration: none;
    background: #f5f5f5;
    padding: 5px 10px;
    border-radius: var(--border-radius-2);
    font-size: 13px;
    color: var(--bg-blue);
    font-weight: 600;
}
.timeline_time span a:hover{
    background: var(--bg-blue);
    color: var(--white);
}

.timeline_time p{
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
}



.timeline_card_fc{
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    height: 100%;
    overflow-y: hidden;
}


.timeline_card_events{
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    padding: 10px;
}
.events_header{
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.events_header h4{
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
}
.events_header span{
    display: flex;
    background: #f0f0f0;
    color: var(--bg-blue);
    padding: .3rem 1.3rem;
    border-radius: var(--border-radius-2);
    font-weight: 600;
}

.events_wrapper{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:  5px;
}
.events_content{
    padding: 10px;
    border-bottom: 1px solid var(--border);
}
.event_header{
    display: flex;
    margin-bottom: 5px;
}
.event_header h5{
    display: flex;
    align-items: center;
}

.event_header h5 img{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
}
.events_time{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--margin-top);
}
.events_time p{
    font-size: 13px;
    color: var(--bg-blue);
    font-weight: 600;
}

.events_time span a{
    font-size: 13px;
    background: #f0f0f0;
    padding: .2rem 1rem ;
    border-radius: var(--border-radius-2);
    text-decoration: none;
    color: var(--bg-blue);
    font-weight: 600;
}

.events_time span a:hover{
    background: var(--bg-blue);
    color: var(--white); 
}


/*notice_board_wrapper*/
.notice_board_wrapper{
    display: flex;
}
.notice_board_right{
    width: 40%;
}
.notice_board_left{
    width: 50%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap:  5px;
}

.notice_board_card{
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    background: var(--bg-box);
}

.notice_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.notice_header span {
    display: flex;
    align-items: center;
    color: var(--white);
}
.notice_header h5{
    color: var(--bg-blue);
}
.notice_header span img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 5px;
    border: 1px solid var(--bg-blue);
}
.notice_content{
    color: var(--white);
}





/*profile_container*/
.profile_container{
    display: flex;
    border-top: 1px dotted var(--border);
    padding-top: 3px;

}
.profile_left{
    width: 30%;
    margin-right: 10px;
    
}
.profile_left_inner{
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    background: var(--bg-box);
    box-shadow: var(--box-shadow);
}

.profile_top {
    display: flex;

}
.profile_top img{
    width: 100%;
    height: 160px;
    border-radius: 10px 10px 0 0 ;
    border-bottom: 1px solid var(--border);
}

.profile_details_left{
    display: grid;
    padding: 1rem;
}

.profile_details_left span{
    display: flex;
    padding: .5rem 0;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}
.profile_details_left span:last-child{
    display: flex;
    align-items: center;
    border: none;
}

.profile_details_left span h3{
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
}

.profile_details_left span p{
    color: var(--btn-blue);
    font-size: 14px;
    font-weight: 600;
}

/*============profile_right===================*/
.profile_right{
    display: flex;
    flex-direction: column;
    width: 70%;
    height: auto;
    
}

.personal_info .tab{
    display: flex;
    justify-content: space-between;
}
.personal_info .tab .tabs_left button{
    font-size: 12px;
    padding: .3rem .6rem ;
    border: none;
    background: var(--bg-box);
    border: 1px solid var(--blue);
    border-radius: var(--border-radius-half);
    color: var(--white);
    margin-right:5px;
    transition: background .2s ease-in-out;
    font-weight: 600;
}
.personal_info .tab .tabs_left button:hover{
    color: var(--blue);
    background: var(--border);
}

.personal_info .tab .tabs_right a{
    text-decoration: none;
}
.personal_info .tab .tabs_right button{
    display: flex;
    font-size: 12px;
    padding: .3rem .6rem ;
    border: none;
    background: var(--border);
    border: 1px solid var(--blue);
    border-radius: var(--border-radius-half);
    color: var(--white);
    margin-right:5px;
    transition: background .2s ease-in-out;
    font-weight: 600;
}
.personal_info .tab .tabs_right button i {
    color: var(--white) !important;
    font-size: 12px;
}
.personal_info .tab .tabs_right button:hover i{
    color: var(--sec-white) !important;
}
.personal_info .tab .tabs_right button img{
    width: 15px ;
    height: 15px;
    margin-right: 5px;
}
.personal_info .tab .tabs_right button:hover{
    background: var(--bg-purple);
    color: var(--sec-white);
}

/*TABCONTENT*/
/* Create an active/current tablink class */
.personal_info .tab .tabs_left button.active {
  background: var(--bg-blue);
  color: var(--sec-white);
  outline: none;
}




/* Style the tab content */
.tab_content {
  display: none;
  margin-top: var(--margin-top);
}

.tab_content {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}


.parent_info h4,
.profile_content h4{
    color: var(--bl-color);
    font-size: 17px;
    margin-bottom: 10px;
}
.parent_info,
.documents_info,
.timeline_info,
.fee_history,
.profile_details_t{
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    padding: 10px;
    background: var(--bg-box);
    margin-bottom: 5px;
    margin-top: 5px !important;
    box-shadow: var(--box-shadow);
}

.siblings_fluid button{
    margin-top: 10px;
    width: fit-content;
    border-radius: var(--border-radius-half) !important;
    color: var(--blue);
}
.transfer_fluid form .form_group{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px 0;
}
.transfer_fluid form .form_group p{
    display: flex;
    align-items: center;
    font-size: 12px;
}
.transfer_fluid form .form_group p span{
    color: red;
}
.transfer_fluid form .form_group select{
    width: 200px auto;
    color: var(--white) !important;
}
.transfer_fluid form .form_group label{
    color: var(--white);
    font-weight: 600;
}
.transfer_fluid form .form_group button{
    margin-top: 10px;
    width: fit-content;
}
.student_bal{
    overflow: hidden;
    background: #C33764;  /* fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(rgba(29, 38, 113, 0.8), 
        rgba(195, 55, 100, 0.8)), url(../images/3.jpg);
    background: linear-gradient(rgba(29, 38, 113, 0.8), 
        rgba(195, 55, 100, 0.8)), url(../images/3.jpg); /* The least supported option. */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.student_bal h3, h4{
    color: var(--sec-white);
}

.timeline_info button{
    border-radius: var(--border-radius-1);
    color: var(--white);
}

.fee_history{
    overflow-x: scroll;
}

.parent_info span,
.profile_details_t span{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);

}
.documents_info span:last-child,
.parent_info span:last-child,
.profile_details_t span:last-child{
    border: none;
}
.parent_info span h3,
.documents_info span h3,
.profile_details_t span h3{
    font-size: 15px;
    color: var(--white);
}

.parent_info span p,
.profile_details_t span p{
    font-size: 13px;
    color: var(--white);
}

.documents_info span{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
    padding: 10px !important;
    border-radius: var(--border-radius-1) !important;
    margin: 0;
}
.documents_info span:hover{
    background: var(--border);
}

.documents_info span img{
    width: 350px;
    height: 200px;
    border-radius: var(--border-radius-half);
    margin: 0 !important;
}

.documents_info span p{
    color: var(--white);
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}


/*================================================
---------------------notifications_container------
==================================================*/
.notifications_container{
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    padding: 10px;
}
.msg_tabs{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.msg_tabs h2{
    font-size: 18px;
    color: var(--white);
}
.msg_tabs span{
    display: flex;
}
.msg_tabs button{
    display: flex;
    padding: .5rem 1rem ;
    border: none;
    background: #f0f0f0;
    /*border-radius: 1rem ;*/
    color: black;
    margin: 0;
    background: #f0f0f0;
    transition: background .2s ease-in-out;
    
}

.msg_tabs button:hover{
    background: var(--bg-blue);
    color: var(--white);
}
.msg_tabs button.active{
    background: var(--bg-blue);
    color: var(--sec-white);
}
.msg_tab_content{
    display: none;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}



.msg_content{
    display: flex;
    width: 100%;
}
.msg_content_left{
    width: 50%;
    margin-right: 20px;
}


.msg_container{
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: .5rem 0;
}
.msg_container:last-child{
    border: none;
}
.msg_container img{
    width: 35px ;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
}
.msg_container button{
    border: none;
    padding: .5rem .5rem ;
    width: fit-content;
    margin-top: var(--margin-top);
    font-size: 12px;
    border-radius: var(--border-radius-1);
    border: 1px solid var(--border);
}
.msg_container button:hover{
    border: 1px solid var(--bg-blue);
    color: var(--bg-blue);
}

.msg_container span{
    display: grid;
}
.msg_container span p{
    font-size: 13px;
}

.msg_content_right{
    width: 50%;
    border-left: 1px solid var(--border);
    padding: 10px;
    align-items: center;
    justify-content: center;
}
.msg_content_right h4{
    margin-bottom: 10px;
    text-align: center;
    font-size: 18px;
    background: #f0f0f0;
    border-radius: var(--border-radius);
    padding: 10px;
}
.frnds_container{
    display: flex;
    padding: 10px 0;
    border-bottom: 1px dotted var(--border);
}
.frnds_container:last-child{
    border: none;
}
.frnds_container img{
    width: 20px ;
    height: 20px;
    margin-right: 20px;
    border-radius: 50%;
}
.frnds_container span{
    display: grid;
}

.frnds_container span .online_name{
    font-size: 15px;
    color: var(--white);
    margin-bottom: 5px;
}
.frnds_container span .online{
    font-size: 12px;
    color: var(--bg-blue);
}

.sys_container{
    display: flex;
    justify-content: center;
    align-items: center;
}

/*================================================
---------------------performance_container------
==================================================*/

.performance_container{
    display: flex;
}
.performance_container_left{
    width: 60%;
    margin-right: 20px;

}
.performance_container_right{
    width: 40%;
}
.p_container_l_top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5px;

}
.p_container_l_top span p{
    font-size: 16px;
    color: var(--white);
}
.p_container_l_top span .grade{
    color: var(--bg-blue); 
    font-weight: 600;
}
.p_container_l_top,
.p_container_l_btm,
.p_container_r_top,
.p_container_r_btm{
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    padding: 10px;
    background: var(--bg-box);
}
.p_container_r_top{
    margin-bottom: 5px;
}
.p_container_r_btm{
    display: grid;
}
.p_container_r_btm h3{
    text-align: center;
    color: var(--bg-blue);
    margin-bottom: 10px;
}
.p_container_r_btm span{
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--white);
}
.p_container_r_btm span:last-child{
    border: none;
}
.p_container_r_btm span a img {
    width: 30px;
    height: 30px;
}
.p_container_r_btm span a i{
    font-size: 30px;
}
.chart_box span{
    color: var(--white);
}
/*==================================================
-----------------------calender-----------------------
====================================================*/

.calendar_section_main{
    display: flex;
    margin: 5px 0;
    width: 100%;
}
.calendar_left{
    width: 70% !important;
    margin-right: 5px;
    padding: 10px;    
    background: var(--bg-box);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}
.todo_right{
    width: 30% !important;
    
}

.calendar_section_main_t{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    width: 100%;

}
.calendar_left_t{
    background: var(--bg-box);
    border-radius: var(--border-radius);
    padding: 10px;
    margin-top: 0px ;
    overflow-y: hidden;
}

.todo_right_t{
    margin-top: 5px;
    background: var(--bg-box);
    border-radius: var(--border-radius);
    padding: 10px;
    margin-top: 5px ;

}

@media screen and (max-width:  768px) {
    .calendar_section_main{
        display: flex;
        flex-direction: column;
        margin: 10px 0;
        width: 100%;
    }
    .calendar_left{
        width: 100% !important;
        margin-bottom: 10px;
        padding: 10px;    
        background: var(--bg-box);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
    }
.todo_right{
    width: 100% !important;
    
    }
}
.todo_right .card-rounded{
    padding: 10px;    
    background: var(--bg-box);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);

}
.card-rounded .card-header{
    background: var(--bg-purple);
    padding: .25rem;
    margin-bottom: 15px;
    border-radius: var(--border-radius-half);
}
.card-rounded .card-header h5{
    font-size: 17px;
    color: var(--sec-white);
}
.card-body form .form-group{
    display: flex;
    flex-direction: column;
}
.card-body form .form-group label{
    font-size: 15px;
    margin: 5px;
    color: var(--white);
    font-weight: 800;
}
.card-body form .form-group input{
    padding: 10px; outline: none; 
    border-radius: var(--border-radius-half);
    border: 1px solid var(--filter);
    color: var(--white);
}
 .btn-primary i{
    color: var(--blue) !important;
}
 .btn-primary:hover i{
    color: var(--sec-white) !important;
 }
.text-center{
    align-items: center;
}
.card-footer{
    display: flex;
    margin-top: 5px;
}
.card-footer .text-center {
    display: flex;
    align-items: center;
    justify-content: center;

}
.fc_header h4{
    color: var(--white);
}

#calendar {
    width: 700px auto;
    margin: 0 !important;
}

.response {
    height: 60px;
}

.success {
    background: #cdf3cd;
    padding: 10px 60px;
    border:  1px #c3e6c3 solid;
    display: inline-block;
    color: var(--white);
}

.fc-day-header .fc-widget-header span{
    color: var(--bg-purple) !important;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: #e3a65abd !important;
}

.fc .fc-col-header-cell-cushion {

    color: var(--white) !important;

}

/*================================================
--------------------download_wrapper------
==================================================*/
.dropdown_wrapper{
    display: flex;
    flex-direction: column;
}
.downlaod_header{
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    padding: 8px;
    margin-bottom: 5px;
    background: var(--bg-box);
}
.downlaod_header h5{
    color: var(--bg-blue);
    font-size: 15px;
    font-weight: 700;
}

.download_container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.download_card{
    display: flex;
    flex-direction: column;
    width: 320px auto;
    height: 250px;
    overflow: hidden;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    padding: 10px;
    background: var(--bg-box);
}

.download_card .d_card_top{
    display: flex;
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}

.download_card .d_card_top span{
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.download_card .d_card_top span img{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 5px;
}
.download_card .d_card_top span p{
    font-size: 12px;
    display: flex;
    color: var(--white);
}
.download_card .d_card_top p{
    font-size: 12px;
    display: flex;
    color: var(--white);
}

.d_card_content{
    display: flex;
    flex-direction: column;

}
.d_card_content span{
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 10px 0;
}
.d_card_content span p{
    font-size: 17px;
    margin: 10px;
    font-weight: 700;
    color: var(--bg-purple);
}

.d_card_content p{
    font-size: 14px;
    color: var(--white);
    margin-bottom: 10px;
    text-align: center;
}

.d_card_btm{
    display: flex;
    justify-content: space-around;
}
.d_card_btm button{
    display: flex;
    align-items: center;
    border: none;
    padding: .5rem 1.5rem ;
    background: var(--bg-purple);
    color: var(--white);
    font-size: 14px;
    border-radius: var(--border-radius-2);
    border: 1px solid transparent;
}
.d_card_btm button img{
    width: 14px;
    height: 14px;
    margin-right: 5px;
}
.d_card_btm button:hover{
    background: transparent;
    border: 1px solid var(--bg-blue);
    color: var(--bg-blue);
}
/*==========================================================
-----------------------upload_container--------------------
============================================================*/
.upload_tab_content{
    display: none;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
.upload_container{
    display: flex;
    flex-direction: column;
}
.upload_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    background: var(--bg-box);
    padding: 5px 10px;
    margin-bottom: 10px;
}
.upload_top h3{
    font-size: 18px;
    color: var(--bg-blue);
    font-weight: 700;
}
.upload_top h5{
    color: var(--white);
}
.upload_content{
    display: flex;
    padding-top: 0px;
    border-top: 1px dotted var(--border);
}
.upload_content_left{
    width: 50%;
    margin-right: 20px;
}
.fee_content_right{
    width: 70%;
}
.fee_content_left{
    width: 30%;
    margin-right: 10px;
    margin-bottom: 10px;
}
.upload_content_left h3{
    font-size: 18px;
    color: var(--white);
    margin-bottom: 10px;
}
.fee_chart_active{
    display: none;
}
.upload_tabs{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    width: 100%;
}
.upload_content_left i{
    margin-right: 5px;
}
.upload_tabs button{
    border: 1.3pt solid var(--bg-purple);
    background: var(--filter);
    margin: none;
    border-radius: var(--border-radius-half);
    padding: .4rem .8rem;
    margin: 0 2.5pt;
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
}
.upload_tabs button:first-child{
    margin-left: 0 !important;
}
.upload_tabs button:last-child{
    margin-right: 0 !important;
}
.upload_tabs button:hover{
    background: var(--bg-purple);
    color: var(--sec-white);
}
.upload_tabs button.active{
    background: var(--bg-blue);
    border-color: var(--bg-blue);
    color: var(--sec-white);
    font-weight: 600;
}
.results_container{
    overflow-x: hidden;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    padding: 10px;
    margin-bottom: 10px;
    background: var(--bg-box);
}
.results_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.results_top{
    padding-bottom: 5px;
}
.results_top h5{
    text-align: center;
    font-weight: 700;
    font-size: 17px;
    color: var(--white);
    padding-bottom: 5px;
    border-bottom: 1px dotted var(--border);
}
.results_top button{
    font-size: 12px;
    padding: .3rem .6rem ;
    border: none;
    background: var(--bg-box);
    border: 1px solid var(--blue);
    border-radius: var(--border-radius-half);
    color: var(--white);
    margin-right:5px;
    transition: background .2s ease-in-out;
    font-weight: 600;
}
.results_top button:hover, .results_top button:focus{
    background: var(--border) !important;
    color: var(--blue) !important;
}
.results_top button.active{
    background: var(--bg-purple) !important;
    color: var(--sec-white) !important;
    font-weight: 900;
}
.results_content{
    display: grid;
}
.results_content form .upload_group_container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.results_content form .upload_group{
    display: grid;
}
.upload_group label{
    margin-bottom: 5px;
    font-size: 16px;
    color: var(--white);
    font-weight: 700;
}
.sms_top{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*background: red;*/
    margin-bottom: 15px;
    padding: 5px;
}
.sms_title{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
    background: var(--bg-box);
    min-height: 60px;
    max-height: 60px auto;
    padding: 10px;
    width: 100%;
    color: var(--white);
    border:2px dotted var(--border);
    border-radius: var(--border-radius-half);
}
.upload_group label i {
    color: var(--white);
    font-size: 14px;
    margin-left: 0;
}
textarea{
    width: 100%;
    outline: none;
    border: 1.3pt solid var(--header-border) ;
    padding: .5rem;
    border-radius: var(--border-radius-half);
    background: transparent !important;
    color: var(--white);
}
textarea:focus, textarea:hover{
    border: 1px solid #6d4aff !important;
    outline: 3px solid rgba(114, 80, 255, .3) !important;
}
.upload_group input,
.upload_group textarea,
.learning_content .upload_group select{
    width: 100%;
    outline: none;
    border: 1px solid var(--filter) ;
    padding: .5rem;
    border-radius: var(--border-radius-half);
    font-size:  13px ;
    font-weight: 800;
    color: var(--blue) !important;
}
.upload_group input:hover,
.learning_content .upload_group select:focus,
.upload_group input:focus{
    border: 1px solid #6d4aff;
    outline: 3px solid rgba(114, 80, 255, .3);
}
.upload_group select{
    background: transparent;
    border-color: var(--border);
    color: var(--white) !important;
}
.upload_group select:focus,
.upload_group select::placeholder{
    background: transparent;
    color: var(--filter);
}
.upload_group small{
    color: var(--white);
}
.upload_group_container_btm{
    margin-top: var(--margin-top);
}
.upload_group_container_btm button{
    margin-top: var(--margin-top);
    padding: .5rem 1rem ;
}

.upload_group.radio{
    display: flex;
    justify-content: start;
  }
.upload_group_container_btm button,
.learning_content form button{
    background: var(--bg-purple);
    border: none;
    color: var(--sec-white) !important;
    padding: .5rem 1rem;
    border-radius: var(--border-radius-half);
}
.learning_content form button p{
    color: var(---sec-white);
}
.learning_content form button:hover{
    background: var(--btn-blue);
    color: var(--sec-white);
}

.learning_content{
    display: flex;
    flex-direction: column;
}
.learning_content .upload_group{
    display: grid;
    margin: 20px 0;
}
.learning_content h2{
    color: var(--white);
    align-items: center;
    text-align: center;
    text-decoration: underline;
}

.upload_content_right{
    width: 50%;
}
.upload_content_right .upload_top{
    color: var(--bg-blue);
}
.upload_content_right .upload_top h5{
    font-size: 18px;
}
.uploads {
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    background: var(--bg-box);
    color: var(--white);
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}



/*================================================
---------------------class_performance_container------
==================================================*/
.class_performance{
    display: grid;
}
.c_container_l_top{
    display: flex;
    justify-content: space-between;
    border-radius: var(--border-radius);
    background: var(--bg-box);
    padding: 10px;
}
.c_container_left{
    display: flex;
}
.c_container_left span{
    display: flex;
    text-align: center;
    align-items: center;
    margin-right: 10px;
    justify-content: space-between;
}
.c_container_left span p{
    color: var(--white);
}
.c_container_left .grade{
    color: var(--bg-blue);
    font-weight: 600;
}
.c_container_l_top button{
    background: var(--bg-blue);
    border: none;
    color: var(--sec-white);
    padding: .5rem;
    border-radius: var(--border-radius);
}
/*==========================================================
-----------------------promote_container--------------------
============================================================*/
.promote_container{
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--bg-box);
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    padding: 1rem;
}

.promote_header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.promote_header h3{
    color: var(--bg-blue);
    font-size: 20px;
}

/* From Uiverse.io by Nawsome */ 

.typewriter {
    --blue: #5C86FF;
    --blue-dark: #275EFE;
    --key: #fff;
    --paper: #EEF0FD;
    --text: #D3D4EC;
    --tool: #FBC56C;
    --duration: 3s;
    position: relative;
    left: 5;
    -webkit-animation: bounce05 var(--duration) linear infinite;
    animation: bounce05 var(--duration) linear infinite;
    height: auto;
    cursor: pointer;
  }
  
  .typewriter .slide {
    width: 60px;
    height: 10px;
    border-radius: 3px;
    margin-left: 14px;
    transform: translateX(14px);
    background: linear-gradient(var(--blue), var(--blue-dark));
    -webkit-animation: slide05 var(--duration) ease infinite;
    animation: slide05 var(--duration) ease infinite;
  }
  
  .typewriter .slide:before, .typewriter .slide:after,
  .typewriter .slide i:before {
    content: "";
    position: absolute;
    background: var(--tool);
  }
  
  .typewriter .slide:before {
    width: 1.5px;
    height: 5px;
    top: 6px;
    left: 100%;
  }
  
  .typewriter .slide:after {
    left: 94px;
    top: 3px;
    height: 14px;
    width: 6px;
    border-radius: 3px;
  }
  
  .typewriter .slide i {
    display: block;
    position: absolute;
    right: 100%;
    width: 6px;
    height: 4px;
    top: 4px;
    background: var(--tool);
  }
  
  .typewriter .slide i:before {
    right: 100%;
    top: -2px;
    width: 4px;
    border-radius: 2px;
    height: 14px;
  }
  
  .typewriter .paper {
    position: absolute;
    left: 24px;
    top: -26px;
    width: 40px;
    height: 46px;
    border-radius: 5px;
    background: var(--paper);
    transform: translateY(46px);
    -webkit-animation: paper05 var(--duration) linear infinite;
    animation: paper05 var(--duration) linear infinite;
  }
  
  .typewriter .paper:before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 7px;
    border-radius: 2px;
    height: 4px;
    transform: scaleY(0.8);
    background: var(--text);
    box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
  }
  
  .typewriter .keyboard {
    width: 120px;
    height: 56px;
    margin-top: -10px;
    z-index: 1;
    position: relative;
  }
  
  .typewriter .keyboard:before, .typewriter .keyboard:after {
    content: "";
    position: absolute;
  }
  
  .typewriter .keyboard:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    transform: perspective(10px) rotateX(2deg);
    transform-origin: 50% 100%;
  }
  
  .typewriter .keyboard:after {
    left: 2px;
    top: 25px;
    width: 11px;
    height: 4px;
    border-radius: 2px;
    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    -webkit-animation: keyboard05 var(--duration) linear infinite;
    animation: keyboard05 var(--duration) linear infinite;
  }
  
  @keyframes bounce05 {
    85%, 92%, 100% {
      transform: translateY(0);
    }
  
    89% {
      transform: translateY(-4px);
    }
  
    95% {
      transform: translateY(2px);
    }
  }
  
  @keyframes slide05 {
    5% {
      transform: translateX(14px);
    }
  
    15%, 30% {
      transform: translateX(6px);
    }
  
    40%, 55% {
      transform: translateX(0);
    }
  
    65%, 70% {
      transform: translateX(-4px);
    }
  
    80%, 89% {
      transform: translateX(-12px);
    }
  
    100% {
      transform: translateX(14px);
    }
  }
  
  @keyframes paper05 {
    5% {
      transform: translateY(46px);
    }
  
    20%, 30% {
      transform: translateY(34px);
    }
  
    40%, 55% {
      transform: translateY(22px);
    }
  
    65%, 70% {
      transform: translateY(10px);
    }
  
    80%, 85% {
      transform: translateY(0);
    }
  
    92%, 100% {
      transform: translateY(46px);
    }
  }
  
  @keyframes keyboard05 {
    5%, 12%, 21%, 30%, 39%, 48%, 57%, 66%, 75%, 84% {
      box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }
  
    9% {
      box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }
  
    18% {
      box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }
  
    27% {
      box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }
  
    36% {
      box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
    }
  
    45% {
      box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }
  
    54% {
      box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }
  
    63% {
      box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
    }
  
    72% {
      box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }
  
    81% {
      box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
    }
  }

  .download-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.3em;
    height: 5.3em;
    border: none;
    cursor: pointer;
    border-radius: 0.4em;
  }
  
  .download-container {
    position: relative;
    width: 3.5em;
    height: 3.1em;
    cursor: pointer;
    background: none;
    overflow: hidden;
  }
  
  .folder {
    content: "";
    cursor: pointer;
    position: absolute;
    /* box-shadow: 0 0 5px rgba(0, 0, 0, .3); */
  }
  
  .folder_one {
    bottom: 0;
    width: 100%;
    height: 88%;
    border-radius: 3px;
    border-top: 2px solid rgb(206, 167, 39);
    /* background-color: rgb(252, 212, 80); */
    background: linear-gradient(-35deg, rgb(238, 194, 47) 5%, rgb(255, 223, 118));
  }
  
  .folder_two {
    top: 5%;
    width: 38%;
    height: 19%;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: rgb(206, 167, 39);
    box-shadow: 0 1px 5px -2px rgba(0, 0, 0, 0.5);
  }
  
  .folder_two::before {
    content: "";
    position: absolute;
    display: inline;
    left: 88%;
    width: 0;
    height: 0;
    border-left: 7px solid rgb(206, 167, 39);
    border-top: 0.3em solid transparent;
    border-bottom: 0.3em solid transparent;
    /* background-color: rgb(206, 167, 39); */
  }
  
  .folder_three {
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0.5em;
    bottom: 0;
    width: 2.5em;
    height: 0.9em;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(-35deg, rgb(25, 102, 218), rgb(109, 165, 249));
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  }
  
  .folder_four {
    left: 1em;
    bottom: 0.3em;
    width: 1.5em;
    height: 0.18em;
    border-radius: 1em;
    background-color: rgb(20, 77, 163);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .active_line {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0.9em;
    height: 0.4em;
    background-color: #99999916;
    border: none;
    border-radius: 1em;
    transition: all 0.15s linear;
  }
  
  .button:active .active_line,
  .button:focus .active_line {
    width: 2.3em;
    background-color: rgb(41, 126, 255);
  }
  
  .button:focus .container {
    animation: wow 1s forwards;
  }
  
  @keyframes wow {
    20% {
      scale: 0.8;
    }
  
    30% {
      scale: 1;
      transform: translateY(0);
    }
  
    50% {
      transform: translateY(-6px);
    }
  
    65% {
      transform: translateY(4px);
    }
  
    80% {
      transform: translateY(0);
    }
  
    100% {
      scale: 1;
    }
  }
  
  .text {
    content: "";
    position: absolute;
    top: -4.5em;
    width: 7.7em;
    height: 2.6em;
    background-color: #666;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 5px;
    text-shadow: 0 0 10px rgb(0, 0, 0);
    opacity: 0;
    transition: all 0.25s linear;
  }
  
  .button:hover .text {
    opacity: 1;
  }
  

.promote_content {
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: stretch;
    justify-content: space-between;
}
.promote_content .select_group{
    display: grid;
}
.promote_content .select_group select{
    border-radius: var(--borde-radius-half);
}

.selectize-input{
    height: 40px !important;
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--filter) !important;
}
.selectize-input:focus, .selectize-input:hover{
    border: 1px solid #6d4aff;
    outline: 3px solid rgba(114, 80, 255, .3);
}

.td_checkbox_content{
    display: flex;

}


.td_chekbox{
    display: flex;
    align-items: center;
    margin: 0 3px;
}
.td_chekbox input{
    margin-left: 5px;
}
/*input[type=text]:focus{
    border: 1px solid var(--bg-blue);
}*/
/*===========================================================
----------------------KeyFrames-----------------------------
=============================================================*/
@keyframes growDown {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    50% {
        transform: rotateX(-20deg);
    }
    100% {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}


/*from  theme css
*/

.nav_web{
    padding: 0.4rem;
    color: var(--white) !important;
    background-color: var(--bg-box);
    border-radius: var(--border-radius-half) ;
    font-family: var(--font-family);
    font-size: 14px;
    /*font-weight: bold;*/
}
.nav_web img{
    width: 33px;
    height: 33px;
}
.nav_web:hover{
    background-color: var(--border);
    color: #fff !important;

}
.landing_container{
    display: flex;
    padding: 5px 2rem 1rem 2rem;
    width: 100%;
    background: var(--bg-body);
}
.adm_hm a img{
    height: 20px;
    text-align: center;
}

.breadcrumb{
    display: flex;
}
.breadcrumb span{
    font-size: 15px;
}
.breadcrumb span a{
    text-decoration: none;
    color: var(--sec-white);
}
.breadcrumb span a:hover{
    text-decoration: underline;
}
/*dashboard_container*/
.dashboard_container{
    display: flex;
    padding: 5px 2rem 1rem 2rem;
    width: 100%;
    background: var(--bg-body);
    position: relative;
}
.dashboard_sidebar{
    z-index: 120;
    width: 18%;
    margin-right: 10px;
}
.dashboard_sidebar_active{
    transform: translateX(-20%);
}
.dashboard_sidebar_active{
    width: 10%;
    margin-right: 10px;
}
.dashboard_content{
    width: 100%;
    height: 100%;
    left: 0;
    margin: 0 !important;
}
.dashboard_content_active{
    width: 100%;
    margin: 0 !important;
}

.side_header{
    padding: calc(.6rem - 1px) 1rem;
    width: 100%;
    background-color: #e9e9ec;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--border);
    background: var(--bg-box);
}

.side_header h3{
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--white);
}

.side_header h3 img{
    text-align: center;
    font-size: 18px;
    margin-right: 3px;
    width: 18px;
    color: #616376;
}

table {
    border-color: var(--border) !important;
}
/*========= side nav ==============*/
.custom-side-nav{
    /*position: sticky;
    top: 11vh;*/
    z-index: 120;
    max-width: max-content;
    display: grid;
    overflow-x: hidden;
    margin-top: var(--margin-top);
    padding: .5rem;
    min-height: auto;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-box);
    /* position: fixed; */
}

.custom_side_links>li{
    border: none;
    color: var(--sec-white);
    font-weight: 600;    
    transition: all .3s ease-in-out;
    margin: 10px;
}
.custom_side_links>li a:focus{
    background: var(--border);
    border-radius: var(--border-radius);
    color: var(--white);
}
.custom_side_links>li:last-child {
    border: none;
    margin-top: var(--margin-top);
    background: var(--bg-blue);
    border-radius: var(--border-radius);
}
.custom_side_links>li:last-child a{
    color: var(--sec-white);
}
.custom_side_links>li:last-child a i{
    color: var(--sec-white);
}

.custom_side_links>.init_tab,
.custom_side_links>.side_tab{
    display: block;
    text-decoration: none;
    color: var(--filter);
    text-transform: uppercase;
    font-weight: var(--font-family);
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}

.side_nav{
    /*position: sticky;
    top: 11vh;*/
    z-index: 120;
    max-width: max-content;
    display: grid;
    overflow-x: hidden;
    margin-top: var(--margin-top);
    padding: .5rem;
    min-height: auto;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-box);
    /* position: fixed; */
}
.side_nav_active{
    display: none;
}
.side_links>li{
    border: none;
    color: var(--sec-white);
    font-weight: 600;    
    transition: all .3s ease-in-out;
}
.side_links>li a:focus{
    background: var(--border);
    border-radius: var(--border-radius);
    color: var(--white);
}
.side_links>li:last-child {
    border: none;
    margin-top: var(--margin-top);
    background: var(--bg-blue);
    border-radius: var(--border-radius);
}
.side_links>li:last-child a{
    color: var(--sec-white);
}
.side_links>li:last-child a i{
    color: var(--sec-white);
}

.side_links>.init_tab,
.side_links>.side_tab{
    display: block;
    text-decoration: none;
    color: var(--filter);
    text-transform: uppercase;
    font-weight: var(--font-family);
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}

.init_tab .fa-angle-right,
.init_tab  .fa-arrow-right-long{
    margin-left: 5px;
    color: var(--bl-color);
    font-size: inherit;
    transition: transform .3s ease-in-out;
    /*transform: rotate(90deg);*/
}
.right-chevron-active{
    transform: rotate(450deg);
}
.side_links i{
    font-size: 17px;
    margin-right: 8px;
    color: var(--bg-blue);
}


.init_tab_drop>a>i,
.side_tab>i,
.init_tab>a>img{
    margin-left: none;
    margin-right: 5px;
    font-size: inherit;
}
.init_tab>a>img{
    width: 15px;
    height: 10px;
}
.init_tab_drop{
    display: block;
    /*toggle display block with JS*/
}
.init_tab_drop_active{
    display: block;
}
.init_tab_drop>li>a{
    text-transform: capitalize;
    color: var(--bg-purple);
    border-bottom: 1px solid var(--border);
}

span.drop{
    padding-top: 30px;
}

.side_links a {
    display: block;
    text-decoration: none;
    padding: 12px 15px;
    font-weight: 700;
}

.side_nav a {
  display: inline-block;
  width: 100%;
  color: var(--white);
}

.side_nav ul,
.side_nav ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}



.side_nav ul ul {
  margin-left: 10px;
  border-left: 1px dashed var(--white);
  /* height: 10px; */
  transition: max-height .3s ease-in-out;
}

.side_nav ul ul ul {
  margin-left: 15px;
  border-left: 1px dashed var(--white);
  /* height: 10px; */
  transition: max-height .3s ease-in-out;
}

.side_nav ul ul ul ul {
  margin-left: 15px;
  border-left: 1px dashed var(--white);
  /* height: 10px; */
  transition: max-height 0.3s ease-out;
}

nav ul li ul {
  max-height: 0 !important;
  transition: max-height .5s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.show-list {
  max-height: 500px !important;
  transition: max-height .5s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.right-chevron-active{
    transform: rotate(450deg);
}

/*===============side burger===================*/
.side_burger{
    margin-left: 2rem;
    /*background-color: red;*/
}
.side_burger:hover .nav_title{
    display: flex;
}
.side_burger div{
    position: relative;
    right: 0;
    height: 2px;
    background-color: var(--btn-blue);
    border-radius: 2px;
    margin: 4px;
    transition: all 0.3s ease;
}
.side_burger_active div{
    /*margin: 1px;*/
    height: 2px;
}
.side_burger .s-b-x{
    width: 20px;
    right: 0;    
}
.side_burger .s-b-y{
    width: 25px;
    right: 0;
}
.side_burger .s-b-z{
    width: 20px;
    right: 0;
}
.side_burger:hover .s-b-z,
.side_burger:hover .s-b-y, 
.side_burger:hover .s-b-x{
    background-color: var(--bg-blue);

}
.side_burger_active .s-b-x{
    width: 10px;
    right: -15px;
    bottom: -2px;
    transform: rotate(45deg);
    
}
.side_burger_active .s-b-y{
    width: 25px;
    
}
.side_burger_active .s-b-z{
    width: 10px;
    right: -15px;
    top: -2px;
    transform: rotate(-45deg);
    
}
/*===============side burger===================*/

.side_content{
    z-index: 120;
    display: grid;
    overflow-x: hidden;
    margin-top: 5px;
    padding: .5rem;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background: var(--bg-box);
}
.side_content a{
    display: flex;
    align-items: center;
    font-size: 17px;
    color: var(--white);
}

.side_content a img{
    height: 17px;
    width: 17px;
    margin-right: 3px;
}

.side_content a{
    padding: .6rem 1rem;
    
    text-decoration: none;
    color: var(--white);
    border-bottom: 1px solid var(--border);

}

.side_content a img{
    width: 17px;
    margin-right: 5px;
}
.side_content a:last-child{
    border: none;
    margin-top: var(--margin-top);
    background-color: var(--danger);
    color: var(--sec-white);
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: all .3s ease-in-out;
}
.side_content a:nth-last-child(-n + 2){
    border: none;
}
.side_content a:last-child:hover{
    background-color: #555;
}

.side_content a:hover{
    background-color: var(--border);
    border-radius: var(--border-radius);
}
.side_content a:focus{
    background-color: var(--bg-blue);
    border-radius: var(--border-radius);
    color: var(--white);
    font-weight: 600;
}


/*========= side content ==============*/

.chart_side{
    overflow-x: hidden;
    display: grid;
    margin-top: var(--margin-top);
    padding: .5rem;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background: var(--bg-box);
}



.content_header{
    display: none;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    background-color: var(--bg-blue);
    border-radius: var(--border-radius);
    color: var(--sec-white);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}

.std-avatar{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.dasboard_top{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.top_cards{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}
.top_card{
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    height: 100px;
    color: #415094;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background: var(--bg-box);
}
 .top_card:hover{
    background-color: var(--background);
    border: 1px solid var(--background);
 }

 .top_card:hover {
    background-color: var(--bg-box) !important;
    background: url('../images/top_card.svg') !important;
    background-size: contain !important;
    background-position: center !important;
    border-radius: var(--border-radius);
    box-shadow: 10px 2000px 0px inset rgba(218 231 255 / 84%) !important;
 }
.last_card{
    display: flex;
    justify-content: space-between;
    height: 100px;
    color: #415094;
    border: 1px solid var(--bg-blue);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: none !important;
    background-color: var(--bg-blue);
}
.last_card canvas{
    width: 100%;
    height: 100%;
}
.card_left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 10px;
}
.card_left h4{
    color: var(--bl-color);
}
.card_left p{
    font-size: 13px;
    color: var(--white);
}

.card_total{
    font-weight: 600;
    font-size: 25px;
    color: var(--bg-blue);
}
.card_total p{
    font-weight: 700 !important; 
}
.st_card_menu{
    display: flex;
    flex-direction: column;
}
.st_card_menu .st_card{
    display: flex;
    justify-content: space-between;
}
.st_card h4{
    color: var(--bl-color);
    font-size: 15px;
}
.st_card p{
    font-weight: 700;
    font-size: 20px;
    color: var(--bg-blue);
}
/*income wrapper*/
.income_wrapper{
    display: flex;
    margin-top: var(--margin-top);
}
.list{
    margin-left: 20px;
    color: var(--btn-blue);
}


.icon {
    padding: 10px 15px;
    font-size: inherit;
}
  

.td_icons i{
    margin-right: 5px;
}
.td_delete{
    color: var(--danger);

}

.income_left{
    /*display: grid;*/
    width: 25%;
    /*max-width: 25%;*/
    flex-direction: column;
    margin-right: 10px;
}


.todo_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}
.todo_top h3{
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
}
.todo_tab_toggle{
    display: flex;
    justify-content: space-between;
    margin: 5px 0;

}

.todo_tab_toggle button{
    border: 1px solid var(--border);
    padding: 5px 10px;
    background: transparent;
    border-radius: var(--border-radius-1);
    color: var(--white);
}
.todo_tab_toggle button:hover{
    background: var(--border);
}
.todo_tab_toggle button.active{
    border: 1px solid var(--bg-purple);
    background: var(--bg-purple);
    color: var(--sec-white);
}
.task_view{
    display: flex;
    flex-direction: column;
}
.task{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
}
.task:last-child{
    border: none;
}
.task p{
    color: var(--white);
    font-size: 13px;
}
.task button{
    display: flex;
    font-size: 12px;
    padding: 5px 8px;
    outline: none;
    border: none;
    color: var(--white);
    background: var(--filter);
    border-radius: var(--border-radius-half);
}

.task button img{
    margin-left: 2px;
    width: 12px;
    height: 12px;
}
.task_loading {
    display: flex;
    justify-content: center;
    align-items: center;
}
.task_loading  .view_loader{
    display: flex;
    z-index: 101;
    justify-content: center;
    align-items: center;
    background: var(--bg-box);
    width: inherit;
    height: 18px;
}
.task_loading .view_loader div{
    background: #ffc73c;
    width: 3px;
    height: 10px;
    margin-left: 5px;
    border-radius: var(--border-radius-2);
    animation: view_loader 1.2s infinite;
}

@keyframes view_loader {
    50% {
        height: 22px;
    }
}

.task_loading  .view_loader div:nth-child(1){
    animation-delay: -0.40s;
}

.task_loading  .view_loader div:nth-child(2){
    animation-delay: -0.20s;
}

.task_loading  .view_loader div:nth-child(3){
    animation-delay: 0s;
}
.task_loading  .view_loader div:nth-child(4){
    animation-delay: .2s;
}
.income_side_top form{
    display: flex;
    justify-content: space-between;
    /*background: red;*/
}
.todo_form{
    display: flex;
    flex-direction: column;
    margin: 10px 0;
}
.todo_form input{
    width: 100%;
    padding: .6rem 1rem ;
    outline: none;
    border: 1px solid var(--filter);
    border-radius: var(--border-radius-half);
}

.todo_form input:focus,
.todo_form input:hover{
    border: 1px solid #6d4aff;
    outline: 3px solid rgba(114, 80, 255, .3);
    outline: 3px solid rgba(114, 80, 255, .3);
}

.todo_form button{
    display: flex;
    align-items: center;
    outline: none;
    border: none;
    border-radius: var(--border-radius-half);
    background: var(--bg-purple);
    color: var(--sec-white);
    padding: calc(.6rem + 1px) .7rem;
}
.todo_form button img{
    width: 15px;
    height: 15px;
    margin-left: 3px;
}



.dashboard_content_active .income_left{
    width: 25%;
}
.dashboard_content .income_left{
    width: 25%;
}

.income_side_btm{
    /*width: 100%;*/
    margin: 10px 0 0 0 ;
    display: flex;
    justify-content: flex-end;
}

.income_content {
  display: none;
}

.income_content {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

.send_content {
  display: none;
}

.send_content {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}


.income_side_btm button.active{
    background: var(--blue) !important;
    color: var(--sec-white) !important;
    outline: none !important;
    border: none !important;
    font-weight: 900;
}

.income_side_btm button{
    margin-right: 10px !important;
    border: 2px solid transparent;
    font-weight: 900 !important;
    color: var(--white) !important;
    background: var(--border) !important;
}
.income_side_btm button:hover{
    color: var(--sec-white);
    font-weight: 900;
    background: #74c0fc !important;
    /*outline: 2px solid var(--bg-blue);*/
}

.income_side_btm .canvas_side{
    text-decoration: none;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 500;
    background: var(--background);
    color: var(--white);
    margin: 5px 0;
    border-radius: var(--border-radius-half);
}

.income_container{

    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    background: var(--bg-box);
    margin-top: 5px;
}


.income_content{
    padding: 1rem;
    
}

.income_top h3,
.income_top h2{
    color: var(--bl-color);
}

.income_top span{
    display: flex;
    justify-content: space-between;
}
.income_top span button{
    display: flex;
    align-items: center;
    outline: none;
    border: none;
    padding: 2px 7px !important;
    font-size: 16px;
    color: var(--blue);
    border-radius: var(--border-radius-half);
    background: var(--border) !important;
}
.income_top span button i{
    font-size: 14px !important;
    color: #3bc6ff;
    transform: rotate(-90deg);
    transition: transform .3s;
}
.income_top span button:hover i{
    transform: rotate(360deg);
    color: #06815b;
}

.income_desc{
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}
.income_detail{
    display: grid;
}
.income_detail h3{
    color: var(--white);
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 700;
}

.income_detail p{
    font-size: 15px;
    color: var(--white);
    font-weight: 600;
}
.atendance{
    display: flex;
    margin-top: var(--margin-top);
}
.atendance_left{
    width: 25%;
    margin-right: 10px;
}

.atendance_right{
    width: 75%;
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    background: var(--bg-box);
}


footer{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    margin: 0 4rem;
    border-top: 2px solid var(--border-alpha);
    color: var(--white);
}
.footer_wrapper{
    display: flex;
    align-items: center;
    text-align: center;
}
.footer_wrapper img{
    width: 20px;
    height: 20px;
    margin: 0 5px;
}


/*==================HAMBURGER STYLES=======================*/
.hamburger{
    display: none;
    cursor: pointer;

}

.hamburger div{
    width: 25px;
    height: 2px;
    background-color: var(--bg-box);
    margin: 6px;
    transition: all 0.3s ease;
}

.hamburger .bar-y{
    width: 20px;
}

.hamburger_toggle .bar-x{
    -webkit-transform: rotate(-45deg) translate(-5px, 6px);
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger_toggle .bar-y{
    opacity: 0;
}

.hamburger_toggle .bar-z{
    -webkit-transform: rotate(45deg) translate(-5px, -6px);
    transform: rotate(45deg) translate(-5px, -6px);
}

/*from student css
*/

.std_dash{
    display: flex;
}
.std_dash a img{
    height: 20px;
    text-align: center;
}

.std_chat a img{
    height: 20px;
    text-align: center;
}
.side_student{
    display: flex;
    align-items: center
}
.side_student h3{
    font-size: 15px;
}
/*=================fullcalendar=================*/
.fc-view{
    border: 1px solid var(--border) !important;
}
.fc th {
    border: 1px solid var(--border) !important;
    background: var(--border);
}
.fc-highlight{
    background: var(--bg-purple) !important;
}

.fc-toolbar-chunk .btn-group{
    display: flex !important;

}
.fc-toolbar-title{
    font-size: 15px !important;
}
.fc-toolbar-chunk .btn-group button{
    border-radius: var(--border-radius-half) !important;
    margin: 0 3px;
    font-size: 13px !important;
    background: var(--background);
    color: var(--white);
    font-family: var(--font-family);
}

.active{
    background: var(--bg-purple) !important;
    border-color: var(--bg-purple) !important; 
    color: var(--sec-white) !important;
}
.fc-toolbar-chunk button{
    font-size: 13px !important;
}
.fc-today{
    background: var(--filter) !important;
    color: var(--sec-white) !important;

}
.fc-today:hover{
    background: var(--bg-purple) !important;

}
.fc-left{
    color: var(--bg-blue) !important;

}
.fc-widget-header{
    color: var(--bg-purple) !important;
}
.fc-today-button{
    background: var(--danger) !important;
    color: var(--sec-white) !important;
    border-radius: var(--border-radius-half) !important;
    padding:.5rem 1rem !important ;
    border: none !important;
    outline: none !important;
}
.fc-today-button:hover{
    background: var(--bg-purple) !important;
}
.fc-prev-button{
    margin-right: 5px !important;
}
.fc-prev-button, 
.fc-next-button{
    background: var(--background) !important;
    color: var(--white) !important;
    border-radius: var(--border-radius-half) !important;
    padding: .5rem 1rem !important ;
    outline: none !important;
    border: none !important;
    text-align: center !important;
}

@media screen and (max-width:  768px) {

    .fc-toolbar-chunk .btn-group button{
        border-radius: var(--border-radius-half) !important;
        margin: 0 2px;
        font-size: 11px !important;
        background: var(--background);
        color: var(--white);
        font-family: var(--font-family);
    }

    .fc-prev-button, 
    .fc-next-button,
    .fc-today-button{
        padding: .3rem .5rem !important ;
    }
    .fc-prev-button{
        margin-right: 3px !important;
    }
}
/*fullcalendar*/
.side_student img{
    height: 15px;
    margin-right: 3px;
    text-align: center;
}
.logout{
    display: flex;
    
    align-items: center;
}
.logout img{
    height: 15px;
    text-align: center;
}


/*student_container*/
.student_container{
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
    /*margin-top: 20px;*/
}

.container_top2{
    display: flex;
    justify-content: space-between;
    background: var(--bg-box);
    border-radius: var(--border-radius);
    padding: 0.4rem 1rem;
    align-items: center;
    box-shadow: var(--box-shadow);
    flex-wrap: wrap;
    margin-top: 10px;
}
.container_top{
    display: flex;
    justify-content: space-between;
    background: var(--bg-box);
    border-radius: var(--border-radius);
    padding: 0.4rem 1rem;
    align-items: center;
    box-shadow: var(--box-shadow);
}

.container3{
    display: flex;
    justify-content: space-between;
    background: var(--bg-box);
    border-radius: var(--border-radius);
    padding: 0.4rem 1rem;
    align-items: center;
    box-shadow: var(--box-shadow);
    flex-wrap: wrap;
    margin-top: 10px;
    width: 100%;
}
.container3 .category{
    width: 100%;
}

/* glowing hover card made by: csozi | Website: english.csozi.hu*/

.items{
    position: relative;
    min-height: 70px;
    min-width: 70px;
    margin: 10px;
    flex-grow: 1;
    background: rgb(255, 0, 179);
    background: linear-gradient(137deg, rgb(255, 0, 179) 0%, rgba(0,212,255,1) 100%);
    transition: 0.3s ease;
    border-radius: 30px;
    filter: drop-shadow(0px 0px 30px rgba(209, 38, 197, 0.5));
  }
  
  .items::after {
    content: '';
    background-color: #ffffff;
    position: absolute;
    z-index: 1;
    transition: 0.3s ease;
    height: 98%;
    width: 98%;
    top: 1%;
    left: 1%;
    border-radius: 28px;
  }
  
  .items:hover {
    filter: drop-shadow(0px 0px 30px rgba(209, 38, 197, 1));
  }

.container_top p{
    display: flex;
    align-items: center;
    color: var(--bl-color);
    font-weight: 500;
    text-align: center;
    font-size: 17px;
}

.container_top p img{
    width: 17px;
    height: 17px;
    margin-right: 5px;
}

.actions_center{
    display: flex;
    align-items: center;
}

.actions_center li{
    list-style-type: none;
    list-style: none;
    display: flex;
    align-items: center;
}

.actions_center button{
    display: flex;
    align-items: center;
    margin: 0 3px;
}

.dt-buttons .buttons-print {
    background-color: var(--bg-blue) !important;
    border: none !important;
    border-radius: var(--border-radius-2) !important;
    color: var(--sec-white) !important;
}

.actions_center button img{
    align-items: center;
    width: 11px;
    height: 11px;
}

.actions_center li{
    margin: 0 5px;
    padding: .3rem .8rem;
    border-bottom: 2px solid transparent;
    transition: all .3s ease-in-out;
}

.actions_center li:hover, .actions_center li:focus{
    border-bottom: 2px solid var(--bg-blue);
}

.actions_center li a img {
    align-items: center;
    width: 25px;
    height: 25px;
    background: var(--bg-box);
}
.container_top button{
    display: flex;
    align-items: center;
    outline: none;
    border:  none;
    border-radius: var(--border-radius-half);
    background: var(--border);
    padding: .3rem .5rem;
    font-size: 12px;
    border: 1.3pt solid var(--blue);
    color: var(--white);
}

.container_top button i{
    
    color: var(--white) !important;
}

.container_top button img{
    width: 14px;
    height: 14px;
    margin-right: 5px;
}
.st_timetable table td.day{
    text-transform: italic;
}
.block_timetable{
    width: 100%;
    margin-top: 3px;
    justify-content: space-between;
    background: var(--bg-box);
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    padding: 1rem;
    align-items: center;
    overflow: hidden;
}

.student_list{
    width: 100%;
    margin-top: 3px;
    justify-content: space-between;
    background: var(--bg-box);
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    padding: 1rem;
    align-items: center;
    overflow: hidden;
}


.student_list_header{
    display: flex;
    justify-content: flex-end;
    padding: 10px 5px;
    align-items: center;
    margin-bottom: 10px;
}

.student_list_header{
    display: flex;
}
.student_list_header label{
    cursor: pointer;    
}
.student_list_header label input[type="checkbox"]{
    display: none;
}
.student_list_header label span i{
    display: none;
    margin: 0 !important;
}
.student_list_header label span{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border);
    padding: 5px;
    margin-right: 5px;
    height: 30px;
    width: 100%;
    font-weight: 800;
    color: var(--white);
    border-radius: var(--border-radius-half);
}
.student_list_header label span p{
    font-size: 13px;
}
.student_list_header label input[type="checkbox"]:checked ~ span, .student_list_header label input[type="checkbox"]:checked ~ span i{
    background: var(--bg-purple);
    color: var(--sec-white);
    font-weight: 600;
}
.student_list_header label input[type="checkbox"]:checked ~ .atd_pr{
    background: var(--success);
    color: var(--sec-white);
    font-weight: 600;
}
.student_list_header label input[type="checkbox"]:checked ~ .atd_hd{
    background: var(--white);
    color: var(--sec-white);
    font-weight: 600;
}
.student_list_header label input[type="checkbox"]:checked ~ .atd_ab{
    background: var(--danger);
    color: var(--sec-white);
    font-weight: 600;
}
.student_list_header label input[type="checkbox"]:checked ~ span .atd_p{
    display: none;
}

.student_list_header label input[type="checkbox"]:checked ~ span i{
    display: inline-block;
    color: var(--white);
    font-weight: 800;
    margin-right: 5px !important;
}

.student_list_header h4{
    font-size: 18px;
    font-weight: 600;
    color: var(--white) !important;
    margin-bottom: 10px;
}
.student_list_header button{
    background: var(--border);
    border: 1px solid var(--blue);
    border-radius: var(--border-radius-half);
    display: flex;
    align-items: center;
    color: var(--blue);
    border: none;
    outline: none;
    font-size: 13px;
    padding: .3rem .5rem;
    margin-left: 10px;
}
.student_list_header button:hover{
    background: var(--bg-purple);
    color: var(--sec-white);
}
.student_list_header button i{
    color: var(--blue);
    font-size: 13px;
}

.student_list_header button img{
    width: 15px;
    height: 15px;
    margin-right: 3px;
}

.percent span{
    color: var(--bg-blue);
    font-size: 13px;
    font-weight: 500;
}

.table { 
    width: 100%; 
    margin-bottom: 0; 
    display: table; 
}
thead td,
tfoot td{
    color: var(--white);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
}
tr .subject{
    color: var(--border);
    text-transform: uppercase;
    font-weight: 600;
}

tbody td{
    color: var(--white);
    font-size: 14px;
}
.student_search{
    background: red;
}
.student_list select{
    outline: none !important;
    border: 1px solid var(--border);
}
.student_list label{
    color: var(--bg-blue);
    font-weight: 500;
}
.student_list input{
    border: 1.5pt solid var(--blue) !important;
    outline: none !important;
    border-radius: none !important;
}
.student_list input:hover, 
.student_list input:focus, 
.student_list select:hover,
.student_list select:focus{
    border: 1px solid #6d4aff;
    outline: 3px solid rgba(114, 80, 255, .3) !important;
}

.dataTables_info{
    font-size: 12px !important;
    font-weight: 600;
    color: var(--bg-blue) !important;
}

.dataTables_wrapper .dataTables_length{
    color: var(--white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    color: var(--white) !important;
    background: var(--border) !important;
    border: 1px solid var(--blue) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background: var(--bg-purple) !important;
}
.paginate_button.disabled{
    background: #f0f0f0 !important;
    color: var(--sec-white) !important;
}
.paginate_button{
    padding: .3rem .7rem !important;
    font-weight: 600;
    font-size: 12px !important;
    color: var(--sec-white) !important;
    background: #f0f0f0;
    border-radius: var(--border-radius-half) !important;
    border: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
    background: var(--blue) !important;
    color: var(--sec-white) !important;
}
.dataTables_wrapper {
    border-color: var(--border) !important;
}


.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: none;
  color: black !important;
  border-radius: var(--border-radius-half);
  border: 1px solid #828282;
}
 
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  background: none;
  color: black!important;
}



table.dataTable thead .sorting::after,
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_asc::after {
    display:none !important;
}

table.dataTable thead>tr>td.sorting_asc:before{
    display: none !important;
    border-color: var(--border) !important;
}

table.dataTable thead .sorting_desc::after {
    display:none !important;
}

table.dataTable thead .sorting {
   background-image: url(../images/icons/down.svg);
   background-size: 14px 10px;
   background-repeat: no-repeat;
   background-position: center right;
}

table.dataTable thead .sorting_asc {
   background-image: url(../images/icons/up.svg);
   background-size: 14px 10px;
   background-repeat: no-repeat;
   background-position: center right;
}

table.dataTable thead .sorting_desc {
   background-image: url(../images/icons/down.svg);
   background-size: 14px 10px;
   background-repeat: no-repeat;
   background-position: center right;
}
table.dataTable {
    border-color: var(--border) !important;
}

.student_edit{
    display: flex;
    align-items: center;
}
.student_edit a{
    display: flex;
    align-items: center;
}

.edit{
    display: flex;
}
.edit a{
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: var(--border-radius-half);
    margin-right: 5px;
    font-size: 12px;
    font-weight: 700;
}
.edit a i{
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
}
.edit a img{
    width: 15px;
    height: 15px;
    margin-left: 5px;
}
.edit .pending{
    color: black;
    background: #ffc73c;
}

.edit .delete{
    color: var(--white);
    background: rgba(235, 64, 52, .3);
}
.fee_success{
    position: fixed;
    background: var(--border);
    padding: 10px;
    top: calc(17vh + 0px);
    right: calc(2rem + 3px);
    z-index: 200;
    border-radius: var(--border-radius-half);
}
.edit .delete i{
    color: var(--white);
}
.student_edit a img{
    width: 12px;
    height: 12px;
    margin-right: 3px;
}
.student_edit .edit{
    font-weight: 600 !important;
    font-size: 12px !important;
    margin:0 3px ;
    background: var(--border);
    color: var(--white);
    text-decoration: none;
    padding: calc(.4rem - 1.2pt) .6rem;
    border: 1.2pt solid #3e83f5;
    border-radius: var(--border-radius-half);
}

.student_edit .delete{
    font-weight: 600 !important;
    font-size: 12px !important;
    margin:0 3px ;
    background: transparent;
    color: var(--danger);
    text-decoration: none;
    padding: calc(.4rem - 1.2pt) .6rem;
    border: 1.2pt solid var(--danger);
    border-radius: var(--border-radius-half);
}
.student_edit .delete img, .student_edit .edit img, .student_edit .promote img, .student_edit .demote img{
    width: 15px;
    height: 15px;
}
.student_edit .delete:hover, .student_edit .edit:hover, .student_edit .promote:hover, .student_edit .demote:hover{
    
    background: var(--filter);
    border: 1.2pt solid var(--filter);
}
.student_edit .delete i{
    color: var(--danger) !important;
}
.student_edit .transfer{
    font-weight: 600 !important;
    font-size: 12px !important;
    margin:0 3px ;
    background: transparent;
    color: #3e83f5;
    text-decoration: none;
    padding: calc(.4rem - 1.2pt) .6rem;
    border: 1.2pt solid #3e83f5;
    border-radius: var(--border-radius-half);
}


.student_edit .promote{
    font-weight: 600 !important;
    font-size: 12px !important;
    margin:0 3px ;
    background: transparent;
    color: #07bb73;
    text-decoration: none;
    padding: calc(.4rem - 1.2pt) .6rem;
    border: 1.2pt solid #07bb73;
    border-radius: var(--border-radius-half);
}

.student_edit .promote i {
    color: var(--yellow) !important;
}

.student_edit .demote{
    font-weight: 600 !important;
    font-size: 12px !important;
    margin:0 3px ;
    background: transparent;
    color: var(--yellow);
    text-decoration: none;
    padding: calc(.4rem - 1.2pt) .6rem;
    border: 1.2pt solid var(--yellow);
    border-radius: var(--border-radius-half);
}

.student_edit button{
    outline: none;
    border: none;
}
.student_edit button:focus{
    outline: 3px solid rgba(114, 80, 255, .3);
}
.student_edit i{
    color: var(--btn-blue);
}
.student_edit .delete i{
    color: var(--white);
}

/*.submit_container*/
.submit_container{
    background-color: var(--bg-box);
    box-shadow: 10px 2000px 0px inset rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius);
    /*box-shadow: var(--box-shadow);*/
    padding: 1rem;
    border: 1px solid var(--border);
    background: url(../images/5.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.submit_container button{
    display: flex;
    outline: none;
    border: none;
    background: var(--bg-blue);
    padding: 1rem 2rem;
    color: var(--white);
    border-radius: var(--border-radius-2);
}
.submit_container button img{
    width: 16px;
    height: 17px;
    margin-right: 5px;
}
.submit_container>a{
    display: flex;
    margin-bottom: 1rem;
    text-decoration: none;
    color: var(--white);
}

.submit_container>form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 60vh;
}

.submit_container>form>.submit_group{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.submit_group>label, .submit_group>span, .submit_group>button{
    margin-bottom: 20px;
}

.submit_group>span{
    display: flex;
    flex-direction: column;
}


.submit_group span img{
    width: 70px;
    height: 70px;
    background: var(--bg-blue);
    padding: 20px;
    border-radius: 50%;
}

thead{
    border-color: var(--border) !important;
}
tbody{
    border-color: var(--border) !important;
}
tr{
    border-color: var(--border) !important;
}
td{
    border-color: var(--border) !important;
}

/*edit website*/
.web_page{
    padding-top: 10px;
    border-top: 1px dotted var(--border);
    display: flex;
}

.web_form{
    width: 100%;
}

.edit_web_container_home{
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: var(--bg-box);
    margin: 10px 0;
    border-radius: 1rem;
    box-shadow: 0 0 2px 0 rgb(34 47 62 / 20%), 0 4px 8px 0 rgb(34 47 62 / 15%);
}
.edit_web_container_home h3{
    color: var(--btn-blue);
}

.edit_web_container_home_slider {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: var(--bg-box);
    margin: 10px 0;
    border-radius: 1rem;
    box-shadow: 0 0 2px 0 rgb(34 47 62 / 20%), 0 4px 8px 0 rgb(34 47 62 / 15%);
}
.nav_group{
    display: grid;

}
.nav_item{
    display: grid;
    margin-top: 10px;
}
.nav_item label{
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
}

.nav_item input{
    border: 1px solid var(--filter);
    padding: .7rem;
    border-radius: var(--border-radius-half);
    outline: none;
}
.nav_item input:hover, .nav_item input:focus, .nav_item textarea:hover{
    border: 1px solid #6d4aff !important;
    outline: 3px solid rgba(114, 80, 255, .3) !important;
}
.nav_item p{
    font-size: 12px;
    margin: 5px 0;
    color: var(--white);
}
.nav_item span{
    color: red;
}
.edit_web_container_about{
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: var(--bg-box);
    margin: 10px 0;
    border-radius: 1rem;
    box-shadow: 0 0 2px 0 rgb(34 47 62 / 20%), 0 4px 8px 0 rgb(34 47 62 / 15%);
}
.edit_web_container_about h3{
    font-size: 18px;
    color: var(--btn-blue);
}
.allocate_container{
    display: flex;
    width: 100%;
    margin-top: 10px;
    justify-content: center;
    align-items: center;
}
#allocateBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-blue);
    color: var(--sec-white) !important;
    border: none;
    outline: none;
    padding: 10px;
    border-radius: var(--border-radius-2);
}
#allocateBtn:hover{
    background: var(--blue);
}
#allocateBtn img{
    width: 17px;
    height: 17px;
    margin-left: 10px;
}
.bold{
    font-weight: 700;
}
.green{
    color: #0ead7a !important;
    font-weight: 600;
    font-family: 'Baloo Paaji', cursive;
}
.about_c img{
    object-fit: cover;
    object-position: center;
}
.about_group{
    display: grid;
    margin-top: 5px;
}
.about_group label{
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
}
.about_group textarea{
    border: 1px solid var(--border);
    border-radius: var(--border-radius-half);
    background: var(--bg-box);
}
.field{
    margin-top:20px;
}
.field p{
    margin: 5px 0;
    font-size: 12px;
    color: var(--white);
}
.field p span{
    color: red;
}
.field h3{
    font-size: 18px;
    margin-top:20px;
    color: var(--btn-blue);
}
.web_form h4{
    font-size: 17px;
    font-weight: 700;
    font-family: 'poppins', sans-serif;
    color: var(--white);
    background: var(--filter);
    padding: 5px 10px;
    border-radius: var(--border-radius-half);
}
.web_form form .upload_btn{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0;
}
.web_form form .upload_btn button{
    font-family: 'poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem .8rem;
    background: #3e83f5;
    outline: none;
    border: none;
    border-radius: var(--border-radius-half);
    color: var(--sec-white);
    font-size: 16px;
    font-weight: 600;
}
.upload_btn button img{
    width: 17px;
    height: 17px;
    margin-left: 10px;
}

.upload_btn button i {
    color: var(--sec-white);
}

.div_form_right{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.div_form_right h3{
    margin-bottom: 5px;
    padding: 5px;
    border-radius: var(--border-radius-half);
    background: var(--filter);
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
}
.home_slider_img{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.img_card{
    position: relative;
    background: transparent;
    border-radius: var(--border-radius-half);
}
.home_slider_img .img_card img{
    height: 250px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.img_card img:hover .img_card>p{
    display: flex;
}
.img_card>p{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .5);
    border-radius: var(--border-radius-half);
    color: var(--white);
    font-size: 19px;
    font-weight: 700;
    display: none;
}

.img_card p i{
    color: var(--white);
}

.img_card img{
    width: 250px;
    height: 150px;
    border-radius: var(--border-radius-half);
}

.img_card span button{
    display: flex;
    margin-top: 5px;
    padding: 5px 20px;
    outline: none;
    border: none;
    background: #f5f5f5;
    border-radius: var(--border-radius-1);
}
.img_card span button i, .img_card span button p{
    color: var(--danger);
    margin-right: 5px;
}
.img_card span button:hover{
    background: var(--danger);
}
.img_card span button:hover i, .img_card span button:hover p{
    color: var(--sec-white);
}

.about_content{
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}
.about_c_g{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
}
.about_c{
    margin: 5px 0;
    background: var(--bg-box);
    border-radius: 1rem;
    box-shadow: 0 0 2px 0 rgb(34 47 62 / 20%), 0 4px 8px 0 rgb(34 47 62 / 15%);
    padding: 10px;
}
.about_c label{
    font-size: 17px;
    color: var(--bg-purple);
    font-weight: 600;
    margin-bottom: 15px;
}
.form_title{
    font-size: 17px;
    color: var(--btn-blue);
    font-weight: 600;
    margin-bottom: 5px;
    font-family: 'Baloo Paaji', cursive;
}
.about_c p{
    color: var(--white);
    margin-top: 10px;
}
.about_c button p{
    margin: 0 !important;
    color: var(---sec-white) !important;
}

.about_c span{
    display: flex;
}
.about_c button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 2.5pt;
    outline: none;
    padding: 5px 10px;
    text-align: center;
    border-radius: var(--border-radius-half);
    font-size: 12px;
    font-weight: 600;
}
.about_c .btn-danger{
    outline: none;
    background: var(--border);
    color: var(--danger);
    border: 1px solid var(--danger);
}
.about_c .btn-danger:hover{
    background: var(--danger);
    color: var(--sec-white);
}
.about_c button i{
    color: var(--danger);
    margin-left: 0;
}
.about_c_g img{
    width: 100%;
    height: 120px;
    border-radius: var(--border-radius-half);
}
.about_c img{
    width: 100%;
    height: 180px;
    border-radius: var(--border-radius-half);
}
.about_title{
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
}

    input[type="file"] {
  display: block;
}
.imageThumb {
  max-height: 100px;
  min-width: 200px;
  max-width: 250px;
  min-height: 75px;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
}
.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: var(--white);
  color: var(--sec-white);
  text-align: center;
  cursor: pointer;
  border-radius: 0 0 3px 3px;
}
.field{
    margin-bottom: 20px;
}
.remove:hover {
  background: var(--yelloe);
  color: var(--white);
}

.field input{
    margin: 2rem 0;
    width: clip;
}
.field p, 
.field h3{
    color: var(--white);
}
.sign-in{
    border-top: 1px dotted var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background: var(--filter);
    border-radius: var(--border-radius-half);
    padding: 3px 5px;
}

.sign-in p{
    font-size: 16px;
    font-weight: bold;
    color: var(--bg-purple) !important;
}
.sign-in form{
    display: flex;
}
.signin_form{
    display: flex;
    align-items: center;
    text-align: center;
}
.sign-in form button{
    margin-right: 20px;
    
    padding: 0 10px;
    height: 25px;
    
    color: var(--sec-white);
    border-radius: var(--border-radius-half);
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: bold;
    
}
.sign-in form .btn-in{
    border: 1px solid var(--btn-blue);
    background: var(--btn-blue);
}

.sign-in form .btn-out{
    border: 1px solid var(--danger);
    background: var(--danger);
}
.sign-in form .btn-in:hover{
    background: var(--bg-purple);
    color: var(--sec-white);
}
.sign-in form .btn-out:hover{
    background: red;
    color: var(--sec-white);
}

.sign-in form button img{
    width: 15px;
    height: 15px;
    margin-left: 5px;
}

.t_dash{
    display: flex;
    border-top: 1px dotted var(--border);
    padding-top: 5px;
}
.t_dash_l{
    width: 60%;
    
}
.events_list{
    background: var(--bg-box);
    padding: 10px;
    border-radius: var(--border-radius);
    box-shadow: 0 0 2px 0 rgb(34 47 62 / 20%), 0 4px 8px 0 rgb(34 47 62 / 15%);
    border: 1px solid var(--border);
}
.t_dash_r{
    width: 40%;
    margin-left: 10px;
    /*padding: 5px;*/
}

.t_dash_r_e{
    margin-top: 0px;
    padding: 10px;
    background: var(--bg-box);
    border-radius: var(--border-radius);
}
.t_dash_r_e h3{
    color: var(--bg-purple);
    margin-bottom: 5px;
    border-bottom: 1px dotted var(--border);
}
.t_dash_r_e .events{
    display: grid;
}
.t_dash_r_e .events .event{
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted var(--border);
}
.t_dash_r_e .events .event:last-child{
    border: none;
}
.events .event p{
    font-size: 13px;
    font-family: var(--font-family);
    color: var(--white);
}
.events .event span{
    font-size: 12px;
    width: 100px;
    margin-left: 2rem;
    color: var(--bg-purple);
    font-weight: 700;
}
.t_dash_r_e .add_event{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}
.t_dash_r_e .add_event button{
    padding: 5px 10px;
    background: var(--bg-purple);
    border-radius: var(--border-radius-half);
    color: var(--sec-white);
    outline: none;
    border: none;
    transition: .3s ease-in-out;
}
.t_dash_r_e .add_event button:hover{
    background: var(--white);
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding-top: 30px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  overflow-x: visible;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
  backdrop-filter: blur(10px);

}

/* Modal Content */
.modal-content {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-box);
    margin: auto;
    padding: 10px;
    border: 1px solid var(--border);
    width: 65%;
    border-radius: var(--border-radius);
    height: 50vh auto;
}

.modal-content .modal-top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px dotted var(--border);
    align-items: center;
    text-align: center;
}

/* The Close Button */
.close,
.close_bal {
  color: var(--white);
  float: right;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 1px dotted var(--border);
  background: var(--border);
  padding: 5px 10px;
  border-radius: var(--border-radius-half);

}

.close:hover,
.close_bal:hover,
.close_bal:focus,
.close:focus {
  background: var(--filter);
}
.filtered_data .loader_fil{
    width: 650px;
}
.filtered_data  .filter_loader{
    display: flex;
    z-index: 101;
    justify-content: center;
    align-items: center;
    background: var(--bg-box);
    width: inherit;
    height: 100px;
}
.filtered_data .filter_loader div{
    background: #ffc70c;
    width: 6px;
    height: 20px;
    margin-left: 5px;
    animation: pay_loader 1.2s infinite;
}

@keyframes filter_loader {
    50% {
        height: 40px;
    }
}

.filtered_data  .filter_loader div:nth-child(1){
    animation-delay: -0.40s;
}

.filtered_data  .filter_loader div:nth-child(2){
    animation-delay: -0.20s;
}

.filtered_data  .filter_loader div:nth-child(3){
    animation-delay: 0s;
}
.filtered_data  .filter_loader div:nth-child(4){
    animation-delay: .2s;
}
.edit_container,
.filtered_data{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 20px 10px 0px 10px;
    grid-gap: 10px;
    font-size: 13px;
}
.edit_all_container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 20px 10px 0px 10px;
    grid-gap: 10px;
    font-size: 13px;
}
.modal-content .modal-top h3{
    color: var(--white);
    text-transform: uppercase;
}
.edit_container .edit_group label,
.edit_all_container .edit_group label,
.filtered_data .edit_group label{
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px !important;
    font-family: var(--font-family);
}
.edit_container .edit_group,
.filtered_data .edit_group,
.edit_all_container .edit_group{
    display: grid !important;
}
.edit_container .edit_group>input,
.filtered_data .edit_group>input,
.edit_all_container .edit_group>select{
    border: 1px solid var(--filter);
    padding: .5rem 1rem;
    outline: none;
    border-radius: var(--border-radius);
    color: var(--btn-blue);
    font-weight: 700;
}
.edit_container .edit_group>input:hover,
.filtered_data .edit_group>input:hover,
.filtered_data .edit_group>select,
.edit_all_container .edit_group>select:hover,
.edit_all_container .edit_group>select:focus,
.edit_container .edit_group>input:focus{
    border: 1px solid #6d4aff;
    outline: 3px solid rgba(114, 80, 255, .3);
}
.modal-content form .edit_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--border);
    padding: 10px;
    margin-top: 20px;
}
.modal-content form .edit_btn button{
    display: flex;
    align-items: center;
    padding: .5rem 1.4rem;
    outline: none;
    border: none;
    border-radius: var(--border-radius);
    background: var(--btn-blue);
    color: var(--sec-white);
    font-size: 16px;
}
.modal-content form .edit_btn button i{
    margin: none;
    margin-right: 5px;
    font-size: 16px;
    color: var(--sec-white);
}
.modal-content form .edit_btn button img{
    width: 16px;
    height: 16px;
    margin-left: 5px;
}


.images_edit_cards{
    display: grid ;
    grid-template-columns: repeat(2, 1fr);
    margin: 10px 0 !important;
    grid-column-gap: 10px;
}
.images_edit_cards .image_edit{
    display: flex;
    flex-direction: column;
    background: var(--border);
    border-radius: var(--border-radius-1);
    padding: 10px;
}
.images_edit_cards .image_edit label{
    color: var(--white);
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 700;
}
.images_edit_cards .image_edit img{
    width: 100% ;
    height: 200px;
    border-radius: 5px;
    margin-bottom: 5px;
    object-fit: cover;
    object-position: center;
}
/*fee_balance_p*/

.fee_balance_p{
    display: flex;
    justify-content: space-between;
}

.fee_balance_p{
    margin: 1rem 0;
}
.pay_btn{
    padding: 0 10px;
    height: 35px;
    background: var(--mst-hover);
    color: var(--white) !important;
    border: 1.2pt solid var(--blue);
    outline: none;

}
.pay_btn:hover{
    background: var(--filter);
    color: var(--white);
}

.pay_modal {
  display: none;  /*Hidden by default*/ 
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding-top: 20vh; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  overflow-x: visible;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
  backdrop-filter: blur(10px);

}


.pay_modal_content {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-box);
    margin: auto;
    /*padding: 10px;*/
    border: 1px solid var(--border);
    width: 25%;
    border-radius: var(--border-radius);
    height: 50vh auto;
}

.pay_modal_content .pay_modal_top{
    display: flex;
    padding: 5px;
    justify-content: space-between;
    border-bottom: 2px dotted var(--border);
    align-items: center;
    text-align: center;
}
.pay_modal_top h4{
    color: var(--white);
    font-weight: 900;
    font-size: 25px;
}


.close_bal,.close_mpesa {
  color: var(--white);
  float: right;
  font-size: 18px;
  font-weight: 50;
  font-weight: bold;
  margin-bottom: 1px dotted var(--border);
  background: var(--border);
  padding: 5px 10px;
  border-radius: var(--border-radius-half);

}

.close_bal:hover,.close_mpesa:hover, .close_mpesa:focus,
.close_bal:focus {
  color: var(--white);
  background: var(--filter);
  text-decoration: none;
}

.modal_form{
    padding: 10px;
}

.pay_group{
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.pay_group_btn{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.pay_group label{
    font-size: 14px;
    color: var(--white);
    margin-bottom: 5px;
    font-weight: 700;
}
.pay_group input{
    border: 1px solid var(--filter);
    padding: 0.6rem 1rem;
    outline: none;
    border-radius: var(--border-radius-half);
    color: var(--btn-blue);
    font-weight: 600;
    font-size: 11px;
}
.pay_group select{
    border: 1px solid var(--border);
    padding: .6rem 1rem;
    outline: none;
    border-radius: var(--border-radius-half);
    font-weight: 700;
    font-size: 11px;
}
.pay_group input:focus,
.pay_group select:focus{
    border: 1px solid #6d4aff;
    outline: 3px solid rgba(114, 80, 255, .3);
    outline: 3px solid rgba(114, 80, 255, .3);
}
.pay_group button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 10px;
    background: var(--bg-purple);
    border-radius: var(--border-radius-half);
    color: var(--sec-white);
    outline: none;
    border: none;
}

.pay_group button:hover{
    background: var(--blue);
    color: var(--sec-white);
}

.pay_group button img{
    width: 15px;
    height: 15px;
    margin-left: 5px;
}


.b_history{
    position: fixed;
    z-index: 800;
    bottom: 1rem;
    right: calc(2rem + 5px);
    outline: none;
    border: none;
    padding: 7px 15px;
    background: rgb(255 135 0)/*rgba(0, 0, 0, .3)*/;
    color: var(--sec-white);
    font-size: 14px;
    border-radius: var(--border-radius-half);
}
.b_history i{
    color: var(--sec-white);
    font-size: 13px;
}
.b_history:hover{
    background: var(--bg-purple);
}

.pay_btn{
    display: flex;
    align-items: center;
}
.pay_btn img{
    width: 15px;
    height: 15px;
    margin-left: 5px;
}


/*class information*/

.class_info{
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.class_info p{
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
    padding: 10px 0;
}
.class_info_view{
    display: grid;
}
.class_info_list{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--border);
}
.class_info_list h5{
    font-size: 16px;
    color: var(--white);
}
.class_info_list .class_cnt{
    font-weight: 800;
    color: var(--bg-purple);
}
.class_info_list .class_std, .class_lbl_count{
    background: var(--bg-blue);
    padding: 3px 5px;
    border-radius: var(--border-radius-half);
    height: fit-content;
    color: var(--sec-white);
}
.gender_filter{
    display: grid;
}
.gender_filter .g_fil{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
.gender_filter .g_fil h5{
    color: var(--bg-blue);
    margin-right: 20px;
}
.class_info_list p{
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
}

.class_info_sbj{
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.sbjs{
    display: grid;

}
.sbjs h4{
    margin-bottom: 15px;
    color: var(--white);
}
.sbj_list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 8px;
}
.sbj_list p{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 7px 10px 5px 7px;
    font-size: 12px;
    background: var(--filter);
    border-radius: var(--border-radius-half);
    text-align: center;
}
.sbj_right{
    display: grid;

}
.sbj_right h5{
    font-size: 17px;
    font-weight: 700;
}

.sbj_right p{
    color: var(--white);
    text-transform: initial;
}
.class_fee_info{
    padding: 10px;
    border-top:  1px solid var(--border);
    border-bottom:  1px solid var(--border);
}
.class_fee_info h4{
    font-size: 17px;
    color: var(--bg-purple);
}
.fee_info_view{
    display: flex;
    justify-content: space-between;
}
.fee_info_left{
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}
.fee_list{
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}
.fee_list h5{
    margin-right: 20px;
    color: var(--white);
    font-size: 17px;
}
.fee_list p{
    font-size: 16px;
    color: var(--white);
    font-weight: 700;
}
.fee_list .due{
    color: var(--danger);
    font-weight: 700;
}
.fee_list .paid{
    color: var(--success);
    font-weight: 700;
}
.fee_list .allocated{
    color: var(--btn-blue);
    font-weight: 700;
}
.class_timetable{
    padding: 10px;
}
.class_timetable h4{
    color: var(--white);
}
.assign{
    border: none;
    border-radius: var(--border-radius-half) !important;
    outline: 1.3pt solid var(--btn-blue) !important;
    background: transparent; 
    color: var(--btn-blue) !important;    
    font-size: 12px !important;
    padding: 8px !important;
    
}
.assign:hover{
    color: var(--sec-white) !important;
    background: var(--btn-blue);
    outline: none;
    
}
.modal2 {
    display: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    border-radius: 10px;
    
    z-index: 1000;
}
.modal-content2 {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/*timetable
*/
.st_timetable{
    width: inherit;

}
.st_timetable h4{
    font-weight: 700;
    margin: 10px 0;
    color: var(--white);

}
.st_timetable table{
    width: 100%;
}

.st_timetable>table>thead>tr{
    background: var(--border);
    border-radius: var(--border-radius-half);
}
.st_timetable>table>thead>tr>td{
    padding: 10px;
    border: 1px solid var(--border);
}
.st_timetable>table>tbody>tr>td{
    padding: 10px;
}

.st_timetable>table>tbody>tr{     
    border: 1.3pt solid var(--border) !important;
    border-spacing: 0 !important;
}

.st_timetable>table>tbody>tr>.break{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-collapse: collapse;
    color: var(--danger);
    font-weight: 800;
}
.st_timetable>table>tbody>tr>.timetable-time{
    font-weight: 800;
}

.class_info_bfr{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}
.canva_fee_status{
    height: 200px;
    width: 200px;
}

.options_top_bar{
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.category{
    display: grid;
}
.category form {
    display: grid;
}
.category_group {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.category_group label{
    margin:  10px 0;
    color: var(--white);
    font-weight: 700;
}
.category_group input,.category_group select{
    padding: .6rem 1rem;
    border: 1px solid var(--filter);
    border-radius: var(--border-radius-half);
    outline: none;
}
.category_group input:focus,.category_group select:focus,.category_group input:hover,.category_group select:hover{
    border: 1px solid #6d4aff;
    outline: 3px solid rgba(114, 80, 255, .3);
}
.category_group button{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    color: var(--sec-white);
    padding: .6rem 5rem;
    background: var(--bg-purple);
    font-weight: 800;
    outline: none;
    border: none;
    border-radius: var(--border-radius);
}
.category_group button:hover,.category_group button:hover i{
    background: var(--bg-blue);
    color: var(--sec-white);
}

.container3 .category .category_group input{
    width: 100%;
}



/**************BOOTSTRAP******************/
/**************BOOTSTRAP******************/
/**************BOOTSTRAP******************/
/**************BOOTSTRAP******************/
output {
  display: inline-block;
}

iframe {
  border: 0;
}

summary {
  display: list-item;
  cursor: pointer;
}

progress {
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}


.lead {
  font-size: 13px !important;
  font-family: var(--font-family);
  font-weight: 300;
  margin: 10px 0 !important;
}

.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}

.display-2 {
  font-size: calc(1.575rem + 3.9vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}

.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}

.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}

.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}

.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}
.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
.blockquote > :last-child {
  margin-bottom: 0;
}

.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #6c757d;
}
.blockquote-footer::before {
  content: "— ";
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 0.875em;
  color: #6c757d;
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }

  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }

  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }

  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }

  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }

  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }

  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }

  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }

  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }

  .g-sm-0,
.gx-sm-0 {
    --bs-gutter-x: 0;
  }

  .g-sm-0,
.gy-sm-0 {
    --bs-gutter-y: 0;
  }

  .g-sm-1,
.gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-sm-1,
.gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-sm-2,
.gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-sm-2,
.gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-sm-3,
.gx-sm-3 {
    --bs-gutter-x: 1rem;
  }

  .g-sm-3,
.gy-sm-3 {
    --bs-gutter-y: 1rem;
  }

  .g-sm-4,
.gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-sm-4,
.gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-sm-5,
.gx-sm-5 {
    --bs-gutter-x: 3rem;
  }

  .g-sm-5,
.gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }

  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }

  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }

  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }

  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.3333333333%;
  }

  .offset-md-2 {
    margin-left: 16.6666666667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.3333333333%;
  }

  .offset-md-5 {
    margin-left: 41.6666666667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.3333333333%;
  }

  .offset-md-8 {
    margin-left: 66.6666666667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.3333333333%;
  }

  .offset-md-11 {
    margin-left: 91.6666666667%;
  }

  .g-md-0,
.gx-md-0 {
    --bs-gutter-x: 0;
  }

  .g-md-0,
.gy-md-0 {
    --bs-gutter-y: 0;
  }

  .g-md-1,
.gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-md-1,
.gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-md-2,
.gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-md-2,
.gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-md-3,
.gx-md-3 {
    --bs-gutter-x: 1rem;
  }

  .g-md-3,
.gy-md-3 {
    --bs-gutter-y: 1rem;
  }

  .g-md-4,
.gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-md-4,
.gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-md-5,
.gx-md-5 {
    --bs-gutter-x: 3rem;
  }

  .g-md-5,
.gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }

  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }

  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }

  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }

  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }

  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }

  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }

  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }

  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }

  .g-lg-0,
.gx-lg-0 {
    --bs-gutter-x: 0;
  }

  .g-lg-0,
.gy-lg-0 {
    --bs-gutter-y: 0;
  }

  .g-lg-1,
.gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-lg-1,
.gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-lg-2,
.gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-lg-2,
.gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-lg-3,
.gx-lg-3 {
    --bs-gutter-x: 1rem;
  }

  .g-lg-3,
.gy-lg-3 {
    --bs-gutter-y: 1rem;
  }

  .g-lg-4,
.gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-lg-4,
.gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-lg-5,
.gx-lg-5 {
    --bs-gutter-x: 3rem;
  }

  .g-lg-5,
.gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }

  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }

  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }

  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }

  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }

  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }

  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }

  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }

  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }

  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }

  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }

  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }

  .g-xl-0,
.gx-xl-0 {
    --bs-gutter-x: 0;
  }

  .g-xl-0,
.gy-xl-0 {
    --bs-gutter-y: 0;
  }

  .g-xl-1,
.gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-xl-1,
.gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-xl-2,
.gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-xl-2,
.gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-xl-3,
.gx-xl-3 {
    --bs-gutter-x: 1rem;
  }

  .g-xl-3,
.gy-xl-3 {
    --bs-gutter-y: 1rem;
  }

  .g-xl-4,
.gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-xl-4,
.gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-xl-5,
.gx-xl-5 {
    --bs-gutter-x: 3rem;
  }

  .g-xl-5,
.gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }

  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }

  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }

  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }

  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }

  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }

  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }

  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-xxl-0 {
    margin-left: 0;
  }

  .offset-xxl-1 {
    margin-left: 8.3333333333%;
  }

  .offset-xxl-2 {
    margin-left: 16.6666666667%;
  }

  .offset-xxl-3 {
    margin-left: 25%;
  }

  .offset-xxl-4 {
    margin-left: 33.3333333333%;
  }

  .offset-xxl-5 {
    margin-left: 41.6666666667%;
  }

  .offset-xxl-6 {
    margin-left: 50%;
  }

  .offset-xxl-7 {
    margin-left: 58.3333333333%;
  }

  .offset-xxl-8 {
    margin-left: 66.6666666667%;
  }

  .offset-xxl-9 {
    margin-left: 75%;
  }

  .offset-xxl-10 {
    margin-left: 83.3333333333%;
  }

  .offset-xxl-11 {
    margin-left: 91.6666666667%;
  }

  .g-xxl-0,
.gx-xxl-0 {
    --bs-gutter-x: 0;
  }

  .g-xxl-0,
.gy-xxl-0 {
    --bs-gutter-y: 0;
  }

  .g-xxl-1,
.gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-xxl-1,
.gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-xxl-2,
.gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-xxl-2,
.gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-xxl-3,
.gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }

  .g-xxl-3,
.gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }

  .g-xxl-4,
.gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-xxl-4,
.gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-xxl-5,
.gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }

  .g-xxl-5,
.gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}




/**************BOOTSTRAP******************/
/**************BOOTSTRAP******************/
/**************BOOTSTRAP******************/
/**************BOOTSTRAP******************/



/*loadeer*/

/**
  * Building blocks
  *
  * @author jh3y - jheytompkins.com
*/
@-webkit-keyframes building-blocks {
  0%,
  20% {
    opacity: 0;
    -webkit-transform: translateY(-300%);
            transform: translateY(-300%); }
  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  90%,
  100% {
    opacity: 0;
    -webkit-transform: translateY(300%);
            transform: translateY(300%); } }
@keyframes building-blocks {
  0%,
  20% {
    opacity: 0;
    -webkit-transform: translateY(-300%);
            transform: translateY(-300%); }
  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  90%,
  100% {
    opacity: 0;
    -webkit-transform: translateY(300%);
            transform: translateY(300%); } }

.building-blocks {
    display: flex;
    position: relative;
    align-items: center;
    justify-items: center;
    background: red;
}
  .building-blocks div {
    height: 10px;
    position: absolute;
    width: 10px; }
    .building-blocks div:after {
      -webkit-animation: building-blocks 2.1s ease infinite backwards;
              animation: building-blocks 2.1s ease infinite backwards;
      background: var(--bg-purple);
      content: '';
      display: block;
      height: 10px;
      width: 10px; 
      border-radius: 2px;
  }
    .building-blocks div:nth-child(1) {
      -webkit-transform: translate(-50%, -50%) translate(60%, 120%);
              transform: translate(-50%, -50%) translate(60%, 120%); }
    .building-blocks div:nth-child(2) {
      -webkit-transform: translate(-50%, -50%) translate(-60%, 120%);
              transform: translate(-50%, -50%) translate(-60%, 120%); }
    .building-blocks div:nth-child(3) {
      -webkit-transform: translate(-50%, -50%) translate(120%, 0);
              transform: translate(-50%, -50%) translate(120%, 0); }
    .building-blocks div:nth-child(4) {
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
    .building-blocks div:nth-child(5) {
      -webkit-transform: translate(-50%, -50%) translate(-120%, 0);
              transform: translate(-50%, -50%) translate(-120%, 0); }
    .building-blocks div:nth-child(6) {
      -webkit-transform: translate(-50%, -50%) translate(60%, -120%);
              transform: translate(-50%, -50%) translate(60%, -120%); }
    .building-blocks div:nth-child(7) {
      -webkit-transform: translate(-50%, -50%) translate(-60%, -120%);
              transform: translate(-50%, -50%) translate(-60%, -120%); }
  .building-blocks div:nth-child(1):after {
    -webkit-animation-delay: 0.15s;
            animation-delay: 0.15s; }
  .building-blocks div:nth-child(2):after {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s; }
  .building-blocks div:nth-child(3):after {
    -webkit-animation-delay: 0.45s;
            animation-delay: 0.45s; }
  .building-blocks div:nth-child(4):after {
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s; }
  .building-blocks div:nth-child(5):after {
    -webkit-animation-delay: 0.75s;
            animation-delay: 0.75s; }
  .building-blocks div:nth-child(6):after {
    -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s; }
  .building-blocks div:nth-child(7):after {
    -webkit-animation-delay: 1.05s;
            animation-delay: 1.05s; }


/*modal-content*/
.modal-content .modal-header{
    display:  flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--filter);
}
.modal-content .modal-header h5{
    font-size: 18px;
}

.modal-content .modal-header .btn-close{
    background: var(--border);
    outline: none;
    border: none;
    padding:5px 10px;
    font-size: 18px;
    color: var(--white);
    border-radius: var(--border-radius-half);
    text-align: center;
    transition: transdorm .3s;
}
.modal-content .modal-header .btn-close:hover{
    /*transform: rotate(145deg);*/
    background: var(--filter);
}

.modal-body dl dt{
    color: var(--blue);
    font-size: 18px;
    font-weight: 800;
    margin: 5px 0;
}

.modal-body dl dd{
    font-size: 14px;
    font-weight: 300;
    color: var(--white);
}

.modal-footer .text-end{
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    margin-top: 20px;
    /*border-top: 1px solid var(--filter);*/
}
.btn-danger{
    background: var(--danger);
    border: 1.pt solid var(--danger) !important;
    color: var(--sec-white);
}
.btn-secondary{
    background: var(--bg-purple);
    border: 1.pt solid var(--bg-purple) !important;
    color: var(--sec-white) !important;
}





/*================Header search============================*/

.header_search {

    width: 100%;
}  

.search-input {
    align-items: center;
    width: 100%;
    padding: 9px 40px;
    position: relative;
    width: 400px;
    font-size: 12px;
    background-color: var(--border) !important;
    font-family: var(--font-family);
    color: var(--white);
    outline: none;
    border: 1.4pt solid transparent;
    border-radius: var(--border-radius-half);
    /*transition: width .3s ease-in-out;*/
}
.search-input:hover{
    border: 1.4pt solid var(--blue) !important;
}
.search-input:focus{
    width: 400px !important;
    border: 1.4pt solid #6eff4a;
    outline: 3px solid rgba(114, 80, 255, .3);
}
.header_search i {
    position: absolute;
    left: 10px;
    text-align: center;
    color: var(--filter);

}

.search_header_modal {
    display: none;
    width: 400px;
    min-width: 400px;
    transition: all .3s ease-in-out;
    position: absolute;
    font-family: var(--font-family);
    font-size: 11px;
    top: 8vh;
    color: var(--white);
    align-items: center;
    background: var(--bg-box);
    padding: 3px;
    border-radius: var(--border-radius-half);
    border: none;
    box-shadow: 0px 20px 50px -20px rgba(0,0,0,0.25);
    border: 1.3pt solid var(--header-border);

}


.search_header_btns {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.search_header_btns h3{
    color: var(--white);
    font-weight: 800;
    margin: 5px 10px;
    font-size: 18px;
}

.search_header_modal .search_header_btns .top_search_btns{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 5px;
    margin: 10px;
}

.search_header_modal .search_header_btns .top_search_btns button{
    outline: none;
    border: none;
    padding: .3rem .5rem;
    background: var(--border);
    border-radius: var(--border-radius-half);
    color: var(--white);

}

.top_search_btns button.active {
    background: var(--blue);
}

.search_header_modal .search_header_btns .top_search_btns button:hover{
    background: var(--blue);
    color: var(--sec-white);
}

.search-modal table{
    width: 100% !important;
    table-layout: fixed;
    border-top: 1.6pt solid var(--header-border) !important;
}
.search-modal table tr{
    display: flex !important;
    justify-content: space-between;
    border-bottom: 1.3pt solid var(--header-border)!important;
    padding: 7px 3px !important;
}
.search-modal table tr:last-child{
    border: none !important;
}
.search-modal table tr td{
    margin-right: 8px;
    font-size: 12px !important;
    text-align: left;
}
.search-modal table tr td:last-child{
    margin-right: none;
}
.search-modal table tr td i{
    color: var(--blue);
    margin-right: 10px !important;
}
.search-modal>table>tr>td:last-child{
    border: none !important;
}

.search-modal table tr:hover{
    background: var(--border) !important;
    border-radius: var(--border-radius-half);
}
/*================Header search============================*/




.file-drop-zone {
        position: relative;
        border: 2px dashed #ccc;
        padding: 2em;
        border-radius: var(--border-radius-half);
        text-align: center;
        cursor: pointer;
    }
    
    .file-drop-zone.drag-over {
        background-color: #f5f5f5;
    }
    
    .file-input {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        cursor: pointer;
    }
    
    .drop-message {
        display: block;
        margin-bottom: 1em;
        color: var(--white);
    }

     .preview {
        display: none;
        max-width: 100%;
        max-height: 100%;
    }

.swal2-html-container{
    color: var(--white) !important;
    font-family: var(--font-family) !important;
}

.shared-capitalize {
  background-color: #ffcccc;
  color: #cc0000;
  font-weight: 600;
}
.amount_paid-bg{
    background-color: #ffcccc !important;
}

.not-shared {
  background-color: #f2f2f2;
  color: #999999;
  font-weight: 600;
}

.text-uppercase {
  text-transform: lowercase;
}

.text-uppercase::first-letter {
  text-transform: uppercase;
}

/*bank payments messages*/
.payment_empty{
    width: 100%;
    height: 60vh;
    margin-top: 5px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 3px solid var(--filter);
    background-image: url(../images/3.jpg);
   background-repeat: no-repeat;
   background-position: center right;

}
.payment_empty p{
    font-size: 20px;
}
.messages_header{
    background: var(--filter);
    border-radius: var(--border-radius-half);
    padding: 10px;
    display: flex;
    justify-content: space-between;

}

.messages_header span{
    font-weight: 900;
    font-size: 16px;
    background: var(--danger);
    border-radius: 50%;
    padding: 5px 10px;
    color: var(--sec-white);
}

.payment_cards{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 5px;
    margin-top: 5px;
}
.payment_success{
    padding: 10px;
    background-color: var(--filter);
    border-radius: 10px;
    border: 1.3pt solid var(--bg-purple);
}

.payment_failure{
    padding: 10px;
    background-color: var(--danger-faded);
    border-radius: 10px;
    border: 1.3pt solid var(--danger);
}

.payment_card .payment_status{
    font-size: 16px;
    font-weight: bold;
    padding-top: 5px ;
    margin-top: 8px;
}
.payment_card .payment_status .status_success{
    color: var(--bg-blue);
    background-color: var(--border);
    border-radius: 5px;
    padding: 4px 6px;
}

.payment_card .payment_status .status_failure{
    color: var(--danger);
    background-color: var(--border);
    border-radius: 5px;
    padding: 4px 6px;
}

.pagination {
    display: flex;
    width: 99%;
    justify-content: center;
    align-items: center;
  margin-top: 20px;
}

.view-more{
    outline: none;
    padding: 8px 15px;
    background: var(--yellow);
    color: var(--color);
    border-radius: 5px;
    border: none;
    font-weight: bold;
    font-size: 16px;
}

.page-link {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 5px;
  background-color: var(--filter);
  border-radius: 5px;
  text-decoration: none;
  color: var(--white);
}

.page-link:hover {
  background-color: var(--danger);
  color: var(--sec-white);
}

.page-link.active {
  background-color: var(--bg-blue);
  color: #fff;
}
.dashboard_content .visitor_info{
    display: flex;
    justify-content: space-between;
    justify-content: left;
    align-self: auto;
    height: 400px;
    width: 100%;
    padding: 40px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    background: var(--bg-box);
    margin-top: 5px;
}
.visitor_info  #visitor_form{
    display: flex;
    flex-direction: column;
    width: auto;
    justify-content: space-between;
    align-items: column;

}
.visitor_container {
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    background: var(--bg-box);
    margin-top: 5px;
}
.visitor_table{
    display: flex;
    height: auto;
    width: 100%;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    background: var(--bg-box);
    margin-top: 5px;
}
.visitor_table #visitorTable{
    display: flex;
    justify-content:stretch;
    vertical-align: auto;
    flex-direction: column;
    justify-content: space-around;
}

.form-container {
    display: none; /* Initially hide the container */
    position: fixed;
    min-width: 475px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form_content  input{
    width: auto;
    height: 40px;
    border: 10px;
    background-color: #c3e6c3;
    border-color: #000000;
    border-radius: 10px;
    margin: 2px;

}
.submit_button{
    width: 100px;
    border: 10px;
    border-radius: 10px;
    border-color: #00BFFF;
    text-transform: lowercase;
    font-weight: bold;
    right: 10%;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    position: relative;
  }


.close-button {
    position: relative;
    top: 0;
    right: -5%;
    width: 2em;
    height: 2em;
    border: none;
    background: rgba(180, 83, 107, 0.11);
    border-radius: 5px;
    transition: background 0.5s;
}
  
  
  .X {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2em;
    height: 1.5px;
    background-color: rgb(255, 255, 255);
    transform: translateX(-50%) rotate(45deg);
  }
  
  .Y {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2em;
    height: 1.5px;
    background-color: #fff;
    transform: translateX(-50%) rotate(-45deg);
  }
  
  .close-btn {
    position: absolute;
    display: flex;
    padding: 0.8rem 1.5rem;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    top: 0%;
    right: -90%;
    width: 1em;
    height: 1em;
    font-size: 12px;
    background-color: rgb(19, 22, 24);
    color: rgb(187, 229, 236);
    border: none;
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
  }
  
  .close-button:hover {
    background-color: rgb(211, 21, 21);
  }
  
  .close-button:active {
    background-color: rgb(130, 0, 0);
  }
  
  .close-button:hover > .close {
    animation: close 0.2s forwards 0.25s;
  }
  
  @keyframes close {
    100% {
      opacity: 1;
    }
  }
  
  
  .message {
    color: rgba(88, 87, 87, 0.822);
    font-size: 14px;
  }
  
  .flex {
    display: flex;
    width: 100%;
    gap: 6px;
  }
  
  .form label {
    position: relative;
  }
  
  .form label .input {
    width: 100%;
    padding: 10px 10px 20px 10px;
    outline: 0;
    border: 1px solid rgba(105, 105, 105, 0.397);
    border-radius: 5px;
  }
  
  .form label .input + span {
    position: absolute;
    left: 10px;
    top: 15px;
    color: grey;
    font-size: 0.9em;
    cursor: text;
    transition: 0.3s ease;
  }
  
  .form label .input:placeholder-shown + span {
    top: 15px;
    font-size: 0.9em;
  }
  
  .form label .input:focus + span,.form label .input:valid + span {
    top: 30px;
    font-size: 0.7em;
    font-weight: 600;
  }
  
  .form label .input:valid + span {
    color: green;
  }
  
  .input01 {
    width: 100%;
    padding: 10px 10px 20px 10px;
    outline: 0;
    border: 1px solid rgba(105, 105, 105, 0.397);
    border-radius: 5px;
  }
  
  .form label .input01 + span {
    position: absolute;
    left: 10px;
    top: 50px;
    color: grey;
    font-size: 0.9em;
    cursor: text;
    transition: 0.3s ease;
  }
  
  .form label .input01:placeholder-shown + span {
    top: 40px;
    font-size: 0.9em;
  }
  
  .form label .input01:focus + span,.form label .input01:valid + span {
    top: 50px;
    font-size: 0.7em;
    font-weight: 600;
  }
  
  .form label .input01:valid + span {
    color: green;
  }
  
  .fancy {
    background-color: transparent;
    border: 2px solid #cacaca;
    border-radius: 0px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 390;
    letter-spacing: 2px;
    margin: 0;
    outline: none;
    overflow: visible;
    padding: 8px 30px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition: all 0.3s ease-in-out;
    user-select: none;
    font-size: 13px;
  }
  
  .fancy::before {
    content: " ";
    width: 1.7rem;
    height: 2px;
    background: #cacaca;
    top: 50%;
    left: 1.5em;
    position: absolute;
    transform: translateY(-50%);
    transform: translateX(230%);
    transform-origin: center;
    transition: background 0.3s linear, width 0.3s linear;
  }
  
  .fancy .text {
    font-size: 1.125em;
    line-height: 1.33333em;
    padding-left: 2em;
    display: block;
    text-align: left;
    transition: all 0.3s ease-in-out;
    text-transform: lowercase;
    text-decoration: none;
    color: #818181;
    transform: translateX(30%);
  }
  
  .fancy .top-key {
    height: 2px;
    width: 1.5625rem;
    top: -2px;
    left: 0.625rem;
    position: absolute;
    background: white;
    transition: width 0.5s ease-out, left 0.3s ease-out;
  }
  
  .fancy .bottom-key-1 {
    height: 2px;
    width: 1.5625rem;
    right: 1.875rem;
    bottom: -2px;
    position: absolute;
    background: white;
    transition: width 0.5s ease-out, right 0.3s ease-out;
  }
  
  .fancy .bottom-key-2 {
    height: 2px;
    width: 0.625rem;
    right: 0.625rem;
    bottom: -2px;
    position: absolute;
    background: white;
    transition: width 0.5s ease-out, right 0.3s ease-out;
  }
  
  .fancy:hover {
    color: white;
    background: #cacaca;
  }
  
  .fancy:hover::before {
    width: 1.5rem;
    background: white;
  }
  
  .fancy:hover .text {
    color: white;
    padding-left: 1.5em;
  }
  
  .fancy:hover .top-key {
    left: -2px;
    width: 0px;
  }
  
  .fancy:hover .bottom-key-1,
   .fancy:hover .bottom-key-2 {
    right: 0;
    width: 0;
  }


  .bookmarkBtn {
    width: 100px;
    height: 40px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.349);
    background-color: rgba(0, 0, 0, 0.801);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 0.3s;
    overflow: hidden;
  }
  
  .IconContainer {
    width: 30px;
    height: 30px;
    background: linear-gradient(to bottom, rgb(136, 255, 166), rgb(23, 161, 5));
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
    transition-duration: 0.3s;
  }
  
  .icon {
    border-radius: 1px;
  }
  
  .text {
    height: 100%;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 1;
    transition-duration: 0.3s;
    font-size: 1.04em;
  }
  
  .bookmarkBtn:hover .IconContainer {
    width: 90px;
    transition-duration: 0.3s;
  }
  
  .bookmarkBtn:hover .text {
    transform: translate(10px);
    width: 0;
    font-size: 0;
    transition-duration: 0.3s;
  }
  
  .bookmarkBtn:active {
    transform: scale(0.95);
    transition-duration: 0.3s;
  }
  
  button.launch {
    display: flex;
    align-items: center;
    font-family: inherit;
    cursor: pointer;
    font-weight: 500;
    font-size: 17px;
    padding: 0.8em 1.3em 0.8em 0.9em;
    color: white;
    background: #ad5389;
    background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
    border: none;
    letter-spacing: 0.05em;
    border-radius: 16px;
  }
  
  button.launch svg {
    margin-right: 3px;
    transform: rotate(30deg);
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  }
  
  button.launch span {
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  }
  
  button.launch:hover svg {
    transform: translateX(5px) rotate(90deg);
  }
  
  button.launch:hover span {
    transform: translateX(7px);
  }
  
/*landing  stuff*/