@font-face { font-family: 'FontAwesomeRegular'; src: url(/_fonts/FontAwesome/fa-regular-400.ttf) format('truetype') }
@font-face { font-family: 'FontAwesomeSolid';  src: url(/_fonts/FontAwesome/fa-solid-900.ttf) format('truetype')}
@font-face { font-family: 'FontAwesomeBrands'; src: url(/_fonts/FontAwesome/fa-brands-400.ttf) format('truetype')}

html {
	--color-profielaccent:#666; /* zie ook main.css was lichtblauw: #36b4e5;*/
}

.dashboardBanner {width: 100%; text-align: center; background:#e8e8e8}
.dashboardBanner img {max-width:100%; height: auto;}

.wrapper {display: flex; flex-wrap: wrap; justify-content:flex-start; max-width: 1680px; padding: 20px; margin: 0 auto;}
section#main p {max-width: 1000px;}

.rubriek.titel h2 {font-size: 1.2em; position: relative; margin: 0; color: #000; background: var(--color-basis); height: 80px; padding: 0 10px; display: flex; align-items: center}
.rubriek.titel h2:before {position: relative; content:''; display: block; width: 50px; height: 50px; margin-right: 5px; background: url(../img/solar-solutions-symbol-black.png) no-repeat center; background-size: cover}
.inner.flex.flex-multi {display: block; text-align: left; width: calc(25% - 20px); margin: 0 10px;}
/* .inner.flex.flex-multi:first-of-type {order: 4; display: block; width: calc(25% - 40px); padding: 10px; margin: 0 10px 30px 10px;border: solid 0px #000; text-align: center; } */
.flex-item {border: solid 1px transparent; border-radius: 0; margin: 0; }

.companyData{display: flex; width: 100%;height: auto; max-width: 1400px; margin: 25px auto 0; padding: 0 10px; }
.companyDataLeft{display: flex; justify-content:flex-start;  align-items:center; width:calc(100% - 300px); padding-left: 0px;}
.companyDataLeft:before {content:'';display: inline-block; width: 30px; height: 30px; margin-right: 15px; background: url(../img/icon-bedrijven.png) no-repeat center; background-size: cover}
.companyDataLeft p {color: #000; font-weight: bold; margin: 0; padding: 0; }
.companyDataLeft p a {font-weight: normal;}
.companyDataLeft p:first-of-type { order: 2; margin: 0 0 0 40px; }
.companyDataLeft p img { max-height: 100px; }
.companyDataRight{display: flex; flex-direction: column; text-align: right; width: 500px; padding-right: 20px;border:0px solid red}
.companyDataRight p {margin: 5px 0; padding: 0;}
.companyDataRight p button {margin: 0px; padding: 0;display: inline; }

.content h3 {font-size: 1em;color: #000; margin: 0; display: flex; align-items: center; padding: 0; }
.content h3:before,.content p.statusToGreenshows a::before {position: relative; font-family:"FontAwesomeSolid"; font-size: 20px; color: #666;content:''; display: inline-block; width: 30px; height: 30px; margin-right: 10px; background: url(../img/solar-solutions-symbol-black.png) no-repeat center; background-size: cover}

.content h3#bedrijfsgegevens:before {content:'\f304'; background: none;}
.content h3#producten:before {content:'\f029'; background: none;}
.content h3#videos:before {content:'\f03d'; background: none;}
.content h3#downloads:before {content:'\f019'; background: none;}
.content h3#nieuwsbericht:before {content:'\f1ea'; background: none;}
.content h3#handelspleinadvertentie:before {content:'\f12a'; background: none;}
.content h3#vacatures:before {content:'\f807'; background: none;}
.content h3#agendaitem:before {content:'\f073'; background: none;}
.content h3#banners:before {content:'\f641'; background: none;}
.content h3#advertorial:before {content:'\f519'; background: none;}
.content h3#upgrade:before {content:'\f055'; background: none;}
.content h3#toGreenshows::before{content:'\f274'; background: none;}
.content p.statusToGreenshows a{font-size: 1em;color: #000;}
.content p.statusToGreenshows a::before{content:'\f35d'; background: none;}

.content p{ margin-left: 40px;}
.content p.status { position: relative;  color: #999; margin-left: 70px;}
.content p.status:before {position: absolute; font-family:"FontAwesomeSolid"; font-size: 20px; color: #999;content:'\f0a4'; top: 0; left: -30px; display: block;  }

.inner {font-family: 'Montserrat-Regular', sans-serif;font-size: 1vw; }
@media screen and (min-width:1900px) {
    .inner { font-size: 19px; }
    }
@media screen and (max-width: 1000px) {
    .inner { font-size: 12px; }
}
.inner h2 { font-weight: 700; font-size: 1.5em; color: #1d1d1b;padding: 10px 0 0px 0;line-height: 1.5em;  }
.inner p {font-size: 1em;}
.inner a {color:var(--color-donkergrijs);; text-decoration: underline;}
.inner a:hover {color:var(--color-donkergrijs);; text-decoration: none;}

.panel li a {color:#aaa; border-radius: 0;}
.panel li a:hover {color:#1d1d1b; border-color:#1d1d1b; background-color: #fff;}

.panel li a.activeTag {background: var(--color-menu-basis); color:#1d1d1b }
.panel li a:hover.activeTag {background: var(--color-menu-basis); }
.panel li a.inactiveTag {color:#aaa; border-radius: 0; }
.panel li a:hover.inactiveTag {color:#aaa; background: #fff; }

.accountRow {margin-bottom: 30px;}
.account img { max-width: 100% !important}

a.button.alt {border-radius: 0;border: 0; background: #fff;}
a:hover.button.alt {color:#231f20!important; box-shadow: 0 0 10px var(--color-menu-basis);background: #fff;}

/*CKEditor*/
a.cke_notification_close{color:#fff;border:1px solid #fff;background: none;}
a.cke_notification_close .cke_label{color:#fff!important;}
a.cke_notification_close span{display: block;margin-top:-3px}

/* kleur anders tov /assets/css/main.css */
.txt a {color: var(--color-profielaccent);}
a {color: var(--color-profielaccent);}
button.btn {border-color: var(--color-profielaccent); color: var(--color-profielaccent); border-radius: 0; }
button.btn:hover {color: #fff; background: var(--color-profielaccent);}
button.click {border-color: var(--color-profielaccent); color: var(--color-profielaccent); }
button.click:hover {color: #fff; background: var(--color-profielaccent);}
input[type=submit] {border-radius: 0; color:var(--color-profielaccent); border-color: var(--color-profielaccent); margin-right: 5px;}
input[type=submit]:hover {color: #fff; background: var(--color-profielaccent);border-color: var(--color-profielaccent);}


section#calltoAction { background: url(../img/cta.jpg) no-repeat center center}

footer#footer {background: #000; color:#fff;}
footer#footer a {color:#fff;}
footer#footer .copyright {color:#fff;}



@media screen and (max-width:1320px) {
    .inner.flex.flex-multi { order: 2; width: calc(50% - 20px);}
    .inner.flex.flex-multi:first-of-type {order: 1; width: calc(50% - 40px);}
}


@media screen and (max-width:600px) {
    .inner.flex.flex-multi { order: 2; width: calc(100% - 20px);}
    .inner.flex.flex-multi:first-of-type {order: 1; width: calc(100% - 40px);}
    .companyData{flex-direction: column; }
    .companyDataLeft{ width: auto; }
    .companyDataRight{text-align: center; width: auto; }
}