/*===========================================================
   Project Name: Dragonmart Property Managment System
   Author: Mohammed Shiroz
   Project URL: https://dragonmart.qa/
   Author URL: https://dragonmart.com/

=================================================
  Table of Contents
=================================================

	1. Basic
		1.1 Scroll bar styles
	2. Helpers Classes
	3. Layouts
	4  Elements
		4.1 Background
		4.2 Nav
		4.3 Tabs
	5 Social Icons
	6 Extra
		6.1 Form
		6.2 Form Dark
		6.3 Form Border
		6.4 Form Border Light
		6.5 Vertical Multilple input group
		6.6 Other Specific
=======================================================*/

/*------------------------Color Scheme Settings ------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400..700&display=swap');

:root,
[data-ks-theme="light"] {

  --color-primary: #c0a76d;
  --color-primary-light: #b29f6e;
  --color-primary-lightest: #c5bc9a;
  --color-secondary: #968966;
  --login-cta-hover: #93804c;

  --ks-themebgcolor: #ffffff;
  --ks-themecolor: #c0a76d;
  --ks-themecolor-rgb: 13, 110, 253;
  --ks-themehovercolor: #93804c;
  --ks-themehovercolor-rgb: 1.7623, 87.23361, 213.2377;
  --ks-link-color: var(--ks-themecolor);
  --ks-link-color-rgb: var(--ks-themecolor-rgb);
  --ks-link-hover-color: var(--ks-themehovercolor);
  --ks-link-hover-color-rgb: var(--ks-themehovercolor-rgb);
  --ks-primary: var(--ks-themecolor);
  --ks-primary-rgb: var(--ks-themecolor-rgb);
  --ks-primary-text-emphasis: #052c65;
  --ks-primary-bg-subtle: #cfe2ff;
  --ks-primary-border-subtle: #9ec5fe;
  --ks-body-color: #000000;
  --ks-body-color-rgb: 76, 77, 77;
  --ks-body-bgcolor: #ffffff;
  --ks-heading-color: var(--ks-emphasis-color);
  --ks-body-font-family:  Open Sans, sans-serif;

}

[data-ks-theme="dark"] {
  color-scheme: dark;
  --ks-link-color: var(--ks-themecolor);
  --ks-link-color-rgb: var(--ks-themecolor-rgb);
  --ks-link-hover-color: var(--ks-themehovercolor);
  --ks-link-hover-color-rgb: var(--ks-themehovercolor-rgb);
  --ks-heading-color: var(--ks-emphasis-color);
  --ks-body-color: #dee2e6;
  --ks-body-color-rgb: 222, 226, 230;
}

/* =================================== */
/*  1. Basic Style 
/* =================================== */

html{
 height: 100%;
}

body {
    font-weight: 400;
    color: var(--ks-body-color);
    padding: 5rem;
    min-height: 100vh;
    background-color: var(--ks-body-bgcolor);
    font-family: var(--ks-body-font-family);
	height: 100vh;
    width:100%;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*box-sizing: inherit;*/
}

