*{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    font-family: 'Cairo', sans-serif;
    font-size: 11px;
    direction: rtl;
    text-decoration: none;

    
        /* font-family: 'Tajawal', sans-serif;
        font-family: 'Tajawal', sans-serif;
        font-family: 'Baloo Bhaijaan 2', cursive;
font-family: 'Tajawal', sans-serif;
font-family: 'Baloo Bhaijaan 2', cursive;
font-family: 'Tajawal', sans-serif;
font-family: 'Baloo Bhaijaan 2', cursive;
font-family: 'Tajawal', sans-serif;
font-family: 'Baloo Bhaijaan 2', cursive;
font-family: 'Tajawal', sans-serif;
font-family: 'Baloo Bhaijaan 2', cursive;
font-family: 'Lalezar', cursive;
font-family: 'Lalezar', cursive; */
font-family: 'Vazirmatn', sans-serif;
/* font-family: 'Times New Roman', Times, serif; */
/* font-family: cursive;  */
          
}
/* strt root */
/* .opj:hover{ */
    /* position: absolute;
    right: 0;
    top: 0;
    min-width: 25px;
    min-height: 25px;
    background-color: #fefefe;
    padding: 6px;
    line-height: 19px;
    z-index: 1;
    color: #cd3c3c;
    transition: all .2s; */
/* } */
.showel{
    /* background-color: #5e680e8c; */
    cursor: pointer;
    overflow:hidden;
    /* display: none; */
    position: relative;
    transition: all .3s;

}
.viseble{
    /* overflow: inherit; */
    /* background-color: #dbdbdb; */
    display: block;
    background-image: linear-gradient(rgb(201, 201, 201), rgb(238, 238, 238));
    color: #655e5e;
    min-height: 125px;
    position: fixed;
    padding: 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: 2px solid #bab2b2;
    font-size: 15px;
    transition: all .4s;
    z-index: 1000;

}

:root{
    /* --main-color: rgb(98, 89, 202); */
    /* --main-color: rgb(121, 112, 219); */
    --main-color: black;

}
.textareas:focus{
    box-shadow:1px 0px 0px #e59c9c!important;
}


/* start main loading */

#loadingd{
    width: 110px;
    height: 110px;
    border: 10px solid #ECECEC;
    border-top-color: #f1e6a9;
    border-radius: 50%;
    animation: to-right 1.5s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}
#loadingd .ok{
    animation: to-left 1.5s linear infinite;
    color: #e2d8a0;
    text-shadow: 0px 0px 0px #362e04;
    font-size: 22px;
}

@keyframes to-right {
    0% { transform:  rotate(0deg);}
    100% { transform:  rotate(360deg);}
}

@keyframes to-left {
    0% { transform:  rotate(0deg);}
    100% { transform:  rotate(-360deg);}
}

/* start main loading */




