@font-face {
  font-family: Brandon Text;
  src: url(fonts/BrandonText-Bold.otf);
  font-weight: bold;
  font-display: swap;
  unicode-range:  U+000-5FF;
}
@font-face {
   font-family: SourceSans;
   src: url(fonts/SourceSans3-Regular.otf.woff2);
   font-display: swap;
   unicode-range: U+000-5FF;
}

@font-face {
   font-family: SourceSans;
   src: url(fonts/SourceSans3-Bold.otf.woff2);
   font-weight: bold;
   font-display: swap;
   unicode-range: U+000-5FF;
}

@font-face {
   font-family: SourceSans;
   src: url(fonts/SourceSans3-It.otf.woff2);
   font-style: italic;
   font-display: swap;
   unicode-range: U+000-5FF;
}

@font-face {
   font-family: SourceSans;
   src: url(fonts/SourceSans3-BoldIt.otf.woff2);
   font-weight: bold;
   font-style: italic;
   font-display: swap;
   unicode-range: U+000-5FF;
}

* {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
           /*
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
          */
          
}

html {
  -webkit-text-size-adjust:100%; /*fix iphone landscape font-size 20px bug */
  overscroll-behavior: none;
}

body {
  font-family:  "SourceSans", "Avenir", "Calibri", "Trebuchet MS", "Lucida Sans", sans-serif;
  font-size: 16px; 
  margin: 0px;
  /*background: linear-gradient(180deg, rgb(25,25,30) 0%, rgb(35,35,40) 65%, rgb(10,10,10) 100%);*/
  background-color:#222;
  overscroll-behavior-y: contain;
}


/* block to prevent pinch zoom and overscroll (pull down to refresh in iOS)*/
/* prevent pull-to-refresh for Safari 16+ */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (overscroll-behavior-y: none)  {
    html {
      min-height: 100.3%;
      overscroll-behavior-y: none;
    }
  }
}
/* prevent pull-to-refresh for Safari 9~15 */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (not (overscroll-behavior-y: none))  {
    html {
      height: 100%;
      overflow: hidden;
    }
    body {
      margin: 0px;
      max-height: 100%; /* or `height: calc(100% - 16px);` if body has default margin */
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* in this case to disable pinch-zoom, set `touch-action: pan-x pan-y;` on `body` instead of `html` */
  }
}

/* prevent pinch-zoom for Chrome 36+, Safari 13+ */
html {
  touch-action: pan-x pan-y;
  min-height: 100%; /* prevent pinch-zoom at page bottom */
}

/* prevent pull-to-refresh for Chrome 63+ */
body{
  overscroll-behavior-y: none;
}

/* end of pinch zoom pull to refresh block */

button, select, input {
  font-family:  "SourceSans", "Avenir", "Calibri", "Trebuchet MS", "Lucida Sans", sans-serif;
}

select {
  height: 30px;
  width:120px;
  border: 1px solid #aaa;
  margin: 2px 0px 2px 0px; 
  padding:0px 2px; 
  outline: none;
  vertical-align:bottom;
  border-radius:4px;
  	color:#fff;
	background:#303030;
}

select:focus {
  border: 1px solid rgba(81, 203, 238, 1);
  box-shadow: 0 0 6px rgba(81, 203, 238, 1);
}


input[type=number] {
  color: #fff;
  background: #303030;
}

input {
  color: #fff;
  background: #222; 
  position:relative;
  height: 30px; margin: 2px 4px 2px 0px; 
  padding:2px;
  /*padding-right:20px;*/
  vertical-align:middle;
  border:1px solid #555;
  outline: none;
  text-align:center;
  -moz-appearance:textfield;
  border-radius:4px;
}


