/** @define RepeatFrequencyOptions */

.RepeatFrequencyOptions {
    width: ~"calc(100% + 21px)";
    padding: 20px;
    border-left: 5px solid @default-border;
    margin-left: -20px;
    padding-left: 17px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    align-items: flex-start;
}

.RepeatFrequencyOptions-formGroup {
    padding-right: 0px;
}

@media (min-width: 901px) {
    .RepeatFrequencyOptions-formGroup {
        flex: 0 0 auto;
        margin-bottom: 25px;
        width: ~"calc(33% - 32px)";
        margin-right: 50px;
    }

    .RepeatFrequencyOptions-formGroup:nth-child(3n+3) {
        flex: 0 0 auto;
        margin-bottom: 25px;
        margin-right: 0px;
    }
}

@media (min-width: 651px) and (max-width: 900px) {
    .RepeatFrequencyOptions-formGroup {
        flex: 0 0 auto;
        margin-bottom: 25px;
        width: ~"calc(50% - 25px)";
        margin-right: 50px;
    }

    .RepeatFrequencyOptions-formGroup:nth-child(2n+2) {
        flex: 0 0 auto;
        margin-bottom: 25px;
        margin-right: 0px;
    }
}

@media (max-width: 650px) {
    .RepeatFrequencyOptions-formGroup {
        flex: 0 0 auto;
        margin-bottom: 25px;
        width: 100%;
        margin-right: 0px;
    }
}

.RepeatFrequencyOptions-label {
    width: 100%;
    margin-top: -2px;
    text-transform: uppercase;
    font-weight: bold;
    color: @default-interface-txt;
    font-size: 13px;
    margin-left: -20px;
    border-left: 5px solid @default-border;
    padding-left: 15px;
    padding-bottom: 15px;
}

.RepeatFrequencyOptions-weekButtonContainer {
    width: 100%;
}

.RepeatFrequencyOptions-weekButtonGroup {
    height: 27px;
    width: 100%;
    display: flex;
}

.RepeatFrequencyOptions-weekButton {
    height: 27px;
    padding-top: 2px;
    padding-right: 4px;
    padding-left: 4px;
    flex: 1;
}

.RepeatFrequencyOptions-weekButton.active {
    background-color: @default-list-header-bg !important;
    border-color: @d7grey !important;
}

.RepeatFrequencyOptions-everyGroup {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.RepeatFrequencyOptions-inlineLabel {
    font-weight: normal;
    color: @default-interface-txt;
    text-transform: uppercase;
    flex: initial;
    width: 54px;
    margin-left: 10px;
    font-size: 13px;
}

.RepeatFrequencyOptions-occurencesGroup {
    width: 100%;
}

.RepeatFrequencyOptions-radioLabel {
    margin-top: 0px;
    margin-bottom: 5px;
}

.RepeatFrequencyOptions-everyLabel {
    margin-top: 2px;
}

.RepeatFrequencyOptions-spacedSelect,
.RepeatFrequencyOptions-spacedSelect ~ .select2 {
    margin-bottom: 10px;
}

.RepeatFrequencyOptions-subFormBorderFixer {
    height: 25px;
    width: 5px;
    background: @default-bg;
    margin-left: -20px;
    margin-top: -25px;
    margin-right: 50px;
}

.RepeatFrequencyOptions-monthlyOccurence,
.RepeatFrequencyOptions-yearlyOccurence {
    text-transform: capitalize;
}

.RepeatFrequencyOptions-error {
    flex: initial;
    width: 100%;
}

.RepeatFrequencyOptions-nameBorderErrorFix {
    border-color: @default-err !important;
}

.RepeatFrequencyOptions-inputGroup {
    display: flex;
    justify-content: space-between;
}

.RepeatFrequencyOptions-inputGroup--thirds > .select2 {
    width: ~"calc(33% - 3px)" !important;
}

.RepeatFrequencyOptions-inputGroup--halves > .select2 {
    width: ~"calc(50% - 3px)" !important;
}

.RepeatFrequencyOptions-inputGroup--halvesWithNumber > .select2 {
    width: ~"calc(50% - 3px)" !important;
    margin-right: 7px;
}

.RepeatFrequencyOptions-inputGroup--halvesWithSelect > .select2 {
    width: ~"calc(50% - 3px)" !important;
    margin-left: 7px;
}

.RepeatFrequencyOptions-inputGroup--halvesWithSelect > .RepeatFrequencyOptions-number {
    width: ~"calc(50% - 3px)" !important;
}
