@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

:root {
    /* Color Palette */
    --primary-color: #d0d6dd;
    --secondary-color: #faeedd;
    --accent-color: #ebb76c;
    --red: #d91400;
    --green: #087c32;
    --off-white: #ffffffb0;
    --off-black: #062343;
    --screener-blue-accent: #0067b1;
    --cyan-border: #0a99ff;

    /* Backgrounds */
    --dropzone-background: #a2b9d5;
    --active-section: #1e4a88;
    --screener-active-section: #6cb5ea;
    --background-color: #e8edf3;
    --screener-background-color: #f0f7fd;
    --dim-screener-background: #7789961a;
    --screener-filter-background: linear-gradient(91.39deg,
            rgba(108, 181, 234, 0.6) -9.62%,
            rgba(108, 181, 234, 0.3) 120.77%);
    --list-color: #668fbd78;
    /* opaque color for after psuedo element */
    --list-color-after: #e2e8ef;
    --list-color-after-complete: #f8f9fb;
    --chevron-background: #abc2dc;
    --disabled-color: #e9edf0;

    /* Text Colors */
    --dim-text: #778996;
    --options-text: #4e7096;

    /* Borders */
    --border-size-small: 1px solid;
    --border-size: 2px solid;
    --border-radius: 5px;
    --border-radius-big: 10px;
    --option-border: #668fbd;
    --header-border: #90aecf;
    --radio-border: #d0d6ddcc;
    --screener-radio-border: #d5e0e6;
    --table-border: #d9d9d9;

    /* Miscellaneous */
    --section-padding: 25px;
    --shadow: 0 4px 4px 0px #00000040;
}

#main-compare-container * {
    font-family: "Rubik", sans-serif;
    box-sizing: border-box;
    font-weight: 500;
    /* text-align: initial; */
    direction: rtl;
}

#main-compare-container {
    position: relative;
    border-radius: var(--border-radius-big);
    overflow: hidden;
}

#gemel-compare-body {
    position: relative;
}

.hidden {
    display: none !important;
}

.green {
    color: var(--green);
}

.red {
    color: var(--red);
}

.arrow {
    cursor: pointer;
}

.flex {
    width: 100%;
}

.cell,
.flex,
.arrows,
.flex-header,
.flex-container,
#data-container,
.kupot-container,
.dropzone-container,
.screener-flex-container,
#screener-custom-dates-container,
#screener-custom-dates-container>div,
.compare-screener-button-container {
    display: flex;
}

.cell,
.arrows,
.flex-container,
#data-container,
.kupot-container,
.dropzone-container {
    flex-direction: column;
}

.kupot-container,
.dropzone-container,
#screener-custom-dates-container,
.compare-screener-button-container {
    justify-content: center;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 30px 25px 30px;
    column-gap: 50px;
}

.cell,
.flex-header,
.flex-container {
    align-items: center;
}

.flex-container {
    height: 100%;
    width: 100%;
    gap: 5px;
    justify-content: start;
}

.screener-flex-container {
    width: 100%;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.kupot-container,
.dropzone-container {
    justify-self: center;
    width: 100%;
}

#data-container,
#screener-data-container {
    gap: 20px;
    width: 100%;
}

#more-info-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
}

#screener-table-body #more-info-row .screener-chart-header {
    font-weight: bold;
    justify-self: end;
    margin-top: 0;
    margin-bottom: 15px;
    padding-right: 10px;
}

.screener-graph-container {
    /* span all available */
    position: relative;
    grid-column: 1 / -1;
    height: 40px;
    width: 100%;
    padding: 10px 0;
    overflow: hidden;
    transition: height 0.5s ease-in-out;
    border-radius: var(--border-radius-big);
    background: var(--screener-filter-background);
    cursor: pointer;
}

.graph-watermark {
    opacity: 1;
    position: absolute;
    width: 21%;
    height: 8.4%;
    left: 75%;
    bottom: 12%;
    z-index: 100;
}

.tzvira-graph .graph-watermark,
.asset-graph .chart-container .graph-watermark,
#screener-asset-graph.asset-graph .chart-container .graph-watermark {
    top: 7%;
}

.dist-graph .graph-watermark {
    bottom: 14%;
}

.asset-graph .chart-container .graph-watermark {
    top: 23%;
}

canvas[id^="screener"] {
    background-color: white;
}

.screener-graph-container.open {
    height: 530px;
}

#screener-asset-graph.screener-graph-container.open {
    height: 600px;
}

/** charts */
.chart-container {
    width: 100%;
    height: 450px;
    position: relative;
    /* position: absolute; */
    /* justify-self: center; */
}

