@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');



:root {
    --blue: #1e90ff;
    --white: #ffffff;
    --green: #317951;
    --gold: #9F7237;
}

*,
*::before,
*::after {
    outline: none !important;
}

.title-content h4 {
    color: var(--gold);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s;
}

::-moz-selection {
    text-shadow: none;
    color: #ffffff;
}

::selection {
    text-shadow: none;
    color: #ffffff;
}

::-webkit-input-placeholder {
    color: #727272 !important;
    opacity: .7 !important;
}

::-moz-placeholder {
    color: #727272 !important;
    opacity: .7 !important;
}

:-ms-input-placeholder {
    color: #727272 !important;
    opacity: .7 !important;
}

::-ms-input-placeholder {
    color: #727272 !important;
    opacity: .7 !important;
}

::placeholder {
    color: #727272 !important;
    opacity: .7 !important;
}

iframe {
    max-width: 100%;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
}

input[type=checkbox] {
    margin-right: 5px;
    cursor: pointer;
}

label {
    margin: 0;
}

button,
button[type="submit"],
input[type="submit"] {
    border: none;
    cursor: pointer;
    -webkit-appearance: button;
    -moz-appearance: button;
}

select {
    width: 100%;
    max-width: 100%;
    color: #727272;
}

textarea {
    resize: none;
}

img {
    max-width: 100%;
    height: auto;
}

a,
a:hover,
a:active,
a:focus,
input,
input:hover,
input:focus,
input:active,
select,
textarea {
    text-decoration: none;
    outline: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    font-weight: 700;
    line-height: 1;
    text-transform: capitalize;
}

p:last-child {
    margin: 0;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 26px;
}

h4 {
    font-size: 17px;
}

h5 {
    font-size: 15px;
}

h6 {
    font-size: 14px;
}

.list-unstyled, .status-list, .list-invoice {
    margin: 0;
    padding: 0;
    list-style: none;
}

pre {
    border: 1px solid;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 0.8em 1.6em;
}

code {
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 3px;
    font-size: 85%;
    margin: 0;
    padding: .2em .4em;
}

html, body {
    overflow-x: hidden !important;
}

body {
    font-size: 15px;
    line-height: 1.466;
    color: #727272;
    background-color: #f0f0f0;
    -webkit-font-smoothing: antialiased;
}

    body.modal-open {
        height: 100vh;
        overflow-y: hidden;
    }

.main-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.border20 {
    border-radius: 20px;
}

/* ************************
   01.2: Padding/Margin
   ********************* */
.pt-60 {
    padding-top: 60px;
}

@media only screen and (max-width: 1024px) {
    .pt-60 {
        padding-top: 0;
    }
}

.pb-60 {
    padding-bottom: 60px;
}

@media only screen and (max-width: 1024px) {
    .pb-60 {
        padding-bottom: 0;
    }
}

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

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

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

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

.mb-40 {
    margin-bottom: 40px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-10 {
    margin-bottom: 10px;
}

/* Padding Left Right */
.pl-20 {
    padding-left: 20px;
}

.pr-20 {
    padding-right: 20px;
}

.pb-20 {
    padding-bottom: 20px;
}

.ml-35 {
    margin-left: 35px;
}

.ml-20 {
    margin-left: 20px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-40 {
    padding-top: 40px;
}

@media only screen and (max-width: 575px) {
    .pt-40 {
        padding-top: 20px;
    }
}

.p-30 {
    padding: 30px;
}

@media only screen and (max-width: 575px) {
    .p-30 {
        padding: 20px 15px;
    }
}

.p-40 {
    padding: 40px;
}

@media only screen and (max-width: 575px) {
    .p-40 {
        padding: 20px 15px;
    }
}

@media only screen and (min-width: 767px) {
    .mb-md-20 {
        margin-bottom: 20px;
    }
}

/* ************************
   01.3: Color
   ********************* */
.text_color, .dashboard-date input, .comment-action-links .comment-action-link, .dropdown-menu .dropdown-body .content .main-text, .dropdown-button > a.text_color:hover, .meta-info > div span span, .light-btn, .light-btn:hover, table.style--two thead th, table.cart_table tr td:nth-child(3) input, table.invoice-list-table.style-two td:nth-child(4), table.style-two.contact-list-table td:nth-child(4), table.invoice-list-table.style-two td:nth-child(5), table.style-two.contact-list-table td:nth-child(5), table.invoice-list.style-two td:nth-child(4), table.invoice-list.style-two td:nth-child(5), table.table-contextual .details-btn, .process-bar-wrapper.style--four .process-width, .theme-input-group.style--two input, .theme-input-group.prepend input, .search-form .theme-input-group input, .search-form .theme-input-group.header-search.theme-input-group input, .mail-list-item .mail-text .msg,
.main-mail .mail-text .msg, .mail-list-item:hover .mail-text .msg,
.main-mail:hover .mail-text .msg, .mail-compose .form-group .cc-btns .cc-btn, .modal-body .form-group .cc-btns .cc-btn, .message p, .list-invoice li a, .invoice.edit input, .contact-box .contact-body a, #projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-name, #projectTaskDetails .modal-content .checklist-new-item .checklist-add-controls .icon-close, #projectTaskDetails .modal-content .edit-actions textarea, #projectShareModal .modal-body .form-group .input-wrap .theme-input-style, .board-members-list li a, .board-labels-list li a, .board-labels-select-color li a, #shareModal .modal-content .modal-body .form-group .input-wrap .theme-input-style, .notifications a, .news a, .chip .chip-content .img, .timeline.style--two .event:before, .info-list li a, .about-nav-tab a {
    color: #727272;
}

    .text_color-bg, .comment-action-links .comment-action-link:not(:last-child):after, .btn-circle.style--three, .sidebar .sidebar-body ul.sub-menu li:before, .switch .control:after, .switch .check, .switch.dark input:checked ~ .control {
        background-color: #727272;
    }

.text_color-bo {
    border-color: #727272 !important;
}

.black, h1, 0
h2,
h3,
h4,
h5,
h6, .attach-file.change-card-attachment, .dashboard-date.style--five input, .dropdown-menu, .dropdown-menu a, .dropdown-menu .color-balls, .list-button li, .change-card-btn, .change-card-btn:hover, table.dh-table td, table.style--two td, table.order-list-table th, table.order-list-table td, table.cart_table tr td:first-child, table.style--four th, table.style--four td, table.style--five th, table.style--five td, table.style--five td .name, table.invoice-list-table th, table.contact-list-table th, table.invoice-list-table td, table.contact-list-table td, table.invoice-list th, table.invoice-list td, .ProgressBar-wrap .ProgressBar-percentage, .ProgressBar-wrap2 .ProgressBar-percentage, .progress-info div, .process-bar-wrapper .process-name, .process-bar-wrapper .process-width, .country-performance .process-bar-wrapper .process-name, .custom-select.style--two .theme-input-style, .sidebar .sidebar-body li.nav-category, .sidebar .sidebar-body li a, .sidebar .sidebar-body li.active > a.disabled, .sidebar .sidebar-body li:hover > a.disabled, .aside-body li a, .aside-body li.fc-event a, .aside-body li.fc-event a:hover, .cart-collaterals .shop_table .order-total th, .cart-collaterals .shop_table .order-total td, .cart-collaterals .shop_table.style-two th, .cart-collaterals .shop_table.style-two td, .cart-collaterals .shop_table.style-two .order-total th, .cart-collaterals .shop_table.style-two .order-total td, .message:hover p.time, .message.active p.time, .todo-list .todo-text .card-text, .add-new_task .label-text, .task-details .label-text, .invoice-header-left .dropdown-button > a, #projectTaskDetails .modal-content .project-main-title textarea, #projectTaskDetails .modal-content .checklist-new-item .checklist-add-controls .icon-close:hover, .note a, #example-vertical > .steps ul li.done a, #example-vertical > .steps ul li.current a, .notifications a p, .news a p, .timeline .event:before, .time_circles > div > span, .base-timer__label,
.base-timer__text, .p_info-list li, .skill-list li, .latest-update > a, .edit-skill label, .post-body p, .comments-area .single-comment .comment-content p, .nouislider-cat, .dragable-list > div {
    color: #002A4D;
    font-weight: bold;
}

.black-bg, body.sidebar-folded .sidebar .sidebar-body li.nav-category:before {
    background-color: #333333;
}

.black-bo {
    border-color: #333333 !important;
}

.white, .text-white *, .p_header-content *,
.text-white h1,
.p_header-content h1,
.text-white h2,
.p_header-content h2,
.text-white h3,
.p_header-content h3,
.text-white h4,
.p_header-content h4,
.text-white h5,
.p_header-content h5,
.text-white h6,
.p_header-content h6, .attach-file.style--two .upload-button, #menu button, .full-date, .list-button li:hover, .list-button li.active, .btn:hover, #example-vertical > .actions ul li a:hover[href="#next"], #example-vertical > .actions ul li a:hover[href="#finish"], .status-btn, .light-btn.ba, .light-btn.btn-circle:after, .light-btn.offcanvas-overlay, .aside-body li a.light-btn:after, .chat_aside .aside-header .light-btn.aside-header-bottom:after, .light-btn.message:after, .todo-list .light-btn.single-row:after, .board .board-cards .light-btn.board-card:before, #menu button.light-btn, .light-btn.btn:hover, #example-vertical > .actions ul li a.light-btn:hover[href="#next"], #example-vertical > .actions ul li a.light-btn:hover[href="#finish"], .light-btn.c2-bg, .dropdown-menu .dropdown-body a:hover .light-btn.change-card-btn.main-text, .dropdown-menu.style--two .dropdown-body a:hover .light-btn.change-card-btn.time, #example-vertical > .actions ul li a.light-btn.change-card-btn.preview[href="#next"], #example-vertical > .actions ul li a.light-btn.change-card-btn.preview[href="#finish"], #example-vertical > .actions ul li a.light-btn.change-card-btn.style--two[href="#next"], #example-vertical > .actions ul li a.light-btn.change-card-btn.style--two[href="#finish"], #example-vertical > .actions ul li a.light-btn.change-card-btn.s_alert[href="#next"], #example-vertical > .actions ul li a.light-btn.change-card-btn.s_alert[href="#finish"], .light-btn.change-card-btn, table.table-contextual .light-btn.change-card-btn.details-btn:hover, table.table-contextual .details-btn:hover i.light-btn.change-card-btn, .sidebar .sidebar-body li.active > a.light-btn.change-card-btn, .sidebar .sidebar-body li:hover > a.light-btn.change-card-btn, .fc-view > table thead th.light-btn.change-card-btn.fc-day-header, .notifications a:hover p.light-btn.change-card-btn, .news a:hover p.light-btn.change-card-btn, .select2-container--default .select2-selection--multiple .light-btn.change-card-btn.select2-selection__choice, .about-nav-tab a.light-btn.change-card-btn.active, .dragable-list > div.ui-sortable-helper i.light-btn.change-card-btn, .light-btn.change-card-btn:hover, .theme-input-group button.light-btn, .theme-input-group > a.light-btn, .theme-input-group button.light-btn.btn.style--three:hover, .theme-input-group > a.light-btn.btn.style--three:hover, .sidebar .sidebar-body li.light-btn.active:before, .sidebar .sidebar-body li.light-btn:hover:before, .labels .light-btn.label.add-label, .label-item .light-btn.label.add-label, .switch input:checked ~ .light-btn.control:after, .switch input:checked ~ .control .light-btn.check, .input-group.bootstrap-touchspin button.light-btn.btn, .light-btn.color-circle, .faq h5.light-btn:after, .light-btn.ba:hover, .light-btn.btn-circle:hover:after, .light-btn.offcanvas-overlay:hover, .aside-body li a.light-btn:hover:after, .chat_aside .aside-header .light-btn.aside-header-bottom:hover:after, .light-btn.message:hover:after, .todo-list .light-btn.single-row:hover:after, .board .board-cards .light-btn.board-card:hover:before, #menu button.light-btn:hover, .light-btn.c2-bg:hover, .dropdown-menu .dropdown-body a:hover .light-btn.change-card-btn.main-text:hover, .dropdown-menu.style--two .dropdown-body a:hover .light-btn.change-card-btn.time:hover, table.table-contextual .details-btn:hover i.light-btn.change-card-btn:hover, .sidebar .sidebar-body li.active > a.light-btn.change-card-btn:hover, .sidebar .sidebar-body li:hover > a.light-btn.change-card-btn:hover, .theme-input-group button.light-btn:hover, .theme-input-group > a.light-btn:hover, .labels .light-btn.label.add-label:hover, .label-item .light-btn.label.add-label:hover, .switch input:checked ~ .light-btn.control:hover:after, .switch input:checked ~ .control .light-btn.check:hover, .input-group.bootstrap-touchspin button.light-btn.btn:hover, .light-btn.color-circle:hover, .faq h5.light-btn:hover:after, .change-card-btn.c2, a.change-card-btn:hover, .dropdown-menu .dropdown-body a:hover .change-card-btn.main-text, .dropdown-menu.style--two .dropdown-body a:hover .change-card-btn.time, .change-card-btn.btn.preview, #example-vertical > .actions ul li a.change-card-btn.preview[href="#next"], #example-vertical > .actions ul li a.change-card-btn.preview[href="#finish"], .change-card-btn.btn.style--two, #example-vertical > .actions ul li a.change-card-btn.style--two[href="#next"], #example-vertical > .actions ul li a.change-card-btn.style--two[href="#finish"], .change-card-btn.btn.s_alert, #example-vertical > .actions ul li a.change-card-btn.s_alert[href="#next"], #example-vertical > .actions ul li a.change-card-btn.s_alert[href="#finish"], .change-card-btn.details-btn, table.table-condensed thead tr:nth-child(2) th.change-card-btn, table.table-contextual .change-card-btn.details-btn:hover, table.table-contextual .details-btn:hover i.change-card-btn, .sidebar .sidebar-body li.active > a.change-card-btn, .sidebar .sidebar-body li:hover > a.change-card-btn, .fc-view > table thead th.change-card-btn.fc-day-header, .notifications a:hover p.change-card-btn, .news a:hover p.change-card-btn, .change-card-btn.icon:hover, .select2-container--default .select2-selection--multiple .change-card-btn.select2-selection__choice, .change-card-btn.p_nav-link, .about-nav-tab a.change-card-btn.active, .change-card-btn.iconwrap, .dragable-list > div.ui-sortable-helper i.change-card-btn, .light-btn:hover, .light-btn.style--two:hover, table.table-inverse th, table.table-inverse td, .theme-input-style.style--four, textarea.theme-input-style.style--four, .theme-input-group button.btn.style--three:hover, .theme-input-group > a.btn.style--three:hover, #example-vertical > .actions ul li .theme-input-group > a.style--three:hover[href="#next"], #example-vertical > .actions ul li .theme-input-group > a.style--three:hover[href="#finish"], .notification-icon .count, .avatar .count, .chat_aside .aside-header .profile .content h4, .chat_aside .aside-header .profile .content .name, #search-tab ~ #search-box input, #projectTaskDetails .modal-content .cover-img .attach-file, .board-labels-list li .label, .color-circle, .profile-pic .upload-button, .cover-img .upload-button, .statistics-bounce-rate .state-content h3 {
    color: #ffffff;
}


.state-content h2 {
    font-weight: bold;
    letter-spacing: -2px;
}

.white-bg, .dropdown-menu .dropdown-body, .tasks_aside, .aside, .chat_aside, .statistic-row, .mail-list-item,
.main-mail, .fc-toolbar.fc-header-toolbar, .contact-box .contact-body, .project-box, .board .board-cards .board-card, .add-card, .form-element, .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up:after, .price-box.active .price-body, .timeline.style--two, .session-timeout, .add-work-form,
.work-update-form, .dragable-list > div {
    background-color: #ffffff;
}

.white-bo {
    border-color: #ffffff !important;
}

.c1, a, .dashboard-date.style--six input, .pagination ul li, .follow-btn, .link-btn, .theme-input-group button:hover, .theme-input-group > a:hover, .header-toogle-menu, .sidebar .sidebar-header .sidebar-toogle-pin, .aside-body li a.active, .aside-body li:hover a, .aside-body li.active a, .product-details-content .woocommerce-Price-amount, .mail-compose .form-group .input-wrap span, .modal-body .form-group .input-wrap span, .mail-compose .form-group .input-wrap input, .modal-body .form-group .input-wrap input {
    color: #0c2b4a;
}

::-moz-selection {
    background-color: var(--green);
}

.c1-bg, ::selection, .btn, #example-vertical > .actions ul li a[href="#next"], #example-vertical > .actions ul li a[href="#finish"], .light-btn.c2-bg:hover, .theme-input-group input, .theme-input-group button.btn.style--three, .theme-input-group > a.btn.style--three, .theme-input-group.input-wrap > a, .aside-body li a:after, .chat_aside .aside-header, .chat-footer div .submit {
    background-color: var(--green);
}

.c1-bo {
    border-color: #0c2b4a !important;
}

.c2, a:hover, .dropdown-menu .dropdown-body a:hover .main-text, .dropdown-menu.style--two .dropdown-body a:hover .time, .dropdown-menu.style--two .dropdown-body a:hover .main-text, .btn.preview, #example-vertical > .actions ul li a.preview[href="#next"], #example-vertical > .actions ul li a.preview[href="#finish"], .btn.style--two, #example-vertical > .actions ul li a.style--two[href="#next"], #example-vertical > .actions ul li a.style--two[href="#finish"], .btn.s_alert, #example-vertical > .actions ul li a.s_alert[href="#next"], #example-vertical > .actions ul li a.s_alert[href="#finish"], .details-btn, .light-btn, table.table-condensed thead tr:nth-child(2) th, table.table-contextual .details-btn:hover, table.table-contextual .details-btn:hover i, .sidebar .sidebar-body li.active > a, .sidebar .sidebar-body li:hover > a, .fc-view > table thead th.fc-day-header, .notifications a:hover p, .news a:hover p, .icon:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice, .p_nav-link, .about-nav-tab a.active, .iconwrap, .dragable-list > div.ui-sortable-helper i {
    color: var(--gold);
}

    .c2-bg, .ba, .btn-circle:after, .offcanvas-overlay, .aside-body li a:after, .chat_aside .aside-header .aside-header-bottom:after, .message:after, .todo-list .single-row:after, .board .board-cards .board-card:before, #menu button, .btn:hover, #example-vertical > .actions ul li a:hover[href="#next"], #example-vertical > .actions ul li a:hover[href="#finish"], .light-btn.c2-bg, .change-card-btn.c2, a.change-card-btn:hover, .dropdown-menu .dropdown-body a:hover .change-card-btn.main-text, .dropdown-menu.style--two .dropdown-body a:hover .change-card-btn.time, .change-card-btn.btn.preview, #example-vertical > .actions ul li a.change-card-btn.preview[href="#next"], #example-vertical > .actions ul li a.change-card-btn.preview[href="#finish"], .change-card-btn.btn.style--two, #example-vertical > .actions ul li a.change-card-btn.style--two[href="#next"], #example-vertical > .actions ul li a.change-card-btn.style--two[href="#finish"], .change-card-btn.btn.s_alert, #example-vertical > .actions ul li a.change-card-btn.s_alert[href="#next"], #example-vertical > .actions ul li a.change-card-btn.s_alert[href="#finish"], .change-card-btn.details-btn, .change-card-btn.light-btn, table.table-condensed thead tr:nth-child(2) th.change-card-btn, table.table-contextual .change-card-btn.details-btn:hover, table.table-contextual .details-btn:hover i.change-card-btn, .sidebar .sidebar-body li.active > a.change-card-btn, .sidebar .sidebar-body li:hover > a.change-card-btn, .fc-view > table thead th.change-card-btn.fc-day-header, .notifications a:hover p.change-card-btn, .news a:hover p.change-card-btn, .change-card-btn.icon:hover, .select2-container--default .select2-selection--multiple .change-card-btn.select2-selection__choice, .change-card-btn.p_nav-link, .about-nav-tab a.change-card-btn.active, .change-card-btn.iconwrap, .dragable-list > div.ui-sortable-helper i.change-card-btn, .change-card-btn.c2:hover, .change-card-btn.details-btn:hover, .change-card-btn.light-btn:hover, table.table-condensed thead tr:nth-child(2) th.change-card-btn:hover, .change-card-btn.p_nav-link:hover, .change-card-btn.iconwrap:hover, .theme-input-group button, .theme-input-group > a, .theme-input-group button:hover, .theme-input-group > a:hover, .theme-input-group button.btn.style--three:hover, .theme-input-group > a.btn.style--three:hover, .sidebar .sidebar-body li.active:before, .sidebar .sidebar-body li:hover:before, .labels .label.add-label, .label-item .label.add-label, .switch input:checked ~ .control:after, .switch input:checked ~ .control .check, .input-group.bootstrap-touchspin button.btn, .color-circle, .faq h5:after {
        background-color: var(--gold);
    }

.c2-bo {
    border-color: #5591cf !important;
}

.c3, .mail-compose .form-group .cc-btns .cc, .modal-body .form-group .cc-btns .cc, .mail-compose .form-group .cc-btns .cc-btn:hover, .modal-body .form-group .cc-btns .cc-btn:hover, .assign-tag, .assign-tag.front-end {
    color: #67CF94;
}

.c3-bg, .avatar-status.bg-teal:after, .process-bar-wrapper .process-bar.style--two, .board .board-cards .board-card.label-5:before {
    background-color: #67CF94;
}

.c3-bo {
    border-color: #67CF94 !important;
}

.c4, #projectLabelModal .modal-header .back-btn, .input-group.bootstrap-touchspin.disable input, #example-vertical > .steps ul li a, .time_circles > div > h4,
.base-timer__text {
    color: #aeaeae;
}

.c4-bg, #projectShareModal .modal-body .form-group .input-wrap .menu-icon span, #shareModal .modal-content .modal-body .form-group .input-wrap .menu-icon span, .switch input:disabled ~ .control:after, .switch input:disabled ~ .control .check, .switch .control, .switch.dark input:checked ~ .control:after, .input-group.bootstrap-touchspin.disable button.btn {
    background-color: #aeaeae;
}

.c4-bo, .switch.dark input:checked ~ .control {
    border-color: #aeaeae !important;
}

.c5 {
    color: #f0f0f0;
}

.c5-bg, #projectTaskDetails .modal-content .project-main-title textarea, #projectTaskDetails .modal-content .edit-actions, #projectTaskDetails .modal-content .edit-actions textarea {
    background-color: #f0f0f0;
}

.c5-bo {
    border-color: #f0f0f0 !important;
}

/* ************************
   02.1: Common Classes
   ********************* */
/* Transitions */
.trans2, .theme-input-group button, .theme-input-group > a {
    -webkit-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
}

.trans3, a, .ba, .btn-circle:after, .offcanvas-overlay, .aside-body li a:after, .chat_aside .aside-header .aside-header-bottom:after, .message:after, .todo-list .single-row:after, .board .board-cards .board-card:before, .dropdown-menu .dropdown-body .content .main-text, .dropdown-menu.style--two .dropdown-body .content .time, .dropdown-menu.style--two .dropdown-body .content .main-text, .list-button li, .pagination.style--two ul li svg path, .btn, #example-vertical > .actions ul li a[href="#next"], #example-vertical > .actions ul li a[href="#finish"], .follow-btn i, .link-btn i, .details-btn i, .details-btn svg, .light-btn, .change-card-btn, .remove-btn, table tr, table.style--three tr th, table.style--three tr td, .theme-input-style, .search-form .theme-input-group, .search-form .theme-input-group button, .search-form .theme-input-group.header-search, .search-form .theme-input-group.header-search.theme-input-group button, .header, .header .main-header, .header-toogle-menu, .header-icon, .sidebar, .sidebar .sidebar-header .sidebar-toogle-pin, .sidebar .sidebar-body ul.sub-menu li:before, .sidebar .sidebar-body li i, .sidebar .sidebar-body li.has-sub-item:after, .footer, .main-content, .aside-body li.less:after, .mail-list-item,
.main-mail, .mail-list-item .mail-text .msg,
.main-mail .mail-text .msg, .mail-compose .form-group .cc-btns .cc-btn, .modal-body .form-group .cc-btns .cc-btn, .message, .message p, .todo-list .single-row, .todo-list .single-row.border-bottom.change-border-color, .todo-list .todo-text .card-text, .assign_to .assign-content, .assign-tag, .assign-btn svg line, #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details:after, #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details .icon-delete, #projectTaskDetails .modal-content .checklist-new-item .checklist-add-controls .icon-close, .file-attachments .attachment .attachment-close, .file .dropdown-button, .notifications a p, .news a p, .icon, .price-box, .price-body, .profile-pic:after, .profile-pic .upload-button, .cover-img:after, .cover-img .upload-button, .p_overview-list li .dropdown-button,
.p_work-list li .dropdown-button,
.p_education-list li .dropdown-button, .add-work-form,
.work-update-form, .post-footer .love svg path {
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.trans4 {
    -webkit-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    transition: 0.4s ease;
}

.trans5 {
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}

/* Font Family */
body,
.pt_sans {
    font-family: "Cairo", sans-serif;
}

/* Font Weight */
.regular, .meta-info > div span span, .btn.style--two.orange, #example-vertical > .actions ul li a.style--two.orange[href="#next"], #example-vertical > .actions ul li a.style--two.orange[href="#finish"], table.style--two thead th, .aside-body li.lavel:hover a, .aside-body li.lavel.active a, .form-row label.regular, .fc-event-container .fc-content .fc-title, .fc-day-top.fc-today:after, #projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-name:before {
    font-weight: 400;
}

.medium {
    font-weight: 500;
}

.semi-bold {
    font-weight: 600;
}

.bold, .dashboard-date.style--five > i, .dropdown-menu.style--four a:hover, .dropdown-menu.style--four a.selected, .avatar, .full-date, .pagination ul li, .follow-btn, .link-btn, .details-btn, table.style--two td, table.cart_table tr td:first-child, table.cart_table tr td:last-child span, table.invoice-list-table.style-two td:nth-child(4), table.style-two.contact-list-table td:nth-child(4), table.invoice-list-table.style-two td:nth-child(5), table.style-two.contact-list-table td:nth-child(5), table.invoice-list.style-two td:nth-child(4), table.invoice-list.style-two td:nth-child(5), .ProgressBar-wrap .ProgressBar-percentage, .ProgressBar-wrap2 .ProgressBar-percentage, .progress-info div:not(:first-child), .process-bar-wrapper.style--four .process-width, .notification-icon .count, .avatar .count, .sidebar .sidebar-body li.nav-category, #apex_radar-chart .apexcharts-title-text, .statistic-row.days, .product-details-content .product_title, .product-details-content .woocommerce-Price-amount, .product-details-content .woocommerce-product-details__short-description h5, .form-row label, .cart-collaterals .shop_table th, .cart-collaterals .shop_table td, .mail-list-item:hover .mail-text .msg,
.main-mail:hover .mail-text .msg, .message:hover p, .message.active p, .assign_to .assign-content, .assign-tag .tag-text, .add-new_task .label-text, .task-details .label-text, .fc table, #projectTaskDetails .modal-content .project-main-title textarea, #projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-name, #smartwizard .nav li a, #example-vertical > .steps ul li a, #example-vertical > .actions ul li a[href="#previous"], .chip .chip-content > div, .chip .chip-content .img, .color-circle, .topic, .timeline .event:before, .base-timer__label,
.base-timer__text, .p_nav-link, .info-list li, .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button {
    font-weight: 700;
}

/* Border Radius */
.radius-7 {
    border-radius: 7px !important;
}

.radius-5, .dashboard-date.style--four, .dashboard-date.style--five, .tag_color, table.cart_table tr td:nth-child(3) span, table.cart_table tr td:nth-child(3) input, table.cart_table tr td:nth-child(4) span, table.cart_table tr td:nth-child(4) input, .theme-input-style.style--three, .theme-input-style.style--four, .search-form .theme-input-group input.redius-5, .search-form .theme-input-group .color-pic input, .color-pic .search-form .theme-input-group input, .todo-list .single-row:after, .fc-bg table tbody td, .fc-view > table thead th.fc-day-header, .fc-toolbar.fc-header-toolbar, .labels .label, .label-item .label, #projectTaskDetails .modal-content .project-main-title textarea, #projectTaskDetails .modal-content .cover-img .attach-file, #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details, #projectTaskDetails .modal-content .checklist-new-item .theme-input-style, #projectTaskDetails .modal-content .edit-actions textarea, #projectChecklistModal .checklist-copy-source, .project-board-select-wrap, .input-group.addon .input-group-prepend .input-group-text,
.input-group.addon .input-group-append .input-group-text {
    border-radius: 15px;
}

.radius-10, .dashboard-date.style--two, textarea.theme-input-style, textarea.theme-input-style.style--two, .custom-select.style--two, .message-item .bubble p {
    border-radius: 10px;
}

.radius-50, .attach-file.style--two .upload-button, .attach-file.style--three, .dashboard-date, .full-date, .list-button li, .btn, #example-vertical > .actions ul li a[href="#next"], #example-vertical > .actions ul li a[href="#finish"], .status-btn, .process-bar-wrapper, .process-bar-wrapper .process-bar, .theme-input-style.style--two, .custom-select, .theme-input-group.style--two input, .theme-input-group.prepend input, .search-form .theme-input-group input, .search-form .theme-input-group button, .search-form .theme-input-group.header-search.theme-input-group input, .search-form .theme-input-group.header-search.theme-input-group button, .d_input-group input, .header-icon, .mail-compose .form-group .input-wrap, .modal-body .form-group .input-wrap, .mail-compose .form-group .input-wrap span, .modal-body .form-group .input-wrap span, .assign_to .assign-content, .assign-tag, .priority .assign-menu, .task-details .show-date, .fc-toolbar.fc-header-toolbar .fc-left .fc-today-button, .fc-toolbar.fc-header-toolbar .fc-button-group .fc-button, .invoice-header-left .dropdown-button > a, .board .board-cards .board-card:before, #projectShareModal .modal-body .form-group .input-wrap, #shareModal .modal-content .modal-body .form-group .input-wrap, .switch .control, .chip .chip-content, .profile-pic .upload-button, .cover-img .upload-button {
    border-radius: 50px;
}

    .radius, .attach-file, .attach-file .file-input, .attach-file.style--two, .dropdown-menu.style--three a span, .dropdown-menu.style--four a span, .avatar-status, .avatar-status:after, .upload-icon, .avatar, .avatar img, .img-60, .img-50, .img-40, .img-30, .color-balls .color, .member a, .member a img, .pagination ul li.current, .btn-circle, .btn-circle:after, .btn-home, .download-btn,
    .print-btn, .close-btn, .remove-btn, table.style--four td .country-flag, .custom-checkbox .checkmark, .main-header-user .user-profile img, .menu-icon span, .notification-icon .count, .avatar .count, .statistic-row > div:first-child img, .color-group .color, .mail-list-item .avatar img,
    .main-mail .avatar img, .mail-compose .form-group .cc-btns .cc, .modal-body .form-group .cc-btns .cc, .aside-body img, .aside-header img, .video-call, .chat-footer .voice-msg,
    .chat-footer .attach-file,
    .chat-footer .submit, .audio-call, .assign_to .assign-avatar, .assign-tag .assign-avatar, .assign-btn, #fullCalModal .calendar-modal-Event .color, .labels .label.add-label, .label-item .label.add-label, #projectTaskDetails .modal-content .modal-close, .file-attachments .attachment .attachment-close, .switch .control:after, .switch .check, #smartwizard .nav li:last-child a, .chip .chip-content .img, .color-circle, .faq h5:after, .profile-nav-tabs li .chat, .p_overview-list li .img img,
    .p_work-list li .img img,
    .p_education-list li .img img, .post-controls > div {
        border-radius: 50%;
    }

        .radius-0, .attach-file.change-card-attachment, .dropdown-menu, .card, #contactAddModal .modal-content,
        #contactEditModal .modal-content, #projectTaskDetails .modal-content .dashboard-date, .input-group.addon .input-group-prepend .input-group-text:not(:first-child),
        .input-group.addon .input-group-append .input-group-text:not(:first-child) {
            border-radius: 0 !important;
        }

    .border-0, .color-pic input, .card, table.style--two thead th, table.order-list-table thead th, table.cart_table thead th, table.cart_table tr td:nth-child(3) input, table.style--four th, table.style--four td, table.style--five th, table.style--five td, table.invoice-list-table.style-two th, table.style-two.contact-list-table th, table.invoice-list.style-two th, .form-control, .custom-select, .input-group-text, .chat_aside .aside-header .aside-header-bottom .nav-tabs, .mail-compose .form-group .input-wrap input, .modal-body .form-group .input-wrap input, #search-tab ~ #search-box input, .fc-bg table tbody, .fc-bg table tbody td, .fc-bg table tbody td.fc-day, .fc-view > table thead th.fc-day-header, .fc-view > table tbody td, .fc-view > table thead td, .fc-button, #createEventModal .modal-content, #projectTaskDetails .modal-content, #projectTaskDetails .modal-content .project-main-title textarea, #projectTaskDetails .modal-content .edit-actions textarea, #projectMemberModal .modal-content, #projectLabelModal .modal-content, #projectChecklistModal .modal-content, #projectMoveModal .modal-content, #projectCopyModal .modal-content, #projectShareModal .modal-content, .project-board-select-wrap select, #shareModal .modal-content, .input-group.addon .input-group-prepend .input-group-text,
    .input-group.addon .input-group-append .input-group-text, .input-group.addon .form-control, .input-group.bootstrap-touchspin button.btn, .input-group.bootstrap-touchspin .input-group-text, #smartwizard, #smartwizard .nav, .select2-container--default.select2-container--focus .select2-selection--multiple,
    .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice button {
        border: 0 !important;
    }

/* Box Shadow */
.box-shadow, .dropdown-menu, .tasks_aside, .aside, .chat_aside, .compose-wrap, .todo-list .single-row:hover, #createEventModal .modal-content, #fullCalModal .modal-content, #contactAddModal .modal-content,
#contactEditModal .modal-content, #projectTaskDetails .modal-content, #projectMemberModal .modal-content, #projectLabelModal .modal-content, #projectChecklistModal .modal-content, #projectMoveModal .modal-content, #projectCopyModal .modal-content, #projectShareModal .modal-content, #shareModal .modal-content {
    -webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.05);
}

.box-shadow2, .message:hover, .message.active {
    -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
}

.no-shadow, .btn.preview, #example-vertical > .actions ul li a.preview[href="#next"], #example-vertical > .actions ul li a.preview[href="#finish"], .btn.style--two, #example-vertical > .actions ul li a.style--two[href="#next"], #example-vertical > .actions ul li a.style--two[href="#finish"], .btn.s_alert, #example-vertical > .actions ul li a.s_alert[href="#next"], #example-vertical > .actions ul li a.s_alert[href="#finish"], .btn-circle.done, .form-control, .custom-select, .fc-button, #projectShareModal .modal-body .form-group .input-wrap .theme-input-style, #projectShareModal .modal-body .form-group.comment textarea.theme-input-style, .input-group.addon .form-control, .input-group.bootstrap-touchspin button.btn, .dragable-btn a {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.list-inline li {
    display: inline-block;
}

