* {
    box-sizing: border-box;
}


/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-half{width: 4.17%;}
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 1000px) {
    /* For desktop: */
    .col-l-half{width: 4.17%;}
    .col-l-1 {width: 8.33%;}
    .col-l-2 {width: 16.66%;}
    .col-l-3 {width: 25%;}
    .col-l-4 {width: 33.33%;}
    .col-l-5 {width: 41.66%;}
    .col-l-6 {width: 50%;}
    .col-l-7 {width: 58.33%;}
    .col-l-8 {width: 66.66%;}
    .col-l-9 {width: 75%;}
    .col-l-10 {width: 83.33%;}
    .col-l-11 {width: 91.66%;}
    .col-l-12 {width: 100%;}
}
@media only screen and (min-width: 1800px) {
    /* For desktop: */
    .col-xl-half{width: 4.17%;}
    .col-xl-1 {width: 8.33%;}
    .col-xl-2 {width: 16.66%;}
    .col-xl-3 {width: 25%;}
    .col-xl-4 {width: 33.33%;}
    .col-xl-5 {width: 41.66%;}
    .col-xl-6 {width: 50%;}
    .col-xl-7 {width: 58.33%;}
    .col-xl-8 {width: 66.66%;}
    .col-xl-9 {width: 75%;}
    .col-xl-10 {width: 83.33%;}
    .col-xl-11 {width: 91.66%;}
    .col-xl-12 {width: 100%;}
}

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}
.row{
	margin-bottom: 40px;

}
.row::after {
    content: "";
    clear: both;
    display: table;
}

.index, .add{
	background-color: #fff;
	margin:30px auto;
	width:80%;
	border-radius: 5px;
	padding:10px;
}
.index h1{
	text-align: center;
	color: green;
}
.index table{
	width:80%;
	margin:0 auto;
	padding: 40px 0 30px 0 ;
}
.index table th{
	text-align: left;
	font-size: 110%;
	border-bottom: 1px solid #666;

}

/*basic text/container styles*/
.primary {
	background-color: white;
	font-size:20px;
	border-radius: 5px;
	border: 1px solid #999;
	font-family: 'Lato', sans-serif;
}
.blank{
	background-color: none;
	border:none;
}
.flash{
	background-color: #fff;
}
.button {
  display: flex;
  overflow: hidden;

  margin: 10px;
  padding: 6px 12px;

  cursor: pointer;
  user-select: none;
  transition: all 60ms ease-in-out;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  text-transform: none;
  text-transform: capitalize;

  color: #fff;
  border: 0 none;
  border-radius: 4px;

  font-size: 100%;
  font-weight: 500;
  line-height: 1.3;

  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
 
  justify-content: center;
  align-items: center;
  flex: 0 0 160px;
}
  .button:hover {
    transition: all 60ms ease;

    opacity: .85;
  }
  
 .button:active {
    transition: all 60ms ease;
    opacity: .75;
  }
  
 .button:focus {
    outline: 1px dotted #959595;
    outline-offset: -4px;
  }


.button.-regular {
  color: #202129;
  background-color: #edeeee;
  }
 .button.-regular:hover {
    color: #202129;
    background-color: #e1e2e2;
    opacity: 1;
  }
  
 .button.-regular:active {
    background-color: #d5d6d6;
    opacity: 1;
  }
  
.button.-green {
  color: #FFFFFF;
  background: #3ac569;
}
#logo{
	font-size:60px;
}
#logo i {
  font-family: 'Norican', cursive;
	color: #EEDDE0;
	/*
	text-shadow: 0 0 30px #EC637B, 
		0 0 10px rgba(230, 161, 173, 0.41), 
		0 0 100px #E6A1AD, 
		0 0 500px #F36780, 
		5px 9px 5px rgba(0, 0, 0, 0.5);
		*/
}

#logo i.flick_off {
	color: rgba(46, 46, 46, 0.61);
	text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
}
/*end basic styles */




/*new or load game */
.logbox{
	height:220px;
	float:none;
	margin-top: 100px;
	text-align: center;

}
.logbox label{
	display: block;
}
@media only screen and (min-width: 1000px) {
	.logbox{
		width:400px;
	}
	.logcode{
		float:right;
	}
}
.info{
	float:none;
	margin:0 auto;
	text-align: left;
}
.logbox input[type="submit"]{margin:10px auto;}
.create_player input[type="submit"]{margin:10px auto;}
.info h2
{
	text-align: center;
}

