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

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

.black-bo {
  border-color: #061a3a !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: #132d22;
}

::-moz-selection {
  background-color: #132d22;
}

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

.c1-bo {
  border-color: #132d22 !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: #132d22;
}

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

.c2-bo {
  border-color: #132d22 !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: #132d22;
}

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

.c3-bo {
  border-color: #132d22 !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 {
  /* Darkened from #aeaeae — that was 2.22:1 against white, well under the
     4.5:1 WCAG AA minimum for text. #6e6e6e keeps the same "muted helper
     text" gray but reaches ~5.1:1. */
  color: #6e6e6e;
}

.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: "Inter", sans-serif;
}

/* Brand typography: Montserrat is the brand's primary display typeface for
   headlines/titles/key messaging (it's also the wordmark's own typeface).
   Headings previously had no font-family rule and silently inherited
   Inter (the UI/body font) from body — Montserrat, Poppins, Inter and
   Roboto are already all loaded via Google Fonts in the layout, this was
   just never wired up for headings. */
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", 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 {
  /* 0.5 opacity over the #F5F5F5 placeholder composited to ~4.23:1 for the
     white "Upload Photo" text — just under the 4.5:1 WCAG AA minimum.
     0.65 keeps the see-through-to-the-photo effect while reaching ~7.3:1. */
  background-color: rgba(0, 0, 0, 0.65);
  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: #132d22;
}

.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 #132d22;
  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: #132d22 !important;
}

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

.bg-light-success {
  background-color: #132d22 !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: #132d22;
  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: #132d22;
}

.divider.divider-success .divider-text:before,
.divider.divider-success .divider-text:after {
  border-color: #132d22;
}

.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: #132d22 !important;
}

.bg-success {
  background-color: #132d22 !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-* utilities set background only (unlike Bootstrap's own .badge-*
   classes, which pair a background with a matching text color). A
   .badge combined with .bg-primary/.bg-success was left inheriting the
   page's plain gray body text over a dark green background — ~2:1
   contrast, badly failing WCAG AA. White text restores proper contrast
   on these dark backgrounds (~10:1+). */
.badge.bg-primary,
.badge.bg-success,
.badge.bg-dark {
  color: #fff;
}

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

.bg-success-light {
  background-color: #d4e8df !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: #132d22 !important;
}

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

a.text-success:hover {
  color: #1f5c42 !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 {
  /* Darkened from the original #FC7383 — that shade sat at 2.65:1 against a
     white background, well under the 4.5:1 WCAG AA minimum for text. #C82333
     is the same hue family (Bootstrap's danger-dark variant) at ~5.6:1. */
  color: #C82333 !important;
}

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

/* Bootstrap's default .page-link blue (#007bff) sits at 3.98:1 against
   white, just under the 4.5:1 WCAG AA minimum. #0056b3 (Bootstrap's own
   darken($primary, 15%) variant) reaches ~7:1. */
.page-link {
  color: #0056b3;
}
.page-link:hover {
  color: #003d80;
}

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

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

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

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

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

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

/* Brand consistency pass 2026-08-18: match the main site's .theme-btn-one
   hover behavior (animated Fresh Mint fill-sweep, dark text) and flat/solid
   look (no shadow) on the shared .btn class used by ~90% of buttons here. */
.btn {
  overflow: hidden;
  z-index: 1;
  font-weight: 500;
  font-size: 16px;
  text-transform: none;
  box-shadow: none !important;
}
.btn:before {
  position: absolute;
  content: '';
  width: 0%;
  height: 100%;
  background: #5ECFA0;
  border-radius: inherit;
  left: 0;
  top: 0;
  z-index: -1;
  transition: all 500ms ease;
}
.btn:hover:before { width: 100%; }
.btn:hover { background-color: #5ECFA0; color: #142D23 !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;
}

/* Bootstrap's .btn-sm/.btn-lg size modifiers were silently overridden by
   the fixed padding/font-size on .btn above (both single-class specificity,
   .btn wins on source order) — buttons meant to be compact, like inline
   table action buttons, were rendering at full size. Padding is tuned to
   ~40px tall (14px top/bottom + 12px font at line-height:1) to match
   .theme-input-style's 40px height — .btn-sm often sits directly next to
   one of those inputs (e.g. the "Search" button next to a search box),
   and an initial smaller pass here left it looking squat next to them. */
.btn.btn-sm {
  padding: 14px 18px;
  font-size: 12px;
}

.btn.btn-lg {
  padding: 20px 32px;
  font-size: 16px;
}

