.simmabutton-on {
    opacity: 1;
}

.simmabutton-off {
    opacity: 0.5;
}

.simmabutton {
    font-size: 1.2em;
    text-align: center;
    width: fit-content;
    min-width: 50px;
}

.simmabutton-visu {
    text-align: center;
    /*width: fit-content;*/
    min-width: 50px;
}

.simmabigbutton {
    margin: 0 10px;
}

.simmabutton-text {
    display: inline;
    vertical-align: middle;
    font-size: inherit;
    font-weight: inherit;
    padding-inline-start: 7px;
}

.simmalabel-text {
    display: inline;
    vertical-align: middle;
    font-size: inherit;
    font-weight: inherit;
    padding-inline-start: 7px;
}

.simmalabel {
}

.simmabutton-onlytext {
    padding-inline-start: 0;
}

.simmabutton-padding-inline-end {
    padding-inline-start: 0;
    padding-inline-end: 7px;
}

.simmalabel-onlytext {
    padding-inline-start: 0;
}

.simmalabel-padding-inline-end {
    padding-inline-start: 0;
    padding-inline-end: 7px;
}

.simmabigbutton-icon {
    font-size: 1.2em !important;
    display: inline;
    vertical-align: middle;
    font-weight: inherit !important;
}

.simmabigbutton-img {
    width: 1.5em;
}

.simmalabel-icon {
    /*font-size: 1.2em !important;*/
    display: inline;
    vertical-align: middle;
    font-weight: inherit !important;
}

.partialform {
    padding: 0px;
    overflow-y: hidden; /*for flex layout with grow -> otherwise height grows*/
    z-index: 1;
    flex: 1 1 auto; /*grow shrink basis -> fill view, not bigger than view, initial width is content*/
    position: absolute; /*to have one page*/
    width: 100%; /*need because of position absolute*/
    height: 100%; /*need because of position absolute*/
    display: flex;
    flex-direction: column;
}

.partialformScrollContainer {
    padding: 10px;
    flex-grow: 1; /*to fill view*/
    flex-shrink: 1; /*need to allow grow to not grow higher than view and scrolling is possible*/
    flex-direction: column;
    z-index: 2;
    display: flex;
    overflow-y: auto;
    gap: 20px;
}

.emptyrow {
    height: 40px;
}

.formrow {
    display: flex;
    gap: 15px; /*make space between items*/
}

.formcol {
    flex: 1;
    /*padding-inline-end: 30px;*/
    padding-top: 5px;
    max-width: 100%;
    display: flex;
    flex-flow: column;
}

.colspan2 {
    flex: 2;
}

.colspan3 {
    flex: 3;
}

.colspan4 {
    flex: 4;
}

.colspan5 {
    flex: 5;
}

.colspan6 {
    flex: 6;
}

.colspan7 {
    flex: 7;
}

.formrow > .item-value {
    width: 100%;
}

.item-value {
    height: 100%;
}


.item-value-onlydiv {
    flex: 1;
    display: flex;
    align-items: center;
}

.item-label {
    /*font-size: 0.7em;*/
    padding-bottom: 5px;
}

.labelempty {
    white-space: pre;
}

    .labelempty::before {
        content: ' ';
    }

.item-group {
    position: relative;
    /*padding-bottom: 20px; use gap*/
}



.flexcolumn{
    display: flex;
    flex-direction: column;
}

.flexrow {
    display: flex;
    flex-direction: row;
}

/*
.partialform .item-group:last-child {
    padding-bottom: 0;
}*/


.item-group-left {
    display: flex;
    flex-direction: row;
}

.item-group-caption {
    border-bottom: 1px solid lightgray;
    padding-bottom: 3px;
    /*margin-bottom: 5px;*/
    background-color: rgba(172,216,250,0.3);
}

.item-group-caption-vertical {
    writing-mode: vertical-lr;
    margin-block-end: 15px;
    text-align: center;
    transform: rotate(180deg);
    transform-origin: 50% 50%;
}

.rtl .item-group-caption-vertical {
    margin-block-end: 0;
    margin-block-start: 15px; /*this is a bug in chrome*/
}

.simma-textbox-button-icon {
    /*font-size: 1.2em !important;*/
    font-size: 1em !important;
    display: block;
}


.simma-textbox {
    display: flex;
    align-items: center;
    border-radius: 0.2em;
    position: relative;
    background-color: white;
}

.simma-textbox-input {
    width: 100%;
    line-height: 1 !important;
    border-radius: 0.2em;
    border: none;
    flex: 1;
    font-size: inherit;
    cursor: pointer;
}

.simma-slider {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.2em 0;
}

