/* Accessibility: Screen reader only content */
.is-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Default colors */
:root {
    --background: hsla(220, 23%, 95%, 1);
    --gradient: linear-gradient(
        135deg,
        hsl(210, 100%, 99%) 0%,
        hsl(220, 83%, 96%) 15%,
        hsl(220, 83%, 96%) 85%,
        hsl(340, 89%, 97%) 100%
    );
    --base-text-color: hsla(205, 9%, 39%, 1);
    --base-text-color-light: hsla(225, 6%, 56%, 1);
    --green-text-color: hsla(137, 65%, 38%, 1);
    --blue-text-color: hsla(187, 62%, 41%, 1);
    --red-text-color: hsla(352, 88%, 46%, 1);
    --progress-bar-blue: hsla(187, 69%, 53%, 1);
    --progress-bar-orange: hsla(32, 100%, 61%, 1);
    --progress-bar-pink: hsla(324, 100%, 50%, 1);
    --blue-border-color: hsl(187, 69%, 53%);
    --blue-color: hsl(187, 69%, 53%);
    --white-color: hsl(0, 0%, 100%);


    /* Circular progress bar */
    --circle-size: 13rem;
    --site-insights-circle-size: 7rem;
    --websites-list-circle-size: 5rem;
}

/* General Styles */
.card * {
    color: var(--base-text-color);
}
.is-main-section,
.is-title-bar {
    background-color: var(--background);
}
.gradient {
    background: var(--gradient);
}
.card.gradient {
    border-radius: 25px;
    border: 2px solid rgba(255, 255, 255, 1);
    box-shadow: 24px 24px 48px 0px rgba(199, 203, 215, 1);
}
.green {
    color: var(--green-text-color);
}
.blue {
    color: var(--blue-text-color) !important;
}
.white {
    color: var(--white-color);
}
.white-background {
    background: var(--white-color) !important;
}
.title,
.base-color {
    color: var(--base-text-color);
}
.light-grey {
    color: var(--base-text-color-light);
}
.red {
    color: var(--red-text-color);
}
.button-text-color {
    color: hsl(205, 9%, 39%); 
}
.progress-bar-blue {
    background: var(--progress-bar-blue);
}
.progress-bar-orange {
    background: var(--progress-bar-orange);
}
.progress-bar-pink {
    background: var(--progress-bar-pink);
}
.blue-border-color {
    border-color: var(--blue-border-color) !important;
}
.blue-color {
    color: var(--blue-color) !important;
}
.button.is-primary {
    background-color: var(--blue-border-color);
}
.is-round {
    border-radius: 50%;
}
.icon.round .mdi::before {
    font-weight: 900;
}
.is-borderless {
    border: none !important;
}
.no-background {
    background: transparent !important;
    background-color: transparent !important;

}
.clear-filter svg {
    width: 19px;
    padding-top: 4px;
    margin-left: 2px;
}
.button.is-rounded {
    border-radius: 10px;
}
.select.is-rounded select {
    border-radius: 10px;
    font-weight: 500;
}
.pagination {
    justify-content: end;
    margin-bottom: 0;
    margin-top: 0;
}
.notification.is-info {
    background-color: hsl(187, 69%, 53%);
    color: hsl(0, 0%, 100%);
    border-radius: 8px;
}

/* Per-page selector styling */
.pagination .select.is-borderless {
    border: none;
}
.pagination .select.is-borderless select {
    border: none;
    background: transparent;
    color: var(--base-text-color);
    font-weight: 600;
    padding-right: 2rem;
    cursor: pointer;
}
.pagination .select.is-borderless::after {
    border-color: var(--base-text-color);
    right: 0.5rem;
}
.has-text-weight-extrabold {
    font-weight: 800 !important;
}
/* Websites table */
.table {
    table-layout: auto;
    width: 100%;
}
.table-wrapper {
    overflow-x: auto;
}
.table th, .table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table th a {
    color: hsl(0, 0%, 0%); /* Or any color you prefer */
    text-decoration: none;
}
table th a:hover {
    color: hsl(0, 0%, 50%); /* Slightly lighter or darker for hover effect */
}
#columnToggler {
    position: absolute;
    right: 193px;
    top: 43px;
}
.table .is-actions-cell,
.column-actions {
    position: sticky;
    right: 0;
    background: hsl(0, 0%, 100%);
    width: 1px;
}
.column-actions {
    background-color: hsl(0, 0%, 100%) !important;
}
.runcloud-btn {
    background-color: hsl(0, 0%, 0%);
    width: 31px;
    height: 30px;
    padding: 6px;
}
.wp-btn {
    padding: 2px;
    background-color: aliceblue;
}

