html, body
{
	margin: 0;
	height: 100%;

	background: #152638;
    color: white;

	font-family: "Roboto", sans-serif;
}

/*
* FONT CLASSES
*/

/* WEIGHT */
.w100, .thin	{font-weight:100}
.w300, .light	{font-weight:300}
.w400	{font-weight:400}
.w700	{font-weight:700}

/* FAMILY */
.roboto	{font-family: "Roboto", sans-serif}
.material {font-family: "Material Icons"; font-feature-settings: "liga" 1;}

/* COLOR */
.cf		{color: white}
.cf1	{color: #f1f1f1}
.ce		{color: #eee}
.cd		{color: #ddd}
.cc		{color: #ccc}
.cb		{color: #bbb}
.ca		{color: #aaa}
.c9		{color: #999}
.c8		{color: #888}
.c7		{color: #777}
.c6		{color: #666}
.c5		{color: #555}
.c4		{color: #444}
.c3		{color: #333}
.c2		{color: #222}
.c1		{color: #111}
.c05	{color: #050505}
.c0		{color: black}

.c-white{color: white}
.c-light{color: #f2f2f2}
.c-black{color: black}
.c-dark {color: #222}
.c-green{color: #00853d}
.c-lime {color: #bfd526}
.c-teal {color: #007f7b}
.c-cyan {color: #5ec6c7}
.c-orange {color: #ff4d00}
.c-red  {color: #a33}

.smallcaps	{font-size: 80%;text-transform: uppercase}

/*
* ALERTS
*/

.alert.info	{background:#3279ff}
.alert.error{background:#e23838}
.alert.warning{background:#f5ab33}
.alert.success{background:#00d267}

.main-alert
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 10px 0;
	text-align: center;

	background: #a20;
	color: white;

	min-height: 50px;
	box-sizing: border-box;
	overflow: hidden;
	transition-duration: 0.25s;

	z-index: 100000;

	display: table;
	vertical-align: middle;
}

.main-alert div
{
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;

	overflow: hidden;
}

.main-alert.inactive,
.main-alert.inactive div
{
	top: -100px;
}

/*
* COLUMNS
*/

.cols
{
    font-size:0;
}

.cols .col:first-child
{
    padding-left: 0;
}

.cols .col:last-child
{
    padding-right: 0;
}

.cols > *
{
    font-size: 16px;
}

.col
{
	display: inline-block;
	vertical-align: top;
    padding: 8px 8px 0;
    box-sizing: border-box;
}

.col.col-1	{width: 100%}
.col.col-2	{width: 50%;}
.col.col-3	{width: calc(100% / 3)}
.col.col-4	{width: 25%}


/*
* ANIMATIONS
*/

@keyframes spin
{
	0%
	{
		transform: rotate(0deg);
	}

	50%
	{
		transform: rotate(180deg);
	}

	100%
	{
		transform: rotate(360deg);
	}
}

@keyframes flipped
{
	0%
	{
		transform: scaleX(1);
	}

	100%
	{
		transform: scaleX(0);
	}
}

@keyframes unflipped
{
	0%
	{
		transform: scaleX(0);
	}

	100%
	{
		transform: scaleX(1);
	}
}

/*
* BUTTONS
*/

.btn
{
	font-size: 16px;
	font-weight: 300;
	color: black;

	padding: 5px 7px;
	border-radius: 3px;
	border: 1px solid #111;
	background: #f3f3f3;
	margin-right: 4px;

	cursor: pointer;

    display: inline-block;
	text-decoration: none;
}

.btn:hover
{
	opacity: 0.5;
}

.btn-small
{
	font-size: 11px;
	padding: 2px 4px;
}

.btn-danger
{
	color: white;
	background: #dc0000;
}

.btn-info
{
	color: white;
	background: #0087e6;
}

.btn-success
{
	color: white;
	background: #00ca74;
}

.btn-warning
{
	color: white;
	background: #fca002;
}

.btn-disabled
{
    color: #777;
    background: #aaa;
    cursor: default;
}

.btn-disabled:hover
{
    opacity: 1;
}

.btn-round
{
	border-radius: 16px;
}

.btn vr
{
	width: 1px;
	height: 19px;
	background: rgba(255, 255, 255, 0.25);

	margin: 0 5px;
	display: inline-block;
	vertical-align: middle;
}

.btn .material
{
	font-size: 19px;
	display: inline-block;
	vertical-align: middle;
}

/*
* ICON FRAME
*/

.iconframe
{
	display: inline-block;
	position: relative;
}

.iconframe.medium
{
	width: 400px;
	height: 400px;
}

.iconframe .iconframe-frame
{
	position: absolute;
	background-image: url(/img/iconframe/iconframe.png);
	background-size: contain;
	background-position: center center;

	z-index: 0;
}

.iconframe.medium .iconframe-frame
{
	top: 62.5px;
	left: 62.5px;

	width: 275px;
	height: 275px;
}

.iconframe .iconframe-spinner
{
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background-image: url(/img/iconframe/iconframespinner.png);
	background-size: contain;
	background-position: center center;

	animation: spin 3s infinite linear;

	z-index: 1;
}

.iconframe .logo
{
	position: absolute;
	background-image: url(/img/logo/sblogo512.png);
	background-position: center center;
	background-size: contain;
}

.iconframe.medium .logo
{
	top: 90px;
	left: 90px;

	width: 220px;
	height: 220px;

	background-image: url(/img/logo/sblogo256.png);

	z-index: 2;
}

a.tsg-iw:hover
{
	cursor: pointer;
}

.tsg-iw h1
{
	font-size: 20px;
	font-weight: 300;
	color: #195aff;
	margin: 0;
}

.tsg-iw h2
{
	font-size: 18px;
	font-weight: 400;
	color: #326bba;
	margin: 0;
}

.tsg-iw h3
{
	font-size: 16px;
	font-weight: 300;
	color: #2d5590;
	margin: 0;
}

.tsg-iw:hover h1,
.tsg-iw:hover h2,
.tsg-iw:hover h3
{
	opacity: 0.5;
}

/*
* PANE GROUP
*/

.pane-group
{
	display: table;
	width: 100%;
	min-height: 100%;
}

.pane
{
	display: table-cell;
	box-sizing: border-box;
	padding: 20px;

	color: white;

	vertical-align: top;
}

.pane-group .pane:not(:last-child)
{
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.pane-30 {width: 30%;}
.pane-70 {width: 70%;}

.pane-light
{
	background: #294a5f;
}

.pane-nopad
{
	padding: 0;
}

/*
* FORMS
*/

.form.readonly
{
	display: inline-block;
	width: 360px;
	max-width: 100%;

	text-align: left;

	background: rgba(20, 30, 50, 0.4);
	box-sizing: border-box;
	padding: 15px;
	border-radius: 5px;
}

.form label
{
	display: block;
}

.form.readonly label
{
	background: rgba(0, 0, 0, 0.2);
	padding: 5px;
	font-size: 120%;
}

.form label:not(:first-child)
{
	margin-top: 15px;
}

.form p.form-item
{
	display: block;
	margin: 10px 0 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/*
* TOOLBARS
*/

.toolbar
{
	background: #0a1424;
    width: 100%;
    box-sizing: border-box;
}

.toolbar-top
{
	padding: 0px 15px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	height: 50px;
}

.toolbar-top h1
{
	font-size: 20px;
	font-weight: 300;
	margin: 0 40px 0 0;
	padding: 8px 0;
}

.toolbar-top > *,
.toolbar-bottom > *
{
	display: inline-block;
	vertical-align: top;
	margin-right: 15px;
}

.toolbar-top > *.actions,
.toolbar-bottom > *.actions
{
    float: right;
}

.toolbar-top .toolbar-btn
{
	height: 50px;
	box-sizing: border-box;
	padding: 10px;
	position: relative;
	transition-duration: 0.3s;
	cursor: pointer;
}

.toolbar-top .toolbar-btn:hover
{
	background-color: #777;
}

.toolbar-top .toolbar-btn i
{
	font-size: 24px;
}

.toolbar-top .toolbar-btn p
{
	position: absolute;
	top: 100%;
	left: 0;
	padding: 0;
	margin: 0;

	height: 0;
	overflow: hidden;
	transition-duration: 0.3s;
	white-space: nowrap;
	box-sizing: border-box;

	background-color: #777;
}

.toolbar-top .toolbar-btn:hover p
{
	padding: 10px;
	height: 40px;
}

.body-container
{
    position: relative;
    width: 100%;
    height: 100%;
}

.toolbar-bottom
{
    padding: 4px 15px;
    background: #ccc;
    height: 40px;
}

.toolbar-bottom h2
{
	font-size: 16px;
	font-weight: 300;
	margin: 0 40px 0 0;
	padding: 8px 0;
    color: black;
}

.toolbar.fixed
{
    position: absolute;
    left: 0;
}

.toolbar-top.fixed
{
    top: 0;
}

.toolbar-bottom.fixed
{
    bottom: 0;
}

.body.body-bar-top, .body.body-bar-bottom
{
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    overflow: auto;

    padding: 50px;
    box-sizing: border-box;
}

.body.body-bar-top
{
    top: 50px;
}

.body.body-bar-bottom
{
    bottom: 40px;
}

.cell-group
{
    padding: 10px;
    border-radius: 10px;
    background: #efefef;
    border: 1px solid #ddd;
    color: #222;

    margin-bottom: 40px;
}

.cell-group .upper
{
    position: relative;
    height: 30px;
}

.cell-group .upper p.loading
{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;

    font-size: 30px;
}

.cell-group .upper h1
{
    position: absolute;
    top: 0;
    left: 45px;
    margin: 0;
    padding: 0;

    width: calc(40% - 45px);
    text-overflow: ellipsis;
    overflow: hidden;

    vertical-align: top;
    font-size: 24px;
}

.cell-group .upper .result
{
    position: absolute;
    top: 3px;
    right: 50px;

    margin: 0;
    padding: 0;
}

.cell-group .upper .collapse
{
    position: absolute;
    top: 0;
    right: 0;

    margin: 0;
    padding: 0;

    font-size: 24px;
}

.cell-group .progress-bar
{
    position: absolute;
    top: 10px;
    left: 30%;
    width: 45%;
    height: 10px;

    background: #777;
}

.cell-group .progress-bar .progress-bar-inner
{
    width: 0;
    height: 100%;
    background: #5ec6c7;
}

.cell-group .upper p.loading i
{
    display: inline-block;
    vertical-align: top;

    width: 10px;
    height: 10px;
    border-radius: 100%;

    background: #222;

    margin-top: 10px;

    animation: loading-blink 2s linear infinite;
    opacity: 0.3;
}

.cell-group .upper p.loading i:nth-child(1) {animation-delay: 0.0s}
.cell-group .upper p.loading i:nth-child(2) {animation-delay: 0.2s}
.cell-group .upper p.loading i:nth-child(3) {animation-delay: 0.4s}

.cell-group .upper p.loading i:not(:last-child)
{
    margin-right: 3px;
}

.cell-group .upper p.loading.waiting i
{
    width: 4px;
    height: 16px;
    border-radius: 0;
    position: relative;
    top: -3px;
    margin-left: 3px;
    margin-right: 6px;
    animation: loading-blink 1s linear infinite;
    animation-delay: 0;
}

.cell-group .cell-contents
{
    background: #cfcfcf;
    max-height: 350px;
    overflow: auto;
}

.cell-group .cell-contents .cell-container
{
    padding: 10px;
}

.cell-group .cell-contents table
{
    width: 100%;
    border-collapse: collapse;
}

.cell-group .cell-contents table tr td,
.cell-group .cell-contents table tr th
{
    max-width: 700px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cell-group .cell-contents tr:nth-child(2n)
{
    background: rgba(0, 0, 0, 0.1);
}

.cell-group .cell-contents tr th
{
    background: #5ec6c7;
}

@keyframes loading-blink
{
    0%, 40%, 100%{
        opacity: 0.3;
    }

    50%, 70%{
        opacity: 1;
    }
}

/*
* TIMEOUT
*/

.timeout-bubble
{
	position: fixed;
	top: 50%;
	left: 50%;

	margin-top: -100px;
	margin-left: -200px;
	width: 400px;

	z-index: 10000;
	background: #21446c;
	border-radius: 5px;

	box-sizing: border-box;
	padding: 15px;
}

.timeout h1
{
	margin: 0 0 10px;
}

.timeout p
{
	font-size: 14px;
	margin: 0 0 4px;
}

.timeout #timeout-countdown
{
	background: rgba(0, 0, 0, 0.25);
	padding: 5px;
	text-align: center;

	font-size: 30px;
	font-weight: bold;
}

.timeout .timeout-actions
{
	margin-top: 5px;
	text-align: right;
}

.timeout
{
	content:"";
	top: 0;
	left: 0;
	position: fixed;
	background: rgba(21, 35, 52, 0.75);
	z-index: 9999;
	width: 100%;
	height: 100%;
}

.split-input
{
	font-size:0;
}

.split-input *
{
	display: inline-block;
	vertical-align: top;
}

.split-input input,
.modal-form .split-input input
{
	width: calc(100% - 29px);
	box-sizing: border-box;
	padding: 5px 5px;
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-right: 0;
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	background: rgba(0, 0, 0, 0.15);

	font-family: Arial, sans-serif;
	font-size: 16px;
	color: white;
}

.split-input button,
.modal-form .split-input button
{
	padding: 5px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;

	border-top: 1px solid rgba(255, 255, 255, 0.4);
	border-right: 1px solid rgba(255, 255, 255, 0.4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);

	background: #0d6dfd;
	color: white;
	font-family: "Material Icons";
	font-size: 18px;

	border-left: 0;

	outline: none;
	cursor: pointer;
}