/* ONLY USE RGB! */
:root {
	--primary: 13, 139, 175;
	--secondary: 255, 255, 255;
	color-scheme: light only;
}

html {
	height: 100%;
}
body, html, button, li, input {
	font-family: 'Poppins', sans-serif;
	font-weight:300;
	font-size: 16px;
	color:#333;
}
body {
    padding: 0;
    margin: 0;
    background: #f9fafb;
	overflow-x:hidden;
	display:flex;
	flex-direction: column;
}
input:not([type="checkbox"]) {
	box-sizing: border-box;
}
footer {
	background-color: white;
    border-top: 1px solid #e2e2e2;
    box-shadow: 0 -2px 2px 0 hsl(0deg 0% 93% / 50%);
	bottom:0;
	left:0;
	text-align:center;
	padding:10px;
	font-size:11px;
	z-index: 999;
	margin-top:auto;
	position:fixed;
	width:100%;
}
input {
	border: 1px solid #e2e2e2;
    box-shadow: 0 2px 2px 0 hsl(0deg 0% 93% / 50%);
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
}
container {
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
	width:100%;
	display: block;
}
main {
	width:calc(100% - 60px);
	display:flex;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
}
card {
	border-radius: 15px;
	box-shadow: 0 2px 4px rgb(157 161 164 / 19%);
	background-color: #fff;
	padding:30px 40px;
	display: block;
	border: 1px solid #e2e2e2;
	margin-bottom:30px;
	margin-left: auto;
    margin-right: auto;
	scroll-margin-top: 30px;
}
card.inner {
	background:#f9fafb7d;
}
card h4 {
	margin:0 0 15px 0;
	font-weight:500;
	display:flex;
	gap:10px;
	align-items: center;
}
.withheader box h4 {
	font-size:13px;
}
card h4>small {
	background-color: rgb(var(--primary));
    border-radius: 5px;
    padding: 4px 6px;
    vertical-align: middle;
    font-size: 9px;
    color: white;
    text-transform: uppercase;
    line-height: 1;
	margin-left:5px;
}
card-header {
	font-weight:500;
	display:flex;
	align-items: center;
	margin: 20px 0;
	width:100%;
}
card>card-header:first-child,
card>div.flex>div>card-header:first-child {
	margin-top:0;
}
.withheader card-header {
	margin-bottom:0;
	flex-wrap: wrap;
}
.withheader card-header p {
	font-weight:300;
	font-size:13px;
	width:100%;
	border-bottom: 1px solid #e2e2e2;
    padding-bottom: 20px;
	opacity: 0.7;
}
card-header>h4 {
	margin-bottom:0;
	margin-right:auto;
	display:flex;
	gap:10px;
	align-items: center;
}
card-info {
	font-size:11px;
	text-align:right;
	margin-top:-15px;
	margin-bottom:30px;
	display:block;
}


button, .btn {
	background-color: rgb(var(--primary));
    border-radius: 5px;
    border: 0;
    color: white;
    padding: 8px 20px;
	transition:all 0.3s ease-in-out;
	cursor:pointer;
	line-height: 1;
	text-transform:uppercase;
	font-size: 13px;
    font-weight: 400;
	text-decoration: none;
}
button:hover, .btn:hover {
	background-color: #333333;
}
button.small, .btn.small {
	font-size:11px;
	padding: 6px 15px;
    text-transform: uppercase;
	min-height: 23px;
}

infobox {
	display:block;
	margin-top:50px;
}
infobox button {
	opacity:0.3;
	background:none!important;
	color:black;
}
infobox button:hover {
	opacity:1;
}
#alldomains>infobox>button:first-child {
	padding-left:0;
}

infobox.subbtns {
	margin-top: 30px;
    margin-bottom: 20px;
	gap:20px;
	display:flex;
}
infobox.subbtns button {
	opacity:0.6;
    background: #333333!important;
    color: white;
}
infobox.subbtns button:hover {
	opacity:1;
}

infobox.smaller {
	font-size:12px;
	margin-top:-10px;
	color:#d4d4d4;
}

cols {
	display:flex;
	gap:50px;
}
col-6 {
	width:50%;
}

