.rounded-20 {
    border-radius: 20px;
}

.validation-message {
    color: #dc3545;
}

.form-control.invalid {
    border-color: #dc3545;
}

.list-group-flush-custom .list-group-item {
    border: none;
    padding: 5px 0;
}

.table-header .bottom-header {
    border-top: none;
}

.isActiveView {
    background-color: #1699cc;
}

.mt-26 {
    margin-top: 26px;
}

.fs-24 {
    font-size: 24px;
}

.cw-25 {
    width: 25px;
}

.w-65 {
    width: 65%;
}

.w-80 {
    width: 80% !important;
}

.h-32 {
    height: 32px;
}

.w-inherit {
    width: inherit;
}

.a-custom {
    color: #858796;
}

.search-group ul li i {
    top: 7px !important;
}

.edit-contact .edit-contact-btn {
    margin-top: 20px;
}

.alert-descrip {
    color: #777474;
}

.input-group .input-group-prepend,
.input-group .input-group-append {
    height: 32px;
}

.c-pointer {
    cursor: pointer;
}

.tah-100 {
    height: 100px !important;
}

.spinner-border-lg {
    width: 1.5rem;
    height: 1.5rem;
}

.grp-color-code {
    display: inline-block;
    height: 20px;
    width: 20px;
    border: 1px solid #ccc;
}

.margin-r {
    margin-right: 10px;
    vertical-align: top;
    line-height: 1.6;
}

ul.edit-group-list li {
    width: 32% !important;
}

.custom-checkbox input[type=checkbox]:disabled + label::before {
    background-color: #eaecf4;
}

.panel .panel-heading h4 a:hover,
.panel .panel-heading h4 a:not(.collapsed),
.accordion h4 a:hover,
.accordion h4 a:not(.collapsed) {
    background: #fff;
    transition: 0.15s all ease-in-out;
}

    .panel .panel-heading h4 a:not(.collapsed) > i:before,
    .accordion h4 a:not(.collapsed) > i:before {
        content: "\f068";
    }

#accordion-contact-directorship .card .card-header {
    background: #f0f1f2;
}

    #accordion-contact-directorship .card .card-header a {
        color: #333;
        background: transparent;
    }

        #accordion-contact-directorship .card .card-header a i {
            color: #333;
        }

.table-header .bottom-header ul li:last-child {
    margin-right: 0;
}

.table-header .bottom-header ul li span {
    font-size: 13px;
}

    .table-header .bottom-header ul li span i {
        cursor: pointer;
    }

    .table-header .bottom-header ul li span.icon-book i {
        margin: 0;
    }

        .table-header .bottom-header ul li span.icon-book i:first-child {
            margin-right: -5px;
        }

.btn-default {
    border: 1px solid #ced4da;
}

    .btn-default:hover,
    .btn-default:focus,
    .btn-default:active,
    .btn-default.active,
    .open .dropdown-toggle.btn-default {
        color: #fff;
        background-color: #b7b9cc;
    }

[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
    display: none;
}

.btn-default.btn-on {
    cursor: pointer;
}

    .btn-default.btn-on.active {
        background-color: #1699cc;
        color: white;
    }

.btn-default.btn-off {
    cursor: pointer;
}

    .btn-default.btn-off.active {
        background-color: #1699cc;
        color: white;
    }

.group-member .panel-group .panel {
    margin-right: 5px;
}

    .group-member .panel-group .panel .panel-title .crical-icon:first-child:not(.fa-users) {
        padding-left: 3px;
    }

