/* Responsive Modal Footer Buttons */

.float-start {
    float: left !important;
}

.float-end {
    float: right !important;
}

.scrollable-y-only {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable
}

/* Responsive form grids for various layouts with minimal markup */
/* Default/Common rules for all grid containers, will be overwritten based on screen size and max class */
.form-container {
    display: grid;
    gap: 0.25rem;
    padding: 0.25rem;
    grid-template-columns: 1fr;
    min-width: 300px;
    align-items: start;
}

    .form-container + .form-container {
        margin-top: -0.75rem; /* Negative margin to reduce spacing between containers */
    }

    /* Small devices (phones, less than 576px), always 1 column */
    /*Dfault Values*/
    .form-container.form-max-one {
        grid-template-columns: 1fr;
    }

/* Medium devices (tablets, less than 992px), never more than 2 columns */
@media (min-width: 576.1px) {
    .form-container {
        gap: 0.5rem;
        padding: 0.5rem;
    }

        .form-container.form-max-two,
        .form-container.form-max-three,
        .form-container.form-max-four,
        .form-container.form-max-five {
            grid-template-columns: repeat(2, 1fr);
        }
}

/* Large devices (laptops, less than 1366px), never more than 3 columns */
@media (min-width: 992.1px) {
    .form-container {
        gap: 0.5rem;
        padding: .75rem;
    }

        .form-container.form-max-three,
        .form-container.form-max-four,
        .form-container.form-max-five {
            grid-template-columns: repeat(3, 1fr);
        }
}

/* Very large monitors, up to 4 columns */
@media (min-width: 1366.1px) {
    .form-container {
        gap: 0.75rem;
        padding: 0.75rem;
    }

        .form-container.form-max-four,
        .form-container.form-max-five {
            grid-template-columns: repeat(4, 1fr);
        }
}

/* High res devices (monitors), up to 5 columns */
@media (min-width: 1920.1px) {
    .form-container {
        gap: 1rem;
    }

        .form-container.form-max-five {
            grid-template-columns: repeat(5, 1fr);
        }
}

@media (min-width: 992.1px) {
    .form-container.form-max-two.form-emphasis-left {
        grid-template-columns: 2fr 1fr;
    }

    .form-container.form-max-two.form-emphasis-right {
        grid-template-columns: 1fr 2fr;
    }
}

/*Used for clamping max row height in grids*/
th.e-headercell.e-max-three-row,
td.e-rowcell.e-max-three-row {
    display: -webkit-box;
    max-height: 60px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: pre-wrap !important;
}

th.e-headercell.e-max-five-row,
td.e-rowcell.e-max-five-row {
    display: -webkit-box;
    max-height: 120px;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis !important;
    white-space: pre-wrap !important;
}


/* Begin CSS extracted from ECAT into packages */

/* Responsive form grids for various layouts with minimal markup */
/* Common rules for all grid containers */
.form-container {
    display: grid;
    gap: 20px;
    padding: 20px;
    grid-template-columns: repeat(2, 1fr);
}

/* Small devices (phones, less than 576px), always 1 column */
@media (max-width: 576px) {
    .form-container {
        padding: 10px;
        grid-template-columns: 1fr;
    }
}

/* Medium devices (tablets, less than 992px), never more than 2 columns */
@media (max-width: 992px) {
    .form-container {
        padding: 15px;
        grid-template-columns: 1fr;
    }

        .form-container.form-max-two,
        .form-container.form-max-three,
        .form-container.form-max-four {
            grid-template-columns: repeat(2, 1fr);
        }
}

/* Large devices (laptops, less than 1200px), never more than 3 columns */
@media (max-width: 1200px) {
    .form-container.form-max-three,
    .form-container.form-max-four {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Very large devices (large laptops and monitors), up to 4 columns */
.form-container.form-max-four {
    grid-template-columns: repeat(4, 1fr);
}

/* Default for max-three, max-two, and max-one */
.form-container.form-max-three {
    grid-template-columns: repeat(3, 1fr);
}

.form-container.form-max-two {
    grid-template-columns: repeat(2, 1fr);
}

.form-container.form-max-one {
    grid-template-columns: 1fr;
}

/* End CSS extracted from ECAT into packages */