@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,900;1,100;1,300;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,600&display=swap');
*{
    margin: 0;
    padding: 0;
    
}

html{
    scroll-behavior: smooth;
}
.container_dash{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: hidden;
    /* overflow-x: hidden; */
}

.left{
    width: 400px;
    /* background: blue; */
    height: 100%;
    padding: 0 ;
}

aside{
    width: 100%;
    border-radius: 12px;
    border: 2px solid #8492a660;
    height: 100%;
}
.side_card{
    width: 100%;
    border-bottom: 2px solid #8492a660;
    height: 200px;
    
}
.side_card .image{
    width: 100%;
    position: relative;
    
}
.side_card .image img{
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 12px 12px 0px 0px;
}
.side_card .image span{
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translate(-50%);
    border:3px dotted #396cf0;
    border-radius: 50%;
    display: flex;
    align-items:center;
    justify-content: center;
}
.side_card .image span img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.side_card h1{
    font-size: 20px;
    text-align: center;
    margin-top: 40px;
}

.menu_side{
    width: 100%;
    height: 375px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.menu_side::-webkit-scrollbar{
    width: 6px;
}
.menu_side::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background: #396cf0;
}
.menu_side::-webkit-scrollbar-track{
    /* border-radius: 5px;
    background: green;
    border: 1px solid purple; */
    /* background: #396cf0; */
}

.menu_side ul{
    width: 100%;
    list-style: none;
    margin-top: 10px;
}
.menu_side ul li{
    width: 100%;
    list-style: none;
    line-height: 40px;
    padding: 0px 15px;
}
.menu_side ul li span{
    margin-right: 10px;
}
.menu_side ul .active a,
.menu_side ul .active span i{
    color: #396cf0;
}
.menu_side ul li span i{
    color: #212529;
}
.menu_side ul li a{
    text-decoration: none;
    width: 100%;
    color: #212529;
    transition: .5s ease;

}
.menu_side ul li:hover span i{
    color: #396cf0;

}
.menu_side ul li a:hover{
    color: #396cf0;
    font-weight: 600;
}



/* the right section */
.right{
    width: 100%;
    height: 100%;
}
.right .navbar{
    position: sticky;
    top: 0;
    left: 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 5%;
    background:#f4f4f4 ;
    box-shadow: 4px 8px 10px rgba(0,0,0,0.1),
    2px 4px 10px rgba(0,0,0,0.1),
    2px 8px 10px rgba(0,0,0,0.1);
    border-radius: 15px 0px 0px 15px;
    
}
.right .navbar .setting{
    display: flex;
    align-items: center;
    justify-content: right;
}
.right .navbar .logo img{
    width: 100px;
    height: 50px;
    object-fit: contain;
}
.right .navbar .setting span{
    margin-right: 20px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #396cf0;
    color: #f4f4f4;
}
.right .navbar .setting span img{
    width: 35px;
    height: 35px;
    border-radius: 50%;
}



.right .navbar .setting .letdrop{
    position: relative;
}
.right .navbar .setting .letdrop .spandropme{
    position: relative;
}
.right .navbar .setting .letdrop .spandropme ul{
    width: 200px;
    max-height: 0px;
    background: white;
    position: absolute;
    top: 20px;
    left: -100px;
    border-radius: 10px;
    box-shadow: 0 10px 8px rgba(0,0,0,0.3),
    0 -5px 8px rgba(0,0,0,0.3);
    overflow: hidden;
    transition: max-height 0.5s;
    
}
.right .navbar .setting .letdrop .spandropme .topdropin.open-menu{
    max-height: 188px;
}
.right .navbar .setting .letdrop .spandropme ul li{
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
    /* margin: 3px 0px; */
    border-bottom: 1px solid #dad7d7;
    transition: 0.4s ease;
    

}
.right .navbar .setting .letdrop .spandropme ul li:hover{
    background: #396cf0;
    color: white;

}
.right .navbar .setting .letdrop .spandropme ul li:hover a{
    color: white;
}
.right .navbar .setting .letdrop .spandropme ul li:hover .iconup{
    color: white;
}
.right .navbar .setting .letdrop .spandropme ul li .iconup{
    color: #396cf0;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 18px;
   
   
}
.right .navbar .setting .letdrop .spandropme ul li a{
    color: #212529;
    text-decoration: none;
    text-transform: capitalize;
    display: block;
    width: 100%;
    height: 100%;
    padding: 16px 0px;
    font-size: 13px;
}


