/* ============================================================
   GLOBAL RESET & BASE STYLES
   ============================================================ */
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}

body {
    margin: 0;
    background-color: #0C9;
}

input, textarea, select, option {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 1em;
}

a {
    text-decoration: none;
}

div {
    font-family: Arial, Helvetica, sans-serif;
}

table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #ccb78f;
    font-size: 1rem;
}

/* ============================================================
   NAVIGATION & LAYOUT COMPONENTS
   ============================================================ */

/* Close Button */
.r_cbtn { 
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    display: none;
    z-index: 11;
}

/* Hamburger Menu */
.r_micon {
    position: absolute;
    top: 20px;
    left: 10px;
    display: none;
    z-index: 12;
    transition: 1s;
}
.r_miconl {
    background-color: #444444;
    width: 35px;
    height: 5px;
    margin: 6px;
}

/* Sticky Header */
.k_sticky0 {
    position: fixed; 
    top: 0;
    width: 100%;
    height: auto;
    transition: 1s;
    background-color: #f4f4f4;
    overflow: hidden;
    z-index: 10;
}
.k_sticky1 {
    position: sticky;
}

/* ============================================================
   CHAT & BOT COMPONENTS
   ============================================================ */
.k_bot0 { 
    z-index: 101; 
    position: fixed;
    bottom: 5px;
    right: 30px; 
    width: 25vw;
    aspect-ratio: 1/1.2; 
    background-color: #f1f1f1;
    box-shadow: 0 0 10px 1px #000;
    border-radius: 9px 9px 0 0;
    overflow: hidden;
    display: none;
}
.k_bot5 { 
    width: auto;
    max-width: 80%;
    padding: 10px;
    border-radius: 0 10px 10px 10px;
    white-space: pre-wrap;
    background-color: #f6eded;
    float: left; 
}
.k_bot6 { 
    width: auto;
    max-width: 80%;
    padding: 10px;
    border-radius: 10px 0 10px 10px;
    white-space: pre-wrap;
    background-color: #fdf9f1;
    float: right; 
}
.k_chatline {
    width: 100%;
    padding: 5px;
    float: left;
}
.k_userbot {
    width: auto;
    max-width: 80%;
    padding: 10px;
    border-radius: 10px 0 10px 10px;
    white-space: pre-wrap;
    background-color: #ffe0e0;
    float: right;
}
.k_sysbot { 
    display: inline-block; 
    width: auto;
    max-width: 80%;
    padding: 20px;
    border-radius: 0 10px 10px 10px;
    white-space: pre-wrap;
    background-color: #f1f1f1;  
}
.k_chat {
    width: 16vw;
    aspect-ratio: 1/1;
    position: fixed;
    bottom: 10px;
    right: 30px;
    padding: 0.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ============================================================
   LOADING & MESSAGE DIALOGS
   ============================================================ */

/* Loading Progress */
.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 #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid orange;
    border-bottom: 16px solid #000;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Message Box */
.msg_box {
    position: absolute;
    top: 25%;
    left: 10%;
    width: 80%;
    height: 50%;
    box-shadow: 0 0 10px 1px #000;
    background-color: #f0f0f0;
    border-radius: 3px;
    z-index: 20;
    display: none;
}
.msg_txt {
    position: absolute;
    top: 40%;
    width: 100%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 20px;
    transform: translateY(-50%);
}
.msg_okbtn {
    position: absolute;
    top: 80%;
    width: 100%;
    height: 20%;
    text-align: center;
    font-weight: bolder;
    z-index: 2;
    font-size: 20px;
    color: #000;
    text-decoration: underline;
}

/* Dialog Box */
.dlg_box {
    position: absolute;
    top: 25%;
    left: 10%;
    width: 80%;
    height: 50%;
    box-shadow: 0 0 10px 1px #000;   
    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;
}

/* ============================================================
   CARDS & CONTAINERS
   ============================================================ */
.tt_card1 {
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(to bottom, white, white, white, #efefef); 
}
.tt_card2 {
    width: 100%;
    height: auto;
    float: left;
    overflow: hidden;
    background: linear-gradient(to bottom, white, white, white, #efefef);    
    padding: 10px;
}
.tt_card3 {
    width: 100%;
    height: auto;
    float: left;
    overflow: hidden;
    background-color: navy;
    padding: 10px;
    color: white;
}
.tt_card50x100 {
    width: 50%;
    height: 100%;
    float: left;
}
.tt_card300xa {
    width: 300px;
    height: auto;
}

/* ============================================================
   SLIDER & ANIMATIONS
   ============================================================ */
.k_slidercase {
    width: 100%;
    height: 100%;
    overflow: hidden; 
}
.k_slider {
    width: 300%;
    height: 100%;
    animation: slideAnimation 30s infinite;
}
.k_slide {
    width: 33.33%;
    height: 100%;
    float: left;
    transition: 0.5s;
    padding: 1vw 2vw;
}
@keyframes slideAnimation {
    0%, 20% { transform: translateX(0); }
    25%, 45% { transform: translateX(-33.33%); }
    50%, 70% { transform: translateX(-66.66%); }
    75%, 95% { transform: translateX(-33.33%); }
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.k_line {
    width: 100%;
    padding: 5px 20px;
}
.k_line50 {
    width: 100%;
    height: 50px;
    padding: 5px 20px;
    line-height: 40px;
}
.k_line80 {
    width: 100%;
    height: 80px;
    padding: 5px 20px;
    line-height: 40px;
}
.k_hidden {
    left: 100%;
}
.k_ph1 {
   width: 15%;
   height: 80%;
   float: left;  
}
.k_logo1 {
    width: 80%;
    height: auto;
    float: left;
    padding: 5px;
}
.k_dtm {
    display: none;
    width: 50%;
    height: 80%;
    float: left;
    padding: 5px;
}

/* ============================================================
   APPLICATION BODY & PAGES
   ============================================================ */

/* Application Body */
.tt_body {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 1;
    background-color: #f1f1f1;
}

/* General Page */
.tt_page {
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow-y: scroll;
    z-index: 2;    
    transition: 0.5s;
}
/* Page Elements */
.hp_holder {
    width: 100%;
    height: 80px;
    text-align: center;
    line-height: 60px;
    font-weight: bold;
}
.tt_pgh {
    width: 100%;
    height: auto;
}
.tt_imgw100xa {
    width: calc(100% - 1px);
    height: auto;  
}
.ttmnu_list {
    width: 100%;
    height: 75px;
    background-color: #fff;
    text-align: left;
    border-bottom: solid #cacaca 1px;
    font-size: 12px;
    line-height: 25px;
}
.tt_listah {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 15px;
    text-align: left;
    border-bottom: solid #cacaca 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 25px;
}

/* Miscellaneous Sizes */
.k_80xa {
    width: 80px;
    height: auto;
}
.k_120x50 {
    width: 120px;
    height: 50px;
}
.k_inlblock {
    display: inline-block;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

/* Font Families */
.k_font1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
}
.tt_font2, .tt_txt2, .tt_listah {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.tt_font3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

/* Font Sizes - Fixed */
.k_txt10, .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_txt1, .tt_f18 { font-size: 18px; }
.tt_f20 { font-size: 20px; }
.k_txt24 { font-size: 24px; }
.tt_f28 { font-size: 28px; }
.tt_f48 { font-size: 48px; }

/* Font Sizes - Responsive */
.k_f1vw { font-size: clamp(12px, 1vw, 14px); }
.k_f1p3vw { font-size: 1.3vw; }
.k_f1p4vw { font-size: 1.4vw; }
.k_f1p6vw { font-size: 1.6vw; }
.k_f1p8vw { font-size: clamp(18px, 1.8vw, 20px); }
.k_f2vw { font-size: clamp(18px, 2vw, 28px); }
.k_f75p { font-size: 75%; }

/* Font Weight */
.k_bold, .k_ftitle {
    font-weight: bold;
}
.k_ftitle {
    font-size: 1.4rem;
}

/* Line Height */
.k_lnh10p { line-height: 10%; }
.k_lnh18 { line-height: 18px; }
.k_lnh20 { line-height: 20px; }
.k_lnh24 { line-height: 24px; }
.k_lnh30 { line-height: 30px; }
.k_lnh44 { line-height: 44px; }
.k_lnh50 { line-height: 50px; }
.k_lnh100 { line-height: 100px; }
.k_lnh100p { line-height: 100%; }
.k_lnh200 { line-height: 200px; }
.k_lnh300 { line-height: 300px; }
.k_lnh1vw { line-height: 1vw; }
.k_lnh1p5vw { line-height: 1.5vw; }
.k_lnh2vw { line-height: 2vw; }
.k_lnh6mm { line-height: 6mm; }
.k_lnh8mm { line-height: 8mm; }

/* Text Alignment */
.txt_c, .k_tac { text-align: center; }
.k_tal { text-align: left; }
.k_tar { text-align: right; }
.k_taj { text-align: justify; }


/* ============================================================
   ICONS & BUTTONS
   ============================================================ */

/* Icons */
.k_icon1 {
    width: 2.4vw;
    aspect-ratio: 1/1;
    float: left;
    margin: 3px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.k_icon2 {
    width: 1.5vw;
    aspect-ratio: 1/1;
    float: right;
    padding: 5px;
    border-radius: 0.75vw;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.k_iconwa {
    width: auto;
    height: 46px;
    overflow: hidden;
    color: white;
    cursor: pointer;
    stroke: white;
}
.k_icon25p {
    width: 25%;
    aspect-ratio: 1/1; 
}
.k_icon50p {
    width: 50%;
    aspect-ratio: 1/1; 
}
.tt_icon50 {
    width: 50px;
    height: 50px;
    cursor: pointer;
}
.tt_icon70 {
    width: 70px;
    height: 70px;
    cursor: pointer;
}
.tt_canvas1 {
    width: 50%;
    height: auto;
    float: left;
}
.tt_img1 {
    width: 100%;
}

/* SVG Strokes & Fills */
.k_stroke1 { stroke: black; }
.k_stroke2 { stroke: orange; }
.k_svgfill1 { fill: #025852; }
.k_svgfill2 { fill: #ffffff; }

/* Inputs */
.k_in1 {
    height: 2vw;
    width: auto;
    margin: 0.5vw;
}

/* Buttons */
.k_btn1 {
    height: 2vw;
    line-height: 2vw;
    text-align: center;
    border-radius: 3px;
    background-color: #b99955;
    cursor: pointer;
    color: #fff;
}

/* Cursor */
.k_hand {
    cursor: pointer;
}

/* ============================================================
   TABS
   ============================================================ */
.k_tab0 {
    width: 10vw;
    height: 2.5vw;
    float: left;
    background-color: #fdfaf5;
    border-radius: 0 0.5vw 0 0;
    overflow: hidden;
    padding: 0.5vw;
    margin: 0.5vw 0.25vw;
    cursor: pointer;
}
.k_tab1 {
    width: 10vw;
    height: 2.5vw;
    float: left;
    background-color: #c6b9a0;
    border-radius: 0 0.5vw 0 0;
    overflow: hidden;
    padding: 0.5vw;
    margin: 0.5vw 0.25vw;
    cursor: pointer;
}

/* ============================================================
   COLORS
   ============================================================ */

/* Background Colors */
.k_bg1 { background-color: #fff5e6; }
.k_bg2 { background-color: #fffbf5; }
.k_bg3, .k_bg8 { background-color: #ffa500; }
.k_bg4 { background-color: #b99955; }
.k_bg5 { background-color: black; }
.k_bg6 { background-color: #ffe5cc; }
.k_bg7 { background-color: #444; }
.k_bg9 { background-color: #7d6938; }
.k_bg10 { background-color: #fef9f5; }
.k_bg11 { background-color: #ffb733; }
.k_bg12 { background-color: #f1f1f1; }
.k_bg13 { background-color: #4CAF50; }
.k_bg14 { background-color: #2196F3; }
.k_bg15 { background-color: #e8f0fe; }
.k_bg16 { background-color: #9fb3e7; }

/* Gradient Backgrounds */
.k_grad1 {
    background: linear-gradient(to bottom, orange, white, #7d6938, #000000);
}
.k_grad2, .k_grad3 {
    background: linear-gradient(to top, white, white, #616161);
}

/* Foreground Colors */
.k_fcolor1 { color: black; }
.k_fcolor2 { color: #ffffff; }
.k_fcolor3 { color: #fff5e6; }
.k_fcolor4 { color: #fff; }
.k_fcolor5 { color: #000000; }
.k_fcrre { color: #000000; }
.k_txtgray { color: #888; }

/* ============================================================
   BORDERS
   ============================================================ */

/* Border Styles */
.k_brdr1 { border: solid #ffa500 1px; }
.k_brdr2 { border: solid orange 1px; }
.k_brdr5 { border: solid #025852 1px; }

/* Border Sides */
.k_brdrb1 { border-bottom: solid #d3dddc 1px; }
.k_brdrb2 { border-bottom: solid orange 2px; }
.k_brdrb3 { border-bottom: solid #000 1px; }
.k_brdrbm1 { border-bottom: solid #f0f0e7 1px; }
.k_brdrt1 { border-top: solid #97bad4 1px; }
.k_brdrrt1 { border-right: solid #fff 1px; }
.k_brdrlt1 { border-left: solid #fff 1px; }
.k_brdrlt2 { border-left: solid #ffa500 1px; }
.k_brdrrt2 { border-right: solid #ffa500 1px; }

/* Border Radius - Fixed */
.k_brdrr2 { border-radius: 2px; }
.k_brdrr3 { border-radius: 3px; }
.k_brdrr5, .k_brdrr8 { border-radius: 5px; }
.k_brdrr7 { border-radius: 7px; }
.k_brdrr15 { border-radius: 15px; }
.k_brdrr25 { border-radius: 25px; }
.k_brdrr35 { border-radius: 35px; }
.k_brdrr50 { border-radius: 50px; }
.k_brdrr100 { border-radius: 100px; }

/* Border Radius - Responsive */
.k_brdrr0p75vw { border-radius: 0.75vw; }
.k_brdrr1vw { border-radius: 1vw; }
.k_brdrr20vw { border-radius: 20vw; }

/* Border Radius - Specific Corners */
.k_brdrrs1 { border-radius: 0 0 0.5vw 0; }
.k_brdrrs2 { border-radius: 0 0 0 0.5vw; }
.k_brdrrs3 { border-radius: 0 0.5vw 0 0; }
.k_brdrrs4 { border-radius: 0.5vw 0 0 0; }

/* ============================================================
   SPACING - PADDING
   ============================================================ */

/* Padding - Fixed (px) */
.k_pad1 { padding: 1px; }
.k_pad2 { padding: 2px; }
.k_pad3 { padding: 3px; }
.k_pad4 { padding: 4px; }
.k_pad5 { padding: 5px; }
.k_pad8 { padding: 8px; }
.k_pad10 { padding: 10px; }
.k_pad15 { padding: 15px; }
.k_pad16 { padding: 16px; }
.k_pad20 { padding: 20px; }
.k_pad40 { padding: 40px; }

/* Padding - Multi-value */
.k_pad40_20 { padding: 40px 2px; }
.k_pad5_20 { padding: 5px 20px; }
.k_pada4 { padding: 25mm 20mm 20mm 20mm; }
.k_pada4min { padding: 8mm 8mm 8mm 8mm; }
.k_padt1mm { padding-top: 1mm; }
.k_pad1mm { padding: 1mm; }

/* Padding - Responsive (vw) */
.k_pad0p3vw { padding: 0.3vw; }
.k_pad0p5vw, .k_pad05vw { padding: 0.5vw; }
.k_pad1vw { padding: 1vw; }
.k_pad1p2vw { padding: 1.2vw; }
.k_pad2vw { padding: 2vw; }
.k_pad2p5vw { padding: 2.5vw; }
.k_pad3vw { padding: 3vw; }
.k_pad4vw { padding: 4vw; }
.k_pad5vw { padding: 5vw; }
.k_pad5p10p { padding: 5vw 10vw; }
/* Padding - Percentage */
.k_pad1p { padding: 1%; }
.k_pad2p { padding: 2%; }
.k_pad3p { padding: 3%; }
.k_pad4p { padding: 4%; }
.k_pad5p { padding: 5%; }

/* Padding - Specific Sides */
.k_padt4p { padding-top: 4%; }

/* ============================================================
   SPACING - MARGINS
   ============================================================ */
.k_ma { margin: auto; }
.k_ma1 { margin: 1px; }
.k_m3 { margin: 3px; }
.k_m5 { margin: 5px; }
.k_m10 { margin: 10px; }
.k_m0p2p { margin: 0 2%; }
.k_m5_10 { margin: 5px 10px; }
.k_m10_10_5_10 { margin: 15px 10px 5px 10px; }

/* Margin - Specific Sides */
.k_mal5 { margin-left: 5px; }
.k_mgnl10 { margin-left: 10px; }
.k_mt0p5vw { margin-top: 0.5vw; }
.k_mt1vw { margin-top: 1vw; }

/* ============================================================
   DIMENSIONS - WIDTH
   ============================================================ */

/* Width - Layout Parts */
.tt_2part { width: 100%; }
.tt_3part { width: 100%; }
.tt_4part { width: 50%; }

/* Width - Responsive (vw) */
.w_0p5vw { width: 0.5vw; }
.w_0p8vw { width: 0.8vw; }
.w_1vw { width: 1vw; }
.w_1p2vw { width: 1.2vw; }
.w_1p5vw { width: 1.5vw; }
.w_2vw { width: 2vw; }
.w_2p5vw { width: 2.5vw; }
.w_3vw { width: 3vw; }
.w_5vw { width: 5vw; }
.w_6vw { width: 6vw; }
.w_8vw { width: 8vw; }
.w_10vw { width: 10vw; }
.w_20vw { width: 20vw; }
.w_25vw { width: 25vw; }
.w_30vw { width: 30vw; }
.w_40vw { width: 40vw; }
.w_47vw { width: 47vw; }
.w_50vw { width: 45vw; }

/* Width - Percentage */
.w_100p { width: 100%; }
.w_99p { width: 99%; }
.w_90p { width: 90%; }
.w_85p { width: 85%; }
.w_80p { width: 80%; }
.w_71p { width: 71%; }
.w_70p { width: 70%; }
.w_66p { width: 66%; }
.w_65p { width: 65%; }
.w_60p { width: 60%; }
.w_50p, .w50p { width: 50%; }
.w_49p { width: 49%; }
.w45p { width: 45%; }
.w_40p { width: 40%; }
.w_39p { width: 39%; }
.w_35p { width: 35%; }
.w_34p { width: 34%; }
.w_33p { width: 33%; }
.w_30p5p { width: 30.5%; }
.w_30p { width: 30%; }
.w_25p, .w25p { width: 25%; }
.w_20p { width: 20%; }
.w_15p { width: 15%; }
.w_10p { width: 10%; }
.w_5p { width: 5%; }
.w_4p { width: 4%; }
.w_3p { width: 3%; }

/* Width - Fixed (px) */
.w_200 { width: 200px; }
.w_150 { width: 150px; }
.w_100 { width: 100px; }
.w_70 { width: 70px; }
.w_60 { width: 60px; }
.w_50 { width: 50px; }
.w_40 { width: 40px; }
.w_30 { width: 30px; }
.w_auto { width: auto; }

/* Width - Print (mm) */
.w_40mm { width: 40mm; }
.w_60mm {width: 60mm;}


/* Width - Calculated & Min/Max */
.w_100pm3p5vw { width: calc(100% - 3.5vw); }
.w_min100p { min-width: 100%; }

/* ============================================================
   DIMENSIONS - HEIGHT
   ============================================================ */

/* Height - Aspect Ratios */
.h_1t1 { aspect-ratio: 1/1; }
.h_1t2 { aspect-ratio: 1/2; }
.h_2t1 { aspect-ratio: 2/1; }
.h_3t1 { aspect-ratio: 3/1; }
.h_3t2 { aspect-ratio: 3/2; }
.h_4t1 { aspect-ratio: 4/1; }
.h_5t1 { aspect-ratio: 5/1; }
.h_6t1 { aspect-ratio: 6/1; }
.h_7t1 { aspect-ratio: 7/1; }
.h_8t1 { aspect-ratio: 8/1; }
.h_10t1 { aspect-ratio: 10/1; }
.h_20t1 { aspect-ratio: 20/1; }
.h_25t1 { aspect-ratio: 25/1; }

/* Height - Percentage */
.h_100p { height: 100%; }
.h_90p { height: 90%; }
.h_85p { height: 85%; }
.h_80p { height: 80%; }
.h_78p { height: 78%; }
.h_75p { height: 75%; }
.h_74p { height: 74%; }
.h_73p { height: 73%; }
.h_72p { height: 72%; }
.h_70p { height: 70%; }
.h_60p { height: 60%; }
.h_50p { height: 50%; }
.h_30p { height: 30%; }
.h_20p { height: 20%; }
.h_15p { height: 15%; }
.h_10p { height: 10%; }
.h_8p { height: 8%; }
.h_5p { height: 5%; }
.h_3p { height: 3%; }
.h_2p { height: 2%; }
.h_1p { height: 1%; }

/* Height - Fixed (px) */
.h_300 { height: 300px; }
.h_200 { height: 200px; }
.h_120 { height: 120px; }
.h_100 { height: 100px; }
.h_80 { height: 80px; }
.h_75 { height: 75px; }
.h_70 { height: 70px; }
.h_50 { height: 50px; }
.h_45 { height: 45px; }
.h_40 { height: 40px; }
.h_30 { height: 30px; }
.h_26 { height: 26px; }
.h_25 { height: 25px; }
.h_20 { height: 20px; }
.h_0 { height: 0px; }
.h_auto { height: auto; }

/* Height - Responsive (vw) */
.h_0p5vw { height: 0.5vw; }
.h_1vw { height: 1vw; }
.h_2vw { height: 2vw; }
.h_2p5vw { height: 2.5vw; }
.h_3vw { height: 3vw; }
.h_4vw { height: 4vw; }
.h_10vw { height: 10vw; }
.h_25vw { height: 25vw; }
.h_30vw { height: 30vw; }
.h_50ph { height: 50vw; }
.h_80ph { height: 80vw; }
.h_100ph { height: 100vw; }

/* Height - Print (mm) */
.h_297mm { height: 297mm; }
.h_277mm {height: 277mm;}
.h_170mm {height: 170mm;}
.h_160mm {height: 160mm;}
.h_140mm { height: 140mm; }
.h_50mm { height: 50mm; }
.h_40mm {height: 40mm;}
.h_30mm { height: 30mm; }
.h_20mm { height: 20mm; }
.h_10mm {height: 10mm;}
.h_5mm { height: 5mm; }
.h_6mm { height: 6mm; }
.h_7mm { height: 7mm; }
.h_8mm { height: 8mm; }

/* Height - Calculated & Min/Max */
.h_100pm3vw { height: calc(100% - 3vw); }
.h_100pl6vw { height: calc(100% - 6vw); }
.h_min2t1 { min-height: 0.5vw; }
.h_max1000 { max-height: 1000px; }

/* ============================================================
   POSITIONING
   ============================================================ */

/* Position Types */
.k_posa { position: absolute; }
.k_posr { position: relative; }
.k_posf { position: fixed; } /* legacy alias */
.k_posfx { position: fixed; }

/* Position Values */
.k_top0 { top: 0px; }
.t_15p { top: 15%; }
.k_left0 { left: 0px; }
.k_top80p { top: 80%; } /* legacy alias */
.k_top90p { top: 90%; } /* legacy alias */
.k_top50p { top: 50%; }
.k_lft50p { left: 50%; }
.k_btm20 { bottom: 20px; }
.k_btm40 { bottom: 40px; }
.k_btm50 { bottom: 50px; }

/* Transform Centering */
.k_vhc, .k_vhc2 { 
    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%); 
}

/* Float & Flexbox Alignment */
.k_floatl { float: left; }
.k_floatr { float: right; }
.k_justc { justify-content: center; }
.k_aic { align-items: center; }


/* ============================================================
   DISPLAY PROPERTIES
   ============================================================ */

/* Display Types */
.tt_bk { display: block; }
.k_dipflx { display: flex; }
.k_diptbc { display: table-cell; }
.k_dispbl { display: inline-block; }
.k_dispn { display: none; }

/* Overflow */
.k_ofa { overflow: auto; }
.ovf_h { overflow: hidden; }
.ovf_s { overflow: scroll; }
.ovf_v { overflow: visible; }
.k_scrolly { overflow-y: scroll; }
.ovf_dots { text-overflow: ellipsis; }

/* Hide Scrollbar */
.k_scrollnb {
    &::-webkit-scrollbar {
        display: none;
    }
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Whitespace & Fit */
.k_nowrap { white-space: nowrap; }
.k_prewrap { white-space: pre-wrap; }
.k_fit { object-fit: cover; }
.k_lofixed { table-layout: fixed; }
.k_wdbrk { word-break: break-all; }

/* ============================================================
   Z-INDEX
   ============================================================ */
.kz_1 { z-index: 1; }
.kz_2 { z-index: 2; }
.kz_3 { z-index: 3; }
.kz_4 { z-index: 4; }
.kz_10 { z-index: 10; }

/* ============================================================
   TABLES
   ============================================================ */
.k_th { 
    background-color: #ccb78f; 
    font-weight: bold; 
}
.k_tr0 { background-color: #f1f1f1; }
.k_tr1 { background-color: #ffffff; }
.k_td { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 0.85vw; 
    white-space: nowrap; 
    padding: 0.3vw; 
}

/* ============================================================
   HOVER EFFECTS
   ============================================================ */
.k_hov1:hover { stroke: #886c3c; }
.k_hov2:hover { background-color: #ede1c9; }
.k_hov3:hover { background-color: #fcf2da; }
.k_hov4:hover { background-color: #d4cbcb; }

/* ============================================================
   LIST STYLES
   ============================================================ */
.k_nodot {
    list-style-type: none;
}
.k_ulsq li::marker {
    list-style-type: circle;
    font-size: 30px;
}

/* ============================================================
   BOX EFFECTS
   ============================================================ */

/* Shadows */
.k_shadow1 {
    box-shadow: 0px 0px 10px 1px #000000;
}

/* Flyout/Suggestion Box */
.k_flyout1 {
    display: none;
    position: absolute;
    left: 220px;
    top: 220px;
    width: auto;
    max-width: 25vw;
    max-height: 70vh;
    overflow: hidden;
    padding: 0.5vw;
    background-color: #ffffff;
    z-index: 202;
    box-shadow: 0px 0px 3px 1px #9f9f9f;
}

/* Transitions */
.k_smooth1 {
    transition: width 2s ease, height 2s ease;
}
.k_trans1 {
    transition: all 1s ease-in-out;
}
.k_trans2 {
    transition: all 2s ease-in-out;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
.a4p {
    width: 210mm;
    height: 297mm;
}

/*begining of template 1 css */
.bf_icon {
    width: 100%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    overflow: hidden;
}
.bf_canvas {
    width: 100%;
    height: auto;
    float: left;
    border-bottom: solid #c1c1c1 1px;
    padding: 5px;
}
.bf_rack {
    width: 100%;
    height: auto;
    float: left;
}
.bf_title {
    width: 100%;
    aspect-ratio: 8 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-size: clamp(12px, 2.6vw, 20px);
    font-weight: bold;
    padding: 30px 10px;
}
.bf_txtbx1 {
    width: 90%;
    aspect-ratio: 15 / 1;
    display: flex;
    align-items: center;
    border: solid gray 1px;
    margin: 10px;
}
.bf_btn1 {
    width: 30%;
    aspect-ratio: 4 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    border: solid gray 1px;
    border-radius: 3px;
    background-color: #000c1e;
    margin: 10px;
    text-align: center;
    cursor: pointer;
    color: #ffa500;
}
.vc_0 {
    width: 100%;
    height: auto;
    background-color: #dfdfdd;
}
.vc_0a {
    width: 100%;
    aspect-ratio: 2 / 1;
    float: left;
}
.vc_0a_0 {
    position: relative;
    width: 50%;
    aspect-ratio: 1 / 1;
    left: 25%;
    top: 50%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    border-radius: 7px;
}
.vc_0b {
    width: 100%;
    aspect-ratio: 1.6 / 1;
    padding-top: 30%;
    text-align: center;
    float: left;
    line-height: clamp(7vw, 40px, 60px);
    font-size: clamp(14px, 2vw, 14px);
    font-weight: bold;
}
.vc_0b_0 {
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 5%;
    overflow: hidden;
}
.vc_0b_0a {
    width: 30%;
    aspect-ratio: 1 / 1;
    float: left;
    overflow: hidden;
    border-radius: 50%;
}
.vc_0d_0a0 {
    width: 100%;
    height: auto;
}
.vc_0b_0b {
    width: 70%;
    float: left;
    overflow: hidden;
    padding: 2%;
}
.vc_0b_0b_0 {
    width: 100%;
    text-align: left;
    line-height: 10vw;
    font-size: 10vw;
    float: left;
}
.vc_0b_0b_1 {
    width: 100%;
    text-align: left;
    line-height: 4vw;
    padding: 1%;
    font-size: 4vw;
    float: left;
    color: #000c1e;
}
.vc_0b_0c {
    width: 100%;
    float: left;
    line-height: 20vw;
    text-align: center;
    overflow: hidden;
    font-size: 8vw;
    text-decoration: underline;
}
.vc_3 {
    width: 100%;
    height: auto;
    float: left;
    padding: 2vw;
    background-color: #fafafa;
}
.vc_3a {
    width: 50%;
    aspect-ratio: 1 / 1;
    overflow-y: visible;
    float: left;
}
.vc_3a_0 {
    position: relative;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 5%;
}
.vc_3a_1 {
    float: left;
    width: 100%;
    height: 30%;
    text-align: center;
    padding: 5%;
    font-size: clamp(12px, 3.6vw, 14px);
}
.r1_c1, .r1_c2, .r2_c1, .r2_c2 {
    border-bottom: solid #c1c1c1 1px;
}
.r1_c1, .r2_c1, .r3_c1 {
    border-right: solid #c1c1c1 1px;
}
.som {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    float: left;
    padding: 4vw;
    border-bottom: solid #c1c1c1 1px;
}
.som_1 {
    width: 16%;
    aspect-ratio: 1 / 1;
    padding: 2%;
}
.bpf {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 2vw;
    float: left;
    border-bottom: solid #c1c1c1 1px;
    font-size: clamp(12px, 2.6vw, 20px);
}
.ph {
    width: 100%;
    height: 120px;
    float: left;
}
/*end of template css*/


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Mobile Default (< 820px) */
.s_100t50p { width: 100%; }

/* Tablet (820px - 1200px) */
@media (min-width: 820px) and (max-width: 1200px) {
    .s_100t50p { width: 100%; }
}

/* Desktop (>= 1200px) */
@media (min-width: 1200px) {
    .s_100t50p { width: 50%; }
    #ttlogin { padding: 10vw; }
    #kboth { padding: 5vw; }
    
    /* Login form specific fixes */
    .tt_f20 { font-size: 18px; }
    .txt_c { padding: 8px 12px; }
    
    
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.k_txtgray {
    color: #888;
}

.k_link {
    color: #007bff;
    text-decoration: underline;
    margin-left: 1vw;
}

.k_link:hover {
    color: #0056b3;
}

/* ============================================================
   CRM SPECIFIC STYLES
   ============================================================ */

/* Search Input Box - Orange theme border */
.crm_input_box {
    border: 2px solid #ffa500;
    border-radius: 8px;
    transition: border-color 0.3s;
}

.crm_input_box:hover {
    border-color: #ff8c00;
}

.crm_input_box:focus-within {
    border-color: #ff8c00;
}

/* Spacing Utilities */
.k_mt5 { margin-top: 5px; }
.k_mt8 { margin-top: 8px; }
.k_mt10 { margin-top: 10px; }
.k_mt15 { margin-top: 15px; }
.k_mt20 { margin-top: 20px; }
.k_mt30 { margin-top: 30px; }
.k_mb5 { margin-bottom: 5px; }
.k_mb8 { margin-bottom: 8px; }
.k_mb10 { margin-bottom: 10px; }
.k_mb15 { margin-bottom: 15px; }
.k_mb20 { margin-bottom: 20px; }
.k_mb30 { margin-bottom: 30px; }


    
/* ============================================================
   CHART STYLES
   ============================================================ */

.k_color0 { fill: #ff6b6b; }
.k_color1 { fill: #ffd166; }
.k_color2 { fill: #06d6a0; }
.k_color3 { fill: #118ab2; }

.k_histo_value {
    font-size: inherit;        /* IMPORTANT */
    fill: currentColor;        /* inherits font color */
}

/* ============================================================
   DRAWER COMPONENT
   ============================================================ */
.k_drawer1 {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 0;
    background-color: #ffffff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
    transition: width 0.3s ease-in-out;
    display: none;
}

/* ============================================================
   EVENT REGISTRATION APP UTILITIES
   ============================================================ */

/* Flex column layout */
.k_flex_col   { display: flex; flex-direction: column; }
.k_flex1      { flex: 1; }
.k_mnh100p    { min-height: 100%; }
.k_mxw440     { max-width: 440px; }
.k_ovfya      { overflow-y: auto; }

/* Backgrounds */
.k_bgf8       { background: #F8F8F8; }
.k_bg_navy    { background: #2F3BA2; }

/* Colors */
.k_blue1      { color: #2F3BA2; }
.k_gray4      { color: #444; }
.k_gray5      { color: #555; }
.k_gray7      { color: #777; }
.k_orange     { color: orange; }
.k_dark111    { color: #111; }

/* Borders */
.k_brdrt_e0   { border-top:    1px solid #e0e0e0; }
.k_brdrt_ddd  { border-top:    1px solid #ddd; }
.k_brdrb_ddd  { border-bottom: 1px solid #ddd; }

/* Gap */
.k_gap4       { gap: 4px; }
.k_gap7       { gap: 7px; }
.k_gap18      { gap: 18px; }

/* Padding — bottom */
.k_pb4        { padding-bottom: 4px; }
.k_pb6        { padding-bottom: 6px; }
.k_pb8        { padding-bottom: 8px; }
.k_pb14       { padding-bottom: 14px; }
.k_pb16       { padding-bottom: 16px; }
.k_pb18       { padding-bottom: 18px; }

/* Padding — top */
.k_pt14       { padding-top: 14px; }
.k_pt18       { padding-top: 18px; }
.k_pt32       { padding-top: 32px; }

/* Padding — compound */
.k_p8_0       { padding: 8px 0; }
.k_p8_0_2     { padding: 8px 0 2px; }
.k_p12_0      { padding: 12px 0; }
.k_p12_014    { padding: 12px 0 14px; }
.k_p16_0      { padding: 16px 0; }
.k_p32_24_16  { padding: 32px 24px 16px; }

/* Margin — bottom */
.k_mb4        { margin-bottom: 4px; }
.k_mb10       { margin-bottom: 10px; }

/* Font sizes */
.tt_f15       { font-size: 15px; }
.tt_f24       { font-size: 24px; }
.tt_f64       { font-size: 64px; }

/* Misc */
.k_rsznone    { resize: none; }
.k_ltr1       { letter-spacing: 1px; }
.k_avatar72   { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto; }
.k_logoimgfit { max-height: 80px; max-width: 60%; object-fit: contain; }
.k_link_flx   { display: inline-flex; align-items: center; text-decoration: none; }
.k_radio      { width: 18px; height: 18px; }