#assetButtonContainer,
.asset-button-container {
    display: flex;
    width: 100%;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.asset-btn,
.screener-asset-btn {
    width: 130px;
    height: 50px;
    font-size: 12px;
    border: var(--border-size-small) #1e4a8836;
    border-radius: var(--border-radius-big);
    box-shadow: var(--shadow);
    background-color: white;
    font-weight: normal !important;
}

.asset-btn:hover,
.screener-asset-btn:hover,
.inner-slide>div>span:hover {
    background-color: #e2e8f0;
    font-weight: 500 !important;
}

.asset-btn.active,
.screener-asset-btn.active {
    font-weight: 500 !important;
    border-color: var(--accent-color);
}

.clear-section {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 5px;
    align-items: center;
}

.read-more-btn-container {
    overflow: hidden;
    padding-bottom: 10px;
    padding-top: 10px;
}

.inner-slide {
    white-space: nowrap;
    position: relative;
    transition: right 1s ease;
    right: 0;
}

.inner-slide>div {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
    width: 20%;
    height: 60px;
    vertical-align: top;
    cursor: pointer;
}

.inner-slide>div>span {
    white-space: wrap;
    background-color: white;
    color: var(--active-section);
    box-shadow: var(--shadow);
    padding: 5px;
    border-radius: var(--border-radius-big);
    border: var(--border-size-small) #1e4a8836;
    text-align: center;
    width: 100%;
    height: 100%;
    min-height: 50px;
    display: grid;
    place-items: center;
}

.slide-button {
    height: 50px;
    width: 50px;
    border: none;
    border-radius: 50%;
    background-color: white;
    box-shadow: var(--shadow);
    color: var(--dim-text);
    cursor: pointer;
    font-size: 20px;
    font-weight: 800 !important;
}

.slide-button:hover {
    color: white;
    background-color: var(--dim-text);
}

#more-info-row .read-more-kupa-btn {
    width: 50%;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: var(--border-radius-big);
    background-color: var(--cyan-border);
    color: white;
    cursor: pointer;
}

.read-more-kupa-btn>span {
    font-size: 14px;
}

#more-info-row .read-more-kupa-btn:hover {
    filter: hue-rotate(20deg);
}

#custom-dates-container {
    height: 0;
    overflow: hidden;
    display: flex;
    gap: 10px;
    transition: all 0.5s ease-in-out;
}

#custom-start-date,
#custom-end-date {
    border-radius: var(--border-radius-big);
    border: none;
    padding: 5px;
    margin: auto;
}

#screener-custom-dates-container {
    gap: 50px;
}

#screener-custom-dates-container>div {
    gap: 15px;
}

#screener-custom-dates-container input {
    height: fit-content;
    border-radius: var(--border-radius-big);
    border: none;
    padding: 10px;
    margin: auto;
}

/** tables */

#compare-table,
#screener-table {
    display: block;
    border: var(--border-size) var(--table-border);
    border-radius: var(--border-radius-big);
    font-size: 14px;
}

.table-grid,
.screener-table-grid {
    display: grid;
    text-align: center;
    align-items: center;
}

#compare-table-body .table-grid:hover,
#screener-table-body .screener-table-grid:not(#more-info-row):hover {
    background-color: #e9e9e9;
}

.screener-table-grid {
    grid-template-columns: 0.5fr repeat(18, 1fr);
}

.table-grid,
.bituach .screener-table-grid {
    grid-template-columns: 0.5fr repeat(17, 1fr);
}

.bituach .table-grid {
    grid-template-columns: 0.5fr repeat(16, 1fr);
}

.bituach #compare-tzvira,
.bituach #screener-tzvira {
    display: none;
}

.bituach #param-tzvira {
    opacity: 0.5;
    position: relative;
}

.bituach #param-tzvira::after {
    content: "(לא זמין בביטוח)";
    font-size: 12px;
    color: black;
    background-color: white;
    box-shadow: 0 0 5px 1px black;
    width: 20%;
    padding: 10px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    border-radius: var(--border-radius-big);
    border: 1px solid black;
    visibility: hidden;
}

.bituach #param-tzvira:hover::after {
    visibility: visible;
}

.bituach #param-tzvira input {
    cursor: not-allowed;
}

#designated-bonds {
    display: grid;
}

.gemel #designated-bonds {
    display: none;
}

.cell {
    height: 100%;
    justify-content: center;
}

.cell.active .flex-header::before {
    font-family: "Playfair Display", serif;
    content: "*";
    font-size: 25px;
    color: #ffb752;
    height: 90%;
}

#compare-table-head .cell,
#screener-table-head .cell {
    justify-content: end;
    border-left: var(--border-size) var(--table-border);
}

#compare-table-head .cell.no-border,
#screener-table-head .cell.no-border,
#compare-table-head .cell:last-child,
#screener-table-head .cell:last-child {
    border: none;
}

#compare-table-body .table-grid:last-child {
    border-bottom: none;
}

.table-grid .cell,
.screener-table-grid .cell {
    grid-column: span 2;
}

.table-grid .cell:nth-child(7),
.table-grid .cell:nth-child(8),
.table-grid .cell:nth-child(10),
.table-grid .cell:nth-child(11),
.screener-table-grid .cell:nth-child(7),
.screener-table-grid .cell:nth-child(8),
.screener-table-grid .cell:nth-child(10),
.screener-table-grid .cell:nth-child(11),
.screener-table-grid .cell:nth-child(12) {
    grid-column: span 1;
}

#compare-table-head,
#screener-table-head {
    border-bottom: var(--border-size) var(--table-border);
}

#compare-table-body,
#screener-table-body {
    overflow: hidden scroll;
    scrollbar-width: none;
    max-height: 500px;
    padding: 0;
    border-radius: 0 0 var(--border-radius-big) var(--border-radius-big);
    /* transition: max-height 0.5s ease-in-out; */
}

#compare-table-body .cell,
#screener-table-body .cell,
#compare-table-body .cell a,
#screener-table-body .cell a {
    font-weight: normal;
}

#compare-table-body .table-grid *,
#screener-table-body .screener-table-grid * {
    font-weight: normal;
    direction: ltr;
}

#compare-table-body .table-grid,
#screener-table-body .screener-table-grid {
    min-height: 50px;
    background-color: white;
    /* border-top: var(--border-size) var(--table-border); */
    border-bottom: var(--border-size-small) var(--table-border);
}