/*------------------------- 1.1 Scroll bar styles ----------------------------*/
/* width */
::-webkit-scrollbar { width: 8px; height: 8px; }
/* Track */
::-webkit-scrollbar-track { background: #f1f1f1; }
/* Handle */
::-webkit-scrollbar-thumb { background:#c1c1c1; }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #555; }


/*-------------------------1.2 application elements----------------------------*/
/*-------- Preloader --------*/
.tt_loading {
    position:absolute;left: calc(50% - 60px);top: calc(40% - 60px); width: 120px; height: 120px;
    z-index: 21;
    display: none;
}

.tt_loader {
    border: 16px solid #e8e8e8;
    border-radius: 50%;
    border-top: 16px solid #bd9e4d;
    border-bottom: 16px solid rgb(183, 163, 107);
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
@-webkit-keyframes spin{
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.overlay-bgimage{
 	position: absolute;
	top:0;
	left:0;
	width: 100%;
    height: 100%;
}

.overlay-bgprimary{
 	position: absolute;
	top:0;
	left:0;
	width: 100%;
    height: 100%;
	background: rgba(145, 120, 57, 0.8);
}


/*-------- Application body --------*/
.tt_body {
    position: absolute; left:0px; top:0px; width: 100%; height: 100%; overflow:hidden;
    /*pointer-events:none;*/
    opacity: 1; 
	background-color: var(--ks-themebgcolor);
}

/*-------- application pages --------*/
.tt_page{  position:absolute; display: block; left:0px; top:0px; width:100%; height:100%; overflow-y: auto; background-color:var(--ks-themebgcolor); z-index:1; animation-duration: 0.5s; }
.tt_page2{ position:absolute; display: block; left:0px; top:0px; width:100%; height:100%; overflow-y: scroll; background-color:var(--ks-themebgcolor);  z-index:1; animation-duration: 0.5s; }
.tt_page3{ position:absolute; left:32%; top:0px; width:68%; height:100%; background-color:var(--ks-themebgcolor); overflow-y:scroll; z-index:1; transition: 0.5s; }

/* Media print page setup */
@media print {
  body {
    margin: 0;
    padding: 0;
  }
  @page {
    margin: 30px;
  }
}

/* Paper size defination */
.mya4{ 
	width:890px; 
	height:1285px; 
	overflow:hidden; 
}

.mya4-1{ 
	width:890px; 
	height:1280px; 
	overflow:hidden; 
}

.crf_bdy{
    position:absolute;
	left:10px; 
	top:0px; 
	width:790px; 
	height:1150px;
}

.cus_txt input {
    border: 1px solid #dadada;
    border-radius: 3px;
}

input, textarea, select{
    border-radius: 3px;
    width:100%; height:100%;
    border: 1px solid #d5d5d5;
    outline: #bd9e4d;
    padding: 5px;
}

input:focus, textarea:focus, select:focus{
    outline: none;
    border: none;
    border: 1px solid #bd9e4d;
}

input[type="radio"] {
    width: 100%;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
}

/*input[type="checkbox"] {*/
/*    width: 22px;*/
/*    height: 22px;*/
/*    cursor: pointer;*/
/*}*/

.tt_font1 { font-family: Calibri; }
.tt_font2 { font-family: 'Open Sans', sans-serif; } 

.tt_fntsty1_reqular {
	font-family: 'Roboto', sans-serif;
}

.tt_fntsty1_bold{
	font-family: 'Open Sans', sans-serif;
}

.tt_fntarsty1 { font-family: 'Cairo', sans-serif; }

.tt_fntsty2 { font-family: "Poppins", sans-serif; }

.tt_fntarsty2 {
  font-family: "Noto Naskh Arabic", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


/* .tt_font2 { font-family: Arial, sans-serif; } */
/*----------*/
.required-star{ color: red;}

.txt_box1{
    width: 100%; height: 100%; text-decoration: none; padding: 3px; background: #f1f1f1;
    border-radius: 0; color: black; border: none; outline: none;
}

/*message and dialog box */
.msg-box{ position: absolute; width: 700px; height: auto; max-height: 300px; min-height: 260px50px; background-color: #FFFfFFFF; overflow: hidden; top: 50%; left: 50%; border-radius: 5px;  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transform: translate(-50%, -50%); z-index: 20; animation-name: popup; animation-duration: 0.5s; animation-timing-function: ease; border-bottom:10px solid #c0a76d; display:none; }
.show_msg_box{ position: absolute; width: 700px; height: auto; max-height: 300px; min-height: 260px50px; background-color: #FFFfFFFF; overflow: hidden; top: 50%; left: 50%; border-radius: 5px;  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transform: translate(-50%, -50%); z-index: 20; animation-name: popup; animation-duration: 0.5s; animation-timing-function: ease; border-bottom:10px solid #c0a76d; display:none; }
.msg_txt_ti { font-family: 'Open Sans', sans-serif; font-weight: 700; color: #313131; text-align: center; font-size: 26px; }
.msg_txt {  font-family: 'Open Sans', sans-serif; font-size: 17px; text-align: center; display: block; margin: 0 auto; width: 100%; height:auto; max-height:100px; max-width: 100%; padding: 15px; overflow: auto; }
.showmsgbtn { margin-top: 10px; display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; } 
.msg_btn { display: block; background: #EEEEEEFF; font-family: 'Open Sans', sans-serif; cursor: pointer; width:130px; height: 35px; border: 0px; transition: all .2s ease-in-out;  font-size: 14px; box-shadow: 0 6px 10px rgba(0,0,0,0.1); color: #424242; line-height: 38px; text-align: center; }
.msg_btn:hover{ transform: scale(1.1); }
.tpserch-btn { margin-left:5px; border-radius:3px; text-align:center; cursor:pointer; line-height: 38px; color:#b4b4b4; }
.tpserch-btn:hover{ background: #e3e3e3; }

@keyframes popup {
  from {
    transform: translate(-50%, -50%) scale(0); /* Initial scale of the popup */
  }
  to {
    transform: translate(-50%, -50%) scale(1); /* Final scale of the popup */
  }
}

.dlg_box {
    position: absolute;  top: 25%; left: 10%; width: 80%; height: 50%;box-shadow:  0px 0px 10px 1px #000000;
    background-color: #f0f0f0; border-radius: 3px;
    z-index: 20;
    display: none;
}
.dlg_txt {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 80%; height: 50%;font-family: Arial, Helvetica, sans-serif;
    margin: auto; text-align: center;
    font-size: 12px;
}
.msg_okbtn {
    position: absolute; top: 80%; width: 100%; height: 20%; text-align: center; font-weight: bolder;
    z-index: 2; font-size: 20px;
    color: #000000;
    text-decoration: underline;
}
.flyout_box {position:absolute; top: 25%; left: 30%; width: 40%; height: 100px; background-color: #f0f0f0; box-shadow:  0px 0px 2px 1px #545454; z-index: 20; display: none; resize: both; overflow: hidden; }
.flyout_txt {width:100%; height: 100%;}


.flyout_box_sug { position: absolute;  width: 40%; max-width: 300px; height: auto; max-height:300px; background: #ffffff; border-radius: 3px; box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.15); z-index: 20; display: none; overflow: auto; }
.flyout_box_sug ul {margin: auto; padding: 5px 3px; }
.flyout_box_sug ul li {
  list-style: none;
  border-radius: 3px;
  opacity: 1;
  display: block;
  padding: 4px 5px;
  transition: all .5s linear;
  cursor:pointer;
  font-size:11px;
  border-bottom:1px solid #f1f1f1;
  text-transform:capitalize;
}
.flyout_box_sug ul li:hover { background: #ececec }
.flyout_box_sug .nopotr:hover { background: #ffffff; }


/*general application panels */
/* .k_licons { position:absolute; left:0px; top:0px; width:50px; height:100%; background-color:#FFFFFF; overflow: hidden; z-index:1; display: none;  } */
/* .k_lpanelcbox { position:absolute; left:50px; top:0; width:15%; height:80px; background-color: #ffffff; overflow: hidden; z-index:1; display: none; } */
/* .k_lpanel { position:absolute; left:50px; top:80px; width:15%; height:calc(100% - 80px); background-color:#FFFFFF; overflow: hidden; z-index:1; display: none; } */
/* .k_stage { display: flex; flex-direction: column; position:relative; top:0px; width:calc(100% - 340px); height:100%; background-color:#b4b3a8; overflow: hidden; z-index:1; display: none; border-left: solid #ececec 1px; } */


/* stage panel */
.k_stage {
  position: relative;
  left:0;
  top:0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width:calc(100% - 340px);
  height: 100vh;
  padding:0;
  margin:0;
  background: #e5e5e5;
  transition: width 0.3s;
  z-index:-1;
}
.k_stage.collapsed{ width:calc(100% - 125px); transition: width 0.3s; }

/* Right Icon accessories panel */
.k_riconpnls { position:absolute; right:-350px; top:37px; width:23%; max-width: 400px; height:calc(100% - 37px); background-color: #9d9d9d; overflow: hidden; z-index:10; display: block;  box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.1); transition: right 0.3s ease-in-out; }
.k_riconpnls.open { right: 60px; }

/* Right Form popup panel */
.r-poplayout{ position:absolute; right:-850px; top:36px; width:650px; max-width: 650px; height:calc(100% - 36px); background-color: #9d9d9d; overflow: hidden; z-index:100; display: block;  box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.1); transition: right 0.3s ease-in-out; }
.r-poplayout.open { right: 60px; }

/* RIght filter popup panel */
.rfilter-popup-pnl { position:absolute; right:-850px; top:36px; width:450px; max-width: 450px; height:calc(100% - 36px); background-color: #f1f1f1; overflow: hidden; z-index:100; display: block;  transition: all 0.5s ease-out; box-shadow: -3px 3px 3px #d3d3d3; }
.rfilter-popup-pnl.open { right: 0px; }

/* Right view details panel */
.rview-popup-pnl{ position:absolute; right:-1200px; top:36px; width:950px; max-width: 950px; height:calc(100% - 36px); background-color: #9d9d9d; overflow: hidden; z-index:100; display: block;  box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.1); transition: right 0.3s ease-in-out; }
.rview-popup-pnl.open { right: 0px; }

/* .k_riconpnl { position:absolute; right:-350px; top:36px; width:23%; max-width: 400px; height:calc(100% - 36px); background-color: #9d9d9d; overflow: hidden; z-index:10; display: block;  transition: all 0.5s ease-out; } */
/* .k_rpopup { top:40px; width: 950px; max-width: 950px; height:calc(100% - 45px); background-color: #f1f1f1; overflow: hidden; z-index:100; display: block;  transition: all 0.5s ease-out; box-shadow: -3px 3px 3px #d3d3d3; } */
/* .k_rpopup2 { position:absolute; right:-650px; top:40px; width:650px; max-width: 150px; height:calc(100% - 45px); background-color: #f1f1f1; overflow: hidden; z-index:1; display: block;  transition: all 0.5s ease-out; box-shadow: -3px 3px 3px #d3d3d3; } */


.k_riconpnlel { position:absolute; right:0; top:0; width:100%; height:100%; overflow: hidden; background-color: #9d9d9d; z-index:1; display: block; }
/* .k_ricons { position:absolute; right:0px; top:0px; width:49px; height:100%; background-color:#FFFFFF; overflow: hidden; z-index:1; display: none; } */
.k_riconpnlel { position: absolute; right: 25px; }


/*data table elements*/
.tt_table { font-family: Arial, Helvetica, sans-serif; white-space: nowrap; }
.tt_hraw { position: -webkit-sticky; position: sticky; top: 0px; z-index: 2; border-bottom: 5px solid #969696;  }
.tt_hcell { height: 25px; line-height: 25px; font-size: 14px; background-color: #ffffff; padding:0px 0px; text-align: left;}
.tt_raw { height:44px; }
.tt_cell { height: 44px; line-height: 25px; font-size: 12px; background-color: #ffffff; color: #363636; padding:0px 3px;}

/*virtual table input text*/
.tt_input1 {width:85%; height:24px; border-radius:2px; border:solid #999 1px; padding:none;}


.scrl_nav{ position:absolute; bottom:0; width:50px; height:25px; display:block; }



.tt_lmenu {
    position: absolute; left: 0px; top: 0px; width: 22%; height: 100%;
}
.tt_stage {
    position: absolute; left: 22%; top: 0px; width: 60%; height: 100%;
}
.tt_rmenu {
    position: absolute; right: 0px; top: 0px; width: 18%; height: 100%;
}

/*header place holder*/
.hp_holder2 { position: absolute; width: 600px; height: 60px; line-height: 60px; text-align: center; overflow: hidden; background-color: #7396b7; }

/*icons*/
.k_icon {width: 46px; height: 46px; overflow: hidden; color: rgb(0, 0, 0); cursor: pointer; stroke: #bd9e4d;}
.k_icon2 {width: 36px; height: 36px; overflow: hidden; color: rgb(0, 0, 0); cursor: pointer; stroke: #bd9e4d; }
.k_iconwa {width: auto; height: 46px; overflow: hidden; color: white; cursor: pointer; stroke: white;}
.k_iconscrl {position: relative; width: auto; height: 20px; overflow: hidden; color: white; cursor: pointer; stroke: black; stroke-width:20;}
.k_stroke1 {stroke:#c0a76d;}
/*menu*/
/* fixed height */

/*.ttmnu_list { width: 100%; min-height: 46px; height: 46px; padding: 5px; text-align: left; border-bottom: solid #cacaca 1px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; cursor: pointer; }*/

.ttmnu_list {
    width: 100%; min-height: 35px; height: 35px; padding: 5px; text-align: left;
    border-bottom: solid #e5e5e5 1px;
    overflow-y: auto;
    font-family: Arial;
    font-size: 11px;
    line-height: 5px;
    font-weight: 520;
    cursor: pointer; overflow: hidden;
    background: #f8f8f8;
}

.ttmnu_list_sub{
    width: 100%; min-height: 35px; height: 35px; padding: 5px; text-align: left;
    overflow-y: auto;
    font-family: Arial;
    font-size: 11px;
    line-height: 5px;
    font-weight: 400;
    cursor: pointer; overflow: hidden;
    background: #f8f8f8;
}


.ttmnu_list1 { width: calc(100% - 70px); height: 100%; text-align: left; float: left;
    line-height: 25px;
}
.ttmnu_list2 { width: 50px; height: 50px; float: right;
    line-height: 50px; text-align: center; font-size: 24px;
}
.ttmnu_list3{
    width: 100%; height: 46px; padding: 5px; text-align: left; border-bottom: solid #cacaca 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 15px;
    cursor: pointer;
}
.ttmnu_list3_chl{
    width: 100%; height: auto;
}
/*check box*/
.tt_chk1 {cursor: pointer;  }


/*variable height menu*/
.ttmnu_listah { width: 100%; height:auto; padding: 15px; text-align: left; border-bottom: solid #cacaca 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 25px;
    cursor: pointer;
}
.tt_mlmnu1 { position: relative; left: 0px; top: 0px; width: 100%; height: 100%; }
.tt_mlmnu2 { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }


/*text elements*/
.tt_font1 { font-family: tt_font1; }

.tt_txt1 { font-family: tt_font1;	font-size: 18px; }
.tt_txt2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px;}
.tt_txt5 { font-size: 5px;}
.tt_txt10 { font-size: 10px;}
.tt_txt11 { font-family: Arial, Helvetica, sans-serif; font-size: 11px;}
.tt_txt12 { font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
.tt_txt13 { font-family:kar3; font-stretch:extra-expanded; font-size: 24px; }
.k_txtb { font-weight: bold; }

.tt_f8 { font-size: 8px; }
.tt_f10 { font-size: 10px; }
.tt_f11 { font-size: 11px; }
.tt_f12 { font-size: 12px; }
.tt_f13 { font-size: 13px; }
.tt_f14 { font-size: 14px; }
.tt_f16 { font-size: 16px; }
.tt_f18 { font-size: 18px; }
.tt_f20 { font-size: 20px; }
.tt_f22 { font-size: 22px; }
.tt_f28 { font-size: 28px; }
.tt_f35 { font-size: 35px; }
.k_txt10 { font-size: 10px; }
.k_txt24 { font-size: 24px; }
.k_txt25 { font-size: 25px; }

/*line height */
.k_lnh100p {line-height: 100%;}

.k_lnh50 {line-height: 50px;}
.k_lnh30 {line-height: 30px;}
.k_lnh32 {line-height: 32px;}
.k_lnh35 {line-height: 35px;}
.k_lnh55 {line-height: 55px;}
.k_lnh40 {line-height: 40px;}
.k_lnh60 {line-height: 60px;}
.k_lnh65 {line-height: 65px;}
.k_lnh8 {line-height: 8px;}
.k_lnh9 {line-height: 9px;}
.k_lnh10 {line-height: 10px;}
.k_lnh12 {line-height: 12px;}
.k_lnh14 {line-height: 14px;}
.k_lnh16 {line-height: 16px;}
.k_lnh18 {line-height: 18px;}
.k_lnh20 {line-height: 20px;}
.k_lnh22 {line-height: 22px;}
.k_lnh24 {line-height: 24px;}
.k_lnh25 {line-height: 25px;}
.k_lnh26 {line-height: 26px;}
.k_lnh28 {line-height: 28px;}

/*text alignments */
.k_tal {text-align: left;}
.k_tar {text-align: right;}
.k_tac {text-align: center;}
.k_taj {text-align: justify;}

/*text color */
.tt_fcprime { color: #bd9e4d;}
.k_txt_wh {color: white;}
.k_txt_gr {color: #868686;}
.k_txt_lgr { color: #ECECECFF;}
.k_txt_red { color: #860000FF;}

/*text tranformation */
.k_txtcap{ text-transform: capitalize;}
.k_txtuc{ text-transform: uppercase;}
.k_txtlc{ text-transform: lowercase;}
/*other page elements*/


/*----------*/

/*hover */
.k_hov1:hover {background-color: #f1f1f1; color: black; stroke: #000000;}
.k_hov2:hover {background-color: #f1f1f1; color: black; stroke: #000000;}
.k_hov3:hover {background-color: #bd9e4d; color: #ffffff; border-color: #bd9e4d; }

/*scroll bar style*/
.k_sbar { scrollbar-width: thin; }

/* --------------------- common properties ---------------------------*/
/*background colors */
.k_bg1 { background-color: #263d4f; } /*application identity color */
.k_bg2 { background-color: #f8f8f8; }
.k_bg3 { background-color: #666666; }
.k_bg4 { background-color: rgb(227, 228, 230); }
.k_bg5 { background-color: #c91212; }
.k_bg6 { background-color: #ffffff; } /* white color */
.k_bg7 { background-color: #f1f1f1; }
.k_bg8 { background-color: #d9d9c9; }
.k_bg9 { background-color: #c5c5c5; }
.k_bg10 { background-color: #c9c3b1; }
.k_bg11 { background-color: #ffffff; }
.k_bg12 { background-color: #a89978; }
.k_bg13 { background-color: #9d854a; }
.k_bg14 { background-color: #00549a; }

/*gradient bgs*/
.k_grad1 { background-image: linear-gradient(#a19b9b,#f1f1f1, #787879);}
.k_grad2 { background-image: linear-gradient(#a31703,#520c30 );}

.k_grad3 { background-image: linear-gradient(#8c7437, #bd9e4d);}
.k_grad3:hover { background-image: linear-gradient(#8f7e54, #d0a22f); }

/*foreground colors*/
.k_fcolor1 { color: #0a363e; }
.k_fcolor2 { color: #78755c; }
.k_fcolor3 { color: #000000; }
.k_fcolor4 { color: #ffffff; }
.k_fcolor5 { color: #727272; }
.k_fcolor6 { color: #b4b4b4; }
.k_fcolor7 { color: #dcdbdb; }
.k_fcolor8 { color: #6e6e6e; }


/*boarders*/
.k_brdr1 {border:solid #8c7437 1px;} /* Border primary */

.k_brdrrre {border:solid #c0a76d 1px;}
.k_brdrrre2 {border:solid #c7c7c7 1px;}
.k_brdr5 {border:solid #c0a76d 1px; }
.k_brdr6 {border:solid #c0a76d 1px; }
.k_brdr7 {border:solid #78755c 1px; }
.k_brdr8 {border:solid #626262 1px; }
.k_brdr9 {border:solid #999 1px; }
.k_brdr10 {border:solid #c7c7c7 1px; }
.k_brdr11 {border:solid #f1f1f1 1px; } /* Border white */
.k_brdr12 {border:solid #bd9e4d 2px; }
.k_brdrbtm {border-bottom: 1px solid #e1e1e1;}
.k_brdrbtm2 {border-bottom: 1px solid #f1f1f1;}
.k_brdrright {border-right:solid #6e571f 2px;}

.k_brdrr2 {border-radius: 2px;}
.k_brdrr3 {border-radius: 3px;}
.k_brdrr5 {border-radius: 5px;}
.k_brdrr7 {border-radius: 7px;}
.k_brdrr10 {border-radius:  10px;}
.k_brdrr100p {border-radius:  100%;}

.k_brltb{ border-left:solid #999 1px; border-top:solid #999 1px; border-bottom:solid #999 1px; }
.k_brtrb{ border-left:none; border-right:solid #999 1px; border-top:solid #999 1px; border-bottom:solid #999 1px; }

.k_brb_shadow{
	box-shadow: 0px 2px 0px rgba(229, 229, 229, 0.2);
}

.k_brdrr5 {border-radius:5px; }
.k_brdrr3 {border-radius:3px; }
.k_brdrr2 {border-radius:2px; }

.k_brdrt2{ border-top: 1px solid #cbcbcb; }

.k_brdrtlr5{ border-top-left-radius: 5px; }
.k_brdrtlr10{ border-top-left-radius: 10px; }
.k_brdrtrr5{ border-top-right-radius: 5px; }
.k_brdrtrr10{ border-top-right-radius: 10px; }


.k_brdrblr10{ border-bottom-left-radius: 10px; }
.k_brdrbrr10{ border-bottom-right-radius: 10px; }

.k_brdr_l1 {border-left:solid #999 1px;}
.k_brdr_r1 {border-right:solid #999 1px;}
.k_brdr_b1 {border-bottom:solid #999 1px;}

.k_brdr_l2 {border-left:solid #8c7437 1px;}
.k_brdr_r2 {border-right:solid #8c7437 1px;}
.k_brdr_b2 {border-bottom:solid #8c7437 1px;}



.k_brdr2 {border:solid #dfd91a 1px;}
.k_brdr3 {border-bottom: solid #00ff00 5px; }
.k_brdr5 {border:solid #ff0000 5px;}
.k_brdrr1 { border-right: solid #918d8d 1px;}
.k_brdrt1 { border-top: solid #eeeeee 1px;}

/*border radius*/
.kbr_1 {border-radius: 3px 3px 0px 0px;}

/*paddings*/
.k_pad20 { padding: 20px;}
.k_pad15 { padding: 15px;}
.k_pad10 { padding: 10px;}
.k_pad16 { padding: 16px;}
.k_pad14 { padding: 14px;}
.k_pad5 {padding: 5px;}
.k_pad6 {padding: 6px;}
.k_pad8 {padding: 8px;}
.k_pad3 {padding: 3px;}
.k_pad1 {padding: 1px;}
.k_pad2 {padding: 2px;}
.k_pad4 {padding: 4px;}
.k_pads14 { padding: 14px;}
.k_pad5_tlb {padding: 5px 5px 5px 0; }
.k_padm1 { padding: 8px 4px 0px 4px}

.k_padt1 {padding-top: 1px;}
.k_padt2 {padding-top: 2px;}
.k_padt3 {padding-top: 3px;}
.k_padt5 {padding-top: 5px;}
.k_padt9 {padding-top: 9px;}
.k_padt25 {padding-top: 25px;}
.k_padt30 {padding-top: 30px;}
.k_padt32 {padding-top: 32px;}

.k_padb5 {padding-bottom: 5px;}

.k_padr8 {padding-right: 8px;}
.k_padl1 {padding-left: 1px;}
.k_padl8 {padding-left: 8px;}

.k_padr4 {padding-right: 4px;}
.k_padr5 {padding-right: 5px;}
.k_padr30 {padding-right: 30px;}

.k_padl4 {padding-left: 4px;}
.k_padl5 {padding-left: 5px;}

.k_padl22 {padding-left: 22px;}
.k_padl10 {padding-left: 10px;}
.k_padl15 {padding-left: 15px;}
.k_padl30 {padding-left: 30px;}

.k_padr10 {padding-right: 10px;}
.k_padr15 {padding-right: 15px;}
.k_padr22 {padding-right: 22px;}
/*width and height*/

.w_auto {width: auto;}
.w100h100p {width: 100%; height: 100%;}
.w_100p { width: 100%;}
.w_90p { width: 90%;}
.w_96p {width: 96%;}
.w_85p { width: 85%;}
.w_82p { width: 82%;}
.w_80p { width: 80%;}
.w_75p {width: 75%;}
.w_70p {width: 70%;}
.w_67p { width: 67%;}
.w_65p { width: 65%;}
.w_60p { width: 60%;}
.w_55p { width: 55%;}
.w_52p { width: 52%;}
.w_50p { width: 50%;}

.w50p {width: 50%;} /*  Need check and update */

.w_47p { width: 47%;}
.w_45p { width: 45%;}

.w45p { width: 45%;} /*  Need check and update */

.w_40p { width: 40%;}
.w_44p { width: 44%;}
.w_36p { width: 36%;}
.w_35p { width: 35%;}
.w_34p { width: 34%;}
.w_33p { width: 33%;}
.w_33_3p { width: 33.3%;}
.w_31p { width: 31%;}
.w_30p { width: 30%;}
.w_28p { width: 28%;}
.w_25p { width: 25%;}

.w25p {width: 25%;} /*  Need check and update */

.w_23p { width: 23%;}
.w_20p { width: 20%;}
.w_15p { width: 15%;}
.w_10p { width: 10%;}
.w_5p {width: 5%;}
.w_310 { width: 310px;}
.w_160 {width: 160px;}
.w_130 {width: 130px;}
.w_100 {width: 100px;}
.w_85 {width: 85px;}
.w_65 {width: 65px;}
.w_55 {width: 55px;}
.w_50 {width: 50px;}
.w_32 {width: 32px;}
.w_30 {width: 30px;}
.w_22 {width: 22px;}
.w_10 {width: 10px;}
.w_mn160 {min-width: 160px;}
.h_50ph {height: 50vw;}
.h_40ph {height: 40vw;}
.w_75 {width: 75px;}
.w_100p150 { width: calc(100% - 150px); }
.w_100p110 { width: calc(100% - 110px); }
.w_100p75 { width: calc(100% - 75px); }
.w_60p50 { width: calc(60% - 160px); }
.w_100p160 { width: calc(100% - 160px); }
.w_41p2 { width: calc(41% - 2px); }
.w_28pa2 { width: calc(28% + 2px); }

.w_100p10 {width: calc(100% - 10px);}
.w_100p20 {width: calc(100% - 20px);}

.w_100p80 {width: calc(100% - 80px);}
.w_mn160 {min-width: 160px;}
.w_100p160 {width: calc(100% - 160px);}
.w_100p150 {width: calc(100% - 150px);}


.w_90 {width: 90px;}
.w_75 {width: 75px;}
.w_72 {width: 72px;}
.w_55 {width: 55px;}
.w_50 {width: 50px;}
.w_60 {width: 60px;}
.w_40 {width: 40px;}
.w_36 {width: 36px;}
.w_30 {width: 30px;}
.w_25 {width: 25px;}
.w_20 {width: 20px;}
.w_75p { width: 75%;}
.w_15p { width: 15%;}
.w_10p { width: 10%;}
.w_18p { width: 18%;}
.w_80p { width: 80%;}

.h_auto {height: auto;}
.h_100p { height: 100%; }
.h_93p {height: 93%;}
.h_80p {height: 80%;}
.h_70p {height: 70%;}
.h_60p {height: 60%;}
.h_55p { height: 55%;}
.h_50p { height: 50%;}
.h_45p { height: 45%;}
.h_40p { height: 40%;}
.h_30p { height: 30%;}
.h_100 { height: 100px;}
.h_80 { height: 80px;}
.h_75 { height: 75px;}
.h_68 {height: 68px;}
.h_60 {height: 60px;}
.h_50 {height: 50px;}
.h_46 {height: 46px;}
.h_45 {height: 45px;}
.h_43 {height: 43px;}
.h_40 {height: 40px;}
.h_35{height: 35px;}
.h_30 {height: 30px;}
.h_20 {height: 20px;}
.h_10 {height: 10px;}
.h_100p50 {height: calc(100% - 50px);}
.h_100p45 {height: calc(100% - 45px);}
.h_100p40 {height: calc(100% - 40px);}
.h_100p35 {height: calc(100% - 35px);}
.h_100p30 {height: calc(100% - 30px);}
.h_100p20 {height: calc(100% - 20px);}
.h_100p50 {height: calc(100% - 40px);}
.h_100p57 {height: calc(100% - 57px);}
.h_100p65 {height: calc(100% - 65px);}
.h_100p70 {height: calc(100% - 70px);}
.h_100p75 {height: calc(100% - 75px);}
.h_100p85 {height: calc(100% - 85px);}
.h_100p172 {height: calc(100% - 172px);  }
.h_100p160 {height: calc(100% - 160px);  }

.h_50ph {height: 50vw;}
.h_40ph {height: 40vw;}
.w_auto {width: auto;}
.w_100p150 { width: calc(100% - 150px); }
.w_100p75 { width: calc(100% - 75px); }
.w_41p2 { width: calc(41% - 2px); }
.w_28pa2 { width: calc(28% + 2px); }

.h_90p { height: 90%; }
.h_91p { height: 91%; }
.h_95p { height: 95%; }
.h_80p { height: 80%; }
.h_270 { height: 270px; }
.h_250 { height: 250px; }
.h_210 { height: 210px; }
.h_165 { height: 165px; }
.h_160 { height: 160px; }
.h_155 { height: 155px; }
.h_145 { height: 145px; }
.h_135 { height: 135px; }
.h_130 { height: 130px; }
.h_110 { height: 110px; }
.h_95 {height: 95px;}
.h_85 {height: 85px;}
.h_65 {height: 65px;}
.h_80 {height: 80px;}
.h_60 {height: 60px;}
.h_25 { height: 25px; }
.h_22 { height: 22px; }
.h_20 { height: 20px; }
.h_15 {height: 15px;}
.h_30 {height: 30px;}
.h_55 {height: 55px;}
.h_100 {height: 100px;}
.h_105 {height: 105px;}
.h_120 { height: 120px;}
.h_24 {height: 24px;}
.h_26 {height: 26px;}
.h_28 {height:28px;}
.h_32 {height:32px;}
.h_40 {height: 40px; }
.h_45 {height: 45px; }
.h_1 {height: 1px;}

/*alignments*/
.kp_r {position: relative;}
.kp_a {position: absolute;}
.k_fltl {float: left;}
.k_fltr {float: right;}
.txt_c { text-align: center;}
.kt_50 {top: 50px;}
.kt_50p {top: 50%;}
.kl_50p {left: 50%;}
.kl_30 {left: 30px;}
.kb_10 { bottom: 10px;}
.khv_c {left: 50%; top:50%; transform: translate(-50%, -50%);}
.kh_c {left: 50%; transform: translate(-50%);}

.k_right20 {right: 20px;}
.kp_t0 { top:0px; }

/*margins*/
.km_10 {margin: 10px;}
.km_16 {margin: 16px;}
.km_a {margin: auto;}
.km_2p {margin: 2%;}
.kmt_10 {margin-top: 10px;}

.k_ma {margin: auto;}
.k_ma2 { margin:2px;}
.k_ma4 { margin:4px;}

.k_mat1 { margin-top:1px;}
.k_mat2 { margin-top:2px;}
.k_mat3 { margin-top:3px;}
.k_mat4 { margin-top:4px;}
.k_mat5 { margin-top:5px;}
.k_mat10 { margin-top:10px;}
.k_mat18 { margin-top:18px;}
.k_mat20 { margin-top:20px;}
.k_mat22 { margin-top:22px;}
.k_mat25 { margin-top:25px;}
.k_mat30 { margin-top:30px;}
.k_mat35 { margin-top:35px;}
.k_mat40 { margin-top:40px;}
.k_mat50 { margin-top:50px;}
.k_mat83 { margin-top:83px;}
.k_mat100 { margin-top:100px;}
.k_mat125 { margin-top:125px;}

.k_mat-95 { margin-top:-95px;}

.k_mab2 {margin-bottom: 2px;}
.k_mab6 {margin-bottom: 6px;}

.k_mab10 {margin-bottom: 10px;}
.k_mab20 {margin-bottom: 20px;}

.k_mal5 { margin-left:5px; }
.k_mal15 { margin-left:15px; }
.k_mal25 { margin-left:25px; }

.k_mal33-5p { margin-left:33.5%; }

.k_mar5 { margin-right:5px; }
.k_mar20 { margin-right:20px; }
.k_mar25 { margin-right:25px; }

/*line height */
.kl_h20 {line-height: 20px;}
.kl_h25 {line-height: 25px;}
.kl_h30 {line-height: 30px;}
.kl_h35 {line-height: 35px;}
.kl_h40 {line-height: 40px;}
.kl_h46 {line-height: 46px;}


.k_vhc {top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.k_vc {  -ms-transform: translateY(-50%); transform: translateY(-50%);}
.k_hc {  -ms-transform: translateX(-50%); transform: translateX(-50%); }
.k_floatl {float: left;}
.k_floatr {float: right;}
/*top and left */
.k_btm20 {bottom: 20px;}
.k_lft50p {left: 50%;}

/*display*/
.tt_bk {display: block;}
.tt_bkh {display: none;}
.ovf_h {overflow:hidden;}
.k_dinbk { display: inline-block; }
.k_dcell {display: table-cell;}

.btn_pay {
    background-color: #c0a76d;
    border: none;
    color: white;
    padding: 10px 22px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.btn_submit {
    background-color: #c0a76d;
    border: none;
    color: white;
    padding: 10px 22px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    margin: auto;
    cursor: pointer;
}

.btn_pay:hover, .btn_submit:hover { background-color: #a8883e; }
.btn_reject { background-color: #9b0505; }

/*zindex */
.kz_10 {z-index: 10;}

/* Transitions & animations */
.k_trans1{transition:1s; }

/*text alignments */
.ta_c {text-align: center;}
.ta_l {text-align: left;}
.ta_r {text-align: right;}
.ta_nw {text-wrap:none;white-space: nowrap;}

.mv-hov-txt{ }

.mv-hov-txt:hover{
	cursor:pointer;
	color: #c0a76d;
	font-weight:bold;
}


/*display*/
.tt_dsb { display: block; }
.tt_dflex { display:flex; }

.tt_dsn { border:5px solid red; }
.tt_ofh { overflow:hidden;}
.tt_ofs { overflow: scroll;}
.tt_ofa { overflow: auto;}

.tt_dinlb {display: inline-block;}

/*zindex */
.kz_10 { z-index: 10; }

/*annimations */
@keyframes k_lslidein {
    from {
        left: -100%;
    }
    to {
        left: 0px;
    }
}
@keyframes k_lslideout {
    from {
        left: 0px;
    }
    to {
        left:-100%;
    }
}


@keyframes slide-left {
    from {
        left: 100%;
    }
    to {
        left: 0px;
    }
}

@keyframes slide-right {
    from {
        left: -100%;
    }
    to {
        left: 0px;
    }
}


/*.collapsible {*/
/*width: 100%; height: 46px; padding: 5px; text-align: left; border-bottom: solid #cacaca 1px;*/
/*    font-family: Arial, Helvetica, sans-serif;*/
/*    font-size: 12px;*/
/*    line-height: 15px;*/
/*    cursor: pointer;*/

/*}*/

/*.active, .collapsible:hover { */
/*}*/


/*.content {*/
/*  padding: 0 18px;*/
/*  max-height: 0;*/
/*  overflow: hidden;*/
/*  transition: max-height 0.2s ease-out;*/
/*  background-color: #f1f1f1;*/
/* width: 100%;*/
/*}*/

.k_par {
    content: '\002B';
    color: black;
    font-weight: bold;
    float: left;
    margin-left: 5px;
}

.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #555;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}




/** Temp comment -no use-/*
/* .content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
} */

.k_heading_text{
    font-family: Arial, Helvetica, sans-serif
}

.btn_sub{ background: #e1e1e1; }
.btn_sub:hover{ background: #dadada; }

.btn_can{  }
.btn_can:hover{ background: #dadada; }
/*.scroll {*/
/*    border: 0;*/
/*    border-collapse: collapse;*/
/*}*/




/*
table {
    table-layout: fixed;
    width: auto;
    overflow: auto;
}

table tr {
    border-bottom: 1px solid #e9e9e9;
}

table thead td,th {
    border-bottom: 1px solid #e1e1e1;
    text-align: left;
    padding: 10px;
    margin: 10px;
    font-size: 13px;
    text-transform: capitalize;
}

table thead tr td .dt_btitle{
    padding: 10px;
    font-weight: bold;
    background: #e8e8e8;
    border-radius: 10px;
}

table tbody tr td,
th {
    border-bottom: 1px solid #e1e1e1;
    padding: 13px;
    font-size: 14px;
    text-align: left;
    text-wrap: none;
}

table tbody tr:hover {
    background: #fcfcfc;
}

table thead tr td:hover .dt_btitle{
    background: #f1f1f1;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
}

table tr ul.actions {
    margin: 0;
}

table tr ul.actions li {
    display: inline;
    margin-right: 5px;
}

table thead tr th{
    border-bottom: red !important;
}

*/

/*tr:nth-child(even){ background-color: #949494 !important; }*/

/* Process category Form*/
.tt_frm_wizard {
    width: 100%;
    display: grid;
}

.tt_process {
    box-model: border-box;
    align-self: center;
    justify-self: center;
    padding: 30px 0;
}
.tt_process ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.tt_process ul li.tt_pst .tt_type {
    display: flex;
    align-items: center;
    color: #252525;
    font-size: 12px;
    cursor: pointer;
}
.tt_process ul li.tt_pst .tt_type:before {
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid #c0a76d;
    background: transparent;
}

.tt_process ul li.tt_pst.completed .tt_type:before {
    content: "✓";
    color: white;
    font-size: 0.8em;
    text-align: center;
    background: #c0a76d;
    line-height: 17px;
}

.tt_process ul li.tt_pst:not(:last-child):after {
    height: 22px;
    width: 2px;
    content: "";
    display: block;
    background-color: #c0c0c0;
    margin-left: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.tt_tlmt20{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 170px; }

/*Customs Checkbox css */
.cm_chkbox input[type=checkbox] { position: relative; border: 1px solid #938556; border-radius: 2px; background: none; cursor: pointer; line-height: 0; margin: 0 .6em 0 0; outline: 0; padding: 0 !important; vertical-align: text-top; height: 22px; width: 100%; -webkit-appearance: none; }
.cm_chkbox input[type=checkbox]:hover { opacity: 1; }
.cm_chkbox input[type=checkbox]:checked { background-color: #938556; opacity: 1; }
.cm_chkbox input[type=checkbox]:before { content: ''; position: absolute; right: 50%; top: 50%; width: 4px; height: 10px; border: solid #FFF; border-width: 0 2px 2px 0; margin: -1px -1px 0 -1px; transform: rotate(45deg) translate(-50%, -50%); z-index: 2; }

/*Custom Text Box*/
.pagination input{
    border-radius: 0;
    outline: none;
    border: none;
}

.pagination input:focus, input:active{
    outline: none;
    border: none;
    border-radius: 0;
}

.pagination input[type=number]::-webkit-inner-spin-button,
.pagination input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0; /* Optional: You can also adjust the margin to fit your design */
}


/* Custom Tooltips css */
.tooltip{
    position:relative;
    display:inline-block;
    border-bottom:1px dotted black;
    margin:100px;
}

.tooltip .text{
    position:absolute;
    width:120px;
    background-color:black;
    color:#fff;
    text-align:center;
    padding:5px 0;
    z-index:1;
    border-radius:6px;
    bottom:110%;
    left:50%;
    margin-left:-60px;
    opacity:0;
    transition:opacity 3s;
    visibility:hidden;
}

.tooltip .text::after{
    position:absolute;
    content:"";
    border-style:solid;
    border-width:5px;
    border-color: black transparent  transparent transparent;
    top:100%;
    left:50%;
    margin-left:-5px;
}

.tooltip:hover .text{
    visibility:visible;
    opacity:1;
}


/* Table Styles */
.cus_tbl table {
    /*table-layout: fixed;*/
    width: 100%;
}

.cus_tbl table thead tr:hover{
    background: transparent;
}

.cus_tbl table thead tr th{
    background: #f3f3f3;
    border-radius: 0;
    text-transform: capitalize;
    position: sticky;
top: 0; /* Small offset to avoid the scrollbar */
    z-index: 1; /* Keep it above content but below the scrollbar */
}

.cus_tbl table thead th {
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
}

.cus_tbl table thead tr th:hover{
    background: #e7e7e7;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
}


.cus_tbl tbody th, td {
    padding: 2px;
    text-align: left;
}


.cus_tbl tr:hover {
    background-color: #efefef;
}

.ta_ecl{
    width: auto; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis;
}

.cus_tbl tbody tr td:hover{
    background:#dedede;
    cursor: pointer;
    color: black;
}

.cus_tbl tr:nth-child(even){ background-color: #f6f6f6; }

.cus_tbl::-webkit-scrollbar-thumb {
  border-radius: 4px;
}

.cus_tbl::-webkit-scrollbar-thumb:hover {
  background-color: #93804c;
cursor: grabbing;
}

.cus_tbl::-webkit-scrollbar {
  width: 8px;
  background-color: #0c1e35;
  z-index: -1; /* Pushes th behind other elements */
  cursor: grab;
}


/*
 CSS for the main view tab
*/
.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6),
.tabset > input:nth-child(13):checked ~ .tab-panels > .tab-panel:nth-child(7),
.tabset > input:nth-child(15):checked ~ .tab-panels > .tab-panel:nth-child(8),
.tabset > input:nth-child(17):checked ~ .tab-panels > .tab-panel:nth-child(9),
.tabset > input:nth-child(19):checked ~ .tab-panels > .tab-panel:nth-child(10),
.tabset > input:nth-child(21):checked ~ .tab-panels > .tab-panel:nth-child(11),
.tabset > input:nth-child(23):checked ~ .tab-panels > .tab-panel:nth-child(12),
.tabset > input:nth-child(25):checked ~ .tab-panels > .tab-panel:nth-child(13),
.tabset > input:nth-child(27):checked ~ .tab-panels > .tab-panel:nth-child(14){
    display: block;
}

/*
 Styling
*/

.tabset > label {
    position: relative;
    display: inline-block;
    padding: 10px 10px 15px;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
}

.tabset > label::after {
    content: "";
    position: absolute;
    left: 11px;
    bottom: 10px;
    width: 13px;
    height: 1px;
    background: #e1e1e1;
}

input:focus-visible + label {
    outline: 2px solid #938556;
    border-radius: 3px;
}

.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
    color: #938556;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
    background: #938556;
}

.tabset > input:checked + label {
    border-color: #f3f3f3;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.tab-panel {
    border-top: 2px solid #f3f3f3;
}

/*.tabset {*/
/*    max-width: 65em;*/
/*}*/




/*Dashboard css*/
.all {
    display: block;
    grid-template-columns: 1fr ;
}

.content_main {
    width: 100%;
    background-color: #fff;
    padding: 1rem 1rem;
}

.greeting_msg {
    margin-bottom: 2rem;
    font-size: 18px;
}

.greeting_msg h4{
    text-transform: capitalize;
}

.gn_section {
    padding: 0.5rem 1rem;
    background-color: #fff;
    box-shadow: 0 0 .5rem rgba(0,0,0,.2);
    border-radius: .8rem;
}

.gn_section > h2{
    font-size: 16px;
    font-weight: 400;
    color: var(--color-primary);
}

.dash_items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 1rem;
}
.dash_items__section {
    position: relative;
	cursor:pointer;
}
.dash_items__section::after {
    content: '';
    height: 80%;
    width: 0.5rem;
    background-color: var(--color-primary-light);
    position: absolute;
    right: 0;
    top: 10%;
    border-radius: 1.2rem 0 0 1.2rem;
    box-shadow: inset .2rem .2rem .5rem rgba(0,0,0,.2);
}
.dash_items p {
    color: var(--color-primary);
    font-size: 18px;
    font-weight: bold;
}
.dash_items__section > h2 {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0;
    margin-top: 10px;
}

.report_view {
    padding: 1rem 2rem;
    background-color: #fff;
    box-shadow: 0 0 3rem rgba(0,0,0,.3);
    border-radius: .8rem;
}

.report_view > h2{
    font-size: 13px;
    font-weight: 400;
    color: var(--color-primary);
}



.dashintro{
    margin-bottom: 4rem;
    font-size: 1.4rem;
}

.report_body {
    display: grid;
    grid-template-columns: 6fr 2fr;
    grid-template-rows: auto auto auto;
    gap: 1rem;
}

.grid-area-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 2fr;
    gap: 1rem;
    height: 415px;
}

.grid-area-1-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;

    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.grid-area-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report_mode2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 2rem;
}

.report_mode2-area-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 1;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 2fr;
    gap: 4rem;
    height: 50px;

}

.report_mode2-area-1-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 1;

    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.report_mode2-area-1-2-3 {
    grid-column: 3 / 3;
    grid-row: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}


.last-week {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.occu_details {
    background-color: white;
    color: #252525;
}
.occu_details h2 {
    color: var(--color-primary);
}
.occu_details table {
    font-size: 1.6rem;
    width: 100%;
    text-align: left;
    margin: 8px 0;
}
.occu_details td {
    padding: 5px .2rem;
}

.leadsMonitor {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr auto;
}
.leadsMonitor h2 {
    grid-column: 1 / 4;
}
.leadsMonitor_number {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 10px 0;
}
.leadsMonitor_text {
    text-align: center;
    font-size: 14px;
    margin-bottom: 15px;
}

.tt_box_layout {
    display: flex;
    flex-direction: column;
}

.tt_box_layout h2{
    margin-bottom: 15px;
}

.ttbox_items {
    display: grid;
    grid-template-columns: auto 2rem;
    justify-content: space-between;
    margin: 1rem 0;
}


.ttbox_items .tttitle {
    color: var(--color-secondary);
    font-size: 14px;
    font-weight: 400;
}
.ttbox_items .ttvalue {
    font-size: 14px;
    text-align: right;
}



.activityarea {
    display: grid;
    grid-template-rows: auto repeat(1.4rem, 2rem);
    gap: .8rem;
    padding-bottom: 2rem;
}
.activityarea_bar {
    width: 100%;
    height: 15px;
    border-radius: .7rem;
    background-color: #D9D9D9;
    position: relative;
}
.activityarea_bar::after {
    content: '';
    position: absolute;
    height: 100%;
    border-radius: .7rem;
    background-color: var(--color-primary);
}
.activityarea_bar--1::after {width: 10%;}
.activityarea_bar--2::after {width: 70%;}
.activityarea_bar--3::after {width: 45%;}
.activityarea_text { font-size: 16px; margin-bottom: 10px; }

.last-week {
    display: flex;
    flex-direction: column;
}









/*tt_card*/
.tt_card50x100 {
	position: relative;
    width: 50%; height: 100%;
    float: left;
	overflow: hidden;
}

/*--------------------------------mobile and small screens-----------------------------*/
@media (orientation: portrait) and (max-width: 991.98px) {
  .tt_body{ height:100vh; overflow: hidden;}
  .loginpg{ display: flex; flex-direction: column;  height:100vh; }

  .tt_card50x100 {width: 100%; height: 50%;}
  .logfrm{ width: 65%; }
  .logfrm-el{ order:2; }
  .log-promo { order:1; }

  .log-promo .tt_f28{ font-size: 48px; }
  .log-promo .tt_f16{ font-size: 25px; }

  .log-promo .w_75p{ width: 85%; }
  .log-promo .w_55 { width: 130px; }
  .log-promo .w_160 { width: 360px; }
  .log-promo .h_160 { height: 360px; }

  .log-promo .k_padt32{ padding-top: 65px;  }
  .log-promo .k_mat10{ margin-top: 55px;  }
}

@media (max-width: 820px){
    .tt_card50x100 {width: 100%; height: 50%;}
    .tt_page2 { width: 100%;}
    .tt_page3 { width: 100%; left: 0px;}
}

@media (max-width: 575.98px) {
  .tt_card50x100 {width: 100%; height: 50%;}

}


@media (orientation: landscape) and (max-height: 600px) {
.tt_body{ width: 100%; height:100vh; overflow: hidden;} 
    .tt_card50x100 { width: 50%; height: 100%; }

.logfrm-el{ width: 50%; }
  .log-promo {width: 50%; }

}

.login-form-group {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.login-form-group label {
    font-size: 14px;
    font-weight: 500;
    color: #656565;
    margin-bottom: 10px;
}

.login-form-group input {
    padding: 10px 15px;
    box-sizing: border-box;
    border: 1px solid #c9c9c9;
    font-weight: 500;
    font-size: 14px;
    color: #484848;
    transition: linear 0.2s;
}

.login-form-group input:focus {
    outline: none;
    border: 1px solid var(--color-primary);
}

.login-form-group
input::-webkit-input-placeholder {
    color: #656565;
    font-weight: 300;
    font-size: 14px;
}

.login-form-group.single-row {
    flex-direction: row;
    justify-content: space-between;
    padding-top: 5px;
}


/* custom checkbox */
.login-form-group .custom-check input[type="checkbox"] {
    height: 23px;
    width: 23px;
    margin: 0;
    padding: 0;
    opacity: 1;
    appearance: none;
    border: 2px solid var(--color-primary);
    border-radius: 3px;
    background: var(--white);
    position: relative;
    margin-right: 10px;
    cursor: pointer;
}

.login-form-group .custom-check input[type="checkbox"]:checked {
    border: 2px solid var(--color-primary);
    background: var(--color-primary);
}

.login-form-group .custom-check input[type="checkbox"]:checked:before,
.login-form-group .custom-check input[type="checkbox"]:checked:after {
    content: "";
    position: absolute;
    height: 2px;
    background: white;
}

.login-form-group .custom-check
input[type="checkbox"]:checked:before {
    width: 8px;
    top: 11px;
    left: 2px;
    transform: rotate(44deg);
}

.login-form-group .custom-check
input[type="checkbox"]:checked:after {
    width: 14px;
    top: 8px;
    left: 5px;
    transform: rotate(-55deg);
}

.login-form-group .custom-check input[type="checkbox"]:focus {
    outline: none;
}

.login-form-group .custom-check {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form-group .custom-check label {
    margin: 0;
    color: black;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.login-form-group .link {
    color: #6e6e6e;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}

.custom-check .link:hover {
    text-decoration: underline;
}


.login-form-group .rounded-button {
    display: flex;
    width: 100%;
    text-decoration: none;
    border-radius: 5px;
    padding: 13px 20px;
    box-sizing: border-box;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    align-items: center;
    transition: linear 0.2s;
    cursor: pointer;
}

.login-form-group .rounded-button:hover {
    box-shadow: 0px 0px 4px 0px var(--grey);
}

.login-form-group .login-cta {
    color: white;
    text-decoration: none;
    border: 1px solid var(--color-primary);
    margin: 25px 0 35px;
    background: var(--color-primary);
}

.login-form-group .login-cta:hover {
    background: var(--login-cta-hover);
}

.loginpg-footer{
	position: absolute; 
	bottom:2px; 
	left: 50%; 
	transform: translate(-50%, -50%);
	width:100%;
	height: auto;
	font-size:14px;
	text-align:center;
	color: #b4b4b4;
}







.dev_errorbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 0px;
  background-color: #ffffff;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 999;
  overflow: hidden;
  opacity: 0.7;
  transition: transform 0.5s ease-in-out;
}

.dev_errorbox:hover{ opacity: 1; }
.dev_erbxhidden {
  transform: translateY(-100%);
}

.dev_btn_close {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 12px;
  height: 12px;
  opacity: 0.3;
}

.dev_btn_close:hover{
  opacity: 1;
}
.dev_btn_close:before, .dev_btn_close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 13px;
  width: 2px;
  background-color: #333;
}
.dev_btn_close:before {
  transform: rotate(45deg);
}
.dev_btn_close:after {
  transform: rotate(-45deg);
}

.dev_erbx_ct {
  width:100%;
  padding:10px;
  height:auto;
  overflow: auto; /* Enable vertical scrollbar when needed */
  max-height: 450px; /* Set maximum height */
  min-height: 50px; /* Set minimum height */
  border:1px solid #eee;
  border-left-width:5px;
  border-radius: 3px;
  border-top-left-radius: 0px;
  margin:0px auto;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  border-left-color: #d9534f; /* Left side border color */
  background-color: rgba(217, 83, 79, 0.1); /*Same color as the left border with reduced alpha to 0.1*/
}

.right-align-bold {
    list-style-position: inside; /* Ensure list markers are inside the list item */
    text-align: right; /* Align text to the right */
}

.right-align-bold li {
    font-weight: bold; /* Make text bold */
}

.ol-smoline li {
    margin-bottom: 10px; /* Adjust this value to set the space between list items */
}

.ol-smolinear li {
    margin-bottom: 15px; /* Adjust this value to set the space between list items */
}



/* Vertical Tab for access privilage 
 * ------------------------------------------------------------------------------------*/

.vertic_tab {
  color: #333;
  display: block;
  margin: auto;
  position: relative;
  width: 100%;

}

.vertic_tab input[name="sections"] {
  position: absolute;
    display: none;
}

.vertic_tab section {
  display: block;
}

.vertic_tab section label {
  cursor: pointer;
  display: block;
  font-size: 14px;
  padding: 10px 10px;
  position: relative;
  width: auto;
  max-width: 150px;
  z-index:100;
  background-color: #f1f1f1;
  border-bottom: 1px solid #ccc;
  transition: background-color 0.3s ease;
}

.vertic_tab section label:hover{
	background-color: #e9e9e9 !important;
	font-weight:bold;
}

.vertic_tab section .mn-contents {
  display: none;
  left: 150px;
  width: calc(100% - 150px);
  height:auto;
  overflow:auto;
  max-height:100%;
  padding: 10px;
  position: absolute;  
  top: 0;
  background: #ffffff;
  border-left:1px solid #ddd;
}

.vertic_tab input[name="sections"]:checked + label { 
  background: #eee;
  color: #d9ab36;
  font-weight:bold;
}

.vertic_tab  input[name="sections"]:checked ~ .mn-contents {
  display: block;
}



.tt_steps {
  position: relative;
  margin-bottom: 30px;
  counter-reset: step;
 
}

.tt_steps li {
  list-style-type: none;
  font-size: 12px;
  text-align: center;
  width: 25%;
  position: relative;
  float: left;
}
 
.tt_steps li:before {
  display: block;
  content: counter(step); 
  counter-increment: step; 
  width: 32px;
  height: 32px;
  background-color: #d9ab36;
  line-height: 32px;
  border-radius: 32px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 700;
  margin: 0 auto 8px auto;
}
 
.tt_steps li ~ li:after {
  content: '';
  width: 100%;
  height: 2px;
  background-color: red;
  position: absolute;
  left: -50%;
  top: 15px;
  z-index: -1; 
}
 
.tt_steps li.cactive:after {
  background-color: #019875;
}
 
/*将当前/完成步骤之后的数字及连接线变灰*/
.tt_steps li.cactive ~ li:before,
.tt_steps li.cactive ~ li:after {
  background-color: #777;
}


/* Menus list for access privilage 
 * ------------------------------------------------------------------------------------*/
.mn-mng-menu {
     list-style-type: none;
     padding: 0;
     margin: 0;
}
.mn-mng-menu li {
    margin: 5px 0;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative; /* Position relative for mark positioning */
}
.mn-mng-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0; /* Reset margins if necessary */
    padding: 0px 5px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    transition: background-color 0.3s;
}
.mn-mng-menu-item:hover {
    background-color: #e9e9e9;
}
.mn-mng-menu-item input[type="checkbox"] {
    margin: 0;
    margin-top:2px;;
    transform: scale(1.3);
    width:15px;
}
.mn-mng-menu-item label {
	font-size: 13px !important;
    padding: 5px !important;
    position: relative !important;
    margin: 0;
    width:70%;
    max-width: 70%;
    white-space: nowrap;
    background: transparent !important;
 	border-bottom: none !important;
 	transition: background-color 0.3s ease;
}
   
.mn-mng-submenu {
    list-style-type: none;
    padding-left: 10px; /* Indent submenus */
    overflow: hidden; /* Hide overflowing content */
    max-height: 0; /* Start with hidden content */
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out; /* Smooth transition */
    opacity: 0;
}
.mn-mng-submenu.show {
    max-height: 1500px; /* Adjust based on content size */
    opacity: 1;
}
.mn-mng-submenu li {
	width: 98%;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
}

.mn-mng-submenu li input[type="checkbox"] {
    margin: 0;
    margin-top:1px;;
    width:13px;
}
  
.mn-mng-submenu li label {
	display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px !important;
    padding: 3px 4px !important;
    position: relative !important;
    margin: 0;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    background: transparent !important;
 	border-bottom: none !important;
 	transition: background-color 0.3s ease;
}

.mn-mng-submenu li label span{
	margin-left:5px;
}

.mn-mng-submenu li label:hover  span{
     background: transparent !important;
}

.mn-mng-submenu li label:hover{
     background-color: #e9e9e9 !important;
}

.mn-mng-mark {
    position: absolute;
    right: 15px; /* Adjust based on your layout */
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #d9ab36;; /* Change color as needed */
    border-radius: 50%;
    transition: transform 0.5s ease; /* Animate sliding effect */
}

.mn-mng-submenu.show ~ .mark {
    transform: translateY(-50%) translateX(10px); /* Slide mark when submenu is visible */
}

.rbadge-circle{
	width: 30px;
    height: 30px;
    background-color: #c0a76d;
    color: white;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    right: 15px;
    top: 50%; 
    transform: translateY(-50%);
}

.rbadge-disabled{
	width: 100%;
    height: 100%;
    background: rgba(193,193,193,.5);
    color: white;
    border-radius: 5px;
    position: absolute;
    top: 0;
}

.tt_clr_blink {
  animation: ttclrblinks 1s infinite alternate;
}

@keyframes ttclrblinks {
  0% { color: #c0a76d !important; }
  100% { color: red !important; }
}