/* === Colors === */
.color-main {
    background-color: #387ddeee;
}

/* === Layout Utilities === */
.full-width {
    width: 100%;
}

.left-0 {
    left: 0;
}

.width-720 {
    max-width: 720px;
}

.no-line-break {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-wrapper {
    overflow-x: auto;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

@media (min-width: 601px) {
    .order-m-1 {
        order: 1;
    }

    .order-m-2 {
        order: 2;
    }
}

@media (max-width: 600px) {
    .full-width-on-small {
        width: 100%;
    }

    .bottom-margin-8-on-small {
        margin-bottom: 8px;
    }
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.act-group {
    display: flex;
    flex-wrap: wrap;
}

/* === Spacing Utilities === */
.main-margin>div:first-child {
    margin: 20px 10px 10px 10px;
}

.margin-10 {
    margin: 10px;
}

.margin-bottom-0 {
    margin-bottom: 0;
}

.margin-bottom-8 {
    margin-bottom: 8px;
}

.margin-left-16 {
    margin-left: 16px;
}

.padding-left-0 {
    padding-left: 0;
}

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

.padding-horizontal-0 {
    padding-left: 0;
    padding-right: 0;
}

.padding-horizontal-8 {
    padding-left: 8px;
    padding-right: 8px;
}

/* === Form / Input Helpers === */
.password-field {
    position: relative;
}

.toggle-password {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding-right: .5rem;
    cursor: pointer;
}

.clear-icon {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding-right: .5rem;
    cursor: pointer;
}