@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Syncopate&display=swap');

.spinner {
    position: fixed;
    /* z-index: 1031; */
    top: 50%;
    left: 50%;

    width: 5rem;
    height: 5rem;
}

.cursor-pointer {
    cursor: pointer;
}

.active-nav > a {
    color: white !important;
}

.nav-item.dropdown.no-arrow{

}



.dataTables_wrapper .dataTables_filter input{
    border: none;
    border-bottom: 1px dashed #e3e6f0;
}

.dataTables_wrapper .dataTables_length select{
    border: none;
    border-bottom: 1px dashed #e3e6f0;
}

.table-bordered th, .table-bordered td{
    border:none;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

/* Datatables style overwrite */

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #040404 !important;
    border: 1px solid #00bdd5;
    background: none;
    position: relative;
    display: inline-block;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: all 0.3s ease-in-out;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #555555 !important;
    border: 1px solid #00bdd5;
    background-color: #f8f9fc;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
    background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
    background: -moz-linear-gradient(top, #585858 0%, #111 100%);
    background: -ms-linear-gradient(top, #585858 0%, #111 100%);
    background: -o-linear-gradient(top, #585858 0%, #111 100%);
    background: linear-gradient(to bottom, #f8f9fc 0%, #f8f9fc 100%);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #f8f9fc !important;
    border: 1px solid rgb(0, 189, 213);
    background: #c1c1c1;
    box-shadow: none;
    cursor: not-allowed;
}

/* Datatables style overwrite END */

/* Datatables RowGroup overwrite */

table.dataTable tr.dtrg-group td {
    background-color: #03bbd3!important;
    color: white!important;
    cursor: pointer;
}

/* Datatables RowGroup overwrite END */


/* Card filter block */

.card-filterblock {
    padding-left: 0.75rem;
    max-height: 0;
    transition: all 0.55s linear;
    overflow: hidden;
}

.card-filterblock.active {
    max-height: 500px;
    transition: max-height 0.55s linear;
    padding: 0.75rem 1.25rem;
    margin: 0;
    border-bottom: 1px dashed #e3e6f0;
    overflow: visible;
}

.card-filterblock .row .filter-header {
    text-align: center;
    padding: 2rem 1rem;
    font-weight: 600;
}

.card-filterblock .row .filter-item {
    padding-bottom: 2rem;
}

.card-filterblock .row div .row .filter-item:not(:last-child) {
    border-right: 1px dashed #e3e6f0;
}

.card-filterblock .row .filter-header {
    border-right: 1px dashed #e3e6f0;
}

/* Card search block */

.card-searchblock {
    padding-left: 0.75rem;
    max-height: 0;
    transition: all 0.55s linear;
    overflow: hidden;
}

.card-searchblock.active {
    max-height: 500px;
    transition: max-height 0.55s linear;
    padding: 0.75rem 1.25rem;
    margin: 0;
    border-bottom: 1px dashed #e3e6f0;
    overflow: visible;
}

.card-searchblock .row .search-header {
    text-align: center;
    font-weight: 600;
}

.card-searchblock .row .search-item {

}

.card-searchblock .row div .row .search-item:not(:last-child) {
    border-right: 1px dashed #e3e6f0;
}

.card-searchblock .row .search-header {
    border-right: 1px dashed #e3e6f0;
}

/* Card helper */

.card-helper {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}


/* sidebar style override */
.sidebar-brand-text {
    font-family: 'Syncopate', sans-serif;
    font-size: 24px;
}

.brand-subtitle{
    background-color: #4ed0e1;
    color: white;
    font-size: 10px;
}


.payment_method_logo_container{
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 48px;
}




/* SB admin 2 override */

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active, .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
    background-color: #5dce8d!important;
    color: white;
    font-weight: 300;
    margin: 0;
    border-radius: 0;
}

.sidebar .nav-item .nav-link.active{
    /*background-color: #2ecc71;*/
    /*border-radius: 0px 5px 5px 0px;*/
    z-index: 1;
    color: #fff;
    /*border-top: 1px dashed #fff;
    border-right: 1px dashed #fff;
    border-bottom: 1px dashed #fff;*/
    box-shadow: inset 0 0 0 51px rgba(255,255,255,0.3);
    filter: blur(0px);
}

.sidebar .nav-item .collapse,
.sidebar .nav-item .collapsing {
    margin: 0;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
    background-color: #eaecf4;
    margin: 0;
    border-radius: 0;
    padding-left: 2rem;
}


.mobile-payment{
    min-height: 400px;
    background-image: url(./../images/placeholder/mobile_payment.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.refund-payment{
    min-height: 400px;
    background-image: url(./../images/placeholder/refund.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.playtime{
    min-height: 400px;
    background-image: url(./../images/placeholder/playtime.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.give_creditnote{
    min-height: 400px;
    background-image: url(./../images/placeholder/creditnote.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.add_manualpayment{
    min-height: 400px;
    background-image: url(./../images/placeholder/business_deal.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.add_chargeback{
    min-height: 400px;
    background-image: url(./../images/placeholder/chargeback.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.add_accountfee{
    min-height: 400px;
    background-image: url(./../images/placeholder/accountfee.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.add_companyaccount{
    min-height: 400px;
    background-image: url(./../images/placeholder/company_accounts.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: auto;
}

.add_report{
    min-height: 400px;
    background-image: url(./../images/placeholder/report.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.add_agreement{
    min-height: 400px;
    background-image: url(./../images/placeholder/agreement.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}

.add_link{
    min-height: 400px;
    background-image: url(./../images/placeholder/link.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
}
/* SLIDER */

.slidecontainer {
    width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #D10A11; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #D10A11; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.morph-background {
    display: inline-block;
    background-color: #00bdd5;
    height: 45px;
    line-height: 45px;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}
.morph-modal.modal-sidebar .morph-background{
    background:none;
}

.modal-big-content {
    position: relative;
    height: 100%;
    overflow: auto;
    z-index: 10;
    color: black;
}

.pnotify-center {
    left: 45%;
    right:auto!important;
}

.translucent.pnotify-fade-in {
    opacity: 0.8!important;
}


.daterangepicker td.disabled, .daterangepicker option.disabled {
    background: #fff6f6!important;
}

.dt-buttons{
    padding-bottom: 30px;
}

.dt-button{
    background: #00bdd5;
    color: white;
    margin: 0;
    position: relative;
    display: inline-block;
    border: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.55);
    transition: all 0.3s ease-in-out;
}
.dt-button:hover{
    background: #e74a3b;
}

div#file:hover {
    opacity: 0.8;
}

.qrcontainer{
    height: 200px;
    width: 200px;
    display: inline-block;
}

.notify-bubble{
    display: inline-block;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #d10a11;
    /* border-radius: 50%; */
    text-align: center;
    font-size: small;
    color: #ffffff;
    float: right;
    margin-left: 10px;
    margin-top: 2px;
    border: 1px solid #b91e27;
}



/* Badges */


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

.main-wrapper .badge {
    position: relative;
    margin: 1.5em 3em;
    width: 3em;
    height: 5em;
    border-radius: 10px;
    display: inline-block;
    top: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}
.main-wrapper .badge:before, .main-wrapper .badge:after {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}
.main-wrapper .badge:before {
    transform: rotate(60deg);
}
.main-wrapper .badge:after {
    transform: rotate(-60deg);
}
.main-wrapper .badge:hover {
    top: -4px;
}
.main-wrapper .badge .circle {
    width: 42px;
    height: 42px;
    position: absolute;
    background: #fff;
    z-index: 10;
    border-radius: 50%;
    top: -13px;
    left: -2px;
    right: 0;
    bottom: 0;
    margin: auto;
    padding-top: 5px;
    cursor: pointer;
}
.main-wrapper .badge .circle i.fa {
    font-size: 2em;
    margin-top: 8px;
}
.main-wrapper .badge .font {
    display: inline-block;
    margin-top: 1em;
}
.main-wrapper .badge .ribbon {
    position: absolute;
    border-radius: 4px;
    padding: 5px 5px 4px;
    width: 100px;
    z-index: 11;
    color: #fff;
    top: 35px;
    left: 56%;
    margin-left: -55px;
    font-size: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    background: linear-gradient(to bottom right, #555 0%, #333 100%);
    cursor: pointer;
}

.main-wrapper .badge.yellow {
    background: linear-gradient(to bottom right, #ffeb3b 0%, #fbc02d 100%);
    color: #ffb300;
}

.main-wrapper .badge.orange {
    background: linear-gradient(to bottom right, #ffc107 0%, #f57c00 100%);
    color: #f68401;
}

.main-wrapper .badge.pink {
    background: linear-gradient(to bottom right, #F48FB1 0%, #d81b60 100%);
    color: #dc306f;
}

.main-wrapper .badge.red {
    background: linear-gradient(to bottom right, #f4511e 0%, #b71c1c 100%);
    color: #c62828;
}

.main-wrapper .badge.purple {
    background: linear-gradient(to bottom right, #ab47bc 0%, #4527a0 100%);
    color: #7127a8;
}

.main-wrapper .badge.teal {
    background: linear-gradient(to bottom right, #4DB6AC 0%, #00796B 100%);
    color: #34a297;
}

.main-wrapper .badge.blue {
    background: linear-gradient(to bottom right, #4FC3F7 0%, #2196F3 100%);
    color: #259af3;
}

.main-wrapper .badge.blue-dark {
    background: linear-gradient(to bottom right, #1976D2 0%, #283593 100%);
    color: #1c68c5;
}

.main-wrapper .badge.green {
    background: linear-gradient(to bottom right, #cddc39 0%, #8bc34a 100%);
    color: #7cb342;
}

.main-wrapper .badge.green-dark {
    background: linear-gradient(to bottom right, #4CAF50 0%, #1B5E20 100%);
    color: #00944a;
}

.main-wrapper .badge.silver {
    background: linear-gradient(to bottom right, #E0E0E0 0%, #BDBDBD 100%);
    color: #9e9e9e;
}

.main-wrapper .badge.gold {
    background: linear-gradient(to bottom right, #e6ce6a 0%, #b7892b 100%);
    color: #b7892b;
}



/* Multi switch */
/* https://codepen.io/markcaron/pen/qXYJVm */

/*
 CSS for the main interaction
*/
.multiswitch input {
    position: absolute;
    left: -200vw;
}

.multiswitch .slide-container {
    position: relative;
    display: flex;
    max-width: 50em;
    line-height: 2em;
    /* don't allow highlighting the text inside the toggle */
    user-select: none;
}

.multiswitch .slide-container label {
    /* Even though we're using "flex" to display, we have to assign widths so that we know exactly where to position the slide */
    width: 50%;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    z-index: 2;
    margin: 0;
}

.multiswitch .slide-container a {
    position: absolute;
    left: 50%;
    z-index: 1;
    height: 100%;
    width: 50%;
    transition: left 0.1s ease-out;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/*
  Auto adjusting widths
*/
.multiswitch label:nth-last-child(6),
.multiswitch label:nth-last-child(6) ~ label,
.multiswitch label:nth-last-child(6) ~ a {
    width: 33.3334%;
}

.multiswitch label:nth-last-child(8),
.multiswitch label:nth-last-child(8) ~ label,
.multiswitch label:nth-last-child(8) ~ a {
    width: 25%;
}

.multiswitch label:nth-last-child(10),
.multiswitch label:nth-last-child(10) ~ label,
.multiswitch label:nth-last-child(10) ~ a {
    width: 20%;
}

.multiswitch label:nth-last-child(12),
.multiswitch label:nth-last-child(12) ~ label,
.multiswitch label:nth-last-child(12) ~ a {
    width: 16.6667%;
}

/*
 Slider
*/

/* all options, first selected */
.multiswitch input:checked ~ a {
    left: 0;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* 2 options, 2nd selected */
.multiswitch label:nth-last-child(4) ~ input:nth-child(3):checked ~ a {
    left: 50%;
}
/* 3 options, 2nd selected */
.multiswitch label:nth-last-child(6) ~ input:nth-child(3):checked ~ a {
    left: 33.3334%;
}
/* 3 options, 3rd selected */
.multiswitch label:nth-last-child(6) ~ input:nth-child(5):checked ~ a {
    left: 66.6667%;
}
/* 4 options, 2nd selected */
.multiswitch label:nth-last-child(8) ~ input:nth-child(3):checked ~ a {
    left: 25%;
}
/* 4 options, 3rd selected */
.multiswitch label:nth-last-child(8) ~ input:nth-child(5):checked ~ a {
    left: 50%;
}
/* 4 options, 4th selected */
.multiswitch label:nth-last-child(8) ~ input:nth-child(7):checked ~ a {
    left: 75%;
}
/* 5 options, 2nd selected */
.multiswitch label:nth-last-child(10) ~ input:nth-child(3):checked ~ a {
    left: 20%;
}
/* 5 options, 3rd selected */
.multiswitch label:nth-last-child(10) ~ input:nth-child(5):checked ~ a {
    left: 40%;
}
/* 5 options, 4th selected */
.multiswitch label:nth-last-child(10) ~ input:nth-child(7):checked ~ a {
    left: 60%;
}
/* 5 options, 5th selected */
.multiswitch label:nth-last-child(10) ~ input:nth-child(9):checked ~ a {
    left: 80%;
}
/* 6 options, 2nd selected */
.multiswitch label:nth-last-child(12) ~ input:nth-child(3):checked ~ a {
    left: 16.6667%;
}
/* 6 options, 3rd selected */
.multiswitch label:nth-last-child(12) ~ input:nth-child(5):checked ~ a {
    left: 33.3334%;
}
/* 6 options, 4th selected */
.multiswitch label:nth-last-child(12) ~ input:nth-child(7):checked ~ a {
    left: 50%;
}
/* 6 options, 5th selected */
.multiswitch label:nth-last-child(12) ~ input:nth-child(9):checked ~ a {
    left: 66.6667%;
}
/* 6 options, 6th selected */
.multiswitch label:nth-last-child(12) ~ input:nth-child(11):checked ~ a {
    left: 83.3334%;
}

/*
  Slider shadows
*/
/* middle spots */
.multiswitch input:not(:first-child):checked ~ a {
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.2),
    -1px 0 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* last spots */
.multiswitch label:nth-last-child(4) ~ input:nth-child(3):checked ~ a,
.multiswitch label:nth-last-child(6) ~ input:nth-child(5):checked ~ a,
.multiswitch label:nth-last-child(8) ~ input:nth-child(7):checked ~ a,
.multiswitch label:nth-last-child(10) ~ input:nth-child(9):checked ~ a,
.multiswitch label:nth-last-child(12) ~ input:nth-child(11):checked ~ a {
    box-shadow: -1px 0 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

fieldset {
    border: 0;
    padding: 0;
}

fieldset legend {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}

.multiswitch .slide-container {
    background: #122d46;
    color: #fff;
    transition: all 0.1s ease-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.multiswitch .slide-container label {
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.multiswitch .slide-container a {
    background: #d10a11;
    border: 1px solid #005f90;
}

/* Stoplight theme */
.multiswitch[data-theme="stoplight"] .slide-container > a {
    background: #c00;
    border-color: #8a0000;
}

.multiswitch[data-theme="stoplight"] input:not(:first-child):checked ~ a {
    background: #ec7a08;
    border-color: #bc6106;
}

.multiswitch[data-theme="stoplight"] label:nth-last-child(4) ~ input:nth-child(3):checked ~ a,
.multiswitch[data-theme="stoplight"] label:nth-last-child(6) ~ input:nth-child(5):checked ~ a,
.multiswitch[data-theme="stoplight"] label:nth-last-child(8) ~ input:nth-child(7):checked ~ a,
.multiswitch[data-theme="stoplight"] label:nth-last-child(10) ~ input:nth-child(9):checked ~ a,
.multiswitch[data-theme="stoplight"] label:nth-last-child(12) ~ input:nth-child(11):checked ~ a {
    background: #3f9c35;
    border-color: #307628;
}

/*
 Horizontal layout
*/
.switch {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

/*
 Because a11y
*/
.multiswitch input:focus ~ a {
    outline: 2px solid #0088ce;
}


/* Button popup form */

.open-popup-btn {
    cursor: pointer;
    position: relative;
}

/* The popup form - hidden by default */
.form-popup {
    min-width: 500px;
    position: absolute;
    right: 0;
    bottom: 36px;
    border: 1px solid #f1f1f1;
    z-index: 9;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Add styles to the form container */
.form-container {
    padding: 10px;
    background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
    opacity: 1;
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
    color: #b7b9cc;
    background-color: #f9f9f9;
}