/* ----------------------------------------------------------------------------------- */
/*            override css for størrelser av components                                */
/* ----------------------------------------------------------------------------------- */

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


/*.rz-body {
    margin-top: 240px !important;
}*/




/* Denne er default RadzenText Body1 eller om du ikke velger noe */
.rz-text-body1 {
    font-size: 15px !important; /* default er 16 */
}

/* Denne er default RadzenText Body2 - Denne brukes i ofte litt diskret i parentes */
.rz-text-body2 {
    font-size: 13px !important; /* default er 14*/
    margin-top: 1px !important; /* Må flytte den så den blir sentrert i vertikalt */
}


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

.rz-text-h1 {  /* headeren */
    font-size: 42pt !important;
}

.rz-text-h2 {   /* Brukes ikke ennå, men i tilfelle trenger ekstra */
    font-size: 30pt !important;
}

.rz-text-h3 {  /* Denne brukes oftest som header */
    font-size: 20pt !important;
}

.rz-text-h4 {   /* header, mindre utgave, brukes sjelden */
    font-size: 17pt !important;
}

.rz-text-h5 {  
    font-size: 13pt !important;
}

.rz-text-h6 {
    font-size: 11pt !important;
}



/* --------------    RadzenBagde      ---------------- */
.rz-badge {
    width: 80px !important;
    font-size: 8pt !important;
}


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

/* RadzenCard  denne fyller bakgrunnsfargen  */
.rz-card.rz-variant-filled {
    padding: 10px !important;
    margin: 0px !important;
}



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

/* Optional: Also style individual column headers */
.rz-column-title {
    font-size: 12px !important; /* litt mindre font enn i td  */
    font-weight: lighter !important;
}

.my-wrap-header .rz-column-title {
    white-space: normal !important;
    word-break: break-word;
}



/* Tekst fargen på dataene i griden */
.rz-cell-data {
    font-size: 13px !important;
}


/* ------------     Radzen Datalist       -------------*/
.rz-datalist-item {
}




/* -------------------     Navigasjon Linker     -------------------*/
/* Nav link */
.nav-link {
    width: 72px !important;
    height: 28px !important;
    text-align: end !important;
    justify-content: center !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 9pt !important;
}

/* Hover effect */
.nav-link:hover {
    text-decoration: none;
}

/* Active NavLink (current page) */
    .nav-link.active {
        border-radius: 5px;
        font-weight: bold;
        font-size: 9pt !important;
    }



/* ---------------  API Status ?? Litt usikker */
.apistatus {
    width: 120px;
    height: 20px;
    border-radius: 5px;
    margin-top: 1px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    font-size: 10px !important;
    justify-content: center;
    display: flex;
}






/* ----------------------------------------     Radzen Buttons    -----------------------------------------*/
.rz-button {
    text-transform: none !important; /* ingen store bokstaver */
}

.rz-button-xs {
    width: 68px !important;
    margin-right: 0px !important; /* brukes som space til neste knapp */
    margin-left: 0px !important; /* brukes som space til neste knapp */
}

.rz-button-sm {
    height: 28px !important; /* 36 er default */
    margin-top: -2px !important; 
}

.rz-button-md {
    padding: 2px 8px 0px 8px !important;
    font-size: 11pt !important; /* 10 er default */
}



/*  Button ExtraSmall og primary - Brukes til det knappen som har høyest verdi */
.rz-button-xs.rz-primary {
    height: 22px !important; /* 24 er default for Extrasmall, 20 er lavest du kan gå pga row height */
    font-size: 9pt !important; /* 9 er default */
    padding: 0px 5px 0px 5px !important;
}

/* ----------   RadzenButton - Information knappen  ----------- */
.rz-button-xs.rz-info {
    height: 22px !important; /* 24 er default for Extrasmall, 20 er lavest du kan gå pga row height */
    font-size: 9pt !important; /* 9 er default */
    padding: 2px 8px 0px 8px !important;
}

.rz-button-md.rz-info {
    padding: 2px 8px 0px 8px !important;
}


/* ----------   RadzenButton - Success  knappen  ----------- */
.rz-button-xs.rz-success {
    height: 22px !important; /* 24 er default for Extrasmall, 20 er lavest du kan gå pga row height */
    font-size: 9pt !important; /* 9 er default */
    padding: 2px 8px 0px 8px !important;
}

.rz-button-md.rz-success {
    padding: 2px 8px 0px 8px !important;
}


/* ----------   RadzenButton - Default (base)  knappen  ----------- */
.rz-button-xs.rz-base {
    height: 22px !important; /* 24 er default for Extrasmall, 20 er lavest du kan gå pga row height */
    font-size: 9pt !important; /* 9 er default */
    padding: 2px 8px 0px 8px !important;
    margin-right: 2px !important;
}