/* end root */
/* start main moved menu */
.login{
    color: rgb(27, 26, 26);
    /* text-shadow: 0px 0px 2px rgb(41, 168, 218); */
    position: absolute;
    bottom: 10px;
    /* top: 50px; */
}
    .floted{
        direction: ltr;
        width: 200px;
        height: 100vh;
        background-color: rgb(0, 0, 0);
        /* background-image: linear-gradient(rgb(143, 236, 216), #fff); */
        /* background-color: #8efced; */
        /* border-right: 1px solid #cecccc; */
        position: fixed;
        z-index: 10;
        left: -200px;
        transition: .5s;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .floted .absol{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        right: -40px;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2;
        
    }
    .floted .absol::before{
        position: absolute;
        content: "";
        border-width: 25px;
        border-color: transparent rgba(179, 182, 28, 0.507) rgba(160, 151, 30, 0.507) transparent;
        border-radius: 47%;
        border-style: solid;
        top: -3px;
        left: -25px;
        transform: rotate(-45deg);
    }
    .floted .absol svg{
        position: relative;
        top: 3px;
        left: -9px;
        color: rgb(39, 40, 41);
        font-size: 15px;
    }
    .open{
        left: 0px;
    }
    .floted .main-flot{

    }
     .floted .main-flot .main-flat-h{
        background-color: rgb(0, 0, 0);
        width: 100%;
        padding: 10px;
     }
    .floted .main-flot .main-flat-h .pic{

    }
    .floted .main-flot .main-flat-h .pic img{
        width: 160px;
        border-radius: 15px;
    }
    .floted .main-flot .main-flat-b h2{
        font-size: 20px;
        padding: 10px 0px 5px;
        color: rgb(235, 227, 227);
    }
    .floted .main-flot .main-flat-b p{
        font-size: 15px;
        color: rgb(219, 216, 216);
    }

    .floted .main-flot .main-flat-b{
        text-align: center;
    }
  
   .floted .main-flot .main-flat-b nav{
    /* background-color: yellow; */
   }
   .floted .main-flot .main-flat-b .list{
    /* background-color: chartreuse; */
    padding: 0px;
    margin: 0px;
    margin-top: 20px;
   }
   .floted .main-flot .main-flat-b .list .lis{
    /* border-bottom: 1px solid rgb(218, 218, 218); */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    cursor: pointer;
    /* background-color: aqua; */
    width: 100%;
   }
   .floted .main-flot .main-flat-b .list .lis .urllink{
    /* background-color: rgb(127, 150, 255); */
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* background-color: #297faa; */
    width: 100%;
    /* padding: 4px 11px; */

   }
   .floted .main-flot .main-flat-b .list .urllink svg{
        color: goldenrod;
        font-size: 14px;
        padding-right: 7px;
   }
   .floted .main-flot .main-flat-b .list .urllink a{
    margin-right: 13px;
    text-decoration: none;
    color: rgb(247, 247, 247);
    transition: .3s;
    font-size: 13px;
    font-weight: bold;
    /* background-color: #3bb815; */
    width: 100%;
    display: flex; 
   }
   .floted .main-flot .main-flat-b .list .logo{

   }
   .floted .main-flot .main-flat-b .list .logo svg{

   }
   .floted .main-flot .main-flat-b .list .lis:hover{
    background-color: rgba(173, 216, 230, 0.507);
   }
   .floted .main-flot .main-flat-b .list .lis:hover .urllink a{
    padding-left: 4px;
   }

/* end main moved menu */
/* start form import excel data */
.body{
    background-color: #ECECEC;
    /* background-image: url('../image/back2.jpg'); */
    /* background: rgb(233,215,223);
background: radial-gradient(circle, rgba(233,215,223,1) 0%, rgba(148,211,233,1) 100%); */
    /* background-image: url('../image/22.jpg'); */
    /* background-image: linear-gradient(rgb(71, 16, 64),rgb(21, 88, 88),rgb(56, 7, 56)); */
    background-size: cover;
    min-height: 100vh;
    position: relative;
}
.body::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: linear-gradient(to right top, #344f6d, #274d60, #274a52, #2d4545, #33403c); */
    /* background-color: rgba(18, 18, 19, 0.445); */
}
.container{
    direction: rtl;
}
.filterData{
    width: 60%;
    margin: 0px auto;
    /* display: grid; */
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    direction: rtl;
    gap: 10px;
    max-height: 100vh;
    /* overflow: hidden; */
}
.my-data{
    /* background-color: #e2dfdf; */
    width: 80%;
    margin: 0px auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    direction: rtl;
    gap: 10px;
    /* height: 100vh; */
    /* text-align: right; */
}
.my-data .content{
    margin-top: 30px;
    /* background-color: #8ec5fc79; */
    border: 1px solid rgb(180, 180, 180);
    transition: all .4s;
    /* background-color: rgb(81, 82, 82); */
    /* background-image: linear-gradient(rgba(105, 102, 102, 0.664), rgba(221, 221, 221, 0.473)); */
    position: relative;
    /* min-height: 220px; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 2;
    /* width: 100%; */
    /* background-color: #297faa; */
}
.my-data .content:hover{
    background: rgb(231, 229, 230);
    background: radial-gradient(circle, rgb(221, 218, 219) 0%, rgb(224, 226, 226) 100%);

    /* background: radial-gradient(circle, rgba(233,215,223,1) 0%, rgba(148,211,233,1) 100%); */
}
.my-data .content .text{
    padding: 13px;
}
.my-data .content svg{
    font-size: 30px;
    color: rgb(181, 196, 111);
}
/* .filterData .content img{
    width: 33px;
} */
.content .text .form-ok{
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 15px;
    /* background-color: #297faa; */
}
.form-ok .from-valid-to{
    /* background-color: #4c6fa3; */
    display: flex;
}
.form-ok .from-valid-to input{
    border: 1px solid rgb(207 197 197);
    /* background-color: rgb(63, 63, 63); */
    color: rgb(8, 8, 8);
}
.form-ok .btn_ok{
    /* width: 100%;
    height: 33px;
    background-color: #1d70cf;
    color: #fff;
    border: 1px solid blue; */
    width: 100%;
    height: 33px;
    background-color: #e1e1e1;
    color: #181717;
    border: 1px solid #1b1b202e;
    font-size: 19px
}
.my-data .content p{
    margin: 10px;
    font-size: 15px;
    font-weight: bold;
    width: 100%;
    color: #0e4a68;
    /* color: #fff; */
}
.my-data form{
    background-color: #e7e9ec;
display: flex;
flex-direction: column;
padding: 12px;
flex-basis: 45%;
align-items: center;
justify-content: space-evenly;
    /* background-color: #8EC5FC; */
}

.my-data form input{
    width: 150px;
    height: 30px;
}
.my-data form > #sarch{
    /* width: 100%; */
    /* background-color: red; */
}
.my-data form > .upl,.btn{
     /* width: 100%; */
     text-align: center;
     /* color: #fff; */
}
.my-data form > .upl{
    background-color: rgb(201, 199, 196);
    color: #fff;
    font-size: 1.2rem;
    
}
.my-data form > .btn{
    background-color: rgb(31, 126, 158);
    color: #fff;
    width: 150px;
    margin-right: 20px;
    font-size: 1.4rem;
    margin: 14px 0px;
    /* border: 1px solid #222; */
}
.my-data form > .upl:hover,
.my-data form > .btn:hover{
    background-color: rgba(72, 75, 75, 0.658);
    color: #fff;
    
}



