.box-title {
    position: absolute;
    top: 1rem;
    left: 0rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ===== Step tabs (STEP 1 / STEP 2) ===== */
/* Only the .active step view is shown; grid props come from the `section` rule */
.step-view {
    display: none;
}

.step-view.active {
    display: grid;
}

/* Tab buttons sit at the top-left of the middle layout panel (card-10) */
.step-tabs {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    display: flex;
    gap: 0.3rem;
}

.btn-step {
    background: #3a4140;
    color: #b4b4b4;
    border: 1px solid #5a5f5e;
    border-radius: 0.25rem;
    padding: 0.15rem 0.6rem;
    font-family: "Kanit Medium";
    font-size: 0.75rem;
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s;
}

.btn-step:hover:not(.active) {
    background: #4a5554;
    color: #ffffff;
}

.btn-step.active {
    background: #4caf50;
    color: #ffffff;
    border-color: #4caf50;
}

/* =========================================================================
   STEP 2 machine layout (card-10) — same concept as STEP 1:
   a left "fuel tank line" column + a right machine-grid area.
   Reuses .card-icon-robot / .card-name / .icon-machine and the global
   [data-status] colour rules so it behaves identically to STEP 1.
   ========================================================================= */
.s2-wrap {
    width: 96%;
    height: 80%;
}

.s2-card-layout {
    display: grid;
    grid-template-columns: 20% auto;
    grid-gap: 1rem;
    height: 100%;
}

/* ----- Left: fuel tank line column ----- */
.s2-left {
    background: #353837;
    border: 0.3rem dashed #464948;
    border-radius: 0.2rem;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.s2-line-box {
    flex: 1;
    background: #464948;
    border: 0.3rem dashed #2f3231;
    border-radius: 0.2rem;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.6rem;
}

.s2-station {
    width: 100%;
    height: 100%;
    padding: 0.6rem 0.2rem;
    text-align: center;
    background: #9c9c9c;
    border: 0.3rem solid #b4b4b4;
    border-radius: 0.3rem;
    color: #ffffff;
    font-family: "Kanit Medium";
    font-size: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.s2-line-label {
    background: #464948;
    border: 2px solid #2f3231;
    border-radius: 0.2rem;
    text-align: center;
    color: #ffffff;
    font-family: "Kanit Medium";
    font-size: 0.75rem;
    padding: 0.5rem;
}

/* ----- Right: 4 station groups ----- */
.s2-right {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.8rem;
    height: 100%;
}

/* Dashed conveyor connectors between Fine Boring <-> Quality Gate groups */
/* the LEFT box is the anchor */
.mlx-pair {
    /* or a specific class on the FB3 head */
    position: relative;
}

.mlx-pair::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%; /* start exactly at this box's right edge */
    width: 0.8rem; /* = the gap to the next box */
    border-top: 0.2rem dashed #ffffff;
    transform: translateY(-50%); /* vertically center on the box */
}

.s2-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
}

.s2-group-head {
    text-align: center;
    padding: 0.5rem 0.3rem;
    min-height: 3rem;
    background: #9c9c9c;
    border: 0.3rem solid #b4b4b4;
    border-radius: 0.3rem;
    color: #ffffff;
    font-family: "Kanit Medium";
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.s2-group-body {
    flex: 1;
    min-height: 0;
    background: #464948;
    border: 0.2rem dashed #2f3231;
    border-radius: 0.2rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 6-machine grid (Quality Gate groups) */
.s2-mc-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 0.5rem;
    min-height: 0;
}

/* Fine Boring group: same 3-row grid as Quality Gate, so every row is equal
   height. Single machine spans the top row; the laser box spans the bottom. */
.s2-fb-single {
    grid-column: 1 / -1;
}

/* higher specificity so these win over the generic .s2-mc rules below */
.s2-fb-grid .s2-fb-single .card-icon-robot,
.s2-fb-grid .s2-fb-single .card-name {
    width: 48%;
}

.s2-fb-grid .s2-laser {
    grid-column: 1 / -1;
}

.s2-laser {
    text-align: center;
    background: #9c9c9c;
    border: 0.3rem solid #b4b4b4;
    border-radius: 0.3rem;
    color: #ffffff;
    font-family: "Kanit Medium";
    font-size: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Machine cell shared across the right side: square icon box + name pill */
.s2-mc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 0;
}

.s2-mc .card-icon-robot {
    width: 100%;
    aspect-ratio: 1 / 1;
    flex: none;
    padding: 0;
}

.s2-mc .icon-machine {
    width: 58%;
    margin: 0rem;
}

.s2-mc .card-name {
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-family: "Kanit Medium";
    font-size: 0.6rem;
    padding: 0.15rem 0.2rem;
    background: #5b605f;
    border-radius: 0.2rem;
}

/* =========================================================================
   Combined machine-layout page (machinelayout route): STEP 1 + STEP 2 shown
   as ONE continuous floor, left -> right. Reuses the .s2-* leaf components
   (.s2-group / .s2-group-head / .s2-group-body / .s2-mc-grid / .s2-mc /
   .s2-station / .s2-laser / .card-icon-robot / .card-name).
   ========================================================================= */
.ml-page {
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

.ml-board {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    background: #2f3231;
    border-radius: 0.3rem;
    padding: 3.2rem 1rem 1rem;
}

/* Title (top-left) + legend (top-right) */
.mlx-title {
    position: absolute;
    top: 0.9rem;
    left: 1rem;
    color: #ffffff;
    font-family: "Kanit Medium";
    font-size: 1.4rem;
    margin: 0;
}

.mlx-legend {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.9rem;
}

.mlx-legend p {
    margin: 0;
    color: #ffffff;
    font-family: "Kanit Medium";
    font-size: 0.8rem;
}

.mlx-legend p i {
    margin-right: 0.2rem;
}

/* Legend colours (the global .status-* rules are scoped to .box-footer) */
.mlx-legend .status-off {
    color: var(--status-off);
}
.mlx-legend .status-running {
    color: var(--status-running);
}
.mlx-legend .status-idle {
    color: var(--status-idle);
}
.mlx-legend .status-alarm {
    color: var(--status-alarm);
}

/* The floor: a horizontal row of vertical "units". Sizes to its content and is
   vertically centered in the board (see .ml-board justify-content) so leftover
   space is split top/bottom rather than dumped at the bottom. */
.mlx-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    margin-top: 5rem;
}

.mlx-header {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.3rem;
    width: 100%;
    gap: 30rem;
    position: relative;
    height: 2rem;
}

.mlx-header .mlx-cap {
    position: absolute;
    top: 0;
}

/* now each one moves on its own */
.mlx-header .mlx-cap:nth-child(1) {
    left: 33.5%;
    top: -2rem;
}
.mlx-header .mlx-cap:nth-child(2) {
    left: 71.5%;
    top: -2rem;
}

.mlx-floor {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
    width: 100%;
}

.mlx-unit {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    flex: 1 1 0;
}

/* The conveyor unit holding two quality-gate groups gets double the width */
.mlx-unit-pair {
    flex: 2 1 0;
}

/* Fuel-tank columns reuse the dashed .s2-left look; slightly narrower share */
.mlx-ft {
    flex: 0.85 1 0;
    min-width: 0;
}

/* Cap row above the frame-body groups: either a conveyor label or an
   invisible spacer, so every group head lines up on the same row. */
.mlx-cap {
    height: 2rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Conveyor label: a centered pill sitting above the group(s). Its colour
   follows [data-status] (WBS running -> solid green; WBS2 no feed -> dashed grey). */
.mlx-cap-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 0.25rem 0.7rem;
    background: #353837;
    border: 0.15rem dashed #5a5f5e;
    border-radius: 0.3rem;
    color: #ffffff;
    font-family: "Kanit Medium";
    font-size: 0.8rem;
    white-space: nowrap;
    min-height: 3rem;
}

.mlx-cap-spacer {
    visibility: hidden;
}

/* Dashed conveyor connector at the bottom of a frame-body / fine-boring unit */
.mlx-conv-out {
    flex: none;
    height: 0;
    margin-top: 0.6rem;
    border-top: 0.22rem dashed #ffffff;
}

/* Fuel Tank #1 "Automation Line": a machine card with the robot icon */
.mlx-ft-machine {
    min-height: 10.6rem;
    padding: 0.5rem 0.3rem 0.4rem;
    font-size: 0.78rem;
}

.mlx-ft-machine .icon-machine {
    width: 36%;
}

.mlx-ft-machine .card-machine-name-refactor {
    font-size: 0.78rem;
}

/* Two quality-gate groups sharing one conveyor label; height is content driven */
.mlx-pair {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-height: 0;
}

/* Groups fill the width of their unit; height is driven by their content */
.mlx-group {
    min-width: 0;
}

/* Inside a pair, the two groups split the pair width equally (width only;
   height stays content driven because the pair is a row, align-items flex-start) */
.mlx-pair > .s2-group {
    flex: 1 1 0;
}

/* 8-machine quality gates need 4 rows (vs the default 3) */
.mlx-grid-8 {
    grid-template-rows: repeat(4, 1fr);
}

/* ----- Item sizing (scoped to this page only) -----
   Normal square machine cards sized to the (full-width) column. Groups stay
   content-height; the whole floor is vertically centered in the board. */
/* Robot icon sized like the Figma (padding around it, not filling the card) */
.mlx-floor .s2-mc .icon-machine {
    width: 58%;
}

.mlx-floor .s2-mc .card-name {
    font-size: 0.72rem;
    padding: 0.2rem 0.2rem;
}

.mlx-floor .s2-group-head {
    font-size: 0.8rem;
    min-height: 3rem;
}

.mlx-floor .s2-station {
    height: auto;
    min-height: 5rem;
    padding: 0.7rem 0.3rem;
    font-size: 0.8rem;
}

.mlx-floor .s2-laser {
    font-size: 0.85rem;
    min-height: 4.5rem;
}

.mlx-floor .s2-line-label {
    font-size: 0.8rem;
}

/* Invisible host input for the chart period datepicker popup */
.chart-period-input {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.box-title p {
    font-family: "Kanit Medium";
    color: #ffffff;
    margin: 0rem;
    font-size: 1.5rem;
}

.box-footer {
    position: absolute;
    bottom: 1rem;
    left: 0rem;
    width: 100%;
    display: flex;
    justify-content: start;
    padding: 0rem 1rem;
}

.box-footer p {
    font-family: "Kanit Medium";
    color: #ffffff;
    margin: 0rem;
    margin-right: 0.8rem;
    font-size: 1.1rem;
}

.box-footer p i {
    margin-right: 0.2rem;
}

.card-layout {
    display: grid;
    grid-template-areas: "layout-1 layout-2";
    grid-template-columns: 30% 70%;
    height: 100%;
    grid-gap: 1rem;
}

.layout-1 {
    grid-area: layout-1;
    background: #353837;
    border: 0.3rem dashed #464948;
    padding: 1rem 2.5rem;
    display: flex;
    flex-direction: column;
}

.layout-1 .box-card-1 {
    width: 100%;
    background: #464948;
    border: 0.3rem dashed #2f3231;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    display: flex;
    align-content: start;
    flex-direction: column;
}

.layout-1 .box-card-2 {
    width: 100%;
    height: 8%;
    background: #464948;
    border: 2px solid #2f3231;
    text-align: center;
    color: #ffffff;
    font-family: "Kanit Medium";
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.layout-2 {
    grid-area: layout-2;
    position: relative;
    display: flex;
    justify-content: center;
}

.layout-2::before {
    content: "";
    position: absolute;
    bottom: 0rem;
    width: 65%;
    height: 83%;
    border: 0.2rem dashed #ffffff;
}

.layout-2 .card-box-machine {
    position: absolute;
    width: 30%;
    height: 70%;
    border: 0.2rem dashed #2f3231;
    background: #464948;
    bottom: 1rem;
}

.layout-2 .card-box-machine:nth-child(5) {
    left: 1rem;
}

.layout-2 .card-box-machine:nth-child(6) {
    right: 1rem;
}

.layout-2 .card-ft {
    position: absolute;
    width: 25%;
    height: 12%;
    background: #9c9c9c;
    border: 0.3rem solid #b4b4b4;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-family: "Kanit Medium";
    /* font-size: 1rem; */
    font-size: 12px;
}

.layout-2 .card-ft:nth-child(3) {
    left: 1.7rem;
    top: 11%;
}

.layout-2 .card-ft:nth-child(4) {
    right: 1.7rem;
    top: 11%;
}

.hide-border {
    position: absolute;
    width: 100%;
    left: 0rem;
    top: 20%;
    background: #2f3231;
    height: 2rem;
}

.header-card {
    width: 100%;
    height: 1.7rem;
    padding: 0rem;
    margin: 0rem;
}

.col-judul {
    flex: 0 0 auto;
    width: 75%;
    display: flex;
    justify-content: start;
    padding: 0rem;
}

.col-40 {
    flex: 0 0 auto;
    width: 40%;
    display: flex;
    justify-content: start;
    padding: 0rem;
}

.col-50 {
    flex: 0 0 auto;
    width: 50%;
    display: flex;
    justify-content: start;
    padding: 0rem;
}

.col-60 {
    flex: 0 0 auto;
    width: 60%;
    display: flex;
    justify-content: start;
    padding: 0rem;
}

.col-40 p,
.col-50 p,
.col-60 p,
.col-judul p {
    font-family: "Kanit Medium";
    color: #ffffff;
    font-size: 1rem;
    margin: 0rem;
}

.col-50 span {
    font-family: "Kanit Medium";
    color: #a9a9a9;
    font-size: 0.9rem;
    margin: 0rem;
}

.col-judul a {
    width: 1.7rem;
    height: 1.7rem;
    color: #ffffff;
    font-size: 1.1rem;
    background: #4e4f4e;
    text-align: center;
    border-radius: 0.3rem;
    margin-right: 0.5rem;
}

.col-select {
    flex: 0 0 auto;
    width: 25%;
    display: flex;
    justify-content: end;
    padding: 0rem;
}

.col-select .dropdown {
    width: 100%;
}

.btn-dropdown {
    border: 1px solid #ffffff;
    color: #ffffff;
    border-radius: 0.1rem;
    background: #3c3c3c;
    font-family: "Kanit Medium";
    font-size: 1rem;
    width: 100%;
    padding: 0rem 0.5rem;
}

.show .btn-dropdown,
.btn-dropdown:hover,
.btn-dropdown:focus {
    background: #ffffff;
    color: #3c3c3c;
}

.show .dropdown-menu {
    display: block !important;
}

.dropdown-menu {
    background: #3c3c3c;
    border: 1px solid #ffffff;
    border-radius: 0.2rem;
}

.dropdown-item {
    color: #ffffff;
    font-family: "Kanit Medium";
    font-size: 1rem;
}

.card-1 figure div,
.card-2 figure div,
.card-3 figure div {
    width: 100%;
    height: 26vh;
}

.highcharts-grid.highcharts-yaxis-grid path {
    stroke: #3c3e3d;
}

.form-control.style-costum {
    background: #474848;
    border: 1px solid #474848;
    border-radius: 0.2rem;
    text-align: center;
    color: #ffffff;
    font-family: "Kanit Medium";
    font-size: 1.4rem;
    padding: 0rem;
}

.costum .input-group-text {
    padding: 0rem 0.5rem;
    background: #3c3c3c;
    border: 1px solid #878787;
    color: #878787;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 0.2rem;
    height: 1.7rem;
}

.costum .input-group-text:hover,
.costum .input-group-text:focus {
    background: #878787;
    color: #3c3c3c;
}

.costum .form-control {
    font-family: "Kanit Light";
    font-size: 1rem;
    background: #3c3c3c;
    color: #878787;
    border: 1px solid #878787;
    height: 1.7rem;
}

.mrg-r {
    margin-right: 0.5rem !important;
}

.pdg-r {
    padding-right: 0.5rem !important;
}

.select2-dropdown.select2-dropdown--below {
    border: 1px solid #878787 !important;
    background: #3c3c3c;
    color: #ffffff;
}

.select2-container--default .select2-results__option--selected {
    color: #3c3c3c;
}

.select2-container--default
    .select2-results__option--highlighted.select2-results__option--selectable {
    color: #3c3c3c;
    background-color: #a9a9a9;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #a9a9a9;
    background: #4e4f4e;
    color: #ffffff;
}

.select2-container--default
    .select2-search--dropdown
    .select2-search__field:focus {
    outline: none;
    box-shadow: none;
}

.select2-container--default .select2-selection--single {
    background: #3c3c3c;
    color: #878787;
    border: 1px solid #878787;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #878787;
}

/* Style Gridtable */
.gridtable table tbody {
    display: block;
    min-height: 19vh;
    max-height: 19vh;
    overflow-y: auto;
    border: 1px solid #878787;
    background: #3f3f3f;
}

/* Target the scrollbar track */
.gridtable table tbody::-webkit-scrollbar {
    display: none;
}

/* Target the scrollbar thumb (the draggable handle) */
.gridtable table tbody::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the thumb */
    border-radius: 5px; /* Rounded corners for the thumb */
}

/* Target the scrollbar thumb on hover */
.gridtable table tbody::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color of the thumb on hover */
}

.gridtable thead,
.gridtable tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.gridtable thead {
    position: relative;
}

.gridtable table thead {
    background: #2f3231;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    border: 1px solid #878787;
    border-bottom: 0px;
}

.gridtable table thead tr th {
    padding: 1rem 0.5rem;
    color: #ffffff;
    font-family: "Kanit Medium";
    font-size: 0.8rem;
    border: 1px solid #878787;
    border-bottom: 0px;
}

.gridtable table tbody tr td {
    font-family: "Kanit Medium";
    font-size: 0.7rem;
    color: #ffffff;
    padding: 1rem 0.5rem;
    border: 1px solid #878787;
}

.gridtable table thead tr th:nth-child(1),
.gridtable table tbody tr td:nth-child(1) {
    text-align: center;
    width: 10%;
}

.gridtable table thead tr th:nth-child(2),
.gridtable table tbody tr td:nth-child(2) {
    width: 30%;
    text-align: center;
}

.gridtable table thead tr th:nth-child(3),
.gridtable table tbody tr td:nth-child(3) {
    width: 30%;
    text-align: center;
}

.gridtable table thead tr th:nth-child(4),
.gridtable table tbody tr td:nth-child(4) {
    width: 30%;
    text-align: center;
}
/* End Style Gridtable */
.card-machine {
    color: #ffffff;
    text-align: center;
    font-size: 0.7rem !important;
}
.card-machine-name {
    text-align: center;
    font-size: 0.7rem !important;
}

.card-machine-refactor {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.box-card-1 .card-ft {
    width: 100%;
    padding-block: 1rem;
    background: #9c9c9c;
    border: 0.3rem solid #b4b4b4;
    border-radius: 0.3rem;
    margin-bottom: 0.5rem;
    color: #ffffff;
    font-family: "Kanit Medium";
    text-align: center;
}

.box-card-1 .card-ft:nth-child(2) {
    margin-bottom: 25%;
}

.box-card-1 .card-machine {
    width: 100%;
    border: 2px solid #000000;
    background: transparent;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-machine-name {
    width: 100%;
    color: #ffffff;
    font-size: 0.8rem;
    font-family: "Kanit Medium";
    text-align: center;
    border-top: 2px solid #000000;
}

.icon-machine {
    content: url("../icon/icon-machine.svg");
    width: 40%;
    margin: 0.2rem 0rem;
}

.main-box-machine div .card-name {
    width: 100%;
    padding: 0.2rem;
    font-size: 0.6rem;
    color: #ffffff;
    font-family: "Kanit Medium";
    text-align: center;
    border: 2px solid #2f3231;
}

.card-icon-robot {
    width: 100%;
    background: #9c9c9c;
    border: 0.3rem solid #b4b4b4;
    border-radius: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0rem;
}

.main-box-machine div .card-icon-robot .icon-machine {
    width: 70%;
}

.icon-machine.balik {
    transform: scaleX(-1);
}

/* Style datepicker */
.datepicker-top-left::before,
.datepicker-top-left::after,
.datepicker-top-right::before,
.datepicker-top-right::after {
    display: none;
}

.datepicker-top-left,
.datepicker-top-right {
    border-top-color: transparent !important;
}

.datepicker-dropdown {
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    -webkit-box-shadow: 0 3px 6px transparent;
    box-shadow: 0 3px 6px transparent;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    position: absolute;
    z-index: 1;

    top: 20%;
    left: 43%;
}

.datepicker-panel > ul {
    width: 100%;
}

.datepicker-panel > ul > li[data-view="month prev"],
.datepicker-panel > ul > li[data-view="month next"],
.datepicker-panel > ul > li[data-view="year prev"],
.datepicker-panel > ul > li[data-view="year next"],
.datepicker-panel > ul > li[data-view="years prev"],
.datepicker-panel > ul > li[data-view="years next"] {
    width: 20%;
}

.datepicker-panel > ul > li[data-view="month current"],
.datepicker-panel > ul > li[data-view="year current"],
.datepicker-panel > ul > li[data-view="years current"] {
    width: 60%;
    padding: 1rem 0rem;
}

.datepicker-panel > ul > li[data-view="years prev"],
.datepicker-panel > ul > li[data-view="year prev"],
.datepicker-panel > ul > li[data-view="month prev"],
.datepicker-panel > ul > li[data-view="years next"],
.datepicker-panel > ul > li[data-view="year next"],
.datepicker-panel > ul > li[data-view="month next"],
.datepicker-panel > ul > li[data-view="next"] {
    font-size: 2.5rem;
}

.datepicker-panel > ul > li[data-view="years current"],
.datepicker-panel > ul > li[data-view="year current"],
.datepicker-panel > ul > li[data-view="month current"] {
    font-size: 1.5rem;
}

.datepicker-container {
    width: 25rem;
    padding: 1rem;
}

.datepicker-panel > ul {
    font-size: 1.5rem;
}

.datepicker-panel > ul > li {
    width: 3.5rem;
    height: 4rem;
}

.datepicker-panel > ul > li[data-view="day"],
.datepicker-panel > ul > li[data-view="day picked"],
.datepicker-panel > ul > li[data-view="day prev"],
.datepicker-panel > ul > li[data-view="day next"],
.datepicker-panel > ul > li[data-view="day"],
.datepicker-panel > ul > li[data-view="month picked"],
.datepicker-panel > ul > li[data-view="month prev"],
.datepicker-panel > ul > li[data-view="month next"],
.datepicker-panel > ul > li[data-view="month"],
.datepicker-panel > ul > li[data-view="year picked"],
.datepicker-panel > ul > li[data-view="year prev"],
.datepicker-panel > ul > li[data-view="year next"],
.datepicker-panel > ul > li[data-view="year"] {
    padding: 1rem 0rem;
}

.datepicker-panel > ul[data-view="years"] > li,
.datepicker-panel > ul[data-view="months"] > li {
    width: 6rem;
    height: 6.5rem;
    line-height: 4rem;
}

.daterangepicker.ltr .left .daterangepicker_input {
    padding-right: 0rem;
}

.form-date-range {
    text-align: center;
    font-size: 0.9rem;
    padding: 0.1rem 0.1rem;
    background: var(--var-bg-form-date-range);
    color: var(--color-bg-date-range);
    border: 1px solid var(--var-bg-form-date-range);
    cursor: pointer;
}

.daterangepicker .calendar {
    max-width: 100%;
}
.daterangepicker table {
    font-size: 1.5rem;
}

.daterangepicker.dropdown-menu.ltr.show-calendar.opensright {
    top: 15%;
    left: 25%;
    right: 25%;
    width: 50%;
    padding: 0rem;
}

.grid-daterangepicker {
    display: grid;
    padding: 0.5rem;
    grid-template-areas:
        "left right"
        "ranges ranges";
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
    grid-gap: 0.5rem;
    background: #ffffff;
}

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

.ranges {
    grid-area: ranges;
    margin-top: 1rem;
}

.daterangepicker.opensright:after,
.daterangepicker.opensright:before {
    display: none;
}

.btn-apply {
    background: #16a086;
    border-radius: 0.2rem;
    padding: 0.5rem 1rem;
    color: white;
    border: 1px solid #16a086;
    font-size: 1.5rem;
}

.btn-apply:hover {
    border: 1px solid #16a086;
    background: white;
    color: #16a086;
}

.btn-clear {
    background: #dc3545;
    border-radius: 0.2rem;
    padding: 0.5rem 1rem;
    color: white;
    border: 1px solid #dc3545;
    font-size: 1.5rem;
}

.btn-clear:hover {
    border: 1px solid #dc3545;
    background: white;
    color: #dc3545;
}

/* .datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-top{
  top: 7rem !important;
} */
/* End Style datepicker */