/*****************************************************************************************************************/
/********************************************** DARK *************************************************************/
/*****************************************************************************************************************/

.dark body {
    background: #1F2037;
    color: #ECEDEC;
}

.dark .recent-comment .media-body h4 {
    color: #03a9f5;
}

.dark .swal2-modal {
    background-color: #333b54 !important;
    border-color: #a9abaf;
}

    .dark .swal2-modal h2,
    .dark .swal2-modal .swal2-content {
        color: white !important;
    }

.dark p {
    color: #ECEDEC;
}

.dark a {
    color: #0286c2;
}

.dark button {
    color: #ECEDEC;
}

.dark .header {
    background: #333B54;
}

.dark .logo span {
    color: #ECEDEC;
}

.dark #transferElements .beneficary-list:hover {
    background-color: #1f2037;
}

.dark .hamburger .line {
    background-color: #03a9f5;
}

.dark .header-icon {
    color: #ECEDEC;
}

.dark .drop-down {
    background: #1F2037;
    border: 1px solid #1F2037;
    color: #ECEDEC;
}

.dark .dropdown-profile li a {
    color: #ECEDEC;
}

.dark .dropdown-content-body li {
    border-top: 1px solid #1f2037;
}

    .dark .dropdown-content-body li:hover,
    .dark .dropdown-content-body li:focus,
    .dark .dropdown-content-body li.active {
        background: #333B54;
        border-top: 1px solid #333B54;
    }

.dark .notification-heading {
    color: #ECEDEC;
}

.dark .notification-unread {
    background: #262C3F;
}

.dark .dropdown-content-heading span {
    color: #ECEDEC;
}

.dark .dropdown-content-body li a:hover,
.dark .dropdown-content-body li a:focus,
.dark .dropdown-content-body li a.active {
    color: #ECEDEC;
}

.dark .main .page-header {
    background: #333B54;
}

    .dark .main .page-header .breadcrumb {
        background: transparent;
    }

.dark .card, .dark .modal-content {
    background: #333B54;
}

.dark .card-body {
    background: #333B54;
}

.dark .card-header-right-icon li {
    color: #ECEDEC;
}

.dark .alert h4 {
    color: #fff;
}

.dark .weather-one {
    background: transparent;
}

.dark .sidebar {
    background: #333B54;
}

    .dark .sidebar .nano-content > ul li > a {
        color: #ECEDEC;
    }

    .dark .sidebar .nano-content > ul > li.active > a,
    .dark .sidebar .nano-content > ul > li.open > a,
    .dark .sidebar .nano-content > ul > li > ul {
        background: #1F2037;
    }

    .dark .sidebar .nano-content > ul li:hover > a,
    .dark .sidebar .nano-content > ul li.active > a,
    .dark .sidebar .nano-content > ul li.open > a {
        color: #03a9f5 !important;
    }

.dark .table > thead > tr > th {
    color: #fff;
}

.dark tbody tr td {
    color: #ECEDEC;
}

.dark .table-hover > tbody > tr:hover {
    background: #1F2037;
}

.dark .ct-chart-pie .ct-label {
    color: #fff;
    fill: #fff;
}

.dark .home-widget-three .stat-digit {
    color: #ECEDEC;
}

.dark .stat-widget-seven .stat-count {
    color: #ECEDEC;
}

.dark .stat-widget-seven .count-header {
    color: #ECEDEC;
}

.dark .tdl-holder li {
    background-color: transparent;
    border-bottom: 1px solid #1f2037;
    color: #ECEDEC;
}

.dark .tdl-holder label:hover {
    background-color: #1F2037;
    color: #ECEDEC;
}

.dark .tdl-holder input[type="checkbox"]:checked ~ span {
    color: #ECEDEC;
}

.dark .tdl-holder input[type="checkbox"] + i {
    background-color: #1f2037;
}

.dark .timeline::before {
    background-color: #1f2037;
}

.dark .timeline > li > .timeline-panel::before {
    border-color: transparent #1f2037;
}

.dark .timeline > li > .timeline-panel::after {
    border-color: transparent #1f2037;
}

.dark .tdl-holder input[type="text"] {
    background-color: #1f2037;
    border-color: #1f2037;
}

.dark .timeline > li > .timeline-panel {
    border: 1px solid #1f2037;
}

.dark .profile-widget-one .profile-one-user-content ul li {
    background: transparent;
    border-bottom: 1px solid #1f2037;
    border-right: 1px solid #1f2037;
}

.dark .footer > p {
    background: #333B54;
}

.dark .pace .pace-progress {
    background: #03a9f5;
}

.dark .pace .pace-activity {
    border-top-color: #03a9f5;
    border-left-color: #03a9f5;
}

.dark .ct-label {
    color: #ECEDEC;
    fill: #ECEDEC;
    font-size: 10px;
}

.dark .search-type .form-control {
    background: transparent;
}

.dark .pignose-calendar.pignose-calendar-blue {
    background-color: transparent;
}

    .dark .pignose-calendar.pignose-calendar-blue .pignose-calendar-top {
        background-color: transparent;
    }

        .dark .pignose-calendar-wrapper .pignose-calendar.pignose-calendar-dark .pignose-calendar-button-group .pignose-calendar-button,
        .dark .pignose-calendar.pignose-calendar-blue .pignose-calendar-top .pignose-calendar-top-month,
        .dark .pignose-calendar.pignose-calendar-blue .pignose-calendar-top .pignose-calendar-top-nav .pignose-calendar-top-icon,
        .dark .pignose-calendar.pignose-calendar-blue .pignose-calendar-top .pignose-calendar-top-nav .pignose-calendar-top-value,
        .dark .pignose-calendar.pignose-calendar-blue .pignose-calendar-top .pignose-calendar-top-year {
            color: #ECEDEC;
        }

    .dark .pignose-calendar.pignose-calendar-blue .pignose-calendar-body .pignose-calendar-row .pignose-calendar-unit.pignose-calendar-unit-sat a,
    .dark .pignose-calendar.pignose-calendar-blue .pignose-calendar-body .pignose-calendar-row .pignose-calendar-unit.pignose-calendar-unit-sun a,
    .dark .pignose-calendar.pignose-calendar-blue .pignose-calendar-header .pignose-calendar-week.pignose-calendar-week-sat,
    .dark .pignose-calendar.pignose-calendar-blue .pignose-calendar-header .pignose-calendar-week.pignose-calendar-week-sun {
        color: #ECEDEC;
    }

    .dark .pignose-calendar.pignose-calendar-blue .pignose-calendar-body .pignose-calendar-row .pignose-calendar-unit a {
        color: #fff;
    }

    .dark .pignose-calendar.pignose-calendar-blue .pignose-calendar-header .pignose-calendar-week {
        color: #fff;
    }

.dark .media-body p {
    color: #ECEDEC;
}

.dark .recent-comment .comment-date {
    color: #ECEDEC;
}

.dark .list-group-item {
    background-color: transparent;
    padding: 7px 15px;
}

.dark .mail-box .sm-side {
    background: transparent;
}

    .dark .mail-box .sm-side .user-head {
        background: transparent;
        color: #ECEDEC;
    }

.dark .user-head .user-name h5 a {
    color: #ECEDEC;
}

.dark .user-head .user-name span a {
    color: #ECEDEC;
}

.dark ul.inbox-nav li a {
    color: #ECEDEC;
}

.dark ul.inbox-nav li.active a {
    background: #1f2037;
    color: #ECEDEC;
}

.dark ul.inbox-nav li a:hover {
    background: #1f2037;
    color: #ECEDEC;
}

.dark ul.labels-info li a {
    color: #ECEDEC;
}

    .dark ul.labels-info li a:hover {
        background: #1f2037;
        color: #ECEDEC;
    }

.dark ul.inbox-nav li a i {
    color: #ECEDEC;
}

.dark .mail-box .lg-side {
    background: transparent;
}

.dark .inbox-head {
    color: #ECEDEC;
    background: transparent;
}

    .dark .inbox-head .sr-input {
        background: #1f2037;
        color: #ECEDEC;
    }

    .dark .inbox-head .sr-btn {
        background: #1f2037;
        color: #ECEDEC;
    }

