/*** Global HTML Components ***/
select { margin: 5px; }
input[type=checkbox] { margin: 0 3px; }

input[type=text] {
	border: none;
	border-bottom: 1px solid #2d4c45;
	border-radius: 0;
	background-color: white;
	width: 100%;
	margin-left: 5px;
}

/*** General stuff ***/
input[type=number].circle-container {
	width: 50px !important;
	height: 50px !important;
	padding: 5px;
	border: 2px solid #9caca4;
	border-radius: 50%;
	text-align: center;
}

input[type=number].round-container {
	width: 100px !important;
	height: 50px !important;
	padding: 5px;
	border: 2px solid #9caca4;
	border-radius: 15px;
	text-align: center;
}

input.sheet-arrow[type="checkbox"] {
	color: #E0E0E0;
	opacity: 0;
	width: 16px;
	height: 16px;
	position: relative;
	top: 17px;
	right: 10px;
	margin: -10px;
	cursor: pointer;
	z-index: 1;
}

input.sheet-arrow[type="checkbox"] + span::before {
	margin-top: 8px;
	margin-right: 4px;
	line-height: 14px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	float: left;
	width: 14px;
	height: 14px;
	content: "▼";
	color: #E0E0E0;
	transform: rotate(-90deg);
}

input.sheet-arrow[type="checkbox"]:checked + span::before {
	width: 14px;
	height: 14px;
	content: "▼";
	transform: rotate(0deg);
}

div.label-button-display { display: inline-flex; }

.button-label {
	width: fit-content !important;
	margin-bottom: 0 !important;
}

.button-fix { margin: -3px 3px 8px 0 !important; }

