/*<a href="https://www.vecteezy.com/free-vector/black-dice">Black Dice Vectors by Vecteezy</a>
<a href="http://cliparts.co/clipart/3518848">cliparts.co</a>
*/
tr {
  cursor: pointer;
}

.exceedance {
  color: red !important;
}

.activeColumn {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.activeColumn:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

body,
html {
  height: 100%;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 400;
}

#iframe-body {
  height: auto;
}

#root {
  height: 100%;
}

#app-main {
  height: 100%;
}

.bg-full {
  position: fixed;
  top: 10px;
  right: 0px;
  left: 0px;
  background-image: url("./images/austerlitzklein.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#body-div {
    padding-top: 65px;
    height: 100%;
  }

  button {
    margin: 0.5rem;
  }

  @media screen and (max-width: 820px) {
    button {
      margin-left: .25rem;
      margin-right: .25rem;
    }
  }

@media screen and (max-width: 307px) {
  #body-div {
    padding-top: 122px;
  }
  .column-div {
    width: 100%;
  }
}

@media screen and (max-width: 356px) {
  #builder-navbar button {
    font-size: .77rem;
    padding: .25rem .2rem;
  }
}

@media screen and (max-width: 660px) {
  .specials-column {
    display: none !important;
  }
}

@media screen and (min-width: 308px) {
  #column-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 559px) {
  #column-display {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 768px) {
  #right-navbar {
    margin-right: 65px;
  }
}

@media screen and (min-width: 988px) {
  #column-display {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .container {
    margin-left: 65px;
  }
  #right-builder-control {
    margin-right: 65px;
  }
}
/*
  #builder-main {
    display: flex;
    flex-wrap: wrap;
  }
  #builder-navbar {
    flex:20;
  }
  #right-part {
    display: flex;
    flex-direction: column;
    flex:80;
  }
  #builder-navbar-container {
    flex-direction: column;
    justify-content: space-between;
  }
  #left-builder-control {
    flex-direction: column;
  }
  #right-builder-control {
    flex-direction: column;
  }
}*/

@media screen and (min-width: 1061px) {
  #column-display {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 1312px) {
  #column-display {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 1563px) {
  #column-display {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

#left-builder-control {
  display: flex;
  flex-wrap:  nowrap;
  justify-content: flex-start;
}

#right-builder-control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/*
.bg-transparent {
  height: 100%;
}
*/

.bg-transparent::before {
  content: "";
  position: fixed;
  top: 10px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  background-image: url("./images/austerlitzklein.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
}

.brand-text {
  margin-left: 1.5rem;
  margin-top: -3.2rem;
  font-weight: 700;
  vertical-align: middle;
}

#builder-table {
  background-color: transparent;
  z-index: 1;
}

#buttons-and-total-points{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#total-points {
  margin-left: 0.5rem;
  margin-top: auto;
  margin-bottom: auto;
  font-weight: 700;
}

#column-control {
  background-color: transparent;
  display: flex;
  align-items: center;
  z-index: 1;
  height: 20%;
}

#column-display {
  background-color: transparent;
  z-index: 1;
  /*
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  */
}

.column-div {
  margin: 0.5rem;
}

.column-div li {
  cursor: pointer;
  padding: 0.35rem;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.login-div {
  position: relative;
  top: 15%;
  margin: auto;
  max-width: 300px;
}

.login-form { 
}

.login-margin {
  margin: 0.1rem 0;
}

/* unicode icons */
.icon-both:after {
  margin-left: 0.5rem;
  content: "\25B4\25BE";
}

.column-header {
  display: flex;
  justify-content: space-between;
}

.cancel-x {
  padding: 5px;
}

.cancel-x:hover {
  color: #fff;
  background-color: #5c636a;
  border-color: #565e64;
}

.small-font {
  font-size: 0.9rem;
}

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

#dice {
  height: 100%;
}

#dice-control {
  height: 25%;
  padding-top: 2rem;
  text-align: center;
}

.show-dice {
  height: 25%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#momentum-control {
  height: 25%;
  text-align: center;
}

#proceed-warning {
  height: 25%;
  color: green;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
}

#stop-container {
  height: 25%;
  text-align: center;
}

#stop-warning {
  color: red;
  font-size: 3rem;
  font-weight: 700;
}

.dice-img {
  height: 70px;
  margin: 0.7rem;
}
 
.dice-img img {
  max-height: 100%;
  max-width: 100%;
}

@media print{
  @page {size: landscape}
}

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

.small-font {
  font-size: 0.95;
}

#mylist-buttons {
  text-align: center;
}

/*
.nav-link {
  margin: 20px;
  text-align: center;
  border: 2px solid transparent;
  border-radius: 1rem;
}
.nav-link:hover,
.nav-link:focus {
  background-color: #fefefe;
  color: #212529 !important;
  border-radius: 1rem;
}
*/