/*generic container classes and relevant modifiers*/

div.wrapper, div.wrapperNoPad, div.centerWrapper, div.wrapper-flex,
div.questionWrapper, div.headingWrapper, div.AddQuestionWrapper, div.infoPanelHeadingWrapper, div.wrapperExtraTopPad {
    position: relative;
    width: 100%;
    color: hsl(0, 100%, 100%);
    display: block;
    box-sizing: border-box;
    padding: 10px;
    transition: transform 0.5s ease-out;
}

div.wrapper-flex {
    display: flex;
    align-items: center;
}



/*WRAPPER MODIFIERS*/

/*these get added to the wrapper base class*/

.bottom-padding-small {
    padding-bottom: 10px !important;
}

.bottom-padding-medium {
    padding-bottom: 20px !important;
}

.bottom-padding-large {
    padding-bottom: 40px !important;
}


.vertical-padding-none {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.vertical-padding-small {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.vertical-padding-medium {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.vertical-padding-large {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.horizontal-padding-none {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.horizontal-padding-small {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.horizontal-padding-medium {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.horizontal-padding-large {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

div.padding-none {
    padding: 0 !important;
}

div.wrapperExtraTopPad {
    padding-top: 28px;
}

.align-left {
    text-align: left !important;
}

.wrapper-flex.align-left {
    justify-content: flex-start !important;
}

.align-right {
    text-align: right !important;
}

.wrapper-flex.align-right {
    justify-content: flex-end !important;
}