:root {
    --color-primary: 0, 217, 255; /* #00D9FF */
    --color-primary-dark: 0, 186, 211; /* #00BAD3 */
}

#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: 3.5rem;
    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."
}

/* -------------------- START -------------------- */

body {
    font-family: 'Raleway', sans-serif !important;
}

.text-2xs { font-size: 0.625rem !important; }/* 10px */
.text-xs { font-size: 0.75rem !important; } /* 12px */
.text-sm { font-size: 0.875rem !important; } /* 14px */
.text-base { font-size: 1rem !important; } /* 16px */
.text-lg { font-size: 1.125rem !important; } /* 18px */
.text-xl { font-size: 1.25rem !important; } /* 20px */
.text-2xl { font-size: 1.5rem !important; } /* 24px */
.text-3xl { font-size: 1.875rem !important; } /* 30px */
.text-4xl { font-size: 2.25rem !important; } /* 36px */
.text-5xl { font-size: 3rem !important; } /* 48px */
.text-6xl { font-size: 3.75rem !important; } /* 60px */
.text-7xl { font-size: 4.5rem !important; } /* 72px */
.text-8xl { font-size: 6rem !important; } /* 96px */
.text-9xl { font-size: 8rem !important; } /* 128px */

.opacity-10 {
    opacity: 0.1 !important;
}

.clip-rect {
    clip: rect(0px, 60px, auto, 0px); /* ili što ti treba */
}

.blur-4 {
    filter: blur(4px);
}

.blur-5 {
    filter: blur(5px);
}

/* ------------------------- WIDTH ------------------------- */

.w-40px {
    width: 40px !important;
}

.w-60px {
    width: 60px !important;
}

.w-110px {
    width: 110px !important;
}

/* ---------------------- END - WIDTH ---------------------- */


/* ------------------------- HEIGHT ------------------------- */

.h-38px {
    height: 38px !important;
}

.h-55px {
    height: 55px !important;
}

.h-150px {
    height: 150px !important;
}

.h-200px {
    height: 200px !important;
}

/* ---------------------- END - HEIGHT ---------------------- */


.btn_primary_10 {
    background: rgba(var(--color-primary-dark),.1) !important;
    color: rgba(var(--color-primary-dark), 1) !important;
    backdrop-filter: blur(3px);
}

.btn_primary_10:hover {
    background: rgba(var(--color-primary-dark),.3) !important;
    color: #02899c !important;
}


/* -------------------- BACKGROUND COLOR -------------------- */

.bg-glass-blur-4 {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); /* Safari */
    background-color: rgba(18, 20, 29, 0.5); /* Prozirna tamna nijansa */
}

.bg_body_silver {
    background-color: #e9ecef !important;
}

.bg_primary_dark {
    background: rgba(var(--color-primary-dark),1) !important;
}

/* ----------------- END - BACKGROUND COLOR ----------------- */
/* -------------------------- MONTH -------------------------- */
.january {
    color: rgb(51, 136, 201);
}

.january:before {
    background-color: rgba(51, 136, 201, .2)
}

.february {
    color: rgb(65, 174, 234)
}

.february:before {
    background-color: rgba(65, 174, 234, .2)
}

.march {
    color: rgb(48, 156, 112)
}

.march:before {
    background-color: rgba(48, 156, 112, .2)
}

.april {
    color: rgb(139, 189, 83)
}

.april:before {
    background-color: rgba(139, 189, 83, .2)
}

.may {
    color: rgb(193, 210, 61)
}

.may:before {
    background-color: rgba(193, 210, 61, .2)
}

.june {
    color: rgb(247, 198, 67)
}

.june:before {
    background-color: rgba(247, 198, 67, .2)
}

.july {
    color: rgb(232, 137, 64)
}

.july:before {
    background-color: rgba(232, 137, 64, .2)
}

.august {
    color: rgb(234, 102, 87)
}

.august:before {
    background-color: rgba(234, 102, 87, .2)
}

.september {
    color: rgb(226, 81, 106)
}

.september:before {
    background-color: rgba(226, 81, 106, .2)
}

.october {
    color: rgb(186, 81, 146)
}

.october:before {
    background-color: rgba(186, 81, 146, .2)
}

