/*#global*/
body{
  background-color: #0D244D;
}

::placeholder{
  text-align: center;
  color: #ff3ddf;
}

table{
  border: #ff3ddf;
  width: 100%;
}

input[type="text"],
input[type="password"],
select {
    text-align:center;
    border: 2px solid #ff3ddf;
    border-radius: 5px;
    width: 100%;
    height: 150%;
}

input[type="date"]
{
  text-align:center;
  border: 2px solid #ff3ddf;
  border-radius: 5px;
  width: 100%;
}

.ueam-textarea{
  border: 2px solid #ff3ddf;
  border-radius: 5px;
  width: 100%;
}

select {
  color: #ff3ddf;
  text-align-last: center;
}

.ueam-btn,
.ueam-nav-btn:hover,
.ueam-btn-decline,
.ueam-btn-confirm{
  width: 100%;
  height: 150%;
  color: #ff3ddf;
  border: 6px solid #ff3ddf;
  border-radius: 5px;
}

.ueam-nav-btn,
.ueam-btn:hover{
  color: #95D7FB;
  width: 100%;
  height: 150%;
  border: 6px solid #95D7FB;
  border-radius: 5px;
}

.ueam-btn-decline:hover{
  color: red;
  border-color: red;
}

.ueam-btn-confirm:hover{
  color: lightgreen;
  border-color: lightgreen;
}

.ueam-btn-upvote-active{
  width: 100%;
  height: 150%;
  color: #ff3ddf;
  border: 6px solid green;
  border-radius: 5px;
  background-color: transparent;
}

.ueam-btn-downvote-active{
  width: 100%;
  height: 150%;
  color: #ff3ddf;
  border: 6px solid red;
  border-radius: 5px;
  background-color: transparent;
}

.textDecoration{
  color: #ff3ddf;
}

.content-align-center{
  text-align: center;
}

.padding-bottom-md{
  padding-bottom: 25px;
}

.padding-bottom-lg{
  padding-bottom: 35px;
}

/*#teaserPage*/

.teaserImageContainer,
.subPageHeaderImage{
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.teaserImageContainer img,
.subPageHeaderImage img{
  width: 100%;
  height: auto;
  padding: 0;
}

@media only screen and (min-width: 1100px) {
  .teaserImageContainer img,
  .subPageHeaderImage img{
    margin-top: 1.5%;
  }
}

/*protocolTickerPage.php*/

.protocolContainer{
  width: 400px;
  height: auto;
  padding: 0;
}

.protocolContainer .odd{
  background-color: #b7e0f7;
  color: black;
}

.protocolContainer .even{
  background-color: #f4a4e8;
  color: black;
}

/*enterProtocolPage.php*/

.protocolTextarea{
  width: 100%;
  height: 150px;
}

.protocolform{
  padding-top: 10%;
}

/*eventLoginPage.php*/
.checkinInput{
  height: 70px !important;
  font-size: 50px;
}

/*highscorePage.php*/

.highscoreMessage{
  color: #ff3ddf;
  text-align: center;
}

.highscore-entry{
  padding-top: 10%;
}

/*userProfilePage.php*/

.userProfileLeft{
  height: 500px;
  padding:0px;
}

.achievementSection{
  /*background-color: blue;*/
  height: auto;
  border: 6px solid #ff3ddf;
  border-radius: 5px;
  margin: 0px 0px 5px 5px;
}

.eventBadgeSection{
  border: 6px solid #ff3ddf;
  border-radius: 5px;
}

.userNamePlate{
    width: 100%;
    color: #ff3ddf;
    border: 6px solid #ff3ddf;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: underline;
    font-style: italic;
    text-align: center;
    margin-bottom: 5px;
    font-family: Courier New;
    font-size: 30px;
}
.image-upload-button{
  background-color: transparent;
  width: 60%;
}
.avatarImage{
  /*background-color: yellow;*/
  height: 50%;
  border: 6px solid #ff3ddf;
  border-radius: 5px;
  margin-bottom: 5px;
}

.achievementBadge{
  width: 100%;
  padding: 7px 10px 10px 10px;
}

.badgeContainer{
  width: 100%;
  height: 90px;
  margin: 10px 0px 0px 0px;
  background-image: url("../images/badges/testBadge.png");
  background-size: contain;
  background-repeat: no-repeat;;
}

.pinContainer{
  position: relative;
  float: left;
  width: 70px;
  height: 70px;
  /*border: 1px solid black;*/
  border: none;
  background-color: transparent;
}

.pin1{
 left: 2.5%;
}

.pin2{
  left: 8.5%;
}

.pin3{
  left: 14.5%;
}

:root {
  --achievement-size: 50px;
}

@media (min-width: 768px) {
  :root {
    --achievement-size: 70px;
  }
}

.achievementProgressRow {
  width: 100%;
  display: flex;
  padding: 10px 0;
}

.achievementProgressImage {
  margin-right: 5px;
  height: var(--achievement-size);
  width: var(--achievement-size);
}

.achievementProgress {
  width: calc(100% - (var(--achievement-size) + 5px));
  padding: 3px;
  border: solid 1px #ff2bff;
}

.achievementProgressBar {
  height: 100%;
  background: linear-gradient(90deg, #ff2bff var(--progress), #5d5d5d var(--progress));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}