*{
	margin: 0;
	padding: 0;
}

:root {
    --ps-black: #000000;       /* Schwarz */
    --ps-dark-gray: #1B1D1F;   /* Dunkelgrau */
    --ps-gray: #3A3A3C;        /* Grau */
    --ps-light-gray: #111111;  /* Hellgrau */
    --ps-bright-gray: #CCCCCC; /* Sehr helles Grau */
    --ps-white: #FFFFFF;       /* Weiß */

    --ps-blue: #003087;        /* PlayStation Blau */
    --ps-medium-blue: #1F5FBA; /* Mittleres Blau */
    --ps-light-blue: #4F8FF7;  /* Helles Blau */

    --ps-dark-red: #8B0000;    /* Dunkles Rot */
    --ps-red: #D71920;         /* Rot */
    --ps-medium-red: #E53935;  /* Mittleres Rot */	 
    --ps-light-red: #F28B82;   /* Helles Rot */

    --ps-dark-green: #006400;  /* Dunkles Grün */
    --ps-green: #27A844;       /* Grün */
    --ps-light-green: #81C784; /* Helles Grün */

    --ps-orange: #FFA500;      /* Orange */	 
    --ps-yellow: #FFC300;      /* Gelb */

    /* RGB-Werte */
    --ps-black-rgb: 0, 0, 0;         /* Schwarz */
    --ps-dark-gray-rgb: 27, 29, 31;  /* Dunkelgrau */
    --ps-gray-rgb: 58, 58, 60;       /* Grau */
    --ps-light-gray-rgb: 17, 17, 17; /* Hellgrau */
    --ps-bright-gray-rgb: 204, 204, 204; /* Sehr helles Grau */
    --ps-white-rgb: 255, 255, 255;   /* Weiß */

    --ps-blue-rgb: 0, 48, 135;       /* PlayStation Blau */
    --ps-medium-blue-rgb: 31, 95, 186; /* Mittleres Blau */
    --ps-light-blue-rgb: 79, 143, 247; /* Helles Blau */

    --ps-dark-red-rgb: 139, 0, 0;    /* Dunkles Rot */
    --ps-red-rgb: 215, 25, 32;       /* Rot */
    --ps-medium-red-rgb: 229, 57, 53; /* Mittleres Rot */
    --ps-light-red-rgb: 242, 139, 130; /* Helles Rot */

    --ps-dark-green-rgb: 0, 100, 0;  /* Dunkles Grün */
    --ps-green-rgb: 39, 168, 68;     /* Grün */
    --ps-light-green-rgb: 129, 199, 132; /* Helles Grün */

    --ps-orange-rgb: 255, 165, 0;    /* Orange */
    --ps-yellow-rgb: 255, 195, 0;    /* Gelb */
 
}
	
html, body {
    height: 96vh;
    width: 100%;
    margin: 0px;
    padding: 0px;
	 font-family: 'ProximaNova', sans-serif;	 
}

/* Hintergrundbild-Einstellungen */
body {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.background {
    padding: 0px;
    margin: 0px;
}


/******************************************************************************/
/* basic stuff: p, ul, hr, a, 
/******************************************************************************/


/* Standard für große Bildschirme */
h1 {
    font-size: 3rem;
    line-height: 4rem;
    margin-top: 1rem;
    margin-bottom: 1.2rem;
}

h2 {
    font-size: 2.5rem;
    line-height: 3rem;
    margin-top: 1rem;
    margin-bottom: 1.2rem;
}

h3 {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-top: 1rem;
    margin-bottom: 1.2rem;
}

h4 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-top: 1rem;
    margin-bottom: 1.2rem;
}

