@charset "UTF-8";

@font-face {
  font-family: 'Bangers';
  src: url('station-Bangers-Regular.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;

}



@font-face {
  font-family: 'Kanit';
  src: url('Kanit-MediumItalic.ttf') format('woff2');
  font-weight: bold;
  font-style: normal;

}

@font-face {
  font-family: 'Kanit';
  src: url('Kanit-Regular.ttf') format('woff2');
  font-weight: normal;
  font-style: normal;

}

.dugme-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.dugme-div {
  width: 90px;
  height: 90px;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  background-color: linear-gradient(#bb4040, #410961);
  border-radius: 3px;
  cursor: pointer;
}

.dugme-div:hover {
  transform: scale(1.1);
}

.dugme-div i {
  margin-right: 10px;
}

.dugme-div span {
  display: block;
}

body {
  background: linear-gradient(rgba(94, 6, 68, 0.91), rgba(3, 144, 187, 0.95), rgba(131, 56, 253, 0.92));
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Kanit', sans-serif;
  color: #FFFFFF;
  width: 100%;
  min-height: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.mytitle {
  font-family: 'Kanit', sans-serif;
  font-size: 3em;
  box-shadow: gold;

  width: 100%;
}

.mytitle:hover {
  font-size: 3.1;
  font-family: 'Kanit', sans-serif;
  box-shadow: rgb(0, 153, 255);
  width: 100%;
}

input {
  font-family: 'Kanit', sans-serif;
}

a,
p,
h1,
h2,
h3,
h4,
h5 {
  font-family: 'Kanit', sans-serif;
  color: coral;
}

a,
a:link,
a:visited,
a:active,
a:active {
  color: #dbe4b3;
  font-family: 'Kanit', sans-serif;
  font-size: 1.25em;
  text-decoration: wavy;
}

.mynav {
  border-bottom: #0390bb;
  -webkit-box-shadow: 0px 20px 34px 16px rgba(36, 180, 255, 0.76);
  box-shadow: 0px 20px 34px 16px rgba(36, 180, 255, 0.76);
  max-width: 100%;
}

.btn-success2 {
  color: #a2c11c;
  font-size: 1em;
}

table,
thead,
th,
td,
tr {
  border: 283739;
  color: #ffffff;
  font-family: 'Kanit', sans-serif;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px;
  /* Use half of the width (120/2 = 60), to center the tooltip */
}

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

.mytable {
  border: #283739;
  border-color: #2d4e47;
  border: solid 1px;
  background-color: #2d4e47;
  text-align: justify;
}

.mytable2 {
  background-color: #010e205b;
  opacity: .92;
  padding: 5px;
  border-radius: 3px;
  box-shadow: 5px, 5px, 50px teal;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Kanit', sans-serif;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

.mytable2 a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
link {
  color: rgb(231, 250, 173);
  font-family: 'Kanit', sans-serif;
}

.mytable2:hover {
  background-color: #0c264b96;
}

.eventbutton {
  width: inherit;
  background: none;
  border: #00ffc8af 1px solid;
  border-radius: 5%;
  box-shadow: 5px, 5px, 5px, #fdec00;
  color: #fdec00;
  width: 200px;
}

.mytable2ad {
  width: 200px;
  border: #01c79c 1px solid;
  box-shadow: 5px 5px #091261;
  scale: .95;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Kanit', sans-serif;
}

.mytable2ad:hover {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  border: #fdec00 1px solid;
  box-shadow: 5px 5px 25px #29023b;
  scale: .99;
  font-family: 'Kanit', sans-serif;
}

.mytable3 {
  text-align: center;
  min-width: 380px;
  max-width: 380px;
  border: #01c79c 1px solid;
  background-color: #321a3db6;
  box-shadow: 5px 5px 5px #8505745b;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Kanit', sans-serif;
  font-weight: lighter;
  overflow: hidden;
  font-size: .95em;
  color: azure;

}

.mytable3 tr,
td,
th,
thead {
  text-align: center;
  min-width: 120px;

}

.mytable3 a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
link {
  color: rgb(161, 225, 245);
  font-family: 'Kanit', sans-serif;
}

.mytable3 a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
link :hover {
  color: rgb(190, 212, 124);
}


.mytable3:hover {
  background-color: #29023b;
  border: #fdec007c 2px solid;
  box-shadow: 5px 5px 5px #fdec004b;
  color: #0390bb;
}

.mytable6 {
  opacity: .91;
  -webkit-box-shadow: 5px 5px 5px 5px #FF8080, -9px 5px 5px 5px #FFE488, -7px -5px 5px 5px #8CFF85, 7px -5px 5px 5px #80C7FF, 7px 10px 5px 7px #E488FF, -5px 5px 5px 7px #FF616B, -5px -7px 7px 1px #8E5CFF, 5px 5px 5px 5px rgba(0, 0, 0, 0);
  box-shadow: 5px 5px 5px 5px #FF8080, -9px 5px 5px 5px #FFE488, -7px -5px 5px 5px #8CFF85, 7px -5px 5px 5px #80C7FF, 7px 10px 5px 7px #E488FF, -7px 5px 5px 7px #FF616B, -5px -7px 7px 1px #8E5CFF, 5px 5px 5px 5px rgba(0, 0, 0, 0);
}

.mytable5 {
  padding: 15px;
  width: 100%;
  max-width: 400px;
  border: #01c79c 1px solid;
  background-color: #29023b;
  box-shadow: 5px 5px 15px #0084d1ec;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Kanit', sans-serif;
  font-weight: lighter;
}

.mytable2 a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
link :hover {
  color: rgb(190, 212, 124);
}

.table-hover {
  border: solid 20px linear-gradient (#8438fd, #01c79c);
}

.table,
.mytablephys {
  width: 280px;
  border-color: 3px solid #01c79c;
}

.granted {
  background: #8ba030;
  color: #283739;
}

.denied {
  background: #7e1f13;
  color: #FFFFFF;
}

.granted:hover {
  background: #41462d;
  color: #9cb3b6;
}

.denied:hover {
  background: #360f0a;
  color: grey;
}

#permissionsHelpBlock {
  color: #FFFFFF;
  font-size: 1em;
}

.grantedbtn {
  background: #4fc96f;
  border: 8px solid #FFFFFF;
  color: #FFFFFF;
}

.deniedbtn {
  background: #7e1f13;
  border: 8px solid #FFFFFF;
  color: #FFFFFF;
}

.grantedbtn:hover {
  background: #8ba030;
  border: 8px solid #FFFFFF;
  color: #FFFFFF;
}

.deniedbtn:hover {
  background: #360f0a;
  border: 8px solid #FFFFFF;
  color: #FFFFFF;
}

.bmax {
  color: #FFFFFF;
  font-size: 1em;
  min-width: 105px;
  max-width: 105px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bmaxid {
  font-size: 2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/css/fonta/svgs/solid/lock.svg");
}

.settings {
  font-size: 2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/css/fonta/svgs/solid/wrench.svg");
}

.settings p {
  visibility: hidden;
  background-position: center;
  transition: visibility:1s;
  background-repeat: no-repeat;
  background-image: url("/css/fonta/svgs/solid/wrench.svg");
}

.settings:hover {
  background-repeat: no-repeat;
  background-image: url("/css/fonta/svgs/solid/wrench.svg");
  background-position: center;
  filter: invert(80%) drop-shadow(-.1rem -.1rem 0.1rem #9e2414);
  color: #FFFFFF;
}

.bmaxid:hover {
  font-size: 2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/css/fonta/svgs/solid/lock.svg");
}

.bmaxid p {
  visibility: hidden;
  background-position: center;
  transition: visibility:1s;
  background-repeat: no-repeat;
  background-image: url("/css/fonta/svgs/solid/lock.svg");
}

.bmaxid.open:active {
  background-repeat: no-repeat;
  background-image: url("/css/fonta/svgs/solid/lock-open.svg");
  background-position: center;
  filter: invert(80%) drop-shadow(-.1rem -.1rem 0.1rem #9e2414);
  color: #FFFFFF;
}

.centered {
  margin-left: auto;
  margin-right: auto;
  width: 365px;
}

table.GeneratedTable {
  margin-left: auto;
  margin-right: auto;
  background-color: #336158;
  border-collapse: separate;
  border-width: 5px;
  border-style: solid;
  color: #ffffff;
}

table.GeneratedTable td,
table.GeneratedTable th {
  border-width: 1px;
  border-style: solid;
  padding: 3px;
}

table.GeneratedTable thead {
  background-color: #325249;
}