/* Small outlined destructive action, meant to sit next to a .btn.btn-sm
   primary action in a table row (e.g. Reply + Delete) so both read as the
   same size/shape of control instead of a full pill button next to a bare
   text link. Deliberately NOT reusing .btn-danger above -- that variant
   renders identical to every other .btn color at rest (same Deep Forest fill,
   see the block above), so it can't visually signal "destructive" on its
   own. #C82333 matches this file's own accessibility-checked .text-danger
   red, not a new color choice. */
.btn-outline-danger-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12.5px 18px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  border-radius: 50px;
  background: transparent;
  border: 1.5px solid #C82333;
  color: #C82333;
  transition: all 300ms ease;
  cursor: pointer;
  line-height: 1;
}
.btn-outline-danger-sm:hover {
  background: #C82333;
  border-color: #C82333;
  color: #fff !important;
}

/* Solid destructive action for higher-stakes actions than a simple record
   delete (e.g. force-cancelling a real booking) -- same size/shape as
   .btn-outline-danger-sm, but filled at rest so it reads as more consequential.
   Also replaces old ad-hoc inline `style="background-color: #dc3545"` danger
   buttons that used Bootstrap's default red instead of this file's own
   #C82333 and had no hover state at all. */
.btn-danger-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 18px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  border-radius: 50px;
  background: #C82333;
  border: 1.5px solid #C82333;
  color: #fff;
  transition: all 300ms ease;
  cursor: pointer;
  line-height: 1;
}
.btn-danger-sm:hover {
  background: #a01c2a;
  border-color: #a01c2a;
  color: #fff !important;
}

/* Red actions stay red (2026-10-08). The mint hover above is for brand
   buttons; on a destructive one it turned Reject/Delete/Decline green, and
   Bootstrap's .btn-danger even rendered green at rest. Covers .btn-danger,
   .spod-btn-danger (a red .btn that used an inline red background) and
   .btn.text-danger (a .btn carrying a red icon or label: shown as a red
   outline, filled red on hover). */
.btn.btn-danger,
.btn.spod-btn-danger {
  background: #C82333 !important;
  border-color: #C82333 !important;
  color: #fff !important;
}
.btn.btn-danger:before,
.btn.spod-btn-danger:before,
.btn.text-danger:before { display: none; }
.btn.btn-danger:not(:disabled):hover,
.btn.btn-danger:not(:disabled):focus,
.btn.btn-danger:not(:disabled):not(.disabled):active,
.btn.spod-btn-danger:not(:disabled):hover,
.btn.spod-btn-danger:not(:disabled):focus {
  background: #a01c2a !important;
  border-color: #a01c2a !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn.text-danger {
  background: transparent !important;
  border: 1.5px solid #C82333 !important;
  color: #C82333 !important;
}
.btn.text-danger i { color: inherit !important; }
.btn.text-danger:not(:disabled):hover,
.btn.text-danger:not(:disabled):focus {
  background: #C82333 !important;
  color: #fff !important;
}

/* Admin review pass (2026-10-08) */
/* The theme's header search box, print button and language list do nothing
   here (the form posts to "#", the others are demo links). */
.main-header-search,
.main-header-print,
.main-header-language { display: none !important; }
/* Verification status chip: a label, not a button. Pending's light-blue
   text on light blue was hard to read. */
