@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined&display=swap');

:root
{
	--tsgreen:		#00853d;
	--tsgreen50: 	rgba(0, 128, 62, 0.5);
	--tsgreen25: 	rgba(0, 128, 62, 0.25);
	--tsgreen10: 	rgba(0, 128, 62, 0.1);
	--tsteal:		#007f7b;
	--tsteal50:		rgba(0, 127, 123, 0.5);
	--tsteal25:		rgba(0, 127, 123, 0.25);
	--tsteal10:		rgba(0, 127, 123, 0.10);
	--tscyan:		#5ec6c7;
	--tscyan50:		rgba(84, 198, 199, 0.5);
	--tscyan25:		rgba(84, 198, 199, 0.25);
	--tscyan10:		rgba(84, 198, 199, 0.10);
	--tscyanb:		#00c6c7;
	--tscyanb50:	rgba(0, 198, 199, 0.5);
	--tscyanb25:	rgba(0, 198, 199, 0.25);
	--tscyanb10:	rgba(0, 198, 199, 0.1);
	--tslime:		#bfd526;
	--tslime50:		rgba(191, 213, 38, 0.5);
	--tslime25:		rgba(191, 213, 38, 0.25);
	--tslime10:		rgba(191, 213, 38, 0.1);
	--tsorange: 	#ff4d00;
	--tsred25:		rgba(180, 50, 50, 0.25);
	--tsred50:		rgba(180, 50, 50, 0.5);
	--tspblue: 		#152638;
	--tsmain:		var(--tsgreen);

	--infomain: #55aaff;
	--infobord: #77a2bf;
	--warnmain:	#ffbd39;
	--warnbord:	#e2ad42;
	--succmain: #28a745;
	--succbord: #28a745;
	--dangmain: #dc3545;
	--dangbord: #dc3545;

	--bg:		#ececec;
	--bgr:		rgba(242, 242, 242, 0.8);
	--bgri:		rgba(20, 20, 20, 0.8);
	--bg10:		rgba(20, 20, 20, 0.1);
	--ilbg:		#f4f4f4;
	--lbg:		#fcfcfc;
	--llbg:		#ffffff;
	--dbg:		#d2d2d2;
	--ddbg:		#b2b2b2;
	--border:	#dfdfdf;
	--lborder: 	#e2e2e2;
	--dborder:	#bfbfbf;
	--border-clink: #28d;
	--border-inv:	#424242;
	--hci:		#ffffff;
	--hcd:		#d2d2d2;

	--t-primary: 	#222;
	--t-secondary: 	#444;
	--t-tertiary: 	#555;
	--t-strong: 	#111;
	--t-ustrong: 	#000;
	--t-cdark:		#152638;
	--t-medium:		#777;
	--t-inv:		#fff;

	--t-clink:		#3af;
	--t-red:		#E00;
	--t-orange:		#F80;

	--sqs-bg:		#777;

	--badge-green:	#00be43;
	--badge-yellow: #d19d00;

	--inv-bg:		#333;

	--diag-tile:	url("/img/fx/diag_tile_black.png");
}

[data-theme="dark"]
{
	--tsmain:	var(--tslime);

	--bg:		#333333;
	--bgr:		rgba(51, 51, 51, 0.8);
	--bgri:		rgba(240, 240, 240, 0.8);
	--bg10:		rgba(240, 240, 240, 0.1);
	--ilbg:		#393939;
	--lbg:		#474747;
	--llbg:		#545454;
	--dbg:		#1f1f1f;
	--ddbg:		#050505;
	--border:	#424242;
	--lborder: 	#575757;
	--dborder: 	#353535;
	--border-inv:	#dfdfdf;
	--hci:		#afafaf;
	--hcd:		#888888;

	--t-primary: 	#f9f9f9;
	--t-secondary: 	#efefef;
	--t-tertiary: 	#d7d7d7;
	--t-strong: 	#fff;
	--t-ustrong: 	#99ddff;
	--t-cdark:		#ccddff;
	--t-medium:		#999;
	--t-inv:		#222;

	--t-red: 		#F23;

	--sqs-bg:		#888;

	--badge-green:	#30e971;
	--badge-yellow: #f9cc42;

	--inv-bg:		#fcfcfc;

	--diag-tile:	url("/img/fx/diag_tile.png");
}

