/* ----------------------------------------------------------------------------------- */
/*            override css for gråtoner styling av components                          */
/* ----------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------- */
/*  NB! Viktig att du har med !important, ellers kommer den ike med  */
/* ----------------------------------------------------------------- */


html, body {
    background-color: #e3e3e3 !important;
    color: dimgrey !important;
}

/* Denne er default RadzenText Body1 eller om du ikke velger noe */
.rz-text-body1 {
    color: #5d5d5d !important;
}

/* Denne er default RadzenText Body2 - Denne brukes i ofte litt diskret i parentes */
.rz-text-body2 {
    color: #787878 !important;
}

/* Har ikke bestemt meg ennå for hva jeg skal bruke den til  */
.rz-text-subtitle1 {
    color: #9C9C9C !important;
}

/* Har ikke bestemt meg ennå for hva jeg skal bruke den til, brukes i system/bedrift/user headeren  */
.rz-text-subtitle2 {
    color: #404040 !important;
}


/* --------------------- RadzenText H1, H2, H3, H4, H5, H6  -----------------------------------*/

.rz-text-h1 {
    color: #97c4a6 !important;
}

.rz-text-h2 {
    color: #7a7a7a !important;
}

.rz-text-h3 {
    color: #7a7a7a !important;
}

.rz-text-h4 {
    color: #7a7a7a !important;
}

.rz-text-h5 {
    color: #7a7a7a !important;
}

.rz-text-h6 {
    color: #8F8F8F !important;
}


/* --------------    RadzenBagde      ---------------- */
.rz-badge {
    background-color: transparent !important;
    color: #7a7a7a !important;
}


.rz-badge-info { /* Renting */
    color: white !important;
    background-color: #5995E3 !important;
}

.rz-badge-danger { /* blocked */
    color: white !important;
    background-color: #E38D8D !important;
}

.rz-badge-success { /* active */
    color: white !important;
    background-color: #B0B0B0 !important;
}

.rz-badge-secondary { /* owned  */
    color: white !important;
    background-color: #B18BC7 !important;
}

.rz-badge-warning { /* reservasjon  */
    color: white !important;
    background-color: #F0BB4F !important;
}


/* --------------------- RadzenText DisplayH1, DisplayH2, DisplayH3, DisplayH4, DisplayH5, DisplayH6  -----------------------------------*/
.rz-text-display-h1 {
    color: #97c4a6 !important;
}

.rz-text-display-h2 {
    color: #7a7a7a !important;
}

.rz-text-display-h3 {
    color: #7a7a7a !important;
}

.rz-text-display-h4 {
    color: #7a7a7a !important;
}

.rz-text-display-h5 {
    color: #7a7a7a !important;
}

.rz-text-display-h6 {
    color: #7a7a7a !important;
}



/* ------------------------- Ulike farger setup --------------------------------------*/
.font-green-color {
    color: #0C994E !important;
}
.font-orange-color {
    color: #FA9D32 !important;
}
.font-red-color {
    color: #FA5332 !important;
}



/* --------------    Radzen - Card      ---------------- */

/* RadzenCard  denne fyller bakgrunnsfargen  */
.rz-card.rz-variant-filled {
    background-color: transparent !important; /* Custom background color */
    /* e9e9e9 - nyeste */
    /* #f7f7f7 - grå toner */
    /* #b1c6b8 - grønn ish toner */
    /* #cde7dd - svak grå grønn toner */
    /* #e7dccd - svak grå orange toner */
}


.rz-card.rz-card-usernotification-unseen {
    background-color: #bebebe !important; /* Custom background color */
}
.rz-card.rz-card-usernotification-seen {
    background-color: transparent !important; /* Custom background color */
}




/* -------------------------     Radzen Datagrid       ----------------------------------*/

/* Make the entire grid background gray */
.rz-datatable {
    background-color: transparent;
    border-bottom: 0px !important; /* For unngår dobbelt så bred linje */
}


.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td:not(.rz-frozen-cell) {
    background-color: #CFCFCF !important; /* Replace with your color code */
}

.rz-state-highlight {
    background-color: #C2D1C5 !important; /* light green for selected rows */
}

/* Override text color for selected row */
.rz-datatable .rz-state-highlight .rz-cell {
    color: white !important;
}


















