.popup {
    display: none;
    position:fixed;
    top: 20px;
    left: 50px;
    z-index: 100;
    box-shadow: var(--popup-box-shadow, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px);
    overflow: auto;
    user-select: none;
	max-height: 100vh;
	max-width: 100vw;
	flex-direction: column;
	justify-content: flex-start;
	background: var(--popup-background-image, none);
	background-position: var(--popupbackground-position, center center);
	background-size: var(--popup-background-size, cover);
	background-repeat: var(--popup-background-repeat, no-repeat);
	background-color: var(--popup-background-color, #FFFFFF);
    color: var(--popup-text-color, #000000);
}

.popup .form-control:not(textarea) {
    height: 1.6em;
}

.popup .form-control {
	margin-bottom: 4px;
}

.modal-overlay {
    opacity:0;
    filter: alpha(opacity=0);
    position:fixed;
    top:0;
    left:0;
    z-index:900;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.3)!important;
}
    

.panel-buttons {
    display: grid;
    grid-template-columns: 20% 20% auto auto;
    grid-gap: 0px 30px;
}

.panel-buttons .btn {
	margin-bottom: 0;
}


.popup input:focus {
    border: 1px solid var(--border-color);
    box-shadow: none;
}

#confirmaction .popup-body {
	max-width: 480px;
}

.popup-close, .popup-help, #confirmaction-yes, #confirmaction-no {
    cursor: pointer;
}

#confirmaction-msg, #popupinformation-msg {
	text-align: left;
	margin: 2px;
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px solid var(--popup-border-color, #EFEFEF);
}

