@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,200;1,300;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..500;1,400..500&display=swap');
.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 350,
  'GRAD' 0,
  'opsz' 24
}
:root {
    --white: #fff;
    --orng: #ff7b1c;
    --yell: #ffea61;
    --light-gray:#e1e1e1;
    --gray:#f2f2f2;
    --gray-backgrnd: #f9f9f9;
    --dark-gray: #717286;
    --dark-green: #116046;
    --ps-square: #c97fb3;
    --ps-triangle: #00a088;
    --ps-circle: #e9546f;
    --ps-cross: #5880c1;
    --ps-red: #e70114;
    --ps-yellow: #fabe00;
    --ps-green:#00a497;
    --ps-blue:#006cb8;
    --ps-ps5blue: #00439c;
    --ps-psx-gray: #adadad;
    --n-gc-violet: #6545b2;

    --l-spacing-1px:1px;
    --l-spacing-0-75px:0.75px;
}
* {
	margin: 0;
    padding: 0;
	box-sizing: border-box;
}
body {
    font-family: Poppins, sans-serif;
    font-weight: 300;
    font-size: 14px;
}
main {
    width: 90vw;
    margin: auto;
    padding: 10px;
}
ul {
    list-style: none;
}
h1 {
    font-size: 20px;
    font-weight: 500;
    color: var(--dark-gray);
}
h2, h3, h4 {
    font-weight: 400;
}
h2 {
    color: var(--orng);
    font-size: 18px;
}
h3 {
    font-size: 16px;
    margin: 10px 0px;
}
a, a:visited {
    text-decoration: none;
    color: #000;
}
strong {
    font-weight: 500;
}
nav a, nav a:visited {
    color: var(--white);
}
nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.75em 2em;
    border-top: 4px solid var(--ps-yellow);
    background-color: #000;
    color: var(--white);
}
.logo {
    padding: 0 20px;
    span {
        font-family: 'Gill Sans', 'Gill Sans MT', Cabin;
        font-size: 1.8em;
        font-weight: 600;
        font-style: italic;
        color: var(--ps-yellow);
    }
}
.user-panel, .user-panel a {
    display: flex;
    flex-direction: row;
    align-items: center;
    strong {
        margin-left: 0.25em;
    }
    span {
        font-size: 26px;
        margin-left: 10px;
    }
}
.user-panel a {
    &:hover {
        color: var(--ps-yellow);
    }
}
.menu a {
    font-weight: 300;
    font-size: 14px;
    padding: 2px 10px;
    margin: 4px 2px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
}
.menu a, .menu a:visited {
    color: var(--white);
    border: 1px solid #000;
}
.menu a:hover {
    color: var(--ps-yellow);
    border: 1px solid var(--ps-yellow);
}
.menu a.active {
    background-color: var(--ps-yellow);
    color: #000;
}
.submenu {
    background-color: var(--gray-backgrnd);
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin: 10px 0;
}
.submenu a {
    padding: 5px 20px;
    border-radius: 4px;
    margin: 0 4px;
    transition: .5s;
}
.submenu a::after {
    content: "|";
    position:relative;
    right: 0;
    left: 26px;
}
.submenu a:last-child::after {
    content: none;
}
.submenu a:hover {
    color: #000;
    background-color:#eee;
}
.submenu a, .submenu a:visited { 
    color: #000;
}
.d-none {
    display: none;
}
fieldset {
    margin: 5px 0px;
    padding: 5px;
    border: 1px solid #e1e1e1;
}
input:checked + label {
    color: var(--orng);
    font-weight: bold;
}
button[type="submit"] {
    cursor: pointer;
}
label {
    display: block;
    font-weight: 400;
}
fieldset > label {
    display: inline;
}
select {
    border: 1px solid #e1e1e1;
    width: 250px;
    background: #fff;
}
button, select, input, select option {
    font-family: Poppins, sans-serif;
}
.listing-header, .listing-header div, .listing-header a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.listing-header {
    justify-content: space-between;
    margin-bottom: 1em;
    a {
        justify-content: center;
        align-items: center;
        padding: 0 7px;
        color: var(--dark-gray);
        font-weight: 400;
        span {
            margin-right: 2px;
            font-size: 24px;
            color: inherit;
        }
        &:hover {
            color: var(--orng);
        }
    }
    span.badge-cnt { 
        display: inline-block;
        margin: 0 0.25em;
        padding: 0.3em 1em;
        font-size: 12px; /* Pomniejsza czcionkę do 75% */
        font-weight: 400;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        border-radius: 6px; 
        color: #fff;
        background-color: var(--ps-blue); /* Kolor niebieski */
        &.search {
            background-color: var(--ps-circle);
        }
    }
    
}
.gray-rnd {
    background-color: var(--gray-backgrnd);
    border-radius: 5px;
    padding: 20px;
}
.white-rnd {
    background-color: #fff;
    border-radius: 5px;
}
.popups {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.popups .two-clmn-form {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
}
.popups .two-clmn-form .form-50 {
    width: 50%;
}
.popups .two-clmn-form .ovr-flow
{
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-color: #fff;
}
.popups fieldset {
    padding: 10px;
}
.popups label span {
    display: block;
    color: var(--dark-gray);
    font-size: 12px;
}
.popups label, .popup .toggle {
    font-size: 14px;
    padding: 5px 0;
    font-weight: 400;
}
.popups input, .popups select, 
.signin-form input {
    padding: 3px 5px;
    border: 1px solid var(--dark-gray);
}
.popups input:invalid, .popups select:invalid {
    border: 1px solid var(--orng);
}
.popups input:focus {
    outline:none !important;
    box-shadow: inset 0px 0px 5px 5px var(--gray-backgrnd);
}
.popups input[type=text]:-moz-read-only,
.popups input[type=text]:read-only {
    border: 1px solid #e1e1e1;
    cursor: not-allowed;
    color: #e1e1e1;
}
.popups select, .popups input[type=text] {
    min-width: 300px;
}
.popups select.order-picker {
    width: 50px;
}
.popups input[type=checkbox]
{
    margin: 5px;
}
.popups div.url-field {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 2px 0;
}
.popups .url-field label{
    margin: 0 5px;
}
.popups button.clear {
    margin: 0 5px;
    font-size: 13px;
    background-color: none;
    padding: 5px;
    border: 1px solid #e1e1e1;
}
.popups input[type=number] {
    width: 3em;
    -moz-appearance: textfield;
    appearance: textfield;
    text-align: center;
}
.popups input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.popups p.text {
    margin-top: 10px;
}
.popups p.msg {
    width: 100%;
    font-size: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    text-align: center;
    border-radius: 6px;
    margin-top: 10px;
}
.popups .horizontal {
    display: flex;
    width: 250px;
    flex-direction: row;
    padding: 7px 0;
    align-items: center;
    justify-content: space-between;
} 
.popups .toggle input[type=checkbox] {
	height: 0;
	width: 0;
	visibility: hidden;
}
.popups .toggle label {
	cursor: pointer;
	text-indent: -9999px;
	width: 45px;
	height: 26px;
	background: #e1e1e1;
	display: block;
	border-radius: 100px;
	position: relative;
}
.popups .toggle label:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 90px;
	transition: 0.5s;
}
.popups .toggle input:checked + label {
	background: #bada55;
}
.popups .toggle input:checked + label:after {
	left: calc(100% - 3px);
	transform: translateX(-100%);
}
.popups .toggle label:active:after {
	width: 22px;
}
.popups p span.marked {
    padding: 4px 8px;
    background-color: #f9f9f9;
    border-radius: 10px;
}
.btn-cnt {
    text-align: center;
}
.btn-field {
    padding-top: 20px;
}
.btn-multi-field {
    width: 100%;
    padding-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.btn button, .btn a {
    padding: 5px 20px;
    border: 1px solid #7d7d7d;
    font-weight: 400;
    background-color: #e1e1e1;
    border-radius: 4px;
    margin-right: 10px;
    transition: all 200ms;
}
.btn button:last-child, .btn a:last-child {
    margin-right: 0;
}
.btn button:hover, .btn a:hover{
    background-color: #f9f9f9;
}
.star {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.star img {
    width: 13px;
    height: 13px;
    margin: 2px;
}
.menu, .menu-2 {
    padding: 10px 0px;
}
pre {
    background-color: rgb(52, 52, 52);
    color: #FFF;
    padding: 10px;
    font-size: 0.8em
}
.g-details-main {
    border: 1px solid black;
    border-radius: 6px;
    padding: 1em;
    display: flex;
    flex-direction: column;
}
.g-details-main h1 {
    font-size: 1.25em;
    padding: 0.25em 0;
}
.g-details-main .main-info-strap,
.g-details-main .row
{
    font-size: 13px;    
}
.g-details-main .main-info-strap {
    margin: 10px 0;
    border: 2px solid black;
    padding: 10px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.g-details-main .main-info-strap span {
    font-weight: 500;
}
.g-details-main .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 1px solid black;
    padding: 10px 0;
}
.g-details-main .row:last-child {
    border: none;
}
.g-details-main .row .l-col {
    display: flex;
    align-items: center;
    width: 30%;
}
.g-details-main .row .col-2 {
    width: 50%;
}
.g-details-main .row .col-3 {
    width: 33.33%
}
.g-details-main .col-4 {
    width: 25%;
}
.g-details-main .row .nfo-container {
    display: flex;
    flex-direction: column;
    align-items:center;
    color: #7d7d7d;
}
.g-details-main .row .r-col {
    width: 70%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.g-details-main .info-text {
    display: inline-block;
    width: 100%;
    border-top: 1px solid #7d7d7d;
    color: black;
    padding: 10px 0;
    margin-top: 10px;
}
.g-details-main .row span {
    display: block;
    font-weight: 500;
    color: black;
}
.g-details-main .g-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.g-header h1 {
    width: 50%;
}
.g-header .cp-field {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center; 
}
.cp-field .cp-status, .cp-field a.link {
    margin: 0 2px;
    font-size: 12px;
    font-weight: 400;
    border-radius: 3px;
    text-align: center;
    padding: 3px 10px;
}
.cp-field .cp-status {
    background-color: #000;
    color: #fff;
}
.cp-field a.link, .cp-field .cp-status {
    border: 1px solid #000;
}
.cp-field a.edit {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
}
.cp-field .edit-ico {
    width: auto;
    height: 22px;
}
.g-details-manage {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 5px 0;
}
.g-details-manage a {
    color: black;
    padding: 5px;
    font-weight: 400;
}

.pad-tb-10 {
    padding: 10px 0;
}
.pad-t-20 {
    padding-top: 20px;
}
.pagination-bar, .pagination {
    display: flex;
    flex-direction: row;  
}
.pagination {  
    font-size: 15px;
    align-items: center;
    .arrow-next, .arrow-prev {
        display: flex;
        justify-content: center;
        align-items: center; 
        width: 1.75em;
        height: 1.75em;
        border: 1px solid var(--light-gray);
        border-radius: 50%;
        &.arrow-next {
            margin-left: 0.5em
        }
        &.arrow-prev {
            margin-right: 0.5em;
        }
        &:hover {
            color: var(--orng);
            font-weight: 400;
            background-color: white;
        }
    }

}
.multi {
    justify-content: space-between;
}
.r {
    justify-content: right;
}
.pagination-bar div a {
    padding: 2px 0.75em;
    text-align: center;
}
.pagination-bar .actl-page {
    font-weight: 500;
    color: var(--orng);
}
.wl-container form {
    border: 1px solid #7d7d7d;
    padding: 5px 15px;
    margin-bottom: 5px;
}
.sn-strap {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 10px 0;
    flex-wrap: wrap;
    align-items: center;
}
.sn-strap form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    /* align-items: center; */
}
.sn-strap button {
    background-color: #fff;
    border-radius: 2px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.sn-strap a, .sn-strap button, .sn-strap label, .sn-strap select, .sn-strap input[type=search] {
    border: 1px solid #e1e1e1;
    padding: 5px 15px;
}
.sn-strap select {
    width: initial;
}
.sn-strap label {
    font-size: 13px;
    font-weight: 300;
    color: #7d7d7d;
    background-color: #fff;
    margin: 0;
    border: 1px solid #e1e1e1;
    border-right: 0;
    display: flex;
    align-items: center;
}
.sn-strap a.add {
    background-color: #fff;
}
.sn-strap a.add:hover {
    background-color: rgb(65, 205, 160);
    border: 1px solid rgb(17, 96, 70);
    color: rgb(17, 96, 70);
}
.sn-strap button.del:hover {
    text-decoration: line-through;
    border: 1px solid var(--orng);
}
.sn-strap button.clr-button {
    border: 1px solid var(--orng);
}
.sn-strap button.clr-button:hover {
    color: var(--orng);
}
.sn-strap button, .sn-strap label, .sn-strap span.spacer, .sn-strap a.add, .sn-strap input[type=search]{
    margin-left: 4px;
}
.sn-strap button.del {
    margin-left: 0;
}
.sn-strap button.del img {
    width: auto;
    height: 9px;
    margin-left: 10px;
}
.sn-strap span.spacer {
    color: var(--dark-gray);
    padding: 0 10px;
}
.sn-strap span.spacer::before {
    content: '';
    border: 1px solid var(--dark-gray)
}
.flx-end {
    justify-content: flex-end;
}
.flx-cnt {
    justify-content: center;
} 
input[type=search] {
    width: 400px;
}
.file-picker {
    border: 1px solid #7d7d7d;
}
input[type=file]::file-selector-button {
    background-color: #fff;
    color: #000;
    border: 0;
    border-right: 1px solid #7d7d7d;
    padding: 10px 15px;
    margin-right: 20px;
    transition: .5s;
    cursor: pointer;
}
input[type=file]::file-selector-button:hover {
    background-color: #eee;
    border: 0px;
    border-right: 1px solid #7d7d7d;
  }
.upload-bar {
    margin-top:10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #7d7d7d;
    padding: 5px 15px;
}
.upload-bar button[type="submit"] {
    margin: 0 2px;
}
.upload-bar div {
    display: flex;
    flex-direction: column;
    padding: 5px;
}
.upload-bar div:last-child {
    flex-direction: row;
}
.upload-bar div span {
    font-size: 12px;
    color: #7d7d7d;
}
.upload-bar .alert {
    font-weight: 400;
    color: #cf0505;
    flex-shrink: 2;
    max-width: 50%;
}
.upload-bar img {
    margin: 5px 10px;
    height: 30px;
    width: auto;
}
.items-list {
    border-radius: 5px;
    /* background-color: #fff; */
    display: flex;
    flex-direction: column;
    .empty {
        display: flex;
        justify-content: center;
        a {
            font-weight: 400;
            font-size: 14px;
            letter-spacing: var(--l-spacing-0-75px);
            color: var(--dark-gray);
            border: 1px solid var(--dark-gray);
            border-radius: 2px;
            padding: 5px 15px;
        &:hover {
            border-color: var(--orng);
            }
        }
    }
}
.list-gap-5 {
    gap: 5px;
}
.items-list .warning-msg {
    width:100%;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.items-list .warning-msg p {
    color: var(--orng);
    font-size: 16px;
    text-align: center;
}
.items-list .warning-msg img {
    height: 16px;
    margin: 0 10px;
}
.ls, .ls2, .ls2-2 {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
.ls2 {
    border: 1px solid white;
    background-color: white;
    font-size: 13px;
    padding: 10px 0px;
}
.ls2:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
} 
.ls2:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.ls {
    font-size: 13px;
    padding: 10px 0px;
    border-bottom: 1px solid var(--light-gray);
}
.ls:last-child {
    border-bottom: none;
}
.ls span.stone {
    color: var(--light-gray);
    font-size: 20px;
}
.ls a {
    transition: .05s;
    margin: 0 10px;
}
.ls a:hover {
    font-size: 13.2px;
    font-weight: 400;
}
.le-h {
    font-weight: 400;
    border-bottom: 1px solid var(--orng);
    margin-bottom: 5px;
    a {
        color: var(--dark-gray);
    }
    a.add-button {
        border: 1px solid var(--dark-gray);
        padding: 5px 15px;
        border-radius: 2px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: var(--l-spacing-0-75px);
        &:hover {
            border-color: var(--orng);
        }
    }
}
.le-c {
    text-align: center;
    display: flex;
    justify-content: center;
}
.le-r {
    text-align: right;
    padding-right: 10px;
}
.le-mng, .le-mng a {
    display: flex;
    flex-direction: row;
}
.le-mng {
    justify-content: flex-end;
    a {
        justify-content: center;
        margin:0 5px;
        color: var(--dark-gray);
        span {
            font-size: 20px;
        }
        &:hover {
            color: var(--orng);
      }
    }
}
.le-w5 {
    width: 5%;
}
.le-w10 {
    width: 10%;
}
.le-w15 {
    width: 15%;
}
.le-w20 {
    width: 20%;
}
.le-w25 {
    width: 25%;
}
.le-w30 {
    width: 30%
}
.le-w40 {
    width: 40%;
}
.le-w45 {
    width: 45%;
}
.le-w50 {
    width: 50%;
}
.le-w70 {
    width: 70%;
}
.le-w90 {
    width: 90%;
}
img.cp-pad {
    width: auto;
    height: 10px;
    margin-left: 10px;
}
.show-tables {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    .w-40 {
        width: 40%;
    }
    .w-30 {
        width: 30%;
    }
}
.summary-desk 
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start; 
    gap:10px;
}
.summary-desk > .column {
    &.w-30 {
        width:30%;
    }
    &.w-40 {
        width:40%;   
    }
    &.w-60 {
        width: 60%;
    }
    .column-header {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 1em;
    }
}
@media screen and (max-width:790px) {
    nav {
        flex-direction: column;
        justify-content: center;
        .menu {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap:5px;
        }
    }
    main {
        width: 100%;
        padding: 5px;
    }
    .submenu {
        justify-content: center;
    }
    .gray-rnd {
        padding: 0.5em;
    }
    .summary-desk {
        flex-direction: column;
    }
    .summary-desk > .column {
            width: 100% !important;
    }
}
.tiles-grid
{
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    &.centered > li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &:first-child {
            color: var(--ps-triangle);
            border: 1px solid var(--ps-triangle);
        } 
    }
    li {
        font-size: 13px;
        background-color: var(--white);
        height: 140px;
        border-radius: 10px;
        padding: 10px;
        > div:first-child {
            min-height: 4lh;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        strong {
            font-weight: 400;
        }
        p {
            color: var(--dark-gray);
            font-size: 11px;
        }
    }
}


.st-list {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.st-list-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-right: 3px;
    margin-left: 3px;
    margin-bottom: 10px;
    justify-content: space-between;
}
.st-list-header img {
    height: 13px;
    width: 13px;
    margin: 0 2px;
    color: red;
}
.st-list h3 {
    margin: 0;
}
.st-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.st-list ul.strap {
    flex-direction: column;
}
.st-list ul.tile {
    flex-direction: row;
}
.st-list ul li {
    display: flex; 
    border: 3px solid #f9f9f9;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
}
.st-list ul.strap li.strap-head,
.st-list ul.strap li.strap-footer {
    padding: 10px 0;
    background-color: initial;
}
.st-list ul.strap li.strap-head {
    font-weight: 500;
    font-size: 14px;
}
.st-list ul.strap li.strap-footer span {
    font-weight: 500;
    margin: 0 5px;
}
.st-list ul.strap li {
    align-items: center;
}
.st-list ul.strap li > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
.st-list ul.tile li {
    flex-direction: column;
    min-height: 11em;
    min-width: 20%;   
}
.st-list ul.tile-25 > li {
    width:25%; 
}
.st-list ul.tile-33 > li {
    width: 33.33%;
}
.st-list ul.tile li, 
.st-list ul.strap li {
    &.setting-sb {
        justify-content: space-between;
    }
    &.setting-fe {
        justify-content: flex-end;
        gap:10px
    }
    span.counting {
        margin-right: 10px;
    }
    div.badge-box {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 5px;
        margin: 0 10px;
        &.gold {
            color: goldenrod;
        }
        &.gray {
            color: var(--dark-gray);
        }
    }
}
.st-list ul li strong {
    font-weight: 400;
    font-size: 13px;
}
.st-list ul.cnt-items li {
    justify-content: center;
    align-items: center
}
.st-list ul.cnt-items li strong {
    text-align: center;
}
.st-list details {
    width: 100%;
}
.st-list details > summary {
    list-style-type: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    justify-content: space-between;

    span {
        display: flex;
        flex-direction: row;
        font-size: 13px;
        font-weight: 300;
        align-items: center;

        &::before {
            /* display: inline-block; */
            content: '';
            background-image: url("../gi/basket.svg");
            background-size: 16px 16px;
            background-repeat: no-repeat;
            width: 16px;
            height: 16px;
            padding-right: 5px;
        }
    }
}
.st-list details > summary::-webkit-details-marker {
    display: none;
  }
/* .st-list details > summary:hover::after {
    content: ' show more';
} */
.st-list details[open] > summary {
    padding-bottom: 10px;
    /* border-bottom: 1px solid var(--light-gray); */
    transition: 0.2s;
}

.st-list details .purchased-list {
    padding: 10px;
    
    .purchased-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 5px;
        border-bottom: 1px solid var(--light-gray);
        &:last-child {
            border-bottom: none;
        }
    }
}
.st-list .inside-filters {
    display: flex;
    flex-direction: row;
    padding: 10px 0;
    gap: 10px;
    align-items: center;
    a {
        background-color: #fff;
        padding: 5px 15px;
        border-radius: 3px;
        border: 1px solid #fff;
        &:hover {
            border: 1px solid var(--ps-yellow);
        }
        &:active {
            font-weight: 500;
        }
    }
    span {
        font-size: 12px;
        color: var(--dark-gray);
        font-weight: 500;
    }
}
.badger {
    display: flex;
    flex-direction: row;
    gap: 7px;

} 
span.platform, span.badge {
    font-size: 11px;
    border-radius: 3px;
    padding: 1px 15px;
    font-weight:500;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid inherit; */
}
span.platform {
    width: 4em;
    &.small {
        font-size: 11px;
    }
    &.big {
        font-size: 13px;
    }
}
span.badge {
    width: fit-content;
    &.b-gr
    {
        background-color: var(--yell);
    }
    &.b-price 
    {
        font-weight: 300;
        font-size: 12px;
        border: 1px solid var(--ps-psx-gray);

        &::before {
            display: block;
            content: '';
            background-image: url("../gi/basket.svg");
            background-size: 13px 13px;
            background-repeat: no-repeat;
            width: 13px;
            height: 13px;
            padding-right: 5px;
        }
    }
}
ul.tile .badger {
    margin: 5px 0;
}
ul.strap .badger {
    margin: 0 10px;
}
.s-ps5 {
    background-color: var(--ps-ps5blue);
    color: #fff;
}
.s-ps4 {
    background-color: var(--ps-blue);
    color: #fff;
}
.s-ps3 {
    background-color: var(--ps-green);
    color: #fff;
}
.s-ps2 {
    background-color: var(--ps-yellow);
    color: #fff;
}
.s-psx  {
    background-color: var(--ps-red);
    color: #fff;
}
.s-psv {
    background-color: #000;
    color: #fff;
}
.s-ngc {
    background-color: #6545b2;
    color: #fff;
}
.s-ns2 {
    background-color: #e60012;
    color: #fff;
}
.s-ns {
    background-color: #ff0000;
    color: #fff;
}
.s-wiiu {
    background-color: #0096C8;
    color: #fff;
}
.s-3ds {
    background-color: #c4c9ca;
    color:#000;
}
.s-gb {
    background-color: #dad6d7;
    color: #717286
}
.s-snes {
    background-color: #faba00;
    color: #10007B;
}
.add-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0; 
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    transition: opacity 300ms, visibility 300ms, backdrop-filter 300ms;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(8px); /* Wsparcie dla Safari */
    visibility: hidden;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-overlay:target {
    visibility: visible;
    opacity: 1;
  }
.popup {
    max-height: 90vh;
    overflow-y: auto;
    z-index: 9999;
    padding: 20px 30px;
    background: #fff;
    border-radius: 10px;
    position: relative;
    transition: all 500ms ease-in-out;
    margin: auto;

}
.popup-width-50 {
    min-width: 50vw;
}
.popup-width-wide {
    max-height: 90vh;
    max-width: 80vw;
}
.popup .close {
    position: absolute;
    top: 5px;
    right: 20px;
    transition: all 200ms;
    font-size: 35px;
    color: #000;
    font-weight: 400;
  }
.popup .close:hover {
    color: #d80606;
  }
.popup .scroller {
    overflow-y:auto;
    height: 100%;
    max-height: 80vh;
}
.signin-form {
    width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    margin-top: 25vh;
}
.signin-form input {
    width: 100%;
    margin-bottom: 5px;
}
.signin-form label {
    margin: 5px 0;
}
.signin-form p {
    margin: 20px 0;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    text-align:center;
    color: #d80606;
}
.signin-form h2 {
    color: var(--ps-yellow);
}
.shop-urls {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.shop-urls > div {
    background-color: #f9f9f9;
    padding: 5px 15px;
    border-radius: 5px;
    color: var(--dark-gray);
    a {
        color: var(--dark-gray);
    }
}

.itm-details {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    gap: 10px;
    h1 {
        font-size: 26px;
        font-family: Poppins, sans-serif;
        color: #000;
        font-style: normal;
        letter-spacing: 2px; 
    }
    h2 {
        font-size: 15px;
        font-family: Poppins, sans-serif;
        color: #000;
        font-style: normal;
        border-bottom: 1px solid var(--dark-gray);
        padding-bottom: 10px;
        width: 100%;
    }
    > div
    {
        padding: 0;
        gap: 10px;
    }
    div, span, ul, ul > li
    {
        display: flex;
    }
    span.brand {
        justify-content: center;
        align-items: center;
        font-weight: 400;
        font-size: 13px;
        letter-spacing: 0.5px;
        text-transform: capitalize;
        border: 1px solid var(--light-gray);
        background-color: var(--light-gray);
        border-radius: 3px;
        padding: 1px 25px;
    }
    .header {
        flex-direction: column;
    }
    .main {
        flex-direction: column;
    }
    .box-shelf {
        width: 100%;
        flex-direction: row;   
        gap: 10px;  
        ul {
            padding-top: 10px;
            flex-direction: column;
            font-size: 13px;
            gap: 10px;
            li {
                gap: 10px;
                color: var(--dark-gray);
                flex-direction: row;
                align-items: center;
                span {
                    color: #000;
                    font-weight: 400;
                }
            }
        }
        .wide {
            width:100%;
        }
        .box-33 {
            width: 33.34%;
        }
        .box-50 {
            width: 50%;
        }
        .box-66 {
            width: 66.67%;
        }
        .gap-10 {
            gap: 10px;
        }
        /* div[class*="box-"] {
            flex-direction: column;
        } */
        .wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            padding: 10px;
            &.wrap-to-col {
                flex-direction: column;
            }
            &.wrap-to-row {
                flex-direction: row;
            }
            &.j-content-se {
                justify-content: space-evenly;
                align-items: center;
            }
            &.j-content-st {
                justify-content: flex-start;
                align-items: center;
            }
            &.j-content-en {
                justify-content: flex-end;
                align-items: center;
            }
            &.j-content-sa {
                justify-content: space-around;
                align-items: center;
            }
            &.nopadding {
                padding: 0;
            }
            &.outline-1b {
                border: 1px solid #000;
            }
            &.outline-1bt {
                border-top: 1px solid #000;
            }
            &.outline-1bb {
                border-bottom: 1px solid #000;
            }
            &.outline-2b {
                border: 2px solid #000;
            }
            &.outline-1g {
                border: 1px solid var(--gray);
            } 
            &.bg-gray {
                background-color: var(--gray-backgrnd);
            }
            &.br-6 {
                border-radius: 6px;
            }
        }
        .boxi {
            color: #7d7d7d;
            display: flex;
            font-size: 13px;
            &.col {
                flex-direction: column;
            }
            &.row {
                flex-direction: row;
                gap: 10px;
            }
            strong {
                color: #000;
                font-weight: 500;
            }
        }
    }
}


#remove-but {
            display: none; /* Początkowo ukryj przycisk remove */
        }