p, ul, li {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

a {
	color: var(--ps-white);
	text-decoration: none;
}

a:hover {
	color: var(--ps-white);
}

/* Headline-Text mit Schatten */
.headline-white-shadow {
    font-size: 2.5rem;
    font-weight: 900;
    text-shadow: 1px 1px 2px rgba(var(--ps-black-rgb), 0.5);
}

/* Kleinere, aber wichtige Texte */
.text-white-noshadow {
    font-size: 1rem;
    font-weight: 900;
}

.text-small-white-noshadow {
    font-size: 0.8rem;
    line-height: 1rem;
    font-weight: 400;
}

.marker {
	color: var(--ps-orange);
	font-weight: 900;
}

/* Anpassungen für mittlere Bildschirme (1280px bis 1024px) */
@media screen and (max-width: 1280px) {
    h1 {
        font-size: 2.5rem;
        line-height: 3rem;
    }

    h2 {
        font-size: 2.3rem;
        line-height: 2.8rem;
    }

    h3 {
        font-size: 1.8rem;
        line-height: 2.3rem;
    }

    h4 {
        font-size: 1.3rem;
        line-height: 1.8rem;
    }

    p, ul, li, .text-white-shadow, .column {
        font-size: 0.9rem;
        line-height: 1.3rem;
    }

    .headline-white-shadow {
        font-size: 2rem;
    }
}

/* Anpassungen für Tablets und kleinere Geräte (1024px bis 512px) */
@media screen and (min-width: 512px) and (max-width: 1024px) {
    h1 {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    h2 {
        font-size: 1.8rem;
        line-height: 2.3rem;
    }

    h3 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    h4 {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }

    p, ul, li, .text-white-shadow, .column {
        font-size: 0.8rem;
        line-height: 1.2rem;
    }

    .headline-white-shadow {
        font-size: 1.8rem;
    }
}

/* Anpassungen für sehr kleine Bildschirme (bis 512px) */
@media screen and (max-width: 512px) {
    h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    h2 {
        font-size: 1.3rem;
        line-height: 1.6rem;
    }

    h3 {
        font-size: 1.1rem;
        line-height: 1.4rem;
    }

    h4 {
        font-size: 1rem;
        line-height: 1.3rem;
    }

    p, ul, li, .text-white-shadow, .column {
        font-size: 0.7rem;
        line-height: 1rem;
    }

    .headline-white-shadow {
        font-size: 1.5rem;
    }
}



/******************************************************************************/
/* outer div and card layout
/******************************************************************************/

.card-custom {	 
	padding: 0;	 
	border-radius: 0em;
	margin-top: 2.3em;
	z-index: 1;
}

.card-body {
    border-radius: 0em;
    margin: 1em 1em 0em 1em;
    padding: 0.3em 0em 0em 0em;	 
	 border-radius: 1em;
    z-index: 1;	 
}


/******************************************************************************/
/* background
/******************************************************************************/

.background {
    z-index: -1;
}


/******************************************************************************/
/* top navigation
/******************************************************************************/

/* Container for the entire navigation */
.navigation {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    padding: 0.3em;
    margin: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between; /* Positioniert die Bereiche links und rechts */
    align-items: flex-start; /* Richtet die inneren Elemente oben aus */
    background-color: var(--ps-black);
    border-radius: 5px;
}

/* Innerer Container für den Inhalt */
#nav-content {
    display: flex;
    width: 100%;
    gap: 0.5em;
    border-radius: 5px;
    padding: 0;
    transition: max-height 0.3s ease-in-out;
    justify-content: space-between;
}

/* Bereich "save-cancel-area" bleibt links und oben ausgerichtet */
.save-cancel-area {
    display: flex;
    gap: 0.5em;
    align-items: flex-start; /* Oben ausrichten */
    flex-shrink: 0; /* Verhindert Größenänderung */
	 margin-right: 20px;
}

/* Bereich "general-button-area" kann bei schmalem Bildschirm umbrechen */
.general-button-area {
    display: flex;
    flex-wrap: wrap; /* Ermöglicht das Umbrechen */
    gap: 0.5em;
    justify-content: flex-start; /* Links ausrichten */
    flex-grow: 1; /* Füllt den verfügbaren Platz */
    max-width: 100%; /* Verhindert Überbreite */
}

/* Bereich "logout-area" bleibt rechts und oben ausgerichtet */
.logout-area {
    display: flex;
    gap: 0.5em;
    align-items: flex-start; /* Oben ausrichten */
    flex-shrink: 0; /* Verhindert Größenänderung */
	 margin-left: 15px;
}




/******************************************************************************/
/* custom button styles
/******************************************************************************/

.button-text {
   font-weight: 900;
	text-decoration: none !important;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

.nav-button {
	background: linear-gradient(to bottom, var(--ps-black), var(--ps-dark-gray));
	margin: 0em;
	padding: 0.1em 0.5em 0.1em 0.5em;
   border-radius: 5px;
}

.button-outline {
   position: relative;		
	display: flex;
   margin: 0em;
	padding: 0em;
}


.button-outline:hover::after, .button-outline:hover::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   translate: -50% -50%;
   height: 102%;
   width: 103%;

   background-image: conic-gradient(from var(--angle), #0000ff, #00aaff, #0000ff, #000000, #000000, #000000, #000000, #000000, #0000ff, #00aaff, #000000, #000000, #000000, #000000, #000000);
   animation: 3s spin linear infinite;
	padding: 0.3em 0.8em 0.3em 0.8em;
	margin: 0em;
   border-radius: 5px;
	border: 0em;
   z-index: -1;
}

/* Blur effect for the conic-gradient */
.button-outline:hover::before {
   filter: blur(1.2em);
   opacity: 0.5;
}

/* Keyframes for the spin animation */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

.btn-home,
.btn-spt,
.btn-new-game,
.btn-suggest,
.btn-show-game,
.btn-edit-game,
.btn-full-edit,
.btn-search,
.btn-backlog,
.btn-download {
	background: linear-gradient(to top, var(--ps-dark-gray), var(--ps-gray)) !important;
}

.btn-home:hover,
.btn-spt:hover,
.btn-new-game:hover,
.btn-suggest:hover,
.btn-show-game:hover,
.btn-edit-game:hover,
.btn-full-edit:hover,
.btn-search:hover,
.btn-backlog:hover,
.btn-download:hover {
	background: linear-gradient(to bottom, var(--ps-gray), var(--ps-light-gray)) !important;
}

/* Styles for buttons with icons */
.with-icon {
  display: flex;
  align-items: center;
  gap: 0.3em; /* Abstand zwischen Text und Icon */
  background-position: left center; /* Icon rechts im Button zentriert */
  background-repeat: no-repeat;
  background-size: 16px 16px;
}


.btn-login, .btn-save {
	background: linear-gradient(to top, var(--ps-green), var(--ps-dark-green)) !important;
	color: white;
}

.btn-login:hover, .btn-save:hover {
	background: linear-gradient(to bottom, var(--ps-green), var(--ps-dark-green)) !important;
}

.btn-logout, .btn-cancel {
	background: linear-gradient(to top, var(--ps-red), var(--ps-dark-red)) !important;
}

.btn-logout_hover, .btn-cancel:hover {
	background: linear-gradient(to bottom, var(--ps-red), var(--ps-dark-red)) !important;
}

.btn-find-more {
	background: linear-gradient(to top, var(--ps-orange), var(--ps-yellow)) !important;
}

.btn-find-more:hover {
	background: linear-gradient(to bottom, var(--ps-orange), var(--ps-yellow)) !important;
}

.btn-copy {
	background: linear-gradient(to top, var(--ps-green), var(--ps-dark-green)) !important;
}

.btn-copy:hover {
	background: linear-gradient(to bottom, var(--ps-green), var(--ps-dark-green)) !important;
}

.btn-scrape {
	background: linear-gradient(to top, var(--ps-blue), var(--ps-medium-blue)) !important;
}

.btn-scrape:hover {
	background: linear-gradient(to bottom, var(--ps-blue), var(--ps-medium-blue)) !important;
}

.btn-check {
	background: linear-gradient(to top, var(--ps-orange), var(--ps-yellow)) !important;
}

.btn-check:hover {
	background: linear-gradient(to bottom, var(--ps-orange), var(--ps-yellow)) !important;
}

.btn-spacer {
	width: 20px !important;
	background: var(--ps-black) !important;
}

.btn-spacer:hover {
}


	
/* Bei schmalen Bildschirmen (max-width: 700px) nur Icons anzeigen */
@media screen and (max-width: 700px) {

	.btn-show-game,
	.btn-edit-game,
	.btn-full-edit,
	.btn-download {
		display: none;  /* Blendet die Buttons aus */
    }

    .button-text {
        display: none; /* Text ausblenden */
		  padding: 0;
    }

    .nav-button {
        justify-content: flex-start; /* Buttons am linken Rand */
    }

    /* Navigation linksbündig */
    .navigation {
		 padding: 0.3em;
        justify-content: flex-start;
    }

	 .button-icon::before {
	   content: '';
	   display: inline-block;
	   width: 1.5em !important;
	   height: 1.5em !important;
	   background-color: white; /* Hier wird die Farbe des Icons definiert */
	   mask-size: contain;
	   mask-repeat: no-repeat;
	   mask-position: left center;
	   margin-left: 0em;
		padding: 0em;
	   vertical-align: middle;
	 }

    /* Größere Icons in den Buttons */
    .nav-button::before {
        width: 20em; /* Größere Icon-Breite */
        height: 20em; /* Größere Icon-Höhe */
        margin-left: 0.5em; /* Kein zusätzlicher Abstand rechts */
    }

    /* Anpassung des Button-Paddings für größere Icons */
    .nav-button {
        padding: 0.3em 0.05em; /* Mehr Platz für größere Icons */
    }
	 
	 .btn-spacer {
	 	width: 0.1em !important;
	 	background: var(--ps-black) !important;
	 }
	 
}



/******************************************************************************/
/* SVG icons
/******************************************************************************/

.button-icon::before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-color: white; /* Hier wird die Farbe des Icons definiert */
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: left center;
  margin-right: 0.5em;
  vertical-align: middle;
}

/* home Button SVG */
.home::before {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 -960 960 960" width="0.5em" fill="white"><path d="M229-189h127v-211q0-18.8 13.31-32.4Q382.63-446 401-446h158q18.8 0 32.4 13.6Q605-418.8 605-400v211h126v-376.67L480-754 229-566.33V-189Zm-91 0v-377q0-22.04 8.97-40.95Q155.94-625.86 174-639l251-190q22.68-17 54.84-17Q512-846 536-829l251 190q17.53 13.14 26.77 32.05Q823-588.04 823-566v377q0 37.8-26.89 64.4Q769.21-98 731-98H570q-19.78 0-32.39-13.32Q525-124.65 525-144v-222h-89v222q0 19.35-12.9 32.68Q410.2-98 390-98H229q-37.8 0-64.4-26.6Q138-151.2 138-189Zm342-283Z"/></svg>');
}

/* new Button SVG */
.new::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 -960 960 960" width="0.5em" fill="white"><path d="M555.74-397q11.26 0 20.26-8.61 9-8.62 9-19.39v-104h102q11.8 0 20.4-8.36 8.6-8.36 8.6-19.8 0-11.44-8.6-20.14-8.6-8.7-20.4-8.7H585v-103q0-11.2-8.73-20.1-8.73-8.9-20.73-8.9-11.57 0-19.55 8.9Q528-700.2 528-689v103H424q-11.37 0-19.69 8.65-8.31 8.65-8.31 20.53 0 11.44 8.31 19.63Q412.63-529 424-529h104v104q0 10.77 8.24 19.39 8.23 8.61 19.5 8.61ZM285-195q-36.41 0-63.71-27.61Q194-250.23 194-286v-542q0-36.19 27.29-64.09Q248.59-920 285-920h542q36.19 0 63.59 27.91Q918-864.19 918-828v542q0 35.77-27.41 63.39Q863.19-195 827-195H285Zm0-91h542v-542H285v542ZM134-44q-36.82 0-63.91-27.41Q43-98.81 43-135v-588q0-18.38 12.66-31.69Q68.32-768 88.16-768T121-754.69q13 13.31 13 31.69v588h587q18.8 0 32.4 12.68Q767-109.65 767-89.51t-13.6 32.83Q739.8-44 721-44H134Zm151-784v542-542Z"/></svg>');
}

