body{
    background-color: white !important;
}
.logo-section {
  display: flex;
  justify-content: center;  /* توسيط أفقي */
  align-items: center;       /* توسيط رأسي */
  height: 100%;              /* ياخد ارتفاع كامل */
}

.logo-section .small-logo {
  width: 60%;       /* حجم الصورة — غيري الرقم زي ما تحبي */
  max-width: 500px; /* أقصى حجم */
}
/* Right background */
/* .logo-section { */
        
    /* flex: 1; */
    /* background-image: url("../img/Logo2.png"); */
    /* background-size:contain;
    background-position: center;
    background-repeat: no-repeat;     */
    
/* } */

/* Left side form */
.form-section {
    background-color: #214d74 ! IMPORTANT;
    flex: 1;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* padding: 0 60px; */
    color: white;

}

.loginForm{
margin: auto !important;

}
.small-logo {
    width: 80px;
    display: block;
    margin: 0 auto 20px;

}

.form-title {
    text-align: center;
    margin-bottom: 25px;
    font-size: 26px;
    color: #ffffff;
}

/* Inputs */
form select,
form input {
    width: 100%;
    height: 37px  !important;
    max-height: 47px;
    border-radius: 2px;
    margin-bottom: 15px;
    border: none;
    outline: none;
    padding: 0 14px;
    font-size: 15px;
    color: black;
    background: #dde6ff;
}

/* Button */
button {
    width: 100%;
    height: 48px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 18px;
    margin-top: 5px;
    background: #3b82f6;
    color: white;
    transition: .3s;
}

button:hover {
    background: #2563eb;
}



.nav.side-menu > li.active > a, .nav.side-menu > li.current-page > a {
  
    background: #1a3e60;
    box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
    color: #fff;
}


.menu-vertical .menu-inner > .menu-item a{
  
  
    padding: 16px 15px 15px !important;
}

.menu-sub > .menu-item a{
   
    padding: 9x !important;
}
.nav.side-menu>li>a, .nav.child_menu>li>a {
    /* color: #222; */
    font-weight: 500 !important;
}
.nav.side-menu > li.active > a, .nav.side-menu > li.current-page > a {
    text-shadow: rgba(255, 255, 255, 0.25) 0 -1px 0 !important;
    background: #1a3e60 !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
    color: #fff !important;
}
/* تنسيق العنصر الأساسي عند الضغط أو كونه Active */
.menu-item.active > .menu-link {
    background-color: #1a3e60 !important; /* الأحمر الداكن مثل الصورة */
    color: #fff !important;
    border-radius: 5px;
    /* font-weight: bold; */
}
.menu .menu-sub > .menu-item > .menu-link div{
    /* padding-right: 7px; */
    /* color: #3a3939 ; */
}

.menu .menu-sub > .menu-item:active > .menu-link div{
    /* padding-right: 7px; */
    color: white !important ;
}
.menu-item.active > .menu-link:not(.menu-toggle) {
    background-color: #1a3e60 !important;
    color: white !important;
    padding: 9px  !important;
}

.menu-inner > li.active > a::before, 
.menu-inner > li.current-page > a::before {
    content: "";
    width: 15px;
    height: 15px;
    background: #F7F7F7;
    position: absolute;
    display: block;
    left: -7px;
    transform: rotate(45deg);
    top: 18px;
}


.menu .menu-sub > .menu-item > .menu-link::before {
    /* position: absolute; */
    border: 1.5px solid #1a3e60;
    block-size: 0.625rem;
    content: "";
    inline-size: 0.625rem;
    inset-inline-start: 1.75rem;
    border-radius: 50%;
    margin-right: 8px;
        background-color: #1a3e60 !important;
}

.menu-vertical .menu-item.active:not(.open) > .menu-link:not(.menu-toggle)::before {
    border-color: #fff !important;
      background-color: #fff !important;
}
.user img{
    border-radius: 50%;

}

.profile {
margin-bottom: 10px;;
}
.profile_pic {
    width: 35%;
    float: right;
}
.profile_info {
    padding: 10px 10px 20px;
    width: 65%;
    float: right;
}

.profile_info span {
    font-size: 13px;
    line-height: 30px;
    color: #BAB8B8;
}