/* Adjust alternating row colors for the sticky column */
.table tbody tr:nth-child(odd) .is-actions-cell {
    background-color: hsl(0deg, 0%, 100%);
}
.table tbody tr:nth-child(even) .is-actions-cell {
    background-color: hsl(0deg, 0%, 98%);
}
section.section.is-title-bar ul li {
    padding-right: 5px;
}
nav#navbar-main {
    background-color: hsla(220, 23%, 97%, 1);
}
.input::placeholder {
    color: rgba(136, 139, 148, 1) !important; /* Change to any color you want */
    opacity: 1; /* Ensures full visibility (default in some browsers is lower) */
}
.breadcrumb ul li a {
    padding: 0;
    color: var(--base-color);
    text-transform: uppercase;
}
.breadcrumb ul li span {
    text-transform: uppercase;
}
.breadcrumb ul li:last-child {
    font-weight: 700 !important;
}
.json-field-item {
    padding-left: 30px;
    list-style-type: disc;
}
.submenu {
    display: block;
}

/* Search bar header */
html.has-navbar-fixed-top, body.has-navbar-fixed-top {
    padding-top: 4.25rem;
}
.navbar-container {
    padding-left: 30px;
}
.search-bar-container {
    background-color: hsl(0, 0%, 100%);
    border-radius: 20px;
    margin: 15px 0;
    box-shadow: 10px 10px 10px -6px hsl(225, 16%, 85%);
}
.button.is-small:not(.is-rounded) {
    border-radius: 20px;
}
.powered-by {
    white-space: nowrap;
}

/* Live search modal */
.modal-background {
    background-color: rgba(10, 10, 10, 0.6);
}
.livesearch.box {
    background: hsl(0, 0%, 100%);
    box-shadow: none;
    border-radius: 16px;
    border: none;
    padding: 5px;
}
.modal-card-head {
    border-bottom: 1px solid hsl(0, 0%, 96%);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: hsl(0, 0%, 100%);
}
.modal-card-body {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
#modalClearSearch {
    border: 1px solid hsl(0, 0%, 86%);
    border-radius: 8px;
}
button.delete {
    background-color: hsl(0, 0%, 71%);
}
.search-select {
    border: 1px solid hsl(0, 0%, 86%);
    border-radius: 8px;
    padding: 5px 0 5px 16px;
    background-color: hsl(0, 0%, 99%);
    transition: all 0.2s ease;
}
.search-select:hover {
    border-color: hsl(217, 71%, 53%);
    background-color: hsl(0, 0%, 95%);
}
.search-select a {
    color: hsl(0, 0%, 21%);
}
.modal-card-body .button.is-light {
    background-color: hsl(0, 0%, 100%);
    border: 1px solid hsl(0, 0%, 86%);
    box-shadow: none;
    border-radius: 10px !important;
}
.modal-card-body .button.is-info {
    background-color: hsl(215, 100%, 97%);
    border-color: hsl(217, 71%, 53%);
    box-shadow: none;
    border-radius: 10px !important;
    color: hsl(220, 81%, 45%);
}
.modal-card-body .buttons {
    gap: 0;
}