.dark .table-inbox tr.unread td {
    background: #262c3f;
}

.dark .table-inbox {
    border: 1px solid #1f2037;
}

.dark .inbox-divider {
    border-bottom: 1px solid #1f2037;
}

.dark .mail-option .btn-group a.btn {
    background: #1f2037;
    border: 1px solid #1f2037;
    color: #ECEDEC;
}

.dark .mail-option .chk-all {
    background: #1f2037 none repeat scroll 0 0;
    border: 1px solid #1f2037;
    color: #ECEDEC;
}

.dark .inbox-pagination a.np-btn {
    background: #1f2037 none repeat scroll 0 0;
    border: 1px solid #1f2037;
    color: #ECEDEC;
}

.dark .contact-title {
    color: #ECEDEC;
}

.dark .phone-number,
.dark .mail-address,
.dark .contact-email,
.dark .contact-website,
.dark .contact-skype,
.dark .birth-date,
.dark .gender {
    color: #ECEDEC;
}

.dark .stat-widget-one .stat-text {
    color: #ECEDEC;
}

.dark .stat-widget-one .stat-digit {
    color: #ECEDEC;
}

.dark .stat-widget-two .stat-text {
    color: #ECEDEC;
}

.dark .stat-widget-two .stat-digit {
    color: #ECEDEC;
}

.dark .fc-button {
    background: #1f2037 none repeat scroll 0 0;
    border: 1px solid #1F2037;
    box-shadow: none;
}

.dark .fc-day {
    background: transparent none repeat scroll 0 0;
}

.dark .fc th.fc-widget-header {
    background: #1F2037 none repeat scroll 0 0;
    color: #ECEDEC;
}

.dark .fc-today {
    background: #1F2037 !important;
}

.dark .flot-container {
    background: transparent;
}

.dark .panel {
    background-color: #262c3f;
}

.dark .panel-heading {
    background: #1f2037;
}

.dark .panel-footer {
    background-color: transparent;
}

.dark .thumbnail {
    background-color: transparent;
    border: 1px solid #1F2037;
}

.dark a.list-group-item:focus,
.dark a.list-group-item:hover,
.dark button.list-group-item:focus,
.dark button.list-group-item:hover {
    background-color: #1F2037;
    color: #ECEDEC;
}

.dark .nav-tabs > li.active > a,
.dark .nav-tabs > li.active > a:focus,
.dark .nav-tabs > li.active > a:hover {
    background-color: #333B54;
    color: #ECEDEC;
}

.dark .nav > li > a:focus,
.dark .nav > li > a:hover {
    background-color: #03a9f5;
    text-decoration: none;
    color: #ECEDEC !important;
}

.dark .nav-pills > li.active > a,
.dark .nav-pills > li.active > a:focus,
.dark .nav-pills > li.active > a:hover {
    background-color: #03a9f5;
}

.dark .well {
    background-color: #1f2037;
    border: 1px solid #1f2037;
}

.dark .example {
    background-color: #1f2037;
    border: 1px solid #1f2037;
}

.dark .dd-handle {
    background: #1F2037 none repeat scroll 0 0;
    border: 1px solid #1F2037;
}

.dark .dd-handle,
.dark .dd3-content {
    color: #ECEDEC !important;
}

.dark #nestable2 .dd-handle {
    background: #1F2037 none repeat scroll 0 0;
    border: 1px solid #1F2037;
}

.dark .dd3-content {
    background: #1F2037 none repeat scroll 0 0;
    border: 1px solid #1F2037;
}

.dark .table > tbody > tr > td,
.dark .table > tbody > tr > th,
.dark .table > tfoot > tr > td,
.dark .table > tfoot > tr > th,
.dark .table > thead > tr > td,
.dark .table > thead > tr > th {
    border-top: 1px solid #1F2037 !important;
}

.dark .table > thead > tr > th {
    border-bottom: 1px solid #1F2037;
}

.dark .table-bordered > tbody > tr > td,
.dark .table-bordered > tbody > tr > th,
.dark .table-bordered > tfoot > tr > td,
.dark .table-bordered > tfoot > tr > th,
.dark .table-bordered > thead > tr > td,
.dark .table-bordered > thead > tr > th {
    border: 1px solid #1F2037;
}

.dark .table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: #262c3f;
}

.dark .dt-buttons .dt-button {
    background: #1F2037 none repeat scroll 0 0;
    border-color: #1F2037;
    color: #ECEDEC;
}

.dark .jsgrid-header-row > .jsgrid-header-cell {
    background: #1F2037 none repeat scroll 0 0;
}

.dark .jsgrid-row > .jsgrid-cell {
    background: transparent none repeat scroll 0 0;
}

.dark .jsgrid-alt-row > .jsgrid-cell {
    background: transparent none repeat scroll 0 0;
}

.dark .jsgrid-edit-row > .jsgrid-cell {
    background: #1F2037 none repeat scroll 0 0;
}

.dark .jsgrid-cell > select,
.dark .jsgrid-cell > input {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
}

.dark .icon-container [class^="ti-"],
.dark .icon-container [class*=" ti-"] {
    color: #ECEDEC;
}

.dark .icon-name {
    color: #ECEDEC;
}

.dark .vmap {
    background: transparent none repeat scroll 0 0;
}

.dark .form-control {
    background-color: transparent;
    border: 1px solid #1F2037;
}

.dark #invoice {
    background: #333B54;
}

.dark .invoice-info h2 {
    color: #ECEDEC;
}

.dark .title h4 {
    color: #ECEDEC;
}

.dark .tabletitle {
    background: #1F2037;
}

.dark .invoicelist-body tr:nth-child(2n) {
    background: #1F2037 none repeat scroll 0 0;
}

.dark .login-form {
    background: #333b54 none repeat scroll 0 0;
}

    .dark .login-form h4 {
        color: #ECEDEC;
        margin-bottom: 50px;
        text-align: center;
    }

    .dark .login-form label {
        color: #ECEDEC;
        text-transform: uppercase;
    }

.dark .social-login-content {
    background: transparent none repeat scroll 0 0;
    border-bottom: 1px solid #1f2037;
    border-top: 1px solid #1f2037;
}

.dark .flot-text {
    color: #fff !important;
}

.dark .header-icon:hover,
.dark .header-icon:focus,
.dark .header-icon.active {
    background: rgba(31, 32, 55, 0.3) none repeat scroll 0 0;
}

.dark tspan {
    fill: #fff;
}

.dark .sidebar .nano-content > .dark ul li.active > a::before {
    background: #4CAF50;
}

.dark input {
    color: white;
}

.dark .menu ul li a:hover {
    background: rgba(31, 32, 55, 0.3) none repeat scroll 0 0;
}

.dark .menu ul ul li a:hover {
    background: rgb(51, 59, 84);
}

.dark .menu ul ul {
    position: absolute;
    display: none;
    border: 1px solid #333b54;
    border-bottom: 1px solid #333b54;
    margin-top: 0px;
}

    .dark .menu ul ul li {
        background-color: #1f2037;
        border-bottom: 0px;
        width: 155px;
    }

        .dark .menu ul ul li a {
            color: #fdf9f9;
            padding: 2px;
            font-size: 12px;
        }

.dark .color-container {
    border: 1px solid #1f2037;
}

.dark #nprogress .bar {
    background: #03a9f5; /*color(red)*/
}


.dark .btn-dark {
    background: #1f2037;
    border-color: #1f2037;
    color: #fff;
}

.dark .input-group-addon {
    border: 1px solid #1F2037;
    color: white;
}

    .dark .input-group-addon:first-child {
        border-right: 0;
    }

.dark .radio input[type="radio"] + label::before {
    background-color: #1f2037;
}

.dark .radio input[type="radio"]:checked + label::before {
    background-color: transparent;
}

.dark .div-overlay {
    background-color: rgba(31, 32, 55, 0.72);
}

.dark .operator .recent-comment .media {
    border: 1px solid #1f2037;
}

    .dark .operator .recent-comment .media:hover {
        background-color: #1f2037;
    }

.dark .back:hover {
    background: #1f2037;
}

