#pisol-shipping-class-config-container {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding:20px;
}

#pisol-shipping-class-list-container {
    min-width: 0;
}

#pisol-shipping-class-form-container {
    min-width: 0;
}

@media (max-width: 768px) {
    #pisol-shipping-class-config-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

#pisol-shipping-class-list-container a {

        display: flex;
        align-items: center;
        justify-content: flex-start;

        min-height: 48px;

        margin: 0 8px 8px 0;

        padding: 0 18px;

        border: 2px solid transparent;
        border-radius: 9px;

        background: #f7f7f7;

        cursor: pointer;

        transition: all .18s ease;

        color: var(--pisol-black-color) !important;

        font-size: 14px;
        font-weight: 600;

        text-decoration: none;

        &.btn-primary{
            background: rgba(0, 0, 0, .025);
            box-shadow: inset 4px 0 0 var(--pisol-primary-color);
            color:var(--pisol-primary-color) !important;
        }


        &:hover {
            transform: translateX(5px);
        }
}

#pisol-shipping-class-form-container {
    .row {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 16px;
        align-items: center;
    }

    .col-md-1  { grid-column: span 1; }
    .col-md-2  { grid-column: span 2; }
    .col-md-3  { grid-column: span 3; }
    .col-md-4  { grid-column: span 4; }
    .col-md-5  { grid-column: span 5; }
    .col-md-6  { grid-column: span 6; }
    .col-md-7  { grid-column: span 7; }
    .col-md-8  { grid-column: span 8; }
    .col-md-9  { grid-column: span 9; }
    .col-md-10 { grid-column: span 10; }
    .col-md-11 { grid-column: span 11; }
    .col-md-12 { grid-column: span 12; }

    #row_different_preparation_time{
        margin-top:20px;
        .row{
            margin-bottom:20px;
        }
    }
}

@media (max-width: 768px) {
    #pisol-shipping-class-form-container {
        .row {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }

        .col-md-7,
        .col-md-8,
        .col-md-9,
        .col-md-10,
        .col-md-11,
        .col-md-12 {
            grid-column: span 6;
        }
    }
}

@media (max-width: 480px) {
    #pisol-shipping-class-form-container {
        .row {
            grid-template-columns: 1fr;
        }

        [class*="col-"] {
            grid-column: span 1;
        }
    }
}