:root {
    --color-orange: #FBBC01;
    --color-primary: #FBBC01;
    --color-primary-light: color-mix(in srgb, var(--color-primary), transparent 25%);
    --color-demo: #8fcdff;
    --color-demo-light: rgba(143,205,255,0.75);
    --color-input-selection: var(--floating-label-color);
/*    --color-input-selection: #80bdff;*/
    --color-black: #53565a;
   /* --color-secondary: #53565a;*/
    --color-secondary: #383F49;
    --color-login-primary: rgba(17, 51, 136, 0.85);
    --color-soft-error: indianred;
    --color-dashboard-font-hover: #FFFFFF;
    --color-navbar-bg: #53565a;
    --color-component-panel: #F7F7F7;
    --color-caret-link: white;
    --ff-main: Roboto, Arial, sans serif !important;
    --Aspect-Ratio-Value: 3 / 4;
    --bg-import: rgba(255,255,255, 0.8);
    --color-table-bg-secondary: rgba(108, 117, 125);
    --color-card-stats: rgba(108, 117, 125);
    --color-secondary-light: rgba(108,117,125, 0.5);
    --card-border-radius: 3.175mm;
    --scrollbarBG: #CFD8DC;
    --scrollbar-thumbBG: #90A4AE;
    --color-icon-focus: rgb(77, 116, 154);
    --color-account-menu-active: white;
    --delay-transition-account-menu: 200ms;
    --color-breadcrumbs: #d4d4d4;
    --color-settings-text: #495057;
    --color-data-send: #17a2b8;
    --color-data-send-outline: #0395ad;
    --color-data-delete: #dc3545;
    --color-import-error: #ed0606;
    --color-import-warning: orange;
    --color-link-warning: darkorange;
    --color-text-muted: #6c757d;
    /* ISO 7810/7816 */
    --card-width-iso: 85.60mm;
    --card-height-iso: 53.98mm;
    /* -------- */
    --table-border-radius: 4px;
    --color-material-error: #ce2626;
    --color-not-valid: #d00e0e;
    --color-text-extern: #373232;
    --color-text-easier-black: #3d3d3d;
    --color-focus-custom: rgb(60 102 147);
    --logo-aspect-ratio: 3.6585;
    --color-logo-subtext: #878B8D;
    --overview-table-border: 1px solid rgba(0,0,0,0.2);
}

*:not(:defined) {
    display:none!important;
}

.text-black {
    color:black!important;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: Roboto, Arial, sans serif !important;
    font-weight: normal;
}

@media (prefers-contrast: more) {
    body {
        font-weight: bold;
    }
}

@media (prefers-contrast: less) {
    body {
        font-weight: lighter;
    }
}


@media (prefers-color-scheme: dark) {
    body {
        --font-base-grade: -25;
    }
}


#app {
    background-size: cover;
    background-repeat: no-repeat;
    height: 100dvh;
}

.required-settings-label::after {
    content: '*';
    color:red;
}

.box-container {
    display:flex;
    flex-direction:column;
    height:100%;
}

.box-header {

    /*Sized to content*/
    flex: 0 1 auto;
    /* The above is shorthand for:
    flex-grow: 0,
    flex-shrink: 1,
    flex-basis: auto
    */

}

.box-content {
    /* Sized to take remaining space */
    flex: 1 1 auto;
}

.box-content-overflow {
    overflow:auto;
}



.box-footer {
    /*Sized to content*/
    flex: 0 1 auto;
}


/* Bootstrap Resets */

.btn:focus {
    box-shadow:none!important;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    /*  -webkit-appearance: listbox;*/
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
}

input::-webkit-date-and-time-value {
    text-align: left;
}

/* lg breakpoint */
@media(max-width:992px) {
    #app {
        /* fixes 100vh bug with footer on mobile */
        max-height: -webkit-fill-available!important;
        max-height: -moz-available!important;
        max-height: fill-available!important;
    }

    .login-form,
    .extern-image-container {
        max-height: -webkit-fill-available;
        max-height: -moz-available;
        max-height: fill-available;
    }
}

.app-gradient-bg {
    background-color: white;
 /*   background-color: rgba(240,240,240, 0.2);*/
    background-image: linear-gradient(#113388,  #f8f9fa, white) !important;
    /*background-image: linear-gradient(#335099, #f8f9fa, white)!important;*/
    background-repeat: no-repeat;
}

.app-gradient-bg[data-bg-type="settings"] {
    background-color: whitesmoke!important;
    background-image:none!important;
}

.id-service-gradient-extern {
    background-position: 0 0;
    background-color: white;
   /* background-image: linear-gradient(#113388, #fffafa,white , white) !important;*/
   /* background-image: linear-gradient(#4e67a6, #f8f9fa, white)!important;*/
 /*   background-image: linear-gradient(#9299aa, #f8f9fa, #d4d7dd)!important;*/
    background-image: linear-gradient(#8c9ecd, #f8f9fa, white)!important;
    background-repeat: no-repeat;
}

.id-service-extern-button-shadow {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.popup-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 99999;
    overflow-y:auto;
}

.imgNavigation {
    height:8.0042vh;
    width:8.0042vh;
    /*max-width:100%;
    height:auto;
    padding-top:0.30rem;*/
    fill:var(--color-primary);
}

@media (min-width: 500px) {
    #rowMainData{
        height: auto;
        background: #F7F7F7
    }

    .imgNavigation {
       /* width: 50%;*/
    }

    #ctNavIcons {
        height: auto;
        background: white;
    }

    #ctCardNumbers {
        position: relative;
    }
}

@media (min-width: 1200px) {
    #rowMainData{
        height: 64%;
        background: #F7F7F7
    }

    .imgNavigation {
      /*  width: 100%; */
    }

    #ctNavIcons {
        height: 60%;
        background: white;
    }
    #ctCardNumbers {
        position: absolute;
        bottom: 0%;
    }
}

/*
Navigation bar on the top of the page
menu elements and lavalamp plugin styles
*/
.mainNavTab {
    cursor: pointer;
    width: 100%;
    aspect-ratio: auto;
    background: var(--color-secondary);
    max-width: 14.5vw!important;
    padding-bottom:3.5vw;
    overflow:hidden;
  /*  box-shadow: 0 6px 8px 4px rgba(0,0,0,0.2);*/
  /*  box-shadow: 10px 10px 20px rgb(0 0 0 / 19%), 6px 6px 6px rgb(0 0 0 / 23%);*/
  /*  box-shadow: 5px 5px 4px rgb(0 0 0 / 19%), inset 0px -6px 9px 5px rgb(0 0 0 / 19%);*/
 /*   box-shadow: 5px 5px 4px rgb(0 0 0 / 19%), inset 0px -2px 5px 2px rgb(0 0 0 / 19%);*/
    box-shadow: 5px 5px 2px rgb(0 0 0 / 19%);
  /*  transition: transform .25s ease-in-out;*/
   /* will-change: transform;*/
    outline:1px solid rgba(0,0,0, 0.15);
    border-radius:2px;
}

.mainNavTab[disabled] {
    pointer-events:none;
    background: #919191!important;
}

.mainNavTab[disabled]::after {
    border-color: var(--color-secondary)!important;
}

.mainNavTab[disabled] > * .imgNavigation {
    fill: var(--color-secondary)!important;
}

.mainNavTab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-top:6px solid var(--color-primary);
  /*  border: 6px solid var(--color-primary);*/
}

.mainNavTab:hover {
    box-shadow: 14px 14px 28px rgba(0,0,0,0.25), 10px 10px 10px rgba(0,0,0,0.22);
    outline:none;
  /*  transform: scale(1.05);*/
}

.mainNavTab:hover,
.mainNavTab:focus,
.mainNavTab:focus-visible,
.mainNavTab:focus-within {
    background: var(--color-primary);
}

.mainNavTab:hover.mainNavTab::after,
.mainNavTab:focus.mainNavTab::after,
.mainNavTab:focus-within.mainNavTab::after,
.mainNavTab:focus-visible.mainNavTab::after
{
    border: 6px solid var(--color-secondary);
}

.mainNavTab svg {
    fill: var(--color-primary);
}

.mainNavTab:hover svg,
.mainNavTab:focus svg,
.mainNavTab:focus-visible svg,
.mainNavTab:focus-within svg {
    fill: #FFFFFF;
}


@media(max-width:992px) {

    .mainNavTab {
        max-width: none!important;
        margin-bottom: 1em;
    }

    .box-container {
        overflow-y:auto;
    }
}

@media(min-width:992px) {
    .mainNavTab {
        min-width: 190px;
    }

    /* mainnavtab removed */

   /* .extern-image-container {
        border:none!important;
        box-shadow:none!important;
        background-color: revert!important;
       !* padding:0!important;*!
    }*/

}



.mainNavTabMessage {
    width: 100%;
    background: var(--color-secondary);
}

.spanUserMessage:hover {
    overflow-y:scroll !important;
}

pre {
    font-family: Roboto, Arial, sans serif !important;
    padding-left:8px;
}

.UserMessagetextarea {

    background: var(--color-secondary);
    color: white;
    border:none;
    resize:none;
    outline:none;
    overflow:visible;

    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;
    white-space:pre-wrap;
    word-wrap:break-word;

}

.UserMessagetextarea::-webkit-scrollbar {
    display:none;
}

.navMenu {
    text-align: center;
    background: inherit;
    border: none;
    align-items: center;
    justify-content: center;
    display: flex;
}

#rowNavMenu{
    align-items: center;
    display: flex;
    font-size: 20pt;
    font-weight:500;
}

.active > a {
    color: var(--color-primary) !important;
}

.lavalamp-item:hover:not(.active) > a,
.lavalamp-item:focus:not(.active) > a,
.lavalamp-item:focus-within:not(.active) > a {
    color: var(--color-primary) !important;
}

/* change color to white on active element when hovered over other */
.lavalamp:has(.lavalamp-item:hover:not(.active)) > .active > a,
.lavalamp:has(.lavalamp-item:focus:not(.active)) > .active > a,
.lavalamp:has(.lavalamp-item:focus-within:not(.active)) > .active > a {
    color: white !important;
}


.lavalamp-object:before,
.lavalamp-object:after,
.lavalamp-object>:last-child:before,
.lavalamp-object>:last-child:after,
.curent:before,
.curent:after,
.curent>:last-child:before,
.curent>:last-child:after {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: var(--color-primary);
    border-style: solid;
    content: '';
}

.curent:before, .lavalamp-object:before {
    top: 6px;
    left: 6px;
    border-width: 3px 0 0 3px
}

.curent:after, .lavalamp-object:after {
    top: 6px;
    right: 6px;
    border-width: 3px 3px 0 0
}

.lavalamp-object>:last-child:after, .curent>:last-child:after {
    bottom: 6px;
    left: 6px;
    border-width: 0 0 3px 3px
}

.lavalamp-object>:last-child:before, .curent>:last-child:before {
    bottom: 6px;
    right: 6px;
    border-width: 0 3px 3px 0
}

.curent {
    min-width: min-content;
}

.curent > .row {
    margin:0!important;
    display:inline-block;
    min-width:100%;
}

/* overview table */
table thead {
    position: sticky;
    top: 0;
}

.table > thead > tr > th, .table >tbody > tr:first-of-type > td {
    border-top:none!important;
}

.btnCrop {
    background: none;
    border: 1px solid !important;
    text-align: left !important;
    width: 100%;
}

#cropContainer{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background: rgba(0,0,0,0.6);
    z-index: 99999;
    overflow-y: auto;
}

.btnAction {
    color: white !important;
}

.btnAction:hover{
    color: #1b1e21 !important;
}

.profile-header {
    color: rgba(0,0,0,.5);
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: 1.3em;
}


.img18 {
    width: auto;
    height: min(16px, 10.61vh + 0.5rem);
   /* cursor: pointer;*/
}

.img25 {
    width: auto;
    height:25px;
}

.img-button {
    width: 200px;
    cursor: pointer;
}

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

.text-grey {
    color: var(--color-secondary) !important;
}

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

.text-10 {
    font-size: 10pt !important;
}

.text-14 {
    font-size: 14pt !important;
}

.text-16 {
    font-size: 16pt !important;
}

.text-20 {
    font-size: 20pt !important;
}

.text-24 {
    font-size: 24pt !important;
}

.text-26 {
    font-size: 26pt !important;
}

.border-default {
    border: 1px solid var(--color-secondary);
}

.login-input {
    font-size: 24pt !important;
    background-color: #333966;
    padding-left: 30px;
}

.pointer {
    cursor: pointer;
}

.not-allowed {
    cursor: not-allowed;
}

.newcard-num:not([disabled]){
    cursor: pointer;
}

/*.newcard-num:hover{
    font-weight: bold;
}*/

#popup-usermenu>* {
    font-family: Roboto, Arial, sans serif;
    font-size: 16px;
}

#popup-usermenu > li:hover {
    /*background: #e6e6e6;*/
    background-color: var(--color-primary-light);

}

.popup-usermenu-image {
    height: auto;
    width: 20px;
}

#popup-usermenu-table td {
    margin: 0;
    padding: 0;
    border: 0;
}

.table-image {
    width: 25px;
}

input::-webkit-calendar-picker-indicator {
    opacity: 100;
}

.dataTable:focus {
    outline: 0 !important;
}

@media screen and (max-width:1700px) {

  /* .iconres {
        display: none!important;
    }*/

    .iconres-import {
        display:none!important;
    }

}


option {
    color:#495057;
}

html {
    /* Für flicker bei Lavalamp */
    /*margin-right: calc(100vw - 100%);*/
    overflow:hidden;
}


select {
    padding-top:0!important;
    padding-bottom: 0!important;
}

ul, #treeView {
    list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#treeView {
    margin: 0;
    padding: 0;
}

/* Style the caret/arrow */
.caret {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
    transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
    display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
    display: block;
}

.fix-position-error {
    top: 35%!important;
    right:40px!important;
}

.rotated {
    transform: rotate(90deg);
}

.btn-new {
    display:flex!important;
    align-content:center!important;
    justify-content: center!important;
}

