html, body { font-size: 13px; width: 100%; min-height: 100%; height: auto; background-color: #fafafa; font-weight: normal; color: #646464; line-height: 1.6; font-family: 'Montserrat', sans-serif !important; } @font-face { font-family: 'Montserrat', sans-serif !important; src: url(../fonts/Questrial-Regular.ttf); } html { overflow-x: hidden; } a, a:hover { color: #2d8bd9; cursor: pointer; } .toast:not(:last-child) { margin-bottom: 0.25rem; } p { line-height: 1.6; } small { font-size: 80%; font-weight: 400; } menu { padding-left: 0px; } .downloadBG { background-image: url(../images/downloadBG.jpg); background-repeat: no-repeat; background-size: cover; } a:hover, a:active, a:focus { outline: none !important; text-decoration: none !important; } b, strong, .bold { font-weight: bold; } .license { position: fixed; bottom: 2.5em; left: 0; transition: all 1s; cursor: pointer; background: linear-gradient(145deg, #063d71, #0084ff); box-shadow: 3px 3px 6px #a0a0a0, -3px -3px 6px #ffffff; padding: 7px 23px; } .license text { max-width: 0; font-size: 0; -webkit-transition: font-size 1s; transition: font-size 1s; } .license span { padding-left: 1.5em; } .license text { max-width: 0; font-size: 0; -webkit-transition: font-size .7s; transition: font-size .7s; } .license:hover span { font-size: 0; -webkit-transition: font-size 1s; transition: font-size 1s; } .license:hover text { max-width: 100%; margin-left: 5px; font-size: inherit; } .btn-critical { background-color: red; background-image: linear-gradient(90deg, #ff2d00, #ff0000); color: #ffffff; } .btn-critical.focus, .btn-critical:focus { box-shadow: 0 0 0 0.2rem #ff0000; color: #ffffff; } .btn-critical:not(:disabled):not(.disabled).active, .btn-critical:not(:disabled):not(.disabled):active, .show > .btn-critical.dropdown-toggle { color: #fff; background-color: #ff0000; border-color: #ff0000; box-shadow: 0 0 0 0.2rem rgb(255 0 0 / 52%); } .btn-high { background-color: #ff2d00; background-image: linear-gradient(90deg, #ffa300, #ff2d00); color: #ffffff; } .btn-high.focus, .btn-high :focus { box-shadow: 0 0 0 0.2rem #ff2d00; color: #ffffff; } .btn-high:not(:disabled):not(.disabled).active, .btn-high:not(:disabled):not(.disabled):active, .show > .btn-high.dropdown-toggle { color: #fff; background-color: #f92d1e; border-color: #ff2d00; box-shadow: 0 0 0 0.2rem #ff2d0073; } .btn-medium { background-color: #ffa300; background-image: linear-gradient(90deg,#FFC107, #FF9800); color: #ffffff; } .btn-mediuml.focus, .btn-medium:focus { box-shadow: 0 0 0 0.2rem #ffa300; color: #ffffff; } .btn-medium:not(:disabled):not(.disabled).active, .btn-medium:not(:disabled):not(.disabled):active, .show > .btn-medium.dropdown-toggle { color: #fff; background-color: #ffa300; border-color: #ffa300; box-shadow: 0 0 0 0.2rem rgb(255 163 0 / 60%); } .btn-low { background-color: #c3d100; background-image: linear-gradient(90deg,#4CAF50, #8BC34A); color: #ffffff; } .btn-low.focus, .btn-low:focus { box-shadow: 0 0 0 0.2rem #c3d100; color: #ffffff; } .btn-low:not(:disabled):not(.disabled).active, .btn-low:not(:disabled):not(.disabled):active, .show > .btn-low.dropdown-toggle { color: #fff; background-color: #c3d100; border-color: #c3d100; box-shadow: 0 0 0 0.2rem rgb(195 209 0 / 60%); } .btn-no { background-color: #00ad42; background-image: linear-gradient(90deg, #388E3C, #4CAF50); color: #ffffff; } .btn-no.focus, .btn-no:focus { box-shadow: 0 0 0 0.2rem #00ad42; color: #ffffff; } .btn-no:not(:disabled):not(.disabled).active, .btn-no:not(:disabled):not(.disabled):active, .show > .btn-no.dropdown-toggle { color: #fff; background-color: #00ad42; border-color: #00ad42; box-shadow: 0 0 0 0.2rem rgb(0 173 66 / 55%); } label.error { color: #ec5e69; font-weight: 500; margin-top: 5px; float: left; font-size: 12px; } .header-text { text-transform: uppercase; padding: 0; font-size: 14px; font-weight: 500; color: #2b2b2b; } .well { border-radius: 0; box-shadow: none; border: 0; background-color: #CCC; } .breadcrumb { font-size: 13px; } .breadcrumb.breadcrumb-style-1 { padding: 0; border-radius: 0; background: transparent; } .breadcrumb-item + .breadcrumb-item::before { color: rgba(0, 0, 0, 0.4); } .breadcrumb-separator-1 .breadcrumb-item + .breadcrumb-item::before, .breadcrumb-separator-2 .breadcrumb-item + .breadcrumb-item::before { font-family: "icomoon"; } .breadcrumb-separator-1 .breadcrumb-item + .breadcrumb-item::before { content: "\e315"; } .breadcrumb-separator-2 .breadcrumb-item + .breadcrumb-item::before { content: "\e5c8"; } .breadcrumb li i { font-size: 14px; margin-right: 4px; color: rgba(0, 0, 0, 0.4); display: block; float: left; } .breadcrumb li a { color: rgba(0, 0, 0, 0.4); font-weight: 500; } .breadcrumb > .active { color: #0686d8; font-weight: 500; } .breadcrumb li a:hover { text-decoration: underline !important; } .breadcrumb-header { font-size: 22px; font-weight: 300; color: rgba(0, 0, 0, 0.6); margin-top: 20px; margin-bottom: 24px; } .panel-transparent { background-color: transparent; } .card { border-radius: 6px; padding: 0px !important; margin-bottom: 20px; border: 1px solid #e5e9ec; -webkit-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1); } .card-body { position: relative !important; } .card.text-white .card-title { color: #fff; } .card-header:first-child { border-radius: 6px 6px 0 0; } .card-footer { border-color: #e5e9ec; border-radius: 0 0 6px 6px; } .card > .list-group:first-child .list-group-item:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; } .card > .list-group:last-child .list-group-item:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .card-title { padding: 0; padding-bottom: 20px; font-size: 14px; font-weight: 500; color: #333; margin-bottom: 0; font-weight: bold; } .card-title-small { padding-left: 5px; font-size: 12px; text-transform: none; opacity: 0.7; color: #2b2b2b; font-weight: normal; } .alert { border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.07); padding: 12px 15px; font-size: 13px; } .alert-dismissible .close { padding: 12px 15px; } .alert-heading { font-size: 14px; font-weight: bold; margin: 5px 0; } .list-group-item { border-color: #e5e9ec; padding: 12px 17px; } .list-group-item.active { background-color: #0686d8; border-color: #0686d8; } .add-tab-icon { padding: 8px; z-index: 2; border-radius: 50px; color: #265f86; box-shadow: 4px 4px 7px #bebebe, -4px -4px 7px #ffffff; } .btn-social { padding: 10px 15px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .btn-social:hover { color: #fff; opacity: 0.8; } .btn-social:focus { color: #fff; } .btn-facebook { background-color: #3b5998; color: #fff; } .btn-twitter { background-color: #55acee; color: #fff; } .btn-google { background-color: #dd4b39; color: #fff; } .btn-youtube { background-color: #bb0000; color: #fff; } .btn-vimeo { background-color: #1eb8eb; color: #fff; } .btn-dribbble { background-color: #ea4c89; color: #fff; } .btn-instagram { background-color: #3f729b; color: #fff; } .btn-pinterest { background-color: #bd081b; color: #fff; } .btn-vk { background-color: #507299; color: #fff; } .btn-rss { background-color: #ff6600; color: #fff; } .btn-flickr { background-color: #ff0084; color: #fff; } .buttons-toolbar-p { padding-top: 20px; padding-bottom: 15px; } .buttons-dropup-m { margin-top: 8px; } .divider { display: block; content: ""; width: 100%; height: 1px; background: #dde1e4; margin: 30px 0; } .divider.d-lg { margin: 50px 0; } .divider.d-sm { margin: 20px 0; } li.divider { margin: 7px 0; } .modal-content { border-radius: 6px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border: 0; } body.modal-open { overflow: visible; } body.swal2-container { overflow: visible; } .swal2-container { padding-right: 0 !important; } .nav li a { color: #596b8c; } .nav li a:hover, .nav li a.active { color: #ffffff; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-color: #e5e9ec; border-bottom-color: transparent; } .nav-tabs { border-color: #e5e9ec; } .nav-tabs > li > a { color: #2b2b2b; } .nav > li > a:focus, .nav > li > a:hover { background-color: #fff; } .nav-tabs > li > a:hover { border-color: #edf1f4; border-bottom: transparent; color: #17191b; } .nav-justified.nav-tabs > li > a:hover { border-color: #ddd; border-bottom: transparent; } .nav-tabs > li > a { border-radius: 0 !important; border-top-left-radius: 3px !important; border-top-right-radius: 3px !important; color: #a5a5a5; border-bottom: 1px solid #e2e2e2; } .nav-tabs { border-bottom: 1px solid #e5e9ec !important; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border: 1px solid #e2e2e2; } .nav-tabs > li > a:hover { background: #fafafa; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555; cursor: default; background-color: #fff; border-bottom-color: #fff; } .nav-pills > li > a { color: #777; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #fff; background-color: #14a2bb; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #0686d8; } .tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs { border-bottom: 0; } .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content > .active, .pill-content > .active { display: block; } .tabs-below > .nav-tabs { border-top: 1px solid #e2e2e2; } .tabs-below > .nav-tabs > li { margin-top: -1px; margin-bottom: 0; } .tabs-below > .nav-tabs > li > a { border-bottom: 0 !important; } .tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus { border-top-color: #e2e2e2; border-bottom-color: transparent; } .tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus { border-color: #fff #e2e2e2 #e2e2e2 #e2e2e2 !important; } .tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li { float: none; } .tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; border-bottom: 0; } .tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #e2e2e2; border-bottom: 0 !important; } .tabs-left > .nav-tabs > li > a { margin-right: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus { border-color: #eeeeee #e2e2e2 #eeeeee #eeeeee; } .tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus { border-color: #e2e2e2 transparent #e2e2e2 #e2e2e2; border-right-color: #ffffff; border-bottom: 1px solid #e2e2e2; border-top-left-radius: 3px !important; border-bottom-left-radius: 3px !important; border-top-right-radius: 0 !important; } .tabs-right > .nav-tabs { float: right; margin-left: 19px; border-left: 1px solid #e2e2e2; border-bottom: 0 !important; } .tabs-right > .nav-tabs > li > a { margin-left: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus { border-color: #eeeeee #eeeeee #eeeeee #e2e2e2; } .tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus { border-color: #e2e2e2 #e2e2e2 #e2e2e2 transparent; border-left-color: #ffffff; border-bottom: 1px solid #e2e2e2; border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; border-top-left-radius: 0 !important; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:hover { border-bottom: #fff !important; } .nav-tabs.nav-justified { border-bottom: 0 !important; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:hover { border: 1px solid #e2e2e2; } .tab-content { margin-top: 15px; } .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover { background-color: #2ec5d3; } .popover { border: 1px solid #e5e9ec; } .popover-header { font-weight: bolder; -webkit-font-smoothing: antialiased; font-size: 13px; padding: 10px 15px; } .popover-body { font-size: 13px; padding: 10px 15px; font-family: "Rubik", sans-serif; } .bs-popover-auto[x-placement^="right"], .bs-popover-right { margin-left: 12px; } .bs-popover-auto[x-placement^="right"] > .arrow::before, .bs-popover-right > .arrow::before { border-right-color: #e5e9ec; } .form-control { border-radius: 3px; box-shadow: none; border-color: #e5e9ec; color: #646464; } .form-control:focus { border-color: #d0d5d9; box-shadow: none; } input[type="checkbox"] { font-size: 15px; } .form-check { padding-left: 1.5rem; } .custom-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(20, 116, 241, 0.25); } .custom-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(20, 53, 241, 0.25); } .custom-range:focus::-ms-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(20, 108, 241, 0.25); } .custom-range::-webkit-slider-thumb { background-color: #0686d8; } .custom-range::-webkit-slider-thumb:active { background-color: #cde9fa; } .custom-range::-moz-range-thumb { background-color: #0686d8; } .custom-range::-moz-range-thumb:active { background-color: #cde6fa; } .custom-range::-ms-thumb { background-color: #0686d8; } .custom-range::-ms-thumb:active { background-color: #cde9fa; } input.form-control.input-rounded { border-radius: 60px; } .input-group-text { background-color: #e5e9ec; border-color: #e5e9ec; } .custom-file-label::after { background-color: #e5e9ec; border-color: #e5e9ec; height: auto; padding: 10px 12px; } .custom-file-label { border-color: #e5e9ec; border-radius: 6px; padding: 10px 12px; height: auto; } .custom-file { height: auto; } .bootstrap-tagsinput { border-radius: 0; box-shadow: none; border-color: #e5e9ec; padding: 8px 12px; border-radius: 6px; } .note-editor .note-toolbar, .note-editor .note-statusbar { background-color: #f3f3f3; } .note-editor, .note-editor .note-toolbar, .note-editor .note-statusbar .note-resizebar { border-color: #d7d7d7; } .dd-handle { border-radius: 0; background-color: #f3f3f3; border: none; font-weight: 500; color: #2b2b2b; } .notification { position: absolute; margin-top: 2px; margin-left: -6px; padding: 3px 3px; } .select2-selection { min-height: 40px !important; line-height: 1.5; padding: 0.5rem 0.75rem !important; border-radius: 3px !important; box-shadow: none; border-color: #e5e9ec !important; max-height: 40px; overflow: auto; } .select2-selection .select2-selection__rendered { line-height: 1.5 !important; padding-left: 0 !important; color: #646464 !important; } .select2-selection.select2-selection--multiple { padding: 2px 12px !important; } .select2-selection.select2-selection--multiple .select2-selection__rendered { margin-top: 3px; margin-bottom: -3px; } .select2-selection.select2-selection--multiple .select2-selection__rendered input { margin-top: 0 !important; } .select2-search--dropdown .select2-search__field { border-radius: 6px !important; box-shadow: none; border-color: #e5e9ec !important; line-height: 19px; } .select2-search--dropdown .select2-search__field:focus, .select2-search--dropdown .select2-search__field:active { box-shadow: none !important; border-color: #e5e9ec !important; outline: none; } .select2-dropdown { padding: 10px 12px !important; border-color: #e5e9ec !important; border-top: 1px solid #e5e9ec !important; margin-top: 3px !important; border-radius: 6px !important; } .select2-dropdown--above { margin-top: -3px !important; border-bottom: 1px solid #e5e9ec !important; } .select2-selection__choice { margin-top: 0 !important; height: 19px !important; border: 0 !important; background: #0686d8 !important; color: #fff !important; font-size: 12px !important; font-weight: bold !important; } .select2-selection__choice span { color: #fff !important; } .select2-container--default .select2-results__option .select2-results__option { border-radius: 6px; margin: 2px 0; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #0686d8; } .table-no-sp th, td { } .stickyCol-table { border: none; border-right: solid 1px #DDEFEF; border-collapse: separate; border-spacing: 0; } .stickyCol-table thead th { border: none; padding: 10px; text-align: left; text-shadow: 1px 1px 1px #fff; white-space: nowrap; font-size: 12px; } .stickyCol-table tbody td { border-bottom: solid 1px #DDEFEF; padding: 10px; text-shadow: 1px 1px 1px #fff; white-space: nowrap; font-weight: 500; } .stickyCol-wrapper { position: relative; } .stickyCol-scroller { margin-left: 184px; overflow-x: scroll; overflow-y: visible; padding-bottom: 5px; width: auto; } .stickyCol-table .stickyCol-sticky-col { border-left: solid 1px #DDEFEF; border-right: solid 1px #DDEFEF; left: 0; position: absolute; top: auto; width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stickyCol-4-table { border: none; border-right: solid 1px #DDEFEF; border-collapse: separate; border-spacing: 0; } .stickyCol-4-table thead th { background-color: #e3e3e4; border: none; padding: 10px; text-align: left; text-shadow: 1px 1px 1px #fff; white-space: nowrap; font-size: 13px; } .stickyCol-4-table tbody td { border-bottom: solid 1px #DDEFEF; padding: 10px; text-shadow: 1px 1px 1px #fff; white-space: nowrap; } .stickyCol-4-wrapper { position: relative; } .stickyCol-4-scroller { margin-left: 654px; overflow-x: scroll; overflow-y: visible; padding-bottom: 5px; width: auto; } .stickyCol-4-table .sticky-col-one { border-left: solid 1px #DDEFEF; border-right: solid 1px #DDEFEF; left: 0; position: absolute; top: auto; width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stickyCol-4-table .sticky-col-two { border-left: solid 1px #DDEFEF; border-right: solid 1px #DDEFEF; left: 200px; position: absolute; top: auto; width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stickyCol-4-table .sticky-col-three { border-left: solid 1px #DDEFEF; border-right: solid 1px #DDEFEF; left: 350px; position: absolute; top: auto; width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stickyCol-4-table .sticky-col-four { border-left: solid 1px #DDEFEF; border-right: solid 1px #DDEFEF; left: 500px; position: absolute; top: auto; width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stickyCol-4-table .sticky-col-five { border-left: solid 1px #DDEFEF; border-right: solid 1px #DDEFEF; left: 650px; position: absolute; top: auto; width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stickyCol-5-scroller { margin-left: 800px; overflow-x: scroll; overflow-y: visible; padding-bottom: 5px; width: auto; } .proDescription { word-break: break-all; } .name-initial { width: 50px; height: 50px; color: #FFFFFF; padding: 13px; font-size: 1.1em; margin:0px; } .primary_shift { border-left: 4px solid #007bff !important; } .danger_shift { border-left: 4px solid #dc3545 !important; } .warning_shift { border-left: 4px solid #ffc107 !important; } .success_shift { border-left: 4px solid #28a745 !important; } .dark_shift { border-left: 4px solid #343a40 !important; } .info_shift { border-left: 4px solid #17a2b8 !important; } .table-monitoring td { font-size: small; } .decs_lenth { display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } table .table-usage { width: 100%; display: block; } table.table-usage tbody, table.table-usage thead { display: block; } .table-usage tbody { height: 500px; width: 100%; overflow-y: auto; overflow-x: hidden; } .table-usage tbody td, .table-usage thead th { width: 20%; } .table-usage .td-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-usage tr { display: table; width: 100%; table-layout: fixed; } .table-usage thead { width: calc(100% - 1em); display: inline-block; width: 100%; } .tabdata tbody { overflow-y: auto; width: 100%; } .tabdata tr { display: table-row; width: 100%; } .tabdata .tdshort { } .ad_tab { white-space: nowrap; font-size: 12px; } .table > tbody > tr, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { border-color: #e5e9ec !important; border-top: 1px solid; border-bottom: 1px solid; } .table > tbody > tr > td { font-weight: 500; } .activity-break-down-table.table > caption + thead > tr:first-child > th, .activity-break-down-table.table > colgroup + thead > tr:first-child > th, .activity-break-down-table.table > thead:first-child > tr:first-child > th, .activity-break-down-table.table > caption + thead > tr:first-child > td, .activity-break-down-table.table > colgroup + thead > tr:first-child > td, .activity-break-down-table.table > thead:first-child > tr:first-child > td { line-height: 40px; } .table:not(.table-borderless) > thead > tr > th { border-bottom: 1px solid #e5e9ec; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: #fff; } table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1, table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background-color: #f3f3f3; } .dataTables_length { margin-top: 10px; } .dataTables_paginate { margin-bottom: 10px; } .table-data-width { width: 100%; } .paginate_button current { margin-bottom: 10px !important; } .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { padding: 8px 10px; vertical-align: middle; } .table-sm td, .table-sm th { padding: 6px !important; } .media img { border-radius: 6px; } .dropdown-menu li { padding: 5px 15px; color: #5f5f5f; font-size: 13px; } .dropdown-menu li a { color: #596b8c; } .dropdown-menu li a:hover { background: transparent; text-decoration: none; color: #000; } .navbar-nav > li > .dropdown-menu { margin-top: 25px !important; } .dropdown-item.active, .dropdown-item:active { color: #fff; text-decoration: none; background-color: #0686d8; } .dropdown-menu .dropdown-item:hover { color: #fff; background-color: #0686d8; } .dropdown-menu.title-caret:after { border-bottom: 7px solid #fff; } .dropdown-menu > li.active > a:hover, .dropdown-menu > li.active > a:focus, .dropdown-menu > li.active > a:active, .dropdown-menu > li.active > a, .dropdown-menu > li.active > a:hover, .dropdown-menu > li.active > a:focus { background: #f3f3f3; color: #2b2b2b; } .drop-title { display: block; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px solid #e5e9ec; background: #fff; padding: 12px; color: #6a6a6a; margin: 0px; font-size: 13px !important; font-weight: bold !important; color: #333 !important; } .drop-title-link { float: right; display: inline !important; padding: 0px !important; height: 18px; width: 18px; overflow: hidden; vertical-align: text-top; line-height: 18px !important; text-align: center; border-radius: 100%; } .drop-title-link i { margin-right: 0 !important; } .dropdown-menu li.drop-all a { padding: 10px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: #707070; background: #fff; font-size: 14px; } .dropdown-menu li.drop-all a:hover { background: #f3f3f3; } .dropdown-sm { width: 190px; } .dropdown-md { width: 230px; } .dropdown-lg { width: 280px; } .dropdown-content { padding-top: 0; padding-bottom: 0; } .dropdown-menu li a { padding: 5px 15px; color: #5f5f5f; font-size: 13px; font-weight: 400; display: block; } .dropdown-menu li a i { margin-right: 10px; } .dropdown-menu li.no-link { padding: 7px 10px 7px 10px; } .dropdown-menu li.li-group { border-bottom: 1px solid #e5e9ec; padding: 5px 0px 5px 0px; } .nav .show > a, .nav .show > a:hover, .nav .show > a:focus { background-color: #eee; border-color: transparent; } .right-sidebar-top .nav > li > a { padding: 10px 15px; } .page-right-sidebar-inner .tab-content { margin-top: 0; } .nav > li > a { font-weight: 400; padding: 10px 15px; } .navbar .dropdown .dropdown-menu { display: block; visibility: hidden; opacity: 0; transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; -ms-transition: all 300ms ease; margin-top: 40px !important; } .navbar .dropdown .dropdown-menu.dropdown-list li:first-child { margin-top: 5px; } .navbar .dropdown .dropdown-menu.dropdown-list li:last-child { margin-bottom: 5px; } .navbar .dropdown .dropdown-menu.dropdown-list.theme-settings li:first-child { margin-top: 0; } .navbar .show .dropdown-menu { visibility: visible; opacity: 1; margin-top: 15px !important; box-shadow: 0px 0px 12px #d0e6fb75; border: none; right: 15px; min-width: 14rem; } .navbar .dropdown { display: inline-block; } .dropdown-notifications { height: auto !important; max-height: 250px; } .dropdown-notifications .dropdown-oc li a { padding-right: 0; border-bottom: 1px solid #e5e9ec; } .dropdown-notifications .dropdown-oc li a span.notification-badge { width: 30px; height: 30px; display: block; line-height: 30px; text-align: center; border-radius: 100%; display: inline-block; vertical-align: top; margin-top: 10px; } .dropdown-notifications .dropdown-oc li a span.notification-badge i { margin-right: 0px; } .dropdown-notifications .dropdown-oc li a span.notification-info { width: 204px; display: block; padding: 4px 5px; display: inline-block; vertical-align: middle; font-weight: normal; } .dropdown-notifications .dropdown-oc li a span .notification-date { padding: 5px; } .dropdown-notifications .dropdown-oc li a span.notification-info span { margin-bottom: 0px; } .dropdown-notifications .dropdown-oc li a span.notification-info small { color: #aaa; } #accordion .panel, #accordion2 .card { padding: 0; } #accordion .card-title, #accordion2 .card-title { padding: 20px; } .accordion > .card .card-header { padding: 12px 17px; margin-bottom: 0px; cursor: pointer; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; font-weight: 700; } .accordion > .card .card-header[aria-expanded="false"] { background: #f7f7f7 !important; } .accordion > .card .card-header[aria-expanded="true"] { border-bottom: 0; color: #0686d8; } .accordion > .card .card-body { padding: 5px 17px 17px 17px !important; border-bottom: 1px solid rgba(0, 0, 0, .125) } .panel-default > .card-header + .panel-collapse > .card-body, .panel-success > .card-header + .panel-collapse > .card-body, .panel-warning > .card-header + .panel-collapse > .card-body, .panel-danger > .card-header + .panel-collapse > .card-body { padding: 20px; } .card-header, .panel-group .card { border-radius: 0; } .panel-default > .card-header + .panel-collapse > .card-body, .panel-success > .card-header + .panel-collapse > .card-body, .panel-info > .card-header + .panel-collapse > .card-body, .panel-warning > .card-header + .panel-collapse > .card-body, .panel-danger > .card-header + .panel-collapse > .card-body { border-color: #fff; } .panel-default { border-color: #e6e9ec; } .panel-success { border-color: #2ec5d3; } .panel-info { border-color: #5893df; } .panel-warning { border-color: #f1c205; } .panel-danger { border-color: #ec5e69; } .panel-success > .card-header { background-color: #2ec5d3; border-color: #2ec5d3; } .panel-info > .card-header { background-color: #5893df; border-color: #5893df; } .panel-warning > .card-header { background-color: #f1c205; border-color: #f1c205; } .panel-danger > .card-header { background-color: #ec5e69; border-color: #ec5e69; } .panel-default .card-title > .small, .panel-default .card-title > .small > a, .panel-default .card-title > a, .panel-default .card-title > small, .panel-default .card-title > small > a { color: #2b2b2b; } .card-title > .small, .card-title > .small > a, .card-title > a, .card-title > small, .card-title > small > a { color: #fff; } .icon-list-row .col-sm { text-align: center; padding-top: 15px; padding-bottom: 15px; font-size: 22px; } .material-icons { font-size: inherit; } .page-container { min-height: 100%; background: #fff; overflow: hidden; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .page-container:not(.container) { width: 100%; } .page-container.container { padding-left: 0px; padding-right: 0px; } .page-header { padding-bottom: 0px; margin: 0px; border-bottom: none; height: 61px; position: fixed; right: 0; width: calc(100% - 220px); float: right; top: 0; background:linear-gradient(45deg, #49b8fe, #9380ff); box-shadow: 0px 0px 10px #c9c9dd; z-index: 999; } .page-header-fixed .page-header { position: fixed; z-index: 99; left: 261px; right: 0; top: 0; width: calc(100% - 261px); } .navbar { padding: 10px 15px !important; } .page-header .navbar { padding: 0 !important; } .page-header-fixed .secondary-sidebar-bar { position: fixed; background: #fff !important; width: 100%; } .page-header-fixed.collapsed-sidebar .page-header { left: 122px; width: calc(100% - 122px); } .page-header-fixed.collapsed-sidebar .secondary-sidebar-bar { width: 60px !important; } .page-header-fixed .page-secondary-sidebar { padding-top: 61px; } .page-header-fixed .page-header .navbar-default { -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; } .page-header-fixed .page-header.changeBg .navbar-default { background: #fff !important; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; } .page-header-fixed .page-container.container .page-header { padding-right: 15px; padding-left: 195px; left: 0; right: 0; margin: auto; } .page-header-fixed.page-sidebar-collapsed .page-container.container .page-header { padding-right: 15px; padding-left: 75px; left: 0; right: 0; margin: auto; } @media (min-width: 768px) { .page-header-fixed .page-container.container .page-header { width: 750px; } } @media (min-width: 992px) { .page-header-fixed .page-container.container .page-header { width: 970px; } } @media (min-width: 1200px) { .page-header-fixed .page-container.container .page-header { width: 1170px; } } .page-sidebar-collapsed.page-header-fixed .page-header { left: 61px; } .page-header .form-control { background-color: #f1f3f6; color: #333; font-size: 13px; } .page-header .form-control::placeholder { color: #cfd8e7; } .page-sidebar-fixed .page-header { z-index: 41; } .page-header .navbar-default { background-color: transparent; border: 0; margin-bottom: 0; height: 61px; border-radius: 0; padding: 0; border-bottom: 1px solid #e5e9ec; } .page-header .navbar-default .container-fluid, .page-header .navbar-default .navbar-collapse { height: 56px !important; } .page-header .navbar-default .navbar-brand i.fixed-sidebar-button-active { background: #fff; } .page-header .navbar-nav > li.v-divider { display: block; width: 1px; height: 26px; background: #f3f3f3; margin: 21px 15px; } .page-header .navbar-nav > li > a { display: block; line-height: 36px; color: #596b8c; font-size: 11px; padding: 10px 15px !important; } .page-header .navbar-nav > li > a:hover, .page-header .navbar-nav > li > a:link, .page-header .navbar-nav > li > a:focus { color: #596b8c !important; background: transparent !important; } .page-header .navbar-nav > li > a::after { display: none; } .page-header .navbar-nav > li > a > img { width: 36px; display: inline-block; vertical-align: top; box-shadow: 0px 2px 6px #5b54ec; border: 1px solid #6c67e3; } .active-page.show > a { background-color: #fff; color: #2b2b2b; font-weight: 500; } .active-page.show > a i { color: #2ec5d3; } .navbar-default .navbar-nav > .show > a, .navbar-default .navbar-nav > .show > a:focus, .navbar-default .navbar-nav > .show > a:hover { color: #1f2229; background-color: transparent; } .page-header .navbar-collapse { padding-right: 0px; padding-left: 0px; overflow-x: visible; } @media (min-width: 768px) { .navbar-nav { float: left; margin-left: 0; margin-right: 0; padding: 0; } .page-header .navbar-nav > li > a > i { } .page-header .navbar-nav > li > a > i[class^="icon-"] { font-size: 19px; vertical-align: top; } } .page-right-sidebar { width: 230px; background: #fff; height: 100%; min-height: 100%; right: -230px; top: 0; z-index: 42; position: fixed; box-shadow: 0 0 9px rgba(191, 191, 191, 0.3); -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; } .page-right-sidebar.visible { right: 0; } .page-right-sidebar#chat-right-sidebar { -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; opacity: 0; } .page-right-sidebar#chat-right-sidebar.visible { opacity: 1; } .right-sidebar-top { background: #fff; display: block; height: 61px; border-bottom: 1px solid #e5e9ec; } .page-right-sidebar .right-sidebar-close { float: right; color: #4f4f4f; font-size: 20px; padding: 2px 19px; height: 56px; line-height: 56px; } .page-right-sidebar .right-sidebar-close:hover { background: #fff; } .page-right-sidebar .chat-sidebar-close { color: #4f4f4f; font-size: 24px; padding: 14px 20px; height: 56px; } .right-sidebar-tabs { float: left; width: 172px; height: 60px; } .right-sidebar-tabs li { width: 50%; } .right-sidebar-tabs a { height: 60px; line-height: 40px !important; font-size: 13px; color: #626262; text-transform: capitalize; font-weight: bold !important; text-align: center; padding-left: 0 !important; padding-right: 0 !important; border: 0 !important; margin-right: 0 !important; } .right-sidebar-tabs .nav-tabs { border-bottom: 0 !important; } .right-sidebar-tabs .nav-tabs > li.active > a, .right-sidebar-tabs .nav-tabs > li.active > a:focus, .right-sidebar-tabs .nav-tabs > li.active > a:hover { cursor: default; background-color: #fff; border: none; border-radius: 0; } .right-sidebar-tabs .nav > li > a:focus, .right-sidebar-tabs .nav > li > a:hover { text-decoration: none; background-color: #fff; } .chat-list .chat-item { overflow: hidden; position: relative; display: block; border-bottom: 1px solid #e5e9ec; padding: 5px 25px; } .chat-list .chat-item:last-child { border-bottom: 1px solid transparent; } .chat-list .chat-item:hover { background: #f9f9f9; } .chat-list .chat-item img { float: left; width: 40px; border-radius: 100%; margin: 10px; margin-left: 0px; } .chat-list .chat-item .user-avatar { position: relative; display: inline-block; overflow: hidden; } .chat-list .chat-item.active-user .user-avatar:after { content: " "; display: block; width: 12px; height: 12px; border-radius: 50%; background: #2ec5d3; position: absolute; bottom: 9px; right: 9px; border: 2px solid #fff; } .chat-list .chat-item .chat-info { float: left; overflow: hidden; padding: 13px 0; width: 100px; } .chat-list .chat-item .chat-info span.chat-author { display: block; color: #4f5862; font-size: 13px; line-height: 15px; padding: 0; margin-bottom: 4px; } .chat-list .chat-item .chat-info span.chat-text { display: block; color: #4f4f4f; font-size: 13px; line-height: 15px; padding: 0; margin: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .chat-list .chat-item.unread .chat-info span { color: #2b2b2b !important; font-weight: 500; } .chat-list .chat-item .chat-info span.chat-time { display: block; color: #626262; opacity: 0.6; font-size: 12px; line-height: 15px; padding: 0; margin: 0; position: absolute; right: 20px; top: 50%; margin-top: -7.5px; } .load-more-messages { display: block; text-align: center; width: 100%; margin: 15px auto; font-size: 14px; color: #4f5862; opacity: 0.6; } .load-more-messages:hover { color: #4f5862; opacity: 1; } .chat-top-info { float: left; padding: 10px 0px 9px 20px; } .chat-top-info span { display: block; } .chat-top-info span.chat-name { color: #4f5862; font-size: 14px; font-weight: 400; } .chat-top-info span.chat-state { color: #4f5862; font-size: 12px; opacity: 0.6; } .chat-more-nav { float: right; display: block; position: relative; width: 15px; height: 15px; margin: 13px 5px; text-align: center; } .chat-more-nav > a { display: block; position: relative; font-size: 18px; width: 100%; height: 100%; } .chat-start-date { width: 100%; color: #626262; opacity: 0.6; font-size: 12px; text-align: center; padding: 10px 0; } .page-right-sidebar-inner { height: 100%; } .chat-header { font-size: 14px; font-weight: bold; line-height: 60px; padding-left: 21px; color: #333; } .right-sidebar-content { height: calc(100% - 61px); } .right-sidebar-content .slimScrollDiv { height: calc(100% - 55px) !important; width: 100% !important; } .right-sidebar-chat { height: 100% !important; padding-bottom: 20px; } .chat-bubble.them .chat-bubble-img-container { float: left; } .chat-bubble .chat-bubble-text-container { max-width: 60%; display: block; } .chat-bubble.them .chat-bubble-text-container { float: left; } .chat-bubble.me .chat-bubble-text-container { float: right; } .chat-bubble { position: relative; width: 100%; display: block; overflow: hidden; } .chat-bubble img { width: 38px; height: 38px; border-radius: 100%; } .chat-bubble.them img { margin-left: 18px; } .chat-bubble span.chat-bubble-text { padding: 7px 12px; min-height: 28px; margin: 0 10px; position: relative; font-size: 13px; font-weight: 400; line-height: 1.8; float: left; clear: both; word-wrap: break-word; max-width: 100%; } .chat-bubble.them span.chat-bubble-text { margin-left: 10px; background: #f3f3f3; } .chat-bubble.me span.chat-bubble-text { margin-left: 10px; margin-right: 28px; background: #dff1fd; float: right; } .chat-bubble span.chat-bubble-text { margin-top: 4px; } .chat-bubble span.chat-bubble-text:first-child { margin-top: 0; } .chat-bubble span.chat-bubble-text:last-child { margin-bottom: 10px; } .chat-bubble span.chat-bubble-text:first-child:before { content: ""; width: 0; height: 0; border-style: solid; } .chat-bubble.them span.chat-bubble-text:first-child:before { border-width: 0 10px 10px 0; border-color: transparent #f3f3f3 transparent transparent; position: absolute; top: 0; left: -9px; } .chat-bubble.me span.chat-bubble-text:first-child:before { border-width: 10px 10px 0 0; border-color: #dff1fd transparent transparent; position: absolute; top: 0; right: -9px; } .chat-write input { background: transparent; border: 0; box-shadow: none; border-top: 1px solid #e5e9ec; height: 60px; border-radius: 0; padding: 0 20px; font-weight: 400; } .chat-write input:focus { box-shadow: none; border-color: #e5e9ec; } .right-sidebar-settings .settings-title { padding: 10px 25px; text-transform: uppercase; font-weight: 700; font-size: 12px; display: block; margin: 5px 0 0 0; background: transparent; color: #4f5862; opacity: 0.6; } span.chat-title { padding: 10px 25px; text-transform: uppercase; font-weight: 700; font-size: 12px; display: block; margin: 5px 0 0 0; background: transparent; color: #4f5862; opacity: 0.6; } .sidebar-setting-list li { padding: 12px 25px; font-size: 13px; color: #4f5862; } .sidebar-setting-list li:last-child { border-color: transparent; } .sidebar-setting-list li .switchery { float: right; } .page-sidebar-fixed .secondary-sidebar { position: fixed; top: 0; bottom: 0; z-index: 100; height: 100% !important; } .page-sidebar-fixed .secondary-sidebar .secondary-sidebar-menu { height: 100% !important; overflow: hidden; } .page-header-fixed .secondary-sidebar { padding-top: 61px; } .page-header-fixed .secondary-sidebar .secondary-sidebar-bar { z-index: 9; top: 0; width: 199px; } .logo-box { display: flex; justify-content: space-between; padding: 10px 15px; color: #000 !important; height: auto; text-align: center; } .hidden-sidebar .page-header .navbar-default .navbar-collapse .logo-box img { width: auto; height: 100%; padding: 10px 15px; } .logo-box:hover, .logo-box:active, .logo-box:link, .logo-box:focus { color: #596b8c; text-decoration: none; } .logo-box i { margin-left: 12px; float: right; height: 14px; margin-top: 10px; font-size: 12px; } .page-sidebar .secondary-sidebar-menu, .page-sidebar .slimScrollDiv, .page-sidebar .page-sidebar-menu { height: 100%; } .page-sidebar .page-sidebar-menu ul { list-style: none; padding: 0; width: 61px; } .page-sidebar .page-sidebar-menu ul li a { padding: 8px 8px; line-height: 25px; margin: 5px 10px; border-radius: 50%; width: 100%; display: block; color: #fff; text-align: center; width: auto; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .page-sidebar .page-sidebar-menu ul li a:hover { background: rgba(255, 255, 255, 0.15); } .secondary-sidebar-menu { overflow-x: visible !important; background-color: #fafafa; z-index: 55; } body:not(.page-sidebar-fixed).collapsed-sidebar .secondary-sidebar-menu { overflow: visible !important; } .secondary-sidebar .slimScrollBar { display: none !important; } .collapsed-sidebar.page-sidebar-fixed .secondary-sidebar-menu { overflow: visible !important; } .secondary-sidebar .slimScrollDiv { overflow: visible !important; } .secondary-sidebar-menu ul { padding: 0; margin: 0; } .secondary-sidebar-menu ul li { list-style-type: none; position: relative; } .secondary-sidebar-menu ul li a { display: block; font-size: 14px; padding: 14px 15px; color: #203b79; -webkit-font-smoothing: antialiased; position: relative; } .secondary-sidebar-menu ul li.active-page > a, .secondary-sidebar-menu ul li.active-page > a:hover, .secondary-sidebar-menu ul li.active-page > a i, .secondary-sidebar-menu ul li.active-page > a:hover i, .secondary-sidebar-menu ul li.open > a, .secondary-sidebar-menu ul li.open > a:hover, .secondary-sidebar-menu ul li.open > a i, .secondary-sidebar-menu ul li.open > a:hover i { color: #1e9bd8 !important; font-weight: bold; } .secondary-sidebar-menu ul li.active-page > a { position: relative; } .secondary-sidebar-menu ul li.active-page.open a.active, .secondary-sidebar-menu ul li.active-page.open a.active:hover { color: #000 !important; font-weight: bold; } .collapsed-sidebar .secondary-sidebar-menu ul li a.active, .collapsed-sidebar .secondary-sidebar-menu ul li a.active:hover { color: #000 !important; font-weight: bold; background-color: #efefef; } .secondary-sidebar-menu ul li a:link { text-decoration: none; } .secondary-sidebar-menu > ul > li:hover { background-color: #efefef; } #sidebar_menus li a.active { background-color: #efefef; } .side-link { } ul#sidebar_menus { height: calc(100vh - 150px); overflow: hidden auto; } .secondary-sidebar-menu > ul > li > a:hover, .secondary-sidebar-menu > ul > li > a:hover i.accordion-icon { text-decoration: none; color: #1d9bd8; } .secondary-sidebar-menu ul li a i.menu-icon { margin-right: 10px; font-size: 16px; vertical-align: middle; line-height: 20px; width: 30px; height: 30px; box-shadow: 0px 0px 10px #d7dae1; text-align: center; padding: 5px; border-radius: 3px; } .secondary-sidebar-menu ul li.menu-divider { display: block; width: 100%; height: 1px; background-color: #e5e9ec; margin: 10px 0; } .secondary-sidebar-menu ul li a i.accordion-icon { float: right; font-size: 13px; vertical-align: text-top; color: #596b8c; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; margin-top: 4px; } .secondary-sidebar-menu ul li a span.badge { margin: 2px 0; float: right; } .secondary-sidebar-menu ul li.open a i.accordion-icon { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-3); } .secondary-sidebar-menu ul li .sub-menu a:hover { color: #1d9bd8; } .secondary-sidebar-menu ul li .sub-menu { position: relative; } body:not(.collapsed-sidebar) .secondary-sidebar-menu ul li .sub-menu:before { content: " "; position: absolute; height: 100%; left: 40px; } .collapsed-sidebar .secondary-sidebar { width: 61px; } .collapsed-sidebar .page-inner, .collapsed-sidebar .page-header { width: calc(100% - 61px); } .collapsed-sidebar .secondary-sidebar .secondary-sidebar-bar .logo-box { width: 100px; text-align: center; font-size: 0px; margin: auto; padding: 10px !important; } collapsed-sidebar .secondary-sidebar .secondary-sidebar-bar .logo-box .second_logo{ display: none; } .collapsed-sidebar .secondary-sidebar .license span { display: none; } .collapsed-sidebar .secondary-sidebar .secondary-sidebar-bar .logo-box:first-letter { visibility: visible; font-size: 18px; } .collapsed-sidebar .secondary-sidebar .secondary-sidebar-menu .accordion-menu li a span, .collapsed-sidebar .secondary-sidebar .secondary-sidebar-menu .accordion-menu li a .accordion-icon { display: none; } .collapsed-sidebar .secondary-sidebar p span, .collapsed-sidebar .secondary-sidebar li a .accordion-icon { display: none; } .collapsed-sidebar .secondary-sidebar .secondary-sidebar-menu .accordion-menu > li > a { padding: 12px 13px; width: 60px; } .collapsed-sidebar .secondary-sidebar .secondary-sidebar-menu .accordion-menu > li > a i.menu-icon { margin-right: 0px; } .collapsed-sidebar .secondary-sidebar .secondary-sidebar-menu .accordion-menu > li:hover { background-color: #efefef; z-index: 999; } .collapsed-sidebar .secondary-sidebar .secondary-sidebar-menu .accordion-menu li a:hover + .sub-menu, .collapsed-sidebar .secondary-sidebar .secondary-sidebar-menu .accordion-menu li:hover .sub-menu { display: block !important; position: absolute; left: 61px; z-index: 999; top: 0; background: #fff; width: 150px; opacity: 1; height: auto; border: 1px solid #e5e9ec; padding: 10px 0; -webkit-transition: opacity 0.2s, left 0.2s; -moz-transition: opacity 0.2s, left 0.2s; -o-transition: opacity 0.2s, left 0.2s; transition: opacity 0.2s, left 0.2s; } .collapsed-sidebar .secondary-sidebar .secondary-sidebar-menu .accordion-menu li a + .sub-menu li a { opacity: 1; } .collapsed-sidebar .secondary-sidebar .secondary-sidebar-menu .accordion-menu li a + .sub-menu { opacity: 0; width: 0; height: 0; margin-left: 12px; border: none; -webkit-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1); border-radius: 5px; } .collapsed-sidebar .secondary-sidebar .secondary-sidebar-menu .accordion-menu li a + .sub-menu li a { padding: 7px 10px; } .collapsed-sidebar .secondary-sidebar .secondary-sidebar-menu .accordion-menu li a + .sub-menu:before { position: absolute; top: 15px; left: -8px; right: auto; display: inline-block !important; border-top: 8px solid transparent; border-right: 8px solid #e5e9ec; border-bottom: 8px solid transparent; content: ""; display: none; } .collapsed-sidebar .secondary-sidebar .secondary-sidebar-menu .accordion-menu li a + .sub-menu:after { position: absolute; top: 16px; left: -7px; right: auto; display: inline-block !important; border-top: 7px solid transparent; border-right: 7px solid #fff; border-bottom: 7px solid transparent; content: ""; display: none; } .profile-menu { height: 61px; } .settings-menu-btn { height: auto; position: absolute; bottom: 0; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 15px 0; } .version-sec { position: absolute; bottom: 0; width: 100%; background-color: #fafafa; z-index: 5; } .settings-menu-btn a { color: #fff; text-transform: uppercase; font-size: 12px; text-align: center; width: 100%; display: block; padding: 5px 10px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .secondary-sidebar-menu, .page-sidebar-inner { height: 100% !important; } .page-sidebar > .page-sidebar-inner { position: absolute !important; height: auto !important; top: 50%; transform: translateY(-50%); } .profile-menu a { display: block; padding: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .profile-menu a img { width: 30px; height: 30px; border-radius: 30px; } .content-header { padding: 50px 0 10px 0; display: block; overflow: hidden; } .page-title { font-size: 17px; color: #000; float: left; } .content-header .page-options { float: right; padding-right: 5px; } .settings-sidebar { z-index: 1021; position: fixed; height: 100%; width: 261px; background: #fff; border-right: 1px solid #e5e9ec; transform: translateX(-100%); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .settings-overlay { z-index: 1020; background: rgba(0, 0, 0, 0.3); opacity: 0; position: fixed; top: 0; left: 0; bottom: 0; width: 0px; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; } body.settings-visible .settings-overlay { opacity: 1; right: 0; width: 100%; } body.settings-visible .settings-sidebar { transform: translateY(0); } .settings-sidebar-header { height: 61px; border-bottom: 1px solid #e5e9ec; } .settings-menu-close { height: 60px; width: 60px; line-height: 60px; display: block; float: right; text-align: center; font-size: 18px; } .settings-sidebar-header span { font-size: 14px; font-weight: bold; line-height: 60px; padding-left: 21px; color: #333; } .secondary-sidebar { min-height: 100%; float: left; width: 220px; z-index: 9; background: #fafafa; position: fixed; box-shadow: 5px 0 15px 0 rgba(130, 130, 130, 0.2) } .secondary-sidebar-bar { height: auto; border-bottom: 1px solid #e5e9ec; } .accordion-menu .sub-menu { display: none; background: #efefef; z-index: 9; } .accordion-menu .sub-menu li:not(.animation) a { opacity: 0; } .accordion-menu .sub-menu li.animation a { opacity: 1; } .accordion-menu .sub-menu li a { border-top: 0; padding:10px 10px 7px 48px; font-size: 13px; color: #203b79; } .accordion-menu .sub-menu li a.active { color: #000; } .accordion-menu .sub-menu li a.active:hover { color: #000 !important; } .search-form { position: absolute; width: 100%; background: #e5e9ec; height: 61px; border-bottom: 1px solid #e5e9ec; z-index: 41; margin-top: -61px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; font-weight: 400; opacity: 0; } .search-form input { border: none; height: 60px; border-radius: 0; box-shadow: none; padding-left: 25px; padding-bottom: 7px; } .search-form #close-search { background-color: #f1f3f6; color: #000; border: none; height: 60px; border-radius: 0; box-shadow: none; padding-right: 25px; } .search-form #close-search i { font-size: 20px; vertical-align: text-top; } .search-form input:focus { border: none; box-shadow: none; } .search-form #close-search:hover, .search-form #close-search:focus { background-color: #f1f3f6 !important; opacity: 1; border: none; outline: 0; box-shadow: none; } .search-content { position: absolute; background: #fff; } .search-open .search-form { margin-top: 0; opacity: 1; } .page-content { min-height: 56px; vertical-align: bottom; background: #fafafa; width: 100%; float: right; } .page-sidebar-collapsed .page-content { width: calc(100% - 61px); } _::-webkit-full-page-media, _:future, :root .page-content { vertical-align: top; } .page-inner { position: relative; padding: 30px; width: calc(100% - 220px); float: right; padding-bottom: 50px; } .page-inner.white { background: #fff; } .page-inner.full-page { padding-left: 0px; padding-right: 0px; padding-top: 0px; } .page-inner.full-page.no-footer { padding-bottom: 0px; } .page-inner.full-page .page-footer { padding-left: 30px; padding-right: 30px; } _::-webkit-full-page-media, _:future, :root .page-inner { padding-bottom: 0px; } .page-header-fixed .page-inner { margin-top: 61px; } .page-desc { font-size: 15px; margin: 0; } .img-preview { height: 150px; width: 220px; overflow: hidden; margin-bottom: 10px; } .image-crop img { width: 100%; height: 100; } .crop-img-text { font-weight: bold; font-size: 14px; margin-bottom: 15px; } .slimScrollBar { z-index: 20 !important; } .invoice-header { padding: 0 0 30px 0; display: block; } .invoice-header h5 { font-size: 22px; font-weight: bold; } .invoice-info { display: block; } .invoice-info p span { float: right; } .error-bg { display: block; background: #694ffc; position: absolute; top: 0; bottom: 0; left: 0; right: 50%; } .error-bg::after { background-image: url(../images/error.gif); background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ""; opacity: 0.1; } .error-coming-soon .error-bg::after { background-image: url("../images/construction.png"); } .error-info { position: absolute; right: 0; left: 50%; top: 0; bottom: 0; text-align: right; } .error-info .error-text { position: absolute; top: 50%; transform: translateY(-50%); padding: 50px; width: 100%; right: 0; } .error-info .error-text .error-header h3 { font-size: 152px; color: #694ffc; } .error-info .error-text .error-body { font-size: 15px; } .error-coming-soon .error-text .error-header h3 span { font-size: 32px; font-weight: bold; width: 80px; display: inline-block; } .login-bg { display: block; background: #2784d8; position: absolute; top: 0; bottom: 0; left: 0; right: 50%; } .login-bg::after { background-image: url(../images/img-12); background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ""; opacity: 0.2; } .login-content { position: absolute; right: 0; left: 50%; top: 0; bottom: 0; text-align: right; } .login-box { position: absolute; top: 50%; transform: translateY(-50%); padding: 50px; width: 100%; } .login-box .login-body { width: 70%; margin-bottom: 10px; margin: auto; } .login-box .login-header, .login-box .login-body, .login-box .login-footer { display: block; clear: both; } .login-box .login-header h3 { font-size: 32px; color: #694ffc; font-weight: bold; margin-bottom: 20px; } .login-box .login-header p { color: #646464; font-size: 15px; } .register .login-bg::after { background-image: url(../images/register.png); } .lockscreen .login-bg::after { background-image: url(../images/lock.png); } .help-menu { display: block; padding-left: 30px; border-left: 1px solid #e5e9ec; } .help-menu h3 { font-size: 13px; font-weight: bold; color: #646464; text-transform: uppercase; margin-bottom: 10px; } .help-menu ul li a { color: #646464; padding: 5px 0; display: block; } .help-menu ul li a.active, .help-menu ul li a.active:hover { color: #0686d8; font-weight: bold; } .help-menu ul li a:hover { font-weight: bold; } .help-topics li a { display: block; margin: 5px 0; color: #646464; } .help-topics li a:hover { text-decoration: underline !important; color: #0686d8; } .help-topics { display: block; border: 1px solid #e5e9ec; padding: 30px; border-radius: 6px; margin-top: 15px; } .help-topics h3 { font-weight: bold; margin-bottom: 15px; font-size: 14px; text-transform: uppercase; } .list-data { height: 200px; overflow-y: auto; } .content-data { height: 250px; overflow-y: auto; } .data_show_short { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pricing { text-align: center; border: 1px solid #e5e9ec; font-size: 14px; padding-left: 0; border-radius: 6px; } .pricing li:first-child, .pricing li:last-child { padding: 20px 13px; } .pricing li { list-style: none; padding: 12px 8px; } .pricing li + li { border-top: 1px solid #e5e9ec; } .pricing h1 { font-size: 24px; color: #2b2b2b; } .pricing h3 { margin-bottom: 0; font-size: 32px; } .pricing span { font-size: 12px; color: #999; font-weight: normal; } .pricing li:nth-last-child(2) { padding: 30px 13px; } .mailbox-options { height: 41px; } .mail-count { line-height: 41px; margin: 0 10px 0 10px; } .mailbox-menu ul li a { color: #596b8c; display: block; margin: 0px 0 15px 0; } .mailbox-menu ul li a:hover, .mailbox-menu ul li a.active { color: #0686d8; } .mailbox-menu ul li a i { font-size: 16px; width: 30px; display: inline-block; vertical-align: text-bottom; } .email-list { max-height: 510px; overflow-y: auto; border-left: 1px solid #dde1e4; border-right: 1px solid #dde1e4; } .email-list ul { margin-bottom: 0px; } .email-list-item { color: #000; } .email-list-item .email-author img { width: 35px; border-radius: 100%; } .email-list-item .email-author span.author-name { margin-left: 7px; font-weight: bold; line-height: 25px; } .email-list-item .email-author span.email-date { float: right; opacity: 0.6; line-height: 25px; font-size: 12px; } .email-list-item .email-info { display: block; margin-top: 8px; } .email-list-item .email-info .email-subject { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; } .email-list-item .email-info .email-text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; opacity: 0.7; } .email-list li a:active, .email-list li a:focus, .email-menu li a:active, .email-menu li a:focus { color: #2b2b2b; } .email-list li a { display: block; padding: 18px 12px; border-bottom: 1px solid #e0e0e0; } .email-list li:last-child a { border-color: transparent; } .email-list li a:hover { background: #fafafa; } .email-list li.active a { background: #e4e6eb; } .email-actions .compose { width: 100%; } .mail-header { width: 100%; display: block; overflow: hidden; } .mail-header .mail-title { float: left; line-height: 38px; font-size: 16px; font-weight: bold; color: #333; } .mail-header .mail-actions { float: right; } .mail-info { display: block; width: 100%; overflow: hidden; margin-top: 15px; } .mail-info .mail-author { float: left; } .mail-info .mail-author img { width: 50px; border-radius: 50px; border: 4px solid #ccc; float: left; } .mail-info .mail-author-info { padding: 0 15px; display: inline-block; height: 50px; } .mail-info .mail-author span.mail-author-name { display: block; font-weight: bold; line-height: 25px; } .mail-info .mail-author span.mail-author-address { display: block; line-height: 25px; } .mail-info .mail-other-info { float: right; display: inline-block; } .mail-info .mail-other-info span { line-height: 50px; } .todo-menu h3 { font-size: 13px; font-weight: bold; color: #646464; text-transform: uppercase; margin: 30px 0 10px 0 !important; } .todo-menu ul li a { color: #646464; display: block; padding: 5px 0; } .todo-menu ul li a:hover, .todo-menu ul li.active a { color: #0686d8; } .todo-menu ul li a i { width: 25px; display: inline-block; vertical-align: text-bottom; } .todo-list ul li a { display: block; background: #f2f4f5; border: 1px solid #e5e9ec; width: 100%; margin-bottom: 5px; padding: 8px 15px 8px 35px; color: #646464; border-radius: 6px; } .todo-list ul li a.done, .todo-list ul li a.done:hover { text-decoration: line-through !important; } .contacts-menu { display: block; margin-top: 30px; } .contacts-menu ul li a { display: block; color: #646464; padding: 5px 0; } .contacts-menu ul li a:hover { font-weight: bold; } .contacts-menu ul li a.active { color: #333; font-weight: bold; } .contacts-menu ul li a i { width: 8px; height: 8px; vertical-align: middle; display: inline-block; border-radius: 100%; margin-right: 10px; } .contacts-menu ul li a.contacts-all i { background-color: #6c757d; } .contacts-menu ul li a.contacts-work i { background-color: #0686d8; } .contacts-menu ul li a.contacts-family i { background-color: #ed5060; } .contacts-menu ul li a.contacts-friends i { background-color: #61cd66; } .contacts-menu ul li a.contacts-other i { background-color: #4897fb; } .contacts-menu ul li a span { float: right; color: #646464 !important; font-weight: normal !important; } .contact-list .table thead th:first-child, .contact-list .table tbody th { width: 40px; padding-left: 10px; } .contact-list .table > tbody > tr > td, .contact-list .table > tbody > tr > th, .contact-list .table > tfoot > tr > td, .contact-list .table > tfoot > tr > th, .contact-list .table > thead > tr > td, .contact-list .table > thead > tr > th { padding: 20px 10px; } .contact-list .table tbody tr td, .contact-list .table tbody tr th { cursor: pointer; } .contact-person .person-header { width: 100%; display: block; } .contact-person .person-header img { width: 120px; height: 120px; border-radius: 120px; margin: 0 auto; display: block; } .contact-person .person-header h3 { font-size: 22px; font-weight: bold; color: #333; width: 100%; margin: 15px 0; text-align: center; } .contact-person .person-header span { width: 100%; display: block; margin-bottom: 15px; text-align: center; } .contact-person .person-body h4 { text-transform: uppercase; font-weight: bold; width: 100%; text-align: center; margin-top: 35px; display: block; font-size: 13px; } .contact-person .person-body p { text-align: center; margin-top: 20px; } .profile-cover { width: 100%; display: block; position: relative; border-radius: 6px; z-index: 1; } .profile-cover img { width: 100%; border-radius: 6px; } .profile-cover:after { display: block; content: " "; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 6px; background: linear-gradient(transparent, black); } .profile-header { display: block; width: 100%; margin-top: -110px; padding: 0 30px; overflow: hidden; z-index: 2; position: relative; margin-bottom: 20px; } .profile-header .profile-img img { width: 150px; height: 150px; border-radius: 150px; border: 5px solid white; } .profile-header .profile-img { float: left; } .profile-header .profile-name { float: left; margin-top: 50px; margin-left: 30px; } .profile-header .profile-name h3 { color: #fff; font-weight: bold; font-size: 22px; line-height: 50px; } .profile-header .profile-header-menu { float: right; height: 100%; margin-top: 39px; } .profile-header .profile-header-menu ul li { float: left; height: 100%; padding: 25px; } .profile-header .profile-header-menu ul li a { color: #a1a1a1; display: block; font-weight: bold; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .profile-header .profile-header-menu ul li a:hover, .profile-header .profile-header-menu ul li a.active { color: #fff; } .profile-about-list { margin-bottom: 0; } .profile-about-list li { margin-bottom: 8px; position: relative; } .profile-about-list li:last-child { margin-bottom: 0px; } .profile-about-list li i { font-size: 17px; width: 25px; position: absolute; top: 2px; } .profile-about-list li span { padding-left: 25px; display: block; } .post-header, .post-body { display: block; overflow: hidden; width: 100%; } .post-header img { width: 50px; height: 50px; border-radius: 50px; float: left; } .post-header .post-info { float: left; padding: 5px 15px 0 15px; } .post-header .post-info span.post-author { font-size: 14px; font-weight: bold; color: #333; } .post-header .post-info span.post-date { font-size: 13px; } .post-header .post-header-actions { float: right; padding: 15px 0; } .post-header .post-header-actions a { line-height: 20px; color: #646464; } .post-header .post-header-actions a:hover { color: #333; } .post-body { padding: 15px 0 0 0; position: relative; } .post-body p { margin-bottom: 0; } .post-body .post-image { display: block; width: 100%; border-radius: 6px; margin-top: 15px; } .post-actions, .post-actions ul { display: block; overflow: hidden; margin-bottom: 0; } .post-actions { border-top: 1px solid #e5e9ec; padding-top: 5px; margin-top: 15px; } .post-actions ul li a { display: inline-block; float: left; padding: 5px 8px; color: #646464; font-size: 13px; margin-right: 10px; } .post-actions ul li a:hover { color: #000; } .post-actions ul li a.liked { color: #0686d8; } .post-actions ul li a.liked i:before { content: "\f004"; } .post-actions ul li a i { margin-right: 7px; } .post-comments { margin-top: 5px; border-top: 1px solid #e5e9ec; padding-top: 15px; } .post-comments .post-comm { display: block; margin-bottom: 10px; background: #fafafa; border-radius: 6px; padding: 15px; overflow: hidden; } .post-comments .post-comm:last-child { margin-bottom: 0; } .post-comments .post-comm img { width: 30px; height: 30px; border-radius: 30px; float: left; } .post-comments .post-comm .comment-container { float: left; padding: 0 10px; width: calc(100% - 30px); display: block; } .post-comments .post-comm .comment-container span.comment-author { color: #333; font-weight: bold; display: block; line-height: 30px; } .post-comments .post-comm .comment-container span.comment-author small { float: right; font-size: 12px; color: #646464; } .post-comments .post-comm .comment-text { padding: 10px 0 0 0; display: inline-block; } .story-list .story { overflow: hidden; display: block; margin-bottom: 10px; } .story-list .story:last-child { margin-bottom: 0; } .story-list .story img { width: 50px; height: 50px; border-radius: 50px; border: 2px solid #4897fb; padding: 2px; float: left; display: inline-block; } .story-list .story .story-info { display: inline-block; float: left; padding: 5px 15px; } .story-list .story .story-info span.story-author { display: block; line-height: 20px; font-weight: bold; color: #333; } .story-list .story .story-info span.story-time { line-height: 20px; font-size: 12px; } .mutual-friends-list { display: block; } .mutual-friends-list img { float: left; width: 40px; height: 40px; border-radius: 40px; border: 3px solid #fff; margin-left: -8px; z-index: 1; display: inline-block; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer; } .mutual-friends-list img:first-child { margin-left: 0; } .mutual-friends-list img:hover { z-index: 999; transform: translateY(-5px); } .mutual-friends-list span { line-height: 40px; padding: 0 10px; } .info-card h4 { margin-bottom: 15px; font-size: 14px; } .info-card h4 span { float: right; } .info-card .progress { margin-bottom: 0; } .ds-stat .ds-stat-name { text-transform: capitalize; font-size: 15px; font-weight: 600; margin-bottom: 10px; margin-top: 10px; display: block; font-family: 'Montserrat', sans-serif !important; } .ds-stat .ds-stat-number { font-size: 34px; font-weight: normal; position: relative; display: block; font-family: 'Roboto', sans-serif; } .ds-stat .ds-stat-number .ds-stat-percent { font-size: 13px; line-height: 25px; position: absolute; top: 0; display: inline-block; margin-left: 10px; font-weight: normal; color: #a0a0a0; } .ds-stat .ds-stat-number .ds-stat-percent i { font-size: 24px; vertical-align: top; margin-right: 5px; } .ds-stat .ds-stat-number .ds-stat-percent i.fa-caret-up { color: #61cd66; } .ds-stat .ds-stat-number .ds-stat-percent i.fa-caret-down { color: #ed5160; } .ds-stat .progress { margin-bottom: 0; margin-top: 10px; } .popular-products { height: 365px; overflow: hidden; position: relative; } .popular-products canvas { margin-top: 10px; } .popular-product-list { margin-top: 10px; } .popular-product-list ul li { padding: 12px 12px; border-bottom: 1px solid #e5e9ec; } .popular-product-list ul li:last-child { border-bottom: none; } .popular-product-list ul li span.product-color { float: right; display: inline-block; border-radius: 6px; background: #000; font-size: 11px; padding: 0px 5px; line-height: 20px; font-weight: bold; } .popular-product-list ul li#popular-product1 span.product-color { background: #6a4ffc; color: #fff; } .popular-product-list ul li#popular-product2 span.product-color { background: #4897fb; color: #fff; } .popular-product-list ul li#popular-product3 span.product-color { background: #d9e7f9; color: #646464; } .logo-sm { display: none; } #sidebar-toggle-button-close { display: none; } .hidden-sidebar .page-sidebar, .hidden-sidebar .secondary-sidebar { margin-left: -100%; position: fixed; z-index: 999999; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .hidden-sidebar .settings-sidebar { z-index: 9999999; } .hidden-sidebar.page-sidebar-visible .page-sidebar { margin-left: 0; } .hidden-sidebar.page-sidebar-visible .secondary-sidebar { margin-left: 0; height: 100%; } .hidden-sidebar .page-content { margin-left: 0; width: 100%; } .hidden-sidebar .page-inner, .hidden-sidebar .page-header { width: 100%; float: none; } .hidden-sidebar .page-header, .hidden-sidebar .page-header .navbar, .hidden-sidebar .page-header .container-fluid { height: 50px !important; } .hidden-sidebar .logo-sm { display: block; float: left; width: calc(100% - 40px); height: 41px; } .hidden-sidebar .navbar-header { border-bottom: 1px solid #e5e9ec; background: #fff; } .hidden-sidebar .logo-sm .logo-box { height: 41px; padding: 0; line-height: 41px; width: 100%; position: absolute; text-align: center; } .hidden-sidebar .logo-sm #sidebar-toggle-button { float: left; color: #000; z-index: 9; position: relative; width: 40px; padding: 0; height: 41px; text-align: center; line-height: 41px; } .hidden-sidebar .navbar-collapse { background: #6eb2ed;; height: 61px; } .hidden-sidebar .page-header .navbar-default .navbar-collapse { height: 59px !important; z-index: 9999; width: 100%; top: 42px; } .hidden-sidebar .page-header .navbar-collapse .navbar-nav { height: 58px !important; justify-content: center !important; } .hidden-sidebar .page-header .navbar-collapse .navbar-nav li a { padding: 11px 15px !important; height: 58px !important; } .hidden-sidebar .navbar-header { width: 100%; } .hidden-sidebar .navbar-header .navbar-toggler { float: right; position: relative; border-radius: 0; height: 41px; width: 40px; line-height: 41px; text-align: center; padding: 0; margin: 0; border: 0; } .hidden-sidebar .navbar-header .navbar-toggler:focus, .hidden-sidebar .navbar-header .navbar-toggler.focus, .hidden-sidebar .navbar-header .navbar-toggler:active { box-shadow: none !important; border: none !important; } .hidden-sidebar .navbar-nav { flex-direction: row; justify-content: center !important; width: 100%; background: #6eb2ed; display: none; } .hidden-sidebar .navbar-nav li a label { display: none; } .hidden-sidebar .navbar-nav li a + .dropdown-menu { position: absolute; left: 50%; transform: translateX(-50%); } .hidden-sidebar .page-header .search-form { z-index: 9999999; height: 42px; } .hidden-sidebar .page-header .search-form .search-input { height: 42px; line-height: 42px; } .hidden-sidebar .page-header .search-form #close-search { height: 42px; width: 45px; line-height: 42px; text-align: center; padding: 0 5px 0 0; margin: 0; } .hidden-sidebar .page-header .search-form #close-search i { vertical-align: inherit; } body:not(.hidden-sidebar) #sidebar-toggle { } @media (max-width: 1200px) { .email-actions { margin-top: 20px; } .dashboard-panel { height: auto; } .login-box .login-body { width: 70% !important; } .profile-header { margin-top: -60px; } .profile-img { display: block; float: none !important; } .profile-img img { margin: 0 auto; display: inherit; width: 100px !important; height: 100px !important; border-radius: 100px !important; } .profile-name { display: block; float: none !important; text-align: center; margin: 0 !important; } .profile-name h3 { color: #333 !important; } .profile-header .profile-header-menu { display: block; float: none; margin: 0; text-align: center; } .profile-header .profile-header-menu ul li { display: block; padding: 0; width: calc(100% / 6); text-align: center; } .profile-header .profile-header-menu ul li a { padding: 10px; text-align: center; height: auto !important; } .profile-header .profile-header-menu ul li a:hover, .profile-header .profile-header-menu ul li a.active { color: #000; } } @media (max-width: 992px) { .error-info, .login-content { left: 0 !important; background: #fff; text-align: center; } .error-text, .login-box { float: none !important; width: 100% !important; margin: 0 auto !important; height: auto; } .login-box .login-body { float: none !important; width: 80% !important; margin: 0 auto; } .mailbox-search { margin-top: 10px; } .email-list { border-left: 0; border-right: 0; margin-bottom: 30px; } } @media (max-width: 576px) { .login-box .login-body { width: 100% !important; } .mailbox-options button { display: block; width: 100%; margin: 0 0 5px 0 !important; } .mailbox-options { display: block !important; } .mail-count { margin: 0 auto; display: block; text-align: center; width: auto; } .mail-left-btn { float: left; display: inline-block; width: auto !important; } .mail-right-btn { float: right; display: inline-block; width: auto !important; } .form-control span { font-size: small; } } pre.prettyprint { font-size: 13px; } .color-pallete { position: relative; margin-bottom: 10px; } .color-item { text-align: center; padding: 15px; } .color-item span { font-weight: bold; font-size: 12px; } .timeline { margin-top: 20px; position: relative; } .timeline:before { position: absolute; content: ""; width: 4px; height: calc(100% + 50px); background: rgb(27, 104, 160); background: -moz-linear-gradient( left, rgb(27, 104, 160) 0%, rgb(20, 105, 170) 60%, rgb(7, 91, 143) 100% ); background: -webkit-linear-gradient( left, rgb(27, 104, 160) 0%, rgb(20, 105, 170) 60%, rgb(7, 91, 143) 100% ); background: linear-gradient( to right, rgb(27, 104, 160) 0%, rgb(20, 105, 170) 60%, rgb(7, 91, 143) 100% ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8a9196', endColorstr='#62696d', GradientType=1); left: 14px; top: 5px; border-radius: 4px; } .timeline-hours { position: relative; padding: 4px 15px 4px 35px; display: inline-block; width: auto; border-radius: 40px; border: 1px solid #17191b; border-right-color: black; margin-bottom: 30px; } .timeline-hours span { position: absolute; top: -1px; left: calc(100% - 10px); z-index: -1; white-space: nowrap; display: inline-block; background-color: #111; padding: 4px 10px 4px 20px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border: 1px solid black; box-sizing: border-box; } .timeline-hours:before { position: absolute; content: ""; width: 20px; height: 20px; background: rgb(27, 104, 160); background: -moz-linear-gradient( top, rgb(27, 104, 160) 0%, rgb(20, 105, 170) 60%, rgb(7, 91, 143) 100% ); background: -webkit-linear-gradient( top, rgb(27, 104, 160) 0%, rgb(20, 105, 170) 60%, rgb(7, 91, 143) 100% ); background: linear-gradient( to bottom, rgb(27, 104, 160) 0%, rgb(20, 105, 170) 60%, rgb(7, 91, 143) 100% ); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8a9196', endColorstr='#70787d', GradientType=0); border-radius: 100%; border: 1px solid #17191b; left: 5px; } .timeline-section { padding-left: 35px; display: block; position: relative; margin-bottom: 30px; } .timeline-date { margin-bottom: 15px; padding: 2px 2px 2px 15px; background: linear-gradient(#ffffff, #fafafa, #e7e7e7); position: relative; display: inline-block; border-radius: 20px; border: 1px solid #17191b; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); width: 100%; } .timeline-section:before { content: ""; position: absolute; width: 30px; height: 1px; background-color: #444950; top: 12px; left: 20px; } .timeline-section:after { content: ""; position: absolute; width: 10px; height: 10px; background: linear-gradient( to bottom, rgb(66, 69, 71) 0%, rgb(67, 71, 75) 60%, rgb(58, 62, 65) 100% ); top: 7px; left: 11px; border: 1px solid #17191b; border-radius: 100%; } .timeline-section .col-sm-4 { margin-bottom: 15px; } .timeline-box { position: relative; transition: all 0.3s ease; overflow: hidden; } .home-page-header { width: 100%; background: #fafafa; padding: 2px 20px; background: -webkit-linear-gradient(top, #b8dcf2 0%, #0784d5 100%); background: linear-gradient(to right, #b8dcf2 0%, #0784d5 100%); color: #ffffff; } .support_logo img { width: 250px; margin-right: 20px; } .hepl-desk-overview h2 { margin-bottom: 0px; padding: 10px; color: #fff; background: -webkit-linear-gradient(top, #0784d5 0%, #b8dcf2 100%); background: linear-gradient(to right, #0784d5 0%, #b8dcf2 100%); } .knowledge-base-content .base-info { padding-left: 0px; padding-right: 0px; } .knowledge-base-content .help-info a { position: relative; display: flex; background-color: #000; color: #fff; font-size: 25px; font-weight: bold; min-height: 199px; align-items: center; justify-content: center; overflow: hidden; transition: all 0.25s ease-out; } .knowledge-base-content .base-info img { opacity: 0.8; position: absolute; height: 100%; width: 100%; object-fit: cover; transition: all 0.25s ease-out; } .knowledge-base-content .help-info a:hover img { opacity: 0.4; } .knowledge-base-content .help-info a span { position: relative; transition: .25s ease-in-out; color: rgb(255 255 255); text-shadow: 2px 6px 12px #000000; overflow: visible; } .knowledge-base-content .help-info a:hover span { transform: scale(1.2); } .support_block .modal-body a { color: #000; display: block; } .support_block .modal-body a span { margin-left: 10px; } .main-heading h4 { font-weight: bold; color: #000; } .support_block .support_links { list-style: none; padding-left: 0px; } @media screen and (min-width: 992px) { .support_block.two-col-layout .support_links li { flex: 0 45%; margin-left: 5%; } .support_block.two-col-layout .support_links { display: flex; flex-wrap: wrap; } } .rate { float: left; } .rate:not(:checked) > input { top: -9999px; display: none; } .rate:not(:checked) > label { float: right; width: 1em; overflow: hidden; white-space: nowrap; cursor: pointer; font-size: 3em; color: #ccc; } .rate:not(:checked) > label:before { content: '★ '; } .rate > input:checked ~ label { color: #0685d7; } .rate:not(:checked) > label:hover, .rate:not(:checked) > label:hover ~ label { color: #0685d7; } .rate > input:checked + label:hover, .rate > input:checked + label:hover ~ label, .rate > input:checked ~ label:hover, .rate > input:checked ~ label:hover ~ label, .rate > label:hover ~ input:checked ~ label { color: #0c65a0; } .Feedback ol li { line-height: 2; font-size: 18px; color: #0685d7; background-color: aliceblue; } .ml15 { font-weight: 100; font-size: .8em; letter-spacing: 0.1em; border-radius: 50px; } #canvas { border: 1px solid #000000; width: 960px; height: auto; } #mytimesheetdataDownload.dropdown-menu { right: 0px; left: inherit; } #ui-datepicker-div { background: rgb(233, 236, 239); padding: 5px; } #forgotPasswdModal .form-control{ padding: 10px 20px; font-size: 16px; border: 1px solid #d6d6d6; background: #fff; outline: none; color: #535353; border-radius: 0; height: 55px } #emailHelp{ font-size:13px; } #forgotPasswdModal .modal-header{ background: linear-gradient(45deg, #1f2153, #6351c4); color: #fff; padding: 15px !important; } #forgotPasswdModal .modal-body{ padding: 30px; } #forgotPasswdModal .btn-primary { color: #fff; background-color: #4c419d; border-color: #4c419d; box-shadow: 0px 4px 5px #8d83d4; } #forgotPasswdModal .btn-secondary { color: #fff; background-color: #272727; border-color: #272727; box-shadow: 0px 4px 5px #696969; } #forgotPasswdModal .close{ color: #fff; } .login { position: relative; width: 100%; overflow-y: auto; display: grid; grid-template-columns: 50% 50%; } .login-bg { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 30px 50px 30px 40px; text-align: right; color: white; background: #303F9F; position: relative; right: 0; } .login-bg>div:first-child { top: 40px; position: absolute; right: 45px; z-index: 3; width: 100%; } .login-bg>div>img { height: 50px; } .login-box { position: relative; padding: 30px; width: 100%; display: flex; justify-content: center; align-items: center; top: 0%; transform: translateY(0%); min-height: 100vh; transition: all 1s; } .login-content { position: relative; right: 0; left: 0; display: grid; align-items: center; flex-direction: column; gap: 66px; height: 100vh; overflow: hidden; width: 100%; } .login-bg-content { position: relative; z-index: 1; text-align: right; width: 100%; } .login-bg-content>h1 { margin: 0 0 30px 0; font-size: 41px; font-weight: 700; color: yellow; display: block; text-shadow: 0 0 80px rgb(255 255 255 / 50%); background: url('../images/animated-text.png') repeat-y; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: aitf 80s linear infinite; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; } @keyframes aitf { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .login-bg::after { background-image: url('../images/img-12.jpg'); background-size: cover; } .login-bg-content p { color: #fff; opacity: 0.9; line-height: 1.6; font-size: 16.3px; margin-bottom: 40px; } .logIn-content { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; max-width: 500px; width: 100%; margin: auto; } .login-box .login-body { width: 100%; } .login-header>h1 { font-size: 32px; color: #303f9f; text-align: left; margin-bottom: 18px; } #login-form label, .forget-pswd-div .modal-content label { color: #535353; font-size: 14px; margin-bottom: 5px; display: block; text-align: left; } #login-form input[type="checkbox"]+label { cursor: pointer; } #login-form .form-control, .forget-pswd-div .modal-content .form-control { width: 100%; padding: 10px 20px; font-size: 15px; border: 1px solid #d6d6d6f0; background: #fff; outline: none; color: #535353; border-radius: 0; height: 48px; } #login-form .form-control[type="password"] { padding-right: 50px; } .pswd-div-wrap { display: block; width: 100%; position: relative; } .pswd-div-wrap .input-group-append { position: absolute; top: 50%; transform: translateY(-50%); height: 100%; right: 0; display: flex; justify-content: center; align-items: center; cursor: pointer; } .pswd-div-wrap .input-group-append>span { line-height: 1.6; border: 1px solid #ced4da; border-left-color: white; height: 100%; display: flex; justify-content: center; align-items: center; background: #e8f0fe; } .login-box .login-header p { margin: 0 0 32px; font-size: 25px; font-weight: 400; color: #040404; text-align: start; } .button-wrap { display: flex; justify-content: space-between; align-items: center; margin: 11px auto 15px; } .button-wrap .form-group { margin-bottom: 0; } #login-form .login-btn { position: relative; width: 100%; color: #ffffff; overflow: hidden; text-transform: capitalize; display: inline-block; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; cursor: pointer; font-size: 15px; font-weight: 400; border-radius: 0; border: none; background: #303F9F; min-height: 48px; outline: 0; } #login-form .login-btn>span { position: relative; z-index: 2; } #login-form .login-btn::after { position: absolute; content: ''; left: 97%; top: 0px; width: 100%; height: 100%; z-index: 1; opacity: 1; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; transform: skewX(336deg); background: #4756b7bf; } #login-form .login-btn:hover::after { left: 0%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .m-t-sm { text-align: center; margin: 13px auto; } .m-t-sm a { float: unset !important; } .logIn-content a { color: #303f9f; font-weight: 500; font-size: 13.6px; transition: all .3s ease; } .logIn-content a:hover { letter-spacing: .3px; } .forget-pswd-div { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; margin: auto; min-height: 100vh; text-align: left; transition: all 1s; padding: 30px; } .forget-pswd-div .modal-content { box-shadow: 0 5px 15px rgb(0 0 0 / 0%); max-width: 500px; margin: auto; } .login-box.transform-Y-up, .forget-pswd-div.transform-Y-up { transform: translateY(-114%); transition: all 1s; } .forget-pswd-div .modal-title { font-size: 25px; font-weight: 500; color: #303f9f; } .text-warning-clr { color: #c59c08 !important; font-weight: 500; } .forget-pswd-div .modal-header, .forget-pswd-div .modal-body { padding: 1rem 0; } .forget-pswd-div .modal-footer { flex-direction: column; gap: 12px; padding: 1rem 0; } .forget-pswd-div .modal-footer>button { width: 100%; margin: 0; position: relative; color: #ffffff; overflow: hidden; text-transform: capitalize; display: inline-block; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; cursor: pointer; font-size: 15px; font-weight: 400; border-radius: 0; border: none; background: #303F9F; min-height: 48px; } .forget-pswd-div .modal-footer>button.back-to-login-btn { overflow: hidden; } .err-msg { font-size: 13px; margin: 0.4rem 0 1rem; font-weight: 400; } .fav-icon{ display:none; max-width: 200px; margin: auto; margin-bottom: 1rem; } @media screen and (max-width: 1200px) { .login-box .login-body { width: 100% !important; } } @media screen and (max-width: 768px) { .login-bg { padding: 28px 25px 28px 23px; } .login-bg>div:first-child { right: 25px; } .login-bg>div>img { height: 33px; } .login-bg-content>h1 { margin: 0 0 17px 0; font-size: 23.6px; } .login-bg-content p { font-size: 12px; margin-bottom: 0; } .login-header>h1 { font-size: 23px; margin-bottom: 8px; } .login-box .login-header p { margin: 0 0 21px; font-size: 18px; } #login-form label, .forget-pswd-div .modal-content label { font-size: 12px; margin-bottom: 3px; } #login-form .form-control, .forget-pswd-div .modal-content .form-control { padding: 10px 20px; font-size: 12px; height: 43px; } .logIn-content a { font-size: 12.6px; } #login-form .login-btn { font-size: 13px; min-height: 43px; } .forget-pswd-div .modal-title { font-size: 21px; } .forget-pswd-div .modal-footer>button { font-size: 13px; min-height: 43px; } } @media screen and (max-width:767px) { .login-bg { display: none; } .login { grid-template-columns: 100%; } .login-box .login-header, .login-header>h1, .forget-pswd-div .modal-title { text-align: center; width: 100%; } .fav-icon{ display: block; } .login-box ,.forget-pswd-div{ padding: 16px; } } .custom_image_menu_icon_parent{ height: 30px; width: 30px; display: inline; box-shadow: 0px 0px 10px #d7dae1; margin-right: 10px; padding: 5px; } .menu-icon.custom_image_menu_icon{ height: 16px; }