/* show Button SVG */
.show::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="white"><path d="M480.29-333q69.71 0 118.21-48.79 48.5-48.8 48.5-118.5 0-69.71-48.79-118.21-48.8-48.5-118.5-48.5-69.71 0-118.21 48.79-48.5 48.8-48.5 118.5 0 69.71 48.79 118.21 48.8 48.5 118.5 48.5Zm-.41-71q-39.46 0-67.67-28.33Q384-460.65 384-500.12q0-39.46 28.33-67.67Q440.65-596 480.12-596q39.46 0 67.67 28.33Q576-539.35 576-499.88q0 39.46-28.33 67.67Q519.35-404 479.88-404Zm.12 224q-139 0-252.95-76.68Q113.1-333.35 46-456q-6-9.92-9-21.62-3-11.7-3-22.28 0-10.58 3-22.31 3-11.72 9-22.79 67.1-121.65 181.05-198.32Q341-820 480-820t252.95 76.68Q846.9-666.65 914-545q6 10.92 9 22.62 3 11.7 3 22.28 0 10.58-3 22.31-3 11.72-9 21.79-67.1 122.65-181.05 199.32Q619-180 480-180Zm0-320Zm-.08 240q122.08 0 221.37-65.04T854-500q-53.42-109.92-152.63-174.96T480.08-740Q358-740 258.21-674.96T105-500q53.42 109.92 153.13 174.96T479.92-260Z"/></svg>');
}

/* suggest Button SVG */
.suggest::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="white"><path d="M473.61-249q18.39 0 31.89-13.39 13.5-13.38 13.5-31.48 0-18.09-13.47-31.11T473.31-338q-17.59 0-30.95 12.83T429-293.59q0 17.59 13.11 31.09 13.12 13.5 31.5 13.5ZM601-596.96q0-53.19-33.24-85.61Q534.51-715 477-715q-40.75 0-74.55 18.2Q368.66-678.6 345-644q-8 12-1.94 26.06 6.05 14.06 19.79 17.58Q376-595 390.5-599q14.5-4 24.5-15 11-15 26.1-22 15.09-7 35.02-7 24.53 0 39.21 14.04Q530-614.92 530-593.32q0 14.76-10 32.11-10 17.36-29 35.21-29 31-40.43 50.5Q439.13-456 436-428q-1 13.24 8.76 23.12t24.67 9.88q13.24 0 22.9-8.5 9.67-8.5 14.67-26 4-15.5 14.5-29t26.53-28.88Q576-516 588.5-541.93q12.5-25.93 12.5-55.03ZM189-98q-37.18 0-64.09-26.91Q98-151.82 98-189v-582q0-37.59 26.91-64.79Q151.82-863 189-863h582q37.59 0 64.79 27.21Q863-808.59 863-771v582q0 37.18-27.21 64.09Q808.59-98 771-98H189Zm0-91h582v-582H189v582Zm0-582v582-582Z"/></svg>');
}

/* search Button SVG */
.search::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 -960 960 960" width="0.5em" fill="white"><path d="M373.44-315q-115.31 0-193.88-78.7Q101-472.41 101-585.2q0-112.8 78.7-191.3Q258.41-855 371.2-855q112.8 0 191.3 78.64Q641-697.71 641-584.85q0 45.85-13 83.35-13 37.5-38 71.5l237 235q13 13.56 13 33.26 0 19.7-13 33.24-14.33 13.5-33.24 13.5-18.92 0-32.76-14L526.47-364q-30.47 22.92-68.93 35.96Q419.08-315 373.44-315Zm-2-91q75.99 0 127.27-51.54Q550-509.08 550-584.59q0-75.5-51.35-127.46Q447.31-764 371.53-764q-76.61 0-128.07 51.95Q192-660.09 192-584.59q0 75.51 51.31 127.05Q294.62-406 371.44-406Z"/></svg>');
}

/* backlog Button SVG */
.backlog::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="white"><path d="M440-120q-75 0-140.5-28T185-225q-49-49-77-114.5T80-480q0-75 28-140.5T185-735q49-49 114.5-77T440-840q21 0 40.5 2.5T520-830v82q-20-6-39.5-9t-40.5-3q-118 0-199 81t-81 199q0 118 81 199t199 81q118 0 199-81t81-199q0-11-1-20t-3-20h82q2 11 2 20v20q0 75-28 140.5T695-225q-49 49-114.5 77T440-120Zm112-192L400-464v-216h80v184l128 128-56 56Zm168-288v-120H600v-80h120v-120h80v120h120v80H800v120h-80Z"/></svg>');
}

/* edit Button SVG */
.edit::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="white"><path d="M190-99q-37.18 0-64.09-26.91Q99-152.82 99-190v-580q0-37.59 26.91-64.79Q152.82-862 190-862h291q23.5 0 35.25 14.32t11.75 31.5q0 17.18-11.72 31.68T482-770H190v580h580v-294q0-22 14.49-34t31.87-12q17.02 0 31.33 12Q862-506 862-484v294q0 37.18-27.21 64.09Q807.59-99 770-99H190Zm290-381Zm-130 85v-102q0-18.58 7.09-35.43Q364.17-549.27 378-562l343-343q13-13.5 29.71-19.75 16.72-6.25 33.93-6.25 18.36 0 34.98 7 16.62 7 30.38 20l53 53q13.61 13.96 20.8 30.74 7.2 16.77 7.2 34.13 0 17.7-7.26 35.85Q916.48-732.12 903-719L562-377q-13.04 14.17-29.78 20.58Q515.48-350 497-350H395q-18.37 0-31.69-13.31Q350-376.63 350-395Zm510-391-76-75 76 75ZM427-427h76l247-247-38.04-38L674-749 427-504v77Zm284.96-285L674-749l37.96 37L750-674l-38.04-38Z"/></svg>');
}

/* fulledit Button SVG */
.fulledit::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="white"><path d="M190-443h245v-161H190v161Zm0-252h580v-75H190v75ZM561-59q-19.35 0-32.67-12.63Q515-84.25 515-105v-57q0-19.49 6.52-36.09Q528.04-214.7 542-228l197.74-195.78q10.39-11.93 23.99-17.07Q777.33-446 792-446q14 0 27.63 6 13.63 6 24.37 16l37 38q9.82 10 15.41 23.42 5.59 13.41 5.59 26.83 0 14.75-5.76 28.75-5.77 14-16.41 25.22L684-86q-12.2 13-29.21 20-17.02 7-35.79 7h-58Zm268-277-37-37 37 37ZM190-99q-37.18 0-64.09-26.91Q99-152.82 99-190v-580q0-37.59 26.91-64.79Q152.82-862 190-862h580q37.59 0 64.79 27.21Q862-807.59 862-770v213q0 19.78-13.26 32.39Q835.47-512 815.92-512t-32.74-12.61Q770-537.22 770-557v-47H526v161h62q14.5 0 21.25 15T605-404L474-274q-10 11-24.5 5.79T435-289v-62H190v161h199q18.8 0 32.4 13.38 13.6 13.37 13.6 32.11 0 20.14-13.6 32.83Q407.8-99 389-99H190Zm0-91v-161 161Zm336-253v-161 161Zm63 310h38l118-118.77L708-289 589-171.24V-133Zm138-138-19-18 37 37-18-19Z"/></svg>');
}