/** end tables */

.compare-screener-button-container .compare-screener-button {
    flex-grow: 0;
    min-width: fit-content;
    padding: 15px 30px;
    /* color: var(--dim-text); */
    transition: flex-grow 0.5s ease-out, background-color 0.3s, color 0.3s;
    /* border: none; */
    font-size: 20px;
}

.compare-screener-button-container .compare-screener-button.active {
    /* flex-grow: 1; */
}

.compare-screener-button-container #compare-button.active {
    background-color: var(--active-section);
    color: white;
    box-shadow: -1px 3px 5px rgba(0, 0, 0, 0.25);
    border: none;
}

.compare-screener-button-container #screener-button.active {
    background-color: var(--screener-active-section);
    /* color: var(--off-black); */
    color: black;
    border: 2px solid rgba(217, 217, 217, 1);
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.25);
}

.section {
    padding: 10px 20px 30px 20px;
}

.compare-graph-container {
    height: 50px;
    padding: 10px;
    position: relative;
    background-color: white;
    border: var(--border-size) var(--list-color);
    border-radius: var(--border-radius-big);
    overflow: hidden;
    transition: height 0.5s ease-out;
}

.compare-graph-container h3 {
    margin: 0;
    /* height should be the same as compare-graph-container height-padding */
    height: 40px;
    font-size: 20px;
    text-align: start;
    font-weight: bold;
}

.compare-graph-container.open {
    height: 520px;
    background-color: transparent;
}

.compare-graph-container.bigger.open {
    height: 600px;
}

.graph-arrow {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-weight: bold;
    font-size: 20px;
    color: var(--active-section);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNiAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMi4xOC4zNjRBMS4yOTIgMS4yOTIgMCAxIDAgLjQwNCAyLjI0MmwxMS42MjUgMTAuOThhMS4yOSAxLjI5IDAgMCAwIDEuNzc0IDBMMjUuNDMgMi4yNDJBMS4yOTIgMS4yOTIgMCAxIDAgMjMuNjU3LjM2NGwtMTAuNzQgMTAuMTQyeiIgZmlsbD0iIzFlNGE4OCIvPjwvc3ZnPg==);
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    transition: transform 1s ease-out, background-color 1s linear;
}

.arrow-flip {
    transform: rotate(180deg);
}

/* add selectors for universal box-shadow */
#dropzone,
#kupot-names,
.period-label,
.sug-item,
.taagid-item,
.sector-item,
.general-item,
.expertise-item,
#compare-table,
.compare-container,
.screener-container,
.compare-graph-container {
    box-shadow: var(--shadow);
}

.screener-container,
.compare-container {
    padding: 10px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background-color: var(--off-white);
    border-radius: var(--border-radius);
    border: var(--border-size) var(--primary-color);
}

#screener-section,
#compare-section {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#screener-section {
    z-index: 1;
}

#compare-section {
    z-index: 2;
}

#compare-section.section {
    background-color: var(--background-color);
}

#screener-section.section {
    background-color: var(--screener-background-color);
}

