/*--------------------------------------------------------------
VARS
--------------------------------------------------------------*/
:root {
    --white: #fff;
    --ebony: #58585A;
    --monza: #ED1C24;
    --gray: #ECEDEF;
    --alto: #D8D8D8;
    --spruce: #3E3E3E;
    --silver: #C3C8CB;
    --athens: #EBECEE;
    --mine: #202020;
    --alabaster: #F3F3F3;
    --dove: #707070;
    --c-silver: #C1C1C1;

    --danger: #F64E60;
    --success: #27ae60;
    --warning: #FFA800;
    --info: #2192FF;

    --font-name: 'Montserrat', sans-serif;
    --font-size: 13px;
    --font-weight: 500;

    --page-bg: var(--white);
    --link-color: var(--ebony);
    --transition-default: .3s;
    --border-default: 1px solid var(--alto);
}

/*--------------------------------------------------------------
RESET
--------------------------------------------------------------*/
html, body {
    background: var(--page-bg);
    overflow-x: hidden;
    color: var(--ebony);
    font-size: var(--font-size);
    font-family: var(--font-name);
    font-weight: var(--font-weight);
    min-height: 100vh;
    -webkit-text-size-adjust: none;
    margin: 0 !important;
}

*, :after, :before {
    box-sizing: border-box
}

a {
    display: inline-block;
    color: var(--link-color);
    transition: var(--transition-default);
}

