/*! -----------------------------------------------------------------------------------

Template Name: Jaravel
Template URI: https://jasterweb.com
Description: This is Admin theme
Author: JTR
Author URI: https://instagram.com/jasterweb

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

:root {
--container:95%;
--color-main: #05333A;
--color-secondary: #E4A83B;
--color-accent: #fafafa;
--color-danger: #eb2f06;
--color-warning: #eab308;
--color-info:#4c75cf;
--color-success:#22c55e;
--width-nav:270px;


--font-title:Rubik;
--font-body:Inter;
}


h1,h2,h3,h4,h5,h6{font-weight: 600;font-family: var(--font-title)}
body {
    font-size: 14px;
    overflow-x: hidden;
    font-family: var(--font-body);
    color: #2F2F3B;
    background:#F8F8FC;
    margin:0;
}

ul {
    padding-left: 0px;
    list-style-type: none;
    margin-bottom: 0;
}

* {
    box-sizing: border-box;
}

* a {
    color: var(--color-main);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: var(--color-main);
}
a[class*=badge-]:hover {
    color: #fff;
}
.app{background-color: #f0f6f9;}
.container{max-width:var(--container);margin: 0 auto;}
.container.smallwrap{max-width: 650px;}
.container.medwrap{max-width: 1000px;}
.authpage{display:flex;align-items:center;justify-content:center;height:100vh}

.wrapauth{box-shadow: 0px 0px 50px -35px rgba(0, 0, 0, 0.4) !important; background: #fff; padding: 2rem; width: 100%; display: inline-block; position: relative; overflow: hidden;}
.text-center{text-align:center}
.text-right{text-align:right}
.text-left{text-align:left}
.text-justify{text-align:justify}

.m-t-15{margin-top:15px !important}.m-l-15{margin-left:15px !important}.m-r-15{margin-right:15px !important}.m-b-15{margin-bottom:15px !important}
.m-t-30{margin-top:30px !important}.m-l-30{margin-left:30px !important}.m-r-30{margin-right:30px !important}.m-b-30{margin-bottom:30px !important}
.m-t-40{margin-top:40px !important}.m-l-40{margin-left:40px !important}.m-r-40{margin-right:40px !important}.m-b-40{margin-bottom:40px !important}
.m-t-10{margin-top:10px !important}.m-l-10{margin-left:10px !important}.m-r-10{margin-right:10px !important}.m-b-10{margin-bottom:10px !important}
.m-t-7{margin-top:7px !important}.m-l-7{margin-left:7px !important}.m-r-7{margin-right:7px !important}.m-b-7{margin-bottom:7px !important}
.p-t-15{padding-top:15px !important}.p-l-15{padding-left:15px !important}.p-r-15{padding-right:15px !important}.p-b-15{padding-bottom:15px !important}
.p-t-10{padding-top:10px !important}.p-l-10{padding-left:10px !important}.p-r-10{padding-right:10px !important}.p-b-10{padding-bottom:10px !important}
.m-0{margin:0 !important}
.p-0{padding:0 !important}

.flex-between{display:flex;justify-content:space-between;align-items:center}
.wsmall{display:flex;flex-direction:column;align-items:center;max-width:450px;width:100%}
.formgroup{display:flex;flex-direction:column;margin-bottom:1.5rem}
.wrapauth h2{font-size:1.7rem;margin-bottom:2rem;text-transform:uppercase;margin-top:0}
.formgroup label{display: flex; font-weight: 600; margin-bottom: 10px; font-size: 16px; align-items: center; justify-content: space-between;}
.formgroup input{font-size: 16px;padding:1rem;border:1px solid rgba(1,1,1,0.22);border-radius:6px}
.formgroup input::placeholder{font-size:1rem;letter-spacing:.7px;color:rgba(1,1,1,0.50)}
.formgroup input:focus-within{border: 1px solid var(--color-secondary);}

.btx{font-family: var(--font-body);display:inline-flex;font-size:16px;font-weight:600;padding:14px 26px;position:relative;transition:all .3s ease;cursor:pointer;border-style:solid;border-width:1px;border-radius:7px;grid-gap: 7px;align-items: center;}
.btx svg{width: 20px;}
.btx-primary{background:var(--color-main);border-color:var(--color-main);color:#fff}
.btx-primary:hover{color: var(--color-main); background: transparent;}
.btx-secondary{background:var(--color-secondary);border-color:var(--color-secondary);color:var(--color-main)}
.btx-secondary:hover{color: var(--color-secondary); background: transparent;}
.btx-accent{background:var(--color-accent);border-color:var(--color-accent);color:#000}
.btx-accent:hover{color: var(--color-accent); background: transparent;}
.btx-danger{background:var(--color-danger);border-color:var(--color-danger);color:#fff}
.btx-danger:hover{color: var(--color-danger); background: transparent;}
.btx-warning{background:var(--color-warning);border-color:var(--color-warning);color:#fff}
.btx-warning:hover{color: var(--color-warning); background: transparent;}
.btx-info{background:var(--color-info);border-color:var(--color-info);color:#fff}
.btx-info:hover{color: var(--color-info); background: transparent;}
.btx-success{background:var(--color-success);border-color:var(--color-success);color:#fff}
.btx-success:hover{color: var(--color-success); background: transparent;}
.btx-light{background:#f1f5f9;border-color:#f1f5f9;color:#0f172a}
.btx-light:hover{color: #0f172a; background: transparent;}
.btx-dark{background:#0f172a;border-color:#0f172a;color:#fff}
.btx-dark:hover{color: #0f172a; background: transparent;}
.btx-processing:disabled{opacity:.65;cursor:not-allowed;pointer-events:none}

.badge{color:#fff;padding:5px 10px;border-radius:100px;font-size:12px}
.badge-primary {background:var(--color-main)}
.badge-semi { background: var(--color-info); }
.badge-group { background: var(--color-main); }
.badge-success { background: var(--color-success); }
.badge-danger { background: var(--color-danger); }
.badge-warning { background: var(--color-warning);color:var(--color-main) }
.badge-expired { background: var(--color-accent); }
.badge-info { background: var(--color-info); }

.btx-link{padding:0;border:0;color:var(--color-main)}
.btx-ic{padding: 7px 11px;}

.redalert{color: var(--color-danger); display: flex; align-items: center; gap: 7px;}
.redalert svg{width: 20px;}

.gap1{grid-gap:1rem}

.wrapper{display:flex;height: 100%;}

.logonav{padding: 0 25px;}
.sidebar{width:var(--width-nav);position:fixed;z-index:105;top:0;bottom:0;left:0;background:var(--color-main);transition: all .3s ease-in-out;}

.navmenu li.active > a,
.navmenu li > a.active,
.navmenu li.active a{border-left:4px solid var(--color-secondary);background:linear-gradient(90deg,#00add059 0%,#00add000 100%);background:linear-gradient(90deg,color-mix(in srgb,var(--color-secondary) 35%,transparent) 0%,transparent 100%);border-top-left-radius:0;border-bottom-left-radius:0;color:#fff;font-weight:600}
.navmenu{margin-top:1rem;max-height: 100vh;overflow-y: auto;scrollbar-width: none;}
.navcat{padding-left: 1rem; color: rgba(255, 255, 255, 0.64); margin-top: 2rem;}
.nav-title-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;width:100%;padding:1.2rem 25px;grid-gap:10px}
.chevron-icon{transition:transform .3s ease-in-out}
.nav-title.is-open .sub-menu-nav{opacity:1}
.nav-title.is-open .chevron-icon{transform:rotate(180deg)}
.sub-menu-nav{height:0;overflow:hidden;opacity:0;transition:height .3s ease-in-out,opacity .3s ease-in-out;margin:0;padding:7px 1.75rem 7px 3rem}
.navmenu li a{color:#ffffffd4;display:flex;align-items:center;grid-gap:10px;font-size:16px;padding:1.2rem 25px}
.navmenu li a svg{width:18px}
.nav-title-header span{color:#ffffffdb;display:flex;align-items:center;grid-gap:10px;font-size:16px;padding:0}
.nav-title-header svg{color:#fff;width:18px}
.sub-menu-nav li a{padding: 10px;color:#ffffffb8;border-radius: 7px;transition: all .15s cubic-bezier(.4, 0, .2, 1);}
.sub-menu-nav li{margin:0}
.sub-menu-nav li a:hover{background:#ffffff1c;}
.navmenu li a:hover{color:#fff}


.wrapnav{padding: 2rem 0}
.logonav img{background:#fff;padding:10px;width:100%;border-radius:10px}
.logonav a{display:flex}
.menu-label{position:relative}
.menu-label i{background:var(--color-secondary);color:var(--color-main);text-align:center;padding:5px;border-radius:100%;width:16px;height:16px;line-height:13px;font-style:normal;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.main{margin-left: var(--width-nav);width: 100%;transition: all .3s ease-in-out;}
.app-header{width: 100%; background: var(--color-main) !important; padding: 10px 0;}
.app-header .container{display: flex; align-items: center; justify-content: space-between;}
.app-header{width:100%;background:#fff;padding:10px 0}
.profile{display:flex;align-items:center;grid-gap:10px}
.profile img{width:40px;border-radius:6px;height:40px;object-fit:cover}
.profile span{font-size:16px}
.app-header h2{margin:0}

.main .wrap{min-height: calc(100vh - 70px - 50px); padding-top: 2rem;}

.footer{padding: 1rem 0;}


.row{display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-gap: 2rem;}
.col1{grid-column: span 1;}
.col2{grid-column: span 2;}
.col3{grid-column: span 3;}
.col4{grid-column: span 4;}
.col5{grid-column: span 5;}
.col6{grid-column: span 6;}
.col7{grid-column: span 7}
.col8{grid-column: span 8}
.col9{grid-column: span 9}
.col10{grid-column: span 10}
.col11{grid-column: span 11;}
.col12{grid-column: span 12;}

.flex-center{display: flex;align-items: center;}
.center{justify-content: center;display: flex;}

.card{background:#fff;position:relative;display:flex;flex-direction:column;border-radius:.25rem;border:1px solid #E1E8F0}
.card-header h3{margin:0}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom:1px solid #E1E8F0}
.card-body{padding:1rem}
.card-body p{margin:0;line-height: 24px;}
.card-body ol{margin:0;padding-left:1rem;display:flex;flex-direction:column;grid-gap:8px}

table{background: #fff;text-indent:0;border-color:inherit;border-collapse:collapse;width:100%}
.table th{padding-left:1.5rem;padding-right:1.5rem;padding-top:.75rem;padding-bottom:.75rem;text-align:start;font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase}
.table thead{background:#f8fafc}
.table tbody td{white-space:nowrap;padding:1rem 1.5rem;font-size:.875rem;line-height:1.25rem}
.table tbody tr{border-bottom:1px solid rgba(1,1,1,0.14)}
.table thead{border-bottom:1px solid rgba(1,1,1,0.14)}
.table tbody tr{transition: all .2s ease-in-out;}
.table tbody tr:last-child{border:0}
.table-strip tbody tr:nth-child(2n),.table-hover tbody tr:hover{background-color:rgba(0,0,0,0.04)}
table.dataTable{margin:1.5rem 0 !important}
.dataTables_length{display:flex;float:none!important}
table.dataTable.no-footer{border-bottom:1px solid rgba(0,0,0,0.12)}
#dtbasic th{border-bottom:1px solid rgba(1,1,1,0.24);padding:1rem}
table.dataTable td{padding:1rem!important}
.thead th{padding:1rem 1.5rem!important;background:#f7f7f8;font-size:14px}
.end{text-align: right !important;}
.duobtx{display:flex;justify-content:end;grid-gap:10px;align-items:center}

.btx-back{background:var(--color-warning);border-color:var(--color-warning)}
.btx-back:hover{background:var(--color-danger);border-color:var(--color-danger)}
.btx-back svg{stroke:#fff}

.top-title h2{margin-left:10px}

.sidebar.show{margin-left: -100%;}
.main.on{margin-left: 0;}
.toggle-menu svg{stroke: #fff;transition: all 0.3s ease;}
.toggle-menu:hover svg{stroke: var(--color-secondary);}

.page-title{display:flex;justify-content:space-between;margin-bottom:2rem;align-items:center}
.page-title h2{margin: 0;}
.page-action{display:flex;align-items:center;grid-gap:1rem}
.page-action .btx{padding: 10px 2rem;}


.paginate{margin:1.5rem 0;display:flex;justify-content:center}
.pagination{display:flex;grid-gap:10px}
.pagination li a,.pagination li span{color:#ffff;background:var(--color-main);display:inline-flex;padding:1.2rem 1.5rem;border-radius:5px;width:35px;height:35px;transition:all .2s ease-in-out;justify-content:center;align-items:center;font-size:17px}
.page-item.disabled span{background:#6e787e!important}
.page-item.active span{background:var(--color-secondary)}
.pagination li a:hover{background:var(--color-secondary)}

.form-group{margin-bottom:1rem;display:flex;flex-direction:column;grid-gap:10px}
.form-group input, .form-group textarea{font-size: 14px;font-family: var(--font-body);padding:16px 12px;border:1px solid #d5dde7;border-radius:6px;background:#fff;width: 100%;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}
.theme-form{padding:1.8rem;background:#fefeff;border-radius:10px;box-shadow:0 3px 5px #0000000b}
.form-group input::placeholder{letter-spacing:.4px;font-size:14px;color: rgba(1, 1, 1, 0.50);}
.form-icon{display:flex;align-items:center;background:#fff;border:1px solid #d5dde7;border-radius:6px}
.form-icon input{background:transparent;border:0;}
.form-icon span{border-right:1px solid #d5dde7;padding:8px 12px}
.form-group select{padding:16px 12px;border:1px solid #d5dde7;border-radius:6px;background:#fff}
.w100{width:100% !important;}
.btx.w100{width:100% !important;display:flex !important;justify-content:center !important;text-align:center !important;text-transform:uppercase;letter-spacing:1px;font-weight:700;}
.form-group input:disabled{background:rgba(0,0,0,0.05);border-color:rgba(1,1,1,0.13)}
.form-group input[type="file"]{background:#f4f8fe}
.form-group label{display:flex;align-items:center;justify-content:space-between}
.form-group label span{font-size: 13px;}
.form-radio{display:flex;width:100%;grid-gap:15px}
.form-radio label input{width:unset;margin:0 5px 0 0}
.form-check{display:inline-flex;align-items:center}
.form-check input{margin:0 7px 0 0}
.form-check-group{display:flex;grid-gap:1rem}


/* Inline Form */
.inline-form .form-wrap{display:flex;justify-content:space-between;grid-gap:1rem;background:#fff;padding:12px;border-radius:10px;border:1px solid #0101012b;box-shadow:#00000005 0 10px 50px}
.inline-form .form-group{margin:0;grid-gap:0;flex:1}
.inline-form .form-group input{background:transparent;border:0;font-size:18px}
.inline-form .form-group input::placeholder{font-size:18px;letter-spacing:0}
.inline-form .form-group input:focus{outline:0}


.wraptutorial{max-width:850px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-gap:2rem;margin:0 auto}
.listdoc{display:grid;grid-auto-flow:dense;grid-gap:10px;margin:0}
.listdoc li a{padding:15px 20px;display:inline-block;width:100%;background:var(--color-main);color:#fff;border-radius:4px;transition: all .3s ease-in-out;}
.listdoc li a:hover{background:var(--color-secondary)}
.docx{background:#fff;padding:1rem 1.3rem}
.docx p:first-child{margin:0}
.docx p{line-height:26px;font-size:15px}
.docx img{width:100%}



.user-down{display: none;}
#user-menu{display:flex;align-items:center;grid-gap:10px}
.header-username{color:#fff;transition: all 0.3s ease;}
.header-username:hover{color:var(--color-secondary)}
.user-down.show{display: block;}
.user-down{position:absolute;top:60px;right:0;background:#fff;width:10%;z-index:10;box-shadow:0 5px 20px -5px rgba(1,1,1,0.14);border-radius:0 0 0 10px}
.user-down ul{margin:0}
.user-down ul li a{padding:14px 1rem;color:#333;width:100%;display:flex;align-items:center;grid-gap:10px}
.user-down li a svg{width:18px}
.user-down li a:hover{color:var(--color-main)}

.error-zone span{padding:15px;display: flex;margin-bottom:2rem}
.error-zone .text-danger{background:rgb(255, 238, 234);color:var(--color-danger)}


.tour-card{display:flex;justify-content:space-between;flex-direction:column;margin:10px 0 0}
.tour-item{display:flex;align-items:center;justify-content:space-between;background:#f3f3f3;border-radius:10px;padding:12px 14px;margin-bottom:12px}
.tour-name{flex:1;margin-left:15px;font-weight:500}
.qty{width:40px;text-align:center;font-weight:600}
.btx-edit{width:30px;height:30px;border:none;border-radius:5px;background:var(--color-secondary);color:#222;display:flex;align-items:center;justify-content:center;padding:0}
.btx-edit svg{width:14px;height:14px;stroke:#222;stroke-width:2.5}
.btx-delete svg{width:16px;height:16px;stroke:#222}
.btx-delete{border:none;background:transparent}
.tour-item > div{display:flex;gap:8px}
.add-section{margin-top:35px;display:flex;gap:10px}
.add-section .form-control{background:#e9f9ff;border:1px solid #c6edf9;border-radius:8px;font-size:16px;width:100%}
.add-section .form-control::placeholder{font-size:18px;color:#7c929b}
.add-section .btx{padding:0 30px}
svg.feather{display:block}
.divider{width:100%;height:1px;background:#e5e5e5;margin:20px 0}
.contact-title{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.contact-title h4{margin:0;font-size:18px;font-weight:600}
.contact-title span{font-size:13px;color:#777}
.contact-item{display:flex;align-items:center;gap:15px;margin-bottom:18px;color:#555;font-size:16px}
.contact-item svg{width:22px;height:22px;stroke:#222;stroke-width:2}

.btx.btx-secondary.space-beetween {justify-content: space-between; }
.archive-btx-wrapper{display: flex;justify-content: center; margin-top: 40px;}
.home-btx-wrapper{display: flex;justify-content: center;}

.star-wrapper {display: flex !important; align-items: center; gap: 3px; white-space: nowrap;flex-direction: row !important;}
.star-wrapper small {margin-left: 5px;}

.gallery-count {display: inline-flex;align-items: center;gap: 4px;}
.gallery-icon {width: 18px;height: auto;color: #555;}

.gal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #ededed; padding-bottom: 15px; }
.gal-header-title { margin: 0; color: #2F2F3B; font-size: 16px; font-weight: 500;}
.gal-header-sub { color: #5d5d5d; }
.gal-counter-badge { font-size: 14px; padding: 6px 12px; }
.gal-preview-grid { margin-bottom: 20px !important; }
.gal-card { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); position: relative; }
.gal-card-new { border: 1px solid #0284c7; box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15); }
.gal-badge-new { position: absolute; top: 8px; left: 8px; font-size: 10px; z-index: 2; }
.gal-img-wrap { position: relative; height: 160px; background: #f8fafc; }
.gal-img { width: 100%; height: 100%; object-fit: cover; }
.gal-remove-btn { position: absolute; top: 8px; right: 8px; border-radius: 50%; padding: 6px; border: none; cursor: pointer; }
.gal-caption-box { padding: 10px; }
.gal-caption-label { font-size: 12px; font-weight: 600; color: #2F2F3B; margin-bottom: 10px; display: block; }
.gal-caption-input { font-size: 12px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px; width: 100%; }
.gal-dropzone { display:flex; align-items: center; flex-direction:column; background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px; padding: 36px 20px; text-align: center; cursor: pointer; transition: all 0.2s ease; }
.gal-dropzone-icon { width: 48px; height: 48px; color: #0284c7; margin-bottom: 12px; }
.gal-dropzone-title { margin-bottom: 10px; font-weight: 600; color: #2F2F3B; font-size: 14px; }
.gal-dropzone-text { margin: 0; font-size: 12px; color: #5d5d5d; }


.split-form{display:grid;grid-auto-flow:column;grid-gap:1rem;grid-auto-columns:1fr}
#inquiryForm, #packageForm, #invoiceForm, .step-form{display:flex;flex-direction:column;gap:2.5rem}
.gap2{grid-gap:2rem}

.grand-total{max-width:19rem;margin:0 auto;width:100%;grid-gap:10px;display:flex;flex-direction:column}
.grand-total label{font-size:16px;font-weight:700;text-align:center}
.grand-total label i{color:#ff1a1a}
.grand-total input{padding:1rem;font-size:18px;width: 100%;}
.grand-total .form-icon span{font-size:18px}

.flex-column{display:flex;flex-direction:column}
.card-wrap{background:#fff;padding:1.5rem;border-radius:10px;border:1px solid #0101012b;box-shadow:#0000000f 0 2px 8px 0}
.section-step{display:grid;position: relative;align-items: start;grid-template-columns:30% 65%;justify-content:space-between}
.step-command{position:sticky;top:10px;grid-gap:1rem;display:grid}
.label-xl{font-size:16px;font-weight:700;margin-bottom:7px;padding-left:10px;border-left:2px solid #010101}
.card-wrap-secondary{background:var(--color-secondary);border:1px solid #ffe1ab}
.step-command h2{margin:0}.step-command span{font-size:14px;color:#010101b0;line-height:24px}
.section-step .card-wrap .text-center{display:block;opacity:.7}
.card-wrap.card-wrap-secondary button{margin-bottom:1rem}

.section-admin-split{display:grid;grid-gap:2rem;grid-template-columns:60% 35%;align-items:start;justify-content:space-between}
#booking-details .flex-between h2{margin:0;font-weight:400}
#booking-details .flex-between h2 b{font-weight:600}
.detail-list{display:grid;grid-gap:1rem;margin:1rem 0}
.detail-list li{justify-content:space-between;display:flex;font-size: 16px;}
.detail-list li b{font-weight:600}
#booking-details .detail-list{padding-top:1.5rem;border-top:1px solid #01010126;margin-top:1.5rem}
.box{padding:1.5rem;display:grid;border-radius:1rem}
.box-primary{background:#DEFBFF}
.box h3{margin:0;font-size: 20px;}
.box ul{border:0!important;padding:0!important;grid-gap:0}
.box .detail-list li{border-bottom:2px dashed #0101011c;padding:1rem 0}
#booking-details .box{margin-top:2rem}
.box .detail-list li div :is(b,i,strong){padding:5px 8.4px;border-radius:100%;margin-right:5px;font-style:unset;font-weight:400;font-size: 14px;}
.box .detail-list li div b{background:var(--color-main);color:#fff}
.box .detail-list li div i{background:var(--color-secondary);color:var(--color-main)}
.box .detail-list li div strong{background:var(--color-danger);color:#fff}
.total-amount{display:flex;justify-content:end;grid-gap:7px;margin-top:1rem;padding-top:1rem;border-top:2px solid #010101;font-size:18px}
.total-amount span{font-size:16px}
#booking-details .detail-list li:last-child{border:0;padding-bottom:0}
#booking-details .badge{font-size:16px;padding:7px 1rem}
.side-wrap{display:grid;grid-gap:2rem}
.action-side{display:flex;flex-direction:column;align-items:center;text-align:center;grid-gap:1rem}
.action-side a{width:100%}
.action-side .btx-primary{justify-content:space-between}
.action-side .btx-primary svg{width:1.6rem;height:1.6rem}
.action-side .btx-primary-alt{background:#DEFBFF;border:1px solid #0000002b;font-size:16px;justify-content:center}
.timeline-widget{counter-reset:timeline-counter;position:relative}
.timeline-item{counter-increment:timeline-counter;position:relative;display:flex;align-items:flex-start;padding-bottom:2.5rem;opacity:.5}
.timeline-item:not(:last-child)::after{content:'';position:absolute;left:14px;top:40px;bottom:0;width:2px;border-left:2px dashed #cbd5e1}
.timeline-item::before{content:counter(timeline-counter);width:30px;height:30px;background-color:var(--color-secondary);color:var(--color-main);font-weight:600;font-size:14px;border-radius:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:15px;z-index:1}
.timeline-item .content{display:grid;grid-gap:10px}
.timeline-item .content h4{margin:0;font-weight:600}
.side-wrap-widget h2{margin:0}
.side-wrap-widget{display:grid;grid-gap:2.5rem}
.timeline-item.completed{opacity:1}

.form-group .row.g-2{display:flex;gap:12px;width:100%;margin:0}
.form-group .row.g-2 > .col-6{flex:1;display:flex;padding:0}
.form-group input.btn-check[name="payment_type"],.form-group input[type="radio"][name="payment_type"]
.btn-check{position:absolute;pointer-events:none;opacity:0;width:0!important;height:0!important;padding:0!important;margin:0!important;border:none!important}
.form-group input[name="payment_type"] + label.btn{display:flex;align-items:center;justify-content:center;width:100%;padding:14px 18px;font-size:14px;font-family:inherit;color:#4a5568;background-color:#f8fafc;border:1px solid #f1f1f1;border-radius:8px;cursor:pointer;transition:all .2s ease-in-out;text-align:center;user-select:none;box-sizing:border-box}
.form-group input[name="payment_type"] + label.btn::before{content:'';display:inline-block;width:18px;height:18px;margin-right:10px;border:2px solid #94a3b8;border-radius:50%;background-color:#fff;transition:all .2s ease-in-out;flex-shrink:0}
.form-group input[name="payment_type"] + label.btn:hover{background-color:#f1f5f9;border-color:#cbd5e1;color:#1e293b}
.form-group input[name="payment_type"]:checked + label.btn{background-color:#463d940f;border-color:var(--color-main);color:var(--color-main);font-weight:500}
.form-group input[name="payment_type"]:checked + label.btn::before{border-color:var(--color-main);background-color:var(--color-main);box-shadow:inset 0 0 0 3.5px #fff}
@media (max-width: 550px){.form-group .row.g-2{flex-direction:column;gap:8px}}

@media (min-width:768px){
    .split{display:flex;grid-gap:1rem}
.split .form-group{width:100%}
.close-menu{display: none;}
}
@media (max-width:768px){
    .section-step{grid-template-columns:1fr;grid-gap:2rem}
    .step-command h2{font-size:18px}
.step-command span{font-size:12px;line-height:19px}
.step-command{grid-gap:10px !important;}
.footer p{font-size:13px!important}
    .page-action .btx{padding: 6px 1.4rem;}.page-action{grid-gap:10px}
    .wraptutorial{grid-template-columns:unset;grid-gap:1rem}
    .wraptutorial .col3,.wraptutorial .col9{width:100%;grid-column:span 12}
    .footer p{text-align: center;line-height: 20px;}
    .container.smallwrap{padding: 0 15px;}
    .theme-form{padding: 1rem;}
    .sidebar{margin-left:-100%;width: 80%;}.main{margin-left:0}
    .mob6{grid-column:span 6}
    .mob12{grid-column:span 12}.row{grid-gap:10px;}
    .sidebar.show{overflow-y: auto;margin-left: 0;}
    .logonav{padding:0 20px;display:flex;align-items:center;justify-content:space-between}
    .close-menu svg{stroke:#fff;transition: all .3s ease;}
    .close-menu:hover svg{stroke: var(--color-secondary);}
    .mob1{grid-column: span 12;}
    .mob2{grid-column: span 6;}
    .mob3{grid-column: span 4;}
    .mob4{grid-column: span 3;}
    .user-down{right:0;width:42%}
    .table-full table{overflow-y:scroll;overflow-x:scroll;padding-bottom:7px;display:block}
    .table-full td{white-space:nowrap}
    .container.medwrap{padding:0 1.4rem}
    .main .wrap{padding-bottom:3rem}
    table.table{overflow-y:scroll;overflow-x:scroll;padding-bottom:7px;display:block}
}

@media (max-width:550px){
    .add-section .btx{padding: 0 20px;}
.step-command{position: relative;}
    .card-wrap{padding: 1rem;}
    .logonav img{width: 85%;}
.inline-form .form-wrap{flex-direction:column;align-items:center}
.inline-form .form-group input{border:1px solid #01010136}
.page-title{grid-gap:1rem;}
.page-action span{display:none}

}