@font-face {
    font-family: 'Open Sans';
    src: url('webfont/opensans-regular-webfont.woff2') format('woff2'),
         url('webfont/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('webfont/opensans-bold-webfont.woff2') format('woff2'),
         url('webfont/opensans-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('webfont/opensans-bolditalic-webfont.woff2') format('woff2'),
         url('webfont/opensans-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('webfont/opensans-italic-webfont.woff2') format('woff2'),
         url('webfont/opensans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

/* .... debug .... */
/* table, tr, td, th { border: 1px solid black; } /* */

/* Tabellenkopf fixieren */
table th {
    /* position: -webkit-sticky; /* this is for all Safari (Desktop & iOS), not for Chrome */ 
    position: sticky;
    top: 0;
    z-index: 10; /* any positive value, layer order is global */
    background-color: #fbfbfb !important;
}

/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video, fieldset { display: block;}

/* MV Listbox display fontAwesome*/                       
 .fontawesome, select[name="fontawesome"]{
    font-family: fontAwesome
}

.hrMenu {
    margin-left: -8;
    margin-top: 0;
    margin-bottom: 0;
}

/* Bootstrap Anpassungen */
.form-check-input[type="checkbox"] { width: 20px; height: 20px; }

/* .... fonts .... */
body{                               /* font Content normal*/
    color: #202020;
    background:#EAEDF1;
    font-family: 'Open Sans', sans-serif;
    font-size: 80%;
    line-height: 1.5;
}

.prevImg{
    max-height:65px;
    max-width:65px;
    height:auto;
    width:auto;
}
.two-points-larger {
    font-size: 2em; /* Zwei Schriftgrößen größer */
}

/* Login-Page */
.loginbox {
    text-align: center;
    background-color: white;
    padding: 28px;
    width: fit-content;
    border-width: 1px;
    border-style: solid;
    border-color: #8bc348;
    border-radius: 5px;
}

/* setting-card */
.setting_card {
    text-align: center;
    background-color: white;
    padding: 6px;
    width: fit-content;
    border-width: 1px;
    border-style: solid;
    border-color: #89a4fa;
    border-radius: 5px;
}

.setting_icon {
    padding:4px;
    margin: 4px;
    opacity: 0.7;
    height: 20px;
    background-color: lightgray;
    top: 5px;
    border-radius: 50%;
    cursor: pointer;
}

.loginProductLink {
    color: #8bc348;
    text-align: right;
    font-size: 11px;
}
.loginProductText {
    color: #000000;
    text-align: right;
    font-size: 11px;
}

/* Breadcrumb */
nav ul li{ display:block; float:left; padding:3px 3px; }
nav ul li a{ font-size:15px; }
nav ul li a:hover{ color:#409FFF; }

.dropdown-item-font-size {font-size: 14px}
.kachelMenuBut {background-color: transparent; border: hidden; margin: 4px; }
.kachelMenu {vertical-align: top !important; text-align: right !important; padding: 0px !important; font-size:15px;}
.kachelTitle, .windowTitle, .infoPageTitle { font-size: 1.2em; }     /* font Content title */
.kachelContent, .windowContent, .detailviewSubTitle, textarea, input, button, select, fieldset, .form-control, .form-control-rating, .detailviewTitle, .detailviewContentL, .detailviewContentR
                                                             { font-size: 1.0em; }     /* font Content       */
.butTitle, .infoPageContent, #footerSection, .infoFields     { font-size: 0.8em; }     /* font Content small */
.debug                                                       { font-size: 0.8em; color: #ff0000; }  /* font Content red */


#headerSection { background-color: #1F253D; color: #ffffff; vertical-align:middle; height:30px; padding:4px; width:100%;}
#webMenu       { width: auto;}
#search        { min-width: 120px; float:right;}
#footerSection { background-color: #1F253D; color: #ffffff; vertical-align:middle; height:18px; padding:4px; }

/* .... Kachel .... */
.kachelBG     { border-radius:10px; max-width: 240;}
.kachelTitle  { padding-left: 20px; text-align: left; vertical-align: middle; }
.kachelContent{ padding: 0px; text-align: left; vertical-align: middle; border-radius: 0px 0px 10px 10px; height: 80px; font-size: 12px;}
.windowTitle  { padding-eft: 20px 10px 2px 10px; text-align: center; vertical-align: middle; }
.windowContent{ padding:  0px; text-align: center; vertical-align: middle; border-radius: 0px 0px 10px 10px; height: 80px; }
.kachelOtherText {font-size: 13px;}

/* .... buttons .... */
.cursor, .iconClickable {  cursor: pointer}
.butNavi{
    border-width: 1px;
    border-color: #89a4fa;
    background-color: #ffffff;
    margin:1px 12px 4px 0px;
    padding:4px 4px;
    border-style:solid;
    border-radius:3px;
    display:inline-block;
    height: auto;  /* 2020: 30px */
    cursor: pointer;
    white-space: nowrap;
}
.butSearchNavi{
    border-width: 1px;
    border-color: #89a4fa;
    background-color: #ffffff;
    margin:1px 12px 4px 1px;
    padding:0px 4px;
    border-style:solid;
    border-radius:3px;
    vertical-align: middle;
    display:inline-block;
    height: 31px;
    cursor: pointer;
    white-space: nowrap;
}
.butTrans{
    border-width: 1px;
    border-color:  transparent;
    background-color:  transparent;
    margin:0px;
    padding:0px;
    border-style:solid;
    display:inline-block;
    height: 28px;
    width:28px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 20;
    color: #686868;
}
.iconNavi{
    height: 23px;
    width: 23px;
    background-color: white;
    border: 1px solid #89a4fa;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    cursor: pointer;
}
.butNavi:hover, .iconNavi:hover, .iconClickable:hover { color: #409fff;}

.butDetailNavi{
    border-width: 1px;
    border-color: #ccceee;
    background-color: #fff4d5;  /* ffff00 ccceee fff4d5 eeeefb; */
    border-style:solid;
    vertical-align: middle;
    white-space: nowrap;
}

/* .... list view .... */
.listviewTableHeader { text-align: left; vertical-align: bottom; padding: 8px 8px; font-size:14px; }
.listviewTableHeader { background-color: #fbfbfb;  border: 1px solid #d0d0d0; }
.listviewTableContent { vertical-align: top; padding: 4px 8px; font-size: 14px;}
.listviewTableTROdd  { background-color: #e0e0e0; }
.listviewTableRTEven { background-color: #d0d0d0; }
.infoHeader { color: #878787; font-size: 0.8em; margin-top: 8; margin-right: 2; float: right;}
.font14 {font-size: 14px;}

/* .... detail view ....*/
.detailviewTitle, .detailviewTitleW, .detailviewTitleR     {
    border-radius:3px;
    border-style: solid;
    border-width: 1px;
    border-color: #d0d0d0;
    margin-bottom: 4px;
}
.detailviewTitleR { background-color: #ccceee; color: #ff0000; }
.detailviewTitleW { background-color: #ccceee; }
.detailviewContentL { vertical-align: top; text-align:right; padding: 6px 3px;  background-color: #f3f3f3;}
.detailviewContentR { vertical-align: top; text-align:left;  padding: 0px 3px;  background-color: #f3f3f3;}
.detailviewWorkflowB {font-weight: bold;}
.borderGrouped { border: 1px solid #D3D3D3; border-radius: 5px; padding: 6px;}  /* #D3D3D3 | #C0C0C0 */
.borderGroupedLabel { color: #000000; padding: 10px 3px; font-size: 18px; font-weight: bold; }
.field_set{
  border-color: #a0a0a0;
  border-style: solid;
  width: fit-content;
  min-width: 272px;
}
.textfield_readonly, .bg-readonly, .bg-readonly.accordion-button:not(.collapsed){background: #E5E5E5}
.accordion-body { background: #f0f8ff80; }
.hide_text {display: none;}

/* article */
#boxcontentscrollable {
    height: 300px;
    overflow: auto;
}
#boxcontent
{
        width:auto;
        margin:10px 16px;
        padding:7px 0 4px 0;
}
article
{
        /*float:left;*/
        /*width:200px;*/
        min-width:200px;
        min-height:130px;
        padding: 7px;
        margin-left:  8px;
        margin-bottom:8px;
}
.container-flex
{
    display:flex;
    flex-wrap:wrap;
}

.proofElmentView {
    float:left;
    margin-top:20px;
    margin-right:20px;
    margin-bottom:20px;
}

.form-select { font-size: 13px; }
textarea, input, button, select, .file_upload, .textfield_readonly, .form-control, .form-control-rating {
    border-radius:3px;
    border-style: solid;
    border-width: 1px;
    border-color: #d0d0d0;
    color: #202020;
    padding:4px;
    /*font-size: 14px;*/
}
textarea, input, select, .file_upload, .textfield_readonly, .form-control, .form-control-rating {
    margin:4px 0px 8px 0px;
}
button {
    margin:0px 0px 0px 0px;
}

textarea { font-size: 1.0em; font-family: 'Open Sans', sans-serif; min-height: 46px; }
input[type=file] { margin:0px 0px 0px 0px; padding: 0px 0px 0px 0px; opacity:0;}
.file_upload_fieldset{width:375px; margin-top:10px;}
.file_upload_input{display:inline-block; width:0px}
.file_upload_label{ height:auto;}
a{ text-decoration:none; color:inherit;}
b,strong{ font-weight:bold; }
hr{border:solid #000000 0.5px;}
.file_upload {background: #FFFFFF; }
.noBreak {white-space:nowrap;}
.fa  { line-height: 1.5 !important; }   /* fontawesome: Icons fallen kleiner aus => Filter-Icon analog boddy*/
.iconClickable{color:#505050}  /* #d0d0d0 */
fieldset { 
    border-radius:3px;
    margin: 2px;
    padding: 0.4em;
    border: thin solid #d0d0d0;
    width: fit-content;
}

.form-control-rating {padding-top:0px; background-color:#d0d0d0;}

/* Modal DLG */
.modal {                /* The Modal (background) */
    display: none;      /* Hidden by default */
    position: fixed;    /* Stay in place */
    z-index: 1;         /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;                    /* Enable scroll if needed */
    background-color: rgb(0,0,0);      /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {  /* Modal Content */
    background-color: #fefefe;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 86%;
    max-width: 500px;
}
.closeModalDLG {  /* The Close Button */
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.closeModalDLG:hover, .closeModalDLG:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.modal-backdrop {
    position: relative;  /* SSV 2021 Modal-DLG Legende (?-Symbol) */
}

/* html tab */
.tabbuttonactive  { background: #E0F0FA; font-weight: bold; border: 0px solid black; padding:3px; border-bottom: 0px solid black; margin-left:-3px; margin-right:8px;float:left }
.tabbutton        { background: #CCCEEE;                    border: 0px solid black; padding:3px; border-bottom: 0px solid black; margin-left:-3px; margin-right:8px;float:left }
#tabcontent       { background: #E0F0FA; width:98%; padding:3px; clear:both; }
#tabbuttons       { padding:3px;}
.tabcontentactive { display:inline; }
.tabcontent       { display:none; }

.legende { border-collapse: separate; border-spacing: 10px 5px; }
.legendeScrollbalken {height: 250px; width: 100%; overflow:auto; }

/* collapsible */
.collapsible {
            background-color: transparent;
            cursor: pointer;
            padding: 13px 0px 5px 0px;
            width: 100%;
            border: none;
            border-bottom: 1px solid;
            border-radius:0px;
            text-align: left;
            outline: none;
}
.collapsible:after {
            content: '\002B';
            font-weight: bold;
            float: right;
            margin-left: 5px;
}
.collapsible_active:after {
            content: "\2212";
}
.collapsible_content {
            padding: 0 18px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
}
.collapsible.disabled, .collapsible.disabled:after, .collapsible_active.disabled:after{
    content: '';
    cursor:default;
}


/* Mobiler View */
.toggleMobile a{
    cursor: pointer;
}

#mobileMenu
{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: none;
}

#mobileMenu ul li
{
        display:block;
        background-color: #E56038;
        color: #fff;
        padding: 12px 0;
        letter-spacing: 0.1em;
        text-align: center;
        /* text-transform: uppercase; */
        border-bottom: 1px solid #CC5836;
}

.toggleMobile { display: none; }



/* SKIPLINK */
.go-top
{
        position: fixed;
        bottom: 2em;
        right: 2em;
        text-decoration: none;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 12px;
        padding: 1em;
        display: none;
}
.go-top:hover{
        background-color: rgba(0, 0, 0, 0.6);
}

/* Workarount Redaktion ssv */
.url_table_text_editorial {
    color: rgba(0, 0, 0, 0.6);
}

/* Filterbox ListView */
.filterblockL  .filterblocktext {left: -20px; text-align: left;}
.filterblockR  .filterblocktext {right:-20px; text-align: right;}
.filterblockL, .filterblockR { position: relative; display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.filterblockL .filterblocktext, .filterblockR .filterblocktext {    /* The actual popup */
    visibility: hidden;
    width:200px;
    height:250px;
    background-color: #fff;
    border-radius: 6px;
    padding: 6px;
    position: absolute;
    z-index: 1;
    top: +10;
    overflow-y: auto;
}
.filterblockL .show, .filterblockR .show { visibility: visible; }  /* Toggle this class - hide and show the popup */
.filterSelected   { color: #409FFF;}
.filterUnselected {}


/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */
@media (max-width: 767px){
    textarea, input, select, .file_upload, .textfield_readonly, .form-control, .form-control-rating{
	width: 100%;
    }
    
    .file_upload_fieldset{
	width: 100%;
    }
}

@media (min-width: 768px)
{
    .w-md-auto{
	width:auto;
    }
}



/* KEYFRAMES */

@keyframes stylie-transform-keyframes {
  0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes {
  0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}