.infotab{
	display: none;
	min-height: 500px;
}
.tabs{
	background-color: #e5e5e5;
	padding:10px 0;
	
}
.tabs a, .tabs a:visited, .tabs a:active {
color:#333;
text-decoration: none;
padding:10px;
background-color: #e5e5e5;

}
.tabs a:hover, .tabs a.active:hover{
	background-color: #999;
}
.tabs a.active{
	background-color: #666;
	color:#fff;
}
.contributeformdiv{
	text-align: center;

}
.contributeformdiv label{
	display: block;
}
.contributeformdiv textarea{
	width:80%;
	min-width: 400px;
}
/* end new or load */




/*login page*/


.reglink{
	margin: 50px auto 0 auto;
	width: 80%;
}

.register p{
	font-size: 18px;
	text-align: center;
	margin:25px 0 0 0;
}
.login, .register{
	background-color: #fff;
	float: left;
	border-radius: 5px;
	padding:20px;
	width:100%;
	margin:60px auto 20px auto;
	min-height: 280px;

}
.login input[type="text"], .login input[type="password"] {
	
	width: 100%;
	}
.login label
{
	display:block;
}
@media only screen and (min-width: 800px) {

	.login{
		float:right;
	}
	.login, .register{
		width:360px;
	}

}
.login h1, .register h1{
	margin:8px;
	text-align: center;
	}
.login{

}
.register{

}

.index.registration
{
	width: 90%;
}
/* user registration */
.index.registration.regform{
	max-width: 700px;
	margin:0 auto;
	padding:10px 30px;

}
 .index.registration.regform input[type="text"], .index.registration.regform input[type="password"], .index.registration.regform textarea{
width: 100%;
 	}
.index.registration p{
	font-size:20px;
	margin:10px 7%;
}
.index.registration h1{
	color: #666;
}
.index.registration h1 b{
  font-family: 'Norican', cursive;
color: #EED0d9;

}
.index.registration label{
	display:block;
}
.index.registration.regform .input
{
	margin-top: 30px;
}
 input[type="text"], input[type="password"]{
    width: 270px;
    padding: 10px 25px;

    font-weight: 400;
  	font-size:110%;
    color: #9D9E9E;
    text-shadow: 1px 1px 0 #FFF;
    background: #FFF;
    border: 1px solid #FFF;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
}
 input[type="text"]:focus, input[type="password"]:focus { 
    background: #DFE9EC;
    color: #414848;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    outline: 0;
}
 input[type="text"]:hover, input[type="password"]:hover { 
    background: #DFE9EC;
}
select{
	    padding: 10px 25px;
text-align: center;
    font-weight: 400;
  	font-size:110%;
    color: #333;

    background: #eaeaea;
    border: 1px solid #333;
    border-radius: 5px;
  /*  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
    */
}
select[multiple]{
	height:300px;
}
textarea{
	    width: 270px;
    padding: 10px 25px;
    height:100px;
    font-weight: 400;
  	font-size:110%;
    color: #9D9E9E;
 
    background: #FFF;
    border: 1px solid #666;
    border-radius: 5px;
}
@media only screen and (min-width: 700px) {
	.userlink{	
		position:absolute;
		top:0;
		right:0;
		margin: 90px 0 0 0;
	}
}
.userlink{
	display: block;
	color:#fff;
	font-size: 26px;
	
}
.userlink a:visited, .userlink a:active, .userlink a{
	color:#fff;
	text-decoration: none;
	font-size: 18px;
	font-style: italic;
}
.userlink a:hover{
color:green;
	}

/*Dare Index*/
#filters{
	background-color: #9BEDFE;
	border: solid 1px #D2D2D2;
}
#filter_inputs:after {
  content: "";
  display: table;
  clear: both;
}
#filter_inputs label{
	display: block;
	text-align: center;
	font-weight: bold;
}
#filters .input{
	float:left;
margin:0 30px;
}
#filters .submit{
	margin:80px  0 0 0;
	padding: 0 0 20px 0;
}
#filters select{
	height:auto;
	overflow: auto;
	padding: 1px;
}
#filters select option {
   color: black;
  	padding:2px 20px;
}
#filtered_dares table tr:nth-child(even) {background: #d2d2d2}

#dare_ph div:hover{
	cursor: pointer;
	background-color: #d2d2d2;
}


/*Dare edit*/
.add label{
	display: block;
}
div.textarea{
	width:100%;
}
div.textarea textarea{
	width: 100%;
	height: 200px;
}
.create_player .number_players_container{
	text-align: center;
	margin:0 auto;
}
.create_player .number_players.selected{
		border: 1px solid #8fb2bc;
	 background: #DFE9EC;
	 opacity: 1;
}
.create_player .number_players{
	width: 50px;
	height: 50px;
	border:1px solid #999;
	border-radius: 5px;
	display: inline-block;
	padding:10px 0 0 0;
	margin:0 5px 5px  0;
	opacity: .5;
	cursor: pointer;
	
}
/*create new player for game*/
.create_player{
	background-color: white;
	float:none;
	margin:0 auto;
	max-width: 500px;
	padding:20px;
	font-size:22px;
	border-radius: 5px;
	border: 1px solid #999;
	font-family: 'Lato', sans-serif;
}

