* {
    text-decoration: none;
    
    color: white;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: black;
    transition: opacity 0.8s ease-in-out;
    color: rgb(153, 193, 241);
}

li {
    list-style: none;
    display: block;
    margin-bottom: 10px;
}

li a {
    font-size: 1.8vh;
    font-weight: 700;
    margin-right: 2.5vh;
}

.the_game_Menu, .the_game_container {
    display: grid;
    gap: 0;
    grid-auto-flow: row;
}

.the_game_container {
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    grid-auto-flow: row;
    grid-template-columns: 7.36vh 40.97vh 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "the_game_Menu the_game_Commands the_game_Main";
    width: 100vw;
    position: absolute;
    top: 0;
    height: 100vh;
}

.the_game_background_layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: auto 100vh;
    background-repeat: no-repeat;
    background-position: top left;
    z-index: -1;
}

.the_game_background_default {
    background: url(/images/thegame_sx.svg) no-repeat top left;
}

.the_game_MenuTop {
    grid-area: the_game_MenuTop;
}

.the_game_Button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
}

.the_game_Button1, .the_game_Button2, .the_game_Button3, .the_game_Button4, .the_game_Button5, 
.the_game_Button6, .the_game_Button7, .the_game_Button8, .the_game_Button9, .the_game_Button10 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.the_game_MenuBottom {
    grid-area: the_game_MenuBottom;
}

.the_game_Commands {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 8.89vh 13.33vh 4.72vh 4.72vh 1fr 18.89vh;
    gap: 0;
    grid-auto-flow: row;
    grid-template-areas: "the_game_Logo" "the_game_PG" "the_game_WhereIAm" "the_game_Meteo" "the_game_DataArea" "the_game_Infobox";
    grid-area: the_game_Commands;
}

.the_game_Logo {
    grid-area: the_game_Logo;
    background-image: url('/images/transparent_black_omega_logo.svg');
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
}

.the_game_PG {
    display: grid;
    grid-template-columns: 16.67vh 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    grid-auto-flow: row;
    grid-template-areas: "the_game_Avatar the_game_Data";
    grid-area: the_game_PG;
}

.the_game_Avatar, .the_game_Avatar img {
    width: 100%;
    height: 100%;
}

.the_game_Avatar {
    grid-area: the_game_Avatar;
    position: relative;
    overflow: hidden;
}

.the_game_Avatar img {
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.the_game_Data {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3.47vh 2.08vh 1fr;
    gap: 0;
    grid-auto-flow: row;
    grid-template-areas: "the_game_Name" "the_game_Health" "the_game_Modifiers";
    grid-area: the_game_Data;
}

.the_game_Name {
    grid-area: the_game_Name;
}

.the_game_Health {
    grid-area: the_game_Health;
}

.the_game_Modifiers {
    grid-area: the_game_Modifiers;
}

.the_game_WhereIAm {
    grid-area: the_game_WhereIAm;
}

.the_game_Meteo {
    grid-area: the_game_Meteo;
}

.the_game_DataArea {
    grid-area: the_game_DataArea;
}

.the_game_Infobox {
    grid-area: the_game_Infobox;
}

.the_game_Main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 8.89vh 1fr 18.89vh;
    gap: 0;
    grid-auto-flow: row;
    grid-template-areas: "the_game_Messages" "the_game_Display" "the_game_Input";
    grid-area: the_game_Main;
}

.the_game_Messages {
    grid-area: the_game_Messages;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    max-height: 8.89vh;
}

.the_game_Display {
    grid-area: the_game_Display;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    max-height: 1fr;
    padding: 0 2vw; 
}