nav.navbar .navbar-item.has-user-avatar .is-user-avatar {
    margin-right: 0;
    display: inline-flex;
    width: 38px;
    height: 38px;
    margin-left: 10px;
}
.navbar-item img {
    max-height: 38px;
}
.navbar-item.date {
    gap: 0.5rem;
}
.navbar-item.notifications {
    position: relative;
}
.notification-count {
    position: absolute;
    right: 7px;
    top: 13px;
    width: 20px;
    height: 20px;
    background-color: hsl(187, 69%, 53%);
    border: 2px solid hsl(0, 0%, 100%);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notification-count span {
    font-size: 9px;
    font-weight: 600;
    color: hsl(0, 0%, 100%);
}

/* Sidebar Main Menu */
aside.aside,
aside.aside .aside-tools {
    background: hsla(220, 20%, 97%, 1);
}
.menu-list .menu-item, .menu-list a, .menu-list button {
    background-color: hsla(220, 20%, 97%, 1);
}
.menu-list a:hover, .menu-label:hover {
    background-color: hsl(222, 12%, 17%);
    color: hsl(0deg, 0%, 100%);
    cursor: pointer;
}
aside.aside .menu-label {
    font-size: 1em;
    line-height: 1.25;
    padding: 0.6rem 0.75rem;
    margin-bottom: 2px;
}
.menu-label.is-active {
    background-color: hsl(0, 0%, 84%) !important;
    color: hsl(220, 13%, 51%) !important;
    cursor: pointer;
}
.menu-list a {
    padding-left: 10px;
}
.menu-list a.is-active {
    background-color: hsl(0, 0%, 84%);
    color: hsl(219, 11%, 50%);
}
aside.aside .menu-list a:hover,
aside.aside .menu-list .menu-item:hover,
aside.aside .menu-list button:hover {
    background-color: hsl(220, 13%, 18%) !important;
    color: hsl(0, 0%, 100%) !important;
}
aside.aside .menu-list li.is-active > a,
aside.aside .menu-list li.is-active > button,
aside.aside .menu-list li > ul li a.is-active {
    background-color: hsl(220, 13%, 18%) !important;
    color: hsl(0, 0%, 100%) !important;
}
@supports selector(:has(a.is-active)) {
    aside.aside .menu-list li:has(> ul a.is-active) > a,
    aside.aside .menu-list li:has(> ul a.is-active) > button {
        background-color: hsl(220, 13%, 18%) !important;
        color: hsl(0, 0%, 100%) !important;
    }
}
.aside-tools-label {
    color: hsl(0, 0%, 30%);
    font-size: 25px;
}

/* Grid Websites */
.grid-websites {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: row;
    grid-template-areas:
        "one one two two three three four four five five"
        "one one six six six six six six six six"
        "seven seven seven seven seven eight eight nine nine nine"
        "seven seven seven seven seven ten ten ten ten ."
        "seven seven seven seven seven eleven eleven eleven eleven eleven"
        "twelve twelve twelve twelve twelve thirteen thirteen thirteen thirteen thirteen"
        "twelve twelve twelve twelve twelve thirteen thirteen thirteen thirteen thirteen"
        "twelve twelve twelve twelve twelve fourteen fourteen fourteen fourteen ."
        "twelve twelve twelve twelve twelve fourteen fourteen fourteen fourteen ."
        "fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen"
        "fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen"
        "fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen"
        "fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen fifteen";
}

.one {
    grid-area: one;
    position: relative;
}
.two {
    grid-area: two;
}
.three {
    grid-area: three;
}
.four {
    grid-area: four;
}
.five {
    grid-area: five;
}
.six {
    grid-area: six;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.seven {
    grid-area: seven;
}
.eight {
    grid-area: eight;
}
.nine {
    grid-area: nine;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.ten {
    grid-area: ten;
}
.eleven {
    grid-area: eleven;
}
.twelve {
    grid-area: twelve;
}
.thirteen {
    grid-area: thirteen;
}
.fourteen {
    grid-area: fourteen;
}
.fifteen {
    grid-area: fifteen;
}
.seven > .is-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 7px 40px;
    grid-auto-flow: column;
}
.ten .is-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px 40px;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
}
.eleven .is-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 7px 40px;
}
.twelve > .is-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 7px 40px;
    /*grid-auto-flow: column;*/
}
.fourteen > .is-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 7px 40px;
    grid-auto-flow: column;
    place-items: center;
}
.box {
    border-radius: 16px;
    border: 2px solid hsla(0, 0%, 89%, 1);
    background: linear-gradient(94.96deg, rgba(248, 248, 248, 0.7) 6.03%, rgba(232, 234, 240, 0.7) 96%);
    box-shadow: 2px 2px 4px 0px hsla(224, 9%, 77%, 1) inset,
    -2px -2px 4px 0px hsla(0, 0%, 100%, 1) inset;
}
.seven .sub-box:not(:first-child),
.twelve .sub-box:not(:first-child) {
    cursor: pointer;
}
.seven .sub-box:not(:first-child):hover,
.twelve .sub-box:not(:first-child):hover {
    border-radius: 16px;
    border: 2px solid hsla(0, 0%, 89%, 1);
    background: linear-gradient(94.96deg, rgba(248, 248, 248, 0.7) 6.03%, rgba(232, 234, 240, 0.7) 96%);
    box-shadow: 2px 2px 4px 0px hsla(224, 9%, 77%, 1) inset,
    -2px -2px 4px 0px hsla(0, 0%, 100%, 1) inset;
}
.box.blue-border-color .title {
    color: var(--blue-text-color) !important;
}

