@font-face {
  font-family: 'Roboto Bold';
  src: url('../fonts/Roboto_Bold/Roboto-Bold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Roboto_Bold/Roboto-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Roboto_Bold/Roboto-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Roboto_Bold/Roboto-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/Roboto_Bold/Roboto-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Roboto_Bold/Roboto-Bold.svg') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Roboto Regular';
  src: url('../fonts/Roboto_Regular/Roboto-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Roboto_Regular/Roboto-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Roboto_Regular/Roboto-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Roboto_Regular/Roboto-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/Roboto_Regular/Roboto-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Roboto_Regular/Roboto-Regular.svg') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Courgette';
  src: url('../fonts/Courgette/Courgette-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Courgette/Courgette-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Courgette/Courgette-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Courgette/Courgette-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/Courgette/Courgette-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Courgette/Courgette-Regular.svg') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Pacifico';
  src: url('../fonts/Pacifico_Regular/Pacifico-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Pacifico_Regular/Pacifico-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Pacifico_Regular/Pacifico-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Pacifico_Regular/Pacifico-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/Pacifico_Regular/Pacifico-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Pacifico_Regular/Pacifico-Regular.svg') format('svg'); /* Legacy iOS */
}

div.ui-dialog {
    top: 100px !important;
    position: fixed !important;
}

.groepen.table > li {
  padding: 10px 20px;
}

.image {
  position: relative;
}

.groep-block .image img {
  width: 100%; 
  max-height: 400px;
}

.groep-block:nth-of-type(n+4){
  margin-top: 30px;
}

.checkbox_actief img {
    width: 100%;
    height: 100%;
}

.image .title {
  position: absolute;
  color: #fff;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  width: 100%;
    z-index: 10;
  font-size: 40px;
  text-align: center;
  font-family: Courgette;
}

.groep-block .full-height-click {
  width: 100%; 
  height: 100%; 
  position: absolute;
  opacity: 0;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0,0,0,0.4);
} 

.groep-block:hover > .full-height-click {
  opacity: 1;
}

.groep-block {
  position: relative;
}

.structuur i.fa-grip-vertical {
    color: #dadada;
    font-size: 25px;
}

.tableview:nth-of-type(odd) {
    background: #f3f3f3;
}

.tableview {
    background: #fff;
}

.ccm-ui .tableview p {
  margin: 0;
}

.ccm-ui .radio input[type="radio"], .ccm-ui .radio-inline input[type="radio"], .ccm-ui .checkbox input[type="checkbox"], .ccm-ui .checkbox-inline input[type="checkbox"] {
  margin-left: 0 !important;
}

.grip {
  width: 40px;
  text-align: center;
}

.checkbox_actief {
  width: 75px;
  height: 75px;
  text-align: center;
}

.checkbox_actief > .wrap {
  height: 100%;
}

input[type="checkbox"]{
  margin: 0 !important;
}


.table-row {
  display: inline-block;
  width: 100%; 
  position: relative;
}

/*.table-row:hover {
  cursor: -webkit-grab;
  cursor: grab;
}

.table-row:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
*/
.table-cell {
   display: inline-block;
   float: left;
   position: relative;
}

.tableview .groep.name {
  margin-left: 20px;
}

.tableview .name a {
    font-family: Roboto Regular;
    color: #aaa;
    font-size: 20px;
    text-decoration: underline;
    text-transform: uppercase;
}

.structuren .name {
  padding: 10px 20px;
}

.name .leverancier {
  font-family: Roboto Regular;
  color: #aaa;
  font-size: 20px;
  text-transform: uppercase;
}

.name .naam {
  font-family: Roboto Bold;
  color: #666;
}