.rz-button-md.rz-base {
    padding: 2px 8px 0px 8px !important;
}

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

.btn-xs-edit {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 15px 15px !important; /* scale */
    background-position-x: 8px !important;
    background-position-y: 3px !important;
}

.btn-xs-card {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 16px 16px !important; /* scale */
    background-position-x: 5px !important;
}

.btn-xs-page {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 20px 18px !important; /* scale */
    background-position-x: 5px !important;
}

.btn-xs-delete {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 21px 19px !important; /* scale */
    background-position-x: 3px !important;
}

.btn-xs-markasdelete {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 16px 17px !important; /* scale */
    background-position-x: 5px !important;
}

.btn-xs-removeasdelete {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 16px 17px !important; /* scale */
    background-position-x: 5px !important;
}

.btn-xs-remove {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 19px 16px !important; /* scale */
    background-position-x: 5px !important;
}

.btn-xs-default {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 17px 17px !important; /* scale */
    background-position-x: 5px !important;
}

.btn-xs-resetpw {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 17px 17px !important; /* scale */
    background-position-x: 5px !important;
}

.btn-xs-changepw {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 17px 17px !important; /* scale */
    background-position-x: 5px !important;
}

.btn-xs-block {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 17px 17px !important; /* scale */
    background-position-x: 5px !important;
    opacity: 0.7 !important;
}

.btn-xs-activate {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 17px 17px !important; /* scale */
    background-position-x: 5px !important;
}

.btn-xs-deactivate {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 17px 17px !important; /* scale */
    background-position-x: 5px !important;
    opacity: 0.7 !important;
}

.btn-xs-booking {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 17px 17px !important; /* scale */
    background-position-x: 5px !important;
}

.btn-xs-cancelbooking {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 19px 19px !important; /* scale */
    background-position-x: 5px !important;
    background-color: #ff6a00 !important;
}

.btn-xs-taskperformby {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 17px 17px !important; /* scale */
    background-position-x: 5px !important;
    background-color: #ff6a00 !important;
}

.btn-xs-taskcontrollby {
    width: 28px !important;
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 17px 17px !important; /* scale */
    background-position-x: 5px !important;
    background-color: #ff6a00 !important;
    opacity: 0.8 !important;
}

.btn-xs-addimage {
    min-width: 27px !important;
    width: 27px !important;
    max-width: 27px !important;
    opacity: 0.8 !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    background-position-x: 5px !important;
    opacity: 0.6 !important;
}

.btn-xs-adddoc {
    min-width: 27px !important;
    width: 27px !important;
    max-width: 27px !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    background-position-x: 5px !important;
}

.btn-xs-download {
    min-width: 27px !important;
    width: 27px !important;
    max-width: 27px !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    background-position-x: 5px !important;
}

.btn-xs-downloaddelete {
    min-width: 27px !important;
    width: 27px !important;
    max-width: 27px !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    background-position-x: 5px !important;
    opacity: 0.7 !important;
}

.btn-xs-notification {
    min-width: 27px !important;
    width: 27px !important;
    max-width: 27px !important;
    background-position: center !important;
    background-size: 17px 17px !important;
    background-position-x: 5px !important;
}

.btn-xs-showimage {
    min-width: 27px !important;
    width: 27px !important;
    max-width: 27px !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    background-position-x: 5px !important;
}
.btn-xs-deleteimage {
    min-width: 27px !important;
    width: 27px !important;
    max-width: 27px !important;
    background-position: left !important;
    background-size: 18px 18px !important;
    background-position-x: 5px !important;
}

/* Lei denne - når du gjør en renting */
.btn-xs-renting {
    min-width: 27px !important;
    width: 27px !important;
    background-position: left !important;
    background-size: 18px 18px !important;
    background-position-x: 5px !important;
}

.btn-xs-returning {
    min-width: 27px !important;
    width: 27px !important;
    background-position: left !important;
    background-size: 18px 18px !important;
    background-position-x: 5px !important;
}

.btn-xs-reservation {
    min-width: 27px !important;
    width: 27px !important;
    background-position: left !important;
    background-size: 18px 18px !important;
    background-position-x: 5px !important;
}


.btn-xs-undoreservation {
    min-width: 27px !important;
    width: 27px !important;
    background-position: left !important;
    background-size: 18px 18px !important;
    background-position-x: 5px !important;
}







/* **************************************************************************************************************** */



