@plugin "daisyui/theme" {
    name: "fantasy";
    default: true;
    prefersdark: false;
    color-scheme: "light";
    --color-base-100: oklch(100% 0 0);
    --color-base-200: oklch(93% 0 0);
    --color-base-300: oklch(86% 0 0);
    --color-base-content: oklch(27.807% 0.029 256.847);
    --color-primary: #0079a5;
    --color-primary-content: oklch(98% 0.003 247.858);
    --color-secondary: #9b4b87;
    --color-secondary-content: oklch(98% 0.003 247.858);
    --color-accent: #fa6423;
    --color-accent-content: oklch(98% 0.003 247.858);
    --color-neutral: #00aae5;
    --color-neutral-content: oklch(98% 0.003 247.858);
    --color-info: #80d4f2;
    --color-info-content: oklch(12% 0.042 264.695);
    --color-success: #427d37;
    --color-success-content: oklch(97% 0.021 166.113);
    --color-warning: #ff9632;
    --color-warning-content: oklch(98% 0.003 247.858);
    --color-error: #cd3042;
    --color-error-content: oklch(97% 0.013 17.38);
    --radius-selector: 0.5rem;
    --radius-field: 0.5rem;
    --radius-box: 0.5rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
    --badge-fg: #FFF;
}

@plugin "daisyui" {
    themes: fantasy --default, abyss --prefersdark, cupcake, dracula;
}

:root {
    --sps-red: #cd3042;
    --sps-green: #427d37;
    --sps-blue: #03AAE5;
    --sps-dark: #1F282C;
    --sps-accent-orange: #FA6423;
    --sps-accent-yellow: #FF9632;
    --sps-accent-plum: #9B4B87;
    --sps-accent-grape: #4B2346;
    --sps-accent-emerald: #377D6E;
    --sps-accent-mint: #62C5AB;
    --sps-accent-blue-deep: #0079A5;
    --sps-accent-blue-light: #80D4F2;
    --sps-accent-blue-pale: #D9F2FB;
    --sps-accent-gray-medium: #606A6E;
    --sps-accent-gray-light: #B0B6B8;
    --sps-accent-gray-pale: #F6F6F6;

}

.text-sps-red {
    color: var(--sps-red) !important;
}

.text-sps-green {
    color: var(--sps-green) !important;
}

.text-sps-yellow {
    color: var(--sps-accent-yellow) !important;
}

.bg-sps-red {
    background-color: var(--sps-red) !important;
}

.bg-sps-green {
    background-color: var(--sps-green) !important;
}

.bg-sps {
    background-color: var(--sps-blue) !important;
}

.bg-sps-dark {
    background-color: var(--sps-dark) !important;
}

.bg-sps-accent-orange {
    background-color: var(--sps-accent-orange) !important;
}

.bg-sps-accent-yellow {
    background-color: var(--sps-accent-yellow) !important;
}

.bg-sps-accent-plum {
    background-color: var(--sps-accent-plum) !important;
}

.bg-sps-accent-grape {
    background-color: var(--sps-accent-grape) !important;
}

.bg-sps-accent-emerald {
    background-color: var(--sps-accent-emerald) !important;
}

.bg-sps-accent-mint {
    background-color: var(--sps-accent-mint) !important;
}

.bg-sps-accent-blue-deep {
    background-color: var(--sps-accent-blue-deep) !important;
}

.bg-sps-accent-blue-light {
    background-color: var(--sps-accent-blue-light) !important;
}

.bg-sps-accent-blue-pale {
    background-color: var(--sps-accent-blue-pale) !important;
}

.bg-sps-accent-gray-medium {
    background-color: var(--sps-accent-gray-medium) !important;
}

.bg-sps-accent-gray-light {
    background-color: var(--sps-accent-gray-light) !important;
}

.bg-sps-accent-gray-pale {
    background-color: var(--sps-accent-gray-pale) !important;
}

.text-sps-accent-orange {
    color: var(--sps-accent-orange) !important;
}

.text-sps-accent-yellow {
    color: var(--sps-accent-yellow) !important;
}

.text-sps-accent-plum {
    color: var(--sps-accent-plum) !important;
}

.text-sps-accent-grape {
    color: var(--sps-accent-grape) !important;
}