.close-btn {
    outline:none;
}

.btn-filter {
    outline:none!important;
    padding:8px;
}

.btn-filter:hover, .btn-filter:focus {
    opacity: 0.7;
    outline:none!important;
}


.image-crop-icon {
    font-size: 2em;
}


.overview-width-image {
    width:80%!important;
}


/* CSV Import */
.is-dragover,
.is-dragover-image {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-primary) !important;
    border-width: 2px!important;
    border-style: dashed !important;
    color:white!important;
}

.is-dragover > svg {
    fill:white!important;
}

.is-dragover-login {
    border-width: 2px!important;
    border-style: dashed !important;
    border-color: var(--color-login-primary)!important;
}

#csvdropzone {
    width:521px;
    height:262px;
    text-align:center;
    cursor:pointer;
    background-color:rgba(180,180,180,0.75);
    border: 1px dashed black;
    border-radius: 6px;
}


#csvdropzone:active,
#csvdropzone:hover {
    -moz-box-shadow: inset 0 0 5px 3px #9d9d9d;
    -webkit-box-shadow: inset 0 0 3px 5px #9d9d9d;
    box-shadow: inset 0 0 5px 3px #9d9d9d;
}

#csvdropzone > * {
    pointer-events: none;
}

.btn-import {
    max-width: 115px;
    width: 115px;
}

.font-weight-background-gradient {
    font-weight: 500;
}

.ul-extra-text-import {
    margin:0;
    padding:0;
    padding-top:10px;
    padding-left:20px;
    list-style:disc!important;
}

/* Style the list */
ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #eee;
}

/* Display list items side by side */
ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
    padding: 8px;
    color: #3a3a3a;
    font-size: 2.8vh;
    content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
    color: var(--color-breadcrumbs);
    text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
    color: var(--color-primary)!important;
}

.custom-breadcrumb > li > a:hover {
    color: var(--color-primary)!important;
    border-color: var(--color-primary) !important;
}

/*ul.breadcrumb li a > .numberCircle:hover {
    border: 2px solid var(--color-primary-orange);
    color: var(--color-primary);
}*/

.breadcrumb-active {
    color:var(--color-primary)!important;
}

.numberCircle {
    text-decoration: none!important;
}


.breadcrumb-not-active {
    color:#dddddd!important;
    border-color:#dddddd!important;
    cursor:default;
}

.custom-breadcrumb > li > a {
    font-size: 2.8vh;
}

.custom-breadcrumb > li > span {
    font-size: 2.8vh;
}

.custom-breadcrumb-flex {
    display:flex!important;
    align-items:center;
    margin-right:5px;
}

.numberCircle {
    border-radius: 50%;
    width: 30px;
    height: 30px;

    margin-right:5px;
    display:flex;
    align-items:center;
    justify-content: center;

    background: transparent;
    border: 2px solid;
    text-align: center;
    font-size: 1.707vh;
    min-width:30px;
    min-height:30px;

}

.table-data-span {
    font-size: 16px;
}


.table-block {
    margin-right: 20px;
    margin-bottom: 5px;
    flex: 1;
}

.csvselect {
    min-width:180px;
    height: 40px;
    font-size: 16px;
    max-width:200px;
}

.csvimptable {
    width:100%;
    /*border:2px solid black;*/
    padding:15px;
}

.csvimptable > thead > tr > th {
    padding-left:10px;
    padding-top:5px;
}

.csvimptable > tbody > tr > td {
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
}

.option-csv {
    color:black!important;
}

.filter-row {

    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap:wrap;

    margin-left:-5px;
    margin-right:0!important;

}

.w-custom-40 {
    width:40%;
}

.w-custom-50 {
    width:50%;
}

.filter-image {
    width:36px;
    max-width:36px;
    text-align:center;
}

.filter-spacing-secondary-items {
    margin-left:1.5rem;
}

@media(min-width: 315px) {
    .filter-spacing-secondary-items {
        margin-left:0.5rem;
    }
}

.filter-end-button-col {
    max-width:100%!important;
    flex-basis: 100% !important;
    margin-top:0.5rem;
}

@media(min-width: 305px) {
    .filter-end-button-col {
        /*max-width:50%!important;*/
        max-width:min(200px, 50%)!important;
        margin-top:0;
    }
}

.overview-button-border {
    /*border: 1px solid rgba(0,0,0,0.3)!important;*/
    border: 1px solid var(--color-text-muted)!important;
    position:relative;
}

.overview-button-border:focus {
    box-shadow:none!important;
}

/*.overview-button-border.overview-button-border::after {
   !* border: 1px solid var(--color-secondary)!important;*!
    outline: 1px solid var(--color-secondary)!important;
}*/

/*.overview-button-border::after {
    content:'';
    position: absolute;
    inset:0;
    border-radius:2px;
    pointer-events:none!important;
}*/

@media(min-width:576px) {
    .overview-custom-modal {
        max-width:350px;
    }
}


.notes-container {
    width: 70vw;
    height: 80vh;
    max-width:70vw;
    max-height: 60vh;
    overflow-y:auto;
    border: 2px solid grey;
}

#floatingCirclesG{
    position:relative;
    width:128px;
    height:128px;
    -moz-transform:scale(0.6);
    -webkit-transform:scale(0.6);
    -ms-transform:scale(0.6);
    -o-transform:scale(0.6);
    transform:scale(0.6);
}

.f_circleG{
    position:absolute;
    background-color:#FFFFFF;
    height:23px;
    width:23px;
    -moz-border-radius:12px;
    -moz-animation-name:f_fadeG;
    -moz-animation-duration:1.04s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:normal;
    -webkit-border-radius:12px;
    -webkit-animation-name:f_fadeG;
    -webkit-animation-duration:1.04s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -ms-border-radius:12px;
    -ms-animation-name:f_fadeG;
    -ms-animation-duration:1.04s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:normal;
    -o-border-radius:12px;
    -o-animation-name:f_fadeG;
    -o-animation-duration:1.04s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:normal;
    border-radius:12px;
    animation-name:f_fadeG;
    animation-duration:1.04s;
    animation-iteration-count:infinite;
    animation-direction:normal;
}

#frotateG_01{
    left:0;
    top:52px;
    -moz-animation-delay:0.39s;
    -webkit-animation-delay:0.39s;
    -ms-animation-delay:0.39s;
    -o-animation-delay:0.39s;
    animation-delay:0.39s;
}

#frotateG_02{
    left:15px;
    top:15px;
    -moz-animation-delay:0.52s;
    -webkit-animation-delay:0.52s;
    -ms-animation-delay:0.52s;
    -o-animation-delay:0.52s;
    animation-delay:0.52s;
}

#frotateG_03{
    left:52px;
    top:0;
    -moz-animation-delay:0.65s;
    -webkit-animation-delay:0.65s;
    -ms-animation-delay:0.65s;
    -o-animation-delay:0.65s;
    animation-delay:0.65s;
}

#frotateG_04{
    right:15px;
    top:15px;
    -moz-animation-delay:0.78s;
    -webkit-animation-delay:0.78s;
    -ms-animation-delay:0.78s;
    -o-animation-delay:0.78s;
    animation-delay:0.78s;
}

#frotateG_05{
    right:0;
    top:52px;
    -moz-animation-delay:0.91s;
    -webkit-animation-delay:0.91s;
    -ms-animation-delay:0.91s;
    -o-animation-delay:0.91s;
    animation-delay:0.91s;
}

#frotateG_06{
    right:15px;
    bottom:15px;
    -moz-animation-delay:1.04s;
    -webkit-animation-delay:1.04s;
    -ms-animation-delay:1.04s;
    -o-animation-delay:1.04s;
    animation-delay:1.04s;
}

#frotateG_07{
    left:52px;
    bottom:0;
    -moz-animation-delay:1.17s;
    -webkit-animation-delay:1.17s;
    -ms-animation-delay:1.17s;
    -o-animation-delay:1.17s;
    animation-delay:1.17s;
}

#frotateG_08{
    left:15px;
    bottom:15px;
    -moz-animation-delay:1.3s;
    -webkit-animation-delay:1.3s;
    -ms-animation-delay:1.3s;
    -o-animation-delay:1.3s;
    animation-delay:1.3s;
}