.the_game_Menu {
    grid-area: the_game_Menu;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr repeat(10, 7.36vh) 1fr;
    grid-template-areas: 
        "the_game_MenuTop"
        "the_game_Button1"
        "the_game_Button2"
        "the_game_Button3"
        "the_game_Button4"
        "the_game_Button5"
        "the_game_Button6"
        "the_game_Button7"
        "the_game_Button8"
        "the_game_Button9"
        "the_game_Button10"
        "the_game_MenuBottom";
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.the_game_menu_svg-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.the_game_menu_svg-background {
    height: 4.72vh;
    width: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.the_game_overlay_svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.the_game_overlay_svg img {
    height: 3vh;
    width: auto;
    display: block;
}

.the_game_menu_svg-background a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.home_container {
    display: grid;
    grid-template-columns: 44.65vh 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    gap: 0;
    grid-auto-flow: row;
    grid-template-areas: "index_menu index_main";
    background: url(/images/home_sx.svg) no-repeat top left, url(/images/home_dx.jpg) no-repeat top left;
    background-size: auto 100vh, auto 100vh;
}

.index_menu {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 24.83vh 3.35vh 1.81vh 3.35vh 1.81vh 3.35vh 1.81vh 3.35vh 56.35vh;
    gap: 0;
    grid-auto-flow: row;
    grid-template-areas: "index_top" "index_button1" "index_space1" "index_button2" "index_space2" "index_button3" "index_space3" "index_button4" "index_bottom";
    grid-area: index_menu;
}

.index_bottom {
    grid-area: index_bottom;
}

.index_button1, .index_button2, .index_button3, .index_button4 {
    grid-template-columns: 11.02vh 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    grid-auto-flow: row;
    grid-template-areas: ". index_field";
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 3.13vh;
    box-sizing: border-box;
    overflow: hidden;
}

.index_button1 {
    grid-area: index_button1;
}

.index_button2 {
    grid-area: index_button2;
}

.index_button3 {
    grid-area: index_button3;
}

.index_button4 {
    grid-area: index_button4;
}

.index_field1 {
    grid-area: index_field1;
}

.index_field2 {
    grid-area: index_field2;
}

.index_field3 {
    grid-area: index_field3;
}

.index_field4 {
    grid-area: index_field4;
}

.index_space1 {
    grid-area: index_space1;
}

.index_space2 {
    grid-area: index_space2;
}

.index_space3 {
    grid-area: index_space3;
}

.index_top {
    grid-area: index_top;
}


.index_main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 8.89vh 1fr 18.89vh !important;
    gap: 0 !important;
    height: 100vh !important;
    grid-template-areas: 
        "index_main_top" 
        "index_main_center" 
        "index_main_bottom" !important;
}

.index_main_top {
    grid-area: index_main_top !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.index_main_center {
    grid-area: index_main_center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    height: 100% !important;
    max-height: calc(100vh - 8.89vh - 18.89vh) !important;
    min-height: 0 !important;
}

.index_main_bottom {
    grid-area: index_main_bottom !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}



.index_main_center {
    grid-area: index_main_center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; 
    padding: 1.5vh;
}

.index_field1,
.index_field2,
.index_field3,
.index_field4 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: hidden;
    text-align: left;
    font-size: 2.6vh;
    word-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    max-height: 100%;
}

.index_main_center,
.the_game_Messages,
.the_game_Display,
.the_game_Input {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    font-size: 1.1vh;
    word-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    max-height: 100%;
}

.blurred {
    display: inline-block;
    border: 0.2vh solid #00aaff;
    border-radius: 1vh;
    overflow: hidden;
    padding: 1vh 1.5vh;
    backdrop-filter: blur(0.5vh);
    -webkit-backdrop-filter: blur(0.5vh);
    margin: auto;
    text-align: center;
    width: auto;
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
    overflow-y: auto;
    max-height: 60vh;
}

.index_main_top .blurred,
.index_main_bottom .blurred {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0.2vh solid #00aaff;
    border-radius: 1vh;
    overflow: hidden;
    padding: 1vh 1.5vh;
    backdrop-filter: blur(0.5vh);
    -webkit-backdrop-filter: blur(0.5vh);
    margin: auto;
    text-align: center;
    max-width: 90%;
    max-height: 60vh;
    white-space: normal;
    word-wrap: break-word;
    overflow-y: auto;
}

:not(.index_main_top) .blurred {
    font-size: 1.8vh;
}

.blurred * {
    margin: 0;
    padding: 0;
}

.blurred label {
    text-align: left;
    width: auto;
    display: inline-block;
}

.blurred input[type="text"], 
.blurred input[type="email"], 
.blurred input[type="password"], 
.blurred textarea, 
.blurred select {
    text-align: left;
    width: auto;
    font-size: 2.2vh; 
}

input[type="submit"] {
    color: black;
    margin-top: 1vh;
    font-size: 2.2vh; 
    padding: 1vh 2vh; 
}

.table-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.index_main_center ul {
    list-style-type: none;
    display: list-item;
    padding-left: 0;
}

.index_main_center ul ul {
    padding-left: 20px;
    display: list-item;
}

.index_main_center ul ul ul {
    padding-left: 20px;
    display: list-item;
}

.index_main_center ul ul ul li {
    display: list-item;
    list-style-type: none;
}

.index_main_center a {
    color: #00aaff;
    text-decoration: none;
}

.index_main_center a:hover {
    text-decoration: underline;
}

.blurred_guide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: 0.2vh solid #00aaff;
    border-radius: 1vh;
    overflow: hidden;
    padding: 1vh 1.5vh;
    backdrop-filter: blur(0.5vh);
    -webkit-backdrop-filter: blur(0.5vh);
    margin: 1.5vh;
    text-align: left;
    width: 90vw;
    height: 90vh;
    white-space: normal;
    word-wrap: break-word;
    overflow-y: auto;
}