.text-sps-accent-emerald {
    color: var(--sps-accent-emerald) !important;
}

.text-sps-accent-mint {
    color: var(--sps-accent-mint) !important;
}

.text-sps-accent-blue-deep {
    color: var(--sps-accent-blue-deep) !important;
}

.text-sps-accent-blue-light {
    color: var(--sps-accent-blue-light) !important;
}

.text-sps-accent-blue-pale {
    color: var(--sps-accent-blue-pale) !important;
}

html, body {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
}

h1, h2, h3 {
    font-family: 'Cabin', sans-serif;
    font-weight: 700;
}

pre, code, pre.code {
    font-family: 'Ubuntu Mono', monospace;
}

pre.code{
    line-height: 1.0;
    padding: 0px;
    overflow: auto;
}

.htmx-indicator{
    opacity:0;
    transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator{
    opacity:1;
}
.htmx-request.htmx-indicator{
    opacity:1;
}

/*.htmx-indicator {*/
/*    width: 48px;*/
/*    height: 48px;*/
/*    border: 3px dotted #FFF;*/
/*    border-style: solid solid dotted dotted;*/
/*    border-radius: 50%;*/
/*    display: inline-block;*/
/*    position: relative;*/
/*    box-sizing: border-box;*/
/*    animation: rotation 2s linear infinite;*/
/*    margin-bottom: 5px;*/
/*    transition: opacity 500ms ease-in;*/
/*    opacity: 0;*/
/*}*/

/*.htmx-indicator::after {*/
/*    content: '';*/
/*    box-sizing: border-box;*/
/*    position: absolute;*/
/*    left: 0;*/
/*    right: 0;*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    margin: auto;*/
/*    border: 3px dotted #00AAE5;*/
/*    border-style: solid solid dotted;*/
/*    width: 24px;*/
/*    height: 24px;*/
/*    border-radius: 50%;*/
/*    animation: rotationBack 1s linear infinite;*/
/*    transform-origin: center center;*/

/*}*/

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

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

img.invert {
    filter: invert(1);
}

.badge{
    font-size: 75%;
    width: fit-content;
    padding: 3px;
    padding: 3px 15px;
    border-radius: 20px;
    text-transform: uppercase;
    background-color: rgba(255, 255, 255, 0.1);
    margin-right: 5px;
    display: inline-block;
}

.container-fluid{
    display: flex;
}

h1.title{
    font-size: 36px;
}

h2.title{
    font-size: 24px;
}

.highlight {
    background-color: rgb(229 231 235 / 1);
    color: #0079A5 !important;
    border-left: 5px solid #03AAE5;
    font-weight: 500;
    z-index: 5;
    box-shadow: 0 2px calc(var(--depth)* 3px) -2px rgba(0, 0, 0, 0.2);
    outline: 2px solid #0000;
    color: #0079A5;
    outline-offset: 2px;
    border-radius: 4px;
    transition: 0.5s;
    
    a span {
        color: #0079A5 !important;
    }
}

.border-top-sps{
    border-top: 5px solid #03AAE5;
}

.border-bottom-sps{
    border-top: 5px solid #03AAE5;
}

.text-sps {
    color: #03AAE5;
}

.table-title {
    text-align: left;
    margin-left: -2px;
    border: 0px solid white;
    border-left: 0px solid white!important;
    border-right: 0px solid white!important;
    border-top: 0px solid white!important;
    border-bottom: 5px solid #03AAE5!important;
    box-shadow: 0 1px 0 0 slategray;
    color: var(--sps-dark);
}

.singlePixelRow{
    height: 3px!important;
    line-height: 1px;
    padding:0;
    background-color: slategray
}

.subtitle{
    margin-top: -5px;
    margin-bottom: 10px;
}

thead:has(.table-title) {
    border-top: 0px solid white!important;
}

.text-left{
    text-align: left;
}

.text-right{
    text-align: right;
}

h1.detail-title{
    border-bottom: 1px solid slategray;
    /* background-color: rgb(229 231 235 / 1); */
    padding: 2px;
    padding-left: 0px;
    margin-top: 43px;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 42px;
}

.condensed-title{
    font-family: "Cabin Condensed", "Cabin", sans-serif;
}

.navigation.bg{
    background: linear-gradient(to bottom, #03AAE5, #03AAE5 5px, white 5px, white);
    box-shadow: 0 0 10px rgba(173, 216, 230, 0.7),  /* Bluish-white glow */    0 0 20px rgba(173, 216, 230, 0.5),  /* Larger bluish shadow */    0 5px 10px rgba(0, 0, 0, 0.3)
}

.navigation{
    z-index: 8;
}

.draggable{
    position: absolute;
    /*cursor: move;*/
}

.sticky-collapsed{
    background: linear-gradient(to bottom, #03AAE5, #03AAE5 5px, white 5px, white);
    height: 50px;
}

.animated-element {
    transition: all 1.0s ease-in-out;
}

.bread-bar{
    min-height: 45px;
    margin-left: -28px;
    padding-left: 31px;
    z-index: 5;
}

#draggable-div .badge{
    float: right;
    min-width: 34px;
    text-align: center;
    font-weight: 800;
    /*top: 376px;*/
    padding-top: 1px;
}

#draggable-div ul li a{
    padding-right: 0px;
}

button i.fa-plus-circle{
    color:  #427d37!important;
}

.mt--100{
    margin-bottom: -100%;
}

.clickable-row {
    cursor: pointer;
}


li.row-submenu i{
    margin-right: 5px;
}

.toolbar {
    display: flex;
    gap: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
    background-color: #F2F2F2; color: #2C2C2D;
}

td:has(div.toolbar) + td {
    background-color: #F2F2F2; color: #5c5c5e;
    pointer-events: none;
}

.toolbar-button {
    margin-left: 5px;
    margin-top: 2px;
    color: rgb(75 85 99);
}

.toolbar-cell{
    background-color: #F2F2F2!important; color: #2C2C2D;
}

.editable{
    position: relative;
    cursor: text;
}

.editable:has(.toolbar){
    margin: 0px;
    padding: 0px;
}



.cell-select{
    padding-left: 11px;
    height:24px;
    background: transparent;
}

.editable:has(.toolbar) + td.row-menu{
    background-color: #F2F2F2;
}

.editable:has(select) {
    padding-bottom: 3px;
}

.editable::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-right: 8px solid transparent;
    border-top: 8px solid orange;
    display: none;

}