/* download Button SVG */
.download::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 -960 960 960" width="0.5em" fill="white"><path d="M480.26-342q-8.4 0-17.85-3.77-9.45-3.78-15.41-10.23L288-516q-14-12.36-13.71-31.21.29-18.84 14.32-32.36 12.79-13.58 32.39-13.01 19.6.58 33 13.58l81 81v-278q0-19.65 12.86-32.83Q460.72-822 480.36-822T513-808.83q13 13.18 13 32.83v278l82-81q12.67-13 30.75-13.66 18.08-.65 32.41 12.58Q684-567 684-547.68T671-514L513-356q-5.81 6.45-15.22 10.23-9.41 3.77-17.52 3.77ZM230-139q-37.18 0-64.09-26.91Q139-192.82 139-230v-98q0-18.38 12.86-31.69Q164.72-373 184.36-373T217-359.69q13 13.31 13 31.69v98h500v-98q0-18.38 13.56-31.69Q757.12-373 775.77-373q20.05 0 33.14 13.31T822-328v98q0 37.18-27.21 64.09Q767.59-139 730-139H230Z"/></svg>');
}

/* SPT Button SVG */
.spt::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 -960 960 960" width="0.5em" fill="white"><path d="M189-98q-37.05 0-64.03-26.97Q98-151.95 98-189v-582q0-37.46 26.97-64.73Q151.95-863 189-863h582q37.46 0 64.73 27.27Q863-808.46 863-771v582q0 37.05-27.27 64.03Q808.46-98 771-98H189Zm0-91h582v-582H189v582Zm0 0v-582 582Zm81-81h422q13 0 19.5-12.63Q718-295.25 710-307L597-463q-7.31-7-19.15-7.5Q566-471 560-462L446-317l-73-102q-8.31-9-20.15-8.5Q341-427 335-419l-83 112q-9 11.75-2.5 24.37Q256-270 270-270Z"/></svg>');
}

/* logout Button SVG */
.logout::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 -960 960 960" width="0.5em" fill="white"><path d="M190-99q-37.45 0-64.22-26.78Q99-152.55 99-190v-580q0-37.86 26.78-64.93Q152.55-862 190-862h250q18.38 0 31.69 13.26Q485-835.47 485-815.92t-13.31 32.74Q458.38-770 440-770H190v580h250q18.38 0 31.69 13.38Q485-163.25 485-144.51q0 20.14-13.31 32.83Q458.38-99 440-99H190Zm499-335H401q-20.75 0-33.37-13.56Q355-461.12 355-479.86q0-20.14 12.63-32.64Q380.25-525 401-525h286l-65-65q-13-13.65-12.5-32.47t13.5-31.67Q636-668 654.93-667q18.94 1 33.07 13l143 143q11 13.73 11 32.36Q842-460 831-448L689-305q-13.8 13-31.9 12.5-18.1-.5-32.49-12.5-12.61-14.13-13.15-32.94-.54-18.81 14.54-32.06l63-64Z"/></svg>');
}

/* login Button SVG */
.login::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 -960 960 960" width="0.5em" fill="white"><path d="M521-99q-19.35 0-32.67-12.68-13.33-12.67-13.33-33Q475-164 488.33-177q13.32-13 32.67-13h249v-580H521q-19.35 0-32.67-13.38Q475-796.75 475-816.09q0-19.73 13.33-32.82Q501.65-862 521-862h249q37.86 0 64.93 27.07Q862-807.86 862-770v580q0 37.45-27.07 64.22Q807.86-99 770-99H521Zm-88-335H145q-20.75 0-33.37-13.38Q99-460.75 99-480.18q0-19.82 12.63-32.32Q124.25-525 145-525h286l-65-65q-13-13.65-12.5-32.33Q354-641 367-654q13-14 31.78-13 18.79 1 32.22 13l143 143q12 13.36 12 32.18T574-448L432-305q-13.8 13-31.7 12.57-17.9-.43-31.33-12.78-12.97-13.34-13.47-32.57Q355-357 369-370l64-64Z"/></svg>');
}

/* save Button SVG */
.save::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="white"><path d="m419-413-79-80q-12.8-12-31.51-12T276-492.5Q263-479 263-460t14 30l110 111q12.27 14 31.64 14Q438-305 452-319l227-227q14-12.8 14-31.01T679.16-610q-13.84-12-33.11-11.5T614-609L419-413Zm61.14 354q-86.78 0-164.11-32.6-77.32-32.61-134.57-89.86T91.6-315.89Q59-393.08 59-479.86q0-87.04 32.66-164.09 32.67-77.05 90.02-134.49 57.35-57.45 134.35-90.5 77-33.06 163.75-33.06 87.11 0 164.31 32.96 77.21 32.97 134.56 90.26 57.36 57.29 90.35 134.45 33 77.16 33 164.41 0 87.2-33.06 164.01-33.05 76.81-90.5 134.2Q721-124.33 644.09-91.66 567.17-59 480.14-59Zm-.37-91q136.74 0 233.49-96.39Q810-342.77 810-479.77q0-136.74-96.51-233.49Q616.97-810 479.73-810q-136.24 0-232.99 96.51Q150-616.97 150-479.73q0 136.24 96.39 232.99Q342.77-150 479.77-150Zm.23-330Z"/></svg>');
}

/* cancel Button SVG */
.cancel::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="white"><path d="m480-432 118 117q9 10 23 10.5t25-10.85q11-10.34 11-23.74 0-13.4-11-24.91L528-480l118-118q9-9 10-23t-9.84-25q-11.25-11-24.5-11T598-646L480-528 363-646q-10-9-23.5-10t-23.5 9.84q-12 11.25-12 24.5T316-598l116 118-117 117q-10 10-10.5 23.5t10.85 23.5q10.34 12 23.74 12 13.4 0 24.91-12l116-116Zm.14 373q-86.78 0-164.12-32.52t-134.66-89.84q-57.32-57.32-89.84-134.52Q59-393.08 59-479.86q0-87.04 32.58-164.1 32.58-77.07 90-134.58 57.43-57.51 134.44-90.49Q393.03-902 479.78-902q87.11 0 164.33 32.88 77.22 32.88 134.64 90.24 57.42 57.37 90.34 134.54Q902-567.17 902-479.92q0 87.2-32.97 164.02-32.98 76.82-90.49 134.28-57.51 57.46-134.44 90.04Q567.17-59 480.14-59Zm-.37-91q136.74 0 233.49-96.39Q810-342.77 810-479.77q0-136.74-96.51-233.49Q616.97-810 479.73-810q-136.24 0-232.99 96.51Q150-616.97 150-479.73q0 136.24 96.39 232.99Q342.77-150 479.77-150Zm.23-330Z"/></svg>');
}

/* copy Button SVG */
.copy::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="white"><path d="M61-480q0-86.02 33.22-162.47 33.21-76.44 90.37-133.38 57.15-56.93 133.77-90.54Q394.98-900 481-900q138 0 245 79t150 202q6 18-2.93 35.35-8.93 17.36-27.38 22.81Q828-555 812.5-564.5 797-574 790-591q-22.16-67-70.58-118T604-788v16.35Q604-737 581-713t-58.12 24H439v85q0 17.58-12.5 27.29T395-567h-79v85h61q20.2 0 33.1 13.4Q423-455.2 423-435v74h-65L162-557q-5 19-7 37.67-2 18.66-2 37.72 0 114.03 67 200.82Q287-194 392-165q18.51 4.12 26.76 20.56Q427-128 422-109.5q-6 18.82-22.58 28.66Q382.85-71 364-77q-132-37-217.5-148.13Q61-336.27 61-480Zm763 367L721-215q-21 12-43.5 19t-46.07 7q-74.76 0-127.59-52.29-52.84-52.3-52.84-128 0-74.71 52.79-127.21 52.8-52.5 127.5-52.5 75.71 0 128.21 52.63 52.5 52.62 52.5 127.8 0 24.57-7.5 46.57T785-279l103 102q14 14 13.5 32.5t-13 32Q876-98 856.5-98T824-113ZM630.86-280q36.44 0 62.79-26.42T720-368.86q0-36.44-26.22-62.79T631.1-458q-36.46 0-62.28 26.22T543-369.1q0 36.46 25.92 62.78T630.86-280Z"/></svg>');
}