/* Responsive GRID for mobile */

@media (max-width: 768px) {
    section.section.is-main-section,
    section.section.is-title-bar {
        padding: 0.5rem;
        overflow: hidden;
    }
    .level {
        align-items: flex-start;
    }
    .breadcrumb li {
        display: inline-block !important;
    }
    .level-right {
        display: none;
    }
    .websites-single .section.px-5 {
        padding: 1rem 0.5rem 0 0.5rem !important;
    }
    .grid-websites {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-auto-flow: row;
        grid-template-areas:
                "one"
                "two"
                "three"
                "four"
                "five"
                "six"
                "eight"
                "nine"
                "ten"
                "eleven"
                "seven"
                "twelve"
                "thirteen"
                "fourteen"
                "fifteen";
    }
    .grid-websites > * {
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        margin-bottom: 1rem;
    }
    .six,
    .ten .is-grid,
    .eleven .is-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        grid-auto-flow: row;
    }
    .seven > .is-grid,
    .twelve > .is-grid,
    .fourteen > .is-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: row;
    }
    .eight .ip-content,
    .eight .ip-content * {
        flex-direction: row;
    }
    .fourteen {
        padding: 10px 10px !important;
    }
    .fourteen .switch-container {
        flex-direction: row;
    }
    /* Ensure flex containers stack vertically */
    /* .is-flex {               THIS IS BREAKING SOME ELEMENTS, NEED TO BE MORE SPECIFIC 
        flex-direction: column;
        align-items: flex-start;
    } */
    /* Adjust the buttons container */
    .buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        margin-top: 20px;
        gap: 10px !important;
    }
    .button.is-light {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        margin-bottom: 5px;
    }
    .is-flex.is-align-items-center.top-grid {
        flex-wrap: wrap;
        gap: .5rem;
        flex-direction: row;
    }
    .alerts {
        margin-right: 10px !important;
        display: inline-block;
    }
    .external-link {
        display: inline-block !important;
    }
    button.bookmark.ml-3 {
        position: absolute;
        top: 18px;
        right: 10px;
    }
    .progress-bar-details {
        flex-direction: row;
    }
}

/* Medium Screens (769px to 1280px) */
@media (min-width: 769px) and (max-width: 1648px) {
    .grid-websites {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        grid-auto-flow: row;
        grid-template-areas:
        "one one two two three three"
        "four four five five . ."
        "ten ten ten ten eight eight"
        "seven seven seven seven nine nine"
        "six six six six eleven eleven"
        "twelve twelve twelve twelve thirteen thirteen"
        "fourteen fourteen fourteen fourteen fifteen fifteen";
    }
}

.four,
.five {
    margin-bottom: 1.5rem;
}
/* END Grid Websites */

/* GRID ELEMENTS */
.websites-list-view a {
    color: hsl(205, 9%, 39%);
}
.button.is-light .wp-icon-bg {
    fill: hsl(0, 0%, 100%) !important;
}
.button.is-light .wp-icon-logo {
    fill: hsl(205, 9%, 39%);
}
.button.is-light:hover .wp-icon-logo {
    fill: var(--blue-text-color);
}
.button.is-light:hover span:not(.icon) {
    color: var(--blue-text-color);
}
.button.is-light:hover .tooltip-text {
    color: hsl(0, 0%, 100%) !important;
}
.icon.round {
    width: 30px;
    height: 30px;
    background: linear-gradient(94.96deg, rgba(248, 248, 248, 0.7) 6.03%, rgba(232, 234, 240, 0.7) 96%);
    border-radius: 50%;
    border: 1px solid hsla(0, 0%, 89%, 1);
    box-shadow: 2px 2px 4px 0px hsla(224, 9%, 77%, 1) inset,
    -2px -2px 4px 0px hsla(0, 0%, 100%, 1) inset;
}
.circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: hsl(0, 0%, 96%);
    border: 1px solid hsla(226, 8%, 49%, 1);
    font-size: 16px;
    color: hsl(0, 0%, 20%);
    vertical-align: -5px;
}
/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.tooltip-text {
    visibility: hidden;
    background-color: hsl(0, 0%, 20%);
    color: hsl(0, 0%, 100%);
    text-align: center;
    padding: 6px 8px;
    border-radius: 4px;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: hsl(0, 0%, 20%) transparent transparent transparent;
}
.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
.tooltip i::before {
    margin-left: 2px;
    font-size: 10px;
    vertical-align: 6px;
}
/* END Tooltip */