.table-row .buttons {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.image_wrap {
  max-width: 350px;
  width: 100%; 
}

.image_wrap img {
  width: 100%; 
}

.custom_img {
    width: 100%;
    max-width: 350px;
    height: 350px;
    position: relative;
    border: 1px solid #a9a9a9;
}

.custom_img i {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%; 
    transform: translateY(-50%);
    text-align: center;
    font-size: 70px;
}

.hidden {
  display: none;
}

.button-label {
  display: inline-block;
  padding: 10px 20px;
  margin: 0.5em;
  cursor: pointer;
  color: #292929;
  border-radius: 0.25em;
  background: #efefef;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  transition: 0.3s;
  user-select: none;
}
.button-label p {
  font-size: 1em;
  margin-bottom: 0 !important;
  font-family: "Lato", sans-serif;
}
.button-label:hover {
  background: #d6d6d6;
  color: #101010;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
}
.button-label:active {
  transform: translateY(2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
}
@media (max-width: 40em) {
  .button-label {
    padding: 0em 1em 3px;
    margin: 0.25em;
  }
}
.yes-button:checked + .button-label {
  background: #2ecc71;
  color: #efefef;
}
.yes-button:checked + .button-label:hover {
  background: #29b765;
  color: #e2e2e2;
}
.no-button:checked + .button-label {
  background: #d91e18;
  color: #efefef;
}
.no-button:checked + .button-label:hover {
  background: #c21b15;
  color: #e2e2e2;
}
.hidden {
  display: none;
}

.nav-tabs>li.active>label, .nav-tabs>li.active>label:hover, .nav-tabs>li.active>label:focus {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    font-weight: bolder !important;
}
.nav-tabs>li>label {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}
.nav>li>label {
    position: relative;
    display: block;
    font-weight: normal !important;
    padding: 10px 15px;
      color: #428bca;
}

.nav-tabs > li > label:hover {
    border-color: #eee #eee #ddd;
    cursor: pointer;
}
.nav > li > label:hover, .nav > li > label:focus {
    text-decoration: none;
    background-color: #eee;
}

div.ccm-ui ul.nav-tabs {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

div.ccm-search-results-pagination {
  margin: 0;
}

div.ccm-search-results-pagination ul li {
  border: 1px solid lightgray;
  padding: 8px 15px;
}

.results_per_page {
  padding: 0px 20px 30px 20px;
  float: right;
}

.resultaten_number {
    padding: 0 40px;
}

div.ccm-ui ul.nav-tabs li.selected label:after {
    content: 'huidig';
    position: absolute;
    color: #fff;
    background: #00923e;
    padding: 2px 9px;
    font-size: 10px;
    right: -10px;
    top: -10px;
    text-transform: uppercase;
    font-weight: normal;
    font-family: Roboto Bold;
    border: 1px solid green;
    z-index: 10;
}

.ccm-ui .tab-content>.active {
    display: block;
    padding-top: 20px;
    background: #efefef;
    padding: 20px;
}

.ccm-ui .tab-pane .form-group {
    margin: 15px 0;
}

.structuur_omschrijving {
  max-width: 800px;
} 

html div.ccm-ui ul.nav-tabs>li.active:after {
    content: "\f0d7";
    font-family: FontAwesome;
    position: absolute;
    bottom: -35px;
    left: 0px;
    width: 100%;
    color: #ffffff;
    text-align: center;
    font-size: 41px;
	z-index: -1;
}

.ccm-ui .row {
  margin-top: 40px;
}

.ccm-ui .row.first {
  margin-top: 0;
}

.kleur-afbeelding {
  position: relative;
}

.kleur-afbeelding img {
  width: 100%;
  height: 100%; 
  object-fit: cover;
}

.kleur-afbeelding .overlay-kleur {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.4);
    font-family: Roboto Bold;
    font-size: 17px;
    padding: 5px 0;
    text-transform: uppercase;
}

.kleur-afbeelding .overlay-kleur p {
  margin: 0;
}


/* Normal Track */
input[type="checkbox"].ios-switch + div {
    vertical-align: middle;
    width: 40px;    height: 20px;
    border: 1px solid rgba(0,0,0,.4);
    border-radius: 999px;
    background-color: #d91e18;
    -webkit-transition-duration: .4s;
    -webkit-transition-property: background-color, box-shadow;
    box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
}

/* Checked Track (Blue) */
input[type="checkbox"].ios-switch:checked + div {
    width: 40px;
    background-position: 0 0;
    background-color: #3b89ec;
    border: 1px solid #0e62cd;
    box-shadow: inset 0 0 0 10px rgba(59,137,259,1);
}

/* Tiny Track */
input[type="checkbox"].tinyswitch.ios-switch + div {
    width: 34px;    height: 18px;
}

/* Big Track */
input[type="checkbox"].bigswitch.ios-switch + div {
    width: 50px;    height: 25px;
}

/* Green Track */
input[type="checkbox"].green.ios-switch:checked + div {
    background-color: #2ecc71
    border: 1px solid rgba(0, 162, 63,1);
    box-shadow: inset 0 0 0 10px #2ecc71;
}

/* Normal Knob */
input[type="checkbox"].ios-switch + div > div {
    float: left;
    width: 18px; height: 18px;
    border-radius: inherit;
    background: #ffffff;
    -webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: transform, background-color, box-shadow;
    -moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
    -moz-transition-duration: 0.4s;
    -moz-transition-property: transform, background-color;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    margin-top: 1px;
    margin-left: 1px;
}

/* Checked Knob (Blue Style) */
input[type="checkbox"].ios-switch:checked + div > div {
    -webkit-transform: translate3d(20px, 0, 0);
    -moz-transform: translate3d(20px, 0, 0);
    background-color: #ffffff;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
}

/* Tiny Knob */
input[type="checkbox"].tinyswitch.ios-switch + div > div {
    width: 16px; height: 16px;
    margin-top: 1px;
}

/* Checked Tiny Knob (Blue Style) */
input[type="checkbox"].tinyswitch.ios-switch:checked + div > div {
    -webkit-transform: translate3d(16px, 0, 0);
    -moz-transform: translate3d(16px, 0, 0);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
}

/* Big Knob */
input[type="checkbox"].bigswitch.ios-switch + div > div {
    width: 23px; height: 23px;
    margin-top: 1px;
}

/* Checked Big Knob (Blue Style) */
input[type="checkbox"].bigswitch.ios-switch:checked + div > div {
    -webkit-transform: translate3d(25px, 0, 0);
    -moz-transform: translate3d(16px, 0, 0);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
}

/* Green Knob */
input[type="checkbox"].green.ios-switch:checked + div > div {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 162, 63,1);
  }

.hanger_options {
    float: left;
    display: inline-block;
    margin-top: 20px;
    padding-left: 30px;
}

#strekkende_meter_options .form-group {
    display: inline-block;
    width: 100%;
}

