:root {
    --bg-card:#2F3231;
}

[data-theme="dark"] {
    --bg-card:#2F3231;
}

@font-face {
    font-family: "Kanit Bold";
    src: url(../font/Kanit/Kanit-Bold.ttf);
}

.main-grid{
    display: grid;
    grid-template-areas:
    "by-shift by-daily card-chart"
    "by-shift by-daily gantt-chart";
    grid-template-columns: 24.7% 24.7% 49.7%;
    grid-template-rows: 77vh 15vh;
    grid-gap: 0.5rem;
}

@media screen and (height: 1080px) {
    .main-grid{
        grid-template-rows: 80vh 13vh;
    }
}

.by-shift{
    grid-area: by-shift;
    background: var(--bg-card);
    border-radius: 0.3rem;
    border: 1px solid #0D88AE;
}

.by-daily{
    grid-area: by-daily;
    background: var(--bg-card);
    border-radius: 0.3rem;
    border: 1px solid #0D88AE;
}

.card-chart{
    grid-area: card-chart;
    background: var(--bg-card);
    border-radius: 0.3rem;
    border: 1px solid #0D88AE;
    padding: 0.5rem;
}

.gantt-chart{
    grid-area: gantt-chart;
    background: var(--bg-card);
    border-radius: 0.3rem;
    border: 1px solid #0D88AE;
    padding: 0.5rem;
}

.card-header{
    width: 100%;
    height: auto;
    padding: 0.3rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: #FFFFFF;
    border-bottom: 1px solid #0D88AE;
    background: #4A4A4A;
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}

.card-body{
    display: grid;
    grid-template-areas:
    "card-1 card-1"
    "card-2 card-2"
    "card-3 card-4"
    "card-5 card-5"
    "card-6 card-7"
    "card-8 card-8"
    "card-9 card-10";
    grid-template-columns: 49.1% 49.1%;
    grid-template-rows: 6.7rem 6.7rem 6.7rem 6.7rem 6.7rem 6.7rem 6.7rem;
    grid-gap: 0.5rem;
    padding: 0.5rem;
}

@media screen and (height: 1080px) {
    .card-body{
        grid-template-rows: 8rem 8rem 8rem 8rem 8rem 8rem 8rem;
    }
}

.card-1{
    grid-area: card-1;
    border-radius: 0.3rem;
    border: 2px solid #4A4A4A;
    padding: 0.5rem;
}

.card-2{
    grid-area: card-2;
    border-radius: 0.3rem;
    border: 2px solid #4A4A4A;
    padding: 0.5rem;
}

.card-3{
    grid-area: card-3;
    border-radius: 0.3rem;
    border: 2px solid #4A4A4A;
    padding: 0.5rem;
}

.card-4{
    grid-area: card-4;
    border-radius: 0.3rem;
    border: 2px solid #4A4A4A;
    padding: 0.5rem;
}

.card-5{
    grid-area: card-5;
    border-radius: 0.3rem;
    border: 2px solid #4A4A4A;
    padding: 0.5rem;
}

.card-6{
    grid-area: card-6;
    border-radius: 0.3rem;
    border: 2px solid #4A4A4A;
    padding: 0.5rem;
}

.card-7{
    grid-area: card-7;
    border-radius: 0.3rem;
    border: 2px solid #4A4A4A;
    padding: 0.5rem;
}

.card-8{
    grid-area: card-8;
    border-radius: 0.3rem;
    border: 2px solid #4A4A4A;
    padding: 0.5rem;
}

.card-9{
    grid-area: card-9;
    border-radius: 0.3rem;
    border: 2px solid #4A4A4A;
    padding: 0.5rem;
}

.card-10{
    grid-area: card-10;
    border-radius: 0.3rem;
    border: 2px solid #4A4A4A;
    padding: 0.5rem;
}

