/*
*******************
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: 0.7 !important;
}
::-moz-placeholder {
color: #727272 !important;
opacity: 0.7 !important;
}
:-ms-input-placeholder {
color: #727272 !important;
opacity: 0.7 !important;
}
::-ms-input-placeholder {
color: #727272 !important;
opacity: 0.7 !important;
}
::placeholder {
color: #727272 !important;
opacity: 0.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,
.item-check-list {
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: 0.2em 0.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: 1023px) {
.pt-60 {
padding-top: 0;
}
}
.pb-60 {
padding-bottom: 60px;
}
@media only screen and (max-width: 1023px) {
.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,
#projectShareModal .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectShareModal .modal-body .form-group .input-wrap input,
#projectShareModal .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectShareModal .modal-body .form-group .input-wrap select,
#projectShareModal .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectShareModal .modal-body .form-group .input-wrap input,
#projectShareModal .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectShareModal .modal-body .form-group .input-wrap select,
.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,
#shareModal .modal-content .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #shareModal .modal-content .modal-body .form-group .input-wrap input,
#shareModal .modal-content .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #shareModal .modal-content .modal-body .form-group .input-wrap select,
#shareModal .modal-content .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #shareModal .modal-content .modal-body .form-group .input-wrap input,
#shareModal .modal-content .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #shareModal .modal-content .modal-body .form-group .input-wrap select,
.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,
.custom-select.style--two .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .custom-select.style--two input,
.custom-select.style--two .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter .custom-select.style--two select,
.custom-select.style--two .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length .custom-select.style--two input,
.custom-select.style--two .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length .custom-select.style--two select,
.sidebar .sidebar-body li.nav-category,
.sidebar .sidebar-body li a,
.sidebar .sidebar-body li.active>a.disabled,
.sidebar .sidebar-body li:hover>a.disabled,
.aside-body li a,
.aside-body li.fc-event a,
.aside-body li.fc-event a:hover,
.cart-collaterals .shop_table .order-total th,
.cart-collaterals .shop_table .order-total td,
.cart-collaterals .shop_table.style-two th,
.cart-collaterals .shop_table.style-two td,
.cart-collaterals .shop_table.style-two .order-total th,
.cart-collaterals .shop_table.style-two .order-total td,
.message:hover p.time,
.message.active p.time,
.todo-list .todo-text .card-text,
.add-new_task .label-text,
.task-details .label-text,
.invoice-header-left .dropdown-button>a,
#projectTaskDetails .modal-content .project-main-title textarea,
#projectTaskDetails .modal-content .checklist-new-item .checklist-add-controls .icon-close:hover,
.note a,
#example-vertical>.steps ul li.done a,
#example-vertical>.steps ul li.current a,
.notifications a p,
.news a p,
.timeline .event:before,
.time_circles>div>span,
.base-timer__label,
.base-timer__text,
.p_info-list li,
.skill-list li,
.latest-update>a,
.edit-skill label,
.post-body p,
.comments-area .single-comment .comment-content p,
.nouislider-cat,
.dragable-list>div {
color: #333333;
}
.black-bg,
body.sidebar-folded .sidebar .sidebar-body li.nav-category:before {
background-color: #333333;
}
.black-bo {
border-color: #333333 !important;
}
.white,
.text-white *,
.p_header-content *,
.text-white h1,
.p_header-content h1,
.text-white h2,
.p_header-content h2,
.text-white h3,
.p_header-content h3,
.text-white h4,
.p_header-content h4,
.text-white h5,
.p_header-content h5,
.text-white h6,
.p_header-content h6,
.attach-file.style--two .upload-button,
#menu button,
.full-date,
.list-button li:hover,
.list-button li.active,
.btn:hover,
#example-vertical>.actions ul li a:hover[href="#next"],
#example-vertical>.actions ul li a:hover[href="#finish"],
.status-btn,
.light-btn.ba,
.light-btn.btn-circle:after,
.light-btn.offcanvas-overlay,
.aside-body li a.light-btn:after,
.chat_aside .aside-header .light-btn.aside-header-bottom:after,
.light-btn.message:after,
.todo-list .light-btn.single-row:after,
.board .board-cards .light-btn.board-card:before,
#menu button.light-btn,
.light-btn.btn:hover,
#example-vertical>.actions ul li a.light-btn:hover[href="#next"],
#example-vertical>.actions ul li a.light-btn:hover[href="#finish"],
.light-btn.c2-bg,
.dropdown-menu .dropdown-body a:hover .light-btn.change-card-btn.main-text,
.dropdown-menu.style--two .dropdown-body a:hover .light-btn.change-card-btn.time,
#example-vertical>.actions ul li a.light-btn.change-card-btn.preview[href="#next"],
#example-vertical>.actions ul li a.light-btn.change-card-btn.preview[href="#finish"],
#example-vertical>.actions ul li a.light-btn.change-card-btn.style--two[href="#next"],
#example-vertical>.actions ul li a.light-btn.change-card-btn.style--two[href="#finish"],
#example-vertical>.actions ul li a.light-btn.change-card-btn.s_alert[href="#next"],
#example-vertical>.actions ul li a.light-btn.change-card-btn.s_alert[href="#finish"],
.light-btn.change-card-btn,
table.table-contextual .light-btn.change-card-btn.details-btn:hover,
table.table-contextual .details-btn:hover i.light-btn.change-card-btn,
.sidebar .sidebar-body li.active>a.light-btn.change-card-btn,
.sidebar .sidebar-body li:hover>a.light-btn.change-card-btn,
.fc-view>table thead th.light-btn.change-card-btn.fc-day-header,
.notifications a:hover p.light-btn.change-card-btn,
.news a:hover p.light-btn.change-card-btn,
.select2-container--default .select2-selection--multiple .light-btn.change-card-btn.select2-selection__choice,
.about-nav-tab a.light-btn.change-card-btn.active,
.dragable-list>div.ui-sortable-helper i.light-btn.change-card-btn,
.light-btn.change-card-btn:hover,
.theme-input-group button.light-btn,
.theme-input-group>a.light-btn,
.theme-input-group button.light-btn.btn.style--three:hover,
.theme-input-group>a.light-btn.btn.style--three:hover,
.sidebar .sidebar-body li.light-btn.active:before,
.sidebar .sidebar-body li.light-btn:hover:before,
.labels .light-btn.label.add-label,
.label-item .light-btn.label.add-label,
.switch input:checked~.light-btn.control:after,
.switch input:checked~.control .light-btn.check,
.input-group.bootstrap-touchspin button.light-btn.btn,
.light-btn.color-circle,
.faq h5.light-btn:after,
.light-btn.ba:hover,
.light-btn.btn-circle:hover:after,
.light-btn.offcanvas-overlay:hover,
.aside-body li a.light-btn:hover:after,
.chat_aside .aside-header .light-btn.aside-header-bottom:hover:after,
.light-btn.message:hover:after,
.todo-list .light-btn.single-row:hover:after,
.board .board-cards .light-btn.board-card:hover:before,
#menu button.light-btn:hover,
.light-btn.c2-bg:hover,
.dropdown-menu .dropdown-body a:hover .light-btn.change-card-btn.main-text:hover,
.dropdown-menu.style--two .dropdown-body a:hover .light-btn.change-card-btn.time:hover,
table.table-contextual .details-btn:hover i.light-btn.change-card-btn:hover,
.sidebar .sidebar-body li.active>a.light-btn.change-card-btn:hover,
.sidebar .sidebar-body li:hover>a.light-btn.change-card-btn:hover,
.theme-input-group button.light-btn:hover,
.theme-input-group>a.light-btn:hover,
.labels .light-btn.label.add-label:hover,
.label-item .light-btn.label.add-label:hover,
.switch input:checked~.light-btn.control:hover:after,
.switch input:checked~.control .light-btn.check:hover,
.input-group.bootstrap-touchspin button.light-btn.btn:hover,
.light-btn.color-circle:hover,
.faq h5.light-btn:hover:after,
.change-card-btn.c2,
a.change-card-btn:hover,
.dropdown-menu .dropdown-body a:hover .change-card-btn.main-text,
.dropdown-menu.style--two .dropdown-body a:hover .change-card-btn.time,
.change-card-btn.btn.preview,
#example-vertical>.actions ul li a.change-card-btn.preview[href="#next"],
#example-vertical>.actions ul li a.change-card-btn.preview[href="#finish"],
.change-card-btn.btn.style--two,
#example-vertical>.actions ul li a.change-card-btn.style--two[href="#next"],
#example-vertical>.actions ul li a.change-card-btn.style--two[href="#finish"],
.change-card-btn.btn.s_alert,
#example-vertical>.actions ul li a.change-card-btn.s_alert[href="#next"],
#example-vertical>.actions ul li a.change-card-btn.s_alert[href="#finish"],
.change-card-btn.details-btn,
table.table-condensed thead tr:nth-child(2) th.change-card-btn,
table.table-contextual .change-card-btn.details-btn:hover,
table.table-contextual .details-btn:hover i.change-card-btn,
.sidebar .sidebar-body li.active>a.change-card-btn,
.sidebar .sidebar-body li:hover>a.change-card-btn,
.fc-view>table thead th.change-card-btn.fc-day-header,
.notifications a:hover p.change-card-btn,
.news a:hover p.change-card-btn,
.change-card-btn.icon:hover,
.select2-container--default .select2-selection--multiple .change-card-btn.select2-selection__choice,
.change-card-btn.p_nav-link,
.about-nav-tab a.change-card-btn.active,
.change-card-btn.iconwrap,
.dragable-list>div.ui-sortable-helper i.change-card-btn,
.light-btn:hover,
.light-btn.style--two:hover,
table.table-inverse th,
table.table-inverse td,
.theme-input-style2.style--four,
.theme-input-style.style--four,
.dataTables_wrapper .dataTables_filter input.style--four,
.dataTables_wrapper .dataTables_filter select.style--four,
.dataTables_wrapper .dataTables_length input.style--four,
.dataTables_wrapper .dataTables_length select.style--four,
textarea.theme-input-style.style--four,
.theme-input-group button.btn.style--three:hover,
.theme-input-group>a.btn.style--three:hover,
#example-vertical>.actions ul li .theme-input-group>a.style--three:hover[href="#next"],
#example-vertical>.actions ul li .theme-input-group>a.style--three:hover[href="#finish"],
.notification-icon .count,
.avatar .count,
.chat_aside .aside-header .profile .content h4,
.chat_aside .aside-header .profile .content .name,
#search-tab~#search-box input,
.fc-toolbar.fc-header-toolbar .fc-left .fc-today-button,
#projectTaskDetails .modal-content .cover-img .attach-file,
.board-labels-list li .label,
.color-circle,
.profile-pic .upload-button,
.cover-img .upload-button,
.statistics-bounce-rate .state-content h3 {
color: #ffffff;
}
.white-bg,
.dropdown-menu .dropdown-body,
.tasks_aside,
.aside,
.chat_aside,
.statistic-row,
.mail-list-item,
.main-mail,
.fc-toolbar.fc-header-toolbar,
.contact-box .contact-body,
.project-box,
.board .board-cards .board-card,
.add-card,
.form-element,
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up:after,
.price-box.active .price-body,
.timeline.style--two,
.session-timeout,
.add-work-form,
.work-update-form,
.dragable-list>div {
background-color: #ffffff;
}
.white-bo {
border-color: #ffffff !important;
}
.c1,
a,
.dashboard-date.style--six input,
.pagination ul li,
.follow-btn,
.link-btn,
.theme-input-group button:hover,
.theme-input-group>a:hover,
.header-toogle-menu,
.sidebar .sidebar-header .sidebar-toogle-pin,
.aside-body li a.active,
.aside-body li:hover a,
.aside-body li.active a,
.product-details-content .woocommerce-Price-amount,
.mail-compose .form-group .input-wrap span,
.modal-body .form-group .input-wrap span,
.mail-compose .form-group .input-wrap input,
.modal-body .form-group .input-wrap input {
color: #6045e2;
}
::-moz-selection {
background-color: #6045e2;
}
.c1-bg,
::selection,
.btn,
#example-vertical>.actions ul li a[href="#next"],
#example-vertical>.actions ul li a[href="#finish"],
.light-btn.c2-bg:hover,
.theme-input-group input,
.theme-input-group button.btn.style--three,
.theme-input-group>a.btn.style--three,
.theme-input-group.input-wrap>a,
.aside-body li a:after,
.chat_aside .aside-header,
.chat-footer div .submit {
background-color: #6045e2;
}
.c1-bo {
border-color: #6045e2 !important;
}
.c2,
a:hover,
.dropdown-menu .dropdown-body a:hover .main-text,
.dropdown-menu.style--two .dropdown-body a:hover .time,
.dropdown-menu.style--two .dropdown-body a:hover .main-text,
.btn.preview,
#example-vertical>.actions ul li a.preview[href="#next"],
#example-vertical>.actions ul li a.preview[href="#finish"],
.btn.style--two,
#example-vertical>.actions ul li a.style--two[href="#next"],
#example-vertical>.actions ul li a.style--two[href="#finish"],
.btn.s_alert,
#example-vertical>.actions ul li a.s_alert[href="#next"],
#example-vertical>.actions ul li a.s_alert[href="#finish"],
.details-btn,
.light-btn,
table.table-condensed thead tr:nth-child(2) th,
table.table-contextual .details-btn:hover,
table.table-contextual .details-btn:hover i,
.sidebar .sidebar-body li.active>a,
.sidebar .sidebar-body li:hover>a,
.fc-view>table thead th.fc-day-header,
.notifications a:hover p,
.news a:hover p,
.icon:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.p_nav-link,
.about-nav-tab a.active,
.iconwrap,
.dragable-list>div.ui-sortable-helper i {
color: #8280fd;
}
.c2-bg,
.ba,
.btn-circle:after,
.offcanvas-overlay,
.aside-body li a:after,
.chat_aside .aside-header .aside-header-bottom:after,
.message:after,
.todo-list .single-row:after,
.board .board-cards .board-card:before,
#menu button,
.btn:hover,
#example-vertical>.actions ul li a:hover[href="#next"],
#example-vertical>.actions ul li a:hover[href="#finish"],
.light-btn.c2-bg,
.change-card-btn.c2,
a.change-card-btn:hover,
.dropdown-menu .dropdown-body a:hover .change-card-btn.main-text,
.dropdown-menu.style--two .dropdown-body a:hover .change-card-btn.time,
.change-card-btn.btn.preview,
#example-vertical>.actions ul li a.change-card-btn.preview[href="#next"],
#example-vertical>.actions ul li a.change-card-btn.preview[href="#finish"],
.change-card-btn.btn.style--two,
#example-vertical>.actions ul li a.change-card-btn.style--two[href="#next"],
#example-vertical>.actions ul li a.change-card-btn.style--two[href="#finish"],
.change-card-btn.btn.s_alert,
#example-vertical>.actions ul li a.change-card-btn.s_alert[href="#next"],
#example-vertical>.actions ul li a.change-card-btn.s_alert[href="#finish"],
.change-card-btn.details-btn,
.change-card-btn.light-btn,
table.table-condensed thead tr:nth-child(2) th.change-card-btn,
table.table-contextual .change-card-btn.details-btn:hover,
table.table-contextual .details-btn:hover i.change-card-btn,
.sidebar .sidebar-body li.active>a.change-card-btn,
.sidebar .sidebar-body li:hover>a.change-card-btn,
.fc-view>table thead th.change-card-btn.fc-day-header,
.notifications a:hover p.change-card-btn,
.news a:hover p.change-card-btn,
.change-card-btn.icon:hover,
.select2-container--default .select2-selection--multiple .change-card-btn.select2-selection__choice,
.change-card-btn.p_nav-link,
.about-nav-tab a.change-card-btn.active,
.change-card-btn.iconwrap,
.dragable-list>div.ui-sortable-helper i.change-card-btn,
.change-card-btn.c2:hover,
.change-card-btn.details-btn:hover,
.change-card-btn.light-btn:hover,
table.table-condensed thead tr:nth-child(2) th.change-card-btn:hover,
.change-card-btn.p_nav-link:hover,
.change-card-btn.iconwrap:hover,
.theme-input-group button,
.theme-input-group>a,
.theme-input-group button:hover,
.theme-input-group>a:hover,
.theme-input-group button.btn.style--three:hover,
.theme-input-group>a.btn.style--three:hover,
.sidebar .sidebar-body li.active:before,
.sidebar .sidebar-body li:hover:before,
.labels .label.add-label,
.label-item .label.add-label,
.switch input:checked~.control:after,
.switch input:checked~.control .check,
.input-group.bootstrap-touchspin button.btn,
.color-circle,
.faq h5:after {
background-color: #8280fd;
}
.c2-bo {
border-color: #8280fd !important;
}
.c3,
.mail-compose .form-group .cc-btns .cc,
.modal-body .form-group .cc-btns .cc,
.mail-compose .form-group .cc-btns .cc-btn:hover,
.modal-body .form-group .cc-btns .cc-btn:hover,
.assign-tag,
.assign-tag.front-end {
color: #67cf94;
}
.c3-bg,
.avatar-status.bg-teal:after,
.process-bar-wrapper .process-bar.style--two,
.board .board-cards .board-card.label-5:before {
background-color: #67cf94;
}
.c3-bo {
border-color: #67cf94 !important;
}
.c4,
#projectLabelModal .modal-header .back-btn,
.input-group.bootstrap-touchspin.disable input,
#example-vertical>.steps ul li a,
.time_circles>div>h4,
.base-timer__text {
color: #aeaeae;
}
.c4-bg,
#projectShareModal .modal-body .form-group .input-wrap .menu-icon span,
#shareModal .modal-content .modal-body .form-group .input-wrap .menu-icon span,
.switch input:disabled~.control:after,
.switch input:disabled~.control .check,
.switch .control,
.switch.dark input:checked~.control:after,
.input-group.bootstrap-touchspin.disable button.btn {
background-color: #aeaeae;
}
.c4-bo,
.switch.dark input:checked~.control {
border-color: #aeaeae !important;
}
.c5 {
color: #f0f0f0;
}
.c5-bg,
#projectTaskDetails .modal-content .project-main-title textarea,
#projectTaskDetails .modal-content .edit-actions,
#projectTaskDetails .modal-content .edit-actions textarea {
background-color: #f0f0f0;
}
.c5-bo {
border-color: #f0f0f0 !important;
}
/* ************************
02.1: Common Classes
********************* */
/* Transitions */
.trans2,
.theme-input-group button,
.theme-input-group>a {
-webkit-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
}
.trans3,
a,
.ba,
.btn-circle:after,
.offcanvas-overlay,
.aside-body li a:after,
.chat_aside .aside-header .aside-header-bottom:after,
.message:after,
.todo-list .single-row:after,
.board .board-cards .board-card:before,
.dropdown-menu .dropdown-body .content .main-text,
.dropdown-menu.style--two .dropdown-body .content .time,
.dropdown-menu.style--two .dropdown-body .content .main-text,
.list-button li,
.pagination.style--two ul li svg path,
.btn,
#example-vertical>.actions ul li a[href="#next"],
#example-vertical>.actions ul li a[href="#finish"],
.follow-btn i,
.link-btn i,
.details-btn i,
.details-btn svg,
.light-btn,
.change-card-btn,
.remove-btn,
table tr,
table.style--three tr th,
table.style--three tr td,
.theme-input-style2,
.theme-input-style,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length select,
.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,
.hover-overlay,
.hover-overlay i,
.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,
.theme-option-tab-wrap .nav-link i,
.list-gallery-media-images .list-photo-hover-overlay,
.pos-bottom-bar,
.pos-bottom-bar .toggle-button {
-webkit-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
.trans4 {
-webkit-transition: 0.4s ease;
-o-transition: 0.4s ease;
transition: 0.4s ease;
}
.trans5 {
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
/* Font Family */
body,
.pt_sans {
font-family: "PT Sans", sans-serif;
}
ol li:not(:last-child) {
margin-bottom: 5px;
}
/* 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-style2.style--three,
.theme-input-style.style--three,
.dataTables_wrapper .dataTables_filter input.style--three,
.dataTables_wrapper .dataTables_filter select.style--three,
.dataTables_wrapper .dataTables_length input.style--three,
.dataTables_wrapper .dataTables_length select.style--three,
.theme-input-style2.style--four,
.theme-input-style.style--four,
.dataTables_wrapper .dataTables_filter input.style--four,
.dataTables_wrapper .dataTables_filter select.style--four,
.dataTables_wrapper .dataTables_length input.style--four,
.dataTables_wrapper .dataTables_length select.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 .checklist-new-item .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectTaskDetails .modal-content .checklist-new-item input,
#projectTaskDetails .modal-content .checklist-new-item .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectTaskDetails .modal-content .checklist-new-item select,
#projectTaskDetails .modal-content .checklist-new-item .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectTaskDetails .modal-content .checklist-new-item input,
#projectTaskDetails .modal-content .checklist-new-item .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectTaskDetails .modal-content .checklist-new-item select,
#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-style2.style--two,
.theme-input-style.style--two,
.dataTables_wrapper .dataTables_filter input.style--two,
.dataTables_wrapper .dataTables_filter select.style--two,
.dataTables_wrapper .dataTables_length input.style--two,
.dataTables_wrapper .dataTables_length select.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,
.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 .input-wrap .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectShareModal .modal-body .form-group .input-wrap input,
#projectShareModal .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectShareModal .modal-body .form-group .input-wrap select,
#projectShareModal .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectShareModal .modal-body .form-group .input-wrap input,
#projectShareModal .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectShareModal .modal-body .form-group .input-wrap select,
#projectShareModal .modal-body .form-group.comment textarea.theme-input-style,
.input-group.addon .form-control,
.input-group.bootstrap-touchspin button.btn,
.dragable-btn a {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.list-inline li {
display: inline-block;
}
/* Attach file */
.attach-file {
width: 50px;
height: 50px;
background-color: #fee7ff;
color: #e580fd;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.attach-file i {
font-size: 22px;
}
.attach-file .fake-btn {
line-height: 1;
position: absolute;
left: 60px;
}
.attach-file .file-input {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
.attach-file.style--two {
width: 200px;
height: 200px;
background-color: #f5f5f5;
overflow: hidden;
position: relative;
}
.attach-file.style--two .upload-button {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
padding: 8px 15px;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.attach-file.style--two .profile-avatar {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.attach-file.style--three {
width: auto;
height: auto;
padding: 5px 15px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
background-color: #ccf5f8;
color: #09d1de;
}
.attach-file.change-card-attachment {
width: 100%;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
height: 32px;
cursor: pointer;
}
.cover-img {
background-color: #f0f0f0;
width: 100%;
}
/* Others */
.ov-hidden,
.main-wrapper,
.sidebar {
overflow: hidden;
}
.ovx-hidden {
overflow-x: hidden;
}
.py-30 {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.pointer {
cursor: pointer;
}
/* Before After */
.ba,
.btn-circle:after,
.offcanvas-overlay,
.aside-body li a:after,
.chat_aside .aside-header .aside-header-bottom:after,
.message:after,
.todo-list .single-row:after,
.board .board-cards .board-card:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
/* Bg */
.light-bg {
background-color: #fffcf6;
}
/* Bg Img */
.bg-img {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* Dashboard Date */
.dashboard-date {
padding: 0px 15px;
height: 30px;
max-width: 170px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #f0f0f0;
cursor: pointer;
}
.dashboard-date .input-group-addon {
margin-right: 10px;
position: relative;
top: -2px;
}
.dashboard-date input {
border: none;
height: 28px;
position: relative;
min-width: 100px;
background-color: #f0f0f0;
}
.dashboard-date.style--two {
height: 40px;
max-width: 310px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.dashboard-date.style--three {
max-width: 186px;
}
.dashboard-date.style--four {
max-width: 310px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.dashboard-date.style--four input {
width: 100%;
}
.dashboard-date.style--six {
background-color: #e9e7ff;
max-width: 190px;
height: 35px;
}
.dashboard-date.style--six input {
background-color: #e9e7ff;
}
.color-pic input {
padding: 0;
width: 75px;
height: 40px;
}
.comment-action-links .comment-action-link {
display: inline-block;
}
.comment-action-links .comment-action-link:not(:last-child) {
margin-right: 14px;
position: relative;
}
.comment-action-links .comment-action-link:not(:last-child):after {
width: 5px;
height: 0.5px;
position: absolute;
right: -12px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
content: "";
}
/* Dropdown Menu */
.dropdown-menu {
font-size: 15px;
background-clip: padding-box;
border: none;
padding: 11px 0 14px;
min-width: 135px;
}
.dropdown-menu a,
.dropdown-menu .color-balls {
display: block;
width: 100%;
padding: 4px 16px;
clear: both;
font-weight: 400;
text-transform: capitalize;
}
.dropdown-menu a:not(:last-child),
.dropdown-menu .color-balls:not(:last-child) {
margin-bottom: 5px;
}
.dropdown-menu .dropdown-header {
background-color: #fafafa;
padding: 5px 20px;
}
.dropdown-menu .dropdown-header h5 {
font-size: 16px;
}
.dropdown-menu .dropdown-header .text-mute {
color: #fe5280;
width: auto;
padding: 0;
font-size: 12px;
}
.dropdown-menu .dropdown-body {
padding: 8px 20px;
}
.dropdown-menu .dropdown-body .figure {
width: 50px;
height: 50px;
margin-right: 13px;
position: relative;
}
.dropdown-menu .dropdown-body .content p {
margin: 0;
}
.dropdown-menu .dropdown-body .content .name {
margin-right: 20px;
}
.dropdown-menu .dropdown-body .content .time {
font-size: 12px;
color: #aeaeae;
}
.dropdown-menu .dropdown-body .content .main-text {
font-size: 13px;
line-height: 1.53;
}
.dropdown-menu .dropdown-body a {
padding: 12px 0px 18px;
margin-bottom: 0;
}
.dropdown-menu .dropdown-body a:not(:last-child) {
border-bottom: 1px solid #f5f5f5;
}
.dropdown-menu .dropdown-body a:last-child {
padding-bottom: 5px;
}
.dropdown-menu.style--two {
min-width: 300px;
}
.main-header-notification .dropdown-body.notification-list-items {
max-height: 400px !important;
overflow-y: auto;
}
.main-header-notification .dropdown-body.notification-list-items::-webkit-scrollbar {
width: 10px;
color: red;
}
.dropdown-menu.style--two .dropdown-body .content .time {
font-size: 12px;
color: #aeaeae;
}
.dropdown-menu.style--two .dropdown-body .content .main-text {
font-size: 15px;
}
.dropdown-menu.style--two .dropdown-body a {
padding: 15px 0px 10px;
}
.dropdown-menu.style--three a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.dropdown-menu.style--three a span {
width: 20px;
height: 20px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 3px;
background-color: #efefef;
margin-right: 12px;
}
.dropdown-menu.style--four a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
padding: 0 10px;
}
.dropdown-menu.style--four a:hover {
color: #ffb959;
}
.dropdown-menu.style--four a.selected {
color: #67cf94;
}
.dropdown-menu.style--four a span {
width: 20px;
height: 20px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 3px;
background-color: #efefef;
margin-right: 12px;
}
.dropdown-menu.checkbox>div {
position: relative;
padding: 5px 10px 5px 40px;
cursor: pointer;
}
.dropdown-menu.checkbox>div .custom-checkbox {
left: 10px;
}
.dropdown-menu.checkbox>div .custom-checkbox .checkmark {
width: 15px;
height: 15px;
padding: 0;
}
.dropdown-menu.checkbox>div .custom-checkbox .checkmark:after {
left: 5px;
top: 2px;
}
.avatar-status {
position: absolute;
width: 14px;
height: 14px;
right: -2px;
bottom: 0px;
background-color: #ffffff;
}
.avatar-status:after {
width: 8px;
height: 8px;
position: absolute;
content: "";
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #97a3b9;
}
.avatar-status.bg-warn:after {
background-color: #ffb959;
}
.avatar-status.bg-dangers:after {
background-color: #fc7383;
}
.avatar-status.style--two {
right: 1px;
top: 45px;
}
.upload-icon {
width: 90px;
height: 90px;
border: 2px solid #8280fd;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #e9e7ff;
}
.meta-info>div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.meta-info>div:not(:last-child) {
margin-bottom: 14px;
}
.meta-info>div span {
text-transform: capitalize;
display: inline-block;
}
.meta-info>div span:first-child {
width: 120px;
}
@media only screen and (max-width: 575px) {
.meta-info>div span:first-child {
width: 90px;
}
}
.meta-info>div span span {
display: block;
}
.modal-close {
cursor: pointer;
}
sub,
sup {
font-size: 60%;
}
.font-12,
.comment-action-links .comment-action-link,
.meta-info>div span span,
#menu button,
.theme-input-style2.small,
.theme-input-style.small,
.dataTables_wrapper .dataTables_filter input.small,
.dataTables_wrapper .dataTables_filter select.small,
.dataTables_wrapper .dataTables_length input.small,
.dataTables_wrapper .dataTables_length select.small,
.custom-select.style--two.small .theme-input-style,
.custom-select.style--two.small .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .custom-select.style--two.small input,
.custom-select.style--two.small .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter .custom-select.style--two.small select,
.custom-select.style--two.small .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length .custom-select.style--two.small input,
.custom-select.style--two.small .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length .custom-select.style--two.small select,
.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,
#projectMemberModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectMemberModal .modal-content .modal-body input,
#projectLabelModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectLabelModal .modal-content .modal-body input,
#projectChecklistModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectChecklistModal .modal-content .modal-body input,
#projectMoveModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectMoveModal .modal-content .modal-body input,
#projectCopyModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectCopyModal .modal-content .modal-body input,
#projectShareModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectShareModal .modal-content .modal-body input,
#projectMemberModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectMemberModal .modal-content .modal-body select,
#projectLabelModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectLabelModal .modal-content .modal-body select,
#projectChecklistModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectChecklistModal .modal-content .modal-body select,
#projectMoveModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectMoveModal .modal-content .modal-body select,
#projectCopyModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectCopyModal .modal-content .modal-body select,
#projectShareModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectShareModal .modal-content .modal-body select,
#projectMemberModal .modal-content .modal-body .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectMemberModal .modal-content .modal-body input,
#projectLabelModal .modal-content .modal-body .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectLabelModal .modal-content .modal-body input,
#projectChecklistModal .modal-content .modal-body .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectChecklistModal .modal-content .modal-body input,
#projectMoveModal .modal-content .modal-body .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectMoveModal .modal-content .modal-body input,
#projectCopyModal .modal-content .modal-body .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectCopyModal .modal-content .modal-body input,
#projectShareModal .modal-content .modal-body .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectShareModal .modal-content .modal-body input,
#projectMemberModal .modal-content .modal-body .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectMemberModal .modal-content .modal-body select,
#projectLabelModal .modal-content .modal-body .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectLabelModal .modal-content .modal-body select,
#projectChecklistModal .modal-content .modal-body .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectChecklistModal .modal-content .modal-body select,
#projectMoveModal .modal-content .modal-body .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectMoveModal .modal-content .modal-body select,
#projectCopyModal .modal-content .modal-body .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectCopyModal .modal-content .modal-body select,
#projectShareModal .modal-content .modal-body .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectShareModal .modal-content .modal-body select,
.checklist-items .checklist-item .item,
.board-members-list li a,
#shareModal .modal-content .modal-body .form-group .input-wrap .theme-input-style,
#shareModal .modal-content .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #shareModal .modal-content .modal-body .form-group .input-wrap input,
#shareModal .modal-content .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #shareModal .modal-content .modal-body .form-group .input-wrap select,
#shareModal .modal-content .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #shareModal .modal-content .modal-body .form-group .input-wrap input,
#shareModal .modal-content .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #shareModal .modal-content .modal-body .form-group .input-wrap select,
.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-style2.large,
.theme-input-style.large,
.dataTables_wrapper .dataTables_filter input.large,
.dataTables_wrapper .dataTables_filter select.large,
.dataTables_wrapper .dataTables_length input.large,
.dataTables_wrapper .dataTables_length select.large,
.custom-select.style--two.large .theme-input-style,
.custom-select.style--two.large .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .custom-select.style--two.large input,
.custom-select.style--two.large .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter .custom-select.style--two.large select,
.custom-select.style--two.large .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length .custom-select.style--two.large input,
.custom-select.style--two.large .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length .custom-select.style--two.large select,
.fc-toolbar.fc-header-toolbar .fc-left h2,
#projectTaskDetails .modal-content .project-main-title textarea,
#projectTaskDetails .modal-content .edit-actions .icon-close,
.topic {
font-size: 20px !important;
}
.font-30 {
font-size: 30px !important;
}
.font-40 {
font-size: 40px !important;
}
.mr-10 {
margin-right: 10px;
}
.ml-10 {
margin-left: 10px !important;
}
.mr-20 {
margin-right: 20px;
}
.mr-30 {
margin-right: 30px;
}
.mt-n30 {
margin-top: -30px;
}
.pt-20 {
padding-top: 20px !important;
}
.soft-pink,
.follow-btn.soft-pink,
.link-btn.soft-pink,
.close-btn,
.close-btn:hover {
color: #fe5280;
}
.bg-pink {
background-color: #e580fd !important;
}
.bg-light-blue {
background-color: #8280fd !important;
}
.bg-light-info {
background-color: #09d1de !important;
}
.bg-light-success {
background-color: #67cf94 !important;
}
.bg-light-danger {
background-color: #fc7383 !important;
}
.l-height1 {
line-height: 1.1;
}
.bg-c2-light {
background-color: #ecf3fd;
}
.max-h-600 {
max-height: 600px;
}
.h-20 {
min-height: 20px;
}
.h-350 {
height: 350px;
}
.text-transform-none {
text-transform: none;
}
.square-75 {
width: 75px;
height: 75px;
overflow: hidden;
}
.flex-1 {
-webkit-box-flex: 1 !important;
-ms-flex: 1 !important;
flex: 1 !important;
}
.flex-2 {
-webkit-box-flex: 2 !important;
-ms-flex: 2 !important;
flex: 2 !important;
}
.flex-grow {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.flex-shrink {
-ms-flex-negative: 1;
flex-shrink: 1;
}
.flex-basis {
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.mb-n72 {
margin-bottom: -72px;
}
@media only screen and (max-width: 575px) {
.mb-n72 {
margin: 0;
}
}
.right-top {
position: absolute;
right: 15px;
top: 15px;
}
/* Avatar */
.avatar {
width: 40px;
height: 40px;
background-color: #e9e7ff;
color: #8280fd;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.avatar img {
-ms-flex-item-align: end;
align-self: flex-end;
}
.avatar.img-70,
.avatar.img-70 img {
width: 70px;
height: 70px;
}
.avatar.img-60,
.avatar.img-60 img {
width: 60px;
height: 60px;
}
.avatar.img-50,
.avatar.img-50 img {
width: 50px;
height: 50px;
}
.avatar.img-35,
.avatar.img-35 img {
width: 35px;
height: 35px;
}
.avatar.img-25,
.avatar.img-25 img {
width: 25px;
height: 25px;
}
/* Divider */
.divider {
display: block;
text-align: center;
overflow: hidden;
margin: 26px 0;
}
.divider .divider-text {
position: relative;
display: inline-block;
padding: 0 1rem;
background-color: #fff;
}
.divider .divider-text:before,
.divider .divider-text:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
border-top: 1px solid #dfe3e7;
}
.divider .divider-text:before {
right: 100%;
}
.divider .divider-text:after {
left: 100%;
}
.divider.divider-left .divider-text {
float: left;
padding-left: 0;
}
.divider.divider-left-center .divider-text {
left: -25%;
}
.divider.divider-right-center .divider-text {
right: -25%;
}
.divider.divider-right .divider-text {
float: right;
padding-right: 0;
}
.divider.divider-primary .divider-text:before,
.divider.divider-primary .divider-text:after {
border-color: #8280fd;
}
.divider.divider-success .divider-text:before,
.divider.divider-success .divider-text:after {
border-color: #67cf94;
}
.divider.divider-danger .divider-text:before,
.divider.divider-danger .divider-text:after {
border-color: #fc7383;
}
.divider.divider-info .divider-text:before,
.divider.divider-info .divider-text:after {
border-color: #09d1de;
}
.divider.divider-warning .divider-text:before,
.divider.divider-warning .divider-text:after {
border-color: #ffb959;
}
.divider.divider-dark .divider-text:before,
.divider.divider-dark .divider-text:after {
border-color: #727272;
}
.divider.divider-light .divider-text:before,
.divider.divider-light .divider-text:after {
border-color: #f5f5f5;
}
.divider.divider-dotted .divider-text:before,
.divider.divider-dotted .divider-text:after {
border-style: dotted;
border-width: 1px;
}
.divider.divider-dashed .divider-text:before,
.divider.divider-dashed .divider-text:after {
border-style: dashed;
border-width: 1px;
}
.index-9 {
z-index: 9;
}
.mx-1350 {
max-width: 1350px;
margin: 0 auto;
}
.mb-n130 {
margin-bottom: -130px;
}
@media only screen and (max-width: 1023px) {
.mb-n130 {
margin-bottom: -80px;
}
}
@media only screen and (max-width: 767px) {
.mb-n130 {
margin-bottom: 0px;
}
}
.legend>table {
width: auto;
}
.legend>table td {
padding: 0;
padding-left: 5px;
}
#menu button {
display: block;
padding: 5px 10px;
width: 100%;
border-radius: 3px;
}
.mxw-550 {
max-width: 550px;
margin: 0 auto;
}
.mn-vh-100 {
min-height: calc(100vh - 70px) !important;
}
.bg-primary {
background-color: #8280fd !important;
}
.bg-success {
background-color: #67cf94 !important;
}
.bg-info {
background-color: #09d1de !important;
}
.bg-warning {
background-color: #ffb959 !important;
}
.bg-danger {
background-color: #fc7383 !important;
}
.bg-dark {
background-color: #727272 !important;
}
.bg-primary-light {
background-color: #e9e7ff !important;
}
.bg-success-light {
background-color: #dbf7e8 !important;
}
.bg-info-light {
background-color: #ccf5f8 !important;
}
.bg-pink-light {
background-color: #fee7ff !important;
}
.bg-warning-light {
background-color: #fff4e6 !important;
}
.bg-danger-light {
background-color: #ffe2e6 !important;
}
.bg-dark-light {
background-color: #f5f5f5 !important;
}
.text-primary {
color: #8280fd !important;
}
.text-success,
.price-body ul li i {
color: #67cfa2 !important;
}
a.text-success:hover {
color: #67cfa2 !important;
}
.text-info {
color: #09d1de !important;
}
a.text-info:hover {
color: #09d1de !important;
}
.text-warning,
.base-timer__path-remaining.warn {
color: #ffb959 !important;
}
a.text-warning:hover,
a.base-timer__path-remaining.warn:hover {
color: #ffb959 !important;
}
.text-danger,
.price-body ul li i.text-danger,
.select2-container--default .select2-selection--multiple .select2-selection__choice button,
.base-timer__path-remaining.danger {
color: #fc7383 !important;
}
a.text-danger:hover,
a.base-timer__path-remaining.danger:hover {
color: #fc7383 !important;
}
.text-dark {
color: #727272 !important;
}
a.text-dark:hover {
color: #727272 !important;
}
.img-60 {
width: 60px;
height: 60px;
min-width: 60px;
}
.img-50 {
width: 50px;
height: 50px;
min-width: 50px;
}
.img-40 {
width: 40px;
height: 40px;
min-width: 40px;
}
.img-30 {
width: 30px;
height: 30px;
min-width: 30px;
}
.full-date {
display: inline-block;
padding: 5px 10px;
background-color: #d2bb00;
line-height: 1;
}
/* Star Rating */
.star-rating svg {
cursor: pointer;
}
.star-rating svg:not(:last-child) {
margin-right: 4px;
}
/* List Year */
.list-button li {
background-color: #fff4e6;
padding: 3px 15px;
font-size: 14px;
cursor: pointer;
}
.list-button li:not(:last-child) {
margin-right: 10px;
}
@media only screen and (max-width: 767px) {
.list-button li:not(:last-child) {
margin-bottom: 5px;
}
}
.list-button li:hover,
.list-button li.active {
background-color: #67cf94;
}
/* Tag Colors */
.tag_color {
width: 5px;
height: 10px;
display: inline-block;
margin-right: 6px;
position: relative;
top: -1px;
}
.tag_color.urgent,
.tag_color.products {
background-color: #ffb959;
}
.tag_color.important,
.tag_color.works,
.tag_color.friend {
background-color: #fc7383;
}
.tag_color.not_important,
.tag_color.family,
.tag_color.new_project {
background-color: #67cf94;
}
.tag_color.not_urgent,
.tag_color.friends,
.tag_color.event {
background-color: #c491ff;
}
.tag_color.average,
.tag_color.design,
.tag_color.birthday {
background-color: #09d1de;
}
.tag_color.work {
background-color: #ffb959;
}
.tag_color.others,
.tag_color.anniversary {
background-color: #4f9df8;
}
.tag_color.meeting {
background-color: #8280fd;
}
.tag_color.travel {
background-color: #ff8ef0;
}
.tag_color.rest {
background-color: #d2bb00;
}
/* Color Balls */
.color-balls .color {
width: 12px;
height: 12px;
display: inline-block;
cursor: pointer;
margin-right: 2px;
}
.color-balls .color.color1 {
background-color: #fbf6d0;
}
.color-balls .color.color2 {
background-color: #ccf5f8;
}
.color-balls .color.color3 {
background-color: #e9e7ff;
}
.color-balls .color.color4 {
background-color: #fee7ff;
}
.color-balls .color.color5 {
background-color: #ecf3fd;
}
.color-balls .color.color6 {
background-color: #dbf7e8;
}
.color-balls .color.color7 {
background-color: #fff4e6;
}
.color-balls .color.color8 {
background-color: #ffe2e6;
}
/* Member */
.member {
line-height: 1;
}
.member a {
border: 2px solid #ffffff;
width: 30px;
height: 30px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.member a img {
max-width: 26px;
}
}
.member a:not(:last-child) {
margin-right: -10px;
}
.member a.btn-circle {
border: 0;
}
.member.style--two a {
width: 40px;
height: 40px;
}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.member.style--two a img {
min-width: 36px;
}
}
/* Apply style ONLY on IE */
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.ie-flex-basis {
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
padding: 0 20px 20px;
}
.dataTables_wrapper .dataTables_filter>label,
.dataTables_wrapper .dataTables_length>label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td,
table.dataTable tbody th,
table.dataTable tbody td {
padding: 14px 20px;
font-size: 15px;
color: #333;
}
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info {
padding: 20px;
}
@media only screen and (max-width: 479px) {
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info {
padding: 20px 0;
}
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding: 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: transparent;
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link {
z-index: 3;
color: #fff;
background-color: #6045e2;
border-color: transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button a {
min-width: 40px;
width: 40px;
height: 40px;
margin-left: 5px;
cursor: pointer;
color: #333;
border: 1px solid #ddd;
border-radius: 50%;
display: grid;
place-items: center;
}
.dataTables_wrapper .dataTables_paginate .paginate_button a:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button a:hover {
-webkit-box-shadow: none;
box-shadow: none;
}
@media only screen and (max-width: 479px) {
.dataTables_wrapper .dataTables_paginate .paginate_button a {
min-width: 30px;
width: 30px;
height: 30px;
padding: 0;
margin-left: 0px;
}
}
.dataTables_wrapper .dataTables_paginate .paginate_button.next a,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous a {
width: auto;
height: auto;
border: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.next a:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous a:hover {
background: transparent;
border: none;
color: #6045e2 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled a,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled a {
color: #ddd !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current a,
.dataTables_wrapper .dataTables_paginate .paginate_button a:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a:hover {
color: #fff !important;
border-color: #6045e2;
background: #6045e2;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
table.dataTable tfoot th,
table.dataTable tfoot td,
table.dataTable thead th,
table.dataTable thead td {
border-color: #dee2e6;
}
.border-bottom2 {
border-bottom: 1px solid #dee2e6 !important;
}
.border-top2 {
border-top: 1px solid #dee2e6 !important;
}
.border-right2 {
border-right: 1px solid #dee2e6 !important;
}
.border-left2 {
border-left: 1px solid #dee2e6 !important;
}
.help-block {
background-color: #ccf5f8;
padding: 4px 8px;
display: block;
font-size: 12px;
}
.dt-buttons {
padding-left: 20px;
}
.dt-buttons .btn,
.dt-buttons #example-vertical>.actions ul li a[href="#next"],
#example-vertical>.actions ul li .dt-buttons a[href="#next"],
.dt-buttons #example-vertical>.actions ul li a[href="#finish"],
#example-vertical>.actions ul li .dt-buttons a[href="#finish"] {
padding: 13px;
}
@media only screen and (max-width: 575px) {
.dt-buttons .btn,
.dt-buttons #example-vertical>.actions ul li a[href="#next"],
#example-vertical>.actions ul li .dt-buttons a[href="#next"],
.dt-buttons #example-vertical>.actions ul li a[href="#finish"],
#example-vertical>.actions ul li .dt-buttons a[href="#finish"] {
font-size: 10px;
padding: 10px;
}
}
@media only screen and (max-width: 767px) {
.dataTables_wrapper .dataTables_filter>label,
.dataTables_wrapper .dataTables_filter {
width: 100%;
padding-left: 0;
}
div.dataTables_wrapper div.dataTables_filter input {
width: 100%;
}
div.dataTables_wrapper div.dataTables_info {
padding-bottom: 0px;
}
}
@media screen and (max-width: 991px) {
div.dt-buttons {
margin-bottom: 10px;
}
}
div.dataTables_wrapper div.dataTables_info {
padding-top: 20px;
}
.dropdown-menu a.dt-button:not(:last-child),
.dropdown-menu .color-balls:not(:last-child) {
margin-bottom: 0px;
border-bottom: 1px solid #eee;
}
div.dataTables_wrapper div.dataTables_length select {
color: #333;
min-width: 70px;
}
.dataTables_wrapper .custom-select {
background: #dbf7e8 url(../../img/svg/simple-down.svg) no-repeat right 0.75rem center/10px 10px;
}
div.dt-button-collection {
padding: 0rem 0;
}
input[type="file" i]::-webkit-file-upload-button {
border-width: 1px;
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
.hidden {
display: none;
}
.dropzone .dz-message i {
display: block;
font-size: 80px;
}
.filter-black {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.fz-12 {
font-size: 12px !important;
}
.fz-14 {
font-size: 14px !important;
}
.fz-18 {
font-size: 18px !important;
}
.fz-22 {
font-size: 22px !important;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-70 {
opacity: 0.7;
}
.fix-height .ql-editor {
max-height: 200px;
}
.text-truncate-2 {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Flex Gap */
.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-20 {
gap: 20px;
}
.cursor-pointer {
cursor: pointer;
}
.gutters-5 {
margin-right: -5px;
margin-left: -5px;
}
.gutters-5>.col,
.gutters-5>[class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
/* Quantity */
.quantity-input {
border: 1px solid #f0f0f0;
width: 85px;
background-color: #f0f0f0;
}
.quantity-input button {
min-width: 25px;
font-size: 12px;
}
.quantity-input .quantity-input input {
height: 40px;
font-size: 16px;
background-color: #fff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-width: 1px;
}
.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 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.pagination ul li {
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 #e9e7ff;
}
.pagination ul li.current {
background-color: #e9e7ff;
}
.pagination ul li a {
padding: 8px;
}
.pagination>p {
color: #aeaeae;
}
.pagination.style--two ul {
margin: 0;
}
.pagination.style--two ul li svg {
width: 10px;
height: 15px;
}
.pagination.style--two ul li svg path {
stroke: #e9e7ff;
}
.pagination.style--two ul li a.current svg path {
stroke: #8280fd;
}
/* ************************
02.4: Buttons
********************* */
/* Default Btn */
.btn,
#example-vertical>.actions ul li a[href="#next"],
#example-vertical>.actions ul li a[href="#finish"] {
padding: 17px 24px;
font-weight: 700;
line-height: 1;
font-size: 14px;
position: relative;
cursor: pointer;
color: #ffffff;
border: none;
text-transform: capitalize;
outline: 0 !important;
-webkit-box-shadow: 0 5px 10px rgba(4, 0, 252, 0.2) !important;
box-shadow: 0 5px 10px rgba(4, 0, 252, 0.2) !important;
}
.btn svg,
#example-vertical>.actions ul li a[href="#next"] svg,
#example-vertical>.actions ul li a[href="#finish"] svg {
position: relative;
width: 15px;
height: 15px;
top: -2px;
}
.btn.preview,
#example-vertical>.actions ul li a.preview[href="#next"],
#example-vertical>.actions ul li a.preview[href="#finish"] {
background-color: #e9e7ff;
}
.btn.preview:hover,
#example-vertical>.actions ul li a.preview:hover[href="#next"],
#example-vertical>.actions ul li a.preview:hover[href="#finish"] {
background-color: #e3e0ff;
}
.btn.long,
#example-vertical>.actions ul li a.long[href="#next"],
#example-vertical>.actions ul li a.long[href="#finish"] {
padding: 13px 30px;
}
.btn.style--two,
#example-vertical>.actions ul li a.style--two[href="#next"],
#example-vertical>.actions ul li a.style--two[href="#finish"] {
background-color: #e9e7ff;
padding: 12px 24px;
border-radius: 50px !important;
}
.btn.style--two:hover,
#example-vertical>.actions ul li a.style--two:hover[href="#next"],
#example-vertical>.actions ul li a.style--two:hover[href="#finish"] {
background-color: #e2e0ff;
}
.btn.style--two.orange,
#example-vertical>.actions ul li a.style--two.orange[href="#next"],
#example-vertical>.actions ul li a.style--two.orange[href="#finish"] {
padding: 10px 25px;
background-color: #fff4e6;
color: #ffb959;
}
.btn.style--three,
#example-vertical>.actions ul li a.style--three[href="#next"],
#example-vertical>.actions ul li a.style--three[href="#finish"] {
padding: 12px 24px;
}
.btn.s_alert,
#example-vertical>.actions ul li a.s_alert[href="#next"],
#example-vertical>.actions ul li a.s_alert[href="#finish"] {
background-color: #e9e7ff;
padding: 18px 30px;
}
.btn.btn-lg,
#example-vertical>.actions ul li a.btn-lg[href="#next"],
#example-vertical>.actions ul li a.btn-lg[href="#finish"] {
width: 100%;
max-width: 245px;
margin: 0 auto;
display: block;
}
.btn.radius-5,
.btn.dashboard-date.style--four,
#example-vertical>.actions ul li a.dashboard-date.style--four[href="#next"],
#example-vertical>.actions ul li a.dashboard-date.style--four[href="#finish"],
.btn.dashboard-date.style--five,
#example-vertical>.actions ul li a.dashboard-date.style--five[href="#next"],
#example-vertical>.actions ul li a.dashboard-date.style--five[href="#finish"],
.btn.tag_color,
#example-vertical>.actions ul li a.tag_color[href="#next"],
#example-vertical>.actions ul li a.tag_color[href="#finish"],
table.cart_table tr td:nth-child(3) span.btn,
table.cart_table tr td:nth-child(3) input.btn,
table.cart_table tr td:nth-child(4) span.btn,
table.cart_table tr td:nth-child(4) input.btn,
.btn.theme-input-style2.style--three,
#example-vertical>.actions ul li a.theme-input-style2.style--three[href="#next"],
#example-vertical>.actions ul li a.theme-input-style2.style--three[href="#finish"],
.btn.theme-input-style.style--three,
.dataTables_wrapper .dataTables_filter input.btn.style--three,
.dataTables_wrapper .dataTables_filter select.btn.style--three,
.dataTables_wrapper .dataTables_length input.btn.style--three,
.dataTables_wrapper .dataTables_length select.btn.style--three,
#example-vertical>.actions ul li a.theme-input-style.style--three[href="#next"],
#example-vertical>.actions ul li a.theme-input-style.style--three[href="#finish"],
.btn.theme-input-style2.style--four,
#example-vertical>.actions ul li a.theme-input-style2.style--four[href="#next"],
#example-vertical>.actions ul li a.theme-input-style2.style--four[href="#finish"],
.btn.theme-input-style.style--four,
.dataTables_wrapper .dataTables_filter input.btn.style--four,
.dataTables_wrapper .dataTables_filter select.btn.style--four,
.dataTables_wrapper .dataTables_length input.btn.style--four,
.dataTables_wrapper .dataTables_length select.btn.style--four,
#example-vertical>.actions ul li a.theme-input-style.style--four[href="#next"],
#example-vertical>.actions ul li a.theme-input-style.style--four[href="#finish"],
.search-form .theme-input-group input.btn.redius-5,
.search-form .theme-input-group .color-pic input.btn,
.color-pic .search-form .theme-input-group input.btn,
.todo-list .btn.single-row:after,
.todo-list #example-vertical>.actions ul li a.single-row[href="#next"]:after,
#example-vertical>.actions ul li .todo-list a.single-row[href="#next"]:after,
.todo-list #example-vertical>.actions ul li a.single-row[href="#finish"]:after,
#example-vertical>.actions ul li .todo-list a.single-row[href="#finish"]:after,
.fc-bg table tbody td.btn,
.fc-view>table thead th.btn.fc-day-header,
.btn.fc-toolbar.fc-header-toolbar,
#example-vertical>.actions ul li a.fc-toolbar.fc-header-toolbar[href="#next"],
#example-vertical>.actions ul li a.fc-toolbar.fc-header-toolbar[href="#finish"],
.labels .btn.label,
.labels #example-vertical>.actions ul li a.label[href="#next"],
#example-vertical>.actions ul li .labels a.label[href="#next"],
.labels #example-vertical>.actions ul li a.label[href="#finish"],
#example-vertical>.actions ul li .labels a.label[href="#finish"],
.label-item .btn.label,
.label-item #example-vertical>.actions ul li a.label[href="#next"],
#example-vertical>.actions ul li .label-item a.label[href="#next"],
.label-item #example-vertical>.actions ul li a.label[href="#finish"],
#example-vertical>.actions ul li .label-item a.label[href="#finish"],
#projectTaskDetails .modal-content .project-main-title textarea.btn,
#projectTaskDetails .modal-content .cover-img .btn.attach-file,
#projectTaskDetails .modal-content .cover-img #example-vertical>.actions ul li a.attach-file[href="#next"],
#example-vertical>.actions ul li #projectTaskDetails .modal-content .cover-img a.attach-file[href="#next"],
#projectTaskDetails .modal-content .cover-img #example-vertical>.actions ul li a.attach-file[href="#finish"],
#example-vertical>.actions ul li #projectTaskDetails .modal-content .cover-img a.attach-file[href="#finish"],
#projectTaskDetails .modal-content .checklist .checklist-item-wrap .btn.checklist-item-details,
#projectTaskDetails .modal-content .checklist .checklist-item-wrap #example-vertical>.actions ul li a.checklist-item-details[href="#next"],
#example-vertical>.actions ul li #projectTaskDetails .modal-content .checklist .checklist-item-wrap a.checklist-item-details[href="#next"],
#projectTaskDetails .modal-content .checklist .checklist-item-wrap #example-vertical>.actions ul li a.checklist-item-details[href="#finish"],
#example-vertical>.actions ul li #projectTaskDetails .modal-content .checklist .checklist-item-wrap a.checklist-item-details[href="#finish"],
#projectTaskDetails .modal-content .checklist-new-item .btn.theme-input-style,
#projectTaskDetails .modal-content .checklist-new-item .dataTables_wrapper .dataTables_filter input.btn,
.dataTables_wrapper .dataTables_filter #projectTaskDetails .modal-content .checklist-new-item input.btn,
#projectTaskDetails .modal-content .checklist-new-item .dataTables_wrapper .dataTables_filter select.btn,
.dataTables_wrapper .dataTables_filter #projectTaskDetails .modal-content .checklist-new-item select.btn,
#projectTaskDetails .modal-content .checklist-new-item .dataTables_wrapper .dataTables_length input.btn,
.dataTables_wrapper .dataTables_length #projectTaskDetails .modal-content .checklist-new-item input.btn,
#projectTaskDetails .modal-content .checklist-new-item .dataTables_wrapper .dataTables_length select.btn,
.dataTables_wrapper .dataTables_length #projectTaskDetails .modal-content .checklist-new-item select.btn,
#projectTaskDetails .modal-content .checklist-new-item #example-vertical>.actions ul li a.theme-input-style[href="#next"],
#example-vertical>.actions ul li #projectTaskDetails .modal-content .checklist-new-item a.theme-input-style[href="#next"],
#projectTaskDetails .modal-content .checklist-new-item #example-vertical>.actions ul li a.theme-input-style[href="#finish"],
#example-vertical>.actions ul li #projectTaskDetails .modal-content .checklist-new-item a.theme-input-style[href="#finish"],
#projectTaskDetails .modal-content .edit-actions textarea.btn,
#projectChecklistModal .btn.checklist-copy-source,
#projectChecklistModal #example-vertical>.actions ul li a.checklist-copy-source[href="#next"],
#example-vertical>.actions ul li #projectChecklistModal a.checklist-copy-source[href="#next"],
#projectChecklistModal #example-vertical>.actions ul li a.checklist-copy-source[href="#finish"],
#example-vertical>.actions ul li #projectChecklistModal a.checklist-copy-source[href="#finish"],
.btn.project-board-select-wrap,
#example-vertical>.actions ul li a.project-board-select-wrap[href="#next"],
#example-vertical>.actions ul li a.project-board-select-wrap[href="#finish"],
.input-group.addon .input-group-prepend .btn.input-group-text,
.input-group.addon .input-group-prepend #example-vertical>.actions ul li a.input-group-text[href="#next"],
#example-vertical>.actions ul li .input-group.addon .input-group-prepend a.input-group-text[href="#next"],
.input-group.addon .input-group-prepend #example-vertical>.actions ul li a.input-group-text[href="#finish"],
#example-vertical>.actions ul li .input-group.addon .input-group-prepend a.input-group-text[href="#finish"],
.input-group.addon .input-group-append .btn.input-group-text,
.input-group.addon .input-group-append #example-vertical>.actions ul li a.input-group-text[href="#next"],
#example-vertical>.actions ul li .input-group.addon .input-group-append a.input-group-text[href="#next"],
.input-group.addon .input-group-append #example-vertical>.actions ul li a.input-group-text[href="#finish"],
#example-vertical>.actions ul li .input-group.addon .input-group-append a.input-group-text[href="#finish"],
#example-vertical>.actions ul li a.radius-5[href="#next"],
#example-vertical>.actions ul li a.radius-5[href="#finish"] {
border-radius: 5px !important;
}
.btn.radius-10,
.btn.dashboard-date.style--two,
#example-vertical>.actions ul li a.dashboard-date.style--two[href="#next"],
#example-vertical>.actions ul li a.dashboard-date.style--two[href="#finish"],
textarea.btn.theme-input-style,
.btn.custom-select.style--two,
#example-vertical>.actions ul li a.custom-select.style--two[href="#next"],
#example-vertical>.actions ul li a.custom-select.style--two[href="#finish"],
.message-item .bubble p.btn,
#example-vertical>.actions ul li a.radius-10[href="#next"],
#example-vertical>.actions ul li a.radius-10[href="#finish"] {
border-radius: 10px !important;
}
.btn.lg,
#example-vertical>.actions ul li a.lg[href="#next"],
#example-vertical>.actions ul li a.lg[href="#finish"] {
font-size: 16px;
}
.btn.sm,
#example-vertical>.actions ul li a.sm[href="#next"],
#example-vertical>.actions ul li a.sm[href="#finish"] {
padding: 12px 20px;
font-size: 12px;
}
.btn.btn-border,
#example-vertical>.actions ul li a.btn-border[href="#next"],
#example-vertical>.actions ul li a.btn-border[href="#finish"] {
background-color: transparent;
border: 1px solid #6045e2;
color: #6045e2;
}
.btn.btn-border:hover,
#example-vertical>.actions ul li a.btn-border:hover[href="#next"],
#example-vertical>.actions ul li a.btn-border:hover[href="#finish"] {
color: #fff;
background-color: #6045e2;
}
.btn.btn-square,
#example-vertical>.actions ul li a.btn-square[href="#next"],
#example-vertical>.actions ul li a.btn-square[href="#finish"] {
border-radius: 0 !important;
}
.btn.btn-secondary,
#example-vertical>.actions ul li a.btn-secondary[href="#next"],
#example-vertical>.actions ul li a.btn-secondary[href="#finish"] {
background-color: #808080;
-webkit-box-shadow: 0 5px 10px rgba(125, 128, 128, 0.2) !important;
box-shadow: 0 5px 10px rgba(125, 128, 128, 0.2) !important;
}
.btn.btn-secondary:hover,
#example-vertical>.actions ul li a.btn-secondary:hover[href="#next"],
#example-vertical>.actions ul li a.btn-secondary:hover[href="#finish"] {
opacity: 0.8;
}
.btn.btn-secondary.btn-border,
#example-vertical>.actions ul li a.btn-secondary.btn-border[href="#next"],
#example-vertical>.actions ul li a.btn-secondary.btn-border[href="#finish"] {
background-color: transparent;
border: 1px solid #808080;
color: #808080;
}
.btn.btn-secondary.btn-border:hover,
#example-vertical>.actions ul li a.btn-secondary.btn-border:hover[href="#next"],
#example-vertical>.actions ul li a.btn-secondary.btn-border:hover[href="#finish"] {
color: #fff;
background-color: #808080;
}
.btn.btn-danger,
#example-vertical>.actions ul li a.btn-danger[href="#next"],
#example-vertical>.actions ul li a.btn-danger[href="#finish"] {
background-color: #fc7383;
-webkit-box-shadow: 0 5px 10px rgba(252, 115, 131, 0.2) !important;
box-shadow: 0 5px 10px rgba(252, 115, 131, 0.2) !important;
}
.btn.btn-danger:hover,
#example-vertical>.actions ul li a.btn-danger:hover[href="#next"],
#example-vertical>.actions ul li a.btn-danger:hover[href="#finish"] {
opacity: 0.8;
}
.btn.btn-danger.btn-border,
#example-vertical>.actions ul li a.btn-danger.btn-border[href="#next"],
#example-vertical>.actions ul li a.btn-danger.btn-border[href="#finish"] {
background-color: transparent;
border: 1px solid #fc7383;
color: #fc7383;
}
.btn.btn-danger.btn-border:hover,
#example-vertical>.actions ul li a.btn-danger.btn-border:hover[href="#next"],
#example-vertical>.actions ul li a.btn-danger.btn-border:hover[href="#finish"] {
color: #fff;
background-color: #fc7383;
}
.btn.btn-warning,
#example-vertical>.actions ul li a.btn-warning[href="#next"],
#example-vertical>.actions ul li a.btn-warning[href="#finish"] {
background-color: #ffb959;
-webkit-box-shadow: 0 5px 10px rgba(255, 185, 89, 0.2) !important;
box-shadow: 0 5px 10px rgba(255, 185, 89, 0.2) !important;
}
.btn.btn-warning:hover,
#example-vertical>.actions ul li a.btn-warning:hover[href="#next"],
#example-vertical>.actions ul li a.btn-warning:hover[href="#finish"] {
opacity: 0.8;
}
.btn.btn-warning.btn-border,
#example-vertical>.actions ul li a.btn-warning.btn-border[href="#next"],
#example-vertical>.actions ul li a.btn-warning.btn-border[href="#finish"] {
background-color: transparent;
border: 1px solid #ffb959;
color: #ffb959;
}
.btn.btn-warning.btn-border:hover,
#example-vertical>.actions ul li a.btn-warning.btn-border:hover[href="#next"],
#example-vertical>.actions ul li a.btn-warning.btn-border:hover[href="#finish"] {
color: #fff;
background-color: #ffb959;
}
.btn.btn-info,
#example-vertical>.actions ul li a.btn-info[href="#next"],
#example-vertical>.actions ul li a.btn-info[href="#finish"] {
background-color: #4f9df8;
-webkit-box-shadow: 0 5px 10px rgba(79, 157, 248, 0.2) !important;
box-shadow: 0 5px 10px rgba(79, 157, 248, 0.2) !important;
}
.btn.btn-info:hover,
#example-vertical>.actions ul li a.btn-info:hover[href="#next"],
#example-vertical>.actions ul li a.btn-info:hover[href="#finish"] {
opacity: 0.8;
}
.btn.btn-info.btn-border,
#example-vertical>.actions ul li a.btn-info.btn-border[href="#next"],
#example-vertical>.actions ul li a.btn-info.btn-border[href="#finish"] {
background-color: transparent;
border: 1px solid #4f9df8;
color: #4f9df8;
}
.btn.btn-info.btn-border:hover,
#example-vertical>.actions ul li a.btn-info.btn-border:hover[href="#next"],
#example-vertical>.actions ul li a.btn-info.btn-border:hover[href="#finish"] {
color: #fff;
background-color: #4f9df8;
}
.btn.btn-success,
#example-vertical>.actions ul li a.btn-success[href="#next"],
#example-vertical>.actions ul li a.btn-success[href="#finish"] {
background-color: #67cf94;
-webkit-box-shadow: 0 5px 10px rgba(103, 207, 148, 0.2) !important;
box-shadow: 0 5px 10px rgba(103, 207, 148, 0.2) !important;
}
.btn.btn-success:hover,
#example-vertical>.actions ul li a.btn-success:hover[href="#next"],
#example-vertical>.actions ul li a.btn-success:hover[href="#finish"] {
opacity: 0.8;
}
.btn.btn-success.btn-border,
#example-vertical>.actions ul li a.btn-success.btn-border[href="#next"],
#example-vertical>.actions ul li a.btn-success.btn-border[href="#finish"] {
background-color: transparent;
border: 1px solid #67cf94;
color: #67cf94;
}
.btn.btn-success.btn-border:hover,
#example-vertical>.actions ul li a.btn-success.btn-border:hover[href="#next"],
#example-vertical>.actions ul li a.btn-success.btn-border:hover[href="#finish"] {
color: #fff;
background-color: #67cf94;
}
.btn.btn-light,
#example-vertical>.actions ul li a.btn-light[href="#next"],
#example-vertical>.actions ul li a.btn-light[href="#finish"] {
background-color: #f0f0f0;
color: #333;
-webkit-box-shadow: 0 5px 10px rgba(240, 240, 240, 0.2) !important;
box-shadow: 0 5px 10px rgba(240, 240, 240, 0.2) !important;
}
.btn.btn-light:hover,
#example-vertical>.actions ul li a.btn-light:hover[href="#next"],
#example-vertical>.actions ul li a.btn-light:hover[href="#finish"] {
background-color: #e3e3e3;
}
.btn.btn-light.btn-border,
#example-vertical>.actions ul li a.btn-light.btn-border[href="#next"],
#example-vertical>.actions ul li a.btn-light.btn-border[href="#finish"] {
background-color: transparent;
border: 1px solid #f0f0f0;
color: #f0f0f0;
}
.btn.btn-light.btn-border:hover,
#example-vertical>.actions ul li a.btn-light.btn-border:hover[href="#next"],
#example-vertical>.actions ul li a.btn-light.btn-border:hover[href="#finish"] {
color: #333;
background-color: #f0f0f0;
}
.btn.btn-dark,
#example-vertical>.actions ul li a.btn-dark[href="#next"],
#example-vertical>.actions ul li a.btn-dark[href="#finish"] {
background-color: #333;
-webkit-box-shadow: 0 5px 10px rgba(51, 51, 51, 0.2) !important;
box-shadow: 0 5px 10px rgba(51, 51, 51, 0.2) !important;
}
.btn.btn-dark:hover,
#example-vertical>.actions ul li a.btn-dark:hover[href="#next"],
#example-vertical>.actions ul li a.btn-dark:hover[href="#finish"] {
opacity: 0.8;
}
.btn.btn-dark.btn-border,
#example-vertical>.actions ul li a.btn-dark.btn-border[href="#next"],
#example-vertical>.actions ul li a.btn-dark.btn-border[href="#finish"] {
background-color: transparent;
border: 1px solid #333;
color: #333;
}
.btn.btn-dark.btn-border:hover,
#example-vertical>.actions ul li a.btn-dark.btn-border:hover[href="#next"],
#example-vertical>.actions ul li a.btn-dark.btn-border:hover[href="#finish"] {
color: #fff;
background-color: #333;
}
/* Btn Circle */
.btn-circle {
width: 40px;
height: 40px;
position: relative;
z-index: 1;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-shadow: 0 5px 10px rgba(96, 69, 226, 0.5);
box-shadow: 0 5px 10px rgba(96, 69, 226, 0.5);
}
.btn-circle svg {
position: relative;
z-index: 1;
}
.btn-circle:after {
background-color: #6f51ff;
background-color: -moz-linear-gradient(left, #6f51ff 0%, #6045e2 100%);
background-color: -webkit-linear-gradient(left, #6f51ff 0%, #6045e2 100%);
background-color: linear-gradient(to right, #6f51ff 0%, #6045e2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f51ff', endColorstr='#6045e2', GradientType=1);
}
.btn-circle:hover:after {
opacity: 0.7;
}
.btn-circle.style--two {
width: 60px;
height: 60px;
}
.btn-circle.style--three {
width: 30px;
height: 30px;
-webkit-box-shadow: 0 5px 10px rgba(114, 114, 114, 0.5);
box-shadow: 0 5px 10px rgba(114, 114, 114, 0.5);
}
.btn-circle.style--three:after {
display: none;
}
.btn-circle.style--four {
width: 50px;
height: 50px;
}
.btn-circle.style--four svg {
left: 1px;
}
.btn-circle.add-row-btn {
position: absolute;
width: 30px;
height: 30px;
bottom: 10px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.btn-circle.repeater-add-btn {
position: absolute;
width: 40px;
height: 40px;
bottom: 58px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.btn-circle.repeater-add-btn.position-relative {
-webkit-transform: none;
-ms-transform: none;
transform: none;
left: auto;
bottom: auto;
}
.btn-circle.done {
background-color: #dbf7e8;
color: #67cf94;
font-size: 26px;
}
.btn-circle.done:after {
display: none;
}
.btn-home {
width: 40px;
height: 40px;
background-color: #e9e7ff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Follow Btn */
.follow-btn i,
.link-btn i {
left: 0;
position: relative;
}
.follow-btn:hover i,
.link-btn:hover i {
left: 5px;
}
/* Download & Print Btn */
.download-btn,
.print-btn {
background-color: #ccf5f8;
width: 50px;
height: 50px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.print-btn {
background-color: #fff4e6;
}
/* Table Detais Btn */
.details-btn {
background-color: transparent;
}
.details-btn i,
.details-btn svg {
left: 0;
position: relative;
}
.details-btn:hover i,
.details-btn:hover svg {
left: 5px;
}
/* Table Status Btn */
.status-btn {
font-size: 12px;
line-height: 1;
padding: 4px 12px;
}
.status-btn.un_paid {
background-color: #fc7383;
}
.status-btn.on_hold,
.status-btn.product {
background-color: #ffb959;
}
.status-btn.paid {
background-color: #09d1de;
}
.status-btn.completed,
.status-btn.family {
background-color: #67cfa2;
}
.status-btn.work {
background-color: #fc7383;
}
.status-btn.friend,
.status-btn.draft {
background-color: #c491ff;
}
.status-btn.design {
background-color: #09d1de;
}
/* Light Btn */
.light-btn {
background-color: #f0f0f0;
padding: 6px 10px;
border-radius: 3px;
cursor: pointer;
display: inline-block;
}
.light-btn:hover {
background-color: #f5f5f5;
}
/* Change Card Btn */
.change-card-btn {
display: block;
background-color: #f0f0f0;
margin-bottom: 8px;
padding: 6px 10px;
}
.change-card-btn:hover {
background-color: #f5f5f5;
}
.change-card-btn span {
display: inline-block;
}
.change-card-btn span:not(:last-child) {
margin-right: 5px;
}
.close-btn {
width: 50px;
height: 50px;
background-color: #ffe2e6;
font-size: 20px;
}
.close-btn i {
font-weight: 700;
}
.remove-btn {
width: 40px;
height: 40px;
background-color: #ffe2e6;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.remove-btn:hover {
background-color: #fed8de;
}
.remove-btn.style--two {
width: 30px;
height: 30px;
}
.remove-btn.style--three {
width: 24px;
height: 24px;
font-size: 12px;
border: 1px solid #dcdcde;
background-color: #fff;
}
.remove-btn.style--three:hover {
background-color: #6045e2;
border-color: #6045e2;
color: #fff;
cursor: pointer;
}
.light-btn {
padding: 5px 20px;
background-color: #e9e7ff;
border-radius: 50px;
}
.light-btn.style--two {
background-color: #ccf5f8;
color: #09d1de;
}
.light-btn:hover {
background-color: #8280fd;
}
.light-btn:hover.style--two {
background-color: #09d1de;
}
.submit-add-to-menu {
border: 1px solid #6045e2 !important;
color: #6045e2;
}
.bulk-select-button {
background-color: #f0f0f0;
line-height: 1;
padding: 5px 10px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid #dcdcde;
}
/* ************************
02.5: Table
********************* */
table {
width: 100%;
max-width: 100%;
font-size: 14px;
}
table th {
color: #333333;
border-bottom: 1px solid #aeaeae;
}
table td {
color: #727272;
}
table td a {
color: #333333;
font-weight: 700;
font-size: 14px;
}
table td a:hover {
color: #8280fd;
}
table tr:not(:last-child) td {
border-bottom: 1px solid #f5f5f5;
}
table th,
table td {
padding: 16px;
}
table thead th {
border-top: 0;
}
table tbody td {
border-top: 0;
}
table .product-img img {
display: inline-block;
min-width: 52px;
height: 52px;
}
table .product-img img:not(:last-child) {
margin-right: 10px;
}
table.dh-table th {
padding: 20px;
}
table.dh-table td {
padding: 24px 20px;
font-size: 15px;
}
table.style--two {
margin-bottom: 34px;
min-width: 400px;
}
table.style--two thead th {
padding-top: 0px;
padding-bottom: 0px;
}
table.style--two tr th:first-child,
table.style--two tr td:first-child {
padding-left: 0;
}
table.style--three th,
table.style--three td {
padding: 20px 10px;
}
table.style--three thead tr:hover {
-webkit-box-shadow: none;
box-shadow: none;
}
table.style--three thead th {
padding-bottom: 8px;
border: 0;
}
table.style--three tr th,
table.style--three tr td {
position: relative;
}
table.style--three tr th:first-child,
table.style--three tr td:first-child {
padding-left: 20px;
}
table.style--three tr td {
border-bottom: 0;
}
table.style--three tr:hover {
-webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.05);
}
table.style--three tr:not(:last-child) td:after,
table.style--three tr th:after {
content: "";
display: block;
height: 1px;
overflow: hidden;
background-color: #f5f5f5;
position: absolute;
right: 0;
width: 100%;
bottom: 0;
}
table.style--three tr th:after {
background-color: #aeaeae;
}
table.style--three tr:not(:last-child) td:first-child:after,
table.style--three tr:not(:last-child) td:last-child:after,
table.style--three tr th:first-child:after,
table.style--three tr th:last-child:after {
width: calc(100% - 20px);
}
table.style--three tr:not(:last-child) td:last-child:after,
table.style--three tr th:last-child:after {
left: 0;
}
table.order-list-table th:first-child,
table.order-list-table td:first-child {
padding-left: 28px;
}
table.order-list-table tbody td:last-child {
padding-left: 30px;
}
table.order-list-table tbody tr:hover {
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.02);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.02);
}
table.hoverable tbody tr:hover {
-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.02);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.02);
}
table.cart_table thead th {
background-color: #f0f0f0;
}
table.cart_table tr th,
table.cart_table tr td {
padding: 20px;
}
table.cart_table tr th:nth-child(2),
table.cart_table tr td:nth-child(2) {
width: 50%;
}
table.cart_table tr td {
font-size: 15px;
}
table.cart_table tr td:last-child span {
display: inline-block;
margin-right: 10px;
}
table.cart_table tr td:last-child a {
float: right;
position: relative;
top: -1px;
}
@media only screen and (max-width: 1399px) {
table.cart_table tr td:last-child a {
float: none;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
table.cart_table tr td:nth-child(3) span,
table.cart_table tr td:nth-child(3) input,
table.cart_table tr td:nth-child(4) span,
table.cart_table tr td:nth-child(4) input {
min-width: 120px;
background-color: #f0f0f0;
display: inline-block;
padding: 5px 10px;
}
table.cart_table tr td:nth-child(3) input {
width: 120px;
height: 30px;
padding: 5px 10px;
}
table.cart_table tr:last-child th,
table.cart_table tr:last-child td {
border-bottom: 1px solid #aeaeae;
}
table.style--four th,
table.style--four td {
text-align: right;
}
table.style--four th:first-child,
table.style--four td:first-child {
text-align: left;
}
table.style--four th {
padding: 13px 20px;
padding-top: 0;
}
table.style--four td {
font-size: 15px;
padding: 14px 20px;
}
table.style--four td .country-flag {
width: 30px;
height: 30px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: #efefef;
margin-right: 10px;
}
table.style--five {
margin-bottom: 10px;
}
table.style--five th {
padding: 5px 20px;
}
table.style--five td {
padding: 9px 20px;
}
table.style--five td .img {
margin-right: 10px;
width: 45px;
height: 45px;
}
table.invoice-list-table th:first-child,
table.contact-list-table th:first-child,
table.invoice-list-table td:first-child,
table.contact-list-table td:first-child,
table.invoice-list th:first-child,
table.invoice-list td:first-child {
padding-left: 20px;
position: relative;
}
table.invoice-list-table th .star,
table.contact-list-table th .star,
table.invoice-list-table td .star,
table.contact-list-table td .star,
table.invoice-list th .star,
table.invoice-list td .star {
margin-left: 36px;
position: relative;
top: -2px;
}
table.invoice-list-table thead th,
table.contact-list-table thead th,
table.invoice-list thead th {
padding-top: 40px;
}
table.invoice-list-table thead th .custom-checkbox,
table.contact-list-table thead th .custom-checkbox,
table.invoice-list thead th .custom-checkbox {
top: auto;
-webkit-transform: none;
-ms-transform: none;
transform: none;
bottom: 16px;
}
table.invoice-list-table tbody td,
table.contact-list-table tbody td,
table.invoice-list tbody td {
font-size: 15px;
padding: 20px 15px;
}
table.invoice-list-table tbody tr:hover,
table.contact-list-table tbody tr:hover,
table.invoice-list tbody tr:hover {
-webkit-box-shadow: 0px 9px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 9px 10px rgba(0, 0, 0, 0.05);
}
table.invoice-list-table tbody tr.selected,
table.contact-list-table tbody tr.selected,
table.invoice-list tbody tr.selected {
background-color: #f0f0f0;
}
table.invoice-list-table.style-two,
table.style-two.contact-list-table,
table.invoice-list.style-two {
border-bottom: 1px solid #aeaeae;
}
table.invoice-list-table.style-two th,
table.style-two.contact-list-table th,
table.invoice-list.style-two th {
padding: 20px;
}
table.invoice-list-table.style-two th:nth-child(4),
table.style-two.contact-list-table th:nth-child(4),
table.invoice-list-table.style-two th:nth-child(3),
table.style-two.contact-list-table th:nth-child(3),
table.invoice-list-table.style-two th:nth-child(5),
table.style-two.contact-list-table th:nth-child(5),
table.invoice-list.style-two th:nth-child(4),
table.invoice-list.style-two th:nth-child(3),
table.invoice-list.style-two th:nth-child(5) {
text-align: right;
}
table.invoice-list-table.style-two th:nth-child(4) span,
table.style-two.contact-list-table th:nth-child(4) span,
table.invoice-list-table.style-two th:nth-child(3) span,
table.style-two.contact-list-table th:nth-child(3) span,
table.invoice-list-table.style-two th:nth-child(5) span,
table.style-two.contact-list-table th:nth-child(5) span,
table.invoice-list.style-two th:nth-child(4) span,
table.invoice-list.style-two th:nth-child(3) span,
table.invoice-list.style-two th:nth-child(5) span {
max-width: 120px;
display: block;
text-align: left;
margin-left: auto;
}
table.invoice-list-table.style-two th:nth-child(5) span,
table.style-two.contact-list-table th:nth-child(5) span,
table.invoice-list.style-two th:nth-child(5) span {
max-width: 140px;
}
table.invoice-list-table.style-two td,
table.style-two.contact-list-table td,
table.invoice-list.style-two td {
padding: 26px 20px;
}
table.invoice-list-table.style-two td:nth-child(3),
table.style-two.contact-list-table td:nth-child(3),
table.invoice-list-table.style-two td:nth-child(4),
table.style-two.contact-list-table td:nth-child(4),
table.invoice-list-table.style-two td:nth-child(5),
table.style-two.contact-list-table td:nth-child(5),
table.invoice-list.style-two td:nth-child(3),
table.invoice-list.style-two td:nth-child(4),
table.invoice-list.style-two td:nth-child(5) {
text-align: right;
}
table.invoice-list-table.style-two td:nth-child(3) input,
table.style-two.contact-list-table td:nth-child(3) input,
table.invoice-list-table.style-two td:nth-child(4) input,
table.style-two.contact-list-table td:nth-child(4) input,
table.invoice-list-table.style-two td:nth-child(5) input,
table.style-two.contact-list-table td:nth-child(5) input,
table.invoice-list.style-two td:nth-child(3) input,
table.invoice-list.style-two td:nth-child(4) input,
table.invoice-list.style-two td:nth-child(5) input {
max-width: 120px;
}
table.invoice-list-table.style-two td:nth-child(3)>div,
table.style-two.contact-list-table td:nth-child(3)>div,
table.invoice-list-table.style-two td:nth-child(4)>div,
table.style-two.contact-list-table td:nth-child(4)>div,
table.invoice-list-table.style-two td:nth-child(5)>div,
table.style-two.contact-list-table td:nth-child(5)>div,
table.invoice-list.style-two td:nth-child(3)>div,
table.invoice-list.style-two td:nth-child(4)>div,
table.invoice-list.style-two td:nth-child(5)>div {
max-width: 160px;
margin-left: auto;
}
table.invoice-list-table.style-two td input,
table.style-two.contact-list-table td input,
table.invoice-list.style-two td input {
min-width: 100px;
}
table.invoice-list-table.style-two td .tr-close,
table.style-two.contact-list-table td .tr-close,
table.invoice-list.style-two td .tr-close {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin-left: 60px;
cursor: pointer;
}
table.invoice-list-table.style-two td .tr-close .svg,
table.style-two.contact-list-table td .tr-close .svg,
table.invoice-list.style-two td .tr-close .svg {
width: 12px;
height: 12px;
}
table.invoice-list-table.style-two thead,
table.style-two.contact-list-table thead,
table.invoice-list.style-two thead {
background-color: #f0f0f0;
}
table.invoice-list-table.style-two tbody tr:hover,
table.style-two.contact-list-table tbody tr:hover,
table.invoice-list.style-two tbody tr:hover {
-webkit-box-shadow: none;
box-shadow: none;
}
table.invoice-list thead th {
padding-top: 20px;
padding-top: 20px;
}
table.invoice-list th:first-child,
table.invoice-list td:first-child {
padding-left: 58px;
}
table.invoice-list th:last-child,
table.invoice-list td:last-child {
text-align: right;
padding-right: 40px;
}
table.invoice-list .custom-checkbox {
left: 20px;
}
table.invoice-list .dropdown-button {
left: auto;
right: 0;
}
table.invoice-list tbody tr.selected {
background-color: #ffffff;
}
table.contact-list-table td.actions span {
cursor: pointer;
}
table.contact-list-table td.actions span:not(:last-child) {
margin-right: 10px;
}
table.table-condensed thead tr:nth-child(2) {
background-color: #ecf3fd;
}
table.table-condensed tbody tr td.active.day {
background: #8280fd;
}
table.table-condensed tbody tr td.active.day:hover {
background: #8280fd;
}
table.table-bordered tr:last-child td {
border-bottom: 0;
}
table.table-bordered th {
border-top-color: #aeaeae;
border-bottom: 1px solid #aeaeae;
}
table.table-bordered th:first-child,
table.table-bordered td:first-child {
border-left: 0;
}
table.table-bordered th:last-child,
table.table-bordered td:last-child {
border-right: 0;
}
/* ************************
02.6: Progress Bars & Process Bars
********************* */
.ProgressBar-wrap,
.ProgressBar-wrap2 {
height: 175px;
width: 175px;
margin: 0 auto;
}
@media only screen and (min-width: 1500px) and (max-width: 1700px) {
.ProgressBar-wrap,
.ProgressBar-wrap2 {
width: 150px;
height: 150px;
}
}
.ProgressBar-wrap .ProgressBar,
.ProgressBar-wrap2 .ProgressBar,
.ProgressBar-wrap .ProgressBar-contentCircle,
.ProgressBar-wrap2 .ProgressBar-contentCircle {
display: table;
height: 100%;
width: 100%;
position: absolute;
}
.ProgressBar-wrap .ProgressBar-circle,
.ProgressBar-wrap2 .ProgressBar-circle,
.ProgressBar-wrap .ProgressBar-background,
.ProgressBar-wrap2 .ProgressBar-background {
fill: white;
stroke: #24d4e0;
stroke-width: 20px;
stroke-linecap: round;
stroke-dasharray: 0;
stroke-dashoffset: 0;
z-index: 10;
}
.ProgressBar-wrap .ProgressBar-background,
.ProgressBar-wrap2 .ProgressBar-background {
stroke: #ccf5f8;
stroke-width: 20px;
z-index: 0;
}
.ProgressBar-wrap .ProgressBar-percentage--text,
.ProgressBar-wrap2 .ProgressBar-percentage--text {
position: absolute;
left: 45%;
top: 37%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 14px;
}
.ProgressBar-wrap .ProgressBar-percentage,
.ProgressBar-wrap2 .ProgressBar-percentage {
font-size: 40px;
text-align: center;
width: 100%;
display: table-cell;
vertical-align: middle;
position: relative;
top: 10px;
}
.ProgressBar-wrap .ProgressBar-percentage span,
.ProgressBar-wrap2 .ProgressBar-percentage span {
font-size: 70%;
top: -8px;
position: relative;
}
.ProgressBar-wrap2 {
width: 48px;
height: 48px;
margin: 10px 0;
}
.ProgressBar-wrap2 .ProgressBar,
.ProgressBar-wrap2 .ProgressBar-contentCircle {
display: block;
}
.ProgressBar-wrap2 .ProgressBar-circle,
.ProgressBar-wrap2 .ProgressBar-background {
fill: none;
stroke: #8280fd;
stroke-width: 20px;
}
.ProgressBar-wrap2 .ProgressBar-background {
stroke: #f5f5f5;
stroke-width: 20px;
}
.ProgressBar-wrap2 .ProgressBar-percentage--text {
left: 62px;
top: 30px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
font-size: 14px;
}
.ProgressBar-wrap2 .ProgressBar-percentage {
font-size: 36px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
display: block;
position: absolute;
top: -14px;
left: 62px;
}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.ProgressBar-wrap2 .ProgressBar-percentage {
min-width: 80px;
}
}
/* progress info */
.progress-info div {
font-size: 14px;
}
.progress-info div:first-child {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
}
.progress-info div:nth-child(2) {
-ms-flex-preferred-size: 35%;
flex-basis: 35%;
}
.progress-info div:last-child {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
}
.progress-title {
margin-bottom: 34px;
}
.progress_1 {
background-color: #ccf5f8;
}
.progress_2 {
background-color: #fee7ff;
}
.progress_2 .ProgressBar-wrap .ProgressBar-circle,
.progress_2 .ProgressBar-wrap2 .ProgressBar-circle,
.progress_2 .ProgressBar-wrap .ProgressBar-background,
.progress_2 .ProgressBar-wrap2 .ProgressBar-background {
stroke: #c491ff;
}
.progress_2 .ProgressBar-wrap .ProgressBar-background,
.progress_2 .ProgressBar-wrap2 .ProgressBar-background {
stroke: #fee7ff;
}
.progress_3 {
background-color: #e9e7ff;
}
.progress_3 .ProgressBar-wrap .ProgressBar-circle,
.progress_3 .ProgressBar-wrap2 .ProgressBar-circle,
.progress_3 .ProgressBar-wrap .ProgressBar-background,
.progress_3 .ProgressBar-wrap2 .ProgressBar-background {
stroke: #8280fd;
}
.progress_3 .ProgressBar-wrap .ProgressBar-background,
.progress_3 .ProgressBar-wrap2 .ProgressBar-background {
stroke: #e9e7ff;
}
.progress_5 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #e580fd;
}
.progress_6 {
background-color: #fee7ff;
}
.progress_6 .ProgressBar-wrap,
.progress_6 .ProgressBar-wrap2 {
width: 185px;
height: 185px;
}
@media only screen and (min-width: 1500px) and (max-width: 1700px) {
.progress_6 .ProgressBar-wrap,
.progress_6 .ProgressBar-wrap2 {
width: 150px;
height: 160px;
}
}
.progress_6 .ProgressBar-wrap .ProgressBar-circle,
.progress_6 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #c491ff;
}
.progress_7 {
background-color: #e9e7ff;
}
.progress_7 .ProgressBar-wrap2 {
width: 185px;
height: 185px;
}
@media only screen and (min-width: 1500px) and (max-width: 1700px) {
.progress_7 .ProgressBar-wrap2 {
width: 150px;
height: 160px;
}
}
.progress_7 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #8280fd;
}
.progress_8,
.progress_9,
.progress_10,
.progress_11,
.progress_12,
.progress_13,
.progress_14,
.progress_15 {
margin-right: 12px;
}
.progress_8 .ProgressBar-wrap2,
.progress_9 .ProgressBar-wrap2,
.progress_10 .ProgressBar-wrap2,
.progress_11 .ProgressBar-wrap2,
.progress_12 .ProgressBar-wrap2,
.progress_13 .ProgressBar-wrap2,
.progress_14 .ProgressBar-wrap2,
.progress_15 .ProgressBar-wrap2 {
width: 36px;
height: 36px;
margin: 0;
}
.progress_9 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #ffb959;
}
.progress_10 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #ff81a3;
}
.progress_11 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #67cf94;
}
.progress_12 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #e580fd;
}
.progress_13 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #09d1de;
}
.progress_14 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #4c9efe;
}
.progress_15 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #ffb959;
}
.progress_16,
.progress_17,
.progress_18,
.progress_19 {
margin-right: 0px;
}
.progress_16 .ProgressBar-wrap2,
.progress_17 .ProgressBar-wrap2,
.progress_18 .ProgressBar-wrap2,
.progress_19 .ProgressBar-wrap2 {
width: 160px;
height: 160px;
margin: 0 auto;
}
.progress_16 .ProgressBar-wrap2 .ProgressBar,
.progress_17 .ProgressBar-wrap2 .ProgressBar,
.progress_18 .ProgressBar-wrap2 .ProgressBar,
.progress_19 .ProgressBar-wrap2 .ProgressBar {
position: relative;
}
.progress_16 .ProgressBar-wrap2 .ProgressBar-circle,
.progress_17 .ProgressBar-wrap2 .ProgressBar-circle,
.progress_18 .ProgressBar-wrap2 .ProgressBar-circle,
.progress_19 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #c491ff;
stroke-width: 10px;
}
.progress_16 .ProgressBar-wrap2 .ProgressBar-background,
.progress_17 .ProgressBar-wrap2 .ProgressBar-background,
.progress_18 .ProgressBar-wrap2 .ProgressBar-background,
.progress_19 .ProgressBar-wrap2 .ProgressBar-background {
stroke-width: 10px;
}
.progress_16 .ProgressBar-wrap2 .progress-middle-text,
.progress_17 .ProgressBar-wrap2 .progress-middle-text,
.progress_18 .ProgressBar-wrap2 .progress-middle-text,
.progress_19 .ProgressBar-wrap2 .progress-middle-text {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.progress_16 .ProgressBar-wrap2 .progress-middle-text h3,
.progress_17 .ProgressBar-wrap2 .progress-middle-text h3,
.progress_18 .ProgressBar-wrap2 .progress-middle-text h3,
.progress_19 .ProgressBar-wrap2 .progress-middle-text h3 {
font-size: 24px;
}
.progress_17 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #67cf94;
}
.progress_18 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #fc7383;
}
.progress_19 .ProgressBar-wrap2 {
width: 80px;
height: 80px;
}
.progress_19 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #fdac41;
}
.progress_20 {
background-color: #ffffff;
}
.progress_20 .ProgressBar-background {
stroke: #ffffff;
}
.progress_20 .ProgressBar-wrap,
.progress_20 .ProgressBar-wrap2 {
width: 250px;
height: 250px;
}
@media only screen and (min-width: 1500px) and (max-width: 1700px) {
.progress_20 .ProgressBar-wrap,
.progress_20 .ProgressBar-wrap2 {
width: 150px;
height: 160px;
}
}
.progress_20 .ProgressBar-wrap .ProgressBar-circle,
.progress_20 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #8280fd;
fill: #f0f0f0;
}
.progress_21 .ProgressBar-wrap,
.progress_21 .ProgressBar-wrap2 {
width: 52px;
height: 52px;
}
.progress_21 .ProgressBar-wrap .ProgressBar-circle,
.progress_21 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #fdac41;
}
.progress_22 .ProgressBar-wrap2 {
width: 48px;
height: 48px;
margin: 0;
}
.progress_22 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #8280fd;
}
.progress_22 .ProgressBar-wrap2 .ProgressBar-percentage {
position: absolute;
color: #8280fd;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.progress_23 .ProgressBar-wrap2 {
width: 76px;
height: 76px;
margin: 0;
}
.progress_23 .ProgressBar-wrap2 .ProgressBar-circle {
stroke: #fff;
}
.progress_23 .ProgressBar-wrap2 .ProgressBar-background {
stroke: #9d9bff;
}
.progress_23 .ProgressBar-wrap2 .ProgressBar-percentage {
position: absolute;
color: #fff;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* Process bar */
.process-bar-wrapper {
width: 100%;
height: 5px;
background-color: #f8f8f8;
position: relative;
margin-top: 40px;
}
.process-bar-wrapper .process-name,
.process-bar-wrapper .process-width {
position: absolute;
bottom: 100%;
left: 0;
font-size: 14px;
line-height: 1.8;
margin-bottom: 2px;
text-transform: capitalize;
}
.process-bar-wrapper .process-width {
left: auto;
right: 0;
}
.process-bar-wrapper .process-bar {
background-color: #ffbb5e;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 0;
}
.process-bar-wrapper .process-bar.style--three {
background-color: #ff81a3;
}
.process-bar-wrapper .process-bar.style--four {
background-color: #24d4e0;
}
.process-bar-wrapper.style--two {
width: 120px;
height: 7px;
margin-top: 60px;
background-color: #ecf3fd;
}
.process-bar-wrapper.style--two .process-width {
font-size: 12px;
margin-bottom: 7px;
}
.process-bar-wrapper.style--two .process-bar {
background-color: #4f9df8;
}
.process-bar-wrapper.style--three {
height: 25px;
background-color: #dbf7e8;
margin-top: 75px;
}
.process-bar-wrapper.style--four {
width: calc(100% - 80px);
height: 10px;
background-color: #ecf3fd;
margin: 0;
}
@media only screen and (max-width: 767px) {
.process-bar-wrapper.style--four {
width: calc(100% - 60px);
}
}
@media only screen and (max-width: 575px) {
.process-bar-wrapper.style--four {
margin-left: 56px;
margin-top: 5px;
width: calc(100% - 60px - 56px);
}
}
.process-bar-wrapper.style--four .process-width {
right: -80px;
top: -10px;
font-size: 15px;
width: 80px;
text-align: right;
}
@media only screen and (max-width: 767px) {
.process-bar-wrapper.style--four .process-width {
width: 60px;
right: -60px;
}
}
.process-bar-wrapper.style--four .process-bar {
background-color: #4f9df8;
}
.process-bar-wrapper.style--four.paste {
background-color: #ccf5f8;
}
.process-bar-wrapper.style--four.paste .process-bar {
background-color: #09d1de;
}
.process-bar-wrapper.style--four.green {
background-color: #dbf7e8;
}
.process-bar-wrapper.style--four.green .process-bar {
background-color: #67cf94;
}
.process-bar-wrapper.style--four.orange {
background-color: #fff4e6;
}
.process-bar-wrapper.style--four.orange .process-bar {
background-color: #ffb959;
}
.process-bar-wrapper.style--five {
max-width: 290px;
height: 10px;
margin: 0;
display: inline-block;
background-color: #fff4e6;
}
.process-bar-wrapper.style--five.pink {
background-color: #fee7ff;
}
.process-bar-wrapper.style--five.pink .process-bar {
background-color: #e580fd;
}
.process-bar-wrapper.style--five.green {
background-color: #dbf7e8;
}
.process-bar-wrapper.style--five.green .process-bar {
background-color: #67cf94;
}
.process-bar-wrapper.style--five.blue {
background-color: #ecf3fd;
}
.process-bar-wrapper.style--five.blue .process-bar {
background-color: #4f9df8;
}
.process-bar-wrapper.style--five.c2,
a.process-bar-wrapper.style--five:hover,
.dropdown-menu .dropdown-body a:hover .process-bar-wrapper.style--five.main-text,
.dropdown-menu.style--two .dropdown-body a:hover .process-bar-wrapper.style--five.time,
.process-bar-wrapper.style--five.btn.preview,
#example-vertical>.actions ul li a.process-bar-wrapper.style--five.preview[href="#next"],
#example-vertical>.actions ul li a.process-bar-wrapper.style--five.preview[href="#finish"],
.process-bar-wrapper.style--five.btn.style--two,
#example-vertical>.actions ul li a.process-bar-wrapper.style--five.style--two[href="#next"],
#example-vertical>.actions ul li a.process-bar-wrapper.style--five.style--two[href="#finish"],
.process-bar-wrapper.style--five.btn.s_alert,
#example-vertical>.actions ul li a.process-bar-wrapper.style--five.s_alert[href="#next"],
#example-vertical>.actions ul li a.process-bar-wrapper.style--five.s_alert[href="#finish"],
.process-bar-wrapper.style--five.details-btn,
.process-bar-wrapper.style--five.light-btn,
table.table-condensed thead tr:nth-child(2) th.process-bar-wrapper.style--five,
table.table-contextual .process-bar-wrapper.style--five.details-btn:hover,
table.table-contextual .details-btn:hover i.process-bar-wrapper.style--five,
.sidebar .sidebar-body li.active>a.process-bar-wrapper.style--five,
.sidebar .sidebar-body li:hover>a.process-bar-wrapper.style--five,
.fc-view>table thead th.process-bar-wrapper.style--five.fc-day-header,
.notifications a:hover p.process-bar-wrapper.style--five,
.news a:hover p.process-bar-wrapper.style--five,
.process-bar-wrapper.style--five.icon:hover,
.select2-container--default .select2-selection--multiple .process-bar-wrapper.style--five.select2-selection__choice,
.process-bar-wrapper.style--five.p_nav-link,
.about-nav-tab a.process-bar-wrapper.style--five.active,
.process-bar-wrapper.style--five.iconwrap,
.dragable-list>div.ui-sortable-helper i.process-bar-wrapper.style--five {
background-color: #e9e7ff;
}
.process-bar-wrapper.style--five.c2 .process-bar,
a.process-bar-wrapper.style--five:hover .process-bar,
.dropdown-menu .dropdown-body a:hover .process-bar-wrapper.style--five.main-text .process-bar,
.dropdown-menu.style--two .dropdown-body a:hover .process-bar-wrapper.style--five.time .process-bar,
.process-bar-wrapper.style--five.btn.preview .process-bar,
#example-vertical>.actions ul li a.process-bar-wrapper.style--five.preview[href="#next"] .process-bar,
#example-vertical>.actions ul li a.process-bar-wrapper.style--five.preview[href="#finish"] .process-bar,
.process-bar-wrapper.style--five.btn.style--two .process-bar,
#example-vertical>.actions ul li a.process-bar-wrapper.style--five.style--two[href="#next"] .process-bar,
#example-vertical>.actions ul li a.process-bar-wrapper.style--five.style--two[href="#finish"] .process-bar,
.process-bar-wrapper.style--five.btn.s_alert .process-bar,
#example-vertical>.actions ul li a.process-bar-wrapper.style--five.s_alert[href="#next"] .process-bar,
#example-vertical>.actions ul li a.process-bar-wrapper.style--five.s_alert[href="#finish"] .process-bar,
.process-bar-wrapper.style--five.details-btn .process-bar,
.process-bar-wrapper.style--five.light-btn .process-bar,
table.table-condensed thead tr:nth-child(2) th.process-bar-wrapper.style--five .process-bar,
table.table-contextual .details-btn:hover i.process-bar-wrapper.style--five .process-bar,
.sidebar .sidebar-body li.active>a.process-bar-wrapper.style--five .process-bar,
.sidebar .sidebar-body li:hover>a.process-bar-wrapper.style--five .process-bar,
.fc-view>table thead th.process-bar-wrapper.style--five.fc-day-header .process-bar,
.notifications a:hover p.process-bar-wrapper.style--five .process-bar,
.news a:hover p.process-bar-wrapper.style--five .process-bar,
.process-bar-wrapper.style--five.icon:hover .process-bar,
.select2-container--default .select2-selection--multiple .process-bar-wrapper.style--five.select2-selection__choice .process-bar,
.process-bar-wrapper.style--five.p_nav-link .process-bar,
.about-nav-tab a.process-bar-wrapper.style--five.active .process-bar,
.process-bar-wrapper.style--five.iconwrap .process-bar,
.dragable-list>div.ui-sortable-helper i.process-bar-wrapper.style--five .process-bar {
background-color: #8280fd;
}
/* Home Social Media Process */
.country-performance {
padding: 0 20px;
}
.country-performance .process-bar-wrapper {
background-color: #ccf5f8;
height: 10px;
}
.country-performance .process-bar-wrapper .process-bar {
background-color: #09d1de;
}
.country-performance .process-bar-wrapper.style--two {
background-color: #fff4e6;
width: 100%;
margin-top: 40px;
}
.country-performance .process-bar-wrapper.style--two .process-bar {
background-color: #ffb959;
}
/* Process Bars */
.process-bars {
width: 40%;
position: absolute;
left: 20px;
bottom: 30px;
}
@media only screen and (min-width: 0px) and (max-width: 1500px) {
.process-bars {
position: relative;
}
}
@media only screen and (min-width: 0px) and (max-width: 1200px) {
.process-bars {
margin: 50px auto 0;
width: 80%;
left: 0;
}
}
/* ************************
02.7: Input
********************* */
/* Theme Input Style */
.theme-input-style2,
.theme-input-style,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length select {
border: none;
height: 40px;
width: 100%;
padding: 7px 15px;
background-color: #f0f0f0;
font-size: 16px;
border-radius: 7px;
}
.theme-input-style2:focus,
.theme-input-style:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_filter select:focus,
.dataTables_wrapper .dataTables_length input:focus,
.dataTables_wrapper .dataTables_length select:focus {
background-color: #f0f0f0;
}
.theme-input-style2.style--two,
.theme-input-style.style--two,
.dataTables_wrapper .dataTables_filter input.style--two,
.dataTables_wrapper .dataTables_filter select.style--two,
.dataTables_wrapper .dataTables_length input.style--two,
.dataTables_wrapper .dataTables_length select.style--two {
background-color: #ffffff;
height: 35px;
}
@media only screen and (max-width: 767px) {
.theme-input-style2.style--two,
.theme-input-style.style--two,
.dataTables_wrapper .dataTables_filter input.style--two,
.dataTables_wrapper .dataTables_filter select.style--two,
.dataTables_wrapper .dataTables_length input.style--two,
.dataTables_wrapper .dataTables_length select.style--two {
border-radius: 0;
}
}
.theme-input-style2.style--three,
.theme-input-style.style--three,
.dataTables_wrapper .dataTables_filter input.style--three,
.dataTables_wrapper .dataTables_filter select.style--three,
.dataTables_wrapper .dataTables_length input.style--three,
.dataTables_wrapper .dataTables_length select.style--three {
height: 30px;
padding: 5px 10px;
}
.theme-input-style2.style--four,
.theme-input-style.style--four,
.dataTables_wrapper .dataTables_filter input.style--four,
.dataTables_wrapper .dataTables_filter select.style--four,
.dataTables_wrapper .dataTables_length input.style--four,
.dataTables_wrapper .dataTables_length select.style--four {
height: 30px;
background-color: rgba(255, 255, 255, 0.05);
padding: 5px 10px;
max-width: 160px;
}
.theme-input-style2.large,
.theme-input-style.large,
.dataTables_wrapper .dataTables_filter input.large,
.dataTables_wrapper .dataTables_filter select.large,
.dataTables_wrapper .dataTables_length input.large,
.dataTables_wrapper .dataTables_length select.large {
height: 50px;
}
.theme-input-style2.small,
.theme-input-style.small,
.dataTables_wrapper .dataTables_filter input.small,
.dataTables_wrapper .dataTables_filter select.small,
.dataTables_wrapper .dataTables_length input.small,
.dataTables_wrapper .dataTables_length select.small {
height: 30px;
padding: 0 14px;
}
.theme-input-style2.is-valid,
.theme-input-style.is-valid,
.dataTables_wrapper .dataTables_filter input.is-valid,
.dataTables_wrapper .dataTables_filter select.is-valid,
.dataTables_wrapper .dataTables_length input.is-valid,
.dataTables_wrapper .dataTables_length select.is-valid {
border: 1px solid #28a745 !important;
}
.theme-input-style2.is-invalid,
.theme-input-style.is-invalid,
.dataTables_wrapper .dataTables_filter input.is-invalid,
.dataTables_wrapper .dataTables_filter select.is-invalid,
.dataTables_wrapper .dataTables_length input.is-invalid,
.dataTables_wrapper .dataTables_length select.is-invalid {
border: 1px solid #dc3545 !important;
}
.theme-input-style2.style--five,
.theme-input-style.style--five,
.dataTables_wrapper .dataTables_filter input.style--five,
.dataTables_wrapper .dataTables_filter select.style--five,
.dataTables_wrapper .dataTables_length input.style--five,
.dataTables_wrapper .dataTables_length select.style--five {
width: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.theme-input-style2 {
background-color: #fff;
}
.theme-input-style2:focus {
background-color: #fff;
}
.form-control {
background-color: #f0f0f0;
height: 40px;
border-radius: 7px;
}
.form-control:focus {
background-color: #f0f0f0;
}
.form-control.is-valid {
border: 1px solid #28a745 !important;
}
.form-control.is-invalid {
border: 1px solid #dc3545 !important;
}
.modal-dialog textarea.form-control {
height: 100px;
}
textarea.theme-input-style {
height: 180px;
padding: 15px 20px;
}
textarea.theme-input-style.style--two {
padding: 10px 20px;
height: 100px;
background-color: #f0f0f0;
}
textarea.theme-input-style.style--three {
height: 80px;
line-height: 1.73;
font-size: 15px;
}
textarea.theme-input-style.style--four {
height: 50px;
max-width: 290px;
padding: 5px 10px;
font-size: 15px;
background-color: rgba(255, 255, 255, 0.05);
line-height: 1.3;
}
textarea.theme-input-style.style--five {
height: 70px;
width: 100%;
font-size: 15px;
padding: 6px 10px;
}
textarea.theme-input-style.style--six {
height: 50px;
font-size: 15px;
padding: 6px 10px;
}
textarea.theme-input-style.style--seven {
height: 130px;
}
textarea.form-control {
height: 50px;
}
.custom-select {
background-color: #dbf7e8;
height: auto;
color: #67cf94;
padding: 0px 30px 0px 12px;
background: #dbf7e8 url(../../img/svg/select-down.svg) no-repeat right 0.75rem center/10px 10px;
}
.custom-select.style--two {
max-width: 235px;
padding: 0;
background: #f0f0f0 url(../../img/svg/simple-down.svg) no-repeat right 0.75rem center/16px 14px;
}
.custom-select.style--two .theme-input-style,
.custom-select.style--two .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .custom-select.style--two input,
.custom-select.style--two .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter .custom-select.style--two select,
.custom-select.style--two .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length .custom-select.style--two input,
.custom-select.style--two .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length .custom-select.style--two select {
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
.custom-select.style--two.large {
background-size: 18px 15px;
}
.custom-select.style--two.large .theme-input-style,
.custom-select.style--two.large .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .custom-select.style--two.large input,
.custom-select.style--two.large .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter .custom-select.style--two.large select,
.custom-select.style--two.large .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length .custom-select.style--two.large input,
.custom-select.style--two.large .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length .custom-select.style--two.large select {
height: 50px;
}
.custom-select.style--two.small {
background-size: 14px 12px;
}
.custom-select.style--two.small .theme-input-style,
.custom-select.style--two.small .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .custom-select.style--two.small input,
.custom-select.style--two.small .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter .custom-select.style--two.small select,
.custom-select.style--two.small .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length .custom-select.style--two.small input,
.custom-select.style--two.small .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length .custom-select.style--two.small select {
height: 30px;
padding: 0 14px;
}
.custom-select.style--two.disable {
background-image: url(../../img/svg/simple-down2.svg);
}
select.multiple {
width: 100%;
height: auto;
padding: 4px 0;
}
select.multiple option {
padding: 6px 20px;
}
/* Theme Input Group */
.theme-input-group {
position: relative;
width: 100%;
}
.theme-input-group input {
width: 100%;
height: 50px;
border: none;
padding-left: 25px;
padding-right: 150px;
color: #ffffff;
margin: 0;
}
@media only screen and (max-width: 479px) {
.theme-input-group input {
padding-right: 130px;
padding-left: 10px;
}
}
.theme-input-group button,
.theme-input-group>a {
position: absolute;
top: 0px;
right: 0px;
height: 100%;
padding: 15px 30px;
line-height: 1;
font-weight: 600;
color: #ffffff;
}
@media only screen and (max-width: 479px) {
.theme-input-group button,
.theme-input-group>a {
font-size: 16px;
padding: 20px;
}
}
.theme-input-group.header-search {
z-index: 99;
}
.theme-input-group.input-wrap {
overflow: hidden;
}
.theme-input-group.input-wrap .theme-input-style,
.theme-input-group.input-wrap .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .theme-input-group.input-wrap input,
.theme-input-group.input-wrap .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter .theme-input-group.input-wrap select,
.theme-input-group.input-wrap .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length .theme-input-group.input-wrap input,
.theme-input-group.input-wrap .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length .theme-input-group.input-wrap select {
padding-right: 40px !important;
}
.theme-input-group.input-wrap>a {
padding: 8px 12px 8px 10px;
}
.theme-input-group.style--two input {
background-color: #f0f0f0;
height: 40px;
padding-right: 120px;
}
.theme-input-group.style--two input.pd {
padding-right: 80px;
}
.theme-input-group.style--two .input-group-append {
position: absolute;
right: 0;
top: 0;
}
.theme-input-group.style--two.prepend input {
padding-right: 120px;
padding-left: 130px;
}
.theme-input-group.style--two.prepend input.pd {
padding-right: 80px;
padding-left: 80px;
}
.theme-input-group.prepend input {
background-color: #f0f0f0;
height: 40px;
padding-right: 15px;
padding-left: 130px;
}
.theme-input-group.prepend input.pd {
padding-left: 80px;
}
.theme-input-group.prepend .input-group-prepend {
position: absolute;
left: 0;
top: 0;
}
.input-group-text {
background-color: #f0f0f0;
border-radius: 7px;
}
/* Search Form */
.search-form .theme-input-group {
position: relative;
height: 40px;
width: 100%;
}
.search-form .theme-input-group input {
background-color: #f5f5f5;
padding: 5px 15px;
height: 40px;
}
.search-form .theme-input-group input::-webkit-input-placeholder {
color: #727272 !important;
}
.search-form .theme-input-group input::-moz-placeholder {
color: #727272 !important;
}
.search-form .theme-input-group input:-ms-input-placeholder {
color: #727272 !important;
}
.search-form .theme-input-group input::-ms-input-placeholder {
color: #727272 !important;
}
.search-form .theme-input-group input::placeholder {
color: #727272 !important;
}
.search-form .theme-input-group button {
background-color: #fafafa;
padding: 5px 10px;
}
@media only screen and (max-width: 379px) {
.search-form .theme-input-group button {
padding: 5px 12px;
}
}
.search-form .theme-input-group button.radius-5,
.search-form .theme-input-group button.dashboard-date.style--four,
.search-form .theme-input-group button.dashboard-date.style--five,
.search-form .theme-input-group button.tag_color,
.search-form .theme-input-group button.theme-input-style2.style--three,
.search-form .theme-input-group button.theme-input-style.style--three,
.search-form .theme-input-group button.theme-input-style2.style--four,
.search-form .theme-input-group button.theme-input-style.style--four,
.search-form .theme-input-group .todo-list button.single-row:after,
.todo-list .search-form .theme-input-group button.single-row:after,
.search-form .theme-input-group button.fc-toolbar.fc-header-toolbar,
.search-form .theme-input-group .labels button.label,
.labels .search-form .theme-input-group button.label,
.search-form .theme-input-group .label-item button.label,
.label-item .search-form .theme-input-group button.label,
.search-form .theme-input-group #projectTaskDetails .modal-content .cover-img button.attach-file,
#projectTaskDetails .modal-content .cover-img .search-form .theme-input-group button.attach-file,
.search-form .theme-input-group #projectTaskDetails .modal-content .checklist .checklist-item-wrap button.checklist-item-details,
#projectTaskDetails .modal-content .checklist .checklist-item-wrap .search-form .theme-input-group button.checklist-item-details,
.search-form .theme-input-group #projectTaskDetails .modal-content .checklist-new-item button.theme-input-style,
#projectTaskDetails .modal-content .checklist-new-item .search-form .theme-input-group button.theme-input-style,
.search-form .theme-input-group #projectChecklistModal button.checklist-copy-source,
#projectChecklistModal .search-form .theme-input-group button.checklist-copy-source,
.search-form .theme-input-group button.project-board-select-wrap,
.search-form .theme-input-group .input-group.addon .input-group-prepend button.input-group-text,
.input-group.addon .input-group-prepend .search-form .theme-input-group button.input-group-text,
.search-form .theme-input-group .input-group.addon .input-group-append button.input-group-text,
.input-group.addon .input-group-append .search-form .theme-input-group button.input-group-text {
border-radius: 5px !important;
}
.search-form .theme-input-group button:hover {
background-color: #e9e7ff;
color: #ffffff;
}
.search-form .theme-input-group.style--two {
height: 50px;
}
.search-form .theme-input-group.style--two input {
height: 50px;
}
.search-form .theme-input-group.style--two button {
padding: 5px 15px;
}
.search-form .theme-input-group.header-search.theme-input-group {
position: absolute;
height: 50px;
width: 50px;
right: 0;
top: 0;
}
@media only screen and (max-width: 379px) {
.search-form .theme-input-group.header-search.theme-input-group {
height: 45px;
width: 45px;
}
}
.search-form .theme-input-group.header-search.theme-input-group.active {
width: 270px;
}
.search-form .theme-input-group.header-search.theme-input-group.active button {
background-color: #f5f5f5;
}
.search-form .theme-input-group.header-search.theme-input-group input {
background-color: #f5f5f5;
height: 50px;
padding: 5px 15px;
}
@media only screen and (max-width: 379px) {
.search-form .theme-input-group.header-search.theme-input-group input {
height: 45px;
}
}
.search-form .theme-input-group.header-search.theme-input-group input::-webkit-input-placeholder {
color: #727272 !important;
}
.search-form .theme-input-group.header-search.theme-input-group input::-moz-placeholder {
color: #727272 !important;
}
.search-form .theme-input-group.header-search.theme-input-group input:-ms-input-placeholder {
color: #727272 !important;
}
.search-form .theme-input-group.header-search.theme-input-group input::-ms-input-placeholder {
color: #727272 !important;
}
.search-form .theme-input-group.header-search.theme-input-group input::placeholder {
color: #727272 !important;
}
.search-form .theme-input-group.header-search.theme-input-group button {
background-color: #fafafa;
padding: 5px 15px;
}
@media only screen and (max-width: 379px) {
.search-form .theme-input-group.header-search.theme-input-group button {
padding: 5px 12px;
}
}
.search-form .theme-input-group.header-search.theme-input-group button:hover {
background-color: #e9e7ff;
color: #ffffff;
}
.horizontal-form .form-group>label {
min-width: 240px;
}
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
.horizontal-form .form-group>label {
min-width: 180px;
}
}
/* Custom Checkbox */
.custom-checkbox {
position: absolute;
width: 20px;
cursor: pointer;
height: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.custom-checkbox .checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #e9e7ff;
}
.custom-checkbox .checkmark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked~.checkmark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 6px;
top: 3px;
width: 6px;
height: 10px;
border: solid #8280fd;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.custom-checkbox~.todo-text {
padding-left: 30px;
}
.custom-checkbox.style--two {
width: 24px;
height: 24px;
}
.custom-checkbox.style--two .checkmark {
width: 22px;
height: 22px;
}
.custom-checkbox.style--two .checkmark:after {
left: 7.2px;
top: 4px;
width: 7px;
height: 12px;
border-width: 0 3px 3px 0;
}
.custom-checkbox.style--three {
width: 18px;
height: 18px;
}
.custom-checkbox.style--three .checkmark {
width: 17px;
height: 17px;
}
.custom-checkbox.style--three .checkmark:after {
left: 6px;
top: 3px;
width: 5px;
height: 9px;
}
.custom-checkbox.position-relative {
top: auto;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.custom-checkbox.bold .checkmark,
.dashboard-date.style--five>i.custom-checkbox .checkmark,
.dropdown-menu.style--four a.custom-checkbox:hover .checkmark,
.dropdown-menu.style--four a.custom-checkbox.selected .checkmark,
.custom-checkbox.avatar .checkmark,
.custom-checkbox.full-date .checkmark,
.pagination ul li.custom-checkbox .checkmark,
.custom-checkbox.follow-btn .checkmark,
.custom-checkbox.link-btn .checkmark,
.custom-checkbox.details-btn .checkmark,
table.style--two td.custom-checkbox .checkmark,
table.cart_table tr td.custom-checkbox:first-child .checkmark,
table.cart_table tr td:last-child span.custom-checkbox .checkmark,
table.invoice-list-table.style-two td.custom-checkbox:nth-child(4) .checkmark,
table.style-two.contact-list-table td.custom-checkbox:nth-child(4) .checkmark,
table.invoice-list-table.style-two td.custom-checkbox:nth-child(5) .checkmark,
table.style-two.contact-list-table td.custom-checkbox:nth-child(5) .checkmark,
table.invoice-list.style-two td.custom-checkbox:nth-child(4) .checkmark,
table.invoice-list.style-two td.custom-checkbox:nth-child(5) .checkmark,
.ProgressBar-wrap .custom-checkbox.ProgressBar-percentage .checkmark,
.ProgressBar-wrap2 .custom-checkbox.ProgressBar-percentage .checkmark,
.progress-info div.custom-checkbox:not(:first-child) .checkmark,
.process-bar-wrapper.style--four .custom-checkbox.process-width .checkmark,
.notification-icon .custom-checkbox.count .checkmark,
.avatar .custom-checkbox.count .checkmark,
.sidebar .sidebar-body li.custom-checkbox.nav-category .checkmark,
#apex_radar-chart .custom-checkbox.apexcharts-title-text .checkmark,
.custom-checkbox.statistic-row.days .checkmark,
.product-details-content .custom-checkbox.product_title .checkmark,
.product-details-content .custom-checkbox.woocommerce-Price-amount .checkmark,
.product-details-content .woocommerce-product-details__short-description h5.custom-checkbox .checkmark,
.form-row label.custom-checkbox .checkmark,
.cart-collaterals .shop_table th.custom-checkbox .checkmark,
.cart-collaterals .shop_table td.custom-checkbox .checkmark,
.mail-list-item:hover .mail-text .custom-checkbox.msg .checkmark,
.main-mail:hover .mail-text .custom-checkbox.msg .checkmark,
.message:hover p.custom-checkbox .checkmark,
.message.active p.custom-checkbox .checkmark,
.assign_to .custom-checkbox.assign-content .checkmark,
.assign-tag .custom-checkbox.tag-text .checkmark,
.add-new_task .custom-checkbox.label-text .checkmark,
.task-details .custom-checkbox.label-text .checkmark,
.fc table.custom-checkbox .checkmark,
#projectTaskDetails .modal-content .project-main-title textarea.custom-checkbox .checkmark,
#projectTaskDetails .modal-content .checklist .process-bar-wrapper .custom-checkbox.process-name .checkmark,
#smartwizard .nav li a.custom-checkbox .checkmark,
#example-vertical>.steps ul li a.custom-checkbox .checkmark,
#example-vertical>.actions ul li a.custom-checkbox[href="#previous"] .checkmark,
.chip .chip-content>div.custom-checkbox .checkmark,
.chip .chip-content .custom-checkbox.img .checkmark,
.custom-checkbox.color-circle .checkmark,
.custom-checkbox.topic .checkmark,
.timeline .custom-checkbox.event:before .checkmark,
.custom-checkbox.base-timer__label .checkmark,
.custom-checkbox.base-timer__text .checkmark,
.custom-checkbox.p_nav-link .checkmark,
.info-list li.custom-checkbox .checkmark,
.shepherd-element .shepherd-content footer .shepherd-buttons li .custom-checkbox.shepherd-button .checkmark {
border: 1px solid #8280fd;
}
.custom-checkbox.bold .checkmark:after,
.dashboard-date.style--five>i.custom-checkbox .checkmark:after,
.dropdown-menu.style--four a.custom-checkbox:hover .checkmark:after,
.dropdown-menu.style--four a.custom-checkbox.selected .checkmark:after,
.custom-checkbox.avatar .checkmark:after,
.custom-checkbox.full-date .checkmark:after,
.pagination ul li.custom-checkbox .checkmark:after,
.custom-checkbox.follow-btn .checkmark:after,
.custom-checkbox.link-btn .checkmark:after,
.custom-checkbox.details-btn .checkmark:after,
table.style--two td.custom-checkbox .checkmark:after,
table.cart_table tr td.custom-checkbox:first-child .checkmark:after,
table.cart_table tr td:last-child span.custom-checkbox .checkmark:after,
table.invoice-list-table.style-two td.custom-checkbox:nth-child(4) .checkmark:after,
table.style-two.contact-list-table td.custom-checkbox:nth-child(4) .checkmark:after,
table.invoice-list-table.style-two td.custom-checkbox:nth-child(5) .checkmark:after,
table.style-two.contact-list-table td.custom-checkbox:nth-child(5) .checkmark:after,
table.invoice-list.style-two td.custom-checkbox:nth-child(4) .checkmark:after,
table.invoice-list.style-two td.custom-checkbox:nth-child(5) .checkmark:after,
.ProgressBar-wrap .custom-checkbox.ProgressBar-percentage .checkmark:after,
.ProgressBar-wrap2 .custom-checkbox.ProgressBar-percentage .checkmark:after,
.progress-info div.custom-checkbox:not(:first-child) .checkmark:after,
.process-bar-wrapper.style--four .custom-checkbox.process-width .checkmark:after,
.notification-icon .custom-checkbox.count .checkmark:after,
.avatar .custom-checkbox.count .checkmark:after,
.sidebar .sidebar-body li.custom-checkbox.nav-category .checkmark:after,
#apex_radar-chart .custom-checkbox.apexcharts-title-text .checkmark:after,
.custom-checkbox.statistic-row.days .checkmark:after,
.product-details-content .custom-checkbox.product_title .checkmark:after,
.product-details-content .custom-checkbox.woocommerce-Price-amount .checkmark:after,
.product-details-content .woocommerce-product-details__short-description h5.custom-checkbox .checkmark:after,
.form-row label.custom-checkbox .checkmark:after,
.cart-collaterals .shop_table th.custom-checkbox .checkmark:after,
.cart-collaterals .shop_table td.custom-checkbox .checkmark:after,
.mail-list-item:hover .mail-text .custom-checkbox.msg .checkmark:after,
.main-mail:hover .mail-text .custom-checkbox.msg .checkmark:after,
.message:hover p.custom-checkbox .checkmark:after,
.message.active p.custom-checkbox .checkmark:after,
.assign_to .custom-checkbox.assign-content .checkmark:after,
.assign-tag .custom-checkbox.tag-text .checkmark:after,
.add-new_task .custom-checkbox.label-text .checkmark:after,
.task-details .custom-checkbox.label-text .checkmark:after,
.fc table.custom-checkbox .checkmark:after,
#projectTaskDetails .modal-content .project-main-title textarea.custom-checkbox .checkmark:after,
#projectTaskDetails .modal-content .checklist .process-bar-wrapper .custom-checkbox.process-name .checkmark:after,
#smartwizard .nav li a.custom-checkbox .checkmark:after,
#example-vertical>.steps ul li a.custom-checkbox .checkmark:after,
#example-vertical>.actions ul li a.custom-checkbox[href="#previous"] .checkmark:after,
.chip .chip-content>div.custom-checkbox .checkmark:after,
.chip .chip-content .custom-checkbox.img .checkmark:after,
.custom-checkbox.color-circle .checkmark:after,
.custom-checkbox.topic .checkmark:after,
.timeline .custom-checkbox.event:before .checkmark:after,
.custom-checkbox.base-timer__label .checkmark:after,
.custom-checkbox.base-timer__text .checkmark:after,
.custom-checkbox.p_nav-link .checkmark:after,
.info-list li.custom-checkbox .checkmark:after,
.shepherd-element .shepherd-content footer .shepherd-buttons li .custom-checkbox.shepherd-button .checkmark:after {
left: 5px;
top: 2px;
}
.custom-checkbox.solid .checkmark {
background-color: #8280fd;
}
.custom-checkbox.solid .checkmark:after {
border-color: #fff !important;
}
.custom-checkbox.light .checkmark {
background-color: #f5f5f5 !important;
}
.custom-checkbox.disable .checkmark {
background-color: #f5f5f5;
border-color: #aeaeae;
}
.custom-checkbox.disable.solid .checkmark {
background-color: #aeaeae;
}
.custom-checkbox.success .checkmark {
border-color: #67cf94;
background-color: #dbf7e8;
}
.custom-checkbox.success .checkmark:after {
border-color: #67cf94;
}
.custom-checkbox.success.solid .checkmark {
background-color: #67cf94;
}
.custom-checkbox.danger .checkmark {
border-color: #fc7383;
background-color: #ffe2e6;
}
.custom-checkbox.danger .checkmark:after {
border-color: #fc7383;
}
.custom-checkbox.danger.solid .checkmark {
background-color: #fc7383;
}
.custom-checkbox.brand .checkmark {
border-color: #09d1de;
background-color: #ccf5f8;
}
.custom-checkbox.brand .checkmark:after {
border-color: #09d1de;
}
.custom-checkbox.brand.solid .checkmark {
background-color: #09d1de;
}
/* Custom Radio */
.custom-radio {
width: 18px;
height: 18px;
position: relative;
}
.custom-radio [type="radio"]:checked,
.custom-radio [type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
.custom-radio [type="radio"]:checked+label,
.custom-radio [type="radio"]:not(:checked)+label {
cursor: pointer;
}
.custom-radio [type="radio"]:checked+label:before,
.custom-radio [type="radio"]:not(:checked)+label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 17px;
height: 17px;
border: 1px solid #8280fd;
border-radius: 100%;
background-color: #e9e7ff;
}
.custom-radio [type="radio"]:checked+label:after,
.custom-radio [type="radio"]:not(:checked)+label:after {
content: "";
width: 7px;
height: 7px;
background-color: #8280fd;
position: absolute;
top: 5px;
left: 5px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.custom-radio [type="radio"]:not(:checked)+label:after {
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.custom-radio [type="radio"]:checked+label:after {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.custom-radio.disable [type="radio"]:checked+label:before,
.custom-radio.disable [type="radio"]:not(:checked)+label:before {
border: 1px solid #aeaeae;
background-color: #f5f5f5;
}
.custom-radio.success [type="radio"]:checked+label:before,
.custom-radio.success [type="radio"]:not(:checked)+label:before {
border: 1px solid #67cf94;
background-color: #dbf7e8;
}
.custom-radio.success [type="radio"]:checked+label:after,
.custom-radio.success [type="radio"]:not(:checked)+label:after {
background-color: #67cf94;
}
.custom-radio.danger [type="radio"]:checked+label:before,
.custom-radio.danger [type="radio"]:not(:checked)+label:before {
border: 1px solid #fc7383;
background-color: #ffe2e6;
}
.custom-radio.danger [type="radio"]:checked+label:after,
.custom-radio.danger [type="radio"]:not(:checked)+label:after {
background-color: #fc7383;
}
.custom-radio.brand [type="radio"]:checked+label:before,
.custom-radio.brand [type="radio"]:not(:checked)+label:before {
border: 1px solid #09d1de;
background-color: #ccf5f8;
}
.custom-radio.brand [type="radio"]:checked+label:after,
.custom-radio.brand [type="radio"]:not(:checked)+label:after {
background-color: #09d1de;
}
.custom-radio.bold [type="radio"]:checked+label:before,
.dashboard-date.style--five>i.custom-radio [type="radio"]:checked+label:before,
.dropdown-menu.style--four a.custom-radio:hover [type="radio"]:checked+label:before,
.dropdown-menu.style--four a.custom-radio.selected [type="radio"]:checked+label:before,
.custom-radio.avatar [type="radio"]:checked+label:before,
.custom-radio.full-date [type="radio"]:checked+label:before,
.pagination ul li.custom-radio [type="radio"]:checked+label:before,
.custom-radio.follow-btn [type="radio"]:checked+label:before,
.custom-radio.link-btn [type="radio"]:checked+label:before,
.custom-radio.details-btn [type="radio"]:checked+label:before,
table.style--two td.custom-radio [type="radio"]:checked+label:before,
table.cart_table tr td.custom-radio:first-child [type="radio"]:checked+label:before,
table.cart_table tr td:last-child span.custom-radio [type="radio"]:checked+label:before,
table.invoice-list-table.style-two td.custom-radio:nth-child(4) [type="radio"]:checked+label:before,
table.style-two.contact-list-table td.custom-radio:nth-child(4) [type="radio"]:checked+label:before,
table.invoice-list-table.style-two td.custom-radio:nth-child(5) [type="radio"]:checked+label:before,
table.style-two.contact-list-table td.custom-radio:nth-child(5) [type="radio"]:checked+label:before,
table.invoice-list.style-two td.custom-radio:nth-child(4) [type="radio"]:checked+label:before,
table.invoice-list.style-two td.custom-radio:nth-child(5) [type="radio"]:checked+label:before,
.ProgressBar-wrap .custom-radio.ProgressBar-percentage [type="radio"]:checked+label:before,
.ProgressBar-wrap2 .custom-radio.ProgressBar-percentage [type="radio"]:checked+label:before,
.progress-info div.custom-radio:not(:first-child) [type="radio"]:checked+label:before,
.process-bar-wrapper.style--four .custom-radio.process-width [type="radio"]:checked+label:before,
.notification-icon .custom-radio.count [type="radio"]:checked+label:before,
.avatar .custom-radio.count [type="radio"]:checked+label:before,
.sidebar .sidebar-body li.custom-radio.nav-category [type="radio"]:checked+label:before,
#apex_radar-chart .custom-radio.apexcharts-title-text [type="radio"]:checked+label:before,
.custom-radio.statistic-row.days [type="radio"]:checked+label:before,
.product-details-content .custom-radio.product_title [type="radio"]:checked+label:before,
.product-details-content .custom-radio.woocommerce-Price-amount [type="radio"]:checked+label:before,
.product-details-content .woocommerce-product-details__short-description h5.custom-radio [type="radio"]:checked+label:before,
.form-row label.custom-radio [type="radio"]:checked+label:before,
.cart-collaterals .shop_table th.custom-radio [type="radio"]:checked+label:before,
.cart-collaterals .shop_table td.custom-radio [type="radio"]:checked+label:before,
.mail-list-item:hover .mail-text .custom-radio.msg [type="radio"]:checked+label:before,
.main-mail:hover .mail-text .custom-radio.msg [type="radio"]:checked+label:before,
.message:hover p.custom-radio [type="radio"]:checked+label:before,
.message.active p.custom-radio [type="radio"]:checked+label:before,
.assign_to .custom-radio.assign-content [type="radio"]:checked+label:before,
.assign-tag .custom-radio.tag-text [type="radio"]:checked+label:before,
.add-new_task .custom-radio.label-text [type="radio"]:checked+label:before,
.task-details .custom-radio.label-text [type="radio"]:checked+label:before,
.fc table.custom-radio [type="radio"]:checked+label:before,
#projectTaskDetails .modal-content .project-main-title textarea.custom-radio [type="radio"]:checked+label:before,
#projectTaskDetails .modal-content .checklist .process-bar-wrapper .custom-radio.process-name [type="radio"]:checked+label:before,
#smartwizard .nav li a.custom-radio [type="radio"]:checked+label:before,
#example-vertical>.steps ul li a.custom-radio [type="radio"]:checked+label:before,
#example-vertical>.actions ul li a.custom-radio[href="#previous"] [type="radio"]:checked+label:before,
.chip .chip-content>div.custom-radio [type="radio"]:checked+label:before,
.chip .chip-content .custom-radio.img [type="radio"]:checked+label:before,
.custom-radio.color-circle [type="radio"]:checked+label:before,
.custom-radio.topic [type="radio"]:checked+label:before,
.timeline .custom-radio.event:before [type="radio"]:checked+label:before,
.custom-radio.base-timer__label [type="radio"]:checked+label:before,
.custom-radio.base-timer__text [type="radio"]:checked+label:before,
.custom-radio.p_nav-link [type="radio"]:checked+label:before,
.info-list li.custom-radio [type="radio"]:checked+label:before,
.shepherd-element .shepherd-content footer .shepherd-buttons li .custom-radio.shepherd-button [type="radio"]:checked+label:before,
.custom-radio.bold [type="radio"]:not(:checked)+label:before,
.dashboard-date.style--five>i.custom-radio [type="radio"]:not(:checked)+label:before,
.dropdown-menu.style--four a.custom-radio:hover [type="radio"]:not(:checked)+label:before,
.dropdown-menu.style--four a.custom-radio.selected [type="radio"]:not(:checked)+label:before,
.custom-radio.avatar [type="radio"]:not(:checked)+label:before,
.custom-radio.full-date [type="radio"]:not(:checked)+label:before,
.pagination ul li.custom-radio [type="radio"]:not(:checked)+label:before,
.custom-radio.follow-btn [type="radio"]:not(:checked)+label:before,
.custom-radio.link-btn [type="radio"]:not(:checked)+label:before,
.custom-radio.details-btn [type="radio"]:not(:checked)+label:before,
table.style--two td.custom-radio [type="radio"]:not(:checked)+label:before,
table.cart_table tr td.custom-radio:first-child [type="radio"]:not(:checked)+label:before,
table.cart_table tr td:last-child span.custom-radio [type="radio"]:not(:checked)+label:before,
table.invoice-list-table.style-two td.custom-radio:nth-child(4) [type="radio"]:not(:checked)+label:before,
table.style-two.contact-list-table td.custom-radio:nth-child(4) [type="radio"]:not(:checked)+label:before,
table.invoice-list-table.style-two td.custom-radio:nth-child(5) [type="radio"]:not(:checked)+label:before,
table.style-two.contact-list-table td.custom-radio:nth-child(5) [type="radio"]:not(:checked)+label:before,
table.invoice-list.style-two td.custom-radio:nth-child(4) [type="radio"]:not(:checked)+label:before,
table.invoice-list.style-two td.custom-radio:nth-child(5) [type="radio"]:not(:checked)+label:before,
.ProgressBar-wrap .custom-radio.ProgressBar-percentage [type="radio"]:not(:checked)+label:before,
.ProgressBar-wrap2 .custom-radio.ProgressBar-percentage [type="radio"]:not(:checked)+label:before,
.progress-info div.custom-radio:not(:first-child) [type="radio"]:not(:checked)+label:before,
.process-bar-wrapper.style--four .custom-radio.process-width [type="radio"]:not(:checked)+label:before,
.notification-icon .custom-radio.count [type="radio"]:not(:checked)+label:before,
.avatar .custom-radio.count [type="radio"]:not(:checked)+label:before,
.sidebar .sidebar-body li.custom-radio.nav-category [type="radio"]:not(:checked)+label:before,
#apex_radar-chart .custom-radio.apexcharts-title-text [type="radio"]:not(:checked)+label:before,
.custom-radio.statistic-row.days [type="radio"]:not(:checked)+label:before,
.product-details-content .custom-radio.product_title [type="radio"]:not(:checked)+label:before,
.product-details-content .custom-radio.woocommerce-Price-amount [type="radio"]:not(:checked)+label:before,
.product-details-content .woocommerce-product-details__short-description h5.custom-radio [type="radio"]:not(:checked)+label:before,
.form-row label.custom-radio [type="radio"]:not(:checked)+label:before,
.cart-collaterals .shop_table th.custom-radio [type="radio"]:not(:checked)+label:before,
.cart-collaterals .shop_table td.custom-radio [type="radio"]:not(:checked)+label:before,
.mail-list-item:hover .mail-text .custom-radio.msg [type="radio"]:not(:checked)+label:before,
.main-mail:hover .mail-text .custom-radio.msg [type="radio"]:not(:checked)+label:before,
.message:hover p.custom-radio [type="radio"]:not(:checked)+label:before,
.message.active p.custom-radio [type="radio"]:not(:checked)+label:before,
.assign_to .custom-radio.assign-content [type="radio"]:not(:checked)+label:before,
.assign-tag .custom-radio.tag-text [type="radio"]:not(:checked)+label:before,
.add-new_task .custom-radio.label-text [type="radio"]:not(:checked)+label:before,
.task-details .custom-radio.label-text [type="radio"]:not(:checked)+label:before,
.fc table.custom-radio [type="radio"]:not(:checked)+label:before,
#projectTaskDetails .modal-content .project-main-title textarea.custom-radio [type="radio"]:not(:checked)+label:before,
#projectTaskDetails .modal-content .checklist .process-bar-wrapper .custom-radio.process-name [type="radio"]:not(:checked)+label:before,
#smartwizard .nav li a.custom-radio [type="radio"]:not(:checked)+label:before,
#example-vertical>.steps ul li a.custom-radio [type="radio"]:not(:checked)+label:before,
#example-vertical>.actions ul li a.custom-radio[href="#previous"] [type="radio"]:not(:checked)+label:before,
.chip .chip-content>div.custom-radio [type="radio"]:not(:checked)+label:before,
.chip .chip-content .custom-radio.img [type="radio"]:not(:checked)+label:before,
.custom-radio.color-circle [type="radio"]:not(:checked)+label:before,
.custom-radio.topic [type="radio"]:not(:checked)+label:before,
.timeline .custom-radio.event:before [type="radio"]:not(:checked)+label:before,
.custom-radio.base-timer__label [type="radio"]:not(:checked)+label:before,
.custom-radio.base-timer__text [type="radio"]:not(:checked)+label:before,
.custom-radio.p_nav-link [type="radio"]:not(:checked)+label:before,
.info-list li.custom-radio [type="radio"]:not(:checked)+label:before,
.shepherd-element .shepherd-content footer .shepherd-buttons li .custom-radio.shepherd-button [type="radio"]:not(:checked)+label:before {
border-width: 2px !important;
}
.custom-radio.solid [type="radio"]:checked+label:before {
border-width: 5px !important;
}
.custom-radio.solid [type="radio"]:not(:checked)+label:before {
border-width: 9px !important;
}
.custom-radio.solid [type="radio"]:checked+label:after,
.custom-radio.solid [type="radio"]:not(:checked)+label:after {
display: none;
}
.custom-radio.light [type="radio"]:checked+label:before,
.custom-radio.light [type="radio"]:not(:checked)+label:before {
border-width: 0px !important;
}
.d_input-group {
position: relative;
}
.d_input-group input {
padding-right: 50px;
}
.d_input-group button {
position: absolute;
right: -2px;
top: 0;
}
.d_input-group button svg {
width: 18px;
}
/* ************************
03.1: Header
********************* */
.header {
height: 90px;
}
.header .main-header {
-webkit-box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05);
box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05);
padding: 10px 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;
height: 90px;
}
@media only screen and (max-width: 1023px) {
.header .main-header {
padding: 0;
}
}
.header .logo {
background-color: #0a0818;
-ms-flex-preferred-size: 260px;
flex-basis: 260px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header .logo .mobile-logo {
display: none;
}
@media only screen and (max-width: 1023px) {
.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 {
min-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: 433px) {
.header-icon {
width: 25px;
height: auto;
}
}
.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: 0.1;
}
.sidebar {
width: 260px;
height: calc(100% - 90px);
position: fixed;
inset-inline-start: 0;
inset-block-start: 90px;
background-color: #0a0818;
z-index: 1029;
}
@media only screen and (max-width: 1023px) {
.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: 1023px) {
.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;
color: #ffffff;
}
.sidebar .sidebar-body li a.disabled {
cursor: not-allowed;
opacity: 0.5;
}
.sidebar .sidebar-body li.has-sub-item:after {
position: absolute;
content: "";
background-image: url(../../img/svg/plus.svg);
width: 12px;
height: 12px;
right: 0;
top: 10px;
z-index: -1;
}
.sidebar .sidebar-body li.has-sub-item.sub-menu-opened:after {
height: 2px;
top: 15px;
background-image: url(../../img/minus.png);
}
.sidebar .sidebar-body li.active i,
.sidebar .sidebar-body li:hover i {
color: #8280fd;
}
.sidebar .sidebar-body li.active>a.disabled i,
.sidebar .sidebar-body li:hover>a.disabled i {
color: #aeaeae;
}
body.pos-page .main-content {
margin-left: 0px;
margin-top: 20px;
padding-bottom: 56px;
}
body.pos-page .sidebar {
height: 100%;
top: 0px;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
body.pos-page .header {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
body.sidebar-open .header {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
body.sidebar-open .main-content {
margin-left: 275px;
margin-top: 120px;
}
body.sidebar-open .sidebar {
height: calc(100% - 90px);
inset-block-start: 90px;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
body.sidebar-folded .sidebar {
width: 60px;
}
body.sidebar-folded .sidebar .sidebar-header .sidebar-toogle-pin {
opacity: 0.5;
}
body.sidebar-folded .sidebar .sidebar-body li i {
color: #727272;
}
body.sidebar-folded .sidebar .sidebar-body li.nav-category {
visibility: hidden;
max-height: 24px;
}
body.sidebar-folded .sidebar .sidebar-body li.nav-category:before {
position: absolute;
content: "";
width: 5px;
height: 2px;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
visibility: visible;
}
body.sidebar-folded .sidebar .sidebar-body li a span {
visibility: hidden;
opacity: 0;
}
body.sidebar-folded .sidebar .sidebar-body li.active i,
body.sidebar-folded .sidebar .sidebar-body li:hover i {
color: #8280fd;
}
body.sidebar-folded.open-sidebar-folded .sidebar {
width: 260px;
}
body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body .sidebar-toogle-pin {
opacity: 0.5;
}
body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body li i {
color: #aeaeae;
}
body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body li.nav-category {
visibility: visible;
}
body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body li.nav-category:before {
display: none;
}
body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body li a span {
visibility: visible;
opacity: 1;
}
body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body li.active i,
body.sidebar-folded.open-sidebar-folded .sidebar .sidebar-body li:hover i {
color: #8280fd;
}
body.sidebar-open .sidebar {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
body.sidebar-open .header .header-toogle-pin {
opacity: 0.5;
}
/* ************************
03.3: Footer
********************* */
.footer {
height: 70px;
padding-left: 290px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
line-height: 1;
background-color: #f0f0f0;
}
@media only screen and (max-width: 1023px) {
.footer {
padding: 0 15px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.footer.style--two {
padding: 0 15px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
body.sidebar-folded .footer {
padding-left: 90px;
}
@media only screen and (max-width: 1023px) {
body.sidebar-folded .footer {
padding: 0 15px;
}
}
body.sidebar-folded.open-sidebar-folded .footer {
padding-left: 290px;
}
@media only screen and (max-width: 1023px) {
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: 1023px) {
.main-content {
margin-left: 0 !important;
}
}
body.sidebar-folded .main-content {
margin-left: 75px;
}
@media only screen and (max-width: 1023px) {
body.sidebar-folded .main-content {
margin-left: 0;
}
}
body.sidebar-folded.pos-page .main-content {
margin-left: 0px;
}
body.sidebar-folded.pos-page.sidebar-open .main-content {
margin-left: 75px;
}
/* ************************
03.5: Aside
********************* */
.tasks_aside,
.aside {
width: 240px;
height: 100%;
margin-right: 15px;
margin-left: 15px;
}
@media only screen and (max-width: 767px) {
.tasks_aside,
.aside {
width: auto;
}
}
@media only screen and (min-width: 767px) and (max-width: 1500px) {
.tasks_aside.calendar_aside,
.calendar_aside.aside {
width: 202px;
}
}
@media only screen and (min-width: 767px) and (max-width: 1200px) {
.tasks_aside.calendar_aside,
.calendar_aside.aside {
margin-right: 0;
}
}
.aside-header {
position: relative;
padding: 20px;
}
.aside-header .aside-btn-text {
height: 60px;
background-color: #e9e7ff;
width: calc(100% - 20px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 10px;
border-radius: 100px 0 0 100px;
}
.aside-header .btn-circle {
position: absolute;
left: 0;
top: 0;
}
.aside-body {
padding: 20px;
}
.aside-body.external-events {
padding: 15px;
}
.aside-body li {
margin-bottom: 12px;
}
.aside-body li a {
position: relative;
display: block;
}
.aside-body li a:after {
width: 0px;
height: 2px;
left: -20px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.aside-body li a.active {
font-weight: bold;
}
.aside-body li a.active:after {
width: 12px;
}
.aside-body li:hover a,
.aside-body li.active a {
font-weight: bold;
}
.aside-body li:hover a:after,
.aside-body li.active a:after {
width: 12px;
}
.aside-body li.nav-category {
color: #aeaeae;
}
.aside-body li.less {
position: relative;
cursor: pointer;
}
.aside-body li.less:after {
position: absolute;
right: 0;
top: 50%;
width: 12px;
height: 2px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
content: "";
background-image: url(../../img/svg/minus.svg);
}
.aside-body li.less.collapsed:after {
background-image: url(../../img/svg/plus.svg);
height: 12px;
}
.aside-body li.lavel a:after {
display: none;
}
.aside-body li.fc-event {
background-color: transparent;
font-size: 15px;
margin-bottom: 20px;
}
.aside-body li.fc-event span.tag_color {
width: 4px;
height: 12px;
}
.aside-body li.fc-event.ui-draggable-dragging {
background-color: #dbf7e8;
padding: 5px 8px;
}
.aside-body li.fc-event.ui-draggable-dragging span.tag_color {
display: none;
}
.chat_aside {
position: relative;
width: 375px;
height: auto;
margin-right: 15px;
margin-left: 15px;
}
@media only screen and (min-width: 0px) and (max-width: 1200px) {
.chat_aside {
width: 330px;
}
}
@media only screen and (max-width: 767px) {
.chat_aside {
width: auto;
}
}
.chat_aside .aside-header {
padding: 0;
}
.chat_aside .aside-header .aside-header-top {
padding: 20px 24px;
}
.chat_aside .aside-header .dropdown-button {
position: absolute;
right: 15px;
top: 15px;
}
.chat_aside .aside-header .profile .content p {
color: #c3beff;
}
.chat_aside .aside-header .aside-header-bottom {
position: relative;
z-index: 1;
}
.chat_aside .aside-header .aside-header-bottom:after {
background: #6f51ff;
background: -webkit-gradient(linear,
left top,
left bottom,
from(#6f51ff),
to(#6045e2));
background: -o-linear-gradient(top, #6f51ff 0%, #6045e2 100%);
background: linear-gradient(to bottom, #6f51ff 0%, #6045e2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6F51FF', endColorstr='#6045E2', GradientType=0);
z-index: -1;
}
.chat_aside .aside-header .aside-header-bottom .nav-tabs {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.chat_aside .aside-header .aside-header-bottom .nav-tabs li:not(:last-child) {
margin-right: 20px;
}
.chat_aside .aside-header .aside-header-bottom .nav-tabs li a {
padding: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 40px;
height: 45px;
cursor: pointer;
}
.chat_aside .aside-header .aside-header-bottom .nav-tabs li a:hover,
.chat_aside .aside-header .aside-header-bottom .nav-tabs li a.active {
background-color: rgba(255, 255, 255, 0.1);
}
.chat_aside .aside-body {
padding: 0px;
height: calc(100vh - 335px);
position: relative;
top: 0px;
}
/* ************************
04.1: Dashboard
********************* */
/* Increse */
.increase {
max-width: 220px;
}
.increase h2 {
font-size: 64px;
}
.increase>p {
color: #aeaeae;
}
.increase .card-title p {
margin-left: -30px;
position: relative;
top: -4px;
}
.congratulation-img {
margin-left: 10px;
}
@media only screen and (max-width: 379px) {
.congratulation-img {
display: none;
}
}
/* Area-chart box */
.area-chart-box {
max-height: 193px;
}
/* Apex Column Chart */
#apex_column-chart .apexcharts-legend {
right: 15px !important;
}
#apex_column-chart .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker {
margin-right: 5px;
}
#apex_column-chart .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text {
top: -1px;
}
/* Apex Radar Chart */
#apex_radar-chart .apexcharts-legend {
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
left: auto !important;
}
@media only screen and (max-width: 767px) {
#apex_radar-chart .apexcharts-legend {
left: 0 !important;
}
}
/* ************************
04.2: Social Media Analytics
********************* */
.state2 {
padding: 30px;
}
.state2 h2 {
color: #ff81a3;
}
.state2.style--two h2 {
color: #8280fd;
}
.state2.style--three h2 {
color: #09d1de;
}
.state2.style--four h2 {
color: #4c9efe;
}
/* Apex Pie2 Chart */
#apex_pie2-chart .apexcharts-legend-marker {
margin-right: 7px;
}
/* Apex Area6 Chart */
#apex_area6-chart .apexcharts-legend-series {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/* Social Statics */
.social-statics {
background-color: #fff4e6;
}
.social-statics .statics-title {
padding: 20px 20px 30px;
}
.social-statics .followers {
background-color: #ffebd1;
padding: 10px 20px;
}
.social-statics .statics-bottom {
padding: 35px 20px;
}
.social-statics.style--two {
background-color: #fee7ff;
}
.social-statics.style--two .followers {
background-color: #fdd9ff;
}
.social-statics.style--three {
background-color: #ffe2e6;
}
.social-statics.style--three .followers {
background-color: #ffd4da;
}
/* Apex Pie3 Chart */
#apex_pie3-chart .apexcharts-tooltip.dark {
color: #333333 !important;
}
.apex_pie3-chart-legend .color-box {
width: 5px;
height: 11px;
background-color: #e580fd;
margin-right: 10px;
}
.apex_pie3-chart-legend .color-box.two {
background-color: #fc7383;
}
.apex_pie3-chart-legend .color-box.three {
background-color: #8280fd;
}
.apex_pie3-chart-legend .color-box.four {
background-color: #ffb959;
}
/* Browser Status */
.browser-status>div:not(:last-child) {
margin-bottom: 19px;
}
.browser-status>div:first-child {
margin-bottom: 10px;
}
/* ************************
05.1: Ecommerce
********************* */
.state {
padding: 27px 10px 30px;
}
.state .state-icon {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
padding-right: 10px;
}
.product-list-item .img img {
width: 60px;
height: 60px;
}
/* Apex Pie Chart */
#apex_pie-chart .apexcharts-tooltip.dark {
color: #333333 !important;
}
#apex_pie-chart .apexcharts-legend-marker {
position: relative;
top: 1px !important;
}
/* ************************
05.2: Ecommerce2
********************* */
@media only screen and (min-width: 1800px) and (max-width: 9999px) {
.campaign-processbars {
margin-right: 30px;
}
}
.product-statistics {
min-width: 920px;
}
.statistic-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
text-transform: capitalize;
}
.statistic-row.days {
padding: 2px 20px;
}
.statistic-row>div {
padding: 10px 20px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.statistic-row>div:first-child {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 2;
-ms-flex: 2;
flex: 2;
}
.statistic-row>div:first-child img {
width: 30px;
height: 30px;
margin-right: 15px;
display: inline-block;
}
/* ************************
05.3: Product Details
********************* */
#gal1 {
margin-top: 20px;
}
#gal1 a img {
width: 75px;
height: 67px;
margin-right: 10px;
}
/* Product Details */
.product-details {
padding: 30px;
}
/* Product Details Content*/
.product-details-content .product_title {
font-size: 20px;
margin-bottom: 13px;
}
.product-details-content .woocommerce-Price-amount {
font-size: 17px;
}
.product-details-content .price {
margin-bottom: 30px;
}
.product-details-content .color-group {
margin-bottom: 16px;
}
.product-details-content .product-review {
margin-bottom: 30px;
}
.product-details-content .woocommerce-product-details__short-description {
margin-top: 38px;
}
.product-details-content .woocommerce-product-details__short-description h5 {
margin-bottom: 15px;
}
.product-details-content .woocommerce-product-details__short-description p {
line-height: 1.733;
}
.product-details-content .woocommerce-product-details__short-description p:not(:last-child) {
margin-bottom: 20px;
}
.list-heading {
min-width: 60px;
}
/* Color Group */
.color-group ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.color-group ul li:not(:last-child) {
margin-right: 15px;
}
.color-group .color {
width: 15px;
height: 15px;
display: block;
}
.color-group .color.active {
width: 25px;
height: 25px;
}
.color-group .color.color1 {
background-color: #2900ff;
}
.color-group .color.color2 {
background-color: #f59d2a;
}
.color-group .color.color3 {
background-color: #e72af5;
}
.color-group .color.color4 {
background-color: #00ff33;
}
.product-grid-item {
display: block;
border: 1px solid #dcdcde;
border-radius: 5px;
padding: 10px;
position: relative;
overflow: hidden;
}
.product-grid-item .product-img {
position: relative;
}
.product-grid-item .product-img .badge {
position: absolute;
top: 10px;
left: 10px;
}
.product-grid-item .product-content {
padding: 16px 0px 0;
}
.product-grid-item:hover .hover-overlay {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.product-grid-item:hover .hover-overlay i {
inset-block-start: 0px;
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
opacity: 1;
}
.hover-overlay {
display: grid;
place-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
color: #fff;
font-size: 24px;
opacity: 0;
visibility: hidden;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.hover-overlay i {
position: relative;
inset-block-start: 30px;
opacity: 0;
}
.hover-overlay:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
content: "";
background-color: rgba(0, 0, 0, 0.3);
border-radius: 3px;
}
.dropdown-menu.dropdown-menu-lg {
width: 320px;
min-width: 320px;
}
.dropdown-prevent .input-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/* ************************
05.4: Cart List
********************* */
.cart-list {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 1px;
padding: 30px;
}
@media only screen and (max-width: 479px) {
.cart-list {
padding: 20px 15px;
}
}
.shipping-content {
border-bottom: 1px solid #aeaeae;
padding-bottom: 30px;
}
.shipping-content .form-row {
margin-left: 0;
margin-right: 0;
}
.form-row label {
margin-bottom: 8px;
}
.cart-collaterals {
max-width: 480px;
margin-left: auto;
padding: 20px 0;
}
.cart-collaterals.style--two {
max-width: 420px;
}
/* Cart Collaterals */
.cart-collaterals .shop_table th,
.cart-collaterals .shop_table td {
font-size: 17px;
padding: 0px 50px 20px;
border-bottom: 0;
}
.cart-collaterals .shop_table th:first-child,
.cart-collaterals .shop_table td:first-child {
text-align: right;
}
@media only screen and (max-width: 479px) {
.cart-collaterals .shop_table th,
.cart-collaterals .shop_table td {
padding: 0 20px 20px;
}
}
.cart-collaterals .shop_table .order-total th,
.cart-collaterals .shop_table .order-total td {
border-top: 1px solid #aeaeae;
font-size: 24px;
padding-top: 10px;
}
.cart-collaterals .shop_table.style-two th,
.cart-collaterals .shop_table.style-two td {
font-size: 15px;
}
.cart-collaterals .shop_table.style-two th:first-child,
.cart-collaterals .shop_table.style-two td:first-child {
font-size: 14px;
}
.cart-collaterals .shop_table.style-two th .Price-amount {
font-size: 17px;
}
.cart-collaterals .shop_table.style-two .order-total th,
.cart-collaterals .shop_table.style-two .order-total td {
border-top: 1px solid #aeaeae;
font-size: 20px;
padding-top: 10px;
}
.cart-collaterals .btn-w {
width: 200px;
}
/* ************************
06.1: Mail
********************* */
.mail-header .dropdown-button .menu-icon {
height: 22px;
}
/* Mail Header */
.mail-header-left>div,
.invoice-header-left>div,
.mail-header-left>button,
.invoice-header-left>button {
margin-right: 20px;
line-height: 1;
}
.mail-header-left>button,
.invoice-header-left>button {
background-color: transparent;
padding: 0;
}
.mail-header-left .custom-checkbox,
.invoice-header-left .custom-checkbox {
margin-top: 2px;
}
.mail-header-left .dropdown-button,
.invoice-header-left .dropdown-button {
margin-left: 20px;
}
.mail-header-left .star,
.invoice-header-left .star {
position: relative;
top: -1px;
}
@media only screen and (max-width: 575px) {
.mail-header-right,
.invoice-header-right {
width: 100%;
}
}
.mail-header-right .search-form,
.invoice-header-right .search-form {
width: 100%;
max-width: 740px;
}
.mail-header-right .search-form .theme-input-group,
.invoice-header-right .search-form .theme-input-group {
height: 50px;
}
.mail-header-right .search-form .theme-input-group input,
.invoice-header-right .search-form .theme-input-group input {
height: 50px;
}
.mail-header-right .search-form .theme-input-group button,
.invoice-header-right .search-form .theme-input-group button {
padding: 5px 15px;
}
/* Message List Item */
.mail-list-item,
.main-mail {
padding: 15px 20px;
position: relative;
}
@media only screen and (max-width: 575px) {
.mail-list-item,
.main-mail {
padding: 15px;
}
}
.mail-list-item:not(:last-child):after,
.main-mail:not(:last-child):after {
width: calc(100% - 40px);
left: 20px;
bottom: 0;
height: 1px;
background-color: #f5f5f5;
position: absolute;
content: "";
}
.mail-list-item.selected,
.main-mail.selected {
background-color: transparent;
}
.mail-list-item.selected:after,
.main-mail.selected:after {
display: none;
}
.mail-list-item .mail-text,
.main-mail .mail-text {
margin-left: 10px;
margin-right: 20px;
width: 100%;
}
@media only screen and (max-width: 575px) {
.mail-list-item .mail-text,
.main-mail .mail-text {
margin-right: 0;
}
}
.mail-list-item .avatar,
.main-mail .avatar {
margin-right: 20px;
}
@media only screen and (max-width: 575px) {
.mail-list-item .avatar,
.main-mail .avatar {
margin-right: 14px;
}
}
@media only screen and (max-width: 575px) {
.mail-list-item .avatar img,
.main-mail .avatar img {
width: 40px;
min-width: 40px;
height: 40px;
}
}
.main-mail {
padding: 30px;
}
@media only screen and (max-width: 479px) {
.main-mail {
padding: 20px 15px;
}
}
.main-mail .avatar {
width: 60px;
min-width: 60px;
height: 60px;
margin-right: 20px;
}
@media only screen and (max-width: 575px) {
.main-mail .avatar {
margin-right: 0;
}
}
@media only screen and (max-width: 575px) {
.main-mail .avatar img {
width: 60px;
min-width: 60px;
height: 60px;
}
}
@media only screen and (max-width: 575px) {
.mail-list-item-right,
.mail-right {
margin-left: 102px;
margin-top: 5px;
}
}
.mail-list-item-right>div,
.mail-list-item-right>button,
.mail-right>div,
.mail-right>button {
line-height: 1;
}
.mail-list-item-right>div:not(:last-child),
.mail-list-item-right>button:not(:last-child),
.mail-right>div:not(:last-child),
.mail-right>button:not(:last-child) {
margin-right: 15px;
}
@media only screen and (max-width: 575px) {
.mail-list-item-right>div:not(:last-child),
.mail-list-item-right>button:not(:last-child),
.mail-right>div:not(:last-child),
.mail-right>button:not(:last-child) {
margin-right: 10px;
}
}
.mail-list-item-right .status-btn,
.mail-right .status-btn {
min-width: 60px;
padding: 4px;
}
.mail-list-item-right .delete_mail,
.mail-right .delete_mail {
background-color: transparent;
padding: 0;
}
.mail-list-item-right .mail-date,
.mail-list-item-right .star,
.mail-right .mail-date,
.mail-right .star {
position: relative;
top: -1px;
}
.mail-body {
line-height: 1.73;
}
/* Mail Compose */
.compose-wrap .replay-cc-bcc {
padding: 20px 30px;
background-color: transparent;
}
@media only screen and (max-width: 575px) {
.compose-wrap .replay-cc-bcc {
padding: 15px;
}
}
.compose-wrap .mail-compose .form-group label {
margin-right: 10px;
text-align: right;
}
.compose-wrap .mail-compose .form-group label,
.compose-wrap .mail-compose .form-group .cc-btns {
-ms-flex-preferred-size: 80px;
flex-basis: 80px;
}
@media only screen and (max-width: 767px) {
.compose-wrap .mail-compose .form-group label,
.compose-wrap .mail-compose .form-group .cc-btns {
-ms-flex-preferred-size: 30px;
flex-basis: 30px;
}
}
.compose-wrap .mail-compose .form-group .close-btn {
-ms-flex-preferred-size: 70px;
flex-basis: 70px;
}
@media only screen and (max-width: 767px) {
.compose-wrap .mail-compose .form-group .close-btn {
-ms-flex-preferred-size: 20px;
flex-basis: 20px;
}
}
.mail-compose .form-group label,
.mail-compose .form-group .cc-btns,
.modal-body .form-group label,
.modal-body .form-group .cc-btns {
-ms-flex-preferred-size: 100px;
flex-basis: 100px;
}
@media only screen and (max-width: 767px) {
.mail-compose .form-group label,
.mail-compose .form-group .cc-btns,
.modal-body .form-group label,
.modal-body .form-group .cc-btns {
-ms-flex-preferred-size: 30px;
flex-basis: 30px;
}
}
.mail-compose .form-group .cc-btns,
.modal-body .form-group .cc-btns {
margin-left: 10px;
}
@media only screen and (max-width: 767px) {
.mail-compose .form-group .cc-btns,
.modal-body .form-group .cc-btns {
margin-left: 0;
margin-top: 10px;
}
}
.mail-compose .form-group .cc-btns .cc,
.modal-body .form-group .cc-btns .cc {
background-color: #dbf7e8;
padding: 9px;
}
.mail-compose .form-group .cc-btns .cc-btn,
.modal-body .form-group .cc-btns .cc-btn {
cursor: pointer;
}
.mail-compose .form-group .close-btn,
.modal-body .form-group .close-btn {
margin-left: 20px;
-ms-flex-preferred-size: 90px;
flex-basis: 90px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: transparent;
}
@media only screen and (max-width: 767px) {
.mail-compose .form-group .close-btn,
.modal-body .form-group .close-btn {
-ms-flex-preferred-size: 20px;
flex-basis: 20px;
margin-left: 0;
margin-top: 10px;
}
}
.mail-compose .form-group .close-btn svg,
.modal-body .form-group .close-btn svg {
cursor: pointer;
position: relative;
top: -2px;
}
.mail-compose .form-group .input-wrap,
.modal-body .form-group .input-wrap {
background-color: #fff;
padding: 0px 10px;
}
@media only screen and (max-width: 767px) {
.mail-compose .form-group .input-wrap,
.modal-body .form-group .input-wrap {
width: 100%;
border-radius: 0;
padding: 10px 5px;
}
}
.mail-compose .form-group .input-wrap span,
.modal-body .form-group .input-wrap span {
background-color: #e9e7ff;
padding: 2px 10px;
margin: 2px;
height: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
}
.mail-compose .form-group .input-wrap span:not(:first-child),
.modal-body .form-group .input-wrap span:not(:first-child) {
margin-left: 5px;
}
.mail-compose .form-group .input-wrap span svg,
.modal-body .form-group .input-wrap span svg {
width: 8px;
height: 8px;
margin-left: 5px;
cursor: pointer;
}
@media only screen and (max-width: 479px) {
.mail-compose .form-group .input-wrap span,
.modal-body .form-group .input-wrap span {
font-size: 12px;
padding: 0 8px;
height: 20px;
}
}
.mail-compose .form-group .input-wrap>div,
.modal-body .form-group .input-wrap>div {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.mail-compose .form-group .input-wrap>div.dropdown-button,
.modal-body .form-group .input-wrap>div.dropdown-button {
-webkit-box-flex: 0;
-ms-flex: 0;
flex: 0;
}
.mail-compose .form-group .input-wrap input,
.modal-body .form-group .input-wrap input {
padding: 0 15px;
min-width: 100px;
}
/* Summernote Editor */
.summernote {
background-color: #fff;
}
.summernote .note-editor-bottom {
padding: 20px 30px;
}
@media only screen and (max-width: 575px) {
.summernote .note-editor-bottom {
padding: 15px 20px;
}
}
.summernote .note-editor-bottom .delete {
position: relative;
top: -1px;
}
.summernote .note-frame .note-placeholder {
padding: 20px 30px;
}
@media only screen and (max-width: 575px) {
.summernote .note-frame .note-placeholder {
padding: 15px 20px;
}
}
.summernote .note-frame .note-editing-area .note-editable {
padding: 20px 30px;
}
@media only screen and (max-width: 575px) {
.summernote .note-frame .note-editing-area .note-editable {
padding: 15px 20px;
}
}
.summernote .note-frame .note-toolbar {
border-bottom: 1px solid #f5f5f5;
background-color: #fff;
padding: 5px 22px;
}
@media only screen and (max-width: 575px) {
.summernote .note-frame .note-toolbar {
padding: 5px 12px;
}
}
.summernote .note-frame .note-btn-group {
margin-top: 0;
}
.summernote .note-frame .note-btn-group button {
-webkit-box-shadow: none !important;
box-shadow: none !important;
padding-top: 9px;
padding-bottom: 9px;
background-color: transparent;
border-radius: 0;
}
.summernote .note-frame .note-btn-group button:after {
border-top-color: #444444;
}
.summernote .note-frame .note-btn-group button i,
.summernote .note-frame .note-btn-group button span {
color: #444444;
}
.note-editor.note-frame .note-toolbar>.note-btn-group .note-btn:hover,
.note-editor.note-frame .note-toolbar>.note-btn-group .note-btn.active,
.note-editor.note-frame .note-toolbar>.note-btn-group .show>.note-btn {
background-color: #f5f5f5;
}
/* ************************
06.2: Chat
********************* */
.message {
padding: 20px 15px;
position: relative;
}
.message:after {
left: 15px;
width: calc(100% - 30px);
height: 1px;
background-color: #f5f5f5;
bottom: 0;
}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.message h4 {
min-width: 120px;
}
}
.message h4 span {
position: relative;
top: -2px;
}
.message .figure {
position: relative;
margin-right: 14px;
}
/* Chat Header */
.chat-header {
padding: 10px 30px;
padding-top: 20px;
}
@media only screen and (max-width: 575px) {
.chat-header {
padding: 10px;
}
}
.chat-header-right .video-call a,
.chat-header-right .chat-footer .voice-msg a,
.chat-footer .chat-header-right .voice-msg a,
.chat-header-right .chat-footer .attach-file a,
.chat-footer .chat-header-right .attach-file a,
.chat-header-right .chat-footer .submit a,
.chat-footer .chat-header-right .submit a {
line-height: 1;
}
.video-call,
.chat-footer .voice-msg,
.chat-footer .attach-file,
.chat-footer .submit,
.audio-call {
padding: 10px;
width: 40px;
height: 40px;
background-color: #e9e7ff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Chat Body */
.chat-body {
padding: 30px;
height: calc(100vh - 383px);
position: relative;
top: 0px;
}
@media only screen and (max-width: 575px) {
.chat-body {
padding: 15px 10px;
}
}
.chat-messages {
min-height: 100%;
}
.message-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 30px;
}
.message-item .avatar {
position: relative;
}
.message-item .bubble p {
background-color: #f5f5f5;
margin-bottom: 10px;
display: inline-block;
padding: 7px 20px;
}
.message-item.friend .bubble p {
background-color: #dbf7e8;
}
.message-item.me .bubble p {
background-color: #fff4e6;
}
/* Chat Footer */
.chat-footer {
padding: 30px;
}
@media only screen and (max-width: 575px) {
.chat-footer {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 10px;
}
}
.chat-footer .voice-msg,
.chat-footer .attach-file,
.chat-footer .submit {
width: 50px;
height: 50px;
}
.chat-footer div .submit svg {
position: relative;
left: 1px;
}
.chat-footer form {
line-height: 1;
}
@media only screen and (max-width: 575px) {
.chat-footer form {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
margin: 0;
width: 100%;
margin-bottom: 10px;
}
}
.chat-footer form.radius-10 textarea,
.chat-footer form.dashboard-date.style--two textarea,
.chat-footer form.custom-select.style--two textarea {
border-radius: 10px;
}
.chat-footer form textarea {
height: 50px !important;
}
/* Search box */
#search-tab~#search-box {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#search-tab~#search-box input {
background: #6f51ff;
background: -webkit-gradient(linear,
left top,
left bottom,
from(#6f51ff),
to(#6045e2));
background: -o-linear-gradient(top, #6f51ff 0%, #6045e2 100%);
background: linear-gradient(to bottom, #6f51ff 0%, #6045e2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6F51FF', endColorstr='#6045E2', GradientType=0);
width: 100%;
height: 100%;
padding: 5px 10px;
padding-right: 50px;
}
#search-tab~#search-box input::-webkit-input-placeholder {
color: #ffffff !important;
}
#search-tab~#search-box input::-moz-placeholder {
color: #ffffff !important;
}
#search-tab~#search-box input:-ms-input-placeholder {
color: #ffffff !important;
}
#search-tab~#search-box input::-ms-input-placeholder {
color: #ffffff !important;
}
#search-tab~#search-box input::placeholder {
color: #ffffff !important;
}
#search-tab~#search-box .search-box-close {
position: absolute;
right: 14px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
cursor: pointer;
}
/* ************************
06.3: Todolist
********************* */
.todo-list .single-row {
padding: 0 1.25rem;
position: relative;
}
.todo-list .single-row:hover {
border-color: transparent !important;
}
.todo-list .single-row.border-bottom.change-border-color {
border-color: transparent !important;
}
.todo-list .single-row:after {
top: 15%;
width: 0;
height: 70%;
}
.todo-list .single-row.level-urgent:after {
background-color: #ffb959;
width: 3px;
}
.todo-list .single-row.level-urgent .label-text {
color: #ffb959;
}
.todo-list .single-row.level-important:after {
background-color: #fc7383;
width: 3px;
}
.todo-list .single-row.level-important .label-text {
color: #fc7383;
}
.todo-list .single-row.level-not_important:after {
background-color: #67cf94;
width: 3px;
}
.todo-list .single-row.level-not_important .label-text {
color: #67cf94;
}
.todo-list .single-row.level-not_urgent:after {
background-color: #c491ff;
width: 3px;
}
.todo-list .single-row.level-not_urgent .label-text {
color: #c491ff;
}
.todo-list .single-row.level-average:after {
background-color: #09d1de;
width: 3px;
}
.todo-list .single-row.level-average .label-text {
color: #09d1de;
}
.todo-list .todo-title {
line-height: 1.294;
}
.todo-list .todo-text {
padding-right: 10px;
display: block;
}
.todo-list .todo-text.line-through .card-text {
text-decoration: line-through;
color: #aeaeae;
}
.assign_to {
position: relative;
cursor: pointer;
z-index: 1;
}
.assign_to .assign-content {
position: absolute;
right: 10px;
top: 2px;
height: 20px;
background-color: #fff4e6;
z-index: -1;
width: 0;
opacity: 0;
overflow: hidden;
padding: 0;
}
.assign_to .todo-text {
background-color: red;
}
.assign_to .assign-avatar {
width: 30px;
height: 30px;
position: absolute;
left: -10px;
top: -5px;
}
.assign_to:hover .assign-content {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
padding: 1px 26px;
overflow: visible;
opacity: 1;
}
.assign-tag {
position: relative;
display: block;
height: 20px;
background-color: #dbf7e8;
padding-left: 40px;
padding-right: 10px;
margin-left: 10px;
}
.assign-tag .tag-text {
padding: 1px;
}
.assign-tag .assign-avatar {
position: absolute;
width: 30px;
height: 30px;
left: 0;
top: -5px;
}
.assign-tag.front-end {
background-color: #dbf7e8;
}
.assign-tag.back-end {
background-color: #fff4e6;
color: #ffb959;
}
.assign-btn {
width: 30px;
height: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #aeaeae;
cursor: pointer;
}
.assign-btn svg line {
stroke: #727272;
}
.assign-btn:hover svg line {
stroke: #6045e2;
}
/* Todo Priority */
.priority .assign-menu {
color: #67cf94;
padding: 6px 15px;
background-color: #dbf7e8;
}
/* Add New Task */
.add-new_task .add-new-title,
.task-details .add-new-title {
margin-bottom: 35px;
}
.add-new_task .add-new-title.style--two,
.task-details .add-new-title.style--two {
margin-bottom: 27px;
line-height: 1.2;
}
.add-new_task .label-text,
.task-details .label-text {
font-size: 14px;
margin-bottom: 13px;
}
.add-new_task .todo_actions,
.task-details .todo_actions {
margin-bottom: 18px;
}
.add-new_task .todo_actions>div,
.task-details .todo_actions>div {
margin-bottom: 17px;
}
.add-new_task .todo_actions>div:not(:last-child),
.task-details .todo_actions>div:not(:last-child) {
margin-right: 60px;
}
@media only screen and (min-width: 320px) and (max-width: 440px) {
.add-new_task .todo_actions>div:not(:last-child),
.task-details .todo_actions>div:not(:last-child) {
margin-right: 0;
}
}
@media only screen and (max-width: 379px) {
.add-new_task .todo_actions .todo_assaign,
.task-details .todo_actions .todo_assaign {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start !important;
-ms-flex-align: start !important;
align-items: flex-start !important;
}
.add-new_task .todo_actions .todo_assaign .assign-tag:not(:last-child),
.task-details .todo_actions .todo_assaign .assign-tag:not(:last-child) {
margin-bottom: 15px;
}
}
.task-details .show-date {
display: inline-block;
padding: 2px 15px;
height: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #fafafa;
}
.task-details .show-date svg {
margin-right: 10px;
}
/* ************************
06.4: Calendar
********************* */
.fc table {
font-size: 17px;
border-spacing: 8px 4px;
border-collapse: separate;
}
.fc-bg table tbody td.fc-day {
background-color: #fff;
}
.fc-view {
margin: 0 -4px;
}
.fc-view>table {
border-spacing: 0;
border-collapse: collapse;
}
.fc-view>table thead th.fc-day-header {
background-color: #ecf3fd;
text-align: left;
padding: 3px 10px;
padding-left: 20px;
}
@media only screen and (max-width: 479px) {
.fc-view>table thead th.fc-day-header {
padding-left: 8px;
}
}
.fc-view>table thead th.fc-day-header.fc-sun {
background-color: #fff4e6;
color: #ffb959;
}
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
float: none;
padding: 4px 10px;
display: inline-block;
}
.fc-toolbar.fc-header-toolbar {
padding: 12px 20px;
margin-bottom: 4px;
}
.fc-toolbar.fc-header-toolbar .fc-left h2 {
display: inline-block;
margin-right: 10px;
}
.fc-toolbar.fc-header-toolbar .fc-left .fc-button {
padding: 0;
}
.fc-toolbar.fc-header-toolbar .fc-left .fc-today-button {
margin-left: 15px;
background-color: #67cf94;
padding: 2px 16px;
text-transform: capitalize;
height: 25px;
}
.fc-toolbar.fc-header-toolbar .fc-button-group .fc-button {
background-color: #f5f5f5;
padding: 5px 20px;
text-transform: capitalize;
}
.fc-toolbar.fc-header-toolbar .fc-button-group .fc-button:not(:last-child) {
margin-right: 10px;
}
.fc-event-container .fc-content {
font-size: 12px;
}
.fc-event-container .fc-content .fc-time {
position: relative;
margin-right: 12px;
}
.fc-event-container .fc-content .fc-time:after {
position: absolute;
right: -10;
content: "m";
bottom: 0;
}
.fc-day-top.fc-today {
position: relative;
}
.fc-day-top.fc-today:after {
position: absolute;
content: "Today";
color: #aeaeae;
right: 10px;
top: 8px;
line-height: 1;
}
.fc-button {
background: none;
}
.m_style {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #d5d5d5;
padding: 3px 10px;
height: 32px;
border-radius: 2px;
}
.m_style label {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin-right: 10px;
}
.m_style label svg {
width: 12px;
height: 12px;
}
.m_style input {
border: none;
width: 100%;
}
.m_style select {
border: none;
width: 180px;
}
.m_style select.m-state {
width: 70px;
}
#createEventModal .modal-content {
padding-top: 4px;
padding-bottom: 4px;
}
#createEventModal .modal-header .calendar-modal-title label {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#createEventModal .modal-header .calendar-modal-private {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 33px;
margin-left: 10px;
cursor: pointer;
}
#createEventModal .modal-header .close {
padding: 10px;
position: absolute;
right: 20px;
top: 16px;
}
#createEventModal .calendar-modal-checkbox label {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
cursor: pointer;
}
#createEventModal .modal-footer .btn,
#createEventModal .modal-footer #example-vertical>.actions ul li a[href="#next"],
#example-vertical>.actions ul li #createEventModal .modal-footer a[href="#next"],
#createEventModal .modal-footer #example-vertical>.actions ul li a[href="#finish"],
#example-vertical>.actions ul li #createEventModal .modal-footer a[href="#finish"] {
padding: 13px 25px;
}
#fullCalModal .modal-dialog {
max-width: 290px;
}
@media only screen and (max-width: 575px) {
#fullCalModal .modal-dialog {
margin-left: auto;
margin-right: auto;
}
}
#fullCalModal .modal-content {
border: 0;
border-top: 3px solid #4f9df8;
padding-top: 4px;
padding-bottom: 4px;
}
#fullCalModal .modal-header h6 {
line-height: 1.28;
text-transform: none;
margin-top: 2px;
margin-bottom: 4px;
}
#fullCalModal .calendar-modal-location,
#fullCalModal .calendar-modal-visibility {
margin-bottom: 3px;
}
#fullCalModal .calendar-modal-location .icon,
#fullCalModal .calendar-modal-visibility .icon {
width: 10px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin-right: 10px;
}
#fullCalModal .calendar-modal-Event .color {
width: 10px;
height: 10px;
background-color: #4f9df8;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin-right: 10px;
}
#fullCalModal .modal-footer {
position: relative;
}
#fullCalModal .modal-footer:after {
width: calc(100% - 32px);
left: 16px;
background-color: #f5f5f5;
height: 1px;
top: 0;
content: "";
position: absolute;
}
#fullCalModal .modal-footer:before {
width: 1px;
height: 14px;
left: 50%;
background-color: #e5e5e5;
top: 50%;
margin-top: -7px;
content: "";
position: absolute;
}
#fullCalModal .modal-footer>button {
position: relative;
background-color: transparent;
padding: 0;
margin: 0;
}
@media only screen and (max-width: 575px) {
.fc-toolbar .fc-left,
.fc-toolbar .fc-right {
width: 100%;
}
}
@media only screen and (max-width: 575px) {
.fc-toolbar .fc-right {
margin-top: 5px;
}
}
@media only screen and (max-width: 1399px) {
.fc-day-top.fc-today:after {
font-size: 12px;
}
}
@media only screen and (max-width: 1023px) {
.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 20px;
}
.invoice-pd {
padding: 30px 30px;
}
@media only screen and (max-width: 479px) {
.invoice-pd {
padding: 30px 20px;
}
}
.invoice-left .list-invoice li {
color: #e9e7ff;
}
.invoice-left .list-invoice li a {
color: #e9e7ff;
}
.invoice-left .list-invoice li.location:before {
content: url("../../assets/img/svg/location-icon.svg");
}
.invoice-left .list-invoice li.call:before {
content: url("../../assets/img/svg/call-icon.svg");
}
.invoice-right .status-list li:not(:last-child) {
margin-bottom: 8px;
}
.invoice-right .status-list .key {
color: #cac6fb;
min-width: 90px;
}
.status-list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.status-list li:not(:last-child) {
margin-bottom: 12px;
}
.status-list span {
display: inline-block;
}
.status-list .key {
min-width: 100px;
}
.details-list-wrap {
padding: 10px 40px 30px;
}
@media only screen and (max-width: 479px) {
.details-list-wrap {
padding: 0 15px 20px;
}
}
.details-list-wrap .invoice-list-table.some-center th:not(:nth-child(1)):not(:nth-child(2)),
.details-list-wrap table.some-center.contact-list-table th:not(:nth-child(1)):not(:nth-child(2)),
.details-list-wrap .invoice-list-table.some-center td:not(:nth-child(1)):not(:nth-child(2)),
.details-list-wrap table.some-center.contact-list-table td:not(:nth-child(1)):not(:nth-child(2)) {
text-align: center;
}
.list-invoice li {
position: relative;
/* padding-left: 30px; */
}
.list-invoice li:not(:last-child) {
margin-bottom: 15px;
}
.list-invoice li.location:before,
.list-invoice li.call:before,
.list-invoice li.mail:before,
.list-invoice li.user:before {
position: absolute;
content: url("../../assets/img/svg/location-icon1.svg");
left: 0;
top: 2px;
}
.list-invoice li.call:before {
content: url("../../assets/img/svg/call-icon1.svg");
}
.list-invoice li.user:before {
content: url("../../assets/img/svg/user-icon.svg");
}
.list-invoice li.mail:before {
content: url("../../assets/img/svg/mail-icon.svg");
}
.invoice.edit input {
max-width: 290px;
}
.invoice.edit .list-invoice li:before {
top: 5px;
}
@media only screen and (max-width: 479px) {
.proceed-to-checkout.invoice-edit {
margin-right: 0px;
}
}
.proceed-to-checkout.invoice-edit .btn,
.proceed-to-checkout.invoice-edit #example-vertical>.actions ul li a[href="#next"],
#example-vertical>.actions ul li .proceed-to-checkout.invoice-edit a[href="#next"],
.proceed-to-checkout.invoice-edit #example-vertical>.actions ul li a[href="#finish"],
#example-vertical>.actions ul li .proceed-to-checkout.invoice-edit a[href="#finish"] {
min-width: 140px;
}
.proceed-to-checkout.invoice-edit .btn:not(:last-child),
.proceed-to-checkout.invoice-edit #example-vertical>.actions ul li a:not(:last-child)[href="#next"],
#example-vertical>.actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#next"],
.proceed-to-checkout.invoice-edit #example-vertical>.actions ul li a:not(:last-child)[href="#finish"],
#example-vertical>.actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#finish"] {
margin-right: 30px;
}
@media only screen and (max-width: 479px) {
.proceed-to-checkout.invoice-edit .btn:not(:last-child),
.proceed-to-checkout.invoice-edit #example-vertical>.actions ul li a:not(:last-child)[href="#next"],
#example-vertical>.actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#next"],
.proceed-to-checkout.invoice-edit #example-vertical>.actions ul li a:not(:last-child)[href="#finish"],
#example-vertical>.actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#finish"] {
margin-right: 15px;
}
}
/* ************************
06.6: Contact
********************* */
.contact-header,
.project-header {
padding: 15px 20px;
}
.contact-header-left .search-form,
.project-header-left .search-form,
.contact-header-left .add-title,
.project-header-left .add-title {
max-width: 625px;
}
.contact-header-right>div:not(:last-child),
.project-header-right>div:not(:last-child) {
margin-right: 20px;
}
@media only screen and (max-width: 575px) {
.modal-upload-avatar .content p br {
display: none;
}
}
@media only screen and (max-width: 575px) {
.contact-account-setting {
width: 100%;
}
}
.contact-account-setting input {
padding-left: 15px;
padding-right: 10px;
}
#contactAddModal .modal-dialog,
#contactEditModal .modal-dialog {
max-width: 750px;
}
#contactAddModal .modal-body,
#contactEditModal .modal-body {
padding: 30px 50px 40px 60px;
}
@media only screen and (max-width: 767px) {
#contactAddModal .modal-body,
#contactEditModal .modal-body {
padding: 30px 20px;
}
}
#contactAddModal .modal-body .cancel,
#contactEditModal .modal-body .cancel {
color: #fc7383;
}
#contactAddModal .modal-content,
#contactEditModal .modal-content {
border: 0;
}
/* Contact Grid */
.contact-box .contact-head {
padding: 15px;
background-color: #ecf3fd;
position: relative;
}
.contact-box .contact-head .dropdown-button {
position: absolute;
right: 10px;
top: 15px;
}
.contact-box .contact-head .dropdown-button .dropdown-menu {
min-width: 90px;
}
.contact-box .contact-body {
padding: 15px;
}
.contact-box .contact-body a {
display: block;
margin-bottom: 12px;
}
/* ************************
06.7: Project Manager
********************* */
.project-header-right .custom-checkbox {
top: 3px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
margin-right: 17px;
}
.project-box {
position: relative;
min-height: 100px;
padding: 11px 10px 13px 14px;
}
.project-box .custom-checkbox {
position: absolute;
left: -7px;
top: 2px;
}
.project-box>a svg {
width: 15px;
height: 15px;
}
.project-box>a svg g line {
stroke: #8280fd;
}
.project-box .dropdown-button .dropdown-menu {
max-width: 140px;
}
.project-box.one {
background-color: #fbf6d0;
}
.project-box.two {
background-color: #ccf5f8;
}
.project-box.three {
background-color: #e9e7ff;
}
.project-box.four {
background-color: #fee7ff;
}
.project-box.five {
background-color: #ecf3fd;
}
.project-box.six {
background-color: #dbf7e8;
}
.project-box.seven {
background-color: #fff4e6;
}
.project-box.eight {
background-color: #ffe2e6;
}
.board-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 20px;
padding-left: 1px;
position: relative;
min-height: 68vh;
}
.board {
min-width: 376px;
max-width: 376px;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
display: block;
white-space: initial;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: -webkit-min-content;
height: -moz-min-content;
height: min-content;
position: relative;
}
.board:not(:last-child) {
margin-right: 30px;
}
@media only screen and (max-width: 479px) {
.board {
min-width: 330px;
max-width: 330px;
}
}
.board .board-header {
background-color: #ecf3fd;
padding: 10px;
}
.board .board-cards .board-card {
position: relative;
margin-bottom: 10px;
padding: 10px;
cursor: pointer;
}
.board .board-cards .board-card img {
width: 100%;
}
.board .board-cards .board-card:last-child {
margin-bottom: 20px;
}
.board .board-cards .board-card:before {
width: 3px;
background-color: #fc7383;
display: block;
height: calc(100% - 20px);
top: 10px;
left: -1.5px;
}
.board .board-cards .board-card .left img,
.board .board-cards .board-card .left svg {
width: 15px;
height: 15px;
}
.board .board-cards .board-card.label-2:before {
background-color: #ffb959;
}
.board .board-cards .board-card.label-3:before {
background-color: #e580fd;
}
.board .board-cards .board-card.label-4:before {
background-color: #4f9df8;
}
.board .board-cards .board-card.active {
background-color: #ffe2e6;
}
.board .board-cards .board-card.active .left svg g circle,
.board .board-cards .board-card.active .left svg g path {
stroke: #fc7383;
}
.board .board-cards .board-card.active .left a {
color: #fc7383;
}
.board .board-composer {
background-color: #f5f5f5;
}
.board .board-composer>a {
padding: 10px;
}
.board .board-composer .add-card svg g line {
stroke: #727272;
}
.board .board-composer .add-another-card.style--two {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.add-card {
padding: 10px;
padding-bottom: 20px;
position: relative;
top: 0;
}
.add-card .actions .cancel {
color: #fc7383;
}
.add-card.add-another-list {
width: 100%;
padding-bottom: 10px;
background-color: #ecf3fd;
}
.add-card.add-another-list .theme-input-style,
.add-card.add-another-list .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .add-card.add-another-list input,
.add-card.add-another-list .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter .add-card.add-another-list select,
.add-card.add-another-list .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length .add-card.add-another-list input,
.add-card.add-another-list .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length .add-card.add-another-list select {
height: 30px;
}
.labels,
.label-item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.labels .label,
.label-item .label {
width: 10px;
height: 20px;
background-color: #fc7383;
display: block;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.labels .label:not(:last-child),
.label-item .label:not(:last-child) {
margin-right: 8px;
}
.labels .label svg,
.label-item .label svg {
width: 8px;
height: 8px;
}
.labels .label.add-label,
.label-item .label.add-label {
width: 20px;
}
.labels .label.label-2,
.label-item .label.label-2 {
background-color: #ffb959;
}
.labels .label.label-3,
.label-item .label.label-3 {
background-color: #e580fd;
}
.labels .label.label-4,
.label-item .label.label-4 {
background-color: #4f9df8;
}
.labels .label.label-5,
.label-item .label.label-5 {
background-color: #67cf94;
}
.labels .label.label-6,
.label-item .label.label-6 {
background-color: #0079bf;
}
.labels .label.label-7,
.label-item .label.label-7 {
background-color: #00c2e0;
}
.labels .label.label-8,
.label-item .label.label-8 {
background-color: #67cf94;
}
.labels .label.label-9,
.label-item .label.label-9 {
background-color: #ff78cb;
}
.labels .label.label-10,
.label-item .label.label-10 {
background-color: #344563;
}
.labels .label.label-11,
.label-item .label.label-11 {
background-color: #b3bac5;
}
#projectTaskDetails .modal-dialog {
max-width: 780px;
}
@media only screen and (min-width: 0px) and (max-width: 800px) {
#projectTaskDetails .modal-dialog {
max-width: calc(100% - 20px);
}
}
#projectTaskDetails .modal-content .project-main-title {
position: relative;
}
#projectTaskDetails .modal-content .project-main-title textarea {
position: absolute;
top: -5px;
left: -10px;
width: calc(100% + 10px);
overflow: hidden;
padding: 5px 10px;
line-height: 1;
z-index: -1;
text-transform: capitalize;
}
#projectTaskDetails .modal-content .project-main-title textarea.isEditing {
z-index: 1;
}
#projectTaskDetails .modal-content .project-description .description.edit {
margin-bottom: 90px;
}
#projectTaskDetails .modal-content .project-description .des-edit-actions {
position: absolute;
left: 0;
top: 0;
padding: 10px;
background-color: #f0f0f0;
z-index: 2;
}
#projectTaskDetails .modal-content .project-description .des-edit-actions textarea {
background-color: #f0f0f0;
padding: 0px;
}
#projectTaskDetails .modal-content .project-description .des-edit-controls .icon-close {
font-size: 23px;
}
#projectTaskDetails .modal-content .task-status a {
text-decoration: underline;
}
#projectTaskDetails .modal-content .cover-img {
height: 180px;
max-height: 180px;
position: relative;
}
#projectTaskDetails .modal-content .cover-img .attach-file {
width: auto;
height: auto;
padding: 5px 10px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
background-color: rgba(155, 155, 155, 0.5);
right: 10px;
bottom: 10px;
position: absolute;
}
#projectTaskDetails .modal-content .cover-img .attach-file i {
font-size: 14px;
margin-right: 3px;
}
#projectTaskDetails .modal-content .modal-close {
width: 40px;
height: 40px;
background-color: rgba(155, 155, 155, 0.5);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
#projectTaskDetails .modal-content .modal-close svg {
width: 12px;
height: 12px;
}
#projectTaskDetails .modal-content .modal-close svg path {
stroke: #ffffff;
}
#projectTaskDetails .modal-content .attachment img {
max-width: 190px;
max-height: 100px;
}
#projectTaskDetails .modal-content .checklist .process-bar-wrapper {
margin-left: 35px;
background-color: #f0f0f0;
margin-bottom: 12px;
width: calc(100% - 35px);
}
#projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-width {
left: -35px;
top: -7px;
font-size: 11px;
}
#projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-name {
font-size: 16px;
text-transform: lowercase;
margin-bottom: 12px;
}
#projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-name:before {
position: absolute;
font-family: icofont;
font-size: 18px;
left: -35px;
content: "\eed9";
top: 0;
}
#projectTaskDetails .modal-content .checklist .process-bar-wrapper .action-btns {
position: absolute;
right: 0;
bottom: 15px;
}
#projectTaskDetails .modal-content .checklist .process-bar-wrapper .action-btns .light-btn:not(:last-child),
#projectTaskDetails .modal-content .checklist .process-bar-wrapper .action-btns span:not(:last-child) {
margin-right: 4px;
}
#projectTaskDetails .modal-content .checklist .checklist-items {
margin-bottom: 10px;
}
#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item {
margin-left: 35px;
line-height: 1.8;
}
#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details {
padding: 5px 0;
z-index: 1;
cursor: pointer;
}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details {
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
}
}
#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details:after {
width: calc(100% + 5px);
height: 100%;
left: -5px;
position: absolute;
content: "";
top: 0;
z-index: -1;
}
#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details .icon-delete {
opacity: 0;
visibility: hidden;
padding: 5px;
}
#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details:hover:after {
background-color: #f0f0f0;
}
#projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details:hover .icon-delete {
visibility: visible;
opacity: 1;
}
#projectTaskDetails .modal-content .dashboard-date {
margin-left: 26px;
}
#projectTaskDetails .modal-content .checklist-new-item .theme-input-style,
#projectTaskDetails .modal-content .checklist-new-item .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectTaskDetails .modal-content .checklist-new-item input,
#projectTaskDetails .modal-content .checklist-new-item .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectTaskDetails .modal-content .checklist-new-item select,
#projectTaskDetails .modal-content .checklist-new-item .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectTaskDetails .modal-content .checklist-new-item input,
#projectTaskDetails .modal-content .checklist-new-item .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectTaskDetails .modal-content .checklist-new-item select {
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,
#projectMemberModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectMemberModal .modal-content .modal-body input,
#projectLabelModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectLabelModal .modal-content .modal-body input,
#projectChecklistModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectChecklistModal .modal-content .modal-body input,
#projectMoveModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectMoveModal .modal-content .modal-body input,
#projectCopyModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectCopyModal .modal-content .modal-body input,
#projectShareModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectShareModal .modal-content .modal-body input,
#projectMemberModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectMemberModal .modal-content .modal-body select,
#projectLabelModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectLabelModal .modal-content .modal-body select,
#projectChecklistModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectChecklistModal .modal-content .modal-body select,
#projectMoveModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectMoveModal .modal-content .modal-body select,
#projectCopyModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectCopyModal .modal-content .modal-body select,
#projectShareModal .modal-content .modal-body .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectShareModal .modal-content .modal-body select,
#projectMemberModal .modal-content .modal-body .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectMemberModal .modal-content .modal-body input,
#projectLabelModal .modal-content .modal-body .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectLabelModal .modal-content .modal-body input,
#projectChecklistModal .modal-content .modal-body .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectChecklistModal .modal-content .modal-body input,
#projectMoveModal .modal-content .modal-body .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectMoveModal .modal-content .modal-body input,
#projectCopyModal .modal-content .modal-body .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectCopyModal .modal-content .modal-body input,
#projectShareModal .modal-content .modal-body .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectShareModal .modal-content .modal-body input,
#projectMemberModal .modal-content .modal-body .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectMemberModal .modal-content .modal-body select,
#projectLabelModal .modal-content .modal-body .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectLabelModal .modal-content .modal-body select,
#projectChecklistModal .modal-content .modal-body .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectChecklistModal .modal-content .modal-body select,
#projectMoveModal .modal-content .modal-body .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectMoveModal .modal-content .modal-body select,
#projectCopyModal .modal-content .modal-body .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectCopyModal .modal-content .modal-body select,
#projectShareModal .modal-content .modal-body .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectShareModal .modal-content .modal-body select {
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,
#projectShareModal .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #projectShareModal .modal-body .form-group .input-wrap input,
#projectShareModal .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #projectShareModal .modal-body .form-group .input-wrap select,
#projectShareModal .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #projectShareModal .modal-body .form-group .input-wrap input,
#projectShareModal .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #projectShareModal .modal-body .form-group .input-wrap select {
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,
#shareModal .modal-content .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter #shareModal .modal-content .modal-body .form-group .input-wrap input,
#shareModal .modal-content .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter #shareModal .modal-content .modal-body .form-group .input-wrap select,
#shareModal .modal-content .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length #shareModal .modal-content .modal-body .form-group .input-wrap input,
#shareModal .modal-content .modal-body .form-group .input-wrap .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length #shareModal .modal-content .modal-body .form-group .input-wrap select {
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: 1023px) {
#fileManagerUpload .modal-dialog {
margin-left: 8px;
margin-right: 8px;
}
}
#fileManagerUpload .modal-close {
position: absolute;
right: 14px;
top: 10px;
z-index: 1;
}
/* File Details */
#fileDetails .modal-dialog {
max-width: 585px;
width: 585px;
}
@media only screen and (max-width: 575px) {
#fileDetails .modal-dialog {
width: calc(100% - 16px);
}
}
#fileDetails .modal-body {
padding: 30px;
}
@media only screen and (max-width: 575px) {
#fileDetails .modal-body {
padding: 20px;
}
}
@media only screen and (max-width: 479px) {
#fileDetails .modal-body {
padding-top: 50px;
}
}
#fileDetails .modal-body .modal-close {
position: absolute;
right: 15px;
top: 10px;
cursor: pointer;
}
#fileDetails .modal-body .left {
margin-left: 30px;
margin-right: 60px;
}
@media only screen and (max-width: 575px) {
#fileDetails .modal-body .left {
margin-left: 0;
margin-right: 20px;
}
}
/* Dropzone */
.dropzone {
background: white;
border-radius: 3px;
border: 2px dashed #8280fd;
-o-border-image: none;
border-image: none;
max-width: 1050px;
width: 1050px;
min-height: 540px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media only screen and (max-width: 1023px) {
.dropzone {
width: calc(100% - 16px);
}
}
.dropzone.dz-started {
display: block;
}
.dropzone.dz-started .upload-icon {
display: none;
}
.dropzone.style--two {
min-height: 345px;
width: 100%;
max-width: 100%;
border-color: #cac6fb;
border-radius: 20px;
}
.dropzone.style--three {
min-height: 275px;
width: 100%;
max-width: 100%;
border-color: #cac6fb;
border-radius: 20px;
}
/* ************************
07.1: Form Element
********************* */
.form-element {
padding: 37px 30px 40px;
}
@media only screen and (max-width: 479px) {
.form-element {
padding: 22px 15px 25px;
}
}
.form-element.color-options,
.form-element.horizontal-form,
.form-element.basic-checkbox {
padding: 27px 30px 30px;
}
.form-element.touchspin {
padding: 25px 30px;
}
@media only screen and (max-width: 479px) {
.form-element.touchspin {
padding: 20px 15px;
}
}
.custom-checkbox+label,
.custom-radio+label {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Input Group Addon */
.input-group.addon .input-group-prepend .input-group-text,
.input-group.addon .input-group-append .input-group-text {
background-color: #ecf3fd;
}
.input-group.addon .input-group-prepend .input-group-text:not(:first-child),
.input-group.addon .input-group-append .input-group-text:not(:first-child) {
margin-left: 2px;
}
.input-group.addon .input-group-prepend .input-group-text.style--two,
.input-group.addon .input-group-append .input-group-text.style--two {
border-radius: 5px 0 0 5px;
}
.input-group.addon .input-group-prepend .input-group-text.style--three,
.input-group.addon .input-group-append .input-group-text.style--three {
border-radius: 0 5px 5px 0;
}
.input-group.addon .form-control {
background-color: #f0f0f0;
border-radius: 0 5px 5px 0;
font-size: 15px;
height: 40px;
}
.input-group.addon .form-control.style--two {
border-radius: 5px 0 0 5px;
}
/* Range Slider */
input[type="range"] {
-webkit-appearance: none;
margin: 13px 0;
width: 100%;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
width: 100%;
height: 10px;
cursor: pointer;
background-color: #ccf5f8;
border-radius: 50px;
}
input[type="range"]::-webkit-slider-thumb {
border: 2px solid #09d1de;
height: 26px;
width: 12px;
border-radius: 50px !important;
-webkit-appearance: none;
margin-top: -8px;
}
input[type="range"]::-moz-range-track,
input[type="range"]::-moz-range-thumb {
width: 100%;
height: 10px;
cursor: pointer;
background-color: #ccf5f8;
border-radius: 50px;
}
input[type="range"]::-moz-range-thumb {
border: 2px solid #09d1de;
height: 26px;
width: 12px;
}
input[type="range"]::-ms-track {
width: 100%;
height: 10px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type="range"]::-ms-fill-lower {
background-color: #ccf5f8;
border-radius: 50px;
}
input[type="range"]::-ms-fill-upper {
background-color: #ccf5f8;
border-radius: 50px;
}
input[type="range"]::-ms-thumb {
border: 2px solid #09d1de;
height: 26px;
width: 12px;
border-radius: 50px;
background-color: #ccf5f8;
cursor: pointer;
}
/* Switcher */
.switch {
display: block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 46px;
height: 25px;
}
.switch input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.switch input:checked~.control {
background-color: #e9e7ff;
}
.switch input:checked~.control:after {
left: 21px;
}
.switch input:checked~.control .check {
left: 21px;
}
.switch input:checked~.control .check:before {
width: 11px;
-webkit-transform: rotate(-45deg) translate(-2px, 14px);
-ms-transform: rotate(-45deg) translate(-2px, 14px);
transform: rotate(-45deg) translate(-2px, 14px);
}
.switch input:checked~.control .check:after {
width: 7px;
-webkit-transform: rotate(45deg) translate(13px, 5px);
-ms-transform: rotate(45deg) translate(13px, 5px);
transform: rotate(45deg) translate(13px, 5px);
}
.switch input:disabled~.control {
background-color: #f5f5f5;
}
.switch input:disabled~.control .check:before {
display: none;
}
.switch input:disabled~.control .check:after {
-webkit-transform: rotate(0deg) translate(7px, 11px);
-ms-transform: rotate(0deg) translate(7px, 11px);
transform: rotate(0deg) translate(7px, 11px);
}
.switch .control {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 46px;
-webkit-transition: background-color 0.15s ease-in;
-o-transition: background-color 0.15s ease-in;
transition: background-color 0.15s ease-in;
}
.switch .control:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 25px;
height: 25px;
-webkit-transition: left 0.15s ease-in;
-o-transition: left 0.15s ease-in;
transition: left 0.15s ease-in;
}
.switch .check {
width: 25px;
height: 25px;
position: absolute;
-webkit-transition: 0.4s ease;
-o-transition: 0.4s ease;
transition: 0.4s ease;
top: 0;
left: 0;
}
.switch .check:before,
.switch .check:after {
height: 3px;
border-radius: 10px;
background: #fff;
-webkit-transition: 0.4s ease;
-o-transition: 0.4s ease;
transition: 0.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.medium {
width: 35px;
height: 20px;
}
.switch.medium input:checked~.control:after {
left: 15px;
}
.switch.medium input:checked~.control .check {
left: 15px;
}
.switch.medium input:checked~.control .check:before {
width: 7px;
-webkit-transform: rotate(-45deg) translate(-1px, 12px);
-ms-transform: rotate(-45deg) translate(-1px, 12px);
transform: rotate(-45deg) translate(-1px, 12px);
}
.switch.medium input:checked~.control .check:after {
width: 4px;
-webkit-transform: rotate(45deg) translate(11px, 3px);
-ms-transform: rotate(45deg) translate(11px, 3px);
transform: rotate(45deg) translate(11px, 3px);
}
.switch.medium input:disabled~.control .check:after {
-webkit-transform: rotate(0deg) translate(6px, 9px);
-ms-transform: rotate(0deg) translate(6px, 9px);
transform: rotate(0deg) translate(6px, 9px);
}
.switch.medium .control {
width: 35px;
height: 20px;
}
.switch.medium .control:after {
width: 20px;
height: 20px;
}
.switch.medium .check {
width: 20px;
height: 20px;
}
.switch.medium .check:before {
width: 7px;
height: 2px;
-webkit-transform: rotate(-45deg) translate(-2px, 11px);
-ms-transform: rotate(-45deg) translate(-2px, 11px);
transform: rotate(-45deg) translate(-2px, 11px);
}
.switch.medium .check:after {
width: 7px;
height: 2px;
-webkit-transform: rotate(45deg) translate(11px, 2px);
-ms-transform: rotate(45deg) translate(11px, 2px);
transform: rotate(45deg) translate(11px, 2px);
}
.switch.small {
width: 25px;
height: 15px;
}
.switch.small input:checked~.control:after {
left: 10px;
}
.switch.small input:checked~.control .check {
left: 10px;
}
.switch.small input:checked~.control .check:before {
width: 7px;
-webkit-transform: rotate(-45deg) translate(-1px, 9px);
-ms-transform: rotate(-45deg) translate(-1px, 9px);
transform: rotate(-45deg) translate(-1px, 9px);
}
.switch.small input:checked~.control .check:after {
width: 4px;
-webkit-transform: rotate(45deg) translate(8px, 3px);
-ms-transform: rotate(45deg) translate(8px, 3px);
transform: rotate(45deg) translate(8px, 3px);
}
.switch.small input:disabled~.control .check:after {
-webkit-transform: rotate(0deg) translate(4px, 6.5px);
-ms-transform: rotate(0deg) translate(4px, 6.5px);
transform: rotate(0deg) translate(4px, 6.5px);
}
.switch.small .control {
height: 15px;
width: 25px;
}
.switch.small .control:after {
width: 15px;
height: 15px;
}
.switch.small .check {
width: 15px;
height: 15px;
}
.switch.small .check:before {
width: 7px;
height: 2px;
-webkit-transform: rotate(-45deg) translate(-2px, 7px);
-ms-transform: rotate(-45deg) translate(-2px, 7px);
transform: rotate(-45deg) translate(-2px, 7px);
}
.switch.small .check:after {
width: 7px;
height: 2px;
-webkit-transform: rotate(45deg) translate(7px, 2px);
-ms-transform: rotate(45deg) translate(7px, 2px);
transform: rotate(45deg) translate(7px, 2px);
}
.switch.outline .control {
border: 1px solid;
background-color: transparent !important;
}
.switch.outline .control:after {
top: -1px;
}
.switch.success input:checked~.control {
background-color: #dbf7e8;
border-color: #67cf94;
}
.switch.success input:checked~.control:after {
background-color: #67cf94;
-webkit-box-shadow: 0 5px 10px rgba(103, 207, 162, 0.7);
box-shadow: 0 5px 10px rgba(103, 207, 162, 0.7);
}
.switch.success.glow input:checked~.control:after {
-webkit-box-shadow: 0 5px 10px rgba(103, 207, 162, 0.7);
box-shadow: 0 5px 10px rgba(103, 207, 162, 0.7);
}
.switch.info input:checked~.control {
background-color: #ccf5f8;
border-color: #09d1de;
}
.switch.info input:checked~.control:after {
background-color: #09d1de;
}
.switch.info.glow input:checked~.control:after {
-webkit-box-shadow: 0 5px 10px rgba(9, 209, 222, 0.7);
box-shadow: 0 5px 10px rgba(9, 209, 222, 0.7);
}
.switch.brand input:checked~.control {
background-color: #e9e7ff;
border-color: #8280fd;
}
.switch.brand input:checked~.control:after {
background-color: #8280fd;
}
.switch.brand.glow input:checked~.control:after {
-webkit-box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7);
box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7);
}
.switch.warning input:checked~.control {
background-color: #fff4e6;
border-color: #ffb959;
}
.switch.warning input:checked~.control:after {
background-color: #ffb959;
}
.switch.warning.glow input:checked~.control:after {
-webkit-box-shadow: 0 5px 10px rgba(255, 185, 89, 0.7);
box-shadow: 0 5px 10px rgba(255, 185, 89, 0.7);
}
.switch.primary input:checked~.control {
border-color: #8280fd;
}
.switch.primary.glow input:checked~.control:after {
-webkit-box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7);
box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7);
}
.switch.danger input:checked~.control {
background-color: #ffe2e6;
border-color: #fc7383;
}
.switch.danger input:checked~.control:after {
background-color: #fc7383;
}
.switch.danger.glow input:checked~.control:after {
-webkit-box-shadow: 0 5px 10px rgba(252, 115, 131, 0.7);
box-shadow: 0 5px 10px rgba(252, 115, 131, 0.7);
}
.switch.dark.glow input:checked~.control:after {
-webkit-box-shadow: 0 5px 10px rgba(174, 174, 174, 0.7);
box-shadow: 0 5px 10px rgba(174, 174, 174, 0.7);
}
/* Bootstrap Touchspin */
.input-group.bootstrap-touchspin {
margin-bottom: 0;
max-width: 240px;
}
.input-group.bootstrap-touchspin.style--two {
max-width: 345px;
}
.input-group.bootstrap-touchspin.shadow-v input {
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
}
.input-group.bootstrap-touchspin.shadow-v button.btn {
-webkit-box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7) !important;
box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7) !important;
}
.input-group.bootstrap-touchspin.large input {
height: 45px;
font-size: 16px;
}
.input-group.bootstrap-touchspin.large button.btn {
width: 46px;
font-size: 26px;
}
.input-group.bootstrap-touchspin.small input {
height: 25px;
font-size: 14px;
}
.input-group.bootstrap-touchspin.small button.btn {
width: 26px;
font-size: 15px;
}
.input-group.bootstrap-touchspin.warning button.btn {
background-color: #ffb959;
}
.input-group.bootstrap-touchspin.success button.btn {
background-color: #67cf94;
}
.input-group.bootstrap-touchspin.danger button.btn {
background-color: #fc7383;
}
.input-group.bootstrap-touchspin input {
height: 36px;
background-color: #f5f5f5;
font-size: 15px;
}
.input-group.bootstrap-touchspin button.btn {
padding: 5px;
width: 35px;
font-size: 22px;
}
.input-group.bootstrap-touchspin button.btn.glyphicon {
padding: 0;
font-size: 20px;
}
.input-group.bootstrap-touchspin .input-group-text {
background-color: #e9e9e9;
}
.input-group.bootstrap-touchspin .input-group-prepend .input-group-text {
margin-left: 2px;
}
.input-group.bootstrap-touchspin .input-group-prepend button.btn {
border-radius: 5px 0px 0px 5px;
}
.input-group.bootstrap-touchspin .input-group-append .input-group-text {
margin-right: 2px;
}
.input-group.bootstrap-touchspin .input-group-append button.btn {
border-radius: 0px 5px 5px 0px;
}
.control-label {
margin-bottom: 12px;
}
/* Bootstrap Touchspin Vertical button css */
.bootstrap-touchspin .input-group-btn-vertical {
position: absolute;
right: 0;
height: 100%;
z-index: 11;
}
.bootstrap-touchspin .input-group-btn-vertical>.btn,
.bootstrap-touchspin #example-vertical>.actions ul li .input-group-btn-vertical>a[href="#next"],
#example-vertical>.actions ul li .bootstrap-touchspin .input-group-btn-vertical>a[href="#next"],
.bootstrap-touchspin #example-vertical>.actions ul li .input-group-btn-vertical>a[href="#finish"],
#example-vertical>.actions ul li .bootstrap-touchspin .input-group-btn-vertical>a[href="#finish"] {
position: absolute;
right: 0;
height: 50%;
padding: 0;
line-height: 1;
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
border-radius: 0 5px 0 0;
top: 0;
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up:after {
width: 100%;
height: 1px;
position: absolute;
bottom: -1px;
left: 0;
content: "";
z-index: 1;
opacity: 0.3;
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
border-radius: 0 0 5px 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
/* File Drop area Wrapper */
#file-drop-area-wrappper {
padding: 50px;
}
@media only screen and (max-width: 575px) {
#file-drop-area-wrappper {
padding: 15px;
}
}
#file-drop-area-wrappper.p-20 {
padding: 20px;
}
@media only screen and (max-width: 575px) {
#file-drop-area-wrappper.p-20 {
padding: 14px;
}
}
select#locale {
border: none;
background: transparent;
width: 80px;
}
/* Notes */
.note {
padding: 8px 30px;
}
@media only screen and (max-width: 575px) {
.note {
padding: 8px 15px;
}
}
.note img,
.note svg,
.note i,
.note b {
margin-right: 8px;
min-width: 22px;
}
.note a {
text-decoration: underline;
font-style: italic;
}
.note.warning {
background-color: #fff4e6;
}
.note.warning b {
color: #ffb959;
}
.note.info {
background-color: #ccf5f8;
}
.note.info b {
color: #09d1de;
}
/* ************************
07.2: Form Wizard
********************* */
#smartwizard .nav li a {
font-size: 17px;
height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media only screen and (min-width: 0px) and (max-width: 640px) {
#smartwizard .nav li a {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
#smartwizard .nav li:last-child {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
@media only screen and (min-width: 0px) and (max-width: 640px) {
#smartwizard .nav li:last-child {
margin-top: 10px;
}
}
#smartwizard .nav li:last-child a {
margin-left: 20px;
margin-right: 20px;
width: 80px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border: 1px solid #dbf7e8;
background: #fff;
}
#smartwizard .nav li:last-child a:before,
#smartwizard .nav li:last-child a:after {
display: none;
}
#smartwizard .nav li:last-child a i {
font-size: 50px;
}
#smartwizard .card-body {
padding-bottom: 0;
}
@media only screen and (max-width: 767px) {
#smartwizard .card-body {
padding: 0;
padding-top: 20px;
}
}
.step-done {
padding: 100px 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.step-done .btn-circle {
margin-bottom: 25px;
}
.step-done p {
max-width: 510px;
}
.step-done>p {
margin: 0 auto;
text-align: center;
}
.sw .toolbar button.disabled {
display: none;
}
@media only screen and (max-width: 575px) {
.sw .toolbar {
padding: 0 15px 30px;
}
}
.smartwizard2-top-title {
margin-top: 27px;
margin-bottom: 24px;
padding: 0 30px;
}
#smartwizard2 {
padding: 0 30px;
}
@media only screen and (max-width: 575px) {
#smartwizard2 {
padding: 0 15px;
}
}
#smartwizard2 .toolbar {
padding-top: 10px;
}
#smartwizard2 .toolbar button.btn {
padding: 13px 26px;
}
#smartwizard2 .nav {
margin-bottom: 30px;
}
#smartwizard2 .nav li:last-child {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
overflow: hidden;
}
#example-vertical>.steps {
width: 240px;
margin-right: 30px;
float: left;
}
@media only screen and (max-width: 767px) {
#example-vertical>.steps {
width: 160px;
}
}
@media only screen and (max-width: 575px) {
#example-vertical>.steps {
width: 100%;
float: none;
}
}
#example-vertical>.steps .current-info {
position: absolute;
left: -999em;
}
#example-vertical>.steps ul {
padding: 0;
margin: 0;
list-style: none;
}
@media only screen and (max-width: 575px) {
#example-vertical>.steps ul {
margin: 0 15px;
margin-bottom: 30px;
}
}
#example-vertical>.steps ul li {
padding: 40px 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
@media only screen and (max-width: 575px) {
#example-vertical>.steps ul li {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 20px 10px;
}
}
#example-vertical>.steps ul li:last-child {
display: none;
}
#example-vertical>.steps ul li:after {
height: 100%;
width: 5px;
background-color: #f5f5f5;
right: 0;
top: 0;
position: absolute;
content: "";
}
@media only screen and (max-width: 575px) {
#example-vertical>.steps ul li:after {
height: 5px;
width: 100%;
left: 0;
top: auto;
bottom: 0;
}
}
#example-vertical>.steps ul li.done:after,
#example-vertical>.steps ul li.current:after {
background-color: #67cf94;
}
#example-vertical>.steps ul li.done a i,
#example-vertical>.steps ul li.current a i {
color: #8280fd;
}
#example-vertical>.steps ul li.current:after {
background-color: #8ef2b9;
}
#example-vertical>.steps ul li.error:after {
background-color: #fc7383;
}
#example-vertical>.steps ul li a {
font-size: 17px;
}
#example-vertical>.steps ul li a .number {
position: absolute;
left: -999em;
}
@media only screen and (max-width: 575px) {
#example-vertical>.steps ul li a {
text-align: center;
}
}
#example-vertical>.steps ul li a i {
display: block;
margin-bottom: 10px;
}
#example-vertical>.content {
float: left;
width: calc(100% - 270px);
}
@media only screen and (max-width: 767px) {
#example-vertical>.content {
width: calc(100% - 190px);
}
}
@media only screen and (max-width: 575px) {
#example-vertical>.content {
width: 100%;
float: none;
}
}
#example-vertical>.content>h3 {
position: absolute;
left: -999em;
}
#example-vertical>.actions {
margin-left: 296px;
padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
#example-vertical>.actions {
margin-left: 210px;
}
}
@media only screen and (max-width: 575px) {
#example-vertical>.actions {
margin-top: 10px;
margin-left: 15px;
}
}
#example-vertical>.actions ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#example-vertical>.actions ul li {
display: inline-block;
}
#example-vertical>.actions ul li.disabled {
display: none;
}
#example-vertical>.actions ul li:not(:last-child) {
margin-right: 15px;
}
#example-vertical>.actions ul li a {
display: inline-block;
}
#example-vertical>.actions ul li a[href="#next"],
#example-vertical>.actions ul li a[href="#finish"] {
padding: 13px 26px;
}
#example-vertical>.actions ul li a[href="#previous"] {
color: #cac6fb;
padding: 10px 0;
}
#example-vertical .step-done {
padding: 70px 15px 100px;
-webkit-box-align: initial;
-ms-flex-align: initial;
align-items: initial;
}
#example-vertical .step-done>div {
padding-left: 150px;
}
@media only screen and (max-width: 1399px) {
#example-vertical .step-done>div {
padding-left: 0px;
}
}
@media only screen and (max-width: 575px) {
#example-vertical .card-body {
padding: 0 15px;
}
}
.vertical-step-wizard {
min-height: 510px;
overflow: hidden;
}
/* ************************
08.1: Widget
********************* */
.notifications a:not(:last-child),
.news a:not(:last-child) {
padding-bottom: 10px;
margin-bottom: 14px;
}
.notifications a span.time,
.news a span.time {
display: block;
margin-bottom: 3px;
}
.profile-box {
padding: 8px 14px;
background-color: #fff4e6;
margin-bottom: 10px;
}
.profile-box h4 {
color: #ffb959;
}
.profile-box.style--two {
background-color: #dbf7e8;
}
.profile-box.style--two h4 {
color: #67cf94;
}
.profile-box.style--three {
background-color: #fee7ff;
}
.profile-box.style--three h4 {
color: #e580fd;
}
/* Chip */
.chip {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
margin-bottom: 20px;
}
.chip>svg {
position: relative;
left: -5px;
}
.chip .chip-content {
padding: 1.5px 15px;
padding-left: 40px;
background-color: #f5f5f5;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 20px;
}
.chip .chip-content>div {
line-height: 20px;
}
.chip .chip-content.info {
background-color: #ccf5f8;
color: #09d1de;
}
.chip .chip-content.c2,
.chip a.chip-content:hover,
.chip .dropdown-menu .dropdown-body a:hover .chip-content.main-text,
.dropdown-menu .dropdown-body a:hover .chip .chip-content.main-text,
.chip .dropdown-menu.style--two .dropdown-body a:hover .chip-content.time,
.dropdown-menu.style--two .dropdown-body a:hover .chip .chip-content.time,
.chip .chip-content.btn.preview,
.chip #example-vertical>.actions ul li a.chip-content.preview[href="#next"],
#example-vertical>.actions ul li .chip a.chip-content.preview[href="#next"],
.chip #example-vertical>.actions ul li a.chip-content.preview[href="#finish"],
#example-vertical>.actions ul li .chip a.chip-content.preview[href="#finish"],
.chip .chip-content.btn.style--two,
.chip #example-vertical>.actions ul li a.chip-content.style--two[href="#next"],
#example-vertical>.actions ul li .chip a.chip-content.style--two[href="#next"],
.chip #example-vertical>.actions ul li a.chip-content.style--two[href="#finish"],
#example-vertical>.actions ul li .chip a.chip-content.style--two[href="#finish"],
.chip .chip-content.btn.s_alert,
.chip #example-vertical>.actions ul li a.chip-content.s_alert[href="#next"],
#example-vertical>.actions ul li .chip a.chip-content.s_alert[href="#next"],
.chip #example-vertical>.actions ul li a.chip-content.s_alert[href="#finish"],
#example-vertical>.actions ul li .chip a.chip-content.s_alert[href="#finish"],
.chip .chip-content.details-btn,
.chip .chip-content.light-btn,
.chip table.table-condensed thead tr:nth-child(2) th.chip-content,
table.table-condensed thead tr:nth-child(2) .chip th.chip-content,
.chip table.table-contextual .chip-content.details-btn:hover,
table.table-contextual .chip .chip-content.details-btn:hover,
.chip table.table-contextual .details-btn:hover i.chip-content,
table.table-contextual .details-btn:hover .chip i.chip-content,
.chip .sidebar .sidebar-body li.active>a.chip-content,
.sidebar .sidebar-body .chip li.active>a.chip-content,
.chip .sidebar .sidebar-body li:hover>a.chip-content,
.sidebar .sidebar-body .chip li:hover>a.chip-content,
.chip .fc-view>table thead th.chip-content.fc-day-header,
.fc-view>table thead .chip th.chip-content.fc-day-header,
.chip .notifications a:hover p.chip-content,
.notifications a:hover .chip p.chip-content,
.chip .news a:hover p.chip-content,
.news a:hover .chip p.chip-content,
.chip .chip-content.icon:hover,
.chip .select2-container--default .select2-selection--multiple .chip-content.select2-selection__choice,
.select2-container--default .select2-selection--multiple .chip .chip-content.select2-selection__choice,
.chip .chip-content.p_nav-link,
.chip .about-nav-tab a.chip-content.active,
.about-nav-tab .chip a.chip-content.active,
.chip .chip-content.iconwrap,
.chip .dragable-list>div.ui-sortable-helper i.chip-content,
.dragable-list>div.ui-sortable-helper .chip i.chip-content {
background-color: #e9e7ff;
}
.chip .chip-content.pink {
background-color: #fee7ff;
color: #e580fd;
}
.chip .chip-content.warn {
background-color: #fff4e6;
color: #ffb959;
}
.chip .chip-content.danger {
background-color: #ffe2e6;
color: #fc7383;
}
.chip .chip-content .img {
width: 30px;
height: 30px;
overflow: hidden;
position: absolute;
background-color: #f5f5f5;
border-color: #727272 !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
left: -0px;
top: -5px;
}
.chip .chip-content .img.pink {
background-color: #fee7ff;
color: #e580fd;
}
.chip .chip-content .img.info {
background-color: #ccf5f8;
color: #09d1de;
}
.chip .chip-content .img.success {
background-color: #dbf7e8;
color: #67cf94;
}
.chip .chip-content .img.c2,
.chip .chip-content a.img:hover,
.chip .chip-content .dropdown-menu .dropdown-body a:hover .img.main-text,
.dropdown-menu .dropdown-body a:hover .chip .chip-content .img.main-text,
.chip .chip-content .dropdown-menu.style--two .dropdown-body a:hover .img.time,
.dropdown-menu.style--two .dropdown-body a:hover .chip .chip-content .img.time,
.chip .chip-content .img.btn.preview,
.chip .chip-content #example-vertical>.actions ul li a.img.preview[href="#next"],
#example-vertical>.actions ul li .chip .chip-content a.img.preview[href="#next"],
.chip .chip-content #example-vertical>.actions ul li a.img.preview[href="#finish"],
#example-vertical>.actions ul li .chip .chip-content a.img.preview[href="#finish"],
.chip .chip-content .img.btn.style--two,
.chip .chip-content #example-vertical>.actions ul li a.img.style--two[href="#next"],
#example-vertical>.actions ul li .chip .chip-content a.img.style--two[href="#next"],
.chip .chip-content #example-vertical>.actions ul li a.img.style--two[href="#finish"],
#example-vertical>.actions ul li .chip .chip-content a.img.style--two[href="#finish"],
.chip .chip-content .img.btn.s_alert,
.chip .chip-content #example-vertical>.actions ul li a.img.s_alert[href="#next"],
#example-vertical>.actions ul li .chip .chip-content a.img.s_alert[href="#next"],
.chip .chip-content #example-vertical>.actions ul li a.img.s_alert[href="#finish"],
#example-vertical>.actions ul li .chip .chip-content a.img.s_alert[href="#finish"],
.chip .chip-content .img.details-btn,
.chip .chip-content .img.light-btn,
.chip .chip-content table.table-condensed thead tr:nth-child(2) th.img,
table.table-condensed thead tr:nth-child(2) .chip .chip-content th.img,
.chip .chip-content table.table-contextual .details-btn:hover i.img,
table.table-contextual .details-btn:hover .chip .chip-content i.img,
.chip .chip-content .sidebar .sidebar-body li.active>a.img,
.sidebar .sidebar-body .chip .chip-content li.active>a.img,
.chip .chip-content .sidebar .sidebar-body li:hover>a.img,
.sidebar .sidebar-body .chip .chip-content li:hover>a.img,
.chip .chip-content .fc-view>table thead th.img.fc-day-header,
.fc-view>table thead .chip .chip-content th.img.fc-day-header,
.chip .chip-content .notifications a:hover p.img,
.notifications a:hover .chip .chip-content p.img,
.chip .chip-content .news a:hover p.img,
.news a:hover .chip .chip-content p.img,
.chip .chip-content .img.icon:hover,
.chip .chip-content .select2-container--default .select2-selection--multiple .img.select2-selection__choice,
.select2-container--default .select2-selection--multiple .chip .chip-content .img.select2-selection__choice,
.chip .chip-content .img.p_nav-link,
.chip .chip-content .about-nav-tab a.img.active,
.about-nav-tab .chip .chip-content a.img.active,
.chip .chip-content .img.iconwrap,
.chip .chip-content .dragable-list>div.ui-sortable-helper i.img,
.dragable-list>div.ui-sortable-helper .chip .chip-content i.img {
background-color: #e9e7ff;
color: #8280fd;
border-color: #8280fd !important;
}
.chip .chip-content .img.danger {
background-color: #ffe2e6;
color: #fc7383;
}
.color-circle {
width: 100px;
height: 100px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* ************************
08.2: Icons
********************* */
.icon {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.icon i {
font-size: 24px;
}
.icon__name {
line-height: 1;
margin-left: 14px;
position: relative;
text-transform: lowercase;
}
/* ************************
09.1: Faq
********************* */
.topic {
height: 80px;
color: #e580fd;
background-color: #fee7ff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 5px;
margin-bottom: 20px;
}
.faq:not(:last-child) {
margin-bottom: 35px;
}
.faq h5 {
position: relative;
padding-left: 20px;
margin-bottom: 16px;
line-height: 1.2;
}
.faq h5:after {
width: 10px;
height: 10px;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
content: "";
position: absolute;
}
/* ************************
09.2: Price
********************* */
.price-box.active {
-webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.05);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.05);
}
.price-header {
background-color: #09d1de;
}
.price-header.enterprise {
background-color: #c491ff;
}
.p_header-img,
.p_header-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 5px;
}
.p_header-img {
background-color: rgba(255, 255, 255, 0.15);
width: 160px;
height: 160px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media only screen and (max-width: 479px) {
.p_header-img {
width: 140px;
height: 140px;
}
}
.p_header-content {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 30px;
}
@media only screen and (max-width: 479px) {
.p_header-content {
padding-left: 14px;
}
}
.p_header-content h1 {
margin-bottom: 3px;
}
.p_header-content h3 {
margin-bottom: 5px;
}
.p_header-content h3,
.p_header-content p {
opacity: 0.7;
}
.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: 1023px) {
#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: 1023px) {
.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: 1023px) {
.maintenance-img {
margin-left: 0;
}
}
.maintenance-content {
padding-top: 176px;
margin-bottom: 167px;
}
@media only screen and (max-width: 767px) {
.maintenance-content {
padding-top: 100px;
}
}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.maintenance-content {
width: 900px;
margin-left: -400px;
}
}
/* Session Timeout */
.session-timeout {
width: 300px;
padding: 40px 20px;
text-align: center;
}
.session-timeout #circular {
margin: 0 auto;
display: inline-block;
}
.base-timer {
position: relative;
width: 150px;
height: 150px;
}
.base-timer__svg {
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
.base-timer__circle {
fill: none;
stroke: none;
}
.base-timer__path-elapsed {
stroke-width: 3px;
stroke: #f5f5f5;
}
.base-timer__path-remaining {
stroke-width: 3px;
stroke-linecap: round;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transition: 1s linear all;
-o-transition: 1s linear all;
transition: 1s linear all;
fill-rule: nonzero;
stroke: currentColor;
}
.base-timer__path-remaining.c2,
a.base-timer__path-remaining:hover,
.dropdown-menu .dropdown-body a:hover .base-timer__path-remaining.main-text,
.dropdown-menu.style--two .dropdown-body a:hover .base-timer__path-remaining.time,
.base-timer__path-remaining.btn.preview,
#example-vertical>.actions ul li a.base-timer__path-remaining.preview[href="#next"],
#example-vertical>.actions ul li a.base-timer__path-remaining.preview[href="#finish"],
.base-timer__path-remaining.btn.style--two,
#example-vertical>.actions ul li a.base-timer__path-remaining.style--two[href="#next"],
#example-vertical>.actions ul li a.base-timer__path-remaining.style--two[href="#finish"],
.base-timer__path-remaining.btn.s_alert,
#example-vertical>.actions ul li a.base-timer__path-remaining.s_alert[href="#next"],
#example-vertical>.actions ul li a.base-timer__path-remaining.s_alert[href="#finish"],
.base-timer__path-remaining.details-btn,
.base-timer__path-remaining.light-btn,
table.table-condensed thead tr:nth-child(2) th.base-timer__path-remaining,
table.table-contextual .base-timer__path-remaining.details-btn:hover,
table.table-contextual .details-btn:hover i.base-timer__path-remaining,
.sidebar .sidebar-body li.active>a.base-timer__path-remaining,
.sidebar .sidebar-body li:hover>a.base-timer__path-remaining,
.fc-view>table thead th.base-timer__path-remaining.fc-day-header,
.notifications a:hover p.base-timer__path-remaining,
.news a:hover p.base-timer__path-remaining,
.base-timer__path-remaining.icon:hover,
.select2-container--default .select2-selection--multiple .base-timer__path-remaining.select2-selection__choice,
.base-timer__path-remaining.p_nav-link,
.about-nav-tab a.base-timer__path-remaining.active,
.base-timer__path-remaining.iconwrap,
.dragable-list>div.ui-sortable-helper i.base-timer__path-remaining {
color: #8280fd;
}
.base-timer__label,
.base-timer__text {
position: absolute;
width: 150px;
height: 150px;
top: -15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 36px;
}
.base-timer__text {
font-size: 14px;
top: 15px;
text-transform: uppercase;
}
#modalSessionTimeout .modal-dialog {
max-width: 300px;
}
/* ************************
09.8: Profile
********************* */
.profile-pic .upload-button,
.cover-img .upload-button {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
right: 20px;
bottom: 20px;
padding: 8px 15px;
z-index: 1;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
@media only screen and (max-width: 767px) {
.profile-pic .upload-button,
.cover-img .upload-button {
padding: 5px 10px;
right: 10px;
bottom: 5px;
font-size: 12px;
}
.profile-pic .upload-button svg,
.cover-img .upload-button svg {
width: 16px;
margin-right: 5px !important;
}
}
.profile-pic .upload-button .file-input,
.cover-img .upload-button .file-input {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
.profile-pic {
position: relative;
width: 220px;
height: 250px;
margin-top: -164px;
}
@media only screen and (max-width: 767px) {
.profile-pic {
width: 120px;
height: 150px;
margin-top: -60px;
}
}
.profile-pic .upload-button {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
right: 20px;
bottom: 20px;
padding: 8px 15px;
z-index: 1;
}
@media only screen and (max-width: 767px) {
.profile-pic .upload-button {
padding: 5px 10px;
right: 0;
bottom: 5px;
font-size: 12px;
}
}
.profile-pic .upload-button .file-input {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
.profile-pic img {
z-index: 5;
border: 6px solid #ffffff;
}
.profile-pic:after {
width: calc(100% - 12px);
height: calc(100% - 12px);
left: 6px;
top: 6px;
position: absolute;
content: "";
background-color: rgba(0, 0, 0, 0.4);
opacity: 0;
}
.profile-pic .upload-button {
opacity: 0;
right: 15px;
}
.profile-pic:hover:after {
opacity: 1;
}
.profile-pic:hover .upload-button {
opacity: 1;
right: 20px;
}
@media only screen and (max-width: 767px) {
.profile-pic:hover .upload-button {
right: 5px;
}
}
.cover-img {
position: relative;
}
.cover-img:after {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
content: "";
background-color: rgba(0, 0, 0, 0.4);
opacity: 0;
}
.cover-img .upload-button {
opacity: 0;
bottom: 10px;
}
.cover-img:hover:after {
opacity: 1;
}
.cover-img:hover .upload-button {
opacity: 1;
bottom: 20px;
}
.user-profile-nav {
position: relative;
}
.user-profile-nav .profile-info h3 {
margin-bottom: 6px;
}
.user-profile-nav .profile-info p {
line-height: 1;
}
.profile-nav-tabs {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.profile-nav-tabs li a {
padding: 0px 30px;
}
@media only screen and (max-width: 767px) {
.profile-nav-tabs li a {
padding: 0 15px;
}
}
.profile-nav-tabs li .chat {
width: 40px;
height: 40px;
background-color: #e9e7ff;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.profile-nav-tabs li .conncetion {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.p_nav-link {
display: block;
position: relative;
font-size: 14px;
line-height: 86px;
}
@media only screen and (min-width: 0px) and (max-width: 1500px) {
.p_nav-link {
line-height: 60px;
}
}
.p_nav-link.active {
background-color: #e9e7ff;
}
.p_nav-link:after {
position: absolute;
right: 0;
width: 3px;
height: 100%;
top: 0;
background-color: #f0f0f0;
content: "";
}
.p_nav-link.has-before:before {
position: absolute;
left: 0;
width: 3px;
height: 100%;
top: 0;
background-color: #f0f0f0;
content: "";
}
.profile-completion {
background-color: #ffe2e6;
padding: 20px 30px;
}
@media only screen and (max-width: 575px) {
.profile-completion {
padding: 15px;
}
}
.info-list li {
margin-bottom: 13px;
}
.info-list li span {
width: 33%;
font-weight: 400;
display: inline-block;
font-size: 15px;
}
.p_info-list li {
margin-bottom: 12px;
}
.skill-list li {
margin-bottom: 24px;
}
.skill-list li span {
width: 136px;
display: inline-block;
}
.todays-evnet ul {
padding: 26px 0 29px;
}
.todays-evnet ul li {
padding-left: 20px;
padding-right: 20px;
}
.todays-evnet ul li:not(:first-child) {
padding-top: 11px;
}
.todays-evnet ul li:not(:last-child) {
padding-bottom: 13px;
}
.todays-evnet ul li h5 {
margin-bottom: 9px;
line-height: 1.3;
}
.news-card {
padding: 25px 0px;
}
.news-card>a {
padding-left: 20px;
padding-right: 20px;
}
.profile-widget-header {
padding: 10px 20px;
}
/* About */
.about-tab-content {
border-left: 1px solid #aeaeae;
}
@media only screen and (max-width: 767px) {
.about-tab-content {
border: none;
}
}
@media only screen and (max-width: 767px) {
.about-nav-tab {
border-bottom: 1px solid #aeaeae;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.about-nav-tab a {
display: block;
margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
.about-nav-tab a {
padding: 5px 10px;
margin-bottom: 5px;
font-weight: 500;
}
}
.p_overview-list li,
.p_work-list li,
.p_education-list li {
margin-bottom: 20px;
}
.p_overview-list li .img,
.p_work-list li .img,
.p_education-list li .img {
width: 32px;
min-width: 32px;
}
.p_overview-list li .hover-to-show,
.p_work-list li .hover-to-show,
.p_education-list li .hover-to-show {
cursor: pointer;
}
.p_overview-list li .dropdown-button,
.p_work-list li .dropdown-button,
.p_education-list li .dropdown-button {
opacity: 0;
min-width: 64px;
margin-left: 10px;
}
@media only screen and (max-width: 767px) {
.p_overview-list li .dropdown-button,
.p_work-list li .dropdown-button,
.p_education-list li .dropdown-button {
margin-left: 46px;
margin-top: 5px;
opacity: 1;
}
}
.p_overview-list li .dropdown-button.show,
.p_work-list li .dropdown-button.show,
.p_education-list li .dropdown-button.show {
opacity: 1;
}
.p_overview-list li:hover .dropdown-button,
.p_work-list li:hover .dropdown-button,
.p_education-list li:hover .dropdown-button {
opacity: 1;
}
.iconwrap {
border: 1px dashed #8280fd;
width: 32px;
height: 32px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.add-workplace {
cursor: pointer;
position: relative;
z-index: 2;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.add-work-form,
.work-update-form {
position: relative;
padding: 10px 5px;
z-index: 3;
}
.add-work-form .form-control,
.add-work-form .theme-input-style,
.add-work-form .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .add-work-form input,
.add-work-form .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter .add-work-form select,
.add-work-form .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length .add-work-form input,
.add-work-form .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length .add-work-form select,
.work-update-form .form-control,
.work-update-form .theme-input-style,
.work-update-form .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .work-update-form input,
.work-update-form .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter .work-update-form select,
.work-update-form .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length .work-update-form input,
.work-update-form .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length .work-update-form select {
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: 1023px) {
.add-work-form .add-work-form-close,
.work-update-form .add-work-form-close {
top: -20px;
}
}
.work-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media only screen and (max-width: 575px) {
.work-content {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
/* User Dashboard */
.project-deadline {
padding: 21px;
}
.project-deadline p {
color: #cac6fb;
}
.statistics-bounce-rate {
background-color: #09d1de;
padding: 30px;
}
.statistics-bounce-rate .state-content {
margin-right: 14px;
}
.statistics-bounce-rate .state-content p {
color: rgba(255, 255, 255, 0.7);
}
.statistics-bounce-rate .state-content h3 {
font-size: 30px;
}
.statistics-bounce-rate.order {
background-color: #4f9df8;
}
.statistics-bounce-rate.report {
background-color: #e580fd;
}
.statistics-bounce-rate.support {
background-color: #ffb959;
}
.latest-update>a {
padding: 10px 0;
}
/* Edit Profile */
.about-myself textarea {
line-height: 1.42;
height: 100px;
}
.edit-personal-info .form-control {
height: 30px;
}
.edit-skill .form-control {
width: 60px;
margin-right: 10px;
height: 30px;
}
.edit-skill .process-bar-wrapper .process-bar {
max-width: 100%;
}
/* News Feed */
.post-controls>div {
width: 30px;
height: 30px;
background-color: #ecf3fd;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.post-controls>div.location {
margin-right: 30px;
}
@media only screen and (max-width: 479px) {
.post-controls>div.location {
margin-right: 16px;
}
}
.post-body p {
margin-bottom: 26px;
}
.post-body .img.collage .big {
-ms-flex-preferred-size: calc(67% - 20px);
flex-basis: calc(67% - 20px);
}
.post-body .img.collage .small {
-ms-flex-preferred-size: 33%;
flex-basis: 33%;
}
.post-footer>div {
cursor: pointer;
}
.post-footer .love:hover svg path {
fill: #e9e7ff;
stroke: #8280fd;
}
.post-footer>div:not(:last-child) {
margin-right: 50px;
}
@media only screen and (max-width: 575px) {
.post-footer>div:not(:last-child) {
margin-right: 20px;
}
}
.post-footer>div .icon {
margin-right: 10px;
}
@media only screen and (max-width: 575px) {
.post-footer>div .icon {
margin-right: 6px;
width: 12px;
}
.post-footer>div .content {
font-size: 12px;
}
}
#projectTaskDetailsMain .comments-area {
padding-top: 30px;
}
.comments-area {
border-top: 1px solid #f5f5f5;
}
.comments-area ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.comments-area .single-comment {
padding-bottom: 15px;
margin-bottom: 15px;
}
@media only screen and (max-width: 479px) {
.comments-area .single-comment {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.comments-area .single-comment .comment-content p {
margin: 8px 0;
}
.comments-area .single-comment .comment-author-image {
margin-bottom: 12px;
}
.comments-area ul.children {
margin-left: 70px;
}
@media only screen and (max-width: 479px) {
.comments-area ul.children {
margin-left: 15px;
}
}
/* ************************
10.1: Extensions
********************* */
/* Sweet Alert */
.s_alert-cat {
min-width: 160px;
}
/* noUi Slider */
.nouislider-cat {
margin: 0;
min-width: 320px;
}
@media only screen and (max-width: 767px) {
.nouislider-cat {
min-width: 220px;
padding-right: 10px;
}
}
@media only screen and (max-width: 479px) {
.nouislider-cat {
min-width: 100%;
padding-right: 0px;
}
}
.s_text {
min-width: 90px;
display: inline-block;
}
/* Drag & Drop */
.dragable-card {
padding: 28px 30px 25px;
background-color: #ecf3fd;
margin-bottom: 30px;
}
@media only screen and (max-width: 379px) {
.dragable-card {
padding: 18px 20px 15px;
}
}
.dragable-card h4 {
color: #4f9df8;
}
.dragable-card.dragable-card-yellow {
background-color: #fff4e6;
}
.dragable-card.dragable-card-yellow h4 {
color: #ffb959;
}
.dragable-card.dragable-card-red {
background-color: #ffe2e6;
}
.dragable-card.dragable-card-red h4 {
color: #fc7383;
}
.dragable-card.dragable-card-green {
background-color: #dbf7e8;
}
.dragable-card.dragable-card-green h4 {
color: #67cfa2;
}
#dragable-product-list .product-list-item {
background-color: #f0f0f0;
}
#dragable-product-list .product-list-item:not(:last-child) {
margin-bottom: 10px;
}
.dragable-team>div {
background-color: #f0f0f0;
padding: 10px;
}
.dragable-team>div:not(:last-child) {
margin-bottom: 3px;
}
.dragable-btn a {
margin-bottom: 10px;
}
.dragable-btn a:not(:last-child) {
margin-right: 30px;
}
@media only screen and (max-width: 1399px) {
.dragable-btn a:not(:last-child) {
margin-right: 15px;
}
}
@media only screen and (max-width: 1023px) {
.dragable-btn a:not(:last-child) {
margin-right: 10px;
}
}
.dragable-list>div {
border-bottom: 1px solid #f5f5f5;
padding: 20px;
}
@media only screen and (max-width: 479px) {
.dragable-list>div {
padding: 15px 0;
}
}
.dragable-list>div svg,
.dragable-list>div i {
margin-right: 16px;
cursor: all-scroll;
min-width: 20px;
}
.dragable-list>div.ui-sortable-helper {
-webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
border-color: transparent;
}
.dragable-list>div.ui-sortable-helper svg path#Path_365 {
fill: #8280fd;
}
/* Tour */
.shepherd-element {
-webkit-filter: none;
filter: none;
-webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}
.shepherd-element .shepherd-content {
background: #ccf5f8;
}
.tippy-popper[x-placement^="bottom"] .tippy-arrow {
border-bottom-color: #ccf5f8;
}
.shepherd-element .shepherd-content footer .shepherd-buttons {
margin-top: 10px;
}
.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button {
background: transparent;
color: #09d1de;
text-transform: capitalize;
padding: 5px 26px;
}
.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button svg,
.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button img {
position: relative;
top: -1px;
}
.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.text-danger svg,
.shepherd-element .shepherd-content footer .shepherd-buttons li .select2-container--default .select2-selection--multiple .select2-selection__choice button.shepherd-button svg,
.select2-container--default .select2-selection--multiple .select2-selection__choice .shepherd-element .shepherd-content footer .shepherd-buttons li button.shepherd-button svg,
.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.base-timer__path-remaining.danger svg,
.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.text-danger img,
.shepherd-element .shepherd-content footer .shepherd-buttons li .select2-container--default .select2-selection--multiple .select2-selection__choice button.shepherd-button img,
.select2-container--default .select2-selection--multiple .select2-selection__choice .shepherd-element .shepherd-content footer .shepherd-buttons li button.shepherd-button img,
.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button.base-timer__path-remaining.danger img {
top: -2px;
}
.shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button:hover {
background: transparent;
}
/* Swiper Slider */
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.swiper-slide img {
width: 100%;
}
.swiper-multi-row .swiper-slide {
height: calc((100% - 30px) / 2);
}
.swiper-pagination-fraction {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.swiper-pagination-fraction .swiper-pagination-current {
display: block;
}
.swiper-button-prev.page-prev,
.swiper-button-next.page-next {
margin: 0;
height: 14px;
}
.swiper-button-prev.page-prev:after,
.swiper-button-next.page-next:after {
font-size: 14px;
height: 14px;
}
.swiper-centered-slide~.swiper-button-prev {
left: 0;
margin-top: 7px !important;
}
.swiper-centered-slide~.swiper-button-next {
right: 0;
margin-top: 7px !important;
}
.swiper-centered-slide~.swiper-button-prev,
.swiper-centered-slide~.swiper-button-next {
margin: 0;
height: 14px;
}
.swiper-centered-slide~.swiper-button-prev:after,
.swiper-centered-slide~.swiper-button-next:after {
font-size: 14px;
height: 14px;
}
.swiper-centered-slide .topic {
height: 130px;
}
.swiper-container-horizontal>.swiper-pagination-progressbar {
top: auto;
bottom: 0;
background: #e9e7ff;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #8280fd;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 600px;
width: 100%;
}
@media only screen and (max-width: 767px) {
.gallery-top {
height: 400px;
}
}
@media only screen and (max-width: 575px) {
.gallery-top {
height: 250px;
}
}
.gallery-thumbs {
height: 80px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
bottom: 20px;
width: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
@media only screen and (min-width: 0px) and (max-width: 1300px) {
.gallery-thumbs {
height: 60px;
}
}
@media only screen and (max-width: 767px) {
.gallery-thumbs {
width: 80%;
height: 40px;
}
}
.gallery-thumbs .swiper-slide {
height: 100%;
border: 4px solid #fff;
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.swiper-multi-row {
height: 700px;
}
@media only screen and (min-width: 0px) and (max-width: 1500px) {
.swiper-multi-row {
height: 380px;
}
}
/* Treeview */
.treeview .list-group-item {
cursor: pointer;
}
.treeview span.indent {
margin-left: 10px;
margin-right: 10px;
}
.treeview .node-disabled {
color: silver;
cursor: not-allowed;
}
.treeview .list-group-item {
border-top: 0px solid;
border-left: 0px solid;
border-right: 0px solid;
padding: 10px 0;
}
.treeview .list-group-item:last-child {
border-bottom: 0px solid;
}
.treeview .list-group-item .badge {
display: inline-block;
margin-left: 20px;
}
.treeview .list-group-item .badge:before,
.treeview .list-group-item .badge:after {
top: -1px;
position: relative;
content: "(";
}
.treeview .list-group-item .badge:after {
content: ")";
}
/* Block UI */
.blockUI.blockOverlay {
z-index: 999999 !important;
}
.blockUI.blockMsg.blockElement {
z-index: 9999991 !important;
}
.blockUI.blockMsg.blockElement>span,
.blockUI.blockMsg.blockElement>div {
display: block;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.blockUI.blockMsg.blockPage {
z-index: 9999991 !important;
}
.icon-spin {
-webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
display: inline-block;
}
/* Change Language */
.card-localization .card-text {
line-height: 1.733;
}
/* ************************
11.1: Plugins
********************* */
.app-items {
padding-right: 15px;
}
@media (max-width: 575px) {
.app-items {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.app-items .app-item {
background-color: #fff;
}
@media (max-width: 1399px) {
.app-items .app-item {
-ms-flex-preferred-size: 23%;
flex-basis: 23%;
}
}
@media (max-width: 1199px) {
.app-items .app-item {
-ms-flex-preferred-size: 31%;
flex-basis: 31%;
}
}
@media (max-width: 767px) {
.app-items .app-item {
-ms-flex-preferred-size: 48%;
flex-basis: 48%;
}
}
.app-items .app-item .app-icon {
background-color: #6045e2;
display: block;
margin: 0 auto;
overflow: hidden img;
/* overflow-max-width: 100%; */
}
.app-items .app-item .app-details {
padding: 10px 10px 5px;
}
.app-items .app-item .app-details .app-name {
color: #333;
font-size: 14px;
font-weight: 700;
line-height: inherit;
margin: 0 0 5px;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-items .app-item .app-footer {
border-top: 1px solid #e8e8e8;
padding: 10px 10px 12px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
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-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.app-items .app-item .app-footer .app-description {
color: #aaa;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 3px;
}
.app-items .app-item .app-footer .app-actions {
margin-top: 10px;
}
.app-items .app-item .app-version,
.app-items .app-item .app-author {
margin-bottom: 3px;
}
.app-items .app-item:hover .app-name {
color: #6045e2;
}
/* ************************
11.2: Media
********************* */
.attachment-wrap {
min-height: 69vh;
}
.attachment-wrap .attachment {
padding: 20px;
background-color: #fff;
}
.media-sidebar {
padding: 20px 16px;
-webkit-border-start: 1px solid #dcdcde;
border-inline-start: 1px solid #dcdcde;
background-color: #fff;
position: fixed;
width: 300px;
right: 0;
top: 0;
height: 100%;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 9999;
-webkit-box-shadow: 0px 1px 50px rgba(0, 0, 0, 0.25);
box-shadow: 0px 1px 50px rgba(0, 0, 0, 0.25);
overflow: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.media-sidebar.active {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
.media-sidebar .attachment-insert {
background: #fff;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.media-toolbar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.media-filter-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 15px;
}
.all-attachments ul {
margin-block: 20px;
gap: 10px;
display: grid;
grid-template-columns: repeat(10, 1fr);
}
@media (max-width: 1399px) {
.all-attachments ul {
grid-template-columns: repeat(7, 1fr);
}
}
@media (max-width: 1199px) {
.all-attachments ul {
grid-template-columns: repeat(6, 1fr);
}
}
@media (max-width: 767px) {
.all-attachments ul {
grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 575px) {
.all-attachments ul {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 479px) {
.all-attachments ul {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 379px) {
.all-attachments ul {
grid-template-columns: repeat(2, 1fr);
}
}
.all-attachments ul li {
position: relative;
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 #dcdcde;
background-color: #f5f5f5;
cursor: pointer;
-webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1),
inset 0 0 0 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1),
inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.all-attachments ul li:after {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #000;
content: "";
opacity: 0;
z-index: 1;
}
.all-attachments ul li .check {
position: absolute;
width: 24px;
height: 24px;
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;
background-color: #6045e2;
color: #fff;
z-index: -1;
opacity: 0;
border: 2px solid #fff;
}
.all-attachments ul li .check .icon-minus {
display: none;
}
.all-attachments ul li .check:hover .icon-minus {
display: inline-block;
}
.all-attachments ul li .check:hover .icon-check {
display: none;
}
.all-attachments ul li.selected {
-webkit-box-shadow: 0 0 2px 3px #6045e2, inset 0 0 0 7px #fff;
box-shadow: 0 0 2px 3px #6045e2, inset 0 0 0 7px #fff;
border-color: #fff;
}
.all-attachments ul li.selected:after {
opacity: 0.3;
}
.all-attachments ul li.selected .check {
opacity: 1;
z-index: 2;
}
.attachment-info {
overflow: hidden;
min-height: 120px;
margin-bottom: 16px;
line-height: 1.5;
color: #646970;
border-bottom: 1px solid #dcdcde;
padding-bottom: 11px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
font-size: 12px;
}
.attachment-info .thumbnail img {
min-width: 120px;
width: 120px;
height: 120px;
}
button.btn-link {
background-color: transparent;
padding: 0;
color: #6045e2;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.attachment-meta-wrap {
font-size: 12px;
}
.attachment-meta-wrap input,
.attachment-meta-wrap textarea {
font-size: 12px;
height: 28px;
}
.attachment-meta-wrap textarea {
height: 62px;
}
.attachment-meta-wrap .setting {
display: grid;
grid-template-columns: 70px 1fr;
gap: 15px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.attachment-meta-wrap .setting label {
text-align: end;
}
.attachment-meta-wrap .description {
padding-left: 85px;
}
.copy-to-clipboard-container {
grid-column: 1/-1;
}
.media-sidebar-close>i {
font-size: 24px;
cursor: pointer;
}
.modal-dialog.modal-full {
max-width: 100%;
margin: 30px;
}
@media (max-width: 575px) {
.modal-dialog.modal-full {
margin: 14px;
}
}
.media-img-single-preview {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media only screen and (max-width: 1023px) {
.media-img-single-preview {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 767px) {
.media-img-single-preview {
grid-template-columns: 1fr;
}
}
.media-img-single-preview .attachment-meta-wrap {
border-left: 1px solid #dcdcde;
padding: 0 20px;
}
@media only screen and (max-width: 767px) {
.media-img-single-preview .attachment-meta-wrap {
border-left: 0;
padding: 0;
}
}
.media-img-single-preview .preview-image {
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;
}
.attachment-actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px;
}
.media-nav-wrap>span {
border: 1px solid #dcdcde;
padding: 5px;
cursor: pointer;
}
.payment-method-item-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.payment-method-item-header .payment-icon {
font-size: 48px;
border-right: 1px solid #dcdcde;
padding-right: 12px;
margin-right: 20px;
}
.payment-method-item-header .payment-logo img {
width: 100px;
}
.payment-method-item-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media only screen and (max-width: 767px) {
.payment-method-item-body {
grid-template-columns: 1fr;
}
}
@media only screen and (max-width: 400px) {
.payment-method-item-header .payment-icon {
display: none;
margin-left: 0 !important;
}
.payment-method-item-header {
padding: 10px 0;
}
}
/* ************************
11.3: Theme Option
********************* */
.theme-option-tab-wrap {
display: grid;
grid-template-columns: 260px 1fr;
background-color: #fff;
}
.theme-option-tab-wrap .nav-link {
font-size: 15px;
color: #333333;
}
.theme-option-tab-wrap .nav-link i {
margin-right: 7px;
font-size: 18px;
color: #aeaeae;
}
.theme-option-tab-wrap .nav-link.active,
.theme-option-tab-wrap .nav-link:hover {
color: #6045e2;
}
.theme-option-tab-wrap .nav-link.active i,
.theme-option-tab-wrap .nav-link:hover i {
color: #6045e2;
}
@media only screen and (max-width: 767px) {
.theme-option-tab-wrap .nav-link span {
display: none;
}
}
.preview-image-wrapper {
position: relative;
display: inline-block;
border: 1px solid #dcdcde;
background-color: #F0F0F0;
}
.preview-image-wrapper .remove-btn {
position: absolute;
right: -5px;
top: -5px;
}
.preview-image-wrapper img.preview_image {
width: 100px;
height: 100px;
-o-object-fit: contain;
object-fit: contain;
}
.colorpicker-element {
display: grid;
grid-template-columns: 1fr 80px;
gap: 10px;
}
.list-gallery-media-images {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
gap: 10px;
}
.list-gallery-media-images .list-photo-hover-overlay {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
opacity: 0;
visibility: hidden;
}
.list-gallery-media-images .preview-image-wrapper {
display: block;
}
.list-gallery-media-images .preview-image-wrapper img.preview_image {
width: 100%;
height: auto;
}
.list-gallery-media-images .photo-overlay-actions {
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
bottom: 20px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
.list-gallery-media-images .photo-overlay-actions a {
position: relative;
z-index: 2;
cursor: pointer;
font-size: 18px;
}
.list-gallery-media-images .gallery-image-item-handler {
position: relative;
}
.list-gallery-media-images .gallery-image-item-handler:hover .list-photo-hover-overlay {
opacity: 1;
visibility: visible;
}
/* ************************
11.4: POS
********************* */
/* Product Grid Style */
@media (min-width: 768px) {
.pos-cart-details-wrap {
border-left: 1px solid #f5f5f5;
padding-left: 20px;
}
}
.pos-page-grid {
display: grid;
grid-template-columns: 1fr 460px;
gap: 20px;
}
@media only screen and (max-width: 767px) {
.pos-page-grid {
grid-template-columns: 1fr;
}
}
.product-grid-style {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
max-height: 65vh;
overflow: auto;
}
.pos-cart-list {
max-height: 40vh;
overflow: auto;
}
.pos-cart-list .list-item {
display: grid;
grid-template-columns: 85px 2fr 1fr 30px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid #f5f5f5;
}
.toggle-fullscreen {
cursor: pointer;
}
.pos-top-button {
font-size: 18px;
gap: 20px;
}
.pos-top-button>div {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pos-top-button>div.header-toogle-menu {
inline-size: 18px;
}
/* Calculator */
.clearfix {
clear: both;
}
.calculator {
background: #e7e5e4;
inline-size: 286px;
padding: 0 10px 10px 10px;
border: 1px solid #dcdcde;
border-radius: 6px;
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
font-family: "digital";
}
.calculator .wrapper {
position: relative;
inline-size: 264px;
margin: 0 auto;
}
.calculator .logo {
font-size: 0.5em;
text-align: center;
color: #8c8c8c;
margin: 5px auto;
}
.calculator .display {
font-family: "digital";
color: #504c49;
position: relative;
border: 3px inset #fff;
-webkit-margin-after: 15px;
margin-block-end: 15px;
inline-size: 258px;
border-radius: 8px;
}
.calculator #mem-indicator {
font-size: 1.4em;
position: absolute;
inset-block-start: 6px;
inset-inline-start: 8px;
}
.calculator input {
font-family: inherit;
padding: 0.05em 8px;
letter-spacing: 0.02em;
font-size: 2.5em;
text-align: end;
inline-size: 251px;
background-color: #c8caaf;
border: 3px solid #544b45;
border-radius: 5px;
}
.calculator button {
display: block;
float: left;
margin: 4px;
inline-size: 58px;
block-size: 40px;
font-size: 1.25em;
border-radius: 6px;
-webkit-tap-highlight-color: transparent;
}
.calculator #double-width-btn {
inline-size: 124px;
}
.calculator #double-height-btn {
block-size: 86px;
}
.calculator button:focus,
.calculator button:hover {
outline: 0;
}
.calculator button:active {
-webkit-box-shadow: none;
box-shadow: none;
}
.calculator .mem-key {
font-size: 1em;
background-image: -webkit-gradient(linear,
left bottom,
left top,
from(#484642),
to(#5d5a56));
background-image: -o-linear-gradient(bottom, #484642, #5d5a56);
background-image: linear-gradient(to top, #484642, #5d5a56);
color: #fefcf7;
border: 1px solid #827d7d;
-webkit-box-shadow: 1px 6px 2px 0px rgba(0, 0, 0, 0.06);
box-shadow: 1px 6px 2px 0px rgba(0, 0, 0, 0.06);
}
.calculator .mem-key:active {
background-image: -webkit-gradient(linear,
left top,
left bottom,
from(#55534e),
to(#62605b));
background-image: -o-linear-gradient(top, #55534e, #62605b);
background-image: linear-gradient(to bottom, #55534e, #62605b);
}
.calculator .numbers {
background-image: -webkit-gradient(linear,
left bottom,
left top,
from(#e6e6e5),
to(#f3f2f2));
background-image: -o-linear-gradient(bottom, #e6e6e5, #f3f2f2);
background-image: linear-gradient(to top, #e6e6e5, #f3f2f2);
color: #5e5955;
border: 1px solid #b4b3b1;
-webkit-box-shadow: 1px 6px 2px 0px rgba(0, 0, 0, 0.04);
box-shadow: 1px 6px 2px 0px rgba(0, 0, 0, 0.04);
}
.calculator .numbers:active {
background-image: -webkit-gradient(linear,
left top,
left bottom,
from(#e6e6e5),
to(#f3f2f2));
background-image: -o-linear-gradient(top, #e6e6e5, #f3f2f2);
background-image: linear-gradient(to bottom, #e6e6e5, #f3f2f2);
}
.calculator .op-key {
background-image: -webkit-gradient(linear,
left bottom,
left top,
from(#8c8c8c),
to(#999999));
background-image: -o-linear-gradient(bottom, #8c8c8c, #999999);
background-image: linear-gradient(to top, #8c8c8c, #999999);
color: #fefcf7;
border: 1px solid #827d7d;
-webkit-box-shadow: 1px 6px 2px 0px rgba(0, 0, 0, 0.06);
box-shadow: 1px 6px 2px 0px rgba(0, 0, 0, 0.06);
}
.calculator .op-key:active {
background-image: -webkit-gradient(linear,
left top,
left bottom,
from(#8c8c8c),
to(#999999));
background-image: -o-linear-gradient(top, #8c8c8c, #999999);
background-image: linear-gradient(to bottom, #8c8c8c, #999999);
}
.calculator .eq {
background-image: -webkit-gradient(linear,
left bottom,
left top,
from(#f27b5a),
to(#f49176));
background-image: -o-linear-gradient(bottom, #f27b5a, #f49176);
background-image: linear-gradient(to top, #f27b5a, #f49176);
color: #fefcf7;
border: 1px solid #928e8b;
-webkit-box-shadow: 1px 6px 2px 0px rgba(0, 0, 0, 0.06);
box-shadow: 1px 6px 2px 0px rgba(0, 0, 0, 0.06);
position: absolute;
inset-block-end: 0px;
inset-inline-end: 0px;
}
.calculator .eq:active {
background-image: -webkit-gradient(linear,
left top,
left bottom,
from(#f27b5a),
to(#f49176));
background-image: -o-linear-gradient(top, #f27b5a, #f49176);
background-image: linear-gradient(to bottom, #f27b5a, #f49176);
}
.after-none:after {
display: none !important;
}
.pos-bottom-bar {
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px;
padding: 10px 15px;
-webkit-box-shadow: 10px -10px 30px rgba(0, 0, 0, 0.05);
box-shadow: 10px -10px 30px rgba(0, 0, 0, 0.05);
z-index: 9999;
}
.pos-bottom-bar .toggle-button:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
@media only screen and (max-width: 1023px) {
.pos-bottom-bar .toggle-button {
position: absolute;
width: 30px;
height: 30px;
right: 15px;
top: -30px;
}
}
.pos-bottom-bar.hide {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.pos-bottom-bar.hide .toggle-button {
-webkit-transform: translateY(-126%) rotate(180deg);
-ms-transform: translateY(-126%) rotate(180deg);
transform: translateY(-126%) rotate(180deg);
}
@media only screen and (max-width: 1023px) {
.pos-bottom-bar.hide .toggle-button {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
/* ************************
11.5: Menus
********************* */
.menu-management-frame {
display: grid;
grid-template-columns: 300px 1fr;
}
.menu-management-frame .card-header button {
color: #333;
font-weight: 600;
}
.menu-management-frame .card-header button:hover {
text-decoration: none;
}
/* Accordion */
.accordion .accordion-title {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.03);
padding: 10px 20px;
-webkit-border-after: 1px solid #f0f0f0;
border-block-end: 1px solid #f0f0f0;
}
.accordion .accordion-content {
padding: 20px;
-webkit-border-after: 1px solid #f0f0f0;
border-block-end: 1px solid #f0f0f0;
}
/* Small Tabs */
.nav-tabs .nav-link {
color: #333;
}
.small-tabs {
font-size: 14px;
}
.small-tabs .nav-link {
padding: 5px 12px;
}
.item-check-list {
-webkit-padding-before: 16px;
padding-block-start: 16px;
-webkit-padding-after: 6px;
padding-block-end: 6px;
max-block-size: 190px;
overflow: auto;
}
.item-check-list li:not(:last-child) {
margin-bottom: 7px;
}
.item-check-list li label {
cursor: pointer;
}
.item-check-list li .post-state {
font-weight: 600;
}
.dd-handle {
font-weight: 600;
border: 1px solid #dcdcde;
background-color: #f0f0f0;
padding: 9px 16px;
block-size: 40px;
}
.dd-item>button {
height: 29px;
}
/* Tree Css */
.tree-branch .branch-editor {
display: none;
}
#tree,
#tree-level-1 {
padding: 0.1em 0;
list-style: none;
margin: 0;
}
.tree-branch,
.tree-branch {
margin-bottom: 0;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tree-branch>.contents .branch-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
background: #fff;
border: 1px solid #fff;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
border-radius: 3px;
min-height: 20px;
max-width: 450px;
width: 100%;
position: relative;
padding: 10px 15px;
height: auto;
gap: 12px;
line-height: 2.3076923;
overflow: hidden;
word-wrap: break-word;
}
.tree-branch>.contents .branch-wrapper .left-sidebar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 12px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 280px;
width: 100%;
}
.right-sidebar {
opacity: 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.branch-wrapper:hover .right-sidebar {
opacity: 1;
}
@media (max-width:768px){
.right-sidebar {
opacity: 1;
}
}
.tree-branch>.contents .branch-wrapper .left-sidebar {
cursor: pointer;
}
.tree-branch>.contents {
clear: both;
line-height: 1.5;
position: relative;
margin: 10px 0 0;
}
.contents .branch-drag-handler {
cursor: move;
}
.branch-drag-handler .icon {
color: #504e4e;
margin-right: 5px;
}
.sortable-placeholder {
border: 1px dashed #3f3f3f;
height: 35px;
max-width: 450px;
width: 100%;
margin-top: 10px;
}
.tree-branch.ui-sortable-helper .contents {
margin-top: 0;
}
.tree-branch.ui-sortable-helper .children-bus .contents {
margin-top: 10px;
}
.tree-branch .children-bus:empty {
display: none;
}
.branch-level-1 {
margin-left: 0px;
}
.branch-level-2 {
margin-left: 30px;
}
.branch-level-3 {
margin-left: 60px;
}
.branch-level-4 {
margin-left: 90px;
}
.branch-level-5 {
margin-left: 120px;
}
.branch-level-6 {
margin-left: 150px;
}
.branch-level-7 {
margin-left: 180px;
}
.branch-level-8 {
margin-left: 210px;
}
.branch-level-9 {
margin-left: 240px;
}
.branch-level-10 {
margin-left: 270px;
}
.branch-level-1 .children-bus {
margin-left: 0px;
}
.branch-level-2 .children-bus {
margin-left: -30px;
}
.branch-level-3 .children-bus {
margin-left: -60px;
}
.branch-level-4 .children-bus {
margin-left: -90px;
}
.branch-level-5 .children-bus {
margin-left: -120px;
}
.branch-level-6 .children-bus {
margin-left: -150px;
}
.branch-level-7 .children-bus {
margin-left: -180px;
}
.branch-level-8 .children-bus {
margin-left: -210px;
}
.branch-level-9 .children-bus {
margin-left: -240px;
}
.branch-level-10 .children-bus {
margin-left: -270px;
}
/* .branch-path {
display: block;
position: absolute;
width: 30px;
height: 98px;
bottom: 50%;
left: -12px;
border: 2px solid #565656;
border-top: 0;
border-right: 0;
padding: 4px 0 0;
padding-top: 3px;
border-bottom-left-radius: 6px;
z-index: -1;
} */
/* menu-locations-table */
.menu-locations-table {
border: 1px solid #dcdcde;
max-width: 1020px;
}
.menu-locations-table th {
border-block-end-color: #dcdcde;
}
.menu-locations-table tbody tr td {
border: none;
}
.menu-locations-table tbody tr:first-child td {
-webkit-padding-before: 16px;
padding-block-start: 16px;
}
.menu-locations-table tbody tr:last-child td {
-webkit-padding-after: 16px;
padding-block-end: 16px;
}
.menu-locations-table th,
.menu-locations-table td {
padding: 8px 14px;
}
.menu-locations-table .menu-location-menus {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
@media only screen and (max-width: 575px) {
.menu-locations-table .menu-location-menus {
-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;
}
}
.menu-locations-table .theme-input-style,
.menu-locations-table .dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter .menu-locations-table input,
.menu-locations-table .dataTables_wrapper .dataTables_filter select,
.dataTables_wrapper .dataTables_filter .menu-locations-table select,
.menu-locations-table .dataTables_wrapper .dataTables_length input,
.dataTables_wrapper .dataTables_length .menu-locations-table input,
.menu-locations-table .dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length .menu-locations-table select {
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
font-size: 14px;
height: 30px;
padding: 5px 12px;
}
.menu-locations-table .locations-row-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu-locations-table .locations-row-links a {
color: #6045e2;
}
/**Select 2 */
.select2-container--classic .select2-selection--single {
background: #f0f0f0;
border: none;
border-radius: 4px;
height: 40px;
display: flex;
align-items: center;
}
.select2-container--classic .select2-selection--single .select2-selection__arrow {
border: none;
background: #f0f0f0;
height: 38px;
}
.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #6247e6;
}
.select2-container--classic.select2-container--open .select2-dropdown {
border-color: #6347e7;
}
.select2-container--classic.select2-container--open .select2-selection--single {
border: 1px solid #6246e6;
}
.select2-container--classic .select2-search--dropdown .select2-search__field {
border: 1px solid #ccc;
background: #f0f0f0;
height: 40px;
}
.select2-container--classic .select2-selection--single:focus {
border: none;
}
.select2-container--classic .select2-selection--multiple {
background-color: #f0f0f0;
border: none;
min-height: 40px;
align-items: center;
padding-top: 4px;
}
.select2-container--classic.select2-container--open .select2-selection--multiple {
border: 1px solid #6246e6;
}
.select2-container--classic .select2-search--inline .select2-search__field {
outline: 0;
background: #f0f0f0;
}
.select2-results__option--selected {
background: #6045e25c !important;
color: #1c1a1a !important;
}
.note-modal-footer {
height: auto;
padding: 0px 10px 30px;
text-align: center;
}
.note-modal-footer .note-btn {
float: none;
}
.note-modal .note-btn:hover,
.note-modal .note-btn:focus,
.note-modal .note-btn.focus {
border: none;
border-radius: 50px;
}
.note-input {
padding: 6px 12px;
border-radius: 5px;
}
.note-popover .popover-content .note-color-all .note-dropdown-menu,
.note-editor .note-toolbar .note-color-all .note-dropdown-menu {
min-width: 220px;
}
.note-editor .dropdown-toggle::after {
display: none;
}
.note-editor.note-frame .note-editing-area,
.note-editor.note-airframe .note-editing-area {
background: #fff;
}
.bottom-button {
position: fixed;
bottom: 0;
left: 0px;
padding: 15px;
padding-right: 41px;
box-shadow: 0 -4px 1px -4px rgb(0 0 0 / 10%);
background: #fff;
width: 100%;
z-index: 999;
border-top: 1px solid #ededed;
text-align: right;
}
@media (max-width: 575px) {
.bottom-button {
padding: 10px;
}
}
@media (max-width: 575px){
.media-toolbar{
display: flex;
justify-content: space-between;
flex-direction: column;
}
}
.unapprove {
background-color: #fff7ed !important;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style: none;
display: inline-block;
width: 30.33%;
position: relative;
text-align: center;
cursor: pointer;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
line-height: 30px;
border: 1px solid #ddd;
border-radius: 100%;
display: block;
text-align: center;
margin: 0 auto 10px auto;
background-color: #fff;
z-index: 99;
position: relative;
}
.progressbar li:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
top: 15px;
left: -50%;
/* z-index: -1; */
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: green;
}
.progressbar li.active+li:after {
background-color: green;
}
.location-box {
max-height: 400px;
overflow-y: scroll;
}
.edit-location-box {
max-height: 400px;
overflow-y: scroll;
}
.cl-start-wrap {
list-style: none;
padding: 0;
}
.cl-start-wrap ul {
list-style: none;
padding: 0;
margin: 0;
}
.cl-start-wrap>li>.cl-label-wrap {
padding: 12px 0 12px 0px;
border-top: 1px solid #babec3;
align-items: center;
}
.cl-start-wrap>.cl-item:last-child {
border-bottom: 1px solid #babec3;
}
.cl-start-wrap>li>.cl-label-wrap:hover {
background: #f2f2f2;
}
.cl-start-wrap>li>ul>li>.cl-label-wrap {
padding: 12px 0 12px 25px;
background: #fff;
border-top: 1px solid #babec3;
}
.cl-start-wrap>li>ul>li>.cl-label-wrap:hover {
background: #f2f2f2;
}
.cl-start-wrap>li>ul>li>ul>li>.cl-label-wrap {
padding: 12px 0 12px 50px;
background: #fff;
border-top: 1px solid #babec3;
}
.cl-start-wrap>li>ul>li>ul>li>.cl-label-wrap:hover {
background: #f2f2f2;
}
.cl-item>.cl-label-wrap .cl-label-title {
cursor: pointer;
}
.cl-item>.cl-label-wrap .cl-label-icon {
cursor: pointer;
text-align: center;
}
.cl-item>.cl-label-wrap .cl-label-icon:before {
cursor: pointer;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.cl-item>.cl-label-wrap .cl-label-tools a {
color: #9e9e9e;
}
.cl-item>.cl-label-wrap .cl-label-tools a:hover {
color: #858585;
}
.cl-item:not(.cl-item-open)>ul {
display: none;
}
.cl-item:not(.cl-item-open)>.cl-label-wrap .cl-label-icon:before {
content: "\f0da";
}
.cl-item.cl-item-open>.cl-label-wrap .cl-label-icon:before {
content: "\f0d7";
}
.cl-item.cl-item-no-sub>.cl-label-wrap .cl-label-title {
cursor: default;
}
.cl-item.cl-item-no-sub>.cl-label-wrap .cl-label-icon:before {
content: "";
}
.cl-label-wrap {
display: table-cell;
-ms-display: flex;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: center;
}
.cl-label-wrap .cl-label-title {
flex: 1 1 auto;
align-self: auto;
display: flex;
justify-content: space-between;
margin-bottom: 0;
}
.cl-label-wrap .cl-label-title .country-found {
color: #555;
}
.cl-label-wrap .label-checkbox {
order: 0;
flex: 0 1 1.5em;
align-self: auto;
margin-right: 10px;
}
.cl-label-wrap .cl-label-tools {
order: 2;
flex: 0 1 auto;
align-self: auto;
white-space: nowrap;
padding: 0 10px;
}
.cl-item.cl-item-open>.cl-label-wrap>.d-flex>.cl-label-tools {
transform: rotate(180deg)
}
.another-zone {
margin-right: 30px;
}
.order-status-details {
background: #f6f6f6;
border: 1px solid #f2f2f2;
padding: 15px;
}
.order-status-details .details-item {
gap: 10px;
margin-bottom: 10px;
}
.order-status-details p {
margin: 0;
}
.order-status-details .view-btn {
display: block;
text-align: center;
color: #ef2543;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
}
.btn-current-packages {
background-color: #e83e8c !important;
color: #ffff !important;
box-shadow: 0 5px 10px #ebb8d0 !important;
}
.login-card{
background-color: #0a0817 !important;
color:white !important
}
.auth-btn{
background-color: #f64a1d;
box-shadow: 0 5px 10px rgb(249 68 33 / 24%) !important
}
.auth-btn:hover{
background-color: #f64a1d;
box-shadow: 0 5px 10px rgb(249 68 33 / 24%) !important
}
.coupon-apply-btn{
background-color: #f64a1d;
}
.coupon-apply-btn:hover{
background-color: #f64a1d;
}