.dark select.form-control {
    color: #85878b;
}

.dark .bg-bingo {
    background: #333B54;
    color: #fff;
    fill: #333B54;
}

.dark .user-overlay {
    background: #333b54ad; /*add color with prefix 'ad' */
}

/***********      Dark - pop dialog       ***************/

.dark .editable-click,
.dark a.editable-click,
.dark a.editable-click:hover {
    border-bottom: dashed 1px #03a9f5; /*color(light blue)*/
}

.dark .popover-title {
    border-bottom: 1px solid #1f2037;
    background-color: #1f2037;
}

.dark .popover {
    border: 1px solid #1f2037;
    background: #333b54;
}

    .dark .popover.top > .arrow:after {
        border-top-color: #1f2037;
    }

.dark .editable-buttons .btn-primary {
    background: #03a9f5d1; /*color blue with sufix d1*/
    border-color: #03a9f5d1; /*color blue with sufix d1*/
}

    .dark .editable-buttons .btn-primary.active.focus,
    .dark .editable-buttons .btn-primary.active:focus,
    .dark .editable-buttons .btn-primary.active:hover,
    .dark .editable-buttons .btn-primary:active.focus,
    .dark .editable-buttons .btn-primary:active:focus,
    .dark .editable-buttons .btn-primary:active:hover,
    .dark .editable-buttons .btn-primary.active,
    .dark .editable-buttons .btn-primary:focus,
    .dark .editable-buttons .btn-primary:hover {
        background-color: #03a9f5; /*color(light blue)*/
        border-color: #03a9f5; /*color(light blue)*/
    }

/***********      Dark - Login Page       ***************/

.dark .btn-bingo {
    background: #03a9f4;
    border-color: #03a9f4;
    color: #fff;
}

    .dark .btn-bingo .active, .dark .btn-bingo:focus, .dark .btn-bingo:hover {
        background: #0286c2 !important;
        border-color: #03a9f4 !important;
        color: #fff !important;
        box-shadow: none !important;
    }


/* bootstrap-datepicker3.css */

.dark .datepicker table tr td.today,
.dark .datepicker table tr td.today:hover,
.dark .datepicker table tr td.today.disabled,
.dark .datepicker table tr td.today.disabled:hover {
    color: #ffffff;
    background-color: #03a9f5d1;
    border-color: #03a9f5d1;
}

    .dark .datepicker table tr td.today:hover,
    .dark .datepicker table tr td.today:hover:hover,
    .dark .datepicker table tr td.today.disabled:hover,
    .dark .datepicker table tr td.today.disabled:hover:hover,
    .dark .datepicker table tr td.today:focus,
    .dark .datepicker table tr td.today:hover:focus,
    .dark .datepicker table tr td.today.disabled:focus,
    .dark .datepicker table tr td.today.disabled:hover:focus,
    .dark .datepicker table tr td.today:active,
    .dark .datepicker table tr td.today:hover:active,
    .dark .datepicker table tr td.today.disabled:active,
    .dark .datepicker table tr td.today.disabled:hover:active,
    .dark .datepicker table tr td.today.active,
    .dark .datepicker table tr td.today:hover.active,
    .dark .datepicker table tr td.today.disabled.active,
    .dark .datepicker table tr td.today.disabled:hover.active,
    .dark .open .dropdown-toggle.datepicker table tr td.today,
    .dark .open .dropdown-toggle.datepicker table tr td.today:hover,
    .dark .open .dropdown-toggle.datepicker table tr td.today.disabled,
    .dark .open .dropdown-toggle.datepicker table tr td.today.disabled:hover {
        color: #ffffff;
        background-color: #03a9f5;
        border-color: #03a9f5;
    }

.dark .datepicker table tr td.active:hover,
.dark .datepicker table tr td.active:hover:hover,
.dark .datepicker table tr td.active.disabled:hover,
.dark .datepicker table tr td.active.disabled:hover:hover,
.dark .datepicker table tr td.active:focus,
.dark .datepicker table tr td.active:hover:focus,
.dark .datepicker table tr td.active.disabled:focus,
.dark .datepicker table tr td.active.disabled:hover:focus,
.dark .datepicker table tr td.active:active,
.dark .datepicker table tr td.active:hover:active,
.dark .datepicker table tr td.active.disabled:active,
.dark .datepicker table tr td.active.disabled:hover:active,
.dark .datepicker table tr td.active.active,
.dark .datepicker table tr td.active:hover.active,
.dark .datepicker table tr td.active.disabled.active,
.dark .datepicker table tr td.active.disabled:hover.active,
.dark .open .dropdown-toggle.datepicker table tr td.active,
.dark .open .dropdown-toggle.datepicker table tr td.active:hover,
.dark .open .dropdown-toggle.datepicker table tr td.active.disabled,
.dark .open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
    color: #ffffff;
    background-color: #03a9f5;
    border-color: #03a9f5;
}

.dark .datepicker table tr td span.active:hover,
.dark .datepicker table tr td span.active:hover:hover,
.dark .datepicker table tr td span.active.disabled:hover,
.dark .datepicker table tr td span.active.disabled:hover:hover,
.dark .datepicker table tr td span.active:focus,
.dark .datepicker table tr td span.active:hover:focus,
.dark .datepicker table tr td span.active.disabled:focus,
.dark .datepicker table tr td span.active.disabled:hover:focus,
.dark .datepicker table tr td span.active:active,
.dark .datepicker table tr td span.active:hover:active,
.dark .datepicker table tr td span.active.disabled:active,
.dark .datepicker table tr td span.active.disabled:hover:active,
.dark .datepicker table tr td span.active.active,
.dark .datepicker table tr td span.active:hover.active,
.dark .datepicker table tr td span.active.disabled.active,
.dark .datepicker table tr td span.active.disabled:hover.active,
.dark .open .dropdown-toggle.datepicker table tr td span.active,
.dark .open .dropdown-toggle.datepicker table tr td span.active:hover,
.dark .open .dropdown-toggle.datepicker table tr td span.active.disabled,
.dark .open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
    color: #ffffff;
    background-color: #03a9f5;
    border-color: #03a9f5;
}

.dark .datepicker table tr td.day:hover,
.dark .datepicker table tr td.day.focused {
    background: #03a9f542;
    cursor: pointer;
}

.dark .datepicker thead tr:first-child th:hover,
.dark .datepicker tfoot tr th:hover {
    background: #03a9f542;
}

.dark .datepicker table tr td span:hover {
    background: #03a9f542;
}

.dark .datepicker {
    background: #333b54;
}

.dark .datepicker-dropdown:after {
    border-bottom: 6px solid #333b54;
}

.dark thead tr th {
    color: #1f2037;
    font-weight: 500;
}

.dark .color-bingo, .text-bingo {
    color: #03a9f5;
}


.dark .nav-pills > li.active > a, .dark .nav-pills > li.active > a:focus, .dark .nav-pills > li.active > a:hover {
    color: white;
    background: #03a9f5; /*color(blue)*/
    border: 1px solid #03a9f5; /*color(blue)*/
}

.dark .custom-tab .nav > li > a:focus {
    background-color: #03a9f5;
    color: white !important;
}

.dark .custom-tab .nav > li > a:hover {
    background-color: #03a9f542;
    text-decoration: none;
    border: 1px solid #03a9f542;
}

.dark ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border: 1px solid #03a9f5d1; /*color blue with sufix d1*/
    background-color: #03a9f5cc; /*color(blue)  with sufix cc*/
}

.dark .irs-line-mid,
.dark .irs-line-left,
.dark .irs-line-right,
.dark .irs-bar,
.dark .irs-bar-edge,
.dark .irs-slider {
    background: url(../../images/rangeSliderimg/blue-sprite-skin-flat.png) repeat-x;
}

.dark .irs-from, .dark .irs-to, .dark .irs-single {
    background: #03a9f5; /*color(blue)*/
}

    .dark .irs-from:after, .dark .irs-to:after, .dark .irs-single:after {
        border-top-color: #03a9f5; /*color(blue)*/
    }

.dark #top-dash-menu a.dash-menu-item {
    background: #333b54;
}