.profile_info h2 {
    font-size: 14px;
    color: #a94442;
    margin: 0;
    font-weight: 300;
}
.clearfix::before {
  display: table;
    content: " ";
}
.profile h2 {
    line-height: 1rem !important;
}
.clearfix:after, form:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* Responsive */
@media (max-width: 900px) {
    .logo-section {
        display: none;
    }
    .form-section {
        flex: 1 1 100%;
        padding: 0 30px;
    }
}
.layout-page {
        width: 100% !important;
    position: absolute !important;
}

.form-select  .disabled {
    background-color: rgb(165, 163, 163)  !important;
}

/* .menu-mini {*/
/*  width: 60px !important;*/
/*}*/
/*.menu-mini.menu-hover-open {*/
/*  width: 260px !important;*/
/*}*/
.layout-menu-expanded {
  width: 260px !important;
}
.layout-menu-collapsed {
  width: 60px !important;
}
 
/* عند hover على المنيو وهي مقفولة */
@media (min-width: 1200px) {
  .layout-menu-collapsed #layout-menu:hover .menu-inner > .menu-item div:not(.menu-block),
  .layout-menu-collapsed #layout-menu:hover .menu-inner > .menu-item .menu-link > div {
      opacity: 1 !important;
      visibility: visible !important;
      overflow: visible !important;
    
  }

 
}
@media (min-width: 1200px) {
  .layout-menu-collapsed #layout-menu .menu-inner > .menu-item div:not(.menu-block),
  .layout-menu-collapsed #layout-menu .menu-inner > .menu-item .menu-link > div {
      opacity: 0 !important;
      visibility: hidden !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      transform: translateX(-10px);
      transition: .2s ease;
  }
}
@media (min-width: 1200px) {
    .layout-menu-collapsed:not(.layout-menu-hover, .layout-menu-offcanvas, .layout-menu-fixed-offcanvas) .layout-menu .menu-vertical .menu-inner > .menu-item, .layout-menu-collapsed:not(.layout-menu-hover, .layout-menu-offcanvas, .layout-menu-fixed-offcanvas) .layout-menu.menu-vertical .menu-inner > .menu-item {
        /* inline-size: var(--bs-menu-collapsed-width); */
    }
}


.layout-menu-collapsed .layout-menu:not(:hover) .menu-inner > .menu-item div:not(.menu-block) {
    opacity: 0 !important;
}

.navbar{
  background-color: #1a3e60  !important;
  color: white  !important;
}

.layout-navbar.navbar-detached {
    padding: 15px !important;
     inline-size: calc(100% - 0rem * 2); 
    transition: padding 0.2s ease;
    border-bottom-right-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem;
}
.form-control {
    border-radius: 0 !important;
    width: 100% !important;
    /* height: 37px !important;  */
        border: 1px solid #ccc !important;
}
.form-group {
    margin-bottom: 10px !important;
}
.form-select {
     border: 1px solid #ccc !important;
}
select {
    background-position: left 0.5rem center !important;
    min-height: 47px;
    padding:0 !important;
    padding-right: 5px !important;
}

.form-select:focus{
--tw-ring-color: #d1d7e5 !important;
transition: none !important;
}

.form-select .disabled{
      background-color: rgb(165, 163, 163)  !important;
          font-family: Cairo;
    font-size: 16px !important;
    font-weight: bold !important;
}


/* إخفاء المنيو تلقائياً في الشاشات الصغيرة */
@media (max-width: 992px) {
  #layout-menu {
    transform: translateX(100%) !important; /* يختفي لليمين */
  }
  html.menu-fixed-open #layout-menu,
html.menu-open #layout-menu {
    transform: translateX(0) !important;
}
}

.rule{
        font-size: 17px;
    color: black;
    font-weight: bold;
}
.button_color{

   background-color:#1a3e60;
}

.menu-toggle::after {

color: white !important;
}

/* 
.Vue-Toastification__container {
    /* z-index: 9999; */
    /* position: fixed;
    padding: 20px;
    width: 450px !important; 
    box-sizing: border-box;
    display: flex;
    min-height: 250px  !important;
    color: black !important;
    flex-direction: column;
    pointer-events: none; */
    /* color:#9b7c3d !Important; */
    /* background-color: #fff !important;  */
    
 /* }  */

 /* .Vue-Toastification__container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 2px solid #e4b24f;
  pointer-events: none; */
  /* box-sizing: border-box; */

 /* } */ 


 /* استهدف container الخاص بالـ top-center وادّيه قواعد لتوسيطه تمامًا */
