*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'kanit',sans-serif;
}
.admin_panel_container{
    width: 100vw;
    margin: auto;
    width:90%;

}
.admin_panel_container h3{
    text-align: center;
    background-color: chartreuse;
    padding: 2rem 0;
    margin-bottom: 2rem;
}
.dashboard_content_wrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background: chartreuse; */
    margin: auto;
    
}

.dashboard_component{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 0;
    flex-wrap: wrap;
}
.dashboard_component .component_left{
    display: flex;
    align-items: center;
    gap: 1rem;
}



/* table */
.table_adminDash{
    width: 100%;
    overflow-x: auto;
   
}

#dashboard1 {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
}

#dashboard1 td, #dashboard1 th {
    border: 1px solid #ddd;
    padding: 10px 12px;
}


#dashboard1 tr:nth-child(odd) {
    background-color: #f2f2f2;
}

#dashboard1 tr:hover {
    background-color: #ff194b2f;
}

#dashboard1 th {
    text-align: left;
    /* background-color: #4CAF50; */
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    color: black;
}
#dashboard1 th:nth-child(2) {
    min-width: 150px !important;
}
#dashboard1 th:last-child{
    min-width: 80px !important;
}
@media screen and (max-width:680px){
    
    #dashboard1 th:nth-child(4),#dashboard1 td:nth-child(4)
    ,#dashboard1 th:nth-child(5),#dashboard1 td:nth-child(5) {
        display: none;
    }
   
}
.dashboard_btn{
    background: rgb(212, 212, 212);
    padding: 5px 15px;
    text-decoration: none;
    color: black;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}
.dashboard_btn:hover{
    background: #FF3115;
    color: white;
    transition: all 0.3s ease-in-out;
}

@media screen and (max-width:730px){
    #dashboard1 th {
        font-size: 0.5rem;
    }
    #dashboard1 tr{
        font-size: 0.5rem;
    }
    .component_right{
        margin-top: 1rem;
    }
}
@media screen and (max-width:890px){
    #dashboard1 td, #dashboard1 th {
        font-size: 0.7rem;
    }
}
@media screen and (max-width:560px){

}


/* dashboard 2 */


#dashboard2 {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
}

#dashboard2 td, #dashboard2 th {
    border: 1px solid #ddd;
    padding: 10px 12px;
}


#dashboard2 tr:nth-child(odd) {
    background-color: #f2f2f2;
}

#dashboard2 tr:hover {
    background-color: #ff194b2f;
}

#dashboard2 th {
    text-align: left;
    /* background-color: #4CAF50; */
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    color: black;
}
#dashboard2 th:nth-child(1) {
    width: 150px !important;
}
#dashboard2 th:nth-child(2) {
   width: 100px !important;
}
#dashboard2 th:nth-child(3),#dashboard2 th:nth-child(4)  {
    width: 200px !important;
}
#dashboard2 th:last-child{
    width: 130px !important;
}
@media screen and (max-width:680px){
  
   
}
.dashboard_btn{
    background: rgb(212, 212, 212);
    padding: 5px 15px;
    text-decoration: none;
    color: black;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}
.dashboard_btn:hover{
    background: #FF3115;
    color: white;
    transition: all 0.3s ease-in-out;
}

@media screen and (max-width:730px){
    #dashboard2 th {
        font-size: 0.5rem;
    }
    #dashboard2 tr{
        font-size: 0.5rem;
    }
    .component_right{
        margin-top: 1rem;
    }
}
@media screen and (max-width:890px){
    #dashboard2 td, #dashboard2 th {
        font-size: 0.7rem;
    }
}

#showstupre{
    overflow-x: auto;
}





#dbtn{
    background-color: #FF3115;
    width: 100px;
    height: 40px;
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 50px;
    color: white;
    padding: 10px;
    outline: none;
    border: none;
}
#dbtn1{
    background-color: #15ffcc;
    /* width: 150px; */
    padding: 10px 20px;
    height: 40px;
    position: relative;
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 50px;
    color: white;
    border: none;
    outline: none;
}
#dbtn p i,#dbtn1 p i{
    color: white;
    margin-left: 3rem;
}
#dbtn #dropdown11,#dbtn1 #dropdown12{
    width: 100px;
    background-color: #7e37d8;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 300%;
    left: 0;
    opacity: 0;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}