.dark .top-bingo-logo {
    background-image: url(/assets/images/paybingo-white-Red.png);
}

.dark  #top-dash-menu a.dash-menu-item:hover {
    background: #03a9f514;
}
/*****************************************************************************************************************/
/********************************************** END - DARK ******************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/
/****************************************************** RED ******************************************************/
/*****************************************************************************************************************/
.red body {
    background-color: #ec202714;
}

.red .swal2-modal {
    background-color: #fdf0ef !important;
    border-color: #ec2027;
}

/*money transfer: web t-pin image*/
.red .tpin-img {
    background-color: #ec2027;
}

.red .header-bgcolor {
    background: #ec2027; /*color(red)*/
}

.red .pace .pace-progress {
    background: #18B3C3; /*opposite color(green)*/
}

.red .pace .pace-activity {
    border-top-color: #18B3C3; /*opposite color(green)*/
    border-left-color: #18B3C3; /*opposite color(green)*/
}


.red .menu ul ul li a:hover, .red .operator .recent-comment .media:hover, .red #transferElements .beneficary-list:hover {
    background: #ec202714; /*add color(light red suffix 14)*/
}

.red .sidebar .nano-content > ul li.active > a::before {
    background: #ec2027; /*color(light blue)*/
}

.red .sidebar .nano-content > ul li:hover > a, .red .sidebar .nano-content > ul li.active > a, .red .sidebar .nano-content > ul li.open > a {
    color: #ec2027; /*color(light blue)*/
}

.red .dropdown-content-heading i, .red .dropdown-profile .trial-day {
    color: #ec2027; /*color(light blue)*/
}

.red .custom-tab .nav-tabs > li.active > a,
.red .custom-tab .nav-tabs > li.active > a:focus,
.red .custom-tab .nav-tabs > li.active > a:hover {
    color: #ec2027;
}

    .red .custom-tab .nav-tabs > li.active > a:after,
    .red .custom-tab .nav-tabs > li.active > a:focus:after,
    .red .custom-tab .nav-tabs > li.active > a:hover:after {
        background: #ec2027;
    }

.red .color-bingo,
.red .text-bingo {
    color: #ec2027;
}

.red .user-overlay {
    background: #ec2027ad; /*add color with prefix 'ad' */
}

.red .bg-bingo {
    background: #ec2027;
    color: #fff;
    fill: #ec2027;
}

.red .user-job-title {
    color: #ec2027;
}

/***********      Red - pop dialog       ***************/

.red .editable-click,
.red a.editable-click,
.red a.editable-click:hover {
    border-bottom: dashed 1px #ec2027; /*color red*/
}

.red .popover-title {
    border-bottom: 1px solid #ec20274f; /*color red with sufix 4f*/
    background-color: #ec20271c; /*color red with sufix 1c*/
}

.red .popover {
    border: 1px solid #ec20274f; /*color red with sufix 4f*/
}

.red .editable-buttons .btn-primary {
    background: #ec2027d1; /*color red with sufix d1*/
    border-color: #ec2027d1; /*color red with sufix d1*/
}

    .red .editable-buttons .btn-primary.active.focus,
    .red .editable-buttons .btn-primary.active:focus,
    .red .editable-buttons .btn-primary.active:hover,
    .red .editable-buttons .btn-primary:active.focus,
    .red .editable-buttons .btn-primary:active:focus,
    .red .editable-buttons .btn-primary:active:hover,
    .red .editable-buttons .btn-primary.active,
    .red .editable-buttons .btn-primary:focus,
    .red .editable-buttons .btn-primary:hover {
        background-color: #ec2027; /*color red*/
        border-color: #ec2027; /*color red*/
    }


/***********      Red - Radio Button       ***************/

.red .radio input[type="radio"] + label::before {
    border: 0px solid #ec2027; /*color red*/
}

.radio input[type="radio"]:checked + label::before {
    border-width: 2px;
}

.red .radio input[type="radio"] + label::after {
    background-color: #ec2027; /*color red*/
}

/***********      Red - Login Page       ***************/

.red .btn-bingo {
    background: #ec2027;
    border-color: #ec2027;
    color: #fff;
}

    .red .btn-bingo .active, .red .btn-bingo:focus, .red .btn-bingo:hover {
        background: #d62c1a !important;
        border-color: #ec2027 !important;
        color: #fff !important;
        box-shadow: none !important;
    }


.red #nprogress .bar {
    background: #ec2027; /*color(red)*/
}

/* bootstrap-datepicker3.css */

.red .datepicker table tr td.today,
.red .datepicker table tr td.today:hover,
.red .datepicker table tr td.today.disabled,
.red .datepicker table tr td.today.disabled:hover {
    color: #ffffff;
    background-color: #ec2027d1;
    border-color: #ec2027d1;
}

    .red .datepicker table tr td.today:hover,
    .red .datepicker table tr td.today:hover:hover,
    .red .datepicker table tr td.today.disabled:hover,
    .red .datepicker table tr td.today.disabled:hover:hover,
    .red .datepicker table tr td.today:focus,
    .red .datepicker table tr td.today:hover:focus,
    .red .datepicker table tr td.today.disabled:focus,
    .red .datepicker table tr td.today.disabled:hover:focus,
    .red .datepicker table tr td.today:active,
    .red .datepicker table tr td.today:hover:active,
    .red .datepicker table tr td.today.disabled:active,
    .red .datepicker table tr td.today.disabled:hover:active,
    .red .datepicker table tr td.today.active,
    .red .datepicker table tr td.today:hover.active,
    .red .datepicker table tr td.today.disabled.active,
    .red .datepicker table tr td.today.disabled:hover.active,
    .red .open .dropdown-toggle.datepicker table tr td.today,
    .red .open .dropdown-toggle.datepicker table tr td.today:hover,
    .red .open .dropdown-toggle.datepicker table tr td.today.disabled,
    .red .open .dropdown-toggle.datepicker table tr td.today.disabled:hover {
        color: #ffffff;
        background-color: #ec2027;
        border-color: #ec2027;
    }

.red .datepicker table tr td.active:hover,
.red .datepicker table tr td.active:hover:hover,
.red .datepicker table tr td.active.disabled:hover,
.red .datepicker table tr td.active.disabled:hover:hover,
.red .datepicker table tr td.active:focus,
.red .datepicker table tr td.active:hover:focus,
.red .datepicker table tr td.active.disabled:focus,
.red .datepicker table tr td.active.disabled:hover:focus,
.red .datepicker table tr td.active:active,
.red .datepicker table tr td.active:hover:active,
.red .datepicker table tr td.active.disabled:active,
.red .datepicker table tr td.active.disabled:hover:active,
.red .datepicker table tr td.active.active,
.red .datepicker table tr td.active:hover.active,
.red .datepicker table tr td.active.disabled.active,
.red .datepicker table tr td.active.disabled:hover.active,
.red .open .dropdown-toggle.datepicker table tr td.active,
.red .open .dropdown-toggle.datepicker table tr td.active:hover,
.red .open .dropdown-toggle.datepicker table tr td.active.disabled,
.red .open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
    color: #ffffff;
    background-color: #ec2027;
    border-color: #ec2027;
}

.red .datepicker table tr td span.active:hover,
.red .datepicker table tr td span.active:hover:hover,
.red .datepicker table tr td span.active.disabled:hover,
.red .datepicker table tr td span.active.disabled:hover:hover,
.red .datepicker table tr td span.active:focus,
.red .datepicker table tr td span.active:hover:focus,
.red .datepicker table tr td span.active.disabled:focus,
.red .datepicker table tr td span.active.disabled:hover:focus,
.red .datepicker table tr td span.active:active,
.red .datepicker table tr td span.active:hover:active,
.red .datepicker table tr td span.active.disabled:active,
.red .datepicker table tr td span.active.disabled:hover:active,
.red .datepicker table tr td span.active.active,
.red .datepicker table tr td span.active:hover.active,
.red .datepicker table tr td span.active.disabled.active,
.red .datepicker table tr td span.active.disabled:hover.active,
.red .open .dropdown-toggle.datepicker table tr td span.active,
.red .open .dropdown-toggle.datepicker table tr td span.active:hover,
.red .open .dropdown-toggle.datepicker table tr td span.active.disabled,
.red .open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
    color: #ffffff;
    background-color: #ec2027;
    border-color: #ec2027;
}

