@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body{
	background: url("bg.png");
	background-size: cover;
  background-attachment: fixed;
	font-family: 'Roboto', sans-serif;
	font-size: 64%;
}

#title{
	max-width: 400px;
    display: block;
    width: 50%;
    margin: 0 auto;
}
#title img{
	width:100%;
}
.alpha{
	color: #fff;
	float: right;
    opacity: 0.4;
}

.png{
	color: red;
}

/* ------ Map ------ */

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
  }

  #map_container{
    height: 30rem;
    width: 100%;
    position: relative;
    float: left;
    border: 1px solid #000;
    position: relative;
    overflow: hidden;
    box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.5);
    background: #b07c42;
  }
  #map {
    position: absolute;
    z-index: 9;
    border: 1px solid #d3d3d3;
    border-spacing: 0;
    transform: scale(0.6);
    transform-origin: 28% 45%;
    top: -352%;
    left: -51%;
    transition: transform 0.6s ease-in-out;
  }
  #map #markers{
    position: relative;
    width: 100%;
    height: 100%;
  }
  #map .player{
    height: 24px;
    width: 24px;
    background: url("markers/player.png");
    background-size: cover;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
  }
#map .player.trial,
#map .player.cave{
	display: none;
}
  #map .player.knight{
    background-image: url("markers/knight.png");
  }
  #map .player.ghost{
    background-image: url("markers/tom.png");
    height: 41px;
    width: 21px;
  }
  #map .player .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    top: -5px;
    left: 105%;
    position: absolute;
    z-index: 1;
  }
  #map .player .tooltiptext::after {
    content: " ";
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color:  transparent black transparent transparent;
  }


  /* Show the tooltip text when you mouse over the tooltip container */
  #map .player:hover .tooltiptext,
  #map .player.active .tooltiptext {
    visibility: visible;
  }

  #map table {
    border-collapse: separate;
    border-spacing: 0;
    filter: brightness(0.9);
  }
  #map table tr,
  #map table td{
    padding:0;
    border-collapse:collapse;
    border:0;
  }
  #map table td img{
    vertical-align:middle;
  }
  #map_control {
    position: absolute;
    z-index: 10;
    text-align: center;
    width: 5rem;
    margin: 1rem;
  }
  #map_control div{
    cursor: pointer;
    background: rgba(255,255,255, 0.7);
    border-radius: 2px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    transition: 0.3s all ease-in-out;
  }
  #map_control div:hover{
    background: rgba(255,255,255, 0.9);
  }
  #map_control #up,
  #map_control #down,
  #map_control #zoomin,
  #map_control #zoomout{
    margin-left: 28px;
    margin-right: 28px;
  }
  #map_control #right,
  #map_control #left,
  #map_control #down,
  #map_control #zoomout{
    margin-top: -4px;
  }
  #map_control #zoomin{
    margin-top: 1rem;
    border-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  #map_control #zoomout{
    border-radius: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  #map_control #left{
    margin-left: 0px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
  }
  #map_control #right {
    margin-left: 20px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
  }
  #map_control #up{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  #map_control #down{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

/*
#map{
	width: 660px;
	background: rgba(0,0,0,0.5);
	padding: 1rem;
	border-radius: 1rem;
	position: relative;
	float: left;
}
#map .bg{
	border-radius: 1rem;
	width: 100%;
	height: 100%;
}
#map .player{
	height: 16px;
	width: 16px;
	background: url("marker.png");
	position: absolute;
	bottom:1rem;
	left:1rem;
}
#map .player.cave{
	display: none;
}

#map .player .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  top: -5px;
  left: 105%;
  position: absolute;
  z-index: 1;
}

#map .player .tooltiptext::after {
  content: " ";
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color:  transparent black transparent transparent;
}



#map .player:hover .tooltiptext,
#map .player.active .tooltiptext {
  visibility: visible;
}
*/

/* ------ Player List ------ */

#playerlist{
	width: calc(50% - 4rem);
	display: inline-block;
	float: right;
	background: rgba(0,0,0,0.5);
	padding: 1rem;
	border-radius: 1rem;
	color: #fff;
  margin: 1rem 1rem 1rem 0;
}
#playerlist h3{
	    font-size: 2rem;
    text-align: center;
    border-bottom: 1px solid #fff;
    line-height: 1.6rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
    }
