@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

@media (min-height: 650px) {
    body {
        overflow: hidden;
    }
}

/* Reset default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: var(--Text-Color-Dark-Mode-Secondary, #FFF);
}

.finaddress {
    display: flex;
    flex-direction: row; /* Stack child elements vertically */
    height: calc(100vh - 7vh); /* Fills the remaining space */
    background: #F6F6F6;
    align-items: flex-start; /* Align items to the top */
    min-width: 1265px;
    min-height: 578px;
}

.header {
    height: 7vh;
    min-height: 64px;
    display: flex;
    width: 100%;
    padding: 12px 32px;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    width: 202.67px;
    height: 38px;
}

.header-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    min-width: 220px;
}

.header-item {
    color: var(--Text-Color-Secondary, #4D4F53);
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    text-decoration: none;
    position: relative;
    padding-bottom: 5px; /* Add some bottom padding if you want to lower the underline */
}

    /* Add a hover effect for header items */
    .header-item:hover {
        text-decoration: none; /* Remove the default text-decoration */
    }

    .header-item::after {
        content: '';
        display: block;
        position: absolute;
        left: 50%; /* Center the pseudo-element */
        bottom: 0; /* Position at the bottom of the text */
        width: 0; /* Set the default width to 0 */
        transform: translateX(-50%); /* Shift to the left by half its width */
        height: 4px; /* Thickness of the underline */
        background-color: #72166B; /* Color of the underline */
        transition: width 0.3s ease; /* Smooth transition for the hover effect */
    }

    .header-item:hover::after,
    .header-item.active::after {
        width: 100%; /* Full width on hover and active */
    }

    .header-item.active {
        color: #72166B; /* Change text color for the active state */
    }

    .header #logo-container {
        margin-right: 60px; /* Adjust as needed */
    }


.nav .button-group {
    display: flex;
    width: 168px;
    height: 32px;
    align-items: center;
    flex-shrink: 0;
    padding-top: 30px;
    padding-left: 22px;
    margin-bottom: 40px;
}

#sidebar .button-group {
    display: flex;
    width: 168px;
    height: 32px;
    align-items: center;
    flex-shrink: 0;
    padding-top: 56px;
    padding-left: 22px;
    margin-bottom: 40px;
}

