﻿.modal-body .loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

.uppercase-text {
    text-transform: uppercase;
}


.option-with-icon {
    padding-left: 50px;
    background-repeat: no-repeat;
    display: inline-block;
}

.dropdown-card {
    background-image: url("/assets/dropdown-card.svg?d=10012022");
    background-position: 9px center;
}

.dropdown-visa {
    background-image: url("/assets/dropdown-visa.svg?d=05082021");
    background-position: 8px center;
    display: inline-block;
    padding-bottom: 3px;
}

.dropdown-paypal {
    background-image: url("/assets/dropdown-paypal.svg");
    background-position: -13px center;
}

.dropdown-mc {
    background-image: url("/assets/dropdown-mc.svg");
    background-position: 7px center;
}

.dropdown-mir {
    background-image: url("/assets/dropdown-mir.svg");
    background-position: 5px center;
}

.dropdown-plus {
    background-image: url("/assets/dropdown-plus.svg");
    background-position: 15px center;
}

.dropdown-neteller {
    background-image: url("/assets/dropdown-neteller.svg");
    background-position: 0 center;
}


.card-payment-select a.dropdown-item {
    padding-left: 8px !important;
}

.input-with-label {
    z-index: 200 !important;
}

.input-error {
    color: #f66;
    margin: 0.5em 0;
}

.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    pointer-events: none;
}

.page.overlays .list .row .item div.img {
    height: 140px;
}

.page.overlays .add-overlay {
    height: 136px;
    line-height: 136px;
    top: 0;
    box-sizing: border-box;
}

.gu-mirror .links {
    display: none !important;
}
/* high-performance display:none; helper */
.gu-hide {
    left: -9999px !important;
}
/* added to mirrorContainer (default = body) while dragging */
.gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
/* added to the source element while its mirror is dragged */
.gu-transit {
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
}

.dropdown-menu ul li a {
    color: #ffffff !important;
}

.modal-body .loading a {
    pointer-events: none;
}

.colors a {
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0);
}

    .colors a.active::after {
        width: 36px !important;
        height: 36px !important;
    }

.side-group.halfsize {
    width: 80px;
    vertical-align: top;
    display: inline-block;
    margin-right: 45px;
    vertical-align: bottom;
}

    .side-group.halfsize.right {
        margin-right: 0px;
    }

.side-group .input-with-label .dropdown-menu {
    background: rgba(40,45,51,0.95) !important;
}

.side-group .input-with-label .dropdown-toggle .filter-option-inner-inner {
    color: #eee;
}

.bars.open .contain {
    padding-bottom: 30px !important;
}

.text-edit a.active {
    background: #444c54;
}

.widget .side-group .text-edit a {
    display: inline-block;
    vertical-align: middle;
    width: 36px;
    height: 32px;
    border-radius: 0;
    margin-right: -1px;
    position: relative;
    text-align: center;
    line-height: 28px;
    border: 1px solid #aab1b8;
}

.widget .side-group .text-edit {
    margin: 0 -20px 0 -20px;
}

    .widget .side-group .text-edit a .text-middle svg,
    .widget .side-group .text-edit a .text-top svg,
    .widget .side-group .text-edit a .text-bottom svg {
        margin: 0;
        position: relative;
    }

    .widget .side-group .text-edit a .text-middle svg{
        width: 16px;
        height: 19px;
        top: 5px;
    }
    .widget .side-group .text-edit a .text-top svg{
        width: 15px;
        height: 14px;
        top: 2px;
        left: 2px;
    }
    .widget .side-group .text-edit a .text-bottom svg {
        width: 16px;
        height: 19px;
        top: 2px;
        left: -2px;
    }
    .widget .side-group .text-edit a .text-underline svg {
        position: relative;
        top: 3px;
    }
    .widget .side-group .text-edit a .text-italic svg {
        position: relative;
        left: 3px;
    }
    .widget .side-group .text-edit a:first-child {
        border-radius: 50% 0 0 50%;
    }

    .widget .side-group .text-edit a:last-child {
        border-radius: 0 50% 50% 0;
    }

.colors a.transp {
    border: 1px dotted #5e656c;
}

.no-pointer-events {
    pointer-events: none;
}

.modal-dialog .alert {
    font-size: 14px;
    max-width: 320px;
    margin: 0 auto;
    margin-bottom: 10px;
    text-align: center;
}

.dsp header a:not([href]):not([tabindex]) {
    color: #ffffff !important;
}

.loading-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    background: url(/template/img/loader.gif) center center no-repeat rgba(0, 0, 0, 0.2);
    z-index: 10000;
}

.help-block {
    margin-top: 1em;
}

    .help-block.with-success {
        color: #87a229;
        font-size: 13px;
        right: 0;
        top: -20px;
        background-color: #f8f8f9;
        width: 100%;
        text-align: center;
        z-index: 90;
    }

a {
    cursor: pointer;
}

    a[disabled] {
        opacity: 0.4;
        pointer-events: none;
    }

.tournament .top-image {
    background-image: unset;
}

.disabled-block,
.disabled-link {
    opacity: 0.4;
    pointer-events: none;
}

.btn.disabled-link {
    opacity: initial;
    background-color: #aab1B8;
}

.player-loss {
    opacity: 0.3;
}

.title a {
    color: #ffffff;
}

.side-group .subtitle {
    margin-bottom: 1.5em;
    font-size: 12px;
    color: #5e656c;
    text-transform: uppercase;
    line-height: 1.5em;
}

input:disabled {
    cursor: not-allowed;
}

.tournament .tab-content #connections .teamlink input {
    width: calc(100% + 40px);
    text-overflow: ellipsis;
    padding-right: 55px;
}

.tournament .tab-content #connections .teamlink .copy {
    right: 0px;
}

.toast-message-top-right {
    top: 70px;
    right: 20px;
    pointer-events: unset !important;
}

.toast-message-bottom-right {
    bottom: 10px;
    right: 20px;
    pointer-events: unset !important;
}

.modal-recovery-password .links a {
    color: #888e94 !important;
}

    .modal-recovery-password .links a:hover {
        text-decoration: underline !important;
    }

.modal-auth .forget-password a:hover {
    color: #f05a00 !important;
    text-decoration: underline !important;
}

.modal-hearthstone .form .acceptBtn {
    left: 0px;
}

.settings .personal {
    padding-left: 0px !important;
}

.delete-integration-modal .modal-content {
    padding-left: 0px;
    padding-right: 0px;
}

.page-link:hover,
.page-link {
    background-color: unset !important;
    border-color: unset !important;
    border: none;
}

.navigation .page-link:focus {
    box-shadow: none;
}

.modal-dialog.modal-lg .alert {
    max-width: unset !important;
}

input[readonly] {
    cursor: default;
    background-color: #f8f8f9;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .page.live-broadcast.chat-open .chat iframe {
        width: 100%;
        height: 500px;
    }
}

.page.live-broadcast .head .player iframe {
    width: 100%;
}

.settings .tabs .tabs-wrap {
    overflow: hidden;
}

.page.live-broadcast .head .user-info .user {
    cursor: default;
}

.chat-wrapper {
    position: relative;
    height: 100%;
}