.red .datepicker table tr td.day:hover,
.red .datepicker table tr td.day.focused {
    background: #ec202742;
    cursor: pointer;
}

.red .datepicker thead tr:first-child th:hover,
.red .datepicker tfoot tr th:hover {
    background: #ec202742;
}

.red .datepicker table tr td span:hover {
    background: #ec202742;
}

.red .table-bingo > thead > tr > th {
    background: #ec2027; /*color(red)*/
    color: white;
}

.red .nav-pills > li.active > a, .red .nav-pills > li.active > a:focus, .red .nav-pills > li.active > a:hover {
    color: white;
    background: #ec2027; /*color(red)*/
    border: 1px solid #ec2027; /*color(red)*/
}

.red .custom-tab .nav > li > a:focus {
    background-color: #ec2027; /*color(red)*/
    color: white !important;
}

.red .custom-tab .nav > li > a:hover {
    background-color: #ec202742;
    text-decoration: none;
    border: 1px solid #ec202742;
}

.red ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border: 1px solid #ec2027d1; /*color red with sufix d1*/
    background-color: #ec2027cc; /*color(red)  with sufix cc*/
}

.red .irs-line-mid,
.red .irs-line-left,
.red .irs-line-right,
.red .irs-bar,
.red .irs-bar-edge,
.red .irs-slider {
    background: url(../../images/rangeSliderimg/red-sprite-skin-flat.png) repeat-x;
}

.red .irs-from, .red .irs-to, .red .irs-single {
    background: #ec2027; /*color(red)*/
}

    .red .irs-from:after, .red .irs-to:after, .red .irs-single:after {
        border-top-color: #ec2027; /*color(red)*/
    }

.red .top-bingo-logo {
    background-image: url(/assets/images/paybingo-white-Blue.png);
}

.red #top-dash-menu a.dash-menu-item:hover {
    background: #ec202714;
}

/*****************************************************************************************************************/
/*************************************************** END RED *****************************************************/
/*****************************************************************************************************************/



/*****************************************************************************************************************/
/****************************************************** ORANGE ******************************************************/
/*****************************************************************************************************************/

.orange body {
    background-color: #FF572214;
}

.orange .swal2-modal {
    background-color: #fff1ed !important;
    border-color: #FF5722;
}

.orange .header-bgcolor {
    background: #FF5722; /*color(light orange)*/
}

/*money transfer: web t-pin image*/
.orange .tpin-img {
    background-color: #FF5722;
}

.orange .pace .pace-progress {
    background: #00A8DD; /*opposite color(orange)*/
}

.orange .pace .pace-activity {
    border-top-color: #00A8DD; /*opposite color(orange)*/
    border-left-color: #00A8DD; /*opposite color(orange)*/
}


.orange .menu ul ul li a:hover, .orange .operator .recent-comment .media:hover, .orange #transferElements .beneficary-list:hover {
    background: #FF572214; /*add color(light orange suffix 14)*/
}

.orange .sidebar .nano-content > ul li.active > a::before {
    background: #FF5722; /*color(light blue)*/
}

.orange .sidebar .nano-content > ul li:hover > a, .orange .sidebar .nano-content > ul li.active > a, .orange .sidebar .nano-content > ul li.open > a {
    color: #FF5722; /*color(light blue)*/
}

.orange .dropdown-content-heading i, .orange .dropdown-profile .trial-day {
    color: #FF5722; /*color(light blue)*/
}

.orange .custom-tab .nav-tabs > li.active > a,
.orange .custom-tab .nav-tabs > li.active > a:focus,
.orange .custom-tab .nav-tabs > li.active > a:hover {
    color: #FF5722;
}

    .orange .custom-tab .nav-tabs > li.active > a:after,
    .orange .custom-tab .nav-tabs > li.active > a:focus:after,
    .orange .custom-tab .nav-tabs > li.active > a:hover:after {
        background: #FF5722;
    }


.orange .color-bingo,
.orange .text-bingo {
    color: #FF5722;
}

.orange .user-overlay {
    background: #FF5722ad; /*add color with prefix 'ad' */
}

.orange .bg-bingo {
    background: #FF5722;
    color: #fff;
    fill: #FF5722;
}

.orange .user-job-title {
    color: #FF5722;
}

/***********      Orange - pop dialog       ***************/

.orange .editable-click,
.orange a.editable-click,
.orange a.editable-click:hover {
    border-bottom: dashed 1px #ec2027; /*color(light orange)*/
}

.orange .popover-title {
    border-bottom: 1px solid #FF57224f; /*color orange with sufix 4f*/
    background-color: #FF57221c; /*color orange with sufix 1c*/
}

.orange .popover {
    border: 1px solid #FF57224f; /*color orange with sufix 4f*/
}

.orange .editable-buttons .btn-primary {
    background: #FF5722d1; /*color orange with sufix d1*/
    border-color: #FF5722d1; /*color orange with sufix d1*/
}

    .orange .editable-buttons .btn-primary.active.focus,
    .orange .editable-buttons .btn-primary.active:focus,
    .orange .editable-buttons .btn-primary.active:hover,
    .orange .editable-buttons .btn-primary:active.focus,
    .orange .editable-buttons .btn-primary:active:focus,
    .orange .editable-buttons .btn-primary:active:hover,
    .orange .editable-buttons .btn-primary.active,
    .orange .editable-buttons .btn-primary:focus,
    .orange .editable-buttons .btn-primary:hover {
        background-color: #FF5722; /*color(light orange)*/
        border-color: #FF5722; /*color(light orange)*/
    }

/***********      ORANGE - Radio Button       ***************/

.orange .radio input[type="radio"] + label::before {
    border: 0px solid #FF5722; /*color orange*/
}

.radio input[type="radio"]:checked + label::before {
    border-width: 2px;
}

.orange .radio input[type="radio"] + label::after {
    background-color: #FF5722; /*color orange*/
}

/********************** Orange - Login Page ************************/


.orange .btn-bingo {
    background: #FF5722;
    border-color: #FF5722;
    color: #fff;
}

    .orange .btn-bingo .active, .orange .btn-bingo:focus, .orange .btn-bingo:hover {
        background: #de491a !important;
        border-color: #FF5722 !important;
        color: #fff !important;
        box-shadow: none !important;
    }

.orange #nprogress .bar {
    background: #FF5722; /*color(light orange)*/
}


/* bootstrap-datepicker3.css */

.orange .datepicker table tr td.today,
.orange .datepicker table tr td.today:hover,
.orange .datepicker table tr td.today.disabled,
.orange .datepicker table tr td.today.disabled:hover {
    color: #ffffff;
    background-color: #FF5722d1;
    border-color: #FF5722d1;
}

    .orange .datepicker table tr td.today:hover,
    .orange .datepicker table tr td.today:hover:hover,
    .orange .datepicker table tr td.today.disabled:hover,
    .orange .datepicker table tr td.today.disabled:hover:hover,
    .orange .datepicker table tr td.today:focus,
    .orange .datepicker table tr td.today:hover:focus,
    .orange .datepicker table tr td.today.disabled:focus,
    .orange .datepicker table tr td.today.disabled:hover:focus,
    .orange .datepicker table tr td.today:active,
    .orange .datepicker table tr td.today:hover:active,
    .orange .datepicker table tr td.today.disabled:active,
    .orange .datepicker table tr td.today.disabled:hover:active,
    .orange .datepicker table tr td.today.active,
    .orange .datepicker table tr td.today:hover.active,
    .orange .datepicker table tr td.today.disabled.active,
    .orange .datepicker table tr td.today.disabled:hover.active,
    .orange .open .dropdown-toggle.datepicker table tr td.today,
    .orange .open .dropdown-toggle.datepicker table tr td.today:hover,
    .orange .open .dropdown-toggle.datepicker table tr td.today.disabled,
    .orange .open .dropdown-toggle.datepicker table tr td.today.disabled:hover {
        color: #ffffff;
        background-color: #FF5722;
        border-color: #FF5722;
    }