#playerlist .server_alpha,
#playerlist .server_beta{
  float: left;
  width: 50%;
}
#playerlist .offline{
	display: none;
}
#playerlist p.online{
	font-size: 1.2rem;
	text-align: center;
	margin-top: 0;
}
#playerlist ul.online li{
	font-size: 1.1rem;
    padding-bottom: 0.2rem;
    cursor: pointer;
    position: relative;
    list-style: none;
}
#playerlist ul.online li img{
	position: absolute;
	margin-left: -1.5rem;
}
#playerlist ul.online li .cave{
	position: absolute;
	margin-left: -1.5rem;
	font-size: 0.7rem;
	line-height: 1.4rem;
	opacity: 0.8;
}
#playerlist ul.online li .cave::before{
  content: " ";
  position: absolute;
  right: 100%;
  top: 50%;
 	margin-top: -6px;
 	margin-right: 3px;
    border-width: 7px;
  border-style: solid;
  border-color:  white transparent transparent transparent;
}

#playerlist ul.online li[data-role=admin]:after{
	content: "admin";
    margin-left: 2rem;
    background: #345;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    margin-top: 2px;
    display: inline-block;
    position: absolute;
}
#playerlist ul.online li[data-role=knight]:after{
	content: "knight";
    margin-left: 2rem;
    background: #67b57c;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    margin-top: 2px;
    display: inline-block;
    position: absolute;
}
#playerlist p {
  font-size: 1.1rem;
}
#playerlist ul.report{
  margin-bottom: 40px;
}
#playerlist ul.report li{
	font-size: 1.1rem;
    padding-bottom: 0.2rem;
    position: relative;
    list-style: none;
}
#playerlist ul.report_global li{
	font-size: 1.1rem;
    padding-bottom: 0.2rem;
    position: relative;
    list-style: none;
}
#playerlist .timestamp {
	    display: block;
    text-align: center;
    color: #aaa;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ------ Weather ------ */
#weather{
	width: calc(50% - 4rem);
	display: inline-block;
	float: left;
	background: rgba(0,0,0,0.5);
	padding: 1rem;
	border-radius: 1rem;
	color: #fff;
	margin: 1rem;
	    font-size: 1.1rem;
}
#weather p{
	margin:0;
}
#weather p span{
	display: inline-block;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    vertical-align: top;
    padding:0 0.5rem 0 0.5rem;
}
#weather p img + img + span,
#weather p img + span{
	border-right: 1px solid #fff;
    margin-right: 0.5rem;
    padding-right: 0.7rem;

}
#weather .event{
	margin-left: 1rem;
}


#container_news {
  max-width: 800px;
  position: fixed;
  z-index: 99;
  width: 50%;
  top: 0;
  left: 50%;
  margin-left: -400px;

}

#monitor {
	background: #000;
	position: relative;
	border-top: 3px solid #888;
	margin: 5%;
	padding: 2% 2% 4% 2%;
	border-radius: 10px;
	border-bottom-left-radius: 50% 2%;
	border-bottom-right-radius: 50% 2%;
	transition: margin-right 1s;
}

#monitor:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 3%;
	left: 36%;
	height: .5%;
	width: 28%;
	background: #ddd;
	border-radius: 50%;
	box-shadow: 0 0 3px 0 white;
}

#monitorscreen {
	position: relative;
  background-color: #777;
  background-image: url("stock_photos/screenshot_1920x1080_2021-01-23_20-51-00.png");
	background-size: cover;
	background-position: top center;
	height: 0;
	padding-bottom: 56.25%;
	position: relative;
	overflow: hidden;
}


@media all and (min-width: 960px) {
	#monitor {
		-webkit-animation: tvflicker .2s infinite alternate;
		-moz-animation:    tvflicker .5s infinite alternate;
		-o-animation:      tvflicker .5s infinite alternate;
		animation:         tvflicker .5s infinite alternate;
	}

	@-webkit-keyframes tvflicker {
	  0%   { box-shadow: 0 0 100px 0 rgba(200,235,255,0.4); }
	  100% { box-shadow: 0 0 95px 0 rgba(200,230,255,0.45); }
	}
	@-moz-keyframes tvflicker {
	  0%   { box-shadow: 0 0 100px 0 rgba(225,235,255,0.4); }
	  100% { box-shadow: 0 0 60px 0 rgba(200,220,255,0.6); }
	}
	@-o-keyframes tvflicker {
	  0%   { box-shadow: 0 0 100px 0 rgba(225,235,255,0.4); }
	  100% { box-shadow: 0 0 60px 0 rgba(200,220,255,0.6); }
	}
	@keyframes tvflicker {
	  0%   { box-shadow: 0 0 100px 0 rgba(225,235,255,0.4); }
	  100% { box-shadow: 0 0 60px 0 rgba(200,220,255,0.6); }
	}
}


