/*
    CONVENTIONS:

    'g-' prefix stands for global classes
    'g-res' prefix stands for global responsive classes

 */

/** Stuff BELLOW resolution */
@media screen and (max-width: 618px) {

    /* Break columns into rows */
    .g-res-break-it-in-columns {
        display: flex;
        flex-direction: column;
        width: 95vw;
    }

    .g-res-break-it-in-columns > td {
        border: none !important;
    }

    .g-res-break-it-in-columns > td:nth-child(1) {
        border-top: solid #eee 1px !important;
        font-weight: bold;
        /*width: 90%;*/
    }

}

.g-res-break-it-in-columns > td.light {
    border: none !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    font-weight: normal;
    /*width: 90%;*/
}

.g-res-break-it-in-columns-no-bottom-border > td {
    border-bottom: none !important;
}

/** Stuff BELLOW resolution */
@media screen and (max-width: 410px) {

    /* smaller resolution break into columns for inner tables where we want to have a screen break in a smaller width then the first break */
    .g-res-break-it-in-columns-inner-tables {
        display: flex;
        flex-direction: column;
        width: 95vw;
    }

    /** all cell(s) */
    .g-res-break-it-in-columns-inner-tables > td {
        border: none !important;
    }

    /** specific cell(s) */
    .g-res-break-it-in-columns-inner-tables > td:nth-child(1) {
        border-top: solid #eee 1px !important;
    }

    /** hide specific cell(s) */
    .g-res-break-it-in-columns-inner-tables-header > td:nth-child(2) {
        display: none;
    }

}

/** Stuff ABOVE resolution */
@media screen and (min-width: 410px) {

    /** just hide it on upper resolution */
    .g-res-break-it-in-columns-inner-tables-hide-on-high-res {
        display: none;
    }
}

/** Stuff BELLOW resolution */
@media screen and (max-width: 768px) {

    /** specific cell(s) */
    .g-res-break-it-in-columns-inner-tables > td:nth-child(1) {
        border-top: solid #eee 1px !important;
    }

    /** hide specific cell(s) */
    .g-res-break-it-in-columns-inner-tables-header > td:nth-child(2) {
        display: none;
    }

    .g-always-hidden {
        display: none;
    }

}

/** Stuff ABOVE resolution */
@media screen and (min-width: 768px) {

    .g-always-hidden-on-upper-res {
        display: none;
    }

}