.overlay-edit-panel {
    margin-right: 0;
    top: 10px;
    position: fixed;
    left: 0;
    padding-left: 250px;
    padding-right: 250px;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

    .overlay-edit-panel .btn {
        border-radius: 32px;
    }

    .overlay-edit-panel span.checkbox-right-label {
        margin-left: 65px;
        padding-top: 5px;
    }

    .overlay-edit-panel input[type="checkbox"] + span {
        z-index: 10;
        position: absolute;
        width: 60px;
        height: 30px;
        border-radius: 20px;
        top: 0px;
        left: 0;
        background-color: #666f79;
        border: 1px solid #444c54;
        cursor: pointer;
    }

        .overlay-edit-panel input[type="checkbox"] + span:after {
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
            width: 26px;
            height: 26px;
            border: 1.2px solid #f8f8f9;
            background-color: #c4c8cc;
            left: 1px;
            top: 1px;
            border-radius: 50%;
            background: -moz-linear-gradient(180deg, rgba(196,200,204,1) 0%, rgba(223,230,234,1) 100%);
            background: -webkit-linear-gradient(180deg, rgba(196,200,204,1) 0%,rgba(223,230,234,1) 100%);
            background: linear-gradient(180deg, rgba(196,200,204,1) 0%,rgba(223,230,234,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4c8cc', endColorstr='#dfe6ea',GradientType=1 );
        }

    .overlay-edit-panel input[type="checkbox"]:checked + span {
        background-color: #7ed321;
    }

        .overlay-edit-panel input[type="checkbox"]:checked + span:after {
            left: 31px;
        }

@media (max-width: 1600px) {
    .overlay-edit-panel {
        transform: scale(0.8);
        padding-left: 135px;
    }
}

.test-mode-wide-button {
    height: auto !important;
}

@media (max-width: 1300px) {
    .overlay-edit-panel {
        position: fixed !important;
        bottom: 0;
        top: auto;
        padding-left: 20px;
        padding-right: 0;
        left: 0;
    }
}

@media (max-width: 1200px) {
    .overlay-edit-panel {
        margin-left: 50%;
        left: 0;
        -webkit-transform: translate(-50%, 0) scale(0.75);
        -ms-transform: translate(-50%, 0) scale(0.75);
        transform: translate(-50%, 0) scale(0.75);
        padding-left: 0;
        white-space: nowrap;
    }
}

.overlay-edit-panel .btn-group {
    display: inline-block;
    vertical-align: middle;
    margin-right: 25px;
}

    .overlay-edit-panel .btn-group a {
        display: inline-block;
        vertical-align: middle;
    }

        .overlay-edit-panel .btn-group a.disabled {
            opacity: 0.5;
        }

        .overlay-edit-panel .btn-group a:not(.btn) {
            width: 40px;
            height: 40px;
            border: 1px solid #aab1b8;
            border-radius: 50%;
            text-align: center;
            line-height: 45px;
            margin: 0 5px;
        }

    .overlay-edit-panel .btn-group .btn-transparent {
        font-size: 12px;
        font-weight: bold;
        color: #c6ced5;
        height: 38px;
        line-height: 38px;
        padding: 0 30px;
    }

    .overlay-edit-panel .btn-group a svg {
        fill: #aab1b8;
        width: 20px;
        height: 20px;
    }

    .overlay-edit-panel .btn-group a .undo svg,
    .overlay-edit-panel .btn-group a .redo svg {
        width: 23px;
    }

.no-touch .overlay-edit-panel .btn-group a:hover svg {
    fill: #f05a00;
}

.overlay-edit-panel .btn-group:last-child {
    margin-right: 0;
}

.right-sidebar .btn.btn-block {
    display: block;
    width: 100%;
    left: 0px;
    border-radius: 32px;
}

.overlay-canvas {
    width: 1920px;
    height: 1080px;
    background-position: center;
    background-size: cover;
    position: relative;
    display: block;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

.draggable {
    cursor: grab;
}

    .draggable.dragging {
        cursor: grabbing;
    }

.ng-draggable {
    transition: all 0.5s ease-in-out;
}

    .ng-draggable.ng-dragging,
    .ng-draggable.ng-resizing {
        transition: none;
    }

.overlay-canvas .snap-line {
    border-left: 1px dashed #f05a00;
    border-top: 1px dashed #f05a00;
    position: absolute;
    width: 1920px;
    height: 1px;
}

.overlay-canvas .snap-rect {
    border: 1px dashed #f05a00;
    position: absolute;
}

.overlay-canvas .snap-line.vertical {
    width: 1px;
    height: 1080px;
}

.snap-line.center {
    border-left: 1px dashed #88c;
    border-top: 1px dashed #88c;
}

.overlay-canvas.faded {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/template/img/overlays/background.jpg");
}

.overlay-edit-panel {
    height: 60px;
}

.no-widgets-label {
    text-transform: uppercase;
    color: #888;
    padding: 1em;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.menu-library {
    display: flex;
    flex-direction: row;
    min-height: calc(70vh - 125px);
    color: #000;
    margin-left: -35px;
    width: calc(100% + 71px);
    border-top: 1px solid #edeeef;
    margin-top: 30px;
    font-size: 13px;
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .menu-library {
        width: calc(100% + 61px);
        min-height: calc(100vh - 190px);
    }

    .modal-widget .modal-dialog:after {
        display: none;
    }
}

.no-widget-types {
    display: flex;
    width: 100%;
    height: 100%;
}

.no-widget-types-text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #777;
    font-size: 16px;
    width: 100%;
    height: 100%;
    position: relative;
    top: -15px;
}

.search-library {
    background: #fff;
    min-height: 400px;
    color: #999;
    margin-left: -35px;
    width: calc(100% + 65px);
    border-top: 1px solid #edeeef;
    margin-top: 30px;
    font-size: 13px;
    display: flex;
}

    .search-library > div {
        padding-top: 20px;
        display: flex;
        width: 100%;
        background: #fff;
        flex-direction: column;
        margin-bottom: -20px;
    }

        .search-library > div > div {
            cursor: pointer;
            display: block;
            padding: 8px 20px 8px 40px;
        }

    .search-library .widget-type {
        color: #000;
    }

    .search-library > div > div.selected {
        background: #edeeef;
    }

.modal-add-widget .modal-body {
    padding-bottom: 0px;
}

.modal-add-widget .modal-content {
    margin: 20px 0;
}

.modal-add-widget .current-content {
    margin-bottom: 20px;
}

.menu-library div.upmenu {
    width: 50%;
    box-sizing: border-box;
    border-right: 1px solid #edeeef;
}

.menu-library div.submenu {
    width: 50%;
}

.menu-library div.upmenu {
    background: #fff;
}

.menu-library div.submenu {
    background: rgb(248, 248, 249);
}

.menu-library div.upmenu,
.menu-library div.submenu {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    margin-bottom: -20px;
}

.menu-library div > div {
    cursor: pointer;
    padding: 8px 20px 8px 40px;
}

.menu-library div.upmenu > div.selected,
.menu-library div.submenu > div.selected {
    background: #edeeef;
}

.widget-panel .menu {
    min-height: 400px;
    box-sizing: border-box;
}

.widget-panel ul {
    padding: 0px !important;
}

.widget-panel .single-list li {
    margin-left: -35px;
}

    .widget-panel .single-list li.active a {
        color: #fff !important;
    }

    .widget-panel .single-list li:hover a {
        color: #000;
    }

.modal-widget .widget-panel .menu > ul {
    width: calc(100% + 65px) !important;
}

    .modal-widget .widget-panel .menu > ul > li {
        width: calc(50% + 3px);
    }

.widget-panel .widget-list li.active > a {
    background: #444c54;
}

.overlay-place {
    position: fixed;
    right: 308px;
    left: 0px;
    height: calc(100vh - 60px);
    overflow: hidden;
}

.no-touch .modal-overlaytype .item.coming-soon {
    opacity: 0.5;
}

    .no-touch .modal-overlaytype .item.coming-soon::after {
        content: "Coming soon";
        position: absolute;
        color: #333;
        width: 100%;
        text-align: center;
        font-size: 10px;
        margin-top: 20px;
        text-transform: uppercase;
        z-index: 1000;
    }

    .no-touch .modal-overlaytype .item.coming-soon:hover {
        top: 0;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
        border: 2px solid transparent;
    }

.edit-widget-handler {
    background: #000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 0.3em 1em;
    transform: translateY(-100%);
    position: absolute;
    left: 0;
}

.edit-widget-wrapper {
    border: 1px dotted rgba(255, 255, 255, 0.3);
    position: absolute;
    box-sizing: border-box;
    cursor: grab;
}

.edit-widget-overflow-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    /*overflow: hidden;*/
}

.edit-widget-wrapper.selected {
    border: 1px dashed #fff;
}

.edit-widget-wrapper.disabled {
    display: none;
}

.edit-widget-wrapper.ng-dragging {
    cursor: grabbing;
}

ul.widget-list > li > a {
    display: flex;
    flex-direction: row;
    padding-right: 10px;
    align-items: stretch;
}

    ul.widget-list > li > a > .widget-title {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }

ul.widget-list > li a > .links {
    position: relative;
    display: flex;
    right: inherit;
    white-space: nowrap;
    margin-left: 5px;
    margin-right: 30px;
}

li.widget-layer {
    list-style: none !important;
}

    li.widget-layer a {
        padding-left: 70px;
        font-size: 13px;
        line-height: 16px;
        position: relative;
        padding: 6px 40px;
        display: block;
        padding-right: 50px;
    }

        li.widget-layer a svg {
            width: 10px;
            height: 10px;
            margin-right: 10px;
            position: relative;
            top: -1px;
        }

        li.widget-layer a > .links {
            position: relative;
            display: flex;
            right: inherit;
            white-space: nowrap;
            margin-left: 5px;
            margin-right: 30px;
        }

    li.widget-layer > a > .links > a {
        margin-top: 0px !important;
    }

        li.widget-layer > a > .links > a svg {
            margin-right: 5px !important;
        }

    li.widget-layer > a > .links .switcher {
        margin-top: -5px;
    }

ul.widget-list > li > a > .links > a {
    margin-top: 3px !important;
}

    ul.widget-list > li > a > .links > a svg {
        margin-right: 5px !important;
    }

ul.widget-list > li > a > .links .switcher {
    margin-top: -4.5px;
}
ul.widget-list > li > a.active > .links .switcher,
ul.widget-list > li.open > a > .links .switcher {
    margin-top: -12px;
}
.widget-panel ul li.widget-layer a svg {
    top: 1px;
}
.widget-panel ul li.widget-layer .links .remove {
    top: 3px;
}
.widget-panel ul li.widget-layer .links .switcher {
    top: 1px;
}
.add-donate-variation {
    margin-left: 25px;
}
.widget-panel ul li a.add-donate-variation svg {
    top: 1px;
}
.widget-panel ul li .donate-variant .btn {
    line-height: 32px;
}
.w-submenu.single-variant {
    margin-left: 12px;
}

    .w-submenu.single-variant li.widget-layer .links {
        margin-right: 42px;
    }

.add-layer.single-variant {
    padding-left: 0px !important;
    margin-left: 0px !important;
}

.donate-variant .btn.disabled {
    background: #5e5e5e;
}

span.links a.permission-warning {
    margin-right: 10px !important;
    color: #f55;
}

.ng-resizable {
    position: absolute;
    box-sizing: border-box;
}

.ng-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none;
}

.info-banners {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    font-size: 14px;
    z-index: 5000;
}

.problems-banner {
    background: rgba(255, 0, 0, 0.5);
    padding: 1em;
    display: block;
    position: relative;
    font-size: 14px;
    z-index: 5000;
}

    .problems-banner strong {
        margin-right: 1em;
    }

    .problems-banner a {
        font-weight: bold;
        text-decoration: underline !important;
    }

.edit-widget-wrapper.selected > .ng-resizable-handle::after {
    position: absolute;
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    top: 50%;
    left: 50%;
    margin: -3px 0 0 -3px;
    border: 1px solid #fff;
}

.ng-resizable-handle.ng-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    height: 100%;
    top: 0;
}

.ng-resizable-handle.ng-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    height: 100%;
    top: 0;
}

.ng-resizable-handle.ng-resizable-s {
    cursor: s-resize;
    height: 7px;
    bottom: -5px;
    width: 100%;
    left: 0;
}

.ng-resizable-handle.ng-resizable-n {
    cursor: n-resize;
    height: 7px;
    top: -5px;
    width: 100%;
    left: 0;
}

.ng-resizable-handle.ng-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
}

.ng-resizable-handle.ng-resizable-sw {
    cursor: sw-resize;
    width: 12px;
    height: 12px;
    left: 1px;
    bottom: 1px;
}

.ng-resizable-handle.ng-resizable-ne {
    cursor: ne-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    top: 1px;
}

.ng-resizable-handle.ng-resizable-nw {
    cursor: nw-resize;
    width: 12px;
    height: 12px;
    left: 1px;
    top: 1px;
}

.widget .side-group {
    padding-top: 10px;
}

.add-layer {
    padding-left: 26px !important;
}

.widget-text-layer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow-wrap: break-word;
    overflow: hidden;
}

.widget-text-layer__inner {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.widget-image-layer {
    overflow: hidden;
}

.widget-progress-layer {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 2px;
}

.widget-progress-layer-track {
    display: block;
    height: 100%;
}

.positional.selected .positional:hover::after,
.positional.highlighted .positional:hover::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #f88;
    pointer-events: none;
}

.positional.root.selected::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 3px solid #fff !important;
    pointer-events: none;
}

.positional.root {
    cursor: grab;
}

    .positional.root:hover::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border: 1px solid #e88;
        pointer-events: none;
    }

.positional.highlighted::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #e88;
    pointer-events: none;
}

.positional {
    position: absolute;
    border: 0;
    box-sizing: border-box;
}

    .positional.selected::after {
        content: "";
        position: absolute;
        pointer-events: none;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border: 1px solid #fff;
    }

    .positional .handle,
    .positional.selected + .handle {
        position: absolute;
        width: 9px;
        height: 9px;
        margin-top: -4px;
        margin-left: -4px;
        background: #fff;
        display: block;
        border-radius: 5px;
        box-sizing: border-box;
    }

.upload-sound {
    color: #444c54;
    font-size: 16px;
    border: 1px dashed #444c54;
    padding: 1em;
    cursor: pointer;
    border-radius: 1em;
    margin-top: 20px;
}

.right-sidebar .setup {
    width: 100%;
}

.right-sidebar .overlay-settings {
    padding: 0 40px;
}

.right-sidebar .setup .simplebar-scroll-content {
    margin-bottom: 0 !important;
}

.right-sidebar .setup .simplebar-content {
    padding-bottom: 0 !important;
}

.right-sidebar .widget-panel {
    width: 100%;
}

div.as-split-gutter {
    background-color: inherit !important;
}

.right-sidebar #splitter2 {
    position: absolute;
    left: 0;
    width: 100%;
    top: calc(50% - 4px);
    height: 8px;
    cursor: move;
    text-align: center;
}

    .right-sidebar #splitter2 svg {
        width: 15px;
        height: 6px;
        position: absolute;
        top: 1.5px;
        left: auto;
    }

.fixedHeader .right-sidebar {
    padding-top: 95px;
}

.right-sidebar {
    z-index: 1000;
    right: 0;
    left: auto;
    width: 307px;
    padding: 0;
    position: fixed;
    top: 60px;
    height: calc(100% - 60px);
    overflow-y: visible;
    background-color: #383e44;
    float: none;
    min-height: unset;
    border-left: 1px solid rgba(0,0,0,0.4);
}


