:root {
  --bg: white;
  --color: black;

  --navi-bg: #001080;
  --navi-color: white;
  --navi-hover: #eda93d;

  --but-bg: #0748b6;
  --but-color: white;
  --but-border: black;
  --but-hover-bg: #eda93d;

  --wd-caption-bg: #001080;
  --wd-caption-color: white;

}

@font-face {
    font-family: 'lato';
    src: url('/sys/css/fonts/lato/lato-regular-webfont.woff2') format('woff2'),
         url('/sys/css/fonts/lato/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display:swap;
}


*, *:before, *:after {
    border-width: 0px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
} 
html, body {
    height: 100%; margin:0;
    background-color: var(--bg);  color: var(--color); 	    
	font-size:16px;
    font-family: lato,sans-serif;;
}


#mn-adm-block {	position:absolute;left:0;	height:100%;width:200px; background-color: var(--navi-bg);  color: var(--navi-color); padding: 0 10px;overflow: hidden; }
#mn-adm-logo {position:relative;padding: 0 10px; margin-top: 20px;}
#mn-adm-logo img { 	width:100% }
#mn-adm { margin-top:30px; font-size:16px; }
#mn-adm .item { margin-bottom:15px;white-space:nowrap }
#mn-adm .item i { font-size: 20px;margin-right:10px   }
#mn-adm .item:hover{ color: var(--navi-hover);cursor:pointer }

#adm-frame { width: calc(100% - 200px);height:100%;left: 200px; position: absolute; border: none;  }


.ipa-header { position:sticky;top:0; width: 100%;height: 50px; z-index: 100; top: 0px; overflow: hidden; background-color: var(--navi-bg);  color: var(--navi-color);  } 
.ipa-header-caption { position:absolute ;letter-spacing: 2px;;font-size: 18px; font-weight: bold; height: 50px;padding:15px 0 0 10px;z-index:1 }
.ipa-header-items   { max-width:1400px; padding: 10px 10px 0 0;text-align:right;white-space:nowrap;overflow:hidden }
.ipa-header-items .item{ display:inline-block;text-align:center!important;cursor:pointer;font-size:20px;line-height:8px;padding:0 10px;z-index:2; }
.ipa-header-items .item span { font-size: 10px;  font-weight: normal; color:white}



.modal { display: none;  position: fixed; z-index: 501;  left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0,0.4); padding-top: 2.5vh;text-align: center; }
.modal-content {background-color: #fefefe;margin: 0 auto 15% auto; border: 1px solid #888; text-align:left; display:inline-block; box-shadow:6px 6px 8px 0px black; }

.animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s}
@-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)}  to {-webkit-transform: scale(1)}}
@keyframes animatezoom {from {transform: scale(0)} to {transform: scale(1)}}


input[type=text], select, textarea, div.sMce {
    border-radius: 5px;
    background-clip: padding-box;
    box-sizing: border-box; 
    font-family: inherit;     
    font-size:inherit;  
    width: 100%;
    padding:6px 9px;  
    background: white;
    border: 1px solid #DADADA;
    color: black;   
    margin-bottom:5px;  
}
.fm-edit .item {
	margin-bottom:20px
}
.fm-edit label {display: block;font-size: 13px;margin-bottom: 2px; }
    

table {
  border-collapse: collapse;
  width: 100%;
}

table th { 
  font-size:13px;padding: 4px 4px 0px 4px;text-align: left;
  font-weight:normal;
  border: 1px  solid #ccc;
  background-color:#dfdfdf;
  white-space:nowrap;
  vertical-align:top;
  height:25px;
  color:#3a3a3a;
  
}

table td{ 
  font-size:16px;padding: 6px 4px;text-align: left;
  border: 1px  solid #ccc;
  vertical-align:top;
}