.search-group .input-group .e-input-group {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.events-page .group-member .panel-body .crical-icon {
    padding: 8px 10px;
    background: #1699cc;
    border-radius: 50%;
    color: #fff;
}

.events-page .group-member .panel-body a {
    color: #7c7c7c;
}

.new-contact-page .btm-footer {
    min-height: 42px;
}

    .new-contact-page .btm-footer i {
        color: #858796 !important;
    }

.new-contact-page .edit-user-list {
    height: 155px;
    padding: 15px 10px 15px 15px;
}


    .new-contact-page .edit-user-list .list-inline li span a {
        display: inline-block;
    }

    .new-contact-page .edit-user-list ul li:nth-child(2) {
        float: right;
    }

    .new-contact-page .edit-user-list ul li span {
        top: 0;
        padding: 0 10px 0 0;
    }

    .new-contact-page .edit-user-list ul li .data-value, .new-contact-page .edit-user-list h3 {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0;
        margin: 5px 0 0 0;
    }

    .new-contact-page .edit-user-list .list-inline li a {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 5px 0 0 0;
    }

.badgebox {
    opacity: 0;
}

    .badgebox + .badge {
        text-indent: -999999px;
        width: 27px;
    }

    .badgebox:focus + .badge {
        box-shadow: inset 0 0 5px;
    }

    .badgebox:checked + .badge {
        text-indent: 0;
    }

.topbar-2 .panel .panel-heading h4 a::before {
    content: "\e705";
    position: absolute;
    top: 10px;
    right: 15px;
}

.topbar-2 .panel .panel-heading h4 a:hover,
.topbar-2 .panel .panel-heading h4 a:not(.collapsed) {
    background: #fff;
    transition: 0.15s all ease-in-out;
}

    .topbar-2 .panel .panel-heading h4 a:not(.collapsed)::before {
        content: "\e734";
    }

.e-schedule-table .crical-icon {
    padding: 8px 12px 8px 12px;
    background: #1699cc;
    border-radius: 50%;
    color: #fff;
}

.events-page .agenda-section .agenda-timeline ul.progressbar li {
    list-style: decimal;
}

    .events-page .agenda-section .agenda-timeline ul.progressbar li time {
        padding: 0 2em;
    }

    .events-page .agenda-section .agenda-timeline ul.progressbar li a:not(.form-control):not(.add-item):not(.preview-item):hover {
        display: block;
        width: 100%;
        padding: .375rem .75rem !important;
        border: 1px solid #d1d3e2;
        cursor: pointer;
        border-radius: 3px;
    }

    .events-page .agenda-section .agenda-timeline ul.progressbar li .input-group:hover {
        border-bottom: 0 !important;
    }

    .events-page .agenda-section .agenda-timeline ul.progressbar li .input-group-append .input-group-text {
        cursor: pointer;
        border-radius: 3px;
        background: #e74a3b;
        color: #fff;
        font-size: 14px;
        border: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .events-page .agenda-section .agenda-timeline ul.progressbar li .time-selected {
        background-color: #1699cc !important;
        color: #fff;
        border-color: #1699cc !important;
    }

    .events-page .agenda-section .agenda-timeline ul.progressbar li.row-highlighted {
        background-color: #eff0f0;
    }

    .events-page .agenda-section .agenda-timeline ul.progressbar li small {
        line-height: 3;
        font-size: 9px;
    }

.events-page .agenda-section .agenda-timeline ul.progressbar > li small {
    left: 25px;
}

.events-page .agenda-section .agenda-timeline ul.progressbar ul > li small {
    left: -15px;
}

.events-page .agenda-section .agenda-timeline ul.progressbar ul ul > li small {
    left: 20px;
}

.events-page .agenda-section a.add-item {
    color: #aaa;
    display: block;
    border-radius: 4px;
    padding: 5px 10px;
    margin-left: -10px;
}

    .events-page .agenda-section a.add-item:hover {
        background-color: #dff0d8;
        color: #57a158;
        cursor: pointer;
        text-decoration: none;
    }

.mw-100 {
    max-width: 100px;
}

@media (min-width: 768px) {
    .modal-xl {
        width: 90%;
        max-width: 900px;
    }
}

.agenda-style li {
    width: 15%;
}

.agenda-style .agenda-type-option ul {
    padding: 0;
    height: 100%;
}

.agenda-style .agenda-type-option li {
    display: list-item;
    width: 80%;
}

.agenda-type-option {
    width: 90px;
    height: 120px;
    border: 1px solid #cfcfcf;
    padding: 10px;
    border-radius: 4px;
    margin-left: 10px;
}

    .agenda-type-option .filler {
        display: inline-block;
        width: 100%;
        border-bottom: 2px solid #cfcfcf;
        position: relative;
        margin-left: 5px;
    }

    .agenda-timeline.number ul,
    .agenda-type-option.number ul {
        counter-reset: item;
        position: relative;
    }

        .agenda-timeline.number ul li,
        .agenda-type-option.number ul li {
            list-style: none !important;
        }

            .agenda-timeline.number ul li:before,
            .agenda-type-option.number ul li:before {
                content: counters(item, ".") " ";
                counter-increment: item;
                position: absolute;
                left: 1px;
            }

            .agenda-type-option.number ul li ul li .filler {
                width: 75%;
                margin-left: 16px;
            }

            .agenda-type-option.number ul li ul li ul li .filler {
                width: 45%;
                margin-left: 23px;
            }

.agenda-right-section .panel-title .crical-icon {
    padding: 5px 0 5px 1px;
    background: #1699cc;
    border-radius: 50%;
    color: #fff;
    margin: 0 10px 0 5px;
}

.agenda-right-section .panel .panel-title .crical-icon:first-child:not(.fa-users) {
    padding-left: 3px;
}

.preview .agenda-timeline > ul {
    border: 0 !important;
}

.preview .agenda-timeline ul > li {
    margin: 0 !important;
}

.agenda-right-section > nav a {
    width: 33%;
}

.navbar-expand .navbar-nav .dropdown-menu {
    z-index: 9999;
}

.expenses-page .reviewer-list {
    min-height: 315px;
    overflow: auto;
}

    .expenses-page .reviewer-list li {
        width: 100%;
    }

.modal-dialog-scrollable .modal-body {
    max-height: 500px;
}

.notification-item-unread {
    background: #e6f7ff;
}

.notification-item-read {
    background: white;
}

.attendee-username {
    display: inline-block;
    vertical-align: middle;
    width: 60%;
}

​​​​​​​​
/*====================== Scrollbar CSS =================*/
.scrollable {
    max-height: 350px;
    overflow: auto;
}

.scrollable::-webkit-scrollbar {
    width: 5px;
    background-color: #F5F5F5;
}

.scrollable::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #999;
}

.scrollable::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}


/*====================== Custom Radio Button CSS =================*/

.radio-custom label:after {
    content: '';
    display: table;
    clear: both;
}

.radio-custom .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.radio-custom .cr {
    border-radius: 50%;
}

    .radio-custom .cr .cr-icon {
        position: absolute;
        font-size: .8em;
        line-height: 0;
        top: 50%;
        left: 10%;
    }

    .radio-custom .cr .cr-icon {
        margin-left: 0.04em;
    }