/* نقل container لنص الشاشة */
.Vue-Toastification__container.top-center {
  top: 30% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  /* transform: translate(-50%, -50%) !important; */
  position: fixed !important;   /* لازم لتجاهل تموضع flow */
  z-index: 999999 !important;
}

/* منع تمدد التوست بعرض الشاشة */
.Vue-Toastification__toast.top-center {
  margin: 0 auto !important;
}
.myrow{
    min-height: 1px !important;
    background-color: rgb(172, 170, 170);
    margin-right: 20px !important;
     margin-left: 20px !important;
margin-bottom: 10px;;
}
.container-p-y:not([class^=pt-], [class*=" pt-"]) {
     padding-block-start: 0px !important; 
}

.specialbutton {

    width: 250px;
    background-color:#8d6a26  !important;
    color: white !important;
    margin: auto;
    margin-bottom: 20px;

}
.specialbutton:hover {

       
    background-color: rgb(134, 111, 65);
    color: white !important;
    

}
.mycard {
    margin-top: 10px;;
    /* border: 1px solid #e6dddd !important; */
}
.iconedit{
    background-color: #5cb85c;
    padding: 5px;
    color: white;

}
.iconshow{
     background-color: #6d6777;
    padding: 5px;
    color: white;

}
.icondelete{
    background-color: #d9534f;
    padding: 5px;
    color: white;

}

/* .custom-toast {
  position: relative;

} */
.custom-toast p {
    color:black !important;
}

.login-page{
    background-image: url("../img/backgfround.jpg")no-repeat;
}





/* staff login page */
.stafflogin .wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: #accffe; } */
}
.stafflogin .inner {
  position: relative;
  width: 500px; }

.stafflogin .image-1 {
  position: absolute;
  bottom: -12px;
  left: -191px;
  z-index: 99; }

.stafflogin .image-2 {
  position: absolute;
  bottom: 0;
  right: -129px; }

.stafflogin form {
  width: 100%;
  position: relative;
  z-index: 9;
  padding: 27px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); }