/* the main section */

.main_section{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}
.main_section .title_dash h2{
    color: #212529;
    font-size: 20px;
    font-weight: 900;
    padding: 10px 3%;
}

.main_section::-webkit-scrollbar{
    width: 10px;
}
.main_section::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background: #396cf0;
}
.main_section::-webkit-scrollbar-track{
    /* border-radius: 5px;
    background: green;
    border: 1px solid purple; */
    /* background: #396cf0; */
}

.main_section .dash_wrap{
    /* padding: 10px 3%; */
    height: 100%;

}

.main_section .dash_wrap {
    width: 100%;
    /* background: blue; */
}
.main_section .dash_wrap .card_wrap{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 4fr));
    place-items: center;
    gap: 20px;
    padding: 10px 3%;
}
.main_section .dash_wrap .card_wrap .card{
    width: 190px;
    height: 180px;
    /* box-shadow: 0 4px 8px #ebebeb,
    0 4px 8px #ebebeb,
    0 4px 8px #ebebeb; */
    border-radius: 5px;
    box-shadow: 3px 3px 3px #3c485826,
    3px 3px 3px #3c485826,-3px -3px 3px #3c485826,
    -3px -3px 3px #3c485826;
}
.card_wrap .card .spanicon{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}
.card_wrap .card .spanicon .span{
    width: 50px;
    height: 50px;
    background: #396cf0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;



}
.card_wrap .card .spanicon i{
    font-size: 25px;
    padding: 3px;
    color: white;    
}
.card_wrap .card h4{
    text-align: center;
    font-size: 18px;
    padding-bottom: 10px;
}
.card_wrap .card h2{
    text-align: center;
    font-size: 25px;
}
.card_wrap .card  .btnnp{
    width:100%;
    display:flex;
    align-items:center;
    justify-content: center;
    /* background:red; */
    margin-top: 8px;
    /* display:none; */
}
.card_wrap .card  .btnnp button{
    padding: 7px 15px;
    font-size: 15px;
    border-radius: 8px;
    outline: none;
    border: none;
    background: linear-gradient(135deg, #3c8ce7, #00eaff);   
     color: white;
    /* background:red; */
    text-transform: capitalize;
    /* display:none; */
    transition: background 0.5s ease-in-out;

}
.card_wrap .card  .btnnp button:hover{
    background: #3c8ce7;
}

/* this section is the table for client section */

.table_contain{
    width: 100%;
    height: fit-content;
    padding: 15px 0;
    margin: 10px 0px;
    
}
.table_contain .table_wrap{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 10px;
    overflow-x: scroll;
    border-radius: 8px;
    background: white;
    box-shadow: 4px 5px 3px gray,
    -4px -5px 3px rgba(128, 128, 128, 0.468),
    4px 5px 3px rgba(128, 128, 128, 0.445);
    margin-bottom: 20px;
}

.table_contain .table_wrap table{
     width: 1800px;
    border-collapse: collapse;
    border-radius: 10px;
} 
.table_contain .table_wrap tr th{
    text-align: center;
    padding: 5px 10px;
    border-left: 1px solid #dad7d7;
}
.table_contain .table_wrap tr,td{
    padding: 10px 10px;
    text-align: left;
    border-left: 1px solid #dad7d7;
    

} 
 
.table_contain .table_wrap tr{
    border-bottom: 2px solid #dad7d7;
    border-right: 2px solid #dad7d7;
    border-left: 2px solid #dad7d7; 
    border-bottom: 2px solid red;
 } 
.table_contain .table_wrap tr,th{
    border-bottom: 2px solid #396cf0;
    border-right: 2px solid #396cf0;
    border-left: 2px solid #396cf0;

} 

.table_contain .table_wrap table th{
    text-transform: uppercase;
    font-size: 15px;
    background: #396cf0;
    color: white;
}
.table_contain .table_wrap  table td{
    font-size: 16px;
    /* border: 1px solid green; */
      
}

.table_contain .table_wrap  table tbody td:nth-child(11),
.table_contain .table_wrap  table tbody td:nth-child(5){
    column-span: 3;
     

}
.table_contain .table_wrap  table td:nth-last-child(1)
{   
    column-span: 4;
}
.table_contain .table_wrap  table tbody td:first-child{
    font-size: 20px;
    font-weight: 600;
}
.table_contain .table_wrap  table tbody td:nth-child(2){
    width: 230px;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 500;
}

.table_contain .table_wrap tr td .last_detail{
    display: flex;
    align-items: center;
    justify-content: center;
}
.table_contain .table_wrap tr .last_detail span{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6380cb49;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #396cf01a;
    color: #396cf0;
    box-shadow: 0px 5px 3px rgba(128, 128, 128, 0.445);
}
.table_contain .Pending {

    background-color:#53c7971a;
    color: green;
    padding: 10px 20px;
    border-radius: 8px;
}
.table_contain .Rejected {

    background-color:#f0735a1a;
    color: red;
    padding: 10px 20px;
    border-radius: 8px;
}
.table_contain .Approved {

    background-color:#6380cb49;
    color: blue;
    padding: 10px 20px;
    border-radius: 8px;
}
.table_contain .table_wrap tr .last_detail span:nth-child(2){
    background: #53c7971a;
    color: green;
}
.table_contain .table_wrap tr .last_detail span:nth-child(3){
    background: #f0735a1a;
    color:red;
}


.spa_wrap{
    width: 100%;
    height: 13vh;
}
/* style for modal for accept input */

.bg-tranparent {
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.456);
   padding-left: 50px;
    width: 100%;
    height: 100%;
    position: fixed;
    box-sizing: border-box;
    text-align: center;
    display: none;
    z-index: 10000;
}