@media(max-width: 767px){
    
.my-data{
    /* background-color: #e2dfdf; */
    /* width: 80%;
    margin: 0px auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    direction: rtl;
    gap: 10px; */
    /* height: 100vh; */
    /* text-align: right; */
    width: 95%;
    display: flex;
    flex-direction: column;
}
.my-data .content{
    margin-top: 30px;
    /* background-color: #8ec5fc79; */
    border: 1px solid rgb(180, 180, 180);
    transition: all .4s;
    /* background-color: rgb(81, 82, 82); */
    /* background-image: linear-gradient(rgba(105, 102, 102, 0.664), rgba(221, 221, 221, 0.473)); */
    position: relative;
    /* min-height: 220px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
    /* width: 100%; */
    /* background-color: #297faa; */
}
.my-data .content:hover{
    background: rgb(231, 229, 230);
    background: radial-gradient(circle, rgb(221, 218, 219) 0%, rgb(224, 226, 226) 100%);

    /* background: radial-gradient(circle, rgba(233,215,223,1) 0%, rgba(148,211,233,1) 100%); */
}
.my-data .content .text{
    padding: 13px;
}
.my-data .content svg{
    font-size: 30px;
    color: rgb(181, 196, 111);
}
/* .filterData .content img{
    width: 33px;
} */
.form-ok{
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 15px;
    
}
.form-ok .from-valid-to{
    /* background-color: #4c6fa3; */
    display: flex;
}


}
/* start main moved menu */

.mains{
    /* overflow: scroll; */

}
.mains .table{
    /* overflow: scroll; */
}


/* start edite */
.mains{
    /* background-color: #8EC5FC; */
    /* background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); */
}
#tableid{
    /* position: sticky; */
    position: relative;
    top: 0;
    left: 0;
    /* background-color: white; */
    font-size: 6px;
    height: 40px;
    padding: 0px 0px;
    line-height: 40px;
    border-bottom: 1px solid #b1b0b0;
    direction: rtl;
    /* font-size: 12px; */
text-align: center;
/* background-color: #8EC5FC; */
}




@media(max-width:992px){
    .tabls{
    
    }
    .tabls tr{
        font-size: 8px;
    }
    .tabls .btn{
        font-size: 8px;
    }
}
@media(max-width:767px){
    .tabls tr{
        font-size: 11px;
    }
    .tabls .btn{
        font-size: 9px;
    }
}
/* body{
    background-color: #8EC5FC;
} */
/* end edite */

/* start main page */
.main{
    /* font-family: 'Barlow', sans-serif;
    font-family: 'Noto Sans Arabic', sans-serif; */
    background-image: url('../image/3.jpg');
    background-size: cover;
    flex-direction: column;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: rtl;
}
.main .home{
    background-color: #ffffff9c;
    width: 95%;
    /* padding: 20px; */
    box-shadow: 1px 1px 10px #ececec;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(400px,1fr));
    gap: 50px 20px;
    text-align: center;
}