header {
	position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    height: auto;
    background-color: white;
	border-bottom: 1px solid #e2e2e2;
    box-shadow: 0 2px 2px 0 hsl(0deg 0% 93% / 50%);
}
header>container {
	display:flex;
	align-items:center;
	width:calc(100% - 60px);
	overflow: visible;
}
header nav {
	width:100%;
}
header ul {
	display:flex;
	list-style: none;
	margin:0;
	padding: 0;
}
header ul li {
	position:relative;
}
header ul.dd {
	/* position:absolute;
	top:100%;
	left:0; */
	position:fixed;
	background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
	box-shadow: 0 2px 4px rgb(157 161 164 / 19%);
	border: 1px solid #e2e2e2;
    border-top: 0;
	display: flex;
    flex-direction: column;
	display:none;
	width:170px;
}
header ul li:hover > ul.dd {
	display:block;
}
header a {
	text-decoration: none;
	transition:all 0.3s ease-in-out;
}
header ul a {
	color:#333;
	padding:10px 20px;
	display: flex;
	align-items: center;
}
header ul a.on {
	border-bottom:1px solid #333;
}
header ul a>span.svg_icon {
	display:inline-block;
	margin-right:6px;
	width:20px;
	height:20px;
}
header ul li.on {
	background:#f5f5f5;
}
header ul.dd a:hover {
	background:#efefef;
}
header ul.dd li:last-child a {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
header .noti {
	margin-left:auto;
	display:flex;
	align-items: center;
	margin-right:10px;
}
header .noti>div {
	width: 18px;
    height: 18px;
	cursor:pointer;
}
header .avatar {
	display:flex;
	align-items: center;
}
header .avatar img {
	max-width:30px;
	border:2px solid transparent;
	transition:all 0.3s ease-in-out;
	border-radius:100%;
}
header .avatar:hover img, header .avatar.on img {
	border-color:rgb(var(--primary));
}
header .avatar.on {
	background:transparent;
}
header .avatar>a {
	padding:0;
	line-height: 1;
}
header .avatar .dd {
	right: 0;
    top: 100%;
    position: absolute;
}

.logo a {
	font-weight:700;
	color:rgb(var(--primary));
	text-transform: uppercase;
	font-size:20px;
	margin-right:20px;
	display:inline-flex;
	gap:10px;
}

.dash-info {
	display:flex;
	gap:50px;
	justify-content: space-between;
}
.dash-info.withheader {
	flex-wrap:wrap;
	row-gap: 20px;
}
.dash-info.withheader box {
	flex: 1;
}
.dash-info-inner {
	padding:20px 30px;
}




select, input:not([type="radio"]):not([type="checkbox"]), textarea {
    display: inline-block;
    background-color: #fff;
	border: 1px solid #e2e2e2;
    box-shadow: 0 2px 2px 0 hsl(0deg 0% 93% / 50%);
	border-radius:10px;
	padding:10px 15px;
    appearance: none;
	color:#333;
	width: 100%;
	font-size: 16px;
	min-height:46px;
	margin:0;
}
select.autowidth, input.autowidth {
	width: auto;
}
select {
	padding:10px 40px 10px 20px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}




.ct-series-a .ct-line {
	stroke: rgb(var(--primary));
	stroke-width: 2px;
}
.ct-series-a .ct-area { fill: rgb(var(--primary)); fill-opacity: 0.1; }


.ct-series-a .ct-line.alert {
	stroke: tomato;
	stroke-width: 2px;
}
.ct-series-a .ct-area.alert { fill: tomato; fill-opacity: 0.1; }

  
.switch input {
	position: absolute;
	opacity: 0;
	cursor:pointer;
	width:auto;
	min-height:5px;
}

.switch {
	display: inline-block;
    background: #e2e2e2;
    border-radius: 1em;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    height: 25px;
    width: 60px;
    min-width: 60px;
	margin-bottom: 0;
}
.switch.on, .switch:has(input:checked) {
	background:#16cf71;
}
.switch.other:has(input:checked) {
	background:rgb(var(--primary));
}
.switch>div:after {
	content: "|";
    font-size: 10px;
    line-height: 1;
	font-weight: 600;
	color:#c2c2c2;
}
.switch:has(input:checked)>div:after {
	content:"O";
}

.switch>div {
	height: 17px;
    width: 25px;
    border-radius: 1em;
    background: #FFF;
    transition: all 300ms;
    position: relative;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.switch:has(input:checked)>div {
	background:#fff;
}

.switch input:checked + div {
	left:calc(100% - 30px);
}

.switch.loading>div:after {
	animation: spin 1s linear infinite;
}

.switch.loading {
    background: #ffca7b!important;
}
.switch.loading>div:after {
	content: "|"!important;
}
@keyframes spin {
	from {
	  transform: rotate(0deg); /* Start at 0 degrees */
	}
	to {
	  transform: rotate(360deg); /* End at 360 degrees */
	}
  }



.tablerow {
	border-radius: 15px;
    box-shadow: 0 2px 4px rgb(157 161 164 / 19%);
    background-color: #fff;
    padding: 10px 20px;
    display: flex;
    border: 1px solid #e2e2e2;
	margin-bottom:20px;
	justify-content: space-between;
	align-items:center;
	background:#f9fafb;
	transition:all 0.3s ease-in-out;
	flex-wrap: wrap;
	gap:0 10px;
}
.tablerow {
    box-shadow: none;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
    background: none;
    margin: 0;
    padding: 15px 0;
}
.tablerow.header {
	border:0;
	background:none;
	font-weight:500;
	box-shadow: none;
	margin-bottom:0;
}
.tablerow .type,
.tablerow .enabled,
.tablerow .action { width:120px; min-width: 55px; }

.tablerow .action { min-width: 80px; max-width: 80px; }

.tablerow.header .action,
.tablerow.header .enabled,
.tablerow .enabled,
.tablerow .type,
.tablerow .action { text-align:center }
.tablerow .action { justify-content: center!important; }
.tablerow .domain { margin-right:auto; display: inline-flex; align-items: center; gap: 10px; }
.tablerow .loadmore {
	width:100%;
	max-height: 0;
    overflow: hidden;
	transition:all 0.5s ease-in-out;
}
.tablerow .loadmore.open {
	max-height:5000px;
	cursor:auto;
}
.loadmore>hr {
	opacity:0;
}
.loadmore .tablerow {
	background:white;
	flex-wrap: nowrap;
    margin-bottom: -1px;
    border-radius: 0;
	gap: 30px;
	padding:10px;
	background: #f9fafb;
	border:1px solid #e2e2e2;
}
.tablerow .enabled {
	justify-items: center;
    align-items: center;
    display: inline-grid;
	width:70px;
	display:none;
}
.loadmore>.tablerow.last {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.loadmore .header {
	background:#f1f1f1;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid #e2e2e2;
	border-bottom:0;
}
.loadmore button.small {
	background:#707070;
}
.loadmore button.small:hover {
	background:#333;
}

.loadmore .tablerow.header .action, .loadmore .tablerow.header .enabled, .loadmore .tablerow .enabled, .loadmore .tablerow .type {
	text-align: left;
}
.loadmore .nowrap {
	text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	width: 100%;
}
.loadmore .nowrap.shorter {
	max-width: 200px;
}
.loadmore .nowrap:hover {
	text-wrap: initial;
	word-break: break-all;
}
.tablerow .action, .tablerow.header .action, .loadmore .action,
.tablerow .dropdown, .tablerow.header .dropdown {
	text-align:right;
	display:inline-flex;
	justify-content: end;
	align-items:center;
	gap:10px;
}
.tablerow.closed {
    opacity: 0.5;
}
.tablerow.open {
    opacity: 1;
}
.loadmore small {
	background-color: #eee;
    border-radius: 5px;
    padding: 2px 6px;
    vertical-align: middle;
    font-size: 8px;
    color: #333;
    text-transform: uppercase;
    line-height: 1;
	margin-left:10px;
	display: inline-block;
}
.loadmore .ttl {
	display: inline-flex;
    align-items: center;
	width:100px;
	min-width: 100px;
}
.loadmore .ttl small {
	margin-left:auto;
}



table.addrecord {
	width:100%;
	text-align:left;
}
table.addrecord input, table.addrecord select {
	width:100%;
	font-size:inherit;
}
table.addrecord input {
	padding:10px;
	background:none;
	width: 100%;
}
table.addrecord select {
	width:120px;
	height: 44px;
}
table.addrecord thead {
	text-align:left;
}

nav a.isdocker {
	display: flex;
    align-items: center;
}
nav a.isdocker:before {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 439 309' style='enable-background:new 0 0 439 309;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%231D63ED;%7D%0A%3C/style%3E%3Cpath class='st0' d='M379.6,111.7c-2.3-16.7-11.5-31.2-28.1-44.3l-9.6-6.5l-6.4,9.7c-8.2,12.5-12.3,29.9-11,46.6 c0.6,5.8,2.5,16.4,8.4,25.5c-5.9,3.3-17.6,7.7-33.2,7.4H1.7l-0.6,3.5c-2.8,16.7-2.8,69,30.7,109.1c25.5,30.5,63.6,46,113.4,46 c108,0,187.8-50.3,225.3-141.9c14.7,0.3,46.4,0.1,62.7-31.4c0.4-0.7,1.4-2.6,4.2-8.6l1.6-3.3l-9.1-6.2 C419.9,110.8,397.2,108.3,379.6,111.7L379.6,111.7z M240,0h-45.3v41.7H240V0z M240,50.1h-45.3v41.7H240V50.1z M186.4,50.1h-45.3 v41.7h45.3V50.1z M132.9,50.1H87.6v41.7h45.3V50.1z M79.3,100.2H34v41.7h45.3V100.2z M132.9,100.2H87.6v41.7h45.3V100.2z M186.4,100.2h-45.3v41.7h45.3V100.2z M240,100.2h-45.3v41.7H240V100.2z M293.6,100.2h-45.3v41.7h45.3V100.2z'/%3E%3C/svg%3E%0A");
	display: block;
    width: 19px;
    height: 13px;
    background-size: contain;
    content: '';
    background-repeat: no-repeat;
	margin-right:10px;
}



button.edit-record, button.delete-record {
	text-indent:-500px;
	overflow:hidden;
	padding:5px 10px;
}
button.delete-record {
	margin-left:6px;
}
button.edit-record:after, button.delete-record:after {
	content: '';
	background-repeat: no-repeat;
	background-size:contain;
	display:block;
	width: 14px;
    height: 14px;
	text-indent:-100px;
}
button.edit-record:after {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg fill='none' height='24' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}
button.delete-record:after {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23FFF;%7D%3C/style%3E%3C/defs%3E%3Ctitle/%3E%3Cg data-name='Layer 17' id='Layer_17'%3E%3Cpath class='cls-1' d='M24,31H8a3,3,0,0,1-3-3V9A1,1,0,0,1,7,9V28a1,1,0,0,0,1,1H24a1,1,0,0,0,1-1V9a1,1,0,0,1,2,0V28A3,3,0,0,1,24,31Z'/%3E%3Cpath class='cls-1' d='M28,7H4A1,1,0,0,1,4,5H28a1,1,0,0,1,0,2Z'/%3E%3Cpath class='cls-1' d='M20,7a1,1,0,0,1-1-1V3H13V6a1,1,0,0,1-2,0V2a1,1,0,0,1,1-1h8a1,1,0,0,1,1,1V6A1,1,0,0,1,20,7Z'/%3E%3Cpath class='cls-1' d='M16,26a1,1,0,0,1-1-1V11a1,1,0,0,1,2,0V25A1,1,0,0,1,16,26Z'/%3E%3Cpath class='cls-1' d='M21,24a1,1,0,0,1-1-1V13a1,1,0,0,1,2,0V23A1,1,0,0,1,21,24Z'/%3E%3Cpath class='cls-1' d='M11,24a1,1,0,0,1-1-1V13a1,1,0,0,1,2,0V23A1,1,0,0,1,11,24Z'/%3E%3C/g%3E%3C/svg%3E");
}

.click_to_copy {
	cursor:pointer;
}

.swal2-container {
	z-index:999999!important;
}
div:where(.swal2-container) .swal2-textarea {
	font-size:12px;
	min-height:40vh;
}
.op-sys-text .swal2-html-container {
	font-family: monospace;
	font-size:12px;
	text-align:left;
	white-space: pre-line;
}
form label {
	margin-bottom:10px;
	display:inline-block;
}
form button[type="submit"] {
	margin-top:30px;
}
div:where(.swal2-container) .swal2-input {
    margin-top: 15px !important;
}





div:where(.swal2-container) h2:where(.swal2-title) {
	padding-top:0;
	font-weight:500;
}


field, .add_webserver_options {
	display: flex;
    gap: 20px;
	align-items: center;
	margin-bottom:23px;
}
field>label {
	margin-bottom:0;
}
field>label:not(.switch):not(.option) {
	min-width:130px;
}
field button {
	background:#333333;
	font-size: 12px;
	border-radius: 5px;
	padding: 5px 10px;
}
field button:hover {
	background:rgb(var(--primary));
}
field.info {
	background: rgb(255 232 114 / 50%);
    border: 2px solid rgb(231 209 97 / 50%);
    padding: 0 20px;
    border-radius: 15px;
    font-size: 13px;
	font-weight: 300;
	margin-left: 150px;
	text-align: left;
}
field>label.option, .add_webserver_options label.option {
	background: #f2f2f2;
    padding: 2px 10px 2px 0;
    border: 2px solid #e9e9e9;
    border-radius: 5px;
    font-size: 13px;
	transition:all 0.3s ease-in-out;
    display: inline-flex;
    align-items: center;
	padding: 3px 8px;
	gap:5px;
}
field>label.option.checked, .add_webserver_options label.option:checked {
	background: #a8ff9d;
    border-color: #8cdf81;
}
field>label.option>input, .add_webserver_options label.option>input {
	margin:0;
	box-shadow:none;
}

div:where(.swal2-container) .swal2-html-container {
	font-size:16px;
}

.loading>div {
animation: pulse-animation 0.8s infinite;
}

card-header:has(h4 .help) h4 {
	display:flex;
	align-items: center;
	gap:10px;
}
.help {
    display: inline-block;
    width: 18px;
    height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' width='18' height='18'%3E%3Cstyle%3E.a%7Bfill:rgb(var(--primary));%7D%3C/style%3E%3Cpath fill-rule='evenodd' class='a' d='m0 9c0-5 4-9 9-9 5 0 9 4 9 9 0 5-4 9-9 9-5 0-9-4-9-9zm9 7.5c4.1 0 7.5-3.4 7.5-7.5 0-4.1-3.4-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5 0 4.1 3.4 7.5 7.5 7.5zm0.8-4.5l-0.1 1.5h-1.4l-0.1-1.5zm-3.7-4.6c0-1.6 1.4-2.9 3-2.9 1.6 0 3 1.3 3 2.9 0 0.9-0.5 1.7-1 2.2-0.4 0.4-0.9 0.7-1.3 1l0.1 0.6h-1.5v-1.4l0.3-0.3c0.4-0.2 0.9-0.6 1.3-1q0.6-0.6 0.6-1.1c0-0.7-0.6-1.4-1.5-1.4-0.9 0-1.5 0.7-1.5 1.4z'/%3E%3C/svg%3E");
	cursor:pointer;
	overflow:hidden;
	text-indent: -200px;
}
.help_content {
	border-radius: 10px;
    box-shadow: 0 2px 4px rgb(157 161 164 / 19%);
    background-color: rgba(var(--primary), 0.06);
    padding: 20px;
    border: 1px solid rgb(var(--primary));
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease-in-out;
}
.help_content p {
	font-size:14px;
}
code {
	background:white;
	padding:3px 7px;
	border:1px solid #e2e2e2;
	font-size:80%;
	border-radius:5px;
}
card code {
	background:#f9fafb;
}
card .help_content code {
	background:white;
}
.help_content>p:last-child {
	margin-bottom:0;
}
.help_content.hide {
	display:none;
}

.help_mini {
    display: inline-block;
    width: 15px;
    height: 15px;
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' width='18' height='18'%3E%3Cstyle%3E.a%7Bfill:rgb(var(--primary));%7D%3C/style%3E%3Cpath fill-rule='evenodd' class='a' d='m0 9c0-5 4-9 9-9 5 0 9 4 9 9 0 5-4 9-9 9-5 0-9-4-9-9zm9 7.5c4.1 0 7.5-3.4 7.5-7.5 0-4.1-3.4-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5 0 4.1 3.4 7.5 7.5 7.5zm0.8-4.5l-0.1 1.5h-1.4l-0.1-1.5zm-3.7-4.6c0-1.6 1.4-2.9 3-2.9 1.6 0 3 1.3 3 2.9 0 0.9-0.5 1.7-1 2.2-0.4 0.4-0.9 0.7-1.3 1l0.1 0.6h-1.5v-1.4l0.3-0.3c0.4-0.2 0.9-0.6 1.3-1q0.6-0.6 0.6-1.1c0-0.7-0.6-1.4-1.5-1.4-0.9 0-1.5 0.7-1.5 1.4z'/%3E%3C/svg%3E");
	cursor:pointer;
	background-size:contain;
}

div:where(.swal2-container) div:where(.swal2-html-container) {
	font-weight:300;
}
div:where(.swal2-container) button:where(.swal2-styled) {
	font-weight:400;
	font-size:13px;
}

card h4>small[required] {
	background:tomato;
}


.side-panel-overlay {
	background: rgb(var(--primary), 0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	transition:all 0.3s ease-in-out;
}
.side-panel-overlay.closed {
	opacity:0;
	pointer-events:none;
}
.side-panel {
	border-radius: 10px 10px 0 0;
    box-shadow: -2px 0 4px rgb(157 161 164 / 19%);
    background-color: #f9fafb;
    padding: 30px 40px;
    display: block;
    border: 1px solid #e2e2e2;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
	width:calc(100% - 142px);
	position:fixed;
	z-index:99999;
	height:calc(100% - 92px);
	transition:all 0.5s ease-in-out;
	border-right:0;
	overflow-y: auto;
	max-width:1300px;
	bottom:0;
	left: 50%;
	transform: translateX(-50%);
}
.side-panel.closed {
	bottom: -100%;
}
.side-panel h2 {
	font-weight:400;
	margin:0;
}
.side-panel .close {
	display:block;
	background:transparent;
	color:rgb(var(--primary));
	border-radius:100%;
	width: 20px;
	height:20px;
	border:3px solid rgb(var(--primary));
	font-weight: 900;
    text-align: center;
	transition:all 0.3s ease-in-out;
	cursor:pointer;
	position:absolute;
	top:15px;
	right:15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.side-panel .close:hover {
	color:black;
	border-color:black;
}
.panel-top {
	display:flex;
	gap:20px;
	align-items: center;
	margin-bottom:20px;
}
.panel-top .panel-buttons {
	display:inline-flex;
	gap:0;
	align-items: center;
}
.panel-top .panel-buttons>button {
	background:#aeaeae;
	padding:15px 20px;
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1537 1537' width='1537' height='1537'%3E%3Cstyle%3E%3C/style%3E%3Cpath fill='white' d='m1536.5 659.4v222q0 12-8 23-8 11-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25 0 13-9 23-27 37-99 108-72 71-94 71-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5-10.5-8.5-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5 36-45.5 54-70.5-27-50-41-99l-183-27q-13-2-21-12.5-8-10.5-8-23.5v-222q0-12 8-23 8-11 19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5 72.5-71.5 94.5-71.5 13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5 10.5 8.5 11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5-36 45.5-54 70.5 26 50 41 98l183 28q13 2 21 12.5 8 10.5 8 23.5zm-512 109q0-106-75-181-75-75-181-75-106 0-181 75-75 75-75 181 0 106 75 181 75 75 181 75 106 0 181-75 75-75 75-181z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size:18px;
	background-position: center;
	border-radius: 0;
	border:0;
	outline: none;
	border-spacing: 0;
	margin-left:-1px;
}
.panel-top .panel-buttons>button:hover {
	background-color:#8b8b8b;
}
.panel-top .panel-buttons>button.on {
	background-color:rgba(var(--primary), 1);
}
.panel-top .panel-buttons>button:first-child {
	border-radius: 5px 0 0 5px;
}
.panel-top .panel-buttons>button:last-child {
	border-radius: 0 5px 5px 0;
}
.panel-top .panel-buttons>button.file {
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 358' width='420' height='358'%3E%3Cpath fill='white' d='m362.2 84.5h-92.9c-6.9 0-13.6-2.8-18.5-7.7l-59.3-59.3c-10.8-10.9-25.5-17-40.9-16.9h-92.8c-15.3 0-29.9 6-40.7 16.8-10.9 10.8-17 25.4-17 40.7v241.8c0 15.3 6.1 29.9 17 40.7 10.8 10.8 25.4 16.8 40.7 16.9h304.4c15.3-0.1 29.9-6.1 40.7-16.9 10.9-10.8 17-25.4 17-40.7v-157.6c0-15.3-6.1-30-16.9-40.8-10.8-10.9-25.5-16.9-40.8-17zm26.3 215.4c-0.1 7-2.8 13.6-7.8 18.6-4.9 4.9-11.5 7.7-18.5 7.7h-304.4c-7 0-13.6-2.8-18.5-7.7-5-5-7.7-11.6-7.7-18.6v-241.8c0-7 2.7-13.6 7.7-18.6 4.9-4.9 11.5-7.6 18.5-7.7h92.9c6.9 0.1 13.6 2.8 18.5 7.7l59.3 59.6c10.8 10.9 25.5 17 40.9 16.9h92.8c7 0 13.6 2.8 18.6 7.7 4.9 4.9 7.6 11.6 7.7 18.6zm-52.5-79c0 4.2-1.7 8.2-4.6 11.2-3 3-7 4.6-11.2 4.6-4.2 0-8.2-1.6-11.2-4.6-2.9-2.9-4.6-7-4.6-11.1 0-4.2 1.7-8.2 4.7-11.2 2.9-3 6.9-4.6 11.1-4.6 4.2 0 8.2 1.7 11.1 4.6 3 3 4.6 7 4.7 11.1zm0-57.7c0 4.2-1.7 8.2-4.7 11.2-2.9 3-6.9 4.6-11.1 4.6-4.2 0-8.2-1.7-11.2-4.6-2.9-3-4.6-7-4.6-11.2 0-4.2 1.7-8.2 4.7-11.1 2.9-3 7-4.6 11.1-4.6 4.2 0 8.2 1.6 11.2 4.6 2.9 2.9 4.6 7 4.6 11.1zm0 115.5c0 4.1-1.7 8.2-4.6 11.1-3 3-7 4.7-11.2 4.7-4.2 0-8.2-1.7-11.2-4.6-2.9-3-4.6-7-4.6-11.2 0-4.2 1.7-8.2 4.7-11.2 2.9-2.9 6.9-4.6 11.1-4.6 4.2 0.1 8.2 1.7 11.1 4.7 3 2.9 4.6 6.9 4.7 11.1z'/%3E%3C/svg%3E");
	background-size:19px;
}
.panel-top .panel-buttons>button.vhost {
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 462 462' width='462' height='462'%3E%3Cpath fill='white' d='m231 0.1c-45.7 0-90.3 13.5-128.3 38.9-38 25.4-67.6 61.4-85 103.6-17.5 42.2-22.1 88.7-13.2 133.4 8.9 44.8 30.9 86 63.2 118.3 32.3 32.3 73.5 54.3 118.2 63.2 44.8 8.9 91.3 4.3 133.5-13.2 42.2-17.4 78.2-47 103.6-85 25.4-38 38.9-82.6 38.9-128.3-0.1-61.2-24.4-119.9-67.7-163.2-43.3-43.3-102-67.6-163.2-67.7zm-187.7 251.9h62.3c1.2 51 14.2 101.1 37.9 146.3-27.4-14.3-50.8-35.2-68.3-60.7-17.5-25.5-28.4-54.9-31.9-85.6zm62.3-42h-62.3c3.5-30.7 14.4-60.1 31.9-85.6 17.5-25.5 40.9-46.4 68.3-60.7-23.7 45.2-36.7 95.3-37.9 146.3zm104.4 202.9c-30.3-19.6-58.3-79.6-62.4-160.9h62.4zm0-202.9h-62.4c4.1-81.3 32.1-141.3 62.4-160.9zm42 202.9v-160.9h62.4c-4.2 81.2-32.1 141.2-62.4 160.9zm0-202.9v-161c30.3 19.7 58.2 79.7 62.4 161zm66.5 188.3c23.7-45.2 36.7-95.3 37.9-146.3h62.3c-3.5 30.7-14.4 60.1-31.9 85.6-17.5 25.5-40.9 46.3-68.3 60.7zm37.9-188.3c-1.2-51.1-14.2-101.1-37.9-146.4 27.4 14.4 50.8 35.2 68.3 60.7 17.5 25.5 28.4 54.9 31.9 85.7z'/%3E%3C/svg%3E");
}
.panel-top .panel-buttons>button.security {
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316 400' width='316' height='400'%3E%3Cpath fill='white' d='m273.5 179v-63c0-63.7-51.8-115.4-115.5-115.4-63.7 0-115.5 51.7-115.5 115.4v63h31.5v-63c0-46.3 37.7-83.9 84-83.9 46.3 0 84 37.6 84 83.9v63z'/%3E%3Cpath fill='white' d='m0.6 399.4h314.8v-199.4h-314.8zm157.4-146.9c17.3 0 31.5 14.1 31.5 31.4 0 13.7-8.8 25.2-21 29.6v22.9c0 5.8-4.7 10.5-10.5 10.5-5.8 0-10.5-4.7-10.5-10.5v-22.9c-12.2-4.3-21-15.8-21-29.6 0-17.3 14.2-31.4 31.5-31.4z'/%3E%3Cpath fill='white' d='m168.5 284c0 5.8-4.7 10.5-10.5 10.5-5.8 0-10.5-4.7-10.5-10.5 0-5.8 4.7-10.5 10.5-10.5 5.8 0 10.5 4.7 10.5 10.5z'/%3E%3C/svg%3E");
	background-size:15px;
}
.panel-top .panel-buttons>button.stats {
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 324 272' width='324' height='272'%3E%3Cpath fill='white' d='m0.8 272h322.4v-30.2h-25.2v-136c0-6.7-2.6-13.1-7.3-17.8-4.8-4.8-11.2-7.4-17.9-7.4h-55.4v-55.4c0-6.7-2.6-13.1-7.4-17.9-4.7-4.7-11.1-7.3-17.8-7.3h-60.4c-6.7 0-13.1 2.6-17.8 7.3-4.8 4.8-7.4 11.2-7.4 17.9v95.7h-55.4c-6.7 0-13.1 2.6-17.8 7.4-4.8 4.7-7.4 11.1-7.4 17.8v95.7h-25.2zm267-161.2v131h-50.4v-131zm-131-80.6h50.4v211.6h-50.4zm-80.6 120.9h50.4v90.7h-50.4z'/%3E%3C/svg%3E");
	background-size:20px;
}
.panel-top .panel-buttons>button.logs {
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 278 228' width='278' height='228'%3E%3Cpath fill='white' d='m265 126.6h-251.9c-7 0-12.6-5.7-12.6-12.6 0-7 5.6-12.6 12.6-12.6h251.9c3.3 0 6.5 1.3 8.9 3.7 2.3 2.3 3.6 5.6 3.6 8.9 0 3.3-1.3 6.5-3.6 8.9-2.4 2.4-5.6 3.7-8.9 3.7z'/%3E%3Cpath fill='white' d='m265 227.4h-251.9c-7 0-12.6-5.7-12.6-12.6 0-7 5.6-12.6 12.6-12.6h251.9c3.3 0 6.5 1.3 8.9 3.7 2.3 2.3 3.6 5.5 3.6 8.9 0 3.3-1.3 6.5-3.6 8.9-2.4 2.3-5.6 3.7-8.9 3.7z'/%3E%3Cpath fill='white' d='m265 25.8h-251.9c-7 0-12.6-5.6-12.6-12.6 0-6.9 5.6-12.6 12.6-12.6h251.9c3.3 0 6.5 1.4 8.9 3.7 2.3 2.4 3.6 5.6 3.6 8.9 0 3.4-1.3 6.6-3.6 8.9-2.4 2.4-5.6 3.7-8.9 3.7z'/%3E%3C/svg%3E");
}
.panel-top .panel-buttons>button.terminal {
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 668 534' width='668' height='534'%3E%3Cstyle%3E.a%7Bfill:none;stroke:%23FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:66.7%7D%3C/style%3E%3Cpath class='a' d='m34 393.7v-253.4c0-37.3 0-56 7.3-70.2 6.4-12.6 16.5-22.8 29.1-29.2 14.3-7.2 32.9-7.2 70.3-7.2h386.6c37.4 0 56 0 70.3 7.2 12.5 6.4 22.8 16.6 29.1 29.2 7.3 14.2 7.3 32.9 7.3 70.1v253.6c0 37.2 0 55.9-7.3 70.1-6.3 12.6-16.6 22.8-29.1 29.2-14.3 7.2-32.9 7.2-70.2 7.2h-386.8c-37.3 0-56 0-70.2-7.2-12.6-6.4-22.7-16.6-29.1-29.2-7.3-14.2-7.3-32.9-7.3-70.2zm133.3-193.4l100 83.4-100 83.3m333.4 0h-166.7'/%3E%3C/svg%3E");
	background-size:20px;
}
.panel-top .panel-buttons>button.overview {
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 668' width='800' height='668'%3E%3Cpath fill='%0A%23FFF' d='m786.7 410.7l-123.4-333.4c-20-43.3-63.3-76.6-113.3-76.6-63.3 0-116.7 53.3-116.7 116.6v16.7h-66.6v-16.7c0-63.3-53.4-116.6-116.7-116.6-50 0-93.3 33.3-110 80l-123.3 333.3c-10 20-16.7 43.3-16.7 70 0 100 83.3 183.3 183.3 183.3 96.7 0 173.4-73.3 183.4-166.6h66.6c10 93.3 86.7 166.6 183.4 166.6 100 0 183.3-83.3 183.3-183.3 0-26.7-6.7-50-13.3-73.3zm-603.4 190c-63.3 0-116.6-53.4-116.6-116.7 0-63.3 53.3-116.7 116.6-116.7 63.4 0 116.7 53.4 116.7 116.7 0 63.3-53.3 116.7-116.7 116.7zm116.7-380v120c-33.3-23.4-73.3-40-116.7-40q-30 0-60 10l70-183.4 10-23.3c3.4-10 10-20 16.7-26.7 3.3-3.3 6.7-6.6 13.3-6.6 0 0 0 0 3.4 0 3.3-3.4 6.6-3.4 13.3-3.4 26.7 0 50 23.4 50 50zm133.3-20v233.4h-66.6v-233.4zm66.6 20v-103.3c0-26.7 23.4-50 50-50 6.7 0 10 0 13.4 3.3 0 0 0 0 3.3 0 3.3 0 10 3.4 13.3 6.7 6.7 6.7 13.4 16.7 16.7 26.7l10 23.3 70 183.3q-30-10-60-10c-43.3 0-83.3 16.7-116.7 43.4zm116.7 380c-63.3 0-116.7-53.4-116.7-116.7 0-63.3 53.4-116.7 116.7-116.7 63.3 0 116.7 53.4 116.7 116.7 0 63.3-53.4 116.7-116.7 116.7z'/%3E%3C/svg%3E");

}
.panel-top .panel-buttons>button.seo {
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 673 673' width='673' height='673'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m557.7 416.3l53-53.1c82.9-82.9 82.9-217.6 0-300.5-82.9-82.9-217.6-82.9-300.5 0l-53.1 53c-14.6 14.7-14.6 38.4 0 53.1 14.7 14.6 38.4 14.6 53.1 0l53-53.1c53.7-53.6 140.8-53.6 194.5 0 53.6 53.7 53.6 140.8 0 194.5l-53.1 53c-14.6 14.6-14.6 38.4 0 53 14.7 14.7 38.4 14.7 53.1 0z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m115.8 257.1l-53.1 53.1c-82.9 82.9-82.9 217.6 0 300.5 82.9 82.9 217.6 82.9 300.5 0l53-53c14.7-14.7 14.7-38.4 0-53.1-14.6-14.6-38.4-14.6-53 0l-53 53.1c-53.7 53.6-140.8 53.6-194.5 0-53.6-53.7-53.6-140.8 0-194.5l53.1-53c14.6-14.7 14.6-38.4 0-53.1-14.7-14.6-38.4-14.6-53.1 0z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m221.8 504.6l282.8-282.8c14.7-14.6 14.7-38.4 0-53-14.6-14.7-38.4-14.7-53 0l-282.8 282.8c-14.7 14.7-14.7 38.4 0 53 14.6 14.7 38.4 14.7 53 0z'/%3E%3C/svg%3E");
}
.panel-top .panel-buttons>button.backups {
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 734 691' width='734' height='691'%3E%3Cstyle%3E.a%7Bfill:%23fff;stroke:%23fff;stroke-width:22.2%7D%3C/style%3E%3Cpath fill-rule='evenodd' class='a' d='m100.3 456.9h533.4v44.4h-533.4z'/%3E%3Cpath fill-rule='evenodd' class='a' d='m544.8 545.8h88.9v44.4h-88.9z'/%3E%3Cpath class='a' d='m255.9 188.4l88.9-87.1v288.9c0 5.9 2.3 11.6 6.5 15.7 4.2 4.2 9.8 6.5 15.7 6.5 5.9 0 11.5-2.3 15.7-6.5 4.2-4.1 6.5-9.8 6.5-15.7v-288.9l88.9 87.8c4.3 4.1 10 6.3 15.9 6.1 5.9-0.1 11.5-2.6 15.5-6.9 4.1-4.2 6.3-10 6.2-15.8-0.2-5.9-2.7-11.5-6.9-15.6l-141.8-140.9-142 140.9c-3.4 4.2-5.2 9.6-5 15 0.3 5.5 2.5 10.6 6.4 14.5 3.8 3.9 8.9 6.3 14.3 6.7 5.5 0.3 10.9-1.3 15.2-4.7z'/%3E%3Cpath class='a' d='m652.3 265.1c-1.3-4.5-3.4-8.7-6.2-12.5-2.7-3.8-6-7.1-9.9-9.9-3.8-2.7-8-4.8-12.5-6.2-4.5-1.3-9.1-2-13.8-1.8h-176.2v44.4h176.6c23.4 65.3 61.6 170 67.8 188.5v167.1h-622.2v-167.1c6.2-18.5 67.8-188.5 67.8-188.5h176.6v-44.4h-176.2c-4.6-0.2-9.2 0.4-13.6 1.6-4.4 1.3-8.6 3.3-12.4 6-3.8 2.6-7.1 5.8-9.9 9.5-2.7 3.7-4.9 7.8-6.3 12.2-70.5 192.9-70.5 195.1-70.5 200.2v170.5c0 5.8 1.2 11.6 3.4 17 2.3 5.4 5.5 10.3 9.7 14.4 4.1 4.1 9 7.4 14.4 9.6 5.4 2.3 11.2 3.4 17 3.4h622.2c5.8 0 11.6-1.1 17-3.4 5.4-2.2 10.3-5.5 14.4-9.6 4.2-4.1 7.4-9 9.7-14.4 2.2-5.4 3.4-11.2 3.4-17v-170.5c0-5.1 0-7.3-70.3-199.1z'/%3E%3C/svg%3E");
	background-size: 20px;
}

.panel-top .panel-buttons>button.resources {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M42.5 16.3869C41.5521 14.0859 40.1874 12.0006 38.5 10.225C34.8561 6.39055 29.7072 4 24 4C12.9543 4 4 12.9543 4 24H14L19 32L28 14L35 24H44C44 35.0457 35.0457 44 24 44C18.5491 44 13.6075 41.8194 10 38.2829C8.17976 36.4985 6.69917 34.3688 5.66417 32' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

@media screen and (max-width:768px) {

	.panel-top .panel-buttons {
		overflow-x: auto; /* Enables horizontal scrolling when content overflows */
		overflow-y: hidden; /* Hides vertical scrollbar, if present */
		white-space: nowrap; /* Prevents child elements from wrapping to the next line */
	  }

}

.newwindowbtn {
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 700' width='800' height='700'%3E%3Cstyle%3E%3C/style%3E%3Cpath d='m725 0h-650c-41.4 0-75 33.6-75 75v550c0 41.4 33.6 75 75 75h650c41.4 0 75-33.6 75-75v-550c0-41.4-33.6-75-75-75zm-30.2 54.7c16.4 0 29.7 13.3 29.7 29.7 0 16.4-13.3 29.7-29.7 29.7-16.4 0-29.7-13.3-29.7-29.7 0-16.4 13.3-29.7 29.7-29.7zm-110.2 0c16.4 0 29.7 13.3 29.7 29.7 0 16.4-13.3 29.7-29.7 29.7-16.4 0-29.7-13.3-29.7-29.7 0-16.4 13.3-29.7 29.7-29.7zm-110.1 0c16.4 0 29.7 13.3 29.7 29.7 0 16.4-13.3 29.7-29.7 29.7-16.4 0-29.7-13.3-29.7-29.7 0-16.4 13.3-29.7 29.7-29.7zm263 570.3c0 6.9-5.6 12.5-12.5 12.5h-650c-6.9 0-12.5-5.6-12.5-12.5v-462.5h675z'/%3E%3Cpath d='m152.3 460.4h25.1c1.5 0 2.5-1 3-2.4l21.5-68.8h0.5l21 68.8c0.5 1.4 1.5 2.4 3 2.4h25.3c1.6 0 2.6-1 3.1-2.4l39.2-113.6c0.5-1.4-0.3-2.4-2-2.4h-31.1c-1.8 0-2.8 0.8-3.3 2.4l-19.3 70.5h-0.5l-21.5-70.5c-0.5-1.6-1.5-2.4-3.3-2.4h-21.2c-1.8 0-3.1 0.8-3.5 2.4l-21.1 70.5h-0.5l-20.2-70.5c-0.5-1.6-1.5-2.4-3.5-2.4h-31.1c-1.6 0-2.3 1-1.9 2.4l39.3 113.6c0.5 1.4 1.5 2.4 3 2.4z'/%3E%3Cpath d='m350.1 460.4h25.1c1.5 0 2.5-1 3-2.4l21.5-68.8h0.5l21 68.8c0.6 1.4 1.6 2.4 3.1 2.4h25.3c1.5 0 2.5-1 3-2.4l39.2-113.6c0.5-1.4-0.2-2.4-2-2.4h-31.1c-1.8 0-2.8 0.8-3.3 2.4l-19.2 70.5h-0.5l-21.5-70.5c-0.6-1.6-1.6-2.4-3.3-2.4h-21.3c-1.8 0-3 0.8-3.5 2.4l-21 70.5h-0.5l-20.3-70.5c-0.5-1.6-1.5-2.4-3.5-2.4h-31.1c-1.6 0-2.3 1-1.8 2.4l39.2 113.6c0.5 1.4 1.5 2.4 3 2.4z'/%3E%3Cpath d='m548.2 460.4h25.1c1.5 0 2.5-1 3-2.4l21.5-68.8h0.6l20.9 68.8c0.5 1.4 1.6 2.4 3.1 2.4h25.3c1.5 0 2.5-1 3-2.4l39.3-113.6c0.4-1.4-0.3-2.4-2.1-2.4h-31.1c-1.8 0-2.8 0.8-3.3 2.4l-19.2 70.5h-0.5l-21.5-70.5c-0.6-1.6-1.6-2.4-3.3-2.4h-21.3c-1.8 0-3 0.8-3.5 2.4l-21 70.5h-0.5l-20.3-70.5c-0.5-1.6-1.5-2.4-3.5-2.4h-31.1c-1.5 0-2.3 1-1.8 2.4l39.2 113.6c0.5 1.4 1.5 2.4 3 2.4z'/%3E%3C/svg%3E");
	background-position: center;
	background-size:contain;
	background-repeat: no-repeat;
	width:20px;
	height:20px;
	display:inline-block;
}

@keyframes pulse-animation {
	0% {
	box-shadow: 0 0 0 0px rgb(246 25 121 / 20%);
	}
	100% {
	box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}
}

.lds-dual-ring {
	display: inline-block;
	width: 80px;
	height: 80px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
border: 6px solid rgb(var(--primary));
border-color: rgb(var(--primary)) transparent rgb(var(--primary)) transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}






.tooltip {
	position: relative;
	cursor: pointer;
}
.tooltip::after {
	font-size: 10px;
    font-weight: 400;
	text-indent: initial;
	font-family: 'Poppins', sans-serif;
	text-transform:uppercase;
	line-height: 1;
	pointer-events: none;
	z-index: 10;
	content: attr(title2);
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: rgba(var(--primary, 0.8));
	color: white;
	padding: 5px 10px;
	border-radius: 8px;
	white-space: nowrap;
	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.tooltip::before {
	content: '';
	position: absolute;
	top: calc(100% - 2px);
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-bottom-color: rgba(var(--primary, 0.8));
	z-index: 10;
}

.tooltip::after,
.tooltip::before {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.tooltip:hover::after,
.tooltip:hover::before,
.tooltip:active::after,
.tooltip:active::before {
	opacity: 1;
}

.panel-tab {
	display:none;
}
.panel-tab.on {
	display:block;
}

.btn-loader {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: block;
	margin:0 auto;
	position: relative;
	background: #FFF;
	box-shadow: -18px 0 #FFF, 18px 0 #FFF;
	box-sizing: border-box;
	animation: shadowPulse 2s linear infinite;
}

.flex, .card_flex {
	display: flex;
    gap: 30px;
    flex-direction: row;
}
.flex>div {
	width:100%;
}
.card_flex {
	gap:0 30px;
}
.card_flex>card {
    width: 100%;
}
.card_flex.single_line>card {
	max-height: max-content;
}

label {
	color:grey;
	display:block;
	margin-bottom:8px;
}


info {
	border-radius: 15px;
    box-shadow: 0 2px 4px rgb(157 161 164 / 19%);
    background-color: #fffa4726;
    padding: 15px 20px;
    display: block;
    border: 1px solid #e3de3d;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
	color:#8b8b00;
}
error {
	border-radius: 15px;
    box-shadow: 0 2px 4px rgb(157 161 164 / 19%);
    background-color: #ff634724;
    padding: 15px 20px;
    display: block;
    border: 1px solid tomato;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
	color:#ac4431;
}


.btn_delete:not(.is_loading), .btn_restore:not(.is_loading), .btn_download:not(.is_loading), .btn_restart:not(.is_loading), .btn_disable:not(.is_loading) {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L17.1991 18.0129C17.129 19.065 17.0939 19.5911 16.8667 19.99C16.6666 20.3412 16.3648 20.6235 16.0011 20.7998C15.588 21 15.0607 21 14.0062 21H9.99377C8.93927 21 8.41202 21 7.99889 20.7998C7.63517 20.6235 7.33339 20.3412 7.13332 19.99C6.90607 19.5911 6.871 19.065 6.80086 18.0129L6 6M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M14 10V17M10 10V17' stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position:center;
	background-size: 18px;
}

.btn_restore:not(.is_loading) {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg fill='%23FFFFFF' width='800px' height='800px' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Ebackup-restore-line%3C/title%3E%3Crect class='clr-i-outline clr-i-outline-path-1' x='6' y='22' width='24' height='2'%3E%3C/rect%3E%3Crect class='clr-i-outline clr-i-outline-path-2' x='26' y='26' width='4' height='2'%3E%3C/rect%3E%3Cpath class='clr-i-outline clr-i-outline-path-3' d='M13,9.92,17,6V19a1,1,0,1,0,2,0V6l4,3.95A1,1,0,1,0,24.38,8.5L18,2.16,11.61,8.5A1,1,0,0,0,13,9.92Z'%3E%3C/path%3E%3Cpath class='clr-i-outline clr-i-outline-path-4' d='M30.84,13.37A1.94,1.94,0,0,0,28.93,12H21v2h7.95C30,16.94,31.72,21.65,32,22.48V30H4V22.48C4.28,21.65,7.05,14,7.05,14H15V12H7.07a1.92,1.92,0,0,0-1.9,1.32C2,22,2,22.1,2,22.33V30a2,2,0,0,0,2,2H32a2,2,0,0,0,2-2V22.33C34,22.1,34,22,30.84,13.37Z'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E");
}
.btn_download:not(.is_loading) {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg fill='%23ffffff' width='800px' height='800px' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Ebackup-line%3C/title%3E%3Crect class='clr-i-outline clr-i-outline-path-1' x='6' y='22' width='24' height='2'%3E%3C/rect%3E%3Cpath class='clr-i-outline clr-i-outline-path-2' d='M30.84,13.37A1.94,1.94,0,0,0,28.93,12H26.55a3,3,0,0,1-.14,2h2.54C30,16.94,31.72,21.65,32,22.48V30H4V22.48C4.28,21.65,7.05,14,7.05,14H9.58a3,3,0,0,1-.14-2H7.07a1.92,1.92,0,0,0-1.9,1.32C2,22,2,22.1,2,22.33V30a2,2,0,0,0,2,2H32a2,2,0,0,0,2-2V22.33C34,22.1,34,22,30.84,13.37Z'%3E%3C/path%3E%3Cpath class='clr-i-outline clr-i-outline-path-3' d='M18,19.84l6.38-6.35A1,1,0,1,0,23,12.08L19,16V4a1,1,0,1,0-2,0V16l-4-3.95a1,1,0,0,0-1.41,1.42Z'%3E%3C/path%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E");
}
.btn_restart:not(.is_loading) {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.99988C16.9706 2.99988 21 7.02931 21 11.9999C21 16.9704 16.9706 20.9999 12 20.9999C7.02944 20.9999 3 16.9704 3 11.9999C3 9.17261 4.30367 6.64983 6.34267 4.99988' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M3 4.49988H7V8.49988' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
	background-size: 16px;
}
.btn_disable:not(.is_loading) {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m0 0h32v32h-32z'/%3E%3Cpath d='m16 0c8.836556 0 16 7.163444 16 16s-7.163444 16-16 16-16-7.163444-16-16 7.163444-16 16-16zm0 2c-7.7319865 0-14 6.2680135-14 14s6.2680135 14 14 14 14-6.2680135 14-14-6.2680135-14-14-14zm3.5355339 9.0502525 1.4142136 1.4142136-8.4852814 8.4852814-1.4142136-1.4142136z' fill='%23FFFFFF' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 16px;
}


.styled-checkbox {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	color: #333;
	gap: 10px;
	user-select: none;
	position: relative;
	margin-bottom: 0;
}

.styled-checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.styled-checkbox .checkmark {
	min-width: 22px;
	min-height: 22px;
	background-color: #fff;
	border: 2px solid #ccc;
	border-radius: 6px;
	transition: all 0.2s ease;
	display: inline-block;
	position: relative;
}

.styled-checkbox input:checked + .checkmark {
	background-color: rgb(var(--primary));
	border-color: rgb(var(--primary));
}

.styled-checkbox .checkmark::after {
	content: "";
	position: absolute;
	display: none;
	left: 8px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.styled-checkbox input:checked + .checkmark::after {
	display: block;
}


card-header>h4, card h4 {
	display: flex;
    align-items: center;
	gap:10px;
	line-height: 1;
}




.accordbtn {
	background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 25px;
    height: 25px;
    padding: 0;
	text-indent: -200px;
	overflow:hidden;
	border-radius:0;
	background-image: url("data:image/svg+xml,%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 667 668' width='667' height='668'%3E%3Cstyle%3E.a%7Bopacity:.4;fill:%23292d32%7D.b%7Bfill:%23292d32%7D%3C/style%3E%3Cpath class='a' d='m473.7 0.7h-279.4c-121.3 0-193.6 72.3-193.6 193.6v279c0 121.7 72.3 194 193.6 194h279c121.4 0 193.7-72.3 193.7-193.6v-279.4c0.3-121.3-72-193.6-193.3-193.6z'/%3E%3Cpath class='b' d='m451.7 407.7c-6.4 0-12.7-2.4-17.7-7.4l-100-100-100 100c-9.7 9.7-25.7 9.7-35.3 0-9.7-9.6-9.7-25.6 0-35.3l117.6-117.7c9.7-9.6 25.7-9.6 35.4 0l117.6 117.7c9.7 9.7 9.7 25.7 0 35.3-5 5-11.3 7.4-17.6 7.4z'/%3E%3C/svg%3E");
}
.accordbtn:hover {
	background-color: transparent;
}


.navdd {
  width: 20px;
  height: 20px;

  /* icon color */
  background-color: rgb(var(--primary));

  /* SVG as a mask (shape), background-color becomes the fill */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 20px 20px;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 20px 20px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;

  padding: 0;
  min-width: 30px;
  min-height: 30px;
  border: 1px solid #e2e2e2;

  transition: background-color 0.15s ease;
}

.navdd:hover {
  background-color: #000;
}
.navdd-dropdown {
	position: absolute;
	background: white;
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 0;
	box-shadow: 0 2px 12px rgba(0,0,0,0.15);
	z-index: 99999999;
	min-width: 140px;
}

.navdd-dropdown button {
	display: block;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	padding: 8px 12px;
	cursor: pointer;
	color:#333;
}

.navdd-dropdown button:hover {
	background: #f2f2f2;
}

/* arrow pointing up */
.navdd-arrow {
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid white;
	position: absolute;
	top: -7px;
	left: 50%;
	transform: translateX(-50%);
	filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.2));
}



body:before {
	content: '';
    background: #00000036;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
	opacity:0;
	pointer-events: none;
	transition:opacity 0.3s ease;
	backdrop-filter: blur(2px);
}
body.dd_active:before {
	opacity:1;
	pointer-events:all;
}
.dropdown-menu {
    position: absolute;
    background: white;
    border: 1px solid #8e8e8e;
    border-radius: 8px;
    min-width: 160px;
    box-shadow: 0 2px 4px rgb(157 161 164 / 19%);
    z-index: 9999;
}

/* Arrow container */
.dropdown-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
}

/* The BORDER arrow (outer) */
.dropdown-arrow:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
}

/* The WHITE arrow (inner) */
.dropdown-arrow:after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
}

/* ▼ Arrow when menu opens DOWN */
.dropdown-arrow.down:before {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #8e8e8e; /* BORDER COLOR */
    top: -8px;
}

.dropdown-arrow.down:after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid white; /* BACKGROUND COLOR */
    top: -7px;
}

/* ▲ Arrow when menu opens UP */
.dropdown-arrow.up:before {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #8e8e8e; /* BORDER COLOR */
    bottom: -8px;
}

.dropdown-arrow.up:after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid white; /* BACKGROUND COLOR */
    bottom: -7px;
}

.dropdown-item {
    display: flex;
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
	box-sizing: border-box;
	color:grey;
	text-decoration:none;
	font-family: 'Poppins', sans-serif;
	font-weight:300;
	border-radius: 0;
	line-height:1;
	min-height:initial;
	text-transform: none;
	gap: 7px;
    align-items: center;
}
.dropdown-item:hover {
    background: #f3f3f3;
}
.dropdown-menu .dropdown-item:nth-child(2) {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.dropdown-menu .dropdown-item:last-child {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
.dropdown-menu .svg_icon {
    width: 15px;
    height: 15px;
}

.modal_background {
    background: #0000004d;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    backdrop-filter: blur(5px);
    display:none;
}
.modal_background.show {
    display:block;
}
.modal {
    position: fixed;
    width: 100%;
    padding: 50px;
    background: white;
    z-index: 99999;
    border-radius: 15px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px;
    display:none;
    box-shadow:0 2px 4px rgb(157 161 164 / 19%);
    box-sizing:border-box;
}
.modal.show {
    display:block;
}
.modal .close {
    background: none;
    padding: 0;
    text-indent: -500px;
    overflow: hidden;
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%231C274C' stroke-width='1.5'%3E%3C/circle%3E%3Cpath d='M14.5 9.50002L9.5 14.5M9.49998 9.5L14.5 14.5' stroke='%231C274C' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    position: absolute;
    top: 15px;
    right: 15px;
}
.modal h2, .modal h3, .modal h4 {
	margin:0;
	font-weight:400;
}






@keyframes shadowPulse {
	33% {
		background: #FFF;
		box-shadow: -18px 0 rgb(var(--primary)), 18px 0 #FFF;
	}
	66% {
		background: rgb(var(--primary));
		box-shadow: -18px 0 #FFF, 18px 0 #FFF;
	}
	100% {
		background: #FFF;
		box-shadow: -18px 0 #FFF, 18px 0 rgb(var(--primary));
	}
}

@media screen and (max-width:1200px) {

	header>container {
		overflow-x:scroll;
		padding:0;
	}
	body, html, button, li, select { font-size: 13px; }
	input, select, textarea {
		min-height:41px;
	}
	form cols {
		gap:20px;
	}

}


@media screen and (max-width:768px) {

	.logo a {
		font-size:12px;
	}
	nav li {
		font-size:11px;
		font-weight:400;
	}

	body, html, button, li { font-size: 13px; }

	button, button.small {
		padding: 6px 12px;
		font-size:11px;
	}

	main { display:block; width:calc(100% - 40px); }
	container { padding:0; }

	card { padding: 25px 25px; }
	cols { flex-direction: column; gap:0; }
	col-6 { width:100%; min-width: 100%; }
	form col-6 { margin-bottom:15px; }

	.dash-info { flex-wrap: wrap; gap:20px; flex-wrap: nowrap; overflow-x: scroll; }
	.dash-info>box { width: calc(50% - 10px); min-width: 150px; }
	.dash-info h4 { margin-bottom:6px; }

	header .logo {
		margin-left:20px;
	}

	footer {
		font-size:9px;
	}

	field {
		flex-wrap: wrap;
		column-gap: 20px;
    	row-gap: 0;
	}
	field>label:not(.switch):not(.option) {
		text-align:left;
		min-width:100%;
		margin-bottom:10px;
		font-weight:500;
	}
	field button {
		margin-top:10px;
		margin-left:auto;
		font-size:10px;
	}
	field.info {
		margin-left:0;
	}
	field.info .switch {
		margin-top:15px;
	}

	card h4>small {
		text-wrap-mode: nowrap;
	}

	.side-panel {
		padding: 20px;
		width: calc(100% - 60px);
		height: calc(100% - 52px);
	}
	.panel-top {
		flex-wrap: wrap;
		gap:7px;
	}

	.card_flex {
		flex-wrap:wrap;
	}

	.flex.mob-col {
		flex-direction: column;
	}

}


/*
@media (prefers-color-scheme: dark) {

	body {
		background:#313345;
	}
	card {
		background:#232332;
	}
	header {
		background:#232332;
	}
	body, html, button, li, input {
		color:white;
	}

}*/