:root {
    --color-yellow: #FFCC00;
    --filter-yellow: brightness(0) saturate(100%) invert(67%) sepia(94%) saturate(463%) hue-rotate(358deg) brightness(103%) contrast(106%);
    --color-dark-yellow: #f9b000;
    --filter-dark-yellow: brightness(0) saturate(100%) invert(74%) sepia(65%) saturate(2853%) hue-rotate(2deg) brightness(100%) contrast(100%);
    --color-white: #fff;
    --color-light-grey: #F0F1F2;
    --color-mid-blue: #868bb1;
    --color-dark-blue: #27293E;
    --filter-dark-blue: brightness(0) saturate(100%) invert(14%) sepia(4%) saturate(6443%) hue-rotate(197deg) brightness(86%) contrast(88%);
}
* {
    box-sizing: border-box;
}
@media screen and (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
}
body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    background-color: var(--color-light-grey);
    margin: 0;
    padding: 0;
    color: var(--color-dark-blue);
    font-size: 14px;
}
h1 {
    color: var(--color-yellow);
    text-align: center;
    margin-top: 20px;
}
#container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
#header {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 20px;
    color: #f0f0f0;
    z-index: 10;
    padding: 10px 20px;
    background-color: var(--color-dark-blue);
    border-bottom: 3px solid var(--color-yellow);
}
#header h1 {
    margin: 0;
    font-size: 24px;
    text-align: left;
}
#header a {
    color: var(--color-yellow);
    text-decoration: none;
}
#header a:hover {
    text-decoration: underline;
}
#contentWrapper {
    padding: 8px 8px 8px 8px;
    flex-grow: 1;
    overflow: auto;
    display: flex;
    flex-direction: row;
}
#content {
    min-width: 1200px;
    max-width: 1200px;
    text-align: center;
}
.content-side {
    flex-grow: 1;
}
input:focus, select:focus, textarea:focus, div[contenteditable="true"]:focus {
    outline: none;
}
#notification {
    position: fixed;
    top: 60px;
    right: 20px;
    color: var(--color-yellow);
    background-color: var(--color-dark-blue);
    padding: 8px 15px;
    border-radius: 5px;
    opacity: 0;
    z-index: 1000;
}
input[type="text"],
input[type="password"],
select, textarea, div[contenteditable="true"] {
    padding: 6px 10px;
    border: 1px solid var(--color-mid-blue);
    border-radius: 3px;
    font-size: 14px;
    color: var(--color-dark-blue);
}
input[type="text"]:focus,
input[type="password"]:focus,
select:focus, textarea:focus, div[contenteditable="true"]:focus {
    border-color: var(--color-dark-blue);
}
/*****************************************************************************/
.flex-row {
    display: flex;
    flex-direction: row;
    column-gap: 12px;
}
.row-center {
    align-items: center;
}
.row-stretch {
    align-items: stretch;
}
.row-mid {
    justify-content: center;
}
.row-end {
    justify-content: flex-end;
}
.flex-column {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}
/*****************************************************************************/
.login-body {
    height: 100vh;
    background-color: var(--color-dark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-container {
    width: 300px;
    padding: 25px;
    background-color: var(--color-light-grey);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-radius: 6px;
}
.login-title {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 400;
    font-family: Pacifico, cursive;
}
.login-container input[type="text"],
.login-container input[type="password"] {
    margin: 10px 0;
    padding: 10px;
    width: 100%;
}
.login-error {
    color: rgb(199, 0, 0);
    font-size: 90%;
}
/*****************************************************************************/
button {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
}
.btn-primary, .btn-toggle[data-active='1'] {
    background-color: var(--color-yellow);
    color: var(--color-dark-blue);
}
.btn-secondary, .btn-toggle[data-active='0'] {
    background-color: var(--color-dark-blue);
    color: var(--color-yellow);
    font-weight: 500;
}
.btn-grey {
    background-color: var(--color-light-grey);
    color: var(--color-dark-blue);
    font-weight: 500;
}
.btn-header {
    padding: 6px 15px;
}
.btn-content {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
button:disabled {
    background-color: #b5b6c7;
    color: #565769;
    cursor: not-allowed;
}
button:not(:disabled):hover  {
    filter: brightness(1.07);
}
.btn-grey:hover  {
    background-color: #ff9292;
}
.btn-secondary:hover, .btn-toggle[data-active='0']:hover {
    background-color: #363955;
}
/*****************************************************************************/
input[type="checkbox"] {
    scale: 1.3;
    cursor: pointer;
}
/*****************************************************************************/
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; overflow: scroll;}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
/*****************************************************************************/
.card {
    display: flex;
    flex-direction: row;
    column-gap: 12px;
    padding-right: 12px;
    align-items: center;
    margin: 10px;
    background-color: var(--color-white);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}
.card-img {
    width: 150px;
    height: 60px;
    background-size: cover;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.card-quality {
    font-weight: bold;
    font-size: 85%;
    font-style: italic;
}
.card-notify-price {
    color: var(--color-dark-blue);
    border: 1px solid var(--color-mid-blue);
    border-radius: 3px;
    padding: 5px 5px;
    width: 64px;
    height: 100%;
    padding: 7px 20px 5px 7px;
}
#cardPane .site-icon, .list-table .site-icon {
    transition: opacity 0.4s ease-in-out;
    opacity: 0;
}
#cardPane .card:hover .site-icon, .list-table tr:hover .site-icon {
    opacity: 1;
}
.list-table tr:not(:hover) .site-icon {
    opacity: 0;
}
.icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    filter: brightness(0) saturate(100%) invert(25%) sepia(10%) saturate(1587%) hue-rotate(196deg) brightness(94%) contrast(90%);
    vertical-align: middle;
}
.icon:hover {
    scale: 1.05;
}
.icon-text {
    width: 18px;
    filter: var(--filter-dark-blue);
}
.bell-toggle[data-active='0'] {
    background-image: url('img/bell_inactive.svg');
    filter: brightness(0) saturate(100%) invert(55%) sepia(9%) saturate(17%) hue-rotate(30deg) brightness(100%) contrast(88%);
}
.bell-toggle[data-active='1'] {
    background-image: url('img/bell_active.svg');
    filter: var(--filter-dark-yellow);
}
.delete {
    background-image: url('img/delete.svg');
    filter: brightness(0) saturate(100%) invert(55%) sepia(9%) saturate(17%) hue-rotate(30deg) brightness(100%) contrast(88%);
}
.edit {
    background-image: url('img/edit.svg');
    filter: brightness(0) saturate(100%) invert(55%) sepia(9%) saturate(17%) hue-rotate(30deg) brightness(100%) contrast(88%);
}
.check-green {
    background-image: url('img/check.svg');
    filter: brightness(0) saturate(100%) invert(68%) sepia(41%) saturate(6626%) hue-rotate(46deg) brightness(97%) contrast(101%);
}
.check-orange {
    background-image: url('img/check.svg');
    filter: brightness(0) saturate(100%) invert(86%) sepia(34%) saturate(5370%) hue-rotate(357deg) brightness(94%) contrast(107%);
}
.check-grey {
    background-image: url('img/check.svg');
    filter: brightness(0) saturate(100%) invert(96%) sepia(3%) saturate(1960%) hue-rotate(189deg) brightness(104%) contrast(84%);
}
/*****************************************************************************/
#addCardPane, #optionsPane, #printsPane, #cardPane, #listPane, #btnOpenAddCard {
    display: none;
}
.card-large {
    align-items: start;
}
#addCardPane .card-large {
    height: 350px; /* must match the height of the card, needed for flex-grow of child */
}
#optionsPane .card-large {
    height: 450px;
}
#printsPane .card {
    align-items: start;
    padding: 10px;
    overflow-x: auto;
}
#printsPane img {
    cursor: pointer;
}
/*****************************************************************************/
.flip-card {
    background-color: transparent;
    perspective: 1000px;
    height: 350px;
    width: calc(350px * 0.72);
}
.flip-card-inner {
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 6px;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
.flip-card-back {
    transform: rotateY(180deg);
}
.flip-card-arrow {
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 50px;
    transform: translateX(-50%);
    cursor: pointer;
    opacity: 0.8;
}
.flip-card-arrow:hover {
    transform: translateX(-50%) translateY(0.7%) scale(1.05);
    opacity: 1;
}
.flip-card-arrow-img {
    width: 100%;
    display: block;
}
/*****************************************************************************/
#tooltip {
    position: fixed;
    background-color: #3c3c3c;
    color: white;
    top: 0;
    left: 0;
    transition: opacity 0.3s;
    border-radius: 3px;
    font-size: 12px;
    padding: 2px 6px;
    z-index: 1000;
}
#tooltip.img-tooltip {
    display: flex;
    flex-direction: row;
    padding: 0;
    background-color: transparent;
    border-radius: 12px;
}
#tooltip.img-tooltip img {
    width: 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    display: block;
}
/*****************************************************************************/
.near-mint {
    color: #87b726;
}
.slightly-played {
    color: #c8d400;
}
.moderately-played {
    color: #f9b000;
}
.played {
    color: #ee7203;
}
.poor {
    color: #b13907;
}
.type-foil {
    filter: var(--filter-dark-yellow);
}
.rarity-common {
    color: #231f20;
    filter: brightness(0) saturate(100%) invert(8%) sepia(2%) saturate(2346%) hue-rotate(289deg) brightness(90%) contrast(95%);
}
.rarity-uncommon {
    color: #81a0ac;
    filter: brightness(0) saturate(100%) invert(67%) sepia(18%) saturate(409%) hue-rotate(151deg) brightness(88%) contrast(90%);
}
.rarity-rare {
    color: #c09c4c;
    filter: brightness(0) saturate(100%) invert(53%) sepia(88%) saturate(266%) hue-rotate(7deg) brightness(91%) contrast(81%);
    
}
.rarity-mythic {
    color: #cb5026;
    filter: brightness(0) saturate(100%) invert(24%) sepia(93%) saturate(2003%) hue-rotate(355deg) brightness(88%) contrast(76%);
}
.input-container {
    position: relative;
}
/*****************************************************************************/
#iptAddNameDropdown {
    position: absolute;
    background-color: white;
    border: 1px solid var(--color-mid-blue);
    border-radius: 3px;
    min-width: 100%; /* Minimum width to match the input */
    max-height: 500px; /* Optional: limit the height */
    overflow-x: auto; /* Optional: add scroll if content overflows */
    z-index: 1000; /* Ensure it appears above other elements */
    top: 100%; /* Align to the bottom border of the input */
    left: 0; /* Align to the left border of the input */
}