.box {
    background-color: white;
    padding: 22px 10px 10px 10px;
    position: absolute;
    margin: auto;
    text-align: center;
    top: 50%;
    left: 50%;
    border-radius: 8px;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
}
.close-icon {
    position: absolute;
    top: 0;
    right: 14px;
    font-size: 35px;
    transform: rotate(45deg);
    cursor: pointer;
    font-weight: 800;
}


.modal-container {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.modal-container span{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #6380cb49;
    
    display: flex;
    align-items: center;
    justify-content: center;
    background: #396cf01a;
    color: #396cf0;
    box-shadow: 0px 5px 3px rgba(128, 128, 128, 0.445);
    margin-bottom: 20px;
}
.modal-container span i{
    font-size: 35px;
}
.modal-container h3 {
    padding: 10px;
    width: 80%;
    margin: auto;
    font-size: 30px;
    margin-bottom: 30px;
}



.cancel-icon,
.btn-ok-new {
    padding: 15px 30px;
    background: #396cf01a;
    color: #396cf0;
    border-radius: 5px;
    border: none;
    outline: none;
    font-size: 12px;
}
.btn-ok-new:hover{
    background-color:#396cf0 ;
    color: white;
}



/* End style for modal input */

/* style for modal 2 reject input */

.bg-tranparent1 {
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.456);
   padding-left: 50px;
    width: 100%;
    height: 100%;
    position: fixed;
    box-sizing: border-box;
    text-align: center;
    display: none;
    z-index: 10000;
}

.box1 {
    background-color: white;
    padding: 22px 10px 10px 10px;
    position: absolute;
    margin: auto;
    text-align: center;
    top: 50%;
    left: 50%;
    border-radius: 8px;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
}
.close-icon1 {
    position: absolute;
    top: 0;
    right: 14px;
    font-size: 35px;
    transform: rotate(45deg);
    cursor: pointer;
    font-weight: 800;
}


