*{padding: 0; margin:0; box-sizing: border-box;}
body{font-family: "Segoe UI", "Inter", Roboto, Arial, sans-serif; margin: 0; padding: 0; font-weight: 400; font-size: 13px; color: #333; padding-top: 70px;}
.container{max-width: 100%; padding: 0 20px; max-width: 100%;}

.table-row .inner .table-box.w-25 {width: calc(25% - 21px); }
.table-row .inner .table-box.w-50 {width: calc(50% - 15px); }
.table-row .inner .table-box.w-33 {width: calc(33.33% - 20px);}
.theme-btn {background: #095997; cursor: pointer; border: 1px solid #095997; border-radius: 6px; padding: 8px 22px; font-weight: 600; font-family: "Segoe UI", "Inter", Roboto, Arial, sans-serif; font-size: 13px; color: #fff; display: inline-block; }
select {-webkit-appearance: none; -moz-appearance: none; background-image: url('../images/down-arrow.svg');  background-size: 12px; background-repeat: no-repeat; background-position: 97%;}
select::-ms-expand {display: none; }
h1.page-title {font-size: 24px; font-weight: 600; color: #095997; }
button.mobile-menu{display: none;}
.hide-desktop{display: none;}

body:has(.admin-body) {padding-right: 260px; }
body:has(.admin-body) .main-header{max-width: calc(100% - 260px);}
body:has(.admin-body) .calc-sidebar {width: 260px; right: 0; }

* {scrollbar-width: thin; scrollbar-color: #7bbfd4 #edf8fb; }
*::-webkit-scrollbar {width: 10px; height: 10px; }
*::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #f4fbfd 0%, #eef9f2 100%);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #58acd8 0%, #7fcf7c 100%);
    border-radius: 999px;
    border: 2px solid #eef9f6;
}
*::-webkit-scrollbar-thumb:hover {background: linear-gradient(180deg, #3e99ca 0%, #66bf63 100%); }
*::-webkit-scrollbar-corner {background: #eef9f6; }

input.textfield {height: 32px; border: none; padding: 10px 9px; width: 180px; border-radius: 9px; background: #fff; box-shadow: 0 0 10px rgb(0 0 0 / 10%); font-size: 16px; margin-left: 2px; outline: none}

td.w-25 {width: 1rem; }

.btn-icon {display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; border: none; cursor: pointer; transition: all 0.2s ease; text-decoration: none; }
.btn-icon svg, .btn-icon i {width: 18px; height: 18px; font-size: 18px;}
.btn-delete {background-color: #fee2e2; color: #ef4444; }
.btn-delete:hover {background-color: #ef4444; color: white; }
.btn-edit {background-color: #dbeafe; color: #2563eb; }
.btn-edit:hover {background-color: #2563eb; color: white; }
.btn-view {background-color: #f3f4f6; color: #4b5563; }
.btn-view:hover {background-color: #4b5563; color: white; }
.btn-success {background-color: #dcfce7; color: #16a34a; }
.btn-success:hover {background-color: #16a34a; color: white; }

/*Header*/
.main-header {background-color: #F4F6F9; padding: 15px 0; min-height: 65px; box-shadow: 0px 1px 7px 0px rgb(105 105 105 / 38%); position: fixed; width: 100%; top:0; left: 0; z-index: 999;}
.main-header .inner {display: flex ; align-items: center; justify-content: space-between; }
.main-header .inner .right-box {display: flex ; align-items: center; column-gap: 25px; }
.main-header .inner .right-box .menu ul {display: flex ; column-gap: 20px; list-style: none; margin: 0; padding: 0; }
.main-header .inner .right-box .menu ul .sub-menu{display: none}
.main-header .inner .right-box .menu ul li{position: relative;}
.main-header .inner .right-box .menu ul li a {font-size: 14px; font-weight: 400; color: #333; text-decoration: none; }
.main-header .inner .right-box .menu ul li a:hover{color: #0b6cb9}
.main-header .inner .right-box .menu ul .arrow {width: 10px; height: 20px; display: inline-block; vertical-align: middle; margin-left: 5px; background-image: url(../images/down-arrow.svg); background-size: 10px 10px; background-repeat: no-repeat; background-position: center; cursor: pointer;}
.main-header .inner .right-box .user-menu {padding: 10px; background: #fff; border-radius: 60px; }
.main-header .inner .right-box .user-menu ul {list-style: none; margin: 0; padding: 0; }
.main-header .inner .right-box .user-menu ul li {position: relative; }
.main-header .inner .right-box .user-menu ul li a{display: flex; align-items: center; column-gap: 10px; font-size: 16px; font-weight: 600; color: #333; text-decoration: none;}
.main-header .inner .right-box .user-menu ul li a img {border-radius: 50%; background: #dddddd; padding: 5px; max-width: 26px; }
.main-header .inner .right-box .user-menu ul li .sub-menu{display: none}
.main-header .inner .right-box .user-menu ul li a .arrow {width: 10px; height: 10px; display: inline-block; vertical-align: middle; background-image: url(../images/down-arrow.svg); background-size: 100% 100%;}
.main-header .inner .right-box .menu ul li.has-submenu.open .sub-menu {z-index: 99; background: #f4f6f9; display: flex; flex-direction: column; position: absolute; top: 47px; right: 0; width: 200px; min-width: 180px; box-shadow: 0px 10px 10px rgb(0 0 0 / 15%); }
.main-header .inner .right-box .menu ul li.has-submenu.open .sub-menu a {width: 100%; display: inline-block; font-weight:400; font-size:14px; padding: 10px 15px; border-bottom: 1px solid #ccc; }
.main-header .inner .right-box .menu ul li.has-submenu.open .sub-menu li:last-child a{border: none} 
.main-header .inner .right-box .user-menu .sub-menu {width: 100% !important; box-shadow: 0px 5px 10px rgb(204 204 204 / 36%); }
.main-header .inner .right-box .user-menu.cal-menu {background: transparent; padding: 0; }
.main-header .inner .right-box .user-menu button {display: flex ; align-items: center; column-gap: 10px; border: none; font-size: 14px; font-weight: 600; color: #333; cursor: pointer; padding: 10px 15px; background: #fff; border-radius: 60px; }
.main-header .inner .right-box .menu ul li.mega-menu.col-3 .sub-menu {column-gap: 30px; width: 800px; left: 0; transform: translate(-48%, 0px); flex-direction: initial; flex-wrap: wrap; }
.main-header .inner .right-box .menu ul li.mega-menu.col-3 .sub-menu li{width: calc(33.33% - 23px);}
.main-header .inner .right-box .menu ul li.mega-menu.col-2 .sub-menu {column-gap: 30px; width: 500px; left: 0; transform: translate(-48%, 0px); flex-direction: initial; flex-wrap: wrap; }
.main-header .inner .right-box .menu ul li.mega-menu.col-2 .sub-menu li{width: calc(50% - 15px);}
.main-header .inner .right-box .menu ul li.mega-menu.col-3 .sub-menu li a, .main-header .inner .right-box .menu ul li.mega-menu.col-2 .sub-menu li a {border: none; position: relative;}

.dat-top-bar {background: #f9f9f9; padding: 30px 0 10px; }
.dat-top-bar .inner {display: flex ; align-items: center; justify-content: space-between; }
.dat-top-bar .inner label {font-weight: 600; margin-right: 3px; }
.dat-top-bar .inner input.textfield {height: 32px; border: none; padding: 10px 9px; width: 180px; border-radius: 9px; background: #fff; box-shadow: 0 0 10px rgb(0 0 0 / 10%); font-size: 16px; margin-left: 2px; outline: none}

.dat-top-bar .inner .total {background: #095997; color: #fff; padding: 10px 12px; border-radius: 8px; font-size: 16px; }

.dat-top-bar .inner .os-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 148px;
    min-height: 38px;
    padding: 6px 8px 6px 12px;
    background: #ffffff;
    border: 1px solid var(--pv-border);
    border-left: 4px solid var(--pv-accent);
    border-radius: 8px;
    box-shadow: var(--pv-shadow-soft);
    color: var(--pv-text);
}

.dat-top-bar .inner .os-summary-label {
    color: var(--pv-primary-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
}

.dat-top-bar .inner .os-summary-value {
    min-width: 72px;
    margin-left: auto;
    padding: 5px 10px;
    background: var(--pv-primary-soft);
    border: 1px solid var(--pv-blue-line);
    border-radius: 6px;
    color: var(--pv-primary-dark);
    font-size: 14px;
    font-weight: 800;
    text-align: right;
}

.dat-top-bar .inner .os-summary-value:empty::before {
    content: "0.00";
    color: var(--pv-muted);
}

.dat-top-bar .tab-menu {margin-top: 20px; }
.dat-top-bar .tab-menu ul {list-style: none; padding: 0; margin: 0; border: 1px solid #CED7E4; box-sizing: border-box; border-radius: 58px; margin-bottom: 0px; width: auto; display: inline-block; }
.dat-top-bar .tab-menu ul li{display: inline-block;}
.dat-top-bar .tab-menu ul li a{padding: 12px 15px; display: block; border-radius: 50px; text-decoration: none; font-weight: 500; font-size: 12px; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; color: #323E55;}
.dat-top-bar .tab-menu ul li a:hover, .dat-top-bar .tab-menu ul li.active a{background: #095997; color: #fff;}
input.theme-btn.search-btn {border-radius: 9px; margin-left: 5px; padding: 8px 15px; }

.table-row{padding: 10px 0 20px;}
.table-row .inner {display: flex ; column-gap: 30px; row-gap: 20px; flex-wrap: wrap; justify-content: space-between; margin-bottom:32px;}
.table-row .table-box {border-radius: 5px; box-shadow: 0 0 15px rgb(0 0 0 / 25%); border-bottom: 4px solid #095997; width: 100%; overflow: hidden;}
.table-row .table-box .heading-label {padding: 10px 20px; display: inline-block; width: 100%; background: #095997; color: #fff; font-weight: 600; font-size: 14px; position: relative;}
.table-row .table-box .info {padding: 15px; overflow:auto}
.table-row .table-box .info ul{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: 5px;}
.table-row .table-box .info ul li {display: flex; column-gap: 10px; align-items: center;}
.table-row .table-box .info ul li label{min-width: 160px; width: 160px; font-weight: 500}
.table-row .table-box .info ul li input, .table-row .table-box .info ul li select {width: 100%; height: 30px; border: 1px solid #ccc; border-radius: 5px; padding: 0 10px; color: #000; font-size: 13px; outline: none}
.table-row .table-box .info .button-box{text-align: right; margin-top: 20px;}
.table-row .table-box .info ul li.table-title label.input-title {width: 100%; }
.table-row .table-box .heading-label span.add-new img {width: 18px; }
.table-row .table-box .heading-label span.add-new {display: flex ; align-items: center; column-gap: 6px; cursor: pointer; position: absolute; right: 24px; top: 9px; }
.table-row .table-box .info .text{margin-bottom: 20px; color: #333}

.table-row .table-box table {border-collapse: collapse; border-radius: 5px 5px 0 0; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); width: 100%}
.table-row .table-box table thead tr {background-color: rgb(206 222 234); color: #ffffff; text-align: left; font-weight: bold; }
.table-row .table-box table th, .table-row .table-box table td {padding: 7px 10px; color: #333; text-align: left; font-size:13px;}
.table-row .table-box table tbody tr {border-bottom: 1px solid #dddddd; }
.table-row .table-box table tbody tr td:first-child{text-align: left; white-space: nowrap;}
.table-row .table-box table thead tr td:first-child{text-align: left;}
.table-row .table-box table tbody tr:nth-of-type(even) {background-color: #f3f3f3; }
.table-row .table-box table tbody tr:last-of-type {border-bottom: 2px solid transparent; }
.table-row .table-box table tbody tr.active-row {font-weight: bold; color: #009879; }
.table-row .inner .table-box-top-grid {width: 100%; display: flex; column-gap: 10px; }
.table-row .inner .table-box-top-grid .table-box{width:100%;}
.table-row .table-box table.sticky-head th, .table-row .table-box table.sticky-head td {font-size: 12px; border-right: 1px solid #ccc;}
.table-row .table-box table.sticky-head{overflow: auto;}
.table-row .table-box .sticky-header {max-height: 550px; overflow: auto; }
.table-row .table-box table.sticky-head thead tr {position: sticky; top: 0; z-index: 1; }
.table-row .table-box table tbody tr td input {height: 36px; border: none; padding: 10px 9px; border-radius: 9px; background: #fff; box-shadow: 0 0 10px rgb(0 0 0 / 10%); font-size: 16px; margin-left: 2px; outline: none; width: 100%; }
.table-row .table-box table tbody tr td input:last-child{margin-top: 10px;}
.table-row .table-box table.input-table tbody tr td:first-child{white-space: nowrap;}

.calc-sidebar {width: 300px; height: 100%; overflow: auto; padding: 40px 20px 20px; position: fixed; top: 0; right: -300px; background: #fff; z-index: 999; box-shadow: 0 0 10px rgb(0 0 0 / 15%); transition: all 400ms;}
.calc-sidebar.open{right: 0;}
.calc-sidebar .close-btn {position: absolute; right: 0px; cursor: pointer; width: 40px; height: 40px; background: #095997; border: none; color: #fff; font-size: 26px; display: flex ; align-items: center; justify-content: center; padding-bottom: 2px; top: 0px; }
.calc-sidebar .user-detail {display: flex ; column-gap: 40px; margin-bottom: 40px;}
.calc-sidebar .user-detail img {width: 50px; height: 50px; border-radius: 50px; object-fit: cover; object-position: center; }
.calc-sidebar .user-detail .detail {position: relative; display: flex ; flex-direction: column; justify-content: center; row-gap: 5px; }
.calc-sidebar .user-detail .detail .name {font-weight: 600; font-size: 18px; }
.calc-sidebar .user-detail .detail a {text-decoration: none; color: #095997; font-size: 15px; font-weight: 500; }
.calc-sidebar .user-detail .detail::before {content: ''; width: 1px; height: 100%; background: #ddd7d7; position: absolute; left: -20px; top: 0px; }
.calc-sidebar .calcultion{margin-bottom: 15px;}
.calc-sidebar .calcultion h2 {color: #095997; margin-bottom: 10px; }
.calc-sidebar .calcultion .os {position: relative; }
.calc-sidebar .calcultion .os .total {width: 100%; padding: 11px 0 10px 52px; border: 1px solid #ccc; height: 44px; border-radius: 8px; font-size: 18px; color: #333; font-weight: 600; }
.calc-sidebar .calcultion .os .img {position: absolute; left: 1px; width: 50px; height: 42px; display: flex ; align-items: center; justify-content: center; background: #F4F6F9; border-radius: 7px; top: 1px; }
.calc-sidebar .list {display: flex ; flex-wrap: wrap; column-gap: 15px; row-gap: 15px; }
.calc-sidebar .list .item {width: calc(50% - 8px); box-shadow: 0 0 10px rgb(0 0 0 / 15%); border-radius: 5px; overflow: hidden; }
.calc-sidebar .list .item h3 {width: 100%; background: #095997; color: #fff; padding: 7px 10px; font-weight: 500; font-size: 14px; }
.calc-sidebar .list .item p {padding: 7px 10px; color: #333; font-weight: 600; font-size: 14px; }

.dat-top-bar-main {display: flex; width: 100%; justify-content: space-between; background: #f9f9f9; }
.dropdown-box {display: flex; margin-right: 15px; align-items: center;}
.dropdown-box label{white-space: nowrap;}
select, .text-box {height: 32px; min-width: 150px; margin-left: 10px; max-width: 180px; border: none; padding: 8px 9px; width: 100%; border-radius: 9px; background-color: #fff; box-shadow: 0 0 10px rgb(0 0 0 / 10%); font-size: 12px !important; margin-left: 2px; outline: none; background-position: 92%; font-family: 'Inter' !important; }
.dat-top-bar .inner .date {display: flex; column-gap: 6px; align-items: center; }

.popup-box {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0 0 0 / 50%); z-index: 99; display: none}
.popup-box .popup-inner {position: absolute; width: 100%; max-width: 600px; top: 50%; left: 50%; background: #fff; transform: translate(-50%, -50%); border-radius: 10px}
.popup-box .popup-inner .close {position: absolute; right: -17px; width: 36px; height: 36px; border-radius: 50%; background: #095997; border: none; color: #fff; font-size: 20px; font-weight: 600; font-family: cursive; display: flex ; justify-content: center; top: -18px; cursor: pointer;}
.popup-box .popup-inner .heading {background-color: rgb(9 89 151 / 20%); padding: 12px 18px; color: #333; font-size: 16px; font-weight: 600; }
.popup-box .popup-inner .form-content {padding: 20px;     max-height: 450px;  overflow: auto;}
    .popup-box .table-row .table-box .sticky-header {
        max-height: 350px;
    }
.popup-box .popup-inner .form-content form {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 15px;
}
.popup-box .popup-inner .form-content form .control-group {width: 100%; display: flex ; flex-direction: column; row-gap: 6px; }
.popup-box .popup-inner .form-content form .control-group.w-50{width: calc(50% - 15px);}
.popup-box .popup-inner .form-content form .control-group lable {font-size: 13px; color: #333; font-weight: 500}
.popup-box .popup-inner .form-content form .control-group select, .popup-box .popup-inner .form-content form .control-group input {width: 100%; height: 36px; border: 1px solid #ccc; box-shadow: none; padding: 6px 12px; border-radius: 5px; outline: none; font-size: 13px; max-width:100%;}
.popup-box .popup-inner .form-content form .form-action {width: 100%; }

.login-screen .inner {display: flex ; align-items: center; background: #015699; padding: 0; column-gap: 50px; height: 100vh; }
.login-screen .inner .left-box, .login-screen .inner .right-box {width: 100%; height: 100%; display: flex ; flex-direction: column; justify-content: center; }
.login-screen .inner .left-box{position: relative;}
.login-screen .inner .left-box::before{content: ''; opacity: 0.5; background-size: 70%; width: 100%; height: 100%; background-image: url('../images/logo.png'); background-position: center; background-repeat: no-repeat; position: absolute; top: 0; left: 0;}
.login-screen .inner .left-box h1 {text-align: center; color: #fff; font-size: 40px; margin-bottom: 20px; position: relative;}
.login-screen .inner .left-box p {color: #fff; font-size: 20px; text-align: center; line-height: 30px; max-width: 400px; margin: 0 auto; margin-bottom: 20px;  position: relative;}
.login-screen .inner .left-box .btn-box {text-align: center;   position: relative;}
.login-screen .inner .left-box .btn-box .theme-btn {background: #fff; color: #095997; text-decoration: none; font-size: 21px; padding: 11px 40px; border: 2px solid #fff; transition: all 400ms}
.login-screen .inner .left-box .btn-box .theme-btn:hover{background-color: transparent; color: #fff;}
.login-screen .inner .right-box{padding: 100px; background: #fff;}
.login-screen .inner .right-box .form-part {border-radius: 9px; box-shadow: 0 0 15px rgb(0 0 0 / 25%);  border-bottom: 4px solid #095997; padding: 60px; text-align: center; border-top: 4px solid #095997; }
.login-screen .inner .right-box .form-part h2 {color: #015699; font-size: 30px; margin-bottom: 30px; }
.login-screen .inner .right-box .form-part form {display: flex ; flex-wrap: wrap; column-gap: 30px; row-gap: 15px; }
.login-screen .inner .right-box .form-part form .control-group {width: 100%; display: flex ; flex-direction: column; row-gap: 6px; }
.login-screen .inner .right-box .form-part form .control-group lable {font-size: 16px; color: #333; font-weight: 500}
.login-screen .inner .right-box .form-part form .control-group select, .login-screen .inner .right-box .form-part form .control-group input {width: 100%; height: 54px; border: 1px solid #ccc; box-shadow: none; padding: 10px 30px; border-radius: 50px; font-size: 17px; font-weight: 500; outline: none}
.login-screen .inner .right-box .form-part form .form-action {width: 100%; }
.login-screen .inner .right-box .form-part form .control-group.username input{padding-left: 55px; background-image: url('../images/user.svg') !important; background-size: 26px; background-repeat: no-repeat; background-position: 18px;}
.login-screen .inner .right-box .form-part form .control-group.password input{padding-left: 55px; background-image: url('../images/password.svg') !important; background-size: 26px; background-repeat: no-repeat; background-position: 18px;}
.login-screen .inner .right-box .form-part form .form-action input {background: #095997; cursor: pointer; border: 1px solid #095997; border-radius: 50px; padding: 14px 25px; font-weight: 600; font-size: 20px; color: #fff; display: inline-block; width: 100%; }
.login-screen .inner .right-box .form-part a{color: #015699; margin-top: 20px; width: 100%; display: inline-block; text-align: center; font-size: 18px;}

.table-row .inner .table-box .info.form-inline form {display: flex ; column-gap: 30px; align-items: center; row-gap: 22px; flex-wrap: wrap;}
.table-row .inner .table-box .info.form-inline form .control-group{width: 30%; display: flex;}
.table-row .inner .table-box .info.form-inline form .control-group label{min-width: 100px; width: 100px; font-weight: 400; display: inline-block;}
.table-row .inner .table-box .info.form-inline form .control-group input, .table-row .inner .table-box .info.form-inline form .control-group select{height: 32px; border:  1px solid #00000029; padding: 4px 8px; width: 100%; border-radius:4px; background-color: #fff; box-shadow: none; font-size: 16px; margin-left: 2px; outline: none;}
.table-row .inner .table-box .info.form-inline form .row {width: 100%; display: flex ; column-gap: 15px;  flex-wrap: wrap; row-gap: 28px;}
.table-row .inner .table-box .info.form-inline form .row .control-group {width: calc(12% - 6px); }
.table-row .inner .table-box .info.form-inline form .button-box{margin: 0; width: 100%; }

.top-box-part {padding: 20px 0; }
.top-box-part .inner {display: flex ; column-gap: 30px; flex-wrap: wrap; row-gap: 15px; }
.top-box-part .inner .box-item {border-radius: 5px; box-shadow: 0 0 15px rgb(0 0 0 / 25%); overflow: hidden; padding: 20px; width: calc(50% - 15px);}
.top-box-part .inner .box-item.w-25 {width: calc(25% - 23px); }
.top-box-part .inner .box-item h3 {font-size: 20px; }
.top-box-part .inner .box-item.bg-blue {background: #095997; color: #fff; }
.top-box-part .inner .box-item h4 {font-size: 18px; margin-bottom: 10px; font-weight: 600; }
.top-box-part .inner .box-item h2 {font-size: 30px; }
.top-box-part .inner .box-item .form {display: flex ; column-gap: 15px; }
.top-box-part .inner .box-item .form .control-group {width: 100%; display: flex ; flex-direction: column; row-gap: 5px; }
.top-box-part .inner .box-item .form .control-group label{font-size: 16px; color: #333; font-weight: 500}
.top-box-part .inner .box-item .form .control-group select, .top-box-part .inner .box-item .form .control-group input {font-size: 18px; width: 100%; height: 42px; border: 1px solid #ccc; box-shadow: none; padding: 10px 12px; border-radius: 5px; outline: none}

.tickets-section {background: #f9f9f9; padding-bottom: 60px;}
.tickets-section .inner {border-radius: 5px; box-shadow: 0 0 15px rgb(0 0 0 / 25%); border-bottom: 4px solid #095997; width: 100%; overflow: hidden; background: #fff; padding: 15px; }
.tickets-section .inner h2{margin-bottom: 15px;}
.tickets-section .inner .box-list {display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 10px; }
.tickets-section .inner .box-list .item {width: calc(20% - 8px); height:52px; border: 1px solid #095997; border-radius: 0px 15px 0px 15px; overflow: hidden; display: flex; column-gap: 5px; }
.tickets-section .inner .box-list .item .icon {min-width: 40px; display: flex; align-items: center; justify-content: center; background: #095997; padding: 5px 18px; }
.tickets-section .inner .box-list .item .icon img {width: 25px; }
.tickets-section .inner .box-list .item .text {display: flex; flex-direction: column; padding: 10px 10px; width: 100%; row-gap:3px}
.tickets-section .inner .box-list .item .text span {font-size: 12px; }
.tickets-section .inner .box-list .item .number {border-left: 1px solid #095997; min-width: 45px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

.excel-btn {display: flex; }
.excel-btn .upload-file {position: relative; }
.excel-btn .upload-file input.theme-btn.search-btn {font-size: 0; width: 84px; height: 32px; position: absolute; left: 0; top: 0; opacity: 0; }
.excel-btn .upload-file::before{content: 'Upload'; background: #095997; cursor: pointer; border: 1px solid #095997; border-radius: 50px; padding: 10px 25px; font-weight: 600; font-size: 12px; color: #fff; display: inline-block;     border-radius: 9px; margin-left: 5px; padding: 8px 25px;}

.verfication-section {background: #f9f9f9; padding-bottom: 30px; padding-top: 20px;}
.verfication-section .inner {display: flex; column-gap: 30px; }
.verfication-section .inner .box-list {border-radius: 5px; box-shadow: 0 0 15px rgb(0 0 0 / 25%); border-bottom: 4px solid #095997; width: 100%; overflow: hidden; background: #fff; padding: 15px; }
.verfication-section .inner .box-list .header-bar {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
.verfication-section .inner .box-list .header-bar .searchbar {width: 40%; }
.verfication-section .inner .box-list .header-bar .searchbar input{width: 100%;}
.verfication-section .table-row .table-box{border: none; box-shadow: none;}
.verfication-section .table-row .table-box table.sticky-head td img {max-width: 20px; }
.verfication-section .table-row .table-box table tbody tr td input {height: auto; width: 20px; height: 20px; margin: 0 !important; box-shadow: none; }
.verfication-section .table-row .table-box table th, .verfication-section .table-row .table-box table td{padding: 10px; border-right: 1px solid #e5e5e5;}
.verfication-section .table-row .table-box table th:last-child, .verfication-section .table-row .table-box table td:last-child{border: none;}


.company-section{background: #f9f9f9; padding-bottom: 30px;}
.company-section .box-list {display: flex; column-gap: 30px; row-gap: 30px; flex-wrap: wrap;}
.company-section .box-list .item {border-radius: 5px; box-shadow: 0 0 15px rgb(0 0 0 / 25%); width: 100%; overflow: hidden; background: #fff; padding: 20px 0 0; width: calc(25% - 23px); }
.company-section .box-list .item .icon {width: 100%; text-align: center; margin-bottom: 20px; }
.company-section .box-list .item .icon img{max-width: 60px;}
.company-section .box-list .item .store-label {text-align: center; margin-bottom: 20px; min-height: 37px; }
.company-section .box-list .item .button-box, .company-section .box-list .item .detail-box {display: flex; justify-content:space-between }
.company-section .box-list .item .button-box a {width: 100%; text-align: center; height: 42px; background: transparent; border-top: 1px solid #ccc; line-height: 42px; border-right: 1px solid #ccc; color: #000; text-decoration: none; }
.company-section .box-list .item .button-box a:last-child{border-right: 0px;}
.company-section .box-list .item .button-box a:hover{color: #fff; background:#095997; border-color:#095997}
.company-section .box-list .item .detail-box{border-top:1px solid #ccc}
.company-section .box-list .item .detail-box .list {padding: 13px 11px; width: 100%; }
.company-section .box-list .item .detail-box .list:first-child {border-right: 1px solid #ccc; }            
.company-section .box-list .item .detail-box .list label {font-weight: 700; }

.table-row .table-box-top-grid .table-box .info ul li input {max-width: 100px; }
.table-row .table-box-top-grid .table-box .info ul li label {width: 100%; }

.table-row .inner .table-box .info.form-label-inline form .row .control-group {flex-direction: column; row-gap: 5px; }
.table-row .inner .table-box .info.form-label-inline form .row .control-group label {width: 100%; color: #000;}
.bottom-button {padding-top: 15px; border-top: 1px solid #ccc; margin-top: 10px !important; }

.calc-sidebar .box-no .item {display: flex; }
.calc-sidebar .box-no .item .icon {width: 50%; background: #09971a; display: flex; align-items: center; justify-content: center; padding: 8px; }
.calc-sidebar .box-no .item .number {display: flex; align-items: center; justify-content: center; width: 50%; font-size: 16px; font-weight: 500; }
.storename {background: #f1f1f1; text-align: center; padding: 10px; font-weight: 600; font-size: 14px; position: fixed; width: 100%; left: 0; bottom: 0; z-index: 9999; }
.table-row .table-box table.sticky-head th {padding: 12px 10px; }
.table-row .table-box .full-width-input .row {flex-wrap: nowrap !important; }
.table-row .table-box .full-width-input .row .control-group {width: 100% !important; }
.table-row .table-box .full-width-input .row .control-group input, .table-row .table-box .full-width-input .row .control-group select {max-width: 100% !important; }
.table-row .inner .table-box .info.form-inline form .control-group label {display: flex; justify-content: space-between; align-items:center; }
.table-row .inner .table-box .info.form-inline form .control-group label span {color: red; font-size: 12px; }

/* Professional application redesign */
:root {
    --pv-font: "Segoe UI", "Inter", Roboto, Arial, sans-serif;
    --pv-font-size: 13px;
    --pv-font-size-sm: 12px;
    --pv-font-size-lg: 14px;
    --pv-line-height: 1.45;
    --pv-bg: #eef5f8;
    --pv-surface: #ffffff;
    --pv-surface-soft: #f6fcfa;
    --pv-border: #d5ebe3;
    --pv-border-strong: #b7ddd0;
    --pv-text: #123d5b;
    --pv-muted: #4f6f7d;
    --pv-primary: #175f93;
    --pv-primary-dark: #0f4973;
    --pv-primary-soft: #dcecf7;
    --pv-accent: #8ccf55;
    --pv-accent-soft: #f0f9e5;
    --pv-sky: #d8eaf4;
    --pv-blue-soft: #e3f0f7;
    --pv-blue-line: #9cc4da;
    --pv-danger: #dc3545;
    --pv-warning: #b45309;
    --pv-shadow: 0 14px 34px rgb(40 95 122 / 10%);
    --pv-shadow-soft: 0 8px 20px rgb(40 95 122 / 8%);
}

html {
    background: var(--pv-bg);
}

body {
    min-height: 100vh;
    background: var(--pv-bg);
    color: var(--pv-text);
    font-family: var(--pv-font);
    font-size: var(--pv-font-size);
    font-weight: 400;
    padding-top: 78px;
    padding-bottom: 8px;
    line-height: var(--pv-line-height);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea,
table,
label,
a {
    font-family: var(--pv-font);
}

label {
    color: #344054;
    font-size: var(--pv-font-size);
    font-weight: 600;
}

input,
select,
textarea {
    font-weight: 500;
}

body.app-admin {
    background:
        linear-gradient(180deg, #f2f8fb 0, #e5f0f6 235px, #eef5f8 430px),
        var(--pv-bg);
}

.container {
    width: 100%;
    padding: 0 24px;
}

.main {
    min-height: calc(100vh - 126px);
}

.theme-btn,
input.theme-btn.search-btn,
.excel-btn .upload-file::before,
.login-screen .inner .right-box .form-part form .form-action input {
    min-height: 36px;
    border-radius: 7px;
    border: 1px solid var(--pv-primary);
    background: var(--pv-primary);
    box-shadow: 0 5px 12px rgb(40 95 122 / 16%);
    color: #fff;
    font-family: var(--pv-font);
    font-size: var(--pv-font-size);
    font-weight: 600;
    letter-spacing: 0;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.theme-btn:hover,
input.theme-btn.search-btn:hover,
.excel-btn .upload-file:hover::before,
.login-screen .inner .right-box .form-part form .form-action input:hover {
    background: #124f7d;
    border-color: #124f7d;
    box-shadow: 0 8px 16px rgb(15 73 115 / 20%);
}

.theme-btn:active,
input.theme-btn.search-btn:active {
    transform: translateY(1px);
}

h1.page-title {
    color: var(--pv-text);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
}

.main-header {
    min-height: 72px;
    background: rgb(255 255 255 / 96%);
    border-bottom: 1px solid var(--pv-border);
    box-shadow: 0 8px 24px rgb(40 95 122 / 8%);
    backdrop-filter: blur(14px);
    padding: 12px 0;
}

.main-header .inner {
    gap: 22px;
}

.main-header .inner .logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 188px;
}

.main-header .inner .logo img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgb(40 95 122 / 14%);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-copy strong {
    color: var(--pv-text);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.brand-copy span {
    max-width: 210px;
    color: var(--pv-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
}

.main-header .inner .right-box {
    flex: 1;
    justify-content: flex-end;
    column-gap: 16px;
}

.main-header .inner .right-box .menu ul {
    align-items: center;
    column-gap: 6px;
}

.main-header .inner .right-box .menu ul li a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 11px;
    border-radius: 7px;
    color: var(--pv-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    transition: background 160ms ease, color 160ms ease;
}

.main-header .inner .right-box .menu ul li.has-submenu > a {
    padding-right: 30px;
}

.main-header .inner .right-box .menu ul li a i {
    color: var(--pv-primary-dark);
    font-size: 17px;
    flex: 0 0 auto;
}

.main-header .inner .right-box .menu ul li a:hover,
.main-header .inner .right-box .menu ul li.has-submenu.open > a {
    background: linear-gradient(135deg, #d6e8f4, #e7f4dc);
    color: var(--pv-primary-dark);
}

.main-header .inner .right-box .menu ul .arrow,
.main-header .inner .right-box .user-menu ul li a .arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    margin: 0;
    background: none;
    opacity: .82;
}

.main-header .inner .right-box .menu ul .arrow::before,
.main-header .inner .right-box .user-menu ul li a .arrow::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

.main-header .inner .right-box .menu ul li.has-submenu > .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.main-header .inner .right-box .menu ul li.has-submenu.open .sub-menu {
    top: 48px;
    padding: 8px;
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-radius: 8px;
    box-shadow: var(--pv-shadow);
}

.main-header .inner .right-box .menu ul li.has-submenu.open .sub-menu a {
    min-height: 34px;
    display: flex;
    align-items: center;
    border: 0;
    border-radius: 6px;
    color: var(--pv-text);
    font-size: 13px;
    font-weight: 500;
    padding: 9px 10px;
}

.main-header .inner .right-box .menu ul li.has-submenu.open .sub-menu a:hover {
    background: linear-gradient(135deg, #d6e8f4, #e7f4dc);
    color: var(--pv-primary-dark);
}

.main-header .inner .right-box .user-menu {
    padding: 3px;
    background: var(--pv-surface-soft);
    border: 1px solid var(--pv-border);
    border-radius: 999px;
}

.main-header .inner .right-box .user-menu ul li a {
    min-height: 40px;
    padding: 6px 10px 6px 7px;
    gap: 8px;
}

.main-header .inner .right-box .user-menu ul li a img {
    max-width: 28px;
    width: 28px;
    height: 28px;
    object-fit: cover;
    background: var(--pv-primary-soft);
}

.main-header .inner .right-box .user-menu ul li a .arrow {
    margin-left: auto;
    flex: 0 0 auto;
}

.dat-top-bar-main {
    align-items: stretch;
    gap: 14px;
    padding: 18px 24px 6px;
    background: transparent;
}

.dat-top-bar {
    background: transparent;
    padding: 18px 0 6px;
}

.dat-top-bar-main .dat-top-bar {
    flex: 1;
    padding: 0;
}

.dat-top-bar .inner {
    min-height: 58px;
    gap: 14px;
    padding: 14px 16px;
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-radius: 8px;
    box-shadow: var(--pv-shadow-soft);
}

.dat-top-bar .inner label,
.dropdown-box label {
    color: var(--pv-muted);
    font-size: 12px;
    font-weight: 600;
}

select,
.text-box,
input.textfield,
.dat-top-bar .inner input.textfield,
.table-row .table-box .info ul li input,
.table-row .table-box .info ul li select,
.popup-box .popup-inner .form-content form .control-group select,
.popup-box .popup-inner .form-content form .control-group input,
.table-row .inner .table-box .info.form-inline form .control-group input,
.table-row .inner .table-box .info.form-inline form .control-group select,
.top-box-part .inner .box-item .form .control-group select,
.top-box-part .inner .box-item .form .control-group input {
    height: 36px;
    max-width: 100%;
    border: 1px solid var(--pv-border-strong);
    border-radius: 7px;
    background-color: #fff;
    box-shadow: none;
    color: var(--pv-text);
    font-size: var(--pv-font-size) !important;
    font-family: var(--pv-font) !important;
    font-weight: 500;
}

select:focus,
.text-box:focus,
input.textfield:focus,
.table-row .table-box .info ul li input:focus,
.table-row .table-box .info ul li select:focus,
.popup-box .popup-inner .form-content form .control-group select:focus,
.popup-box .popup-inner .form-content form .control-group input:focus,
.table-row .inner .table-box .info.form-inline form .control-group input:focus,
.table-row .inner .table-box .info.form-inline form .control-group select:focus {
    border-color: var(--pv-primary);
    box-shadow: 0 0 0 3px rgb(102 189 215 / 18%);
}

.table-row {
    padding: 16px 24px 28px;
}

.table-row .inner {
    column-gap: 20px;
    row-gap: 20px;
    margin-bottom: 20px;
}

.table-row .table-box,
.tickets-section .inner,
.verfication-section .inner .box-list,
.company-section .box-list .item,
.top-box-part .inner .box-item {
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-bottom: 3px solid var(--pv-primary);
    border-radius: 8px;
    box-shadow: var(--pv-shadow-soft);
}

.table-row .table-box {
    overflow: hidden;
}

.table-row .table-box .heading-label,
.calc-sidebar .list .item h3 {
    background: linear-gradient(90deg, #cfe3f0, #dbeaf3 58%, #ebf6dd 100%);
    color: var(--pv-primary-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 12px 16px;
}

.table-row .table-box .heading-label span.add-new {
    top: 7px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 7px;
    min-height: 30px;
    padding: 5px 12px 5px 8px;
    background: #ffffff;
    border: 1px solid var(--pv-border);
    border-radius: 999px;
    box-shadow: 0 3px 10px rgb(40 95 122 / 10%);
    color: var(--pv-primary-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.table-row .table-box .heading-label span.add-new img {
    display: none;
}

.table-row .table-box .heading-label span.add-new::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--pv-primary-soft);
    border: 1px solid var(--pv-blue-line);
    border-radius: 50%;
    color: var(--pv-primary-dark);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.table-row .table-box .heading-label span.add-new:hover {
    background: linear-gradient(135deg, #d6e8f4, #e7f4dc);
    border-color: var(--pv-blue-line);
    box-shadow: 0 5px 14px rgb(40 95 122 / 15%);
    transform: translateY(-1px);
}

.table-row .table-box .heading-label span.add-new:active {
    transform: translateY(0);
}

.table-row .table-box .info {
    padding: 18px;
}

.table-row .table-box .info ul {
    row-gap: 10px;
}

.table-row .table-box .info ul li label,
.table-row .inner .table-box .info.form-inline form .control-group label,
.top-box-part .inner .box-item .form .control-group label {
    color: #3b4b5d;
    font-size: var(--pv-font-size);
    font-weight: 600;
}

.table-row .table-box table {
    border-radius: 6px;
    box-shadow: none;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.table-row .table-box table thead tr,
.table-row .table-box table.sticky-head thead tr {
    background: linear-gradient(180deg, #175f93 0%, #0f4973 100%);
    color: #ffffff;
}

.table-row .table-box table th,
.table-row .table-box table td {
    padding: 10px 12px;
    color: var(--pv-text);
    border-color: #e5ebf1;
    font-size: var(--pv-font-size);
    font-weight: 400;
    line-height: 1.35;
    vertical-align: middle;
}

.table-row .table-box table th,
.table-row .table-box table thead td,
.table-row .table-box table.sticky-head th {
    color: #ffffff;
    font-weight: 700;
    white-space: nowrap;
    background: transparent;
    border-right: 1px solid rgb(255 255 255 / 18%);
    border-bottom: 2px solid #1d6c9b;
    text-transform: none;
    font-size: var(--pv-font-size-sm);
    letter-spacing: 0;
    line-height: 1.3;
}

.table-row .table-box table th:first-child,
.table-row .table-box table thead td:first-child {
    border-left: 0;
    border-top-left-radius: 6px;
}

.table-row .table-box table th:last-child,
.table-row .table-box table thead td:last-child {
    border-right: 0;
    border-top-right-radius: 6px;
}

.table-row .table-box table.sticky-head th,
.table-row .table-box table.sticky-head td {
    border-right-color: #d8e8ee;
}

.table-row .table-box table.sticky-head thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, #175f93 0%, #0f4973 100%);
    box-shadow: inset 0 -2px 0 #0b3c5d;
}

.table-row .table-box table.sticky-head tbody td {
    font-size: var(--pv-font-size-sm);
}

.table-row .table-box table tbody tr {
    border-bottom: 1px solid #e8eef4;
}

.table-row .table-box table tbody tr:nth-of-type(even) {
    background-color: #f8fafc;
}

.table-row .table-box table tbody tr:hover {
    background-color: #f2fbfd;
}

.table-row .table-box .sticky-header {
    max-height: calc(100vh - 225px);
    min-height: 180px;
    padding-bottom: 4px;
    scrollbar-color: #6fb8cf #edf9f4;
}

.table-row .table-box .sticky-header::-webkit-scrollbar,
.menu.main-menu::-webkit-scrollbar,
.main-header .inner .right-box .menu ul li.has-submenu.open .sub-menu::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.table-row .table-box .sticky-header::-webkit-scrollbar-track,
.menu.main-menu::-webkit-scrollbar-track,
.main-header .inner .right-box .menu ul li.has-submenu.open .sub-menu::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #f2fbfd 0%, #eef9f2 100%);
    border-radius: 999px;
}

.table-row .table-box .sticky-header::-webkit-scrollbar-thumb,
.menu.main-menu::-webkit-scrollbar-thumb,
.main-header .inner .right-box .menu ul li.has-submenu.open .sub-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #175f93 0%, #78c96e 100%);
    border-radius: 999px;
    border: 2px solid #eff9f6;
}

.table-row .table-box .sticky-header::-webkit-scrollbar-thumb:hover,
.menu.main-menu::-webkit-scrollbar-thumb:hover,
.main-header .inner .right-box .menu ul li.has-submenu.open .sub-menu::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #124f7d 0%, #63b75b 100%);
}

.table-row .table-box table tbody tr td input {
    height: 34px;
    border: 1px solid var(--pv-border);
    border-radius: 6px;
    box-shadow: none;
    font-size: 13px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
}

.btn-edit,
.btn-view,
.btn-success,
.btn-delete {
    border: 1px solid transparent;
}

.btn-edit {
    background-color: #e9f2ff;
    color: #1e5fbf;
}

.btn-delete {
    background-color: #fff0f1;
    color: var(--pv-danger);
}

.popup-box {
    z-index: 1100;
    background: rgb(15 73 115 / 28%);
    backdrop-filter: blur(4px);
}

.popup-box .popup-inner {
    border-radius: 8px;
    box-shadow: 0 24px 60px rgb(0 0 0 / 24%);
}

.popup-box .popup-inner .heading {
    background: var(--pv-primary-soft);
    color: var(--pv-primary-dark);
    font-weight: 800;
}

.popup-box .popup-inner .close,
.calc-sidebar .close-btn {
    background: var(--pv-primary);
}

.top-box-part {
    padding: 18px 24px;
}

.tickets-section,
.verfication-section,
.company-section {
    background: transparent;
}

.company-section {
    padding: 18px 24px 34px;
}

.company-section .box-list {
    gap: 20px;
}

.company-section .box-list .item {
    width: calc(25% - 15px);
    padding-top: 22px;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.company-section .box-list .item:hover {
    transform: translateY(-2px);
    box-shadow: var(--pv-shadow);
}

.company-section .box-list .item .icon img {
    max-width: 66px;
    border-radius: 8px;
}

.company-section .box-list .item .store-label h3 {
    color: var(--pv-text);
    font-size: 17px;
    font-weight: 800;
}

.company-section .box-list .item .store-label p {
    color: var(--pv-muted);
}

.company-section .box-list .item .button-box a {
    height: 44px;
    line-height: 44px;
    font-weight: 800;
    color: var(--pv-primary-dark);
}

.company-section .box-list .item .button-box a:hover {
    background: var(--pv-primary);
    border-color: var(--pv-primary);
}

.storename {
    background: #ffffff;
    border-top: 1px solid var(--pv-border);
    color: var(--pv-muted);
    box-shadow: 0 -5px 16px rgb(22 36 51 / 7%);
}

.login-screen .inner {
    background:
        linear-gradient(135deg, #0f4973 0%, #175f93 56%, #8ccf55 100%),
        #0f4973;
    column-gap: 0;
}

.login-screen .inner .left-box::before {
    opacity: .13;
    background-size: 58%;
}

.login-screen .inner .left-box h1 {
    font-size: 48px;
    font-weight: 700;
}

.login-screen .inner .left-box p {
    max-width: 460px;
    color: rgb(255 255 255 / 90%);
}

.login-screen .inner .left-box .btn-box .theme-btn {
    border-radius: 7px;
    font-size: 16px;
}

.login-screen .inner .right-box {
    background: #f7fafc;
}

.login-screen .inner .right-box .form-part {
    max-width: 430px;
    margin: 0 auto;
    border: 1px solid var(--pv-border);
    border-top: 0;
    border-bottom: 3px solid var(--pv-primary);
    border-radius: 8px;
    box-shadow: var(--pv-shadow);
    padding: 44px;
}

.login-screen .inner .right-box .form-part h2 {
    color: var(--pv-text);
    font-size: 28px;
    font-weight: 700;
}

.login-screen .inner .right-box .form-part form .control-group select,
.login-screen .inner .right-box .form-part form .control-group input {
    height: 48px;
    border-radius: 7px;
    border-color: var(--pv-border-strong);
    background-color: #fff;
    font-family: var(--pv-font);
    font-size: var(--pv-font-size-lg);
    font-weight: 500;
}

.login-screen .inner .right-box .form-part form .control-group.has-prefix-icon {
    position: relative;
}

.login-screen .inner .right-box .form-part form .control-group.has-prefix-icon .login-field-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.login-screen .inner .right-box .form-part form .control-group.has-prefix-icon .login-field-icon img {
    width: 18px;
    height: 18px;
    opacity: .85;
}

.login-screen .inner .right-box .form-part form .control-group.username input {
    padding-left: 50px;
    background-image: none !important;
}

.login-screen .inner .right-box .form-part form .control-group.password input {
    padding-left: 50px;
    background-image: none !important;
}

.login-screen .inner .right-box .form-part form .form-action input {
    height: 48px;
    border-radius: 7px;
    font-size: var(--pv-font-size-lg);
    font-weight: 600;
}

.login-screen .inner .right-box .form-part a {
    color: var(--pv-primary);
    font-size: 14px;
    font-weight: 500;
}

.company-section .box-list .item .store-label h3,
.top-box-part .inner .box-item h3,
.top-box-part .inner .box-item h4,
.tickets-section .inner h2 {
    font-family: var(--pv-font);
    font-weight: 700;
    letter-spacing: 0;
}

.company-section .box-list .item .store-label p,
.company-section .box-list .item .detail-box,
.table-row .table-box .info .text {
    font-family: var(--pv-font);
    font-size: var(--pv-font-size);
    line-height: var(--pv-line-height);
}

.company-section .box-list .item .button-box a {
    font-family: var(--pv-font);
    font-size: var(--pv-font-size);
    font-weight: 600;
}

/* Final typography normalization across legacy and redesigned screens */
.main-header,
.main-header a,
.dat-top-bar,
.table-row,
.table-row table,
.popup-box,
.login-screen,
.company-section,
.top-box-part,
.tickets-section,
.verfication-section,
.calc-sidebar {
    font-family: var(--pv-font);
}

.main-header .inner .right-box .menu ul li a,
.main-header .inner .right-box .user-menu ul li a,
.dat-top-bar .tab-menu ul li a,
.company-section .box-list .item .button-box a {
    font-size: var(--pv-font-size);
    font-weight: 600;
    letter-spacing: 0;
}

.table-row .table-box table th,
.table-row .table-box table thead td {
    font-size: var(--pv-font-size-sm);
    font-weight: 700;
}

.table-row .table-box table td,
.table-row .table-box .info ul li,
.popup-box .popup-inner .form-content,
.company-section .box-list .item .detail-box {
    font-size: var(--pv-font-size);
    font-weight: 400;
}

.table-row .table-box .info ul li label,
.popup-box .popup-inner .form-content form .control-group label,
.dat-top-bar .inner label,
.dropdown-box label {
    font-size: var(--pv-font-size-sm);
    font-weight: 600;
}

input,
select,
textarea,
.text-box,
input.textfield,
.table-row .table-box table tbody tr td input {
    font-family: var(--pv-font) !important;
    font-size: var(--pv-font-size) !important;
    font-weight: 500;
}

.dat-top-bar .inner .os-summary-label,
.dat-top-bar .inner .os-summary-value,
.popup-box .popup-inner .heading,
.company-section .box-list .item .store-label h3 {
    font-weight: 700;
}

.select2-container {
    font-family: var(--pv-font);
    font-size: var(--pv-font-size);
    min-width: 170px;
}

.select2-container--default .select2-selection--single {
    height: 36px;
    border: 1px solid var(--pv-border-strong);
    border-radius: 7px;
    background: #fff;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--pv-text);
    line-height: 34px;
    padding-left: 10px;
    padding-right: 30px;
    font-weight: 500;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--pv-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
    right: 6px;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--pv-primary);
    box-shadow: 0 0 0 3px rgb(23 95 147 / 18%);
}

.select2-dropdown {
    border: 1px solid var(--pv-border-strong);
    border-radius: 7px;
    box-shadow: var(--pv-shadow-soft);
    overflow: hidden;
}

.select2-container--open {
    z-index: 1205;
}

.popup-box .select2-container--open,
.popup-box .select2-dropdown {
    z-index: 1210;
}

.select2-results,
.select2-results__options {
    overflow-x: hidden;
}

.select2-search--dropdown {
    padding: 8px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 32px;
    border: 1px solid var(--pv-border-strong);
    border-radius: 6px;
    color: var(--pv-text);
    font-family: var(--pv-font);
    font-size: var(--pv-font-size);
    outline: none;
}

.select2-results__option {
    padding: 8px 10px;
    font-size: var(--pv-font-size);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--pv-primary-soft);
    color: var(--pv-primary-dark);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--pv-accent-soft);
    color: var(--pv-primary-dark);
}

.table-row .table-box table.sticky-head thead tr.report-total-row {
    position: sticky;
    top: 0;
    z-index: 6;
    background: #ffffff;
}

.table-row .table-box table.sticky-head thead tr.report-total-row th {
    position: sticky;
    top: 0;
    z-index: 7;
    background: linear-gradient(180deg, #ffffff 0%, #f2f8f6 100%);
    border-right: 1px solid var(--pv-border);
    border-bottom: 2px solid var(--pv-accent);
    color: var(--pv-primary-dark);
    font-size: var(--pv-font-size-sm);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    box-shadow: none;
}

/* Blue + green application-wide polish over legacy screens */
body,
.main-header .inner .right-box .menu ul li a,
.main-header .inner .right-box .user-menu ul li a,
.table-row .table-box table td,
.table-row .table-box .info .text,
.popup-box .popup-inner .form-content form .control-group lable,
.login-screen .inner .right-box .form-part form .control-group lable,
.company-section .box-list .item .button-box a,
.top-box-part .inner .box-item .form .control-group label {
    color: var(--pv-text);
}

.dat-top-bar .tab-menu ul {
    border-color: var(--pv-border-strong);
    background: #ffffff;
}

.dat-top-bar .tab-menu ul li a {
    color: var(--pv-primary-dark);
}

.dat-top-bar .tab-menu ul li a:hover,
.dat-top-bar .tab-menu ul li.active a {
    background: linear-gradient(135deg, var(--pv-primary), #1c6da4 60%, var(--pv-accent));
    color: #fff;
}

.table-row .table-box,
.tickets-section .inner,
.verfication-section .inner .box-list,
.company-section .box-list .item,
.top-box-part .inner .box-item,
.login-screen .inner .right-box .form-part {
    border-bottom-color: var(--pv-accent);
}

.top-box-part .inner .box-item.bg-blue,
.calc-sidebar .list .item h3,
.tickets-section .inner .box-list .item .icon,
.excel-btn .upload-file::before,
.calc-sidebar .close-btn {
    background: linear-gradient(135deg, var(--pv-primary), #1d6da4 55%, var(--pv-accent));
    color: #fff;
    border-color: transparent;
}

.tickets-section .inner .box-list .item,
.tickets-section .inner .box-list .item .number {
    border-color: var(--pv-blue-line);
}

.tickets-section .inner .box-list .item .number,
.company-section .box-list .item .button-box a:hover,
.top-box-part .inner .box-item.bg-blue h3,
.top-box-part .inner .box-item.bg-blue h4,
.top-box-part .inner .box-item.bg-blue h2 {
    color: #000;
}

.calc-sidebar .user-detail .detail a,
.top-box-part .inner .box-item h3,
.top-box-part .inner .box-item h4,
.tickets-section .inner h2,
a {
    color: var(--pv-primary-dark);
}

.btn-view {
    background-color: #dcecf7;
    color: var(--pv-primary-dark);
    border-color: #b8d3e3;
}

.btn-view:hover {
    background-color: var(--pv-primary);
    color: #fff;
}

.calc-sidebar .box-no .item .icon {
    background: linear-gradient(135deg, #66c77a, var(--pv-accent));
}

.storename {
    background: linear-gradient(90deg, #f7fcfd 0%, #f2faef 100%);
}

/* Petroleum purchase invoice layout */
.petroleum-invoice-form form,
.petroleum-invoice-form .row {
    width: 100%;
}

.petroleum-invoice-form .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    column-gap: 16px;
    row-gap: 16px;
}

.petroleum-invoice-form .control-group,
.petroleum-invoice-form form .row .control-group,
.petroleum-invoice-form form .control-group {
    width: 100% !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 6px;
}

.petroleum-invoice-form .control-group label {
    width: auto !important;
    min-width: 0 !important;
    margin: 0;
    text-align: left !important;
    justify-content: flex-start !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.petroleum-invoice-form .control-group input,
.petroleum-invoice-form .control-group select,
.petroleum-invoice-form .control-group .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}

.petroleum-invoice-form .button-box.bottom-button {
    width: 100%;
}

.popup-box .popup-inner .form-content form .form-action {
    width: 100%;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--pv-border);
}

.menu-icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: currentColor;
    flex: 0 0 auto;
}

.menu-icon-svg svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.business-filter-layout {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.business-filter-layout-top {
    display: block;
}

.business-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.business-filter-tabs-top {
    margin-bottom: 18px;
}

.business-filter-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--pv-border);
    border-bottom: 3px solid transparent;
    border-radius: 8px;
    background: #fff;
    color: var(--pv-text);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--pv-shadow-soft);
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.business-filter-tab:hover {
    background: linear-gradient(135deg, #d6e8f4, #e7f4dc);
    border-color: var(--pv-blue-line);
    transform: translateY(-1px);
}

.business-filter-tab.active {
    background: linear-gradient(135deg, #175f93, #0f4973 62%, #77bf53);
    border-color: #0f4973;
    color: #fff;
    box-shadow: 0 14px 26px rgb(15 73 115 / 18%);
}

.business-filter-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.business-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgb(255 255 255 / 14%);
    border: 1px solid rgb(255 255 255 / 18%);
    font-size: 12px;
    font-weight: 700;
}

.business-filter-tab:not(.active) .business-filter-count {
    background: var(--pv-primary-soft);
    border-color: var(--pv-blue-line);
    color: var(--pv-primary-dark);
}

.business-filter-content {
    flex: 1;
    min-width: 0;
}

.business-view-page .company-section .box-list {
    flex: 1;
    column-gap: 16px;
    row-gap: 16px;
}

.business-view-page .company-section .box-list .item {
    width: calc(25% - 12px);
    padding-top: 14px;
}

.business-view-page .company-section {
    padding-top: 14px;
}

.business-view-page .company-section .box-list .item .icon {
    margin-bottom: 12px;
}

.business-view-page .company-section .box-list .item .icon img {
    max-width: 54px;
}

.business-view-page .company-section .box-list .item .store-label {
    margin-bottom: 12px;
    min-height: 0;
    padding: 0 12px;
}

.business-view-page .company-section .box-list .item .store-label h3 {
    font-size: 15px;
    line-height: 1.25;
}

.business-view-page .company-section .box-list .item .store-label p {
    font-size: 12px;
    line-height: 1.3;
}

.business-view-page .company-section .box-list .item .detail-box .list {
    padding: 10px 9px;
    font-size: 12px;
}

.business-view-page .company-section .box-list .item .button-box a {
    height: 38px;
    line-height: 38px;
    font-size: 12px;
}

/* Dashboard */
.dashboard-page {
    scroll-behavior: smooth;
}

.dashboard-header-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.dashboard-subtitle {
    margin-top: 4px;
    color: var(--pv-muted);
    font-size: 13px;
    font-weight: 500;
}

.dashboard-filter-form,
.dashboard-filter-controls {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.dashboard-filter-controls .control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}

.dashboard-filter-select {
    width: 100%;
    min-width: 150px;
}

.dashboard-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.dashboard-overview-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-overview-card,
.dashboard-metric-card,
.dashboard-chart-item,
.dashboard-detail-panel {
    background: #fff;
    border: 1px solid var(--pv-border);
    border-radius: 8px;
    box-shadow: var(--pv-shadow-soft);
}

.dashboard-overview-card {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-overview-card strong {
    font-size: 24px;
    color: var(--pv-primary-dark);
    line-height: 1.15;
}

.dashboard-overview-card-ledger {
    gap: 14px;
}

.dashboard-ledger-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-ledger-grid small {
    display: block;
    margin-bottom: 5px;
    color: var(--pv-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.dashboard-ledger-grid strong {
    font-size: 20px;
}

.dashboard-overview-card span {
    color: var(--pv-muted);
    font-size: 12px;
}

.dashboard-overview-label {
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
}

.dashboard-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.dashboard-metric-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-metric-card {
    display: block;
    padding: 18px;
    color: inherit;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.dashboard-metric-card:hover,
.dashboard-chart-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--pv-shadow);
    border-color: var(--pv-blue-line);
}

.dashboard-metric-top,
.dashboard-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-metric-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--pv-text);
}

.dashboard-metric-count {
    color: var(--pv-muted);
    font-size: 11px;
    font-weight: 700;
}

.dashboard-metric-value {
    margin-top: 12px;
    font-size: 26px;
    font-weight: 800;
    color: var(--pv-primary-dark);
}

.dashboard-metric-compare {
    margin-top: 4px;
    color: var(--pv-muted);
    font-size: 12px;
}

.dashboard-metric-delta {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-metric-delta span {
    color: inherit;
    opacity: .82;
}

.dashboard-summary-table td.positive,
.dashboard-summary-table td.negative,
.dashboard-metric-delta.positive,
.dashboard-metric-delta.negative {
    color: #0b7a57;
}

.dashboard-summary-table td.negative,
.dashboard-metric-delta.negative {
    color: #c24141;
}

.dashboard-mini-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.dashboard-mini-bar,
.dashboard-chart-bar {
    height: 10px;
    border-radius: 999px;
    background: #ebf1f5;
    overflow: hidden;
}

.dashboard-mini-bar span,
.dashboard-chart-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.dashboard-mini-bar.current span,
.dashboard-chart-bar.current span {
    background: linear-gradient(135deg, var(--pv-primary), #0f4973);
}

.dashboard-mini-bar.previous span,
.dashboard-chart-bar.previous span {
    background: linear-gradient(135deg, var(--pv-accent), #6aa246);
}

.dashboard-trend-icon {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 6px;
    vertical-align: middle;
}

.dashboard-trend-icon.up {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #0b7a57;
}

.dashboard-trend-icon.down {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #c24141;
}

.dashboard-detail-link {
    color: var(--pv-primary-dark);
    text-decoration: none;
    font-weight: 700;
}

.dashboard-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-detail-panel {
    overflow: hidden;
}

.dashboard-detail-title {
    padding: 12px 14px;
    background: linear-gradient(90deg, #dbeaf3 0%, #eef7db 100%);
    color: var(--pv-primary-dark);
    font-size: 13px;
    font-weight: 800;
    border-bottom: 1px solid var(--pv-border);
}

.dashboard-detail-panel table {
    width: 100%;
}

.dashboard-detail-panel table th,
.dashboard-detail-panel table td {
    padding: 9px 10px;
    font-size: 12px;
}

.dashboard-detail-panel table td:last-child,
.dashboard-summary-table td:nth-child(n+2) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dashboard-empty-cell {
    text-align: center !important;
    color: var(--pv-muted);
    padding: 18px !important;
}

.table-row .table-box table.sticky-head thead tr.report-total-row th:first-child {
    left: 0;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .2px;
}

.table-row .table-box table.sticky-head thead tr.report-total-row + tr th {
    position: sticky;
    top: 39px;
    z-index: 6;
}

.table-row .table-box table.sticky-head tbody td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table-row .table-box table.sticky-head thead tr.report-total-row th:not(:first-child) {
    font-variant-numeric: tabular-nums;
}