.ComingSoon{

    color:white;

}



.timeframebar{

    width: 100%;

    height:auto;

    border: 2px solid var(--text);

    display: flex;

    justify-content: center;

    align-items: center;

    padding-top: 1%;

    padding-bottom: 1%;

}



.todayButton{

    width: 100px;

    height: auto;

    color: white;

    border: 2px solid var(--text);

    padding: 5px;

    font-size: 0.75vw;

    text-align: center;

    font-weight: bold;

    user-select: none;

}



.yesterdayButton{

    width: 100px;

    height: auto;

    color: white;

    border: 2px solid var(--text);

    padding: 5px;

    font-size: 0.75vw;

    text-align: center;

    font-weight: bold;

    user-select: none;

}





.space{

    width:5%;

}



.loading img{

    width: 32px;

    margin: auto;

    display: block;

    margin-top: 5%;

    

    animation-name: spinning;

    animation-duration: 5s;

    animation-iteration-count: infinite;

    /* linear | ease | ease-in | ease-out | ease-in-out */

    animation-timing-function: linear;

}



@keyframes spinning {

from { transform: rotate(0deg) }

to { transform: rotate(360deg) }

}





.tables{

    display: flex;

    justify-content: center;

}



.seperator{

    width:2.5%;

}



.allianceTable{

    width:47.5%;

}



.hordeTable{

    width:47.5%;

}



.lbTable{

    padding: 1%;

    margin: 0;

    color: white;

    text-align: center;

	font-size: 0.65vw;

    cursor: pointer;

    border: 2px solid var(--text);

    border-top: none;

}



#horde_logo{

    width:48px;

}



#ally_logo{

    width:48px;

}



.lbHead{

	font-size: 0.65vw;

}



th, td {

    padding-left: 1%;

    padding-right: 1%;

    width: 0.1%;

}

.tablerow:hover{

	opacity: 0.6;	

	outline:1px solid var(--text);

}



.blizzError{

    height: 21px;

    width: 22px;

	vertical-align: middle;

}



.lbFaction{

	color: white;

}



.lbRank{

	color: white;

}



.lbName{

}



.lbRealm{

	color: white;

}



.lbRating{

	color: white;

}



.lbWinLoss{

	text-align: left;	

}



.lbWins{

	color: var(--wingreen);

}



.lbLost{

	color: var(--losered);

}



.lbWinrate{

    color: white;

    float: right;

}



.iframe-container{

    width: 720px;

    height: 1000px;

    overflow: hidden;

    border:4px solid var(--text);

}



.iframe{

    margin-top: -50px;

    width: inherit;

    height: inherit;

    margin-left: -2px;

}







.circle-image{

    



    

    -webkit-animation-name: rotate;

    -webkit-animation-duration: 600s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

    -webkit-animation-fill-mode: forwards;



    color: cyan;

    background: cyan;

    width: 30rem;

    height: 30rem;

    border-radius: 50%;

    border:4px solid var(--text);

    position: fixed;

    top: 50%;

    left: 50%;

    /* bring your own prefixes */

    transform: translate(-50%, -50%);

    z-index:-1;

    opacity:85%;

    transition: 3s;

    

    -khtml-user-select: none;

    -o-user-select: none;

    -moz-user-select: none;

    -webkit-user-select: none;

    user-select: none;
  pointer-events: none;

}



.circle-image:hover{

    opacity:50%;

    transition: 1s;

}



.circle-image-border{

    

    animation-name: rotate-backwards;

    animation-duration: 600s;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

    color: cyan;

    background: cyan;

    width: 35rem;

    height: 35rem;

    border-radius: 50%;

    border:4px solid var(--text);

    position: fixed;

    top: 50%;

    left: 50%;

    /* bring your own prefixes */

    transform: translate(-50%, -50%);

    z-index:-1;

    opacity:85%;

    transition: 3s;

    

    -khtml-user-select: none;

    -o-user-select: none;

    -moz-user-select: none;

    -webkit-user-select: none;

    user-select: none;
  pointer-events: none;

}





