.wdk-group {
    display: flex;
    width: 100%;
    margin: -6px;
    width: calc(100% + 12px);
}
.wdk-group > * { margin: 6px; }

.wdk-group > .wdk-group {
    display: inline-flex;
    width: initial !important;
    margin: 0;
}

.wdk-group > .wdk-group.w-100 {
    width: 100% !important;
}

.wdk-group.wrap {
    flex-wrap: wrap;
}

.wdk-group.even>* {
    flex: 1;
}
/* Gutter */

.wdk-group.g0 { margin: 0; width: calc(100%); }
.wdk-group.g0 > * { margin: 0; }

.wdk-group.g1 { margin: -2px; width: calc(100% + 4px); }
.wdk-group.g1 > * { margin: 2px; }

.wdk-group.g2 { margin: -4px; width: calc(100% + 8px); }
.wdk-group.g2 > * { margin: 4px; }

/* Default */
.wdk-group.g3 { margin: -6px; width: calc(100% + 12px); }
.wdk-group.g3 > * { margin: 6px; }

.wdk-group.g4 { margin: -8px; width: calc(100% + 16px); }
.wdk-group.g4 > * { margin: 8px; }

.wdk-group.g5 { margin: -10px; width: calc(100% + 20px); }
.wdk-group.g5 > * { margin: 10px; }

.wdk-group.g6 { margin: -12px; width: calc(100% + 24px); }
.wdk-group.g6 > * { margin: 12px; }

.wdk-group.g7 { margin: -16px; width: calc(100% + 36px); }
.wdk-group.g7 > * { margin: 16px; }

/* May cause "overflow auto" issues over 1 rem gutter */

.wdk-group.g8 { margin: -24px; width: calc(100% + 48px); }
.wdk-group.g8 > * { margin: 24px; }

.wdk-group.g9 { margin: -32px; width: calc(100% + 64px); }
.wdk-group.g9 > * { margin: 32px; }

.wdk-group.g10 { margin: -64px; width: calc(100% + 128px); }
.wdk-group.g10 > * { margin: 64px; }

/* Gutter reset mobile */

@media(max-width: 992px) {/* 1025 Mobile update  */

    .wdk-group.rm.g6 { margin: -16px; width: calc(100% + 32px); }
    .wdk-group.rm.g6 > * { margin: 16px; }

    .wdk-group.rm.g7 { margin: -16px; width: calc(100% + 32px); }
    .wdk-group.rm.g7 > * { margin: 16px; }

    .wdk-group.rm.g8 { margin: -16px; width: calc(100% + 32px); }
    .wdk-group.rm.g8 > * { margin: 16px; }

    .wdk-group.rm.g9 { margin: -16px; width: calc(100% + 32px); }
    .wdk-group.rm.g9 > * { margin: 16px; }

    .wdk-group.rm.g10 { margin: -16px; width: calc(100% + 32px); }
    .wdk-group.rm.g10 > * { margin: 16px; }
}

/* Flex */
.wdk-group.dfc {
    flex-direction: column;
}

.wdk-group.al-center {
    align-items: center;
}

.wdk-group.jc-center {
    justify-content: center;
}

.wdk-group.start {
    align-items: start;
}

.wdk-group.end {
    align-items: end !important;
}

.wdk-group.j-end {
    justify-content: end !important;
}


.wdk-group.right {
    justify-content: flex-end;
}

@media (max-width: 992px) {
    .wdk-group.right-tab {
        justify-content: flex-end;
    }
}

@media (max-width: 576px) {
    .wdk-group.right-mob {
        justify-content: flex-end;
    }
    .wdk-group.right-mob-reset {
        justify-content: flex-start;
    }
}

.wdk-group.left {
    justify-content: flex-start;
}

.wdk-group.spread {
    justify-content: space-between;
}

@media (max-width: 576px) {
    .wdk-group.spread-mob {
        justify-content: space-between;
    }
}

.wdk-group.around {
    justify-content: space-around;
}

.wdk-group.evenly {
    justify-content: space-evenly;
}

.wdk-group.centralizer {
    justify-content: center;
    align-items: center;
}

.wdk-group.center-end {
    justify-content: center;
    align-items: end;
}

.wdk-group.fill {
    flex: 1 !important;
}

/* Form group */

.wdk-form-group {
    display: flex;
    align-items: center;
}

.wdk-control-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.wdk-control-group-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.wdk-form-group > *:first-child { border-radius: var(--radius) 0px 0px var(--radius); }
.wdk-form-group > *:last-child { border-radius: 0px var(--radius) var(--radius) 0px; }

.wdk-form-group .form-control { flex: 1; }

.wdk-form-group.has-btn-overlaid { position: relative; }
.wdk-form-group.has-btn-overlaid .form-control {
    padding-right: 60px;
    border-radius: var(--radius);
}
.wdk-form-group.has-btn-overlaid .btn i {
    margin: 0;
}
.wdk-form-group.has-btn-overlaid .btn {
    position: absolute !important;
    box-shadow: none !important;
    right: 0 !important;
    top: 0 !important;
    border: 1px solid var(--grey-02) !important;
    border-left: none !important;
    height: var(--form-component-height);
}

.wdk-form-group > .form-control:focus + .btn {
    border: 1px solid var(--primary) !important;
    border-left: none !important;
}

@media(min-width: 1440px) {

    .wdk-group.top-right {
        position: absolute;
        right: 8px;
        top: 0;
        width: initial;
    }

    .wdk-group.top-left {
        position: absolute;
        left: 8px;
        top: 0;
        width: initial;
    }
}

@media(max-width: 1440px) {
    .wdk-group {
       flex-wrap: wrap;
    }

    .wdk-group.top-right {
       padding-bottom: 16px;
    }
}

.wdk-group.al-center.spread .btn.btn-inline.btn-tertiary.large:only-child {
    margin-left: auto;
}

.wdk-card-group {
    flex-wrap: nowrap !important;
}
@media (max-width: 576px) {
    .wdk-card-group {
        flex-wrap: wrap !important;
    }
    .wdk-group.wdk-header-mobile {
        flex-wrap: nowrap !important;
    }
}

.wdk-card-group .wdk-featured-card {
    margin: 0;
    width: 100%;
    border-radius: 0;
    border: none;
}

/* Divider */
.wdk-group.has-divider div:not(:first-child) {
    border-left: 2px solid var(--grey-02);
    padding-left: 6px;
}

@media (max-width: 576px) {
    .wdk-group.has-divider div:not(:first-child) {
        border-left: none;
        padding-left: 0;
        border-top: 2px solid var(--grey-02);
        padding-top: 6px;
        margin-bottom: 0;
    }
}