/*
	*******************
	Template name:  Dashmin
	Version:        1.0
	Author:         ThemeLooks
	Author url:     http://themelooks.com

	NOTE:
	-----
	Please DO NOT EDIT THIS CSS, you may need to use "custom.css" file for writing your custom css.
	We may release future updates so it will overwrite this file. it's better and safer to use "custom.css".

    ******** CSS INDEX ********
    01. Base
        1.1 Reset 
        1.2 Padding/Margin
        1.3 color
    02. Components
        2.1 Common Classes
        2.2 Animations
        2.3 Pagination
        2.4 Buttons
        2.5 Table
        2.6 Progress
        2.7 Input
    03. Layout
        3.1 Header 
        3.2 Sidebar
        3.3 Footer
        3.4 Main Content
        3.5 Aside
    04. Dashboard
        4.1 Dashboard
        4.2 Social Analytics
    05. Ecommerce
        5.1 Ecommerce1
        5.2 Ecommerce2
        5.3 Product Details
        5.4 Cartlist
    06. Apps
        6.1 Mail
        6.2 Chat
        6.3 Todo List
        6.4 Calendar
        6.5 Invoice
        6.6 Contact
        6.7 Project Manager
        6.8 File Manager
    07. Form & Table
        7.1 Form Elements
        7.2 Form Wizard
    08. UI Elements
        8.1 Widget
        8.2 Icons
    09. Pages
        9.1 FAQ
        9.2 Price
        9.3 Timeline
        9.4 Account Settings
        9.5 Authentications
        9.6 Coming Soon
        9.7 Miscellaneous
        9.8 Profile
    10. Extension
        10.1 Extension

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

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;
}

/* ************************
   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,
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: #333333;
}

.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, .fc-toolbar.fc-header-toolbar .fc-left .fc-today-button, #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;
}

.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: #6045E2;
}

::-moz-selection {
  background-color: #6045E2;
}

.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: #6045E2;
}

.c1-bo {
  border-color: #6045E2 !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: #8280FD;
}

.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: #8280FD;
}

.c2-bo {
  border-color: #8280FD !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: "PT Sans", 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: 5px;
}

.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, .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 {
  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;
  min-width: 100px;
  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: 310px;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

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

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

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

.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 #8280FD;
  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: #E9E7FF;
}

.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: #8280FD !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: #E9E7FF;
  color: #8280FD;
  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: #8280FD;
}

.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;
}

.bg-primary {
  background-color: #8280FD !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: #E9E7FF !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: #8280FD !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: #8280FD;
}

.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: #E9E7FF;
}

.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: #E9E7FF;
  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: #E9E7FF;
}

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

/* ************************
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: #E9E7FF;
}

.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: #E9E7FF;
  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: #E9E7FF;
  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);
}

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

.btn-circle:after {
  background-color: #6F51FF;
  background-color: -moz-linear-gradient(left, #6F51FF 0%, #6045E2 100%);
  background-color: -webkit-linear-gradient(left, #6F51FF 0%, #6045E2 100%);
  background-color: linear-gradient(to right, #6F51FF 0%, #6045E2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F51FF', endColorstr='#6045E2',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: #E9E7FF;
  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: #E9E7FF;
  border-radius: 50px;
}

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

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

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

/* ************************
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: #8280FD;
}

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: #8280FD;
}

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

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: #8280FD;
  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: #E9E7FF;
}

.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: #8280FD;
}


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

.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: #E9E7FF;
}

.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: #8280FD;
}

.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: #8280FD;
  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: #8280FD;
}

.progress_22 .ProgressBar-wrap2 .ProgressBar-percentage {
  position: absolute;
  color: #8280FD;
  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: #E9E7FF;
}

.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: #8280FD;
}

/* 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: 7px;
}

.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 {
  max-width: 235px;
  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.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: 5px !important;
}

.search-form .theme-input-group button:hover {
  background-color: #E9E7FF;
  color: #ffffff;
}

.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: #E9E7FF;
  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: #E9E7FF;
}

.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 #8280FD;
  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 #8280FD;
}

.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: #8280FD;
}

.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 #8280FD;
  border-radius: 100%;
  background-color: #E9E7FF;
}

.custom-radio [type="radio"]:checked + label:after,
.custom-radio [type="radio"]:not(:checked) + label:after {
  content: '';
  width: 7px;
  height: 7px;
  background-color: #8280FD;
  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;
  }
}

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: #E9E7FF;
}

.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: #8280FD;
}

.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: #8280FD;
}

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: #8280FD;
}

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 !important;
    -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;
}

@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: #E9E7FF;
  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(#6045E2));
  background: -o-linear-gradient(top, #6F51FF 0%, #6045E2 100%);
  background: linear-gradient(to bottom, #6F51FF 0%, #6045E2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F51FF', endColorstr='#6045E2',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-left: 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;
}

@media only screen and (max-width: 767px) {
  #apex_radar-chart .apexcharts-legend {
    left: 0 !important;
  }
}

/* ************************
   04.2: Social Media Analytics
   ********************* */
.state2 {
  padding: 30px;
}

.state2 h2 {
  color: #FF81A3;
}

.state2.style--two h2 {
  color: #8280FD;
}

.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: #8280FD;
}

.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-left: 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: #E9E7FF;
  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: #E9E7FF;
  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(#6045E2));
  background: -o-linear-gradient(top, #6F51FF 0%, #6045E2 100%);
  background: linear-gradient(to bottom, #6F51FF 0%, #6045E2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F51FF', endColorstr='#6045E2',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: #6045E2;
}

/* 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: #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: #E9E7FF;
}

.invoice-left .list-invoice li a {
  color: #E9E7FF;
}

.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 {
  max-width: 750px;
}

#contactAddModal .modal-body,
#contactEditModal .modal-body {
  padding: 30px 50px 40px 60px;
}

@media only screen and (max-width: 767px) {
  #contactAddModal .modal-body,
  #contactEditModal .modal-body {
    padding: 30px 20px;
  }
}

#contactAddModal .modal-body .cancel,
#contactEditModal .modal-body .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: #8280FD;
}

.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: #E9E7FF;
}

.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 #8280FD;
  -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: #E9E7FF;
}

.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: #E9E7FF;
  border-color: #8280FD;
}

.switch.brand input:checked ~ .control:after {
  background-color: #8280FD;
}

.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: #8280FD;
}

.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;
}

@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: #8280FD;
}

#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: #E9E7FF;
}

.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: #E9E7FF;
  color: #8280FD;
  border-color: #8280FD !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 #E9E7FF;
  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: #E9E7FF;
  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: #E9E7FF;
  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: 140px 30px 100px;
  max-width: 1050px;
}

/* ************************
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: #8280FD;
}

.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: #E9E7FF;
  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: #E9E7FF;
}

.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 #8280FD;
  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: #E9E7FF;
  stroke: #8280FD;
}

.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: #8280FD;
}

/* 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: #E9E7FF;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #8280FD;
}

.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;
}

/*# sourceMappingURL=style.css.map */