.editable:hover::after {
    display: block;
}

.editable-complex::after {
    border-top: 8px solid #03a9e3;
}

.cell-editor{
    padding: 4px;
    border: 1px solid var(--sps-blue);
    font-family: 'Ubuntu Mono', monospace;
    line-height: normal;
    spellcheck: false;
    -webkit-grammar-check: false;
    -webkit-spellcheck: false;
    -moz-grammar-check: false;
    -moz-spellcheck: false;
}

.editable select{
    background: transparent;
    position: relative;
    border-radius: 0px;
}

tr.editable{
    background: rgba(55, 255, 17, 0.1);
}

td.editable.modified, td.editable.modified + td.row-menu {
    background: rgba(55, 255, 17, 0.1);
}

td.editable.error, td.editable.error + td.row-menu {
    background: rgba(255, 55, 17, 0.1);
}

#notification{
    border-top: 5px solid var(--sps-red);
    align-items: self-start;
    box-shadow: 0 0 16px 4px rgba(255, 0, 0, 0.5);
}

@keyframes backgroundFade {
    0% {
        background-color: #AEBCD1FF; /* Light gray */
    }
    50% {
        background-color: white;
    }
    100% {
        background-color: #AEBCD1FF; /* Light gray */
    }
}

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

#app-menu{
    z-index: 0;
}

.deleted, .deleted + td.row-menu{
    text-decoration: line-through;
    color: #606A6E;
    background-color: #f3f4f6; /* Light gray background */
    pointer-events: none;
}

.missing-value, .missing-value + td.row-menu{
    background-color: rgba(255, 255, 118, 0.3); /* Light gray background */

    input{
        background-color: transparent;
    }
}

.missing-value-red, .missing-value-red + td.row-menu {
    background-color: rgba(255, 0, 0, 0.3); /* Light red background */

    input {
        background-color: transparent;
    }
}

.invisible-input{
    outline: none;
    border: 0px solid transparent;
    min-height: 30px;
}