/* Button Light */
.button.is-light {
    box-shadow: 4px 4px 8px 0 hsla(216, 24%, 34%, 0.09),
    -4px -4px 16px 0 hsla(0, 0%, 100%, 0.25),
    2px 2px 6px 0 hsla(215, 24%, 34%, 0.22) inset,
    -4px -6px 25px 0 hsla(0, 0%, 100%, 1) inset;
    border: 1px solid hsla(0, 0%, 100%, 0.6);
    background: hsla(225, 31%, 95%, 1);
    border-radius: 10px;
    transition: all 0.3s ease;
}
.button.is-light:hover {
    border-color: var(--blue-text-color);
    color: var(--blue-text-color);
}
.button.is-light:hover span,
.button.is-light:hover svg path {
    fill: var(--blue-text-color);
    color: var(--blue-text-color);
}
.button.is-light.active {
    border-color: var(--blue-text-color);
    color: var(--blue-text-color);
}
.button.is-primary:hover,
.button.is-primary.is-hovered,
.button.is-primary:hover span {
    background: linear-gradient(94.96deg, rgba(248, 248, 248, 0.7) 6.03%, rgba(232, 234, 240, 0.7) 96%);
    border-color: var(--blue-text-color);
    color: var(--blue-text-color);
}
.buttons.is-right a:hover svg path,
button:hover svg path {
    fill: var(--blue-text-color);;
}
.button.is-danger:hover {
    background-color: transparent;
    border-color: hsl(348, 86%, 58%);
    color: hsl(348, 86%, 58%);
}
/* END Button Light */

/* Bookmark */
.bookmark:hover > svg path {
    fill: var(--blue-text-color);
}
.bookmark.bookmarked svg path { /* to make it active */
    fill: var(--blue-text-color);
}
/* END Bookmark */

/* Alerts */
.alerts {
    position: relative;
    background-color: hsl(358, 84%, 61%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid hsl(0, 0%, 100%);
    box-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.1);
}
.alerts span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: hsl(0, 0%, 100%);
    font-weight: bold;
    font-size: 10px;
}
/* END Alerts */