.radio-custom label input[type="radio"] {
    display: none;
}

    .radio-custom label input[type="radio"] + .cr > .cr-icon {
        transform: scale(3) rotateZ(-20deg);
        opacity: 0;
        transition: all .3s ease-in;
    }

    .radio-custom label input[type="radio"]:checked + .cr > .cr-icon {
        transform: scale(1) rotateZ(0deg);
        opacity: 1;
    }

        .radio-custom label input[type="radio"]:checked + .cr > .cr-icon.fa-circle:before {
            color: #1699cc;
        }

    .radio-custom label input[type="radio"]:disabled + .cr {
        opacity: .5;
    }


/*====================== Lock Button CSS =================*/

.btn-lock {
    display: inline-block;
    background: #7c7c7c;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .btn-lock svg {
        fill: none;
        transform: translate3d(0, 0, 0);
    }

        .btn-lock svg .bling {
            stroke: #fff;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-dasharray: 3;
            stroke-dashoffset: 15;
            transition: all 0.3s ease;
        }

        .btn-lock svg .lock {
            stroke: #fff;
            stroke-width: 4;
            stroke-linejoin: round;
            stroke-linecap: round;
            stroke-dasharray: 36;
            transition: all 0.4s ease;
        }

        .btn-lock svg .lockb {
            fill: #fff;
            fill-rule: evenodd;
            clip-rule: evenodd;
            transform: rotate(8deg);
            transform-origin: 14px 20px;
            transition: all 0.2s ease;
        }

.check-stylus-lock {
    display: none;
}

    .check-stylus-lock:checked + label {
        background: #20cca5;
    }

        .check-stylus-lock:checked + label svg {
            opacity: 1;
        }

            .check-stylus-lock:checked + label svg .bling {
                animation: bling 0.3s linear forwards;
                animation-delay: 0.2s;
            }

            .check-stylus-lock:checked + label svg .lock {
                stroke-dasharray: 48;
                animation: locked 0.3s linear forwards;
            }

            .check-stylus-lock:checked + label svg .lockb {
                transform: rotate(0);
                transform-origin: 14px 22px;
            }

@-moz-keyframes bling {
    50% {
        stroke-dasharray: 3;
        stroke-dashoffset: 12;
    }

    100% {
        stroke-dasharray: 3;
        stroke-dashoffset: 9;
    }
}

@-webkit-keyframes bling {
    50% {
        stroke-dasharray: 3;
        stroke-dashoffset: 12;
    }

    100% {
        stroke-dasharray: 3;
        stroke-dashoffset: 9;
    }
}

@-o-keyframes bling {
    50% {
        stroke-dasharray: 3;
        stroke-dashoffset: 12;
    }

    100% {
        stroke-dasharray: 3;
        stroke-dashoffset: 9;
    }
}

@keyframes bling {
    50% {
        stroke-dasharray: 3;
        stroke-dashoffset: 12;
    }

    100% {
        stroke-dasharray: 3;
        stroke-dashoffset: 9;
    }
}

@-moz-keyframes locked {
    50% {
        transform: translateY(1px);
    }
}

@-webkit-keyframes locked {
    50% {
        transform: translateY(1px);
    }
}

@-o-keyframes locked {
    50% {
        transform: translateY(1px);
    }
}

@keyframes locked {
    50% {
        transform: translateY(1px);
    }
}


/*====================== Syncfusion Override CSS =================*/

.e-control,
.e-css {
    font-family: "Open Sans", sans-serif !important;
}

.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
    padding: 3px 0 !important;
}

.e-grid {
    border-radius: 0 !important;
}

    .e-grid .e-toolbar {
        border-radius: 0 !important;
        background: none !important;
    }

        .e-grid .e-toolbar .e-toolbar-items {
            background: none !important;
        }

            .e-grid .e-toolbar .e-toolbar-items:first-child > .e-toolbar-left .e-toolbar-item:last-child:not(.e-template),
            .e-toolbar .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child:not(.e-template) {
                margin-left: 0;
                margin-right: 0;
            }

            .e-grid .e-toolbar .e-toolbar-items:first-child > .e-toolbar-left .e-toolbar-item:last-child > button,
            .e-toolbar .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child > button {
                margin: 0 5px;
            }

            .e-grid .e-toolbar .e-toolbar-items:first-child > .e-toolbar-left .e-toolbar-item > button:not(:hover):not(:focus),
            .e-toolbar .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item > button:not(:hover):not(:focus) {
                background: transparent;
            }

    .e-grid .e-headercelldiv {
        font-weight: normal !important;
    }

    .e-grid .e-rowcell {
        font-size: 13px !important;
        color: #858796 !important;
    }

    .e-grid .dropdown-table .dropdown-menu {
        left: -40px !important;
    }

    .e-grid td.e-active {
        background: #1699cc;
        color: #fff !important;
    }

    .e-grid .e-spinner-pane {
        display: none;
    }