button.act-roll{
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 2px 3px;
	font-size: 1.3em;
	margin: 0 3px 0 3px;
	touch-action: manipulation;
	user-select: none;
	background-image: none;
	display: inline-block;
	line-height: 18px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
	background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
	background-repeat: repeat-x;
	border-bottom-color: #bbb;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}
button.act-roll:hover{
	color: #333333;
	text-decoration: none;
	background-color: #e6e6e6;
	background-position: 0 -15px;
	transition: background-position 0.1s linear;
}
button.act-roll::before{
	font-family: "dicefontd20";
	content: "t";
}

div.sheet-hidden-content,
div.sheet-hidden-flex {
	display: none;
}

input.sheet-arrow:checked ~ div.sheet-hidden-content { display: block; }

input.sheet-arrow:checked ~ div.sheet-hidden-flex { display: flex; }

img.line-img{ margin: auto 0; }
img.affinity-img{ margin: -4px 0 0 5px; }

.column{ padding: 0 5px }

.justify-element {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

option.fake-optgroup{
	background:gray;
	font-weight:bold;
	color:white;
}

.charBonds hr{
	margin-top: 5px !important;
	margin-bottom: 15px !important;
}

.charBonds select{
	height: 24px !important;
	max-width: 150px;
	margin: 0 0 3px 10px !important;
}

.charBonds div.tab:first-child select{ margin: 0 10px 3px !important; }

.charBonds div.tab:first-child .textarea-wrapper{ padding-right: 10px; }

.skill { margin-top: 5px; }

.largedialog textarea {
	box-sizing: border-box;
	height: 65px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ui-dialog .charsheet input[type=number] { margin: 2px; }

.tab ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	list-style: "";
}

.tab li { padding-left: 16px; }

.tab li::before {
	content: "✦";
	padding-right: 8px;
	color: #2d4c45;
}

label {
	color: #2d4c45;
	text-align: center;
}

.tabs-title { text-align: center; }

.sheet-tab-buttons {
	padding-top: 20px;
	text-align: center;
}

.header-img{ width: 155px; }

.frame {
	border: 2px solid #9caca4;
	border-radius: 20px;
	padding: 15px;
	margin: 15px 5px 5px;
	height: fit-content;
}
.no-frame { padding: 15px; }

.toggle-button {
	background-color: white;
	border: 2px solid #9caca4;
	border-radius: 5px;
}
.toggle-button:hover {
	border: 2px solid #6c9c74;
	background-color: #dcfcdc;
}

.swap-btn-wpn { margin: 6px 0 3px; }
.swap-btn-equip { margin: 5px 0 0; }
.swap-button {
	background-color: white;
	border: 2px solid #CCCCCC;
	border-radius: 5px;
}
.swap-button:hover {
	border: 2px solid #BBBBBB;
	background-color: #F9F9F9;
}
.swap-btn-armor,
.swap-btn-shield {
	display: none;
}
input[type="hidden"][value="Armor"].swap-toggle ~ button.swap-btn-armor,
input[type="hidden"][value="Shield"].swap-toggle ~  button.swap-btn-shield {
	display: inline-block;
}

.side-padding {
	margin: 10px;
	padding: 0 15px;
}

.half-width {
	width: 50%;
	min-width: 0;
}

.separation-line {
	width: 100%;
	border-bottom: 2px solid #9caca4;
}

.inline-display {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

/**** Tabs handler ***/
.charsheet .sheet-character,
.charsheet .sheet-stats,
.charsheet .sheet-equipment,
.charsheet .sheet-backpack,
.charsheet .sheet-classes,
.charsheet .sheet-magic,
.charsheet .sheet-journal,
.charsheet .sheet-ahf,
.charsheet .sheet-rolls {
	display: none;
}
/* Shows selected tab */
.charsheet .sheet-tabstoggle[value="character"]~div.sheet-character,
.charsheet .sheet-tabstoggle[value="stats"]~div.sheet-stats,
.charsheet .sheet-tabstoggle[value="equipment"]~div.sheet-equipment,
.charsheet .sheet-tabstoggle[value="backpack"]~div.sheet-backpack,
.charsheet .sheet-tabstoggle[value="classes"]~div.sheet-classes,
.charsheet .sheet-tabstoggle[value="magic"]~div.sheet-magic,
.charsheet .sheet-tabstoggle[value="journal"]~div.sheet-journal,
.charsheet .sheet-tabstoggle[value="ahf"]~div.sheet-ahf,
.charsheet .sheet-tabstoggle[value="rolls"]~div.sheet-rolls{
	display: block;
}

/**** Traits and Bonds *****/
.charTraits {
	margin: 15px 5px 5px;
	display: grid;
}

.charTraits * {
	margin: 5px;
	padding: unset;
	display: inline-flex;
}

.charTraits .name {
	grid-row: row;
	grid-column-start: 1;
	grid-column-end: 3;
}

.charTraits .identity {
	grid-column-start: 3;
	grid-column-end: 12;
	grid-row: row;
}

.charTraits .theme {
	grid-column-start: 1;
	grid-column-end: 6;
	grid-row: row 2;
}

.charTraits .origin {
	grid-column-start: 6;
	grid-column-end: 12;
	grid-row: row 2;
}

.charBonds .grid {
	margin: 5px;
	display: grid;
	grid-template-columns: repeat(2, 50%);
	gap: 1px #2d4c45;
}

/**** FABULA POINT *****/
.charFabula label { grid-area: label; }
.charFabula .circle-container { grid-area: fabula-points; }
.charFabula .info-left { grid-area: info-left; }
.charFabula .info-right { grid-area: info-right; }
.charFabula .grid {
	margin: 5px;
	display: grid;
	grid-template-areas:
	'fabula-points label label'
	'fabula-points info-left info-right';
	grid-template-columns: 65px 1.2fr 1fr;
}

/**** EXPERIENCE POINT *****/
.charExperience label {	grid-area: label; }
.charExperience input { grid-area: input; }
.charExperience div { grid-area: infos; }
.charExperience .grid {
	margin: 5px;
	display: grid;
	grid-template-areas:
	'input label'
	'input infos';
	grid-template-columns: 65px 1fr;
}

/**** ATTRIBUTES *****/
.charAttribute { margin: 15px 5px 5px; }

.charAttribute .grid {
	display: grid;
	grid-template-areas:
	'grid-dex grid-rage'
	'grid-ins grid-rage'
	'grid-might grid-pois'
	'grid-will grid-pois';
	grid-template-columns: 1fr 0.25fr;
}

.innerGrid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
}

.charAttribute input[type="text"] { width: 65px; }

.charAttribute.char-dex {
	margin: 5px 5px 5px !important;
	grid-area: grid-dex
}

.charAttribute.char-ins {
	margin: 5px 5px 5px !important;
	grid-area: grid-ins
}

.charAttribute.char-migth {
	margin: 5px 5px 5px !important;
	grid-area: grid-migth
}

.charAttribute.char-will {
	margin: 5px 5px 5px !important;
	grid-area: grid-will
}

.charAttribute.char-rage {
	grid-area: grid-rage;
	display: flex;
	align-items: center;
}

.charAttribute.char-pois {
	grid-area: grid-pois;
	display: flex;
	align-items: center;
}

select[name="attr_dexterity"],
select[name="attr_insight"],
select[name="attr_might"],
select[name="attr_willpower"] {
	width: 65px;
}

/**** GAUGES *****/
.magic { max-width: 70%; }

.charGauges .grid {
	display: grid;
	align-items: center;
	grid-template-areas:
	'grid-current-hp grid-add-hp grid-crisis grid-hp'
	'grid-current-mp grid-add-mp empty grid-mp'
	'grid-current-ip grid-add-ip empty grid-ip';
	grid-template-columns: 1.2fr 1.15fr 1.1fr 0.7fr;
}

.grid-hp { grid-area: grid-hp; }
.grid-add-hp { grid-area: grid-add-hp; }
.grid-crisis { grid-area: grid-crisis; }
.grid-current-hp { grid-area: grid-current-hp; }

.grid-mp { grid-area: grid-mp; }
.grid-add-mp { grid-area: grid-add-mp; }
.grid-current-mp { grid-area: grid-current-mp; }

.grid-ip { grid-area: grid-ip; }
.grid-add-ip { grid-area: grid-add-ip; }
.grid-current-ip { grid-area: grid-current-ip; }

/*** DEFENSES ***/
.charDefenses .inline-display div { min-width: 15%; }
.charDefenses .grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.charDefenses .grid > div:nth-child(-n+4) { margin-bottom: 25px; }

.charAffinities .grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-top: 15px;
}
.charAffinities select { max-width: 115px; }
.charAffinities select:nth-child(-n+6) { margin-bottom: 15px; }

.charStatusImmunities { margin-top: 10px; }

/**** EQUIPMENT ***/
.repeating_weapons.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.spare-equipments-initiative {
	margin: 10px 5px 0 5px;
	width: 220px;
}

.weapon .repcontainer .repitem,
.spells .repcontainer .repitem {
	display: inline-block;
	width: 50%;
	vertical-align: top;
}
.weapon .repcontainer .repitem:nth-child(odd) { padding: 15px 20px 15px 0; }
.weapon .repcontainer .repitem:nth-child(even) { right: 0; padding: 15px 0 15px 20px; }
.spells .repcontainer .repitem { padding: 15px; }

/*** RITUAL ***/
.rituals .repcontainer .repitem {
	width: 25%;
	display: inline-block;
	padding: 7px;
}

/*** Rolltemplate ***/
.sheet-rolltemplate-Attack .sheet-template-nameplate,
.sheet-rolltemplate-Magic .sheet-template-nameplate,
.sheet-rolltemplate-Checks .sheet-template-nameplate,
.sheet-rolltemplate-Generic .sheet-template-nameplate {
	background-color: white;
	border: 2px solid #9CACA4;
	border-bottom: 1px dotted #9CACA4;
	border-radius: 20px 20px 0 0;
	padding: 5px;
}

.sheet-rolltemplate-Attack .sheet-frame,
.sheet-rolltemplate-Magic .sheet-frame,
.sheet-rolltemplate-Checks .sheet-frame,
.sheet-rolltemplate-Generic .sheet-frame {
	border: 2px solid #9caca4;
	border-top: 0;
	border-radius: 0 0 20px 20px;
	padding: 10px 10px 12px;
	background-color: white;
	background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Fabula%20Ultima/images/fabula-ultima-transparent-logo.png");
	background-position: top 5px right 5px;
	background-repeat: no-repeat;
	background-size: 95px;
}

.sheet-rolltemplate-Attack .sheet-text-center,
.sheet-rolltemplate-Magic .sheet-text-center,
.sheet-rolltemplate-Checks .sheet-text-center,
.sheet-rolltemplate-Generic .sheet-text-center {
	text-align: center;
}

.sheet-rolltemplate-Attack hr,
.sheet-rolltemplate-Magic hr,
.sheet-rolltemplate-Checks hr,
.sheet-rolltemplate-Generic hr {
	margin-top: 12px;
	margin-bottom: 12px;
}

.sheet-rolltemplate-Attack h2,
.sheet-rolltemplate-Magic h2,
.sheet-rolltemplate-Checks h2,
.sheet-rolltemplate-Generic h2 {
	line-height: normal !important;
	font-size: 16px !important;
	color: #4d4c45;
}

.sheet-rolltemplate-Attack h3,
.sheet-rolltemplate-Magic h3,
.sheet-rolltemplate-Checks h3,
.sheet-rolltemplate-Generic h3 {
	line-height: normal !important;
	margin-top: 15px;
	font-size: 16px !important;
	color: #000000;
}

.sheet-rolltemplate-Attack h4,
.sheet-rolltemplate-Magic h4,
.sheet-rolltemplate-Checks h4,
.sheet-rolltemplate-Generic h4 {
	line-height: normal !important;
	font-weight: normal !important;
	font-size: 14px !important;
	color: #777777;
}

.sheet-rolltemplate-Attack h5,
.sheet-rolltemplate-Magic h5,
.sheet-rolltemplate-Checks h5,
.sheet-rolltemplate-Generic h5 {
	line-height: normal !important;
	font-weight: normal !important;
	font-size: 14px !important;
	color: #000000;
}

.sheet-rolltemplate-Attack h6,
.sheet-rolltemplate-Magic h6,
.sheet-rolltemplate-Checks h6,
.sheet-rolltemplate-Generic h6 {
	font-weight: normal !important;
	font-size: 12px !important;
	color: #777777;
}

.sheet-rolltemplate-Attack div.description,
.sheet-rolltemplate-Magic div.description,
.sheet-rolltemplate-Generic  div.description {
	text-align: justify;
}

.sheet-rolltemplate-Attack div.sheet-critical-success,
.sheet-rolltemplate-Magic div.sheet-critical-success,
.sheet-rolltemplate-Generic  div.sheet-critical-success {
	color: #009900;
}

.sheet-rolltemplate-Attack div.sheet-critical-fail,
.sheet-rolltemplate-Magic div.sheet-critical-fail,
.sheet-rolltemplate-Generic  div.sheet-critical-fail {
	color: #cc0000;
}

.sheet-rolltemplate-Attack div.sheet-doubles-indicator,
.sheet-rolltemplate-Magic div.sheet-doubles-indicator,
.sheet-rolltemplate-Generic  div.sheet-doubles-indicator {
	color: #0088DD;
}

.sheet-rolltemplate-Attack span.sheet-gray-text,
.sheet-rolltemplate-Magic span.sheet-gray-text,
.sheet-rolltemplate-Checks span.sheet-gray-text,
.sheet-rolltemplate-Generic span.sheet-gray-text {
	color: #777777;
}

/*** Multi-use Classes ***/
.small-width { width: 45px !important; }
.medium-width { width: 100px !important; }
.full-width { width: 100% !important; }
.w9p{ width: 9% !important; }
.w23p{ width: 23% !important; }
.w68p{ width: 68% !important; }
.width150 { width: 150px !important; }
.width220 { width: 220px !important; }
.width250 { width: 250px !important; }
.width255 { width: 255px !important; }
.width365 { width: 365px !important; }
.width400 { width: 400px !important; }
.top-m10{ margin-top: 10px !important; }
.bottom-m10{ margin-bottom: 10px !important; }
.indent-left{ padding-left: 30px !important; }
.indent-right{ padding-right: 35px !important; }
.leftfloat{ float: left; }
.rightfloat{ float: right; }
.clearfloat { clear: both; }
.text-center { text-align: center; }