#dbtn1 #dropdown12{
    opacity: 0;
    width: 170px;
    background: #15ffcc;
}
#dropdown12.active{
    top: 120% !important;
    opacity: 1 !important;
}

#dbtn #dropdown11::before,#dbtn1 #dropdown12:before{
    content: " ";
    position: absolute;
    top: -10%;
    right: 10%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 10px 8px;
    border-color: transparent transparent #7e37d8 transparent;
}
#dbtn1 #dropdown12:before{
    border-color: transparent transparent #15ffcc transparent;
}
#dropdown11.active{
    /* display: flex !important; */
    transition: all 0.3s ease-in-out !important;
    top: 130% !important;
    opacity: 1 !important;
    /* transform: scaleY(100%) !important; */
    
}

#dbtn #dropdown11 li,#dbtn1 #dropdown12 li{
    list-style: none;
    width: 100%;
    text-align: center;
    transition: all 0.5s ease;
    padding: 5px 10px;
}
#dbtn #dropdown11 li:hover{
    background-color: #d0adff;
}
#dbtn1 #dropdown12 li:hover{
    background: #90f5df;
}

.component_right{
    /* border: 2px solid black; */
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
}
.component_right input{
    padding: 10px 20px;
    outline: none;
    border-radius: 20px;
    border: 1px solid #9e9e9e;
}
.component_right input:focus,.component_right input:hover{
    border: 1px solid #eb3007;
    box-shadow: -2px 2px 22px -8px rgba(235,48,7,0.55);
    -webkit-box-shadow: -2px 2px 22px -8px rgba(235,48,7,0.55);
    -moz-box-shadow: -2px 2px 22px -8px rgba(235,48,7,0.55);
}
/* Title */
.title1 {
    display: flex;
    justify-content:space-between;
    align-items: center;
    width: 100%;
    height: 8rem;
    /* background-image: url('../images/img3.jpg'); */
    /* background-color: #eb31071e; */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    animation: title1 1.75s ease-in-out;
}
@keyframes title1{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.title1 h4 {
    font-size: 2rem;
    /* color: white; */
    text-align: center;
    font-weight: 600;
}
.title1 h4 span{
    color: #FF3115;
}
.title p{
    color: #FF3115;
    font-size: 1.1rem;
    letter-spacing: 0.5rem;
    /* font-weight: 500; */
}



@media only screen and (max-width:700px) {
    .title1 h4 {
        /* font-size: 1.2rem; */
    }
    .title1{
        /* display: flex;
        flex-direction: column; */
        flex-wrap: wrap;
        margin: 20px;
    }
}

@media only screen and (max-width:420px) {
    .title1 h4 {
        /* font-size: 1rem; */
    }
    .export_file_btn{
        width: 150px;
        padding: 10px 30px;
        font-size: 0.9rem;
    }
    

}

/* aside navbar */

.admin_aside_navbar{
    position: fixed;
    /* padding: 2rem 0; */
    left: -30%;
    top: 10%;
    width: 100px;
    height: 670px;
    background-color: #f8f8f8;
    /* border-right: #f8ecea 1px solid; */
    /* box-shadow: -2px 2px 22px -8px rgba(253, 217, 217, 0.55); */
    margin-right: 2rem;
    transition: all 0.35s ease-in-out;
}
.admin_aside_navbar.active{
    left: 0%;
    
}



.dashboard_admin_main{
  margin-bottom: 10rem;
  min-height: 100vh;
}
.shownav_btn{
    /* height: 45px; */
    background: #FF3115;
    padding: 8px ;
    position: sticky;
    top: 11%;
    left: 0%;
   
    transition: all 0.25s ease-in-out;
}
.shownav_btn.active{
    left: 10%;
}
.shownav_btn i{
    color: white;
}
@media only screen and (max-width:680px) {
    .shownav_btn.active{
        left: 18%;
    }
    .shownav_btn{
        font-size: 0.8rem;
        top: 10%;
    }
}
@media only screen and (max-width:420px) {
    .admin_aside_navbar{
        width: 80px;
    }
   
}

.aside_nav22 .aside_nav_list{
    height: 100px;
    /* border: 2px solid black; */
    display: grid;
    place-items: center;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    padding: 0 0.5rem;
}
.aside_nav_list:hover{
    background: #f0c3bd;
    transition: all 0.2s ease-in-out;
}
.aside_nav_list a p,.aside_nav_list a i{
    transition: all 0.2s ease-in-out;
}
.aside_nav_list:hover a i{
    font-size: 1.5rem;
}
.aside_nav_list:hover a p ,.aside_nav_list:hover a i {
    color: #FF3115;
}



.aside_nav_list.active{
    background: #FF3115;
}
.aside_nav_list.active a i,.aside_nav_list.active a p{
    color: white !important;
}
.aside_nav_list.active a{
    color: white !important;
}

.aside_nav22 .aside_nav_list a{
    color: black;
    font-size: 1.1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.aside_nav_list a i{
    font-size: 1.3rem;
    margin: 0.5rem 0;
    color: rgb(97, 97, 97);
}

#add_students{
    outline: none;
    width: 100%;
    border-radius: 20px;
    height: 400px;
    font-size: 1rem;
    align-self: flex-start;
    padding: 1rem;
    transition: all 0.5s ease-in-out;
}
#add_students:focus,#add_students:hover{
    box-shadow: -2px 2px 22px -8px rgba(235,48,7,0.55);
}
.group_btn11{
    /* border: 2px solid black; */
    width: 100%;
    margin: 1.5rem 0;
}
.group_btn12{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 1rem 0;
}
.group_btn11 a,.group_btn12 a{
    padding: 10px 25px;
    /* background-color: #7e37d8; */
    background-color: #FF3115;
    border-radius: 30px;
    color: white;
    cursor: pointer;
}
.group_btn11 .clearStuBtn{
    /* background-color: #fe80b2; */
    background-color: #ffaea5;
}
.group_btn12 .clearStuBtn{
    background-color: #ddd;
    font-size: 0.85rem;
}
.tab{
    width: 100%;
    /* margin-bottom: 10rem; */
    /* border: 2px solid red; */
    /* overflow: auto ; */

}
.export_file_btn{
    display: inline-block;
    background: #7e37d8;
    width: 200px;
    padding:10px 30px;
    color: white;
    border-radius: 20px;
    text-align: center;
    margin-right: 1rem;
}
.box_input1{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
}
@media screen and (max-width:600px){
    .export_file_btn{
        width: 150px;
    }
    .aside_nav22 .aside_nav_list a{
        font-size: 0.8rem;
    }
    .dashboard_component .component_left{
        gap: 1rem;
        flex-wrap: wrap;
    }
}
.fa-edit,.fa-trash-alt{
    font-size: 1.2rem;
}
.fa-edit{
    color: #BFD131;
}
.fa-trash-alt{
    color: #eb3007;
}
.pagination_container{
    width: 100% !important;
}
@media screen and (max-width: 1250px){
    .pagination_container{
        width: 100% !important;
        /* border: 2px solid black; */
    }
}
.notice_block span{
    width: 20px !important;
    height: 20px !important;
}

@media screen and (max-width:680px){
    .fa-edit,.fa-trash-alt{
        font-size: 0.7rem;
    }
}

.user_menu_body ul li a i{
    margin-right: 3rem !important;
}
.addStuBtn{cursor: pointer;}


/* show preview Inserting students */



.userInfo_forms{
    gap: 10px;
    /* margin-left: 16px; */
}
.boxwrapper1 {
    /* border: 2px solid black; */
    width: 95%;
    margin: auto;
}
@media screen and (max-width: 680px){
    .edituserform-wrapper {
        width: 91vw !important;
    }
}