body {
	--green: rgb(5, 140, 66);
	--black: rgb(2, 2, 2);
	--red: rgb(199, 62, 29);
	--background: rgb(238, 241, 255);
	--background2: rgb(200, 210, 240);
	--background3: rgb(255, 255, 255);
	--shadow: rgba(0,0,0,0.15);
}

body.darkMode {
	--green: rgb(46, 160, 67);
	--black: rgb(10, 10, 10);
	--red: rgb(199, 62, 29);
	--background: rgb(32, 34, 37);
	--background2: rgb(18, 20, 23);
	--shadow: rgba(0, 0, 0, 0.35);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Arial, "Segoe UI", Roboto, sans-serif;
}

body {
	height: 100vh;
	background: var(--background);
	color: var(--black);
}

.content {
	opacity: 0;
	width: 100%;
	height: 100%;
	transition: opacity .5s linear;
}

.content.active {
	opacity: 1;
}

.spinner {
	opacity: 0;
	color: #ffffff;
	font-size: 64px;
	text-indent: -9999em;
	overflow: hidden;
	width: 1em;
	height: 1em;
	transition: opacity .75s linear;
	border-radius: 50%;
	position: absolute;
	top: calc(50% - .5em);
	left: calc(50% - .5em);
	transform: translateZ(0);
	animation: mltShdSpin 1.5s cubic-bezier(1,.1,.6,.9) infinite, round 1.5s infinite cubic-bezier(.7, .3, .3, .7);
	z-index: 0;
}

.spinner.active {
	opacity: 1;
}

@keyframes mltShdSpin {
	0% {
		box-shadow:
		0 -0.83em 0 -0.4em,
		0 -0.83em 0 -0.42em,
		0 -0.83em 0 -0.44em,
		0 -0.83em 0 -0.46em,
		0 -0.83em 0 -0.477em;
		color: var(--green);
	}

	5%, 95% {
		box-shadow:
		0 -0.83em 0 -0.4em,
		0 -0.83em 0 -0.42em,
		0 -0.83em 0 -0.44em,
		0 -0.83em 0 -0.46em,
		0 -0.83em 0 -0.477em;
	}

	10%, 59% {
		box-shadow:
		0 -0.83em 0 -0.4em,
		-0.087em -0.825em 0 -0.42em,
		-0.173em -0.812em 0 -0.44em,
		-0.256em -0.789em 0 -0.46em,
		-0.297em -0.775em 0 -0.477em;
	}

	20% {
		box-shadow:
		0 -0.83em 0 -0.4em,
		-0.338em -0.758em 0 -0.42em,
		-0.555em -0.617em 0 -0.44em,
		-0.671em -0.488em 0 -0.46em,
		-0.749em -0.34em 0 -0.477em;
	}

	38% {
		box-shadow:
		0 -0.83em 0 -0.4em,
		-0.377em -0.74em 0 -0.42em,
		-0.645em -0.522em 0 -0.44em,
		-0.775em -0.297em 0 -0.46em,
		-0.82em -0.09em 0 -0.477em;
	}

	50% {
		box-shadow:
		0 -0.83em 0 -0.4em,
		0 -0.83em 0 -0.42em,
		0 -0.83em 0 -0.44em,
		0 -0.83em 0 -0.46em,
		0 -0.83em 0 -0.477em;
		color: var(--background2);
	}

	100% {
		box-shadow:
		0 -0.83em 0 -0.4em,
		0 -0.83em 0 -0.42em,
		0 -0.83em 0 -0.44em,
		0 -0.83em 0 -0.46em,
		0 -0.83em 0 -0.477em;
		color: var(--green);
	}
}

@keyframes round {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loginWrapper {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loginContainer {
	width: 100%;
	max-width: 380px;
	padding: min(2vw, 24px);
	background: var(--background3);
	border-radius: 12px;
	box-shadow: 0 15px 35px var(--shadow);
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
}

.customInput {
	padding: 14px 15px;
	border-radius: 8px;
	border: 2px solid transparent;
	font-size: 15px;
	background: var(--background);
	transition: border-color .25s linear, box-shadow .25s linear, background .25s linear;
	outline: none;
	height: 3.5em;
	min-height: 3.5em;
}

.customInput:focus {
	border-color: var(--green);
	background: var(--background3);
	box-shadow: 0 0 0 2px rgba(5,140,66,0.25);
}

.btn {
	padding: 12px 18px;
	border-radius: 8px;
	border: none;
	background-color: var(--green);
	color: rgb(255, 255, 255);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.35s linear;
	box-shadow: 0 0 0 0 var(--green);
}

.btn:hover {
	box-shadow: 0px 0px 18px 8px var(--background2);
}


.btn:active {
	background-color: var(--black);
	transition: all 0.05s linear;
}


.dashboard {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 16px 16px 128px 16px;
	flex-direction: column;
	gap: 32px;
	overflow-y: auto;
}

.controlsContainer {
    max-width: 512px;
    width: 100%;
    padding: max(1vw, 16px);
    background: var(--background3);
    border-radius: 12px;
    box-shadow: 0 15px 35px var(--shadow);
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

.statusContainer {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
	gap: 16px;
}

.deleteBtn {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: var(--background2);
    padding: 3px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .25s linear;
}

.deleteBtn:hover {
	background-color: var(--red);
}

.serviceContainer {
    background-color: var(--background3);
    min-height: 44px;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 15px 35px var(--shadow);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
}

.serviceName {
    font-size: 1.3em;
    font-weight: 700;
    background-color: var(--background2);
    color: var(--background3);
    padding: 4px;
    width: fit-content;
    border-radius: 8px;
    max-width: 84%;
    word-break: break-word;
}

.serviceName.serviceDown {
	background-color: var(--red);
}

.serviceName.serviceWeak {
    background-color: var(--gold);
}

.serviceName.serviceUp {
    background-color: var(--green);
}

.servicePingContainer {
  display: flex;
}