.october {
    color: rgb(186, 81, 146)
}

.october:before {
    background-color: rgba(186, 81, 146, .2)
}

.november {
    color: rgb(118, 79, 153)
}

.november:before {
    background-color: rgba(118, 79, 153, .2)
}

.december {
    color: rgb(118, 79, 153)
}

.december:before {
    background-color: rgba(118, 79, 153, .2)
}

/* ----------------------- END - MONTH ----------------------- */

/* ------------------------- PADDING ------------------------- */

.ps-57 {
    padding-left: 57px !important;
}

/* ------------------------- PADDING ------------------------- */


.navbar-nav.nav_sidebar .nav_span:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid rgba(18, 20, 29, 0.5);
    border-bottom: 7px solid transparent;
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
}

.navbar-link.active {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: -1;
}

.navbar-nav.nav_sidebar .navbar-link:hover .nav_span {
    opacity: 100 !important;
    visibility: visible !important;
}

.navbar-nav.nav_sidebar .navbar-link {
    transition: all 0.125s ease-in-out !important;
}

.navbar-nav.nav_sidebar .navbar-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.transition-fast {
    transition: all 0.125s ease-in-out !important;
}

.flex-1 {
    flex: 1;
}

.hover-bg-white-20 {
    transition: background-color 0.2s ease-in-out;
}

.hover-bg-white-20:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.text_primary_dark {
    color: rgba(var(--color-primary-dark),1);
}

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

.thead .headcol.holiday {
    background-color: rgba(226, 232, 240, 0.4);
}

.thead .headcol.today::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    height: 100%;
    width: 100%;
}

.thead .headcol.today::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(var(--bs-primary-rgb), 1);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-bottom: none;
}

.tbody .bodycol.holiday {
    background-color: rgba(226, 232, 240, 0.4);
}

.tbody .bodycol.today::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(var(--bs-primary-rgb), 1);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border-bottom-width: 0px;
    border-top-width: 0px;
}

.tbody .tr:last-child .bodycol.today::after {
    border-bottom-width: 1px;
}

.tbody .bodycol:not(.cleaning):hover {
    background-color: rgba(228, 228, 231,.6) !important;
}

.clicked {
    background: rgba(var(--color-primary), 0.3) !important;
}

.headcol_month:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    height: 100%;
    width: 100%;
}

.max-h-screen-minus-127 {
    max-height: calc(100vh - 127px) !important;
}

.wrapper_container {
    max-width: 100vw;
}

.btn.btn-light.trash:hover i {
    color: #dc3545;
}

.obj_image_main img {
    height: 280px;
}

.obj_image .obj_image_hover {
    opacity: 0;
    background-color: rgba(0,0,0,.5);
    transition: .125s ease-in-out;
}

.obj_image .obj_image_hover:hover {
    opacity: 1;
}

.obj_image img {
    height: 280px;
}

.drop_image_upload {
    height: 280px;
    color: rgb(68, 68, 68);
    transition: 0.125s ease-in-out;
    border: 2px dashed var(--bs-gray-500) !important;
}

.drop_image_upload:hover {
    background: rgba(0,0,0, 0.03);
    border-color: #111 !important;
}

.drop_image_upload:hover .drop-title {
    color: #222;
}

.image-upload-wrap {
    margin-top: 20px;
    border: 2px dashed var(--bs-primary);
    position: relative;
}

.image-upload-wrap:hover {
    background-color: var(--bs-gray-100);
}

.file-upload-input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.fade-in {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media screen and (min-width: 992px) {
    .wrapper_container {
        max-width: calc(100vw - 60px);
    }
    .w-lg-auto {
        width: auto !important;
    }
}

@media (max-width: 576px) {
    .card-body .text-muted {
        font-size: 0.85rem;
    }

    .card-body .icon-user-line,
    .card-body .icon-paw,
    .card-body .icon-parking-box-line {
        font-size: 1rem;
    }
}

@media screen and (max-height: 500px) {
    .hide-maxh-500 {
        display: none !important;
    }
    .maxh-500-apply-maxh-screen-minus-71 {
        max-height: calc(100vh - 71px) !important;
    }
}