@import url('../css/style.css');


/* *******************************************************
    -------------- FONTS ----------------------------
**************************************** */

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

/* *******************************************************
    --------------  Pseudo-class  ----------------------------
**************************************** */

:root{
   --rbt: "Roboto", sans-serif;
   --pop:"Poppins", serif;
   --op-sans: "Open Sans", serif;
   --rob-cnd: "Roboto Condensed", sans-serif;
   --white:#fff;
   --balck:#000;
   --light-bg:#eeeeee;
   --gray :#999;
   --lg-blue:#27a9e3;
   --cl-blue : #00b6be;
   --cl-grapes:#702f91;
   --green    : #319865;
}


body{
    margin: 0px!important;
}




.log-container{
    background-color: #2E363F;
    width: 100%; height: 100vh;
    margin: 0px; padding: 0px;
    display: flex; align-items: center;
    justify-content: center;
}

.log-container .inner-container{
    padding: 40px 0px 10px 0px;
    min-width: 500px;
    position: relative;
}

.log-container .inner-container::before{
    content: ''; position: absolute;
    width: 100%; height: 1px;
    top: 0px; left: 0px;
    background-color: #ccc;
    opacity: .3;
}

.log-container .title-head h1{
   color: var(--white);
   font: 500 34px /1.2 var(--pop);
   margin: 10px 0px 30px 0px;
}

.log-container .frm-input{
    max-width: 400px;
}

.log-container .frm-input{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
}

