#location { display: none; }

body { padding: 0px; margin: 0px; font-family: 'Open Sans', sans-serif, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; }

a, a:link, a:visited, a:hover, a:active { text-decoration: none; color: #111; }

header { height: 50px;  background: #777; position: relative; }
a.logo { height: 30px !important; line-height: 30px; font-size: 30px; color: #eee; position:absolute; top: 10px; left: 10px; padding: 0px; margin: 0px; display: block; }
.logo span { color: #ccc; }
.logo { font-family: 'Anton', sans-serif; }
.nav { float: right; padding: 0px; margin: 0px; }


.mobile_nav { width: 40px; position: relative; padding: 8px; cursor: pointer;height: 36px; z-index: 10; }
.mobile_nav span { border-radius: 3px; float: left; width: 100%; display: block; height: 8px; margin-top: 2px; margin-bottom: 2px; background: #444; }
.wrapper { margin: auto; padding: 40px; }
h1 { font-size: 20px; font-weight: 600; text-align: center; padding-bottom: 20px; padding-top: 20px; }
p { padding-bottom: 15px; font-size: 14px; }

#location { position: absolute; opacity: .7; bottom: 5px; right: 0px; color: #FFF; background: #111; padding: 6px 10px; z-index: 90; border-radius: 6px 0px 0px 0px; }

#bytes { position: absolute; opacity: .7; bottom: 5px; left: 0px; color: #FFF; background: #111; padding: 6px 10px; z-index: 90; border-radius: 6px 0px 0px 0px; }


#status { position: absolute; opacity: .7; top: 0px; left: 0px; color: yellow; background: #111; padding: 6px 10px; z-index: 90; border-radius: 0px 0px 6px 0px; }
#status .dot { display: block; float: left; width: 10px; height: 10px; border-radius: 5px; margin-right: 8px; opacity: .6; margin-top: 5px; }
#status .dot.red_dot { background: red; } 
#status .dot.yellow_dot { background: yellow; } 
#status .dot.green_dot { background: green; } 
#video_chat { overflow: hidden; height: 0px; }
#remote_load { width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: 80; opacity: .35; }
#remote_load img { width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; }

.textarea_wrapper {  background: #ccc; 
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}

button { outline:none; }

.footer { padding: 15px; text-align: center; }
.footer ul { display: block; padding: 0px; }
.footer ul li { display: inline-block;  margin: 0px 12px; }
.footer .social { text-align: center; font-size: 24px; margin: 0px 6px; }


@media (min-width: 895px) { 
 .mobile_nav { display: none; }
 ul.nav { display: block; margin-right: 15px; }
 ul.nav li { float:left; display: block; padding:17px 8px; font-size: 16px; height: 16px; }
 ul.nav li a { color: #fff; font-weight: 900; }
 
 .video_chat_inner { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; background: #fff; }

.video_div video { position:absolute; width: 100%; height: 100%; }
#video_chat { background: #eee; height: 10px; width:100%; position: relative; }
#videos { border-right: #eee 10px solid; background: #fff; position: absolute; top: 0px; width: 100px; bottom: 0px; left: 0px; }
#remoteVideoDiv { position: absolute; top: 0px; left: 0px; right: 0px; overflow:hidden; background: #111; }
#localVideoDiv { position: absolute; bottom: 0px; left: 0px; right: 0px; overflow:hidden; background: #111; }
#video_sep { z-index: 500; height: 10px; width: 100%; background: #eee; position:absolute; top: calc(50% - 5px); }

#text { position: absolute; background: #fff; height: 100%; right: 0px; bottom: 0px; top: 0px; }
#text-from { padding: 10px; background: #fefefe; top: 75px; position:relative; z-index: 20; box-sizing:border-box; width: 100%; overflow:auto; }
.text-line { padding: 3px 0px; }
.textarea_wrapper { position: absolute; bottom: 20px; left: 20px; right: 20px; height: 50px; resize:none; border: #ccc 2px solid; width: calc(100% - 40px); box-sizing: border-box; border-radius: 10px; }
.textarea_wrapper textarea { font-family:Arial, Helvetica, sans-serif; font-size: 21px; position:absolute; height: 100%; width: 100%; resize: none; border: 0px; outline-width: 0;  margin: 0px; padding: 9px; box-sizing: border-box;  color: #333; border-radius: 10px; opacity: .7;}
.buttons { z-index: 21; }
#reroll { position: absolute; top: 10px; left: 100px; width: 80px; height: 50px }
#stop { position: absolute; top: 10px; left: 10px; width: 80px; height: 50px }
#start { position: absolute; top: 10px; left: 10px; width: 80px; height: 50px }
#submit { position: absolute; bottom: 20px; right: 20px; width: 80px; height: 50px }

.link_bar { width: 100%; position: relative; background: #a5cc52; height: 40px; }
.link_bar a { display: block; text-align: center; font-size: 20px; height: 26px; padding: 7px 0px; margin: 0px; line-height: 26px;  }

.text-line .who { font-weight: bold; }
.them-text .who { color: red; }
.you-text .who { color: blue; }
.get_started { position:absolute; right: 0px; top: 0px; opacity:.85; height: 100%; background: #fff; width: 100%; z-index: 500; box-sizing:border-box; text-align: center; padding: 25px; }
}

@media (max-width: 895px) { 
 body.mobile_nav_open { position:absolute; left: 250px; }
 a.logo { left:0px; right: 10px; width: 100%; text-align: center; }
 ul.nav { position: absolute; width: 250px; left: -1000px; display: block; background: #999; z-index: 10; }
 ul.nav li {  display: block; padding:0px; font-size: 16px; height: auto; border-bottom: #666 2px solid; }
 ul.nav li a { color: #fff; font-weight: 900; display: block; width: 100%; padding:17px 8px !important; }
 body.mobile_nav_open ul.nav { position: fixed; top: 0px; left: 0px; }

#video_chat { background: #000; height: 10px; width:100%; position: relative; }
.video_div video { width: 100%; height: 100%; position:absolute; top: 0px; left: 0px; min-width: 100%; }
 #remoteVideoDiv { position:absolute; width: 100%; top: 0px; left: 0px; overflow: hidden; min-width: 100%; }
 #localVideoDiv {  position: absolute; bottom: 50px; left: 0px; width: 200px; height: 150px; z-index: 100; overflow:hidden;  border: #000 5px solid; box-sizing: content-box; border-left: 0px; border-bottom: 0px;  }
#text { bottom: 0px; padding: 0px;  position:absolute; width: 100%; z-index: 100; height: 100%; }
#video_sep { display: none; }
#submit { outline-width: 0; position: absolute; bottom: 5px; right: 5px; width: 80px; height: 40px; padding: 6px 0px; }
#reroll { outline-width: 0; position: absolute; bottom: 55px; right: 5px; width: calc((100% - 220px) / 2); height: 60px; padding: 6px 0px; font-size: 16px; }
#stop { outline-width: 0; position: absolute; bottom: 55px; right: calc(((100% - 220px) / 2) + 10px); width: calc((100% - 220px) / 2); height: 60px; padding: 6px 0px; font-size: 16px; }

#start { outline-width: 0; position: absolute; bottom: 55px; right: 5px; width: calc((100% - 210px)); height: 60px; padding: 6px 0px; font-size: 16px; }

.textarea_wrapper { position:absolute; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 49px; border-top: #aaa 1px solid; }
textarea { background: #ccc; font-size: 20px; position: absolute; bottom: 5px; left: 5px; height: 26px; padding: 6px; margin: 0px; border: #555 1px solid; width: calc(100% - 110px); resize: none; border-radius: 4px; border: 0px; opacity: .75 }
#text-from { position:absolute; bottom: 205px; padding: 0px 15px; overflow: auto; width: calc( 100% - 30px); }
.text-line { float:left; clear: both; background: #111; color: #fff; padding: 5px; opacity: .7; border-radius: 8px; margin: 4px 0px; }
.them-text-line { float: right; color: #e8effc; }
.who { display: none; }
.system { color: yellow; }
iframe { max-width: 100%; overflow: hidden;}
.link_bar { width: 100%; position: relative; background: #a5cc52; height: 40px; }
.link_bar a { display: block; text-align: center; font-size: 20px; height: 26px; padding: 7px 0px; margin: 0px; line-height: 26px;  }
.get_started { position: absolute; background: #111; width: 100%; height: 100%; left: 0px; z-index: 600; opacity: .8; color: #fff; text-align:center; }
.get_started h2 { font-size: 30px; padding: 20px; text-align:center; }
.get_started h2 span { color: green; }
.get_started p { font-size: 22px; padding: 20px; text-align:center; }
.get_started button { font-size: 24px; margin: auto; text-transform:uppercase; padding: 14px; }

.footer { padding: 5px; text-align: center; }
.footer ul { display: block; padding: 0px; }
.footer ul li { display: inline-block;  margin: 4px 5px; }
}

.tnz {-webkit-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease; }
.hide { display: none !important; }
.green_button {
	-moz-box-shadow:inset 0px 1px 0px 0px #d9fbbe;
	-webkit-box-shadow:inset 0px 1px 0px 0px #d9fbbe;
	box-shadow:inset 0px 1px 0px 0px #d9fbbe;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #a5cc52));
	background:-moz-linear-gradient(top, #b8e356 5%, #a5cc52 100%);
	background:-webkit-linear-gradient(top, #b8e356 5%, #a5cc52 100%);
	background:-o-linear-gradient(top, #b8e356 5%, #a5cc52 100%);
	background:-ms-linear-gradient(top, #b8e356 5%, #a5cc52 100%);
	background:linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#a5cc52',GradientType=0);
	background-color:#b8e356;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #83c41a;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:'Open Sans', sans-serif;
	font-size:15px;
	font-weight:900;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #86ae47;
}
.green_button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a5cc52), color-stop(1, #b8e356));
	background:-moz-linear-gradient(top, #a5cc52 5%, #b8e356 100%);
	background:-webkit-linear-gradient(top, #a5cc52 5%, #b8e356 100%);
	background:-o-linear-gradient(top, #a5cc52 5%, #b8e356 100%);
	background:-ms-linear-gradient(top, #a5cc52 5%, #b8e356 100%);
	background:linear-gradient(to bottom, #a5cc52 5%, #b8e356 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cc52', endColorstr='#b8e356',GradientType=0);
	background-color:#a5cc52;
}


.orange_button {
	-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25));
	background:-moz-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:-webkit-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:-o-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:-ms-linear-gradient(top, #ffc477 5%, #fb9e25 100%);
	background:linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25',GradientType=0);
	background-color:#ffc477;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #eeb44f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #cc9f52;
}
.orange_button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477));
	background:-moz-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:-webkit-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:-o-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:-ms-linear-gradient(top, #fb9e25 5%, #ffc477 100%);
	background:linear-gradient(to bottom, #fb9e25 5%, #ffc477 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477',GradientType=0);
	background-color:#fb9e25;
}

.red_button{
border:1px solid #ff6262; -webkit-border-radius: 6px; -moz-border-radius: 6px;border-radius: 6px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #ff9a9a; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9a9a), to(#ff4040));
 background-image: -webkit-linear-gradient(top, #ff9a9a, #ff4040);
 background-image: -moz-linear-gradient(top, #ff9a9a, #ff4040);
 background-image: -ms-linear-gradient(top, #ff9a9a, #ff4040);
 background-image: -o-linear-gradient(top, #ff9a9a, #ff4040);
 background-image: linear-gradient(to bottom, #ff9a9a, #ff4040);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff9a9a, endColorstr=#ff4040);
}

.red_button:hover{
 border:1px solid #ff3434;
 background-color: #ff6767; background-image: -webkit-gradient(linear, left top, left bottom, from(#ff6767), to(#ff0d0d));
 background-image: -webkit-linear-gradient(top, #ff6767, #ff0d0d);
 background-image: -moz-linear-gradient(top, #ff6767, #ff0d0d);
 background-image: -ms-linear-gradient(top, #ff6767, #ff0d0d);
 background-image: -o-linear-gradient(top, #ff6767, #ff0d0d);
 background-image: linear-gradient(to bottom, #ff6767, #ff0d0d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff6767, endColorstr=#ff0d0d);
}

.checkbox-container {
    display: flex;
    align-items: flex-start; /* Ensures checkbox stays aligned with top of text */
    text-align: left;
    max-width: 80%;
    margin: auto;
    padding-top: 10px;
}

@media (min-width: 1280px) { /* For wider screens */
    .checkbox-container {
        max-width: 50%;
    }
}

.checkbox-container input[type="checkbox"] {
    width: 20px; /* Bigger checkbox */
    height: 20px;
    transform: scale(1.2);
    margin-right: 15px; /* Adds spacing between checkbox and text */
    flex-shrink: 0; /* Prevents checkbox from resizing */
}

.checkbox-text {
    display: inline-block; /* Ensures text wraps properly beside checkbox */
    vertical-align: top; /* Aligns text to the top of the checkbox */
	font-size: 16px; /* Consistent font size for both mobile and desktop */
}