.ccm-ui .caret {
  display: none !important;
}

input[type="checkbox"].ios-switch + div:hover {
    cursor: pointer;
}

.hanger_label {
    font-size: 12px;
    font-weight: normal;
    font-family: Roboto Regular;
    display: inline-block;
    color: black;
}

#strekkende_meter_options {
    display: inline-block;
    width: 100%;
}

.structuur_afbeelding {
    width: 100%;
    display: inline-block;
    text-align: center;
    background: #b15c11;
    color: #fff;
    margin-bottom: 10px;
}

.ccm-ui .strekkende_meter_options input {
    width: calc(100% - 50px);
    display: inline-block;
    float: left;
}

.file-info {
  padding-left: 15px;
}



.container-fluid {
  width: auto !important;
}

.strekkende_meter_options i {
    width: 50px;
    text-align: center;
    display: inline-block;
    float: left;
    height: 40px;
    line-height: 40px;
}

.form-group .notice > i {
    width: 50px;
    display: inline-block;
    float: left;
    line-height: 40px;
    text-align: center;
}

.form-group .notice {
    background: #b15c11;
    color: #fff !important;
    display: inline-block;
    width: 100%;
}

.form-group .notice h5 {
    width: calc(100% - 50px);
    display: inline-block;
    float: left;
}


.strekkende_meter_options i:hover {
  background: #d2cfcf;
  cursor: pointer;
}

.structuur_afbeelding p {
    margin-bottom: 0 !important;
    padding: 3px 20px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 9px;
}

.ccm-ui legend {
    padding: 10px 0 !important;
}

.image .kleur_image {
    position: relative;
    width: 100%;
    display: inline-block;
    margin: 10px 0;
}

.image .kleur_image:hover {
  cursor: grab;
  -webkit-cursor: grab;
}

.image .kleur_image:active {
  cursor: grabbing;
  -webkit-cursor: grabbing;
}

.image > .kleuren > .kleur_image.active {
  outline: 5px solid #d87d20;
}
.image_wrap > .custom_img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.image.first {
  padding-right: 30px;
}

.ui-sortable-helper {
  box-shadow: 0px 0px 10px black;
}