::-webkit-scrollbar{
    height: 4px;
    width: 4px;
    background: var(--dbg);
}
::-webkit-scrollbar-thumb{
    background: var(--tsgreen);
    border-radius: 10px;
}

*
{
	scrollbar-color: var(--tsgreen) var(--dbg);
	scrollbar-width: thin;
}

html, body
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: var(--t-secondary);

    background: var(--bg);
    font-family: "Roboto", sans-serif;
    overflow: hidden;
}

.material {font-family: "Material Icons";}

/**
* ALERTS
**/

.mals
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	pointer-events: none;
	z-index: 1001;
}

.mals .modal-alert
{
	width: 500px;
	border-radius: 5px;
	padding: 5px 40px;
	box-sizing: border-box;
	max-width: calc(100% - 20px);
	text-align: left;
	line-height: 125%;
	margin: 15px auto 0;
	pointer-events: all;
	border-width: 1px;
	border-style: solid;

	position: relative;

	animation: slideindown 0.4s ease;
}

.mals .modal-alert a.close
{
	position: absolute;
	top: 50%;
	right: 7px;
	margin-top: -9px;
	font-size: 26px;
}

.mals .modal-alert svg
{
	position: absolute;
	top: 50%;
	right: 5px;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	transform: rotate(-90deg);
	pointer-events: none;
}

.mals .modal-alert svg circle
{
	stroke-dasharray: 360;
	stroke-dashoffset: 360;
	stroke:  rgba(0, 0, 0, 0.75);
	animation-fill-mode: forwards;
	animation-name: circleFill;
	animation-duration: 8s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}

@keyframes circleFill
{
	0%
	{
		stroke-dashoffset: 360;
	}
	100%
	{
		stroke-dashoffset: 270;
	}
}