.home .box{
    position: relative;
    background-color: #ececec9f;
    box-shadow: 1px 1px 4px rgb(177, 177, 177);
    transition: .5s;
   
}
.home .box:hover{
    transform: translateY(5px);
    position: relative;
    color: #fff;
    background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

}
.home .box .text{
    padding: 20px;
}
.main h1{
    color: rgb(238, 238, 238);
    font-style: italic;
    font-family: sans-serif;
    text-shadow: 2px 2px 10px rgb(36, 35, 35);
    margin: 30px;
    text-align: left;
}
.mylink{
    text-decoration: none;
    /* background-color: #8EC5FC; */
}
.mylink:hover{
    text-decoration: none;
}
.box .text h3{
    color: #222;
    /* color: #fff; */
    font-weight: normal;
    font-weight: 600;
    font-family:fantasy;
}
.text p{
    color: rgb(77, 77, 77);
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    margin-bottom: 40px;
}

.home .box .logo{
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    background-color: rgb(73, 73, 73);
    width: 100%;
    /* background-color: rgb(209, 70, 70); */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: #fff;
}
/* .home .logo a{
    text-decoration: none;
    color: #fff;
} */
.home .logo svg{
    font-size: 26px;
}
.tabls{
    direction: rtl;
}
/* end main page */
/* ------------------------------------ */

.fixeddiv{
    position: sticky;
    /* direction: rtl; */
    /* width: 100%; */
    z-index: 2;
    top: 0;
    /* right: 0; */
    background-color: rgb(95, 95, 95);
    /* background-color: rgb(166, 164, 173); */

    color: #fff;
    /* box-shadow: 1px 1px 6px rgb(167, 167, 167); */
    /* background-image: linear-gradient(rgb(0, 162, 255), rgb(149, 202, 245)); */
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 6px;
    /* background-color: #8EC5FC; */
}
thead th,tbody td{
    border: 1px solid #c8c9ca;    
}
tbody .problem,
thead .problem{
    /* color: rgb(38, 139, 109) !important; */
    background-color: rgba(209, 214, 218, 0.24);
    border: 1px solid #cfcbcb;
    max-width: 120px;
    position: relative;
    font-size: 12px;
}
tbody .problem{
    color: #222;
    /* display: flex;
    height: 100%;
    align-items: center;
    justify-content: center; */
    /* text-align: center; */
    line-height: 1.3;
    padding: 3px 0px;
    margin: 0px;
    /* width: fit-content; */
}
tr,td{
    /* padding: 0 !important;
    margin: 0 !important;
    line-height: 25px !important;
    width: 0px !important; */
  }
.forms{
    /* visibility: hidden; */
    position: sticky;
    width: 140%;
    background-color: #eeeeee;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    /* position: sticky; */
    top: 0;
}
.forms form{
    flex-basis: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.maintabls{
    /* overflow-x: scroll; */
    width: 140%;
    text-align: center;
    /* background-color: #eeeeee;; */
    /* line-height: 22px; */
}

.maintabls #xxxxxxxx th{
    /* position: sticky;
    top: 50px;
    height: 35px;
    background-color: #7e8081;
    color: white;
    text-align: center;
    line-height: 35px; */
    
    position: sticky;
    top: 50px;
    height: 20px;
    background-color: #414445;
    color: white;
    text-align: center;
    line-height: 20px;
}
.maintabls #myTable th{
    /* position: sticky;
    top: 0px;
    height: 30px;
    background-color: #0e4a68;
    color: white;
    text-align: center;
    line-height: 30px; */

    position: sticky;
    top: -1px;
    height: 24px;
    background-color: #000000;
    color: white;
    text-align: center;
    line-height: 24px;
}
.maintabls #myTable .sdad{
    background-color: green;
    color: #fff;
}
.forms form input{
    margin-bottom: 3px;
    width: 100%;
}
.forms form button{
    padding-top: 10px;
}
/* show data */
.mains{
    height: calc(100vh - 90px);
    /* : (100px -20px); */
    
    width: 122%;
}
/* .mains .mo3ayna{
    background-color: #6a98c7;
    color: #fff;
} */
.mains .mo3ayna tr{
    font-size: 8px;
}
.thmaincon{
}