@-moz-keyframes f_fadeG{
    0%{
        background-color:#000000}

    100%{
        background-color:#FFFFFF}

}

@-webkit-keyframes f_fadeG{
    0%{
        background-color:#000000}

    100%{
        background-color:#FFFFFF}

}

@-ms-keyframes f_fadeG{
    0%{
        background-color:#000000}

    100%{
        background-color:#FFFFFF}

}

@-o-keyframes f_fadeG{
    0%{
        background-color:#000000}

    100%{
        background-color:#FFFFFF}

}

@keyframes f_fadeG{
    0%{
        background-color:#000000}

    100%{
        background-color:#FFFFFF}

}


.close {
    outline:none!important;
}

.whitebg {
    background-color: white;
}

.btn-send:hover,
.btn-send:focus {
    color: #212529!important;
    background-color: #6cb2eb!important;
    border-color: #6cb2eb!important;
}

.overview-button:active {
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
    -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
    box-shadow: inset 0px 0px 5px #c1c1c1;
    outline: none;
}

.ids-input-textarea {
    height: max(35px, 4.055vh)!important;
    resize:none;
    overflow:hidden;
    cursor:pointer;
}

.ids-input-adress-modal {
    min-height: 200px;
    max-height: 375px;
    resize:vertical;
}

.ids-image-container {
    background-color: #f5f5f5!important;
}

.settings-input-field {
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.25);
}

.mail-settings-field:focus-visible,
.mail-settings-field:focus,
.settings-input-field:focus-visible,
.settings-input-field:focus
{
    outline: var(--color-primary) solid 2px!important;
    outline-offset: -2px!important;
}

/* Hover bei Menüpunkten in Felddefinitionen */
[data-advanced-fieldname]:hover {
    color: var(--color-primary-light);
}

.user-settings-form {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    padding: 0!important;
}

.infobutton:hover {
    color:var(--color-primary)!important;
}

.ids-transition {

}

/* Login Page  */

.login-form {

    margin: auto;
    /*padding-bottom:50px;*/
    /*background-color:lightgrey;*/
    background-color: #f8f9fa;
    /*background-color: #eceef1;*/
    /*background-color: #ededed;*/
    /* old
    background-color: #e9e9e9;*/
    /*min-width:500px;*/
    min-width:450px;
    max-width:650px;
    min-height: min(650px, 100%);
    width:20vw;
    height:75vh;
    height:75dvh;
    max-height:850px;
    border-radius:6px;
    overflow:hidden;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    /*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);*/
    /*border: 1px solid grey;*/
    position:relative;
   /* outline: 1px solid rgba(255, 255, 255, 0.125);*/


}

.login-form.custom {

    min-width: 750px!important;
    max-width: 950px!important;

}

@media(max-height:720px) {
    .login-form-container.custom {
        padding:0!important;
    }
    .login-form.custom {
        min-width:100%!important;
        max-width:100%!important;
    }
}

.login-form.signature {

  /*  min-width:450px;
    max-width:650px;
    min-height: min(650px, 100%);
    width:30vw;
    height:85vh;
    height:85dvh;
    max-height:850px;*/

}

.login-form-footer {
    position:absolute;
    bottom:0;
    height:35px;
    background-color:var(--color-secondary);
    width:100%;
}

.login-company-input {
    /*padding-right:120px!important;*/
    padding-right:45px!important;
}


/* Dashboard */

.dashboard-header {
    height:20vh;
    display:flex;
    align-items: center
}

.dashboard-menu {

}

.account-image-dashboard {
    width: 100px!important;
    height: 100px!important;
}

/* New */

.record-image-container {
    width: 15.62vw;
    height:50.16vh;
    position:relative;
}

.side-buttons-container {
    position:absolute;
    /*right:-1.8rem;*/
    left:-1.8rem;
    top:1px;
}

.ids-image-side-button {
    border: none;
    border-radius: 2px;
    outline: 1px solid rgba(0,0,0, 0.15);
    width:28px;
    height:28px;
}

.ids-image-side-button:hover:not([disabled]),
.ids-image-side-button:focus-within:not([disabled]),
.ids-image-side-button:focus:not([disabled]),
.ids-image-side-button:focus-visible:not([disabled]) {
    outline: 1px solid var(--color-primary);
}

.caret-text {
    font-size: clamp(1.5rem, 1.97vh + 0.5rem, 2.5rem);
   /* font-weight:500;*/
}


.caret-link:after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    background-color: var(--color-primary);
    transition: transform 0.3s;
}

.caret-link:hover.caret-link:after {
    transform: scaleX(0.65);
}

/* + Button  */
.caret-link-2:hover {
    color: var(--color-caret-link)!important;
    transform: scale(110%);
}


/*.ids-record-input:invalid {

}*/

.ids-record-input {
    height:max(35px, 4.055vh);
    font-size: clamp(1rem, 0.970vh + 0.5rem, 1.5rem)!important;
}

.form-label-group input:not(:placeholder-shown) ~ label, .form-label-group input:focus ~ label, .form-label-group textarea:not(:placeholder-shown) ~ label, .form-label-group textarea:focus ~ label, .form-label-group select ~ label {
    font-size: clamp(1rem, 0.970vh + 0.5rem, 1.5rem)!important;
}

.ids-record-input + label {
    overflow:hidden;
}

.ids-newrecord-ctrlbutton-container {
    bottom: 5%;
    padding: 0 2.1vw 0 0;
    margin: 0;
    pointer-events: none;
    visibility: visible;
    position: absolute;
}

.ids-cardtype-select {
    height:4.90vh;
    font-size: clamp(1.25rem, 1.373vh + 0.5rem, 1.9rem);
}

.ids-cardtype-container {
    max-width:375px!important;
}

.ids-camera-button {
    font-size:clamp(0.90rem, 0.57vh + 0.5rem, 1.25rem);
    width:100%;
    min-width:85px!important;
    display:flex;
    justify-content: center;
    align-items:center;
    background-color:white;
  /*  box-shadow: 0px 1px 3px 0px rgb(61,61,61);*/
   /* height:42px;*/


}

@media(min-width: 1500px) {
    .ids-camera-button {
        padding:8px 12px;
    }
}

.ids-card-description-label {
    font-size:clamp(1rem, 1.373vh + 0.5rem, 2rem);
    color: var(--color-text-easier-black);
    font-weight:450;
}

.control-button-placeholder {
    display:none;
    margin-top:1rem;
    margin-bottom:1rem;
}

.ctrl-button-span {
    margin:0;
    font-size:clamp(1rem, 1.174vh + 0.5rem, 1.5rem) !important;
    line-height:3.7vh;
    width:75%;
    text-align:center;
}

.ctrl-button-icon {
    font-size:clamp(1.3rem, 1.174vh + 0.5rem, 1.5rem) !important;
}

.ids-navbar {
    display:none;
}

.ids-navbar-logo {
    width:auto!important;
    order: 2;
    height:clamp(78px, 12vh, 120px);
    display:flex;
    justify-content: start;
    align-items: center;
}

.ids-navbar-toggler {
    order:1;
}

.ids-user-account {
    order:3;
    position:relative;
    cursor:default!important;
}

.ids-navbar-toggler,
.ids-navbar-toggler:focus,
.ids-navbar-toggler:hover {
    outline:none;
    border:none;
}

.ids-navbar-mobile {
    display:none;
    padding-top:1rem;
    padding-bottom:1rem;
}

.ids-navbar-mobile[data-expanded="true"] {
    display:flex;
    flex-direction: column;
    gap: 1rem;
    background-color: rgba(83, 86, 90, 0.95);
    z-index:9999;
    width: 100%;
    position:fixed;
    border-top: 2px solid var(--color-primary);
}

.ids-navlink-mobile:hover,
.ids-navlink-mobile:focus,
.ids-navlink-mobile:active{
    color: white!important;
}

.ids-navlink-mobile {
    font-weight:500;
}

.ids-mobile-navigation-active {
    color:white!important;
    text-decoration: underline!important;
    font-weight: bold!important;
}

.layout-menu-margin {

}

.layout-label-margin {

}

.imgcrop-button {
    min-width:85px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    font-size:clamp(1rem,  0.87vh + 0.5rem, 1.6rem);
}

.custom-popup-location {
    width: 36%;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    min-width:235px;
}

.btn-numbering-ctrl {
   /* line-height:1.35!important;*/
    padding:0!important;
    line-height:0.5!important;
   /* margin-left:0.45rem;
    margin-right:0.45rem; */
}

.btn-numbering-ctrl:first-of-type {
    margin-left:0;
}

.btn-numbering-ctrl:last-of-type {
    margin-right:0;
}

/* Settings */

.settings-header-gap {
    gap:1.75rem;
}

.no-click {
    pointer-events: none!important;
    touch-action:none!important;
}

.radio-container {
    display:flex;
    align-items: baseline;
    gap:0.5rem;
}

.field-defs-modal-buttons {
    position:absolute;
    top:85%;
    right:5%;
    display:flex;
}

.userlist-search-gap {
    gap:0;
}

.img-dialog-control-button {
    width:18px;
    height:18px;
}

.overview-stats-container {
    max-width:80% !important;
    margin-left: 0!important;
    margin-right: 0!important;
}

.overview-stats-secondary {
    font-size: clamp(13px, 0.862vh + 0.5rem, 16px)!important;
    padding:0;
}

.dashboard-stats, .overview-stats-secondary {
    color:var(--color-card-stats)!important;
    /*color: var(--color-secondary)!important;*/
    font-weight:bold;
}

.overview-stats-primary {
    font-size: clamp(22px, 2.8vh + 0.5rem, 27px)!important;
}

.footer-stats {
    font-size: clamp(0.75rem, 0.82vh + 0.5rem, 1.25rem);
   /* font-weight:bold;
    color:var(--color-card-stats);*/
}

.footer-copyright-text {
    font-size:clamp(12px, 0.57vh + 0.5rem, 18px);
}

.footer-text {
    color: #6c757d !important;
}



.footer-bg {
    background-color: var(--color-component-panel)!important;
}

.footer-border-top {
    border-top:2px solid var(--color-primary);
}

.ids-decoration-label
{
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 3px;
}

.imgLayout,
.extImgLayout {
    /*  border-radius: var(--card-border-radius)!important;*/
    /* box-shadow: 10px 10px 20px rgb(0 0 0 / 19%), 10px 10px 6px rgb(0 0 0 / 23%)!important;*/
    /*  box-shadow: 8px 8px 20px rgb(0 0 0 / 19%), 8px 8px 6px rgb(0 0 0 / 23%)!important;*/
    /*    box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.75);*/
    /* box-shadow: 3px 3px 5px rgba(128, 128, 128, 0.95);*/

    /* 3rd parameter blur is half the value of box-shadow */
    filter: drop-shadow(3px 3px 2.5px rgba(128, 128, 128, 0.95));
}

.imgLayout:hover,
.imgLayout:focus {
    outline: 2px solid var(--color-primary);
    outline-offset:-2px;
    /*outline: 2px solid rgb(0 123 255 / 0.5);*/
/*    box-shadow: 10px 10px 20px rgb(0 0 0 / 19%), 10px 10px 6px rgb(0 0 0 / 23%)!important;*/
    box-shadow: 3px 3px 5px rgba(128, 128, 128, 0.95), 8px 8px 6px rgb(0 0 0 / 23%);
    filter:none!important;
}

.imgLayout[data-preview-type="1"]:hover,
.imgLayout[data-preview-type="1"]:focus {
    border-radius:1.280vh!important;
}

.imgLayout[data-preview-type="2"]:hover,
.imgLayout[data-preview-type="2"]:focus {
    border-radius:1.1vh!important;
}

.imgLayout.ids-layout {

    object-fit: contain!important;
    max-width: 100%;
    height: auto;
    cursor: zoom-in;
    border-radius: var(--border-radius-preview);

}

.imgLayout.ids-layout.overview {
    max-height: 25.92vh;
}

.imgLayout.ids-layout.newcard {
    max-height: 25.92vh;
}



.image-aspect-ratio:hover:not(.ids-layout-no-image) {
    /*outline: 2px solid var(--color-primary);
    outline-offset: -2px;*/
}



.form-control {
    box-shadow:none!important;
}

/* Login-Page */

.form-control:focus:not(.layoutInput),
.form-control:focus-within:not(.layoutInput),
.form-control:focus-visible:not(.layoutInput) {
   /* border-color: var(--color-input-selection)!important;*/
    border-color:transparent;
    outline:1px solid var(--color-input-selection);
    outline-offset: -1px;
    /*
    outline: 2px solid rgb(92 126 163) !important;
    */


}

.form-control.layoutInput:focus,
.form-control.layoutInput:focus-within,
.form-control.layoutInput:focus-visible,
.custom-select:focus,
.custom-select:focus-within,
.custom-select:focus-visible {
    border-color:transparent;
    outline-offset: -1px;
    outline: 2px solid rgb(92 126 163);
}

/*
.form-control:hover {
    border-color: rgba(0,0,0,0.25)!important;
}*/


.overview-table {
    cursor: pointer;
    white-space: nowrap;
    font-size: 14px;
    border-bottom:1px solid lightgrey!important;
}

.overview-table td, .overview-table th {
  /*  line-height:23px; */
}

.overview-table tr {
   line-height:23px;
}

/*.overview-table tr:hover {
    background-color: var(--color-table-bg-secondary);
    color:white;
}*/


.overview-filter-button {
    max-width:160px!important;
    min-width:125px!important;
    width:125px;
    height:31px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-primary);
 /*   margin-top:0.5rem;*/
}

.overview-filter-button:not([disabled]):not(:disabled):hover,
.btn-data-print:not([disabled]):not(:disabled):hover {
    filter: brightness(0.95);
}

@media(max-width: 992px) {
    .btn-data-print {
        display:none!important;
    }
}

.overview-edit-button {
    min-width:125px;
    width: 125px;
    height:31px;
    max-width:160px!important;
    display:flex;
    align-items:center;
    border-radius:4px;
    background-color:white;
   /* margin-top:0.5rem;*/
}

.overview-edit-button:not(:disabled):not([disabled]):hover,
.overview-edit-button:not(:disabled):not([disabled]):focus,
.overview-edit-button:not(:disabled):not([disabled]):focus-within {
    color: #212529;
    background-color: #e2e6ea;
}

.overview-control-button {
    min-width:125px;
    width: 125px;
    height:31px;
    max-width:160px!important;
    display:flex;
    align-items:center;
    border-radius:4px;
    transition: none!important;
}

.overview-filter-button > span,
.overview-edit-button > span ,
.overview-control-button > span {
    font-size:11pt;
   /* padding-left:10px;*/
    font-weight:450;
}

.overview-edit-button > i,
.overview-control-button > i {
    margin-left:auto;
}


.overview-filter-container {
    width: 375px;
    height:auto;
    max-height:100dvh;
    overflow-y:auto;
    scrollbar-gutter:stable;
    padding: 0.35rem 0.35rem 0.35rem 0.75rem;
}


.logo-image-navbar {
    max-height: min(85%, 360px);
    min-height:50%;
}

.overview-pagination-label {
    display:inline;
    float:left;
    margin:0;
    font-size:clamp(19px, 1.174vh + 0.5rem, 23px);
}

.overview-pagination-label-nopages {
    display:inline;
    margin:0;
    margin-left:auto;
    font-size:clamp(19px, 1.174vh + 0.5rem, 23px);
    align-self:center;
}

/*.new-card-form {
    display:flex;
    flex-direction: column;
    flex-wrap:wrap;
    max-height:70vh;
}*/


.ids-login-bg {
   /* background-image:linear-gradient(#8daee3,white);*/
}

.ids-login-bg-new {
    /*background-image: url(/storage/ids_bg_new_2.svg);*/
    background-image:linear-gradient(#8daee3,white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(75,75,75, 1);
    opacity:0.75;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.ids-login-footer-text {
    color: #e9e9e9!important;
}

.ids-control-button {

    min-width: 135px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0, 0.6);

    max-height: 48px;
    /* text-transform: uppercase; */
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    transition: all 0.2s ease;

    flex: 1;


}

.control-button-container {
    container-type: inline-size;
    container-name: control-button-container;
}



@container control-button-container (max-width: 120px) {

    .ctrl-button-icon {
        display:none!important;
    }

    .ids-control-button {
        display:block!important;
    }

    .ids-control-button:first-of-type {
        margin-left:15px;
    }

}

.ids-camera-button-container {
    container-type: inline-size;
    container-name: ids-camera-button-container;
}

@container ids-camera-button-container (max-width:133px) {
    .img-dialog-control-button {
        display:none!important;
    }
    .ids-camera-button > span {
        width:100% !important;
    }
}

.userlist-search-button {
    max-width: 250px;
    width: 45%!important;
    min-width:150px;
}

.new-user-dialog {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width:1140px;
}

.overview-send-button-container {
    min-width:100px!important;
    padding-right:2.5px!important;
}

.overview-delete-button-container {
    min-width:100px!important;
    padding-left:2.5px!important;
}

.overview-send-button {
    min-width:90px;
    max-width:140px;
    display:flex;
    align-items: baseline;
    justify-content: center;
    gap:5px;
}

.overview-delete-button {
    min-width:90px;
    max-width:140px;
    display:flex;
    align-items: baseline;
    justify-content: center;
    gap:5px;
}

.overview-table-shadow-container > div {
   /* box-shadow: 2px 2px 3px rgb(128 128 128 / 75%);*/
    box-shadow: 2px 2px 3px rgb(128 128 128 / 35%);
}

.overview-table-container {
    border: var(--overview-table-border);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;

}

.overview-table-parent-container {
    --table-header-color: var(--color-secondary);
    height: 50vh;
    /*background:transparent;*/
    background: white;

  /*  border-bottom:1px solid #C1C3C4;*/
    /*border-top: 1px solid var(--table-header-color);*/

  /*  border: var(--overview-table-border);
    border-top-left-radius: var(--table-border-radius);
    border-top-right-radius: var(--table-border-radius);*/

    scrollbar-width: thin;
    scrollbar-color: rgb(73 80 87 / 70%) #e9ecef;

    overflow: auto!important;
}

/* Overview Table Scrollbar */

.overview-table-parent-container::-webkit-scrollbar,
.ids-table-scrollbar::-webkit-scrollbar,
.ids-custom-scrollbar::-webkit-scrollbar {
    width: 8px; /* vertical */
    height:8px; /* horizontal */
}


.overview-table-parent-container::-webkit-scrollbar-track,
.ids-table-scrollbar::-webkit-scrollbar-track,
.ids-custom-scrollbar::-webkit-scrollbar-track {
  /*  background: var(--scrollbarBG);*/
    background-color: #e9ecef;
    border-radius:inherit;
    border-color:inherit;
}
.overview-table-parent-container::-webkit-scrollbar-thumb,
.ids-table-scrollbar::-webkit-scrollbar-thumb,
.ids-custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(73,80,87, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  /*  border-radius:5px;*/
  /*  border: 1px solid var(--color-secondary);*/
    border:2px solid transparent!important;
    background-clip: content-box;
}

.overview-table-parent-container::-webkit-scrollbar-thumb:hover,
.ids-table-scrollbar::-webkit-scrollbar-thumb:hover,
.ids-custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(73,80,87, 0.5);
   /* background-color:red!important;*/
}

.navbar-dashboard {
    background: rgba(0,0,0,0.7);
}

.ids-layout-no-image {
    border: 1px dashed var(--color-soft-error)!important;
    cursor: not-allowed!important;
}

.ids-layout-no-image-helper {
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%);
    color:var(--color-soft-error);
}

.dropdown-arrow-buttons {
    outline:none;
    border: 1px solid grey;
}

.dropdown-arrow-buttons:hover, .dropdown-arrow-buttons:focus {
    outline:1px solid var(--floating-label-color);
    outline-offset: -1px;
}

.dropdown-arrow-buttons > i {
    color: var(--floating-label-color);
}

.customer-edit-list-button {
    display:grid;
    grid-template-columns: 20px auto;
    align-items:center;
    gap:10px;
}

.api-token-input {
    width:100%;
    padding-right:30px;
}

.api-button-container {
    position:relative;
    width:25ch;
}

.api-button-container > i {
    position:absolute;
    top:50%;
    right:5%;
    transform: translateY(-50%);
}

.api-button-container > i:hover {
    color: var(--color-primary) !important;
}

.import-container-2 {
    margin-top:20px;
    width:100%;
    min-height:300px;
/*    border:2px solid black;*/
    border: 1px solid rgba(0, 0, 0, 0.55);
    padding:15px;
    background-color: var(--bg-import);
    border-top-left-radius:4px;
    border-top-right-radius:4px;
}

.import-container-2-1 {
    margin-top:0;
    width:100%;
    /*border:2px solid black;*/
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-top:0;
    padding:15px;
    display:flex;
    background-color: var(--bg-import);
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.csvheadercontainer {
    overflow-x:auto;
    padding: 0.25rem 0.25rem 10px;
    background-color: var(--bg-import);
    margin-top:2rem;
    border: 1px solid rgba(0,0,0, 0.55);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    border-radius:4px;
}

.import-report-container, .import-overview-container, .import-image-preview-container {
    width:80vw;
    height:50vh;
   /* border:2px solid black;*/
    padding:15px;
    overflow-y:auto;
    background-color: var(--bg-import);
    border: 1px solid rgba(0,0,0, 0.55);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    border-radius:4px;
}

.import-landing-container {
    height: 50vh;
    width:95vw;
    margin-left:auto;
    margin-right:auto;
    background-color: var(--bg-import);
   /* border: 1px solid black;*/

    padding:15px;
    max-width:1200px;
    overflow-y:auto;
    padding-top:2rem!important;
    border-radius:4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    outline: 1px solid rgba(0,0,0, 0.25);
}

.import-file-label {
    padding-left:5px;
    cursor:pointer;
    color:var(--color-primary);
    font-weight:bold;
}

.import-file-label:hover,
.import-file-label:focus {
    text-decoration: underline;
}

@media(max-width:20em) {

    .external-form-elements-container {
        padding:1rem!important;
    }

}

/* 340px */
@media(max-width:21.25em) {
    .overview-pagination-container {
        flex-direction: column!important;
    }



}

/* 430px */
@media(max-width: 26.875em) {
    .mdc-pagination-container {
        flex-wrap:wrap;
    }

    .table-pagination .overview-pagination-label {
        flex-basis:100%;
    }

    .mdc-pageination-parent {
        margin-right:auto;
    }

    .table-pagination {
        gap:1rem!important;
        position:relative;
    }

    .table-pagination .overview-pagination-label {
        position: absolute;
        top: calc(0.3rem + 0.5rem);
        right: 0.5rem;
    }



}


/* 480px */
@media(max-width:30em) {

    .footer-copyright-text-container {
        font-weight:500;
    }

    /* Login Form */
    .login-form {
      /*  min-width: 100vw;*/
        min-width:100%;
        min-height: 100dvh;
        /*min-height: 200px;
        min-width: 200px;*/
        border-radius:0;
        margin:0!important;
        max-height:initial;
        overflow-y:auto;
        height:auto!important;
        width:auto!important;
        display:flex!important;
        flex-direction: column!important;
    }

    .login-form-footer {
        display:initial;
        margin-top:auto!important;
        position:initial!important;
        flex-shrink: 0;
    }

    .login-form-body {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .login-form-container {
        flex-direction: row !important;
        padding: 0;
    }

    .ids-certificate-upload-btn {
   /*     position: static !important;
        width: 100%;
        margin-top: 0.35rem;
        padding: 0.45rem;
        float: left;*/
    }

    .login-company-input {
        padding-right: 8px !important;
    }

    .login-company-input:not([aria-describedby]) + label {

    }

    .login-beta-info {
        top: 65% !important;
        right: -25px !important;
    }

    .dashboard-extra-text-container {
        display: none;
    }

    .account-image-dashboard {
        width:70px!important;
        height:70px!important;
    }


    .custom-popup-location {
        width: 100%;
        height:100%;
        top: 0;
        left:0;
        padding-left:0.75rem;
        padding-right:0.75rem;
        transform: translateX(0);
    }

    .overview-filter-container{
        /* vh => svh => dvh */
        height:100vh;
        max-height:100vh;

        height:100dvh;
        max-height:100dvh;
        width: 100vw;
        max-width:100vw;
        padding-bottom:0.5rem;
        padding-top:0.25rem;

    }

    .ids-navbar-logo {
        display:none!important;
    }



}

/* 560px */

@media(max-width: 35em) {

    .mdc-pagination-container {
        /*flex-basis: 100%;*/
    }

    .table-footer-selection-label {
      /*  margin-top:0.5rem;*/
    }

    .mdc-pageination-parent {
        margin-left:auto;
    }

}


/*  575px  */
@media(max-width:35.9375em) {
    .control-button-placeholder {
        height:200px!important;
    }
}

/* 768px - md  */
@media(max-width:48em) {

    .dashboard-header {
        height:15vh;
    }


    .ids-cardtype-container {
        max-width:450px!important;
    }

    .ids-cardtype-select {
        font-size: clamp(1.5rem, 0.864vh + 0.5rem, 1.9rem)!important;
    }

    .ids-camera-button {
        font-size:clamp(1rem, 0.57vh + 0.5rem, 1.5rem)!important;
        background-color: rgba(255,255,255, 0.35);
    }


    .ids-card-description-label {
        margin-top:1rem;
    }

    .layout-menu-margin {
        margin-left: 15px!important;
    }

    .layout-label-margin {

    }

    .userlist-search-gap {
        gap:0.5rem;
    }


    .navbar-dashboard {
        background: rgba(70,70,80,1)!important;
    }

}

@media(max-width:767px) {
    .footer-outside-row {
        margin: 1rem;
        gap:1rem;
    }
    .overview-image-container {
        justify-content: center;
    }
}

/* 800px */
@media(max-width: 50em) {

    /* Overview */

    .hamburger-button {
        display:none;
    }

    /* Dashboard */

    .imgNavigation {
        width: 32px;
        height: 32px;
    }

    .dashboard-menu {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
    }

    .ids-record-input {
        height: calc(1.5em + 0.75rem + 2px);
    }

    .ids-navbar {
        display:block;
    }

}


/* 960px */
@media(max-width:60em) {



}

/* 992 px - lg */
@media(max-width: calc(62em - 1px)) {

    .ids-cardtype-container {
        max-width:450px!important;
    }

    .app-gradient-bg {
        background-color: white;
        background-image: linear-gradient(#335099, #f8f9fa, white)!important;
        background-repeat: no-repeat;
    }

    .id-service-gradient-extern {
        background-position: 0 0;
        background-color: white;
        background-image: linear-gradient(#4e67a6, #f8f9fa, white)!important;
     /*   background-image: linear-gradient(#9299aa, #f8f9fa, #d4d7dd)!important;*/
        background-repeat: no-repeat;
    }

    .navbar {
        position: sticky!important;
        top: 0!important;
        z-index: 9999!important;
    }

    /* when changing ctrl buttons also need to change rule in layout-fields.blade.php at the top */

    .ids-newrecord-ctrlbutton-container {
        position:absolute;
        bottom:3rem!important;
        left:0!important;
    }

    .control-button-placeholder {
        display:block;
        height:50px;
        width:50px;
        margin-top:3rem;
        margin-bottom:3rem;
    }

    .ctrl-button-row {
        display:flex;
        flex-direction:row;
        gap:1rem;
    }

    .ids-ctrlbutton-col {
        position:static!important;
    }

    .ctrl-button-span {
        line-height:max(2.5rem, 5vh);
    }

    .record-image-container {
        width:auto;
        height:auto;
    }

    /* Edit Formula Field Button */
    .unlockButton {
        margin-left:15px;
    }

    .overview-stats-container {
        margin-left: auto!important;
        margin-right: auto!important;
    }

    .overview-stats {
        order:3;
        display:none;
    }

    .footer-stats-image {
        position:absolute;
        top:0;
       /* left:20%;*/
        transform: translateX(-50%);
    }

    .footer-copyright-text {
        font-size:clamp(14px, 0.57vh + 0.5rem, 18px);
    }

    .overview-search-button {
        width:100%;
    }

    .overview-filter-button {
        margin-left:auto;
        margin-right:auto;
    }

    .overview-edit-button {
        margin-left:auto;
        margin-right:auto;
    }

    .logo-image-navbar {
        max-height:85%;
        min-height:65%;
    }

    .footer-stats {
        font-size: clamp(1rem, 0.82vh + 0.5rem, 1.45rem);
    }

    .overview-width-image {
        margin-left:auto;
        margin-right:auto;
    }

    .overview-send-button {
        margin-left:auto;
    }

    .general-settings-container {
        gap:4rem!important;
    }

    .image-aspect-ratio > img {
        min-width: calc(300px * var(--Aspect-Ratio-Value));
    }

}

@media(max-width: 350px) {

    .arrowButtonContainer {
        width:100%;
    }

}

/* 567px - sm */
@media(min-width: 35.4375em) {
    .overview-filter-button {
        margin-right:0!important;
    }

    .overview-edit-button {
        margin-left:0!important;
    }

}

@media(min-width: 515px) {

    /* Filter + Bearbeiten Button Size + 30px margins */
    .overview-search-button {
        width:calc(100% - 280px);
    }

    .overview-filter-button {
        margin-top:0;
    }

    .overview-edit-button {
        margin-top:0;
    }

}

/* md 768 */

@media(min-width: 48em) {

    .overview-width-image {
        width:100%!important;
    }

}

/* 992px -  lg */
@media(min-width: 62em) {
    .ids-navbar-logo {
        order: 0;
        width:100%!important;
    }

    .overview-search-button {
    /*    width:auto;*/
        width:180px;
        transition: width 0.3s ease;
    }

    @media(prefers-reduced-motion: no-preference) {
        .dynamic-width.overview-search-button:focus-within {
            width: 260px;
        }
    }

    .overview-table-parent-container {
       /* height: 49vh;*/
       /* height: 52vh;*/
    }

    .extern-image-container {
        padding: 0!important;
      /*  min-height: 85vh!important;
        min-height: 85dvh!important;*/
       /* background-color:revert!important;
        border:none!important;*/
        box-shadow:none!important;
    }

    /* Scroll */
  /*  main.box-content {
        overflow-y:auto;
    }*/

}

/* 1200 px - xl */
@media(min-width: 75em) {

    .record-image-container {
        min-width: 235px;
    }



}

/* 1500 px - wide screens */

@media(min-width: 93.75em) {

}

/* 1600px - wide screens */

@media(min-width: 100em) {
    .overview-table-parent-container {
      /*  height: 62vh;*/
        height: 56vh;
    }
}

@media(max-width:70em) {

    .field-defs-modal-buttons {
        position:absolute;
        top:85%;
        left:50%;
        display:flex;
        transform: translateX(-50%);
    }

}

@media (min-width: 768px) {


    .gap-db-custom {
        gap: 1rem;
    }

    .dashboard-menu {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
    }

    .btn-numbering-ctrl {
       /* line-height:calc(15vh)!important;*/
    }



}


@media (min-width: 992px) {

    .dashboard-menu {
        margin-right: -15px;
        margin-left: -15px;
    }

    .custom-popup-location {
        min-width:500px;
    }

}




@media (min-width: 1200px) {

    .gap-db-custom {
        gap:0;
    }

}

.footer-sub-container {
    padding:10px;
}

/* specific media queries for footer */

@media (max-width: 350px) {
    .footer-stats-image {
        left:0!important;
    }

}

@media (min-width: 351px) {
    .footer-stats-image {
        left:10%!important;
    }
}

@media (min-width: 485px) {
    .footer-stats-image {
        left:20%!important;
    }
}

/* Typography */

.dashboard-extra-text {
    font-size: max(1rem, 1.45vw);
}

.dashboard-title-text {
    font-size: max(1.25rem, 1.7vw);
}

.footer-stats-holder {
    font-size: max(1.5rem, 1.85vw);
}


/* General */


.btn-numbering {
  /*  width:max(16px, 1.9791vw);
    height:max(16px, 4.0554vh);
    font-size:clamp(1.15rem, 1.09vh + 0.5rem, 1.55rem)!important;*/
    outline:none!important;
    box-shadow:none!important;
}

.btn-numbering-page {
    padding:0;
   /* min-width: min-content;
    margin-left: .25rem;
    margin-right: .25rem;*/
}

.placeholder {
    cursor:default!important;
}

.btn-numbering:not(.placeholder):not(.btn-numbering-page):hover:enabled {
   /* transform: scale(1.1);*/
}

.btn-numbering-page:not(.placeholder):not(.nc-numbering-active-item):hover,
.btn-numbering-page:not(.placeholder):not(.nc-numbering-active-item):focus {
   /* text-decoration: underline;*/
    color:var(--color-primary);
}

.btn-numbering-page.nc-numbering-active-item:hover {
    text-decoration: underline;
    color: var(--color-primary-light);
}

/* Für Input Type Passwort bei Edge / IE */
::-ms-reveal {
    display: none;
}

.settings-option,
.settings-option-mada {
    text-decoration: none;
    color:black;
    padding:0!important;
    display:flex;
    align-items:center;
    gap:1rem;
}

.settings-option {
    --svg-fill: var(--color-primary);
}

.settings-option-mada {
    --svg-fill: var(--color-login-primary);
}

.settings-option > svg,
.settings-option-mada > svg {
    width:20px;
    height:20px;
    fill: var(--svg-fill)!important;
}

.settings-option:hover,
.settings-option:focus {
    color: var(--color-primary);
}

/*.settings-option > img,
.settings-option-mada > i {
    transition: transform .5s ease-in-out;
}

.settings-option:hover > img,
.settings-option-mada:hover > i {
    transform: rotate(180deg);
}*/

.settings-option:focus,
.settings-option-mada:focus {
    outline: none!important;
}

.settings-option-mada:hover,
.settings-option-mada:focus {
    color: var(--color-login-primary);
}

.settings-info-text-container {
    margin-top:1rem;
    padding:0.75rem;
    width:50%;
    height:100%;
    border:2px solid darkgrey;
    display:flex;
    flex-direction: column;
    gap:1rem;
    text-align:center;
    background-color: white;
    box-shadow:0 10px 10px black;
}

.settings-info-text-header {
    color: var(--color-secondary);
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
}

.mobile-extern-container {
    min-width:50vw!important;
}

@media only screen and (min-width:1025px) {
    .mobile-extern-container {
        max-width:40vw!important;
        min-width:40vw!important;
    }
}

.device-option-button {
    display:flex;
    align-items:center;
    justify-content: center;
}

.device-option-button > i {
    width:25px!important;
}

.video-loading-background {
    background: black;
}

.settings-form {

    background-color: lightgrey;
    color: black;
    /*width: 80vw;*/
    height: 65vh;
    border: 1px solid grey;
   /* margin-left: auto;
    margin-right: auto; */
    overflow-y: auto;
    padding:35px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

}

.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    padding: 0;
    min-width:100px;
    width:250px;
    box-shadow: 0 4px 8px 3px rgba(0,0,0,0.5);
    border-radius:4px;
}

.custom-menu li {

    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
    transition: all .3s ease;
    user-select: none;
    font:inherit;
    padding-left: 25px;
    padding-right:35%;
    font-size:0.90rem;
    display:grid;
    grid-template-columns: 25px auto;
    gap:5px;
    align-items:center;
   /* border-bottom: 0.3px solid lightgrey; */
}

.custom-menu li > i {
    font-size: 1.15em;
   /* text-align:center;*/
}


.custom-menu li:hover,
.custom-menu li:focus {
    background-color: lightgrey;
}

.settings-fielddef-table-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.settings-fielddef-table-icon:hover {
    transform: scale(1.05, 1.05);
   /* animation: rotate-cogwheel-buttons 1s linear infinite;*/
}

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

 input[required].layoutInput + label::after {
    content: '*';
    color: red;
}

select[required] + label::after,
input[required].inputCustom + label::after {
    content: '*';
    color: red;
}

.required-label-wo-input::after {
    content: '*';
    color: red;
}

textarea[required] + label::after {
    content: '*';
    color: red;
}

input[required].settingsInput + label::after {
    content: '*';
    color: red;
}

/*[data-false-required]::after {
    content: '*';
    color:red;
}*/

[data-false-required] + label::after {
    content: '*';
    color:red;
}

.settings-help-text {
    font-size:18px;
}

.settings-help-text-bold {
    font-size:18px;
    font-weight:bold;
}

span.navbar-toggler-icon {
    color:black;
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E);
}

.navbar-toggler-icon-white {
    background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e) !important;
}

.navbar-toggler-icon-white {
    background-image: url(../images/icons/HamburgerMenuWhite.svg)!important;
}

.navbar-toggler-icon-white[data-expanded="true"] {
    background-image: url(../images/icons/NavbarCloseWhite.svg)!important;
}


.hamburger-button {
    border-color: rgba(0,0,0,.1)!important;
    border-width: 2px!important;
    outline:none!important;
}

.hamburger-button:hover, .hamburger-button:focus {
    border-color: var(--color-primary)!important;
    border-width: 2px!important;
}

.settings-button {
    border:0!important;
    padding:3px;
}

.settings-button:hover, .settings-button:focus {
   /* outline: 2px solid var(--color-primary)!important;*/
    outline:none!important;
    color:var(--color-primary)!important;
}


.fieldset-custom {

    display: block!important;
    margin-inline-start: 2px!important;
    margin-inline-end: 2px!important;
    padding-block-start: 0.35em!important;
    padding-inline-start: 0.75em!important;
    padding-inline-end: 0.75em!important;
    padding-block-end: 0.625em!important;

  /*  border-width: 2px!important;
    border-style: groove!important;
    border-color: threedface!important;
    border-image: initial!important;*/

    border: 1px solid rgba(0,0,0, 0.25);
    border-radius: 4px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);

}

@media(min-width: 768px) {
    .fieldset-custom {
        /*min-inline-size: min-content!important;*/
        width:100%;
    }
}

.legend-custom {
    font-size: 1.25rem!important;
    margin-bottom: 0!important;
    width:auto!important;
}

.multiselect-container {
    width: 100% !important;
}

[data-toggle="collapse"] .fa:before {
    content: "\f139";
}

[data-toggle="collapse"].collapsed .fa:before {
    content: "\f13a";
}

.chevron-icon-filter {
    display:block;
    margin-left:auto;
    width:30px;
}

.chevron-container-filter {
    display:flex;
    align-items:baseline;
}

.filter-topic {
    /*padding-top:5px;
    padding-bottom:5px;*/
    padding-top:0.5rem;
    padding-bottom:0.5rem;
}

.filter-input-date::-webkit-calendar-picker-indicator {
    margin-left: 0!important;
}

.toast {
    background-color: rgba(255, 255, 255, 0.95)!important;
}

.ids-table-row-selected[data-sent="1"] {
    background-color: var(--color-data-send)!important;
}

.ids-table-row-selected[data-error="1"] {
    background-color: #c82333 !important;
}

.ids-table-row-selected > td > span {
    color:white!important;
}

.ids-table-row-selected > td {
    color:white!important;
}

/*.notification-badge-db {
    position: absolute;
    top: 5px;
    right: 15px;
    padding: 3px 10px;
    border-radius: 50%;
    background: var(--color-not-valid);
    color: white;
}*/

/*.notification-badge {
    position: absolute;
    top: 5px;
    right: 10px;
    padding: 2px 8px;
    border-radius: 50%;
    background: var(--color-not-valid);
    color: white;
}*/

.notification-badge-db {
    position: absolute;
    right: 1.2em;
    top: 0.5em;
    min-width: 1.8em;
    height: 1.8em;
    border-radius: 0.8em;
    /* border: 0.05em solid white; */
    background-color: var(--color-not-valid);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    color: white;
    padding:0.25rem;
}

.notification-badge {
    position: absolute;
    right: 1em;
    top: 0.5em;
    min-width: 1.6em;
    height: 1.6em;
    border-radius: 0.8em;
    /* border: 0.05em solid white; */
    background-color: var(--color-not-valid);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    color: white;
}

.notification-span {
    padding-left:5px;
    color:var(--color-not-valid);
}

.unlockButton {
    cursor:pointer;
    color:var(--color-primary);
}

.image-aspect-ratio {
    aspect-ratio: var(--Aspect-Ratio-Value);
}



.logo-image {
    cursor:pointer;
}


table.dataTable thead .sorting_asc {
    /*background-image: url(../images/sort_asc.svg)!important;*/
    position: relative;
    background-image:none!important;
}

table.dataTable thead .sorting_desc {
   /* background-image: url(../images/sort_desc.svg)!important;*/
    position: relative;
    background-image:none!important;
}

table.dataTable thead .sorting_asc::after {
    content: '';
   /* position:absolute;
    right:5px;
    bottom:50%;*/
    position:relative;
    left:5px;
    transform: translateY(-50%);
    display: inline-block;
    height: 0;
    width: 0;
    border-style: solid;
    border-color: transparent;
    cursor: pointer;
    border-width: 0 5px 8px;
    border-bottom-color: var(--color-primary);
}

table.dataTable thead .sorting_desc::after {
    content: '';
 /*   position:absolute;
    right:5px;
    top:50%;*/
    position:relative;
    left:5px;
    transform: translateY(50%);
    display: inline-block;
    height: 0;
    width: 0;
    border-style: solid;
    border-color: transparent;
    cursor: pointer;
    border-width: 8px 5px 0;
    border-top-color: var(--color-primary);
}

#data-table > thead > tr > th {

   /* border-bottom:1px solid #C1C3C4!important;*/
   /* border-bottom:2px solid var(--color-primary);*/
    /* Damit mit TDs aligned sind */
    /*padding-left:10px!important;*/
  /*  border-bottom: 1px solid var(--table-header-color);*/
    border-bottom: 1px solid #b5b5b5;

    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    /* color: #b0bec5; */
    color: var(--color-secondary);

   /* background-color: #2f3540;
    color: #b0bec5;*/

}

.ids-table-header-border {
    border-bottom:2px solid var(--color-primary);
}

.settings-table {
    line-height:20px;
}

#data-table {
   /* border-collapse: collapse!important; */
}

table.dataTable thead .sorting:not(.sorting_asc):not(.sorting_desc) {
    background-image: none!important;
}

.overview-table-status-success {
    color:green;
    font-weight:bold;
}

.overview-table-status-failed,
.overview-table-status-error {
    color:var(--color-soft-error);
    font-weight:bold;
}

.overview-table-status-pending {
    color:dodgerblue;
    font-weight:bold;
}

.overview-table-status-terminated {
    color:var(--color-link-warning);
    font-weight:bold;
}


@media (prefers-reduced-motion: no-preference) {
    .filter-open {
        animation:fadeinfilter .5s;
    }

    .filter-close {
        animation: fadeoutfilter .5s;
    }
}


@media(min-width: 768px) {
    @keyframes fadeinfilter {
        from {
            opacity:0.5;
            top:45%;
        }
        to {
            top:50%;
            opacity:1;
        }
    }

    @keyframes fadeoutfilter {
        from {
            opacity:1;
            top:50%;
        }
        to {
            opacity:0;
            top:45%;
        }
    }
}

@media (prefers-reduced-motion: no-preference) {

    .dialog-bg-opacity-open-animation {
        animation: dialogopacityopen .5s ease-in-out;
    }

    .dialog-bg-opacity-close-animation {
        animation: dialogopacityclose .5s ease-in-out;
    }

}

@keyframes dialogopacityopen {
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

@keyframes dialogopacityclose {
    from {
        opacity:1;
    }
    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    .custom-mada-image-fadein {
        animation: fadeinimagedialog .5s;
    }

    .custom-mada-image-fadeout {
        animation: fadeoutimagedialog .5s;
    }

}


@media(min-width: 768px) {

    @keyframes fadeinimagedialog {
        from {
            opacity:0.5;
            top:15%;
        }
        to {
            top:20%;
            opacity:1;
        }
    }

    @keyframes fadeoutimagedialog {
        from {
            opacity:1;
            top:15%;
        }
        to {
            top:10%;
            opacity:0;
        }
    }

}


.dialog-shadow {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

.crop-dialog-shadow {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.crop-header {
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
}

.crop-preview-box {
    width: 100%!important;
    background: #f8f9fa;
    border: 1px solid #ccc;
    overflow: hidden!important;
    border-radius: 4px;
}

.overview-filter {
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
}

.user-dialog {
    position: absolute;
    top: 0;
    left: 0;
}

@media(min-width:768px) {
    .user-dialog {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}



.number-input-wo-arrows {

    /* Firefox */
    -moz-appearance: textfield;

}

.number-input-wo-arrows::-webkit-outer-spin-button, .number-input-wo-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.overview-modal-primary-btn {
    display:flex;
    align-items: baseline;
   /* justify-content: space-evenly; */
}

.overview-modal-primary-btn > * {
    margin-right:auto;
}

.account-image {
    transition: fill .35s ease, transform .5s;
    clip-path: circle(50% at 50% 50%); /* prevents hover on corners of the circle */
}

.account-image:hover,
.account-image:focus,
.account-image:focus-visible,
.account-image:focus-within {
    fill:var(--color-account-menu-active)!important;
    cursor:pointer;
    outline: none;
}

.account-image-color {
    fill:lightgrey;
}

.account-image-color.active {
    fill:var(--color-account-menu-active) !important;
}

label.capslock {
    color:var(--color-soft-error) !important;
    font-weight: bold;
}

.showErrorLogLink {
    display:none;
    align-self:center;
    margin-top:0.5rem;
    text-decoration: none;
    color: #007bff!important;
}

.showErrorLogButton {
    display:none;
    align-self:center;
    margin-top:0.5rem;
    background: none!important;
    border: none;
    padding: 0!important;
    /*optional*/
    font-family: inherit;
    /*input has OS specific font-family*/
    /*color: #007bff!important;*/
    color: var(--color-soft-error);
    cursor: pointer;
    outline:none!important;
}

.showErrorLogButton:hover,
.showErrorLogButton:focus
{
    outline:none!important;
    text-decoration: underline;
}

.showErrorLogLink:visited {
    color: inherit;
}

.report-container {
    max-height: 65vh;
    overflow-y: auto;
}

.color-soft-error {
    color: var(--color-soft-error);
}

.error-log-th {
    padding-bottom:0.25rem;
    border-bottom: 1px solid grey;
}

.footer-copyright-text-container {
    padding-top:0.5vh;
}

@media(max-width: 1280px) {
    footer {
        padding-top: 0.25rem!important;
    }

    .footer-copyright-text-container {
        padding-top:0!important;
    }
}

.custom-data-table-header {
    max-width:30ch;
    overflow:hidden;
    text-overflow: ellipsis;
    padding-top:0.35rem!important;
    padding-bottom:0.35rem!important;
    text-align: left;
}

.custom-data-table-header {
    padding-left: calc(0.35rem + 10px)!important;
    padding-right: calc(0.35rem + 10px)!important;
}

th.custom-data-table-header {
    max-width:300px;
    text-overflow: clip;
}


.id-service-primary {
    color: var(--color-primary);
}

.settings-button-link {
    cursor:pointer;
}

.settings-button-link:hover,
.settings-button-link:focus {
    color: var(--color-primary);
}

.settings-button-alternate {
    outline:none!important;
}

.settings-button-alternate:hover,
.settings-button-alternate:focus {
    color: var(--floating-label-color)!important;
}

.settings-address-input {
    min-width:175px!important;
    max-width:175px!important;
}

.id-service-table-sticky {
    border-collapse: separate!important;
    border-spacing: 0!important;
}

.id-service-table-sticky-header {
    position:sticky;
    top:0;
    background-color: white;
}

table.id-service-table-sticky > tbody > tr:first-child > td {
    border-top:none!important;
}

.ids-certificate-upload-btn {

    position:absolute;
    right:0;
    top:0;
    height:100%;
   /* border:1px solid lightgrey; */
    border-color:transparent;
    outline:none!important;
    /*background-color:rgb(233,236,239);*/
    background-color: var(--color-login-primary);
    color:white;
    width:40px;
    border-bottom-right-radius:4px;
    border-top-right-radius:4px;
    transition: all 0.3s ease;

}

.ids-certificate-upload-btn:active,
.ids-certificate-upload-btn:hover,
.ids-certificate-upload-btn:focus {
/*    border: 1px solid var(--floating-label-color)!important;*/
   /* outline: 2px solid var(--color-login-primary) !important;*/
    background-color: rgba(17, 51, 136, 1);
}

.ids-certificate-upload-btn:hover {
   /* background-color: rgb(223, 231, 241);*/
}

.external-header {
    min-height:max(80px, 15%);
    background-color: var(--color-secondary);
}

.external-nav-container {
    display:flex;
    justify-content: center;
    align-items: center;
    padding-left:1rem;
    padding-right:1rem;
}

.external-nav-container > span {
    color:white;
    font-weight:bold;
    font-size:30px;
}

@media(max-width:330px) {
    .external-nav-container > span {
        font-size:25px!important;
    }
}

.external-form-elements-container {
    margin-top:1rem;
    display:flex;
    flex-direction: column;
    gap:1rem;
    padding:2.5rem;
}

.external-info-text-sm {
    text-align:center;
    font-size:15px;
}


.external-info-text-lg {
    text-align:center;
    font-size:20px;
    font-weight:500;
}

.pin-dialog-container {
    display:flex;
    flex-direction: row;
    gap:1rem;
    justify-content: center;
    align-items: center;
    padding-left:5.5rem;
    padding-right:5.5rem;

   /* flex-wrap: wrap;*/
}

.pin-dialog-container > * {
    flex-basis:100%;
    flex-grow:1;
    flex-shrink: 1;
}

.PIN-input {
    /*width:3ch;*/
    min-width:60px;
    height:auto;
    min-height:50px;
    max-height:75px;
    font-size:45px;
    font-weight:bold;
    color:var(--color-primary);
    caret-color:var(--color-secondary);
    text-align:center;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: 2px solid var(--color-secondary);
    border-radius:0;
    background-color:transparent;
    padding: 0 0 0.25rem;
}

/*.PIN-input:not(:placeholder-shown).PIN-input:invalid {
    border-color: var(--color-soft-error);
}*/

/*.PIN-input:valid {
    border-color: #03a103;
}*/

/*.PIN-input:invalid {
    border-color: var(--color-soft-error);
}*/

.ids-security-text {
    text-security:disc;
    -webkit-text-security:disc;
    -moz-text-security:disc;
}

.PIN-input:focus,
.PIN-input:focus-within {
    outline:none;
    border-color: var(--color-primary);
}

.PIN-submit-button {
    background-color:var(--color-secondary)!important;
   /* color:var(--color-primary)!important;*/
    color:whitesmoke!important;
    font-weight:bold!important;
    border:1px solid rgba(35,35,35, 0.6)!important;
    text-transform:uppercase;
}

.PIN-submit-button:hover:not([disabled]),
.PIN-submit-button:focus:not([disabled]),
.PIN-submit-button:focus-within:not([disabled]) {
    color:ghostwhite!important;
    outline:2px solid rgba(255,255,255,0.5)!important;
    outline-offset:-2px;
}

/*.PIN-input:hover {
    border-color: var(--color-primary);
}*/

.PIN-Confirm-Button-Container {
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:6rem;
}

.START-Button-Container {
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:3rem;
    flex-direction: column;
}



/* max-width:480px */
@media(max-height:625px) {
    .PIN-Confirm-Button-Container, .START-Button-Container {
        margin-top:3rem;
        margin-bottom:1rem;
    }
}

@media(max-width:400px) {
    .privacy-container {
        gap:1rem!important;
    }
}

.privacy-container {
    margin-bottom:0.5rem;
    display:flex;
    gap:0.25rem;
    padding: 0.65rem 1.25rem;
    flex-wrap:nowrap;
    align-items:center;
}

.privacy-text-container {
    font-family: "Times New Roman", monospace;
    font-size:16px;
    height:400px;
    max-height:400px;
    min-height:400px;
    width:100%;
    max-width:100%;
    min-width:100%;
    border:none;
    padding: 0.5rem 1rem;
    resize:none;
    margin-bottom:0;
    white-space: pre-wrap;
    overflow-y:auto;
}

/* checkmark success animation */

.checkmark {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: green;
    stroke-miterlimit: 10;
    box-shadow: inset 0 0 0 #4bb71b;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position:relative;
  /*  top: 5px;
    right: 5px;
    margin: 0 auto;*/
}
.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: green;
    fill: #f8f9fa;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;

}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

/*@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}*/

@keyframes fill {
    100% {
        box-shadow: inset 0 0 0 30px green;
    }
}


.checkmark_error {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: var(--color-soft-error);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--color-soft-error);
    animation: fill_error .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position:relative;
}

.checkmark_error_circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--color-soft-error);
    fill: #f8f9fa;
    animation: stroke_error 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark_error_check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke_error 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke_error {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes scale_error {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}
@keyframes fill_error {
    100% {
        box-shadow: inset 0px 0px 0px 30px var(--color-soft-error);
    }
}






.login-button {
    position: relative;
    font-weight:bold;
    text-transform: uppercase;
}

.login-button:hover.login-button::after {
    display:block;
    border: 1px solid var(--color-login-primary);
}

.login-button::after {
    content:'';
    display:none;
    position: absolute;
    inset:0;
}


.ids-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
}

.search-icon {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.overview-search-icon {
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor:pointer;
    color: var(--color-secondary);
}

.overview-search-cancel-icon {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor:pointer;
    font-size: 16px!important;
    font-weight: bold!important;
    color: transparent!important;
    background-image: linear-gradient(180deg, rgb(54 144 255), rgb(0 0 0));
    background-clip:text;
}

.overview-search-icon-wrapper.has-text .overview-search-icon {
    opacity: 0;
    pointer-events: none;
}

.overview-search-icon-wrapper.has-text .overview-search-cancel-icon {
    opacity: 1;
    pointer-events: all;
}

/* When input is empty: show search icon */
.overview-search-icon-wrapper:not(.has-text) .overview-search-icon {
    opacity: 1;
    pointer-events: all;
}

.overview-search-icon-wrapper:not(.has-text) .overview-search-cancel-icon {
    opacity: 0;
    pointer-events: none;
}

.overview-search-icon:hover {
    color: var(--color-icon-focus);
/*    color: transparent!important;
    background-image: linear-gradient(180deg, rgb(54 144 255), rgb(0 0 0));
    background-clip:text;*/
}

.overview-search-input {
    min-width: 160px;
    color: black;
    padding-right: 26px;
}

/*input[type="search"]:not(:placeholder-shown) + .overview-search-icon,
input[type="search"]:not(:placeholder-shown) + .overview-search-icon
{
   visibility: hidden;
}

.searchField:not(:placeholder-shown) + .overview-search-icon,
.searchField:not(:placeholder-shown) + .overview-search-icon {
    visibility: hidden;
}

.searchField:not(:focus):not(:placeholder-shown):not(:hover) + .overview-search-icon,
.searchField:not(:focus-within):not(:placeholder-shown):not(:hover) + .overview-search-icon,
.searchField:not(:focus-visible):not(:placeholder-shown):not(:hover) + .overview-search-icon
{
    visibility: visible;
}*/







.ids-password-icon {
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    cursor:pointer;
    color: var(--floating-label-color) !important;
}

.ids-password-icon:hover {
    color:  var(--color-icon-focus)!important;
    /*color: var(--color-login-primary) !important;*/
}

.user-menu-container {
    min-width: 250px;
    width: auto;
    top: 80%;
    /*border: 1px solid #53565a;*/
    border: 1px solid #9a9a9a;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
  /*  border: 1px solid rgba(0,0,0,0.35);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px 0px;*/
    height:0;
    border-radius:6px;
    overflow: hidden;
    position: absolute;
    --openHeight: auto;
}

@media(prefers-reduced-motion: no-preference) {
    .user-menu-container {
        /*transition: height var(--delay-transition-account-menu) ease-out;*/
        transition:
            height var(--delay-transition-account-menu, 0.3s) ease-out;
    }
}

.user-menu-container.show {
    height:var(--openHeight);
}

.user-menu-ul > li {
    padding-top:0.75rem!important;
    padding-bottom:0.75rem!important;
}

.user-menu-ul > li:last-of-type {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.user-menu-container > div:first-of-type {
   /* padding:1rem;*/
    padding:0.75rem;
    text-align: center;
    border-bottom:1px solid rgba(0, 0, 0, 0.125);
}

.user-menu-container > div:last-of-type {
    border-top:1px solid rgba(0, 0, 0, 0.125);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.user-account-role {
    margin:0;
    font-size:14px;
    color:var(--color-secondary);
    font-weight: bold;
}

.user-account-username {
    color:var(--color-primary);
    margin:0;
    font-weight:bold;
    max-width: 250px;
    word-wrap: break-word;
}

.user-menu-item-row {
    display:flex;
    flex-direction: column;
    gap:0.5rem;
    padding:0.75rem;
    cursor:pointer;
    position:relative;
}

.user-menu-item-row:hover {
    /*background-color: var(--color-primary-light);*/
  /*  background-color: color-mix(in srgb, var(--color-primary), transparent 25%);*/
    background-color: var(--color-primary-light);
}

.user-menu-item-row:hover i {
    color: var(--color-secondary);
}

.user-menu-items-container {
    display:grid;
    grid-template-columns: 25% 70%;
    gap:0.25rem;
    align-items: center;
}

.user-menu-items-container > img,
.user-menu-items-container > svg,
.user-menu-items-container > i {
    margin-left:15px;
    color: var(--color-primary);
}

.user-menu-items-container {
    font-family: Roboto, Arial, sans serif;
    font-size: 16px;
}

.nc-numbering-active-item {
    color:  var(--color-primary);
    font-weight:    bold;
    text-decoration: underline;
}

.new-card-camera-button {
    position: absolute;
    right:10px;
    color: var(--color-secondary);
    top:25%;
    cursor:pointer;
}

.new-card-camera-button:hover {
    color: var(--color-primary);
}

.settings-group-div {
    margin-left:10px;
}

.offline-notification {
    position: fixed;
    inset: 0;
    left:2px;
    padding:1rem;
    border:4px solid lightslategrey;
    background-color: white;
    color: var(--color-soft-error);
    font-weight:bold;
    font-size:20px;
    display:flex;
    justify-content: center;
    align-items: center;
    width:125px;
    height:50px;
    text-transform: uppercase;
}

/*  View Transition API  */

/*::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 2s;
}*/

@media (prefers-reduced-motion) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

.print-image {
    display:none;
}

.table-footer {
    padding:0;
    border: var(--overview-table-border);
    border-top:none;
    background-color: #ffffff;
    border-bottom-left-radius: var(--table-border-radius);
    border-bottom-right-radius: var(--table-border-radius);
}

.table-pagination {
   /* padding: 0.30rem;*/
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top:0.3rem;
    padding-bottom:0.3rem;
    display:flex;
    gap:2rem;
    justify-content: end;
    align-items:center;
    flex-wrap:wrap;
    min-height:35px;
}

.table-pagination .overview-pagination-label,
.table-pagination .overview-pagination-label-nopages {
    font-size:15px!important;
}

.table-footer-selection-label {
    margin-right:auto;
    font-size:15px;
}

.btn-data-send,
.btn-data-send:disabled:hover,
.btn-data-send[disabled]:hover {
    color:var(--color-data-send);
}

.btn-data-send > i {
    color:inherit;
}

.btn-data-delete,
.btn-data-delete:disabled:hover,
.btn-data-delete[disabled]:hover  {
  /* color:var(--color-data-delete);*/
    color: #cb2535;
}

.btn-data-delete > i {
    color:inherit;
}

.btn-data-send,
.btn-data-delete,
.btn-data-print {
    background-color:white;
}

.btn-data-send:hover:not(:disabled):not([disabled]),
.btn-data-send:focus:not(:disabled):not([disabled]),
.btn-data-send:focus-within:not(:disabled):not([disabled]) {
    color:white;
    outline:none!important;
    background-color: var(--color-data-send);
}


.btn-data-delete:hover:not(:disabled):not([disabled]),
.btn-data-delete:focus:not(:disabled):not([disabled]),
.btn-data-delete:focus-within:not(:disabled):not([disabled]) {
    color:white;
    outline:none!important;
    background-color: #cb2535;
}

/*.btn-data-delete.overview-button-border:focus:not(:disabled):not([disabled])::after,
.btn-data-delete.overview-button-border:focus-within:not(:disabled):not([disabled])::after,
.btn-data-delete.overview-button-border:hover:not(:disabled):not([disabled])::after {
    display:none;
    outline-color: var(--color-data-delete) !important;
    outline-width: 2px!important;
    outline-offset:-1px;
}*/

/*.btn-data-send.overview-button-border:focus:not(:disabled):not([disabled])::after,
.btn-data-send.overview-button-border:focus-within:not(:disabled):not([disabled])::after,
.btn-data-send.overview-button-border:hover:not(:disabled):not([disabled])::after {
    display:none;
    outline-color: var(--color-data-send-outline) !important;
    outline-width: 2px!important;
    outline-offset:-1px;
}*/

/* 514px */
@media(max-width:32.125em) {
    .overview-filter-button,
    .overview-edit-button,
    .overview-control-button {
        margin-left: 0;
        margin-right: 0;
    }

    .overview-control-button-container {
        justify-content: space-between;
    }

}

/* 441px */
@media(max-width: 27.5625em) {
    .overview-control-button-container {
        justify-content: space-evenly;
    }
}

/*.overview-table tr:not(.bg-secondary):hover {
    background-color: #9ca0a3;
}*/

.general-settings-container {
   /* max-height: 68vh;
    overflow-y: auto;*/
}

.general-settings-column {
    height: max(100%, 70vh);
    overflow-y:auto;
    background-color: white;
    border-radius:6px;
}

.general-settings-column > .legend-custom {
    border-bottom:2px solid var(--color-primary);
}

i.footer-stats-image {
    vertical-align: middle;
    font-size: 30px;
    color: var(--color-primary);
}

svg.footer-stats-image {
    width:30px;
    height:auto;
    fill:var(--color-primary);
    vertical-align: middle;
}

.copyright-link {
    text-decoration-color:var(--color-primary)!important;
    text-underline-position: under!important;
}

.copyright-link-login {
    text-decoration-color:var(--color-login-primary)!important;
    text-underline-position: under!important;
}

.extern-form-footer {
    position:absolute;
    bottom:0;
    height:35px;
    background-color:var(--color-secondary);
    width:100%;
}

.extern-image-container {
    padding:1.5rem;
    outline: 1px solid var(--color-secondary);
    background-color:#f8f9fa;
    border-radius:6px;
    /*min-height:75vh;
    min-height:75dvh;*/
    overflow-y: auto;
    overflow-x: hidden;
   /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)!important;
    padding-left:30px!important;
    padding-right:30px!important;
    padding-top:30px!important;
    padding-bottom:30px!important;

}

/* 576px */
@media(max-width:36em) {

    .notification-badge-db {
        top: 0;
        padding: 2px 8px;
    }

    .extern-image-container {
        min-height:100vh;
        min-height:100dvh;
        border:none;
        border-radius:0;
       /* padding: 0.75rem 0.75rem !important;*/
        padding-bottom:0.75rem!important;
        padding-top:0.75rem!important;
        /* display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;*/
    }

    /*.file_image_menu,
    .button_row_ext
    {
        max-width:400px!important;
    }*/

}

/*
.layoutInput:invalid:focus,
.layoutInput:invalid:focus-visible,
.layoutInput:invalid:focus-within {
    border-color:red!important;
}
*/

.capture-image-dialog {
  /*  padding: 0.25rem 0.25rem;*/
    padding: 1rem;
}

.capture-image-dialog,
.overview-filter-container,
.capture-image-field {
    border-radius:4px;
}

.ids-close {
    opacity: 0.70;
    font-weight:500!important;
    font-size: 2rem;
}

.ids-video-capture {
    border: 1px solid lightgray;
    border-radius: 4px;
}

.credits-input {
    -moz-appearance: textfield;
}

.credits-input::-webkit-outer-spin-button,
.credits-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.signature-container {
    background-color: white;
    border: 1px solid lightgray;
    border-left:none;
    border-right:none;
    position: relative;
    padding: 0 12.5% 20px;
    /*padding: 0.75rem 12.5%;*/
}

.signature-container::after {
    display:block;
    content: 'Hier unterschreiben';
    font-size:12px;
    position: absolute;
    bottom:0;
    left: 0;
    right: 0;
    border-top:2px solid darkgray;
    width:75%;
    margin: 0 auto;
    text-align:center;
    padding-bottom:5px;
}

.ids-label-span {
    display:inline-block;
    margin-bottom: 0.5rem;
}

@media (min-width: 1200px) {
    .dashboard-container {
        max-width: 1340px!important;
    }
}

@media(orientation: landscape) and (max-width:1200px) {

    .login-form.signature > nav,
    .login-form.signature > footer,
    .login-form.signature > .external-form-elements-container {
        display:none;
    }

    .login-form.signature {
        display:flex!important;
        flex-direction: column;
        justify-content: center;
        width:100%;
        margin:0;
        border-radius:0;
        min-width:100%!important;
        max-width:100%!important;
    }



}

.signature-button {
    width:125px;
    padding:0.5rem 0.25rem;
    background-color:white;
    font-weight:bold;
    border:1px solid lightgrey;
    color:var(--color-text-extern);
    border-radius:4px;
}

.signature-button:disabled,
.signature-button[disabled] {
    color: lightgray!important;
}

.signature-button[data-button-type="delete"] {
    color:var(--color-soft-error);
    font-weight:bold;
}

.signature-button[data-button-type="delete"]:focus:not([disabled]),
.signature-button[data-button-type="delete"]:focus-within:not([disabled]),
.signature-button[data-button-type="delete"]:focus-visible:not([disabled]),
.signature-button[data-button-type="delete"]:hover:not([disabled]) {
    outline:2px solid var(--color-soft-error);
    outline-offset:-2px;
}

.signature-button[data-button-type="save"] {
    color:var(--color-secondary);
    font-weight:bold;
}

.signature-button[data-button-type="save"]:focus:not([disabled]),
.signature-button[data-button-type="save"]:focus-within:not([disabled]),
.signature-button[data-button-type="save"]:focus-visible:not([disabled]),
.signature-button[data-button-type="save"]:hover:not([disabled]) {
    outline:2px solid var(--color-data-send-outline);
    outline-offset:-2px;
}

/*@media(orientation: landscape) and (min-width:1201px) {

    .login-form.signature {
        display:flex!important;
        flex-direction: column;
        justify-content: center;
        width:80%;
        margin:0;
        border-radius:0;
        min-width:80%!important;
        max-width:80%!important;
    }

}*/


/*.signature-container.anim {
    height:100%;
    transition: height 0.5s;
}*/

.anim {
    transition: height 0.5s;
}

.settings-side-button {
    padding: 0.5em 1em;
    cursor:pointer;
    border-left: 3px solid transparent;
}

.settings-side-button:hover:not(.selected),
.settings-side-button:focus:not(.selected),
.settings-side-button:focus-within:not(.selected) {
    background-color: lightgrey;
}

.settings-side-button.selected {
    color: var(--color-primary);
    border-left: 3px solid var(--color-primary);
    font-weight:450;
 /*   box-shadow: 1px 1px 0 0px white;*/
}

.settings-side-button.selected > i {
    color: lightblue;
}

.settings-side-button.selected:not(:first-of-type):not(:last-of-type) {
    border-top: 2px solid var(--color-primary);
    border-bottom:2px solid var(--color-primary);
}

.settings-side-button.selected:first-of-type {
    border-bottom:2px solid var(--color-primary);
}

.settings-side-button.selected:last-of-type {
    border-top:2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.settings-side-button {
    display: grid;
    grid-template-columns: 25px auto;
    gap: 5px;
    align-items:center;
}

.settings-form-fields {
    width:100%;
    height:100%;
    padding-block:1rem;
    padding-inline:4rem;
    display:flex;
    gap:1rem;
    overflow:hidden;
    overflow-y:auto;
}

.settings-email-container {
    border:1px solid lightgrey;
    background-color:white;
    height:70vh;
    display:grid;
    grid-template-columns: 260px auto;
}

.settings-email-aside {
    max-width:250px;
    width:250px;
    border-right:1px solid lightgray;
    box-sizing: border-box;
}

.ids-settings-navbar {
    display:none;
}

.ids-navbar-toggler-settings {
    display:none;
}

.settings-email-category-select {
    display:none;
}

@media(max-width:991px) {

    .settings-email-container {
        grid-template-columns: 1fr;
    }

    .settings-email-aside {
      /*  display:none;*/
        border-right:none;
        max-width:100%;
        width:auto;
        display:flex;
        justify-content: space-evenly;
        flex-wrap:wrap;
    }

    .ids-settings-navbar {
        display:block;
    }

    .ids-navbar-toggler-settings {
        display:block;
    }

    .settings-side-button {
        border-bottom: 1px solid lightgray!important;
        border-inline: 1px solid lightgray!important;
        flex-grow:1;
        flex-shrink:1;
    }

    .box-content-overflow {
        overflow:visible;
    }

}

@media(max-width: 825px) {
    .settings-side-button > i {
        display:none;
    }
    .settings-side-button {
        display:block!important;
    }
}

@media(max-width: 705px) {
    .settings-side-button {
        display:none!important;
    }

    .settings-email-category-select {
        display:block;
        height:2.25rem;
        border:none;
        border-right: 1px solid lightgray;
        padding: 0.5rem;
        width: 100%;
        font-size:16px;
        text-align: center;
    }

    .settings-email-aside {
        /*  display:none;*/
        width:100%;
        justify-content: start;
        border-bottom:1px solid lightgray;

    }

    .settings-form-fields {
        flex-direction: column;
    }



}

@media(max-width:440px) {
    .settings-form-fields {
        padding-inline:2rem;
    }
}

.password-control:invalid:not(:placeholder-shown) {
    border:1px solid var(--color-data-delete)!important;
}

.ids-footer-bg {
    background-color: #f5f6f7!important;
   /* font-size: 14px;*/
    color: #6c757d !important;
}

.ids-footer:has(> #card_data) {
    border-top: 1px solid #e7e7e7;
}

.ids-footer:has(> .dashboard-container) {
    border-top: 1px solid #efefef;
    /* border-top: 1px solid #e0e0e0;
}

.image-preview-label {
    font-weight:450;
    /*color:#3d3d3d;*/
    color:#232222;
}



.ids-custom-vertical-width {
    width:100%!important;
}

.ids-custom-vertical-width[data-type="dv"] {
    width:95%!important;
}

input[type=color] {
    width:25px;
    height:25px;
}

input[type=color]::-webkit-color-swatch-wrapper,
input[type=color]::-moz-color-swatch {
    padding: 0;
}

.settings-row {
    display:flex;
    gap:0.75rem;
    align-items:center;
    margin-bottom:0.5rem;
}

.settings-row[data-disabled] {
    color:lightgrey;
}

.overview-table-selection-counter {
    margin-left: 0.15rem;
}

.credits-display-input {
    pointer-events:none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align:right;
   /* padding-right:25px!important;*/
}

.credit-icon {
    font-size:1rem;
    color:var(--floating-label-color);
    position:absolute;
    right:5px;
    bottom:10px;
}

th.customer-table-sections {
    padding: 0.5rem 0.5rem!important;
}

td.customer-table-sections {
    padding: 0.25rem 0.5rem!important;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    vertical-align: middle;
}

.settings-boolean-stats {
    text-align: center!important;
    font-weight:bold!important;
    font-size:16px!important;
}

.settings-boolean-stats[data-bool="true"] {
    color: green;
}

.settings-boolean-stats[data-bool="false"] {
    color: var(--color-soft-error);
}

.ids-notification-box {
    height: 394px;
    max-height: 500px;
    min-height: 100px;
    width: 100%;
    max-width: 100%;
    min-width: 100px;
    background-color: #efefef;
    padding: 0.5rem;
}

/*.import-label-help-error,
.import-label-help-warning {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.import-label-help-warning {
    text-decoration-color: var(--color-import-warning);
}

.import-label-help-error {
    text-decoration-color: var(--color-import-error);
}*/

.ids-required-label {
    position:relative;
}

.ids-required-label::after {
    position:absolute;
    content: '*';
    color: red;
}

.ids-required-element[required]:invalid:focus,
.ids-required-element[required]:invalid:focus-within,
.ids-required-element[required]:invalid:focus-visible {
    outline: 1px solid var(--color-not-valid);
    outline-offset:-1px;
    border-color:transparent!important;

}


.ids-session-expire {
    width:250px;
    position:absolute;
    bottom:0;
    z-index:10000;
    font-size:12px;
    padding: 0.5rem 0.75rem;
}

/* 800px */
@media(max-width:50em) {
    .ids-session-expire {
        display:none;
    }
}

.creditsContainer {
    display:grid;
    grid-template-columns: 175px 150px;
    align-items:center;
    gap:100px;
}

.creditsContainer > span[id] {
    text-align:right;
}


video.user-facing-camera {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}


th.custom-data-table-header:hover,
.settings-table th:hover {
    color:var(--color-primary) !important;
}



/* fix bootstrap modal flicker bug */

.fade {
    transition: opacity 0.25s linear;
}

.custom-select:focus {
    box-shadow:none!important;
}

.form-col {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.fa-custom-crossed {
    position: relative;
}

.fa-custom-crossed::after {
    position: absolute;
    content: "/";
    color: var(--color-soft-error);
    font-weight: bold;
    font-size: 2.35em;
    left: 0;
    top: 50%;
    transform: rotate(33deg) translate(-50%, -50%);
}

.ids-fieldset-content {
   /* margin-left:auto;
    margin-right:auto;*/
}

/*.searchField:hover,
.searchField:focus-visible {
    outline: 2px solid var(--color-focus-custom)!important;
    outline-offset: -1px!important;
}*/

.cert-active-table {
    font-weight:bold;
}

.cert-active-table[data-active-status="1"] {
    color: #0D47A1;
}

.cert-active-table[data-active-status="0"] {
    color: var(--color-secondary);
}

.ids-menu-dots:hover:not([disabled]) {
   /* color: var(--color-icon-focus);*/
}

.import-error-button {
    outline: 2px solid red!important;
    outline-offset: -2px;
}


@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

.custom-container-fix {
    transform-origin:right top!important;right:10px!important;top:0px!important;left:auto!important;
}

.custom-toast-negative-message,
.custom-toast-message
{
    text-align:center;
    width:100%;
}

.toast-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)!important;
}

.form-control-custom-button {
  /*  box-shadow: inset #e5e5e5 0px 0px 0px 2px !important;*/
   /* outline: 1px solid gray;*/
    outline-offset: -1px;
    transition-duration: 0.4s;
    box-shadow: #e5e5e5 1px 1px 1px 0px !important;
}


.form-control-custom-button:hover:not(:disabled),
.form-control-custom-button:focus:not(:disabled),
.form-control-custom-button:focus-visible:not(:disabled),
.form-control-custom-button:focus-within:not(:disabled) {
    filter: brightness(98%);
    outline-color:lightgrey;
}

.form-control-custom-button:hover:not(:disabled)  ~ i.new-card-signature-button,
.form-control-custom-button:focus:not(:disabled) ~ i.new-card-signature-button,
.form-control-custom-button:focus-visible:not(:disabled) ~ i.new-card-signature-button,
.form-control-custom-button:focus-within:not(:disabled) ~ i.new-card-signature-button{
    color:var(--color-primary)!important;
}

.new-card-signature-button {
    position: absolute;
    right: 10px;
    color: var(--color-secondary);
    top: 25%;
}

.form-control-custom-button:not(:disabled) ~i.new-card-signature-button:not(:disabled) {
    cursor: pointer;
}

.import-error-savebutton {
    font-size:21px;
    color:#5090c3;
    cursor:pointer;
}

.import-error-savebutton:hover {
    filter:brightness(85%);
}

.logo-aspect-ratio {
    aspect-ratio: var(--logo-aspect-ratio)!important;
}

/*
.layout-preview-container {
    container-type: inline-size;
    container-name: previewImageContainer;
    margin-top:0;
}

@container previewImageContainer (max-height:560px) {
    .layout-preview-container {
        margin-top: 7.5%!important;
    }
}
*/


.overview-image-container {
    display:flex;
    align-items:center;
}

.settings-modal-fieldset {
    padding: 1rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 1.5rem !important;
    border: 1px solid var(--color-secondary)!important;
    border-radius: 4px;
}

.settings-modal-legend {
    font-size: 1rem!important;
    font-weight: 500!important;
    width: min-content!important;
    color: var(--color-secondary)!important;
}

.searchField {
    border-radius:0.2rem!important;
}

.splashScreenContainer {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*background-color: rgba(120, 120, 120, 0.3);*/
    align-items:center;
    border-radius: 0.2rem;
    /*background-color: rgb(56 63 73 / 40%);*/
    background-color: rgb(71 64 64 / 40%);
}



.cert-validity-table {
    font-weight: bold;
}

.cert-validity-table[data-active-status="1"] {
    color: forestgreen;
    font-size:18px;
}

.cert-validity-table[data-active-status="0"] {
    color: var(--color-soft-error);
}

.certificate-sub-button {
    display:flex;
    gap:0.25rem;
    justify-content: center;
    align-items:center;
}

.settings-button-alternate-certlocation {
    outline:none!important;
}

.settings-button-alternate-certlocation > i {
    color: var(--color-soft-error);
}

.settings-button-alternate-certlocation:hover {
    color: var(--color-soft-error)!important;
}

.dataTables_empty {
    pointer-events: none!important;
    color: var(--color-text-muted);
    padding: 0.75rem!important;
    cursor: default!important;
}

.dataTables_empty::before {
    content:'';
    margin-right:0.15rem;
}

.ids-search-input {
    border-color: var(--color-text-muted) !important;
    border-width: 1px !important;
}

.ids-search-input:focus,
.ids-search-input:focus-within,
.ids-search-input:focus-visible {
   /* outline: 1px solid var(--color-text-muted)!important;
    outline-offset: -2px!important;*/
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    outline: 2px solid rgb(92 126 163)!important;
    outline-offset: -1px;
}

.ids-search-input::placeholder {
    font-weight:400;
    color: var(--color-text-muted);
}

.ids-search-input::-webkit-search-cancel-button,
.searchField::-webkit-search-cancel-button {
    display:none;
}


.form-control.searchField {
    z-index:0!important;
}

.changePasswordTitle {
    color: var(--color-focus-custom) !important;
    font-weight: bold;
}

.changePasswordButton {
    border-color: var(--color-focus-custom)!important;
    background-color: var(--color-focus-custom)!important;
}

.logo-label {
    display: block;
    text-align: center;
    color: var(--color-logo-subtext);
}


.language-submenu {

    position: absolute;
    top: -1px; /* prevents layout shift due to border */
    right: 100%; /* Opens to the left */
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: -6px 7px 8px rgba(0,0,0,0.1);
    min-width: 125px;
    z-index: 1000;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;

    opacity: 0;
    transform: translateX(2px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;


}

.language-item:hover .language-submenu {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.language-submenu .dropdown-item {
   /* padding: 8px 12px;*/
    cursor: pointer;
    white-space: nowrap;
    user-select: none!important;

    display:grid;
    grid-template-columns: 50% 50%;
    gap: 1rem;
    align-items: center;
    padding-left: 2rem;
    padding-right: 2rem;

}

.language-submenu .dropdown-item:hover {
    background-color: var(--color-primary-light);
    color: var(--color-secondary)!important;
}

.language-submenu .dropdown-item:hover > i {
    color: var(--color-secondary)!important;
}

.ids-navbar-secondary {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.ids-navbar-border {
  /*  border-bottom: 1px solid #4b4b4b;*/
    border-bottom: 1px solid #31373f;
}

.user-menu-items-sub-container {
    cursor:default!important;
}

.ids-table-row-selected {
    background-color: #2d5d77!important;
}

.bg-secondary {
    background-color: #2d5d77!important;
}

.footer-stats.ids-label-span {
    color: #495057;
}

.ids-button-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap; /* Allows wrapping on small screens */
}

.ids-button-group .ids-btn {
    flex: 1 1 0; /* All grow equally */
}

/* Generic Button Base */
.ids-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 6px; /* 8px */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    min-height: 48px;
    /*flex: 1 1 auto; */
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Overview Button */

.ids-btn.overview-btn {
    height: 31px;
    min-height: 31px;
    min-width: 125px;
    border-radius: 4px;
    justify-content: space-between;
    padding: 12px 12px;
    font-weight: bold;
    transition: all 0.1s ease-in-out;
}

.ids-btn-font-black {
    color: #333333;
}

.ids-btn-same-width {
    min-width: 160px;
}

.ids-btn-camera {
    min-width: 135px;
    min-height: 42px!important;
    height: 42px;
}

.ids-btn-camera-add {
    color: #28a745!important;
}

.ids-btn .material-icons {
    font-size: 18px;
}

/* Upload - Primary Style */
.ids-btn.primary {
    background-color: #2563eb; /* Blue */
    color: white;
}

.ids-btn.primary:hover {
    background-color: #1e40af;
}

/* Delete - Danger Style */
.ids-btn.danger {
    background-color: #f3f4f6; /* Light gray */
    color: #b91c1c;
    border: 1px solid #e5e7eb;
}

.ids-btn.danger:hover {
    background-color: #fee2e2;
    color: #991b1b;
}

.ids-btn.success {
    background-color: #f3f4f6; /* same light gray */
    color: #15803d; /* green-700 */
    border: 1px solid #e5e7eb; /* same neutral border */
}

.ids-btn.success:hover {
  /*  background-color: #d1fae5; !* soft green hover *!*/
  /*  color: #166534; !* green-800 *!
    background-color: #c6e5d5;*/
    color: white;
    /*background-color: #3b8f5a;*/
    background-color: rgb(114 175 137 / 75%);
    /* #c6e5d5; */
}

/* Pressed (touch feedback) */
.ids-btn:active {
    /* transform: scale(0.97);*/
    box-shadow: none;
}

/* Responsive Stack on Small Screens
 @media (max-width: 480px)
 */
@media (max-width: 991px) {
    .ids-button-group {
        flex-direction: column;
    }

    .ids-btn {
        width: 100%;
    }
}


/* Optional: Icon-only fallback for extra small screens */
@media (max-width: 360px) {
    .ids-btn .label {
        display: none;
    }
}

/* Outlined - Neutral secondary button */
.ids-btn.outlined {
    background-color: transparent;
    color: #374151; /* Gray-700 */
    border: 1px solid #d1d5db; /* Gray-300 */
}

.ids-btn.outlined:hover {
    background-color: #f3f4f6; /* Gray-100 */
}

.ids-btn:disabled,
.ids-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  /*  box-shadow: none;*/
    transform: none;
   /* border: 1px solid #d1d5db;*/  /* Gray-300 */

  /*  background-color: #e5e7eb;*/
    color: #6b7280;
    border: 1px solid #cbd5e1; /* stronger border */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);

}

.ids-btn:focus,
.ids-btn:focus-within,
.ids-btn:focus-visible {
    outline: none!important;
}


/* Green Outlined */
.ids-btn.outlined-green {
    background-color: transparent;
    color: #15803d; /* Emerald-700 */
    border: 1px solid #a7f3d0; /* Emerald-300 */
}

.ids-btn.outlined-green:hover {
    background-color: #d1fae5; /* Emerald-100 */
}

/* Petrol Outlined (teal-blueish) */
.ids-btn.outlined-petrol {
    background-color: transparent;
    color: #0f766e; /* Teal-700 */
    border: 1px solid #99f6e4; /* Teal-300 */
}

.ids-btn.outlined-petrol:hover {
    background-color: #ccfbf1; /* Teal-100 */
}

.ids-image-upload-container {
    width: 100%; /* Makes it responsive */
    max-width: 300px; /* Cap width for consistency */
  /*  background-color: #f8f9fa; !* Light gray background *!
    border: 1px solid #ced4da; !* Softer border color *!*/

    background-color: #f1f3f5; /* Slightly darker gray for contrast */
    border: 1px solid #ccd0d3; /* Soft but visible border */

    border-radius: 6px; /* More modern, rounded edges */
/*    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); !* Soft shadow *!*/
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); /* Stronger shadow for separation */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d; /* Muted text */
    font-family: "Roboto", Arial, sans-serif;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

.ids-image-upload-container:hover:not(.ids-layout-no-image) {
    background-color: #e9ecef; /* A slightly darker hover */
    border-color: #adb5bd;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.idf-btn.function {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

    max-height:48px;

}

.idf-btn.function.save {
    background-color: #007bff;
    color: white;
}

.idf-btn.function.save:hover {
    background-color: #0069d9; /* Blue-800 */
}

.btn.function.delete {
    background-color: #dc3545; /* Red-600 */
    color: white;
}

.btn.function.delete:hover {
    background-color: #c82333;; /* Red-800 */
}


.btn.function.state {
    background-color: rgb(23, 162, 184); /* Teal-700 */
    color: white;
}

.btn.function.state:hover {
    background-color: #138496; /* Teal-800 */
}


.btn.function:disabled,
.btn.function[disabled] {
    background-color: #e5e7eb;   /* Soft gray background */
    color: #9ca3af;              /* Muted text */
    box-shadow: none;
    border: none;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* Checkbox styling */
.checkbox-group {
    display: flex;
    align-items: center;
    /*margin-bottom: 1.5rem;*/
}

.checkbox-group input {
    margin-right: 0.5rem;
}

.toolset-container {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tool-button {
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    padding: .375rem .75rem;
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #083a81;
    user-select: none;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
}

.tool-button:hover {
    background: #e2e6ea;
    color: #083a81;
}

.tool-button.danger {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.tool-button.danger:hover {
    background: #ef8993;;
}

.crop-button {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-width: 85px;
    align-items: center;
    max-width:160px;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.ids-dialog-action-button-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    max-width: 450px;
    flex-wrap: wrap;
    width: 100%
}

.ids-dark-text {
    color: rgba(0, 0, 0, 0.87);
}

/* used for buttons */

.ids-secondary-background {
    background-color: var(--color-secondary);
    color: white;
}

.ids-secondary-background:not(:disabled):hover,
.ids-secondary-background:not(:disabled):focus,
.ids-secondary-background:not(:disabled):focus-within,
.ids-secondary-background:not(:disabled):focus-visible,
.ids-secondary-background:not(:disabled):active {
    background-color: #4a5260!important;
    border-color: #4a5260!important;
}

.credits-display-input {
    border-radius: 4px;
    border: 1px solid #dfdfdf;
}


.extImgLayout {
    width: auto;
    height: auto;
    object-fit: contain;
    max-width: 100%;
    max-height: 35dvh;
}

/* vertical (portrait) CR-80 card */
.extImgLayout[data-alignment="horizontal"] {
    /*aspect-ratio: 1 / 1.585; */
}

/* horizontal (landscape) CR-80 card */
.extImgLayout[data-alignment="vertical"] {
    /* aspect-ratio: 1.585 / 1;*/

}

.card-wrapper {
    max-width:450px; /* aligns with buttons in extIMG */
    padding-left:15px; /* simulates a bootstrap col */
    padding-right:15px /* simulates a bootstrap col */
}

.card-wrapper.row-layout .card-image-container {
    width: 48%; /* Side-by-side for portrait cards */
}

.card-wrapper.column-layout {
    flex-direction: column; /* Stack cards vertically */
}

.card-image-container {
    display:flex;
    justify-content: center;
}

.overview-modal-input {
    border-radius: 4px;
    border: 1px solid #dfdfdf;
}


select.ids-custom-select,
::picker(select) {
    appearance: base-select;
}

.ids-custom-select {
    width:100%;
    height:45px;
    line-height:2;
    transition: border-color 0.2s;
}

.ids-custom-select:hover,
.ids-custom-select:focus {
    border-color: #555;
}

.ids-custom-select::picker-icon {
    color: #666;
    transition: rotate 0.2s ease;
}

/* Grid-based option styling */
.ids-custom-select option {
    display: grid;
    grid-template-columns: 1fr 1fr 60px; /* name | location | status */
    align-items: center;
    gap: 8px;
    padding: 8px 15px; /* 6px 10px */
}

.ids-custom-select option:nth-of-type(odd) {
    background: #f9f9f9;
}

.ids-custom-select option:not(:disabled):hover,
.ids-custom-select option:not(:disabled):focus {
    background: #e0e0ff;
}

.ids-custom-select option:checked {
    font-weight: bold;
}

/* Move/hide the default checkmark */
.ids-custom-select option::checkmark {
    display: none;
}

.pec-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    justify-self: center;
}
.pec-status-dot.online {
    background: green;
}
.pec-status-dot.offline {
    background: gray;
}

/* Force selectedcontent to show only the span with data-selectedcontent */

selectedcontent span[data-selectedcontent] {
    display: inline; /* only show the first span */
}

selectedcontent span {
    display: none;
}

small, .small {
    font-size: 80%!important;
}