.btn.s_alert { pointer-events: none; cursor: default; }
.btn.s_alert:before { display: none; }
.btn.s_alert.text-info { color: #0b5f74 !important; }
.btn.s_alert.text-success { color: #1f6f4a !important; }
/* The users / roles / permissions screens (layouts/app-master) used a big
   thin page title unlike every other screen. */
.main-content .bg-light.p-4.rounded > h1,
.main-content .bg-light.p-4.rounded > h2 { font: 700 20px/26px 'Montserrat', sans-serif; color: #0d1927; margin-bottom: 2px; }
.main-content .bg-light.p-4.rounded > .lead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #64748b; margin-bottom: 14px; }
/* their action buttons were floated, so whatever followed (the table, the
   search box) slid underneath them */
.main-content .bg-light.p-4.rounded > .lead .float-right { float: none !important; }
.main-content .bg-light.p-4.rounded > .lead .btn:first-of-type { margin-left: auto; }
/* Wide list tables were cut off at the card edge: cells with long text
   (titles, addresses, messages) wrap; partials/mobile.blade.php marks them
   .spod-wrap on desktop. Short cells stay on one line. */
@media only screen and (min-width: 768px) {
  .main-content table.dh-table td.spod-wrap { white-space: normal; min-width: 170px; max-width: 320px; }
  .main-content table.dh-table th { padding: 16px 14px; }
  .main-content table.dh-table td { padding: 20px 14px; }
}

/* Collapsible page sections and table search boxes (partials/mobile.blade.php) */
.spod-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 18px;
  border: 1px solid #e3e6ea;
  border-radius: 14px;
  background: #fff;
  font: 700 16px/22px 'Montserrat', sans-serif;
  color: #0d1927;
  text-align: left;
  cursor: pointer;
}
.spod-section-head:hover { border-color: #5ECFA0; }
.spod-section-head i { font-size: 14px; color: #5b6570; transition: transform 200ms ease; }
.spod-section-head.is-open { margin-bottom: 10px; border-color: #142D23; }
.spod-section-head.is-open i { transform: rotate(180deg); }
.spod-section-closed { display: none !important; }
.spod-section-dup { display: none !important; }
.spod-filter { position: relative; clear: both; display: flex; align-items: center; gap: 10px; margin: 0 20px 14px; }
.main-content .bg-light.p-4.rounded > .spod-filter { margin-left: 0; margin-right: 0; }
.spod-filter i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; color: #7b8591; pointer-events: none; }
.spod-filter input { flex: 1 1 auto; min-width: 0; max-width: 420px; height: 42px; padding: 0 14px 0 38px; border: 1px solid #e3e6ea; border-radius: 12px; background: #f6f8f9; font-size: 14px; color: #0d1927; }
.spod-filter input:focus { outline: none; background: #fff; border-color: #142D23; }
.spod-filter-count { flex: none; font-size: 12.5px; color: #64748b; }
.spod-filter-count:empty { display: none !important; }
.spod-filter-hide { display: none !important; }
.spod-filter-none td { padding: 20px !important; text-align: center; color: #64748b; }

/* Small outlined *neutral* action -- a toggle like Activate/Deactivate isn't
   destructive (no danger color) but also isn't the row's primary action (no
   solid brand fill either); an outline keeps it visually secondary to a
   solid .btn.btn-sm Edit/Reply button sitting next to it while still reading
   as a real, same-size control rather than a bare text link. */
.btn-outline-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12.5px 18px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  border-radius: 50px;
  background: transparent;
  border: 1.5px solid #142D23;
  color: #142D23;
  transition: all 300ms ease;
  cursor: pointer;
  line-height: 1;
}
.btn-outline-sm:hover {
  background: #142D23;
  color: #fff !important;
}

/* Bootstrap's contextual .btn-* variants (primary, success, etc.) already
   render brand green at rest — same reasoning as above, .btn wins the
   specificity tie at rest. But hover/focus/active use much higher-
   specificity Bootstrap selectors like
   .btn-primary:not(:disabled):not(.disabled):active, which .btn alone
   can't outrank — so buttons were flashing Bootstrap's blue/gray/etc. on
   interaction instead of staying on-brand. !important matches this
   stylesheet's existing convention for overriding third-party framework
   defaults (see .text-danger, .c4, .btn's own outline/box-shadow above). */
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary.focus,
.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled).active,
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success.focus,
.btn.btn-success:not(:disabled):not(.disabled):active,
.btn.btn-success:not(:disabled):not(.disabled).active,
.btn.btn-info:hover,
.btn.btn-info:focus,
.btn.btn-info.focus,
.btn.btn-info:not(:disabled):not(.disabled):active,
.btn.btn-info:not(:disabled):not(.disabled).active,
.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning.focus,
.btn.btn-warning:not(:disabled):not(.disabled):active,
.btn.btn-warning:not(:disabled):not(.disabled).active,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary.focus,
.btn.btn-secondary:not(:disabled):not(.disabled):active,
.btn.btn-secondary:not(:disabled):not(.disabled).active {
  background-color: #5ECFA0 !important;
  border-color: #5ECFA0 !important;
  color: #142D23 !important;
  box-shadow: none !important;
}

.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: #132d22;
  background-color: -moz-linear-gradient(left, #132d22 0%, #132d22 100%);
  background-color: -webkit-linear-gradient(left, #132d22 0%, #132d22 100%);
  background-color: linear-gradient(to right, #132d22 0%, #132d22 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#132d22', endColorstr='#132d22', 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: #d4e8df;
  color: #132d22;
  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: #1f5c42;
}

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

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

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

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

table td {
  color: #727272;
}

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

table td a:hover {
  color: #132d22;
}

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

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

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


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

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

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

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

.progress_22 .ProgressBar-wrap2 .ProgressBar-percentage {
  position: absolute;
  color: #132d22;
  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: #d4e8df;
  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: #d4e8df;
}

.process-bar-wrapper.style--four.green .process-bar {
  background-color: #132d22;
}

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

.process-bar-wrapper.style--five.green .process-bar {
  background-color: #132d22;
}

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

/* 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: 1px solid #e0e0e0;           
  height: 40px;
  width: 100%;
  padding: 0 15px;
  background-color: #ffffff;            /* ✅ White background */
  font-size: 16px;
  border-radius: 7px;
  transition: all 0.3s ease;
  color: #333333;
}

.theme-input-style:hover {
  border-color: #cbd5e1;
  background-color: #fafafa;
}

.theme-input-style:focus {
  background-color: #ffffff;            /* White on focus */
  border-color: #5ECFA0;                /* Green border */
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.theme-input-style::placeholder {
  color: #9ca3af;
}

.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 #5ECFA0 !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: #ffffff;            /* ✅ White background */
  height: 40px;
  border-radius: 7px;
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
  color: #333333;
}

.form-control:hover {
  border-color: #cbd5e1;
  background-color: #fafafa;
}

.form-control:focus {
  background-color: #ffffff;
  border-color: #5ECFA0;
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.form-control::placeholder {
  color: #9ca3af;
}

.form-control.is-valid {
  border: 1px solid #5ECFA0 !important;
}

.form-control.is-invalid {
  border: 1px solid #dc3545 !important;
}

textarea.theme-input-style {
  height: 180px;
  padding: 15px 20px;
  background-color: #ffffff;
}

textarea.theme-input-style:hover {
  border-color: #cbd5e1;
  background-color: #fafafa;
}

textarea.theme-input-style:focus {
  background-color: #ffffff;
  border-color: #5ECFA0;
}

textarea.theme-input-style.style--two {
  padding: 10px 20px;
  height: 100px;
  background-color: #ffffff;            /* ✅ White background */
}

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;
  background-color: #ffffff;
}

textarea.form-control:hover {
  border-color: #cbd5e1;
  background-color: #fafafa;
}

textarea.form-control:focus {
  background-color: #ffffff;
  border-color: #5ECFA0;
}

.custom-select {
  background-color: #d4e8df;
  height: auto;
  color: #132d22;
  padding: 0px 30px 0px 12px;
  background: #d4e8df url(../img/svg/select-down.svg) no-repeat right 0.75rem center/10px 10px;
  transition: all 0.3s ease;
}

.custom-select:hover {
  background-color: #c8e0d5;
}

.custom-select.style--two {
  max-width: 235px;
  padding: 0;
  background: #ffffff url(../img/svg/simple-down.svg) no-repeat right 0.75rem center/16px 14px;
  border: 1px solid #e0e0e0;
}

.custom-select.style--two:hover {
  background-color: #fafafa;
  border-color: #cbd5e1;
}

.custom-select.style--two:focus {
  background-color: #ffffff;
  border-color: #5ECFA0;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.custom-select.style--two .theme-input-style {
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

.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);
  background-color: #f3f4f6;
  cursor: not-allowed;
}

select.multiple {
  width: 100%;
  height: auto;
  padding: 4px 0;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
}

select.multiple:focus {
  border-color: #5ECFA0;
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

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: 1px solid #e0e0e0;
  padding-left: 25px;
  padding-right: 150px;
  color: #333333;
  margin: 0;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.theme-input-group input:hover {
  border-color: #cbd5e1;
  background-color: #fafafa;
}

.theme-input-group input:focus {
  background-color: #ffffff;
  border-color: #5ECFA0;
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

@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: #ffffff;
  height: 40px;
  padding-right: 120px;
  border: 1px solid #e0e0e0;
}

.theme-input-group.style--two input:hover {
  border-color: #cbd5e1;
  background-color: #fafafa;
}

.theme-input-group.style--two input:focus {
  background-color: #ffffff;
  border-color: #5ECFA0;
}

.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: #ffffff;
  height: 40px;
  padding-right: 15px;
  padding-left: 130px;
  border: 1px solid #e0e0e0;
}

.theme-input-group.prepend input:hover {
  border-color: #cbd5e1;
  background-color: #fafafa;
}

.theme-input-group.prepend input:focus {
  background-color: #ffffff;
  border-color: #5ECFA0;
}

.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: #f8f9fa;
  border-radius: 7px;
  border: 1px solid #e0e0e0;
  color: #495057;
}

/* Search Form */
.search-form .theme-input-group {
  position: relative;
  height: 40px;
  width: 100%;
}

.search-form .theme-input-group input {
  background-color: #ffffff;
  padding: 5px 15px;
  height: 40px;
  border: 1px solid #e0e0e0;
  color: #333333;
  transition: all 0.3s ease;
}

.search-form .theme-input-group input:hover {
  border-color: #cbd5e1;
  background-color: #fafafa;
}

.search-form .theme-input-group input:focus {
  background-color: #ffffff;
  border-color: #5ECFA0;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.search-form .theme-input-group input::-webkit-input-placeholder {
  color: #9ca3af !important;
}

.search-form .theme-input-group input::-moz-placeholder {
  color: #9ca3af !important;
}

.search-form .theme-input-group input:-ms-input-placeholder {
  color: #9ca3af !important;
}

.search-form .theme-input-group input::-ms-input-placeholder {
  color: #9ca3af !important;
}

.search-form .theme-input-group input::placeholder {
  color: #9ca3af !important;
}

.search-form .theme-input-group button {
  background-color: #f8f9fa;
  padding: 5px 10px;
  border: 1px solid #e0e0e0;
  transition: background-color 0.3s ease;
}

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

@media only screen and (max-width: 379px) {
  .search-form .theme-input-group button {
    padding: 5px 12px;
  }
}

/* File Input Styling */
input[type="file"].theme-input-style {
  padding: 8px 15px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  cursor: pointer;
}

input[type="file"].theme-input-style:hover {
  border-color: #cbd5e1;
  background-color: #fafafa;
}

input[type="file"].theme-input-style:focus {
  border-color: #5ECFA0;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

input[type="file"].theme-input-style::file-selector-button {
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  padding: 6px 16px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 12px;
  font-size: 14px;
  color: #374151;
  transition: background-color 0.2s ease;
}

input[type="file"].theme-input-style::file-selector-button:hover {
  background-color: #e5e7eb;
}

/* Disabled State */
.theme-input-style:disabled,
.form-control:disabled {
  background-color: #f3f4f6;
  border-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}
.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 #132d22;
  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 #132d22;
}

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

.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: #132d22;
  background-color: #d4e8df;
}

.custom-checkbox.success .checkmark:after {
  border-color: #132d22;
}

.custom-checkbox.success.solid .checkmark {
  background-color: #132d22;
}

.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 #132d22;
  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: #132d22;
  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 #132d22;
  background-color: #d4e8df;
}

.custom-radio.success [type="radio"]:checked+label:after,
.custom-radio.success [type="radio"]:not(:checked)+label:after {
  background-color: #132d22;
}

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

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

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

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: #d4e8df;
  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: #132d22;
  background: -webkit-gradient(linear, left top, left bottom, from(#132d22), to(#132d22));
  background: -o-linear-gradient(top, #132d22 0%, #132d22 100%);
  background: linear-gradient(to bottom, #132d22 0%, #132d22 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#132d22', endColorstr='#132d22', 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: #132d22;
}

.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: #061a3a !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: #132d22;
}

.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: #061a3a !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: #d4e8df;
  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: #d4e8df;
}

.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: #132d22;
  background: -webkit-gradient(linear, left top, left bottom, from(#132d22), to(#132d22));
  background: -o-linear-gradient(top, #132d22 0%, #132d22 100%);
  background: linear-gradient(to bottom, #132d22 0%, #132d22 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#132d22', endColorstr='#132d22', 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: #132d22;
  width: 3px;
}

.todo-list .single-row.level-not_important .label-text {
  color: #132d22;
}

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

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

/* Todo Priority */
.priority .assign-menu {
  color: #132d22;
  padding: 6px 15px;
  background-color: #d4e8df;
}

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

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

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

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

.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 #132d22;
  -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: 24px;
}

.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: 3px;
  top: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  -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: 2px;
  left: 2px;
}

.switch.outline input:checked~.control:after {
  left: 23px;
}

.switch.success input:checked~.control {
  background-color: #d4e8df;
  border-color: #5ECFA0;
}

.switch.success input:checked~.control:after {
  background-color: #fff;
}

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

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

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

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

.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 #d4e8df;
  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: #5ECFA0;
}

#example-vertical>.steps ul li.done a i,
#example-vertical>.steps ul li.current a i {
  color: #132d22;
}

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

.profile-box.style--two h4 {
  color: #132d22;
}

.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: #d4e8df;
  color: #132d22;
}

.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: #132d22;
  border-color: #132d22 !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: #132d22;
}

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

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

.dragable-card.dragable-card-green h4 {
  color: #1f5c42;
}

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

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

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

.card {
  border-radius: 25px !important;
}

/* .card rounds all four corners, but when a table sits flush against the
   bottom edge (the common .card > .table-responsive > table pattern used
   throughout the admin), the table's own square corners show through
   past the card's rounding. Clipping just the table wrapper — not the
   whole card — keeps this from affecting anything else (like floating
   dropdowns) that might need to overflow a .card elsewhere. */
.card > .table-responsive:last-child {
  overflow-y: hidden;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}

/* Roles/Permissions/Users pages use Bootstrap's own bg-light/rounded/p-4
   utilities for their page wrapper instead of the theme's .card (sharp 4px
   corners and an off-white tint vs .card's pure white 25px-rounded look
   used everywhere else). This combination — bg-light + rounded together —
   is used nowhere else in the codebase, so it's safe to restyle to match
   .card directly rather than editing markup across all 11 pages. */
.bg-light.rounded {
  background-color: #fff !important;
  border-radius: 25px !important;
  padding: 30px !important;
}

/* Same reasoning for Bootstrap's .form-label vs the theme's own label
   convention (font-14 bold mb-2) — labels on these pages were rendering
   thinner (400 weight) and slightly larger (15px) than every other form
   in the admin. */
.form-label {
  font-weight: 700 !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
  display: block;
}

/* .form-control has its own border rule (1px solid #e0e0e0, matching
   .theme-input-style exactly) further up this file, but a large, unrelated
   .border-0 utility selector list also includes .form-control and strips
   it with !important. That's likely accidental (.form-control sits amid a
   long list of modal contents, selects, etc. that legitimately want no
   border) — restoring it here rather than editing that fragile shared
   list. Without this, form-control inputs were borderless and, once their
   containing card became pure white too, visually disappeared entirely. */
.form-control {
  border: 1px solid #e0e0e0 !important;
}

/* Card headings ("Featured Cities", "Countries", etc.) sit at wildly
   different distances from the top edge of their card across the admin —
   28 places use .card-body.pt-30 (30px), 26 use plain .card-body
   (Bootstrap's default 20px), and 12 use .card-body.p-4 (24px), all for
   the exact same "heading directly inside a card" pattern. Standardizing
   on whichever card-body's first child is actually a heading (regardless
   of which of those classes it happens to carry) fixes this without
   editing markup in 60+ places. */
.card-body:has(> h1:first-child),
.card-body:has(> h2:first-child),
.card-body:has(> h3:first-child),
.card-body:has(> h4:first-child),
.card-body:has(> h5:first-child),
.card-body:has(> h6:first-child) {
  padding-top: 30px !important;
}

.form-element {
  border-radius: 25px !important;
}

/* Bootstrap's default custom-control (custom-switch/custom-checkbox) checked
   color is #007bff -- off-brand blue, never overridden anywhere in this
   theme. Every toggle/checkbox using this component (Blog "Active",
   Verification Settings, Video Groups layout style, the "Notify Client"
   switch, etc.) picks this up automatically since they all share the same
   Bootstrap classes -- one override brings the whole panel in line with the
   brand color instead of fixing it one screen at a time.
   Uses Fresh Mint (#5ECFA0), not Deep Forest -- same rule as the rest of
   this theme's 2-color system (see CLAUDE.md, "Fonts + brand-color port"):
   a :checked/:hover state painting a background or border gets Mint, same
   as .switch.brand/.switch.success/.switch.primary's own checked states
   already do a few thousand lines up. Deep Forest is for static/default
   ink, not interactive accent states. */
.custom-control-input:checked ~ .custom-control-label::before {
  border-color: #5ECFA0 !important;
  background-color: #5ECFA0 !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(94, 207, 160, 0.25) !important;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  background-color: #5ECFA0 !important;
  border-color: #5ECFA0 !important;
}

/* Plain native <input type="checkbox"/"radio"> (Register As, roles/edit,
   sellerverification, document_settings, etc.) aren't Bootstrap
   custom-controls, so the override above doesn't reach them -- they render
   with the browser's own default accent (usually blue) instead. Covers
   every one of those in one place with the same Fresh Mint, rather than
   fixing them one at a time. Same convention as Spaceond/Spaceond-Portal's
   identical fix. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #5ECFA0;
}

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