/* Attach file */
.attach-file {
    width: 50px;
    height: 50px;
    background-color: #FEE7FF;
    color: #E580FD;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    .attach-file i {
        font-size: 22px;
    }

    .attach-file .fake-btn {
        line-height: 1;
        position: absolute;
        left: 60px;
    }

    .attach-file .file-input {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }

    .attach-file.style--two {
        width: 200px;
        height: 200px;
        background-color: #F5F5F5;
        overflow: hidden;
        position: relative;
    }

        .attach-file.style--two .upload-button {
            /*background-color: rgba(0, 0, 0, 0.5);*/
            position: relative;
            /*padding: 8px 15px;*/
            cursor: pointer;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

        .attach-file.style--two .profile-avatar {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

    .attach-file.style--three {
        width: auto;
        height: auto;
        padding: 5px 15px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        background-color: #CCF5F8;
        color: #09D1DE;
    }

    .attach-file.change-card-attachment {
        width: 100%;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        height: 32px;
        cursor: pointer;
    }

.cover-img {
    background-color: #f0f0f0;
    width: 100%;
}

/* Others */
.ov-hidden, .main-wrapper, .sidebar {
    overflow: hidden;
}

.ovx-hidden {
    overflow-x: hidden;
}

.py-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.pointer {
    cursor: pointer;
}

/* Before After */
.ba, .offcanvas-overlay, .aside-body li a:after, .chat_aside .aside-header .aside-header-bottom:after, .message:after, .todo-list .single-row:after, .board .board-cards .board-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* Bg */
.light-bg {
    background-color: #FFFCF6;
}

/* Bg Img */
.bg-img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Dashboard Date */
.dashboard-date {
    padding: 0px 15px;
    height: 30px;
    max-width: 170px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #f0f0f0;
    cursor: pointer;
}

    .dashboard-date .input-group-addon {
        margin-right: 10px;
        position: relative;
        top: -2px;
    }

    .dashboard-date input {
        border: none;
        height: 28px;
        position: relative;
        width: 100%;
        background-color: #f0f0f0;
    }

    .dashboard-date.style--two {
        height: 40px;
        max-width: 310px;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .dashboard-date.style--three {
        max-width: 186px;
    }

    .dashboard-date.style--four {
        max-width: 100%;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding: 20px;
    }

        .dashboard-date.style--four input {
            width: 100%;
        }

    .dashboard-date.style--six {
        background-color: #a1c5df;
        max-width: 190px;
        height: 35px;
    }

        .dashboard-date.style--six input {
            background-color: #a1c5df;
        }

.color-pic input {
    padding: 0;
    width: 75px;
    height: 40px;
}

.comment-action-links .comment-action-link {
    display: inline-block;
}

    .comment-action-links .comment-action-link:not(:last-child) {
        margin-right: 14px;
        position: relative;
    }

        .comment-action-links .comment-action-link:not(:last-child):after {
            width: 5px;
            height: 0.5px;
            position: absolute;
            right: -12px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            content: "";
        }

/* Dropdown Menu */
.dropdown-menu {
    font-size: 15px;
    background-clip: padding-box;
    border: none;
    padding: 11px 0 14px;
    min-width: 135px;
}

    .dropdown-menu a, .dropdown-menu .color-balls {
        display: block;
        width: 100%;
        padding: 4px 16px;
        clear: both;
        font-weight: 400;
        text-transform: capitalize;
    }

        .dropdown-menu a:not(:last-child), .dropdown-menu .color-balls:not(:last-child) {
            margin-bottom: 5px;
        }

    .dropdown-menu .dropdown-header {
        background-color: #FAFAFA;
        padding: 5px 20px;
    }

        .dropdown-menu .dropdown-header h5 {
            font-size: 16px;
        }

        .dropdown-menu .dropdown-header .text-mute {
            color: #FE5280;
            width: auto;
            padding: 0;
            font-size: 12px;
        }

    .dropdown-menu .dropdown-body {
        padding: 8px 20px;
    }

        .dropdown-menu .dropdown-body .figure {
            width: 50px;
            height: 50px;
            margin-right: 13px;
            position: relative;
        }

        .dropdown-menu .dropdown-body .content p {
            margin: 0;
        }

        .dropdown-menu .dropdown-body .content .name {
            margin-right: 20px;
        }

        .dropdown-menu .dropdown-body .content .time {
            font-size: 12px;
            color: #aeaeae;
        }

        .dropdown-menu .dropdown-body .content .main-text {
            font-size: 13px;
            line-height: 1.53;
        }

        .dropdown-menu .dropdown-body a {
            padding: 12px 0px 18px;
            margin-bottom: 0;
        }

            .dropdown-menu .dropdown-body a:not(:last-child) {
                border-bottom: 1px solid #F5F5F5;
            }

            .dropdown-menu .dropdown-body a:last-child {
                padding-bottom: 5px;
            }

    .dropdown-menu.style--two {
        min-width: 300px;
    }

        .dropdown-menu.style--two .dropdown-body .content .time {
            font-size: 12px;
            color: #aeaeae;
        }

        .dropdown-menu.style--two .dropdown-body .content .main-text {
            font-size: 15px;
        }

        .dropdown-menu.style--two .dropdown-body a {
            padding: 15px 0px 10px;
        }

    .dropdown-menu.style--three a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .dropdown-menu.style--three a span {
            width: 20px;
            height: 20px;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 3px;
            background-color: #efefef;
            margin-right: 12px;
        }

    .dropdown-menu.style--four a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 14px;
        padding: 0 10px;
    }

        .dropdown-menu.style--four a:hover {
            color: #FFB959;
        }

        .dropdown-menu.style--four a.selected {
            color: #67CF94;
        }

        .dropdown-menu.style--four a span {
            width: 20px;
            height: 20px;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 3px;
            background-color: #efefef;
            margin-right: 12px;
        }

    .dropdown-menu.checkbox > div {
        position: relative;
        padding: 5px 10px 5px 40px;
        cursor: pointer;
    }

        .dropdown-menu.checkbox > div .custom-checkbox {
            left: 10px;
        }

            .dropdown-menu.checkbox > div .custom-checkbox .checkmark {
                width: 15px;
                height: 15px;
                padding: 0;
            }

                .dropdown-menu.checkbox > div .custom-checkbox .checkmark:after {
                    left: 5px;
                    top: 2px;
                }

.avatar-status {
    position: absolute;
    width: 14px;
    height: 14px;
    right: -2px;
    bottom: 0px;
    background-color: #ffffff;
}

    .avatar-status:after {
        width: 8px;
        height: 8px;
        position: absolute;
        content: "";
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #97a3b9;
    }

    .avatar-status.bg-warn:after {
        background-color: #FFB959;
    }

    .avatar-status.bg-dangers:after {
        background-color: #FC7383;
    }

    .avatar-status.style--two {
        right: 1px;
        top: 45px;
    }

.upload-icon {
    width: 90px;
    height: 90px;
    border: 2px solid #5591cf;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #a1c5df;
}

.meta-info > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .meta-info > div:not(:last-child) {
        margin-bottom: 14px;
    }

    .meta-info > div span {
        text-transform: capitalize;
        display: inline-block;
    }

        .meta-info > div span:first-child {
            width: 120px;
        }

@media only screen and (max-width: 575px) {
    .meta-info > div span:first-child {
        width: 90px;
    }
}

.meta-info > div span span {
    display: block;
}

.modal-close {
    cursor: pointer;
}

sub, sup {
    font-size: 60%;
}

.font-12, .comment-action-links .comment-action-link, .meta-info > div span span, #menu button, .theme-input-style.small, .custom-select.style--two.small .theme-input-style, .notifications a span.time, .news a span.time, .chip .chip-content, .icon__name {
    font-size: 12px !important;
}

.font-13 {
    font-size: 13px !important;
}

.font-14, .attach-file.change-card-attachment i, .meta-info > div span, .pagination ul li, .change-card-btn, .light-btn, table.invoice-list-table tbody td .details-btn, table.contact-list-table tbody td .details-btn, table.invoice-list tbody td .details-btn, .progress_22 .ProgressBar-wrap2 .ProgressBar-percentage, .fc-toolbar.fc-header-toolbar .fc-left .fc-today-button, .fc-toolbar.fc-header-toolbar .fc-button-group .fc-button, #fullCalModal .calendar-modal-location,
#fullCalModal .calendar-modal-visibility, #fullCalModal .calendar-modal-Event, .invoice-header-left .dropdown-button > a, #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item, #projectMemberModal .modal-content .modal-body .theme-input-style, #projectLabelModal .modal-content .modal-body .theme-input-style, #projectChecklistModal .modal-content .modal-body .theme-input-style, #projectMoveModal .modal-content .modal-body .theme-input-style, #projectCopyModal .modal-content .modal-body .theme-input-style, #projectShareModal .modal-content .modal-body .theme-input-style, .checklist-items .checklist-item .item, .board-members-list li a, #shareModal .modal-content .modal-body .form-group .input-wrap .theme-input-style, .chip .chip-content .img, .color-circle, .timeline .event:before, .select2-container--default .select2-selection--multiple .select2-selection__choice, .time_circles > div > h4, .info-list li, .about-myself textarea, .edit-skill .form-control, .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button {
    font-size: 14px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-17 {
    font-size: 17px !important;
}

.font-20, .progress_23 .ProgressBar-wrap2 .ProgressBar-percentage, .theme-input-style.large, .custom-select.style--two.large .theme-input-style, .fc-toolbar.fc-header-toolbar .fc-left h2, #projectTaskDetails .modal-content .project-main-title textarea, #projectTaskDetails .modal-content .edit-actions .icon-close, .topic {
    font-size: 20px !important;
}

.font-30 {
    font-size: 30px !important;
}

.font-40 {
    font-size: 40px !important;
}

.mr-10 {
    margin-right: 10px;
}

.ml-10 {
    margin-left: 10px !important;
}

.mr-20 {
    margin-right: 20px;
}

.mr-30 {
    margin-right: 30px;
}

.mt-n30 {
    margin-top: -30px;
}

.pt-20 {
    padding-top: 20px !important;
}

.soft-pink, .follow-btn.soft-pink, .link-btn.soft-pink, .close-btn, .close-btn:hover {
    color: #FE5280;
}

.bg-pink {
    background-color: #E580FD !important;
}

.bg-light-blue {
    background-color: #5591cf !important;
}

.bg-light-info {
    background-color: #09D1DE !important;
}

.bg-light-success {
    background-color: #67CF94 !important;
}

.bg-light-danger {
    background-color: #FC7383 !important;
}

.l-height1 {
    line-height: 1.1;
}

.bg-c2-light {
    background-color: #ECF3FD;
}

.max-h-600 {
    max-height: 600px;
}

.h-20 {
    min-height: 20px;
}

.h-350 {
    height: 350px;
}

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

.square-75 {
    width: 75px;
    height: 75px;
    overflow: hidden;
}

.flex-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
}

.flex-2 {
    -webkit-box-flex: 2 !important;
    -ms-flex: 2 !important;
    flex: 2 !important;
}

.flex-grow {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.flex-shrink {
    -ms-flex-negative: 1;
    flex-shrink: 1;
}

.flex-basis {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
}

.mb-n72 {
    margin-bottom: -72px;
}

@media only screen and (max-width: 575px) {
    .mb-n72 {
        margin: 0;
    }
}

.right-top {
    position: absolute;
    right: 15px;
    top: 15px;
}

/* Avatar */
.avatar {
    width: 40px;
    height: 40px;
    background-color: #a1c5df;
    color: var(--gold);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    .avatar img {
        -ms-flex-item-align: end;
        align-self: flex-end;
    }

    .avatar.img-70, .avatar.img-70 img {
        width: 70px;
        height: 70px;
    }

    .avatar.img-60, .avatar.img-60 img {
        width: 60px;
        height: 60px;
    }

    .avatar.img-50, .avatar.img-50 img {
        width: 50px;
        height: 50px;
    }

    .avatar.img-35, .avatar.img-35 img {
        width: 35px;
        height: 35px;
    }

    .avatar.img-25, .avatar.img-25 img {
        width: 25px;
        height: 25px;
    }

/* Divider */
.divider {
    display: block;
    text-align: center;
    overflow: hidden;
    margin: 26px 0;
}

    .divider .divider-text {
        position: relative;
        display: inline-block;
        padding: 0 1rem;
        background-color: #FFF;
    }

        .divider .divider-text:before, .divider .divider-text:after {
            content: '';
            position: absolute;
            top: 50%;
            width: 9999px;
            border-top: 1px solid #DFE3E7;
        }

        .divider .divider-text:before {
            right: 100%;
        }

        .divider .divider-text:after {
            left: 100%;
        }

    .divider.divider-left .divider-text {
        float: left;
        padding-left: 0;
    }

    .divider.divider-left-center .divider-text {
        left: -25%;
    }

    .divider.divider-right-center .divider-text {
        right: -25%;
    }

    .divider.divider-right .divider-text {
        float: right;
        padding-right: 0;
    }

    .divider.divider-primary .divider-text:before, .divider.divider-primary .divider-text:after {
        border-color: var(--gold);
    }

    .divider.divider-success .divider-text:before, .divider.divider-success .divider-text:after {
        border-color: #67CF94;
    }

    .divider.divider-danger .divider-text:before, .divider.divider-danger .divider-text:after {
        border-color: #FC7383;
    }

    .divider.divider-info .divider-text:before, .divider.divider-info .divider-text:after {
        border-color: #09D1DE;
    }

    .divider.divider-warning .divider-text:before, .divider.divider-warning .divider-text:after {
        border-color: #FFB959;
    }

    .divider.divider-dark .divider-text:before, .divider.divider-dark .divider-text:after {
        border-color: #727272;
    }

    .divider.divider-light .divider-text:before, .divider.divider-light .divider-text:after {
        border-color: #F5F5F5;
    }

    .divider.divider-dotted .divider-text:before, .divider.divider-dotted .divider-text:after {
        border-style: dotted;
        border-width: 1px;
    }

    .divider.divider-dashed .divider-text:before, .divider.divider-dashed .divider-text:after {
        border-style: dashed;
        border-width: 1px;
    }

.index-9 {
    z-index: 9;
}

.mx-1350 {
    max-width: 1350px;
    margin: 0 auto;
}

.mb-n130 {
    margin-bottom: -130px;
}

@media only screen and (max-width: 1024px) {
    .mb-n130 {
        margin-bottom: -80px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-n130 {
        margin-bottom: 0px;
    }
}

.legend > table {
    width: auto;
}

    .legend > table td {
        padding: 0;
        padding-left: 5px;
    }

#menu button {
    display: block;
    padding: 5px 10px;
    width: 100%;
    border-radius: 3px;
}

.mxw-550 {
    max-width: 550px;
    margin: 0 auto;
}

.mn-vh-100 {
    min-height: calc(100vh - 70px) !important;
}

.vh-100 {
    height: 100vh;
}

.bg-primary {
    background-color: #5591cf !important;
}

.bg-success {
    background-color: #67CF94 !important;
}

.bg-info {
    background-color: #09D1DE !important;
}

.bg-warning {
    background-color: #FFB959 !important;
}

.bg-danger {
    background-color: #FC7383 !important;
}

.bg-dark {
    background-color: #727272 !important;
}

.bg-primary-light {
    background-color: #a1c5df !important;
}

.bg-success-light {
    background-color: #DBF7E8 !important;
}

.bg-info-light {
    background-color: #CCF5F8 !important;
}

.bg-pink-light {
    background-color: #FEE7FF !important;
}

.bg-warning-light {
    background-color: #FFF4E6 !important;
}

.bg-danger-light {
    background-color: #FFE2E6 !important;
}

.bg-dark-light {
    background-color: #f5f5f5 !important;
}

.text-primary {
    color: #5591cf !important;
}

.text-success, .price-body ul li i {
    color: #67CFA2 !important;
}

a.text-success:hover {
    color: #67CFA2 !important;
}

.text-info {
    color: #09D1DE !important;
}

a.text-info:hover {
    color: #09D1DE !important;
}

.text-warning, .base-timer__path-remaining.warn {
    color: #FFB959 !important;
}

a.text-warning:hover, a.base-timer__path-remaining.warn:hover {
    color: #FFB959 !important;
}

.text-danger, .price-body ul li i.text-danger, .select2-container--default .select2-selection--multiple .select2-selection__choice button, .base-timer__path-remaining.danger {
    color: #FC7383 !important;
}

a.text-danger:hover, a.base-timer__path-remaining.danger:hover {
    color: #FC7383 !important;
}

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

a.text-dark:hover {
    color: #727272 !important;
}

.img-60 {
    width: 60px;
    height: 60px;
    min-width: 60px;
}

.img-50 {
    width: 50px;
    height: 50px;
    min-width: 50px;
}

.img-40 {
    width: 40px;
    height: 40px;
    min-width: 40px;
}

.img-30 {
    width: 30px;
    height: 30px;
    min-width: 30px;
}

.full-date {
    display: inline-block;
    padding: 5px 10px;
    background-color: #D2BB00;
    line-height: 1;
}

/* Star Rating */
.star-rating svg {
    cursor: pointer;
}

    .star-rating svg:not(:last-child) {
        margin-right: 4px;
    }

/* List Year */
.list-button li {
    background-color: #FFF4E6;
    padding: 3px 15px;
    font-size: 14px;
    cursor: pointer;
}

    .list-button li:not(:last-child) {
        margin-right: 10px;
    }

@media only screen and (max-width: 767px) {
    .list-button li:not(:last-child) {
        margin-bottom: 5px;
    }
}

.list-button li:hover, .list-button li.active {
    background-color: #67CF94;
}

/* Tag Colors */
.tag_color {
    width: 5px;
    height: 10px;
    display: inline-block;
    margin-right: 6px;
    position: relative;
    top: -1px;
}

    .tag_color.urgent, .tag_color.products {
        background-color: #FFB959;
    }

    .tag_color.important, .tag_color.works, .tag_color.friend {
        background-color: #FC7383;
    }

    .tag_color.not_important, .tag_color.family, .tag_color.new_project {
        background-color: #67CF94;
    }

    .tag_color.not_urgent, .tag_color.friends, .tag_color.event {
        background-color: #C491FF;
    }

    .tag_color.average, .tag_color.design, .tag_color.birthday {
        background-color: #09D1DE;
    }

    .tag_color.work {
        background-color: #FFB959;
    }

    .tag_color.others, .tag_color.anniversary {
        background-color: #4F9DF8;
    }

    .tag_color.meeting {
        background-color: var(--gold);
    }

    .tag_color.travel {
        background-color: #FF8EF0;
    }

    .tag_color.rest {
        background-color: #D2BB00;
    }

/* Color Balls */
.color-balls .color {
    width: 12px;
    height: 12px;
    display: inline-block;
    cursor: pointer;
    margin-right: 2px;
}

    .color-balls .color.color1 {
        background-color: #FBF6D0;
    }

    .color-balls .color.color2 {
        background-color: #CCF5F8;
    }

    .color-balls .color.color3 {
        background-color: #a1c5df;
    }

    .color-balls .color.color4 {
        background-color: #FEE7FF;
    }

    .color-balls .color.color5 {
        background-color: #ECF3FD;
    }

    .color-balls .color.color6 {
        background-color: #DBF7E8;
    }

    .color-balls .color.color7 {
        background-color: #FFF4E6;
    }

    .color-balls .color.color8 {
        background-color: #FFE2E6;
    }

/* Member */
.member {
    line-height: 1;
}

    .member a {
        border: 2px solid #ffffff;
        width: 30px;
        height: 30px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .member a img {
        max-width: 26px;
    }
}

.member a:not(:last-child) {
    margin-right: -10px;
}

.member a.btn-circle {
    border: 0;
}

.member.style--two a {
    width: 40px;
    height: 40px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .member.style--two a img {
        min-width: 36px;
    }
}

/* Apply style ONLY on IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ie-flex-basis {
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .animated.infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

@-webkit-keyframes bounce {
    from, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce {
    from, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
}

@-webkit-keyframes flash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@keyframes flash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

@-webkit-keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}

@-webkit-keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

@keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.headShake {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake;
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

@-webkit-keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}

@-webkit-keyframes wobble {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes wobble {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

@-webkit-keyframes jello {
    from, 11.1%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        -webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
        transform: skewX(0.39063deg) skewY(0.39063deg);
    }

    88.8% {
        -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
        transform: skewX(-0.19531deg) skewY(-0.19531deg);
    }
}

@keyframes jello {
    from, 11.1%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        -webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
        transform: skewX(0.39063deg) skewY(0.39063deg);
    }

    88.8% {
        -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
        transform: skewX(-0.19531deg) skewY(-0.19531deg);
    }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

@-webkit-keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

.bounceOut {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

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

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes flip {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes flip {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@-webkit-keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.flipOutX {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.flipOutY {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
    from {
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

@keyframes lightSpeedOut {
    from {
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

@-webkit-keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

@keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

@keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-name: hinge;
    animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox;
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}

@-webkit-keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* ************************
   02.3: Pagination
   ********************* */
.pagination ul li.current {
    width: 30px;
    height: 30px;
    background-color: #a1c5df;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.pagination ul li a {
    padding: 8px;
}

.pagination > p {
    color: #aeaeae;
}

.pagination.style--two ul {
    margin: 0;
}

    .pagination.style--two ul li svg {
        width: 10px;
        height: 15px;
    }

        .pagination.style--two ul li svg path {
            stroke: #a1c5df;
        }

    .pagination.style--two ul li a.current svg path {
        stroke: #5591cf;
    }

/* ************************
02.4: Buttons
********************* */
/* Default Btn */
.btn, #example-vertical > .actions ul li a[href="#next"], #example-vertical > .actions ul li a[href="#finish"] {
    padding: 17px 24px;
    font-weight: 700;
    line-height: 1;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    color: #ffffff;
    border: none;
    text-transform: capitalize;
    outline: 0 !important;
    -webkit-box-shadow: 0 5px 10px rgba(4, 0, 252, 0.2) !important;
    box-shadow: 0 5px 10px rgba(4, 0, 252, 0.2) !important;
}

    .btn svg, #example-vertical > .actions ul li a[href="#next"] svg, #example-vertical > .actions ul li a[href="#finish"] svg {
        position: relative;
        width: 15px;
        height: 15px;
        top: -2px;
    }

    .btn.preview, #example-vertical > .actions ul li a.preview[href="#next"], #example-vertical > .actions ul li a.preview[href="#finish"] {
        background-color: #a1c5df;
    }

        .btn.preview:hover, #example-vertical > .actions ul li a.preview:hover[href="#next"], #example-vertical > .actions ul li a.preview:hover[href="#finish"] {
            background-color: #e3e0ff;
        }

    .btn.long, #example-vertical > .actions ul li a.long[href="#next"], #example-vertical > .actions ul li a.long[href="#finish"] {
        padding: 13px 30px;
    }

    .btn.style--two, #example-vertical > .actions ul li a.style--two[href="#next"], #example-vertical > .actions ul li a.style--two[href="#finish"] {
        background-color: #a1c5df;
        padding: 12px 24px;
        border-radius: 50px !important;
    }

        .btn.style--two:hover, #example-vertical > .actions ul li a.style--two:hover[href="#next"], #example-vertical > .actions ul li a.style--two:hover[href="#finish"] {
            background-color: #e2e0ff;
        }

        .btn.style--two.orange, #example-vertical > .actions ul li a.style--two.orange[href="#next"], #example-vertical > .actions ul li a.style--two.orange[href="#finish"] {
            padding: 10px 25px;
            background-color: #FFF4E6;
            color: #FFB959;
        }

    .btn.style--three, #example-vertical > .actions ul li a.style--three[href="#next"], #example-vertical > .actions ul li a.style--three[href="#finish"] {
        padding: 12px 24px;
    }

    .btn.s_alert, #example-vertical > .actions ul li a.s_alert[href="#next"], #example-vertical > .actions ul li a.s_alert[href="#finish"] {
        background-color: #a1c5df;
        padding: 18px 30px;
    }

    .btn.btn-lg, #example-vertical > .actions ul li a.btn-lg[href="#next"], #example-vertical > .actions ul li a.btn-lg[href="#finish"] {
        width: 100%;
        max-width: 245px;
        margin: 0 auto;
        display: block;
    }

