@CHARSET "ISO-8859-1";

.templateHq{
	display: none;
}


.templateHq {
	position: fixed;
	width: var(--hq-selector-width);
	top: var(--hq-top);
	left: var(--hq-left);
	padding: var(--padding-flex);  
	overflow: auto;
	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);
	
	background-color: var(--background);
	z-index: 100;
	border-color: var(--background-div-acive);
    box-shadow: inset 0 0 1.5vw var(--background-div-acive);
}

.hqTemplate {
    display: grid;
	grid-template-columns: calc(22 * var(--pic-small-brigade));
	grid-template-rows: 
        calc(1 * var(--pic-small-brigade))
		auto 
		calc(1 * var(--pic-small-brigade));
	grid-template-areas: 
		"header"
		"options"
		"summary";
}

.hqHeader{
    grid-area: header;

    display: grid;
	grid-template-columns: calc(10 * var(--pic-small-brigade)) calc(2 * var(--pic-small-brigade)) calc(10 * var(--pic-small-brigade));
	grid-template-rows: calc(1 * var(--pic-small-brigade));
	grid-template-areas: 
		"shipname picHq no2";
}

.hqHeader>.hqHeaderShipName{
    grid-area: shipname;

    font-size: var(--font-10);
    font-weight: var(--font-weight-bold);
    text-align: center;
}

.hqHeader>.hqHeaderImg{
    grid-area: picHq;
    width: 50%;
}

.hqOptions{
    grid-area: options;
}

.hqOption{
    display: grid;
    
	font-size: var(--font-06);
    font-weight: var(--font-weight-bold);
    text-align: right;
    
    grid-template-columns: 
        calc(7 * var(--pic-small-brigade)) 
        calc(1 * var(--pic-small-brigade)) 
        calc(1 * var(--pic-small-brigade)) 
        calc(1 * var(--pic-small-brigade))
        calc(1 * var(--pic-small-brigade))
        calc(1 * var(--pic-small-brigade))
        calc(1 * var(--pic-small-brigade))
        calc(1 * var(--pic-small-brigade))
        calc(1 * var(--pic-small-brigade))
        calc(1 * var(--pic-small-brigade))
        calc(1 * var(--pic-small-brigade))
        calc(1 * var(--pic-small-brigade))
        calc(1 * var(--pic-small-brigade))
        calc(1 * var(--pic-small-brigade));
	grid-template-rows: calc(0.75 * var(--pic-small-brigade));
	grid-template-areas: "name no0 pic1 pic2 pic3 pic4 no2 count times cost no3 total currency info";
}

.hqOptionName{
    grid-area: name;

    text-align: right;
    padding-right: var(--padding-name-right);
}

.hqOptionDel{
    grid-area: pic1;
}

.hqOptionAdd{
    grid-area: pic3;
}

.hqOptionPic1{
    grid-area: pic1;
}

.hqOptionPic2{
    grid-area: pic2;
}

.hqOptionPic3{
    grid-area: pic3;
}

.hqOptionPic4{
    grid-area: pic4;
}

.hqOptionCount{
    grid-area: count;
}

.hqOptionTimes{
    grid-area: times;
}

.hqOptionCost{
    grid-area: cost;
}

.hqOptionTotal{
    grid-area: total;
}

.hqOptionCurrency{
    grid-area: currency;
    text-align: center;
}

.hqOptionInfo{
    grid-area: info;
}

.hqOptionName,
.hqOptionCount,
.hqOptionTimes,
.hqOptionCost,
.hqOptionTotal,
.hqOptionCurrency{
    padding-top: var(--hq-summary-margin-top);
}

.hqOptionDelImg,
.hqOptionAddImg,
.hqOptionPicImg,
.hqOptionInfoImg{
    width: 70%;
}

.hqSummary{
    margin-top: var(--hq-summary-margin-top);
    border-top: var(--border-top);
    grid-area: summary;
}

.hqClose{
    position: absolute;
    padding: .3vw;
    top: 0;
    right: 0;
}

.hqClose>img{
    width: var(--pic-large-button);
}

.hqClose:hover{
    background: var(--background-hover);
    border-radius: var(--border-radius-option);
}


.hqCapitan{
    display: inline-block;
    margin-bottom: calc(0.3 * var(--pic-small-brigade));
}

.hqCapPic{
    margin-right: calc(1 * var(--pic-small-brigade));
}

.hqCapPicImg{
    width: calc(1 * var(--pic-small-brigade));
}

.hqCapPic:hover,
.hqOptionPic:hover,
.hqOptionInfo:hover,
.hqOptionAdd:hover,
.hqOptionDel:hover {
	background: var(--background-hover);
	border-radius: var(--border-radius-option);
}

.hqCapitan> .inactive,
.hqOption> .inactive {
	opacity: var(--opacity-disabled);
}

.backGroundBlocker{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.8;
    z-index: 99;
    height: 100%;
    width: 100%;
}