.filter {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.filter * {
    color: var(--dim-text);
}

.submit-filters {
    grid-row: 2;
    grid-column: 1 / 4;
    justify-content: center;
    align-items: center;
    height: 100px;
    /* width: 85%; */
    width: 100%;
}

.submit-filter {
    display: grid !important;
    grid-template-columns: 0.5fr 1fr 0.5fr;
    margin: auto;
}

.submit-button {
    width: 67%;
    height: 35%;
    font-size: 15px;
    margin: auto;
    border: none;
    border-radius: var(--border-radius-big);
    background-color: var(--accent-color);
    color: var(--active-section);
    font-size: 20px;
    /* margin-right: 60px; */
}

.submit-filter .reset {
    align-self: center;
    height: 50px;
    width: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='78' height='78' viewBox='0 0 78 78' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.4608 36.0875C13.6948 19.9675 26.9353 7.00004 43.1951 7.00004C48.2856 6.99214 53.2931 8.28973 57.7392 10.7688C62.1853 13.2479 65.9214 16.8257 68.5905 21.1603C68.9098 21.71 69.0016 22.3626 68.8466 22.9791C68.6915 23.5955 68.3017 24.127 67.7604 24.4602C67.219 24.7934 66.569 24.9019 65.9488 24.7627C65.3285 24.6234 64.7872 24.2474 64.4403 23.7148C62.2073 20.0891 59.0815 17.0968 55.362 15.0239C51.6424 12.951 47.4532 11.8668 43.1951 11.875C29.5938 11.875 18.5763 22.691 18.3391 36.081L19.6391 34.7908C20.098 34.3352 20.7192 34.0807 21.3659 34.0831C22.0125 34.0856 22.6318 34.3448 23.0873 34.8038C23.5428 35.2628 23.7974 35.8839 23.795 36.5306C23.7925 37.1773 23.5333 37.7965 23.0743 38.252L17.6143 43.6665C17.1578 44.119 16.5411 44.3729 15.8983 44.3729C15.2555 44.3729 14.6388 44.119 14.1823 43.6665L8.72231 38.252C8.49483 38.0267 8.31396 37.7587 8.19003 37.4635C8.0661 37.1682 8.00154 36.8515 8.00003 36.5313C7.99852 36.2111 8.06009 35.8937 8.18123 35.5973C8.30237 35.3009 8.48071 35.0313 8.70606 34.8038C8.93141 34.5763 9.19935 34.3954 9.4946 34.2715C9.78985 34.1476 10.1066 34.083 10.4268 34.0815C10.747 34.08 11.0644 34.1416 11.3608 34.2627C11.6572 34.3839 11.9268 34.5622 12.1543 34.7875L13.4608 36.0875ZM68.2428 33.7053C68.6992 33.2538 69.3152 33.0005 69.9572 33.0005C70.5991 33.0005 71.2152 33.2538 71.6716 33.7053L77.1511 39.1198C77.3848 39.3433 77.5718 39.6111 77.701 39.9076C77.8302 40.2041 77.8991 40.5234 77.9038 40.8468C77.9084 41.1702 77.8486 41.4912 77.7279 41.7913C77.6071 42.0914 77.4279 42.3644 77.2006 42.5945C76.9733 42.8246 76.7025 43.0072 76.4039 43.1315C76.1054 43.2559 75.785 43.3197 75.4616 43.319C75.1382 43.3184 74.8181 43.2534 74.5201 43.1278C74.222 43.0022 73.9519 42.8185 73.7255 42.5875L72.3931 41.2713C72.1656 57.4075 58.8698 70.375 42.5581 70.375C37.4548 70.3864 32.4336 69.0914 27.9724 66.6134C23.5112 64.1353 19.7585 60.5566 17.0716 56.218C16.9034 55.9455 16.7906 55.6426 16.7395 55.3265C16.6884 55.0103 16.7001 54.6873 16.7739 54.3757C16.8477 54.0641 16.9821 53.77 17.1695 53.5104C17.357 53.2508 17.5937 53.0306 17.8662 52.8624C18.1387 52.6943 18.4417 52.5814 18.7578 52.5303C19.0739 52.4793 19.397 52.491 19.7086 52.5648C20.0202 52.6385 20.3142 52.773 20.5738 52.9604C20.8335 53.1478 21.0536 53.3845 21.2218 53.657C23.4718 57.2879 26.6138 60.2824 30.3486 62.3555C34.0833 64.4285 38.2865 65.511 42.5581 65.5C56.2276 65.5 67.2906 54.6678 67.5181 41.2778L66.1921 42.5875C65.7322 43.0422 65.1106 43.2956 64.4639 43.2919C63.8172 43.2883 63.1985 43.0279 62.7438 42.568C62.2891 42.1082 62.0357 41.4865 62.0394 40.8399C62.0431 40.1932 62.3035 39.5745 62.7633 39.1198L68.2428 33.7053Z' fill='%231E4A88'/%3E%3Cpath d='M32.9688 44.1719C32.2031 44.1719 31.5286 43.9974 30.9453 43.6484C30.362 43.2943 29.9062 42.7995 29.5781 42.1641C29.2552 41.5286 29.0885 40.7891 29.0781 39.9453V39.0078C29.0781 38.6016 29.1328 38.2031 29.2422 37.8125C29.3568 37.4167 29.513 37.0625 29.7109 36.75C29.9089 36.4323 30.1328 36.1901 30.3828 36.0234C30.3984 36.013 30.4141 36.0026 30.4297 35.9922C30.4505 35.9766 30.4714 35.9661 30.4922 35.9609L30.4844 35.9375C30.2865 35.9583 30.0339 36.0078 29.7266 36.0859C29.4245 36.1641 29.1276 36.2422 28.8359 36.3203L28.5547 35.2266C28.9609 35.1068 29.4062 35.0026 29.8906 34.9141C30.375 34.8203 30.862 34.75 31.3516 34.7031C31.8464 34.651 32.3073 34.625 32.7344 34.625C33.5938 34.625 34.3307 34.7943 34.9453 35.1328C35.5599 35.4661 36.0312 35.9479 36.3594 36.5781C36.6927 37.2031 36.8594 37.9583 36.8594 38.8438V39.9453C36.8594 40.7891 36.6979 41.5286 36.375 42.1641C36.0521 42.7995 35.599 43.2943 35.0156 43.6484C34.4323 43.9974 33.75 44.1719 32.9688 44.1719ZM32.9688 42.9453C33.4583 42.9453 33.8854 42.8203 34.25 42.5703C34.6198 42.3203 34.9062 41.9714 35.1094 41.5234C35.3177 41.0755 35.4219 40.5521 35.4219 39.9531V38.8594C35.4219 38.2344 35.3177 37.6979 35.1094 37.25C34.9062 36.7969 34.6146 36.4505 34.2344 36.2109C33.8542 35.9661 33.4036 35.8438 32.8828 35.8438C32.4141 35.8438 32.0052 35.9688 31.6562 36.2188C31.3125 36.4635 31.0417 36.8177 30.8438 37.2812C30.651 37.7396 30.5469 38.2891 30.5312 38.9297V39.9531C30.5312 40.5521 30.6328 41.0755 30.8359 41.5234C31.0391 41.9714 31.3229 42.3203 31.6875 42.5703C32.0573 42.8203 32.4844 42.9453 32.9688 42.9453ZM42.5078 44.1562C42.0651 44.1562 41.5781 44.112 41.0469 44.0234C40.5208 43.9349 40.0078 43.8047 39.5078 43.6328L39.7891 42.5469C40.2682 42.6927 40.7422 42.7995 41.2109 42.8672C41.6849 42.9349 42.099 42.9688 42.4531 42.9688C43.3073 42.9583 43.9661 42.7422 44.4297 42.3203C44.8932 41.8984 45.125 41.2943 45.125 40.5078V35.9609H41.4375C41.2708 36.2474 41.1354 36.612 41.0312 37.0547C40.9323 37.4974 40.8828 37.9349 40.8828 38.3672V39.0703C41.0026 39.1224 41.1589 39.1589 41.3516 39.1797C41.5443 39.2005 41.7943 39.2109 42.1016 39.2109V40.4609C41.6693 40.4609 41.3021 40.4453 41 40.4141C40.6979 40.3828 40.4271 40.3281 40.1875 40.25C39.9531 40.1719 39.7135 40.0677 39.4688 39.9375L39.4375 38.75C39.4375 38.224 39.5026 37.7109 39.6328 37.2109C39.7682 36.7057 39.9505 36.2891 40.1797 35.9609H39.0625V34.7969H46.5703V40.2344C46.5703 41.125 46.3958 41.862 46.0469 42.4453C45.6979 43.0234 45.2188 43.4557 44.6094 43.7422C44 44.0234 43.2995 44.1615 42.5078 44.1562ZM55.8438 44L49.1719 34.7969H50.7969L57.4609 44H55.8438ZM49.5 44V40.6641C49.5 39.8047 49.6589 39.112 49.9766 38.5859C50.2943 38.0599 50.7891 37.6745 51.4609 37.4297L52.0312 38.1797C51.2812 38.5182 50.9062 39.1719 50.9062 40.1406V44H49.5ZM57.5 34.7969L54.3281 40.3516L53.3672 39.2344L55.8672 34.7969H57.5Z' fill='black'/%3E%3C/svg%3E");
    cursor: pointer;
}

.screener-filters .submit-button {
    height: 100%;
    color: white;
    background-color: var(--screener-blue-accent);
}

.submit-button:disabled {
    background-color: var(--disabled-color);
    color: var(--dim-text);
}

.stage {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    margin-left: 15px;
    border-radius: var(--border-radius);
    border: var(--border-size-small) var(--list-color);
    text-align: center;
}

.remove {
    height: 16px;
    aspect-ratio: 1;
    border: none;
    background-image: url(trash.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: transparent;
}

.filter.active span,
.filter.complete span {
    color: var(--active-section);
}

.filter.active .stage,
.filter.complete .stage {
    background-color: var(--active-section);
    color: white;
    border: none;
}

.screener-filters .filter.active .stage,
.screener-filters .filter.complete .stage {
    background-color: var(--screener-active-section);
    color: var(--off-black);
    border: none;
}

.compare-filters,
.screener-filters {
    width: 100%;
    height: 100%;
    /* padding: var(--section-padding); */
}

.compare-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.screener-filters {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.compare-header,
.screener-header {
    width: 100%;
    height: fit-content;
    display: block;
    position: relative;
    text-align: start;
    font-size: 20px;
}

.placeholder-text,
#display-dates-range-title {
    font-size: 18px;
}

.compare-header {
    border: var(--border-size) var(--header-border);
    color: var(--dim-text);
    padding: 10px var(--section-padding);
}

.screener-header {
    border: var(--border-size) #06234333;
    color: var(--off-black);
    border-radius: var(--border-radius-big) var(--border-radius-big) 0 0;
    padding: 10px;
}

.filter.active>.compare-header,
.filter.complete>.compare-header {
    color: var(--active-section);
    /* background-color: var(--background-color); */
}

.compare-header.right {
    border-radius: 0 var(--border-radius-big) 0 0;
    border-left: none;
}

/* before element creates the border of the after element */
.compare-header.right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    aspect-ratio: 1;
    background-color: var(--header-border);
    transform: translateX(-30%);
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
    z-index: 2;
}

/* after element creates the chevron between filters*/
.compare-header.right::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    aspect-ratio: 1;
    transform: translateX(-25%);
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
    z-index: 3;
    background-color: var(--list-color-after-complete);
}