/* Tekst fargen på dataene i griden */
.rz-cell-data {
    /*color: transparent !important;*/
}

/* Optional: Also style individual column headers */
.rz-column-title {
    background-color: transparent !important;
    color: #828282 !important; /* Adjust text color for better contrast */
    /*font-weight: lighter !important;*/
}

/* Optional: Also style individual column headers */
.rz-sortable-column {
    background-color: transparent !important;
    color: black !important; /* Adjust text color for better contrast */
    /*font-weight: lighter !important;*/
}

/* Får ikke til å fikse fargen på frozen ???*/
/*.rz-frozen-cell .rz-frozen-cell-left-inner rz-cell-data {
    background-color: #f0f0f0 !important;
    color: black;*/ /* Adjust text color for better contrast */
/*font-weight: bold;
}*/






/* ---------------------     Radzen Dialog     --------------------------*/


/* Change the background color of the entire dialog */
.rz-dialog {
    background-color: #e8e8e8 !important; /* Light gray background */
}

/* Change the background color of the dialog header */
.rz-dialog-titlebar {
    background-color: #e8e8e8 !important; /* Blue header */
    color: white !important;
}

/* Header text */
.rz-dialog .rz-dialog-title {
    color: #7a7a7a !important; /* Adjust text color for better contrast */
}


/* Override the Radzen DialogService close(X) button */
.rz-dialog .rz-dialog-titlebar-close,
.rz-dialog .rz-dialog-titlebar-close span,
.rz-dialog .rz-dialog-titlebar-icon,
.rz-dialog .rz-dialog-titlebar-icon span {
    color: #696969 !important;
    fill: #696969 !important;
}

.rz-dialog .rz-dialog-titlebar-close:hover span {
    color: black !important;
}


/* ----------------------   Radzen Progressbar    -----------------------*/
/* Outer bar (track) */
.rz-progressbar {
    background-color: #BABABA !important;
    overflow: hidden;
}

/* Filled bar */
.rz-progressbar-value {
    background-color: #4caf50 !important; /* green */
    transition: width 0.3s ease; /* smooth animation */
}



/* -------------------     Navigasjon Linker     -------------------*/
/* Nav link */
.nav-link {
    background-color: #949494 !important;
    color: #eaeaea !important;
}

/* Hover effect */
.nav-link:hover {
    color: #CFCFCF !important;
    background-color: #8F8F8F !important;
}

/* Active NavLink (current page) */
.nav-link.active {
    color: #eaeaea !important; /* Active link color */
    background-color: #919191 !important; /* Background for active link */
}



/* -----------------------------------  Radzen Button Theme Base, Success, Danger  -------------------------------*/


/* ----------   RadzenButton - Default (base)  knappen (mest brukt) ----------- */
.rz-button.rz-base {
    color: #676767 !important;
    background-color: #d9d9d9 !important;
    /*background-image: url('/icons/Buttons/BtnTrash.png') !important;*/
}

.rz-button.rz-base:hover {
    color: #676767 !important;
    background-color: #E3E3E3 !important;
}


/* **************************************************************************************************************** */
/*    Custom for 'base' knapper  */
/* **************************************************************************************************************** */

.btn-xs-edit {
    background-image: url('/icons/Buttons/BtnEdit.png') !important;
}

.btn-xs-card {
    background-image: url('/icons/Buttons/BtnCard.png') !important;
}

.btn-xs-page {
    background-image: url('/icons/Buttons/BtnPage.png') !important;
}

.btn-xs-delete {
    background-image: url('/icons/Buttons/BtnTrashColor.png') !important;
}

.btn-xs-markasdelete {
    background-image: url('/icons/Buttons/BtnMarkAsDeleted.png') !important;
}

.btn-xs-removeasdelete {
    background-image: url('/icons/Buttons/BtnRemoveAsDeleted.png') !important;
}

.btn-xs-remove {
    background-image: url('/icons/Buttons/BtnRemove.png') !important;
}

.btn-xs-default {
    background-image: url('/icons/Buttons/BtnPinpoint.png') !important;
}

.btn-xs-resetpw {
    background-image: url('/icons/Buttons/BtnResetPw.png') !important;
}

.btn-xs-changepw {
    background-image: url('/icons/Buttons/BtnChangePw.png') !important;
}