h1 {
  color: white;
  font-size: 3rem;
  font-weight: bold;
  font-family: "Brandon Text", "Avenir", "SourceSans", "Calibri", "Trebuchet MS", "Lucida Sans", sans-serif;
  border-bottom: 10px solid transparent;
  border-image: linear-gradient(90deg, #198964 , transparent);
  border-image-slice: 1;
}

h2 {
  font-family: "Brandon Text", "Avenir", "SourceSans", "Calibri", "Trebuchet MS", "Lucida Sans", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  font-style: italic;
  color: #ddd;
}

h3 {
  font-size: 1rem;
  font-weight: normal;
  color:#ddd;
}

h4 {
  font-size: 1rem;
  font-weight: bold;
  font-style: italic;
  color: #198964;
  background: #eee;
}

/*buttons */
a.button {
  border-radius:2em;
  min-width:95px;
  text-align:center;
  border:1px solid #198964;
  display:inline-block;
  transition: all 0.2s ease;
  color:#198964;
  background-color:white;
  text-decoration:none;
  font-weight:bold;
  padding:5px;
  margin-right:5px;
  outline:0;
  cursor:pointer;
}
a.button.invert {
  background:#198964;
  color:white;
}
a.button.custom {
  min-width:50px;
}
a.button.wide {
  min-width:45%;
}
a.button.huge {
  width:90%;
  font-size:130%;
  color:#555;
  background:#eee;
  padding-left:10px;
  border-radius:6px;
  text-align:left;
  border:2px solid #ccc;
  margin:0.7rem 0rem 0.7rem 0rem;
}
a.button.huge > i {
  float:right;
  padding-right:5px;
  font-size: 28px;
}
a.button.huge:hover, a.button.huge:active {
  color:#eee;
  background:#555;
  border-color:#555;
}
a.button.disabled {
  border-color:rgb(220,220,220);
  color:rgb(190,190,190);
  background-color:rgb(240,240,240);
}
a.button.bolus {
  padding:2px;
  background: linear-gradient(0deg, rgba(255,255,255,1) 55%, rgba(90,90,90,1) 55%, rgba(240,240,240,1) 56%);
  min-width: 85px;
}
a.button:hover, a.button:active {
  background:#198964;
  color:white;
}
a.button.muted {
  /*border-color:rgb(155, 201, 157);
  color:rgb(155, 201, 157);*/
  border-color: rgba(128,128,128,0.5);
  color: rgba(128,128,128,0.8);
  min-width: 0px;
  padding-left: 15px; padding-right: 15px;
}

.right {
  float:right;
}
a.button.invert:hover, a.button.invert:active {
  color:#198964;
  background-color:white;
}
a.button.muted:hover, a.button.muted:active {
  /*border-color:#4CAF50;*/
  /*background-color:rgb(155, 201, 157);*/
  background-color: rgba(128,128,128,0.5);
  color:white;
}
a.button.disabled:hover, a.button.disabled:active {
  border-color:rgb(220,220,220);
  color:rgb(190,190,190);
  background-color:rgb(240,240,240);
  cursor:not-allowed;
  pointer-events: none;
}

a.button.tinybutton {
  color: #ddd;
  background-color: rgba(128,128,128,0.15);
  border-color: rgba(128,128,128,0.15);
  font-size: 90%;
  padding: 2px 14px 2px 14px;
  margin-right: 0;
}
a.button.tinybutton:hover, a.button.tinybutton:active {
  background-color: rgba(128,128,128,0.5);
  border-color: rgba(128,128,128,0.7);
  color:#fff;
}
a.button.tinybutton > i {
  padding-right: 3px;
}
#div_timer_controls {
  display:none;
}
.iconbutton {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  cursor:pointer;
}
.iconbutton .icon {
  font-size:2rem;
  border:1px solid #666;
  border-radius:9rem;
  width:4rem;
  height:4rem;
  text-align:center;
  padding-top:11px;
}
.iconbutton a.tinybutton, .iconbutton a.tinybutton:hover, .iconbutton a.tinybutton:active {
  background:transparent;
  border-color:transparent;
  color:#666;
}
.iconbutton:hover .icon {
  background:#eee;
  color:#666;
}
.iconbutton:hover a.tinybutton, .iconbutton:hover a.tinybutton:hover, .iconbutton:hover a.tinybutton:active {
  background:#555;
  border-color:transparent;
  color:#eee;
}

#startbutton1 {
  gap:0;
  padding-top:10px;
}
#startbutton1 .icon {
  font-size:1.5rem;
  padding-top:6px;
  width:3rem;
  height:3rem;
}
#startbutton1 a.button.tinybutton {
  min-width:0;
}
#main-body {
	color:#eee;
}

#status {
	padding:10px;
	border-bottom: 3px solid #198964;
}

#page_msg {
	display:none;
    height: 100px;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #198964;
    background: black;
    color: #666;
    font-size: 0.8rem;
    overflow-y: scroll;
}