/* Btn Circle */
.btn-circle {
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 1;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: 0 5px 10px rgba(96, 69, 226, 0.5);
    box-shadow: 0 5px 10px rgba(96, 69, 226, 0.5);
    background: var(--green);
}

    .btn-circle svg {
        position: relative;
        z-index: 1;
    }

    .btn-circle:after {
        background-color: #6F51FF;
        background-color: -moz-linear-gradient(left, #6F51FF 0%, #0c2b4a 100%);
        background-color: -webkit-linear-gradient(left, #6F51FF 0%, #0c2b4a 100%);
        background-color: linear-gradient(to right, #6F51FF 0%, #0c2b4a 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F51FF', endColorstr='#0c2b4a',GradientType=1);
    }

    .btn-circle:hover:after {
        opacity: 0.7;
    }

    .btn-circle.style--two {
        width: 60px;
        height: 60px;
    }

    .btn-circle.style--three {
        width: 30px;
        height: 30px;
        -webkit-box-shadow: 0 5px 10px rgba(114, 114, 114, 0.5);
        box-shadow: 0 5px 10px rgba(114, 114, 114, 0.5);
    }

        .btn-circle.style--three:after {
            display: none;
        }

    .btn-circle.style--four {
        width: 50px;
        height: 50px;
    }

        .btn-circle.style--four svg {
            left: 1px;
        }

    .btn-circle.add-row-btn {
        position: absolute;
        width: 30px;
        height: 30px;
        bottom: 10px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .btn-circle.repeater-add-btn {
        position: absolute;
        width: 40px;
        height: 40px;
        /*bottom: 58px;*/
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

        .btn-circle.repeater-add-btn.position-relative {
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            left: auto;
            bottom: auto;
        }

    .btn-circle.done {
        background-color: #DBF7E8;
        color: #67CF94;
        font-size: 26px;
    }

        .btn-circle.done:after {
            display: none;
        }

.btn-home {
    width: 40px;
    height: 40px;
    background-color: #a1c5df;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Follow Btn */
.follow-btn i, .link-btn i {
    left: 0;
    position: relative;
}

.follow-btn:hover i, .link-btn:hover i {
    left: 5px;
}

/* Download & Print Btn */
.download-btn,
.print-btn {
    background-color: #CCF5F8;
    width: 50px;
    height: 50px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.print-btn {
    background-color: #FFF4E6;
}

/* Table Detais Btn */
.details-btn {
    background-color: transparent;
}

    .details-btn i, .details-btn svg {
        left: 0;
        position: relative;
    }

    .details-btn:hover i, .details-btn:hover svg {
        left: 5px;
    }

/* Table Status Btn */
.status-btn {
    font-size: 12px;
    line-height: 1;
    padding: 4px 12px;
}

    .status-btn.un_paid {
        background-color: #FC7383;
    }

    .status-btn.on_hold, .status-btn.product {
        background-color: #FFB959;
    }

    .status-btn.paid {
        background-color: #09D1DE;
    }

    .status-btn.completed, .status-btn.family {
        background-color: #67CFA2;
    }

    .status-btn.work {
        background-color: #FC7383;
    }

    .status-btn.friend, .status-btn.draft {
        background-color: #C491FF;
    }

    .status-btn.design {
        background-color: #09D1DE;
    }

/* Light Btn */
.light-btn {
    background-color: #f0f0f0;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
}

    .light-btn:hover {
        background-color: #f5f5f5;
    }

/* Change Card Btn */
.change-card-btn {
    display: block;
    background-color: #f0f0f0;
    margin-bottom: 8px;
    padding: 6px 10px;
}

    .change-card-btn:hover {
        background-color: #f5f5f5;
    }

    .change-card-btn span {
        display: inline-block;
    }

        .change-card-btn span:not(:last-child) {
            margin-right: 5px;
        }

.close-btn {
    width: 50px;
    height: 50px;
    background-color: #FFE2E6;
    font-size: 20px;
}

    .close-btn i {
        font-weight: 700;
    }

.remove-btn {
    width: 40px;
    height: 40px;
    background-color: #FFE2E6;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    .remove-btn:hover {
        background-color: #fed8de;
    }

    .remove-btn.style--two {
        width: 30px;
        height: 30px;
    }

.light-btn {
    padding: 5px 20px;
    background-color: #a1c5df;
    border-radius: 50px;
}

    .light-btn.style--two {
        background-color: #CCF5F8;
        color: #09D1DE;
    }

    .light-btn:hover {
        background-color: var(--gold);
        color: #ffffff;
    }

        .light-btn:hover.style--two {
            background-color: #09D1DE;
            color: #ffffff;
        }

/* ************************
02.5: Table
********************* */
table {
    width: 100%;
    max-width: 100%;
    font-size: 14px;
}

    table th {
        color: #333333;
        border-bottom: 1px solid #aeaeae;
    }

    table td {
        color: #727272;
    }

        table td a {
            color: #333333;
            font-weight: 700;
            font-size: 14px;
        }

            table td a:hover {
                color: var(--gold);
            }

    table tr:not(:last-child) td {
        border-bottom: 1px solid #F5F5F5;
    }

    table th, table td {
        padding: 16px;
    }

    table thead th {
        border-top: 0;
    }

    table tbody td {
        border-top: 0;
    }

    table .product-img img {
        display: inline-block;
        min-width: 52px;
        height: 52px;
    }

        table .product-img img:not(:last-child) {
            margin-right: 10px;
        }

    table.dh-table th {
        padding: 20px;
    }

    table.dh-table td {
        padding: 24px 20px;
        font-size: 15px;
    }

    table.style--two {
        margin-bottom: 34px;
        min-width: 400px;
    }

        table.style--two thead th {
            padding-top: 0px;
            padding-bottom: 0px;
        }

        table.style--two tr th:first-child, table.style--two tr td:first-child {
            padding-left: 0;
        }

    table.style--three th, table.style--three td {
        padding: 20px 10px;
    }

    table.style--three thead tr:hover {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    table.style--three thead th {
        padding-bottom: 8px;
        border: 0;
    }

    table.style--three tr th, table.style--three tr td {
        position: relative;
    }

        table.style--three tr th:first-child, table.style--three tr td:first-child {
            padding-left: 20px;
        }

    table.style--three tr td {
        border-bottom: 0;
    }

    table.style--three tr:hover {
        -webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
        box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
    }

    table.style--three tr:not(:last-child) td:after,
    table.style--three tr th:after {
        content: "";
        display: block;
        height: 1px;
        overflow: hidden;
        background-color: #f5f5f5;
        position: absolute;
        right: 0;
        width: 100%;
        bottom: 0;
    }

    table.style--three tr th:after {
        background-color: #aeaeae;
    }

    table.style--three tr:not(:last-child) td:first-child:after,
    table.style--three tr:not(:last-child) td:last-child:after,
    table.style--three tr th:first-child:after, table.style--three tr th:last-child:after {
        width: calc(100% - 20px);
    }

    table.style--three tr:not(:last-child) td:last-child:after,
    table.style--three tr th:last-child:after {
        left: 0;
    }

    table.order-list-table th:first-child, table.order-list-table td:first-child {
        padding-left: 28px;
    }

    table.order-list-table tbody td:last-child {
        padding-left: 30px;
    }

    table.order-list-table tbody tr:hover {
        -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.02);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.02);
    }

    table.hoverable tbody tr:hover {
        -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.02);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.02);
    }

    table.cart_table thead th {
        background-color: #f0f0f0;
    }

    table.cart_table tr th, table.cart_table tr td {
        padding: 20px;
    }

        table.cart_table tr th:nth-child(2), table.cart_table tr td:nth-child(2) {
            width: 50%;
        }

    table.cart_table tr td {
        font-size: 15px;
    }

        table.cart_table tr td:last-child span {
            display: inline-block;
            margin-right: 10px;
        }

        table.cart_table tr td:last-child a {
            float: right;
            position: relative;
            top: -1px;
        }

@media only screen and (max-width: 1399px) {
    table.cart_table tr td:last-child a {
        float: none;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

table.cart_table tr td:nth-child(3) span, table.cart_table tr td:nth-child(3) input, table.cart_table tr td:nth-child(4) span, table.cart_table tr td:nth-child(4) input {
    min-width: 120px;
    background-color: #f0f0f0;
    display: inline-block;
    padding: 5px 10px;
}

table.cart_table tr td:nth-child(3) input {
    width: 120px;
    height: 30px;
    padding: 5px 10px;
}

table.cart_table tr:last-child th, table.cart_table tr:last-child td {
    border-bottom: 1px solid #aeaeae;
}

table.style--four th, table.style--four td {
    text-align: right;
}

    table.style--four th:first-child, table.style--four td:first-child {
        text-align: left;
    }

table.style--four th {
    padding: 13px 20px;
    padding-top: 0;
}

table.style--four td {
    font-size: 15px;
    padding: 14px 20px;
}

    table.style--four td .country-flag {
        width: 30px;
        height: 30px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-color: #efefef;
        margin-right: 10px;
    }

table.style--five {
    margin-bottom: 10px;
}

    table.style--five th {
        padding: 5px 20px;
    }

    table.style--five td {
        padding: 9px 20px;
    }

        table.style--five td .img {
            margin-right: 10px;
            width: 45px;
            height: 45px;
        }

table.invoice-list-table th:first-child, table.contact-list-table th:first-child, table.invoice-list-table td:first-child, table.contact-list-table td:first-child, table.invoice-list th:first-child, table.invoice-list td:first-child {
    padding-left: 20px;
    position: relative;
}

table.invoice-list-table th .star, table.contact-list-table th .star, table.invoice-list-table td .star, table.contact-list-table td .star, table.invoice-list th .star, table.invoice-list td .star {
    margin-left: 36px;
    position: relative;
    top: -2px;
}

table.invoice-list-table thead th, table.contact-list-table thead th, table.invoice-list thead th {
    padding-top: 40px;
}

    table.invoice-list-table thead th .custom-checkbox, table.contact-list-table thead th .custom-checkbox, table.invoice-list thead th .custom-checkbox {
        top: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        bottom: 16px;
    }

table.invoice-list-table tbody td, table.contact-list-table tbody td, table.invoice-list tbody td {
    font-size: 15px;
    padding: 20px 15px;
}

table.invoice-list-table tbody tr:hover, table.contact-list-table tbody tr:hover, table.invoice-list tbody tr:hover {
    -webkit-box-shadow: 0px 9px 10px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 9px 10px rgba(0, 0, 0, 0.05);
}

table.invoice-list-table tbody tr.selected, table.contact-list-table tbody tr.selected, table.invoice-list tbody tr.selected {
    background-color: #f0f0f0;
}

table.invoice-list-table.style-two, table.style-two.contact-list-table, table.invoice-list.style-two {
    border-bottom: 1px solid #aeaeae;
}

    table.invoice-list-table.style-two th, table.style-two.contact-list-table th, table.invoice-list.style-two th {
        padding: 20px;
    }

        table.invoice-list-table.style-two th:nth-child(4), table.style-two.contact-list-table th:nth-child(4), table.invoice-list-table.style-two th:nth-child(3), table.style-two.contact-list-table th:nth-child(3), table.invoice-list-table.style-two th:nth-child(5), table.style-two.contact-list-table th:nth-child(5), table.invoice-list.style-two th:nth-child(4), table.invoice-list.style-two th:nth-child(3), table.invoice-list.style-two th:nth-child(5) {
            text-align: right;
        }

            table.invoice-list-table.style-two th:nth-child(4) span, table.style-two.contact-list-table th:nth-child(4) span, table.invoice-list-table.style-two th:nth-child(3) span, table.style-two.contact-list-table th:nth-child(3) span, table.invoice-list-table.style-two th:nth-child(5) span, table.style-two.contact-list-table th:nth-child(5) span, table.invoice-list.style-two th:nth-child(4) span, table.invoice-list.style-two th:nth-child(3) span, table.invoice-list.style-two th:nth-child(5) span {
                max-width: 120px;
                display: block;
                text-align: left;
                margin-left: auto;
            }

            table.invoice-list-table.style-two th:nth-child(5) span, table.style-two.contact-list-table th:nth-child(5) span, table.invoice-list.style-two th:nth-child(5) span {
                max-width: 140px;
            }

    table.invoice-list-table.style-two td, table.style-two.contact-list-table td, table.invoice-list.style-two td {
        padding: 26px 20px;
    }

        table.invoice-list-table.style-two td:nth-child(3), table.style-two.contact-list-table td:nth-child(3), table.invoice-list-table.style-two td:nth-child(4), table.style-two.contact-list-table td:nth-child(4), table.invoice-list-table.style-two td:nth-child(5), table.style-two.contact-list-table td:nth-child(5), table.invoice-list.style-two td:nth-child(3), table.invoice-list.style-two td:nth-child(4), table.invoice-list.style-two td:nth-child(5) {
            text-align: right;
        }

            table.invoice-list-table.style-two td:nth-child(3) input, table.style-two.contact-list-table td:nth-child(3) input, table.invoice-list-table.style-two td:nth-child(4) input, table.style-two.contact-list-table td:nth-child(4) input, table.invoice-list-table.style-two td:nth-child(5) input, table.style-two.contact-list-table td:nth-child(5) input, table.invoice-list.style-two td:nth-child(3) input, table.invoice-list.style-two td:nth-child(4) input, table.invoice-list.style-two td:nth-child(5) input {
                max-width: 120px;
            }

            table.invoice-list-table.style-two td:nth-child(3) > div, table.style-two.contact-list-table td:nth-child(3) > div, table.invoice-list-table.style-two td:nth-child(4) > div, table.style-two.contact-list-table td:nth-child(4) > div, table.invoice-list-table.style-two td:nth-child(5) > div, table.style-two.contact-list-table td:nth-child(5) > div, table.invoice-list.style-two td:nth-child(3) > div, table.invoice-list.style-two td:nth-child(4) > div, table.invoice-list.style-two td:nth-child(5) > div {
                max-width: 160px;
                margin-left: auto;
            }

        table.invoice-list-table.style-two td input, table.style-two.contact-list-table td input, table.invoice-list.style-two td input {
            min-width: 100px;
        }

        table.invoice-list-table.style-two td .tr-close, table.style-two.contact-list-table td .tr-close, table.invoice-list.style-two td .tr-close {
            position: relative;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            margin-left: 60px;
            cursor: pointer;
        }

            table.invoice-list-table.style-two td .tr-close .svg, table.style-two.contact-list-table td .tr-close .svg, table.invoice-list.style-two td .tr-close .svg {
                width: 12px;
                height: 12px;
            }

    table.invoice-list-table.style-two thead, table.style-two.contact-list-table thead, table.invoice-list.style-two thead {
        background-color: #f0f0f0;
    }

    table.invoice-list-table.style-two tbody tr:hover, table.style-two.contact-list-table tbody tr:hover, table.invoice-list.style-two tbody tr:hover {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

table.invoice-list thead th {
    padding-top: 20px;
    padding-top: 20px;
}

table.invoice-list th:first-child, table.invoice-list td:first-child {
    padding-left: 58px;
}

table.invoice-list th:last-child, table.invoice-list td:last-child {
    text-align: right;
    padding-right: 40px;
}

table.invoice-list .custom-checkbox {
    left: 20px;
}

table.invoice-list .dropdown-button {
    left: auto;
    right: 0;
}

table.invoice-list tbody tr.selected {
    background-color: #ffffff;
}

table.contact-list-table td.actions span {
    cursor: pointer;
}

    table.contact-list-table td.actions span:not(:last-child) {
        margin-right: 10px;
    }

table.table-condensed thead tr:nth-child(2) {
    background-color: #ECF3FD;
}

table.table-condensed tbody tr td.active.day {
    background: #5591cf;
}

    table.table-condensed tbody tr td.active.day:hover {
        background: #5591cf;
    }

table.table-bordered tr:last-child td {
    border-bottom: 0;
}

table.table-bordered th {
    border-top-color: #aeaeae;
    border-bottom: 1px solid #aeaeae;
}

    table.table-bordered th:first-child, table.table-bordered td:first-child {
        border-left: 0;
    }

    table.table-bordered th:last-child, table.table-bordered td:last-child {
        border-right: 0;
    }

/* ************************
02.6: Progress Bars & Process Bars
********************* */
.ProgressBar-wrap, .ProgressBar-wrap2 {
    height: 175px;
    width: 175px;
    margin: 0 auto;
}

@media only screen and (min-width: 1500px) and (max-width: 1700px) {
    .ProgressBar-wrap, .ProgressBar-wrap2 {
        width: 150px;
        height: 150px;
    }
}

.ProgressBar-wrap .ProgressBar, .ProgressBar-wrap2 .ProgressBar,
.ProgressBar-wrap .ProgressBar-contentCircle,
.ProgressBar-wrap2 .ProgressBar-contentCircle {
    display: table;
    height: 100%;
    width: 100%;
    position: absolute;
}

.ProgressBar-wrap .ProgressBar-circle, .ProgressBar-wrap2 .ProgressBar-circle,
.ProgressBar-wrap .ProgressBar-background,
.ProgressBar-wrap2 .ProgressBar-background {
    fill: white;
    stroke: #24D4E0;
    stroke-width: 20px;
    stroke-linecap: round;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    z-index: 10;
}


.ProgressBar-wrap .ProgressBar-background,
.ProgressBar-wrap2 .ProgressBar-background {
    stroke: #CCF5F8;
    stroke-width: 20px;
    z-index: 0;
}

.ProgressBar-wrap .ProgressBar-percentage--text, .ProgressBar-wrap2 .ProgressBar-percentage--text {
    position: absolute;
    left: 45%;
    top: 37%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 14px;
}

.ProgressBar-wrap .ProgressBar-percentage, .ProgressBar-wrap2 .ProgressBar-percentage {
    font-size: 40px;
    text-align: center;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    position: relative;
    top: 10px;
}

    .ProgressBar-wrap .ProgressBar-percentage span, .ProgressBar-wrap2 .ProgressBar-percentage span {
        font-size: 70%;
        top: -8px;
        position: relative;
    }

.ProgressBar-wrap2 {
    width: 48px;
    height: 48px;
    margin: 10px 0;
}

    .ProgressBar-wrap2 .ProgressBar,
    .ProgressBar-wrap2 .ProgressBar-contentCircle {
        display: block;
    }

    .ProgressBar-wrap2 .ProgressBar-circle,
    .ProgressBar-wrap2 .ProgressBar-background {
        fill: none;
        stroke: #5591cf;
        stroke-width: 20px;
    }

    .ProgressBar-wrap2 .ProgressBar-background {
        stroke: #f5f5f5;
        stroke-width: 20px;
    }

    .ProgressBar-wrap2 .ProgressBar-percentage--text {
        left: 62px;
        top: 30px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        font-size: 14px;
    }

    .ProgressBar-wrap2 .ProgressBar-percentage {
        font-size: 36px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        display: block;
        position: absolute;
        top: -14px;
        left: 62px;
    }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ProgressBar-wrap2 .ProgressBar-percentage {
        min-width: 80px;
    }
}

/* progress info */
.progress-info div {
    font-size: 14px;
}

    .progress-info div:first-child {
        -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
    }

    .progress-info div:nth-child(2) {
        -ms-flex-preferred-size: 35%;
        flex-basis: 35%;
    }

    .progress-info div:last-child {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    }

.progress-title {
    margin-bottom: 34px;
}

.progress_1 {
    background-color: #CCF5F8;
}

.progress_2 {
    background-color: #FEE7FF;
}

    .progress_2 .ProgressBar-wrap .ProgressBar-circle, .progress_2 .ProgressBar-wrap2 .ProgressBar-circle,
    .progress_2 .ProgressBar-wrap .ProgressBar-background,
    .progress_2 .ProgressBar-wrap2 .ProgressBar-background {
        stroke: #C491FF;
    }


    .progress_2 .ProgressBar-wrap .ProgressBar-background,
    .progress_2 .ProgressBar-wrap2 .ProgressBar-background {
        stroke: #FEE7FF;
    }

.progress_3 {
    background-color: #a1c5df;
}

    .progress_3 .ProgressBar-wrap .ProgressBar-circle, .progress_3 .ProgressBar-wrap2 .ProgressBar-circle,
    .progress_3 .ProgressBar-wrap .ProgressBar-background,
    .progress_3 .ProgressBar-wrap2 .ProgressBar-background {
        stroke: #5591cf;
    }


    .progress_3 .ProgressBar-wrap .ProgressBar-background,
    .progress_3 .ProgressBar-wrap2 .ProgressBar-background {
        stroke: #a1c5df;
    }

.progress_5 .ProgressBar-wrap2 .ProgressBar-circle {
    stroke: #E580FD;
}

.progress_6 {
    background-color: #FEE7FF;
}

    .progress_6 .ProgressBar-wrap, .progress_6 .ProgressBar-wrap2 {
        width: 185px;
        height: 185px;
    }

@media only screen and (min-width: 1500px) and (max-width: 1700px) {
    .progress_6 .ProgressBar-wrap, .progress_6 .ProgressBar-wrap2 {
        width: 150px;
        height: 160px;
    }
}

.progress_6 .ProgressBar-wrap .ProgressBar-circle, .progress_6 .ProgressBar-wrap2 .ProgressBar-circle {
    stroke: #C491FF;
}

.progress_7 {
    background-color: #a1c5df;
}

    .progress_7 .ProgressBar-wrap2 {
        width: 185px;
        height: 185px;
    }

@media only screen and (min-width: 1500px) and (max-width: 1700px) {
    .progress_7 .ProgressBar-wrap2 {
        width: 150px;
        height: 160px;
    }
}

.progress_7 .ProgressBar-wrap2 .ProgressBar-circle {
    stroke: #5591cf;
}

.progress_8,
.progress_9,
.progress_10,
.progress_11,
.progress_12,
.progress_13,
.progress_14,
.progress_15 {
    margin-right: 12px;
}

    .progress_8 .ProgressBar-wrap2,
    .progress_9 .ProgressBar-wrap2,
    .progress_10 .ProgressBar-wrap2,
    .progress_11 .ProgressBar-wrap2,
    .progress_12 .ProgressBar-wrap2,
    .progress_13 .ProgressBar-wrap2,
    .progress_14 .ProgressBar-wrap2,
    .progress_15 .ProgressBar-wrap2 {
        width: 36px;
        height: 36px;
        margin: 0;
    }

        .progress_9 .ProgressBar-wrap2 .ProgressBar-circle {
            stroke: #FFB959;
        }

        .progress_10 .ProgressBar-wrap2 .ProgressBar-circle {
            stroke: #FF81A3;
        }

        .progress_11 .ProgressBar-wrap2 .ProgressBar-circle {
            stroke: #67CF94;
        }

        .progress_12 .ProgressBar-wrap2 .ProgressBar-circle {
            stroke: #E580FD;
        }

        .progress_13 .ProgressBar-wrap2 .ProgressBar-circle {
            stroke: #09D1DE;
        }

        .progress_14 .ProgressBar-wrap2 .ProgressBar-circle {
            stroke: #4C9EFE;
        }

        .progress_15 .ProgressBar-wrap2 .ProgressBar-circle {
            stroke: #FFB959;
        }

.progress_16, .progress_17, .progress_18, .progress_19 {
    margin-right: 0px;
}

    .progress_16 .ProgressBar-wrap2, .progress_17 .ProgressBar-wrap2, .progress_18 .ProgressBar-wrap2, .progress_19 .ProgressBar-wrap2 {
        width: 160px;
        height: 160px;
        margin: 0 auto;
    }

        .progress_16 .ProgressBar-wrap2 .ProgressBar, .progress_17 .ProgressBar-wrap2 .ProgressBar, .progress_18 .ProgressBar-wrap2 .ProgressBar, .progress_19 .ProgressBar-wrap2 .ProgressBar {
            position: relative;
        }

        .progress_16 .ProgressBar-wrap2 .ProgressBar-circle, .progress_17 .ProgressBar-wrap2 .ProgressBar-circle, .progress_18 .ProgressBar-wrap2 .ProgressBar-circle, .progress_19 .ProgressBar-wrap2 .ProgressBar-circle {
            stroke: #C491FF;
            stroke-width: 10px;
        }

        .progress_16 .ProgressBar-wrap2 .ProgressBar-background, .progress_17 .ProgressBar-wrap2 .ProgressBar-background, .progress_18 .ProgressBar-wrap2 .ProgressBar-background, .progress_19 .ProgressBar-wrap2 .ProgressBar-background {
            stroke-width: 10px;
        }

        .progress_16 .ProgressBar-wrap2 .progress-middle-text, .progress_17 .ProgressBar-wrap2 .progress-middle-text, .progress_18 .ProgressBar-wrap2 .progress-middle-text, .progress_19 .ProgressBar-wrap2 .progress-middle-text {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }

            .progress_16 .ProgressBar-wrap2 .progress-middle-text h3, .progress_17 .ProgressBar-wrap2 .progress-middle-text h3, .progress_18 .ProgressBar-wrap2 .progress-middle-text h3, .progress_19 .ProgressBar-wrap2 .progress-middle-text h3 {
                font-size: 24px;
            }

        .progress_17 .ProgressBar-wrap2 .ProgressBar-circle {
            stroke: #67CF94;
        }

        .progress_18 .ProgressBar-wrap2 .ProgressBar-circle {
            stroke: #FC7383;
        }

    .progress_19 .ProgressBar-wrap2 {
        width: 80px;
        height: 80px;
    }

        .progress_19 .ProgressBar-wrap2 .ProgressBar-circle {
            stroke: #FDAC41;
        }

.progress_20 {
    background-color: #ffffff;
}

    .progress_20 .ProgressBar-background {
        stroke: #ffffff;
    }

    .progress_20 .ProgressBar-wrap, .progress_20 .ProgressBar-wrap2 {
        width: 250px;
        height: 250px;
    }

@media only screen and (min-width: 1500px) and (max-width: 1700px) {
    .progress_20 .ProgressBar-wrap, .progress_20 .ProgressBar-wrap2 {
        width: 150px;
        height: 160px;
    }
}

.progress_20 .ProgressBar-wrap .ProgressBar-circle, .progress_20 .ProgressBar-wrap2 .ProgressBar-circle {
    stroke: #5591cf;
    fill: #f0f0f0;
}

.progress_21 .ProgressBar-wrap, .progress_21 .ProgressBar-wrap2 {
    width: 52px;
    height: 52px;
}

    .progress_21 .ProgressBar-wrap .ProgressBar-circle, .progress_21 .ProgressBar-wrap2 .ProgressBar-circle {
        stroke: #FDAC41;
    }

.progress_22 .ProgressBar-wrap2 {
    width: 48px;
    height: 48px;
    margin: 0;
}

    .progress_22 .ProgressBar-wrap2 .ProgressBar-circle {
        stroke: #5591cf;
    }

    .progress_22 .ProgressBar-wrap2 .ProgressBar-percentage {
        position: absolute;
        color: var(--gold);
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

.progress_23 .ProgressBar-wrap2 {
    width: 76px;
    height: 76px;
    margin: 0;
}

    .progress_23 .ProgressBar-wrap2 .ProgressBar-circle {
        stroke: #fff;
    }

    .progress_23 .ProgressBar-wrap2 .ProgressBar-background {
        stroke: #9D9BFF;
    }

    .progress_23 .ProgressBar-wrap2 .ProgressBar-percentage {
        position: absolute;
        color: #fff;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

/* Process bar */
.process-bar-wrapper {
    width: 100%;
    height: 5px;
    background-color: #f8f8f8;
    position: relative;
    margin-top: 40px;
}

    .process-bar-wrapper .process-name, .process-bar-wrapper .process-width {
        position: absolute;
        bottom: 100%;
        left: 0;
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 2px;
        text-transform: capitalize;
    }

    .process-bar-wrapper .process-width {
        left: auto;
        right: 0;
    }

    .process-bar-wrapper .process-bar {
        background-color: #FFBB5E;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
    }

        .process-bar-wrapper .process-bar.style--three {
            background-color: #FF81A3;
        }

        .process-bar-wrapper .process-bar.style--four {
            background-color: #24D4E0;
        }

    .process-bar-wrapper.style--two {
        width: 120px;
        height: 7px;
        margin-top: 60px;
        background-color: #ECF3FD;
    }

        .process-bar-wrapper.style--two .process-width {
            font-size: 12px;
            margin-bottom: 7px;
        }

        .process-bar-wrapper.style--two .process-bar {
            background-color: #4F9DF8;
        }

    .process-bar-wrapper.style--three {
        height: 25px;
        background-color: #DBF7E8;
        margin-top: 75px;
    }

    .process-bar-wrapper.style--four {
        width: calc(100% - 80px);
        height: 10px;
        background-color: #ECF3FD;
        margin: 0;
    }

@media only screen and (max-width: 767px) {
    .process-bar-wrapper.style--four {
        width: calc(100% - 60px);
    }
}

@media only screen and (max-width: 575px) {
    .process-bar-wrapper.style--four {
        margin-left: 56px;
        margin-top: 5px;
        width: calc(100% - 60px - 56px);
    }
}

.process-bar-wrapper.style--four .process-width {
    right: -80px;
    top: -10px;
    font-size: 15px;
    width: 80px;
    text-align: right;
}

@media only screen and (max-width: 767px) {
    .process-bar-wrapper.style--four .process-width {
        width: 60px;
        right: -60px;
    }
}

.process-bar-wrapper.style--four .process-bar {
    background-color: #4F9DF8;
}

.process-bar-wrapper.style--four.paste {
    background-color: #CCF5F8;
}

    .process-bar-wrapper.style--four.paste .process-bar {
        background-color: #09D1DE;
    }

.process-bar-wrapper.style--four.green {
    background-color: #DBF7E8;
}

    .process-bar-wrapper.style--four.green .process-bar {
        background-color: #67CF94;
    }

.process-bar-wrapper.style--four.orange {
    background-color: #FFF4E6;
}

    .process-bar-wrapper.style--four.orange .process-bar {
        background-color: #FFB959;
    }

.process-bar-wrapper.style--five {
    max-width: 290px;
    height: 10px;
    margin: 0;
    display: inline-block;
    background-color: #FFF4E6;
}

    .process-bar-wrapper.style--five.pink {
        background-color: #FEE7FF;
    }

        .process-bar-wrapper.style--five.pink .process-bar {
            background-color: #E580FD;
        }

    .process-bar-wrapper.style--five.green {
        background-color: #DBF7E8;
    }

        .process-bar-wrapper.style--five.green .process-bar {
            background-color: #67CF94;
        }

    .process-bar-wrapper.style--five.blue {
        background-color: #ECF3FD;
    }

        .process-bar-wrapper.style--five.blue .process-bar {
            background-color: #4F9DF8;
        }

    .process-bar-wrapper.style--five.c2, a.process-bar-wrapper.style--five:hover, .dropdown-menu .dropdown-body a:hover .process-bar-wrapper.style--five.main-text, .dropdown-menu.style--two .dropdown-body a:hover .process-bar-wrapper.style--five.time, .process-bar-wrapper.style--five.btn.preview, #example-vertical > .actions ul li a.process-bar-wrapper.style--five.preview[href="#next"], #example-vertical > .actions ul li a.process-bar-wrapper.style--five.preview[href="#finish"], .process-bar-wrapper.style--five.btn.style--two, #example-vertical > .actions ul li a.process-bar-wrapper.style--five.style--two[href="#next"], #example-vertical > .actions ul li a.process-bar-wrapper.style--five.style--two[href="#finish"], .process-bar-wrapper.style--five.btn.s_alert, #example-vertical > .actions ul li a.process-bar-wrapper.style--five.s_alert[href="#next"], #example-vertical > .actions ul li a.process-bar-wrapper.style--five.s_alert[href="#finish"], .process-bar-wrapper.style--five.details-btn, .process-bar-wrapper.style--five.light-btn, table.table-condensed thead tr:nth-child(2) th.process-bar-wrapper.style--five, table.table-contextual .process-bar-wrapper.style--five.details-btn:hover, table.table-contextual .details-btn:hover i.process-bar-wrapper.style--five, .sidebar .sidebar-body li.active > a.process-bar-wrapper.style--five, .sidebar .sidebar-body li:hover > a.process-bar-wrapper.style--five, .fc-view > table thead th.process-bar-wrapper.style--five.fc-day-header, .notifications a:hover p.process-bar-wrapper.style--five, .news a:hover p.process-bar-wrapper.style--five, .process-bar-wrapper.style--five.icon:hover, .select2-container--default .select2-selection--multiple .process-bar-wrapper.style--five.select2-selection__choice, .process-bar-wrapper.style--five.p_nav-link, .about-nav-tab a.process-bar-wrapper.style--five.active, .process-bar-wrapper.style--five.iconwrap, .dragable-list > div.ui-sortable-helper i.process-bar-wrapper.style--five {
        background-color: #a1c5df;
    }

        .process-bar-wrapper.style--five.c2 .process-bar, a.process-bar-wrapper.style--five:hover .process-bar, .dropdown-menu .dropdown-body a:hover .process-bar-wrapper.style--five.main-text .process-bar, .dropdown-menu.style--two .dropdown-body a:hover .process-bar-wrapper.style--five.time .process-bar, .process-bar-wrapper.style--five.btn.preview .process-bar, #example-vertical > .actions ul li a.process-bar-wrapper.style--five.preview[href="#next"] .process-bar, #example-vertical > .actions ul li a.process-bar-wrapper.style--five.preview[href="#finish"] .process-bar, .process-bar-wrapper.style--five.btn.style--two .process-bar, #example-vertical > .actions ul li a.process-bar-wrapper.style--five.style--two[href="#next"] .process-bar, #example-vertical > .actions ul li a.process-bar-wrapper.style--five.style--two[href="#finish"] .process-bar, .process-bar-wrapper.style--five.btn.s_alert .process-bar, #example-vertical > .actions ul li a.process-bar-wrapper.style--five.s_alert[href="#next"] .process-bar, #example-vertical > .actions ul li a.process-bar-wrapper.style--five.s_alert[href="#finish"] .process-bar, .process-bar-wrapper.style--five.details-btn .process-bar, .process-bar-wrapper.style--five.light-btn .process-bar, table.table-condensed thead tr:nth-child(2) th.process-bar-wrapper.style--five .process-bar, table.table-contextual .details-btn:hover i.process-bar-wrapper.style--five .process-bar, .sidebar .sidebar-body li.active > a.process-bar-wrapper.style--five .process-bar, .sidebar .sidebar-body li:hover > a.process-bar-wrapper.style--five .process-bar, .fc-view > table thead th.process-bar-wrapper.style--five.fc-day-header .process-bar, .notifications a:hover p.process-bar-wrapper.style--five .process-bar, .news a:hover p.process-bar-wrapper.style--five .process-bar, .process-bar-wrapper.style--five.icon:hover .process-bar, .select2-container--default .select2-selection--multiple .process-bar-wrapper.style--five.select2-selection__choice .process-bar, .process-bar-wrapper.style--five.p_nav-link .process-bar, .about-nav-tab a.process-bar-wrapper.style--five.active .process-bar, .process-bar-wrapper.style--five.iconwrap .process-bar, .dragable-list > div.ui-sortable-helper i.process-bar-wrapper.style--five .process-bar {
            background-color: var(--gold);
        }

/* Home Social Media Process */
.country-performance {
    padding: 0 20px;
}

    .country-performance .process-bar-wrapper {
        background-color: #CCF5F8;
        height: 10px;
    }

        .country-performance .process-bar-wrapper .process-bar {
            background-color: #09D1DE;
        }

        .country-performance .process-bar-wrapper.style--two {
            background-color: #FFF4E6;
            width: 100%;
            margin-top: 40px;
        }

            .country-performance .process-bar-wrapper.style--two .process-bar {
                background-color: #FFB959;
            }

/* Process Bars */
.process-bars {
    width: 40%;
    position: absolute;
    left: 20px;
    bottom: 30px;
}

@media only screen and (min-width: 0px) and (max-width: 1500px) {
    .process-bars {
        position: relative;
    }
}

@media only screen and (min-width: 0px) and (max-width: 1200px) {
    .process-bars {
        margin: 50px auto 0;
        width: 80%;
        left: 0;
    }
}

/* ************************
02.7: Input
********************* */
/* Theme Input Style */
.theme-input-style {
    border: none;
    height: 40px;
    width: 100%;
    padding: 0 15px;
    background-color: #f0f0f0;
    font-size: 16px;
    border-radius: 15px;
}

    .theme-input-style:focus {
        background-color: #f0f0f0;
    }

    .theme-input-style.style--two {
        background-color: #ffffff;
        height: 35px;
    }

@media only screen and (max-width: 767px) {
    .theme-input-style.style--two {
        border-radius: 0;
    }
}

.theme-input-style.style--three {
    height: 30px;
    padding: 5px 10px;
}

.theme-input-style.style--four {
    height: 30px;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 5px 10px;
    max-width: 160px;
}

.theme-input-style.large {
    height: 50px;
}

.theme-input-style.small {
    height: 30px;
    padding: 0 14px;
}

.theme-input-style.is-valid {
    border: 1px solid #28a745 !important;
}

.theme-input-style.is-invalid {
    border: 1px solid #dc3545 !important;
}

.theme-input-style.style--five {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.form-control {
    background-color: #f0f0f0;
    height: 40px;
    border-radius: 7px;
}

    .form-control:focus {
        background-color: #f0f0f0;
    }

    .form-control.is-valid {
        border: 1px solid #28a745 !important;
    }

    .form-control.is-invalid {
        border: 1px solid #dc3545 !important;
    }

textarea.theme-input-style {
    height: 180px;
    padding: 15px 20px;
}

    textarea.theme-input-style.style--two {
        padding: 10px 20px;
        height: 100px;
        background-color: #f0f0f0;
    }

    textarea.theme-input-style.style--three {
        height: 80px;
        line-height: 1.73;
        font-size: 15px;
    }

    textarea.theme-input-style.style--four {
        height: 50px;
        max-width: 290px;
        padding: 5px 10px;
        font-size: 15px;
        background-color: rgba(255, 255, 255, 0.05);
        line-height: 1.3;
    }

    textarea.theme-input-style.style--five {
        height: 70px;
        width: 100%;
        font-size: 15px;
        padding: 6px 10px;
    }

    textarea.theme-input-style.style--six {
        height: 50px;
        font-size: 15px;
        padding: 6px 10px;
    }

    textarea.theme-input-style.style--seven {
        height: 130px;
    }

textarea.form-control {
    height: 50px;
}

.custom-select {
    background-color: #DBF7E8;
    height: auto;
    color: #67CF94;
    padding: 0px 30px 0px 12px;
    background: #DBF7E8 url(../img/svg/select-down.svg) no-repeat right 0.75rem center/10px 10px;
}

    .custom-select.style--two {
        width: 100%;
        padding: 0;
        background: #f0f0f0 url(../img/svg/simple-down.svg) no-repeat right 0.75rem center/16px 14px;
    }

        .custom-select.style--two .theme-input-style {
            background-color: transparent;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
        }

        .custom-select.style--two.large {
            background-size: 18px 15px;
        }

            .custom-select.style--two.large .theme-input-style {
                height: 50px;
            }

        .custom-select.style--two.small {
            background-size: 14px 12px;
        }

            .custom-select.style--two.small .theme-input-style {
                height: 30px;
                padding: 0 14px;
            }

        .custom-select.style--two.disable {
            background-image: url(../img/svg/simple-down2.svg);
        }

select.multiple {
    width: 100%;
    height: auto;
    padding: 4px 0;
}

    select.multiple option {
        padding: 6px 20px;
    }

/* Theme Input Group */
.theme-input-group {
    position: relative;
    width: 100%;
}

    .theme-input-group input {
        width: 100%;
        height: 50px;
        border: none;
        padding-left: 25px;
        padding-right: 150px;
        color: #ffffff;
        margin: 0;
    }

@media only screen and (max-width: 479px) {
    .theme-input-group input {
        padding-right: 130px;
        padding-left: 10px;
    }
}

.theme-input-group button, .theme-input-group > a {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    padding: 15px 30px;
    line-height: 1;
    font-weight: 600;
    color: #ffffff;
}

@media only screen and (max-width: 479px) {
    .theme-input-group button, .theme-input-group > a {
        font-size: 16px;
        padding: 20px;
    }
}

.theme-input-group.header-search {
    z-index: 99;
}

.theme-input-group.input-wrap {
    overflow: hidden;
}

    .theme-input-group.input-wrap .theme-input-style {
        padding-right: 40px !important;
    }

    .theme-input-group.input-wrap > a {
        padding: 8px 12px 8px 10px;
    }

.theme-input-group.style--two input {
    background-color: #f0f0f0;
    height: 40px;
    padding-right: 120px;
}

    .theme-input-group.style--two input.pd {
        padding-right: 80px;
    }

.theme-input-group.style--two .input-group-append {
    position: absolute;
    right: 0;
    top: 0;
}

.theme-input-group.style--two.prepend input {
    padding-right: 120px;
    padding-left: 130px;
}

    .theme-input-group.style--two.prepend input.pd {
        padding-right: 80px;
        padding-left: 80px;
    }

.theme-input-group.prepend input {
    background-color: #f0f0f0;
    height: 40px;
    padding-right: 15px;
    padding-left: 130px;
}

    .theme-input-group.prepend input.pd {
        padding-left: 80px;
    }

.theme-input-group.prepend .input-group-prepend {
    position: absolute;
    left: 0;
    top: 0;
}

.input-group-text {
    background-color: #f0f0f0;
    border-radius: 7px;
}

/* Search Form */
.search-form .theme-input-group {
    position: relative;
    height: 40px;
    width: 100%;
}

    .search-form .theme-input-group input {
        background-color: #F5F5F5;
        padding: 5px 15px;
        height: 40px;
    }

        .search-form .theme-input-group input::-webkit-input-placeholder {
            color: #727272 !important;
        }

        .search-form .theme-input-group input::-moz-placeholder {
            color: #727272 !important;
        }

        .search-form .theme-input-group input:-ms-input-placeholder {
            color: #727272 !important;
        }

        .search-form .theme-input-group input::-ms-input-placeholder {
            color: #727272 !important;
        }

        .search-form .theme-input-group input::placeholder {
            color: #727272 !important;
        }

    .search-form .theme-input-group button {
        background-color: #FAFAFA;
        padding: 5px 10px;
    }

@media only screen and (max-width: 379px) {
    .search-form .theme-input-group button {
        padding: 5px 12px;
    }
}

.search-form .theme-input-group button:hover {
    background-color: #a1c5df;
    color: #ffffff;
}

.search-form .theme-input-group button.radius-5, .search-form .theme-input-group button.dashboard-date.style--four, .search-form .theme-input-group button.dashboard-date.style--five, .search-form .theme-input-group button.tag_color, .search-form .theme-input-group button.theme-input-style.style--three, .search-form .theme-input-group button.theme-input-style.style--four, .search-form .theme-input-group .todo-list button.single-row:after, .todo-list .search-form .theme-input-group button.single-row:after, .search-form .theme-input-group button.fc-toolbar.fc-header-toolbar, .search-form .theme-input-group .labels button.label, .labels .search-form .theme-input-group button.label, .search-form .theme-input-group .label-item button.label, .label-item .search-form .theme-input-group button.label, .search-form .theme-input-group #projectTaskDetails .modal-content .cover-img button.attach-file, #projectTaskDetails .modal-content .cover-img .search-form .theme-input-group button.attach-file, .search-form .theme-input-group #projectTaskDetails .modal-content .checklist .checklist-item-wrap button.checklist-item-details, #projectTaskDetails .modal-content .checklist .checklist-item-wrap .search-form .theme-input-group button.checklist-item-details, .search-form .theme-input-group #projectTaskDetails .modal-content .checklist-new-item button.theme-input-style, #projectTaskDetails .modal-content .checklist-new-item .search-form .theme-input-group button.theme-input-style, .search-form .theme-input-group #projectChecklistModal button.checklist-copy-source, #projectChecklistModal .search-form .theme-input-group button.checklist-copy-source, .search-form .theme-input-group button.project-board-select-wrap, .search-form .theme-input-group .input-group.addon .input-group-prepend button.input-group-text, .input-group.addon .input-group-prepend .search-form .theme-input-group button.input-group-text,
.search-form .theme-input-group .input-group.addon .input-group-append button.input-group-text, .input-group.addon .input-group-append .search-form .theme-input-group button.input-group-text {
    border-radius: 15px !important;
}

.search-form .theme-input-group.style--two {
    height: 50px;
}

    .search-form .theme-input-group.style--two input {
        height: 50px;
    }

    .search-form .theme-input-group.style--two button {
        padding: 5px 15px;
    }

.search-form .theme-input-group.header-search.theme-input-group {
    position: absolute;
    height: 50px;
    width: 50px;
    right: 0;
    top: 0;
}

@media only screen and (max-width: 379px) {
    .search-form .theme-input-group.header-search.theme-input-group {
        height: 45px;
        width: 45px;
    }
}

.search-form .theme-input-group.header-search.theme-input-group.active {
    width: 270px;
}

    .search-form .theme-input-group.header-search.theme-input-group.active button {
        background-color: #F5F5F5;
    }

.search-form .theme-input-group.header-search.theme-input-group input {
    background-color: #F5F5F5;
    height: 50px;
    padding: 5px 15px;
}

@media only screen and (max-width: 379px) {
    .search-form .theme-input-group.header-search.theme-input-group input {
        height: 45px;
    }
}

.search-form .theme-input-group.header-search.theme-input-group input::-webkit-input-placeholder {
    color: #727272 !important;
}

.search-form .theme-input-group.header-search.theme-input-group input::-moz-placeholder {
    color: #727272 !important;
}

.search-form .theme-input-group.header-search.theme-input-group input:-ms-input-placeholder {
    color: #727272 !important;
}

.search-form .theme-input-group.header-search.theme-input-group input::-ms-input-placeholder {
    color: #727272 !important;
}

.search-form .theme-input-group.header-search.theme-input-group input::placeholder {
    color: #727272 !important;
}

.search-form .theme-input-group.header-search.theme-input-group button {
    background-color: #FAFAFA;
    padding: 5px 15px;
}

@media only screen and (max-width: 379px) {
    .search-form .theme-input-group.header-search.theme-input-group button {
        padding: 5px 12px;
    }
}

.search-form .theme-input-group.header-search.theme-input-group button:hover {
    background-color: #a1c5df;
    color: #ffffff;
}

.horizontal-form .form-group > label {
    min-width: 240px;
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {
    .horizontal-form .form-group > label {
        min-width: 180px;
    }
}

/* Custom Checkbox */
.custom-checkbox {
    position: absolute;
    width: 20px;
    cursor: pointer;
    height: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

    .custom-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .custom-checkbox .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 18px;
        width: 18px;
        background-color: var(--gold);
    }

        .custom-checkbox .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

    .custom-checkbox input:checked ~ .checkmark:after {
        display: block;
    }

    .custom-checkbox .checkmark:after {
        left: 6px;
        top: 3px;
        width: 6px;
        height: 10px;
        border: solid #5591cf;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .custom-checkbox ~ .todo-text {
        padding-left: 30px;
    }

    .custom-checkbox.style--two {
        width: 24px;
        height: 24px;
    }

        .custom-checkbox.style--two .checkmark {
            width: 22px;
            height: 22px;
        }

            .custom-checkbox.style--two .checkmark:after {
                left: 7.2px;
                top: 4px;
                width: 7px;
                height: 12px;
                border-width: 0 3px 3px 0;
            }

    .custom-checkbox.style--three {
        width: 18px;
        height: 18px;
    }

        .custom-checkbox.style--three .checkmark {
            width: 17px;
            height: 17px;
        }

            .custom-checkbox.style--three .checkmark:after {
                left: 6px;
                top: 3px;
                width: 5px;
                height: 9px;
            }

    .custom-checkbox.position-relative {
        top: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .custom-checkbox.bold .checkmark, .dashboard-date.style--five > i.custom-checkbox .checkmark, .dropdown-menu.style--four a.custom-checkbox:hover .checkmark, .dropdown-menu.style--four a.custom-checkbox.selected .checkmark, .custom-checkbox.avatar .checkmark, .custom-checkbox.full-date .checkmark, .pagination ul li.custom-checkbox .checkmark, .custom-checkbox.follow-btn .checkmark, .custom-checkbox.link-btn .checkmark, .custom-checkbox.details-btn .checkmark, table.style--two td.custom-checkbox .checkmark, table.cart_table tr td.custom-checkbox:first-child .checkmark, table.cart_table tr td:last-child span.custom-checkbox .checkmark, table.invoice-list-table.style-two td.custom-checkbox:nth-child(4) .checkmark, table.style-two.contact-list-table td.custom-checkbox:nth-child(4) .checkmark, table.invoice-list-table.style-two td.custom-checkbox:nth-child(5) .checkmark, table.style-two.contact-list-table td.custom-checkbox:nth-child(5) .checkmark, table.invoice-list.style-two td.custom-checkbox:nth-child(4) .checkmark, table.invoice-list.style-two td.custom-checkbox:nth-child(5) .checkmark, .ProgressBar-wrap .custom-checkbox.ProgressBar-percentage .checkmark, .ProgressBar-wrap2 .custom-checkbox.ProgressBar-percentage .checkmark, .progress-info div.custom-checkbox:not(:first-child) .checkmark, .process-bar-wrapper.style--four .custom-checkbox.process-width .checkmark, .notification-icon .custom-checkbox.count .checkmark, .avatar .custom-checkbox.count .checkmark, .sidebar .sidebar-body li.custom-checkbox.nav-category .checkmark, #apex_radar-chart .custom-checkbox.apexcharts-title-text .checkmark, .custom-checkbox.statistic-row.days .checkmark, .product-details-content .custom-checkbox.product_title .checkmark, .product-details-content .custom-checkbox.woocommerce-Price-amount .checkmark, .product-details-content .woocommerce-product-details__short-description h5.custom-checkbox .checkmark, .form-row label.custom-checkbox .checkmark, .cart-collaterals .shop_table th.custom-checkbox .checkmark, .cart-collaterals .shop_table td.custom-checkbox .checkmark, .mail-list-item:hover .mail-text .custom-checkbox.msg .checkmark, .main-mail:hover .mail-text .custom-checkbox.msg .checkmark, .message:hover p.custom-checkbox .checkmark, .message.active p.custom-checkbox .checkmark, .assign_to .custom-checkbox.assign-content .checkmark, .assign-tag .custom-checkbox.tag-text .checkmark, .add-new_task .custom-checkbox.label-text .checkmark, .task-details .custom-checkbox.label-text .checkmark, .fc table.custom-checkbox .checkmark, #projectTaskDetails .modal-content .project-main-title textarea.custom-checkbox .checkmark, #projectTaskDetails .modal-content .checklist .process-bar-wrapper .custom-checkbox.process-name .checkmark, #smartwizard .nav li a.custom-checkbox .checkmark, #example-vertical > .steps ul li a.custom-checkbox .checkmark, #example-vertical > .actions ul li a.custom-checkbox[href="#previous"] .checkmark, .chip .chip-content > div.custom-checkbox .checkmark, .chip .chip-content .custom-checkbox.img .checkmark, .custom-checkbox.color-circle .checkmark, .custom-checkbox.topic .checkmark, .timeline .custom-checkbox.event:before .checkmark, .custom-checkbox.base-timer__label .checkmark, .custom-checkbox.base-timer__text .checkmark, .custom-checkbox.p_nav-link .checkmark, .info-list li.custom-checkbox .checkmark, .shepherd-element .shepherd-content footer .shepherd-buttons li .custom-checkbox.shepherd-button .checkmark {
        border: 1px solid #5591cf;
    }

        .custom-checkbox.bold .checkmark:after, .dashboard-date.style--five > i.custom-checkbox .checkmark:after, .dropdown-menu.style--four a.custom-checkbox:hover .checkmark:after, .dropdown-menu.style--four a.custom-checkbox.selected .checkmark:after, .custom-checkbox.avatar .checkmark:after, .custom-checkbox.full-date .checkmark:after, .pagination ul li.custom-checkbox .checkmark:after, .custom-checkbox.follow-btn .checkmark:after, .custom-checkbox.link-btn .checkmark:after, .custom-checkbox.details-btn .checkmark:after, table.style--two td.custom-checkbox .checkmark:after, table.cart_table tr td.custom-checkbox:first-child .checkmark:after, table.cart_table tr td:last-child span.custom-checkbox .checkmark:after, table.invoice-list-table.style-two td.custom-checkbox:nth-child(4) .checkmark:after, table.style-two.contact-list-table td.custom-checkbox:nth-child(4) .checkmark:after, table.invoice-list-table.style-two td.custom-checkbox:nth-child(5) .checkmark:after, table.style-two.contact-list-table td.custom-checkbox:nth-child(5) .checkmark:after, table.invoice-list.style-two td.custom-checkbox:nth-child(4) .checkmark:after, table.invoice-list.style-two td.custom-checkbox:nth-child(5) .checkmark:after, .ProgressBar-wrap .custom-checkbox.ProgressBar-percentage .checkmark:after, .ProgressBar-wrap2 .custom-checkbox.ProgressBar-percentage .checkmark:after, .progress-info div.custom-checkbox:not(:first-child) .checkmark:after, .process-bar-wrapper.style--four .custom-checkbox.process-width .checkmark:after, .notification-icon .custom-checkbox.count .checkmark:after, .avatar .custom-checkbox.count .checkmark:after, .sidebar .sidebar-body li.custom-checkbox.nav-category .checkmark:after, #apex_radar-chart .custom-checkbox.apexcharts-title-text .checkmark:after, .custom-checkbox.statistic-row.days .checkmark:after, .product-details-content .custom-checkbox.product_title .checkmark:after, .product-details-content .custom-checkbox.woocommerce-Price-amount .checkmark:after, .product-details-content .woocommerce-product-details__short-description h5.custom-checkbox .checkmark:after, .form-row label.custom-checkbox .checkmark:after, .cart-collaterals .shop_table th.custom-checkbox .checkmark:after, .cart-collaterals .shop_table td.custom-checkbox .checkmark:after, .mail-list-item:hover .mail-text .custom-checkbox.msg .checkmark:after, .main-mail:hover .mail-text .custom-checkbox.msg .checkmark:after, .message:hover p.custom-checkbox .checkmark:after, .message.active p.custom-checkbox .checkmark:after, .assign_to .custom-checkbox.assign-content .checkmark:after, .assign-tag .custom-checkbox.tag-text .checkmark:after, .add-new_task .custom-checkbox.label-text .checkmark:after, .task-details .custom-checkbox.label-text .checkmark:after, .fc table.custom-checkbox .checkmark:after, #projectTaskDetails .modal-content .project-main-title textarea.custom-checkbox .checkmark:after, #projectTaskDetails .modal-content .checklist .process-bar-wrapper .custom-checkbox.process-name .checkmark:after, #smartwizard .nav li a.custom-checkbox .checkmark:after, #example-vertical > .steps ul li a.custom-checkbox .checkmark:after, #example-vertical > .actions ul li a.custom-checkbox[href="#previous"] .checkmark:after, .chip .chip-content > div.custom-checkbox .checkmark:after, .chip .chip-content .custom-checkbox.img .checkmark:after, .custom-checkbox.color-circle .checkmark:after, .custom-checkbox.topic .checkmark:after, .timeline .custom-checkbox.event:before .checkmark:after, .custom-checkbox.base-timer__label .checkmark:after, .custom-checkbox.base-timer__text .checkmark:after, .custom-checkbox.p_nav-link .checkmark:after, .info-list li.custom-checkbox .checkmark:after, .shepherd-element .shepherd-content footer .shepherd-buttons li .custom-checkbox.shepherd-button .checkmark:after {
            left: 5px;
            top: 2px;
        }

    .custom-checkbox.solid .checkmark {
        background-color: var(--gold);
    }

        .custom-checkbox.solid .checkmark:after {
            border-color: #fff !important;
        }

    .custom-checkbox.light .checkmark {
        background-color: #F5F5F5 !important;
    }

    .custom-checkbox.disable .checkmark {
        background-color: #F5F5F5;
        border-color: #aeaeae;
    }

    .custom-checkbox.disable.solid .checkmark {
        background-color: #aeaeae;
    }

    .custom-checkbox.success .checkmark {
        border-color: #67CF94;
        background-color: #DBF7E8;
    }

        .custom-checkbox.success .checkmark:after {
            border-color: #67CF94;
        }

    .custom-checkbox.success.solid .checkmark {
        background-color: #67CF94;
    }

    .custom-checkbox.danger .checkmark {
        border-color: #FC7383;
        background-color: #FFE2E6;
    }

        .custom-checkbox.danger .checkmark:after {
            border-color: #FC7383;
        }

    .custom-checkbox.danger.solid .checkmark {
        background-color: #FC7383;
    }

    .custom-checkbox.brand .checkmark {
        border-color: #09D1DE;
        background-color: #CCF5F8;
    }

        .custom-checkbox.brand .checkmark:after {
            border-color: #09D1DE;
        }

    .custom-checkbox.brand.solid .checkmark {
        background-color: #09D1DE;
    }

/* Custom Radio */
.custom-radio {
    width: 18px;
    height: 18px;
    position: relative;
}

    .custom-radio [type="radio"]:checked,
    .custom-radio [type="radio"]:not(:checked) {
        position: absolute;
        left: -9999px;
    }

        .custom-radio [type="radio"]:checked + label,
        .custom-radio [type="radio"]:not(:checked) + label {
            cursor: pointer;
        }

            .custom-radio [type="radio"]:checked + label:before,
            .custom-radio [type="radio"]:not(:checked) + label:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 18px;
                height: 18px;
                border: 1px solid #5591cf;
                border-radius: 100%;
                background-color: #a1c5df;
            }

            .custom-radio [type="radio"]:checked + label:after,
            .custom-radio [type="radio"]:not(:checked) + label:after {
                content: '';
                width: 7px;
                height: 7px;
                background-color: var(--gold);
                position: absolute;
                top: 5px;
                left: 5px;
                border-radius: 100%;
                -webkit-transition: all 0.2s ease;
                -o-transition: all 0.2s ease;
                transition: all 0.2s ease;
            }

            .custom-radio [type="radio"]:not(:checked) + label:after {
                opacity: 0;
                -webkit-transform: scale(0);
                -ms-transform: scale(0);
                transform: scale(0);
            }

            .custom-radio [type="radio"]:checked + label:after {
                opacity: 1;
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
            }

    .custom-radio.disable [type="radio"]:checked + label:before,
    .custom-radio.disable [type="radio"]:not(:checked) + label:before {
        border: 1px solid #aeaeae;
        background-color: #F5F5F5;
    }

    .custom-radio.success [type="radio"]:checked + label:before,
    .custom-radio.success [type="radio"]:not(:checked) + label:before {
        border: 1px solid #67CF94;
        background-color: #DBF7E8;
    }

    .custom-radio.success [type="radio"]:checked + label:after,
    .custom-radio.success [type="radio"]:not(:checked) + label:after {
        background-color: #67CF94;
    }

    .custom-radio.danger [type="radio"]:checked + label:before,
    .custom-radio.danger [type="radio"]:not(:checked) + label:before {
        border: 1px solid #FC7383;
        background-color: #FFE2E6;
    }

    .custom-radio.danger [type="radio"]:checked + label:after,
    .custom-radio.danger [type="radio"]:not(:checked) + label:after {
        background-color: #FC7383;
    }

    .custom-radio.brand [type="radio"]:checked + label:before,
    .custom-radio.brand [type="radio"]:not(:checked) + label:before {
        border: 1px solid #09D1DE;
        background-color: #CCF5F8;
    }

    .custom-radio.brand [type="radio"]:checked + label:after,
    .custom-radio.brand [type="radio"]:not(:checked) + label:after {
        background-color: #09D1DE;
    }

    .custom-radio.bold [type="radio"]:checked + label:before, .dashboard-date.style--five > i.custom-radio [type="radio"]:checked + label:before, .dropdown-menu.style--four a.custom-radio:hover [type="radio"]:checked + label:before, .dropdown-menu.style--four a.custom-radio.selected [type="radio"]:checked + label:before, .custom-radio.avatar [type="radio"]:checked + label:before, .custom-radio.full-date [type="radio"]:checked + label:before, .pagination ul li.custom-radio [type="radio"]:checked + label:before, .custom-radio.follow-btn [type="radio"]:checked + label:before, .custom-radio.link-btn [type="radio"]:checked + label:before, .custom-radio.details-btn [type="radio"]:checked + label:before, table.style--two td.custom-radio [type="radio"]:checked + label:before, table.cart_table tr td.custom-radio:first-child [type="radio"]:checked + label:before, table.cart_table tr td:last-child span.custom-radio [type="radio"]:checked + label:before, table.invoice-list-table.style-two td.custom-radio:nth-child(4) [type="radio"]:checked + label:before, table.style-two.contact-list-table td.custom-radio:nth-child(4) [type="radio"]:checked + label:before, table.invoice-list-table.style-two td.custom-radio:nth-child(5) [type="radio"]:checked + label:before, table.style-two.contact-list-table td.custom-radio:nth-child(5) [type="radio"]:checked + label:before, table.invoice-list.style-two td.custom-radio:nth-child(4) [type="radio"]:checked + label:before, table.invoice-list.style-two td.custom-radio:nth-child(5) [type="radio"]:checked + label:before, .ProgressBar-wrap .custom-radio.ProgressBar-percentage [type="radio"]:checked + label:before, .ProgressBar-wrap2 .custom-radio.ProgressBar-percentage [type="radio"]:checked + label:before, .progress-info div.custom-radio:not(:first-child) [type="radio"]:checked + label:before, .process-bar-wrapper.style--four .custom-radio.process-width [type="radio"]:checked + label:before, .notification-icon .custom-radio.count [type="radio"]:checked + label:before, .avatar .custom-radio.count [type="radio"]:checked + label:before, .sidebar .sidebar-body li.custom-radio.nav-category [type="radio"]:checked + label:before, #apex_radar-chart .custom-radio.apexcharts-title-text [type="radio"]:checked + label:before, .custom-radio.statistic-row.days [type="radio"]:checked + label:before, .product-details-content .custom-radio.product_title [type="radio"]:checked + label:before, .product-details-content .custom-radio.woocommerce-Price-amount [type="radio"]:checked + label:before, .product-details-content .woocommerce-product-details__short-description h5.custom-radio [type="radio"]:checked + label:before, .form-row label.custom-radio [type="radio"]:checked + label:before, .cart-collaterals .shop_table th.custom-radio [type="radio"]:checked + label:before, .cart-collaterals .shop_table td.custom-radio [type="radio"]:checked + label:before, .mail-list-item:hover .mail-text .custom-radio.msg [type="radio"]:checked + label:before, .main-mail:hover .mail-text .custom-radio.msg [type="radio"]:checked + label:before, .message:hover p.custom-radio [type="radio"]:checked + label:before, .message.active p.custom-radio [type="radio"]:checked + label:before, .assign_to .custom-radio.assign-content [type="radio"]:checked + label:before, .assign-tag .custom-radio.tag-text [type="radio"]:checked + label:before, .add-new_task .custom-radio.label-text [type="radio"]:checked + label:before, .task-details .custom-radio.label-text [type="radio"]:checked + label:before, .fc table.custom-radio [type="radio"]:checked + label:before, #projectTaskDetails .modal-content .project-main-title textarea.custom-radio [type="radio"]:checked + label:before, #projectTaskDetails .modal-content .checklist .process-bar-wrapper .custom-radio.process-name [type="radio"]:checked + label:before, #smartwizard .nav li a.custom-radio [type="radio"]:checked + label:before, #example-vertical > .steps ul li a.custom-radio [type="radio"]:checked + label:before, #example-vertical > .actions ul li a.custom-radio[href="#previous"] [type="radio"]:checked + label:before, .chip .chip-content > div.custom-radio [type="radio"]:checked + label:before, .chip .chip-content .custom-radio.img [type="radio"]:checked + label:before, .custom-radio.color-circle [type="radio"]:checked + label:before, .custom-radio.topic [type="radio"]:checked + label:before, .timeline .custom-radio.event:before [type="radio"]:checked + label:before, .custom-radio.base-timer__label [type="radio"]:checked + label:before, .custom-radio.base-timer__text [type="radio"]:checked + label:before, .custom-radio.p_nav-link [type="radio"]:checked + label:before, .info-list li.custom-radio [type="radio"]:checked + label:before, .shepherd-element .shepherd-content footer .shepherd-buttons li .custom-radio.shepherd-button [type="radio"]:checked + label:before,
    .custom-radio.bold [type="radio"]:not(:checked) + label:before,
    .dashboard-date.style--five > i.custom-radio [type="radio"]:not(:checked) + label:before,
    .dropdown-menu.style--four a.custom-radio:hover [type="radio"]:not(:checked) + label:before,
    .dropdown-menu.style--four a.custom-radio.selected [type="radio"]:not(:checked) + label:before,
    .custom-radio.avatar [type="radio"]:not(:checked) + label:before,
    .custom-radio.full-date [type="radio"]:not(:checked) + label:before,
    .pagination ul li.custom-radio [type="radio"]:not(:checked) + label:before,
    .custom-radio.follow-btn [type="radio"]:not(:checked) + label:before,
    .custom-radio.link-btn [type="radio"]:not(:checked) + label:before,
    .custom-radio.details-btn [type="radio"]:not(:checked) + label:before,
    table.style--two td.custom-radio [type="radio"]:not(:checked) + label:before,
    table.cart_table tr td.custom-radio:first-child [type="radio"]:not(:checked) + label:before,
    table.cart_table tr td:last-child span.custom-radio [type="radio"]:not(:checked) + label:before,
    table.invoice-list-table.style-two td.custom-radio:nth-child(4) [type="radio"]:not(:checked) + label:before,
    table.style-two.contact-list-table td.custom-radio:nth-child(4) [type="radio"]:not(:checked) + label:before,
    table.invoice-list-table.style-two td.custom-radio:nth-child(5) [type="radio"]:not(:checked) + label:before,
    table.style-two.contact-list-table td.custom-radio:nth-child(5) [type="radio"]:not(:checked) + label:before,
    table.invoice-list.style-two td.custom-radio:nth-child(4) [type="radio"]:not(:checked) + label:before,
    table.invoice-list.style-two td.custom-radio:nth-child(5) [type="radio"]:not(:checked) + label:before,
    .ProgressBar-wrap .custom-radio.ProgressBar-percentage [type="radio"]:not(:checked) + label:before,
    .ProgressBar-wrap2 .custom-radio.ProgressBar-percentage [type="radio"]:not(:checked) + label:before,
    .progress-info div.custom-radio:not(:first-child) [type="radio"]:not(:checked) + label:before,
    .process-bar-wrapper.style--four .custom-radio.process-width [type="radio"]:not(:checked) + label:before,
    .notification-icon .custom-radio.count [type="radio"]:not(:checked) + label:before,
    .avatar .custom-radio.count [type="radio"]:not(:checked) + label:before,
    .sidebar .sidebar-body li.custom-radio.nav-category [type="radio"]:not(:checked) + label:before,
    #apex_radar-chart .custom-radio.apexcharts-title-text [type="radio"]:not(:checked) + label:before,
    .custom-radio.statistic-row.days [type="radio"]:not(:checked) + label:before,
    .product-details-content .custom-radio.product_title [type="radio"]:not(:checked) + label:before,
    .product-details-content .custom-radio.woocommerce-Price-amount [type="radio"]:not(:checked) + label:before,
    .product-details-content .woocommerce-product-details__short-description h5.custom-radio [type="radio"]:not(:checked) + label:before,
    .form-row label.custom-radio [type="radio"]:not(:checked) + label:before,
    .cart-collaterals .shop_table th.custom-radio [type="radio"]:not(:checked) + label:before,
    .cart-collaterals .shop_table td.custom-radio [type="radio"]:not(:checked) + label:before,
    .mail-list-item:hover .mail-text .custom-radio.msg [type="radio"]:not(:checked) + label:before,
    .main-mail:hover .mail-text .custom-radio.msg [type="radio"]:not(:checked) + label:before,
    .message:hover p.custom-radio [type="radio"]:not(:checked) + label:before,
    .message.active p.custom-radio [type="radio"]:not(:checked) + label:before,
    .assign_to .custom-radio.assign-content [type="radio"]:not(:checked) + label:before,
    .assign-tag .custom-radio.tag-text [type="radio"]:not(:checked) + label:before,
    .add-new_task .custom-radio.label-text [type="radio"]:not(:checked) + label:before,
    .task-details .custom-radio.label-text [type="radio"]:not(:checked) + label:before,
    .fc table.custom-radio [type="radio"]:not(:checked) + label:before,
    #projectTaskDetails .modal-content .project-main-title textarea.custom-radio [type="radio"]:not(:checked) + label:before,
    #projectTaskDetails .modal-content .checklist .process-bar-wrapper .custom-radio.process-name [type="radio"]:not(:checked) + label:before,
    #smartwizard .nav li a.custom-radio [type="radio"]:not(:checked) + label:before,
    #example-vertical > .steps ul li a.custom-radio [type="radio"]:not(:checked) + label:before,
    #example-vertical > .actions ul li a.custom-radio[href="#previous"] [type="radio"]:not(:checked) + label:before,
    .chip .chip-content > div.custom-radio [type="radio"]:not(:checked) + label:before,
    .chip .chip-content .custom-radio.img [type="radio"]:not(:checked) + label:before,
    .custom-radio.color-circle [type="radio"]:not(:checked) + label:before,
    .custom-radio.topic [type="radio"]:not(:checked) + label:before,
    .timeline .custom-radio.event:before [type="radio"]:not(:checked) + label:before,
    .custom-radio.base-timer__label [type="radio"]:not(:checked) + label:before,
    .custom-radio.base-timer__text [type="radio"]:not(:checked) + label:before,
    .custom-radio.p_nav-link [type="radio"]:not(:checked) + label:before,
    .info-list li.custom-radio [type="radio"]:not(:checked) + label:before,
    .shepherd-element .shepherd-content footer .shepherd-buttons li .custom-radio.shepherd-button [type="radio"]:not(:checked) + label:before {
        border-width: 2px !important;
    }

    .custom-radio.solid [type="radio"]:checked + label:before {
        border-width: 5px !important;
    }

    .custom-radio.solid [type="radio"]:not(:checked) + label:before {
        border-width: 9px !important;
    }

    .custom-radio.solid [type="radio"]:checked + label:after,
    .custom-radio.solid [type="radio"]:not(:checked) + label:after {
        display: none;
    }

    .custom-radio.light [type="radio"]:checked + label:before,
    .custom-radio.light [type="radio"]:not(:checked) + label:before {
        border-width: 0px !important;
    }

.d_input-group {
    position: relative;
}

    .d_input-group input {
        padding-right: 50px;
    }

    .d_input-group button {
        position: absolute;
        right: -2px;
        top: 0;
    }

        .d_input-group button svg {
            width: 18px;
        }

/* ************************
   03.1: Header
   ********************* */
.header {
    height: 90px;
}

    .header .main-header {
        -webkit-box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05);
        box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05);
        padding: 0 15px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

@media only screen and (max-width: 1024px) {
    .header .main-header {
        padding: 0;
    }
}

.header .logo {
    background-color: #fafafa;
    -ms-flex-preferred-size: 260px;
    flex-basis: 260px;
}

    .header .logo .mobile-logo {
        display: none;
    }

@media only screen and (max-width: 1399px) {
    .header .logo {
        -ms-flex-preferred-size: 90px;
        flex-basis: 90px;
    }

        .header .logo .default-logo {
            display: none;
        }

        .header .logo .mobile-logo {
            display: block;
            width: 35px;
            margin: 0 auto;
        }
}

body.sidebar-folded .header {
    -webkit-box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05);
}

    body.sidebar-folded .header .main-header {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

body.sidebar-folded.open-sidebar-folded .header {
    -webkit-box-shadow: none;
    box-shadow: none;
}

    body.sidebar-folded.open-sidebar-folded .header .main-header {
        -webkit-box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05);
        box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05);
    }

/* Main Header User */
.main-header-user {
    display: inline-block;
}

@media only screen and (max-width: 1399px) {
    .main-header-user .menu-icon {
        width: 25px;
        height: 25px;
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.main-header-user .user-profile .user-avatar {
    margin-right: 20px;
}

.main-header-user .user-profile img {
    width: 70px;
    height: 70px;
}

.main-header-user .user-profile .user-info .user-name {
    margin-bottom: 6px;
}

.main-header-user .user-profile .user-info .user-email {
    font-size: 14px;
    color: #aeaeae;
}

.menu-icon {
    display: block;
    width: 4px;
    height: 18px;
    margin-right: 14px;
    position: relative;
    z-index: 9;
}

    .menu-icon span {
        width: 4px;
        height: 4px;
        display: block;
        background-color: #aeaeae;
    }

        .menu-icon span:not(:last-child) {
            margin-bottom: 3px;
        }

    .menu-icon.style--two {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 20px;
        height: 30px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

        .menu-icon.style--two.w-14 {
            width: 14px;
            height: 20px;
        }

    .menu-icon.style--three span {
        background-color: #CAC6FB;
    }

.header-toogle-menu {
    width: 25px;
    height: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
}

.main-header-right {
    height: 100%;
}

    .main-header-right ul li {
        margin-left: 15px;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

@media only screen and (min-width: 1200px) and (max-width: 1500px) {
    .main-header-right ul li {
        margin-left: 12px;
    }
}

@media only screen and (max-width: 479px) {
    .main-header-right ul li {
        margin-left: 10px;
    }
}

.main-header-search {
    position: relative;
    width: 50px;
    height: 50px;
}

@media only screen and (max-width: 379px) {
    .main-header-search {
        width: 45px;
        height: 45px;
    }
}

.main-header-message .dropdown-menu {
    min-width: 360px;
}

@media only screen and (max-width: 379px) {
    .main-header-message .dropdown-menu {
        min-width: 300px;
    }
}

.main-header-date-time .time {
    font-size: 22px;
    margin-bottom: 2px;
}

.main-header-date-time .date {
    font-size: 14px;
    line-height: 1;
}

.main-header-date-time #point {
    -webkit-animation: mymove 1s ease infinite;
    animation: mymove 1s ease infinite;
}

@media only screen and (min-width: 1270px) and (max-width: 9999px) {
    .main-header-date-time {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 479px) {
    .main-header-language, .main-header-print {
        display: none;
    }
}

.main-header-language > a, .main-header-print > a {
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.header-icon {
    background-color: #FAFAFA;
    width: 50px;
    height: 50px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 379px) {
    .header-icon {
        width: 45px;
        height: 45px;
    }
}

.header-icon:hover {
    background-color: #a1c5df;
}

.notification-icon, .avatar {
    position: relative;
}

    .notification-icon .count, .avatar .count {
        width: 20px;
        height: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-size: 12px;
        position: absolute;
        right: 0px;
        top: -5px;
        line-height: 1;
    }

    .avatar .count {
        top: -9px;
        right: -2px;
    }

/* ************************
03.2: Sidebar
********************* */
.offcanvas-overlay {
    position: fixed;
    z-index: -1;
    opacity: 0;
}

    .offcanvas-overlay.active {
        z-index: 1028;
        opacity: .1;
    }

.sidebar {
    width: 260px;
    height: calc(100% - 90px);
    position: fixed;
    left: 0;
    top: 90px;
    z-index: 2;
    background-color: #FCFCFC;
    z-index: 1029;
}

@media only screen and (max-width: 1024px) {
    .sidebar {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.sidebar .sidebar-header {
    padding: 20px 21px 0px;
}

    .sidebar .sidebar-header .sidebar-toogle-pin {
        width: 35px;
        height: 35px;
        cursor: pointer;
        font-size: 24px;
        display: inline-block;
        margin-left: -5px;
    }

.sidebar .sidebar-body {
    padding: 0px 21px 100px;
}

@media only screen and (max-width: 1024px) {
    .sidebar .sidebar-body {
        padding-top: 11px;
    }
}

.sidebar .sidebar-body ul.nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.sidebar .sidebar-body ul ul {
    padding-left: 15px;
}

.sidebar .sidebar-body ul.sub-menu {
    display: none;
}

    .sidebar .sidebar-body ul.sub-menu li {
        padding: 0;
    }

        .sidebar .sidebar-body ul.sub-menu li:before {
            position: absolute;
            content: "";
            width: 5px;
            height: 1px;
            left: -17px;
            top: 15.5px;
        }

.sidebar .sidebar-body li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 5px;
}

    .sidebar .sidebar-body li.nav-category {
        padding: 0;
        font-size: 17px;
        text-transform: capitalize;
        margin: 10px 0 15px;
    }

    .sidebar .sidebar-body li i {
        position: absolute;
        left: 0;
        top: 7px;
        font-size: 18px;
        color: #aeaeae;
    }

    .sidebar .sidebar-body li a {
        display: block;
        padding: 5px;
        padding-left: 0px;
        height: 31px;
        overflow: hidden;
    }

        .sidebar .sidebar-body li a.disabled {
            cursor: not-allowed;
            opacity: .5;
        }

    .sidebar .sidebar-body li.has-sub-item:after {
        position: absolute;
        content: "";
        background-image: url(../img/svg/plus.svg);
        width: 12px;
        height: 12px;
        right: 0;
        top: 10px;
        z-index: -1;
    }

    .sidebar .sidebar-body li.has-sub-item.sub-menu-opened:after {
        height: 2px;
        top: 15px;
        background-image: url(../img/minus.png);
    }

    .sidebar .sidebar-body li.active i, .sidebar .sidebar-body li:hover i {
        color: var(--gold);
    }

    .sidebar .sidebar-body li.active > a.disabled i, .sidebar .sidebar-body li:hover > a.disabled i {
        color: #aeaeae;
    }

body.sidebar-folded .sidebar {
    width: 60px;
}

    body.sidebar-folded .sidebar .sidebar-header .sidebar-toogle-pin {
        opacity: 0.5;
    }

    body.sidebar-folded .sidebar .sidebar-body li i {
        color: #727272;
    }

    body.sidebar-folded .sidebar .sidebar-body li.nav-category {
        visibility: hidden;
        max-height: 24px;
    }

        body.sidebar-folded .sidebar .sidebar-body li.nav-category:before {
            position: absolute;
            content: "";
            width: 5px;
            height: 2px;
            left: 0;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            visibility: visible;
        }

    body.sidebar-folded .sidebar .sidebar-body li a span {
        visibility: hidden;
        opacity: 0;
    }

    body.sidebar-folded .sidebar .sidebar-body li.active i, body.sidebar-folded .sidebar .sidebar-body li:hover i {
        color: var(--gold);
    }

body.sidebar-folded.open-sidebar-folded .sidebar {
    width: 260px;
}

    body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body .sidebar-toogle-pin {
        opacity: 0.5;
    }

    body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body li i {
        color: #aeaeae;
    }

    body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body li.nav-category {
        visibility: visible;
    }

        body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body li.nav-category:before {
            display: none;
        }

    body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body li a span {
        visibility: visible;
        opacity: 1;
    }

    body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body li.active i, body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body li:hover i {
        color: var(--gold);
    }

body.sidebar-open .sidebar {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

body.sidebar-open .header .header-toogle-pin {
    opacity: 0.5;
}

/* ************************
   03.3: Footer
   ********************* */
.footer {
    height: 70px;
    padding-left: 290px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    background-color: #f0f0f0;
}

@media only screen and (max-width: 1024px) {
    .footer {
        padding: 0 15px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.footer.style--two {
    padding: 0 15px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

body.sidebar-folded .footer {
    padding-left: 90px;
}

@media only screen and (max-width: 1024px) {
    body.sidebar-folded .footer {
        padding: 0 15px;
    }
}

body.sidebar-folded.open-sidebar-folded .footer {
    padding-left: 290px;
}

@media only screen and (max-width: 1024px) {
    body.sidebar-folded.open-sidebar-folded .footer {
        padding: 0 15px;
    }
}

/* ************************
   03.4: Main Content
   ********************* */
.main-content {
    min-height: calc(100vh - 190px);
    margin-left: 275px;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin-top: 120px;
}

@media only screen and (max-width: 1024px) {
    .main-content {
        margin-left: 0;
    }
}

body.sidebar-folded .main-content {
    margin-left: 75px;
}

@media only screen and (max-width: 1024px) {
    body.sidebar-folded .main-content {
        margin-left: 0;
    }
}

/* ************************
   03.5: Aside
   ********************* */
.tasks_aside, .aside {
    width: 240px;
    height: 100%;
    margin-right: 15px;
    margin-left: 15px;
    background-color: var(--green);
}

.aside-body h4 {
    color: var(--white);
}

.aside-body li a.active {
    color: var(--gold);
}

.aside-body li a {
    color: var(--white);
}

@media only screen and (max-width: 767px) {
    .tasks_aside, .aside {
        width: auto;
    }
}



@media only screen and (min-width: 767px) and (max-width: 1500px) {
    .tasks_aside.calendar_aside, .calendar_aside.aside {
        width: 202px;
    }
}

@media only screen and (min-width: 767px) and (max-width: 1200px) {
    .tasks_aside.calendar_aside, .calendar_aside.aside {
        margin-right: 0;
    }
}

.aside-header {
    position: relative;
    padding: 20px;
}

    .aside-header .aside-btn-text {
        height: 60px;
        background-color: #a1c5df;
        width: calc(100% - 20px);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 10px;
        border-radius: 100px 0 0 100px;
    }

    .aside-header .btn-circle {
        position: absolute;
        left: 0;
        top: 0;
    }

.aside-body {
    padding: 20px;
}

    .aside-body.external-events {
        padding: 15px;
    }

    .aside-body li {
        margin-bottom: 12px;
    }

        .aside-body li a {
            position: relative;
            display: block;
        }

            .aside-body li a:after {
                width: 0px;
                height: 2px;
                left: -20px;
                top: 50%;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
            }

            .aside-body li a.active {
                font-weight: bold;
            }

                .aside-body li a.active:after {
                    width: 12px;
                }

        .aside-body li:hover a, .aside-body li.active a {
            font-weight: bold;
        }

            .aside-body li:hover a:after, .aside-body li.active a:after {
                width: 12px;
            }

        .aside-body li.nav-category {
            color: #aeaeae;
        }

        .aside-body li.less {
            position: relative;
            cursor: pointer;
        }

            .aside-body li.less:after {
                position: absolute;
                right: 0;
                top: 50%;
                width: 12px;
                height: 2px;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                transform: translateY(-50%);
                content: "";
                background-image: url(../img/svg/minus.svg);
            }

            .aside-body li.less.collapsed:after {
                background-image: url(../img/svg/plus.svg);
                height: 12px;
            }

        .aside-body li.lavel a:after {
            display: none;
        }

        .aside-body li.fc-event {
            background-color: transparent;
            font-size: 15px;
            margin-bottom: 20px;
        }

            .aside-body li.fc-event span.tag_color {
                width: 4px;
                height: 12px;
            }

            .aside-body li.fc-event.ui-draggable-dragging {
                background-color: #DBF7E8;
                padding: 5px 8px;
            }

                .aside-body li.fc-event.ui-draggable-dragging span.tag_color {
                    display: none;
                }

.chat_aside {
    position: relative;
    width: 375px;
    height: auto;
    margin-right: 15px;
    margin-left: 15px;
}

@media only screen and (min-width: 0px) and (max-width: 1200px) {
    .chat_aside {
        width: 330px;
    }
}

@media only screen and (max-width: 767px) {
    .chat_aside {
        width: auto;
    }
}

.chat_aside .aside-header {
    padding: 0;
}

    .chat_aside .aside-header .aside-header-top {
        padding: 20px 24px;
    }

    .chat_aside .aside-header .dropdown-button {
        position: absolute;
        right: 15px;
        top: 15px;
    }

    .chat_aside .aside-header .profile .content p {
        color: #C3BEFF;
    }

    .chat_aside .aside-header .aside-header-bottom {
        position: relative;
        z-index: 1;
    }

        .chat_aside .aside-header .aside-header-bottom:after {
            background: #6F51FF;
            background: -webkit-gradient(linear, left top, left bottom, from(#6F51FF), to(#0c2b4a));
            background: -o-linear-gradient(top, #6F51FF 0%, #0c2b4a 100%);
            background: linear-gradient(to bottom, #6F51FF 0%, #0c2b4a 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F51FF', endColorstr='#0c2b4a',GradientType=0);
            z-index: -1;
        }

        .chat_aside .aside-header .aside-header-bottom .nav-tabs {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

            .chat_aside .aside-header .aside-header-bottom .nav-tabs li:not(:last-child) {
                margin-right: 20px;
            }

            .chat_aside .aside-header .aside-header-bottom .nav-tabs li a {
                padding: 5px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                width: 40px;
                height: 45px;
                cursor: pointer;
            }

                .chat_aside .aside-header .aside-header-bottom .nav-tabs li a:hover, .chat_aside .aside-header .aside-header-bottom .nav-tabs li a.active {
                    background-color: rgba(255, 255, 255, 0.1);
                }

.chat_aside .aside-body {
    padding: 0px;
    height: calc(100vh - 335px);
    position: relative;
    top: 0px;
}

/* ************************
   04.1: Dashboard
   ********************* */
/* Increse */
.increase {
    max-width: 220px;
}

    .increase h2 {
        font-size: 64px;
    }

    .increase > p {
        color: #aeaeae;
    }

    .increase .card-title p {
        margin-left: -30px;
        position: relative;
        top: -4px;
    }

.congratulation-img {
    margin-right: 10px;
}

@media only screen and (max-width: 379px) {
    .congratulation-img {
        display: none;
    }
}

/* Area-chart box */
.area-chart-box {
    max-height: 193px;
}

/* Apex Column Chart */
#apex_column-chart .apexcharts-legend {
    right: 15px !important;
}

    #apex_column-chart .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker {
        margin-right: 5px;
    }

    #apex_column-chart .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text {
        top: -1px;
    }

/* Apex Radar Chart */
#apex_radar-chart .apexcharts-legend {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
    left: auto !important;
}

/* ************************
   04.2: Social Media Analytics
   ********************* */
.state2 {
    padding: 30px;
}

    .state2 h2 {
        color: #FF81A3;
    }

    .state2.style--two h2 {
        color: var(--gold)
    }

    .state2.style--three h2 {
        color: #09D1DE;
    }

    .state2.style--four h2 {
        color: #4C9EFE;
    }

/* Apex Pie2 Chart */
#apex_pie2-chart .apexcharts-legend-marker {
    margin-right: 7px;
}

/* Apex Area6 Chart */
#apex_area6-chart .apexcharts-legend-series {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* Social Statics */
.social-statics {
    background-color: #FFF4E6;
}

    .social-statics .statics-title {
        padding: 20px 20px 30px;
    }

    .social-statics .followers {
        background-color: #FFEBD1;
        padding: 10px 20px;
    }

    .social-statics .statics-bottom {
        padding: 35px 20px;
    }

    .social-statics.style--two {
        background-color: #FEE7FF;
    }

        .social-statics.style--two .followers {
            background-color: #FDD9FF;
        }

    .social-statics.style--three {
        background-color: #FFE2E6;
    }

        .social-statics.style--three .followers {
            background-color: #FFD4DA;
        }

/* Apex Pie3 Chart */
#apex_pie3-chart .apexcharts-tooltip.dark {
    color: #333333 !important;
}

.apex_pie3-chart-legend .color-box {
    width: 5px;
    height: 11px;
    background-color: #E580FD;
    margin-right: 10px;
}

    .apex_pie3-chart-legend .color-box.two {
        background-color: #FC7383;
    }

    .apex_pie3-chart-legend .color-box.three {
        background-color: var(--gold)
    }

    .apex_pie3-chart-legend .color-box.four {
        background-color: #FFB959;
    }

/* Browser Status */
.browser-status > div:not(:last-child) {
    margin-bottom: 19px;
}

.browser-status > div:first-child {
    margin-bottom: 10px;
}

/* ************************
   05.1: Ecommerce
   ********************* */
.state {
    padding: 27px 10px 30px;
}

    .state .state-icon {
        -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
        padding-right: 10px;
    }

.product-list-item .img img {
    width: 60px;
    height: 60px;
}

/* Apex Pie Chart */
#apex_pie-chart .apexcharts-tooltip.dark {
    color: #333333 !important;
}

#apex_pie-chart .apexcharts-legend-marker {
    position: relative;
    top: 1px !important;
}

/* ************************
   05.2: Ecommerce2
   ********************* */
@media only screen and (min-width: 1800px) and (max-width: 9999px) {
    .campaign-processbars {
        margin-right: 30px;
    }
}

.product-statistics {
    min-width: 920px;
}

.statistic-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 14px;
    text-transform: capitalize;
}

    .statistic-row.days {
        padding: 2px 20px;
    }

    .statistic-row > div {
        padding: 10px 20px;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

        .statistic-row > div:first-child {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-flex: 2;
            -ms-flex: 2;
            flex: 2;
        }

            .statistic-row > div:first-child img {
                width: 30px;
                height: 30px;
                margin-right: 15px;
                display: inline-block;
            }

/* ************************
05.3: Product Details
********************* */
#gal1 {
    margin-top: 20px;
}

    #gal1 a img {
        width: 75px;
        height: 67px;
        margin-right: 10px;
    }

/* Product Details */
.product-details {
    padding: 30px;
}

/* Product Details Content*/
.product-details-content .product_title {
    font-size: 20px;
    margin-bottom: 13px;
}

.product-details-content .woocommerce-Price-amount {
    font-size: 17px;
}

.product-details-content .price {
    margin-bottom: 30px;
}

.product-details-content .color-group {
    margin-bottom: 16px;
}

.product-details-content .product-review {
    margin-bottom: 30px;
}

.product-details-content .woocommerce-product-details__short-description {
    margin-top: 38px;
}

    .product-details-content .woocommerce-product-details__short-description h5 {
        margin-bottom: 15px;
    }

    .product-details-content .woocommerce-product-details__short-description p {
        line-height: 1.733;
    }

        .product-details-content .woocommerce-product-details__short-description p:not(:last-child) {
            margin-bottom: 20px;
        }

.list-heading {
    min-width: 60px;
}

/* Color Group */
.color-group ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .color-group ul li:not(:last-child) {
        margin-right: 15px;
    }

.color-group .color {
    width: 15px;
    height: 15px;
    display: block;
}

    .color-group .color.active {
        width: 25px;
        height: 25px;
    }

    .color-group .color.color1 {
        background-color: #2900FF;
    }

    .color-group .color.color2 {
        background-color: #F59D2A;
    }

    .color-group .color.color3 {
        background-color: #E72AF5;
    }

    .color-group .color.color4 {
        background-color: #00FF33;
    }

/* ************************
05.4: Cart List
********************* */
.cart-list {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 30px;
}

@media only screen and (max-width: 479px) {
    .cart-list {
        padding: 20px 15px;
    }
}

.shipping-content {
    border-bottom: 1px solid #aeaeae;
    padding-bottom: 30px;
}

    .shipping-content .form-row {
        margin-left: 0;
        margin-right: 0;
    }

.form-row label {
    margin-bottom: 8px;
}

.cart-collaterals {
    max-width: 480px;
    margin-left: auto;
    padding: 20px 0;
}

    .cart-collaterals.style--two {
        max-width: 420px;
    }

    /* Cart Collaterals */
    .cart-collaterals .shop_table th, .cart-collaterals .shop_table td {
        font-size: 17px;
        padding: 0px 50px 20px;
        border-bottom: 0;
    }

        .cart-collaterals .shop_table th:first-child, .cart-collaterals .shop_table td:first-child {
            text-align: right;
        }

@media only screen and (max-width: 479px) {
    .cart-collaterals .shop_table th, .cart-collaterals .shop_table td {
        padding: 0 20px 20px;
    }
}

.cart-collaterals .shop_table .order-total th, .cart-collaterals .shop_table .order-total td {
    border-top: 1px solid #aeaeae;
    font-size: 24px;
    padding-top: 10px;
}

.cart-collaterals .shop_table.style-two th, .cart-collaterals .shop_table.style-two td {
    font-size: 15px;
}

    .cart-collaterals .shop_table.style-two th:first-child, .cart-collaterals .shop_table.style-two td:first-child {
        font-size: 14px;
    }

    .cart-collaterals .shop_table.style-two th .Price-amount {
        font-size: 17px;
    }

.cart-collaterals .shop_table.style-two .order-total th, .cart-collaterals .shop_table.style-two .order-total td {
    border-top: 1px solid #aeaeae;
    font-size: 20px;
    padding-top: 10px;
}

.cart-collaterals .btn-w {
    width: 200px;
}

/* ************************
   06.1: Mail 
   ********************* */
.mail-header .dropdown-button .menu-icon {
    height: 22px;
}

/* Mail Header */
.mail-header-left > div, .invoice-header-left > div, .mail-header-left > button, .invoice-header-left > button {
    margin-right: 20px;
    line-height: 1;
}

.mail-header-left > button, .invoice-header-left > button {
    background-color: transparent;
    padding: 0;
}

.mail-header-left .custom-checkbox, .invoice-header-left .custom-checkbox {
    margin-top: 2px;
}

.mail-header-left .dropdown-button, .invoice-header-left .dropdown-button {
    margin-right: 20px;
}

.mail-header-left .star, .invoice-header-left .star {
    position: relative;
    top: -1px;
}

@media only screen and (max-width: 575px) {
    .mail-header-right, .invoice-header-right {
        width: 100%;
    }
}

.mail-header-right .search-form, .invoice-header-right .search-form {
    width: 100%;
    max-width: 740px;
}

    .mail-header-right .search-form .theme-input-group, .invoice-header-right .search-form .theme-input-group {
        height: 50px;
    }

        .mail-header-right .search-form .theme-input-group input, .invoice-header-right .search-form .theme-input-group input {
            height: 50px;
        }

        .mail-header-right .search-form .theme-input-group button, .invoice-header-right .search-form .theme-input-group button {
            padding: 5px 15px;
        }

/* Message List Item */
.mail-list-item,
.main-mail {
    padding: 15px 20px;
    position: relative;
}

@media only screen and (max-width: 575px) {
    .mail-list-item,
    .main-mail {
        padding: 15px;
    }
}

.mail-list-item:not(:last-child):after,
.main-mail:not(:last-child):after {
    width: calc(100% - 40px);
    left: 20px;
    bottom: 0;
    height: 1px;
    background-color: #F5F5F5;
    position: absolute;
    content: "";
}

.mail-list-item.selected,
.main-mail.selected {
    background-color: transparent;
}

    .mail-list-item.selected:after,
    .main-mail.selected:after {
        display: none;
    }

.mail-list-item .mail-text,
.main-mail .mail-text {
    margin-left: 10px;
    margin-right: 20px;
    width: 100%;
}

@media only screen and (max-width: 575px) {
    .mail-list-item .mail-text,
    .main-mail .mail-text {
        margin-right: 0;
    }
}

.mail-list-item .avatar,
.main-mail .avatar {
    margin-right: 20px;
}

@media only screen and (max-width: 575px) {
    .mail-list-item .avatar,
    .main-mail .avatar {
        margin-right: 14px;
    }
}

@media only screen and (max-width: 575px) {
    .mail-list-item .avatar img,
    .main-mail .avatar img {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }
}

.main-mail {
    padding: 30px;
}

@media only screen and (max-width: 479px) {
    .main-mail {
        padding: 20px 15px;
    }
}

.main-mail .avatar {
    width: 60px;
    min-width: 60px;
    height: 60px;
    margin-right: 20px;
}

@media only screen and (max-width: 575px) {
    .main-mail .avatar {
        margin-right: 0;
    }
}

@media only screen and (max-width: 575px) {
    .main-mail .avatar img {
        width: 60px;
        min-width: 60px;
        height: 60px;
    }
}

@media only screen and (max-width: 575px) {
    .mail-list-item-right,
    .mail-right {
        margin-left: 102px;
        margin-top: 5px;
    }
}

.mail-list-item-right > div, .mail-list-item-right > button,
.mail-right > div,
.mail-right > button {
    line-height: 1;
}

    .mail-list-item-right > div:not(:last-child), .mail-list-item-right > button:not(:last-child),
    .mail-right > div:not(:last-child),
    .mail-right > button:not(:last-child) {
        margin-right: 15px;
    }

@media only screen and (max-width: 575px) {
    .mail-list-item-right > div:not(:last-child), .mail-list-item-right > button:not(:last-child),
    .mail-right > div:not(:last-child),
    .mail-right > button:not(:last-child) {
        margin-right: 10px;
    }
}

.mail-list-item-right .status-btn,
.mail-right .status-btn {
    min-width: 60px;
    padding: 4px;
}

.mail-list-item-right .delete_mail,
.mail-right .delete_mail {
    background-color: transparent;
    padding: 0;
}

.mail-list-item-right .mail-date,
.mail-list-item-right .star,
.mail-right .mail-date,
.mail-right .star {
    position: relative;
    top: -1px;
}

.mail-body {
    line-height: 1.73;
}

/* Mail Compose */
.compose-wrap .replay-cc-bcc {
    padding: 20px 30px;
    background-color: transparent;
}

@media only screen and (max-width: 575px) {
    .compose-wrap .replay-cc-bcc {
        padding: 15px;
    }
}

.compose-wrap .mail-compose .form-group label {
    margin-right: 10px;
    text-align: right;
}

.compose-wrap .mail-compose .form-group label, .compose-wrap .mail-compose .form-group .cc-btns {
    -ms-flex-preferred-size: 80px;
    flex-basis: 80px;
}

@media only screen and (max-width: 767px) {
    .compose-wrap .mail-compose .form-group label, .compose-wrap .mail-compose .form-group .cc-btns {
        -ms-flex-preferred-size: 30px;
        flex-basis: 30px;
    }
}

.compose-wrap .mail-compose .form-group .close-btn {
    -ms-flex-preferred-size: 70px;
    flex-basis: 70px;
}

@media only screen and (max-width: 767px) {
    .compose-wrap .mail-compose .form-group .close-btn {
        -ms-flex-preferred-size: 20px;
        flex-basis: 20px;
    }
}

.mail-compose .form-group label, .mail-compose .form-group .cc-btns, .modal-body .form-group label, .modal-body .form-group .cc-btns {
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
}

@media only screen and (max-width: 767px) {
    .mail-compose .form-group label, .mail-compose .form-group .cc-btns, .modal-body .form-group label, .modal-body .form-group .cc-btns {
        -ms-flex-preferred-size: 30px;
        flex-basis: 30px;
    }
}

.mail-compose .form-group .cc-btns, .modal-body .form-group .cc-btns {
    margin-left: 10px;
}

@media only screen and (max-width: 767px) {
    .mail-compose .form-group .cc-btns, .modal-body .form-group .cc-btns {
        margin-left: 0;
        margin-top: 10px;
    }
}

.mail-compose .form-group .cc-btns .cc, .modal-body .form-group .cc-btns .cc {
    background-color: #DBF7E8;
    padding: 9px;
}

.mail-compose .form-group .cc-btns .cc-btn, .modal-body .form-group .cc-btns .cc-btn {
    cursor: pointer;
}

.mail-compose .form-group .close-btn, .modal-body .form-group .close-btn {
    margin-left: 20px;
    -ms-flex-preferred-size: 90px;
    flex-basis: 90px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: transparent;
}

@media only screen and (max-width: 767px) {
    .mail-compose .form-group .close-btn, .modal-body .form-group .close-btn {
        -ms-flex-preferred-size: 20px;
        flex-basis: 20px;
        margin-left: 0;
        margin-top: 10px;
    }
}

.mail-compose .form-group .close-btn svg, .modal-body .form-group .close-btn svg {
    cursor: pointer;
    position: relative;
    top: -2px;
}

.mail-compose .form-group .input-wrap, .modal-body .form-group .input-wrap {
    background-color: #fff;
    padding: 0px 10px;
}

@media only screen and (max-width: 767px) {
    .mail-compose .form-group .input-wrap, .modal-body .form-group .input-wrap {
        width: 100%;
        border-radius: 0;
        padding: 10px 5px;
    }
}

.mail-compose .form-group .input-wrap span, .modal-body .form-group .input-wrap span {
    background-color: #a1c5df;
    padding: 2px 10px;
    margin: 2px;
    height: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
}

    .mail-compose .form-group .input-wrap span:not(:first-child), .modal-body .form-group .input-wrap span:not(:first-child) {
        margin-left: 5px;
    }

    .mail-compose .form-group .input-wrap span svg, .modal-body .form-group .input-wrap span svg {
        width: 8px;
        height: 8px;
        margin-left: 5px;
        cursor: pointer;
    }

@media only screen and (max-width: 479px) {
    .mail-compose .form-group .input-wrap span, .modal-body .form-group .input-wrap span {
        font-size: 12px;
        padding: 0 8px;
        height: 20px;
    }
}

.mail-compose .form-group .input-wrap > div, .modal-body .form-group .input-wrap > div {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

    .mail-compose .form-group .input-wrap > div.dropdown-button, .modal-body .form-group .input-wrap > div.dropdown-button {
        -webkit-box-flex: 0;
        -ms-flex: 0;
        flex: 0;
    }

.mail-compose .form-group .input-wrap input, .modal-body .form-group .input-wrap input {
    padding: 0 15px;
    min-width: 100px;
}

/* Summernote Editor */
.summernote {
    background-color: #fff;
}

    .summernote .note-editor-bottom {
        padding: 20px 30px;
    }

@media only screen and (max-width: 575px) {
    .summernote .note-editor-bottom {
        padding: 15px 20px;
    }
}

.summernote .note-editor-bottom .delete {
    position: relative;
    top: -1px;
}

.summernote .note-frame .note-placeholder {
    padding: 20px 30px;
}

@media only screen and (max-width: 575px) {
    .summernote .note-frame .note-placeholder {
        padding: 15px 20px;
    }
}

.summernote .note-frame .note-editing-area .note-editable {
    padding: 20px 30px;
}

@media only screen and (max-width: 575px) {
    .summernote .note-frame .note-editing-area .note-editable {
        padding: 15px 20px;
    }
}

.summernote .note-frame .note-toolbar {
    border-bottom: 1px solid #f5f5f5;
    background-color: #fff;
    padding: 5px 22px;
}

@media only screen and (max-width: 575px) {
    .summernote .note-frame .note-toolbar {
        padding: 5px 12px;
    }
}

.summernote .note-frame .note-btn-group {
    margin-top: 0;
}

    .summernote .note-frame .note-btn-group button {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        padding-top: 9px;
        padding-bottom: 9px;
        background-color: transparent;
        border-radius: 0;
    }

        .summernote .note-frame .note-btn-group button:after {
            border-top-color: #444444;
        }

        .summernote .note-frame .note-btn-group button i, .summernote .note-frame .note-btn-group button span {
            color: #444444;
        }

.note-editor.note-frame .note-toolbar > .note-btn-group .note-btn:hover,
.note-editor.note-frame .note-toolbar > .note-btn-group .note-btn.active,
.note-editor.note-frame .note-toolbar > .note-btn-group .show > .note-btn {
    background-color: #f5f5f5;
}

/* ************************
   06.2: Chat 
   ********************* */
.message {
    padding: 20px 15px;
    position: relative;
}

    .message:after {
        left: 15px;
        width: calc(100% - 30px);
        height: 1px;
        background-color: #f5f5f5;
        bottom: 0;
    }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .message h4 {
        min-width: 120px;
    }
}

.message h4 span {
    position: relative;
    top: -2px;
}

.message .figure {
    position: relative;
    margin-right: 14px;
}

/* Chat Header */
.chat-header {
    padding: 10px 30px;
    padding-top: 20px;
}

@media only screen and (max-width: 575px) {
    .chat-header {
        padding: 10px;
    }
}

.chat-header-right .video-call a, .chat-header-right .chat-footer .voice-msg a, .chat-footer .chat-header-right .voice-msg a, .chat-header-right .chat-footer .attach-file a, .chat-footer .chat-header-right .attach-file a, .chat-header-right .chat-footer .submit a, .chat-footer .chat-header-right .submit a {
    line-height: 1;
}

.video-call, .chat-footer .voice-msg,
.chat-footer .attach-file,
.chat-footer .submit, .audio-call {
    padding: 10px;
    width: 40px;
    height: 40px;
    background-color: #a1c5df;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Chat Body */
.chat-body {
    padding: 30px;
    height: calc(100vh - 383px);
    position: relative;
    top: 0px;
}

@media only screen and (max-width: 575px) {
    .chat-body {
        padding: 15px 10px;
    }
}

.chat-messages {
    min-height: 100%;
}

.message-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 30px;
}

    .message-item .avatar {
        position: relative;
    }

    .message-item .bubble p {
        background-color: #f5f5f5;
        margin-bottom: 10px;
        display: inline-block;
        padding: 7px 20px;
    }

    .message-item.friend .bubble p {
        background-color: #DBF7E8;
    }

    .message-item.me .bubble p {
        background-color: #FFF4E6;
    }

/* Chat Footer */
.chat-footer {
    padding: 30px;
}

@media only screen and (max-width: 575px) {
    .chat-footer {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 10px;
    }
}

.chat-footer .voice-msg,
.chat-footer .attach-file,
.chat-footer .submit {
    width: 50px;
    height: 50px;
}

.chat-footer div .submit svg {
    position: relative;
    left: 1px;
}

.chat-footer form {
    line-height: 1;
}

@media only screen and (max-width: 575px) {
    .chat-footer form {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        margin: 0;
        width: 100%;
        margin-bottom: 10px;
    }
}

.chat-footer form.radius-10 textarea, .chat-footer form.dashboard-date.style--two textarea, .chat-footer form.custom-select.style--two textarea {
    border-radius: 10px;
}

.chat-footer form textarea {
    height: 50px !important;
}

/* Search box */
#search-tab ~ #search-box {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

    #search-tab ~ #search-box input {
        background: #6F51FF;
        background: -webkit-gradient(linear, left top, left bottom, from(#6F51FF), to(#0c2b4a));
        background: -o-linear-gradient(top, #6F51FF 0%, #0c2b4a 100%);
        background: linear-gradient(to bottom, #6F51FF 0%, #0c2b4a 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F51FF', endColorstr='#0c2b4a',GradientType=0);
        width: 100%;
        height: 100%;
        padding: 5px 10px;
        padding-right: 50px;
    }

        #search-tab ~ #search-box input::-webkit-input-placeholder {
            color: #ffffff !important;
        }

        #search-tab ~ #search-box input::-moz-placeholder {
            color: #ffffff !important;
        }

        #search-tab ~ #search-box input:-ms-input-placeholder {
            color: #ffffff !important;
        }

        #search-tab ~ #search-box input::-ms-input-placeholder {
            color: #ffffff !important;
        }

        #search-tab ~ #search-box input::placeholder {
            color: #ffffff !important;
        }

    #search-tab ~ #search-box .search-box-close {
        position: absolute;
        right: 14px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 1;
        cursor: pointer;
    }

/* ************************
   06.3: Todolist 
   ********************* */
.todo-list .single-row {
    padding: 0 1.25rem;
    position: relative;
}

    .todo-list .single-row:hover {
        border-color: transparent !important;
    }

    .todo-list .single-row.border-bottom.change-border-color {
        border-color: transparent !important;
    }

    .todo-list .single-row:after {
        top: 15%;
        width: 0;
        height: 70%;
    }

    .todo-list .single-row.level-urgent:after {
        background-color: #FFB959;
        width: 3px;
    }

    .todo-list .single-row.level-urgent .label-text {
        color: #FFB959;
    }

    .todo-list .single-row.level-important:after {
        background-color: #FC7383;
        width: 3px;
    }

    .todo-list .single-row.level-important .label-text {
        color: #FC7383;
    }

    .todo-list .single-row.level-not_important:after {
        background-color: #67CF94;
        width: 3px;
    }

    .todo-list .single-row.level-not_important .label-text {
        color: #67CF94;
    }

    .todo-list .single-row.level-not_urgent:after {
        background-color: #C491FF;
        width: 3px;
    }

    .todo-list .single-row.level-not_urgent .label-text {
        color: #C491FF;
    }

    .todo-list .single-row.level-average:after {
        background-color: #09D1DE;
        width: 3px;
    }

    .todo-list .single-row.level-average .label-text {
        color: #09D1DE;
    }

.todo-list .todo-title {
    line-height: 1.294;
}

.todo-list .todo-text {
    padding-right: 10px;
    display: block;
}

    .todo-list .todo-text.line-through .card-text {
        text-decoration: line-through;
        color: #aeaeae;
    }

.assign_to {
    position: relative;
    cursor: pointer;
    z-index: 1;
}

    .assign_to .assign-content {
        position: absolute;
        right: 10px;
        top: 2px;
        height: 20px;
        background-color: #FFF4E6;
        z-index: -1;
        width: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
    }

    .assign_to .todo-text {
        background-color: red;
    }

    .assign_to .assign-avatar {
        width: 30px;
        height: 30px;
        position: absolute;
        left: -10px;
        top: -5px;
    }

    .assign_to:hover .assign-content {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        padding: 1px 26px;
        overflow: visible;
        opacity: 1;
    }

.assign-tag {
    position: relative;
    display: block;
    height: 20px;
    background-color: #DBF7E8;
    padding-left: 40px;
    padding-right: 10px;
    margin-left: 10px;
}

    .assign-tag .tag-text {
        padding: 1px;
    }

    .assign-tag .assign-avatar {
        position: absolute;
        width: 30px;
        height: 30px;
        left: 0;
        top: -5px;
    }

    .assign-tag.front-end {
        background-color: #DBF7E8;
    }

    .assign-tag.back-end {
        background-color: #FFF4E6;
        color: #FFB959;
    }

.assign-btn {
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #aeaeae;
    cursor: pointer;
}

    .assign-btn svg line {
        stroke: #727272;
    }

    .assign-btn:hover svg line {
        stroke: #0c2b4a;
    }

/* Todo Priority */
.priority .assign-menu {
    color: #67CF94;
    padding: 6px 15px;
    background-color: #DBF7E8;
}

/* Add New Task */
.add-new_task .add-new-title, .task-details .add-new-title {
    margin-bottom: 35px;
}

    .add-new_task .add-new-title.style--two, .task-details .add-new-title.style--two {
        margin-bottom: 27px;
        line-height: 1.2;
    }

.add-new_task .label-text, .task-details .label-text {
    font-size: 14px;
    margin-bottom: 13px;
}

.add-new_task .todo_actions, .task-details .todo_actions {
    margin-bottom: 18px;
}

    .add-new_task .todo_actions > div, .task-details .todo_actions > div {
        margin-bottom: 17px;
    }

        .add-new_task .todo_actions > div:not(:last-child), .task-details .todo_actions > div:not(:last-child) {
            margin-right: 60px;
        }

@media only screen and (min-width: 320px) and (max-width: 440px) {
    .add-new_task .todo_actions > div:not(:last-child), .task-details .todo_actions > div:not(:last-child) {
        margin-right: 0;
    }
}

@media only screen and (max-width: 379px) {
    .add-new_task .todo_actions .todo_assaign, .task-details .todo_actions .todo_assaign {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important;
    }

        .add-new_task .todo_actions .todo_assaign .assign-tag:not(:last-child), .task-details .todo_actions .todo_assaign .assign-tag:not(:last-child) {
            margin-bottom: 15px;
        }
}

.task-details .show-date {
    display: inline-block;
    padding: 2px 15px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #FAFAFA;
}

    .task-details .show-date svg {
        margin-right: 10px;
    }

/* ************************
   06.4: Calendar 
   ********************* */
.fc table {
    font-size: 17px;
    border-spacing: 8px 4px;
    border-collapse: separate;
}

.fc-bg table tbody td.fc-day {
    background-color: #fff;
}

.fc-view {
    margin: 0 -4px;
}

    .fc-view > table {
        border-spacing: 0;
        border-collapse: collapse;
    }

        .fc-view > table thead th.fc-day-header {
            background-color: #ECF3FD;
            text-align: left;
            padding: 3px 10px;
            padding-left: 20px;
        }

@media only screen and (max-width: 479px) {
    .fc-view > table thead th.fc-day-header {
        padding-left: 8px;
    }
}

.fc-view > table thead th.fc-day-header.fc-sun {
    background-color: #FFF4E6;
    color: #FFB959;
}

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
    float: none;
    padding: 4px 10px;
    display: inline-block;
}

.fc-toolbar.fc-header-toolbar {
    padding: 12px 20px;
    margin-bottom: 4px;
}

    .fc-toolbar.fc-header-toolbar .fc-left h2 {
        display: inline-block;
        margin-right: 10px;
    }

    .fc-toolbar.fc-header-toolbar .fc-left .fc-button {
        padding: 0;
    }

    .fc-toolbar.fc-header-toolbar .fc-left .fc-today-button {
        margin-left: 15px;
        background-color: #DBF7E8;
        color: #67CF94;
        padding: 2px 16px;
        text-transform: capitalize;
        height: 25px;
    }

    .fc-toolbar.fc-header-toolbar .fc-button-group .fc-button {
        background-color: #F5F5F5;
        padding: 5px 20px;
        text-transform: capitalize;
    }

        .fc-toolbar.fc-header-toolbar .fc-button-group .fc-button:not(:last-child) {
            margin-right: 10px;
        }

.fc-event-container .fc-content {
    font-size: 12px;
}

    .fc-event-container .fc-content .fc-time {
        position: relative;
        margin-right: 12px;
    }

        .fc-event-container .fc-content .fc-time:after {
            position: absolute;
            right: -10;
            content: "m";
            bottom: 0;
        }

.fc-day-top.fc-today {
    position: relative;
}

    .fc-day-top.fc-today:after {
        position: absolute;
        content: "Today";
        color: #aeaeae;
        right: 10px;
        top: 8px;
        line-height: 1;
    }

.fc-button {
    background: none;
}

.m_style {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #D5D5D5;
    padding: 3px 10px;
    height: 32px;
    border-radius: 2px;
}

    .m_style label {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        margin-right: 10px;
    }

        .m_style label svg {
            width: 12px;
            height: 12px;
        }

    .m_style input {
        border: none;
        width: 100%;
    }

    .m_style select {
        border: none;
        width: 180px;
    }

        .m_style select.m-state {
            width: 70px;
        }

#createEventModal .modal-content {
    padding-top: 4px;
    padding-bottom: 4px;
}

#createEventModal .modal-header .calendar-modal-title label {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#createEventModal .modal-header .calendar-modal-private {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 33px;
    margin-left: 10px;
    cursor: pointer;
}

#createEventModal .modal-header .close {
    padding: 10px;
    position: absolute;
    right: 20px;
    top: 16px;
}

#createEventModal .calendar-modal-checkbox label {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    cursor: pointer;
}