.modal-container1 {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.modal-container1 span{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f0735a1a;
    color:red;
    display: flex;
    align-items: center;
    justify-content: center;
   
    
    box-shadow: 0px 5px 3px rgba(128, 128, 128, 0.445);
    margin-bottom: 20px;
}
.modal-container1 span i{
    font-size: 35px;
}
.modal-container1 h3 {
    padding: 10px;
    width: 80%;
    margin: auto;
    font-size: 30px;
    margin-bottom: 30px;
}




.cancel-icon,
.btn-ok-new1 {
    padding: 15px 30px;
    background: #f0735a1a;
    color:red;
    border-radius: 5px;
    border: none;
    outline: none;
    font-size: 12px;
}
.btn-ok-new1:hover{
    background-color:red ;
    color: white;
  
}



/* End style for modal input */

/* style for modal 5 delete input */

.bg-tranparent5 {
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.456);
   padding-left: 50px;
    width: 100%;
    height: 100%;
    position: fixed;
    box-sizing: border-box;
    text-align: center;
    display: none;
    z-index: 10000;
}

.box5 {
    background-color: white;
    padding: 22px 10px 10px 10px;
    position: absolute;
    margin: auto;
    text-align: center;
    top: 50%;
    left: 50%;
    border-radius: 8px;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
}
.close-icon5 {
    position: absolute;
    top: 0;
    right: 14px;
    font-size: 35px;
    transform: rotate(45deg);
    cursor: pointer;
    font-weight: 800;
}


.modal-container5 {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.modal-container5 span{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f0735a1a;
    color:red;
    display: flex;
    align-items: center;
    justify-content: center;
   
    
    box-shadow: 0px 5px 3px rgba(128, 128, 128, 0.445);
    margin-bottom: 20px;
}
.modal-container5 span i{
    font-size: 35px;
}
.modal-container5 h3 {
    padding: 10px;
    width: 80%;
    margin: auto;
    font-size: 30px;
    margin-bottom: 30px;
}




.cancel-icon,
.btn-ok-new5 {
    padding: 15px 30px;
    background: #f0735a1a;
    color:red;
    border-radius: 5px;
    border: none;
    outline: none;
    font-size: 12px;
}
.btn-ok-new5:hover{
    background-color:red ;
    color: white;
  
}



/* End style for modal input */

/* style for modal 3 appointment details input */

.bg-tranparent3 {
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.456);
   padding-left: 50px;
    width: 100%;
    height: 100%;
    position: fixed;
    box-sizing: border-box;
    /* text-align: center; */
    display: none;
    z-index: 10000;
 
    
}

.box3 {
    background-color: white;
    /* padding: 22px 10px 10px 10px; */
    position: absolute;
    margin: auto;
    /* text-align: center; */
    top: 50%;
    left: 50%;
    border-radius: 8px;
    transform: translate(-50%, -50%);
    width: 400px;
   height: 450px;
    overflow-y: scroll;
    overflow-x: hidden;
    
}
.box3::-webkit-scrollbar{

    display: none;
}

.close-icon3 {
    position: absolute;
    top: 0;
    right: 30px;
    font-size: 35px;
    transform: rotate(45deg);
    cursor: pointer;
    font-weight: 800;
}

.modal-container3 {
   
    /* text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
    box-sizing: border-box;
}
.modal-container3 .modalheader{


    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #212529;
    text-align: left;
    margin-top: -1px;
    font-size: 20px;
    font-weight: 900;
    padding-bottom: 15px;
    margin-bottom: 10px;
    position:sticky;
    top: 0;
    left: 0;
    background-color: white;
}
.modal-container3 .innermodalbox{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 3fr));
    grid-gap: 1.2rem;
    padding: 10px;
    

}

.modal-container3 .innermodalbox .innermodalcard label{
  
   font-weight: 700;
   text-transform: capitalize;
}
.modal-container3 .innermodalbox .innermodalcard .subdetail{
    color: rgba(62, 59, 59, 0.932);
}
.modal-container3 .innermodalbox .innermodalcard .subdetail .statusrejected{
    background-color:#f0735a1a;
    color: red;
    font-weight: 700;
    padding: 10px 20px;
}
.modal-container3 .innermodalbox .innermodalcard .subdetail .statusapproved{
   
    background-color:#6380cb49;
    color: blue;
    font-weight: 700;
    padding: 10px 20px;
}
.modal-container3 .innermodalbox .innermodalcard .subdetail .statuspending{
    background-color:#53c7971a;
    color: green;
    font-weight: 700;
    padding: 10px 20px;
}

.button-group{
    width: 100%;
    padding: 2px 3%;
    display: flex;
}
.button-group a{
    /* width: 30px;
    height: 30px; */
    border: 1px solid #b2b0b0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 15px;
    text-decoration: none;
    font-size: 18px;
    color: #212529;
}
.button-group a:hover{
    background: #396cf0;
    color: white;
}