/* Circular Progress Bar */
.responsive-circle-container {
    width: var(--circle-size);
    height: var(--circle-size);
    background: rgba(238, 240, 246, 1);
    border-radius: 50%;
    box-shadow: 4px 4px 16px 0px rgba(174, 176, 184, 0.6) inset,
    -2px -2px 8px 0px rgba(255, 255, 255, 1) inset;
}
.responsive-circle-container-inner {
    width: 85%;
    height: 85%;
    background: rgba(245, 248, 255, 1);
    border-radius: 50%;
    box-shadow: 6px 6px 36px 0px rgba(0, 0, 0, 0.06),
    -4px -4px 13px 0px rgba(255, 255, 255, 1);
}
.responsive-circular-progress {
    width: 95%;
    height: 95%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.responsive-circular-progress .responsive-circle-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
}
.green-gradient .responsive-circle-inner {
    background: conic-gradient(
        hsl(137, 70%, 59%) 0%,
        hsl(137, 65%, 38%) calc(var(--progress) * 1%),
        transparent calc(var(--progress) * 1%)
    );
}
.orange-gradient .responsive-circle-inner {
    background: conic-gradient(
        hsl(40, 95%, 59%) 0%,
        hsl(31, 100%, 54%) calc(var(--progress) * 1%),
        transparent calc(var(--progress) * 1%)
    );
}
.orange-gradient .responsive-progress-text {
    color: hsl(31, 100%, 54%);
}
.red-gradient .responsive-circle-inner {
    background: conic-gradient(
        hsl(7, 100%, 65%) 0%,
        hsl(7, 82%, 44%) calc(var(--progress) * 1%),
        transparent calc(var(--progress) * 1%)
    );
}
.red-gradient .responsive-progress-text {
    color: hsl(7, 82%, 44%);
}
.purple-gradient .responsive-circle-inner {
    background: conic-gradient(
        hsl(271, 76%, 65%) 0%,
        hsl(271, 76%, 53%) calc(var(--progress) * 1%),
        transparent calc(var(--progress) * 1%)
    );
}
.purple-gradient .responsive-progress-text {
    color: hsl(271, 76%, 53%);
}
.responsive-circular-progress .responsive-circle-inner::before {
    content: '';
    width: 80%;
    height: 80%;
    background-color: hsl(0deg, 0%, 98%);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.responsive-progress-dr {
    color: var(--base-text-color);
    position: absolute;
    top: 22%;
    font-size: 0.8rem;
}
.responsive-progress-text {
    color: var(--green-text-color);
    position: absolute;
    bottom: 22%;
    font-size: 1.5rem;
}
.responsive-progress-dr {
    font-size: calc(var(--circle-size) / 9);
}
.responsive-progress-text {
    font-size: calc(var(--circle-size) / 4.5);
}
.one .tooltip {
    position: absolute;
    left: calc(var(--circle-size) * 0.9);
    top: calc(var(--circle-size) * 0.95);
}
.one .difference {
    position: absolute;
    left: calc(var(--circle-size) * 1.1);
    top: calc(var(--circle-size) * 0.3);
}
.responsive-circular-progress .responsive-circle-inner {
    transition: background 1s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .responsive-circle-container {
        --circle-size: 40vw;
    }
}

/* END Circular progressbar */

/* Circular progress bar for Site Insights */
.fourteen .responsive-circle-container {
    width: var(--site-insights-circle-size);
    height: var(--site-insights-circle-size);
}
.fourteen .responsive-progress-text {
    position: initial;
    z-index: 1;
}
.fourteen .responsive-progress-text {
    font-size: calc(var(--site-insights-circle-size) / 4.5);
}
.switch-container {
    background-color: rgba(238, 240, 246, 1);
    border-radius: 12px;
    padding: 6px;
    width: 120px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 6px 6px 36px 0px hsla(0, 0%, 0%, 0.06), /* First shadow */ -4px -4px 13px 0px hsla(0, 0%, 100%, 1), /* Second shadow */ 4px 4px 7px 0px hsla(0, 0%, 0%, 0.07); /* Third shadow */
}
.switch-input {
    display: none; /* Hide the actual radio buttons */
}
.switch-label {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 8px 0;
}
.switch-container svg path {
    fill: var(--base-text-color);
}
.switch-label.mob {
    padding: 12px 0 4px 1px;
}
.switch-label.desk {
    padding: 15px 0px 1px 2px;
}
.switch-input:checked + .switch-label img {
    opacity: 1; /* Highlight the selected option */
}
.switch-toggle {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    height: calc(100% - 12px);
    background-color: transparent;
    border-radius: 12px;
    transition: left 0.3s;
    border: 1px solid hsl(0, 0%, 100%);
    box-shadow: 4px 4px 8px 0px rgba(66, 83, 107, 0.09), /* Regular shadow */ -4px -4px 16px 0px rgba(255, 255, 255, 0.25), /* Regular shadow */ 2px 2px 6px 0px rgba(66, 83, 107, 0.22) inset, /* Inset shadow */ -4px -6px 25px 0px rgba(255, 255, 255, 1) inset; /* Inset shadow */
}
#desktop:checked ~ .switch-toggle {
    left: 50%; /* Move the toggle to the second option */
}
/* END Circular progress bar for Site Insights */