/* scrape Button SVG */
.scrape::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="white"><path d="M61-480q0-86.02 33.22-162.47 33.21-76.44 90.37-133.38 57.15-56.93 133.77-90.54Q394.98-900 481-900q138 0 245 79t150 202q6 18-2.93 35.35-8.93 17.36-27.38 22.81Q828-555 812.5-564.5 797-574 790-591q-22.16-67-70.58-118T604-788v16.35Q604-737 581-713t-58.12 24H439v85q0 17.58-12.5 27.29T395-567h-79v85h61q20.2 0 33.1 13.4Q423-455.2 423-435v74h-65L162-557q-5 19-7 37.67-2 18.66-2 37.72 0 114.03 67 200.82Q287-194 392-165q18.51 4.12 26.76 20.56Q427-128 422-109.5q-6 18.82-22.58 28.66Q382.85-71 364-77q-132-37-217.5-148.13Q61-336.27 61-480Zm763 367L721-215q-21 12-43.5 19t-46.07 7q-74.76 0-127.59-52.29-52.84-52.3-52.84-128 0-74.71 52.79-127.21 52.8-52.5 127.5-52.5 75.71 0 128.21 52.63 52.5 52.62 52.5 127.8 0 24.57-7.5 46.57T785-279l103 102q14 14 13.5 32.5t-13 32Q876-98 856.5-98T824-113ZM630.86-280q36.44 0 62.79-26.42T720-368.86q0-36.44-26.22-62.79T631.1-458q-36.46 0-62.28 26.22T543-369.1q0 36.46 25.92 62.78T630.86-280Z"/></svg>');
}

/* check Button SVG */
.check::before {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="white"><path d="M142-99q-37.17 0-64.09-26.59Q51-152.19 51-190v-581q0-37.59 26.91-64.79Q104.83-863 142-863h676q37.59 0 64.79 27.21Q910-808.59 910-771v581q0 37.81-27.21 64.41Q855.59-99 818-99H142Zm0-91h676v-581H142v581Zm240-92q15.05 0 27.03-11.26 11.97-11.27 11.97-27 0-15.74-11.97-27.24Q397.05-359 382-359H264q-16 0-27.5 11.35-11.5 11.36-11.5 27.23 0 15.44 11.5 26.93T264-282h118Zm201.49-189-29.35-30Q542-512 526-511.5T499.83-500q-11.91 11.09-12.37 26.55Q487-458 500-447l51 51q12.55 14 32.18 14 19.64 0 33.82-14l131-131q10-9.82 10-25.82T748.21-581q-12.06-10-28.63-10-16.58 0-26.72 10.29L583.49-471ZM382-442q15.05 0 27.03-11.26 11.97-11.27 11.97-27 0-15.74-11.97-27.24Q397.05-519 382-519H264q-16 0-27.5 11.28T225-480.4q0 16.03 11.5 27.22Q248-442 264-442h118Zm0-160q15.05 0 27.03-11.06Q421-624.12 421-639.56T409.03-667q-11.98-12-27.03-12H264q-16 0-27.5 11.56-11.5 11.55-11.5 27.72 0 15.75 11.5 26.73Q248-602 264-602h118ZM142-190v-581 581Z"/></svg>');
}

/* Template Button SVG
.template::before {
   mask-image: url('data:image/svg+xml;utf8,');
}
 */


/******************************************************************************/
/* inpage Buttons
/******************************************************************************/

.inpage-buttons {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center !important;
	gap: 0.75em;
	border-radius: 3em;
	padding: 0px !important
	transition: max-height 0.3s ease-in-out;
}

.inpage-button {
	background: linear-gradient(to bottom, var(--ps-black), var(--ps-dark-gray));
	margin: 0em;
	padding: 0.1em 0.5em 0.1em 0.5em;
   border-radius: 5px;
}

.inpage-button-outline {
   position: relative;		
	display: flex;
   margin: 0em;
	padding: 0em;
}

.inpage-button-outline:hover::after, .button-outline:hover::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   translate: -50% -50%;
   height: 102%;
   width: 103%;
   background-image: conic-gradient(from var(--angle), #0000ff, #00aaff, #0000ff, #000000, #000000, #000000, #000000, #000000, #0000ff, #00aaff, #000000, #000000, #000000, #000000, #000000);
   animation: 3s spin linear infinite;
	padding: 0.3em 0.8em 0.3em 0.8em;
	margin: 0em;
   border-radius: 5px;
	border: 0em;
   z-index: -1;
}

/* Blur effect for the conic-gradient */
.inpage-button-outline::before {
   filter: blur(1.2em);
   opacity: 0.5;
}

/******************************************************************************/
/* Image Grid
/******************************************************************************/

/* CSS Grid Layout for Images */
.my-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Adjust the minmax value to control cell size */
    gap: 10px; /* Space between images */
}

.my-image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill their cells while keeping proportions */
    border-radius: 5px; /* Optional: Add some rounding to the images */
    cursor: pointer;
    transition: border 0.3s ease;
}

.my-image-grid img:hover {
    border: 2px solid #28a745; /* Optional: Highlight on hover */
}


/******************************************************************************/
/* status dots on index
/******************************************************************************/

.completion-dot {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    margin: 0px;
    padding: 0px;
}

.red-dot {
    background-color: var(--ps-red);
}

.orange-dot {
    background-color: var(--ps-orange);
}

.yellow-dot {
    background-color: var(--ps-yellow);
}

.green-dot {
    background-color: var(--ps-green);
}

.status {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}


/******************************************************************************/
/* darken the icons for PS Plus and VR
/******************************************************************************/

.darkened {
    filter: brightness(30%);
}

/******************************************************************************/
/* tables on index and search
/******************************************************************************/

.table-container {
    max-height: 86vh; /* Festgelegte Höhe, kannst du anpassen */
    overflow-y: auto; /* Ermöglicht vertikales Scrollen */
    padding-bottom: 0em !important; /* Optional: etwas Platz am unteren Rand */
	 margin-bottom: 0em !important;
    scroll-snap-type: y mandatory; /* Aktiviert das vertikale Einrasten */
}

.table-custom tr {
    scroll-snap-align: end; /* Zeilen rasten am Anfang ein */
}

.table-custom {
	margin: 0em !important;
	padding: 0em !important;
	width: 100%;
	border-radius: 5px !important;
   background-color: var(--ps-dark-gray);
}

.table-custom thead th {
    position: sticky;
    top: 0px;
    z-index: 1;
    background-color: #343a40; /* Hintergrundfarbe des Headers (anpassen, falls nötig) */
}

th {
	font-size: 0.8em !important;
	line-height: 1.1em !important;
	font-weight: 600 !important;
	vertical-align: middle !important;
	padding: 1em 0.0em 0.8em 0.5em !important;
}

td {
	font-size: 0.8em !important;
	line-height: 1.1em;
	font-weight: 400 !important;
	vertical-align: middle !important;
	padding: 0.2em 0.0em 0.2em 0.5em !important;
}