/* unvisited link */

a:link {

  color: var(--text);

}



/* visited link */

a:visited {

  color: var(--text);

}



/* mouse over link */

a:hover {

  color: var(--text);

}



/* selected link */

a:active {

  color: var(--text);

}



.Header-Content{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction:row;

    

    background-color: var(--background);

    height: 20px;

    width: 100%;

    outline-style: Solid;

    outline-color: var(--code);



    font-family: math;

    font-size: 14px;

    letter-spacing: 0px;

    word-spacing: 0px;

    font-weight: 250;

    font-style: normal;

    font-variant: normal;

    position: fixed;

}





.User-Text{

    height: inherit;

    width: auto;

    border: none;

    color: var(--code);

    padding-left: 5px;

    padding-right: 5px;

    

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction:row;

    -khtml-user-select: none;

    -o-user-select: none;

    -moz-user-select: none;

    -webkit-user-select: none;

    user-select: none;

}

.span{

    font-family: inherit;

    font-size: inherit;

    letter-spacing: inherit;

    word-spacing: inherit;

    font-weight: inherit;

    font-style: inherit;

    font-variant: inherit;

    



}



.user{

    color: var(--user);

}

.user1{

    color: var(--user1);

}

.user2{

    color: var(--user2);

}

.user3{

    color: var(--user3);

}



.Command-Line{

    background-color: var(--background);

    height: inherit;

    width: 100%;

    border: none;

    color: var(--code);

    

    font-family: inherit;

    font-size: inherit;

    letter-spacing: inherit;

    word-spacing: inherit;

    font-weight: inherit;

    font-style: inherit;

    font-variant: inherit;

}



.Command-Line:focus {

    outline: none;

}



.centered-high {

    z-index: 0;

    position: fixed;

    top: 40%;

    left: 50%;

    /* bring your own prefixes */

    transform: translate(-50%, -50%);

    border-radius: 50%;

}

.centered {

    z-index: 0;

    position: fixed;

    top: 50%;

    left: 50%;

    /* bring your own prefixes */

    transform: translate(-50%, -50%);

    border-radius: 50%;

}



.header {

    display: flex;

    justify-content: center;        /* horizontal centering */

    align-items: center;            /* vertical centering within the header itself */

    flex-direction: column;

    width: 17rem;

    height: 17rem;

    border-radius: 50%;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    margin-top: 0;

    position: relative;             /* could be absolute or fixed if needed */

}





.square{

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction:column;

    width:17rem;

    height:17rem;

    border-radius: 50%;

    -webkit-user-select: none; /* Safari */        

    -moz-user-select: none; /* Firefox */

    -ms-user-select: none; /* IE10+/Edge */

    user-select: none; /* Standard */

}







.geoloc{

    position:absolute;

    top:20px;

    right: 20px;

    border-left:4px solid var(--code);

    border-right:4px solid var(--code);

    border-bottom:4px solid var(--code);

    border-top:4px solid var(--background);



    color: var(--text);

    padding: 10px;

    visibility: hidden;

    

    -khtml-user-select: none;

    -o-user-select: none;

    -moz-user-select: none;

    -webkit-user-select: none;

    user-select: none;

}



.IP{

    

}



.CITY{

    

}



.VPN{

    

}



.PROXY{

    

}



.ISP{

    

}





@keyframes rotate{

    from{ transform: translate(-50%, -50%) rotate(-360deg) ;}

    to{ transform: translate(-50%, -50%) rotate(360deg)  ;}

}



@keyframes rotate-backwards{

    from{ transform: translate(-50%, -50%) rotate(360deg) ;}

    to{ transform: translate(-50%, -50%) rotate(-360deg)  ;}

}



@-webkit-keyframes fadeinout {

  0% { opacity: 0; }

  50% { opacity: 1; }

  100% { opacity: 0; }



}



@keyframes fadeinout {

  0% { opacity: 0; }

  50% { opacity: 1; }

  100% { opacity: 0; }

}

.expand-and-fade {
  transform: scale(10);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}