:root.dark-mode {
    --Co1: #D5531B;
    --Co2: #FF7E43;
    --Co3: #3C2116;
    --Co4: #181009;
    --Co5: #1E1E1E;
    --Bg1: #121212;
    --Tx1: #EAEAEA;
    --Sh1: #4f270f33;
	--Li1: #d9760d;
	--sith: #4D0000;
	--imp: #373737;
	--rep: #00374A;
	--Liq: #0084b7;
	--Sol: #ac7154;
	--Mono: #3c251930;;
}
.dark-mode .raTyn1 { background: #2C2C2C;} .dark-mode .rbTyn1 { background: #242424;} .dark-mode .raTyn2 { background: #3B2D28;} .dark-mode .rbTyn2 { background: #332623;}
.dark-mode .raTyn3 { background: #273327;} .dark-mode .rbTyn3 { background: #1F291F;} .dark-mode .raTyn4 { background: #242C33;} .dark-mode .rbTyn4 { background: #1C242A;}
.dark-mode .raTyn5 { background: #30291C;} .dark-mode .rbTyn5 { background: #292216;} .dark-mode .raTyn6 { background: #2A2A2A;} .dark-mode .rbTyn6 { background: #232323;}
.dark-mode .caSto3 { background: #014d46;} .dark-mode .cbSto3 { background: #00443e;} .dark-mode .caSto2 { background: #712102} .dark-mode .cbSto2 { background: #6a1e00;}
.dark-mode .caSto1 { background: #2a2440;} .dark-mode .cbSto1 { background: #26203a;}
.dark-mode .highlight-column { background: #772918!important; border-left: 1px solid #6B3E39; border-right: 1px solid #6B3E39; }
.dark-mode .highlight-row { background: #772918!important; border-top: 1px solid #6B3E39; border-bottom: 1px solid #6B3E39; }

:root.light-mode {
    --Co1: #388e3c;
    --Co2: #1a6200;
    --Co3: #edf7ee;
    --Co4: #e0e0e0;
    --Co5: #f4f5f7;
    --Bg1: #f7f9fc;
    --Tx1: #020e31;
    --Sh1: #4f270f33;
	--Li1: #00bf6e;
	--sith: #FFBFBF;
	--imp: #fff;
	--rep: #DAF1F9;
	--Liq: #005757;
	--Sol: #754200;
	--Mono: #3c251930;;
}
.light-mode .raTyn1 { background: #F4F3F3;} .light-mode .rbTyn1 { background: #EEE9E9;} .light-mode .raTyn2 { background: #FFF8F5;} .light-mode .rbTyn2 { background: #F9EFEB;}
.light-mode .raTyn3 { background: #F0FFF0;} .light-mode .rbTyn3 { background: #E7F9E7;} .light-mode .raTyn4 { background: #F0F8FF;} .light-mode .rbTyn4 { background: #E7F0F9;}
.light-mode .raTyn5 { background: #FAF3E0;} .light-mode .rbTyn5 { background: #F4ECD7;} .light-mode .raTyn6 { background: #F2F2F2;} .light-mode .rbTyn6 { background: #ECE8E8;}
.light-mode .caSto3 { background: #e4ffff;} .light-mode .cbSto3 { background: #dbf9f9;} .light-mode .caSto2 { background: #ffeed8;} .light-mode .cbSto2 { background: #f9e6cf;}
.light-mode .caSto1 { background: #f8f6ff;} .light-mode .cbSto1 { background: #efedf9;}
.light-mode .highlight-column { background: #FFCFBC!important; border-left: 1px solid #af554c; border-right: 1px solid #af554c; }
.light-mode .highlight-row { background: #FFCFBC!important; border-top: 1px solid #af554c; border-bottom: 1px solid #af554c; }

body{margin: 1px; background-color: var(--Bg1); color: var(--Tx1);}
textarea{background-color: var(--Bg1); color: var(--Tx1); border: 1px solid var(--Co1); width: 95%; min-height: 80px;}
h1{ font-size: 2rem; font-weight: bold; color: var(--Co1); text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); letter-spacing: 2px; padding: 10px; text-transform: uppercase; background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); border-radius: 10px; display: inline-block; }
h1:hover {color: var(--Co2);}
h3 {font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: bold; color: var(--Co1); }
h3:hover {color: var(--Co2);}
a{color: var(--Li1);} a:visited{color: }
.DisNonC div:last-child{display: none;} .DisNon{display: none;}
.ExMenu {padding-bottom: 5px;}
.ExMenu div:last-child{ border-radius: 5px; background: linear-gradient(to right, var(--Co3), var(--Co4)); border: 2px solid var(--Co1); box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.15);}
.ExMenu div table tbody tr td:first-child{padding-right: 10px;}
.ExMenuA div table thead tr th{text-align: left; width: 100px;}
.ShMenu{width: fit-content; background: var(--Mono); box-shadow: 0 3px var(--Co5); border: 1px solid var(--Co1); border-radius: 8px;}
.ShMenu table thead tr th{text-align: left; color: var(--Co1);  padding: 2px;}
.ShMenu table tbody tr td{text-align: left; padding: 2px;}
.Sol{color: var(--Sol);} .Liq{color: var(--Liq);}
#SpreadContainer{display: none; margin-top: 6px;}
#SpreadContainer table{border-collapse: collapse; width: 100%; height: auto;}
#SpreadContainer table tbody tr td{text-align: center; vertical-align: middle; min-width: 41px;}
#SpreadContainer table tbody tr td:nth-of-type(1){overflow: hidden; white-space: nowrap;}
#SpreadContainer table tbody tr td:nth-last-of-type(1){overflow: hidden; white-space: nowrap;}
#DataContent{min-width: 514px; max-width: 600px;}
#DataContent thead tr th, #DataContent tbody tr td {text-align: left;}
#DataContent thead tr th{border-bottom: 2px solid var(--Co1);}
#DataContent thead tr th:nth-last-of-type(2), #DataContent tbody tr td:nth-last-of-type(2){width: 70px;}
#DataContent thead tr th:nth-last-of-type(1), #DataContent tbody tr td:nth-last-of-type(1){width: 60px;}
#CalcContent thead tr th, #CalcContent tbody tr td{text-align: left; padding-right: 1px;}
#CalcContent thead tr th:first-of-type, #CalcContent tbody tr td:first-of-type{width: 3px; min-width: 3px; max-width: 3px;}
#CalcContent thead tr th:nth-of-type(4), #CalcContent tbody tr td:nth-of-type(4){min-width: 100px;}
#CalcContent thead tr th:nth-of-type(3), #CalcContent tbody tr td:nth-of-type(3){min-width: 100px;}
#CalcContent thead tr th:nth-of-type(2), #CalcContent tbody tr td:nth-of-type(2){min-width: 150px;}

/* Inputs */
input[type="checkbox"]{appearance: none; -webkit-appearance: none; width: 20px; height: 20px; background-color: var(--Co4); border: 2px solid #c0c0c0; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease;}
input[type="checkbox"]:checked {background-color: var(--Co1); border-color: var(--Co1);}
input[type="checkbox"] + label {font-family: 'Poppins', sans-serif; font-size: 16px; color: #2e7d32; cursor: pointer; transition: color 0.3s ease;}
input[type="checkbox"] + label:hover {color: var(--Co1);}
input[type="text"] {width: 200px; height: 30px; background-color: var(--Co4); border: 2px solid #c0c0c0; border-radius: 6px; font-size: 14px; padding: 1px 10px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; margin-left: 8px; color: var(--Co1);}
input[type="text"]:hover{width: 300px; background-color: var(--Co5); border-color: var(--Co1); box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.15);}
input[type="text"]:focus {outline: none; border-color: var(--Co1); box-shadow: inset 0 4px 6px var(--Sh1);}
input[type="number"]{width: 50px; height: 25px; background-color: var(--Co4); border: 2px solid #c0c0c0; border-radius: 6px; font-size: 14px; padding: 1px 1px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; margin-left: 8px; color: var(--Co1);}
input[type="number"]:hover{background-color: var(--Co5); border-color: var(--Co1); box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.15);}
input[type="number"]:focus{outline: none; border-color: var(--Co1); background-color: #ffffff; box-shadow: inset 0 4px 6px var(--Sh1);}
/* drop down */
select{ font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: bold; color: var(--Co2); background: linear-gradient(to bottom, var(--Co3), var(--Co4)); border: none; border-radius: 8px; box-shadow: 0 5px var(--Sh1); cursor: pointer; padding: 5px; transition: box-shadow 0.2s ease, background-color 2s ease; border: 1px solid var(--Co1);}
select:hover {background: linear-gradient(to bottom, var(--Co4), var(--Co3)); box-shadow: 0 3px var(--Co5); color: var(--Co1);}
option{background-color: var(--Co3); color: var(--Co2);}
/* Buttons */
.Op-But{width: 95%; height: 95%; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: bold; color: var(--Co2); background: linear-gradient(to bottom, var(--Co3), var(--Co4)); border: none; border-radius: 8px; box-shadow: 0 5px var(--Sh1); cursor: pointer; position: relative; transition: box-shadow 0.2s ease, background-color 2s ease; border: 1px solid var(--Co1);}
.Op-But:hover{ background: linear-gradient(to bottom, var(--Co4), var(--Co3)); box-shadow: 0 3px var(--Co5); color: var(--Co1);}
.Op-But:active{box-shadow: 0 4px #bde4bf82; transform: translateY(3px); }

.OpCon{padding: 1px; width: calc(max-content - 2px); display: inline-flex; align-items: center; max-width: 300px;}
.OpCon div:first-child{text-align: left; width: 205px; display: inline;}
.OpCon div:last-child{text-align: right; width: min-content; display: inline; margin-left: auto;}
.MainSwitch{position: relative; box-shadow: 0 5px var(--Sh1); cursor: pointer; background:linear-gradient(to bottom, var(--Co4), var(--Co3)); box-shadow: 0 3px var(--Co5); color: var(--Co1); padding:10px; border-radius: 15px; font-size: 25px; font-family: 'Poppins', sans-serif; transition: box-shadow 0.2s ease, background-color 2s ease; border: 1px solid var(--Co1);}
.MainSwitch:hover{background:linear-gradient(to bottom, var(--Co3), var(--Co4));}
/* drop down button & menu */
.Drop-But{padding: 10px; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: bold; color: var(--Co2); background: linear-gradient(to bottom, var(--Co3), var(--Co4)); border: none; border-radius: 8px; box-shadow: 0 5px var(--Sh1); cursor: pointer; position: relative; transition: box-shadow 0.2s ease, background-color 2s ease; border: 1px solid var(--Co1);}
.Drop-But:hover{background: linear-gradient(to bottom, var(--Co4), var(--Co3)); box-shadow: 0 3px var(--Co5); color: var(--Co1);}
.Drop-But:active{box-shadow: 0 3px #bde4bf82; transform: translateY(2px);}
.dropdown{position: relative;}
.dropdown-menu{z-index: 40; position: absolute; display: none; border: 2px solid var(--Co1); background-color: var(--Co5); padding: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); left: 0; top: 26px;}
.dropdown-menu div{align-items: center; display: inline-flex; text-align: center;}
.dropdown-menu div label{display: flex; align-items: center;}
.dropdown-div{border: 1px solid var(--Co1); width: 100%; overflow: hidden; white-space: nowrap;}
.dropdown-header{justify-content: center; display: flex!important;}
.dropdown-menua{z-index: 40; position: absolute; display: none; border: 2px solid var(--Co1); background-color: var(--Co5); padding: 5px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); left: 0; top: 26px;}
.dropdown-menua div{align-items: center; display: inline-block; text-align: center;}


.Highlight{color: var(--Co1);}
.Warnlight{color: #8e3838;}
.F22{font-size: 22px;} .F16{font-size: 16px;} .InBl{display: inline-block;} .In{display: inline;} .w200{width: 200px;}
.w100{width: 100px;} .mw375{max-width: 375px;} .mw320{max-width: 320px; width: 320px;} .mw400{max-width: 400px; width: 400px;} .h34{height: 34px!important;} .h40{height: 40px;} .h100{height: 100px!important;} .h100i{height: 100%;}
.C-H{cursor: help;} .OptSpan{width: 22px; height: 22px; cursor: pointer;}
.f-s20{font-size: 20px!important;} .mt-5{margin-top: 5px;} .z99{z-index: 99;}

/* General identifierse */
.O-Imperial{background: var(--imp)!important;}
.O-Republic{background: var(--rep)!important;}
.O-Sith{background: var(--sith)!important;}
.O-General{background: var(--Co3) !important;}
.MsgBox{position: fixed; top: 40%; left: 30%; width: 40%; height: fit-content; background: var(--Co5); border: 1px solid var(--Co1); border-radius: 10px; padding: 15px;}
/*spreadsheet layout*/
th.Stn4::after {content: url('Sith.png');}
.rStn3 td:first-child::after {content: url('Imp.png');}
.rStn3 td:last-child::before {content: url('Imp.png');}
.rStn4 td:first-child::after {content: url('Sith.png');}
.rStn4 td:last-child::before {content: url('Sith.png');}

.Options-Container {
    display: grid;
    grid-template-areas:
        "Gr-Opt-Ba Gr-Opt-Ba Gr-Opt-Ba Gr-Opt-Ba Gr-Opt-Ba Gr-Opt-Ba"
        "Gr-Opt-Co Gr-Opt-C1 Gr-Opt-C2 Gr-Opt-C3 Gr-Opt-So Gr-Opt-Li"
        "Gr-Opt-Ro Gr-Opt-R1 Gr-Opt-R2 Gr-Opt-R3 . ."
        "Gr-Opt-Eo Gr-Opt-Po Gr-Opt-Si . . .";
    grid-template-columns: repeat(6, 100px); grid-template-rows: repeat(3, 1fr);
    gap: 10px; background-color: var(--Co5); padding: 15px;
    border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

.Dummy{display: none!important;}
.Ta1{
	display: grid;
	grid-template-areas:
	"Ta1-01"
	"Ta1-02";
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
}
.Ta1-01{grid-area: Ta1-01;}
.Ta1-01 div{
	display: inline-block;	border-radius: 8px 8px 0px 0px; border-left: 2px solid var(--Co1);	border-right: 2px solid var(--Co1);	border-top: 2px solid var(--Co1); padding: 3px 7px;
	font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: bold; color: var(--Co1); background: linear-gradient(to bottom, var(--Co3), var(--Co4));	cursor: pointer;}
.Ta1-01 div:hover {color: var(--Co2); background: linear-gradient(to bottom, var(--Co4), var(--Co3));}
.Ta1-01 div.active {color: #ffffff; background: linear-gradient(to bottom, var(--Co1), var(--Co2)); cursor: default;}
.Ta1-02{grid-area: Ta1-02;}
.TabData { display: none; border: 2px solid var(--Co1); background-color: var(--Co5); padding: 5px; border-radius: 0px 0px 8px 8px; min-height: 300px; }
.TabData.active {display: block;} .TagText{padding: 5px;} SimpleBox{display: inline-block; margin: 2px; border-radius: 2px; border: 1px solid var(--Co1); height: 27px;}
.SimpleBox div{display: inline-block; padding: 2px; height: 100%; align-items: center;}

@media (min-width: 1250px) {
.Calc-Container {
	display: grid;
		grid-template-areas: 
		"Gr-item1 Gr-item1"
		"Gr-item2 Gr-item2"
		"Gr-item3 Gr-item4"
		"Gr-item5 Gr-item6"					;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}
	.AppGrid {
		 display: grid;
		grid-template-areas:
			"App01 App02 App03";
		grid-template-columns: 540px 390px 1fr;
		grid-template-rows: 1fr;
	}
.Op1{border-radius: 0px 8px 0px 0px;	border-top: 2px solid var(--Co1);		border-right: 2px solid var(--Co1); padding: 4px;}
.Op2{border-radius: 8px 0px 0px 0px;	border-top: 2px solid var(--Co1);		border-left: 2px solid var(--Co1); padding: 4px;}	
.Op3{border-radius: 0px 0px 0px 8px;	border-bottom: 2px solid var(--Co1);	border-left: 2px solid var(--Co1); padding: 4px;}
.Op4{border-radius: 0px 0px 8px 0px;	border-bottom: 2px solid var(--Co1);	border-right: 2px solid var(--Co1); padding: 4px;}
}

@media (min-width: 841px) and (max-width: 1249px) {
.Calc-Container {
	display: grid;
		grid-template-areas: 
		"Gr-item1 Gr-item1"
		"Gr-item2 Gr-item2"
		"Gr-item3 Gr-item4"
		"Gr-item5 Gr-item6"					;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}
	.AppGrid {
		display: grid;
		grid-template-areas:
		"App01 App03"
		"App02 App02";
		grid-template-columns: 540px auto;
		grid-template-rows: repeat(2, auto);
	}
.Op1{border-radius: 0px 8px 0px 0px;	border-top: 2px solid var(--Co1);		border-right: 2px solid var(--Co1); padding: 4px;}
.Op2{border-radius: 8px 0px 0px 0px;	border-top: 2px solid var(--Co1);		border-left: 2px solid var(--Co1); padding: 4px;}	
.Op3{border-radius: 0px 0px 0px 8px;	border-bottom: 2px solid var(--Co1);	border-left: 2px solid var(--Co1); padding: 4px;}
.Op4{border-radius: 0px 0px 8px 0px;	border-bottom: 2px solid var(--Co1);	border-right: 2px solid var(--Co1); padding: 4px;}
}
@media (min-width: 200px) and (max-width: 838px) {
.Calc-Container {
	display: grid;
		grid-template-areas: 
		"Gr-item1"
		"Gr-item2"
		"Gr-item3"
		"Gr-item4"
		"Gr-item5"
		"Gr-item6";
		grid-template-columns: auto;
		grid-template-rows: auto;
	}
	.AppGrid {
    display: grid;
    grid-template-areas:
    "App01"
	"App02"
	"App03";
    grid-template-columns: auto;
    grid-template-rows: repeat(3, auto);
	}
.Op1{border-radius: 0px 0px 0px 0px; border-left: 2px solid var(--Co1);	border-right: 2px solid var(--Co1); padding: 4px;}
.Op2{border-radius: 8px 8px 0px 0px; border-left: 2px solid var(--Co1);	border-right: 2px solid var(--Co1);	border-top: 2px solid var(--Co1); padding: 4px;}
.Op3{border-radius: 0px 0px 0px 0px; border-left: 2px solid var(--Co1);	border-right: 2px solid var(--Co1); padding: 4px;}
.Op4{border-radius: 0px 0px 8px 8px; border-left: 2px solid var(--Co1);	border-right: 2px solid var(--Co1);	border-bottom: 2px solid var(--Co1); padding: 4px;}
}
.Gr-item1{grid-area: Gr-item1;}	/*header*/
.Gr-item2{grid-area: Gr-item2; margin-bottom: 2px; border-radius:}	/*table*/
.Gr-item3{grid-area: Gr-item3; background-color: var(--Co5);}	/*Options*/
.Gr-item4{grid-area: Gr-item4; background-color: var(--Co5);}	/*Options*/
.Gr-item5{grid-area: Gr-item5; background-color: var(--Co5);}	/*Options*/
.Gr-item6{grid-area: Gr-item6; background-color: var(--Co5);}	/*Options*/
.App01{grid-area:App01;}	.App02{grid-area:App02; display: none;}	.App03{grid-area:App03; display: none;}
.Op3{
	height: 100%;
	display: grid;
	grid-template-areas:
	"Op3-01	Op3-01	Op3-01	"
	"Op3-11	Op3-12	Op3-12"
	"Op3-21	Op3-22	Op2-22";
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 38px);
	gap: 3px;
}
.Op3 div{align-items: center; display:flex;}
.Op3 div label{align-items: center; display:flex;}
.Op3-01{grid-area: Op3-01;}
.Op3-11{grid-area: Op3-11;}	.Op3-12{grid-area: Op3-12;}
.Op3-21{grid-area: Op3-21;}	.Op3-22{grid-area: Op3-22;}