.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker {
    padding: 0 !important;
}

    .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker .e-selected-color {
        padding: 15px;
        margin: 0 !important;
        border-radius: inherit !important;
    }

    .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker .e-split-preview {
        border-radius: 3px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

.e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn {
    padding: 0 8px !important;
}

.e-ul .e-list-item {
    padding-right: 0;
}

    .e-ul .e-list-item .panel .panel-body ul li {
        text-indent: 0;
        padding-left: 20px;
    }

        .e-ul .e-list-item .panel .panel-body ul li .crical-icon {
            padding: 6px 8px;
            background: #1699cc;
            border-radius: 50%;
            color: #fff;
        }

.e-schedule-table .e-event-table .e-appointment .e-appointment-details {
    padding: 0;
}

    .e-schedule-table .e-event-table .e-appointment .e-appointment-details .e-blazor-template {
        width: 100%;
        margin: 0;
    }

.e-dropdown-custom {
    height: auto;
    width: auto;
    border: none;
    background-color: transparent;
    box-shadow: none !important;
    color: #858796;
    padding: 0;
}

    .e-dropdown-custom:focus {
        background-color: transparent;
    }

    .e-dropdown-custom:hover {
        background-color: transparent !important;
    }

    .e-dropdown-custom .e-caret {
        height: 5px;
        margin-top: -20px;
        margin-left: -7px;
        font-size: 11px !important;
    }

    .e-dropdown-custom.e-active {
        background-color: transparent;
    }

    .e-dropdown-custom ul.e-dropdown-menu {
        background-color: #fff;
        border-radius: 0;
        padding: 5px;
        min-width: 150px;
    }

        .e-dropdown-custom ul.e-dropdown-menu li:nth-child(1) {
            border-bottom: 1px solid #ddd;
            font-weight: 600;
        }

        .e-dropdown-custom ul.e-dropdown-menu .e-item:not(:active),
        .e-dropdown-custom ul.e-dropdown-menu .e-item .e-menu-icon {
            font-size: 13px;
            color: inherit;
        }

    .e-dropdown-custom.e-right-action ul.e-dropdown-menu .e-blank-icon {
        padding: 0 20px !important;
    }

.e-tooltip-wrap.e-popup {
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: .875rem;
    word-wrap: break-word;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
}

.e-tooltip-wrap .e-tip-content {
    padding: .5rem .75rem;
    color: #212529;
}

.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border-bottom: 8px solid rgba(0, 0, 0, .2);
}

    .e-tooltip-wrap .e-arrow-tip-outer.e-tip-top::before {
        border-bottom-color: #fff;
    }

.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
    top: -3px !important;
    left: 0.5px;
}

    .e-tooltip-wrap .e-arrow-tip-inner.e-tip-top::before {
        color: #fff
    }

.e-input-group .e-spinner-pane {
    display: none;
}

.e-autocomplete-custom .e-dropdownbase .e-list-item {
    text-indent: 0;
    color: #7c7c7c;
}

    .e-autocomplete-custom .e-dropdownbase .e-list-item:last-child {
        border-bottom: 0;
    }