.bg-cl1{
    background: linear-gradient(130deg, #2F3231 25%, #16A086) 100%;
}

.bg-cl2{
    background: linear-gradient(130deg, #2F3231 25%, #695B38) 100%;
}

.bg-fb{
    background: linear-gradient(145deg, #2F3231 25%, #1E94AE) 100%;
}

.bg-ft{
    background: linear-gradient(145deg, #2F3231 25%, #6E27A3) 100%;
}

.bg-aft{
    background: linear-gradient(145deg, #2F3231 25%, #ED6800) 100%;
}

.bg-ok{
    background: linear-gradient(130deg, rgba(47,50,49,1) 21%, rgba(76,175,80,1) 100%);
}

.bg-ng{
    background: linear-gradient(130deg, rgba(47,50,49,1) 21%, rgba(248,192,0,1) 100%);
}

.inf-card{
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin: 0rem;
}

.inf-card-part{
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.2rem;
    margin: 0rem;
}

.inf-val{
    color: #FFFFFF;
    font-weight: bold;
    font-size: 3.5rem;
    line-height: 3.5rem;
    margin: 0rem;
}

.inf-val-tgl{
    color: #FFFFFF;
    font-weight: bold;
    font-size: 2rem;
    line-height: 2rem;
    margin: 0rem;
    margin-top: 0.5rem;
}

.inf-val-part{
    color: #FFFFFF;
    font-weight: bold;
    font-size: 3.2rem;
    line-height: 3.2rem;
    margin: 0rem;
}

@media screen and (height: 1080px) {
    .inf-val-part{
        font-size: 3.5rem;
        line-height: 3.5rem; 
    }

    .inf-card-part{
        font-size: 1.5rem;
        line-height: 1.5rem;
    }
}

.card-chart-show{
    width: 100%;
    height: 20.3rem;
    border: 1px solid #717171;
    border-radius: 0.3rem;
    padding: 0.5rem;
}

@media screen and (height: 1080px) {
    .card-chart-show{
        height: 25rem;
    }
}

.card-chart-show:nth-child(2){
    margin-bottom: 0.5rem;
}

.btn-drpdown{
    border: 1px solid #212121;
    border-radius: 0.2rem;
    color: #FFFFFF;
    background: #3C3C3C;
    font-size: 0.7rem;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
}

@media screen and (height: 720px){
    .btn-drpdown{
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
    }

    .d-flex.justify-content-end.p-2{
        padding: 0rem 0.3rem !important;
    }

    .d-flex.justify-content-start.p-2{
        padding: 0rem 0.3rem !important;
    }
}

.btn-drpdown:hover,
.btn-drpdown.show{
    background: #FFFFFF !important;
    color: #3C3C3C !important;
}

.but-drop{
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  margin-bottom: 0.5rem;
}

.but-drop:hover{
    background: #3C3C3C;
    color: #FFFFFF;
}

figure{
    width: 100%;
    height: auto;
    margin: 0rem;
}

figure div{
    width: 100%;
    height: 17.5rem;
}

@media screen and (height: 1080px) {
    figure div{
        height: 22.5rem;
    }
}

.datepicker-container{
    font-size: 2.5rem;
    line-height: auto;
    width: 25rem;
    border-radius: 0.3rem;
    left: 40%;
    top: 5%;
}

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

.datepicker-panel>ul>li {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.datepicker-panel>ul>li.picked, 
.datepicker-panel>ul>li.picked:hover {
    color: #FFFFFF;
}

.datepicker-panel>ul>li.highlighted {
    background-color: #5c5e5d;
    border-radius: 0.3rem;
}

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

.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;
}

.btn-set{
    color: #C7C7C7;
    font-size: 1.1rem;
    margin-right: 0.6rem;
    margin-top: 0.2rem;
    cursor: pointer;
}

.btn-set:hover{
    color: #FFFFFF;
}

.btn-save{
    background: #495058;
    border: 1px solid #495058;
    color: #FFFFFF;
}

.btn-save:hover{
    background: #FFFFFF !important;
    color: #495058 !important;
    border: 1px solid #495058 !important;
}

.btn-cancel{
    background: #9C9C9C;
    border: 1px solid #9C9C9C;
    color: #FFFFFF;
}

.btn-cancel:hover{
    background: #FFFFFF !important;
    color: #9C9C9C !important;
    border: 1px solid #9C9C9C !important;
}

.modal-header{
    text-align: center;
    background: #495058;
    color: #FFFFFF;
    justify-content: center;
}

.form-costum,
.form-costum:focus{
    border: 1px solid #495058;
    background: #FFFFFF;
    color: #495058;
}

.datepicker-container.datepicker-dropdown{
    z-index: 10000 !important;
}

.card-select-type{
    width: 100%;
    max-height: 20rem;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid #4A4A4A;
    border-radius: 0.3rem;
}

.card-select-type table{
    width: 100%;
}

.card-select-type table tr td{
    text-align: left;
    font-size: 1.5rem;
}

.card-select-type table tr td:nth-child(1){
    text-align: left;
    width: 3rem;
}

.form-check-input:checked{
    background-color: #16A086;
    border-color: #16A086;
}

.form-check-input{
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
}

.legend-chart{
    color:#FFFFFF;
    cursor:pointer;
    font-size:12px;
    font-weight:bold;
    margin-right: 0.5rem;
}

.legend-chart:hover,
.legend-chart.active{
    color: #5c5e5d;
}

.legend-chart i{
    margin-right: 0.3rem;
}

.legend-chart.fb i{
    color: #1E94AE;
}

.legend-chart.ft i{
    color: #6E27A3;
}

.legend-chart.aft i{
    color: #ED6800;
}

.highcharts-tooltip {
    pointer-events: none;
}