/* Abwechselnde Farben für gerade und ungerade Zeilen */
.table-custom tr:nth-child(odd) {
    background-color: var(--ps-dark-gray); /* Farbe für ungerade Zeilen */
}

.table-custom tr:nth-child(even) {
    background-color: var(--ps-gray); /* Farbe für gerade Zeilen */
}

.table-head-a {
	text-align: left !important
}

.table-head-a:hover {
   font-weight: 900 !important;
	 
}

.tabelle-text-link {
    color: var(--ps-white) !important;
}

.tabelle-text-link:hover {
    font-weight: 800 !important;
}

.percentage-column {
	
}

.backlog-column {
    white-space: nowrap; /* Prevent text from wrapping */
    text-align: center; /* Center align for icons */
}

.completion-column {

}

.id-column {
}

.name-column {
	 min-width: 25ch;
	 max-width: 50ch;
    word-wrap: break-word; /* Ensures long words will break into the next line */
    text-overflow: ellipsis; /* Optional: show "..." for overflowing text */
}

.media-column {
	white-space: nowrap;
	text-align: center;
}

.system-column {
	white-space: nowrap;
	text-align: center;
}

.ps-plus-column {
	white-space: nowrap;
	text-align: center;
}

.vr-column {
	white-space: nowrap;
	text-align: center;
}

.metacritic-column {
	text-align: center;	
}

.rawg-rating-column {
	text-align: center;	
}

.playstation-rating-column {
	text-align: center;	
}

.genres-column {
   white-space: normal;
}

.age-ratings-column {
    white-space: nowrap;
}

.publishers-column {
	min-width: 15ch;
	max-width: 30ch;
   white-space: nowrap;
   overflow: hidden;
   word-wrap: break-word; /* Ensures long words will break into the next line */
   text-overflow: ellipsis; /* Optional: show "..." for overflowing text */
}

.developers-column {
	min-width: 15ch;
	max-width: 30ch;
   white-space: nowrap;
   overflow: hidden;
   word-wrap: break-word; /* Ensures long words will break into the next line */
   text-overflow: ellipsis; /* Optional: show "..." for overflowing text */
}

.release-date-column {
   white-space: nowrap;
}
.playstation_concept_id-column {
   white-space: nowrap;
}

.owner-column {
}


.kaufdatum-column {
}

.edit-button-column {
    white-space: nowrap; /* Prevent text from wrapping */
    text-align: center; /* Center align for icons */
}



/* Responsive adjustment for smaller screens (less than 500px) */
@media screen and (max-width: 512px) {    

    .percentage-column,
    .backlog-column,
	.completion-column,
	.media-column,
	.ps-plus-column,
	.vr-column,
	.metacritic-column,
	.rawg-rating-column,
	.playstation-rating-column,
	.genres-column,
	.age-ratings-column,
	.publishers-column,
	.developers-column,
	.release-date-column,
	.playstation_concept_id-column,
	.owner-column,
	.kaufdatum-column,
	.edit-button-column
    {
       display: none; /* Blendet die Spalten aus */
   }

}

/* Responsive adjustment for smaller screens (less than 500px) */
@media screen and (max-width: 768px) {    

    .percentage-column,
    .backlog-column,
    .completion-column,
	.metacritic-column,
	.rawg-rating-column,
	.playstation-rating-column,
	.age-ratings-column,
	.publishers-column,
	.developers-column,
	.release-date-column,
	.playstation_concept_id-column,
	.owner-column,
	.kaufdatum-column
    {
       display: none; /* Blendet die Spalten aus */
   }

}

/* Responsive adjustment for smaller screens (less than 500px) */
@media screen and (max-width: 1024px) {    

    .percentage-column,
    .backlog-column,
	.completion-column,
	.rawg-rating-column,
	.playstation-rating-column,
	.publishers-column,
	.developers-column,
	.release-date-column,
	.playstation_concept_id-column,
	.owner-column,
	.kaufdatum-column
    {
       display: none; /* Blendet die Spalten aus */
   }

}

/* Responsive adjustment for smaller screens (less than 500px) */
@media screen and (max-width: 1280px) {    

    .percentage-column,
	.completion-column,
	.publishers-column,
	.developers-column,
	.playstation_concept_id-column

	{
       display: none; /* Blendet die Spalten aus */
   }

}

/* Responsive adjustment for smaller screens (less than 500px) */
@media screen and (max-width: 1440px) {    

    .percentage-column,
	.completion-column,
	.developers-column,
	.playstation_concept_id-column
    {
       display: none; /* Blendet die Spalten aus */
   }

}

/* Responsive adjustment for smaller screens (less than 500px) */
@media screen and (max-width: 1680px) {    

	.developers-column	
    {
       display: none; /* Blendet die Spalten aus */
   }

}
	
	
/******************************************************************************/
/* Modals in general
/******************************************************************************/

/* Styling für den Modal-Hintergrund (Backdrop) */
.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Styling für den Modal-Inhalt */
.modal-content {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: none; /* Optional: Entfernt den Rahmen für ein voll transparentes Aussehen */
}

/* Wenn du möchtest, dass der Hintergrund des Modals dunkel und transparent bleibt */
.modal-content.bg-dark {
    background-color: rgba(0, 0, 0, 0.8) !important; /* 80% schwarzer, transparenter Hintergrund */
}

/* Optional: Anpassungen der Modal-Dialoggröße */
.modal-dialog {
    max-width: 97% !important;
    max-height: 97% !important;
    width: auto !important;
    height: auto% !important;
    object-fit: contain !important;
    margin-top: 60px !important;
}


/******************************************************************************/
/***** SPINNER
/******************************************************************************/

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
    z-index: 90000 !important;
}

.d-none-spinner {
    display: none;
}


/******************************************************************************/
/* Flash messages
/******************************************************************************/

.flash-message-save {
    background-color: rgba(var(--ps-black-rgb), 0.8);
    color: var(--ps-green);
    padding: 15px;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 49999;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.flash-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50000;
    padding: 30px;
    background-color: rgba(var(--ps-black-rgb), 0.8);
    color: var(--ps-white);
    border-radius: 10px;
    text-align: left;
    width: 300px;
	font-family: 'ProximaNova', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
}

.flash-message-success {
    background-color: rgba(var(--ps-green-rgb), 0.8);
    color: var(--ps-white);
}

.flash-message-failure {
    background-color: rgba(var(--ps-red-rgb), 0.8);
    color: var(--ps-white);
}

.flash-message-info {
    background-color: rgba(var(--ps-blue-rgb), 0.8);
    color: var(--ps-white);
}

.flash-message.hide {
    opacity: 0;
}

/******************************************************************************/
/* simple nowrap style
/******************************************************************************/

.nowrap {
	white-space: nowrap;
}


/******************************************************************************/
/* 
/******************************************************************************/


.more-info {
    z-index: 5;
}


/******************************************************************************/
/* 
/******************************************************************************/

.action-buttons a {
	margin-right: 5px;
}

.action-buttons a:last-child {
	margin-right: 0;
}


/******************************************************************************/
/* loading message
/******************************************************************************/

.loading-message {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(var(--ps-black-rgb), 0.8);
	color: white;
	padding: 20px;
	border-radius: 10px;
	z-index: 1000;
}

/******************************************************************************/
/* 
/******************************************************************************/

.form-group {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: left;
}



/******************************************************************************/
/* general dropdown menu styles
/******************************************************************************/

.custom-dropdown {
    background-color: #343a40 !important; /* Dunkler Hintergrund passend zum Dark Theme */
    color: white !important; /* Weiße Schriftfarbe */
    border: 1px solid #6c757d !important; /* Rahmenfarbe */
    border-radius: 5px !important; /* Abgerundete Ecken */
    padding: 4px 12px !important; /* Innenabstand */
    font-size: 0.8em !important; /* Schriftgröße */
    appearance: none !important; /* Standard-Styling entfernen */
    -webkit-appearance: none !important; /* Für Safari */
    -moz-appearance: none !important; /* Für Firefox */
    cursor: pointer !important; /* Cursor bei Hover */
    position: relative !important; /* Position für Pfeil */
}