.button-group .num{
    text-decoration: none;
}

.button-group .bactive{
    border: 1px solid #396cf0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 15px;
    text-decoration: none;
    font-size: 18px;
    background: #396cf0;
    color: white;
   
   
}

.successalert{

    background-color:#53c7971a;
    padding: 20px;
    width: 100%;
    /* margin-left: 10px; */
    border-radius: 10px;
    color: green;
    font-size: 18px;
   
}
.dangeralert{

    background-color:#f0735a1a;
    padding: 20px;
    width: 100%;
    /* margin-left: 10px; */
    border-radius: 10px;
    color: red;
    font-size: 18px;
   
}




/* End style for modal input */

@media(max-width: 1100px){
    .table_contain .table_wrap{
        width: 650px;
    }
    .right .navbar .setting .letdrop .spandropme ul{
        width: 200px;
        max-height: 0px;
        background: white;
        position: absolute;
        top: 20px;
        left: -115px;
        border-radius: 10px;
        box-shadow: 0 10px 8px rgba(0,0,0,0.3),
        0 -5px 8px rgba(0,0,0,0.3);
        overflow: hidden;
        transition: max-height 0.5s;
        
    }
}
@media(max-width: 700px){
    .table_contain .table_wrap{
        width: 450px;
    }
}

@media(max-width: 550px){
    .table_contain .table_wrap{
        background: blue;
        width: 90%;
        margin: 0 auto;
        padding: 10px 10px;
        overflow-x: scroll;
        border-radius: 8px;
        background: white;
        box-shadow: 4px 5px 3px gray,
    -4px -5px 3px rgba(128, 128, 128, 0.468),
    4px 5px 3px rgba(128, 128, 128, 0.445);
    }

    .box,.box1,.box3 {
        width: 300px;
    }

}



/* the section is for login into the portal */

.logincontain{
    width: 100%;
    height: 100vh;
    background: #396cf01a;
    font-family: 'Open Sans', sans-serif;
    overflow-y: scroll;
    position: relative;
}
.logincontain .home_button{
    position: fixed;
    bottom: 20px;
    right: 20px;

}
.logincontain .home_button span{
    /* position: static; */
    
    
}
.logincontain .home_button span a{
    padding: 10px;
    background: #396cf0;
    border-radius: 5px;
    text-decoration: none;
    color: white;
}
.logincontain .logocontain{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}
.logincontain .logocontain .image{
    width: 170px;
    height: 100px;
    /* margin: 30px 0px; */
    margin-top: 20px;
    margin-bottom: 10px;
}
.logincontain .logocontain .image img{
    width: 170px;
    height: 100px;
}

.logincontain .main_login{
    width: 430px;
    /* height: 430px; */
    padding-bottom: 40px;
    margin: 10px auto;
    border-radius: 10px;
    background: white;
    box-shadow: 4px 8px 10px rgba(0,0,0,0.1),
    2px 4px 10px rgba(0,0,0,0.1),
    2px 8px 10px rgba(0,0,0,0.1);
}

.logincontain .main_login .form_login{
    /* text-align: center; */
}
.logincontain .main_login .form_login h1{
    text-transform: capitalize;
    padding: 10px 0px 10px 0px;
    text-align: center;
    font-size: 25px;
}

.logincontain .main_login .form_login .field_wrap{
    padding: 0px 25px;
    margin-bottom: 15px;
    
}
.logincontain .main_login .form_login .field_wrap label{
    text-transform: capitalize;
}