.button-group-small-text-prepend {
    display: flex;
    width: 55px;
    height: 32px;
    padding: 8px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    border-radius: 4px 0px 0px 4px;
    border-top: 1px solid var(--Gray-3, #DEDEDE);
    border-right: 1px solid var(--Gray-3, #DEDEDE);
    border-left: 1px solid var(--Gray-3, #DEDEDE);
    border-bottom: 1px solid var(--Gray-3, #DEDEDE);
}

.button-group-small-text-middle {
    display: flex;
    width: 56px;
    height: 32px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: -28px;
    flex-shrink: 0;
    border-top: 1px solid var(--Gray-3, #DEDEDE);
    border-right: 1px solid var(--Gray-3, #DEDEDE);
    border-left: 1px solid var(--Gray-3, #DEDEDE);
    border-bottom: 1px solid var(--Gray-3, #DEDEDE);
}

.button-group-small-text-append {
    display: flex;
    width: 57px;
    height: 32px;
    padding: 8px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    border-radius: 0px 4px 4px 0px;
    border-top: 1px solid var(--Gray-3, #DEDEDE);
    border-right: 1px solid var(--Gray-3, #DEDEDE);
    border-left: 1px solid var(--Gray-3, #DEDEDE);
    border-bottom: 1px solid var(--Gray-3, #DEDEDE);
}

.button-group button {
    color: var(--Grey-600, #7B858F);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    /* Add other default styles as necessary */
}

.button-group .selected {
    color: #FFFFFF;
    background-color: #72166B;
}

.button-group-small-text-prepend.selected,
.button-group-small-text-middle.selected,
.button-group-small-text-append.selected {
    border-color: #72166B;
}

.button-group button:hover {
    /* Example hover effect: darken the color slightly */
    color: darken(var(--Grey-600, #7B858F), 10%);
}

.nav-item {
    display: block;
    align-items: center;
    margin-top: 16px;
    margin-left: 22px;
    margin-right: 22px;
    gap: 8px; /* Adjust gap to match design */
    border-radius: 4px; /* This matches the design */
    text-decoration: none; /* Assuming you want to remove underlines from links */
    background: transparent; /* Start with no background by default */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.nav-link {
    color: #7B858F; /* Default text color */
    text-decoration: none; /* Remove underlines from links */
    padding: 10px 32px 10px 8px; /* Adjust padding to match design */
    display: flex; /* Align icon and text in a row */
    align-items: center; /* Vertically center the icon and text */
    gap: 8px; /* Add some space between the icon and text */
    border-radius: 4px; /* This matches the design */
}

.nav-list .nav-link {
    font-family: Roboto;
    font-size: 16px; /* Set the font size */
    font-weight: 500; /* Set the font weight to medium */
    line-height: 20px; /* Set the line height */
    text-align: left; /* Align text to the left */
    text-decoration: none; /* Optional: Removes underline from links */
}

.nav-icon {
    width: 24px; /* Adjust the width of the icon */
    height: 24px; /* Adjust the height of the icon */
}


.nav-item:hover .nav-icon-background {
    background: #F1E8F0; /* Apply background color change to both nav-link and nav-icon on nav-item hover */
    fill: #F1E8F0;
}

.nav-item:hover .nav-link,
.nav-item:hover .nav-icon {
    background: #F1E8F0; /* Apply background color change to both nav-link and nav-icon on nav-item hover */
}

.nav-link.selected {
    background: rgba(114, 22, 107, 0.1); /* Selected item background color */
    color: #72166B; /* Selected item text color */
}

.nav-item.selected .nav-icon-background {
    background: #F1E8F0; /* Change background color when selected */
    fill: #F1E8F0;
}

.nav-item.selected .nav-icon-fill {
    fill: #72166B;
}

.nav-item.selected .nav-icon-stroke {
    stroke: #72166B;
}

.nav-item.selected .nav-link,
.nav-item.selected .nav-icon {
    background: #F1E8F0; /* Change background color when selected */
    color: #72166B;
}

.nav-link.selected {
    background: rgba(114, 22, 107, 0.1); /* Selected item background color */
    color: #72166B; /* Selected item text color */
}

/* Hover effect for rows except the first row */
.info-grid tr:not(:first-child):hover th,
.info-grid tr:not(:first-child):hover td {
    background-color: #F1E8F0; /* Adjust the hover color as needed */
}

*::marker {
    content: none;
}

.nav {
    /* width: 17.61%; */
    max-width: 212px;
    /* height: 94%; */
    min-height: 530px;
    height: calc(100% - 24px - 24px);
    /* height: 806px; */
    flex-shrink: 0;
    border-radius: 4px;
    margin-top: 24px;
    margin-left: 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column; /* Add this line */
    justify-content: space-between; /* Add this line */
}

.container {
    flex-grow: 1; /* This will allow the container to take up the remaining space */
    /* Add any additional styles you need for padding, margin, etc. */
}

.heading {
    position: absolute; /* This takes the heading out of the normal document flow */
    top: 100px; /* Adjust this value to move the heading lower on the screen */
    left: 320px; /* Adjust if needed to align the heading as per your design */
    color: var(--Text-Color-Secondary, #4D4F53);
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;
    background: #F6F6F6;
}

.not-available-svg,
.get-started-svg {
    background-color: #F6F6F6;
    padding: 20px;
    padding-top: 80px;
    display: inline-block; /* Ensures the background color fits the content */
}

.new-container {
    /* Adjust the width as needed, or use flex-grow if you want it to fill the remaining space */
    width: calc(100% - 212px - 24px); /* Assuming the nav width plus the margin */
    margin-left: 24px; /* Or any value you want */
    padding: 20px; /* Add padding as needed */
    height: calc(100% - 24px - 24px);
    /* height: auto;  Adjust as needed */
    background: #F6F6F6;
    min-width: 1000px;
}

.title-row h1 {
    font-size: 24px;
    color: #333;
    background: #F6F6F6;
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    min-width: 220px;
}

.search-row {
    margin-bottom: 10px; /* Space below the row */
}

.titles-row, .search-row {
    height: 48px;
    display: flex;
    gap: 10px; /* Space between the form elements */
    align-items: center; /* Aligns the input and select box on their center line */
    background: #F6F6F6;
}

.search-row #address_field, .titles-row .placeholder-title {
    flex: 2; /* Take up twice as much space as the other elements */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #F6F6F6;
    height: 48px;
    font-size: 16px;
    min-width: 448px;
    max-width: 448px;
    padding-left: 40px;
}

    .titles-row .placeholder-title {
        padding-left: 40px;
        border: 1px solid transparent;
        border-radius: 4px;
    }

.search-container {
    position: relative;
    display: inline-block;
}

    .search-container img {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px; /* Adjust the size of the icon as needed */
        height: 20px; /* Adjust the size of the icon as needed */
    }

    .search-container input {
        padding-left: 40px; /* Adjust padding to make room for the icon */
        height: 24px; /* Adjust height as needed */
        border: 1px solid #ccc; /* Optional: Add border */
        border-radius: 4px; /* Optional: Add border-radius for rounded corners */
        color: #000; /* Adjust text color */
    }

        .search-container input::placeholder {
            color: #7B858F; /* Adjust placeholder text color */
        }


    .search-row .token-input {
        flex: 1; /* Take up the same space as the corresponding title */
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: #FFF;
        height: 48px;
        font-size: 16px;
        max-width: 448px;
    }

.titles-row span:nth-child(2) {
    width: 317px;
    /*    flex: 1;  Take up the same space as the corresponding title */
    flex: 0 0 317px; /* Prevent growing/shrinking */
    padding: 20px 20px 0 0;
    max-width: 448px;
}

.search-row select {
    flex-grow: 0; /* Prevent select from growing */
    width: 150px; /* Fixed width for the select */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #FFF;
    -moz-appearance: none; /* Remove default arrow from Firefox */
    -webkit-appearance: none; /* Remove default arrow from Chrome/Safari */
    appearance: none; /* Remove default arrow from modern browsers */
    background: #FFF url('/Resources/Image/dropdown-arrow.png') no-repeat right 10px center;
    background-size: 12px; /* Size of the dropdown arrow */
    height: 48px;
    font-size: 16px;
    margin-left: auto;
}

    .titles-row span {
        font-family: Roboto;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        text-align: left;
        background: #F6F6F6;
    }

        .titles-row span:nth-child(3) {
            flex-grow: 0; /* Prevent select from growing */
            width: 150px; /* Fixed width for the select */
            min-width: 150px;
            border-radius: 4px;
            appearance: none; /* Remove default arrow from modern browsers */
            margin-left: auto;
            padding: 20px 20px 0 0;
        }

/* Add padding to the container */
.row {
    padding-bottom: 20px; /* Add some space between the rows */
}

/* Clear styles for the search info row as it's empty */
.search-info-row {
    display: none; /* Hide the row if it's empty */
}

.titles-row span {
    border: none;
}

.table-container {
    flex: 1; /* Allow the table container to grow and shrink with its parent */
    max-height: calc(100% - 84px); /* Ensure it doesn't overflow the parent */
    overflow-y: auto; /* Enable vertical scrolling */
}

.info-grid {
    width: 100%;
    border-collapse: collapse;
    font-family: Roboto;
}

    .info-grid th,
    .info-grid td {
        padding: 14px 24px;
        text-align: left;
        gap: 180px;
    }

    .info-grid th {
        width: 30%;
    }

    .info-grid td {
        width: 70%; /* Default width for td */
    }

    /* This targets the first row's th to make it look like a title */
    .info-grid tr:first-child th {
        background-color: var(--Grey-200, #D9DEE2); /* Adjusted to a light gray similar to your image */
        color: #000;
        font-size: 16px;
    }

    .info-grid tr:not(:first-child) th, .info-grid tr:not(:first-child) td {
        background-color: #fff;
        color: #333;
        font-weight: normal;
    }

    .info-grid tr:nth-child(even) th, .info-grid tr:nth-child(even) td {
        background-color: #F6F6F6;
    }

.selector-row {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 40px;
    padding: 8px 24px;
}

.selector-button {
    border: none;
    color: var(--Text-Color-Secondary, #4D4F53);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
    position: relative;
    padding: 15px;
}

    .selector-button::after {
        content: '';
        display: block;
        position: absolute;
        left: 50%; /* Center the pseudo-element */
        bottom: 0; /* Position at the bottom of the button */
        width: 0; /* Set the default width to 0 */
        transform: translateX(-50%); /* Shift to the left by half its width */
        height: 4px; /* Thickness of the underline */
        background-color: #72166B; /* Color of the underline */
        transition: width 0.3s ease; /* Smooth transition for the hover effect */
    }

    .selector-button:hover::after,
    .selector-button.active::after {
        width: 100%; /* Full width on hover and active */
    }

    .selector-button.active {
        color: #72166B; /* Change text color for the active state */
    }

/* Styling for the dropdown container */
#finaddressItems {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: auto; /* Adjust width as necessary */
    max-height: 300px; /* Manage dropdown height */
    overflow-y: auto; /* Enable scrolling */
}

    /* Styling the scrollbar for WebKit browsers */
    #finaddressItems::-webkit-scrollbar,
    .table-container::-webkit-scrollbar {
        width: 5px; /* Width of the scrollbar */
    }

    #finaddressItems::-webkit-scrollbar-track,
    .table-container::-webkit-scrollbar-track {
        background: transparent; /* Transparent track */
    }

    #finaddressItems::-webkit-scrollbar-thumb,
    .table-container::-webkit-scrollbar-thumb {
        background: #7B858F; /* Black scrollbar thumb */
        border-radius: 15px; /* Rounded corners of the thumb */
    }

        #finaddressItems::-webkit-scrollbar-thumb:hover,
        .table-container::-webkit-scrollbar-thumb:hover {
            background: #4D4F53; /* Slightly lighter black on hover */
        }

#finaddress-version {
    font-family: Roboto;
    font-size: 11px;
    font-weight: 400;
    line-height: 13px;
    letter-spacing: -0.1px; /* Adjusted for clarity */
    text-align: left;
    color: #333; /* Assuming a dark grey color for readability */
    margin: 0; /* Remove default margin */
    padding: 10px; /* Optional padding to create space around the text */
    margin-top: auto; /* Pushes itself to the bottom */
}


.input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.token-input {
    flex: 1;
    width: 317px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #FFF; /* Ensure this is the same for both modes */
    height: 48px;
    font-size: 16px;
    max-width: 448px;
    padding-right: 50px; /* Ensure enough space for the button */
}

    /* Ensure the background remains the same when the input type changes */
    .token-input[type="text"],
    .token-input[type="password"] {
        background: #FFF; /* Set a consistent background */
        border: 1px solid #ccc; /* Ensure the border is the same */
    }


.token-button {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Remove padding from the button */
    width: 24px; /* Set fixed width and height for the button */
    height: 24px;
}

    .token-button img {
        width: 100%;
        height: 100%;
    }

.tooltip-icon:hover {
    opacity: 0.6;
}

/* Tooltip span */
.tooltip-icon {
    width: 24px;
    height: 24px;
    background-image: url(/Resources/Image/tooltip.png);
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0);
    display: inline-block;
    vertical-align: middle;
    margin-left: 16px;
    margin-top: -2px; /* Adjust the value as needed */
}

/* Table container */
.table-container.rounded {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.table-container.not-rounded {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.table-container.no-products,
.table-container.get-started {
    background-color: #F6F6F6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    width: 100%;
}

/* Not available image */
.not-available-img {
    display: block;
    margin-top: 60px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    background-color: #F6F6F6;
}

/* Info text */
.info-text {
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #333;
    margin-top: 20px;
    background-color: #F6F6F6;
}

/* Finaddress items */
#finaddressItems {
    display: block;
    position: absolute;
    z-index: 1000;
}

.list-group-item-action {
    display: block;
    width: 100%;
    padding: .75rem 1.25rem;
    color: #7B858F;
    text-align: inherit;
    background-color: #fff;
    text-decoration: none;
    font-family: Roboto;
    font-weight: 500;
}

/* Styling each dropdown item */
.list-group-item {
    cursor: pointer;
    color: #333; /* Default text color */
    background: #ffffff; /* Default background */
}

    /* Hover effect for items */
    .list-group-item:hover, .list-group-item:hover .list-group-item-action {
        background-color: #F1E8F0;
        color: #72166B;
    }

.loader {
    margin: auto;
    border: 5px solid #EAF0F6;
    border-radius: 50%;
    border-top: 5px solid #72166B;
    width: 25px;
    height: 25px;
    animation: spinner 2s linear infinite;
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.download-link-cell {
    text-align: right;
    padding: 0 10px;
    background-color: transparent;
}

.download-link {
    display: inline-block;
    align-items: center;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #72166B;
    padding: 4px 14px;
    border: 1px solid #72166B;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

    .download-link:hover {
        color: darken(var(--Grey-600, #7B858F), 10%);
    }

/* Specific styling for the download button header cell */
.download-button-header {
    padding-top: 4px; 
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: normal;
}

th, td {
    line-height: normal;
    padding: 14px 24px;
    vertical-align: middle;
}

.svg-container .download-icon {
    fill: #72166B;
}

/* Styles for the SVG container */
.svg-container {
    margin-left: 8px; /* Add space between the text and the icon */
    display: inline-block;
    width: 25px;
    height: 50px;
    background-color: transparent;
}

/* Styles for the SVG icon */
.download-icon {
    width: 25px;
    height: 50px;
    fill: #FFFFFF; 
    background-color: transparent;
}

.download-link:hover {
    color: #000000; /* Change text color to black on hover */
}

    .download-link:hover .download-icon path {
        fill: #000000; /* Change icon color to black on hover */
    }

.content table p,
.content table span,
.content table b,
.content table i,
.content table a {
    background-color: #FEF7E3;
}

.skeleton-row {
    height: 48px; /* Match the row height of your final table */
}

.skeleton-cell {
    padding: 14px 24px; /* Match padding with actual table cells */
    width: 100%;
    background: linear-gradient(90deg, #F6F6F6 25%, #fff 50%, #F6F6F6 75%);
    background-size: 200% 100%; /* Ensures the gradient can move across the full width */
    animation: skeleton-loading 1.5s linear infinite; /* Smooth, infinite animation */
}

/* First row specific styling */
.skeleton-row:first-child .skeleton-cell {
    background: linear-gradient(90deg, #D9DEE2 25%, #F6F6F6 50%, #D9DEE2 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s linear infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0; /* Start beyond the right edge */
    }

    100% {
        background-position: -200% 0; /* Move to beyond the left edge */
    }
}