/* Pfeil-Styling für das Dropdown */
.custom-dropdown::after {
    content: '▼' !important; /* Pfeil-Symbol */
    position: absolute !important; /* Absolut positioniert */
    top: 50% !important; /* Vertikal zentriert */
    right: 10px !important; /* Rechts ausgerichtet */
    transform: translateY(-50%) !important; /* Vertikal zentriert */
    pointer-events: none !important; /* Keine Interaktionen mit dem Pfeil */
}

/* Optional: Anpassung der Optionen */
.custom-dropdown option {
    background-color: #343a40 !important; /* Gleicher Hintergrund wie Dropdown */
    color: white !important; /* Weiße Schriftfarbe */
}

select.custom-dropdown::-ms-value {
    background-color: #343a40 !important; /* Hintergrundfarbe für IE/Edge */
    color: white !important; /* Textfarbe für IE/Edge */
}

/* Für ältere Versionen von Safari */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        select.custom-dropdown {
            padding-right: 25px !important; /* Platz für den Pfeil */
        }

        select.custom-dropdown::after {
            content: '▼' !important;
            position: absolute !important;
            top: 50% !important;
            right: 10px !important;
            transform: translateY(-50%) !important;
            pointer-events: none !important;
        }
    }
}


/******************************************************************************/
/* 
/******************************************************************************/

/* New CSS class for the smaller edit button in the table */
.btn-edit-table {
    background-color: var(--ps-dark-gray) !important;
    border-color: #5679AF !important;
    color: white !important;
    height: 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	max-width: 40px !important;
    white-space: nowrap; /* Prevents the button text from wrapping */
    padding: 5px 10px !important; /* Ensure consistent padding */
    font-size: 0.75rem; /* Ensure the font size remains small */
    overflow: hidden; /* Ensure no overflow affects layout */
}

.btn-edit-table:hover {
    background-color: #3F5E8D !important;
    border-color: #3F5E8D !important;
}


.edit-icon {
    border-radius: 4px;  /* Rounded corners */
    display: inline-block;  /* Ensure it's treated like a button */
    width: 24px;  /* Adjust to the size you want the SVG to appear */
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23cccccc"><path d="M190-99q-37.18 0-64.09-26.91Q99-152.82 99-190v-580q0-37.59 26.91-64.79Q152.82-862 190-862h291q23.5 0 35.25 14.32t11.75 31.5q0 17.18-11.72 31.68T482-770H190v580h580v-294q0-22 14.49-34t31.87-12q17.02 0 31.33 12Q862-506 862-484v294q0 37.18-27.21 64.09Q807.59-99 770-99H190Zm290-381Zm-130 85v-102q0-18.58 7.09-35.43Q364.17-549.27 378-562l343-343q13-13.5 29.71-19.75 16.72-6.25 33.93-6.25 18.36 0 34.98 7 16.62 7 30.38 20l53 53q13.61 13.96 20.8 30.74 7.2 16.77 7.2 34.13 0 17.7-7.26 35.85Q916.48-732.12 903-719L562-377q-13.04 14.17-29.78 20.58Q515.48-350 497-350H395q-18.37 0-31.69-13.31Q350-376.63 350-395Zm510-391-76-75 76 75ZM427-427h76l247-247-38.04-38L674-749 427-504v77Zm284.96-285L674-749l37.96 37L750-674l-38.04-38Z"/></svg>');
    background-size: cover;  /* Ensure the SVG scales properly */
    background-repeat: no-repeat;
    background-position: center;
}

.edit-icon:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23ffffff"><path d="M190-99q-37.18 0-64.09-26.91Q99-152.82 99-190v-580q0-37.59 26.91-64.79Q152.82-862 190-862h291q23.5 0 35.25 14.32t11.75 31.5q0 17.18-11.72 31.68T482-770H190v580h580v-294q0-22 14.49-34t31.87-12q17.02 0 31.33 12Q862-506 862-484v294q0 37.18-27.21 64.09Q807.59-99 770-99H190Zm290-381Zm-130 85v-102q0-18.58 7.09-35.43Q364.17-549.27 378-562l343-343q13-13.5 29.71-19.75 16.72-6.25 33.93-6.25 18.36 0 34.98 7 16.62 7 30.38 20l53 53q13.61 13.96 20.8 30.74 7.2 16.77 7.2 34.13 0 17.7-7.26 35.85Q916.48-732.12 903-719L562-377q-13.04 14.17-29.78 20.58Q515.48-350 497-350H395q-18.37 0-31.69-13.31Q350-376.63 350-395Zm510-391-76-75 76 75ZM427-427h76l247-247-38.04-38L674-749 427-504v77Zm284.96-285L674-749l37.96 37L750-674l-38.04-38Z"/></svg>');
}

.backlog-icon {
    border-radius: 4px;  /* Rounded corners */
    display: inline-block;  /* Ensure it's treated like a button */
    width: 22px;  /* Adjust to the size you want the SVG to appear */
    height: 22px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23cccccc"><path d="M440-120q-75 0-140.5-28T185-225q-49-49-77-114.5T80-480q0-75 28-140.5T185-735q49-49 114.5-77T440-840q21 0 40.5 2.5T520-830v82q-20-6-39.5-9t-40.5-3q-118 0-199 81t-81 199q0 118 81 199t199 81q118 0 199-81t81-199q0-11-1-20t-3-20h82q2 11 2 20v20q0 75-28 140.5T695-225q-49 49-114.5 77T440-120Zm112-192L400-464v-216h80v184l128 128-56 56Zm168-288v-120H600v-80h120v-120h80v120h120v80H800v120h-80Z"/></svg>');
    background-size: cover;  /* Ensure the SVG scales properly */
    background-repeat: no-repeat;
    background-position: center;
}

.backlog-icon:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23cccccc"><path d="M440-120q-75 0-140.5-28T185-225q-49-49-77-114.5T80-480q0-75 28-140.5T185-735q49-49 114.5-77T440-840q21 0 40.5 2.5T520-830v82q-20-6-39.5-9t-40.5-3q-118 0-199 81t-81 199q0 118 81 199t199 81q118 0 199-81t81-199q0-11-1-20t-3-20h82q2 11 2 20v20q0 75-28 140.5T695-225q-49 49-114.5 77T440-120Zm112-192L400-464v-216h80v184l128 128-56 56Zm168-288v-120H600v-80h120v-120h80v120h120v80H800v120h-80Z"/></svg>');
}

.backlog-remove-icon {
    border-radius: 4px;  /* Rounded corners */
    display: inline-block;  /* Ensure it's treated like a button */
    width: 22px;  /* Adjust to the size you want the SVG to appear */
    height: 22px;
    background-image: url('data:image/svg+xml;utf8,<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" fill="%23cccccc"><path class="b" d="M11,21c-1.25,0-2.42-.23-3.51-.7-1.09-.47-2.05-1.11-2.86-1.93-.82-.82-1.46-1.77-1.93-2.86s-.7-2.26-.7-3.51,.23-2.42,.7-3.51,1.11-2.05,1.93-2.86,1.77-1.46,2.86-1.93c1.09-.47,2.26-.7,3.51-.7,.35,0,.69,.02,1.01,.06s.65,.1,.99,.19v2.05c-.33-.1-.66-.18-.99-.23s-.66-.08-1.01-.08c-1.97,0-3.63,.68-4.98,2.03s-2.03,3.01-2.03,4.98,.68,3.63,2.03,4.98,3.01,2.03,4.98,2.03,3.63-.68,4.98-2.03,2.03-3.01,2.03-4.98c0-.18,0-.35-.03-.5s-.04-.32-.08-.5h2.05c.03,.18,.05,.35,.05,.5v.5c0,1.25-.23,2.42-.7,3.51s-1.11,2.05-1.93,2.86c-.82,.82-1.77,1.46-2.86,1.93s-2.26,.7-3.51,.7Zm2.8-4.8l-3.8-3.8V7h2v4.6l3.2,3.2-1.4,1.4ZM23,4v2h-2s-3,0-3,0h-2s-1,0-1,0V4"/></svg>');
    background-size: cover;  /* Ensure the SVG scales properly */
    background-repeat: no-repeat;
    background-position: center;
}

