@tailwind base;
@tailwind components;
@tailwind utilities;

body, html {
    font-family: ui-sans-serif, system-ui, sans-serif, 
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
}

/* FONTS */

@font-face {
    font-family: 'Gotham-Black';
    src: url('../fonts/GOTHAM-BLACK.TTF') format('truetype');
}

@font-face {
    font-family: 'Gotham-Light';
    src: url('../fonts/GOTHAM-LIGHT.TTF') format('truetype');
}

/* END FONTS */

.sage-logo-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent the logo from shrinking */
}

.sage-logo {
    width: 24px; /* Fixed width */
    height: 24px; /* Fixed height to maintain consistency */
    object-fit: contain; /* Ensure proper rendering of the image */
}

@media (max-width: 768px) {
    .sage-logo {
        width: 20px; /* Adjust the size slightly for smaller screens */
        height: 20px;
    }
}

/* MODALS */
/* Modal overlay for dark background */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

/* Modal content styling without height constraints */
.modal-content {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    padding: 20px;
    width: 90%;
    max-width: 1500px;
    position: relative;
    transition: height 0.3s ease-in-out; /* Smooth resize */
}

.modal-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
}

.modal-title {
    font-size: 1.2em;
    font-weight: bold;
    flex-grow: 1;
    color: #333;
}

.close-button {
    background: none;
    border: none;
    cursor: pointer;
}

/* Modal body styling */
.modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