.orange .datepicker table tr td.active:hover,
.orange .datepicker table tr td.active:hover:hover,
.orange .datepicker table tr td.active.disabled:hover,
.orange .datepicker table tr td.active.disabled:hover:hover,
.orange .datepicker table tr td.active:focus,
.orange .datepicker table tr td.active:hover:focus,
.orange .datepicker table tr td.active.disabled:focus,
.orange .datepicker table tr td.active.disabled:hover:focus,
.orange .datepicker table tr td.active:active,
.orange .datepicker table tr td.active:hover:active,
.orange .datepicker table tr td.active.disabled:active,
.orange .datepicker table tr td.active.disabled:hover:active,
.orange .datepicker table tr td.active.active,
.orange .datepicker table tr td.active:hover.active,
.orange .datepicker table tr td.active.disabled.active,
.orange .datepicker table tr td.active.disabled:hover.active,
.orange .open .dropdown-toggle.datepicker table tr td.active,
.orange .open .dropdown-toggle.datepicker table tr td.active:hover,
.orange .open .dropdown-toggle.datepicker table tr td.active.disabled,
.orange .open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
    color: #ffffff;
    background-color: #FF5722;
    border-color: #FF5722;
}

.orange .datepicker table tr td span.active:hover,
.orange .datepicker table tr td span.active:hover:hover,
.orange .datepicker table tr td span.active.disabled:hover,
.orange .datepicker table tr td span.active.disabled:hover:hover,
.orange .datepicker table tr td span.active:focus,
.orange .datepicker table tr td span.active:hover:focus,
.orange .datepicker table tr td span.active.disabled:focus,
.orange .datepicker table tr td span.active.disabled:hover:focus,
.orange .datepicker table tr td span.active:active,
.orange .datepicker table tr td span.active:hover:active,
.orange .datepicker table tr td span.active.disabled:active,
.orange .datepicker table tr td span.active.disabled:hover:active,
.orange .datepicker table tr td span.active.active,
.orange .datepicker table tr td span.active:hover.active,
.orange .datepicker table tr td span.active.disabled.active,
.orange .datepicker table tr td span.active.disabled:hover.active,
.orange .open .dropdown-toggle.datepicker table tr td span.active,
.orange .open .dropdown-toggle.datepicker table tr td span.active:hover,
.orange .open .dropdown-toggle.datepicker table tr td span.active.disabled,
.orange .open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
    color: #ffffff;
    background-color: #FF5722;
    border-color: #FF5722;
}

.orange .datepicker table tr td.day:hover,
.orange .datepicker table tr td.day.focused {
    background: #FF572242;
    cursor: pointer;
}

.orange .datepicker thead tr:first-child th:hover,
.orange .datepicker tfoot tr th:hover {
    background: #FF572242;
}

.orange .datepicker table tr td span:hover {
    background: #FF572242;
}


.orange .table-bingo > thead > tr > th {
    background: #FF5722; /*color(orange)*/
    color: white;
}

.orange .nav-pills > li.active > a, .orange .nav-pills > li.active > a:focus, .orange .nav-pills > li.active > a:hover {
    color: white;
    background: #FF5722; /*color(orange)*/
    border: 1px solid #FF5722; /*color(orange)*/
}

.orange .custom-tab .nav > li > a:focus {
    background-color: #FF5722; /*color(orange)*/
    color: white !important;
}

.orange .custom-tab .nav > li > a:hover {
    background-color: #FF572242;
    text-decoration: none;
    border: 1px solid #FF572242;
}

.orange ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border: 1px solid #FF5722d1; /*color orange with sufix d1*/
    background-color: #FF5722cc; /*color(orange)  with sufix cc*/
}

.orange .irs-line-mid,
.orange .irs-line-left,
.orange .irs-line-right,
.orange .irs-bar,
.orange .irs-bar-edge,
.orange .irs-slider {
    background: url(../../images/rangeSliderimg/orange-sprite-skin-flat.png) repeat-x;
}

.orange .irs-from, .orange .irs-to, .orange .irs-single {
    background: #FF5722; /*color(orange)*/
}

    .orange .irs-from:after, .orange .irs-to:after, .orange .irs-single:after {
        border-top-color: #FF5722; /*color(orange)*/
    }

.orange #top-dash-menu a.dash-menu-item:hover {
    background: #FF572214;
}
/*****************************************************************************************************************/
/***************************************************END ORANGE ******************************************************/
/*****************************************************************************************************************/



/*****************************************************************************************************************/
/****************************************************** GREEN ******************************************************/
/*****************************************************************************************************************/

.green body {
    background-color: #4CAF5014;
}

.green .swal2-modal {
    background-color: #f0f8f1 !important;
    border-color: #4CAF50;
}


.green .header-bgcolor {
    background: #4CAF50; /*color( green)*/
}

.green .tpin-img {
    background: #4CAF50;
}

.green .pace .pace-progress {
    background: #B350AF; /*opposite color(red)*/
}

.green .pace .pace-activity {
    border-top-color: #B350AF; /*opposite color(red)*/
    border-left-color: #B350AF; /*opposite color(red)*/
}

.green .menu ul ul li a:hover, .green .operator .recent-comment .media:hover, .green #transferElements .beneficary-list:hover {
    background: #4CAF5014; /*add color(light green suffix 14)*/
}

.green .sidebar .nano-content > ul li.active > a::before {
    background: #4CAF50; /*color(light blue)*/
}

.green .sidebar .nano-content > ul li:hover > a, .green .sidebar .nano-content > ul li.active > a, .green .sidebar .nano-content > ul li.open > a {
    color: #4CAF50; /*color(light blue)*/
}

.green .dropdown-content-heading i, .green .dropdown-profile .trial-day {
    color: #4CAF50; /*color(light blue)*/
}

.green .custom-tab .nav-tabs > li.active > a,
.green .custom-tab .nav-tabs > li.active > a:focus,
.green .custom-tab .nav-tabs > li.active > a:hover {
    color: #4CAF50;
}

    .green .custom-tab .nav-tabs > li.active > a:after,
    .green .custom-tab .nav-tabs > li.active > a:focus:after,
    .green .custom-tab .nav-tabs > li.active > a:hover:after {
        background: #4CAF50;
    }

.green .color-bingo,
.green .text-bingo {
    color: #4CAF50;
}

.green .user-overlay {
    background: #4CAF50ad; /*add color with prefix 'ad' */
}

.green .bg-bingo {
    background: #4CAF50;
    color: #fff;
    fill: #4CAF50;
}

.green .user-job-title {
    color: #4CAF50;
}

/***********      Green - pop dialog       ***************/

.green .editable-click,
.green a.editable-click,
.green a.editable-click:hover {
    border-bottom: dashed 1px #4CAF50; /*color(light green)*/
}

.green .popover-title {
    border-bottom: 1px solid #4CAF504f; /*color green with sufix 4f*/
    background-color: #4CAF501c; /*color green with sufix 1c*/
}

.green .popover {
    border: 1px solid #4CAF504f; /*color green with sufix 4f*/
}

.green .editable-buttons .btn-primary {
    background: #4CAF50d1; /*color green with sufix d1*/
    border-color: #4CAF50d1; /*color green with sufix d1*/
}

    .green .editable-buttons .btn-primary.active.focus,
    .green .editable-buttons .btn-primary.active:focus,
    .green .editable-buttons .btn-primary.active:hover,
    .green .editable-buttons .btn-primary:active.focus,
    .green .editable-buttons .btn-primary:active:focus,
    .green .editable-buttons .btn-primary:active:hover,
    .green .editable-buttons .btn-primary.active,
    .green .editable-buttons .btn-primary:focus,
    .green .editable-buttons .btn-primary:hover {
        background-color: #4CAF50; /*color(light green)*/
        border-color: #4CAF50; /*color(light green)*/
    }
/***********      GREEN - Radio Button       ***************/

.green .radio input[type="radio"] + label::before {
    border: 0px solid #4CAF50; /*color green*/
}

.radio input[type="radio"]:checked + label::before {
    border-width: 2px;
}