#createEventModal .modal-footer .btn, #createEventModal .modal-footer #example-vertical > .actions ul li a[href="#next"], #example-vertical > .actions ul li #createEventModal .modal-footer a[href="#next"], #createEventModal .modal-footer #example-vertical > .actions ul li a[href="#finish"], #example-vertical > .actions ul li #createEventModal .modal-footer a[href="#finish"] {
    padding: 13px 25px;
}

#fullCalModal .modal-dialog {
    max-width: 290px;
}

@media only screen and (max-width: 575px) {
    #fullCalModal .modal-dialog {
        margin-left: auto;
        margin-right: auto;
    }
}

#fullCalModal .modal-content {
    border: 0;
    border-top: 3px solid #4F9DF8;
    padding-top: 4px;
    padding-bottom: 4px;
}

#fullCalModal .modal-header h6 {
    line-height: 1.28;
    text-transform: none;
    margin-top: 2px;
    margin-bottom: 4px;
}

#fullCalModal .calendar-modal-location,
#fullCalModal .calendar-modal-visibility {
    margin-bottom: 3px;
}

    #fullCalModal .calendar-modal-location .icon,
    #fullCalModal .calendar-modal-visibility .icon {
        width: 10px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        margin-right: 10px;
    }

#fullCalModal .calendar-modal-Event .color {
    width: 10px;
    height: 10px;
    background-color: #4F9DF8;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-right: 10px;
}

