#page{
  display:flex;
  height: fit-content;
  max-width: 1280px;
  margin: auto;
  padding: 1%;
  transition-duration: 1s;
  border:solid 1px black;
  border-radius:10px;
}


button{
  background:white;
  border:solid 0;
  border-radius:20px;
  padding:10px 20px;
  font-family:monaco;
  font-size:16px;
  transition-duration: 0.3s;
  color:black !important;
}

button.amount{
  margin:7px;
}

button.amount:hover{
    background: #b0d7ff;
    transition-duration: 0.3s;
}
button:hover:enabled {
   background: #b0d7ff;
    transition-duration: 0.3s;
}

button#roll_it:disabled {
  opacity: 0.9;
  color: grey!important;
}




button#roll_it{
  margin: auto;
  display: table;
  margin-top: 70px;
}



table{
  margin:auto;
  margin-top: 30px;
}

th {
  text-align: end;
  font-family:monaco;
  font-size:18px;
}

td {width: 1%;}

td.left {}

td.center {
    text-align: center;
}

td.right {
    text-align: left;
}

td.left {
    text-align: right;
}

td {width: 1%;
   padding:5px;
   font-size:20px;
  font-family:monaco;
  color:black
   }

.tray {
    margin-top: 30px;
}

label{
  margin: auto;
  display: table;
  font-size:22px;
  font-family:monaco;
}

label#result {
    position: relative;
    bottom: 26px;
    left: 0px;
    font-size:30px;
    transition-duration:1s;
}



.infos{
  margin: 15px 20px;
  border-radius: 10px;
  padding:25px 0 20px 0;
  background:#f2f2f2;
  border:solid 1px black;
  color:black;
}

/* L E F T */
#left{
  width: 38%;
  min-width: 323px;
  margin-top: auto;
}

#roll_result{
  background: #f2f2f2;
  height:42%;
  padding-bottom: 0;
  min-height: 290px;

}

.stats{
  width:50%;
}


#tray{
  transform:scale(20);
}

#statistics{
  height: fit-content;
  padding: 15px;
}

#balance{
  padding-top:0;
}


/* C E N T E R */
#center{
  width: 38%;
  padding-top:30px;
  margin-top:30px;
  min-width: 393px;
  height: fit-content;
  margin-top: auto;
}

#all_dices{
  margin-top:30px;
}

.line_1, .line_2{
  margin: auto;
  display: table;
}


.die{
  transform: scale(1.55);
}

#all_amounts{
  margin-top:40px !important;
  margin: auto;
  display: table;
}

.dice:hover {
  background: #b0d7ff;
} 

/* R I G H T */


.dice{
  transition-duration: 0.3s;
}

.dice:hover {
  background: #b0d7ff;
  transition-duration: 0.3s;
} 


div#address {
    display:none;
    width: 500px;
    height: 100px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
    transition-duration:2s;
}


input#deposit_address {
    width:475px;
    margin-top: 20px;
    background: white;
    border: solid 2px #a3b2cf;
    font-family: Monaco;
    font-size: 12px;
}

#address label{
  text-align:center;
}
input#deposit_address {
    margin-top: 20px;
}

#right label {
    padding-bottom: 22px;
    border-bottom: solid 0.5px black;
    width: -webkit-fill-available;
    text-align: center;
}

#right p {
    padding: 18px 10px 18px;
    text-align: right;
    font-family: Monaco;
    border-bottom: solid 0.5px;
}



select {
    width: -webkit-fill-available;
    border:0;
    text-align: right;
    font-family: Monaco;
    font-size:15px;
}

option {
    border-top: solid 0.5px;
    padding: 14px 10px 14px;
}

#right{
    padding:20px 0px 0px 0px;
    width: 24%;
    min-width:250px;
}

.face {
    border-radius: 4px;
}

#history:disabled{
  color:black;
  opacity: 1;
  font-weight: 500;
}



#note {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

#note::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}


#note {
  height: 575px;
}

#note p:last-child {
  border-bottom:0;
}


body {
  background-color: yellow;
}

@media only screen and (max-width: 760px) {

  #roll_result {
    min-height: 0px !important;
}

  #page {
    display:contents;
  }
  #left{
    width:100%;
  }

.tray {
    transform: scale(30%) !important;
    transform-origin: top left;
    width: 200%;
    height: 0 !important;
}

#roll_result {
    background: #f2f2f2;
    height: 150px;
    padding-bottom: 0;
}

.infos {
    margin: 3px 3px;
    border-radius: 10px;
    padding: 5px 0 5px 0;
  }

  #center {
    min-width: -webkit-fill-available;
    padding-top:2px;
  }

#right {
    padding: 20px 0px 0px 0px;
    width: inherit;
    margin: 0px 9px 15px 0px;
}

#page {
    display: grid;
    flex-direction: row;
      height: 100vh;
  overflow-y: scroll;
  }

#page :nth-child(1) { order: 1; }
#page :nth-child(3) { order: 1; }

#all_dices {
    margin: auto;
    display: table;
}

.line_1, .line_2 {
    margin: initial;
    display: table;
}

.dice{
  margin: 2px 2px !important
}

button.amount {
    padding: 10px 13px;
}

#all_amounts {
    margin-top: 4px !important;
}

button#roll_it {
    margin: auto;
    display: table;
    margin-top: 10px;
}
.die.die1 {
    width: 500px !important;
    padding-bottom: 150px !important;
}
.sum {
    width: 95% !important;
}

label#result{
      bottom: 43px;
    left: 93px;

}

div#address {
    width: inherit;
}

#address label {
    text-align: center;
    min-width: -webkit-fill-available;
}

input#deposit_address {
    width: -webkit-fill-available;
    padding: 5px;
    margin: 3px;
    margin-top: 20px;
    font-size: 9px;
}


}

/* 24/11 */

#menu img {
  width: 35px;
  transition-duration: 0.3s;
}


#menu img:hover {
  transform: scale(1.3);
  transition-duration: 0.7s;
}

#menu h2 {
  color: #0500a4;
  font-family: monaco;
  display: inline;
}

#menu {
  margin: auto;
  display: table;
}

#contact-us{
  font-size: 12px;
}


.tooltip {

  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 160px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  display: table;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

p.tooltip {
  position: relative;
}