/*-----------------------
NPCS
-----------------------*/
#npcs,.npcs{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: left; gap:10px; margin-top: 20px; }
	.npccard{
		width: 250px;
		height: 404px;
		border-radius: 25px;
		background-image: var(--color-gray-gradient) ;
		overflow: hidden;
		text-align: center;
		color: var(--color-text);
		box-shadow: 3px 8px 15px rgba(0,0,0, 0.25);
		transition: all 0.1s;
	}
	.npccard.wide{width: 500px;}
	.npcc_overview,.npcc_specifications {padding: 16px;text-align: center;}
	.npcc_overview{
		background-image: linear-gradient(176deg, var(--color-main-light), var(--color-main));
		position: relative;
		height: 154px;
		padding-bottom: 70px; /*60px due to pic*/
	}
	.npc_name h1{font-size: 20px;  	}
  	.npc_race{font-size: 0.8em; font-style: italic;}
  	.npccard .plats{margin-top: 10px; line-height: 150%;}
	.npcc_specifications {
		position: relative;
		padding-top: 70px; /*60px due to pic*/
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: relative;
		height: 250px;
	}
	.npc_pic{
		width: 120px;
		height: 120px;
		border-radius: 50%;
		padding: 3px;
		background-image: linear-gradient(to right bottom, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
		overflow: hidden;
		box-shadow: 0px 0px 10px rgba(255,255,255, 0.5);
		position: absolute;
		bottom: -60px;
		left: calc(50% - 60px);	/*bredded (350)/2 - 60*/
		z-index: 10;
		transition: all 0.2s;
	}
	.npccard .npc_pic:hover{box-shadow: 0px 0px 15px rgba(255,255,255, 0.8);cursor: pointer;}
	.npccard.empty .npc_pic{ background-image: unset; background-color: rgba(255,255,255,0.2); border: 3px dashed #D5E1EF; box-shadow: unset;}
	.npccard.empty:hover .npc_pic{background-color: rgba(255,255,255,0.3);}
	.npc_pic img{
		width:100%;
        height:100%;
        object-fit:cover;
        border-radius: 50%;}
    .npccard .huvuddrag{text-transform: uppercase; font-weight: bold;}

    .npc_details {font-size: 13px; text-align: left; line-height: 120%;max-height: 155px; overflow: hidden;}
 	.npc_details ul{list-style-type: disc;}
 	.npc_details li{display: block; margin:0 15px;}
 	.npc_details li::before {content: "•"; 
 		color: var(--color-secondary);
 		display: inline-block;
 		width: 13px;
 		margin-left: -1em
 	}
    /* statblock button*/
	.statblockbutton{position: absolute; bottom: 16px; right: 16px; color: var(--color-text);}
	.statblockbutton:hover button.statblock{color: white; cursor: pointer; background-image: var(--color-blue-gradient);}
	button.statblock {
	  outline: 0;
	  border: 0;
	  border-radius: 6px;
	  display: flex;
	  align-items: center;
	  overflow: hidden;
	  background-image:  var(--color-gray-gradient);
	  font-size: 14px;
	  color: var(--color-text);
	  height: 30px;
	  transition: color 0.2s ease-in-out;
	}
	.statblock p {
	  padding: 8px 17px;
	  border-right: 1px solid rgba(0, 0, 0, 0.4);
	}
	.buttonaction {
	  border-left: 1px solid rgba(255, 255, 255, 0.2);
	  padding: 5px 5px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: rgba(255, 255, 255, 0.7);
	}
	.statblockbuttons{
		display: flex; 
		justify-content: space-between;
		position: absolute;
		bottom: 16px;
		width: 218px;
	}
	.statblockbuttons button.statblock:hover {
	  color: white;
	  cursor: pointer;
	  background-image: var(--color-blue-gradient);
	}
	.statblockbuttons p{ padding: 8px 8px; min-width: 70px; }
	.statblockbuttons img{ width: 12px; }
	.whitebox{position: relative;}

	#knappar{padding: 0 20px;flex-basis: 100%; display: flex;}
	#knappar .button{
		background-image: linear-gradient(-25deg, var(--color-main-light), var(--color-main)); 
		width: 100px; 
		margin: 10px;
		line-height: 30px;
		text-align: center;
		font-size: 15px;
		font-weight: bold;
		height: 30px;
		color: var(--color-text);
		border-radius: 15px;
		box-shadow: 3px 8px 15px rgba(0,0,0, 0.25);
	}
	#knappar .button:hover{color: #FFFFFF; cursor: pointer;}
	#knappar button:disabled,#knappar button[disabled]{background-image: var(--color-gray-gradient-straight);}
	#hide-button{
		position: absolute;
		top: 0px;
		right: 0px;
		width: 32px !important;
		height: 32px !important;
		border-radius: 20px;
		background-color: #FFF;
		-webkit-mask-image: url(/images/icons/x.svg); 
		mask-image: url(/images/icons/x.svg);
		background-image: var(--color-blue-gradient);
	}
	#hide-button:hover{
		background-image: unset;
		background-color: var(--color-secondary);
	}
	#createNPC{
		display: block;
		position: absolute;
		opacity: 0;
		left: -800px;
		width: 800px; min-height: 500px ;
		margin: auto;
		padding: 25px;
		background-color: #FFFFFF;
		border-radius: 25px;
		box-shadow: 3px 8px 15px rgba(0,0,0, 0.25);
		z-index: 999;
	}
	#editScribble,#editNPC{
		display: block;
		position: absolute;
		opacity: 0;
		right: 100%;
		width: 450px;
		margin: auto;
		padding: 25px;
		background-color: #FFFFFF;
		border-radius: 25px;
		box-shadow: 3px 8px 15px rgba(0,0,0, 0.25);
		z-index: 1000;
	}
	#editScribble{width: 700px;}
	#showNPC{
		display: block;
		position: absolute;
		opacity: 0;
		left: -100%;
		width: calc(100% - 60px); min-height: 500px ;
		margin: auto;
		background-image: var(--color-gray-gradient);
		border-radius: 25px;
		box-shadow: 3px 8px 15px rgba(255,255,255, 0.25);
		z-index: 998;
	}
	#mediagallery{position: absolute; left: -2000px;
		opacity: 0%;   
		background-image: var(--color-gray-gradient);
		padding: 30px;
		border-radius: 20px;
		width: 90%;
		box-shadow: 0px 0px 15px rgba(255,255,255, 0.8);
}
/*CHOICES*/
	.choicebox{display: flex; justify-content: flex-start; align-items: center; margin-top: 20px; flex-wrap: wrap;}
	.choicebox h4{ font-weight: bold; min-width: 120px; align-items: center;}
 	.choicebox_categories{display: flex; justify-content: flex-start; align-items: center;margin: 10px 0;}
	.toggle {
		box-sizing: border-box;
		font-size: 0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: stretch;
	}
	.toggle input {
		width: 0;
		height: 0;
		position: absolute;
		left: -9999px;
	}
	.toggle input + label {
		margin: 0;
		padding: 12px 0;
		box-sizing: border-box;
		position: relative;
		display: inline-block;
		border: solid 1px #213140;
		background-image: linear-gradient(176deg, #343A4F, #0F1620);
		color: #FFF;
		width: 150px;
		font-size: 1rem;
		/*line-height: 140%;*/
		height: 48px;
		font-weight: 600;
		text-align: center;
		box-shadow: 0 0 0 rgba(255, 255, 255, 0);
		transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
		/* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
		/*flex: 0 0 50%; display: flex; justify-content: center; align-items: center;*/
		/* ----- */
	}
	.toggle input + label:first-of-type {
		border-radius: 6px 0 0 6px;
		border-right: none;
	}
	.toggle input + label:last-of-type {
		border-radius: 0 6px 6px 0;
		border-left: none;
		margin-right: 30px;
	}
	.toggle input:hover + label {
		border-color: #DDD;
	}
	.toggle input:checked + label {
		background-image: var(--color-blue-gradient);
		color: #FFF;
		box-shadow: 0 0 10px rgba(102, 179, 251, 0.5);
		border-color: #4B9DEA;
		z-index: 1;
	}

/*FORM*/
textarea, input,select{
	width: 200px; 
	height: 35px;
	color: var(--color-text-inv);
	display: inline-block; 
	background-color: #FFFFFF;
	border-bottom:1px solid var(--color-main);
	padding: 5px;
	border-radius: var(--radius);
}
.darkSelect{width: 250px; height: 35px; background-image: var(--color-blue-gradient); color: var(--color-text); margin: 10px 0; font-size: unset;}
.darkSelect option{color: var(--color-main); font-family: var(--font-normal), sans-serif;}
.bigbutton{width: 280px;
	height: 70px;
	margin: 30px 0;
	background-image: var(--color-blue-gradient);
	border-radius: var(--radius);
	text-align: center;
	line-height: 50px;
	padding: 8px;
	font-size: 125%;
	font-weight: bold;
	box-shadow: 0px 0px 10px rgba(255,255,255, 0.5);
}
.bigbutton:hover{cursor: pointer;}

@media(max-width: 800px){
	.darkSelect{margin: 5px}
}