#fullCalModal .modal-footer {
    position: relative;
}

    #fullCalModal .modal-footer:after {
        width: calc(100% - 32px);
        left: 16px;
        background-color: #F5F5F5;
        height: 1px;
        top: 0;
        content: "";
        position: absolute;
    }

    #fullCalModal .modal-footer:before {
        width: 1px;
        height: 14px;
        left: 50%;
        background-color: #E5E5E5;
        top: 50%;
        margin-top: -7px;
        content: "";
        position: absolute;
    }

    #fullCalModal .modal-footer > button {
        position: relative;
        background-color: transparent;
        padding: 0;
        margin: 0;
    }

@media only screen and (max-width: 575px) {
    .fc-toolbar .fc-left,
    .fc-toolbar .fc-right {
        width: 100%;
    }
}

@media only screen and (max-width: 575px) {
    .fc-toolbar .fc-right {
        margin-top: 5px;
    }
}

@media only screen and (max-width: 1399px) {
    .fc-day-top.fc-today:after {
        font-size: 12px;
    }
}

@media only screen and (max-width: 1024px) {
    .fc-day-top.fc-today:after {
        font-size: 10px;
        right: auto;
        left: 3px;
        top: 30px;
    }
}

.fc-event.fc-resizable {
    background-color: #50cb89;
}

    .fc-event.fc-resizable .fc-content .fc-title {
        color: #fff;
    }

/* ************************
   06.5: Invoice 
   ********************* */
.invoice-header-left .dropdown-button {
    margin-left: 10px;
}

    .invoice-header-left .dropdown-button > a {
        background-color: #F5F5F5;
        padding: 10px 20px;
    }

        .invoice-header-left .dropdown-button > a i {
            margin-left: 5px;
            position: relative;
            top: 2px;
        }

/* Invoice Details */
.invoice-details-header {
    line-height: 1;
    padding: 15px 22px 15px 30px;
}

.invoice-pd {
    padding: 50px 60px;
}

@media only screen and (max-width: 479px) {
    .invoice-pd {
        padding: 30px 20px;
    }
}

.invoice-left .list-invoice li {
    color: #a1c5df;
}

    .invoice-left .list-invoice li a {
        color: #a1c5df;
    }

    .invoice-left .list-invoice li.location:before {
        content: url("../../assets/img/svg/location-icon.svg");
    }

    .invoice-left .list-invoice li.call:before {
        content: url("../../assets/img/svg/call-icon.svg");
    }

.invoice-right .status-list li:not(:last-child) {
    margin-bottom: 8px;
}

.invoice-right .status-list .key {
    color: #CAC6FB;
    min-width: 90px;
}

