.galaxy {
background-color: var(--mainBackgroundColor);
}



.para .title {
position: fixed; bottom: 10px; right: 20px;
color: white;
font-weight: bold;
}

@media only screen and (max-width: 600px) {

}
.para .title {
position: fixed; bottom: 10px; right: 20px;
color: white;
font-weight: bold;
}

@media only screen and (max-width: 600px) {

}
@media only screen and (min-width: 768px) {



}
@media only screen and (max-width: 767px) {







}
* {
margin: 0;
padding: 0;
border: 0;
font-family: 'Comfortaa', cursive;
font-size: 16px;
}
html, body {
height: 100%;
overflow: ;
}

:root {
--themeDarkBlue: #192F5B;
--themeBlue: #1D65A6;
--themeLightBlue: #72A2C0;
--themeGreen: #00743F;
--themeYellow: #F2A104;

--blue-1: var(--themeDarkBlue);
--blue-2: var(--themeBlue);
--blue-3: var(--themeLightBlue);
--yellow-1: var(--themeYellow);
--green-1: var(--themeGreen);

--font-size-s: 0.8rem;
--font-size-m: 1rem;
--font-size-l: 1.2rem;
--font-size-xl: 1.5rem;
}

ul {
list-style-type: none;
margin: 0;
}
a {
text-decoration: none;
cursor: pointer;
}
a:link, a:visited {
color: inherit;
}
p {
margin: 0.6rem 0.4rem;
}
input {
padding: 0.6rem 0.4rem;
border: 1px solid grey;
font-weight: bold;
}
input[type=file]::file-selector-button {
display: none;
}
select {
padding: 0.6rem 0.4rem;
border: 1px solid grey;
font-weight: bold;
}
option {
font-size: 1.2rem;
font-weight: bold;
}
button {
background-color: transparent;
border: 1px solid grey;
border-radius: 20px;
}
button p {
margin-left: 1.5rem;
margin-right: 1.5rem;
}

.errorPage.grid {
display: grid;
min-height: 100%;
}
.errorPage .card.error404 {
background: var(--blue-1);
color: var(--yellow-1);
}
.errorPage .card.error404 > div {
display: flex;
height: 100%;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.dashboard-grid {
display: grid;
min-height: 100%;
grid-template-columns: 200px auto;
grid-template-rows: 50px auto;
background-color: var(--blue-2);
}
.dashboard-grid .grid-nav {
grid-column: 1;
grid-row: 1 / span 2;
margin: 10px 10px;
padding: calc(20px - 0.6rem) 20px 20px 20px;
border-radius: 20px;
}
.dashboard-grid .grid-welcome {
grid-column: 2;
grid-row: 1;
padding: 10px 10px 10px 0;
}
.dashboard-grid .grid-content {
grid-column: 2;
grid-row: 2;
margin: 0 10px 10px 0;
padding: 20px 20px;
border-radius: 20px;
}
.dashboard-grid .grid-content input[type=file] {
color: white;
}

.row-flex {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.row-flex.direction-column {
flex-direction: column;
}

.row-flex.nav {
height: 100%;
text-align: center;
justify-content: space-between;
}




.grid .row > .col {
flex: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.grid .row > .col.flex-2 {
flex: 2;
}
.grid .row > .col.centerLeft {
align-items: center;
justify-content: flex-start;
}
.grid .row > .col.centerCenter {
align-items: center;
justify-content: center;
}
.grid .row > .col.centerRight {
align-items: center;
justify-content: flex-end;
}

.grid .row > .col .centerCenter_old {
display: inline-block;
position: relative;
transform: translate(calc(-50% - 0.6rem), calc(-50% - 0.6rem));
top: 50%; left: 50%;
}





.container.page {
width: 100%; height: 100%;
}

.font-s p {
font-size: var(--font-size-s);
}
.font-m p {
font-size: var(--font-size-m);
}
.font-l p {
font-size: var(--font-size-l);
}
.font-xl p {
font-size: var(--font-size-xl);
}

.container .row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

@media only screen and (max-width: 600px) {
.container .mobile-nav {
flex-direction: column;
position: relative;
}
.container .mobile-nav .col p {
text-align: center;
}
}


.container .row .col-1 {
flex: 1;
}
.container .row .col-2 {
flex: 2;
}
.container .row .col-3 {
flex: 3;
}
.container .row .col-4 {
flex: 4;
}
.container .row .col-5 {
flex: 5;
}
.container .row .col-6 {
flex: 6;
}
.container .row .col-7 {
flex: 7;
}
.container .row .col-8 {
flex: 8;
}
.container .row .col-9 {
flex: 9;
}
.container .row .col-10 {
flex: 10;
}
.container .row .col-fit {
flex: auto;
}
.container .row .col-50 {
width: 50px;
}
.container .row .col-100 {
width: 100px;
}
.container .row .col-150 {
width: 150px;
}
.container .row .col-200 {
width: 200px;
}

.container .button-full {
cursor: pointer;
background-color: transparent;
width: 100%; height: 100%;
}

.text-align-right {
text-align: right;
}

.color-transparent {
background-color: transparent;
}
.themeColor-blue-1 {
background-color: var(--blue-1);
}
.themeColor-blue-1 p {
color: var(--yellow-1);
}
.themeColor-blue-1 button {
border-color: var(--yellow-1);
}
.themeColor-blue-2 {
background-color: var(--blue-2);
color: white;
}
.themeColor-blue-2 p {
color: white;
}
.themeColor-blue-2 button {
border-color: white;
}
.themeColor-blue-3 {
background-color: var(--blue-3);
}
.themeColor-yellow-1 {
background-color: var(--yellow-1);
color: var(--blue-1);
font-weight: bold;
}
@media only screen and (min-width: 768px) {



.container-l-header {
background-color: red;

}



}
@media only screen and (max-width: 767px) {



.container-s-header {
background-color: green;

}



}