芝麻web文件管理V1.00
编辑当前文件:/home/digitalh/www/public/assets/admin/side_menu/style.css
/* ------------------------------------- [Master Stylesheet] [Table of Contents] * Google Fonts * Include Third Party CSS Library + Bootstrap CSS + Classynav CSS + Owl Carousel CSS + Animate CSS + Nice Select CSS + jQuery UI CSS * Include Web Icon Fonts + Themify Icons + Font Awesome + Pe 7 Stroke + Elegant Icons + Material Design Iconic Font + Etline * Template Mixins + Flex + Miscellaneous * Template Responsive * Template Variables * Template Colors * Core Styles + Reboot CSS + Reset Styles + Typography + Utilities + Bootstraping CSS + Header CSS + Sidebar CSS + Footer CSS * Components + Button + Fill-button + Gradients-button + Icon-button + Dragula + Google-chart + Chart + Timeline + Invoice + Calendar + Slider + Gallery + Chat + Form-wizard + Form + Login + Loader + Todo-list + Widgets + Typography + Contact + Pricing-table + Data-table + Web-icons + Card + Cart + Product + Lock + Index + Nested-list + Table + Password + Timeout + Paginator + Avatar + Tooltip + Register + Project + Task + Tab + Dashboard + Progressbbar + Picker + Preloader + Profile + Switchers + Breadcrumb + Scrool + Editor + Setting + Alert + Analytic + CrypNews + Crypto + Crm + Job + Ecommerce * Email + Inbox * General Pages + Coming Soon + 404 * Sidebar Light CSS * Dark CSS * Sidebar Background Image CSS * Sidebar Gradient CSS * Helper CSS ------------------------------------- */ /* ------------------------------------- # [font-family] 'Overpass', sans-serif; ------------------------------------- */ /* Import Fonts & CSS Files */ @import url("https://fonts.googleapis.com/css2?family=Overpass:wght@400;600&display=swap"); @import url(css/bootstrap.min.css); @import url(css/owl.carousel.min.css); @import url(css/animate.css); @import url(css/nice-select.css); @import url(css/jquery-ui.min.css); @import url(css/default-assets/themify-icons.css); @import url(css/font-awesome.min.css); @import url(css/pe-icon-7-stroke.min.css); @import url(css/style.css); @import url(css/material-design-iconic-font.min.css); @import url(etline/style.css); /* :: Reboot CSS */ body { background-color: #f4f6f9; color: #718096; font-weight: 400; font-family: "Overpass", sans-serif; font-size: 14px; } h1, h2, h3, h4, h5, h6 { line-height: 1.6; color: #2d3748; font-weight: 600; font-family: "Overpass", sans-serif; } p { color: #718096; line-height: 1.7; font-size: 14px; font-weight: 400; font-family: "Overpass", sans-serif; } a, a:hover, a:focus { text-decoration: none; outline: 0 solid transparent; font-family: "Overpass", sans-serif; } img { max-width: 100%; height: auto; } .bg-img { background-size: cover; background-position: center center; background-repeat: no-repeat; } .popover, .tooltip { z-index: 9999999; } .mt-15 { margin-top: 15px !important; } .mt-30 { margin-top: 30px !important; } .mt-20 { margin-top: 20px !important; } .mt-50 { margin-top: 50px !important; } .mt-70 { margin-top: 70px !important; } .mt-100 { margin-top: 100px !important; } .mt-150 { margin-top: 150px !important; } .mt-200 { margin-top: 200px !important; } .mt-250 { margin-top: 250px !important; } .mt-300 { margin-top: 300px !important; } .mb-10 { margin-bottom: 10px !important; } .mb-15 { margin-bottom: 15px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-25 { margin-bottom: 25px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-50 { margin-bottom: 50px !important; } .mb-70 { margin-bottom: 70px !important; } .mb-100 { margin-bottom: 100px !important; } .mb-130 { margin-bottom: 130px !important; } .mb-150 { margin-bottom: 150px !important; } .mb-200 { margin-bottom: 200px !important; } .mb-250 { margin-bottom: 250px !important; } .mb-300 { margin-bottom: 300px !important; } .ml-15 { margin-left: 15px !important; } .ml-30 { margin-left: 30px !important; } .ml-50 { margin-left: 50px !important; } .mr-10 { margin-right: 10px !important; } .mr-15 { margin-right: 15px !important; } .mr-30 { margin-right: 30px !important; } .mr-50 { margin-right: 50px !important; } .p-30 { padding: 30px !important; } .p-20 { padding: 20px; } .line-height-50-p-0 { line-height: 50px; padding: 0; } .height-50 { height: 50px !important; } .height-200 { height: 200px !important; } .height-300 { height: 300px !important; } .height-400 { height: 400px !important; } .height-450 { height: 450px !important; } .height-500 { height: 500px !important; } .height-600 { height: 600px !important; } .height-700 { height: 700px !important; } .height-800 { height: 800px !important; } .height-900 { height: 900px !important; } .height-40 { height: 40px !important; } .w-15 { width: 15% !important; } .w-40 { width: 40% !important; } .w-70 { width: 70% !important; } .w-50 { width: 50% !important; } .section-padding-50 { padding-top: 50px; padding-bottom: 50px; } #preloader { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #ffffff; z-index: 999999; } .h-100vh { height: 100vh !important; } .bg-default-opacity-8- { background-color: rgba(113, 192, 22, 0.8) !important; } .bg-green { background-color: #1dc9b7; } .bg-overlay-white { position: relative; z-index: 1; } .bg-overlay-white::after { position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, white), to(rgba(255, 255, 255, 0.2))); background-image: -webkit-linear-gradient(left, white 0, rgba(255, 255, 255, 0.2) 100%); background-image: -o-linear-gradient(left, white 0, rgba(255, 255, 255, 0.2) 100%); background-image: linear-gradient(to right, white 0, rgba(255, 255, 255, 0.2) 100%); } .green-color-overlay { position: relative; z-index: 1; } .green-color-overlay::after { background-color: rgba(113, 192, 22, 0.75); position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .green-color-overlay-2 { position: relative; z-index: 1; } .green-color-overlay-2::after { background-color: rgba(113, 192, 22, 0.3); position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .pink-color-overlay { position: relative; z-index: 1; } .pink-color-overlay::after { background-color: rgba(136, 14, 79, 0.75); position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .danger-color-overlay { position: relative; z-index: 1; } .danger-color-overlay::after { background-color: rgba(241, 83, 110, 0.3); position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .bg-overlay { position: relative; z-index: 1; } .bg-overlay::after { background-color: rgba(62, 74, 89, 0.9); position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .dark-color-overlay-2 { position: relative; z-index: 1; } .dark-color-overlay-2::after { background-color: rgba(0, 0, 0, 0.9); position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .primary-color-overlay { position: relative; z-index: 1; } .primary-color-overlay::after { background-color: rgba(88, 103, 221, 0.8); position: absolute; content: ""; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; } .btn-default { background-color: #ffffff; color: #222222; border-color: transparent; font-weight: 600; } .bg-primary { background-color: #5867dd !important; } .primary-color { background-color: #5867dd; } .bg-danger { background-color: #fa5c7c !important; } .primary-color-text { color: #5867dd; } .bg-info { background-color: #39afd1 !important; } .bg-success { background-color: #00d97e !important; } .info-color { background-color: #fd397a; } .danger-color { background-color: #fd397a; } .success-color { background-color: #1dc9b7; } .bg-success { background-color: #1dc9b7 !important; } .success-text { color: #1dc9b7 !important; } .uppercase-text { text-transform: uppercase !important; } .warning-color { background-color: #ffb822; } .bg-purple { background-color: #5867dd; } .bg-blue { background-color: #0168fa; } .bg-teal { background-color: #1dc9b7; } .bg-chok { background-color: #462f3f; } .pink-darken-4 { background-color: #880e4f; } .g-transition-0_8 { -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .text-color-gray { color: #718096; } .g-bg-black { background-color: #222222; } .white-opacity-0_2 { border: 1px solid rgba(255, 255, 255, 0.2); } .border { border: 1px solid #e1eaea; } .border-2 { border: 5px solid #e1eaea; } .border-primary { border: 8px solid #5867dd !important; } .border-chok { border: 8px solid #462f3f; } .border-danger { border: 8px solid #fd397a !important; } .alert-outline-primary { border-color: #5867dd; border-radius: 5px; } .alert-outline-warning { border-color: #ffb822; border-radius: 5px; } .alert-outline-success { border-color: #1dc9b7; border-radius: 5px; } .alert-outline-info { border-color: #5578eb; border-radius: 5px; } .alert-outline-danger { border-color: #fd397a; border-radius: 5px; } .alert-outline-default { border-color: #e1eaea; border-radius: 5px; background: transparent; } .alert-outline-dark { border-color: #282f3a; border-radius: 5px; } .bg-gray { background-color: #f2f4f8; } .text-black { color: #273444 !important; } .border-radius-50 { border-radius: 50px !important; } .text-muted { color: #98a6ad !important; } .card .header-title { margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .02em; font-size: 18px; margin-top: 0; } .btn:focus { -webkit-box-shadow: none !important; box-shadow: none !important; } .g-transition-0_3 { -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } button:focus { outline: none; box-shadow: none; } .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: none; } .theme-bg-gra { background: -webkit-linear-gradient(225deg, #1de9b6 0, #1dc4e9 100%); background: -o-linear-gradient(225deg, #1de9b6 0, #1dc4e9 100%); background: linear-gradient(-135deg, #1de9b6 0, #1dc4e9 100%); } .full-height { clear: both; min-height: 100%; } .jarallax { position: relative; z-index: 0; } .jarallax > .jarallax-img { position: absolute; object-fit: cover; font-family: 'object-fit: cover;'; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .jvectormap-zoomin, .jvectormap-zoomout, .jvectormap-goback { background: #ebebeb; color: #323232; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .jvectormap-zoomin:hover, .jvectormap-zoomin:focus, .jvectormap-zoomout:hover, .jvectormap-zoomout:focus, .jvectormap-goback:hover, .jvectormap-goback:focus { background: #5867dd; color: #ffffff; } .order-listing, .unorder-listing { padding-left: 20px; } .order-listing li, .unorder-listing li { list-style: inherit; } .styling-listing li i { color: #5867dd; padding-right: 5px; } .visibility-hidden { visibility: hidden; } .h-5 { height: 5px; } .custom--checkbox { position: relative; display: inline-block; margin-bottom: 0; width: 15px; height: 15px; cursor: pointer; } .custom--checkbox input { top: 0; left: 0; z-index: 1; cursor: pointer; opacity: 0; position: absolute; display: none; width: 15px; height: 15px; } .custom--checkbox input:checked + .input-helper:before { border-color: #5867dd; } .custom--checkbox .input-helper:before, .custom--checkbox .input-helper:after { position: absolute; content: ""; transition: all 200ms; } .custom--checkbox .input-helper:before { left: 0; border: 2px solid #7a7a7a; top: 0; width: 15px; height: 15px; border-radius: 2px; color: #fff; } .custom--checkbox input:checked + .input-helper:before { background-color: #5867dd; } .custom--checkbox input:checked + .input-helper:after { opacity: 1; } .custom--checkbox .input-helper:after { content: '\f00c'; font-size: 12px; left: 1px; top: 0px; color: #fff; transform: rotate(-10deg); font-family: "FontAwesome"; opacity: 0; } .card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; -webkit-box-shadow: 0 0 13px 0 rgba(82, 63, 105, 0.1); box-shadow: 0 0 13px 0 rgba(82, 63, 105, 0.1); border: none; border-radius: 3px; } .box-shadow { -webkit-box-shadow: 0 0 13px 0 rgba(82, 63, 105, 0.1); box-shadow: 0 0 13px 0 rgba(82, 63, 105, 0.1); } .height-card { display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; -webkit-justify-content: stretch; justify-content: stretch; } .height-card > .card { width: 100%; min-width: 100%; } .box-margin { margin-bottom: 30px; } .font-11 { font-size: 11px !important; } .font-12 { font-size: 12px !important; } .font-13 { font-size: 13px !important; } .font-14 { font-size: 14px !important; } .font-15 { font-size: 15px !important; } .font-16 { font-size: 16px !important; } .font-17 { font-size: 17px !important; } .font-18 { font-size: 18px !important; } .font-20 { font-size: 20px !important; } .font-22 { font-size: 22px !important; } .font-24 { font-size: 24px !important; } .font-26 { font-size: 24px !important; } .font-28 { font-size: 24px !important; } .font-30 { font-size: 30px !important; } .font-36 { font-size: 36px !important; } .font-40 { font-size: 40px !important; } .font-46 { font-size: 46px !important; } .apex-charts text { fill: #adb6bd; } .text-info { color: #39afd1 !important; } .text-body { color: #6c757d !important; } .text-title { color: #6c757d; } .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; } .btn-link:hover { text-decoration: none; } .custom-control-input:checked ~ .custom-control-label::before { color: #4d5cf2 !important; border-color: #4d5cf2 !important; background-color: #4d5cf2 !important; } .float-right { float: right !important; } .swal2-popup .swal2-styled.swal2-confirm { background-color: #4d5cf2 !important; font-size: 18px; } @media only screen and (max-width: 767px) { .page-title { font-size: 14px; } } .page-title-box .page-title-right .breadcrumb { background-color: transparent; padding: 0; } .breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: .5rem; color: inherit; } .breadcrumb-item a { color: #5867dd; } .breadcrumb-item.active { color: #777; } @media only screen and (max-width: 767px) { .breadcrumb-item { font-size: 14px; } } .card-title { font-size: 16px; font-weight: 600; margin-bottom: 25px; text-transform: capitalize; color: #2d3748; line-height: 1.4; } .map-container { position: relative; min-width: 100%; max-width: 100%; display: block; padding: 35% 0; overflow: hidden; border-radius: 5px; } .map-container .google-map { display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; } .badge-warning-lighten { color: #fff !important; background-color: #ffb822; } .badge-danger-lighten { color: #fff !important; background-color: #fd397a; } .badge-success-lighten { color: #fff !important; background-color: #1dc9b7; } .overflow--hidden { overflow: hidden !important; } .h-5 { height: 5px !important; } .h-6 { height: 6px !important; } .h-8 { height: 8px !important; } .h-10 { height: 10px !important; } .user-thumb { width: 80px; height: 80px; } .border-radius-50 { border-radius: 50% !important; } .text-color { color: #718096; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .user-img { width: 50px; height: 50px; } .custom-select { font-size: 14px; } .dropdown-item { font-size: 13px; } .align-middle { vertical-align: middle !important; } .custom-control-label::before { width: 18px; height: 18px; border: 2px solid #adb5bd; border-radius: 2px; } .custom-control-label { vertical-align: middle !important; } .custom-control-label::after { width: 18px; height: 18px; } .flex-50-thubm { -webkit-box-flex: 0; -ms-flex: 0 0 50px; flex: 0 0 50px; width: 50px; max-width: 50px; } .flex-30-img { -webkit-box-flex: 0; -ms-flex: 0 0 30px; flex: 0 0 30px; width: 30px; max-width: 30px; } .flex-40-thubm { -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; width: 40px; max-width: 40px; } .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: transparent; } .embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { height: 500px; } .chat-img { width: 40px; height: 40px; border-radius: 50%; display: inline-block; } @media only screen and (max-width: 767px) { .chat-img { width: 30px; height: 30px; } } .chat-img-2 { -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; max-width: 40px; width: 40px; border-radius: 50%; display: inline-block; } .media-thumb { width: 64px; height: 64px; } .flag-thumb { width: 35px; } .card-visa-thumb { width: 50px; } .dropdown-item.active, .dropdown-item:active { background-color: transparent; } .page-title-box { padding-bottom: 30px; } .page-title-box .breadcrumb { font-size: 18px; margin-bottom: 0; padding: 2px 0; font-weight: 700; background-color: transparent; } .breadcrumb a { color: #8997bd; } .border-pre { background-color: #f8f9fa; padding: 15px; } .border-pre pre { font-size: 14px; } @media only screen and (max-width: 767px) { .mb-sm-30 { margin-bottom: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .mb-sm-30 { margin-bottom: 30px; } } .custom-control-label::before { top: .15rem; } .custom-control-label::after { top: .15rem; } .close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover { opacity: 1; } .tox .tox-notification--in { opacity: 0 !important; } .uppercase-text { text-transform: uppercase; } .text-dark { color: #2d3748 !important; } @media only screen and (min-width: 1200px) and (max-width: 1365px) { .break-1365-none { display: none; } } @media only screen and (min-width: 1366px) { .break-1200-none { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .break-992-none { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .break-768-none { display: none !important; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .break-576-none { display: none !important; } } @media only screen and (max-width: 767px) { .break-320-480-none { display: none !important; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .break-320-480-none { display: inline-block !important; } } @media only screen and (max-width: 767px) { .break-320-576-none { display: none !important; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .break-320-576-none { display: none !important; } } @media only screen and (max-width: 767px) { .mb-30-xs { margin-bottom: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .mb-30-lg { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .mb-30-md { margin-bottom: 30px; } } @media only screen and (max-width: 767px) { .mb-30-xs { margin-bottom: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .mb-20-lg { margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .mb-20-md { margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .mb-20-xs { margin-bottom: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .mb-15-lg { margin-bottom: 15px; } } @media only screen and (max-width: 767px) { .mb-15-xs { margin-bottom: 15px; } } @media only screen and (max-width: 767px) { .mb-50-xs { margin-bottom: 50px; } } .note-toolbar { position: relative; z-index: 2 !important; } .dropdown-menu { z-index: 55; } .pd-x-0 { padding-left: 0px; padding-right: 0px; } .custom-select { height: auto; } .form-control { font-size: 13px; height: 40px; } div.tagsinput span.tag a { font-weight: 600; color: #fff; text-decoration: none; font-size: 14px; } .custom-file-label { position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: auto; font-weight: 400; color: #495057; background-color: #fff; border-radius: .25rem; } .border-none { border: none !important; } .md-content button { display: block; margin: 0 auto; font-size: 12px; } .md-content h3 { font-size: 24px; padding: 15px; } .modal-content .close:hover { color: #fd397a; text-decoration: none; } .close { font-weight: 400; opacity: 6; line-height: 0.7; } .dropdown, .dropleft, .dropright, .dropup { position: relative; } @media only screen and (max-width: 767px) { .md-modal { width: 300px; padding: 15px; height: 100%; } } @media only screen and (max-width: 767px) { .md-content button { font-size: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .md-content button { font-size: 12px; } } .slimScrollDiv { position: relative; z-index: 22; } .bg-gradient-dark { background: -o-linear-gradient(40deg, #273444, #272b44) !important; background: linear-gradient(50deg, #273444, #272b44) !important; } .gmaps { height: 450px; width: 100%; border: 0; } .md-effect-12 .md-content { color: inherit; } .md-effect-12 .md-content h3, .md-effect-12 .md-content { background: #fff; } .swal2-popup .swal2-title { font-size: 18px; color: #2d3748; } .swal2-popup .swal2-styled { padding: 6px 30px; } .swal2-popup .swal2-styled.swal2-confirm { background-color: #5867dd !important; font-size: 15px; } /* Prevent scrollbars to appear when waves go out of bound */ .sonar-wrapper { position: relative; z-index: 0; overflow: hidden; } /* The circle */ .sonar-emitter { position: relative; margin: 0 auto; width: 40px; height: 40px; border-radius: 9999px; } /* the 'wave', same shape and size as its parent */ .sonar-wave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 9999px; opacity: 0; z-index: -1; pointer-events: none; border-radius: 50%; } /* Animate! NOTE: add browser prefixes where needed. */ .sonar-wave { animation: sonarWave 5s linear infinite; } @keyframes sonarWave { from { opacity: 1; } to { transform: scale(2); opacity: 0; } } @media only screen and (max-width: 767px) { .font-13-xs { font-size: 13px !important; } } @media only screen and (max-width: 767px) { .font-14-xs { font-size: 14px !important; } } @media only screen and (max-width: 767px) { .font-15-xs { font-size: 15px !important; } } @media only screen and (max-width: 767px) { .font-16-xs { font-size: 16px !important; } } @media only screen and (max-width: 767px) { .font-20-xs { font-size: 20px !important; } } .border-botom { border-bottom: 1px solid #e1eaea; } /* :: Bootstraping CSS */ .page-body-wrapper { min-height: calc(100vh - 60px); display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; padding-left: 0; padding-right: 0; padding-top: 60px; } .page-body-wrapper.full-page-wrapper { width: 100%; min-height: 100vh; padding-top: 0; } .main-panel { transition: width 0.25s ease, margin 0.25s ease; width: calc(100% - 255px); min-height: calc(100vh - 60px); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } @media (max-width: 1199px) { .main-panel { margin-left: 0; width: 100%; } } .content-wrapper { padding-left: 20px; padding-right: 20px; padding-top: 30px; width: 100%; -webkit-flex-grow: 1; flex-grow: 1; } @media (max-width: 767px) { .content-wrapper { padding-top: 30px; padding-left: 0; padding-right: 0; } } .notification-thumbnail .preview-icon { height: 30px; width: 30px; display: inline-block; line-height: 30px; text-align: center; border-radius: 3px; color: #fff; margin-right: 15px; font-size: 14px; } .dropdown-item { cursor: pointer; } .dropdown-item:hover { background-color: #eef5f9; } .profile-top a i { color: #5867dd; font-size: 16px; } .notification-item-content h6 { margin-bottom: 2px; font-size: 14px; } .notification-item-content p { font-size: 13px; } .language-thumb { max-width: 25px; margin-right: 10px; } .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right .nav-item { display: flex !important; } .align-self-stretch, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-settings, .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right { align-self: stretch !important; } .align-items-stretch, .email-wrapper .message-body .attachments-sections ul li, .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right { align-items: stretch !important; } /* Sidebar */ .sidebar { min-height: calc(100vh - 60px); background: #f8f8f8; font-weight: 300; padding: 0; width: 255px; z-index: 11; transition: width 0.25s ease, background 0.25s ease; -webkit-transition: width 0.25s ease, background 0.25s ease; -moz-transition: width 0.25s ease, background 0.25s ease; -ms-transition: width 0.25s ease, background 0.25s ease; box-shadow: 6px 16px 31px -18px #b7bcd1; -webkit-box-shadow: 6px 16px 31px -18px #b7bcd1; -moz-box-shadow: 6px 16px 31px -18px #b7bcd1; -ms-box-shadow: 6px 16px 31px -18px #b7bcd1; } .sidebar .nav-profile { height: 87px; padding: 1.25rem 2.187rem; } .sidebar .nav-profile a { text-decoration: none; } .sidebar .nav-profile a:hover, .sidebar .nav-profile a:active, .sidebar .nav-profile a:focus { text-decoration: none; } .sidebar .nav-profile img { width: 33px; height: 33px; border-radius: 100%; margin-right: 1rem; } .sidebar .nav-profile .sidebar-profile-name { font-size: 1rem; color: #001737; } .sidebar .nav-profile .sidebar-profile-designation { font-weight: normal; } .sidebar .nav-profile.dropdown { position: relative; } .sidebar .nav-profile.dropdown .dropdown-toggle:after { position: absolute; right: 1.875rem; top: 45%; color: #bfc4ce; } .sidebar .nav-profile .dropdown-menu { margin-top: 0; padding: 0; width: 100%; } .sidebar .nav-profile .dropdown-menu .dropdown-item { font-size: .875rem; padding: .875rem 1.5rem; } .sidebar .nav { overflow: hidden; flex-wrap: nowrap; flex-direction: column; margin-bottom: 60px; } .sidebar .nav .nav { margin-bottom: 0; } .sidebar .nav .nav .nav-item { margin-bottom: 0; } .sidebar .nav .nav-item { -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; transition-property: background; -webkit-transition-property: background; font-size: 0.875rem; margin-bottom: 10px; position: relative; z-index: 1; } .sidebar .nav .nav-item::after { position: absolute; content: ""; left: 0; top: 0; z-index: 2; height: 30px; width: 3px; transition-duration: 500ms; background-color: #5867dd; opacity: 0; } .sidebar .nav .nav-item:hover::after { opacity: 1; } .sidebar .nav .nav-item.active { position: relative; z-index: 1; } .sidebar .nav .nav-item.active::after { position: absolute; content: ""; left: 0; top: 0; z-index: 2; height: 30px; width: 3px; transition-duration: 500ms; background-color: #5867dd; opacity: 1; } .sidebar .nav.sub-menu .nav-item::after { display: none; } .sidebar .nav .nav-item .collapse { z-index: 999; } .sidebar .nav .nav-item .submenu-wrapper { list-style: none; padding-left: 0; margin-top: 0; } .sidebar .nav .nav-item .submenu-wrapper .nav-item { margin-bottom: 0; } .sidebar .nav .nav-item .sidebar-menu-title { color: #2f3cff; font-weight: bold; padding: 0 2.187rem; margin-bottom: 10px; display: flex; align-items: center; } .sidebar .nav .nav-item .sidebar-menu-title .sidebar-icon-title { color: #2f3cff; margin-right: .5rem; font-size: 1.125rem; vertical-align: top; } .rtl .sidebar .nav .nav-item .sidebar-menu-title .sidebar-icon-title { margin-left: .5rem; margin-right: 0; } .sidebar .nav .nav-item .nav-link { display: flex; -webkit-align-items: center; align-items: baseline; white-space: nowrap; padding: 8px 30px; -webkit-transition-duration: 0.45s; -moz-transition-duration: 0.45s; -o-transition-duration: 0.45s; transition-duration: 0.45s; transition-property: color; -webkit-transition-property: color; font-weight: 400; } .sidebar .nav .nav-item .nav-link i { color: inherit; } .sidebar .nav .nav-item .nav-link i.menu-icon { font-size: 15px; margin-right: 15px; color: #464dee; } .rtl .sidebar .nav .nav-item .nav-link i.menu-icon { margin-left: 2rem; margin-right: 0; } .sidebar .nav .nav-item .nav-link i.menu-icon:before { vertical-align: middle; } .sidebar .nav .nav-item .nav-link i.ti-angle-right { display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-left: auto; margin-right: 0; color: #111; } .rtl .sidebar .nav .nav-item .nav-link i.ti-angle-right { margin-left: 0; margin-right: auto; } .sidebar .nav .nav-item .nav-link i.ti-angle-right:before { content: "\e649"; font-family: "themify"; font-style: normal; display: block; font-size: 11px; line-height: 10px; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .sidebar .nav .nav-item .nav-link .menu-title { display: inline-block; font-size: 15px; vertical-align: middle; font-weight: 700; } .sidebar .nav .nav-item:hover { opacity: 1; } .sidebar .nav .nav-item .nav-link .hightlight-sidebar { width: 6px; height: 6px; border-radius: 100%; display: inline-block; margin-left: auto; margin-right: 0; margin-bottom: 0; } .sidebar .nav .nav-item .nav-link .badge { margin-left: auto; } .rtl .sidebar .nav .nav-item .nav-link .badge { margin-left: 0; margin-right: auto; } .sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.ti-angle-right:before { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .sidebar .nav .nav-item.active > .nav-link { background: initial; position: relative; } .sidebar .nav:not(.sub-menu) { margin-top: .5rem; } .sidebar .nav:not(.sub-menu) > .nav-item { margin-top: 0; } .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link { margin: 0; } .sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link { background: transparent; } .sidebar .nav.sub-menu { margin-bottom: 0; margin-top: 0; list-style: none; padding: 10px 60px; } .sidebar .nav.sub-menu .nav-item { padding: 0; margin-bottom: 0; } .sidebar .nav.sub-menu .nav-item::before { content: ''; width: 5px; height: 5px; position: absolute; margin-top: 1rem; border-radius: 50%; background: #8e95aa; } .sidebar .nav.sub-menu .nav-item .nav-link { color: #656565; padding: 0.625rem 1rem; position: relative; font-size: 15px; line-height: 1; height: auto; border-top: 0; } .sidebar .nav:not(.sub-menu) { margin-top: 1.45rem; margin-left: 0; margin-right: 0.375rem; } .sidebar .nav.sub-menu .nav-item .nav-link:hover { color: #000; } .sidebar .nav.sub-menu .nav-item .nav-link.active { color: #000; background: transparent; } .sidebar .nav.sub-menu .nav-item:hover { background: transparent; } .sidebar { background: #fff; } .sidebar .nav-profile .sidebar-profile-name { color: #fff; } .sidebar .nav-profile .sidebar-profile-designation { font-weight: 600; } .sidebar .nav-profile.dropdown .dropdown-toggle:after { color: #bfc4ce; } .sidebar .nav-profile .dropdown-menu { margin-top: 0; } .sidebar .nav-profile .dropdown-menu .dropdown-item { font-size: .875rem; padding: .875rem 1.5rem; } .sidebar .nav .nav-item .sidebar-menu-title { color: #fff; } .sidebar .nav .nav-item .sidebar-menu-title .sidebar-icon-title { color: #fff; } .sidebar .nav .nav-item .nav-link { color: #111; } .sidebar .nav .nav-item .nav-link i { color: inherit; } .sidebar .nav .nav-item .nav-link i.menu-icon { color: #2b2b2b; } .sidebar .nav .nav-item .nav-link .menu-title { color: inherit; } .sidebar .nav .nav-item.active > .nav-link { background: initial; } .sidebar .nav .nav-item.active > .nav-link .menu-title, .sidebar .nav .nav-item.active > .nav-link i { color: #5867dd; } .sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link { color: #5867dd; } .sidebar .nav.sub-menu .nav-item .nav-link { color: #111; } .sidebar .nav.sub-menu .nav-item .nav-link:before { color: #a4afbc; } .sidebar .nav.sub-menu .nav-item .nav-link.active { color: #5867dd; background: transparent; } .sidebar .nav.sub-menu .nav-item .nav-link:hover { color: #5867dd; } .sidebar .nav.sub-menu .nav-item:hover { background: transparent; } /* style for off-canvas menu*/ @media screen and (max-width: 1199px) { .sidebar-offcanvas { position: fixed; max-height: calc(100vh - 60px); top: 60px; bottom: 0; overflow: auto; left: -255px; -webkit-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .sidebar-offcanvas.active { left: 0; } } /* Navbar */ .navbar { font-weight: 400; transition: background 0.25s ease; -webkit-transition: background 0.25s ease; -moz-transition: background 0.25s ease; -ms-transition: background 0.25s ease; /* Navbar color variations */ } .navbar .navbar-brand-wrapper { background: #fff; transition: width 0.25s ease, background 0.25s ease; -webkit-transition: width 0.25s ease, background 0.25s ease; -moz-transition: width 0.25s ease, background 0.25s ease; -ms-transition: width 0.25s ease, background 0.25s ease; width: 255px; height: 60px; padding: 0 2.1875rem; } .navbar .navbar-brand-wrapper .navbar-brand { color: #27367f; font-size: 1.5rem; margin-right: 0; padding: .25rem 0; } .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini { display: none; } .navbar .navbar-brand-wrapper .navbar-brand:active, .navbar .navbar-brand-wrapper .navbar-brand:focus, .navbar .navbar-brand-wrapper .navbar-brand:hover { color: #1b2658; } .navbar .navbar-brand-wrapper .navbar-brand img { max-width: 100%; height: 20px; margin: auto; vertical-align: middle; } .navbar .navbar-brand-wrapper .brand-logo-mini { padding-left: 0; text-align: center; } .navbar .navbar-brand-wrapper .brand-logo-mini img { width: 30px; margin: auto; } .navbar .navbar-brand-wrapper .navbar-toggler { padding: 0; color: #464dee; } @media (max-width: 1199px) { .navbar .navbar-brand-wrapper .navbar-toggler { display: none; } } .navbar .navbar-menu-wrapper { background: #fff; box-shadow: 1px 0 7px rgba(0, 0, 0, 0.05); transition: width 0.25s ease; -webkit-transition: width 0.25s ease; -moz-transition: width 0.25s ease; -ms-transition: width 0.25s ease; color: #ffffff; padding-left: 1.75rem; padding-right: 1.75rem; width: calc(100% - 255px); height: 60px; } .topbar-search .form-control { border-radius: 25px; } .topbar-search .input-group-text { border-radius: 25px; } @media (max-width: 1199px) { .navbar .navbar-menu-wrapper { width: calc(100% - 70px); padding-left: 15px; padding-right: 15px; } } @media (max-width: 480px) { .navbar .navbar-menu-wrapper { width: calc(100% - 55px); padding-left: 15px; padding-right: 15px; } .copywrite-text p { text-align: center; } } .navbar .navbar-menu-wrapper .navbar-toggler { border: 0; color: #5867dd; font-size: 18px; padding: 0; } @media (max-width: 1199px) { .navbar .navbar-menu-wrapper .navbar-toggler:not(.navbar-toggler-right) { display: none; } } @media (max-width: 1199px) { .navbar .navbar-menu-wrapper .navbar-toggler.navbar-toggler-right { color: #464dee; padding-left: 20px; padding-right: 20px; margin-top: 5px; } } .navbar .navbar-menu-wrapper .navbar-nav .nav-item { margin-left: 0.75rem; margin-right: 0.75rem; } @media (max-width: 480px) { .navbar .navbar-menu-wrapper .navbar-nav .nav-item { margin-left: 0.5rem; margin-right: 0.5rem; } } .navbar .navbar-menu-wrapper .navbar-nav .nav-item:last-child { margin-right: 0; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link { color: #001737; font-size: 0.875rem; position: relative; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link .count-circle { width: 8px; height: 8px; border-radius: 100%; background: #ef5958; position: absolute; top: .3rem; right: 4px; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link .icon-dropdown { color: #464dee; font-size: 1.125rem; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search { margin-left: 0; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap { background: rgba(255, 255, 255, 0.13); border-radius: 4px; padding: .75rem; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .form-control, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .asColorPicker-input, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .asColorPicker-input, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .dataTables_wrapper select, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .dataTables_wrapper select, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap select, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row input[type=text], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group input[type=text], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row input[type=text], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap input[type=text], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row select, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row select, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap select, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row input[type=number], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group input[type=number], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row input[type=number], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap input[type=number], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-container--default .select2-selection--single, .select2-container--default .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-selection--single, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-container--default .select2-selection--single, .select2-container--default .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-selection--single, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-container--default .select2-selection--single .select2-search__field, .select2-container--default .select2-selection--single .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-search__field, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-container--default .select2-selection--single .select2-search__field, .select2-container--default .select2-selection--single .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-search__field, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .typeahead, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .typeahead, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .tt-query, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .tt-query, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .tt-hint, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .tt-hint, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .input-group-text, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .input-group-text { background: transparent; border: 0; color: #6c7293; padding: 0; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .form-control, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .asColorPicker-input, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .asColorPicker-input, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .dataTables_wrapper select, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .dataTables_wrapper select, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap select, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row input[type=text], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group input[type=text], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row input[type=text], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap input[type=text], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row select, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row select, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap select, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row input[type=number], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group input[type=number], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row input[type=number], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap input[type=number], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-container--default .select2-selection--single, .select2-container--default .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-selection--single, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-container--default .select2-selection--single, .select2-container--default .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-selection--single, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-container--default .select2-selection--single .select2-search__field, .select2-container--default .select2-selection--single .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-search__field, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-container--default .select2-selection--single .select2-search__field, .select2-container--default .select2-selection--single .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-search__field, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .typeahead, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .typeahead, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .tt-query, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .tt-query, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .tt-hint, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .tt-hint { margin-left: .5rem; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .form-control::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .asColorPicker-input::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .asColorPicker-input::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .dataTables_wrapper select::-webkit-input-placeholder, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .dataTables_wrapper select::-webkit-input-placeholder, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap select::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row input[type=text]::-webkit-input-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group input[type=text]::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row input[type=text]::-webkit-input-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap input[type=text]::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row select::-webkit-input-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row select::-webkit-input-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap select::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row input[type=number]::-webkit-input-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group input[type=number]::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row input[type=number]::-webkit-input-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap input[type=number]::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-container--default .select2-selection--single::-webkit-input-placeholder, .select2-container--default .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-selection--single::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-container--default .select2-selection--single::-webkit-input-placeholder, .select2-container--default .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-selection--single::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-container--default .select2-selection--single .select2-search__field::-webkit-input-placeholder, .select2-container--default .select2-selection--single .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-search__field::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-container--default .select2-selection--single .select2-search__field::-webkit-input-placeholder, .select2-container--default .select2-selection--single .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-search__field::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .typeahead::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .typeahead::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .tt-query::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .tt-query::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .tt-hint::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .tt-hint::-webkit-input-placeholder { color: #001737; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .form-control:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .asColorPicker-input:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .asColorPicker-input:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .dataTables_wrapper select:-moz-placeholder, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .dataTables_wrapper select:-moz-placeholder, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap select:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row input:-moz-placeholder[type=text], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group input:-moz-placeholder[type=text], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row input:-moz-placeholder[type=text], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap input:-moz-placeholder[type=text], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row select:-moz-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row select:-moz-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap select:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row input:-moz-placeholder[type=number], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group input:-moz-placeholder[type=number], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row input:-moz-placeholder[type=number], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap input:-moz-placeholder[type=number], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-container--default .select2-selection--single:-moz-placeholder, .select2-container--default .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-selection--single:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-container--default .select2-selection--single:-moz-placeholder, .select2-container--default .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-selection--single:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-container--default .select2-selection--single .select2-search__field:-moz-placeholder, .select2-container--default .select2-selection--single .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-search__field:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-container--default .select2-selection--single .select2-search__field:-moz-placeholder, .select2-container--default .select2-selection--single .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-search__field:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .typeahead:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .typeahead:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .tt-query:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .tt-query:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .tt-hint:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .tt-hint:-moz-placeholder { color: #001737; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .form-control::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .asColorPicker-input::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .asColorPicker-input::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .dataTables_wrapper select::-moz-placeholder, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .dataTables_wrapper select::-moz-placeholder, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap select::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row input[type=text]::-moz-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group input[type=text]::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row input[type=text]::-moz-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap input[type=text]::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row select::-moz-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row select::-moz-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap select::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row input[type=number]::-moz-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group input[type=number]::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row input[type=number]::-moz-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap input[type=number]::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-container--default .select2-selection--single::-moz-placeholder, .select2-container--default .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-selection--single::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-container--default .select2-selection--single::-moz-placeholder, .select2-container--default .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-selection--single::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-container--default .select2-selection--single .select2-search__field::-moz-placeholder, .select2-container--default .select2-selection--single .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-search__field::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-container--default .select2-selection--single .select2-search__field::-moz-placeholder, .select2-container--default .select2-selection--single .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-search__field::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .typeahead::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .typeahead::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .tt-query::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .tt-query::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .tt-hint::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .tt-hint::-moz-placeholder { color: #001737; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .form-control:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .asColorPicker-input:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .asColorPicker-input:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .dataTables_wrapper select:-ms-input-placeholder, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .dataTables_wrapper select:-ms-input-placeholder, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap select:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row input:-ms-input-placeholder[type=text], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group input:-ms-input-placeholder[type=text], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row input:-ms-input-placeholder[type=text], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap input:-ms-input-placeholder[type=text], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row select:-ms-input-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row select:-ms-input-placeholder, .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap select:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .jsgrid .jsgrid-table .jsgrid-filter-row input:-ms-input-placeholder[type=number], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group input:-ms-input-placeholder[type=number], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .jsgrid .jsgrid-table .jsgrid-filter-row input:-ms-input-placeholder[type=number], .jsgrid .jsgrid-table .jsgrid-filter-row .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap input:-ms-input-placeholder[type=number], .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-container--default .select2-selection--single:-ms-input-placeholder, .select2-container--default .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-selection--single:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-container--default .select2-selection--single:-ms-input-placeholder, .select2-container--default .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-selection--single:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-container--default .select2-selection--single .select2-search__field:-ms-input-placeholder, .select2-container--default .select2-selection--single .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .select2-search__field:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-container--default .select2-selection--single .select2-search__field:-ms-input-placeholder, .select2-container--default .select2-selection--single .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .select2-search__field:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .typeahead:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .typeahead:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .tt-query:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .tt-query:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .tt-hint:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .asColorPicker-wrap .tt-hint:-ms-input-placeholder { color: #001737; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-settings { border-left: 1px solid rgba(255, 255, 255, 0.24); margin: 0; padding-left: 1.5rem; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-settings .nav-link { padding: 0; text-align: center; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-settings i { font-size: 1.5rem; vertical-align: middle; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile img { -webkit-box-flex: 0; -ms-flex: 0 0 33px; flex: 0 0 33px; max-width: 33px; width: 33px; height: 33px; border-radius: 100%; -webkit-box-shadow: 4px 5px 6px 0px rgba(0, 0, 0, 0); -moz-box-shadow: 4px 5px 6px 0px rgba(0, 0, 0, 0); box-shadow: 4px 5px 6px 0px rgba(0, 0, 0, 0); } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-profile-name { margin-left: .5rem; } @media (max-width: 767px) { .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-profile-name { display: none; } } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu { border: none; -webkit-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2); } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown { min-width: 17rem; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .flat-dropdown-header { background: #464dee; padding: 1.25rem 1.5rem; color: #fff; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .flat-dropdown-header .profile-icon { width: 3.125rem; height: 3.125rem; border-radius: 100%; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .flat-dropdown-header .profile-name { font-size: 1rem; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .flat-dropdown-header .profile-designation { font-size: .875rem; margin-bottom: 0; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .profile-dropdown-body { padding: .875rem 0; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .profile-dropdown-body .list-profile-items { list-style: none; padding-left: 0; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .profile-dropdown-body .list-profile-items .profile-item { padding: .625rem 1rem; border-bottom: 1px solid #e9e9e9; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .profile-dropdown-body .list-profile-items .profile-item .profile-dropdown-link { display: flex; justify-content: space-between; align-content: center; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .profile-dropdown-body .list-profile-items .profile-item .profile-dropdown-link .item-title { color: #464dee; margin-bottom: 0; font-weight: 500; margin-left: .625rem; margin-top: .25rem; font-size: .875rem; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .profile-dropdown-body .list-profile-items .profile-item .profile-dropdown-link .item-detail { color: #6c7293; margin-left: .625rem; font-size: .75rem; margin-bottom: 0; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .profile-dropdown-body .list-profile-items .profile-item .profile-dropdown-link:hover { text-decoration: none; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .profile-dropdown-body .list-profile-items .profile-item:last-child { border-bottom: none; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu.flat-dropdown .profile-dropdown-body .list-profile-items .profile-item:hover { background: #f0f3f6; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown { position: absolute; font-size: 0.9rem; margin-top: 0; right: 0; left: auto; top: 60px; padding: 0; } .rtl .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown { right: auto; left: 0; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item { margin-bottom: 0; padding: .65rem 1.5rem; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item i { font-size: 17px; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item .badge { margin-left: 2.5rem; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item .ellipsis { max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .rtl .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item i { margin-left: 10px; } .rtl .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item .badge { margin-left: 0; margin-right: 2.5rem; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-divider { margin: 0; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown i { margin-right: .5rem; vertical-align: middle; font-size: 16px; } @media (max-width: 991px) { .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown { position: static; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown { left: 20px; right: 20px; top: 60px; width: calc(100% - 40px); } } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator { position: relative; padding: 0; text-align: center; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator i { font-size: 1.25rem; margin-right: 0; vertical-align: middle; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator .count { position: absolute; right: 0; width: 6px; height: 6px; border-radius: 100%; background: #fd397a; top: -4px; } .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator:after { display: none; } .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right .nav-item.dropdown .dropdown-toggle:after { display: none; } @media (min-width: 992px) { .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right { margin-left: auto; } .rtl .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right { margin-left: 0; margin-right: auto; } } .navbar.navbar-primary .navbar-menu-wrapper { background: #464dee; } .navbar.navbar-primary:not(.navbar-light) .navbar-menu-wrapper .navbar-toggler { color: #ffffff; } .navbar.navbar-primary:not(.navbar-light) .navbar-menu-wrapper .nav-item .nav-link { color: #ffffff; } .navbar.navbar-light .navbar-menu-wrapper { background: #ffffff; border-left: 1px solid #e9e9e9; } .navbar.navbar-light .navbar-menu-wrapper .navbar-toggler { color: #464dee; } .navbar.navbar-light .navbar-menu-wrapper .nav-item .nav-link { color: #001737; } .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .input-group, .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .asColorPicker-wrap { background: rgba(0, 23, 55, 0.24); } .navbar.navbar-dark .navbar-menu-wrapper { border-left-color: #6a6a6a; } .navbar.navbar-danger .navbar-menu-wrapper .nav-item .nav-link.count-indicator .count { background: #464dee; } .navbar.navbar-secondary .navbar-menu-wrapper { background: #6c7293; } .navbar.navbar-secondary:not(.navbar-light) .navbar-menu-wrapper .navbar-toggler { color: #ffffff; } .navbar.navbar-secondary:not(.navbar-light) .navbar-menu-wrapper .nav-item .nav-link { color: #ffffff; } .navbar.navbar-light .navbar-menu-wrapper { background: #ffffff; border-left: 1px solid #e9e9e9; } .navbar.navbar-light .navbar-menu-wrapper .navbar-toggler { color: #464dee; } .navbar.navbar-light .navbar-menu-wrapper .nav-item .nav-link { color: #001737; } .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .input-group, .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .asColorPicker-wrap { background: rgba(0, 23, 55, 0.24); } .navbar.navbar-dark .navbar-menu-wrapper { border-left-color: #6a6a6a; } .navbar.navbar-danger .navbar-menu-wrapper .nav-item .nav-link.count-indicator .count { background: #464dee; } .navbar.navbar-success .navbar-menu-wrapper { background: #0ddbb9; } .navbar.navbar-success:not(.navbar-light) .navbar-menu-wrapper .navbar-toggler { color: #ffffff; } .navbar.navbar-success:not(.navbar-light) .navbar-menu-wrapper .nav-item .nav-link { color: #ffffff; } .navbar.navbar-light .navbar-menu-wrapper { background: #ffffff; border-left: 1px solid #e9e9e9; } .navbar.navbar-light .navbar-menu-wrapper .navbar-toggler { color: #464dee; } .navbar.navbar-light .navbar-menu-wrapper .nav-item .nav-link { color: #001737; } .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .input-group, .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .asColorPicker-wrap { background: rgba(0, 23, 55, 0.24); } .navbar.navbar-dark .navbar-menu-wrapper { border-left-color: #6a6a6a; } .navbar.navbar-danger .navbar-menu-wrapper .nav-item .nav-link.count-indicator .count { background: #464dee; } .navbar.navbar-info .navbar-menu-wrapper { background: #0ad7f7; } .navbar.navbar-info:not(.navbar-light) .navbar-menu-wrapper .navbar-toggler { color: #ffffff; } .navbar.navbar-info:not(.navbar-light) .navbar-menu-wrapper .nav-item .nav-link { color: #ffffff; } .navbar.navbar-light .navbar-menu-wrapper { background: #ffffff; border-left: 1px solid #e9e9e9; } .navbar.navbar-light .navbar-menu-wrapper .navbar-toggler { color: #464dee; } .navbar.navbar-light .navbar-menu-wrapper .nav-item .nav-link { color: #001737; } .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .input-group, .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .asColorPicker-wrap { background: rgba(0, 23, 55, 0.24); } .navbar.navbar-dark .navbar-menu-wrapper { border-left-color: #6a6a6a; } .navbar.navbar-danger .navbar-menu-wrapper .nav-item .nav-link.count-indicator .count { background: #464dee; } .navbar.navbar-warning .navbar-menu-wrapper { background: #fcd539; } .navbar.navbar-warning:not(.navbar-light) .navbar-menu-wrapper .navbar-toggler { color: #ffffff; } .navbar.navbar-warning:not(.navbar-light) .navbar-menu-wrapper .nav-item .nav-link { color: #ffffff; } .navbar.navbar-light .navbar-menu-wrapper { background: #ffffff; border-left: 1px solid #e9e9e9; } .navbar.navbar-light .navbar-menu-wrapper .navbar-toggler { color: #464dee; } .navbar.navbar-light .navbar-menu-wrapper .nav-item .nav-link { color: #001737; } .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .input-group, .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .asColorPicker-wrap { background: rgba(0, 23, 55, 0.24); } .navbar.navbar-dark .navbar-menu-wrapper { border-left-color: #6a6a6a; } .navbar.navbar-danger .navbar-menu-wrapper .nav-item .nav-link.count-indicator .count { background: #464dee; } .navbar.navbar-danger .navbar-menu-wrapper { background: #ef5958; } .navbar.navbar-danger:not(.navbar-light) .navbar-menu-wrapper .navbar-toggler { color: #ffffff; } .navbar.navbar-danger:not(.navbar-light) .navbar-menu-wrapper .nav-item .nav-link { color: #ffffff; } .navbar.navbar-light .navbar-menu-wrapper { background: #ffffff; border-left: 1px solid #e9e9e9; } .navbar.navbar-light .navbar-menu-wrapper .navbar-toggler { color: #464dee; } .navbar.navbar-light .navbar-menu-wrapper .nav-item .nav-link { color: #001737; } .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .input-group, .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .asColorPicker-wrap { background: rgba(0, 23, 55, 0.24); } .navbar.navbar-dark .navbar-menu-wrapper { border-left-color: #6a6a6a; } .navbar.navbar-danger .navbar-menu-wrapper .nav-item .nav-link.count-indicator .count { background: #464dee; } .navbar.navbar-light .navbar-menu-wrapper { background: #eaeaea; } .navbar.navbar-light:not(.navbar-light) .navbar-menu-wrapper .navbar-toggler { color: #ffffff; } .navbar.navbar-light:not(.navbar-light) .navbar-menu-wrapper .nav-item .nav-link { color: #ffffff; } .navbar.navbar-light .navbar-menu-wrapper { background: #ffffff; border-left: 1px solid #e9e9e9; } .navbar.navbar-light .navbar-menu-wrapper .navbar-toggler { color: #464dee; } .navbar.navbar-light .navbar-menu-wrapper .nav-item .nav-link { color: #001737; } .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .input-group, .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .asColorPicker-wrap { background: rgba(0, 23, 55, 0.24); } .navbar.navbar-dark .navbar-menu-wrapper { border-left-color: #6a6a6a; } .navbar.navbar-danger .navbar-menu-wrapper .nav-item .nav-link.count-indicator .count { background: #464dee; } .navbar.navbar-dark .navbar-menu-wrapper { background: #001737; } .navbar.navbar-dark:not(.navbar-light) .navbar-menu-wrapper .navbar-toggler { color: #ffffff; } .navbar.navbar-dark:not(.navbar-light) .navbar-menu-wrapper .nav-item .nav-link { color: #ffffff; } .navbar.navbar-light .navbar-menu-wrapper { background: #ffffff; border-left: 1px solid #e9e9e9; } .navbar.navbar-light .navbar-menu-wrapper .navbar-toggler { color: #464dee; } .navbar.navbar-light .navbar-menu-wrapper .nav-item .nav-link { color: #001737; } .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .input-group, .navbar.navbar-light .navbar-menu-wrapper .nav-item.nav-search .asColorPicker-wrap { background: rgba(0, 23, 55, 0.24); } .navbar.navbar-dark .navbar-menu-wrapper { border-left-color: #6a6a6a; } .navbar.navbar-danger .navbar-menu-wrapper .nav-item .nav-link.count-indicator .count { background: #464dee; } @media (max-width: 1199px) { .navbar { flex-direction: row; } .navbar .navbar-brand-wrapper { width: 70px; padding: 0 0; } .navbar .navbar-brand-wrapper .navbar-brand.brand-logo { display: none; } .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini { display: inline-block; } .navbar-collapse { display: flex; margin-top: 0.5rem; } } @media (max-width: 480px) { .navbar .navbar-brand-wrapper { width: 55px; padding: 0 0; } .navbar .navbar-brand-wrapper .brand-logo-mini { padding-top: 0px; } } /* Layouts */ @media (min-width: 992px) { .sidebar-mini .navbar .navbar-brand-wrapper { width: 232px; } .sidebar-mini .navbar .navbar-menu-wrapper { width: calc(100% - 232px); } .sidebar-mini .sidebar { width: 232px; } .sidebar-mini .sidebar .nav .nav-item { padding: 0; } .sidebar-mini .sidebar .nav .nav-item:before { display: none; } .sidebar-mini .sidebar .nav .nav-item .nav-link { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; text-align: center; position: relative; border-bottom: none; padding: .625rem; } .sidebar-mini .sidebar .nav .nav-item .nav-link .menu-title { display: block; margin: auto; } .sidebar-mini .sidebar .nav .nav-item .nav-link .badge { margin-left: 5px; display: none; } .sidebar-mini .sidebar .nav .nav-item .nav-link i.menu-icon { display: block; margin-right: auto; margin-left: auto; margin-bottom: .625rem; } .sidebar-mini .sidebar .nav .nav-item .nav-link i.ti-angle-right { display: inline-block; margin-left: 5px; position: absolute; top: 50%; right: 20px; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .sidebar-mini .sidebar .nav .nav-item .sidebar-menu-title { text-align: center; } .sidebar-mini .main-panel { width: calc(100% - 232px); } .sidebar-mini:not(.sidebar-icon-only) .sidebar .nav.sub-menu { padding: 0; border-top: none; } .sidebar-mini:not(.sidebar-icon-only) .sidebar .nav.sub-menu .nav-item .nav-link { padding: .75rem 0 .75rem .75rem; margin-left: auto; margin-right: auto; display: block; text-align: left; width: 100%; text-align: center; } } @media (min-width: 992px) { .sidebar-icon-only .navbar .navbar-brand-wrapper { width: 70px; padding: 0 1.5rem; } .sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo { display: none; } .sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo-mini { display: none; } .sidebar-icon-only .navbar .navbar-menu-wrapper { width: calc(100% - 70px); } .sidebar-icon-only .sidebar { width: 70px; } .sidebar-icon-only .sidebar .nav-profile { padding: 1.25rem 1rem; } .sidebar-icon-only .sidebar .nav-profile .sidebar-profile-name, .sidebar-icon-only .sidebar .nav-profile .sidebar-profile-designation { display: none; } .sidebar-icon-only .sidebar .nav-profile.dropdown .dropdown-toggle:after { display: none; } .sidebar-icon-only .sidebar .nav { overflow: visible; } .sidebar-icon-only .sidebar .nav .nav-item { position: relative; margin-bottom: 10px; } .sidebar-icon-only .sidebar .nav .nav-item .sidebar-menu-title { padding: 0 1rem; text-align: center; justify-content: center; } .sidebar-icon-only .sidebar .nav .nav-item .sidebar-menu-title span { display: none; position: absolute; -webkit-align-items: center; align-items: center; background: #e9ecef; left: 70px; top: 0; padding: 0.5rem 1.4rem; text-align: left; width: 190px; z-index: 1; line-height: 1.8; box-shadow: 4px 0px 7px 0px rgba(182, 185, 189, 0); } .sidebar-icon-only .sidebar .nav .nav-item .sidebar-menu-title span { background: #0c1427; } .rtl.sidebar-icon-only .sidebar .nav .nav-item .sidebar-menu-title span { left: auto; right: 70px; text-align: left; box-shadow: -4px 0px 7px 0px rgba(182, 185, 189, 0); } .sidebar-icon-only .sidebar .nav .nav-item .sidebar-menu-title span { color: #ffffff; } .sidebar-icon-only .sidebar .nav .nav-item .nav-link { display: block; padding-left: .5rem; padding-right: .5rem; text-align: center; position: static; } .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title, .sidebar-icon-only .sidebar .nav .nav-item .nav-link .badge, .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-sub-title { display: none; } .sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-icon { margin-right: 0; margin-left: 0; margin-bottom: 0; } .sidebar-icon-only .sidebar .nav .nav-item .nav-link i.ti-angle-right { display: none; } .sidebar-icon-only .sidebar .nav .nav-item .nav-link[aria-expanded] .menu-title { border-radius: 0 5px 0 0px; } .rtl.sidebar-icon-only .sidebar .nav .nav-item .nav-link[aria-expanded] .menu-title { border-radius: 5px 0 0 0; } .sidebar-icon-only .sidebar .nav .nav-item .collapse { display: none; } .sidebar-icon-only .sidebar .nav .nav-item .submenu-wrapper { display: none; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .sidebar-menu-title span { display: block; border-bottom: 1px solid #e9e9e9; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper { display: block; background: #e9ecef; position: absolute; top: 42px; left: 70px; bottom: 0; width: 190px; margin-top: 0; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper { background: #0c1427; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li { display: block; margin-bottom: 0; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .nav-link { padding: 0; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .nav-link .menu-title { position: relative; display: block; background: #e9ecef; padding: 0.5rem 1.4rem; text-align: left; line-height: 1.8; border-radius: 0; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .nav-link .menu-title { background: #0c1427; } .rtl.sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .nav-link .menu-title { left: auto; right: 70px; text-align: left; box-shadow: -4px 0px 7px 0px rgba(182, 185, 189, 0.25); } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .nav-link .menu-title { color: #ffffff; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .nav-link .menu-title:after { content: "\F142"; font-family: "Material Design Icons"; font-style: normal; display: block; font-size: 1rem; line-height: 10px; position: absolute; right: 1rem; top: 43%; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .nav-link .hightlight-sidebar { display: none; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .nav-link:hover .menu-title { background: #e9ecef; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .nav-link:hover .menu-title { background: #0c1427; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .collapse, .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .collapsing { display: none; padding: .5rem 0; background: #e9ecef; border-radius: 0 0 5px 0; position: absolute; width: 190px; box-shadow: 4px 4px 7px 0px rgba(182, 185, 189, 0.25); } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .collapse, .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .collapsing { background: #0c1427; } .rtl.sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .collapse, .rtl.sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li .collapsing { left: auto; right: 70px; border-radius: 0 0 0 5px; box-shadow: -4px 4px 7px 0px rgba(182, 185, 189, 0.25); } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li:last-child .nav-link .menu-title { padding-bottom: 1rem; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li.submenu-hover-open { position: relative; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li.submenu-hover-open .collapse, .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li.submenu-hover-open .collapsing { display: block; padding: .5rem 0; background: #e9ecef; border-radius: 0 0 5px 0; position: absolute; left: 190px; top: 0; width: 190px; box-shadow: 4px 4px 7px 0px rgba(182, 185, 189, 0.25); } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li.submenu-hover-open .collapse, .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li.submenu-hover-open .collapsing { background: #0c1427; } .rtl.sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li.submenu-hover-open .collapse, .rtl.sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li.submenu-hover-open .collapsing { left: auto; right: 190px; border-radius: 0 0 0 5px; box-shadow: -4px 4px 7px 0px rgba(182, 185, 189, 0.25); } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li.submenu-hover-open .nav.sub-menu { padding: 0; border-top: none; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li.submenu-hover-open .nav.sub-menu .nav-item:before { display: none; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .submenu-wrapper li.submenu-hover-open .nav.sub-menu .nav-item .nav-link { padding: .75rem 0 .75rem 1.5rem; margin-left: auto; margin-right: auto; display: block; text-align: left; width: 90%; } .sidebar-icon-only .sidebar .nav.sub-menu { padding: 0 0 0 1.5rem; } .sidebar-icon-only .sidebar .nav.sub-menu .nav-item .nav-link { text-align: left; padding-left: 20px; } .sidebar-icon-only .main-panel { width: calc(100% - 70px); } } .sidebar-hidden .nav-profile { display: none; } @media (min-width: 992px) { .sidebar-hidden .sidebar { transition: width 0.25s ease; -webkit-transition: width 0.25s ease; -moz-transition: width 0.25s ease; -ms-transition: width 0.25s ease; width: 0; } .sidebar-hidden .main-panel { width: 100%; } } .sidebar-absolute .nav { max-height: calc(100vh - 60px); overflow: auto; position: relative; } .sidebar-absolute .nav.sub-menu { max-height: none; } @media (min-width: 992px) { .sidebar-absolute .page-body-wrapper { position: relative; } .sidebar-absolute .page-body-wrapper .sidebar { transition: none; } .sidebar-absolute:not(.sidebar-hidden) .sidebar { position: fixed; height: 100%; -webkit-box-shadow: 0 0 3px 1px #a7a3a3; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 0 0 3px 1px #a7a3a3; /* Firefox 3.5 - 3.6 */ box-shadow: 0 0 3px 1px #a7a3a3; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ } .sidebar-absolute .main-panel { width: 100%; transition: none; } } @media (min-width: 992px) { .sidebar-fixed .sidebar { position: fixed; max-height: auto; } .sidebar-fixed .sidebar .nav { max-height: calc(100vh - 60px); overflow: auto; position: relative; } .sidebar-fixed .sidebar .nav.sub-menu { max-height: none; } .sidebar-fixed .main-panel { margin-left: 255px; } .sidebar-fixed.sidebar-icon-only .main-panel { margin-left: 70px; } } @media (min-width: 992px) { .boxed-layout .main-container-wrapper { background: #c6c8ca; padding: 0 calc((100% - 1200px) / 2); } .boxed-layout .navbar.fixed-top { margin: auto; max-width: 1200px; } } .rtl { direction: rtl; text-align: right; } .rtl .sidebar .nav { padding-right: 0; } .rtl .sidebar .nav.sub-menu { padding: 0 4.5rem 0 0; } .sidebar-icon-only.rtl .sidebar .nav.sub-menu { padding-right: 0rem; } .sidebar-icon-only.rtl .sidebar .nav.sub-menu .nav-item .nav-link { padding-right: 3rem; text-align: right; } .sidebar-icon-only.rtl .sidebar .nav.sub-menu .nav-item .nav-link:before { right: 1.75rem; } .rtl .product-chart-wrapper::-webkit-scrollbar, .rtl .settings-panel .tab-content .tab-pane .scroll-wrapper::-webkit-scrollbar, .rtl .sidebar-fixed .nav::-webkit-scrollbar, .rtl .table-responsive::-webkit-scrollbar, .rtl ul.chats::-webkit-scrollbar { width: 0.5em; } .rtl .product-chart-wrapper::-webkit-scrollbar-track, .rtl .settings-panel .tab-content .tab-pane .scroll-wrapper::-webkit-scrollbar-track, .rtl .sidebar-fixed .nav::-webkit-scrollbar-track, .rtl .table-responsive::-webkit-scrollbar-track, .rtl ul.chats::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .rtl .product-chart-wrapper::-webkit-scrollbar-thumb, .rtl .settings-panel .tab-content .tab-pane .scroll-wrapper::-webkit-scrollbar-thumb, .rtl .sidebar-fixed .nav::-webkit-scrollbar-thumb, .rtl .table-responsive::-webkit-scrollbar-thumb, .rtl ul.chats::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; } /* Settings Panel */ .settings-panel { border-left: 1px solid #e9e9e9; display: block; position: fixed; top: 60px; right: -300px; bottom: 0; width: 300px; height: 100vh; min-height: 100%; background: #ffffff; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-property: right, box-shadow; -moz-transition-property: right, box-shadow; -o-transition-property: right, box-shadow; transition-property: right, box-shadow; z-index: 9999; } .settings-panel .nav-tabs { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width: auto; margin: 0; padding: 0; background: #ffffff; } .settings-panel .nav-tabs .nav-item { border: none; } .settings-panel .nav-tabs .nav-item .nav-link { background: transparent; text-align: center; border: none; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; color: #6c7293; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; transition-property: color; -webkit-transition-property: color; -webkit-justify-content: center; justify-content: center; } .settings-panel .nav-tabs .nav-item .nav-link.active { background: transparent; color: #464dee; } .settings-panel .tab-content { border: none; padding: 20px 0 0px 0; } .settings-panel .tab-content .tab-pane.scroll-wrapper { position: relative; max-height: 100vh; height: 100%; padding-bottom: 150px; } .settings-panel .settings-heading { padding: 16px 0 13px 35px; font-size: 0.75rem; font-weight: 500; line-height: 1; color: rgba(0, 0, 0, 0.9); opacity: 0.9; margin-bottom: 0; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; } .rtl .settings-panel .settings-heading { padding: 16px 35px 13px 0; text-align: right; } .rtl .settings-panel small.settings-heading { padding: 16px 0 13px 12px; } .settings-panel .sidebar-bg-options { padding: 13px 35px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 0.75rem; line-height: 1; color: #595959; background: #ffffff; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-property: background; -moz-transition-property: background; -o-transition-property: background; transition-property: background; } .settings-panel .sidebar-bg-options.selected { background: #e6e9ed; } .settings-panel .color-tiles { display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0px 35px 10px 35px; padding-top: 15px; } .settings-panel .color-tiles .tiles { margin: 10px 18px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .settings-panel .color-tiles .tiles:before { content: ""; width: 0px; height: 0px; opacity: 0; background: rgba(0, 0, 0, 0.3); border-radius: 100%; border: 0; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; } .settings-panel .color-tiles .tiles.selected:before { width: 10px; height: 10px; opacity: 1; border-width: 1px; } .settings-panel .color-tiles .tiles.light { border: 1px solid #e2e4e7; } .settings-panel .color-tiles .tiles.default { background: #eaeaea; } .settings-panel .chat-list { padding-left: 0; } .settings-panel .chat-list .list { padding: 0.4rem 0.8rem; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; border-bottom: 1px solid #e9e9e9; } .settings-panel .chat-list .list:last-child { border-bottom: none; } .settings-panel .chat-list .list .profile { position: relative; margin-right: 1rem; } .settings-panel .chat-list .list .profile img { width: 2.50rem; height: 2.50rem; border-radius: 100%; } .settings-panel .chat-list .list .profile span { height: 0.75rem; width: 0.75rem; position: absolute; bottom: 0.34rem; right: 0; border: 0.13rem solid #ffffff; border-radius: 100%; } .settings-panel .chat-list .list .profile span.online { background: #0ddbb9; } .settings-panel .chat-list .list .profile span.offline { background: #fcd539; } .settings-panel .chat-list .list .info { margin-right: auto; } .settings-panel .chat-list .list .info p { display: block; margin-bottom: 0; } .settings-panel .chat-list .list .info p:last-child { opacity: 0.5; font-size: 0.8rem; } .rtl .settings-panel .chat-list .list .info p:last-child { text-align: right; } .settings-panel .chat-list .list.active { background: #eaeaea; } .settings-panel.open { right: 0; } .settings-panel .settings-close { position: absolute; top: 16px; right: 10px; color: #464dee; background: transparent; border-radius: 4px; padding: 0 3px; cursor: pointer; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; z-index: 999; } .settings-panel .settings-close:hover { background: rgba(255, 255, 255, 0.3); } .rtl .settings-panel .settings-close { right: unset; left: 10px; } .settings-panel .events p { font-weight: 400; } .rtl .settings-panel .events p { text-align: right; } .rtl .settings-panel { right: unset; left: -300px; -webkit-transition-property: left; -moz-transition-property: left; -o-transition-property: left; transition-property: left; } .rtl .settings-panel .chat-list { padding-right: 0; } .rtl .settings-panel .chat-list .list .profile { margin-right: 0; margin-left: 1rem; } .rtl .settings-panel .chat-list .list .info { margin-right: 0; margin-left: auto; } .rtl .settings-panel .chat-list .list .info .badge { margin-right: 10px; } .rtl .settings-panel.open { left: 0; right: unset; } #theme-settings .settings-close { top: 12px; background: transparent; } #settings-trigger { position: fixed; bottom: 40px; right: 30px; height: 45px; width: 45px; background: #464dee; z-index: 99; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; border-radius: 100%; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } #settings-trigger i { color: #ffffff; font-size: 1rem; line-height: 1rem; } .rtl #settings-trigger { right: auto; left: 30px; } @media (max-width: 991px) { #settings-trigger { display: none; } } /* Layouts */ @media (min-width: 992px) { .sidebar-mini .navbar .navbar-brand-wrapper { width: 185px; } .sidebar-mini .navbar .navbar-menu-wrapper { width: calc(100% - 185px); } .sidebar-mini .sidebar { width: 185px; } .sidebar-mini .sidebar .nav .nav-item { padding: 0; } .sidebar-mini .sidebar .nav .nav-item .nav-link { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; text-align: center; position: relative; border-bottom: none; } .sidebar-mini .sidebar .nav .nav-item .nav-link .menu-title { display: block; margin: auto; } .sidebar-mini .sidebar .nav .nav-item .nav-link .badge { margin-left: 5px; display: none; } .sidebar-mini .sidebar .nav .nav-item .nav-link i.menu-icon { display: block; margin-right: auto; margin-left: auto; margin-bottom: .625rem; } .sidebar-mini .sidebar .nav .nav-item .nav-link i.ti-angle-right { display: inline-block; margin-left: 5px; position: absolute; top: 50%; right: 20px; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .sidebar-mini .sidebar .nav.sub-menu .nav-item::before { display: none; } .sidebar-mini .main-panel { width: calc(100% - 185px); } .sidebar-mini:not(.sidebar-icon-only) .sidebar .nav.sub-menu { padding: 0; border-top: none; } .sidebar-mini:not(.sidebar-icon-only) .sidebar .nav.sub-menu .nav-item .nav-link { padding: .75rem 0 .75rem .15rem; margin-left: auto; margin-right: auto; display: block; text-align: left; width: 66%; } } @media (min-width: 992px) { .sidebar-icon-only .navbar .navbar-brand-wrapper { width: 70px; } .sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo { display: none; } .sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo-mini { display: inline-block; } .sidebar-icon-only .navbar .navbar-menu-wrapper { width: calc(100% - 70px); } .sidebar-icon-only .sidebar { width: 70px; } .sidebar-icon-only .sidebar .nav { overflow: visible; margin-left: 0; margin-right: 0; } .sidebar-icon-only .sidebar .nav .nav-item { position: relative; } .sidebar-icon-only .sidebar .nav .nav-item .nav-link { display: block; padding-left: .5rem; padding-right: .5rem; text-align: center; position: static; } .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title, .sidebar-icon-only .sidebar .nav .nav-item .nav-link .badge, .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-sub-title { display: none; } .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title { border-radius: 0 5px 5px 0px; background: #e7e7e7; } .rtl.sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title { border-radius: 5px 0 0 5px; } .sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-icon { margin-right: 0; margin-left: 0; margin-bottom: 0; } .sidebar-icon-only .sidebar .nav .nav-item .nav-link i.ti-angle-right { display: none; } .sidebar-icon-only .sidebar .nav .nav-item .nav-link[aria-expanded] .menu-title { border-radius: 0 5px 0 0px; } .rtl.sidebar-icon-only .sidebar .nav .nav-item .nav-link[aria-expanded] .menu-title { border-radius: 5px 0 0 0; } .sidebar-icon-only .sidebar .nav .nav-item .collapse { display: none; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: #e7e7e7; padding: 0.5rem 1.4rem; left: 70px; position: absolute; text-align: left; top: 0; bottom: 0; width: 190px; z-index: 1; line-height: 1.8; -webkit-box-shadow: 4px 0px 7px 0px rgba(182, 185, 189, 0.25); box-shadow: 4px 0px 7px 0px rgba(182, 185, 189, 0.25); } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title { background: #0c1427; } .rtl.sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title { left: auto; right: 70px; text-align: left; -webkit-box-shadow: -4px 0px 7px 0px rgba(182, 185, 189, 0.25); box-shadow: -4px 0px 7px 0px rgba(182, 185, 189, 0.25); } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title { color: #111; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title:after { display: none; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link:hover .menu-title { background: #e7e7e7; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link:hover .menu-title { background: #fff; } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse, .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing { display: block; background: #ededed; border-radius: 0 0 5px 0; position: absolute; left: 70px; width: 190px; -webkit-box-shadow: 4px 4px 7px 0px rgba(182, 185, 189, 0.25); box-shadow: 4px 4px 7px 0px rgba(182, 185, 189, 0.25); } .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse, .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing { background: #fff; } .rtl.sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse, .rtl.sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing { left: auto; right: 70px; border-radius: 0 0 0 5px; -webkit-box-shadow: -4px 4px 7px 0px rgba(182, 185, 189, 0.25); box-shadow: -4px 4px 7px 0px rgba(182, 185, 189, 0.25); } .sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item.active { border-radius: 0; } .sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item:hover .nav-link { border-radius: 0; } .sidebar-icon-only .sidebar .nav.sub-menu { padding: 0 0 0 1.5rem; } .sidebar-icon-only .sidebar .nav.sub-menu { background: #fff; } .sidebar-icon-only .sidebar .nav.sub-menu .nav-item .nav-link { text-align: left; padding-left: 20px; margin-bottom: 0; padding-bottom: 0; } .sidebar-icon-only .main-panel { width: calc(100% - 70px); } } @media (min-width: 992px) { .sidebar-hidden .sidebar { transition: width 0.25s ease; -webkit-transition: width 0.25s ease; -moz-transition: width 0.25s ease; -ms-transition: width 0.25s ease; width: 0; } .sidebar-hidden .main-panel { width: 100%; } } @media (min-width: 992px) { .sidebar-absolute .page-body-wrapper { position: relative; } .sidebar-absolute .page-body-wrapper .sidebar { -webkit-transition: none; transition: none; } .sidebar-absolute:not(.sidebar-hidden) .sidebar { position: absolute; height: 100%; -webkit-box-shadow: 0 0 3px 1px #a7a3a3; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ /* Firefox 3.5 - 3.6 */ box-shadow: 0 0 3px 1px #a7a3a3; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ } .sidebar-absolute .main-panel { width: 100%; -webkit-transition: none; transition: none; } } @media (min-width: 992px) { .sidebar-fixed .sidebar { position: fixed; max-height: auto; } .sidebar-fixed .sidebar .nav { max-height: calc(100vh - 70px); overflow: auto; position: relative; } .sidebar-fixed .sidebar .nav.sub-menu { max-height: none; } .sidebar-fixed .sidebar .nav:not(.sub-menu) { padding-bottom: 3rem; } .sidebar-fixed .main-panel { margin-left: 237px; } .sidebar-fixed.sidebar-icon-only .main-panel { margin-left: 70px; } } @media (min-width: 992px) { .boxed-layout .main-container-wrapper { background: #c6c8ca; padding: 0 calc((100% - 1200px) / 2); } .boxed-layout .navbar.fixed-top { margin: auto; max-width: 1200px; } } .rtl { direction: rtl; text-align: right; } .rtl .sidebar .nav { padding-right: 0; } .rtl .sidebar .nav.sub-menu { padding: 0 4.5rem 0 0; } .sidebar-icon-only.rtl .sidebar .nav.sub-menu { padding-right: 0rem; } .sidebar-icon-only.rtl .sidebar .nav.sub-menu .nav-item .nav-link { padding-right: 3rem; text-align: right; } .sidebar-icon-only.rtl .sidebar .nav.sub-menu .nav-item .nav-link:before { right: 1.75rem; } .rtl .product-chart-wrapper::-webkit-scrollbar, .rtl .settings-panel .tab-content .tab-pane .scroll-wrapper::-webkit-scrollbar, .rtl .sidebar-fixed .nav::-webkit-scrollbar, .rtl .table-responsive::-webkit-scrollbar, .rtl ul.chats::-webkit-scrollbar { width: 0.5em; } .rtl .product-chart-wrapper::-webkit-scrollbar-track, .rtl .settings-panel .tab-content .tab-pane .scroll-wrapper::-webkit-scrollbar-track, .rtl .sidebar-fixed .nav::-webkit-scrollbar-track, .rtl .table-responsive::-webkit-scrollbar-track, .rtl ul.chats::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .rtl .product-chart-wrapper::-webkit-scrollbar-thumb, .rtl .settings-panel .tab-content .tab-pane .scroll-wrapper::-webkit-scrollbar-thumb, .rtl .sidebar-fixed .nav::-webkit-scrollbar-thumb, .rtl .table-responsive::-webkit-scrollbar-thumb, .rtl ul.chats::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; } /* Settings Panel */ .settings-panel { border-left: 1px solid #c9ccd7; display: block; position: fixed; top: 70px; right: -300px; bottom: 0; width: 300px; height: 100vh; min-height: 100%; background: #ffffff; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-property: right, box-shadow; -moz-transition-property: right, box-shadow; -o-transition-property: right, box-shadow; transition-property: right, box-shadow; z-index: 9999; } .settings-panel .nav-tabs { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width: auto; margin: 0; padding: 0; background: #ffffff; } .settings-panel .nav-tabs .nav-item { border: none; } .settings-panel .nav-tabs .nav-item .nav-link { background: transparent; text-align: center; border: none; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; color: #000; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; transition-property: color; -webkit-transition-property: color; -webkit-justify-content: center; justify-content: center; } .settings-panel .nav-tabs .nav-item .nav-link.active { background: transparent; color: #248afd; } .settings-panel .tab-content { border: none; padding: 20px 0 0px 0; } .settings-panel .tab-content .tab-pane.scroll-wrapper { position: relative; max-height: 100vh; height: 100%; padding-bottom: 180px; } .settings-panel .settings-heading { padding: 16px 0 13px 35px; font-size: 0.875rem; font-weight: 500; line-height: 1; color: rgba(0, 0, 0, 0.9); opacity: 0.9; margin-bottom: 0; border-top: 1px solid #c9ccd7; border-bottom: 1px solid #c9ccd7; } .rtl .settings-panel .settings-heading { padding: 16px 35px 13px 0; text-align: right; } .rtl .settings-panel small.settings-heading { padding: 16px 0 13px 12px; } .settings-panel .sidebar-bg-options { padding: 13px 35px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 0.875rem; line-height: 1; color: #595959; background: #ffffff; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-property: background; -moz-transition-property: background; -o-transition-property: background; transition-property: background; } .settings-panel .sidebar-bg-options.selected { background: #e6e9ed; } .settings-panel .color-tiles { display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0px 35px 10px 35px; padding-top: 15px; } .settings-panel .color-tiles .tiles { margin: 10px 18px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .settings-panel .color-tiles .tiles:before { content: ""; width: 0px; height: 0px; opacity: 0; background: rgba(0, 0, 0, 0.3); border-radius: 100%; border: 0; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; } .settings-panel .color-tiles .tiles.selected:before { width: 10px; height: 10px; opacity: 1; border-width: 1px; } .settings-panel .color-tiles .tiles.light { border: 1px solid #e2e4e7; } .settings-panel .color-tiles .tiles.default { border: 1px solid #e2e4e7; } .settings-panel .chat-list { padding-left: 0; } .settings-panel .chat-list .list { padding: 0.4rem 0.8rem; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; border-bottom: 1px solid #c9ccd7; } .settings-panel .chat-list .list:last-child { border-bottom: none; } .settings-panel .chat-list .list .profile { position: relative; margin-right: 1rem; } .settings-panel .chat-list .list .profile img { width: 2.50rem; height: 2.50rem; border-radius: 100%; } .settings-panel .chat-list .list .profile span { height: 0.75rem; width: 0.75rem; position: absolute; bottom: 0.34rem; right: 0; border: 0.13rem solid #ffffff; border-radius: 100%; } .settings-panel .chat-list .list .profile span.online { background: #71c016; } .settings-panel .chat-list .list .profile span.offline { background: #f5a623; } .settings-panel .chat-list .list .info { margin-right: auto; } .settings-panel .chat-list .list .info p { display: block; margin-bottom: 0; } .settings-panel .chat-list .list .info p:last-child { opacity: 0.5; font-size: 0.8rem; } .rtl .settings-panel .chat-list .list .info p:last-child { text-align: right; } .settings-panel .chat-list .list.active { background: #f8f9fa; } .settings-panel.open { right: 0; } .settings-panel .settings-close { position: absolute; top: 16px; right: 10px; color: #248afd; background: transparent; border-radius: 4px; padding: 0 3px; cursor: pointer; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; z-index: 999; } .settings-panel .settings-close:hover { background: rgba(255, 255, 255, 0.3); } .rtl .settings-panel .settings-close { right: unset; left: 10px; } .settings-panel .events p { font-weight: 400; } .rtl .settings-panel .events p { text-align: right; } .rtl .settings-panel { right: unset; left: -300px; -webkit-transition-property: left; -moz-transition-property: left; -o-transition-property: left; transition-property: left; } .rtl .settings-panel .chat-list { padding-right: 0; } .rtl .settings-panel .chat-list .list .profile { margin-right: 0; margin-left: 1rem; } .rtl .settings-panel .chat-list .list .info { margin-right: 0; margin-left: auto; } .rtl .settings-panel .chat-list .list .info .badge { margin-right: 10px; } .rtl .settings-panel.open { left: 0; right: unset; } #theme-settings .settings-close { top: 12px; background: transparent; } #settings-trigger { position: fixed; bottom: 40px; right: 30px; height: 45px; width: 45px; background: #248afd; z-index: 99; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; border-radius: 100%; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } #settings-trigger i { color: #ffffff; font-size: 1rem; line-height: 1rem; } .rtl #settings-trigger { right: auto; left: 30px; } @media (max-width: 991px) { #settings-trigger { display: none; } } .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right { margin-left: auto; } .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right { align-self: stretch !important; } .navbar .navbar-menu-wrapper .navbar-nav { flex-direction: row !important; } .navbar .navbar-menu-wrapper .navbar-nav { display: flex !important; } .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right .nav-item { align-items: center !important; } .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right .nav-item { display: flex !important; } .app-search { position: relative; z-index: 1; margin-left: 30px !important; } .app-search .form-control { border: none; height: 38px; padding-left: 15px; background-color: rgba(114, 124, 245, 0.1); -webkit-box-shadow: none; box-shadow: none; border-radius: 30px; width: 250px; } .app-search .search-btn { position: absolute; right: 15px; z-index: 10; font-size: 16px; line-height: 38px; top: 0; color: #74788d; border: none; background-color: transparent; } /* Animation Mixins */ @keyframes dropdownAnimation { from { opacity: 0; transform: translate3d(0, -30px, 0); } to { opacity: 1; transform: none; transform: translate3d(0, 0px, 0); } } .dropdownAnimation, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu { animation-name: dropdownAnimation; -webkit-animation-duration: 0.25s; -moz-animation-duration: 0.25s; -ms-animation-duration: 0.25s; -o-animation-duration: 0.25s; animation-duration: 0.25s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; } .infinite-spin, #settings-trigger i { animation-name: spin; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } .fadeInUp, #settings-trigger { animation-name: fadeInUp; } @media (max-width: 991px) { .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown { width: 300px; right: 20px; left: auto; } } @media (max-width: 767px) { .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown { width: 300px; } } @media (max-width: 480px) { .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown { width: 270px; } } .copywrite-text p { margin-bottom: 0; font-size: 15px; } .footer-area { padding-bottom: 15px; } .copywrite-text p a { color: #5867dd; } /* :: Button CSS */ .btn-block { display: block !important; width: 100% !important; } .btn { -webkit-transition-duration: 400ms; -o-transition-duration: 400ms; transition-duration: 400ms; font-size: 13px; border-radius: .15rem; font-weight: 600; letter-spacing: 0.3px; padding: .60rem 1.75rem; } @media only screen and (max-width: 767px) { .btn { font-size: 13px; } } .btn:focus, .btn:hover { font-weight: 600; box-shadow: none !important; font-size: 13px; } @media only screen and (max-width: 767px) { .btn:focus, .btn:hover { font-size: 13px; } } .btn.btn-rounded { border-radius: 30px; } .btn.btn-lg { font-size: 1.25rem; } .btn.btn-circle { border-radius: 50%; padding: 0; width: 40px; height: 40px; line-height: 40px; } .btn.btn-circle.btn-lg { padding: 0; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; } .btn-secondary { color: #273444; background-color: #eff2f7; border-color: #eff2f7; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-secondary:hover { color: #273444; background-color: #d6ddea; border-color: #cdd6e6; } .btn-success { color: #fff; background-color: #36b37e; border-color: #36b37e; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-success:hover { color: #fff; background-color: #2d9669; border-color: #2a8c62; } .btn-danger { color: #fff; background-color: #ff5630; border-color: #ff5630; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-group-sm > .btn, .btn-sm { padding: .4rem 1.25rem; line-height: 1.5; border-radius: .25rem; } .btn-danger:hover { color: #fff; background-color: #ff370a; border-color: #fc2e00; } .btn-warning { color: #fff; background-color: #ffab00; border-color: #ffab00; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-warning:hover { color: #fff; background-color: #d99100; border-color: #cc8900; } .btn-light { color: #313a46; background-color: #e3eaef; border-color: #e3eaef; } .btn-outline-light:hover { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; } .btn-light { -webkit-box-shadow: 0 2px 6px 0 rgba(227, 234, 239, 0.5); box-shadow: 0 2px 6px 0 rgba(227, 234, 239, 0.5); } .btn-light { color: #313a46; background-color: #e3eaef; border-color: #e3eaef; } .btn-primary { background-color: #5867dd; border-color: #5867dd; } .btn-primary:hover { color: #fff; background-color: #384ad7; border-color: #384ad7; } .btn-facebook { color: #ffffff; background-color: #3b5998; } .btn-twitter { color: #ffffff; background-color: #55acee; } .btn-googleplus { color: #ffffff; background-color: #dd4b39; } .btn-linkedin { color: #ffffff; background-color: #007bb6; } .btn-pinterest { color: #ffffff; background-color: #cb2027; } .btn-dribbble { color: #ffffff; background-color: #ea4c89; } .btn-instagram { color: #ffffff; background-color: #3f729b; } .btn-youtube { color: #ffffff; background-color: #bb0000; } .label-primary, .badge-primary { background-color: #5867dd; color: #FFFFFF; } .label-warning, .badge-warning { background-color: #fdb901; color: #FFFFFF; } .label { font-weight: 600; padding: 3px 8px; text-shadow: none; border-radius: 0.25em; line-height: 1; white-space: nowrap; font-size: 13px; } .dropdown-menu-static-demo { height: 250px; margin-bottom: 20px; } .dropdown .dropdown-menu { font-size: 0.75rem; -webkit-box-shadow: 0px 1px 15px 5px #e6eaec; box-shadow: 0px 1px 15px 5px #e6eaec; border-radius: 0; } .dropdown-menu { border: 1px solid #e1eaea; -webkit-box-shadow: 0px 1px 15px 5px #e6eaec; box-shadow: 0px 1px 15px 5px #e6eaec; } .btn-success { color: #fff; background-color: #1dc9b7; border-color: #1dc9b7; } .alert-primary { color: #fff; background-color: #2c7be5; border-color: #2c7be5; } .alert-secondary { color: #fff; background-color: #6e84a3; border-color: #6e84a3; } .alert-success { color: #fff; background-color: #00d97e; border-color: #00d97e; } .alert-danger { color: #fff; background-color: #e63757; border-color: #e63757; } .alert-warning { color: #283e59; background-color: #f6c343; border-color: #f6c343; } .alert-info { color: #fff; background-color: #39afd1; border-color: #39afd1; } .alert-light { color: #283e59; background-color: #edf2f9; border-color: #edf2f9; } .alert-dark { color: #fff; background-color: #12263f; border-color: #12263f; } .btn-outline-primary { color: #5867dd; border-color: #5867dd; } .btn-outline-primary:hover { background-color: #5867dd; border-color: #5867dd; } .bg-light { background-color: #f1f2fa !important; } a.bg-light:focus, a.bg-light:hover, button.bg-light:focus, button.bg-light:hover { background-color: #f1f3fa !important; color: inherit; } .btn-success:hover { background-color: #1bb4a4; border-color: #1bb4a4; } .badge.badge-soft-danger { background-color: rgba(241, 100, 108, 0.15) !important; color: #f1646c !important; -webkit-box-shadow: 0 0 13px 0 rgba(241, 100, 108, 0.05); box-shadow: 0 0 13px 0 rgba(241, 100, 108, 0.05); } .badge.badge-soft-success { background-color: rgba(30, 202, 184, 0.15) !important; color: #1ecab8 !important; -webkit-box-shadow: 0 0 13px 0 rgba(30, 202, 184, 0.05); box-shadow: 0 0 13px 0 rgba(30, 202, 184, 0.05); } .badge.badge-soft-purple { background-color: rgba(117, 81, 233, 0.15) !important; color: #7551e9 !important; -webkit-box-shadow: 0 0 13px 0 rgba(117, 81, 233, 0.05); box-shadow: 0 0 13px 0 rgba(117, 81, 233, 0.05); } .badge { font-size: 11px; padding: 6px 12px; font-weight: 600; } .badge-soft-primary { color: #6e00ff; background-color: #e2ccff; } .badge-soft-info { color: #00b8d9; background-color: #ccf1f7; } .badge-soft-dark { color: #273444; background-color: #d4d6da; } /* :: Fill Button CSS */ .btn-fill { padding: 0.675rem 1.25rem; border: 1px solid #0168fa; position: relative; z-index: 2; overflow: hidden; } .btn-fill:hover { color: #ffffff; } .btn-fill:hover:after { background: #0168fa; height: 100%; } .btn-fill:after { content: ''; width: 100%; height: 0; position: absolute; right: 0; left: 0; bottom: 0; z-index: -2; -webkit-transition: linear 0.3s all; -o-transition: linear 0.3s all; transition: linear 0.3s all; } .btn-fill-white { border: 1px solid #ffffff !important; color: #ffffff !important; } .btn-fill[class*="btn-fill-"] { background-color: transparent; } .btn-fill-default { border: 1px solid #e1eaea !important; color: #2d3748 !important; -webkit-box-shadow: none; box-shadow: none; } .btn-fill-default:hover:after, .btn-fill-default:focus:after { background-color: #e1eaea; } .btn-fill-primary { border: 1px solid #5867dd !important; color: #5867dd !important; -webkit-box-shadow: none; box-shadow: none; } .btn-fill-primary:hover:after, .btn-fill-primary:focus:after { background-color: #5867dd; } .btn-fill-info { border: 1px solid #5578eb !important; color: #5578eb !important; -webkit-box-shadow: none; box-shadow: none; } .btn-fill-info:hover:after, .btn-fill-info:focus:after { background-color: #5578eb; } .btn-fill-success { border: 1px solid #1dc9b7 !important; color: #1dc9b7 !important; -webkit-box-shadow: none; box-shadow: none; } .btn-fill-success:hover:after, .btn-fill-success:focus:after { background-color: #1dc9b7; } .btn-fill-danger { border: 1px solid #fd397a !important; color: #fd397a !important; -webkit-box-shadow: none; box-shadow: none; } .btn-fill-danger:hover:after, .btn-fill-danger:focus:after { background-color: #fd397a; } .btn-fill-warning { border: 1px solid #ffb822 !important; color: #ffb822 !important; -webkit-box-shadow: none; box-shadow: none; } .btn-fill-warning:hover:after, .btn-fill-warning:focus:after { background-color: #ffb822; } .btn-fill-secondary { border: 1px solid #8897aa !important; color: #8897aa !important; -webkit-box-shadow: none; box-shadow: none; } .btn-fill-secondary:hover:after, .btn-fill-secondary:focus:after { background-color: #8897aa; } .btn-fill-dark { border: 1px solid #2d3748 !important; color: #2d3748 !important; -webkit-box-shadow: none; box-shadow: none; } .btn-fill-dark:hover:after, .btn-fill-dark:focus:after { background-color: #2d3748; } .btn-fill--white { border: 1px solid #ffffff !important; color: #ffffff !important; -webkit-box-shadow: none; box-shadow: none; } .btn-fill--white:hover:after, .btn-fill--white:focus:after { background-color: transparent; border: transparent !important; } .btn-fill-default:hover, .btn-fill-default:focus { color: #2d3748 !important; } .btn-fill-primary:hover, .btn-fill-info:hover, .btn-fill-success:hover, .btn-fill-danger:hover, .btn-fill-warning:hover, .btn-fill-secondary:hover, .btn-fill-dark:hover { color: #ffffff !important; } .spin { -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } /* :: Gradients Button CSS */ .btn[class*="btn-c-gradient-"] { padding: 10px 24px; text-shadow: none; font-size: 14px; color: #ffffff; font-weight: normal; white-space: normal; word-wrap: break-word; -webkit-transition: 0.2s ease-out; -o-transition: 0.2s ease-out; transition: 0.2s ease-out; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; text-transform: uppercase; background-color: #f2f4f8; -webkit-box-shadow: 0px 5px 20px 0 rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 20px 0 rgba(0, 0, 0, 0.1); will-change: opacity, transform; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .btn-c-gradient-1 { background-image: -webkit-gradient(linear, left top, right top, from(#3232b7), to(#2575fc)); background-image: -webkit-linear-gradient(left, #3232b7 0%, #2575fc 100%); background-image: -o-linear-gradient(left, #3232b7 0%, #2575fc 100%); background-image: linear-gradient(to right, #3232b7 0%, #2575fc 100%); } .btn-c-gradient-1:hover, .btn.btn-c-gradient-1:not(:disabled):not(.disabled):active { background-image: -webkit-gradient(linear, left top, right top, from(#2575fc), to(#3232b7)); background-image: -webkit-linear-gradient(left, #2575fc 0%, #3232b7 100%); background-image: -o-linear-gradient(left, #2575fc 0%, #3232b7 100%); background-image: linear-gradient(to right, #2575fc 0%, #3232b7 100%); } .btn-c-gradient-2 { background-image: -webkit-gradient(linear, left top, right top, from(#4facfe), to(#00f2fe)); background-image: -webkit-linear-gradient(left, #4facfe 0%, #00f2fe 100%); background-image: -o-linear-gradient(left, #4facfe 0%, #00f2fe 100%); background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); } .btn-c-gradient-2:hover, .btn.btn-c-gradient-2:not(:disabled):not(.disabled):active { background-image: -webkit-gradient(linear, left top, right top, from(#00f2fe), to(#4facfe)); background-image: -webkit-linear-gradient(left, #00f2fe 0%, #4facfe 100%); background-image: -o-linear-gradient(left, #00f2fe 0%, #4facfe 100%); background-image: linear-gradient(to right, #00f2fe 0%, #4facfe 100%); } .btn-c-gradient-3 { background-image: -webkit-gradient(linear, left top, right top, from(#00cdac), to(#38f9d7)); background-image: -webkit-linear-gradient(left, #00cdac 0%, #38f9d7 100%); background-image: -o-linear-gradient(left, #00cdac 0%, #38f9d7 100%); background-image: linear-gradient(to right, #00cdac 0%, #38f9d7 100%); } .btn-c-gradient-3:hover, .btn.btn-c-gradient-3:not(:disabled):not(.disabled):active { background-image: -webkit-gradient(linear, left top, right top, from(#38f9d7), to(#00cdac)); background-image: -webkit-linear-gradient(left, #38f9d7 0%, #00cdac 100%); background-image: -o-linear-gradient(left, #38f9d7 0%, #00cdac 100%); background-image: linear-gradient(to right, #38f9d7 0%, #00cdac 100%); } .btn-c-gradient-4 { background-image: -webkit-linear-gradient(330deg, #f6d365 0%, #fda085 100%); background-image: -o-linear-gradient(330deg, #f6d365 0%, #fda085 100%); background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); } .btn-c-gradient-4:hover, .btn.btn-c-gradient-4:not(:disabled):not(.disabled):active { background-image: -webkit-linear-gradient(330deg, #fda085 0%, #f6d365 100%); background-image: -o-linear-gradient(330deg, #fda085 0%, #f6d365 100%); background-image: linear-gradient(120deg, #fda085 0%, #f6d365 100%); } .btn-c-gradient-5 { background-image: -webkit-gradient(linear, left bottom, left top, from(#f77062), to(#fe5196)); background-image: -webkit-linear-gradient(bottom, #f77062 0%, #fe5196 100%); background-image: -o-linear-gradient(bottom, #f77062 0%, #fe5196 100%); background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%); } .btn-c-gradient-5:hover, .btn.btn-c-gradient-5:not(:disabled):not(.disabled):active { background-image: -webkit-gradient(linear, left bottom, left top, from(#fe5196), to(#f77062)); background-image: -webkit-linear-gradient(bottom, #fe5196 0%, #f77062 100%); background-image: -o-linear-gradient(bottom, #fe5196 0%, #f77062 100%); background-image: linear-gradient(to top, #fe5196 0%, #f77062 100%); } .btn-c-gradient-6 { background-image: -webkit-gradient(linear, left top, right top, from(#816cfd), to(#7c5ac2)); background-image: -webkit-linear-gradient(left, #816cfd 0%, #7c5ac2 100%); background-image: -o-linear-gradient(left, #816cfd 0%, #7c5ac2 100%); background-image: linear-gradient(to right, #816cfd 0%, #7c5ac2 100%); } .btn-c-gradient-6:hover, .btn.btn-c-gradient-6:not(:disabled):not(.disabled):active { background-image: -webkit-gradient(linear, left top, right top, from(#7c5ac2), to(#816cfd)); background-image: -webkit-linear-gradient(left, #7c5ac2 0%, #816cfd 100%); background-image: -o-linear-gradient(left, #7c5ac2 0%, #816cfd 100%); background-image: linear-gradient(to right, #7c5ac2 0%, #816cfd 100%); } /* :: Icon Button CSS */ .ladda-button { overflow: hidden; height: auto; padding: 0.55rem 1.10rem; min-width: 50px; border-radius: 50px; } .btn-creative { border: none; font-size: inherit; color: inherit; background: none; cursor: pointer; padding: 8px 22px; display: inline-block; margin: 10px 10px; text-transform: uppercase; outline: none; position: relative; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .btn-creative:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .btn-1 { border: 1px solid transparent; color: #ffffff; } .btn-1a:hover, .btn-1a:active { color: #5867dd !important; background: #ffffff !important; border: 1px solid #5867dd !important; } .btn-1b:after { width: 100%; height: 0; top: 0; left: 0; background: #ffffff; border-radius: 3px; } .btn-1b:not(:disabled):not(.disabled):active { color: #00b1f4 !important; } .btn-1b:hover, .btn-1b:active { color: #009eda !important; border: 1px solid #009eda; z-index: 1; } .btn-1b:hover:after, .btn-1b:active:after { height: 100%; } .btn-1c:after { width: 0%; height: 100%; top: 0; left: 0; background: #ffffff; border-radius: 3px; } .btn-1c:not(:disabled):not(.disabled):active { color: #1dc9b7 !important; } .btn-1c:after:active { background: #000; } .btn-1c:hover, .btn-1c:active { color: #1dc9b7 !important; border: 1px solid #1dc9b7; z-index: 1; } .btn-1c:hover:after, .btn-1c:active:after { width: 100%; } .btn-1d { overflow: hidden; } .btn-1d:after { width: 0; height: 100%; top: 50%; left: 50%; background: #ffffff; opacity: 0; -webkit-transform: translateX(-50%) translateY(-49%); -moz-transform: translateX(-50%) translateY(-49%); -ms-transform: translateX(-50%) translateY(-49%); transform: translateX(-50%) translateY(-49%); } .btn-1d:not(:disabled):not(.disabled):active { color: #ffb822 !important; } .btn-1d:hover, .btn-1d:active { color: #ffb822 !important; border: 1px solid #ffb822; z-index: 1; } .btn-1d:hover:after { width: 100%; opacity: 1; } .btn-1d:active:after { width: 100%; opacity: 1; } .btn-1e { overflow: hidden; } .btn-1e:after { width: 100%; height: 0; top: 50%; left: 50%; background: #ffffff; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg); } .btn-1e:not(:disabled):not(.disabled):active { color: #ee3d49 !important; } .btn-1e:hover, .btn-1e:active { color: #df303b !important; border: 1px solid #df303b; z-index: 1; } .btn-1e:hover:after { height: 300%; opacity: 1; } .btn-1e:active:after { height: 400%; opacity: 1; } .btn-1f { overflow: hidden; } .btn-1f:after { width: 100%; height: 0; top: 50%; left: 50%; background: #ffffff; opacity: 0; -webkit-transform: translateX(-50%) translateY(-49%); -moz-transform: translateX(-50%) translateY(-49%); -ms-transform: translateX(-50%) translateY(-49%); transform: translateX(-50%) translateY(-49%); } .btn-1f:not(:disabled):not(.disabled):active { color: #7d56ce !important; } .btn-1f:hover, .btn-1f:active { color: #714cbd !important; border: 1px solid #714cbd; z-index: 1; } .btn-1f:hover:after { height: 100%; opacity: 1; } .btn-1f:active:after { height: 130%; opacity: 1; } .btn-2 { background: #cb4e4e; color: #ffffff; box-shadow: 0 6px #ab3c3c; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-2b { border-radius: 5px; background: #00b1f4; box-shadow: 0 6px #189dce; } .btn-2b:hover { box-shadow: 0 8px #189dce; top: -2px; } .btn-2b:active { box-shadow: 0 0 #189dce; top: 6px; } .btn-2j { border-radius: 50%; width: 55px; height: 55px; padding: 0; background: #4f5163; box-shadow: 0 6px #454656; } .btn-2j:hover { box-shadow: 0 8px #454656; top: -2px; } .btn-2j:active { box-shadow: 0 0 #454656; top: 6px; } .btn-3:active { top: 2px; } .btn-3:before { position: absolute; height: 100%; left: 0; top: 0; line-height: 2.2; font-size: 130%; width: 45px; } .btn-3a { padding: 12px 20px 14px 60px; border-radius: 10px; background: #5867dd; color: #ffffff; } .btn-3a:hover { background: #5867dd; } .btn-3a:before { background: rgba(0, 0, 0, 0.05); } .btn-3b { padding: 12px 20px 14px 60px; border-radius: 10px; background: #00b1f4; color: #ffffff; } .btn-3b:hover { background: #209dff; } .btn-3b:before { border-right: 2px solid rgba(255, 255, 255, 0.5); } .btn-3c { padding: 60px 12px 14px 12px; border-radius: 10px; box-shadow: 0 3px #079f45; background: #1ad271; color: #ffffff; } .btn-3c:active { box-shadow: 0 3px #079f45; } .btn-3c:before { height: 50px; width: 100%; line-height: 50px; background: #ffffff; color: #00c851; border: 1px solid #00c851; border-radius: 10px 10px 0 0; } .btn-3c:active:before { color: #00c851; } .btn-3d { padding: 12px 20px 14px 60px; border-radius: 10px; background: #e9b02b; color: #ffffff; } .btn-3d:before { background: #ffffff; color: #e9b02b; z-index: 2; border-top: 1px solid #e9b02b; border-bottom: 1px solid #e9b02b; border-left: 1px solid #e9b02b; border-radius: 10px 0 0 10px; } .btn-3d:after { width: 20px; height: 20px; background: #ffffff; z-index: 1; left: 40px; top: 50%; margin: -10px 0 0 -10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .btn-3d:active:before { color: #dea82a; } .btn-3d:active { top: 0; } .btn-3d:active:after { left: 44px; } .btn-3e { padding: 12px 60px 14px 20px; border-radius: 10px; overflow: hidden; background: #805dca; color: #ffffff; } .btn-3e:before { left: auto; right: 0px; z-index: 2; } .btn-3e:after { width: 30%; height: 200%; background: rgba(255, 255, 255, 0.1); z-index: 1; right: 0; top: 0; margin: -5px 0 0 -5px; -webkit-transform-origin: 0 0; -webkit-transform: rotate(-20deg); -moz-transform-origin: 0 0; -moz-transform: rotate(-20deg); -ms-transform-origin: 0 0; -ms-transform: rotate(-20deg); transform-origin: 0 0; transform: rotate(-20deg); } .btn-3e:hover:after { width: 40%; } .btn-4 { border-radius: 50px; border: 1px solid transparent; color: #ffffff; overflow: hidden; line-height: 24px; } .btn-4:before { position: absolute; height: 100%; font-size: 112%; line-height: 2.5; color: #ffffff; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .btn-4a { background: #5867dd; } .btn-4a:hover { background: #5867dd; } .btn-4a:before { left: 130%; top: 0; } .btn-4a:hover:before { left: 83%; } .btn-4b { background: #1abc9c; } .btn-4b:hover { background: #2ea37d; } .btn-4b:before { left: -50%; top: 0; } .btn-4b:hover:before { left: 5%; } .btn-4c { background: #f28b21; } .btn-4c:hover { background: #ff961f; } .btn-4c:before { left: 70%; opacity: 0; top: 0; } .btn-4c:hover:before { left: 83%; opacity: 1; } .btn-4d { background: #9b59b6; } .btn-4d:hover { background: #b579d2; } .btn-4d:before { left: 30%; opacity: 0; top: 0; } .btn-4d:hover:before { left: 5%; opacity: 1; } .btn-5 { background: #823aa0; color: #ffffff; line-height: 24px; overflow: hidden; border-radius: 50px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .btn-5:active { top: 2px; } .btn-5 span { display: inline-block; width: 100%; height: 100%; -webkit-transition: all 0.3s; -webkit-backface-visibility: hidden; -moz-transition: all 0.3s; -moz-backface-visibility: hidden; transition: all 0.3s; backface-visibility: hidden; } .btn-5:before { position: absolute; height: 100%; width: 100%; line-height: 2.5; font-size: 130%; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .btn-5:active:before { color: #ffffff; } .btn-5a { background: #00b1f4; } .btn-5a:hover { background: #009eda; } .btn-5a:hover span { -webkit-transform: translateY(300%); -moz-transform: translateY(300%); -ms-transform: translateY(300%); transform: translateY(300%); } .btn-5a:before { left: 0; top: -106%; } .btn-5a:hover:before { top: 0; } .btn-5b { background: #e7515a; } .btn-5b:hover { background: #ff3743; } .btn-5b:hover span { -webkit-transform: translateY(300%); -moz-transform: translateY(300%); -ms-transform: translateY(300%); transform: translateY(300%); } .btn-5b:before { left: 0; top: -100%; } .btn-5b:hover:before { top: 0; } .btn-5c { background: #e9b02b; } .btn-5c:hover { background: #dea82a; } .btn-5c:hover span { -webkit-transform: translateY(300%); -moz-transform: translateY(300%); -ms-transform: translateY(300%); transform: translateY(300%); } .btn-5c:before { left: 0; top: -100%; } .btn-5c:hover:before { top: 0; } .btn-5d { background: #805dca; } .btn-5d:hover { background: #714cbd; } .btn-5d:hover span { -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); transform: translateX(200%); } .btn-5d:before { left: -100%; top: 0; } .btn-5d:hover:before { left: 0; } .btn-5e { background: #4f5163; } .btn-5e:hover { background: #454656; } .btn-5e:hover span { -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); transform: translateX(200%); } .btn-5e:before { left: -100%; top: 0; } .btn-5e:hover:before { left: 0; } .btn-5f { background: #f8538d; } .btn-5f:hover { background: #f8538d; } .btn-5f:hover span { -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); transform: translateX(200%); } .btn-5f:before { left: -100%; top: 0; } .btn-5f:hover:before { left: 0; } .btn-6 { color: #ffffff; background: #226fbe; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-6:active { top: 2px; } .btn-6a { border: 2px solid #0a4f75; background: #0a4f75; } .btn-6a:hover { background: transparent; color: #0a4f75; } .btn-6b { border: 3px solid #26b0ff; background: #26b0ff; } .btn-6b:hover { background: transparent; color: #33b5e5; } .btn-6c { border: 3px solid #1ad271; background: #1ad271; } .btn-6c:hover { background: transparent; color: #00C851; } .btn-6d { border: 2px dashed #e95f2b; background: #e95f2b; } .btn-6d:hover { background: transparent; color: #e95f2b; } .btn-6e { border: 2px dashed #ec2330; background: #ec2330; } .btn-6e:hover { background: transparent; color: #CC0000; } .btn-6f { border: 2px dashed #9b59b6; background: #9b59b6; } .btn-6f:hover { background: transparent; color: #aa66cc; } .btn-6g { border: 3px dotted #24ccda; background: #24ccda; } .btn-6g:hover { background: transparent; color: #24ccda; } .btn-6h { border: 3px dotted #4073FF; background: #4073FF; } .btn-6h:hover { background: transparent; color: #4285F4; } .btn-6i { border: 3px dotted #26b0ff; background: #26b0ff; } .btn-6i:hover { background: transparent; color: #33b5e5; } .btn-6j { border: 3px double #f8538d; background: #f8538d; } .btn-6j:hover { background: transparent; color: #f8538d; } .btn-6k { border: 3px double #f28b21; background: #f28b21; } .btn-6k:hover { background: transparent; color: #FF8800; } .btn-6l { border: 3px double #ec2330; background: #ec2330; } .btn-6l:hover { background: transparent; color: #CC0000; } .btn-7 { background: #1ad271; color: #ffffff; border-radius: 7px; box-shadow: 0 5px #07A145; padding: 12px 15px 12px 50px; } .btn-7a { background: #4073FF; box-shadow: 0 5px #1861DA; overflow: hidden; } .btn-7a:before { position: absolute; left: 0; width: 30%; font-size: 130%; line-height: 1; color: #ffffff; } .btn-7a.btn-activated { -webkit-animation: fadeOutText 0.5s; -moz-animation: fadeOutText 0.5s; animation: fadeOutText 0.5s; } .btn-7a.btn-activated:before { -webkit-animation: moveToRight 0.5s; -moz-animation: moveToRight 0.5s; animation: moveToRight 0.5s; } @-webkit-keyframes fadeOutText { 0% { color: transparent; } 80% { color: transparent; } 100% { color: #ffffff; } } @-moz-keyframes fadeOutText { 0% { color: transparent; } 80% { color: transparent; } 100% { color: #ffffff; } } @keyframes fadeOutText { 0% { color: transparent; } 80% { color: transparent; } 100% { color: #ffffff; } } @-webkit-keyframes moveToRight { 80% { -webkit-transform: translateX(250%); } 81% { opacity: 1; -webkit-transform: translateX(250%); } 82% { opacity: 0; -webkit-transform: translateX(250%); } 83% { opacity: 0; -webkit-transform: translateX(-50%); } 84% { opacity: 1; -webkit-transform: translateX(-50%); } 100% { -webkit-transform: translateX(0%); } } @-moz-keyframes moveToRight { 80% { -moz-transform: translateX(250%); } 81% { opacity: 1; -moz-transform: translateX(250%); } 82% { opacity: 0; -moz-transform: translateX(250%); } 83% { opacity: 0; -moz-transform: translateX(-50%); } 84% { opacity: 1; -moz-transform: translateX(-50%); } 100% { -moz-transform: translateX(0%); } } @keyframes moveToRight { 80% { transform: translateX(250%); } 81% { opacity: 1; transform: translateX(250%); } 82% { opacity: 0; transform: translateX(250%); } 83% { opacity: 0; transform: translateX(-50%); } 84% { opacity: 1; transform: translateX(-50%); } 100% { transform: translateX(0%); } } .btn-7b { background: #1ad271; box-shadow: 0 5px #07A145; overflow: hidden; } .btn-7b:before { position: absolute; left: 0; width: 30%; font-size: 130%; line-height: 1; color: #ffffff; } .btn-7b.btn-activated:before { -webkit-animation: scaleUp 0.5s; -moz-animation: scaleUp 0.5s; animation: scaleUp 0.5s; } @-webkit-keyframes scaleUp { 80% { opacity: 0; -webkit-transform: scale(2); } 100% { opacity: 0; -webkit-transform: scale(2); } } @-moz-keyframes scaleUp { 80% { opacity: 0; -moz-transform: scale(2); } 100% { opacity: 0; -moz-transform: scale(2); } } @keyframes scaleUp { 80% { opacity: 0; transform: scale(2); } 100% { opacity: 0; transform: scale(2); } } .btn-icon-only { font-size: 0; padding: 24px 30px; } .btn-icon-only:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 18px; line-height: 50px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .btn-7c { background: #f28b21; box-shadow: 0 5px #D87607; overflow: hidden; } .btn-7c:before { color: #ffffff; z-index: 1; } .btn-7c:after { position: absolute; top: 0; left: 0; height: 100%; z-index: 0; width: 0; background: #D87607; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-7c.btn-activated:after { -webkit-animation: fillToRight 0.7s forwards; -moz-animation: fillToRight 0.7s forwards; animation: fillToRight 0.7s forwards; } @-webkit-keyframes fillToRight { to { width: 100%; } } @-moz-keyframes fillToRight { to { width: 100%; } } @keyframes fillToRight { to { width: 100%; } } .btn-7d { background: #ec2330; box-shadow: 0 5px #AE0404; overflow: hidden; } .btn-7d:before { color: #ffffff; z-index: 1; } .btn-7d:after { position: absolute; top: 0; left: 0; height: 0; width: 100%; z-index: 0; background: #AE0404; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-7d.btn-activated:after { -webkit-animation: emptyBottom 0.7s forwards; -moz-animation: emptyBottom 0.7s forwards; animation: emptyBottom 0.7s forwards; } @-webkit-keyframes emptyBottom { to { height: 100%; } } @-moz-keyframes emptyBottom { to { height: 100%; } } @keyframes emptyBottom { to { height: 100%; } } .btn-7e:after { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; font-size: 26px; line-height: 54px; color: #ea515e; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-7e.btn-activated:after { -webkit-animation: scaleFade 0.5s forwards; -moz-animation: scaleFade 0.5s forwards; animation: scaleFade 0.5s forwards; } @-webkit-keyframes scaleFade { 50% { opacity: 1; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(2.5); } } @-moz-keyframes scaleFade { 50% { opacity: 1; -moz-transform: scale(1); } 100% { opacity: 0; -moz-transform: scale(2.5); } } @keyframes scaleFade { 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.5); } } .btn-7f { background: #9b59b6; box-shadow: 0 5px #8f3fb7; } .btn-7f:before { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #ffffff; } .btn-7f:after { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; font-size: 26px; line-height: 54px; color: #ffe44d; visibility: hidden; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #ffe44d; -webkit-transform: scale(4); -moz-transform: scale(4); -ms-transform: scale(4); transform: scale(4); opacity: 0; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-7f.btn-activated:after { visibility: visible; -webkit-animation: dropDown 0.3s forwards; -moz-animation: dropDown 0.3s forwards; animation: dropDown 0.3s forwards; } @-webkit-keyframes dropDown { to { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes dropDown { to { opacity: 1; -moz-transform: scale(1); } } @keyframes dropDown { to { opacity: 1; transform: scale(1); } } .btn-7g { background: #494949; box-shadow: 0 5px #3c3b3b; } .btn-7g:after { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; font-size: 26px; line-height: 54px; color: #0a833d; visibility: hidden; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; -webkit-transition: none; -moz-transition: none; transition: none; } .btn-7g.btn-activated:after { visibility: visible; -webkit-animation: dropDownFade 0.5s forwards; -moz-animation: dropDownFade 0.5s forwards; animation: dropDownFade 0.5s forwards; } @-webkit-keyframes dropDownFade { 50% { opacity: 1; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(1.5); } } @-moz-keyframes dropDownFade { 50% { opacity: 1; -moz-transform: scale(1); } 100% { opacity: 0; -moz-transform: scale(1.5); } } @keyframes dropDownFade { 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } .btn-7h { background: #9b59b6; box-shadow: 0 5px #8e44b4; } .btn-7h span { display: inline-block; width: 100%; } .btn-7h:before { position: absolute; left: 0; width: 30%; font-size: 130%; line-height: 1; color: #ffffff; } .btn-success-1, .btn-error { color: transparent; } .btn-success-1:after, .btn-error:after { z-index: 1; color: #ffffff; left: 40%; } .btn-success-1:before { content: "\e001"; } .btn-success-1:after { content: "Success!"; -webkit-animation: moveUp 0.5s; -moz-animation: moveUp 0.5s; animation: moveUp 0.5s; } @-webkit-keyframes moveUp { 0% { -webkit-transform: translateY(50%); opacity: 0; } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes moveUp { 0% { -moz-transform: translateY(50%); opacity: 0; } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes moveUp { 0% { transform: translateY(50%); opacity: 0; } 100% { opacity: 1; transform: translateY(0); } } .btn-error { -webkit-animation: shake 0.5s; -moz-animation: shake 0.5s; animation: shake 0.5s; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .btn-error:before { content: "\e002"; } .btn-error:after { content: "Error!"; -webkit-animation: scaleFromUp 0.5s; -moz-animation: scaleFromUp 0.5s; animation: scaleFromUp 0.5s; } @-webkit-keyframes scaleFromUp { 0% { -webkit-transform: scale(0); opacity: 0; } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes scaleFromUp { 0% { -moz-transform: scale(0); opacity: 0; } 100% { opacity: 1; -moz-transform: scale(1); } } @keyframes scaleFromUp { 0% { transform: scale(0); opacity: 0; } 100% { opacity: 1; transform: scale(1); } } .trash-effect { position: relative; max-width: 300px; margin: 60px auto 15px; } .trash-effect .icon-file { font-size: 30px; position: absolute; width: 50px; height: 50px; left: 50%; top: 50%; margin: -45px 0 0 -25px; color: #494949; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateX(90px) translateY(20px) scale(1); -moz-transform: translateX(90px) translateY(20px) scale(1); -ms-transform: translateX(90px) translateY(20px) scale(1); transform: translateX(90px) translateY(20px) scale(1); } .trash-effect .icon-file:nth-child(2) { -webkit-transform: translateX(140px) translateY(-10px) scale(1); -moz-transform: translateX(140px) translateY(-10px) scale(1); -ms-transform: translateX(140px) translateY(-10px) scale(1); transform: translateX(140px) translateY(-10px) scale(1); -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; transition-delay: 0.1s; } .trash-effect .icon-file:nth-child(3) { -webkit-transform: translateX(140px) translateY(50px) scale(1); -moz-transform: translateX(140px) translateY(50px) scale(1); -ms-transform: translateX(140px) translateY(50px) scale(1); transform: translateX(140px) translateY(50px) scale(1); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .trash-effect.trash-effect-active .icon-file { -webkit-transform: translateX(-100px) translateY(-10px) scale(0); -moz-transform: translateX(-100px) translateY(-10px) scale(0); -ms-transform: translateX(-100px) translateY(-10px) scale(0); transform: translateX(-100px) translateY(-10px) scale(0); } .btn-7i { box-shadow: none; border-radius: 0 0 7px 7px; padding: 27px 33px; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } .btn-7i:before { line-height: 45px; } .btn-7i:after { height: 11px; width: 100%; background: #17aa56; border-radius: 7px 7px 0 0; left: 0; top: -10px; z-index: 1; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; } .trash-effect-active .btn-7i:after { -webkit-animation: openTrash 0.5s; -moz-animation: openTrash 0.5s; animation: openTrash 0.5s; } @-webkit-keyframes openTrash { 50% { -webkit-transform: rotate(-35deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes openTrash { 50% { -moz-transform: rotate(-35deg); } 100% { -moz-transform: rotate(0deg); } } @keyframes openTrash { 50% { transform: rotate(-35deg); } 100% { transform: rotate(0deg); } } .perspective { -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; display: inline-block; } .btn-8 { display: block; background: #5cbcf6; outline: 1px solid transparent; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .btn-8:active { background: #55b7f3; } .btn-8a:after { width: 100%; height: 42%; left: 0; top: -40%; background: #49a7df; -webkit-transform-origin: 0% 100%; -webkit-transform: rotateX(90deg); -moz-transform-origin: 0% 100%; -moz-transform: rotateX(90deg); transform-origin: 0% 100%; transform: rotateX(90deg); } .btn-8a:hover { -webkit-transform: rotateX(-15deg); -moz-transform: rotateX(-15deg); -ms-transform: rotateX(-15deg); transform: rotateX(-15deg); } .btn-8b:after { width: 100%; height: 40%; left: 0; top: 100%; background: #49a7df; -webkit-transform-origin: 0% 0%; -webkit-transform: rotateX(-90deg); -moz-transform-origin: 0% 0%; -moz-transform: rotateX(-90deg); -ms-transform-origin: 0% 0%; -ms-transform: rotateX(-90deg); transform-origin: 0% 0%; transform: rotateX(-90deg); } .btn-8b:hover { -webkit-transform: rotateX(15deg); -moz-transform: rotateX(15deg); -ms-transform: rotateX(15deg); transform: rotateX(15deg); } .btn-8c:after { width: 21%; height: 100%; left: -20%; top: 0; background: #49a7df; -webkit-transform-origin: 100% 0%; -webkit-transform: rotateY(-90deg); -moz-transform-origin: 100% 0%; -moz-transform: rotateY(-90deg); -ms-transform-origin: 100% 0%; -ms-transform: rotateY(-90deg); transform-origin: 100% 0%; transform: rotateY(-90deg); } .btn-8c:hover { -webkit-transform: rotateY(15deg); -moz-transform: rotateY(15deg); -ms-transform: rotateY(15deg); transform: rotateY(15deg); } .btn-8d:after { width: 20%; height: 100%; left: 100%; top: 0; background: #49a7df; -webkit-transform-origin: 0% 0%; -webkit-transform: rotateY(90deg); -moz-transform-origin: 0% 0%; -moz-transform: rotateY(90deg); -ms-transform-origin: 0% 0%; -ms-transform: rotateY(90deg); transform-origin: 0% 0%; transform: rotateY(90deg); } .btn-8d:hover { -webkit-transform: rotateY(-15deg); -moz-transform: rotateY(-15deg); -ms-transform: rotateY(-15deg); transform: rotateY(-15deg); } .btn-8e { -webkit-transform: rotateX(-15deg); -moz-transform: rotateX(-15deg); -ms-transform: rotateX(-15deg); transform: rotateX(-15deg); } .btn-8e:after { width: 100%; height: 42%; left: 0; top: -40%; background: #49a7df; -webkit-transform-origin: 0% 100%; -webkit-transform: rotateX(90deg); -moz-transform-origin: 0% 100%; -moz-transform: rotateX(90deg); -ms-transform-origin: 0% 100%; -ms-transform: rotateX(90deg); transform-origin: 0% 100%; transform: rotateX(90deg); } .btn-8e:active { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); } .btn-8f { -webkit-transform: rotateX(15deg); -moz-transform: rotateX(15deg); -ms-transform: rotateX(15deg); transform: rotateX(15deg); } .btn-8f:after { width: 100%; height: 40%; left: 0; top: 100%; background: #49a7df; -webkit-transform-origin: 0% 0%; -webkit-transform: rotateX(-90deg); -moz-transform-origin: 0% 0%; -moz-transform: rotateX(-90deg); -ms-transform-origin: 0% 0%; -ms-transform: rotateX(-90deg); transform-origin: 0% 0%; transform: rotateX(-90deg); } .btn-8f:active { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); } .btn-8g { background: #ffffff; color: #999; } .btn-8g:active { background: #ffffff; } .btn-8g:after, .btn-8g:before { text-transform: uppercase; width: 100%; height: 100%; position: absolute; left: 0; line-height: 70px; } .btn-8g:after { top: -98%; background: #7aca7c; color: #358337; content: 'It worked!'; -webkit-transform-origin: 0% 100%; -webkit-transform: rotateX(90deg); -moz-transform-origin: 0% 100%; -moz-transform: rotateX(90deg); -ms-transform-origin: 0% 100%; -ms-transform: rotateX(90deg); transform-origin: 0% 100%; transform: rotateX(90deg); } .btn-8g:before { top: 100%; background: #e96a6a; color: #a33a3a; content: 'Error!'; font-weight: 700; font-family: 'Lato', Calibri, Arial, sans-serif; -webkit-transform-origin: 0% 0%; -webkit-transform: rotateX(-90deg); -moz-transform-origin: 0% 0%; -moz-transform: rotateX(-90deg); -ms-transform-origin: 0% 0%; -ms-transform: rotateX(-90deg); transform-origin: 0% 0%; transform: rotateX(-90deg); } .btn-8g.btn-success3d { background: #aaa; -webkit-transform-origin: 50% 100%; -webkit-transform: rotateX(-90deg) translateY(100%); -moz-transform-origin: 50% 100%; -moz-transform: rotateX(-90deg) translateY(100%); -ms-transform-origin: 50% 100%; -ms-transform: rotateX(-90deg) translateY(100%); transform-origin: 50% 100%; transform: rotateX(-90deg) translateY(100%); } .btn-8g.btn-error3d { background: #aaa; -webkit-transform-origin: 50% 0%; -webkit-transform: rotateX(90deg) translateY(-100%); -moz-transform-origin: 50% 0%; -moz-transform: rotateX(90deg) translateY(-100%); -ms-transform-origin: 50% 0%; -ms-transform: rotateX(90deg) translateY(-100%); transform-origin: 50% 0%; transform: rotateX(90deg) translateY(-100%); } /* :: Dragula CSS */ .dragula-example { margin-bottom: 6px; } .sortable-example { margin: 0; padding: 0; } .sortable-example li { padding: 6px 10px; margin-bottom: 8px; list-style: none; } .sortable-example-inline li { margin-right: 8px; display: inline-block; } [dir=rtl] .sortable-example-inline li { margin-right: 0; margin-left: 8px; } #sortable-3 { width: 220px; } #sortable-3 img { margin-right: 8px; margin-bottom: 8px; width: 100px; height: 100px; border-radius: 999px; display: block; float: left; } [dir=rtl] #sortable-3 img { margin-right: 0; margin-left: 8px; float: right; } /* :: Dragula Card CSS */ .draggable-cards:hover { cursor: pointer; } .draggable-cards .card-moved .card { background: #137eff; } .card-moved .card p, .card-moved .card a, .card-moved .card h4, .card-moved .card h3 { color: #fff !important; } /* :: Google Chart CSS */ #chart_google, #chart_google_c, #chart_pie, #chart_donut, #chart_3dpie, #chart_diffpie, #chart_line, #chart_area, #chart_combo { width: 100%; height: 400px; font-size: 12px; } /* :: Chart CSS */ #simplecolumnchartdiv, #columnlinemixchartdiv, #clusteredbarchartdiv, #cylinderchartdiv { width: 100%; height: 500px; font-size: 11px; } #clusteredbarchartdiv .amcharts-chart-div a { color: #ffffff !important; font-size: 11px !important; opacity: 1 !important; top: 40px !important; } #valueaxischartdiv, #changingcolorchartdiv, #zoomablechartdiv { width: 100%; height: 500px; font-size: 11px; } #smoothchartdiv, #differentcolorchartdiv { width: 100%; height: 400px; font-size: 11px; } #polarchartdiv, #radarchartdiv, #polarscatterchartdiv, #gaugechartdiv { width: 100%; height: 400px; font-size: 11px; } .widget-chart-js { height: 300px; } #chartdiv { width: 100%; height: 300px; } .chartDiv-2 { width: 100%; height: 450px; } #chartdiv-donut { width: 100%; height: 300px; } #lineChart2 { width: 100%; } #Earnings-chart { height: 330px; } .amcharts-zoom-out-label { opacity: 0; } image.amcharts-zoom-out-image { opacity: 0; } #world-low { height: 400px; } .highchart-pie1 { height: 300px; width: 100%; } #chart-highchart-bar1 { height: 500px; width: 100%; } .chart-sale { height: 200px; width: 200px; margin: 0 auto; } .amcharts-main-div a { opacity: 0 !important; } .Stackchart { height: 300px; } .lineAreaDashboard { height: 350px; } .ChartShadow.BarChart { height: 250px; } .ChartShadow { height: 350px; } .WidgetlineChart { height: 350px; } .ChartShadow.BarChart.barChart1 { height: 250px; } .chartSummary { height: 300px; } .bar-chart2 { height: 350px; } .device-chart { width: 300px; height: 300px; margin: 0 auto; } @media only screen and (max-width: 767px) { .device-chart { width: 220px; height: 220px; } } .bar-chart3 { height: 300px; } .world-low { height: 300px; } .Stackchart { height: 250px; } .chartSummary-area span { font-size: 12px; } .chartPageVisit { height: 320px; } .page-visitors-chart-area span { font-size: 12px; } .flot-chart-content { width: 100%; height: 100%; } .flot-chart { width: 100%; position: relative; max-width: none; height: 400px; } #lineChartArea, #lineScattered, #usingEvents, #bipolar, #smileAnimation, #horizontalBar, #peakCircles, #pieChart, #overlapBarMobile, #extreamResponsive, #gaugeChart, #lineInterpolation, #multiLineLabels, #seriesOverrides, #tackedBar, #pathAnimation, #labelPlacement, #barChart, #pieChartLabels, #distributedSeries, #donutFill, #gaugeChartFill { height: 300px; width: 100%; } #line-chart-example { height: 320px; width: 100%; } /* :: Timeline CSS */ .timeline { position: relative; } .timeline::before { content: ""; position: absolute; top: 0; left: 50%; height: 100%; border-right: 2px dashed #5867dd; } @media only screen and (max-width: 767px) { .timeline::before { display: none; } } .timeline-block:first-child { margin-top: 0; } .timeline-block { position: relative; margin: 2em 0; } .timeline-step { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .timeline-content { width: 38%; } @media only screen and (max-width: 767px) { .timeline-content { width: 100%; } } .timeline-content { margin-left: 60px; margin-right: 30px; position: relative; top: -6px; border: 2px solid #5867dd; padding: 15px; border-radius: 2px; } @media only screen and (max-width: 767px) { .timeline-content { margin-left: 0; margin-right: 0; } } .timeline-block::after { content: ""; display: table; clear: both; } .timeline-block:nth-child(2n) .timeline-content { float: right; } .timeline-step { position: absolute; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; width: 33px; height: 33px; border-radius: 50%; background: #fff; border: 2px solid #5867dd; text-align: center; font-size: 1rem; font-weight: 600; z-index: 1; } @media only screen and (max-width: 767px) { .timeline-step { display: none; } } .timeline-step { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } /* :: Invoice CSS */ .invoice-content span { font-size: 14px; } /* :: Calendar CSS */ .fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead { border-color: #e1eaea; padding: 4px; } .btn-group-colors > .btn { cursor: pointer; } .btn-group-colors > .btn::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 28px; color: #fff; -webkit-transform: scale(0); transform: scale(0); opacity: 0; content: "\4e"; font-family: ElegantIcons; font-size: 12px; -webkit-transition: opacity .2s, -webkit-transform .2s; transition: opacity .2s, -webkit-transform .2s; transition: transform .2s, opacity .2s; transition: transform .2s, opacity .2s, -webkit-transform .2s; } .btn-group-colors > .btn.active::before { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .calendar-icon i { line-height: 2.5; color: #0168fa; } .calendar-title { line-height: 1; } .fullcalendar-btn-prev.btn.btn-sm.btn-neutral, .fullcalendar-btn-next.btn.btn-sm.btn-neutral { background-color: #5867dd; color: #ffffff; font-size: 17px; line-height: 0.9; border-radius: 2px; margin-right: 3px; } .btn.btn-sm.btn-neutral { background-color: #5867dd; color: #ffffff; line-height: 1.3; border-radius: 2px; } .btn-group-colors > .btn { -webkit-box-shadow: none; box-shadow: none; width: 30px; height: 30px; padding: 0; margin-right: .5rem; margin-bottom: .25rem; position: relative; } .fc-event { position: relative; display: block; font-size: 13px; border: none; } .fc-event .fc-title { color: #ffffff; } .fc-unthemed td.fc-today span { font-weight: 700; color: #2d3748; } .calendar--area .btn-group-sm > .btn, .calendar--area .btn-sm { padding: .8rem 1.25rem; } @media only screen and (max-width: 767px) { .calendar--area .fullcalendar-btn-prev.btn.btn-sm.btn-neutral, .calendar--area .fullcalendar-btn-next.btn.btn-sm.btn-neutral { margin-bottom: 10px; } } .calendar--area .btn.btn-sm.btn-neutral { margin-bottom: 10px; } .mini-cal { background: #ffffff; } #calTitle button { width: 35px; height: 35px; line-height: 35px; } #calTitle button { line-height: 26px; } #calTbody .a-date { color: #2d3748; font-weight: 500; } #calTbody .a-date > span { font-weight: 600; font-size: 12px; } #calThead > div { color: #2d3748; font-weight: 500; } #monthYear { color: #2d3748; font-weight: 600; } #calTitle button { background: #5867dd; } #calTitle button:hover { background: #5867dd; } #calTitle button svg { width: 25px; height: 25px; } #calTbody .a-date.current { border-color: #5867dd; background-color: #5867dd; border-radius: 2px; } .a-date.current span { color: #fff; } #calTbody .a-date:active, #calTbody .a-date:focus { background-color: #5867dd; border-radius: 2px; color: #fff; } #calTbody .a-date { padding: 9px; } /* :: Slider CSS */ .owl-carousel.full-width .owl-nav { position: absolute; top: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100%; margin-top: 0; left: 0; } .owl-carousel.full-width .owl-nav .owl-prev { left: 0; right: auto; } .owl-carousel.full-width .owl-nav .owl-next { right: 0; left: auto; } .owl-dots { margin-top: 10px; } .range-slider-area .demo__buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .range-slider-area .demo__buttons .button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 50px; padding: 0 1.5rem; margin: 0 5px; box-sizing: border-box; border-radius: 3px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); -webkit-transition: background-color 190ms linear; -o-transition: background-color 190ms linear; transition: background-color 190ms linear; border: none; cursor: pointer; } .range-slider-area .demo__buttons .button.small { height: 2.5rem; padding: 0 .5rem; margin: 0; } .irs--flat .irs-bar { top: 25px; height: 6px; background-color: #fd397a; } .irs--flat .irs-line { top: 25px; height: 6px; background-color: #e1e4e9; border-radius: 4px; } .irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single { background-color: #fd397a; } .irs--flat .irs-handle > i:first-child { background-color: #fd397a; } .irs--flat .irs-from::before, .irs--flat .irs-to::before, .irs--flat .irs-single::before { border-top-color: #fd397a; } /* :: Gallery CSS */ .gallery--single-content { position: relative; z-index: 1; width: 100%; overflow: hidden; } .gallery--single-content .gallery--image { position: relative; z-index: 1; overflow: hidden; border-radius: 3px; } .gallery--single-content .gallery--image img { width: 100%; -webkit-transition-duration: 1500ms; -o-transition-duration: 1500ms; transition-duration: 1500ms; border-radius: 3px; } .gallery--single-content .gallery_service_text { padding: 25px 30px 30px; } .gallery--single-content .gallery_service_text h6 { font-size: 14px; margin-bottom: 0; } .single-gallery--item { position: relative; z-index: 1; } .single-gallery--item .gallery-thumb { position: relative; z-index: 1; padding: 15px; } .single-gallery--item .gallery-thumb img { border-radius: 10px; } .single-gallery--item::after { position: absolute; content: ''; right: 1rem; bottom: -1rem; left: 1.5rem; top: 1.5rem; background: -o-linear-gradient(40deg, #6e00ff, #b0f) !important; background: linear-gradient(50deg, #6e00ff, #b0f) !important; border-radius: 10px; z-index: -1; -webkit-transition: 0.3s ease; transition: 0.3s ease; } .single-gallery--item:hover::after, .single-gallery--item:focus::after, .single-gallery--item:active::after { left: -0.5rem; right: -0.5rem; top: -0.5rem; bottom: -0.5rem; } .single-gallery--item .gallery-text-area { margin-left: 3.5rem; } .single-gallery--item .gallery-text-area .gallery-icon a { font-size: 18px; color: #ffffff; margin-right: 8px; } .single_gallery_item { overflow: hidden; margin-bottom: 30px; } .single_gallery_item .gallery-content { position: relative; z-index: 1; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; border: 5px solid #e1eaea; } .single_gallery_item .gallery-content .gallery-hover-overlay { position: absolute; z-index: 22; bottom: -200px; left: 0; background-color: #5867dd; opacity: 0; height: 100%; width: 100%; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .single_gallery_item .gallery-content .gallery-hover-overlay .port-more-view { position: absolute; z-index: 99; bottom: 30px; left: 30px; } .single_gallery_item .gallery-content .gallery-hover-overlay .port-more-view .port-icon a { font-size: 18px; color: #ffffff; margin-right: 15px; } .single_gallery_item:hover .gallery-content { border-color: transparent; } .single_gallery_item:hover .gallery-content img { width: 100%; } .single_gallery_item:hover .gallery-content .gallery-hover-overlay { opacity: 0.95; bottom: 0; } .our-gallery-area .portfolio-menu button { line-height: 1; background-color: transparent; font-size: 15px; font-weight: 500; text-transform: uppercase; padding: 10px 25px; border-radius: 30px; margin: 5px; color: #5867dd; border: 1px solid #fff; -webkit-transition-duration: 400ms; -o-transition-duration: 400ms; transition-duration: 400ms; } .our-gallery-area .portfolio-menu button.active { border-color: #5867dd; } .our-gallery-area .single_gallery_item { margin-bottom: 50px; overflow: hidden; } .our-gallery-area .single_gallery_item .gallery-content { position: relative; z-index: 1; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .our-gallery-area .single_gallery_item .gallery-content .gallery-hover-overlay { position: absolute; z-index: 22; top: -300px; left: 0; background-color: #fd397a; opacity: 0; height: 100%; width: 100%; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .our-gallery-area .single_gallery_item .gallery-content .gallery-hover-overlay .port-more-view { position: absolute; z-index: 99; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .our-gallery-area .single_gallery_item .gallery-content .gallery-hover-overlay .port-more-view .portfo-icon a { font-size: 24px; color: #ffffff; margin: 0 5px; border-radius: 50%; display: inline-block; text-align: center; line-height: 40px; } .our-gallery-area .single_gallery_item:hover .gallery-content .gallery-hover-overlay { opacity: 0.95; top: 0; } .our-gallery-area .port-text { text-align: center; margin-top: 20px; } .our-gallery-area .port-text h4 { font-size: 18px; } .our-gallery-area .port-text h6 { font-size: 14px; margin-bottom: 0; font-weight: 400; color: #2d3748; } /* :: Chat CSS */ .chat.chat-app { border: 1px solid #edf2f9; padding: 0px; margin: 0px; } .chat.chat-app .chat-list { border-right: 1px solid #edf2f9; background-color: #fff; } .chat-clint { -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; width: 40px; max-width: 40px; border-radius: 50%; } .chat-active { position: relative; z-index: 1; } .chat-active::after { position: absolute; content: ""; z-index: 33; background-color: #ff9430; height: 10px; width: 10px; border-radius: 50%; top: 0; right: 0; } .chat.chat-app .chat-list .chat-user-tool { padding: 0px 25px; height: 50px; border-bottom: 1px solid #edf2f9; } .chat.chat-app .chat-list .chat-user-tool .search-icon { color: rgba(114, 132, 154, 0.4); } .chat.chat-app .chat-list .chat-user-tool > input { border: 0px; color: #2a2a2a; line-height: 50px; background-color: transparent; font-size: 15px; width: 70%; } .chat.chat-app .chat-list .chat-user-list .chat-list-item { padding: 15px; display: block; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; } .chat.chat-app .chat-list .chat-user-list .chat-list-item:hover { background-color: #ffffff; } .chat.chat-app .chat-content .conversation { height: 100%; } .chat .conversation .conversation-wrapper { position: relative; height: 100%; } .chat .conversation .conversation-wrapper .conversation-header { position: relative; height: 75px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.94); } .chat .conversation .conversation-wrapper .conversation-body { padding: 15px 25px; position: relative; width: 100%; } .message-desc { margin-bottom: 20px; } .chat .conversation .conversation-wrapper .conversation-body .chat-text { font-size: 14px; color: #ffffff; padding: 6px 12px; border-radius: 3px; } .chat.chat-app .chat-content .conversation-footer { position: absolute; height: 50px; display: flex; justify-content: space-between; width: 100%; bottom: 0px; } .chat .conversation .conversation-wrapper .conversation-footer { position: relative; background-color: #fff; border: 1px solid #e1eaea; height: 100%; margin-top: 15px; padding: 0 15px; } .chat-user-tool { border: 1px solid #e1eaea; margin-bottom: 15px; } .chat.chat-app .chat-content .conversation-footer .chat-input { border: 0px; line-height: 75px; outline: 0; width: 100%; max-width: 400px; } @media only screen and (max-width: 767px) { .chat.chat-app .chat-content .conversation-footer .chat-input { max-width: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .chat.chat-app .chat-content .conversation-footer .chat-input { max-width: 200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .chat.chat-app .chat-content .conversation-footer .chat-input { max-width: 200px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .chat.chat-app .chat-content .conversation-footer .chat-input { max-width: 150px; } } .bg-dot { width: 8px; height: 8px; border-radius: 50px; padding: 0px; background-color: #00c9a7; color: #fff; display: inline-block; } .chat-body-thumb { width: 300px; height: auto; } .chat-body-gray { background-color: #fff; } .chat-blue-bg { background-color: rgba(63, 135, 245, 0.15); } .text-blue-chat { color: #0168fa; } .chat-box-img { -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; width: 40px; max-width: 40px; border-color: #5867dd; border-radius: 50%; } /* :: Form Wizard CSS */ .wizard { display: block; width: 100%; overflow: hidden; } .wizard a { outline: 0; } .wizard-form-area ul li a { background: #5867dd; color: #ffffff; display: inline-block; height: 45px; min-width: 150px; line-height: 45px; text-align: center; border-radius: 5px; } @media only screen and (max-width: 767px) { .wizard-form-area ul li a { min-width: 100px; } } .wizard ul { list-style: none; padding: 0; margin: 0; } .wizard ul > li { display: block; padding: 0; } .wizard > .steps { position: relative; display: block; width: 100%; } .submit-text { display: inline-block; text-transform: capitalize; } .wizard > .steps .current-info { position: absolute; left: -999em; } .wizard > .steps .number { font-size: 0.875rem; } .wizard > .steps > ul > li { float: left; text-align: center; } @media (max-width: 767px) { .wizard > .steps > ul > li { width: 50%; } } .wizard > .steps a { width: auto; margin: 0 5px 15px; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 14px; font-weight: 500; } @media only screen and (max-width: 767px) { .wizard > .steps a { font-size: 12px; } } .wizard > .steps .disabled a { background: #ffffff; color: #434a54; cursor: default; border: 1px solid #5867dd; } .wizard > .steps .disabled a:hover { background: #ffffff; color: #434a54; cursor: default; border: 1px solid #5867dd; } .wizard > .steps .disabled a:active { background: #ffffff; color: #434a54; cursor: default; border: 1px solid #5867dd; } .wizard > .steps .current a { background: #5867dd; color: #ffffff; cursor: default; } .wizard > .steps .current a:hover { background: #5867dd; color: #ffffff; cursor: default; } .wizard > .steps .current a:active { background: #5867dd; color: #ffffff; cursor: default; } .wizard > .steps .done a { background: #5867dd; color: #ffffff; cursor: default; } .wizard > .steps .done a:hover { background: #5867dd; color: #ffffff; cursor: default; } .wizard > .steps .done a:active { background: #ffffff; color: #434a54; cursor: default; border: 1px solid #5867dd; } .wizard > .steps .error a { background: #ff4747; color: #ffffff; } .wizard > .steps .error a:hover { background: #ff4747; color: #ffffff; } .wizard > .steps .error a:active { background: #ff4747; color: #ffffff; } .wizard > .content { background: #ffffff; display: block; margin: 5px; min-height: 34em; overflow: hidden; position: relative; width: auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #e1eaea; } .wizard > .content > .title { position: absolute; left: -999em; } .wizard > .content > .body { float: left; position: absolute; width: 100%; height: 100%; padding: 30px; } @media only screen and (max-width: 767px) { .wizard > .content > .body { padding: 15px; } } .wizard > .content > .body ul { list-style: disc; } .wizard > .content > .body ul > li { display: list-item; } .wizard > .content > .body > iframe { border: 0 none; width: 100%; height: 100%; } .wizard > .content > .body input { display: block; border: 1px solid #e1eaea; font-size: 14px; height: 40px; } .wizard > .content > .body input[type="checkbox"] { display: none; } .wizard > .content > .body input.error { background: #fbe3e4; border: 1px solid #ffadad; color: #ff4747; } .wizard > .content > .body label { display: inline-block; margin-bottom: 0.5em; } .wizard > .content > .body label.error { color: #ff4747; display: inline-block; margin-left: 1.5em; } .wizard > .actions { padding-top: 20px; position: relative; display: block; text-align: right; width: 100%; } .wizard > .actions > ul { display: inline-block; text-align: right; } .wizard > .actions > ul > li { float: left; margin: 0 0.5em; } .wizard.vertical > .steps { display: inline; float: left; width: 15%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .wizard.vertical > .steps { width: 30%; } } @media (max-width: 767px) { .wizard.vertical > .steps { width: 42%; } } .wizard.vertical > .steps > ul > li { float: none; width: 100%; text-align: left; } .wizard.vertical > .content { display: inline; float: left; margin: 0 2.5% 0.5em 2.5%; width: 80%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .wizard.vertical > .content { width: 70%; } } @media (max-width: 767px) { .wizard.vertical > .content { width: 52%; } } .wizard.vertical > .actions { display: inline; float: right; margin: 0 2.5%; width: 95%; } @media (max-width: 767px) { .wizard.vertical > .actions { margin: 0; width: 100%; } } .wizard.vertical > .actions > ul > li { margin: 0 0 0 1em; } .tabcontrol { display: block; width: 100%; overflow: hidden; } .tabcontrol a { outline: 0; } .tabcontrol ul { list-style: none; padding: 0; margin: 0; } .tabcontrol ul > li { display: block; padding: 0; } .tabcontrol > .steps { position: relative; display: block; width: 100%; } .tabcontrol > .steps .current-info { position: absolute; left: -999em; } .tabcontrol > .steps > ul { position: relative; margin: 6px 0 0 0; top: 1px; z-index: 1; } .tabcontrol > .steps > ul > li { float: left; margin: 5px 2px 0 0; padding: 1px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .tabcontrol > .steps > ul > li:hover { background: #edecec; border: 1px solid #e1eaea; padding: 0; } .tabcontrol > .steps > ul > li > a { color: #aab2bd; display: inline-block; border: 0 none; margin: 0; padding: 10px 30px; text-decoration: none; } .tabcontrol > .steps > ul > li > a:hover { text-decoration: none; } .tabcontrol > .steps > ul > li.current { background: #ffffff; border: 1px solid #e1eaea; border-bottom: 0 none; padding: 0 0 1px 0; margin-top: 0; } .tabcontrol > .steps > ul > li.current > a { padding: 15px 30px 10px 30px; } .tabcontrol > .content { position: relative; display: inline-block; width: 100%; height: 35em; overflow: hidden; border-top: 1px solid #e1eaea; padding-top: 20px; } .tabcontrol > .content > .title { position: absolute; left: -999em; } .tabcontrol > .content > .body { float: left; position: absolute; width: 95%; height: 95%; padding: 2.5%; } .tabcontrol > .content > .body ul { list-style: disc; } .tabcontrol > .content > .body ul > li { display: list-item; } #steps-uid-0-p-3 [type="checkbox"] + span:not(.lever)::before, #steps-uid-0-p-3 [type="checkbox"]:not(.filled-in) + span:not(.lever)::after, #steps-uid-1-p-2 [type="checkbox"] + span:not(.lever)::before, #steps-uid-1-p-2 [type="checkbox"]:not(.filled-in) + span:not(.lever)::after { top: -1px; } /* :: Form CSS */ .form-group label { font-size: 0.874rem; } .form-control { border-color: #dbdbdb; } .form-control:focus { border-color: #5867dd; box-shadow: none; } .input-group, .asColorPicker-wrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; width: 100%; } .form-group .file-upload-default { display: none; } .success-box { margin: 50px 0; padding: 10px 10px; border: 1px solid #e1eaea; background: #f2f4f8; } .success-box div { vertical-align: top; display: inline-block; color: #777; } .success-box img { margin-right: 10px; display: inline-block; vertical-align: top; } #example-vertical-wizard h3 { font-size: 20px; } #demo { z-index: 99999999999 !important; position: relative; } .input-form-area .nice-select { width: 80%; border-radius: 0; height: auto; } .input-form-area .form-control { height: auto; } .input-group-text { background-color: #fff; } .typeahead-form-area .twitter-typeahead { width: 100%; } .typeahead-form-area .typeahead.form-control.tt-input { font-size: 14px; } .typeahead-form-area .tt-menu { background-color: #f8f8f8; padding: 15px; -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.3); box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.3); } .typeahead-form-area .tt-menu .tt-suggestion.tt-selectable { font-size: 14px; margin-bottom: 10px; color: #2d3748; font-weight: 300; cursor: pointer; } .layout-form-area .nice-select { height: calc(2.25rem + 2px); line-height: calc(2.25rem + 2px); } .form-check-input { margin-left: 0; } div.tagsinput span.tag { border: 1px solid #5867dd; padding: 5px 10px; background: #5867dd; color: #ffffff; font-family: inherit; font-size: 13px; } div.tagsinput { padding: 15px 15px 10px; border-color: #e1eaea; } div.tagsinput span.tag { color: #ffffff; font-size: 13px; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #718096; line-height: 28px; font-size: 14px; } .select2-container .select2-selection--single { height: 35px; padding: 3px 10px; } .select2-container--default .select2-selection--single { border: 1px solid #e1eaea; border-radius: 3px; } .select2-container--default .select2-selection--multiple { border: 1px solid #e1eaea; border-radius: 3px; } .select2-container--default .select2-selection--single, .select2-container--default .select2-dropdown, .select2-container--default .select2-selection--multiple { border-color: #e1eaea; } .form-control, select, .email-compose-fields .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--single .select2-search__field, .typeahead, .tt-query, .tt-hint { border: 1px solid #e1eaea; font-weight: 400; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #5867dd; border: 1px solid #5867dd; color: #fff; font-size: 14px; } .datepicker table tr td span.focused, .datepicker table tr td span:hover, .datepicker table tr td.day.focused, .datepicker table tr td.day:hover { background: #5867dd; color: #fff; } .bootstrap-touchspin .input-group-btn-vertical { z-index: 5; } .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 .cr { cursor: pointer; } .checkbox input[type="checkbox"]:checked + .cr::before { background: #5867dd; border-color: #5867dd; color: #fff; } .checkbox input[type="checkbox"] + .cr::before { content: "\4e"; width: 22px; height: 22px; display: inline-block; margin-right: 10px; border: 2px solid #5867dd; border-radius: 3px; font-size: 15px; font-family: ElegantIcons; font-weight: 400; line-height: 19px; vertical-align: bottom; text-align: center; background: #fff; color: transparent; cursor: pointer; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .checkbox.checkbox-primary input[type="checkbox"]:checked + .cr::before { background: #04a9f5; border-color: #04a9f5; color: #fff; } .checkbox.checkbox-danger input[type="checkbox"]:checked + .cr::before { background: #fd397a; border-color: #fd397a; color: #fff; } .stacked-form-area input[type=text], .stacked-form-area select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #e1eaea; border-radius: 4px; box-sizing: border-box; } .contact-form-area { /* Style inputs with type="text", select elements and textareas */ } .contact-form-area input[type=text], .contact-form-area select, .contact-form-area textarea { width: 100%; padding: 10px; border: 1px solid #e1eaea; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } .new-checkbox { /* The switch - the box around the slider */ /* Hide default HTML checkbox */ /* The slider */ /* Rounded sliders */ } .new-checkbox .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .new-checkbox .switch input { opacity: 0; width: 0; height: 0; } .new-checkbox .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .new-checkbox .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: #ffffff; -webkit-transition: .4s; transition: .4s; } .new-checkbox input:checked + .slider { background-color: #5867dd; } .new-checkbox input:focus + .slider { box-shadow: 0 0 1px #5867dd; } .new-checkbox input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .new-checkbox .slider.round { border-radius: 34px; } .new-checkbox .slider.round:before { border-radius: 50%; } .animated-search-box { /* When the input field gets focus, change its width to 100% */ } .animated-search-box input[type=text] { width: 130px; border: 2px solid #e1eaea; padding: 10px 15px; border-radius: 5px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } .animated-search-box input[type=text]:focus { width: 100%; } .fullscreen-search-box { /* The overlay effect with black background */ /* The content */ /* Close button */ /* Style the search field */ /* Style the submit button */ } .fullscreen-search-box .overlay { height: 100%; width: 100%; display: none; position: fixed; z-index: 9999; top: 0; left: 0; background-color: black; background-color: rgba(0, 0, 0, 0.9); -webkit-transition: .4s; transition: .4s; } .fullscreen-search-box .overlay-content { position: relative; top: 46%; width: 80%; text-align: center; margin-top: 30px; margin: auto; -webkit-transition: .4s; transition: .4s; } .fullscreen-search-box .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: white; -webkit-transition: .4s; transition: .4s; } .fullscreen-search-box .overlay .closebtn:hover { color: #ccc; -webkit-transition: .4s; transition: .4s; } .fullscreen-search-box .overlay input[type=text] { padding: 15px; font-size: 17px; border: none; float: left; width: 80%; background: white; -webkit-transition: .4s; transition: .4s; } .fullscreen-search-box .overlay input[type=text]:hover { background: #f1f1f1; } .fullscreen-search-box .overlay button { float: left; width: 20%; padding: 15px; background: #5867dd; font-size: 16px; color: #ffffff; border: none; cursor: pointer; -webkit-transition: .4s; transition: .4s; } .fullscreen-search-box .overlay button:hover { background-color: #5578eb; } .input-group-text { background-color: #f3f6f7; border: 1px solid #e1eaea; } .form-group label { color: #2d3748; } .custom-input-file { width: .1px; height: .1px; opacity: 0; outline: none; overflow: hidden; position: absolute; z-index: -1; } .custom-input-file + label { text-overflow: ellipsis; white-space: nowrap; cursor: pointer; display: block; overflow: hidden; padding: .625rem 1.25rem; border: 1px solid #e0e6ed; border-radius: .25rem; color: #8492a6; background-color: #fff; outline: none; margin: 0; } .custom-input-file + label i { font-size: 20px; vertical-align: middle; fill: currentColor; margin-top: -.25em; margin-right: .5em; } .custom-input-file--2 + label { color: #fff; border-color: #6e00ff; background: #6e00ff; } .input-group-append .btn, .input-group-prepend .btn { height: 40px; } /* :: Login CSS */ .login-area { position: relative; z-index: 1; } .login-area .form-control { height: 50px; font-size: 12px; font-weight: 400; } .middle-box { padding-top: 15px; padding-bottom: 15px; } .login-icon a { color: #ffffff; background-color: #5867dd; height: 35px; width: 35px; display: inline-block; border-radius: 50%; line-height: 37px; color: #ffffff; font-size: 12px; text-align: center; margin: 0 5px; transition-duration: 500ms; } .login-icon a:hover, .login-icon a:focus { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .form-control.register { height: 50px; font-size: 12px; } .login-form, .register-form { position: relative; z-index: 1; } .login-form [type="checkbox"] + span:not(.lever)::before, .login-form [type="checkbox"]:not(.filled-in) + span:not(.lever)::after, .register-form [type="checkbox"] + span:not(.lever)::before, .register-form [type="checkbox"]:not(.filled-in) + span:not(.lever)::after { top: 0; } .login-area-2 { position: relative; z-index: 22; } .login-area-2 .middle-box { position: relative; z-index: 9999; } .login-area-2 .middle-box h3 { font-size: 30px; } .login-area-2 .middle-box .form-control { background-color: transparent; border-radius: 4px; color: #fff; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.3); } .card-body-login img { max-height: 30px; } .middle-box input[type="checkbox"], .middle-box input[type="radio"] { display: none; } .middle-box [type="checkbox"] + span:not(.lever) { position: relative; padding-left: 25px; cursor: pointer; display: inline-block; height: 13px; line-height: 25px; font-size: 1rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .middle-box [type="checkbox"] + span:not(.lever)::before, .middle-box [type="checkbox"]:not(.filled-in) + span:not(.lever)::after { content: ''; position: absolute; top: 3px; left: 0; width: 18px; height: 18px; z-index: 0; border: 2px solid #777; border-radius: 1px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .middle-box [type="checkbox"]:not(.filled-in) + span:not(.lever)::after { border: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .middle-box [type="checkbox"] + span:not(.lever)::before, .middle-box [type="checkbox"]:not(.filled-in) + span:not(.lever)::after { content: ''; position: absolute; top: 3px; left: 0; width: 18px; height: 18px; z-index: 0; border: 2px solid #5867dd; border-radius: 1px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .middle-box .widgets-todo-list-area .todo-list li [type="checkbox"]:checked + span:not(.lever)::before { border-right: 2px solid #5867dd; border-bottom: 2px solid #5867dd; } .middle-box [type="checkbox"]:checked + span:not(.lever)::before { top: -4px; left: -5px; width: 12px; height: 22px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #5867dd; border-bottom: 2px solid #5867dd; -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } /* ---- Particles Css ---- */ #particles-js { height: 100%; width: 100%; position: relative; z-index: 1; } #particles-js canvas.particles-js-canvas-el { position: absolute !important; top: 0 !important; left: 0 !important; z-index: -1 !important; } .cube { position: absolute; top: 80vh; left: 45vw; width: 10px; height: 10px; border: solid 1px #4354d9; transform-origin: top left; transform: scale(0) rotate(0deg) translate(-50%, -50%); animation: cube 7s ease-in forwards infinite; } .cube:nth-child(2n) { border-color: #717ee2; } .cube:nth-child(2) { animation-delay: 1s; left: 25vw; top: 40vh; border-color: #fd397a; } .cube:nth-child(3) { animation-delay: 2s; left: 75vw; top: 50vh; border-color: #1dc9b7; } .cube:nth-child(4) { animation-delay: 4s; left: 90vw; top: 10vh; border-color: #ffb822; } .cube:nth-child(5) { animation-delay: 6s; left: 10vw; top: 85vh; border-color: #5578eb; } .cube:nth-child(6) { animation-delay: 8s; left: 50vw; top: 10vh; } @keyframes cube { from { transform: scale(0) rotate(0deg) translate(-50%, -50%); opacity: 1; } to { transform: scale(6) rotate(960deg) translate(-50%, -50%); opacity: 0; } } /* :: Todo List CSS */ .widgets-todo-list-area .form-add-todo { position: relative; z-index: 1; } .widgets-todo-list-area .new-todo-item { width: 100%; border: 1px solid #e1eaea; height: 45px; padding: 10px 20px; font-size: 15px; border-radius: 3px; margin-right: 15px; } @media only screen and (max-width: 767px) { .widgets-todo-list-area .new-todo-item { width: 70%; } } .widgets-todo-list-area .add-todo-item { width: 100px; height: 45px; border: none; color: #ffffff; background-color: #5867dd; font-size: 18px; border-radius: 3px; z-index: 10; } .widgets-todo-list-area .todo-list { position: relative; z-index: 1; margin-top: 1.25rem; } .widgets-todo-list-area .todo-list li { -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; position: relative; z-index: 1; padding: 0.4rem 2rem 0.4rem 1rem; border: 1px solid #e1eaea; border-radius: 3px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 15px; font-size: 16px; font-weight: 600; } .widgets-todo-list-area .todo-list li [type="checkbox"]:checked + span:not(.lever)::before { border-right: 2px solid #5867dd; border-bottom: 2px solid #5867dd; } .widgets-todo-list-area .todo-list li label { margin-right: .5rem; } .widgets-todo-list-area .todo-list li .todo-item-delete { position: absolute; top: 50%; right: 1rem; height: 16px; width: 16px; font-size: 16px; color: #5867dd; margin-top: -8px; cursor: pointer; } .widgets-todo-list-area .todo-list li.todo-completed { text-decoration: line-through; border-color: #1dc9b7; } .widgets-todo-list-area .todo-list li.todo-completed .todo-item-delete { color: #fd397a; } .widgets-todo-list-area input[type="checkbox"], .widgets-todo-list-area input[type="radio"] { display: none; } .widgets-todo-list-area [type="checkbox"] + span:not(.lever) { position: relative; padding-left: 25px; cursor: pointer; display: inline-block; height: 13px; line-height: 25px; font-size: 1rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .widgets-todo-list-area [type="checkbox"] + span:not(.lever)::before, .widgets-todo-list-area [type="checkbox"]:not(.filled-in) + span:not(.lever)::after { content: ''; position: absolute; top: 3px; left: 0; width: 18px; height: 18px; z-index: 0; border: 2px solid #777; border-radius: 1px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .widgets-todo-list-area [type="checkbox"]:not(.filled-in) + span:not(.lever)::after { border: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .widgets-todo-list-area [type="checkbox"] + span:not(.lever)::before, .widgets-todo-list-area [type="checkbox"]:not(.filled-in) + span:not(.lever)::after { content: ''; position: absolute; top: 3px; left: 0; width: 18px; height: 18px; z-index: 0; border: 2px solid #5867dd; border-radius: 1px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .widgets-todo-list-area .widgets-todo-list-area .todo-list li [type="checkbox"]:checked + span:not(.lever)::before { border-right: 2px solid #5867dd; border-bottom: 2px solid #5867dd; } .widgets-todo-list-area [type="checkbox"]:checked + span:not(.lever)::before { top: -4px; left: -5px; width: 12px; height: 22px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #5867dd; border-bottom: 2px solid #5867dd; -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .to-do-list .done-task h6, .to-do-list .done-task p, .to-do-list .done-task span { text-decoration: line-through; } .todo--list-area { /* Basic Style */ /* Heading */ /* New Task */ /* Task list */ /* Completed */ /* Edit Task */ } .todo--list-area body { background: #fff; color: #333; font-family: Lato, sans-serif; } .todo--list-area .container { display: block; width: 400px; margin: 100px auto 0; } .todo--list-area ul { margin: 0; padding: 0; } .todo--list-area li * { float: left; } .todo--list-area li, .todo--list-area h3 { clear: both; list-style: none; } .todo--list-area input, .todo--list-area button { outline: none; } .todo--list-area button { background: none; border: 0px; color: #888; font-size: 15px; width: 60px; margin: 10px 0 0; font-family: Lato, sans-serif; cursor: pointer; } .todo--list-area button:hover { color: #333; } .todo--list-area h3, .todo--list-area label[for='new-task'] { color: #333; font-weight: 700; font-size: 15px; border-bottom: 2px solid #333; padding: 30px 0 10px; margin: 0; text-transform: uppercase; } .todo--list-area input[type="text"] { margin: 0; font-size: 18px; line-height: 18px; height: 18px; padding: 10px; border: 1px solid #ddd; background: #fff; border-radius: 6px; font-family: Lato, sans-serif; color: #888; } .todo--list-area input[type="text"]:focus { color: #333; } .todo--list-area label[for='new-task'] { display: block; margin: 0 0 20px; } .todo--list-area input#new-task { float: left; width: 318px; } .todo--list-area p > button:hover { color: #0FC57C; } .todo--list-area li { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; } .todo--list-area li > input[type="checkbox"] { margin: 0 10px; position: relative; top: 15px; } .todo--list-area li > label { font-size: 18px; line-height: 40px; width: 237px; padding: 0 0 0 11px; } .todo--list-area li > input[type="text"] { width: 226px; } .todo--list-area li > .delete:hover { color: #CF2323; } .todo--list-area #completed-tasks label { text-decoration: line-through; color: #888; } .todo--list-area ul li input[type=text] { display: none; } .todo--list-area ul li.editMode input[type=text] { display: block; } .todo--list-area ul li.editMode label { display: none; } /* :: Widget CSS */ .widget-icon { color: #727cf5; font-size: 16px; background-color: rgba(114, 124, 245, 0.25); height: 30px; width: 30px; text-align: center; line-height: 30px; border-radius: 3px; display: inline-block; } .rounded-circle { border-radius: 50% !important; } .conversation-list .odd .chat-avatar { float: right !important; } .conversation-list .odd .ctext-wrap { background-color: #fef5e4; } .conversation-list .odd .conversation-text { float: right !important; margin-right: 12px; text-align: right; width: 70% !important; } .inbox-widget .inbox-item { border-bottom: 1px solid #fff; overflow: hidden; padding: .625rem 0; position: relative; } .inbox-widget .inbox-item .inbox-item-img { display: block; float: left; margin-right: 15px; width: 40px; } .inbox-widget .inbox-item .inbox-item-author { color: #343a40; display: block; margin-bottom: 3px; } .inbox-widget .inbox-item .inbox-item-text { color: #718096; display: block; font-size: .8125rem; margin: 0; } .inbox-widget .inbox-item .inbox-item-date { color: #98a6ad; font-size: .6875rem; position: absolute; right: 5px; top: 10px; } .timeline-alt .timeline-item { position: relative; } .timeline-alt .timeline-item::before { background-color: #f1f3fa; bottom: 0; content: ""; left: 9px; position: absolute; top: 20px; width: 2px; z-index: 0; } .timeline-alt .timeline-item .icon { float: left; height: 20px; width: 20px; border-radius: 50%; border: 2px solid transparent; font-size: 10px; text-align: center; line-height: 16px; background-color: rgba(77, 92, 242, 0.19) !important; } .timeline-alt .timeline-item .timeline-item-info { margin-left: 35px; } .toll-free-box i { position: absolute; left: 0; bottom: -15px; font-size: 4rem; opacity: .4; -webkit-transform: rotate(30deg); transform: rotate(30deg); } .tilebox-one i { position: absolute; right: 1.5rem; font-size: 2rem; opacity: .3; } .message-box .message-widget a .user-thumb img { width: 100%; } .total-earnings-list { position: relative; z-index: 1; } .total-earnings-list li { position: relative; z-index: 1; -webkit-transition-duration: 350ms; -o-transition-duration: 350ms; transition-duration: 350ms; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 25px; } .total-earnings-list li:last-child { margin-bottom: 0; } .total-earnings-list li::after { -webkit-transition-duration: 600ms; -o-transition-duration: 600ms; transition-duration: 600ms; content: ''; position: absolute; width: 3px; height: 100%; background-color: #5867dd; top: 0; left: -20px; z-index: 1; opacity: 0; visibility: hidden; } .total-earnings-list li:hover::after { opacity: 1; visibility: visible; } .total-earnings-list li:hover .author-text h6 { color: #5867dd; } .total-earnings-list .author-info .author-img { -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; width: 40px; max-width: 40px; } .total-earnings-list .author-info .author-img img { border-radius: 50%; } .total-earnings-list .author-text h6 { font-size: 14px; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; font-weight: 700; } @media only screen and (max-width: 767px) { .total-earnings-list .author-text h6 { font-size: 13px; } } .total-earnings-list .author-text p { font-size: 12px; font-weight: 700; } .client-media-content .client-thumb { width: 40px; } .user--media-body h6 { font-size: 14px; } .user--media-body span { font-size: 13px; } /* :: Typography CSS */ .link-btn-typo { margin-bottom: 15px; display: inline-block; } .tpography-unordered ul { margin: 5px; padding: 10px; } .tpography-unordered ul li { list-style: disc; line-height: 1.7; } /* :: Contact CSS */ .member-content-area .member-contact-content .contact-thumb { -webkit-box-flex: 0; -ms-flex: 0 0 50px; flex: 0 0 50px; max-width: 50px; width: 50px; margin-right: 15px; } .member-content-area .member-contact-content .contact-thumb img { border-radius: 50%; } .member-content-area .member-contact-content .member-contact-info { -webkit-box-flex: 0; -ms-flex: 0 0 80%; flex: 0 0 80%; max-width: 80%; width: 80%; } .member-content-area h5 { font-size: 14px; margin-bottom: 0; } .member-content-area .nav { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 10px; } .member-content-area .nav:last-child { margin-bottom: 0; } .member-content-area .nav .nav-item .img-icon { height: 30px; width: 30px; background-color: #5867dd; text-align: center; line-height: 30px; color: #ffffff; border-radius: 50%; margin-right: 10px; font-size: 12px; } .member-content-area .nav .nav-item p { margin-bottom: 0; } .contact-content-area .address-contact-area p { margin-bottom: 10px; color: #343a40; font-size: 16px; } .contact-content-area .address-contact-area p i { display: inline-block; width: 30px; } .contact-content-area .address-contact-area a { display: block; font-size: 16px; margin-bottom: 15px; color: #343a40; } .contact-content-area .address-contact-area a i { width: 30px; display: inline-block; } .contact-content-area .contact-add-icon a { font-size: 14px; margin-right: 10px; } .address-content- { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .address-content- .contact--icon { margin-right: 15px; } .address-content- .contact--icon i { font-size: 22px; } .contact-add-icon.two a { font-size: 12px; height: 35px; width: 35px; border: 2px solid #e1eaea; display: inline-block; line-height: 34px; text-align: center; border-radius: 50%; color: #0168fa; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .contact-add-icon.two a:hover { background-color: #0168fa; color: #ffffff; border-color: #0168fa; } .form-control.contact { border: none; background-color: #f2f4f8; font-size: 12px; padding: 20px; } .map-container.contact-page { width: 100%; height: 420px; } @media only screen and (max-width: 767px) { .map-container.contact-page { height: 270px; } } .map-container.contact-page iframe { width: 100%; height: 100%; border: none; } .single-contact-area { position: relative; z-index: 1; overflow: hidden; } .form-control.contact { background-color: #fff; border-radius: 10px 0 0 35px; } .contact-btn { height: 40px; background-color: #1dc9b7; padding: 0 15px; color: rgba(255, 255, 255, 0.9); border: none; border-radius: 0 35px 4px 0; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .contact-btn:hover { background-color: #5ab2a2; } .warning-title { position: absolute; z-index: 22; top: -120px; right: 30px; -webkit-transition-duration: 600ms; -o-transition-duration: 600ms; transition-duration: 600ms; } .warning-title p { margin-bottom: 0; color: #ffffff; } .single-contact-area:hover .warning-title { top: 30px; } /* :: Pricing Table CSS */ .g-pa-10 { padding: 0.71429rem !important; } .g-brd-gray-light-v5 { border-color: #f7f7f7 !important; } .g-brd-around { border: solid 1px transparent !important; } .g-bg-gray-light-v5 { background-color: #f7f7f7 !important; } .g-pa-30 { padding: 2.14286rem !important; } .g-color-gray-dark-v3 { color: #555 !important; } .g-my-20 { margin-top: 1.42857rem !important; margin-bottom: 1.42857rem !important; } .g-color-primary { color: #72c02c !important; } .g-py-12 { padding-top: 0.85714rem !important; padding-bottom: 0.85714rem !important; } .g-brd-gray-light-v4 { border-color: #eee !important; } .g-brd-bottom { border-bottom: solid 1px transparent !important; } .g-py-60 { padding-top: 4.28571rem !important; padding-bottom: 4.28571rem !important; } .g-brd-bottom { border-bottom: solid 1px transparent !important; } /* :: Data Table CSS */ .pagination-rounded .page-link { border-radius: 30px !important; margin: 0 3px; border: none; } @media only screen and (max-width: 767px) { .pagination-rounded .page-link { margin: 10px 0px; display: block; } } .page-link { position: relative; display: block; padding: .5rem .75rem .3rem .75rem; margin-left: -1px; line-height: 1.25; color: #313a46; background-color: #fff; border: 1px solid #dee2e6; cursor: pointer; } .page-item.active .page-link { z-index: 1; color: #fff; background-color: #5867dd; border-color: #5867dd; } /* :: Web Icons CSS */ .single_icon { padding: 15px; text-align: center; } .single_icon span { font-size: 13px; } .single_icon i { display: block; margin-bottom: 15px; font-size: 26px; color: #232323; } .border { border-color: #e1eaea !important; } .shortcodes_content_area .single_icon { padding: 15px; text-align: center; } .single_icon_thumb { padding: 30px; text-align: center; } .single_icon_thumb span { font-size: 30px; display: block; margin: auto; } .single_icon_thumb code { margin-top: 10px; display: block; font-size: 12px; } .single_icon_thumb h6 { margin-top: 15px; margin-bottom: 0; } .single_icon_area i { font-size: 20px; } /* :: Card CSS */ .single-card-area { border-radius: 10px; } .single-card-area .card-thumb { border-radius: 10px 10px 0 0; } .single-card-area .card-text { padding: 1rem; } .single-card-area .card-text h4 { font-size: 1.25rem; } .single-card-two-area { position: relative; z-index: 1; height: 300px; border-radius: 10px; } .single-card-two-area::after { position: absolute; width: 100%; height: 100%; right: 0; top: 0; content: ""; background-color: rgba(0, 0, 0, 0.5); z-index: -1; border-radius: 10px; } .single-card-two-area .single-card-content .single-card-two-text h4 { color: #ffffff; } .single-card-two-area .single-card-content .single-card-two-text p { font-size: 14px; color: #ffffff; } .single-card-three-area { padding: 30px; text-align: center; background-color: #ffffff; } .single-card-three-area .icon { height: 70px; width: 70px; line-height: 72px; font-size: 26px; margin: auto; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; border-radius: 50%; background-color: #f2f4f8; } .single-card-three-area h4 { margin-top: 15px; } .single-card-three-area p { margin-bottom: 0; } .single-card-three-area:hover .icon { background-color: #5867dd; color: #ffffff; } .card- { background: #ffffff; } .border-info- { border: #17a2b8 !important; } .border-danger- { border: 1px solid #f1536e !important; } .border-primary- { border: 1px solid #2466fd !important; } .medium-card-area .icon-thumb { width: 60px; height: 60px; margin: auto; } .medium-card-area .icon-thumb img { border-radius: 5px; } /* :: Cart CSS */ .cart-area .table .thead-light th { color: #6c757d; background-color: #f1f3fa; border-color: #e3eaef; } .cart-area .select2-container .select2-selection--single { border: 1px solid #dee2e6; height: calc(2.2125rem + 2px); background-color: #fff; outline: 0; } .cart-area .select2-container { width: 100% !important; } .cart-area .select2-container { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; } .cart-area .select2-container .select2-selection--single { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; height: 28px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .cart-area .select2-container--default .select2-selection--single { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; } .cart-area .select2-container .select2-selection--single .select2-selection__rendered { line-height: 36px; padding-left: 12px; color: #6c757d; } .cart-area .select2-container .select2-selection--single .select2-selection__arrow { height: 34px; width: 34px; right: 3px; } .cart-area .select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; } .cart-area .select2-container .select2-selection--single .select2-selection__arrow b { border-color: #98a6ad transparent transparent transparent; border-width: 6px 6px 0 6px; } .cart-area .form-control { display: inline-block; } .check-out-area .form-control { font-size: 13px; } .check-out-area .input-group-text { font-size: 13px; } /* :: Product CSS */ .product-thumb { width: 60px; } .product-thumb-2 { width: 300px; margin: auto; } .progress-w-percent .progress { width: calc(100% - 50px); float: left; margin-top: 8px; } .progress-w-percent .progress-value { width: 40px; float: right; text-align: right; line-height: 20px; } table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child::before { -webkit-box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.12); background-color: #0acf97; top: auto; bottom: auto; } .product-card { display: block; position: relative; width: 100%; padding: 18px; border-radius: 7px; background-color: #fff; -webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1); } .product-card .product { margin-bottom: 5px; font-size: 20px; color: #777 !important; text-align: center; display: inline-block; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .product-card .product-price { color: #2d3748 !important; font-size: 20px; font-weight: 600; margin-top: 20px; } .checkout-thumb { width: 60px; } .product-border { border: 2px solid #5867dd; } .img-thumbnail { border: 2px solid #5867dd; } .product-sell-info { border-top: 1px solid #e1eaea; border-bottom: 1px solid #e1eaea; padding: 15px 0; } .product-info-table { width: 100%; } .product-info-table tr:not(:last-child) { border-bottom: 1px solid #edf2f9; } .product-info-table tr td:first-child { width: 200px; } .product-info-table tr td { padding: 15px; } #productPanels { border: 1px solid #e1eaea; } .accordion-heading.single-product { background-color: #ffffff; padding: 15px; border-radius: 3px; } .accordion-heading.single-product a { font-size: 15px; } .product-gallery { width: 400px; margin: auto; } @media only screen and (max-width: 767px) { .product-gallery { width: 250px; } } .tag-link { display: inline-block; padding: .25rem .5rem; -webkit-transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; border: 1px solid #e7e7e7; background-color: rgba(0, 0, 0, 0); color: #404040; text-decoration: none; font-size: .75rem; font-weight: 600; } .single-product-icon a { font-size: 17px; color: #718096; display: inline-block; -webkit-transition-duration: 300ms; -o-transition-duration: 300ms; transition-duration: 300ms; } .single-product-icon a:hover { color: #5867dd; } .card-img-tiles { display: block; border-bottom: 1px solid #e1e7ec; } .card-img-tiles > .inner { display: table; width: 100%; } .card-img-tiles .main-img, .card-img-tiles .thumblist { display: table-cell; width: 65%; padding: 15px; vertical-align: middle; } .card-img-tiles .main-img, .card-img-tiles .thumblist { display: table-cell; width: 65%; padding: 15px; vertical-align: middle; } .card-img-tiles .thumblist { width: 35%; border-left: 1px solid #e1e7ec; } .card-img-tiles .main-img, .card-img-tiles .thumblist { display: table-cell; width: 65%; padding: 15px; vertical-align: middle; } .card-img-tiles .main-img > img, .card-img-tiles .thumblist > img { display: block; width: 100%; margin-bottom: 6px; } /* :: Lock CSS */ .middle-box.lock-screen { padding: 15px; } .middle-box.lock-screen .lock-text { font-size: 16px; margin-bottom: 15px; } .middle-box.lock-screen .lock-profile-thumb { width: 70px; border-radius: 50%; margin: 0 auto; } .middle-box.lock-screen .form-control { border: 1px solid #e1eaea; } /* :: Dashboard CSS */ .user-area .nav-tabs { border-bottom: none; } .user-area .nav-tabs .nav-item { margin-bottom: -1px; } .user-area .nav-tabs .nav-item a { border: none; line-height: normal; border-radius: 3px; padding: 5.5px 16px; background-color: transparent; color: #2d3748; font-size: 13px; margin-right: 5px; border: 1px solid #e1eaea; } @media only screen and (max-width: 767px) { .user-area .nav-tabs .nav-item a { padding: 5px 8px; font-size: 12px; } } .user-area .nav-tabs .nav-item a.active, .user-area .nav-tabs .nav-item a.active:focus, .user-area .nav-tabs .nav-item a.active:hover { color: #ffffff; background-color: #5867dd; border-color: #5867dd; } .user-data-list li { border-bottom: 1px dashed #ebedf2; padding: 15px 0; } .user-data-list li:last-child { border-bottom: none; } .user-data-list li:first-child { padding-top: 0; } .user-data-list li .author-info .author-img { width: 40px; } .user-data-list li .author-info .author-text h6 { font-size: 15px; line-height: 1.2; } .user-data-list li .author-info .author-text p { font-size: 12px; } .ticket-data-list li { border-bottom: 1px dashed #ebedf2; padding: 15px 0; } .ticket-data-list li:first-child { padding-top: 0; } .ticket-data-list li:last-child { border-bottom: none; padding-bottom: 0; } .ticket-data-list li .ticket-time { -webkit-box-flex: 0; -ms-flex: 0 0 60px; flex: 0 0 60px; width: 60px; max-width: 60px; text-align: right; } @media only screen and (max-width: 767px) { .ticket-data-list li .ticket-time { display: none; } } .ticket-data-list li .avatar-area .avatar { -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; width: 40px; max-width: 40px; line-height: 40px; height: 40px; text-align: center; color: #ffffff; border-radius: 50%; position: relative; z-index: 1; font-size: 16px; font-weight: 500; } .ticket-data-list li .avatar-area .avatar img { border-radius: 50%; } .ticket-data-list li .avatar-area .avatar.avatar-online::before { background-color: #1dc9b7; position: absolute; right: 0; bottom: 0; width: 25%; height: 25%; border-radius: 50%; content: ''; border: 1px solid #ffffff; } .ticket-data-list li .avatar-area .avatar.avatar-pending::before { background-color: #ffb822; position: absolute; right: 0; bottom: 0; width: 25%; height: 25%; border-radius: 50%; content: ''; border: 1px solid #ffffff; } @media only screen and (max-width: 767px) { .ticket-data-list li .avatar-area .avatar-text h6 { font-size: 14px; } } .ticket-data-list li .avatar-area .avatar-text p { font-size: 14px; margin-bottom: 15px; } .order-area-index .img-order { width: 50px; height: 50px; border-radius: 50%; } .order-area-index .admi-checkbox { margin-top: 11px; left: 8px; margin-left: 15px; } .order-text-desc { padding: 20px; border: 1px solid #f3f3f3; } .order-text-desc .total-count-text h5 { font-size: 22px; color: #5578eb; font-weight: 700; line-height: 1.2; } .order-text-desc .total-count-text span { font-size: 12px; font-weight: 500; color: #343a40; } .order-text-desc .total-count-text p { font-weight: 500; } .user-important-data-info { position: relative; z-index: 1; } .user-important-data-info .downloads--data-btn li { padding-right: 15px; margin-right: 15px; } .user-important-data-info .downloads--data-btn li:last-child { padding-right: 0; margin-right: 0; border-right: none; } @media only screen and (max-width: 767px) { .user-important-data-info .downloads--data-btn li { padding-right: 7.5px; margin-right: 7.5px; } } .user-important-data-info .downloads--data-btn li a { font-weight: 500; color: #5867dd; padding: 0; border-radius: 0; font-size: 14px; } @media only screen and (max-width: 767px) { .user-important-data-info .downloads--data-btn li a { font-size: 12px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .user-important-data-info .downloads--data-btn li a { font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .user-important-data-info .downloads--data-btn li a { font-size: 12px; } } .user-important-data-info .downloads--data-btn li a:hover, .user-important-data-info .downloads--data-btn li a:focus { color: #5867dd; } .user-important-data-info .sales-reports li { text-align: center; padding-left: 30px; margin-left: 30px; } @media only screen and (max-width: 767px) { .user-important-data-info .sales-reports li { padding-left: 15px; margin-left: 15px; } } .user-important-data-info .sales-reports li:first-child { border-left: none; margin-left: 0; padding-left: 0; } .user-important-data-info .sales-reports li span { display: block; font-size: 13px; } .user-important-data-info .sales-reports li span:last-child { color: #5867dd; font-weight: 500; font-size: 14px; } @media only screen and (max-width: 767px) { .user-important-data-info .sales-reports li span { font-size: 12px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .user-important-data-info .sales-reports li span { font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .user-important-data-info .sales-reports li span { font-size: 12px; } } .dashboard-clock { position: relative; z-index: 1; margin-right: 15px; } @media only screen and (max-width: 767px) { .dashboard-clock { margin-right: 0; } } .dashboard-clock #dashboardDate { font-size: 14px; font-weight: 500; color: #718096; } @media only screen and (max-width: 767px) { .dashboard-clock #dashboardDate { font-size: 12px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .dashboard-clock #dashboardDate { font-size: 13px; } } .dashboard-clock ul li { font-size: 15px; font-weight: 600; color: #0168fa; font-family: "Overpass", sans-serif; } @media only screen and (max-width: 767px) { .dashboard-clock ul li { font-size: 13px; margin-bottom: 10px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .dashboard-clock ul li { font-size: 13px; } } @media only screen and (max-width: 767px) { .dashboard-btn-group .btn { padding: 0.115rem 0.230rem; font-size: 10px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .dashboard-btn-group .btn { padding: 0.2rem 0.4rem; font-size: 12px; } } .dashboard-header-title p { font-size: 13px; } @media only screen and (max-width: 767px) { .dashboard-header-title p { font-size: 11px; line-height: 1.5; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .dashboard-header-title p { font-size: 12px; line-height: 1.5; } } @media only screen and (max-width: 767px) { .dashboard-header-title h6 { font-size: 14px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .dashboard-header-title h6 { font-size: 16px; } } .dashboard-infor-mation { position: relative; z-index: 1; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media only screen and (max-width: 767px) { .single-browser-area img { max-width: 30px; } } @media only screen and (max-width: 767px) { .single-browser-area h6 { font-size: 13px; } } @media only screen and (max-width: 767px) { .index-flot-chart-area { margin-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .index-flot-chart-area { margin-bottom: 50px; } } .product-thumb-index img { max-width: 130px; margin: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-thumb-index img { max-width: 200px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .product-thumb-index img { max-width: 190px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-thumb-index img { max-width: 160px; } } .action-area { text-align: center; cursor: pointer; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; margin-bottom: 20px; background-color: #f7f7fa; padding: 10px; border-radius: 2px; } .action-area .icon { font-size: 24px; color: #5867dd; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .action-area .text a h5 { font-size: 15px; margin-top: 8px; margin-bottom: 0; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .action-area:hover { background-color: #5867dd; } .action-area:hover .icon { color: #ffffff; } .action-area:hover .text a h5 { color: #ffffff; } .kt-timeline .kt-timeline__item { position: relative; } .kt-timeline .kt-timeline__item::before { content: ""; width: 4px; height: 100%; background: #ebedf2; left: 1.5rem; top: 0; position: absolute; } .kt-timeline .kt-timeline__item .kt-timeline__item-section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .kt-timeline .kt-timeline__item.kt-timeline__item--success .kt-timeline__item-section .kt-timeline__item-section-border { background-color: #fff; } .kt-timeline .kt-timeline__item .kt-timeline__item-section .kt-timeline__item-section-border { border-top: 8px solid #fff; border-bottom: 8px solid #fff; position: relative; } .kt-timeline .kt-timeline__item.kt-timeline__item--success .kt-timeline__item-section .kt-timeline__item-section-border .kt-timeline__item-section-icon { background-color: rgba(88, 103, 221, 0.2); } .kt-timeline .kt-timeline__item .kt-timeline__item-section .kt-timeline__item-section-border .kt-timeline__item-section-icon { width: 50px; height: 50px; border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .kt-timeline .kt-timeline__item .kt-timeline__item-section .kt-timeline__item-section-border .kt-timeline__item-section-icon > i { font-size: 20px; } .kt-timeline .kt-timeline__item.kt-timeline__item--danger .kt-timeline__item-section .kt-timeline__item-section-border .kt-timeline__item-section-icon { background-color: rgba(253, 57, 122, 0.2); } .kt-timeline .kt-timeline__item.kt-timeline__item--brand .kt-timeline__item-section .kt-timeline__item-section-border .kt-timeline__item-section-icon { background-color: rgba(29, 201, 183, 0.2); } .kt-timeline .kt-timeline__item.kt-timeline__item--warning .kt-timeline__item-section .kt-timeline__item-section-border .kt-timeline__item-section-icon { background-color: rgba(255, 184, 34, 0.2); } .kt-timeline .kt-timeline__item .kt-timeline__item-section .kt-timeline__item-datetime { margin-left: 1.2rem; color: #2d3748; font-weight: 400; font-size: 13px; } .kt-timeline .kt-timeline__item .kt-timeline__item-text { text-decoration: none; margin-left: 4.4rem; color: #718096; font-weight: 400; font-size: 15px; display: block; } .kt-timeline .kt-timeline__item .kt-timeline__item-info { padding: 1rem 0 2rem 4.4rem; color: #2d3748; font-weight: 400; font-size: .9rem; } .kt-portlet .kt-portlet__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; border-bottom: 1px solid #ebedf2; } .kt-portlet.kt-portlet--tabs .kt-portlet__head .kt-portlet__head-toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .kt-portlet--tabs .nav-tabs.nav-tabs-line { margin: 0 0 -1px .5rem; border-color: transparent !important; } .nav-tabs.nav-tabs-line { border-bottom: 1px solid #ebedf2; } .kt-portlet--tabs .nav-tabs.nav-tabs-line .nav-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .kt-portlet--tabs .nav-tabs.nav-tabs-line .nav-item .nav-link { padding: 0px 10px 15px 10px; } .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { border-top-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border-top-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; } .nav-tabs.nav-tabs-line.nav-tabs-line-brand a.nav-link.active, .nav-tabs.nav-tabs-line.nav-tabs-line-brand a.nav-link:hover, .nav-tabs.nav-tabs-line.nav-tabs-line-brand.nav.nav-tabs .nav-link.active, .nav-tabs.nav-tabs-line.nav-tabs-line-brand.nav.nav-tabs .nav-link:hover { color: #5578eb; border-bottom: 1px solid #5578eb; } .clint-logo-2 { width: 200px; } .list-group-item { padding: 15px; } /* :: Nested List CSS */ .dd-handle { border: 1px solid #dbdbdb; } #nestable2 .dd-handle { color: #fff; border: none; background-color: #5867dd !important; } /* :: Table CSS */ .table { width: 100%; color: #2d3748; border-right: 1px solid #e1eaea; border-left: 1px solid #e1eaea; border-bottom: 1px solid #e1eaea; } .table td, .table th { padding: .95rem; vertical-align: top; border-top: 1px solid #e1eaea; font-size: 13px; font-weight: 400; } .table-centered td, .table-centered th { vertical-align: middle !important; } .table-hover tbody tr:hover { color: #2d3748; background-color: #f1f3fa; } .table-nowrap td, .table-nowrap th { white-space: nowrap; vertical-align: middle; } .table thead th { border-bottom: 1px solid #e1eaea; color: #2d3748; font-weight: 600; font-size: 14px; } @media only screen and (max-width: 767px) { .table thead th { font-size: 13px; } } @media only screen and (max-width: 767px) { div.dataTables_wrapper div.dataTables_filter input { width: 80%; } } input[data-switch="success"]:checked + label { background-color: #0acf97; } input[data-switch] + label { width: 56px; height: 24px; background-color: #f1f3fa; background-image: none; border-radius: 2rem; cursor: pointer; display: inline-block; text-align: center; position: relative; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } input[data-switch] { display: none; } input[data-switch]:checked + label::before { color: #fff; content: attr(data-on-label); right: auto; left: 4px; } input[data-switch] + label::before { color: #313a46; content: attr(data-off-label); display: block; font-family: inherit; font-weight: 600; font-size: .75rem; line-height: 24px; position: absolute; right: 3px; margin: 0 .21667rem; top: 0; text-align: center; min-width: 1.66667rem; overflow: hidden; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } input[data-switch]:checked + label::after { left: 34px; background-color: #f1f3fa; } input[data-switch] + label::after { content: ''; position: absolute; left: 4px; background-color: #adb5bd; -webkit-box-shadow: none; box-shadow: none; border-radius: 2rem; height: 18px; width: 18px; top: 3px; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .table .table-user img { height: 30px; width: 30px; } .table .action-icon { color: #5E5155; font-size: 16px; display: inline-block; border: 1px solid #e1eaea; margin-bottom: 5px; width: 25px; height: 25px; border-radius: 2px; text-align: center; } .table tbody tr td { vertical-align: middle !important; } .dataTables_wrapper .dataTables_paginate .paginate_button { font-size: 14px; } .title.tablesaw-swipe-cellpersist a { color: #2d3748; } .title a { color: #2d3748; } .table-striped tbody tr:nth-of-type(2n+1) { background-color: #f1f3fa; } .table .thead-light th { color: #2d3748; background-color: #f1f3fa; border-bottom: #e1eaea !important; } .bg-nav-pills { background-color: #eff2f7; } .edit-table-area .table td, .edit-table-area .table th { border-top: 1px solid #e1eaea; background-color: #ffffff; } .prices .table thead { font-size: 16px; font-weight: 600; } @media only screen and (max-width: 767px) { .prices .table thead { font-size: 12px; } } .prices .currency-icon { max-width: 24px; margin-right: 10px; } @media only screen and (max-width: 767px) { .prices .currency-icon { display: none; } } .filter-table #myInput { background-image: url("img/core-img/search.png"); background-position: 10px 12px; /* Position the search icon */ background-repeat: no-repeat; /* Do not repeat the icon image */ width: 100%; /* Full-width */ font-size: 16px; /* Increase font-size */ padding: 12px 20px 12px 40px; /* Add some padding */ border: 1px solid #eff2f7; /* Add a grey border */ margin-bottom: 12px; /* Add some space below the input */ } .filter-table #myTable { border-collapse: collapse; /* Collapse borders */ width: 100%; /* Full-width */ border: 1px solid #eff2f7; /* Add a grey border */ font-size: 18px; /* Increase font-size */ } .filter-table #myTable th, .filter-table #myTable td { text-align: left; font-size: 14px; padding: 12px; } .filter-table #myTable tr { /* Add a bottom border to all table rows */ border-bottom: 1px solid #eff2f7; } .filter-table #myTable tr.header, .filter-table #myTable tr:hover { /* Add a grey background color to the table header and on hover */ background-color: #f1f1f1; } .u-label { display: inline-block; padding: .35rem .58rem; font-size: 12px; line-height: 1; text-align: center; white-space: nowrap; color: #fff; } /* :: Password CSS */ .forget-password-area { background-image: url(img/bg-img/bg-7.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 1; } .forget-password-area .animation-bg { position: absolute; width: 100%; height: 100%; z-index: 0; -webkit-animation: animationBg linear 3s infinite; animation: animationBg linear 3s infinite; } @-webkit-keyframes animationBg { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes animationBg { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .forget-password-area h4 { font-size: 30px; } .forget-password-area p { margin-bottom: 30px; } .forget-password-area .form-control { background-color: transparent; color: #ffffff; border-color: #1dc9b7 !important; font-size: 14px; border-radius: 30px; } .forget-password-area .form-control:focus, .forget-password-area .form-control:active, .forget-password-area .form-control:hover { border-color: #1dc9b7 !important; } /* :: Timeout CSS */ #session-timeout-dialog .close { padding: 0; font-size: 22px; margin: 0; } #session-timeout-dialog .modal-content { border: none; } #session-timeout-dialog .modal-header { border-bottom: none; } #session-timeout-dialog .modal-footer { border-top: none; } #session-timeout-dialog .modal-body { border: 1px solid #f1f2f3; } #session-timeout-dialog .modal-body p span { color: #5867dd; } /* :: Paginator CSS */ .datepaginator-sm .pagination li a, .datepaginator-lg .pagination li a, .datepaginator .pagination li a { padding: 0 5px; height: 60px; border: 1px solid #e9ecef; float: left; position: relative; } /* :: Avatar CSS */ .avatar-area .thumb-md { height: 50px; -webkit-box-flex: 0; -ms-flex: 0 0 50px; flex: 0 0 50px; max-width: 50px; width: 50px; font-size: 14px; font-weight: 700; } .avatar-area .img-group .user-avatar + .user-avatar-group { margin-left: -20px; } .avatar-area .img-group .user-avatar { position: relative; margin-bottom: 0; display: inline-block; -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; max-width: 40px; width: 40px; height: 40px; vertical-align: middle; } .avatar-area .img-group .user-avatar img { position: absolute; top: 0; left: 0; -webkit-box-flex: 0; -ms-flex: 0 0 30px; flex: 0 0 30px; max-width: 30px; width: 30px; height: 30px; -webkit-box-shadow: 0 0 0 2px #b6c2e4; box-shadow: 0 0 0 2px #b6c2e4; } .avatar-area .rounded-circle { border-radius: 50% !important; } .avatar-area .img-group .user-avatar:focus, .avatar-area .img-group .user-avatar:hover { z-index: 2; } .avatar-area .thumb-xl { height: 78px; -webkit-box-flex: 0; -ms-flex: 0 0 78px; flex: 0 0 78px; max-width: 78px; width: 78px; font-size: 28px; font-weight: 700; } .avatar-area .thumb-lg { height: 60px; -webkit-box-flex: 0; -ms-flex: 0 0 60px; flex: 0 0 60px; max-width: 60px; width: 60px; font-size: 20px; font-weight: 700; } .avatar-area .thumb-md { height: 48px; -webkit-box-flex: 0; -ms-flex: 0 0 48px; flex: 0 0 48px; max-width: 48px; width: 48px; font-size: 14px; font-weight: 700; } .avatar-area .thumb-sm { height: 36px !important; -webkit-box-flex: 0; -ms-flex: 0 0 36px; flex: 0 0 36px; max-width: 36px; width: 36px; font-size: 12px; font-weight: 700; } .avatar-area .thumb-xs { height: 32px !important; -webkit-box-flex: 0; -ms-flex: 0 0 32px; flex: 0 0 32px; max-width: 32px; width: 32px; font-size: 10px; font-weight: 700; } .avatar-area .img-group .avatar-badge { position: absolute; right: 1px; -webkit-box-flex: 0; -ms-flex: 0 0 8px; flex: 0 0 8px; max-width: 8px; width: 8px; height: 8px; border-radius: 8px; -webkit-box-shadow: 0 0 0 2px #b6c2e4; box-shadow: 0 0 0 2px #b6c2e4; z-index: 2; } .avatar-area .img-group .user-avatar .online { background: #1ecab8; } .avatar-area .img-group .user-avatar .offline { background: #f1646c; } /* :: Toltip CSS */ .mytooltip:hover .tooltip-content2, .mytooltip:hover .tooltip-content2 i { opacity: 1; font-size: 18px; pointer-events: auto; -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } .mytooltip:hover .tooltip-content4, .mytooltip:hover .tooltip-text2 { pointer-events: auto; opacity: 1; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mytooltip { display: inline; position: relative; z-index: 10; } .mytooltip:hover .tooltip-item::after { pointer-events: auto; } .mytooltip:hover .tooltip-content { pointer-events: auto; opacity: 1; -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); -ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); } .mytooltip:hover .tooltip-content3 { opacity: 1; pointer-events: auto; -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .mytooltip:hover .tooltip-item2 { color: #ffffff; -webkit-transform: translate3d(0, -0.5em, 0); -ms-transform: translate3d(0, -0.5em, 0); transform: translate3d(0, -0.5em, 0); } .mytooltip:hover .tooltip-content5 { opacity: 1; pointer-events: auto; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .mytooltip:hover .tooltip-text3 { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .mytooltip:hover .tooltip-inner2 { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .tooltip-content { position: absolute; z-index: 999998989898989 !important; width: 360px; left: 50%; margin: 0 0 20px -180px; bottom: 100%; text-align: left; font-size: 14px; line-height: 30px; -webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2); box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2); background: #2b2b2b; opacity: 0; cursor: default; pointer-events: none; } .tooltip-content img { position: relative; height: 140px; display: block; float: left; margin-right: 1em; } .tooltip-effect-5 .tooltip-content { width: 180px; margin-left: -90px; -webkit-transform-origin: 50% calc(106%); -ms-transform-origin: 50% calc(106%); transform-origin: 50% calc(106%); -webkit-transform: rotate3d(0, 0, 1, 15deg); -ms-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); transition: opacity 0.2s, -webkit-transform 0.2s; -o-transition: opacity 0.2s, transform 0.2s; transition: opacity 0.2s, transform 0.2s; transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s; -webkit-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39); -o-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39); transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39); } .tooltip-effect-5 .tooltip-text { padding: 1.4em; } .tooltip-content::after { content: ''; top: 100%; left: 50%; border: solid transparent; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-top-color: #2a3035; border-width: 10px; margin-left: -10px; } .tooltip-text { font-size: 14px; line-height: 24px; display: block; padding: 1.31em 1.21em 1.21em 0; color: #ffffff; } .tooltip-content2 { position: absolute; z-index: 9999; width: 80px; height: 80px; padding-top: 25px; left: 50%; margin-left: -40px; bottom: 100%; border-radius: 50%; text-align: center; background: #009efb; color: #ffffff; opacity: 0; margin-bottom: 20px; cursor: default; pointer-events: none; } .tooltip-content2 i { opacity: 0; } .tooltip-effect-6 .tooltip-content2 { -webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg); transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg); -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .tooltip-effect-6 .tooltip-content2 i { -webkit-transform: scale3d(0, 0, 1); transform: scale3d(0, 0, 1); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .tooltip-effect-6:hover .tooltip-content2 i { -webkit-transform: rotate3d(1, 1, 1, 0); transform: rotate3d(1, 1, 1, 0); } .tooltip-item2 { color: #00aeef; cursor: pointer; z-index: 100; position: relative; display: inline-block; font-weight: 500; -webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s; transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s; -o-transition: background-color 0.3s, color 0.3s, transform 0.3s; transition: background-color 0.3s, color 0.3s, transform 0.3s; transition: background-color 0.3s, color 0.3s, transform 0.3s, -webkit-transform 0.3s; } .tooltip-content4 { position: absolute; z-index: 99; width: 360px; left: 50%; margin-left: -180px; bottom: -5px; text-align: left; background: #00aeef; opacity: 0; font-size: 14px; line-height: 27px; padding: 1.5em; color: #ffffff; border-bottom: 55px solid #2b2b2b; cursor: default; pointer-events: none; border-radius: 5px; -webkit-transform: translate3d(0, -0.5em, 0); transform: translate3d(0, -0.5em, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .tooltip-content4 a { color: #2b2b2b; } .tooltip-text2 { opacity: 0; -webkit-transform: translate3d(0, 1.5em, 0); transform: translate3d(0, 1.5em, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .tooltip-content5 { position: absolute; z-index: 9999; width: 300px; left: 50%; bottom: 100%; font-size: 20px; line-height: 1.4; text-align: center; font-weight: 400; color: #ffffff; background: transparent; opacity: 0; margin: 0 0 20px -150px; cursor: default; pointer-events: none; -webkit-transition: opacity 0.3s 0.3s; -o-transition: opacity 0.3s 0.3s; transition: opacity 0.3s 0.3s; } .tooltip-content5 span { display: block; } .tooltip-text3 { border-bottom: 10px solid #009efb; overflow: hidden; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transition: -webkit-transform 0.3s 0.3s; transition: -webkit-transform 0.3s 0.3s; -o-transition: transform 0.3s 0.3s; transition: transform 0.3s 0.3s; transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s; } .tooltip-inner2 { background: #2b2b2b; padding: 40px; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .tooltip-content5::after { content: ''; bottom: -20px; left: 50%; border: solid transparent; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-top-color: #009efb; border-width: 10px; margin-left: -10px; } .tooltip-effect-1 .tooltip-content { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; color: #ffffff; } .tooltip-effect-2 .tooltip-content { -webkit-transform-origin: 50% calc(110%); -ms-transform-origin: 50% calc(110%); transform-origin: 50% calc(110%); -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 45deg); transform: perspective(1000px) rotate3d(1, 0, 0, 45deg); -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, -webkit-transform 0.2s; -o-transition: opacity 0.2s, transform 0.2s; transition: opacity 0.2s, transform 0.2s; transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s; } .tooltip-effect-3 .tooltip-content { -webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 0, 25deg); transform: translate3d(0, 10px, 0) rotate3d(1, 1, 0, 25deg); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .tooltip-effect-4 .tooltip-content { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scale3d(0.7, 0.3, 1); transform: scale3d(0.7, 0.3, 1); -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, -webkit-transform 0.2s; -o-transition: opacity 0.2s, transform 0.2s; transition: opacity 0.2s, transform 0.2s; transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s; } .tooltip.tooltip-effect-2:hover .tooltip-content { -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg); transform: perspective(1000px) rotate3d(1, 0, 0, 0deg); } a.mytooltip { font-weight: 500; color: #009efb; } .tooltip-effect-7 .tooltip-content2 { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .tooltip-effect-7 .tooltip-content2 i { -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .tooltip-effect-8 .tooltip-content2 { -webkit-transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg); transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg); -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .tooltip-effect-8 .tooltip-content2 i { -webkit-transform: scale3d(0, 0, 1); transform: scale3d(0, 0, 1); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .tooltip-effect-9 .tooltip-content2 { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .tooltip-effect-9 .tooltip-content2 i { -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; -o-transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; } .tooltip { z-index: 9999999999999999999999 !important; } /* :: Register CSS */ .register-page-2 .form-control { background-color: transparent; color: #ffffff; font-size: 14px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.3); } .register-page-2 .nice-select .option { color: #000; } /* :: Project CSS */ .progress.progress-sm { height: 6px; } .project-details-area .avatar-sm { height: 3rem; width: 3rem; } .project-details-area .avatar-sm .avatar-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #5867dd; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 600; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .avatar-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #5867dd; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 600; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .avatar-xs { width: 40px; } .avatar-sm { width: 40px; } .project-list-area { border: 2px solid #5867dd; } /* :: Taskboard CSS */ .tasks { padding: 0 1rem 1rem 1rem; border: 1px solid #e3eaef; vertical-align: top; margin-bottom: 30px; border-radius: .25rem; } .tasks .card { white-space: normal; margin-top: 1rem; } .tasks .task-header { background-color: #f1f3fa; padding: 1rem; margin: 0 -1rem; } .task-list-items { min-height: 100px; position: relative; } .task-list-items::before { content: "No Tasks"; position: absolute; line-height: 110px; width: 100%; text-align: center; font-weight: 600; } /* :: Tab CSS */ .nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: .25rem; border-top-right-radius: .25rem; font-weight: 500; color: #5867dd; } .nav-pills > li > a, .nav-tabs > li > a { color: #2d3748; font-weight: 500; font-size: 14px; } @media only screen and (max-width: 767px) { .nav-pills > li > a, .nav-tabs > li > a { font-size: 12px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .nav-pills > li > a, .nav-tabs > li > a { font-size: 12px; } } .tab-content { padding: 20px 0 0 0; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: #5867dd; font-size: 12px; } @media only screen and (max-width: 767px) { .nav-pills .nav-link.active, .nav-pills .show > .nav-link { font-size: 12px; } } .navtab-bg li > a { background-color: #f8f8f8; margin: 0 5px; } .nav-pills > a { color: #6c857d; font-weight: 500; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #495057; background-color: #fff; } .nav-bordered { border-bottom: 2px solid rgba(152, 166, 173, 0.25) !important; } .nav-bordered a.active { border-bottom: 2px solid #5867dd !important; } .nav-bordered li a { border: 0 !important; padding: 10px 20px !important; } .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { border-color: #e9ecef #e9ecef #dee2e6; } .card-header.tab { padding: 1rem 1.5rem; margin-bottom: 0; background-color: #edeff1; border-bottom: 0 solid #f7f7f7; } .accordion .card .card-header { background-color: transparent; border-bottom: 1px solid #f1f1f1; padding: 10px 25px; position: relative; } .accordion h2 .btn { font-weight: 500; font-size: 13px; padding: 0; color: #5867dd; text-decoration: none; } .accordion h2 .btn:focus, .accordion h2 .btn:hover { font-size: 13px; font-weight: 500; color: #038fcf; } /* :: Dashboard CSS */ .dashboard-area .breadcrumb { background-color: transparent; padding: 0; margin-bottom: 9px; } .dashboard-area .breadcrumb a { color: #2d3748; font-weight: 600; font-size: 14px; } .dashboard-area .breadcrumb .breadcrumb-item.active { color: #5867dd; font-weight: 600; font-size: 14px; } .dashboard-area .project-table .project-thumb { width: 40px; min-width: 40px; border-radius: 50%; } .dashboard-area .project-table tr td h6 { font-size: 14px; margin-bottom: 0; } .dashboard-area .project-table tr td span { font-size: 12px; } .dashboard-area .project-table tr td h5 { font-size: 14px; margin-bottom: 0; font-weight: 700; } .dashboard-area tr td { font-weight: 600; border-top-style: dashed; } .dashboard-area .table .thead-light th { border-top-style: dashed; } .dashboard-area .table td, .dashboard-area .table th { vertical-align: middle; } .dashboard-area .table thead th { border-top-style: dashed; border-bottom-style: dashed; } .badge-outline-warning { color: #fda006; border: 1px solid #fda006; } .badge-outline-success { color: #26a69a; border: 1px solid #26a69a; } .badge-outline-info { color: #3da5f4; border: 1px solid #3da5f4; } .crypto-news-thumb { -webkit-box-flex: 0; -ms-flex: 0 0 100px; flex: 0 0 100px; width: 100px; max-width: 100px; } .dashboard-tab-area .nav-pills > li > a, .dashboard-tab-area .nav-tabs > li > a { color: rgba(255, 255, 255, 0.95); } .dashboard-tab-area .nav-pills .nav-link.active, .dashboard-tab-area .nav-pills .show > .nav-link { color: #2d3748; background-color: #ffffff; padding: 5px 15px; font-size: 14px; } .dashboard-tab-thumb { -webkit-box-flex: 0; -ms-flex: 0 0 150px; flex: 0 0 150px; width: 150px; max-width: 150px; } @media only screen and (max-width: 767px) { .dashboard-tab-thumb { -webkit-box-flex: 0; -ms-flex: 0 0 100px; flex: 0 0 100px; width: 100px; max-width: 100px; } } .dashboard-active-timeline { position: relative; z-index: 1; } .dashboard-active-timeline::after { position: absolute; content: ""; border-left: 2px solid #e1eaea; top: 0; left: 16px; height: 100%; } .dashboard-active-timeline li { position: relative; z-index: 1; } .dashboard-active-timeline li .timeline-icon { -webkit-box-flex: 0; -ms-flex: 0 0 35px; flex: 0 0 35px; width: 35px; height: 35px; text-align: center; line-height: 35px; border-radius: 50%; color: #ffffff; font-size: 16px; transition-duration: 500ms; } .dashboard-active-timeline li:hover .timeline-icon { border-radius: 2px; } .chat-application .chats .chat-body .chat-content { text-align: right; position: relative; z-index: 1; display: block; float: right; padding: 8px 15px; margin: 0 20px 10px 0; clear: both; color: #fff; background-color: #6967ce; -webkit-box-shadow: 0 5px 12px 0 rgba(62, 57, 107, 0.36); box-shadow: 0 5px 12px 0 rgba(62, 57, 107, 0.36); border-radius: 7px; } .chat-application .chats .chat-body .chat-content::before { position: absolute; z-index: 1; top: 10px; right: -10px; width: 0; height: 0; content: ''; border: 5px solid transparent; border-left-color: #6967ce; } .chat-application .chats .chat-left .chat-avatar { float: left; } .chat-application .chat-avatar .avatar img { width: 40px; border-radius: 50%; } .chat-application .chats .chat-left .chat-body { margin-right: 0; margin-left: 30px; } .chat-application .chats .chat-body { display: block; margin: 10px 30px 0 0; overflow: hidden; } .chat-application .chats .chat-left .chat-content { text-align: left; float: left; margin: 0 0 15px 20px; color: #6b6f80; background-color: #FFFFFF; -webkit-box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16); box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16); } .chat-application .chats .chat-left .chat-content::before { right: auto; left: -10px; border-right-color: #FFFFFF; border-left-color: transparent; } .chat-application .chats .chat-body .chat-content::before { position: absolute; z-index: 1; top: 10px; right: -10px; width: 0; height: 0; content: ''; border: 5px solid transparent; border-left-color: #6967ce; } .chat-application .chats .chat-left .chat-content::before { right: auto; left: -10px; border-right-color: #FFFFFF; border-left-color: transparent; } .chat-avatar { float: left; } .chat-application .chats .chat-left .chat-body { margin-right: 0; margin-left: 30px; } .chat-application .chats .chat-avatar { float: right; } .chat-application .chats .chat-left .chat-content { text-align: left; color: #2d3748; } .chat-content p { margin-bottom: 0; } .dashboard-area .apexcharts-zoom-icon, .dashboard-area .apexcharts-zoom-in-icon, .dashboard-area .apexcharts-zoom-out-icon, .dashboard-area .apexcharts-reset-zoom-icon, .dashboard-area .apexcharts-pan-icon, .dashboard-area .apexcharts-selection-icon, .dashboard-area .apexcharts-menu-icon, .dashboard-area .apexcharts-toolbar-custom-icon { display: none; } /* :: Progressbar CSS */ .progress-vertical { min-height: 250px; height: 250px; width: 10px; position: relative; display: inline-block; margin-bottom: 0; margin-right: 20px; } .progress-vertical-bottom { min-height: 250px; height: 250px; position: relative; width: 10px; display: inline-block; margin-bottom: 0; margin-right: 20px; } .progress-vertical-bottom .progress-bar { width: 100%; bottom: 0; position: absolute; } .animated-progressbar #myProgress { width: 100%; background-color: #e9ecef; border-radius: 5px; } .animated-progressbar #myBar { width: 10%; height: 18px; background-color: #5867dd; text-align: center; line-height: 18px; color: #ffffff; border-radius: 5px; } .h-20 { height: 20px !important; } /* :: Picker CSS */ .datepicker td, .datepicker th { width: 40px; height: 40px; font-size: 13px; color: #2d3748; } .datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled] { background-color: #5867dd !important; } .datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover { background-color: #5867dd !important; } .datepicker-inline { width: 300px; -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.2); box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.2); } .datepicker .datepicker-switch, .datepicker .next, .datepicker .prev, .datepicker tfoot tr th { color: #111; font-size: 16px; } /* :: Preloader CSS */ #preloader-area { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999999; background: #ffffff; } .lds-ripple { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999999; margin-left: -40px; margin-top: -40px; } .lds-ripple div { position: absolute; border: 4px solid #5867dd; opacity: 1; border-radius: 50%; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .lds-ripple div:nth-child(2) { animation-delay: -0.5s; } @keyframes lds-ripple { 0% { top: 36px; left: 36px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 72px; height: 72px; opacity: 0; } } /* :: Profile CSS */ .user-friends img { width: 42px; height: 42px; margin-bottom: 5px; margin-right: 5px; } .thumb { position: relative; z-index: 1; } .profile-heading-thumb { border: 5px solid #1dc9b7; } .text h4 { font-size: 17px; font-weight: 700; margin-bottom: 0; } .widget-download-file .download-file-icon img { max-height: 20px; } .widget-download-file .download-file-icon { width: 40px; height: 40px; background-color: #5867dd; border-radius: 50%; text-align: center; padding: 7px 0; } .profile-friend-thumb { width: 60px; display: inline-block; float: left; padding: 10px 5px; } .profile-friend-thumb img { border-radius: 50%; } .profile--tumb { height: 200px; width: 200px; margin: auto; } .profile--tumb img { border-radius: 50%; } /* :: Ribbon CSS */ .ribbon-wrapper, .ribbon-wrapper-reverse, .ribbon-wrapper-bottom, .ribbon-wrapper-right-bottom { position: relative; padding: 50px 15px 15px 15px; } .ribbon-vwrapper { padding: 15px 15px 15px 50px; position: relative; } .ribbon-overflow { overflow: hidden; } .ribbon-vwrapper-reverse { padding: 15px 50px 15px 15px; } .ribbon-wrapper-bottom { padding: 15px 15px 50px 50px; } .ribbon-wrapper-right-bottom { padding: 15px 50px 50px 15px; } .ribbon-content { margin-bottom: 0px; } .ribbon { padding: 0 8px; height: 30px; line-height: 30px; clear: left; position: absolute; top: 12px; left: -2px; color: #fff; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ribbon { font-size: 12px; padding: 0 5px; } } .ribbon-bookmark:before { position: absolute; top: 0; left: 100%; display: block; width: 0; height: 0; content: ''; border: 15px solid #343a40; border-right: 10px solid transparent; } .ribbon-right { left: auto; right: -2px; } .ribbon-bookmark.ribbon-right:before { right: 100%; left: auto; border-right: 15px solid #343a40; border-left: 10px solid transparent; } .ribbon-vertical-l, .ribbon-vertical-r { clear: none; padding: 0 5px; height: 70px; width: 30px; line-height: 70px; text-align: center; left: 12px; top: -2px; } .ribbon-vertical-r { left: auto; right: 12px; } .ribbon-bookmark.ribbon-vertical-l:before, .ribbon-bookmark.ribbon-vertical-r:before { top: 100%; left: 0; margin-top: -14px; border-right: 15px solid #343a40; border-bottom: 10px solid transparent; } .ribbon-badge { top: 15px; overflow: hidden; left: -90px; width: 100%; text-align: center; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .ribbon-badge.ribbon-right { left: auto; right: -90px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .ribbon-badge.ribbon-bottom { top: auto; bottom: 15px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .ribbon-badge.ribbon-right.ribbon-bottom { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .ribbon-corner { top: 0; left: 0; background-color: transparent !important; padding: 6px 0 0 10px; } .ribbon-corner i { position: relative; } .ribbon-corner:before { position: absolute; top: 0; left: 0; width: 0; height: 0; content: ''; border: 30px solid transparent; border-top-color: #fb9678; border-left-color: #fb9678; } .ribbon-corner.ribbon-right:before { right: 0; left: auto; border-right-color: #526069; border-left-color: transparent; } .ribbon-corner.ribbon-right { right: 0; left: auto; padding: 6px 10px 0 0; } .ribbon-corner.ribbon-bottom:before { top: auto; bottom: 0; border-top-color: transparent; border-bottom-color: #526069; } .ribbon-corner.ribbon-bottom { bottom: 0; top: auto; padding: 0 10px 6px 10px; } .ribbon-custom { background: #fb9678; } .ribbon-bookmark.ribbon-right.ribbon-custom:before { border-right-color: #fb9678; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-custom:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-custom:before { border-right-color: #fb9678; border-bottom-color: transparent; } .ribbon-primary { background: #fb9678; } .ribbon-bookmark.ribbon-primary:before { border-color: #fb9678; border-right-color: transparent; } .ribbon-bookmark.ribbon-right.ribbon-primary:before { border-right-color: #fb9678; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-primary:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-primary:before { border-right-color: #fb9678; border-bottom-color: transparent; } .ribbon-primary.ribbon-corner:before { border-top-color: #fb9678; border-left-color: #fb9678; } .ribbon-primary.ribbon-corner.ribbon-right:before { border-right-color: #fb9678; border-left-color: transparent; } .ribbon-primary.ribbon-corner.ribbon-bottom:before { border-top-color: transparent; border-bottom-color: #fb9678; } .ribbon-success { background: #00c292; } .ribbon-bookmark.ribbon-success:before { border-color: #00c292; border-right-color: transparent; } .ribbon-bookmark.ribbon-right.ribbon-success:before { border-right-color: #00c292; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-success:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-success:before { border-right-color: #00c292; border-bottom-color: transparent; } .ribbon-success.ribbon-corner:before { border-top-color: #00c292; border-left-color: #00c292; } .ribbon-success.ribbon-corner.ribbon-right:before { border-right-color: #00c292; border-left-color: transparent; } .ribbon-success.ribbon-corner.ribbon-bottom:before { border-top-color: transparent; border-bottom-color: #00c292; } .ribbon-info { background: #03a9f3; } .ribbon-bookmark.ribbon-info:before { border-color: #03a9f3; border-right-color: transparent; } .ribbon-bookmark.ribbon-right.ribbon-info:before { border-right-color: #03a9f3; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-info:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-info:before { border-right-color: #03a9f3; border-bottom-color: transparent; } .ribbon-info.ribbon-corner:before { border-top-color: #03a9f3; border-left-color: #03a9f3; } .ribbon-info.ribbon-corner.ribbon-right:before { border-right-color: #03a9f3; border-left-color: transparent; } .ribbon-info.ribbon-corner.ribbon-bottom:before { border-top-color: transparent; border-bottom-color: #03a9f3; } .ribbon-warning { background: #fec107; } .ribbon-bookmark.ribbon-warning:before { border-color: #fec107; border-right-color: transparent; } .ribbon-bookmark.ribbon-right.ribbon-warning:before { border-right-color: #fec107; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-warning:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-warning:before { border-right-color: #fec107; border-bottom-color: transparent; } .ribbon-warning.ribbon-corner:before { border-top-color: #fec107; border-left-color: #fec107; } .ribbon-warning.ribbon-corner.ribbon-right:before { border-right-color: #fec107; border-left-color: transparent; } .ribbon-warning.ribbon-corner.ribbon-bottom:before { border-top-color: transparent; border-bottom-color: #fec107; } .ribbon-danger { background: #e46a76; } .ribbon-bookmark.ribbon-danger:before { border-color: #e46a76; border-right-color: transparent; } .ribbon-bookmark.ribbon-right.ribbon-danger:before { border-right-color: #e46a76; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-danger:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-danger:before { border-right-color: #e46a76; border-bottom-color: transparent; } .ribbon-danger.ribbon-corner:before { border-top-color: #e46a76; border-left-color: #e46a76; } .ribbon-danger.ribbon-corner.ribbon-right:before { border-right-color: #e46a76; border-left-color: transparent; } .ribbon-danger.ribbon-corner.ribbon-bottom:before { border-top-color: transparent; border-bottom-color: #e46a76; } .ribbon-default { background: #343a40; } .ribbon-bookmark.ribbon-default:before { border-color: #343a40; border-right-color: transparent; } .ribbon-bookmark.ribbon-right.ribbon-default:before { border-right-color: #343a40; border-left-color: transparent; } .ribbon-bookmark.ribbon-vertical-l.ribbon-default:before, .ribbon-bookmark.ribbon-vertical-r.ribbon-default:before { border-right-color: #343a40; border-bottom-color: transparent; } .ribbon-default.ribbon-corner:before { border-top-color: #343a40; border-left-color: #343a40; } .ribbon-default.ribbon-corner.ribbon-right:before { border-right-color: #343a40; border-left-color: transparent; } .ribbon-default.ribbon-corner.ribbon-bottom:before { border-top-color: transparent; border-bottom-color: #343a40; } /* :: Breadcrumb CSS */ .custom-breadcrumb-bg-img { height: 150px; padding: 45px; margin-bottom: 30px; border-radius: .25px; position: relative; z-index: 1; } @media only screen and (max-width: 767px) { .custom-breadcrumb-bg-img { padding: 30px 15px; } } .custom-breadcrumb-bg-img .breadcrumb-title { font-size: 24px; color: #ffffff; } .custom-breadcrumb-bg-img h6 { color: #ffffff; font-size: 14px; margin-bottom: 0; font-weight: 400; } /* :: Scrool Up CSS */ #scrollUp { width: 35px; height: 35px; background-color: #5578eb; bottom: 30px; right: 30px; color: #fff; text-align: center; font-size: 22px; line-height: 35px; -webkit-box-shadow: 0 1px 26px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 1px 26px 0 rgba(0, 0, 0, 0.15); } /* :: Editor CSS */ .tox .tox-mbtn__select-label { font-weight: 600 !important; cursor: pointer !important; } .editor-toolbar a { color: #222f3e !important; } .adm-editor { height: 350px !important; background-color: #282f3a; color: rgba(255, 255, 255, 0.5); padding: 15px; border: none; border-radius: 3px; } /* Settings Panel */ .settings-panel { border-left: 1px solid #e9e9e9; display: block; position: fixed; top: 70px; right: -300px; bottom: 0; width: 300px; height: 100%; -webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.08), 0 1px 6px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 15px rgba(0, 0, 0, 0.08), 0 1px 6px rgba(0, 0, 0, 0.08); background: #ffffff; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-property: right, box-shadow; -moz-transition-property: right, box-shadow; -o-transition-property: right, box-shadow; transition-property: right, box-shadow; z-index: 99999; border-radius: 10px 0 0 0; } .settings-panel .nav-tabs { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width: auto; margin: 0; padding: 0; background: #ffffff; } .settings-panel .nav-tabs .nav-item { border: none; } .settings-panel .nav-tabs .nav-item .nav-link { background: transparent; text-align: center; border: none; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; color: #6c7293; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; transition-property: color; -webkit-transition-property: color; -webkit-justify-content: center; justify-content: center; } .settings-panel .nav-tabs .nav-item .nav-link.active { background: transparent; color: #5867dd; } .settings-panel .tab-content { border: none; padding: 20px 0 0px 0; } .settings-panel .tab-content .tab-pane.scroll-wrapper { position: relative; max-height: 100vh; height: 100%; padding-bottom: 150px; } .settings-panel .settings-heading { padding: 40px 2px 10px 13px; color: #2d3748; margin-bottom: 0; border-bottom: 1px solid #e9e9e9; font-size: 16px; } .settings-panel .sidebar-bg-options { margin-bottom: 15px; color: #2d3748; background: #ffffff; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-property: background; -moz-transition-property: background; -o-transition-property: background; transition-property: background; cursor: pointer; } .settings-panel.open { right: 0; } .settings-panel .settings-close { position: absolute; top: 16px; right: 10px; color: #fd397a; background: transparent; border-radius: 4px; padding: 0 3px; cursor: pointer; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; z-index: 999; } .settings-panel .settings-close:hover { background: rgba(255, 255, 255, 0.4); } #theme-settings .settings-close { top: 15px; background: transparent; } #settings-trigger { background-color: #fff; height: 40px; width: 40px; line-height: 40px; border-radius: 50%; padding: 0; text-align: center; font-size: 16px; margin: 0 10px; cursor: pointer; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } #settings-trigger:hover { background-color: #5867dd; } #settings-trigger i { font-size: 1rem; line-height: 1rem; } @media (max-width: 320px) { #settings-trigger { display: none; } } #settings-trigger i { display: block; color: #acb4ce; font-size: 16px; -webkit-animation: rotate90deg linear 2s infinite; animation: rotate90deg linear 2s infinite; line-height: 40px; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } #settings-trigger i:hover { color: #ffffff; } @-webkit-keyframes rotate90deg { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate90deg { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } /* :: Alert CSS */ .animated-alert { /* The close button */ /* When moving the mouse over the close button */ } .animated-alert .alert { padding: 20px; color: #ffffff; margin-bottom: 15px; font-size: 14px; } .animated-alert .closebtn { margin-left: 15px; color: #ffffff; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; font-weight: 500; line-height: 0.7; } .animated-alert .closebtn:hover { color: black; } .animated-alert .alert { opacity: 1; transition: opacity 0.6s; /* 600ms to fade out */ } .alert-warning p { color: #936f1d; } .g-brd-around { border: solid 1px transparent !important; } .g-brd-red { border-color: #f00 !important; } .g-brd-gray-dark-v2 { border-color: #333 !important; } /* :: Analytic CSS Area */ .order-stats tbody tr td:first-child { width: 70px; max-width: 70px; } .analaytic-img { width: 40px; border-radius: 2px; } .icon-section { width: 45px; height: 45px; border-radius: 50%; margin-right: 15px; text-align: center; line-height: 45px; } .bg-primary-soft { background-color: rgba(110, 0, 255, 0.1) !important; color: #6e00ff !important; } .bg-danger-soft { background-color: rgba(255, 86, 48, 0.11) !important; color: #ff5630 !important; } .bg-success-soft { background-color: rgba(7, 191, 88, 0.1) !important; color: #07bf58 !important; } /* Crypto News Area CSS */ .currency-marquee-area { width: 100%; background: #f1f5fa; height: 60px; line-height: 66px; cursor: pointer; z-index: 22; overflow: hidden; border-radius: 2px; } [class*="js-conveyor-"] ul li { padding: 0 15px; line-height: 35px; font-size: 16px; } .line-legend { padding-top: 25px; padding-left: 18px; } .line-legend .chart-legend li { display: inline-block; font-size: 16px; text-transform: capitalize; position: relative; color: #283a5e; margin-left: 28px; } .line-legend .chart-legend li span { width: 15px; height: 15px; display: inline-block; background-color: #4e3a9d; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: -22px; top: 3px; } .line-legend .chart-legend li span.legend__two { background-color: #ff7e00; } .chart-item .sec-heading .sec__list li .fa-check { color: #fff; width: 25px; height: 25px; line-height: 25px; text-align: center; font-size: 13px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-right: 10px; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); } .chart-item .sec-heading .sec__list li .check-one { background-color: #ff7e00; } .chart-item .sec-heading .sec__list li .check-two { background-color: #4e3a9d; } .chart-item .sec-heading .sec__list li .check-three { background-color: #283a5e; } .chart-item .sec-heading .sec__list li { font-size: 16px; color: #677286; padding-bottom: 20px; font-weight: 500; } .chart-item .sec-heading .sec__list li:last-child { padding-bottom: 0; } .cryp-thumb { width: 20px; } .overlay-icon { font-size: 60px; color: rgba(110, 0, 255, 0.2); } /* :: Crypto CSS Area */ .single-solutin-slider .thumb-icon { width: 60px; height: 60px; display: block; } .currency-exchange .form-control { border-color: transparent; } .currency-exchange .custom-select { border: none; background: none; cursor: pointer; } .currency-exchange .custom-select:focus { border-color: transparent; box-shadow: none; } .cry-chart-area .crypto-report-history ul li a { font-size: 12px; color: #2d3748; font-weight: 600; border: 1px solid #e1eaea; margin-right: 5px; padding: 3px 10px; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .cry-chart-area .crypto-report-history ul li a:hover { background-color: #5867dd; color: #ffffff; border-color: #5867dd; } .cry-chart-area .apexcharts-toolbar { display: none; } /* :: CRM CSS Area */ .action-item { display: inline-block; font-size: 16px; cursor: pointer; color: #8492a6; background: transparent; border: 0; padding: .25rem; -webkit-transition: color .3s; -o-transition: color .3s; transition: color .3s; } .bg-gradient-warning { background: -o-linear-gradient(40deg, #ffab00, #fff800) !important; background: linear-gradient(50deg, #ffab00, #fff800) !important; } .bg-gradient-primary { background: -o-linear-gradient(40deg, #6e00ff, #b0f) !important; background: linear-gradient(50deg, #6e00ff, #b0f) !important; } .bg-gradient-danger { background: -o-linear-gradient(40deg, #ff5630, #ff9430) !important; background: linear-gradient(50deg, #ff5630, #ff9430) !important; } .clint-icon { width: 3rem; height: 3rem; line-height: 3rem; text-align: center; font-size: 16px; } .badge-soft-warning { color: #ffab00; background-color: #fec; } .single-conatct-area .conatct-thumb { width: 150px; height: 150px; margin: auto; position: relative; z-index: 1; margin-bottom: 20px; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .single-conatct-area .conatct-thumb::after { position: absolute; content: ""; z-index: 33; background-color: #5867dd; height: 130px; width: 10px; border-radius: 2px 0 0 2px; top: 10px; right: 0; -webkit-transition-duration: 600ms; -o-transition-duration: 600ms; transition-duration: 600ms; } .single-conatct-area .conatct-thumb img { border-radius: 5px; } .single-conatct-area .member-info h6 { font-size: 18px; margin-bottom: 5px; } .single-conatct-area .member-info p { font-size: 13px; } .single-conatct-area .contact-social-icon { padding-bottom: 15px; border-bottom: 1px solid #e1eaea; } .single-conatct-area .contact-social-icon a { color: #8492a6; font-size: 16px; -webkit-transition-duration: 400ms; -o-transition-duration: 400ms; transition-duration: 400ms; } .single-conatct-area .contact-social-icon a:hover { color: #1dc9b7; } .single-conatct-area .contact-footer { padding: 15px 0; } .single-conatct-area .contact-footer a { color: #2d3748; font-weight: 400; -webkit-transition-duration: 400ms; -o-transition-duration: 400ms; transition-duration: 400ms; } .single-conatct-area .contact-footer a:hover { color: #5867dd; } .single-conatct-area:hover .conatct-thumb { -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } .single-conatct-area:hover .conatct-thumb img { border-radius: 0 0 5px 5px; } .single-conatct-area:hover .conatct-thumb::after { width: 100%; opacity: 0.6; } .profile-social-icon a { color: #5867dd; font-size: 16px; margin: 0 10px; -webkit-transition-duration: 400ms; -o-transition-duration: 400ms; transition-duration: 400ms; } .profile-social-icon a:hover { color: #1dc9b7; } .profile-crm-area .nav-tabs { border-bottom: none; } .profile-crm-area .nav-tabs .nav-item.show .nav-link, .profile-crm-area .nav-tabs .nav-link.active { border-color: transparent; } .profile-crm-area .nav-tabs .nav-link.active { background-color: #5867dd; color: #fff; } .profile-crm-area .nav-tabs .nav-link { height: 30px; width: 80px; padding: 0; text-align: center; line-height: 28px; color: #2d3748; border-radius: 2px; font-size: 13px; } .profile-crm-area .nav-tabs .nav-link:focus, .profile-crm-area .nav-tabs .nav-link:hover { border-color: transparent; } .profile-crm-area .profile-row { padding: 15px 0; border-bottom: 1px solid #e1eaea; margin-bottom: 5px; } .profile-crm-area .profile-cat { color: #2d3748; font-weight: 600; } .media-pill { position: relative; padding: 2px 1rem 2px 2px; border-radius: 50rem; -webkit-transition: all .2s ease; transition: all .2s ease; } .avatar.rounded-circle img { border-radius: 50%; } .crm-chart .apexcharts-toolbar { display: none; } /* :: Job CSS Area */ .job-content-area { border: 1px solid #e1eaea; padding: 15px; } .job-content-area .job-logo-icon { -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; max-width: 40px; width: 40px; } .job-content-area .job-desc-info a h6 { -webkit-transition-duration: 300ms; -o-transition-duration: 300ms; transition-duration: 300ms; } .job-content-area .job-desc-info a h6:hover { color: #5867dd; } .job-content-area .job-button-area .job-duration { border: 1px solid #ddd; padding: 2px 10px; display: inline-block; color: #2d3748; font-size: 13px; font-weight: 600; -webkit-transition-duration: 400ms; -o-transition-duration: 400ms; transition-duration: 400ms; } .job-content-area .job-button-area .job-duration:hover { background-color: #5867dd; border-color: #5867dd; color: #ffffff; } .g-width-110 { width: 70px !important; } .tag-line-area li { display: inline-block; } .tag-line-area li a { border: 1px solid #ddd; padding: 2px 15px; display: inline-block; color: #2d3748; border-radius: 3px; -webkit-transition-duration: 400ms; -o-transition-duration: 400ms; transition-duration: 400ms; font-size: 12px; } .tag-line-area li a:hover { background-color: #5867dd; border-color: #5867dd; color: #ffffff; } .g-mx-10 { margin-left: 0.71429rem !important; margin-right: 0.71429rem !important; } .g-color-primary--hover:hover { color: #72c02c !important; } /* :: Ecommerce CSS Area */ .ecommerce-chart .apexcharts-zoom-icon, .ecommerce-chart .apexcharts-zoom-in-icon, .ecommerce-chart .apexcharts-zoom-out-icon, .ecommerce-chart .apexcharts-reset-zoom-icon, .ecommerce-chart .apexcharts-pan-icon, .ecommerce-chart .apexcharts-selection-icon, .ecommerce-chart .apexcharts-menu-icon, .ecommerce-chart .apexcharts-toolbar-custom-icon { display: none; } .ecommerce-slider-area { cursor: pointer; } .ecommerce-slider-area .eccomerce-single-slider .ecco-thumb { width: 280px; } .payment-area .nav-tabs .nav-link { border: 1px solid #e1eaea; } .single-clint-area-content { border: 1px solid #e1eaea; padding: 30px; margin-bottom: 30px; } /* :: Inbox CSS */ .email-content-area .mail-sidebar { border-right: 1px solid #e1eaea; } .email-content-area .mail-sidebar .menu-bar { width: 100%; float: right; height: 100%; min-height: 100%; } .email-content-area .mail-sidebar .menu-bar .menu-items { padding: 0; margin-bottom: 0; height: auto; list-style-type: none; } .email-content-area .mail-sidebar .menu-bar .menu-items li { padding: 6px 10px; transition: 0.4s; position: relative; border-radius: 4px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; } .email-content-area .mail-sidebar .menu-bar .menu-items li:hover { background: #eef0f7; } .email-content-area .mail-sidebar .menu-bar .menu-items li a { color: #2d3748; font-size: 14px; font-weight: 600; } .email-content-area .mail-sidebar .menu-bar .menu-items li a i { color: #5867dd; margin-right: 5px; font-weight: 600; } .email-content-area .mail-sidebar .menu-bar .menu-items li.active { background: #eef0f7; } .email-content-area .mail-sidebar .menu-bar .mail-profile-list .mail-profile-list-item { margin-bottom: 20px; } .email-content-area .mail-sidebar .menu-bar .mail-profile-list .mail-profile-list-item .mail-client .thumb { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; width: 20%; max-width: 20%; } .email-content-area .mail-sidebar .menu-bar .mail-profile-list .mail-profile-list-item .mail-client .thumb img { border-radius: 50%; } .email-content-area .mail-sidebar .menu-bar .mail-profile-list .mail-profile-list-item .mail-client .user { -webkit-box-flex: 0; -ms-flex: 0 0 80%; flex: 0 0 80%; width: 80%; max-width: 80%; margin-left: 15px; } .email-content-area .mail-list-area .mail-list { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #e1eaea; } .email-content-area .mail-list-area .mail-list .content { -webkit-box-flex: 0; -ms-flex: 0 0 65%; flex: 0 0 65%; width: 65%; max-width: 65%; } .email-content-area .mail-list-area .mail-list .content .sender-name { font-size: 15px; color: #161537; font-weight: 600; margin-bottom: 0; line-height: 1.5; } .email-content-area .mail-list-area .mail-list .content .message_text { font-size: 13px; margin-bottom: 0; } .email-content-area .mail-list-area .mail-list .time { text-align: right; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; width: 25%; max-width: 25%; } .email-content-area .mail-list-area .mail-list .time p { font-size: 12px; } .email-content-area .mail-list-area .mail-list .custom-control.custom-checkbox { -webkit-box-flex: 0; -ms-flex: 0 0 10%; flex: 0 0 10%; width: 10%; max-width: 10%; } .widgets-todo-list-area .todo-list li [type="checkbox"]:checked + span:not(.lever)::before { border-right: 2px solid #5867dd; border-bottom: 2px solid #5867dd; } .widgets-todo-list-area [type="checkbox"]:checked + span:not(.lever)::before { top: -4px; left: -5px; width: 12px; height: 22px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #5867dd; border-bottom: 2px solid #5867dd; -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .single-widget-area .profit-icon { -webkit-box-flex: 0; -ms-flex: 0 0 50px; flex: 0 0 50px; width: 50px; max-width: 50px; height: 50px; display: inline-block; font-size: 20px; line-height: 53px; text-align: center; color: #ffffff; background-color: #5867dd; border-radius: 50%; margin-right: 15px; } .widget-slider-content-inbox { border: 2px solid #5867dd; } .widget-slider-content-inbox .icon { color: #5867dd; } .widget-slider-area:hover { cursor: crosshair; } /* :: Inbox - 2 CSS */ .form-control.inbox- { margin-bottom: 0; padding: 8px; } .mail-ontact { padding: 5px !important; } .file-manager { list-style: none outside none; margin: 0; padding: 0; } .space-25 { margin: 25px 0; display: block; } .folder-list li a, .category-list li a { color: #2d3748; display: block; padding: 12px 11px 10px; font-size: 14px; -webkit-transition-duration: 300ms; -o-transition-duration: 300ms; transition-duration: 300ms; font-weight: 600; } @media only screen and (min-width: 576px) and (max-width: 767px) { .folder-list li a, .category-list li a { font-size: 13px; } } .folder-list li a i, .category-list li a i { margin-right: 8px; } .folder-list li a:hover, .category-list li a:hover { color: #0168fa; background-color: #f2f4f8; } .folder-list li a .badge, .category-list li a .badge { font-size: 10px; padding: 5px 10px; } .folder-list li:last-child a, .category-list li:last-child a { margin-bottom: 0; } .mail-box-header { background-color: #ffffff; } .mail-subject a { font-size: 13px; color: #718096; font-weight: 600; } .mail-ontact a { color: #718096; font-size: 13px; font-weight: 600; } .inbox-title h2 { font-size: 20px; } .inbox-title h2 span { font-size: 16px; color: #0168fa; } .label-danger { background-color: #fd397a; color: #ffffff; padding: 2px 10px; border-radius: 5px; font-size: 10px; } .label-warning { background-color: #ffb822; color: #ffffff; padding: 2px 10px; border-radius: 5px; font-size: 10px; } .label-info { background-color: #1dc9b7; color: #ffffff; padding: 2px 10px; border-radius: 5px; font-size: 10px; } .label-primary { background-color: #0168fa; color: #ffffff; padding: 2px 10px; border-radius: 5px; font-size: 10px; } .mail- { border-top: 1px solid #e1eaea; padding: 20px; background-color: #ffffff; } .message-title { font-size: 18px; font-weight: 400; margin-bottom: 20px; } .mail-tools.tooltip-demo h3 { font-size: 13px; color: #718096; font-weight: 400; } .mail-add-title { font-size: 12px; color: #888da8; font-weight: 400; margin-bottom: 0; } .mail- p { font-size: 13px; } .mail-attachment { background-color: #ffffff; border-top: 1px solid #e1eaea; padding: 20px 0; } .file-box { float: left; width: 220px; } .file { border: 1px solid #e1eaea; padding: 0; background-color: #ffffff; position: relative; margin-bottom: 30px; display: block; } .file .icon { padding: 37px 10px; text-align: center; } .file .icon i { font-size: 70px; color: #eef5f9; } .file .file-name { padding: 10px; background-color: #eef5f9; border-top: 1px solid #e1eaea; } .file .file-name .h6 { font-size: 12px; color: #718096; margin-bottom: 0; } .mail-attachment p { font-size: 14px; } .summernote { padding: 20px; } .summernote p { font-size: 12px; } .mail-box-header h2 { font-size: 20px; } .label.label-warning.inbox, .label.label-info.inbox, .label.label-danger.inbox, .label.label-warning.inbox { padding: 1px 7px; font-size: 11px; border-radius: 3px; } .unread td { padding-right: 0; } .mail-btn-group a { font-size: 16px; margin-right: 5px; padding: 5px 10px; color: #718096; text-align: center; border: 1px solid #e1eaea; } .mail-btn-group a:hover { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); border-color: transparent; } @media only screen and (max-width: 767px) { .mail-btn-group a { font-size: 16px; } } .mail-btn-group a i { font-weight: 600; } .mail-btn-group a:hover, .mail-btn-group a:focus { font-size: 16px; color: #ffffff; background-color: #5867dd; border-color: #5867dd; } .mail-btn-group .dashboard-dropdown .btn { font-size: 20px; } .search-wrapper { position: relative; z-index: 1; } .search-wrapper form button { font-size: 18px; cursor: pointer; color: #5867dd; background-color: transparent; border: none; position: absolute; top: 10px; right: 0; z-index: 9999999; } .mail-body p { font-weight: 300; } .mail-pager span { color: #718096; font-size: 14px; margin-right: 15px; } .mail-pager a { font-size: 20px; margin-right: 10px; color: #8392a5; text-align: center; border: 1px solid #e1eaea; padding: 3px 9px 0px 8px; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .mail-pager a:hover { color: #5867dd; -webkit-box-shadow: 0 0 10px 0 rgba(58, 70, 93, 0.2); box-shadow: 0 0 10px 0 rgba(58, 70, 93, 0.2); } .admi-mail-list { border-left: 1px solid #e1eaea; border-right: 1px solid #e1eaea; } .admi-mail-item { border-top: 1px solid #e1eaea; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 20px; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .admi-mail-item:hover { background-color: #f2f4f8; box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); } .admi-mail-item:last-child { border-bottom: 1px solid #e1eaea; } .admi-mail-star { font-size: 18px; color: #fdb901; } .admi-mail-subject span { font-size: 13px; color: #70737c; } .admi-mail-date { font-size: 13px; color: #2d3748; margin-left: auto; } @media only screen and (max-width: 767px) { .admi-mail-date { display: none; } } .admi-mail-from { font-size: 14.5px; color: #2d3748; font-weight: 600; } .admi-mail-checkbox { top: 4px; position: relative; } .mail-subject--text-- { font-size: 13px; color: #5f6368; } @media only screen and (max-width: 767px) { .mail-subject--text-- { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .mail-subject--text-- { display: inline-block; } } .mail-attach-file { margin-top: 8px; } .mail-attach-file span { border: 1px solid #dbdbdb; border-radius: 30px; padding: 5px 12px; font-size: 12px; color: #718096; font-weight: 400; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .mail-attach-file span:hover { border: 1px solid #5867dd; color: #5867dd; } .form-control.inbox-mail { width: 350px; border: 2px solid #dbdbdb; padding: 0 20px; border-radius: 6px; height: 40px; } @media only screen and (max-width: 767px) { .form-control.inbox-mail { width: 200px; } } .form-control.inbox-mail:focus { border-color: #0168fa; -webkit-box-shadow: none; box-shadow: none; } .search-results { position: absolute; top: 0; right: 5px; z-index: 999; } .search-results i { line-height: 0.7; } .mail-tools.tooltip-demo { -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .inbox-area .row .col-xl-3, .email-view-email--area .row .col-xl-3, .compose-email--area .row .col-xl-3 { -webkit-box-ordinal-group: 51; -ms-flex-order: 50; order: 50; } .inbox-area .row .col-xl-3 .ibox, .email-view-email--area .row .col-xl-3 .ibox, .compose-email--area .row .col-xl-3 .ibox { margin-top: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .inbox-area .row .col-xl-3, .email-view-email--area .row .col-xl-3, .compose-email--area .row .col-xl-3 { -webkit-box-ordinal-group: 51; -ms-flex-order: 50; order: 50; } .inbox-area .row .col-xl-3 .ibox, .email-view-email--area .row .col-xl-3 .ibox, .compose-email--area .row .col-xl-3 .ibox { margin-top: 50px; } } @media only screen and (max-width: 767px) { .inbox-area .row .col-xl-3, .email-view-email--area .row .col-xl-3, .compose-email--area .row .col-xl-3 { -webkit-box-ordinal-group: 51; -ms-flex-order: 50; order: 50; } .inbox-area .row .col-xl-3 .ibox, .email-view-email--area .row .col-xl-3 .ibox, .compose-email--area .row .col-xl-3 .ibox { margin-top: 50px; } } @media only screen and (max-width: 767px) { .compose-email--area input[type="file"] { width: 200px !important; } } .note-popover.popover { max-width: none; display: none; } .bullet.bullet-sm { width: 10px; height: 10px; } .bullet.bullet-success { background-color: #39DA8A; } .mail-side-menu { -webkit-box-flex: 0; -ms-flex: 0 0 17%; flex: 0 0 17%; width: 17%; max-width: 17%; margin-right: 30px; } @media only screen and (max-width: 767px) { .mail-side-menu { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; max-width: 100%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .mail-side-menu { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; width: 20%; max-width: 20%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .mail-side-menu { -webkit-box-flex: 0; -ms-flex: 0 0 27%; flex: 0 0 27%; width: 27%; max-width: 27%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .mail-side-menu { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; width: 20%; max-width: 20%; } } .mail-body--area { -webkit-box-flex: 0; -ms-flex: 0 0 80%; flex: 0 0 80%; width: 80%; max-width: 80%; } @media only screen and (max-width: 767px) { .mail-body--area { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .mail-body--area { -webkit-box-flex: 0; -ms-flex: 0 0 70%; flex: 0 0 70%; width: 70%; max-width: 70%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .mail-body--area { -webkit-box-flex: 0; -ms-flex: 0 0 77%; flex: 0 0 77%; width: 77%; max-width: 77%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .mail-body--area { -webkit-box-flex: 0; -ms-flex: 0 0 77%; flex: 0 0 77%; width: 77%; max-width: 77%; } } .compose-add-icon { font-size: 20px; color: #70737c; margin-right: 8px; } /* :: Email View CSS */ @media only screen and (max-width: 767px) { .mail-windoe-body-area { margin-top: 100px; } } .mail-windoe-body-area .mail-window-header { border-bottom: 1px solid #e1eaea; padding: 0 0 15px 0; } @media only screen and (max-width: 767px) { .mail-windoe-body-area .mail-window-header { border-bottom: none; } } .mail-windoe-body-area .mail-window-header a { font-size: 16px; margin-right: 10px; color: #718096; text-align: center; border: 1px solid #DFE3E7; padding: 7px 15px; -webkit-transition-duration: 400ms; -o-transition-duration: 400ms; transition-duration: 400ms; } .mail-windoe-body-area .mail-window-header a:hover { color: #ffffff; background-color: #5867dd; border-color: #5867dd; } .mail-windoe-body-area .mail-window-text-content { padding-top: 15px; } .mail-windoe-body-area .mail-window-text-content p { font-size: 14px; } .mail-windoe-body-area .mail-window-text-content .mail-avatra .mail-avatar-thumb { -webkit-box-flex: 0; -ms-flex: 0 0 50px; flex: 0 0 50px; max-width: 50px; width: 50px; border-radius: 50%; margin-right: 10px; } .mail-windoe-body-area .mail-window-text-content .mail-avatra .mail-avatar-thumb img { border-radius: 50%; } .mail-windoe-body-area .avatar-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #727cf5; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 600; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .mail-windoe-body-area .avatar-sm { height: 3rem; width: 3rem; } .bg-primary-lighten { background-color: rgba(114, 124, 245, 0.25) !important; } .note-popover .popover-content, .panel-heading.note-toolbar { padding: 0 0 5px 5px; margin: 0; border-bottom: 1px solid #e1eaea; } .note-editor.note-frame { border: 1px solid #e1eaea; border-radius: 3px; } .dropdown-menu.note-check.dropdown-fontname li a { color: #000; font-size: 12px; padding: 0 5px; } /* :: Coming Soon CSS */ .coming-soon-area { width: 100%; height: 100vh; position: relative; z-index: 2; } .coming-soon-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; -webkit-box-flex: 0; -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; width: 40%; margin-bottom: 50px; } @media only screen and (max-width: 767px) { .coming-soon-content { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%; } } .coming-soon-content .text-form-area h2 { color: #222222; font-size: 80px; font-weight: 700; margin-bottom: 15px; } @media only screen and (max-width: 767px) { .coming-soon-content .text-form-area h2 { font-size: 30px; } } .coming-soon-content .text-form-area p { font-size: 18px; color: #718096; } @media only screen and (max-width: 767px) { .coming-soon-content .text-form-area p { font-size: 13px; } } .social-info-area { margin-right: 70px; } @media only screen and (max-width: 767px) { .social-info-area { padding-bottom: 30px; margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .social-info-area { padding-bottom: 30px; } } .social-info-area p { display: inline-block; margin-bottom: 0; margin-right: 20px; color: #333; font-size: 18px; text-transform: uppercase; } @media only screen and (max-width: 767px) { .social-info-area p { display: block; margin-bottom: 30px; margin-right: 0; } } .social-info-area a { height: 40px; width: 40px; text-align: center; line-height: 40px; font-size: 18px; color: #ffffff; margin-right: 10px; display: inline-block; border-radius: 50%; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; } .social-info-area a:hover { background-color: #5867dd; } .countdown-timer { margin-top: 50px; } .countdown-timer #clock { display: -webkit-box; display: -ms-flexbox; display: flex; } .countdown-timer #clock div { font-size: 44px; font-weight: 600; background-color: #edf3f9; margin-right: 15px; padding: 32px 0; width: 120px; height: 120px; display: inline-block; text-align: center; line-height: 0.9; color: #5867dd; border-radius: 50%; } @media only screen and (max-width: 767px) { .countdown-timer #clock div { height: 60px; width: 60px; font-size: 20px; line-height: 1; background-color: transparent; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .countdown-timer #clock div { width: 100px; height: 100px; background-color: #edf3f9; font-size: 24px; } } .countdown-timer #clock div span { margin-top: 10px; font-size: 18px; color: #222222; font-weight: 500; display: block; } @media only screen and (max-width: 767px) { .countdown-timer #clock div span { font-size: 14px; } } .purple { background-color: #5867dd; } .sky { background-color: #00bae3; } .red { background-color: #d91a18; } .blue { background-color: #0085d7; } /* :: 404 CSS */ .colorlib-error-page-area { min-height: 100vh; width: 100%; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; } .error-content { text-align: center; padding: 30px 15px; } .erro-thumb img { max-width: 100%; height: auto; } .error-content h2 { font-size: 48px; color: #202020; margin-bottom: 15px; margin-top: 20px; text-transform: uppercase; } .error-content p { font-size: 18px; color: #636363; } .colorlib-btn { height: 60px; width: 240px; line-height: 60px; text-align: center; text-decoration: none; border-radius: 30px; display: inline-block; background-color: #43aed8; margin-top: 50px; color: #fff; font-weight: 600; transition-duration: 500ms; text-transform: capitalize; box-shadow: 0px 18px 32px 0px rgba(108, 98, 255, 0.2); } .colorlib-btn:hover { background-color: #6c62ff; color: #fff; } /* ---- Responsive Css ---- */ @media (min-width: 320px) and (max-width: 767px) { .error-content h2 { font-size: 24px; line-height: 1.5; } .error-content p { font-size: 15px; } } @media (min-width: 480px) and (max-width: 767px) { .error-content h2 { font-size: 30px; } } .bg-gradient-danger { background: linear-gradient(50deg, #ff5630, #ff9430) !important; } /* :: Sidebar Dark CSS */ .sidebar-dark .ecaps-page-wrapper .ecaps-sidemenu-area .slimScrollDiv { background: -o-linear-gradient(40deg, #273444, #272b44) !important; background: linear-gradient(50deg, #273444, #272b44) !important; -webkit-box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.09); box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.09); } .sidebar-dark .ecaps-page-wrapper .ecaps-sidemenu-area .slimScrollDiv .sidebar-menu li a { color: rgba(255, 255, 255, 0.8) !important; font-weight: 400; } .sidebar-dark .ecaps-page-wrapper .ecaps-sidemenu-area .slimScrollDiv .sidebar-menu > li.active > a, .sidebar-dark .ecaps-page-wrapper .ecaps-sidemenu-area .slimScrollDiv .sidebar-menu > li.menu-open > a { color: rgba(255, 255, 255, 0.8) !important; background: -o-linear-gradient(40deg, #273444, #272b44) !important; background: linear-gradient(50deg, #273444, #272b44) !important; } .sidebar-dark .sidebar-menu .treeview-menu > li.active > a { background-color: rgba(255, 255, 255, 0.07); } .sidebar-dark .color-white { color: rgba(255, 255, 255, 0.8) !important; } .sidebar-dark .sidebar-menu li a i { color: rgba(255, 255, 255, 0.8) !important; font-weight: 400; } .sidebar-dark .ecaps-logo a { background-color: #fff; } .sidebar-dark .top-header-area { background-color: #fff; } /* :: Dark CSS */ .vertical-dark { background-color: #1a1d27; } .vertical-dark .admetro-logo a { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .top-header-area { background-color: #12121b; box-shadow: none; border-bottom: none; } .vertical-dark .dropdown-menu { background-color: #2b273d; -webkit-box-shadow: 0 0 20px rgba(115, 105, 215, 0.15) !important; box-shadow: 0 0 20px rgba(115, 105, 215, 0.15) !important; } .vertical-dark .dropdown-item:focus, .vertical-dark .dropdown-item:hover { background-color: #13151c; } .vertical-dark .top-search-bar input { background-color: #2b273d; } .vertical-dark .message-box .dropdown-item { border-bottom-color: rgba(255, 255, 255, 0.05); } .vertical-dark .notifications-box .dropdown-item, .vertical-dark .notifications-box .nav-link { border-bottom-color: rgba(255, 255, 255, 0.05); } .vertical-dark .card { background-color: #2b273d; } .vertical-dark .bg-boxshadow { border-color: transparent; } .vertical-dark .footer-area { background-color: #1a1d27; border-top: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .az-content-label { color: #ffffff; } .vertical-dark h1, .vertical-dark h2, .vertical-dark h3, .vertical-dark h4, .vertical-dark h5, .vertical-dark h6 { color: #ffffff; } .vertical-dark .text-black { color: #fff !important; } .vertical-dark .border-bottom { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .vertical-dark .widget-new-content { background-color: #2b273d !important; } .vertical-dark .list-wrapper ul li { border: 1px solid rgba(255, 255, 255, 0.05); color: #ffffff; } .vertical-dark .add-items .form-control { border: 1px solid rgba(255, 255, 255, 0.05); background-color: transparent; } .vertical-dark small { color: #ffffff; } .vertical-dark .table thead th { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .table { border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .project-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.05); } .vertical-dark .table td, .vertical-dark .table th { border-top: 1px solid rgba(255, 255, 255, 0.05); color: #ffffff; } .vertical-dark .choose-layout-area, .vertical-dark .choose-layout-area .setting-trigger-icon { background-color: #2b273d; -webkit-box-shadow: 0 0 20px rgba(115, 105, 215, 0.15); box-shadow: 0 0 20px rgba(115, 105, 215, 0.15); } .vertical-dark .choose-layout-area .single-demos a { -webkit-box-shadow: 0 0 20px rgba(115, 105, 215, 0.15); box-shadow: 0 0 20px rgba(115, 105, 215, 0.15); } .vertical-dark .card-footer.bg-white, .vertical-dark .bg-boxshadow.bg-white, .vertical-dark .widget-chart-content.bg-white, .vertical-dark .widget-content-area-3.bg-white { background-color: #2b273d !important; } .vertical-dark .widget-content-area-3.bg-white { border-color: transparent; } .vertical-dark .widget-content-area-3 .footer-widget-3 { border-top: 1px solid transparent; } .vertical-dark .white-opacity-0_2 { border-color: transparent; } .vertical-dark .vertical-timeline-content .vertical-date { color: #ffffff; } .vertical-dark .light--timeline .vertical-timeline-content, .vertical-dark .llight--timeline.center-orientation .vertical-timeline-content { background: #2b273d; } .vertical-dark .light--timeline .vertical-timeline-content::before { border-color: transparent #2b273d transparent transparent; } .vertical-dark .light--timeline .vertical-timeline-block:nth-child(2n) .vertical-timeline-content::before, .vertical-dark .light--timeline.center-orientation .vertical-timeline-block:nth-child(2n) .vertical-timeline-content::before { border-color: transparent #2b273d transparent transparent; } .vertical-dark .light--timeline.center-orientation .vertical-timeline-content::before { border-color: transparent transparent transparent #2b273d; } .vertical-dark .accordian-style-1 a.collapsed { color: #ffffff; } .vertical-dark .card-header { border: none; } .vertical-dark p, .vertical-dark body { color: #757575; } .vertical-dark .button-demo, .vertical-dark .progress-demo, .vertical-dark .button-checkbox, .vertical-dark .md-content > div { background-color: #2b273d; } .vertical-dark .alert, .vertical-dark abbr, .vertical-dark address, .vertical-dark .tpography-unordered ul li { color: #ffffff; } .vertical-dark .alert-light-default, .vertical-dark .alert-light-primary, .vertical-dark .alert-light-warning, .vertical-dark .alert-light-success, .vertical-dark .alert-light-info, .vertical-dark .alert-light-danger, .vertical-dark .alert-light-dark { border-color: transparent; color: #222 !important; } .vertical-dark .border { border: 1px solid rgba(255, 255, 255, 0.1) !important; } .vertical-dark .modal-content { border: 1px solid transparent; background-color: #2b273d; } .vertical-dark .modal-backdrop { background-color: transparent; } .vertical-dark .modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .modal-footer { border-top: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .md-content, .vertical-dark .md-content h3, .vertical-dark .swal-modal, .vertical-dark .swal-icon--success__hide-corners { background-color: #2b273d; } .vertical-dark .invoice-content span, .vertical-dark div { color: #ffffff; } .vertical-dark .form-control { border: 1px solid rgba(255, 255, 255, 0.05); background-color: transparent; } .vertical-dark .swal-icon--success::after, .vertical-dark .swal-icon--success::before { background: transparent; } .vertical-dark .warning-element .agile-header { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .g-bg-gray-light-v5 { background-color: #2b273d !important; } .vertical-dark .single-banner .single-banner__title, .vertical-dark .single-banner .single-banner__category { color: #ffffff; } .vertical-dark .copy-cut-page-btn a { border: 1px solid rgba(255, 255, 255, 0.05); color: #ffffff; } .vertical-dark .wizard > .content { background: #2b273d; border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .wizard > .content > .body input { border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .text-dark { color: #ffffff !important; } .vertical-dark .dropzone.dz-clickable * { color: #ffffff; } .vertical-dark .external-event.dot-outline { background-color: #2b273d; } .vertical-dark .fc-month-button.btn.btn-primary, .vertical-dark .fc-agendaWeek-button.btn.btn-primary, .vertical-dark .fc-agendaDay-button.btn.btn-primary, .vertical-dark .fc-prev-button.btn.btn-primary, .vertical-dark .fc-next-button.btn.btn-primary, .vertical-dark .fc-today-button.btn.btn-primary.disabled { color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .btn-primary:not(:disabled):not(.disabled).active, .vertical-dark .btn-primary:not(:disabled):not(.disabled):active, .vertical-dark .show > .btn-primary.dropdown-toggle { color: #fff !important; border-color: rgba(255, 255, 255, 0.05); } .vertical-dark .table-bordered td, .vertical-dark .table-bordered th { border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .html5buttons-tables .btn.btn-default { background-color: #2b273d; } .vertical-dark table.table-bordered.dataTable tbody th, .vertical-dark table.table-bordered.dataTable tbody td, .vertical-dark table.table-bordered.dataTable th, .vertical-dark table.table-bordered.dataTable td, .vertical-dark .pagination li a { color: #ffffff; } .vertical-dark table.sortable > thead th:hover:not([data-defaultsort="disabled"]) { background: transparent; } .vertical-dark table.sortable th::after { color: #ffffff; } .vertical-dark .price-table-area--1 { border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .bg-gray { background-color: #2b273d; } .vertical-dark .chat-header-text { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .chat .chat-history .my-message, .vertical-dark .form-control.contact { background: #1c1a24; } .vertical-dark .chat .chat-history { border-bottom: 2px solid rgba(255, 255, 255, 0.05); } .vertical-dark .people-list .chat-list li.active, .vertical-dark .people-list .chat-list li:hover { background-color: #1c1a24; } .vertical-dark .skill .info .bootstrap-tagsinput input { border: 1px solid rgba(255, 255, 255, 0.05); background-color: #1c1a24; color: #ffffff; } .vertical-dark .profile-navbar a, .vertical-dark .contact-content-area .address-contact-area p, .vertical-dark .contact-content-area .address-contact-area a, .vertical-dark .call-to-action-text-1 p, .vertical-dark .folder-list li a, .vertical-dark .category-list li a { color: #9b9b9b; } .vertical-dark .card-footer-comment > a, .vertical-dark .error-content h2 { color: #ffffff; } .vertical-dark .mail-box-header { background-color: #2b273d; border: 1px solid transparent; } .vertical-dark .admi-mail-list { border-left: 1px solid transparent; } .vertical-dark .admi-mail-item { border-top: 1px solid transparent; background-color: transparent; } .vertical-dark .mail-subject--text-- { color: #fff !important; } .vertical-dark .mail-windoe-body-area .mail-window-header { border-bottom: 1px solid transparent; border-top: 1px solid transparent; } .vertical-dark .mail-windoe-body-area .mail-window-header a, .vertical-dark .mail-btn-group a { color: #ffffff; } .vertical-dark .mail-windoe-body-area .mail-window-header a:hover, .vertical-dark .mail-btn-group a:hover { color: #5867dd; } .vertical-dark .mail-windoe-body-area { border-left: 1px solid transparent; } .vertical-dark ul.wysihtml5-toolbar { border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark ul.wysihtml5-toolbar .btn-default { background-color: transparent; color: #ffffff; } .vertical-dark .jvectormap-zoomin, .vertical-dark .jvectormap-zoomout, .vertical-dark .jvectormap-goback { background: #1c1a24; } .vertical-dark .blog-details-text .post-meta a { color: #ffffff; } .vertical-dark .post-author-area { border-top: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .post-author-area .popular-tags li a, .vertical-dark .post-author-area .author-social-info p, .vertical-dark .post-author-area .author-social-info a { color: #9b9b9b; } .vertical-dark .comment_area .comment-content .comment-meta a.like, .vertical-dark .comment_area .comment-content .comment-meta a.reply { border: 1px solid rgba(255, 255, 255, 0.05); color: #9b9b9b; } .vertical-dark .comment_area { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .side-menu-area { margin-top: 30px; } .vertical-dark .left-side-navbar .nav-item.dropdown .btn { border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .right-side-navbar .nav-item.dropdown .btn, .vertical-dark .mail-subject--text-- span { color: #757575; } .vertical-dark .dashboard-clock #dashboardDate { color: #fff; } .vertical-dark .user-important-data-info .downloads--data-btn li a { color: #fff; } .vertical-dark .user-important-data-info .downloads--data-btn li a:hover, .vertical-dark .user-important-data-info .downloads--data-btn li a:focus { color: #5867dd; } .vertical-dark .user-important-data-info .sales-reports li span:last-child { color: #fff; } .vertical-dark .widget-slider-area.style-2 .owl-prev, .vertical-dark .widget-slider-area.style-2 .owl-next { color: #fff; } .vertical-dark .ticket-data-list li { border-bottom: 1px dashed rgba(255, 255, 255, 0.05); } .vertical-dark .widget-slider-3-area .slider-content-text h6 span { color: #fff; } .vertical-dark .project-table a { color: #fff; } .vertical-dark .widget-content-area-3 .footer-widget-3 a { color: #fff; } .vertical-dark .chat .chat-message .form-control { border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .folder-list li.active a, .vertical-dark .category-list li.active a, .vertical-dark .folder-list li a:hover, .vertical-dark .category-list li a:hover { background-color: rgba(255, 255, 255, 0.05); } .vertical-dark .mail-attach-file span { border: 1px solid rgba(255, 255, 255, 0.05); color: #757575; } .vertical-dark .note-editor.note-frame { border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .admi-mail-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .note-editor.note-frame .note-editing-area .note-editable { background-color: transparent; } .vertical-dark .single-card-three-area { background-color: #2b273d; } .vertical-dark .bg-light { background-color: #2b273d !important; } .vertical-dark .single-card-three-area .icon { background-color: transparent; } .vertical-dark .warning-element span { color: #757575; } .vertical-dark .breadcrumb { background-color: #1c1a24; } .vertical-dark .accordian-style-2 a.collapsed { color: #fff; } .vertical-dark .dd-item > button::before { color: #fff; } .vertical-dark .page-link { background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .dd-handle { border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .dd-handle:hover { color: #2ea8e5; background: rgba(255, 255, 255, 0.05); } .vertical-dark .widgets-todo-list-area .new-todo-item { border: 1px solid rgba(255, 255, 255, 0.05); background: transparent; } .vertical-dark .img-thumbnail { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .input-group-text { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .custom-file-label { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .nice-select { background-color: rgba(255, 255, 255, 0.05); border: solid 1px rgba(255, 255, 255, 0.05); } .vertical-dark .nice-select .list { background-color: #1c1a24; } .vertical-dark .nice-select .option:hover, .vertical-dark .nice-select .option.focus, .vertical-dark .nice-select .option.selected.focus { background-color: #2b273d; } .vertical-dark .clockpicker-popover .popover-title { background-color: #1c1a24; } .vertical-dark .clockpicker-popover .popover-content { background-color: #2b273d; } .vertical-dark .clockpicker-tick { color: #1c1a24; } .vertical-dark .btn-default { background-color: #1c1a24; color: #fff; } .vertical-dark .wizard > .steps .disabled a { background: #1c1a24; color: #434a54; border: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(255, 255, 255, 0.05); } .vertical-dark .dataTables_wrapper .dataTables_filter input, .vertical-dark .dataTables_wrapper .dataTables_filter input:focus { background-color: #1c1a24; color: #fff; } .vertical-dark div.dataTables_wrapper div.dataTables_info { color: #fff; } .vertical-dark .dataTables_wrapper .dataTables_paginate .paginate_button { color: #fff; } .vertical-dark .error-page-area { background-color: #1c1a24; } .vertical-dark .search-result .search-link { color: #fff; } .vertical-dark .vote-item { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.05); } .vertical-dark .vote-item .vote-title { color: #fff; } .vertical-dark .single-shop-area .product-desc { background-color: #2b273d; } .vertical-dark .tabs-container .form-group label { color: #fff; } .vertical-dark .shopping-cart .product-item .product-title a { color: #fff; } .vertical-dark .border-top { border-top: 1px solid rgba(255, 255, 255, 0.05) !important; } .vertical-dark .jvectormap-container { background-color: transparent !important; } .vertical-dark .single_icon i { color: #fff; } /* :: Sidebar Background Image */ .ecaps-page-wrapper.sidebar-bg-img .ecaps-sidemenu-area { background-image: url(img/bg-img/bg-1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } .ecaps-page-wrapper.sidebar-bg-img .ecaps-sidemenu-area .slimScrollDiv { background-color: transparent; } .ecaps-page-wrapper.sidebar-bg-img .ecaps-sidemenu-area .slimScrollDiv::after { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -2; content: ""; background-color: rgba(18, 18, 27, 0.7); } /* :: Sidebar colorfull CSS */ .sidebar-color .ecaps-page-wrapper .ecaps-sidemenu-area .slimScrollDiv { background-color: #5867dd; -webkit-box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.09); box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.09); } .sidebar-color .ecaps-page-wrapper .ecaps-sidemenu-area .slimScrollDiv .sidebar-menu li a { color: rgba(255, 255, 255, 0.85); } .sidebar-color .ecaps-page-wrapper .ecaps-sidemenu-area .slimScrollDiv .sidebar-menu > li.active > a, .sidebar-color .ecaps-page-wrapper .ecaps-sidemenu-area .slimScrollDiv .sidebar-menu > li.menu-open > a { color: #fff; font-weight: 400; background-color: rgba(255, 255, 255, 0.15); } .sidebar-color .sidebar-menu .treeview-menu > li.active > a { background-color: rgba(31, 45, 61, 0.15); } .sidebar-color .sidebar-menu li a i { color: rgba(255, 255, 255, 0.9) !important; } .sidebar-color .color-white { color: rgba(255, 255, 255, 0.9) !important; } .sidebar-color .ecaps-logo a { background-color: #fff; } .sidebar-color .top-header-area { background-color: #fff; } .sidebar-color .ecaps-page-wrapper .ecaps-sidemenu-area .slimScrollDiv .sidebar-menu > li.active > a, .sidebar-color .ecaps-page-wrapper .ecaps-sidemenu-area .slimScrollDiv .sidebar-menu > li.menu-open > a { background-color: rgba(31, 45, 61, 0.15); } /*# sourceMappingURL=style.css.map */ /* ---- Helper Css ---- */ .text-red { color: #ff2d20; font-size: 16px; } .custom-width-action { width: 6%; } .image-size { width: 80px; height: 80px; object-fit: contain; } .custom-font-size { font-size: 80px; color: #bcbcbc; } .custom-tag { cursor: pointer; } .custom-color-default { color: #ff4500; } .custom-color-default-2 { color: #ff4f1a; } .custom-color-1 { color: #0652DD; } .custom-color-2 { color: #ff3f34; } .custom-color-3 { color: #F79F1F; } .custom-color-4 { color: #6ab04c; } .custom-color-5 { color: #FC427B; } .custom-color-6 { color: #01a3a4; } .custom-color-7 { color: #B33771; } .custom-color-8 { color: #2e86de; } .custom-color-9 { color: #ff7500; } .custom-color-10 { color: #6F1E51; } .custom-color-11 { color: #ff793f; } .custom-color-12 { color: #ff5100; } .custom-color-13 { color: #0b1315 ; } .custom-color-14 { color: #ff4e59; } .custom-color-15 { color: #7f2fb2; } .custom-color-16 { color: #dd0733; } .custom-color-17 { color: #4baf47; } .custom-color-18 { color: #06be94; } .custom-color-19 { color: #c98568; } .custom-color-20 { color: #f50386; } .custom-color-21 { color: #644222; } .custom-color-22 { color: #f34100; } .custom-color-23 { color: #232323; } .custom-color-24 { color: #f25334; } .custom-color-25 { color: #ea1826; } .custom-color-26 { color: #214be0; } .custom-color-27 { color: #f1a82a; } .custom-color-28 { color: #9f974f; } .custom-color-29 { color: #00cde5; } .custom-color-30 { color: #1765e5; } .custom-color-31 { color: #ff6b6b; } .custom-color-32 { color: #fd5523; } .custom-color-33 { color: #fd235c; } .custom-color-34 { color: #282828; } .custom-color-35 { color: #af3512; } .custom-color-36 { color: #ffb237; } .custom-color-37 { color: #21aee0; } .custom-color-38 { color: #45b29d; } .custom-color-39 { color: #307bc4; } .custom-color-40 { color: #f7af21; } .hiddenradio [type=radio] { position: absolute; opacity: 0; width: 0; height: 0; } .hiddenradio [type=radio] + img { cursor: pointer; } .hiddenradio [type=radio]:checked + img { outline: 3px solid #f72b1c; } .hiddenradio [type=radio] + i { cursor: pointer; } .hiddenradio [type=radio]:checked + i { outline: 3px solid #f72b1c; } .hiddenradio span { font-size: 16px; line-height: 1.2; color: #363636; font-weight: 700; text-transform: uppercase; text-align: center; margin: 20px 0 20px; letter-spacing: 2px; display: block; } small { font-size: 95% !important; } @media screen and (max-width: 576px) { table.dataTable.nowrap td, table.dataTable.nowrap th { white-space: pre-wrap !important; } } .note-group-select-from-files { display: none; } #meta-tag { display: none; } #deleteChecked { display: none; } .hide { display: none; } .back-to-site { position: fixed; bottom: 0; right: 0; background-color: #F4F6F9; color: #fff; z-index: 999; } /*start image radio buttons*/ .img-btn > input{ display:none } .img-btn > img{ cursor:pointer; border:3px solid transparent; } .img-btn > input:checked + img{ border-color: #F72B1C; border-radius: 0.25rem; } /*end image radio buttons*/ /*start image hide or show*/ #imageModal { z-index: 9999; } .iyzi-btn { position: relative; cursor: pointer; } /* Modal */ .iyzi-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; } .iyzi-modal img { max-width: 100%; height: auto; } .iyzi-modal.show { display: block; } /*end image hide or show */ /*# Helper Css */