/* .filter.complete>.compare-header.right::after {
    background-color: var(--list-color-after);
} */

.filter.active>.compare-header.right::after {
    background-color: var(--background-color);
}

.compare-header.left {
    border-radius: var(--border-radius-big) 0 0 0;
    border-right: none;
}

.filter.active>.compare-header {
    background-color: var(--background-color);
}

.filter-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 10px 10px;
}

.screener-filters .filter-content {
    padding: var(--section-padding);
    background-color: var(--dim-screener-background);
}

.filter.active .filter-content h4,
.filter.complete .filter-content h4 {
    color: var(--active-section);
    font-size: 15px;
}

.screener-filters .filter-content h4 {
    color: var(--off-black);
}

.filter.active>.filter-content {
    background-color: var(--background-color);
}

.screener-filters .filter.active>.filter-content,
.screener-filters .filter.complete>.filter-content {
    background: var(--screener-filter-background);
}

.screener-filters .submit-filters,
.screener-filters .submit-filters>.filter-content {
    background: none;
}

.screener-filters .submit-filters.active>.filter-content,
.screener-filters .submit-filters.complete>.filter-content {
    background: none;
}

#search-kupa {
    width: 100%;
    justify-self: center;
    padding: 5px 10px;
    background-color: white !important;
    border-radius: var(--border-radius);
    border: 2px solid var(--accent-color);
    border-bottom: 2px solid var(--accent-color) !important;
    font-weight: normal;
    margin: 10px 20px;
}

.grid-container span {
    font-size: 14px;
    color: var(--active-section);
    text-align: start;
}

.text-small,
.grid-container .text-small {
    font-size: 12px;
    font-weight: 600;
    /* Ensures consistent height for small text */
    height: 17px;
}