#iptAddNameDropdown .dropdown-item {
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
}

#iptAddNameDropdown .dropdown-item:hover {
    background-color: #f0f0f0;
}

#divDailyPrices th, td {
    padding: 1px 15px;
    text-align: center;
}
/*****************************************************************************/
.h100 {
    height: 100%;
}
.p0 {
    padding: 0;
}
.center {
    text-align: center;
}
.italic {
    font-style: italic;
}
.bold {
    font-weight: bold;
}
.grow {
    flex-grow: 1;
}
.nobr {
    white-space: nowrap;
}
.pointer {
    cursor: pointer;
}
.cursor {
    cursor: default;
}
.font-size-m {
    font-size: 14px;
}
.font-size-l {
    font-size: 110%;
}
.font-size-s {
    font-size: 85%;
}
/*****************************************************************************/
.dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: none;
    flex-direction: column;
    align-items: center;
    z-index: 900;
}
.dialog-spacer {
    height: calc(50vh - 30%);
}
.dialog-content {
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
}
.dialog-title {
    font-size: 115%;
    padding: 12px 20px;
    background-color: var(--color-dark-blue);
    border-bottom: 3px solid var(--color-yellow);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: var(--color-yellow);
}
.dialog-message {
    padding: 25px;
}
.dialog-message ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}
.dialog-message li {
    counter-increment: list-counter;
    text-indent: -20px;
    padding: 10px 0 10px 20px;
}
.dialog-message li::before {
    content: counter(list-counter) ". ";
    font-weight: bold;
}
.dialog-buttons {
    padding: 10px;
    text-align: center;
}
/*****************************************************************************/
.check-orange-2 {
    filter: brightness(10%) saturate(80%) invert(70%) sepia(20%) saturate(4957%) hue-rotate(22deg) brightness(130%) contrast(150%);
}
.list-table {
    border-collapse: collapse;
    margin: 0 auto;
    width: 100%;
}
.list-table th, td {
    padding: 0 5px;
}
.list-table td {
    border-bottom: 1px solid #eaeaf0;
}
.list-table input[type='text'] {
    height: 24px;
}
.list-table th {
    background: var(--color-dark-blue);
    height: 30px;
    color: var(--color-yellow);
}
.list-table th:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.list-table th:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.list-group-item {
    background-color: var(--color-light-grey);
    border-radius: 4px;
    border: 1px solid #d5d8da;
    padding: 5px;
}
.list-group-item[data-action='delete'] {
    background-color: #f2bcbc;
}
.list-group-item[data-action='add'] {
    background-color: #bcf2c0;
}
.list-group-item-handle {
    cursor: move;
    width: 22px;
    height: 22px;
    background-image: url('img/drag.svg');
}
.list-group-item-handle:hover {
    scale: 1;
}
.slider {
    width: 74px;
    margin-top: 3px;
}
.list-set-grey {
    color: #676a74;
}
/*****************************************************************************/
#chartBg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}
#chartContainer {
    background-color: var(--color-light-grey);
    border-radius: 14px;
    margin: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.chart-img {
    height: 400px;
    display: block;
    margin: 0 auto;
    border-radius: 14px;
    background-color: #000;
}
#chartDiv {
    border-radius: 5px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.chart-price {
    background-color: #fff;
    display: flex;
    width: 80px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.tv-lightweight-charts {
    border-radius: 5px;
}

/*****************************************************************************/
/*
Cardtrader colors for card rarity
#1a1718
filter: brightness(0) saturate(100%) invert(8%) sepia(2%) saturate(2346%) hue-rotate(289deg) brightness(90%) contrast(95%);

#707883
filter: brightness(0) saturate(100%) invert(50%) sepia(7%) saturate(624%) hue-rotate(175deg) brightness(91%) contrast(93%);

#a58e4a
filter: brightness(0) saturate(100%) invert(53%) sepia(88%) saturate(266%) hue-rotate(7deg) brightness(91%) contrast(81%);

#bf4427
filter: brightness(0) saturate(100%) invert(24%) sepia(93%) saturate(2003%) hue-rotate(355deg) brightness(88%) contrast(76%);
*/