.button-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #d3d3d3; 
    color: black; 
    border: 2px solid black;
    text-decoration: none;
    border-radius: 5px;
    font-size: 20px;
    transition: background 0.3s ease;
}
.button-link:hover {
    background-color: #b0b0b0; 
    border-color: #000; 
    color: black;
}

.button-container {
    display: flex;
    justify-content: center; 
    align-items: center;     
}

.button-content {
    display: flex;  
    gap: 35px;      
}
        
.text-color-red {
    color: red;
}

/* Using these to display text elements (h1, h2, etc.)
    with the default sizes of a related element.
    Default sizes found by just inspecting h# elements in F12.
    Needed for accessibility concerns.
*/

.p-as-h3 {
    font-size: calc(1.3rem + .6vw);
}

.p-as-h4 {
    font-size: calc(1.275rem + .3vw);
}

.p-as-h5 {
    font-size: 1.25rem;
}

.p-As-h6 {
    font-size: 1rem;
}

.formio-form nav {
    padding-top: 0 !important;
}

.choices__list--multiple .choices__item[data-deletable] {
    max-width: 92%;
    white-space: normal !important;
    word-break: break-word !important;
}

.formio-choices[data-type=select-multiple]:after
 {
    content: '';
    height: 0;
    width: 0;
    border-style: solid;
    border-color: #333 transparent transparent;
    border-width: 5px;
    position: absolute;
    right: 11.5px;
    top: 50%;
    margin-top: -2.5px;
    pointer-events: none;
}

.formio-choices[data-type=select-multiple].is-open:after
 {
    border-color: #333 transparent transparent;
    margin-top: -7.5px;
    transform: scaleY(-1);
}

.choices[data-type*=select-multiple] {
    cursor: pointer;
}

.formio-component-multiple .choices__input {
    background-color: #00000000;
    cursor: pointer;
}

/* Prevent overlapping text in ALL Form.io EditGrids */
.formio-component-editgrid .list-group .row > div {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}