.log-container .frm-input input{
    min-width: 350px;width: 100%; padding: 12px 20px;
    outline: none;
    border: none; font: 400 14px / 16px var(--pop);
 }

 .log-container .frm-input .inp-icon{
    padding: 12px 15px;
 }

 .log-container .frm-input .inp-icon i{
    font-size: 13px; color: #fff;
 }

 .log-container .al-frm form{
    display: flex; align-items: center;
    justify-content: center;
    flex-direction: column;
 }

 .log-container .frm-msg{
    padding: 3rem 0px;
 }

 .log-container .frm-msg .msg{
   font-size: 17px;
 }

 .log-container .frm-btn{
    border-top: 1px solid rgba(204, 204, 204, 0.3);
    padding: 1rem 1rem;
    width: 100%;
 }


 .log-container .frm-btn button{
    border: none; outline: none;
    padding: 5px 15px; color: #fff;
    background-color: #28a745;
    font-size: 15px;
 }


 /* Admin layout------------------------------------------ */


 .al-admin-container .mn-body{
   min-height: 100vh;
 }


 .al-admin-container .mn-body .top-nav .item{
  padding: 13px 20px;
  text-decoration: none;
  border-right: 1px solid #000;
 }

 .al-admin-container .mn-body .top-nav .item:last-child{
  border: none;
 }

 .al-admin-container .mn-body .top-nav .item:hover{
  background-color: #000;
  transition: all .2s linear;
 }

 .al-admin-container .mn-body .top-nav .item h3, .top-nav .item span{
  font: 400 16px/1 var(--op-sans);
 }

 .al-admin-container .mn-body .top-nav .item i{
  color: var(--gray);
  font-size: 16px;
 }




 .mn-body{
   background-color: var(--light-bg);
 }

 

 .bot-titlestyle h3 {
   font : 400 28px /1 var(--op-sans);
   color: #555555;
 }

 .bot-titlestyle{
   padding: 20px 0% 20px 0%;
   /* border-bottom: 1px solid #dadada; */
 }


 .back a, .back i,.back span{
   font-size: 15px;
 }

 .back a:hover i, .back a:hover span{
  color: var(--lg-blue);
  transition: all .2s linear;
 }
 

 .widget-block hr{
    border-top-color: #dadada;
    margin: 30px 0px;
    border: 0;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #fff;
    opacity: 1;
 }

 .al-admin-container .nav-rht{
   background-color: #2e363f;
 }

 
 .al-admin-container .main-menu-sec .site-idy{
   min-height: 100px;
 }

 .al-admin-container .main-menu-sec .site-idy h3{
   color: var(--gray);
   font: 500 30px/1 var(--op-sans);
 }

 .al-admin-container .nav-itms .nav-itms-sec li{
  list-style-type: none;
  border-top: 1px solid #37414b;
  border-bottom: 1px solid #1f262d;
 }

 .al-admin-container .nav-itms .nav-itms-sec li i{
  color: var(--light-bg);
  color: var(--gray)!important;
  font-size: 16px;

 }

 .al-admin-container .nav-itms .nav-itms-sec li a{
  color: var(--light-bg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font: 400 15px /1 var(--op-sans);
  gap: 10px;
  width: 100%;
  padding: 15px 25px;
  text-decoration: none;
 }

 .al-admin-container .nav-itms .nav-itms-sec li a:hover{
  background-color: var(--lg-blue);
  transition: all .2s linear;
 }


 .al-admin-container .navbg-dark .sub-menu{
  background-color: #1f262d;
 }

   .al-admin-container .navbg-dark .sub-menu li{
   border: none;
   }


 /* Data Table Style  */

 .widget-container .widget-container-box{
    border-top: 1px solid #e3e3e3;
    min-width: 900px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
   
 }

 .widget-container .widj-box2{
  max-width: 100%!important;
  
}


.table-con a:hover{
  color: green!important;
  transition: all .2s ease;
}


.widget-container .widj-box2 table{
   max-width: 100%!important;
   
 }

 .widget-container .widj-box2 .tb-response{
   max-width: 100%!important;
   
 }

 .widget-container .widget-container-box table td{
  font: 400 15px/1 var(--op-sans);
  height: 100%;
  
}



 .widget-container .top-sec .icon {
  padding: 10px 15px;
 }

 

 .widget-container .widget-container-box table td a i{
   color: #666;
  font-size: 16px;
  }

  .widget-container .widget-container-box table td a i:hover{
    color: var(--lg-blue);
    transition: all .2s linear;
  }


 .widget-container .tbl-nav{
  border: 1px solid #ccc;
  border-bottom: 0px;
  background-color: var(--white);
 }

 .widget-container .tbl-nav .lft-sec p{
    font: 400 15px/1 var(--op-sans);
  }

  .widget-container .tbl-nav .lft-sec select{
   border: 1px solid #666;
 }

 .pagination-nav .page-link{
   padding: 4px 10px;
   background-color: #f5f5f5;
   color: #333;
   border:1px solid #0000001a
}

.pagination-nav .page-link:hover{
   background-color: #e6e6e6;
   transition: all .2s linear;
   border-color:#e6e6e6;
}


.active>.page-link, .page-link.active {
   background-color: var(--lg-blue)!important;
   border-color: #f5f5f5!important;
}

.dtsearch{
   gap: 8px;
}

.dtsearch input{
   border: 1px solid #414141;
}

/*****************************************************
---------------- ADMIN-FORM  ---------------------
********************************************/

.widget-block  .frm-inner{
   padding: 20px 5%;
}

.widget-block  .frm-inner .frm-control{
   max-width: 600px;
   min-width: 400px;
  margin: 0 auto;
}

.ck-toolbar{
   flex-wrap: wrap!important;
}

.widget-block  .frm-inner .frm-control select , .widget-block  .frm-inner .frm-control input{
   min-width: 400px;
   padding: 5px 9px;
   font-size: 15px;
   border: 1px solid #00000018;
}

.widget-block  .frm-inner .frm-control input{
   padding: 7px 9px!important;
}

.widget-block  .frm-inner .frm-control select , .widget-block  .frm-inner .frm-control textarea{
   min-width: 400px; 
   padding: 5px 9px;
   font-size: 15px;
}

.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
  min-height: 200px; width: 100%;
}

.ck-rounded-corners .ck.ck-editor__editable:not(.ck-editor__nested-editable), .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-rounded-corners {
   min-height: 200px;
}

.widget-block  .frm-inner .frm-control label{
   font: 500 16px /1.2 var(--op-sans);
   min-width: 200px;
}

.widget-block .select2-container--default .select2-selection--single .select2-selection__rendered {
   font: 400 15px /35px var(--op-sans)!important;
   height: 35px!important;
}



.widget-block .select2-container .select2-selection--single {
   height: 35px!important;
}

.widget-block .select2-container--default .select2-selection--single .select2-selection__clear {
  height: 32.5px!important;
  background-color: #f3f3f3!important;

}

.widget-block .select2-container--default .select2-selection--single .select2-selection__arrow {
   height: 32.5px!important;
   background-color: #f3f3f3!important;
}

.widget-block .widget-block  .frm-inner{
   padding: 10px 5%;
}

.widget-block .frm-btns{
   padding: 20px 5%;
}



.widget-block .frm-btns input{
   display: inline-block!important;
   border: none; font: 400 15px/1 var(--op-sans);
   width: 130px!important;
   height: 30px;
}