.btn-xs-block {
    background-image: url('/icons/Buttons/BtnBlock.png') !important;
}

.btn-xs-activate {
    background-image: url('/icons/Buttons/BtnActivate.png') !important;
}

.btn-xs-deactivate {
    background-image: url('/icons/Buttons/Btnblock.png') !important;
}

.btn-xs-booking {
    background-image: url('/icons/Buttons/BtnBooking.png') !important;
}

.btn-xs-cancelbooking {
    background-image: url('/icons/Buttons/BtnBookingCancell.png') !important;
}

.btn-xs-taskperformby {
    background-image: url('/icons/Buttons/BtnTaskPerformBy.png') !important;
}

.btn-xs-taskcontrollby {
    background-image: url('/icons/Buttons/BtnControlledBy.png') !important;
}

.btn-xs-addimage {
    background-image: url('/icons/Buttons/BtnAddImage.png') !important;
}
.btn-xs-adddoc {
    background-image: url('/icons/Buttons/BtnAddDoc.png') !important;
}

.btn-xs-download {
    background-image: url('/icons/Buttons/BtnDownload.png') !important;
}

.btn-xs-downloaddelete {
    background-image: url('/icons/Buttons/BtnDownloadDelete.png') !important;
}

.btn-xs-notification {
    background-image: url('/icons/Buttons/BtnNotificationColorDark.png') !important;
}

/* Lei denne - når du gjør en renting */
.btn-xs-renting {
    background-image: url('/icons/Buttons/BtnRentingColor.png') !important;
}

.btn-xs-returning {
    background-image: url('/icons/Buttons/BtnReturning.png') !important;
}

.btn-xs-reservation {
    background-image: url('/icons/Buttons/BtnReservationColor.png') !important;
}

.btn-xs-undoreservation {
    background-image: url('/icons/Buttons/BtnUndoReservation.png') !important;
}

.btn-xs-showimage {
    background-image: url('/icons/Buttons/BtnImageShow.png') !important;
}


.btn-xs-deleteimage {
    background-image: url('/icons/Buttons/BtnImageDelete.png') !important;
}

.btn-xs-deleteimage:hover {
    color: #676767 !important;
    background-color: #E3E3E3 !important;
}



/* ---------------- RadzenButton - Light (Brukes til Endre dialogen) ------------------------*/
.rz-button-xs.rz-light {
    color: #676767 !important;
    background-color: #d9d9d9 !important;
    background-image: url('/icons/Buttons/BtnEdit.png') !important;
}

.rz-button-xs.rz-light:hover {
    color: #676767 !important;
    background-color: #E3E3E3 !important;
}

/* ----------   RadzenButton - secondary (brukes til In-aktiv)  knappen  ----------- */
/* ----------   RadzenButton - secondary (brukes kort dialog)  knappen  ----------- */
.rz-button.rz-secondary {
    color: #676767 !important;
    background-color: #d9d9d9 !important;
    background-image: url('/icons/Buttons/BtnCard.png') !important;
}

    .rz-button.rz-secondary:hover {
        color: #676767 !important;
        background-color: #E3E3E3 !important;
    }

/* ----------   RadzenButton - primary knappen (denne brukes også når du ikke angïr noe)  ----------- */
.rz-primary {
    color: #676767 !important;
    background-color: #C7C7C7 !important;
}

.rz-primary:hover {
    color: #676767 !important;
    background-color: #C7C7C7 !important;
}


/* ----------   RadzenButton - Information knappen (Renting denne brukes til) ----------- */
.rz-button.rz-info {
    color: #D9EDFF !important;
    background-color: #4FA3FF !important;
    opacity: 0.90;
}

.rz-button.rz-info:hover {
    color: #4FA3FF !important; /* kvit farge */
    background-color: #AED6E8 !important;
}

/* Disabled siden denne ikke funker etter re-stylingen */
.rz-button.rz-info.rz-state-disabled {
    /*cursor: not-allowed !important;*/
    opacity: 0.3; /* optional: slightly transparent */
}


/* ----------   RadzenButton - Success  knappen (brukes til innlever) ----------- */
.rz-button.rz-success {
    color: #e5eaec !important;
    background-color: #3F8CD1 !important;
}

    .rz-button.rz-success:hover {
        color: #e5eaec !important;
        background-color: #3F8CD1 !important;
    }


