/* ========================= ========================= ========================= ========================= ========================= =========================


/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all form_media_query css inside @layer media_query 
***
* please make sure all form_media_query css inside @layer media_query 
* please make sure all form_media_query css inside @layer media_query 
* Use CSS @layer
* Use CSS @layer
* Use CSS @layer
***
 ========================= ========================= ========================= ========================= ========================= =========================*/


@layer media_query {
    @media(max-width: 992px) {
        .info_table.info_table1 {
            width: 100%;

        }

        .info_table.info_table1>* {
            grid-template-columns: max-content max-content 1fr;
        }

        .info_table.info_table1>*>*:nth-child(1) {
            grid-column: 1 / -1;
        }

        .info_table.info_table1>*>*:nth-child(2) {
            grid-column: 1 / -1;
        }
    }

    @media(max-width:992px) {
        .personal_row {
            row-gap: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
        }
    }

    @media(max-width:992px) {
        .market_group *:has(>.checkbox) {
            grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
            row-gap: 0.6rem;
        }

        .market_group *:has(>.checkbox, .checkbox .other_container) {
            grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
        }

        .other_container {
            max-width: 300px;
        }

        .two_columns_inner {

            /*grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));*/
        }

        .three_columns_inner {
            grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
        }

        .grid_col4 {
            grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
            row-gap: 0.6rem;
        }

        .grid_col6 {
            grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
            row-gap: 0.6rem;
        }

        .grid_col6 .checkbox:has(.other_container) {
            grid-column: 1 / -1;
        }
    }

    @media(max-width: 992px) {
        .btn_grid2 {
            grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
        }
    }

    @media(max-width: 992px) {
        .row:has(>.accordion_table_left) {
            grid-template-columns: 100%;
        }

        .accordion_table_left {
            padding-right: 0;
            border-right: 0;
        }

        .accordion_table_right {
            padding-left: 0;
        }
    }

    @media(max-width: 992px) {

        .full_item.row>.custom_file_row,
        .custom_file_row {
            grid-template-areas: "upload_area upload_area" "control control";
            grid-template-columns: max-content 1fr;
            row-gap: 1rem;
            margin-bottom: 2rem;
        }

        .full_item.row>.custom_file_row:has(.icon_tick),
        .custom_file_row:has(.icon_tick) {
            grid-template-areas: "status upload_area" "control control";
        }

        .file_status {
            grid-area: status;
        }

        .file_body {
            grid-area: upload_area;
        }

        .file_control {
            grid-area: control;
        }
    }

    @media(max-width: 767px) {
        .left_right_row {
            flex-wrap: wrap;
        }

        .left_right_row>* {
            width: 100%;
        }

        .left_right_row>*:first-child {
            order: 2;
        }

        .apply_change_wrapper {
            flex-wrap: wrap;
        }

        .apply_change_wrapper>* {
            width: 100%;
        }
    }

    @media(max-width: 767px) {

        .two_columns_form,
        .two_columns_inner {
            grid-template-columns: 100%;
        }
    }

    @media(max-width: 767px) {
        .other_container {
            grid-template-columns: 100%;
            width: 100%;
        }
    }
}

@layer media_query{
    @media(max-width: 767px){
        .dataTables_wrapper{
            grid-template-areas: 'length length' 'search_box search_box'
'result_table result_table'
'info info' 'pagination pagination';
        }
        .dataTables_filter label{
            justify-content: flex-start;
        }
        .dataTables_filter{
            padding-top: 0;
        }
        .dataTables_info{
            text-align: center;
        }
        .dataTables_paginate{
            justify-content: center;
            padding-right: 0;
        }
    }
}

/* ========================= ========================= ========================= ========================= ========================= =========================


/* ========================= ========================= ========================= ========================= ========================= =========================
***
* please make sure all form_media_query css inside @layer media_query 
***
* please make sure all form_media_query css inside @layer media_query 
* please make sure all form_media_query css inside @layer media_query 
* Use CSS @layer
* Use CSS @layer
* Use CSS @layer
***
 ========================= ========================= ========================= ========================= ========================= =========================*/