:root {
    --background: rgb(237, 242, 247);
    --background: #fff;
    --text-dark-color: #111;
    --text-light-color: #fff;
    --accent-color: #f49b23;
    --button-color: rgb(228, 232, 250);
    --button-text-color: var(--text-dark-color);
    --border-raduis: 12px;
    --border-radius: 12px;

    --range-slider: #d7dada;
    /* slider main background color */
    --range-handle-inactive: #99a2a2;
    /* inactive handle color */
    --range-handle: #605ebe;
    /* non-focussed handle color */
    --range-handle-focus: #2522f1;
    /* focussed handle color */
    --range-handle-border: var(--range-handle);
    --range-range-inactive: var(--range-handle-inactive);
    /* inactive range bar background color */
    --range-range: var(--range-handle-focus);
    /* active range bar background color */
    --range-float-inactive: var(--range-handle-inactive);
    /* inactive floating label background color */
    --range-float: var(--range-handle-focus);
    /* floating label background color */
    --range-float-text: white;
    /* text color on floating label */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Work Sans',
        Arial, sans-serif;
}

a,
a:hover {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: transparent;
}

.btn {
    font-weight: bolder;
    padding: 8px 18px;
    border-radius: 12px;
    background: var(--button-color);
    color: var(--button-text-color);
    text-align: center;
    display: inline-block;
}

input {
    padding: 8px 18px;
    border-radius: 12px;
    background: var(--background);
    color: var(--button-text-color);
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
}

.btn:hover {
    background: var(--button-color);
    color: var(--button-text-color);
}

.btn:disabled {
    opacity: 0.5;
}

.link {
    color: var(--accent-color);
}

.btn.btn-link,
.btn.btn-link:hover {
    background: transparent;
}

.btn-primary,
.btn-primary:hover {
    background: var(--accent-color);
    color: var(--background);
}

.btn.btn-large {
    font-size: 1.15rem;
    padding: 12px 20px;
}

.mr10 {
    margin-right: 10px;
}

.mb50 {
    margin-bottom: 50px;
}

.mb100 {
    margin-bottom: 100px;
}

.flex {
    display: flex;
    justify-content: flex-start;
}

.flex-wrap {
    flex-wrap: wrap;
}

.title-controls h1 {
    margin-bottom: 0px;
}

.title-controls {
    margin-bottom: 30px;
}

@media screen and (max-width: 700px) {
    .flex-big {
        display: block;
        justify-content: flex-start;
        height: auto;
    }
}

.action {
    cursor: pointer;
    padding: 10px 14px;
    flex-direction: row;
    margin-right: 12px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    font-size: 20px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 0.9rem;
}

.action:hover {
    opacity: 0.5;
}

.noborder {
    border: none;
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 1.7rem;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hideScroll::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hideScroll {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.card-shadow {
    box-shadow: 0px 5.7px 10px rgba(0, 0, 0, 0.2),
        0px 10.8px 15px rgba(0, 0, 0, 0.031), 0px 15.8px 10px rgba(0, 0, 0, 0.038),
        0px 22px 30px rgba(0, 0, 0, 0.047), 0px 32px 33.4px rgba(0, 0, 0, 0.062),
        0px 61px 80px rgba(0, 0, 0, 0.11);
}

/* .badge {
  background: var(--button-color);
  color: var(--button-text-color);
  font-size: 0.95em;
  padding: 4px 12px;
  border-radius: var(--border-raduis);
} */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.badge-link,
.badge-link:hover {
    background: var(--accent-color);
    color: var(--background);
    cursor: pointer;
}

.badge-link:hover {
    opacity: 0.7;
}

.relative {
    position: relative;
}

.centerY {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.black-box {
    border-radius: 30px;
    background-color: #000;
    color: #fff;
    padding: 40px;
    margin-bottom: 40px;
}

.black-box h1 {
    font-size: 2.5rem;
    font-weight: 900;
}

.btn-glow:hover {
    box-shadow: 0px 0px 0px 6px var(--accent-color);
}

.btn-glow {
    transition: box-shadow 0.35s ease;
}