.popup label {
	background-color: var(--popup-background-color, #FFFFFF);
	color: var(--popup-text-color, #000000);
	padding: 0;
	text-align: center;
	border-radius: var(--popup-border-radius, 2px);
	margin: 1px 4px 1px 1px;
	box-shadow: none;
	border: none;
	display: block;
	width: 100%;
}

.popup textarea {
	min-height: 80px;
	resize: vertical;
}

.popup-header h3 {
	font-size: 23px;
	padding: 0 4px;
	text-align: center;
	border-radius: var(--popup-border-radius, 2px);
	font-weight: bold;
	font-family: var(--popup-heading-font, Tahoma,Vedana,Sans-serif);
	margin: 0;
}

.popup-header h3:first-child {
	margin-bottom: 0;
}

.popup-header-controls {
	display: grid;
	grid-template-columns: 32px auto 32px 32px;
}

.popup-header-controls > div:first-child, 
.popup-header-controls > div:last-child,
.popup-header-controls > div:nth-child(3) {
	margin: 2px; 
	box-shadow: none;
	background-size: 24px 24px;
	background-position: center center;
	background-repeat: no-repeat;
}

.popup-header-controls > div:last-child:focus, .popup-header-controls > div:nth-child(3):focus {
	outline: 1px dotted var(--popup-input-outline-color, #006EB1);
}

.popup-header {
	background-color: var(--popup-header-background-color, #EFEFEF);
	color: var(--popup-header-text-color, #000000);
}

/* Mostly used to show and icon at left (128px) */
.popup-body-wrap {
	display: grid;
	grid-template-columns: 128px auto;
	gap: 4px;
}

.popup-body {
	padding: 20px 20px 20px 20px;
}

.popup-body .subheading, .popup-body label {
	text-align: left;
	padding-left: 8px;
}

.popup-body .subheading {
	padding: 2px 2px 2px 10px;
	margin: 2px;
	box-shadow: var(--subtle-box-shadow, 0 0 1px rgba(34, 25, 25, 0.4));
	margin-bottom: 10px;
}

.popup-footer {
	padding: 10px 20px;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 10px;
	background-color: var(--popup-footer-background-color, #EFEFEF);
	margin-top: auto;
	justify-content: flex-end;
}

.popup-footer > .btn {
	margin: 0px;
	display: inline-block;
	padding: 2px 10px;
	flex: 0 0 auto;
}

.footer-with-status {
	justify-content: flex-start;
}

.popup-footer .push-right {
	margin-left:auto;
}

.popup-footer .inline-message {
    overflow: hidden;
    text-overflow: ellipsis;
	flex: 1 1 auto; 
}

.popup-message {
	text-align:center;
	color: var(--error-text-color);
	background-color: var(--error-background-color);
	font-size: 13px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	padding: 2px 5px;
}

.inline-message {
	display: inline;
}

.popup-message:empty { display: none }

.popup-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0px;
}

.popup-form > div {
	padding: 4px;
	margin-bottom: 10px;
}

.popup-form-30 > div {
	margin-bottom: 0px;
}

.popup-form-30 {
	grid-template-columns: 30% auto;
	gap: 6px;
	margin-bottom: 0px;
}

.popup-form > div:nth-child(odd) {
	text-align: left;
	margin-bottom: 1px;
	padding: 0 4px 0 6px;
}

.popup-form-30 > div:nth-child(odd) {
	text-align: right;
	margin-bottom: 0px;
	padding: 4px;
}

.popup-form > div:nth-child(4n+1), .popup-form > div:nth-child(4n+2) {
	background-color: var(--table-row-background-odd);
}

.popup-form > div:nth-child(4n+3), .popup-form > div:nth-child(4n+4) {
	background-color: var(--table-row-background-even);
}

.popup-panel {
	display: flex;
}

.popup-box-01 {
	flex: 0 0 200px;
}

.popup-box-02 {
	flex: 1 1 200px;
}

.allokimage {
	width: 24px;
	height: 24px;
	background-image: var(--popup-all-ok-icon, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAER0lEQVRYw9VXbUxbZRR+3tteWroGWkzQhVYQXJ1klM4QCAUZ4GIyt8ISBcJMjGBYZPzY/pi4uCyKbEwlOs2MZImQaGQTsznammlMGDOsVu0iozBZiZlLwQFxfCxswG57jz8K7Sq70EqJ8fx+7z3Pc97zPuc5wH8cLKrD+gSeKnVmKHUGJucMJLCHAYDxNE4+0YP5EQ/rHHGQ97YQOwBxMg65+s2oyd+PBa4cYiCpZHA0DoXYhfYfP8TP3iHc84v/HkCOTovdpiZoE18EscToakszmJr5Auf6DsE1MhU1AFaZZaYSYzv8zLCmS5aRh13or6FOtyNyAK9lFiNt61kQ08am02gK1399Hi1XL6wKgFVmmWmb0R6z5CEQ07jYb0Gnu1caQGm6FhX5zjWXXbJBxWG0XcyDazTYE/Kwbi/NbFq35AAgcptQZjqK/rGGpdcRApCr3wxt4h7QOitPkqYaOboTcNwYDAPAavL30xzTxFLhNqo1dPPONKMwUiwRe/MOwHGjLgRAr+ZpgSuPJVFLhok+KnwJzX1WOtnfEw7iLl8GvXofvLNCAEDlo+ZVFS4K5rsyTNTxzD7EyxQ4lluFbu9VGp6cCDW8yJJRkVaA9wd6AgAUupg13q70bGovrkO8TAEA+GDwPK5P/7X8YHyKAVgEwOI4w0q9J+c48hMxIlqR+c70bOrY3gCVTAFB9KHZbUWjo4s9UO9kZAj2AN2DZPlVfBwdL96D36cmqOXyt8xPD54tO9Ozqb1kL1SLzI+5bTjqtEurvY9tDH+GEtH8dAVqHy+GXxSh4hXU6DzH/PdVggF4Lt1Ip+5j/o7bhjcdX7NIhm3gCniMSxX3hz+H8HJGEdRyJV43WnDXt0AtrvNBEDseM1J7cYj5u247mpy21Se9nMZCV+ATPVLnzgxdZoL4CX2+rR5quRKNT70AJcdT0y829mzqFjq9vQEb5EoIog/vDdhx2HE2IuYQ2bXQFcyPeIBkybNWTx97lW+jVnMt1HIlDprKkaLWUnlqDjbIlQCAloFv0Oi0Rm6y5kc9wWHE9Ak8HbR4V9OCcoOJPlusxFIIoh8tA3YcunSGRZycowk0d+mCQkTe2wKL91npDl+30nddnj5WL2+j1oLaEPNBO95ydkVnL1WCFd5ZIXwcF6ZmorrQEYn12m3YSq2Ftfh46Hu8LfXOJYNm0NFbsDSMWNg4PrzjBDSa+kh+o09Iopuz0/CJYlTOGrcmW3Hku+A4ZstM6CtFTvi59fEEMnEYn4YbkuWWrCqrgIqMtnWxZD1XLPhqoDcSU1qyaEo1MUseMKXdke8FFVsKUWpsg5/btOayd/fX/pN5hItJShIs2UfwkLYaiHIxAc3g1tQp2K68Adfo5NpWsxzdk6jLO4A5vgwiS15VZFSCFSd/Og7XyG9rW82WvT01j6q0goCZoCfg5x5ZLPMYwK5hbtSDL/+4tCQy/4v4G5B4taT3+gBBAAAAAElFTkSuQmCC'));
	background-repeat: no-repeat;
	background-size: 24px 24px;
	background-position: center center;
	margin-right: auto;
	margin-left: 0;
}

.popup .lds-dual-ring {
	display: inline-block;
	width: 20px;
	height: 20px;
}

.popup .lds-dual-ring:after {
	width: 12px;
	height: 12px;
	margin: 8px 2px;
	border-width: 2px;
}

#confirmaction, #popupinformation {
	min-width: MIN(90vw, 450px);
}

#popupinformation-msg:empty {
	display: none;
}

@media screen and (max-width: 720px){
	.popup-footer {
		flex-wrap: wrap;
	}
}