.blurred_guide h1,
.blurred_guide h2 {
    margin: 1vh 0;
    color: #99c1f1;
    text-align: center;
    width: 100%;
}

.blurred_guide ul {
    list-style-type: disc;
    padding-left: 20px;
}

.blurred_guide ul ul {
    list-style-type: circle;
    padding-left: 20px;
}

.blurred_guide ul ul ul {
    list-style-type: square;
    padding-left: 20px;
}

.blurred_guide ul li {
    list-style-type: none;
}

.blurred_guide hr.separator {
    border: 1px solid #00aaff;
    margin: 20px 0;
}

.blurred_guide img.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

.the_game_Display ul {
    list-style-type: disc;
    padding-left: 20px;
}

.the_game_Display ul ul {
    list-style-type: circle;
    padding-left: 20px;
}

.the_game_Display ul ul ul {
    list-style-type: square;
    padding-left: 20px;
}

.the_game_Display ul ul ul ul {
    list-style-type: disc;
    padding-left: 20px;
}

.the_game_Display ul li {
    display: list-item;
}

.the_game_Display a {
    color: #00aaff;
    text-decoration: none;
}

.the_game_Display a:hover {
    text-decoration: underline;
}

.separator {
    border: 1px solid #00aaff;
    margin: 20px 0;
}

.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

.the_game_Display ul, 
.the_game_Display ul ul, 
.the_game_Display ul ul ul, 
.the_game_Display ul ul ul ul {
    list-style-type: disc;
}

li {
    list-style: initial;
}

.the_game_Menu li,
.the_game_Commands li,
.the_game_Infobox li {
    list-style: none;
}

#character-form {
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

#avatar-container {
    margin-top: 2vh;
}

.the_game_Input button[type="submit"] {
    background-color: #00aaff;
    color: white;
    padding: 1vh 2vh;
    border: none;
    border-radius: 0.5vh;
    cursor: pointer;
}

.the_game_Input button[type="submit"]:hover {
    background-color: #0088cc;
}

.avatar-container {
    margin-top: 20px;
}

.character-page-avatar .controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 1vh;
    justify-content: center; 
    width: 100%;
    margin-left: 0; 
}

.character-page-avatar .control-group {
    display: flex;
    flex-direction: column;
    margin: 0 0.5vw; 
    width: 100%;
    justify-content: center;
    align-items: center;
}

.character-page-avatar .randomize-button {
    cursor: pointer;
    background-color: #00aaff;
    color: white;
    border: none;
    border-radius: 0.5vh;
    text-align: center;
    transition: background-color 0.3s ease;
    margin-top: 1vh; 
    grid-column: span 2; 
    width: 100%; 
    box-sizing: border-box;
}

.character-page-avatar .randomize-button:hover {
    background-color: #0088cc;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1vh;
    justify-content: space-between;
    width: 100%;
}

.form-row label {
    flex: 1 1 100%;
    text-align: center;
}

.form-row input[type="text"], 
.form-row input[type="date"], 
.form-row input[type="number"], 
.form-row textarea {
    flex: 1 1 calc(33% - 2vh);
}

textarea {
    height: 12vh;
}

#avatar-preview {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

#avatar-container {
    margin: 1vh 0;
    width: 50%;
    height: auto;
    border: 1px solid #00aaff;
    border-radius: 1vh;
    overflow: hidden;
}

input[type="text"], 
input[type="email"], 
input[type="password"], 
textarea, 
select {
    color: black;
}

.the_game_no_input {
    grid-template-rows: 8.89vh 1fr;
}

.the_game_no_input .blurred {
    max-height: calc(100vh - 8.89vh - 8.89vh - 4.72vh);
    overflow-y: auto;
}

