/*
    Chart Css.
*/


/* Styles cho laptop lớn và desktop */
@media only screen and (max-width: 1600px) {
    .date-block{
        .date-wrap{
            .date-label{
            }
            .date-input{
                text-align: center;
            }
            .date-error{
                text-align: center;
            }
        }
    }
}

.chart-section{
    width: 100%;
    height: calc(100vw * 6 / 16);
}

.chart-comment-container{
    width: 100%;
    display: flex;
    justify-content: right;
    gap: 10%;
}

.chart-comment-left{
    display: flex;
    flex-direction: column;
    width: 50%;
}

.chart-comment-right{
    display: flex;
    justify-content: left;
    width: 50%;
}

.chart-comment-content{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.chart-note {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.chart-note ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.chart-note li {
    margin-right: 20px;
}

.chart-note span {
    display: block;
    float: left;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    margin-right: 3px;
}

.note-status-0 {
    background: #ED7474 !important;
}

.note-status-1 {
    background: #F9CF0B !important;
}

.note-status-2 {
    background: #23B7E5 !important;
}

.note-status-3 {
    background: #27C24C !important;
}

.chart-comment {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.chart-comment ul {
    display: flex;
    list-style: none; /* Remove the default list style */
    padding: 0;
    margin: 0;
}

.chart-comment li {
    display: flex;
    align-items: center;
    color: #000; /* Adjust the color if needed */
}

.three-dashes {
    display: flex;
    color: red;
    margin-right: 8px; /* Adjust the spacing between dashes and text */
}

/* Thiết bị Laptop Tablet nhỏ. */
@media only screen and (max-width: 1440px){
    .chart-form-section{
        .airport-chart-form{
            width: 100%;
            margin: 5px 0;
            text-align: center;
            .airport-block{
                .airport-input{
                    border-radius: 5px;
                    margin: 0 10px;
                    text-align: center;
                }
            }
            .date-block{
                .date-wrap{
                    .date-label{
                    }
                    .date-input{
                        margin: 0 10px;
                        text-align: center;
                    }
                }
            }
            .time-block{
                .time-block-label{
                }
                .time-block-input{
                    border-radius: 5px;
                    margin: 0 10px;
                    text-align: center;
                }
            }
            .chart-type-block{
                .chart-type-label{
                }
                .chart-type-input{
                    border-radius: 5px;
                    margin: 0 10px;
                    text-align: center;
                }
            }
        }
        .slot-chart-form{
            display: block;
            width: 100%;
            text-align: center;
            .slot-form-space{
                display: none;
            }
            .slot-form-left{
                display: block;
                width: 100%;
                margin: 5px 0;
                .pri-from-time-block{
                    .pri-from-time-wrap{
                        .pri-from-time-label{
                        }
                        .pri-from-time-input{
                            margin: 0 10px;
                        }
                    }
                    .pri-from-time-error{
                    }
                }
                .pri-to-time-block{
                    .pri-to-time-wrap{
                        .pri-to-time-label{
                        }
                        .pri-to-time-input{
                            margin: 0 10px;
                        }
                    }
                    .pri-to-time-error{
                    }
                }
                .pri-slot-wrap{
                    .pri-slot-label{

                    }
                    .pri-slot-input{
                        width: 50px;
                        margin: 0 10px;
                    }
                }
            }
            .slot-form-right{
                display: inline-block;
                margin: 5px 0;
                .sec-from-time-block{
                    .sec-from-time-wrap{
                        .sec-from-time-label{
                        }
                        .sec-from-time-input{
                            margin: 0 10px;
                        }
                    }
                    .sec-from-time-error{
                    }
                }
                .sec-to-time-block{
                    .sec-to-time-wrap{
                        .sec-to-time-label{
                        }
                        .sec-to-time-input{
                            margin: 0 10px;
                        }
                    }
                    .sec-to-time-error{
                    }
                }
                .sec-slot-wrap{
                    .sec-slot-label{

                    }
                    .sec-slot-input{
                        width: 50px;
                        margin: 0 10px;
                    }
                }
            }
            #chart-submit-block, .chart-submit-block{
                display: inline-block;
                border: none;
                margin: 5px;
                padding: 0 !important;
                text-align: center;
                .chart-submit-btn{
                    background: linear-gradient(to right, #30CFD0 -12%, #330867 100%);
                    color: #fff;
                    height: 100%;
                    margin: 0;
                    padding: 0 10px;
                }
            }
        }
        .chart-comment-container{
            .chart-title{
                display: flex;
                width: 100%;
                justify-content: right;
                .chart-airport-title{
                    display: inline;
                }
                .chart-airport-comment{
                    display: inline;
                }
                .chart-comment-span{
                    display: inline;
                }
            }
        }
    }
    .chart-comment-container{
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 100%;
        .chart-comment-left{
            display: block;
            box-sizing: inherit;
            width: 100%;
            margin: 0;
            padding: 0;
            .chart-title{
                display: block;
                box-sizing: inherit;
                width: 100%;
                margin: 0;
                padding: 0;
                font-size: 1rem;
                .chart-airport-title{
                    display: none;
                }
                .chart-airport-comment{
                    display: none;
                }
                .chart-airport-span{
                    display: inline;
                }
            }
        }
        .chart-comment-right{
            display: flex;
            box-sizing: inherit;
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            justify-content: center;
            .chart-comment-content{
                .chart-note{
                    ul > li{
                        margin: 0 5px;
                    }
                }
            }
        }
    }
}

/* Thiết bị di động. */
@media only screen and (max-width: 825px){
    .chart-form-section{
        .airport-chart-form{
            box-sizing: border-box;
            width: 100%;
            .airport-block{
                box-sizing: inherit;
                width: 100%;
                margin: 5px 0 0;
                padding: 0 3px;
                text-align: center;
                .airport-input{
                    display: block;
                    width: 100%;
                    box-sizing: inherit;
                    margin: 0;
                    padding: 0;
                    text-align: center;
                }
            }
            .date-block{
                box-sizing: inherit;
                width: 100%;
                margin: 5px 0 0;
                padding: 0 3px;
                text-align: center;
                .date-wrap{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin: 0;
                    padding: 0;
                    .date-label{
                        box-sizing: inherit;
                        width: 100%;
                    }
                    .date-input{
                        box-sizing: inherit;
                        width: 100%;
                        margin: 0;
                        padding: 0;
                        text-align: center;
                    }
                }
            }
            .time-block{
                box-sizing: inherit;
                width: 100%;
                margin: 5px 0 0;
                padding: 0 3px;
                text-align: center;
                .time-block-label{
                    box-sizing: inherit;
                    width: 100%;
                }
                .time-block-input{
                    box-sizing: inherit;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                    text-align: center;
                }
            }
            .chart-type-block{
                box-sizing: inherit;
                width: 100%;
                margin: 5px 0 0;
                padding: 0 3px;
                text-align: center;
                .chart-type-label{
                    box-sizing: inherit;
                    width: 100%;
                }
                .chart-type-input{
                    box-sizing: inherit;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                    text-align: center;
                }
            }
            .chart-submit-block{
                box-sizing: inherit;
                .chart-submit-btn{
                    background: linear-gradient(to right, #30CFD0 -12%, #330867 100%);
                    color: #fff;
                    box-sizing: inherit;
                    width: 100%;
                    height: fit-content;
                }
            }
        }
        .slot-chart-form{
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-sizing: inherit;
            width: 100%;
            margin: 5px 0 0;
            padding: 0 3px;
            .slot-form-left{
                display: flex;
                flex-direction: column;
                width: 100%;
                box-sizing: inherit;
                .pri-from-time-block{
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    box-sizing: inherit;
                    .pri-from-time-wrap{
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        box-sizing: inherit;
                        .pri-from-time-label{
                            display: block;
                            width: 100%;
                            box-sizing: inherit;
                            text-align: center;
                        }
                        .pri-from-time-input{
                            display: block;
                            width: 100%;
                            box-sizing: inherit;
                            text-align: center;
                        }
                    }
                    .pri-from-time-error{
                        display: block;
                        width: 100%;
                        box-sizing: inherit;
                    }
                }
                .pri-to-time-block{
                    .pri-to-time-wrap{
                        .pri-to-time-label{
                            display: none;
                        }
                        .pri-to-time-input{
                            display: block;
                            width: 100%;
                            box-sizing: inherit;
                            margin: 0;
                            padding: 0;
                            text-align: center;
                        }
                    }
                    .pri-to-time-error{
                        display: block;
                        width: 100%;
                        box-sizing: inherit;
                    }
                }
                .pri-slot-wrap{
                    .pri-slot-label{
                        display: block;
                        width: 100%;
                        box-sizing: inherit;
                        text-align: center;
                    }
                    .pri-slot-input{
                        display: block;
                        width: 100%;
                        box-sizing: inherit;
                        margin: 0;
                        padding: 0;
                        text-align: center;
                    }
                }
            }
            .slot-form-right{
                display: flex;
                flex-direction: column;
                width: 100%;
                box-sizing: inherit;
                .sec-from-time-block{
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    box-sizing: inherit;
                    .sec-from-time-wrap{
                        width: 100%;
                        box-sizing: inherit;
                        display: flex;
                        flex-direction: column;
                        .sec-from-time-label{
                            display: block;
                            width: 100%;
                            box-sizing: inherit;
                            text-align: center;
                        }
                        .sec-from-time-input{
                            display: block;
                            width: 100%;
                            box-sizing: inherit;
                            text-align: center;
                        }
                    }
                    .sec-from-time-error{
                        display: block;
                        width: 100%;
                        box-sizing: inherit;
                    }
                }
                .sec-to-time-block{
                    .sec-to-time-wrap{
                        .sec-to-time-label{
                            display: none;
                        }
                        .sec-to-time-input{
                            display: block;
                            width: 100%;
                            box-sizing: inherit;
                            margin: 0;
                            padding: 0;
                            text-align: center;
                        }
                    }
                    .sec-to-time-error{
                        display: block;
                        width: 100%;
                        box-sizing: inherit;
                    }
                }
                .sec-slot-wrap{
                    .sec-slot-label{
                        display: block;
                        width: 100%;
                        box-sizing: inherit;
                        text-align: center;
                    }
                    .sec-slot-input{
                        display: block;
                        width: 100%;
                        box-sizing: inherit;
                        margin: 0;
                        padding: 0;
                        text-align: center;
                    }
                }
            }
            .slot-form-space{
                display: none;
            }
            #chart-submit-block, .chart-submit-block{
                display: inline-block;
                border: none;
                padding: 0 !important;
                .chart-submit-btn{
                    background: linear-gradient(to right, #30CFD0 -12%, #330867 100%);
                    color: #fff;
                    width: 100%;
                    height: 100%;
                    margin: 7px 0 0;
                    padding: 0 10px;
                }
            }
        }
    }
    .chart-comment-container{
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 100%;
        .chart-comment-left{
            display: block;
            box-sizing: inherit;
            width: 100%;
            margin: 0;
            padding: 0;
            .chart-title{
                display: block;
                box-sizing: inherit;
                width: 100%;
                margin: 0;
                padding: 0;
                font-size: 1rem;
                .chart-airport-title{
                    display: none;
                }
                .chart-airport-comment{
                    display: none;
                }
                .chart-airport-span{
                    display: inline;
                }
            }
        }
        .chart-comment-right{
            display: flex;
            box-sizing: inherit;
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            justify-content: center;
            .chart-comment-content{
                .chart-note{
                    ul > li{
                        margin: 0 5px;
                    }
                }
            }
        }
    }
}

/* Thiết bị cỡ lớn */
@media only screen and (min-width: 1441px){
    .chart-form-section{
        .airport-chart-form {
            width: 100%;
            margin: 5px 0;
            text-align: center;
            .airport-block{
                .airport-input{
                    border-radius: 5px;
                    margin: 0 10px;
                    text-align: center;
                }
            }
            .date-block{
                .date-wrap{
                    .date-label{
                    }
                    .date-input{
                        margin: 0 10px;
                        text-align: center;
                    }
                }
            }
            .time-block{
                .time-block-label{
                }
                .time-block-input{
                    border-radius: 5px;
                    margin: 0 10px;
                    text-align: center;
                }
            }
            .chart-type-block{
                .chart-type-label{
                }
                .chart-type-input{
                    border-radius: 5px;
                    margin: 0 10px;
                    text-align: center;
                }
            }
        }
        .slot-chart-form{
            display: flex;
            justify-content: center;
            width: 100%;
            .slot-form-space{
                display: inline-flex;
                width: 50px;
            }
            .slot-form-left{
                display: inline-flex;
                justify-content: center;
                .pri-from-time-block{
                    .pri-from-time-wrap{
                        .pri-from-time-label{
                        }
                        .pri-from-time-input{
                            margin: 0 10px;
                        }
                    }
                    .pri-from-time-error{
                    }
                }
                .pri-to-time-block{
                    .pri-to-time-wrap{
                        .pri-to-time-label{
                        }
                        .pri-to-time-input{
                            margin: 0 10px;
                        }
                    }
                    .pri-to-time-error{
                    }
                }
                .pri-slot-wrap{
                    .pri-slot-label{

                    }
                    .pri-slot-input{
                        width: 50px;
                        margin: 0 10px;
                    }
                }
            }
            .slot-form-right{
                display: inline-flex;
                justify-content: center;
                .sec-from-time-block{
                    .sec-from-time-wrap{
                        .sec-from-time-label{
                        }
                        .sec-from-time-input{
                            margin: 0 10px;
                        }
                    }
                    .sec-from-time-error{
                    }
                }
                .sec-to-time-block{
                    .sec-to-time-wrap{
                        .sec-to-time-label{
                        }
                        .sec-to-time-input{
                            margin: 0 10px;
                        }
                    }
                    .sec-to-time-error{
                    }
                }
                .sec-slot-wrap{
                    .sec-slot-label{

                    }
                    .sec-slot-input{
                        width: 50px;
                        margin: 0 10px;
                    }
                }
            }
            #chart-submit-block, .chart-submit-block{
                display: inline-block;
                border: none;
                padding: 0 !important;
                .chart-submit-btn{
                    background: linear-gradient(to right, #30CFD0 -12%, #330867 100%);
                    color: #fff;
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    padding: 0 10px;
                }
            }
        }
        .chart-comment-container{
            .chart-title{
                display: flex;
                width: 100%;
                justify-content: right;
                .chart-airport-title{
                    display: inline;
                }
                .chart-airport-comment{
                    display: inline;
                }
                .chart-comment-span{
                    display: inline;
                }
            }
        }
    }
}

/* Custom Css for Bootstrap modal */
.modal-div{
    text-align: center;
    .modal-dialog{
        display: inline-block;
        width: 90%;
        .modal-content {
            margin: auto;
            max-height: 80vh; /* Giới hạn chiều cao của modal */
            overflow-y: auto; /* Cho phép scroll khi nội dung vượt quá chiều cao */
            .modal-header{
                .chart-modal-title{
                    text-align: center;; /* Căn giữa nội dung */
                }
            }
            .modal-body{
                padding: 0;
                /* CSS để quản lý số thứ tự trong bảng */
                #flightInfoTable {
                    width: 100%; /* Đảm bảo bảng chiếm toàn bộ chiều rộng của modal */
                    border-collapse: collapse; /* Gộp các đường viền bảng */
                    counter-reset: rowNumber; /* Đặt lại counter */
                }
            }
            th, td{
                border: 1px solid #ddd; /* Đường viền cho các ô */
                padding: 8px; /* Khoảng cách nội dung từ đường viền */
                text-align: center; /* Căn lề nội dung về hết giữa */
            }
            #flightInfoTable tbody tr {
                counter-increment: rowNumber; /* Tăng counter mỗi khi có một hàng mới */
                th{
                    background-color: #cccccc;
                }
                td:first-child::before {
                    content: counter(rowNumber); /* Hiển thị số thứ tự */
                }
            }
        }
    }
}


/* Custom Style Class Css */
.planned-dep {
    background-color: #ed7474; /* Màu cho Planned DEP */
}
.actual-dep {
    background-color: #f9cf0b; /* Màu cho Actual DEP */
}
.planned-arr {
    background-color: #23b7e5; /* Màu cho Planned ARR */
}
.actual-arr {
    background-color: #27c24c; /* Màu cho Actual ARR */
}