/*-------- WORD ON HORIZONTAL LINE --------*/
.word-on-line-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 15px;
    font-weight: bolder;
    color: rgba(122, 122, 122, 1)
}

/* div of text on line */
.word-on-line {
    position: relative;
    min-height: 20px;
}

    /* text on line */
    .word-on-line > span {
        background-color: white;
        padding: 0px 4px;
    }

    /* line */
    .word-on-line > div[class=line] {
        position: absolute;
        top: 11px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: 1px;
        background-color: rgba(122, 122, 122, 1);
        z-index: -1
    }

/*------------------ LOADING GIF ------------------*/
.loading-gif-container {
    text-align: center
}

    .loading-gif-container > img {
        width: 150px;
    }

/*------------------ MIAR MULTIPLE SELECT ------------------*/
.miar-multiple-select >
div {
    text-align: center;
}

    .miar-multiple-select >
    div
    .mms-select {
        position: relative;
    }

        .miar-multiple-select >
        div
        .mms-select
        select {
            width: stretch;
            display: block;
        }

            .miar-multiple-select >
            div
            .mms-select
            select
            option:first-child {
                text-align: center;
            }

        .miar-multiple-select >
        div
        .mms-select
        .mms-remove {
            padding: 6px;
        }

        .miar-multiple-select >
        div
        .mms-select:first-child
        .mms-remove {
            display: none;
        }

        .miar-multiple-select >
        div
        .mms-select:not(:first-child)
        .mms-remove {
            position: absolute;
            top: 8.5px;
            left: 3px;
            background-image: url("/images/close.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-color: transparent;
            border: 0px;
        }

        .miar-multiple-select >
        div
        .mms-select:not(:first-child)
        select {
            padding-left: 15px;
        }

.miar-multiple-select >
button {
    width: stretch;
    margin-top: 1px;
}
/*----------------- BUTTONS -----------------*/
.miar-btn {
    padding: 3px 20px;
    font-size: 1.2em;
    background-image: linear-gradient(326deg, var(--surface-3), var(--accent));
    color: white;
    font-weight: bold;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0px 0px 5px var(--border);
    cursor: pointer;
}

    .miar-btn:hover {
        animation-name: color-spinning;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-direction: alternate;
    }

.miar-btn-1,
.miar-btn-outset {
    border: 1px solid black;
    border-radius: 20px;
    cursor: pointer;
}

    .miar-btn-1:hover,
    .miar-btn-outset:hover {
        box-shadow: 1px 1px 7px 1px black;
    }

    .miar-btn-1:active,
    .miar-btn-outset:active {
        box-shadow: 1px 1px 5px 1px darkblue;
    }

.miar-btn-2,
.miar-btn-inset {
    border: 1px solid black;
    border-radius: 20px;
    cursor: pointer;
}

    .miar-btn-2:hover,
    .miar-btn-inset:hover {
        box-shadow: inset 1px 1px 7px 1px black;
    }

    .miar-btn-2:active,
    .miar-btn-inset:active {
        box-shadow: inset 1px 1px 5px 1px darkblue;
    }

.miar-btn-loading,
.miar-slct-loading {
    color: transparent !important;
    background: url("../images/loader-1.gif") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: none !important;
}

    .miar-btn-loading > span {
        visibility: hidden;
    }

.miar-slct-loading {
    /*padding: 0px 20px !important;*/
    font-size: 0px !important;
}


/*deprecated*/
.miar-btn-disabled {
    background: lightgray !important;
    color: white !important;
    box-shadow: none !important;
}


.miar-btn-action {
    padding: 4px 8px !important;
    color: white;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 5px black;
    box-shadow: 1px 1px 2px gray;
    cursor: pointer;
    background: var(--accent);
}

.miar-btn-action-info {
    background: var(--accent);
}

.miar-btn-action-update {
    background: var(--accent);
}

.miar-btn-action-delete {
    background: var(--accent);
}

.miar-btn-action-black {
    color: black;
    text-shadow: 1px 1px 5px white;
}

/*----------------- TITLE -----------------*/
.miar-title {
    text-align: center;
    align-content: center;
    font-family: "Noto Sans", sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: black;
}

.miar-title-xs {
    font-size: 18px;
}

.miar-title-s {
    font-size: 20px;
}

.miar-title-m {
    font-size: 25px;
}

.miar-title-l {
    font-size: 30px;
}

/*----------------- RESPONSE MESSAGE -----------------*/
.miar-resmsg {
    padding: 15px 0px;
    text-align: center;
    font-family: "Noto Sans", sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}


.miar-resultmsg-container {
    padding: 20px;
    position: relative;
}

    .miar-resultmsg-container >
    button {
        padding: 5px;
        position: absolute;
        top: 1px;
        right: 3px;
        background-color: transparent;
        border: 0px;
        cursor: pointer;
    }

        .miar-resultmsg-container >
        button >
        img {
            width: 15px;
        }

.miar-resultmsg-container-success {
    color: forestgreen;
    background-color: #3ce40029;
    box-shadow: 1px 1px 3px 0px #3ce400b0;
}

.miar-resultmsg-container-error {
    color: red;
    background-color: #ff00001f;
    box-shadow: 1px 1px 3px 0px #ff0000ad;
}

.miar-resultmsg-container-warning {
    color: #ea8a07;
    background-color: #ea8a071f;
    box-shadow: 1px 1px 3px 0px #ea8a07ab;
}

/*-------------------- MIAR ELEMENTS --------------------*/
.miar-select {
    height: 30px;
    background: var(--surface);
    color: var(--text-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

    .miar-select:hover {
        cursor: pointer;
    }

.miar-input {
    padding: 5px;
    width: 100%;
    min-height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.miar-fileinput-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .miar-fileinput-container >
    label {
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--surface);
        color: var(--text-1);
        text-align: center;
        align-content: center;
        font-size: 14px;
    }

        .miar-fileinput-container >
        label:hover {
            cursor: pointer;
        }

        .miar-fileinput-container >
        label >
        button {
            width: 15px;
            height: 15px;
            margin-left: 5px;
            padding: 0px;
            background-color: transparent;
            background-image: url("../images/close.png");
            background-size: contain;
            background-repeat: no-repeat;
            border: 0px;
        }

.miar-textarea {
    width: 100%;
    height: 150px;
    border: 1px solid #00000063;
}

/*-------------------- GENERAL --------------------*/
.miar-disabled {
    background-color: lightgray !important;
    background-image: unset !important;
    color: white !important;
    box-shadow: none !important;
}

    .miar-disabled:hover {
        cursor: not-allowed;
    }

.required-input {
    color: red;
    font-weight: bold;
}

/*-------------- container buttons ---------------------*/
/* for light theme */
body.light .buttons .btn.btn-close {
    background-image: url(../images/icons/close-black.svg);
}

body.light .buttons .btn.btn-edit {
    background-image: url(../images/icons/edit-black.svg);
}

.buttons {
    display: flex;
    justify-content: flex-end;
}

    .buttons .btn {
        height: max-content;
        padding: 0px;
        background-color: transparent;
        border: none;
        cursor: pointer;
    }

    .buttons .btn {
        width: 25px;
        height: 25px;
        margin: 2px;
        opacity: 0.3;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

        .buttons .btn:hover {
            opacity: 0.8;
            scale: 1.2;
        }

        .buttons .btn.btn-close {
            background-image: url(../images/icons/close-white.svg);
        }

        .buttons .btn.btn-edit {
            background-image: url(../images/icons/edit-white.svg);
        }

/*------------------ MIAR CONTAINER ------------------*/
body.light .miar-container .container-box {
    background: var(--surface);
}

.miar-container {
    min-width: 350px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    font-family: var(--font);
}

    .miar-container
    .container-box {
        width: 400px;
        margin: 30px 15px;
        padding: 25px 30px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: 1px 1px 10px 3px var(--border);
        text-align: center;
    }

        .miar-container
        .container-box
        .container-box-head {
            position: relative;
        }

            /* container title */
            .miar-container
            .container-box
            .container-box-head
            h3 {
                padding: 0px 70px;
                font-size: 1.5em;
                color: var(--text-1);
                font-weight: normal;
            }

            /* pushpin image of container */
            .miar-container
            .container-box
            .container-box-head >
            img {
                position: absolute;
                top: -12px;
                left: 5px;
                width: 35px;
                display: none;
            }

            /* buttons of container */
            .miar-container
            .container-box
            .container-box-head >
            .buttons {
                width: 50px;
                height: 50px;
                position: absolute;
                top: -3px;
                right: 0px;
                text-align: center;
                cursor: pointer;
            }

        .miar-container
        .container-box
        .element-group-container {
            display: flex;
            justify-content: center;
        }

            .miar-container
            .container-box
            .element-group-container
            .element-container {
                margin-right: 5px;
                margin-left: 5px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 50%;
            }

        .miar-container
        .container-box
        .element-container {
            margin: 30px 0px;
            padding-top: 7px;
            background: var(--surface-3);
            border: 1px solid var(--border);
            border-radius: var(--radius);
        }

            .miar-container
            .container-box
            .element-container >
            label {
                width: 100%;
                margin: 0px;
                color: var(--text-1);
                font-size: 14px;
            }

                /* warning message */
                .miar-container
                .container-box
                .element-container >
                label >
                div {
                    padding: 0px 2px;
                    color: white;
                    background-color: red;
                }

            .miar-container .container-box .element-container:hover > input,
            .miar-container .container-box .element-container:hover > select,
            .miar-container .container-box .element-container:hover > textarea {
                border: 1px solid var(--accent);
                transition: border 0.2s linear;
            }

            .miar-container .container-box .element-container > input,
            .miar-container .container-box .element-container > select,
            .miar-container .container-box .element-container > textarea {
                margin-top: 5px;
                color: var(--text-1);
                background: var(--surface);
                font-size: 14px;
            }

            .miar-container .container-box .element-container > input,
            .miar-container .container-box .element-container > select {
                width: 100%;
                padding: 5px;
                text-align: center;
            }

            .miar-container .container-box .element-container > input {
                padding: 2px;
            }

            .miar-container .container-box .element-container > textarea {
                padding: 5px;
                resize: none;
                text-align: justify;
            }

        .miar-container .container-box .container-box-foot {
            margin: 10px 0px;
        }

/*------------------ MIAR ELEMENT CONTAINER ------------------*/
.element-container
.ec-msg {
    color: black;
    padding: 10px;
    font-size: 1.23em;
    font-weight: bold;
    text-align: justify;
    letter-spacing: 0.5px;
}

.element-container
.ec-msg-info {
    color: #0000e8b0;
}

.element-container
.ec-msg-warning {
    color: white;
}

.element-container
.ec-msg-error {
    color: white;
}

.element-container:has(.ec-msg-warning) {
    background-color: #ffa200 !important;
}

    .element-container:has(.ec-msg-warning) label {
        color: white !important;
    }

.element-container:has(.ec-msg-error) {
    background-color: red !important;
}

    .element-container:has(.ec-msg-error) label {
        color: white !important;
    }



.element-container-invalid {
    border: 3px solid red !important;
}

.element-container-valid {
    border: 3px solid #5fff63 !important;
}

/*------------------ MIAR TABLE ------------------*/
@keyframes change-box-shadow {
    0% {
        box-shadow: 0px 0px 5px 0px gray;
    }

    100% {
        box-shadow: 0px 0px 7px 2px var(--accent);
    }
}

@keyframes color-spinning {
    0% {
        transform: rotateZ(2deg);
        background-image: linear-gradient(360deg, var(--surface-3), var(--accent));
    }

    10% {
        background-image: linear-gradient(325deg, var(--surface-3), var(--accent));
    }

    20% {
        background-image: linear-gradient(290deg, var(--surface-3), var(--accent));
    }

    30% {
        background-image: linear-gradient(255deg, var(--surface-3), var(--accent));
    }

    40% {
        background-image: linear-gradient(220deg, var(--surface-3), var(--accent));
    }

    50% {
        background-image: linear-gradient(175deg, var(--surface-3), var(--accent));
    }

    60% {
        background-image: linear-gradient(140deg, var(--surface-3), var(--accent));
    }

    70% {
        background-image: linear-gradient(105deg, var(--surface-3), var(--accent));
    }

    80% {
        background-image: linear-gradient(70deg, var(--surface-3), var(--accent));
    }

    90% {
        background-image: linear-gradient(35deg, var(--surface-3), var(--accent));
    }

    100% {
        transform: rotateZ(-2deg);
        background-image: linear-gradient(0deg, var(--surface-3), var(--accent));
    }
}

.miar-tbl-container {
    font-family: var(--font) !important; /*"Noto Sans", sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    font-size: 12px;
    letter-spacing: 0.5px;
}

    .miar-tbl-container
    .mt-tbl {
    }

    .miar-tbl-container
    .mt-form {
    }

    .miar-tbl-container .tbl-head,
    .miar-tbl-container .tbl-body,
    .miar-tbl-container .tbl-foot {
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .miar-tbl-container
    .tbl-head {
        margin: 20px 0px;
        padding: 10px 5px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 1.1em;
    }

        .miar-tbl-container
        .tbl-head
        .tbl-head-filter {
            display: flex;
            flex-wrap: wrap;
        }

            .miar-tbl-container .tbl-head .tbl-head-filter select,
            .miar-tbl-container .tbl-head .tbl-head-search input {
                background: var(--surface);
                color: var(--text-1);
                border: 1px solid var(--border);
                border-radius: var(--radius);
            }

            .miar-tbl-container .tbl-head .tbl-head-filter select {
                padding: 0px 10px;
                margin-right: 5px;
            }

                .miar-tbl-container .tbl-head .tbl-head-filter select:hover,
                .miar-tbl-container .tbl-head .tbl-head-search input:hover {
                    border: 1px solid var(--accent);
                }

    .miar-tbl-container
    .tbl-body {
        padding: 8px 5px;
        overflow-x: auto;
    }

        .miar-tbl-container
        .tbl-body
        table {
            width: 100%;
        }

            .miar-tbl-container
            .tbl-body
            table
            thead {
            }

                .miar-tbl-container .tbl-body table thead th,
                .miar-tbl-container .tbl-body table tbody td {
                    border: 1px solid #80808054;
                    white-space: nowrap;
                }

                .miar-tbl-container
                .tbl-body
                table
                thead
                th {
                    padding: 5px 5px;
                    color: var(--text-1);
                    background-color: var(--surface-2);
                }

                /* table title */
                .miar-tbl-container
                .tbl-body
                table
                thead
                .tbl-title
                th {
                    text-align: center;
                    font-size: 1.45em;
                    padding: 10px 0px;
                }

                /* columns */
                .miar-tbl-container
                .tbl-body
                table
                thead
                .tbl-columns
                th {
                    font-size: 1.17em;
                }

            .miar-tbl-container
            .tbl-body
            table
            tbody
            tr:hover {
                cursor: pointer;
                animation-duration: 0.8s;
                animation-name: change-box-shadow;
                animation-timing-function: ease-in-out;
                animation-direction: alternate;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
            }

            .miar-tbl-container
            .tbl-body
            table
            tbody
            td {
                padding: 7px;
                vertical-align: top;
                background: var(--surface);
                color: var(--text-2);
                font-size: 1.1em;
                border: 1px solid var(--border);
            }

                /* action buttons */
                .miar-tbl-container
                .tbl-body
                table
                tbody
                td
                button {
                    padding: 3px 8px !important;
                    background-image: linear-gradient(326deg, var(--surface-3), var(--accent));
                    text-shadow: 1px 1px 5px black;
                    box-shadow: 1px 1px 2px var(--border);
                    color: white;
                    font-size: 0.91em;
                    font-weight: bold;
                    border: 1px solid var(--border);
                    border-radius: var(--radius-lg);
                }

                    /* action buttons */
                    .miar-tbl-container
                    .tbl-body
                    table
                    tbody
                    td
                    button:hover {
                        scale: 1.2;
                        animation-name: color-spinning;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                        animation-timing-function: linear;
                        animation-direction: alternate;
                    }

            .miar-tbl-container
            .tbl-body
            table
            tfoot
            #td_newRecord {
                padding: 20px 0px 10px 5px;
            }

                .miar-tbl-container
                .tbl-body
                table
                tfoot
                #td_newRecord
                button {
                    padding: 3px 20px;
                    font-size: 1.2em;
                    color: white;
                    font-weight: bold;
                }

                    .miar-tbl-container
                    .tbl-body
                    table
                    tfoot
                    #td_newRecord
                    button:hover {
                        animation-name: color-spinning;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                        animation-timing-function: linear;
                        animation-direction: alternate;
                    }

    .miar-tbl-container
    .tbl-foot {
        margin-top: 15px;
        padding: 15px 5px;
        position: relative;
    }

        .miar-tbl-container
        .tbl-foot
        .tbl-foot-size {
            width: 140px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 5px;
            align-content: center;
        }

            .miar-tbl-container
            .tbl-foot
            .tbl-foot-size >
            div {
                white-space: nowrap;
                font-size: 1.04em;
            }

            .miar-tbl-container
            .tbl-foot
            .tbl-foot-size >
            select {
                width: 95px;
                text-align: center;
                font-size: 1.1em;
                background: var(--surface);
                color: var(--text-1);
            }

        .miar-tbl-container
        .tbl-foot
        .tbl-foot-nav {
            text-align: center;
            padding: 0px 145px;
        }

            .miar-tbl-container .tbl-foot .tbl-foot-nav > button,
            .miar-tbl-container .tbl-foot .tbl-foot-nav > input {
                margin: 0px 5px;
            }

            .miar-tbl-container
            .tbl-foot
            .tbl-foot-nav >
            input {
                width: 50px;
                background: var(--surface);
                color: var(--text-1);
                font-size: 1.1em;
                text-align: center;
                border: 1px solid var(--border);
                border-radius: var(--radius);
            }

        .miar-tbl-container
        .tbl-foot
        .tbl-foot-info {
            width: 140px;
            position: absolute;
            top: 0px;
            bottom: 0px;
            right: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            text-align: center;
            font-size: 1.04em;
        }

            .miar-tbl-container
            .tbl-foot
            .tbl-foot-info
            #div_totalRecordCount {
                font-size: 1.4em;
                font-weight: bolder;
            }

/*------------------ MIAR RELATION TABLE ------------------*/
body.light .miar-relation-tbl .mrt-tbl .mrt-data input {
    border: 1px solid var(--border);
}

.miar-relation-tbl {
    width: stretch;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

    .miar-relation-tbl >
    div {
        width: stretch;
        display: flex;
        justify-content: center;
    }

        .miar-relation-tbl >
        div >
        div {
            width: max-content;
            padding: 5px;
            overflow-x: auto;
        }

    .miar-relation-tbl
    .mrt-info {
        width: max-content;
        margin-bottom: 60px;
        padding: 15px 25px 25px;
        display: table;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: 0px 1px 6px 0px var(--border);
    }

        .miar-relation-tbl
        .mrt-info
        .mrt-info-head {
            text-align: center;
        }

            .miar-relation-tbl
            .mrt-info
            .mrt-info-head
            .mrt-info-title {
                margin: 10px 0px 20px;
                font-size: 2em;
                font-weight: bold;
                color: var(--text-1);
            }

        .miar-relation-tbl
        .mrt-info
        .mrt-info-body {
            display: table;
        }

            .miar-relation-tbl
            .mrt-info
            .mrt-info-body
            .info-div {
                display: table-row;
            }

                .miar-relation-tbl
                .mrt-info
                .mrt-info-body
                .info-div >
                div {
                    padding: 10px 5px;
                    display: table-cell;
                    border-radius: 7px;
                }

                    .miar-relation-tbl
                    .mrt-info
                    .mrt-info-body
                    .info-div >
                    div:first-child >
                    span {
                        display: block;
                        padding: 10px;
                        margin-right: 15px;
                        box-shadow: 1px 1px 3px var(--accent);
                        color: white;
                        font-weight: bold;
                        font-size: 1.3em;
                        text-align: left;
                        border-radius: 7px;
                        white-space: nowrap;
                        animation-name: color-spinning;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                        animation-timing-function: linear;
                        animation-direction: alternate;
                    }

                    .miar-relation-tbl
                    .mrt-info
                    .mrt-info-body
                    .info-div >
                    div:last-child {
                        min-height: 300px;
                        color: var(--text-1);
                        font-size: 1.3em;
                        text-align: justify;
                        vertical-align: top;
                    }

    .miar-relation-tbl
    .mrt-tbl {
        width: max-content;
        padding: 25px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: 0px 1px 6px 0px var(--border);
        overflow-x: auto;
        background: var(--surface-2);
    }

        .miar-relation-tbl
        .mrt-tbl >
        div {
            padding: 8px 5px;
            border-radius: 10px;
        }

        /* empty cell at top left of table */
        .miar-relation-tbl
        .mrt-tbl
        div:first-child {
            grid-column-start: 2;
        }

        .miar-relation-tbl
        .mrt-tbl
        .mrt-column-top {
            margin-bottom: 15px;
            text-align: center;
            background: var(--surface);
            color: var(--text-1);
            box-shadow: 0px 1px 6px 0px var(--accent);
            font-size: 1.3em;
            font-weight: bolder;
        }

        .miar-relation-tbl
        .mrt-tbl
        .mrt-column-left {
            padding: 10px;
            margin-right: 25px;
            grid-column-start: 1;
            background: var(--surface);
            color: var(--text-1);
            box-shadow: 0px 1px 6px 0px var(--accent);
            font-size: 1.2em;
            font-weight: bolder;
            text-align: center;
        }

        .miar-relation-tbl
        .mrt-tbl
        .mrt-data {
            padding: 0px;
            color: white;
            text-align: center;
            font-size: 1.15em;
            border: 1px solid black;
            border-radius: 10px;
        }

            .miar-relation-tbl .mrt-tbl .mrt-data input {
                width: 100%;
                height: 100%;
                padding: 0px 5px;
                border: 1px solid var(--accent);
                border-radius: var(--radius);
                background: var(--surface);
                color: var(--text-1);
            }

        .miar-relation-tbl
        .mrt-tbl
        .mrt-column-focused {
            scale: 1.1;
            color: white;
            animation: color-spinning;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: ease-in-out;
        }

        .miar-relation-tbl
        .mrt-tbl
        .mrt-input-changed {
            background: linear-gradient(90deg, var(--accent), var(--surface)) !important;
        }

        .miar-relation-tbl
        .mrt-tbl
        .mrt-input-invalid {
            background-color: red;
            color: white;
        }

/*------------------ MIAR PROGRESS BAR ------------------*/
@keyFrames miar-pb-opening {
    0% {
        scale: 0;
    }

    100% {
        scale: 1.0;
    }
}

.miar-progressbar {
    margin: 20px 0px;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    scale: 0;
    animation-name: miar-pb-opening;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

    .miar-progressbar
    .station {
        max-height: 20px;
        margin: 16px 0px;
        padding: 15px 0px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        flex-wrap: nowrap;
        background-color: #565656;
        font-family: 'Times New Roman';
        box-shadow: 0px 0px 2px black;
        z-index: 1;
    }

        .miar-progressbar
        .station:first-child {
            border-radius: 6% 0 0 6%;
        }

        .miar-progressbar
        .station:last-child {
            border-radius: 0 6% 6% 0;
        }

        .miar-progressbar
        .station
        .circle {
            min-width: 60px;
            min-height: 60px;
            margin: 0px 10px;
            align-content: center;
            color: white;
            background-color: #565656;
            font-size: 20px;
            font-weight: bolder;
            border: 1px solid black;
            border-radius: 50%;
        }

        .miar-progressbar
        .station
        .text {
            padding-right: 10px;
            white-space: nowrap;
            color: white;
            font-size: 16px;
        }

    .miar-progressbar
    .station-current {
    }

        .miar-progressbar
        .station-current
        .text {
            display: unset !important;
        }

    .miar-progressbar
    .station-completed {
    }

        .miar-progressbar
        .station-completed
        .circle {
            background-color: #00d300;
        }

        .miar-progressbar
        .station-completed
        .text {
            display: none;
        }

    .miar-progressbar
    .station-uncompleted {
    }

        .miar-progressbar
        .station-uncompleted
        .circle {
            background-color: red;
        }

        .miar-progressbar
        .station-uncompleted
        .text {
            display: none;
        }



/*------------------ MIAR PANEL ------------------*/
@media screen and (max-width:400px) {
    .miar-panel
    .tab-head
    .tab-title
    span {
        width: 100%;
        font-size: 0.7em !important;
        overflow-x: auto;
    }
}

@keyframes element-opening {
    0% {
    }

    100% {
        transform: rotateY(0deg);
    }
}

@keyframes spin-element-on {
    0% {
        transform: rotateZ(0deg);
        scale: 1.3;
    }

    100% {
        transform: rotateZ(360deg);
        scale: 1.3;
    }
}

@keyframes spin-element-off {
    0% {
    }

    100% {
        transform: rotateZ(0deg);
        scale: 1;
    }
}

/* for light body */
body.light
.miar-panel
.mp-head
.tabmenu-container
.tab-menu {
    color: var(--text-1);
}


.miar-panel
.mp-head
.tabmenu-container
.tab-menu-selected {
    box-shadow: var(--accent) 2px 2px 5px 1px inset;
    color: var(--text-1);
}

.miar-panel {
    margin-bottom: 50px;
    width: stretch;
    padding: 15px 20px;
    font-size: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

    .miar-panel
    .mp-head {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: var(--surface-3);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: 2px 2px 3px var(--border);
    }

        .miar-panel
        .mp-head
        .title-container {
            position: relative;
            padding: 13px 40px;
            text-align: center;
        }

            .miar-panel
            .mp-head
            .title-container
            .mp-title {
                color: var(--text-1) !important;
                animation-duration: 1s;
                animation-name: element-opening;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-timing-function: ease-in-out;
                transform: rotateY(90deg);
                font-family: var(--font) !important;
            }

            .miar-panel
            .mp-head
            .title-container
            .mp-close {
                position: absolute;
                top: 0px;
                right: 0px;
                bottom: 0px;
                align-content: center;
                padding-right: 10px;
            }

                .miar-panel
                .mp-head
                .title-container
                .mp-close >
                button {
                    padding: 0px;
                    cursor: pointer;
                    background-color: transparent;
                    border: 0px;
                }

                    .miar-panel
                    .mp-head
                    .title-container
                    .mp-close >
                    button >
                    img {
                        width: 20px;
                        height: 20px;
                    }

                    .miar-panel
                    .mp-head
                    .title-container
                    .mp-close >
                    button >
                    .animation-on {
                        scale: 1;
                        animation-name: spin-element-on;
                        animation-duration: 2s;
                        animation-iteration-count: infinite;
                        animation-timing-function: linear;
                    }

                    .miar-panel
                    .mp-head
                    .title-container
                    .mp-close >
                    button >
                    .animation-off {
                        animation-name: spin-element-off;
                        animation-iteration-count: 1;
                        animation-fill-mode: forwards;
                        animation-timing-function: linear;
                    }

        .miar-panel
        .mp-head
        .tabmenu-container {
            padding-top: 20px;
            display: flex;
            gap: 2px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            border: 1px solid var(--border);
            border-bottom: 0px;
            background: var(--surface);
        }

            .miar-panel
            .mp-head
            .tabmenu-container
            .tab-menu {
                padding: 0px 10px;
                min-width: 100px;
                min-height: 30px;
                background: var(--surface-3);
                color: var(--text-2);
                border: 1.5px solid var(--border);
                border-radius: 15px 15px 0px 0px;
                text-align: center;
                align-content: flex-end;
                text-shadow: 1px 1px 1px #00000012;
                font-size: 1.25em;
                font-family: 'Times New Roman';
            }

                .miar-panel
                .mp-head
                .tabmenu-container
                .tab-menu:hover {
                    cursor: pointer;
                    color: var(--text-1);
                    box-shadow: var(--accent-hover) 2px 2px 5px 2px inset;
                }

    .miar-panel
    .mp-body
    .tab
    .tab-title {
        text-align: center;
    }

    .miar-panel
    .mp-body
    .tab
    .tab-head {
        padding: 20px 5px;
        overflow-x: auto;
        text-align: center;
    }

        .miar-panel
        .mp-body
        .tab
        .tab-head
        .tab-title
        span {
            margin: 20px 0px 10px;
            padding: 10px 20px;
            display: inline-block;
            background-image: linear-gradient(171deg, var(--surface-3), var(--accent));
            background: var(--surface-3);
            color: var(text-1);
            font-size: 0.9em;
            letter-spacing: 0.5px;
            border: 1px solid var(--accent);
            border-radius: 20px;
            /*text-shadow: 0px 0px 1px white, 2px 2px 3px black;*/
            box-shadow: 2px 2px 5px var(--border);
        }

    .miar-panel
    .mp-body
    .tab
    .tab-body {
        padding: 5px;
        overflow-x: auto;
    }

    .miar-panel
    .mp-body
    .tab
    .tab-foot {
        padding: 5px;
        margin: 30px 0px;
        text-align: center;
        overflow-x: auto;
    }

/*------------------ MIAR MENU ------------------*/
@keyframes selected-menu {
    0% {
    }

    100% {
    }
}

@keyframes mm-hover {
    0% {
    }

    50% {
    }

    100% {
        border-radius: 30%;
        background-color: #121d42;
        /*transform: rotateY(180deg);*/
    }
}

@keyframes mm-initialize {
    0% {
        scale: 0.5;
    }

    50% {
        scale: 1;
    }
}

.miar-menu-container {
    display: flex;
    justify-content: center;
    margin: 50px 0px;
}

    .miar-menu-container >
    .miar-menu {
        width: 250px;
        height: 200px;
        margin: 0px 20px;
        text-align: center;
        align-content: center;
        color: red;
        background-color: #121d42;
        font-family: fantasy;
        font-size: 20px;
        box-shadow: 0px 0px 5px 2px gray;
        text-shadow: 0px 0px 10px black;
        border-radius: 10%;
    }

        .miar-menu-container >
        .miar-menu:hover {
            cursor: pointer;
            animation-name: mm-hover;
            animation-duration: 0.1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
            animation-timing-function: linear;
        }

        .miar-menu-container >
        .miar-menu >
        span {
            display: inline-block;
        }

/*------------------ CONTENT DETAILS CONTAINER ------------------*/
.content-details-container {
    display: flex;
    justify-content: center;
}

    .content-details-container >
    div {
        margin: 30px 0px 20px;
        padding: 10px 15px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        /*background-image: linear-gradient(31deg, #003e56, #005a6c);*/
    }

        .content-details-container >
        div
        .content-details {
            color: black;
            font-size: 15px;
            text-align: left;
        }

            .content-details-container >
            div
            .content-details
            td:first-child {
                vertical-align: top;
            }

        .content-details-container >
        div
        .content-details-success {
            color: #25b606fa;
        }

        .content-details-container >
        div
        .content-details-error {
            color: red;
        }

        .content-details-container >
        div
        .content-details-warning {
            color: #f78d69fa;
        }

        .content-details-container >
        div
        .content-details-info {
            color: #6986f7;
        }

/*------------------ RADIO BUTTONS ------------------*/
/* ── Default Card Style ── */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fff;
}

    .radio-label:hover {
        border-color: #bbb;
        background: #f9f9f9;
    }

    .radio-label input[type="radio"] {
        display: none;
    }

.radio-custom {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
    background: #fff;
}

.radio-label:has(input:checked) .radio-custom {
    border-color: #7F77DD;
    background: #7F77DD;
}

    .radio-label:has(input:checked) .radio-custom::after {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: white;
        display: block;
    }

.radio-label:has(input:checked) {
    border-color: #AFA9EC;
    background: #EEEDFE;
}

    .radio-label:has(input:checked) .radio-text {
        color: #111;
        font-weight: 500;
    }

.radio-text {
    font-size: 15px;
    color: #555;
    transition: color 0.15s;
}

/* ── Icon + Description Style ── */
.radio-icon-label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fff;
}

    .radio-icon-label:hover {
        border-color: #bbb;
        background: #f9f9f9;
    }

    .radio-icon-label input[type="radio"] {
        display: none;
    }

    .radio-icon-label:has(input:checked) {
        border-color: #AFA9EC;
        background: #EEEDFE;
    }

        .radio-icon-label:has(input:checked) .ri-dot {
            border-color: #7F77DD;
            background: #7F77DD;
        }

            .radio-icon-label:has(input:checked) .ri-dot::after {
                content: '';
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: white;
                display: block;
            }

.ri-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
    background: #fff;
}

.ri-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #7F77DD;
    flex-shrink: 0;
}

.ri-texts {
    flex: 1;
}

.ri-title {
    font-size: 15px;
    font-weight: 500;
    color: #111;
    margin: 0;
}

.ri-sub {
    font-size: 13px;
    color: #777;
    margin: 0;
}

/* ── Pill Style ── */
.pill-group {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.pill-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    transition: all 0.15s;
    background: var(--surface);
    user-select: none;
    box-shadow: 2px 2px 1px var(--border);
}

    .pill-label input[type="radio"] {
        display: none;
    }

    .pill-label:hover {
        background: var(--accent-dim);
    }

    .pill-label:has(input:checked) {
        background: var(--accent);
        border-color: var(--border);
        color: white;
    }

        .pill-label:has(input:checked):hover {
            background: var(--accent-hover);
        }