.alert          { background: var(--bg); color: var(--t-primary); border-color: var(--border); }
.alert.info     { background: #9acbfb; color: #13416e; border-color: #006ab0; }
.alert.warning  { background: #ffd579; color: #805f1f; border-color: #b58a2c; }
.alert.error    { background: #ff8066; color: #531306; border-color: #bb4128; }
.alert.success  { background: #80eeb9; color: #0c6a3d; border-color: #2eaa6e; }

.main-alert
{
    padding: 10px 45px 10px 10px;
    font-size: 16px;

    position: fixed;
    top: 0;
    left: 0;
	z-index: 1000;

    width: 100%;
    box-sizing: border-box;

    text-align: center;
}

.main-alert a.close
{
    position: fixed;
    top: 5px;
    right: 5px;
}

.alert a.close
{
    font-size: 30px;
    color: inherit;
    cursor: pointer;
}

.alert a.close:hover   {opacity: 0.5;}

.error-gate
{
    display: inline-block;
    width: 450px;
    max-width: 80%;
    margin: auto;

    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid var(--border);
    text-align: left;
}

.error-gate.error
{
    background: #fbcbbf;
    border-color: #531306;
    color: #764136;
}

.error-gate.error a[data-href]:not([href])
{
    color: #d70000;
    font-weight: 500;
}

/**
* BUTTONS
**/

.btn
{
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;

    border: 1px solid #e0e0e0;
    background: #fcfcfc;
    color: #333;
    border-radius: 5px;
    padding: 7px 12px;
    cursor: pointer;
}

.btn.btn-small
{
	font-size: 14px;
	padding: 3px 6px;
}

.btn:hover
{
    opacity: 0.75;
}

.btn:not(:first-of-type)
{
    margin-left: 10px;
}

.btn-primary,
.btn-info,
.btn.info   { background: var(--infomain); color: #ffffff; border-color: var(--infobord); }

.btn-danger { background: var(--dangmain); color: #ffffff; border-color: var(--dangbord); }
.btn-success{ background: var(--succmain); color: #ffffff; border-color: var(--succbord); }
.btn-warning{ background: var(--warnmain); color: #ffffff; border-color: var(--warnbord); }

.btn-disabled,
.btn-disabled:hover
{
	cursor: not-allowed;
	background: var(--bg);
	color: var(--dbg);
	border-color: var(--border);
	opacity: 1;
}

.btn.icon
{
	font-family: "Material Icons";
	padding: 6px;
	vertical-align: top;
}

/**
* COLUMNS
**/

.cols
{
	font-size: 0;
}

.cols .col
{
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
}

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

.col-23	{width: calc(200% / 3)}
.col-56	{width: calc(500% / 6)}
.col-34	{width: 75%}

.col-10	{width: 10%}
.col-30	{width: 30%}
.col-35 {width: 35%}
.col-40	{width: 40%}
.col-60	{width: 60%}
.col-70	{width: 70%}
.col-80	{width: 80%}
.col-90	{width: 90%}

.col-w-200	{width: 200px}
.col-w-250	{width: 250px}

/**
* BADGES
**/

i.badge
{
	width: 10px;
	height: 10px;
	border-radius: 100%;
	display: inline-block;
	vertical-align: middle;
	margin-top: -2px;
	margin-right: 8px;

	background: var(--t-primary);
}

i.badge.green
{
	background: var(--badge-green);
}

i.badge.yellow
{
	background: var(--badge-yellow);
}

/**
* FLAGS
**/

.flag
{
	display: inline-block;
	vertical-align: middle;

	font-size: 11px;
	border-radius: 100px;
	border: 1px solid black;
	padding: 2px 10px;
	margin: 0 5px;
	color: white;
	background: black;
	float: right;
}

.flag.nofloat
{
	float: none;
}

.flag.danger	{background: var(--dangmain); border-color: var(--dangbord)}
.flag.warning 	{background: var(--warnmain); border-color: var(--warnbord); color: black}
.flag.success	{background: var(--succmain); border-color: var(--succbord)}
.flag.info		{background: var(--infomain); border-color: var(--infobord)}
.flag.subtle	{background: var(--t-medium); border-color: var(--t-medium)}

.infobox
{
	background: var(--dbg);
	margin: 15px;
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 15px;
	font-size: 16px;
	text-align: center;
	color: var(--t-medium);
}

/**
* HORIZONTAL RULES
**/

hr
{
	margin: 10px 0;
	width: 100%;
	height: 1px;
	border: 0;
	background: var(--border);
}

/**
* TEXT
**/

.text-left	{text-align: left}
.text-center{text-align: center;}
.text-right	{text-align: right}
.text-just	{text-align: justify;}

a[data-href]:not([href])
{
	color: var(--t-clink);
	cursor: pointer;
	transition-duration: 0.15s;
}

a[data-href]:not([href]):hover
{
	text-decoration: underline;
	color: var(--border-clink);
	opacity: 0.85;
}

.screen
{
    background: rgba(242, 242, 242, 0.75);
    width: 100%;
    min-height: 100%;

    position: absolute;
    top: 0;
    left: 0;
}

.pwindow
{
	width: 100%;
	height: 100%;
	box-sizing: border-box;

	position: absolute;
	top: 0;
	left: 0;

	overflow: auto;
}

.pwindow .ptable
{
	display: table;
	width: 100%;
	height: 100%;
	table-layout: fixed;
}

.pwindow .pcell
{
	display: table-cell;
	width: 100%;
	height: 100%;

	vertical-align: middle;
}

.full-page-spinner
{
    position: fixed;
    width: 90px;
    height: 90px;

    top: 50%;
    left: 50%;

    margin-left: -45px;
    margin-top: -45px;
	z-index: 103;
}

.sqs
{
  position: relative;
  width: 90px;
  height: 90px;

  box-sizing: border-box;
  display: inline-block;
  animation: sqs-load 3.0s infinite ease;
  z-index: 102;
}

.sqs-cover
{
    position: fixed;
    z-index: 101;
    background-color: var(--bgr);
    width: 100%;
    height: 100%;
}

.sqs div
{
  width: 30px;
  height: 30px;
  position: absolute;

  background: var(--sqs-bg);
  transform: scale(0);
}

.sqs div:nth-child(1)
{
  background: #5af;
  top: 10px;
  left: 10px;
  animation: sqs-s1 3.0s infinite ease;
  z-index: 1;
}

.sqs div:nth-child(2)
{
  top: 10px;
  left: 45px;
  animation: sqs-s2 3.0s infinite ease;
}

.sqs div:nth-child(3)
{
  top: 45px;
  left: 10px;
  animation: sqs-s4 3.0s infinite ease;
}

.sqs div:nth-child(4)
{
  top: 45px;
  left: 45px;
  animation: sqs-s3 3.0s infinite ease;
}

@keyframes sqs-load
{
  0%{ transform: rotate(0deg); }
  10%{ transform: rotate(0deg); }
  20%{ transform: rotate(50deg); }
  21%{ transform: rotate(45deg); }
  81%{ transform: rotate(45deg); }
  100%{ transform: rotate(0deg); }
}

@keyframes sqs-s1
{
  0%{
    transform: scale(0);
  }

  10%{
    transform: scale(1);
  }

  21%{
    top: 10px;
    left: 10px;
  }

  30%, 36%{
    top: 10px;
    left: 45px;
  }

  45%, 51%{
    top: 45px;
    left: 45px;
  }

  60%, 66%{
    top: 45px;
    left: 10px;
    transform: scale(1);
  }

  75%, 81%{
    top: 27.5px;
    left: 27.5px;
    transform: scale(0);
  }

  100%{
    top: 10px;
    left: 10px;
  }

}

@keyframes sqs-s2
{
  0%{
    transform: scale(0);
  }

  10%, 36%{
    transform: scale(1);
  }

  36%{
    top: 10px;
    left: 45px;
  }

  45%, 51%{
    top: 45px;
    left: 45px;
  }

  60%, 66%{
    top: 45px;
    left: 10px;
    transform: scale(1);
  }

  75%, 81%{
    top: 27.5px;
    left: 27.5px;
    transform: scale(0);
  }

  100%{
    top: 10px;
    left: 10px;
  }

}

@keyframes sqs-s3
{
  0%{
    transform: scale(0);
  }

  10%, 51%{
    transform: scale(1);
  }

  51%{
    top: 45px;
    left: 45px;
  }

  60%, 66%{
    top: 45px;
    left: 10px;
    transform: scale(1);
  }

  75%, 81%{
    top: 27.5px;
    left: 27.5px;
    transform: scale(0);
  }

  100%{
    top: 10px;
    left: 10px;
  }

}

@keyframes sqs-s4
{
  0%{
    transform: scale(0);
  }

  10%, 66%{
    transform: scale(1);
  }

  66%{
    top: 45px;
    left: 10px;
    transform: scale(1);
  }

  75%, 81%{
    top: 27.5px;
    left: 27.5px;
    transform: scale(0);
  }

  100%{
    top: 10px;
    left: 10px;
  }

}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #152638;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #152638 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.toggler
{
	cursor: pointer;
	transition-duration: 0.2s;
}

.toggler:hover
{
	opacity: 0.5;
}

.toggler.active [content-on]::before
{
	content:attr(content-on);
}

.toggler:not(.active) [content-off]::before
{
	content:attr(content-off);
}

.gmap-hidden
{
	position: absolute;
	top: -900px;
	left: -900px;
	width: 100px;
	height: 100px;
	z-index: 99;
}

.gmap-visible
{
	width: 100%;
	height: 100%;
	position: relative;
}

.swapper .swappable:not(.active)
{
	display: none;
}

.infowindow h1,
.infowindow h2,
.infowindow h3
{
	margin: 0;
	color: var(--t-clink);
	font-size: 22px;
	cursor: pointer;
	transition-duration: 0.25s;
}

.infowindow h2
{
	font-size: 17px;
	color: #222;
	font-weight: 400;
}

.infowindow h3
{
	font-size: 14px;
	color: #555;
}

.infowindow:hover *
{
	opacity: 0.5;
}

.subversion
{
	position: absolute;
	bottom: 5px;
	left: 0;
	text-align: center;
	width: 100%;
	font-size: 11px;
}

.subversion span
{
	color: var(--tsteal);
}

.subversion i
{
	font-size: 80%;
	font-style: normal;
}

info
{
	font-family: "Material Icons";
	font-size: 150%;
	color: inherit;
	display: inline-block;
	vertical-align: middle;
}

info::after
{
	font-family: "Material Icons";
	content: "info";
}

/*
* Modal Windows
*/

.modal-window
{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;

	background: var(--bgr);
	cursor: url(/img/cursor/cursor_close_b.png) 24 24, auto;
}

.modal-window[dismiss]
{
	cursor: default;
}

.modal-window:not([dismiss])::after
{
	position: absolute;
	top: 10px;
	right: 10px;
	content: "close";
	font-family: "Material Icons";
	font-size: 35px;
	opacity: 0.5;
	color: var(--t-primary);
}

.modal-window .modal-container
{
	width: 100%;
	height: 100%;
	position: relative;
	display: table;
	text-align: center;
}

.modal-window .modal-container .modal-content
{
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}

.modal-window .modal-container .modal-content .modal-inner
{
	padding: 15px;
	border-radius: 5px;
	border: 1px solid var(--border);
	background: var(--llbg);
	margin: auto;
	display: inline-block;
	text-align: left;
	cursor: auto;
	position: relative;
}

.modal-window .modal-container .modal-content .modal-inner.flex-height {
	display: flex;
	flex-direction: column;
	padding-bottom: 50px;
}

.modal-window .modal-container .modal-content .modal-inner.semi
{
	background: var(--bgr);
}

.modal-window.loaded .modal-container .modal-content .modal-inner
{
	overflow: auto;
}

.modal-window .modal-container .modal-content .modal-inner .loading
{
	width: 90px;
	height: 90px;
}

.modal-window .modal-container .modal-content .modal-inner .modal-transition
{
	opacity: 0;
	animation-name: modalTransition;
	animation-fill-mode: forwards;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

@keyframes modalTransition
{
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*
* Google Maps
*/

.gmnoprint a, .gmnoprint span, .gm-style-cc {
    display:none;
}

.popup-bubble
{
	position: absolute;
  	top: 0;
  	left: 0;
  	transform: translate(-50%, -100%);

  	background-color: white;
  	border-radius: 5px;
  	font-family: sans-serif;
  	max-height: 52px;
  	box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);

	padding-right: 44px;
	max-width: 220px;
	overflow: hidden;
}

.popup-container:active .popup-bubble
{
	background-color: #dfdfdf;
}

.popup-bubble::after
{
	content: attr(right_anchor);
	position: absolute;
	top: 5px;
	right: -4px;
	font-size: 40px;
	font-weight: normal;
	font-family: "Material Icons";
	color: #07f;
}

.popup-bubble h1
{
	margin: 0;
	padding: 8px 0 0 12px;

	font-size: 18px;
	font-weight: normal;
	color: black;

	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.popup-bubble h2
{
	margin: 0;
	margin-top: -1px;
	padding: 2px 0 8px 12px;
	font-size: 12px;
	font-weight: normal;
	color: black;

	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
  	position: absolute;
  	width: 100%;
  	bottom: 8px;
  	left: 0;
}

/* This element draws the tip. */
.popup-bubble-anchor::after {
  	content: "";
  	position: absolute;
  	top: 0;
  	left: 0;

	transform: translate(-50%, 0);
  	width: 0;
  	height: 0;

  	border-left: 6px solid transparent;
  	border-right: 6px solid transparent;
  	border-top: 8px solid white;
}

.popup-container:active .popup-bubble-anchor::after
{
	border-top-color: #dfdfdf;
}

.popup-container {
	cursor: auto;
  	height: 0;
  	position: absolute;
  	width: 200px;
  	margin-top: -40px;
}