.the_game_no_input .the_game_Display {
    height: auto;
    max-height: calc(100vh - 8.89vh - 4.72vh);
    overflow-y: auto;
}

.character-page .form-row.name-row {
    display: flex;
    justify-content: space-evenly; 
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.character-page .form-row.name-row .name-container {
    width: 40%;
    box-sizing: border-box;
}

.character-page .form-row.name-row label {
    width: 100%;
    text-align: center;
    margin-bottom: 0.5vh;
}

.character-page .form-row.name-row input[type="text"] {
    width: 100%;
    margin-top: 0.5vh;
}

.character-page .attribute-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1vh;
    justify-content: space-between;
}

.character-page .name-container {
    width: calc(20% - 1vh); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.character-page .attribute-container {
    width: calc(16% - 1vh); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.character-page input[type="date"] {
    color: black; 
    width: 10em;
    padding: 0.5vh;
    font-size: 1.1vh;
}

.character-page .attribute-container label {
    text-align: center;
    margin-bottom: 0.5vh;
}

.character-page .attribute-container input[type="number"] {
    width: 3.5em; 
    padding: 0.5vh;
    text-align: left; 
    color: black; 
}

.character-page input[type="text"], 
.character-page input[type="date"], 
.character-page input[type="number"], 
.character-page textarea, 
.character-page select {
    font-size: 2.2vh; 
    width: auto; 
    padding: 0.5vh; 
}

.character-page .the_game_Display > .blurred:first-of-type {
    margin-right: 1vw;
    margin-bottom: 1vh;
    width: 100%;
}

.character-page .controls select {
    width: 100%;
    max-width: 18vw; 
}

.character-page-controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 1vh;
    justify-content: center;
}

.character-page-controls .randomize-button {
    width: 100%;
    max-width: 18vw; 
    padding: 0.5vh;
    font-size: 1.8vh;
    box-sizing: border-box;
    cursor: pointer;
    background-color: #00aaff;
    color: white;
    border: none;
    border-radius: 0.5vh;
    text-align: center;
    transition: background-color 0.3s ease;
    justify-self: center; 
}

.character-page-controls .randomize-button:hover {
    background-color: #0088cc;
}

.character-page .form-row textarea {
    width: 100%;
    margin-top: 0.5vh;
    height: 12vh;
}

.character-page .form-row label {
    text-align: center;
    width: 100%;
}


.index_main_center .blurred {
    font-size: 2.6vh; 
}

.index_main_center .blurred label {
    font-size: 2.6vh;
}

.index_main_center .blurred input[type="text"],
.index_main_center .blurred input[type="password"] {
    font-size: 2.6vh; 
    padding: 1vh; 
}

.index_main_center .blurred input[type="submit"] {
    font-size: 2.6vh; 
    padding: 1vh 2vh; 
}

.index_main_center {
    height: auto; 
    min-height: 100vh; 
}

.pg_view_sheet .the_game_Display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pg_view_sheet .character-info-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 2vh;
    padding: 0 2vw; 
}

.pg_view_sheet .avatar-column, 
.pg_view_sheet .details-column {
    width: calc(50% - 2vw); 
    box-sizing: border-box;
    display: flex;
    justify-content: center; 
    align-items: center; 
}

.pg_view_sheet .details-column {
    flex-direction: column;
    align-items: flex-start;
    gap: 1vh;
}

.pg_view_sheet .blurred {
    display: block;
    border: 0.2vh solid #00aaff;
    border-radius: 1vh;
    overflow: hidden;
    padding: 1vh 1.5vh;
    backdrop-filter: blur(0.5vh);
    -webkit-backdrop-filter: blur(0.5vh);
    text-align: left;
    width: 100%;
    white-space: normal;
    word-wrap: break-word;
}

.pg_view_sheet .birthdate {
    margin-bottom: 1vh;
    font-size: 2.2vh;
}

.pg_view_sheet .attributes {
    display: flex;
    flex-direction: column;
    gap: 0.5vh;
    font-size: 2.2vh;
}

.pg_view_sheet .description-container {
    margin-top: 2vh;
    padding: 0 2vw; 
    width: 100%; 
    box-sizing: border-box;
}

.pg_view_sheet .description {
    font-size: 2vh;
    text-align: left;
    width: 100%;
    color: #99c1f1;
}

.pg_view_sheet .avatar-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    position: relative; 
}

.pg_view_sheet .avatar-container svg {
    width: 100%;
    height: 100%;
    margin-bottom: -0.5vh; 
    position: relative;
    top: 0; 
}


