:root { --brand-1: #4F6BF8; --sub-color: #F5F5F5; --text-color: #626262; --sub-color-1: #dc3545; --sub-color-2: #2250fc; --sub-color-3: #c52132; --white-color: #ffffff; --black-color: #2e2b2b; --p-color: #484848; --border-color2: #eeecec; --border-color: #dad6d6; } .theme_editor *:hover { transition: 0.5s; } .theme_editor *:focus { outline: 0 !important; box-shadow: none !important; } .theme_editor *button:focus { border: none; outline: none; box-shadow: none; } .theme_editor * { list-style-type: none; } .theme_editor *:focus, .theme_editor *:active { outline: none !important; } html.sr .load-hidden { visibility: hidden; } .theme_editor *:hover { transition: 0.8s !important; } .theme_editor *::selection { color: #f3ebee; background-color: black; } .theme_editor *a, a:visited { color: #990000; text-decoration: none; } body { position: relative; overflow: hidden; } .affix { top: 0; width: 100%; z-index: 9999 !important; } html { scroll-behavior: smooth !important; } body { scroll-behavior: smooth !important; } .main_heading h1 { color: var(--eco-color-1); font-size: 24px; text-transform: capitalize; } .main_heading p { color: var(--p-color2); font-size: 14px; } .heading_c { color: var(--eco-color-1); font-size: 24px; font-weight: 700; text-transform: capitalize; } html { line-height: 1.15; -webkit-text-size-adjust: 100%; } main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } .btn { position: relative; display: inline-block; border: none; border-radius: 0; outline: 0; font-size: 10px; font-weight: normal; text-align: center; text-transform: capitalize; cursor: pointer; } .btn-primary { position: relative; display: inline-block; color: var(--white-color); border: none; border-radius: 0; outline: 0; font-size: 10px; text-align: center; background: var(--brand-1); } .main_header { background: var(--brand-1); } .main_header .navbar .navbar-brand { margin-right: 50px; } .main_header .navbar .navbar-nav .nav-item .nav-link { color: var(--white-color); } .main_header .navbar .navbar-collapse { justify-content: space-between; } .main_header .navbar .navbar-collapse .user a { max-width: 50px; display: block; } .main_header .navbar .navbar-collapse .user a img { border-radius: 50%; width: 100%; } .sidenav { height: 100%; width: 0; position: absolute; z-index: 1; top: 0; left: 0; background-color: var(--sub-color); overflow-x: hidden; transition: 0.5s; padding-top: 60px; box-shadow: 0px 4px 11px 0px #888; } .sidenav .wrapper { padding: 15px 15px; } .sidenav .wrapper .custom h6 { font-size: 13px; color: var(--text-color); font-weight: 400; } .sidenav .wrapper .custom .alignemet { margin-top: 15px; padding-left: 0; display: flex; background-color: var(--white-color); box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, 0.75); border-radius: 5px; padding: 8px 8px; width: fit-content; } .sidenav .wrapper .custom .alignemet li { padding-left: 4px; } .sidenav .wrapper .custom .alignemet li a { display: block; width: 25px; padding-right: 10px; } .sidenav .wrapper .custom .alignemet li a img { width: 100%; filter: invert(48%) sepia(42%) saturate(7497%) hue-rotate(219deg) brightness(98%) contrast(98%); } .sidenav .wrapper .custom .alignemet li a:hover img { filter: invert(74%) sepia(11%) saturate(1285%) hue-rotate(173deg) brightness(102%) contrast(94%); } .sidenav .wrapper .custom .text { margin-top: 15px; padding-left: 0; display: flex; padding-top: 15px; } .sidenav .wrapper .custom .text li { background-color: var(--white-color); box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, 0.75); border-radius: 5px; padding: 6px 0px 6px 7px; margin-right: 8px; } .sidenav .wrapper .custom .text a { display: block; width: 25px; padding-right: 10px; color: var(--brand-1); } .sidenav .wrapper .custom .text a:hover { text-decoration: none; } .sidenav .wrapper .custom .text a img { width: 100%; filter: invert(48%) sepia(42%) saturate(7497%) hue-rotate(219deg) brightness(98%) contrast(98%); } .sidenav .wrapper .custom .text a:hover img { filter: invert(74%) sepia(11%) saturate(1285%) hue-rotate(173deg) brightness(102%) contrast(94%); } .sidenav .wrapper .custom .text a .under_line { text-decoration: underline; } .sidenav .wrapper .custom .text a .line_thr { text-decoration: line-through; } .sidenav .wrapper .font { padding-top: 15px; } .sidenav .wrapper .font .form-select { width: 100% !important; } .sidenav .wrapper .font .form-select { background-color: transparent !important; border: 1px solid !important; border-color: transparent !important; border-bottom-color: var(--border-color) !important; font-size: 12px; display: flex; justify-content: space-between; align-items: center; padding: 8px 18px; font-weight: 500; width: 100%; border-radius: 0px; margin-bottom: 20px; } .sidenav .wrapper .font .form-select option { font-size: 12px; } .sidenav .wrapper .font .form-select:focus { border-color: #1479c7 !important; border: 2px solid !important; } .sidenav .wrapper .font_property { padding-top: 15px; } .sidenav .wrapper .font_property .form-control { width: 100% !important; } .sidenav .wrapper .font_property .form-control { background-color: transparent !important; border: 1px solid !important; border-color: transparent !important; border-bottom-color: var(--border-color) !important; font-size: 12px; display: flex; justify-content: space-between; align-items: center; font-weight: 500; width: 100%; border-radius: 0px; margin-bottom: 20px; } .sidenav .wrapper .font_property .form-control option { font-size: 12px; } .sidenav .wrapper .font_property .form-control:focus { border-color: #1479c7 !important; border: 2px solid !important; } .sidenav .wrapper .opacity { margin-top: 20px; margin-bottom: 15px; padding-bottom: 15px; } .sidenav .wrapper .opacity div.sliderContainer { width: 100%; text-align: center; display: flex; align-items: center; } .sidenav .wrapper .opacity #slider { appearance: none; height: 5px !important; width: 100%; border-radius: 10em; background-color: var(--brand-1); outline: none; } .sidenav .wrapper .opacity #slider::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--white-color); cursor: pointer; border: 3px solid var(--brand-1); } .sidenav .wrapper .opacity #slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background-color: var(--brand-1); cursor: pointer; border: 3px solid #f4f4f4; } .sidenav .wrapper .opacity #output { color: #1d1a1a; font-size: 16px; margin-left: 5px; } .sidenav .wrapper .color_picker { display: flex; justify-content: space-between; padding-top: 15px; align-items: center; } .sidenav .wrapper .color_picker .wrapper_c { display: flex; align-items: flex-end; } .sidenav .wrapper .color_picker .wrapper_c .ssd { margin-left: 20px; } .sidenav .wrapper .color_picker input[type="color"].c_box { border-radius: 5; height: 30px; width: 85px; border: none; outline: none; -webkit-appearance: none; } .sidenav .wrapper .color_picker input[type="color"].c_box::-moz-color-swatch { border: none; border-radius: 10px; padding: 0; } .sidenav .wrapper .color_picker input[type="color"].c_box::-moz-color-swatch-wrapper { border: none; border-radius: 10px; padding: 0; } .sidenav .wrapper .color_picker input[type="color"].c_box::-moz-color-swatch { border: none; border-radius: 100%; } .sidenav .wrapper .color_picker input[type="color"].c_box::-webkit-color-swatch-wrapper { padding: 0; } .sidenav .wrapper .color_picker input[type="color"].c_box::-webkit-color-swatch { border: none; border-radius: 5px; } .sidenav .wrapper .color_picker .cc { font-size: 14px; color: var(--text-color); } .sidenav .wrapper .color_picker .c_picker { max-width: 16px; display: block; } .sidenav .wrapper .color_picker .c_picker img { width: 100%; } .sidenav .wrapper .bord { margin-top: 20px; margin-bottom: 15px; padding-bottom: 15px; display: flex; justify-content: space-between; } .sidenav .wrapper .bord .b_example { background-color: #ffffff; border: 1px solid #b8b8b8; border-radius: 5px; width: 20%; height: 25px; display: block; } .sidenav .wrapper .bord div.sliderContainer2 { width: 70%; text-align: center; display: flex; align-items: center; } .sidenav .wrapper .bord #slider2 { appearance: none; height: 5px !important; width: 100%; border-radius: 10em; background-color: var(--brand-1); outline: none; } .sidenav .wrapper .bord #slider2::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--white-color); cursor: pointer; border: 3px solid var(--brand-1); } .sidenav .wrapper .bord #slider2::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background-color: var(--brand-1); cursor: pointer; border: 3px solid #f4f4f4; } .sidenav .wrapper .bord #output2 { color: #1d1a1a; font-size: 16px; margin-left: 5px; } .sidenav .wrapper .b_shadow { margin-top: 20px; margin-bottom: 15px; padding-bottom: 15px; } .sidenav .wrapper .b_shadow div.sliderContainer3 { width: 100%; text-align: center; display: flex; align-items: center; } .sidenav .wrapper .b_shadow #slider3 { appearance: none; height: 5px !important; width: 100%; border-radius: 10em; background-color: var(--brand-1); outline: none; } .sidenav .wrapper .b_shadow #slider3::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--white-color); cursor: pointer; border: 3px solid var(--brand-1); } .sidenav .wrapper .b_shadow #slider3::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background-color: var(--brand-1); cursor: pointer; border: 3px solid #f4f4f4; } .sidenav .wrapper .b_shadow #output3 { color: #1d1a1a; font-size: 16px; margin-left: 5px; } .sidenav .wrapper .c_padding { display: flex; justify-content: flex-start; padding-left: 0; align-items: baseline; margin-top: 15px; } .sidenav .wrapper .c_padding li { background-color: var(--white-color); box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, 0.75); border-radius: 5px; padding: 6px 6px; margin-right: 8px; font-size: 11px; color: var(--text-color); } .sidenav .wrapper .c_padding span { font-size: 11px; color: var(--text-color); margin-left: 5px; } .sidenav .wrapper .b_img { padding-bottom: 10px; } .sidenav .wrapper .b_img label { color: var(--text-color); white-space: nowrap; font-size: 12px; } .sidenav .wrapper .b_img .file-input { display: inline-block; text-align: left; background: var(--brand-1); padding: 4px; width: 45%; position: relative; border-radius: 3px; } .sidenav .wrapper .b_img .file-input > [type='file'] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 10; cursor: pointer; } .sidenav .wrapper .b_img .file-input > .label { color: var(--white-color); white-space: nowrap; font-size: 12px; margin-left: 6px; } .sidenav .wrapper .b_img .file-input.-chosen > .label { opacity: 1; } .sidenav .wrapper .overlay { margin-top: 20px; margin-bottom: 15px; padding-bottom: 15px; } .sidenav .wrapper .overlay div.sliderContainer4 { width: 100%; text-align: center; display: flex; align-items: center; } .sidenav .wrapper .overlay #slider4 { appearance: none; height: 5px !important; width: 100%; border-radius: 10em; background-color: var(--brand-1); outline: none; } .sidenav .wrapper .overlay #slider4::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--white-color); cursor: pointer; border: 3px solid var(--brand-1); } .sidenav .wrapper .overlay #slider4::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background-color: var(--brand-1); cursor: pointer; border: 3px solid #f4f4f4; } .sidenav .wrapper .overlay #output4 { color: #1d1a1a; font-size: 16px; margin-left: 5px; } .sidenav .wrapper .overlay .b_wrapper { justify-content: space-around; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav .closebtn:hover { color: #f1f1f1; } #main { transition: margin-left .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } } .sidebar_left { background-color: var(--sub-color); height: 97%; padding: 15px 15px; } .sidebar_left .wrapper { margin-top: 15px; height: 100%; } .sidebar_left .wrapper .sub_style { margin-bottom: 15px; padding-bottom: 10px; display: flex; } .sidebar_left .wrapper .sub_style .t_settings { background-color: var(--white-color); padding: 6px; font-size: 12px; color: var(--brand-1); width: 100%; box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, 0.75); margin-right: 10px; border-radius: 5px; } .sidebar_left .wrapper .sub_style .switch { border-radius: 5px; position: relative; display: inline-block; width: 45px; box-shadow: 0px 1px 2px 0px rgba(171, 171, 171, 0.61); margin-bottom: 0; background-color: white; } .sidebar_left .wrapper .sub_style .switch input { opacity: 0; width: 0; height: 0; } .sidebar_left .wrapper .sub_style .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; margin: 7px 4px 7px 3px; } .sidebar_left .wrapper .sub_style .slider:before { position: absolute; content: ""; height: 14px; width: 13px; left: 0px; bottom: 1px; background-color: white; transition: .4s; border-radius: 50%; } .sidebar_left .wrapper .sub_style input:checked + .slider { background-color: var(--brand-1); } .sidebar_left .wrapper .sub_style input:focus + .slider { box-shadow: 0 0 1px var(--brand-1); } .sidebar_left .wrapper .sub_style input:checked + .slider:before { transform: translateX(18px); } .sidebar_left .wrapper .sub_style2 { margin-bottom: 15px; display: flex; } .sidebar_left .wrapper .sub_style2 .t_settings { background-color: var(--white-color); padding: 6px; font-size: 12px; color: var(--brand-1); width: 67%; box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, 0.75); margin-right: 10px; border-radius: 5px; } .sidebar_left .wrapper .dark_mode { padding-top: 15px; } .sidebar_left .wrapper .dark_mode .dark-switch { display: none; } .sidebar_left .wrapper .dark_mode .dark-schedule { display: none; } .sidebar_left .wrapper .dark_mode .d_mode { display: flex; justify-content: space-between; align-items: baseline; } .sidebar_left .wrapper .dark_mode .d_mode h6 { font-size: 12px; font-weight: normal; color: var(--brand-1); } .sidebar_left .wrapper .dark_mode .d_mode .switch { border-radius: 5px; position: relative; display: inline-block; width: 39px; height: 30px; box-shadow: 0px 1px 2px 0px rgba(171, 171, 171, 0.61); margin-bottom: 0; background-color: white; } .sidebar_left .wrapper .dark_mode .d_mode .switch input { opacity: 0; width: 0; height: 0; } .sidebar_left .wrapper .dark_mode .d_mode .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; margin: 7px 4px 7px 3px; } .sidebar_left .wrapper .dark_mode .d_mode .slider:before { position: absolute; content: ""; height: 14px; width: 13px; left: -0px; bottom: 1px; background-color: white; transition: .4s; border-radius: 50%; } .sidebar_left .wrapper .dark_mode .d_mode input:checked + .slider { background-color: var(--brand-1); } .sidebar_left .wrapper .dark_mode .d_mode input:focus + .slider { box-shadow: 0 0 1px var(--brand-1); } .sidebar_left .wrapper .dark_mode .d_mode input:checked + .slider:before { transform: translateX(18px); } .sidebar_left .wrapper .dark_mode .mode { padding-left: 0; display: flex; justify-content: space-between; align-items: center; margin-top: 15px; } .sidebar_left .wrapper .dark_mode .mode li { background-color: var(--white-color) !important; padding: 2px 8px; padding: 5px 12px; border-radius: 3px; box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, 0.75); } .sidebar_left .wrapper .dark_mode .mode li:hover { background-color: var(--black-color) !important; } .sidebar_left .wrapper .dark_mode .mode li:hover a i { color: var(--white-color); } .sidebar_left .wrapper .dark_mode .mode li:hover a span { color: var(--white-color); } .sidebar_left .wrapper .dark_mode .mode li a { display: flex; align-items: baseline; } .sidebar_left .wrapper .dark_mode .mode li a:hover { text-decoration: none; } .sidebar_left .wrapper .dark_mode .mode li a i { color: var(--brand-1); font-size: 12px; margin-right: 5px; } .sidebar_left .wrapper .dark_mode .mode li a span { color: var(--brand-1); font-size: 11px; } .sidebar_left .wrapper .dark_mode .mode li.active { background: var(--black-color) !important; box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, 0.75); } .sidebar_left .wrapper .dark_mode .mode li.active a { display: flex; align-items: baseline; } .sidebar_left .wrapper .dark_mode .mode li.active a:hover { text-decoration: none; } .sidebar_left .wrapper .dark_mode .mode li.active a i { color: var(--white-color); font-size: 12px; margin-right: 5px; } .sidebar_left .wrapper .dark_mode .mode li.active a span { color: var(--white-color); font-size: 11px; } .sidebar_left .wrapper .dark_mode .on_off { background-color: var(--white-color); box-shadow: 0px 1px 2px 0px rgba(171, 171, 171, 0.61); padding: 15px 15px 1px 15px; border-radius: 5px; margin-top: 20px; } .sidebar_left .wrapper .dark_mode .on_off ul { padding-left: 0; margin-bottom: 0; } .sidebar_left .wrapper .dark_mode .on_off ul li { margin-bottom: 15px; justify-content: space-between; align-items: center; } .sidebar_left .wrapper .dark_mode .on_off ul li .left { color: var(--brand-1); font-size: 12px; } .sidebar_left .wrapper .dark_mode .on_off ul li .right span, .sidebar_left .wrapper .dark_mode .on_off ul li .right i { color: var(--brand-1); font-size: 12px; } .sidebar_left .wrapper .dark_mode .on_off ul li .right span { margin-right: 25px; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #555; } .main_body { position: relative; } .main_body .dash_main { padding-top: 70px; padding-left: 15px; } .top_section { margin-bottom: 40px; } .top_section .t_wrapper { width: 100%; } .top_section .t_wrapper img { width: 100%; border-radius: 5px; box-shadow: 0 4px 6px rgba(206, 203, 203, 0.61); } .mid_section { margin-bottom: 40px; } .mid_section .t_wrapper { width: 100%; } .mid_section .t_wrapper img { width: 100%; border-radius: 5px; box-shadow: 0 4px 6px rgba(206, 203, 203, 0.61); } .bottom_section { margin-bottom: 40px; } .bottom_section .t_wrapper { width: 100%; } .bottom_section .t_wrapper img { width: 100%; border-radius: 5px; box-shadow: 0 4px 6px rgba(206, 203, 203, 0.61); }