/* 
/* 
/*  custom.css
/*
/*  If not using Gulp and Sass, add your custom CSS below then include it
/*  in your page by adding a reference to assets/css/custom.css in the head of each page.
/*
*/
/* VE: 7-5-2019 added for multilanguage label support -> class="lang lang_nl" 
=================================================================================*/
.lang {
    display:none;
}

.lang.lang_nl {
	display:inline;
}
.lang.lang_en {
	display:none;
}
.lang.lang_de {
	display:none;
}
.lang.lang_fr {
	display:none;
}
// The CSS for the colored dot that represents your current status
.color-dot {
  -moz-border-radius: 30px; /* or 50% */
  border-radius: 30px;
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:5px;
  }
.color-dot.critical {
  -moz-border-radius: 30px; /* or 50% */
  border-radius: 30px;
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:5px;  
  background-color:#e33d3d;
}
.color-dot.major {
  -moz-border-radius: 30px; /* or 50% */
  border-radius: 30px;
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:5px;  
  background-color:#fbc02d;
}
.color-dot.minor {
  -moz-border-radius: 30px; /* or 50% */
  border-radius: 30px;
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:5px;  
  background-color:#fbc02d;
}
.color-dot.none {
  -moz-border-radius: 30px; /* or 50% */
  border-radius: 30px;
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:5px;  
  background-color:#66ba0b;
}
/* VE: 4/8 cusom css van yoobi.nl en yoobicrm.nl 
================================================= */
/* VE: adjustment for xtra large screens (1440px+) 
================================================= */
@media only screen and (min-width: 1440px) {
.container {
    max-width: 1440px;
}
}
/* VE: end adjustment for xtra large screens (1440px+) 
================================================= */
.modal-content iframe{
    background: transparent !important;
}
.zoomeffect{
    
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1); 
}
.zoomeffect:hover{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}
.highlight:hover {
    transform: scale(1.02);
}
/* VE: 6-2-2020: appwiki landingpages  */
.bg-purple-gradient {
    background: linear-gradient(45deg,#688dfc,#673ab7);
}
.toggle {
  display: none;
}

.toggle__label {
  padding-left: 45px;
  position: relative;
  height: 30px;
  line-height: 30px;
  color: white;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
}


.toggle__label:hover {
  color: white;
}


.toggle__label:before {
  content: '';
  height: 20px;
  border-radius: 10px;
  position: absolute;
  top: 5px;
  width: 35px;
  left: 0;
  background-color: white;
}

.toggle__label:after {
  content: '';
  height: 18px;
  border-radius: 9px;
  position: absolute;
  top: 6px;
  width: 18px;
  left: 2px;
  background-color: #688dfc;
  transition: left 150ms ease-in-out;
}

.toggle:checked + .toggle__label {
  color: white;
}


.toggle:disabled + .toggle__label:after {
  opacity: 0.7;
  cursor: not-allowed;
  background-color: #aaa;
}

.toggle:checked + .toggle__label:after {
  left: 15px;
}
.tabs {
  text-align: center;
  display: block;
  color: white;
  padding: 0;
  margin-bottom: 0;

  &__radio{
    display: none;
  }

  &__tab {
    display: inline-block;
    list-style: none;
    border-bottom: 2px solid transparent;
    margin: 0 10px 20px 10px;
    padding: 0 5px;
    cursor: pointer;

    &:hover {
        display: inline-block;
        list-style: none;
        border-color: rgba(255,255,255,0.5);
    }

  }

  &__radio:checked + .tabs__tab {
    border-color: white;
  }
}
.tabs__radio{
  display: none;
}
.tabs__tab {
  display: inline-block;
  list-style: none;
  border-bottom: 2px solid transparent;
  margin: 0 10px 20px 10px;
  padding: 0 5px;
  cursor: pointer;
}
.tabs__tab:hover {
  display: inline-block;
  list-style: none;
  border-color: rgba(255,255,255,0.5);
}

.tabs__radio:checked + .tabs__tab {
  border-color: white;
}
.bg-skewed-grey-white {
    background: linear-gradient(178.5deg,#f0f0f0 50%,#fff 51%,#fff);
    min-height: 60px;
}
.bg-skewed-white-grey {
    background: linear-gradient(178.5deg,#fff 50%,#f0f0f0 51%,#f0f0f0);
    min-height: 60px;
}
.pricing-card__btn {
    /*display: block;*/
    border-radius: 4px;
    background-color: #fff;
    color: #688dfc;
    line-height: 44px;
    text-align: center;
    text-decoration: none;
    border: 2px solid #688dfc;
    -webkit-transition: background-color .2s,border-color .2s;
    transition: background-color .2s,border-color .2s;
    box-shadow: 0 0 10px rgba(104,141,252,.3);
    font-weight: bolder;
    padding: 0 10px;
}
.pricing-card__btn--filled{
    background-color: #688dfc !important;
    border-color: #688dfc !important;
    color: #fff !important;
}
.pricing-card__btn--filled:hover {
        background-color: #4f7afb !important;
        border-color: #4f7afb !important;
        color: white !important;
}


/* VE: special card css (4/8)
====================================== */
.beam-left{
  border-left: 30px solid rgba(82, 170, 221, 0.85);
    box-shadow: 4px 4px 12px rgba(0,0,0,.25);
    padding: 20px 24px 30px;
    transition: all 150ms ease-in;
}

.card[data-toggle=tab]:not([aria-selected=true]) .beam-left{
  border-left-color: rgb(241, 248, 252);
  box-shadow: 1px 2px 6px rgba(0,0,0,.25);
  padding: 20px 24px 30px;
  transition: all 150ms ease-in;  
}
.card[data-toggle=tab]:not([aria-selected=true]):hover {
    background-color: #f2f3f5; /*yoobi software bg color*/
} 
/* VE: card-columns adjustments 
===================================== */
@media only screen and (min-width: 576px) {
.card-columns {  
    column-count: 1;
  }
}
@media only screen and (min-width: 768px) {
.card-columns {  
    column-count: 2;
  }
}
@media only screen and (min-width: 992px) {
.card-columns {
    column-count: 3;
  }
}
@media only screen and (min-width: 1200px) {
.card-columns {
    column-count: 3;
  }
}
@media only screen and (min-width: 1440px) {
.card-columns {
    column-count: 4;
  }
}
/* VE: fix for anchor links and header
===================================== */
:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

.card-border-primary {
    border-left: 10px solid #0052CC;
    box-shadow: 1px 2px 6px rgba(0,0,0,.25);
    transition: all 150ms ease-in;
}
.card-border-primary:not(.active) {
    border-left: 10px solid #B3D4FF;

}
/* VE: fix for slider checkbox 
======================================*/

.custom-checkbox-switch label {
    display: block !important;
}
label.flex  {
    display: flex !important;
}
/* APPWIKI MOBILE RESPONSIVE
===================================== */

@media only screen and (max-width: 35rem) {
/* VE: special card css (4/8) */
.card[data-toggle=tab]:not([aria-selected=true]) .card-body:not(.active) p  {
    opacity: 0;
    line-height: 0 !important;
    transition: line-height 150ms ease-in;
}
.card-body h3,h5,p  {
	margin:0 !important;
	padding: 0 !important;
}
.beam-left{
    box-shadow: 1px 2px 6px rgba(0,0,0,.25);
    padding: 4px 4px 6px;
}
.card[data-toggle=tab]:not([aria-selected=true]) .beam-left{
  	box-shadow: 1px 2px 6px rgba(0,0,0,.25);
    padding: 4px 4px 6px;
}
/* P - tekst */
h3,
h5 {
padding: 0 1rem;
/*text-align: center; 4/8 niet compatibel*/
}
p{
padding: 0.5rem 1rem;
line-height: 2rem;
}

p.lead {
padding: 0.5rem 1rem;
line-height: 2rem;
 
}
/* Intro afbeelding */
.main-container>section .mura-object-content>div div:nth-child(2)> div:first-child {
/*padding-bottom: 1rem;*/
}

/*   div verbergen */
.main-container>section .mura-object-content>div div:nth-child(2)>div:nth-child(2) {
display: none;
}

.main-container>section span.lead {
max-width: 85% !important;
}

/* Intro Sterren centreren */
.main-container>section > .container .mura-region-local > div:nth-child(2) {
width: unset !important;
}

/* Features afbeeldingen */
.mura-body > div > div div:nth-child(3) .feature-list li>div {
padding-top: 1rem;
}

/* Reviews sterretjes */
.mura-body > div > div div:nth-child(3) h4.text-center span.text-orange {
display:block;
}

/* Reviews tekst */
.mura-body > div > div div:nth-child(3) div:nth-child(4) .mura-object-content .container p.lead {
text-align: left !important;
}
}
/* VE:  accordion aanpassingen 22 maart 2021 */
.accordion-blue > .accordion-item>[data-toggle=collapse][aria-expanded=false] {
  opacity: 1; 
  background-color: rgba(205,217,254,1)!important;
}
.accordion-blue > .accordion-item>[data-toggle=collapse][aria-expanded=true] {
 opacity: 1; 
 background-color: #9ab3fc!important;
  
}
/*
rgba(82,170,221,.85)
#f1f8fc
#9ab3fc
*/

.card-header .fa {
  transition: .3s transform ease-in-out;
}
.card-header .collapsed .fa {
  transform: rotate(180deg);
}
.card-header .collapsed .icon-ybi-status-7  {
 color: #999;
}
.card-header .icon-ybi-status-7  {
 color: #66ba0b;
}
.card-header .d-block .lang  {
 color: #404040!important;
 font-weight: 500!important;
}
a.button.is-rounded:not(.is-white), button.button.is-rounded:not(.is-white), i.button.is-rounded:not(.is-white) {
    min-height: 24px!important;
    color: #444;
    min-width: 24px;
    border-radius: 10000px;
    width: 24px;
    right: 0;
    height: 24px;
    border: 1px solid #d1d1d3;
    background-color: #fff;
    padding: 0;
    -webkit-transition: color .1s;
    transition: color .1s;
}
/* homepage border */
body#homepage div#svIndex .list-group-item {
  border: 1px solid #e0e0e0;
}
body#homepage div#svIndex .list-group-item {
  padding: .5rem .75rem !important;
}
/* vnl voor zijpaneel actuele melding onderin */
div#svIndex .list-group-item {
  border: 0;
  padding: .25rem .75rem !important;
}
div#svIndex > ul > li > div > a {
  color: #66ba0b!important;
}
div#svIndex > ul > li > div > a:hover {
	text-decoration: underline;
}
.text-light a {
    color: #d4d4d4;
    transition: color .2s ease;
}