Template:Portal flex/styles.css

/**Portalpage with flex EN ****/
 .flexbox-portal .oo-ui-icon-link.sectionanchors-button {
    background-image:none;
}
 .flexbox-portal {
    display: flex;
     flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
     align-items: stretch;
    align-content: stretch;
     gap:30px
}
 .flexbox-portal .content {
    padding:20px
}
 .flexbox-portal > div {
    flex:1;
     padding: 10px 20px;
}
 .flexbox-portal > div img {
    max-width:100%;
     height:auto;
}
 .flexbox-portal.col2 > div {
    flex-basis:47%;
     padding: 0;
}
 .flexbox-portal.col3 > div {
    flex-basis:30%;
}
 .flexbox-portal.fullfirst div:first-child {
    flex-basis:100%
}
 .flexbox-portal.fulllast div:last-child {
    flex-basis:100%
}
 .flexbox-portal.boxborder > div {
    border-radius: 0.375rem;
}
 .flexbox-portal.boxborder.p-blue > div {
    border: 1px solid #aed6f1;
}
 .flexbox-portal.boxborder.p-green > div {
    border: 1px solid #a9dfbf;
}
 .flexbox-portal.boxborder.p-grey > div {
    border: 1px solid #e9e9ee;
}
 .flexbox-portal.boxborder.p-orange > div {
    border: 1px solid #f5cba7;
}
 .flexbox-portal.boxborder.p-purple > div {
    border: 1px solid #d7bde2;
}
 .flexbox-portal.boxborder.p-red > div {
    border: 1px solid #e6b0aa;
}
 .flexbox-portal.boxborder.p-yellow > div {
    border: 1px solid #f9e79f;
}
 .flexbox-portal.boxborder.p-white > div {
    border: 1px solid #ffffff;
}
 .flexbox-portal.none > div {
    border: none;
}
 .flexbox-portal.boxborder > div.emptybox {
    border: none
}
 .flexbox-portal.background > div {
     border: 1px solid #f1f3f9;
     border-radius: 0.375rem;
    margin: 0;
}
 .flexbox-portal.background-hd.p-blue div > h2 {
    background: #aed6f1;
}
 .flexbox-portal.background-hd.p-green div > h2 {
    background: #a9dfbf;
}
 .flexbox-portal.background-hd.p-grey div > h2 {
    background: #f1f3f9;
    ;
}
 .flexbox-portal.background-hd.p-orange div > h2 {
    background: #f5cba7;
}
 .flexbox-portal.background-hd.p-purple div > h2 {
    background: #d7bde2;
}
 .flexbox-portal.background-hd.p-red div > h2 {
    background: #e6b0aa;
}
 .flexbox-portal.background-hd.p-yellow div > h2 {
    background: #f9e79f;
}
 .flexbox-portal.background-hd.p-white div > h2 {
    background: #ffffff;
}
 .flexbox-portal div h2 span.hdicon i:before {
    color:#c9d0e4;
     font-size:1.4rem;
     margin-right:0.4rem;
     margin-left:-12px;
     vertical-align:-0.1rem
}
 .flexbox-portal.background.p-blue > div {
    background: #d6eaf8 ;
}
 .flexbox-portal.background.p-green > div {
    background: #d4efdf;
}
 .flexbox-portal.background.p-grey > div {
    background: #f1f3f9
}
 .flexbox-portal.background.p-orange > div {
    background: #fae5d3;
}
 .flexbox-portal.background.p-purple > div {
    background: #ebdef0;
}
 .flexbox-portal.background.p-red > div {
    background: #f2d7d5;
}
 .flexbox-portal.background.p-yellow > div {
    background: #fcf3cf;
}
 .flexbox-portal.background.p-white > div {
    background: #ffffff;
}
 .flexbox-portal > div.box.p-blue {
    background: #d6eaf8;
}
 .flexbox-portal > div.box.p-green {
    background: #d4efdf;
}
 .flexbox-portal > div.box.p-grey {
    background: #f1f3f9
}
 .flexbox-portal > div.box.p-orange {
    background: #fae5d3;
}
 .flexbox-portal > div.box.p-purple {
    background: #ebdef0;
}
 .flexbox-portal > div.box.p-red {
    background: #f2d7d5;
}
 .flexbox-portal > div.box.p-yellow {
    background: #fcf3cf;
}
 .flexbox-portal > div.box.p-white {
    background: #ffffff;
}

 .flexbox-portal .listicon li {
     padding-left: 0 
}
 .flexbox-portal .listicon li:before {
     content: "\f111";
    /* FontAwesome Unicode */
     font-family: FontAwesome;
     color:#989898;
     display: inline-block;
     margin-left: 5px;
     width: 20px;
     font-size:0.5rem 
}
 .flexbox-portal.background div.emptybox {
    background: none
}
 .flexbox-portal div > h2 {
    font-size: 1.1em;
     border-bottom: none;
     padding: 10px 20px;
     font-weight: bold;
     margin:0
}
 .flexbox-portal.underline-hd div > h2 {
    font-size: 1.1em;
     background:none;
    border-bottom: 1px solid #8b8b8b;
    margin-top: 0;
     padding: 10px;
     font-weight: bold;
}
 .flexbox-portal.hide-hd div > h2 {
    display:none;
}
 .flexbox-portal h1 .mw-editsection, .flexbox-portal h2 .mw-editsection, .flexbox-portal h3 .mw-editsection, .flexbox-portal h4 .mw-editsection, .flexbox-portal h5 .mw-editsection, .flexbox-portal h6 .mw-editsection {
    display:none;
}
 .mw-parser-output .bs-layout-container.intro-text {
    font-size: 1.2em;
}
 h3 {
    font-size: 1.6em;
}
 .ve-ce-surface-enabled .ve-ce-branchNode-blockSlug {
    visibility: hidden;
    display: none;
}
 .thumbborder {
    border: 1px solid #e5e5e5;
}
 #use_cases .flexbox-portal div h2 {
    padding:20px 20px 0 20px
}
 #use_cases .flexbox-portal p {
    padding:20px
}
 .flexbox-portal h1 .mw-editsection, .flexbox-portal h2 .mw-editsection, .flexbox-portal h3 .mw-editsection, .flexbox-portal h4 .mw-editsection, .flexbox-portal h5 .mw-editsection, .flexbox-portal h6 .mw-editsection {
    display:none;
}
 @media only screen and (max-width: 768px) {
     .flexbox-portal > div {
        width: 98%;
    }
}
/**Formular **/
 #pfForm section.ve-ce-branchNode a img {
    max-width:100% !important;
     height:auto !important;
}
/**im Formular **/
 .formtable th {
    text-align:right;
     padding:10px;
     background:#efefef;
     font-weight:normal;
}
 .formtable td {
    padding:10px;
}
 .bs-mwvisualeditor-field-container {
    max-width:850px;
}
 .bs-mwvisualeditor-field-container img {
    max-width:100%;
     height:auto;
}
 @media only screen and (max-width: 768px) {
    .flexbox-portal, .flexbox-portal.col2, .flexbox-portal.col3 > div {
        flex-basis: 98%;
    }
}
/**Formular **/
 #pfForm section.ve-ce-branchNode a img {
    max-width:100% !important;
     height:auto !important;
}
/**im Formular **/
 .formtable th {
    text-align:right;
     padding:10px;
     background:#efefef;
     font-weight:normal;
}
 .formtable td {
    padding:10px;
}
 .bs-mwvisualeditor-field-container {
    max-width:850px;
}
 .bs-mwvisualeditor-field-container img {
    max-width:100%;
     height:auto;
}