.number-of-events {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #aab1b8;
    padding-bottom: 10px;
    display: block;
    width: calc(100% - 65px);
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.test-button {
    transition: none;
}

.number-of-events input-number {
    display: inline-block;
    width: 40px;
    position: absolute;
    right: 0;
}

.nubmer-of-events .quantity {
    width: 50px;
}

.halfsize .quantity {
    height: 40px !important;
}

.panel.settings-form-panel {
    background: transparent;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border: 0;
    border-radius: 0;
}

    .panel.settings-form-panel .panel-heading.card-header {
        padding: 0;
    }

.overlay-test-button {
    transition: none;
}

.panel.settings-form-panel .panel-body {
    padding: 20px 60px 20px 40px;
    background: #31373C;
    max-width: 305px !important;
}

.right-sidebar {
    background: #31373c;
}

    .right-sidebar .setup:after {
        position: absolute;
        content: "";
        width: 100%;
        bottom: 0;
        left: 0;
        /* display: none;*/
    }

    .right-sidebar .setup .bars {
        position: relative;
        user-select: none;
        padding: 0px 40px;
    }

.bars {
    user-select: none;
}


.panel-group .panel-open .bars:after {
    position: absolute;
    background-color: #1b1e22;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    content: "";
    display: none;
}

.right-sidebar .setup .bars > a {
    display: block;
    color: #dbe0e6;
    font-size: 12px;
    line-height: 15px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 12px 12px 40px;
    background-color: #444c54;
    background: -moz-linear-gradient( 0, #444c54 0%, rgba(68, 76, 84, 0.0001) 100% );
    background: -webkit-linear-gradient( 0, #444c54 0%, rgba(68, 76, 84, 0.0001) 100% );
    background: linear-gradient(0, #444c54 0%, rgba(68, 76, 84, 0.0001) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00444c54', endColorstr='#444c54',GradientType=1 );
    position: relative;
    border: 1px solid #31373c;
    border-top-color: #444c54;
    border-bottom-width: 1.7px;
    top: 1px;
    left: -40px;
    width: calc(100% + 80px);
    min-height: 41px;
}

.panel-group .panel-open .bars > a {
    background: -moz-linear-gradient( 180deg, #444c54 0%, rgba(68, 76, 84, 0.0001) 100% );
    background: -webkit-linear-gradient( 180deg, #444c54 0%, rgba(68, 76, 84, 0.0001) 100% );
    background: linear-gradient( 180deg, #444c54 0%, rgba(68, 76, 84, 0.0001) 100% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00444c54', endColorstr='#444c54',GradientType=1 );
}

.no-touch .right-sidebar .setup .bars > a:hover {
    text-decoration: none;
}

.panel.settings-form-panel.panel-open .bars > a:after {
    position: absolute;
    bottom: 0;
    left: 40px;
    width: calc(100% - 80px);
    height: 1px;
    background-color: #444c54;
    content: "";
}

.right-sidebar .setup .bars > a:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    position: absolute;
    left: 20px;
    top: 13px;
    border-color: transparent transparent transparent #aab1b8;
}

.widget .side-group .font-sizer {
    width: 100%;
}

.widget .font-sizer {
    width: 100%;
}

    .widget .font-sizer a.increase, .widget .font-sizer a.decrease {
        left: auto;
        right: 0;
    }
    .widget .font-sizer a.increase {
        top: 9px;
    }
    .widget .font-sizer a.decrease {
        top: 24px;
    }
.panel-group .panel-open .bars > a:before {
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #aab1b8 transparent transparent transparent;
    top: 15px;
}

.right-sidebar .setup .bars .contain {
    height: 0px;
    transform-origin: top;
    overflow-y: hidden;
    position: relative;
    left: -40px;
    padding: 0 40px;
    width: calc(100% + 80px);
}

.right-sidebar .setup .bars .contain-scroll {
    padding-bottom: 70px;
}

.panel-group .panel-open .bars .contain {
    height: auto;
}

.right-sidebar .widget-panel {
    /*padding: 15px 0;*/
    background-color: #2c3238;
    position: relative;
    bottom: 0;
    overflow-y: hidden;
}

.right-sidebar .widget-panel {
    padding: 0 40px 25px 40px;
    box-sizing: border-box;
}

    .right-sidebar .widget-panel:after {
        position: absolute;
        content: "";
        width: 100%;
        height: 0.5px;
        top: 0;
        left: 0;
    }

.right-sidebar .side-group .btn-transparent {
    width: calc(100% + 40px);
}

.right-sidebar .btn {
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    width: unset;
    padding: 12px 25px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.input-with-label.input-amount .filter-option-inner-inner {
    color: #fff;
}

.right-sidebar .side-group .input-with-label .label {
    line-height: 31px;
    height: auto;
    background-color: #414950;
    background: -moz-linear-gradient(180deg, #5e656c 0%, #414950 100%);
    background: -webkit-linear-gradient(180deg, #5e656c 0%, #414950 100%);
    background: linear-gradient(180deg, #5e656c 0%, #414950 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e656c', endColorstr='#414950',GradientType=1 );
    color: #aab1b8;
    min-width: 85px;
    right: -15px;
    border-radius: 15px;
}

.right-sidebar .side-group .change-music {
    color: #f8f8f9;
    font-size: 12px;
    display: inline-block;
    margin-top: 10px;
}

.right-sidebar .side-group .audioplayer {
    position: relative;
    left: -12px;
    width: calc(100% + 24px);
}

    .right-sidebar
    .side-group
    .audioplayer
    .plyr--audio
    .plyr__control.plyr__tab-focus,
    .right-sidebar
    .side-group
    .audioplayer
    .plyr--audio
    .plyr__control[aria-expanded="true"] {
        color: #989b9d;
    }

    .right-sidebar
    .side-group
    .audioplayer
    .plyr__controls > .plyr__control:first-child,
    .right-sidebar
    .side-group
    .audioplayer
    .plyr__controls > .plyr__control:first-child + [data-plyr="pause"] {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }

.no-touch
.right-sidebar
.side-group
.audioplayer
.plyr--audio
.plyr__control:hover {
    color: #f05a00;
}

.right-sidebar .btn.secondary {
    background-color: transparent;
    color: #c6ced5;
    border: 1px solid #737c85;
    border-radius: 32px;
}

.right-sidebar-content {
    padding: 0;
}

.right-sidebar input[type="text"],
.right-sidebar input[type="number"] {
    position: relative;
    width: calc(100% + 40px);
    padding: 0 20px;
    margin: 0;
    left: -20px;
    font-weight: normal;
    background-color: #2c3238;
    box-shadow: 0px 0.2px 1px rgba(181, 189, 196, 0.9);
    -moz-box-shadow: 0px 0.2px 1px rgba(181, 189, 196, 0.9);
    -webkit-box-shadow: 0px 0.2px 1px rgba(181, 189, 196, 0.9);
    color: #c6ced5;
    border-radius: 20px;
}

.widget-panel .widget-list > li, .w-with-submenu {
    padding-right: 20px;
}

.widget-panel ul li.w-with-submenu > a:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 5px;
    position: absolute;
    left: 25px;
    top: 10px;
    border-color: transparent transparent transparent #aab1b8;
}

.widget-panel ul li.w-with-submenu > a + ul {
    display: none;
}

.widget-panel ul li.w-with-submenu.open > a + ul {
    display: block;
}

ul.widget-list li a.active {
    background-color: #444c54;
}

ul.widget-list li.w-with-submenu.open > a:before {
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: #aab1b8 transparent transparent transparent;
    top: 12px;
}

ul.widget-list li.w-with-submenu > a + ul > li {
    width: 100%;
    margin-left: 0;
}

.widget-list ul.w-submenu > li.w-with-submenu > a {
    padding-left: 65px;
    white-space: nowrap;
    max-width: 240px;
    text-overflow: ellipsis;
    overflow: hidden;
}

    .widget-list ul.w-submenu > li.w-with-submenu > a::before {
        left: 50px;
    }

.widget-list ul.w-submenu > li.w-with-submenu > ul.w-submenu > li > a {
    padding-left: 70px;
}

body.no-sidebar aside.main-sidebar {
    display: none !important;
}

body.no-sidebar .main-content {
    margin-left: 0px !important;
    transition: none !important;
}
/* INPUT VALUE SLIDER */

ngx-slider.ngx-slider .ngx-slider-pointer {
    display: inline-block;
    position: absolute;
    border: 1px solid #b5bdc4;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: #dfe6ea;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

    ngx-slider.ngx-slider .ngx-slider-pointer:after {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
        background-size: 100%;
        background-image: -webkit-gradient( linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0)) );
        background-image: -moz-linear-gradient( rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0) );
        background-image: -webkit-linear-gradient( rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0) );
        background-image: linear-gradient( rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0) );
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }

ngx-slider.ngx-slider .ngx-slider-pointer {
    top: -9px;
    outline: none;
}

ngx-slider.ngx-slider .ngx-slider-bar {
    height: 4px;
    width: 100%;
    background: #1b1e22;
    border-bottom: 1px solid #444c54;
}

ngx-slider.ngx-slider .ngx-slider-pointer.ngx-slider-active::after {
    background-color: transparent;
}

span.ngx-slider-span.ngx-slider-bar.ngx-slider-selection {
    background: #f05a00;
}

.sb-show-main {
    background: #282d33;
}

ngx-slider.ngx-slider
.ngx-slider-span.ngx-slider-bubble.ngx-slider-limit.ngx-slider-floor,
ngx-slider.ngx-slider
.ngx-slider-span.ngx-slider-bubble.ngx-slider-limit.ngx-slider-ceil,
ngx-slider.ngx-slider
.ngx-slider-span.ngx-slider-bubble.ngx-slider-model-value {
    font-size: 12px;
    color: #5e656c;
}

.inner .example {
    background: #333;
    overflow: hidden;
    margin-top: 30px;
    margin-left: -30px;
    width: calc(100% + 66px);
    box-sizing: border-box;
}

.image-list-container {
    display: flex;
    height: 64px;
    flex-direction: row;
    margin-bottom: 8px;
}

    .image-list-container .image {
        align-self: flex-start;
        width: 64px;
        min-width: 64px;
        height: 64px;
        background-position: center;
        background-size: cover;
    }

.image-video {
    width: 100%;
}

.image-list-container .filename {
    padding-left: 8px;
    font-size: 12px;
    line-height: 1.5em;
    max-width: 300px;
    overflow: hidden;
}

    .image-list-container .filename > div {
        overflow-x: hidden;
        text-overflow: ellipsis;
    }

.image-list-container .remove {
    display: block;
    margin: 3px 0 0 10px;
    width: 21px;
}

    .image-list-container .remove svg {
        width: 100%;
        height: 100%;
    }

/* ------ BANNER WIDGET ------- */

.banner-widget {
    width: 100%;
    height: 100%;
}

    .banner-widget .banner {
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .banner-widget .banner img {
            display: flex;
        }

    .banner-widget.fit .banner img {
        display: flex;
        max-width: 100%;
        max-height: 100%;
    }

    .banner-widget.stretch .banner img {
        width: 100%;
        height: 100%;
    }

    .banner-widget.transition-fade .banner {
        transition: opacity 1s;
    }

    .banner-widget .banner.active {
        opacity: 1;
    }

/* -------- TIP ALERT WIDGET -------- */
.tip-panel {
    position: absolute;
    width: 100%;
    height: 100%;
}

.tip-alert-widget {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.tip-alert-widget__image {
    width: 60px;
    height: 60px;
    position: absolute;
    z-index: 3000;
    left: 0px;
}
/*
.tip-alert-widget__header {
  position: absolute;
  height: 24px;
  left: 65px;
  top:8px;
  color: #000;
  z-index: 3000;
  background: #FFC100;
  border-radius: 12px;
  line-height: 24px;
  padding: 0 10px;
  box-shadow: 0px 0px 4px rgba(119, 201, 255, 0.5);
}

.tip-alert-widget__first-line{
  background: rgba(15, 15, 15, 0.9);
  left: 0px;
  margin-top: 20px;
  right: 0px;
  overflow: hidden;
  border-radius: 30px;
  line-height: 60px;
  z-index: 2900;
  box-sizing: border-box;
  padding: 0 30px 0 70px;
}

*/
.tip-alert-widget__user-message {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px dotted #ffc100;
    padding: 1em;
    box-sizing: border-box;
    position: absolute;
    height: 100%;
    word-wrap: break-word;
}
/* ----- OVERLAY VIEW ------- */

.view-widget-overflow-wrapper {
    position: absolute;
    overflow: visible;
}

body.overlay-view-body {
    background: transparent !important;
}

.overlay-view-canvas {
    width: 1920px;
    height: 1080px;
    transform-origin: top left;
}

/*Donate page*/
.currency-select .filter-option {
    margin-top: -3px;
}

.currency-select-disabled {
    pointer-events: none;
}

.range.full .ngx-slider {
    display: block;
    margin-top: 40px;
}

.donation-err {
    margin-top: 3px;
    color: #0c5460;
    font-size: 13px;
    text-align: center;
}

.main-sidebar .block.account .score:focus {
    outline: none;
}

.animated-once {
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: initial;
}

.animated-infinite {
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}

/* responsive */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* md  ipad*/

    body.no-mobile .no-mobile-container {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 3000;
        background-color: #282d33;
    }

        body.no-mobile .no-mobile-container .not-available {
            display: block;
        }
}

@media (min-width: 300px) and (max-width: 767.98px) {
    /* sm */

    body.no-mobile .no-mobile-container .not-available {
        display: block;
    }

    body.no-mobile .no-mobile-container {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 3000;
        background-color: #282d33;
    }
}

.block.game .item.active {
    text-decoration: none;
    background-color: #444c54;
}

/* user wallet & billing */

.wallet .btns {
    padding-top: 7px;
}

@media (max-width: 767.98px) {
    .wallet .btns {
        padding-top: 20px;
    }
}

.payment-method {
    background: #3f454c;
    border-radius: 10px;
    margin-bottom: 20px;
}

    .payment-method.connected {
        background: #444c54;
        border: 1px solid #515a62;
        box-sizing: border-box;
        border-radius: 10px;
    }

        .payment-method.connected .header {
            background: linear-gradient(0deg, #4a525a, #4a525a), #2c3238;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
            border-radius: 9px;
        }

    .payment-method .header {
        height: 50px;
        background: linear-gradient(0deg, #454c53, #454c53);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
        border-radius: 9px;
    }

    .payment-method .body {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 20px 20px 0 20px;
    }

        .payment-method .body .info {
            font-size: 13px;
            line-height: 16px;
            color: #dbe0e6;
            display: flex;
            flex: 1;
            min-width: 300px;
            margin-bottom: 20px;
        }

            .payment-method .body .info:first-line {
                margin-top: 0px;
            }

            .payment-method .body .info a {
                color: #f05a00;
            }

        .payment-method .body .details {
            display: flex;
            align-items: center;
            flex: 1;
            width: 100%;
            padding: 0px 10px;
            margin-bottom: 20px;
        }

            .payment-method .body .details .icons {
                display: flex;
                align-items: center;
                height: 100%;
                min-width: 120px;
            }

            .payment-method .body .details .data {
                display: flex;
                height: 34px;
                background: #31373c;
                border-radius: 4px;
                padding: 0 20px;
                line-height: 34px;
                font-size: 13px;
                font-weight: bold;
            }

            .payment-method .body .details .icons svg {
                margin-right: 15px;
                display: flex;
                align-self: center;
            }

@media (max-width: 575.98px) {
    .payment-method .body .details.not-connected, .payment-method .body, .payment-method .body .info {
        display: block;
        text-align: center;
    }

        .payment-method .body .details.not-connected .icons {
            align-items: center;
            justify-content: center;
            min-width: unset;
            height: unset;
            margin-bottom: 20px;
        }          

        .payment-method .body .details .connect-btn {
            display: block;
            text-align: center;
        }

            .payment-method .body .details .connect-btn .btn {
                width: auto;
            }

        .payment-method .body .info {
            margin-bottom: 0;
            padding-bottom: 20px;
            min-width: unset;
        }

    .main-content .page.settings .payment-method .header .title {
        padding-bottom: 10px;
        margin-bottom: 5px;
    }
}

@media (max-width: 767.98px) and (min-width: 576px) {
    .main-content .page.settings .payment-method .header .title {
        padding-bottom: 0;
        margin-bottom: -1px;
    }
}

.payment-method .header {
    display: flex;
    flex-direction: row;
    padding: 0 30px 0 30px;
    align-items: center;
}

    .payment-method .header .title-block {
        width: 155px;
        display: flex;
    }

    .payment-method .header .title .ellipsis {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .payment-method .header .title input[type="text"] {
        padding: 0;
        background-color: transparent;
    }

    .payment-method .header .status {
        font-size: 13px;
        display: flex;
        line-height: 16px;
        color: #dbe0e6;
    }

    .payment-method .header .actions {
        width: 25px;
        height: 25px;
        cursor: pointer;
        margin-left: auto;
        display: flex;
        align-items: center;
        text-align: center;
        color: #ffffff;
        position: relative;
    }

        .payment-method .header .actions .dropdown-toggle:after {
            display: none;
        }

        .payment-method .header .actions .dropdown-menu.show {
            width: inherit;
            right: 0;
        }

@media (max-width: 767.98px) {
    .payment-method .header .actions {
        position: relative;
        left: 20px;
    }

        .payment-method .header .actions .dropdown-menu.show {
            left: 20px !important;
        }
}

.payment-method .header .actions .dropdown-menu:after, .payment-method .header .actions .dropdown-menu:before {
    right: 59px;
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .payment-method .header .actions .dropdown-menu:after, .payment-method .header .actions .dropdown-menu:before {
        right: 44px;
    }
}

@media (max-width: 767.98px) {
    .payment-method .header .actions .dropdown-menu:after, .payment-method .header .actions .dropdown-menu:before {
        right: 14px;
    }
}

.payment-method .header .actions > a {
    width: 25px;
    height: 25px;
}

.modal-payment .modal-body p {
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 13px;
    color: #182129;
}

.modal-payment {
    font-size: 13px;
}

    .modal-payment .body-text {
        margin-bottom: 1em;
        color: #182129;
    }

.cursor-pointer {
    cursor: pointer;
}

    .cursor-pointer svg {
        height: inherit;
        margin-left: 3px;
        margin-top: -2px;
    }

.modal-payment .modal-footer {
    margin: 20px;
    padding-right: 0;
    border-top: 2px solid #dbe0e6;
}

.modal-payment .modal-body .title {
    margin-bottom: 20px;
    border-bottom: 2px solid #dbe0e6;
}

.payment-method .header .actions::after {
    content: "• • •";
    width: 25px;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    position: absolute;
    pointer-events: none;
}

.payment-methods-title.title {
    margin-bottom: 20px;
}

.payment-method.connected .header .status {
    color: #7ed321;
}

.payment-method .title {
    max-width: 135px;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    color: #ffffff;
}


    .payment-method .title input {
        background: transparent;
        color: #ffffff;
        padding: 0;
        border: 0;
        text-transform: uppercase;
        border-radius: 0;
    }

.modal-payment .modal-dialog {
    max-width: 600px;
}

.card-payment-select button {
    background-color: #dae0e5;
}

.card-front {
    text-align: left;
    margin: 0 auto;
    width: 378px;
    height: 220px;
    z-index: 2000;
    background: url("/assets/cardback.png"), linear-gradient(99.73deg, #785bc5 -3.64%, #5169c3 69.11%), #1a1d1f;
    background-repeat: no-repeat;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    position: relative;
}

.card-front-bottom {
    margin-top: 1em;
    display: block;
    text-align: center;
}
.card-number-block{
    position: absolute;
    left: 30px;
    top: 126px;
    width: 100%;
}
.card-front input.card-number, .modal-wallet-donate .form .card-front input.card-number {
    position: absolute;
    width: 303px !important;
    height: 40px;
    left: 0;
    top: -40px;
    font-size: 15px;
    background: #ffffff;
    border-radius: 4px;
}
.valid-thru-block {
    position: absolute;
    left: 237px;
    top: 192px;
    width: 100%;
}

.card-front div.valid-thru-label, .modal .form .card-front div.valid-thru-label {
    position: absolute;
    width: auto;
    height: 12px;
    left: 0;
    top: -55px;
    font-weight: bold;
    font-size: 11px;
    line-height: 13px;
    text-transform: uppercase;
    color: #ffffff;
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .card-front div.valid-thru-label, .modal .form .card-front div.valid-thru-label {
        width: 72px;
    }
}
.card-front input.valid-thru, .modal-wallet-donate .form .card-front input.valid-thru {
    position: absolute;
    width: 114px !important;
    height: 40px;
    left: 0;
    top: -40px;
    text-align: left;
    padding-left: 21px;
    background: #ffffff;
    border-radius: 4px;
    font-size: 15px;
}

.card-front div.credit-card, .modal-wallet-donate .form .card-front div.credit-card {
    position: absolute;
    width: 21%;
    height: 8px;
    left: 30px;
    top: 20px;
    font-weight: bold;
    font-size: 11px;
    line-height: 13px;
    text-transform: uppercase;
    color: #ffffff;
}

.card-front .mci-labels {
    position: absolute;
    right: 12px;
    top: 15px;
    display: flex;
    align-items: center;
}

    .card-front .mci-labels span {
        margin: 0 2px;
    }

        .card-front .mci-labels span.jcb-label {
            margin-left: 4px;
        }

        .card-front .mci-labels span svg {
            -webkit-transform: scale(.85);
            -ms-transform: scale(.85);
            transform: scale(.85);
        }
.card-holder-block {
    position: absolute;
    left: 30px;
    top: 192px;
    width: 100%;
}
.card-front input.card-holder, .modal-wallet-donate .form .card-front input.card-holder {
    position: absolute;
    width: 190px !important;
    height: 40px;
    left: 0;
    top: -40px;
    text-align: left;
    background: #ffffff;
    border-radius: 4px;
    font-size: 15px;
    text-transform: uppercase;
    text-overflow: ellipsis;
    letter-spacing: -0.5px;
}

.card-front div.card-holder-label, .modal .form div.card-holder-label {
    position: absolute;
    /*width: 72px;*/
    height: 12px;
    left: 0;
    top: -55px;
    font-weight: bold;
    font-size: 11px;
    line-height: 13px;
    text-transform: uppercase;
    color: #ffffff;
}

.card-front .card-logo {
    position: absolute;
    top: 22px;
    right: 20px;
}
.cvc-block {
    position: absolute;
    margin-left: 282px;
    margin-top: 177px;
    width: 100%;
    z-index: 2000;
}
.card-back div.cvc-label {
    position: absolute;
    width: 26px;
    height: 8px;
    left: 1px;
    top: -53px;
    font-family: Montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
    line-height: 13px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: #ffffff;
}

.card-back input.cvc, .modal-wallet-donate .form .card-back input.cvc {
    position: absolute;
    left: unset;
    width: 75px !important;
    height: 40px;
    left: 0;
    top: -40px;
    text-align: left;
    padding-left: 20px;
    font-size: 15px;
    background: #ffffff;
    border-radius: 4px;
}

.card-back {
    text-align: left;
    width: 378px;
    height: 220px;
    margin-left: 110px;
    margin-top: 28px;
    background: url("/assets/cardbackback.png"), linear-gradient(99.73deg, #5b4791 -3.64%, #36488a 69.11%), #1a1d1f;
    background-position: right top;
    background-repeat: no-repeat;
    border-radius: 15px;
}

.help-block.form-errors {
    position: unset;
    color: #dc3545;
    font-size: 13px;
    background-color: #f8f8f9;
    width: 100%;
    text-align: center;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bankcard-payment {
    color: #54626d;
    display: inline-block;
    position: relative;
    z-index: 100;
    width: 490px;
    margin: 0 auto;
}

.action-block {
    border-top: 1px solid #dbe0e6;
    padding-top: 15px;
    justify-content: space-between;
}

    .action-block .btn {
        display: inline-block;
        width: auto;
    }

    .action-block button.btn.btn-back {
        color: #737c85;
        background-color: transparent;
        border: 1px solid #aab1b8;
        box-sizing: border-box;
        border-radius: 20px;
    }

    .action-block .btn-ok {
        float: right;
    }

.card-labels {
    padding: 20px 3px 20px 3px;
}

    .card-labels .label {
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

        .card-labels .label.ssl-label {
            width: 25%;
        }

        .card-labels .label.pci-label {
            width: 74.5%;
        }

.label svg {
    position: absolute;
    left: 0;
    top: 47%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.ssl-label div {
    padding-left: 35px;
    font-size: 11px;
    line-height: 13px;
    font-weight: 700;
    color: #878787;
}

.pci-label div {
    padding-left: 60px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    color: #54626d;
}

/*.modal-wallet-donate .subblock, .standalone-form .subblock {
    color: #182129;
    font-size: 11px;
    padding-bottom: 10px;
}*/

.subblock .qiwiPhone {
    font-size: 15px;
    margin-bottom: 15px;
}

.modal-wallet-donate .subblock .subtitle {
    opacity: 0.5;
}

.modal-wallet-donate .subblock.personal .subtitle {
    margin-top: 0;
    padding-top: 0;
}

.modal-wallet-donate .subblock.active .subtitle {
    opacity: 1;
}

.modal-wallet-donate .subblock.active .subtitle {
    color: #f05a00;
}

.modal-wallet-donate .method-choose-step .form-errors {
    margin-bottom: 10px;
}

.subtitle {
    border-bottom: 1px solid #dbe0e6;
    padding: 10px 0;
    margin: 15px 0;
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.7;
    color: #0b1f30;
    font-weight: bold;
}

    .subtitle.no-border {
        border: none;
    }

.modal-wallet-donate .subblock .placeholder, .standalone-form .subblock .placeholder {
    background-image: url("/assets/paymentvia.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 261px;
    width: 100%;
}

/*.modal-wallet-donate .submethod {
    display: inline-block;
    vertical-align: top;
    margin: 20px;
    cursor: pointer;
}*/

.modal-wallet-donate .submethod-content {
    background: #dbe0e6;
    border-radius: 3px;
    width: 157px;
    height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.modal-wallet-donate .submethod .submethod-content svg {
    fill: #54626d;
}
.modal-wallet-donate .submethod .submethod-content svg.active {
    display: none;
}
.modal-wallet-donate .submethod.active .submethod-content svg {
    display: none;
}
.modal-wallet-donate .submethod.active .submethod-content svg.active {
    display: inline;
}
.modal-wallet-donate .submethod.active .submethod-content svg,
.standalone-form .submethod.active .submethod-content svg {
    fill: #f05a00;
}
.modal-wallet-donate .submethod .submethod-content .text {
    color: #54626d;
    font-size: 16px;
    display: block;
    padding-top: 5px;
    width: 90%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.modal-wallet-donate .submethod.active .submethod-content .text {
    color: #f05a00;
}

@media (max-width: 575.98px) {
    .modal-wallet-donate .submethod {
        margin: 10px 10px 0 0;
        width: calc(50% - 10px);
    }

    .modal-wallet-donate .submethods-list {
        margin-right: -10px;
    }

    .modal-wallet-donate .submethod-content {
        width: 100%;
    }
}

.modal-wallet-donate iframe {
    border: none;
}

.modal-auth.donation-auth .form form {
    height: unset;
}

.currency-select {
    width: 70px !important;
}

.settings #personal .bootstrap-select.form-control.currency-select {
    width: 105px !important;
}

    .settings #personal .bootstrap-select.form-control.currency-select .filter-option {
        margin-top: 0;
    }

.card-front.card-with-cvv {
    position: absolute;
}

.card-front-bottom {
    margin-top: 1em;
    display: block;
    text-align: center;
}

    .card-front-bottom.with-icon {
        padding-left: 110px;
    }

.modal-wallet-donate div.form button.btn-next {
    width: 100% !important;
}

.bankcard-payment .help-block.with-errors {
    width: auto;
}

.bankcard-payment .card-number-block .help-block.with-errors {
    width: 303px;
}

.bankcard-payment .card-holder-block .help-block.with-errors {
    width: 190px;
}

@media (max-width: 500px) {
    .bankcard-payment {
        width: 356px;
    }

        .bankcard-payment .card-back {
            margin-left: 20px;
            margin-top: 80px;
            width: 336px;
        }

        .bankcard-payment .card-front {
            width: 336px;
            margin-left: 0px;
            margin-top: 0px;
        }
    .card-number-block, .card-holder-block {
        left: 17px;
    }
    .cvc-block {
        margin-left: 225px;
        margin-top: 205px;
    }

    .valid-thru-label {
        left: 240px !important;
    }

    .card-labels .label {
        display: block;
    }

        .card-labels .label.ssl-label {
            margin-bottom: 20px;
            margin-left: auto;
            margin-right: auto;
            width: 33%;
        }

        .card-labels .label.pci-label {
            width: 100%;
        }
    .valid-thru-block{
        left: 215px;
    }
    .card-front input.valid-thru, .modal-wallet-donate .form .card-front input.valid-thru {
        width: 105px;
    }
    .card-front div.credit-card, .modal-wallet-donate .form .card-front div.credit-card{
        left: 17px;
        width: 23%;
    }
}

@media (max-width: 575px) {
    .modal-body {
        padding: 20px 0;
    }
}

@media (max-width: 991px) {
    .btn.dropdown-toggle.btn-light {
        width: 100% !important;
        left: auto !important;
    }

    .payment-history .setup .bootstrap-select > .dropdown-toggle.btn.dropdown-toggle.btn-light {
        border-radius: 4px !important;
    }

}

.modal-wallet-donate .paypal-donation-container, .standalone-form .paypal-donation-container {
    min-width: 299px;
}

@media (max-width: 575.98px) {
    .modal-wallet-donate .paypal-donation-container, .standalone-form .paypal-donation-container {
        min-width: 200px;
    }
}

.modal-wallet-donate .paypal-donation-container.paypal-disable, .standalone-form .paypal-donation-container.paypal-disable {
    pointer-events: none;
    opacity: 0.5;
}

.modal-body .form-group-checkbox label, .modal-body .form-group-radio label {
    padding-left: 30px;
    padding-bottom: 8px;
}

.modal-wallet-donate .converter.logged .go {
    margin-top: 0px;
}

.modal-wallet-donate .converter.logged .half.donate-to {
    position: unset;
    top: unset;
}

.modal-wallet-donate .converter .auth-error {
    margin-bottom: 10px;
}

.modal-wallet-donate .modal-dialog.qiwi-payment, .standalone-form .modal-dialog.qiwi-payment {
    max-width: 953px !important;
}

.settings .personal .verification-block {
    border-bottom: 1px solid #666f79;
    padding-bottom: 40px;
    margin-bottom: 40px;
    left: 0;
    position: relative;
}

    .settings .personal .verification-block .btn {
        left: 0;
        text-transform: uppercase;
        color: #ffffff;
    }

.settings .personal .verification-text {
    font-size: 13px;
    line-height: 19px;
    font-weight: 500;
    color: #c6ced5;
    margin-bottom: 20px;
}

@media (max-width: 767.98px) {
    .settings .personal .verification-block {
        left: -10px;
    }
}

.settings .api .form-control {
    background-color: #2c3238;
    position: relative;
    left: 0;
    color: #c6ced5;
}

.settings .api .form-group.accessToken .form-control {
    padding-right: 55px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings .api .form-group.accessToken .copy {
    position: absolute;
    bottom: 11px;
    right: 15px;
}

.settings .api .accessToken svg {
    width: 16px;
    height: 16px;
    fill: #737c85;
}

.loading-mask.loading-mask-full {
    background: url(/template/img/loader.gif) center center no-repeat rgb(35, 33, 33);
    z-index: 1000000;
}

.select-list-item {
    padding: 2px 5px;
    cursor: pointer;
}

.select-display-item {
    border: 1px solid #ddd;
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 15px;
    display: block;
    cursor: pointer;
}

.select-active {
    background-color: #ddd;
}

.select-highlight-item {
    background-color: #00b7d4;
    color: #fff;
}

.select-items-container {
    border: 1px solid #00b7d4;
    background-color: #fff;
    position: absolute;
    font-size: 18px;
    overflow: auto;
    height: 180px;
    width: 95%;
    z-index: 9;
    top: 27px;
}

.drop-input {
    position: absolute;
    text-indent: 15px;
    font-size: 18px;
    z-index: 10;
    width: 95%;
}

.select-list-container {
    position: relative;
}

.modal-withdrawal .method .dropdown-dsp {
    width: 100%;
}

    .modal-withdrawal .method .dropdown-dsp .dropdown.bootstrap-select > .dropdown-toggle {
        width: 100%;
    }

.modal-withdrawal .form .withdraw-all {
    border-bottom: 1px solid #dbe0e6;
    margin-bottom: 15px;
}

    .modal-withdrawal .form .withdraw-all button {
        width: auto;
        position: static;
        margin-bottom: 15px;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .modal-withdrawal .form .withdraw-all button span {
            padding-left: 5px;
        }

.modal-withdrawal .form .withdraw-all-limits {
    text-transform: unset;
    font-weight: 500;
    margin-top: -5px;
    font-size: 11px;
    line-height: 1.2;
    padding-bottom: 15px;
}

    .modal-withdrawal .form .withdraw-all-limits a {
        color: #f05a00;
        cursor: pointer;
    }

        .modal-withdrawal .form .withdraw-all-limits a:hover {
            text-decoration: underline;
            color: #f05a00;
        }

.paypal-info {
    border-top: 1px solid #dbe0e6;
    padding: 15px 0 30px;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.2;
    margin-top: -15px;
    color: black;
}

    .paypal-info sup {
        color: #f05a00;
        font-size: 12px;
        top: 0;
    }

.modal-widget .widget-panel.data-simplebar {
    height: 70vh;
    overflow-y: scroll;
}
.modal-widget-fx .widget-panel.data-simplebar {
    height: unset;
    overflow-y: auto;
    overflow-x: hidden;
}
.modal-widget .widget-panel.data-simplebar  .simplebar-content-wrapper {
    padding: 0 30px;
}
.modal-widget .widget-panel[data-simplebar="init"] {
    width: calc(100% + 68px);
    left: -35px;
}
.modal-widget-fx .widget-panel[data-simplebar="init"] {
    width: calc(100% + 71px);
    left: -35px;
}

    .modal-widget .widget-panel[data-simplebar="init"] .simplebar-content {
        padding-left: 35px;
        padding-right: 35px;
        min-height: calc(100% - 15px) !important;
    }
   .modal-widget-fx .widget-panel.data-simplebar ul.single-list {
    padding: 2px 0 !important;
   }

input.invalid-field {
    border: 1px solid red !important;
}

.modal-wallet-donate .user > div.social-wrap {
    display: block;
}

.modal-wallet-donate .warning {
    background-color: #ffd3bb;
    text-align: center;
    padding: 20px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    color: #0b1f30;
    margin-bottom: 20px;
    width: 100%;
    position: relative;
}

.modal-wallet-donate .social-wrap {
    margin-top: 5px;
}

.warning a {
    color: #f05a00;
}

.modal-wallet-donate .donation-note {
    margin-top: 10px;
    text-align: center;
}

    .modal-wallet-donate .donation-note label {
        font-weight: normal;
        font-size: 13px;
        text-transform: none;
        line-height: 22px;
        display: block;
    }

.modal-wallet-donate .media-sharing a:not([href]) {
    color: #f05a00;
}

.modal-wallet-donate .btns.fast-flow {
    padding-bottom: 40px;
}

.settings-form-panel .form-group-checkbox {
    position: relative;
    margin-right: 15px;
}

.settings-form-panel .form-group input[type="checkbox"] + span {
    z-index: 10;
    position: absolute;
    width: 60px;
    height: 30px;
    border-radius: 20px;
    top: 20px;
    left: 0;
    background-color: #666f79;
    border: 1px solid #444c54;
    cursor: pointer;
}

    .settings-form-panel .form-group input[type="checkbox"] + span:after {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        width: 26px;
        height: 26px;
        border: 1.2px solid #f8f8f9;
        background-color: #c4c8cc;
        left: 1px;
        top: 1px;
        border-radius: 50%;
        background: -moz-linear-gradient(180deg, rgba(196,200,204,1) 0%, rgba(223,230,234,1) 100%);
        background: -webkit-linear-gradient(180deg, rgba(196,200,204,1) 0%,rgba(223,230,234,1) 100%);
        background: linear-gradient(180deg, rgba(196,200,204,1) 0%,rgba(223,230,234,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4c8cc', endColorstr='#dfe6ea',GradientType=1 );
    }

.settings-form-panel .form-group input[type="checkbox"]:checked + span {
    background-color: #4CB062;
}

    .settings-form-panel .form-group input[type="checkbox"]:checked + span:after {
        left: 31px;
    }

.side-group.oneline {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

    .side-group.oneline .title {
        flex-grow: 1;
        flex-wrap: wrap;
        word-break: break-word;
        padding-right: 15px;
    }
        .side-group.oneline .title {
            padding-right: 25px;
            padding-bottom: 1px;
        }
    .side-group.oneline .title a {
        position: absolute;
        margin-left: 3px;
    }
    .side-group.oneline .form-group-checkbox label{
        position: relative;
        top: -11px;
        left: 2px;
    }
    .side-group .quantity {
        height: 40px;
    }
.video-placeholder {
    background: rgba(20,20,20,0.7);
    background-image: url(/assets/videoicon.svg);
    background-position: center center;
    background-repeat: no-repeat;
}

.side-group a .ds-tooltip {
    opacity: 0;
    display: block;
    width: 210px;
    padding: 15px !important;
    border-radius: 6px !important;
    border: 1px solid #383e44;
    margin-left: 0;
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 15px !important;
    text-align: left;
    color: #aab1b8 !important;
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    transform: translate(0, -100%);
    left: -20px;
    top: -11px;
    background-color: #282d33 !important;
}

    .side-group a .ds-tooltip:after {
        bottom: -5px;
        left: 25px;
        border-width: 5px 4px 0;
        border-color: #282d33 transparent;
    }

    .side-group a .ds-tooltip:before {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 21px;
        border-width: 5px 4px 0;
        border-style: solid;
        border-color: #383e44 transparent;
        display: block;
        width: 0;
    }

    .side-group a .ds-tooltip b {
        text-transform: uppercase;
        display: block;
        font-weight: bold;
        font-size: 11px;
        margin-bottom: 4px;
        color: #f05a00;
    }

.side-group a:hover .ds-tooltip {
    opacity: 1;
}

.tooltip-icon {
    width: 13px;
    height: 13px;
    display: inline-block;
    background: url(/assets/tooltip.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.test-control {
    position: relative;
}


input.color-input_color, input.color-input_alpha {
    border-radius: 20px;
    font-size: 13px;
    left: auto !important;
    box-sizing: border-box;
    box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4), 0px 1px 1px rgba(181, 189, 196, 0.2);
}

input.color-input_color {
    width: 130px !important;
    padding: 0 10px 0 40px !important;
    display: inline-block !important;
}

div.color-input_color_thumb {
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    background: #8465DC;
    border-radius: 15px;
    margin: 5px 0 0 5px;
    z-index: 1;
}

input.color-input_alpha {
    text-align: center;
    width: 60px !important;
    margin-left: 10px !important;
    padding: 0 12px !important;
    display: inline-block !important;
}

.color-picker {
    width: 260px;
}

    .color-picker .hue {
        display: inline-block;
        width: 8px !important;
        margin-left: 20px;
        margin-right: 20px;
        height: 200px !important;
        vertical-align: top;
        margin-bottom: 15px;
    }

        .color-picker .hue .pointer {
            border: 2px solid #FFFFFF !important;
            box-sizing: border-box !important;
            width: 16px !important;
            height: 16px !important;
            margin: -7px 0 0 -3px !important;
        }

    .color-picker .saturation {
        vertical-align: top;
        display: inline-block;
        width: 200px;
        height: 200px;
        margin-bottom: 15px;
    }

    .color-picker .numbers {
        display: block;
    }

        .color-picker .numbers .format-selector {
            display: inline-block;
            width: 63px;
            margin-right: 10px;
            height: 60px;
            vertical-align: top;
        }

        .color-picker .numbers .format-input {
            display: inline-block;
            width: 167px;
            height: 60px;
            vertical-align: top;
        }


        .color-picker .numbers .alpha-value {
            display: inline-block;
            height: 40px;
            margin-right: 10px;
            text-align: center;
            width: 63px !important;
            padding: 0 12px;
            background-color: #2c3238;
            box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4), 0px 1px 1px rgba(181, 189, 196, 0.2);
            box-sizing: border-box;
            font-size: 13px;
            border-radius: 20px;
            vertical-align: top;
            padding: 0 10px !important;
            color: #AAB1B8;
        }

        .color-picker .numbers .alpha-slider {
            display: inline-block;
            height: 40px;
            width: 167px;
            vertical-align: top;
            margin-top: 13px;
        }

    .alpha-slider .alpha {
        border-radius: 6px !important;
    }

    .color-picker .alpha .gradient-color {
        border-radius: 6px;
        background-size: cover;
    }

    .color-picker .alpha .gradient-color::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 6px;

        border: 2px solid rgba(255,255,255,0.2);
    }

div.datepicker input {
    padding-right: 20px !important;
}

.custom-day {
    text-align: center;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    width: 32px;
}

    .custom-day .circle {
        display: inline-block;
        width: 24px;
        height: 24px;
        border-radius: 12px;
    }

    .custom-day.selected.to {
        border-left: 18px solid rgba(68,76,84,0.5);
    }

        .custom-day.selected.to .circle {
            margin-left: -18px;
        }



    .custom-day.selected.from {
        border-right: 18px solid rgba(68,76,84,0.5);
    }

        .custom-day.selected.from .circle {
            margin-left: 4px;
        }

        .custom-day.selected.from.to {
            border: none !important;
        }

            .custom-day.selected.from.to .circle {
                margin-left: 0px !important;
            }


    .custom-day.selected .circle {
        background: #444C54;
    }

    .custom-day.focused {
        background-color: #e6e6e6;
    }

    .custom-day.range {
        background-color: rgba(68,76,84,0.5);
        color: white;
    }

    .custom-day.faded {
        background-color: rgba(2, 117, 216, 0.5);
    }

.dsp .calendar-button, .dsp .calendar-icon {
    width: 20px;
    height: 20px;
    left: auto;
    right: -13px;
    background: none;
    color: #fff;
    position: absolute;
    top: 10px;
    margin: 0;
    padding: 0;
    border-radius: 0px;
    background: url('/assets/img/calendar.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dsp .ngb-dp-header {
    color: white;
    background: #2C3238;
}

select.custom-select, select.custom-select option {
    background: #2C3238;
    border: none;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
}

.ngb-dp-navigation-select {
    margin-right: 60px;
}



.ngb-dp-content {
    color: white;
    background: #2C3238;
}

.ngb-dp-arrow {
    position: absolute;
    right: 30px;
}

.dsp .ngb-dp-arrow-btn {
    width: 15px !important;
    height: 25px !important;
    padding: 0px !important;
    margin: 0px !important;
    right: 0px !important;
}

.ngb-dp-arrow.right {
    margin-right: 8px;
}


.ngb-dp-day {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    width: 24px !important;
    height: 24px !important;
    margin-right: 8px;
    border-radius: 12px;
    outline: none;
}

    .ngb-dp-day .btn-light {
        outline: none !important;
        font-size: 12px;
        line-height: 24px;
        width: 24px !important;
        height: 24px !important;
        border-radius: 12px;
        background: none;
        color: #fff;
    }

        .ngb-dp-day .btn-light:link,
        .ngb-dp-day .btn-light:active,
        .ngb-dp-day .btn-light:hover,
        .ngb-dp-day .btn-light:visited {
            color: #fff !important;
        }

    .ngb-dp-day .bg-primary {
        background: #444C54 !important;
    }

    .ngb-dp-day .outside {
        color: #95999B !important;
    }

.ngb-dp-weekdays {
    background: none !important;
    border-bottom: 1px solid #606569;
    margin-bottom: 7px;
}

.ngb-dp-weekday {
    color: #606569;
    font-size: 11px;
    font-style: normal !important;
}

.dsp .ngb-dp-arrow-btn {
    left: auto !important;
    width: 30px !important;
    right: 30px;
    margin-top: -6px;
}

    .dsp .ngb-dp-arrow-btn button {
        right: 30px;
    }

.ngb-dp-arrow.right {
    right: 0px !important;
}

    .ngb-dp-arrow.right button {
        right: 0px;
    }

.ds-dropdown.currency-select .dropdown-menu {
    background-color: #edeeef;
    color: #60666c;
}

.dropdown-dsp-light .dropdown-menu ul li a {
    color: #383e44 !important;
    padding: 0 18px;
    padding: 0 18px;
}
.dropdown-dsp-light .dropdown-menu li a span.text {
   height: 40px;
   line-height: 40px;
}
.dropdown-dsp-light .dropdown-menu li.active a span.text {
    color: #383e44 !important;
}

.dropdown-dsp-light .dropdown-toggle .filter-option-inner-inner {
    height: 40px !important;
    line-height: 40px !important;
}

.ds-dropdown.currency-select .dropdown-menu ul li a {
    color: #60666c !important;
}

.bootstrap-select.ds-dropdown.dark .dropdown-menu.show {
    background-color: #2C3238;
}


.datepicker .dropdown-menu {
    border: 0px !important;
    background: #2C3238 !important;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.25) !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    box-sizing: border-box;
    width: 254px;
}

.dsp .ngb-dp-arrow-btn {
    background: none;
    color: white;
    width: 15px;
}

.ngb-dp-body {
    border: 0px !important;
    background: #2C3238 !important;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.25) !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    box-sizing: border-box;
    width: 254px;
    margin-top: 45px;
}

    .ngb-dp-body::before, .ngb-dp-body::after {
        display: none !important;
    }

.ngb-dp-navigation-select .custom-select:nth-child(1) {
    width: 100px;
}

.ngb-dp-navigation-select .custom-select:nth-child(2) {
    width: 50px;
}



.ngb-dp-navigation-select .custom-select {
    background-image: url('/assets/img/dropdown.png');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 7px 5px;
}





.popover {
    background: #2C3238 !important;
}

    .popover.bs-popover-left .arrow::after {
        opacity: 0;
    }

    .popover.bs-popover-left::after {
        background-color: #31373c !important;
        content: "\00a0";
        display: block;
        height: 10px;
        position: absolute;
        transform: rotate(-135deg );
        width: 10px;
        right: -6px;
        top: 50%;
        margin-top: -5px;
    }

.color-input {
    margin: 0px -20px 0 -20px;
}

.suffix-overlay {
    position: absolute;
    left: 0;
    top: 14px;
    font-size: 13px;
    color: #aaa;
    pointer-events: none;
}

.format-input .color-input_color {
    padding: 0 10px 0 10px !important;
    background-color: #2c3238;
    box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4), 0px 1px 1px rgba(181, 189, 196, 0.2);
    color: #AAB1B8;
}

.format-selector .bootstrap-select {
    width: 63px !important;
}

.format-selector .dropdown-toggle {
    padding: 0 10px !important;
}

.events-feed .head .donation-notification {
    position: absolute;
    top: 15px;
    right: 18px;
}

    .events-feed .head .donation-notification i {
        opacity: 0.3;
        font-size: 22pt;
    }

    .events-feed .head .donation-notification.enabled i {
        opacity: 1;
    }

    .events-feed .head .donation-notification .ds-tooltip {
        top: 90px;
        left: 15px;
        -webkit-transform: translate(-80%,-70%);
        transform: translate(-80%,-70%);
    }

        .events-feed .head .donation-notification .ds-tooltip:after {
            content: unset;
        }

.page.donations.dashboard.events-feed .head .title {
    text-transform: uppercase;
    color: #fff;
    line-height: 18px;
    font-weight: 700;
    padding: 7px 0;
}

.option-with-icon.donation-mobile-payment-method::before {
    font-size: 15pt;
    margin-right: 20px;
    font-weight: 900;
    font-family: Font Awesome\ 5 Free;
}

.option-with-icon.donation-mobile-payment-method {
    padding-left: 15px !important;
}

.ds-dropdown .dropdown-menu ul li a.dropdown-item:hover .donation-mobile-payment-method::before {
    color: black;
}

.mobile-donation-waiting-modal .modal-dialog {
    max-width: 450px;
}

.mobile-donation-waiting-modal .title {
    border-bottom: 1px solid #dbe0e6;
    margin-bottom: 20px;
    color: black;
    font-size: 19px;
}

.mobile-donation-waiting-modal .modal-body .wait-text {
    color: #0b1f30b3;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 13.5px;
    line-height: 17px;
}

.donate-detail .emots-container {
    position: relative;
}

.emots-container .smile {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 300;
    cursor: pointer;
}

    .emots-container .smile svg {
        width: 20px;
        height: 20px;
    }

.emots-container .emots-list {
    position: absolute;
    z-index: 302;
    right: 25px;
    bottom: 2px;
    height: 220px;
    width: 495px;
    border: none;
    box-shadow: 0.2px 0.2px 1px rgba(81, 89, 96, 0.9);
    -moz-box-shadow: 0.2px 0.2px 1px rgba(81, 89, 96, 0.9);
    -webkit-box-shadow: 0.2px 0.2px 1px rgba(81, 89, 96, 0.9);
    border-radius: 5px;
    background-color: #ffffff;
    padding: 5px;
}

    .emots-container .emots-list .item {
        display: inline-block;
        vertical-align: middle;
        padding: 1px 3px;
        cursor: pointer;
        border-radius: 3px;
    }

        .emots-container .emots-list .item img {
            max-width: 25px;
            height: auto;
        }

        .emots-container .emots-list .item:hover {
            background-color: #dbe0e6;
        }

    .emots-container .emots-list .frequentlyUsed .title {
        text-transform: uppercase;
        font-size: 11px;
        line-height: 14px;
        font-weight: bold;
        color: #0b1f30;
        padding: 3px 0 5px;
        margin-bottom: 0;
        border: none;
    }

    .emots-container .emots-list .frequentlyUsed {
        border-bottom: 1px solid #dbe0e6;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }

    .emots-container .emots-list .close {
        width: 19px;
        height: 19px;
        position: absolute;
        z-index: 303;
        top: 2px;
        right: 17px;
        opacity: 1;
        -webkit-transform: scale(.6);
        -ms-transform: scale(.6);
        -o-transform: scale(.6);
        transform: scale(.6);
    }

        .emots-container .emots-list .close svg {
            stroke: #f05a00;
        }

@media (max-width: 991.98px) {
    .emots-container .smile {
        right: 10px;
        top: -32px;
    }

    .emots-container.open .smile {
        right: 10px;
        top: -40px;
    }

    .emots-container .emots-list {
        position: relative;
        width: 100%;
        height: 200px;
        right: unset;
        bottom: unset;
        margin: 8px 0 15px;
    }
}

@media (max-width: 767.98px) {
    .emots-container .emots-list .item {
        padding: 1px 1px;
    }

        .emots-container .emots-list .item img {
            max-width: 20px;
        }
}


.ds-scrollbar {
    --scrollbar-color: transparent;
    --scrollbar-container-color: transparent;
    --scrollbar-thumb-color: #f05a00;
    --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.3);
    --scrollbar-border-radius: 4px;
    --scrollbar-size: 4px;
    --scrollbar-padding: 3px;
    --scroll-view-margin: 0;
    --scroll-view-color: transparent;
}

    .ds-scrollbar .ng-scrollbar-track {
        background-color: rgba(196, 196, 196, 0.5);
    }

/*.payment-history .setup .search-input {
    display: none;
}*/



.x-animated.swing > span {
    opacity: 0;
    display: inline-block;
    transform: translate(0, -300px) rotate(360deg) scale(0);
    animation: revolveDrop .3s forwards;
}

@keyframes revolveDrop {
    30% {
        transform: translate(0, -150px) rotate(180deg) scale(1);
    }

    60% {
        transform: translate(0, 20px) scale(.8) rotate(0deg);
    }

    100% {
        transform: translate(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}


@media(max-width: 575.98px) {
    .withdrawal-method .body .details.not-connected .connect-btn, .payment-method .body .details.not-connected .connect-btn {
        margin-bottom: 20px;
        margin-right: 0;
    }
}

.modal-connect-bank-account .modal-dialog {
    max-width: 400px;
}

.latest-events .data dd.action .video-btns a {
    width: 32px;
    margin-top: 3px;
}

.page.mob-splash-app {
    background-color: #000000;
}

.splash-video {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
}

    .splash-video video {
        width: 100%;
        height: 100%;
        display: block;
    }

.page.support {
    background-image: url("/template/img/support-bg.svg");
    background-position: right bottom;
    background-repeat: no-repeat;
}

.faq {
    display: inline-block;
    width: calc(100% - 360px);
    padding-right: 80px;
    margin-top: 20px;
}

@media (max-width: 767.98px) {
    .faq {
        width: 100%;
        padding-right: 0;
    }
}

.faq .item {
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid #515a62;
    background-color: #434b53;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

    .faq .item.open {
        border: 1px solid #f05a00;
        background: linear-gradient(90deg, #2c3238 0%, rgba(113, 84, 63, 0.4) 150%);
        background: -moz-linear-gradient(90deg, #2c3238 0%, rgba(113, 84, 63, 0.4) 150%);
        background: -webkit-linear-gradient(90deg, #2c3238 0%, rgba(113, 84, 63, 0.4) 150%);
    }

    .faq .item .quiz {
        padding-bottom: 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 19px;
        padding: 20px;
        position: relative;
        cursor: pointer;
    }

        .faq .item .quiz::after {
            content: "";
            position: absolute;
            top: 25px;
            right: 18px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 4px 0 4px 6px;
            border-color: transparent transparent transparent #777e85;
        }

    .faq .item.open .quiz {
        padding-bottom: 13px;
    }

        .faq .item.open .quiz::after {
            border-width: 6px 4px 0 4px;
            border-color: #ffffff transparent transparent transparent;
        }

    .faq .item .answer {
        font-size: 13px;
        font-weight: 300;
        line-height: 19px;
        padding-right: 20px;
        height: 0;
        overflow: hidden;
        opacity: 0;
        padding: 0 20px;
        -webkit-transition: padding-bottom 0.2s ease-out;
        -moz-transition: padding-bottom 0.2s ease-out;
        -ms-transition: padding-bottom 0.2s ease-out;
        -o-transition: padding-bottom 0.2s ease-out;
        transition: padding-bottom 0.2s ease-out;
        pointer-events: none;
    }

    .faq .item.open .answer {
        height: auto;
        padding-bottom: 20px;
        pointer-events: auto;
        opacity: 1;
    }

    .faq .item .answer a {
        color: #ffffff;
        text-decoration: underline;
    }

        .faq .item .answer a:hover {
            text-decoration: none;
        }

    .faq .item .answer ul {
        list-style-type: circle;
    }

        .faq .item .answer ul li {
            padding-left: 20px;
            list-style: inside;
        }

.page.donations.dashboard .item.in-progress {
    opacity: 0.4;
    pointer-events: none;
}

footer .links a {
    font-size: 11px;
    line-height: 15px;
    display: block;
}

.page.settings .form.personal .form-group.d-inline-block {
    margin-right: 45px;
}

.ds-dropdown.disabled {
    opacity: 0.3;
}

.modal-wallet-donate .btns.fast-flow {
    padding-bottom: 40px;
}

.modal-auth a.decline-btn, .modal-oauth-grant-access button.decline-btn {
    background-color: #bb2130;
}

.modal-auth a.decline-btn {
    width: 100%;
    /*position: relative;
    left: 0;*/
    margin-top: 5px;
    padding-left: 0;
    padding-right: 0;
}

.modal-auth .form.open a.decline-btn {
    margin-top: 0px;
}

.modal-auth .form.open .decline-btn-bottom {
    display: none;
}

.bottom-buttons, .modal-auth .auth-tab-content .form-group-btn .row {
    margin-right: -5px;
    margin-left: -5px;
}
    .bottom-buttons > div[class*='col-'],
    .modal-auth .auth-tab-content .form-group-btn .row > div[class*='col-'] {
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
    }



@media (min-width: 768px) and (max-width: 991.98px) {
    .modal-auth .bottom-buttons {
            display: none;
        }

        .modal-auth a.decline-btn-top {
            margin: 0 auto;
            width: auto;
        }

   .modal-auth .auth-tab-content .form-group-btn .btn, .modal-auth .bottom-buttons .btn {
        padding-left: 60px;
        padding-right: 60px;
    }

    }

    @media (min-width: 576px) and (max-width: 767.98px) {
        .modal-auth .bottom-buttons {
            display: none;
        }

        .modal-auth a.decline-btn-top {
            margin-top: 0px;
            width: 100%;;
            margin-left: auto;
            margin-right: auto;
        }
    }

    @media (max-width: 575.98px) {
        .modal-auth .bottom-buttons {
            display: none;
        }

        .modal-auth a.decline-btn-top {
            margin-top: 0px;
            width: 100%;
        }
    }

    .donation-sender-email {
    text-transform: uppercase;
}

.ds-dropdown-menu {
    overflow-y: hidden;
}

    .ds-dropdown-menu ul li.selected {
        background-color: rgba(91,109,126,.8);
    }

    .ds-dropdown-menu ul li a {
        color: #fff;
        font-size: 13px;
        line-height: 17px;
        font-weight: 500;
        display: inline-block;
        width: 100%;
        padding: 10px 18px;
    }

.ds-dropdown-scrollbar2 .ng-scroll-viewport-wrapper {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    height: auto !important;
    max-height: 250px;
}

.ds-select-dropdown .filter-option-inner {
    line-height: 40px;
    color: rgb(198, 206, 213);
}

.ds-select-dropdown .dropdown-toggle {
    color: rgb(198, 206, 213);
}

.ds-dropdown-scrollbar2 .ng-scrollbar-wrapper {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    height: auto !important;
    max-height: 250px;
}

button.ds-select-dropdown {
    background-color: #2c3238;
}

.ds-dropdown-scrollbar .ng-scroll-viewport-wrapper {
    max-height: 250px;
}

.ds-dropdown-menu-inner {
    max-height: 150px;
}

.page.developers .item .flag {
    margin-right: 4px;
}

.page.developers .item .document {
    margin-left: 6px;
    margin-right: 7px;
    position: relative;
    top: -1px;
}

.widget .side-group .title {
    font-size: 9px !important;
}
.widget .settings-form-panel .side-group .title {
    word-wrap: normal;
}
.modal-wallet-donate .modal-body .pay-fees-checkbox img {
    margin-right: 11px;
    width: 20px;
    height: 18px
}

.modal-wallet-donate .modal-body .pay-fees-checkbox {
    text-align: center;
    margin-bottom: 10px;
}

    .modal-wallet-donate .modal-body .pay-fees-checkbox label {
        padding-left: 0px;
        cursor: pointer;
    }

@media (max-width: 576px) {
    .modal-wallet-donate .modal-body .pay-fees-checkbox {
        text-align: left;
    }
}

.payment-history .list .item .transaction-fee-paid a {
    cursor: default;
    position: absolute;
    top: 0
}

.payment-history .list .item .transaction-fee-paid {
    width: 11px;
    height: 9px;
    display: inline-block;
}

    .payment-history .list .item .transaction-fee-paid a img {
        width: 11px;
        height: 9px;
    }

    .payment-history .list .item .transaction-fee-paid a .ds-tooltip {
        width: 120px;
    }

@media (max-width: 767px) {
    .payment-history .list .item .transaction-fee-paid a {
        top: 15px;
    }
}

.page.donations .list .item .label .donation-fee-paid a {
    position: relative;
    pointer-events: initial;
    width: 15px;
    cursor: default;
}

    .page.donations .list .item .label .donation-fee-paid a img {
        width: 9px;
        height: 8px;
    }

    .page.donations .list .item .label .donation-fee-paid a .ds-tooltip {
        width: 100px;
    }

.page.donations.events-feed .list .item .label .donation-fee-paid a .ds-tooltip {
    left: 54px;
}

.modal-wallet-donate .amount-correction-container {
    padding-top: 7px;
}

.modal-wallet-donate span.total-amount {
    color: #54626D;
    font-size: 11px;
    line-height: 24px;
    min-height: 24px;
    display: block;
}

.modal-withdrawal .note {
    color: #d0021b;
    font-size: 12px;
    font-weight: 500;
    height: 40px;
    align-items: center;
    display: inline-flex;
    text-transform: uppercase;
    line-height: 15px;
}

.modal-withdrawal .buttons {
    margin-bottom: 12px;
}

@media (max-width: 575.98px) {
    .modal-withdrawal .note {
        text-align: center;
        display: block;
    }

    .modal-withdrawal .buttons {
        margin-bottom: 60px;
    }
}

.approximately {
    position: relative;
    cursor: default;
}

.main-sidebar .approximately {
    cursor: pointer;
}

.approximately .ref {
    position: absolute;
    top: 3px;
    right: 5px;
}

.main-sidebar .approximately .ref {
    top: 0;
    right: 7px;
}

.approximately .ref .text {
    display: none;
    position: absolute;
    z-index: 500;
    top: -7px;
    -webkit-transform: translate(100%,-100%);
    -ms-transform: translate(100%,-100%);
    transform: translate(100%,-100%);
    right: 30px;
    background-color: #2c3238;
    border: 1px solid #52575d;
    border-radius: 10px;
    text-transform: none;
    padding: 13px;
    font-size: 10px;
    width: 375px;
}

.main-sidebar .approximately .ref .text {
    width: 239px;
    padding: 10px 13px 12px;
}

.approximately .ref .text::before {
    content: "";
    position: absolute;
    top: auto;
    bottom: -5px;
    left: 19px;
    border-width: 4.5px 4.5px 0;
    border-style: solid;
    border-color: #52575d transparent;
    display: block;
    width: 0;
}

.approximately .ref .text::after {
    content: "";
    position: absolute;
    bottom: -4px;
    top: auto;
    left: 19px;
    border-width: 4.5px 4.5px 0;
    border-style: solid;
    border-color: #2c3238 transparent;
    display: block;
    width: 0;
}

.approximately .ref .text em {
    font-weight: normal;
    line-height: 1.65;
    font-style: normal;
    display: block;
}

.approximately:hover .ref .text {
    display: block;
}

.main-sidebar .approximately:hover .ref .text {
    display: none;
}

.no-touch .main-sidebar .approximately:hover .ref .text {
    display: block;
}

.no-touch .main-sidebar .approximately:hover .ref {
    position: fixed;
    left: 34px;
    top: 97px;
    right: auto;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .approximately .ref {
        right: 1px;
    }
}

@media (max-width: 767.98px) {
    .approximately .ref {
        right: 1px;
    }

        .approximately .ref .text {
            width: 164px;
        }

    .main-sidebar .approximately .ref .text {
        width: 270px;
        padding: 6px 10px 8px;
    }

    .no-touch .main-sidebar .approximately .ref, .no-touch .main-sidebar .approximately:hover .ref {
        position: absolute;
        left: 22px;
        top: 0;
        right: auto;
    }
}

positional.zselected {
    z-index: 1000 !important;
}

.modal-payment label{
    position: relative;
    top: -2px;
}

.payment-method .connect-btn {
    margin-right: 30px;
}

.modal-launchoverlay .step a {
    margin-left: 4px;
}
.modal-launchoverlay .step .btn {
    margin-left: 0;
}
.toast-container {
    position: absolute !important;
}
.modal-wallet-donate .half-right {
    width: calc(50% + 40px);
    padding-left: 40px;
    vertical-align: top;
    padding-top: 30px;
}
@media (max-width: 767.98px) {

    .modal-wallet-donate .half-right {
        padding-left: 0;
        padding-top: 0;
        width: 100%;
    }
}

.modal-auth .modal-body .tabs > .title {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
}
@media (max-width: 575.98px) {
    .modal-auth .modal-body .tabs > .title {
        padding: 0 30px;
        font-size: 11px;
    }
}
.modal-auth .form form .btn {
    padding-left: 0;
    padding-right: 0;
}
.modal-auth .decline-btn-bottom {
    margin-bottom: 40px;
}
@media (max-width: 767.98px)  {
    .modal-dialog {
        max-width: unset;
        width: 100%;
    }
    .dsp .modal-oauth-grant-access .form button {
        padding-left: 0;
        padding-right: 0;
    }
}

.modal-oauth-grant-access .form .row {
    margin-left: -5px;
    margin-right: -5px;
}

    .modal-oauth-grant-access .form .row > div[class*='col-'] {
         padding-left: 5px;
         padding-right: 5px;
    }
.modal-auth .bottom-buttons .col-12 a.decline-btn-bottom {
    margin-top: -30px;
}

.modal-backdrop {
    z-index: 1040 !important;
}

/******* ng-select customization *******/

.modal .ng-select.ng-select-single .ng-select-container {
    height: 40px;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4);
    -moz-box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4);
    -webkit-box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4);
    color: #0b1f30;
    background-color: #ffffff;
    border: none;
    border-radius: 12px;
    outline: none;
}
.modal .ng-select.ng-select-single .ng-select-container:hover{
    box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4);
    -moz-box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4);
    -webkit-box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4);
}
.modal .ng-select.ng-select-focused .ng-select-container{
    border: none;
}
.modal .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
    border: none;
}
.modal .ng-select.ng-select-single .ng-select-container:active {
    outline: none;
}
.modal .ng-select.ng-select-single .ng-select-container .ng-value-container {
    font-size: 13px;
    line-height: 40px;
    padding-left: 0;
}
.modal .ng-select .ng-select-container .ng-value-container .ng-placeholder {
    color: #152a3c;
    padding-left: 20px;
    opacity: 0.85;
    height: 40px;
    line-height: 40px;
}
.modal .ng-select .ng-select-container .ng-value-container .ng-input>input {
    color: #0b1f30;
}
.modal .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value {
    padding-left: 20px;
    height: 40px;
    line-height: 40px;
}
.modal .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
    top: 0;
}

.modal .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
    font-size: 13px;
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 18px;
    color: #383e44;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}


.modal .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected, 
.modal .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked,
.modal .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
    background-color: #dbe0e6;
}
.modal .ng-dropdown-panel .scroll-host {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.modal .ng-dropdown-panel.ng-select-bottom {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-top-color: #c1c4c7;
    overflow: hidden;
}

.modal .ng-dropdown-panel {
    border: none;
    box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4);
    -moz-box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4);
    -webkit-box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4);
}

.modal .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label, 
.modal .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label {
    font-weight: normal;
}
.modal .ng-select .ng-arrow-wrapper .ng-arrow {
    position: relative;
    top: -2px;
    border: none;
    width: 9px;
    height: 6px;;
    background: url("../../template/img/dropdown-arrow.svg") top left no-repeat;
}

.modal .ng-select .ng-clear-wrapper:hover .ng-clear {
    color: #999;
} 
.modal .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
    padding-left: 20px;
}
.modal .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
    border-color:transparent;
    box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4);
    -moz-box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4);
    -webkit-box-shadow: 0px -0.6px 1px rgba(81, 89, 96, 0.4);
}

.modal .ng-select .ng-dropdown-panel-items {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.modal .ng-select .ng-dropdown-panel-items::-webkit-scrollbar {
    display: none;
}

.hidden-warning-text {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    opacity: 0;
    pointer-events: none;
}
.modal-payment .masked-number {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

.modal-crypto-wallet .hidden-warning-text {
    margin-bottom: -40px;
}

.modal-crypto-wallet .form.request-form {
    padding-bottom: 40px;
}