#delete-character-form .delete-button {
    background-color: #ff4c4c;
    color: white;
    border: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.8vh;
    margin-top: 1.5vh;
    transition: background-color 0.3s ease;
}

#delete-character-form .delete-button:hover {
    background-color: #ff0000;
}




#weather-widget {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    color: white !important; 
}


#weather-widget .left-section {
    display: flex;
    align-items: center;
    padding-left: 0.2vh;
    height: 100%;
    min-width: 10%; 
}


#weather-widget .left-section img.meteo-bg-icon {
    height: 100%;
    object-fit: contain;
    display: block;
}


#weather-widget .right-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(221, 11, 47, 1);
    padding: 0 0.1vh; 
    height: 100%;
    overflow: hidden; 
}


#weather-widget .right-section img {
    height: auto;
    max-height: 3vh; 
    width: auto;
    margin: 0 0.1vh; 
}


#weather-widget .right-section p {
    margin: 0;
    margin-right: 0.05vh; 
    font-size: 2.7vh;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    display: flex;
    align-items: baseline; 
    color: inherit; 
}


#weather-widget .right-section p span.unit {
    font-size: 0.6em;
    vertical-align: baseline; 
    opacity: 0.8;
    margin-left: 0.2vh;
    display: inline-flex;
    align-items: baseline;
    color: inherit; 
}




.avatar-widget {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.avatar-widget-blurred {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.2vh solid #00aaff;
    border-radius: 1vh;
    overflow: hidden;
    backdrop-filter: blur(0.5vh);
    -webkit-backdrop-filter: blur(0.5vh);
    box-sizing: border-box;
    
    
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    
    
    aspect-ratio: 1 / 1;
}

.avatar-widget-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.avatar-widget-container svg {
    width: 100%;
    height: auto;
    max-height: 100%;
    box-sizing: border-box;
    object-fit: contain;
}


.name-widget {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.name-widget-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 1vh;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    white-space: nowrap; 
}

.name-widget-text {
    font-size: 3vh; 
    line-height: 1.2;
    color: #99c1f1;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    word-wrap: break-word; 
}


.location-widget {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.location-widget-container {
    padding: 1vh;
    overflow: hidden;
    text-align: center;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.location-widget-text {
    font-size: 2.5vh;
    color: #99c1f1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: normal; 
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto; 
    box-sizing: border-box;
}




.user_profile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    position: relative;
    padding-top: 2vh;
}


.user_profile-header {
    width: 100%;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    padding-bottom: 1vh;
}


.user_profile-title {
    margin-bottom: 1vh;
}


.user_profile-tab-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2vh;
}


.user_profile-tab-button {
    background-color: #00aaff;
    color: white;
    border: none;
    padding: 1vh 2vh;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 2.2vh;
}

.user_profile-tab-button:hover {
    background-color: #0088cc;
}

.user_profile-tab-button.active {
    background-color: #0077aa;
}


.user_profile-forms-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 20vh); 
    overflow: hidden; 
    width: 100%;
}


.user_profile-forms-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 100%; 
    margin: auto;
    overflow-y: auto; 
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}


.user_profile-tab-content {
    display: none; 
    transition: opacity 0.5s ease-in-out;
}


.user_profile-tab-content.active {
    display: block; 
}


.fade-in {
    animation: fadeIn 0.5s forwards;
}

.fade-out {
    animation: fadeOut 0.5s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


.admin_tasks-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1vh;
    margin-bottom: 2vh;
}

.admin_tasks-title {
    margin: 0;
    padding: 0;
}

.admin_tasks-tab-container {
    display: flex;
    gap: 1vh;
}

.admin_tasks-tab-button {
    background-color: #00aaff;
    color: white;
    border: none;
    padding: 1vh 2vh;
    cursor: pointer;
    font-size: 2.2vh;
}

.admin_tasks-tab-button:hover {
    background-color: #0088cc;
}

.admin_tasks-tab-button.active {
    background-color: #0077aa;
}


.admin_tasks-forms-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 20vh); 
    overflow: hidden; 
    width: 100%;
}

.admin_tasks-forms-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    width: 100%;
    height: 100%; 
    overflow-y: auto; 
    padding: 1vh; 
    box-sizing: border-box; 
}


.admin_tasks-tab-content {
    display: none; 
    transition: opacity 0.5s ease-in-out;
}


.admin_tasks-tab-content.active {
    display: block; 
}