@charset "UTF-8"; /**====================================================================== ========================================================================= Template Name: Dasho Admin Template Author: Phoenixcoded File: style.css 更多下载:Http://www.bootstrapmb.com ========================================================================= ========================================================================= == Table of Contents== - Generic classes - Margin, Padding, Font class, text align, position, floating, overflow, background class, text color, display class, boarder class - Theme Elements - Accordion, Button, tabs, typography, buttons, box shadow, Lable & Badges, Alert, Pagination, Breadcumb, Cards, Collapse, - Carousel, Grid, Progress, Model, tooltip, popover, Datepicker, Gridstack, lightbox, notification, Nestable, pnotify, rating, - Rangeslider, Slider, Syntax Highlighter, Tour, Treeview, Toolbar, Session Timeout, Session idle Timeout, offline, Animation - Forms - Forms Elements, Advance Form Control, Validation, Masking, Wizard, Picker, Select - Pages - Chat, authentication, Maintenance, Maps, Landingpage messages, task, Todo, Notes, Charts, Icons, Gallery, Editors, - Invoice, Full Calender, File Upload, ================================================================================= =================================================================================== */ /* description Of variables for build for theme layouts 1) menu-caption-color List of color for sidebar menu caption 2) brand-background List of color for logo background 3) header-dark-background List of color for Dark Header 4) header-light-background List of color for light Header 5) menu-dark-background List of color for Dark sidebar menu 6) menu-light-background List of color for light sidebar menu 7) menu-active-color List of color for Active item highliter 8) menu-icon-color List of color for sidebar menu items icon colors */ /** ===================== Google Font ========================== **/ @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"); @import url("../plugins/bootstrap/css/bootstrap.min.css"); @import url("../fonts/feather/css/feather.css"); @import url("../plugins/jquery-scrollbar/css/perfect-scrollbar.css"); @import url("../fonts/datta/datta-icon.css"); /** ===================== Custom css start ========================== **/ body { font-family: "Roboto", sans-serif; font-size: 14px; color: #686c71; font-weight: 400; background: #eff3f6; position: relative; } @media (max-width: 575.98px) { .pcoded-header .dropdown { position: static; } .pcoded-header .dropdown .dropdown-toggle { position: relative; } } @media (max-width: 991.98px) { .navbar-expand-lg > .container { padding-left: 0 !important; padding-right: 0 !important; } } .invoice-total { --bs-body-bg: #f3f3f3; } .text-muted { --bs-secondary-color: #6c757d; } .form-control { --bs-border-color: #ced4da; } .font-color { --bs-body-color: #111; } .custom-select-sm { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } .border-bottom-primary td { border-bottom: 1px solid #19BCBF !important; } .border-bottom-warning td { border-bottom: 1px solid #FF9764 !important; } .progress-bar.progress-primary { background: linear-gradient(-45deg, #19BCBF, #149698); } .card-body { --bs-card-color: #686c71; padding: 20px 25px; } .text-white .card-body { color: white; } *:focus { outline: none; } a { color: #19BCBF; text-decoration: none; } a:hover { color: #17aaad; outline: none; } .nav-link:focus, .nav-link:hover { --bs-nav-link-hover-color: #19BCBF; } h1, h2, h3, h4, h5 { color: #111; font-weight: 500; } h1 { font-size: 2.5rem; } h2 { font-size: 36px; } h3 { font-size: 24px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { color: #111; font-size: 16px; } p { font-size: 14px; } b, strong { font-weight: 400; } .img-radius { border-radius: 50%; } .page-header { background: transparent; padding: 0; } .page-header h5 { margin-bottom: 5px; font-weight: 400; } .page-header .page-header-title + .breadcrumb { background: transparent; padding: 0; margin-bottom: 0; } .page-header .page-header-title + .breadcrumb > .breadcrumb-item { line-height: 1; } .page-header .page-header-title + .breadcrumb > .breadcrumb-item a { color: #19BCBF; font-weight: 400; font-size: 13px; } .page-header .page-header-title + .breadcrumb > .breadcrumb-item:last-child a { color: #686c71; font-weight: 400; } .pcoded-main-container .page-header { margin-bottom: 30px; } /* ========== card css start =========== */ .anim-rotate { -webkit-animation: anim-rotate 1s linear infinite; animation: anim-rotate 1s linear infinite; } @-webkit-keyframes anim-rotate { 100% { transform: rotate(360deg); } } @keyframes anim-rotate { 100% { transform: rotate(360deg); } } .anim-close-card { -webkit-animation: anim-close-card 1.4s linear; animation: anim-close-card 1.4s linear; } @-webkit-keyframes anim-close-card { 100% { opacity: 0.3; transform: scale3d(0.3, 0.3, 0.3); } } @keyframes anim-close-card { 100% { opacity: 0.3; transform: scale3d(0.3, 0.3, 0.3); } } p.text-muted { font-size: 13px; } .card { border-radius: 2px; box-shadow: 0 0 0 1px #e2e5e8; border: none; margin-bottom: 30px; transition: all 0.5s ease-in-out; --bs-body-color: #686c71; } .card .card-header { background-color: transparent; border-bottom: 1px solid #e2e5e8; padding: 20px 25px; position: relative; } .card .card-header h5 { margin-bottom: 0; color: #111; font-size: 16px; font-weight: 500; display: inline-block; margin-right: 10px; line-height: 1.1; position: relative; } .card .card-header.borderless { border-bottom: none; } .card .card-header.borderless h5:after { display: none; } .card .card-header .card-header-right { right: 10px; top: 10px; display: inline-block; float: right; padding: 0; position: absolute; } @media only screen and (max-width: 575px) { .card .card-header .card-header-right { display: none; } } .card .card-header .card-header-right .dropdown-menu { margin-top: 0; } .card .card-header .card-header-right .dropdown-menu li a { font-size: 14px; text-transform: capitalize; } .card .card-header .card-header-right .btn.dropdown-toggle { border: none; background: transparent; box-shadow: none; color: #888; } .card .card-header .card-header-right .btn.dropdown-toggle i { margin-right: 0; } .card .card-header .card-header-right .btn.dropdown-toggle:after { display: none; } .card .card-header .card-header-right .btn.dropdown-toggle:focus { box-shadow: none; outline: none; } .card .card-header .card-header-right .btn.dropdown-toggle { border: none; background: transparent; box-shadow: none; padding: 0; width: 20px; height: 20px; right: 8px; top: 8px; } .card .card-header .card-header-right .btn.dropdown-toggle.mobile-menu span { background-color: #888; height: 2px; border-radius: 5px; } .card .card-header .card-header-right .btn.dropdown-toggle.mobile-menu span:after, .card .card-header .card-header-right .btn.dropdown-toggle.mobile-menu span:before { border-radius: 5px; height: 2px; background-color: #888; } .card .card-header .card-header-right .nav-pills { padding: 0; box-shadow: none; background: transparent; } .card .card-footer { border-top: 1px solid #e2e5e8; background: transparent; padding: 20px 25px; } .card .card-block, .card .card-body { padding: 20px 25px; } .card .card-block-big { padding: 30px 25px; } .card.card-load { position: relative; overflow: hidden; } .card.card-load .card-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.7); z-index: 999; } .card.card-load .card-loader i { margin: 0 auto; color: #19BCBF; font-size: 24px; align-items: center; display: flex; } .card.full-card { z-index: 99999; border-radius: 0; } /* ========== scrollbar End =========== */ .scroll-y { z-index: 1027; } /* ========== scrollbar End =========== ========== card css End =========== ================================ Dropdown Start ===================== */ .dropdown-menu { padding: 10px 0; font-size: 14px; } .dropdown-menu > li { padding-left: 15px; padding-right: 15px; } .dropdown-menu > li > a { padding: 5px; color: #686c71; } .dropdown-menu > li > a i { font-size: 15px; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; } .dropdown-menu > li.active, .dropdown-menu > li:active, .dropdown-menu > li:focus, .dropdown-menu > li:hover { background: #19BCBF; color: #fff; } .dropdown-menu > li.active > a, .dropdown-menu > li:active > a, .dropdown-menu > li:focus > a, .dropdown-menu > li:hover > a { background: transparent; color: #fff; } .dropdown-menu > a.active, .dropdown-menu > a:active, .dropdown-menu > a:focus, .dropdown-menu > a:hover { background: #19BCBF; color: #fff; } /* ================================ Dropdown End ===================== */ @media (min-width: 1600px) { .container { max-width: 1540px; } } @media (max-width: 992px) { .container { max-width: 100%; } } /* ======================================================== =============== document ====================== ======================================================== Grid examples */ .bd-example-row { background: #eff3f6; padding: 15px; margin-bottom: 15px; } .bd-example-row .row > [class^=col-], .bd-example-row .row > .col { padding-top: 0.75rem; padding-bottom: 0.75rem; background-color: rgba(86, 61, 124, 0.15); border: 1px solid rgba(86, 61, 124, 0.2); } .bd-example-row .row + .row { margin-top: 1rem; } .bd-example-row .flex-items-bottom, .bd-example-row .flex-items-middle, .bd-example-row .flex-items-top { min-height: 6rem; background-color: rgba(255, 0, 0, 0.1); } .bd-example-row-flex-cols .row { min-height: 10rem; background-color: rgba(255, 0, 0, 0.1); } /* Docs examples */ .bd-example { position: relative; padding: 1rem; margin: 1rem; border: solid #ddd; border-width: 0.2rem 0 0; } @media only screen and (max-height: 575px) { .bd-example { padding: 1.5rem; margin-right: 0; margin-left: 0; border-width: 0.2rem; } } /* Example modals */ .modal { z-index: 1072; } .modal .popover, .modal .tooltip { z-index: 1073; } .modal-backdrop { z-index: 1071; } .bd-example-modal { background-color: #fafafa; } .bd-example-modal .modal { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 1; display: block; } .bd-example-modal .modal-dialog { left: auto; margin-right: auto; margin-left: auto; } /* Example tabbable tabs */ .bd-example-tabs .nav-tabs { margin-bottom: 1rem; } /* Code snippets */ .highlight { padding: 1rem; margin-top: 1rem; margin-bottom: 1rem; background-color: #f3f2fb; -ms-overflow-style: -ms-autohiding-scrollbar; } @media only screen and (max-height: 575px) { .highlight { padding: 1.5rem; } } .bd-content .highlight { margin-right: 15px; margin-left: 15px; } @media only screen and (max-height: 575px) { .bd-content .highlight { margin-right: 0; margin-left: 0; } } .highlight pre { padding: 0; margin-top: 0; margin-bottom: 0; background-color: transparent; border: 0; } .highlight pre code { font-size: inherit; color: #333; } /* ======================================================================= =============== Ui kit copy model style ====================== */ /* Code examples */ .datta-example { position: relative; } .datta-example .datta-example-btns { position: absolute; right: 30px; top: -10px; opacity: 0; transform: rotateX(-90deg); transition: all 0.3s ease-in-out; } .datta-example .datta-example-btns .datta-example-btn { display: inline-block; line-height: 1; font-weight: 600; background: #19BCBF; color: #fff; padding: 0.1875rem 0.3125rem; border-radius: 2px; white-space: nowrap; font-size: 11px; margin: 0 4px; } .datta-example .datta-example-btns .datta-example-btn.copy::before { content: "COPY"; } .datta-example .datta-example-btns .datta-example-btn.copied { background: #13bd8a !important; color: #fff !important; } .datta-example .datta-example-btns .datta-example-btn.copied::before { content: "COPIED!"; } .datta-example:hover .datta-example-btns { top: -21px; transform: rotateX(0deg); opacity: 1; } /* Modal */ .datta-example-modal { position: fixed; z-index: 1099; top: 0; right: 0; width: 100%; height: 100%; overflow: hidden; background: #282c34; transform-origin: 50% 0; transform: scale(0); transition: all 0.3s ease-in-out; } .datta-example-modal-opened { overflow: hidden !important; } .datta-example-modal-opened .datta-example-modal { transform: scale(1); } .datta-example-modal-content { max-width: 100vw; margin: auto; padding: 50px; height: 100vh; overflow: auto; } .datta-example-modal-content > pre { overflow: hidden; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .datta-example-modal-content > pre > code { padding: 0; background: none; font-size: 16px; } .md-datta-example-modal-copy { display: block; position: fixed; top: 90px; right: 30px; margin-right: 8px; font-size: 1.5rem; border-radius: 50%; padding: 10px 15px; background: #19BCBF; color: #fff; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2); z-index: 1; white-space: nowrap; } .md-datta-example-modal-copy:hover { box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2); color: #fff; } .md-datta-example-modal-copy.copied::before { content: "Copied to Clipboard Successfully ! . . ."; position: absolute; display: block; right: 100%; margin-right: 10px; font-size: 14px; background: #13bd8a; line-height: 24px; height: 24px; border-radius: 3px; padding: 0 6px; top: 50%; margin-top: -12px; } .datta-example-modal-close { display: block; position: fixed; top: 10px; right: 52px; color: #fff; opacity: 0.2; font-size: 3rem; font-weight: 100; transition: all 0.3s ease-in-out; z-index: 1; } .datta-example-modal-close:hover { color: #fff; opacity: 0.9; } /* Code */ .cui-bottom-spacer { height: 12rem; } /* editor style for model */ .hljs { padding: 0.5em; color: #abb2bf; background: #282c34; } .hljs-comment, .hljs-quote { color: #5c6370; font-style: italic; } .hljs-doctag, .hljs-formula, .hljs-keyword { color: #c678dd; } .hljs-deletion, .hljs-name, .hljs-section, .hljs-selector-tag, .hljs-subst { color: #e06c75; } .hljs-literal { color: #56b6c2; } .hljs-addition, .hljs-attribute, .hljs-meta-string, .hljs-regexp, .hljs-string { color: #98c379; } .hljs-built_in, .hljs-class .hljs-title { color: #e6c07b; } .hljs-attr, .hljs-number, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-pseudo, .hljs-template-variable, .hljs-type, .hljs-variable { color: #d19a66; } .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-symbol, .hljs-title { color: #61aeee; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; } .hljs-link { text-decoration: underline; } /* ================================ md animated mode start ===================== */ .md-show.md-effect-12 ~ .md-overlay { background: #19BCBF; } /* ================================ md animated mode End ===================== */ /* ================================ range slider Start ===================== */ .tooltip.in { opacity: 0.9; } .tooltip .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top { padding: 5px 0; margin-top: -3px; } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; } /* ================================ range slider End ===================== */ /* ================================ owl-carousel slider Start ===================== */ .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev { padding: 3px 9px; } /* ================================ owl-carousel slider End ===================== */ /* ================================ Bootstrap tags input Start ===================== */ .bootstrap-tagsinput { padding: 10px 15px; box-shadow: none; border-radius: 2px; background: #f0f3f6; } .bootstrap-tagsinput .tag { padding: 5px 12px; border-radius: 2px; line-height: 37px; margin-top: 5px; margin-right: 5px; } .bootstrap-tagsinput .tag [data-role=remove] { margin-right: -5px; } .bootstrap-tagsinput .tag [data-role=remove]:after { content: "\e8f6"; padding: 0 2px; font-family: "feather" !important; } /* ================================ Bootstrap tags input End ===================== */ /* ================================ Multi-Select Start ===================== */ .ms-container { width: 100%; } /* ================================ Multi-Select End ===================== */ /* ================================ Blockquote Start ===================== */ .blockquote { border-left: 0.25rem solid #e2e5e8; padding: 0.5rem 1rem; } .blockquote.text-end { border-left: none; border-right: 0.25rem solid #e2e5e8; } /* ================================ Blockquote End ===================== */ /* ================================ animation start ===================== */ .card .animated { -webkit-animation-duration: 1s; animation-duration: 1s; border: 5px solid #fff; margin-bottom: 30px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2); } /* ================================ animation End ===================== */ /* ================================ browser warning Start ===================== */ .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 h1 { color: #fff; } .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; } /* ================================ browser warning End ===================== */ /* material icon for material datetime picker */ /* fallback */ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format("woff2"); } .material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } /* material icon for material datetime picker */ /* new Dasho 7-dec-2018 */ div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span, div.code-toolbar > .toolbar a { padding: 3px 0.9em !important; background: #04a9f5 !important; color: #fff !important; box-shadow: none !important; } pre[class*=language-]:after, pre[class*=language-]:before { display: none; } /* table css */ .table-borderless tbody tr td, .table-borderless tbody tr th { border: 0; } @media only screen and (max-width: 400px) { .lay-customizer .theme-color > a[data-value=reset], .theme-color > a[data-value=reset] { margin-top: 20px; } } .alert-dismissible .btn-close { padding: 0px; font-size: 25px; font-weight: 500; top: 7px; } .carousel-indicators li::marker { font-size: 0px; } .statstic-data-card .carousel-item-next:not(.carousel-item-start), .statstic-data-card .active.carousel-item-end { transform: translateY(100%) !important; } .statstic-data-card .carousel-item-prev:not(.carousel-item-end), .statstic-data-card .active.carousel-item-start { transform: translateY(-100%) !important; } small { font-weight: 400; } hr { opacity: 0.1; } .checkbox-inline { display: flex; gap: 13px; flex-wrap: wrap; } .radio-inline { display: flex; gap: 15px; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #19BCBF; } label { display: inline-block; margin-bottom: 0.5rem; } .carousel-indicators li { height: 3px; } .table-responsive { overflow-x: auto; display: block; width: 100%; } .invoice-box { margin-right: 1rem; margin-left: 1rem; } .bg-dark { background-color: #343a40 !important; } .mb-n4 { margin-bottom: -30px; } .nav-link.active.h-red { background-color: darkred !important; } /** ===================== Generic-class css start ========================== **/ /*====== Padding , Margin css starts ======*/ .p-0 { padding: 0px; } .p-t-0 { padding-top: 0px; } .p-b-0 { padding-bottom: 0px; } .p-l-0 { padding-left: 0px; } .p-r-0 { padding-right: 0px; } .m-0 { margin: 0px; } .m-t-0 { margin-top: 0px; } .m-b-0 { margin-bottom: 0px; } .m-l-0 { margin-left: 0px; } .m-r-0 { margin-right: 0px; } .p-5 { padding: 5px; } .p-t-5 { padding-top: 5px; } .p-b-5 { padding-bottom: 5px; } .p-l-5 { padding-left: 5px; } .p-r-5 { padding-right: 5px; } .m-5 { margin: 5px; } .m-t-5 { margin-top: 5px; } .m-b-5 { margin-bottom: 5px; } .m-l-5 { margin-left: 5px; } .m-r-5 { margin-right: 5px; } .p-10 { padding: 10px; } .p-t-10 { padding-top: 10px; } .p-b-10 { padding-bottom: 10px; } .p-l-10 { padding-left: 10px; } .p-r-10 { padding-right: 10px; } .m-10 { margin: 10px; } .m-t-10 { margin-top: 10px; } .m-b-10 { margin-bottom: 10px; } .m-l-10 { margin-left: 10px; } .m-r-10 { margin-right: 10px; } .p-15 { padding: 15px; } .p-t-15 { padding-top: 15px; } .p-b-15 { padding-bottom: 15px; } .p-l-15 { padding-left: 15px; } .p-r-15 { padding-right: 15px; } .m-15 { margin: 15px; } .m-t-15 { margin-top: 15px; } .m-b-15 { margin-bottom: 15px; } .m-l-15 { margin-left: 15px; } .m-r-15 { margin-right: 15px; } .p-20 { padding: 20px; } .p-t-20 { padding-top: 20px; } .p-b-20 { padding-bottom: 20px; } .p-l-20 { padding-left: 20px; } .p-r-20 { padding-right: 20px; } .m-20 { margin: 20px; } .m-t-20 { margin-top: 20px; } .m-b-20 { margin-bottom: 20px; } .m-l-20 { margin-left: 20px; } .m-r-20 { margin-right: 20px; } .p-25 { padding: 25px; } .p-t-25 { padding-top: 25px; } .p-b-25 { padding-bottom: 25px; } .p-l-25 { padding-left: 25px; } .p-r-25 { padding-right: 25px; } .m-25 { margin: 25px; } .m-t-25 { margin-top: 25px; } .m-b-25 { margin-bottom: 25px; } .m-l-25 { margin-left: 25px; } .m-r-25 { margin-right: 25px; } .p-30 { padding: 30px; } .p-t-30 { padding-top: 30px; } .p-b-30 { padding-bottom: 30px; } .p-l-30 { padding-left: 30px; } .p-r-30 { padding-right: 30px; } .m-30 { margin: 30px; } .m-t-30 { margin-top: 30px; } .m-b-30 { margin-bottom: 30px; } .m-l-30 { margin-left: 30px; } .m-r-30 { margin-right: 30px; } .p-35 { padding: 35px; } .p-t-35 { padding-top: 35px; } .p-b-35 { padding-bottom: 35px; } .p-l-35 { padding-left: 35px; } .p-r-35 { padding-right: 35px; } .m-35 { margin: 35px; } .m-t-35 { margin-top: 35px; } .m-b-35 { margin-bottom: 35px; } .m-l-35 { margin-left: 35px; } .m-r-35 { margin-right: 35px; } .p-40 { padding: 40px; } .p-t-40 { padding-top: 40px; } .p-b-40 { padding-bottom: 40px; } .p-l-40 { padding-left: 40px; } .p-r-40 { padding-right: 40px; } .m-40 { margin: 40px; } .m-t-40 { margin-top: 40px; } .m-b-40 { margin-bottom: 40px; } .m-l-40 { margin-left: 40px; } .m-r-40 { margin-right: 40px; } .p-45 { padding: 45px; } .p-t-45 { padding-top: 45px; } .p-b-45 { padding-bottom: 45px; } .p-l-45 { padding-left: 45px; } .p-r-45 { padding-right: 45px; } .m-45 { margin: 45px; } .m-t-45 { margin-top: 45px; } .m-b-45 { margin-bottom: 45px; } .m-l-45 { margin-left: 45px; } .m-r-45 { margin-right: 45px; } .p-50 { padding: 50px; } .p-t-50 { padding-top: 50px; } .p-b-50 { padding-bottom: 50px; } .p-l-50 { padding-left: 50px; } .p-r-50 { padding-right: 50px; } .m-50 { margin: 50px; } .m-t-50 { margin-top: 50px; } .m-b-50 { margin-bottom: 50px; } .m-l-50 { margin-left: 50px; } .m-r-50 { margin-right: 50px; } /*====== Padding , Margin css ends ======*/ /*====== text-color, background & border css starts ======*/ .bg-c-blue { background: linear-gradient(-45deg, #19BCBF, #149698) !important; } .text-c-blue { color: #19BCBF; } .b-c-blue { border: 1px solid #19BCBF; } .bg-c-red { background: linear-gradient(-45deg, #FF425C, #e53b52) !important; } .text-c-red { color: #FF425C; } .b-c-red { border: 1px solid #FF425C; } .bg-c-green { background: linear-gradient(-45deg, #13bd8a, #0f976e) !important; } .text-c-green { color: #13bd8a; } .b-c-green { border: 1px solid #13bd8a; } .bg-c-yellow { background: linear-gradient(-45deg, #FF9764, #ff864b) !important; } .text-c-yellow { color: #FF9764; } .b-c-yellow { border: 1px solid #FF9764; } .bg-c-purple { background: linear-gradient(-45deg, #463699, #7661e6) !important; } .text-c-purple { color: #463699; } .b-c-purple { border: 1px solid #463699; } .bg-c-info { background: linear-gradient(-45deg, #2DCEE3, #24a4b5) !important; } .text-c-info { color: #2DCEE3; } .b-c-info { border: 1px solid #2DCEE3; } /*====== text-color, background & border css ends ======*/ /*====== [ overrides bootstrap color ]text-color, background & border css starts ======*/ .bg-primary { background: linear-gradient(-45deg, #19BCBF, #149698) !important; } .text-primary { color: #19BCBF !important; } .b-primary { border: 1px solid #19BCBF !important; } .bg-light-primary { background: rgba(25, 188, 191, 0.15); } .bg-danger { background: linear-gradient(-45deg, #FF425C, #e53b52) !important; } .text-danger { color: #FF425C !important; } .b-danger { border: 1px solid #FF425C !important; } .bg-light-danger { background: rgba(255, 66, 92, 0.15); } .bg-success { background: linear-gradient(-45deg, #13bd8a, #0f976e) !important; } .text-success { color: #13bd8a !important; } .b-success { border: 1px solid #13bd8a !important; } .bg-light-success { background: rgba(19, 189, 138, 0.15); } .bg-warning { background: linear-gradient(-45deg, #FF9764, #ff864b) !important; } .text-warning { color: #FF9764 !important; } .b-warning { border: 1px solid #FF9764 !important; } .bg-light-warning { background: rgba(255, 151, 100, 0.15); } .bg-purple { background: linear-gradient(-45deg, #463699, #7661e6) !important; } .text-purple { color: #463699 !important; } .b-purple { border: 1px solid #463699 !important; } .bg-light-purple { background: rgba(70, 54, 153, 0.15); } .bg-info { background: linear-gradient(-45deg, #2DCEE3, #24a4b5) !important; } .text-info { color: #2DCEE3 !important; } .b-info { border: 1px solid #2DCEE3 !important; } .bg-light-info { background: rgba(45, 206, 227, 0.15); } /*====== [ overrides bootstrap color ]text-color, background & border css ends ======*/ /*====== border color css starts ======*/ .b-primary { border: 1px solid #19BCBF; } .border-bottom-primary td { border-bottom: 1px solid #19BCBF; } .border-bottom-primary th { border-bottom: 1px solid #19BCBF !important; } .b-danger { border: 1px solid #FF425C; } .border-bottom-danger td { border-bottom: 1px solid #FF425C; } .border-bottom-danger th { border-bottom: 1px solid #FF425C !important; } .b-success { border: 1px solid #13bd8a; } .border-bottom-success td { border-bottom: 1px solid #13bd8a; } .border-bottom-success th { border-bottom: 1px solid #13bd8a !important; } .b-warning { border: 1px solid #FF9764; } .border-bottom-warning td { border-bottom: 1px solid #FF9764; } .border-bottom-warning th { border-bottom: 1px solid #FF9764 !important; } .b-purple { border: 1px solid #463699; } .border-bottom-purple td { border-bottom: 1px solid #463699; } .border-bottom-purple th { border-bottom: 1px solid #463699 !important; } .b-info { border: 1px solid #2DCEE3; } .border-bottom-info td { border-bottom: 1px solid #2DCEE3; } .border-bottom-info th { border-bottom: 1px solid #2DCEE3 !important; } /*====== border color css ends ======*/ /*====== Card top border css starts ======*/ .card-border-c-blue { border-top: 4px solid #19BCBF; } .card-border-c-red { border-top: 4px solid #FF425C; } .card-border-c-green { border-top: 4px solid #13bd8a; } .card-border-c-yellow { border-top: 4px solid #FF9764; } .card-border-c-purple { border-top: 4px solid #463699; } .card-border-c-info { border-top: 4px solid #2DCEE3; } /*====== Card top border 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-70 { font-size: 70px; } .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-200 { font-weight: 200; } .f-w-300 { font-weight: 300; } .f-w-400 { font-weight: 400; } .f-w-500 { font-weight: 500; } .f-w-600 { font-weight: 600; } .f-w-700 { font-weight: 700; } .f-w-800 { font-weight: 800; } .f-w-900 { font-weight: 900; } /*====== Font-weight css ends ======*/ /*====== text-color, background color css starts ======*/ .bg-facebook { background: #3C5A99; } .text-facebook { color: #3C5A99; } .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-behance { background: #0057ff; } .text-behance { color: #0057ff; } .bg-dropbox { background: #3380FF; } .text-dropbox { color: #3380FF; } .bg-linkedin { background: #0077B5; } .text-linkedin { color: #0077B5; } /*====== text-color css ends ======*/ /*====== width, Height css starts ======*/ .wid-20 { width: 20px; } .hei-20 { height: 20px; } .wid-25 { width: 25px; } .hei-25 { height: 25px; } .wid-30 { width: 30px; } .hei-30 { height: 30px; } .wid-35 { width: 35px; } .hei-35 { height: 35px; } .wid-40 { width: 40px; } .hei-40 { height: 40px; } .wid-45 { width: 45px; } .hei-45 { height: 45px; } .wid-50 { width: 50px; } .hei-50 { height: 50px; } .wid-55 { width: 55px; } .hei-55 { height: 55px; } .wid-60 { width: 60px; } .hei-60 { height: 60px; } .wid-65 { width: 65px; } .hei-65 { height: 65px; } .wid-70 { width: 70px; } .hei-70 { height: 70px; } .wid-75 { width: 75px; } .hei-75 { height: 75px; } .wid-80 { width: 80px; } .hei-80 { height: 80px; } .wid-85 { width: 85px; } .hei-85 { height: 85px; } .wid-90 { width: 90px; } .hei-90 { height: 90px; } .wid-95 { width: 95px; } .hei-95 { height: 95px; } .wid-100 { width: 100px; } .hei-100 { height: 100px; } .wid-105 { width: 105px; } .hei-105 { height: 105px; } .wid-110 { width: 110px; } .hei-110 { height: 110px; } .wid-115 { width: 115px; } .hei-115 { height: 115px; } .wid-120 { width: 120px; } .hei-120 { height: 120px; } .wid-125 { width: 125px; } .hei-125 { height: 125px; } .wid-130 { width: 130px; } .hei-130 { height: 130px; } .wid-135 { width: 135px; } .hei-135 { height: 135px; } .wid-140 { width: 140px; } .hei-140 { height: 140px; } .wid-145 { width: 145px; } .hei-145 { height: 145px; } .wid-150 { width: 150px; } .hei-150 { height: 150px; } /*====== width, Height css ends ======*/ /*====== border-width css starts ======*/ .b-wid-1 { border-width: 1px; } .b-wid-2 { border-width: 2px; } .b-wid-3 { border-width: 3px; } .b-wid-4 { border-width: 4px; } .b-wid-5 { border-width: 5px; } .b-wid-6 { border-width: 6px; } .b-wid-7 { border-width: 7px; } .b-wid-8 { border-width: 8px; } /*====== border-width css ends ======*/ /* new logo start */ .b-brand { display: flex; align-items: center; } .b-brand .b-bg { background: transparent; border-radius: 3px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; } .b-brand .b-title { margin-left: 10px; font-weight: 400; color: #fff; font-size: 16px; } .navbar-collapsed .b-brand .b-title { transform: rotateY(-90deg); transform-origin: 0 0; opacity: 0; transition: all 0.3s ease-in-out; } .navbar-collapsed .mobile-menu { transform: rotateY(-90deg); transform-origin: 0 0; opacity: 0; transition: all 0.3s ease-in-out; } .navbar-collapsed:hover .b-brand .b-title { transform: rotateY(0deg); opacity: 1; } .navbar-collapsed:hover .mobile-menu { transition-delay: 0.3s; transform: rotateY(0deg); opacity: 1; } /* new logo End */ /* Pre-loader css start */ .loader-bg { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1035; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); } .loader-bg .loader-track { position: relative; height: 3px; display: block; width: 100%; overflow: hidden; } .loader-bg .loader-track .loader-fill:after, .loader-bg .loader-track .loader-fill:before { content: ""; background: #19BCBF; position: absolute; top: 0; left: 0; bottom: 0; will-change: left, right; } .loader-bg .loader-track .loader-fill:before { -webkit-animation: mbar 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation: mbar 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .loader-bg .loader-track .loader-fill:after { -webkit-animation: m_s 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: m_s 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; -webkit-animation-delay: 1.15s; animation-delay: 1.15s; } @-webkit-keyframes mbar { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -35%; } } @keyframes mbar { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -35%; } } @-webkit-keyframes m_s { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } @keyframes m_s { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } /* Pre-loader css end */ /* header css start */ .pcoded-header { z-index: 1028; position: relative; display: flex; min-height: 64px; padding: 0; top: 0; background: #fff; color: rgba(57, 70, 92, 0.8); width: calc(100% - 264px); margin-left: 264px; transition: all 0.3s ease-in-out; box-shadow: 0 1px 0 0 #e2e5e8; } .pcoded-header .m-header { display: none; } .pcoded-header .m-header .logo-dark, .pcoded-header .m-header .logo-thumb { display: none; } .pcoded-header .input-group { background: transparent; } .pcoded-header .input-group .input-group-text { margin-right: 0; } .pcoded-header .input-group .input-group-text, .pcoded-header a, .pcoded-header dropdown-toggle { color: rgba(57, 70, 92, 0.8); } .pcoded-header .input-group .input-group-text:hover, .pcoded-header a:hover, .pcoded-header dropdown-toggle:hover { color: #39465C; } .pcoded-header a > i { font-size: 16px; } .pcoded-header #mobile-header { display: none; } .pcoded-header .navbar-nav { padding-left: 0; list-style: none; margin-bottom: 0; display: inline-block; } .pcoded-header .navbar-nav > li { line-height: 64px; display: inline-block; padding: 0 12px; } .pcoded-header .navbar-nav > li .nav-link { padding: 0; } .pcoded-header .navbar-nav > li:first-child { padding-left: 25px; } .pcoded-header .navbar-nav > li:last-child { padding-right: 40px; } .pcoded-header .me-auto .dropdown-menu { margin-left: -20px; } .pcoded-header .ms-auto { float: right; } .pcoded-header .ms-auto .dropdown-menu { margin-right: -20px; } .pcoded-header .main-search .input-group { padding: 0; } .pcoded-header .main-search .input-group .form-control, .pcoded-header .main-search .input-group .input-group-text { background: transparent; border: none; border-radius: 0; padding: 0; } .pcoded-header .main-search .input-group .search-close { display: none; } .pcoded-header .main-search .input-group .search-btn { border-radius: 2px; padding: 0; background: transparent; border-color: transparent; box-shadow: none; } .pcoded-header .main-search .input-group .form-control { transition: all 0.3s ease-in-out; font-size: 14px; } .pcoded-header .main-search .input-group .form-control:active, .pcoded-header .main-search .input-group .form-control:focus, .pcoded-header .main-search .input-group .form-control:hover, .pcoded-header .main-search .input-group .search-btn:active, .pcoded-header .main-search .input-group .search-btn:focus, .pcoded-header .main-search .input-group .search-btn:hover { outline: none; box-shadow: none; } .pcoded-header .main-search.open .input-group { background: #fff; border: 1px solid #e2e5e8; padding: 5px 5px 5px 20px; } .pcoded-header .main-search.open .input-group .search-close { display: flex; } .pcoded-header .main-search.open .input-group .search-btn { padding: 5px; margin-left: 5px; background: #19BCBF; border-color: #19BCBF; } .pcoded-header .main-search.open .input-group .search-btn .input-group-text { color: #fff; } .pcoded-header .main-search.open .input-group .form-control { transition: all 0.3s ease-in-out; } .pcoded-header .main-search.open .input-group .form-control:active, .pcoded-header .main-search.open .input-group .form-control:focus, .pcoded-header .main-search.open .input-group .form-control:hover, .pcoded-header .main-search.open .input-group .search-btn:active, .pcoded-header .main-search.open .input-group .search-btn:focus, .pcoded-header .main-search.open .input-group .search-btn:hover { outline: none; box-shadow: none; } .pcoded-header .dropdown .dropdown-toggle { line-height: 64px; display: inline-block; padding-right: 15px; } .pcoded-header .dropdown .dropdown-toggle:after { content: "\e842"; font-family: "feather"; font-size: 15px; border: none; position: absolute; top: 0; left: 12px; } .pcoded-header .dropdown .dropdown-menu { position: absolute; min-width: 240px; } .pcoded-header .dropdown .dropdown-menu li { line-height: 1.2; } .pcoded-header .dropdown .dropdown-menu li a { padding: 10px; font-size: 14px; } .pcoded-header .dropdown .dropdown-menu li.active a, .pcoded-header .dropdown .dropdown-menu li:active a, .pcoded-header .dropdown .dropdown-menu li:focus a, .pcoded-header .dropdown .dropdown-menu li:hover a { color: #686c71; } .pcoded-header .dropdown .notification { width: 350px; padding: 0; line-height: 1.4; overflow: hidden; } .pcoded-header .dropdown .notification a { color: #686c71; } .pcoded-header .dropdown .notification a:hover { color: #111; } .pcoded-header .dropdown .notification .noti-head { background: linear-gradient(-45deg, #19BCBF, #149698); padding: 15px 20px; } .pcoded-header .dropdown .notification .noti-head h6 { color: #fff; } .pcoded-header .dropdown .notification .noti-head a { color: #fff; text-decoration: underline; font-size: 13px; } .pcoded-header .dropdown .notification .noti-body { padding: 0; position: relative; height: 300px; } .pcoded-header .dropdown .notification .noti-body img { width: 40px; margin-right: 20px; } .pcoded-header .dropdown .notification .noti-body li { padding: 15px 20px; transition: all 0.3s ease-in-out; } .pcoded-header .dropdown .notification .noti-body li.n-title { padding-bottom: 0; } .pcoded-header .dropdown .notification .noti-body li.n-title p { margin-bottom: 5px; } .pcoded-header .dropdown .notification .noti-body li.notification:hover { background: rgba(25, 188, 191, 0.1); } .pcoded-header .dropdown .notification .noti-body li p { margin-bottom: 5px; font-size: 13px; } .pcoded-header .dropdown .notification .noti-body li p strong { color: #222; } .pcoded-header .dropdown .notification .noti-body li .n-time { font-size: 80%; float: right; } .pcoded-header .dropdown .notification .noti-footer { border-top: 1px solid #f1f1f1; padding: 15px 20px; text-align: center; background: #eff3f6; } .pcoded-header .dropdown .notification .noti-footer a { text-decoration: underline; font-size: 13px; } .pcoded-header .dropdown .notification ul { padding-left: 0; margin-bottom: 0; list-style: none; } .pcoded-header .dropdown .notification ul li { padding: 20px 15px; } .pcoded-header .dropdown .profile-notification { padding: 0; line-height: 1.4; overflow: hidden; } .pcoded-header .dropdown .profile-notification .pro-head { padding: 15px; position: relative; border-bottom: 1px solid #e2e5e8; display: flex; align-items: center; } .pcoded-header .dropdown .profile-notification .pro-head span { display: block; font-size: 12px; } .pcoded-header .dropdown .profile-notification .pro-head .h6 { font-size: 13px; margin-bottom: 0; } .pcoded-header .dropdown .profile-notification .pro-head img { width: 40px; margin-right: 10px; } .pcoded-header .dropdown .profile-notification .pro-head .dud-logout { color: #fff; padding-right: 0; position: absolute; right: 0; top: 0; height: 100%; width: 40px; display: flex; align-items: center; justify-content: center; } .pcoded-header .dropdown .profile-notification .pro-body { padding: 8px 0; margin-bottom: 0; list-style: none; } .pcoded-header .dropdown .profile-notification .pro-body li a { color: #686c71; font-size: 14px; padding: 15px 20px; } .pcoded-header .dropdown .profile-notification .pro-body li a i { font-size: 16px; margin-right: 10px; } .pcoded-header .dropdown .profile-notification .pro-body li.active, .pcoded-header .dropdown .profile-notification .pro-body li:active, .pcoded-header .dropdown .profile-notification .pro-body li:focus, .pcoded-header .dropdown .profile-notification .pro-body li:hover { background: rgba(25, 188, 191, 0.1); } .pcoded-header .dropdown .profile-notification .pro-body li.active > a, .pcoded-header .dropdown .profile-notification .pro-body li:active > a, .pcoded-header .dropdown .profile-notification .pro-body li:focus > a, .pcoded-header .dropdown .profile-notification .pro-body li:hover > a { background: transparent; } /* header css end */ /* menu[ vartical ] css start */ .mobile-menu { display: flex; align-items: center; justify-content: center; width: 37px; height: 64px; position: absolute; right: 0; top: 0; padding: 0 10px; } .mobile-menu span { position: relative; display: block; width: 100%; height: 2px; background-color: rgba(255, 255, 255, 0.8); transition: all 0.3s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 2px; } .mobile-menu span:after, .mobile-menu span:before { content: ""; position: absolute; left: 0; height: 2px; background-color: rgba(255, 255, 255, 0.8); transition: all 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 2px; } .mobile-menu span:after { top: 5px; width: 70%; } .mobile-menu span:before { top: -5px; width: 40%; } .mobile-menu:hover span { background-color: #fff; } .mobile-menu:hover span:after, .mobile-menu:hover span:before { background-color: #fff; } .mobile-menu.on span { background-color: transparent; } .mobile-menu.on span:after, .mobile-menu.on span:before { height: 2px; width: 100%; } .mobile-menu.on span:before { transform: rotate(45deg) translate(4px, 4px); } .mobile-menu.on span:after { transform: rotate(-45deg) translate(3px, -3px); } .navbar-brand { background: #19BCBF; } .pcoded-header:before, .pcoded-main-container:before { content: ""; transition: all 0.3s ease-in-out; } .pcoded-navbar { display: block; z-index: 1029; position: absolute; transition: all 0.3s ease-in-out; width: 264px; height: 100%; top: 0; background: #39465C; color: #b5bdca; } .pcoded-navbar ul { padding-left: 0; list-style: none; margin-bottom: 0; } .pcoded-navbar .scroll-div.navbar-content { height: calc(100% - 64px); } .pcoded-navbar .header-logo { position: relative; align-items: center; display: inline-flex; float: left; background: #39465C; height: 64px; text-align: center; width: 264px; margin-right: 0; padding: 10px 25px; transition: all 0.3s ease-in-out; box-shadow: 0 1px 0 0 rgba(181, 189, 202, 0.2), 7px 0 15px 0 rgba(69, 90, 100, 0.09); } .pcoded-navbar .header-logo .logo-dark { display: none; } .pcoded-navbar .header-logo .logo-thumb { transform: rotateY(-90deg); opacity: 0; position: absolute; transition: unset; } .pcoded-navbar .header-logo + .scroll-div { float: left; display: inline-block; } .pcoded-navbar .navbar-content { box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.09); } .pcoded-navbar .mobile-menu { display: flex; align-items: center; justify-content: center; width: 37px; height: 64px; position: absolute; right: 10px; top: 0; padding: 0 10px; transition: all 0.3s ease-in-out; } .pcoded-navbar .pcoded-badge { font-size: 75%; position: relative; right: 0; top: -1px; padding: 2px 7px; border-radius: 2px; display: inline-block; margin-left: 10px; } .pcoded-navbar .pcoded-inner-navbar { flex-direction: column; } .pcoded-navbar .pcoded-inner-navbar li { position: relative; } .pcoded-navbar .pcoded-inner-navbar li > a { text-align: left; padding: 10px 10px 10px 20px; margin: 5px 0 0; display: block; border-radius: 0; position: relative; } .pcoded-navbar .pcoded-inner-navbar li > a .pcoded-mtext { position: relative; } .pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-micon { font-size: 16px; padding: 4px 7px; margin-right: 5px; border-radius: 4px; width: 30px; display: inline-flex; align-items: center; height: 30px; text-align: center; } .pcoded-navbar .pcoded-inner-navbar li > a > .pcoded-micon + .pcoded-mtext { position: relative; top: 0; } .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu > a:after { content: "\e844"; font-family: "feather"; font-size: 13px; border: none; position: absolute; top: 13px; right: 20px; transition: 0.3s ease-in-out; } .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu.pcoded-trigger > a:after { transform: rotate(90deg); } .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu { display: none; } .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu a:after { top: 7px; } .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu.pcoded-trigger.active > .pcoded-submenu { display: block; } .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu.pcoded-trigger.active > a { position: relative; } .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a { text-align: left; padding: 7px 7px 7px 60px; margin: 0; display: block; } .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before { content: ""; position: absolute; top: 16px; left: 35px; transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1); border-radius: 50%; width: 5px; height: 5px; } .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li .pcoded-submenu > li > a { padding: 7px 7px 7px 80px; } .pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li .pcoded-submenu > li > a:before { left: 55px; } .pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption { font-size: 11px; font-weight: 400; padding: 25px 15px 15px 28px; text-transform: capitalize; position: relative; } .pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption > label { margin-bottom: 0; } .pcoded-navbar .pcoded-inner-navbar li.disabled > a { cursor: default; opacity: 0.5; } .pcoded-navbar .pcoded-submenu { background: #354156; padding: 15px 0; } .pcoded-navbar a { color: #b5bdca; } .pcoded-navbar .navbar-content, .pcoded-navbar .navbar-wrapper { width: 100%; height: 100%; } .pcoded-navbar.navbar-collapsed { width: 70px; height: 100%; transition: all 0.3s ease-in-out; } .pcoded-navbar.navbar-collapsed .header-logo { width: 70px; padding: 10px 20px; } .pcoded-navbar.navbar-collapsed .header-logo img { transform: rotateY(-90deg); transform-origin: 0 0; opacity: 0; transition: unset; } .pcoded-navbar.navbar-collapsed .header-logo .logo-thumb { transform: rotateY(0deg); transform-origin: 0 0; opacity: 1; left: 20px; } .pcoded-navbar.navbar-collapsed .header-logo .mobile-menu { transform: rotateY(-90deg); transform-origin: 0 0; opacity: 0; } .pcoded-navbar.navbar-collapsed .navbar-content.ps { overflow: visible; } .pcoded-navbar.navbar-collapsed .pcoded-menu-caption { position: relative; width: 100%; height: auto; white-space: nowrap; overflow: hidden; } .pcoded-navbar.navbar-collapsed .pcoded-menu-caption > label { transform: rotateY(-90deg); transform-origin: 0 0; opacity: 0; transition: all 0.3s ease-in-out; } .pcoded-navbar.navbar-collapsed .pcoded-menu-caption:after { content: ""; position: absolute; top: 32px; left: 15px; width: calc(100% - 30px); height: 1px; background: rgba(181, 189, 202, 0.5); } .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li > a { padding: 10px 20px; } .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li > a > .pcoded-micon + .pcoded-mtext { position: absolute; top: 16px; } .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li > a > .pcoded-mtext { transform: rotateY(-90deg); transform-origin: 0 0; opacity: 0; transition: all 0.3s ease-in-out; } .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-hasmenu > a:after { right: 12px; } .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu { display: none; } .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu li.active > a:before, .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu li.active:hover > a:before { content: ""; border-radius: 50%; width: 5px; height: 5px; top: 16px; background: #19BCBF; } .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu:after { content: ""; position: absolute; top: 50px; left: 37px; width: 1px; height: calc(100% - 50px); background: rgba(181, 189, 202, 0.2); } .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu li a { color: transparent; white-space: nowrap; } .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu .pcoded-submenu li a:before { opacity: 0; } .pcoded-navbar.navbar-collapsed ~ .pcoded-header { width: calc(100% - 70px); } .pcoded-navbar.navbar-collapsed ~ .pcoded-header, .pcoded-navbar.navbar-collapsed ~ .pcoded-main-container { margin-left: 70px; } .pcoded-navbar.navbar-collapsed .pcoded-badge { transform: rotateX(-90deg); transform-origin: 50% 50%; opacity: 0; display: none; transition: all 0.15s ease-in-out; } .pcoded-navbar.navbar-collapsed:hover { width: 264px !important; } .pcoded-navbar.navbar-collapsed:hover .header-logo { width: 264px; } .pcoded-navbar.navbar-collapsed:hover .header-logo img { transform: rotateY(0deg); opacity: 1; } .pcoded-navbar.navbar-collapsed:hover .header-logo .logo-thumb { transform: rotateY(-90deg); opacity: 0; } .pcoded-navbar.navbar-collapsed:hover .header-logo .mobile-menu { display: flex; right: 10px; } .pcoded-navbar.navbar-collapsed:hover .pcoded-menu-caption > label { transform: rotateY(0deg); opacity: 1; } .pcoded-navbar.navbar-collapsed:hover .pcoded-menu-caption:after { background: transparent; } .pcoded-navbar.navbar-collapsed:hover .mobile-menu { transform: rotateY(0deg); opacity: 1; } .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li > a > .pcoded-mtext { transform: rotateY(0deg); opacity: 1; } .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li > a > .pcoded-mtext:after { opacity: 1; visibility: visible; } .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-hasmenu > a:after { transform: rotateX(0deg); } .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger > a:after { transform: rotateX(0deg) rotate(90deg); } .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu:after { display: none; } .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu li a { color: inherit; } .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu .pcoded-submenu li a:before { opacity: 1; } .pcoded-navbar .pcoded-menu-caption { color: #8090a5; } .pcoded-navbar .pcoded-inner-navbar li.active > a, .pcoded-navbar .pcoded-inner-navbar li:focus > a, .pcoded-navbar .pcoded-inner-navbar li:hover > a { color: #19BCBF; } .pcoded-navbar .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background-color: #19BCBF; } .pcoded-navbar .pcoded-inner-navbar > li.active:after, .pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger:after { content: ""; background-color: #19BCBF; z-index: 1027; position: absolute; left: 0; top: 5px; width: 3px; height: calc(100% - 5px); } .pcoded-navbar .pcoded-inner-navbar > li.active > a, .pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a { background: #313c4f; color: #fff; } .pcoded-navbar .pcoded-inner-navbar > .pcoded-menu-caption.active:after, .pcoded-navbar .pcoded-inner-navbar > .pcoded-menu-caption.pcoded-trigger:after { display: none; } .pcoded-navbar.mob-open ~ .pcoded-header:before, .pcoded-navbar.mob-open ~ .pcoded-main-container:before, .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-header:before, .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-main-container:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: 1; } /* === scroll bar start ===== */ .navbar-content { position: relative; } .ps .ps__rail-x.ps--clicking, .ps .ps__rail-x:focus, .ps .ps__rail-x:hover, .ps .ps__rail-y.ps--clicking, .ps .ps__rail-y:focus, .ps .ps__rail-y:hover { background: transparent; } .ps__thumb-y { background: #aec2d1; } .ps__rail-y.ps--clicking .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y:hover > .ps__thumb-y { background: #beceda; } /* === scroll bar End ===== */ /* menu [ vartical ] css end */ /* main content start */ .pcoded-content { position: relative; display: block; padding: 25px; } .pcoded-main-container { position: relative; margin: 0 auto; padding-top: 0; display: block; clear: both; float: unset; right: 0; top: 0; margin-left: 264px; min-height: 100vh; transition: all 0.3s ease-in-out; } /* main content end*/ /* ========================== Rsponsive Menu start ====================== */ @media only screen and (max-width: 991px) { .pcoded-header { background: linear-gradient(-45deg, #19BCBF, #149698); color: #fff; } .pcoded-header .input-group-text, .pcoded-header a, .pcoded-header dropdown-toggle { color: #39465C; } .pcoded-header .input-group-text:hover, .pcoded-header a:hover, .pcoded-header dropdown-toggle:hover { color: #19BCBF; } .pcoded-header #mobile-header { display: none; right: 20px; } .pcoded-header .container > .collapse:not(.show), .pcoded-header > .collapse:not(.show) { display: flex; background: #fff; box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08); position: relative; padding: 22px; } .pcoded-header .container > .collapse:not(.show) .mob-toggler:after, .pcoded-header > .collapse:not(.show) .mob-toggler:after { content: "\e89a"; font-family: "feather"; font-size: 20px; color: #39465C; position: absolute; right: 10px; top: 0; width: 40px; height: 64px; display: flex; align-items: center; justify-content: center; } .pcoded-header .container > .collapse:not(.show) .me-auto, .pcoded-header > .collapse:not(.show) .me-auto { height: 64px; display: flex; justify-content: center; } .pcoded-header .container > .collapse:not(.show) .ms-auto, .pcoded-header > .collapse:not(.show) .ms-auto { margin-left: auto; margin-right: 0 !important; display: none; } .pcoded-header .dropdown-menu, .pcoded-header .dropdown-menu a, .pcoded-header .search-close .input-group-text { color: #39465C; } .pcoded-header .m-header { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 64px; } .pcoded-header .m-header .b-brand { margin-left: 20px; } .pcoded-header .m-header .b-brand img { filter: brightness(0) invert(1); } .pcoded-header .m-header .mobile-menu { right: 20px; } .pcoded-header .full-screen { display: none; } .pcoded-header .navbar-nav > li:last-child { padding-right: 60px; } .pcoded-navbar { margin-left: -264px; position: absolute; height: 100%; box-shadow: none; } .pcoded-navbar.menupos-fixed .scroll-div.navbar-content, .pcoded-navbar .scroll-div.navbar-content { height: 100% !important; min-height: 100% !important; } .pcoded-navbar ~ .pcoded-header, .pcoded-navbar ~ .pcoded-main-container { margin-left: 0; } .pcoded-navbar ~ .pcoded-header { width: 100%; } .pcoded-navbar .container { padding-left: 0; padding-right: 0; } .pcoded-navbar .navbar-brand { display: none; } .pcoded-navbar.mob-open { margin-left: 0; } .pcoded-navbar.mob-open .pcoded-main-container ~ .pcoded-header, .pcoded-navbar.mob-open ~ .pcoded-main-container { margin-left: 0; } .pcoded-main-container { padding-top: 0; } } @media only screen and (max-width: 575px) { .pcoded-header .main-search.open .input-group .search-close { display: none; } .pcoded-header .navbar-nav > li { padding: 0 8px; } .pcoded-header .navbar-nav.ms-auto > li:first-child { padding-left: 0; } .pcoded-header .navbar-nav > li:last-child { padding-right: 50px; } .pcoded-header .navbar-nav.me-auto li.nav-item:not(.dropdown) { display: block; padding-right: 0; } .pcoded-header .navbar-nav.me-auto li.nav-item:not(.dropdown) .search-close { display: none; } .pcoded-header .dropdown.show { position: static; } .pcoded-header .dropdown.show a:after { display: none; } .pcoded-header .dropdown.show:before { display: none; } .pcoded-header .dropdown .notification { width: 100%; } .pcoded-header .dropdown .dropdown-menu { width: 95%; margin-left: auto; margin-right: auto; left: 0; right: 0; } .header-chat.open, .header-user-list.open { width: 280px; } .pcoded-content { padding: 30px 15px; } .card { margin-bottom: 15px; } } @media only screen and (max-width: 1200px) and (min-width: 768px) { .pcoded-navbar .header-logo { transition: none; } .pcoded-navbar.navbar-collapsed { transition: none; } .pcoded-navbar.navbar-collapsed .header-logo img { transition: none; } .pcoded-navbar.navbar-collapsed .pcoded-menu-caption > label { transition: none; } .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li > a > .pcoded-mtext { transition: none; } .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-hasmenu > a:after { transition: none; transition-delay: 0; } .pcoded-navbar.navbar-collapsed .pcoded-badge { transition: none; } .pcoded-navbar.navbar-collapsed:hover .pcoded-badge { transition-delay: 0; } } /* responsive horizontal menu */ @media only screen and (max-width: 991px) { .pcoded-navbar.theme-horizontal { margin-left: 0; } .pcoded-navbar.theme-horizontal ~ .pcoded-header .m-header .b-brand img { filter: brightness(0) invert(1); } .pcoded-navbar.theme-horizontal ~ .pcoded-header .container > .collapse:not(.show), .pcoded-navbar.theme-horizontal ~ .pcoded-header > .collapse:not(.show) { display: inline-flex; background: #fff; box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08); } .pcoded-navbar.theme-horizontal ~ .pcoded-header .b-title { color: #fff; } .pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-hasmenu.pcoded-trigger > .pcoded-submenu .pcoded-trigger > .pcoded-submenu, .pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-hasmenu.pcoded-trigger > .pcoded-submenu .pcoded-trigger.edge > .pcoded-submenu { position: relative; left: 0; min-width: 100%; margin: 0; box-shadow: none; } .pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-hasmenu.pcoded-trigger > .pcoded-submenu .pcoded-trigger > .pcoded-submenu:before, .pcoded-navbar.theme-horizontal .pcoded-inner-navbar .pcoded-hasmenu.pcoded-trigger > .pcoded-submenu .pcoded-trigger.edge > .pcoded-submenu:before { display: none; } } /* ========================== Rsponsive Menu end ====================== */ /* ******************************************************************************* */ /* * Horizontal */ .theme-horizontal .sidenav-horizontal-wrapper { flex: 1 1 auto; width: 0; } .sidenav:not(.sidenav-no-animation) .theme-horizontal .sidenav-horizontal-wrapper .sidenav-inner { transition: margin 0.2s; } .theme-horizontal .sidenav-horizontal-next, .theme-horizontal .sidenav-horizontal-prev { position: relative; display: block; flex: 0 0 auto; width: 2.25rem; background-color: #39465C; z-index: 9; } .theme-horizontal .sidenav-horizontal-next::after, .theme-horizontal .sidenav-horizontal-prev::after { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 0.8rem; height: 0.8rem; border: 2px solid; border-top: 0; } .theme-horizontal .sidenav-horizontal-next.disabled, .theme-horizontal .sidenav-horizontal-prev.disabled { cursor: default !important; opacity: 0; } .theme-horizontal .sidenav-horizontal-prev::after { border-right: 0; transform: translate(-50%, -50%) rotate(45deg); } .theme-horizontal .sidenav-horizontal-next::after { border-left: 0; transform: translate(-50%, -50%) rotate(-45deg); } .theme-horizontal .sidenav-horizontal:after, .theme-horizontal .sidenav-horizontal:before { content: ""; background: #39465C; width: 100%; position: absolute; top: 0; height: 100%; z-index: 5; } @media only screen and (max-width: 991px) { .theme-horizontal .sidenav-horizontal:after, .theme-horizontal .sidenav-horizontal:before { display: none; } } .theme-horizontal .sidenav-horizontal:before { left: 100%; } .theme-horizontal .sidenav-horizontal:after { right: 100%; } .theme-horizontal.menu-light .sidenav-horizontal:after, .theme-horizontal.menu-light .sidenav-horizontal:before { background: #fff; } @-webkit-keyframes sidenavDropdownShow { 0% { opacity: 0; transform: translateY(-0.5rem); } 100% { opacity: 1; transform: translateY(0); } } @keyframes sidenavDropdownShow { 0% { opacity: 0; transform: translateY(-0.5rem); } 100% { opacity: 1; transform: translateY(0); } } .menu-styler { z-index: 1029; position: relative; color: #686c71; } .menu-styler h5, .menu-styler h6 { color: #111; font-weight: 400; } .menu-styler hr { border-top: 1px solid rgba(0, 0, 0, 0.1); } .menu-styler .style-toggler > a { position: fixed; right: 0; top: 200px; transition: 0.3s ease-in-out; } .menu-styler .style-toggler > a:before { content: ""; width: 45px; height: 45px; position: absolute; right: 0; top: 0; z-index: 1001; background: #FF425C; transition: 0.3s ease-in-out; border-radius: 3px 0 0 3px; box-shadow: 0 0 8px rgba(255, 66, 92, 0.9), 6px 0 8px rgba(0, 0, 0, 0.1); } .menu-styler .style-toggler > a:after { content: "\e849"; top: 12px; font-size: 21px; position: absolute; right: 11px; font-family: "feather"; z-index: 1029; line-height: 1; color: #fff; transition: 0.3s ease-in-out; } @media all and (-ms-high-contrast: none) { .menu-styler .style-toggler > a:after { line-height: 0.5; } } .menu-styler .prebuild-toggler > .prebuild-group { position: fixed; transition: 0.3s ease-in-out; transform: rotate(90deg); right: -109px; top: 370px; } .menu-styler .prebuild-toggler > .prebuild-group > a { color: #19BCBF; background: #fff; border: 1px solid #19BCBF; box-shadow: 0 0 2px rgba(25, 188, 191, 0.9), 6px 0 8px rgba(0, 0, 0, 0.1); padding: 13px 20px; } .menu-styler .prebuild-toggler > .prebuild-group > a:first-child { border-radius: 0 0 0 3px; } .menu-styler .prebuild-toggler > .prebuild-group > a:last-child { border-radius: 0 0 3px 0; } .menu-styler .prebuild-toggler > .prebuild-group > a.active { color: #fff; background: #19BCBF; } .menu-styler.open .style-toggler > a, .menu-styler.prebuild-open .style-toggler > a { right: 400px; -webkit-animation: sh-shake 0s ease infinite; animation: sh-shake 0s ease infinite; } .menu-styler.open .style-toggler > a:after, .menu-styler.prebuild-open .style-toggler > a:after { content: "\e847"; -webkit-animation: anim-rotate 0s linear infinite; animation: anim-rotate 0s linear infinite; } .menu-styler.open .prebuild-toggler > .prebuild-group, .menu-styler.prebuild-open .prebuild-toggler > .prebuild-group { right: 291px; } .menu-styler.open .style-block { right: 0; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); } .menu-styler.prebuild-open .style-block-prebuild { right: 0; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); } .menu-styler .style-block, .menu-styler .style-block-prebuild { position: fixed; top: 0; right: -400px; width: 400px; height: 100vh; background: #fff; z-index: 1030; transition: 0.3s ease-in-out; padding: 25px 20px 20px; } .menu-styler .mst-scroll { height: calc(100vh - 175px); background-color: rgba(25, 188, 191, 0.03); padding: 0 15px; } .menu-styler label { margin-bottom: 3px; } .menu-styler .switch input[type=checkbox] + .cr { top: 8px; } .menu-styler .radio input[type=radio] + .cr { margin-right: 10px; } .menu-styler .radio input[type=radio] + .cr:after, .menu-styler .radio input[type=radio] + .cr:before { margin-right: 3px; } .menu-styler h6 { position: relative; margin: 10px 0 15px; } .menu-styler h6:after { content: ""; background-color: #19BCBF; position: absolute; left: 0; bottom: -8px; width: 40px; height: 2px; } .menu-styler .nav-pills { padding: 0; box-shadow: none; } .menu-styler .nav-pills li { width: 33.3333333333%; } .menu-styler .tab-content { padding: 15px; box-shadow: none; background-color: rgba(25, 188, 191, 0.03); border-top: 2px solid #19BCBF; } .menu-styler .layout-block { position: relative; margin-bottom: 10px; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px #e2e5e8; } .menu-styler .layout-block .card-img-overlay { background: rgba(57, 70, 92, 0.7); display: flex; justify-content: center; align-items: center; transition: all 0.3s ease-in-out; opacity: 0; } .menu-styler .layout-block .card-img-overlay h5 { color: #fff; } .menu-styler .layout-block:hover .card-img-overlay { opacity: 1; } @media only screen and (max-width: 992px) { .menu-styler { display: none; } } @-webkit-keyframes sh-shake { 0%, 100%, 25% { transform: scale(1); } 15%, 3%, 9% { transform: scale(1.1); } 12%, 20%, 6% { transform: scale(0.9); } } @keyframes sh-shake { 0%, 100%, 25% { transform: scale(1); } 15%, 3%, 9% { transform: scale(1.1); } 12%, 20%, 6% { transform: scale(0.9); } } .lay-customizer .theme-color, .theme-color { display: block; position: relative; padding: 5px 5px 0; margin-bottom: 10px; } .lay-customizer .theme-color > a, .theme-color > a { position: relative; width: 45px; height: 30px; border-radius: 0; display: inline-block; margin-right: 8px; background: #eff3f6; overflow: hidden; box-shadow: 0 0 0 1px #e2e5e8; } .lay-customizer .theme-color > a span, .theme-color > a span { width: 100%; position: absolute; } .lay-customizer .theme-color > a span:after, .lay-customizer .theme-color > a span:before, .theme-color > a span:after, .theme-color > a span:before { content: ""; height: 100%; position: absolute; } .lay-customizer .theme-color > a span:before, .theme-color > a span:before { width: 30%; left: 0; background: #39465C; } .lay-customizer .theme-color > a span:after, .theme-color > a span:after { width: 70%; right: 0; background: #eff3f6; } .lay-customizer .theme-color > a > span:nth-child(1), .theme-color > a > span:nth-child(1) { height: 30%; top: 0; } .lay-customizer .theme-color > a > span:nth-child(1):after, .theme-color > a > span:nth-child(1):after { background: #fff; } .lay-customizer .theme-color > a > span:nth-child(2), .theme-color > a > span:nth-child(2) { height: 75%; bottom: 0; } .lay-customizer .theme-color > a.active, .theme-color > a.active { box-shadow: 0 0 0 3px #19BCBF; } .lay-customizer .theme-color > a.active:before, .theme-color > a.active:before { content: "\e8dc"; top: -1px; font-size: 20px; position: absolute; left: 12px; font-family: "feather"; z-index: 1001; color: #19BCBF; transition: 0.3s ease-in-out; text-shadow: 0 1px 3px rgba(25, 188, 191, 0.9), 0 3px 8px rgba(0, 0, 0, 0.1); } .lay-customizer .theme-color > a.active:after, .theme-color > a.active:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.4); } .lay-customizer .theme-color > a[data-value=menu-light] span:before, .theme-color > a[data-value=menu-light] span:before { background: #fff; } .lay-customizer .theme-color > a[data-value=dark] span:after, .theme-color > a[data-value=dark] span:after { background: #1c222d; } .lay-customizer .theme-color > a[data-value=reset], .theme-color > a[data-value=reset] { background: #FF425C; color: #fff; display: inline-flex; align-items: center; justify-content: center; top: -10px; width: 135px; box-shadow: none; } .lay-customizer .theme-color.small > a, .theme-color.small > a { width: 25px; height: 25px; border-radius: 50%; } .lay-customizer .theme-color.small > a:before, .theme-color.small > a:before { font-size: 15px; left: 5px; top: 1px; } .lay-customizer .theme-color.small > a > span, .theme-color.small > a > span { display: none; } .lay-customizer .theme-color.header-color > a[data-value=header-blue] > span:nth-child(1):after, .theme-color.header-color > a[data-value=header-blue] > span:nth-child(1):after { background: #19BCBF; } .lay-customizer .theme-color.header-color.small > a[data-value=header-blue], .theme-color.header-color.small > a[data-value=header-blue] { background: #19BCBF; } .lay-customizer .theme-color.header-color > a[data-value=header-red] > span:nth-child(1):after, .theme-color.header-color > a[data-value=header-red] > span:nth-child(1):after { background: #b31d1d; } .lay-customizer .theme-color.header-color.small > a[data-value=header-red], .theme-color.header-color.small > a[data-value=header-red] { background: #b31d1d; } .lay-customizer .theme-color.header-color > a[data-value=header-purple] > span:nth-child(1):after, .theme-color.header-color > a[data-value=header-purple] > span:nth-child(1):after { background: #463699; } .lay-customizer .theme-color.header-color.small > a[data-value=header-purple], .theme-color.header-color.small > a[data-value=header-purple] { background: #463699; } .lay-customizer .theme-color.header-color > a[data-value=header-info] > span:nth-child(1):after, .theme-color.header-color > a[data-value=header-info] > span:nth-child(1):after { background: #2DCEE3; } .lay-customizer .theme-color.header-color.small > a[data-value=header-info], .theme-color.header-color.small > a[data-value=header-info] { background: #2DCEE3; } .lay-customizer .theme-color.header-color > a[data-value=header-dark] > span:nth-child(1):after, .theme-color.header-color > a[data-value=header-dark] > span:nth-child(1):after { background: #39465C; } .lay-customizer .theme-color.header-color.small > a[data-value=header-dark], .theme-color.header-color.small > a[data-value=header-dark] { background: #39465C; } .lay-customizer .theme-color.navbar-color > a[data-value=navbar-blue] > span:nth-child(2):before, .theme-color.navbar-color > a[data-value=navbar-blue] > span:nth-child(2):before { background: #19BCBF; } .lay-customizer .theme-color.navbar-color.small > a[data-value=navbar-blue], .theme-color.navbar-color.small > a[data-value=navbar-blue] { background: #19BCBF; } .lay-customizer .theme-color.navbar-color > a[data-value=navbar-red] > span:nth-child(2):before, .theme-color.navbar-color > a[data-value=navbar-red] > span:nth-child(2):before { background: #FF9764; } .lay-customizer .theme-color.navbar-color.small > a[data-value=navbar-red], .theme-color.navbar-color.small > a[data-value=navbar-red] { background: #FF9764; } .lay-customizer .theme-color.navbar-color > a[data-value=navbar-purple] > span:nth-child(2):before, .theme-color.navbar-color > a[data-value=navbar-purple] > span:nth-child(2):before { background: #463699; } .lay-customizer .theme-color.navbar-color.small > a[data-value=navbar-purple], .theme-color.navbar-color.small > a[data-value=navbar-purple] { background: #463699; } .lay-customizer .theme-color.navbar-color > a[data-value=navbar-info] > span:nth-child(2):before, .theme-color.navbar-color > a[data-value=navbar-info] > span:nth-child(2):before { background: #2DCEE3; } .lay-customizer .theme-color.navbar-color.small > a[data-value=navbar-info], .theme-color.navbar-color.small > a[data-value=navbar-info] { background: #2DCEE3; } .lay-customizer .theme-color.navbar-color > a[data-value=navbar-dark] > span:nth-child(2):before, .theme-color.navbar-color > a[data-value=navbar-dark] > span:nth-child(2):before { background: #39465C; } .lay-customizer .theme-color.navbar-color.small > a[data-value=navbar-dark], .theme-color.navbar-color.small > a[data-value=navbar-dark] { background: #39465C; } .lay-customizer .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-blue] > span:nth-child(2):before, .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-blue] > span:nth-child(2):before { background: linear-gradient(-45deg, #19BCBF, #149698); } .lay-customizer .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-red] > span:nth-child(2):before, .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-red] > span:nth-child(2):before { background: linear-gradient(-45deg, #FF425C, #e53b52); } .lay-customizer .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-purple] > span:nth-child(2):before, .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-purple] > span:nth-child(2):before { background: linear-gradient(-45deg, #463699, #7661e6); } .lay-customizer .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-info] > span:nth-child(2):before, .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-info] > span:nth-child(2):before { background: linear-gradient(-45deg, #2DCEE3, #24a4b5); } .lay-customizer .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-dark] > span:nth-child(2):before, .theme-color.navbar-gradient-color > a[data-value=navbar-gradient-dark] > span:nth-child(2):before { background: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103)); } .lay-customizer .theme-color.brand-color > a[data-value=brand-blue] > span:nth-child(1):before, .theme-color.brand-color > a[data-value=brand-blue] > span:nth-child(1):before { background: #19BCBF; } .lay-customizer .theme-color.brand-color.small > a[data-value=brand-blue], .theme-color.brand-color.small > a[data-value=brand-blue] { background: #19BCBF; } .lay-customizer .theme-color.brand-color > a[data-value=brand-red] > span:nth-child(1):before, .theme-color.brand-color > a[data-value=brand-red] > span:nth-child(1):before { background: #b31d1d; } .lay-customizer .theme-color.brand-color.small > a[data-value=brand-red], .theme-color.brand-color.small > a[data-value=brand-red] { background: #b31d1d; } .lay-customizer .theme-color.brand-color > a[data-value=brand-purple] > span:nth-child(1):before, .theme-color.brand-color > a[data-value=brand-purple] > span:nth-child(1):before { background: #463699; } .lay-customizer .theme-color.brand-color.small > a[data-value=brand-purple], .theme-color.brand-color.small > a[data-value=brand-purple] { background: #463699; } .lay-customizer .theme-color.brand-color > a[data-value=brand-info] > span:nth-child(1):before, .theme-color.brand-color > a[data-value=brand-info] > span:nth-child(1):before { background: #2DCEE3; } .lay-customizer .theme-color.brand-color.small > a[data-value=brand-info], .theme-color.brand-color.small > a[data-value=brand-info] { background: #2DCEE3; } .lay-customizer .theme-color.brand-color > a[data-value=brand-dark] > span:nth-child(1):before, .theme-color.brand-color > a[data-value=brand-dark] > span:nth-child(1):before { background: #39465C; } .lay-customizer .theme-color.brand-color.small > a[data-value=brand-dark], .theme-color.brand-color.small > a[data-value=brand-dark] { background: #39465C; } .lay-customizer .theme-color.active-color > a[data-value=active-default], .theme-color.active-color > a[data-value=active-default] { background: #19BCBF; } .lay-customizer .theme-color.active-color > a[data-value=active-blue], .theme-color.active-color > a[data-value=active-blue] { background: #19BCBF; } .lay-customizer .theme-color.active-color > a[data-value=active-red], .theme-color.active-color > a[data-value=active-red] { background: #FF9764; } .lay-customizer .theme-color.active-color > a[data-value=active-purple], .theme-color.active-color > a[data-value=active-purple] { background: #463699; } .lay-customizer .theme-color.active-color > a[data-value=active-info], .theme-color.active-color > a[data-value=active-info] { background: #2DCEE3; } .lay-customizer .theme-color.active-color > a[data-value=active-dark], .theme-color.active-color > a[data-value=active-dark] { background: #39465C; } .lay-customizer .theme-color.title-color > a[data-value=title-default], .theme-color.title-color > a[data-value=title-default] { background: #fff; } .lay-customizer .theme-color.title-color > a[data-value=title-blue], .theme-color.title-color > a[data-value=title-blue] { background: #19BCBF; } .lay-customizer .theme-color.title-color > a[data-value=title-red], .theme-color.title-color > a[data-value=title-red] { background: #FF9764; } .lay-customizer .theme-color.title-color > a[data-value=title-purple], .theme-color.title-color > a[data-value=title-purple] { background: #463699; } .lay-customizer .theme-color.title-color > a[data-value=title-info], .theme-color.title-color > a[data-value=title-info] { background: #2DCEE3; } .lay-customizer .theme-color.title-color > a[data-value=title-dark], .theme-color.title-color > a[data-value=title-dark] { background: #39465C; } .lay-customizer .theme-color.navbar-images > a, .theme-color.navbar-images > a { height: 90px; background-size: cover; background-position: center center; } .lay-customizer .theme-color.navbar-images > a span, .theme-color.navbar-images > a span { display: none; } .lay-customizer .theme-color.navbar-images > a.active:before, .theme-color.navbar-images > a.active:before { top: 35px; content: "\e87c"; } .lay-customizer .theme-color.navbar-images > a[data-value=navbar-image-1], .theme-color.navbar-images > a[data-value=navbar-image-1] { background-image: url("../images/nav-bg/navbar-img-1.jpg"); } .lay-customizer .theme-color.navbar-images > a[data-value=navbar-image-2], .theme-color.navbar-images > a[data-value=navbar-image-2] { background-image: url("../images/nav-bg/navbar-img-2.jpg"); } .lay-customizer .theme-color.navbar-images > a[data-value=navbar-image-3], .theme-color.navbar-images > a[data-value=navbar-image-3] { background-image: url("../images/nav-bg/navbar-img-3.jpg"); } .lay-customizer .theme-color.navbar-images > a[data-value=navbar-image-4], .theme-color.navbar-images > a[data-value=navbar-image-4] { background-image: url("../images/nav-bg/navbar-img-4.jpg"); } .lay-customizer .theme-color.navbar-images > a[data-value=navbar-image-5], .theme-color.navbar-images > a[data-value=navbar-image-5] { background-image: url("../images/nav-bg/navbar-img-5.jpg"); } .lay-customizer .theme-color.navbar-pattern > a, .theme-color.navbar-pattern > a { background-size: auto; } .lay-customizer .theme-color.navbar-pattern > a span, .theme-color.navbar-pattern > a span { display: none; } .lay-customizer .theme-color.navbar-pattern > a[data-value=navbar-pattern-1], .theme-color.navbar-pattern > a[data-value=navbar-pattern-1] { background-image: url("../images/bg-images/1.jpg"); } .lay-customizer .theme-color.navbar-pattern > a[data-value=navbar-pattern-2], .theme-color.navbar-pattern > a[data-value=navbar-pattern-2] { background-image: url("../images/bg-images/2.jpg"); } .lay-customizer .theme-color.navbar-pattern > a[data-value=navbar-pattern-3], .theme-color.navbar-pattern > a[data-value=navbar-pattern-3] { background-image: url("../images/bg-images/3.jpg"); } .lay-customizer .theme-color.navbar-pattern > a[data-value=navbar-pattern-4], .theme-color.navbar-pattern > a[data-value=navbar-pattern-4] { background-image: url("../images/bg-images/4.jpg"); } .lay-customizer .theme-color.navbar-pattern > a[data-value=navbar-pattern-5], .theme-color.navbar-pattern > a[data-value=navbar-pattern-5] { background-image: url("../images/bg-images/5.jpg"); } .lay-customizer .theme-color.navbar-pattern > a[data-value=navbar-pattern-6], .theme-color.navbar-pattern > a[data-value=navbar-pattern-6] { background-image: url("../images/bg-images/6.jpg"); } .lay-customizer .theme-color.bg-images > a, .theme-color.bg-images > a { width: 95px; height: 80px; border-radius: 2px; background-size: cover; background-position: center center; } .lay-customizer .theme-color.bg-images > a span, .theme-color.bg-images > a span { display: none; } .lay-customizer .theme-color.bg-images > a.active:before, .theme-color.bg-images > a.active:before { top: 35px; content: "\e87c"; } /* =================================================================================== ========================== Diffrent Layout Styles Start ==================== =================================================================================== ====== [ light menu style start ] ======== */ .pcoded-navbar.menu-light { background-color: #fff; color: #39465C; } .pcoded-navbar.menu-light .header-logo { background-color: #39465C; } .pcoded-navbar.menu-light .header-logo .logo-dark { display: none; } .pcoded-navbar.menu-light .header-logo .logo-main { display: block; } .pcoded-navbar.menu-light .sidenav-horizontal-next, .pcoded-navbar.menu-light .sidenav-horizontal-prev { background: #fff; } .pcoded-navbar.menu-light .mobile-menu span { background-color: rgba(255, 255, 255, 0.8); } .pcoded-navbar.menu-light .mobile-menu span:after, .pcoded-navbar.menu-light .mobile-menu span:before { background-color: rgba(255, 255, 255, 0.8); } .pcoded-navbar.menu-light .mobile-menu.on span { background-color: transparent; } .pcoded-navbar.menu-light .pcoded-submenu { background: #fbfbfb; } .pcoded-navbar.menu-light a { color: #39465C; } .pcoded-navbar.menu-light.navbar-collapsed .pcoded-menu-caption:after { background: rgba(0, 0, 0, 0.1); } .pcoded-navbar.menu-light.navbar-collapsed:hover .pcoded-menu-caption:after { background: transparent; } .pcoded-navbar.menu-light .pcoded-menu-caption { color: #39465C; } .pcoded-navbar.menu-light .pcoded-inner-navbar > li.active > a, .pcoded-navbar.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a { background: #f1f1f1; color: #111; } .pcoded-navbar.menu-light.theme-horizontal .pcoded-inner-navbar > li.active a, .pcoded-navbar.menu-light.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger a, .pcoded-navbar.menu-light.theme-horizontal .pcoded-inner-navbar > li:hover a { color: #39465C; background: transparent; } .pcoded-navbar.menu-light.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.menu-light.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before { color: #fff; } /* ====== [ light menu style end ] ======== */ /* ====== [ Menu icon start ] ======== */ .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(1) > a > .pcoded-micon { color: #19BCBF; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(2) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(3) > a > .pcoded-micon { color: #01a9ac; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(4) > a > .pcoded-micon { color: #463699; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(5) > a > .pcoded-micon { color: #2DCEE3; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(6) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(7) > a > .pcoded-micon { color: #19BCBF; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(8) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(9) > a > .pcoded-micon { color: #01a9ac; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(10) > a > .pcoded-micon { color: #463699; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(11) > a > .pcoded-micon { color: #2DCEE3; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(12) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(13) > a > .pcoded-micon { color: #19BCBF; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(14) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(15) > a > .pcoded-micon { color: #01a9ac; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(16) > a > .pcoded-micon { color: #463699; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(17) > a > .pcoded-micon { color: #2DCEE3; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(18) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(19) > a > .pcoded-micon { color: #19BCBF; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(20) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(21) > a > .pcoded-micon { color: #01a9ac; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(22) > a > .pcoded-micon { color: #463699; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(23) > a > .pcoded-micon { color: #2DCEE3; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(24) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(25) > a > .pcoded-micon { color: #19BCBF; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(26) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(27) > a > .pcoded-micon { color: #01a9ac; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(28) > a > .pcoded-micon { color: #463699; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(29) > a > .pcoded-micon { color: #2DCEE3; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(30) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(31) > a > .pcoded-micon { color: #19BCBF; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(32) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(33) > a > .pcoded-micon { color: #01a9ac; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(34) > a > .pcoded-micon { color: #463699; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(35) > a > .pcoded-micon { color: #2DCEE3; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(36) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(37) > a > .pcoded-micon { color: #19BCBF; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(38) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(39) > a > .pcoded-micon { color: #01a9ac; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(40) > a > .pcoded-micon { color: #463699; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(41) > a > .pcoded-micon { color: #2DCEE3; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(42) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(43) > a > .pcoded-micon { color: #19BCBF; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(44) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(45) > a > .pcoded-micon { color: #01a9ac; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(46) > a > .pcoded-micon { color: #463699; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(47) > a > .pcoded-micon { color: #2DCEE3; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li:nth-child(48) > a > .pcoded-micon { color: #FF9764; } .pcoded-navbar.icon-colored .pcoded-inner-navbar > li.active > a > .pcoded-micon, .pcoded-navbar.icon-colored .pcoded-inner-navbar > li.pcoded-trigger > a > .pcoded-micon { color: #fff; } .pcoded-navbar.icon-colored.menu-light .pcoded-inner-navbar > li.active > a > .pcoded-micon, .pcoded-navbar.icon-colored.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a > .pcoded-micon { color: #39465C; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(1) > a { color: #19BCBF; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(2) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(3) > a { color: #01a9ac; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(4) > a { color: #463699; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(5) > a { color: #2DCEE3; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(6) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(7) > a { color: #19BCBF; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(8) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(9) > a { color: #01a9ac; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(10) > a { color: #463699; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(11) > a { color: #2DCEE3; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(12) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(13) > a { color: #19BCBF; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(14) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(15) > a { color: #01a9ac; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(16) > a { color: #463699; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(17) > a { color: #2DCEE3; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(18) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(19) > a { color: #19BCBF; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(20) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(21) > a { color: #01a9ac; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(22) > a { color: #463699; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(23) > a { color: #2DCEE3; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(24) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(25) > a { color: #19BCBF; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(26) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(27) > a { color: #01a9ac; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(28) > a { color: #463699; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(29) > a { color: #2DCEE3; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(30) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(31) > a { color: #19BCBF; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(32) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(33) > a { color: #01a9ac; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(34) > a { color: #463699; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(35) > a { color: #2DCEE3; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(36) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(37) > a { color: #19BCBF; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(38) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(39) > a { color: #01a9ac; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(40) > a { color: #463699; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(41) > a { color: #2DCEE3; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(42) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(43) > a { color: #19BCBF; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(44) > a { color: #FF9764; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(45) > a { color: #01a9ac; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(46) > a { color: #463699; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(47) > a { color: #2DCEE3; } body.layout-1 .pcoded-navbar.icon-colored .sidemenu > li:nth-child(48) > a { color: #FF9764; } /* ====== [ Menu icon end ] ======== */ /* ====== [ Header color start ] ======== */ .theme-horizontal ~ .pcoded-header { box-shadow: 0 1px 20px 0 rgba(63, 77, 103, 0.15); } @media only screen and (max-width: 991px) { .theme-horizontal ~ .pcoded-header { background: #39465C; } .theme-horizontal ~ .pcoded-header .horizontal-dasktop { display: none; } .theme-horizontal ~ .pcoded-header .horizontal-mobile { display: inline-block; } } @media only screen and (max-width: 992px) { .theme-horizontal-dis ~ .pcoded-header .horizontal-dasktop { display: none; } .theme-horizontal-dis ~ .pcoded-header .horizontal-mobile { display: inline-block; } } @media only screen and (max-width: 991px) { .theme-horizontal-dis ~ .pcoded-header .dropdown .dropdown-menu.dropdown-menu-right { right: 0; left: auto; } } @media only screen and (max-width: 575px) { .theme-horizontal-dis ~ .pcoded-header .dropdown .dropdown-menu.dropdown-menu-right { right: 0; left: 0; } } .pcoded-header[class*=header-] { box-shadow: 0 3px 10px 0 rgba(65, 72, 78, 0.02); } @media only screen and (min-width: 992px) { .pcoded-header[class*=header-] .collapse:not(.show) { background: inherit; } .pcoded-header[class*=header-] .page-header .breadcrumb-item + .breadcrumb-item::before, .pcoded-header[class*=header-] .page-header .page-header-title + .breadcrumb > .breadcrumb-item a, .pcoded-header[class*=header-] .page-header h5 { color: #fff; } } .pcoded-header.header-blue { background: linear-gradient(-45deg, #19BCBF, #149698); color: rgba(255, 255, 255, 0.8); } .pcoded-header.header-blue .profile-notification li > a { color: #686c71; } .pcoded-header.header-blue .profile-notification li.active, .pcoded-header.header-blue .profile-notification li:active, .pcoded-header.header-blue .profile-notification li:focus, .pcoded-header.header-blue .profile-notification li:hover { background: rgba(25, 188, 191, 0.1); } .pcoded-header.header-blue .profile-notification li.active > a, .pcoded-header.header-blue .profile-notification li:active > a, .pcoded-header.header-blue .profile-notification li:focus > a, .pcoded-header.header-blue .profile-notification li:hover > a { background: transparent; } .pcoded-header.header-blue .dropdown-menu { color: #686c71; } .pcoded-header.header-blue .dropdown-menu a { color: #686c71; } .pcoded-header.header-blue .dropdown-menu > li > a { color: #686c71; } .pcoded-header.header-blue .dropdown-menu > li.active, .pcoded-header.header-blue .dropdown-menu > li:active, .pcoded-header.header-blue .dropdown-menu > li:focus, .pcoded-header.header-blue .dropdown-menu > li:hover { background: rgba(25, 188, 191, 0.1); color: #686c71; } .pcoded-header.header-blue .dropdown-menu > li.active > a, .pcoded-header.header-blue .dropdown-menu > li:active > a, .pcoded-header.header-blue .dropdown-menu > li:focus > a, .pcoded-header.header-blue .dropdown-menu > li:hover > a { background: transparent; } .pcoded-header.header-blue .input-group .input-group-text, .pcoded-header.header-blue a, .pcoded-header.header-blue dropdown-toggle { color: rgba(255, 255, 255, 0.8); } .pcoded-header.header-blue .input-group .input-group-text:hover, .pcoded-header.header-blue a:hover, .pcoded-header.header-blue dropdown-toggle:hover { color: #fff; } @media only screen and (max-width: 991px) { .pcoded-header.header-blue .input-group .input-group-text, .pcoded-header.header-blue a, .pcoded-header.header-blue dropdown-toggle { color: #39465C; } .pcoded-header.header-blue .input-group .input-group-text:hover, .pcoded-header.header-blue a:hover, .pcoded-header.header-blue dropdown-toggle:hover { color: #252e3d; } } .pcoded-header.header-blue .main-search .search-close > .input-group-text { color: #19BCBF; } .pcoded-header.header-blue .main-search.open .input-group { background: #eff3f6; } .pcoded-header.header-blue .main-search.open .input-group .search-btn { background: #19BCBF; border-color: #19BCBF; } .pcoded-header.header-blue .main-search.open .input-group .search-btn .input-group-text { color: #fff; } .pcoded-header.header-blue .dropdown .notification .noti-head a { color: #fff; } .pcoded-header.header-blue .dropdown .notification .noti-body li.notification:hover { background: rgba(25, 188, 191, 0.1); } .pcoded-header.header-blue .dropdown .profile-notification .pro-head { color: #fff; background: #19BCBF; } .pcoded-header.header-blue .dropdown .profile-notification .pro-head .dud-logout { color: #fff; } .pcoded-header.header-blue .b-bg { background: #fff; color: #19BCBF; } .pcoded-header.header-red { background: linear-gradient(-45deg, #b31d1d, #ff0000); color: rgba(255, 255, 255, 0.8); } .pcoded-header.header-red .profile-notification li > a { color: #686c71; } .pcoded-header.header-red .profile-notification li.active, .pcoded-header.header-red .profile-notification li:active, .pcoded-header.header-red .profile-notification li:focus, .pcoded-header.header-red .profile-notification li:hover { background: rgba(179, 29, 29, 0.1); } .pcoded-header.header-red .profile-notification li.active > a, .pcoded-header.header-red .profile-notification li:active > a, .pcoded-header.header-red .profile-notification li:focus > a, .pcoded-header.header-red .profile-notification li:hover > a { background: transparent; } .pcoded-header.header-red .dropdown-menu { color: #686c71; } .pcoded-header.header-red .dropdown-menu a { color: #686c71; } .pcoded-header.header-red .dropdown-menu > li > a { color: #686c71; } .pcoded-header.header-red .dropdown-menu > li.active, .pcoded-header.header-red .dropdown-menu > li:active, .pcoded-header.header-red .dropdown-menu > li:focus, .pcoded-header.header-red .dropdown-menu > li:hover { background: rgba(179, 29, 29, 0.1); color: #686c71; } .pcoded-header.header-red .dropdown-menu > li.active > a, .pcoded-header.header-red .dropdown-menu > li:active > a, .pcoded-header.header-red .dropdown-menu > li:focus > a, .pcoded-header.header-red .dropdown-menu > li:hover > a { background: transparent; } .pcoded-header.header-red .input-group .input-group-text, .pcoded-header.header-red a, .pcoded-header.header-red dropdown-toggle { color: rgba(255, 255, 255, 0.8); } .pcoded-header.header-red .input-group .input-group-text:hover, .pcoded-header.header-red a:hover, .pcoded-header.header-red dropdown-toggle:hover { color: #fff; } @media only screen and (max-width: 991px) { .pcoded-header.header-red .input-group .input-group-text, .pcoded-header.header-red a, .pcoded-header.header-red dropdown-toggle { color: #39465C; } .pcoded-header.header-red .input-group .input-group-text:hover, .pcoded-header.header-red a:hover, .pcoded-header.header-red dropdown-toggle:hover { color: #252e3d; } } .pcoded-header.header-red .main-search .search-close > .input-group-text { color: #b31d1d; } .pcoded-header.header-red .main-search.open .input-group { background: #eff3f6; } .pcoded-header.header-red .main-search.open .input-group .search-btn { background: #b31d1d; border-color: #b31d1d; } .pcoded-header.header-red .main-search.open .input-group .search-btn .input-group-text { color: #fff; } .pcoded-header.header-red .dropdown .notification .noti-head a { color: #fff; } .pcoded-header.header-red .dropdown .notification .noti-body li.notification:hover { background: rgba(179, 29, 29, 0.1); } .pcoded-header.header-red .dropdown .profile-notification .pro-head { color: #fff; background: #b31d1d; } .pcoded-header.header-red .dropdown .profile-notification .pro-head .dud-logout { color: #fff; } .pcoded-header.header-red .b-bg { background: #fff; color: #b31d1d; } .pcoded-header.header-purple { background: linear-gradient(-45deg, #463699, #7661e6); color: rgba(255, 255, 255, 0.8); } .pcoded-header.header-purple .profile-notification li > a { color: #686c71; } .pcoded-header.header-purple .profile-notification li.active, .pcoded-header.header-purple .profile-notification li:active, .pcoded-header.header-purple .profile-notification li:focus, .pcoded-header.header-purple .profile-notification li:hover { background: rgba(70, 54, 153, 0.1); } .pcoded-header.header-purple .profile-notification li.active > a, .pcoded-header.header-purple .profile-notification li:active > a, .pcoded-header.header-purple .profile-notification li:focus > a, .pcoded-header.header-purple .profile-notification li:hover > a { background: transparent; } .pcoded-header.header-purple .dropdown-menu { color: #686c71; } .pcoded-header.header-purple .dropdown-menu a { color: #686c71; } .pcoded-header.header-purple .dropdown-menu > li > a { color: #686c71; } .pcoded-header.header-purple .dropdown-menu > li.active, .pcoded-header.header-purple .dropdown-menu > li:active, .pcoded-header.header-purple .dropdown-menu > li:focus, .pcoded-header.header-purple .dropdown-menu > li:hover { background: rgba(70, 54, 153, 0.1); color: #686c71; } .pcoded-header.header-purple .dropdown-menu > li.active > a, .pcoded-header.header-purple .dropdown-menu > li:active > a, .pcoded-header.header-purple .dropdown-menu > li:focus > a, .pcoded-header.header-purple .dropdown-menu > li:hover > a { background: transparent; } .pcoded-header.header-purple .input-group .input-group-text, .pcoded-header.header-purple a, .pcoded-header.header-purple dropdown-toggle { color: rgba(255, 255, 255, 0.8); } .pcoded-header.header-purple .input-group .input-group-text:hover, .pcoded-header.header-purple a:hover, .pcoded-header.header-purple dropdown-toggle:hover { color: #fff; } @media only screen and (max-width: 991px) { .pcoded-header.header-purple .input-group .input-group-text, .pcoded-header.header-purple a, .pcoded-header.header-purple dropdown-toggle { color: #39465C; } .pcoded-header.header-purple .input-group .input-group-text:hover, .pcoded-header.header-purple a:hover, .pcoded-header.header-purple dropdown-toggle:hover { color: #252e3d; } } .pcoded-header.header-purple .main-search .search-close > .input-group-text { color: #463699; } .pcoded-header.header-purple .main-search.open .input-group { background: #eff3f6; } .pcoded-header.header-purple .main-search.open .input-group .search-btn { background: #463699; border-color: #463699; } .pcoded-header.header-purple .main-search.open .input-group .search-btn .input-group-text { color: #fff; } .pcoded-header.header-purple .dropdown .notification .noti-head a { color: #fff; } .pcoded-header.header-purple .dropdown .notification .noti-body li.notification:hover { background: rgba(70, 54, 153, 0.1); } .pcoded-header.header-purple .dropdown .profile-notification .pro-head { color: #fff; background: #463699; } .pcoded-header.header-purple .dropdown .profile-notification .pro-head .dud-logout { color: #fff; } .pcoded-header.header-purple .b-bg { background: #fff; color: #463699; } .pcoded-header.header-info { background: linear-gradient(-45deg, #2DCEE3, #2DCEE3); color: rgba(255, 255, 255, 0.8); } .pcoded-header.header-info .profile-notification li > a { color: #686c71; } .pcoded-header.header-info .profile-notification li.active, .pcoded-header.header-info .profile-notification li:active, .pcoded-header.header-info .profile-notification li:focus, .pcoded-header.header-info .profile-notification li:hover { background: rgba(45, 206, 227, 0.1); } .pcoded-header.header-info .profile-notification li.active > a, .pcoded-header.header-info .profile-notification li:active > a, .pcoded-header.header-info .profile-notification li:focus > a, .pcoded-header.header-info .profile-notification li:hover > a { background: transparent; } .pcoded-header.header-info .dropdown-menu { color: #686c71; } .pcoded-header.header-info .dropdown-menu a { color: #686c71; } .pcoded-header.header-info .dropdown-menu > li > a { color: #686c71; } .pcoded-header.header-info .dropdown-menu > li.active, .pcoded-header.header-info .dropdown-menu > li:active, .pcoded-header.header-info .dropdown-menu > li:focus, .pcoded-header.header-info .dropdown-menu > li:hover { background: rgba(45, 206, 227, 0.1); color: #686c71; } .pcoded-header.header-info .dropdown-menu > li.active > a, .pcoded-header.header-info .dropdown-menu > li:active > a, .pcoded-header.header-info .dropdown-menu > li:focus > a, .pcoded-header.header-info .dropdown-menu > li:hover > a { background: transparent; } .pcoded-header.header-info .input-group .input-group-text, .pcoded-header.header-info a, .pcoded-header.header-info dropdown-toggle { color: rgba(255, 255, 255, 0.8); } .pcoded-header.header-info .input-group .input-group-text:hover, .pcoded-header.header-info a:hover, .pcoded-header.header-info dropdown-toggle:hover { color: #fff; } @media only screen and (max-width: 991px) { .pcoded-header.header-info .input-group .input-group-text, .pcoded-header.header-info a, .pcoded-header.header-info dropdown-toggle { color: #39465C; } .pcoded-header.header-info .input-group .input-group-text:hover, .pcoded-header.header-info a:hover, .pcoded-header.header-info dropdown-toggle:hover { color: #252e3d; } } .pcoded-header.header-info .main-search .search-close > .input-group-text { color: #2DCEE3; } .pcoded-header.header-info .main-search.open .input-group { background: #eff3f6; } .pcoded-header.header-info .main-search.open .input-group .search-btn { background: #2DCEE3; border-color: #2DCEE3; } .pcoded-header.header-info .main-search.open .input-group .search-btn .input-group-text { color: #fff; } .pcoded-header.header-info .dropdown .notification .noti-head a { color: #fff; } .pcoded-header.header-info .dropdown .notification .noti-body li.notification:hover { background: rgba(45, 206, 227, 0.1); } .pcoded-header.header-info .dropdown .profile-notification .pro-head { color: #fff; background: #2DCEE3; } .pcoded-header.header-info .dropdown .profile-notification .pro-head .dud-logout { color: #fff; } .pcoded-header.header-info .b-bg { background: #fff; color: #2DCEE3; } .pcoded-header.header-dark { background: linear-gradient(-45deg, #39465C, #37383a); color: rgba(255, 255, 255, 0.8); } .pcoded-header.header-dark .profile-notification li > a { color: #686c71; } .pcoded-header.header-dark .profile-notification li.active, .pcoded-header.header-dark .profile-notification li:active, .pcoded-header.header-dark .profile-notification li:focus, .pcoded-header.header-dark .profile-notification li:hover { background: rgba(57, 70, 92, 0.1); } .pcoded-header.header-dark .profile-notification li.active > a, .pcoded-header.header-dark .profile-notification li:active > a, .pcoded-header.header-dark .profile-notification li:focus > a, .pcoded-header.header-dark .profile-notification li:hover > a { background: transparent; } .pcoded-header.header-dark .dropdown-menu { color: #686c71; } .pcoded-header.header-dark .dropdown-menu a { color: #686c71; } .pcoded-header.header-dark .dropdown-menu > li > a { color: #686c71; } .pcoded-header.header-dark .dropdown-menu > li.active, .pcoded-header.header-dark .dropdown-menu > li:active, .pcoded-header.header-dark .dropdown-menu > li:focus, .pcoded-header.header-dark .dropdown-menu > li:hover { background: rgba(57, 70, 92, 0.1); color: #686c71; } .pcoded-header.header-dark .dropdown-menu > li.active > a, .pcoded-header.header-dark .dropdown-menu > li:active > a, .pcoded-header.header-dark .dropdown-menu > li:focus > a, .pcoded-header.header-dark .dropdown-menu > li:hover > a { background: transparent; } .pcoded-header.header-dark .input-group .input-group-text, .pcoded-header.header-dark a, .pcoded-header.header-dark dropdown-toggle { color: rgba(255, 255, 255, 0.8); } .pcoded-header.header-dark .input-group .input-group-text:hover, .pcoded-header.header-dark a:hover, .pcoded-header.header-dark dropdown-toggle:hover { color: #fff; } @media only screen and (max-width: 991px) { .pcoded-header.header-dark .input-group .input-group-text, .pcoded-header.header-dark a, .pcoded-header.header-dark dropdown-toggle { color: #39465C; } .pcoded-header.header-dark .input-group .input-group-text:hover, .pcoded-header.header-dark a:hover, .pcoded-header.header-dark dropdown-toggle:hover { color: #252e3d; } } .pcoded-header.header-dark .main-search .search-close > .input-group-text { color: #39465C; } .pcoded-header.header-dark .main-search.open .input-group { background: #eff3f6; } .pcoded-header.header-dark .main-search.open .input-group .search-btn { background: #39465C; border-color: #39465C; } .pcoded-header.header-dark .main-search.open .input-group .search-btn .input-group-text { color: #fff; } .pcoded-header.header-dark .dropdown .notification .noti-head a { color: #fff; } .pcoded-header.header-dark .dropdown .notification .noti-body li.notification:hover { background: rgba(57, 70, 92, 0.1); } .pcoded-header.header-dark .dropdown .profile-notification .pro-head { color: #fff; background: #39465C; } .pcoded-header.header-dark .dropdown .profile-notification .pro-head .dud-logout { color: #fff; } .pcoded-header.header-dark .b-bg { background: #fff; color: #39465C; } /* ====== [ Header color end ] ======== */ /* ====== [ Brand color start ] ======== */ .pcoded-navbar[class*=brand-]:not(.brand-default) .mobile-menu span, .pcoded-navbar[class*=brand-]:not(.brand-default) .mobile-menu span:after, .pcoded-navbar[class*=brand-]:not(.brand-default) .mobile-menu span:before { background: #fff; } .pcoded-navbar[class*=brand-]:not(.brand-default) .mobile-menu.on span { background: transparent; } .pcoded-navbar[class*=brand-]:not(.brand-default) .b-bg { background: transparent; color: #fff; } .pcoded-navbar.brand-blue .header-logo, .pcoded-navbar[class*=navbar-].brand-blue .header-logo { background: linear-gradient(-45deg, #19BCBF, #149698); } .pcoded-navbar.brand-blue .header-logo .b-bg, .pcoded-navbar[class*=navbar-].brand-blue .header-logo .b-bg { background: transparent; color: #fff; } .pcoded-navbar.brand-red .header-logo, .pcoded-navbar[class*=navbar-].brand-red .header-logo { background: linear-gradient(-45deg, #b31d1d, #ff0000); } .pcoded-navbar.brand-red .header-logo .b-bg, .pcoded-navbar[class*=navbar-].brand-red .header-logo .b-bg { background: transparent; color: #fff; } .pcoded-navbar.brand-purple .header-logo, .pcoded-navbar[class*=navbar-].brand-purple .header-logo { background: linear-gradient(-45deg, #463699, #7661e6); } .pcoded-navbar.brand-purple .header-logo .b-bg, .pcoded-navbar[class*=navbar-].brand-purple .header-logo .b-bg { background: transparent; color: #fff; } .pcoded-navbar.brand-info .header-logo, .pcoded-navbar[class*=navbar-].brand-info .header-logo { background: linear-gradient(-45deg, #2DCEE3, #2DCEE3); } .pcoded-navbar.brand-info .header-logo .b-bg, .pcoded-navbar[class*=navbar-].brand-info .header-logo .b-bg { background: transparent; color: #fff; } .pcoded-navbar.brand-dark .header-logo, .pcoded-navbar[class*=navbar-].brand-dark .header-logo { background: linear-gradient(-45deg, #39465C, #37383a); } .pcoded-navbar.brand-dark .header-logo .b-bg, .pcoded-navbar[class*=navbar-].brand-dark .header-logo .b-bg { background: transparent; color: #fff; } .pcoded-navbar.brand-default .header-logo, .pcoded-navbar[class*=navbar-].brand-default .header-logo { background: #39465C; } /* ====== [ Brand color end ] ======== */ /* ====== [ Menu color start ] ======== */ .pcoded-navbar.navbar-blue { background: #19BCBF; } .pcoded-navbar.navbar-blue .mobile-menu span { background-color: #fff; } .pcoded-navbar.navbar-blue .mobile-menu span:after, .pcoded-navbar.navbar-blue .mobile-menu span:before { background-color: #fff; } .pcoded-navbar.navbar-blue .mobile-menu.on span { background-color: transparent; } .pcoded-navbar.navbar-blue .header-logo .b-bg { background: transparent; } .pcoded-navbar.navbar-blue .header-logo .b-bg i { color: #fff; } .pcoded-navbar.navbar-blue .pcoded-submenu { background: transparent; } .pcoded-navbar.navbar-blue .pcoded-menu-caption { color: #fff; } .pcoded-navbar.navbar-blue .pcoded-inner-navbar li a { color: #fff; } .pcoded-navbar.navbar-blue .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-blue .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-blue .pcoded-inner-navbar li:hover > a { color: #fff; } .pcoded-navbar.navbar-blue .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-blue .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-blue .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #fff; } .pcoded-navbar.navbar-blue .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-blue .pcoded-inner-navbar > li.pcoded-trigger:after { background: rgba(255, 255, 255, 0.25); } .pcoded-navbar.navbar-blue .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-blue .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; } .pcoded-navbar.navbar-blue.theme-horizontal .sidenav-horizontal-next, .pcoded-navbar.navbar-blue.theme-horizontal .sidenav-horizontal-prev { background: #19BCBF; color: rgba(255, 255, 255, 0.8); } .pcoded-navbar.navbar-blue.theme-horizontal .sidenav-horizontal-next:hover, .pcoded-navbar.navbar-blue.theme-horizontal .sidenav-horizontal-prev:hover { color: #fff; } .pcoded-navbar.navbar-blue.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-blue.theme-horizontal .sidenav-horizontal:before { background: #19BCBF; } .pcoded-navbar.navbar-blue.theme-horizontal .pcoded-inner-navbar > li > a { background: transparent; } .pcoded-navbar.navbar-blue.theme-horizontal .pcoded-inner-navbar > li:after { background: rgba(255, 255, 255, 0.7); } .pcoded-navbar.navbar-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before { color: #19BCBF; } .pcoded-navbar.navbar-red { background: #FF9764; } .pcoded-navbar.navbar-red .mobile-menu span { background-color: #fff; } .pcoded-navbar.navbar-red .mobile-menu span:after, .pcoded-navbar.navbar-red .mobile-menu span:before { background-color: #fff; } .pcoded-navbar.navbar-red .mobile-menu.on span { background-color: transparent; } .pcoded-navbar.navbar-red .header-logo .b-bg { background: transparent; } .pcoded-navbar.navbar-red .header-logo .b-bg i { color: #fff; } .pcoded-navbar.navbar-red .pcoded-submenu { background: transparent; } .pcoded-navbar.navbar-red .pcoded-menu-caption { color: #fff; } .pcoded-navbar.navbar-red .pcoded-inner-navbar li a { color: #fff; } .pcoded-navbar.navbar-red .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-red .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-red .pcoded-inner-navbar li:hover > a { color: #fff; } .pcoded-navbar.navbar-red .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-red .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-red .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #fff; } .pcoded-navbar.navbar-red .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-red .pcoded-inner-navbar > li.pcoded-trigger:after { background: rgba(255, 255, 255, 0.25); } .pcoded-navbar.navbar-red .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-red .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; } .pcoded-navbar.navbar-red.theme-horizontal .sidenav-horizontal-next, .pcoded-navbar.navbar-red.theme-horizontal .sidenav-horizontal-prev { background: #FF9764; color: rgba(255, 255, 255, 0.8); } .pcoded-navbar.navbar-red.theme-horizontal .sidenav-horizontal-next:hover, .pcoded-navbar.navbar-red.theme-horizontal .sidenav-horizontal-prev:hover { color: #fff; } .pcoded-navbar.navbar-red.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-red.theme-horizontal .sidenav-horizontal:before { background: #FF9764; } .pcoded-navbar.navbar-red.theme-horizontal .pcoded-inner-navbar > li > a { background: transparent; } .pcoded-navbar.navbar-red.theme-horizontal .pcoded-inner-navbar > li:after { background: rgba(255, 255, 255, 0.7); } .pcoded-navbar.navbar-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before { color: #FF9764; } .pcoded-navbar.navbar-purple { background: #463699; } .pcoded-navbar.navbar-purple .mobile-menu span { background-color: #fff; } .pcoded-navbar.navbar-purple .mobile-menu span:after, .pcoded-navbar.navbar-purple .mobile-menu span:before { background-color: #fff; } .pcoded-navbar.navbar-purple .mobile-menu.on span { background-color: transparent; } .pcoded-navbar.navbar-purple .header-logo .b-bg { background: transparent; } .pcoded-navbar.navbar-purple .header-logo .b-bg i { color: #fff; } .pcoded-navbar.navbar-purple .pcoded-submenu { background: transparent; } .pcoded-navbar.navbar-purple .pcoded-menu-caption { color: #fff; } .pcoded-navbar.navbar-purple .pcoded-inner-navbar li a { color: #fff; } .pcoded-navbar.navbar-purple .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-purple .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-purple .pcoded-inner-navbar li:hover > a { color: #fff; } .pcoded-navbar.navbar-purple .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-purple .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-purple .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #fff; } .pcoded-navbar.navbar-purple .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-purple .pcoded-inner-navbar > li.pcoded-trigger:after { background: rgba(255, 255, 255, 0.25); } .pcoded-navbar.navbar-purple .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-purple .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; } .pcoded-navbar.navbar-purple.theme-horizontal .sidenav-horizontal-next, .pcoded-navbar.navbar-purple.theme-horizontal .sidenav-horizontal-prev { background: #463699; color: rgba(255, 255, 255, 0.8); } .pcoded-navbar.navbar-purple.theme-horizontal .sidenav-horizontal-next:hover, .pcoded-navbar.navbar-purple.theme-horizontal .sidenav-horizontal-prev:hover { color: #fff; } .pcoded-navbar.navbar-purple.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-purple.theme-horizontal .sidenav-horizontal:before { background: #463699; } .pcoded-navbar.navbar-purple.theme-horizontal .pcoded-inner-navbar > li > a { background: transparent; } .pcoded-navbar.navbar-purple.theme-horizontal .pcoded-inner-navbar > li:after { background: rgba(255, 255, 255, 0.7); } .pcoded-navbar.navbar-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before { color: #463699; } .pcoded-navbar.navbar-info { background: #2DCEE3; } .pcoded-navbar.navbar-info .mobile-menu span { background-color: #fff; } .pcoded-navbar.navbar-info .mobile-menu span:after, .pcoded-navbar.navbar-info .mobile-menu span:before { background-color: #fff; } .pcoded-navbar.navbar-info .mobile-menu.on span { background-color: transparent; } .pcoded-navbar.navbar-info .header-logo .b-bg { background: transparent; } .pcoded-navbar.navbar-info .header-logo .b-bg i { color: #fff; } .pcoded-navbar.navbar-info .pcoded-submenu { background: transparent; } .pcoded-navbar.navbar-info .pcoded-menu-caption { color: #fff; } .pcoded-navbar.navbar-info .pcoded-inner-navbar li a { color: #fff; } .pcoded-navbar.navbar-info .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-info .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-info .pcoded-inner-navbar li:hover > a { color: #fff; } .pcoded-navbar.navbar-info .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-info .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-info .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #fff; } .pcoded-navbar.navbar-info .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-info .pcoded-inner-navbar > li.pcoded-trigger:after { background: rgba(255, 255, 255, 0.25); } .pcoded-navbar.navbar-info .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-info .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; } .pcoded-navbar.navbar-info.theme-horizontal .sidenav-horizontal-next, .pcoded-navbar.navbar-info.theme-horizontal .sidenav-horizontal-prev { background: #2DCEE3; color: rgba(255, 255, 255, 0.8); } .pcoded-navbar.navbar-info.theme-horizontal .sidenav-horizontal-next:hover, .pcoded-navbar.navbar-info.theme-horizontal .sidenav-horizontal-prev:hover { color: #fff; } .pcoded-navbar.navbar-info.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-info.theme-horizontal .sidenav-horizontal:before { background: #2DCEE3; } .pcoded-navbar.navbar-info.theme-horizontal .pcoded-inner-navbar > li > a { background: transparent; } .pcoded-navbar.navbar-info.theme-horizontal .pcoded-inner-navbar > li:after { background: rgba(255, 255, 255, 0.7); } .pcoded-navbar.navbar-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before { color: #2DCEE3; } .pcoded-navbar.navbar-dark { background: #39465C; } .pcoded-navbar.navbar-dark .mobile-menu span { background-color: #fff; } .pcoded-navbar.navbar-dark .mobile-menu span:after, .pcoded-navbar.navbar-dark .mobile-menu span:before { background-color: #fff; } .pcoded-navbar.navbar-dark .mobile-menu.on span { background-color: transparent; } .pcoded-navbar.navbar-dark .header-logo .b-bg { background: transparent; } .pcoded-navbar.navbar-dark .header-logo .b-bg i { color: #fff; } .pcoded-navbar.navbar-dark .pcoded-submenu { background: transparent; } .pcoded-navbar.navbar-dark .pcoded-menu-caption { color: #fff; } .pcoded-navbar.navbar-dark .pcoded-inner-navbar li a { color: #fff; } .pcoded-navbar.navbar-dark .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-dark .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-dark .pcoded-inner-navbar li:hover > a { color: #fff; } .pcoded-navbar.navbar-dark .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-dark .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-dark .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #fff; } .pcoded-navbar.navbar-dark .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-dark .pcoded-inner-navbar > li.pcoded-trigger:after { background: rgba(255, 255, 255, 0.25); } .pcoded-navbar.navbar-dark .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-dark .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; } .pcoded-navbar.navbar-dark.theme-horizontal .sidenav-horizontal-next, .pcoded-navbar.navbar-dark.theme-horizontal .sidenav-horizontal-prev { background: #39465C; color: rgba(255, 255, 255, 0.8); } .pcoded-navbar.navbar-dark.theme-horizontal .sidenav-horizontal-next:hover, .pcoded-navbar.navbar-dark.theme-horizontal .sidenav-horizontal-prev:hover { color: #fff; } .pcoded-navbar.navbar-dark.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-dark.theme-horizontal .sidenav-horizontal:before { background: #39465C; } .pcoded-navbar.navbar-dark.theme-horizontal .pcoded-inner-navbar > li > a { background: transparent; } .pcoded-navbar.navbar-dark.theme-horizontal .pcoded-inner-navbar > li:after { background: rgba(255, 255, 255, 0.7); } .pcoded-navbar.navbar-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before { color: #39465C; } body.layout-1 .pcoded-navbar.navbar-blue .sidemenu { box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-blue .sidemenu li.active:after { background: #fff; } body.layout-1 .pcoded-navbar.navbar-blue .sidemenu li a { color: #fff; } body.layout-1 .pcoded-navbar.navbar-blue .sidemenu li a:after { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-red .sidemenu { box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-red .sidemenu li.active:after { background: #fff; } body.layout-1 .pcoded-navbar.navbar-red .sidemenu li a { color: #fff; } body.layout-1 .pcoded-navbar.navbar-red .sidemenu li a:after { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-purple .sidemenu { box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-purple .sidemenu li.active:after { background: #fff; } body.layout-1 .pcoded-navbar.navbar-purple .sidemenu li a { color: #fff; } body.layout-1 .pcoded-navbar.navbar-purple .sidemenu li a:after { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-info .sidemenu { box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-info .sidemenu li.active:after { background: #fff; } body.layout-1 .pcoded-navbar.navbar-info .sidemenu li a { color: #fff; } body.layout-1 .pcoded-navbar.navbar-info .sidemenu li a:after { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-dark .sidemenu { box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-dark .sidemenu li.active:after { background: #fff; } body.layout-1 .pcoded-navbar.navbar-dark .sidemenu li a { color: #fff; } body.layout-1 .pcoded-navbar.navbar-dark .sidemenu li a:after { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-blue .sidemenu li a { background: rgba(25, 188, 191, 0.15); } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-blue .sidemenu li.active a { background: #19BCBF; color: #fff; } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-blue .side-content { background: #19BCBF; } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-red .sidemenu li a { background: rgba(255, 151, 100, 0.15); } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-red .sidemenu li.active a { background: #FF9764; color: #fff; } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-red .side-content { background: #FF9764; } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-purple .sidemenu li a { background: rgba(70, 54, 153, 0.15); } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-purple .sidemenu li.active a { background: #463699; color: #fff; } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-purple .side-content { background: #463699; } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-info .sidemenu li a { background: rgba(45, 206, 227, 0.15); } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-info .sidemenu li.active a { background: #2DCEE3; color: #fff; } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-info .side-content { background: #2DCEE3; } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-dark .sidemenu li a { background: rgba(57, 70, 92, 0.15); } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-dark .sidemenu li.active a { background: #39465C; color: #fff; } body.layout-9 .pcoded-navbar.theme-horizontal.navbar-dark .side-content { background: #39465C; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-blue .navbar-nav .dropdown > a, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-blue .navbar-nav li > a { color: #fff; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-blue.brand-dark .header-logo, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-blue[class*=navbar-].brand-dark .header-logo { background: transparent; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-blue.brand-dark .header-logo .b-bg, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-blue[class*=navbar-].brand-dark .header-logo .b-bg { background: #fff; color: #19BCBF; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-red .navbar-nav .dropdown > a, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-red .navbar-nav li > a { color: #fff; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-red.brand-dark .header-logo, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-red[class*=navbar-].brand-dark .header-logo { background: transparent; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-red.brand-dark .header-logo .b-bg, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-red[class*=navbar-].brand-dark .header-logo .b-bg { background: #fff; color: #FF9764; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-purple .navbar-nav .dropdown > a, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-purple .navbar-nav li > a { color: #fff; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-purple.brand-dark .header-logo, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-purple[class*=navbar-].brand-dark .header-logo { background: transparent; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-purple.brand-dark .header-logo .b-bg, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-purple[class*=navbar-].brand-dark .header-logo .b-bg { background: #fff; color: #463699; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-info .navbar-nav .dropdown > a, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-info .navbar-nav li > a { color: #fff; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-info.brand-dark .header-logo, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-info[class*=navbar-].brand-dark .header-logo { background: transparent; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-info.brand-dark .header-logo .b-bg, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-info[class*=navbar-].brand-dark .header-logo .b-bg { background: #fff; color: #2DCEE3; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-dark .navbar-nav .dropdown > a, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-dark .navbar-nav li > a { color: #fff; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-dark.brand-dark .header-logo, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-dark[class*=navbar-].brand-dark .header-logo { background: transparent; } body.layout-8 .pcoded-navbar.theme-horizontal.navbar-dark.brand-dark .header-logo .b-bg, body.layout-8 .pcoded-navbar.theme-horizontal.navbar-dark[class*=navbar-].brand-dark .header-logo .b-bg { background: #fff; color: #39465C; } /* ====== [ Menu color end ] ======== */ /* ====== [ Menu gradient color start ] ======== */ .pcoded-navbar.navbar-gradient-blue { background: linear-gradient(-45deg, #19BCBF, #149698); } .pcoded-navbar.navbar-gradient-blue .mobile-menu span { background-color: #fff; } .pcoded-navbar.navbar-gradient-blue .mobile-menu span:after, .pcoded-navbar.navbar-gradient-blue .mobile-menu span:before { background-color: #fff; } .pcoded-navbar.navbar-gradient-blue .mobile-menu.on span { background-color: transparent; } .pcoded-navbar.navbar-gradient-blue .header-logo .b-bg { background: linear-gradient(-45deg, #19BCBF, #149698); } .pcoded-navbar.navbar-gradient-blue .header-logo .b-bg i { color: #fff; -webkit-text-fill-color: unset; } .pcoded-navbar.navbar-gradient-blue .pcoded-submenu { background: transparent; } .pcoded-navbar.navbar-gradient-blue .pcoded-menu-caption { color: #fff; } .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li a { color: #fff; } .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li:hover > a { color: #fff; } .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #fff; } .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar > li.pcoded-trigger:after { background: rgba(255, 255, 255, 0.25); } .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-gradient-blue .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; } .pcoded-navbar.navbar-gradient-blue.theme-horizontal .sidenav-horizontal-next, .pcoded-navbar.navbar-gradient-blue.theme-horizontal .sidenav-horizontal-prev { background: linear-gradient(-45deg, #19BCBF, #149698); color: rgba(255, 255, 255, 0.8); } .pcoded-navbar.navbar-gradient-blue.theme-horizontal .sidenav-horizontal-next:hover, .pcoded-navbar.navbar-gradient-blue.theme-horizontal .sidenav-horizontal-prev:hover { color: #fff; } .pcoded-navbar.navbar-gradient-blue.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-gradient-blue.theme-horizontal .sidenav-horizontal:before { background: linear-gradient(-45deg, #19BCBF, #149698); } .pcoded-navbar.navbar-gradient-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-gradient-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before { color: linear-gradient(-45deg, #19BCBF, #149698); } .pcoded-navbar.navbar-gradient-red { background: linear-gradient(-45deg, #FF425C, #e53b52); } .pcoded-navbar.navbar-gradient-red .mobile-menu span { background-color: #fff; } .pcoded-navbar.navbar-gradient-red .mobile-menu span:after, .pcoded-navbar.navbar-gradient-red .mobile-menu span:before { background-color: #fff; } .pcoded-navbar.navbar-gradient-red .mobile-menu.on span { background-color: transparent; } .pcoded-navbar.navbar-gradient-red .header-logo .b-bg { background: linear-gradient(-45deg, #FF425C, #e53b52); } .pcoded-navbar.navbar-gradient-red .header-logo .b-bg i { color: #fff; -webkit-text-fill-color: unset; } .pcoded-navbar.navbar-gradient-red .pcoded-submenu { background: transparent; } .pcoded-navbar.navbar-gradient-red .pcoded-menu-caption { color: #fff; } .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li a { color: #fff; } .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li:hover > a { color: #fff; } .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #fff; } .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar > li.pcoded-trigger:after { background: rgba(255, 255, 255, 0.25); } .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-gradient-red .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; } .pcoded-navbar.navbar-gradient-red.theme-horizontal .sidenav-horizontal-next, .pcoded-navbar.navbar-gradient-red.theme-horizontal .sidenav-horizontal-prev { background: linear-gradient(-45deg, #FF425C, #e53b52); color: rgba(255, 255, 255, 0.8); } .pcoded-navbar.navbar-gradient-red.theme-horizontal .sidenav-horizontal-next:hover, .pcoded-navbar.navbar-gradient-red.theme-horizontal .sidenav-horizontal-prev:hover { color: #fff; } .pcoded-navbar.navbar-gradient-red.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-gradient-red.theme-horizontal .sidenav-horizontal:before { background: linear-gradient(-45deg, #FF425C, #e53b52); } .pcoded-navbar.navbar-gradient-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-gradient-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before { color: linear-gradient(-45deg, #FF425C, #e53b52); } .pcoded-navbar.navbar-gradient-purple { background: linear-gradient(-45deg, #463699, #7661e6); } .pcoded-navbar.navbar-gradient-purple .mobile-menu span { background-color: #fff; } .pcoded-navbar.navbar-gradient-purple .mobile-menu span:after, .pcoded-navbar.navbar-gradient-purple .mobile-menu span:before { background-color: #fff; } .pcoded-navbar.navbar-gradient-purple .mobile-menu.on span { background-color: transparent; } .pcoded-navbar.navbar-gradient-purple .header-logo .b-bg { background: linear-gradient(-45deg, #463699, #7661e6); } .pcoded-navbar.navbar-gradient-purple .header-logo .b-bg i { color: #fff; -webkit-text-fill-color: unset; } .pcoded-navbar.navbar-gradient-purple .pcoded-submenu { background: transparent; } .pcoded-navbar.navbar-gradient-purple .pcoded-menu-caption { color: #fff; } .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li a { color: #fff; } .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li:hover > a { color: #fff; } .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #fff; } .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar > li.pcoded-trigger:after { background: rgba(255, 255, 255, 0.25); } .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-gradient-purple .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; } .pcoded-navbar.navbar-gradient-purple.theme-horizontal .sidenav-horizontal-next, .pcoded-navbar.navbar-gradient-purple.theme-horizontal .sidenav-horizontal-prev { background: linear-gradient(-45deg, #463699, #7661e6); color: rgba(255, 255, 255, 0.8); } .pcoded-navbar.navbar-gradient-purple.theme-horizontal .sidenav-horizontal-next:hover, .pcoded-navbar.navbar-gradient-purple.theme-horizontal .sidenav-horizontal-prev:hover { color: #fff; } .pcoded-navbar.navbar-gradient-purple.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-gradient-purple.theme-horizontal .sidenav-horizontal:before { background: linear-gradient(-45deg, #463699, #7661e6); } .pcoded-navbar.navbar-gradient-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-gradient-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before { color: linear-gradient(-45deg, #463699, #7661e6); } .pcoded-navbar.navbar-gradient-info { background: linear-gradient(-45deg, #2DCEE3, #24a4b5); } .pcoded-navbar.navbar-gradient-info .mobile-menu span { background-color: #fff; } .pcoded-navbar.navbar-gradient-info .mobile-menu span:after, .pcoded-navbar.navbar-gradient-info .mobile-menu span:before { background-color: #fff; } .pcoded-navbar.navbar-gradient-info .mobile-menu.on span { background-color: transparent; } .pcoded-navbar.navbar-gradient-info .header-logo .b-bg { background: linear-gradient(-45deg, #2DCEE3, #24a4b5); } .pcoded-navbar.navbar-gradient-info .header-logo .b-bg i { color: #fff; -webkit-text-fill-color: unset; } .pcoded-navbar.navbar-gradient-info .pcoded-submenu { background: transparent; } .pcoded-navbar.navbar-gradient-info .pcoded-menu-caption { color: #fff; } .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li a { color: #fff; } .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li:hover > a { color: #fff; } .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #fff; } .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar > li.pcoded-trigger:after { background: rgba(255, 255, 255, 0.25); } .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-gradient-info .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; } .pcoded-navbar.navbar-gradient-info.theme-horizontal .sidenav-horizontal-next, .pcoded-navbar.navbar-gradient-info.theme-horizontal .sidenav-horizontal-prev { background: linear-gradient(-45deg, #2DCEE3, #24a4b5); color: rgba(255, 255, 255, 0.8); } .pcoded-navbar.navbar-gradient-info.theme-horizontal .sidenav-horizontal-next:hover, .pcoded-navbar.navbar-gradient-info.theme-horizontal .sidenav-horizontal-prev:hover { color: #fff; } .pcoded-navbar.navbar-gradient-info.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-gradient-info.theme-horizontal .sidenav-horizontal:before { background: linear-gradient(-45deg, #2DCEE3, #24a4b5); } .pcoded-navbar.navbar-gradient-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-gradient-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before { color: linear-gradient(-45deg, #2DCEE3, #24a4b5); } .pcoded-navbar.navbar-gradient-dark { background: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103)); } .pcoded-navbar.navbar-gradient-dark .mobile-menu span { background-color: #fff; } .pcoded-navbar.navbar-gradient-dark .mobile-menu span:after, .pcoded-navbar.navbar-gradient-dark .mobile-menu span:before { background-color: #fff; } .pcoded-navbar.navbar-gradient-dark .mobile-menu.on span { background-color: transparent; } .pcoded-navbar.navbar-gradient-dark .header-logo .b-bg { background: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103)); } .pcoded-navbar.navbar-gradient-dark .header-logo .b-bg i { color: #fff; -webkit-text-fill-color: unset; } .pcoded-navbar.navbar-gradient-dark .pcoded-submenu { background: transparent; } .pcoded-navbar.navbar-gradient-dark .pcoded-menu-caption { color: #fff; } .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li a { color: #fff; } .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li.active > a, .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li:focus > a, .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li:hover > a { color: #fff; } .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #fff; } .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar > li.active:after, .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar > li.pcoded-trigger:after { background: rgba(255, 255, 255, 0.25); } .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar > li.active > a, .pcoded-navbar.navbar-gradient-dark .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; } .pcoded-navbar.navbar-gradient-dark.theme-horizontal .sidenav-horizontal-next, .pcoded-navbar.navbar-gradient-dark.theme-horizontal .sidenav-horizontal-prev { background: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103)); color: rgba(255, 255, 255, 0.8); } .pcoded-navbar.navbar-gradient-dark.theme-horizontal .sidenav-horizontal-next:hover, .pcoded-navbar.navbar-gradient-dark.theme-horizontal .sidenav-horizontal-prev:hover { color: #fff; } .pcoded-navbar.navbar-gradient-dark.theme-horizontal .sidenav-horizontal:after, .pcoded-navbar.navbar-gradient-dark.theme-horizontal .sidenav-horizontal:before { background: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103)); } .pcoded-navbar.navbar-gradient-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active:before, .pcoded-navbar.navbar-gradient-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger:before { color: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103)); } body.layout-1 .pcoded-navbar.navbar-gradient-blue .sidemenu { box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-gradient-blue .sidemenu li.active:after { background: #fff; } body.layout-1 .pcoded-navbar.navbar-gradient-blue .sidemenu li a { color: #fff; } body.layout-1 .pcoded-navbar.navbar-gradient-blue .sidemenu li a:after { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-gradient-red .sidemenu { box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-gradient-red .sidemenu li.active:after { background: #fff; } body.layout-1 .pcoded-navbar.navbar-gradient-red .sidemenu li a { color: #fff; } body.layout-1 .pcoded-navbar.navbar-gradient-red .sidemenu li a:after { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-gradient-purple .sidemenu { box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-gradient-purple .sidemenu li.active:after { background: #fff; } body.layout-1 .pcoded-navbar.navbar-gradient-purple .sidemenu li a { color: #fff; } body.layout-1 .pcoded-navbar.navbar-gradient-purple .sidemenu li a:after { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-gradient-info .sidemenu { box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-gradient-info .sidemenu li.active:after { background: #fff; } body.layout-1 .pcoded-navbar.navbar-gradient-info .sidemenu li a { color: #fff; } body.layout-1 .pcoded-navbar.navbar-gradient-info .sidemenu li a:after { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-gradient-dark .sidemenu { box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.3); } body.layout-1 .pcoded-navbar.navbar-gradient-dark .sidemenu li.active:after { background: #fff; } body.layout-1 .pcoded-navbar.navbar-gradient-dark .sidemenu li a { color: #fff; } body.layout-1 .pcoded-navbar.navbar-gradient-dark .sidemenu li a:after { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } /* ====== [ Menu gradient color end ] ======== */ /* ====== [ Active Color start ] ======== */ .pcoded-navbar[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before { color: #19BCBF; } .pcoded-navbar.active-blue[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before { color: #19BCBF; } .pcoded-navbar.active-blue .pcoded-inner-navbar li.active > a, .pcoded-navbar.active-blue .pcoded-inner-navbar li:focus > a, .pcoded-navbar.active-blue .pcoded-inner-navbar li:hover > a { color: #19BCBF; } .pcoded-navbar.active-blue .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.active-blue .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.active-blue .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #19BCBF; } .pcoded-navbar.active-blue .pcoded-inner-navbar > li.active:after, .pcoded-navbar.active-blue .pcoded-inner-navbar > li.pcoded-trigger:after { background-color: #19BCBF; } .pcoded-navbar.active-blue .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-blue .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(0, 0, 0, 0.08); color: #fff; } .pcoded-navbar.active-blue.menu-light .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-blue.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a { background: #f1f1f1; color: #111; } .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li:hover > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu:hover > a { background: transparent; } .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.active > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li:hover > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.active > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-blue.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li:hover > a { color: #19BCBF; } .pcoded-navbar[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before { color: #19BCBF; } .pcoded-navbar.active-red[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before { color: #FF9764; } .pcoded-navbar.active-red .pcoded-inner-navbar li.active > a, .pcoded-navbar.active-red .pcoded-inner-navbar li:focus > a, .pcoded-navbar.active-red .pcoded-inner-navbar li:hover > a { color: #FF9764; } .pcoded-navbar.active-red .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.active-red .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.active-red .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #FF9764; } .pcoded-navbar.active-red .pcoded-inner-navbar > li.active:after, .pcoded-navbar.active-red .pcoded-inner-navbar > li.pcoded-trigger:after { background-color: #FF9764; } .pcoded-navbar.active-red .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-red .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(0, 0, 0, 0.08); color: #fff; } .pcoded-navbar.active-red.menu-light .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-red.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a { background: #f1f1f1; color: #111; } .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li:hover > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu:hover > a { background: transparent; } .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.active > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li:hover > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.active > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-red.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li:hover > a { color: #FF9764; } .pcoded-navbar[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before { color: #19BCBF; } .pcoded-navbar.active-purple[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before { color: #463699; } .pcoded-navbar.active-purple .pcoded-inner-navbar li.active > a, .pcoded-navbar.active-purple .pcoded-inner-navbar li:focus > a, .pcoded-navbar.active-purple .pcoded-inner-navbar li:hover > a { color: #463699; } .pcoded-navbar.active-purple .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.active-purple .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.active-purple .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #463699; } .pcoded-navbar.active-purple .pcoded-inner-navbar > li.active:after, .pcoded-navbar.active-purple .pcoded-inner-navbar > li.pcoded-trigger:after { background-color: #463699; } .pcoded-navbar.active-purple .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-purple .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(0, 0, 0, 0.08); color: #fff; } .pcoded-navbar.active-purple.menu-light .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-purple.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a { background: #f1f1f1; color: #111; } .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li:hover > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu:hover > a { background: transparent; } .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.active > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li:hover > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.active > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-purple.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li:hover > a { color: #463699; } .pcoded-navbar[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before { color: #19BCBF; } .pcoded-navbar.active-info[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before { color: #2DCEE3; } .pcoded-navbar.active-info .pcoded-inner-navbar li.active > a, .pcoded-navbar.active-info .pcoded-inner-navbar li:focus > a, .pcoded-navbar.active-info .pcoded-inner-navbar li:hover > a { color: #2DCEE3; } .pcoded-navbar.active-info .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.active-info .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.active-info .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #2DCEE3; } .pcoded-navbar.active-info .pcoded-inner-navbar > li.active:after, .pcoded-navbar.active-info .pcoded-inner-navbar > li.pcoded-trigger:after { background-color: #2DCEE3; } .pcoded-navbar.active-info .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-info .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(0, 0, 0, 0.08); color: #fff; } .pcoded-navbar.active-info.menu-light .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-info.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a { background: #f1f1f1; color: #111; } .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li:hover > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu:hover > a { background: transparent; } .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.active > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li:hover > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.active > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-info.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li:hover > a { color: #2DCEE3; } .pcoded-navbar[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before { color: #19BCBF; } .pcoded-navbar.active-dark[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a:before { color: #39465C; } .pcoded-navbar.active-dark .pcoded-inner-navbar li.active > a, .pcoded-navbar.active-dark .pcoded-inner-navbar li:focus > a, .pcoded-navbar.active-dark .pcoded-inner-navbar li:hover > a { color: #39465C; } .pcoded-navbar.active-dark .pcoded-inner-navbar li .pcoded-submenu > li.active > a:before, .pcoded-navbar.active-dark .pcoded-inner-navbar li .pcoded-submenu > li:focus > a:before, .pcoded-navbar.active-dark .pcoded-inner-navbar li .pcoded-submenu > li:hover > a:before { background: #39465C; } .pcoded-navbar.active-dark .pcoded-inner-navbar > li.active:after, .pcoded-navbar.active-dark .pcoded-inner-navbar > li.pcoded-trigger:after { background-color: #39465C; } .pcoded-navbar.active-dark .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-dark .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(0, 0, 0, 0.08); color: #fff; } .pcoded-navbar.active-dark.menu-light .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-dark.menu-light .pcoded-inner-navbar > li.pcoded-trigger > a { background: #f1f1f1; color: #111; } .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.active > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-trigger > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li:hover > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.active > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu.pcoded-trigger > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu:hover > a { background: transparent; } .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.active > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li .pcoded-submenu > li:hover > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.active > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li.pcoded-trigger > a, .pcoded-navbar.active-dark.theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu > li:hover > a { color: #39465C; } body.layout-1 .pcoded-navbar.active-blue .sidemenu li.active { color: #19BCBF; } body.layout-1 .pcoded-navbar.active-blue .sidemenu li.active:after { background-color: #19BCBF; } body.layout-1 .pcoded-navbar.active-red .sidemenu li.active { color: #FF9764; } body.layout-1 .pcoded-navbar.active-red .sidemenu li.active:after { background-color: #FF9764; } body.layout-1 .pcoded-navbar.active-purple .sidemenu li.active { color: #463699; } body.layout-1 .pcoded-navbar.active-purple .sidemenu li.active:after { background-color: #463699; } body.layout-1 .pcoded-navbar.active-info .sidemenu li.active { color: #2DCEE3; } body.layout-1 .pcoded-navbar.active-info .sidemenu li.active:after { background-color: #2DCEE3; } body.layout-1 .pcoded-navbar.active-dark .sidemenu li.active { color: #39465C; } body.layout-1 .pcoded-navbar.active-dark .sidemenu li.active:after { background-color: #39465C; } /* ====== [ Active Color end ] ======== */ /* ====== [ menu fixed start ] ======== */ .pcoded-navbar.menupos-fixed { position: fixed; height: 100vh; min-height: 100vh; } .pcoded-navbar.menupos-fixed .scroll-div.navbar-content { height: calc(100% - 64px); min-height: calc(100% - 64px); } /* ====== [ menu fixed end ] ======== */ /* ====== [ Header Fixed start ] ======== */ .pcoded-header.headerpos-fixed { position: fixed; top: 0; } .pcoded-header.headerpos-fixed ~ .pcoded-main-container { padding-top: 64px; } @media only screen and (max-width: 991px) { .pcoded-header.headerpos-fixed ~ .pcoded-main-container { padding-top: 128px; } } /* ====== [Header Fixed end ] ======== */ /* ====== [ Dropdown icon start ] ======== */ .pcoded-navbar.drp-icon-style2 .pcoded-inner-navbar li.pcoded-hasmenu > a:after { content: "\e847"; } .pcoded-navbar.drp-icon-style3 .pcoded-inner-navbar li.pcoded-hasmenu > a:after { content: "\e8b1"; } .pcoded-navbar.drp-icon-style3 .pcoded-inner-navbar li.pcoded-hasmenu.pcoded-trigger > a:after { transform: rotate(45deg); } /* ====== [ Dropdown icon end ] =================== */ /* ====== [ Menu Item icon start ] ================ */ .pcoded-navbar[class*=menu-item-icon-style] .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu:after { background: rgba(169, 183, 208, 0.05); } .pcoded-navbar[class*=menu-item-icon-style] .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before { font-family: "feather"; font-style: normal; padding-right: 4px; font-size: 13px; position: absolute; left: 35px; top: 8px; opacity: 1; visibility: visible; background: transparent; } .pcoded-navbar[class*=menu-item-icon-style].theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu > .pcoded-submenu > li > a:before { left: 5px; } .pcoded-navbar[class*=menu-item-icon-style].theme-horizontal .pcoded-inner-navbar > li.pcoded-hasmenu > .pcoded-submenu > li > .pcoded-submenu > li > a:before { top: 12px; } .pcoded-navbar.menu-item-icon-style2 .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before { content: "\e897"; } .pcoded-navbar.menu-item-icon-style3 .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before { content: "\e83f"; } .pcoded-navbar.menu-item-icon-style4 .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before { content: "\e856"; } .pcoded-navbar.menu-item-icon-style5 .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before { content: "\e847"; } .pcoded-navbar.menu-item-icon-style6 .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before { content: "\e844"; } /* ====== [ Menu Item icon end ] ================== */ /* ====== [ Menu background images start ] ======== */ .pcoded-navbar[class*=navbar-image] { background-size: cover; background-repeat: no-repeat; background-position: center bottom; } .pcoded-navbar[class*=navbar-image] .header-logo, .pcoded-navbar[class*=navbar-image] .pcoded-submenu { background: transparent; } .pcoded-navbar[class*=navbar-image] .pcoded-inner-navbar > li.active > a, .pcoded-navbar[class*=navbar-image] .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(45, 56, 73, 0.4); } .pcoded-navbar[class*=navbar-image]:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.7); } .pcoded-navbar.navbar-image-1 { background-image: url("../images/nav-bg/navbar-img-1.jpg"); } .pcoded-navbar.navbar-image-2 { background-image: url("../images/nav-bg/navbar-img-2.jpg"); } .pcoded-navbar.navbar-image-3 { background-image: url("../images/nav-bg/navbar-img-3.jpg"); } .pcoded-navbar.navbar-image-4 { background-image: url("../images/nav-bg/navbar-img-4.jpg"); } .pcoded-navbar.navbar-image-5 { background-image: url("../images/nav-bg/navbar-img-5.jpg"); } /* ====== [ Menu background images end ] ========== */ /* ====== [ Menu background pattern start ] ======== */ .pcoded-navbar[class*=navbar-pattern] { background-size: auto; background-repeat: repeat; } .pcoded-navbar[class*=navbar-pattern] .header-logo, .pcoded-navbar[class*=navbar-pattern] .pcoded-submenu { background: transparent; } .pcoded-navbar[class*=navbar-pattern] .pcoded-inner-navbar > li.active > a, .pcoded-navbar[class*=navbar-pattern] .pcoded-inner-navbar > li.pcoded-trigger > a { background: rgba(45, 56, 73, 0.4); } .pcoded-navbar[class*=navbar-pattern]:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.1); } .pcoded-navbar.navbar-pattern-1 { background-image: url("../images/bg-images/1.jpg"); } .pcoded-navbar.navbar-pattern-2 { background-image: url("../images/bg-images/2.jpg"); } .pcoded-navbar.navbar-pattern-3 { background-image: url("../images/bg-images/3.jpg"); } .pcoded-navbar.navbar-pattern-4 { background-image: url("../images/bg-images/4.jpg"); } .pcoded-navbar.navbar-pattern-5 { background-image: url("../images/bg-images/5.jpg"); } .pcoded-navbar.navbar-pattern-6 { background-image: url("../images/bg-images/6.jpg"); } /* ====== [ Menu background pattern end ] ========== */ /* ====== [ Menu title color start ] ============== */ .pcoded-navbar.title-default .pcoded-inner-navbar .pcoded-menu-caption { color: #8090a5; } .pcoded-navbar.title-blue .pcoded-inner-navbar .pcoded-menu-caption { color: #19BCBF; } .pcoded-navbar.title-red .pcoded-inner-navbar .pcoded-menu-caption { color: #FF9764; } .pcoded-navbar.title-purple .pcoded-inner-navbar .pcoded-menu-caption { color: #463699; } .pcoded-navbar.title-info .pcoded-inner-navbar .pcoded-menu-caption { color: #2DCEE3; } .pcoded-navbar.title-dark .pcoded-inner-navbar .pcoded-menu-caption { color: #39465C; } /* ====== [ Menu title color end ] ================ */ /* ====== [ Hide Caption start ] ============== */ .pcoded-navbar.caption-hide .pcoded-menu-caption { display: none; } /* ====== [ Hide Caption end ] ================ */ /* ====== [ Hide Header start ] ============== */ .pcoded-navbar.header-hide ~ .pcoded-header { display: none; } .pcoded-navbar.header-hide ~ .pcoded-main-container { padding-top: 0; } /* ====== [ Hide Header end ] ================ */ /* ========================== Diffrent Layout Styles end ====================== */ /* temp SCSS for document */ .doc-img > a { position: relative; width: 130px; height: 80px; display: inline-block; background: #eff3f6; overflow: hidden; box-shadow: 0 0 0 1px #e2e5e8; } .doc-img > a span { width: 100%; position: absolute; } .doc-img > a span:after, .doc-img > a span:before { content: ""; height: 100%; position: absolute; } .doc-img > a span:before { width: 30%; left: 0; background: #39465C; } .doc-img > a span:after { width: 70%; right: 0; background: #eff3f6; } .doc-img > a > span:nth-child(1) { height: 20%; top: 0; } .doc-img > a > span:nth-child(1):after { background: #fff; } .doc-img > a > span:nth-child(2) { height: 80%; bottom: 0; } .doc-img > a.active { border-color: #19BCBF; } .doc-img > a.active:before { content: "\e83f"; top: -4px; font-size: 20px; position: absolute; left: 10px; font-family: "feather"; z-index: 1001; color: #19BCBF; transition: 0.3s ease-in-out; text-shadow: 0 3px 8px rgba(25, 188, 191, 0.9), 0 3px 8px rgba(0, 0, 0, 0.1); } .doc-img > a.active:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.65); } .doc-img > a[data-value=menu-light] span:before { background: #fff; } .doc-img > a[data-value=dark] span:after { background: #1c222d; } .doc-img.navbar-color > a[data-value=navbar-blue] > span:before { background: #19BCBF; } .doc-img.navbar-color > a[data-value=navbar-red] > span:before { background: #FF9764; } .doc-img.navbar-color > a[data-value=navbar-purple] > span:before { background: #463699; } .doc-img.navbar-color > a[data-value=navbar-info] > span:before { background: #2DCEE3; } .doc-img.navbar-color > a[data-value=navbar-dark] > span:before { background: #39465C; } .doc-img.header-color > a[data-value=header-blue] > span:nth-child(1):after { background: #19BCBF; } .doc-img.header-color > a[data-value=header-red] > span:nth-child(1):after { background: #b31d1d; } .doc-img.header-color > a[data-value=header-purple] > span:nth-child(1):after { background: #463699; } .doc-img.header-color > a[data-value=header-info] > span:nth-child(1):after { background: #2DCEE3; } .doc-img.header-color > a[data-value=header-dark] > span:nth-child(1):after { background: #39465C; } .doc-img.brand-color > a[data-value=brand-blue] > span:nth-child(1):before { background: #19BCBF; } .doc-img.brand-color > a[data-value=brand-red] > span:nth-child(1):before { background: #b31d1d; } .doc-img.brand-color > a[data-value=brand-purple] > span:nth-child(1):before { background: #463699; } .doc-img.brand-color > a[data-value=brand-info] > span:nth-child(1):before { background: #2DCEE3; } .doc-img.brand-color > a[data-value=brand-dark] > span:nth-child(1):before { background: #39465C; } .doc-img.active-color > a[data-value=active-default] { background: #19BCBF; } .doc-img.active-color > a[data-value=active-blue] { background: #19BCBF; } .doc-img.active-color > a[data-value=active-red] { background: #FF9764; } .doc-img.active-color > a[data-value=active-purple] { background: #463699; } .doc-img.active-color > a[data-value=active-info] { background: #2DCEE3; } .doc-img.active-color > a[data-value=active-dark] { background: #39465C; } .doc-img.title-color > a[data-value=title-default] { background: #fff; } .doc-img.title-color > a[data-value=title-blue] { background: #19BCBF; } .doc-img.title-color > a[data-value=title-red] { background: #FF9764; } .doc-img.title-color > a[data-value=title-purple] { background: #463699; } .doc-img.title-color > a[data-value=title-info] { background: #2DCEE3; } .doc-img.title-color > a[data-value=title-dark] { background: #39465C; } .doc-img.navbar-images > a { height: 130px; background-size: 37px; background-position: left top; } .doc-img.navbar-images > a span:before { background: transparent; } .doc-img.navbar-images > a[data-value=navbar-image-1] { background-image: url("../images/nav-bg/navbar-img-1.jpg"); } .doc-img.navbar-images > a[data-value=navbar-image-2] { background-image: url("../images/nav-bg/navbar-img-2.jpg"); } .doc-img.navbar-images > a[data-value=navbar-image-3] { background-image: url("../images/nav-bg/navbar-img-3.jpg"); } .doc-img.navbar-images > a[data-value=navbar-image-4] { background-image: url("../images/nav-bg/navbar-img-4.jpg"); } .doc-img.navbar-images > a[data-value=navbar-image-5] { background-image: url("../images/nav-bg/navbar-img-5.jpg"); } .doc-img.navbar-images > a[data-value=navbar-image-6] { background-image: url("../images/nav-bg/navbar-img-6.jpg"); } .doc-img.navbar-gradient-color > a[data-value=navbar-gradient-blue] > span:nth-child(2):before { background: linear-gradient(-45deg, #19BCBF, #149698); } .doc-img.navbar-gradient-color > a[data-value=navbar-gradient-red] > span:nth-child(2):before { background: linear-gradient(-45deg, #FF425C, #e53b52); } .doc-img.navbar-gradient-color > a[data-value=navbar-gradient-purple] > span:nth-child(2):before { background: linear-gradient(-45deg, #463699, #7661e6); } .doc-img.navbar-gradient-color > a[data-value=navbar-gradient-info] > span:nth-child(2):before { background: linear-gradient(-45deg, #2DCEE3, #24a4b5); } .doc-img.navbar-gradient-color > a[data-value=navbar-gradient-dark] > span:nth-child(2):before { background: linear-gradient(-45deg, rgb(36, 46, 62), rgb(58, 76, 103)); } .doc-img.navbar-pattern > a { background-size: auto; } .doc-img.navbar-pattern > a span { display: none; } .doc-img.navbar-pattern > a[data-value=navbar-pattern-1] { background-image: url("../images/bg-images/1.jpg"); } .doc-img.navbar-pattern > a[data-value=navbar-pattern-2] { background-image: url("../images/bg-images/2.jpg"); } .doc-img.navbar-pattern > a[data-value=navbar-pattern-3] { background-image: url("../images/bg-images/3.jpg"); } .doc-img.navbar-pattern > a[data-value=navbar-pattern-4] { background-image: url("../images/bg-images/4.jpg"); } .doc-img.navbar-pattern > a[data-value=navbar-pattern-5] { background-image: url("../images/bg-images/5.jpg"); } .doc-img.navbar-pattern > a[data-value=navbar-pattern-6] { background-image: url("../images/bg-images/6.jpg"); } .nav-link.active.h-blue { background: #19BCBF !important; } .nav-link.active.h-red { background: #FF9764 !important; } .nav-link.active.h-purple { background: #463699 !important; } .nav-link.active.h-info { background: #2DCEE3 !important; } .nav-link.active.h-dark { background: #39465C !important; } @media all and (-ms-high-contrast: none) { .pcoded-header .navbar-nav > li { display: inline-flex; } .pcoded-header .navbar-nav > li.dropdown { display: inline-block; } .pcoded-navbar.navbar-collapsed .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu::after { left: 40px; } } /* =================================================================================================== ========================== Diffrent types of NAvbar Layout Styles end ====================== =================================================================================================== */ .pcoded-navbar .card { background: rgba(255, 255, 255, 0.1); margin: 20px; box-shadow: 0 0 0 1px rgba(226, 229, 232, 0.15); color: rgba(255, 255, 255, 0.6); } .pcoded-navbar .card h6 { color: rgba(255, 255, 255, 0.6); } .pcoded-navbar .card .close { position: absolute; color: #b5bdca; position: absolute; top: 10px; right: 12px; opacity: 0.8; text-shadow: none; } .pcoded-navbar.menu-light .card { background: rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 1px #eff3f6; color: rgba(0, 0, 0, 0.6); } .pcoded-navbar.menu-light .card h6 { color: #39465C; } .pcoded-navbar.menu-light .card .close { color: #39465C; } .footer-fab { position: fixed; bottom: 70px; right: 70px; z-index: 1028; } .footer-fab .b-bg { background: #FF425C; box-shadow: 0 0 8px rgba(255, 66, 92, 0.9), 6px 0 8px rgba(0, 0, 0, 0.1); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; cursor: pointer; } .footer-fab .fab-hover { position: absolute; bottom: 100%; right: 0; transform: rotateY(-90deg); transform-origin: 100% 100%; transition: all 0.2 linear; } .footer-fab .fab-hover ul li { margin: 10px 0; } .footer-fab .fab-hover ul li a { position: relative; } .footer-fab .fab-hover ul li a:after { content: attr(data-text); position: absolute; padding: 4px 8px; background: #39465C; color: #fff; border-radius: 4px; top: 5px; right: calc(100% + 8px); width: -webkit-max-content; width: -moz-max-content; width: max-content; opacity: 0; transition: all 0.2s ease-in-out; } .footer-fab .fab-hover ul li a:hover:after { opacity: 1; } .footer-fab .fab-hover ul li a.btn-success.btn-envato { background-color: #79b530; display: flex; align-items: center; justify-content: center; } .footer-fab:hover .fab-hover { transform: rotateY(0deg); } @media only screen and (max-width: 575px) { .footer-fab { bottom: 30px; right: 30px; } } .progress .progress-bar { --bs-border-radius: 0px; } .mrr-card { position: relative; } .mrr-card .bottom-chart { bottom: 0; } .card-body-big { padding: 2em; } .borderless-card { border-top: none; } .widget-main-card { border-radius: 2px; box-shadow: 0 0 2px 0 rgba(43, 43, 43, 0.2); } .counter-card-1 h3, .counter-card-3 h3, .counter-card-2 h3 { margin-bottom: 16px; font-weight: 600; color: #666; } .counter-card-1 [class*=card-] > i, .counter-card-3 [class*=card-] > i, .counter-card-2 [class*=card-] > i { position: absolute; color: #19BCBF; right: 30px; top: 30px; font-size: 28px; } .counter-card-1 span.f-right, .counter-card-3 span.f-right, .counter-card-2 span.f-right { font-size: 16px; font-weight: 600; } .counter-card-2 { border-top-color: #13bd8a; } .counter-card-2 [class*=card-] > i { color: #13bd8a; } .counter-card-3 { border-top-color: #d6d6d6; } .counter-card-3 [class*=card-] > i { color: #d6d6d6; } .table-card .row-table { display: flex; align-items: center; table-layout: fixed; height: 100%; width: 100%; margin: 0; } .table-card .row-table:first-child { border-bottom: 1px solid #ddd; } .table-card .row-table .br { border-right: 1px solid #ccc; } .table-card .row-table i { font-size: 28px; } .table-card .row-table span { text-transform: uppercase; font-size: 12px; } .table-card .row-table h5 { display: block; margin-bottom: 0.3em; margin-right: 0; } .table-card .row-table > [class*=col-] { display: table-cell; float: none; table-layout: fixed; vertical-align: middle; } .table-card .row-table > [class*=col-] .row { display: flex; align-items: center; } .widget-primary-card.table-card, .table-card.widget-purple-card { border-top: none; color: #fff; } .widget-primary-card.table-card h4, .table-card.widget-purple-card h4, .widget-primary-card.table-card h6, .table-card.widget-purple-card h6 { color: #fff; } .widget-primary-card.table-card .row-table:first-child, .table-card.widget-purple-card .row-table:first-child { border-bottom: none; } .widget-primary-card.table-card .row-table > [class*=col-], .table-card.widget-purple-card .row-table > [class*=col-] { display: inline-block; vertical-align: middle; } .widget-primary-card.table-card .row-table > [class*=col-]:first-child, .table-card.widget-purple-card .row-table > [class*=col-]:first-child { text-align: center; } .widget-primary-card.table-card .row-table > [class*=col-] .row, .table-card.widget-purple-card .row-table > [class*=col-] .row { display: flex; align-items: center; } .widget-purple-card.table-card .row-table:first-child { border-bottom: none; } .social-widget-card { border-top: none; color: #fff; } .social-widget-card:hover i { opacity: 1; transform: scale(1.1); } .social-widget-card i { position: absolute; right: 10px; top: 50px; font-size: 48px; opacity: 0.4; transition: all ease-in 0.3s; } .widget-profile-card-1 { position: relative; margin-bottom: 50px; } .widget-profile-card-1 .middle-user { position: absolute; left: 0; right: 0; width: 100%; margin: 0 auto; text-align: center; bottom: -60px; } .widget-profile-card-1 .middle-user img { width: 115px; border-radius: 50%; } .widget-profile-card-1 ~ .card-footer [class*=col-] { border-right: 1px solid #fff; } .widget-profile-card-1 ~ .card-footer [class*=col-]:last-child { border: none; } @media only screen and (max-width: 767px) { .widget-profile-card-1 ~ .card-footer [class*=col-]:nth-child(2) { border: 0; } .widget-profile-card-1 ~ .card-footer [class*=col-]:last-child { margin-top: 10px; } } .widget-profile-card-2 img.user-img { width: 115px; } .widget-profile-card-2 a { color: #fff; transition: all ease-in 0.3s; } .widget-profile-card-2 a:hover { opacity: 0.7; } .widget-profile-card-3 { padding: 30px 0 20px; text-align: center; } .widget-profile-card-3 img { width: 120px; border-radius: 50%; } .profile-card { position: relative; min-height: 410px; overflow: hidden; } .profile-card img { width: 100%; position: absolute; top: 0; left: 0; } .profile-card .card-body { text-align: center; color: #fff; position: absolute; bottom: 0; text-align: center; width: 100%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); } .profile-card .card-body h3 { font-weight: 600; } .profile-card ~ .card-footer [class*=col-] { padding: 10px; border-right: 1px solid rgba(255, 255, 255, 0.57); } .profile-card ~ .card-footer [class*=col-] h4 { font-size: 18px; font-weight: 600; } .profile-card ~ .card-footer [class*=col-]:last-child { border: none; } .profile-card ~ .card-footer [class*=col-] span { text-transform: uppercase; } @media only screen and (max-width: 767px) { .profile-card ~ .card-footer [class*=col-]:nth-child(2) { border: none; } } .weather-bg-card { position: relative; } .weather-bg-card img { width: 100%; } .weather-bg-card .card-body { position: absolute; bottom: 20px; width: 100%; text-align: center; } .weather-bg-card h5 { color: #fff; } .weather-bg-card .card-body-big { position: absolute; top: 0; } .weather-bg-card .card-body-big span { color: #fff; } .weather-bg-card .weather-temp { font-size: 70px; color: #fff; } .weather-bg-card ~ .card-footer { border-top: none; } @media only screen and (max-width: 575px) { .weather-bg-card ~ .card-footer [class*=col-] { margin-bottom: 10px; } } .blur-user-card { color: #fff; text-align: center; padding-top: 45px; background-image: url("../images/widget/blur-bg.png"); background-size: cover; } .blur-user-card h3 { margin-top: 10px; font-size: 30px; font-weight: 600; } .blur-user-card p { font-size: 18px; font-weight: 300; } .blur-user-card .blur-footer [class*=col-] { padding: 1em; border-right: 1px solid #fff; margin-top: 30px; margin-bottom: 30px; } .blur-user-card .blur-footer [class*=col-]:last-child { border-right: none; } @media only screen and (max-width: 767px) { .blur-user-card .blur-footer [class*=col-]:nth-child(2) { border: 0; } .blur-user-card .blur-footer [class*=col-]:last-child { margin-top: 0; padding-top: 0; } } .widget-chat-box .card-header i { font-size: 17px; color: #39465C; position: relative; } .widget-chat-box .send-chat, .widget-chat-box .receive-chat { position: relative; background: #eff3f6; padding: 7px; border-radius: 0 10px 10px 10px; font-size: 13px; margin-bottom: 30px; } .widget-chat-box .send-chat:before, .widget-chat-box .receive-chat:before { content: ""; position: absolute; height: 12px; width: 12px; border: 6px solid transparent; border-top: 6px solid #eff3f6; border-right: 6px solid #eff3f6; left: -12px; top: 0; } .widget-chat-box .send-chat .time, .widget-chat-box .receive-chat .time { position: absolute; bottom: -20px; left: 0; } .widget-chat-box .receive-chat { background-color: #19BCBF; color: #fff; border-radius: 10px; } .widget-chat-box .receive-chat:before { display: none; } .widget-chat-box .receive-chat .time { color: #666; } .widget-chat-box .rc-10 { margin-bottom: 10px; } .table-card .card-body { padding-left: 0; padding-right: 0; padding-top: 0; } .table-card .card-body .table > thead > tr > th { border-top: 0; } .table-card .card-body .table tr td:first-child, .table-card .card-body .table tr th:first-child { padding-left: 25px; } .table-card .card-body .table tr td:last-child, .table-card .card-body .table tr th:last-child { padding-right: 25px; } .table-card .card-body .table.without-header tr:first-child td { border-top: none; } .product-progress-card .progress { height: 6px; } .product-progress-card .pp-cont { padding-left: 15px; padding-right: 15px; position: relative; } .product-progress-card .pp-cont:after { content: ""; background: #d2d2d2; width: 1px; height: 100%; position: absolute; top: 0; left: -15px; } .product-progress-card .pp-main > div:first-child .pp-cont:after { display: none; } @media only screen and (max-width: 1199px) { .product-progress-card .pp-main > div:nth-child(3) .pp-cont:after { display: none; } } @media only screen and (max-width: 992px) { .product-progress-card .pp-cont { margin-top: 15px; margin-bottom: 15px; } .product-progress-card .pp-cont:after { display: none; } } .new-cust-card img { width: 40px; } .new-cust-card h6 { margin-bottom: 0; } .new-cust-card .align-middle { position: relative; } .new-cust-card .align-middle .status { position: absolute; right: 0; top: 19px; font-size: 13px; } .new-cust-card .align-middle .status.active { width: 10px; height: 10px; border-radius: 50%; background: #13bd8a; } .table-card .row-table { display: flex; align-items: center; table-layout: fixed; height: 100%; width: 100%; margin: 0; } .table-card .row-table:first-child { border-bottom: 1px solid #ddd; } .table-card .row-table .br { border-right: 1px solid #ccc; } .table-card .row-table i { font-size: 28px; } .table-card .row-table span { text-transform: uppercase; font-size: 12px; } .table-card .row-table h5 { display: block; margin-bottom: 0.3em; margin-right: 0; } .table-card .row-table > [class*=col-] { display: table-cell; float: none; table-layout: fixed; vertical-align: middle; } .table-card .row-table > [class*=col-] .row { display: flex; align-items: center; } .latest-update-card .card-body { padding-top: 0; } .latest-update-card .card-body .latest-update-box { position: relative; } .latest-update-card .card-body .latest-update-box:after { content: ""; position: absolute; background: #ebebeb; height: 100%; width: 3px; top: 0; left: 11px; z-index: 1; } .latest-update-card .card-body .latest-update-box .update-meta { z-index: 2; } .latest-update-card .card-body .latest-update-box .update-meta .update-icon { width: 30px; height: 30px; border-radius: 50%; text-align: center; padding: 7px 8px; font-size: 16px; color: #fff; } .latest-update-card .card-body .latest-update-box .update-meta .update-icon.bg-c-red { box-shadow: 0 0 0 4px rgba(255, 66, 92, 0.5); } .latest-update-card .card-body .latest-update-box .update-meta .update-icon.bg-c-blue { box-shadow: 0 0 0 4px rgba(25, 188, 191, 0.5); } .latest-update-card .card-body .latest-update-box .update-meta .update-icon.bg-c-green { box-shadow: 0 0 0 4px rgba(19, 189, 138, 0.5); } .latest-update-card .card-body .latest-update-box .update-meta .update-icon.bg-c-yellow { box-shadow: 0 0 0 4px rgba(255, 151, 100, 0.5); } .latest-update-card .card-body .latest-update-box .update-meta .update-icon.ring { border-width: 3px; width: 15px; height: 15px; padding: 0; display: block; background: #fff; } .latest-update-card .card-body .latest-update-box .update-meta i.update-icon { margin-left: 4px; margin-right: 4px; } .latest-update-card .card-body .latest-update-box .update-meta img.update-icon { padding: 0; width: 40px; height: 40px; } .latest-update-card.update-card .card-body .latest-update-box:after { left: 19px; } .testimonial-card .progress { height: 5px; } .testimonial-card .review-block .cust-img { width: 40px; height: 40px; } .testimonial-card .review-block > div { padding-top: 15px; padding-bottom: 9px; margin-left: 0; margin-right: 0; padding-left: 5px; padding-right: 5px; } .testimonial-card .review-block > div:hover { background-color: rgba(25, 188, 191, 0.1); } .feed-card h6 { margin-top: 7px; } .feed-card .feed-icon { color: #fff; border-radius: 50%; width: 30px; height: 30px; text-align: center; padding: 8px 9px; } .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(25, 188, 191, 0.1); border-radius: 0 5px 5px 5px; } .chat-card .received-chat .msg:after { content: ""; position: absolute; left: -7px; top: -7px; transform: rotate(45deg); border: 7px solid transparent; border-bottom-color: rgba(25, 188, 191, 0.1); } .chat-card .send-chat, .chat-card .widget-chat-box .receive-chat, .widget-chat-box .chat-card .receive-chat { text-align: right; } .chat-card .send-chat .msg, .chat-card .widget-chat-box .receive-chat .msg, .widget-chat-box .chat-card .receive-chat .msg { background: rgba(19, 189, 138, 0.1); border-radius: 5px 0 5px 5px; } .chat-card .send-chat .msg:after, .chat-card .widget-chat-box .receive-chat .msg:after, .widget-chat-box .chat-card .receive-chat .msg:after { content: ""; position: absolute; right: -7px; top: -7px; transform: rotate(45deg); border: 7px solid transparent; border-right-color: rgba(19, 189, 138, 0.1); } .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; transition: all 0.3s ease-in-out; } .comp-card i { color: #fff; width: 50px; height: 50px; border-radius: 50%; text-align: center; padding: 17px 0; font-size: 18px; } .prod-p-card i { background-color: #fff; width: 40px; height: 40px; border-radius: 50%; text-align: center; padding: 11px 0; font-size: 18px; } .ticket-card .lbl-card { border-radius: 50px; padding: 5px 15px; color: #fff; display: inline-block; } .analytic-card .analytic-icon { width: 50px; height: 50px; text-align: center; padding: 17px 0; border-radius: 50%; background-color: #fff; } .social-res-card .progress { height: 6px; } .product-progress-card .progress { height: 6px; } .product-progress-card .pp-cont { padding-left: 15px; padding-right: 15px; position: relative; } .product-progress-card .pp-cont:after { content: ""; background: #d2d2d2; width: 1px; height: 100%; position: absolute; top: 0; left: -15px; } .user-card .cover-img-block { position: relative; } .user-card .cover-img-block .change-cover { position: absolute; top: 30px; left: 30px; z-index: 5; opacity: 0; transition: all 0.3s ease-in-out; } .user-card .cover-img-block .change-cover .dropdown-toggle { color: #fff; background: rgba(0, 0, 0, 0.6); width: 45px; height: 45px; border-radius: 50%; font-size: 20px; } .user-card .cover-img-block .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; background: rgba(0, 0, 0, 0.4); transition: all 0.3s ease-in-out; } .user-card .cover-img-block:hover .change-cover, .user-card .cover-img-block:hover .overlay { opacity: 1; } .user-card .user-about-block { margin-top: -30px; z-index: 1; position: relative; } .user-card .user-about-block img { box-shadow: 0 0 0 5px #fff; } .user-card .user-about-block .certificated-badge { position: absolute; bottom: -5px; right: -5px; border-radius: 50%; width: 30px; height: 30px; background: #fff; padding: 5px 3px; } .user-card .user-about-block .certificated-badge .bg-icon { font-size: 22px; } .user-card .user-about-block .certificated-badge .front-icon { font-size: 11px; position: absolute; top: 11px; left: 9px; } .user-card .hover-data { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(36, 46, 62, 0.92); text-align: center; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: all 0.3s ease-in-out; z-index: 9; } .user-card:hover .hover-data { transform: scale(1); } .user-card .change-profile .dropdown-toggle::after { display: none; } .user-card .change-profile .profile-dp { position: relative; overflow: hidden; padding: 5px; width: 110px; height: 110px; border-radius: 50%; } .user-card .change-profile .profile-dp .overlay { position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%; opacity: 0; z-index: 1; overflow: hidden; background: rgba(0, 0, 0, 0.4); transition: all 0.3s ease-in-out; } .user-card .change-profile .profile-dp .overlay span { background: rgba(0, 0, 0, 0.5); color: #fff; position: absolute; bottom: 0; width: 100%; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.4); padding: 0 0 5px; } .user-card .change-profile .profile-dp:hover .overlay { opacity: 1; } @media only screen and (max-width: 992px) { .user-card .user-about-block { margin-top: -10px; } .user-card .wid-80 { width: 60px; } .user-card .change-profile .profile-dp { width: 90px; height: 90px; } .user-card.user-card-2.shape-right .cover-img-block { -webkit-clip-path: none; clip-path: none; } .user-card .cover-img-block .change-cover .dropdown-toggle { padding: 5px 7px; } } .user-card-2 .cover-img-block { -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 80%); clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 80%); } .user-card-2.shape-right .cover-img-block { -webkit-clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 100% 80%, 0% 100%); } .user-card-2.shape-center .cover-img-block { -webkit-clip-path: polygon(0 0, 100% 0%, 100% 80%, 50% 100%, 0% 80%); clip-path: polygon(0 0, 100% 0%, 100% 80%, 50% 100%, 0% 80%); } .user-card-3 .certificated-badge { position: absolute; bottom: 5px; right: 5px; border-radius: 50%; width: 40px; height: 40px; background: #fff; padding: 5px 3px; } .user-card-3 .certificated-badge .bg-icon { font-size: 30px; } .user-card-3 .certificated-badge .front-icon { font-size: 14px; position: absolute; top: 14px; left: 13px; } .user-card-3 .social-top-link { position: absolute; top: 20px; left: 20px; } .user-card-3.social-hover .social-top-link { top: 20px; left: 20px; overflow: hidden; } .user-card-3.social-hover .social-top-link .btn, .user-card-3.social-hover .social-top-link li { margin-left: -100px; transition: all 0.2s ease-in-out; } .user-card-3.social-hover .social-top-link .btn:nth-child(1), .user-card-3.social-hover .social-top-link li:nth-child(1) { transition-delay: 0.05s; } .user-card-3.social-hover .social-top-link .btn:nth-child(2), .user-card-3.social-hover .social-top-link li:nth-child(2) { transition-delay: 0.1s; } .user-card-3.social-hover .social-top-link .btn:nth-child(3), .user-card-3.social-hover .social-top-link li:nth-child(3) { transition-delay: 0.15s; } .user-card-3.social-hover .social-top-link .btn:nth-child(4), .user-card-3.social-hover .social-top-link li:nth-child(4) { transition-delay: 0.2s; } .user-card-3.social-hover .social-top-link .btn:nth-child(5), .user-card-3.social-hover .social-top-link li:nth-child(5) { transition-delay: 0.25s; } .user-card-3.social-hover .social-top-link .btn:nth-child(6), .user-card-3.social-hover .social-top-link li:nth-child(6) { transition-delay: 0.3s; } .user-card-3.social-hover .social-top-link .btn:nth-child(7), .user-card-3.social-hover .social-top-link li:nth-child(7) { transition-delay: 0.35s; } .user-card-3.social-hover .social-top-link .btn:nth-child(8), .user-card-3.social-hover .social-top-link li:nth-child(8) { transition-delay: 0.4s; } .user-card-3.social-hover .social-top-link .btn:nth-child(9), .user-card-3.social-hover .social-top-link li:nth-child(9) { transition-delay: 0.45s; } .user-card-3.social-hover .social-top-link .btn:nth-child(10), .user-card-3.social-hover .social-top-link li:nth-child(10) { transition-delay: 0.5s; } .user-card-3.social-hover:hover .social-top-link .btn, .user-card-3.social-hover:hover .social-top-link li { margin-left: 0; } .rating-bar .br-theme-bars-1to10 .br-readonly a.br-active, .rating-bar .br-theme-bars-1to10 .br-readonly a.br-selected { background-color: #13bd8a; } .rating-bar .br-theme-bars-1to10 .br-widget { height: 30px; } .rating-bar .br-theme-bars-1to10 .br-widget a { background-color: rgba(57, 181, 74, 0.2); width: 8px; } .offline-box iframe { width: 100%; border: 1px solid #ddd; } .statstic-data-card .active.carousel-item-right, .statstic-data-card .carousel-item-next:not(.carousel-item-left) { transform: translateY(100%); } .statstic-data-card .active.carousel-item-left, .statstic-data-card .carousel-item-prev:not(.carousel-item-right) { transform: translateY(-100%); } .statstic-data-card .card-body { border-top: 2px solid transparent; } .statstic-data-card .card-body.level-down { border-color: #FF425C; } .statstic-data-card .card-body.level-up { border-color: #13bd8a; } .ck-content strong { font-weight: 600; } .stastic-slider-full-card .carousel-item { transition: transform 12s linear; } .dt-button-collection { padding: 0; margin: 0; } .docs-options .dropdown-menu > li:active, .docs-options .dropdown-menu > li:hover { color: #111 !important; } .bootstrap-tagsinput input { color: #fff; } .popover { z-index: 1020; } /* new 25-2 */ .widget-profile [class*=col] { border-right: 1px solid #e2e5e8; } .widget-profile [class*=col]:last-child { border: 0; } .support-bar [class*=col] { border-right: 1px solid #fff; } .support-bar [class*=col]:last-child { border: 0; } .support-bar1 [class*=col] { border-right: 1px solid #e2e5e8; } .support-bar1 [class*=col]:last-child { border: 0; } /* new 3-15 */ .earning-date .bd-example { padding: 0; margin: 0; border: 0; } .earning-date .bd-example .tab-content { background: transparent; padding: 0; box-shadow: none; } .earning-date .bd-example .nav-pills { background: transparent; padding: 0; box-shadow: none; } .earning-date .bd-example .nav-pills .nav-link { min-width: auto; padding: 6px 20px; color: #fff; } .earning-date .bd-example .nav-pills .nav-link.active { background: #fff; box-shadow: none; color: #000 !important; } .earning-date .bd-example .nav-pills .nav-link.active:after { content: ""; position: absolute; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #fff; top: -5px; left: 0; right: 0; margin: 0 auto; width: 11px; } .statustic-card .card-body { position: relative; } .statustic-card .card-body .progress { position: absolute; bottom: 0; width: 100%; left: 0; height: 5px; overflow: visible; } .statustic-card .card-body .progress .progress-bar { position: relative; overflow: visible; } .statustic-card .card-body .progress .progress-bar:before { content: ""; height: 5px; width: 5px; border-radius: 50%; position: absolute; right: 0; background: inherit; } .statustic-card .card-body .progress .progress-bar.bg-c-blue:before { -webkit-animation: blue-blink-bar 0.5s linear infinite; animation: blue-blink-bar 0.5s linear infinite; } .statustic-card .card-body .progress .progress-bar.bg-c-green:before { -webkit-animation: green-blink-bar 0.5s linear infinite; animation: green-blink-bar 0.5s linear infinite; } .statustic-card .card-body .progress .progress-bar.bg-c-purple:before { -webkit-animation: purple-blink-bar 0.5s linear infinite; animation: purple-blink-bar 0.5s linear infinite; } @-webkit-keyframes blue-blink-bar { 0% { box-shadow: 0 0 0 0 rgba(25, 188, 191, 0.1); } 50% { box-shadow: 0 0 0 6px rgba(25, 188, 191, 0.3); } } @keyframes blue-blink-bar { 0% { box-shadow: 0 0 0 0 rgba(25, 188, 191, 0.1); } 50% { box-shadow: 0 0 0 6px rgba(25, 188, 191, 0.3); } } @-webkit-keyframes green-blink-bar { 0% { box-shadow: 0 0 0 0 rgba(19, 189, 138, 0.1); } 50% { box-shadow: 0 0 0 6px rgba(19, 189, 138, 0.3); } } @keyframes green-blink-bar { 0% { box-shadow: 0 0 0 0 rgba(19, 189, 138, 0.1); } 50% { box-shadow: 0 0 0 6px rgba(19, 189, 138, 0.3); } } @-webkit-keyframes purple-blink-bar { 0% { box-shadow: 0 0 0 0 rgba(70, 54, 153, 0.1); } 50% { box-shadow: 0 0 0 6px rgba(70, 54, 153, 0.3); } } @keyframes purple-blink-bar { 0% { box-shadow: 0 0 0 0 rgba(70, 54, 153, 0.1); } 50% { box-shadow: 0 0 0 6px rgba(70, 54, 153, 0.3); } } .card-social .progress { height: 6px; } .card-social .card-active > div + div { border-left: 1px solid #e2e5e8; } .feed-blog { border-left: 1px solid #d6d6d6; margin-left: 30px; padding: 0; } .feed-blog li { position: relative; padding-left: 30px; margin-bottom: 50px; } .feed-blog li .feed-user-img { position: absolute; left: -20px; top: -10px; } .feed-blog li .feed-user-img:after { content: ""; position: absolute; top: 3px; right: 3px; border: 3px solid transparent; border-radius: 50%; } .feed-blog li.active-feed .feed-user-img:after { border-color: #2DCEE3; } .feed-blog li.diactive-feed .feed-user-img:after { border-color: #FF425C; } .feed-blog li h6 { line-height: 1.5; cursor: pointer; } .feed-blog .label { border-radius: 4px; padding: 4px 7px; font-size: 75%; } .order-card { color: #fff; } .order-card h2, .order-card h6, .order-card p { color: #fff; } .progress-bar.progress-c-red { background: linear-gradient(-45deg, #FF425C, #e53b52); } .progress-bar.progress-c-blue { background: linear-gradient(-45deg, #19BCBF, #149698); } .progress-bar.progress-c-green { background: linear-gradient(-45deg, #13bd8a, #0f976e); } .progress-bar.progress-c-yellow { background: linear-gradient(-45deg, #FF9764, #ff864b); } /** ===================== Form component css start ========================== **/ .form-range::-webkit-slider-runnable-track { --bs-tertiary-bg: #eff3f6; } .form-check-input { --bs-border-color: #adb5bd; } .h-list-footer .input-group .btn { border-radius: 50% !important; } .custom-select, .form-control { padding: 10px 16px; font-size: 14px; height: auto; box-shadow: 0 1px 2px 0 rgba(57, 70, 92, 0.05); border-radius: 0.375rem; border-width: 2px; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } .custom-select:active, .custom-select:focus, .form-control:active, .form-control:focus { box-shadow: 0 1px 2px 0 rgba(57, 70, 92, 0.05); border-color: #19BCBF; } .custom-select::-moz-placeholder, .form-control::-moz-placeholder { color: #aaaeb3; opacity: 1; } .custom-select:-ms-input-placeholder, .form-control:-ms-input-placeholder { color: #aaaeb3; } .custom-select::-webkit-input-placeholder, .form-control::-webkit-input-placeholder { color: #aaaeb3; } .custom-select.form-control-lg, .form-control.form-control-lg { padding: 16px 22px; font-size: 16px; } .custom-select.form-control-sm, .form-control.form-control-sm { padding: 8px 14px; font-size: 12px; } .input-group-text { border-width: 2px; } .input-group-prepend { margin-right: -2px; } .input-group-append { margin-left: -3px; } .input-group-sm > .input-group-prepend > .input-group-text { padding: 0.05rem 0.5rem; } /* input group start */ .input-group { background: #eff3f6; } .input-group .form-control { padding: 12px 16px; } .input-group .input-group-text { padding-left: 15px; padding-right: 15px; background: transparent; } .input-group .input-group-text i { font-size: 16px; } .input-group .custom-file-label { margin-bottom: 0; } .input-group .btn { margin-bottom: 0; margin-right: 0; } .form-control.minicolors-input { padding-left: 44px; } .minicolors.minicolors-theme-bootstrap .minicolors-swatch { width: 29px; height: 29px; } .cust-file-button .custom-file-label { height: calc(2.25rem + 8px); line-height: 2.5; } .cust-file-button .custom-file-label::after { padding: 0.775rem 0.75rem; height: 2.65rem; } .custom-select { height: calc(2.25rem + 9px); } /* input group End */ /**====== Form component css end ======**/ .form-check .form-check-input.input-primary:checked { border-color: #19BCBF; background-color: #19BCBF; } .form-check .form-check-input.input-light-primary:checked { border-color: #e8f8f9; background-color: #e8f8f9; } .form-check .form-check-input.input-light-primary:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2319BCBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-light-primary:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2319BCBF'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-primary:focus[type=checkbox], .form-check .form-check-input.input-primary:focus[type=radio], .form-check .form-check-input.input-light-primary:focus[type=checkbox], .form-check .form-check-input.input-light-primary:focus[type=radio] { box-shadow: 0 0 0 0.2rem rgba(25, 188, 191, 0.25); border-color: #19BCBF; } .form-check.form-switch .form-check-input.input-light-primary:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2319BCBF'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-secondary:checked { border-color: #7E858E; background-color: #7E858E; } .form-check .form-check-input.input-light-secondary:checked { border-color: #f2f3f4; background-color: #f2f3f4; } .form-check .form-check-input.input-light-secondary:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%237E858E' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-light-secondary:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%237E858E'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-secondary:focus[type=checkbox], .form-check .form-check-input.input-secondary:focus[type=radio], .form-check .form-check-input.input-light-secondary:focus[type=checkbox], .form-check .form-check-input.input-light-secondary:focus[type=radio] { box-shadow: 0 0 0 0.2rem rgba(126, 133, 142, 0.25); border-color: #7E858E; } .form-check.form-switch .form-check-input.input-light-secondary:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237E858E'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-success:checked { border-color: #13bd8a; background-color: #13bd8a; } .form-check .form-check-input.input-light-success:checked { border-color: #e7f8f3; background-color: #e7f8f3; } .form-check .form-check-input.input-light-success:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2313bd8a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-light-success:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2313bd8a'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-success:focus[type=checkbox], .form-check .form-check-input.input-success:focus[type=radio], .form-check .form-check-input.input-light-success:focus[type=checkbox], .form-check .form-check-input.input-light-success:focus[type=radio] { box-shadow: 0 0 0 0.2rem rgba(19, 189, 138, 0.25); border-color: #13bd8a; } .form-check.form-switch .form-check-input.input-light-success:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2313bd8a'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-info:checked { border-color: #2DCEE3; background-color: #2DCEE3; } .form-check .form-check-input.input-light-info:checked { border-color: #eafafc; background-color: #eafafc; } .form-check .form-check-input.input-light-info:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%232DCEE3' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-light-info:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%232DCEE3'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-info:focus[type=checkbox], .form-check .form-check-input.input-info:focus[type=radio], .form-check .form-check-input.input-light-info:focus[type=checkbox], .form-check .form-check-input.input-light-info:focus[type=radio] { box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.25); border-color: #2DCEE3; } .form-check.form-switch .form-check-input.input-light-info:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232DCEE3'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-warning:checked { border-color: #FF9764; background-color: #FF9764; } .form-check .form-check-input.input-light-warning:checked { border-color: #fff5f0; background-color: #fff5f0; } .form-check .form-check-input.input-light-warning:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FF9764' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-light-warning:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FF9764'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-warning:focus[type=checkbox], .form-check .form-check-input.input-warning:focus[type=radio], .form-check .form-check-input.input-light-warning:focus[type=checkbox], .form-check .form-check-input.input-light-warning:focus[type=radio] { box-shadow: 0 0 0 0.2rem rgba(255, 151, 100, 0.25); border-color: #FF9764; } .form-check.form-switch .form-check-input.input-light-warning:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FF9764'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-danger:checked { border-color: #FF425C; background-color: #FF425C; } .form-check .form-check-input.input-light-danger:checked { border-color: #ffecef; background-color: #ffecef; } .form-check .form-check-input.input-light-danger:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FF425C' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-light-danger:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FF425C'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-danger:focus[type=checkbox], .form-check .form-check-input.input-danger:focus[type=radio], .form-check .form-check-input.input-light-danger:focus[type=checkbox], .form-check .form-check-input.input-light-danger:focus[type=radio] { box-shadow: 0 0 0 0.2rem rgba(255, 66, 92, 0.25); border-color: #FF425C; } .form-check.form-switch .form-check-input.input-light-danger:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FF425C'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-light:checked { border-color: #E4E5E6; background-color: #E4E5E6; } .form-check .form-check-input.input-light-light:checked { border-color: #fcfcfd; background-color: #fcfcfd; } .form-check .form-check-input.input-light-light:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23E4E5E6' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-light-light:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23E4E5E6'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-light:focus[type=checkbox], .form-check .form-check-input.input-light:focus[type=radio], .form-check .form-check-input.input-light-light:focus[type=checkbox], .form-check .form-check-input.input-light-light:focus[type=radio] { box-shadow: 0 0 0 0.2rem rgba(228, 229, 230, 0.25); border-color: #E4E5E6; } .form-check.form-switch .form-check-input.input-light-light:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23E4E5E6'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-dark:checked { border-color: #39465C; background-color: #39465C; } .form-check .form-check-input.input-light-dark:checked { border-color: #ebedef; background-color: #ebedef; } .form-check .form-check-input.input-light-dark:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2339465C' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-light-dark:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2339465C'/%3e%3c/svg%3e"); } .form-check .form-check-input.input-dark:focus[type=checkbox], .form-check .form-check-input.input-dark:focus[type=radio], .form-check .form-check-input.input-light-dark:focus[type=checkbox], .form-check .form-check-input.input-light-dark:focus[type=radio] { box-shadow: 0 0 0 0.2rem rgba(57, 70, 92, 0.25); border-color: #39465C; } .form-check.form-switch .form-check-input.input-light-dark:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2339465C'/%3e%3c/svg%3e"); } select.form-control:not([size]):not([multiple]) { height: calc(2.55rem + 2px); } .custom-control-input:checked ~ .custom-control-label::before { border-color: #19BCBF; background-color: #19BCBF; } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(25, 188, 191, 0.25); } .input-group-lg > .input-group-append > select.btn:not([size]):not([multiple]), .input-group-lg > .input-group-append > select.input-group-text:not([size]):not([multiple]), .input-group-lg > .input-group-prepend > select.btn:not([size]):not([multiple]), .input-group-lg > .input-group-prepend > select.input-group-text:not([size]):not([multiple]), .input-group-lg > select.form-control:not([size]):not([multiple]), select.form-control-lg:not([size]):not([multiple]) { height: calc(3.375rem + 2px); } .minicolors-theme-bootstrap .minicolors-swatch { border: none; width: 32px; height: 32px; top: 8px; left: 8px; } .tt-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; background-color: #ffffff; border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; cursor: pointer; } .bootstrap-tagsinput { width: 100%; border: 2px solid #ced4da; background: transparent; border-radius: 0.375rem; padding: 4px 15px; } .bootstrap-tagsinput input { color: #686c71; } .custom-file-label { height: calc(1.5em + 0.75rem + 5px); } .custom-file-label:after { height: calc(1.5em + 0.75rem + 2.5px); } .datepicker { width: 265px; padding: 10px; } .datepicker.dropdown-menu { padding: 10px; } .datepicker.datepicker-orient-top { margin-top: 8px; } .datepicker table { width: 100%; } .datepicker td, .datepicker th { font-weight: regular; width: 35px; height: 35px; } .datepicker thead th { color: #111; } .datepicker thead th.datepicker-switch, .datepicker thead th.next, .datepicker thead th.prev { font-weight: 500; color: #686c71; } .datepicker thead th.datepicker-switch i, .datepicker thead th.next i, .datepicker thead th.prev i { font-size: 1.2rem; color: #686c71; } .datepicker thead th.datepicker-switch i:before, .datepicker thead th.next i:before, .datepicker thead th.prev i:before { line-height: 0; vertical-align: middle; } .datepicker thead th.datepicker-switch:hover, .datepicker thead th.next:hover, .datepicker thead th.prev:hover { background: #eff3f6 !important; } .datepicker thead th.dow { color: #686c71; font-weight: 500; } .datepicker tbody tr > td.day { color: #686c71; } .datepicker tbody tr > td.day:hover { background: #eff3f6; color: #686c71; } .datepicker tbody tr > td.day.old { color: #686c71; } .datepicker tbody tr > td.day.new { color: #686c71; } .datepicker tbody tr > td.day.active, .datepicker tbody tr > td.day.active:hover, .datepicker tbody tr > td.day.selected, .datepicker tbody tr > td.day.selected:hover { background: #19BCBF; color: #fff; } .datepicker tbody tr > td.day.today { position: relative; background: #19BCBF !important; color: #fff !important; } .datepicker tbody tr > td.day.today:before { content: ""; display: inline-block; border: solid transparent; border-width: 0 0 7px 7px; border-bottom-color: #ffffff; border-top-color: #686c71; position: absolute; bottom: 4px; right: 4px; } .datepicker tbody tr > td.day.range { background: #111; } .datepicker tbody tr > td span.hour, .datepicker tbody tr > td span.minute, .datepicker tbody tr > td span.month, .datepicker tbody tr > td span.year { color: #686c71; } .datepicker tbody tr > td span.hour:hover, .datepicker tbody tr > td span.minute:hover, .datepicker tbody tr > td span.month:hover, .datepicker tbody tr > td span.year:hover { background: #eff3f6; } .datepicker tbody tr > td span.hour.active, .datepicker tbody tr > td span.hour.active.focused:hover, .datepicker tbody tr > td span.hour.active:hover, .datepicker tbody tr > td span.hour.focused, .datepicker tbody tr > td span.hour.focused:hover, .datepicker tbody tr > td span.minute.active, .datepicker tbody tr > td span.minute.active.focused:hover, .datepicker tbody tr > td span.minute.active:hover, .datepicker tbody tr > td span.minute.focused, .datepicker tbody tr > td span.minute.focused:hover, .datepicker tbody tr > td span.month.active, .datepicker tbody tr > td span.month.active.focused:hover, .datepicker tbody tr > td span.month.active:hover, .datepicker tbody tr > td span.month.focused, .datepicker tbody tr > td span.month.focused:hover, .datepicker tbody tr > td span.year.active, .datepicker tbody tr > td span.year.active.focused:hover, .datepicker tbody tr > td span.year.active:hover, .datepicker tbody tr > td span.year.focused, .datepicker tbody tr > td span.year.focused:hover { background: #19BCBF; color: #fff; } .datepicker tfoot tr > th.clear, .datepicker tfoot tr > th.today { font-weight: 500; } .datepicker tfoot tr > th.clear:hover, .datepicker tfoot tr > th.today:hover { background: #eff3f6; } .datepicker.datepicker-inline { border: 1px solid #e2e5e8; } .bootstrap-timepicker-widget { left: auto; width: 175px; } .bootstrap-timepicker-widget .bootstrap-timepicker-hour, .bootstrap-timepicker-widget .bootstrap-timepicker-meridian, .bootstrap-timepicker-widget .bootstrap-timepicker-minute, .bootstrap-timepicker-widget .bootstrap-timepicker-second { border: none; box-shadow: none; } .bootstrap-timepicker-widget table td > a { border: 0; } .bootstrap-timepicker-widget table td > a i { font-size: 1.1rem; } .bootstrap-timepicker-widget .bootstrap-timepicker-hour, .bootstrap-timepicker-widget .bootstrap-timepicker-meridian, .bootstrap-timepicker-widget .bootstrap-timepicker-minute, .bootstrap-timepicker-widget .bootstrap-timepicker-second { color: #111; } .bootstrap-timepicker-widget table td > a:hover { background: #eff3f6; } .tagify__tag { --tag-bg: #eff3f6; --tag-hover: rgba(25, 188, 191, 0.3); --tag-remove-bg: rgba(255, 66, 92, 0.3); --tag-remove-btn-bg--hover: #FF425C; } .tagify__tag.tagify__tag--primary { --tag-bg: rgba(25, 188, 191, 0.2); } .tagify__tag.tagify__tag--primary div .tagify__tag-text { color: #19BCBF; } .tagify__tag.tagify__tag--secondary { --tag-bg: rgba(126, 133, 142, 0.2); } .tagify__tag.tagify__tag--secondary div .tagify__tag-text { color: #7E858E; } .tagify__tag.tagify__tag--success { --tag-bg: rgba(19, 189, 138, 0.2); } .tagify__tag.tagify__tag--success div .tagify__tag-text { color: #13bd8a; } .tagify__tag.tagify__tag--info { --tag-bg: rgba(45, 206, 227, 0.2); } .tagify__tag.tagify__tag--info div .tagify__tag-text { color: #2DCEE3; } .tagify__tag.tagify__tag--warning { --tag-bg: rgba(255, 151, 100, 0.2); } .tagify__tag.tagify__tag--warning div .tagify__tag-text { color: #FF9764; } .tagify__tag.tagify__tag--danger { --tag-bg: rgba(255, 66, 92, 0.2); } .tagify__tag.tagify__tag--danger div .tagify__tag-text { color: #FF425C; } .tagify__tag.tagify__tag--light { --tag-bg: rgba(228, 229, 230, 0.2); } .tagify__tag.tagify__tag--light div .tagify__tag-text { color: #E4E5E6; } .tagify__tag.tagify__tag--dark { --tag-bg: rgba(57, 70, 92, 0.2); } .tagify__tag.tagify__tag--dark div .tagify__tag-text { color: #39465C; } .bootstrap-switch { border-color: #e2e5e8; } .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default { background: #eff3f6; } .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { color: #fff; background: #19BCBF; } .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary { color: #fff; background: #7E858E; } .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { color: #fff; background: #13bd8a; } .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info { color: #fff; background: #2DCEE3; } .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning { color: #fff; background: #FF9764; } .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger { color: #fff; background: #FF425C; } .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-light, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-light { color: #fff; background: #E4E5E6; } .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-dark, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-dark { color: #fff; background: #39465C; } .bootstrap-select > .dropdown-toggle.bs-placeholder.btn[class*=btn-]:not(.btn-light) { color: #fff; } .typeahead .twitter-typeahead { display: block !important; } .scrollable-dropdown-menu .tt-menu { max-height: 150px; overflow-y: auto; } .tt-menu { padding: 10px 0; font-size: 14px; background: #fff; min-width: 10rem; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; } .tt-menu .tt-suggestion { padding: 4px 20px; border-radius: 2px; } .tt-menu .tt-suggestion.active, .tt-menu .tt-suggestion:active, .tt-menu .tt-suggestion:focus, .tt-menu .tt-suggestion:hover { background: rgba(25, 188, 191, 0.03); color: #19BCBF; } .sticky-action .card-header { background: #fff; z-index: 1; } .sticky-action.sticky .card-header { top: 64px; position: fixed; box-shadow: 0 1px 15px 1px rgba(57, 82, 107, 0.15); left: 289px; right: 25px; } @media (max-width: 1024px) { .sticky-action.sticky .card-header { top: 74px; } } .dropzone { min-height: auto; } .dropzone { padding: 20px; text-align: center; cursor: pointer; border: 2px dashed #e2e5e8; border-radius: 2px; } .dropzone .dropzone-msg-title { color: #686c71; margin: 0 0 5px; padding: 0; font-weight: 500; font-size: 1.2rem; } .dropzone .dropzone-msg-desc { color: #686c71; font-weight: 400; font-size: 1rem; } .dropzone .dz-preview .dz-image { border-radius: 2px; } .dropzone.dropzone-primary { border-color: #19BCBF; } .dropzone.dropzone-secondary { border-color: #7E858E; } .dropzone.dropzone-success { border-color: #13bd8a; } .dropzone.dropzone-info { border-color: #2DCEE3; } .dropzone.dropzone-warning { border-color: #FF9764; } .dropzone.dropzone-danger { border-color: #FF425C; } .dropzone.dropzone-light { border-color: #E4E5E6; } .dropzone.dropzone-dark { border-color: #39465C; } .dz-started .dropzone-msg { display: none; } .dropzone-multi { border: 0; padding: 0; } .dropzone-multi .dz-message { display: none; } .dropzone-multi .dropzone-panel .dropzone-remove-all, .dropzone-multi .dropzone-panel .dropzone-upload { display: none; } .dropzone-multi .dropzone-item { background: #eff3f6; border-radius: 2px; margin: 8px 0; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; } .dropzone-multi .dropzone-item .dropzone-progress { width: 20%; } .dropzone-multi .dropzone-item .dropzone-progress .progress { height: 0.5rem; transition: all 0.2s ease-in-out; } .dropzone-multi .dropzone-item .dropzone-file .dropzone-filename { font-size: 0.9rem; font-weight: 500; color: #686c71; text-overflow: ellipsis; margin-right: 0.5rem; } .dropzone-multi .dropzone-item .dropzone-file .dropzone-filename b { font-size: 0.9rem; font-weight: 500; color: #686c71; } .dropzone-multi .dropzone-item .dropzone-file .dropzone-error { margin-top: 0.25rem; font-size: 0.9rem; font-weight: 400; color: #FF425C; text-overflow: ellipsis; } .dropzone-multi .dropzone-item .dropzone-toolbar { margin-left: 1rem; display: flex; flex-wrap: nowrap; } .dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-cancel, .dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-delete, .dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-start { height: 25px; width: 25px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-cancel i, .dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-delete i, .dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-start i { font-size: 0.8rem; color: #111; } .dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-cancel:hover i, .dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-delete:hover i, .dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-start:hover i { color: #19BCBF; } .dropzone-multi .dropzone-item .dropzone-toolbar .dropzone-start { transition: all 0.2s ease-in-out; } .uppy-Dashboard--modal { z-index: 1030; } .uppy-DragDrop--is-dragdrop-supported { border-color: #eff3f6; } .pc-uppy-thumbnail-container .pc-uppy-thumbnail img { width: 100px; } .slider-selection { box-shadow: none; } .pc-toggle-noUiSlider { height: 50px; } .pc-toggle-noUiSlider.off .noUi-handle { border-color: #FF425C; background: #FF425C; box-shadow: none; } .note-editor.card .card-header { padding: 0 5px 5px; border-bottom-color: #a9a9a9; } #cke5-inline-demo .ck-content { margin-bottom: 1rem; padding: 2.5rem; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); } #cke5-inline-demo .ck-content h3 { margin-top: 0; } #cke5-inline-demo header.ck-content { text-align: center; } #cke5-inline-demo header.ck-content h2:first-of-type { margin-top: 0; } #cke5-inline-demo header.ck-content h2 + h3 { margin-top: 0; color: #686c71; font-weight: 600; } #cke5-inline-demo .demo-row { width: 100%; display: flex; } #cke5-inline-demo .demo-row .demo-row__half { width: 50%; } #cke5-inline-demo .demo-row .demo-row__half:first-of-type { padding-right: 0.5rem; } #cke5-inline-demo .demo-row .demo-row__half:last-of-type { padding-left: 0.5rem; } #cke5-inline-demo .demo-row p { margin-bottom: 0; } #cke5-inline-demo .demo-row h3 { margin: 0; font-weight: 600; } .switch-demo .custom-switch-v1 { margin-bottom: 4px; } .custom-switch-v1.form-switch { padding-left: 2.9em; } .custom-switch-v1.form-switch .custom-control-input { height: 20px; width: 35px; margin-left: -2.9em; transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } .custom-switch-v1.form-switch .custom-control-input[class*=input-light-] { border: none; } .custom-switch-v1.form-switch .custom-control-input:focus { box-shadow: none; border-color: rgba(0, 0, 0, 0.25); } .custom-switch-v1.form-switch .custom-control-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%23ffffff'/%3e%3c/svg%3e"); } .custom-switch-v1.form-switch .custom-control-input.input-light-primary:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%2319BCBF'/%3e%3c/svg%3e"); } .custom-switch-v1.form-switch .custom-control-input.input-light-secondary:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%237E858E'/%3e%3c/svg%3e"); } .custom-switch-v1.form-switch .custom-control-input.input-light-success:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%2313bd8a'/%3e%3c/svg%3e"); } .custom-switch-v1.form-switch .custom-control-input.input-light-info:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%232DCEE3'/%3e%3c/svg%3e"); } .custom-switch-v1.form-switch .custom-control-input.input-light-warning:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%23FF9764'/%3e%3c/svg%3e"); } .custom-switch-v1.form-switch .custom-control-input.input-light-danger:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%23FF425C'/%3e%3c/svg%3e"); } .custom-switch-v1.form-switch .custom-control-input.input-light-light:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%23E4E5E6'/%3e%3c/svg%3e"); } .custom-switch-v1.form-switch .custom-control-input.input-light-dark:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='4.1' fill='%2339465C'/%3e%3c/svg%3e"); } .custom-switch-v1 .custom-control-label::before { transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1); height: 20px; width: 35px; border-radius: 0.8rem; top: 0; left: -2.55rem; } .custom-switch-v1 .custom-control-label::after { top: calc(0.15625rem - 2px); left: calc(-2.25rem - 4px); height: 19px; width: 19px; border-radius: 0.7rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05); transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1); } .custom-switch-v1 .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(0.95rem); } .row[data-multiselectsplitter-wrapper-selector] select { margin-bottom: 8px; } .choices { position: relative; margin-bottom: 5px; font-size: 16px; } .choices:focus { outline: none; } .choices:last-child { margin-bottom: 0; } .choices.is-disabled .choices__inner, .choices.is-disabled .choices__input { background-color: #eff3f6; cursor: not-allowed; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .choices.is-disabled .choices__item { cursor: not-allowed; } .choices [hidden] { display: none !important; } .choices[data-type*=select-one] { cursor: pointer; } .choices[data-type*=select-one] .choices__inner { padding-bottom: 7.5px; } .choices[data-type*=select-one] .choices__input { display: block; width: 100%; padding: 10px; border-bottom: 1px solid #ced4da; background-color: #fff; margin: 0; } .choices[data-type*=select-one] .choices__button { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.5; } .choices[data-type*=select-one] .choices__button:focus, .choices[data-type*=select-one] .choices__button:hover { opacity: 1; } .choices[data-type*=select-one] .choices__button:focus { box-shadow: 0 0 0 2px #19BCBF; } .choices[data-type*=select-one] .choices__item[data-value=""] .choices__button { display: none; } .choices[data-type*=select-one]:after { content: ""; height: 0; width: 0; border-style: solid; border-color: #495057 transparent transparent transparent; border-width: 5px; position: absolute; right: 11.5px; top: 50%; margin-top: -2.5px; pointer-events: none; } .choices[data-type*=select-one].is-open:after { border-color: transparent transparent #495057 transparent; margin-top: -7.5px; } .choices[data-type*=select-one][dir=rtl]:after { left: 11.5px; right: auto; } .choices[data-type*=select-one][dir=rtl] .choices__button { right: auto; left: 0; margin-left: 25px; margin-right: 0; } .choices[data-type*=select-multiple] .choices__inner, .choices[data-type*=text] .choices__inner { cursor: text; } .choices[data-type*=select-multiple] .choices__button, .choices[data-type*=text] .choices__button { position: relative; display: inline-block; margin: 0 -4px 0 8px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.35); background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="); background-size: 8px; width: 8px; line-height: 1; opacity: 0.75; border-radius: 0; } .choices[data-type*=select-multiple] .choices__button:focus, .choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=text] .choices__button:focus, .choices[data-type*=text] .choices__button:hover { opacity: 1; } .choices__inner { display: inline-block; vertical-align: top; width: 100%; background-color: #fff; padding: 7.5px 7.5px 3.75px; border: 2px solid #ced4da; border-radius: 0.375rem; font-size: 14px; min-height: 44px; overflow: hidden; } .is-focused .choices__inner, .is-open .choices__inner { border-color: #19BCBF; } .is-open .choices__inner { border-radius: 0.375rem 0.375rem 0 0; } .is-flipped.is-open .choices__inner { border-radius: 0 0 0.375rem 0.375rem; } .choices__list { margin: 0; padding-left: 0; list-style: none; } .choices__list--single { display: inline-block; padding: 4px 16px 4px 4px; width: 100%; } [dir=rtl] .choices__list--single { padding-right: 4px; padding-left: 16px; } .choices__list--single .choices__item { width: 100%; } .choices__list--multiple { display: inline; } .choices__list--multiple .choices__item { display: inline-block; vertical-align: middle; border-radius: 3px; padding: 4px 10px; font-size: 12px; font-weight: 500; margin-right: 3.75px; margin-bottom: 3.75px; background-color: #19BCBF; border: 1px solid #16a6a8; color: #ffffff; word-break: break-all; box-sizing: border-box; } .choices__list--multiple .choices__item[data-deletable] { padding-right: 5px; } [dir=rtl] .choices__list--multiple .choices__item { margin-right: 0; margin-left: 3.75px; } .choices__list--multiple .choices__item.is-highlighted { background-color: #16a6a8; border: 1px solid #139092; } .is-disabled .choices__list--multiple .choices__item { background-color: #9db6c8; border: 1px solid #7d9db6; } .choices__list--dropdown { visibility: hidden; z-index: 1; position: absolute; width: 100%; background-color: #fff; border: 1px solid #ced4da; top: 100%; margin-top: -1px; border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem; overflow: hidden; word-break: break-all; will-change: visibility; } .choices__list--dropdown.is-active { visibility: visible; } .is-open .choices__list--dropdown { border-color: #a2aeb9; } .is-flipped .choices__list--dropdown { top: auto; bottom: 100%; margin-top: 0; margin-bottom: -1px; border-radius: 0.25rem 0.25rem 0 0; } .choices__list--dropdown .choices__list { position: relative; max-height: 300px; overflow: auto; -webkit-overflow-scrolling: touch; will-change: scroll-position; } .choices__list--dropdown .choices__item { position: relative; padding: 10px; font-size: 14px; } [dir=rtl] .choices__list--dropdown .choices__item { text-align: right; } @media (min-width: 640px) { .choices__list--dropdown .choices__item--selectable { padding-right: 100px; } .choices__list--dropdown .choices__item--selectable:after { content: attr(data-select-text); font-size: 12px; opacity: 0; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } [dir=rtl] .choices__list--dropdown .choices__item--selectable { text-align: right; padding-left: 100px; padding-right: 10px; } [dir=rtl] .choices__list--dropdown .choices__item--selectable:after { right: auto; left: 10px; } } .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: rgba(25, 188, 191, 0.1); } .choices__list--dropdown .choices__item--selectable.is-highlighted:after { opacity: 0.5; } .choices__item { cursor: default; } .choices__item--selectable { cursor: pointer; } .choices__item--disabled { cursor: not-allowed; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0.5; } .choices__heading { font-weight: 600; font-size: 12px; padding: 10px; border-bottom: 1px solid #ebeef0; color: gray; } .choices__button { text-indent: -9999px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; cursor: pointer; } .choices__button:focus { outline: none; } .choices__input { display: inline-block; vertical-align: baseline; background-color: #fff; font-size: 14px; margin-bottom: 0; border: 0; color: #495057; border-radius: 0; max-width: 100%; padding: 4px 0 4px 2px; } .choices__input:focus { outline: 0; } [dir=rtl] .choices__input { padding-right: 2px; padding-left: 0; } .choices__placeholder { opacity: 0.5; } .btn.bootstrap-touchspin-down > i, .btn.bootstrap-touchspin-up > i { margin-right: 0; } .bt-wizard .nav { background: #eff3f6; padding: 0; } .bt-wizard .nav .nav-link.active { box-shadow: 0 0 5px 2px rgba(25, 188, 191, 0.3); } .pc-wizard .card-body .tab-content, .pc-wizard-details .card-body .tab-content, .pc-wizard-subtitle .card-body .tab-content, .pc-wizard-subtitle-vertical .card-body .tab-content { box-shadow: none; } .pc-wizard .nav.nav-tabs { border-bottom: 1px solid #e2e5e8; } .pc-wizard .nav.nav-tabs .nav-item { margin-bottom: 0; } .pc-wizard .nav.nav-tabs .nav-link { border-radius: 0; border: none; font-size: 16px; color: #686c71; background: no-repeat center bottom, center 100%; background-size: 0 100%, 100% 100%; transition: background 0.3s ease-out; background-image: linear-gradient(to top, #19BCBF 2px, rgba(255, 255, 255, 0) 2px); opacity: 0.7; } .pc-wizard .nav.nav-tabs .nav-link i { margin-right: 10px; } .pc-wizard .nav.nav-tabs .nav-link.active, .pc-wizard .nav.nav-tabs .show > .nav-link { background-size: 100% 100%, 100% 100%; opacity: 1; color: #19BCBF; box-shadow: none; } .pc-wizard-details .nav { background: #f6f8fa; } .pc-wizard-details .nav.nav-tabs { border-bottom: 1px solid #e2e5e8; } .pc-wizard-details .nav.nav-tabs .nav-item { margin-bottom: -1px; } .pc-wizard-details .nav.nav-tabs .nav-link { padding: 0.8rem 2rem; font-size: 16px; color: #686c71; background: transparent; opacity: 0.7; } .pc-wizard-details .nav.nav-tabs .nav-link i { margin-bottom: 5px; font-size: 20px; opacity: 0.3; display: block; text-align: center; } .pc-wizard-details .nav.nav-tabs .nav-link.active, .pc-wizard-details .nav.nav-tabs .show > .nav-link { background: #fff; opacity: 1; font-weight: 500; color: #19BCBF; } .pc-wizard-details .nav.nav-tabs .nav-link.active i, .pc-wizard-details .nav.nav-tabs .show > .nav-link i { opacity: 0.8; } .pc-wizard-subtitle .nav.nav-tabs { border-bottom: 1px solid #e2e5e8; } .pc-wizard-subtitle .nav.nav-tabs .nav-item { margin-bottom: -1px; } .pc-wizard-subtitle .nav.nav-tabs .nav-link { padding: 1rem 1.5rem; color: #686c71; border: none; opacity: 0.7; display: flex; align-items: center; background: no-repeat center bottom, center 100%; background-size: 0 100%, 100% 100%; transition: background 0.3s ease-out; background-image: linear-gradient(to top, #19BCBF 2.5px, rgba(255, 255, 255, 0) 2.5px); } .pc-wizard-subtitle .nav.nav-tabs .nav-link .num-icon { width: 30px; height: 30px; border-radius: 2px; margin-right: 10px; background: #e8eef2; color: #686c71; display: inline-flex; align-items: center; justify-content: center; } .pc-wizard-subtitle .nav.nav-tabs .nav-link h6 { margin-bottom: 0; } .pc-wizard-subtitle .nav.nav-tabs .nav-link i { margin-right: 14px; font-size: 30px; opacity: 0.3; display: block; text-align: center; } .pc-wizard-subtitle .nav.nav-tabs .nav-link.active, .pc-wizard-subtitle .nav.nav-tabs .show > .nav-link { background-size: 100% 100%, 100% 100%; opacity: 1; box-shadow: none; } .pc-wizard-subtitle .nav.nav-tabs .nav-link.active i, .pc-wizard-subtitle .nav.nav-tabs .show > .nav-link i { opacity: 1; color: #19BCBF; } .pc-wizard-subtitle .nav.nav-tabs .nav-link.active .num-icon, .pc-wizard-subtitle .nav.nav-tabs .show > .nav-link .num-icon { background: #19BCBF; color: #fff; } .nav.tab-wizard.card-header { background: transparent; } .pc-wizard-subtitle-vertical .nav { background: #f2f5f8; } .pc-wizard-subtitle-vertical .nav.nav-tabs { border-bottom: 1px solid #e2e5e8; } .pc-wizard-subtitle-vertical .nav.nav-tabs .nav-item { margin-bottom: -1px; } .pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link { padding: 1rem 1.5rem; border-radius: 0; color: #686c71; border: none; opacity: 0.7; display: flex; align-items: center; background: no-repeat center left, center 100%; background-size: 100% 0, 100% 100%; transition: background 0.3s ease-out; background-image: linear-gradient(to left, #19BCBF 2.5px, rgba(255, 255, 255, 0) 2.5px); } .pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link .num-icon { width: 30px; height: 30px; border-radius: 2px; margin-right: 10px; background: #e8eef2; color: #686c71; display: inline-flex; align-items: center; justify-content: center; } .pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link h6 { margin-bottom: 0; } .pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link i { margin-right: 14px; font-size: 30px; opacity: 0.3; display: block; text-align: center; } .pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link.active, .pc-wizard-subtitle-vertical .nav.nav-tabs .show > .nav-link { background-size: 100% 100%, 100% 100%; opacity: 1; box-shadow: none; } .pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link.active i, .pc-wizard-subtitle-vertical .nav.nav-tabs .show > .nav-link i { opacity: 1; color: #19BCBF; } .pc-wizard-subtitle-vertical .nav.nav-tabs .nav-link.active .num-icon, .pc-wizard-subtitle-vertical .nav.nav-tabs .show > .nav-link .num-icon { background: #19BCBF; color: #fff; } .tab-wizard.nav .nav-item .nav-link { background: rgba(255, 255, 255, 0.4); } .tab-wizard.nav .nav-item + .nav-item .nav-link { margin-left: 10px; } .tab-wizard.nav .nav-link.active, .tab-wizard.nav .show > .nav-link { background: #fff; } .sw-theme-default { box-shadow: none; } .sw-theme-default .sw-container { min-height: auto; } .sw-theme-default .step-content { margin-top: 30px; padding: 10px; border: 0 solid #e2e5e8; background-color: #FFF; text-align: left; } .sw-theme-default .sw-toolbar { background: #f9f9f9; border-radius: 0 !important; padding: 10px; margin-bottom: 0 !important; } .sw-theme-default .sw-toolbar-top { border-bottom-color: #e2e5e8 !important; } .sw-theme-default .sw-toolbar-bottom { background: transparent; border-top-color: #e2e5e8 !important; } .sw-theme-default > ul.step-anchor > li { position: relative; margin-right: 2px; } .sw-theme-default > ul.step-anchor > li > a { color: #686c71; } .sw-theme-default > ul.step-anchor > li > a:hover { color: #686c71; } .sw-theme-default > ul.step-anchor > li.clickable > a:hover, .sw-theme-default > ul.step-anchor > li.clickable > a:hover h6 { color: #19BCBF !important; } .sw-theme-default > ul.step-anchor > li > a::after { background: #19BCBF; height: 2px; } .sw-theme-default > ul.step-anchor > li.active > a, .sw-theme-default > ul.step-anchor > li.active > a h6 { color: #19BCBF !important; } .sw-theme-default > ul.step-anchor > li.done > a { color: #111 !important; } .sw-theme-default > ul.step-anchor > li.done > a::after { background: #13bd8a; } .sw-theme-default > ul.step-anchor > li.danger > a, .sw-theme-default > ul.step-anchor > li.danger > a h6 { color: #FF425C !important; } .sw-theme-default > ul.step-anchor > li.danger > a::after, .sw-theme-default > ul.step-anchor > li.danger > a h6::after { background: #FF425C; border-left-color: color-level(#FF425C, -9); } .sw-theme-default > ul.step-anchor > li.disabled > a { opacity: 0.5; } .sw-theme-arrows { border-radius: 2px; border: 1px solid #e2e5e8; } .sw-theme-arrows > .sw-container { min-height: auto; } .sw-theme-arrows .step-content { margin-top: 30px; border: 0 solid #e2e5e8; } .sw-theme-arrows > ul.step-anchor { border-bottom: 1px solid #e2e5e8; background: #eff3f6; border-top-right-radius: 2px; } .sw-theme-arrows > ul.step-anchor > li > a { color: #686c71; background: #eff3f6; } .sw-theme-arrows > ul.step-anchor > li > a:hover { color: #686c71; background: #eff3f6; } .sw-theme-arrows > ul.step-anchor > li > a:after { border-left: 30px solid #eff3f6; } .sw-theme-arrows > ul.step-anchor > li > a:before { border-left: 30px solid #eff3f6; } .sw-theme-arrows > ul.step-anchor > li:first-child > a { padding-left: 15px; } .sw-theme-arrows > ul.step-anchor > li > a:hover { color: #686c71; background: #e2e5e8; border-color: #e2e5e8; } .sw-theme-arrows > ul.step-anchor > li > a:hover:after { border-left-color: #e2e5e8; } .sw-theme-arrows > ul.step-anchor > li.clickable > a:hover { color: #19BCBF !important; background: #2DCEE3 !important; } .sw-theme-arrows > ul.step-anchor > li.active > a { border-color: #19BCBF !important; color: #fff !important; background: #19BCBF !important; } .sw-theme-arrows > ul.step-anchor > li.active > a h6 { color: #fff !important; } .sw-theme-arrows > ul.step-anchor > li.active > a:after { border-left: 30px solid #19BCBF !important; } .sw-theme-arrows > ul.step-anchor > li.done > a { border-color: color-level(#19BCBF -9) !important; color: #19BCBF !important; background: color-level(#19BCBF -9) !important; } .sw-theme-arrows > ul.step-anchor > li.done > a h6 { color: #19BCBF !important; } .sw-theme-arrows > ul.step-anchor > li.done > a:after { border-left: 30px solid color-level(#19BCBF -9); } .sw-theme-arrows > ul.step-anchor > li.danger > a { border-color: #FF425C !important; color: #fff !important; background: #FF425C !important; } .sw-theme-arrows > ul.step-anchor > li.danger > a:after { border-left: 30px solid #FF425C !important; } .sw-theme-arrows > ul.step-anchor > li.disabled > a { opacity: 0.5; } .sw-theme-arrows::before { border: 10px solid #e2e5e8; border-top: 10px solid #13bd8a; } .sw-theme-circles .step-content { margin-top: 30px; } .sw-theme-circles .sw-toolbar-bottom { border-top-color: #e2e5e8 !important; border-bottom-color: #e2e5e8 !important; } .sw-theme-circles > ul.step-anchor { background: #fff; } .sw-theme-circles > ul.step-anchor:before { background-color: #eff3f6; border-radius: 2px; } .sw-theme-circles > ul.step-anchor > li { margin-left: 40px; } .sw-theme-circles > ul.step-anchor > li > a { border: 2px solid #eff3f6; background: #eff3f6; color: #686c71; background: #eff3f6; } .sw-theme-circles > ul.step-anchor > li > a:hover { color: #686c71; background: #eff3f6; } .sw-theme-circles > ul.step-anchor > li > a > p { position: relative; font-size: 80%; bottom: -30px; color: #686c71; } .sw-theme-circles > ul.step-anchor > li.clickable > a:hover { color: #19BCBF !important; } .sw-theme-circles > ul.step-anchor > li.active > a { border-color: #19BCBF; background: #19BCBF; color: #fff; } .sw-theme-circles > ul.step-anchor > li.active > a h6 { color: #fff; } .sw-theme-circles > ul.step-anchor > li.active > a > p { color: #19BCBF; } .sw-theme-circles > ul.step-anchor > li.done > a { border-color: #13bd8a; background: #13bd8a; color: #fff; } .sw-theme-circles > ul.step-anchor > li.done > a h6 { color: #fff; } .sw-theme-circles > ul.step-anchor > li.done > a > p { color: #13bd8a; } .sw-theme-circles > ul.step-anchor > li.danger > a { border-color: #FF425C; background: #fff; color: #FF425C; } .sw-theme-circles > ul.step-anchor > li.danger > a h6 { color: #FF425C; } .sw-theme-circles > ul.step-anchor > li.danger > a > small { color: #FF425C; } .sw-theme-circles > ul.step-anchor > li.disabled > a { opacity: 0.5; } .sw-theme-dots .step-content { margin-top: 30px; } .sw-theme-dots .sw-toolbar-top { border-bottom-color: #e2e5e8 !important; } .sw-theme-dots .sw-toolbar-bottom { border-top-color: #e2e5e8 !important; border-bottom-color: #e2e5e8 !important; } .sw-theme-dots > ul.step-anchor { border: 0 solid #e2e5e8 !important; } .sw-theme-dots > ul.step-anchor:before { background-color: #eff3f6; } .sw-theme-dots > ul.step-anchor > li > a { color: #686c71; } .sw-theme-dots > ul.step-anchor > li > a:before { color: #19BCBF; background: #eff3f6; } .sw-theme-dots > ul.step-anchor > li > a:after { background: #eff3f6; } .sw-theme-dots > ul.step-anchor > li > a:hover { color: #686c71; } .sw-theme-dots > ul.step-anchor > li > a:focus { color: #686c71; } .sw-theme-dots > ul.step-anchor > li.clickable > a:hover { color: #686c71; } .sw-theme-dots > ul.step-anchor > li.active > a, .sw-theme-dots > ul.step-anchor > li.active > a h6 { color: #19BCBF; } .sw-theme-dots > ul.step-anchor > li.active > a:after, .sw-theme-dots > ul.step-anchor > li.active > a h6:after { background: #19BCBF; } .sw-theme-dots > ul.step-anchor > li.done > a, .sw-theme-dots > ul.step-anchor > li.done > a h6 { color: #13bd8a; } .sw-theme-dots > ul.step-anchor > li.done > a:after, .sw-theme-dots > ul.step-anchor > li.done > a h6:after { background: #13bd8a; } .sw-theme-dots > ul.step-anchor > li.danger > a, .sw-theme-dots > ul.step-anchor > li.danger > a h6 { color: #FF425C; } .sw-theme-dots > ul.step-anchor > li.danger > a:after, .sw-theme-dots > ul.step-anchor > li.danger > a h6:after { background: #FF425C; } .sw-theme-dots > ul.step-anchor > li.disabled > a { opacity: 0.5; } /* Responsive CSS */ @media screen and (max-width: 768px) { .sw-theme-dots > ul.step-anchor:before { background-color: #eff3f6; } } .smartwizard-example .nav-link { padding-left: calc(2.5rem + 15px); } .smartwizard-example.sw-main, .smartwizard-example .sw-container { display: flex; flex-direction: column; width: 100%; } .smartwizard-example .sw-container { flex-shrink: 1; } .smartwizard-example .step-anchor { flex-direction: row; } .smartwizard-example .step-anchor:not(.card) { border: 0; } .smartwizard-example .step-anchor li { display: flex; flex-grow: 1; } .smartwizard-example .step-anchor li > a { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 2rem 0 3.75rem; min-height: 2.5rem; outline: 0 !important; border: 0 !important; background: transparent !important; text-decoration: none; font-weight: 500; opacity: 0.4; cursor: default; } .smartwizard-example .step-anchor li > a:after { display: none; } .smartwizard-example .step-anchor li > a .small, .smartwizard-example .step-anchor li > a small { font-weight: normal; } .smartwizard-example .step-anchor li.active > a, .smartwizard-example .step-anchor li.clickable > a, .smartwizard-example .step-anchor li.done > a { opacity: 1; } .smartwizard-example .step-anchor li.active > a, .smartwizard-example .step-anchor li.clickable > a { cursor: pointer; } .smartwizard-example .step-anchor li.done > a { cursor: pointer; } .smartwizard-example .step-anchor li.disabled > a, .smartwizard-example .step-anchor li.disabled > a:hover { cursor: not-allowed !important; } .smartwizard-example .sw-done-icon, .smartwizard-example .sw-icon, .smartwizard-example .sw-number { position: absolute; top: 50%; left: 0; margin-top: -1.25rem; width: 2.5rem; height: 2.5rem; border: 2px solid; border-radius: 50%; text-align: center; line-height: calc(2.5rem - 4px); } .smartwizard-example .sw-done-icon, .smartwizard-example .sw-icon { font-size: 1rem; } .smartwizard-example .sw-done-icon { display: none; } .smartwizard-example .step-anchor li.done .sw-done-icon { display: block; } .smartwizard-example .step-anchor li.done .sw-done-icon ~ .sw-icon, .smartwizard-example .step-anchor li.done .sw-done-icon ~ .sw-number { display: none; } .smartwizard-example .wizard-number { font-weight: 500; } .smartwizard-example .step-anchor li.done .sw-done-icon, .smartwizard-example .step-anchor li.done .sw-icon, .smartwizard-example .step-anchor li.done .sw-number { opacity: 0.4; } .smartwizard-example .step-anchor > li.active > a .sw-done-icon, .smartwizard-example .step-anchor > li.active > a .sw-icon, .smartwizard-example .step-anchor > li.active > a .sw-number { border-color: #19BCBF; } .smartwizard-example .step-content { position: relative; display: none; margin: 0; width: 100%; } .smartwizard-example .sw-toolbar { justify-content: flex-end; padding: 0; } .sw-theme-default .step-anchor li > a { color: #686c71; } .sw-theme-default .step-anchor li.danger > a { color: #FF425C !important; } .sw-theme-default .sw-done-icon, .sw-theme-default .sw-icon, .sw-theme-default .sw-number { border-color: #e2e5e8; } .sw-theme-default .step-anchor li.danger .sw-done-icon, .sw-theme-default .step-anchor li.danger .sw-icon, .sw-theme-default .step-anchor li.danger .sw-number { border-color: #FF425C !important; color: #FF425C !important; } @media (min-width: 992px) { .smartwizard-vertical-left.sw-main, .smartwizard-vertical-right.sw-main { flex-direction: row; } .smartwizard-vertical-left .step-anchor, .smartwizard-vertical-right .step-anchor { align-self: flex-start; flex-direction: column; } .smartwizard-vertical-left .step-anchor li, .smartwizard-vertical-right .step-anchor li { flex-grow: 0; } .sw-theme-default.smartwizard-vertical-right { flex-direction: row-reverse; } .sw-theme-default.smartwizard-vertical-right .step-anchor li > a { padding: 0 0 0 5.75rem; } .sw-theme-default.smartwizard-vertical-right .sw-done-icon, .sw-theme-default.smartwizard-vertical-right .sw-icon, .sw-theme-default.smartwizard-vertical-right .sw-number { left: 2rem; } } .tabcontrol, .wizard { display: block; width: 100%; overflow: hidden; } .tabcontrol a, .wizard a { outline: 0; } .tabcontrol ul, .wizard ul { list-style: none !important; padding: 0; margin: 0; } .tabcontrol ul > li, .wizard ul > li { display: block; padding: 0; } /* Accessibility */ .tabcontrol > .content > .title, .tabcontrol > .steps .current-info, .wizard > .content > .title, .wizard > .steps .current-info { position: absolute; left: -999em; } /* Wizard */ .wizard > .steps { position: relative; display: block; width: 100%; } .wizard.vertical > .steps { display: inline; float: left; width: 30%; } .wizard.vertical > .steps > ul > li { float: none; width: 100%; } .wizard.vertical > .content { display: inline; float: left; margin: 0 2.5% 0.5em; width: 65%; } .wizard.vertical > .actions { display: inline; float: right; margin: 0 2.5%; width: 95%; } .wizard.vertical > .actions > ul > li { margin: 0 0 0 1em; } .wizard > .steps .number { font-size: 1.429em; } .wizard > .steps > ul > li { width: 25%; float: left; } .wizard > .actions > ul > li { float: left; } .wizard > .steps a { display: block; width: auto; margin: 0 0.5em 0.5em; padding: 1em; text-decoration: none; border-radius: 5px; } .wizard > .steps a:active, .wizard > .steps a:hover { display: block; width: auto; margin: 0 0.5em 0.5em; padding: 1em; text-decoration: none; border-radius: 5px; } .wizard > .steps .disabled a { background: #eff3f6; color: #686c71; cursor: default; opacity: 0.6; } .wizard > .steps .disabled a:active, .wizard > .steps .disabled a:hover { background: #eff3f6; color: #686c71; cursor: default; } .wizard > .steps .current a { background: #19BCBF; color: #fff; cursor: default; } .wizard > .steps .current a:active, .wizard > .steps .current a:hover { background: #19BCBF; color: #fff; cursor: default; } .wizard > .steps .done a { background: rgba(25, 188, 191, 0.2); color: #19BCBF; } .wizard > .steps .done a:active, .wizard > .steps .done a:hover { background: rgba(25, 188, 191, 0.2); color: #19BCBF; } .wizard > .steps .error a { background: #FF425C; color: #fff; } .wizard > .steps .error a:active, .wizard > .steps .error a:hover { background: #FF425C; color: #fff; } .wizard > .content { background: #f6f8fa; display: block; margin: 0.5em; min-height: 8em; overflow: hidden; position: relative; width: auto; border-radius: 5px; } .wizard > .content > .body { padding: 25px; } .wizard > .content > .body ul { list-style: disc !important; } .wizard > .content > .body ul > li { display: list-item; } .wizard > .content > .body > iframe { border: 0 none; width: 100%; height: 100%; } .wizard > .content > .body input.error { background: rgb(251, 227, 228); border-color: #FF425C; color: #FF425C; } .wizard > .content > .body label { display: inline-block; margin-bottom: 0.5em; } .wizard > .content > .body label.error { color: #FF425C; display: inline-block; margin-left: 1.5em; } .wizard > .actions { position: relative; display: block; text-align: right; width: 100%; } .wizard > .actions > ul { display: inline-block; text-align: right; } .wizard > .actions > ul > li { margin: 0 0.5em; } .wizard > .actions a { background: #19BCBF; color: #fff; display: block; padding: 0.5em 1em; text-decoration: none; border-radius: 5px; } .wizard > .actions a:active, .wizard > .actions a:hover { background: #19BCBF; color: #fff; display: block; padding: 0.5em 1em; text-decoration: none; border-radius: 5px; } .wizard > .actions .disabled a { background: #eff3f6; color: #aaa; } .wizard > .actions .disabled a:active, .wizard > .actions .disabled a:hover { background: #eff3f6; color: #aaa; } @media (max-width: 768px) { .wizard .steps > ul > li { width: 100%; } .wizard.vertical > .content, .wizard.vertical > .steps { width: 100%; } } .pc-wizard.wizard .number { display: none; } .pc-wizard.wizard > .steps a { display: flex; align-items: center; margin: 0.5em; position: relative; } .pc-wizard.wizard > .steps a:after { content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 20px; position: absolute; right: 0; top: 20px; opacity: 0.5; } .pc-wizard.wizard > .steps a span b { display: block; } .pc-wizard.wizard > .steps a .num-icon { width: 35px; height: 35px; border-radius: 2px; margin-right: 10px; background: #eff3f6; color: #686c71; display: inline-flex; align-items: center; justify-content: center; } .pc-wizard.wizard > .steps a.disabled:hover { background: transparent; } .pc-wizard.wizard > .steps a:hover { display: flex; } .pc-wizard.wizard > .steps > ul > li:last-child a:after { visibility: hidden; } .pc-wizard.wizard > .steps .disabled a { background: transparent; } .pc-wizard.wizard > .steps .current a { background: transparent; color: inherit; } .pc-wizard.wizard > .steps .current a .num-icon { background: #19BCBF; color: #fff; } .pc-wizard.wizard > .steps .done a { background: transparent; } .pc-wizard.wizard > .steps .done a .num-icon { background: rgba(25, 188, 191, 0.2); color: #19BCBF; } .pc-wizard.wizard > .steps .done a span { color: #686c71; } .pc-wizard.wizard > .content { margin: 0; border-radius: 0; border-top: 1px solid #e2e5e8; border-bottom: 1px solid #e2e5e8; } .pc-wizard.wizard > .actions { padding: 15px 25px 10px; } .pc-wizard.wizard.vertical > .content, .pc-wizard.wizard.vertical > .actions { margin: 0; background: #f6f8fa; width: 70%; border-left: 1px solid #e2e5e8; } .pc-wizard.wizard.vertical > .content { padding: 25px 25px 0; border-radius: 0 2px 0 0; } .pc-wizard.wizard.vertical .actions { padding: 25px; border-radius: 0 0 2px 0; } .pc-wizard.wizard.vertical > .steps { padding: 35px 10px; } .pc-wizard.wizard.vertical > .steps a:after { content: "\f101"; right: 10px; } .pc-wizard.wizard.vertical > .steps > ul > li:last-child a:after { visibility: visible; } @media (max-width: 768px) { .pc-wizard.wizard > .steps a:after { right: 15px; } .pc-wizard.wizard > .steps > ul > li:last-child a:after { visibility: visible; } .pc-wizard.wizard.vertical > .steps { padding: 0; } .pc-wizard.wizard.vertical > .content { padding: 0; } .pc-wizard.wizard.vertical > .content, .pc-wizard.wizard.vertical > .actions { width: 100%; } } .pc-tab-control.wizard .number { display: none; } .pc-tab-control.wizard > .steps a { display: flex; align-items: center; margin: 0.5em 0.5em 0; padding: 1em 1.6em; border-radius: 2px 2px 0 0; position: relative; background: rgba(255, 255, 255, 0.4); } .pc-tab-control.wizard > .steps a span { color: #686c71; } .pc-tab-control.wizard > .steps a span b { display: block; } .pc-tab-control.wizard > .steps a .num-icon { width: 35px; height: 35px; border-radius: 2px; margin-right: 10px; background: #eff3f6; display: inline-flex; align-items: center; justify-content: center; } .pc-tab-control.wizard > .steps a .num-icon .material-icons-two-tone { background-color: #686c71; } .pc-tab-control.wizard > .steps a.disabled:hover { background: transparent; } .pc-tab-control.wizard > .steps a:hover { display: flex; } .pc-tab-control.wizard > .steps .done a:active, .pc-tab-control.wizard > .steps .done a:hover { background: rgba(255, 255, 255, 0.4); } .pc-tab-control.wizard > .steps > ul > li:last-child a { margin-right: 0; } .pc-tab-control.wizard > .steps > ul > li:first-child a { margin-left: 0; } .pc-tab-control.wizard > .steps > ul > li:last-child a:after { visibility: hidden; } .pc-tab-control.wizard > .steps .disabled a { background: transparent; } .pc-tab-control.wizard > .steps .current a { background: #fff; color: inherit; } .pc-tab-control.wizard > .steps .current a .num-icon { background: #19BCBF; color: #fff; } .pc-tab-control.wizard > .steps .current a .num-icon .material-icons-two-tone { background-color: #fff; } .pc-tab-control.wizard > .content { margin: 0; border-radius: 0 0 2px 2px; background: #fff; box-shadow: 0 0 0 1px #e2e5e8; margin-bottom: 30px; } .pc-tab-control.wizard > .actions { padding: 15px 25px 10px; } @media (max-width: 768px) { .pc-tab-control.wizard > .steps a { margin: 0; border-radius: 2px; } } .card .card-header h5 + span { display: block; } .btn[data-handler=cmdSave] i { margin-right: 0; } .bootstrap-select > .dropdown-toggle.btn-light, .bootstrap-select > .dropdown-toggle.btn-secondary { border-width: 2px; border-color: #ced4da !important; box-shadow: 0 1px 2px 0 rgba(57, 70, 92, 0.05); background: #fff !important; color: #495057; border-radius: 0.375rem; } .bootstrap-select > .dropdown-toggle.btn-light:focus, .bootstrap-select > .dropdown-toggle.btn-secondary:focus { outline: none !important; } .daterangepicker { border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 0 25px rgba(25, 188, 191, 0.15); background-color: #fff; } .daterangepicker .calendar-table { border: 1px solid #fff; background-color: #fff; } .daterangepicker td.in-range { background-color: #6ce9ec; } .daterangepicker td.off, .daterangepicker td.off.end-date, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date { background-color: #fff; color: #686c71; opacity: 0.5; } .daterangepicker td.active, .daterangepicker td.active:hover { background-color: #19BCBF; color: #fff; } .daterangepicker td.available:hover, .daterangepicker th.available:hover { background-color: #19BCBF; color: #fff; } .daterangepicker td.available:hover > span, .daterangepicker th.available:hover > span { border-color: #fff; } .daterangepicker:after { border-bottom: 6px solid #fff; } .daterangepicker:before { border-bottom: 7px solid rgba(0, 0, 0, 0.15); } .daterangepicker .ranges ul { padding-top: 15px; padding-bottom: 15px; } @media (min-width: 564px) { .daterangepicker .ranges ul { width: 160px; } } .daterangepicker .ranges ul li { margin: 5px 10px; transition: all 0.2s ease-in-out; } .daterangepicker .ranges ul li.active { background-color: #19BCBF; } .daterangepicker .ranges ul li:hover { box-shadow: 0 15px 8px -9px rgba(0, 0, 0, 0.25); background-color: #19BCBF; color: #fff; } .select2-container--default .select2-selection--single, .select2-container--default .select2-selection { border: 2px solid #ced4da; } .select2-container .select2-selection--single { height: 48px; margin-bottom: 10px; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; } .select2-container .select2-selection--multiple { min-height: 46px; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 0 9px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { margin-right: 7px; margin-top: 9px; padding: 1px 7px; } .select2-container .select2-search--inline .select2-search__field { margin-top: 9px; } .select2-container--default.select2-container--focus .select2-selection--multiple { border: solid #e2e5e8 2px; } .select2-container--default .select2-selection--multiple { background-color: #fff; border: 2px solid #e2e5e8; border-radius: 3px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #19BCBF; border: 1px solid #19BCBF; color: #fff; border-radius: 3px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #fff; margin-right: 8px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #fff; } .custom-control-inline { margin-right: 0; } .repeater .btn-danger, .repeater2 .btn-danger { padding: 10px 12px; font-size: 18px; } .form-group { color: #666; margin-bottom: 1rem; } .form-control-color { width: 3rem; height: calc(1.5em + 1.6rem + 2px); padding: 0.8rem; } .custom-color .card-body, .custom-color .card { color: #686c71; } .form-select { background-image: unset; } /** ===================== Radio & Checked css start ========================== **/ .checkbox { padding: 10px 0; min-height: auto; position: relative; margin-right: 5px; } .checkbox input[type=checkbox] { margin: 0; display: none; width: 22px; } .checkbox input[type=checkbox] + .cr { padding-left: 0; } .checkbox input[type=checkbox] + .cr:before { content: "\e83f"; width: 22px; height: 22px; display: inline-block; margin-right: 10px; border: 2px solid #e9eaec; border-radius: 3px; font-size: 15px; font-family: "feather"; font-weight: 400; line-height: 19px; vertical-align: bottom; text-align: center; background: #ffffff; color: transparent; cursor: pointer; transition: all 0.2s ease-in-out; } .checkbox input[type=checkbox]:checked + .cr:before { background: #1dd5d2; border-color: #1dd5d2; color: #ffffff; } .checkbox input[type=checkbox].disabled + .cr, .checkbox input[type=checkbox]:disabled + .cr { opacity: 0.5; } .checkbox input[type=checkbox].disabled + .cr:before, .checkbox input[type=checkbox]:disabled + .cr:before { cursor: not-allowed; } .checkbox.checkbox-fill input[type=checkbox] + .cr:after { content: ""; width: 22.5px; height: 22.5px; display: inline-block; margin-right: 10px; border: 2px solid #e9eaec; border-radius: 2px; vertical-align: bottom; text-align: center; background: transparent; cursor: pointer; transition: all 0.2s ease-in-out; position: absolute; top: 8.5px; left: 3px; } .checkbox.checkbox-fill input[type=checkbox] + .cr:before { opacity: 0; content: "\e840"; font-size: 27px; background: transparent; } .checkbox.checkbox-fill input[type=checkbox]:checked + .cr:after { opacity: 0; } .checkbox.checkbox-fill input[type=checkbox]:checked + .cr:before { opacity: 1; background: transparent; color: #1dd5d2; border-color: transparent; } .checkbox.checkbox-primary input[type=checkbox]:checked + .cr:before { background: #19BCBF; border-color: #19BCBF; color: #ffffff; } .checkbox.checkbox-fill.checkbox-primary input[type=checkbox]:checked + .cr:before { background: transparent; color: #19BCBF; border-color: transparent; } .checkbox.checkbox-danger input[type=checkbox]:checked + .cr:before { background: #FF425C; border-color: #FF425C; color: #ffffff; } .checkbox.checkbox-fill.checkbox-danger input[type=checkbox]:checked + .cr:before { background: transparent; color: #FF425C; border-color: transparent; } .checkbox.checkbox-success input[type=checkbox]:checked + .cr:before { background: #13bd8a; border-color: #13bd8a; color: #ffffff; } .checkbox.checkbox-fill.checkbox-success input[type=checkbox]:checked + .cr:before { background: transparent; color: #13bd8a; border-color: transparent; } .checkbox.checkbox-warning input[type=checkbox]:checked + .cr:before { background: #FF9764; border-color: #FF9764; color: #ffffff; } .checkbox.checkbox-fill.checkbox-warning input[type=checkbox]:checked + .cr:before { background: transparent; color: #FF9764; border-color: transparent; } .checkbox.checkbox-purple input[type=checkbox]:checked + .cr:before { background: #463699; border-color: #463699; color: #ffffff; } .checkbox.checkbox-fill.checkbox-purple input[type=checkbox]:checked + .cr:before { background: transparent; color: #463699; border-color: transparent; } .checkbox.checkbox-info input[type=checkbox]:checked + .cr:before { background: #2DCEE3; border-color: #2DCEE3; color: #ffffff; } .checkbox.checkbox-fill.checkbox-info input[type=checkbox]:checked + .cr:before { background: transparent; color: #2DCEE3; border-color: transparent; } .checkbox .cr { cursor: pointer; } .radio { padding: 10px 0; min-height: auto; position: relative; margin-right: 5px; } .radio input[type=radio] { margin: 0; display: none; width: 20px; } .radio input[type=radio] + .cr { position: relative; padding-left: 0; } .radio input[type=radio] + .cr:after, .radio input[type=radio] + .cr:before { content: ""; display: inline-block; margin-right: 10px; border-radius: 50%; vertical-align: bottom; background: #fff; color: transparent; cursor: pointer; transition: all 0.2s ease-in-out; } .radio input[type=radio] + .cr:before { width: 20px; height: 20px; border: 2px solid #e9eaec; } .radio input[type=radio] + .cr:after { width: 12px; height: 12px; position: absolute; top: 5px; left: 4px; } .radio input[type=radio]:checked + .cr:before { border-color: #19BCBF; } .radio input[type=radio]:checked + .cr:after { background: #19BCBF; } .radio input[type=radio]:disabled + .cr { opacity: 0.5; cursor: not-allowed; } .radio input[type=radio]:disabled + .cr:after, .radio input[type=radio]:disabled + .cr:before { cursor: not-allowed; } .radio.radio-fill input[type=radio] + .cr:after { width: 20px; height: 20px; top: 0; left: 0; } .radio.radio-primary input[type=radio]:checked + .cr:before { border-color: #19BCBF; } .radio.radio-primary input[type=radio]:checked + .cr:after { background: #19BCBF; } .radio.radio-danger input[type=radio]:checked + .cr:before { border-color: #FF425C; } .radio.radio-danger input[type=radio]:checked + .cr:after { background: #FF425C; } .radio.radio-success input[type=radio]:checked + .cr:before { border-color: #13bd8a; } .radio.radio-success input[type=radio]:checked + .cr:after { background: #13bd8a; } .radio.radio-warning input[type=radio]:checked + .cr:before { border-color: #FF9764; } .radio.radio-warning input[type=radio]:checked + .cr:after { background: #FF9764; } .radio.radio-purple input[type=radio]:checked + .cr:before { border-color: #463699; } .radio.radio-purple input[type=radio]:checked + .cr:after { background: #463699; } .radio.radio-info input[type=radio]:checked + .cr:before { border-color: #2DCEE3; } .radio.radio-info input[type=radio]:checked + .cr:after { background: #2DCEE3; } .radio .cr { cursor: pointer; } @-moz-document url-prefix() {} .custom-controls-stacked .radio input[type=radio] + .cr:after { top: 15px; } /**====== Radio & Checked css end ======**/ /** ===================== Label & Badges css start ========================== **/ .label { padding: 4px 10px; min-height: auto; position: relative; margin-right: 5px; margin-bottom: 5px; } .label.label-primary { background: #19BCBF; color: #ffffff; } .label.label-danger { background: #FF425C; color: #ffffff; } .label.label-success { background: #13bd8a; color: #ffffff; } .label.label-warning { background: #FF9764; color: #ffffff; } .label.label-purple { background: #463699; color: #ffffff; } .label.label-info { background: #2DCEE3; color: #ffffff; } .label-primary { background: #19BCBF; color: #fff; } .label-danger { background: #FF425C; color: #fff; } .label-success { background: #13bd8a; color: #fff; } .label-warning { background: #FF9764; color: #fff; } .label-purple { background: #463699; color: #fff; } .label-info { background: #2DCEE3; color: #fff; } .badge span { display: block; margin-bottom: -1px; } /**====== Label & Badges css end ======**/ /** ===================== Data Tables css start ========================== **/ .table { --bs-table-hover-bg: rgba(239, 243, 246, 0.5); --bs-table-color-state: #111; } .email-card .tab-content .table tr.unread td { --bs-table-bg: rgba(239, 243, 246, 0.7); } .table td, .table th { border-top: 1px solid #e2e5e8; white-space: nowrap; padding: 1.05rem 0.75rem; border-bottom: none; } .table thead th { border-bottom: 1px solid #e2e5e8; font-size: 13px; color: #111; background: #eff3f6; text-transform: uppercase; } .table tbody + tbody { border-top: 2px solid #e2e5e8; } .table.table-dark thead th { background-color: #11171a; } .table.dataTable[class*=table-] thead th { background: #eff3f6; } .table-info { --bs-table-bg: #bee5eb; } .table-primary { --bs-table-bg: #b8daff; } .table-dark:not(caption) > * > * { --bs-table-color-state: #fff !important; } /* Border versions */ .table-bordered { border: 1px solid #e2e5e8; } .table-bordered td, .table-bordered th { border: 1px solid #e2e5e8; } /* Zebra-striping */ .table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(25, 188, 191, 0.03); } .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: rgba(25, 188, 191, 0.03); } /* Hover effect */ .table-hover tbody tr:hover { background-color: rgba(25, 188, 191, 0.03); } /* Table backgrounds */ .table .thead-dark th { color: #fff; background-color: #39465C; border-color: #252e3d; } .table-dark { color: #fff; background-color: #39465C; } .table-dark td, .table-dark th, .table-dark thead th { border-color: #252e3d; } .table-dark.table-striped tbody tr:nth-of-type(odd) { background-color: #354156; } .table-dark.table-hover tbody tr:hover { background-color: #2f3a4c; } .table-dark thead th { color: #fff; } /* fixed header position */ table.dataTable.fixedHeader-floating { top: 60 !important; } @media screen and (max-width: 992px) { table.dataTable.fixedHeader-floating { display: none !important; } } @media screen and (max-width: 992px) { .fixedHeader-locked { display: none !important; } } /** ===================== Foo-table css start ========================== **/ .footable .pagination > .active > a, .footable .pagination > .active > span { background-color: #19BCBF; border-color: #19BCBF; } .footable .pagination > .active > a:focus, .footable .pagination > .active > a:hover, .footable .pagination > .active > span:focus, .footable .pagination > .active > span:hover { background-color: #19BCBF; border-color: #19BCBF; } .footable .pagination > li > a, .footable .pagination > li > span { color: #222; } .footable-details.table, .footable.table { margin-bottom: 0; } table.footable > tfoot > tr.footable-paging > td > span.label { margin-bottom: 0; } table.footable-paging-center > tfoot > tr.footable-paging > td { padding-bottom: 0; } .table-columned > tbody > tr > td { border: 0; border-left: 1px solid #e2e5e8; } .table-columned > tbody > tr > th { border: 0; } /**====== Foo-table css end ======**/ /**======= basic table css start =======**/ .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; } /**======= basic table css end ======**/ #row-delete .selected, #row-select .selected { background-color: #19BCBF; color: #fff; } table.dataTable td.focus { outline: 1px solid #19BCBF; outline-offset: -3px; color: #fff; background: linear-gradient(-45deg, #19BCBF, #149698) !important; } table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected { background: rgba(25, 188, 191, 0.12); } table.dataTable tbody > tr.selected td.select-checkbox:after, table.dataTable tbody > tr.selected th.select-checkbox:after, table.dataTable tbody > tr > .selected td.select-checkbox:after, table.dataTable tbody > tr > .selected th.select-checkbox:after { text-shadow: 1px 1px #e4f2fe, -1px -1px #e4f2fe, 1px -1px #e4f2fe, -1px 1px #e4f2fe; } table.dataTable tbody > tr.selected td, table.dataTable tbody > tr > .selected td { background: transparent; } .table-dark { --bs-table-bg: #39465C; } /**====== Data Tables css end ======**/ /** ===================== Authentication css start ========================== **/ .auth-wrapper { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 100%; min-height: 100vh; } @media (min-width: 1200px) { .auth-wrapper .container { max-width: 1140px; } } .auth-wrapper .saprator { position: relative; margin: 8px 0; } .auth-wrapper .saprator span { background: #fff; position: relative; padding: 0 10px; z-index: 5; font-size: 20px; } .auth-wrapper .saprator:after { content: ""; position: absolute; top: 15px; left: 0; width: 100%; height: 1px; background: #e2e5e8; z-index: 1; } .auth-wrapper a, .auth-wrapper p > a { color: #111; font-weight: 600; } .auth-wrapper .btn-auth-gen .btn-icon { width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; font-size: 45px; } .auth-wrapper .btn-auth-gen .btn-icon small { font-size: 15px; } .auth-wrapper .input-group { background: transparent; } .auth-wrapper .card { margin-bottom: 0; padding: 8px; } .auth-wrapper .card .card-body { padding: 20px 25px 20px 40px; } .auth-wrapper > div { z-index: 5; } .auth-wrapper .auth-content { position: relative; padding: 15px; z-index: 5; } @media only screen and (max-width: 767px) { .auth-wrapper .card .card-body { padding: 30px 15px; } } .auth-wrapper.offline { background-image: none; } .auth-wrapper.offline:before { display: none; } .auth-wrapper.error { background: #FF425C; } .auth-wrapper.error .container { position: relative; max-width: 800px; margin: 0 auto 5%; padding: 5%; text-align: center; color: #fff; } .auth-wrapper .card-body .carousel-indicators { margin: 30px 0; bottom: 0; } .auth-wrapper .card-body .carousel-indicators li { width: 50px; background-color: #eff3f6; } .auth-wrapper .card-body .carousel-indicators li.active { background-color: #19BCBF; } .auth-wrapper .img-logo-overlay { position: absolute; top: 40px; left: 50px; } /* image varient start */ .aut-bg-img { background-image: url("../images/auth-bg-big.jpg"); background-size: cover; background-attachment: fixed; background-position: center; } .aut-bg-img-side p { line-height: 2; } .aut-bg-img .custom-select, .aut-bg-img .form-control, .aut-bg-img-side .custom-select, .aut-bg-img-side .form-control { background: transparent; } .aut-bg-img .auth-content, .aut-bg-img-side .auth-content { padding-top: 90px; padding-bottom: 90px; } .blur-bg-images { background-image: url("../images/auth/blur-bg.jpg"); background-size: cover; background-attachment: fixed; background-position: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .blur-bg-images:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); } .auth-prod-slider .blur-bg-images:after { background: #39465C; } .auth-prod-slider .auth-prod-slidebg { height: 600px; width: 100%; } .auth-prod-slider .auth-prod-slidebg.bg-1 { background-image: linear-gradient(to right, rgba(70, 54, 153, 0.9) 0%, rgba(25, 188, 191, 0.9) 100%); } .auth-prod-slider .auth-prod-slidebg.bg-2 { background-image: linear-gradient(to right, rgba(25, 188, 191, 0.9) 0%, rgba(45, 206, 227, 0.9) 100%); } .auth-prod-slider .auth-prod-slidebg.bg-3 { background-image: linear-gradient(to right, rgba(45, 206, 227, 0.9) 0%, rgba(25, 188, 191, 0.9) 100%); } .auth-prod-slider .auth-prod-slidebg.bg-4 { background-image: linear-gradient(to right, rgba(25, 188, 191, 0.9) 0%, rgba(70, 54, 153, 0.9) 100%); } .auth-prod-slider .carousel-indicators li { width: 8px; height: 8px; border-radius: 8px; transition: all 0.35s ease-in-out; border-top: none; border-bottom: none; } .auth-prod-slider .carousel-indicators li.active { width: 20px; background: #19BCBF; } .auth-prod-slider .carousel-caption { bottom: auto; top: 50px; } .auth-prod-slider .carousel-caption img { border-radius: 5px; border: 4px solid #fff; } .auth-prod-slider .carousel-caption h5 { color: #fff; } /* image varient End */ /**====== Authentication css end ======**/ /* Button variants Easily pump out default styles, as well as :hover, :focus, :active, and disabled options for all buttons */ /** ===================== Button css start ========================== **/ .btn-show { --bs-btn-active-bg: #19BCBF; --bs-btn-active-border-color: #19BCBF; } .btn-close { --bs-btn-close-focus-shadow: none; } .btn-primary { --bs-btn-hover-bg: #19BCBF; --bs-btn-color: #fff; --bs-btn-bg: #19BCBF; --bs-btn-border-color: #19BCBF; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #16a6a8; --bs-btn-hover-border-color: #16a6a8; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #16a6a8; --bs-btn-active-border-color: #0a53be; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #16a6a8; --bs-btn-disabled-border-color: #16a6a8; } .btn-outline-primary { --bs-btn-active-color: #fff; --bs-btn-active-bg: #16a6a8; --bs-btn-active-border-color: #16a6a8; } .btf-check:checked + .btf, .btf.active, .btf.show, .btf:first-child:active, :not(.btf-check) + .btf:active { --bs-btn-active-bg: #19BCBF; --bs-btn-active-border-color: #19BCBF; } .btn { border-radius: 0.25rem; margin-bottom: 5px; margin-right: 10px; transition: all 0.3s ease-in-out; --bs-btn-padding-y: 10px; --bs-btn-padding-x: 20px; --bs-btn-font-size: 14px; } .btn > i { margin-right: 12px; } .btn-square { border-radius: 0; } .btn.disabled { cursor: not-allowed; opacity: 0.55; } .btn-rounded { border-radius: 30px; } .btn .spinner-border { margin-right: 5px; } .dropdown-toggle::after { top: 3px; left: 8px; position: relative; } .dropdown-toggle-split { padding: 8px 10px; } .dropdown-toggle-split:after { left: 0; } .btn-icon, .drp-icon { width: 40px; height: 40px; padding: 10px 12px; } .btn-icon > i, .drp-icon > i { margin-right: 0; } .drp-icon.dropdown-toggle:after { display: none; } .drp-icon + .dropdown-menu { margin-left: -10px; } .btn-lg { padding: 12px 25px; border-radius: 0.35rem; } .btn-sm { padding: 3px 12px; border-radius: 0.15rem; } .btn-group .btn, .btn-group-vertical .btn { margin-bottom: 0; margin-right: 0; } .shadow-1 { box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16); } .shadow-2 { box-shadow: 0 10px 18px 0 rgba(62, 57, 107, 0.2); } .shadow-3 { box-shadow: 0 14px 24px 0 rgba(62, 57, 107, 0.26); } .shadow-4 { box-shadow: 0 16px 28px 0 rgba(62, 57, 107, 0.3); } .shadow-5 { box-shadow: 0 20px 24px 0 rgba(62, 57, 107, 0.36); } /* Alternate buttons */ .btn-primary { color: #fff; background-color: #19BCBF; border-color: #17afb1; } .btn-primary:hover { color: #fff; background-color: #159b9d; border-color: #139092; } .btn-primary.disabled, .btn-primary:disabled { color: #fff; background-color: #19BCBF; border-color: #19BCBF; } .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle, .btn-primary.show { color: #fff; background-color: #139092; border-color: #128587; } .btn-primary:focus-visible { color: white; background-color: #139092; border-color: #128587; } .btn-secondary { color: #fff; background-color: #7E858E; border-color: #767d87; } .btn-secondary:hover { color: #fff; background-color: #6b727a; border-color: #656c74; } .btn-secondary.disabled, .btn-secondary:disabled { color: #fff; background-color: #7E858E; border-color: #7E858E; } .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle, .btn-secondary.show { color: #fff; background-color: #656c74; border-color: #5f656d; } .btn-secondary:focus-visible { color: white; background-color: #656c74; border-color: #5f656d; } .btn-success { color: #fff; background-color: #13bd8a; border-color: #12af80; } .btn-success:hover { color: #fff; background-color: #109a71; border-color: #0e8f68; } .btn-success.disabled, .btn-success:disabled { color: #fff; background-color: #13bd8a; border-color: #13bd8a; } .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle, .btn-success.show { color: #fff; background-color: #0e8f68; border-color: #0d8360; } .btn-success:focus-visible { color: white; background-color: #0e8f68; border-color: #0d8360; } .btn-info { color: #fff; background-color: #2DCEE3; border-color: #20cbe1; } .btn-info:hover { color: #fff; background-color: #1cbace; border-color: #1ab0c3; } .btn-info.disabled, .btn-info:disabled { color: #fff; background-color: #2DCEE3; border-color: #2DCEE3; } .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle, .btn-info.show { color: #fff; background-color: #1ab0c3; border-color: #19a5b8; } .btn-info:focus-visible { color: white; background-color: #1ab0c3; border-color: #19a5b8; } .btn-warning { color: #fff; background-color: #FF9764; border-color: #ff8d55; } .btn-warning:hover { color: #fff; background-color: #ff7d3e; border-color: #ff7531; } .btn-warning.disabled, .btn-warning:disabled { color: #fff; background-color: #FF9764; border-color: #FF9764; } .btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle, .btn-warning.show { color: #fff; background-color: #ff7531; border-color: #ff6c24; } .btn-warning:focus-visible { color: white; background-color: #ff7531; border-color: #ff6c24; } .btn-danger { color: #fff; background-color: #FF425C; border-color: #ff334f; } .btn-danger:hover { color: #fff; background-color: #ff1c3b; border-color: #ff0f30; } .btn-danger.disabled, .btn-danger:disabled { color: #fff; background-color: #FF425C; border-color: #FF425C; } .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle, .btn-danger.show { color: #fff; background-color: #ff0f30; border-color: #ff0225; } .btn-danger:focus-visible { color: white; background-color: #ff0f30; border-color: #ff0225; } .btn-light { color: #39465C; background-color: #E4E5E6; border-color: #dcdddf; } .btn-light:hover { color: #39465C; background-color: #d0d2d4; border-color: #cacccd; } .btn-light.disabled, .btn-light:disabled { color: #39465C; background-color: #E4E5E6; border-color: #E4E5E6; } .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle, .btn-light.show { color: #39465C; background-color: #cacccd; border-color: #c3c5c7; } .btn-light:focus-visible { color: white; background-color: #cacccd; border-color: #c3c5c7; } .btn-dark { color: #fff; background-color: #39465C; border-color: #333f53; } .btn-dark:hover { color: #fff; background-color: #2a3444; border-color: #252e3d; } .btn-dark.disabled, .btn-dark:disabled { color: #fff; background-color: #39465C; border-color: #39465C; } .btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle, .btn-dark.show { color: #fff; background-color: #252e3d; border-color: #212835; } .btn-dark:focus-visible { color: white; background-color: #252e3d; border-color: #212835; } .btn-info, .btn-warning { color: #fff !important; } /* outline buttons */ .btn-outline-primary { color: #19BCBF; background-color: transparent; background-image: none; border-color: #19BCBF; } .btn-outline-primary:hover { color: #fff; background-color: #19BCBF; border-color: #19BCBF; } .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: #19BCBF; background-color: transparent; } .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle, .btn-outline-primary.show { color: #fff; background-color: #19BCBF; border-color: #19BCBF; } .btn-outline-secondary { color: #7E858E; background-color: transparent; background-image: none; border-color: #7E858E; } .btn-outline-secondary:hover { color: #fff; background-color: #7E858E; border-color: #7E858E; } .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: #7E858E; background-color: transparent; } .btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle, .btn-outline-secondary.show { color: #fff; background-color: #7E858E; border-color: #7E858E; } .btn-outline-success { color: #13bd8a; background-color: transparent; background-image: none; border-color: #13bd8a; } .btn-outline-success:hover { color: #fff; background-color: #13bd8a; border-color: #13bd8a; } .btn-outline-success.disabled, .btn-outline-success:disabled { color: #13bd8a; background-color: transparent; } .btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show > .btn-outline-success.dropdown-toggle, .btn-outline-success.show { color: #fff; background-color: #13bd8a; border-color: #13bd8a; } .btn-outline-info { color: #2DCEE3; background-color: transparent; background-image: none; border-color: #2DCEE3; } .btn-outline-info:hover { color: #fff; background-color: #2DCEE3; border-color: #2DCEE3; } .btn-outline-info.disabled, .btn-outline-info:disabled { color: #2DCEE3; background-color: transparent; } .btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle, .btn-outline-info.show { color: #fff; background-color: #2DCEE3; border-color: #2DCEE3; } .btn-outline-warning { color: #FF9764; background-color: transparent; background-image: none; border-color: #FF9764; } .btn-outline-warning:hover { color: #fff; background-color: #FF9764; border-color: #FF9764; } .btn-outline-warning.disabled, .btn-outline-warning:disabled { color: #FF9764; background-color: transparent; } .btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, .show > .btn-outline-warning.dropdown-toggle, .btn-outline-warning.show { color: #fff; background-color: #FF9764; border-color: #FF9764; } .btn-outline-danger { color: #FF425C; background-color: transparent; background-image: none; border-color: #FF425C; } .btn-outline-danger:hover { color: #fff; background-color: #FF425C; border-color: #FF425C; } .btn-outline-danger.disabled, .btn-outline-danger:disabled { color: #FF425C; background-color: transparent; } .btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle, .btn-outline-danger.show { color: #fff; background-color: #FF425C; border-color: #FF425C; } .btn-outline-light { color: #E4E5E6; background-color: transparent; background-image: none; border-color: #E4E5E6; } .btn-outline-light:hover { color: #39465C; background-color: #E4E5E6; border-color: #E4E5E6; } .btn-outline-light.disabled, .btn-outline-light:disabled { color: #E4E5E6; background-color: transparent; } .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show > .btn-outline-light.dropdown-toggle, .btn-outline-light.show { color: #39465C; background-color: #E4E5E6; border-color: #E4E5E6; } .btn-outline-dark { color: #39465C; background-color: transparent; background-image: none; border-color: #39465C; } .btn-outline-dark:hover { color: #fff; background-color: #39465C; border-color: #39465C; } .btn-outline-dark.disabled, .btn-outline-dark:disabled { color: #39465C; background-color: transparent; } .btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show > .btn-outline-dark.dropdown-toggle, .btn-outline-dark.show { color: #fff; background-color: #39465C; border-color: #39465C; } /* glow buttons */ .btn-glow-primary { box-shadow: 0 0px 7px 0px rgba(25, 188, 191, 0.56), 0 0 10px 2px rgba(25, 188, 191, 0.2); } .btn-glow-secondary { box-shadow: 0 0px 7px 0px rgba(126, 133, 142, 0.56), 0 0 10px 2px rgba(126, 133, 142, 0.2); } .btn-glow-success { box-shadow: 0 0px 7px 0px rgba(19, 189, 138, 0.56), 0 0 10px 2px rgba(19, 189, 138, 0.2); } .btn-glow-info { box-shadow: 0 0px 7px 0px rgba(45, 206, 227, 0.56), 0 0 10px 2px rgba(45, 206, 227, 0.2); } .btn-glow-warning { box-shadow: 0 0px 7px 0px rgba(255, 151, 100, 0.56), 0 0 10px 2px rgba(255, 151, 100, 0.2); } .btn-glow-danger { box-shadow: 0 0px 7px 0px rgba(255, 66, 92, 0.56), 0 0 10px 2px rgba(255, 66, 92, 0.2); } .btn-glow-light { box-shadow: 0 0px 7px 0px rgba(228, 229, 230, 0.56), 0 0 10px 2px rgba(228, 229, 230, 0.2); } .btn-glow-dark { box-shadow: 0 0px 7px 0px rgba(57, 70, 92, 0.56), 0 0 10px 2px rgba(57, 70, 92, 0.2); } /* Gradient */ .btn-gradient-primary { color: #fff; background: linear-gradient(-45deg, #19BCBF, #149698); border-color: #17afb1; } .btn-gradient-primary:hover { color: #fff; background-color: #159b9d; border-color: #139092; } .btn-gradient-primary.disabled, .btn-gradient-primary:disabled { color: #fff; background-color: #19BCBF; border-color: #19BCBF; } .btn-gradient-primary:not(:disabled):not(.disabled).active, .btn-gradient-primary:not(:disabled):not(.disabled):active, .show > .btn-gradient-primary.dropdown-toggle { color: #fff; background-color: #139092; border-color: #128587; } .btn-gradient-secondary { color: #fff; background: linear-gradient(-45deg, #7E858E, #4b4f55); border-color: #767d87; } .btn-gradient-secondary:hover { color: #fff; background-color: #6b727a; border-color: #656c74; } .btn-gradient-secondary.disabled, .btn-gradient-secondary:disabled { color: #fff; background-color: #7E858E; border-color: #7E858E; } .btn-gradient-secondary:not(:disabled):not(.disabled).active, .btn-gradient-secondary:not(:disabled):not(.disabled):active, .show > .btn-gradient-secondary.dropdown-toggle { color: #fff; background-color: #656c74; border-color: #5f656d; } .btn-gradient-success { color: #fff; background: linear-gradient(-45deg, #13bd8a, #0f976e); border-color: #12af80; } .btn-gradient-success:hover { color: #fff; background-color: #109a71; border-color: #0e8f68; } .btn-gradient-success.disabled, .btn-gradient-success:disabled { color: #fff; background-color: #13bd8a; border-color: #13bd8a; } .btn-gradient-success:not(:disabled):not(.disabled).active, .btn-gradient-success:not(:disabled):not(.disabled):active, .show > .btn-gradient-success.dropdown-toggle { color: #fff; background-color: #0e8f68; border-color: #0d8360; } .btn-gradient-info { color: #fff; background: linear-gradient(-45deg, #2DCEE3, #24a4b5); border-color: #20cbe1; } .btn-gradient-info:hover { color: #fff; background-color: #1cbace; border-color: #1ab0c3; } .btn-gradient-info.disabled, .btn-gradient-info:disabled { color: #fff; background-color: #2DCEE3; border-color: #2DCEE3; } .btn-gradient-info:not(:disabled):not(.disabled).active, .btn-gradient-info:not(:disabled):not(.disabled):active, .show > .btn-gradient-info.dropdown-toggle { color: #fff; background-color: #1ab0c3; border-color: #19a5b8; } .btn-gradient-warning { color: #fff; background: linear-gradient(-45deg, #FF9764, #ff864b); border-color: #ff8d55; } .btn-gradient-warning:hover { color: #fff; background-color: #ff7d3e; border-color: #ff7531; } .btn-gradient-warning.disabled, .btn-gradient-warning:disabled { color: #fff; background-color: #FF9764; border-color: #FF9764; } .btn-gradient-warning:not(:disabled):not(.disabled).active, .btn-gradient-warning:not(:disabled):not(.disabled):active, .show > .btn-gradient-warning.dropdown-toggle { color: #fff; background-color: #ff7531; border-color: #ff6c24; } .btn-gradient-danger { color: #fff; background: linear-gradient(-45deg, #FF425C, #e53b52); border-color: #ff334f; } .btn-gradient-danger:hover { color: #fff; background-color: #ff1c3b; border-color: #ff0f30; } .btn-gradient-danger.disabled, .btn-gradient-danger:disabled { color: #fff; background-color: #FF425C; border-color: #FF425C; } .btn-gradient-danger:not(:disabled):not(.disabled).active, .btn-gradient-danger:not(:disabled):not(.disabled):active, .show > .btn-gradient-danger.dropdown-toggle { color: #fff; background-color: #ff0f30; border-color: #ff0225; } .btn-gradient-light { color: #39465C; background: linear-gradient(-45deg, #E4E5E6, #e6e7e8); border-color: #dcdddf; } .btn-gradient-light:hover { color: #39465C; background-color: #d0d2d4; border-color: #cacccd; } .btn-gradient-light.disabled, .btn-gradient-light:disabled { color: #39465C; background-color: #E4E5E6; border-color: #E4E5E6; } .btn-gradient-light:not(:disabled):not(.disabled).active, .btn-gradient-light:not(:disabled):not(.disabled):active, .show > .btn-gradient-light.dropdown-toggle { color: #39465C; background-color: #cacccd; border-color: #c3c5c7; } .btn-gradient-dark { color: #fff; background: linear-gradient(-45deg, #39465C, #37383a); border-color: #333f53; } .btn-gradient-dark:hover { color: #fff; background-color: #2a3444; border-color: #252e3d; } .btn-gradient-dark.disabled, .btn-gradient-dark:disabled { color: #fff; background-color: #39465C; border-color: #39465C; } .btn-gradient-dark:not(:disabled):not(.disabled).active, .btn-gradient-dark:not(:disabled):not(.disabled):active, .show > .btn-gradient-dark.dropdown-toggle { color: #fff; background-color: #252e3d; border-color: #212835; } /**====== Button css end ======**/ /*====== Social button css starts ======*/ .btn-facebook { background: #3C5A99; border-color: #3C5A99; color: #fff; } .btn-facebook:hover, .btn-facebook:not(:disabled):not(.disabled).active, .btn-facebook:not(:disabled):not(.disabled):active, .show > .btn-facebook.dropdown-toggle { color: #fff; background: #4365ab; } .btn-twitter { background: #42C0FB; border-color: #42C0FB; color: #fff; } .btn-twitter:hover, .btn-twitter:not(:disabled):not(.disabled).active, .btn-twitter:not(:disabled):not(.disabled):active, .show > .btn-twitter.dropdown-toggle { color: #fff; background: #5bc8fc; } .btn-dribbble { background: #EC4A89; border-color: #EC4A89; color: #fff; } .btn-dribbble:hover, .btn-dribbble:not(:disabled):not(.disabled).active, .btn-dribbble:not(:disabled):not(.disabled):active, .show > .btn-dribbble.dropdown-toggle { color: #fff; background: #ee6198; } .btn-pinterest { background: #BF2131; border-color: #BF2131; color: #fff; } .btn-pinterest:hover, .btn-pinterest:not(:disabled):not(.disabled).active, .btn-pinterest:not(:disabled):not(.disabled):active, .show > .btn-pinterest.dropdown-toggle { color: #fff; background: #d52537; } .btn-youtube { background: #E0291D; border-color: #E0291D; color: #fff; } .btn-youtube:hover, .btn-youtube:not(:disabled):not(.disabled).active, .btn-youtube:not(:disabled):not(.disabled):active, .show > .btn-youtube.dropdown-toggle { color: #fff; background: #e43d32; } .btn-googleplus { background: #C73E2E; border-color: #C73E2E; color: #fff; } .btn-googleplus:hover, .btn-googleplus:not(:disabled):not(.disabled).active, .btn-googleplus:not(:disabled):not(.disabled):active, .show > .btn-googleplus.dropdown-toggle { color: #fff; background: #d24c3c; } .btn-instagram { background: #AA7C62; border-color: #AA7C62; color: #fff; } .btn-instagram:hover, .btn-instagram:not(:disabled):not(.disabled).active, .btn-instagram:not(:disabled):not(.disabled):active, .show > .btn-instagram.dropdown-toggle { color: #fff; background: #b38a73; } .btn-viber { background: #7B519D; border-color: #7B519D; color: #fff; } .btn-viber:hover, .btn-viber:not(:disabled):not(.disabled).active, .btn-viber:not(:disabled):not(.disabled):active, .show > .btn-viber.dropdown-toggle { color: #fff; background: #885cab; } .btn-behance { background: #0057ff; border-color: #0057ff; color: #fff; } .btn-behance:hover, .btn-behance:not(:disabled):not(.disabled).active, .btn-behance:not(:disabled):not(.disabled):active, .show > .btn-behance.dropdown-toggle { color: #fff; background: #1a68ff; } .btn-dropbox { background: #3380FF; border-color: #3380FF; color: #fff; } .btn-dropbox:hover, .btn-dropbox:not(:disabled):not(.disabled).active, .btn-dropbox:not(:disabled):not(.disabled):active, .show > .btn-dropbox.dropdown-toggle { color: #fff; background: #4d90ff; } .btn-linkedin { background: #0077B5; border-color: #0077B5; color: #fff; } .btn-linkedin:hover, .btn-linkedin:not(:disabled):not(.disabled).active, .btn-linkedin:not(:disabled):not(.disabled):active, .show > .btn-linkedin.dropdown-toggle { color: #fff; background: #0088cf; } /*====== Social button css end ======*/ /*====== light badge css start ======*/ .badge-light-primary { background: rgba(25, 188, 191, 0.15); color: #19BCBF; } .badge-light-primary:focus, .badge-light-primary:hover { color: #19BCBF; } .badge-light-secondary { background: rgba(126, 133, 142, 0.15); color: #7E858E; } .badge-light-secondary:focus, .badge-light-secondary:hover { color: #7E858E; } .badge-light-success { background: rgba(19, 189, 138, 0.15); color: #13bd8a; } .badge-light-success:focus, .badge-light-success:hover { color: #13bd8a; } .badge-light-info { background: rgba(45, 206, 227, 0.15); color: #2DCEE3; } .badge-light-info:focus, .badge-light-info:hover { color: #2DCEE3; } .badge-light-warning { background: rgba(255, 151, 100, 0.15); color: #FF9764; } .badge-light-warning:focus, .badge-light-warning:hover { color: #FF9764; } .badge-light-danger { background: rgba(255, 66, 92, 0.15); color: #FF425C; } .badge-light-danger:focus, .badge-light-danger:hover { color: #FF425C; } .badge-light-light { background: rgba(228, 229, 230, 0.15); color: #E4E5E6; } .badge-light-light:focus, .badge-light-light:hover { color: #E4E5E6; } .badge-light-dark { background: rgba(57, 70, 92, 0.15); color: #39465C; } .badge-light-dark:focus, .badge-light-dark:hover { color: #39465C; } /*====== light badge css end ======*/ .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { margin-top: -5px; } .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before { margin-right: -3px; } .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before { margin-bottom: -5px; } .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before { margin-left: -3px; } .radio-button { opacity: 0; position: absolute; } .swal-footer { text-align: center; } /** ===================== Alert css start ========================== **/ /* Base styles */ .alert { position: relative; --bs-alert-padding-x: 20px; --bs-alert-padding-y: 15px; border-radius: 2px; } .alert-inverse { background-color: #111; color: white; } /* Provide class for links that match alerts */ .alert-link { font-weight: 600; transition: all 0.3s ease-in-out; } .alert-link:hover { text-decoration: underline; } /* Alternate styles Generate contextual modifier classes for colorizing the alert. */ .alert-primary { color: #28838f; background: #d1f2f2; border-color: #bfeced; } .alert-primary hr { border-top-color: #abe6e7; } .alert-primary .alert-link { color: #1d5e67; } .alert-primary .btn-close { color: #28838f; background: #d1f2f2; border-color: #bfeced; } .alert-primary .btn-close hr { border-top-color: #abe6e7; } .alert-primary .btn-close .alert-link { color: #1d5e67; } .alert-secondary { color: #5d6776; background: #e5e7e8; border-color: #dbdddf; } .alert-secondary hr { border-top-color: #ced0d3; } .alert-secondary .alert-link { color: #474e59; } .alert-secondary .btn-close { color: #5d6776; background: #e5e7e8; border-color: #dbdddf; } .alert-secondary .btn-close hr { border-top-color: #ced0d3; } .alert-secondary .btn-close .alert-link { color: #474e59; } .alert-success { color: #258474; background: #d0f2e8; border-color: #bdedde; } .alert-success hr { border-top-color: #a9e8d4; } .alert-success .alert-link { color: #1a5c51; } .alert-success .btn-close { color: #258474; background: #d0f2e8; border-color: #bdedde; } .alert-success .btn-close hr { border-top-color: #a9e8d4; } .alert-success .btn-close .alert-link { color: #1a5c51; } .alert-info { color: #338da2; background: #d5f5f9; border-color: #c4f1f7; } .alert-info hr { border-top-color: #aeecf4; } .alert-info .alert-link { color: #276b7b; } .alert-info .btn-close { color: #338da2; background: #d5f5f9; border-color: #c4f1f7; } .alert-info .btn-close hr { border-top-color: #aeecf4; } .alert-info .btn-close .alert-link { color: #276b7b; } .alert-warning { color: #a07060; background: #ffeae0; border-color: #ffe2d4; } .alert-warning hr { border-top-color: #ffd1bb; } .alert-warning .alert-link { color: #805a4d; } .alert-warning .btn-close { color: #a07060; background: #ffeae0; border-color: #ffe2d4; } .alert-warning .btn-close hr { border-top-color: #ffd1bb; } .alert-warning .btn-close .alert-link { color: #805a4d; } .alert-danger { color: #a0445c; background: #ffd9de; border-color: #ffcad1; } .alert-danger hr { border-top-color: #ffb1bb; } .alert-danger .alert-link { color: #7c3547; } .alert-danger .btn-close { color: #a0445c; background: #ffd9de; border-color: #ffcad1; } .alert-danger .btn-close hr { border-top-color: #ffb1bb; } .alert-danger .btn-close .alert-link { color: #7c3547; } .alert-light { color: #9299a4; background: #fafafa; border-color: #f7f8f8; } .alert-light hr { border-top-color: #e9ecec; } .alert-light .alert-link { color: #767f8d; } .alert-light .btn-close { color: #9299a4; background: #fafafa; border-color: #f7f8f8; } .alert-light .btn-close hr { border-top-color: #e9ecec; } .alert-light .btn-close .alert-link { color: #767f8d; } .alert-dark { color: #39465c; background: #d7dade; border-color: #c8cbd1; } .alert-dark hr { border-top-color: #babec5; } .alert-dark .alert-link { color: #252e3d; } .alert-dark .btn-close { color: #39465c; background: #d7dade; border-color: #c8cbd1; } .alert-dark .btn-close hr { border-top-color: #babec5; } .alert-dark .btn-close .alert-link { color: #252e3d; } .alert-success hr { opacity: 1; } /**====== Alert css end ======**/ /** ===================== Breadcrumbs & Pagination css start ========================== **/ /* Breadcrumbs */ .breadcrumb { background-color: #eff3f6; padding: 0.75rem 1rem; } .breadcrumb-item + .breadcrumb-item { color: #19BCBF; } .breadcrumb-item + .breadcrumb-item::before { /* content: $breadcrumb-divider; */ } .breadcrumb-item.active { color: #111; } /* pagination */ .page-link { color: #19BCBF; } .page-link:hover { color: #17aaad; } .page-item.active .page-link { color: #fff; background-color: #19BCBF; border-color: #19BCBF; } .page-item.disabled { --bs-pagination-disabled-bg: transparent; color: #6c757d; } /**====== Breadcrumbs & Pagination css end ======**/ /** ===================== Progress css start ========================== **/ .progress { overflow: visible; --bs-progress-border-radius: 0; } .progress .progress-bar { border-radius: var(--bs-border-radius); } .progress-stacked { overflow: hidden; } .progress-stacked .progress:not(:first-child) .progress-bar { border-top-left-radius: 0; border-bottom-left-radius: 0; } .progress-stacked .progress:not(:last-child) .progress-bar { border-top-right-radius: 0; border-bottom-right-radius: 0; } .bg-primary-progress { background-color: #19BCBF; } .bg-secondary-progress { background-color: #7E858E; } .bg-success-progress { background-color: #13bd8a; } .bg-info-progress { background-color: #2DCEE3; } .bg-warning-progress { background-color: #FF9764; } .bg-danger-progress { background-color: #FF425C; } .bg-light-progress { background-color: #E4E5E6; } .bg-dark-progress { background-color: #39465C; } /**====== Progress css end ======**/ /** ===================== tooltip css start ========================== **/ /**====== tooltip css end ======**/ .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-link { display: block; padding: 10px 24px; } .nav-link:hover { text-decoration: none; } .nav-link.disabled { opacity: 0.7; } /* ======================== Tabs =============================== */ .nav-tabs { border-bottom: none; } .nav-tabs .nav-link { border: none; color: #686c71; } .nav-tabs .nav-link:hover { color: #19BCBF; } .nav-tabs .nav-link.disabled { opacity: 0.7; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border: none; color: #111; box-shadow: 0px -1px 0 1px #e2e5e8; } /* ======================= Pills ================== */ .nav-pills { padding: 15px; background-color: #fff; } .nav-pills .nav-link { border-radius: 2px; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background: linear-gradient(-45deg, #19BCBF, #149698); } /* ==================== Justified variants ===================*/ .nav-fill .nav-item { flex: 1 1 auto; text-align: center; } .nav-justified .nav-item { flex-basis: 0; flex-grow: 1; text-align: center; } /* Tabbable tabs */ /* Hide tabbable panes to start, show them when .active */ .tab-content { padding: 35px 30px; background: #fff; box-shadow: 0 0 0 1px #e2e5e8; } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } .modal-content { border-radius: 2px; } .modal-content .modal-header { border-bottom: 1px solid #e2e5e8; } .modal-content .modal-footer { border-top: 1px solid #e2e5e8; } .modal-content .modal-footer .btn { margin-bottom: 0; } @media screen and (max-width: 480px) { .modal-footer { justify-content: center; } } .font-color { --bs-heading-color: black; } /** ===================== 28. Notification css start ========================== **/ .alert-dismissable .close, .alert-dismissible .close { color: inherit; text-shadow: none; } .notifier-container { z-index: 1999; width: 400px; max-width: 98%; top: 15px; } .notifier { padding: 25px 25px; border-radius: 6px; } .notifier .notifier-title { font-size: 18px; font-weight: 600; margin-bottom: 2px; } .notifier .notifier-body { font-size: 14px; } .notifier .notifier-img .img { width: 40px; height: 40px; } .notifier .notifier-close:focus, .notifier .notifier-close:hover { color: #FF425C; background: transparent; } .notifier.primary { border-left-color: #19BCBF; } .notifier.secondary { border-left-color: #7E858E; } .notifier.success { border-left-color: #13bd8a; } .notifier.info { border-left-color: #2DCEE3; } .notifier.warning { border-left-color: #FF9764; } .notifier.danger { border-left-color: #FF425C; } .notifier.light { border-left-color: #E4E5E6; } .notifier.dark { border-left-color: #39465C; } @media (max-width: 575px) { .toast { --bs-toast-max-width: 230px; } } /** ===================== 28. Notification css end ========================== **/ /** ===================== 30. Rangeslider css start ========================== **/ .slider.slider-horizontal .slider-handle.triangle, .slider.slider-horizontal .slider-tick.triangle { border-bottom-color: #19BCBF; } .slider.slider-vertical .slider-handle.triangle, .slider.slider-vertical .slider-tick.triangle { border-left-color: #19BCBF; border-right-color: #19BCBF; } .slider.slider-disabled .slider-handle { background-image: linear-gradient(to bottom, #dfdfdf 0, #bebebe 100%); background-repeat: repeat-x; } .slider.slider-disabled .slider-track { background-image: linear-gradient(to bottom, #eff3f6 0, #eff3f6 100%); background-repeat: repeat-x; } .slider-track { background-image: linear-gradient(to bottom, #eff3f6 0, #eff3f6 100%); background-repeat: repeat-x; } .slider-selection { background-image: linear-gradient(to bottom, #6ce9ec 0, #6ce9ec 100%); background-repeat: repeat-x; } .slider-selection.tick-slider-selection { background-image: linear-gradient(to bottom, #55e6e9 0, #55e6e9 100%); background-repeat: repeat-x; } .slider-handle { background-color: #19BCBF; background-image: linear-gradient(to bottom, #19BCBF 0, #19BCBF 100%); background-repeat: repeat-x; } .slider-tick { background-image: linear-gradient(to bottom, #f9f9f9 0, #f5f5f5 100%); background-repeat: repeat-x; } .slider-tick.in-selection { background-image: linear-gradient(to bottom, #55e6e9 0, #55e6e9 100%); background-repeat: repeat-x; } .slider .tooltip { position: absolute; } #ex7-enabled { position: relative; top: 4px; height: 18px; width: 18px; } #RGB { height: 10px; background: rgb(128, 128, 128); } #RC .slider-selection { background: #ff8282; } #RC .slider-handle { background: red; } #GC .slider-selection { background: #478f3b; } #GC .slider-handle { background: green; } #BC .slider-selection { background: #8283ff; } #BC .slider-handle { border-bottom-color: blue; } #B, #G, #R { width: 300px; } .slider-handle.custom { background: transparent none; } .slider-handle.custom::before { line-height: 15px; font-size: 28px; content: "★"; color: #726204; } #slider12a .slider-track-high, #slider12c .slider-track-high { background: #13bd8a; } #slider12b .slider-track-low { background: #FF425C; } #slider12c .slider-track-low { background: #FF425C; } #slider12c .slider-selection { background: #FF9764; } #slider22 .slider-rangeHighlight { background: #f70616; } #slider22 .slider-rangeHighlight.category1 { background: #ff9900; } #slider22 .slider-rangeHighlight.category2 { background: #99cc00; } .vtree a.vtree-leaf-label { color: #eff3f6; } .vtree a.vtree-leaf-label:hover, .vtree a.vtree-leaf-label:focus, .vtree a.vtree-leaf-label:active { color: #19BCBF; } /** ===================== 30. Rangeslider css end ========================== **/ /** ===================== Chatting css start ========================== **/ .header-chat, .header-user-list { height: 100%; width: 300px; position: fixed; top: 0; right: -300px; border-radius: 0; z-index: 1030; background-color: #fff; transition: all 0.3s ease-in-out; } .header-chat .main-friend-cont, .header-user-list .main-friend-cont { height: calc(100vh - 60px); position: relative; } .header-chat .h-list-header + .h-list-body > .main-friend-cont, .header-user-list .h-list-header + .h-list-body > .main-friend-cont { height: calc(100vh - 130px); position: relative; } .header-chat .h-list-header, .header-user-list .h-list-header { padding: 15px; border-bottom: 1px solid #f1f1f1; } .header-chat.open, .header-user-list.open { box-shadow: 0 1px 10px 0 rgba(69, 90, 100, 0.2); right: 0; } .header-user-list .nav-tabs { border-bottom: 1px solid #f1f1f1; } .header-user-list .nav-tabs .nav-item { width: 33.3333333333%; text-align: center; } .header-user-list .nav-tabs .nav-item a { padding: 20px 0; position: relative; background-color: transparent; background-image: linear-gradient(#19BCBF, #19BCBF); background-size: 0 2px; background-position: bottom; background-repeat: no-repeat; transition: all 0.3s ease-in-out; } .header-user-list .nav-tabs .nav-item a.active { box-shadow: none; background-size: 100% 2px; color: #19BCBF; } .header-user-list .tab-content { padding: 0; box-shadow: none; } .header-user-list.open .h-close-text { position: absolute; top: 35px; left: -30px; } .header-user-list.open .h-close-text i { position: absolute; top: 55px; left: 7px; font-size: 20px; z-index: 1003; color: #fff; } .header-user-list.open .h-close-text:after { content: ""; z-index: 1001; position: absolute; top: 45px; left: -2px; background: #19BCBF; width: 32px; height: 40px; box-shadow: -5px 2px 15px -4px rgba(69, 90, 100, 0.5); border-radius: 20px 0 0 20px; } .header-user-list.open.msg-open:after { color: rgba(25, 188, 191, 0.1); } .h-list-header .form-control:active, .h-list-header .form-control:focus, .h-list-header .form-control:hover { box-shadow: none; outline: none; } .h-list-body { position: relative; } .h-list-body .userlist-box { cursor: pointer; display: flex; align-items: center; padding: 15px 20px; position: relative; } .h-list-body .userlist-box:after { content: ""; position: absolute; bottom: 0; left: 20px; width: calc(100% - 40px); height: 1px; background: #f3f4f9; } .h-list-body .userlist-box.active { background: #c6f7f8; } .h-list-body .userlist-box .media-left { padding-right: 10px; } .h-list-body .userlist-box .media-object { width: 50px; display: inline-block; } .h-list-body .userlist-box .chat-header { font-size: 14px; font-weight: 600; margin-bottom: 0; } .h-list-body .userlist-box .chat-header small { margin-top: 5px; font-size: 90%; } .h-list-body .userlist-box .live-status { height: 25px; width: 25px; position: absolute; top: 35px; right: 20px; border-radius: 100%; color: #fff; padding: 2px 0; text-align: center; background: #19BCBF; } .header-chat .h-list-header { text-align: center; position: relative; background: linear-gradient(-45deg, #19BCBF, #149698); } .header-chat .h-list-header .h-back-user-list, .header-chat .h-list-header h6 { color: #fff; } .header-chat .h-list-header h6 { margin: 5px 0; color: #fff; } .header-chat .h-list-header .h-back-user-list { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; width: 40px; justify-content: center; font-size: 20px; } .header-chat .main-chat-cont { height: calc(100vh - 166px); } .header-chat .h-list-body { height: 100%; background: #eff3f6; } .header-chat .h-list-footer { position: absolute; bottom: 0; width: 100%; right: 0; padding: 20px 15px; z-index: 10; background: #eff3f6; } .header-chat .h-list-footer .input-group { background: #fff; border: none; display: inline-flex; box-shadow: 0 5px 15px 0 rgba(62, 57, 107, 0.15); padding: 7px; border-radius: 20px; width: calc(100% - 40px); } .header-chat .h-list-footer .input-group .form-control, .header-chat .h-list-footer .input-group .input-group-text { background: transparent; border: none; border-radius: 0; padding: 0; } .header-chat .h-list-footer .input-group .btn-send:active, .header-chat .h-list-footer .input-group .btn-send:focus, .header-chat .h-list-footer .input-group .btn-send:hover, .header-chat .h-list-footer .input-group .form-control:active, .header-chat .h-list-footer .input-group .form-control:focus, .header-chat .h-list-footer .input-group .form-control:hover { outline: none; box-shadow: none; } .header-chat .h-list-footer .input-group .btn-attach { border-radius: 50%; padding: 1px 4px; margin-right: 5px; } .header-chat .h-list-footer .input-group .btn-attach > i { margin-right: 0; } .header-chat .h-list-footer .input-group .btn-send { border-radius: 50%; padding: 6px 10px; margin-left: 5px; position: absolute; right: -45px; top: 2px; z-index: 99; } .header-chat .h-list-footer .input-group .btn-send i { margin-right: 0; } .header-chat .h-list-footer .input-group .btn-send .input-group-text { color: #fff; } .header-chat .h-list-footer .input-group .form-control { transition: all 0.3s ease-in-out; width: 0; } .h-list-body .chat-messages { padding-bottom: 20px; padding-left: 15px; padding-right: 15px; } .h-list-body .chat-messages .photo-table { padding-right: 15px; } .h-list-body .chat-messages .photo-table img { display: inline-block; width: 45px; margin-bottom: 5px; } .h-list-body .chat-messages .chat-menu-content > div, .h-list-body .chat-messages .chat-menu-reply > div { position: relative; overflow: visible; display: inline-block; } .h-list-body .chat-messages .chat-menu-content > div .chat-cont, .h-list-body .chat-messages .chat-menu-reply > div .chat-cont { padding: 8px 20px; display: inline-block; } .h-list-body .chat-messages .chat-menu-content .chat-time, .h-list-body .chat-messages .chat-menu-reply .chat-time { margin: 5px 24px 0 0; } .h-list-body .chat-messages .chat-menu-reply { text-align: right; } .h-list-body .chat-messages .chat-menu-reply > div { margin-top: 10px; } .h-list-body .chat-messages .chat-menu-reply > div p { background: #fff; border-radius: 3px; margin-bottom: 4px; margin-right: 25px; box-shadow: 0 5px 15px 0 rgba(62, 57, 107, 0.15); } .h-list-body .chat-messages .chat-menu-reply > div:before { content: ""; z-index: 1001; transform: rotate(-45deg); border: 6px solid transparent; border-right-color: #fff; border-bottom-color: #fff; position: absolute; bottom: 16px; right: 19px; box-shadow: 1px 5px 10px -3px rgba(62, 57, 107, 0.15); } .h-list-body .chat-messages .chat-menu-content > div { margin-top: 10px; } .h-list-body .chat-messages .chat-menu-content > div p { background: #19BCBF; color: #fff; border-radius: 3px; margin-bottom: 4px; box-shadow: 0 5px 15px 0 rgba(62, 57, 107, 0.15); } .h-list-body .chat-messages .chat-menu-content > div:before { content: ""; z-index: 1001; transform: rotate(-45deg); border: 6px solid transparent; border-left-color: #19BCBF; border-top-color: #19BCBF; position: absolute; top: 12px; left: -6px; box-shadow: -4px 0 8px -5px rgba(62, 57, 107, 0.3); } /* massage page start */ .msg-card .msg-user-list { height: calc(100vh - 300px); } .msg-card .msg-user-chat { background: #eff3f6; height: calc(100vh - 330px); padding: 25px 5px; } .msg-card .msg-block > .row > div:before { content: ""; width: 1px; height: 100%; background: #f1f1f1; position: absolute; top: 0; } .msg-card .msg-block > .row > div:first-child:before { right: 0; } .msg-card .msg-block > .row > div:last-child:before { left: -1px; } .main-friend-chat { padding-bottom: 15px; } @media screen and (max-width: 991px) { .msg-card .msg-block > .row > div:before { background: none; } } .btn-grouping > .btn-icon { height: 48px; } /* massage page end */ /**====== Chat css end ======**/ /** ===================== Prism css start ========================== **/ pre[class*=language-] code { font-size: 14px; } pre[class*=language-] [class*=language-], pre[class*=language-] .language-markup { background-color: transparent; display: block; padding: 10px 15px; } pre.line-numbers { position: relative; padding-left: 3.8em; counter-reset: linenumber; } pre.line-numbers > code { position: relative; } .line-numbers .line-numbers-rows { position: absolute; pointer-events: none; top: 0; font-size: 100%; left: -3.8em; width: 3em; /* works for line-numbers below 1000 lines */ letter-spacing: -1px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .line-numbers-rows > span { pointer-events: none; display: block; counter-increment: linenumber; } .line-numbers-rows > span:before { content: counter(linenumber); display: block; padding-right: 0.8em; text-align: right; } div.code-toolbar { position: relative; } div.code-toolbar > .toolbar { position: absolute; top: 0.3em; right: 0.2em; transition: opacity 0.3s ease-in-out; opacity: 0; } div.code-toolbar:hover > .toolbar { opacity: 1; } div.code-toolbar > .toolbar .toolbar-item { display: inline-block; } div.code-toolbar > .toolbar a { cursor: pointer; } div.code-toolbar > .toolbar button { border: 0; font: inherit; line-height: normal; overflow: visible; } div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span { color: #bbb; font-size: 0.8em; padding: 0 0.5em; background: #f5f2f0; background: rgba(224, 224, 224, 0.2); box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); border-radius: 0.5em; } div.code-toolbar > .toolbar a:focus, div.code-toolbar > .toolbar a:hover, div.code-toolbar > .toolbar button:focus, div.code-toolbar > .toolbar button:hover, div.code-toolbar > .toolbar span:focus, div.code-toolbar > .toolbar span:hover { color: inherit; text-decoration: none; } /**====== Prism css end ======**/ /** ===================== Toolbar css start ========================== **/ .tool-bottom .tool-item:first-child, .tool-top .tool-item:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .tool-bottom .tool-item:last-child, .tool-top .tool-item:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .tool-left .tool-item:first-child, .tool-left .tool-item:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; } .tool-left .tool-item:last-child, .tool-left .tool-item:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .toolbar-primary .tool-item { background: #19BCBF; } .toolbar-primary .tool-item.selected, .toolbar-primary .tool-item:hover { background: #139092; } .toolbar-primary.tool-top .arrow { border-color: #19BCBF transparent transparent; } .toolbar-primary.tool-bottom .arrow { border-color: transparent transparent #19BCBF; } .toolbar-primary.tool-left .arrow { border-color: transparent transparent transparent #19BCBF; } .toolbar-primary.tool-right .arrow { border-color: transparent #19BCBF transparent transparent; } .btn-toolbar-primary.pressed { background-color: #19BCBF; } .toolbar-warning .tool-item { background: #FF9764; } .toolbar-warning .tool-item.selected, .toolbar-warning .tool-item:hover { background: #ff7531; } .toolbar-warning.tool-top .arrow { border-color: #FF9764 transparent transparent; } .toolbar-warning.tool-bottom .arrow { border-color: transparent transparent #FF9764; } .toolbar-warning.tool-left .arrow { border-color: transparent transparent transparent #FF9764; } .toolbar-warning.tool-right .arrow { border-color: transparent #FF9764 transparent transparent; } .btn-toolbar-warning.pressed { background-color: #FF9764; } .toolbar-light .tool-item { background: #d6d6d6; } .toolbar-light .tool-item.selected, .toolbar-light .tool-item:hover { background: #bdbdbd; } .toolbar-light.tool-top .arrow { border-color: #d6d6d6 transparent transparent; } .toolbar-light.tool-bottom .arrow { border-color: transparent transparent #d6d6d6; } .toolbar-light.tool-left .arrow { border-color: transparent transparent transparent #d6d6d6; } .toolbar-light.tool-right .arrow { border-color: transparent #d6d6d6 transparent transparent; } .btn-toolbar-light.pressed { background-color: #d6d6d6; } .toolbar-danger .tool-item { background: #FF425C; } .toolbar-danger .tool-item.selected, .toolbar-danger .tool-item:hover { background: #ff0f30; } .toolbar-danger.tool-top .arrow { border-color: #FF425C transparent transparent; } .toolbar-danger.tool-bottom .arrow { border-color: transparent transparent #FF425C; } .toolbar-danger.tool-left .arrow { border-color: transparent transparent transparent #FF425C; } .toolbar-danger.tool-right .arrow { border-color: transparent #FF425C transparent transparent; } .btn-toolbar-danger.pressed { background-color: #FF425C; } .toolbar-success .tool-item { background: #13bd8a; } .toolbar-success .tool-item.selected, .toolbar-success .tool-item:hover { background: #0e8f68; } .toolbar-success.tool-top .arrow { border-color: #13bd8a transparent transparent; } .toolbar-success.tool-bottom .arrow { border-color: transparent transparent #13bd8a; } .toolbar-success.tool-left .arrow { border-color: transparent transparent transparent #13bd8a; } .toolbar-success.tool-right .arrow { border-color: transparent #13bd8a transparent transparent; } .btn-toolbar-success.pressed { background-color: #13bd8a; } .toolbar-dark .tool-item { background: #39465C; } .toolbar-dark .tool-item.selected, .toolbar-dark .tool-item:hover { background: #252e3d; } .toolbar-dark.tool-top .arrow { border-color: #39465C transparent transparent; } .toolbar-dark.tool-bottom .arrow { border-color: transparent transparent #39465C; } .toolbar-dark.tool-left .arrow { border-color: transparent transparent transparent #39465C; } .toolbar-dark.tool-right .arrow { border-color: transparent #39465C transparent transparent; } .btn-toolbar-dark.pressed { background-color: #39465C; } .toolbar-info .tool-item { background: #2DCEE3; } .toolbar-info .tool-item.selected, .toolbar-info .tool-item:hover { background: #1ab0c3; } .toolbar-info.tool-top .arrow { border-color: #2DCEE3 transparent transparent; } .toolbar-info.tool-bottom .arrow { border-color: transparent transparent #2DCEE3; } .toolbar-info.tool-left .arrow { border-color: transparent transparent transparent #2DCEE3; } .toolbar-info.tool-right .arrow { border-color: transparent #2DCEE3 transparent transparent; } .btn-toolbar-info.pressed { background-color: #2DCEE3; } /**====== Toolbar css end ======**/ /** ===================== Switches css start ========================== **/ .switch input[type=checkbox] { opacity: 0; position: absolute; } .switch input[type=checkbox] + .cr { position: relative; display: inline-block; transition: 0.4s ease; height: 20px; width: 35px; border: 1px solid #e9eaec; border-radius: 60px; cursor: pointer; z-index: 0; top: 6px; } .switch input[type=checkbox] + .cr:after, .switch input[type=checkbox] + .cr:before { content: ""; position: absolute; display: block; top: 0; left: 0; } .switch input[type=checkbox] + .cr:before { transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1); height: 20px; width: 35px; border-radius: 30px; } .switch input[type=checkbox] + .cr:after { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05); transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1); background: #f7f7f7; height: 19px; width: 19px; border-radius: 60px; } .switch input[type=checkbox]:checked + .cr:before { background: #19BCBF; transition: width 0.2s cubic-bezier(0, 0, 0, 0.1); } .switch input[type=checkbox]:checked + .cr:after { left: 16px; } .switch input[type=checkbox]:disabled + label { opacity: 0.5; filter: grayscale(0.4); cursor: not-allowed; } .switch .switch-alignment { top: 12px !important; } .switch.switch-primary input[type=checkbox]:checked + .cr:before { background: #19BCBF; } .switch.switch-danger input[type=checkbox]:checked + .cr:before { background: #FF425C; } .switch.switch-success input[type=checkbox]:checked + .cr:before { background: #13bd8a; } .switch.switch-warning input[type=checkbox]:checked + .cr:before { background: #FF9764; } .switch.switch-purple input[type=checkbox]:checked + .cr:before { background: #463699; } .switch.switch-info input[type=checkbox]:checked + .cr:before { background: #2DCEE3; } /**====== Switches css end ======**/ /** ===================== wizard css start ========================== **/ /* material wizard start */ .wizard-container { z-index: 3; } .wizard-container .wizard-navigation { position: relative; } .wizard-card .moving-tab { position: absolute; text-align: center; padding: 16px 12px; font-size: 14px; text-transform: uppercase; -webkit-font-smoothing: subpixel-antialiased; top: -6px; left: 0; border-radius: 4px; color: #FFFFFF; cursor: pointer; font-weight: 500; } .wizard-card[data-color=wizard-primary] .moving-tab { background-color: #19BCBF; box-shadow: 0 16px 26px -10px rgba(25, 188, 191, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(25, 188, 191, 0.2); } .wizard-card[data-color=wizard-danger] .moving-tab { background-color: #FF425C; box-shadow: 0 16px 26px -10px rgba(255, 66, 92, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 66, 92, 0.2); } .wizard-card[data-color=wizard-success] .moving-tab { background-color: #13bd8a; box-shadow: 0 16px 26px -10px rgba(19, 189, 138, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(19, 189, 138, 0.2); } .wizard-card[data-color=wizard-warning] .moving-tab { background-color: #FF9764; box-shadow: 0 16px 26px -10px rgba(255, 151, 100, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255, 151, 100, 0.2); } .wizard-card[data-color=wizard-purple] .moving-tab { background-color: #463699; box-shadow: 0 16px 26px -10px rgba(70, 54, 153, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(70, 54, 153, 0.2); } .wizard-card[data-color=wizard-info] .moving-tab { background-color: #2DCEE3; box-shadow: 0 16px 26px -10px rgba(45, 206, 227, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(45, 206, 227, 0.2); } .wizard-card .wizard-footer .checkbox { margin-top: 16px; } .wizard-card .disabled { display: none; } .nav-pills > li + li { margin-left: 0; } .nav-pills > li > a { border: 0; border-radius: 0; line-height: 18px; text-transform: uppercase; font-size: 12px; font-weight: 500; min-width: 100px; text-align: center; color: #555555; position: relative; display: block; padding: 11px 15px; } .nav-pills > li.active > a { background-color: inherit; } .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover { background-color: inherit; } .nav-pills > li > a:focus, .nav-pills > li > a:hover { background-color: inherit; } .nav-pills > li i { display: block; font-size: 30px; padding: 15px 0; } /* material wizard end */ /* Smart wizard 4 start */ .sw-theme-default { box-shadow: none; } .sw-theme-default > ul.step-anchor > li a, .sw-theme-default > ul.step-anchor > li a > h6, .sw-theme-default > ul.step-anchor > li a:hover { color: #e2e5e8; } .sw-theme-default > ul.step-anchor > li.done a > h6 { color: initial; } .sw-theme-default > ul.step-anchor > li.active a, .sw-theme-default > ul.step-anchor > li.active a h6 { color: #19BCBF; } .sw-theme-default > ul.step-anchor > li > a.nav-link:after { background: #19BCBF; } .sw-theme-default > ul.step-anchor > li.done > a.nav-link:after { background: #e2e5e8; } .sw-theme-default .step-anchor, .sw-theme-default .sw-container { background: #fff; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3); } .sw-theme-default .step-anchor { margin-bottom: 30px; } .sw-theme-default .step-anchor li > a { padding: 15px 25px; } .sw-theme-default .sw-container .step-content { padding: 35px 30px; } .sw-theme-default .sw-toolbar { padding: 10px; background: transparent; } .sw-theme-default .step-content + .sw-toolbar { padding-top: 0; } .sw-theme-arrows .sw-container, .sw-theme-circles .sw-container, .sw-theme-dots .sw-container { background: #fff; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3); } .sw-theme-arrows .sw-container .step-content, .sw-theme-circles .sw-container .step-content, .sw-theme-dots .sw-container .step-content { padding: 35px 30px; } .sw-theme-arrows .sw-toolbar-bottom, .sw-theme-circles .sw-toolbar-bottom, .sw-theme-dots .sw-toolbar-bottom { padding: 10px; } .sw-theme-arrows .step-anchor, .sw-theme-circles .step-anchor, .sw-theme-dots .step-anchor { margin-bottom: 30px; } .sw-theme-dots > ul.step-anchor > li > a:after { left: 42%; bottom: 0; } @media screen and (max-width: 768px) { .sw-theme-dots > ul.step-anchor > li > a:after { top: -42px; left: -40px; } .sw-theme-arrows > ul.step-anchor > li > a { padding-right: 15px; } } .sw-vertical-left, .sw-vertical-right { display: flex; flex-direction: row; } @media (min-width: 768px) { .sw-vertical-left.sw-main, .sw-vertical-right.sw-main { flex-direction: row; } .sw-vertical-left .step-anchor, .sw-vertical-right .step-anchor { align-self: flex-start; flex-direction: column; min-width: 200px; } .sw-vertical-left .step-anchor li, .sw-vertical-right .step-anchor li { flex-grow: 0; } } @media (max-width: 767px) { .sw-vertical-left.sw-main, .sw-vertical-right.sw-main { flex-direction: column; } } @media (min-width: 768px) { .sw-vertical-left { flex-direction: row-reverse; } .sw-vertical-left .sw-done-icon, .sw-vertical-left .sw-icon, .sw-vertical-left .sw-number { left: 2rem; } .sw-vertical-left .step-anchor { margin-right: 30px; } } @media (min-width: 768px) { .sw-vertical-right { flex-direction: row-reverse; } .sw-vertical-right .sw-done-icon, .sw-vertical-right .sw-icon, .sw-vertical-right .sw-number { right: 2rem; } .sw-vertical-right .step-anchor { margin-left: 30px; } } @media (max-width: 767px) { .sw-vertical-right .step-anchor { margin: 30px 0 0; } } /* Smart wizard 4 end */ /**====== wizard css end ======**/ /** ===================== Chart css start ========================== **/ .nvtooltip { position: fixed !important; } .peity-chart + .peity { width: 100%; height: 250px; } /* Radial Chart Start */ .radial-bar { position: relative; display: inline-block; border-radius: 50%; background-color: transparent; margin-bottom: 20px; box-sizing: content-box; width: 80px; height: 80px; font-size: 18px; background-clip: content-box; } .radial-bar:after { display: inline-block; position: absolute; top: 0; left: 0; border-radius: 50%; text-align: center; font-weight: 500; color: #455a64; width: 56px; height: 56px; margin-left: 12px; margin-top: 12px; line-height: 56px; content: attr(data-label); background-color: #fff; z-index: 55; } .radial-bar > img { display: inline-block; position: absolute; top: 0; left: 0; border-radius: 50%; text-align: center; font-weight: 500; color: #455a64; width: 56px; height: 56px; margin-left: 12px; margin-top: 12px; line-height: 56px; } .radial-bar > img { z-index: 102; } .radial-bar.radial-bar-0 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-5 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-10 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-15 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-20 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-25 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-30 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-35 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-40 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-45 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-50 { background-image: linear-gradient(270deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-55 { background-image: linear-gradient(288deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-60 { background-image: linear-gradient(306deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-65 { background-image: linear-gradient(324deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-70 { background-image: linear-gradient(342deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-75 { background-image: linear-gradient(360deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-80 { background-image: linear-gradient(378deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-85 { background-image: linear-gradient(396deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-90 { background-image: linear-gradient(414deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-95 { background-image: linear-gradient(432deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-100 { background-image: linear-gradient(450deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-0 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-5 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-10 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-15 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-20 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-25 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-30 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-35 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-40 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-45 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-50 { background-image: linear-gradient(270deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-55 { background-image: linear-gradient(288deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-60 { background-image: linear-gradient(306deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-65 { background-image: linear-gradient(324deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-70 { background-image: linear-gradient(342deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-75 { background-image: linear-gradient(360deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-80 { background-image: linear-gradient(378deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-85 { background-image: linear-gradient(396deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-90 { background-image: linear-gradient(414deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-95 { background-image: linear-gradient(432deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-primary.radial-bar-100 { background-image: linear-gradient(450deg, #19BCBF 50%, transparent 50%, transparent), linear-gradient(270deg, #19BCBF 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-0 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-5 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-10 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-15 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-20 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-25 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-30 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-35 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-40 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-45 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-50 { background-image: linear-gradient(270deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-55 { background-image: linear-gradient(288deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-60 { background-image: linear-gradient(306deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-65 { background-image: linear-gradient(324deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-70 { background-image: linear-gradient(342deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-75 { background-image: linear-gradient(360deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-80 { background-image: linear-gradient(378deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-85 { background-image: linear-gradient(396deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-90 { background-image: linear-gradient(414deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-95 { background-image: linear-gradient(432deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-danger.radial-bar-100 { background-image: linear-gradient(450deg, #FF425C 50%, transparent 50%, transparent), linear-gradient(270deg, #FF425C 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-0 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-5 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-10 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-15 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-20 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-25 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-30 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-35 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-40 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-45 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-50 { background-image: linear-gradient(270deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-55 { background-image: linear-gradient(288deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-60 { background-image: linear-gradient(306deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-65 { background-image: linear-gradient(324deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-70 { background-image: linear-gradient(342deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-75 { background-image: linear-gradient(360deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-80 { background-image: linear-gradient(378deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-85 { background-image: linear-gradient(396deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-90 { background-image: linear-gradient(414deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-95 { background-image: linear-gradient(432deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-success.radial-bar-100 { background-image: linear-gradient(450deg, #13bd8a 50%, transparent 50%, transparent), linear-gradient(270deg, #13bd8a 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-0 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-5 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-10 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-15 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-20 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-25 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-30 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-35 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-40 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-45 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-50 { background-image: linear-gradient(270deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-55 { background-image: linear-gradient(288deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-60 { background-image: linear-gradient(306deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-65 { background-image: linear-gradient(324deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-70 { background-image: linear-gradient(342deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-75 { background-image: linear-gradient(360deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-80 { background-image: linear-gradient(378deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-85 { background-image: linear-gradient(396deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-90 { background-image: linear-gradient(414deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-95 { background-image: linear-gradient(432deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-warning.radial-bar-100 { background-image: linear-gradient(450deg, #FF9764 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9764 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-0 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-5 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-10 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-15 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-20 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-25 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-30 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-35 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-40 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-45 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-50 { background-image: linear-gradient(270deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-55 { background-image: linear-gradient(288deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-60 { background-image: linear-gradient(306deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-65 { background-image: linear-gradient(324deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-70 { background-image: linear-gradient(342deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-75 { background-image: linear-gradient(360deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-80 { background-image: linear-gradient(378deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-85 { background-image: linear-gradient(396deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-90 { background-image: linear-gradient(414deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-95 { background-image: linear-gradient(432deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-purple.radial-bar-100 { background-image: linear-gradient(450deg, #463699 50%, transparent 50%, transparent), linear-gradient(270deg, #463699 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-0 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-5 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-10 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-15 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-20 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-25 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-30 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-35 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-40 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-45 { background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-50 { background-image: linear-gradient(270deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-55 { background-image: linear-gradient(288deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-60 { background-image: linear-gradient(306deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-65 { background-image: linear-gradient(324deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-70 { background-image: linear-gradient(342deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-75 { background-image: linear-gradient(360deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-80 { background-image: linear-gradient(378deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-85 { background-image: linear-gradient(396deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-90 { background-image: linear-gradient(414deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-95 { background-image: linear-gradient(432deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar.radial-bar-info.radial-bar-100 { background-image: linear-gradient(450deg, #2DCEE3 50%, transparent 50%, transparent), linear-gradient(270deg, #2DCEE3 50%, #d6d6d6 50%, #d6d6d6); } .radial-bar-lg { width: 100px; height: 100px; font-size: 20px; } .radial-bar-lg > img, .radial-bar-lg:after { width: 70px; height: 70px; margin-left: 15px; margin-top: 15px; line-height: 70px; } .radial-bar-sm { width: 60px; height: 60px; font-size: 12px; } .radial-bar-sm > img, .radial-bar-sm:after { width: 40px; height: 40px; margin-left: 10px; margin-top: 10px; line-height: 42px; } .radial-bar-xs { width: 35px; height: 35px; font-size: 10px; } .radial-bar-xs > img, .radial-bar-xs:after { width: 25px; height: 25px; margin-left: 5.5px; margin-top: 4.5px; line-height: 25px; } /* Radial Chart End */ /**====== Chart css end ======**/ /** ===================== Icon layouts css start ========================== **/ .i-main .i-block { display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; margin: 5px; border: 1px solid #f1f1f1; position: relative; cursor: pointer; } .i-main .i-block i { font-size: 30px; color: #686c71; } .i-main .i-block label { margin-bottom: 0; display: none; } .i-main .i-block span.ic-badge { position: absolute; bottom: 0; right: 0; } .i-main .i-block .flag-icon-background { width: 40px; height: 40px; } /**====== Icon layouts css end ======**/ /** ===================== Calendar css start ========================== **/ .external-events .fc-event { color: #fff; cursor: move; padding: 5px 18px; margin-top: 5px; background: #19BCBF; border-color: #19BCBF; } .calendar a:not([href]):not([tabindex]), .calendar a:not([href]):not([tabindex]):focus, .calendar a:not([href]):not([tabindex]):hover { color: #fff; } .calendar .fc-event, .calendar .fc-event:hover { color: #fff; cursor: move; padding: 5px 18px; margin-top: 2px; background: #19BCBF; border-color: #19BCBF; } /**====== Calendar css end ======**/ /** ===================== File Upload css start ========================== **/ .dropzone { min-height: 150px; border: 1px solid rgba(42, 42, 42, 0.05); background: rgba(204, 204, 204, 0.15); padding: 20px; border-radius: 5px; box-shadow: inset 0 0 5px 0 rgba(43, 43, 43, 0.1); } .dropzone.dz-clickable { cursor: pointer; } .dropzone.dz-clickable * { cursor: default; } .dropzone.dz-clickable .dz-message { cursor: pointer; } .dropzone.dz-clickable .dz-message * { cursor: pointer; } .dropzone.dz-started .dz-message { display: none; } .dropzone.dz-drag-hover { border-style: solid; } .dropzone.dz-drag-hover .dz-message { opacity: 0.5; } .dropzone .dz-message { text-align: center; margin: 4em 0; color: #888; font-size: 18px; } .dropzone .dz-preview { position: relative; display: inline-block; vertical-align: top; margin: 0.5rem; min-height: 100px; box-shadow: 0 13px 6px -8px rgba(0, 0, 0, 0.3), 0 0 4px 0 rgba(0, 0, 0, 0.3); border-radius: 5px; } .dropzone .dz-preview:hover { z-index: 1000; } .dropzone .dz-preview:hover .dz-details { opacity: 1; } .dropzone .dz-preview.dz-file-preview .dz-image { border-radius: 5px; background: #999; background: linear-gradient(to bottom, #eee, #ddd); } .dropzone .dz-preview.dz-file-preview .dz-details { opacity: 1; } .dropzone .dz-preview.dz-image-preview { background: white; } .dropzone .dz-preview.dz-image-preview .dz-details { transition: opacity 0.2s linear; } .dropzone .dz-preview .dz-remove { font-size: 14px; text-align: center; display: block; cursor: pointer; border: none; } .dropzone .dz-preview .dz-remove:hover { text-decoration: underline; } .dropzone .dz-preview:hover .dz-details { opacity: 1; } .dropzone .dz-preview .dz-details { z-index: 20; position: absolute; top: 0; left: 0; opacity: 0; font-size: 13px; min-width: 100%; max-width: 100%; padding: 2em 1em; text-align: center; color: rgba(0, 0, 0, 0.9); line-height: 150%; } .dropzone .dz-preview .dz-details .dz-size { margin-bottom: 1em; font-size: 16px; } .dropzone .dz-preview .dz-details .dz-filename { white-space: nowrap; } .dropzone .dz-preview .dz-details .dz-filename:hover span { border: 1px solid rgba(200, 200, 200, 0.8); background-color: rgba(255, 255, 255, 0.8); } .dropzone .dz-preview .dz-details .dz-filename:not(:hover) { overflow: hidden; text-overflow: ellipsis; } .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { border: 1px solid transparent; } .dropzone .dz-preview .dz-details .dz-filename span { background-color: rgba(255, 255, 255, 0.4); padding: 0 0.4em; border-radius: 3px; } .dropzone .dz-preview .dz-details .dz-size span { background-color: rgba(255, 255, 255, 0.4); padding: 0 0.4em; border-radius: 3px; } .dropzone .dz-preview:hover .dz-image img { transform: scale(1.05, 1.05); filter: blur(8px); } .dropzone .dz-preview .dz-image { border-radius: 5px; overflow: hidden; width: 120px; height: 120px; position: relative; display: block; z-index: 10; } .dropzone .dz-preview .dz-image img { display: block; display: block; padding: 4px; width: 100%; } .dropzone .dz-preview.dz-success .dz-success-mark { -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview.dz-error .dz-error-mark { opacity: 1; -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark { pointer-events: none; opacity: 0; z-index: 500; position: absolute; display: block; top: 50%; left: 50%; margin-left: -27px; margin-top: -27px; } .dropzone .dz-preview .dz-error-mark svg, .dropzone .dz-preview .dz-success-mark svg { display: block; width: 54px; height: 54px; } .dropzone .dz-preview.dz-processing .dz-progress { opacity: 1; transition: all 0.2s linear; } .dropzone .dz-preview.dz-complete .dz-progress { opacity: 0; transition: opacity 0.4s ease-in; } .dropzone .dz-preview:not(.dz-processing) .dz-progress { -webkit-animation: pulse 6s ease infinite; animation: pulse 6s ease infinite; } .dropzone .dz-preview .dz-progress { opacity: 1; z-index: 1000; pointer-events: none; position: absolute; height: 16px; left: 50%; top: 50%; margin-top: -8px; width: 80px; margin-left: -40px; background: rgba(255, 255, 255, 0.9); -webkit-transform: scale(1); border-radius: 5px; overflow: hidden; } .dropzone .dz-preview .dz-progress .dz-upload { background: #333; background: linear-gradient(to bottom, #666, #444); position: absolute; top: 0; left: 0; bottom: 0; width: 0; transition: width 300ms ease-in-out; } .dropzone .dz-preview.dz-error .dz-error-message { display: block; } .dropzone .dz-preview.dz-error:hover .dz-error-message { opacity: 1; pointer-events: auto; } .dropzone .dz-preview .dz-error-message { pointer-events: none; z-index: 1000; position: absolute; display: block; display: none; opacity: 0; transition: opacity 0.3s ease; border-radius: 5px; font-size: 13px; top: 130px; left: -10px; width: 140px; background: #FF425C; background: linear-gradient(to bottom, #FF425C, #FF425C); padding: 0.5em 1.2em; color: white; } .dropzone .dz-preview .dz-error-message:after { content: ""; position: absolute; top: -6px; left: 64px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #FF425C; } @-webkit-keyframes passing-through { 0% { opacity: 0; transform: translateY(40px); } 30%, 70% { opacity: 1; transform: translateY(0px); } 100% { opacity: 0; transform: translateY(-40px); } } @keyframes passing-through { 0% { opacity: 0; transform: translateY(40px); } 30%, 70% { opacity: 1; transform: translateY(0px); } 100% { opacity: 0; transform: translateY(-40px); } } @-webkit-keyframes slide-in { 0% { opacity: 0; transform: translateY(40px); } 30% { opacity: 1; transform: translateY(0px); } } @keyframes slide-in { 0% { opacity: 0; transform: translateY(40px); } 30% { opacity: 1; transform: translateY(0px); } } @-webkit-keyframes pulse { 0% { transform: scale(1); } 10% { transform: scale(1.1); } 20% { transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 10% { transform: scale(1.1); } 20% { transform: scale(1); } } /**====== File Upload css end ======**/ /** ===================== Help Desk Application css start ========================== **/ .hd-body .excerpt { padding: 15px; background: #eff3f6; border: 1px solid #e2e5e8; } .hd-body .ticket-customer, .hd-body .ticket-type-icon { display: block; text-transform: capitalize; } .hd-body:hover .hover-blk { transform: scale(1); } .sm-view .card-body .excerpt, .sm-view .card-body ul.list-inline { display: none; } .md-view .excerpt { display: none; } .md-view .col-auto ul li:nth-child(1), .md-view .col-auto ul li:nth-child(3), .sm-view .col-auto ul li:nth-child(1), .sm-view .col-auto ul li:nth-child(3) { display: none; } .hover-blk { background: #fff; width: 270px; left: calc(100% + 10px); transform: scale(0); z-index: 5; transition: all 0.1s ease-out; } .hover-blk .img-txt p { display: inline-block; } .topic-name h1 { float: left; font-weight: normal; } .topic-name .btn-star { float: right; } .dicon-blk { top: 0; right: 0; } .dicon-blk li { display: inline-block; } .hd-detail .col-right .edit-del { opacity: 0; } .hd-detail .col-right .edit-del i { opacity: 0.2; } .hd-detail .col-right .edit-del i:hover { opacity: 1; } .hd-detail:hover .edit-del { opacity: 1; } .hdd-user i { bottom: 0; } .ticket-block .hd-body { border-left: 3px solid #ccc; } .ticket-block .col.border-right { border-color: #ccc !important; } .ticket-block .ticket-type-icon { font-weight: 500; color: #111; } .ticket-block .excerpt h6 { color: #686c71; font-weight: 500; } .ticket-block .excerpt h6 a { color: #686c71; } .ticket-block .excerpt h6 a:hover { text-decoration: underline !important; color: #111; } .ticket-block.open-tic .hd-body { border-color: #ea394a; } .ticket-block.close-tic .hd-body { border-color: #5AC17F; } .right-col .card-footer label { font-weight: 500; } .q-view { position: fixed; width: 100%; height: 100%; z-index: 1030; top: 0; right: 0; visibility: hidden; } .q-view .overlay { background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .q-view .content { width: 585px; height: 100vh; z-index: 5; position: absolute; top: 0; background-color: #fff; padding-top: 20px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.3); right: -765px; transition: right 0.195s ease-in, visibility 0s linear 0.195s; min-height: 100vh; overflow: auto; } .q-view.active { visibility: visible; } .q-view.active .content { right: 0; transition: right 0.225s ease-out; } .select2-selection { border-color: #e2e5e8; } .hdd-right-side { width: 495px; } .hdd-right-side .hdd-right-inner { position: fixed; width: 465px; } .badge-sizing a { padding: 6px 9px; font-size: 14px; } .file-btn { position: relative; overflow: hidden; } .file-btn input { position: absolute; font-size: 50px; opacity: 0; right: 0; top: 0; } @media (max-width: 992px) { .hd-detail .col-right .edit-del { opacity: 1; } } @media only screen and (max-width: 767px) { .hdd-right-side { width: 100%; } .hdd-right-side .hdd-right-inner { position: static; width: 100%; } } @media (max-width: 575px) { .q-view .content { width: 450px; } } @media (max-width: 380px) { .q-view .content { width: 300px; } } /**====== Help Desk Application css start ======**/