/***** PAGER *****/

/*
div.pagerCtl {
    position: absolute;
    top: -2.8em;
    right: 0px;
    font-style: italic;
}
*/

.pagerListContainer {
    position: relative;
}

div.pagerCtl {
    font-style: italic;
    text-align: right;
}

.pagerForm {
    display: inline-block;
}

.pagerForm select {
    width: inherit;
}


/***** GPC FOLD tag *****/

div.foldtitle {
    margin: 10px;
    text-align: center;
}

div.foldbody {
    margin-bottom: 1.5em;
}


/***** Multi selection links *****/

.multiSelectionText {
    font-size: 60%;
    margin-bottom: 2px;
    overflow: auto;
}

table tbody td .multiSelectionText a {
    font-size: inherit;
}

.multiSelectionText a[target="_blank"]::after {
    content: '';
}

.multiSelectionText a[target="_blank"] {
    margin-right: 0;
}

.multiSelectionTextRemove {
    vertical-align: super;
}



/***** TABLE FILTER *****/

#tablefilterOpen {
    display:inline;
    width:35px;
    height:20px;
    padding:0px 2px;
    color:white;
}

.tablefilterSearchterm {
    display:inline;
    max-width:fit-content;
    height:20px;
    padding:0px 2px;
    color:white;
    font-size:14px;
}

.tablefilterSubmit {
    display:inline;
    width:40px;
    height:20px;
    padding:0px;
    color:white;
    font-size:14px;
}

.tablefilterInput {
}

.tablefilterExpand {
    display: block;
}

.filterTable .tablesorter-header-inner {
    display: inline-block;
    vertical-align: middle;
}

.tableHeaderInputContainer {
    display: inline-block;
    position: relative;
    min-width: 1.5em;
}

.tableHeaderInputContainer.tablefilterActive {
    display: block;
}

.tableHeaderInputContainer input[type] {
    width: 1em;
    min-width: 1em;
    padding-left: 0;
    background: transparent;
    color: inherit;
}

.tableHeaderInputContainer input[type]:focus {
    width: 100%;
    background: white;
    color: #2e3192;
    padding-left: calc(1.7em + 3px);
    min-width: calc(1.7em + 3px + 4ex);
}

.tableHeaderInputContainer.tablefilterExpand {
    position: relative;
    z-index: 100;
}

.tableHeaderInputContainer.tablefilterActive input[type] {
    width: 100%;
    padding-left: calc(1.7em + 3px);
    padding-right: calc(1em + 2px);
    min-width: calc(1.7em + 3px + 1em + 2px + 4ex);
}

.tableHeaderInputContainer .inputIcon {
    border-radius: 0.5em;
    border: thin solid #ccc;
    cursor: pointer;
}

.tableHeaderInputContainer .tableHeaderFilterDelete {
    display: none;
    position: absolute;
    right: 2px;
    top: 4px;
}

.tableHeaderInputContainer.tablefilterActive .tableHeaderFilterDelete {
    display: inline;
    cursor: pointer;
}


/**** DIALOG WINDOW ****/

.ui-dialog iframe {
    border: 0;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

body.windowed .cfgitem_title, body.windowed .workflow_action_title {
    display: none;
}

.ui-dialog, .ui-dialog .ui-dialog-content {
    box-sizing: content-box; /* Fix for JqueryUI resizable problem with computing width with border-box */
}


/**** TIME PICKER ****/

.mdtimepicker {
    z-index: 900;/*more usable value, doesnt break gov tooltips*/
}

.mdtimepicker .mdtp__wrapper {
    bottom: unset!important;
    top: 20%;
}

input.materialTimeInput[type="text"] {
    height: 1.2em;
    width: 1.6em;
    min-width: 1.6em;
    font-size: 0.8em;
    padding: 5px;
    z-index: 50;
    cursor: text;
}

input.materialTimeInput[type="text"].mdtp__time_h, input.materialTimeInput[type="text"].mdtp__time_m {
    text-align: center;
}

.mdtp__clock_holder span.gov-js-tooltip {
    color: var(--gov-color-blue);
    float: left;
    margin-top: 0.45em;
}


/**** COLLAPSE BUTTON ****/

.collapseButton {
    cursor: pointer;
}

.collapseButton::before {
    content: "\e900";
    font-family: "GPC";
    font-size: 0.8em;
    display: inline-block;
    transform: rotate(-90deg);
    transition: transform 0.2s ease-in-out;
}

.collapseButton h2 {
    display: inline-block;
}

.collapseButton:has(h2)::before {
    font-size: 1.2rem;
}

.collapseButton.active::before {
    transform: rotate(0deg);
    transition: transform 0.2s ease-in-out;
}

.collapseButtonTarget {
    display: none;
}

@media print {
    .collapseButton::before {
        transform: rotate(0deg);
        transition: transform 0.2s ease-in-out;
    }

    .collapseButtonTarget {
        display: initial;
    }
    table.collapseButtonTarget {
        display: table;
    }
}


/**** CONFITEM PARAMETER COMPONENTS ****/

.inlineTable.imageComponent {
    flex-grow: 0;
    order: 0;
}

.inlineTable.standaloneComponent {
    flex-basis: 100%;
}

td.paramValueStandaloneComponent {
    padding-top: 5px;
}


/**** MENU PANEL COMPONENT ****/

.menuPanelBtn {
    float: left;
    min-width: 200px;
    height: 200px;
    margin: 20px;
}

.menuPanelBtn a.menuPanelLink {
    display: block;
    height: 100%;
    padding: 0 5px 5px 5px;
    border-radius: 10px;
    border: solid 2px;
    box-shadow: rgba(var(--menuPanel-shadow-color-rgb, 0, 0, 0), 0.1) 0px 4px 6px -1px, rgba(var(--menuPanel-shadow-color-rgb, 0, 0, 0), 0.06) 0px 2px 4px -1px;
    transition: color 0.25s ease-in-out;
    line-height: 1.3;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
}

.menuPanelBtn a.menuPanelLink:hover {
    text-decoration: none;
    text-shadow: 0px 0px 2px;
    box-shadow: rgba(var(--menuPanel-shadow-color-rgb, 0, 0, 0), 0.1) 0px 4px 16px, rgba(var(--menuPanel-shadow-color-rgb, 0, 0, 0), 0.06) 0px 8px 32px;
    filter: var(--menuPanel-hover-filter, sepia(7%) brightness(97%) contrast(97%));
    transition: color 0.25s ease-in-out;
}

.menuPanelBtn a.menuPanelLink .menuicon {
    font-size: 150px;
}

.menuPanelBtn a.menuPanelLink div.menuPanelTitle:only-child {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


/**** HIDE ON LOAD ****/

.hideOnLoad {
    animation: hideOnLoadAnimation 0s ease-in 5s forwards;
}

@keyframes hideOnLoadAnimation {
    to {
        width: 0;
        height: 0;
        overflow: hidden;
    }
}


/**** CodeMirror ****/

.CodeMirror {
    text-align: left;
}

.CodeMirror-errorLine {
    background-color: #ffcccc;
}


/**** DATA TYPE EXTRAS ****/

.paramValue > span.colorBox {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 1ex;
    border: 1px solid black;
}