.sheet-npc {
	border-radius   : 3px;
	min-height      : 800px;
	padding         : 10px 10px;
	width           : 720px;

	button {
		background: #333;
    color: $white;

		&:hover,
	   &:focus {
		    border-color: $secondary;
		    color       : $white;
		    font-weight : bold;
		}
	}

	h1 { 
		line-height: unset;
		font-size: 1.1em;
	}

	h2 { 
		font-size: 1em;
		text-transform: capitalize;
	}

	h3 { font-size: 0.85em; }

	input {
		&[type='radio'] { opacity: 1; }

		&[type='text']:placeholder-shown,
		&[type='number']:placeholder-shown {
			border: 1px dotted $accent
		}

		&.sheet-toggle:checked + span { color: $accent }
	}

	textarea, select {
		color           : $white;
		background-color: #555;
	}

	div.sheet-tabs {
		@extend %display-inline-grid;
		grid-template-columns: 2.5em 1fr 4em 1fr 4em 1fr 4em 1fr 4em;
		grid-row-gap: 10%;

		button[type='roll'] {
      color: $blackish;
      grid-area: 2 / 1 / 2 / 2;
    }

		img {
			grid-area: 1 / 1 / 2 / 4;
			height: 100%;
			width: 100%
		}

		.sheet-switch {
			input[type='checkbox'] + span {
				position: absolute;
			}
		}

		h2, label { grid-row: 2;}
		select { grid-column: 8 / 8;}

		input[name='attr_stats_toggle'],
		input[name='attr_stats_toggle'] + span.sheet-pictos {
			grid-area: 1 / 9 / 1 / 9;
			position: relative;
			width: 100%;
			height: 100%;
		}

		input[name='attr_stats_toggle']:checked + span { color: $accent }
		span.sheet-pictos {
			text-align: center;
			font-size: 1.2em;
		}
	}

	div.sheet-rows {
		margin-bottom: 1%;
		width: 100%;

		button {
			font-size: 1.1em;
			text-align: left;
		}

		h2 { 
			display: inline;
			font-size: 1.1em;
			line-height: unset;
			font-weight: normal; 
		}

		h3 { display: inline; }

		input[type='number'] { width: 3em; }

		span.sheet-tiny-span { margin: 0px 1%; }
	}

	/*:+:+:+: REPEATING SECTIONS :+:+:+:*/
	div.sheet-repeating {
		button { margin: 0px; }

		h1 {display: inline;}
		h2 {
			font-variant: small-caps;
			text-align  : center;
			text-decoration: underline; 
		}

		input[type='number'], input[type='text'] { width: 100%; }

		input[name='attr_flag'] {
			@extend %settingsCheckboxes;
			@extend %toggleCheckbox;
		}

		div.repitem {
			&:hover > input[name='attr_flag'] + span,
			&:hover > input[name='attr_program_on'] + span { 
				opacity: 1; 
			}

			div.sheet-settings { 
        min-width: 700px; 
      }
		}
	}

	/*:+:+:+: NPC ATTRIBUTES :+:+:+:*/
	div.sheet-attribute {
		border-bottom: 1px solid $white;
		border-top   : 1px solid $white;
		grid-row-gap: 5%;
		margin       : 2% 0px;
		padding: 1% 1% 3% 1%;
		width        : 100%;

		input[type='number'] {
			text-align: center;
			width: 100%;
		}

		label {
			text-align: center;

			&[data-i18n-title='modifier']{ input[type='number'] {width: 65%;} }
			&[data-i18n-title='modifier']:before {content: '(';}
			&[data-i18n-title='modifier']:after {content: ')';}
		}

		h1 {
			font-weight: normal;
			grid-row: 1;
			text-align: center;
		}

		button { 
			grid-row: 1;
			text-transform: capitalize; 
		}

		span {
			font-size: 1.25em;
			grid-row: 2;
			text-align: center;
		}

		span +  label {grid-row: 3;}
		label[data-i18n-title='modifier']{grid-row: 4;}
	}

	/*:+:+:+: NPC BODY :+:+:+:*/
	div.sheet-mid {
		@extend %display-inline-grid;
		grid-template-columns: 52% 30% 1fr;
		width: 100%;

		div.sheet-column {
			@extend %display-inline-block;
			width: 100%;
		}

		span[name='attr_physical_limit']:after,
		span[name='attr_mental_limit']:after {
			content: ',';
		}
	}


	/*:+:+:+: NPC TEXT BOXES AND REPEATING SECTIONS :+:+:+:*/
	div.sheet-end {
		div.sheet-rows, div.sheet-textrow { width: 100% }

		/*:+:+:+: TEXT AREAS :+:+:+:*/
		div.sheet-textrow { 
			grid-column: 1 / 4; 
			
			h1 {
				display: inline;
				line-height: unset;
				margin-right: 1%;
			}

			label { 
				width: 100%;

				&[data-i18n-title='initiate'],
				&[data-i18n-title='submersion'] {
					width: 4em;

					& input { width: 100%; }
				}
			}
		}

		/*:+:+:+: REPEATING SECTIONS :+:+:+:*/
		div.sheet-repeating { grid-column: 1 / 4; }

		/*:+:+:+: NPC INLINE REPEAITNG SECTIONS SUCH AS SKILLS :+:+:+:*/
		div.sheet-inline-repeating {
			div.repitem {
				span[name*='attr_display_rating']:after { content: ','; }
			}

      .sheet-full-row {
        grid-column: 1 / 6;
      }

			div.repcontainer {
				display: inline;
				max-width: 500px;

				.repitem,
				.repcontrol {
					display       : inline-block;
					vertical-align: top;
					margin-bottom : 1%;
					margin-right: 1%;
				}
			}

			div.sheet-settings {
				grid-template-columns: 2fr 8em 8em 1fr 1fr;
				grid-column-gap: 1%;
				grid-row-gap: 0.5%;

				h2.sheet-full-row {
					text-align: left;
				}

				label.sheet-full-row {
					input[type='text']{ text-align: left; }
				}
			}
		}

		/*:+:+:+: WEAPONS :+:+:+:*/
		div.sheet-weapons {
      input[name='attr_weapon_range'][value='range'] ~ div.sheet-settings {
        grid-template-columns: 5em 3em 2fr 2fr 3em 3em 3em 1fr 3em 3em;

        label[data-i18n-title='notes'] { grid-column: 1 / 10 }
      }

      input[name='attr_weapon_range'][value='melee'] ~ div.sheet-settings {
        grid-template-columns: 5em 3em 2fr 2fr 3em 3em 3em 3em;

        label[data-i18n-title='notes'] { grid-column: 1 / 9 }
      }

			div.sheet-settings {
				grid-column-gap: 0.2%;
			}

			span[name='attr_weapon_dice'] {
				@extend %parantheseNumbers; 
			}
		}

		/*:+:+:+: SPELLS :+:+:+:*/
		div.sheet-spells {
			div.sheet-settings {
				grid-column-gap: 0.2%;
				grid-template-columns: 7em 3em 1fr 5em 5em 5em 3em 5em 3em;
			}

			span[name='attr_dice'] { 
				@extend %parantheseNumbers; 
			}

			label[data-i18n-title='notes'] { grid-column: 1 / 10; }
		}

		/*:+:+:+: COMPLEX FORMS :+:+:+:*/
		div.sheet-forms {
			div.sheet-settings {
				grid-column-gap: 0.2%;
				grid-template-columns: 3em 1fr 7em 8em 3em;
			}

			span[name='attr_form_dice'] { 
				margin-left: 3%;
				@extend %parantheseNumbers; 
			}

			label[data-i18n-title='notes'] { grid-column: 1 / 6; }
		}

		/*:+:+:+: IC :+:+:+:*/
		div.sheet-ic {
			div.sheet-settings {
				grid-column-gap: 0.2%;
				grid-template-columns: 1fr 8em 8em 8em;
			}

			span[name='attr_software_dice'] {
				margin-left: 3%;
				@extend %parantheseNumbers; 
			}

			label[data-i18n-title='notes'] { grid-column: 1 / 5; }
		}
	}

	/*:+:+:+: NPC MATRIX :+:+:+:*/
	div.sheet-matrix {width: 100%;}

	div.sheet-matrix-device {
		margin-bottom: 5%;

		div.sheet-rows {
			display: inline-grid;
			grid-template-columns: 12em 45% 10em 1fr;
			grid-row-gap: 5%;

			&:first-child { margin-bottom: 4%; }
		}

		label {
			width: 100%;

			input[type='text'] {
				text-align: left;
				width: 100%;
			}

			&.sheet-round > input[type='number'] {
				border-radius: 25px 25px;
				height: 25px;
				margin-left: 25%;
				width: 25px;
			}
		}

		div.sheet-matrix-bubble {
			background-color: transparent;
			grid-column: 2 / 4;
			height: 15px;
			margin-left: 10%;

		/*:+:+:+: NPC MATRIX BUBBLES :+:+:+:*/
			input[type='radio'] {
				height: 25px;
				width : 20px;
				left  : 0px;
				top: -115%;

				& + span {
					border-radius: 5px;
					height       : 25px;
					left         : 5px;
					width        : 20px;
					top: -60%;
				}
			}
		}

		/*:+:+:+: NPC PROGRAMS :+:+:+:*/
		div.repcontainer {
			grid-column: 1 / 6;

			h2[data-i18n='notes'] { grid-row: 3; }
			label[data-i18n-title='notes'] { grid-row: 4; }


			div.repitem {
				display: inline-block;
				width: 100%;

				button > span, span { opacity: 0.2; }

				input.sheet-toggle,
				span.sheet-pictos { 
					position: absolute;
					top: 2%;
				}

				input[name='attr_program_on'] {
					left: 2%;

					&  + span { left: 2.5%;}

					&:checked ~ button > span,
					&:checked ~ span { opacity: 1; }
				}


				button[type="roll"] { margin-left: 5% !important; }
			}
		}
	}
}