/* -------  Pead Days ------------*/
.peak_days {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#q-graph {
  display: block; /* fixes layout wonkiness in FF1.5 */
  position: relative;
  height: 260px;
  width: 100%;
  margin: 1.1em 0 0;
  padding: 0;
  background: transparent;
  font-size: 11px;
  margin-bottom: 40px;
}

#q-graph tr, #q-graph td {
  position: absolute;
  bottom: 0;
  width: 14.2%;
  z-index: 2;
  margin: 0;
  padding: 0;
  text-align: center;
}
.qtr th {
    width: 90%;
    display: block;
    padding-top: 2px;
}

#q-graph td {
  transition: all .3s ease;
  &:hover {
    background-color: desaturate(#85144b, 100);
    opacity: .9;
    color: white;
  }
}

#q-graph tbody tr {
  height: 0px;
  padding-top: 2px;
}
#q-graph #q1 {left: 0;}
#q-graph #q2 {left: 14.2%;}
#q-graph #q3 {left: 28.4%;}
#q-graph #q4 {left: 42.6%; }
#q-graph #q5 {left: 56.8%; }
#q-graph #q6 {left: 71%; }
#q-graph #q7 {left: 85.2%; }
#q-graph .bar {
  width: 90%;
  border: 1px solid;
  border-bottom: none;
  color: #000;
  background-color: #d68e51;
  border-color: transparent;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

td.bar:hover {
    filter: brightness(1.2);
}
/* -------- Market ------ */
#market {
    background: rgba(0,0,0,0.5);
    padding: 1rem;
    border-radius: 1rem;
    color: #fff;
    margin: 1rem;
    width: calc( 100% - 4rem );
    float: left;
}
#market ul {
    width: 100%;
    padding: 0;
    margin: 0 0 0 0;
}
#market ul li {
    list-style: none;
    float: left;
    width: 19%;
    margin: 0 0.5% 1rem 0.5%;
    height: 170px;
    display: block;
    border-bottom: 1px solid #111;
}
#market h3 {
    font-size: 2rem;
    text-align: center;
    border-bottom: 1px solid #fff;
    line-height: 1.6rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}
#market h5{
    font-size: 18px;
    text-align: center;
    margin-bottom: 0;
}
#market p{
    text-align: center;
    font-size: 13px;
}
#market p b{
    font-size: 18px;
}


#market .Ingot {
    background-image: url("/glyphs/Glyph_Ingot-resources.assets-887.png");
    background-size: 48px;
    background-repeat: no-repeat;
    background-position: 51% 79%;
}

#market .Leather {
    background-image: url("/glyphs/Glyph_SoftFabricRoll-resources.assets-1547.png");
    background-size: 48px;
    background-repeat: no-repeat;
    background-position: 51% 79%;
}
#market .Leather.Big {
    background-image: url("/glyphs/Glyph_Soft_Fabric_Large_Roll-resources.assets-1820.png");
    background-size: 65px;
    background-repeat: no-repeat;
    background-position: 52% 89%;
}
#market .Dynamite {
    background-image: url("/glyphs/Glyph_Dynamite-resources.assets-1461.png");
    background-size: 56px;
    background-repeat: no-repeat;
    background-position: 51% 79%;
}
#market .Redwood.Core {
    background-image: url("/glyphs/Glyph_Redwood_Gotera_Core-resources.assets-1269.png");
    background-size: 65px;
    background-repeat: no-repeat;
    background-position: 52% 89%;
}
/* -------- Mobile ------ */
@media(max-width: 1220px){
  #map_container{
    float: none;
    margin: 0 auto;
    width: 100%;
  }

  #playerlist{
    width: calc(100% - 4rem);
    margin-top: 1rem;
  }

  #weather{
    width: calc(100% - 4rem);
    
  }
}

@media(max-width: 1080px){
  #market ul li {
    width: 49%;
  }
}

@media(max-width: 870px){
  #map_container{

    float: none;
    margin: 0 auto;
  }

  #playerlist{
    width: calc(100% - 2rem);
    margin-right: 0;
  }

  #weather{
    width: calc(100% - 2rem);
    margin-right: 0;
  }
}

@media(max-width: 550px){
  #playerlist .server_alpha, #playerlist .server_beta{
    width: 100%
  }
}

@media(max-width: 500px){
  #market ul li {
    width: 99%;
  }
  #map_container{
    display: none;
  }
}