.button.center{
	margin: 0 auto;
}
.create_player h2{
	text-align: center;
	margin:0 auto;
	padding:0 0 20px 0;
}
.create_player .player_item{
	margin:10px 5px;
}
.br{
	height: 2px;
	width: 95%;
	margin:0 auto;
	border-bottom: solid 2px #666;
	display:block;
}
.create_player label{
	
	text-transform: capitalize;
	display: block;
}
.create_player .sub{
	font-size:18px;
	font-style: italic;
	text-transform: none;
}
.create_player input[type="text"]{
    width: 270px;
    padding: 10px 25px;

    font-weight: 400;
  	font-size:24px;
    color: #9D9E9E;
    text-shadow: 1px 1px 0 #FFF;
    background: #FFF;
    border: 1px solid #FFF;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50);
}
.create_player input[type="text"]:focus { 
    background: #DFE9EC;
    color: #414848;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    outline: 0;
}
.create_player input[type="text"]:hover { 
    background: #DFE9EC;
    color: #414848;
}
.create_player .genderimage{
	height: 75px;
	border: 1px solid #999;
	border-radius: 5px;
	opacity: .5;
}
.create_player .genderimage.selected{
	border: 1px solid #8fb2bc;
	 background: #DFE9EC;
	 opacity: 1;
}
.create_player .player_clothing, .create_player .player_actions, .create_player .game_objects{
	height:150px;
	border:1px solid #999;
	border-radius: 5px;
	overflow: auto;
	font-size: 20px;
	padding:5px;
}
.create_player .player_clothing .clothing_item, .create_player .player_actions .action_item, .create_player .game_objects .object_item{
cursor: pointer;
}
.create_player .player_clothing .clothing_item:hover, .create_player .player_actions .action_item:hover, .create_player .game_objects .object_item:hover{
	 background: #DFE9EC;
}
.create_player .player_clothing .clothing_item.selected, .create_player .player_actions .action_item.selected, .create_player .game_objects .object_item.selected{
	background: #DFE9EC;
	
}
.create_player .player_clothing .clothing_item.selected:after,  .create_player .player_actions .action_item.selected:after, .create_player .game_objects .object_item.selected:after{
  content: '\f00c';
  font-family: FontAwesome;
  padding: 0 0 0 5px;
  font-size:20px;
}
.create_player .player_colors{
	width:250px;
}
.create_player .player_color{
	width: 50px;
	height: 50px;
	border:1px solid #999;
	border-radius: 5px;
	display: block;
	float:left;
	margin:0 5px 5px  0;
	opacity: .5;
}
.create_player .player_color.selected{
	opacity: 1;
	border: 1px solid blue;
}
.create_player .player_color.selected:after{
  content: '\f00c';
  font-family: FontAwesome;
position: relative;
top:12px;
left:9px;
  font-size:26px;
  color:#fff;
	}
.create_player .player_color:hover{
	cursor: pointer;
	opacity: 1;
}
.create_player .player_icons{
	width:250px;
}
.create_player .player_icon{
	width: 50px;
	height: 50px;
	border:1px solid #999;
	border-radius: 5px;
	display: block;
	float:left;
	margin:0 5px 5px  0;
	opacity: .5;
}
.create_player .player_icon img{
	height: 50px;
}
.create_player .player_icon.selected{
	opacity: 1;
	border: 1px solid blue;
}
.create_player .player_icon:hover{
	cursor: pointer;
	opacity: 1;
}
.create_player .player_icons:focus, .create_player .player_colors:focus, .create_player .genderimage:focus{
	outline:none;
}
.create_player .player_interact{
	display:inline-block;
	border-right: 1px solid #999;
	padding:0 20px 0 20px;
	margin:15px 0 15px 0;

}

.create_player .player_interact:last-of-type{
	border-right: none;
}
.create_player .player_interact.disabled{
	opacity:.3;
}
.create_player .player_interact h4{
	padding:0 0 10px 0;
	margin:0;
}

/* custom select */
.custom_select {
		height:150px;
	border:1px solid #999;
	border-radius: 5px;
	overflow: auto;
	font-size: 20px;
	padding:5px;
}
.custom_select .item:hover{
	 background: #DFE9EC;
	 cursor: pointer;
}
.custom_select .item.selected{
	background: #DFE9EC;
	
}
.item.selected:after{
  content: '\f00c';
  font-family: FontAwesome;
  padding: 0 0 0 5px;
  font-size:20px;
}