.invisible-input:focus, .invisible-input:active, .invisible-input:hover{
    outline: none;
    border: 0px solid transparent;
}

#draggable-div {
    position: fixed; /* Change to fixed to keep it in the viewport */
    transition: none;
}

.sticky-collapsed {
    background: linear-gradient(to bottom, #03AAE5, #03AAE5 5px, white 5px, white);
    height: 60px;
}

.badge-blue { background-color: #3b82f6; }
.badge-green { background-color: #10b981; }
.badge-red { background-color: #ef4444; }
.badge-yellow { background-color: #f59e0b; }
.badge-purple { background-color: #8b5cf6; }

.icon-yellow{
    color: #f59e0b;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* Adjust the width as needed */
}

.new-sub-container{
    paddding: 1rem;
}

.td-limit{
    max-width: 537px;
}

.no-padding{
    padding: 0px!important;
}

button.disable, button.disable i {
    pointer-events: none;
    background: lightgray;
    opacity: 0.8;
    color: gray!important;
}

 .choices, .choices__inner, .choices__list .choices__list--single, .choices__list--single{
     max-height: 20px;
     height: 20px;
     width: 100%;
     padding: 0px;
     margin: 0px;
     border: 0px solid transparent;
     border-radius: 0px;
     background: transparent;
 }

.choices__input .choices__input--cloned{
    margin-top: 5px;
}

.buttons-cell{
    border-left: 0px solid transparent!important;
}

.choices__heading {
    color: black;
}

th[aria-sort="ascending"]::after {
    content: " \2191"; /* Unicode for up arrow */
    margin-left: 5px;
}

th[aria-sort="descending"]::after {
    content: " \2193"; /* Unicode for down arrow */
    margin-left: 5px;
}

#table-extras-data tr td:first-child[title]:not([title=""])::after {
    content: "\2139"; /* Unicode for info icon */
    margin-left: 10px; /* Space between text and icon */
    opacity: 0.5; /* Initial opacity */
    font-size: 0.8em; /* Adjust size as needed */
}

/* Change opacity on hover */
#table-extras-data tr td:first-child[title]:not([title=""]):hover::after {
    opacity: 1.0; /* Opacity on hover */
}

.accepted-status {
    background-color: #b0ebbe !important; /* Slightly more saturated green */
    color: rgba(0, 0, 0, 0.7) !important;
    text-transform: capitalize !important;
}

.pending-status {
    background-color: #e6c8aa !important; /* Slightly more saturated brown */
    color: rgba(0, 0, 0, 0.7) !important;
    text-transform: capitalize !important;
}

.blocked-status {
    background-color: #e6acac !important; /* Black remains the same */
    color: rgba(0, 0, 0, 0.7) !important;
    text-transform: capitalize !important;
}

.rejected-status {
    background-color: #d1ace6 !important; /* Slightly more saturated dark red */
    color: rgba(0, 0, 0, 0.7) !important;
    text-transform: capitalize !important;
}

.disabled-status {
    background-color: #cfdee6 !important; /* Slightly more saturated gray */
    color: rgba(0, 0, 0, 0.7) !important;
    text-transform: capitalize !important;
}

.role-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.role-admin {
    background-color: red;
}

td:has(span.role-admin) {
    color: #390101;
    font-weight: 800;
}

.role-writer {
    background-color: orange;
}
.role-reader {
    background-color: green;
}

.role-super-admin {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: purple;
    margin-right: 5px;
    border-radius: 0%;
}

td:has(span.role-super-admin) {
    color: #320032;
    font-weight: 800;
}

.role-super-reader {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: lightpink;
    margin-right: 5px;
    border-radius: 0%;
}

.role-country-admin {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #416a6a;
    margin-right: 5px;
    border-radius: 0%;
}

.role-country-reader {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid lightblue;
    margin-right: 5px;
    border-radius: 0%;
}

.role-projectadmin {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #97bd0e;
    margin-right: 5px;
    border-radius: 0%;
}

#modal-confirmation.danger {
    #modal-confirmation-top-border{
        border-top: 5px solid var(--sps-red);
    }

    #modal-icon i{
        fill: var(--sps-red);
        color: var(--sps-red);
    }

    #modal-ok{
        background-color: var(--sps-red);
    }
}

