html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font-family: Muli;
}

html,
body {
    background-color: #fff;
}

.site-footer,
.site-header {
    color: #484848;
    background: #fff;
    box-shadow: 0 1px 10px 0 rgba(69,90,100,0.25);
}

.site-header {
    color: #fff;
}

.site-left-side {
    background: #3809ad;
}

    .site-left-side * {
        color: #fff;
    }

body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    color: #3809ad;
}

/*-------------------------------------------------
        Regeion page heading
  -------------------------------------------------*/
.d-page-heading {
    background-color: #fff;
}

    .d-page-heading .d-page-heading-title label {
        font-size: 18px;
        color: #484848;
        font-weight: 900;
        font-family: Roboto-SemiBold;
    }

/*-------------------------------------------------
       REGION Header
  -------------------------------------------------*/
.site-header {
    background-image: linear-gradient(-226deg, #3809ad 0%, #f4144e 100%);
}

.d-user-menu-container {
    background: #3809ad;
    border-radius: 4px;
    color: #fff;
}

.d-user-menu-item {
    border-bottom: 1px solid #3809ad;
}

    .d-user-menu-item:hover, .add-menu-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

.site-header .logout-panel .notification-panel .notification-dot {
    background-color: #3809ad;
}


.add-menu-container {
    background: #3809ad;
    color: #fff;
}

.add-menu-item::after {
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.add-menu-item {
    border-bottom: 1px solid #3809ad;
}

.d-user-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/*-------------------------------------------------
       REGION MENU
  -------------------------------------------------*/
.nav-container {
    width: 170px;
    border: 1px solid;
    margin-left: 0px;
}

.site-left-side .menu {
    background: #3809ad;
}

    .site-left-side .menu .menu-item[isselected="True"] {
        background-color: #7270e8 !important;
    }

.site-right-side {
    background: #fff;
}

/*-------------------------------------------------
       REGION LEFT MENU
  -------------------------------------------------*/
.site-left-side .search-group {
    color: black;
    background-color: #f5f4fc !important;
    border: 1px solid #f5f4fc;
}

    .site-left-side .search-group option {
        color: black;
    }

.site-left-side .menu-item {
    border-bottom: solid 1px #602cdc;
}

.site-left-side .get-more-button:hover label {
    color: #e3dfff;
}


/*-------------------------------------------------
       footer
  -------------------------------------------------*/
.site-footer h4 {
    float: right;
    font-family: Muli;
    font-size: 13px;
    color: #bbc7d1;
}

/*-------------------------------------------------
    Loading
  -------------------------------------------------*/
.loading-backdrop {
    background-color: #fff;
    opacity: 0.8;
}

.lds-ellipsis div {
    background: #3809ad;
}

/*-------------------------------------------------
     FILTER COMPONENT
  -------------------------------------------------*/
.filter-container {
    padding: 20px;
    border: 1px solid #3809ad;
}

.d-filter-handler {
    background-color: #3809ad;
}

.d-filter-entry label {
    color: #92a3b2;
}

.generic-filter-container .generic-filter-entry > input[type=text],
.generic-filter-container .generic-filter-entry > select {
    border: solid 1px #cdc9e0;
    background-color: #fff;
    color: #9a95ac;
}

.generic-filter-container .generic-filter-entry > label {
    color: #324e64;
}

input::placeholder {
    color: rgba(183, 183, 183, 0.68);
}

.filter-by-date .search input {
    background-color: #fff !important;
    border: 1px solid #cdc9e0 !important;
}

.filter-by-date .input-search {
    background-color: #fff !important;
    border: 1px solid #cdc9e0 !important;
}

/*-------------------------------------------------
    Region Scroll bar
  -------------------------------------------------*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 6.5px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    width: 10px;
    border-radius: 6.5px;
    background-color: rgba(194, 190, 209, 0.41);
}

::-webkit-scrollbar-thumb {
    border-radius: 6.5px;
    background-color: #c2bed1;
}

/*-------------------------------------------------
   Pagination
  -------------------------------------------------*/
.d-pagination-panel > label, .d-pagination-group > label {
    font-size: 12px;
    color: #8188a4;
}

.d-pagination-panel .d-pagination-panel-btn {
    color: #8188a4;
}

.d-pagination-panel-btn[isactive="True"] {
    color: #fff;
    background: #3809ad;
    border-radius: 2px;
}

.page-button.inactive {
    color: #c0c0c0 !important;
}

.page-size-wrapper span,
.page-jump-wrapper span {
    color: #928da5;
}

.page-size-wrapper > select {
    border: 1px solid #928da5 !important;
}

.page-jump-button {
    background: #e3dfff !important;
    color: white;
}

.active-page-navigation {
    color: #928da5;
}

.inactive-page-navigation {
    color: #c0c0c0 !important;
}

.page-button.active {
    color: white;
    background-color: #3809ad;
}

.generic-filter-container + .n-tabs > .n-tabs-header + .n-tabs-container > .n-tab-body > .generic-table + .pagination-actions {
    background: #f2f8f8;
}

    .generic-filter-container + .n-tabs > .n-tabs-header + .n-tabs-container > .n-tab-body > .generic-table + .pagination-actions .page-button > div {
        color: #a0a0a0;
        color: #3809ad;
    }


/*-------------------------------------------------
        Tabs
  -------------------------------------------------*/
.d-tabs-header {
    border-bottom: 1px solid #dbd9e8;
    border-radius: 4px;
}

.d-tabs-tab-header label {
    font-size: 14px;
    color: #92a3b2;
    font-weight: bold;
}

.d-tabs-tab-header[isactive="True"] {
    border-bottom: 4px solid #3809ad;
    color: #455a64 !important;
}

    .d-tabs-tab-header[isactive="True"] label {
        color: #455a64 !important;
    }

/*-------------------------------------------------
        Buttons
  -------------------------------------------------*/
.primary-button {
    background-color: #3809ad !important;
    border-radius: 4px;
    color: #fff !important;
    border: 1px solid #3809ad !important;
    margin-left: 20px;
}

    .primary-button.ui {
        font-weight: 100;
        font-family: Muli;
        padding-top: 9px !important;
    }

    .primary-button:hover {
        background-color: #5E3B99 !important;
        border: 1px solid #5E3C99;
    }


.secondary-button {
    background-color: #fff;
    color: #3809ad;
    border: 1px solid #3809ad;
}

    .secondary-button:hover {
        background-color: #3809ad;
        border: 1px solid #3809ad;
        color: #fff;
    }

.tertiary-button {
    background: #ffffff;
    border: 1px solid #2991cb;
    color: #2991cb;
}


    .tertiary-button:hover {
        background-color: #6aa7c9;
        border: 1px solid #6aa7c9;
        color: #ffffff;
    }


.small-button {
    background-color: #0781c5;
    border: 1px solid #0781c5;
    color: #fff;
}

    .small-button:hover {
        background-color: #42aae4;
        border: 1px solid #42aae4;
    }

.button-clear {
    background-color: #fff !important;
    color: #3809ad !important;
    border: 1px solid #3809ad !important;
}

    .button-clear:hover {
        background-color: #3809ad !important;
        color: #fff !important;
    }

.edit-button {
    background: url("/themes/default/images/icons/edit-icon.png") no-repeat;
}

input:checked + .slider {
    background-color: #3809AC;
}

input:focus + .slider {
    box-shadow: 0 0 1px #3809AC;
}

.btn-primary {
    color: #ffffff;
    background-color: #f4144e !important;
    border-color: #f4144e !important;
}

/*-------------------------------------------------
    Tootlip
  -------------------------------------------------*/
.tooltip-alg .tooltiptext {
    color: #fff;
    background-color: #374142;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

    .tooltip-alg .tooltiptext:before {
        border-color: transparent transparent #374142 transparent;
        transition-duration: 0.3s;
        transition-property: transform;
    }


/*-------------------------------------------------
        intpus
  -------------------------------------------------*/
input[type='text'], input[type='password'] {
    border: 1px solid #f5f4fc;
    background-color: #f5f4fc;
    color: #928da5;
}

.d-filter-entry input[type='text'], .d-filter-entry select {
    background: #ffffff;
    border: 1px solid #d3dbe2;
}

.d-form-entry input[type='text'], .d-form-entry input[type='password'] {
    border: 1px solid #f5f4fc;
    background-color: #f5f4fc;
    color: #928da5;
}

.d-form-entry textarea {
    border-radius: 4px;
    resize: none;
    border: 1px solid #f5f4fc;
    background-color: #f5f4fc;
}

.d-form-entry select {
    border: 1px solid #f5f4fc;
    background-color: #f5f4fc;
}

.d-form-entry > .d-form-entry-action {
    color: #3809ad !important;
}

.d-form-entry .subtitle {
    color: #171717 !important;
}

.d-pagination-group input[type='text'], .d-pagination-group select {
    border: 1px solid #ffffff;
    border-radius: 4px;
}

.search-container-message label {
    color: #928da5;
}

.search-container-message input {
    border: solid 1px #979797;
    background-color: #ffffff;
}


/*-------------------------------------------------
        More actions
  -------------------------------------------------*/
.d-more-action-list {
    background: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

    .d-more-action-list .d-more-action-item label {
        font-family: Muli;
        font-size: 13px;
        color: #455a64;
    }


    .d-more-action-list .d-more-action-item:hover {
        background: #2991cb;
    }

        .d-more-action-list .d-more-action-item:hover > * {
            color: white;
        }

.d-more-actions > label {
    background: url("/themes/default/images/icons/more-actions.png") no-repeat;
}

/*-------------------------------------------------
       Tags
  -------------------------------------------------*/
.d-tag {
    background: #7ea9db;
    font-size: 13px;
    color: #ffffff;
    border-radius: 4px;
}

.listing-tags-container
.leftover {
    font-size: 14px;
    color: #ac9fd8;
}

/*-------------------------------------------------
       Form
  -------------------------------------------------*/
.d-simple-form .d-form-entry label {
    font-size: 13px;
    color: #a8b6c2;
}

.d-simple-form .d-form-entry input[type='text'] {
    font-size: 14px;
    color: #455a64;
}

/*-------------------------------------------------
       Table
  -------------------------------------------------*/
.generic-table > thead > tr {
    background: #f4f6f9;
    color: #324e64;
    border-bottom: 1px solid #e1eaf4;
    border-right: 1px solid #e1eaf4;
    border-left: 1px solid #e1eaf4;
}

.generic-table > tbody > tr {
    border: 1px solid #deeaea;
}

    .generic-table > tbody > tr:hover {
        box-shadow: 0 0px 25px 4px rgba(45, 105, 150, 0.16);
    }



/*-------------------------------------------------
       Flyout General
  -------------------------------------------------*/
.d-flyout {
    background-color: #fff;
    box-shadow: 0 1px 20px 0 rgba(69,90,100,0.25);
}

.d-flyout-head {
    border: 1px solid #eaeff3;
    background-color: #ffffff;
}

    .d-flyout-head .title-flyout {
        font-size: 18px;
        color: #484848;
    }

.d-flyout-footer {
    background-color: #ffffff;
}

.d-flyout-body {
    background-color: #ffffff;
}

.d-flyout-overlay[data-size='full'] > .d-flyout {
    background-color: #f0f5f8;
}

    .d-flyout-overlay[data-size='full'] > .d-flyout > .d-flyout-body {
        background-color: #f0f5f8;
    }

        .d-flyout-overlay[data-size='full'] > .d-flyout > .d-flyout-body > .d-simple-form {
            background-color: #fff;
            border-radius: 4px;
        }


/*******Flyout : Edit Event*******/
#add-new-event-modal .n-tab {
    background-color: #f5f4fc;
}

#add-new-event-modal .n-tab-active {
    background-color: #3809ad;
    color: #fff;
}


/*-------------------------------------------------
     Selector week days
  -------------------------------------------------*/
.week-days-selector input[type=checkbox] + label {
    background: #dddddd;
}

.week-days-selector input[type=checkbox]:checked + label {
    background: #3809ad;
    color: #ffffff;
}

/*-------------------------------------------------
   Calendar
  -------------------------------------------------*/
.calendar .ui-widget-header {
    background-color: #D2125F;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #fff;
}

.calendar .ui-datepicker table {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: #f5f4fc;
}

.calendar .ui-state-default, .ui-widget-content .ui-state-default {
    border: none !important;
}

.calendar .ui-state-highlight, .ui-widget-content .ui-state-highlight {
    box-shadow: 0 2px 5px 0 rgba(195, 198, 205, 0.5);
    background-color: #F5F4FC;
    color: black;
}

.calendar .ui-widget-content .ui-state-active {
    box-shadow: 0 2px 5px 0 rgba(195, 198, 205, 0.5);
    background-color: #f4144e;
    color: #fff;
}

.calendar a:hover {
    color: #f4144e !important;
}

.calendar .ui-widget-content .ui-state-hover {
    background: #f5f4fc !important;
}

/*-------------------------------------------------
   DatePicker
  -------------------------------------------------*/
.datepicker th {
    border-radius: 0px !important;
    color: #fff;
}

.datepicker table tbody {
    border-radius: 8px;
    background-color: #f5f4fc;
}

.datepicker table tr td.active.active {
    background-color: #f4144e !important;
    background-image: linear-gradient(to bottom,#f4144e,#f4144e) !important;
}

.datepicker table thead {
    background-image: linear-gradient(263deg, #f4144e, #f4144e);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.datepicker .datepicker-switch:hover {
    background: #f4144e !important;
}

/*-------------------------------------------------
   Date Time Picker
  -------------------------------------------------*/

.bootstrap-datetimepicker-widget table td.active {
    background-color: #3809ad !important;
}

.glyphicon-time:before {
    color: #3809ad;
}

.glyphicon-calendar:before {
    color: #3809ad;
}

.bootstrap-datetimepicker-widget .btn-primary {
    background-color: #3809ad;
    border-color: #3809ad;
}

.bootstrap-datetimepicker-widget table td span {
    color: #3809ad;
}

.input-group-addon {
    background-color: #fff;
    border-color: #fff;
}

/*-------------------------------------------------
   Date Range Picker
  -------------------------------------------------*/
.daterangepicker td.in-range {
    background-color: rgba(244, 20, 78, 0.3) !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #f4144e !important;
}

/*-------------------------------------------------
   CheckBox
  -------------------------------------------------*/
.checkmark {
    background-color: #f5f4fc;
    border: solid 0.5px #3809ad;
    box-shadow: 3px 2px 5px 0 rgba(97, 102, 125, 0.25);
}

.check-container:hover input ~ .checkmark {
    background-color: #cbc9d5;
}

.check-container input:checked ~ .checkmark {
    background-color: #3809ad;
}

.container-checkbox .checkmark {
    box-shadow: 3px 2px 5px 0 rgba(97, 102, 125, 0.25);
    border: solid 0.5px #3809ad;
    background-color: #FFFFFF
}

.container-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

.container-checkbox input:checked ~ .checkmark {
    background-color: #3809ad;
}



/*-------------------------------------------------
   CheckBox Switch
  -------------------------------------------------*/
.switch-double {
    background: rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

    .switch-double .switch-label {
        color: rgba(255, 255, 255, 0.35);
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    }

    .switch-double .switch-input:checked + .switch-label {
        color: #fff;
        text-shadow: 0 1px rgba(255, 255, 255, 0.25);
        -webkit-transition: 0.15s ease-out;
        -moz-transition: 0.15s ease-out;
        -ms-transition: 0.15s ease-out;
        -o-transition: 0.15s ease-out;
        transition: 0.15s ease-out;
        -webkit-transition-property: color, text-shadow;
        -moz-transition-property: color, text-shadow;
        -ms-transition-property: color, text-shadow;
        -o-transition-property: color, text-shadow;
        transition-property: color, text-shadow;
    }

    .switch-double .switch-selection {
        background-color: #3809ad;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3809ad), color-stop(100%, #3809ad));
        background-image: -webkit-linear-gradient(top, #3809ad, #3809ad);
        background-image: -moz-linear-gradient(top, #3809ad, #3809ad);
        background-image: -ms-linear-gradient(top, #3809ad, #3809ad);
        background-image: -o-linear-gradient(top, #3809ad, #3809ad);
        background-image: linear-gradient(top, #3809ad, #3809ad);
        -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
        -webkit-transition: left 0.15s ease-out;
        -moz-transition: left 0.15s ease-out;
        -ms-transition: left 0.15s ease-out;
        -o-transition: left 0.15s ease-out;
        transition: left 0.15s ease-out;
    }


/*-------------------------------------------------
   MAP
  -------------------------------------------------*/
.pac-card {
    border: 1px solid #f1f1f1;
    background-color: #fff;
}

#pac-input {
    box-shadow: 6px 4px 10px 0 rgba(203, 206, 215, 0.5);
    background-color: #ffffff;
}

.pac-container {
    border: 1px solid #d2dbe0;
}

.user .user-actions .non-super-admin:before {
    color: #7d8288 !important;
}