#kupot-names,
#dropzone {
    direction: ltr;
    height: 230px;
    width: 100%;
    overflow: hidden scroll;
    border-radius: var(--border-radius-big);
    border: var(--border-size-small) var(--list-color);
    background-color: var(--dropzone-background);
    padding-top: 0px;
}

.custom-scrollbar-track {
    right: 14px !important;
    border: var(--border-size-small) #668fbd !important;
    background-color: #1e4a88 !important;
    opacity: 1 !important;
}

#compare-table-body~.custom-scrollbar-track,
#screener-table-body~.custom-scrollbar-track {
    right: 3px !important;
}

.custom-scrollbar-thumb {
    margin-top: 5px !important;
    background-color: var(--accent-color) !important;
}

.sug-item,
.taagid-item,
.sector-item,
.general-item,
.expertise-item {
    display: flex;
    direction: rtl;
    padding: 5px;
    margin: 10px;
    justify-content: center;
    text-align: start;
    align-items: center;
    height: fit-content;
    min-height: 45px;
    border-radius: var(--border-radius-big);
    background-color: white;
    color: var(--options-text);
    border: var(--border-size-small) var(--option-border);
    font-weight: 400 !important;
    cursor: pointer;
}

#dropzone .sug-item,
#dropzone .taagid-item,
#dropzone .sector-item,
#dropzone .general-item,
#dropzone .expertise-item {
    border-color: var(--accent-color);
    justify-content: space-between;
}

#dropzone span {
    margin-right: 10px;
}

.general-item:hover {
    background-color: lightgray;
}

.period-input {
    position: absolute;
    opacity: 0;
}

.period-label,
.screener-period-label {
    width: 150px;
    text-align: center;
    font-size: 14px;
    border-radius: var(--border-radius-big);
    box-shadow: var(--shadow);
    font-size: 16px;
}

.period-label {
    height: 38px;
    line-height: 36px;
    color: var(--options-text);
    border: var(--border-size) var(--radio-border);
    background: var(--off-white);
}

.screener-period-label {
    height: fit-content;
    color: var(--off-black);
    padding: 5px;
    border: var(--border-size) var(--screener-radio-border);
    background: white;
}

.period-label:has(.period-input:disabled) {
    background-color: var(--disabled-color);
    color: var(--dim-text);
    box-shadow: none;
    font-weight: 300 !important;
}

.period-label:has(.period-input:enabled) {
    cursor: pointer;
}

.period-label:has(.period-input:checked) {
    border-color: var(--accent-color);
}

.screener-period-label:has(.period-input:checked) {
    background-color: var(--accent-color);
    border: var(--border-size) #d9a963;
}

#screener-section input {
    background-color: white !important;
    height: 25px !important;
    border-radius: var(--border-radius);
    border: var(--border-size-small) var(--radio-border);
    border-bottom: var(--border-size-small) var(--radio-border) !important;
}

.nine-params-container {
    display: grid;
    grid-template-columns: 2fr 3fr;
    justify-content: center;
    align-items: center;
    /* gap: var(--section-padding); */
    gap: 15px;
}

.nine-params {
    display: grid;
    width: 100%;
    column-gap: var(--section-padding);
    grid-template-areas:
        "empty text"
        "number range";
    grid-template-columns: 50px 1fr;
}

.nine-params>span {
    grid-area: text;
    justify-self: start;
    font-size: 15px;
}

.param-block span:not(:first-child),
.nine-params>span {
    font-weight: 450 !important;
}

.nine-params>input[type="number"] {
    grid-area: number;
}

.nine-params>input[type="range"] {
    grid-area: range;
    padding: 0;
}

#israel-range {
    padding: 0;
}

.param-block,
.param-block-big {
    justify-self: center;
    align-self: center;
    display: flex;
    width: 80%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: white;
    padding: var(--section-padding);
    border: var(--border-size-small) var(--dim-text);
    border-radius: var(--border-radius-big);
    box-shadow: var(--shadow);
}

.param-block {
    height: 100px;
    justify-content: center;
    font-size: 15px;
}

.param-block-big {
    height: 100%;
    grid-column: 2;
    grid-row: 1 / span 6;
    justify-content: space-between;
}

.param-block select {
    padding: 0;
}

.param-block input:not([type="radio"]):not([type="range"]) {
    border: var(--border-size-small) var(--dim-text);
    border-radius: var(--border-radius);
    width: 70px;
}

/** CUSTOM RADIO BUTTONS **/

.custom-radio {
    cursor: pointer;
    margin: 0;
}

.custom-radio input {
    position: absolute;
    visibility: hidden;
}

.custom-radio input:disabled:checked+span:before {
    box-shadow: inset 0 0 0 1em #778899;
}

.custom-radio input:checked+span:before {
    box-shadow: inset 0 0 0 1em #2c73d2;
}

.custom-radio span {
    display: flex;
    align-items: center;
}

.custom-radio span:before {
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin-left: 0.375em;
    transition: 0.25s ease;
}

.custom-radio input~span:before {
    box-shadow: inset 0 0 0 0.125em var(--screener-blue-accent);
}

.custom-radio input:disabled~span:before {
    box-shadow: inset 0 0 0 0.125em #778899;
}

/* extra params */

.more-params-button {
    position: absolute;
    /* width: 105px; */
    width: fit-content;
    height: 30px;
    left: 30px;
    bottom: -40px;
    color: var(--screener-blue-accent);
    border-radius: var(--border-radius-big);
    border: var(--border-size-small) var(--cyan-border);
    background-color: color-mix(in srgb, var(--cyan-border) 9%, transparent);
    box-shadow: var(--shadow);
    transition: bottom 0.3s ease-in-out;
    font-size: 15.5px;
    z-index: 5;
}