#modal-confirmation.warning {
    #modal-confirmation-top-border{
        border-top: 5px solid var(--sps-accent-yellow);
    }

    #modal-icon i{
        fill: var(--sps-accent-yellow);
        color: var(--sps-accent-yellow);
    }

    #modal-ok{
        background-color: var(--sps-accent-yellow);
    }
}

#modal-confirmation.info {
    #modal-confirmation-top-border{
        border-top: 5px solid var(--sps-accent-blue-deep);
    }

    #modal-icon i{
        fill: var(--sps-accent-blue-deep);
        color: var(--sps-accent-blue-deep);
    }

    #modal-ok{
        background-color: var(--sps-accent-blue-deep);
    }
}

#modal-title{
    font-size: 18px;
    margin-top: 8px;
    font-weight: 700;
}

.fa-sub {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 0.75em;
    transform: translate(80%, 50%);
    text-shadow: -2px -2px 1px rgba(255, 255, 255, 1);
    box-shadow: 0 0 2px 3px white;
}
.icon-container {
    position: relative;
    display: inline-block;
    margin-right: 0.5rem;
    min-width: 20px;
}

.icon-container .fa-sub:nth-of-type(3) {
    transform: translate(200%, 50%);
}

tr.searchable:target{
    background: rgba(255, 255, 0, 0.6)!important;
}

.modal-large{
    #modal-confirmation-top-border{
        max-width: 40%;
        min-width: 40%;
    }
}

input[type="text"].sps-input-text, input[type="text"].rounded-md, textarea.rounded-md, select.select, input[type="checkbox"]{
    box-shadow: inset 0 .25rem 0 -.0625rem #e9e9ea;
}

.sps-input-shadow{
    box-shadow: inset 0 .25rem 0 -.0625rem #e9e9ea;
}

.row-deactivated{
    background-color: rgba(255, 0, 83, 0.1)!important;
}

.row-solved{
    background-color: rgba(55, 255, 17, 0.1) !important;
}

.top-navigation{
    position: sticky;
    top: 293px;
    background: #f0f8ff;
}

input:where(:not([type=button],[type=reset],[type=submit])), select, textarea {
    border-width: 0px;
}

#nav-alt{
    .badge {
        display: inline;
        padding: 0px 7px;
        margin-bottom: 0px;
        display: flex;
        margin-left: 5px;
        vertical-align: super;
        float: right;
        margin-right: -31px;
        background-color: white;
        margin-bottom: 10px;
    }

    .fas{
        scale: 0.9;
    }
}

#modal-ok, #modal-cancel{
    box-shadow: 0 2px calc(var(--depth)* 3px) -2px var(--color-neutral);
    outline: 2px solid #0000;
    outline-offset: 2px;
}

@keyframes appear {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.appear {
    animation: appear 0.5s forwards;
}

@keyframes disappear {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

.disappear {
    animation: disappear 0.2s forwards;
}

@keyframes flashYellow {
    0% {
        background-color: inherit; /* Start with the current background color */
    }
    50% {
        background-color: yellow; /* Change to yellow */
    }
    100% {
        background-color: inherit; /* Change back to the original color */
    }
}


.transition{
    animation: flashYellow 0.5s ease-in-out;
}

.limited-cell-3 {
    max-width: 400px; /* Adjust the width as needed */
    overflow: hidden;
    text-overflow: ellipsis;

    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    white-space: normal;
}

.badge.bg-sps-accent-blue-deep{
    color: #FFF;
}

.text-white{
    color: #FFF!important;
}

.bg-opacity-75{
    opacity: 0.75;
}

.hidden{
    opacity: 0;
}

ul[role="tabs"]{
    border-bottom: 1px solid #0079a5;

    li.tab{
        border: 1px solid #0079a5;
        border-bottom: 0px;
        color: black;
    }
}

#config-wizard{
    input{
        background-color: white;
    }

    .fa-file-circle-question{
        color: rgba(0,0,0,0.8);
    }
}

span.badge.bg-sps-accent-blue-deep.rounded-md{
    font-weight: 800;
    padding-top: 2px;
}

#app-menu{
    h3{
        padding-left: 0px;
    }
}