#page_start {
	display: flex;
	justify-content:center;
	align-items:center;
	height:80vh;
	opacity:0;
}

#page_start_inner {
	padding:40px 20px 0 20px;
	width:65%;
	color:#999;
}

#page_admin {
	display:none;
	margin:10px;
	padding:10px;
	background: #303030;
	border: 1px solid #555;
	border-radius:16px;

  box-shadow:0px 20px 25px -25px rgb(128,128,128,0.5) inset;
}

#page_admincontrols {
  display:none;
  margin:10px;
  padding:10px;
  background: #303030;
  border: 1px solid #555;
  border-radius:16px;

  box-shadow:0px 20px 25px -25px rgb(128,128,128,0.5) inset;
}

#page_receiver {
	display:none;
	margin:10px;
	padding:10px;
	background: #303030;
	border: 1px solid #555;
	border-radius:16px;
  box-shadow:0px 20px 25px -25px rgb(128,128,128,0.5) inset;
}

.section {
	padding:10px 0;
}

.section.line {
	border-bottom: 1px solid #555;
}

#div_timer {
	display:none;
	justify-content:center;
	align-items:center;
	height:40vh;
	flex-direction:column;
}

#div_timer.FS {
  height:95vh;
}


#div_timer.FS #timer_display {
  font-size:6rem;
}

#div_timer_inner {
	width:75%;
	height:auto;
	margin:10px;
	padding:10px;
	background: #303030;
	border: 1px solid #555;
	border-radius:16px;
	background:#eee;
	color:black;
	text-align:center;
}

#div_timer_controls_receiver {
  display:none;
  width:75%;
  justify-content:flex-end;
  gap:10px;
}

#timer_display {
	font-size:3rem;
	font-weight:bold;
}

#timer_display.pause {
  opacity:0.5;
}

#timer_status.pause {
  color:red;
}



/*modal css*/
.modal {
    display: block; 
    position: fixed; 
    z-index:98;
    padding-top: 15vh; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
    opacity:0;
    transition: opacity 0.3s ease-in-out;
    will-change:opacity;
    pointer-events:none;
}


.modal.fadein {
  opacity:1;
  pointer-events:auto;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fcfcfc;
    margin: auto;
    padding: 0;
    font-size: 0.9rem;
  border-radius: 15px;
  border: 1px solid #fff;
      
    width: 85%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4),0 6px 20px 0 rgba(0,0,0,0.19), inset 0px -4px 0px 0 rgba(0,0,0,0.15);
    -webkit-transform: translateY(-150%);
    transform: translateY(-150%);
    transition: transform 300ms ease-in-out;
    will-change:transform;
    overscroll-behavior: contain;
    /*-webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;*/
}

.modal-content.open {
  -webkit-transform: none;
      transform: none;
  transition: transform 300ms ease-in-out;
}

.modal.full {
  padding-top: 5vw;
}

.close {
    color:grey;
    float: right;
    font-size: 28px;
    font-weight: bold;
}


.close:hover,
.close:focus {
    color:#198964;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 15px 16px 2px 12px;
    border-radius: 15px 15px 0px 0px;
    box-shadow:0px 6px 8px -5px rgb(0 0 0 / 15%);
    
    /*background-color: #5cb85c;*/
    background-color: #198964;
    color:grey;
    background:#fefefe;
    font-size:120%;
    line-height:30px;
    font-weight:bold;
}

.modal-body {
  padding:12px;
  padding-bottom:20px;
  overflow-y:auto; 
  max-height: 70dvh;
}

.modal.full .modal-content {
  width: 90%;
}
.modal.full .modal-body {
  max-height: 81dvh;
}

.chatbox_input {
  width:100%;
  border:1px solid #ccc;
  color:black;
  background:white;
  text-align:left;
}

.chatbox_author_self {
  color:red;
  font-style:italic;
}

.chatbox_author_else {
  color:blue;
  font-style:italic;
}

#div_userslist {
  display:flex;
  gap:10px;
}

@media (max-width:599px) {
	#page_start_inner {
		width:100%;
		font-size:0.9rem;
	}
	h1 {
		font-size:2.2rem;
	}
  h2, h3 {
    padding:5px 0;
    margin:5px 0;
  }
  .section {
    padding:5px 0;
  }
}