/* ---------------- RadzenButton - Light (Brukes til Endre dialogen) ------------------------*/
.rz-button-xs.rz-light {
    height: 22px !important; /* 24 er default for Extrasmall, 20 er lavest du kan gå pga row height */
    font-size: 9pt !important; /* 9 er default */
    padding: 2px 8px 0px 12px !important;
    background-position: left !important; /* left align */
    background-size: 16px 16px !important; /* scale */
    background-position-x: 3px !important;
    width: 28px !important;
}

.rz-button-md.rz-light {
    padding: 2px 8px 0px 8px !important;
}



/* ----------   RadzenButton - Danger (Slett)  knappen uten tekst, kun bilde  ----------- */
.rz-button-xs.rz-danger {
    height: 22px !important; /* 24 er default for Extrasmall, 20 er lavest du kan gå pga row height */
    font-size: 0pt !important; /* 9 er default */
    background-position: left !important; /* left align */
    background-size: 20px 20px !important; /* scale */
    background-position-x: 3px !important;
    width: 28px !important;
    margin-right: 2px !important;
    margin-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}


.rz-button-md.rz-danger {
    padding: 2px 18px 0px 28px !important;
    background-position: left !important; /* left align */
    background-size: 20px 20px !important; /* scale */
    background-position-x: 3px !important;
}

/* ----------   RadzenButton - secondary (brukes til In-aktiv)  knappen  ----------- */
.rz-button-xs.rz-secondary {
    height: 22px !important; /* 24 er default for Extrasmall, 20 er lavest du kan gå pga row height */
    font-size: 9pt !important; /* 9 er default */
    padding: 2px 8px 0px 8px !important;
    background-position: left !important; /* left align */
    background-size: 17px 17px !important; /* scale */
    background-position-x: 3px !important;
}


/* ----------   RadzenButton - warning (reservasjon / advarsel  knappen  ----------- */
.rz-button-xs.rz-warning {
    height: 22px !important; /* 24 er default for Extrasmall, 20 er lavest du kan gå pga row height */
    font-size: 9pt !important; /* 9 er default */
    padding: 2px 8px 0px 8px !important;
}


/* ------------------------ RadzenRadionButton ------------------------------- */

/* Outer circle size */
.rz-radiobutton-box {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    margin-top: 2px !important;
}

/* Inner dot (checked state) */
.rz-radiobutton input:checked .rz-radiobutton-box::after {
    width: 10px !important;
    height: 10px !important;
}

.rz-radio-btn {
    font-size: 12px !important;
    gap: 0px !important; /* space between text and circle */
}


/* -----------------------------------  Radzen Input felter  -------------------------------*/
.rz-textbox {
    height: 25px !important; /* default er 40 */
    font-size: 14px !important; /* default er 16 */
    padding: -0px 0px 0px 6px !important; /* top, right, bottom, left */
}

.rz-textarea {
    font-size: 14px !important; /* default er 16 */
    padding: -0px 0px 0px 6px !important;
}


.rz-dropdown {
    height: 25px !important; /* default er 40 */
    font-size: 14px !important; /* default er 16 */
    padding: -0px 0px 0px 6px !important; /* top, right, bottom, left */
}

.rz-dropdown-item {
    height: 30px !important; /* fixed height */
    line-height: 10px !important; /* vertical centering */
    padding: 0 12px; /* optional: adjust padding */
}


.rz-datepicker {
    height: 25px !important; /* default er 40 */
    font-size: 14px !important; /* default er 16 */
    padding: 0px 0px 0px 0px !important;
}

.rz-datepicker input {
    height: 25px !important; /* Ensures input field matches the height */
    font-size: 14px !important; /* Adjust input text size */
    padding: -0px 0px 0px 6px !important;
}

/* Style the RadzenNumeric container */
.rz-numeric {
    height: 24px !important; /* Custom height */
    width: 80px !important; /* Custom height */
}

/* Style the input inside RadzenNumeri, MÅ ha space mellom 2 stylinger  */
.rz-numeric .rz-inputtext {
    font-size: 14px !important; /* Increase font size */
    height: 24px !important; /* Custom height */
    padding: -0px 0px 0px 6px !important;
}

/* Style the increment and decrement buttons */
.rz-numeric .rz-spinner-button {
    color: white !important; /* Button text color */
    border-radius: 5px !important; /* Round corners */
}



/* Change background color and border  - Unmarked */
.rz-chkbox-box {
    border-radius: 4px !important; /* Make it rounded */
    width: 16px !important; /* Custom width */
    height: 16px !important; /* Custom height */
    margin-top: 2px !important;
}

