/* 
CSS file met custom styling voor alle componenten binnen CNV evenementen portal.
Baseline van dit bestand komt uit de custom code die is toegevoegd aan het theme.css bestand van de MijnCNV portal.
Best practice om custom styling niet aan theme.css bestand toe te voegen maar los te trekken, dus vandaar dit bestand.
*/


/* Nieuwe CSS styling voor CNV evenementen portal */

.navbar.navbar-dark {
  background-color: #683282 !important;
}

.background-logo  {
  border-bottom-right-radius: 11px;
  margin-bottom: 12px;
  padding: 12px;
}

.logo_svg {
  color: #782081;
}

.logo:hover .logo_svg {
  color: #683282ba;
}

h1 {
  font-family:  Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
}

body {
  font-family:  Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
  color: #371548 !important;
  background-color: #f3edf2 !important; 
}

p {
  font-family:  Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
  color: #371548 !important;
}

.intro-calendarcontrol {
    font-family:  Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
}

div#CardGallery h4, 
div#CardGallery p {
    font-family:  Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
    color: #371548 !important;
}

.ms_lay1_card {
  background-color: var(--bs-white) !important;
}

div#CardGallery .ms_lay1_card > div {
  min-height: 25px !important;
}

div#CardGallery .ms_lay1_card > div[style*="margin: 8px 0px"] {
  max-height: 80px;
  overflow-y: auto;
}

.button1 {
  font-family:  Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
  background-color: #FFBE46 !important;
  color: #371548 !important;
  border: none !important;
}


.eventintroname,
.eventfontfamily,
#eventDetails,
#address-line-1,
#city,
#postalcode,
#about,
.speaker-name,
#all-events-link {
  font-family: Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
  color: #371548 !important;
}

.multiline-text {
  white-space: pre-line;
}

button[id^="toggleSessionsBtn"] {
  font-family: Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
  color: #371548 !important;
}

.card-header {
  background-color: #f3edf2 !important;
  color: #371548 !important;
  font-family: Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
}

.submitbutton {
  font-family:  Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
  background-color: #FFBE46 !important;
  color: #371548 !important;
  border: none !important;
}


footer .footer-top {
  background-color: #683282 !important;
  border-top-left-radius: 50px;
  padding-bottom: 3.25rem;
  }

  footer .footer-top h4 {
    color: #ffffff !important;
    font-family:  Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
    font-size: 20px !important;
    margin-bottom: 2px !important;
  }

  footer .footer-top p {
    color: #ffffff !important;
    font-family:  Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    margin-bottom: 20px !important;
  }

  footer .footer-top a {
    color: #ffffff !important;
    font-family:  Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
  }

footer .footer-bottom {
  background-color: #371548 !important;
  }

  footer .footer-bottom p {
    font-family:  Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
  }

  a {
    color: #371548 !important;
    font-family:  Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
  }

  .email {
    font-size: 20px !important;
    text-decoration: underline !important;
  }


/* CSS styling vanuit mijnCNV portal */

.has-error{
  color:#FF0000 !important;
  border-color: #FF0000;
}

.has-error .form-control{
  color:#FF0000; 
  border-color:#FF0000;
}	   
.form-custom-actions{
  padding-left:3.5%;
}
.message span {
    padding-left:2.5%;
}

.section-diagonal-left .row, .section-diagonal-right .row{
  display:none;
}
.crmEntityFormView .actions {
      padding-left: 3.5%;
}

.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
  background-color: #fff;
}

.navbar-toggle{
  margin-top: -43.5px;
}

a.weblink.list-group-item:hover,
a.weblink.list-group-item:active {
background-color: #D4CAD7;
font-weight: bold;
color:#371548;
}

a.list-group-item, button.list-group-item {
    color: #371548;
}

.list-group-item {
    position: relative;
    color:#371548;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #D4CAD7;
}

.span.button__text{
  color:#371548;
}

.sectionPrimaryColor .crmEntityFormView h1,
.sectionPrimaryColor .crmEntityFormView h2,
.sectionPrimaryColor .crmEntityFormView h3,
.sectionPrimaryColor .crmEntityFormView h4,
.sectionPrimaryColor .crmEntityFormView h5,
.sectionPrimaryColor .crmEntityFormView h6 {
    color: #371548
}

.sectionPrimaryColor .entitylist h1,
.sectionPrimaryColor .entitylist h2,
.sectionPrimaryColor .entitylist h3,
.sectionPrimaryColor .entitylist h4,
.sectionPrimaryColor .entitylist h5,
.sectionPrimaryColor .entitylist h6 {
    color: #371548
}


h1 {
    font-family: Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 40px;
    font-weight: bold;
    color:#371548;
}

h2 {
    font-family: Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif;
    color:#371548;
    font-size: 36px;
    font-weight: bold;
}