/* Typing cursor styling */
.caret {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Search Bar */

@media (max-width: 468px) {
    .mobile\:searchbar-hide {
        display: none;
    }
}

/* Mobile search bar styling */
@media (max-width: 468px) {
    .mobile\:searchbar-join {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }
    
    .mobile\:searchbar-join .input {
        border-radius: 0.5rem !important;
        border-right: 1px solid rgb(229 231 235) !important;
    }
    
    .mobile\:searchbar-join button {
        border-radius: 0.5rem !important;
        width: 100%;
        padding: 0.75rem 1rem;
    }
}

@media (min-width: 469px) {
    .mobile\:searchbar-join {
        display: inline-flex;
        align-items: stretch;
        border-radius: var(--rounded-btn, 0.5rem /* 8px */);
    }
}

@media (min-width: 1100px) {
    .sm\:searchbar-w-sm {
        width: 400px;
    }
}

@media (min-width: 1300px) {
    .md\:searchbar-w-md {
        width: 500px;
    }
}

@media (min-width: 1500px) {
    .lg\:searchbar-w-lg {
        width: 800px;
    }
}

/* END Search Bar */

@media (min-width: 600px) {
    .sm\:text-xxs {
        font-size: 0.6rem;
    }
}

@media (max-width: 540px) {
    .mobile\:hide {
        display: none;
    }
}

/* Compliance */
@media (max-width: 1615px) {
    .lg\:compliance-score-lg {
        display: none;
    }

    .lg\:compliance-score-text {
        display: inline;
    }

    .compliance-score-add-p {
        padding: 1.5rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .md\:issues-chart {
        height: 24rem;
        width: 35rem;
    }

    .md\:issues-chart-margin {
        margin-top: 1.5rem;
    }
}

@media (min-width: 1615px) {
    .lg\:compliance-score-text-hide {
        display: none;
    }

    .add-margin-due-to-graph {
        margin-left: 2rem;
    }
}

@media (min-width: 1615px) {
    .xl\:reported-value-text-xl {
        font-size: 3rem /* 48px */;
        line-height: 1;
    }
}

@media (max-width: 1615px) {
    .lg\:reported-value-text-lg {
        font-size: 3rem /* 48px */;
        line-height: 1;
    }
}

@media (max-width: 1200px) {
    .md\:reported-value-text-md {
        font-size: 2.5rem /* 24px */;
        line-height: 2.75rem /* 32px */;
    }
}

@media (min-width: 325px) {
    .xs\:compliance-pad {
        padding: 1.25rem;
    }
}

/* TOPBAR MEDIA */

@media (max-width: 850px) {
    .mobile\:hide-javelin-title {
        display: none;
    }
}

@media (max-width: 750px) {
    .mobile\:hide-user-details {
        display: none;
    }

    .mobile\:hide-javelin {
        display: none;
    }
}

/* Tooltips */

.tooltip {
    visibility: hidden;
    position: absolute;
    padding: 0.25rem 0.5rem;
    margin-top: -4rem;
    margin-left: -4rem;
    border-radius: 9999px;
    border-width: 2px;
    border-color: #00A7E9;
    color: #000;
    background-color: #fff;
    white-space: nowrap;
    z-index: 999;
}

.has-tooltip:hover .tooltip {
    visibility: visible;
    z-index: 99999;
}

.tooltip-component {
    position: absolute;
    padding: 0.25rem 0.25rem;
    border-radius: 5px;
    border: 2px solid #00A7E9;
    color: #000;
    background-color: #fff;
    white-space: nowrap;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    text-align: center; /* Center the text horizontally */
}

.tooltip-component-top {
    top: -2rem; /* Adjust this value to position the tooltip above the item */
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-component-bottom {
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-component-left {
    transform: translate(-140%, -20%); /* Center vertically and align horizontally */
}

.tooltip-component-right {
    top: 50%;
    left: -2rem;
    transform: translateY(-50%);
}

.has-tooltip:hover .tooltip-component {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.tooltip-component::before {
    content: "";
    position: absolute;
    top: 100%; /* Position below the tooltip component */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #00A7E9 transparent transparent transparent;
}

.tooltip-component-left::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px; /* Adjust this value to position the triangle correctly */
    transform: translate(75%, -50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #00A7E9; /* Point the triangle to the left */
}

.tooltip-component-bottom::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 100%;
    transform: translateX(-0%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #00A7E9 transparent; /* Adjust border-color to point upwards */
}

.has-tooltip {
    display: inline-block;
    text-align: center; /* Center the tooltip container horizontally */
    z-index: 99999;
}

/* EXTRA TOOLTIP FOR TABLELIST */

.tooltip-tl {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-text-tl {
    visibility: hidden;
    position: absolute;
    background-color: #fff;
    color: #000;
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.tooltip-text-tl::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + 10px); /* Position the arrow correctly */
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #00A7E9; /* Point the arrow to the right */
}

.has-tooltip:hover .tooltip-text-tl {
    visibility: visible;
    opacity: 1;
}

.has-tooltip:hover .tooltip-text-tl {
    display: block;
}

/* END Tooltips */

.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shine 3s infinite;
    z-index: 1;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

.shine-effect img {
    position: relative;
    z-index: 2;
}

.logo {
    height: 9rem;
}

.lg .w-30-rems {
    width: 30rem;
}

.table-fixed {
    table-layout: fixed;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.javelin-text-lg {
    font-family: 'Arial Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.javelin-text-md {
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.javelin-text-dropdown {
    font-family: 'Gotham-Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.javelin-font {
    font-family: 'Gotham-Black', sans-serif;
}

.javelin-font-light {
    font-family: 'Gotham-Light', sans-serif;
}

.javelin-text-light {
    font-family: 'Gotham-Light', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.javelin-text-dropdown-small {
    font-family: 'Gotham-Light', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.z-9999 {
    z-index: 999999;
}

/* Loaders */
.loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 4px solid #00A7E9;
    vertical-align: middle;
    animation: loader 2s infinite ease;
}

.loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #00A7E9;
    animation: loader-inner 2s infinite ease-in;
}

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

    25% {
        transform: rotate(180deg);
    }

    50% {
        transform: rotate(180deg);
    }

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

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

@keyframes loader-inner {
    0% {
        height: 0%;
    }

    25% {
        height: 0%;
    }

    50% {
        height: 100%;
    }

    75% {
        height: 100%;
    }

    100% {
        height: 0%;
    }
}

/* END LOADERS */

/* GRAPHS SECTION */

.grid-cols-9-1200 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}

@media screen and (max-width: 1000px) {
    .graphs-container {
        grid-template-columns: 1fr !important;
    }

    .graph-item-9 {
        grid-column: span 9 !important;
    }

    .graph-item-11 {
        grid-column: span 11 !important;
    }
    
    .hidden-1200 {
        display: none !important;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1500px) {
    .grid-cols-6-1200to1500 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
    
    .spacer-column {
        display: none !important;
    }
    
    .graph-item-5 {
        grid-column: span 5 !important;
    }
}

/* END GRAPHS SECTION */

/* APP SECTION */

.app-container-wrapper {
    position: relative; /* Make the wrapper element the relative positioning context */
}

.app-container {
    display: flex;
    flex-wrap: nowrap; /* Ensure all cards stay on one row */
    overflow-x: auto; /* Enable horizontal scrolling if cards overflow */
    position: fixed; /* Fixed position to stay on top */
    z-index: 9999; /* High z-index to stay above other elements */
    border: 1px solid #e7e7e7;
    background-color: #ffffff;
}

/* Ensure the triangle is correctly positioned relative to its parent container */
.app-container-wrapper .triangle {
    position: absolute;
    top: -11px; /* Adjust based on the size of the triangle */
    left: 0px;
    transform: translateX(-50%); /* Center the triangle horizontally */
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #ccc; /* Border color */
}

/* Style the inner triangle */
.app-container-wrapper .triangle::after {
    content: "";
    position: absolute;
    top: 1px;
    left: -11px;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid white; /* Inner triangle color */
}

.app-text {
    font-family: 'Gotham-Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.app-text-light {
    font-family: 'Gotham-Light', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.app-card {
    flex: 0 0 auto; /* Each card takes up its content width */
    width: 200px; /* Set a fixed width for all cards */
    height: 200px; /* Set a fixed height for all cards */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1rem; /* Add margin between cards */
    background-color: #FFFFFF; /* Set background color */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add box shadow */
    border-radius: 1rem; /* Add border radius */
    z-index: 9999;
}

.app-text-light {
    font-family: 'Gotham-Light', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.app-card {
    flex: 0 0 auto; /* Each card takes up its content width */
    width: 200px; /* Set a fixed width for all cards */
    height: 200px; /* Set a fixed height for all cards */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1rem; /* Add margin between cards */
    background-color: #FFFFFF; /* Set background color */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add box shadow */
    border-radius: 1rem; /* Add border radius */
    z-index: 9999;
}

.dropdown-menu {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 20px;
    z-index: 1000;
    width: 400px;
}

.dropdown-menu ul {
    list-style-type: none;
    border-radius: 20px;
    padding: 0;
    margin: 0;
}

.dropdown-menu ul li {
    padding: 8px 16px;
    border-radius: 20px;
}

.dropdown-menu ul li a {
    text-decoration: none;
    color: black;
    display: block;
    border-radius: 20px;
}

.dropdown-menu ul li:hover {
    background-color: #f1f1f1;
    border-radius: 20px;
}

.dropdown-menu-small {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    width: 100%;
    background-color: white;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
    z-index: 9999;
}

.dropdown-menu-small {
    position: absolute;
    top: 120%; /* Position it right below the button */
    right: 0;
    margin-top: 0.5rem; /* Adjust as needed for spacing */
    background-color: white;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.dropdown-menu-small .triangle {
    position: absolute;
    top: -11px; /* Adjust based on the size of the triangle */
    left: 99px; /* Adjust based on where you want the triangle */
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #ccc; /* Border color */
}

.dropdown-menu-small .triangle::after {
    content: "";
    position: absolute;
    top: 1px;
    left: -11px;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid white; /* Inner triangle color */
}


.dropdown-menu-small ul {
    list-style-type: none;
    border-radius: 10px;
    padding: 0;
    margin: 0;
}

.dropdown-menu-small ul li {
    padding: 2px 4px;
    border-radius: 10px;
}

.dropdown-menu-small ul li a {
    text-decoration: none;
    color: black;
    display: block;
    border-radius: 10px;
}

.dropdown-menu-small ul li:hover {
    background-color: #f1f1f1;
    border-radius: 10px;
}

/* 21/05/2024 PULL FROM ADMIN - OLLY */
/* Last Updated: 21/05/2024 */
/* See: "END OF CSS PULL" to find the end of the pull */

/* CUSTOM JAVELIN THEME */
/* How to use: Add bg-javelin-[--] to any element to apply the Javelin theme.
   Replace [--] with primary, secondary, etc. 
   Example: <button class="bg-javelin-primary">
   Auto-complete will suggest bg-javelin-primary, bg-javelin-secondary, etc.
   This is what the theme does in the tailwind.config.js file.
*/

.bg-javelin-primary { /* ION blue */
    background-color: #00A7E9 !important;
}

.bg-javelin-secondary { /* Hot (Neon) Pink */
    background-color: #ff45e5 !important;
}

.bg-javelin-tertiary { /* Mustard Yellow (Warmth) */
    background-color: #feb019 !important;
}

.bg-javelin-neutral { /* Pure White */
    background-color: #ffffff !important;
}

.bg-javelin-base-100 { /* For background webpage */
    background-color: #fcfcfc !important;
}

.bg-javelin-base-200 {
    background-color: #f7f7f7 !important;
}

.bg-javelin-info { /* Sky Blue (Informative and Eye-catching) */
    background-color: #008ffb !important;
}

.bg-javelin-success { /* Forest Green (Success and Growth) */
    background-color: #00e935 !important;
}

.bg-javelin-achievement { /* USED FOR TEXT (Darker Green works well on white) */
    background-color: #00CA08 !important;
}

.bg-javelin-sage { /* Same green used at Sage */
    background-color: #08D73F !important;
}

.bg-javelin-caution { /* Radioactive Orange (Caution) */
    background-color: #fe7b37 !important;
}

.bg-javelin-warning { /* Light Coral (Grabs attention without being threatening) */
    background-color: #ff4560 !important;
}

.bg-javelin-danger { /* Red (Danger/Error) */
    background-color: #ff0025 !important;
}

.bg-javelin-gray {
    background-color: rgb(55, 65, 81) !important;
}

.border-javelin-primary {
    border-color: #00A7E9 !important;
}

.border-javelin-secondary {
    border-color: #ff45e5 !important;
}

.border-javelin-tertiary {
    border-color: #feb019 !important;
}

.border-javelin-neutral {
    border-color: #ffffff !important;
}

.border-javelin-base-100 {
    border-color: #f8f8f8 !important;
}

.border-javelin-info {
    border-color: #008ffb !important;
}

.border-javelin-success {
    border-color: #00e935 !important;
}

.border-javelin-achievement {
    border-color: #00CA08 !important;
}

.border-javelin-sage {
    border-color: #08D73F !important;
}

.border-javelin-caution {
    border-color: #fe7b37 !important;
}

.border-javelin-warning {
    border-color: #ff4560 !important;
}

.border-javelin-danger {
    border-color: #ff0025 !important;
}

.border-javelin-gray {
    border-color: rgb(55, 65, 81) !important;
}

.text-javelin-primary {
    color: #00A7E9 !important;
}

.text-javelin-primary-dark {
    color: #0082b6 !important;
}

.text-javelin-secondary {
    color: #ff45e5 !important;
}

.text-javelin-secondary-dark {
    color: #ff12de !important;
}

.text-javelin-tertiary {
    color: #feb019 !important;
}

.text-javelin-tertiary-dark {
    color: #e39601 !important;
}

.text-javelin-neutral {
    color: #ffffff !important;
}

.text-javelin-base-100 {
    color: #f8f8f8 !important;
}

.text-javelin-info {
    color: #008ffb !important;
}

.text-javelin-info-dark {
    color: #0072c8 !important;
}

.text-javelin-info-dark:hover {
    color: #0072c8 !important;
}

.text-javelin-success {
    color: #00e935 !important;
}

.text-javelin-success-dark {
    color: #00b629 !important;
}

.text-javelin-achievement {
    color: #00CA08 !important;
}

.text-javelin-achievement-dark {
    color: #009706 !important;
}

.text-javelin-sage {
    color: #08D73F !important;
}

.text-javelin-sage:hover {
    color: #08D73F !important;
}

/* I hope we dont need this in dark */

.text-javelin-caution {
    color: #fe7b37 !important;
}

.text-javelin-caution-dark {
    color: #fe5904 !important;
}

.text-javelin-warning {
    color: #ff4560 !important;
}

.text-javelin-warning-dark {
    color: #ff1234 !important;
}

.text-javelin-danger {
    color: #ff0025 !important;
}

.text-javelin-danger-dark {
    color: #cc001e !important;
}

.text-javelin-gray {
    color: #828282 !important;
}

.text-javelin-gray-dark {
    color: #686868 !important;
}

/* END CUSTOM JAVELIN THEME */

/* Javelin Buttons */

.btn-jav {
    background-color: #ffffff; /* jav-danger */
    border-color: rgb(55, 65, 81); /* text-gray-700 */
    border-radius: 0.5rem;
    height: 3.5rem;
    min-height: 2rem;
    width: 12rem;
    min-width: 8rem;
    color: #ffffff;
    font-weight: bold;
}

.btn-jav-report {
    background-color: #ff0025; /* jav-danger */
    border-color: rgb(55, 65, 81); /* text-gray-700 */
    border-radius: 0.5rem;
    height: 4rem;
    min-height: 3rem;
    width: 8rem;
    min-width: 8rem;
    color: #ffffff;
    font-weight: bold;
}

.btn-jav-fa {
    background-color: #008ffb; /* jav-info */
    border-color: rgb(55, 65, 81); /* text-gray-700 */
    border-radius: 0.5rem;
    height: 4rem;
    min-height: 3rem;
    width: 8rem;
    min-width: 8rem;
    color: #ffffff;
    font-weight: bold;
}

.btn-jav-ignore {
    background-color: #fe7b37; /* jav-caution */
    border-color: rgb(55, 65, 81); /* text-gray-700 */
    border-radius: 0.5rem;
    height: 4rem;
    min-height: 3rem;
    width: 8rem;
    min-width: 8rem;
    color: #ffffff;
    font-weight: bold;
}

.btn-jav-save {
    background-color: #00e935; /* jav-success */
    border-color: rgb(55, 65, 81); /* text-gray-700 */
    border-radius: 0.5rem;
    height: 4rem;
    min-height: 3rem;
    width: 8rem;
    min-width: 8rem;
    color: #ffffff;
    font-weight: bold;
}

/* END Javelin Buttons */

/* Javelin Reason Spans */
/* FOR USE IN DISPLAYING COMPLIANCE REASON */

.base-tag-class {
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: rgb(55, 65, 81);
    background-color: rgb(229, 231, 235);
    border-color: rgb(55, 65, 81);
    border-width: 1px;
    border-radius: 9999px;
}

.custom-tag-class {
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    border-width: 1px;
    border-radius: 9999px;
}

.primary-tag {
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: #00A7E9;
    background-color: #E6F7FF;
    border-color: #00A7E9;
    border-width: 1px;
    border-radius: 9999px;
}

.secondary-tag {
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: #ff45e5;
    background-color: #FCE4EC;
    border-color: #ff45e5;
    border-width: 1px;
    border-radius: 9999px;
}

.tertiary-tag {
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: #feb019;
    background-color: #FFF3E0;
    border-color: #feb019;
    border-width: 1px;
    border-radius: 9999px;
}

.info-tag {
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: #008ffb;
    background-color: #E6F7FF;
    border-color: #008ffb;
    border-width: 1px;
    border-radius: 9999px;
}

.success-tag {
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: #00e935;
    background-color: #E6F7FF;
    border-color: #00e935;
    border-width: 1px;
    border-radius: 9999px;
}

.danger-tag {
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: #ff0025;
    background-color: #FFEBEE;
    border-color: #ff0025;
    border-width: 1px;
    border-radius: 9999px;
}

.warning-tag {
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: #ff4560;
    background-color: #FFEBEE;
    border-color: #ff4560;
    border-width: 1px;
    border-radius: 9999px;
}

.reason-none {
    content: "None";
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    /* Gray colours */
    color: rgb(55, 65, 81);
    background-color: rgb(229, 231, 235);
    border-color: rgb(55, 65, 81);
    border-width: 1px;
    border-radius: 9999px;
}

.reason-bad-description {
    content: "Bad Description";
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: rgb(220 38 38);
    background-color: rgb(254 226 226);
    border-color: rgb(220 38 38);
    border-width: 1px;
    border-radius: 9999px;
}

.reason-no-description {
    content: "No Description";
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: rgb(37 99 235);
    background-color: rgb(219 234 254);
    border-color: rgb(37 99 235);
    border-width: 1px;
    border-radius: 9999px;
}

.reason-incorrect-value {
    content: "Incorrect Value";
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: rgb(22 163 74);
    background-color: rgb(220 252 231);
    border-color: rgb(22 163 74);
    border-width: 1px;
    border-radius: 9999px;
}

.reason-wrong-category {
    content: "Wrong Category";
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: rgb(202 138 4);
    background-color: rgb(254 249 195);
    border-color: rgb(202 138 4);
    border-width: 1px;
    border-radius: 9999px;
}

.state-open {
    content: "Open";
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
}

.circle {
    display: inline-flex;
    align-items: center;
    border-radius: 100%;
    background-color: rgb(48, 203, 13);
    margin-right: 50px;
    width: 1rem;
    height: 1rem;
}

.state-in-review {
    content: "In Review";
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: rgb(239, 125, 12);
    background-color: rgb(254, 226, 226);
    border-color: rgb(239, 125, 12);
    border-width: 1px;
    border-radius: 9999px;
}

.state-resolved {
    content: "Resolved";
    display: inline-block;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: rgb(203, 13, 200);
    background-color: rgb(246, 202, 246);
    border-color: rgb(203, 13, 200);
    border-width: 1px;
    border-radius: 9999px;
}

@media (max-width: 640px) {
    .tags-container {
        flex-direction: column !important;
        align-items: center;
    }
    .tags-container .Tag {
        margin-bottom: 10px;
    }
    .sm\:p-1 {
        padding: 0.25rem !important;
    }
    .sm\:text-center {
        text-align: center !important;
    }
}

/* PAGINATION */

.pagination {
    display: inline-flex;
    align-items: center;
    /*background-color: #f7f7f7;*/
    background-color: #ffffff;
    border-radius: 9999px;
}

.pagination .active button {
    background-color: #00a7e9;
    color: #ffffff;
    border-color: #0094cd;
}

.pagination-value {
    padding: 0.75rem 0.75rem;
    border-radius: 9999px;
    line-height: 1.25px;
}

.pagination-value:hover {
    /*background-color: #ffffff;*/
    background-color: #00A7E9;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* END PAGINATION */

/* Cards */


.stat-card {
    
    border-radius: 0.5rem;
    background-color: #ffffff;
    /*padding: 1.25rem 1rem;*/
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1);
    z-index: 1;

}

/*@media (max-width: 768px) {*/
/*    .tooltip {*/
/*        left: 0;*/
/*        transform: translateX(0) translateY(0);*/
/*    }*/

/*    .tooltip::after {*/
/*        left: 10px;*/
/*        margin-left: 0;*/
/*    }*/
/*}*/

@media (max-width: 768px) {
    .tooltip {
        width: 200px;
    }
}

/* END Cards */

/* Toasts */

.toast {
    position: fixed;
    /* top: 1rem; */
    bottom: 1rem;
    right: 1rem;
    z-index: 9999; /* Above the toast */
    width: 400px;
    overflow: hidden;
    max-width: 20rem;
    padding: 1.25rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    opacity: 90%;
}

.toast-container {
    position: fixed;
    top: 1rem;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999; /* Above the toast */
    width: 300px;
}

/* END Toasts */

.btn {
    display: inline-block;
    font-weight: 500;
    background-color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary {
    display: inline-block;
    font-weight: 500;
    background-color: #00A7E9;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* END OF CSS PULL */

.graph-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    font-family: 'Gotham-Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

h1:focus {
    outline: none;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

.customer-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.5);
}

.custome-loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

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

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