.backlog-remove-icon:hover {
    background-image: url('data:image/svg+xml;utf8,<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" fill="white"><path class="b" d="M11,21c-1.25,0-2.42-.23-3.51-.7-1.09-.47-2.05-1.11-2.86-1.93-.82-.82-1.46-1.77-1.93-2.86s-.7-2.26-.7-3.51,.23-2.42,.7-3.51,1.11-2.05,1.93-2.86,1.77-1.46,2.86-1.93c1.09-.47,2.26-.7,3.51-.7,.35,0,.69,.02,1.01,.06s.65,.1,.99,.19v2.05c-.33-.1-.66-.18-.99-.23s-.66-.08-1.01-.08c-1.97,0-3.63,.68-4.98,2.03s-2.03,3.01-2.03,4.98,.68,3.63,2.03,4.98,3.01,2.03,4.98,2.03,3.63-.68,4.98-2.03,2.03-3.01,2.03-4.98c0-.18,0-.35-.03-.5s-.04-.32-.08-.5h2.05c.03,.18,.05,.35,.05,.5v.5c0,1.25-.23,2.42-.7,3.51s-1.11,2.05-1.93,2.86c-.82,.82-1.77,1.46-2.86,1.93s-2.26,.7-3.51,.7Zm2.8-4.8l-3.8-3.8V7h2v4.6l3.2,3.2-1.4,1.4ZM23,4v2h-2s-3,0-3,0h-2s-1,0-1,0V4"/></svg>');
}



@media screen and (max-width: 768px) {
    .btn-edit-table, .edit-icon {
        display: none;  /* Blendet die Buttons aus */
    }
}

/******************************************************************************/
/* background image overlay
/******************************************************************************/

.background-image-overlay {
    background: rgba(var(--ps-black), 0.3); /* Halbtransparente weiße Überlagerung */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;  /* Verhindert, dass die Überlagerung klickbar ist */
}

/******************************************************************************/
/* genre tags
/******************************************************************************/

/* used at game.html */
.tag {
    display: inline-block;
    color: var(--ps-white);
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 800;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    border: 1px solid white;
    margin: 0px 0px 2px 3px;
    padding: 0px 8px; 0px; 0px;
}

/* used at tables (index.html, search.html) */
.tag-small {
    display: inline-block;
    color: var(--ps-white);
    padding: 0px 3px 1px 3px;
    border-radius: 4px;
    margin: 0px 0px 3px 0px;
    font-size: 0.5rem;
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    border: 1px solid white;
}


//* color definition for genre tags */
.genre-action {
    background-color: #cc0000;
}
.genre-action {
    background-color: #cc0000;
}
.genre-adventure {
    background-color: #008000;
}
.genre-arena-shooter {
    background-color: #dd4020;
}
.genre-arcade {
    background-color: #33CC33;
}
.genre-battle-royale {
    background-color: #ff8400;
}
.genre-beat-em-up {
    background-color: #ff22dd;
}
.genre-board-games {
    background-color: #939393;
}
.genre-board-game {
    background-color: #939393;
}
.genre-card {
    background-color: #B3B3B3;
}
.genre-city-building {
    background-color: #66eeE0;
}
.genre-co-op {
    background-color: #CD853F;
}
.genre-destruction-derby {
    background-color: #FF7722;
}
.genre-family {
    background-color: #800080;
}
.genre-farming {
    background-color: #33dd33;
}
.genre-first-person-shooter {
    background-color: #6666FF;
}
.genre-fighting {
    background-color: #FF3333;
}
.genre-flight {
    background-color: #004400;
}
.genre-hack-and-slash {
    background-color: #FF2681;
}
.genre-horror {
    background-color: #cc0000;
}
.genre-massively-multiplayer {
    background-color: #A0A0FF;
}
.genre-mech {
    background-color: #117777;
}
.genre-metroidvania {
    background-color: #800080;
}
.genre-moba {
    background-color: #CD853F;
}
.genre-multiplayer {
    background-color: #FF3333;
}
.genre-multiplayer-shooter {
    background-color: #5555FF;
}
.genre-music {
    background-color: #FF8594;
}
.genre-party {
    background-color: #ff8822;
}
.genre-platformer {
    background-color: #ff4433;
}
.genre-puzzle {
    background-color: #b2b2b2;
}
.genre-racing {
    background-color: #00aaaa;
}
.genre-roguelike {
    background-color: #800080;
}
.genre-rpg {
    background-color: #ff2244;
}
.genre-rhythm {
    background-color: #FF6666;
}
.genre-sandbox {
    background-color: #cccc33;
}
.genre-shooter {
    background-color: #ff00a0;
}
.genre-simulation {
    background-color: #0080aa;
}
.genre-social-deduction {
    background-color: #FFB84D;
}
.genre-soccer {
    background-color: #33CC33;
}
.genre-sports {
    background-color: #33CC33;
}
.genre-strategy {
    background-color: #0060b0;
}
.genre-survival {
    background-color: #FF1148;
}
.genre-survival-horror {
    background-color: #F2322D;
}
.genre-tactical-rpg {
    background-color: #4488ff;
}
.genre-tactics {
    background-color: #0000A0;
}
.genre-the-world-beneath {
    background-color: #FFB6C1;
}
.genre-third-person-shooter {
    background-color: #CC8400;
}
.genre-twin-stick-shooter {
    background-color: #6666FF;
}
.genre-turn-based-rpg {
    background-color: #dd1133;
}
.genre-turn-based-strategy {
    background-color: #0060b0;
}
.genre-turn-based-tactics {
    background-color: #0040b0;
}
.genre-vehicle-combat {
    background-color: #ff3377;
}
.genre-visual-novell {
    background-color: #FF8594;
}
.genre-vr-adventure {
    background-color: #cc00B2;
}
.genre-vr-party {
    background-color: #339999;
}
.genre-vr-shooter {
    background-color: #dd4455;
}
.genre-casual {
    background-color: #ff44ee;
}
.genre-indie {
    background-color: #44aacc;
}
.genre-unique {
    background-color: #FFD711;
}
.genre-brain-training {
    background-color: #4169E1; /* Königliches Blau für Gehirntraining */
}
.genre-education {
    background-color: #32CD32; /* Limettengrün für Bildung */
}
.genre-quiz {
    background-color: #FF7722; /* Gold für Quizspiele */
}
.genre-adults {
    background-color: #8B0000; /* Dunkles Rot für Erwachsene */
}

/******************************************************************************/
/* forms styling
/******************************************************************************/

.form-control {
   background-color: var(--ps-black); /* Eingabefeld-Hintergrund auf Dunkelgrau setzen */
   color: var(--ps-white); /* Eingabefeld-Textfarbe auf Weiß setzen */
   border: 1px solid var(-ps-gray); /* Randfarbe auf ein dunkleres Grau setzen */
   padding: 3px 8px; /* Kleinere Eingabefelder */
   font-size: 12px; /* Kleinere Schriftgröße */
   height: 30px; /* Kleinere Höhe für kompaktere Felder */
}