table.dataTable td.dt-control:before {
	margin-top: 0px;
}
table.dataTable tr.dt-hasChild td.dt-control::before {
	background-color: #ff0a0a;
}
table.dataTable.display tbody td + td {
	border-left: 1px solid rgba(0, 0, 0, 0.15);
	border-left-color: rgba(0, 0, 0, 0.15);
	border-left-style: solid;
	border-left-width: 1px;
}
table.dataTable tfoot th, table.dataTable tfoot td {
	padding: 10px 10px 10px 10px;
}
table.dataTable tfoot th, table.dataTable thead th {
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
	border-top: 1px solid rgba(0, 0, 0, 0.3);
}
table.dataTable tbody th, table.dataTable tbody td {
	padding: 3px 4px;
}
table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
	padding-top:8px;
	padding-bottom:8px;
}
table.dataTable td.dt-control::before {
    background-color: #a5d46a;
}
 table.dataTable tr.dt-hasChild td.dt-control::before {
    background-color: #ffa080;
}
	
.header_footer {
	color: white;
	background-color: rgba(50,0,255,0.4);
}  
.initcolumn {
	width : 0px;
}
.today {
	background-color: rgba(255, 0, 0, 0.7);
}
.buttoncolumn {
	width : 0px;
	background: linear-gradient(90deg, rgba(50,0,255,0.1) 0%, rgba(50,0,255,0.4) 100%);
}

.presence {
	text-align: center;
	margin: 0 auto;
	text-transform: capitalize;
	display: block;
	color: #fff;
	border-radius: 10px;
	width: auto;
	height: auto;
	padding: 3px 4px;
}
.idle {
	background-color: #ffcc41;
	font-weight: bold;
}
.active {
	background-color: #a5d46a;
	font-weight: bold;
}
.offline {
	background-color: #ffa080;
	font-weight: bold;
}

.ip_display{
	font-family: monospace;
	font-size: 100%;
	color:#666;
}

.container {
	text-align: center;
}
.title {
	font-size: 40px;
}
.bold-text {
	font-weight: bold;
}
.regular-text {
	font-weight: normal;
}

body {
	font-family: 'Trebuchet MS', sans-serif;
}
  
a, a:visited{
	color: rgba(50,0,255,0.6);
}

.office_text{
	color:rgb(19, 44, 99);
}

.office_text::before{
	content:'🏢 ';
}
.vpn_text{
	color:rgb(44, 98, 19);
}
.vpn_text::before{
	content:'🏠 ';
}
.stale_text{
	color:rgb(99, 19, 44);;
}
.stale_text::before{
	content:'⏳ ';
}


/* CONNECTION MOOSE */


#connection_check{
	float:right;
	width:fit-content;
}

.toolbar{
	margin-left:10px;
	float:left;
	text-align:center;
}

#moose_animation {
	float:right;
	height: 78px;
	width: 94px;
	background: url("../walking_moose.png");
	animation: sprite steps(1) 1s infinite;
	animation-play-state: paused;	
	margin:10px;
  }

  #timestamp{
	height:inherit;
	width:94px;
	float:left;
  }

  @keyframes sprite {
	0% { background-position: 0px; }
	11% { background-position: -96px; }
	22% { background-position: -192x; }
	33% { background-position: -288px; }
	44% { background-position: -384px; }
	55% { background-position: -480px; }
	66% { background-position: -576px; }
	77% { background-position: -672px; }
	88% { background-position: -768px; }
	100% { background-position: -864px; }
  }
  

  details {
	border: 1px solid #aaa;
	border-radius: 4px;
	padding: 0.5em 0.5em 0;
  }
  
  summary {
	font-weight: bold;
	margin: -0.5em -0.5em 0;
	padding: 0.5em;
  }
  
  details[open] {
	padding: 0.5em;
  }
  
  details[open] span{
	  display: inline-block;
	  font-size:0.75rem;
  }
  
  
  details[open] summary {
	border-bottom: 1px solid #aaa;
	margin-bottom: 0.5em;
  }