h3 {
    font-family: Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif !important;
    font-size: 30px;
    color:#371548 !important;
    font-weight: bold;
}
h4 {
    font-family: Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: bold;
    color:#371548;
    font-size: 20px;
}
h5 {
    font-family: Graphik Webfont, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: bold;
    color:#371548;
    font-size: 18px;
}


.table>thead:first-child>tr:first-child>th {
  color:#782081;
}
.crmEntityFormView .cell .field-label  {
  color:#782081;
}
.blue_border{
display:none;
}

.well{
  display:none !important;
}


legend {
  color: #371548; }

.breadcrumb {
  background-color: transparent; }
  .breadcrumb > li a {
    color: #371548;  }
    .breadcrumb > li a:hover {
      color: #371548;  }
  .breadcrumb > .active {
    color: #371548;  }

.nav-tabs > li > a:hover {
  background-color: #683282; 
  color: #fff;  }

.nav-tabs > li > a:focus {
  background-color: #683282; 
  color: #fff; }

.btn-default {
  color: #371548;
  background-color: #ffbe46;
  border-color: #ffbe46;
  border: 0px;
  border-radius: 6px;  
  margin-bottom: 5px;
  }
  .btn-default:hover {
    color: #371548;
    background-color: #e8a33f;
    border: 0px;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    }
  .btn-default:active, .btn-default.active {
    color: #371548;
    background-color: #e8a33f;
    border: 0px;
   
    }
    .btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus, .btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus {
      color: #371548;
      background-color: #e8a33f;
      border: 0px;
    
      }
  .btn-default:focus, .btn-default.focus {
    color: #371548;
    background-color: #e8a33f;
    border: 0px;
    }

.btn-primary {
  color: #371548;
  font-weight: bold;
  background-color: #ffbe46;
  border: 0px;
  border-radius: 6px;
  margin-bottom:5px;
  }
  .btn-primary:hover {
    color: #371548;
    background-color: #e8a33f;
    border: 0px;
    border-radius: 6px;
    }
  .btn-primary:active, .btn-primary.active {
    color: #371548;
    background-color: #e8a33f;
    border: 0px;
    border-radius: 6px;
    }
    .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus {
      color: #371548;
      background-color: #e8a33f;
      border: 0px;
      border-radius: 6px;
     }
  .btn-primary:focus, .btn-primary.focus {
    color: #371548;
    background-color: #e8a33f;
    border:0px;
    border-radius: 6px;
    }

.navbar-static-top.navbar-inverse {
  background-color: #e6ebf0; }

.navbar-toggle {
  background-color: #683282; }

.navbar-inverse .navbar-toggle {
  border: 1px solid #683282; }
  .navbar-inverse .navbar-toggle:hover {
    background-color: #683282;; }
  .navbar-inverse .navbar-toggle:focus {
    border: 1px solid #683282;
    background-color: #683282; }

.navbar-inverse .navbar-nav > li > a {
  color: #fff;  }
  .navbar-inverse .navbar-nav > li > a:hover {
    background-color: #fff;
    color: #683282;}
  .navbar-inverse .navbar-nav > li > a:focus {
    background-color: #fff;
    color: #683282; }

.navbar-inverse .navbar-nav > .open > a {
  color: #fff;
  background-color: #683282;}
  .navbar-inverse .navbar-nav > .open > a:hover {
    color: #fff;
    background-color: #683282; }
  .navbar-inverse .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: #683282;}

.navbar-inverse .navbar-nav .open .dropdown-menu {
  background-color: #683282; }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #fff; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
      background-color: #683282;
      color: #fff; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
      background-color: #683282;
      color: #fff; }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a {
    background-color: #683282;
    color: #fff;}
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover {
      background-color: #683282;
      color: #fff; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
      background-color: #683282;
      color: #fff;}

.nav > li > a:hover {
  background-color: #f2f2f2; }

.nav > li > a:focus {
  background-color: #f2f2f2; }

.nav .open .dropdown-menu {
  background-color: #ffffff; }
  .nav .open .dropdown-menu > li > a {
    color: #000000; }
    .nav .open .dropdown-menu > li > a:hover {
      background-color: #f2f2f2;
      color: #000000; }
    .nav .open .dropdown-menu > li > a:focus {
      background-color: #f2f2f2;
      color: #000000; }
  .nav .open .dropdown-menu > .active > a {
    background-color: #f2f2f2;
    color: #000000; }
    .nav .open .dropdown-menu > .active > a:hover {
      background-color: #f2f2f2;
      color: #000000; }
    .nav .open .dropdown-menu > .active > a:focus {
      background-color: #f2f2f2;
      color: #000000; }

.nav > .open > a {
  background-color: #f2f2f2; }
  .nav > .open > a:hover {
    background-color: #f2f2f2; }
  .nav > .open > a:focus {
    background-color: #f2f2f2; }

.sectionPrimaryColor {
  background-color: #782081;
  color: #000000; }
  .sectionPrimaryColor h1, .sectionPrimaryColor h2, .sectionPrimaryColor h3, .sectionPrimaryColor h4, .sectionPrimaryColor h5, .sectionPrimaryColor h6 {
    color: #000000; }
  .sectionPrimaryColor .crmEntityFormView h1, .sectionPrimaryColor .crmEntityFormView h2, .sectionPrimaryColor .crmEntityFormView h3, .sectionPrimaryColor .crmEntityFormView h4, .sectionPrimaryColor .crmEntityFormView h5, .sectionPrimaryColor .crmEntityFormView h6 {
    color: #000000; }
  .sectionPrimaryColor .entitylist h1, .sectionPrimaryColor .entitylist h2, .sectionPrimaryColor .entitylist h3, .sectionPrimaryColor .entitylist h4, .sectionPrimaryColor .entitylist h5, .sectionPrimaryColor .entitylist h6 {
    color: #000000; }

a {
  color: #782081; }
  a:hover {
    color: #782081;
    text-decoration: underline; }
  a:focus {
    color: #782081;
    text-decoration: underline; }

.open > .btn-default.dropdown-toggle {
  color: #782081;
  background-color: #e6e6e6;
  border-color: #782081; }

.open > .btn-primary.dropdown-toggle {
  color: #ffffff;
  background-color: #782081;
  border-color: #782081; }
  .open > .btn-primary.dropdown-toggle:hover, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus {
    color: #ffffff;
    background-color: #782081;
    border-color: #782081; }

.crmEntityFormView, .entitylist, .popover-content {
  background-color: #fff;
  color: #000000;
  border: 1px solid #fff;}

.modal-content {
  background-color: #fff;
  color: #000000;
  border: 1px solid #fff;
  width:97%;
}

.panel-default > .panel-body, .list-group-item {
  background-color: #f3edf2;
  color: #782081 }

.panel-default > .panel-heading {
  background-color: #f2f2f2;
  color: #782081 }

.facet-list-group-item-title {
  color: #782081 }

.form-control {
  background-color: #fff !important;
  color: #782081 }

input {
  background-color: #ffffff; }

.bootstrap-datetimepicker-widget {
  background-color: #ffffff; }
  .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td span:hover {
    color: black; }
  .bootstrap-datetimepicker-widget table td.active:hover, .bootstrap-datetimepicker-widget table td span.active:hover {
    color: white; }

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: unset; }

.login-heading-section {
  color: unset; }

.navbar-static-top.navbar-inverse .navbar-brand a {
  color: #000000; }

.search-results .highlight {
  color: #000000; }

.table > thead > tr.info > td {
  background-color: #f2f2f2; }

.table > thead > tr.info > th {
  background-color: #f2f2f2; }

.table > thead > tr > td.info {
  background-color: #f2f2f2; }

.table > thead > tr > th.info {
  background-color: #f2f2f2; }

.table > tbody > tr.info > td {
  background-color: #f2f2f2; }

.table > tbody > tr.info > th {
  background-color: #f2f2f2; }

.table > tbody > tr > td.info {
  background-color: #f2f2f2; }

.table > tbody > tr > th.info {
  background-color: #f2f2f2; }

.table > tfoot > tr.info > td {
  background-color: #f2f2f2; }

.table > tfoot > tr.info > th {
  background-color: #f2f2f2; }

.table > tfoot > tr > td.info {
  background-color: #f2f2f2; }

.table > tfoot > tr > th.info {
  background-color: #f2f2f2; }

.table-hover > tbody > tr:hover {
  background-color: #f2f2f2; }

.table-hover > tbody > tr > td.info:hover {
  background-color: #f2f2f2; }

.table-hover > tbody > tr > th.info:hover {
  background-color: #f2f2f2; }

.table-hover > tbody > tr.info:hover > td {
  background-color: #f2f2f2; }

.table-hover > tbody > tr.info:hover > th {
  background-color: #f2f2f2; }

.table-hover > tbody > tr:hover > .info {
  background-color: #f2f2f2; }

.form-close {
  color: #000000; }
  .form-close:hover {
    color: #000000 !important; }
  .form-close:focus {
    color: #000000 !important; }

::placeholder {
  color: #000000 !important; }

.help-block {
  color: #782081 !important; }

.view-pagination .pagination {
  padding-left:0px;
  display:flex;
  justify-content: center;
  padding-bottom:10px;
}
  
.pagination > li > a, .pagination > li > span {
  padding-top:9px;
}
  
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover{
  background-color: #683282!important;
}