@charset "UTF-8";

html,
body {
	padding: 0px;
	margin: 0px;
	font-family: “Roboto”, -apple-system, BlinkMacSystemFont, “Segoe UI”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif;
	font-size: 14px;
	overflow: hidden;
}

/* LOGIN */
.login_frame {
	overflow: hidden;
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #202655;
	display: flex;
}

.login_input_holder {
	text-align: center;
	width: 400px;
	height: 100px;
	margin: auto;
	overflow: hidden;
	padding: 20px;
	background-color: #fff;
	vertical-align: middle;
}

.login_message {
	color: tomato;
	padding: 10px;
}

/* DIALOG */
.dialog_background {
	height: 100% !important;
	width: 100% !important;
	background-color: #46424194 !important;
	display: grid !important;
	top: unset !important;
	left: unset !important;
}

.dialog_holder {
	width: 760px !important;
	height: auto;
	border: 1px solid #c7c7c7 !important;
	background-color: #fff !important;
	margin: 0 auto !important;
}

.dialog_holder h2 {
	margin: 0px;
	padding: 0px;
	margin-left: 40px;
	margin-top: 20px;
}

.dialog_holder .row_holder {
	width: 314px;
	float: left;
	padding: 10px;
	margin-left: 30px;
}

.dialog_holder .row_holder:nth-child(odd) {
	margin-left: 30px;
}

.dialog_holder .row_holder h3 {
	color: #0f1334;
}

.dialog_holder .row_holder .row {
	clear: both;
	line-height: 30px;
	margin-bottom: 15px;
}

.dialog_holder .row_holder .row span {
	color: #0f1334;
	display: block;
}

.dialog_holder .row_holder .row input {
	width: 300px;
	padding: 5px;
}

.dialog_holder .row_holder .row select {
	width: 314px;
	padding: 8px;
}

.dialog_holder .row_last_holder {
	clear: both;
	width: auto;
}

.dialog_holder .row_last_holder .message {
	float: left;
}

.dialog_holder .row_last_holder .buttons {
	float: right;
	margin-right: 40px;
}

.dialog_holder .row_last_holder .buttons button {
	padding: 10px;
}

/* MAIN */
.wrapper {
	height: 100%;
	width: 100%;
}

/* TOP FRAME */
.top-frame {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 50px;
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 1px 20px 4px rgb(219, 219, 219);
	z-index: 50;
}

.top-frame .logo {
	background-color: #0f1334;
	width: 280px;
	padding: 10px;
	padding-bottom: 11px;
	float: left;
}

.top-frame .logo img {
	width: inherit;
}

.top-frame .breadcrumb {
	float: left;
	padding: 15px;
}

.top-frame .top-menu {
	position: absolute;
	right: 0px;
	width: 300px;
	text-align: right;
	padding: 15px;
}

.top-frame .top-menu ul {}

.top-frame .top-menu ul li {}

/* LEFT FRAME */
.left-frame {
	position: absolute;
	left: 0px;
	top: 50px;
	width: 280px;
	height: 100%;
	background-color: #0f1334;
	padding: 10px;
	z-index: 99;
}

.left-frame div {
	margin-top: 45px;
}

.left-frame div:first-of-type {
	margin-top: 25px;
}

.left-frame div h3 {
	color: aliceblue;
}

.left-frame div ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	margin-left: 10px;
}

.left-frame div ul li {
	margin-bottom: 10px;
}

.left-frame div ul li a {
	color: aliceblue;
	padding: 5px;
	font-size: 16px;
	text-decoration: none;
}

.left-frame div ul li a:hover {
	cursor: pointer;
	color: #c076dd;
}

.left-frame div ul li a .svg-inline--fa {
	width: 20px;
	margin-right: 10px;
}

.main-frame {
	position: absolute;
	top: 50px;
	margin-left: 300px;
	position: absolute;
	width: calc(100% - 300px);
	height: auto;
}



/* INFRASTRUCTURE - RUNNERS */

.home-holder {
	padding: 20px;
}

.infrastructure-stats {}

.support-stats {}

.administration-stats {}








/* INFRASTRUCTURE - RUNNERS */

.infra-tab-holder {
	padding: 20px;
}

.infra-tab-holder ul {
	display: flex;
}

.infra-tab-holder ul li {
	display: contents;
}

.infra-tab-holder ul li a {
	width: -webkit-fill-available;
	padding: 20px !important;
	padding-left: 40px !important;
	padding-right: 40px !important;
	border-radius: 4px 4px 0px 0px;
	color: #393939;
	border-bottom: 2px solid #d7d7d7;
	text-align: center;
	font-size: 17px;
}

.infra-tab-holder ul li.ui-state-hover a {
	border-bottom: 2px solid #c076dd;
}

.infra-tab-holder ul li.ui-state-active a {
	border-bottom: 2px solid #009bd4;
}

/* Containers */
.container-header-buttons {
	text-align: right;
	margin-bottom: 20px;
	padding: 10px;
}

.container-header-buttons button {
	padding: 8px;
	padding-left: 10px;
	padding-right: 10px;
	color: #fff;
	background-color: #0f1334;
	border: none;
	font-weight: 600;
	border-radius: 3px;
	box-shadow: 1px 1px 6px 3px #cacacd;
}

.container-header-buttons button:hover {
	cursor: pointer;
	background-color: blue;
}

/* Servers */
.server-header-buttons {
	text-align: right;
	margin-bottom: 20px;
	padding: 10px;
}

.server-header-buttons button {
	padding: 8px;
	padding-left: 10px;
	padding-right: 10px;
	color: #fff;
	background-color: #0f1334;
	border: none;
	font-weight: 600;
	border-radius: 3px;
	box-shadow: 1px 1px 6px 3px #cacacd;
}

.server-header-buttons button:hover {
	cursor: pointer;
	background-color: blue;
}


/* validate_form */
.validate-success {
	background-color: #66bb6a38;
}

.validate-error {
	background-color: #e278323d;
}


.create_server_step_1 {}

.create_server_step_2 {
	height: 300px;
	display: none;
	overflow: hidden;
}


#create_server_response_code {
	top: 50%;
	position: relative;
	margin: 0 auto;
	vertical-align: middle;
	font-size: 30px;
}






.switch_container {
	height: 29px;
	padding-top: 3px;
}

/*switch*/
.switch {
	display: inline-block;
	height: 26px;
	position: relative;
	width: 56px;
	float: right;
}

.switch input {
	display: none;
}

.slider {
	background-color: #ccc;
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
}

.slider:before {
	background-color: #fff;
	bottom: 4px;
	content: "";
	height: 18px;
	left: 5px;
	position: absolute;
	transition: .4s;
	width: 19px;
}

input:checked+.slider {
	background-color: #66bb6a;
}

input:checked+.slider:before {
	transform: translateX(26px);
}

.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}





div.tooltip {
	position: relative;
}

div.tooltip textarea {
	display: none;
}

div.tooltip.active {
	background-color: #009bd4;
	color: #fff;
}
div.tooltip.active textarea {
	display: block;
	position: absolute;
	right: 162px;
	height: 300px;
	/* bottom: 1em; */
	padding: 0.5em;
	color: #000000;
	background: #ebf4fb;
	border: 0.1em solid #b7ddf2;
	border-radius: 0.5em;
	width: 878px;
}