@font-face {
    font-family: 'Mariupol Symbols';
    src: url('https://assets.dntrade.com.ua/fonts/MariupolSymbols.eot');
    src: local('Mariupol Symbols'), local('MariupolSymbols'),
    url('https://assets.dntrade.com.ua/fonts/MariupolSymbols.eot?#iefix') format('embedded-opentype'),
    url('https://assets.dntrade.com.ua/fonts/MariupolSymbols.woff2') format('woff2'),
    url('https://assets.dntrade.com.ua/fonts/MariupolSymbols.woff') format('woff'),
    url('https://assets.dntrade.com.ua/fonts/MariupolSymbols.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Mariupol';
    src: url('https://assets.dntrade.com.ua/fonts/Mariupol-Medium.eot');
    src: local('Mariupol Medium'), local('Mariupol-Medium'),
    url('https://assets.dntrade.com.ua/fonts/Mariupol-Medium.eot?#iefix') format('embedded-opentype'),
    url('https://assets.dntrade.com.ua/fonts/Mariupol-Medium.woff2') format('woff2'),
    url('https://assets.dntrade.com.ua/fonts/Mariupol-Medium.woff') format('woff'),
    url('https://assets.dntrade.com.ua/fonts/Mariupol-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Mariupol';
    src: url('https://assets.dntrade.com.ua/fonts/Mariupol-Regular.eot');
    src: local('Mariupol'), local('Mariupol-Regular'),
    url('https://assets.dntrade.com.ua/fonts/Mariupol-Regular.eot?#iefix') format('embedded-opentype'),
    url('https://assets.dntrade.com.ua/fonts/Mariupol-Regular.woff2') format('woff2'),
    url('https://assets.dntrade.com.ua/fonts/Mariupol-Regular.woff') format('woff'),
    url('https://assets.dntrade.com.ua/fonts/Mariupol-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Mariupol';
    src: url('https://assets.dntrade.com.ua/fonts/Mariupol-Bold.eot');
    src: local('Mariupol Bold'), local('Mariupol-Bold'),
    url('https://assets.dntrade.com.ua/fonts/Mariupol-Bold.eot?#iefix') format('embedded-opentype'),
    url('https://assets.dntrade.com.ua/fonts/Mariupol-Bold.woff2') format('woff2'),
    url('https://assets.dntrade.com.ua/fonts/Mariupol-Bold.woff') format('woff'),
    url('https://assets.dntrade.com.ua/fonts/Mariupol-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

:root {
    --bs-font-sans-serif: 'Mariupol', sans-serif !important;
}

html, body {
    margin: 0;
    min-height: 100%;
}

.card .card-body {
    font-family: var(--bs-font-sans-serif);
}

[v-cloak] > * {
    display: none !important;
}

.main-logo {
    position: absolute;
    top: 40px;
    left: 54px;
    width: 150px;
    z-index: 2;
}

.bg-gray {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.card-header.card-rounded {
    border-radius: 32px 32px 0 0;
}

.card-footer.card-rounded {
    border-radius: 0 0 32px 32px;
}

.text-primary {
    color: #603EC8 !important;
}

.text-gradient.text-primary {
    background-image: linear-gradient(195deg, #603EC8 0%, #603EC8 100%);
}

.text-primary[role="button"]:hover, a.text-primary:hover {
    opacity: 0.9;
}

.btn {
    border-radius: 13px;
    box-shadow: unset !important;
}

.btn-primary {
    border: unset !important;
}

.bg-gradient-primary {
    background-color: #603EC8;
    background-image: linear-gradient(195deg, #603EC8 0%, #603EC8 100%);
    transition: all 0.15s ease-in;
}

.bg-gradient-primary:hover {
    opacity: 0.9;
}

.form-control::placeholder {
    color: transparent !important;
}

.input-group.input-group-outline .form-label {
    pointer-events: none;
    z-index: 10;
}

.input-group.input-group-outline.is-focused .form-label, .input-group.input-group-outline.is-filled .form-label {
    color: #000;
}

.invalid-feedback {
    color: #e91e63;
    margin-top: 0;
}

.was-validated .has-error .invalid-feedback {
    display: block;
}

.input-group.input-group-outline.is-focused .form-label+.form-control,
.input-group.input-group-outline.is-filled .form-label+.form-control {
    border-color: #000 !important;
    border-top-color: transparent !important;
    box-shadow: inset 1px 0 #000, inset -1px 0 #000, inset 0 -1px #000;
}

.input-group.input-group-outline.is-focused .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-filled .form-label:after {
    border-top-color: #000;
    box-shadow: inset 0 1px #000;
}

.input-group.disabled {
    pointer-events: none;
    opacity: 0.4;
}

.input-group.disabled.is-filled .form-label:before, .input-group.disabled.is-filled .form-label:after, .input-group.disabled.is-filled .form-label+.form-control {
    box-shadow: unset !important;
}

.material-symbols-rounded {
    margin-right: 0.25rem;
}

.sidenav {
    z-index: 1000;
}

.sidenav-open-button {
    display: none;
    position: fixed;
    background: #fff;
    border-radius: 50%;
    top: 30px;
    left: 30px;
    font-size: 1.25rem;
    z-index: 990;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.16);
    cursor: pointer;
}

.sidenav-backdrop {
    display: none;
}

.gradient-blob-default {
    position: absolute;
    top: -80px;
    left: 140px;
    width: 1351px;
    height: 1365px;
    border-radius: 50%;
    background: radial-gradient(circle at 70% 40%, #7B4CFF 0%, #EC407A 45%, #ffffff 100%);
    opacity: 0.08;
    filter: blur(68px);
    pointer-events: none;
}

.gradient-blob {
    position: absolute;
    top: -80px;
    left: 140px;
    width: 1480px;
    height: 1365px;
    border-radius: 50%;
    background: conic-gradient(rgba(52, 168, 82, 0) 0deg, rgba(52, 168, 82, 1) 38.9738deg, rgba(255, 211, 20, 1) 62.3678deg, rgba(255, 70, 65, 1) 87.0062deg, rgba(49, 134, 255, 1) 107.428deg, rgba(49, 134, 255, 0.5) 204.48deg, rgba(49, 134, 255, 0) 308.88deg, rgba(52, 168, 82, 0) 360deg);
    opacity: 0.4;
    filter: blur(68px);
    pointer-events: none;
}

@media (max-width: 1199.98px) {
    .sidenav-open-button {
        display: block;
    }

    .g-sidenav-show.g-sidenav-pinned .sidenav-open-button {
        display: none;
    }

    .g-sidenav-show.g-sidenav-pinned .sidenav-backdrop {
        display: block;
        background: rgb(0 0 0 / 30%);
        position: fixed;
        inset: 0;
        z-index: 10;
    }
}

@media (max-width: 992px) {
    .main-logo {
        filter: invert(1);
        z-index: 1;
    }
}

.mfp-bg {
    z-index: 10000;
}

.mfp-wrap {
    z-index: 10001;
}

.image-container img {
    border-radius: 0.75rem;
}

.video-wrapper, .vid .video-wrapper {
    position: relative;
}

.video-play-button, .vid .video-play-button {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    display: block;
    box-sizing: content-box;
    width: 2rem;
    height: 2.75rem;
    padding: 1.125rem 1.25rem 1.125rem 1.75rem;
    border-radius: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.video-play-button:after, .vid .video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    display: block;
    width: 3.375rem;
    height: 3.375rem;
    border-radius: 50%;
    background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%);
    transition: all 200ms;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.video-play-button span, .vid .video-play-button span {
    position: relative;
    display: block;
    z-index: 3;
    top: 0.375rem;
    left: 0.25rem;
    width: 0;
    height: 0;
    border-left: 1.625rem solid #fff;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
}

.navbar-vertical .navbar-nav .nav-link {
    font-size: 0.875rem;
}

.modal-header .btn-close {
    filter: invert(1);
    margin-right: 0.25rem;
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}

.notyf__toast {
    border-radius: 10px;
}

.page-link.active, .active>.page-link {
    color: #fff;
    background: linear-gradient(195deg, #42424a 0%, #191919 100%);
    border: unset;
}

.page-link:focus {
    box-shadow: unset;
}

.page-link:disabled {
    pointer-events: none;
}

.table-responsive tbody tr:hover {
    background-color: #f5f5f5;
}

.table-responsive th input {
    border: 0;
    padding: 3px 0;
    outline: 0;
    border-radius: 0;
    width: 100%;
    transition-duration: .3s;
}

.table-responsive th input::placeholder {
    color: #737373;
    opacity: 0.7;
}

.table-responsive th input:focus, .table-responsive th input:hover, .table-responsive th select:hover {
    box-shadow: 0 1px 0 #000;
}

.table-responsive th select {
    border: 0;
    padding: 3px 0;
    outline: 0;
    border-radius: 0;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    transition-duration: .3s;
}

.table-responsive .mx-datepicker-range {
    width: 225px;
}

.table-responsive .mx-datepicker .mx-icon-calendar {
    display: none;
}

.table-responsive .mx-datepicker .mx-input {
    text-align: center;
    height: auto;
    text-transform: uppercase;
    font-size: 0.65rem;
    color: #737373;
    font-weight: 700;
    box-shadow: none;
    transition-duration: .3s;
}

.table-responsive th .mx-datepicker .mx-input:hover {
    box-shadow: 0 1px 0 #000;
}

.table-responsive .table tfoot {
    border-top: 1px dashed #e5e5e5;
}

.dropdown {
    display: inline-block;
}

.dropdown .dropdown-menu {
    transition: unset !important;
    border: 1px solid #e5e5e5;
}

.dropdown.dropdown-hover .dropdown-menu, .dropdown .dropdown-menu {
    display: none;
}

.dropdown.dropdown-hover:hover>.dropdown-menu, .dropdown .dropdown-menu.show {
    display: block;
}

.dropdown .dropdown-menu:before {
    content: unset;
    display: none;
}

.dropdown:not(.dropdown-hover) .dropdown-menu.show {
    margin-top: 2rem !important;
}

.hover-dark:hover {
    color: var(--bs-gray-dark);
}

.swiper-slide .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}