/* Custom design select element */
.select {
    background-color: #ffffff;
    color: #444444;
    border-color: #d2d6db;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    min-height: 32px;
    padding: 4px 8px;
    padding-right: 24px;

    /* Down arrow */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGZpbGxSdWxlPSJldmVub2RkIiBkPSJNNS4yOTMgOC4yOTNhMSAxIDAgMCAxIDEuNDE0IDBMMTIgMTMuNTg2bDUuMjkzLTUuMjkzYTEgMSAwIDEgMSAxLjQxNCAxLjQxNGwtNiA2YTEgMSAwIDAgMS0xLjQxNCAwbC02LTZhMSAxIDAgMCAxIDAtMS40MTRaIiBjbGlwUnVsZT0iZXZlbm9kZCIgLz4KPC9zdmc+');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 1rem 1rem;
    appearance: none;
}

.select::-ms-expand {
    display: none;
}

.select:focus {
    /* box-shadow: 0 0 0 2px $theme-color-background-primary-layer; */
    border-color: #ff7534;
    outline: none;
}

.input {
    background-color: #ffffff;
    color: #444444;
    border-color: #d2d6db;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 4px 8px;
    box-shadow: none !important;
}

.input:focus {
    border-color: #ff7534 !important;
    outline: none !important;
}

.input.small {
    height: 22px;
    padding: 4px 8px;
}