.green .radio input[type="radio"] + label::after {
    background-color: #4CAF50; /*color green*/
}

/*******************************************************************************************************************/
/*****************************************       Login Page        *************************************************/
/*******************************************************************************************************************/

.green .btn-bingo {
    background: #4CAF50;
    border-color: #4CAF50;
    color: #fff;
}

    .green .btn-bingo .active, .green .btn-bingo:focus, .green .btn-bingo:hover {
        background: #3d8c40 !important;
        border-color: #4CAF50 !important;
        color: #fff !important;
        box-shadow: none !important;
    }


.green #nprogress .bar {
    background: #4CAF50; /*color(green)*/
}



/* bootstrap-datepicker3.css */

.green .datepicker table tr td.today,
.green .datepicker table tr td.today:hover,
.green .datepicker table tr td.today.disabled,
.green .datepicker table tr td.today.disabled:hover {
    color: #ffffff;
    background-color: #4CAF50d1; /*color green with sufix d1*/
    border-color: #4CAF50d1; /*color green with sufix d1*/
}

    .green .datepicker table tr td.today:hover,
    .green .datepicker table tr td.today:hover:hover,
    .green .datepicker table tr td.today.disabled:hover,
    .green .datepicker table tr td.today.disabled:hover:hover,
    .green .datepicker table tr td.today:focus,
    .green .datepicker table tr td.today:hover:focus,
    .green .datepicker table tr td.today.disabled:focus,
    .green .datepicker table tr td.today.disabled:hover:focus,
    .green .datepicker table tr td.today:active,
    .green .datepicker table tr td.today:hover:active,
    .green .datepicker table tr td.today.disabled:active,
    .green .datepicker table tr td.today.disabled:hover:active,
    .green .datepicker table tr td.today.active,
    .green .datepicker table tr td.today:hover.active,
    .green .datepicker table tr td.today.disabled.active,
    .green .datepicker table tr td.today.disabled:hover.active,
    .green .open .dropdown-toggle.datepicker table tr td.today,
    .green .open .dropdown-toggle.datepicker table tr td.today:hover,
    .green .open .dropdown-toggle.datepicker table tr td.today.disabled,
    .green .open .dropdown-toggle.datepicker table tr td.today.disabled:hover {
        color: #ffffff;
        background-color: #4CAF50;
        border-color: #4CAF50;
    }

.green .datepicker table tr td.active:hover,
.green .datepicker table tr td.active:hover:hover,
.green .datepicker table tr td.active.disabled:hover,
.green .datepicker table tr td.active.disabled:hover:hover,
.green .datepicker table tr td.active:focus,
.green .datepicker table tr td.active:hover:focus,
.green .datepicker table tr td.active.disabled:focus,
.green .datepicker table tr td.active.disabled:hover:focus,
.green .datepicker table tr td.active:active,
.green .datepicker table tr td.active:hover:active,
.green .datepicker table tr td.active.disabled:active,
.green .datepicker table tr td.active.disabled:hover:active,
.green .datepicker table tr td.active.active,
.green .datepicker table tr td.active:hover.active,
.green .datepicker table tr td.active.disabled.active,
.green .datepicker table tr td.active.disabled:hover.active,
.green .open .dropdown-toggle.datepicker table tr td.active,
.green .open .dropdown-toggle.datepicker table tr td.active:hover,
.green .open .dropdown-toggle.datepicker table tr td.active.disabled,
.green .open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
    color: #ffffff;
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.green .datepicker table tr td span.active:hover,
.green .datepicker table tr td span.active:hover:hover,
.green .datepicker table tr td span.active.disabled:hover,
.green .datepicker table tr td span.active.disabled:hover:hover,
.green .datepicker table tr td span.active:focus,
.green .datepicker table tr td span.active:hover:focus,
.green .datepicker table tr td span.active.disabled:focus,
.green .datepicker table tr td span.active.disabled:hover:focus,
.green .datepicker table tr td span.active:active,
.green .datepicker table tr td span.active:hover:active,
.green .datepicker table tr td span.active.disabled:active,
.green .datepicker table tr td span.active.disabled:hover:active,
.green .datepicker table tr td span.active.active,
.green .datepicker table tr td span.active:hover.active,
.green .datepicker table tr td span.active.disabled.active,
.green .datepicker table tr td span.active.disabled:hover.active,
.green .open .dropdown-toggle.datepicker table tr td span.active,
.green .open .dropdown-toggle.datepicker table tr td span.active:hover,
.green .open .dropdown-toggle.datepicker table tr td span.active.disabled,
.green .open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
    color: #ffffff;
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.green .datepicker table tr td.day:hover,
.green .datepicker table tr td.day.focused {
    background: #4CAF5042;
    cursor: pointer;
}

.green .datepicker thead tr:first-child th:hover,
.green .datepicker tfoot tr th:hover {
    background: #4CAF5042;
}

.green .datepicker table tr td span:hover {
    background: #4CAF5042;
}

.green .table-bingo > thead > tr > th {
    background: #4CAF50; /*color(green)*/
    color: white;
}

.green .nav-pills > li.active > a, .green .nav-pills > li.active > a:focus, .green .nav-pills > li.active > a:hover {
    color: white;
    background: #4CAF50; /*color(green)*/
    border: 1px solid #4CAF50; /*color(green)*/
}

.green .custom-tab .nav > li > a:focus {
    background-color: #4CAF50; /*color(green)*/
    color: white !important;
}

.green .custom-tab .nav > li > a:hover {
    background-color: #4CAF5042;
    text-decoration: none;
    border: 1px solid #4CAF5042;
}

.green ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border: 1px solid #4CAF50d1; /*color green with sufix d1*/
    background-color: #4CAF50cc; /*color(green)  with sufix cc*/
}

.green .irs-line-mid,
.green .irs-line-left,
.green .irs-line-right,
.green .irs-bar,
.green .irs-bar-edge,
.green .irs-slider {
    background: url(../../images/rangeSliderimg/green-sprite-skin-flat.png) repeat-x;
}

.green .irs-from, .green .irs-to, .green .irs-single {
    background: #4CAF50; /*color(green)*/
}

    .green .irs-from:after, .green .irs-to:after, .green .irs-single:after {
        border-top-color: #4CAF50; /*color(green)*/
    }

.green #top-dash-menu a.dash-menu-item:hover {
    background: #4CAF5014;
}
/*****************************************************************************************************************/
/***************************************************END GREEN ******************************************************/
/*****************************************************************************************************************/


/*****************************************************************************************************************/
/****************************************************** BLUE ******************************************************/
/*****************************************************************************************************************/

.blue body {
    background-color: #03a9f514;
}

.blue .swal2-modal {
    background-color: #ebf8fe !important;
    border-color: #03a9f5;
}


.blue .tpin-img {
    background: #03a9f5;
}

.blue .header-bgcolor {
    background: #03a9f5; /*color(light blue)*/
}

.blue .pace .pace-progress {
    background: #f39c12; /*opposite color(orange)*/
}

.blue .pace .pace-activity {
    border-top-color: #f39c12; /*opposite color(orange)*/
    border-left-color: #f39c12; /*opposite color(orange)*/
}


.blue .menu ul ul li a:hover, .blue .operator .recent-comment .media:hover, .blue #transferElements .beneficary-list:hover {
    background: #03a9f514; /*add color(light blue suffix 14)*/
}


.blue .sidebar .nano-content > ul li.active > a::before {
    background: #03a9f5; /*color(light blue)*/
}

.blue .sidebar .nano-content > ul li:hover > a, .blue .sidebar .nano-content > ul li.active > a, .blue .sidebar .nano-content > ul li.open > a {
    color: #03a9f5; /*color(light blue)*/
}

.blue .dropdown-content-heading i, .blue .dropdown-profile .trial-day {
    color: #03a9f5; /*color(light blue)*/
}

.blue .bg-bingo {
    background: #03a9f5;
    color: #fff;
    fill: #03a9f5;
}

.blue .user-job-title {
    color: #03a9f5;
}

.blue .color-bingo,
.blue .text-bingo {
    color: #03a9f5;
}