.status-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .status-list li:not(:last-child) {
        margin-bottom: 12px;
    }

.status-list span {
    display: inline-block;
}

.status-list .key {
    min-width: 100px;
}

.details-list-wrap {
    padding: 10px 40px 30px;
}

@media only screen and (max-width: 479px) {
    .details-list-wrap {
        padding: 0 15px 20px;
    }
}

.details-list-wrap .invoice-list-table.some-center th:not(:nth-child(1)):not(:nth-child(2)), .details-list-wrap table.some-center.contact-list-table th:not(:nth-child(1)):not(:nth-child(2)), .details-list-wrap .invoice-list-table.some-center td:not(:nth-child(1)):not(:nth-child(2)), .details-list-wrap table.some-center.contact-list-table td:not(:nth-child(1)):not(:nth-child(2)) {
    text-align: center;
}

.list-invoice li {
    position: relative;
    padding-left: 30px;
}

    .list-invoice li:not(:last-child) {
        margin-bottom: 15px;
    }

    .list-invoice li.location:before, .list-invoice li.call:before, .list-invoice li.mail:before, .list-invoice li.user:before {
        position: absolute;
        content: url("../../assets/img/svg/location-icon1.svg");
        left: 0;
        top: 2px;
    }

    .list-invoice li.call:before {
        content: url("../../assets/img/svg/call-icon1.svg");
    }

    .list-invoice li.user:before {
        content: url("../../assets/img/svg/user-icon.svg");
    }

    .list-invoice li.mail:before {
        content: url("../../assets/img/svg/mail-icon.svg");
    }

.invoice.edit input {
    max-width: 290px;
}

.invoice.edit .list-invoice li:before {
    top: 5px;
}

@media only screen and (max-width: 479px) {
    .proceed-to-checkout.invoice-edit {
        margin-right: 0px;
    }
}

.proceed-to-checkout.invoice-edit .btn, .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a[href="#next"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a[href="#next"], .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a[href="#finish"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a[href="#finish"] {
    min-width: 140px;
}

    .proceed-to-checkout.invoice-edit .btn:not(:last-child), .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a:not(:last-child)[href="#next"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#next"], .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a:not(:last-child)[href="#finish"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#finish"] {
        margin-right: 30px;
    }

@media only screen and (max-width: 479px) {
    .proceed-to-checkout.invoice-edit .btn:not(:last-child), .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a:not(:last-child)[href="#next"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#next"], .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a:not(:last-child)[href="#finish"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#finish"] {
        margin-right: 15px;
    }
}

/* ************************
   06.6: Contact 
   ********************* */
.contact-header, .project-header {
    padding: 15px 20px;
}

.contact-header-left .search-form, .project-header-left .search-form, .contact-header-left .add-title, .project-header-left .add-title {
    max-width: 625px;
}

.contact-header-right > div:not(:last-child), .project-header-right > div:not(:last-child) {
    margin-right: 20px;
}

@media only screen and (max-width: 575px) {
    .modal-upload-avatar .content p br {
        display: none;
    }
}

@media only screen and (max-width: 575px) {
    .contact-account-setting {
        width: 100%;
    }
}

.contact-account-setting input {
    padding-left: 15px;
    padding-right: 10px;
}

#contactAddModal .modal-dialog,
#contactEditModal .modal-dialog,
#addNewPersonModal .modal-dialog {
    max-width: 750px;
}

#contactAddModal .modal-body,
#contactEditModal .modal-body,
#addNewPersonModal .modal-dialog {
    padding: 30px 50px 40px 60px;
}

@media only screen and (max-width: 767px) {
    #contactAddModal .modal-body,
    #contactEditModal .modal-body,
    #addNewPersonModal .modal-dialog {
        padding: 30px 20px;
    }
}

#contactAddModal .modal-body .cancel,
#contactEditModal .modal-body .cancel,
#addNewPersonModal .modal-dialog .cancel {
    color: #FC7383;
}

#contactAddModal .modal-content,
#contactEditModal .modal-content {
    border: 0;
}

/* Contact Grid */
.contact-box .contact-head {
    padding: 15px;
    background-color: #ECF3FD;
    position: relative;
}

    .contact-box .contact-head .dropdown-button {
        position: absolute;
        right: 10px;
        top: 15px;
    }

        .contact-box .contact-head .dropdown-button .dropdown-menu {
            min-width: 90px;
        }

.contact-box .contact-body {
    padding: 15px;
}

    .contact-box .contact-body a {
        display: block;
        margin-bottom: 12px;
    }

/* ************************
   06.7: Project Manager 
   ********************* */
.project-header-right .custom-checkbox {
    top: 3px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    margin-right: 17px;
}

.project-box {
    position: relative;
    min-height: 100px;
    padding: 11px 10px 13px 14px;
}

    .project-box .custom-checkbox {
        position: absolute;
        left: -7px;
        top: 2px;
    }

    .project-box > a svg {
        width: 15px;
        height: 15px;
    }

        .project-box > a svg g line {
            stroke: #5591cf;
        }

    .project-box .dropdown-button .dropdown-menu {
        max-width: 140px;
    }

    .project-box.one {
        background-color: #FBF6D0;
    }

    .project-box.two {
        background-color: #CCF5F8;
    }

    .project-box.three {
        background-color: #a1c5df;
    }

    .project-box.four {
        background-color: #FEE7FF;
    }

    .project-box.five {
        background-color: #ECF3FD;
    }

    .project-box.six {
        background-color: #DBF7E8;
    }

    .project-box.seven {
        background-color: #FFF4E6;
    }

    .project-box.eight {
        background-color: #FFE2E6;
    }

.board-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 20px;
    padding-left: 1px;
    position: relative;
    min-height: 68vh;
}

.board {
    min-width: 376px;
    max-width: 376px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: block;
    white-space: initial;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    position: relative;
}

    .board:not(:last-child) {
        margin-right: 30px;
    }

@media only screen and (max-width: 479px) {
    .board {
        min-width: 330px;
        max-width: 330px;
    }
}

.board .board-header {
    background-color: #ECF3FD;
    padding: 10px;
}

.board .board-cards .board-card {
    position: relative;
    margin-bottom: 10px;
    padding: 10px;
    cursor: pointer;
}

    .board .board-cards .board-card img {
        width: 100%;
    }

    .board .board-cards .board-card:last-child {
        margin-bottom: 20px;
    }

    .board .board-cards .board-card:before {
        width: 3px;
        background-color: #FC7383;
        display: block;
        height: calc(100% - 20px);
        top: 10px;
        left: -1.5px;
    }

    .board .board-cards .board-card .left img, .board .board-cards .board-card .left svg {
        width: 15px;
        height: 15px;
    }

    .board .board-cards .board-card.label-2:before {
        background-color: #FFB959;
    }

    .board .board-cards .board-card.label-3:before {
        background-color: #E580FD;
    }

    .board .board-cards .board-card.label-4:before {
        background-color: #4F9DF8;
    }

    .board .board-cards .board-card.active {
        background-color: #FFE2E6;
    }

        .board .board-cards .board-card.active .left svg g circle, .board .board-cards .board-card.active .left svg g path {
            stroke: #FC7383;
        }

        .board .board-cards .board-card.active .left a {
            color: #FC7383;
        }

.board .board-composer {
    background-color: #f5f5f5;
}

    .board .board-composer > a {
        padding: 10px;
    }

    .board .board-composer .add-card svg g line {
        stroke: #727272;
    }

    .board .board-composer .add-another-card.style--two {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.add-card {
    padding: 10px;
    padding-bottom: 20px;
    position: relative;
    top: 0;
}

    .add-card .actions .cancel {
        color: #FC7383;
    }

    .add-card.add-another-list {
        width: 100%;
        padding-bottom: 10px;
        background-color: #ECF3FD;
    }

        .add-card.add-another-list .theme-input-style {
            height: 30px;
        }

.labels, .label-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .labels .label, .label-item .label {
        width: 10px;
        height: 20px;
        background-color: #FC7383;
        display: block;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

        .labels .label:not(:last-child), .label-item .label:not(:last-child) {
            margin-right: 8px;
        }

        .labels .label svg, .label-item .label svg {
            width: 8px;
            height: 8px;
        }

        .labels .label.add-label, .label-item .label.add-label {
            width: 20px;
        }

        .labels .label.label-2, .label-item .label.label-2 {
            background-color: #FFB959;
        }

        .labels .label.label-3, .label-item .label.label-3 {
            background-color: #E580FD;
        }

        .labels .label.label-4, .label-item .label.label-4 {
            background-color: #4F9DF8;
        }

        .labels .label.label-5, .label-item .label.label-5 {
            background-color: #67CF94;
        }

        .labels .label.label-6, .label-item .label.label-6 {
            background-color: #0079bf;
        }

        .labels .label.label-7, .label-item .label.label-7 {
            background-color: #00c2e0;
        }

        .labels .label.label-8, .label-item .label.label-8 {
            background-color: #67CF94;
        }

        .labels .label.label-9, .label-item .label.label-9 {
            background-color: #ff78cb;
        }

        .labels .label.label-10, .label-item .label.label-10 {
            background-color: #344563;
        }

        .labels .label.label-11, .label-item .label.label-11 {
            background-color: #b3bac5;
        }

#projectTaskDetails .modal-dialog {
    max-width: 780px;
}

@media only screen and (min-width: 0px) and (max-width: 800px) {
    #projectTaskDetails .modal-dialog {
        max-width: calc(100% - 20px);
    }
}

#projectTaskDetails .modal-content .project-main-title {
    position: relative;
}

    #projectTaskDetails .modal-content .project-main-title textarea {
        position: absolute;
        top: -5px;
        left: -10px;
        width: calc(100% + 10px);
        overflow: hidden;
        padding: 5px 10px;
        line-height: 1;
        z-index: -1;
        text-transform: capitalize;
    }

        #projectTaskDetails .modal-content .project-main-title textarea.isEditing {
            z-index: 1;
        }

#projectTaskDetails .modal-content .project-description .description.edit {
    margin-bottom: 90px;
}

#projectTaskDetails .modal-content .project-description .des-edit-actions {
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
    background-color: #f0f0f0;
    z-index: 2;
}

    #projectTaskDetails .modal-content .project-description .des-edit-actions textarea {
        background-color: #f0f0f0;
        padding: 0px;
    }

#projectTaskDetails .modal-content .project-description .des-edit-controls .icon-close {
    font-size: 23px;
}

#projectTaskDetails .modal-content .task-status a {
    text-decoration: underline;
}

#projectTaskDetails .modal-content .cover-img {
    height: 180px;
    max-height: 180px;
    position: relative;
}

    #projectTaskDetails .modal-content .cover-img .attach-file {
        width: auto;
        height: auto;
        padding: 5px 10px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        background-color: rgba(155, 155, 155, 0.5);
        right: 10px;
        bottom: 10px;
        position: absolute;
    }

        #projectTaskDetails .modal-content .cover-img .attach-file i {
            font-size: 14px;
            margin-right: 3px;
        }

#projectTaskDetails .modal-content .modal-close {
    width: 40px;
    height: 40px;
    background-color: rgba(155, 155, 155, 0.5);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

    #projectTaskDetails .modal-content .modal-close svg {
        width: 12px;
        height: 12px;
    }

        #projectTaskDetails .modal-content .modal-close svg path {
            stroke: #ffffff;
        }

#projectTaskDetails .modal-content .attachment img {
    max-width: 190px;
    max-height: 100px;
}

#projectTaskDetails .modal-content .checklist .process-bar-wrapper {
    margin-left: 35px;
    background-color: #f0f0f0;
    margin-bottom: 12px;
    width: calc(100% - 35px);
}

    #projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-width {
        left: -35px;
        top: -7px;
        font-size: 11px;
    }

    #projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-name {
        font-size: 16px;
        text-transform: lowercase;
        margin-bottom: 12px;
    }

        #projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-name:before {
            position: absolute;
            font-family: icofont;
            font-size: 18px;
            left: -35px;
            content: "\eed9";
            top: 0;
        }

    #projectTaskDetails .modal-content .checklist .process-bar-wrapper .action-btns {
        position: absolute;
        right: 0;
        bottom: 15px;
    }

        #projectTaskDetails .modal-content .checklist .process-bar-wrapper .action-btns .light-btn:not(:last-child), #projectTaskDetails .modal-content .checklist .process-bar-wrapper .action-btns span:not(:last-child) {
            margin-right: 4px;
        }

#projectTaskDetails .modal-content .checklist .checklist-items {
    margin-bottom: 10px;
}

#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item {
    margin-left: 35px;
    line-height: 1.8;
}

#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details {
    padding: 5px 0;
    z-index: 1;
    cursor: pointer;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details {
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
    }
}

#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details:after {
    width: calc(100% + 5px);
    height: 100%;
    left: -5px;
    position: absolute;
    content: "";
    top: 0;
    z-index: -1;
}

#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details .icon-delete {
    opacity: 0;
    visibility: hidden;
    padding: 5px;
}

#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details:hover:after {
    background-color: #f0f0f0;
}

#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details:hover .icon-delete {
    visibility: visible;
    opacity: 1;
}

#projectTaskDetails .modal-content .dashboard-date {
    margin-left: 26px;
}

#projectTaskDetails .modal-content .checklist-new-item .theme-input-style {
    height: 37px;
    padding: 6px 10px;
    margin: 10px 0;
}

#projectTaskDetails .modal-content .checklist-new-item .checklist-add-control-wrap {
    display: none;
}

#projectTaskDetails .modal-content .checklist-new-item .checklist-add-controls .icon-close {
    font-size: 26px;
    cursor: pointer;
}

#projectTaskDetails .modal-content .comment-edit {
    position: relative;
}

#projectTaskDetails .modal-content .edit-actions {
    left: -5px;
    top: 0;
    position: absolute;
    width: calc(100% + 10px);
    z-index: 1;
    padding: 10px;
}

    #projectTaskDetails .modal-content .edit-actions textarea {
        width: 100%;
    }

.file-attachments .attachment {
    position: relative;
}

    .file-attachments .attachment .attachment-close {
        position: absolute;
        top: -7px;
        left: -7px;
        opacity: 0;
        visibility: hidden;
        background-color: #FFE2E6;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

        .file-attachments .attachment .attachment-close svg {
            width: 7px;
            height: 7px;
        }

    .file-attachments .attachment:hover .attachment-close {
        opacity: 1;
        visibility: visible;
    }

#projectMemberModal, #projectLabelModal, #projectChecklistModal, #projectMoveModal, #projectCopyModal, #projectShareModal {
    position: fixed;
    z-index: 9999;
    left: -9999px;
    top: -9999px;
    min-width: 304px;
    max-width: 304px;
    display: none;
}

    #projectMemberModal .modal-content, #projectLabelModal .modal-content, #projectChecklistModal .modal-content, #projectMoveModal .modal-content, #projectCopyModal .modal-content, #projectShareModal .modal-content {
        padding: 15px 10px;
        border-radius: 3px;
    }

        #projectMemberModal .modal-content .modal-close, #projectLabelModal .modal-content .modal-close, #projectChecklistModal .modal-content .modal-close, #projectMoveModal .modal-content .modal-close, #projectCopyModal .modal-content .modal-close, #projectShareModal .modal-content .modal-close {
            position: absolute;
            cursor: pointer;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            right: 12px;
            top: 16px;
        }

            #projectMemberModal .modal-content .modal-close svg, #projectLabelModal .modal-content .modal-close svg, #projectChecklistModal .modal-content .modal-close svg, #projectMoveModal .modal-content .modal-close svg, #projectCopyModal .modal-content .modal-close svg, #projectShareModal .modal-content .modal-close svg {
                width: 12px;
                height: 12px;
            }

        #projectMemberModal .modal-content .modal-header, #projectLabelModal .modal-content .modal-header, #projectChecklistModal .modal-content .modal-header, #projectMoveModal .modal-content .modal-header, #projectCopyModal .modal-content .modal-header, #projectShareModal .modal-content .modal-header {
            padding-bottom: 13px;
            margin-bottom: 10px;
            border-color: #e8e8e8;
        }

        #projectMemberModal .modal-content .modal-body .theme-input-style, #projectLabelModal .modal-content .modal-body .theme-input-style, #projectChecklistModal .modal-content .modal-body .theme-input-style, #projectMoveModal .modal-content .modal-body .theme-input-style, #projectCopyModal .modal-content .modal-body .theme-input-style, #projectShareModal .modal-content .modal-body .theme-input-style {
            border-radius: 3px;
            padding: 5px 10px;
            height: 35px;
            -webkit-box-shadow: inset 0 0 0 2px #e8e8e8;
            box-shadow: inset 0 0 0 2px #e8e8e8;
        }

    #projectLabelModal .modal-header .back-btn {
        position: absolute;
        left: 10px;
        font-size: 20px;
        top: 7px;
        cursor: pointer;
    }

    #projectLabelModal .modal-content.add-labels {
        display: none;
    }

    #projectChecklistModal .checklist-copy-source {
        border: 2px solid #b6b6b6;
    }

    #projectCopyModal .modal-content .modal-body textarea.theme-input-style {
        height: 70px;
        padding: 10px;
        resize: auto;
    }

    #projectShareModal .modal-body .form-group .input-wrap {
        background-color: #f0f0f0;
        padding: 5px;
    }

        #projectShareModal .modal-body .form-group .input-wrap .theme-input-style {
            height: 25px;
            background-color: transparent;
        }

        #projectShareModal .modal-body .form-group .input-wrap .menu-icon span {
            padding: 0;
            margin: 0;
            height: 4px;
        }

            #projectShareModal .modal-body .form-group .input-wrap .menu-icon span:not(:last-child) {
                margin-bottom: 3px;
            }

    #projectShareModal .modal-body .form-group.comment {
        margin-bottom: 25px;
        display: none;
    }

        #projectShareModal .modal-body .form-group.comment textarea.theme-input-style {
            height: 70px;
        }

.project-board-select-wrap {
    background-color: #f0f0f0;
}

    .project-board-select-wrap .board {
        padding: 5px 10px 0;
    }

    .project-board-select-wrap select {
        background-color: #f0f0f0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 0 10px 8px;
        cursor: pointer;
    }

.select-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .select-grid > div:first-child {
        margin-right: 3%;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 65%;
        flex: 1 1 65%;
        max-width: 65%;
    }

    .select-grid > div:last-child {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 32%;
        flex: 1 1 32%;
        max-width: 32%;
    }

.checklist-items .checklist-item .custom-checkbox {
    top: 55%;
    width: 14px;
    height: 14px;
}

.checklist-items .checklist-item .item {
    padding-left: 26px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

/* Post Comments */
#projectTaskDetails .comments-area .single-comment {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #F5F5F5;
}

@media only screen and (max-width: 479px) {
    #projectTaskDetails .comments-area .single-comment {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

#projectTaskDetails .comments-area .single-comment .comment-content p {
    margin: 5px 0 3px;
}

#projectTaskDetails .comments-area ul.children {
    margin-left: 56px;
}

@media only screen and (max-width: 479px) {
    #projectTaskDetails .comments-area ul.children {
        margin-left: 15px;
    }
}

.board-members-list li {
    position: relative;
    border-radius: 3px;
}

    .board-members-list li.selected {
        background-color: #f0f0f0;
    }

    .board-members-list li.active {
        padding-right: 40px;
    }

        .board-members-list li.active .icon-check {
            position: absolute;
            width: 38px;
            height: 38px;
            display: block;
            right: 5px;
            padding: 10px;
            top: 0;
        }

            .board-members-list li.active .icon-check:after {
                content: "";
                position: absolute;
                left: 16px;
                top: 13px;
                width: 6px;
                height: 10px;
                border: solid #727272;
                border-width: 0 2px 2px 0;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }

.board-labels-list li a {
    font-size: 12px;
}

.board-labels-list li .label {
    width: calc(100% - 30px);
    padding: 5px 10px;
    height: 32px;
    display: block;
    border-radius: 3px;
    position: relative;
    -webkit-transition: padding 85ms,margin 85ms,-webkit-box-shadow 85ms;
    transition: padding 85ms,margin 85ms,-webkit-box-shadow 85ms;
    -o-transition: padding 85ms,margin 85ms,box-shadow 85ms;
    transition: padding 85ms,margin 85ms,box-shadow 85ms;
    transition: padding 85ms,margin 85ms,box-shadow 85ms,-webkit-box-shadow 85ms;
}

.board-labels-list li.active .icon-check {
    position: absolute;
    width: 32px;
    height: 32px;
    display: block;
    right: 0px;
    padding: 10px;
    top: 0;
}

    .board-labels-list li.active .icon-check:after {
        content: "";
        position: absolute;
        left: 13px;
        top: 10px;
        width: 6px;
        height: 10px;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

.board-labels-list li.selected .label {
    -webkit-box-shadow: -8px 0 rgba(0, 0, 0, 0.3);
    box-shadow: -8px 0 rgba(0, 0, 0, 0.3);
    margin-left: 4px;
}

.board-labels-select-color {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .board-labels-select-color li {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 17%;
        flex: 1 1 17%;
        max-width: 18%;
    }

        .board-labels-select-color li .label {
            width: 100%;
            height: 32px;
            display: block;
            border-radius: 3px;
            position: relative;
            -webkit-transition: padding 85ms,margin 85ms,-webkit-box-shadow 85ms;
            transition: padding 85ms,margin 85ms,-webkit-box-shadow 85ms;
            -o-transition: padding 85ms,margin 85ms,box-shadow 85ms;
            transition: padding 85ms,margin 85ms,box-shadow 85ms;
            transition: padding 85ms,margin 85ms,box-shadow 85ms,-webkit-box-shadow 85ms;
        }

        .edit-labels-no-color li.active .icon-check, .edit-labels-no-color .label-item.active .icon-check,
        .board-labels-select-color li.active .icon-check,
        .board-labels-select-color .label-item.active .icon-check {
            position: absolute;
            width: 32px;
            height: 32px;
            display: block;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            padding: 10px;
            top: 0;
        }

            .edit-labels-no-color li.active .icon-check:after, .edit-labels-no-color .label-item.active .icon-check:after,
            .board-labels-select-color li.active .icon-check:after,
            .board-labels-select-color .label-item.active .icon-check:after {
                content: "";
                position: absolute;
                left: 13px;
                top: 10px;
                width: 6px;
                height: 10px;
                border: solid #ffffff;
                border-width: 0 2px 2px 0;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }

.edit-labels-no-color .label-item .label {
    min-width: 48px;
    height: 32px;
    background-color: #b3bac5;
    border-radius: 3px;
    position: relative;
}

/* ************************
   06.8: File Manager 
   ********************* */
.file-header .search-form {
    max-width: 640px;
}

.file-header .custom-checkbox {
    top: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.file {
    margin-bottom: 20px;
    position: relative;
}

    .file .dropdown-button {
        visibility: hidden;
        opacity: 0;
    }

    .file .img {
        min-width: 40px;
    }

    .file:hover .dropdown-button, .file.active .dropdown-button {
        visibility: visible;
        opacity: 1;
    }

    .file .custom-checkbox {
        width: 18px;
        height: 18px;
        top: -10px;
        left: -10px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

/* Share Modal */
#shareModal .modal-dialog {
    max-width: 580px;
}

#shareModal .modal-content {
    border-radius: 3px;
    padding: 30px;
}

@media only screen and (max-width: 575px) {
    #shareModal .modal-content {
        padding: 15px 10px;
    }
}

#shareModal .modal-content .modal-close {
    position: absolute;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    right: 12px;
    top: 16px;
}

    #shareModal .modal-content .modal-close svg {
        width: 12px;
        height: 12px;
    }

#shareModal .modal-content .modal-header {
    padding-bottom: 13px;
    margin-bottom: 10px;
    border-color: #e8e8e8;
}

#shareModal .modal-content .modal-body .form-group .input-wrap {
    background-color: #f0f0f0;
    padding: 5px;
}

    #shareModal .modal-content .modal-body .form-group .input-wrap .theme-input-style {
        height: 25px;
        background-color: transparent;
        border-radius: 3px;
        padding: 5px 10px;
    }

    #shareModal .modal-content .modal-body .form-group .input-wrap .menu-icon span {
        padding: 0;
        margin: 0;
        height: 4px;
    }

        #shareModal .modal-content .modal-body .form-group .input-wrap .menu-icon span:not(:last-child) {
            margin-bottom: 3px;
        }

#shareModal .modal-content .modal-body .form-group.comment {
    margin-bottom: 25px;
    display: none;
}

    #shareModal .modal-content .modal-body .form-group.comment textarea.theme-input-style {
        height: 70px;
    }

@media only screen and (max-width: 575px) {
    #shareModal.style--two {
        width: 100%;
    }
}

#shareModal.style--two .modal-content {
    max-width: 585px;
    width: 585px;
}

@media only screen and (max-width: 767px) {
    #shareModal.style--two .modal-content {
        width: 565px;
    }
}

@media only screen and (max-width: 575px) {
    #shareModal.style--two .modal-content {
        width: calc(100% - 16px);
        margin-left: 8px;
    }
}

#shareModal.style--two .modal-content .form-group.comment {
    display: block;
}

/* File Manager Upload Modal */
#fileManagerUpload .modal-dialog {
    max-width: 1050px;
}

@media only screen and (max-width: 1024px) {
    #fileManagerUpload .modal-dialog {
        margin-left: 8px;
        margin-right: 8px;
    }
}

#fileManagerUpload .modal-close {
    position: absolute;
    right: 14px;
    top: 10px;
    z-index: 1;
}

/* File Details */
#fileDetails .modal-dialog {
    max-width: 585px;
    width: 585px;
}

@media only screen and (max-width: 575px) {
    #fileDetails .modal-dialog {
        width: calc(100% - 16px);
    }
}

#fileDetails .modal-body {
    padding: 30px;
}

@media only screen and (max-width: 575px) {
    #fileDetails .modal-body {
        padding: 20px;
    }
}

@media only screen and (max-width: 479px) {
    #fileDetails .modal-body {
        padding-top: 50px;
    }
}

#fileDetails .modal-body .modal-close {
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
}

#fileDetails .modal-body .left {
    margin-left: 30px;
    margin-right: 60px;
}

@media only screen and (max-width: 575px) {
    #fileDetails .modal-body .left {
        margin-left: 0;
        margin-right: 20px;
    }
}

/* Dropzone */
.dropzone {
    background: white;
    border-radius: 3px;
    border: 2px dashed #5591cf;
    -o-border-image: none;
    border-image: none;
    max-width: 1050px;
    width: 1050px;
    min-height: 540px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media only screen and (max-width: 1024px) {
    .dropzone {
        width: calc(100% - 16px);
    }
}

.dropzone.dz-started {
    display: block;
}

    .dropzone.dz-started .upload-icon {
        display: none;
    }

.dropzone.style--two {
    min-height: 345px;
    width: 100%;
    max-width: 100%;
    border-color: #CAC6FB;
    border-radius: 20px;
}

.dropzone.style--three {
    min-height: 275px;
    width: 100%;
    max-width: 100%;
    border-color: #CAC6FB;
    border-radius: 20px;
}

/* ************************
07.1: Form Element
********************* */
.form-element {
    padding: 37px 30px 40px;
}

@media only screen and (max-width: 479px) {
    .form-element {
        padding: 22px 15px 25px;
    }
}

.form-element.color-options, .form-element.horizontal-form, .form-element.basic-checkbox {
    padding: 27px 30px 30px;
}

.form-element.touchspin {
    padding: 25px 30px;
}

@media only screen and (max-width: 479px) {
    .form-element.touchspin {
        padding: 20px 15px;
    }
}

.custom-checkbox + label,
.custom-radio + label {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Input Group Addon */
.input-group.addon .input-group-prepend .input-group-text,
.input-group.addon .input-group-append .input-group-text {
    background-color: #ECF3FD;
}

    .input-group.addon .input-group-prepend .input-group-text:not(:first-child),
    .input-group.addon .input-group-append .input-group-text:not(:first-child) {
        margin-left: 2px;
    }

    .input-group.addon .input-group-prepend .input-group-text.style--two,
    .input-group.addon .input-group-append .input-group-text.style--two {
        border-radius: 5px 0 0 5px;
    }

    .input-group.addon .input-group-prepend .input-group-text.style--three,
    .input-group.addon .input-group-append .input-group-text.style--three {
        border-radius: 0 5px 5px 0;
    }

.input-group.addon .form-control {
    background-color: #f0f0f0;
    border-radius: 0 5px 5px 0;
    font-size: 15px;
    height: 40px;
}

    .input-group.addon .form-control.style--two {
        border-radius: 5px 0 0 5px;
    }

/* Range Slider */
input[type=range] {
    -webkit-appearance: none;
    margin: 13px 0;
    width: 100%;
}

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb {
        width: 100%;
        height: 10px;
        cursor: pointer;
        background-color: #CCF5F8;
        border-radius: 50px;
    }

    input[type=range]::-webkit-slider-thumb {
        border: 2px solid #09D1DE;
        height: 26px;
        width: 12px;
        border-radius: 50px !important;
        -webkit-appearance: none;
        margin-top: -8px;
    }

    input[type=range]::-moz-range-track, input[type=range]::-moz-range-thumb {
        width: 100%;
        height: 10px;
        cursor: pointer;
        background-color: #CCF5F8;
        border-radius: 50px;
    }

    input[type=range]::-moz-range-thumb {
        border: 2px solid #09D1DE;
        height: 26px;
        width: 12px;
    }

    input[type=range]::-ms-track {
        width: 100%;
        height: 10px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        border-width: 16px 0;
        color: transparent;
    }

    input[type=range]::-ms-fill-lower {
        background-color: #CCF5F8;
        border-radius: 50px;
    }

    input[type=range]::-ms-fill-upper {
        background-color: #CCF5F8;
        border-radius: 50px;
    }

    input[type=range]::-ms-thumb {
        border: 2px solid #09D1DE;
        height: 26px;
        width: 12px;
        border-radius: 50px;
        background-color: #CCF5F8;
        cursor: pointer;
    }

/* Switcher */
.switch {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 46px;
    height: 25px;
}

    .switch input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

        .switch input:checked ~ .control {
            background-color: #a1c5df;
        }

            .switch input:checked ~ .control:after {
                left: 21px;
            }

            .switch input:checked ~ .control .check {
                left: 21px;
            }

                .switch input:checked ~ .control .check:before {
                    width: 11px;
                    -webkit-transform: rotate(-45deg) translate(-2px, 14px);
                    -ms-transform: rotate(-45deg) translate(-2px, 14px);
                    transform: rotate(-45deg) translate(-2px, 14px);
                }

                .switch input:checked ~ .control .check:after {
                    width: 7px;
                    -webkit-transform: rotate(45deg) translate(13px, 5px);
                    -ms-transform: rotate(45deg) translate(13px, 5px);
                    transform: rotate(45deg) translate(13px, 5px);
                }

        .switch input:disabled ~ .control {
            background-color: #F5F5F5;
        }

            .switch input:disabled ~ .control .check:before {
                display: none;
            }

            .switch input:disabled ~ .control .check:after {
                -webkit-transform: rotate(0deg) translate(7px, 11px);
                -ms-transform: rotate(0deg) translate(7px, 11px);
                transform: rotate(0deg) translate(7px, 11px);
            }

    .switch .control {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 46px;
        -webkit-transition: background-color 0.15s ease-in;
        -o-transition: background-color 0.15s ease-in;
        transition: background-color 0.15s ease-in;
    }

        .switch .control:after {
            content: "";
            position: absolute;
            left: 0px;
            top: 0px;
            width: 25px;
            height: 25px;
            -webkit-transition: left 0.15s ease-in;
            -o-transition: left 0.15s ease-in;
            transition: left 0.15s ease-in;
        }

    .switch .check {
        width: 25px;
        height: 25px;
        position: absolute;
        -webkit-transition: .4s ease;
        -o-transition: .4s ease;
        transition: .4s ease;
        top: 0;
        left: 0;
    }

        .switch .check:before, .switch .check:after {
            height: 3px;
            border-radius: 10px;
            background: #fff;
            -webkit-transition: .4s ease;
            -o-transition: .4s ease;
            transition: .4s ease;
            content: "";
            position: absolute;
        }

        .switch .check:before {
            width: 11px;
            -webkit-transform: rotate(-45deg) translate(-3px, 12px);
            -ms-transform: rotate(-45deg) translate(-3px, 12px);
            transform: rotate(-45deg) translate(-3px, 12px);
        }

        .switch .check:after {
            width: 11px;
            -webkit-transform: rotate(45deg) translate(12px, 3px);
            -ms-transform: rotate(45deg) translate(12px, 3px);
            transform: rotate(45deg) translate(12px, 3px);
        }

    .switch.with-icon .control:after {
        display: none;
    }

    .switch.large {
        width: 70px;
        height: 40px;
    }

        .switch.large input:checked ~ .control:after {
            left: 30px;
        }

        .switch.large input:checked ~ .control .check {
            left: 30px;
        }

            .switch.large input:checked ~ .control .check:before {
                width: 16px;
                -webkit-transform: rotate(-45deg) translate(-3px, 23px);
                -ms-transform: rotate(-45deg) translate(-3px, 23px);
                transform: rotate(-45deg) translate(-3px, 23px);
            }

            .switch.large input:checked ~ .control .check:after {
                width: 10px;
                -webkit-transform: rotate(45deg) translate(22px, 7px);
                -ms-transform: rotate(45deg) translate(22px, 7px);
                transform: rotate(45deg) translate(22px, 7px);
            }

        .switch.large input:disabled ~ .control .check:after {
            -webkit-transform: rotate(0deg) translate(12px, 18px);
            -ms-transform: rotate(0deg) translate(12px, 18px);
            transform: rotate(0deg) translate(12px, 18px);
        }

        .switch.large .control {
            height: 40px;
            width: 70px;
        }

            .switch.large .control:after {
                width: 40px;
                height: 40px;
            }

        .switch.large .check {
            width: 40px;
            height: 40px;
        }

            .switch.large .check:before {
                width: 16px;
                -webkit-transform: rotate(-45deg) translate(-5px, 21px);
                -ms-transform: rotate(-45deg) translate(-5px, 21px);
                transform: rotate(-45deg) translate(-5px, 21px);
            }

            .switch.large .check:after {
                width: 16px;
                -webkit-transform: rotate(45deg) translate(21px, 5px);
                -ms-transform: rotate(45deg) translate(21px, 5px);
                transform: rotate(45deg) translate(21px, 5px);
            }

    .switch.small {
        width: 25px;
        height: 15px;
    }

        .switch.small input:checked ~ .control:after {
            left: 10px;
        }

        .switch.small input:checked ~ .control .check {
            left: 10px;
        }

            .switch.small input:checked ~ .control .check:before {
                width: 7px;
                -webkit-transform: rotate(-45deg) translate(-1px, 9px);
                -ms-transform: rotate(-45deg) translate(-1px, 9px);
                transform: rotate(-45deg) translate(-1px, 9px);
            }

            .switch.small input:checked ~ .control .check:after {
                width: 4px;
                -webkit-transform: rotate(45deg) translate(8px, 3px);
                -ms-transform: rotate(45deg) translate(8px, 3px);
                transform: rotate(45deg) translate(8px, 3px);
            }

        .switch.small input:disabled ~ .control .check:after {
            -webkit-transform: rotate(0deg) translate(4px, 6.5px);
            -ms-transform: rotate(0deg) translate(4px, 6.5px);
            transform: rotate(0deg) translate(4px, 6.5px);
        }

        .switch.small .control {
            height: 15px;
            width: 25px;
        }

            .switch.small .control:after {
                width: 15px;
                height: 15px;
            }

        .switch.small .check {
            width: 15px;
            height: 15px;
        }

            .switch.small .check:before {
                width: 7px;
                height: 2px;
                -webkit-transform: rotate(-45deg) translate(-2px, 7px);
                -ms-transform: rotate(-45deg) translate(-2px, 7px);
                transform: rotate(-45deg) translate(-2px, 7px);
            }

            .switch.small .check:after {
                width: 7px;
                height: 2px;
                -webkit-transform: rotate(45deg) translate(7px, 2px);
                -ms-transform: rotate(45deg) translate(7px, 2px);
                transform: rotate(45deg) translate(7px, 2px);
            }

    .switch.outline .control {
        border: 1px solid;
        background-color: transparent !important;
    }

        .switch.outline .control:after {
            top: -1px;
        }

    .switch.success input:checked ~ .control {
        background-color: #DBF7E8;
        border-color: #67CF94;
    }

        .switch.success input:checked ~ .control:after {
            background-color: #67CF94;
            -webkit-box-shadow: 0 5px 10px rgba(103, 207, 162, 0.7);
            box-shadow: 0 5px 10px rgba(103, 207, 162, 0.7);
        }

    .switch.success.glow input:checked ~ .control:after {
        -webkit-box-shadow: 0 5px 10px rgba(103, 207, 162, 0.7);
        box-shadow: 0 5px 10px rgba(103, 207, 162, 0.7);
    }

    .switch.info input:checked ~ .control {
        background-color: #CCF5F8;
        border-color: #09D1DE;
    }

        .switch.info input:checked ~ .control:after {
            background-color: #09D1DE;
        }

    .switch.info.glow input:checked ~ .control:after {
        -webkit-box-shadow: 0 5px 10px rgba(9, 209, 222, 0.7);
        box-shadow: 0 5px 10px rgba(9, 209, 222, 0.7);
    }

    .switch.brand input:checked ~ .control {
        background-color: #a1c5df;
        border-color: var(--gold);
    }

        .switch.brand input:checked ~ .control:after {
            background-color: var(--gold);
        }

    .switch.brand.glow input:checked ~ .control:after {
        -webkit-box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7);
        box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7);
    }

    .switch.warning input:checked ~ .control {
        background-color: #FFF4E6;
        border-color: #FFB959;
    }

        .switch.warning input:checked ~ .control:after {
            background-color: #FFB959;
        }

    .switch.warning.glow input:checked ~ .control:after {
        -webkit-box-shadow: 0 5px 10px rgba(255, 185, 89, 0.7);
        box-shadow: 0 5px 10px rgba(255, 185, 89, 0.7);
    }

    .switch.primary input:checked ~ .control {
        border-color: var(--gold);
    }

    .switch.primary.glow input:checked ~ .control:after {
        -webkit-box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7);
        box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7);
    }

    .switch.danger input:checked ~ .control {
        background-color: #FFE2E6;
        border-color: #FC7383;
    }

        .switch.danger input:checked ~ .control:after {
            background-color: #FC7383;
        }

    .switch.danger.glow input:checked ~ .control:after {
        -webkit-box-shadow: 0 5px 10px rgba(252, 115, 131, 0.7);
        box-shadow: 0 5px 10px rgba(252, 115, 131, 0.7);
    }

    .switch.dark.glow input:checked ~ .control:after {
        -webkit-box-shadow: 0 5px 10px rgba(174, 174, 174, 0.7);
        box-shadow: 0 5px 10px rgba(174, 174, 174, 0.7);
    }