.stafflogin h3 {
  text-transform: uppercase;
  font-size: 20px;
  font-family: 'Cairo';
  color: #333;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 33px; }

.stafflogin .form-holder {
  position: relative;
  margin-bottom: 21px; }

.stafflogin .form-holder span {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #333; }
 .stafflogin .form-holder span.lnr-lock {
      left: 2px; }

.stafflogin .form-control {
        border: none;
        border-bottom: 1px solid #cfc9c9;
        display: block;
        width: 100%;
        height: 48px;
        background: none;
        padding: 3px 42px 0px;
        color: #201818;
        font-family: 'Cairo';
        font-size: 20px;

}


 .stafflogin .form-control::-webkit-input-placeholder {
    font-size: 14px;
    font-family: "Muli-Regular";
    color: #999;
    transform: translateY(1px); }
 .stafflogin .form-control::-moz-placeholder {
    font-size: 14px;
    font-family: "Muli-Regular";
    color: #999;
    transform: translateY(1px); }
 .stafflogin .form-control:-ms-input-placeholder {
    font-size: 14px;
    font-family: "Muli-Regular";
    color: #999;
    transform: translateY(1px); }
.stafflogin .form-control:-moz-placeholder {
    font-size: 14px;
    font-family: "Muli-Regular";
    color: #999;
    transform: translateY(1px); }
 .stafflogin .form-control:focus {
    border-bottom: 1px solid #accffe; }

.stafflogin button {
  border: none;
  width: 100%;
  height: 49px;
  margin-top: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background:  rgb(27 70 112);
  color: #fff;
  text-transform: uppercase;
  font-family: 'Cairo';
  font-size: 15px;
  letter-spacing: 2px;
  transition: all 0.5s;
  position: relative;
  overflow: hidden; }
.stafflogin button span {
    position: relative;
    z-index: 2; }
/* .stafflogin button:before, button:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(52, 152, 253, 0.25);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); } */
.stafflogin  button:after {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s; }
.stafflogin button:hover:before, button:hover:after {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }

@media (max-width: 991px) {
.stafflogin .inner {
    width: 400px;
    left: 4%; } }
@media (max-width: 767px) {
.stafflogin  .inner {
    width: 100%;
    left: 0; }

.stafflogin .image-1, .image-2 {
    display: none; }

.stafflogin  form {
    padding: 35px;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none; }

.stafflogin .wrapper {
    background: none; } }
.stafflogin input::placeholder {
    font-size: 20px !important; /* غيّري الرقم حسب الحجم اللي تحبيه */
    color: #333;     /* اختياري لتغيير لون النص */
    /* font-weight: bold; */
    font-family: 'Cairo' !important;
     /* اختياري لتكثيف الخط */
}

/* staff login page */

.layout-menu-toggle .icon-base
{
    color: white !important;

}


.stddash .hh1{
  color: #a88744 !important;
   font-weight: bold !important;
   font-size: 20px !important;

}
.stddash aside {

   background-color: #1a3e60 !important;

}

.stddash .menu-item  .menu-link{

   color: #a88744 !important;
   font-weight: bold !important;
    font-size: 17px !important;
}

.stddash .profile_info   
{
    width: 100%;
    margin-right: 10px;
}

.specialcontainer{

    margin: 40px !important;
}

.specialcontainer  .page_title{
  margin-bottom: 20px;;
}
.specialcontainer  .page_title span{
 font-size: x-large;
     color: black;
     font-weight: bold;
 

}  

.instruction span{
   
 font-size: 20px !important;
 font-weight: bold;
 /* color: black !important; */

}

.instruction p{
   
 /* font-size: 20px !important; */
 font-weight: bold;
  /* color: black !important; */

}

.specialheader{
    font-size: x-large;
    color: black;
    font-weight: bold;

}

.info{

    font-weight: bold;
    color: green;
}
.txtname{
    font-size: 16px !important;
    font-family: 'Cairo';
    color: black;
    font-weight: bold;
}
.txtitle{
    font-size: 25px !important;
    font-family: 'Cairo';
    color: black;
    font-weight: bold;
}

.txtinfo{
    color: black  !important;
     font-family: 'Cairo';
       font-size: 17px !important;
}

.uploadicon{
  color: green !important;
 font-size: 24px;;
}

.page_title span{
  font-size: 30px !important;
}
 .table{

    --bs-table-header-bg-color: #e0e3ec !important;
 }
 
 .classerror{
    color: green;
    font-family: 'Cairo';
    margin-right: 40px;

    font-size: 18px;
 }

 .stdlogo {
    margin: auto;
    margin-top: 25px;
}
.subcheck input{
        width: 30px !important;
    max-height: 22px !important;
    min-height: 22px !important;
    margin-left: 10px !important;
}

.menu-item.active > .menu-link:not(.menu-toggle) {
    background-color: #89a0b7 !important;
    color: rgb(15, 15, 15) !important;
    padding: 9px !important;
}
.infoclass{
     background: rgb(241 217 167) !important;
    color: #0a0a0a !important;
    font-family: 'Cairo' !important;
    font-weight: bold !important;
    line-height: 2 !important;
    margin: 0px !important;
}

.fileTemplate{
    color: green !important;
}
.downloaddiv a .fileTemplate{

     color: green !important;
}

.errorclass {
       background: #b53636  !important;
    color: white !important;
    font-family: 'Cairo' !important;
    font-weight: bold !important;
    line-height: 2 !important;
    margin: 0px !important;
}
.card{
    margin-top: 30px  !important;
        border: 2px solid #ddab4f  !important;
        /* border-top: none !important; */
}

.menu-vertical .menu-inner  .menu-item .menu-toggle div{
  
    font-weight: bold !important;
}

.Excelbtn{
    width: 200px;
    background-color:#8a1b0c  !important;
    color: white !important;
    margin: auto;
    margin-bottom: 20px;  
}

.enroll.card {

    background-color:#214d74 !important;
}

.ps__thumb-y{

    top: 30px !important;
    height: 180px  !important;
    width: 15px !important;
}