/* Change checkmark color */
.rz-chkbox-box .rzi-check {
    font-size: 18px !important; /* Increase checkmark size */
    width: 17px !important; /* Custom width */
    height: 17px !important; /* Custom height */
    transform: scale(0.7) !important; /* scale up the checkmark */
}

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

/* Remove uppercase from Radzen TabView headers */
.rz-tabview-nav li .rz-tabview-title {
    text-transform: none !important;
    font-size: 14px !important;
    font-weight: bolder;
}

/* Unselected tab color */
.rz-tabview .rz-tabview-nav {
    border-radius: 50px !important; /* Round edges */
    font-palette: normal;
    caret-color: initial;
    padding: 0px !important;
    border-bottom: none !important;
    box-shadow: none !important;
    border: none !important;
    text-transform: none !important; /* ingen store bokstaver */
}

/* NB!!!!!  Får ikke bort underline når jeg velger tar unfocused ???*/
.rz-tabview-nav.rz-tabview-selected {
    font-weight: bolder !important;
    /*border: none !important;*/
    /*border-bottom: none !important;*/
    box-shadow: none !important;
}

/* Also ensure the active tab doesn't have an underline */
.rz-tabview.rz-tabview-nav-link.rz-state-active {
    border-bottom: none !important;
    box-shadow: none !important;
    border: none !important;
    font-weight: bolder !important;
}

.rz-tabview-title {
    border-bottom: none !important;
    font-size: 17px !important;
    border: none !important;
    font-weight: bold !important;
}





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

.image-wrapper {
    position: relative;
    display: inline-block;
}

.ellipse-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    border: 2px solid white; /* optional border for contrast */
    z-index: 10;
}

.ellipse {
    width: 100px;
    height: 60px;
    border-radius: 50%; /* this makes it an ellipse */
}

.image-with-svg {
    position: relative;
    display: inline-block;
}

.image-with-svg {
    position: relative;
    display: inline-block;
}

.svg-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    pointer-events: none; /* Optional: prevent blocking clicks on image */
}


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


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

.src_unittype_key,
.src_unittype_car,
.src_unittype_card,
.src_unittype_tool,
.src_unittype_data,
.src_unittype_truck,
.src_unittype_consultant,
.src_unittype_collection,
.src_unittype_machine,
.src_unittype_sensor,
.src_unittype_pet,
.src_unittype_uniform {
    width: 15px;
    height: 15px;
    margin-top: 4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

/* ---------------------------- vanlig bilder */
.src_isdefault {
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}


/* --------------------------------- funker ikke under ---------------------------------------- */
/* Add space between the text and buttons  -- Får ikke til å funke !!!  */
.rz-dialog .rz-dialog-content {
    padding-bottom: 30px !important; /* Adjust spacing */
    border-radius: 10px; /* Optional: Rounded corners */
}

/* Add space between buttons  -- Får ikke til å funke !!!!!*/
.rz-dialog .rz-dialog-buttons {
    margin-top: 40px !important;
    display: flex;
    justify-content: center;
    gap: 20px !important; /* Ensure space between buttons */
}

.rz-dialog-titlebar {
    font-weight: bold;
}

.rz-dialog .rz-dialog-title {
    font-size: 22px !important;
    font-weight: bold !important;
}


/* Meny knappene - litt mindre luft mellom de*/
.nav-item.px-3 {
    padding-left: 0px !important;
    font-size: 13px !important;
    padding-right: 8px !important;
}


/* Radzen notification */
.rz-notification,
.rz-notification-info,
.rz-notification-success,
.rz-notification-error {
    /*border-radius: 14px !important;*/
    max-width: 350px !important;
    min-width: 350px !important; /* avoid too narrow */
    margin-top: 10px !important;
    margin-bottom: -0px !important;
    font-size: small !important;
    opacity: 0.97 !important;
    padding: 0px !important
}

/* Hide the default severity icons */
    .rz-notification .rz-notification-icon {
    display: none !important;
}

/* Remove spacing around summary/message */
.rz-notification-message {
    margin-top: -10px !important;
    margin-left: -5px !important;
    padding: 0px !important;
}
/* Flytter contenten litt ned */
.rz-notification-content {
    margin-top: 5px !important;
}

.rz-notify-headericon {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain;
    flex-shrink: 0;
}



/* Only warning notifications */
/*.rz-notification .rz-notification-message {
    font-size: 25px !important;
}*/

.scroll-card {
    max-height: 600px; /* or fixed height: height:400px */
    overflow-y: auto;
    border: 1px solid #ddd;
}


.file-input {
    height: 28px !important; /* 24 er default for Extrasmall, 20 er lavest du kan gå pga row height */
    font-size: 10pt !important; /* 9 er default */
    padding: 2px 8px 0px 12px !important;
}