.blue .user-overlay {
    background: #03a9f5ad; /*add color with prefix 'ad' */
}

/***********      Blue - pop dialog       ***************/

.blue .editable-click,
.blue a.editable-click,
.blue a.editable-click:hover {
    border-bottom: dashed 1px #03a9f5; /*color(light blue)*/
}

.blue .popover-title {
    border-bottom: 1px solid #03a9f54f; /*color blue with sufix 4f*/
    background-color: #03a9f51c; /*color blue with sufix 1c*/
}

.blue .popover {
    border: 1px solid #03a9f54f; /*color blue with sufix 4f*/
}

.blue .editable-buttons .btn-primary {
    background: #03a9f5d1; /*color blue with sufix d1*/
    border-color: #03a9f5d1; /*color blue with sufix d1*/
}

    .blue .editable-buttons .btn-primary.active.focus,
    .blue .editable-buttons .btn-primary.active:focus,
    .blue .editable-buttons .btn-primary.active:hover,
    .blue .editable-buttons .btn-primary:active.focus,
    .blue .editable-buttons .btn-primary:active:focus,
    .blue .editable-buttons .btn-primary:active:hover,
    .blue .editable-buttons .btn-primary.active,
    .blue .editable-buttons .btn-primary:focus,
    .blue .editable-buttons .btn-primary:hover {
        background-color: #03a9f5; /*color(light blue)*/
        border-color: #03a9f5; /*color(light blue)*/
    }

/***********      Blue - Login Page       ***************/

.blue .btn-bingo {
    background: #03a9f4;
    border-color: #03a9f4;
    color: #fff;
}

    .blue .btn-bingo .active, .blue .btn-bingo:focus, .blue .btn-bingo:hover {
        background: #0286c2 !important;
        border-color: #03a9f4 !important;
        color: #fff !important;
        box-shadow: none !important;
    }

.blue #nprogress .bar {
    background: #03a9f5; /*color(light blue)*/
}



/* bootstrap-datepicker3.css */

.blue .datepicker table tr td.today,
.blue .datepicker table tr td.today:hover,
.blue .datepicker table tr td.today.disabled,
.blue .datepicker table tr td.today.disabled:hover {
    color: #ffffff;
    background-color: #03a9f5d1;
    border-color: #03a9f5d1;
}

    .blue .datepicker table tr td.today:hover,
    .blue .datepicker table tr td.today:hover:hover,
    .blue .datepicker table tr td.today.disabled:hover,
    .blue .datepicker table tr td.today.disabled:hover:hover,
    .blue .datepicker table tr td.today:focus,
    .blue .datepicker table tr td.today:hover:focus,
    .blue .datepicker table tr td.today.disabled:focus,
    .blue .datepicker table tr td.today.disabled:hover:focus,
    .blue .datepicker table tr td.today:active,
    .blue .datepicker table tr td.today:hover:active,
    .blue .datepicker table tr td.today.disabled:active,
    .blue .datepicker table tr td.today.disabled:hover:active,
    .blue .datepicker table tr td.today.active,
    .blue .datepicker table tr td.today:hover.active,
    .blue .datepicker table tr td.today.disabled.active,
    .blue .datepicker table tr td.today.disabled:hover.active,
    .blue .open .dropdown-toggle.datepicker table tr td.today,
    .blue .open .dropdown-toggle.datepicker table tr td.today:hover,
    .blue .open .dropdown-toggle.datepicker table tr td.today.disabled,
    .blue .open .dropdown-toggle.datepicker table tr td.today.disabled:hover {
        color: #ffffff;
        background-color: #03a9f5;
        border-color: #03a9f5;
    }


.blue .datepicker table tr td.active:hover,
.blue .datepicker table tr td.active:hover:hover,
.blue .datepicker table tr td.active.disabled:hover,
.blue .datepicker table tr td.active.disabled:hover:hover,
.blue .datepicker table tr td.active:focus,
.blue .datepicker table tr td.active:hover:focus,
.blue .datepicker table tr td.active.disabled:focus,
.blue .datepicker table tr td.active.disabled:hover:focus,
.blue .datepicker table tr td.active:active,
.blue .datepicker table tr td.active:hover:active,
.blue .datepicker table tr td.active.disabled:active,
.blue .datepicker table tr td.active.disabled:hover:active,
.blue .datepicker table tr td.active.active,
.blue .datepicker table tr td.active:hover.active,
.blue .datepicker table tr td.active.disabled.active,
.blue .datepicker table tr td.active.disabled:hover.active,
.blue .open .dropdown-toggle.datepicker table tr td.active,
.blue .open .dropdown-toggle.datepicker table tr td.active:hover,
.blue .open .dropdown-toggle.datepicker table tr td.active.disabled,
.blue .open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
    color: #ffffff;
    background-color: #03a9f5;
    border-color: #03a9f5;
}

.blue .datepicker table tr td span.active:hover,
.blue .datepicker table tr td span.active:hover:hover,
.blue .datepicker table tr td span.active.disabled:hover,
.blue .datepicker table tr td span.active.disabled:hover:hover,
.blue .datepicker table tr td span.active:focus,
.blue .datepicker table tr td span.active:hover:focus,
.blue .datepicker table tr td span.active.disabled:focus,
.blue .datepicker table tr td span.active.disabled:hover:focus,
.blue .datepicker table tr td span.active:active,
.blue .datepicker table tr td span.active:hover:active,
.blue .datepicker table tr td span.active.disabled:active,
.blue .datepicker table tr td span.active.disabled:hover:active,
.blue .datepicker table tr td span.active.active,
.blue .datepicker table tr td span.active:hover.active,
.blue .datepicker table tr td span.active.disabled.active,
.blue .datepicker table tr td span.active.disabled:hover.active,
.blue .open .dropdown-toggle.datepicker table tr td span.active,
.blue .open .dropdown-toggle.datepicker table tr td span.active:hover,
.blue .open .dropdown-toggle.datepicker table tr td span.active.disabled,
.blue .open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
    color: #ffffff;
    background-color: #03a9f5;
    border-color: #03a9f5;
}

.blue .datepicker table tr td.day:hover,
.blue .datepicker table tr td.day.focused {
    background: #03a9f542;
    cursor: pointer;
}

.blue .datepicker thead tr:first-child th:hover,
.blue .datepicker tfoot tr th:hover {
    background: #03a9f542;
}

.blue .datepicker table tr td span:hover {
    background: #03a9f542;
}


.blue .table-bingo > thead > tr > th {
    background: #03a9f5; /*color(blue)*/
    color: white;
}

.blue .nav-pills > li.active > a, .blue .nav-pills > li.active > a:focus, .blue .nav-pills > li.active > a:hover {
    color: white;
    background: #03a9f5; /*color(blue)*/
    border: 1px solid #03a9f5; /*color(blue)*/
}

.blue .custom-tab .nav > li > a:focus {
    background-color: #03a9f5;
    color: white !important;
}

.blue .custom-tab .nav > li > a:hover {
    background-color: #03a9f542;
    text-decoration: none;
    border: 1px solid #03a9f542;
}

.blue ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border: 1px solid #03a9f5d1; /*color blue with sufix d1*/
    background-color: #03a9f5cc; /*color(blue)  with sufix cc*/
}

.blue .irs-line-mid,
.blue .irs-line-left,
.blue .irs-line-right,
.blue .irs-bar,
.blue .irs-bar-edge,
.blue .irs-slider {
    background: url(../../images/rangeSliderimg/blue-sprite-skin-flat.png) repeat-x;
}

.blue .irs-from, .blue .irs-to, .blue .irs-single {
    background: #03a9f5; /*color(blue)*/
}

    .blue .irs-from:after, .blue .irs-to:after, .blue .irs-single:after {
        border-top-color: #03a9f5; /*color(blue)*/
    }

.blue .top-bingo-logo {
    background-image: url(/assets/images/paybingo-white-Red.png);
}

.green #top-dash-menu a.dash-menu-item:hover {
    background: #03a9f514;
}
/*****************************************************************************************************************/
/***************************************************END BLUE ******************************************************/
/*****************************************************************************************************************/