.logincontain .main_login .form_login .field_wrap label span{
    color: #f0735a;
}
.logincontain .main_login .form_login .field_wrap input{
    width: 93%;
    height: 32px;
    border: 1px solid #dad7d7;
    margin-top: 10px;
    padding: 3px 10px;
    outline: none;
    border-radius: 5px;
}
.logincontain .main_login .form_login .field_wrap input:focus{
    border: 2px solid #396cf0;
    /* border: 2px solid red; */
    border-radius: 5px;
}
.logincontain .main_login .form_login .field_wrap2{
    padding: 0px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    margin-bottom: 10px;
}

.logincontain .main_login .form_login .field_wrap2 .rember span{
    color: #212529;
    text-transform: capitalize;
    font-weight: 500;

}
.logincontain .main_login .form_login .field_wrap2 .forgot{
    color: #212529;
    font-weight: 500;
}
.logincontain .main_login .form_login .field_wrap2 .forgot i{
    font-size: 14px;
}
.logincontain .main_login .form_login .field_wrap3{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}
.logincontain .main_login .form_login .field_wrap3 button{
    width: 90%;
    border-radius: 10px;
    background: #396cf0;
    outline: none;
    border: none;
    padding: 10px 0px;
    color: white;
    font-size: 16px;
}
.logincontain .main_login .form_login .field_wrap4{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.logincontain .main_login .form_login .field_wrap4 a{
    margin-left: 22px;
}

@media(max-width: 700px){

.container_dash{
        display: flex;
        flex-direction: column;
        height: 100%;

}
    
.left{
    width: 100%;
    /* background: blue; */
    height: 100%;
    padding: 0;
    overflow-x: hidden;
    margin-top: 100px;
}

aside{
    width: 100%;
    border-radius: 12px;
    border: 2px solid #8492a660;
    height: fit-content;
    padding-bottom: 0px;
}
.menu_side{
    width: 100%;
    height: fit-content;
    padding-bottom: 20px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.side_card{
    width: 100%;
    border-bottom: 2px solid #8492a660;
    height: 200px;
      
}
.right{
        width: 100%;
        height: 100%;
}

.right .navbar{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        height: 70px;
        /* background: rebeccapurple; */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        background:#f4f4f4 ;
        box-shadow: 4px 8px 10px rgba(0,0,0,0.1),
        2px 4px 10px rgba(0,0,0,0.1),
        2px 8px 10px rgba(0,0,0,0.1);
    
    }

}




@media(max-width: 550px){
    .logincontain .main_login{
        width: 300px;
        padding-bottom: 40px;
    }
    
    .logincontain .main_login .form_login .field_wrap2 .rember{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
.logincontain .main_login .form_login .field_wrap2 .rember span{
    color: #212529;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 13px;
    margin-left: 5px;
    

}
.logincontain .main_login .form_login .field_wrap2 .forgot{
    color: #212529;
    font-weight: 500;
    font-size: 13px;
}
.logincontain .main_login .form_login .field_wrap2 .forgot i{
    font-size: 13px;
}

}

@media(max-width: 350px){
    
    .logincontain .home_button{
        display: none;
    }

    .logincontain .main_login .form_login .field_wrap2 .rember span{
        color: #212529;
        text-transform: capitalize;
        font-weight: 500;
        font-size: 11px;       
    
    }
    .logincontain .main_login .form_login .field_wrap2 .forgot{
        color: #212529;
        font-weight: 500;
        font-size: 11px;
    }
    .logincontain .main_login .form_login .field_wrap4 .small{
        font-size: 14px;
    }
    .logincontain .main_login .form_login .field_wrap4 a{
        font-size: 14px;
    }

}


/* the forget password section */
.logincontain .main_login .form_login p{
    padding: 10px 25px;
    color: #8492A6;

}

/* the register  section */

.logincontain .main_login .form_login .field_con{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media(max-width:400px){
    .logincontain .main_login .form_login .field_con .field_wrap label{
        font-size: 13px;
    }
    .logincontain .main_login .form_login .field_fill label{
        font-size: 13px;
    }
}




/* profile page */

.main_profile{
    width: 70%;
    border: 2px solid #dad7d7;
    height: fit-content;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0px 5px 6px rgba(0,0,0,0.3);
    padding-bottom: 20px;
    margin-bottom: 60px;
}
.main_profile .personal_detail h4{
    color: #212529;
    font-size: 20px;
    padding: 15px;
    border-bottom: 2px solid #dad7d7;
    text-transform: capitalize;
}

.main_profile .personal_detail .pic_wrap{
    width: 100%;
    padding: 20px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.main_profile .personal_detail .pic_wrap .pic_right{
    width: 50%;
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: left;
}
.main_profile .personal_detail .pic_wrap .pic_left{
    width: 50%;
    padding-left: 20px;
}
.main_profile .personal_detail .pic_wrap .pic_right .image img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 10px;
}
.main_profile .personal_detail .pic_wrap .pic_right .pic_title h5{
    font-size: 18px;
    color: #212529;
    padding: 5px 0px;
}
.main_profile .personal_detail .pic_wrap .pic_right .pic_title p{
    line-height: 25px;
    color: #8492A6;
}
.main_profile .personal_detail .pic_wrap .pic_left button{
    padding: 10px 15px;
    background: #396cf0;
    color: white;
    font-size: 18px;
    outline: none;
    border: none;
    border-radius: 8px;
    text-transform: capitalize;
}
.main_profile .personal_detail .pic_wrap .pic_left button:nth-child(2){
    background: transparent;
    border: 1px solid #dad7d7;
    color: #212529;
    margin-left: 10px;
}
.main_profile .personal_detail .pic_wrap .pic_left{
    width: 50%;
    padding-right: 20px;
}


.main_profile .personal_detail .fill_lap{
    padding: 0px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
.main_profile .personal_detail .fill_lap .form_lap{
    width: 49%;
}
.main_profile .personal_detail .fill_lap .form_lap label{
    font-size: 18px;

}
.main_profile .personal_detail .fill_lap .form_lap input{
    width: 97%;
    height: 39px;
    border-radius:10px;
    outline: none;
    border: none;
    border: 2px solid #dad7d7;
    padding-left: 5px;
    margin-top: 10px;
}

.main_profile .personal_detail .fill_area{
    width: 100%;
    padding: 0px 20px;
    margin-top: 20px;

}
.main_profile .personal_detail .fill_area textarea{
    width: 93%;
    height: 100px;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
}

.main_profile .personal_detail .fill_area button{
    padding: 10px 15px;
    background: #396cf0;
    color: white;
    font-size: 18px;
    outline: none;
    border: none;
    border-radius: 8px;
}
.main_profile .personal_detail .fill_area label{
    font-size: 18px;
}

.main_profile .personal_detail .fill_area button:active{
    background: #396df0bc;
}
/* login page design */

.main_profile .personal_detail .fill_jun{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 10px;
}
.main_profile .personal_detail .form_lap2{
    width: 95%;
    margin: 10px auto;
   
}
.main_profile .personal_detail .form_lap2 label{
    font-size: 18px;
}
.main_profile .personal_detail .form_lap2 input{
    width: 97%;
    height: 24px;
    border-radius:10px;
    outline: none;
    border: none;
    border: 2px solid #dad7d7;
    margin-top: 10px;
    padding: 10px;
}
@media(max-width:1200px){
    
    .main_profile .personal_detail .fill_area textarea{
        width: 90%;
    }

}
@media(max-width:900px){
    .main_profile{
        width: 90%;
    }
    .main_profile .personal_detail .pic_wrap{
        flex-direction: column;
    }
    .main_profile .personal_detail .pic_wrap .pic_right{
        flex-direction: column;
        width: 90%;
    }
    .main_profile .personal_detail .pic_wrap .pic_left{
        /* flex-direction: column; */
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;

    }

    .main_profile .personal_detail .fill_area textarea{
        width: 85%;
    }
    .main_profile .personal_detail .form_lap2 input{
        width: 95%;
    }

}

@media(max-width:650px){
    .main_profile .personal_detail .fill_lap{
        padding: 0px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        margin-top: 20px;
    }
    .main_profile .personal_detail .fill_lap .form_lap{
        width: 94%;
        margin: 10px 0px;
    }
    .main_profile .personal_detail .fill_area textarea{
        width: 80%;
    }

}