/* ******************* Template name: Dashmin Version: 1.0 Author: ThemeLooks Author url: http://themelooks.com NOTE: ----- Please DO NOT EDIT THIS CSS, you may need to use "custom.css" file for writing your custom css. We may release future updates so it will overwrite this file. it's better and safer to use "custom.css". ******** CSS INDEX ******** 01. Base 1.1 Reset 1.2 Padding/Margin 1.3 color 02. Components 2.1 Common Classes 2.2 Animations 2.3 Pagination 2.4 Buttons 2.5 Table 2.6 Progress 2.7 Input 03. Layout 3.1 Header 3.2 Sidebar 3.3 Footer 3.4 Main Content 3.5 Aside 04. Dashboard 4.1 Dashboard 4.2 Social Analytics 05. Ecommerce 5.1 Ecommerce1 5.2 Ecommerce2 5.3 Product Details 5.4 Cartlist 06. Apps 6.1 Mail 6.2 Chat 6.3 Todo List 6.4 Calendar 6.5 Invoice 6.6 Contact 6.7 Project Manager 6.8 File Manager 07. Form & Table 7.1 Form Elements 7.2 Form Wizard 08. UI Elements 8.1 Widget 8.2 Icons 09. Pages 9.1 FAQ 9.2 Price 9.3 Timeline 9.4 Account Settings 9.5 Authentications 9.6 Coming Soon 9.7 Miscellaneous 9.8 Profile 10. Extension 10.1 Extension ********************/ /* ************************ 01.1: Reset ********************* */ *, *::before, *::after { outline: none !important; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; } ::-moz-selection { text-shadow: none; color: #ffffff; } ::selection { text-shadow: none; color: #ffffff; } ::-webkit-input-placeholder { color: #727272 !important; opacity: .7 !important; } ::-moz-placeholder { color: #727272 !important; opacity: .7 !important; } :-ms-input-placeholder { color: #727272 !important; opacity: .7 !important; } ::-ms-input-placeholder { color: #727272 !important; opacity: .7 !important; } ::placeholder { color: #727272 !important; opacity: .7 !important; } iframe { max-width: 100%; } button:focus, input:focus, select:focus, textarea:focus { outline: none !important; } input[type=checkbox] { margin-right: 5px; cursor: pointer; } label { margin: 0; } button, button[type="submit"], input[type="submit"] { border: none; cursor: pointer; -webkit-appearance: button; -moz-appearance: button; } select { width: 100%; max-width: 100%; color: #727272; } textarea { resize: none; } img { max-width: 100%; height: auto; } a, a:hover, a:active, a:focus, input, input:hover, input:focus, input:active, select, textarea { text-decoration: none; outline: 0 !important; } h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; -ms-word-wrap: break-word; word-wrap: break-word; font-weight: 700; line-height: 1; text-transform: capitalize; } p:last-child { margin: 0; } h1 { font-size: 40px; } h2 { font-size: 36px; } h3 { font-size: 26px; } h4 { font-size: 17px; } h5 { font-size: 15px; } h6 { font-size: 14px; } .list-unstyled, .status-list, .list-invoice { margin: 0; padding: 0; list-style: none; } pre { border: 1px solid; border-radius: 4px; font-size: 16px; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 0.8em 1.6em; } code { background-color: rgba(27, 31, 35, 0.05); border-radius: 3px; font-size: 85%; margin: 0; padding: .2em .4em; } html, body { overflow-x: hidden !important; } body { font-size: 15px; line-height: 1.466; color: #727272; background-color: #ecf3f2; -webkit-font-smoothing: antialiased; } body.modal-open { height: 100vh; overflow-y: hidden; } .main-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } /* ************************ 01.2: Padding/Margin ********************* */ .pt-60 { padding-top: 60px; } @media only screen and (max-width: 1024px) { .pt-60 { padding-top: 0; } } .pb-60 { padding-bottom: 60px; } @media only screen and (max-width: 1024px) { .pb-60 { padding-bottom: 0; } } .mt-40 { margin-top: 40px; } .mt-30 { margin-top: 30px; } .mt-20 { margin-top: 20px; } .mt-10 { margin-top: 10px; } .mb-40 { margin-bottom: 40px; } .mb-30 { margin-bottom: 30px; } .mb-20 { margin-bottom: 20px; } .mb-10 { margin-bottom: 10px; } /* Padding Left Right */ .pl-20 { padding-left: 20px; } .pr-20 { padding-right: 20px; } .pb-20 { padding-bottom: 20px; } .ml-35 { margin-left: 35px; } .ml-20 { margin-left: 20px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } @media only screen and (max-width: 575px) { .pt-40 { padding-top: 20px; } } .p-30 { padding: 30px; } @media only screen and (max-width: 575px) { .p-30 { padding: 20px 15px; } } .p-40 { padding: 40px; } @media only screen and (max-width: 575px) { .p-40 { padding: 20px 15px; } } @media only screen and (min-width: 767px) { .mb-md-20 { margin-bottom: 20px; } } /* ************************ 01.3: Color ********************* */ .text_color, .dashboard-date input, .comment-action-links .comment-action-link, .dropdown-menu .dropdown-body .content .main-text, .dropdown-button > a.text_color:hover, .meta-info > div span span, .light-btn, .light-btn:hover, table.style--two thead th, table.cart_table tr td:nth-child(3) input, table.invoice-list-table.style-two td:nth-child(4), table.style-two.contact-list-table td:nth-child(4), table.invoice-list-table.style-two td:nth-child(5), table.style-two.contact-list-table td:nth-child(5), table.invoice-list.style-two td:nth-child(4), table.invoice-list.style-two td:nth-child(5), table.table-contextual .details-btn, .process-bar-wrapper.style--four .process-width, .theme-input-group.style--two input, .theme-input-group.prepend input, .search-form .theme-input-group input, .search-form .theme-input-group.header-search.theme-input-group input, .mail-list-item .mail-text .msg, .main-mail .mail-text .msg, .mail-list-item:hover .mail-text .msg, .main-mail:hover .mail-text .msg, .mail-compose .form-group .cc-btns .cc-btn, .modal-body .form-group .cc-btns .cc-btn, .message p, .list-invoice li a, .invoice.edit input, .contact-box .contact-body a, #projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-name, #projectTaskDetails .modal-content .checklist-new-item .checklist-add-controls .icon-close, #projectTaskDetails .modal-content .edit-actions textarea, #projectShareModal .modal-body .form-group .input-wrap .theme-input-style, .board-members-list li a, .board-labels-list li a, .board-labels-select-color li a, #shareModal .modal-content .modal-body .form-group .input-wrap .theme-input-style, .notifications a, .news a, .chip .chip-content .img, .timeline.style--two .event:before, .info-list li a, .about-nav-tab a { color: #35c2ac; } .text_color-bg, .comment-action-links .comment-action-link:not(:last-child):after, .btn-circle.style--three, .sidebar .sidebar-body ul.sub-menu li:before, .switch .control:after, .switch .check, .switch.dark input:checked ~ .control { background-color: #727272; } .text_color-bo { border-color: #727272 !important; } .black, h1, h2, h3, h4, h5, h6, .attach-file.change-card-attachment, .dashboard-date.style--five input, .dropdown-menu, .dropdown-menu a, .dropdown-menu .color-balls, .list-button li, .change-card-btn, .change-card-btn:hover, table.dh-table td, table.style--two td, table.order-list-table th, table.order-list-table td, table.cart_table tr td:first-child, table.style--four th, table.style--four td, table.style--five th, table.style--five td, table.style--five td .name, table.invoice-list-table th, table.contact-list-table th, table.invoice-list-table td, table.contact-list-table td, table.invoice-list th, table.invoice-list td, .ProgressBar-wrap .ProgressBar-percentage, .ProgressBar-wrap2 .ProgressBar-percentage, .progress-info div, .process-bar-wrapper .process-name, .process-bar-wrapper .process-width, .country-performance .process-bar-wrapper .process-name, .custom-select.style--two .theme-input-style, .sidebar .sidebar-body li.nav-category, .sidebar .sidebar-body li a, .sidebar .sidebar-body li.active > a.disabled, .sidebar .sidebar-body li:hover > a.disabled, .aside-body li a, .aside-body li.fc-event a, .aside-body li.fc-event a:hover, .cart-collaterals .shop_table .order-total th, .cart-collaterals .shop_table .order-total td, .cart-collaterals .shop_table.style-two th, .cart-collaterals .shop_table.style-two td, .cart-collaterals .shop_table.style-two .order-total th, .cart-collaterals .shop_table.style-two .order-total td, .message:hover p.time, .message.active p.time, .todo-list .todo-text .card-text, .add-new_task .label-text, .task-details .label-text, .invoice-header-left .dropdown-button > a, #projectTaskDetails .modal-content .project-main-title textarea, #projectTaskDetails .modal-content .checklist-new-item .checklist-add-controls .icon-close:hover, .note a, #example-vertical > .steps ul li.done a, #example-vertical > .steps ul li.current a, .notifications a p, .news a p, .timeline .event:before, .time_circles > div > span, .base-timer__label, .base-timer__text, .p_info-list li, .skill-list li, .latest-update > a, .edit-skill label, .post-body p, .comments-area .single-comment .comment-content p, .nouislider-cat, .dragable-list > div { color: #333333; } .black-bg, body.sidebar-folded .sidebar .sidebar-body li.nav-category:before { background-color: #333333; } .black-bo { border-color: #333333 !important; } .white, .text-white *, .p_header-content *, .text-white h1, .p_header-content h1, .text-white h2, .p_header-content h2, .text-white h3, .p_header-content h3, .text-white h4, .p_header-content h4, .text-white h5, .p_header-content h5, .text-white h6, .p_header-content h6, .attach-file.style--two .upload-button, #menu button, .full-date, .list-button li:hover, .list-button li.active, .btn:hover, #example-vertical > .actions ul li a:hover[href="#next"], #example-vertical > .actions ul li a:hover[href="#finish"], .status-btn, .light-btn.ba, .light-btn.btn-circle:after, .light-btn.offcanvas-overlay, .aside-body li a.light-btn:after, .chat_aside .aside-header .light-btn.aside-header-bottom:after, .light-btn.message:after, .todo-list .light-btn.single-row:after, .board .board-cards .light-btn.board-card:before, #menu button.light-btn, .light-btn.btn:hover, #example-vertical > .actions ul li a.light-btn:hover[href="#next"], #example-vertical > .actions ul li a.light-btn:hover[href="#finish"], .light-btn.c2-bg, .dropdown-menu .dropdown-body a:hover .light-btn.change-card-btn.main-text, .dropdown-menu.style--two .dropdown-body a:hover .light-btn.change-card-btn.time, #example-vertical > .actions ul li a.light-btn.change-card-btn.preview[href="#next"], #example-vertical > .actions ul li a.light-btn.change-card-btn.preview[href="#finish"], #example-vertical > .actions ul li a.light-btn.change-card-btn.style--two[href="#next"], #example-vertical > .actions ul li a.light-btn.change-card-btn.style--two[href="#finish"], #example-vertical > .actions ul li a.light-btn.change-card-btn.s_alert[href="#next"], #example-vertical > .actions ul li a.light-btn.change-card-btn.s_alert[href="#finish"], .light-btn.change-card-btn, table.table-contextual .light-btn.change-card-btn.details-btn:hover, table.table-contextual .details-btn:hover i.light-btn.change-card-btn, .sidebar .sidebar-body li.active > a.light-btn.change-card-btn, .sidebar .sidebar-body li:hover > a.light-btn.change-card-btn, .fc-view > table thead th.light-btn.change-card-btn.fc-day-header, .notifications a:hover p.light-btn.change-card-btn, .news a:hover p.light-btn.change-card-btn, .select2-container--default .select2-selection--multiple .light-btn.change-card-btn.select2-selection__choice, .about-nav-tab a.light-btn.change-card-btn.active, .dragable-list > div.ui-sortable-helper i.light-btn.change-card-btn, .light-btn.change-card-btn:hover, .theme-input-group button.light-btn, .theme-input-group > a.light-btn, .theme-input-group button.light-btn.btn.style--three:hover, .theme-input-group > a.light-btn.btn.style--three:hover, .sidebar .sidebar-body li.light-btn.active:before, .sidebar .sidebar-body li.light-btn:hover:before, .labels .light-btn.label.add-label, .label-item .light-btn.label.add-label, .switch input:checked ~ .light-btn.control:after, .switch input:checked ~ .control .light-btn.check, .input-group.bootstrap-touchspin button.light-btn.btn, .light-btn.color-circle, .faq h5.light-btn:after, .light-btn.ba:hover, .light-btn.btn-circle:hover:after, .light-btn.offcanvas-overlay:hover, .aside-body li a.light-btn:hover:after, .chat_aside .aside-header .light-btn.aside-header-bottom:hover:after, .light-btn.message:hover:after, .todo-list .light-btn.single-row:hover:after, .board .board-cards .light-btn.board-card:hover:before, #menu button.light-btn:hover, .light-btn.c2-bg:hover, .dropdown-menu .dropdown-body a:hover .light-btn.change-card-btn.main-text:hover, .dropdown-menu.style--two .dropdown-body a:hover .light-btn.change-card-btn.time:hover, table.table-contextual .details-btn:hover i.light-btn.change-card-btn:hover, .sidebar .sidebar-body li.active > a.light-btn.change-card-btn:hover, .sidebar .sidebar-body li:hover > a.light-btn.change-card-btn:hover, .theme-input-group button.light-btn:hover, .theme-input-group > a.light-btn:hover, .labels .light-btn.label.add-label:hover, .label-item .light-btn.label.add-label:hover, .switch input:checked ~ .light-btn.control:hover:after, .switch input:checked ~ .control .light-btn.check:hover, .input-group.bootstrap-touchspin button.light-btn.btn:hover, .light-btn.color-circle:hover, .faq h5.light-btn:hover:after, .change-card-btn.c2, a.change-card-btn:hover, .dropdown-menu .dropdown-body a:hover .change-card-btn.main-text, .dropdown-menu.style--two .dropdown-body a:hover .change-card-btn.time, .change-card-btn.btn.preview, #example-vertical > .actions ul li a.change-card-btn.preview[href="#next"], #example-vertical > .actions ul li a.change-card-btn.preview[href="#finish"], .change-card-btn.btn.style--two, #example-vertical > .actions ul li a.change-card-btn.style--two[href="#next"], #example-vertical > .actions ul li a.change-card-btn.style--two[href="#finish"], .change-card-btn.btn.s_alert, #example-vertical > .actions ul li a.change-card-btn.s_alert[href="#next"], #example-vertical > .actions ul li a.change-card-btn.s_alert[href="#finish"], .change-card-btn.details-btn, table.table-condensed thead tr:nth-child(2) th.change-card-btn, table.table-contextual .change-card-btn.details-btn:hover, table.table-contextual .details-btn:hover i.change-card-btn, .sidebar .sidebar-body li.active > a.change-card-btn, .sidebar .sidebar-body li:hover > a.change-card-btn, .fc-view > table thead th.change-card-btn.fc-day-header, .notifications a:hover p.change-card-btn, .news a:hover p.change-card-btn, .change-card-btn.icon:hover, .select2-container--default .select2-selection--multiple .change-card-btn.select2-selection__choice, .change-card-btn.p_nav-link, .about-nav-tab a.change-card-btn.active, .change-card-btn.iconwrap, .dragable-list > div.ui-sortable-helper i.change-card-btn, .light-btn:hover, .light-btn.style--two:hover, table.table-inverse th, table.table-inverse td, .theme-input-style.style--four, textarea.theme-input-style.style--four, .theme-input-group button.btn.style--three:hover, .theme-input-group > a.btn.style--three:hover, #example-vertical > .actions ul li .theme-input-group > a.style--three:hover[href="#next"], #example-vertical > .actions ul li .theme-input-group > a.style--three:hover[href="#finish"], .notification-icon .count, .avatar .count, .chat_aside .aside-header .profile .content h4, .chat_aside .aside-header .profile .content .name, #search-tab ~ #search-box input, .fc-toolbar.fc-header-toolbar .fc-left .fc-today-button, #projectTaskDetails .modal-content .cover-img .attach-file, .board-labels-list li .label, .color-circle, .profile-pic .upload-button, .cover-img .upload-button, .statistics-bounce-rate .state-content h3 { color: #ffffff; } .white-bg, .dropdown-menu .dropdown-body, .tasks_aside, .aside, .chat_aside, .statistic-row, .mail-list-item, .main-mail, .fc-toolbar.fc-header-toolbar, .contact-box .contact-body, .project-box, .board .board-cards .board-card, .add-card, .form-element, .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up:after, .price-box.active .price-body, .timeline.style--two, .session-timeout, .add-work-form, .work-update-form, .dragable-list > div { background-color: #ffffff; } .white-bo { border-color: #ffffff !important; } .c1, a, .dashboard-date.style--six input, .pagination ul li, .follow-btn, .link-btn, .theme-input-group button:hover, .theme-input-group > a:hover, .header-toogle-menu, .sidebar .sidebar-header .sidebar-toogle-pin, .aside-body li a.active, .aside-body li:hover a, .aside-body li.active a, .product-details-content .woocommerce-Price-amount, .mail-compose .form-group .input-wrap span, .modal-body .form-group .input-wrap span, .mail-compose .form-group .input-wrap input, .modal-body .form-group .input-wrap input { color: #3F4249; } ::-moz-selection { background-color: #3F4249; } .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: #3F4249; } .c1-bo { border-color: #3F4249 !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: #35C2AC; } .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: #35C2AC; } .c2-bo { border-color: #35C2AC !important; } .c3, .mail-compose .form-group .cc-btns .cc, .modal-body .form-group .cc-btns .cc, .mail-compose .form-group .cc-btns .cc-btn:hover, .modal-body .form-group .cc-btns .cc-btn:hover, .assign-tag, .assign-tag.front-end { color: #67CF94; } .c3-bg, .avatar-status.bg-teal:after, .process-bar-wrapper .process-bar.style--two, .board .board-cards .board-card.label-5:before { background-color: #67CF94; } .c3-bo { border-color: #67CF94 !important; } .c4, #projectLabelModal .modal-header .back-btn, .input-group.bootstrap-touchspin.disable input, #example-vertical > .steps ul li a, .time_circles > div > h4, .base-timer__text { color: #aeaeae; } .c4-bg, #projectShareModal .modal-body .form-group .input-wrap .menu-icon span, #shareModal .modal-content .modal-body .form-group .input-wrap .menu-icon span, .switch input:disabled ~ .control:after, .switch input:disabled ~ .control .check, .switch .control, .switch.dark input:checked ~ .control:after, .input-group.bootstrap-touchspin.disable button.btn { background-color: #aeaeae; } .c4-bo, .switch.dark input:checked ~ .control { border-color: #aeaeae !important; } .c5 { color: #f0f0f0; } .c5-bg, #projectTaskDetails .modal-content .project-main-title textarea, #projectTaskDetails .modal-content .edit-actions, #projectTaskDetails .modal-content .edit-actions textarea { background-color: #f0f0f0; } .c5-bo { border-color: #f0f0f0 !important; } /* ************************ 02.1: Common Classes ********************* */ /* Transitions */ .trans2, .theme-input-group button, .theme-input-group > a { -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } .trans3, a, .ba, .btn-circle:after, .offcanvas-overlay, .aside-body li a:after, .chat_aside .aside-header .aside-header-bottom:after, .message:after, .todo-list .single-row:after, .board .board-cards .board-card:before, .dropdown-menu .dropdown-body .content .main-text, .dropdown-menu.style--two .dropdown-body .content .time, .dropdown-menu.style--two .dropdown-body .content .main-text, .list-button li, .pagination.style--two ul li svg path, .btn, #example-vertical > .actions ul li a[href="#next"], #example-vertical > .actions ul li a[href="#finish"], .follow-btn i, .link-btn i, .details-btn i, .details-btn svg, .light-btn, .change-card-btn, .remove-btn, table tr, table.style--three tr th, table.style--three tr td, .theme-input-style, .search-form .theme-input-group, .search-form .theme-input-group button, .search-form .theme-input-group.header-search, .search-form .theme-input-group.header-search.theme-input-group button, .header, .header .main-header, .header-toogle-menu, .header-icon, .sidebar, .sidebar .sidebar-header .sidebar-toogle-pin, .sidebar .sidebar-body ul.sub-menu li:before, .sidebar .sidebar-body li i, .sidebar .sidebar-body li.has-sub-item:after, .footer, .main-content, .aside-body li.less:after, .mail-list-item, .main-mail, .mail-list-item .mail-text .msg, .main-mail .mail-text .msg, .mail-compose .form-group .cc-btns .cc-btn, .modal-body .form-group .cc-btns .cc-btn, .message, .message p, .todo-list .single-row, .todo-list .single-row.border-bottom.change-border-color, .todo-list .todo-text .card-text, .assign_to .assign-content, .assign-tag, .assign-btn svg line, #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details:after, #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details .icon-delete, #projectTaskDetails .modal-content .checklist-new-item .checklist-add-controls .icon-close, .file-attachments .attachment .attachment-close, .file .dropdown-button, .notifications a p, .news a p, .icon, .price-box, .price-body, .profile-pic:after, .profile-pic .upload-button, .cover-img:after, .cover-img .upload-button, .p_overview-list li .dropdown-button, .p_work-list li .dropdown-button, .p_education-list li .dropdown-button, .add-work-form, .work-update-form, .post-footer .love svg path { -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; } .trans4 { -webkit-transition: 0.4s ease; -o-transition: 0.4s ease; transition: 0.4s ease; } .trans5 { -webkit-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; } /* Font Family */ body, .pt_sans { font-family: "PT Sans", sans-serif; } /* Font Weight */ .regular, .meta-info > div span span, .btn.style--two.orange, #example-vertical > .actions ul li a.style--two.orange[href="#next"], #example-vertical > .actions ul li a.style--two.orange[href="#finish"], table.style--two thead th, .aside-body li.lavel:hover a, .aside-body li.lavel.active a, .form-row label.regular, .fc-event-container .fc-content .fc-title, .fc-day-top.fc-today:after, #projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-name:before { font-weight: 400; } .medium { font-weight: 500; } .semi-bold { font-weight: 600; } .bold, .dashboard-date.style--five > i, .dropdown-menu.style--four a:hover, .dropdown-menu.style--four a.selected, .avatar, .full-date, .pagination ul li, .follow-btn, .link-btn, .details-btn, table.style--two td, table.cart_table tr td:first-child, table.cart_table tr td:last-child span, table.invoice-list-table.style-two td:nth-child(4), table.style-two.contact-list-table td:nth-child(4), table.invoice-list-table.style-two td:nth-child(5), table.style-two.contact-list-table td:nth-child(5), table.invoice-list.style-two td:nth-child(4), table.invoice-list.style-two td:nth-child(5), .ProgressBar-wrap .ProgressBar-percentage, .ProgressBar-wrap2 .ProgressBar-percentage, .progress-info div:not(:first-child), .process-bar-wrapper.style--four .process-width, .notification-icon .count, .avatar .count, .sidebar .sidebar-body li.nav-category, #apex_radar-chart .apexcharts-title-text, .statistic-row.days, .product-details-content .product_title, .product-details-content .woocommerce-Price-amount, .product-details-content .woocommerce-product-details__short-description h5, .form-row label, .cart-collaterals .shop_table th, .cart-collaterals .shop_table td, .mail-list-item:hover .mail-text .msg, .main-mail:hover .mail-text .msg, .message:hover p, .message.active p, .assign_to .assign-content, .assign-tag .tag-text, .add-new_task .label-text, .task-details .label-text, .fc table, #projectTaskDetails .modal-content .project-main-title textarea, #projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-name, #smartwizard .nav li a, #example-vertical > .steps ul li a, #example-vertical > .actions ul li a[href="#previous"], .chip .chip-content > div, .chip .chip-content .img, .color-circle, .topic, .timeline .event:before, .base-timer__label, .base-timer__text, .p_nav-link, .info-list li, .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button { font-weight: 700; } /* Border Radius */ .radius-7 { border-radius: 7px !important; } .radius-5, .dashboard-date.style--four, .dashboard-date.style--five, .tag_color, table.cart_table tr td:nth-child(3) span, table.cart_table tr td:nth-child(3) input, table.cart_table tr td:nth-child(4) span, table.cart_table tr td:nth-child(4) input, .theme-input-style.style--three, .theme-input-style.style--four, .search-form .theme-input-group input.redius-5, .search-form .theme-input-group .color-pic input, .color-pic .search-form .theme-input-group input, .todo-list .single-row:after, .fc-bg table tbody td, .fc-view > table thead th.fc-day-header, .fc-toolbar.fc-header-toolbar, .labels .label, .label-item .label, #projectTaskDetails .modal-content .project-main-title textarea, #projectTaskDetails .modal-content .cover-img .attach-file, #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details, #projectTaskDetails .modal-content .checklist-new-item .theme-input-style, #projectTaskDetails .modal-content .edit-actions textarea, #projectChecklistModal .checklist-copy-source, .project-board-select-wrap, .input-group.addon .input-group-prepend .input-group-text, .input-group.addon .input-group-append .input-group-text { border-radius: 5px; } .radius-10, .dashboard-date.style--two, textarea.theme-input-style, textarea.theme-input-style.style--two, .custom-select.style--two, .message-item .bubble p { border-radius: 10px; } .radius-50, .attach-file.style--two .upload-button, .attach-file.style--three, .dashboard-date, .full-date, .list-button li, .btn, #example-vertical > .actions ul li a[href="#next"], #example-vertical > .actions ul li a[href="#finish"], .status-btn, .process-bar-wrapper, .process-bar-wrapper .process-bar, .theme-input-style.style--two, .custom-select, .theme-input-group.style--two input, .theme-input-group.prepend input, .search-form .theme-input-group input, .search-form .theme-input-group button, .search-form .theme-input-group.header-search.theme-input-group input, .search-form .theme-input-group.header-search.theme-input-group button, .d_input-group input, .header-icon, .mail-compose .form-group .input-wrap, .modal-body .form-group .input-wrap, .mail-compose .form-group .input-wrap span, .modal-body .form-group .input-wrap span, .assign_to .assign-content, .assign-tag, .priority .assign-menu, .task-details .show-date, .fc-toolbar.fc-header-toolbar .fc-left .fc-today-button, .fc-toolbar.fc-header-toolbar .fc-button-group .fc-button, .invoice-header-left .dropdown-button > a, .board .board-cards .board-card:before, #projectShareModal .modal-body .form-group .input-wrap, #shareModal .modal-content .modal-body .form-group .input-wrap, .switch .control, .chip .chip-content, .profile-pic .upload-button, .cover-img .upload-button { border-radius: 50px; } .radius, .attach-file, .attach-file .file-input, .attach-file.style--two, .dropdown-menu.style--three a span, .dropdown-menu.style--four a span, .avatar-status, .avatar-status:after, .upload-icon, .avatar, .avatar img, .img-60, .img-50, .img-40, .img-30, .color-balls .color, .member a, .member a img, .pagination ul li.current, .btn-circle, .btn-circle:after, .btn-home, .download-btn, .print-btn, .close-btn, .remove-btn, table.style--four td .country-flag, .custom-checkbox .checkmark, .main-header-user .user-profile img, .menu-icon span, .notification-icon .count, .avatar .count, .statistic-row > div:first-child img, .color-group .color, .mail-list-item .avatar img, .main-mail .avatar img, .mail-compose .form-group .cc-btns .cc, .modal-body .form-group .cc-btns .cc, .aside-body img, .aside-header img, .video-call, .chat-footer .voice-msg, .chat-footer .attach-file, .chat-footer .submit, .audio-call, .assign_to .assign-avatar, .assign-tag .assign-avatar, .assign-btn, #fullCalModal .calendar-modal-Event .color, .labels .label.add-label, .label-item .label.add-label, #projectTaskDetails .modal-content .modal-close, .file-attachments .attachment .attachment-close, .switch .control:after, .switch .check, #smartwizard .nav li:last-child a, .chip .chip-content .img, .color-circle, .faq h5:after, .profile-nav-tabs li .chat, .p_overview-list li .img img, .p_work-list li .img img, .p_education-list li .img img, .post-controls > div { border-radius: 50%; } .radius-0, .attach-file.change-card-attachment, .dropdown-menu, .card, #contactAddModal .modal-content, #contactEditModal .modal-content, #projectTaskDetails .modal-content .dashboard-date, .input-group.addon .input-group-prepend .input-group-text:not(:first-child), .input-group.addon .input-group-append .input-group-text:not(:first-child) { border-radius: 0 !important; } .border-0, .color-pic input, .card, table.style--two thead th, table.order-list-table thead th, table.cart_table thead th, table.cart_table tr td:nth-child(3) input, table.style--four th, table.style--four td, table.style--five th, table.style--five td, table.invoice-list-table.style-two th, table.style-two.contact-list-table th, table.invoice-list.style-two th, .form-control, .custom-select, .input-group-text, .chat_aside .aside-header .aside-header-bottom .nav-tabs, .mail-compose .form-group .input-wrap input, .modal-body .form-group .input-wrap input, #search-tab ~ #search-box input, .fc-bg table tbody, .fc-bg table tbody td, .fc-bg table tbody td.fc-day, .fc-view > table thead th.fc-day-header, .fc-view > table tbody td, .fc-view > table thead td, .fc-button, #createEventModal .modal-content, #projectTaskDetails .modal-content, #projectTaskDetails .modal-content .project-main-title textarea, #projectTaskDetails .modal-content .edit-actions textarea, #projectMemberModal .modal-content, #projectLabelModal .modal-content, #projectChecklistModal .modal-content, #projectMoveModal .modal-content, #projectCopyModal .modal-content, #projectShareModal .modal-content, .project-board-select-wrap select, #shareModal .modal-content, .input-group.addon .input-group-prepend .input-group-text, .input-group.addon .input-group-append .input-group-text, .input-group.addon .form-control, .input-group.bootstrap-touchspin button.btn, .input-group.bootstrap-touchspin .input-group-text, #smartwizard, #smartwizard .nav, .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice button { border: 0 !important; } /* Box Shadow */ .box-shadow, .dropdown-menu, .tasks_aside, .aside, .chat_aside, .compose-wrap, .todo-list .single-row:hover, #createEventModal .modal-content, #fullCalModal .modal-content, #contactAddModal .modal-content, #contactEditModal .modal-content, #projectTaskDetails .modal-content, #projectMemberModal .modal-content, #projectLabelModal .modal-content, #projectChecklistModal .modal-content, #projectMoveModal .modal-content, #projectCopyModal .modal-content, #projectShareModal .modal-content, #shareModal .modal-content { -webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 15px rgba(0, 0, 0, 0.05); } .box-shadow2, .message:hover, .message.active { -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05); } .no-shadow, .btn.preview, #example-vertical > .actions ul li a.preview[href="#next"], #example-vertical > .actions ul li a.preview[href="#finish"], .btn.style--two, #example-vertical > .actions ul li a.style--two[href="#next"], #example-vertical > .actions ul li a.style--two[href="#finish"], .btn.s_alert, #example-vertical > .actions ul li a.s_alert[href="#next"], #example-vertical > .actions ul li a.s_alert[href="#finish"], .btn-circle.done, .form-control, .custom-select, .fc-button, #projectShareModal .modal-body .form-group .input-wrap .theme-input-style, #projectShareModal .modal-body .form-group.comment textarea.theme-input-style, .input-group.addon .form-control, .input-group.bootstrap-touchspin button.btn, .dragable-btn a { -webkit-box-shadow: none !important; box-shadow: none !important; } .list-inline li { display: inline-block; } /* Attach file */ .attach-file { width: 50px; height: 50px; background-color: #FEE7FF; color: #E580FD; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .attach-file i { font-size: 22px; } .attach-file .fake-btn { line-height: 1; position: absolute; left: 60px; } .attach-file .file-input { position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; cursor: pointer; } .attach-file.style--two { width: 200px; height: 200px; background-color: #F5F5F5; overflow: hidden; position: relative; } .attach-file.style--two .upload-button { background-color: rgba(0, 0, 0, 0.5); position: relative; padding: 8px 15px; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; } .attach-file.style--two .profile-avatar { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .attach-file.style--three { width: auto; height: auto; padding: 5px 15px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background-color: #CCF5F8; color: #09D1DE; } .attach-file.change-card-attachment { width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; height: 32px; cursor: pointer; } .cover-img { background-color: #f0f0f0; width: 100%; } /* Others */ .ov-hidden, .main-wrapper, .sidebar { overflow: hidden; } .ovx-hidden { overflow-x: hidden; } .py-30 { padding-top: 30px !important; padding-bottom: 30px !important; } .pointer { cursor: pointer; } /* Before After */ .ba, .btn-circle:after, .offcanvas-overlay, .aside-body li a:after, .chat_aside .aside-header .aside-header-bottom:after, .message:after, .todo-list .single-row:after, .board .board-cards .board-card:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /* Bg */ .light-bg { background-color: #FFFCF6; } /* Bg Img */ .bg-img { background-repeat: no-repeat; background-position: center; background-size: cover; } /* Dashboard Date */ .dashboard-date { padding: 0px 15px; height: 30px; max-width: 170px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #f0f0f0; cursor: pointer; } .dashboard-date .input-group-addon { margin-right: 10px; position: relative; top: -2px; } .dashboard-date input { border: none; height: 28px; position: relative; min-width: 100px; background-color: #f0f0f0; } .dashboard-date.style--two { height: 40px; max-width: 310px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .dashboard-date.style--three { max-width: 186px; } .dashboard-date.style--four { max-width: 310px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .dashboard-date.style--four input { width: 100%; } .dashboard-date.style--six { background-color: #E9E7FF; max-width: 190px; height: 35px; } .dashboard-date.style--six input { background-color: #E9E7FF; } .color-pic input { padding: 0; width: 75px; height: 40px; } .comment-action-links .comment-action-link { display: inline-block; } .comment-action-links .comment-action-link:not(:last-child) { margin-right: 14px; position: relative; } .comment-action-links .comment-action-link:not(:last-child):after { width: 5px; height: 0.5px; position: absolute; right: -12px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); content: ""; } /* Dropdown Menu */ .dropdown-menu { font-size: 15px; background-clip: padding-box; border: none; padding: 11px 0 14px; min-width: 135px; } .dropdown-menu a, .dropdown-menu .color-balls { display: block; width: 100%; padding: 4px 16px; clear: both; font-weight: 400; text-transform: capitalize; } .dropdown-menu a:not(:last-child), .dropdown-menu .color-balls:not(:last-child) { margin-bottom: 5px; } .dropdown-menu .dropdown-header { background-color: #FAFAFA; padding: 5px 20px; } .dropdown-menu .dropdown-header h5 { font-size: 16px; } .dropdown-menu .dropdown-header .text-mute { color: #FE5280; width: auto; padding: 0; font-size: 12px; } .dropdown-menu .dropdown-body { padding: 8px 20px; } .dropdown-menu .dropdown-body .figure { width: 50px; height: 50px; margin-right: 13px; position: relative; } .dropdown-menu .dropdown-body .content p { margin: 0; } .dropdown-menu .dropdown-body .content .name { margin-right: 20px; } .dropdown-menu .dropdown-body .content .time { font-size: 12px; color: #aeaeae; } .dropdown-menu .dropdown-body .content .main-text { font-size: 13px; line-height: 1.53; } .dropdown-menu .dropdown-body a { padding: 12px 0px 18px; margin-bottom: 0; } .dropdown-menu .dropdown-body a:not(:last-child) { border-bottom: 1px solid #F5F5F5; } .dropdown-menu .dropdown-body a:last-child { padding-bottom: 5px; } .dropdown-menu.style--two { min-width: 300px; } .dropdown-menu.style--two .dropdown-body .content .time { font-size: 12px; color: #aeaeae; } .dropdown-menu.style--two .dropdown-body .content .main-text { font-size: 15px; } .dropdown-menu.style--two .dropdown-body a { padding: 15px 0px 10px; } .dropdown-menu.style--three a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .dropdown-menu.style--three a span { width: 20px; height: 20px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 3px; background-color: #efefef; margin-right: 12px; } .dropdown-menu.style--four a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; padding: 0 10px; } .dropdown-menu.style--four a:hover { color: #FFB959; } .dropdown-menu.style--four a.selected { color: #67CF94; } .dropdown-menu.style--four a span { width: 20px; height: 20px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 3px; background-color: #efefef; margin-right: 12px; } .dropdown-menu.checkbox > div { position: relative; padding: 5px 10px 5px 40px; cursor: pointer; } .dropdown-menu.checkbox > div .custom-checkbox { left: 10px; } .dropdown-menu.checkbox > div .custom-checkbox .checkmark { width: 15px; height: 15px; padding: 0; } .dropdown-menu.checkbox > div .custom-checkbox .checkmark:after { left: 5px; top: 2px; } .avatar-status { position: absolute; width: 14px; height: 14px; right: -2px; bottom: 0px; background-color: #ffffff; } .avatar-status:after { width: 8px; height: 8px; position: absolute; content: ""; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #97a3b9; } .avatar-status.bg-warn:after { background-color: #FFB959; } .avatar-status.bg-dangers:after { background-color: #FC7383; } .avatar-status.style--two { right: 1px; top: 45px; } .upload-icon { width: 90px; height: 90px; border: 2px solid #35C2AC; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #E9E7FF; } .meta-info > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .meta-info > div:not(:last-child) { margin-bottom: 14px; } .meta-info > div span { text-transform: capitalize; display: inline-block; } .meta-info > div span:first-child { width: 120px; } @media only screen and (max-width: 575px) { .meta-info > div span:first-child { width: 90px; } } .meta-info > div span span { display: block; } .modal-close { cursor: pointer; } sub, sup { font-size: 60%; } .font-12, .comment-action-links .comment-action-link, .meta-info > div span span, #menu button, .theme-input-style.small, .custom-select.style--two.small .theme-input-style, .notifications a span.time, .news a span.time, .chip .chip-content, .icon__name { font-size: 12px !important; } .font-13 { font-size: 13px !important; } .font-14, .attach-file.change-card-attachment i, .meta-info > div span, .pagination ul li, .change-card-btn, .light-btn, table.invoice-list-table tbody td .details-btn, table.contact-list-table tbody td .details-btn, table.invoice-list tbody td .details-btn, .progress_22 .ProgressBar-wrap2 .ProgressBar-percentage, .fc-toolbar.fc-header-toolbar .fc-left .fc-today-button, .fc-toolbar.fc-header-toolbar .fc-button-group .fc-button, #fullCalModal .calendar-modal-location, #fullCalModal .calendar-modal-visibility, #fullCalModal .calendar-modal-Event, .invoice-header-left .dropdown-button > a, #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item, #projectMemberModal .modal-content .modal-body .theme-input-style, #projectLabelModal .modal-content .modal-body .theme-input-style, #projectChecklistModal .modal-content .modal-body .theme-input-style, #projectMoveModal .modal-content .modal-body .theme-input-style, #projectCopyModal .modal-content .modal-body .theme-input-style, #projectShareModal .modal-content .modal-body .theme-input-style, .checklist-items .checklist-item .item, .board-members-list li a, #shareModal .modal-content .modal-body .form-group .input-wrap .theme-input-style, .chip .chip-content .img, .color-circle, .timeline .event:before, .select2-container--default .select2-selection--multiple .select2-selection__choice, .time_circles > div > h4, .info-list li, .about-myself textarea, .edit-skill .form-control, .shepherd-element .shepherd-content footer .shepherd-buttons li .shepherd-button { font-size: 14px !important; } .font-16 { font-size: 16px !important; } .font-17 { font-size: 17px !important; } .font-20, .progress_23 .ProgressBar-wrap2 .ProgressBar-percentage, .theme-input-style.large, .custom-select.style--two.large .theme-input-style, .fc-toolbar.fc-header-toolbar .fc-left h2, #projectTaskDetails .modal-content .project-main-title textarea, #projectTaskDetails .modal-content .edit-actions .icon-close, .topic { font-size: 20px !important; } .font-30 { font-size: 30px !important; } .font-40 { font-size: 40px !important; } .mr-10 { margin-right: 10px; } .ml-10 { margin-left: 10px !important; } .mr-20 { margin-right: 20px; } .mr-30 { margin-right: 30px; } .mt-n30 { margin-top: -30px; } .pt-20 { padding-top: 20px !important; } .soft-pink, .follow-btn.soft-pink, .link-btn.soft-pink, .close-btn, .close-btn:hover { color: #FE5280; } .bg-pink { background-color: #E580FD !important; } .bg-light-blue { background-color: #35C2AC !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: #35C2AC; 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: #35C2AC; } .divider.divider-success .divider-text:before, .divider.divider-success .divider-text:after { border-color: #67CF94; } .divider.divider-danger .divider-text:before, .divider.divider-danger .divider-text:after { border-color: #FC7383; } .divider.divider-info .divider-text:before, .divider.divider-info .divider-text:after { border-color: #09D1DE; } .divider.divider-warning .divider-text:before, .divider.divider-warning .divider-text:after { border-color: #FFB959; } .divider.divider-dark .divider-text:before, .divider.divider-dark .divider-text:after { border-color: #727272; } .divider.divider-light .divider-text:before, .divider.divider-light .divider-text:after { border-color: #F5F5F5; } .divider.divider-dotted .divider-text:before, .divider.divider-dotted .divider-text:after { border-style: dotted; border-width: 1px; } .divider.divider-dashed .divider-text:before, .divider.divider-dashed .divider-text:after { border-style: dashed; border-width: 1px; } .index-9 { z-index: 9; } .mx-1350 { max-width: 1350px; margin: 0 auto; } .mb-n130 { margin-bottom: -130px; } @media only screen and (max-width: 1024px) { .mb-n130 { margin-bottom: -80px; } } @media only screen and (max-width: 767px) { .mb-n130 { margin-bottom: 0px; } } .legend > table { width: auto; } .legend > table td { padding: 0; padding-left: 5px; } #menu button { display: block; padding: 5px 10px; width: 100%; border-radius: 3px; } .mxw-550 { max-width: 550px; margin: 0 auto; } .mn-vh-100 { min-height: calc(100vh - 70px) !important; } .bg-primary { background-color: #35C2AC !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: #35C2AC !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: #35C2AC; } .tag_color.travel { background-color: #FF8EF0; } .tag_color.rest { background-color: #D2BB00; } /* Color Balls */ .color-balls .color { width: 12px; height: 12px; display: inline-block; cursor: pointer; margin-right: 2px; } .color-balls .color.color1 { background-color: #FBF6D0; } .color-balls .color.color2 { background-color: #CCF5F8; } .color-balls .color.color3 { background-color: #E9E7FF; } .color-balls .color.color4 { background-color: #FEE7FF; } .color-balls .color.color5 { background-color: #ECF3FD; } .color-balls .color.color6 { background-color: #DBF7E8; } .color-balls .color.color7 { background-color: #FFF4E6; } .color-balls .color.color8 { background-color: #FFE2E6; } /* Member */ .member { line-height: 1; } .member a { border: 2px solid #ffffff; width: 30px; height: 30px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .member a img { max-width: 26px; } } .member a:not(:last-child) { margin-right: -10px; } .member a.btn-circle { border: 0; } .member.style--two a { width: 40px; height: 40px; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .member.style--two a img { min-width: 36px; } } /* Apply style ONLY on IE */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ie-flex-basis { -ms-flex-preferred-size: auto; flex-basis: auto; } } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* ************************ 02.3: Pagination ********************* */ .pagination ul li.current { width: 30px; height: 30px; background-color: #E9E7FF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pagination ul li a { padding: 8px; } .pagination > p { color: #aeaeae; } .pagination.style--two ul { margin: 0; } .pagination.style--two ul li svg { width: 10px; height: 15px; } .pagination.style--two ul li svg path { stroke: #E9E7FF; } .pagination.style--two ul li a.current svg path { stroke: #35C2AC; } /* ************************ 02.4: Buttons ********************* */ /* Default Btn */ .btn, #example-vertical > .actions ul li a[href="#next"], #example-vertical > .actions ul li a[href="#finish"] { padding: 17px 24px; font-weight: 700; line-height: 1; font-size: 14px; position: relative; cursor: pointer; color: #ffffff; border: none; text-transform: capitalize; outline: 0 !important; -webkit-box-shadow: 0 5px 10px rgba(4, 0, 252, 0.2) !important; box-shadow: 0 5px 10px rgba(4, 0, 252, 0.2) !important; } .btn svg, #example-vertical > .actions ul li a[href="#next"] svg, #example-vertical > .actions ul li a[href="#finish"] svg { position: relative; width: 15px; height: 15px; top: -2px; } .btn.preview, #example-vertical > .actions ul li a.preview[href="#next"], #example-vertical > .actions ul li a.preview[href="#finish"] { background-color: #E9E7FF; } .btn.preview:hover, #example-vertical > .actions ul li a.preview:hover[href="#next"], #example-vertical > .actions ul li a.preview:hover[href="#finish"] { background-color: #e3e0ff; } .btn.long, #example-vertical > .actions ul li a.long[href="#next"], #example-vertical > .actions ul li a.long[href="#finish"] { padding: 13px 30px; } .btn.style--two, #example-vertical > .actions ul li a.style--two[href="#next"], #example-vertical > .actions ul li a.style--two[href="#finish"] { background-color: #E9E7FF; padding: 12px 24px; border-radius: 50px !important; } .btn.style--two:hover, #example-vertical > .actions ul li a.style--two:hover[href="#next"], #example-vertical > .actions ul li a.style--two:hover[href="#finish"] { background-color: #e2e0ff; } .btn.style--two.orange, #example-vertical > .actions ul li a.style--two.orange[href="#next"], #example-vertical > .actions ul li a.style--two.orange[href="#finish"] { padding: 10px 25px; background-color: #FFF4E6; color: #FFB959; } .btn.style--three, #example-vertical > .actions ul li a.style--three[href="#next"], #example-vertical > .actions ul li a.style--three[href="#finish"] { padding: 12px 24px; } .btn.s_alert, #example-vertical > .actions ul li a.s_alert[href="#next"], #example-vertical > .actions ul li a.s_alert[href="#finish"] { background-color: #E9E7FF; padding: 18px 30px; } .btn.btn-lg, #example-vertical > .actions ul li a.btn-lg[href="#next"], #example-vertical > .actions ul li a.btn-lg[href="#finish"] { width: 100%; max-width: 245px; margin: 0 auto; display: block; } /* Btn Circle */ .btn-circle { width: 40px; height: 40px; position: relative; z-index: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-shadow: 0 5px 10px rgba(96, 69, 226, 0.5); box-shadow: 0 5px 10px rgba(96, 69, 226, 0.5); } .btn-circle svg { position: relative; z-index: 1; } .btn-circle:after { background-color: #6F51FF; background-color: -moz-linear-gradient(left, #6F51FF 0%, #3F4249 100%); background-color: -webkit-linear-gradient(left, #6F51FF 0%, #3F4249 100%); background-color: linear-gradient(to right, #6F51FF 0%, #3F4249 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F51FF', endColorstr='#3F4249',GradientType=1); } .btn-circle:hover:after { opacity: 0.7; } .btn-circle.style--two { width: 60px; height: 60px; } .btn-circle.style--three { width: 30px; height: 30px; -webkit-box-shadow: 0 5px 10px rgba(114, 114, 114, 0.5); box-shadow: 0 5px 10px rgba(114, 114, 114, 0.5); } .btn-circle.style--three:after { display: none; } .btn-circle.style--four { width: 50px; height: 50px; } .btn-circle.style--four svg { left: 1px; } .btn-circle.add-row-btn { position: absolute; width: 30px; height: 30px; bottom: 10px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .btn-circle.repeater-add-btn { position: absolute; width: 40px; height: 40px; bottom: 58px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .btn-circle.repeater-add-btn.position-relative { -webkit-transform: none; -ms-transform: none; transform: none; left: auto; bottom: auto; } .btn-circle.done { background-color: #DBF7E8; color: #67CF94; font-size: 26px; } .btn-circle.done:after { display: none; } .btn-home { width: 40px; height: 40px; background-color: #E9E7FF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* Follow Btn */ .follow-btn i, .link-btn i { left: 0; position: relative; } .follow-btn:hover i, .link-btn:hover i { left: 5px; } /* Download & Print Btn */ .download-btn, .print-btn { background-color: #CCF5F8; width: 50px; height: 50px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .print-btn { background-color: #FFF4E6; } /* Table Detais Btn */ .details-btn { background-color: transparent; } .details-btn i, .details-btn svg { left: 0; position: relative; } .details-btn:hover i, .details-btn:hover svg { left: 5px; } /* Table Status Btn */ .status-btn { font-size: 12px; line-height: 1; padding: 4px 12px; } .status-btn.un_paid { background-color: #FC7383; } .status-btn.on_hold, .status-btn.product { background-color: #FFB959; } .status-btn.paid { background-color: #09D1DE; } .status-btn.completed, .status-btn.family { background-color: #67CFA2; } .status-btn.work { background-color: #FC7383; } .status-btn.friend, .status-btn.draft { background-color: #C491FF; } .status-btn.design { background-color: #09D1DE; } /* Light Btn */ .light-btn { background-color: #f0f0f0; padding: 6px 10px; border-radius: 3px; cursor: pointer; display: inline-block; } .light-btn:hover { background-color: #f5f5f5; } /* Change Card Btn */ .change-card-btn { display: block; background-color: #f0f0f0; margin-bottom: 8px; padding: 6px 10px; } .change-card-btn:hover { background-color: #f5f5f5; } .change-card-btn span { display: inline-block; } .change-card-btn span:not(:last-child) { margin-right: 5px; } .close-btn { width: 50px; height: 50px; background-color: #FFE2E6; font-size: 20px; } .close-btn i { font-weight: 700; } .remove-btn { width: 40px; height: 40px; background-color: #FFE2E6; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .remove-btn:hover { background-color: #fed8de; } .remove-btn.style--two { width: 30px; height: 30px; } .light-btn { padding: 5px 20px; background-color: #E9E7FF; border-radius: 50px; } .light-btn.style--two { background-color: #CCF5F8; color: #09D1DE; } .light-btn:hover { background-color: #35C2AC; } .light-btn:hover.style--two { background-color: #09D1DE; } /* ************************ 02.5: Table ********************* */ table { width: 100%; max-width: 100%; font-size: 14px; } table th { color: #333333; border-bottom: 1px solid #aeaeae; } table td { color: #727272; } table td a { color: #333333; font-weight: 700; font-size: 14px; } table td a:hover { color: #35C2AC; } 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: #35C2AC; } table.table-condensed tbody tr td.active.day:hover { background: #35C2AC; } 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: #35C2AC; 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: #35C2AC; } .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: #35C2AC; } .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: #35C2AC; 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: #35C2AC; } .progress_22 .ProgressBar-wrap2 .ProgressBar-percentage { position: absolute; color: #35C2AC; 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: #35C2AC; } /* Home Social Media Process */ .country-performance { padding: 0 20px; } .country-performance .process-bar-wrapper { background-color: #CCF5F8; height: 10px; } .country-performance .process-bar-wrapper .process-bar { background-color: #09D1DE; } .country-performance .process-bar-wrapper.style--two { background-color: #FFF4E6; width: 100%; margin-top: 40px; } .country-performance .process-bar-wrapper.style--two .process-bar { background-color: #FFB959; } /* Process Bars */ .process-bars { width: 40%; position: absolute; left: 20px; bottom: 30px; } @media only screen and (min-width: 0px) and (max-width: 1500px) { .process-bars { position: relative; } } @media only screen and (min-width: 0px) and (max-width: 1200px) { .process-bars { margin: 50px auto 0; width: 80%; left: 0; } } /* ************************ 02.7: Input ********************* */ /* Theme Input Style */ .theme-input-style { border: none; height: 40px; width: 100%; padding: 0 15px; background-color: #f0f0f0; font-size: 16px; border-radius: 7px; } .theme-input-style:focus { background-color: #f0f0f0; } .theme-input-style.style--two { background-color: #ffffff; height: 35px; } @media only screen and (max-width: 767px) { .theme-input-style.style--two { border-radius: 0; } } .theme-input-style.style--three { height: 30px; padding: 5px 10px; } .theme-input-style.style--four { height: 30px; background-color: rgba(255, 255, 255, 0.05); padding: 5px 10px; max-width: 160px; } .theme-input-style.large { height: 50px; } .theme-input-style.small { height: 30px; padding: 0 14px; } .theme-input-style.is-valid { border: 1px solid #28a745 !important; } .theme-input-style.is-invalid { border: 1px solid #dc3545 !important; } .theme-input-style.style--five { width: auto; display: -webkit-box; display: -ms-flexbox; display: flex; } .form-control { background-color: #f0f0f0; height: 40px; border-radius: 7px; } .form-control:focus { background-color: #f0f0f0; } .form-control.is-valid { border: 1px solid #28a745 !important; } .form-control.is-invalid { border: 1px solid #dc3545 !important; } textarea.theme-input-style { height: 180px; padding: 15px 20px; } textarea.theme-input-style.style--two { padding: 10px 20px; height: 100px; background-color: #f0f0f0; } textarea.theme-input-style.style--three { height: 80px; line-height: 1.73; font-size: 15px; } textarea.theme-input-style.style--four { height: 50px; max-width: 290px; padding: 5px 10px; font-size: 15px; background-color: rgba(255, 255, 255, 0.05); line-height: 1.3; } textarea.theme-input-style.style--five { height: 70px; width: 100%; font-size: 15px; padding: 6px 10px; } textarea.theme-input-style.style--six { height: 50px; font-size: 15px; padding: 6px 10px; } textarea.theme-input-style.style--seven { height: 130px; } textarea.form-control { height: 50px; } .custom-select { background-color: #DBF7E8; height: auto; color: #67CF94; padding: 0px 30px 0px 12px; background: #DBF7E8 url(../img/svg/select-down.svg) no-repeat right 0.75rem center/10px 10px; } .custom-select.style--two { max-width: 235px; padding: 0; background: #f0f0f0 url(../img/svg/simple-down.svg) no-repeat right 0.75rem center/16px 14px; } .custom-select.style--two .theme-input-style { background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .custom-select.style--two.large { background-size: 18px 15px; } .custom-select.style--two.large .theme-input-style { height: 50px; } .custom-select.style--two.small { background-size: 14px 12px; } .custom-select.style--two.small .theme-input-style { height: 30px; padding: 0 14px; } .custom-select.style--two.disable { background-image: url(../img/svg/simple-down2.svg); } select.multiple { width: 100%; height: auto; padding: 4px 0; } select.multiple option { padding: 6px 20px; } /* Theme Input Group */ .theme-input-group { position: relative; width: 100%; } .theme-input-group input { width: 100%; height: 50px; border: none; padding-left: 25px; padding-right: 150px; color: #ffffff; margin: 0; } @media only screen and (max-width: 479px) { .theme-input-group input { padding-right: 130px; padding-left: 10px; } } .theme-input-group button, .theme-input-group > a { position: absolute; top: 0px; right: 0px; height: 100%; padding: 15px 30px; line-height: 1; font-weight: 600; color: #ffffff; } @media only screen and (max-width: 479px) { .theme-input-group button, .theme-input-group > a { font-size: 16px; padding: 20px; } } .theme-input-group.header-search { z-index: 99; } .theme-input-group.input-wrap { overflow: hidden; } .theme-input-group.input-wrap .theme-input-style { padding-right: 40px !important; } .theme-input-group.input-wrap > a { padding: 8px 12px 8px 10px; } .theme-input-group.style--two input { background-color: #f0f0f0; height: 40px; padding-right: 120px; } .theme-input-group.style--two input.pd { padding-right: 80px; } .theme-input-group.style--two .input-group-append { position: absolute; right: 0; top: 0; } .theme-input-group.style--two.prepend input { padding-right: 120px; padding-left: 130px; } .theme-input-group.style--two.prepend input.pd { padding-right: 80px; padding-left: 80px; } .theme-input-group.prepend input { background-color: #f0f0f0; height: 40px; padding-right: 15px; padding-left: 130px; } .theme-input-group.prepend input.pd { padding-left: 80px; } .theme-input-group.prepend .input-group-prepend { position: absolute; left: 0; top: 0; } .input-group-text { background-color: #f0f0f0; border-radius: 7px; } /* Search Form */ .search-form .theme-input-group { position: relative; height: 40px; width: 100%; } .search-form .theme-input-group input { background-color: #F5F5F5; padding: 5px 15px; height: 40px; } .search-form .theme-input-group input::-webkit-input-placeholder { color: #727272 !important; } .search-form .theme-input-group input::-moz-placeholder { color: #727272 !important; } .search-form .theme-input-group input:-ms-input-placeholder { color: #727272 !important; } .search-form .theme-input-group input::-ms-input-placeholder { color: #727272 !important; } .search-form .theme-input-group input::placeholder { color: #727272 !important; } .search-form .theme-input-group button { background-color: #FAFAFA; padding: 5px 10px; } @media only screen and (max-width: 379px) { .search-form .theme-input-group button { padding: 5px 12px; } } .search-form .theme-input-group button.radius-5, .search-form .theme-input-group button.dashboard-date.style--four, .search-form .theme-input-group button.dashboard-date.style--five, .search-form .theme-input-group button.tag_color, .search-form .theme-input-group button.theme-input-style.style--three, .search-form .theme-input-group button.theme-input-style.style--four, .search-form .theme-input-group .todo-list button.single-row:after, .todo-list .search-form .theme-input-group button.single-row:after, .search-form .theme-input-group button.fc-toolbar.fc-header-toolbar, .search-form .theme-input-group .labels button.label, .labels .search-form .theme-input-group button.label, .search-form .theme-input-group .label-item button.label, .label-item .search-form .theme-input-group button.label, .search-form .theme-input-group #projectTaskDetails .modal-content .cover-img button.attach-file, #projectTaskDetails .modal-content .cover-img .search-form .theme-input-group button.attach-file, .search-form .theme-input-group #projectTaskDetails .modal-content .checklist .checklist-item-wrap button.checklist-item-details, #projectTaskDetails .modal-content .checklist .checklist-item-wrap .search-form .theme-input-group button.checklist-item-details, .search-form .theme-input-group #projectTaskDetails .modal-content .checklist-new-item button.theme-input-style, #projectTaskDetails .modal-content .checklist-new-item .search-form .theme-input-group button.theme-input-style, .search-form .theme-input-group #projectChecklistModal button.checklist-copy-source, #projectChecklistModal .search-form .theme-input-group button.checklist-copy-source, .search-form .theme-input-group button.project-board-select-wrap, .search-form .theme-input-group .input-group.addon .input-group-prepend button.input-group-text, .input-group.addon .input-group-prepend .search-form .theme-input-group button.input-group-text, .search-form .theme-input-group .input-group.addon .input-group-append button.input-group-text, .input-group.addon .input-group-append .search-form .theme-input-group button.input-group-text { border-radius: 5px !important; } .search-form .theme-input-group button:hover { background-color: #E9E7FF; color: #ffffff; } .search-form .theme-input-group.style--two { height: 50px; } .search-form .theme-input-group.style--two input { height: 50px; } .search-form .theme-input-group.style--two button { padding: 5px 15px; } .search-form .theme-input-group.header-search.theme-input-group { position: absolute; height: 50px; width: 50px; right: 0; top: 0; } @media only screen and (max-width: 379px) { .search-form .theme-input-group.header-search.theme-input-group { height: 45px; width: 45px; } } .search-form .theme-input-group.header-search.theme-input-group.active { width: 270px; } .search-form .theme-input-group.header-search.theme-input-group.active button { background-color: #F5F5F5; } .search-form .theme-input-group.header-search.theme-input-group input { background-color: #F5F5F5; height: 50px; padding: 5px 15px; } @media only screen and (max-width: 379px) { .search-form .theme-input-group.header-search.theme-input-group input { height: 45px; } } .search-form .theme-input-group.header-search.theme-input-group input::-webkit-input-placeholder { color: #727272 !important; } .search-form .theme-input-group.header-search.theme-input-group input::-moz-placeholder { color: #727272 !important; } .search-form .theme-input-group.header-search.theme-input-group input:-ms-input-placeholder { color: #727272 !important; } .search-form .theme-input-group.header-search.theme-input-group input::-ms-input-placeholder { color: #727272 !important; } .search-form .theme-input-group.header-search.theme-input-group input::placeholder { color: #727272 !important; } .search-form .theme-input-group.header-search.theme-input-group button { background-color: #FAFAFA; padding: 5px 15px; } @media only screen and (max-width: 379px) { .search-form .theme-input-group.header-search.theme-input-group button { padding: 5px 12px; } } .search-form .theme-input-group.header-search.theme-input-group button:hover { background-color: #E9E7FF; color: #ffffff; } .horizontal-form .form-group > label { min-width: 240px; } @media only screen and (min-width: 1024px) and (max-width: 1200px) { .horizontal-form .form-group > label { min-width: 180px; } } /* Custom Checkbox */ .custom-checkbox { position: absolute; width: 20px; cursor: pointer; height: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .custom-checkbox .checkmark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; background-color: #E9E7FF; } .custom-checkbox .checkmark:after { content: ""; position: absolute; display: none; } .custom-checkbox input:checked ~ .checkmark:after { display: block; } .custom-checkbox .checkmark:after { left: 6px; top: 3px; width: 6px; height: 10px; border: solid #35C2AC; 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 #35C2AC; } .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: #35C2AC; } .custom-checkbox.solid .checkmark:after { border-color: #fff !important; } .custom-checkbox.light .checkmark { background-color: #F5F5F5 !important; } .custom-checkbox.disable .checkmark { background-color: #F5F5F5; border-color: #aeaeae; } .custom-checkbox.disable.solid .checkmark { background-color: #aeaeae; } .custom-checkbox.success .checkmark { border-color: #67CF94; background-color: #DBF7E8; } .custom-checkbox.success .checkmark:after { border-color: #67CF94; } .custom-checkbox.success.solid .checkmark { background-color: #67CF94; } .custom-checkbox.danger .checkmark { border-color: #FC7383; background-color: #FFE2E6; } .custom-checkbox.danger .checkmark:after { border-color: #FC7383; } .custom-checkbox.danger.solid .checkmark { background-color: #FC7383; } .custom-checkbox.brand .checkmark { border-color: #09D1DE; background-color: #CCF5F8; } .custom-checkbox.brand .checkmark:after { border-color: #09D1DE; } .custom-checkbox.brand.solid .checkmark { background-color: #09D1DE; } /* Custom Radio */ .custom-radio { width: 18px; height: 18px; position: relative; } .custom-radio [type="radio"]:checked, .custom-radio [type="radio"]:not(:checked) { position: absolute; left: -9999px; } .custom-radio [type="radio"]:checked + label, .custom-radio [type="radio"]:not(:checked) + label { cursor: pointer; } .custom-radio [type="radio"]:checked + label:before, .custom-radio [type="radio"]:not(:checked) + label:before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid #35C2AC; 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: #35c2ac; position: absolute; top: 5px; left: 5px; border-radius: 100%; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .custom-radio [type="radio"]:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .custom-radio [type="radio"]:checked + label:after { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .custom-radio.disable [type="radio"]:checked + label:before, .custom-radio.disable [type="radio"]:not(:checked) + label:before { border: 1px solid #aeaeae; background-color: #F5F5F5; } .custom-radio.success [type="radio"]:checked + label:before, .custom-radio.success [type="radio"]:not(:checked) + label:before { border: 1px solid #67CF94; background-color: #DBF7E8; } .custom-radio.success [type="radio"]:checked + label:after, .custom-radio.success [type="radio"]:not(:checked) + label:after { background-color: #67CF94; } .custom-radio.danger [type="radio"]:checked + label:before, .custom-radio.danger [type="radio"]:not(:checked) + label:before { border: 1px solid #FC7383; background-color: #FFE2E6; } .custom-radio.danger [type="radio"]:checked + label:after, .custom-radio.danger [type="radio"]:not(:checked) + label:after { background-color: #FC7383; } .custom-radio.brand [type="radio"]:checked + label:before, .custom-radio.brand [type="radio"]:not(:checked) + label:before { border: 1px solid #09D1DE; background-color: #CCF5F8; } .custom-radio.brand [type="radio"]:checked + label:after, .custom-radio.brand [type="radio"]:not(:checked) + label:after { background-color: #09D1DE; } .custom-radio.bold [type="radio"]:checked + label:before, .dashboard-date.style--five > i.custom-radio [type="radio"]:checked + label:before, .dropdown-menu.style--four a.custom-radio:hover [type="radio"]:checked + label:before, .dropdown-menu.style--four a.custom-radio.selected [type="radio"]:checked + label:before, .custom-radio.avatar [type="radio"]:checked + label:before, .custom-radio.full-date [type="radio"]:checked + label:before, .pagination ul li.custom-radio [type="radio"]:checked + label:before, .custom-radio.follow-btn [type="radio"]:checked + label:before, .custom-radio.link-btn [type="radio"]:checked + label:before, .custom-radio.details-btn [type="radio"]:checked + label:before, table.style--two td.custom-radio [type="radio"]:checked + label:before, table.cart_table tr td.custom-radio:first-child [type="radio"]:checked + label:before, table.cart_table tr td:last-child span.custom-radio [type="radio"]:checked + label:before, table.invoice-list-table.style-two td.custom-radio:nth-child(4) [type="radio"]:checked + label:before, table.style-two.contact-list-table td.custom-radio:nth-child(4) [type="radio"]:checked + label:before, table.invoice-list-table.style-two td.custom-radio:nth-child(5) [type="radio"]:checked + label:before, table.style-two.contact-list-table td.custom-radio:nth-child(5) [type="radio"]:checked + label:before, table.invoice-list.style-two td.custom-radio:nth-child(4) [type="radio"]:checked + label:before, table.invoice-list.style-two td.custom-radio:nth-child(5) [type="radio"]:checked + label:before, .ProgressBar-wrap .custom-radio.ProgressBar-percentage [type="radio"]:checked + label:before, .ProgressBar-wrap2 .custom-radio.ProgressBar-percentage [type="radio"]:checked + label:before, .progress-info div.custom-radio:not(:first-child) [type="radio"]:checked + label:before, .process-bar-wrapper.style--four .custom-radio.process-width [type="radio"]:checked + label:before, .notification-icon .custom-radio.count [type="radio"]:checked + label:before, .avatar .custom-radio.count [type="radio"]:checked + label:before, .sidebar .sidebar-body li.custom-radio.nav-category [type="radio"]:checked + label:before, #apex_radar-chart .custom-radio.apexcharts-title-text [type="radio"]:checked + label:before, .custom-radio.statistic-row.days [type="radio"]:checked + label:before, .product-details-content .custom-radio.product_title [type="radio"]:checked + label:before, .product-details-content .custom-radio.woocommerce-Price-amount [type="radio"]:checked + label:before, .product-details-content .woocommerce-product-details__short-description h5.custom-radio [type="radio"]:checked + label:before, .form-row label.custom-radio [type="radio"]:checked + label:before, .cart-collaterals .shop_table th.custom-radio [type="radio"]:checked + label:before, .cart-collaterals .shop_table td.custom-radio [type="radio"]:checked + label:before, .mail-list-item:hover .mail-text .custom-radio.msg [type="radio"]:checked + label:before, .main-mail:hover .mail-text .custom-radio.msg [type="radio"]:checked + label:before, .message:hover p.custom-radio [type="radio"]:checked + label:before, .message.active p.custom-radio [type="radio"]:checked + label:before, .assign_to .custom-radio.assign-content [type="radio"]:checked + label:before, .assign-tag .custom-radio.tag-text [type="radio"]:checked + label:before, .add-new_task .custom-radio.label-text [type="radio"]:checked + label:before, .task-details .custom-radio.label-text [type="radio"]:checked + label:before, .fc table.custom-radio [type="radio"]:checked + label:before, #projectTaskDetails .modal-content .project-main-title textarea.custom-radio [type="radio"]:checked + label:before, #projectTaskDetails .modal-content .checklist .process-bar-wrapper .custom-radio.process-name [type="radio"]:checked + label:before, #smartwizard .nav li a.custom-radio [type="radio"]:checked + label:before, #example-vertical > .steps ul li a.custom-radio [type="radio"]:checked + label:before, #example-vertical > .actions ul li a.custom-radio[href="#previous"] [type="radio"]:checked + label:before, .chip .chip-content > div.custom-radio [type="radio"]:checked + label:before, .chip .chip-content .custom-radio.img [type="radio"]:checked + label:before, .custom-radio.color-circle [type="radio"]:checked + label:before, .custom-radio.topic [type="radio"]:checked + label:before, .timeline .custom-radio.event:before [type="radio"]:checked + label:before, .custom-radio.base-timer__label [type="radio"]:checked + label:before, .custom-radio.base-timer__text [type="radio"]:checked + label:before, .custom-radio.p_nav-link [type="radio"]:checked + label:before, .info-list li.custom-radio [type="radio"]:checked + label:before, .shepherd-element .shepherd-content footer .shepherd-buttons li .custom-radio.shepherd-button [type="radio"]:checked + label:before, .custom-radio.bold [type="radio"]:not(:checked) + label:before, .dashboard-date.style--five > i.custom-radio [type="radio"]:not(:checked) + label:before, .dropdown-menu.style--four a.custom-radio:hover [type="radio"]:not(:checked) + label:before, .dropdown-menu.style--four a.custom-radio.selected [type="radio"]:not(:checked) + label:before, .custom-radio.avatar [type="radio"]:not(:checked) + label:before, .custom-radio.full-date [type="radio"]:not(:checked) + label:before, .pagination ul li.custom-radio [type="radio"]:not(:checked) + label:before, .custom-radio.follow-btn [type="radio"]:not(:checked) + label:before, .custom-radio.link-btn [type="radio"]:not(:checked) + label:before, .custom-radio.details-btn [type="radio"]:not(:checked) + label:before, table.style--two td.custom-radio [type="radio"]:not(:checked) + label:before, table.cart_table tr td.custom-radio:first-child [type="radio"]:not(:checked) + label:before, table.cart_table tr td:last-child span.custom-radio [type="radio"]:not(:checked) + label:before, table.invoice-list-table.style-two td.custom-radio:nth-child(4) [type="radio"]:not(:checked) + label:before, table.style-two.contact-list-table td.custom-radio:nth-child(4) [type="radio"]:not(:checked) + label:before, table.invoice-list-table.style-two td.custom-radio:nth-child(5) [type="radio"]:not(:checked) + label:before, table.style-two.contact-list-table td.custom-radio:nth-child(5) [type="radio"]:not(:checked) + label:before, table.invoice-list.style-two td.custom-radio:nth-child(4) [type="radio"]:not(:checked) + label:before, table.invoice-list.style-two td.custom-radio:nth-child(5) [type="radio"]:not(:checked) + label:before, .ProgressBar-wrap .custom-radio.ProgressBar-percentage [type="radio"]:not(:checked) + label:before, .ProgressBar-wrap2 .custom-radio.ProgressBar-percentage [type="radio"]:not(:checked) + label:before, .progress-info div.custom-radio:not(:first-child) [type="radio"]:not(:checked) + label:before, .process-bar-wrapper.style--four .custom-radio.process-width [type="radio"]:not(:checked) + label:before, .notification-icon .custom-radio.count [type="radio"]:not(:checked) + label:before, .avatar .custom-radio.count [type="radio"]:not(:checked) + label:before, .sidebar .sidebar-body li.custom-radio.nav-category [type="radio"]:not(:checked) + label:before, #apex_radar-chart .custom-radio.apexcharts-title-text [type="radio"]:not(:checked) + label:before, .custom-radio.statistic-row.days [type="radio"]:not(:checked) + label:before, .product-details-content .custom-radio.product_title [type="radio"]:not(:checked) + label:before, .product-details-content .custom-radio.woocommerce-Price-amount [type="radio"]:not(:checked) + label:before, .product-details-content .woocommerce-product-details__short-description h5.custom-radio [type="radio"]:not(:checked) + label:before, .form-row label.custom-radio [type="radio"]:not(:checked) + label:before, .cart-collaterals .shop_table th.custom-radio [type="radio"]:not(:checked) + label:before, .cart-collaterals .shop_table td.custom-radio [type="radio"]:not(:checked) + label:before, .mail-list-item:hover .mail-text .custom-radio.msg [type="radio"]:not(:checked) + label:before, .main-mail:hover .mail-text .custom-radio.msg [type="radio"]:not(:checked) + label:before, .message:hover p.custom-radio [type="radio"]:not(:checked) + label:before, .message.active p.custom-radio [type="radio"]:not(:checked) + label:before, .assign_to .custom-radio.assign-content [type="radio"]:not(:checked) + label:before, .assign-tag .custom-radio.tag-text [type="radio"]:not(:checked) + label:before, .add-new_task .custom-radio.label-text [type="radio"]:not(:checked) + label:before, .task-details .custom-radio.label-text [type="radio"]:not(:checked) + label:before, .fc table.custom-radio [type="radio"]:not(:checked) + label:before, #projectTaskDetails .modal-content .project-main-title textarea.custom-radio [type="radio"]:not(:checked) + label:before, #projectTaskDetails .modal-content .checklist .process-bar-wrapper .custom-radio.process-name [type="radio"]:not(:checked) + label:before, #smartwizard .nav li a.custom-radio [type="radio"]:not(:checked) + label:before, #example-vertical > .steps ul li a.custom-radio [type="radio"]:not(:checked) + label:before, #example-vertical > .actions ul li a.custom-radio[href="#previous"] [type="radio"]:not(:checked) + label:before, .chip .chip-content > div.custom-radio [type="radio"]:not(:checked) + label:before, .chip .chip-content .custom-radio.img [type="radio"]:not(:checked) + label:before, .custom-radio.color-circle [type="radio"]:not(:checked) + label:before, .custom-radio.topic [type="radio"]:not(:checked) + label:before, .timeline .custom-radio.event:before [type="radio"]:not(:checked) + label:before, .custom-radio.base-timer__label [type="radio"]:not(:checked) + label:before, .custom-radio.base-timer__text [type="radio"]:not(:checked) + label:before, .custom-radio.p_nav-link [type="radio"]:not(:checked) + label:before, .info-list li.custom-radio [type="radio"]:not(:checked) + label:before, .shepherd-element .shepherd-content footer .shepherd-buttons li .custom-radio.shepherd-button [type="radio"]:not(:checked) + label:before { border-width: 2px !important; } .custom-radio.solid [type="radio"]:checked + label:before { border-width: 5px !important; } .custom-radio.solid [type="radio"]:not(:checked) + label:before { border-width: 9px !important; } .custom-radio.solid [type="radio"]:checked + label:after, .custom-radio.solid [type="radio"]:not(:checked) + label:after { display: none; } .custom-radio.light [type="radio"]:checked + label:before, .custom-radio.light [type="radio"]:not(:checked) + label:before { border-width: 0px !important; } .d_input-group { position: relative; } .d_input-group input { padding-right: 50px; } .d_input-group button { position: absolute; right: -2px; top: 0; } .d_input-group button svg { width: 18px; } /* ************************ 03.1: Header ********************* */ .header { height: 90px; } .header .main-header { -webkit-box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05); box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05); padding: 0 15px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 1024px) { .header .main-header { padding: 0; } } .header .logo { background-color: #fafafa; -ms-flex-preferred-size: 260px; flex-basis: 220px; } .header .logo .mobile-logo { display: none; } @media only screen and (max-width: 1399px) { .header .logo { -ms-flex-preferred-size: 90px; flex-basis: 90px; } .header .logo .default-logo { display: none; } .header .logo .mobile-logo { display: block; } } body.sidebar-folded .header { -webkit-box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05); box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05); } body.sidebar-folded .header .main-header { -webkit-box-shadow: none; box-shadow: none; } body.sidebar-folded.open-sidebar-folded .header { -webkit-box-shadow: none; box-shadow: none; } body.sidebar-folded.open-sidebar-folded .header .main-header { -webkit-box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05); box-shadow: 15px 1px 15px rgba(0, 0, 0, 0.05); } /* Main Header User */ .main-header-user { display: inline-block; } @media only screen and (max-width: 1399px) { .main-header-user .menu-icon { width: 25px; height: 25px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .main-header-user .user-profile .user-avatar { margin-right: 20px; } .main-header-user .user-profile img { width: 70px; height: 70px; } .main-header-user .user-profile .user-info .user-name { margin-bottom: 6px; } .main-header-user .user-profile .user-info .user-email { font-size: 14px; color: #aeaeae; } .menu-icon { display: block; width: 4px; height: 18px; margin-right: 14px; position: relative; z-index: 9; } .menu-icon span { width: 4px; height: 4px; display: block; background-color: #aeaeae; } .menu-icon span:not(:last-child) { margin-bottom: 3px; } .menu-icon.style--two { display: -webkit-box; display: -ms-flexbox; display: flex; width: 20px; height: 30px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .menu-icon.style--two.w-14 { width: 14px; height: 20px; } .menu-icon.style--three span { background-color: #CAC6FB; } .header-toogle-menu { width: 25px; height: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; font-size: 24px; } .main-header-right { height: 100%; } .main-header-right ul li { margin-left: 15px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 1200px) and (max-width: 1500px) { .main-header-right ul li { margin-left: 12px; } } @media only screen and (max-width: 479px) { .main-header-right ul li { margin-left: 10px; } } .main-header-search { position: relative; width: 50px; height: 50px; } @media only screen and (max-width: 379px) { .main-header-search { width: 45px; height: 45px; } } .main-header-message .dropdown-menu { min-width: 360px; } @media only screen and (max-width: 379px) { .main-header-message .dropdown-menu { min-width: 300px; } } .main-header-date-time .time { font-size: 22px; margin-bottom: 2px; } .main-header-date-time .date { font-size: 14px; line-height: 1; } .main-header-date-time #point { -webkit-animation: mymove 1s ease infinite; animation: mymove 1s ease infinite; } @media only screen and (min-width: 1270px) and (max-width: 9999px) { .main-header-date-time { margin-left: 30px; } } @media only screen and (max-width: 479px) { .main-header-language, .main-header-print { display: none; } } .main-header-language > a, .main-header-print > a { width: 50px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .header-icon { background-color: #FAFAFA; width: 50px; height: 50px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 379px) { .header-icon { width: 45px; height: 45px; } } .header-icon:hover { background-color: #E9E7FF; } .notification-icon, .avatar { position: relative; } .notification-icon .count, .avatar .count { width: 20px; height: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 12px; position: absolute; right: 0px; top: -5px; line-height: 1; } .avatar .count { top: -9px; right: -2px; } /* ************************ 03.2: Sidebar ********************* */ .offcanvas-overlay { position: fixed; z-index: -1; opacity: 0; } .offcanvas-overlay.active { z-index: 1028; opacity: .1; } .sidebar { width: 260px; height: calc(100% - 90px); position: fixed; left: 0; top: 90px; z-index: 2; background-color: #FCFCFC; z-index: 1029; } @media only screen and (max-width: 1024px) { .sidebar { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } } .sidebar .sidebar-header { padding: 20px 21px 0px; } .sidebar .sidebar-header .sidebar-toogle-pin { width: 35px; height: 35px; cursor: pointer; font-size: 24px; display: inline-block; margin-left: -5px; } .sidebar .sidebar-body { padding: 0px 21px 100px; } @media only screen and (max-width: 1024px) { .sidebar .sidebar-body { padding-top: 11px; } } .sidebar .sidebar-body ul.nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .sidebar .sidebar-body ul ul { padding-left: 15px; } .sidebar .sidebar-body ul.sub-menu { display: none; } .sidebar .sidebar-body ul.sub-menu li { padding: 0; } .sidebar .sidebar-body ul.sub-menu li:before { position: absolute; content: ""; width: 5px; height: 1px; left: -17px; top: 15.5px; } .sidebar .sidebar-body li { padding-left: 30px; position: relative; margin-bottom: 5px; } .sidebar .sidebar-body li.nav-category { padding: 0; font-size: 17px; text-transform: capitalize; margin: 10px 0 15px; } .sidebar .sidebar-body li i { position: absolute; left: 0; top: 7px; font-size: 18px; color: #aeaeae; } .sidebar .sidebar-body li a { display: block; padding: 5px; padding-left: 0px; height: 31px; overflow: hidden; } .sidebar .sidebar-body li a.disabled { cursor: not-allowed; opacity: .5; } .sidebar .sidebar-body li.has-sub-item:after { position: absolute; content: ""; background-image: url(../img/svg/plus.svg); width: 12px; height: 12px; right: 0; top: 10px; z-index: -1; } sub-menu-opened .sidebar .sidebar-body li.has-sub-item.:after { height: 2px; top: 15px; background-image: url(../img/minus.png); } .sidebar .sidebar-body li.active i, .sidebar .sidebar-body li:hover i { color: #35C2AC; } .sidebar .sidebar-body li.active > a.disabled i, .sidebar .sidebar-body li:hover > a.disabled i { color: #aeaeae; } body.sidebar-folded .sidebar { width: 60px; } body.sidebar-folded .sidebar .sidebar-header .sidebar-toogle-pin { opacity: 0.5; } body.sidebar-folded .sidebar .sidebar-body li i { color: #727272; } body.sidebar-folded .sidebar .sidebar-body li.nav-category { visibility: hidden; max-height: 24px; } body.sidebar-folded .sidebar .sidebar-body li.nav-category:before { position: absolute; content: ""; width: 5px; height: 2px; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); visibility: visible; } body.sidebar-folded .sidebar .sidebar-body li a span { visibility: hidden; opacity: 0; } body.sidebar-folded .sidebar .sidebar-body li.active i, body.sidebar-folded .sidebar .sidebar-body li:hover i { color: #35C2AC; } 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: #35C2AC; } body.sidebar-open .sidebar { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } body.sidebar-open .header .header-toogle-pin { opacity: 0.5; } /* ************************ 03.3: Footer ********************* */ .footer { height: 70px; padding-left: 290px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; line-height: 1; background-color: #f0f0f0; } @media only screen and (max-width: 1024px) { .footer { padding: 0 15px !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .footer.style--two { padding: 0 15px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body.sidebar-folded .footer { padding-left: 90px; } @media only screen and (max-width: 1024px) { body.sidebar-folded .footer { padding: 0 15px; } } body.sidebar-folded.open-sidebar-folded .footer { padding-left: 290px; } @media only screen and (max-width: 1024px) { body.sidebar-folded.open-sidebar-folded .footer { padding: 0 15px; } } /* ************************ 03.4: Main Content ********************* */ .main-content { min-height: calc(100vh - 190px); margin-left: 275px; position: relative; overflow: hidden; width: 100%; max-width: 100%; margin-top: 100px; } @media only screen and (max-width: 1024px) { .main-content { margin-left: 0; } } body.sidebar-folded .main-content { margin-left: 75px; } @media only screen and (max-width: 1024px) { body.sidebar-folded .main-content { margin-left: 0; } } /* ************************ 03.5: Aside ********************* */ .tasks_aside, .aside { width: 240px; height: 100%; margin-right: 15px; margin-left: 15px; } @media only screen and (max-width: 767px) { .tasks_aside, .aside { width: auto; } } @media only screen and (min-width: 767px) and (max-width: 1500px) { .tasks_aside.calendar_aside, .calendar_aside.aside { width: 202px; } } @media only screen and (min-width: 767px) and (max-width: 1200px) { .tasks_aside.calendar_aside, .calendar_aside.aside { margin-right: 0; } } .aside-header { position: relative; padding: 20px; } .aside-header .aside-btn-text { height: 60px; background-color: #E9E7FF; width: calc(100% - 20px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px; border-radius: 100px 0 0 100px; } .aside-header .btn-circle { position: absolute; left: 0; top: 0; } .aside-body { padding: 20px; } .aside-body.external-events { padding: 15px; } .aside-body li { margin-bottom: 12px; } .aside-body li a { position: relative; display: block; } .aside-body li a:after { width: 0px; height: 2px; left: -20px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .aside-body li a.active { font-weight: bold; } .aside-body li a.active:after { width: 12px; } .aside-body li:hover a, .aside-body li.active a { font-weight: bold; } .aside-body li:hover a:after, .aside-body li.active a:after { width: 12px; } .aside-body li.nav-category { color: #aeaeae; } .aside-body li.less { position: relative; cursor: pointer; } .aside-body li.less:after { position: absolute; right: 0; top: 50%; width: 12px; height: 2px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); content: ""; background-image: url(../img/svg/minus.svg); } .aside-body li.less.collapsed:after { background-image: url(../img/svg/plus.svg); height: 12px; } .aside-body li.lavel a:after { display: none; } .aside-body li.fc-event { background-color: transparent; font-size: 15px; margin-bottom: 20px; } .aside-body li.fc-event span.tag_color { width: 4px; height: 12px; } .aside-body li.fc-event.ui-draggable-dragging { background-color: #DBF7E8; padding: 5px 8px; } .aside-body li.fc-event.ui-draggable-dragging span.tag_color { display: none; } .chat_aside { position: relative; width: 375px; height: auto; margin-right: 15px; margin-left: 15px; } @media only screen and (min-width: 0px) and (max-width: 1200px) { .chat_aside { width: 330px; } } @media only screen and (max-width: 767px) { .chat_aside { width: auto; } } .chat_aside .aside-header { padding: 0; } .chat_aside .aside-header .aside-header-top { padding: 20px 24px; } .chat_aside .aside-header .dropdown-button { position: absolute; right: 15px; top: 15px; } .chat_aside .aside-header .profile .content p { color: #C3BEFF; } .chat_aside .aside-header .aside-header-bottom { position: relative; z-index: 1; } .chat_aside .aside-header .aside-header-bottom:after { background: #6F51FF; background: -webkit-gradient(linear, left top, left bottom, from(#6F51FF), to(#3F4249)); background: -o-linear-gradient(top, #6F51FF 0%, #3F4249 100%); background: linear-gradient(to bottom, #6F51FF 0%, #3F4249 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F51FF', endColorstr='#3F4249',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: #35C2AC; } .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: #35C2AC; } .apex_pie3-chart-legend .color-box.four { background-color: #FFB959; } /* Browser Status */ .browser-status > div:not(:last-child) { margin-bottom: 19px; } .browser-status > div:first-child { margin-bottom: 10px; } /* ************************ 05.1: Ecommerce ********************* */ .state { padding: 27px 10px 30px; } .state .state-icon { -ms-flex-preferred-size: 40%; flex-basis: 40%; padding-right: 10px; } .product-list-item .img img { width: 60px; height: 60px; } /* Apex Pie Chart */ #apex_pie-chart .apexcharts-tooltip.dark { color: #333333 !important; } #apex_pie-chart .apexcharts-legend-marker { position: relative; top: 1px !important; } /* ************************ 05.2: Ecommerce2 ********************* */ @media only screen and (min-width: 1800px) and (max-width: 9999px) { .campaign-processbars { margin-right: 30px; } } .product-statistics { min-width: 920px; } .statistic-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; text-transform: capitalize; } .statistic-row.days { padding: 2px 20px; } .statistic-row > div { padding: 10px 20px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .statistic-row > div:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 2; -ms-flex: 2; flex: 2; } .statistic-row > div:first-child img { width: 30px; height: 30px; margin-right: 15px; display: inline-block; } /* ************************ 05.3: Product Details ********************* */ #gal1 { margin-top: 20px; } #gal1 a img { width: 75px; height: 67px; margin-right: 10px; } /* Product Details */ .product-details { padding: 30px; } /* Product Details Content*/ .product-details-content .product_title { font-size: 20px; margin-bottom: 13px; } .product-details-content .woocommerce-Price-amount { font-size: 17px; } .product-details-content .price { margin-bottom: 30px; } .product-details-content .color-group { margin-bottom: 16px; } .product-details-content .product-review { margin-bottom: 30px; } .product-details-content .woocommerce-product-details__short-description { margin-top: 38px; } .product-details-content .woocommerce-product-details__short-description h5 { margin-bottom: 15px; } .product-details-content .woocommerce-product-details__short-description p { line-height: 1.733; } .product-details-content .woocommerce-product-details__short-description p:not(:last-child) { margin-bottom: 20px; } .list-heading { min-width: 60px; } /* Color Group */ .color-group ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .color-group ul li:not(:last-child) { margin-right: 15px; } .color-group .color { width: 15px; height: 15px; display: block; } .color-group .color.active { width: 25px; height: 25px; } .color-group .color.color1 { background-color: #2900FF; } .color-group .color.color2 { background-color: #F59D2A; } .color-group .color.color3 { background-color: #E72AF5; } .color-group .color.color4 { background-color: #00FF33; } /* ************************ 05.4: Cart List ********************* */ .cart-list { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 1px; padding: 30px; } @media only screen and (max-width: 479px) { .cart-list { padding: 20px 15px; } } .shipping-content { border-bottom: 1px solid #aeaeae; padding-bottom: 30px; } .shipping-content .form-row { margin-left: 0; margin-right: 0; } .form-row label { margin-bottom: 8px; } .cart-collaterals { max-width: 480px; margin-left: auto; padding: 20px 0; } .cart-collaterals.style--two { max-width: 420px; } /* Cart Collaterals */ .cart-collaterals .shop_table th, .cart-collaterals .shop_table td { font-size: 17px; padding: 0px 50px 20px; border-bottom: 0; } .cart-collaterals .shop_table th:first-child, .cart-collaterals .shop_table td:first-child { text-align: right; } @media only screen and (max-width: 479px) { .cart-collaterals .shop_table th, .cart-collaterals .shop_table td { padding: 0 20px 20px; } } .cart-collaterals .shop_table .order-total th, .cart-collaterals .shop_table .order-total td { border-top: 1px solid #aeaeae; font-size: 24px; padding-top: 10px; } .cart-collaterals .shop_table.style-two th, .cart-collaterals .shop_table.style-two td { font-size: 15px; } .cart-collaterals .shop_table.style-two th:first-child, .cart-collaterals .shop_table.style-two td:first-child { font-size: 14px; } .cart-collaterals .shop_table.style-two th .Price-amount { font-size: 17px; } .cart-collaterals .shop_table.style-two .order-total th, .cart-collaterals .shop_table.style-two .order-total td { border-top: 1px solid #aeaeae; font-size: 20px; padding-top: 10px; } .cart-collaterals .btn-w { width: 200px; } /* ************************ 06.1: Mail ********************* */ .mail-header .dropdown-button .menu-icon { height: 22px; } /* Mail Header */ .mail-header-left > div, .invoice-header-left > div, .mail-header-left > button, .invoice-header-left > button { margin-right: 20px; line-height: 1; } .mail-header-left > button, .invoice-header-left > button { background-color: transparent; padding: 0; } .mail-header-left .custom-checkbox, .invoice-header-left .custom-checkbox { margin-top: 2px; } .mail-header-left .dropdown-button, .invoice-header-left .dropdown-button { margin-left: 20px; } .mail-header-left .star, .invoice-header-left .star { position: relative; top: -1px; } @media only screen and (max-width: 575px) { .mail-header-right, .invoice-header-right { width: 100%; } } .mail-header-right .search-form, .invoice-header-right .search-form { width: 100%; max-width: 740px; } .mail-header-right .search-form .theme-input-group, .invoice-header-right .search-form .theme-input-group { height: 50px; } .mail-header-right .search-form .theme-input-group input, .invoice-header-right .search-form .theme-input-group input { height: 50px; } .mail-header-right .search-form .theme-input-group button, .invoice-header-right .search-form .theme-input-group button { padding: 5px 15px; } /* Message List Item */ .mail-list-item, .main-mail { padding: 15px 20px; position: relative; } @media only screen and (max-width: 575px) { .mail-list-item, .main-mail { padding: 15px; } } .mail-list-item:not(:last-child):after, .main-mail:not(:last-child):after { width: calc(100% - 40px); left: 20px; bottom: 0; height: 1px; background-color: #F5F5F5; position: absolute; content: ""; } .mail-list-item.selected, .main-mail.selected { background-color: transparent; } .mail-list-item.selected:after, .main-mail.selected:after { display: none; } .mail-list-item .mail-text, .main-mail .mail-text { margin-left: 10px; margin-right: 20px; width: 100%; } @media only screen and (max-width: 575px) { .mail-list-item .mail-text, .main-mail .mail-text { margin-right: 0; } } .mail-list-item .avatar, .main-mail .avatar { margin-right: 20px; } @media only screen and (max-width: 575px) { .mail-list-item .avatar, .main-mail .avatar { margin-right: 14px; } } @media only screen and (max-width: 575px) { .mail-list-item .avatar img, .main-mail .avatar img { width: 40px; min-width: 40px; height: 40px; } } .main-mail { padding: 30px; } @media only screen and (max-width: 479px) { .main-mail { padding: 20px 15px; } } .main-mail .avatar { width: 60px; min-width: 60px; height: 60px; margin-right: 20px; } @media only screen and (max-width: 575px) { .main-mail .avatar { margin-right: 0; } } @media only screen and (max-width: 575px) { .main-mail .avatar img { width: 60px; min-width: 60px; height: 60px; } } @media only screen and (max-width: 575px) { .mail-list-item-right, .mail-right { margin-left: 102px; margin-top: 5px; } } .mail-list-item-right > div, .mail-list-item-right > button, .mail-right > div, .mail-right > button { line-height: 1; } .mail-list-item-right > div:not(:last-child), .mail-list-item-right > button:not(:last-child), .mail-right > div:not(:last-child), .mail-right > button:not(:last-child) { margin-right: 15px; } @media only screen and (max-width: 575px) { .mail-list-item-right > div:not(:last-child), .mail-list-item-right > button:not(:last-child), .mail-right > div:not(:last-child), .mail-right > button:not(:last-child) { margin-right: 10px; } } .mail-list-item-right .status-btn, .mail-right .status-btn { min-width: 60px; padding: 4px; } .mail-list-item-right .delete_mail, .mail-right .delete_mail { background-color: transparent; padding: 0; } .mail-list-item-right .mail-date, .mail-list-item-right .star, .mail-right .mail-date, .mail-right .star { position: relative; top: -1px; } .mail-body { line-height: 1.73; } /* Mail Compose */ .compose-wrap .replay-cc-bcc { padding: 20px 30px; background-color: transparent; } @media only screen and (max-width: 575px) { .compose-wrap .replay-cc-bcc { padding: 15px; } } .compose-wrap .mail-compose .form-group label { margin-right: 10px; text-align: right; } .compose-wrap .mail-compose .form-group label, .compose-wrap .mail-compose .form-group .cc-btns { -ms-flex-preferred-size: 80px; flex-basis: 80px; } @media only screen and (max-width: 767px) { .compose-wrap .mail-compose .form-group label, .compose-wrap .mail-compose .form-group .cc-btns { -ms-flex-preferred-size: 30px; flex-basis: 30px; } } .compose-wrap .mail-compose .form-group .close-btn { -ms-flex-preferred-size: 70px; flex-basis: 70px; } @media only screen and (max-width: 767px) { .compose-wrap .mail-compose .form-group .close-btn { -ms-flex-preferred-size: 20px; flex-basis: 20px; } } .mail-compose .form-group label, .mail-compose .form-group .cc-btns, .modal-body .form-group label, .modal-body .form-group .cc-btns { -ms-flex-preferred-size: 100px; flex-basis: 100px; } @media only screen and (max-width: 767px) { .mail-compose .form-group label, .mail-compose .form-group .cc-btns, .modal-body .form-group label, .modal-body .form-group .cc-btns { -ms-flex-preferred-size: 30px; flex-basis: 30px; } } .mail-compose .form-group .cc-btns, .modal-body .form-group .cc-btns { margin-left: 10px; } @media only screen and (max-width: 767px) { .mail-compose .form-group .cc-btns, .modal-body .form-group .cc-btns { margin-left: 0; margin-top: 10px; } } .mail-compose .form-group .cc-btns .cc, .modal-body .form-group .cc-btns .cc { background-color: #DBF7E8; padding: 9px; } .mail-compose .form-group .cc-btns .cc-btn, .modal-body .form-group .cc-btns .cc-btn { cursor: pointer; } .mail-compose .form-group .close-btn, .modal-body .form-group .close-btn { margin-left: 20px; -ms-flex-preferred-size: 90px; flex-basis: 90px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; } @media only screen and (max-width: 767px) { .mail-compose .form-group .close-btn, .modal-body .form-group .close-btn { -ms-flex-preferred-size: 20px; flex-basis: 20px; margin-left: 0; margin-top: 10px; } } .mail-compose .form-group .close-btn svg, .modal-body .form-group .close-btn svg { cursor: pointer; position: relative; top: -2px; } .mail-compose .form-group .input-wrap, .modal-body .form-group .input-wrap { background-color: #fff; padding: 0px 10px; } @media only screen and (max-width: 767px) { .mail-compose .form-group .input-wrap, .modal-body .form-group .input-wrap { width: 100%; border-radius: 0; padding: 10px 5px; } } .mail-compose .form-group .input-wrap span, .modal-body .form-group .input-wrap span { background-color: #E9E7FF; padding: 2px 10px; margin: 2px; height: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; } .mail-compose .form-group .input-wrap span:not(:first-child), .modal-body .form-group .input-wrap span:not(:first-child) { margin-left: 5px; } .mail-compose .form-group .input-wrap span svg, .modal-body .form-group .input-wrap span svg { width: 8px; height: 8px; margin-left: 5px; cursor: pointer; } @media only screen and (max-width: 479px) { .mail-compose .form-group .input-wrap span, .modal-body .form-group .input-wrap span { font-size: 12px; padding: 0 8px; height: 20px; } } .mail-compose .form-group .input-wrap > div, .modal-body .form-group .input-wrap > div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .mail-compose .form-group .input-wrap > div.dropdown-button, .modal-body .form-group .input-wrap > div.dropdown-button { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; } .mail-compose .form-group .input-wrap input, .modal-body .form-group .input-wrap input { padding: 0 15px; min-width: 100px; } /* Summernote Editor */ .summernote { background-color: #fff; } .summernote .note-editor-bottom { padding: 20px 30px; } @media only screen and (max-width: 575px) { .summernote .note-editor-bottom { padding: 15px 20px; } } .summernote .note-editor-bottom .delete { position: relative; top: -1px; } .summernote .note-frame .note-placeholder { padding: 20px 30px; } @media only screen and (max-width: 575px) { .summernote .note-frame .note-placeholder { padding: 15px 20px; } } .summernote .note-frame .note-editing-area .note-editable { padding: 20px 30px; } @media only screen and (max-width: 575px) { .summernote .note-frame .note-editing-area .note-editable { padding: 15px 20px; } } .summernote .note-frame .note-toolbar { border-bottom: 1px solid #f5f5f5; background-color: #fff; padding: 5px 22px; } @media only screen and (max-width: 575px) { .summernote .note-frame .note-toolbar { padding: 5px 12px; } } .summernote .note-frame .note-btn-group { margin-top: 0; } .summernote .note-frame .note-btn-group button { -webkit-box-shadow: none !important; box-shadow: none !important; padding-top: 9px; padding-bottom: 9px; background-color: transparent; border-radius: 0; } .summernote .note-frame .note-btn-group button:after { border-top-color: #444444; } .summernote .note-frame .note-btn-group button i, .summernote .note-frame .note-btn-group button span { color: #444444; } .note-editor.note-frame .note-toolbar > .note-btn-group .note-btn:hover, .note-editor.note-frame .note-toolbar > .note-btn-group .note-btn.active, .note-editor.note-frame .note-toolbar > .note-btn-group .show > .note-btn { background-color: #f5f5f5; } /* ************************ 06.2: Chat ********************* */ .message { padding: 20px 15px; position: relative; } .message:after { left: 15px; width: calc(100% - 30px); height: 1px; background-color: #f5f5f5; bottom: 0; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .message h4 { min-width: 120px; } } .message h4 span { position: relative; top: -2px; } .message .figure { position: relative; margin-right: 14px; } /* Chat Header */ .chat-header { padding: 10px 30px; padding-top: 20px; } @media only screen and (max-width: 575px) { .chat-header { padding: 10px; } } .chat-header-right .video-call a, .chat-header-right .chat-footer .voice-msg a, .chat-footer .chat-header-right .voice-msg a, .chat-header-right .chat-footer .attach-file a, .chat-footer .chat-header-right .attach-file a, .chat-header-right .chat-footer .submit a, .chat-footer .chat-header-right .submit a { line-height: 1; } .video-call, .chat-footer .voice-msg, .chat-footer .attach-file, .chat-footer .submit, .audio-call { padding: 10px; width: 40px; height: 40px; background-color: #E9E7FF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* Chat Body */ .chat-body { padding: 30px; height: calc(100vh - 383px); position: relative; top: 0px; } @media only screen and (max-width: 575px) { .chat-body { padding: 15px 10px; } } .chat-messages { min-height: 100%; } .message-item { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; } .message-item .avatar { position: relative; } .message-item .bubble p { background-color: #f5f5f5; margin-bottom: 10px; display: inline-block; padding: 7px 20px; } .message-item.friend .bubble p { background-color: #DBF7E8; } .message-item.me .bubble p { background-color: #FFF4E6; } /* Chat Footer */ .chat-footer { padding: 30px; } @media only screen and (max-width: 575px) { .chat-footer { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 10px; } } .chat-footer .voice-msg, .chat-footer .attach-file, .chat-footer .submit { width: 50px; height: 50px; } .chat-footer div .submit svg { position: relative; left: 1px; } .chat-footer form { line-height: 1; } @media only screen and (max-width: 575px) { .chat-footer form { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; margin: 0; width: 100%; margin-bottom: 10px; } } .chat-footer form.radius-10 textarea, .chat-footer form.dashboard-date.style--two textarea, .chat-footer form.custom-select.style--two textarea { border-radius: 10px; } .chat-footer form textarea { height: 50px !important; } /* Search box */ #search-tab ~ #search-box { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } #search-tab ~ #search-box input { background: #6F51FF; background: -webkit-gradient(linear, left top, left bottom, from(#6F51FF), to(#3F4249)); background: -o-linear-gradient(top, #6F51FF 0%, #3F4249 100%); background: linear-gradient(to bottom, #6F51FF 0%, #3F4249 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F51FF', endColorstr='#3F4249',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: #3F4249; } /* Todo Priority */ .priority .assign-menu { color: #67CF94; padding: 6px 15px; background-color: #DBF7E8; } /* Add New Task */ .add-new_task .add-new-title, .task-details .add-new-title { margin-bottom: 35px; } .add-new_task .add-new-title.style--two, .task-details .add-new-title.style--two { margin-bottom: 27px; line-height: 1.2; } .add-new_task .label-text, .task-details .label-text { font-size: 14px; margin-bottom: 13px; } .add-new_task .todo_actions, .task-details .todo_actions { margin-bottom: 18px; } .add-new_task .todo_actions > div, .task-details .todo_actions > div { margin-bottom: 17px; } .add-new_task .todo_actions > div:not(:last-child), .task-details .todo_actions > div:not(:last-child) { margin-right: 60px; } @media only screen and (min-width: 320px) and (max-width: 440px) { .add-new_task .todo_actions > div:not(:last-child), .task-details .todo_actions > div:not(:last-child) { margin-right: 0; } } @media only screen and (max-width: 379px) { .add-new_task .todo_actions .todo_assaign, .task-details .todo_actions .todo_assaign { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .add-new_task .todo_actions .todo_assaign .assign-tag:not(:last-child), .task-details .todo_actions .todo_assaign .assign-tag:not(:last-child) { margin-bottom: 15px; } } .task-details .show-date { display: inline-block; padding: 2px 15px; height: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #FAFAFA; } .task-details .show-date svg { margin-right: 10px; } /* ************************ 06.4: Calendar ********************* */ .fc table { font-size: 17px; border-spacing: 8px 4px; border-collapse: separate; } .fc-bg table tbody td.fc-day { background-color: #fff; } .fc-view { margin: 0 -4px; } .fc-view > table { border-spacing: 0; border-collapse: collapse; } .fc-view > table thead th.fc-day-header { background-color: #ECF3FD; text-align: left; padding: 3px 10px; padding-left: 20px; } @media only screen and (max-width: 479px) { .fc-view > table thead th.fc-day-header { padding-left: 8px; } } .fc-view > table thead th.fc-day-header.fc-sun { background-color: #FFF4E6; color: #FFB959; } .fc-ltr .fc-basic-view .fc-day-top .fc-day-number { float: none; padding: 4px 10px; display: inline-block; } .fc-toolbar.fc-header-toolbar { padding: 12px 20px; margin-bottom: 4px; } .fc-toolbar.fc-header-toolbar .fc-left h2 { display: inline-block; margin-right: 10px; } .fc-toolbar.fc-header-toolbar .fc-left .fc-button { padding: 0; } .fc-toolbar.fc-header-toolbar .fc-left .fc-today-button { margin-left: 15px; background-color: #67CF94; padding: 2px 16px; text-transform: capitalize; height: 25px; } .fc-toolbar.fc-header-toolbar .fc-button-group .fc-button { background-color: #F5F5F5; padding: 5px 20px; text-transform: capitalize; } .fc-toolbar.fc-header-toolbar .fc-button-group .fc-button:not(:last-child) { margin-right: 10px; } .fc-event-container .fc-content { font-size: 12px; } .fc-event-container .fc-content .fc-time { position: relative; margin-right: 12px; } .fc-event-container .fc-content .fc-time:after { position: absolute; right: -10; content: "m"; bottom: 0; } .fc-day-top.fc-today { position: relative; } .fc-day-top.fc-today:after { position: absolute; content: "Today"; color: #aeaeae; right: 10px; top: 8px; line-height: 1; } .fc-button { background: none; } .m_style { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #D5D5D5; padding: 3px 10px; height: 32px; border-radius: 2px; } .m_style label { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 10px; } .m_style label svg { width: 12px; height: 12px; } .m_style input { border: none; width: 100%; } .m_style select { border: none; width: 180px; } .m_style select.m-state { width: 70px; } #createEventModal .modal-content { padding-top: 4px; padding-bottom: 4px; } #createEventModal .modal-header .calendar-modal-title label { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #createEventModal .modal-header .calendar-modal-private { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 33px; margin-left: 10px; cursor: pointer; } #createEventModal .modal-header .close { padding: 10px; position: absolute; right: 20px; top: 16px; } #createEventModal .calendar-modal-checkbox label { width: -webkit-max-content; width: -moz-max-content; width: max-content; cursor: pointer; } #createEventModal .modal-footer .btn, #createEventModal .modal-footer #example-vertical > .actions ul li a[href="#next"], #example-vertical > .actions ul li #createEventModal .modal-footer a[href="#next"], #createEventModal .modal-footer #example-vertical > .actions ul li a[href="#finish"], #example-vertical > .actions ul li #createEventModal .modal-footer a[href="#finish"] { padding: 13px 25px; } #fullCalModal .modal-dialog { max-width: 290px; } @media only screen and (max-width: 575px) { #fullCalModal .modal-dialog { margin-left: auto; margin-right: auto; } } #fullCalModal .modal-content { border: 0; border-top: 3px solid #4F9DF8; padding-top: 4px; padding-bottom: 4px; } #fullCalModal .modal-header h6 { line-height: 1.28; text-transform: none; margin-top: 2px; margin-bottom: 4px; } #fullCalModal .calendar-modal-location, #fullCalModal .calendar-modal-visibility { margin-bottom: 3px; } #fullCalModal .calendar-modal-location .icon, #fullCalModal .calendar-modal-visibility .icon { width: 10px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 10px; } #fullCalModal .calendar-modal-Event .color { width: 10px; height: 10px; background-color: #4F9DF8; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 10px; } #fullCalModal .modal-footer { position: relative; } #fullCalModal .modal-footer:after { width: calc(100% - 32px); left: 16px; background-color: #F5F5F5; height: 1px; top: 0; content: ""; position: absolute; } #fullCalModal .modal-footer:before { width: 1px; height: 14px; left: 50%; background-color: #E5E5E5; top: 50%; margin-top: -7px; content: ""; position: absolute; } #fullCalModal .modal-footer > button { position: relative; background-color: transparent; padding: 0; margin: 0; } @media only screen and (max-width: 575px) { .fc-toolbar .fc-left, .fc-toolbar .fc-right { width: 100%; } } @media only screen and (max-width: 575px) { .fc-toolbar .fc-right { margin-top: 5px; } } @media only screen and (max-width: 1399px) { .fc-day-top.fc-today:after { font-size: 12px; } } @media only screen and (max-width: 1024px) { .fc-day-top.fc-today:after { font-size: 10px; right: auto; left: 3px; top: 30px; } } .fc-event.fc-resizable { background-color: #50cb89; } .fc-event.fc-resizable .fc-content .fc-title { color: #fff; } /* ************************ 06.5: Invoice ********************* */ .invoice-header-left .dropdown-button { margin-left: 10px; } .invoice-header-left .dropdown-button > a { background-color: #F5F5F5; padding: 10px 20px; } .invoice-header-left .dropdown-button > a i { margin-left: 5px; position: relative; top: 2px; } /* Invoice Details */ .invoice-details-header { line-height: 1; padding: 15px 22px 15px 30px; } .invoice-pd { padding: 50px 60px; } @media only screen and (max-width: 479px) { .invoice-pd { padding: 30px 20px; } } .invoice-left .list-invoice li { color: #E9E7FF; } .invoice-left .list-invoice li a { color: #E9E7FF; } .invoice-left .list-invoice li.location:before { content: url("../../assets/img/svg/location-icon.svg"); } .invoice-left .list-invoice li.call:before { content: url("../../assets/img/svg/call-icon.svg"); } .invoice-right .status-list li:not(:last-child) { margin-bottom: 8px; } .invoice-right .status-list .key { color: #CAC6FB; min-width: 90px; } .status-list li { display: -webkit-box; display: -ms-flexbox; display: flex; } .status-list li:not(:last-child) { margin-bottom: 12px; } .status-list span { display: inline-block; } .status-list .key { min-width: 100px; } .details-list-wrap { padding: 10px 40px 30px; } @media only screen and (max-width: 479px) { .details-list-wrap { padding: 0 15px 20px; } } .details-list-wrap .invoice-list-table.some-center th:not(:nth-child(1)):not(:nth-child(2)), .details-list-wrap table.some-center.contact-list-table th:not(:nth-child(1)):not(:nth-child(2)), .details-list-wrap .invoice-list-table.some-center td:not(:nth-child(1)):not(:nth-child(2)), .details-list-wrap table.some-center.contact-list-table td:not(:nth-child(1)):not(:nth-child(2)) { text-align: center; } .list-invoice li { position: relative; padding-left: 30px; } .list-invoice li:not(:last-child) { margin-bottom: 15px; } .list-invoice li.location:before, .list-invoice li.call:before, .list-invoice li.mail:before, .list-invoice li.user:before { position: absolute; content: url("../../assets/img/svg/location-icon1.svg"); left: 0; top: 2px; } .list-invoice li.call:before { content: url("../../assets/img/svg/call-icon1.svg"); } .list-invoice li.user:before { content: url("../../assets/img/svg/user-icon.svg"); } .list-invoice li.mail:before { content: url("../../assets/img/svg/mail-icon.svg"); } .invoice.edit input { max-width: 290px; } .invoice.edit .list-invoice li:before { top: 5px; } @media only screen and (max-width: 479px) { .proceed-to-checkout.invoice-edit { margin-right: 0px; } } .proceed-to-checkout.invoice-edit .btn, .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a[href="#next"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a[href="#next"], .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a[href="#finish"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a[href="#finish"] { min-width: 140px; } .proceed-to-checkout.invoice-edit .btn:not(:last-child), .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a:not(:last-child)[href="#next"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#next"], .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a:not(:last-child)[href="#finish"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#finish"] { margin-right: 30px; } @media only screen and (max-width: 479px) { .proceed-to-checkout.invoice-edit .btn:not(:last-child), .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a:not(:last-child)[href="#next"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#next"], .proceed-to-checkout.invoice-edit #example-vertical > .actions ul li a:not(:last-child)[href="#finish"], #example-vertical > .actions ul li .proceed-to-checkout.invoice-edit a:not(:last-child)[href="#finish"] { margin-right: 15px; } } /* ************************ 06.6: Contact ********************* */ .contact-header, .project-header { padding: 15px 20px; } .contact-header-left .search-form, .project-header-left .search-form, .contact-header-left .add-title, .project-header-left .add-title { max-width: 625px; } .contact-header-right > div:not(:last-child), .project-header-right > div:not(:last-child) { margin-right: 20px; } @media only screen and (max-width: 575px) { .modal-upload-avatar .content p br { display: none; } } @media only screen and (max-width: 575px) { .contact-account-setting { width: 100%; } } .contact-account-setting input { padding-left: 15px; padding-right: 10px; } #contactAddModal .modal-dialog, #contactEditModal .modal-dialog { max-width: 750px; } #contactAddModal .modal-body, #contactEditModal .modal-body { padding: 30px 50px 40px 60px; } @media only screen and (max-width: 767px) { #contactAddModal .modal-body, #contactEditModal .modal-body { padding: 30px 20px; } } #contactAddModal .modal-body .cancel, #contactEditModal .modal-body .cancel { color: #FC7383; } #contactAddModal .modal-content, #contactEditModal .modal-content { border: 0; } /* Contact Grid */ .contact-box .contact-head { padding: 15px; background-color: #ECF3FD; position: relative; } .contact-box .contact-head .dropdown-button { position: absolute; right: 10px; top: 15px; } .contact-box .contact-head .dropdown-button .dropdown-menu { min-width: 90px; } .contact-box .contact-body { padding: 15px; } .contact-box .contact-body a { display: block; margin-bottom: 12px; } /* ************************ 06.7: Project Manager ********************* */ .project-header-right .custom-checkbox { top: 3px; -webkit-transform: none; -ms-transform: none; transform: none; margin-right: 17px; } .project-box { position: relative; min-height: 100px; padding: 11px 10px 13px 14px; } .project-box .custom-checkbox { position: absolute; left: -7px; top: 2px; } .project-box > a svg { width: 15px; height: 15px; } .project-box > a svg g line { stroke: #35C2AC; } .project-box .dropdown-button .dropdown-menu { max-width: 140px; } .project-box.one { background-color: #FBF6D0; } .project-box.two { background-color: #CCF5F8; } .project-box.three { background-color: #E9E7FF; } .project-box.four { background-color: #FEE7FF; } .project-box.five { background-color: #ECF3FD; } .project-box.six { background-color: #DBF7E8; } .project-box.seven { background-color: #FFF4E6; } .project-box.eight { background-color: #FFE2E6; } .board-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 20px; padding-left: 1px; position: relative; min-height: 68vh; } .board { min-width: 376px; max-width: 376px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: block; white-space: initial; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: -webkit-min-content; height: -moz-min-content; height: min-content; position: relative; } .board:not(:last-child) { margin-right: 30px; } @media only screen and (max-width: 479px) { .board { min-width: 330px; max-width: 330px; } } .board .board-header { background-color: #ECF3FD; padding: 10px; } .board .board-cards .board-card { position: relative; margin-bottom: 10px; padding: 10px; cursor: pointer; } .board .board-cards .board-card img { width: 100%; } .board .board-cards .board-card:last-child { margin-bottom: 20px; } .board .board-cards .board-card:before { width: 3px; background-color: #FC7383; display: block; height: calc(100% - 20px); top: 10px; left: -1.5px; } .board .board-cards .board-card .left img, .board .board-cards .board-card .left svg { width: 15px; height: 15px; } .board .board-cards .board-card.label-2:before { background-color: #FFB959; } .board .board-cards .board-card.label-3:before { background-color: #E580FD; } .board .board-cards .board-card.label-4:before { background-color: #4F9DF8; } .board .board-cards .board-card.active { background-color: #FFE2E6; } .board .board-cards .board-card.active .left svg g circle, .board .board-cards .board-card.active .left svg g path { stroke: #FC7383; } .board .board-cards .board-card.active .left a { color: #FC7383; } .board .board-composer { background-color: #f5f5f5; } .board .board-composer > a { padding: 10px; } .board .board-composer .add-card svg g line { stroke: #727272; } .board .board-composer .add-another-card.style--two { display: -webkit-box; display: -ms-flexbox; display: flex; } .add-card { padding: 10px; padding-bottom: 20px; position: relative; top: 0; } .add-card .actions .cancel { color: #FC7383; } .add-card.add-another-list { width: 100%; padding-bottom: 10px; background-color: #ECF3FD; } .add-card.add-another-list .theme-input-style { height: 30px; } .labels, .label-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .labels .label, .label-item .label { width: 10px; height: 20px; background-color: #FC7383; display: block; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .labels .label:not(:last-child), .label-item .label:not(:last-child) { margin-right: 8px; } .labels .label svg, .label-item .label svg { width: 8px; height: 8px; } .labels .label.add-label, .label-item .label.add-label { width: 20px; } .labels .label.label-2, .label-item .label.label-2 { background-color: #FFB959; } .labels .label.label-3, .label-item .label.label-3 { background-color: #E580FD; } .labels .label.label-4, .label-item .label.label-4 { background-color: #4F9DF8; } .labels .label.label-5, .label-item .label.label-5 { background-color: #67CF94; } .labels .label.label-6, .label-item .label.label-6 { background-color: #0079bf; } .labels .label.label-7, .label-item .label.label-7 { background-color: #00c2e0; } .labels .label.label-8, .label-item .label.label-8 { background-color: #67CF94; } .labels .label.label-9, .label-item .label.label-9 { background-color: #ff78cb; } .labels .label.label-10, .label-item .label.label-10 { background-color: #344563; } .labels .label.label-11, .label-item .label.label-11 { background-color: #b3bac5; } #projectTaskDetails .modal-dialog { max-width: 780px; } @media only screen and (min-width: 0px) and (max-width: 800px) { #projectTaskDetails .modal-dialog { max-width: calc(100% - 20px); } } #projectTaskDetails .modal-content .project-main-title { position: relative; } #projectTaskDetails .modal-content .project-main-title textarea { position: absolute; top: -5px; left: -10px; width: calc(100% + 10px); overflow: hidden; padding: 5px 10px; line-height: 1; z-index: -1; text-transform: capitalize; } #projectTaskDetails .modal-content .project-main-title textarea.isEditing { z-index: 1; } #projectTaskDetails .modal-content .project-description .description.edit { margin-bottom: 90px; } #projectTaskDetails .modal-content .project-description .des-edit-actions { position: absolute; left: 0; top: 0; padding: 10px; background-color: #f0f0f0; z-index: 2; } #projectTaskDetails .modal-content .project-description .des-edit-actions textarea { background-color: #f0f0f0; padding: 0px; } #projectTaskDetails .modal-content .project-description .des-edit-controls .icon-close { font-size: 23px; } #projectTaskDetails .modal-content .task-status a { text-decoration: underline; } #projectTaskDetails .modal-content .cover-img { height: 180px; max-height: 180px; position: relative; } #projectTaskDetails .modal-content .cover-img .attach-file { width: auto; height: auto; padding: 5px 10px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background-color: rgba(155, 155, 155, 0.5); right: 10px; bottom: 10px; position: absolute; } #projectTaskDetails .modal-content .cover-img .attach-file i { font-size: 14px; margin-right: 3px; } #projectTaskDetails .modal-content .modal-close { width: 40px; height: 40px; background-color: rgba(155, 155, 155, 0.5); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; right: 10px; top: 10px; cursor: pointer; } #projectTaskDetails .modal-content .modal-close svg { width: 12px; height: 12px; } #projectTaskDetails .modal-content .modal-close svg path { stroke: #ffffff; } #projectTaskDetails .modal-content .attachment img { max-width: 190px; max-height: 100px; } #projectTaskDetails .modal-content .checklist .process-bar-wrapper { margin-left: 35px; background-color: #f0f0f0; margin-bottom: 12px; width: calc(100% - 35px); } #projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-width { left: -35px; top: -7px; font-size: 11px; } #projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-name { font-size: 16px; text-transform: lowercase; margin-bottom: 12px; } #projectTaskDetails .modal-content .checklist .process-bar-wrapper .process-name:before { position: absolute; font-family: icofont; font-size: 18px; left: -35px; content: "\eed9"; top: 0; } #projectTaskDetails .modal-content .checklist .process-bar-wrapper .action-btns { position: absolute; right: 0; bottom: 15px; } #projectTaskDetails .modal-content .checklist .process-bar-wrapper .action-btns .light-btn:not(:last-child), #projectTaskDetails .modal-content .checklist .process-bar-wrapper .action-btns span:not(:last-child) { margin-right: 4px; } #projectTaskDetails .modal-content .checklist .checklist-items { margin-bottom: 10px; } #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item { margin-left: 35px; line-height: 1.8; } #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details { padding: 5px 0; z-index: 1; cursor: pointer; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } } #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details:after { width: calc(100% + 5px); height: 100%; left: -5px; position: absolute; content: ""; top: 0; z-index: -1; } #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details .icon-delete { opacity: 0; visibility: hidden; padding: 5px; } #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details:hover:after { background-color: #f0f0f0; } #projectTaskDetails .modal-content .checklist .checklist-item-wrap .checklist-item-details:hover .icon-delete { visibility: visible; opacity: 1; } #projectTaskDetails .modal-content .dashboard-date { margin-left: 26px; } #projectTaskDetails .modal-content .checklist-new-item .theme-input-style { height: 37px; padding: 6px 10px; margin: 10px 0; } #projectTaskDetails .modal-content .checklist-new-item .checklist-add-control-wrap { display: none; } #projectTaskDetails .modal-content .checklist-new-item .checklist-add-controls .icon-close { font-size: 26px; cursor: pointer; } #projectTaskDetails .modal-content .comment-edit { position: relative; } #projectTaskDetails .modal-content .edit-actions { left: -5px; top: 0; position: absolute; width: calc(100% + 10px); z-index: 1; padding: 10px; } #projectTaskDetails .modal-content .edit-actions textarea { width: 100%; } .file-attachments .attachment { position: relative; } .file-attachments .attachment .attachment-close { position: absolute; top: -7px; left: -7px; opacity: 0; visibility: hidden; background-color: #FFE2E6; width: 20px; height: 20px; cursor: pointer; } .file-attachments .attachment .attachment-close svg { width: 7px; height: 7px; } .file-attachments .attachment:hover .attachment-close { opacity: 1; visibility: visible; } #projectMemberModal, #projectLabelModal, #projectChecklistModal, #projectMoveModal, #projectCopyModal, #projectShareModal { position: fixed; z-index: 9999; left: -9999px; top: -9999px; min-width: 304px; max-width: 304px; display: none; } #projectMemberModal .modal-content, #projectLabelModal .modal-content, #projectChecklistModal .modal-content, #projectMoveModal .modal-content, #projectCopyModal .modal-content, #projectShareModal .modal-content { padding: 15px 10px; border-radius: 3px; } #projectMemberModal .modal-content .modal-close, #projectLabelModal .modal-content .modal-close, #projectChecklistModal .modal-content .modal-close, #projectMoveModal .modal-content .modal-close, #projectCopyModal .modal-content .modal-close, #projectShareModal .modal-content .modal-close { position: absolute; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; right: 12px; top: 16px; } #projectMemberModal .modal-content .modal-close svg, #projectLabelModal .modal-content .modal-close svg, #projectChecklistModal .modal-content .modal-close svg, #projectMoveModal .modal-content .modal-close svg, #projectCopyModal .modal-content .modal-close svg, #projectShareModal .modal-content .modal-close svg { width: 12px; height: 12px; } #projectMemberModal .modal-content .modal-header, #projectLabelModal .modal-content .modal-header, #projectChecklistModal .modal-content .modal-header, #projectMoveModal .modal-content .modal-header, #projectCopyModal .modal-content .modal-header, #projectShareModal .modal-content .modal-header { padding-bottom: 13px; margin-bottom: 10px; border-color: #e8e8e8; } #projectMemberModal .modal-content .modal-body .theme-input-style, #projectLabelModal .modal-content .modal-body .theme-input-style, #projectChecklistModal .modal-content .modal-body .theme-input-style, #projectMoveModal .modal-content .modal-body .theme-input-style, #projectCopyModal .modal-content .modal-body .theme-input-style, #projectShareModal .modal-content .modal-body .theme-input-style { border-radius: 3px; padding: 5px 10px; height: 35px; -webkit-box-shadow: inset 0 0 0 2px #e8e8e8; box-shadow: inset 0 0 0 2px #e8e8e8; } #projectLabelModal .modal-header .back-btn { position: absolute; left: 10px; font-size: 20px; top: 7px; cursor: pointer; } #projectLabelModal .modal-content.add-labels { display: none; } #projectChecklistModal .checklist-copy-source { border: 2px solid #b6b6b6; } #projectCopyModal .modal-content .modal-body textarea.theme-input-style { height: 70px; padding: 10px; resize: auto; } #projectShareModal .modal-body .form-group .input-wrap { background-color: #f0f0f0; padding: 5px; } #projectShareModal .modal-body .form-group .input-wrap .theme-input-style { height: 25px; background-color: transparent; } #projectShareModal .modal-body .form-group .input-wrap .menu-icon span { padding: 0; margin: 0; height: 4px; } #projectShareModal .modal-body .form-group .input-wrap .menu-icon span:not(:last-child) { margin-bottom: 3px; } #projectShareModal .modal-body .form-group.comment { margin-bottom: 25px; display: none; } #projectShareModal .modal-body .form-group.comment textarea.theme-input-style { height: 70px; } .project-board-select-wrap { background-color: #f0f0f0; } .project-board-select-wrap .board { padding: 5px 10px 0; } .project-board-select-wrap select { background-color: #f0f0f0; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0 10px 8px; cursor: pointer; } .select-grid { display: -webkit-box; display: -ms-flexbox; display: flex; } .select-grid > div:first-child { margin-right: 3%; -webkit-box-flex: 1; -ms-flex: 1 1 65%; flex: 1 1 65%; max-width: 65%; } .select-grid > div:last-child { -webkit-box-flex: 1; -ms-flex: 1 1 32%; flex: 1 1 32%; max-width: 32%; } .checklist-items .checklist-item .custom-checkbox { top: 55%; width: 14px; height: 14px; } .checklist-items .checklist-item .item { padding-left: 26px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } /* Post Comments */ #projectTaskDetails .comments-area .single-comment { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #F5F5F5; } @media only screen and (max-width: 479px) { #projectTaskDetails .comments-area .single-comment { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } #projectTaskDetails .comments-area .single-comment .comment-content p { margin: 5px 0 3px; } #projectTaskDetails .comments-area ul.children { margin-left: 56px; } @media only screen and (max-width: 479px) { #projectTaskDetails .comments-area ul.children { margin-left: 15px; } } .board-members-list li { position: relative; border-radius: 3px; } .board-members-list li.selected { background-color: #f0f0f0; } .board-members-list li.active { padding-right: 40px; } .board-members-list li.active .icon-check { position: absolute; width: 38px; height: 38px; display: block; right: 5px; padding: 10px; top: 0; } .board-members-list li.active .icon-check:after { content: ""; position: absolute; left: 16px; top: 13px; width: 6px; height: 10px; border: solid #727272; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .board-labels-list li a { font-size: 12px; } .board-labels-list li .label { width: calc(100% - 30px); padding: 5px 10px; height: 32px; display: block; border-radius: 3px; position: relative; -webkit-transition: padding 85ms,margin 85ms,-webkit-box-shadow 85ms; transition: padding 85ms,margin 85ms,-webkit-box-shadow 85ms; -o-transition: padding 85ms,margin 85ms,box-shadow 85ms; transition: padding 85ms,margin 85ms,box-shadow 85ms; transition: padding 85ms,margin 85ms,box-shadow 85ms,-webkit-box-shadow 85ms; } .board-labels-list li.active .icon-check { position: absolute; width: 32px; height: 32px; display: block; right: 0px; padding: 10px; top: 0; } .board-labels-list li.active .icon-check:after { content: ""; position: absolute; left: 13px; top: 10px; width: 6px; height: 10px; border: solid #ffffff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .board-labels-list li.selected .label { -webkit-box-shadow: -8px 0 rgba(0, 0, 0, 0.3); box-shadow: -8px 0 rgba(0, 0, 0, 0.3); margin-left: 4px; } .board-labels-select-color { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .board-labels-select-color li { -webkit-box-flex: 1; -ms-flex: 1 1 17%; flex: 1 1 17%; max-width: 18%; } .board-labels-select-color li .label { width: 100%; height: 32px; display: block; border-radius: 3px; position: relative; -webkit-transition: padding 85ms,margin 85ms,-webkit-box-shadow 85ms; transition: padding 85ms,margin 85ms,-webkit-box-shadow 85ms; -o-transition: padding 85ms,margin 85ms,box-shadow 85ms; transition: padding 85ms,margin 85ms,box-shadow 85ms; transition: padding 85ms,margin 85ms,box-shadow 85ms,-webkit-box-shadow 85ms; } .edit-labels-no-color li.active .icon-check, .edit-labels-no-color .label-item.active .icon-check, .board-labels-select-color li.active .icon-check, .board-labels-select-color .label-item.active .icon-check { position: absolute; width: 32px; height: 32px; display: block; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding: 10px; top: 0; } .edit-labels-no-color li.active .icon-check:after, .edit-labels-no-color .label-item.active .icon-check:after, .board-labels-select-color li.active .icon-check:after, .board-labels-select-color .label-item.active .icon-check:after { content: ""; position: absolute; left: 13px; top: 10px; width: 6px; height: 10px; border: solid #ffffff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .edit-labels-no-color .label-item .label { min-width: 48px; height: 32px; background-color: #b3bac5; border-radius: 3px; position: relative; } /* ************************ 06.8: File Manager ********************* */ .file-header .search-form { max-width: 640px; } .file-header .custom-checkbox { top: 0; -webkit-transform: none; -ms-transform: none; transform: none; } .file { margin-bottom: 20px; position: relative; } .file .dropdown-button { visibility: hidden; opacity: 0; } .file .img { min-width: 40px; } .file:hover .dropdown-button, .file.active .dropdown-button { visibility: visible; opacity: 1; } .file .custom-checkbox { width: 18px; height: 18px; top: -10px; left: -10px; -webkit-transform: none; -ms-transform: none; transform: none; } /* Share Modal */ #shareModal .modal-dialog { max-width: 580px; } #shareModal .modal-content { border-radius: 3px; padding: 30px; } @media only screen and (max-width: 575px) { #shareModal .modal-content { padding: 15px 10px; } } #shareModal .modal-content .modal-close { position: absolute; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; right: 12px; top: 16px; } #shareModal .modal-content .modal-close svg { width: 12px; height: 12px; } #shareModal .modal-content .modal-header { padding-bottom: 13px; margin-bottom: 10px; border-color: #e8e8e8; } #shareModal .modal-content .modal-body .form-group .input-wrap { background-color: #f0f0f0; padding: 5px; } #shareModal .modal-content .modal-body .form-group .input-wrap .theme-input-style { height: 25px; background-color: transparent; border-radius: 3px; padding: 5px 10px; } #shareModal .modal-content .modal-body .form-group .input-wrap .menu-icon span { padding: 0; margin: 0; height: 4px; } #shareModal .modal-content .modal-body .form-group .input-wrap .menu-icon span:not(:last-child) { margin-bottom: 3px; } #shareModal .modal-content .modal-body .form-group.comment { margin-bottom: 25px; display: none; } #shareModal .modal-content .modal-body .form-group.comment textarea.theme-input-style { height: 70px; } @media only screen and (max-width: 575px) { #shareModal.style--two { width: 100%; } } #shareModal.style--two .modal-content { max-width: 585px; width: 585px; } @media only screen and (max-width: 767px) { #shareModal.style--two .modal-content { width: 565px; } } @media only screen and (max-width: 575px) { #shareModal.style--two .modal-content { width: calc(100% - 16px); margin-left: 8px; } } #shareModal.style--two .modal-content .form-group.comment { display: block; } /* File Manager Upload Modal */ #fileManagerUpload .modal-dialog { max-width: 1050px; } @media only screen and (max-width: 1024px) { #fileManagerUpload .modal-dialog { margin-left: 8px; margin-right: 8px; } } #fileManagerUpload .modal-close { position: absolute; right: 14px; top: 10px; z-index: 1; } /* File Details */ #fileDetails .modal-dialog { max-width: 585px; width: 585px; } @media only screen and (max-width: 575px) { #fileDetails .modal-dialog { width: calc(100% - 16px); } } #fileDetails .modal-body { padding: 30px; } @media only screen and (max-width: 575px) { #fileDetails .modal-body { padding: 20px; } } @media only screen and (max-width: 479px) { #fileDetails .modal-body { padding-top: 50px; } } #fileDetails .modal-body .modal-close { position: absolute; right: 15px; top: 10px; cursor: pointer; } #fileDetails .modal-body .left { margin-left: 30px; margin-right: 60px; } @media only screen and (max-width: 575px) { #fileDetails .modal-body .left { margin-left: 0; margin-right: 20px; } } /* Dropzone */ .dropzone { background: white; border-radius: 3px; border: 2px dashed #35C2AC; -o-border-image: none; border-image: none; max-width: 1050px; width: 1050px; min-height: 540px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (max-width: 1024px) { .dropzone { width: calc(100% - 16px); } } .dropzone.dz-started { display: block; } .dropzone.dz-started .upload-icon { display: none; } .dropzone.style--two { min-height: 345px; width: 100%; max-width: 100%; border-color: #CAC6FB; border-radius: 20px; } .dropzone.style--three { min-height: 275px; width: 100%; max-width: 100%; border-color: #CAC6FB; border-radius: 20px; } /* ************************ 07.1: Form Element ********************* */ .form-element { padding: 37px 30px 40px; } @media only screen and (max-width: 479px) { .form-element { padding: 22px 15px 25px; } } .form-element.color-options, .form-element.horizontal-form, .form-element.basic-checkbox { padding: 27px 30px 30px; } .form-element.touchspin { padding: 25px 30px; } @media only screen and (max-width: 479px) { .form-element.touchspin { padding: 20px 15px; } } .custom-checkbox + label, .custom-radio + label { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Input Group Addon */ .input-group.addon .input-group-prepend .input-group-text, .input-group.addon .input-group-append .input-group-text { background-color: #ECF3FD; } .input-group.addon .input-group-prepend .input-group-text:not(:first-child), .input-group.addon .input-group-append .input-group-text:not(:first-child) { margin-left: 2px; } .input-group.addon .input-group-prepend .input-group-text.style--two, .input-group.addon .input-group-append .input-group-text.style--two { border-radius: 5px 0 0 5px; } .input-group.addon .input-group-prepend .input-group-text.style--three, .input-group.addon .input-group-append .input-group-text.style--three { border-radius: 0 5px 5px 0; } .input-group.addon .form-control { background-color: #f0f0f0; border-radius: 0 5px 5px 0; font-size: 15px; height: 40px; } .input-group.addon .form-control.style--two { border-radius: 5px 0 0 5px; } /* Range Slider */ input[type=range] { -webkit-appearance: none; margin: 13px 0; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb { width: 100%; height: 10px; cursor: pointer; background-color: #CCF5F8; border-radius: 50px; } input[type=range]::-webkit-slider-thumb { border: 2px solid #09D1DE; height: 26px; width: 12px; border-radius: 50px !important; -webkit-appearance: none; margin-top: -8px; } input[type=range]::-moz-range-track, input[type=range]::-moz-range-thumb { width: 100%; height: 10px; cursor: pointer; background-color: #CCF5F8; border-radius: 50px; } input[type=range]::-moz-range-thumb { border: 2px solid #09D1DE; height: 26px; width: 12px; } input[type=range]::-ms-track { width: 100%; height: 10px; cursor: pointer; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent; } input[type=range]::-ms-fill-lower { background-color: #CCF5F8; border-radius: 50px; } input[type=range]::-ms-fill-upper { background-color: #CCF5F8; border-radius: 50px; } input[type=range]::-ms-thumb { border: 2px solid #09D1DE; height: 26px; width: 12px; border-radius: 50px; background-color: #CCF5F8; cursor: pointer; } /* Switcher */ .switch { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 46px; height: 25px; } .switch input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .switch input:checked ~ .control { background-color: #E9E7FF; } .switch input:checked ~ .control:after { left: 21px; } .switch input:checked ~ .control .check { left: 21px; } .switch input:checked ~ .control .check:before { width: 11px; -webkit-transform: rotate(-45deg) translate(-2px, 14px); -ms-transform: rotate(-45deg) translate(-2px, 14px); transform: rotate(-45deg) translate(-2px, 14px); } .switch input:checked ~ .control .check:after { width: 7px; -webkit-transform: rotate(45deg) translate(13px, 5px); -ms-transform: rotate(45deg) translate(13px, 5px); transform: rotate(45deg) translate(13px, 5px); } .switch input:disabled ~ .control { background-color: #F5F5F5; } .switch input:disabled ~ .control .check:before { display: none; } .switch input:disabled ~ .control .check:after { -webkit-transform: rotate(0deg) translate(7px, 11px); -ms-transform: rotate(0deg) translate(7px, 11px); transform: rotate(0deg) translate(7px, 11px); } .switch .control { position: absolute; top: 0; left: 0; height: 25px; width: 46px; -webkit-transition: background-color 0.15s ease-in; -o-transition: background-color 0.15s ease-in; transition: background-color 0.15s ease-in; } .switch .control:after { content: ""; position: absolute; left: 0px; top: 0px; width: 25px; height: 25px; -webkit-transition: left 0.15s ease-in; -o-transition: left 0.15s ease-in; transition: left 0.15s ease-in; } .switch .check { width: 25px; height: 25px; position: absolute; -webkit-transition: .4s ease; -o-transition: .4s ease; transition: .4s ease; top: 0; left: 0; } .switch .check:before, .switch .check:after { height: 3px; border-radius: 10px; background: #fff; -webkit-transition: .4s ease; -o-transition: .4s ease; transition: .4s ease; content: ""; position: absolute; } .switch .check:before { width: 11px; -webkit-transform: rotate(-45deg) translate(-3px, 12px); -ms-transform: rotate(-45deg) translate(-3px, 12px); transform: rotate(-45deg) translate(-3px, 12px); } .switch .check:after { width: 11px; -webkit-transform: rotate(45deg) translate(12px, 3px); -ms-transform: rotate(45deg) translate(12px, 3px); transform: rotate(45deg) translate(12px, 3px); } .switch.with-icon .control:after { display: none; } .switch.large { width: 70px; height: 40px; } .switch.large input:checked ~ .control:after { left: 30px; } .switch.large input:checked ~ .control .check { left: 30px; } .switch.large input:checked ~ .control .check:before { width: 16px; -webkit-transform: rotate(-45deg) translate(-3px, 23px); -ms-transform: rotate(-45deg) translate(-3px, 23px); transform: rotate(-45deg) translate(-3px, 23px); } .switch.large input:checked ~ .control .check:after { width: 10px; -webkit-transform: rotate(45deg) translate(22px, 7px); -ms-transform: rotate(45deg) translate(22px, 7px); transform: rotate(45deg) translate(22px, 7px); } .switch.large input:disabled ~ .control .check:after { -webkit-transform: rotate(0deg) translate(12px, 18px); -ms-transform: rotate(0deg) translate(12px, 18px); transform: rotate(0deg) translate(12px, 18px); } .switch.large .control { height: 40px; width: 70px; } .switch.large .control:after { width: 40px; height: 40px; } .switch.large .check { width: 40px; height: 40px; } .switch.large .check:before { width: 16px; -webkit-transform: rotate(-45deg) translate(-5px, 21px); -ms-transform: rotate(-45deg) translate(-5px, 21px); transform: rotate(-45deg) translate(-5px, 21px); } .switch.large .check:after { width: 16px; -webkit-transform: rotate(45deg) translate(21px, 5px); -ms-transform: rotate(45deg) translate(21px, 5px); transform: rotate(45deg) translate(21px, 5px); } .switch.small { width: 25px; height: 15px; } .switch.small input:checked ~ .control:after { left: 10px; } .switch.small input:checked ~ .control .check { left: 10px; } .switch.small input:checked ~ .control .check:before { width: 7px; -webkit-transform: rotate(-45deg) translate(-1px, 9px); -ms-transform: rotate(-45deg) translate(-1px, 9px); transform: rotate(-45deg) translate(-1px, 9px); } .switch.small input:checked ~ .control .check:after { width: 4px; -webkit-transform: rotate(45deg) translate(8px, 3px); -ms-transform: rotate(45deg) translate(8px, 3px); transform: rotate(45deg) translate(8px, 3px); } .switch.small input:disabled ~ .control .check:after { -webkit-transform: rotate(0deg) translate(4px, 6.5px); -ms-transform: rotate(0deg) translate(4px, 6.5px); transform: rotate(0deg) translate(4px, 6.5px); } .switch.small .control { height: 15px; width: 25px; } .switch.small .control:after { width: 15px; height: 15px; } .switch.small .check { width: 15px; height: 15px; } .switch.small .check:before { width: 7px; height: 2px; -webkit-transform: rotate(-45deg) translate(-2px, 7px); -ms-transform: rotate(-45deg) translate(-2px, 7px); transform: rotate(-45deg) translate(-2px, 7px); } .switch.small .check:after { width: 7px; height: 2px; -webkit-transform: rotate(45deg) translate(7px, 2px); -ms-transform: rotate(45deg) translate(7px, 2px); transform: rotate(45deg) translate(7px, 2px); } .switch.outline .control { border: 1px solid; background-color: transparent !important; } .switch.outline .control:after { top: -1px; } .switch.success input:checked ~ .control { background-color: #DBF7E8; border-color: #67CF94; } .switch.success input:checked ~ .control:after { background-color: #67CF94; -webkit-box-shadow: 0 5px 10px rgba(103, 207, 162, 0.7); box-shadow: 0 5px 10px rgba(103, 207, 162, 0.7); } .switch.success.glow input:checked ~ .control:after { -webkit-box-shadow: 0 5px 10px rgba(103, 207, 162, 0.7); box-shadow: 0 5px 10px rgba(103, 207, 162, 0.7); } .switch.info input:checked ~ .control { background-color: #CCF5F8; border-color: #09D1DE; } .switch.info input:checked ~ .control:after { background-color: #09D1DE; } .switch.info.glow input:checked ~ .control:after { -webkit-box-shadow: 0 5px 10px rgba(9, 209, 222, 0.7); box-shadow: 0 5px 10px rgba(9, 209, 222, 0.7); } .switch.brand input:checked ~ .control { background-color: #E9E7FF; border-color: #35C2AC; } .switch.brand input:checked ~ .control:after { background-color: #35C2AC; } .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: #35C2AC; } .switch.primary.glow input:checked ~ .control:after { -webkit-box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7); box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7); } .switch.danger input:checked ~ .control { background-color: #FFE2E6; border-color: #FC7383; } .switch.danger input:checked ~ .control:after { background-color: #FC7383; } .switch.danger.glow input:checked ~ .control:after { -webkit-box-shadow: 0 5px 10px rgba(252, 115, 131, 0.7); box-shadow: 0 5px 10px rgba(252, 115, 131, 0.7); } .switch.dark.glow input:checked ~ .control:after { -webkit-box-shadow: 0 5px 10px rgba(174, 174, 174, 0.7); box-shadow: 0 5px 10px rgba(174, 174, 174, 0.7); } /* Bootstrap Touchspin */ .input-group.bootstrap-touchspin { margin-bottom: 0; max-width: 240px; } .input-group.bootstrap-touchspin.style--two { max-width: 345px; } .input-group.bootstrap-touchspin.shadow-v input { -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important; } .input-group.bootstrap-touchspin.shadow-v button.btn { -webkit-box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7) !important; box-shadow: 0 5px 10px rgba(130, 128, 253, 0.7) !important; } .input-group.bootstrap-touchspin.large input { height: 45px; font-size: 16px; } .input-group.bootstrap-touchspin.large button.btn { width: 46px; font-size: 26px; } .input-group.bootstrap-touchspin.small input { height: 25px; font-size: 14px; } .input-group.bootstrap-touchspin.small button.btn { width: 26px; font-size: 15px; } .input-group.bootstrap-touchspin.warning button.btn { background-color: #FFB959; } .input-group.bootstrap-touchspin.success button.btn { background-color: #67CF94; } .input-group.bootstrap-touchspin.danger button.btn { background-color: #FC7383; } .input-group.bootstrap-touchspin input { height: 36px; background-color: #F5F5F5; font-size: 15px; } .input-group.bootstrap-touchspin button.btn { padding: 5px; width: 35px; font-size: 22px; } .input-group.bootstrap-touchspin button.btn.glyphicon { padding: 0; font-size: 20px; } .input-group.bootstrap-touchspin .input-group-text { background-color: #E9E9E9; } .input-group.bootstrap-touchspin .input-group-prepend .input-group-text { margin-left: 2px; } .input-group.bootstrap-touchspin .input-group-prepend button.btn { border-radius: 5px 0px 0px 5px; } .input-group.bootstrap-touchspin .input-group-append .input-group-text { margin-right: 2px; } .input-group.bootstrap-touchspin .input-group-append button.btn { border-radius: 0px 5px 5px 0px; } .control-label { margin-bottom: 12px; } /* Bootstrap Touchspin Vertical button css */ .bootstrap-touchspin .input-group-btn-vertical { position: absolute; right: 0; height: 100%; z-index: 11; } .bootstrap-touchspin .input-group-btn-vertical > .btn, .bootstrap-touchspin #example-vertical > .actions ul li .input-group-btn-vertical > a[href="#next"], #example-vertical > .actions ul li .bootstrap-touchspin .input-group-btn-vertical > a[href="#next"], .bootstrap-touchspin #example-vertical > .actions ul li .input-group-btn-vertical > a[href="#finish"], #example-vertical > .actions ul li .bootstrap-touchspin .input-group-btn-vertical > a[href="#finish"] { position: absolute; right: 0; height: 50%; padding: 0; line-height: 1; } .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up { border-radius: 0 5px 0 0; top: 0; } .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up:after { width: 100%; height: 1px; position: absolute; bottom: -1px; left: 0; content: ""; z-index: 1; opacity: 0.3; } .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { border-radius: 0 0 5px 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } /* File Drop area Wrapper */ #file-drop-area-wrappper { padding: 50px; } @media only screen and (max-width: 575px) { #file-drop-area-wrappper { padding: 15px; } } select#locale { border: none; background: transparent; width: 80px; } /* Notes */ .note { padding: 8px 30px; } @media only screen and (max-width: 575px) { .note { padding: 8px 15px; } } .note img, .note svg, .note i, .note b { margin-right: 8px; min-width: 22px; } .note a { text-decoration: underline; font-style: italic; } .note.warning { background-color: #FFF4E6; } .note.warning b { color: #FFB959; } .note.info { background-color: #CCF5F8; } .note.info b { color: #09D1DE; } /* ************************ 07.2: Form Wizard ********************* */ #smartwizard .nav li a { font-size: 17px; height: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 0px) and (max-width: 640px) { #smartwizard .nav li a { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } #smartwizard .nav li:last-child { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } @media only screen and (min-width: 0px) and (max-width: 640px) { #smartwizard .nav li:last-child { margin-top: 10px; } } #smartwizard .nav li:last-child a { margin-left: 20px; margin-right: 20px; width: 80px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; border: 1px solid #DBF7E8; background: #fff; } #smartwizard .nav li:last-child a:before, #smartwizard .nav li:last-child a:after { display: none; } #smartwizard .nav li:last-child a i { font-size: 50px; } #smartwizard .card-body { padding-bottom: 0; } @media only screen and (max-width: 767px) { #smartwizard .card-body { padding: 0; padding-top: 20px; } } .step-done { padding: 100px 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .step-done .btn-circle { margin-bottom: 25px; } .step-done p { max-width: 510px; } .step-done > p { margin: 0 auto; text-align: center; } .sw .toolbar button.disabled { display: none; } @media only screen and (max-width: 575px) { .sw .toolbar { padding: 0 15px 30px; } } .smartwizard2-top-title { margin-top: 27px; margin-bottom: 24px; padding: 0 30px; } #smartwizard2 { padding: 0 30px; } @media only screen and (max-width: 575px) { #smartwizard2 { padding: 0 15px; } } #smartwizard2 .toolbar { padding-top: 10px; } #smartwizard2 .toolbar button.btn { padding: 13px 26px; } #smartwizard2 .nav { margin-bottom: 30px; } #smartwizard2 .nav li:last-child { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; overflow: hidden; } #example-vertical > .steps { width: 240px; margin-right: 30px; float: left; } @media only screen and (max-width: 767px) { #example-vertical > .steps { width: 160px; } } @media only screen and (max-width: 575px) { #example-vertical > .steps { width: 100%; float: none; } } #example-vertical > .steps .current-info { position: absolute; left: -999em; } #example-vertical > .steps ul { padding: 0; margin: 0; list-style: none; } @media only screen and (max-width: 575px) { #example-vertical > .steps ul { margin: 0 15px; margin-bottom: 30px; } } #example-vertical > .steps ul li { padding: 40px 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } @media only screen and (max-width: 575px) { #example-vertical > .steps ul li { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 20px 10px; } } #example-vertical > .steps ul li:last-child { display: none; } #example-vertical > .steps ul li:after { height: 100%; width: 5px; background-color: #f5f5f5; right: 0; top: 0; position: absolute; content: ""; } @media only screen and (max-width: 575px) { #example-vertical > .steps ul li:after { height: 5px; width: 100%; left: 0; top: auto; bottom: 0; } } #example-vertical > .steps ul li.done:after, #example-vertical > .steps ul li.current:after { background-color: #67CF94; } #example-vertical > .steps ul li.done a i, #example-vertical > .steps ul li.current a i { color: #35C2AC; } #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: #35C2AC; border-color: #35C2AC !important; } .chip .chip-content .img.danger { background-color: #FFE2E6; color: #FC7383; } .color-circle { width: 100px; height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* ************************ 08.2: Icons ********************* */ .icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .icon i { font-size: 24px; } .icon__name { line-height: 1; margin-left: 14px; position: relative; text-transform: lowercase; } /* ************************ 09.1: Faq ********************* */ .topic { height: 80px; color: #E580FD; background-color: #FEE7FF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px; margin-bottom: 20px; } .faq:not(:last-child) { margin-bottom: 35px; } .faq h5 { position: relative; padding-left: 20px; margin-bottom: 16px; line-height: 1.2; } .faq h5:after { width: 10px; height: 10px; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); content: ""; position: absolute; } /* ************************ 09.2: Price ********************* */ .price-box.active { -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.05); box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.05); } .price-header { background-color: #09D1DE; } .price-header.enterprise { background-color: #C491FF; } .p_header-img, .p_header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 5px; } .p_header-img { background-color: rgba(255, 255, 255, 0.15); width: 160px; height: 160px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 479px) { .p_header-img { width: 140px; height: 140px; } } .p_header-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-left: 30px; } @media only screen and (max-width: 479px) { .p_header-content { padding-left: 14px; } } .p_header-content h1 { margin-bottom: 3px; } .p_header-content h3 { margin-bottom: 5px; } .p_header-content h3, .p_header-content p { opacity: 0.70; } .price-body { background-color: #FAFAFA; padding: 40px; } @media only screen and (max-width: 479px) { .price-body { padding: 30px 20px; } } .price-body h5 { text-transform: none; } .price-body ul li { padding-left: 24px; position: relative; } .price-body ul li:not(:last-child) { margin-bottom: 12px; } .price-body ul li i { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* ************************ 09.3: Timeline ********************* */ .timeline { border-left: 5px solid #E9E7FF; letter-spacing: 0.5px; position: relative; line-height: 1.4em; padding: 0 30px; list-style: none; max-width: 70%; margin-left: 24%; } @media only screen and (max-width: 767px) { .timeline { margin-left: 0; max-width: 100%; padding-right: 0; padding-left: 20px; } } .timeline.style--two { padding-left: 60px; max-width: 100%; margin: 0; border: 0; z-index: 1; padding-bottom: 30px; } @media only screen and (max-width: 767px) { .timeline.style--two { padding-left: 50px; padding-right: 10px; } } .timeline.style--two:after { content: ""; position: absolute; left: 25.5px; top: 3px; height: calc(100% - 36px); width: 5px; background-color: #E9E7FF; z-index: -1; border-radius: 50px; } .timeline.style--two .event:before { left: 70px; min-width: auto; font-weight: normal; } .timeline .event { position: relative; } .timeline .event:not(:last-child) { margin-bottom: 26px; } .timeline .event span { font-size: 14px; display: block; margin-bottom: 5px; } .timeline .event h4 { margin-bottom: 12px; line-height: 1.2; } .timeline .event:before, .timeline .event:after { position: absolute; display: block; top: 0; } .timeline .event:before { left: -190px; content: attr(data-date); text-align: right; min-width: 120px; } @media only screen and (max-width: 767px) { .timeline .event:before { left: 70px; } } .timeline .event:after { left: -43px; content: url(../img/png-icon/time.png); } @media only screen and (max-width: 767px) { .timeline .event:after { left: -33px; } } /* ************************ 09.4: Account Setting ********************* */ .upload-avatar { margin-top: -38px; } @media only screen and (min-width: 0px) and (max-width: 1500px) { .upload-avatar { margin-top: 10px; } } .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple { background-color: #f0f0f0; border-radius: 50px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #E9E7FF; border-radius: 50px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 5px 10px; line-height: 1; margin-left: 10px; } .select2-container--default .select2-selection--multiple .select2-selection__choice button { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; font-size: 20px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__display { position: relative; bottom: -2px; } .switch-wrap { min-width: 70px; } /* ************************ 09.5: Authentication ********************* */ .auth-card { padding: 140px 30px 100px; max-width: 1050px; } /* ************************ 09.6: Coming Soon ********************* */ #DateCountdown { margin: 80px 0; width: 100%; height: 180px; } @media only screen and (max-width: 1024px) { #DateCountdown { height: 150px; } } @media only screen and (max-width: 767px) { #DateCountdown { height: 120px; } } @media only screen and (max-width: 575px) { #DateCountdown { height: 80px; margin: 50px 0; } } .time_circles { position: relative; width: 720px; height: 100%; margin: 0 auto; } @media only screen and (max-width: 1024px) { .time_circles { width: 600px; } } @media only screen and (max-width: 767px) { .time_circles { width: 480px; } } @media only screen and (max-width: 575px) { .time_circles { width: 320px; } } .time_circles > div { position: absolute; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .time_circles > div > h4 { margin: 0; padding: 0; text-align: center; text-transform: uppercase; line-height: 1; } @media only screen and (max-width: 767px) { .time_circles > div > h4 { font-size: 10px !important; } } @media only screen and (max-width: 575px) { .time_circles > div > h4 { font-size: 8px !important; } } .time_circles > div > span { margin: 0; padding: 0; display: block; width: 100%; text-align: center; line-height: 1; font-weight: bold; font-size: 36px !important; margin-bottom: 2px; } @media only screen and (max-width: 767px) { .time_circles > div > span { font-size: 26px !important; } } @media only screen and (max-width: 575px) { .time_circles > div > span { font-size: 17px !important; } } /* ************************ 09.7: Miscellaneos ********************* */ .maintenance-shape { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .newsletter-form { max-width: 510px; margin: 0 auto; position: relative; } .newsletter-form input { background-color: #ffffff; } .newsletter-form input:focus { background-color: #ffffff; } .maintenance-img { position: relative; margin-left: 120px; } @media only screen and (max-width: 1024px) { .maintenance-img { margin-left: 0; } } .maintenance-content { padding-top: 176px; margin-bottom: 167px; } @media only screen and (max-width: 767px) { .maintenance-content { padding-top: 100px; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .maintenance-content { width: 900px; margin-left: -400px; } } /* Session Timeout */ .session-timeout { width: 300px; padding: 40px 20px; text-align: center; } .session-timeout #circular { margin: 0 auto; display: inline-block; } .base-timer { position: relative; width: 150px; height: 150px; } .base-timer__svg { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .base-timer__circle { fill: none; stroke: none; } .base-timer__path-elapsed { stroke-width: 3px; stroke: #f5f5f5; } .base-timer__path-remaining { stroke-width: 3px; stroke-linecap: round; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transition: 1s linear all; -o-transition: 1s linear all; transition: 1s linear all; fill-rule: nonzero; stroke: currentColor; } .base-timer__path-remaining.c2, a.base-timer__path-remaining:hover, .dropdown-menu .dropdown-body a:hover .base-timer__path-remaining.main-text, .dropdown-menu.style--two .dropdown-body a:hover .base-timer__path-remaining.time, .base-timer__path-remaining.btn.preview, #example-vertical > .actions ul li a.base-timer__path-remaining.preview[href="#next"], #example-vertical > .actions ul li a.base-timer__path-remaining.preview[href="#finish"], .base-timer__path-remaining.btn.style--two, #example-vertical > .actions ul li a.base-timer__path-remaining.style--two[href="#next"], #example-vertical > .actions ul li a.base-timer__path-remaining.style--two[href="#finish"], .base-timer__path-remaining.btn.s_alert, #example-vertical > .actions ul li a.base-timer__path-remaining.s_alert[href="#next"], #example-vertical > .actions ul li a.base-timer__path-remaining.s_alert[href="#finish"], .base-timer__path-remaining.details-btn, .base-timer__path-remaining.light-btn, table.table-condensed thead tr:nth-child(2) th.base-timer__path-remaining, table.table-contextual .base-timer__path-remaining.details-btn:hover, table.table-contextual .details-btn:hover i.base-timer__path-remaining, .sidebar .sidebar-body li.active > a.base-timer__path-remaining, .sidebar .sidebar-body li:hover > a.base-timer__path-remaining, .fc-view > table thead th.base-timer__path-remaining.fc-day-header, .notifications a:hover p.base-timer__path-remaining, .news a:hover p.base-timer__path-remaining, .base-timer__path-remaining.icon:hover, .select2-container--default .select2-selection--multiple .base-timer__path-remaining.select2-selection__choice, .base-timer__path-remaining.p_nav-link, .about-nav-tab a.base-timer__path-remaining.active, .base-timer__path-remaining.iconwrap, .dragable-list > div.ui-sortable-helper i.base-timer__path-remaining { color: #35C2AC; } .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 #35C2AC; width: 32px; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .add-workplace { cursor: pointer; position: relative; z-index: 2; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .add-work-form, .work-update-form { position: relative; padding: 10px 5px; z-index: 3; } .add-work-form .form-control, .add-work-form .theme-input-style, .work-update-form .form-control, .work-update-form .theme-input-style { max-width: 480px; } .add-work-form .add-work-form-close, .work-update-form .add-work-form-close { position: absolute; cursor: pointer; right: 0; top: 0; } @media only screen and (max-width: 1024px) { .add-work-form .add-work-form-close, .work-update-form .add-work-form-close { top: -20px; } } .work-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 575px) { .work-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } /* User Dashboard */ .project-deadline { padding: 21px; } .project-deadline p { color: #CAC6FB; } .statistics-bounce-rate { background-color: #09D1DE; padding: 30px; } .statistics-bounce-rate .state-content { margin-right: 14px; } .statistics-bounce-rate .state-content p { color: rgba(255, 255, 255, 0.7); } .statistics-bounce-rate .state-content h3 { font-size: 30px; } .statistics-bounce-rate.order { background-color: #4F9DF8; } .statistics-bounce-rate.report { background-color: #E580FD; } .statistics-bounce-rate.support { background-color: #FFB959; } .latest-update > a { padding: 10px 0; } /* Edit Profile */ .about-myself textarea { line-height: 1.42; height: 100px; } .edit-personal-info .form-control { height: 30px; } .edit-skill .form-control { width: 60px; margin-right: 10px; height: 30px; } .edit-skill .process-bar-wrapper .process-bar { max-width: 100%; } /* News Feed */ .post-controls > div { width: 30px; height: 30px; background-color: #ECF3FD; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .post-controls > div.location { margin-right: 30px; } @media only screen and (max-width: 479px) { .post-controls > div.location { margin-right: 16px; } } .post-body p { margin-bottom: 26px; } .post-body .img.collage .big { -ms-flex-preferred-size: calc(67% - 20px); flex-basis: calc(67% - 20px); } .post-body .img.collage .small { -ms-flex-preferred-size: 33%; flex-basis: 33%; } .post-footer > div { cursor: pointer; } .post-footer .love:hover svg path { fill: #E9E7FF; stroke: #35C2AC; } .post-footer > div:not(:last-child) { margin-right: 50px; } @media only screen and (max-width: 575px) { .post-footer > div:not(:last-child) { margin-right: 20px; } } .post-footer > div .icon { margin-right: 10px; } @media only screen and (max-width: 575px) { .post-footer > div .icon { margin-right: 6px; width: 12px; } .post-footer > div .content { font-size: 12px; } } #projectTaskDetailsMain .comments-area { padding-top: 30px; } .comments-area { border-top: 1px solid #F5F5F5; } .comments-area ul { padding: 0; margin: 0; list-style-type: none; } .comments-area .single-comment { padding-bottom: 15px; margin-bottom: 15px; } @media only screen and (max-width: 479px) { .comments-area .single-comment { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .comments-area .single-comment .comment-content p { margin: 8px 0; } .comments-area .single-comment .comment-author-image { margin-bottom: 12px; } .comments-area ul.children { margin-left: 70px; } @media only screen and (max-width: 479px) { .comments-area ul.children { margin-left: 15px; } } /* ************************ 10.1: Extensions ********************* */ /* Sweet Alert */ .s_alert-cat { min-width: 160px; } /* noUi Slider */ .nouislider-cat { margin: 0; min-width: 320px; } @media only screen and (max-width: 767px) { .nouislider-cat { min-width: 220px; padding-right: 10px; } } @media only screen and (max-width: 479px) { .nouislider-cat { min-width: 100%; padding-right: 0px; } } .s_text { min-width: 90px; display: inline-block; } /* Drag & Drop */ .dragable-card { padding: 28px 30px 25px; background-color: #ECF3FD; margin-bottom: 30px; } @media only screen and (max-width: 379px) { .dragable-card { padding: 18px 20px 15px; } } .dragable-card h4 { color: #4F9DF8; } .dragable-card.dragable-card-yellow { background-color: #FFF4E6; } .dragable-card.dragable-card-yellow h4 { color: #FFB959; } .dragable-card.dragable-card-red { background-color: #FFE2E6; } .dragable-card.dragable-card-red h4 { color: #FC7383; } .dragable-card.dragable-card-green { background-color: #DBF7E8; } .dragable-card.dragable-card-green h4 { color: #67CFA2; } #dragable-product-list .product-list-item { background-color: #f0f0f0; } #dragable-product-list .product-list-item:not(:last-child) { margin-bottom: 10px; } .dragable-team > div { background-color: #f0f0f0; padding: 10px; } .dragable-team > div:not(:last-child) { margin-bottom: 3px; } .dragable-btn a { margin-bottom: 10px; } .dragable-btn a:not(:last-child) { margin-right: 30px; } @media only screen and (max-width: 1399px) { .dragable-btn a:not(:last-child) { margin-right: 15px; } } @media only screen and (max-width: 1024px) { .dragable-btn a:not(:last-child) { margin-right: 10px; } } .dragable-list > div { border-bottom: 1px solid #F5F5F5; padding: 20px; } @media only screen and (max-width: 479px) { .dragable-list > div { padding: 15px 0; } } .dragable-list > div svg, .dragable-list > div i { margin-right: 16px; cursor: all-scroll; min-width: 20px; } .dragable-list > div.ui-sortable-helper { -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05); box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05); border-color: transparent; } .dragable-list > div.ui-sortable-helper svg path#Path_365 { fill: #35C2AC; } /* 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: #35C2AC; } .swiper-slide { background-size: cover; background-position: center; } .gallery-top { height: 600px; width: 100%; } @media only screen and (max-width: 767px) { .gallery-top { height: 400px; } } @media only screen and (max-width: 575px) { .gallery-top { height: 250px; } } .gallery-thumbs { height: 80px; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; bottom: 20px; width: 50%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media only screen and (min-width: 0px) and (max-width: 1300px) { .gallery-thumbs { height: 60px; } } @media only screen and (max-width: 767px) { .gallery-thumbs { width: 80%; height: 40px; } } .gallery-thumbs .swiper-slide { height: 100%; border: 4px solid #fff; } .gallery-thumbs .swiper-slide-thumb-active { opacity: 1; } .swiper-multi-row { height: 700px; } @media only screen and (min-width: 0px) and (max-width: 1500px) { .swiper-multi-row { height: 380px; } } /* Treeview */ .treeview .list-group-item { cursor: pointer; } .treeview span.indent { margin-left: 10px; margin-right: 10px; } .treeview .node-disabled { color: silver; cursor: not-allowed; } .treeview .list-group-item { border-top: 0px solid; border-left: 0px solid; border-right: 0px solid; padding: 10px 0; } .treeview .list-group-item:last-child { border-bottom: 0px solid; } .treeview .list-group-item .badge { display: inline-block; margin-left: 20px; } .treeview .list-group-item .badge:before, .treeview .list-group-item .badge:after { top: -1px; position: relative; content: "("; } .treeview .list-group-item .badge:after { content: ")"; } /* Block UI */ .blockUI.blockOverlay { z-index: 999999 !important; } .blockUI.blockMsg.blockElement { z-index: 9999991 !important; } .blockUI.blockMsg.blockElement > span, .blockUI.blockMsg.blockElement > div { display: block; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .blockUI.blockMsg.blockPage { z-index: 9999991 !important; } .icon-spin { -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear; display: inline-block; } /* Change Language */ .card-localization .card-text { line-height: 1.733; } /*# sourceMappingURL=style.css.map */ label{ margin-bottom: 0.5rem; display: inline-flex; align-items: center; } .dataTables_length select { border: 1px solid rgba(0, 0, 0, 0.125); margin: 0 10px; } .dataTables_length {margin: 20px 10px 10px 10px;} .dataTables_filter{position: relative;margin: 10px; float: right;} .dataTables_filter input{border: 1px solid rgba(0, 0, 0, 0.125);z-index: 1;} .dataTables_filter:before{ content: 'Search by keyword'; position: absolute; top: 10px; left: 77px; color: rgba(0,0,0,0.4); z-index: 0; } .card{overflow: hidden;} .course-img-upload { width: 373px; height: 180px; overflow: hidden; } .course-img-upload img{width: 100%;height: 100%;object-fit: cover;} .btn-styles{line-height: 1;padding: 5px 10px;font-weight: 400;} .btn-outline-info:hover{color: #fff !important;font-weight: 400;background-color: #324cdd;border: #324cdd;} .close { font-size: 0.9rem; font-weight: 400; } @media only screen and (max-width:1440px){ .course-img-upload {width: 240px;height: 130px;overflow: hidden;} } .increase { /* max-width: 121px; */ display: flex; flex-direction: column; width: 100%; } .breadcrumb { background-color: #FFF; } .breadcrumb-item a{ color: #368d83 } .sidebar .sidebar-body li i { color: #35c2ac; } .sidebar .sidebar-body li.active i, .sidebar .sidebar-body li:hover i { color: #35c2ac; } .link-title{ color: #333333; } body.sidebar-folded .sidebar .sidebar-body li.active i, body.sidebar-folded .sidebar .sidebar-body li:hover i { color: #35c2ac; } .default-logo img{ height: 65px; } .congratulation-img img{ height: 180px; } .error { color: red; } select.select-bg{ background-color: #f0f0f0!important; } /** Ashwani custom css*/ .select2-container--default .select2-selection--multiple{ background-color: #f0f0f0!important; } .dataTables_filter .form-control{ margin-left: 16px; } i{ margin: 0 3px; }