a:hover, a:focus, a {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

ul, li, ol {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

img, button, input, textarea, fieldset {
    border: 0;
    color: var(--ebony);
}

button, input, option, select, textarea {
    font: inherit
}

textarea {
    resize: none;
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-size: 0;
}

button:focus, a:focus, input:focus, textarea:focus, select:focus, [contenteditable]:focus {
    outline: none
}

input:read-only, button:disabled {
    user-select: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

input {
    -webkit-user-select: text;
}

img {
    max-width: 100%;
    aspect-ratio: auto;
    max-height: 100%;
    object-fit: cover;
}

video, .plyr--video {
    max-width: 100%;
    max-height: 100%;
}

/*--------------------------------------------------------------
COLORS
--------------------------------------------------------------*/
.bg-white {
    background: var(--white);
}

.bg-ebony {
    background: var(--ebony);
}

.bg-monza {
    background: var(--monza);
}

.bg-gray {
    background: var(--gray);
}

.bg-alto {
    background: var(--alto);
}

.bg-spruce {
    background: var(--spruce);
}

.bg-silver {
    background: var(--silver);
}

.bg-athens {
    background: var(--athens);
}

.bg-mine {
    background: var(--mine);
}

.bg-success {
    background: var(--success);
}

.bg-danger {
    background: var(--danger);
}

.bg-warning {
    background: var(--warning);
}

.bg-info {
    background: var(--info);
}

.text-white {
    color: var(--white);
}

.text-ebony {
    color: var(--ebony);
}

.text-monza {
    color: var(--monza);
}

.text-gray {
    color: var(--gray);
}

.text-alto {
    color: var(--alto);
}

.text-spruce {
    color: var(--spruce);
}

.text-silver {
    color: var(--silver);
}

.text-athens {
    color: var(--athens);
}

.text-mine {
    color: var(--mine);
}

.text-dove {
    color: var(--dove);
}

/*--------------------------------------------------------------
BORDERS
--------------------------------------------------------------*/
.border-default {
    border: var(--border-default);
}

.border-success {
    border: 1px solid var(--success);
}

.border-danger {
    border: 1px solid var(--danger);
}

.border-warning {
    border: 1px solid var(--warning);
}

.border-info {
    border: 1px solid var(--info);
}

/*--------------------------------------------------------------
POSITIONS
--------------------------------------------------------------*/
.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.d-inline {
    display: inline;
}

.d-none {
    display: none;
}

.flex-justify-space-between {
    justify-content: space-between;
}

.flex-justify-space-around {
    justify-content: space-around;
}

.flex-justify-space-around {
    justify-content: space-around;
}

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

.flex-justify-end {
    justify-content: flex-end;
}

.flex-justify-center {
    justify-content: center;
}

.flex-align-center {
    align-items: center;
}

.flex-align-start {
    align-items: flex-start;
}

.flex-align-end {
    align-items: flex-end;
}

.flex-stretch {
    align-items: stretch;
}

.flex-stretch-none {
    align-items: flex-start;
}

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

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

.flex-column {
    flex-direction: column;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.text-center {
    text-align: center;
}

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

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

.to-right {
    right: 0;
    margin-right: 0;
}

.to-left {
    left: 0;
    margin-left: 0;
}

.to-top {
    top: 0;
    margin-top: 0;
}

.to-bottom {
    bottom: 0;
    margin-bottom: 0;
}

.to-center {
    left: 0;
    right: 0;
    margin: 0 auto;
}

.pos-fixed {
    position: fixed;
}

.pos-rel {
    position: relative;
}

.pos-abs {
    position: absolute;
}

.pos-static {
    position: static;
}

.pos-sticky {
    position: sticky;
    position: -webkit-sticky;
}

.pos-reset {
    position: inherit;
}

.mt-15 {
    margin-top: 15px;
}

.pt-0 {
    padding-top: 0 !important;
}

.mx-auto {
    margin: 0 auto;
}

/*--------------------------------------------------------------
SIZES
--------------------------------------------------------------*/
.h-100 {
    height: 100%;
}

.h-50 {
    height: 50%;
}

.max-h-100 {
    max-height: 100%;
}

.max-h-50 {
    max-height: 50%;
}

.min-h-100 {
    min-height: 100%;
}

.w-100 {
    width: 100%;
}

.w-50 {
    width: 50%;
}

.max-w-100 {
    max-width: 100%;
}

.max-w-50 {
    max-width: 50%;
}

.max-w-550-px {
    max-width: 550px;
}

.max-w-600-px {
    max-width: 600px;
}

.max-w-700-px {
    max-width: 700px;
}

.min-w-100 {
    min-width: 100%;
}

/*--------------------------------------------------------------
ANIMATIONS
--------------------------------------------------------------*/
.arrow {
    transition: var(--transition-default);
}

.an-arrow-rotate {
    transform: rotate(180deg);
}

.an-floating {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

@keyframes floating {
    from {
        transform: translate(0, -15px);
    }
    65% {
        transform: translate(0, 15px);
    }
    to {
        transform: translate(0, -15px);
    }
}

@-webkit-keyframes floating {
    from {
        transform: translate(0, -15px);
    }
    65% {
        transform: translate(0, 15px);
    }
    to {
        transform: translate(0, -15px);
    }
}

.an-floating-small {
    animation-name: floating-small;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

@keyframes floating-small {
    from {
        transform: translate(0, -5px);
    }
    65% {
        transform: translate(0, 5px);
    }
    to {
        transform: translate(0, -5px);
    }
}

@-webkit-keyframes floating-small {
    from {
        transform: translate(0, -5px);
    }
    65% {
        transform: translate(0, 5px);
    }
    to {
        transform: translate(0, -5px);
    }
}

.an-shadow-pulse-sm {
    -webkit-animation: shadow-pulse-sm 1s infinite; /* Safari 4+ */
    -moz-animation: shadow-pulse-sm 1s infinite; /* Fx 5+ */
    animation: shadow-pulse-sm 1s infinite; /* IE 10+, Fx 29+ */
}

@keyframes shadow-pulse-sm {
    0% {
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.3);
    }
    100% {
        box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
    }
}

@-webkit-keyframes shadow-pulse-sm {
    0% {
        box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.3);
    }
    100% {
        box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
    }
}

@media screen and (max-width: 991px) {
    .an-floating-small {
        animation: none !important;
    }
}

/*--------------------------------------------------------------
BUTTONS
--------------------------------------------------------------*/
.btn {
    border-radius: 30px;
    border: 1px solid transparent;
    box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, .2), 0 0 12px 0 rgba(0, 0, 0, .1);
    padding: 12px 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease-in-out, var(--transition-default);
}

.btn.btn-md {
    padding: 6px 30px;
}

.btn:not(.btn-loader):hover {
    box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, .4), 0 0 12px 0 rgba(0, 0, 0, .1);
}

.btn-arrow:after {
    content: 'arrow_forward_ios';
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: var(--white);
    margin-left: 15px;
}

.btn > span {
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
}

.btn.btn-md > span {
    font-size: 17px;
}

.btn-monza, .btn-ebony.btn-hovered:hover {
    background: var(--monza);
    border-color: var(--monza);
}

.btn-ebony, .btn-monza.btn-hovered:hover {
    background: var(--ebony);
    border-color: var(--ebony);
}

.btn-loader {
    position: relative;
    background: #e4e6ef !important;
    border: 1px solid #e5e5e5 !important;
    cursor: default;
    box-shadow: none !important;
}

.btn-loader > span {
    color: #a9a8a8;
}

.btn-custom.btn-loader {
    padding-right: 4.5rem;
}

.btn-loader:before {
    content: "";
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    border-radius: 50%;
    border-right: 2px solid transparent;
    webkit-animation: animation-spinner 0.5s linear infinite;
    animation: animation-spinner 0.5s linear infinite;
    border: 2px solid var(--silver);
    border-top-color: var(--white);
    height: 1.2rem;
    right: 1.2rem;
    width: 1.2rem;
}

.btn-loader:after {
    content: '';
}

@-webkit-keyframes animation-spinner {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes animation-spinner {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
FORM
--------------------------------------------------------------*/
.form:not(.not-margin) {
    margin: -7px -6px;
}

.form .form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.form .form-migrate-margin {
    width: 100%;
}

.form .form-input {
    background: var(--white);
    border: var(--border-default);
    border-radius: 10px;
    font-weight: 300;
    font-size: 13px;
    width: 100%;
    padding: 0 20px;
    box-shadow: 0 3px 6px #0000000F;
    min-height: 56px;
    transition: var(--transition-default);
}

.form textarea.form-input {
    padding: 15px 20px;
    min-height: 140px;
}

.form .form-migrate-margin,
.form *:not(.form-migrate-margin) > .form-input {
    margin: 7px 6px;
}

::-ms-input-placeholder {
    color: var(--ebony);
}

::placeholder {
    color: var(--ebony);
}

.form button[type="submit"] {
    margin: 15px 6px 0;
}

.form small.form-input-info {
    width: 100%;
    display: block;
    margin-top: 7px;
    color: #848487;
    font-size: 9px;
}

/* Uploader */
.file-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 7px 6px;
}

.file-uploader > input[type="file"] {
    display: none !important;
}

.file-uploader label {
    height: 140px;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: var(--transition-default);
    background: var(--athens);
    border: 2px dashed var(--c-silver);
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0 5px 12px -5px rgba(0, 0, 0, .1);
}

.file-uploader label:hover {
    background: var(--white);
}

.file-uploader label i {
    transition: var(--transition-default);
    color: var(--ebony);
    font-size: 30px;
}

.file-uploader label:hover > i {
    transform: translate(0, -5px);
}

.file-uploader label > span {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    font-size: 14px;
}

.file-uploader .uploader-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.file-uploader .uploader-preview-item {
    margin-top: 5px;
    width: 100%;
    padding: 5px 10px;
    border: var(--border-default);
    border-radius: 10px;
    background: var(--alabaster);
    position: relative;
    display: flex;
    align-items: center;
    box-shadow: 0 5px 12px -5px rgba(0, 0, 0, .1);
}

.file-uploader .uploader-preview-item > div {
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 30px;
}

.file-uploader .uploader-preview-item > div > span {
    display: block;
    max-width: 80%;
    margin-left: 10px;
    font-size: 12px;
}

.file-uploader .uploader-preview-item div.uploader-preview-image {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
}

.file-uploader .uploader-preview-item button {
    position: absolute;
    top: -9px;
    right: -8px;
    z-index: 10;
    background: var(--danger);
    border-radius: 100%;
    width: 20px;
    height: 20px;
    border: var(--border-default);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, .1);
    transition: var(--transition-default);
}

.file-uploader .uploader-preview-item button > span {
    font-size: 12px;
    color: var(--white);
}

.file-uploader .uploader-preview-item > button > span {
    font-size: 17px;
}

.valid-message {
    margin-bottom: 10px;
}

/* Checkbox */
.form .form-checkbox {
    margin: 7px 6px;
}

.form input[type="checkbox"] {
    display: none;
}

.form .form-checkbox label {
    display: flex;
    align-items: flex-start;
    font-weight: 400;
    font-size: 11px;
    line-height: 17px;
}

.form .form-checkbox label:before {
    color: var(--spruce);
    margin-right: 10px;
}

.form .form-checkbox label:before {
    content: 'check_box_outline_blank';
}

.form .form-checkbox input:checked ~ label:before {
    content: 'check_box';
}

.form .form-checkbox label a {
    text-decoration: underline;
}

/* Radio */
.form .form-radio {
    margin: 7px 6px;
}

.form input[type="radio"] {
    display: none;
}

.form .form-radio label {
    display: flex;
    align-items: center;
    font-weight: 400;
}

.form .form-radio label:before {
    color: var(--monza);
    margin-right: 10px;
}

.form .form-radio label:before {
    content: 'radio_button_unchecked';
}

.form .form-radio input:checked ~ label:before {
    content: 'radio_button_checked';
}

.form .form-radio label a {
    text-decoration: underline;
}

.form .input-valid-error,
.form select.input-valid-error + .form-select .form-select-title > .form-select-item {
    border-color: var(--danger) !important;
}

.form label.input-valid-error:before {
    color: var(--danger) !important;
}

/* select */
.form .form-fieldset-select {
    width: 100%;
    margin: 0 8px;
}

select.form-select {
    display: none;
    width: 100%;
}

.form-select {
    width: 100%;
    margin: 7px 6px;
    position: relative;
}

.form-fieldset-select label.form-label {
    margin-left: 0;
}

.form .form-fieldset-select .form-select {
    margin: 0;
}

.form-select ul {
    max-height: 213px;
    overflow-y: auto;
    overflow-x: hidden;
    border-bottom: 1px solid var(--gray);
}

.form-select li,
.form-select ul {
    margin: 0 !important;
    padding: 0;
    list-style-type: none;
}

.form-select .form-select-item {
    margin-bottom: 0;
}

.form-select .form-select-item span.material-icons-outlined:not(.arrow) {
    font-size: 13px;
}

.form-select input {
    display: none !important;
}

.form-select.form-select-abs .form-select-title {
    position: relative;
}

.form-select .form-select-title .form-select-item {
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-select .form-select-title .form-select-label {
    border-radius: 10px;
    padding-right: 15px;
    box-shadow: 0 3px 6px #0000000F;
}

.form-select.form-select-sm .form-select-title .form-select-label {
    padding-right: 5px;
}

.form-select.bg-reverse .form-select-title .form-select-item {
    background: var(--white);
}

.form-select .form-select-title .active-select ~ label {
    border-radius: 10px 10px 0 0;
}

.form-select .form-select-title input ~ label > .arrow {
    transition: var(--transition-default);
}

.form-select .form-select-title .active-select-arrow ~ label > .arrow {
    transform: rotate(180deg);
}

.form-select .options-select-value-placeholder {
    color: var(--spruce);
}

.form-select .options-select-value {
    white-space: nowrap;
    text-overflow: ellipsis;
    /*max-width: 230px;*/
    max-width: 100%;
    overflow: hidden;
    font-weight: 300;
    font-size: 13px;
}

.form-select .form-select-item {
    padding: 5px 20px;
    border: var(--border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    min-height: 56px;
    transition: var(--transition-default);
}

.form-select-sm .form-select-item {
    min-height: 20px !important;
    font-size: 11px;
    padding: 7px 5px;
}

.form-select-sm .form-select-title .arrow, .form-select-sm .check-icon {
    font-size: 13px;
}

.form-select-sm .check-icon {
    font-size: 13px;
    padding-left: 5px;
}

.form-select .form-select-item span:not(.material-icons-outlined) {
    max-width: 97%;
    font-weight: 300;
    font-size: 13px;
}

.form-select li.none.form-select-item {
    cursor: default;
}

.form-select[data-selecter-target], .form-select.form-select-abs:not(.form-select-outside) .form-select-items {
    position: absolute;
    z-index: 30;
}

.form-select[data-selecter-target] .form-select-items {
    box-shadow: 0 5px 14px -5px rgba(0, 0, 0, .15);
}

.form-select .form-select-items,
.form-select .form-select-items li:last-child label {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.form-select.search-results .form-select-items,
.form-select-abs.form-select .form-select-items {
    box-shadow: 0 0 12px rgba(0, 0, 0, .1);
}

.form-select .form-select-items {
    display: none;
}

.form-select .form-select-items input:checked ~ label,
.form-select .form-select-items .form-select-item:not(.none):hover {
    background: var(--athens) !important;
}

.form-select.bg-reverse .form-select-items input:checked ~ label,
.form-select.bg-reverse .form-select-items .form-select-item:not(.none):hover {
    background: var(--white) !important;
}

.form-select .form-select-items .form-select-item {
    background: var(--white)
}

.form-select .form-select-items li:last-child label,
.form-select .form-select-items li.form-select-item:last-child {
    border-bottom: 0;
}

.form-select .form-select-items li .form-select-item {
    border-top: none;
}

.form-select.search-results {
    top: -1px;
}

.form-select.search-results .form-select-item {
    border-bottom: 0;
    overflow: hidden;
}

.form-select input[disabled] ~ label {
    cursor: default;
    background: var(--dove) !important;
}

/*--------------------------------------------------------------
NOTIFY
--------------------------------------------------------------*/
.notify-container {
    position: fixed;
    width: 300px;
    padding: 8px;
}

.notify-container > .notify-box:not(:first-child) {
    margin-top: 5px;
}

.notify-container .notify-box {
    font-weight: 500;
    padding: 15px 10px;
    border-radius: 6px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, .15);
    font-size: 12px;
    width: 100%;
    position: relative;
    display: none;
}

.notify-container .notify-box:hover {
    opacity: 1;
}

.notify-container .notify-box > * {
    text-shadow: 0 0 4px rgba(0, 0, 0, .05);
}

.notify-container .notify-content {
    max-width: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}

.notify-container .notify-content > span.notify-content-text {
    width: 100%;
    font-size: 11px;
}

.notify-container-close .notify-content {
    max-width: 94%;
}

.notify-container .notify-icon {
    margin-right: 5px;
}

.notify-container.bottom-left {
    bottom: 0;
    left: 0;
}

.notify-container.bottom-right {
    bottom: 0;
    right: 0;
}

.notify-container.top-left {
    top: 0;
    left: 0;
}

.notify-container.top-right {
    top: 0;
    right: 0;
}

.notify-container.top-center, .notify-container.bottom-center {
    right: 0;
    left: 0;
    margin: 0 auto;
}

.notify-container.bottom-center {
    bottom: 0;
}

.notify-container.top-center {
    top: 0;
}

.notify-container.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.notify-container .notify-close {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 10;
}

.notify-container .notify-close > span {
    font-size: 16px;
}

@media screen and (max-width: 420px) {
    .notify-container-close .notify-content {
        max-width: 96%;
    }

    .notify-container .notify-box {
        float: right;
        max-width: 90%;
    }

    .notify-container .notify-icon {
        display: none;
    }
}

/*--------------------------------------------------------------
OTHERS
--------------------------------------------------------------*/
.img-fluid {
    border: var(--border-default);
    max-width: 100%;
    height: auto;
}

.bg-fluid {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cursor-pointer {
    cursor: pointer;
}

.font-0 {
    font-size: 0;
}

.m-0 {
    margin: 0;
}

.icon-pseudo:after, .icon-pseudo:before {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.link-hover:hover {
    color: var(--monza);
}

.text-underline {
    text-decoration: underline;
}

/*--------------------------------------------------------------
MEDIA QUERIES
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    .btn > span {
        font-size: 14px;
    }

    .form .form-input {
        font-size: 14px;
    }
}