:root {
    --color-primary: #1c1f63;
    --color-navbar: #1c1f63;
    --color-navbar-button: #1c1f63;
    --color-sidebar-header: #1c1f63;
    --color-card-line: #1c1f63;
    --color-qs-item-hover: #1c1f63;
    --color-table-header: #1c1f63;
    --color-table-link: #1c1f63;
    --color-pagination-active: #1c1f63;
    --color-modal-border: #1c1f63;
    --color-tab-nav-active: #1c1f63;
    --color-tab-page-border: #1c1f63;
    --color-caption-border: #1c1f63;
    --color-sidebar: #eee;
    --color-sidebar-button: #eee;
    --color-sidebar-button-hover: #fefefe;
    --color-sidebar-button-text: #111;
    --color-icon: #eee;
    --color-icon-alt: #111;
    --color-breadcrumb: #fafafa;
    --color-modal: #fafafa;
    --color-breadcrumb-text: #111;
    --color-text: #111;
    --color-tab-nav-text: #111;
    --color-text-alt: #eee;
    --color-modal-text: #111;
    --color-input-text: #111;
    --color-pagination-text: #111;
    --color-caption-text: #111;
    --color-table-row-text: #111;
    --color-chart-label: #111;
    --color-chart-grid: #111;
    --color-tooltip: #111;
    --color-table-row-empty-text: #111;
    --color-table-row-hover: #fefefe;
    --color-background: #eee;
    --color-background-alt: #333;
    --color-caption: #eee;
    --color-tooltip-text: #eee;
    --color-pagination: #eee;
    --color-card: #fafafa;
    --color-qs-item: #fafafa;
    --color-qs-item-alt: #fafafa;
    --color-card-hover: #eee;
    --color-table-row: #fafafa;
    --color-tab-page: #fafafa;
    --color-tab-nav: #fafafa;
    --color-tab-nav-hover: #eee;
    --color-table-row-alt: #fafafa;
    --color-input: #eee;
    --color-input-alt: #eee;
    --color-shadow: #bbb;
    --color-button-hover: #eee;
    --color-button-text: #eee;
    --color-gray: #b9b9b9;
    --size-line-height: 20px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


.gs-grid-label,
.gs-table,
.gs-table th,
.gs-page,
.gs-text-input,
.gs-input,
.gs-qs-item,
.gs-form-label,
.gs-pagination,
.gs-checkbox,
.gs-info-tooltip,
.gs-caption:hover:after,
.gs-dashboard-card h1,
.gs-dashboard-card p {
    font-size: 11px;
}

.gs-grid-label.prime,
.gs-grid-label.sub,
.gs-buttonbar-button,
.gs-sidebar-button,
.gs-breadcrumb-container,
.gs-greetings,
.gs-navbar-button,
.gs-modal-header,
.gs-icon.fas,
.gs-button,
.gs-navbar-button,
.gs-dashboard-value,
.gs-card-button.fas,
.gs-tab-nav-container {
    font-size: 14px;
}

.gs-grid-label,
.gs-grid-label.sub {
    margin: 0px;
}

.gs-buttonbar-button,
.gs-navbar-button,
.gs-table-button {
    padding: 5px;
}

.gs-button {
    padding: 0 5px;
}


.gs-caption:hover:after {
    white-space: pre-line;
}


.gs-flex-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gs-input-group.multi-4 {
    -ms-grid-columns: 40% 1fr 1fr 1fr 1fr;
    grid-template-columns: 40% 1fr 1fr 1fr 1fr;
}


.gs-table th.field-desktop {
    display: block;
}

.gs-popup-button p {
    color: var(--color-breadcrumb-text);
}

.gs-popup-button>.gs-icon {
    background-image: url("../../gemstone_core/icon/default/close_black.png");
}

.gs-popup-button.warning p {
    color: var(--color-qs-item);
}

.gs-popup-button.warning>.gs-icon {
    background-image: url("../../gemstone_core/icon/default/close.png");
}


.mg-radio-container {
    display: grid;
    gap: 10px;
    margin: 20px 0;
    grid-template-columns: repeat(4, 1fr);
}

.mg-radio-option {
    position: relative;
    z-index: 2;
}

.mg-radio-option.panel {
    position: absolute;
    color: var(--color-text);
    display: none;
}

.mg-radio-option.panel.top {
    top: 10%;
    left: calc(50% - 20px);
}

.mg-radio-option.panel.bottom {
    bottom: 10%;
    left: calc(50% - 20px);
}

.mg-radio-option.panel.right {
    right: 10%;
    top: calc(50% - 10px);
}

.mg-radio-option.panel.left {
    left: 10%;
    top: calc(50% - 10px);
}

.mg-radio-option input[type="radio"] {
    display: none;
}

.mg-radio-option-label {
    display: flex;
    padding: 10px 20px;
    border: 2px solid var(--color-primary);
    border-radius: 5px;
    background-color: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-family: sans-serif;
    transition: all 0.2s ease;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.mg-radio-option-label.panel {
    color: black;
}

.mg-radio-option input[type="radio"]:checked+label {
    background-color: var(--color-primary);
    color: var(--color-text-alt);
}

.mg-radio-option label:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.mg-checkbox-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 0;
    flex-direction: column;
}

.mg-checkbox-option {
    white-space: nowrap;
}

.mg-checkbox-option input[type="checkbox"] {
    display: none;
}

.mg-checkbox-item {
    display: grid;
    grid-template-columns: 1fr 0.2fr;
    gap: 5px;
    width: 50%;
}

.mg-checkbox-option label {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid var(--color-primary);
    border-radius: 5px;
    background-color: transparent;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

.mg-checkbox-option input[type="checkbox"]:checked+label {
    background-color: var(--color-primary);
    color: var(--color-text-alt);
}

.mg-checkbox-option label:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.mg-print-container {
    display: grid;
    font-size: 1rem;
    gap: 10px;
    min-width: 0px;
    min-height: 0px;
}

.mg-print-sheet-image {
    width: 50%;
    align-self: center;
}

.mg-print-sheet-title {
    font-size: 2rem;
    text-transform: capitalize;
    font-weight: 1000;
}

.mg-print-sheet-subtitle {
    font-size: 1.5rem;
    text-transform: capitalize;
    font-weight: 1000;
}

.mg-print-label {
    text-transform: capitalize;
    font-weight: 1000;
    white-space: nowrap;
}

.mg-print-panel-wrapper {
    min-height: 600px;
    padding: 20px;
}

.mg-print-text {
    white-space: nowrap;
}

.mg-print-sheet-header-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    min-width: 0;
}

.mg-print-client-label {
    display: inline-block;
    min-width: 70px;
}

.mg-print-quote-info-container {}

.mg-print-quote-info-table {
    width: 100%;
    font-size: 1rem;
    border-collapse: collapse;
}

.mg-print-quote-info-table thead {
    text-align: center;
}

.mg-print-quote-info-table td {
    padding: 0 5px;
    border: 1px solid var(--color-chart-grid);
}

.mg-print-quote-aggreement {
    font-size: 0.9rem;

}

.mg-print-quote-label {
    width: 10%;
}

.mg-print-quote-input {
    width: 20%;
}

/* .mg-print-quote-info-body>div:second-child {
    border-left: none;
} */

.mg-print-sheet-header-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mg-print-sheet-header-label {
    display: flex;
}

.mg-print-sheet-header-label label {
    text-transform: capitalize;
    font-weight: 1000;
}

.mg-print-sheet-body-container {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 10px;
    min-width: 0;
}

.mg-print-sheet-panel-container {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.mg-print-sheet-info-container {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mg-print-sheet-info-label {
    display: flex;
    gap: 10px;
    white-space: nowrap;
}

.mg-print-sheet-info-label label {
    text-transform: capitalize;
    font-weight: 1000;
}

.mg-print-table {
    width: 100%;
    font-size: 1rem;
    border-collapse: collapse;
    margin-bottom: var(--gap-10);
}


.mg-print-table+.mg-print-table {
    margin-top: -1px;
}

.mg-print-table th {
    border: 1.5px solid var(--color-chart-grid);
    padding: 5px;
    text-align: left;
    font-weight: bolder;
    white-space: normal;
    color: var(--color-chart-grid);
}

.mg-print-table td {
    border: 1.5px solid var(--color-chart-grid);
    white-space: normal;
    padding: 5px;
}

.mg-print-table-row-main {
    background-color: var(--color-company);
    font-weight: 1000;
}

.mg-print-table-cell-center {
    text-align: center;
}

.mg-print-table-row-colly {
    font-weight: 1000;
    text-transform: uppercase;
}

.mg-print-table-row-empty {
    height: 50px;
}

.mg-print-payment-info-container {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.mg-print-measurement-list {
    margin: 0px;
    padding-inline-start: 20px;
    ;
}

.mg-print-toc-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 28px 40px;
    counter-reset: section;
}


/* Title */
.mg-print-toc-title {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0 0 18px;
}

.mg-print-toc-table {}

.mg-print-toc-table.break-avoid {
    page-break-inside: avoid;
}

/* Two column layout */
.mg-print-toc-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

/* Section heading (1. THE CONTRACT) */
.mg-print-toc-section {
    margin-bottom: 18px;
    counter-increment: section;
}

.mg-print-toc-section-title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 10px 0 8px;
    position: relative;
    padding-left: 0;
}

.mg-print-toc-section-title::before {
    content: counter(section) ". ";
    font-weight: bold;
    margin-right: 6px;
}

/* Hierarchical decimal list: 1, 1.1, 1.1.1 */
.mg-print-toc-ol,
.mg-print-toc-ol ol {
    /* tingkat 1 dan nested ol */
    counter-reset: sub;
    /* mulai ulang counter sub untuk setiap ol */
    list-style: none;
    margin: 0;
    padding-left: 22px;
}

.mg-print-toc-ol li {
    counter-increment: sub;
    margin: 6px 0;
    text-align: justify;
    position: relative;
}

.mg-print-toc-ol li::before {
    content: counter(section) "." counters(sub, ".") ". ";
    font-weight: bold;
    position: absolute;
    left: -25px;
    /* sesuaikan indent */
    width: 18px;
    display: inline-block;
}

.mg-print-quote-image {
    width: 30%;
}

/* Fine tweaks to resemble sample */
.mg-print-toc-note {
    margin-top: 6px;
}

.mg-print-toc-tight li {
    margin: 4px 0;
}

.mg-print-page-break-before {
    page-break-before: always;
}

@media print {
    .mg-print-page-break {
        page-break-after: always;
    }

}

@media screen and (max-width: 425px) {
    .gs-table th.field-desktop {
        display: none;
    }

    .mg-panel-container {
        height: 700px;
        width: 700px;
    }
}

.gs-icon.alt.fas {
    color: var(--color-icon-alt);
}

.gs-breadcrumb-back-button {
    background-image: url("../../gemstone_core/icon/default/arrow_black.png");
}

.gs-icon.delete-alt {
    background-image: url("../../gemstone_core/icon/default/delete_black.png");
}

.gs-icon.edit-alt {
    background-image: url("../../gemstone_core/icon/default/edit_black.png");
}

.gs-icon.add-thin-alt,
.gs-icon.add-alt {
    background-image: url("../../gemstone_core/icon/default/add_black.png");
}

.gs-pagination-button:hover {
    background-color: var(--color-pagination-active);
    color: var(--color-caption);
}

.gs-print-background {
    background-color: var(--color-background-alt);
}

.gs-login-button.alt {
    color: var(--color-primary);
    background-color: var(--color-background);
}

.gs-login-button.alt:hover {

    background-color: var(--color-shadow);
}

.gs-login-button.hover {
    background-color: var(--color-input);

}

.gs-table-link.alt {
    color: var(--color-input);
}

.gs-message {
    color: var(--color-text-alt);
    background-color: var(--color-primary);
    font-family: gs;
    padding: 5px;
    opacity: 1;
    -webkit-transition: all 0.375s ease;
    -o-transition: all 0.375s ease;
    transition: all 0.375s ease;
    font-size: 1.5rem;
}

.gs-login-form {
    background-color: var(--color-primary);
    border: solid 2px var(--color-card);
}

.gs-login-error {
    color: var(--color-input);
}