.more-params-button:not(:disabled) {
    cursor: pointer;
}

.more-params-button.open {
    bottom: 20px;
}

#extra-params {
    height: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: height 0.3s ease-in-out;
}

#extra-params.open {
    height: 400px;
    padding-bottom: 50px;
}

#extra-params.open.adaptive-height {
    height: fit-content;
}

.extra-param.open {
    height: 350px;
}

.extra-param:last-child.open {
    height: 700px;
}

.extra-param:last-child.open.adaptive-height {
    height: fit-content;
}

#extra-params h3 {
    color: var(--off-black);
    margin: 0;
    font-size: 20px;
}

.extra-params-header {
    margin-bottom: 20px;
    margin-top: 50px;
}

.extra-param {
    background: white;
    border: var(--border-size) var(--screener-radio-border);
    border-radius: var(--border-radius-big);
    height: 65px;
    transition: height 0.5s ease-in-out;
    padding: 10px 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
    cursor: pointer;
}

.extra-param>span {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

.extra-params-header,
.extra-param span {
    text-align: start;
}

.open-section {
    left: 0;
    top: 10px;
    font-size: 20px;
    color: var(--screener-blue-accent);
    transition: transform 1s ease-out;
    position: absolute;
}

.selection-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    width: 100%;
    height: 250px;
}

.selection-container [id$="options"],
.selection-container [id$="dropzone"] {
    width: 100%;
    height: 250px;
    padding: 10px;
    border-radius: var(--border-radius-big);
    border: var(--border-size) var(--screener-radio-border);
    background-color: var(--dropzone-background);
    /* background-color: var(--screener-active-section); */
}

/* 
.selection-container [id$="options"] {
    background-color: #e7f5ff;
}

.selection-container [id$="dropzone"] {
    background-color: var(--screener-blue-accent);
} */

#expertise-container {
    padding: 20px;
    background: #d2ecff;
    /* background-color: var(--screener-blue-accent); */
    /* background-color: var(--screener-active-section); */
    border-radius: var(--border-radius-big);
    border: 2px solid color-mix(in srgb, var(--cyan-border) 70%, transparent);
}

#expertise-selects {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.expertise-select {
    display: grid;
    place-items: center;
    height: 50px;
    position: relative;
    background-color: white;
    border-radius: var(--border-radius-big);
    /* psuedo-border to fit with dropdown border */
    box-shadow: inset 0 0 0 1px var(--active-section), var(--shadow);
    text-align: center;
}

.expertise-select:has(input:checked) {
    background-color: var(--active-section);
    color: white;
}

.expertise-dropdown-wrapper {
    position: absolute;
    width: 100%;
    top: 40px;
    overflow: hidden;
    background: white;
    z-index: 1;
    border-radius: 0 0 var(--border-radius-big) var(--border-radius-big);
    border: 1px solid var(--screener-blue-accent);
    border-top: none;
    box-shadow: var(--shadow);
}

.expertise-dropdown {
    height: 100px;
    display: flex;
    flex-direction: column;
    padding: 5px;
    overflow-y: scroll;
}

.expertise-dropdown label {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

#expertise-chosen-list {
    min-height: 200px;
    width: 80%;
    margin-top: 30px;
    justify-self: center;
    background: white;
    border-radius: var(--border-radius-big);
    border: 1px solid var(--screener-blue-accent);
}

.chosen-list {
    display: none;
    flex-direction: column;
    padding-right: 5px;
}

.chosen-list:has(input:checked) {
    display: flex;
}

.chosen-list label:has(input:not(:checked)) {
    display: none;
}

.chosen-list h4 {
    margin: 0;
}

.chosen-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 5px;
}

.message-popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    visibility: hidden;
    top: 250px;
    right: 40%;
    width: 200px;
    height: 100px;
    z-index: 3;
    border: var(--border-size-small) var(--cyan-border);
    border-radius: var(--border-radius-big);
    background-color: var(--background-color);
}

.screener-message-popup {
    top: 16%;
    scroll-margin-top: 100px;
}

#gemel-modal {
    position: absolute;
    z-index: 5;
    /* top: 50%; */
    left: 50%;
    transform: translate(-50%, 150px);
    width: 400px;
    height: 200px;
    background-color: var(--dim-text);
    border: var(--border-size-small) var(--cyan-border);
    border-radius: var(--border-radius-big);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;

    .message {
        color: white;
        font-size: 24px;
        font-weight: bold;
        font-family: "rubik", sans-serif;
    }
}

.button-disabled {
    background-color: var(--disabled-color) !important;
    color: var(--dim-text) !important;
}

.highLightTitle {
    animation: blink 2s ease-in-out 3;
}

.popup-button {
    color: var(--background-color);
    background-color: var(--screener-active-section);
    border-radius: 5px;
}

/* spinner */
.spinner {
    width: 70px;
    height: 35px;
    position: relative;
    overflow: hidden;
}

.spinner:before {
    content: "";
    width: 70px;
    height: 70px;
    position: absolute;
    left: 0;
    top: 0;
    border: 5px solid #0000;
    border-color: var(--active-section) var(--active-section) #0000 #0000;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotate 3s ease-in-out infinite;
    transform: rotate(-200deg);
}

#kupot-names+div.custom-scrollbar-track {
    display: block !important;
}