/* start main page */
.main-page{
    /* direction: ltr; */
    background-color: #ececec;
    /* background-image: url('../image/pvp.png'); */
    /* background-image: radial-gradient(rgba(0, 0, 0, 0.726), grey); */
    min-height: 100vh;
    padding: 20px;
    text-align: right;
    background-size: cover;
}
.main-page .prgraph{
    text-align: right;
    text-align: left;
}
.main-page .prgraph h2 svg{
    font-size: 2rem;
}
.main-page .prgraph h2{
    /* font-weight: bold;
    font-size: 2rem;
    margin-top: 20px;
    margin-bottom: 5px;
    text-shadow: 0px 0px 3px rgb(100, 99, 99);
    letter-spacing: 2px; */
    margin-left: 20px;
    font-weight: bold;
    font-size: 2rem;
    margin-top: 20px;
    margin-bottom: 30px;
    text-shadow: 0px 0px 3px rgb(193 172 172);
    letter-spacing: 2px;
    color: #4c6fa3;
    /* color: rgb(240, 236, 236); */
}
.main-page .prgraph p{
    font-size: 1.4rem;
}
.main-page .main-content{
    display: flex;
}

.main-page .main-content .ancor{
    text-decoration: none;
}
.main-page .main-content img{
    /* width: 40%; */
}
.main-page .main-content .content-one{
    /* flex: 50%; */
    /* background-color: #7e8081; */
    padding: 20px;
    /* margin-bottom: 20px; */
}

