.file-input-container {
    width           : 300px;
    height          : 150px;
    background-color: #f5f5f5;
    border          : 2px dashed #ccc;
    border-radius   : 5px;
    overflow        : hidden;
    position        : relative;
    cursor          : pointer;
    margin-bottom   : 5px;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    transition      : border-color 0.3s ease;
}

.file-input-container:hover {
    border-color: #aaa;
}

.file-input-container input[type=file] {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    opacity : 0;
    cursor  : pointer;
}

.file-input-icon {
    font-size    : 32px;
    color        : #888;
    margin-bottom: 8px;
}

.file-input-text {
    color      : #444;
    font-weight: bold;
}

.file-icon {
    font-size    : 48px;
    color        : #888;
    margin-bottom: 8px;
}

.file-name {
    color      : #444;
    font-weight: bold;
    text-align : center;
} 

.radio-block {
    --height: 40px;

    position        : relative;
    display         : flex;
    width           : 320px;
    max-height      : var(--height);
    background-color: #F7F5F3;
    margin-top      : 10px;
    padding         : 5px;
    border          : 1px solid #e7e9ed;
    border-radius   : 3px;
}

.selected {
    position        : absolute;
    top             : 5px;
    left            : 5px;
    width           : calc(50% - 5px);
    height          : calc(var(--height) - 10px);
    border-radius   : 3px;
    background-color: #2271b1;
    transition      : transform 0.2s;
}

.radio-block label {
    position  : relative;
    width     : 50%;
    max-height: calc(var(--height) - 10px);
    padding   : 6px;
    transition: color 0.2s;
    text-align: center;
    cursor    : pointer;
    z-index   : 100;
}

.radio-block input[type=radio]:checked+label {
    color: #FFF;
}

.radio-block input[type=radio]:checked+.off-label+.selected {
    transform: translateX(100%);
}

.radio-block input[type=radio] {
    position   : absolute;
    width      : 1px;
    height     : 1px;
    margin     : -1px;
    padding    : 0;
    overflow   : hidden;
    clip       : rect(1px, 1px, 1px, 1px);
    border     : 0;
    clip-path  : inset(50%);
    white-space: nowrap;
}

.side-filters input[type="checkbox"] {
      /* Add if not using autoprefixer */
    -webkit-appearance: none;
      /* Remove most all native input styles */
    appearance: none;
      /* For iOS < 15 */
      /* Not removed via appearance */
    margin       : 0;
    font         : inherit;
    color        : #555555;
    width        : 1.15em;
    height       : 1.15em;
    min-width    : 1.15em;
    min-height   : 1.15em;
    border       : 0.10em solid #555555;
    border-radius: 0.15em;
    transform    : translateY(-0.075em);
    display      : grid;
    place-content: center;
    cursor       : pointer;
}

.side-filters input[type="checkbox"]:checked {
    background-color: #9e363e;
    border          : 0.10em solid #9e363e;
}

.side-filters input[type="checkbox"]::before {
    content         : "";
    width           : 0.65em;
    height          : 0.65em;
    clip-path       : polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform       : scale(0);
    transform-origin: bottom left;
    transition      : 120ms transform ease-in-out;
    box-shadow      : inset 1em 1em var(--white);
      /* Windows High Contrast Mode */
    background-color: CanvasText;
}

.side-filters input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.side-filters input[type="checkbox"]:focus {
    outline       : max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
}

.side-filters input[type="checkbox"]:disabled {
    --primary: var(--form-control-disabled);

    color : var(--form-control-disabled);
    cursor: not-allowed;
}

.side-filters input[type="checkbox"] + label {
    cursor: pointer;
}