.simma-slider-input {
    height: 0.5em;
    margin: 0 0.2em;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
    background: #d3d3d3;
    outline: none;
    border-radius: 0.2em;
    opacity: 0.7;
    flex: 1;
}


    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
    .simma-slider-input::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default look */
        appearance: none;
        width: 1.2em; /* Set a specific slider handle width */
        height: 1.2em; /* Slider handle height */
        border-radius: 50%;
        background: rgb(0,167,255);
        cursor: pointer; /* Cursor on hover */
    }

    .simma-slider-input::-moz-range-thumb {
        width: 1.2em; /* Set a specific slider handle width */
        height: 1.2em; /* Slider handle height */
        border-radius: 50%;
        background: rgb(0,167,255); /* Green background */
        cursor: pointer; /* Cursor on hover */
    }

.simma-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.2em 0;
}


.simma-checkbox-input {
    width: 1em;
    height: 1em;
    margin: 0 !important;
    margin-inline: 0 0.2em !important;
    cursor: pointer;
}

.simma-textbox-input:focus {
    outline: none;
}

.simma-textbox-button {
    padding: 0;
    cursor: pointer;
    position: relative;
    inset-inline-end: 0;
    width: 1.5em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.2em;
    height: 100%;
}

.showEmpty{
    white-space:pre-line;
}

.linebreak {
    white-space: pre-line;
}

.simma-invisible {
    display: none;
}

.simma-readonly {
    background-color: rgb(250,250,250) !important;
    opacity: 0.8;
}

.space2 {
    padding-bottom: 10px;
}
.space3 {
    padding-bottom: 20px;
}

.simmapanel > div {
    /*margin: 10px;*/
}

.simmapanel-column {
    display: flex;
    flex-direction: column;
}

.simmapanel > .simmapanel-column {
    /*padding: 10px;*/
}

.simmapanel-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.simmapanel {
    box-sizing: border-box;
}

.simmapanel > * {
    box-sizing: border-box;
}

    .simmaobject-container > * {
        box-sizing: border-box;
    }

.simmapanel > .simmapanel-row {
    /*padding: 10px;*/
}

.simmapanel-row > div {
    /*margin-right: 20px; done with gap*/
}

    /*.simmapanel-row > div:last-child {
        margin-right: 0;
    }*/

.simma-noscrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.simma-noscrollbar::-webkit-scrollbar {
    display: none;
}

.simmagrid_col {
    background-color: lightgray;
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 10px;
    /*font-size: 30px;*/
    text-align: center;
    position: sticky;
    top: 0;
    overflow: hidden;
    z-index: 1;
}

.simmagrid_cell {
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 10px;
    /*font-size: 30px;*/
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    position: relative;
}

.simmagrid_rowselected{
    background-color: lightblue;
}

.simmalist_selected {
    background-color: lightblue;
}

.hasHover .simmalist_item:hover{
    background-color: rgb(232,249,255);
}

.simmalist_item_expand {
    padding: 0 10px;
    cursor: pointer;
    color: gray;
}

.simmahtml {
    display: flex;
    flex-flow: row;
}

.simmalabel {
    display:flex;
}

.simmabin {
}

.simmabin svg text {
    font-size: initial; /* use to zoom with font-size of parent*/
}

.spinner {
    animation: rotatespinner 2s linear infinite;
    width: 50px;
    height: 50px;
}

.spinnerpath {
    stroke: lightblue;
    stroke-linecap: round;
    animation: dashspinner 1.5s ease-in-out infinite;
}

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

@keyframes dashspinner {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.sdialog_button {
    background-color: rgb(240,240,240);
}

.hasHover .sdialog_button:hover {
    background-color: rgb(200,200,200);
}

    .sdialog_button:active {
        background-color: rgb(150,150,150);
    }

.simma-calendar {
    padding: 6px;
}

.simma-calendar button {
    padding: 0;
    width:1.7em;
    height:1.7em;
    border:0;
    background-color:transparent;
    border-radius: 5px;
}

    .hasHover .simma-calendar button:hover {
        border: 2px solid white;
    }

    .simma-calendar button:active {
        background-color: rgb(78,173,202);
    }

    .simma-calendar-content {
    box-shadow: 0 0 6px 2px gray;
    border-radius: 5px;
}

.simma-calendar table {
    border-collapse: separate;
    border-spacing: 0.3em;
}

.simma-calendar-days th {
    text-align: center;
    margin: 0;
}

.simma-calendar-days td {
    text-align: center;
    cursor: pointer;
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: 5px;
    height: 2.2em;
    width:2.2em;
    margin: 0;
}

.hasHover .simma-calendar-days td:hover {
    background-color: rgb(172,216,230);
}

    .simma-calendar-days td:active {
        background-color: rgb(78,173,202);
    }

.simma-calendar-selected {
    border: 1px solid gray;
    background-color: rgb(78,173,202) !important;
}

.hasHover .simma-calendar-selected:hover {
    border: 1px solid gray;
    background-color: rgb(172,216,230) !important;
}

.simma-calendar-marked {
    border: 2px solid black !important;
}