table.liste tbody td.id {
	font-size:12px;text-align:center;width:75px
}
table.liste tbody tr:nth-child(even) td{background-color:#f9f9f9;}
table.liste tbody tr:hover td {
	background-color: #D2E3FF;
	cursor:pointer
;}

.s-content {margin:20px }
.flex { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;  align-items: flex-start; align-content: center; overflow:hidden; gap:50px;	}
.flex-item { flex: 0 1 auto; }

.flex.settings {gap:20px 50px;margin-top:15px } 
.flex.settings .flex-item div { display: flex; flex-shrink: 0; align-items: center; justify-content: center;height: 48px;width: 48px;border-radius: 50%; margin: auto; background: #eaedf1; color: gray;font-size: 20px;}
.flex.settings .flex-item p { margin:5px}
.flex.settings .flex-item:hover, .flex.settings .flex-item:hover div{ color:blue;cursor:pointer }
.flex.settings .flex-item:hover { color:blue;cursor:pointer }


.sanfona { position:relative;    background:white; ;margin-bottom:20px;border:1px silver dotted }
.sanfona-caption { position:relative;font-size:16px;font-weight:bold;  background: rgba(0, 0, 0, 0.08); cursor:pointer;padding: 7px 10px;border-bottom:1px silver dotted } 
.sanfona-content { position:relative;padding: 10px 20px 20px 20px;;min-height:20px;;}
.sanfona.close .sanfona-content { display:none}
.sanfona-caption .arrow { position: absolute;font-style: normal;font-size:26px;top:0;right:10px}
.sanfona-caption .arrow:after { content : "x" }
.sanfona.close .arrow:after { content : "≡" }

.obj-new{display:inline-block;color:#001080;margin-left:20px }
.obj-new i{margin-right:5px }
.obj-new:hover{ cursor:pointer;color:#ff5722 }

.wdBox {  position: fixed;  z-index: 502; left: 0; top: 0; width: 100%; height: 100%;  overflow: auto;  background-color: rgba(215, 222, 237,0.7); padding-top: 2.5vh;text-align: center;}
.wdBox .container {  position: relative;color:var(--color);background-color:var(--bg);;max-width:calc(100% - 35px);max-height: calc(100vh - 50px); overflow: auto;  border: 1px solid #888;  text-align:left;  display:inline-block;  box-shadow:6px 6px 8px 0px black;   -webkit-animation-name: msg-animate;  -webkit-animation-duration: 0.6s;}
.wdBox .caption { position:sticky;top:0; white-space: nowrap; font-size:18px;font-weight:bold; padding: 12px 50px 12px 10px; color:var(--wd-caption-color);background-color:var(--wd-caption-bg); z-index:1   }
.wdBox .content {    max-width:980px;   padding: 20px ;    font-size:15px}
.wdBox .footer{    text-align: center;  }
.wdBox i.close{   position:sticky;top:10px; float:right;  z-index: 2;  color:var(--wd-caption-color);  right: 10px;    font-size: 28px;    cursor:pointer}
.wdBox.noClose .close{	display:none }
.wdBox.noCaption .caption{ 	display:none }
.wdBox.noCaption .close{ 	color:inherit }


.but {
    background-color: var(--but-bg);
    color: var(--but-color);
    border-radius: 6px;
    border: 1px var(--but-bvorder) solid;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 20px 8px 20px;
    margin: 5px 0 2px 0;
    min-width: 100px;
    text-align: center;
    letter-spacing: 1.5px;
}





.but:hover{
	cursor:pointer;
    background-color: var(--but-hover-bg);
}

    
.aus { display:none!important; }
.abs {position:absolute}
.rel {position:relative}
.inline { display: inline-block; }
.nowrap { white-space:nowrap; }
.left {	text-align:left; }
.right {	text-align:right; }
.center {	text-align:center; }
.pointer:hover {cursor:pointer;}


.f12 { font-size:12px }
.f14 { font-size:14px }
.f16 { font-size:16px }
.f18 { font-size:18px }
.f25 { font-size:25px }

.bold {	font-weight:bold}

.mg20 {	margin:20px}
.mt10{	margin-top:10px}
.mt20{	margin-top:20px}
.mt50{	margin-top:50px}
.mb0 { 	margin-bottom:0px }
.mb20{	margin-bottom:20px}
.mb50{	margin-bottom:50px}
.mr20{ margin-right:20px }

.aLink { cursor:pointer }
.bLink { color:blue;cursor:pointer }