.kleur_image .kleur-afbeelding {
    max-width: 55px;
    float: left;
    margin: 0 20px;
    display: inline-block;
}

.kleur_image .buttons {
    display: inline-block;
    float: left;
    margin-top: 10px;
    float: right;
}

.kleur_image .overlay-kleur {
    display: inline-block;
    float: left;
    margin-top: 15px;
    padding-left: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.modal.fade.in {
    display: block;
    -webkit-animation: fadein 0.4s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.4s; /* Firefox < 16 */
        -ms-animation: fadein 0.4s; /* Internet Explorer */
         -o-animation: fadein 0.4s; /* Opera < 12.1 */
            animation: fadein 0.4s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.noscroll { 
    overflow-y: hidden; 
}

.slick-track {
    margin: 0 auto;
}

.modal {
    background: rgba(0,0,0,0.5);

}

.modal-dialog {
    margin: 0 auto !important;
    width: 100%;
    max-width: 800px;
}

.modal-content {
    margin: 0 20px;
}

.modal-content .modal-body > .wrap > * {
    padding-right: 10px;
}

.modal .modal-header {
    display: block;
     justify-content: none;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
}

.modal-content .modal-body {
    position: relative;
    padding: 15px 8px 15px 15px;
}

.modal-body > .wrap::-webkit-scrollbar {
  width: 5px;
}
.modal-body > .wrap::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgb(193, 193, 193);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.modal-content .modal-body > .wrap {
    position: relative;
    padding: 0;
    max-height: 200px;
    overflow-y: scroll;
}

.kleur_image > i {
    display: inline-block;
    float: left;
    padding-top: 14px;
    padding-left: 10px;
    font-size: 29px;
    color: #c5c5c5;
}

.modal .image img {
  width: 100%; 
}

#ccm-dashboard-page .modal .modal-content .modal-body > .wrap {
    position: relative;
    padding: 0;
    max-height: 450px;
    overflow-y: scroll;
}

#ccm-dashboard-page .modal .modal-content input[type="text"] {
  width: 100%; 
}

.ccm-ui .modal-header .close {
    margin-top: -2px;
    margin-right: 0px;
}
#ccm-dashboard-page .modal-dialog {
    top: 100px;
}

.modal .modal-hanger .close {
    font-size: 14px;
    color: #333;
    opacity: 1;
} 

.modal .modal-hanger {
    border-top: 1px solid #e5e5e5;
    padding: 15px 10px;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}

div.ccm-panel-content ul.nav>li, div.ccm-panel-content menu>li {
  width: 100%;
}

.input-container {
  margin: 3em auto;
  max-width: 300px;
  background-color: #EDEDED;
  border: 1px solid #DFDFDF;
  border-radius: 5px;
}
#real-input {
  display: none;
}

.browse-btn {
    width: 100%;
}

.file-info {
    font-size: 0.9em;
    display: block;
    padding: 5px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 300px) {
  button {
    width: 100%;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0;
  }
  
  .file-info {
    display: block;
    margin: 10px 5px;
  }
}

.ccm-ui .breadcrumb {
  display: inline-block;
  width: 100%;
}

.custom_img.band {
    width: auto;
    max-width: 150px;
    height: 394px;
    position: relative;
    border: 1px solid #a9a9a9;
}

ul.groepen.table {
    padding-left: 0;
    padding-top: 50px;
    border-top: 1px solid #e5e5e5;
    margin-top: 20px;
}

.ccm-dashboard-section-menu:first-of-type ul.groepen.table {
  border-top: 0;
}

div#ccm-dashboard-content .ccm-dashboard-section-menu.groepen h2 {
  display: inline-block;
  width: auto;
  border-bottom: 0;
}

.ccm-ui .input-group-btn {
  font-size: inherit !important;
}

div#ccm-dashboard-content div.ccm-dashboard-header-row div.ccm-header-search-form form {
	display: flex;
	flex-direction: row-reverse;
}

div#ccm-dashboard-content div.ccm-dashboard-header-row div.ccm-header-search-form form .input-group{
	width: auto !important;
}

a.btn.btn-primary {
	color: white;
	background: #4a90e2;
	border-color: #4a90e2;
	box-shadow: inset 0 0;
}

a.btn.btn-primary:hover {
	color: white;
	background: #2276d7;
	border-color: #2276d7;
}