/* ----------   RadzenButton - Danger (Slett)  knappen  ----------- */
.rz-button.rz-danger {
    color: #676767 !important;
    background-color: #d9d9d9 !important;
    background-image: url('/icons/Buttons/BtnTrash.png') !important;
}

.rz-button.rz-danger:hover {
    color: #676767 !important;
    background-color: #E3E3E3 !important;
}







/* ----------   RadzenButton - warning (reservasjon / advarsel  knappen  ----------- */
.rz-button.rz-warning {
    color: #FFF1E0 !important;
    background-color: #FFB457 !important;
}

.rz-button.rz-warning:hover {
    color: #d58508 !important;
    background-color: #F2DEC4 !important;
}



.file-input {
    color: #676767 !important;
}


/* -----------------------------------  Radzen Input felter  -------------------------------*/


/* Style the increment and decrement buttons */
.rz-numeric .rz-spinner-button {
    background-color: #007bff !important; /* Button background */
    color: white !important; /* Button text color */
}

/* numeric */
.rz-numeric .rz-inputtext {
    background-color: #FAFAFA !important; /* Change background */
    color: #696969 !important; /* Button text color */
    border: 1px solid #B5B5B5 !important; /* Thicker red border */
}

/* Change background color and border */
.rz-chkbox-box {
    background-color: #bababa !important; /* Change background */
    border: 1px solid #737373 !important; /* Change border color */
}

/* Change checkmark color */
.rz-chkbox-box .rzi-check {
    color: white !important; /* Make the checkmark white */
    background-color: #bababa !important; /* Change background */
}


/* textbox */
.rz-textbox {
    background-color: #FAFAFA !important; /* Change background */
    color: #696969 !important; /* Button text color */
    border: 1px solid #B5B5B5 !important; /* Thicker red border */
}


/* textarea */
.rz-textarea {
    background-color: #FAFAFA !important; /* Change background */
    color: #696969 !important; /* Button text color */
    border: 1px solid #B5B5B5 !important; /* Thicker red border */
}

/* dropdown */
.rz-dropdown {
    background-color: #FAFAFA !important; /* Change background */
    color: #696969 !important; /* Button text color */
    border: 1px solid #B5B5B5 !important; /* Thicker red border */
}

.rz-dropdown-item {
    background-color: #FAFAFA
}

/* When focused (activated) */
.rz-dropdown.rz-state-focus {
    border-color: #0078d4 !important; /* Blue border */
    box-shadow: 0 0 4px rgba(0, 120, 212, 0.5); /* Optional glow */
}


/* Dato */
.rz-datepicker .rz-inputtext {
    background-color: #FAFAFA !important; /* dark background */
    color: #696969 !important; /* text color */
    border: 1px solid #878787 !important; /* border */
}







/* ----------------------     Radzen Dataview    ---------------------*/

/* Remove Radzen's default bottom border */
.rz-tabview-nav li {
    border-bottom: none !important;
}

.rz-tabview-nav li .rz-tabview-title {
    color: #8F8F8F !important;
    /*border-bottom: 0px solid transparent;*/ /* keeps height consistent */
}


/* Unselected tab color */
.rz-tabview .rz-tabview-nav {
    background-color: transparent !important; /* Background */
    /*color: #cc7272 !important;*/ /* Text color */
}

.rz-tabview-nav li.rz-tabview-selected .rz-tabview-title {
    color: #6E6E6E !important;
    border-bottom: 3px solid #6E6E6E !important; /* custom color & thickness */
}



/* ------------- start Ellipse --------------------------   Hendelse / varsling runding */

.ellipse {
    background-color: #3498db;
}

/* ------------------------ Slutt Ellipse ------------------*/



/* --------------------------------- UnitTypes image --------------------------------------- */

.src_unittype_key {
    background-image: url('/icons/UnitTypes/UnitTypeKey.png') !important;
}

.src_unittype_car {
    background-image: url('/icons/UnitTypes/UnitTypeCar.png') !important;
}

.src_unittype_card {
    background-image: url('/icons/UnitTypes/UnitTypeCard.png') !important;
}

.src_unittype_tool {
    background-image: url('/icons/UnitTypes/UnitTypeTool.png') !important;
}

.src_unittype_data {
    background-image: url('/icons/UnitTypes/UnitTypeData.png') !important;
}