/* Bootstrap Touchspin */
.input-group.bootstrap-touchspin {
    margin-bottom: 0;
    max-width: 240px;
}

    .input-group.bootstrap-touchspin.style--two {
        max-width: 345px;
    }

    .input-group.bootstrap-touchspin.shadow-v input {
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
    }

    .input-group.bootstrap-touchspin.shadow-v button.btn {
        -webkit-box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7) !important;
        box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7) !important;
    }

    .input-group.bootstrap-touchspin.large input {
        height: 45px;
        font-size: 16px;
    }

    .input-group.bootstrap-touchspin.large button.btn {
        width: 46px;
        font-size: 26px;
    }

    .input-group.bootstrap-touchspin.small input {
        height: 25px;
        font-size: 14px;
    }

    .input-group.bootstrap-touchspin.small button.btn {
        width: 26px;
        font-size: 15px;
    }

    .input-group.bootstrap-touchspin.warning button.btn {
        background-color: #FFB959;
    }

    .input-group.bootstrap-touchspin.success button.btn {
        background-color: #67CF94;
    }

    .input-group.bootstrap-touchspin.danger button.btn {
        background-color: #FC7383;
    }

    .input-group.bootstrap-touchspin input {
        height: 36px;
        background-color: #F5F5F5;
        font-size: 15px;
    }

    .input-group.bootstrap-touchspin button.btn {
        padding: 5px;
        width: 35px;
        font-size: 22px;
    }

        .input-group.bootstrap-touchspin button.btn.glyphicon {
            padding: 0;
            font-size: 20px;
        }

    .input-group.bootstrap-touchspin .input-group-text {
        background-color: #E9E9E9;
    }

    .input-group.bootstrap-touchspin .input-group-prepend .input-group-text {
        margin-left: 2px;
    }

    .input-group.bootstrap-touchspin .input-group-prepend button.btn {
        border-radius: 5px 0px 0px 5px;
    }

    .input-group.bootstrap-touchspin .input-group-append .input-group-text {
        margin-right: 2px;
    }

    .input-group.bootstrap-touchspin .input-group-append button.btn {
        border-radius: 0px 5px 5px 0px;
    }

.control-label {
    margin-bottom: 12px;
}

/* Bootstrap Touchspin Vertical button css */
.bootstrap-touchspin .input-group-btn-vertical {
    position: absolute;
    right: 0;
    height: 100%;
    z-index: 11;
}

    .bootstrap-touchspin .input-group-btn-vertical > .btn, .bootstrap-touchspin #example-vertical > .actions ul li .input-group-btn-vertical > a[href="#next"], #example-vertical > .actions ul li .bootstrap-touchspin .input-group-btn-vertical > a[href="#next"], .bootstrap-touchspin #example-vertical > .actions ul li .input-group-btn-vertical > a[href="#finish"], #example-vertical > .actions ul li .bootstrap-touchspin .input-group-btn-vertical > a[href="#finish"] {
        position: absolute;
        right: 0;
        height: 50%;
        padding: 0;
        line-height: 1;
    }

    .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
        border-radius: 0 5px 0 0;
        top: 0;
    }

        .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up:after {
            width: 100%;
            height: 1px;
            position: absolute;
            bottom: -1px;
            left: 0;
            content: "";
            z-index: 1;
            opacity: 0.3;
        }

    .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
        border-radius: 0 0 5px 0;
        bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

/* File Drop area Wrapper */
#file-drop-area-wrappper {
    padding: 50px;
}

@media only screen and (max-width: 575px) {
    #file-drop-area-wrappper {
        padding: 15px;
    }
}

select#locale {
    border: none;
    background: transparent;
    width: 80px;
}

/* Notes */
.note {
    padding: 8px 30px;
    border-radius: 10px;
}

@media only screen and (max-width: 575px) {
    .note {
        padding: 8px 15px;
    }
}

.note img, .note svg, .note i, .note b {
    margin-right: 8px;
    min-width: 22px;
}

.note a {
    text-decoration: underline;
    font-style: italic;
}

.note.warning {
    background-color: #FFF4E6;
}

    .note.warning b {
        color: #FFB959;
    }

.note.info {
    background-color: #CCF5F8;
}

    .note.info b {
        color: #09D1DE;
    }

/* ************************
07.2: Form Wizard
********************* */
#smartwizard .nav li a {
    font-size: 17px;
    height: 80px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (min-width: 0px) and (max-width: 640px) {
    #smartwizard .nav li a {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

#smartwizard .nav li:last-child {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
}

@media only screen and (min-width: 0px) and (max-width: 640px) {
    #smartwizard .nav li:last-child {
        margin-top: 10px;
    }
}

#smartwizard .nav li:last-child a {
    margin-left: 20px;
    margin-right: 20px;
    width: 80px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    border: 1px solid #DBF7E8;
    background: #fff;
}

    #smartwizard .nav li:last-child a:before, #smartwizard .nav li:last-child a:after {
        display: none;
    }

    #smartwizard .nav li:last-child a i {
        font-size: 50px;
    }

#smartwizard .card-body {
    padding-bottom: 0;
}

@media only screen and (max-width: 767px) {
    #smartwizard .card-body {
        padding: 0;
        padding-top: 20px;
    }
}

.step-done {
    padding: 100px 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .step-done .btn-circle {
        margin-bottom: 25px;
    }

    .step-done p {
        max-width: 510px;
    }

    .step-done > p {
        margin: 0 auto;
        text-align: center;
    }

.sw .toolbar button.disabled {
    display: none;
}

@media only screen and (max-width: 575px) {
    .sw .toolbar {
        padding: 0 15px 30px;
    }
}

.smartwizard2-top-title {
    margin-top: 27px;
    margin-bottom: 24px;
    padding: 0 30px;
}

#smartwizard2 {
    padding: 0 30px;
}

@media only screen and (max-width: 575px) {
    #smartwizard2 {
        padding: 0 15px;
    }
}

#smartwizard2 .toolbar {
    padding-top: 10px;
}

    #smartwizard2 .toolbar button.btn {
        padding: 13px 26px;
    }

#smartwizard2 .nav {
    margin-bottom: 30px;
}

    #smartwizard2 .nav li:last-child {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        overflow: hidden;
    }

#example-vertical > .steps {
    width: 240px;
    margin-right: 30px;
    float: left;
}

@media only screen and (max-width: 767px) {
    #example-vertical > .steps {
        width: 160px;
    }
}

@media only screen and (max-width: 575px) {
    #example-vertical > .steps {
        width: 100%;
        float: none;
    }
}

#example-vertical > .steps .current-info {
    position: absolute;
    left: -999em;
}

#example-vertical > .steps ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

@media only screen and (max-width: 575px) {
    #example-vertical > .steps ul {
        margin: 0 15px;
        margin-bottom: 30px;
    }
}

#example-vertical > .steps ul li {
    padding: 40px 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

@media only screen and (max-width: 575px) {
    #example-vertical > .steps ul li {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 20px 10px;
    }
}

#example-vertical > .steps ul li:last-child {
    display: none;
}

#example-vertical > .steps ul li:after {
    height: 100%;
    width: 5px;
    background-color: #f5f5f5;
    right: 0;
    top: 0;
    position: absolute;
    content: "";
}

@media only screen and (max-width: 575px) {
    #example-vertical > .steps ul li:after {
        height: 5px;
        width: 100%;
        left: 0;
        top: auto;
        bottom: 0;
    }
}

#example-vertical > .steps ul li.done:after, #example-vertical > .steps ul li.current:after {
    background-color: #67CF94;
}

#example-vertical > .steps ul li.done a i, #example-vertical > .steps ul li.current a i {
    color: var(--gold);
}

#example-vertical > .steps ul li.current:after {
    background-color: #8ef2b9;
}

#example-vertical > .steps ul li.error:after {
    background-color: #FC7383;
}

#example-vertical > .steps ul li a {
    font-size: 17px;
}

    #example-vertical > .steps ul li a .number {
        position: absolute;
        left: -999em;
    }

@media only screen and (max-width: 575px) {
    #example-vertical > .steps ul li a {
        text-align: center;
    }
}

#example-vertical > .steps ul li a i {
    display: block;
    margin-bottom: 10px;
}

#example-vertical > .content {
    float: left;
    width: calc(100% - 270px);
}

@media only screen and (max-width: 767px) {
    #example-vertical > .content {
        width: calc(100% - 190px);
    }
}

@media only screen and (max-width: 575px) {
    #example-vertical > .content {
        width: 100%;
        float: none;
    }
}

#example-vertical > .content > h3 {
    position: absolute;
    left: -999em;
}

#example-vertical > .actions {
    margin-left: 296px;
    padding-bottom: 30px;
}

@media only screen and (max-width: 767px) {
    #example-vertical > .actions {
        margin-left: 210px;
    }
}

@media only screen and (max-width: 575px) {
    #example-vertical > .actions {
        margin-top: 10px;
        margin-left: 15px;
    }
}

#example-vertical > .actions ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    #example-vertical > .actions ul li {
        display: inline-block;
    }

        #example-vertical > .actions ul li.disabled {
            display: none;
        }

        #example-vertical > .actions ul li:not(:last-child) {
            margin-right: 15px;
        }

        #example-vertical > .actions ul li a {
            display: inline-block;
        }

            #example-vertical > .actions ul li a[href="#next"], #example-vertical > .actions ul li a[href="#finish"] {
                padding: 13px 26px;
            }

            #example-vertical > .actions ul li a[href="#previous"] {
                color: #CAC6FB;
                padding: 10px 0;
            }

#example-vertical .step-done {
    padding: 70px 15px 100px;
    -webkit-box-align: initial;
    -ms-flex-align: initial;
    align-items: initial;
}

    #example-vertical .step-done > div {
        padding-left: 150px;
    }

@media only screen and (max-width: 1399px) {
    #example-vertical .step-done > div {
        padding-left: 0px;
    }
}

@media only screen and (max-width: 575px) {
    #example-vertical .card-body {
        padding: 0 15px;
    }
}

.vertical-step-wizard {
    min-height: 510px;
    overflow: hidden;
}

/* ************************
08.1: Widget
********************* */
.notifications a:not(:last-child), .news a:not(:last-child) {
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.notifications a span.time, .news a span.time {
    display: block;
    margin-bottom: 3px;
}

.profile-box {
    padding: 8px 14px;
    background-color: #FFF4E6;
    margin-bottom: 10px;
}

    .profile-box h4 {
        color: #FFB959;
    }

    .profile-box.style--two {
        background-color: #DBF7E8;
    }

        .profile-box.style--two h4 {
            color: #67CF94;
        }

    .profile-box.style--three {
        background-color: #FEE7FF;
    }

        .profile-box.style--three h4 {
            color: #E580FD;
        }

/* Chip */
.chip {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
}

    .chip > svg {
        position: relative;
        left: -5px;
    }

    .chip .chip-content {
        padding: 1.5px 15px;
        padding-left: 40px;
        background-color: #F5F5F5;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 20px;
    }

        .chip .chip-content > div {
            line-height: 20px;
        }

        .chip .chip-content.info {
            background-color: #CCF5F8;
            color: #09D1DE;
        }

        .chip .chip-content.c2, .chip a.chip-content:hover, .chip .dropdown-menu .dropdown-body a:hover .chip-content.main-text, .dropdown-menu .dropdown-body a:hover .chip .chip-content.main-text, .chip .dropdown-menu.style--two .dropdown-body a:hover .chip-content.time, .dropdown-menu.style--two .dropdown-body a:hover .chip .chip-content.time, .chip .chip-content.btn.preview, .chip #example-vertical > .actions ul li a.chip-content.preview[href="#next"], #example-vertical > .actions ul li .chip a.chip-content.preview[href="#next"], .chip #example-vertical > .actions ul li a.chip-content.preview[href="#finish"], #example-vertical > .actions ul li .chip a.chip-content.preview[href="#finish"], .chip .chip-content.btn.style--two, .chip #example-vertical > .actions ul li a.chip-content.style--two[href="#next"], #example-vertical > .actions ul li .chip a.chip-content.style--two[href="#next"], .chip #example-vertical > .actions ul li a.chip-content.style--two[href="#finish"], #example-vertical > .actions ul li .chip a.chip-content.style--two[href="#finish"], .chip .chip-content.btn.s_alert, .chip #example-vertical > .actions ul li a.chip-content.s_alert[href="#next"], #example-vertical > .actions ul li .chip a.chip-content.s_alert[href="#next"], .chip #example-vertical > .actions ul li a.chip-content.s_alert[href="#finish"], #example-vertical > .actions ul li .chip a.chip-content.s_alert[href="#finish"], .chip .chip-content.details-btn, .chip .chip-content.light-btn, .chip table.table-condensed thead tr:nth-child(2) th.chip-content, table.table-condensed thead tr:nth-child(2) .chip th.chip-content, .chip table.table-contextual .chip-content.details-btn:hover, table.table-contextual .chip .chip-content.details-btn:hover, .chip table.table-contextual .details-btn:hover i.chip-content, table.table-contextual .details-btn:hover .chip i.chip-content, .chip .sidebar .sidebar-body li.active > a.chip-content, .sidebar .sidebar-body .chip li.active > a.chip-content, .chip .sidebar .sidebar-body li:hover > a.chip-content, .sidebar .sidebar-body .chip li:hover > a.chip-content, .chip .fc-view > table thead th.chip-content.fc-day-header, .fc-view > table thead .chip th.chip-content.fc-day-header, .chip .notifications a:hover p.chip-content, .notifications a:hover .chip p.chip-content, .chip .news a:hover p.chip-content, .news a:hover .chip p.chip-content, .chip .chip-content.icon:hover, .chip .select2-container--default .select2-selection--multiple .chip-content.select2-selection__choice, .select2-container--default .select2-selection--multiple .chip .chip-content.select2-selection__choice, .chip .chip-content.p_nav-link, .chip .about-nav-tab a.chip-content.active, .about-nav-tab .chip a.chip-content.active, .chip .chip-content.iconwrap, .chip .dragable-list > div.ui-sortable-helper i.chip-content, .dragable-list > div.ui-sortable-helper .chip i.chip-content {
            background-color: #a1c5df;
        }

        .chip .chip-content.pink {
            background-color: #FEE7FF;
            color: #E580FD;
        }

        .chip .chip-content.warn {
            background-color: #FFF4E6;
            color: #FFB959;
        }

        .chip .chip-content.danger {
            background-color: #FFE2E6;
            color: #FC7383;
        }

        .chip .chip-content .img {
            width: 30px;
            height: 30px;
            overflow: hidden;
            position: absolute;
            background-color: #f5f5f5;
            border-color: #727272 !important;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            left: -0px;
            top: -5px;
        }

            .chip .chip-content .img.pink {
                background-color: #FEE7FF;
                color: #E580FD;
            }

            .chip .chip-content .img.info {
                background-color: #CCF5F8;
                color: #09D1DE;
            }

            .chip .chip-content .img.success {
                background-color: #DBF7E8;
                color: #67CF94;
            }

            .chip .chip-content .img.c2, .chip .chip-content a.img:hover, .chip .chip-content .dropdown-menu .dropdown-body a:hover .img.main-text, .dropdown-menu .dropdown-body a:hover .chip .chip-content .img.main-text, .chip .chip-content .dropdown-menu.style--two .dropdown-body a:hover .img.time, .dropdown-menu.style--two .dropdown-body a:hover .chip .chip-content .img.time, .chip .chip-content .img.btn.preview, .chip .chip-content #example-vertical > .actions ul li a.img.preview[href="#next"], #example-vertical > .actions ul li .chip .chip-content a.img.preview[href="#next"], .chip .chip-content #example-vertical > .actions ul li a.img.preview[href="#finish"], #example-vertical > .actions ul li .chip .chip-content a.img.preview[href="#finish"], .chip .chip-content .img.btn.style--two, .chip .chip-content #example-vertical > .actions ul li a.img.style--two[href="#next"], #example-vertical > .actions ul li .chip .chip-content a.img.style--two[href="#next"], .chip .chip-content #example-vertical > .actions ul li a.img.style--two[href="#finish"], #example-vertical > .actions ul li .chip .chip-content a.img.style--two[href="#finish"], .chip .chip-content .img.btn.s_alert, .chip .chip-content #example-vertical > .actions ul li a.img.s_alert[href="#next"], #example-vertical > .actions ul li .chip .chip-content a.img.s_alert[href="#next"], .chip .chip-content #example-vertical > .actions ul li a.img.s_alert[href="#finish"], #example-vertical > .actions ul li .chip .chip-content a.img.s_alert[href="#finish"], .chip .chip-content .img.details-btn, .chip .chip-content .img.light-btn, .chip .chip-content table.table-condensed thead tr:nth-child(2) th.img, table.table-condensed thead tr:nth-child(2) .chip .chip-content th.img, .chip .chip-content table.table-contextual .details-btn:hover i.img, table.table-contextual .details-btn:hover .chip .chip-content i.img, .chip .chip-content .sidebar .sidebar-body li.active > a.img, .sidebar .sidebar-body .chip .chip-content li.active > a.img, .chip .chip-content .sidebar .sidebar-body li:hover > a.img, .sidebar .sidebar-body .chip .chip-content li:hover > a.img, .chip .chip-content .fc-view > table thead th.img.fc-day-header, .fc-view > table thead .chip .chip-content th.img.fc-day-header, .chip .chip-content .notifications a:hover p.img, .notifications a:hover .chip .chip-content p.img, .chip .chip-content .news a:hover p.img, .news a:hover .chip .chip-content p.img, .chip .chip-content .img.icon:hover, .chip .chip-content .select2-container--default .select2-selection--multiple .img.select2-selection__choice, .select2-container--default .select2-selection--multiple .chip .chip-content .img.select2-selection__choice, .chip .chip-content .img.p_nav-link, .chip .chip-content .about-nav-tab a.img.active, .about-nav-tab .chip .chip-content a.img.active, .chip .chip-content .img.iconwrap, .chip .chip-content .dragable-list > div.ui-sortable-helper i.img, .dragable-list > div.ui-sortable-helper .chip .chip-content i.img {
                background-color: #a1c5df;
                color: var(--gold);
                border-color: #5591cf !important;
            }

            .chip .chip-content .img.danger {
                background-color: #FFE2E6;
                color: #FC7383;
            }

.color-circle {
    width: 100px;
    height: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* ************************
08.2: Icons
********************* */
.icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

    .icon i {
        font-size: 24px;
    }

.icon__name {
    line-height: 1;
    margin-left: 14px;
    position: relative;
    text-transform: lowercase;
}

/* ************************
09.1: Faq
********************* */
.topic {
    height: 80px;
    color: #E580FD;
    background-color: #FEE7FF;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px;
    margin-bottom: 20px;
}

.faq:not(:last-child) {
    margin-bottom: 35px;
}

.faq h5 {
    position: relative;
    padding-left: 20px;
    margin-bottom: 16px;
    line-height: 1.2;
}

    .faq h5:after {
        width: 10px;
        height: 10px;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        content: "";
        position: absolute;
    }

/* ************************
09.2: Price
********************* */
.price-box.active {
    -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.05);
}

.price-header {
    background-color: #09D1DE;
}

    .price-header.enterprise {
        background-color: #C491FF;
    }

.p_header-img,
.p_header-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 5px;
}

.p_header-img {
    background-color: rgba(255, 255, 255, 0.15);
    width: 160px;
    height: 160px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 479px) {
    .p_header-img {
        width: 140px;
        height: 140px;
    }
}

.p_header-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 30px;
}

@media only screen and (max-width: 479px) {
    .p_header-content {
        padding-left: 14px;
    }
}

.p_header-content h1 {
    margin-bottom: 3px;
}

.p_header-content h3 {
    margin-bottom: 5px;
}

.p_header-content h3, .p_header-content p {
    opacity: 0.70;
}

.price-body {
    background-color: #FAFAFA;
    padding: 40px;
}

@media only screen and (max-width: 479px) {
    .price-body {
        padding: 30px 20px;
    }
}

.price-body h5 {
    text-transform: none;
}

.price-body ul li {
    padding-left: 24px;
    position: relative;
}

    .price-body ul li:not(:last-child) {
        margin-bottom: 12px;
    }

    .price-body ul li i {
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

/* ************************
09.3: Timeline
********************* */
.timeline {
    border-left: 5px solid #a1c5df;
    letter-spacing: 0.5px;
    position: relative;
    line-height: 1.4em;
    padding: 0 30px;
    list-style: none;
    max-width: 70%;
    margin-left: 24%;
}

@media only screen and (max-width: 767px) {
    .timeline {
        margin-left: 0;
        max-width: 100%;
        padding-right: 0;
        padding-left: 20px;
    }
}

.timeline.style--two {
    padding-left: 60px;
    max-width: 100%;
    margin: 0;
    border: 0;
    z-index: 1;
    padding-bottom: 30px;
}

@media only screen and (max-width: 767px) {
    .timeline.style--two {
        padding-left: 50px;
        padding-right: 10px;
    }
}

.timeline.style--two:after {
    content: "";
    position: absolute;
    left: 25.5px;
    top: 3px;
    height: calc(100% - 36px);
    width: 5px;
    background-color: #a1c5df;
    z-index: -1;
    border-radius: 50px;
}

.timeline.style--two .event:before {
    left: 70px;
    min-width: auto;
    font-weight: normal;
}

.timeline .event {
    position: relative;
}

    .timeline .event:not(:last-child) {
        margin-bottom: 26px;
    }

    .timeline .event span {
        font-size: 14px;
        display: block;
        margin-bottom: 5px;
    }

    .timeline .event h4 {
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .timeline .event:before,
    .timeline .event:after {
        position: absolute;
        display: block;
        top: 0;
    }

    .timeline .event:before {
        left: -190px;
        content: attr(data-date);
        text-align: right;
        min-width: 120px;
    }

@media only screen and (max-width: 767px) {
    .timeline .event:before {
        left: 70px;
    }
}

.timeline .event:after {
    left: -43px;
    content: url(../img/png-icon/time.png);
}

@media only screen and (max-width: 767px) {
    .timeline .event:after {
        left: -33px;
    }
}

/* ************************
09.4: Account Setting
********************* */
.upload-avatar {
    margin-top: -38px;
}

@media only screen and (min-width: 0px) and (max-width: 1500px) {
    .upload-avatar {
        margin-top: 10px;
    }
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    background-color: #f0f0f0;
    border-radius: 50px;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #a1c5df;
        border-radius: 50px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        padding: 5px 10px;
        line-height: 1;
        margin-left: 10px;
    }

        .select2-container--default .select2-selection--multiple .select2-selection__choice button {
            -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
            order: 1;
            font-size: 20px;
        }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
        position: relative;
        bottom: -2px;
    }

.switch-wrap {
    min-width: 70px;
}

/* ************************
09.5: Authentication
********************* */
.auth-card {
    padding: 0 100px 0;
}

.login_bg {
    background: url(../img/bg.jpg) no-repeat center center;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}

    .login_bg::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(49, 121, 81, 0.95);
    }
/* ************************
09.6: Coming Soon
********************* */
#DateCountdown {
    margin: 80px 0;
    width: 100%;
    height: 180px;
}

@media only screen and (max-width: 1024px) {
    #DateCountdown {
        height: 150px;
    }
}

@media only screen and (max-width: 767px) {
    #DateCountdown {
        height: 120px;
    }
}

@media only screen and (max-width: 575px) {
    #DateCountdown {
        height: 80px;
        margin: 50px 0;
    }
}

.time_circles {
    position: relative;
    width: 720px;
    height: 100%;
    margin: 0 auto;
}

@media only screen and (max-width: 1024px) {
    .time_circles {
        width: 600px;
    }
}

@media only screen and (max-width: 767px) {
    .time_circles {
        width: 480px;
    }
}

@media only screen and (max-width: 575px) {
    .time_circles {
        width: 320px;
    }
}

.time_circles > div {
    position: absolute;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

    .time_circles > div > h4 {
        margin: 0;
        padding: 0;
        text-align: center;
        text-transform: uppercase;
        line-height: 1;
    }

@media only screen and (max-width: 767px) {
    .time_circles > div > h4 {
        font-size: 10px !important;
    }
}

@media only screen and (max-width: 575px) {
    .time_circles > div > h4 {
        font-size: 8px !important;
    }
}

.time_circles > div > span {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1;
    font-weight: bold;
    font-size: 36px !important;
    margin-bottom: 2px;
}

@media only screen and (max-width: 767px) {
    .time_circles > div > span {
        font-size: 26px !important;
    }
}

@media only screen and (max-width: 575px) {
    .time_circles > div > span {
        font-size: 17px !important;
    }
}

/* ************************
09.7: Miscellaneos
********************* */
.maintenance-shape {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.newsletter-form {
    max-width: 510px;
    margin: 0 auto;
    position: relative;
}

    .newsletter-form input {
        background-color: #ffffff;
    }

        .newsletter-form input:focus {
            background-color: #ffffff;
        }

.maintenance-img {
    position: relative;
    margin-left: 120px;
}

@media only screen and (max-width: 1024px) {
    .maintenance-img {
        margin-left: 0;
    }
}

.maintenance-content {
    padding-top: 176px;
    margin-bottom: 167px;
}

@media only screen and (max-width: 767px) {
    .maintenance-content {
        padding-top: 100px;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .maintenance-content {
        width: 900px;
        margin-left: -400px;
    }
}

/* Session Timeout */
.session-timeout {
    width: 300px;
    padding: 40px 20px;
    text-align: center;
}

    .session-timeout #circular {
        margin: 0 auto;
        display: inline-block;
    }

.base-timer {
    position: relative;
    width: 150px;
    height: 150px;
}

.base-timer__svg {
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
}

.base-timer__circle {
    fill: none;
    stroke: none;
}

.base-timer__path-elapsed {
    stroke-width: 3px;
    stroke: #f5f5f5;
}

.base-timer__path-remaining {
    stroke-width: 3px;
    stroke-linecap: round;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transition: 1s linear all;
    -o-transition: 1s linear all;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
}

    .base-timer__path-remaining.c2, a.base-timer__path-remaining:hover, .dropdown-menu .dropdown-body a:hover .base-timer__path-remaining.main-text, .dropdown-menu.style--two .dropdown-body a:hover .base-timer__path-remaining.time, .base-timer__path-remaining.btn.preview, #example-vertical > .actions ul li a.base-timer__path-remaining.preview[href="#next"], #example-vertical > .actions ul li a.base-timer__path-remaining.preview[href="#finish"], .base-timer__path-remaining.btn.style--two, #example-vertical > .actions ul li a.base-timer__path-remaining.style--two[href="#next"], #example-vertical > .actions ul li a.base-timer__path-remaining.style--two[href="#finish"], .base-timer__path-remaining.btn.s_alert, #example-vertical > .actions ul li a.base-timer__path-remaining.s_alert[href="#next"], #example-vertical > .actions ul li a.base-timer__path-remaining.s_alert[href="#finish"], .base-timer__path-remaining.details-btn, .base-timer__path-remaining.light-btn, table.table-condensed thead tr:nth-child(2) th.base-timer__path-remaining, table.table-contextual .base-timer__path-remaining.details-btn:hover, table.table-contextual .details-btn:hover i.base-timer__path-remaining, .sidebar .sidebar-body li.active > a.base-timer__path-remaining, .sidebar .sidebar-body li:hover > a.base-timer__path-remaining, .fc-view > table thead th.base-timer__path-remaining.fc-day-header, .notifications a:hover p.base-timer__path-remaining, .news a:hover p.base-timer__path-remaining, .base-timer__path-remaining.icon:hover, .select2-container--default .select2-selection--multiple .base-timer__path-remaining.select2-selection__choice, .base-timer__path-remaining.p_nav-link, .about-nav-tab a.base-timer__path-remaining.active, .base-timer__path-remaining.iconwrap, .dragable-list > div.ui-sortable-helper i.base-timer__path-remaining {
        color: var(--gold);
    }

.base-timer__label,
.base-timer__text {
    position: absolute;
    width: 150px;
    height: 150px;
    top: -15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 36px;
}

.base-timer__text {
    font-size: 14px;
    top: 15px;
    text-transform: uppercase;
}

#modalSessionTimeout .modal-dialog {
    max-width: 300px;
}