/* Multi color progress bar */
.multi-progress-bar-container {
    display: flex;
    width: 100%;
    height: 12px;
    padding: 4px;
    border-radius: 20px;
    overflow: hidden;
    background: hsla(225, 31%, 95%, 1);
    border: 1px solid hsla(0, 0%, 100%, 0.7);
    box-shadow: 4px 4px 8px 0px hsla(216, 24%, 34%, 0.09),
    -4px -4px 16px 0px hsla(0, 0%, 100%, 0.25),
    0px 2px 6px 0px hsla(215, 24%, 34%, 0.22) inset,
    0px -4px 14px 0px hsla(0, 0%, 100%, 1) inset;
}
.progress-bar {
    height: 4px;
    border-radius: 0;
}
.progress-bar-blue {
    border-radius: 20px 0 0 20px;
}
.progress-bar-orange {
    border-radius: 0 20px 20px 0;
}
.progress-bar-details {
    margin-top: 10px;
    gap: 40px;
}
.detail {
    gap: 4px;
}
.dot-label {
    gap: 8px;
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.value {
    margin-left: 18px;
}
/* END Multi color progress bar */

/* IP Box */
.flag img {
    width: 22px;
    height: 16px;
    margin-right: 5px;
    border: 1px solid hsla(0, 0%, 80%, 1);
    border-radius: 4px;
}
/* END IP Box */

/* Top Ranking Keywords Box */
.topkeywords table {
    background-color: transparent;
}
.topkeywords td,
.topkeywords th,
.topkeywords tr {
    border: none !important;
    color: var(--base-text-color);
}
.topkeywords tbody tr:nth-child(even) {
    background-color: hsla(225, 50%, 87%, 0.698);
}
.topkeywords .pagination-info {
    order: 3;
}
.topkeywords .pagination-previous,
.topkeywords .pagination-next {
    background-color: transparent !important;
    border: none !important;
    min-width: 20px;
}
/* END Top Ranking Keywords Box */

/* END GRID ELEMENTS */

/* WEBSITES LIST VIEW */
.seo-websites .section.is-main-section {
    padding-top: 0;
}
#websites-filter-form .input.box.is-rounded {
    margin-bottom: 0;
}
.navbar-websites .input {
    border-radius: 18px;
    width: 277px;
}
#websites-table-container .websites-bottom {
    display: grid;
    grid-template-columns: 100px repeat(6, 1fr);
}
#websites-table-container .responsive-circle-container {
    width: var(--websites-list-circle-size);
    height: var(--websites-list-circle-size);
    background: rgba(238, 240, 246, 1);
    border-radius: 50%;
    box-shadow: 4px 4px 16px 0px rgba(174, 176, 184, 0.6) inset,
    -2px -2px 8px 0px rgba(255, 255, 255, 1) inset;
}
#websites-table-container .responsive-progress-dr {
    font-size: calc(var(--websites-list-circle-size) / 9);
}
#websites-table-container .responsive-progress-text {
    font-size: calc(var(--websites-list-circle-size) / 4.5);
}
#websites-table-container .with-circle .responsive-circle-container {
    margin-top: 0 !important;
}
#websites-table-container .with-circle .icon.circle.tooltip,
#websites-table-container .with-circle .difference {
    display: none !important;
}

@media (min-width: 769px) and (max-width: 1648px) {
    .websites-top.grid {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-template-areas:
                          "first third"
                          "second second";
        gap: 0 0.75rem;
        align-items: start;
    }
    .websites-top.grid > .field:nth-child(1) {
        grid-area: first;
    }
    .websites-top.grid > .field:nth-child(2) {
        grid-area: second;
    }
    .websites-top.grid > .field:nth-child(3) {
        grid-area: third;
        justify-self: end;
    }
    #websites-table-container .websites-bottom {
        grid-template-columns: 100px repeat(3, 1fr);
        gap: 1rem;
    }
    #websites-table-container .websites-bottom > :nth-child(4n+1):not(:first-child) {
        grid-column-start: 2;
    }
}

@media (max-width: 768px) {
    .websites-top {
        display: block;
    }
    .websites-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        grid-gap: 1rem;
    }
    .websites-top > .top-grid {
        grid-column: 1 / -1;
    }
    #websites-table-container .top-grid {
        flex-wrap: nowrap;
    }
    #websites-table-container .websites-bottom {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
    }
    #websites-table-container .websites-bottom > :nth-child(4n+1):not(:first-child) {
        grid-column-start: 1;
    }
    .child-mb-2 > span {
        margin-bottom: 10px !important;
    }
}

/* END WEBSITES LIST VIEW */

/* Command Output Styling */
.command-output {
    font-family: 'Courier New', Monaco, monospace;
    font-size: 13px;
    line-height: 1.4;
    background-color: hsl(210, 17%, 98%);
    border-radius: 8px;
    padding: 15px;
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid hsl(210, 16%, 93%);
}
.output-line {
    display: flex;
    align-items: flex-start;
    padding: 3px 8px;
    margin: 1px 0;
    border-radius: 4px;
    border-left: 3px solid transparent;
}
.output-timestamp {
    color: hsl(208, 7%, 46%);
    font-size: 11px;
    margin-right: 12px;
    min-width: 65px;
    font-weight: 500;
    flex-shrink: 0;
}
.output-message {
    flex: 1;
    word-break: break-word;
}

/* Style based on output type */
.output-info {
    background-color: rgba(13, 110, 253, 0.05);
    border-left-color: hsl(216, 98%, 52%);
    color: hsl(216, 90%, 47%);
}
.output-success {
    background-color: rgba(25, 135, 84, 0.05);
    border-left-color: hsl(152, 69%, 31%);
    color: hsl(152, 69%, 25%);
}
.output-warning {
    background-color: rgba(255, 193, 7, 0.05);
    border-left-color: hsl(45, 100%, 51%);
    color: hsl(45, 95%, 31%);
}
.output-error,
.output-alert {
    background-color: rgba(220, 53, 69, 0.05);
    border-left-color: hsl(354, 70%, 54%);
    color: hsl(354, 61%, 43%);
}
.output-comment {
    background-color: rgba(108, 117, 125, 0.05);
    border-left-color: hsl(208, 7%, 46%);
    color: hsl(210, 9%, 31%);
}
.output-question {
    background-color: rgba(102, 16, 242, 0.05);
    border-left-color: hsl(263, 90%, 51%);
    color: hsl(267, 64%, 37%);
}