.widget-block .frm-btns .btn-cancel{
   border: none; 
   width: 130px!important;
   height: 30px;
}

.inp-file{
   box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}



/* ------------------- fORM2 ----------------------- */

.frminne-con{
   background-color: #f9f9f9;
   padding-bottom: 1.5rem;
}

.frminne-con .input-section{
   padding: 15px;
   border-bottom: 1px solid #eeeeee;
   border-top: 1px solid #ffffff;
   position: relative;
}

.frminne-con .input-section:last-child{
   border: none!important;
}


.frminne-con .input-section::before{
    content: '';
    display: table;
    line-height: 0;
    content: "";
}

.frminne-con .input-section::after{
   content: '';
   display: table;
   line-height: 0;
   content: "";
}

.frminne-con .inp-title{
  min-width: 180px; max-width: 180px;
  text-align: right;
}

.frminne-con label{
   font-size: 14px;
   color: #000;
}


.frminne-con .input-section .inner-item{
   display: flex; align-items: center;
   justify-content: flex-start; gap: 25px;
   flex-wrap: wrap;
}

.frminne-con .gap-150{
  gap: 150px!important;
}

.frminne-con  .inp-style{
   padding: 5px 15px;
   border: 1px solid #b6b6b6;
   width: 50%;outline: none;
   transition: all .2s ease;
}

.frminne-con .inp-style:focus{
   border: 1px solid #e02020!important;
   box-shadow: rgba(216, 58, 58, 0.1) 0px 1px 2px 0px;
}

.frminne-con .inp-style:active{
   border: 1px solid #e02020!important;
   box-shadow: rgba(216, 58, 58, 0.1) 0px 1px 2px 0px;
}


#colorInput {
   padding-right: 40px;
   background-repeat: no-repeat;
   background-position: right center;
   background-size: 32px 100%;
 }

.frminne-con input[type="radio"]{
   transform: scale(1.1);
}

.frminne-con .mlt-inp-sec{
   display: flex; align-items: center;
   justify-content: flex-start;
   gap: 25px; flex-wrap: wrap;
   position: relative;
   padding: 15px 0px;
}

.frminne-con .mlt-inp-sec .error-abs{
  position: absolute; bottom: -10px;
  right: 0px; color: red;
  font-size: 14px;
}



 .frm-btn-container{
   display: flex; align-items: center;
   justify-content: space-around!important;
   padding: 30px;
}


.frm-btn-container .sc-btn{
   padding: 8px 30px;
   color: #fff;
   font-size: 16px;
}

.frminne-con .error p{
   font-size: 14px;
   color: red;
   text-align: center;
   margin-top: 12px;
}

/**************************** SELECT-BOX1 *******************************/

.adv-select-box .item-box .sl-input-container{
   border: 1px solid #aaa;
}

.adv-select-box .item-box .sl-input-container .slvalue{
  padding: 0px 10px;
  display: flex;align-items: center;
  justify-content: center;
  height: 100%;color:#797979;
}

.adv-select-box .item-box .sl-input-container i{
  background-color: #aaa;
  color: #797979; font-size: 14px;
  height: 100%;width: 20px;
  display: flex;align-items: center;
  justify-content: center;
}

.slvalue-box{
   position: absolute;
   left: 0px; top: 30px;
   max-height: 200px; overflow-y: scroll;
   border: 1px solid #aaa;
   border-top: 0px;
   background-color: #fff;
   width: 100%;
}

.slvalue-box input{
   padding: 1px;
   border: 1px solid #aaa;
   width: 100%;
   border-radius: 10px;
}

.slvalue-box span{
  display: block;
  padding: 6px 20px;
}


/* ------------------------ N ---- */

.icon-vrfy{
   width: 20PX;
}


.al-photo-approver .img-pop{
   position: absolute; top: -300px;
   left: 0px; display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .6);
}

.al-photo-approver .img-sec{
   overflow: hidden;
}

 .al-photo-approver .item-pcon:hover .img-pop{
   top: 0px;
   transition: all .4s linear;
}




 /* Popup Background */
 #image-popup {
   visibility: hidden;
   width: 0%; height: 0%;
   opacity: 0;
   /* background: rgba(0, 0, 0, 0.8); */
}

textarea {
   white-space: pre-line; /* Keeps line breaks but removes extra spaces */
   text-align: left; /* Aligns text properly */
}