/* ************************
09.8: Profile
********************* */
.profile-pic .upload-button, .cover-img .upload-button {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    right: 20px;
    bottom: 20px;
    padding: 8px 15px;
    z-index: 1;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

@media only screen and (max-width: 767px) {
    .profile-pic .upload-button, .cover-img .upload-button {
        padding: 5px 10px;
        right: 10px;
        bottom: 5px;
        font-size: 12px;
    }

        .profile-pic .upload-button svg, .cover-img .upload-button svg {
            width: 16px;
            margin-right: 5px !important;
        }
}

.profile-pic .upload-button .file-input, .cover-img .upload-button .file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.profile-pic {
    position: relative;
    width: 220px;
    height: 250px;
    margin-top: -164px;
}

@media only screen and (max-width: 767px) {
    .profile-pic {
        width: 120px;
        height: 150px;
        margin-top: -60px;
    }
}

.profile-pic .upload-button {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    right: 20px;
    bottom: 20px;
    padding: 8px 15px;
    z-index: 1;
}

@media only screen and (max-width: 767px) {
    .profile-pic .upload-button {
        padding: 5px 10px;
        right: 0;
        bottom: 5px;
        font-size: 12px;
    }
}

.profile-pic .upload-button .file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.profile-pic img {
    z-index: 5;
    border: 6px solid #ffffff;
}

.profile-pic:after {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    left: 6px;
    top: 6px;
    position: absolute;
    content: "";
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
}

.profile-pic .upload-button {
    opacity: 0;
    right: 15px;
}

.profile-pic:hover:after {
    opacity: 1;
}

.profile-pic:hover .upload-button {
    opacity: 1;
    right: 20px;
}

@media only screen and (max-width: 767px) {
    .profile-pic:hover .upload-button {
        right: 5px;
    }
}

.cover-img {
    position: relative;
}

    .cover-img:after {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        content: "";
        background-color: rgba(0, 0, 0, 0.4);
        opacity: 0;
    }

    .cover-img .upload-button {
        opacity: 0;
        bottom: 10px;
    }

    .cover-img:hover:after {
        opacity: 1;
    }

    .cover-img:hover .upload-button {
        opacity: 1;
        bottom: 20px;
    }

.user-profile-nav {
    position: relative;
}

    .user-profile-nav .profile-info h3 {
        margin-bottom: 6px;
    }

    .user-profile-nav .profile-info p {
        line-height: 1;
    }

.profile-nav-tabs {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .profile-nav-tabs li a {
        padding: 0px 30px;
    }

@media only screen and (max-width: 767px) {
    .profile-nav-tabs li a {
        padding: 0 15px;
    }
}

.profile-nav-tabs li .chat {
    width: 40px;
    height: 40px;
    background-color: #a1c5df;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.profile-nav-tabs li .conncetion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.p_nav-link {
    display: block;
    position: relative;
    font-size: 14px;
    line-height: 86px;
}

@media only screen and (min-width: 0px) and (max-width: 1500px) {
    .p_nav-link {
        line-height: 60px;
    }
}

.p_nav-link.active {
    background-color: #a1c5df;
}

.p_nav-link:after {
    position: absolute;
    right: 0;
    width: 3px;
    height: 100%;
    top: 0;
    background-color: #f0f0f0;
    content: "";
}

.p_nav-link.has-before:before {
    position: absolute;
    left: 0;
    width: 3px;
    height: 100%;
    top: 0;
    background-color: #f0f0f0;
    content: "";
}

.profile-completion {
    background-color: #FFE2E6;
    padding: 20px 30px;
}

@media only screen and (max-width: 575px) {
    .profile-completion {
        padding: 15px;
    }
}

.info-list li {
    margin-bottom: 13px;
}

    .info-list li span {
        width: 33%;
        font-weight: 400;
        display: inline-block;
        font-size: 15px;
    }

.p_info-list li {
    margin-bottom: 12px;
}

.skill-list li {
    margin-bottom: 24px;
}

    .skill-list li span {
        width: 136px;
        display: inline-block;
    }

.todays-evnet ul {
    padding: 26px 0 29px;
}

    .todays-evnet ul li {
        padding-left: 20px;
        padding-right: 20px;
    }

        .todays-evnet ul li:not(:first-child) {
            padding-top: 11px;
        }

        .todays-evnet ul li:not(:last-child) {
            padding-bottom: 13px;
        }

        .todays-evnet ul li h5 {
            margin-bottom: 9px;
            line-height: 1.3;
        }

.news-card {
    padding: 25px 0px;
}

    .news-card > a {
        padding-left: 20px;
        padding-right: 20px;
    }

.profile-widget-header {
    padding: 10px 20px;
}

/* About */
.about-tab-content {
    border-left: 1px solid #aeaeae;
}

@media only screen and (max-width: 767px) {
    .about-tab-content {
        border: none;
    }
}

@media only screen and (max-width: 767px) {
    .about-nav-tab {
        border-bottom: 1px solid #aeaeae;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.about-nav-tab a {
    display: block;
    margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
    .about-nav-tab a {
        padding: 5px 10px;
        margin-bottom: 5px;
        font-weight: 500;
    }
}

.p_overview-list li,
.p_work-list li,
.p_education-list li {
    margin-bottom: 20px;
}

    .p_overview-list li .img,
    .p_work-list li .img,
    .p_education-list li .img {
        width: 32px;
        min-width: 32px;
    }

    .p_overview-list li .hover-to-show,
    .p_work-list li .hover-to-show,
    .p_education-list li .hover-to-show {
        cursor: pointer;
    }

    .p_overview-list li .dropdown-button,
    .p_work-list li .dropdown-button,
    .p_education-list li .dropdown-button {
        opacity: 0;
        min-width: 64px;
        margin-left: 10px;
    }

@media only screen and (max-width: 767px) {
    .p_overview-list li .dropdown-button,
    .p_work-list li .dropdown-button,
    .p_education-list li .dropdown-button {
        margin-left: 46px;
        margin-top: 5px;
        opacity: 1;
    }
}

.p_overview-list li .dropdown-button.show,
.p_work-list li .dropdown-button.show,
.p_education-list li .dropdown-button.show {
    opacity: 1;
}

.p_overview-list li:hover .dropdown-button,
.p_work-list li:hover .dropdown-button,
.p_education-list li:hover .dropdown-button {
    opacity: 1;
}

.iconwrap {
    border: 1px dashed #5591cf;
    width: 32px;
    height: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.add-workplace {
    cursor: pointer;
    position: relative;
    z-index: 2;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.add-work-form,
.work-update-form {
    position: relative;
    padding: 10px 5px;
    z-index: 3;
}

    .add-work-form .form-control,
    .add-work-form .theme-input-style,
    .work-update-form .form-control,
    .work-update-form .theme-input-style {
        max-width: 480px;
    }

    .add-work-form .add-work-form-close,
    .work-update-form .add-work-form-close {
        position: absolute;
        cursor: pointer;
        right: 0;
        top: 0;
    }

@media only screen and (max-width: 1024px) {
    .add-work-form .add-work-form-close,
    .work-update-form .add-work-form-close {
        top: -20px;
    }
}

.work-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media only screen and (max-width: 575px) {
    .work-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

/* User Dashboard */
.project-deadline {
    padding: 21px;
}

    .project-deadline p {
        color: #CAC6FB;
    }

.statistics-bounce-rate {
    background-color: #09D1DE;
    padding: 30px;
}

    .statistics-bounce-rate .state-content {
        margin-right: 14px;
    }

        .statistics-bounce-rate .state-content p {
            color: rgba(255, 255, 255, 0.7);
        }

        .statistics-bounce-rate .state-content h3 {
            font-size: 30px;
        }

    .statistics-bounce-rate.order {
        background-color: #4F9DF8;
    }

    .statistics-bounce-rate.report {
        background-color: #E580FD;
    }

    .statistics-bounce-rate.support {
        background-color: #FFB959;
    }

.latest-update > a {
    padding: 10px 0;
}

/* Edit Profile */
.about-myself textarea {
    line-height: 1.42;
    height: 100px;
}

.edit-personal-info .form-control {
    height: 30px;
}

.edit-skill .form-control {
    width: 60px;
    margin-right: 10px;
    height: 30px;
}

.edit-skill .process-bar-wrapper .process-bar {
    max-width: 100%;
}

/* News Feed */
.post-controls > div {
    width: 30px;
    height: 30px;
    background-color: #ECF3FD;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    .post-controls > div.location {
        margin-right: 30px;
    }

@media only screen and (max-width: 479px) {
    .post-controls > div.location {
        margin-right: 16px;
    }
}

.post-body p {
    margin-bottom: 26px;
}

.post-body .img.collage .big {
    -ms-flex-preferred-size: calc(67% - 20px);
    flex-basis: calc(67% - 20px);
}

.post-body .img.collage .small {
    -ms-flex-preferred-size: 33%;
    flex-basis: 33%;
}

.post-footer > div {
    cursor: pointer;
}

.post-footer .love:hover svg path {
    fill: #a1c5df;
    stroke: #5591cf;
}

.post-footer > div:not(:last-child) {
    margin-right: 50px;
}

@media only screen and (max-width: 575px) {
    .post-footer > div:not(:last-child) {
        margin-right: 20px;
    }
}

.post-footer > div .icon {
    margin-right: 10px;
}

@media only screen and (max-width: 575px) {
    .post-footer > div .icon {
        margin-right: 6px;
        width: 12px;
    }

    .post-footer > div .content {
        font-size: 12px;
    }
}

#projectTaskDetailsMain .comments-area {
    padding-top: 30px;
}

.comments-area {
    border-top: 1px solid #F5F5F5;
}

    .comments-area ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

    .comments-area .single-comment {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

@media only screen and (max-width: 479px) {
    .comments-area .single-comment {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.comments-area .single-comment .comment-content p {
    margin: 8px 0;
}

.comments-area .single-comment .comment-author-image {
    margin-bottom: 12px;
}

.comments-area ul.children {
    margin-left: 70px;
}

@media only screen and (max-width: 479px) {
    .comments-area ul.children {
        margin-left: 15px;
    }
}

/* ************************
10.1: Extensions
********************* */
/* Sweet Alert */
.s_alert-cat {
    min-width: 160px;
}

/* noUi Slider */
.nouislider-cat {
    margin: 0;
    min-width: 320px;
}

@media only screen and (max-width: 767px) {
    .nouislider-cat {
        min-width: 220px;
        padding-right: 10px;
    }
}

@media only screen and (max-width: 479px) {
    .nouislider-cat {
        min-width: 100%;
        padding-right: 0px;
    }
}

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

/* Drag & Drop */
.dragable-card {
    padding: 28px 30px 25px;
    background-color: #ECF3FD;
    margin-bottom: 30px;
}

@media only screen and (max-width: 379px) {
    .dragable-card {
        padding: 18px 20px 15px;
    }
}

.dragable-card h4 {
    color: #4F9DF8;
}

.dragable-card.dragable-card-yellow {
    background-color: #FFF4E6;
}

    .dragable-card.dragable-card-yellow h4 {
        color: #FFB959;
    }

.dragable-card.dragable-card-red {
    background-color: #FFE2E6;
}

    .dragable-card.dragable-card-red h4 {
        color: #FC7383;
    }

.dragable-card.dragable-card-green {
    background-color: #DBF7E8;
}

    .dragable-card.dragable-card-green h4 {
        color: #67CFA2;
    }

#dragable-product-list .product-list-item {
    background-color: #f0f0f0;
}

    #dragable-product-list .product-list-item:not(:last-child) {
        margin-bottom: 10px;
    }

.dragable-team > div {
    background-color: #f0f0f0;
    padding: 10px;
}

    .dragable-team > div:not(:last-child) {
        margin-bottom: 3px;
    }

.dragable-btn a {
    margin-bottom: 10px;
}

    .dragable-btn a:not(:last-child) {
        margin-right: 30px;
    }

@media only screen and (max-width: 1399px) {
    .dragable-btn a:not(:last-child) {
        margin-right: 15px;
    }
}

@media only screen and (max-width: 1024px) {
    .dragable-btn a:not(:last-child) {
        margin-right: 10px;
    }
}

.dragable-list > div {
    border-bottom: 1px solid #F5F5F5;
    padding: 20px;
}

@media only screen and (max-width: 479px) {
    .dragable-list > div {
        padding: 15px 0;
    }
}

.dragable-list > div svg, .dragable-list > div i {
    margin-right: 16px;
    cursor: all-scroll;
    min-width: 20px;
}

.dragable-list > div.ui-sortable-helper {
    -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
    border-color: transparent;
}

    .dragable-list > div.ui-sortable-helper svg path#Path_365 {
        fill: #5591cf;
    }

/* Tour */
.shepherd-element {
    -webkit-filter: none;
    filter: none;
    -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

    .shepherd-element .shepherd-content {
        background: #CCF5F8;
    }

.tippy-popper[x-placement^=bottom] .tippy-arrow {
    border-bottom-color: #CCF5F8;
}

.shepherd-element .shepherd-content footer .shepherd-buttons {
    margin-top: 10px;
}

    .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button {
        background: transparent;
        color: #09D1DE;
        text-transform: capitalize;
        padding: 5px 26px;
    }

        .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button svg, .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button img {
            position: relative;
            top: -1px;
        }

        .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.text-danger svg, .shepherd-element .shepherd-content footer .shepherd-buttons li .select2-container--default .select2-selection--multiple .select2-selection__choice button.shepherd-button svg, .select2-container--default .select2-selection--multiple .select2-selection__choice .shepherd-element .shepherd-content footer .shepherd-buttons li button.shepherd-button svg, .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.base-timer__path-remaining.danger svg, .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.text-danger img, .shepherd-element .shepherd-content footer .shepherd-buttons li .select2-container--default .select2-selection--multiple .select2-selection__choice button.shepherd-button img, .select2-container--default .select2-selection--multiple .select2-selection__choice .shepherd-element .shepherd-content footer .shepherd-buttons li button.shepherd-button img, .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.base-timer__path-remaining.danger img {
            top: -2px;
        }

        .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button:hover {
            background: transparent;
        }

/* Swiper Slider */
.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .swiper-slide img {
        width: 100%;
    }

.swiper-multi-row .swiper-slide {
    height: calc((100% - 30px) / 2);
}

.swiper-pagination-fraction {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    .swiper-pagination-fraction .swiper-pagination-current {
        display: block;
    }

.swiper-button-prev.page-prev,
.swiper-button-next.page-next {
    margin: 0;
    height: 14px;
}

    .swiper-button-prev.page-prev:after,
    .swiper-button-next.page-next:after {
        font-size: 14px;
        height: 14px;
    }

.swiper-centered-slide ~ .swiper-button-prev {
    left: 0;
    margin-top: 7px !important;
}

.swiper-centered-slide ~ .swiper-button-next {
    right: 0;
    margin-top: 7px !important;
}

.swiper-centered-slide ~ .swiper-button-prev,
.swiper-centered-slide ~ .swiper-button-next {
    margin: 0;
    height: 14px;
}

    .swiper-centered-slide ~ .swiper-button-prev:after,
    .swiper-centered-slide ~ .swiper-button-next:after {
        font-size: 14px;
        height: 14px;
    }

.swiper-centered-slide .topic {
    height: 130px;
}

.swiper-container-horizontal > .swiper-pagination-progressbar {
    top: auto;
    bottom: 0;
    background: #a1c5df;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #5591cf;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
}

.gallery-top {
    height: 600px;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .gallery-top {
        height: 400px;
    }
}

@media only screen and (max-width: 575px) {
    .gallery-top {
        height: 250px;
    }
}

.gallery-thumbs {
    height: 80px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    bottom: 20px;
    width: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

@media only screen and (min-width: 0px) and (max-width: 1300px) {
    .gallery-thumbs {
        height: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .gallery-thumbs {
        width: 80%;
        height: 40px;
    }
}

.gallery-thumbs .swiper-slide {
    height: 100%;
    border: 4px solid #fff;
}

.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-multi-row {
    height: 700px;
}

@media only screen and (min-width: 0px) and (max-width: 1500px) {
    .swiper-multi-row {
        height: 380px;
    }
}

/* Treeview */
.treeview .list-group-item {
    cursor: pointer;
}

.treeview span.indent {
    margin-left: 10px;
    margin-right: 10px;
}

.treeview .node-disabled {
    color: silver;
    cursor: not-allowed;
}

.treeview .list-group-item {
    border-top: 0px solid;
    border-left: 0px solid;
    border-right: 0px solid;
    padding: 10px 0;
}

    .treeview .list-group-item:last-child {
        border-bottom: 0px solid;
    }

    .treeview .list-group-item .badge {
        display: inline-block;
        margin-left: 20px;
    }

        .treeview .list-group-item .badge:before, .treeview .list-group-item .badge:after {
            top: -1px;
            position: relative;
            content: "(";
        }

        .treeview .list-group-item .badge:after {
            content: ")";
        }

/* Block UI */
.blockUI.blockOverlay {
    z-index: 999999 !important;
}

.blockUI.blockMsg.blockElement {
    z-index: 9999991 !important;
}

    .blockUI.blockMsg.blockElement > span, .blockUI.blockMsg.blockElement > div {
        display: block;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }

.blockUI.blockMsg.blockPage {
    z-index: 9999991 !important;
}

.icon-spin {
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    display: inline-block;
}

/* Change Language */
.card-localization .card-text {
    line-height: 1.733;
}

/* ************************
10.2: Rtl
********************* */
body {
    direction: rtl;
    text-align: right;
}

.sidebar {
    left: auto;
    right: 0;
    direction: ltr;
}

.main-content {
    margin-left: 0;
    margin-right: 275px;
}

body.sidebar-folded .main-content {
    margin-left: 0;
    margin-right: 75px;
}

.header .logo {
    text-align: center;
    max-height: 80px;
}

    .header .logo img {
        height: 100%;
    }

.menu-icon {
    margin-right: 0px;
}

.main-header-user .user-profile .user-info {
    margin-right: 20px;
}

.search-form .theme-input-group.header-search.theme-input-group {
    left: 0;
    right: auto;
}

.theme-input-group button, .theme-input-group > a {
    right: auto;
    left: 0;
}

.main-header-right ul li {
    margin-left: auto;
    margin-right: 15px;
}

.sidebar .sidebar-body {
    direction: rtl;
}

    .sidebar .sidebar-body li {
        padding-left: initial;
        padding-right: 30px;
    }

        .sidebar .sidebar-body li i {
            left: auto;
            right: 0;
        }

        .sidebar .sidebar-body li.has-sub-item:after {
            right: auto;
            left: 0;
        }

    .sidebar .sidebar-body ul ul {
        padding-left: auto;
        padding-right: 15px;
    }

.nav {
    padding-left: initial;
    padding-right: 0;
}

.sidebar .sidebar-body ul.sub-menu li:before {
    left: auto;
    right: -17px;
}

.dropdown-menu.style--three a span {
    margin-right: 0;
    margin-left: 12px;
}

.dropdown-menu {
    text-align: right;
}

    .dropdown-menu .dropdown-body .figure {
        margin-right: 0;
        margin-left: 13px;
    }

    .dropdown-menu .dropdown-body .content .name {
        margin-right: 0px;
        margin-left: 20px;
    }

#apex_column-chart .apexcharts-legend {
    right: 0;
    left: 15px !important;
}

    #apex_column-chart .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker {
        margin-right: 0px;
        margin-left: 5px;
    }

.apexcharts-xaxis, .apexcharts-yaxis {
    direction: ltr;
}

.custom-checkbox ~ .todo-text {
    padding-left: 0px;
    padding-right: 30px;
}

.assign_to svg {
    margin: 0;
    margin-right: 8px;
}

    .assign_to svg.mr-2 {
        margin-left: 8px;
    }

.assign_to .assign-content {
    right: auto;
    left: 10px;
    top: 0;
}

.assign_to .assign-avatar {
    left: auto;
    right: -10px;
}

.apexcharts-legend-marker {
    margin-right: 0px !important;
    margin-left: 5px;
}

.ProgressBar-wrap2 .ProgressBar-percentage,
.ProgressBar-wrap2 .ProgressBar-percentage--text {
    left: auto;
    right: 62px;
}

#apex_radar-chart .apexcharts-title-text,
#apex_radar-chart .apexcharts-subtitle-text {
    -webkit-transform: translateX(96%);
    -ms-transform: translateX(96%);
    transform: translateX(96%);
}

#apex_radar-chart .apexcharts-legend {
    left: 0px !important;
    right: auto !important;
}

@media only screen and (max-width: 767px) {
    #apex_radar-chart .apexcharts-legend {
        right: 0px !important;
        left: auto !important;
    }
}

.sidebar .sidebar-header .sidebar-toogle-pin {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 1024px) {
    .sidebar {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@media only screen and (max-width: 1024px) {
    .main-content {
        margin-right: 0;
    }
}

.progress_8,
.progress_9,
.progress_10,
.progress_11,
.progress_12,
.progress_13,
.progress_14,
.progress_15 {
    margin-right: 0px;
    margin-left: 12px;
}

table.style--three tr th:first-child:after,
table.style--three tr td:first-child:after {
    right: auto;
    left: 0;
}

table.style--three tr th:first-child, table.style--three tr td:first-child {
    padding-right: 20px;
}

.state .state-icon {
    padding-right: 0px;
    padding-left: 10px;
}

.statistic-row > div:first-child img {
    margin-right: 0px;
    margin-left: 15px;
}

.footer {
    padding-left: 0px;
    padding-right: 290px;
}

@media only screen and (max-width: 1024px) {
    .footer {
        padding: 0 15px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

body.sidebar-folded .footer {
    padding-left: 0;
    padding-right: 90px;
}

@media only screen and (max-width: 1024px) {
    body.sidebar-folded .footer {
        padding: 0 15px;
    }
}

body.sidebar-folded.open-sidebar-folded .footer {
    padding-left: 0;
    padding-right: 290px;
}

@media only screen and (max-width: 1024px) {
    body.sidebar-folded.open-sidebar-folded .footer {
        padding: 0 15px;
    }
}

table.order-list-table th:first-child, table.order-list-table td:first-child {
    padding-left: 16px;
    padding-right: 28px;
}

.pagination {
    direction: ltr;
}

.color-group ul li:not(:last-child) {
    margin-right: 0px;
    margin-left: 15px;
}

table.cart_table tr th:last-child, table.cart_table tr td:last-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

table.cart_table tr td:last-child {
    min-height: 71px;
}

    table.cart_table tr td:last-child a {
        padding: 10px;
        margin-right: 5px;
        position: relative;
        top: -5px;
    }

.apex_pie3-chart-legend .color-box {
    margin-right: 0px;
    margin-left: 10px;
}

table.style--four td .country-flag {
    margin-right: 0px;
    margin-left: 10px;
}

table.style--four th:first-child, table.style--four td:first-child {
    text-align: right;
}

.list-button li:not(:last-child),
table.style--five td .img {
    margin-right: 0px;
    margin-left: 10px;
}

.aside-body li a:after {
    left: auto;
    right: -20px;
}

.aside-header .aside-btn-text {
    border-radius: 0 100px 100px 0;
}

.aside-header .btn-circle {
    left: auto;
    right: 0;
}

.mail-list-item .avatar,
.main-mail .avatar {
    margin-right: 0px;
    margin-left: 20px;
}

.mail-list-item-right > div:not(:last-child), .mail-list-item-right > button:not(:last-child),
.mail-right > div:not(:last-child),
.mail-right > button:not(:last-child) {
    margin-right: 0px;
    margin-left: 15px;
}

.mail-compose .form-group .cc-btns, .modal-body .form-group .cc-btns {
    margin-left: 0px;
    margin-right: 10px;
}

.mail-compose .form-group .close-btn, .modal-body .form-group .close-btn {
    margin-left: 0px;
    margin-right: 20px;
}

.mail-compose .form-group .input-wrap span svg, .modal-body .form-group .input-wrap span svg {
    margin-left: 0px;
    margin-right: 5px;
}

.chat_aside .aside-header .dropdown-button {
    right: auto;
    left: 15px;
}

.message .figure {
    margin-left: 14px;
    margin-right: 0px;
}

.chat-body,
.aside-body {
    direction: ltr;
}

    .chat-body *,
    .aside-body * {
        direction: rtl;
    }

.chat_aside .aside-header .aside-header-bottom .nav-tabs li:not(:last-child) {
    margin-right: 0px;
    margin-left: 20px;
}

.todo-list .single-row:after {
    left: auto;
    right: 0;
}

.add-new_task .todo_actions > div:not(:last-child), .task-details .todo_actions > div:not(:last-child), .task-details .todo_actions > div:not(:last-child) {
    margin-right: 0px;
    margin-left: 60px;
}

.tag_color {
    margin-right: 0px;
    margin-left: 6px;
}

.task-details .show-date svg {
    margin-right: 0px;
    margin-left: 10px;
}

table.invoice-list-table th .star, table.contact-list-table th .star, table.contact-list-table th .star, table.invoice-list-table td .star, table.contact-list-table td .star, table.contact-list-table td .star, table.invoice-list th .star, table.invoice-list td .star {
    margin-left: 0px;
    margin-right: 36px;
}

.list-invoice li {
    padding-left: 0px;
    padding-right: 30px;
}

    .list-invoice li.location:before, .list-invoice li.call:before, .list-invoice li.mail:before, .list-invoice li.user:before {
        left: auto;
        right: 0;
    }

.cart-collaterals {
    margin-left: 0;
    margin-right: auto;
}

.proceed-to-checkout.invoice-edit .btn:not(:last-child), .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a:not(:last-child)[href="#next"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#next"], .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a:not(:last-child)[href="#finish"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#finish"], .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a:not(:last-child)[href="#next"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#next"], .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a:not(:last-child)[href="#finish"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#finish"] {
    margin-right: 0px;
    margin-left: 30px;
}

table.invoice-list-table.style-two td .tr-close, table.style-two.contact-list-table td .tr-close, table.style-two.contact-list-table td .tr-close, table.invoice-list.style-two td .tr-close {
    margin-left: 0px;
    margin-right: 60px;
}

table.contact-list-table td.actions span:not(:last-child) {
    margin-right: 0px;
    margin-left: 10px;
}

.contact-box .contact-head .dropdown-button {
    right: auto;
    left: 10px;
}

.member a:not(:last-child) {
    margin-right: 0px;
    margin-left: -10px;
}

.contact-header-right > div:not(:last-child), .project-header-right > div:not(:last-child), .project-header-right > div:not(:last-child) {
    margin-right: 0px;
    margin-left: 20px;
}

.board:not(:last-child) {
    margin-right: 0px;
    margin-left: 30px;
}

.board .board-cards .board-card:before {
    left: auto;
    right: -1px;
}

.board-wrapper {
    padding-left: 0px;
    padding-right: 1px;
}

#projectTaskDetails .modal-content .dashboard-date {
    margin-left: 0px;
    margin-right: 25px;
}

.labels .label:not(:last-child), .label-item .label:not(:last-child) {
    margin-right: 0px;
    margin-left: 8px;
}

.file-attachments .attachment .attachment-close {
    left: auto;
    right: -7px;
}

#projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-width {
    left: -35px;
    right: auto;
}

#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item {
    margin-left: 0px;
    margin-right: 35px;
}

.comment-action-links .comment-action-link:not(:last-child) {
    margin-right: 0px;
    margin-left: 14px;
}

    .comment-action-links .comment-action-link:not(:last-child):after {
        right: auto;
        left: -12px;
    }

.change-card-btn span:not(:last-child) {
    margin-right: 0px;
    margin-left: 5px;
}

.checklist-items .checklist-item .item {
    padding-left: 0px;
    padding-right: 26px;
}

.theme-input-group.input-wrap .theme-input-style {
    padding-right: 0px !important;
    padding-left: 40px !important;
}

#projectShareModal .modal-content .modal-close {
    right: auto;
    left: 12px;
}

.file .custom-checkbox {
    left: auto;
    right: -10px;
}

#shareModal .modal-content .modal-close {
    right: auto;
    left: 12px;
}

.process-bar-wrapper.style--four .process-width {
    right: auto;
    left: -100px;
}

.icon__name {
    margin-left: 0px;
    margin-right: 14px;
}

.chip .chip-content {
    padding-left: 15px;
    padding-right: 40px;
}

    .chip .chip-content .img {
        left: auto;
        right: 0;
    }

.chip > svg {
    left: auto;
    right: -5px;
}

.custom-select.style--two {
    background-position: left center;
}

.dashboard-date .input-group-addon {
    margin-right: 0px;
    margin-left: 10px;
}

.input-group.addon .form-control {
    border-radius: 5px 0 0 5px;
}

    .input-group.addon .form-control.style--two {
        border-radius: 0 5px 5px 0;
    }

.switch .check:after {
    -webkit-transform: rotate(45deg) translate(2px, 12px);
    -ms-transform: rotate(45deg) translate(2px, 12px);
    transform: rotate(45deg) translate(2px, 12px);
}

.switch .check:before {
    -webkit-transform: rotate(-45deg) translate(-12px, 2px);
    -ms-transform: rotate(-45deg) translate(-12px, 2px);
    transform: rotate(-45deg) translate(-12px, 2px);
}

.switch.large .check:after {
    -webkit-transform: rotate(-45deg) translate(-21px, 4px);
    -ms-transform: rotate(-45deg) translate(-21px, 4px);
    transform: rotate(-45deg) translate(-21px, 4px);
}

.switch.large .check:before {
    -webkit-transform: rotate(45deg) translate(4px, 21px);
    -ms-transform: rotate(45deg) translate(4px, 21px);
    transform: rotate(45deg) translate(4px, 21px);
}

.switch input:disabled ~ .control .check:after {
    -webkit-transform: rotate(0deg) translate(-7px, 11px);
    -ms-transform: rotate(0deg) translate(-7px, 11px);
    transform: rotate(0deg) translate(-7px, 11px);
}

.switch.large input:disabled ~ .control .check:after {
    -webkit-transform: rotate(0deg) translate(-12px, 18px);
    -ms-transform: rotate(0deg) translate(-12px, 18px);
    transform: rotate(0deg) translate(-12px, 18px);
}

.switch.small .check:after {
    -webkit-transform: rotate(45deg) translate(2px, 7px);
    -ms-transform: rotate(45deg) translate(2px, 7px);
    transform: rotate(45deg) translate(2px, 7px);
}

.switch.small .check:before {
    -webkit-transform: rotate(-45deg) translate(-7px, 2px);
    -ms-transform: rotate(-45deg) translate(-7px, 2px);
    transform: rotate(-45deg) translate(-7px, 2px);
}

.switch.small input:disabled ~ .control .check:after {
    -webkit-transform: rotate(0deg) translate(-4px, 6.5px);
    -ms-transform: rotate(0deg) translate(-4px, 6.5px);
    transform: rotate(0deg) translate(-4px, 6.5px);
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
    right: auto;
    left: 10px;
}

.note img, .note svg, .note i, .note b {
    margin-right: 0px;
    margin-left: 8px;
}

#smartwizard ul.nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

table.invoice-list th:last-child, table.invoice-list td:last-child {
    text-align: left;
    padding-right: 0px;
    padding-left: 40px;
}

table.invoice-list th:first-child, table.invoice-list td:first-child {
    padding-left: 0px;
    padding-right: 58px;
}

table.invoice-list .custom-checkbox {
    left: auto;
    right: 20px;
}

.post-footer > div .icon {
    margin-right: 0px;
    margin-left: 10px;
}

.post-footer > div:not(:last-child) {
    margin-right: 0px;
    margin-left: 50px;
}

@media only screen and (max-width: 575px) {
    .post-footer > div:not(:last-child) {
        margin-right: 0px;
        margin-left: 20px;
    }
}

.post-controls > div.location {
    margin-right: 0px;
    margin-left: 30px;
}

.comments-area ul.children {
    margin-left: 0px;
    margin-right: 70px;
}

.profile-pic .upload-button, .cover-img .upload-button {
    right: auto;
    left: 20px;
}

.progress_22 .ProgressBar-wrap2 .ProgressBar-percentage {
    left: auto;
    right: 3%;
}

.about-tab-content {
    border-left: 0px solid;
    border-right: 1px solid #aeaeae;
}

.add-work-form .add-work-form-close,
.work-update-form .add-work-form-close {
    right: auto;
    left: 0;
}

.progress_23 .ProgressBar-wrap2 .ProgressBar-percentage {
    left: auto;
    right: 4%;
}

.timeline.style--two {
    padding-left: 0px;
    padding-right: 60px;
}

    .timeline.style--two:after {
        left: auto;
        right: 25.5px;
    }

.timeline .event:after {
    left: auto;
    right: -43px;
}

.timeline.style--two .event:before {
    left: auto;
    right: 70px;
}

.faq h5 {
    padding-left: 0px;
    padding-right: 20px;
}

    .faq h5:after {
        left: auto;
        right: 0;
    }

.rotate-180 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.price-body ul li {
    padding-left: 0px;
    padding-right: 24px;
}

    .price-body ul li i {
        left: auto;
        right: 0;
    }

.p_header-content {
    padding-left: 0px;
    margin-right: 30px;
}

.timeline {
    border-left: 0px solid #a1c5df;
    border-right: 5px solid #a1c5df;
    margin-left: 0;
    margin-right: 24%;
}

@media only screen and (max-width: 767px) {
    .timeline {
        margin-right: 0;
        max-width: 100%;
        padding-left: 0;
        padding-right: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .timeline .event:after {
        right: -33px;
    }
}

.timeline .event:before {
    left: auto;
    right: -190px;
}

@media only screen and (max-width: 767px) {
    .timeline .event:before {
        right: 70px;
    }
}

.time_circles {
    direction: ltr;
}

.ltr {
    direction: ltr;
}

.dragable-btn a:not(:last-child) {
    margin-right: 0px;
    margin-left: 30px;
}

.dragable-list > div svg, .dragable-list > div i {
    margin-right: 0px;
    margin-left: 16px;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next,
.swiper-button-next, .swiper-container-rtl .swiper-button-prev,
.swiper-centered-slide ~ .swiper-button-prev:after,
.swiper-centered-slide ~ .swiper-button-next:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.treeview .list-group {
    padding-right: 0;
}

@media only screen and (max-width: 479px) {
    .main-header-right ul li {
        margin-left: 0px;
        margin-right: 9px;
    }
}

.list-inline {
    padding-right: 0;
}

.mail-list-item .dropdown-button {
    margin-left: 14px;
}

.input-group.bootstrap-touchspin .input-group-append button.btn {
    border-radius: 5px 0 0 5px;
}

.input-group.bootstrap-touchspin .input-group-prepend button.btn {
    border-radius: 0px 5px 5px 0px;
}

@media only screen and (max-width: 575px) {
    #example-vertical > .steps {
        margin-right: 0px;
    }
}

@media only screen and (max-width: 767px) {
    .about-tab-content {
        border: none;
    }
}

.edit-skill .form-control {
    margin-right: 0px;
    margin-left: 10px;
}

@media only screen and (max-width: 767px) {
    .timeline.style--two .event:after {
        right: -43px;
    }
}

input[type=checkbox] {
    margin-right: 0px;
    margin-left: 5px;
}

#fullCalModal .calendar-modal-location .icon, #fullCalModal .calendar-modal-visibility .icon,
#fullCalModal .calendar-modal-Event .color {
    margin-right: 0px;
    margin-left: 10px;
}

.project-box .custom-checkbox {
    position: absolute;
    left: auto;
    right: -7px;
    top: 2px;
}

.project-header-right .custom-checkbox {
    margin-right: 0px;
    margin-left: 17px;
}

.form-element.style--two input {
    border-radius: 7px 0 0 7px !important;
}

.form-element.style--two .input-group-text {
    border-radius: 0 7px 7px 0 !important;
}

#contactEditModal .contact-account-setting input {
    text-align: right;
}

#contactEditModal .dashboard-date.style--two {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

/*# sourceMappingURL=style.css.map */
.google-maps {
    position: relative;
    padding-bottom: 50%;
    overflow: hidden;
}

    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }




/***/

.border1 {
    border: solid thin #aeaeae;
    padding: 30px;
}


/*login**/
.login_page {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

    .login_page .rightSide {
        width: 50%;
        padding: 40px;
        height: 100vh;
        display: flex;
        position: relative;
    }

        .login_page .rightSide .rightSide-content .logo-login {
            margin: 0 auto;
            margin-bottom: 20px;
        }

        .login_page .rightSide .rightSide-content {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            text-align: center;
            flex: 1;
            align-self: center;
            justify-content: center;
        }

    .login_page .leftSide {
        width: 50%;
        background: url(../img/bg.jpg) no-repeat center center;
        background-size: cover;
        height: 100vh;
        background-repeat: no-repeat;
        background-size: cover;
    }


    .login_page .hover-color {
        width: 100%;
        height: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        background: rgba(49, 121, 81, 0.95);
    }

.color-white {
    color: var(--white);
}

.login_page input, .login_page select {
    background: none;
    color:#fff;
    border: solid thin #fff;
}

.social-footter {
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

    .social-footter .socialIcon {
        width: 30px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        background: #D9D9D9;
        border-radius: 50%;
    }

        .social-footter .socialIcon a {
            color: #fff;
        }

        .social-footter .socialIcon:hover {
            background-color: #676464;
        }


@media only screen and (max-width: 1024px) {
    .login_page {
        height: 100vh;
        overflow-y: scroll;
    }

        .login_page .rightSide {
            width: 100%;
            height: auto;
            display: block;
            height: auto;
            padding-bottom: 20px;
        }

        .login_page .leftSide {
            width: 100%;
            height: auto;
            display: block;
            height: auto;
        }

    .rightSide .desc {
        font-size: 13px;
    }

    .login_page .auth-card {
        padding: 40px 40px 40px;
    }

        .login_page .auth-card h3 {
            font-size: 20px;
        }
}

.condations li {
    margin-bottom: 10px;
}

.Total_Income {
    border-top: 2px solid #eaeaea;
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

    .Total_Income span {
        color: var(--green);
    }

.Total_expenses {
    border-top: 2px solid #eaeaea;
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

    .Total_expenses span {
        color: var(--green);
    }

/*steps*/
.steps-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    padding: 5px;
    flex-wrap: wrap;
    gap: 5px;
}

.step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid transparent;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

    .step.active {
        background-color: var(--gold);
        color: #fff;
        border-color: var(--gold);
    }

        .step.active a {
            color: #fff;
        }

    .step.completed {
        background-color: var(--green);
        color: #fff;
        border-color: var(--green);
    }

        .step.completed a {
            color: #fff;
        }

.step-line {
    flex-grow: 1;
    height: 2px;
    background-color: #e0e0e0;
    margin: 0 10px;
    transition: background-color 0.3s;
}

    .step-line.completed {
        background-color: #2196f3;
    }

@media (max-width: 400px) {
    .steps-container {
        display: none
    }

    .step-line {
        width: 50%;
        height: 2px;
        margin: 10px 0;
    }
}




.otp {
}

    .otp h6 {
        line-height: 30px;
        font-size: 30px;
        margin-bottom: 15px;
    }

    .otp .card {
        width: 400px;
        border: none;
        height: 300px;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center
    }



    .otp .inputs input {
        width: 40px;
        height: 40px;
    }

    .otp input[type=number]::-webkit-inner-spin-button,
    .otp input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0;
    }

    .otp .card-2 {
        padding: 10px;
        width: 350px;
        height: 100px;
        bottom: -50px;
        left: 20px;
        position: absolute;
        border-radius: 5px
    }

        .otp .card-2 .content {
            margin-top: 50px
        }

            .otp .card-2 .content a {
                color: red
            }

    .otp .form-control:focus {
        box-shadow: none;
        border: 2px solid red
    }


.copyright {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 12px;
    width: 100%;
    text-align: center;
}

@media (max-width: 1024px) {
    .copyright {
        position: absolute;
        bottom: 0px;
        right: 0px;
        font-size: 12px;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 580px) {
    .logo-login {
        max-width: 200px;
    }
}