@CHARSET "ISO-8859-1";

.globalOptions {
	grid-area: global;
	float: left;
}

.globalOption {
	position: relative;
	margin: var(--margin-element);
	
	border-left: var(--border-left);
	border-top: var(--border-top);
	border-bottom: var(--border-bottom);
	border-right: var(--border-right);
	box-shadow: var(--box-shadow);
	
	float: left;
	padding: var(--padding-element-inside);
	
	display: grid;
	grid-template-columns: var(--pic-small) var(--pic-small-medium) var(--pic-small) var(--pic-small);
	grid-template-rows: var(--pic-small) var(--pic-small) var(--pic-small) var(--pic-small) var(--pic-small);
	grid-template-areas: "pic pic no1 add"
		"pic pic amount amount"
		"pic pic no2 del"
		"zoom name name cost"
		"info name name costval";
}

.globalOption > .inactive > .img{
	opacity: var(--opacity-disabled);
}

.globalOption>.globalOptionInfo {
	grid-area: info;
}

.globalOption>.globalOptionZoom {
	grid-area: zoom;
}

.globalOption>.globalOptionPic {
	grid-area: pic;
	
	position: relative;
}

.globalOption>.globalOptionName {
	grid-area: name;

    text-transform: capitalize;
	font-size: var(--font-smaller);
	font-weight: var(--font-weight-bold);
	padding-top: var(--padding-name-top);
	text-align: center;
	line-height: 0.8;
}

.globalOption>.globalOptionStats {
	text-align: center;
	
	font-size: var(--font-smaller);
	font-weight: var(--font-weight-bold);
}

.globalOption>.globalOptionPlus{
	grid-area: add;
}

.globalOption>.globalOptionMinus{
	grid-area: del;
}

.globalOption>.globalOptionAmount{
	grid-area: amount;
	
	padding-top: var(--padding-element-top);
	font-size: var(--font-smaller);
	font-weight: var(--font-weight-bold);
	text-align: right;
}

.globalOption>.globalOptionPlus:not(.inactive):hover,
.globalOption>.globalOptionMinus:not(.inactive):hover {
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
}

.globalOption>.cost {
	grid-area: cost;
}

.globalOption>.costValue {
	grid-area: costval;
}

.globalOptions>.inactive>.globalOptionPic>.img {
	opacity: var(--opacity-disabled);
}

.globalOption>.globalOptionInfo>.globalOptionInfoImg,
.globalOption>.globalOptionPlus>.globalOptionPlusImg,
.globalOption>.globalOptionMinus>.globalOptionMinusImg,
.globalOption>.globalOptionZoom>.globalOptionZoomImg {
	width: var(--pic-small);
}

.globalOption>.globalOptionPic>.globalOptionPicImg {
	width: var(--pic-medium);
}

.globalOption>.globalOptionPic>.disabledImg {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: var(--pic-medium);
}

.globalOptionSize,
.globalOptionPatrol {
    position: relative;
    margin: var(--margin-element);
    
    border-left: var(--border-left);
    border-top: var(--border-top);
    border-bottom: var(--border-bottom);
    border-right: var(--border-right);
    box-shadow: var(--box-shadow);
    
    float: left;
    padding: var(--padding-element-inside);
    
    display: grid;
    grid-template-columns: var(--pic-small-medium-14) var(--pic-small-medium-14) var(--pic-small-medium-14) var(--pic-small-medium-14);
    grid-template-rows: var(--pic-small) var(--pic-small) var(--pic-small) var(--pic-small) var(--pic-small);
    grid-template-areas: 
        "name name name name"
        "txt1 txt1 val1 val1"
        "txt2 txt2 val2 val2"
        "txt3 txt3 val3 val3"
        "txt4 txt4 val4 val4";
}

.globalOptionHist {
    position: relative;
    margin: var(--margin-element);
    
    border-left: var(--border-left);
    border-top: var(--border-top);
    border-bottom: var(--border-bottom);
    border-right: var(--border-right);
    box-shadow: var(--box-shadow);
    
    float: left;
    padding: var(--padding-element-inside);
    
    display: grid;
    grid-template-columns: var(--pic-small-medium-14) var(--pic-small-medium-14) var(--pic-small-medium-14) var(--pic-small-medium-14);
    grid-template-rows: var(--pic-very-small2) var(--pic-very-small2) var(--pic-very-small2) var(--pic-very-small2) var(--pic-very-small2) var(--pic-very-small2);
    grid-template-areas: 
        "name name name name"
        "txt1 txt1 val1 val1"
        "txt2 txt2 val2 val2"
        "txt3 txt3 val3 val3"
        "txt4 txt4 val4 val4"
        "txt5 txt5 val5 val5";
}
.globalOptionPatrol>.globalOptionPatrolPic {
    grid-area: 2 / 1 / span 4 / span 2;
    
    position: relative;
}
.globalOptionPatrol>.globalOptionPatrolAmount {
    grid-area: 2 / 3 / span 4 / span 2;
    font-size: var(--font-large);
    font-weight: var(--font-weight-bold);
    padding-top: calc(3 * var(--padding-name-top));
    text-align: center;
    line-height: 0.8;
}

.globalOptionPatrol>.globalOptionPatrolAmount.specInfo {
    font-size: var(--font-normal);
}

.globalOptionPatrol>.globalOptionPatrolPic>.globalOptionPatrolPicImg {
    width: var(--pic-medium);
}

.globalOptionPatrol>.globalOptionPatrolName,
.globalOptionSize>.globalOptionSizeName,
.globalOptionHist>.globalOptionHistName{
    grid-area: name;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: center;
    line-height: 0.8;
}
.globalOptionSize>.globalOptionSizeInf,
.globalOptionHist>.globalOptionHistInf{
    grid-area: txt1;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: left;
    line-height: 0.8;
}
.globalOptionSize>.globalOptionSizeCav,
.globalOptionHist>.globalOptionHistCav{
    grid-area: txt2;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: left;
    line-height: 0.8;
}
.globalOptionSize>.globalOptionSizeAlt,
.globalOptionHist>.globalOptionHistAlt{
    grid-area: txt3;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: left;
    line-height: 0.8;
}
.globalOptionSize>.globalOptionSizeTotal,
.globalOptionHist>.globalOptionHistTotal{
    grid-area: txt4;
	font-size: var(--font-smaller);
    border-top: var(--border-top);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: left;
    line-height: 0.8;
}

.globalOptionHist>.globalOptionHistAltStaff{
    grid-area: txt5;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: left;
    line-height: 0.8;
}

.globalOptionSize>.globalOptionSizeInfVal,
.globalOptionHist>.globalOptionHistInfVal{
    grid-area: val1;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: right;
    line-height: 0.8;    
}
.globalOptionSize>.globalOptionSizeCavVal,
.globalOptionHist>.globalOptionHistCavVal{
    grid-area: val2;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: right;
    line-height: 0.8;    
}
.globalOptionSize>.globalOptionSizeAltVal,
.globalOptionHist>.globalOptionHistAltVal{
    grid-area: val3;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: right;
    line-height: 0.8;    
}
	
.globalOptionSize>.globalOptionSizeTotalVal,
.globalOptionHist>.globalOptionHistTotalVal{
    grid-area: val4;
    border-top: var(--border-top);
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: right;
    line-height: 0.8;    
}

.globalOptionHist>.globalOptionHistAltStaffVal{
    grid-area: val5;
    font-size: var(--font-smaller);
    font-weight: var(--font-weight-bold);
    padding-top: var(--padding-name-top);
    text-align: right;
    line-height: 0.8;   
}