/* Default/fallback styles */
.output-line:not([class*="output-"]) {
    background-color: rgba(13, 110, 253, 0.05);
    border-left-color: hsl(216, 98%, 52%);
    color: hsl(216, 90%, 47%);
}

/* Scrollbar styling */
.command-output::-webkit-scrollbar {
    width: 8px;
}
.command-output::-webkit-scrollbar-track {
    background: hsl(0, 0%, 95%);
    border-radius: 4px;
}
.command-output::-webkit-scrollbar-thumb {
    background: hsl(0, 0%, 76%);
    border-radius: 4px;
}
.command-output::-webkit-scrollbar-thumb:hover {
    background: hsl(0, 0%, 66%);
}
/* END Command Output Styling */

/* Websites Filter Bar */
.websites-filter-bar {
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem 1rem 0.75rem;
}
.websites-clickable-card {
    background-color: hsl(0, 0%, 100%);
    background-image: linear-gradient(90deg, rgba(240, 245, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.select:not(.is-multiple):not(.is-loading)::after {
    border-color: hsl(0deg 0.29% 59.95%);
    right: 1.125em;
    z-index: 4;
}
.sorting-buttons .button.is-rounded {
    padding: 7px 20px;
    height: 36px;
}
.sorting-buttons .button:active, .sorting-buttons .button.is-active, .sorting-buttons .button:focus, .sorting-buttons .button.is-focused {
    border-color: var(--blue-border-color);
}

/* Custom Checkbox Styling */
.websites-filter-bar .checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid hsl(216, 12%, 84%);
    border-radius: 4px;
    background-color: hsl(0, 0%, 100%);
    cursor: pointer;
    position: relative;
    margin-right: 8px;
    transition: all 0.2s ease;
    vertical-align: middle;
}
.websites-filter-bar .checkbox input[type="checkbox"]:hover {
    border-color: var(--blue-border-color);
}
.websites-filter-bar .checkbox input[type="checkbox"]:checked {
    background: var(--blue-border-color);
    /* border-color: var(--blue-border-color); */
}
.websites-filter-bar .checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    width: 5px;
    height: 9px;
    border: solid hsl(0, 0%, 100%);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.websites-filter-bar .checkbox {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    user-select: none;
    font-weight: 600;
}
.websites-filter-bar .checkbox .box {
    padding: 0.6rem;
}

/* Utility class for preserving newlines in text content */
.whitespace-pre-line {
    white-space: pre-line;
}

/* Debug Breakpoints in footer */
.debug-breakpoint {
  position: fixed;
  bottom: 5px;
  right: 10px;
  background: #222;
  color: #fff;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  z-index: 9999;
}
@media (max-width: 768px) {
  .debug-breakpoint::after { content: "mobile (<769px)"; }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .debug-breakpoint::after { content: "tablet (769–1023px)"; }
}
@media (min-width: 1024px) and (max-width: 1215px) {
  .debug-breakpoint::after { content: "desktop (1024–1215px)"; }
}
@media (min-width: 1216px) and (max-width: 1407px) {
  .debug-breakpoint::after { content: "widescreen (1216–1407px)"; }
}
@media (min-width: 1408px) {
  .debug-breakpoint::after { content: "fullhd (≥1408px)"; }
}

/* **** MEDIA QUERIES **** */

/* Large Desktop (1216px and up) - Bulma's widescreen breakpoint */
@media (min-width: 1216px) {
    /* Large desktop enhancements go here */
    
}

/* Desktop (1024px to 1215px) - Bulma's desktop breakpoint */
@media (max-width: 1215px) and (min-width: 1024px) {
    /* Desktop overrides go here */
    
}

/* Tablet (769px to 1023px) - Bulma's tablet breakpoint */
@media (max-width: 1023px) and (min-width: 769px) {
    /* Tablet overrides go here */
    
}

/* Mobile (768px and below) - Bulma's mobile breakpoint */
@media (max-width: 768px) {
    /* Mobile overrides go here */
    
}