/** Template Name: Material Able Admin Template Author: # Email: # File: style.css ============= == Table of Contents== - Custom Css - Generic classes - Margin, Padding, Font class, text align, position, floating, overflow, background class, text color, display class, boarder class - Theme Elements - Icons, Accordion, Button, Redial, floating actions, FAB, tabs, typography, buttons, box shadow, slider page, error page, Breadcrumb, pagination, Basic card, Login card - General Elements - Modal, Nestable, Lable & Badges, List, Portlates, Preloader, Calender, To-Do, Materialize general elements, Lables - Advance Form Elements - Pages - Loader page, Invoice, Tasklist, Task detail, Range-slider, Counter, Maintenance, Color, FAQ, Progress, Panels & wells, Contact card, Auth pages, Flag, Gallery, Products pages, Widget, Email, Social timeline, Datatable, Chat, Blog, Wizard, CRM dashboard, Task board, Issue list, Chartlist, X-editable, Home chat, Dashboard 1-2-3-4, Responsive media class ============= */ /** ===================== Custom css start ========================== **/ body { background-color: #f3f3f3; font-size: 0.875em; overflow-x: hidden; color: #455a64; font-family: "Open Sans", sans-serif; background-attachment: fixed; background-image: linear-gradient(rgba(255, 255, 255, 0.2) 180px, rgba(255, 255, 255, 0.9) 0%); } ul { padding-left: 0; list-style-type: none; margin-bottom: 0; } *:focus { outline: none; } a { font-size: 13px; color: #37474f; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media only screen and (min-width: 1400px) { a { font-size: 14px; } } a:focus, a:hover { text-decoration: none; color: #448aff; } h1, h2, h3, h4, h5, h6 { font-weight: 600; } h1 { font-size: 40px; } h2 { font-size: 32px; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 20px; } h6 { font-size: 14px; } p { font-size: 13px; } b, strong { font-weight: 500; } code { padding: 0px 3px; border-radius: 3px; } .media-left { padding-right: 20px; } /**====== Custom css end ======**/ /** ===================== Main-body css start ========================== **/ .main-body .page-wrapper { padding: 1.8rem; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } /**====== Main-body css end ======**/ /** ===================== Card-Layout css start ========================== **/ .login .container-fluid { width: auto; margin-top: 80px; } .filter-bar .navbar .navbar-nav .dropdown-menu { position: absolute; } /*====== Ready to use Css Start ======*/ .wrapper { padding: 0; } /*====== Ready to use Css End ======*/ .card { border-radius: 5px; -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08); box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08); border: none; margin-bottom: 30px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .card .card-footer { border-top: none; padding: 15px 20px; border-radius: 0 0 5px 5px; } .card .card-header { background-color: transparent; border-bottom: none; padding: 20px; position: relative; -webkit-box-shadow: 0px 1px 20px 0px rgba(69, 90, 100, 0.08); box-shadow: 0px 1px 20px 0px rgba(69, 90, 100, 0.08); } .card .card-header .card-header-left { display: inline-block; } .card .card-header .card-header-right { right: 10px; top: 13px; display: inline-block; float: right; padding: 7px 0; position: absolute; } @media only screen and (max-width: 575px) { .card .card-header .card-header-right { display: none; } } .card .card-header .card-header-right i { margin: 0 7px; cursor: pointer; font-size: 12px; color: #8c8c8c; line-height: 2; } .card .card-header .card-header-right .card-option { width: 35px; height: 20px; overflow: hidden; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .card .card-header .card-header-right .card-option li { display: inline-block; } .card .card-header span { display: block; font-size: 13px; margin-top: 5px; } .card .card-header h5 { margin-bottom: 0; color: #37474f; font-size: 15px; font-weight: 600; display: inline-block; margin-right: 10px; line-height: 1.4; position: relative; } .card .card-header h5:after { content: ""; background-color: #448aff; position: absolute; left: -20px; top: 0; width: 4px; height: 20px; } .card .card-block { padding: 20px; } .card .card-block table tr { padding-bottom: 20px; } .card .card-block .sub-title { font-size: 14px; font-weight: 500; letter-spacing: 1px; } .card .card-block code { background-color: #eee; margin: 5px; display: inline-block; } .card .card-block .dropdown-menu { top: 38px; } .card .card-block p { line-height: 1.4; } .card .card-block a.dropdown-item { margin-bottom: 0; font-size: 14px; -webkit-transition: 0.25s; transition: 0.25s; } .card .card-block a.dropdown-item:active, .card .card-block a.dropdown-item .active { background-color: #448aff; } .card .card-block.remove-label i { margin: 0; padding: 0; } .card .card-block.button-list span.badge { margin-left: 5px; } .card .card-block .dropdown-menu { background-color: #fff; padding: 0; } .card .card-block .dropdown-menu .dropdown-divider { background-color: #ddd; margin: 3px 0; } .card .card-block .dropdown-menu>a { padding: 10px 16px; line-height: 1.429; } .card .card-block .dropdown-menu>li>a:focus, .card .card-block .dropdown-menu>li>a:hover { background-color: rgba(202, 206, 209, 0.5); } .card .card-block .dropdown-menu>li:first-child>a:first-child { border-top-right-radius: 4px; border-top-left-radius: 4px; } .card .card-block .badge-box { padding: 10px; margin: 12px 0; } .card .card-block-big { padding: 35px; } .card .card-block-small { padding: 15px; } .card-footer { background: transparent; } .pcoded .card.full-card { position: fixed; top: calc(56px + 15px); z-index: 99999; -webkit-box-shadow: 0 0 35px 0px rgba(0, 0, 0, 0.44); box-shadow: 0 0 35px 0px rgba(0, 0, 0, 0.44); left: 15px; border-radius: 5px; width: calc(100vw - 50px); height: calc(100vh - 86px); -webkit-transition: all 5s ease-in-out; transition: all 5s ease-in-out; } .pcoded .card.full-card.card-load { position: fixed; } .pcoded .card.card-load { position: relative; overflow: hidden; } .pcoded .card.card-load .card-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(255, 255, 255, 0.7); z-index: 999; } .pcoded .card.card-load .card-loader i { margin: 0 auto; color: #448aff; font-size: 20px; } .card-header-text { margin-bottom: 0; font-size: 1rem; color: rgba(51, 51, 51, 0.85); font-weight: 500; display: inline-block; vertical-align: middle; } .icofont-rounded-down { display: inline-block; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } .icon-up { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .rotate-refresh { -webkit-animation: mymove 0.8s infinite linear; animation: mymove 0.8s infinite linear; display: inline-block; } @-webkit-keyframes mymove { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes mymove { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .page-header { background-image: url("../images/breadcrumb-bg.jpg"); background-size: cover; background-position: bottom left; position: relative; border-radius: 0; color: #fff; } .page-header:before { content: ""; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .page-header .page-block { padding: 35px 40px; } .page-header .page-block .breadcrumb { float: right; background: transparent; margin-bottom: 0; padding: 0; } .page-header .page-block .breadcrumb a { font-size: 14px; color: #fff; } .page-header .page-block .breadcrumb .breadcrumb-item+.breadcrumb-item::before { content: "\f105"; font-family: FontAwesome; padding-right: 5px; font-size: 12px; color: #fff; } @media only screen and (max-width: 768px) { .page-header .page-block .breadcrumb { float: left; margin-top: 10px; } } .sub-title { border-bottom: 1px solid rgba(204, 204, 204, 0.35); padding-bottom: 10px; margin-bottom: 20px; font-size: 14px; font-weight: 400; color: #2c3e50; } /**====== Card-Layout css end ======**/ /*======= Typography css start ========*/ .blockquote { border-left: 0.25rem solid #eceeef; padding: 0.5rem 1rem; } .blockquote.blockquote-reverse { text-align: right; padding-right: 1rem; border-right: 0.25rem solid #eceeef; border-left: none; } .typography h1, .typography h2, .typography h3, .typography h4, .typography h5, .typography h6 { margin: 0 0 20px; } .typography small { margin-left: 10px; font-weight: 500; color: #777; } .card-block.list-tag ul li { display: block; float: none; margin-bottom: 5px; } .card-block.list-tag ol li { margin-bottom: 5px; } .inline-order-list { margin-top: 50px; } .inline-order-list h4, .inline-order-list p { margin-bottom: 0; } .card-block ul li.list-inline-item { display: inline-block; float: left; } /*======= Typography css end ========*/ /** ===================== Modal css start ========================== **/ .modal { z-index: 1050; } .modal .modal-dialog { pointer-events: all; } .bd-example .modal { display: block; position: inherit; background-color: #2C3E50; margin-bottom: 20px; } .card .overflow-container h5 { margin-bottom: 5px; } .button-page .card-block a.nav-link { margin-bottom: 0; } .sweet-alert button.confirm { background-color: #448aff !important; } .sweet-alert .sa-input-error { top: 23px; } /**====== Modal css end ======**/ /** ===================== Notification css start ========================== **/ .location-selector { width: 100%; height: 250px; background-color: #fff; border: 2px dashed #e5e9ec; position: relative; margin-bottom: 20px; } .location-selector .bit { background-color: #e5e9ec; cursor: pointer; position: absolute; } .location-selector .bit:hover { background-color: #ddd; } .location-selector .bit.bottom, .location-selector .bit.top { height: 25%; width: 40%; margin: 0 30%; } .location-selector .bit.top { top: 0; } .location-selector .bit.bottom { bottom: 0; } .location-selector .bit.left, .location-selector .bit.right { height: 20%; width: 20%; margin-left: 0; margin-right: 0; } .location-selector .bit.right { right: 0; } .location-selector .bit.left { left: 0; } button.close { margin-top: 7px; margin-bottom: 0; } /**====== Notification css end ======**/ /** ===================== Accordion css start ========================== **/ .accordion-msg { display: block; color: #222222; padding: 14px 20px; border-top: 1px solid #ddd; font-weight: 500; cursor: pointer; } .accordion-msg:focus, .accordion-msg:hover { text-decoration: none; outline: none; } .faq-accordion .accordion-desc { padding: 20px; } .accordion-desc { color: #222222; padding: 0 20px 20px; } #color-accordion .accordion-desc { margin-top: 14px; } .ui-accordion-header-icon { float: right; font-size: 20px; } .accordion-title { margin-bottom: 0; } .accordion-block { padding: 0; } .accordion-block p { margin-bottom: 0; } .color-accordion-block a.ui-state-active, .color-accordion-block a:focus, .color-accordion-block a:hover { color: #fff; background: #4680ff; } a.bg-default:focus, a.bg-default:hover { background-color: #f0f0f0 !important; color: #fff; } a.bg-primary:focus, a.bg-primary:hover { background-color: #77aaff !important; color: #fff; } a.bg-success:focus, a.bg-success:hover { background-color: #1aeb72 !important; color: #fff; } a.bg-info:focus, a.bg-info:hover { background-color: #08e3ff !important; color: #fff; } a.bg-warning:focus, a.bg-warning:hover { background-color: #ffe733 !important; color: #fff; } a.bg-danger:focus, a.bg-danger:hover { background-color: #ff8585 !important; color: #fff; } /**====== Accordion css end ======**/ /** ===================== Tabs css start ========================== **/ .tab-list p { padding: 10px; } .tab-with-img i { position: absolute; padding: 5px; } .tab-icon { margin-bottom: 30px; } .tab-icon i { padding-right: 10px; } .tab-below { border-top: 1px solid #ddd; border-bottom: none; } .tab-below.nav-tabs .nav-link.active { border-color: transparent #ddd #ddd #ddd; } .tab-below .nav-item { margin-top: -2px; } .tab-below.nav-tabs .nav-link { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; border-top-right-radius: 0; border-top-left-radius: 0; } .card-header~.tab-icon .tab-with-img .sub-title i { right: 10px; } .tab-with-img .nav-link { position: relative; } .tabs-left, .tabs-right { min-width: 120px; vertical-align: top; width: 150px; } .tabs-left, .tabs-left-content, .tabs-right, .tabs-right-content { display: table-cell; } .nav-tabs.tabs-left .slide { height: 35px; width: 4px; bottom: 15px; } .nav-tabs.tabs-right .slide { height: 35px; width: 4px; bottom: 15px; right: 0; } .product-edit .md-tabs .nav-item a { padding: 0 0 10px !important; color: #37474f; } .product-edit .md-tabs .nav-item a .f-20 { display: inline-block; margin-right: 10px; } .md-tabs.tabs-left .nav-item, .md-tabs.tabs-right .nav-item, .tabs-left .nav-item, .tabs-right .nav-item { width: 100%; position: relative; } .md-tabs { position: relative; } .md-tabs .nav-item+.nav-item { margin: 0; } .md-tabs .nav-link { border: none; color: #37474f; } .md-tabs .nav-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; position: relative; } .md-tabs .nav-link:focus, .md-tabs .nav-link:hover { border: none; } .md-tabs .nav-item .nav-link.active~.slide { opacity: 1; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .md-tabs .nav-item .nav-link~.slide { opacity: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .md-tabs .nav-item.open .nav-link, .md-tabs .nav-item.open .nav-link:focus, .md-tabs .nav-item.open .nav-link:hover, .md-tabs .nav-link.active, .md-tabs .nav-link.active:focus, .md-tabs .nav-link.active:hover { color: #448aff; border: none; background-color: transparent; border-radius: 0; } .md-tabs .nav-item a { padding: 20px 0 !important; color: #37474f; } .nav-tabs .slide { background: #448aff; width: 100%; height: 4px; position: absolute; -webkit-transition: left 0.3s ease-out; transition: left 0.3s ease-out; bottom: 0; } .nav-tabs .slide .nav-item.show .nav-link, .nav-tabs .slide .nav-link { color: #448aff; } .img-tabs img { width: 100px; margin: 0 auto; } .img-tabs a { opacity: 0.5; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .img-tabs a span i { height: 25px; width: 25px; border-radius: 100%; bottom: 10px; right: 70px; } .img-tabs a img { border: 3px solid; } .img-tabs a.active { opacity: 1; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .img-tabs .nav-item:first-child { border-bottom: none; } #pc-left-panel-menu { margin-bottom: 20px; } .h-active a { color: #1b8bf9 !important; font-weight: 500; } .img-circle { border-radius: 50%; } .b-none { border: none !important; } /**====== Tabs css end ======**/ /** ===================== Table css start ========================== **/ .table-primary, .table-primary>td, .table-primary>th { background-color: #4680FE; } .table-responsive { display: inline-block; width: 100%; overflow-x: auto; } .table.table-xl td, .table.table-xl th { padding: 1.25rem 2rem; } .table.table-lg td, .table.table-lg th { padding: 0.9rem 2rem; } .table.table-de td, .table.table-de th { padding: 0.75rem 2rem; } .table.table-sm td, .table.table-sm th { padding: 0.6rem 2rem; } .table.table-xs td, .table.table-xs th { padding: 0.4rem 2rem; } .table-columned>tbody>tr>td:first-child, .table-columned>tbody>tr>th:first-child { border-left: 0; } .table-columned>tfoot>tr>td:first-child, .table-columned>tfoot>tr>th:first-child { border-left: 0; } .table-columned>tbody>tr>td, .table-columned>tbody>tr>th { border: 0; border-left: 1px solid #ddd; } .table-columned>tfoot>tr>td, .table-columned>tfoot>tr>th { border: 0; border-left: 1px solid #ddd; } .table-border-style { padding: 0; } .table-border-style .table { margin-bottom: 0; } .table>thead>tr>th { border-bottom-color: #ccc; } .table-borderless tbody tr td, .table-borderless tbody tr th { border: 0; } .table-bordered>thead>tr.border-solid>td, .table-bordered>thead>tr.border-solid>th { border-bottom-width: 2px; } .table-bordered>thead>tr.border-solid:first-child>td, .table-bordered>thead>tr.border-solid:first-child th { border-bottom-width: 2px; } .table-bordered>thead>tr.border-double>td, .table-bordered>thead>tr.border-double>th { border-bottom-width: 3px; border-bottom-style: double; } .table-bordered>thead>tr.border-double:first-child>td, .table-bordered>thead>tr.border-double:first-child th { border-bottom-width: 3px; border-bottom-style: double; } /**====== Table css end ======**/ /** ===================== User-card css start ========================== **/ .card-header-img~.btn-group i { margin-right: 0; } .card.business-info { border-top: none; border-left-width: 2px !important; -webkit-box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05); box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05); -webkit-transition: all 150ms linear; transition: all 150ms linear; } .card.business-info:hover { -webkit-box-shadow: 0 0 25px -5px #9e9c9e; box-shadow: 0 0 25px -5px #9e9c9e; } .top-cap-text p { padding: 10px 0; margin-bottom: 0; } .user-content { text-align: center; margin-top: 20px; } .user-content h4 { font-size: 16px; font-weight: 500; } .user-content h5 { font-size: 14px; } .img-overlay { bottom: 0; color: #fff; height: 100%; width: 100%; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; position: absolute; -webkit-transform: scale(0); transform: scale(0); margin: 0 auto; } .img-overlay span { position: absolute; top: 50%; left: 50%; width: 100px; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .img-overlay span .btn { display: inline-block; } .img-overlay span .btn i { margin-right: 0; } .img-hover-main { padding: 0 40px; } .img-hover { position: relative; margin: 0 auto; } .img-hover:hover .img-overlay { left: 0; right: 0; top: 0; bottom: 0; -webkit-transform: scale(1); transform: scale(1); margin: 0 auto; background-color: rgba(0, 0, 0, 0.7); z-index: 2; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .card-header-img img { margin: 0 auto; display: block; } .card-header-img h4 { margin-top: 30px; font-size: 20px; font-weight: 500; text-align: center; } .card-header-img h5, .card-header-img h6 { margin-top: 15px; font-size: 15px; color: #222; font-weight: 500; text-align: center; } .simple-cards .btn-group { margin: 20px auto 0; } .simple-cards .btn-group button { margin: 0; } .simple-cards .user-card { padding: 20px 0; text-align: center; } .simple-cards .user-card .label-icon { margin-top: 15px; } .simple-cards .user-card .label-icon i { font-size: 20px; } .simple-cards .user-card .label-icon .badge-top-right { margin-left: 3px; top: -8px; } .card-icon { display: block; margin-bottom: 5px; } .btn-outline-primary { border-color: #448aff; font-weight: 500; padding: 10px 16px; font-size: 15px; } .btn-outline-primary:hover { background-color: #448aff; border-color: #448aff; } .simple-cards p { margin: 20px; font-size: 15px; } .user-profile #edit-btn, .user-profile #edit-info-btn { margin-bottom: 0; } .card-block ul.list-contacts, .card-block.groups-contact ul { display: block; float: none; } .card-block ul.list-contacts li, .card-block.groups-contact ul li { display: block; float: none; } ul.list-contacts .list-group-item a { color: #292b2c; } ul.list-contacts .list-group-item.active a { color: #fff; } .pagination li { display: inline-block; } .card-block.groups-contact { margin-bottom: 0; } .card-block .connection-list { margin-bottom: 20px; } .table button { margin-bottom: 0; } #crm-contact .img-circle, img.comment-img { width: 40px; height: 40px; } .page-link { color: #448aff; } .page-item.active .page-link { background-color: #448aff; border-color: #448aff; } #main { margin-bottom: 20px; } /*====== User-card End ======*/ /** ===================== Session Timeout css start ========================== **/ #sessionTimeout-dialog .close { display: none; } /*====== Session Timeout css ends ======= */ .pull-0 { right: auto; } .pull-1 { right: 8.333333%; } .pull-2 { right: 16.666667%; } .pull-3 { right: 25%; } .pull-4 { right: 33.333333%; } .pull-5 { right: 41.666667%; } .pull-6 { right: 50%; } .pull-7 { right: 58.333333%; } .pull-8 { right: 66.666667%; } .pull-9 { right: 75%; } .pull-10 { right: 83.333333%; } .pull-11 { right: 91.666667%; } .pull-12 { right: 100%; } .push-0 { left: auto; } .push-1 { left: 8.333333%; } .push-2 { left: 16.666667%; } .push-3 { left: 25%; } .push-4 { left: 33.333333%; } .push-5 { left: 41.666667%; } .push-6 { left: 50%; } .push-7 { left: 58.333333%; } .push-8 { left: 66.666667%; } .push-9 { left: 75%; } .push-10 { left: 83.333333%; } .push-11 { left: 91.666667%; } .push-12 { left: 100%; } .offset-1 { margin-left: 8.333333%; } .offset-2 { margin-left: 16.666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.333333%; } .offset-5 { margin-left: 41.666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.333333%; } .offset-8 { margin-left: 66.666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.333333%; } .offset-11 { margin-left: 91.666667%; } @media (min-width: 576px) { .col-sm { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-sm-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .col-sm-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-sm-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-sm-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-sm-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-sm-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-sm-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-sm-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-sm-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-sm-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-sm-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-sm-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-sm-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .pull-sm-0 { right: auto; } .pull-sm-1 { right: 8.333333%; } .pull-sm-2 { right: 16.666667%; } .pull-sm-3 { right: 25%; } .pull-sm-4 { right: 33.333333%; } .pull-sm-5 { right: 41.666667%; } .pull-sm-6 { right: 50%; } .pull-sm-7 { right: 58.333333%; } .pull-sm-8 { right: 66.666667%; } .pull-sm-9 { right: 75%; } .pull-sm-10 { right: 83.333333%; } .pull-sm-11 { right: 91.666667%; } .pull-sm-12 { right: 100%; } .push-sm-0 { left: auto; } .push-sm-1 { left: 8.333333%; } .push-sm-2 { left: 16.666667%; } .push-sm-3 { left: 25%; } .push-sm-4 { left: 33.333333%; } .push-sm-5 { left: 41.666667%; } .push-sm-6 { left: 50%; } .push-sm-7 { left: 58.333333%; } .push-sm-8 { left: 66.666667%; } .push-sm-9 { left: 75%; } .push-sm-10 { left: 83.333333%; } .push-sm-11 { left: 91.666667%; } .push-sm-12 { left: 100%; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.333333%; } .offset-sm-2 { margin-left: 16.666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.333333%; } .offset-sm-5 { margin-left: 41.666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.333333%; } .offset-sm-8 { margin-left: 66.666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.333333%; } .offset-sm-11 { margin-left: 91.666667%; } } @media (min-width: 768px) { .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-md-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .col-md-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-md-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-md-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-md-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-md-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-md-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-md-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-md-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-md-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-md-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-md-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-md-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .pull-md-0 { right: auto; } .pull-md-1 { right: 8.333333%; } .pull-md-2 { right: 16.666667%; } .pull-md-3 { right: 25%; } .pull-md-4 { right: 33.333333%; } .pull-md-5 { right: 41.666667%; } .pull-md-6 { right: 50%; } .pull-md-7 { right: 58.333333%; } .pull-md-8 { right: 66.666667%; } .pull-md-9 { right: 75%; } .pull-md-10 { right: 83.333333%; } .pull-md-11 { right: 91.666667%; } .pull-md-12 { right: 100%; } .push-md-0 { left: auto; } .push-md-1 { left: 8.333333%; } .push-md-2 { left: 16.666667%; } .push-md-3 { left: 25%; } .push-md-4 { left: 33.333333%; } .push-md-5 { left: 41.666667%; } .push-md-6 { left: 50%; } .push-md-7 { left: 58.333333%; } .push-md-8 { left: 66.666667%; } .push-md-9 { left: 75%; } .push-md-10 { left: 83.333333%; } .push-md-11 { left: 91.666667%; } .push-md-12 { left: 100%; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.333333%; } .offset-md-2 { margin-left: 16.666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.333333%; } .offset-md-5 { margin-left: 41.666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.333333%; } .offset-md-8 { margin-left: 66.666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.333333%; } .offset-md-11 { margin-left: 91.666667%; } } @media (min-width: 992px) { .col-lg { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-lg-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .col-lg-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-lg-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-lg-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-lg-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-lg-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-lg-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-lg-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-lg-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-lg-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-lg-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-lg-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-lg-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .pull-lg-0 { right: auto; } .pull-lg-1 { right: 8.333333%; } .pull-lg-2 { right: 16.666667%; } .pull-lg-3 { right: 25%; } .pull-lg-4 { right: 33.333333%; } .pull-lg-5 { right: 41.666667%; } .pull-lg-6 { right: 50%; } .pull-lg-7 { right: 58.333333%; } .pull-lg-8 { right: 66.666667%; } .pull-lg-9 { right: 75%; } .pull-lg-10 { right: 83.333333%; } .pull-lg-11 { right: 91.666667%; } .pull-lg-12 { right: 100%; } .push-lg-0 { left: auto; } .push-lg-1 { left: 8.333333%; } .push-lg-2 { left: 16.666667%; } .push-lg-3 { left: 25%; } .push-lg-4 { left: 33.333333%; } .push-lg-5 { left: 41.666667%; } .push-lg-6 { left: 50%; } .push-lg-7 { left: 58.333333%; } .push-lg-8 { left: 66.666667%; } .push-lg-9 { left: 75%; } .push-lg-10 { left: 83.333333%; } .push-lg-11 { left: 91.666667%; } .push-lg-12 { left: 100%; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.333333%; } .offset-lg-2 { margin-left: 16.666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.333333%; } .offset-lg-5 { margin-left: 41.666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.333333%; } .offset-lg-8 { margin-left: 66.666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.333333%; } .offset-lg-11 { margin-left: 91.666667%; } } @media (min-width: 1200px) { .col-xl { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-xl-auto { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; } .col-xl-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-xl-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-xl-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-xl-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-xl-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-xl-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-xl-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-xl-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-xl-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-xl-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-xl-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-xl-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .pull-xl-0 { right: auto; } .pull-xl-1 { right: 8.333333%; } .pull-xl-2 { right: 16.666667%; } .pull-xl-3 { right: 25%; } .pull-xl-4 { right: 33.333333%; } .pull-xl-5 { right: 41.666667%; } .pull-xl-6 { right: 50%; } .pull-xl-7 { right: 58.333333%; } .pull-xl-8 { right: 66.666667%; } .pull-xl-9 { right: 75%; } .pull-xl-10 { right: 83.333333%; } .pull-xl-11 { right: 91.666667%; } .pull-xl-12 { right: 100%; } .push-xl-0 { left: auto; } .push-xl-1 { left: 8.333333%; } .push-xl-2 { left: 16.666667%; } .push-xl-3 { left: 25%; } .push-xl-4 { left: 33.333333%; } .push-xl-5 { left: 41.666667%; } .push-xl-6 { left: 50%; } .push-xl-7 { left: 58.333333%; } .push-xl-8 { left: 66.666667%; } .push-xl-9 { left: 75%; } .push-xl-10 { left: 83.333333%; } .push-xl-11 { left: 91.666667%; } .push-xl-12 { left: 100%; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.333333%; } .offset-xl-2 { margin-left: 16.666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.333333%; } .offset-xl-5 { margin-left: 41.666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.333333%; } .offset-xl-8 { margin-left: 66.666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.333333%; } .offset-xl-11 { margin-left: 91.666667%; } } /*====== Warning css starts ======= */ .ie-warning { position: fixed; top: 0; left: 0; z-index: 999999; background: #000000; width: 100%; height: 100%; text-align: center; color: #fff; font-family: "Courier New", Courier, monospace; padding: 50px 0; } .ie-warning p { font-size: 17px; } .ie-warning .iew-container { min-width: 1024px; width: 100%; height: 200px; background: #fff; margin: 50px 0; } .ie-warning .iew-download { list-style: none; padding: 30px 0; margin: 0 auto; width: 720px; } .ie-warning .iew-download>li { float: left; vertical-align: top; } .ie-warning .iew-download>li>a { display: block; color: #000; width: 140px; font-size: 15px; padding: 15px 0; } .ie-warning .iew-download>li>a>div { margin-top: 10px; } .ie-warning .iew-download>li>a:hover { background-color: #eee; } /*====== Warning css ends ======= */ .image-cropper-container { margin-top: 10px; } /*====== Json form css start =======*/ .alpaca-field img { width: 250px; } /*====== Json form css ends =======*/ /*====== Sticky css start =======*/ .arrow_box { z-index: 0; } @media only screen and (max-width: 575px) { .sticky-card { margin-bottom: 250px; } } /*====== Sticky css ends =======*/ /*====== Ready to use css start ======*/ .j-pro .j-label { font-weight: 500; } /*====== Ready to use css ends ======*/ .ms-container { width: 100%; } .progress { height: 1rem; } .progress .progress-bar { height: 100% !important; } .pcoded .mCSB_container_wrapper { margin-right: 0; } .pcoded .mCSB_container_wrapper>.mCSB_container { padding-right: 0; } .pcoded .mCSB_scrollTools { width: 10px; } .pcoded .mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; width: 10px; } .pcoded .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: rgba(55, 71, 79, 0); } .pcoded .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .pcoded .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: rgba(55, 71, 79, 0.5); } .pcoded #styleSelector:hover .mCSB_dragger_bar, .pcoded .main-menu:hover .mCSB_dragger_bar { background-color: rgba(55, 71, 79, 0.2); } .scroll-container { overflow-x: hidden; } #main-chat .page-error i, .full-calender .page-error i { font-size: 35px; border-radius: 6px; padding: 6px 9px; } @media only screen and (min-width: 788px) { #main-chat .page-error, .full-calender .page-error { display: none; } } @media only screen and (max-width: 786px) { #main-chat .page-body, .full-calender .page-body { display: none; } } @media only screen and (max-width: 575px) { .card .card-header .card-header-right.job-compney-btn { position: relative; float: left; right: 0; } .clndr .event-listing { display: none; } .clndr .clndr-grid { width: 100%; } .clndr .clndr-grid .day-number { padding: 3px 4px !important; } } .dotted-line-theme .no_edit { border-bottom: 1px dotted #448aff; } .handsontable td, .handsontable th { color: #37474f; } #map, .radial-bar:after { z-index: 99; } .content-group { padding: 10px; } .card-sub .card-title { margin-bottom: 10px; font-weight: 500; } .card-sub .card-text { color: #737373; } .long-press-popup { position: fixed; bottom: 15px; left: 275px; right: 35px; text-align: center; background: rgba(0, 0, 0, 0.8); padding: 20px; border-radius: 8px; margin: 0; font-size: 50px; } .long-press-popup li { margin-right: 15px; margin-top: 15px; margin-bottom: 15px; } /** ===================== Theme-preloader css start ========================== **/ .theme-loader { height: 100%; width: 100%; background: #fff; position: fixed; z-index: 999999; top: 0; left: 0; } .theme-loader .loader-track { left: 50%; top: 50%; position: absolute; display: block; width: 50px; height: 50px; margin: -25px 0 0 -25px; } .preloader-wrapper { display: inline-block; position: relative; width: 50px; height: 50px; -webkit-animation: container-rotate 1568ms linear infinite; animation: container-rotate 1568ms linear infinite; } @-webkit-keyframes container-rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes container-rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .spinner-layer { position: absolute; width: 100%; height: 100%; opacity: 0; border-color: #11c15b; } .spinner-layer.spinner-blue { border-color: #448aff; -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .spinner-layer.spinner-red { border-color: #ff5252; -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .spinner-layer.spinner-yellow { border-color: #ffe100; -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .spinner-layer.spinner-green { border-color: #11c15b; -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .spinner-layer, .spinner-layer.spinner-blue-only, .spinner-layer.spinner-red-only, .spinner-layer.spinner-yellow-only, .spinner-layer.spinner-green-only { opacity: 1; -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .gap-patch { position: absolute; top: 0; left: 45%; width: 10%; height: 100%; overflow: hidden; border-color: inherit; } .gap-patch .circle { width: 1000%; left: -450%; } .circle-clipper { display: inline-block; position: relative; width: 50%; height: 100%; overflow: hidden; border-color: inherit; } .circle-clipper .circle { width: 200%; height: 100%; border-width: 3px; border-style: solid; border-color: inherit; border-bottom-color: transparent !important; border-radius: 50%; -webkit-animation: none; animation: none; position: absolute; top: 0; right: 0; bottom: 0; } .circle-clipper.left { float: left; } .circle-clipper.left .circle { left: 0; border-right-color: transparent !important; -webkit-transform: rotate(129deg); transform: rotate(129deg); -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .circle-clipper.right { float: right; } .circle-clipper.right .circle { left: -100%; border-left-color: transparent !important; -webkit-transform: rotate(-129deg); transform: rotate(-129deg); -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } #spinnerContainer.cooldown { -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1); animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1); } @-webkit-keyframes fill-unfill-rotate { 12.5% { -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } } @keyframes fill-unfill-rotate { 12.5% { -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } } @-webkit-keyframes blue-fade-in-out { from { opacity: 1; } 25% { opacity: 1; } 26% { opacity: 0; } 89% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes blue-fade-in-out { from { opacity: 1; } 25% { opacity: 1; } 26% { opacity: 0; } 89% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes red-fade-in-out { from { opacity: 0; } 15% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } } @keyframes red-fade-in-out { from { opacity: 0; } 15% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 1; } 51% { opacity: 0; } } @-webkit-keyframes yellow-fade-in-out { from { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 1; } 76% { opacity: 0; } } @keyframes yellow-fade-in-out { from { opacity: 0; } 40% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 1; } 76% { opacity: 0; } } @-webkit-keyframes green-fade-in-out { from { opacity: 0; } 65% { opacity: 0; } 75% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } @keyframes green-fade-in-out { from { opacity: 0; } 65% { opacity: 0; } 75% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes left-spin { from { -webkit-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); transform: rotate(130deg); } } @keyframes left-spin { from { -webkit-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); transform: rotate(130deg); } } @-webkit-keyframes right-spin { from { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } } @keyframes right-spin { from { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } } @-webkit-keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } select.form-control:not([size]):not([multiple]) { height: 43px; } .tabledit-input:disabled { display: none; } @-moz-document url-prefix() { select { -webkit-appearance: none !important; -moz-appearance: none !important; background: #FFF url("../images/select-arrow.png") no-repeat 95% center !important; } } /** ===================== Generic-class css start ========================== **/ .generic-card-block code { cursor: pointer; display: inline-block; margin-right: 10px; margin-bottom: 10px; } .generic-image-body li { padding: 0 20px; display: inline-block; } .generic-image-body code { display: block; } .generic-image-body img { display: block; margin: 10px auto 20px; } /*====== Padding css starts ======*/ .p-0 { padding: 0px; } .p-5 { padding: 5px; } .p-10 { padding: 10px; } .p-15 { padding: 15px; } .p-20 { padding: 20px; } .p-25 { padding: 25px; } .p-30 { padding: 30px; } .p-35 { padding: 35px; } .p-40 { padding: 40px; } .p-45 { padding: 45px; } .p-50 { padding: 50px; } /*====== Padding css ends ======*/ /*====== Padding-top css starts ======*/ .p-t-0 { padding-top: 0px !important; } .p-t-5 { padding-top: 5px !important; } .p-t-10 { padding-top: 10px !important; } .p-t-15 { padding-top: 15px !important; } .p-t-20 { padding-top: 20px !important; } .p-t-25 { padding-top: 25px !important; } .p-t-30 { padding-top: 30px !important; } .p-t-35 { padding-top: 35px !important; } .p-t-40 { padding-top: 40px !important; } .p-t-45 { padding-top: 45px !important; } .p-t-50 { padding-top: 50px !important; } /*====== Padding-top css ends ======*/ /*====== Padding-bottom css starts ======*/ .p-b-0 { padding-bottom: 0px !important; } .p-b-5 { padding-bottom: 5px !important; } .p-b-10 { padding-bottom: 10px !important; } .p-b-15 { padding-bottom: 15px !important; } .p-b-20 { padding-bottom: 20px !important; } .p-b-25 { padding-bottom: 25px !important; } .p-b-30 { padding-bottom: 30px !important; } .p-b-35 { padding-bottom: 35px !important; } .p-b-40 { padding-bottom: 40px !important; } .p-b-45 { padding-bottom: 45px !important; } .p-b-50 { padding-bottom: 50px !important; } /*====== Padding-bottom css ends ======*/ /*====== Padding-left css starts ======*/ .p-l-0 { padding-left: 0px; } .p-l-5 { padding-left: 5px; } .p-l-10 { padding-left: 10px; } .p-l-15 { padding-left: 15px; } .p-l-20 { padding-left: 20px; } .p-l-25 { padding-left: 25px; } .p-l-30 { padding-left: 30px; } .p-l-35 { padding-left: 35px; } .p-l-40 { padding-left: 40px; } .p-l-45 { padding-left: 45px; } .p-l-50 { padding-left: 50px; } /*====== Padding-left css ends ======*/ /*====== Padding-right css starts ======*/ .p-r-0 { padding-right: 0px; } .p-r-5 { padding-right: 5px; } .p-r-10 { padding-right: 10px; } .p-r-15 { padding-right: 15px; } .p-r-20 { padding-right: 20px; } .p-r-25 { padding-right: 25px; } .p-r-30 { padding-right: 30px; } .p-r-35 { padding-right: 35px; } .p-r-40 { padding-right: 40px; } .p-r-45 { padding-right: 45px; } .p-r-50 { padding-right: 50px; } /*====== Padding-right css ends ======*/ /*====== Margin css starts ======*/ .m-0 { margin: 0px; } .m-5 { margin: 5px; } .m-10 { margin: 10px; } .m-15 { margin: 15px; } .m-20 { margin: 20px; } .m-25 { margin: 25px; } .m-30 { margin: 30px; } .m-35 { margin: 35px; } .m-40 { margin: 40px; } .m-45 { margin: 45px; } .m-50 { margin: 50px; } /*====== Margin css ends ======*/ /*====== Margin-top css starts ======*/ .m-t-0 { margin-top: 0px; } .m-t-5 { margin-top: 5px; } .m-t-10 { margin-top: 10px; } .m-t-15 { margin-top: 15px; } .m-t-20 { margin-top: 20px; } .m-t-25 { margin-top: 25px; } .m-t-30 { margin-top: 30px; } .m-t-35 { margin-top: 35px; } .m-t-40 { margin-top: 40px; } .m-t-45 { margin-top: 45px; } .m-t-50 { margin-top: 50px; } /*====== Margin-top css ends ======*/ /*====== Margin-Bottom css starts ======*/ .m-b-0 { margin-bottom: 0px; } .m-b-5 { margin-bottom: 5px; } .m-b-10 { margin-bottom: 10px; } .m-b-15 { margin-bottom: 15px; } .m-b-20 { margin-bottom: 20px; } .m-b-25 { margin-bottom: 25px; } .m-b-30 { margin-bottom: 30px; } .m-b-35 { margin-bottom: 35px; } .m-b-40 { margin-bottom: 40px; } .m-b-45 { margin-bottom: 45px; } .m-b-50 { margin-bottom: 50px; } /*====== Margin-Bottom css ends ======*/ /*====== Margin-left css starts ======*/ .m-l-0 { margin-left: 0px; } .m-l-5 { margin-left: 5px; } .m-l-10 { margin-left: 10px; } .m-l-15 { margin-left: 15px; } .m-l-20 { margin-left: 20px; } .m-l-25 { margin-left: 25px; } .m-l-30 { margin-left: 30px; } .m-l-35 { margin-left: 35px; } .m-l-40 { margin-left: 40px; } .m-l-45 { margin-left: 45px; } .m-l-50 { margin-left: 50px; } /*====== Margin-left css ends ======*/ /*====== Margin-right css starts ======*/ .m-r-0 { margin-right: 0px; } .m-r-5 { margin-right: 5px; } .m-r-10 { margin-right: 10px; } .m-r-15 { margin-right: 15px; } .m-r-20 { margin-right: 20px; } .m-r-25 { margin-right: 25px; } .m-r-30 { margin-right: 30px; } .m-r-35 { margin-right: 35px; } .m-r-40 { margin-right: 40px; } .m-r-45 { margin-right: 45px; } .m-r-50 { margin-right: 50px; } /*====== Margin-right css ends ======*/ /*====== Display css starts ======*/ .d-none { display: none; } .d-inline-block { display: inline-block; } .d-inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } /*====== display css ends ======*/ /*====== Border-radius css starts ======*/ .b-radius-0 { border-radius: 0px !important; } .b-radius-5 { border-radius: 5px !important; } .b-radius-10 { border-radius: 10px !important; } /*====== Border-radius css ends ======*/ /*====== Font-size css starts ======*/ .f-10 { font-size: 10px; } .f-12 { font-size: 12px; } .f-14 { font-size: 14px; } .f-16 { font-size: 16px; } .f-18 { font-size: 18px; } .f-20 { font-size: 20px; } .f-22 { font-size: 22px; } .f-24 { font-size: 24px; } .f-26 { font-size: 26px; } .f-28 { font-size: 28px; } .f-30 { font-size: 30px; } .f-32 { font-size: 32px; } .f-34 { font-size: 34px; } .f-36 { font-size: 36px; } .f-38 { font-size: 38px; } .f-40 { font-size: 40px; } .f-42 { font-size: 42px; } .f-44 { font-size: 44px; } .f-46 { font-size: 46px; } .f-48 { font-size: 48px; } .f-50 { font-size: 50px; } .f-52 { font-size: 52px; } .f-54 { font-size: 54px; } .f-56 { font-size: 56px; } .f-58 { font-size: 58px; } .f-60 { font-size: 60px; } .f-62 { font-size: 62px; } .f-64 { font-size: 64px; } .f-66 { font-size: 66px; } .f-68 { font-size: 68px; } .f-72 { font-size: 72px; } .f-74 { font-size: 74px; } .f-76 { font-size: 76px; } .f-78 { font-size: 78px; } .f-80 { font-size: 80px; } /*====== Font-size css ends ======*/ /*====== Font-weight css starts ======*/ .f-w-100 { font-weight: 100; } .f-w-300 { font-weight: 300; } .f-w-400 { font-weight: 400; } .f-w-600 { font-weight: 600; } .f-w-700 { font-weight: 700; } .f-w-900 { font-weight: 600; } .f-w-600 { font-weight: 500; } /*====== Font-weight css ends ======*/ /*====== Font-style css starts ======*/ .f-s-normal { font-style: normal; } .f-s-italic { font-style: italic; } .f-s-oblique { font-style: oblique; } .f-s-initial { font-style: initial; } .f-s-inherit { font-style: inherit; } /*====== Font-style css ends ======*/ /*====== Text-align css starts ======*/ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /*====== Text-align css ends ======*/ /*====== Text-Transform css starts ======*/ .text-capitalize { text-transform: capitalize; } .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } /*====== Text-Transform css ends ======*/ /*====== Text-Decoration css starts ======*/ .text-overline { text-decoration: overline; } .text-line-through { text-decoration: line-through; } .text-underline { text-decoration: underline; } /*====== Text-Decoration css ends ======*/ /*====== Vertical-Align css starts ======*/ .baseline { vertical-align: baseline; } .sub { vertical-align: sub; } .super { vertical-align: super; } .top { vertical-align: top; } .text-top { vertical-align: text-top; } .middle { vertical-align: middle; } .bottom { vertical-align: bottom; } .text-bottom { vertical-align: text-bottom; } .initial { vertical-align: initial; } .inherit { vertical-align: inherit; } /*====== Vertical-Align css ends ======*/ /*====== Position css starts ======*/ .pos-static { position: static; } .pos-absolute { position: absolute; } .pos-fixed { position: fixed; } .pos-relative { position: relative; } .pos-initial { position: initial; } .pos-inherit { position: inherit; } /*====== Position css ends ======*/ /*====== Float css starts ======*/ .f-left { float: left; } .f-right { float: right; } .f-none { float: none; } /*====== Float css ends ======*/ /*====== Overflow css starts ======*/ .o-hidden { overflow: hidden; } .o-visible { overflow: visible; } .o-auto { overflow: auto; } /*====== Overflow css ends ======*/ /*====== Image-sizes css starts ======*/ .img-20 { width: 20px; } .img-30 { width: 30px; } .img-40 { width: 40px; } .img-50 { width: 50px; } .img-60 { width: 60px; } .img-70 { width: 70px; } .img-80 { width: 80px; } .img-90 { width: 90px; } .img-100 { width: 100px; } /*====== Image-sizes css ends ======*/ /*======= Text css starts ===========*/ .text-primary { color: #448aff !important; } .text-warning { color: #ffe100 !important; } .text-default { color: #d6d6d6 !important; } .text-danger { color: #ff5252 !important; } .text-success { color: #11c15b !important; } .text-inverse { color: #37474f !important; } .text-info { color: #00bcd4 !important; } .text-custom { color: #64b0f2 !important; } .text-pink { color: #ff7aa3 !important; } .text-dark { color: #2b3d51 !important; } .text-purple { color: #9261c6 !important; } .text-muted { color: #78909c !important; } /*======= Text css ends ===========*/ /*======= Label-color css starts ======= */ .label { border-radius: 2px; color: #fff; font-size: 12px; line-height: 1; margin-bottom: 0; text-transform: capitalize; } .label-primary { background: #448aff; } .label-warning { background: #ffe100; } .label-default { background: #d6d6d6; } .label-danger { background: #ff5252; } .label-success { background: #11c15b; } .label-inverse { background: #37474f; } .label-info { background: #00bcd4; } .label-warning { color: #fff; } /*======= Label-color css starts ======= */ /*======= Badge-color css starts ======= */ .badge-primary { background: #448aff; } .badge-warning { background: #ffe100; } .badge-default { background: #d6d6d6; } .badge-danger { background: #ff5252; } .badge-success { background: #11c15b; } .badge-inverse { background: #37474f; } .badge-info { background: #00bcd4; } /*======= Badge-color css end ======= */ /*======= Background-color css starts ======= */ .bg-color-box { text-align: center; display: inline-block; padding: 10px 20px; -webkit-box-shadow: 0 0 5px 0 rgba(128, 128, 128, 0.49); box-shadow: 0 0 5px 0 rgba(128, 128, 128, 0.49); font-weight: 600; margin-right: 20px; margin-bottom: 20px; cursor: pointer; } .bg-color-box span { color: #fff; } .bg-primary { background-color: #448aff !important; color: #fff; } .bg-warning { background-color: #ffe100 !important; color: #fff; } .bg-default { background-color: #d6d6d6 !important; color: #fff; } .bg-danger { background-color: #ff5252 !important; color: #fff; } .bg-success { background-color: #11c15b !important; color: #fff; } .bg-inverse { background-color: #37474f !important; color: #fff; } .bg-info { background-color: #00bcd4 !important; color: #fff; } /*======= Background-color css end ======= */ /*======= Button-color css starts ======= */ .color-primary { background-color: #448aff; } .color-warning { background-color: #ffe100; } .color-default { background-color: #d6d6d6; } .color-danger { background-color: #ff5252; } .color-success { background-color: #11c15b; } .color-inverse { background-color: #37474f; } .color-info { background-color: #00bcd4; } /*======= Button-color css ends ======= */ /*======= Nestable-color css starts ======= */ .nestable-primary { background-color: #448aff !important; border-color: #448aff; color: #fff !important; } .nestable-warning { background-color: #ffe100 !important; border-color: #ffe100; color: #fff !important; } .nestable-default { background-color: #d6d6d6 !important; border-color: #d6d6d6; color: #fff !important; } .nestable-danger { background-color: #ff5252 !important; border-color: #ff5252; color: #fff !important; } .nestable-success { background-color: #11c15b !important; border-color: #11c15b; color: #fff !important; } .nestable-inverse { background-color: #37474f !important; border-color: #37474f; color: #fff !important; } .nestable-info { background-color: #00bcd4 !important; border-color: #00bcd4; color: #fff !important; } /*======= Nestable-color css ends ======= */ /*======= Table-Border-Bottom-color css starts ======= */ table thead .border-bottom-primary th, table tbody .border-bottom-primary th, table tbody .border-bottom-primary td { border-bottom: 1px solid #448aff; } table thead .border-bottom-warning th, table tbody .border-bottom-warning th, table tbody .border-bottom-warning td { border-bottom: 1px solid #ffe100; } table thead .border-bottom-default th, table tbody .border-bottom-default th, table tbody .border-bottom-default td { border-bottom: 1px solid #d6d6d6; } table thead .border-bottom-danger th, table tbody .border-bottom-danger th, table tbody .border-bottom-danger td { border-bottom: 1px solid #ff5252; } table thead .border-bottom-success th, table tbody .border-bottom-success th, table tbody .border-bottom-success td { border-bottom: 1px solid #11c15b; } table thead .border-bottom-inverse th, table tbody .border-bottom-inverse th, table tbody .border-bottom-inverse td { border-bottom: 1px solid #37474f; } table thead .border-bottom-info th, table tbody .border-bottom-info th, table tbody .border-bottom-info td { border-bottom: 1px solid #00bcd4; } /*======= Table-Border-Bottom-color css ends ======= */ /*======= Table styling css starts ======= */ .table-styling .table-primary, .table-styling.table-primary { background-color: #448aff; color: #fff; border: 3px solid #448aff; } .table-styling .table-primary thead, .table-styling.table-primary thead { background-color: #116aff; border: 3px solid #116aff; } .table-styling .table-warning, .table-styling.table-warning { background-color: #ffe100; color: #fff; border: 3px solid #ffe100; } .table-styling .table-warning thead, .table-styling.table-warning thead { background-color: #ccb400; border: 3px solid #ccb400; } .table-styling .table-default, .table-styling.table-default { background-color: #d6d6d6; color: #fff; border: 3px solid #d6d6d6; } .table-styling .table-default thead, .table-styling.table-default thead { background-color: #bdbdbd; border: 3px solid #bdbdbd; } .table-styling .table-danger, .table-styling.table-danger { background-color: #ff5252; color: #fff; border: 3px solid #ff5252; } .table-styling .table-danger thead, .table-styling.table-danger thead { background-color: #ff1f1f; border: 3px solid #ff1f1f; } .table-styling .table-success, .table-styling.table-success { background-color: #11c15b; color: #fff; border: 3px solid #11c15b; } .table-styling .table-success thead, .table-styling.table-success thead { background-color: #0d9245; border: 3px solid #0d9245; } .table-styling .table-inverse, .table-styling.table-inverse { background-color: #37474f; color: #fff; border: 3px solid #37474f; } .table-styling .table-inverse thead, .table-styling.table-inverse thead { background-color: #222c31; border: 3px solid #222c31; } .table-styling .table-info, .table-styling.table-info { background-color: #00bcd4; color: #fff; border: 3px solid #00bcd4; } .table-styling .table-info thead, .table-styling.table-info thead { background-color: #008fa1; border: 3px solid #008fa1; } /*======= Table styling css ends ======= */ /*======= Card-Border-Top-color css starts ======= */ .card-border-primary { border-top: 4px solid #448aff; } .card-border-warning { border-top: 4px solid #ffe100; } .card-border-default { border-top: 4px solid #d6d6d6; } .card-border-danger { border-top: 4px solid #ff5252; } .card-border-success { border-top: 4px solid #11c15b; } .card-border-inverse { border-top: 4px solid #37474f; } .card-border-info { border-top: 4px solid #00bcd4; } /*======= Card-Border-Top-color css ends ======= */ /*======= Panels-wells-color css starts ======= */ .panels-wells .panel-primary { border-color: #448aff; } .panels-wells .panel-warning { border-color: #ffe100; } .panels-wells .panel-default { border-color: #d6d6d6; } .panels-wells .panel-danger { border-color: #ff5252; } .panels-wells .panel-success { border-color: #11c15b; } .panels-wells .panel-inverse { border-color: #37474f; } .panels-wells .panel-info { border-color: #00bcd4; } /*======= Panels-wells-color css ends ======= */ /*======= All-Borders-color css starts ======= */ .b-t-primary { border-top: 1px solid #448aff; } .b-b-primary { border-bottom: 1px solid #448aff; } .b-l-primary { border-left: 1px solid #448aff; } .b-r-primary { border-right: 1px solid #448aff; } .b-primary { border: 1px solid #448aff; } .b-t-warning { border-top: 1px solid #ffe100; } .b-b-warning { border-bottom: 1px solid #ffe100; } .b-l-warning { border-left: 1px solid #ffe100; } .b-r-warning { border-right: 1px solid #ffe100; } .b-warning { border: 1px solid #ffe100; } .b-t-default { border-top: 1px solid #d6d6d6; } .b-b-default { border-bottom: 1px solid #d6d6d6; } .b-l-default { border-left: 1px solid #d6d6d6; } .b-r-default { border-right: 1px solid #d6d6d6; } .b-default { border: 1px solid #d6d6d6; } .b-t-danger { border-top: 1px solid #ff5252; } .b-b-danger { border-bottom: 1px solid #ff5252; } .b-l-danger { border-left: 1px solid #ff5252; } .b-r-danger { border-right: 1px solid #ff5252; } .b-danger { border: 1px solid #ff5252; } .b-t-success { border-top: 1px solid #11c15b; } .b-b-success { border-bottom: 1px solid #11c15b; } .b-l-success { border-left: 1px solid #11c15b; } .b-r-success { border-right: 1px solid #11c15b; } .b-success { border: 1px solid #11c15b; } .b-t-inverse { border-top: 1px solid #37474f; } .b-b-inverse { border-bottom: 1px solid #37474f; } .b-l-inverse { border-left: 1px solid #37474f; } .b-r-inverse { border-right: 1px solid #37474f; } .b-inverse { border: 1px solid #37474f; } .b-t-info { border-top: 1px solid #00bcd4; } .b-b-info { border-bottom: 1px solid #00bcd4; } .b-l-info { border-left: 1px solid #00bcd4; } .b-r-info { border-right: 1px solid #00bcd4; } .b-info { border: 1px solid #00bcd4; } .b-t-theme { border-top: 1px solid #d6d6d6; } .b-b-theme { border-bottom: 1px solid #d6d6d6; } .b-l-theme { border-left: 1px solid #d6d6d6; } .b-r-theme { border-right: 1px solid #d6d6d6; } .b-theme { border: 1px solid #d6d6d6; } /*======= All-Borders-color css ends ======= */ /*======= All-color css start ======= */ .bg-facebook { background: #3B5997; } .text-facebook { color: #3B5997; } .bg-twitter { background: #42C0FB; } .text-twitter { color: #42C0FB; } .bg-dribbble { background: #EC4A89; } .text-dribbble { color: #EC4A89; } .bg-pinterest { background: #BF2131; } .text-pinterest { color: #BF2131; } .bg-youtube { background: #E0291D; } .text-youtube { color: #E0291D; } .bg-googleplus { background: #C73E2E; } .text-googleplus { color: #C73E2E; } .bg-instagram { background: #AA7C62; } .text-instagram { color: #AA7C62; } .bg-viber { background: #7B519D; } .text-viber { color: #7B519D; } .bg-amazon { background: #000; } .text-amazon { color: #000; } .bg-behance { background: #0057ff; } .text-behance { color: #0057ff; } .bg-dropbox { background: #3380FF; } .text-dropbox { color: #3380FF; } .bg-c-blue { background: #448aff; } .text-c-blue { color: #448aff; } .bg-c-red { background: #ff5252; } .text-c-red { color: #ff5252; } .bg-c-green { background: #11c15b; } .text-c-green { color: #11c15b; } .bg-c-yellow { background: #ffe100; } .text-c-yellow { color: #ffe100; } .bg-c-orenge { background: #FE8A7D; } .text-c-orenge { color: #FE8A7D; } .bg-c-lite-green { background: #69CEC6; } .text-c-lite-green { color: #69CEC6; } .bg-c-purple { background: #536dfe; } .text-c-purple { color: #536dfe; } /*======= All-color css ends ======= */ /**====== Generic-class css end ======**/ .pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li:nth-child(1)>a>.pcoded-micon { color: #448aff; } .pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li:nth-child(2)>a>.pcoded-micon { color: #5D4037; } .pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li:nth-child(3)>a>.pcoded-micon { color: #4CAF50; } .pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li:nth-child(4)>a>.pcoded-micon { color: #d84315; } .pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li:nth-child(5)>a>.pcoded-micon { color: #4527a0; } .pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li:nth-child(6)>a>.pcoded-micon { color: #448aff; } .pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li:nth-child(7)>a>.pcoded-micon { color: #5D4037; } .pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li:nth-child(8)>a>.pcoded-micon { color: #4CAF50; } .pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li:nth-child(9)>a>.pcoded-micon { color: #d84315; } .pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li:nth-child(10)>a>.pcoded-micon { color: #4527a0; } .pcoded[nav-type="st2"] .pcoded-item.pcoded-left-item>li>a>.pcoded-micon { color: #37474f; } .pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li>a>.pcoded-micon, .pcoded[nav-type="st2"] .pcoded-item.pcoded-left-item>li>a>.pcoded-micon { color: #37474f; } .pcoded[nav-type="st1"] .pcoded-item.pcoded-left-item>li>a>.pcoded-micon b, .pcoded[nav-type="st2"] .pcoded-item.pcoded-left-item>li>a>.pcoded-micon b { display: none; } /** ===================== Left-side-menu css start ========================== **/ .main-menu { float: left; width: 100%; z-index: 99; height: 100% !important; } @media only screen and (max-width: 992px) { .main-menu { height: 100% !important; } } .main-menu .main-menu-header { padding: 16px 0 17px; background-image: url("../images/user-bg.jpg"); background-size: cover; text-align: center; position: relative; } .main-menu .main-menu-header img { position: relative; width: 60px; } .img-radius { border-radius: 50%; } .main-menu .main-menu-header .user-details { display: block; margin-top: 10px; position: relative; } .main-menu .main-menu-header .user-details #more-details { cursor: pointer; } .main-menu .main-menu-header .user-details span { color: #fff; display: block; font-size: 14px; text-transform: capitalize; } .main-menu .main-menu-header .user-details span i { font-size: 10px; margin-left: 10px; } .main-menu .main-menu-header:before { content: ""; background: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } .main-menu .main-menu-content .more-details { display: none; } .main-menu .main-menu-content .more-details a { padding: 10px 25px; display: block; color: #000; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } .main-menu .main-menu-content .more-details a:hover { color: #448aff; } .main-menu .main-menu-content .more-details a i { margin-right: 10px; } .main-menu .main-menu-content .menu-search { padding: 20px 20px 10px; } .main-menu .main-menu-content li { position: relative; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .main-menu-content, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .main-menu-header { display: none; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .main-menu { width: 70px; } .sidebar_toggle a { margin: -5px; line-height: 1; } /** ===================== Main-header css start ========================== **/ .header-navbar { min-height: 56px; padding: 0; } .header-navbar .navbar-wrapper .navbar-logo { position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; float: left; height: 56px; text-align: center; text-transform: uppercase; width: 235px; padding: 10px; } @media only screen and (max-width: 992px) { .header-navbar .navbar-wrapper .navbar-logo { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .header-navbar .navbar-wrapper .navbar-logo h5 { margin-bottom: 0; } .header-navbar .navbar-wrapper .navbar-logo .mobile-menu { position: absolute; right: 0; font-size: 16px; line-height: 3.5; width: 40px; } @media only screen and (max-width: 768px) { .header-navbar .navbar-wrapper .navbar-logo .mobile-search { display: none !important; } } .header-navbar .navbar-wrapper .navbar-logo .mobile-options, .header-navbar .navbar-wrapper .navbar-logo .mobile-search { display: none; } .header-navbar .navbar-wrapper .navbar-container .nav-left, .header-navbar .navbar-wrapper .navbar-container .nav-right { float: left; margin-bottom: 0; } .header-navbar .navbar-wrapper .navbar-container .nav-left li, .header-navbar .navbar-wrapper .navbar-container .nav-right li { float: left; line-height: 3.5; padding: 0 10px; position: relative; } @media only screen and (max-width: 575px) { .header-navbar .navbar-wrapper .navbar-container .nav-left li, .header-navbar .navbar-wrapper .navbar-container .nav-right li { padding: 0 5px; } } .header-navbar .navbar-wrapper .navbar-container .nav-left li .sidebar_toggle a, .header-navbar .navbar-wrapper .navbar-container .nav-right li .sidebar_toggle a { display: none; } .header-navbar .navbar-wrapper .navbar-container .nav-left li>a, .header-navbar .navbar-wrapper .navbar-container .nav-right li>a { font-size: 16px; display: block; } .header-navbar .navbar-wrapper .navbar-container .nav-left li>a>i.flag-icon, .header-navbar .navbar-wrapper .navbar-container .nav-right li>a>i.flag-icon { border-radius: 50%; width: 20px; height: 20px; } .header-navbar .navbar-wrapper .navbar-container .nav-left a, .header-navbar .navbar-wrapper .navbar-container .nav-right a { padding: 0 0.6rem; } .header-navbar .navbar-wrapper .navbar-container .nav-left .mega-menu-top i, .header-navbar .navbar-wrapper .navbar-container .nav-right .mega-menu-top i { font-size: 10px; margin-left: 10px; } .header-navbar .navbar-wrapper .navbar-container .nav-right { float: right; } .header-navbar .navbar-wrapper .navbar-container .nav-right .user-profile img { margin-right: 10px; width: 40px; } .header-navbar .navbar-wrapper .navbar-container .nav-right .user-profile i { font-size: 10px; margin-left: 10px; } .header-navbar .navbar-wrapper .navbar-container .nav-right>.header-notification:nth-child(2) .show-notification li:first-child:hover, .header-navbar .navbar-wrapper .navbar-container .nav-right>.header-notification:nth-child(2) .profile-notification li:first-child:hover { background-color: #fff; } .header-navbar .navbar-wrapper .navbar-container .header-notification { -webkit-perspective: 1000px; perspective: 1000px; z-index: 99; position: relative; } .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification { background: #fff; -webkit-box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.25); border-radius: 5px; opacity: 1; position: absolute; right: 0; visibility: visible; width: 24rem; display: none; padding: 15px 0; -webkit-transform: translateY(20px); transform: translateY(20px); } .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification a, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification a { color: #455a64; } .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification li, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification li { border-top: 1px solid #448aff, #ffe100, #d6d6d6, #ff5252, #11c15b, #37474f, #00bcd4; line-height: initial; padding: 1em 20px; width: 100%; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification li:first-child, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification li:first-child { padding: 10px 20px; } .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification li:first-child h6, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification li:first-child h6 { display: inline-block; font-size: 14px; font-weight: 600; margin-bottom: 0; } .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification li:first-child label, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification li:first-child label { float: right; } .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification li img, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification li img { width: 40px; margin-right: 10px; -ms-flex-item-align: start !important; align-self: flex-start !important; } .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification li:hover, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification li:hover { background-color: #f1f1f1; } .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification.row li:hover, .header-navbar .navbar-wrapper .navbar-container .header-notification .row.profile-notification li:hover { background-color: transparent; } .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification .notification-user, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification .notification-user { font-size: 15px; font-weight: 600; margin-bottom: 5px; } .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification .notification-msg, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification .notification-msg { margin-bottom: 5px; } .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification .notification-time, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification .notification-time { font-size: 12px; color: #919aa3; } .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification { width: 17em; } .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification a { font-size: 15px; padding-left: 0; } .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification i { font-size: 15px; margin-left: 0; margin-right: 5px; } .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification li { border-top: none; padding: 0.7em 20px; } .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification li:first-child { padding: 0.7em 20px; } .header-navbar .navbar-wrapper .navbar-container .header-notification.active:before { content: ""; border: 10px solid transparent; border-left-color: #fff; border-top-color: #fff; position: absolute; border-radius: 5px; bottom: -32px; right: 20px; -webkit-box-shadow: -11px -11px 35px 0 rgba(0, 0, 0, 0.25); box-shadow: -11px -11px 35px 0 rgba(0, 0, 0, 0.25); -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 9; } .header-navbar .navbar-wrapper .navbar-container .badge { border-radius: 100px; right: 10px; position: absolute; top: 14px; padding: 4px; } .header-navbar .navbar-wrapper .header-search { line-height: 0.8; } .header-navbar .navbar-wrapper .header-search .main-search { padding: 13px 0; display: block; } .header-navbar .navbar-wrapper .header-search .main-search .input-group { margin-bottom: 0; background-color: transparent; border-radius: 20px; } .header-navbar .navbar-wrapper .header-search .main-search .input-group .form-control { padding: 0.3rem 0.75rem; width: 0; border: none; background-color: transparent; } .header-navbar .navbar-wrapper .header-search .main-search .input-group .input-group-append, .header-navbar .navbar-wrapper .header-search .main-search .input-group .input-group-prepend { background-color: transparent; border: none; } .header-navbar .navbar-wrapper .header-search .main-search .input-group .input-group-append .input-group-text, .header-navbar .navbar-wrapper .header-search .main-search .input-group .input-group-prepend .input-group-text { background-color: transparent; color: #fff; border: none; } .header-navbar .navbar-wrapper .header-search .main-search .input-group .input-group-append.search-close, .header-navbar .navbar-wrapper .header-search .main-search .input-group .input-group-prepend.search-close { display: none; } .header-navbar .navbar-wrapper .header-search .main-search.open { color: #000; line-height: 1; } .header-navbar .navbar-wrapper .header-search .main-search.open .input-group { background-color: #fff; } .header-navbar .navbar-wrapper .header-search .main-search.open .input-group .form-control { display: block; } .header-navbar .navbar-wrapper .header-search .main-search.open .input-group .input-group-append .input-group-text, .header-navbar .navbar-wrapper .header-search .main-search.open .input-group .input-group-prepend .input-group-text { color: #000; } .header-navbar .navbar-wrapper .header-search .main-search.open .input-group .input-group-append.search-close, .header-navbar .navbar-wrapper .header-search .main-search.open .input-group .input-group-prepend.search-close { display: -webkit-box; display: -ms-flexbox; display: flex; } @-webkit-keyframes not-blink { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(4); transform: scale(4); opacity: 0; } } @keyframes not-blink { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(4); transform: scale(4); opacity: 0; } } /*======= Main-header css end ======*/ .pcoded .pcoded-container { position: relative; background: #f3f3f3; -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08); box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08); } .pcoded .pcoded-header { position: relative; display: block; } .pcoded .pcoded-navbar { display: block; -webkit-box-shadow: 1px 0 20px 0 rgba(69, 90, 100, 0.08); box-shadow: 1px 0 20px 0 rgba(69, 90, 100, 0.08); } .pcoded-main-container { display: block; position: relative; background: #eff5f7; min-height: calc(100vh - 56px); } .pcoded .pcoded-content { position: relative; display: block; } .pcoded-inner-navbar { display: block; position: relative; } .pcoded-inner-content { padding: 10px; } .pcoded .pcoded-navbar .pcoded-item { display: block; list-style: none; margin: 0; padding: 0 0 20px; position: relative; } .pcoded .pcoded-navbar .pcoded-item:after { content: ""; background-color: #e4e9eb; width: 80%; height: 1px; position: absolute; left: 10%; bottom: 10px; } .pcoded .pcoded-navbar .pcoded-item>li { display: block; list-style: outside none none; margin: 0; padding: 0; position: relative; } .pcoded .pcoded-navbar .pcoded-item>li>a { display: block; font-size: 14px; padding: 0 15px; text-decoration: none; position: relative; -webkit-transition: none; transition: none; } .pcoded .pcoded-navbar .pcoded-item>li>a.disabled { opacity: 0.5; cursor: not-allowed !important; } .pcoded .pcoded-navbar .pcoded-item>li:hover>a, .pcoded .pcoded-navbar .pcoded-item>li.active>a { -webkit-box-shadow: 0 15px 8px -11px rgba(0, 0, 0, 0.25); box-shadow: 0 15px 8px -11px rgba(0, 0, 0, 0.25); } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu { list-style: outside none none; margin: 0; padding: 0; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li { display: block; list-style: outside none none; margin: 0; padding: 0; position: relative; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a { display: block; font-size: 14px; font-weight: 400; padding: 0 15px; text-decoration: none; position: relative; -webkit-transition: all 0s linear; transition: all 0s linear; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a>.pcoded-mtext { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a>.pcoded-mtext:before { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a .pcoded-micon { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; font-size: 10px; padding-right: 5px; } .pcoded .pcoded-navbar .pcoded-item>li>a>.pcoded-micon { font-size: 14px; padding: 4px; color: #fff; border-radius: 4px; width: 30px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 30px; text-align: center; } .pcoded .pcoded-navbar .pcoded-item>li>a>.pcoded-micon b { margin: 0 2px; font-size: 12px; line-height: 1; font-weight: 600; } .pcoded-inner-navbar { height: 100%; } .pcoded[theme-layout="vertical"] .pcoded-header { width: 100%; -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16); box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16); z-index: 1029; } .pcoded[theme-layout="vertical"][vertical-nav-type="offcanvas"] .pcoded-navbar { opacity: 0; } .pcoded[theme-layout="vertical"] .pcoded-header .sidebar_toggle a { border-radius: 4px; float: left; font-size: 18px; height: 35px; margin-right: 5px; position: relative; text-align: center; top: 7px; width: 40px; border-width: 0; border-style: solid; } .pcoded[theme-layout="vertical"] .pcoded-header .sidebar_toggle a i { position: relative; top: -7px; } .pcoded[theme-layout="vertical"] .pcoded-header .sidebar_toggle a:hover { text-decoration: none; } .sidebar_toggle a:focus { text-decoration: none; } .pcoded[theme-layout="vertical"] .pcoded-right-header .pcoded-badge { background-color: #777; border-radius: 10px; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; min-height: 17px; min-width: 10px; opacity: 1; padding: 4px 7px; position: absolute; right: -4px; text-align: center; top: 9px; -webkit-transition: opacity 0.3s linear 0s; transition: opacity 0.3s linear 0s; vertical-align: middle; visibility: visible; white-space: nowrap; } .pcoded[theme-layout="vertical"] .pcoded-navbar { z-index: 1027; height: calc(100% - 56px); } .pcoded[theme-layout="vertical"] .pcoded-navbar[pcoded-navbar-position="absolute"] { height: 100%; } .pcoded[theme-layout="vertical"] .pcoded-navbar[pcoded-navbar-position="fixed"] { top: 56px; } .pcoded[theme-layout="vertical"] .pcoded-content { position: relative; display: block; } .pcoded[theme-layout="vertical"] .pcoded-container { overflow: hidden; position: relative; margin: 0 auto; } .pcoded[theme-layout="vertical"].pcoded-wrapper, .pcoded[theme-layout="vertical"] .pcoded-main-container { position: relative; margin: 0 auto; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item>li>a { text-align: left; padding: 5px 10px; margin: 5px 10px; border-radius: 2px; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu { position: relative; width: 100%; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a { text-align: left; padding: 8.7px 10px; } .pcoded[theme-layout="vertical"][vertical-nav-type="expanded"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a { padding-left: 15px; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu { width: 80%; list-style: outside none none; margin: 15px auto; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu { display: none; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu.pcoded-trigger.active>.pcoded-submenu { display: block; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item[item-border="true"][item-border-style="dashed"] li>a { border-bottom-style: dashed; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item[item-border="true"][item-border-style="dotted"] li>a { border-bottom-style: dotted; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item[item-border="true"][item-border-style="solid"] li>a { border-bottom-style: none; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item[item-border="true"][item-border-style="none"] li>a { border: none; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item[item-border="false"]>li>a { border-bottom-width: 0; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item[item-border="true"]>li>a { border-bottom-width: 1px; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item[subitem-border="false"] .pcoded-hasmenu .pcoded-submenu li>a { border-bottom-width: 0; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item[subitem-border="true"] .pcoded-hasmenu .pcoded-submenu li>a { border-bottom-width: 1px; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item[subitem-border="true"] .pcoded-hasmenu .pcoded-submenu li:last-child>a { border-bottom-width: 0; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu>a:after { float: right; font-style: normal; margin-left: 3px; font-size: 10px; position: absolute; right: 15px; top: 3px; font-family: 'themify'; padding-top: 12px; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu .pcoded-submenu li.pcoded-hasmenu>a:after { top: 0; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu[dropdown-icon="style1"]>a:after { content: "\e649"; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu.pcoded-trigger[dropdown-icon="style1"]>a:after { content: "\e64b"; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu[dropdown-icon="style2"]>a:after { content: "\e661"; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu.pcoded-trigger[dropdown-icon="style2"]>a:after { content: "\e663"; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu[dropdown-icon="style3"]>a:after { content: '\e61a'; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu.pcoded-trigger[dropdown-icon="style3"]>a:after { content: '\e622'; } .pcoded[theme-layout="vertical"] .pcoded-navbar[pcoded-navbar-position="relative"] { position: relative; } .pcoded[theme-layout="vertical"] .pcoded-navbar[pcoded-navbar-position="fixed"] { position: fixed; } .pcoded[theme-layout="vertical"] .pcoded-navbar[pcoded-navbar-position="absolute"] { position: absolute; } .pcoded[theme-layout="vertical"] .pcoded-header[pcoded-header-position="relative"] { position: relative; } .pcoded[theme-layout="vertical"] .pcoded-header[pcoded-header-position="fixed"] { position: fixed; z-index: 1028; } .pcoded[theme-layout="vertical"] .pcoded-header[pcoded-header-position="absolute"] { position: absolute; } .pcoded[theme-layout="vertical"][vertical-layout="wide"] .pcoded-container { width: 100%; margin: 0 auto; } .pcoded[theme-layout="vertical"][pcoded-device-type="desktop"][vertical-layout="box"] .pcoded-container { max-width: 1200px; width: 100%; margin: 0 auto; } .pcoded[theme-layout="vertical"][pcoded-device-type="desktop"][vertical-layout="box"] .pcoded-container .pcoded-header { max-width: 1200px; } .pcoded[theme-layout="vertical"][pcoded-device-type="tablet"][vertical-layout="box"] .pcoded-container { max-width: 900px; width: 100%; margin: 0 auto; } .pcoded[theme-layout="vertical"][pcoded-device-type="phone"][vertical-layout="box"] .pcoded-container { max-width: 100%; width: 100%; margin: 0 auto; } .pcoded .pcoded-overlay-box { background: #000 none repeat scroll 0 0; bottom: 0; height: 100%; position: fixed; top: 0; width: 100%; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; overflow: hidden; } .pcoded[vertical-nav-type="compact"][vertical-effect="overlay"] .pcoded-overlay-box, .pcoded[vertical-nav-type="expanded"][vertical-effect="overlay"] .pcoded-overlay-box { visibility: visible; z-index: 1026; opacity: 0.3; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; overflow: hidden; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a .pcoded-micon { display: none; font-size: 10px; padding-right: 5px; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a .pcoded-mtext:before { font-style: normal; padding-right: 4px; font-size: 10px; position: relative; left: 0; top: 0; opacity: 1; visibility: visible; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu[subitem-icon="style1"] .pcoded-submenu li>a .pcoded-mtext:before { content: "\f105"; font-family: FontAwesome; padding-right: 5px; font-size: 12px; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu[subitem-icon="style2"] .pcoded-submenu li>a .pcoded-mtext:before { content: "\f22d"; font-family: FontAwesome; padding-right: 5px; font-size: 12px; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu[subitem-icon="style3"] .pcoded-submenu li>a .pcoded-mtext:before { content: "\f00c"; font-family: FontAwesome; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu[subitem-icon="style4"] .pcoded-submenu li>a .pcoded-mtext:before { content: "\f124"; font-family: FontAwesome; padding-right: 10px; font-size: 12px; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu[subitem-icon="style5"] .pcoded-submenu li>a .pcoded-mtext:before { content: "\f0da"; font-family: FontAwesome; padding-right: 10px; font-size: 12px; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu[subitem-icon="style6"] .pcoded-submenu li>a .pcoded-mtext:before { content: "\f0c1"; font-family: FontAwesome; padding-right: 10px; font-size: 13px; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item>li:hover>a:before { border-left-style: solid; border-left-width: 5px; content: " "; height: 100%; left: 0; position: absolute; top: 0; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover>a:before { border-left-style: solid; border-left-width: 5px; content: " "; height: 100%; left: 0; position: absolute; top: 0; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item>li.active>a:before { border-left-style: solid; border-left-width: 5px; content: " "; height: 100%; left: 0; position: absolute; top: 0; } .pcoded[theme-layout="vertical"][vertical-placement="left"] .pcoded-navbar { float: left; } .pcoded[theme-layout="vertical"][vertical-placement="left"] .pcoded-content { float: unset; right: 0; } .pcoded[theme-layout="vertical"][vertical-nav-type="expanded"] .pcoded-header .pcoded-left-header, .pcoded[theme-layout="vertical"][vertical-nav-type="expanded"] .pcoded-navbar { width: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="expanded"][vertical-effect="push"] .pcoded-header .pcoded-right-header { margin-left: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="expanded"][vertical-effect="push"] .pcoded-header.iscollapsed .pcoded-right-header { margin-left: 235px; margin-right: -235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="expanded"][vertical-effect="push"] .pcoded-content { margin-left: 235px; margin-right: -235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="expanded"][vertical-effect="shrink"] .pcoded-header.iscollapsed .pcoded-right-header, .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="expanded"][vertical-effect="shrink"] .pcoded-header .pcoded-right-header { margin-left: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="expanded"][vertical-effect="shrink"] .pcoded-content { margin-left: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="expanded"][vertical-effect="overlay"] .pcoded-header .pcoded-right-header { margin-left: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="expanded"][vertical-effect="overlay"] .pcoded-header.iscollapsed .pcoded-right-header { margin-left: 0; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="expanded"][vertical-effect="overlay"] .pcoded-content { margin-left: 0; } .pcoded[theme-layout="vertical"][vertical-nav-type="expanded"][pcoded-device-type="desktop"] .pcoded-navbar .pcoded-item>.pcoded-hasmenu.is-hover.pcoded-trigger .pcoded-submenu, .pcoded[theme-layout="vertical"][vertical-nav-type="expanded"][pcoded-device-type="desktop"] .pcoded-navbar.is-hover .pcoded-item>.pcoded-hasmenu.pcoded-trigger>.pcoded-submenu, .pcoded[theme-layout="vertical"][vertical-nav-type="expanded"][pcoded-device-type="tablet"] .pcoded-navbar .pcoded-item>.pcoded-hasmenu.is-hover.pcoded-trigger .pcoded-submenu, .pcoded[theme-layout="vertical"][vertical-nav-type="expanded"][pcoded-device-type="tablet"] .pcoded-navbar.is-hover .pcoded-item>.pcoded-hasmenu.pcoded-trigger>.pcoded-submenu { left: 100%; position: absolute; width: 235px; z-index: 1024; top: 0; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-header .pcoded-left-header { width: 235px; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar { width: 70px; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item>li>a { padding: 7px 10px 6px 14px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="collapsed"][vertical-effect="push"] .pcoded-content { margin-left: 70px; margin-right: 0; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="collapsed"][vertical-effect="shrink"] .pcoded-header .pcoded-right-header { margin-left: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="collapsed"][vertical-effect="shrink"] .pcoded-content { margin-left: 70px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="collapsed"][vertical-effect="overlay"] .pcoded-header .pcoded-right-header { margin-left: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="collapsed"][vertical-effect="overlay"] .pcoded-content { margin-left: 70px; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item>li>a .pcoded-mtext { opacity: 1; visibility: visible; position: absolute; top: 10px; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu>a:after { opacity: 1; visibility: visible; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item>li>a .pcoded-mtext { opacity: 0; visibility: hidden; position: absolute; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item>li.pcoded-trigger>a .pcoded-mtext { opacity: 1; visibility: visible; position: absolute; padding-left: 22px; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu>a:after { opacity: 0; visibility: hidden; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item li.pcoded-hasmenu.pcoded-trigger a:after { opacity: 1; visibility: visible; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item>li.pcoded-trigger { display: block; position: relative; width: 290px; z-index: 1024; border-right: none; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item>.pcoded-hasmenu.pcoded-trigger>.pcoded-submenu { left: 56px; position: absolute; width: 210px; z-index: 1024; border-left-style: solid; border-left-width: 1px; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item>.pcoded-hasmenu.pcoded-trigger>.pcoded-submenu .pcoded-hasmenu.pcoded-trigger>.pcoded-submenu { position: relative; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item>.pcoded-hasmenu>.pcoded-submenu .pcoded-hasmenu.pcoded-trigger>.pcoded-submenu { position: absolute; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="push"] .pcoded-header .pcoded-left-header { width: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="push"] .pcoded-header .pcoded-right-header { margin-left: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="push"] .pcoded-header.iscollapsed .pcoded-left-header { width: 0; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="push"] .pcoded-header.iscollapsed .pcoded-right-header { margin-left: 0; margin-right: 0; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="push"] .pcoded-navbar { width: 235px; margin-left: -250px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="push"] .pcoded-content { margin-left: 0; margin-right: 0; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="shrink"] .pcoded-header .pcoded-left-header { width: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="shrink"] .pcoded-header .pcoded-right-header { margin-left: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="shrink"] .pcoded-header.iscollapsed .pcoded-left-header { width: 0; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="shrink"] .pcoded-header.iscollapsed .pcoded-right-header { margin-left: 0; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="shrink"] .pcoded-navbar { width: 235px; margin-left: -250px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="shrink"] .pcoded-content { margin-left: 0; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="overlay"] .pcoded-header .pcoded-left-header { width: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="overlay"] .pcoded-header .pcoded-right-header { margin-left: 235px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="overlay"] .pcoded-header.iscollapsed .pcoded-left-header { width: 0; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="overlay"] .pcoded-header.iscollapsed .pcoded-right-header { margin-left: 0; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="overlay"] .pcoded-navbar { width: 235px; margin-left: -250px; } .pcoded[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="offcanvas"][vertical-effect="overlay"] .pcoded-content { margin-left: 0; } .pcoded-navbar .sidebar_toggle a { opacity: 1; visibility: visible; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); position: absolute; } .pcoded-navbar .sidebar_toggle a:hover { color: #fff; } .pcoded[theme-layout="vertical"][pcoded-device-type="phone"] .pcoded-header.nocollapsed .pcoded-left-header { width: 100% !important; padding-left: 235px; } .pcoded[theme-layout="vertical"][pcoded-device-type="phone"][vertical-nav-type="collapsed"] .pcoded-header.nocollapsed .pcoded-left-header { padding-left: 45px; } .pcoded[theme-layout="vertical"][pcoded-device-type="phone"][vertical-effect="overlay"] .pcoded-header.nocollapsed .pcoded-left-header, .pcoded[theme-layout="vertical"][pcoded-device-type="phone"][vertical-nav-type="fullpage"] .pcoded-header.nocollapsed .pcoded-left-header, .pcoded[theme-layout="vertical"][pcoded-device-type="phone"][vertical-nav-type="offcanvas"] .pcoded-header.nocollapsed .pcoded-left-header { padding-left: 0; } .pcoded[theme-layout="vertical"][pcoded-device-type="phone"] .pcoded-header.nocollapsed { height: 100px !important; } .pcoded[theme-layout="vertical"][pcoded-device-type="phone"] .pcoded-header.nocollapsed .pcoded-right-header { padding: 50px 5px 0 !important; } .pcoded[theme-layout="vertical"][pcoded-device-type="phone"][vertical-effect="overlay"] .pcoded-header.nocollapsed .pcoded-right-header, .pcoded[theme-layout="vertical"][pcoded-device-type="phone"][vertical-nav-type="offcanvas"] .pcoded-header.nocollapsed .pcoded-right-header { margin: 0 !important; } .pcoded[theme-layout="vertical"][pcoded-device-type="phone"] .pcoded-header.nocollapsed .sidebar_toggle a { background: transparent none repeat scroll 0 0; border-radius: 4px; color: #fff; float: left; font-size: 18px; height: 35px; margin-right: 5px; position: fixed; right: 0; text-align: center; top: 6px; width: 40px; z-index: 1028; } .pcoded.nocollapsed[theme-layout="vertical"][pcoded-device-type="phone"] .pcoded-navbar { top: 0; z-index: 1030; } .pcoded.nocollapsed[theme-layout="vertical"][pcoded-device-type="phone"] .pcoded-main-container { position: unset; } .pcoded.nocollapsed[theme-layout="vertical"][pcoded-device-type="phone"] #styleSelector { top: 100px; } .pcoded .pcoded-navbar .pcoded-navigation-label { font-size: 11px; font-weight: 600; opacity: 1; padding: 10px 10px; text-transform: capitalize; visibility: visible; width: 100%; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .pcoded .pcoded-navbar .pcoded-navigation-label[menu-title-theme="theme1"] { color: #448aff; } .pcoded .pcoded-navbar .pcoded-search+.pcoded-navigation-label { border-top: 0 solid transparent; } .pcoded[vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-navigation-label { opacity: 0; visibility: hidden; position: absolute; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .pcoded .pcoded-navbar .pcoded-item li a .pcoded-badge { position: absolute; right: 30px; text-align: center; top: 10px; vertical-align: middle; text-transform: lowercase; white-space: nowrap; opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .pcoded .pcoded-navbar .pcoded-item .pcoded-submenu>li a .pcoded-badge { top: 10px; right: 2px; } .pcoded[vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item>li>a .pcoded-badge { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .pcoded[vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item>li.pcoded-trigger>a .pcoded-badge { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } body[themebg-pattern="theme1"] { background-color: #448aff; } .pcoded .pcoded-navbar .pcoded-header[header-theme="theme1"] { color: #fff; } .pcoded .pcoded-navbar .pcoded-header[header-theme="theme1"] .sidebar_toggle a { background: transparent; color: #fff; border-color: #fff; } .pcoded .pcoded-navbar .pcoded-header.nocollapsed .pcoded-left-header[lheader-theme="theme1"] { background: transparent; } .pcoded .pcoded-navbar .pcoded-header.iscollapsed .pcoded-left-header[lheader-theme="theme1"] { background: #37474f; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .form-control, .pcoded .pcoded-navbar[navbar-theme="theme1"] .float-label { color: #fff; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .main-menu { background-color: #37474f; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .main-menu .main-menu-header { background-color: #37474f; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .main-menu .main-menu-header .user-details span { color: #fff; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .main-menu .main-menu-content .more-details a { color: #fff; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li>a { color: #fff; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li>a .pcoded-micon { color: #fff; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li.active>a { color: #FFF; border-bottom-color: #37474f; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li>a { border-bottom-color: #37474f; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu { background: #37474f; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li>a { border-bottom-color: #4c626d; color: #fff; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li.pcoded-hasmenu>a:after, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li.pcoded-hasmenu .pcoded-submenu li.pcoded-hasmenu>a:after { color: #fff; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li.pcoded-hasmenu.pcoded-trigger>a:after, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li.pcoded-hasmenu.pcoded-trigger .pcoded-submenu li.pcoded-hasmenu.pcoded-trigger>a:after { color: #fff; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li.active:hover>a, .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li:hover>a { color: #FFF; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover>a { background-color: #37474f; color: #FFF; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover>a:before { border-left-color: transparent; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active>a { color: #FFF; background-color: #37474f; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active>a .pcoded-mtext:before { border-bottom-color: #37474f; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active>a .pcoded-mtext:after { border-left-color: #37474f; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a .pcoded-mtext:before { border-bottom-color: #fff; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a .pcoded-mtext:after { border-left-color: #fff; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li:hover>a:before { border-left-color: #37474f; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li.pcoded-hasmenu:hover>a:after { color: #fff; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li.pcoded-trigger>a { border-bottom-color: #37474f; } .pcoded .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li.pcoded-hasmenu .pcoded-submenu li.pcoded-hasmenu:hover>a:after { color: #fff; } .pcoded .pcoded-navbar[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>.pcoded-hasmenu.pcoded-trigger>.pcoded-submenu, .pcoded .pcoded-navbar[theme-layout="vertical"][vertical-nav-type="sub-expanded"] .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>.pcoded-hasmenu.pcoded-trigger>.pcoded-submenu { border-left-color: transparent; } .pcoded .pcoded-navbar[theme-layout="vertical"][vertical-nav-type="ex-popover"] .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>.pcoded-hasmenu.pcoded-trigger>.pcoded-submenu { border-left-color: transparent; } .pcoded .pcoded-navbar[theme-layout="vertical"][vertical-nav-type="fullpage"] .pcoded-navbar[navbar-theme="theme1"] { background-color: #37474f; } .pcoded .pcoded-navbar[theme-layout="vertical"][vertical-nav-type="fullpage"] .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li:hover>a { color: #FFF; } .pcoded .pcoded-navbar[theme-layout="vertical"][vertical-nav-type="fullpage"] .pcoded-navbar[navbar-theme="theme1"] .sidebar_toggle a { color: #fff; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item li .pcoded-submenu li.active>a { font-weight: 600; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .main-menu { background-color: #fff; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .main-menu .main-menu-header { background-color: #fff; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .main-menu .main-menu-header .user-details span { color: #fff; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .main-menu .main-menu-content .more-details a { color: #666; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu { background: #fff; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item li.pcoded-hasmenu .pcoded-submenu li>a { border-bottom-color: #e6e6e6; color: #666; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.pcoded-hasmenu>a:after, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.pcoded-hasmenu .pcoded-submenu li.pcoded-hasmenu>a:after { color: #666; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.pcoded-hasmenu.pcoded-trigger>a:after, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.pcoded-hasmenu.pcoded-trigger .pcoded-submenu li.pcoded-hasmenu.pcoded-trigger>a:after { color: #666; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.active:hover>a, .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li:hover>a { color: #666; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover>a { color: #666; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover>a:before { border-left-color: #fff; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active>a { color: #666; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active>a .pcoded-mtext:before { border-bottom-color: #fff; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active>a .pcoded-mtext:after { border-left-color: #fff; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a .pcoded-mtext:before { border-bottom-color: #fff; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item .pcoded-hasmenu .pcoded-submenu li>a .pcoded-mtext:after { border-left-color: #fff; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.pcoded-trigger>a { border-bottom-color: #fff; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li>a { color: #666 !important; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li.active>a { color: #FFF; } .pcoded .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li>a { border-bottom-color: #fff; } .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li .pcoded-submenu li.active>a, .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li .pcoded-submenu li:hover>a { color: #448aff !important; } .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li .pcoded-submenu li.active>a { font-weight: 600; } .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li:hover>a { color: #448aff !important; } .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li:hover>a .pcoded-micon { color: #448aff !important; } .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li:hover>a:before { border-left-color: transparent; } .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item>li.active>a, .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item>li:hover>a { background: #448aff; color: #fff !important; } .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item>li.active>a .pcoded-micon, .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item>li:hover>a .pcoded-micon { color: #fff !important; } .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item>li.active>a:before, .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item>li:hover>a:before { border-left-color: transparent; } .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item>li.active>a:after, .pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item>li:hover>a:after { color: #fff !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="compact"] .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>li>a { border-bottom-color: #e6e6e6; } .pcoded[theme-layout="vertical"][vertical-nav-type="compact"] .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li>a { border-bottom-color: #4c626d; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar[navbar-theme="themelight1"] .pcoded-item>.pcoded-hasmenu.pcoded-trigger>.pcoded-submenu { border-left-color: #ededed; -webkit-box-shadow: 3px 2px 11px -2px rgba(0, 0, 0, 0.13); box-shadow: 3px 2px 11px -2px rgba(0, 0, 0, 0.13); } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>.pcoded-hasmenu.pcoded-trigger>.pcoded-submenu { border-left-color: #465a64; -webkit-box-shadow: 3px 2px 11px -2px rgba(0, 0, 0, 0.13); box-shadow: 3px 2px 11px -2px rgba(0, 0, 0, 0.13); } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .pcoded-navbar[navbar-theme="theme1"] .pcoded-item>li.pcoded-trigger>a { border-bottom: 1px solid #4c626d; border-top: 1px solid #4c626d; } .sparkline-chart { text-align: center; } .pcoded[theme-layout="vertical"][pcoded-device-type="phone"] .spark-chart, .pcoded[theme-layout="vertical"][pcoded-device-type="tablet"] .spark-chart { display: none; } .pcoded[theme-layout="vertical"][vertical-placement="right"] .pcoded-navbar .pcoded-item>li>a .pcoded-micon { float: none; position: relative; z-index: 1051; left: 90%; top: 1px; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"][vertical-placement="right"] .pcoded-navbar .pcoded-item>li>a .pcoded-micon i { left: 0; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"][vertical-placement="right"] .pcoded-navbar .pcoded-item>li.pcoded-hasmenu.pcoded-trigger>a .pcoded-micon i, .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"][vertical-placement="right"] .pcoded-navbar .pcoded-item>li.pcoded-trigger.active>a .pcoded-micon i { left: 94%; } .pcoded.nocollapsed[theme-layout="vertical"][pcoded-device-type="phone"] .pcoded-main-container { position: static; } .pcoded[theme-layout="vertical"][vertical-nav-type="fullpage"] .pcoded-main-container, .pcoded[theme-layout="vertical"][vnavigation-view="view3"] .pcoded-main-container { position: static; } .pcoded .pcoded-header[header-theme="theme1"] { background: #448aff; } .pcoded .pcoded-header[header-theme="theme1"] .input-group-addon, .pcoded .pcoded-header[header-theme="theme1"] a { color: #fff; } .pcoded[fream-type="theme1"] .main-menu .main-menu-header:before, .pcoded[fream-type="theme1"] .page-header:before { background: rgba(68, 138, 255, 0.5); } body .pcoded[pcoded-device-type="phone"][vertical-nav-type="expanded"] .pcoded-navbar, body .pcoded[pcoded-device-type="tablet"][vertical-nav-type="expanded"] .pcoded-navbar { position: absolute !important; top: 0; } body .pcoded[pcoded-device-type="phone"][vertical-nav-type="expanded"] .pcoded-navbar .pcoded-item .pcoded-hasmenu>.pcoded-submenu, body .pcoded[pcoded-device-type="tablet"][vertical-nav-type="expanded"] .pcoded-navbar .pcoded-item .pcoded-hasmenu>.pcoded-submenu { -webkit-transition: all 0s ease-in !important; transition: all 0s ease-in !important; } body .pcoded[theme-layout="vertical"][vertical-placement="right"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item>li>a .pcoded-micon { left: 0; } body .pcoded[theme-layout="vertical"][vertical-placement="right"][vertical-nav-type="collapsed"] .pcoded-navbar .pcoded-item>li.pcoded-trigger>a .pcoded-micon { left: calc(100% - 30px); } body .pcoded[theme-layout="vertical"][vertical-placement="right"][vertical-nav-type="collapsed"] .pcoded-item>li.pcoded-trigger>a>.pcoded-mtext { padding-right: 90px; } body .pcoded[vertical-placement="right"] .showChat_inner, body .pcoded[vertical-placement="right"] .users { right: auto; left: 0; } body .pcoded[vertical-placement="right"] .main-body { direction: rtl; } body .pcoded[vertical-placement="right"] .main-body .page-wrapper .page-header-breadcrumb { float: left; } body .pcoded[vertical-placement="right"] .main-body .language-markup { direction: ltr; } body .pcoded[vertical-placement="right"] .header-navbar .navbar-wrapper .navbar-logo { float: right !important; } body .pcoded[vertical-placement="right"] .header-navbar .navbar-wrapper .navbar-container { margin-left: 0; margin-right: 240px; } body .pcoded[vertical-placement="right"] .header-navbar .navbar-wrapper .navbar-container .nav-left li, body .pcoded[vertical-placement="right"] .header-navbar .navbar-wrapper .navbar-container .nav-right li, body .pcoded[vertical-placement="right"] .header-navbar .navbar-wrapper .navbar-container .nav-right li { float: right !important; } body .pcoded[vertical-placement="right"] .header-navbar .navbar-wrapper .navbar-container .nav-left, body .pcoded[vertical-placement="right"] .header-navbar .navbar-wrapper .navbar-container .nav-right { float: right; } body .pcoded[vertical-placement="right"] .header-navbar .navbar-wrapper .navbar-container .nav-right { float: left; } body .pcoded[vertical-nav-type="collapsed"] .header-navbar .navbar-wrapper .navbar-container { margin-left: 0; } body .pcoded[vertical-nav-type="collapsed"] .pcoded-navbar .mCSB_container, body .pcoded[vertical-nav-type="collapsed"] .pcoded-navbar .mCSB_container_wrapper { overflow: hidden !important; } body .pcoded[vertical-nav-type="compact"] .main-menu { width: 200px; } body .pcoded[vertical-nav-type="compact"] .main-menu .pcoded-item>li>.pcoded-submenu { -webkit-box-shadow: 0 0 16px -6px rgba(0, 0, 0, 0.57); box-shadow: 0 0 16px -6px rgba(0, 0, 0, 0.57); } body .pcoded[vertical-nav-type="compact"] .main-menu .pcoded-search { padding: 40px 20px 20px; } body .pcoded[vertical-nav-type="compact"] .main-menu .pcoded-badge { display: none; } body .pcoded[vertical-nav-type="compact"] .main-menu .mCSB_container { width: 100% !important; } body.menu-bottom .navbar-wrapper { z-index: 1050; } body.menu-bottom .pcoded .pcoded-main-container { margin-top: 0 !important; } body.menu-bottom .p-chat-user, body.menu-bottom .showChat_inner { top: 0; } body.menu-bottom .navbar-wrapper { bottom: 0; top: auto !important; z-index: 1050; } @media only screen and (max-width: 992px) { body.menu-bottom .navbar-wrapper .pcoded-navbar { top: -56px; } } body.menu-bottom .header-navbar { min-height: auto; position: fixed !important; bottom: 0; top: auto !important; z-index: 9999 !important; -webkit-box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08) !important; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08) !important; } body.menu-bottom .mega-menu-top .show-notification, body.menu-bottom .mega-menu-top .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification, .header-navbar .navbar-wrapper .navbar-container .header-notification body.menu-bottom .mega-menu-top .profile-notification { bottom: 0 !important; } body.menu-bottom .header-notification .show-notification, body.menu-bottom .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification, .header-navbar .navbar-wrapper .navbar-container body.menu-bottom .header-notification .profile-notification { bottom: 65px; } body.menu-bottom .pcoded[theme-layout="vertical"] .pcoded-navbar[pcoded-navbar-position="fixed"] { top: 0; } body.menu-bottom #collapse-menu { display: none; } .mCSB_container, .mCustomScrollBox { overflow: visible !important; } .pcoded[theme-layout="vertical"][vertical-nav-type="collapsed"] .mCSB_container_wrapper { overflow: visible !important; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: rgba(55, 71, 79, 0.5) !important; } .pcoded-item .pcoded-hasmenu[subitem-icon="style7"] .pcoded-submenu:before { content: ""; height: 100%; background: #ccc; width: 1px; position: absolute; left: 5px; } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu[subitem-icon="style7"] .pcoded-submenu>li>a>.pcoded-mtext:after { content: ""; width: 8px; height: 8px; border-radius: 50%; position: absolute; left: 2px; top: calc(50% - 4px); background-color: transparent; } .pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu>li:first-child a>.pcoded-mtext:after { top: calc(50% - 3px); } .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu[subitem-icon="style7"] .pcoded-submenu>li.active>a>.pcoded-mtext:after, .pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu[subitem-icon="style7"] .pcoded-submenu>li:hover>a>.pcoded-mtext:after { background-color: #38a9f9; } /** ===================== Theme-Buttons css start ========================== **/ .btn-default .badge { background-color: #fff; color: #e0e0e0; } .btn { border-radius: 2px; text-transform: capitalize; font-size: 15px; padding: 10px 19px; cursor: pointer; } @media only screen and (max-width: 480px) { .btn { padding: 10px 15px; } } .close { cursor: pointer; } .button-page .card-block { margin-bottom: -20px; } .button-page .card-block ul { margin-bottom: 0; display: inline-block; } .button-page .card-block a { margin-bottom: 20px; } .button-page .card-block ul li { display: inline-block; margin-right: 20px; float: left; } .button-page .btn { margin-bottom: 20px; margin-right: 10px; } .btn.btn-round { border-radius: 2rem; } .btn.btn-square { border-radius: 0; } .btn.btn-skew { -webkit-transform: skew(-15deg); transform: skew(-15deg); } .btn i { margin-right: 5px; } .btn.btn-icon { border-radius: 50%; width: 40px; line-height: 30px; height: 40px; padding: 3px; text-align: center; } .btn.btn-out { outline: 1px solid #fff; outline-offset: -5px; } .btn.btn-out-dashed { outline: 1px dashed #fff; outline-offset: -5px; } .btn.btn-out-dotted { outline: 1px dotted #fff; outline-offset: -5px; } .btn-group, .btn-group-vertical { display: inline-block; } .btn-group .btn { float: left; } .icon-btn i { margin-right: 0 !important; } .button-page .btn-group { margin-right: 10px; } .show>.dropdown-menu { overflow: hidden; } .dropdown-danger, .dropdown-default, .dropdown-disabled, .dropdown-info, .dropdown-inverse, .dropdown-primary, .dropdown-success, .dropdown-warning, .dropdown-warning { display: inline-block; vertical-align: center; position: relative; } .btn-group [class*=btn-], .dropdown-split [class*=btn-] { margin-right: 0; } .list-group-item.active { background-color: #448aff; border-color: #448aff; } .show>.btn-primary.dropdown-toggle, .sweet-alert .show>button.dropdown-toggle.confirm, .wizard>.actions .show>a.dropdown-toggle { background-color: #0764ff !important; border-color: #0764ff; -webkit-box-shadow: none; box-shadow: none; color: #fff; } .button-list .btn { margin-bottom: 10px; margin-right: 30px; } .Note-delete { margin-bottom: 0; opacity: 0; background: rgba(0, 0, 0, 0.6); border: none; position: absolute; right: 20px; color: #fff; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; border-radius: 2px; cursor: pointer; -webkit-transform: translateX(10px); transform: translateX(10px); } .popover-body .color-code { margin-bottom: 10px; } .popover-body .display-color { width: 75px; height: 2.50rem; border-radius: 0.25rem; margin-right: 30px; background-color: rgba(68, 138, 255, 0.5); border-color: rgba(68, 138, 255, 0.5); } .popover-body span.block { display: block; width: 100%; text-align: center; font-size: 14px; } .popover-title { text-align: center; } .btn.btn-disabled, .dropdown-disabled, .dropdown-split-disabled { cursor: not-allowed; } .nav-pills .nav-link.active, .nav-pills .nav-link.active:focus, .nav-pills .nav-link.active:hover, .nav-pills .nav-link.active, .nav-pills .nav-link.active:focus, .nav-pills .nav-link.active:hover, .nav-pills .nav-link.active.active, .nav-pills .nav-link.active.active:focus, .nav-pills .nav-link.active.active:hover { background: transparent; color: #0275d8; text-align: center; border-bottom: 1px solid #0275d8; } /**====== Basic-Buttons css Start ======**/ .btn-primary, .sweet-alert button.confirm, .wizard>.actions a { background-color: #448aff; border-color: #448aff; color: #fff; cursor: pointer; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } .btn-primary:hover, .sweet-alert button.confirm:hover, .wizard>.actions a:hover { background-color: #77aaff; border-color: #77aaff; } .btn-primary:active, .sweet-alert button.confirm:active, .wizard>.actions a:active { background-color: #0764ff !important; border-color: #0764ff; -webkit-box-shadow: none; box-shadow: none; color: #fff; } .btn-primary:focus, .sweet-alert button.confirm:focus, .wizard>.actions a:focus { -webkit-box-shadow: none; box-shadow: none; color: #fff; background-color: #77aaff; } .btn-primary.disabled, .sweet-alert button.disabled.confirm, .wizard>.actions a.disabled { background-color: rgba(68, 138, 255, 0.5); border-color: rgba(68, 138, 255, 0.5); } .btn-warning { background-color: #ffe100; border-color: #ffe100; color: #fff; cursor: pointer; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } .btn-warning:hover { background-color: #ffe733; border-color: #ffe733; color: #fff; } .btn-warning:active { background-color: #c2ab00 !important; border-color: #c2ab00; -webkit-box-shadow: none; box-shadow: none; color: #fff; } .btn-warning:focus { -webkit-box-shadow: none; box-shadow: none; color: #fff; background-color: #ffe733; } .btn-warning.disabled { background-color: rgba(255, 225, 0, 0.5); border-color: rgba(255, 225, 0, 0.5); } .btn-danger { background-color: #ff5252; border-color: #ff5252; color: #fff; cursor: pointer; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } .btn-danger:hover { background-color: #ff8585; border-color: #ff8585; } .btn-danger:active { background-color: #ff1515 !important; border-color: #ff1515; -webkit-box-shadow: none; box-shadow: none; color: #fff; } .btn-danger:focus { -webkit-box-shadow: none; box-shadow: none; color: #fff; background-color: #ff8585; } .btn-danger.disabled { background-color: rgba(255, 82, 82, 0.5); border-color: rgba(255, 82, 82, 0.5); } .btn-success { background-color: #11c15b; border-color: #11c15b; color: #fff; cursor: pointer; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } .btn-success:hover { background-color: #1aeb72; border-color: #1aeb72; } .btn-success:active { background-color: #0c8940 !important; border-color: #0c8940; -webkit-box-shadow: none; box-shadow: none; color: #fff; } .btn-success:focus { -webkit-box-shadow: none; box-shadow: none; color: #fff; background-color: #1aeb72; } .btn-success.disabled { background-color: rgba(17, 193, 91, 0.5); border-color: rgba(17, 193, 91, 0.5); } .btn-inverse { background-color: #37474f; border-color: #37474f; color: #fff; cursor: pointer; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } .btn-inverse:hover { background-color: #4c626d; border-color: #4c626d; } .btn-inverse:active { background-color: #1e272b !important; border-color: #1e272b; -webkit-box-shadow: none; box-shadow: none; color: #fff; } .btn-inverse:focus { -webkit-box-shadow: none; box-shadow: none; color: #fff; background-color: #4c626d; } .btn-inverse.disabled { background-color: rgba(55, 71, 79, 0.5); border-color: rgba(55, 71, 79, 0.5); } .btn-info { background-color: #00bcd4; border-color: #00bcd4; color: #fff; cursor: pointer; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } .btn-info:hover { background-color: #08e3ff; border-color: #08e3ff; } .btn-info:active { background-color: #008697 !important; border-color: #008697; -webkit-box-shadow: none; box-shadow: none; color: #fff; } .btn-info:focus { -webkit-box-shadow: none; box-shadow: none; color: #fff; background-color: #08e3ff; } .btn-info.disabled { background-color: rgba(0, 188, 212, 0.5); border-color: rgba(0, 188, 212, 0.5); } .btn-disabled { background-color: rgba(68, 138, 255, 0.5); border-color: rgba(68, 138, 255, 0.5); color: #fff; cursor: pointer; -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } /**====== Basic-Buttons css end ======**/ /**====== Outline-Buttons css Start ======**/ .btn-outline-primary { color: #0764ff; background-color: #fff; background-color: transparent; } .btn-outline-warning { color: #c2ab00; background-color: #fff; background-color: transparent; } .btn-outline-danger { color: #ff1515; background-color: #fff; background-color: transparent; } .btn-outline-success { color: #0c8940; background-color: #fff; background-color: transparent; } .btn-outline-inverse { color: #1e272b; background-color: #fff; background-color: transparent; } .btn-outline-inverse:hover { color: #fff; } .btn-outline-warning { color: #c2ab00; background-color: #fff; background-color: transparent; } .btn-outline-info { color: #008697; background-color: #fff; background-color: transparent; } .btn-outline-disabled { color: #0764ff; background-color: #fff; } /**====== Outline-Buttons css end ======**/ /**====== matrialized-Buttons css Start ======**/ .btn.btn-mat { position: relative; border-radius: 0; border: none; } .btn.btn-mat:before { content: ""; position: absolute; bottom: 0; left: 50%; right: 50%; height: 3px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .btn.btn-mat:hover { border: none; } .btn.btn-mat:hover:before { left: 0; right: 0; } .btn-primary.btn-mat, .sweet-alert button.btn-mat.confirm, .wizard>.actions a.btn-mat { background-color: #448aff; } .btn-primary.btn-mat:before, .sweet-alert button.btn-mat.confirm:before, .wizard>.actions a.btn-mat:before { background-color: #0764ff; } .btn-warning.btn-mat { background-color: #ffe100; } .btn-warning.btn-mat:before { background-color: #c2ab00; } .btn-danger.btn-mat { background-color: #ff5252; } .btn-danger.btn-mat:before { background-color: #ff1515; } .btn-success.btn-mat { background-color: #11c15b; } .btn-success.btn-mat:before { background-color: #0c8940; } .btn-inverse.btn-mat { background-color: #37474f; } .btn-inverse.btn-mat:before { background-color: #1e272b; } .btn-info.btn-mat { background-color: #00bcd4; } .btn-info.btn-mat:before { background-color: #008697; } .btn-outline-disabled { background-color: #448aff; } .btn-outline-disabled:before { background-color: #0764ff; } /**====== matrialized css end ======**/ /**====== Button-Size css start ======**/ .btn-xlg { padding: 14px 20px; font-size: 21px; line-height: 40px; } .btn-lg { padding: 12px 18px; font-size: 18px; line-height: 32px; } .btn-md { padding: 10px 16px; font-size: 15px; line-height: 23px; } .btn-sm { padding: 8px 14px; line-height: 16px; font-size: 11px; } .btn-mini { padding: 5px 10px; line-height: 14px; font-size: 10px; } /**====== Button-Size css end ======**/ /**====== Badges-button css start ======**/ .btn-primary .badge, .sweet-alert button.confirm .badge, .wizard>.actions a .badge { color: #448aff; background-color: #fff; } .btn-success .badge { color: #11c15b; background-color: #fff; } .btn-info .badge { color: #00bcd4; background-color: #fff; } .btn-warning .badge { color: #ffe100; background-color: #fff; } .btn-danger .badge { color: #ff5252; background-color: #fff; } /**====== Badges-button css end ======**/ /**====== Social-Buttons css start ======**/ .btn-dribbble, .btn-dropbox, .btn-facebook, .btn-flickr, .btn-github, .btn-google-plus, .btn-instagram, .btn-linkedin, .btn-pinterest, .btn-skype, .btn-tumblr, .btn-twitter, .btn-youtube { color: #fff; } .btn-dribbble:focus, .btn-dribbble:hover, .btn-dropbox:focus, .btn-dropbox:hover, .btn-facebook:focus, .btn-facebook:hover, .btn-flickr:focus, .btn-flickr:hover, .btn-github:focus, .btn-github:hover, .btn-google-plus:focus, .btn-google-plus:hover, .btn-instagram:focus, .btn-instagram:hover, .btn-linkedin:focus, .btn-linkedin:hover, .btn-pinterest:focus, .btn-pinterest:hover, .btn-skype:focus, .btn-skype:hover, .btn-tumblr:focus, .btn-tumblr:hover, .btn-twitter:focus, .btn-twitter:hover, .btn-youtube:focus, .btn-youtube:hover { color: #fff; -webkit-box-shadow: none; box-shadow: none; } .btn-facebook { background-color: #3b5998; } .btn-twitter { background-color: #00ACED; } .btn-linkedin { background-color: #007BB6; } .btn-dribbble { background-color: #EA4C89; } .btn-google-plus { background-color: #DD4B39; } .btn-instagram { background-color: #517FA4; } .btn-pinterest { background-color: #CB2027; } .btn-dropbox { background-color: #32506D; } .btn-tumblr { background-color: #00ACED; } /**====== Social-Buttons css end ======**/ /**====== Drop-down-Buttons css start ======**/ .dropdown-primary .dropdown-menu a:hover, .dropdown-split-primary .dropdown-menu a:hover { background-color: #448aff; color: #fff; } .dropdown-split-success .dropdown-menu a:hover, .dropdown-success .dropdown-menu a:hover { background-color: #11c15b; color: #fff; } .dropdown-info .dropdown-menu a:hover, .dropdown-split-info .dropdown-menu a:hover { background-color: #00bcd4; color: #fff; } .dropdown-split-warning .dropdown-menu a:hover, .dropdown-warning .dropdown-menu a:hover { background-color: #ffe100; color: #fff; } .dropdown-danger .dropdown-menu a:hover, .dropdown-split-danger .dropdown-menu a:hover { background-color: #ff5252; color: #fff; } .dropdown-inverse .dropdown-item, .dropdown-split-inverse .dropdown-item { -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .dropdown-inverse .dropdown-item:hover, .dropdown-split-inverse .dropdown-item:hover { background-color: #37474f; color: #fff; } /**====== Drop-down-Buttons css end ======**/ /**====== Theme-Buttons css end ======**/ /** ===================== Basic form elements css start ========================== **/ .col-form-label { font-size: 14px; } .select2-container { width: 100%; } .form-group { margin-bottom: 1.25em; } .form-group .form-control-lg { font-size: 1.25em; } .form-group .form-control-round { border-radius: 50px; } .form-group .form-control-static:focus { outline: none; } .form-control { font-size: 14px; border-radius: 2px; border: 1px solid #cccccc; } .form-control:focus { border: 1px solid #448aff; } .form-control.form-control-normal { font-weight: 400; } .form-control.form-control-bold { font-weight: 500; } .form-control.form-control-capitalize { text-transform: capitalize; } .form-control.form-control-uppercase { text-transform: uppercase; } .form-control.form-control-lowercase { text-transform: lowercase; } .form-control.form-control-variant { font-variant: small-caps; } .form-control.form-control-left { text-align: left; } .form-control.form-control-center { text-align: center; } .form-control.form-control-right { text-align: right; } .form-control.form-control-rtl { direction: rtl; } .form-control:disabled { cursor: not-allowed; opacity: 0.5; } /*===== Border Inputs start =====*/ .form-control-primary { border-color: #448aff; color: #448aff; } .form-control-primary:focus { border-color: #448aff; } .input-group-primary .input-group-append .input-group-text, .input-group-primary .input-group-prepend .input-group-text { background-color: #448aff; } .input-group-primary .form-control { border-color: #448aff; } .form-control-warning { border-color: #ffe100; color: #ffe100; } .form-control-warning:focus { border-color: #ffe100; } .input-group-warning .input-group-append .input-group-text, .input-group-warning .input-group-prepend .input-group-text { background-color: #ffe100; } .input-group-warning .form-control { border-color: #ffe100; } .form-control-default { border-color: #d6d6d6; color: #d6d6d6; } .input-group-default .input-group-append .input-group-text, .input-group-default .input-group-prepend .input-group-text { background-color: #d6d6d6; } .input-group-default .form-control { border-color: #d6d6d6; } .form-control-danger { border-color: #ff5252; color: #ff5252; } .form-control-danger:focus { border-color: #ff5252; } .input-group-danger .input-group-append .input-group-text, .input-group-danger .input-group-prepend .input-group-text { background-color: #ff5252; } .input-group-danger .form-control { border-color: #ff5252; } .form-control-success { border-color: #11c15b; color: #11c15b; } .form-control-success:focus { border-color: #11c15b; } .input-group-success .input-group-append .input-group-text, .input-group-success .input-group-prepend .input-group-text { background-color: #11c15b; } .input-group-success .form-control { border-color: #11c15b; } .form-control-inverse { border-color: #37474f; color: #37474f; } .form-control-inverse:focus { border-color: #37474f; } .input-group-inverse .input-group-append .input-group-text, .input-group-inverse .input-group-prepend .input-group-text { background-color: #37474f; } .input-group-inverse .form-control { border-color: #37474f; } .form-control-info { border-color: #00bcd4; color: #00bcd4; } .form-control-info:focus { border-color: #00bcd4; } .input-group-info .input-group-append .input-group-text, .input-group-info .input-group-prepend .input-group-text { background-color: #00bcd4; } .input-group-info .form-control { border-color: #00bcd4; } /*===== Form Input-Text start =====*/ .form-txt-primary { color: #448aff; } .form-txt-primary:focus { color: #448aff; } .form-txt-primary::-moz-placeholder { color: #448aff; opacity: 1; } .form-txt-primary:-ms-input-placeholder { color: #448aff; } .form-txt-primary::-webkit-input-placeholder { color: #448aff; } .form-txt-warning { color: #ffe100; } .form-txt-warning:focus { color: #ffe100; } .form-txt-warning::-moz-placeholder { color: #ffe100; opacity: 1; } .form-txt-warning:-ms-input-placeholder { color: #ffe100; } .form-txt-warning::-webkit-input-placeholder { color: #ffe100; } .form-txt-default { color: #d6d6d6; } .form-txt-default:focus { color: #d6d6d6; } .form-txt-default::-moz-placeholder { color: #d6d6d6; opacity: 1; } .form-txt-default:-ms-input-placeholder { color: #d6d6d6; } .form-txt-default::-webkit-input-placeholder { color: #d6d6d6; } .form-txt-danger { color: #ff5252; } .form-txt-danger:focus { color: #ff5252; } .form-txt-danger::-moz-placeholder { color: #ff5252; opacity: 1; } .form-txt-danger:-ms-input-placeholder { color: #ff5252; } .form-txt-danger::-webkit-input-placeholder { color: #ff5252; } .form-txt-success { color: #11c15b; } .form-txt-success:focus { color: #11c15b; } .form-txt-success::-moz-placeholder { color: #11c15b; opacity: 1; } .form-txt-success:-ms-input-placeholder { color: #11c15b; } .form-txt-success::-webkit-input-placeholder { color: #11c15b; } .form-txt-inverse { color: #37474f; } .form-txt-inverse:focus { color: #37474f; } .form-txt-inverse::-moz-placeholder { color: #37474f; opacity: 1; } .form-txt-inverse:-ms-input-placeholder { color: #37474f; } .form-txt-inverse::-webkit-input-placeholder { color: #37474f; } .form-txt-info { color: #00bcd4; } .form-txt-info:focus { color: #00bcd4; } .form-txt-info::-moz-placeholder { color: #00bcd4; opacity: 1; } .form-txt-info:-ms-input-placeholder { color: #00bcd4; } .form-txt-info::-webkit-input-placeholder { color: #00bcd4; } /*===== Form Background-inputs start =====*/ .form-bg-primary { background-color: #448aff; border-color: #448aff; color: #fff; } .form-bg-primary:focus { background-color: #448aff; border-color: #448aff; color: #fff; } .form-bg-primary::-moz-placeholder { color: #fff; opacity: 1; } .form-bg-primary:-ms-input-placeholder { color: #fff; } .form-bg-primary::-webkit-input-placeholder { color: #fff; } .form-bg-warning { background-color: #ffe100; border-color: #ffe100; color: #fff; } .form-bg-warning:focus { background-color: #ffe100; border-color: #ffe100; color: #fff; } .form-bg-warning::-moz-placeholder { color: #fff; opacity: 1; } .form-bg-warning:-ms-input-placeholder { color: #fff; } .form-bg-warning::-webkit-input-placeholder { color: #fff; } .form-bg-default { background-color: #d6d6d6; border-color: #d6d6d6; color: #fff; } .form-bg-default:focus { background-color: #d6d6d6; border-color: #d6d6d6; color: #fff; } .form-bg-default::-moz-placeholder { color: #fff; opacity: 1; } .form-bg-default:-ms-input-placeholder { color: #fff; } .form-bg-default::-webkit-input-placeholder { color: #fff; } .form-bg-danger { background-color: #ff5252; border-color: #ff5252; color: #fff; } .form-bg-danger:focus { background-color: #ff5252; border-color: #ff5252; color: #fff; } .form-bg-danger::-moz-placeholder { color: #fff; opacity: 1; } .form-bg-danger:-ms-input-placeholder { color: #fff; } .form-bg-danger::-webkit-input-placeholder { color: #fff; } .form-bg-success { background-color: #11c15b; border-color: #11c15b; color: #fff; } .form-bg-success:focus { background-color: #11c15b; border-color: #11c15b; color: #fff; } .form-bg-success::-moz-placeholder { color: #fff; opacity: 1; } .form-bg-success:-ms-input-placeholder { color: #fff; } .form-bg-success::-webkit-input-placeholder { color: #fff; } .form-bg-inverse { background-color: #37474f; border-color: #37474f; color: #fff; } .form-bg-inverse:focus { background-color: #37474f; border-color: #37474f; color: #fff; } .form-bg-inverse::-moz-placeholder { color: #fff; opacity: 1; } .form-bg-inverse:-ms-input-placeholder { color: #fff; } .form-bg-inverse::-webkit-input-placeholder { color: #fff; } .form-bg-info { background-color: #00bcd4; border-color: #00bcd4; color: #fff; } .form-bg-info:focus { background-color: #00bcd4; border-color: #00bcd4; color: #fff; } .form-bg-info::-moz-placeholder { color: #fff; opacity: 1; } .form-bg-info:-ms-input-placeholder { color: #fff; } .form-bg-info::-webkit-input-placeholder { color: #fff; } /*===== Form Validation states start =====*/ .has-success .col-form-label { color: #11c15b; } .has-success .form-control-success { border-color: #11c15b; } .has-warning .col-form-label { color: #ffe100; } .has-warning .form-control-success { border-color: #ffe100; } .has-danger .col-form-label { color: #ff5252; } .has-danger .form-control-success { border-color: #ff5252; } /*===== Form-icon css starts =====*/ .left-icon-control { position: relative; } .left-icon-control input { padding-left: 50px; } .left-icon-control .form-icon { position: absolute; top: 50%; left: 17px; margin-top: -12px; } .right-icon-control { position: relative; } .right-icon-control input { padding-right: 50px; } .right-icon-control .form-icon { position: absolute; bottom: 8px; right: 8px; } .right-icon-control .form-icon .btn.btn-icon { width: 35px; height: 35px; padding: 0; } .right-icon-control .btn>i { margin-right: 0; } /*===== Form-icon css ends =====*/ /*===== Basic form elements ends =====*/ /** ===================== Form group-add-on css start ========================== **/ .input-group { margin-bottom: 1.25em; } .input-group-append .input-group-text, .input-group-prepend .input-group-text { background-color: #448aff; border-color: rgba(0, 0, 0, 0.15); color: #fff; } .input-group-button .input-group-addon { -webkit-transition: all ease-in 0.3s; transition: all ease-in 0.3s; } .input-group-button .input-group-addon:hover { background-color: #77aaff; border-color: #77aaff; } .input-group-button .input-group-addon:hover .btn { background-color: #77aaff; border-color: #77aaff; } .input-group-dropdown [class*=btn-] { margin-bottom: 0; } /*===== Form group-add-on ends =====*/ /** ===================== Switches css start ========================== **/ .js-dynamic-disable, .js-dynamic-enable { vertical-align: inherit; } /*===== Switches css ends =====*/ /** ===================== Radio-button css start ========================== **/ .form-radio { position: relative; } .form-radio .form-help { position: absolute; width: 100%; } .form-radio label { position: relative; padding-left: 1.5rem; text-align: left; color: #333; display: block; line-height: 1.8; } .form-radio input { width: auto; opacity: 0.00000001; position: absolute; left: 0; } .radio .helper { position: absolute; top: -0.15rem; left: -0.25rem; cursor: pointer; display: block; font-size: 1rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #999; } .radio .helper::after { -webkit-transform: scale(0); transform: scale(0); background-color: #448aff; border-color: #448aff; } .radio .helper::after, .radio .helper::before { content: ''; position: absolute; left: 0; top: 3px; margin: 0.25rem; width: 1rem; height: 1rem; -webkit-transition: -webkit-transform 0.28s ease; transition: -webkit-transform 0.28s ease; transition: transform 0.28s ease, -webkit-transform 0.28s ease; border-radius: 50%; border: 0.125rem solid #448aff; } .radio label:hover .helper { color: #448aff; } .radio input:checked~.helper::after { -webkit-transform: scale(0.5); transform: scale(0.5); } .radio input:checked~.helper::before { color: #448aff; -webkit-animation: ripple 0.3s linear forwards; animation: ripple 0.3s linear forwards; } .radio.radiofill input:checked~.helper::after { -webkit-transform: scale(1); transform: scale(1); } .radio.radiofill .helper::after { background-color: #448aff; } .radio.radio-outline input:checked~.helper::after { -webkit-transform: scale(0.6); transform: scale(0.6); } .radio.radio-outline .helper::after { background-color: #fff; border: 0.225rem solid #448aff; } .radio.radio-matrial input~.helper::after { background-color: #fff; } .radio.radio-matrial input:checked~.helper::after { -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-box-shadow: 0 1px 7px -1px rgba(0, 0, 0, 0.72); box-shadow: 0 1px 7px -1px rgba(0, 0, 0, 0.72); } .radio.radio-matrial input:checked~.helper::before { background-color: #448aff; } .radio.radio-disable { opacity: 0.7; } .radio.radio-disable label { cursor: not-allowed; } .radio-inline { display: inline-block; margin-right: 20px; } .radio.radio-primary .helper::after { background-color: #448aff; border-color: #448aff; } .radio.radio-primary .helper::before { border-color: #448aff; } .radio.radio-outline.radio-primary .helper::after { background-color: #fff; border: 0.225rem solid #448aff; } .radio.radio-outline.radio-primary .helper::before { border-color: #448aff; } .radio.radio-matrial.radio-primary input~.helper::after { background-color: #fff; border-color: #fff; } .radio.radio-matrial.radio-primary input~.helper::before { background-color: #448aff; border-color: #448aff; } .radio.radio-warning .helper::after { background-color: #ffe100; border-color: #ffe100; } .radio.radio-warning .helper::before { border-color: #ffe100; } .radio.radio-outline.radio-warning .helper::after { background-color: #fff; border: 0.225rem solid #ffe100; } .radio.radio-outline.radio-warning .helper::before { border-color: #ffe100; } .radio.radio-matrial.radio-warning input~.helper::after { background-color: #fff; border-color: #fff; } .radio.radio-matrial.radio-warning input~.helper::before { background-color: #ffe100; border-color: #ffe100; } .radio.radio-default .helper::after { background-color: #d6d6d6; border-color: #d6d6d6; } .radio.radio-default .helper::before { border-color: #d6d6d6; } .radio.radio-outline.radio-default .helper::after { background-color: #fff; border: 0.225rem solid #d6d6d6; } .radio.radio-outline.radio-default .helper::before { border-color: #d6d6d6; } .radio.radio-matrial.radio-default input~.helper::after { background-color: #fff; border-color: #fff; } .radio.radio-matrial.radio-default input~.helper::before { background-color: #d6d6d6; border-color: #d6d6d6; } .radio.radio-danger .helper::after { background-color: #ff5252; border-color: #ff5252; } .radio.radio-danger .helper::before { border-color: #ff5252; } .radio.radio-outline.radio-danger .helper::after { background-color: #fff; border: 0.225rem solid #ff5252; } .radio.radio-outline.radio-danger .helper::before { border-color: #ff5252; } .radio.radio-matrial.radio-danger input~.helper::after { background-color: #fff; border-color: #fff; } .radio.radio-matrial.radio-danger input~.helper::before { background-color: #ff5252; border-color: #ff5252; } .radio.radio-success .helper::after { background-color: #11c15b; border-color: #11c15b; } .radio.radio-success .helper::before { border-color: #11c15b; } .radio.radio-outline.radio-success .helper::after { background-color: #fff; border: 0.225rem solid #11c15b; } .radio.radio-outline.radio-success .helper::before { border-color: #11c15b; } .radio.radio-matrial.radio-success input~.helper::after { background-color: #fff; border-color: #fff; } .radio.radio-inverse .helper::after { background-color: #37474f; border-color: #37474f; } .radio.radio-inverse .helper::before { border-color: #37474f; } .radio.radio-outline.radio-inverse .helper::after { background-color: #fff; border: 0.225rem solid #37474f; } .radio.radio-outline.radio-inverse .helper::before { border-color: #37474f; } .radio.radio-matrial.radio-inverse input~.helper::after { background-color: #fff; border-color: #fff; } .radio.radio-matrial.radio-inverse input~.helper::before { background-color: #37474f; border-color: #37474f; } .radio.radio-info .helper::after { background-color: #00bcd4; border-color: #00bcd4; } .radio.radio-info .helper::before { border-color: #00bcd4; } .radio.radio-outline.radio-info .helper::after { background-color: #fff; border: 0.225rem solid #00bcd4; } .radio.radio-outline.radio-info .helper::before { border-color: #00bcd4; } .radio.radio-matrial.radio-info input~.helper::after { background-color: #fff; border-color: #fff; } .radio.radio-matrial.radio-info input~.helper::before { background-color: #00bcd4; border-color: #00bcd4; } @-webkit-keyframes ripple { 0% { -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0); } 50% { -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.05); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.05); } 100% { -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } } @keyframes ripple { 0% { -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0); } 50% { -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.05); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.05); } 100% { -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } } /*===== Radio Button css ends =====*/ /*===== Border-checkbox css start =====*/ .border-checkbox-section .border-checkbox-group { display: inline-block; } .border-checkbox-section .border-checkbox-group .border-checkbox:checked+.border-checkbox-label:before { -webkit-animation: ripple 0.3s linear forwards; animation: ripple 0.3s linear forwards; } .border-checkbox-section .border-checkbox-group .border-checkbox:checked+.border-checkbox-label:after { -webkit-animation: check linear 0.5s; animation: check linear 0.5s; opacity: 1; border-color: #448aff; } .border-checkbox-section .border-checkbox-group .border-checkbox:checked+.border-checkbox-label:after .border-checkbox-label:before { border-color: #eee; } .border-checkbox-section .border-checkbox-group .border-checkbox-label { position: relative; display: inline-block; cursor: pointer; height: 20px; line-height: 20px; padding-left: 30px; margin-right: 15px; } .border-checkbox-section .border-checkbox-group .border-checkbox-label:after { content: ""; display: block; width: 6px; height: 12px; opacity: 0.9; border-right: 2px solid #eee; border-top: 2px solid #eee; position: absolute; left: 4px; top: 11px; -webkit-transform: scaleX(-1) rotate(135deg); transform: scaleX(-1) rotate(135deg); -webkit-transform-origin: left top; transform-origin: left top; } .border-checkbox-section .border-checkbox-group .border-checkbox-label:before { content: ""; display: block; border: 2px solid #448aff; width: 20px; height: 20px; position: absolute; left: 0; } .border-checkbox-section .border-checkbox { display: none; } .border-checkbox-section .border-checkbox:disabled~.border-checkbox-label { cursor: no-drop; color: #ccc; } @-webkit-keyframes check { 0% { height: 0; width: 0; } 25% { height: 0; width: 6px; } 50% { height: 12px; width: 6px; } } @keyframes check { 0% { height: 0; width: 0; } 25% { height: 0; width: 6px; } 50% { height: 12px; width: 6px; } } .border-checkbox-section .border-checkbox-group-primary .border-checkbox-label:before { border: 2px solid #448aff; } .border-checkbox-section .border-checkbox-group-primary .border-checkbox:checked+.border-checkbox-label:after { border-color: #448aff; } .border-checkbox-section .border-checkbox-group-warning .border-checkbox-label:before { border: 2px solid #ffe100; } .border-checkbox-section .border-checkbox-group-warning .border-checkbox:checked+.border-checkbox-label:after { border-color: #ffe100; } .border-checkbox-section .border-checkbox-group-default .border-checkbox-label:before { border: 2px solid #d6d6d6; } .border-checkbox-section .border-checkbox-group-default .border-checkbox:checked+.border-checkbox-label:after { border-color: #d6d6d6; } .border-checkbox-section .border-checkbox-group-danger .border-checkbox-label:before { border: 2px solid #ff5252; } .border-checkbox-section .border-checkbox-group-danger .border-checkbox:checked+.border-checkbox-label:after { border-color: #ff5252; } .border-checkbox-section .border-checkbox-group-success .border-checkbox-label:before { border: 2px solid #11c15b; } .border-checkbox-section .border-checkbox-group-success .border-checkbox:checked+.border-checkbox-label:after { border-color: #11c15b; } .border-checkbox-section .border-checkbox-group-inverse .border-checkbox-label:before { border: 2px solid #37474f; } .border-checkbox-section .border-checkbox-group-inverse .border-checkbox:checked+.border-checkbox-label:after { border-color: #37474f; } .border-checkbox-section .border-checkbox-group-info .border-checkbox-label:before { border: 2px solid #00bcd4; } .border-checkbox-section .border-checkbox-group-info .border-checkbox:checked+.border-checkbox-label:after { border-color: #00bcd4; } /*===== zoom Fade-in-checkbox css start =====*/ .checkbox-fade, .checkbox-zoom { display: inline-block; margin-right: 15px; } .checkbox-fade label, .checkbox-zoom label { line-height: 20px; } .checkbox-fade label input[type="checkbox"], .checkbox-fade label input[type="radio"], .checkbox-zoom label input[type="checkbox"], .checkbox-zoom label input[type="radio"] { display: none; } .checkbox-fade label input[type="checkbox"]:checked+.cr>.cr-icon, .checkbox-fade label input[type="radio"]:checked+.cr>.cr-icon, .checkbox-zoom label input[type="checkbox"]:checked+.cr>.cr-icon, .checkbox-zoom label input[type="radio"]:checked+.cr>.cr-icon { -webkit-transform: scale(1) rotateZ(0deg); transform: scale(1) rotateZ(0deg); opacity: 1; } .checkbox-fade label input[type="checkbox"]+.cr>.cr-icon, .checkbox-fade label input[type="radio"]+.cr>.cr-icon, .checkbox-zoom label input[type="checkbox"]+.cr>.cr-icon, .checkbox-zoom label input[type="radio"]+.cr>.cr-icon { -webkit-transform: scale(3) rotateZ(-20deg); transform: scale(3) rotateZ(-20deg); opacity: 0; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .checkbox-fade label:after, .checkbox-zoom label:after { content: ''; display: table; clear: both; } .checkbox-fade.fade-in-disable .cr, .checkbox-fade.fade-in-disable label, .checkbox-zoom.fade-in-disable .cr, .checkbox-zoom.fade-in-disable label { color: #ccc; cursor: no-drop; } .checkbox-fade .cr, .checkbox-zoom .cr { border-radius: 0; border: 2px solid #448aff; cursor: pointer; display: inline-block; float: left; height: 20px; margin-right: 1rem; position: relative; width: 20px; } .checkbox-fade .cr .cr-icon, .checkbox-zoom .cr .cr-icon { color: #448aff; font-size: 0.8em; left: 0; line-height: 0; position: absolute; right: 0; text-align: center; top: 50%; } .checkbox-fade input[type="checkbox"]:checked+.cr, .checkbox-zoom input[type="checkbox"]:checked+.cr { -webkit-animation: ripple 0.3s linear forwards; animation: ripple 0.3s linear forwards; } .checkbox-fade label { line-height: 20px; } .checkbox-fade label input[type="checkbox"], .checkbox-fade label input[type="radio"] { display: none; } .checkbox-fade label input[type="checkbox"]:checked+.cr>.cr-icon, .checkbox-fade label input[type="radio"]:checked+.cr>.cr-icon { -webkit-transform: scale(1) rotateZ(0deg); transform: scale(1) rotateZ(0deg); opacity: 1; } .checkbox-fade label input[type="checkbox"]+.cr>.cr-icon, .checkbox-fade label input[type="radio"]+.cr>.cr-icon { -webkit-transform: scale(3) rotateZ(-20deg); transform: scale(3) rotateZ(-20deg); opacity: 0; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .checkbox-zoom label { line-height: 20px; } .checkbox-zoom label input[type="checkbox"], .checkbox-zoom label input[type="radio"] { display: none; } .checkbox-zoom label input[type="checkbox"]:checked+.cr>.cr-icon, .checkbox-zoom label input[type="radio"]:checked+.cr>.cr-icon { -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); opacity: 1; } .checkbox-zoom label input[type="checkbox"]+.cr>.cr-icon, .checkbox-zoom label input[type="radio"]+.cr>.cr-icon { -webkit-transform: scale3d(0.2, 0.2, 0.1) translate3d(0, 0, 0); transform: scale3d(0.2, 0.2, 0.1) translate3d(0, 0, 0); opacity: 0; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .checkbox-fade.fade-in-primary .cr, .checkbox-fade.zoom-primary .cr, .checkbox-zoom.fade-in-primary .cr, .checkbox-zoom.zoom-primary .cr { border: 2px solid #448aff; } .checkbox-fade.fade-in-primary .cr .cr-icon, .checkbox-fade.zoom-primary .cr .cr-icon, .checkbox-zoom.fade-in-primary .cr .cr-icon, .checkbox-zoom.zoom-primary .cr .cr-icon { color: #448aff; } .checkbox-fade.fade-in-warning .cr, .checkbox-fade.zoom-warning .cr, .checkbox-zoom.fade-in-warning .cr, .checkbox-zoom.zoom-warning .cr { border: 2px solid #ffe100; } .checkbox-fade.fade-in-warning .cr .cr-icon, .checkbox-fade.zoom-warning .cr .cr-icon, .checkbox-zoom.fade-in-warning .cr .cr-icon, .checkbox-zoom.zoom-warning .cr .cr-icon { color: #ffe100; } .checkbox-fade.fade-in-default .cr, .checkbox-fade.zoom-default .cr, .checkbox-zoom.fade-in-default .cr, .checkbox-zoom.zoom-default .cr { border: 2px solid #d6d6d6; } .checkbox-fade.fade-in-default .cr .cr-icon, .checkbox-fade.zoom-default .cr .cr-icon, .checkbox-zoom.fade-in-default .cr .cr-icon, .checkbox-zoom.zoom-default .cr .cr-icon { color: #d6d6d6; } .checkbox-fade.fade-in-danger .cr, .checkbox-fade.zoom-danger .cr, .checkbox-zoom.fade-in-danger .cr, .checkbox-zoom.zoom-danger .cr { border: 2px solid #ff5252; } .checkbox-fade.fade-in-danger .cr .cr-icon, .checkbox-fade.zoom-danger .cr .cr-icon, .checkbox-zoom.fade-in-danger .cr .cr-icon, .checkbox-zoom.zoom-danger .cr .cr-icon { color: #ff5252; } .checkbox-fade.fade-in-success .cr, .checkbox-fade.zoom-success .cr, .checkbox-zoom.fade-in-success .cr, .checkbox-zoom.zoom-success .cr { border: 2px solid #11c15b; } .checkbox-fade.fade-in-success .cr .cr-icon, .checkbox-fade.zoom-success .cr .cr-icon, .checkbox-zoom.fade-in-success .cr .cr-icon, .checkbox-zoom.zoom-success .cr .cr-icon { color: #11c15b; } .checkbox-fade.fade-in-inverse .cr, .checkbox-fade.zoom-inverse .cr, .checkbox-zoom.fade-in-inverse .cr, .checkbox-zoom.zoom-inverse .cr { border: 2px solid #37474f; } .checkbox-fade.fade-in-inverse .cr .cr-icon, .checkbox-fade.zoom-inverse .cr .cr-icon, .checkbox-zoom.fade-in-inverse .cr .cr-icon, .checkbox-zoom.zoom-inverse .cr .cr-icon { color: #37474f; } .checkbox-fade.fade-in-info .cr, .checkbox-fade.zoom-info .cr, .checkbox-zoom.fade-in-info .cr, .checkbox-zoom.zoom-info .cr { border: 2px solid #00bcd4; } .checkbox-fade.fade-in-info .cr .cr-icon, .checkbox-fade.zoom-info .cr .cr-icon, .checkbox-zoom.fade-in-info .cr .cr-icon, .checkbox-zoom.zoom-info .cr .cr-icon { color: #00bcd4; } /*===== Color-checkbox css start =====*/ .checkbox-color { display: inline-block; margin-right: 20px; cursor: pointer; } .checkbox-color label { display: inline-block; position: relative; padding-left: 10px; line-height: 20px; } .checkbox-color label::before { content: ""; display: inline-block; position: absolute; top: 0; width: 20px; height: 20px; left: 0; right: 0; text-align: center; margin-left: -20px; border: 1px solid #ccc; border-radius: 0; background-color: #fff; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } .checkbox-color label::after { display: inline-block; position: absolute; width: 16px; height: 16px; left: -1px; top: 0; margin-left: -17px; padding-left: 3px; padding-top: 1px; font-size: 11px; color: #fff; } .checkbox-color input[type="checkbox"] { opacity: 0; } .checkbox-color input[type="checkbox"]:focus+label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .checkbox-color input[type="checkbox"]:checked+label::after { font-family: 'FontAwesome'; content: "\f00c"; } .checkbox-color input[type="checkbox"]:checked+label::before { -webkit-animation: ripple 0.3s linear forwards; animation: ripple 0.3s linear forwards; } .checkbox-color input[type="checkbox"]:disabled+label { opacity: 0.65; } .checkbox-color input[type="checkbox"]:disabled+label::before { background-color: #eee; cursor: not-allowed; } .checkbox-color.checkbox-circle label::before { border-radius: 50%; } .checkbox-color.checkbox-inline { margin-top: 0; } .checkbox-danger input[type="checkbox"]:checked+label::after, .checkbox-info input[type="checkbox"]:checked+label::after, .checkbox-primary input[type="checkbox"]:checked+label::after, .checkbox-success input[type="checkbox"]:checked+label::after, .checkbox-warning input[type="checkbox"]:checked+label::after { color: #fff; } .checkbox-primary input[type="checkbox"]:checked+label::before { background-color: #2196f3; border-color: #2196f3; } .checkbox-primary input[type="checkbox"]:checked+label::before { background-color: #448aff; } .checkbox-warning input[type="checkbox"]:checked+label::before { background-color: #ffe100; } .checkbox-default input[type="checkbox"]:checked+label::before { background-color: #d6d6d6; } .checkbox-danger input[type="checkbox"]:checked+label::before { background-color: #ff5252; } .checkbox-success input[type="checkbox"]:checked+label::before { background-color: #11c15b; } .checkbox-inverse input[type="checkbox"]:checked+label::before { background-color: #37474f; } .checkbox-info input[type="checkbox"]:checked+label::before { background-color: #00bcd4; } /*===== Form-wizard forms css end =====*/ /*Form control start*/ .form-material .form-group { position: relative; } .form-material .form-group.form-static-label .form-control~.float-label { top: -14px; font-size: 11px; } .form-material .form-control { display: inline-block; height: 43px; width: 100%; border: none; border-radius: 0; font-size: 16px; font-weight: 400; padding: 0; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; border-bottom: 1px solid #ccc; } .form-material .form-control:focus { border-color: transparent; outline: none; -webkit-box-shadow: none; box-shadow: none; } .form-material .form-control:focus~.form-bar:after, .form-material .form-control:focus~.form-bar:before { width: 50%; } .form-material textarea { height: 100px; } .form-material .form-bar { position: relative; display: block; width: 100%; } .form-material .form-bar:after, .form-material .form-bar:before { content: ''; height: 2px; width: 0; bottom: 0; position: absolute; transition: 0.3s ease all; -moz-transition: 0.3s ease all; -webkit-transition: 0.3s ease all; } .form-material .form-bar:before { left: 50%; } .form-material .form-bar:after { right: 50%; } .form-material .float-label { pointer-events: none; position: absolute; top: 12px; left: 0; font-size: 14px; font-weight: 400; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } .form-material .material-group { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1.25em; } .form-material .material-group .material-addone { padding: 0.5rem 0.75rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .form-material .material-group .material-addone i, .form-material .material-group .material-addone span { font-size: 20px; } .form-material .material-group .form-group { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 1%; margin-bottom: 0; } .form-material .material-group.material-group-lg .material-addone { padding: 0.5rem 1rem; } .form-material .material-group.material-group-lg .material-addone i, .form-material .material-group.material-group-lg .material-addone span { font-size: 1.55rem; font-weight: 500; } .form-material .material-group.material-group-lg .form-control { padding: 0.5rem 0; font-size: 1.25rem; line-height: 1.5; } .form-material .material-group.material-group-lg .form-control:focus~.float-label, .form-material .material-group.material-group-lg .form-control:valid~.float-label { top: -15px; font-size: 14px; } .form-material .material-group.material-group-lg .float-label { font-size: 1.25rem; } .form-material .material-group.material-group-sm .material-addone { padding: 0.25rem 0.5rem; } .form-material .material-group.material-group-sm .material-addone i, .form-material .material-group.material-group-sm .material-addone span { font-size: 0.775rem; } .form-material .material-group.material-group-sm .form-control { padding: 0.25rem 0; font-size: 0.875rem; line-height: 1.5; } .form-material .material-group.material-group-sm .form-control:focus~.float-label, .form-material .material-group.material-group-sm .form-control:valid~.float-label { top: -9px; font-size: 11px; } .form-material .material-group.material-group-sm .float-label { font-size: 0.775rem; } .form-material .form-control:focus~.float-label, .form-material .form-material .form-control:valid~.float-label { top: 12px; font-size: 14px; } .form-material .form-control.fill~.float-label, .form-material .form-material .form-control.fill~.float-label { top: -14px; font-size: 11px; } .form-material .form-primary .form-control:focus~label { color: #448aff; } .form-material .form-primary .form-control:focus~.form-bar:after, .form-material .form-primary .form-control:focus~.form-bar:before { background: #448aff; } .form-material .form-primary.form-static-label .float-label { color: #448aff; } .form-material .form-primary.form-static-label .form-control { border-bottom-color: #448aff; } .form-material .material-group-primary .material-addone i, .form-material .material-group-primary .material-addone span { color: #448aff; } .form-material .form-warning .form-control:focus~label { color: #ffe100; } .form-material .form-warning .form-control:focus~.form-bar:after, .form-material .form-warning .form-control:focus~.form-bar:before { background: #ffe100; } .form-material .form-warning.form-static-label .float-label { color: #ffe100; } .form-material .form-warning.form-static-label .form-control { border-bottom-color: #ffe100; } .form-material .material-group-warning .material-addone i, .form-material .material-group-warning .material-addone span { color: #ffe100; } .form-material .form-default .form-control:focus~label { color: #d6d6d6; } .form-material .form-default .form-control:focus~.form-bar:after, .form-material .form-default .form-control:focus~.form-bar:before { background: #d6d6d6; } .form-material .form-default.form-static-label .float-label { color: #d6d6d6; } .form-material .form-default.form-static-label .form-control { border-bottom-color: #d6d6d6; } .form-material .material-group-default .material-addone i, .form-material .material-group-default .material-addone span { color: #d6d6d6; } .form-material .form-danger .form-control:focus~label { color: #ff5252; } .form-material .form-danger .form-control:focus~.form-bar:after, .form-material .form-danger .form-control:focus~.form-bar:before { background: #ff5252; } .form-material .form-danger.form-static-label .float-label { color: #ff5252; } .form-material .form-danger.form-static-label .form-control { border-bottom-color: #ff5252; } .form-material .material-group-danger .material-addone i, .form-material .material-group-danger .material-addone span { color: #ff5252; } .form-material .form-success .form-control:focus~label { color: #11c15b; } .form-material .form-success .form-control:focus~.form-bar:after, .form-material .form-success .form-control:focus~.form-bar:before { background: #11c15b; } .form-material .form-success.form-static-label .float-label { color: #11c15b; } .form-material .form-success.form-static-label .form-control { border-bottom-color: #11c15b; } .form-material .material-group-success .material-addone i, .form-material .material-group-success .material-addone span { color: #11c15b; } .form-material .form-inverse .form-control:focus~label { color: #37474f; } .form-material .form-inverse .form-control:focus~.form-bar:after, .form-material .form-inverse .form-control:focus~.form-bar:before { background: #37474f; } .form-material .form-inverse.form-static-label .float-label { color: #37474f; } .form-material .form-inverse.form-static-label .form-control { border-bottom-color: #37474f; } .form-material .material-group-inverse .material-addone i, .form-material .material-group-inverse .material-addone span { color: #37474f; } .form-material .form-info .form-control:focus~label { color: #00bcd4; } .form-material .form-info .form-control:focus~.form-bar:after, .form-material .form-info .form-control:focus~.form-bar:before { background: #00bcd4; } .form-material .form-info.form-static-label .float-label { color: #00bcd4; } .form-material .form-info.form-static-label .form-control { border-bottom-color: #00bcd4; } .form-material .material-group-info .material-addone i, .form-material .material-group-info .material-addone span { color: #00bcd4; } select.form-control, select.form-control:focus, select.form-control:hover { border-top: none; border-right: none; border-left: none; -webkit-box-shadow: none; box-shadow: none; } /* form controll end*/ .md-input-file input[type=file] { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .md-input-file { overflow: hidden; padding-left: 10px; } .md-add-on-file { float: left; height: 3rem; line-height: 3rem; } .md-add-on-file .btn { padding: 7px 20px; } .md-form-file~.md-form-control { opacity: 0; position: absolute; top: 0; } .md-input-wrapper .md-check { padding-left: 0; top: 0; } /** ===================== Label-Badges css start ========================== **/ .label { border-radius: 4px; font-size: 75%; padding: 4px 7px; margin-right: 5px; font-weight: 400; color: #fff !important; } .label-main { display: inline-block; vertical-align: middle; margin: 8px 5px; } .badge { border-radius: 10px; padding: 3px 7px; } .badge-top-left { margin-right: -10px; right: 100%; top: -3px; } .badge-top-right { margin-left: -10px; top: -3px; } .badge-bottom-left { margin-left: -33px; bottom: -12px; right: 97%; } .badge-bottom-right { margin-left: -10px; bottom: -12px; } .label.label-lg { padding: 8px 21px; } .label.label-md { padding: 6px 14px; } .badge-lg { padding: 5px 9px; font-size: 14px; } .badge-md { padding: 4px 8px; font-size: 14px; } span.badge { display: inline-block !important; } .label-default { background-color: #d6d6d6 !important; border-color: #d6d6d6; -webkit-box-shadow: none; box-shadow: none; color: #fff; } .label-inverse-default { border: 1px solid; border-color: #d6d6d6; color: #d6d6d6 !important; } .label-inverse-primary { border: 1px solid; border-color: #448aff; color: #448aff !important; } .label-inverse-success { border: 1px solid; border-color: #11c15b; color: #11c15b !important; } .label-inverse-warning { border: 1px solid; border-color: #ffe100; color: #ffe100 !important; } .label-inverse-danger { border: 1px solid; border-color: #ff5252; color: #ff5252 !important; } .label-inverse-info { border: 1px solid; border-color: #00bcd4; color: #00bcd4 !important; } .label-inverse-info-border { border: 1px solid; border-color: #37474f; color: #37474f !important; } .badge-inverse-default { border: 1px solid; border-color: #d6d6d6; color: #d6d6d6 !important; } .badge-inverse-primary { border: 1px solid; border-color: #448aff; color: #448aff !important; } .badge-inverse-success { border: 1px solid; border-color: #11c15b; color: #11c15b !important; } .badge-inverse-warning { border: 1px solid; border-color: #ffe100; color: #ffe100 !important; } .badge-inverse-danger { border: 1px solid; border-color: #ff5252; color: #ff5252 !important; } .badge-inverse-info { border: 1px solid; border-color: #37474f; color: #37474f !important; } .label-icon { position: relative; } .label-icon label { position: absolute; } .icofont.icofont-envelope { font-size: 20px; } /*===== Label and Badges css end =====*/ .card .table-card-header b { display: block; color: #448aff; margin-top: 15px; } .card .table-card-header span { color: #116aff; display: inline-block; margin-top: 0; } #checkbox-select tr td.select-checkbox, #checkbox-select tr th.select-checkbox { padding-left: 30px; } #checkbox-select tr td.select-checkbox:after, #checkbox-select tr td.select-checkbox:before, #checkbox-select tr th.select-checkbox:after, #checkbox-select tr th.select-checkbox:before { left: 15px; } .table td, .table th { padding: 1.25rem 0.75rem; } .table thead th { border-bottom: 1px solid #d6dde1; } th { font-weight: 500; } table.dataTable.display tbody tr.odd, table.dataTable.stripe tbody tr.odd { background-color: #ddeaff; } table.dataTable.display tbody tr.even>.sorting_1, table.dataTable.order-column.stripe tbody tr.even>.sorting_1 { background-color: #f7faff; } table.dataTable.display tbody tr.odd>.sorting_1, table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 { background-color: #c4daff; } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(68, 138, 255, 0.1); } .dataTables_filter .form-control { margin-top: 5px; margin-right: 5px; } .dataTable.table td, .dataTable.table th { padding: 0.75rem; } table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before { top: 14px; } .card-blue, .card-green, .card-purple, .card-red, .card-yellow { position: relative; overflow: hidden; } .card-blue:after, .card-green:after, .card-purple:after, .card-red:after, .card-yellow:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .card-blue .card-block, .card-blue .card-block-big, .card-blue .card-block-small, .card-blue .card-body, .card-blue .card-footer, .card-blue .card-header, .card-green .card-block, .card-green .card-block-big, .card-green .card-block-small, .card-green .card-body, .card-green .card-footer, .card-green .card-header, .card-purple .card-block, .card-purple .card-block-big, .card-purple .card-block-small, .card-purple .card-body, .card-purple .card-footer, .card-purple .card-header, .card-red .card-block, .card-red .card-block-big, .card-red .card-block-small, .card-red .card-body, .card-red .card-footer, .card-red .card-header, .card-yellow .card-block, .card-yellow .card-block-big, .card-yellow .card-block-small, .card-yellow .card-body, .card-yellow .card-footer, .card-yellow .card-header { position: relative; z-index: 5; } .card-purple { -webkit-box-shadow: 0 2px 20px 0 rgba(146, 97, 198, 0.15); box-shadow: 0 2px 20px 0 rgba(146, 97, 198, 0.15); } .card-purple::after { background: rgba(146, 97, 198, 0.07); } .card-red { -webkit-box-shadow: 0 2px 20px 0 rgba(255, 82, 82, 0.15); box-shadow: 0 2px 20px 0 rgba(255, 82, 82, 0.15); } .card-red::after { background: rgba(255, 82, 82, 0.07); } .card-blue { -webkit-box-shadow: 0 2px 20px 0 rgba(68, 138, 255, 0.15); box-shadow: 0 2px 20px 0 rgba(68, 138, 255, 0.15); } .card-blue::after { background: rgba(68, 138, 255, 0.07); } .card-green { -webkit-box-shadow: 0 2px 20px 0 rgba(17, 193, 91, 0.15); box-shadow: 0 2px 20px 0 rgba(17, 193, 91, 0.15); } .card-green::after { background: rgba(17, 193, 91, 0.07); } .card-yellow { -webkit-box-shadow: 0 2px 20px 0 rgba(255, 225, 0, 0.15); box-shadow: 0 2px 20px 0 rgba(255, 225, 0, 0.15); } .card-yellow::after { background: rgba(255, 225, 0, 0.07); } .mat-stat-card .card-block { padding: 0 15px; } @media only screen and (max-width: 575px) { .mat-stat-card .b-r-default { border-right: none; border-bottom: 1px solid #d6d6d6; } } .mat-clr-stat-card { overflow: hidden; } .mat-clr-stat-card .card-block { padding: 0 15px; } .mat-clr-stat-card .card-block .mat-icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .mat-clr-stat-card .card-block .cst-cont { padding-top: 13px; padding-bottom: 13px; } .mat-clr-stat-card.green { background-color: #32ed80; } .mat-clr-stat-card.blue { background-color: #91baff; } .mat-clr-stat-card.red { background-color: #ff9f9f; } .mat-clr-stat-card.purple { background-color: #9faefe; } .mat-clr-stat-card.yellow { background-color: #ffea4d; } .proj-progress-card .progress { height: 6px; overflow: visible; margin-bottom: 10px; } .proj-progress-card .progress .progress-bar { position: relative; } .proj-progress-card .progress .progress-bar:after { content: ""; background: #fff; position: absolute; right: -6px; top: -4px; border-radius: 50%; width: 15px; height: 15px; } .proj-progress-card .progress .progress-bar.bg-c-red:after { border: 3px solid #ff5252; -webkit-box-shadow: 0 0 0 5px rgba(255, 82, 82, 0.5), 0 10px 7px 0 rgba(62, 57, 107, 0.18); box-shadow: 0 0 0 5px rgba(255, 82, 82, 0.5), 0 10px 7px 0 rgba(62, 57, 107, 0.18); } .proj-progress-card .progress .progress-bar.bg-c-blue:after { border: 3px solid #448aff; -webkit-box-shadow: 0 0 0 5px rgba(68, 138, 255, 0.5), 0 10px 7px 0 rgba(62, 57, 107, 0.18); box-shadow: 0 0 0 5px rgba(68, 138, 255, 0.5), 0 10px 7px 0 rgba(62, 57, 107, 0.18); } .proj-progress-card .progress .progress-bar.bg-c-green:after { border: 3px solid #11c15b; -webkit-box-shadow: 0 0 0 5px rgba(17, 193, 91, 0.5), 0 10px 7px 0 rgba(62, 57, 107, 0.18); box-shadow: 0 0 0 5px rgba(17, 193, 91, 0.5), 0 10px 7px 0 rgba(62, 57, 107, 0.18); } .proj-progress-card .progress .progress-bar.bg-c-yellow:after { border: 3px solid #ffe100; -webkit-box-shadow: 0 0 0 5px rgba(255, 225, 0, 0.5), 0 10px 7px 0 rgba(62, 57, 107, 0.18); box-shadow: 0 0 0 5px rgba(255, 225, 0, 0.5), 0 10px 7px 0 rgba(62, 57, 107, 0.18); } @media only screen and (max-width: 992px) { .proj-progress-card h6 { margin-top: 15px; } .proj-progress-card .progress { margin-bottom: 30px; } } .prod-p-card i { color: #fff; width: 40px; height: 40px; border-radius: 50%; text-align: center; padding: 11px 0; font-size: 18px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .prod-p-card:hover i { -webkit-transform: scale(0.9) translatey(5px); transform: scale(0.9) translatey(5px); } .proj-t-card { position: relative; overflow: hidden; } .proj-t-card .pt-badge { color: #fff; margin-bottom: 0; display: inline-block; padding: 60px 50px 20px 20px; border-radius: 50%; position: absolute; top: -45px; right: -35px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .proj-t-card:hover .pt-badge { padding: 65px 55px 30px 30px; } .ticket-card .lbl-card { border-radius: 5px; padding: 5px 15px; color: #fff; display: inline-block; } .ticket-card h2 { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ticket-card:hover h2 { -webkit-transform: scale(1.2); transform: scale(1.2); } .total-card { overflow: hidden; } .total-card .text-left h4 { color: #fff; font-weight: 400; margin-bottom: 5px; } .total-card .text-left p { color: #fff; font-size: 15px; } .total-card .value-badges { position: absolute; top: 10px; right: 5px; } .client-map img { vertical-align: top; width: 90px; } .client-map .client-detail { margin-bottom: 20px; } .client-map .client-detail img { border-radius: 5px; } .client-map .client-profile { float: left; } .client-map .client-contain { display: inline-block; margin-left: 20px; } .client-map .client-contain h5 { display: block; text-transform: capitalize; font-weight: 600; font-size: 18px; padding-bottom: 10px; } .client-map .client-card-box { border: 1px solid #ccc; border-radius: 5px; } .client-map .client-card-box .client-border { border-right: 1px solid #ccc; } .client-map .client-card-box .client-border-card { border-top: 1px solid #ccc; } .per-task-card .card-block { padding: 0; } .per-task-card .per-task-block { margin-left: 0; margin-right: 0; } .per-task-card .per-task-block>div { padding-top: 20px; padding-bottom: 20px; } .per-task-card .per-task-block>div:nth-child(odd) { padding-left: 0; } .per-task-card .per-task-block>div:nth-child(even) { background-color: rgba(68, 138, 255, 0.1); padding-right: 0; } .social-card { color: #fff; overflow: hidden; } .social-card .social-icon { background-color: #fff; border-radius: 5px; width: 80px; height: 80px; text-align: center; padding: 25px 0; } .social-card .download-icon { color: #fff; background-color: rgba(255, 255, 255, 0.5); position: absolute; height: 125px; width: 125px; right: -125px; font-size: 35px; padding: 40px 22px; border-radius: 50%; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .social-card:hover .download-icon { right: -60px; } .social-user .card-block { position: relative; } .social-user .card-block .bg-icon { position: absolute; font-size: 95px; opacity: 0.1; top: 0; right: 0; height: 100%; width: calc(100% - 110px); text-align: center; padding: 10px 0; } .statustic-progress-card h6 { position: relative; } .statustic-progress-card h6:after { content: ""; background-color: #448aff; position: absolute; left: -20px; top: 0; width: 4px; height: 20px; } .statustic-progress-card .progress { height: 4px; } .order-visitor-card { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .order-visitor-card:hover { background-color: #448aff; color: #fff; } .user-card .usre-image { position: relative; display: inline-block; margin: 0 auto; } .user-card .usre-image img { width: 120px; height: 120px; border-radius: 50%; border: 1px solid #448aff; padding: 4px; } .user-card .usre-image:before { content: "\f00c"; font-family: 'FontAwesome'; position: absolute; bottom: 10px; right: 10px; color: #fff; background-color: #11c15b; border-radius: 50%; padding: 0 3px; } .user-card .usre-image:after { content: "Permenant"; position: absolute; bottom: -15px; left: calc(100% - 27px); color: #fff; background-color: #448aff; border-radius: 5px; padding: 0 3px; } .user-card .btn { margin: 10px auto 15px; } .user-card2 .risk-rate { display: inline-block; margin: 0 auto; } .user-card2 .risk-rate span { width: 130px; height: 130px; border-radius: 50%; border: 6px dashed #d6d6d6; border-top-color: #448aff; border-bottom-color: transparent; padding: 45px; display: block; position: relative; } .user-card2 .risk-rate span:after { content: ""; width: 90px; height: 90px; background-color: rgba(68, 138, 255, 0.5); border-radius: 50%; position: absolute; top: 15px; left: 15px; z-index: 1; } .user-card2 .risk-rate span b { font-size: 20px; color: #fff; z-index: 2; position: relative; } .user-card-full { overflow: hidden; } .user-card-full .user-profile { border-radius: 5px 0 0 5px; } .user-card-full .social-link { margin-bottom: 35px; } .user-card-full .social-link li { display: inline-block; } .user-card-full .social-link li a { font-size: 20px; margin: 0 10px 0 0; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .user-card-full .social-link li a i { color: #666; } .user-card-full .social-link li a i.facebook:hover { color: #3B5997; } .user-card-full .social-link li a i.twitter:hover { color: #42C0FB; } .user-card-full .social-link li a i.instagram:hover { color: #AA7C62; } .user-card-full .social-link li a i.youtube:hover { color: #E0291D; } .office-card .progress { height: 4px; } .trafic-card .progress { height: 7px; } .trafic-card .progress.blue { background-color: rgba(68, 138, 255, 0.5); } .trafic-card .progress.green { background-color: rgba(17, 193, 91, 0.5); } .trafic-card .progress.red { background-color: rgba(255, 82, 82, 0.5); } .trafic-card .progress.purple { background-color: rgba(83, 109, 254, 0.5); } .trafic-card .progress.yellow { background-color: rgba(255, 225, 0, 0.5); } .table-card .card-block { padding-left: 0; padding-right: 0; padding-top: 0; } .table-card .card-block .table>thead>tr>th { border-top: 0; } .table-card .card-block .table .chk-option { vertical-align: middle; width: 30px; display: inline-block; } .table-card .card-block .table .chk-option .checkbox-fade, .table-card .card-block .table .chk-option .checkbox-fade .cr, .table-card .card-block .table .chk-option .checkbox-zoom, .table-card .card-block .table .chk-option .checkbox-zoom .cr { margin-right: 0; } .table-card .card-block .table label { margin-bottom: 0; } .table-card .card-block .table tr td:first-child, .table-card .card-block .table tr th:first-child { padding-left: 20px; } .table-card .card-block .table tr td:last-child, .table-card .card-block .table tr th:last-child { padding-right: 20px; } .user-activity-card .u-img { position: relative; } .user-activity-card .u-img .cover-img { width: 40px; height: 40px; } .user-activity-card .u-img .profile-img { width: 20px; height: 20px; position: absolute; bottom: 0; right: -5px; } .user-Messages-card .u-img { position: relative; } .user-Messages-card .u-img .profile-img { width: 40px; height: 40px; } .user-Messages-card .u-img .tot-msg { width: 15px; height: 15px; position: absolute; bottom: 0; right: -5px; background-color: #ff5252; color: #fff; font-size: 10px; border-radius: 50%; text-align: center; } .chat-card .msg { margin-bottom: 5px; display: inline-block; padding: 10px; position: relative; } .chat-card .msg img { width: 60px; border-radius: 5px; margin-bottom: 5px; margin-top: 5px; margin-right: 10px; } .chat-card .received-chat .msg { background: rgba(68, 138, 255, 0.1); border-radius: 0 5px 5px 5px; } .chat-card .received-chat .msg:after { content: ""; position: absolute; left: -7px; top: -7px; -webkit-transform: rotate(45deg); transform: rotate(45deg); border: 7px solid transparent; border-bottom-color: rgba(68, 138, 255, 0.1); } .chat-card .send-chat { text-align: right; } .chat-card .send-chat .msg { background: rgba(17, 193, 91, 0.1); border-radius: 5px 0 5px 5px; } .chat-card .send-chat .msg:after { content: ""; position: absolute; right: -7px; top: -7px; -webkit-transform: rotate(45deg); transform: rotate(45deg); border: 7px solid transparent; border-right-color: rgba(17, 193, 91, 0.1); } .latest-update-card .card-block { padding-top: 0; } .latest-update-card .card-block .latest-update-box { position: relative; } .latest-update-card .card-block .latest-update-box:after { content: ""; position: absolute; background: #d6d6d6; height: 100%; width: 1px; top: 0; left: 110px; z-index: 1; } .latest-update-card .card-block .latest-update-box .update-meta { z-index: 2; min-width: 160px; } .latest-update-card .card-block .latest-update-box .update-meta .update-icon { width: 40px; height: 40px; border-radius: 50%; text-align: center; padding: 12px 0; font-size: 16px; color: #fff; margin-left: 10px; } @media only screen and (max-width: 575px) { .latest-update-card .card-block .latest-update-box:after { display: none; } .latest-update-card .card-block .latest-update-box .update-meta { z-index: 2; min-width: 100%; text-align: left !important; margin-bottom: 15px; border-top: 1px solid #f1f1f1; padding-top: 15px; } } .latest-posts-card .latest-posts-img { width: 90px; height: 80px; } .task-card .task-list { position: relative; } .task-card .task-list:after { content: ""; position: absolute; background: #d6d6d6; height: 100%; width: 2px; top: 0; left: 10px; z-index: 1; } .task-card .task-list:before { content: ""; position: absolute; background: #d6d6d6; height: 15px; width: 15px; bottom: -14px; left: 3px; z-index: 2; border-radius: 50%; } .task-card .task-list li { margin-bottom: 30px; padding-left: 30px; position: relative; } .task-card .task-list li .task-icon { position: absolute; left: 3px; top: 1px; border-radius: 50%; padding: 2px; color: #fff; min-width: 15px; min-height: 15px; z-index: 2; } /** ===================== Alert css start ========================== **/ .alert { font-size: 15px; margin-bottom: 2rem; } .alert.icons-alert { border-left-width: 48px; } .alert.icons-alert .alert-icon { left: 15px; position: relative; text-align: center; top: 0; z-index: 3; } .alert.icons-alert p { line-height: 21px; margin-bottom: 0; } .close { font-size: 16px; margin-top: 5px; } /*===== Primary alert ===== */ .alert-default { background-color: #fff; border-color: #d6d6d6; color: #d6d6d6; } .alert-primary { background-color: #fff; border-color: #448aff; color: #448aff; } .alert-success { background-color: #fff; border-color: #11c15b; color: #11c15b; } .alert-info { background-color: #fff; border-color: #00bcd4; color: #00bcd4; } .alert-warning { background-color: #fff; border-color: #ffe100; color: #ffe100; } .alert-danger { background-color: #fff; border-color: #ff5252; color: #ff5252; } /*===== Border alert ===== */ .border-default { border-color: transparent; border-left: 3px solid #d6d6d6; border-radius: 0; -webkit-box-shadow: 0 0 1px #999; box-shadow: 0 0 1px #999; color: #d6d6d6; } .border-primary { border-color: transparent; border-left: 3px solid #448aff; border-radius: 0; -webkit-box-shadow: 0 0 1px #999; box-shadow: 0 0 1px #999; color: #448aff; } .border-success { border-color: transparent; border-left: 3px solid #11c15b; border-radius: 0; -webkit-box-shadow: 0 0 1px #999; box-shadow: 0 0 1px #999; color: #11c15b; } .border-info { border-color: transparent; border-left: 3px solid #00bcd4; border-radius: 0; -webkit-box-shadow: 0 0 1px #999; box-shadow: 0 0 1px #999; color: #00bcd4; } .border-warning { border-color: transparent; border-left: 3px solid #ffe100; border-radius: 0; -webkit-box-shadow: 0 0 1px #999; box-shadow: 0 0 1px #999; color: #ffe100; } .border-danger { border-color: transparent; border-left: 3px solid #ff5252; border-radius: 0; -webkit-box-shadow: 0 0 1px #999; box-shadow: 0 0 1px #999; color: #ff5252; } /*===== Solid-background alert ===== */ .background-default { background-color: #d6d6d6; color: #fff; } .background-primary { background-color: #448aff; color: #fff; } .background-success { background-color: #11c15b; color: #fff; } .background-info { background-color: #00bcd4; color: #fff; } .background-warning { background-color: #ffe100; color: #fff; } .background-danger { background-color: #ff5252; color: #fff; } .icons-alert { position: relative; } .icons-alert:before { color: #fff; content: '\f027'; font-family: 'IcoFont' !important; font-size: 16px; left: -30px; position: absolute; top: 20px; } [class*="alert-"] code { margin-left: 10px; } /*======= Alert css ends ===========*/ /* ======================================= Authentication-page css start ========================================= */ .login-block { margin: 30px auto; } .login-block .auth-box { margin: 20px auto 0 auto; max-width: 450px; } .login-block .auth-box .confirm h3 { color: #448aff; font-size: 34px; } .login-block .auth-box i.icofont-check-circled { font-size: 42px; } .login-block.offline-404 .auth-box { max-width: 650px; } .login-block.offline-404 .auth-box h1 { color: #2c3e50; font-size: 160px; font-weight: 500; letter-spacing: 5px; text-shadow: 3px -2px 4px rgba(128, 128, 128, 0.57); } @media only screen and (max-width: 992px) { .login-block.offline-404 .auth-box { margin-top: 45px; } } @media only screen and (max-width: 575px) { .login-block.offline-404 .auth-box h1 { font-size: 60px; } .login-block.offline-404 .auth-box h2 { font-size: 0.8rem; } } .footer { background-color: #37474f; color: #fff; padding: 15px 0; position: fixed; bottom: 0; width: 100%; } /** ===================== Breadcrumb css start ========================== **/ .caption-breadcrumb .breadcrumb-header, .primary-breadcrumb .breadcrumb-header, .inverse-breadcrumb .breadcrumb-header, .danger-breadcrumb .breadcrumb-header, .info-breadcrumb .breadcrumb-header, .warning-breadcrumb .breadcrumb-header, .success-breadcrumb .breadcrumb-header { display: inline-block; } .caption-breadcrumb .breadcrumb-header span, .primary-breadcrumb .breadcrumb-header span, .inverse-breadcrumb .breadcrumb-header span, .danger-breadcrumb .breadcrumb-header span, .info-breadcrumb .breadcrumb-header span, .warning-breadcrumb .breadcrumb-header span, .success-breadcrumb .breadcrumb-header span { display: block; font-size: 13px; margin-top: 5px; } .front-icon-breadcrumb .breadcrumb-header { display: inline-block; } .front-icon-breadcrumb .big-icon { display: inline-block; } .front-icon-breadcrumb .big-icon i { font-size: 50px; margin-right: 10px; color: #448aff; } .front-icon-breadcrumb .d-inline-block span { display: block; font-size: 13px; margin-top: 5px; } .breadcrumb { background-color: transparent; margin-bottom: 0; } .primary-breadcrumb, .inverse-breadcrumb, .danger-breadcrumb, .info-breadcrumb, .warning-breadcrumb, .success-breadcrumb { background-color: #448aff; color: #fff; } .primary-breadcrumb h5, .inverse-breadcrumb h5, .danger-breadcrumb h5, .info-breadcrumb h5, .warning-breadcrumb h5, .success-breadcrumb h5, .primary-breadcrumb a, .inverse-breadcrumb a, .danger-breadcrumb a, .info-breadcrumb a, .warning-breadcrumb a, .success-breadcrumb a, .primary-breadcrumb .breadcrumb li:last-child a, .inverse-breadcrumb .breadcrumb li:last-child a, .danger-breadcrumb .breadcrumb li:last-child a, .info-breadcrumb .breadcrumb li:last-child a, .warning-breadcrumb .breadcrumb li:last-child a, .success-breadcrumb .breadcrumb li:last-child a, .primary-breadcrumb .breadcrumb-item+.breadcrumb-item::before, .inverse-breadcrumb .breadcrumb-item+.breadcrumb-item::before, .danger-breadcrumb .breadcrumb-item+.breadcrumb-item::before, .info-breadcrumb .breadcrumb-item+.breadcrumb-item::before, .warning-breadcrumb .breadcrumb-item+.breadcrumb-item::before, .success-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color: #fff; } .inverse-breadcrumb { background-color: #37474f; } .danger-breadcrumb { background-color: #ff5252; } .info-breadcrumb { background-color: #00bcd4; } .warning-breadcrumb { background-color: #ffe100; } .success-breadcrumb { background-color: #11c15b; } /**====== Breadcrumb css end ======**/ /** ===================== Chart css start ========================== **/ @-webkit-keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } .morris-hover { position: absolute; min-width: 100px; width: 100px; right: 0; background: #fff; padding: 20px; border: 1px solid #ccc; } /**====== Chart css end ======**/ /* ======================= Start Color-page Css =========================== */ .amber-colors ul li p, .bg-danger li p, .bg-default li p, .bg-info li p, .bg-primary li p, .bg-success li p, .bg-warning li p, .blue-colors ul li p, .blue-grey-colors ul li p, .brown-colors ul li p, .cyan-colors ul li p, .deep-orange-colors ul li p, .deep-purple-colors ul li p, .green-colors ul li p, .grey-colors ul li p, .indigo-colors ul li p, .light-blue-colors ul li p, .light-green-colors ul li p, .lime-colors ul li p, .orange-colors ul li p, .pink-colors ul li p, .purple-colors ul li p, .red-colors ul li p, .teal-colors ul li p, .yellow-colors ul li p, .primary-colorr ul li p, .success-colorr ul li p, .info-colorr ul li p, .warning-colorr ul li p, .danger-colorr ul li p { font-size: 18px; padding: 10px 0; text-align: center; text-transform: uppercase; color: #fff; margin-bottom: 0; } /**====== Accent-red-color css start ======**/ .red-colors ul li:nth-child(14) { background-color: #e40505; } .red-colors ul li:nth-child(14) p:before { content: "#e40505"; } .red-colors ul li:nth-child(13) { background-color: #f30606; } .red-colors ul li:nth-child(13) p:before { content: "#f30606"; } .red-colors ul li:nth-child(12) { background-color: #f90f0f; } .red-colors ul li:nth-child(12) p:before { content: "#f90f0f"; } .red-colors ul li:nth-child(11) { background-color: #fa1d1d; } .red-colors ul li:nth-child(11) p:before { content: "#fa1d1d"; } .red-colors ul li:nth-child(10) { background-color: #fa2c2c; } .red-colors ul li:nth-child(10) p:before { content: "#fa2c2c"; } .red-colors ul li:nth-child(9) { background-color: #fa3b3b; } .red-colors ul li:nth-child(9) p:before { content: "#fa3b3b"; } .red-colors ul li:nth-child(8) { background-color: #fb4a4a; } .red-colors ul li:nth-child(8) p:before { content: "#fb4a4a"; } .red-colors ul li:nth-child(7) { background-color: #fb5959; } .red-colors ul li:nth-child(7) p:before { content: "#fb5959"; } .red-colors ul li:nth-child(6) { background-color: #fb6868; } .red-colors ul li:nth-child(6) p:before { content: "#fb6868"; } .red-colors ul li:nth-child(5) { background-color: #fc7777; } .red-colors ul li:nth-child(5) p:before { content: "#fc7777"; } .red-colors ul li:nth-child(4) { background-color: #fc8686; } .red-colors ul li:nth-child(4) p:before { content: "#fc8686"; } .red-colors ul li:nth-child(3) { background-color: #fd9595; } .red-colors ul li:nth-child(3) p:before { content: "#fd9595"; } .red-colors ul li:nth-child(2) { background-color: #fda4a4; } .red-colors ul li:nth-child(2) p:before { content: "#fda4a4"; } .red-colors ul li:nth-child(1) { background-color: #fdb3b3; } .red-colors ul li:nth-child(1) p:before { content: "#fdb3b3"; } /**====== Accent-red-color css end ======**/ /**====== Accent-pink-color css start ======**/ .pink-colors ul li:nth-child(14) { background-color: #d4166c; } .pink-colors ul li:nth-child(14) p:before { content: "#d4166c"; } .pink-colors ul li:nth-child(13) { background-color: #e21873; } .pink-colors ul li:nth-child(13) p:before { content: "#e21873"; } .pink-colors ul li:nth-child(12) { background-color: #e7217b; } .pink-colors ul li:nth-child(12) p:before { content: "#e7217b"; } .pink-colors ul li:nth-child(11) { background-color: #e92f83; } .pink-colors ul li:nth-child(11) p:before { content: "#e92f83"; } .pink-colors ul li:nth-child(10) { background-color: #ea3d8b; } .pink-colors ul li:nth-child(10) p:before { content: "#ea3d8b"; } .pink-colors ul li:nth-child(9) { background-color: #ec4b94; } .pink-colors ul li:nth-child(9) p:before { content: "#ec4b94"; } .pink-colors ul li:nth-child(8) { background-color: #ed599c; } .pink-colors ul li:nth-child(8) p:before { content: "#ed599c"; } .pink-colors ul li:nth-child(7) { background-color: #ef67a4; } .pink-colors ul li:nth-child(7) p:before { content: "#ef67a4"; } .pink-colors ul li:nth-child(6) { background-color: #f074ac; } .pink-colors ul li:nth-child(6) p:before { content: "#f074ac"; } .pink-colors ul li:nth-child(5) { background-color: #f282b5; } .pink-colors ul li:nth-child(5) p:before { content: "#f282b5"; } .pink-colors ul li:nth-child(4) { background-color: #f390bd; } .pink-colors ul li:nth-child(4) p:before { content: "#f390bd"; } .pink-colors ul li:nth-child(3) { background-color: #f59ec5; } .pink-colors ul li:nth-child(3) p:before { content: "#f59ec5"; } .pink-colors ul li:nth-child(2) { background-color: #f6accd; } .pink-colors ul li:nth-child(2) p:before { content: "#f6accd"; } .pink-colors ul li:nth-child(1) { background-color: #f8bad6; } .pink-colors ul li:nth-child(1) p:before { content: "#f8bad6"; } /**====== Accent-pink-color css end ======**/ /**====== Accent-purple-color css start ======**/ .purple-colors ul li:nth-child(14) { background-color: #b014ff; } .purple-colors ul li:nth-child(14) p:before { content: "#b014ff"; } .purple-colors ul li:nth-child(13) { background-color: #b524ff; } .purple-colors ul li:nth-child(13) p:before { content: "#b524ff"; } .purple-colors ul li:nth-child(12) { background-color: #ba33ff; } .purple-colors ul li:nth-child(12) p:before { content: "#ba33ff"; } .purple-colors ul li:nth-child(11) { background-color: #c042ff; } .purple-colors ul li:nth-child(11) p:before { content: "#c042ff"; } .purple-colors ul li:nth-child(10) { background-color: #c552ff; } .purple-colors ul li:nth-child(10) p:before { content: "#c552ff"; } .purple-colors ul li:nth-child(9) { background-color: #ca61ff; } .purple-colors ul li:nth-child(9) p:before { content: "#ca61ff"; } .purple-colors ul li:nth-child(8) { background-color: #cf70ff; } .purple-colors ul li:nth-child(8) p:before { content: "#cf70ff"; } .purple-colors ul li:nth-child(7) { background-color: #d47fff; } .purple-colors ul li:nth-child(7) p:before { content: "#d47fff"; } .purple-colors ul li:nth-child(6) { background-color: #d98fff; } .purple-colors ul li:nth-child(6) p:before { content: "#d98fff"; } .purple-colors ul li:nth-child(5) { background-color: #de9eff; } .purple-colors ul li:nth-child(5) p:before { content: "#de9eff"; } .purple-colors ul li:nth-child(4) { background-color: #e4adff; } .purple-colors ul li:nth-child(4) p:before { content: "#e4adff"; } .purple-colors ul li:nth-child(3) { background-color: #e9bdff; } .purple-colors ul li:nth-child(3) p:before { content: "#e9bdff"; } .purple-colors ul li:nth-child(2) { background-color: #eeccff; } .purple-colors ul li:nth-child(2) p:before { content: "#eeccff"; } .purple-colors ul li:nth-child(1) { background-color: #f3dbff; } .purple-colors ul li:nth-child(1) p:before { content: "#f3dbff"; } /**====== Accent-purple-color css end ======**/ /**====== Deep-purple-color css start ======**/ .deep-purple-colors ul li:nth-child(14) { background-color: #6b05f9; } .deep-purple-colors ul li:nth-child(14) p:before { content: "#6b05f9"; } .deep-purple-colors ul li:nth-child(13) { background-color: #7414fa; } .deep-purple-colors ul li:nth-child(13) p:before { content: "#7414fa"; } .deep-purple-colors ul li:nth-child(12) { background-color: #7d23fa; } .deep-purple-colors ul li:nth-child(12) p:before { content: "#7d23fa"; } .deep-purple-colors ul li:nth-child(11) { background-color: #8632fb; } .deep-purple-colors ul li:nth-child(11) p:before { content: "#8632fb"; } .deep-purple-colors ul li:nth-child(10) { background-color: #8f41fb; } .deep-purple-colors ul li:nth-child(10) p:before { content: "#8f41fb"; } .deep-purple-colors ul li:nth-child(9) { background-color: #9850fb; } .deep-purple-colors ul li:nth-child(9) p:before { content: "#9850fb"; } .deep-purple-colors ul li:nth-child(8) { background-color: #a05ffc; } .deep-purple-colors ul li:nth-child(8) p:before { content: "#a05ffc"; } .deep-purple-colors ul li:nth-child(7) { background-color: #a96efc; } .deep-purple-colors ul li:nth-child(7) p:before { content: "#a96efc"; } .deep-purple-colors ul li:nth-child(6) { background-color: #b27cfc; } .deep-purple-colors ul li:nth-child(6) p:before { content: "#b27cfc"; } .deep-purple-colors ul li:nth-child(5) { background-color: #bb8bfd; } .deep-purple-colors ul li:nth-child(5) p:before { content: "#bb8bfd"; } .deep-purple-colors ul li:nth-child(4) { background-color: #c49afd; } .deep-purple-colors ul li:nth-child(4) p:before { content: "#c49afd"; } .deep-purple-colors ul li:nth-child(3) { background-color: #cda9fd; } .deep-purple-colors ul li:nth-child(3) p:before { content: "#cda9fd"; } .deep-purple-colors ul li:nth-child(2) { background-color: #d5b8fd; } .deep-purple-colors ul li:nth-child(2) p:before { content: "#d5b8fd"; } .deep-purple-colors ul li:nth-child(1) { background-color: #dec7fe; } .deep-purple-colors ul li:nth-child(1) p:before { content: "#dec7fe"; } /**====== Deep-purple-color css end ======**/ /**====== Indigo-color css start ======**/ .indigo-colors ul li:nth-child(14) { background-color: #415dfe; } .indigo-colors ul li:nth-child(14) p:before { content: "#415dfe"; } .indigo-colors ul li:nth-child(13) { background-color: #4d68fe; } .indigo-colors ul li:nth-child(13) p:before { content: "#4d68fe"; } .indigo-colors ul li:nth-child(12) { background-color: #5a72fe; } .indigo-colors ul li:nth-child(12) p:before { content: "#5a72fe"; } .indigo-colors ul li:nth-child(11) { background-color: #677dfe; } .indigo-colors ul li:nth-child(11) p:before { content: "#677dfe"; } .indigo-colors ul li:nth-child(10) { background-color: #7388fe; } .indigo-colors ul li:nth-child(10) p:before { content: "#7388fe"; } .indigo-colors ul li:nth-child(9) { background-color: #8093fe; } .indigo-colors ul li:nth-child(9) p:before { content: "#8093fe"; } .indigo-colors ul li:nth-child(8) { background-color: #8d9efe; } .indigo-colors ul li:nth-child(8) p:before { content: "#8d9efe"; } .indigo-colors ul li:nth-child(7) { background-color: #9aa9ff; } .indigo-colors ul li:nth-child(7) p:before { content: "#9aa9ff"; } .indigo-colors ul li:nth-child(6) { background-color: #a6b3ff; } .indigo-colors ul li:nth-child(6) p:before { content: "#a6b3ff"; } .indigo-colors ul li:nth-child(5) { background-color: #b3beff; } .indigo-colors ul li:nth-child(5) p:before { content: "#b3beff"; } .indigo-colors ul li:nth-child(4) { background-color: #c0c9ff; } .indigo-colors ul li:nth-child(4) p:before { content: "#c0c9ff"; } .indigo-colors ul li:nth-child(3) { background-color: #ccd4ff; } .indigo-colors ul li:nth-child(3) p:before { content: "#ccd4ff"; } .indigo-colors ul li:nth-child(2) { background-color: #d9dfff; } .indigo-colors ul li:nth-child(2) p:before { content: "#d9dfff"; } .indigo-colors ul li:nth-child(1) { background-color: #e6e9ff; } .indigo-colors ul li:nth-child(1) p:before { content: "#e6e9ff"; } /**====== Indigo-color css end ======**/ /**====== Blue-accent-color css start ======**/ .blue-colors ul li:nth-child(14) { background-color: #3a6eff; } .blue-colors ul li:nth-child(14) p:before { content: "#3a6eff"; } .blue-colors ul li:nth-child(13) { background-color: #4778ff; } .blue-colors ul li:nth-child(13) p:before { content: "#4778ff"; } .blue-colors ul li:nth-child(12) { background-color: #5381ff; } .blue-colors ul li:nth-child(12) p:before { content: "#5381ff"; } .blue-colors ul li:nth-child(11) { background-color: #608aff; } .blue-colors ul li:nth-child(11) p:before { content: "#608aff"; } .blue-colors ul li:nth-child(10) { background-color: #6d94ff; } .blue-colors ul li:nth-child(10) p:before { content: "#6d94ff"; } .blue-colors ul li:nth-child(9) { background-color: #7a9dff; } .blue-colors ul li:nth-child(9) p:before { content: "#7a9dff"; } .blue-colors ul li:nth-child(8) { background-color: #86a6ff; } .blue-colors ul li:nth-child(8) p:before { content: "#86a6ff"; } .blue-colors ul li:nth-child(7) { background-color: #93b0ff; } .blue-colors ul li:nth-child(7) p:before { content: "#93b0ff"; } .blue-colors ul li:nth-child(6) { background-color: #a0b9ff; } .blue-colors ul li:nth-child(6) p:before { content: "#a0b9ff"; } .blue-colors ul li:nth-child(5) { background-color: #adc3ff; } .blue-colors ul li:nth-child(5) p:before { content: "#adc3ff"; } .blue-colors ul li:nth-child(4) { background-color: #b9ccff; } .blue-colors ul li:nth-child(4) p:before { content: "#b9ccff"; } .blue-colors ul li:nth-child(3) { background-color: #c6d5ff; } .blue-colors ul li:nth-child(3) p:before { content: "#c6d5ff"; } .blue-colors ul li:nth-child(2) { background-color: #d3dfff; } .blue-colors ul li:nth-child(2) p:before { content: "#d3dfff"; } .blue-colors ul li:nth-child(1) { background-color: #e0e8ff; } .blue-colors ul li:nth-child(1) p:before { content: "#e0e8ff"; } /**====== Blue-accent-color css end ======**/ /**====== Light-blue-color css start ======**/ .light-blue-colors ul li:nth-child(14) { background-color: #059cf9; } .light-blue-colors ul li:nth-child(14) p:before { content: "#059cf9"; } .light-blue-colors ul li:nth-child(13) { background-color: #14a2fa; } .light-blue-colors ul li:nth-child(13) p:before { content: "#14a2fa"; } .light-blue-colors ul li:nth-child(12) { background-color: #23a8fa; } .light-blue-colors ul li:nth-child(12) p:before { content: "#23a8fa"; } .light-blue-colors ul li:nth-child(11) { background-color: #32aefb; } .light-blue-colors ul li:nth-child(11) p:before { content: "#32aefb"; } .light-blue-colors ul li:nth-child(10) { background-color: #41b4fb; } .light-blue-colors ul li:nth-child(10) p:before { content: "#41b4fb"; } .light-blue-colors ul li:nth-child(9) { background-color: #50bafb; } .light-blue-colors ul li:nth-child(9) p:before { content: "#50bafb"; } .light-blue-colors ul li:nth-child(8) { background-color: #5fc0fc; } .light-blue-colors ul li:nth-child(8) p:before { content: "#5fc0fc"; } .light-blue-colors ul li:nth-child(7) { background-color: #6ec6fc; } .light-blue-colors ul li:nth-child(7) p:before { content: "#6ec6fc"; } .light-blue-colors ul li:nth-child(6) { background-color: #7cccfc; } .light-blue-colors ul li:nth-child(6) p:before { content: "#7cccfc"; } .light-blue-colors ul li:nth-child(5) { background-color: #8bd2fd; } .light-blue-colors ul li:nth-child(5) p:before { content: "#8bd2fd"; } .light-blue-colors ul li:nth-child(4) { background-color: #9ad7fd; } .light-blue-colors ul li:nth-child(4) p:before { content: "#9ad7fd"; } .light-blue-colors ul li:nth-child(3) { background-color: #a9ddfd; } .light-blue-colors ul li:nth-child(3) p:before { content: "#a9ddfd"; } .light-blue-colors ul li:nth-child(2) { background-color: #b8e3fd; } .light-blue-colors ul li:nth-child(2) p:before { content: "#b8e3fd"; } .light-blue-colors ul li:nth-child(1) { background-color: #c7e9fe; } .light-blue-colors ul li:nth-child(1) p:before { content: "#c7e9fe"; } /**====== Light-blue-color css end ======**/ /**====== Cyan-color css start ======**/ .cyan-colors ul li:nth-child(14) { background-color: #05c6e3; } .cyan-colors ul li:nth-child(14) p:before { content: "#05c6e3"; } .cyan-colors ul li:nth-child(13) { background-color: #06d3f2; } .cyan-colors ul li:nth-child(13) p:before { content: "#06d3f2"; } .cyan-colors ul li:nth-child(12) { background-color: #0edbf9; } .cyan-colors ul li:nth-child(12) p:before { content: "#0edbf9"; } .cyan-colors ul li:nth-child(11) { background-color: #1dddfa; } .cyan-colors ul li:nth-child(11) p:before { content: "#1dddfa"; } .cyan-colors ul li:nth-child(10) { background-color: #2bdffa; } .cyan-colors ul li:nth-child(10) p:before { content: "#2bdffa"; } .cyan-colors ul li:nth-child(9) { background-color: #3ae1fa; } .cyan-colors ul li:nth-child(9) p:before { content: "#3ae1fa"; } .cyan-colors ul li:nth-child(8) { background-color: #49e4fb; } .cyan-colors ul li:nth-child(8) p:before { content: "#49e4fb"; } .cyan-colors ul li:nth-child(7) { background-color: #58e6fb; } .cyan-colors ul li:nth-child(7) p:before { content: "#58e6fb"; } .cyan-colors ul li:nth-child(6) { background-color: #67e8fb; } .cyan-colors ul li:nth-child(6) p:before { content: "#67e8fb"; } .cyan-colors ul li:nth-child(5) { background-color: #76eafc; } .cyan-colors ul li:nth-child(5) p:before { content: "#76eafc"; } .cyan-colors ul li:nth-child(4) { background-color: #85edfc; } .cyan-colors ul li:nth-child(4) p:before { content: "#85edfc"; } .cyan-colors ul li:nth-child(3) { background-color: #94effc; } .cyan-colors ul li:nth-child(3) p:before { content: "#94effc"; } .cyan-colors ul li:nth-child(2) { background-color: #a3f1fd; } .cyan-colors ul li:nth-child(2) p:before { content: "#a3f1fd"; } .cyan-colors ul li:nth-child(1) { background-color: #b2f3fd; } .cyan-colors ul li:nth-child(1) p:before { content: "#b2f3fd"; } /**====== Cyan-color css start ======**/ /**====== Teal-color css start ======**/ .teal-colors ul li:nth-child(14) { background-color: #05cfb3; } .teal-colors ul li:nth-child(14) p:before { content: "#05cfb3"; } .teal-colors ul li:nth-child(13) { background-color: #06dec0; } .teal-colors ul li:nth-child(13) p:before { content: "#06dec0"; } .teal-colors ul li:nth-child(12) { background-color: #06edcd; } .teal-colors ul li:nth-child(12) p:before { content: "#06edcd"; } .teal-colors ul li:nth-child(11) { background-color: #0af9d7; } .teal-colors ul li:nth-child(11) p:before { content: "#0af9d7"; } .teal-colors ul li:nth-child(10) { background-color: #19f9da; } .teal-colors ul li:nth-child(10) p:before { content: "#19f9da"; } .teal-colors ul li:nth-child(9) { background-color: #27f9dc; } .teal-colors ul li:nth-child(9) p:before { content: "#27f9dc"; } .teal-colors ul li:nth-child(8) { background-color: #36fadf; } .teal-colors ul li:nth-child(8) p:before { content: "#36fadf"; } .teal-colors ul li:nth-child(7) { background-color: #45fae1; } .teal-colors ul li:nth-child(7) p:before { content: "#45fae1"; } .teal-colors ul li:nth-child(6) { background-color: #54fbe3; } .teal-colors ul li:nth-child(6) p:before { content: "#54fbe3"; } .teal-colors ul li:nth-child(5) { background-color: #63fbe6; } .teal-colors ul li:nth-child(5) p:before { content: "#63fbe6"; } .teal-colors ul li:nth-child(4) { background-color: #72fbe8; } .teal-colors ul li:nth-child(4) p:before { content: "#72fbe8"; } .teal-colors ul li:nth-child(3) { background-color: #81fceb; } .teal-colors ul li:nth-child(3) p:before { content: "#81fceb"; } .teal-colors ul li:nth-child(2) { background-color: #90fced; } .teal-colors ul li:nth-child(2) p:before { content: "#90fced"; } .teal-colors ul li:nth-child(1) { background-color: #9ffcef; } .teal-colors ul li:nth-child(1) p:before { content: "#9ffcef"; } /**====== Teal-color css end ======**/ /**====== Green-color css start ======**/ .green-colors ul li:nth-child(14) { background-color: #05d85c; } .green-colors ul li:nth-child(14) p:before { content: "#05d85c"; } .green-colors ul li:nth-child(13) { background-color: #06e763; } .green-colors ul li:nth-child(13) p:before { content: "#06e763"; } .green-colors ul li:nth-child(12) { background-color: #06f669; } .green-colors ul li:nth-child(12) p:before { content: "#06f669"; } .green-colors ul li:nth-child(11) { background-color: #12f972; } .green-colors ul li:nth-child(11) p:before { content: "#12f972"; } .green-colors ul li:nth-child(10) { background-color: #21f97a; } .green-colors ul li:nth-child(10) p:before { content: "#21f97a"; } .green-colors ul li:nth-child(9) { background-color: #30fa83; } .green-colors ul li:nth-child(9) p:before { content: "#30fa83"; } .green-colors ul li:nth-child(8) { background-color: #3ffa8c; } .green-colors ul li:nth-child(8) p:before { content: "#3ffa8c"; } .green-colors ul li:nth-child(7) { background-color: #4efb95; } .green-colors ul li:nth-child(7) p:before { content: "#4efb95"; } .green-colors ul li:nth-child(6) { background-color: #5dfb9e; } .green-colors ul li:nth-child(6) p:before { content: "#5dfb9e"; } .green-colors ul li:nth-child(5) { background-color: #6cfba7; } .green-colors ul li:nth-child(5) p:before { content: "#6cfba7"; } .green-colors ul li:nth-child(4) { background-color: #7bfcb0; } .green-colors ul li:nth-child(4) p:before { content: "#7bfcb0"; } .green-colors ul li:nth-child(3) { background-color: #8afcb9; } .green-colors ul li:nth-child(3) p:before { content: "#8afcb9"; } .green-colors ul li:nth-child(2) { background-color: #98fcc2; } .green-colors ul li:nth-child(2) p:before { content: "#98fcc2"; } .green-colors ul li:nth-child(1) { background-color: #a7fdcb; } .green-colors ul li:nth-child(1) p:before { content: "#a7fdcb"; } /**====== Green-color css end ======**/ /**====== Light-Green-color css start ======**/ .light-green-colors ul li:nth-child(14) { background-color: #6fe423; } .light-green-colors ul li:nth-child(14) p:before { content: "#6fe423"; } .light-green-colors ul li:nth-child(13) { background-color: #78e631; } .light-green-colors ul li:nth-child(13) p:before { content: "#78e631"; } .light-green-colors ul li:nth-child(12) { background-color: #81e73e; } .light-green-colors ul li:nth-child(12) p:before { content: "#81e73e"; } .light-green-colors ul li:nth-child(11) { background-color: #8ae94c; } .light-green-colors ul li:nth-child(11) p:before { content: "#8ae94c"; } .light-green-colors ul li:nth-child(10) { background-color: #93eb5a; } .light-green-colors ul li:nth-child(10) p:before { content: "#93eb5a"; } .light-green-colors ul li:nth-child(9) { background-color: #9bec67; } .light-green-colors ul li:nth-child(9) p:before { content: "#9bec67"; } .light-green-colors ul li:nth-child(8) { background-color: #a4ee75; } .light-green-colors ul li:nth-child(8) p:before { content: "#a4ee75"; } .light-green-colors ul li:nth-child(7) { background-color: #adf083; } .light-green-colors ul li:nth-child(7) p:before { content: "#adf083"; } .light-green-colors ul li:nth-child(6) { background-color: #b6f190; } .light-green-colors ul li:nth-child(6) p:before { content: "#b6f190"; } .light-green-colors ul li:nth-child(5) { background-color: #bff39e; } .light-green-colors ul li:nth-child(5) p:before { content: "#bff39e"; } .light-green-colors ul li:nth-child(4) { background-color: #c8f5ac; } .light-green-colors ul li:nth-child(4) p:before { content: "#c8f5ac"; } .light-green-colors ul li:nth-child(3) { background-color: #d1f6b9; } .light-green-colors ul li:nth-child(3) p:before { content: "#d1f6b9"; } .light-green-colors ul li:nth-child(2) { background-color: #daf8c7; } .light-green-colors ul li:nth-child(2) p:before { content: "#daf8c7"; } .light-green-colors ul li:nth-child(1) { background-color: #e3fad4; } .light-green-colors ul li:nth-child(1) p:before { content: "#e3fad4"; } /**====== Light-Green-color css end ======**/ /**====== Lime-color css start ======**/ .lime-colors ul li:nth-child(14) { background-color: #baf905; } .lime-colors ul li:nth-child(14) p:before { content: "#baf905"; } .lime-colors ul li:nth-child(13) { background-color: #bffa14; } .lime-colors ul li:nth-child(13) p:before { content: "#bffa14"; } .lime-colors ul li:nth-child(12) { background-color: #c3fa23; } .lime-colors ul li:nth-child(12) p:before { content: "#c3fa23"; } .lime-colors ul li:nth-child(11) { background-color: #c7fb32; } .lime-colors ul li:nth-child(11) p:before { content: "#c7fb32"; } .lime-colors ul li:nth-child(10) { background-color: #cbfb41; } .lime-colors ul li:nth-child(10) p:before { content: "#cbfb41"; } .lime-colors ul li:nth-child(9) { background-color: #cffb50; } .lime-colors ul li:nth-child(9) p:before { content: "#cffb50"; } .lime-colors ul li:nth-child(8) { background-color: #d3fc5f; } .lime-colors ul li:nth-child(8) p:before { content: "#d3fc5f"; } .lime-colors ul li:nth-child(7) { background-color: #d7fc6e; } .lime-colors ul li:nth-child(7) p:before { content: "#d7fc6e"; } .lime-colors ul li:nth-child(6) { background-color: #dbfc7c; } .lime-colors ul li:nth-child(6) p:before { content: "#dbfc7c"; } .lime-colors ul li:nth-child(5) { background-color: #dffd8b; } .lime-colors ul li:nth-child(5) p:before { content: "#dffd8b"; } .lime-colors ul li:nth-child(4) { background-color: #e3fd9a; } .lime-colors ul li:nth-child(4) p:before { content: "#e3fd9a"; } .lime-colors ul li:nth-child(3) { background-color: #e8fda9; } .lime-colors ul li:nth-child(3) p:before { content: "#e8fda9"; } .lime-colors ul li:nth-child(2) { background-color: #ecfdb8; } .lime-colors ul li:nth-child(2) p:before { content: "#ecfdb8"; } .lime-colors ul li:nth-child(1) { background-color: #f0fec7; } .lime-colors ul li:nth-child(1) p:before { content: "#f0fec7"; } /**====== Lime-color css end ======**/ /**====== Yellow-color css start ======**/ .yellow-colors ul li:nth-child(14) { background-color: #ffd812; } .yellow-colors ul li:nth-child(14) p:before { content: "#ffd812"; } .yellow-colors ul li:nth-child(13) { background-color: #ffda1f; } .yellow-colors ul li:nth-child(13) p:before { content: "#ffda1f"; } .yellow-colors ul li:nth-child(12) { background-color: #ffdc2b; } .yellow-colors ul li:nth-child(12) p:before { content: "#ffdc2b"; } .yellow-colors ul li:nth-child(11) { background-color: #ffde38; } .yellow-colors ul li:nth-child(11) p:before { content: "#ffde38"; } .yellow-colors ul li:nth-child(10) { background-color: #ffe045; } .yellow-colors ul li:nth-child(10) p:before { content: "#ffe045"; } .yellow-colors ul li:nth-child(9) { background-color: #ffe352; } .yellow-colors ul li:nth-child(9) p:before { content: "#ffe352"; } .yellow-colors ul li:nth-child(8) { background-color: #ffe55e; } .yellow-colors ul li:nth-child(8) p:before { content: "#ffe55e"; } .yellow-colors ul li:nth-child(7) { background-color: #ffe76b; } .yellow-colors ul li:nth-child(7) p:before { content: "#ffe76b"; } .yellow-colors ul li:nth-child(6) { background-color: #ffe978; } .yellow-colors ul li:nth-child(6) p:before { content: "#ffe978"; } .yellow-colors ul li:nth-child(5) { background-color: #ffeb85; } .yellow-colors ul li:nth-child(5) p:before { content: "#ffeb85"; } .yellow-colors ul li:nth-child(4) { background-color: #ffed91; } .yellow-colors ul li:nth-child(4) p:before { content: "#ffed91"; } .yellow-colors ul li:nth-child(3) { background-color: #ffef9e; } .yellow-colors ul li:nth-child(3) p:before { content: "#ffef9e"; } .yellow-colors ul li:nth-child(2) { background-color: #fff1ab; } .yellow-colors ul li:nth-child(2) p:before { content: "#fff1ab"; } .yellow-colors ul li:nth-child(1) { background-color: #fff3b8; } .yellow-colors ul li:nth-child(1) p:before { content: "#fff3b8"; } /**====== Yellow-color css end ======**/ /**====== Amber-color css start ======**/ .amber-colors ul li:nth-child(14) { background-color: #ffb012; } .amber-colors ul li:nth-child(14) p:before { content: "#ffb012"; } .amber-colors ul li:nth-child(13) { background-color: #ffb41f; } .amber-colors ul li:nth-child(13) p:before { content: "#ffb41f"; } .amber-colors ul li:nth-child(12) { background-color: #ffb92b; } .amber-colors ul li:nth-child(12) p:before { content: "#ffb92b"; } .amber-colors ul li:nth-child(11) { background-color: #ffbd38; } .amber-colors ul li:nth-child(11) p:before { content: "#ffbd38"; } .amber-colors ul li:nth-child(10) { background-color: #ffc145; } .amber-colors ul li:nth-child(10) p:before { content: "#ffc145"; } .amber-colors ul li:nth-child(9) { background-color: #ffc552; } .amber-colors ul li:nth-child(9) p:before { content: "#ffc552"; } .amber-colors ul li:nth-child(8) { background-color: #ffca5e; } .amber-colors ul li:nth-child(8) p:before { content: "#ffca5e"; } .amber-colors ul li:nth-child(7) { background-color: #ffce6b; } .amber-colors ul li:nth-child(7) p:before { content: "#ffce6b"; } .amber-colors ul li:nth-child(6) { background-color: #ffd278; } .amber-colors ul li:nth-child(6) p:before { content: "#ffd278"; } .amber-colors ul li:nth-child(5) { background-color: #ffd685; } .amber-colors ul li:nth-child(5) p:before { content: "#ffd685"; } .amber-colors ul li:nth-child(4) { background-color: #ffdb91; } .amber-colors ul li:nth-child(4) p:before { content: "#ffdb91"; } .amber-colors ul li:nth-child(3) { background-color: #ffdf9e; } .amber-colors ul li:nth-child(3) p:before { content: "#ffdf9e"; } .amber-colors ul li:nth-child(2) { background-color: #ffe3ab; } .amber-colors ul li:nth-child(2) p:before { content: "#ffe3ab"; } .amber-colors ul li:nth-child(1) { background-color: #ffe7b8; } .amber-colors ul li:nth-child(1) p:before { content: "#ffe7b8"; } /**====== Amber-color css end ======**/ /**====== Orange-color css start ======**/ .orange-colors ul li:nth-child(14) { background-color: #ff7814; } .orange-colors ul li:nth-child(14) p:before { content: "#ff7814"; } .orange-colors ul li:nth-child(13) { background-color: #ff8124; } .orange-colors ul li:nth-child(13) p:before { content: "#ff8124"; } .orange-colors ul li:nth-child(12) { background-color: #ff8933; } .orange-colors ul li:nth-child(12) p:before { content: "#ff8933"; } .orange-colors ul li:nth-child(11) { background-color: #ff9242; } .orange-colors ul li:nth-child(11) p:before { content: "#ff9242"; } .orange-colors ul li:nth-child(10) { background-color: #ff9b52; } .orange-colors ul li:nth-child(10) p:before { content: "#ff9b52"; } .orange-colors ul li:nth-child(9) { background-color: #ffa461; } .orange-colors ul li:nth-child(9) p:before { content: "#ffa461"; } .orange-colors ul li:nth-child(8) { background-color: #ffad70; } .orange-colors ul li:nth-child(8) p:before { content: "#ffad70"; } .orange-colors ul li:nth-child(7) { background-color: #ffb67f; } .orange-colors ul li:nth-child(7) p:before { content: "#ffb67f"; } .orange-colors ul li:nth-child(6) { background-color: #ffbe8f; } .orange-colors ul li:nth-child(6) p:before { content: "#ffbe8f"; } .orange-colors ul li:nth-child(5) { background-color: #ffc79e; } .orange-colors ul li:nth-child(5) p:before { content: "#ffc79e"; } .orange-colors ul li:nth-child(4) { background-color: #ffd0ad; } .orange-colors ul li:nth-child(4) p:before { content: "#ffd0ad"; } .orange-colors ul li:nth-child(3) { background-color: #ffd9bd; } .orange-colors ul li:nth-child(3) p:before { content: "#ffd9bd"; } .orange-colors ul li:nth-child(2) { background-color: #ffe2cc; } .orange-colors ul li:nth-child(2) p:before { content: "#ffe2cc"; } .orange-colors ul li:nth-child(1) { background-color: #ffeadb; } .orange-colors ul li:nth-child(1) p:before { content: "#ffeadb"; } /**====== Orange-color css start ======**/ /**====== Deep-Orange-color css start ======**/ .deep-orange-colors ul li:nth-child(14) { background-color: #ec3305; } .deep-orange-colors ul li:nth-child(14) p:before { content: "#ec3305"; } .deep-orange-colors ul li:nth-child(13) { background-color: #f93707; } .deep-orange-colors ul li:nth-child(13) p:before { content: "#f93707"; } .deep-orange-colors ul li:nth-child(12) { background-color: #fa4316; } .deep-orange-colors ul li:nth-child(12) p:before { content: "#fa4316"; } .deep-orange-colors ul li:nth-child(11) { background-color: #fa5025; } .deep-orange-colors ul li:nth-child(11) p:before { content: "#fa5025"; } .deep-orange-colors ul li:nth-child(10) { background-color: #fa5c34; } .deep-orange-colors ul li:nth-child(10) p:before { content: "#fa5c34"; } .deep-orange-colors ul li:nth-child(9) { background-color: #fb6843; } .deep-orange-colors ul li:nth-child(9) p:before { content: "#fb6843"; } .deep-orange-colors ul li:nth-child(8) { background-color: #fb7452; } .deep-orange-colors ul li:nth-child(8) p:before { content: "#fb7452"; } .deep-orange-colors ul li:nth-child(7) { background-color: #fb8061; } .deep-orange-colors ul li:nth-child(7) p:before { content: "#fb8061"; } .deep-orange-colors ul li:nth-child(6) { background-color: #fc8c70; } .deep-orange-colors ul li:nth-child(6) p:before { content: "#fc8c70"; } .deep-orange-colors ul li:nth-child(5) { background-color: #fc987f; } .deep-orange-colors ul li:nth-child(5) p:before { content: "#fc987f"; } .deep-orange-colors ul li:nth-child(4) { background-color: #fca48e; } .deep-orange-colors ul li:nth-child(4) p:before { content: "#fca48e"; } .deep-orange-colors ul li:nth-child(3) { background-color: #fdb09d; } .deep-orange-colors ul li:nth-child(3) p:before { content: "#fdb09d"; } .deep-orange-colors ul li:nth-child(2) { background-color: #fdbcac; } .deep-orange-colors ul li:nth-child(2) p:before { content: "#fdbcac"; } .deep-orange-colors ul li:nth-child(1) { background-color: #fdc8bb; } .deep-orange-colors ul li:nth-child(1) p:before { content: "#fdc8bb"; } /**====== Deep-Orange-color css end ======**/ /**====== Brown-color css start ======**/ .brown-colors ul li:nth-child(14) { background-color: #513631; } .brown-colors ul li:nth-child(14) p:before { content: "#513631"; } .brown-colors ul li:nth-child(13) { background-color: #61403a; } .brown-colors ul li:nth-child(13) p:before { content: "#61403a"; } .brown-colors ul li:nth-child(12) { background-color: #714b44; } .brown-colors ul li:nth-child(12) p:before { content: "#714b44"; } .brown-colors ul li:nth-child(11) { background-color: #81554d; } .brown-colors ul li:nth-child(11) p:before { content: "#81554d"; } .brown-colors ul li:nth-child(10) { background-color: #916057; } .brown-colors ul li:nth-child(10) p:before { content: "#916057"; } .brown-colors ul li:nth-child(9) { background-color: #a06b61; } .brown-colors ul li:nth-child(9) p:before { content: "#a06b61"; } .brown-colors ul li:nth-child(8) { background-color: #aa7a71; } .brown-colors ul li:nth-child(8) p:before { content: "#aa7a71"; } .brown-colors ul li:nth-child(7) { background-color: #b38981; } .brown-colors ul li:nth-child(7) p:before { content: "#b38981"; } .brown-colors ul li:nth-child(6) { background-color: #bd9791; } .brown-colors ul li:nth-child(6) p:before { content: "#bd9791"; } .brown-colors ul li:nth-child(5) { background-color: #c6a6a1; } .brown-colors ul li:nth-child(5) p:before { content: "#c6a6a1"; } .brown-colors ul li:nth-child(4) { background-color: #d0b5b1; } .brown-colors ul li:nth-child(4) p:before { content: "#d0b5b1"; } .brown-colors ul li:nth-child(3) { background-color: #dac4c1; } .brown-colors ul li:nth-child(3) p:before { content: "#dac4c1"; } .brown-colors ul li:nth-child(2) { background-color: #e3d3d0; } .brown-colors ul li:nth-child(2) p:before { content: "#e3d3d0"; } .brown-colors ul li:nth-child(1) { background-color: #ede2e0; } .brown-colors ul li:nth-child(1) p:before { content: "#ede2e0"; } /**====== Brown-color css end ======**/ /**====== Grey-color css start ======**/ .grey-colors ul li:nth-child(14) { background-color: #323232; } .grey-colors ul li:nth-child(14) p:before { content: "#323232"; } .grey-colors ul li:nth-child(13) { background-color: #3f3f3f; } .grey-colors ul li:nth-child(13) p:before { content: "#3f3f3f"; } .grey-colors ul li:nth-child(12) { background-color: #4b4b4b; } .grey-colors ul li:nth-child(12) p:before { content: "#4b4b4b"; } .grey-colors ul li:nth-child(11) { background-color: #585858; } .grey-colors ul li:nth-child(11) p:before { content: "#585858"; } .grey-colors ul li:nth-child(10) { background-color: #656565; } .grey-colors ul li:nth-child(10) p:before { content: "#656565"; } .grey-colors ul li:nth-child(9) { background-color: #727272; } .grey-colors ul li:nth-child(9) p:before { content: "#727272"; } .grey-colors ul li:nth-child(8) { background-color: #7e7e7e; } .grey-colors ul li:nth-child(8) p:before { content: "#7e7e7e"; } .grey-colors ul li:nth-child(7) { background-color: #8b8b8b; } .grey-colors ul li:nth-child(7) p:before { content: "#8b8b8b"; } .grey-colors ul li:nth-child(6) { background-color: #989898; } .grey-colors ul li:nth-child(6) p:before { content: "#989898"; } .grey-colors ul li:nth-child(5) { background-color: #a5a5a5; } .grey-colors ul li:nth-child(5) p:before { content: "#a5a5a5"; } .grey-colors ul li:nth-child(4) { background-color: #b1b1b1; } .grey-colors ul li:nth-child(4) p:before { content: "#b1b1b1"; } .grey-colors ul li:nth-child(3) { background-color: #bebebe; } .grey-colors ul li:nth-child(3) p:before { content: "#bebebe"; } .grey-colors ul li:nth-child(2) { background-color: #cbcbcb; } .grey-colors ul li:nth-child(2) p:before { content: "#cbcbcb"; } .grey-colors ul li:nth-child(1) { background-color: #d8d8d8; } .grey-colors ul li:nth-child(1) p:before { content: "#d8d8d8"; } /**====== Grey-color css end ======**/ /**====== Blue-color css start ======**/ .blue-grey-colors ul li:nth-child(14) { background-color: #35444a; } .blue-grey-colors ul li:nth-child(14) p:before { content: "#35444a"; } .blue-grey-colors ul li:nth-child(13) { background-color: #3f5159; } .blue-grey-colors ul li:nth-child(13) p:before { content: "#3f5159"; } .blue-grey-colors ul li:nth-child(12) { background-color: #4a5f68; } .blue-grey-colors ul li:nth-child(12) p:before { content: "#4a5f68"; } .blue-grey-colors ul li:nth-child(11) { background-color: #546d77; } .blue-grey-colors ul li:nth-child(11) p:before { content: "#546d77"; } .blue-grey-colors ul li:nth-child(10) { background-color: #5f7a85; } .blue-grey-colors ul li:nth-child(10) p:before { content: "#5f7a85"; } .blue-grey-colors ul li:nth-child(9) { background-color: #6a8894; } .blue-grey-colors ul li:nth-child(9) p:before { content: "#6a8894"; } .blue-grey-colors ul li:nth-child(8) { background-color: #78949f; } .blue-grey-colors ul li:nth-child(8) p:before { content: "#78949f"; } .blue-grey-colors ul li:nth-child(7) { background-color: #87a0aa; } .blue-grey-colors ul li:nth-child(7) p:before { content: "#87a0aa"; } .blue-grey-colors ul li:nth-child(6) { background-color: #96abb4; } .blue-grey-colors ul li:nth-child(6) p:before { content: "#96abb4"; } .blue-grey-colors ul li:nth-child(5) { background-color: #a5b7bf; } .blue-grey-colors ul li:nth-child(5) p:before { content: "#a5b7bf"; } .blue-grey-colors ul li:nth-child(4) { background-color: #b4c3ca; } .blue-grey-colors ul li:nth-child(4) p:before { content: "#b4c3ca"; } .blue-grey-colors ul li:nth-child(3) { background-color: #c3cfd4; } .blue-grey-colors ul li:nth-child(3) p:before { content: "#c3cfd4"; } .blue-grey-colors ul li:nth-child(2) { background-color: #d2dbdf; } .blue-grey-colors ul li:nth-child(2) p:before { content: "#d2dbdf"; } .blue-grey-colors ul li:nth-child(1) { background-color: #e1e7e9; } .blue-grey-colors ul li:nth-child(1) p:before { content: "#e1e7e9"; } /**====== Blue-color css end ======**/ /**====== Primary-color css start ======**/ .primary-colorr ul li:nth-child(14) { background-color: #1cc9a7; } .primary-colorr ul li:nth-child(14) p:before { content: "#1cc9a7"; } .primary-colorr ul li:nth-child(13) { background-color: #1ed7b2; } .primary-colorr ul li:nth-child(13) p:before { content: "#1ed7b2"; } .primary-colorr ul li:nth-child(12) { background-color: #23e1bb; } .primary-colorr ul li:nth-child(12) p:before { content: "#23e1bb"; } .primary-colorr ul li:nth-child(11) { background-color: #31e2bf; } .primary-colorr ul li:nth-child(11) p:before { content: "#31e2bf"; } .primary-colorr ul li:nth-child(10) { background-color: #3ee4c4; } .primary-colorr ul li:nth-child(10) p:before { content: "#3ee4c4"; } .primary-colorr ul li:nth-child(9) { background-color: #4ce6c8; } .primary-colorr ul li:nth-child(9) p:before { content: "#4ce6c8"; } .primary-colorr ul li:nth-child(8) { background-color: #59e8cc; } .primary-colorr ul li:nth-child(8) p:before { content: "#59e8cc"; } .primary-colorr ul li:nth-child(7) { background-color: #66ead0; } .primary-colorr ul li:nth-child(6) { background-color: #74ecd4; } .primary-colorr ul li:nth-child(6) p:before { content: "#74ecd4"; } .primary-colorr ul li:nth-child(5) { background-color: #81eed8; } .primary-colorr ul li:nth-child(5) p:before { content: "#81eed8"; } .primary-colorr ul li:nth-child(4) { background-color: #8fefdc; } .primary-colorr ul li:nth-child(4) p:before { content: "#8fefdc"; } .primary-colorr ul li:nth-child(3) { background-color: #9cf1e1; } .primary-colorr ul li:nth-child(3) p:before { content: "#9cf1e1"; } .primary-colorr ul li:nth-child(2) { background-color: #aaf3e5; } .primary-colorr ul li:nth-child(2) p:before { content: "#aaf3e5"; } .primary-colorr ul li:nth-child(1) { background-color: #b7f5e9; } .primary-colorr ul li:nth-child(1) p:before { content: "#b7f5e9"; } /**====== Primary-color css end ======**/ /**====== Success-color css start ======**/ .success-colorr ul li:nth-child(14) { background-color: #33d176; } .success-colorr ul li:nth-child(14) p:before { content: "#33d176"; } .success-colorr ul li:nth-child(13) { background-color: #3bd37c; } .success-colorr ul li:nth-child(13) p:before { content: "#3bd37c"; } .success-colorr ul li:nth-child(12) { background-color: #44d581; } .success-colorr ul li:nth-child(12) p:before { content: "#44d581"; } .success-colorr ul li:nth-child(11) { background-color: #4cd787; } .success-colorr ul li:nth-child(11) p:before { content: "#4cd787"; } .success-colorr ul li:nth-child(10) { background-color: #54d98c; } .success-colorr ul li:nth-child(10) p:before { content: "#54d98c"; } .success-colorr ul li:nth-child(9) { background-color: #5dda92; } .success-colorr ul li:nth-child(9) p:before { content: "#5dda92"; } .success-colorr ul li:nth-child(8) { background-color: #65dc98; } .success-colorr ul li:nth-child(8) p:before { content: "#65dc98"; } .success-colorr ul li:nth-child(7) { background-color: #6dde9d; } .success-colorr ul li:nth-child(7) p:before { content: "#6dde9d"; } .success-colorr ul li:nth-child(6) { background-color: #76e0a3; } .success-colorr ul li:nth-child(6) p:before { content: "#76e0a3"; } .success-colorr ul li:nth-child(5) { background-color: #7ee2a8; } .success-colorr ul li:nth-child(5) p:before { content: "#7ee2a8"; } .success-colorr ul li:nth-child(4) { background-color: #86e4ae; } .success-colorr ul li:nth-child(4) p:before { content: "#86e4ae"; } .success-colorr ul li:nth-child(3) { background-color: #8fe6b4; } .success-colorr ul li:nth-child(3) p:before { content: "#8fe6b4"; } .success-colorr ul li:nth-child(2) { background-color: #97e8b9; } .success-colorr ul li:nth-child(2) p:before { content: "#97e8b9"; } .success-colorr ul li:nth-child(1) { background-color: #9fe9bf; } .success-colorr ul li:nth-child(1) p:before { content: "#9fe9bf"; } /**====== Success-color css end ======**/ /**====== Info-color css start ======**/ .info-colorr ul li:nth-child(14) { background-color: #3d9cdd; } .info-colorr ul li:nth-child(14) p:before { content: "#3d9cdd"; } .info-colorr ul li:nth-child(13) { background-color: #45a1de; } .info-colorr ul li:nth-child(13) p:before { content: "#45a1de"; } .info-colorr ul li:nth-child(12) { background-color: #4ea5e0; } .info-colorr ul li:nth-child(12) p:before { content: "#4ea5e0"; } .info-colorr ul li:nth-child(11) { background-color: #57aae1; } .info-colorr ul li:nth-child(11) p:before { content: "#57aae1"; } .info-colorr ul li:nth-child(10) { background-color: #5faee3; } .info-colorr ul li:nth-child(10) p:before { content: "#5faee3"; } .info-colorr ul li:nth-child(9) { background-color: #68b2e4; } .info-colorr ul li:nth-child(9) p:before { content: "#68b2e4"; } .info-colorr ul li:nth-child(8) { background-color: #71b7e6; } .info-colorr ul li:nth-child(8) p:before { content: "#71b7e6"; } .info-colorr ul li:nth-child(7) { background-color: #79bbe7; } .info-colorr ul li:nth-child(7) p:before { content: "#79bbe7"; } .info-colorr ul li:nth-child(6) { background-color: #82c0e9; } .info-colorr ul li:nth-child(6) p:before { content: "#82c0e9"; } .info-colorr ul li:nth-child(5) { background-color: #8bc4ea; } .info-colorr ul li:nth-child(5) p:before { content: "#8bc4ea"; } .info-colorr ul li:nth-child(4) { background-color: #93c8ec; } .info-colorr ul li:nth-child(4) p:before { content: "#93c8ec"; } .info-colorr ul li:nth-child(3) { background-color: #9ccded; } .info-colorr ul li:nth-child(3) p:before { content: "#9ccded"; } .info-colorr ul li:nth-child(2) { background-color: #a5d1ef; } .info-colorr ul li:nth-child(2) p:before { content: "#a5d1ef"; } .info-colorr ul li:nth-child(1) { background-color: #add6f1; } .info-colorr ul li:nth-child(1) p:before { content: "#add6f1"; } /**====== Info-color css end ======**/ /**====== Warning-color css start ======**/ .warning-colorr ul li:nth-child(14) { background-color: #f2c619; } .warning-colorr ul li:nth-child(14) p:before { content: "#f2c619"; } .warning-colorr ul li:nth-child(13) { background-color: #f2c922; } .warning-colorr ul li:nth-child(13) p:before { content: "#f2c922"; } .warning-colorr ul li:nth-child(12) { background-color: #f3cb2c; } .warning-colorr ul li:nth-child(12) p:before { content: "#f3cb2c"; } .warning-colorr ul li:nth-child(11) { background-color: #f3cd36; } .warning-colorr ul li:nth-child(11) p:before { content: "#f3cd36"; } .warning-colorr ul li:nth-child(10) { background-color: #f4d03f; } .warning-colorr ul li:nth-child(10) p:before { content: "#f4d03f"; } .warning-colorr ul li:nth-child(9) { background-color: #f4d249; } .warning-colorr ul li:nth-child(9) p:before { content: "#f4d249"; } .warning-colorr ul li:nth-child(8) { background-color: #f5d552; } .warning-colorr ul li:nth-child(8) p:before { content: "#f5d552"; } .warning-colorr ul li:nth-child(7) { background-color: #f5d75c; } .warning-colorr ul li:nth-child(7) p:before { content: "#f5d75c"; } .warning-colorr ul li:nth-child(6) { background-color: #f6d966; } .warning-colorr ul li:nth-child(6) p:before { content: "#f6d966"; } .warning-colorr ul li:nth-child(5) { background-color: #f7dc6f; } .warning-colorr ul li:nth-child(5) p:before { content: "#f7dc6f"; } .warning-colorr ul li:nth-child(4) { background-color: #f7de79; } .warning-colorr ul li:nth-child(4) p:before { content: "#f7de79"; } .warning-colorr ul li:nth-child(3) { background-color: #f8e083; } .warning-colorr ul li:nth-child(3) p:before { content: "#f8e083"; } .warning-colorr ul li:nth-child(2) { background-color: #f8e38c; } .warning-colorr ul li:nth-child(2) p:before { content: "#f8e38c"; } .warning-colorr ul li:nth-child(1) { background-color: #f9e596; } .warning-colorr ul li:nth-child(1) p:before { content: "#f9e596"; } /**====== Warning-color css end ======**/ /**====== Danger-color css start ======**/ .danger-colorr ul li:nth-child(14) { background-color: #e85445; } .danger-colorr ul li:nth-child(14) p:before { content: "#e85445"; } .danger-colorr ul li:nth-child(13) { background-color: #e95d4e; } .danger-colorr ul li:nth-child(13) p:before { content: "#e95d4e"; } .danger-colorr ul li:nth-child(12) { background-color: #ea6557; } .danger-colorr ul li:nth-child(12) p:before { content: "#ea6557"; } .danger-colorr ul li:nth-child(11) { background-color: #eb6d60; } .danger-colorr ul li:nth-child(11) p:before { content: "#eb6d60"; } .danger-colorr ul li:nth-child(10) { background-color: #ed7669; } .danger-colorr ul li:nth-child(10) p:before { content: "#ed7669"; } .danger-colorr ul li:nth-child(9) { background-color: #ee7e72; } .danger-colorr ul li:nth-child(9) p:before { content: "#ee7e72"; } .danger-colorr ul li:nth-child(8) { background-color: #ef867c; } .danger-colorr ul li:nth-child(8) p:before { content: "#ef867c"; } .danger-colorr ul li:nth-child(7) { background-color: #f08f85; } .danger-colorr ul li:nth-child(7) p:before { content: "#f08f85"; } .danger-colorr ul li:nth-child(6) { background-color: #f1978e; } .danger-colorr ul li:nth-child(6) p:before { content: "#f1978e"; } .danger-colorr ul li:nth-child(5) { background-color: #f29f97; } .danger-colorr ul li:nth-child(5) p:before { content: "#f29f97"; } .danger-colorr ul li:nth-child(4) { background-color: #f3a8a0; } .danger-colorr ul li:nth-child(4) p:before { content: "#f3a8a0"; } .danger-colorr ul li:nth-child(3) { background-color: #f4b0a9; } .danger-colorr ul li:nth-child(3) p:before { content: "#f4b0a9"; } .danger-colorr ul li:nth-child(2) { background-color: #f6b8b2; } .danger-colorr ul li:nth-child(2) p:before { content: "#f6b8b2"; } .danger-colorr ul li:nth-child(1) { background-color: #f7c1bb; } .danger-colorr ul li:nth-child(1) p:before { content: "#f7c1bb"; } /**====== Danger-color css end ======**/ /**====== Color-color css end ======**/ /**====== Mail-pages css end ======**/ .set-map { height: 400px; width: 100% !important; } #mapGeo { height: 345px; } #address-search .input-group { margin-bottom: 0; } /** ===================== Progress-bar css start ========================== **/ .progress-xl { height: 30px; } .progress-lg { height: 24px; } .progres-md { height: 18px; } .progress-sm { height: 12px; } .progress-xs { height: 6px; } .progress-bar-page .progress { margin-bottom: 2rem; } .progress-bar-default { background-color: #d6d6d6; } .progress-bar-primary { background-color: #448aff; } .progress-bar-success { background-color: #11c15b; } .progress-bar-info { background-color: #00bcd4; } .progress-bar-warning { background-color: #ffe100; } .progress-bar-danger { background-color: #ff5252; } .progress-bar-pink { background-color: #ff7aa3; } .progress-bar-purple { background-color: #9261c6; } .progress-bar-orange { background-color: #e67e22; } .progress-bar-yellow { background-color: #f1c40f; } .progress-bar-emrald { background-color: #2ecc71; } /**====== Progress-bar css end ======**/ @media only screen and (max-width: 1366px) { .to-do-list { margin-bottom: 15px; } .card .card-block .sub-title { font-size: 12px; } } @media only screen and (max-width: 1199px) { .pagination { float: inherit; text-align: center; display: inline-block; margin-top: 10px !important; } .pagination li { float: left; margin-bottom: 10px; } } @media only screen and (max-width: 992px) { .navbar, .navbar .navbar-logo { width: 100% !important; } .card-block [class*="col-"]:last-child .basic-list, .card-block [class*="col-"]:nth-last-child(-n+3) .card.user-card { margin-bottom: 0; } .pcoded-main-container { margin-top: 56px !important; } .card-title { font-size: 18px; font-weight: 500; margin-bottom: 5px; } .header-navbar { position: fixed !important; z-index: 1209; top: 0; } .header-navbar[pcoded-header-position="relative"] { position: fixed !important; top: 0; } .header-navbar .navbar-wrapper .navbar-container { margin-left: 0; } .header-navbar .navbar-wrapper .navbar-logo { width: 100% !important; } .header-navbar .navbar-wrapper .navbar-logo a img { display: block !important; } .header-navbar .navbar-wrapper .navbar-logo .mobile-menu { right: auto; left: 0; top: 0; width: 60px; } .header-navbar .navbar-wrapper .navbar-logo .mobile-search { display: block; position: absolute; left: 70px; top: 0; } .header-navbar .navbar-wrapper .navbar-logo .mobile-options { display: block; position: absolute; right: 0; top: 0; font-size: 16px; line-height: 3.5; width: 60px; } .header-navbar .navbar-container .nav-left, .header-navbar .navbar-wrapper .navbar-container .nav-right { display: none; } .nav-tabs.md-tabs.tab-timeline li a { font-size: 16px; } } @media only screen and (min-width: 992px) { .btn-blog { text-align: right; } .basic-list, .card-block [class*="col-"]:nth-last-child(-n+3) .card.user-card { margin-bottom: 0; } } @media only screen and (max-width: 991px) { .main-body .page-wrapper .align-items-end .page-header-title { text-align: center; display: block; } .main-body .page-wrapper .align-items-end .page-header-title i { float: none; margin-bottom: 10px; margin-right: 0; } .main-body .page-wrapper .align-items-end body .pcoded[vertical-placement="right"] .main-body { direction: ltr; } .main-body .page-wrapper .align-items-end .page-header-breadcrumb { width: 100%; text-align: center; margin-top: 10px; display: block; } .page-header-breadcrumb .breadcrumb-item { display: inline-block; float: none; } .messages-content { border-right: none; } } @media only screen and (min-width: 801px) and (max-width: 915px) { .grid figure { min-width: auto; } } @media only screen and (min-width: 768px) { #draggableWithoutImg [class*="col-"]:last-child .m-t-20 { margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 872px) { .author-details .header-right li { margin-right: 40px; } .recent-candidate-card .recent-contain { margin-left: 0; } .author-details img~.dot1, .author-details img~.dot2 { top: 30%; } } @media only screen and (max-width: 768px) { .card-block.list-tag ul li:last-child { margin-bottom: 20px; } h4 { font-size: 1rem; font-weight: 500; } .card h5 { font-size: 16px; } .header-navbar .navbar-wrapper .navbar-logo { display: inherit; } .header-navbar .navbar-wrapper .navbar-logo a { display: inline-block; } .card-header-right i:nth-child(n+2) { display: none; } .user-info .user-title { position: initial; margin-bottom: 10px; margin-top: 10px; } .nav-tabs.md-tabs.tab-timeline li a { font-size: 14px; } .toolbar-page [class*="col-"] { margin-bottom: 30px; } .toolbar-page [class*="col-"]:last-child { margin-bottom: 0; } .border-checkbox-section .border-checkbox-group, .checkbox-color, .radio-inline { display: block; } .checkbox-fade { display: inline-block; } } @media only screen and (max-width: 767px) { .signup-card { position: inherit; } } @media only screen and (max-width: 640px) { .dt-button { margin-bottom: 5px; } } @media only screen and (max-width: 991px) { .main-body .page-wrapper .align-items-end .page-header-title { text-align: center; display: block; } .main-body .page-wrapper .align-items-end .page-header-title i { float: none; margin-bottom: 10px; } .main-body .page-wrapper .align-items-end body .pcoded[vertical-placement="right"] .main-body { direction: ltr; } .main-body .page-wrapper .align-items-end .page-header-breadcrumb { width: 100%; text-align: center; margin-top: 10px; display: block; } .page-header-breadcrumb .breadcrumb-item { display: inline-block; float: none; } } @media only screen and (max-width: 993px) { .navbar, .navbar .navbar-logo { width: 100% !important; } } @media only screen and (max-width: 573px) { .author-details .header-right li { margin-right: 20px; display: block; margin-top: 20px; } .md-tabs { display: initial; } .md-tabs .nav-item { width: calc(100% / 1); position: relative; } .toolbar-page [class*="col-"] .sub-title { text-align: center; } .nav-tabs.tabs { display: inherit; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border: none; } .nav-tabs .nav-link { text-align: center; } .search-content { display: block; text-align: center; } .search-content img { margin-top: 20px; } .seacrh-header { margin-top: 0; } .seacrh-header .input-group { margin-bottom: 0; } .modal-mob-btn [class*="col-"]:first-child { margin-bottom: 20px; } .table-card .row-table { display: block; text-align: center; } .table-card .row-table i { font-size: 28px; margin-bottom: 10px; display: inline-block; } .table-card .row-table .br { border: none; border-bottom: 1px solid #ccc; } .table-card .row-table>[class*=col-] { display: block; } .card-block-big { padding: 1em; } } @media only screen and (max-width: 460px) { .user-box .media-left { padding-right: 10px; } } @media only screen and (max-width: 480px) { .j-pro .j-checkbox-toggle { padding-bottom: 30px; } .main-body .page-wrapper { padding: 10px; } .comment-block .media-left { padding-right: 10px; } .breadcrumb-page .card { text-align: center; } div.dataTables_wrapper div.dataTables_filter input { width: 150px; } #dt-live-dom .form-control, #footer-search tfoot .form-control, #footer-select tfoot .form-control, #form-input-table .form-control, .search-api .form-control { width: 65%; padding: 0.5rem 6px; } .grid figure { min-width: auto; } .mytooltip .tooltip-content { width: 310px; margin: 0 0 20px -90px; } .mytooltip .tooltip-content:after { margin-left: -90px; } .product-detail .txt-muted.d-inline-block { margin-top: 10px; } .product-detail .txt-muted.d-inline-block~.f-right { float: none; display: block; margin-top: 10px; } .mob-product-btn { text-align: center; } .mob-product-btn .btn-primary, .mob-product-btn .sweet-alert button.confirm, .sweet-alert .mob-product-btn button.confirm, .mob-product-btn .wizard>.actions a, .wizard>.actions .mob-product-btn a { margin-right: 0; display: block; margin: 10px auto; } } @media only screen and (max-width: 420px) { #msform { width: 320px; margin: 20px auto; } .ms-container { width: 240px; } .ms-container .ms-selectable, .ms-container .ms-selection { width: 40%; } .g-recaptcha { transform: scale(0.77); -webkit-transform: scale(0.77); transform-origin: 0 0; -webkit-transform-origin: 0 0; } } @media only screen and (min-width: 576px) and (max-width: 1366px) { .job-card.card-columns { -webkit-column-count: 2; column-count: 2; } } @media only screen and (max-width: 576px) { .header-navbar .navbar-wrapper .navbar-container .header-notification .show-notification, .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification { min-width: 280px; left: -15px; right: auto; width: auto; } .header-navbar .navbar-wrapper .navbar-container .header-notification .profile-notification { left: auto; right: 0; } .nav-tabs .nav-link.active { margin-bottom: 0; } .md-tabs .nav-item a { margin-bottom: 5px; } .add-task-card .to-do-list h6 span { display: inline-block; } } .fixed-button { position: fixed; bottom: 50px; right: 30px; opacity: 0; z-index: 9; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; border-radius: 25px; } .fixed-button .btn { margin: 0; padding: 12px 25px; background: #3b98ff; border: 1px solid #3b98ff; border-radius: 25px; text-transform: capitalize; font-weight: bold; font-size: 16px } .fixed-button .btn:focus, .fixed-button .btn:active, .fixed-button .btn:hover { background: #303549; border-bottom: 1px solid #303549 } .fixed-button:hover { -webkit-animation: none; animation: none } .fixed-button.active { bottom: 50px; opacity: 1 } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(59, 152, 255, 0.3); box-shadow: 0 0 0 0 rgba(59, 152, 255, 0.3) } 70% { -webkit-box-shadow: 0 0 0 20px rgba(4, 169, 245, 0); box-shadow: 0 0 0 20px rgba(4, 169, 245, 0) } 100% { -webkit-box-shadow: 0 0 0 0 rgba(4, 169, 245, 0); box-shadow: 0 0 0 0 rgba(4, 169, 245, 0) } } @keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(59, 152, 255, 0.3); box-shadow: 0 0 0 0 rgba(59, 152, 255, 0.3) } 70% { -webkit-box-shadow: 0 0 0 20px rgba(4, 169, 245, 0); box-shadow: 0 0 0 20px rgba(4, 169, 245, 0) } 100% { -webkit-box-shadow: 0 0 0 0 rgba(4, 169, 245, 0); box-shadow: 0 0 0 0 rgba(4, 169, 245, 0) } }