* {
transition: all ease 0.3s;
}
html, body {
height: 100%;
}
body {
background: #fff;
font-family: "Inter", sans-serif;
display: flex;
flex-direction: column;
}
h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0;
color: #393939;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
span {
margin: 0;
padding: 0;
}
a:hover {
cursor: pointer;
}
.navigation {
position: fixed;
height: 100%;
width: 250px;
background: #2E2E30;
display: flex;
gap: 12px;
flex-direction: column;
padding: 8px;
z-index: 3;
}
.navigation .logo-holder {
padding: 8px;
display: flex;
justify-content: center;
align-items: center;
}
nav .logo-holder .logo {
width: 150px;
}
.navigation ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.navigation ul li {
}
.navigation ul li a {
font-size: 14px;
display: flex;
align-items: center;
text-decoration: none;
padding: 12px 16px;
color: #fff;
gap: 12px;
transition: all ease 0.3s;
}
.navigation ul li.active .link-main {
background: rgba(0, 0, 0, 0.10);
color: #CC1717;
border-radius: 8px;
}
.navigation ul li a:hover {
transition: all ease 0.3s;
color: #CC1717;
}
.navigation ul li a i {
width: 20px;
}
.list-grp {
}
.list-grp .listing {
width: 100%;
}
.list-grp .listing table {
width: 100%;
}
.list-grp .listing table thead tr {
}
.list-grp .listing table thead tr th {
padding: 16px;
font-size: 14px;
background: rgba(0, 0, 0, 0.10);
color: #333;
}
.list-grp .listing table thead tr th:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.list-grp .listing table thead tr th:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.list-grp .listing table tbody tr {
}
.list-grp .listing table tbody tr td {
padding: 16px;
color: #333;
font-size: 14px;
border-bottom: 1px solid #EFEFEF;
}
.list-grp table tbody tr:last-child td {
border-bottom: none;
}
.list-grp .listing table tbody tr td a {
display: inline-block;
text-decoration: none;
color: #3E7FC9;
}
.list-grp .listing table tbody tr td .badge-xs {
font-size: 12px;
}
.list-grp {
}
.list-grp .bordered {
border-radius: 8px;
border: 1px solid #EFEFEF;
}
.list-grp .bordered table {
width: 100%;
}
.list-grp .bordered table thead tr {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.list-grp .bordered table thead tr th {
padding: 16px;
font-size: 14px;
background: rgba(0, 0, 0, 0.10);
border: 1px solid #CACACA;
border-bottom: none;
border-top: none;
text-align: center;
}
.list-grp .bordered table thead tr th:first-child {
border-top-left-radius: 7px;
border: none;
}
.list-grp .bordered table thead tr th:last-child {
border-top-right-radius: 7px;
border: none;
}
.list-grp .bordered table tbody tr {
}
.list-grp .bordered table tbody tr td {
padding: 16px;
color: #333;
font-size: 14px;
border: 1px solid #EFEFEF;
}
.list-grp .bordered table tbody tr td:first-child {
border-left: none;
}
.list-grp .bordered table tbody tr td:last-child {
border-right: none;
}
.list-grp .bordered table tbody tr:last-child td {
border-bottom: none;
}
.list-grp .bordered table tbody tr td a {
display: inline-block;
text-decoration: none;
color: #3E7FC9;
}
.list-grp .bordered table tbody tr td .badge-xs {
font-size: 12px;
}
.list-grp {
}
.list-grp .outlined {
border-radius: 8px;
border: 1px solid #d9d9d9;
}
.list-grp .outlined table {
width: 100%;
}
.list-grp .outlined table thead tr {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.list-grp .outlined table thead tr th {
padding: 16px;
font-size: 12px;
border: 1px solid #d9d9d9;
border-bottom: none;
border-top: none;
text-align: center;
}
.list-grp .outlined table thead tr th:first-child {
border-top-left-radius: 7px;
border: none;
}
.list-grp .outlined table thead tr th:last-child {
border-top-right-radius: 7px;
border: none;
}
.list-grp .outlined table tbody tr {
}
.list-grp .outlined table tbody tr td {
padding: 16px;
color: #333;
font-size: 12px;
border: 1px solid #d9d9d9;
}
.list-grp .outlined table tbody tr td:first-child {
border-left: none;
}
.list-grp .outlined table tbody tr td:last-child {
border-right: none;
}
.list-grp .outlined table tbody tr:last-child td {
border-bottom: none;
}
.list-grp .outlined table tbody tr:last-child td:first-child {
border-bottom: none;
border-bottom-left-radius: 7px;
}
.list-grp .outlined table tbody tr:last-child td:last-child {
border-bottom: none;
border-bottom-right-radius: 7px;
}
.list-grp .outlined table tbody tr td a {
display: inline-block;
text-decoration: none;
color: #3E7FC9;
}
.list-grp .outlined table tbody tr td .badge-xs {
font-size: 12px;
}
.tr-addon {
border-bottom: 1px solid #d9d9d9;
}
.tr-addon th {
padding: 4px!important;
}
.tr-lv1 {
background: #D9D9D9;
}
.tr-lv2 {
background: #F0F0F0;
}
.tr-lv2 td:first-child {
padding-left: 24px!important;
}
.tr-lv3 {
background: #fff;
}
.tr-lv3 td:first-child {
padding-left: 32px!important;
}
.td-price {
text-align: right;
}
.list-grp {
}
.list-grp .form {
width: 100%;
}
.list-grp .form table {
width: 100%;
}
.list-grp .form table thead tr {
}
.list-grp .form table thead tr th {
padding: 16px;
font-size: 14px;
background: rgba(0, 0, 0, 0.10);
color: #333;
}
.list-grp .form table thead tr th:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.list-grp .form table thead tr th:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.list-grp .form table tbody tr {
}
.list-grp .form table tbody tr td {
padding: 16px;
color: #333;
font-size: 14px;
}
/*.list-grp table tbody tr:last-child td {
border-bottom: none;
}*/
.list-grp .form table tbody tr td a {
display: inline-block;
text-decoration: none;
color: #3E7FC9;
}
.list-grp .form table tbody tr td .badge-xs {
font-size: 12px;
}
.list-grp .frm-sm {
}
.list-grp .frm-sm table tbody tr td {
padding: 8px 16px;
color: #333;
font-size: 14px;
}
.pager {
margin-top: 24px;
display: flex;
gap: 12px;
}
.pager a {
display: inline-block;
padding: 6px 12px;
border: 1px solid #D1D9E4;
font-size: 14px;
color: #CC1717;
border-radius: 8px;
transition: all ease 0.3s;
}
.pager a:hover {
background: #CC1717;
color: #fff;
border: 1px solid #CC1717;
transition: all ease 0.3s;
}
.grid {
display: flex;
gap: 16px;
}
.grid .grid-item {
width: 100%;
display: flex;
}
.card-panel {
padding: 24px;
background: #fff;
border-radius: 8px;
border: 1px solid #D1D9E4;
display: flex;
justify-content: space-between;
align-items: center;
}
.card-panel .card-info {
display: flex;
flex-direction: column;
gap: 8px;
}
.card-panel .card-info label {
color: #1C1D1F;
margin: 0;
padding: 0;
font-size: 14px;
}
.card-panel .card-info h3 {
color: #393939;
margin: 0;
padding: 0;
font-weight: 700;
}
.card-panel i {
font-size: 40px;
color: #CC1717;
}
.page-title {
display: flex;
flex-direction: column;
gap: 8px;
line-height: normal;
}
.page-title h2 {
color: #393939;
font-size: 24px;
font-weight: 600;
margin: 0;
padding: 0;
}
.page-title h3 {
color: #393939;
font-size: 18px;
font-weight: 600;
margin: 0;
padding: 0;
}
.gap-24 {
gap: 24px;
}
.gap-16 {
gap: 16px;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.flex {
display: flex;
}
.bt-xs {
border-radius: 8px;
font-weight: 600;
font-size: 12px;
font-weight: 400;
padding: 2px 8px;
border: none;
line-height: 1.5;
}
.bt-sm {
border-radius: 8px;
font-weight: 600;
font-size: 14px;
font-weight: 400;
padding: 4px 10px;
border: none;
line-height: 1.5;
}
.bt {
border-radius: 8px;
font-weight: 600;
font-size: 16px;
font-weight: 500;
padding: 6px 16px;
border: none;
line-height: 1.5;
}
.bt:first-child:active {
background: #F43434;
border: 1px solid #F43434;
}
.btn-primary {
background: #CC1717;
border: 1px solid #CC1717;
color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background: #F43434!important;
border: 1px solid #F43434!important;
cursor: pointer;
}
.btn-primary:focus-visible {
background: #F43434!important;
border: 1px solid #F43434!important;
}
.btn-primary:disabled {
background: #aaa;
border: 1px solid #aaa;
}
.btn-primary:disabled:hover {
background: #aaa!important;
border: 1px solid #aaa!important;
cursor: default;
}
.btn-primary-outline {
border: 1px solid #CC1717;
color: #CC1717;
background: transparent;
}
.btn-primary-outline:hover {
background: #CC1717;
color: #fff;
}
.btn-primary-outline:disabled {
border: 1px solid #aaa!important;
color: #aaa!important;
}
.btn-primary-outline:disabled:hover {
background: transparent!important;
border: 1px solid #aaa!important;
cursor: default;
color: #aaa;
}
.btn-secondary {
background: #6c757d;
color: #fff;
border: 1px solid #6c757d;
}
.btn-secondary-outline {
border: 1px solid #6c757d;
color: #6c757d;
background: transparent;
}
.btn-secondary-outline:hover {
background: #6c757d;
color: #fff;
}
.btn-default {
color: #6A6A6A;
padding: 0;
background: transparent;
border: 0;
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
color: #F43434;
background: transparent!important;
}
.btn-success {
background: #09C10F;
color: #fff;
border: 1px solid #09C10F;
}
.btn-success-outline {
border: 1px solid #09C10F;
color: #09C10F;
background: transparent;
}
.btn-success-outline:hover {
background: #09C10F;
color: #fff;
}
.btn-full {
width: 100%;
}
.btn-icon {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-icon i {
font-size: 12px;
line-height: 1.5;
/*width: 24px;*/
}
.badge {
padding: 4px 8px;
border-radius: 8px;
}
.badge-xs {
font-size: 12px;
line-height: normal;
font-weight: 600;
}
.badge-sm {
font-size: 14px;
line-height: normal;
font-weight: 600;
}
.badge-md {
font-size: 16px;
line-height: normal;
font-weight: 600;
}
.badge-lg {
font-size: 18px;
line-height: normal;
font-weight: 600;
}
.badge-primary {
color: #CC1717;
background: rgba(204, 23, 23, 0.15);
}
.badge-secondary {
color: #6c757d;
background: rgba(108, 117, 125, 0.10);
}
.badge-success {
color: #09C10F;
background: rgba(9, 193, 15, 0.10);
}
.badge-danger {
color: #F90929;
background: rgba(249, 9, 41, 0.10);
}
.badge-warning {
color: #FF8800;
background: rgba(255, 136, 0, 0.10);
}
.badge-info {
color: #3E7FC9;
background: rgba(62, 127, 201, 0.10);
}
.badge-light {
color: #2E2E30;
background: #fff;
}
.badge-dark {
color: #fff;
background: #2E2E30;
}
.bread {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.bread .bread-item {
font-size: 12px;
}
.bread .bread-item a {
text-decoration: none;
color: #AAA;
}
.bread .bread-item:first-child:before {
content: none;
}
.bread .bread-item:before {
content: "/";
padding: 0 8px;
color: #AAA;
}
.bread-primary li.active {
color: #CC1717;
}
.bread-secondary li.active {
color: #6c757d;
}
.align-right {
justify-content: right;
}
.frm-grp {
display: flex;
flex-direction: column;
gap: 16px;
}
.frm-item {
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
font-weight: 400;
}
.frm-item .form-label {
font-size: 14px;
color: #333;
margin: 0;
}
.frm-item .form-control {
font-size: 14px;
color: #333;
border: 1px solid #D1D9E4;
padding: 6px 16px;
}
.frm-item .form-control::placeholder {
color: #aaa;
}
.frm-item .form-select {
font-size: 14px;
color: #333;
border: 1px solid #D1D9E4;
padding: 6px 16px;
}
.frm-item .form-select option:first-child {
color: #aaa;
}
.frm-item .chev-down {
width: 6px;
position: absolute;
right: 16px;
top: 43px;
}
.frm-item .file-upload {
padding: 12px 16px;
text-align: center;
color: #aaa;
border: 2px dashed #D1D9E4;
border-radius: 6px;
}
.frm-item input[type="file"] {
display: none;
}
.frm-grp .required {
position: relative;
}
.frm-grp .required .form-control, .frm-grp .required .form-select {
border: 1px solid #F90929;
}
.frm-grp .required .error-msg {
color: #F90929;
font-size: 12px;
}
.frm-icon {
position: relative;
}
.frm-icon .eye {
position: absolute;
right: 16px;
top: 51px;
}
.frm-icon .calendar {
position: absolute;
right: 12px;
top: 37px;
width: 20px;
}
.frm-icon .view {
position: absolute;
right: 16px;
top: 40px;
}
.page-tabs {
border-bottom: 2px solid #EFEFEF;
}
.page-tabs ul {
list-style: none;
padding: 0;
margin: 0;
margin-bottom: -2px;
}
.page-tabs ul li {
display: inline-block;
}
.page-tabs ul li a {
display: block;
padding: 6px 12px;
font-size: 14px;
color: #6A6A6A;
text-decoration: none;
font-weight: 500;
border-bottom: 2px solid #EFEFEF;
}
.page-tabs ul li.active a {
color: #CC1717;
border-bottom: 2px solid #CC1717;
}
.page-tabs ul li a:hover {
color: #CC1717;
}
.toggle {
display: flex;
align-items: center;
}
.toggle .form-check {
margin-bottom: 0;
height: auto;
}
.login-wrap {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.login-panel {
position: relative;
z-index: 2;
background: #fff;
margin: 0 auto;
width: 450px;
padding: 30px;
text-align: center;
display: flex;
flex-direction: column;
gap: 24px;
}
.login-panel h3 {
font-size: 24px;
color: #1C1D1F;
}
.login-panel img {
margin: 0 auto;
}
.login-panel .login-logo img {
width: 140px;
}
.login-panel .frm-holder {
text-align: left;
display: flex;
flex-direction: column;
gap: 16px;
}
.login-panel .frm-holder .frm-grp p {
color: #aaa;
font-size: 14px;
margin: 0;
}
.login-panel .frm-holder h3 {
font-size: 18px;
color: #1C1D1F;
margin: 0;
}
.login-panel .btn-holder {
display: flex;
flex-direction: column;
gap: 16px;
}
.verify-grp {
display: flex;
flex-direction: column;
gap: 24px;
}
.verify-grp h3 {
font-size: 20px;
color: #1C1D1F;
margin: 0;
}
.verify-grp p {
font-size: 16px;
color: #333;
margin: 0;
}
.verify-grp p span {
color: #CC1717;
}
.align-items-center {
text-align: center;
}
.align-items-left {
text-align: left;
justify-content: left;
}
.align-items-right {
text-align: right;
justify-content: right;
}
.td-actions {
position: relative;
}
.td-actions .action-grp {
position: absolute;
right: 16px;
top: 16px;
display: none;
}
tr:hover .action-grp {
display: block;
}
.panels {
display: flex;
flex-direction: column;
gap: 16px;
}
.panel-outlined {
border: 1px solid #D1D9E4;
border-radius: 8px;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.panel-solid {
border: 1px solid rgba(0, 0, 0, 0.025);
border-radius: 8px;
padding: 12px 16px;
background: rgba(0, 0, 0, 0.10);
}
.panel-primary {
border: 1px solid rgba(204, 23, 23, 0.15);
border-radius: 8px;
padding: 12px 16px;
background: rgba(204, 23, 23, 0.15);
}
.panel-secondary {
border: 1px solid rgba(108, 117, 125, 0.10);
border-radius: 8px;
padding: 12px 16px;
background: rgba(108, 117, 125, 0.10);
}
.panel-success {
border: 1px solid rgba(9, 193, 15, 0.10);
border-radius: 8px;
padding: 12px 16px;
background: rgba(9, 193, 15, 0.10);
}
.panel-danger {
border: 1px solid rgba(249, 9, 41, 0.10);
border-radius: 8px;
padding: 12px 16px;
background: rgba(249, 9, 41, 0.10);
}
.panel-danger-dashed {
border: 2px dashed rgba(249, 9, 41, 0.15);
border-radius: 8px;
padding: 12px 16px;
}
.panel-warning {
border: 1px solid rgba(255, 136, 0, 0.10);
border-radius: 8px;
padding: 12px 16px;
background: rgba(255, 136, 0, 0.10);
}
.panel-info {
border: 1px solid rgba(62, 127, 201, 0.10);
border-radius: 8px;
padding: 12px 16px;
background: rgba(62, 127, 201, 0.10);
}
.panel-white {
border: 1px solid #fff;
border-radius: 8px;
padding: 12px 16px;
background: #fff;
}
.panel-dark {
border: 1px solid #2E2E30;
border-radius: 8px;
padding: 12px 16px;
background: #2E2E30;
}
.panel-xs {
padding: 4px 12px;
font-size: 14px;
}
.panel-sm {
padding: 6px 12px;
font-size: 14px;
}
.panel-md {
padding: 12px 16px;
}
.panel-group {
border: 1px solid #D1D9E4;
border-radius: 8px;
}
.panel-group .panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
}
.panel-group .panel-header h4 {
margin: 0;
}
.panel-group .panel-header .panel-action {
display: flex;
gap: 16px;
}
.panel-group .panel-item {
padding: 12px 16px;
border-bottom: 1px solid #D1D9E4;
}
.panel-group .panel-item:last-child {
border-bottom: none;
}
.panel-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.panel-body-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.panel-footer {
padding: 16px;
padding-top: 0;
/*border-top: 1px solid #D1D9E4;*/
}
.panel-collapse {
}
.panel-collapse .panel-header {
border-bottom: none;
}
.panel-group .panel-body, .panel-collapse .panel-body {
border-top: 1px solid #D1D9E4;
}
.collapse-rotate {
transform: rotate(180deg);
transition: all ease 0.3s;
}
.label-grp {
display: flex;
flex-direction: column;
gap: 16px;
}
.label-inline {
display: flex;
gap: 8px;
}
.label-inline label {
color: #aaa;
font-size: 14px;
font-weight: 400;
}
.label-inline small {
color: #333333;
font-size: 14px;
font-weight: 600;
}
.label-inline-gap {
display: flex;
gap: 8px;
}
.label-inline-gap label {
color: #aaa;
font-size: 14px;
font-weight: 400;
width: 290px;
}
.label-inline-gap small {
color: #333333;
font-size: 14px;
font-weight: 600;
}
.label-inline-gap small a {
color: #3E7FC9;
text-decoration: none;
}
.label-block {
display: flex;
gap: 8px;
flex-direction: column;
}
.label-block label {
color: #aaa;
font-size: 14px;
font-weight: 400;
display: block;
}
.label-block small {
color: #333333;
font-size: 14px;
font-weight: 600;
display: block;
}
.label-block small a {
color: #3E7FC9;
text-decoration: none;
}
.panel-field {
display: flex;
gap: 4px;
flex-direction: column;
}
.panel-field label {
color: #333;
font-size: 12px;
font-weight: 400;
display: block;
}
.panel-field small {
color: #333;
font-size: 14px;
font-weight: 700;
display: block;
}
.panel-field-right {
display: flex;
gap: 4px;
flex-direction: column;
}
.panel-field-right label {
color: #333;
font-size: 12px;
font-weight: 400;
display: block;
text-align: right;
}
.panel-field-right small {
color: #333;
font-size: 14px;
font-weight: 700;
display: block;
text-align: right;
}
.paragraph-default {
font-size: 14px;
color: #333;
margin: 0;
padding: 0;
}
.paragraph-primary {
font-size: 14px;
color: #CC1717;
margin: 0;
padding: 0;
}
.paragraph-secondary {
font-size: 14px;
color: #6c757d;
margin: 0;
padding: 0;
}
.paragraph-fade {
font-size: 14px;
color: #aaa;
margin: 0;
padding: 0;
}
.text-color-default {
color: #333!important;
}
.text-color-primary {
color: #CC1717!important;
}
.text-color-secondary {
color: #6C757D!important;
}
.text-color-danger {
color: #F90929!important;
}
.modal-header {
padding-bottom: 0;
}
.modal-body .bread {
margin-bottom: 16px;
}
.data-list {
display: flex;
flex-direction: column;
margin-top: 8px;
}
.data-list .data-grp {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #D1D9E4;
}
.data-list .data-grp a {
width: 100%;
color: #333;
font-size: 14px;
padding: 14px 0;
text-decoration: none;
}
.data-check-list {
display: flex;
flex-direction: column;
max-height: 600px;
overflow-y: auto;
position: relative;
}
.data-check-list .data-check-item {
display: flex;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid #D1D9E4;
padding-left: 4px;
}
.data-check-list:last-child {
border-bottom: none;
}
.data-check-list .data-check-item .check-item-grp {
display: flex;
gap: 12px;
align-items: center;
}
.data-check-list .data-check-item .form-check-input {
width: 12px;
height: 12px;
margin-top: 0;
}
.data-check-list .data-check-item label {
color: #333;
font-size: 14px;
}
.data-new {
display: flex;
justify-content: space-between;
padding-top: 14px;
}
.data-check-collapse .data-check-item {
padding-left: 24px;
}
.modal-content-lg {
width: 600px;
}
.link-icon {
font-size: 22px;
color: #CC1717!important;
}
.card-grp {
display: flex;
flex-direction: column;
border-radius: 8px;
border: 1px solid #D1D9E4;
}
.card-grp .card-panel {
border: none;
border-radius: 8px;
}
.card-grp .card-header {
background: #D1D9E4;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.timeline {
display: flex;
flex-direction: column;
gap: 48px;
position: relative; /* added */
}
/* vertical line */
.timeline::before {
content: '';
position: absolute;
top: 16px; /* start slightly below top to match avatar */
bottom: 0;
left: 15px; /* center of the avatar (32px / 2) */
width: 1px;
background: #D1D9E4;
}
.activity-grp {
display: flex;
gap: 12px;
align-items: center;
position: relative;
z-index: 1;
}
.activity-grp .avatar {
width: 32px;
height: 32px;
border-radius: 32px;
overflow: hidden;
}
.activity-grp .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.activity-grp .activity-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.activity-grp .activity-info h4 {
color: #393939;
font-size: 14px;
font-weight: 500;
line-height: 16px;
margin: 0;
padding: 0;
}
.activity-grp .activity-info h4 small {
font-size: 14px;
color: #6a6a6a;
}
.activity-grp .activity-info span {
color: #6A6A6A;
font-size: 12px;
font-weight: 400;
line-height: 12px;
margin: 0;
padding: 0;
}
.w-full {
width: 100%;
}
.tab-panel {
justify-content: space-between;
}
.tab-panel .page-tabs {
width: 100%;
}
.tab-panel button {
width: 110px;
}
.td-fixed-frm {
width: 250px;
padding-right: 0px!important;
}
.td-fixed-frm .form-control {
text-align: right;
}
.label-normal small {
font-weight: 400;
}
.file {
text-decoration: none;
color: #3E7FC9;
font-size: 14px;
}
.file i {
margin-right: 8px;
}
.remove {
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #CC1717;
}
.attach {
margin-top: 16px;
}
.form-check-label {
font-size: 14px;
}
.w-100 {
width: 100px;
}
.w-200 {
width: 200px;
}
.w-300 {
width: 300px;
}
.w-400 {
width: 400px;
}
.w-500 {
width: 500px;
}
/*NEW 10-13*/
.td-label {
font-size: 14px;
color: #333333;
width: 220px;
}
.td-grid {
display: flex;
align-items: center;
justify-content: space-between;
}
.drp-multi {
font-size: 14px;
color: #333;
border: 1px solid #D1D9E4;
padding: 6px 16px;
width: 100%;
border-radius: 0.375rem;
background: #fff;
text-align: left;
}
.drp-multi .selected-text {
color: #333;
font-size: 14px;
}
.drp-multi-menu {
padding: 8px 16px;
width: 100%;
}
.drp-multi-menu li {
padding: 8px 0;
}
.check-item-grp {
display: flex;
gap: 12px;
align-items: center;
}
.drp-multi-menu .check-item-grp .form-check-input {
margin: 0;
}
.drp-multi-menu .check-item-grp label {
width: 100%;
}
.edit-access {
width: 20px;
}
.access-title {
display: flex;
justify-content: space-between;
align-items: center;
}
.access-title h4 {
color: #333;
font-size: 14px;
font-weight: 700;
}
.btn-more {
background: rgba(168, 174, 183, 0.10);
border: 1px solid rgba(168, 174, 183, 0.10);
height: 100%;
width: 32px;
}
.user-item {
display: flex;
gap: 16px;
}
.panel-action .badge {
padding: 7px 12px;
}
/*new 10-29-2025*/
.td-btn {
}
.td-btn a {
margin-left: 8px;
}
.td-btn a:first-child {
margin-left: 0;
}
/*new 11-04-2025*/
.v3 {
width: 290px;
}
.pr0 {
padding-right: 0;
}
.pl0 {
padding-left: 0;
}
.table-fixed {
width: 100%;
border: 1px solid #D1D9E4;
border-radius: 6px;
background: #fff;
overflow: hidden;
}
.table-fixed .table-scroll {
overflow-x: auto;
overflow-y: visible;
width: 100%;
}
.table-fixed table {
border-collapse: collapse;
width: 100%;
min-width: 1000px;
}
.table-fixed th,
.table-fixed td {
padding: 16px;
border-right: 1px solid #D1D9E4;
text-align: left;
white-space: nowrap;
background: #fff;
font-size: 14px;
}
.table-fixed td {
text-align: center;
}
.table-fixed thead th {
position: sticky;
top: 0;
z-index: 0;
font-weight: 400;
color: #333;
}
.table-fixed th:first-child,
.table-fixed td:first-child {
position: sticky;
left: 0;
width: 300px;
min-width: 300px;
max-width: 300px;
background: #fff;
z-index: 1;
box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}
.table-fixed td:first-child {
text-align: left;
}
.table-fixed thead tr {
border-top: none;
}
.table-fixed tr {
border-top: 1px solid #D1D9E4;
}
.table-fixed td:last-child,
.table-fixed th:last-child {
border-right: none;
}
.table-fixed .module {
font-weight: 700;
position: sticky;
}
.table-fixed .tr-lv1 td {
width: 100%;
background: #e9ecef;
position: sticky;
}
/*new 11-25*/
.remove {
margin-left: 8px;
}
.remove i {
color: #F90929;
}
/*new 12-5*/
.table-fixed-2 {
width: 100%;
border: 1px solid #D1D9E4;
border-radius: 6px;
background: #fff;
overflow: hidden;
}
.table-fixed-2 .table-scroll-2 {
overflow-x: auto;
overflow-y: visible;
width: 100%;
}
.table-fixed-2 table {
border-collapse: collapse;
width: 100%;
min-width: 1000px;
}
.table-fixed-2 th,
.table-fixed-2 td {
padding: 16px;
border-right: 1px solid #D1D9E4;
white-space: nowrap;
background: #fff;
font-size: 14px;
}
.table-fixed-2 td {
white-space: wrap;
}
.table-fixed-2 thead th {
top: 0;
z-index: 0;
font-weight: 400;
color: #333;
padding: 16px;
/*border: 1px solid #CACACA;*/
border-bottom: none;
border-top: none;
text-align: center;
position: relative;
}
.table-fixed-2 .col-fix-1:nth-child(1),
.table-fixed-2 .col-fix-1:nth-child(1) {
position: sticky;
left: 0;
width: 300px;
min-width: 300px;
max-width: 300px;
background: #fff;
z-index: 1;
box-shadow: 2px 0 5px rgba(0,0,0,0.05);
border-right: none;
}
.table-fixed-2 .col-fix-1:nth-child(1)::after,
.table-fixed-2 .col-fix-1:nth-child(1)::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 1px;
background: #ccc;
z-index: 5;
}
.table-fixed-2 .col-fix-2:nth-child(2),
.table-fixed-2 .col-fix-2:nth-child(2) {
position: sticky;
left: 300px;
width: 100px;
min-width: 100px;
max-width: 100px;
background: #fff;
z-index: 1;
box-shadow: 2px 0 5px rgba(0,0,0,0.05);
border-right: none;
}
.table-fixed-2 .col-fix-2:nth-child(2)::after,
.table-fixed-2 .col-fix-2:nth-child(2)::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 1px;
background: #ccc;
z-index: 5;
}
.table-fixed-2 .col-fix-3:nth-child(3),
.table-fixed-2 .col-fix-3:nth-child(3) {
position: sticky;
left: 200px;
width: 300px;
min-width: 300px;
max-width: 300px;
background: #fff;
z-index: 1;
box-shadow: 2px 0 5px rgba(0,0,0,0.05);
border-right: none;
}
.table-fixed-2 .col-fix-3:nth-child(3)::after,
.table-fixed-2 .col-fix-3:nth-child(3)::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 1px;
background: #ccc;
z-index: 5;
}
.cell-supplier {
background: rgba(0, 0, 0, 0.10)!important;
width: auto;
}
.table-fixed-2 td:first-child {
text-align: left;
}
.table-fixed-2 th:first-child {
border-left: none;
}
.table-fixed-2 thead tr {
border-top: none;
}
.table-fixed-2 tr {
border-top: 1px solid #D1D9E4;
}
.table-fixed-2 td:last-child,
.table-fixed-2 th:last-child {
border-right: none;
padding-right: 32px;
}
.cell-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.cell-flex span {
font-weight: 700;
}
.cell-supplier-detials {
position: relative;
z-index: 0;
}
.cell-supplier-detials th {
background: #fff!important;
}
.supplier-total-amount {
width: 200px;
min-width: 200px;
max-width: 200px;
}
.table-fixed-2 tfoot {
}
.table-fixed-2 tfoot tr, .table-fixed-2 tfoot td {
border: none;
padding: 8px 16px;
}
.table-fixed-2 tfoot tr:first-child {
border-top: 1px solid #D1D9E4;
}
.table-fixed-2 tfoot tr td:last-child {
padding-right: 16px!important;
}
.table-fixed-2 .amount-payable {
padding-right: 0;
padding-bottom: 16px;
}
.cell-supplier-2 {
background: #ccc!important;
}
.gap-4 {
gap: 4px;
}
.gap-8 {
gap: 8px;
}
.gap-12 {
gap: 12px;
}
.gap-16 {
gap: 16px;
}
.gap-32 {
gap: 32px;
}
.edit-projected {
padding: 12px;
width: 100%;
margin-bottom: 16px;
}
.card-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.card-info label {
color: #1C1D1F;
margin: 0;
padding: 0;
font-size: 14px;
}
.card-info h3 {
color: #393939;
margin: 0;
padding: 0;
font-weight: 700;
}
.card-info-danger {
display: flex;
flex-direction: column;
gap: 4px;
}
.card-info-danger label {
color: #1C1D1F;
margin: 0;
padding: 0;
font-size: 14px;
}
.card-info-danger h3 {
color: #F90929;
margin: 0;
padding: 0;
font-weight: 700;
}
/*img/pdf*/
.pdf-body {
background: #2E2E30;
}
.pdf-holder {
display: flex;
justify-content: center;
align-items: flex-start;
background: #2E2E30;
position: relative;
padding: 0;
padding-top: 78px;
}
/* Header */
.pdf-header {
background: rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
opacity: 1; /* initially shown */
transition: opacity 0.3s ease;
z-index: 10;
}
.pdf-header h3 {
color: #fff;
font-size: 16px;
}
.pdf-header.hide {
opacity: 0;
}
.pdf {
background: white;
width: 8.5in;
min-height: 11in; /* letter size */
padding: 0.7in; /* safe margin */
box-shadow: 0 0 10px rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
margin: 0;
padding: 32px 24px;
}
.landscape-pdf {
background: white;
width: 11in!important;
min-height: 8.5in!important;
height: auto;
padding: 0.7in; /* safe margin */
box-shadow: 0 0 10px rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
margin: 0;
padding: 32px 24px;
}
.pdf-content {
font-family: Arial, sans-serif;
font-size: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.letterhead {
display: flex;
justify-content: space-between;
align-items: center;
}
.letterhead-logo img {
width: 180px;
}
.letterhead-details {
display: flex;
justify-content: right;
flex-direction: column;
}
.letterhead-details h4 {
color: #2E2E30;
font-size: 16px;
font-weight: 700;
text-align: right;
}
.letterhead-details p {
color: #6a6a6a;
font-size: 12px;
text-align: right;
margin: 0;
}
.letterhead-details span {
text-align: right;
}
.letterhead-details span small {
color: #6a6a6a;
font-size: 12px;
}
.pdf-title {
}
.pdf-title h4 {
text-transform: uppercase;
font-weight: 700;
margin: 0;
padding: 0;
font-size: 18px;
color: #2E2E30;
}
.pdf-title h4 span {
text-transform: capitalize;
color: #aaa;
font-weight: 400;
}
.list-grp {
}
.list-grp .borderless {
border-radius: 8px;
border: 1px solid #D1D9E4;
}
.list-grp .borderless table {
width: 100%;
}
.list-grp .borderless table thead tr {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.list-grp .borderless table thead tr th {
padding: 2px 12px;
font-size: 12px;
background: #fff;
border: 1px solid #D1D9E4;
/*border-bottom: none;*/
border-top: none;
text-align: center;
}
.list-grp .borderless table thead tr th:first-child {
border-top-left-radius: 7px;
border: none;
border-bottom: 1px solid #D1D9E4;
}
.list-grp .borderless table thead tr th:last-child {
border-top-right-radius: 7px;
border: none;
border-bottom: 1px solid #D1D9E4;
}
.list-grp .borderless table tbody tr {
}
.list-grp .borderless table tbody tr td {
padding: 0 12px;
color: #333;
font-size: 12px;
}
.list-grp .borderless table tbody tr td:first-child {
border-left: none;
}
.list-grp .borderless table tbody tr td:last-child {
border-right: none;
}
.list-grp .borderless table tbody tr:first-child td {
border-bottom: none;
padding-top: 8px;
}
.list-grp .borderless table tbody tr:last-child td {
border-bottom: none;
padding-bottom: 4px;
}
.list-grp .borderless table tbody tr td a {
display: inline-block;
text-decoration: none;
color: #3E7FC9;
}
.list-grp .borderless table tbody tr td .badge-xs {
font-size: 12px;
}
.list-grp {
}
.list-grp .bordered-sm {
border-radius: 8px;
border: 1px solid #D1D9E4;
}
.list-grp .bordered-sm table {
width: 100%;
}
.list-grp .bordered-sm table thead tr {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.list-grp .bordered-sm table thead tr th {
padding: 4px 12px;
font-size: 12px;
background: #fff;
border: 1px solid #D1D9E4;
/*border-bottom: none;*/
border-top: none;
text-align: center;
}
.list-grp .bordered-sm table thead tr th:first-child {
border-top-left-radius: 7px;
border: none;
border-bottom: 1px solid #D1D9E4;
}
.list-grp .bordered-sm table thead tr th:last-child {
border-top-right-radius: 7px;
border: none;
border-bottom: 1px solid #D1D9E4;
}
.list-grp .bordered-sm table tbody tr {
}
.list-grp .bordered-sm table tbody tr td {
padding: 4px 12px;
color: #333;
font-size: 12px;
border: 1px solid #D1D9E4;
}
.list-grp .bordered-sm table tbody tr td:first-child {
border-left: none;
}
.list-grp .bordered-sm table tbody tr td:last-child {
border-right: none;
}
.list-grp .bordered-sm table tbody tr:first-child td {
border-bottom: none;
}
.list-grp .bordered-sm table tbody tr:last-child td {
border-bottom: none;
}
.list-grp .bordered-sm table tbody tr td a {
display: inline-block;
text-decoration: none;
color: #3E7FC9;
}
.list-grp .bordered-sm table tbody tr td .badge-xs {
font-size: 12px;
}
.pdf-subtotal td {
padding-top: 12px!important;
font-weight: 700;
}
.pdf-total td {
font-weight: 700;
}
.pdf-content hr {
margin: 0;
}
.pdf-total-amount {
font-size: 14px;
}
.pdf-discount td {
padding-bottom: 8px!important;
}
.pdf-total-amount td {
padding-top: 4px!important;
border-top: 1px solid #D1D9E4;
font-weight: 700;
font-size: 14px;
}
.pdf-details {
display: flex;
justify-content: space-between;
/*align-items: center;*/
}
.pdf-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.pdf-list-item {
display: flex;
flex-shrink: 0;
}
.pdf-list-item label {
color: #333;
width: 150px;
flex-shrink: 0;
font-weight: 700;
font-size: 12px;
}
.pdf-list-item span {
color: #333;
max-width: 300px;
font-size: 12px;
}
.approvals {
border: 1px solid #D1D9E4;
border-radius: 7px;
display: flex;
}
.approvals .approvals-item {
display: flex;
flex-direction: column;
border-right: 1px solid #D1D9E4;
width: 100%;
}
.approvals .approvals-item:last-child {
border: none;
}
.approvals .approvals-item h4 {
padding: 6px 12px;
border-bottom: 1px solid #D1D9E4;
font-size: 12px;
font-weight: 700;
margin: 0;
color: #333;
}
.approvals .approvals-item .approver-details {
/*height: 70px;
display: flex;
flex-direction: column;
justify-content: space-between;*/
}
.approvals .approvals-item .approver-details h5 {
font-size: 14px;
color: #333;
text-align: center;
padding: 8px;
font-weight: 700;
}
.approvals .approvals-item .approver-details h5 small {
display: block;
color: #6a6a6a;
font-weight: 400;
}
.approvals .approvals-item span {
font-size: 10px;
color: #333;
text-align: center;
padding: 4px 0;
border-top: 1px solid #D1D9E4;
}
.pdf-danger {
color: #F90929!important;
}
.pdf-note {
padding: 8px 12px;
border: 1px solid #D1D9E4;
border-radius: 7px;
display: flex;
flex-direction: column;
gap: 8px;
}
.pdf-note h4 {
font-size: 12px;
margin: 0;
padding: 0;
font-weight: 700;
}
.pdf-note ol {
margin: 0;
padding: 0;
padding-left: 10px;
}
.pdf-note ol li {
color: #333;
font-size: 10px;
}
.pdf-note ol li span {
}
.pdf-note-nm {
padding: 14px;
border: 1px solid #D1D9E4;
border-radius: 7px;
display: flex;
flex-direction: column;
gap: 8px;
}
.pdf-note-nm h4 {
font-size: 14px;
margin: 0;
padding: 0;
font-weight: 700;
}
.pdf-note-nm ol {
margin: 0;
padding: 0;
padding-left: 10px;
}
.pdf-note-nm ol li {
color: #333;
font-size: 11px;
font-style: italic;
}
.pdf-note-nm ol li span {
}
.pdf-outlined {
padding: 8px 12px;
}
.pdf-footer {
display: flex;
align-items: center;
justify-content: space-between;
text-align: center;
}
.pdf-footer span {
text-align: center;
color: #6a6a6a;
font-size: 10px;
}
.br {
border-right: 1px solid #D1D9E4!important;
}
.page-break {
break-before: page;
}
.pdf-supplier {
display: flex;
gap: 4px;
justify-content: center;
align-items: center;
padding-top: 4px;
padding-bottom: 4px;
position: relative;
}
.pdf-supplier h4 {
font-size: 12px;
font-weight: 700;
margin: 0;
text-align: left;
}
.pdf-supplier .pdf-supplier-details {
display: flex;
align-items: center;
gap: 4px;
}
.pdf-supplier .pdf-supplier-details span {
font-size: 12px;
color: #6a6a6a;
}
.pdf-supplier .pdf-supplier-details span:first-child {
border-right: 1px solid #D1D9E4;
padding-right: 4px;
}
.item-total-amount {
border-right: 1px solid #D1D9E4;
}
.pdf-add td, .pdf-less td {
font-weight: 700;
}
.pdf-supplier .check {
width: 14px;
position: absolute;
right: 0px;
}
.supplier-more-details th {
border-bottom: 1px solid #D1D9E4!important;
padding: 8px 16px!important;
}
.approver-sign {
padding: 12px;
padding-bottom: 0;
text-align: center;
margin-bottom: -20px;
}
.approver-sign img {
width: 100px;
}
@media screen and (max-width: 768px) {
.login-panel, .md-panel {
width: 100%;
box-shadow: none;
}
}
@media screen and (max-width: 481px) {
.login-panel, .md-panel {
padding: 30px 15px;
}
}