.e-autocomplete-custom .e-list-parent .e-list-item h4 span {
    order: 1px solid;
    white-space: normal;
    word-break: break-all;
    width: 85%;
    padding: 0;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.e-schedule .e-agenda-view .e-appointment.e-template {
    width: 100%;
}

.e-dlg-container e-dlg-center-center,
.e-inplaceeditor .e-editable-action-buttons {
    z-index: 10000 !important;
}
/*====================== Syncfusion Font CSS =================*/
@font-face {
    font-family: 'swap-icon';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfIAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmXID+ZgAAAcgAAAA4aGVhZBR5I0cAAADQAAAANmhoZWEIVQQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQAcAAAAAAHAAAAABm1heHABDgAZAAABCAAAACBuYW1ltM6mlQAAAgAAAAI9cG9zdFSIYnYAAARAAAAALgABAAAEAAAAAFwEAAAAAAAD+AABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAARPvYwl8PPPUACwQAAAAAANixb1gAAAAA2LFvWAAAAAAD+AOaAAAACAACAAAAAAAAAAEAAAACAA0AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAHAAAAAIAAAAAA/gDmgAFAAwAABMhBxcBITUxBTUhNycIA1HcLAFP/BAD8Pyv2ysBYs4uATy9AUDOLgAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAJAAEAAQAAAAAAAgAHAAoAAQAAAAAAAwAJABEAAQAAAAAABAAJABoAAQAAAAAABQALACMAAQAAAAAABgAJAC4AAQAAAAAACgAsADcAAQAAAAAACwASAGMAAwABBAkAAAACAHUAAwABBAkAAQASAHcAAwABBAkAAgAOAIkAAwABBAkAAwASAJcAAwABBAkABAASAKkAAwABBAkABQAWALsAAwABBAkABgASANEAAwABBAkACgBYAOMAAwABBAkACwAkATsgRm9udCBTd2FwUmVndWxhckZvbnQgU3dhcEZvbnQgU3dhcFZlcnNpb24gMS4wRm9udCBTd2FwRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABGAG8AbgB0ACAAUwB3AGEAcABSAGUAZwB1AGwAYQByAEYAbwBuAHQAIABTAHcAYQBwAEYAbwBuAHQAIABTAHcAYQBwAFYAZQByAHMAaQBvAG4AIAAxAC4AMABGAG8AbgB0ACAAUwB3AGEAcABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAQIBAwAEU3dhcAAAAAA=) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.e-swap-icon {
    font-family: 'swap-icon' !important;
    speak: none;
    font-size: 40px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    align-self: center;
    margin: 0 10px;
    transform: rotateX(180deg);
}

    .e-swap-icon:before {
        content: '\e700';
    }

.e-settings:before {
    content: '\e679';
}

.e-export:before {
    content: '\e780';
}

.e-import:before {
    content: '\e77a';
}

@font-face {
    font-family: 'toast-icon';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.toast-icons {
    font-family: 'toast-icon' !important;
    speak: none;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.e-toast .e-toast-icon.e-icons {
    height: auto;
    font-size: 30px;
}

.toast-icons.e-success::before {
    content: "\e701";
}

.toast-icons.e-error::before {
    content: "\e700";
}

.toast-icons.e-info::before {
    content: "\e704";
}

.toast-icons.e-warning::before {
    content: "\e703";
}
/*====================== EL Checkbox and Radio Button Switch CSS =================*/
.el-radio,
.el-checkbox {
    position: relative;
    font-size: 100%
}

label.el-radio,
label.el-checkbox {
    display: block;
    cursor: pointer
}

.el-radio > input[type=radio],
.el-checkbox > input[type=checkbox] {
    display: none
}

    .el-radio > input[type=radio][disabled],
    .el-checkbox > input[type=checkbox][disabled] {
        cursor: not-allowed
    }

    .el-radio > input[type=radio] + .el-radio-style,
    .el-checkbox > input[type=checkbox] + .el-checkbox-style {
        position: relative;
        display: inline-block;
        width: 1.4em;
        height: 1.4em;
        vertical-align: middle;
        cursor: pointer
    }

        .el-radio > input[type=radio] + .el-radio-style:hover:before,
        .el-checkbox > input[type=checkbox] + .el-checkbox-style:hover:before {
            border-color: #20a0ff
        }

        .el-radio > input[type=radio] + .el-radio-style:before,
        .el-checkbox > input[type=checkbox] + .el-checkbox-style:before {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 1.4em;
            height: 1.4em;
            content: '';
            border: 1px solid #c0ccda
        }

        .el-radio > input[type=radio] + .el-radio-style:after,
        .el-checkbox > input[type=checkbox] + .el-checkbox-style:after {
            position: absolute;
            display: none;
            content: ''
        }

    .el-radio > input[type=radio][disabled] + .el-radio-style,
    .el-checkbox > input[type=checkbox][disabled] + .el-checkbox-style {
        cursor: not-allowed;
        color: #d3dce6
    }

        .el-radio > input[type=radio][disabled] + .el-radio-style:hover,
        .el-radio > input[type=radio][disabled] + .el-radio-style:before,
        .el-radio > input[type=radio][disabled] + .el-radio-style:after,
        .el-checkbox > input[type=checkbox][disabled] + .el-checkbox-style:hover,
        .el-checkbox > input[type=checkbox][disabled] + .el-checkbox-style:before,
        .el-checkbox > input[type=checkbox][disabled] + .el-checkbox-style:after {
            cursor: not-allowed
        }

            .el-radio > input[type=radio][disabled] + .el-radio-style:hover:before,
            .el-checkbox > input[type=checkbox][disabled] + .el-checkbox-style:hover:before {
                border: 1px solid #d3dce6;
                animation-name: none
            }

        .el-radio > input[type=radio][disabled] + .el-radio-style:before,
        .el-checkbox > input[type=checkbox][disabled] + .el-checkbox-style:before {
            border-color: #d3dce6
        }

    .el-radio > input[type=radio]:checked + .el-radio-style:before,
    .el-checkbox > input[type=checkbox]:checked + .el-checkbox-style:before {
        animation-name: none
    }

    .el-radio > input[type=radio]:checked + .el-radio-style:after,
    .el-checkbox > input[type=checkbox]:checked + .el-checkbox-style:after {
        display: block
    }

    .el-radio > input[type=radio] + .el-radio-style:before {
        border-radius: 50%
    }

    .el-radio > input[type=radio] + .el-radio-style:after {
        top: .4em;
        left: .4em;
        width: .6em;
        height: .6em;
        border-radius: 50%;
        background: #20a0ff
    }

    .el-radio > input[type=radio]:checked + .el-radio-style:before {
        border: 1px solid #20a0ff
    }

    .el-radio > input[type=radio]:checked[disabled] + .el-radio-style:before {
        border: 1px solid #b0d7f5
    }

    .el-radio > input[type=radio]:checked[disabled] + .el-radio-style:after {
        background: #b0d7f5
    }

    .el-checkbox > input[type=checkbox] + .el-checkbox-style:before {
        border-radius: 3px
    }

    .el-checkbox > input[type=checkbox] + .el-checkbox-style:after {
        top: .15em;
        left: .5em;
        box-sizing: border-box;
        width: .4em;
        height: .85em;
        transform: rotate(45deg);
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff
    }

    .el-checkbox > input[type=checkbox]:checked + .el-checkbox-style:before {
        border: #20a0ff;
        background: #20a0ff
    }

    .el-checkbox > input[type=checkbox]:checked[disabled] + .el-checkbox-style:before {
        border: #b0d7f5;
        background: #b0d7f5
    }

.el-radio.el-radio-blue > input[type=radio] + label:hover:before,
.el-checkbox.el-checkbox-blue > input[type=checkbox] + label:hover:before,
.el-radio.el-radio-blue > input[type=radio]:checked + label:before,
.el-checkbox.el-checkbox-blue > input[type=checkbox]:checked + label:before {
    border-color: #20a0ff
}

.el-checkbox.el-checkbox-blue > input[type=checkbox]:checked + label:before,
.el-radio.el-radio-blue > input[type=radio] + label:after {
    background: #20a0ff
}

.el-radio.el-radio-blue > input[type=radio][disabled] + label:hover:before,
.el-checkbox.el-checkbox-blue > input[type=checkbox][disabled] + label:hover:before {
    border-color: #d3dce6
}

.el-checkbox.el-checkbox-blue > input[type=checkbox]:checked[disabled] + label:before,
.el-radio.el-radio-blue > input[type=radio]:checked[disabled] + label:before {
    border-color: #b0d7f5
}

.el-checkbox.el-checkbox-blue > input[type=checkbox][disabled]:checked + label:before,
.el-radio.el-radio-blue > input[type=radio]:checked[disabled] + label:after {
    background: #b0d7f5
}

.el-radio.el-radio-green > input[type=radio] + label:hover:before,
.el-checkbox.el-checkbox-green > input[type=checkbox] + label:hover:before,
.el-radio.el-radio-green > input[type=radio]:checked + label:before,
.el-checkbox.el-checkbox-green > input[type=checkbox]:checked + label:before {
    border-color: #13ce66
}

.el-checkbox.el-checkbox-green > input[type=checkbox]:checked + label:before,
.el-radio.el-radio-green > input[type=radio] + label:after {
    background: #13ce66
}

.el-radio.el-radio-green > input[type=radio][disabled] + label:hover:before,
.el-checkbox.el-checkbox-green > input[type=checkbox][disabled] + label:hover:before {
    border-color: #d3dce6
}

.el-checkbox.el-checkbox-green > input[type=checkbox]:checked[disabled] + label:before,
.el-radio.el-radio-green > input[type=radio]:checked[disabled] + label:before {
    border-color: #a1efc4
}

.el-checkbox.el-checkbox-green > input[type=checkbox][disabled]:checked + label:before,
.el-radio.el-radio-green > input[type=radio]:checked[disabled] + label:after {
    background: #a1efc4
}

.el-radio.el-radio-red > input[type=radio] + label:hover:before,
.el-checkbox.el-checkbox-red > input[type=checkbox] + label:hover:before,
.el-radio.el-radio-red > input[type=radio]:checked + label:before,
.el-checkbox.el-checkbox-red > input[type=checkbox]:checked + label:before {
    border-color: #ff4949
}

.el-checkbox.el-checkbox-red > input[type=checkbox]:checked + label:before,
.el-radio.el-radio-red > input[type=radio] + label:after {
    background: #ff4949
}

.el-radio.el-radio-red > input[type=radio][disabled] + label:hover:before,
.el-checkbox.el-checkbox-red > input[type=checkbox][disabled] + label:hover:before {
    border-color: #d3dce6
}

.el-checkbox.el-checkbox-red > input[type=checkbox]:checked[disabled] + label:before,
.el-radio.el-radio-red > input[type=radio]:checked[disabled] + label:before {
    border-color: #f9b3b3
}

.el-checkbox.el-checkbox-red > input[type=checkbox][disabled]:checked + label:before,
.el-radio.el-radio-red > input[type=radio]:checked[disabled] + label:after {
    background: #f9b3b3
}

.el-radio.el-radio-yellow > input[type=radio] + label:hover:before,
.el-checkbox.el-checkbox-yellow > input[type=checkbox] + label:hover:before,
.el-radio.el-radio-yellow > input[type=radio]:checked + label:before,
.el-checkbox.el-checkbox-yellow > input[type=checkbox]:checked + label:before {
    border-color: #f7ba2a
}

.el-checkbox.el-checkbox-yellow > input[type=checkbox]:checked + label:before,
.el-radio.el-radio-yellow > input[type=radio] + label:after {
    background: #f7ba2a
}

.el-radio.el-radio-yellow > input[type=radio][disabled] + label:hover:before,
.el-checkbox.el-checkbox-yellow > input[type=checkbox][disabled] + label:hover:before {
    border-color: #d3dce6
}

.el-checkbox.el-checkbox-yellow > input[type=checkbox]:checked[disabled] + label:before,
.el-radio.el-radio-yellow > input[type=radio]:checked[disabled] + label:before {
    border-color: #fbeac1
}

.el-checkbox.el-checkbox-yellow > input[type=checkbox][disabled]:checked + label:before,
.el-radio.el-radio-yellow > input[type=radio]:checked[disabled] + label:after {
    background: #fbeac1
}

.el-switch,
.el-switch-style,
.el-switch-style:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.el-switch {
    display: inline-block;
    font-size: 100%;
    height: 1.6em;
    position: relative
}

    .el-switch .el-switch-style {
        height: 1.6em;
        left: 0;
        background: #c0ccda;
        -webkit-border-radius: .8em;
        border-radius: .8em;
        display: inline-block;
        position: relative;
        top: 0;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        width: 3em;
        cursor: pointer
    }

        .el-switch .el-switch-style:before {
            display: block;
            content: '';
            height: 1.4em;
            position: absolute;
            width: 1.4em;
            background-color: #fff;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            left: .1em;
            top: .1em;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

    .el-switch > input[type=checkbox] {
        display: none
    }

        .el-switch > input[type=checkbox][disabled] + .el-switch-style {
            cursor: not-allowed;
            background-color: #d3dce6
        }

        .el-switch > input[type=checkbox]:checked + .el-switch-style {
            background-color: #20a0ff
        }

            .el-switch > input[type=checkbox]:checked + .el-switch-style:before {
                left: 50%
            }

        .el-switch > input[type=checkbox]:checked[disabled] + .el-switch-style {
            background-color: #b0d7f5
        }

    .el-switch.el-switch-blue > input[type=checkbox]:checked + .el-switch-style {
        background-color: #20a0ff
    }

    .el-switch.el-switch-blue > input[type=checkbox]:checked[disabled] + .el-switch-style {
        background-color: #b0d7f5
    }

    .el-switch.el-switch-green > input[type=checkbox]:checked + .el-switch-style {
        background-color: #13ce66
    }

    .el-switch.el-switch-green > input[type=checkbox]:checked[disabled] + .el-switch-style {
        background-color: #a1efc4
    }

    .el-switch.el-switch-red > input[type=checkbox]:checked + .el-switch-style {
        background-color: #ff4949
    }

    .el-switch.el-switch-red > input[type=checkbox]:checked[disabled] + .el-switch-style {
        background-color: #f9b3b3
    }

    .el-switch.el-switch-yellow > input[type=checkbox]:checked + .el-switch-style {
        background-color: #f7ba2a
    }

    .el-switch.el-switch-yellow > input[type=checkbox]:checked[disabled] + .el-switch-style {
        background-color: #fbeac1
    }

    .el-radio.el-radio-sm,
    .el-checkbox.el-checkbox-sm,
    .el-switch.el-switch-sm {
        font-size: 85%
    }

    .el-radio.el-radio-lg,
    .el-checkbox.el-checkbox-lg,
    .el-switch.el-switch-lg {
        font-size: 125%
    }
/*====================== Spinner CSS =================*/
.loading-overlay {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.loader-wave {
    position: fixed;
    border: 1px solid transparent;
    left: 50%;
    top: 50%;
    z-index: 1;
}

    .loader-wave span {
        position: absolute;
        bottom: 0;
        display: block;
        width: 9px;
        height: 5px;
        border-radius: 5px;
        background: rgba(0, 0, 0, .1);
        -webkit-animation: preloader 2s infinite ease-in-out;
        animation: preloader 2s infinite ease-in-out
    }

        .loader-wave span:nth-child(2) {
            left: 11px;
            -webkit-animation-delay: .2s;
            animation-delay: .2s
        }

        .loader-wave span:nth-child(3) {
            left: 22px;
            -webkit-animation-delay: .4s;
            animation-delay: .4s
        }

        .loader-wave span:nth-child(4) {
            left: 33px;
            -webkit-animation-delay: .6s;
            animation-delay: .6s
        }

        .loader-wave span:nth-child(5) {
            left: 44px;
            -webkit-animation-delay: .8s;
            animation-delay: .8s
        }

        .loader-wave span:nth-child(6) {
            left: 55px;
            -webkit-animation-delay: 1s;
            animation-delay: 1s
        }

@-webkit-keyframes preloader {
    0%, 100%, 50% {
        height: 1.5rem;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        background: rgba(0, 0, 0, .1)
    }

    25% {
        height: 4rem;
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
        background: #f8990c
    }
}

@keyframes preloader {
    0%, 100%, 50% {
        height: 1.5rem;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        background: rgba(0, 0, 0, .1)
    }

    25% {
        height: 4rem;
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
        background: #f8990c
    }
}
/*====================== Animatd Progress Bar CSS =================*/
.progress-bar {
    width: 0;
    -webkit-animation: progress 1.5s ease-in-out forwards;
    animation: progress 1.5s ease-in-out forwards;
}

    .progress-bar .title {
        opacity: 0;
        -webkit-animation: show 0.35s forwards ease-in-out 0.5s;
        animation: show 0.35s forwards ease-in-out 0.5s;
    }

@-webkit-keyframes progress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes progress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@-webkit-keyframes show {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes show {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/*====================== Dashboard CSS =================*/
.dashboard .e-dashboardlayout.e-control .e-panel {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.dashboard .calendar {
    width: 66% !important;
}

    .dashboard .calendar .calendar-content {
        padding: 20px 0 20px 0;
    }

    .dashboard .calendar .e-content-table .template-wrap {
        color: #fff;
        font-size: 12px;
        padding-left: 5px;
    }

    .dashboard .calendar .e-schedule .e-appointment .e-appointment-details {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }

        .dashboard .calendar .e-schedule .e-appointment .e-appointment-details a {
            color: #fff;
        }

    .dashboard .calendar .e-schedule .e-schedule-table tbody tr td.e-header-cells {
        background: #f0f1f2;
        font-weight: 800;
        font-size: 13px;
    }

    .dashboard .calendar .e-schedule .e-month-view {
        overflow: hidden;
        overflow-y: scroll;
        height: 338px;
    }

        .dashboard .calendar .e-schedule .e-month-view .e-content-wrap {
            overflow: hidden;
            height: 100% !important;
        }

    .dashboard .calendar .e-schedule .e-week-view {
        overflow: hidden;
        overflow-y: scroll;
        height: 338px;
    }

.dashboard .upcomming-box .e-schedule {
    overflow: inherit !important;
}

.dashboard .upcomming-box .e-schedule {
    border: 0;
}

.dashboard .upcomming-box .e-content-table .template-wrap .content-area h5 {
    margin: 0;
}

.dashboard .upcomming-box .e-content-table .template-wrap .content-area img {
    width: 20px;
    margin-left: 10px;
}

.dashboard .upcomming-box .e-content-table .template-wrap .content-area .datapop {
    padding: 0 10px;
    vertical-align: middle;
}

.dashboard .upcomming-box .e-schedule .e-agenda-view .e-appointment.e-appointment-border,
.dashboard .upcomming-box .e-schedule .e-agenda-view .e-appointment:focus {
    background: #fff;
}

.dashboard .upcomming-box .e-schedule .e-agenda-view .e-appointment:hover {
    background: #fff;
}

.dashboard .upcomming-box .icon-sec {
    display: block;
    margin: 0;
}

    .dashboard .upcomming-box .icon-sec .accept {
        color: #26c571;
        padding: 0 3px 0 0;
        font-size: 15px;
    }

    .dashboard .upcomming-box .icon-sec .tentative {
        color: #fdcc53;
        padding: 0 3px;
        font-size: 15px;
    }

    .dashboard .upcomming-box .icon-sec .decline {
        color: #f00;
        padding: 0 3px;
        font-size: 15px;
    }

.dashboard .upcomming-box .e-schedule .e-agenda-view .e-agenda-item {
    padding: 0;
    border-bottom: 0;
    position: relative;
    margin: 10px 0;
}

    .dashboard .upcomming-box .e-schedule .e-agenda-view .e-agenda-item::after {
        content: "";
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        height: 100%;
        border-left: 4px solid #1699cc;
        border-radius: 3px;
    }

    .dashboard .upcomming-box .e-schedule .e-agenda-view .e-agenda-item:nth-child(1)::after {
        border-color: #1699cc;
    }

    .dashboard .upcomming-box .e-schedule .e-agenda-view .e-agenda-item:nth-child(2)::after {
        border-color: #005587;
    }

    .dashboard .upcomming-box .e-schedule .e-agenda-view .e-agenda-item:nth-child(3)::after {
        border-color: #fdcc53;
    }

.dashboard .upcomming-box .e-schedule .e-agenda-view .e-day-date-header {
    text-align: center;
}

.dashboard .upcomming-box .e-schedule-table .e-day-date-header .e-m-date {
    display: inline-block;
    vertical-align: top;
    font-size: 25px;
    font-weight: 800;
}

.dashboard .upcomming-box .e-schedule-table .e-day-date-header .e-m-day {
    display: block;
    font-size: 12px;
    margin: -5px 0;
}

.dashboard .upcomming-box .e-schedule .e-agenda-view .e-appointment {
    border-left: 0;
}

.dashboard .upcomming-box .e-schedule .e-content-wrap {
    height: auto !important;
}

.dashboard .upcomming-box .event-data-box .e-table-container {
    overflow: hidden;
    overflow-y: auto;
    height: 420px;
}

.dashboard .upcomming-box .all-meeting {
    position: absolute;
    left: 0;
    width: 100%;
}

    .dashboard .upcomming-box .all-meeting a {
        color: inherit;
    }

.pd-left-20 {
    padding-left: 20px;
}

.calendar-data-list {
    border-right: 1px solid #dddfeb;
}

    .calendar-data-list label {
        font-weight: bold;
    }

.input-width {
    width: 40px;
    display: inline-block;
}

.select-width {
    width: 90px;
    display: inline-block;
}

.weekly-days .custom-checkbox {
    margin: 20px 7px 0 7px;
}
/*====================== Expenses CSS =================*/
.discussion-head-sec {
    overflow: hidden;
}

.expenses-page .expenses-accordion .panel-heading a {
    background: #f0f1f2 !important;
}

.expenses-accordion .poll-accordion-header {
    border-bottom: 1px solid #dddfeb;
}
/*reset bootstrap legend border */
fieldset.scheduler-border {
    border: solid 1px #dddfeb !important;
    border-radius: 4px !important;
    padding: 0 10px 10px 10px;
    border-bottom: none;
    margin-bottom: 30px;
    color: #7c7c7c;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(255, 255, 255, 0.24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(255, 255, 255, 0.24);
}

    fieldset.scheduler-border legend {
        width: auto !important;
        border: none;
        font-size: 15px;
        font-weight: 700;
    }

.copyright {
    position: absolute;
    bottom: 0;
    left: 10px;
    color: white;
}

.modal-header {
    padding: 7px 15px;
    border-bottom: 1px solid #eee;
    background-color: #005587;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.modal-footer {
    padding: 0.5rem;
}

.modal-header-title {
    width: 100%;
    color: #fff;
}

.modal-avtar {
    background-image: url("/img/lock-icon.png");
    vertical-align: middle;
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.password-security {
    -webkit-text-security: square;
}

.validation-message {
    font-size: 11px;
}

.e-upload-browse-btn {
    color: #fff !important;
    background-color: #1699cc !important;
    border-color: #1699cc !important;
}

    .e-upload-browse-btn:focus {
        outline: none !important;
        outline-offset: 0;
        box-shadow: none !important;
    }


.e-btn {
    border-radius: 3px;
    font-size: 12px;
    padding: 5px 20px;
}

    .e-btn.e-flat.e-primary, .e-css.e-btn.e-flat.e-primary {
        color: #fff;
        background-color: #1699cc;
        border-color: #1699cc;
    }

        .e-btn.e-flat.e-primary:hover, .e-css.e-btn.e-flat.e-primary:hover {
            background-color: #005587;
            border-color: #005587;
        }

        .e-btn.e-flat.e-primary:focus, .e-css.e-btn.e-flat.e-primary:focus {
            background-color: #005587;
            border-color: #005587;
            outline: none !important;
            outline-offset: 0;
            box-shadow: none !important;
        }

    .e-btn.e-flat {
        background-color: transparent;
        border-color: transparent;
        color: #333;
    }

.btn-secondary.e-btn.e-flat:hover {
    background-color: transparent;
    border-color: transparent;
    color: #333;
}

.btn-secondary.e-btn.e-flat:active {
    color: #fff;
    background-color: #6b6d7d;
    border-color: #656776;
}

.btn-secondary.e-btn.e-flat:focus {
    outline: none !important;
    outline-offset: 0;
    box-shadow: none !important;
}

.login-eye-icon-padding {
    padding: 1.3rem 10px;
    cursor: pointer;
}
.login-vertical-center {
    min-height: 100vh;
}
.centered-vertical {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}