#kupot-names+div.custom-scrollbar-track div.custom-scrollbar-thumb {
    height: 20px !important;
}

.filter-row {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

#compate-reset-button {
    justify-self: center;
}

.compare-screener-button {
    width: 45%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: rgba(217, 217, 217, 1);
    border: 2px solid rgba(255, 255, 255, 1);
    color: black;
}

/* .compare-active {
  box-shadow: -1px 3px 5px rgba(0, 0, 0, 0.25);
  background-color: rgba(30, 74, 136, 1);
}
.screener-active {
  border: 2px solid rgba(217, 217, 217, 1);
  box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.25);
  background-color: rgba(167, 211, 242, 1);
} */

.compare-screener-button-container {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
    height: 60px;
    background-color: rgba(217, 217, 217, 1);
}

.screener-compare-arrows-icon {
    display: inline-block;
    width: 51px;
    height: 51px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M212.24 171.76a6 6 0 0 1 0 8.48l-32 32a6 6 0 0 1-8.48-8.48L193.51 182H48a6 6 0 0 1 0-12h145.51l-21.75-21.76a6 6 0 0 1 8.48-8.48ZM75.76 116.24a6 6 0 0 0 8.48-8.48L62.49 86H208a6 6 0 0 0 0-12H62.49l21.75-21.76a6 6 0 0 0-8.48-8.48l-32 32a6 6 0 0 0 0 8.48Z' stroke-width='6.5' stroke='%23000'/%3E%3C/svg%3E");
}

@keyframes rotate {
    0% {
        border-width: 10px;
    }

    25% {
        border-width: 3px;
    }

    50% {
        transform: rotate(115deg);
        border-width: 10px;
    }

    75% {
        border-width: 3px;
    }

    100% {
        border-width: 10px;
    }
}

@keyframes blink {

    0%,
    100% {
        color: black;
    }

    50% {
        color: blue;
    }
}

@media only screen and (max-width: 768px) {
    :root {
        --shadow: none;
    }

    #kupot-names:has(+.custom-scrollbar-track),
    #dropzone:has(+.custom-scrollbar-track) {
        padding: 0 30px 0 0;
    }

    .compare-filters {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .grid-container {
        grid-template-columns: 1fr !important;
    }

    .flex-container {
        gap: 10px;
        padding: 10px;

        div:first-child {
            display: none;
        }

        h4 {
            margin: 0;
        }
    }

    .compare-header.right {
        border-left: var(--border-size) var(--header-border);
        border-top-left-radius: var(--border-radius-big);
    }

    .compare-header.left {
        border-right: var(--border-size) var(--header-border);
        border-top-right-radius: var(--border-radius-big);
    }

    .compare-header.right::after,
    .compare-header.right::before {
        display: none;
    }

    .read-more-btn-container {
        padding-bottom: 0;
        padding-top: 0;
    }

    .inner-slide>div {
        /* width: 33.3%; */
        width: 50%;
        height: 80px;
    }

    #screener-table,
    #compare-table {
        width: 100%;
        overflow-y: scroll;
    }

    #screener-table-body,
    #screener-table-head,
    #compare-table-body,
    #compare-table-head {
        /* fixed width for horizontal scrolling */
        width: 1100px;
        overflow: unset;

        +.custom-scrollbar-track {
            display: none !important;
        }
    }

    span.cell:nth-child(2) {
        position: sticky !important;
        right: 0;
        background-color: white;
        z-index: 1;
    }

    .table-grid:hover span.cell:nth-child(2) {
        background-color: #e9e9e9;
    }

    #screener-table-head,
    #compare-table-head {
        position: sticky !important;
        top: 0;
        z-index: 2;

        span.cell {
            background-color: var(--background-color);
        }
    }

    .compare-screener-button-container {
        padding: 0 5px;
    }

    .compare-screener-button-container .compare-screener-button {
        padding: 5px 5px;
    }


    /* screener */
    .screener-flex-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;

        h4 {
            grid-column: span 2;
            justify-self: center;
        }
    }

    #screener-custom-dates-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;

        >div {
            gap: 15px;
            justify-content: space-between;

            * {
                margin: 0;
            }
        }
    }

    .screener-filters .filter:nth-child(2) .filter-content {
        padding: 5px 0;
    }

    .nine-params-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .param-block,
    .param-block-big {
        width: 95%;
        padding: 10px;
        gap: 5px;
    }

    .param-block {
        height: 80px;
    }

    #expertise-container {
        padding: 5px;
    }

    #expertise-selects {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }

    .expertise-select {
        font-size: 12px;
        height: 60px;

        &:nth-child(3n+1) {
            .expertise-dropdown-wrapper {
                right: 0;
                border-top-right-radius: 0;
            }
        }

        &:nth-child(3n) {
            .expertise-dropdown-wrapper {
                left: 0;
                border-top-left-radius: 0;
            }
        }
    }

    .expertise-dropdown-wrapper {
        width: 200%;
        border-top: 1px solid var(--screener-blue-accent);
        border-radius: var(--border-radius-big);
    }

    #more-info-row {
        width: 80vw;
        position: sticky;
        right: 0;
    }

    .dropzone-container>span {
        margin-top: 15px;
    }

    .asset-btn:hover,
    .screener-asset-btn:hover,
    .inner-slide>div>span:hover {
        background-color: white;
        font-weight: inherit !important;
    }

    .overflowing-assets-container {
        width: 100%;
        overflow-x: auto;
        padding: 0 5px;

        .asset-button-container,
        #assetButtonContainer {
            width: 1000px;
        }
    }
}