.opacity-100 {
    opacity: 1.00 !important; /*This needs to override all else, since it is visiblity switch*/
}
.opacity-0 {
    opacity: 0 !important; /*This needs to override all else, since it is visiblity switch*/
}

.table td, .table th {
    vertical-align: baseline;
}

.nav-link {
    font-size: 1.2em;
}

.main .top-row .opz-header-bar {
    justify-content: flex-start;
}

div.main.opz {
    background-color: #f5f9fc;
    width: 100%;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left .4s ease-in-out,left .4s ease-in-out;
}

div.main.opz-page {
    padding: 1rem 1.5rem;
}

    div.main.opz-page .content {
        background-color: #fff;
        width: 100%;
        height: 100%; /*calc(100% - 108px);*/
        padding: 15px;
    }

div.content div.criteria {
    padding: 0px;
}

div.criteria .card-header {
    background-color: transparent;
}

div.criterion {
    margin-bottom: 0.5em;
}

    div.criterion div.input-group div.input-group-append div.input-group-text {
        width: 2.2em;
        text-align: center;
        font-weight: bold;
    }


div.opz-modal-spacer-sm {
    min-width: 400px;
    height: 5px;
    margin-top: 0.6em;
}

div.opz-modal-spacer-md {
    min-width: 600px;
    height: 5px;
    margin-top: 0.6em;
}

div.opz-modal-spacer-lg {
    min-width: 800px;
    height: 5px;
    margin-top: 0.6em;
}

div.opz-modal-spacer-xl {
    min-width: 1000px;
    height: 5px;
    margin-top: 0.6em;
}

.blazored-modal-content {
    max-height: 800px;
    overflow-y: visible;
    overflow-x: hidden;
}

div.modal-footer {
    margin-top: 2em;
    padding-bottom: 0;
}

.opz-breadcrumbs {
    font-size: 1.2em;
}

    .opz-breadcrumbs .active {
        font-weight: bold;
        color: cornflowerblue;
    }

.material-icons {
    font-size: 1.2em;
    margin-right: 0.4em;
    vertical-align: baseline;
}

.material-icons-outlined {
    font-size: 1.2em;
    margin-right: 0.4em;
    vertical-align: baseline;
}

li i.fas {
    margin-right: 0.5em;
}

li i.far {
    margin-right: 0.5em;
}

li i.fab {
    margin-right: 0.5em;
}

button i.fas {
    margin-right: 0.25em;
}

button i.far {
    margin-right: 0.25em;
}

button i.fab {
    margin-right: 0.25em;
}

.fas-chatting {
    font-size: 1.5em;
    opacity: .8;
}

th.operation {
    text-align: center;
    width: 48px;
}

    th.operation .fas {
        font-size: 1.4em;
    }

th.sort-mgr .fas {
    font-size: 1.4em;
}

.no-highlight:focus {
    outline-style: none !important;
}

.blazored-modal {
    min-width: 700px;
    padding: 20px;
    overflow-y: auto;
}

    .blazored-modal .blazored-modal-header {
        padding-bottom: 0em;
    }

button.opz-btn-icon {
    min-width: 80px;
    text-align: center;
    padding-left: 0.3em;
    padding-right: 0px;
}

button.criterion.opz-btn-icon {
    margin-left: 1em;
}

td.opeartion {
    text-align: center;
    position: relative;
    width: 48px;
}

    td.opeartion .btn {
        vertical-align: inherit;
    }

.btn-bars {
    color: #fff;
    background-color: #8a9094;
    border-color: #97a1ab;
    opacity: 0.8;
}

    .btn-bars:hover {
        opacity: 1;
    }

.role-action-icon:hover {
    opacity: 0;
}

.role-action-group {
    border-radius: 6px;
}

.role-action-group,
.role-action-icon:active ~ .role-action-group {
    white-space: nowrap;
    display: none;
}


    .role-action-icon:hover ~ .role-action-group,
    .role-action-group:hover {
        display: inline-block;
        white-space: nowrap;
        position: absolute;
        will-change: transform;
        transform-origin: right;
        padding: 4px 4px;
        background-color: white;
        margin-top: -4px;
        margin-right: 6px;
        right: 0.15rem;
        width: auto;
    }

.role-action-item {
    margin-right: 0.25rem !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}


.opz-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

    /* Tooltip text */
    .opz-tooltip .opz-tooltiptext {
        visibility: hidden;
        width: auto;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 6px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .opz-tooltip:hover .opz-tooltiptext {
        visibility: visible;
        width: auto;
        bottom: 100%;
        left: 50%;
    }

.folding-button-withinput {
    display: inline-block;
    margin-left: 0px;
    padding-left: 0px;
}

.hidden-element {
    opacity: 0;
    width: 80px;
    text-align: center;
    padding-left: 0.3em;
    padding-right: 0px;
    margin-left: 0.3em;
    transition: opacity 2s;
    display: inline-block;
    position: absolute;
}

.folding-button-withinput:hover > .hidden-element {
    opacity: 1;
}