/* .main-page .main-content .content-one .card-one .link{
  
} */
.main-page .main-content .content-one .card-two {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main-page .main-content .content-one .card-two .link{

}
.main-page .main-content .content-two{
    /* flex: 50%; */
    /* background-color: #6dbfe7; */
    padding: 10px;
    text-align: center;
}

.main-page .main-content .content-two .card-three{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* end main page */
.main-page .main-content .content-one .card-one .link,
.main-page .main-content .content-one .card-two .link,
.main-page .main-content .content-two .card-three .link,
.main-page .main-content .content-two .card-four .link{
    background-color: #297faa;
    /* border: 1px solid #297faa6e; */
    border-radius: 10px;
    height: 250px;
    width: 290px;
}

.main-page .main-content .content-one .card-one .link{
    margin-bottom: 15px;
    width: 100%;
}
.main-page .main-content .content-two .card-four .link{
    margin-top: 15px;
    width: 100%;
}
.main-page .main-content .content-one .card-one .link{
    /* background-image: url('../image/z0.jpg'); */
}



@media(max-width: 1260px){
    .main-page .main-content{
        display: flex;
        flex-direction: column;
    }
    .main-page .main-content .content-one .card-two{
        gap: 20px;
        /* width: 100%; */
    }
    .main-page .main-content .content-one .card-two .link{
        background-color: #8EC5FC;
        flex: 100%;
    }
    .main-page .main-content .content-two .card-three{
        gap: 20px;
    }
    .main-page .main-content .content-two .card-three .link{
        background-color: #8EC5FC;
        flex: 100%;
    }
}




@media(max-width: 767px){
    .main-page .main-content{
        display: flex;
        flex-direction: column;
    }
    .main-page .main-content .content-one .card-two{
        gap: 20px;
        flex-direction: column;
        /* width: 100%; */
    }
    .main-page .main-content .content-one .card-two .link{
        /* background-color: #8EC5FC; */
        flex: 100%;
        width: 100%;
    }
    .main-page .main-content .content-two .card-three{
        gap: 20px;
        flex-direction: column;
    }
    .main-page .main-content .content-two .card-three .link{
        background-color: #8EC5FC;
        flex: 100%;
        width: 100%;
    }
}
/* .main-page .main-content .content-one .card-two .link{
    background-image: url('../image/z1.jpg');
}
.main-page .main-content .content-two .card-three .link{
    background-image: url('../image/z2.jpg');
}
.main-page .main-content .content-two .card-four .link{
    background-image: url('../image/z0.jpg');
} */
.main-page .main-content .link{
    position: relative;
}
.main-page .main-content svg{
    font-size: 3rem;
    color: rgb(161, 243, 172);
    position: relative;

    /* position: absolute; */
    top: 15px;
    right: 15px;
    /* width: 150px;
    height: 30px;
    border: 1px solid #ececec;
    background-color: #1c6c94;
    border-radius: 5px;
    color: #fff;
    cursor: pointer; */
}
/* .main-page .main-content .mybutton{
    position: absolute;
    top: 5px;
    right: 5px;
    width: 150px;
    height: 30px;
    border: 1px solid #ececec;
    background-color: #1c6c94;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
} */
.main-page .main-content #one{
    background-image: url('../image/back2.jpg');
    background-size: cover;
    position: relative;
    box-shadow: 2px 1px 7px #4d4e4e;
}
.main-page .main-content .text{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
}
.main-page .main-content .text h1{
    /* background-color: #0e4a68; */
    color: #fff;
    font-size: 20px;
    margin-bottom: 15px;
}
.main-page .main-content .text p{
    /* background-color: #0e4a68; */
    color: #fff;
    font-size: 17px;
    text-align: center;
    /* text-shadow: 2px 2px 5px white; */
}
.main-page .main-content #one::before{
    content: "";
    position: absolute;
    background-image: linear-gradient(rgba(155, 155, 158, 0.123),rgba(0, 0, 255, 0.247));
    background-color: rgba(104, 104, 104, 0.788);
    transition: all .3s;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main-page .main-content #two{
    background-image: url('../image/a2.jpg');
    background-size: cover;
    position: relative;
    box-shadow: 2px 1px 7px #9fa2a0;
}
.main-page .main-content #two::before{
    content: "";
    position: absolute;
    background-image: linear-gradient(rgba(155, 155, 158, 0.123),rgba(0, 0, 255, 0.247));
    background-color: rgba(104, 104, 104, 0.788);
    transition: all .3s;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main-page .main-content #three{
    background-image: url('../image/a6.jpg');
    background-size: cover;
    position: relative;
    box-shadow: 2px 1px 7px #9fa2a0;
}
.main-page .main-content #three::before{
    content: "";
    position: absolute;
    background-image: linear-gradient(rgba(155, 155, 158, 0.123),rgba(0, 0, 255, 0.247));
    background-color: rgba(23, 53, 117, 0.53);
    transition: all .3s;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main-page .main-content #four{
    background-image: url('../image/a8.jpg');
    background-size: cover;
    position: relative;
    box-shadow: 2px 1px 7px #9fa2a0;
}
.main-page .main-content #four::before{
    content: "";
    position: absolute;
    background-image: linear-gradient(rgba(155, 155, 158, 0.123),rgba(0, 0, 255, 0.247));
    background-color: rgba(23, 53, 117, 0.53);
    transition: all .3s;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main-page .main-content #five{
    background-image: url('../image/a9.jpg');
    background-size: cover;
    position: relative;
    box-shadow: 2px 1px 7px #9fa2a0;
}
.main-page .main-content #five::before{
    content: "";
    position: absolute;
    background-image: linear-gradient(rgba(155, 155, 158, 0.123),rgba(0, 0, 255, 0.247));
    background-color: rgba(104, 104, 104, 0.788);
    transition: all .3s;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main-page .main-content #six{
    background-image: url('../image/22.jpg');
    background-size: cover;
    position: relative;
    box-shadow: 2px 1px 7px #9fa2a0;
}
.main-page .main-content #six::before{
    content: "";
    position: absolute;
    /* background-color: rgba(108, 117, 23, 0.911); */
    background-image: linear-gradient(rgba(155, 155, 158, 0.123),rgba(0, 0, 255, 0.247));
    background-color: rgba(104, 104, 104, 0.788);
    transition: all .3s;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main-page .main-content #one:hover::before,