.src_unittype_truck {
    background-image: url('/icons/UnitTypes/UnitTypeTruck.png') !important;
}

.src_unittype_phone {
    background-image: url('/icons/UnitTypes/UnitTypePhone.png') !important;
}

.src_unittype_collection {
    background-image: url('/icons/UnitTypes/UnitTypeCollection.png') !important;
}

.src_unittype_consultant {
    background-image: url('/icons/UnitTypes/UnitTypeConsultant.png') !important;
}
.src_unittype_uniform {
    background-image: url('/icons/UnitTypes/UnitTypeUniform.png') !important;
}

.src_unittype_machine {
    background-image: url('/icons/UnitTypes/UnitTypeMachine.png') !important;
}

.src_unittype_pet {
    background-image: url('/icons/UnitTypes/UnitTypePet.png') !important;
}

.src_unittype_sensor {
    background-image: url('/icons/UnitTypes/UnitTypeSensor.png') !important;
}

.src_isdefault {
    background-image: url('/icons/IsDefault.png') !important;
}


/* ---------------------   Radzen notification  -----------------------------  */
.rz-notification-success {
    background-color: #E0FCE2 !important;
    border: 1px solid #24BB20 !important;
}

.rz-notification-warning {
    background-color: #FEF6DC !important;
    border: 1px solid #FCDF84 !important;
}

.rz-notification-info {
    background-color: #E0EEFC !important;
    border: 1px solid #2085BB !important;
}

.rz-notification-error {
    background-color: #FFD6D6 !important;
    border: 1px solid #BB2028 !important;
}

.rz-notification * {
    color: black !important;
    opacity: 0.95 !important;
}


.rz-notification-error .custom-notification-warning {
    background-color: transparent !important; /* Tar vekk kanten rund summary og detailed */
    border: 0px !important; /* Tar vekk kanten rund summary og detailed */
}

.rz-notification-error .custom-notification-error {
    background-color: transparent !important; /* Tar vekk kanten rund summary og detailed */
    border: 0px !important; /* Tar vekk kanten rund summary og detailed */
}

.rz-notification-error .custom-notification-notaccess {
    background-color: transparent !important; /* Tar vekk kanten rund summary og detailed */
    border: 0px !important; /* Tar vekk kanten rund summary og detailed */
}

.rz-notification-error .custom-notification-notvalid {
    background-color: transparent !important; /* Tar vekk kanten rund summary og detailed */
    border: 0px !important; /* Tar vekk kanten rund summary og detailed */
}

.rz-notification-info .custom-notification-userupdate {
    background-color: transparent !important; /* Tar vekk kanten rund summary og detailed */
    border: 0px !important; /* Tar vekk kanten rund summary og detailed */
}


/* When notification contains error */
.rz-notification-error:has(.custom-notification-error) {
    /*background-color: #FFD6D6 !important;*/
    background-color: #FFD6D6 !important;
}

/* When notification contains not access */
.rz-notification-error:has(.custom-notification-notaccess) {
    background-color: #E6DADA !important;
    /*border: 1px solid #3E2ED1 !important;*/
}

/* When notification contains validation */
.rz-notification-error:has(.custom-notification-notvalid) {
    background-color: #FFDFB0 !important;
    border: 1px solid #D1852E !important;
}

/* When notification contains user updates */
.rz-notification-info:has(.custom-notification-userupdate) {
    background-color: #DEDEDE !important;
    border: 1px solid #4F4F4F !important;
}

/* When notification contains  warning */
.rz-notification-error:has(.custom-notification-warning) {
    background-color: #FFFEA1 !important;
    opacity: 1.0 !important;
    border: 1px solid darkorange !important;
}















/* ----------- Brukes i API monitor Blinking / fade in/out  ----------------------------*/
.blinking {
    animation: blink-color 0.5s ease-in-out infinite alternate;
    color: limegreen !important;
}

.blinkingupdate {
    animation: blink-color 0.5s ease-in-out infinite alternate;
    color: darkorange !important;
}

.blinkingdelete {
    animation: blink-color 0.5s ease-in-out infinite alternate;
    color: orangered !important;
}

/*@keyframes blink-animation {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.3;
    }
}*/

@keyframes blink-color {
    from {
        color: limegreen !important;
    }

    to {
        color: black !important;
    }
}