.main-page .main-content #two:hover::before,
.main-page .main-content #three:hover::before,
.main-page .main-content #four:hover::before,
.main-page .main-content #five:hover::before,
.main-page .main-content #six:hover::before
{
    background-color: rgb(14, 165, 39);
}
/* start login */
.page{
    background-image: url(../image/22.jpg);
    background-size: cover;
    background-color: #ececec;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}
.page::before{
    content: "";
    position: absolute;
    background-color: rgba(34, 34, 34, 0.562);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.page .login{
    position: relative;
    display: flex;
    /* background-color: #0e4a68; */
    text-align: center;
    width: 70%;
    min-height: 50vh;
}
.page .login .par-menu{
    background-color: var(--main-color);
    color: #fff;
    padding: 20px;
    flex-basis: 38%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.page .login .par-menu .logo{
    display: flex;
    align-items: center;
    justify-content: center;
}
.page .login .par-menu .logo svg{
    font-size: 2rem;
    margin-right: 7px;
    color: rgb(231, 183, 80);
}
.page .login .par-menu .logo h2{
    margin-top: 8px;
    font-size: 2rem;
    color: rgb(231, 183, 80);
}
.page .login .par-menu .pic{

}
.page .login .par-menu .pic img{
    /* width: 70px; */
    max-width: 80%;
    margin: 30px 0px;
}
.page .login .par-menu h3{
    font-size: 1.3rem;
    font-weight:  500;
    color: rgb(231, 183, 80);
}
.page .login .par-menu p{
    font-size: 1.2rem;
    font-weight: 300;
    padding-top: 5px;
    line-height: 1.6;
    color: rgb(231, 183, 80);

}


.page .login .main-menu{
    flex-basis: 62%;
    background-color: #fff;
    text-align: right;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
}
.page .login .main-menu h4{
    font-size: 1.9rem;
    font-weight: 400;
}
.page .login .main-menu p{
    font-size: 1.3rem;
    font-weight: 400;
    color: gray;
}
.page .login .main-menu form{
    margin-top: 30px;
}
.page .login .main-menu form .from-div{

}
.page .login .main-menu form .from-div label{
    display: block;
    color: gray;
    font-size: 1.5rem;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 3px;
}
.page .login .main-menu form .from-div input{
    width: 100%;
    outline: none;
    border: 1px solid rgb(218, 218, 218);
    height: 33px;
    font-size: 1.8rem;
    text-align: center;
    color: rgb(22, 22, 22);
}
/* .page .login .main-menu form .from-div input:fouc */
.page .login .main-menu form input[type=submit]{
    margin-top: 22px;
    background-color: var(--main-color);
    color: white;
    color: rgb(255, 254, 253);

    width: 100%;
    outline: none;
    border: 1px solid rgb(218, 218, 218);
    height: 43px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: .4s;
}
.page .login .main-menu form input[type=submit]:hover{
    /* background-color: rgb(142, 137, 192);; */
    background-color: rgb(54, 53, 53);
}
@media(max-width: 992px){
    .page .login{
        width: 90%;
        /* height: 0px; */
        /* overflow: hidden; */
    }
    .page .login .par-menu{
        display: none;
    }
    .page .login .main-menu{
        width: 100%;
        flex-basis: 100%;
        height: 90vh;
    }
}
/* end login */
/* start index */
.btn-log-out{
    border: 1px solid #a7a3a3;
    padding: 6px;
    position: absolute;
    bottom: 50px;
    right: 40px;
    width: 50%;
    text-align: center;
    text-decoration: none;
    font-size: 1.5rem;
    transition: all .4s;   
    font-weight: bold; 
    background-image: linear-gradient(rgb(81, 214, 96),rgb(105, 181, 128));
    color: #fff;
}
.btn-log-out:hover{
    color: #fff;
    background-image: linear-gradient(rgb(46, 199, 64),rgb(32, 133, 63));
}

/* end index */
lable{
    color: black;
    font-weight: bold;
    font-size: 1.5rem;
    margin: 4px;
}


@media(max-width: 767px){
    .btn-log-out{
     position: absolute;
     left: 0;
     background-color: #0e4a68;
    }
    .btn-log-out:hover{
        color: #fff;
        background-image: linear-gradient(rgb(46, 199, 64),rgb(32, 133, 63));
    }
}

.content-one .card-two #three{
    margin: 10px;
}







/* 

#contTable{
    width: 100%;
    padding: 10px;
    gap: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
}

.mytable{
    display: flex;
    justify-content: space-between;
    border-style: none;
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
   
}

table caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
  }
  
.mytable thead{
    flex-basis: 40%;
    margin-bottom: 10px;
    background-color: rgb(242, 242, 242);
    color: rgb(38, 40, 40);
}
.mytable tbody{
    color: #877e80;
    flex-basis: 60%;
    background-color: #fff;
    border-width: 0px;
    width: 100%;
    margin-bottom: 10px;
}
.mytable tr{
    display: flex;
    flex-direction: column;
    width: 100%;
    border-width: 0px;
    width: 100%;
    padding: .35em;
}

.mytable tr td,
.mytable tr th{
    height: 22px;
    border-bottom: 1px solid rgb(235, 232, 236);
    border-width: 100%;
}

.mytable tr td{
    padding-right: 10px;
}

thead th, tbody td {
    border: 0px solid #1a52c3;
  } */