/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

main > .container {
  padding: 60px 15px 0;
}

.mt-2-rem {
  margin-top: 2rem !important;
}

.carousel-control-next,
.carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
}
.carousel-control-prev{
	margin-left:-5em;
}
.carousel-control-next{
	margin-right:-5em;
}
.carousel-item .card-body{
	min-height:14rem;
}

.text-preview{
	font-size:30pt;
}

.fs-8 {
    font-size: 0.8rem!important;
}

.img-check .form-check-input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

.img-check .form-check-label {
  position: relative;
  cursor: pointer;
}

.img-check .form-check-label img {
  border: 3px solid transparent;
  padding: 15px;
  display: block;
}

.img-check .form-check-label .custom-radio {
  position: relative;
  width: 20px;
  height: 20px;
}

.img-check .form-check-input[type="radio"]:checked + .form-check-label img {
  border-color: #198754; /* Green border color when selected */
}

.img-check .form-check-input[type="radio"]:checked + .form-check-label .custom-radio::before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c"; /* Font Awesome checkmark icon */
  display: inline-block;
  font-weight: 900;
  color: #198754; /* Green checkmark color */
}

.ql-editor {
	white-space: pre-wrap; /* Behoud witruimte inclusief tabs */
    tab-size: 5; /* Aantal spaties voor elk tab karakter */
}

.thumb-navigation .thumbnail{border:1px solid white}
.thumb-navigation .active{
	border:1px solid green;
}

.leftpart{
	float: left;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    width: 200%;
    max-width: 200%;
}

.leftpartpopup{
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    width: 200%;
    max-width: 200%;
}

.rightpart{
	float: right;
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    width: 200%;
    max-width: 200%;
}

.rightpartpopup{
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    width: 200%;
    max-width: 200%;
	float: right;
}

.easyzoom img{
	-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.75);
}

/** The Magic **/
.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid rgb(173, 173, 173);
  position: absolute;
  top: 50%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}

/** The Spacing **/
.btn-breadcrumb .btn {
  padding:6px 12px 6px 24px;
}
.btn-breadcrumb .btn:first-child {
  padding:6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
  padding:6px 18px 6px 24px;
}

/** Default button **/
.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}

/** Primary button **/
.btn-breadcrumb .btn.btn-primary:not(:last-child):after {
  border-left: 10px solid #428bca;
}
.btn-breadcrumb .btn.btn-primary:not(:last-child):before {
  border-left: 10px solid #357ebd;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after {
  border-left: 10px solid #3276b1;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):before {
  border-left: 10px solid #285e8e;
}

/** Success button **/
.btn-breadcrumb .btn.btn-success:not(:last-child):after {
  border-left: 10px solid #5cb85c;
}
.btn-breadcrumb .btn.btn-success:not(:last-child):before {
  border-left: 10px solid #4cae4c;
}
.btn-breadcrumb .btn.btn-success:hover:not(:last-child):after {
  border-left: 10px solid #47a447;
}
.btn-breadcrumb .btn.btn-success:hover:not(:last-child):before {
  border-left: 10px solid #398439;
}

/** Danger button **/
.btn-breadcrumb .btn.btn-danger:not(:last-child):after {
  border-left: 10px solid #d9534f;
}
.btn-breadcrumb .btn.btn-danger:not(:last-child):before {
  border-left: 10px solid #d43f3a;
}
.btn-breadcrumb .btn.btn-danger:hover:not(:last-child):after {
  border-left: 10px solid #d2322d;
}
.btn-breadcrumb .btn.btn-danger:hover:not(:last-child):before {
  border-left: 10px solid #ac2925;
}

/** Warning button **/
.btn-breadcrumb .btn.btn-warning:not(:last-child):after {
  border-left: 10px solid #f0ad4e;
}
.btn-breadcrumb .btn.btn-warning:not(:last-child):before {
  border-left: 10px solid #eea236;
}
.btn-breadcrumb .btn.btn-warning:hover:not(:last-child):after {
  border-left: 10px solid #ed9c28;
}
.btn-breadcrumb .btn.btn-warning:hover:not(:last-child):before {
  border-left: 10px solid #d58512;
}

.w-1{width: 1% !important}

/** Info button **/
.btn-breadcrumb .btn.btn-info:not(:last-child):after {
  border-left: 10px solid #5bc0de;
}
.btn-breadcrumb .btn.btn-info:not(:last-child):before {
  border-left: 10px solid #46b8da;
}
.btn-breadcrumb .btn.btn-info:hover:not(:last-child):after {
  border-left: 10px solid #39b3d7;
}
.btn-breadcrumb .btn.btn-info:hover:not(:last-child):before {
  border-left: 10px solid #269abc;
}

.btn-next i {
    transition: transform 0.3s ease;
}

.btn-next:hover i {
    transform: translateX(3px);
}

.btn-prev i {
    transition: transform 0.3s ease;
}

.btn-prev:hover i {
    transform: translateX(-3px);
}

.btn-product{
	transition: transform 0.3s ease;
}

.btn-product:hover{
	transform: scale(1.2);
}

.smaller-listgroup{
	font-size: 0.8em !important;
}
.smaller-listgroup .list-group-item{
	margin-top: 0;
	margin-bottom:0;
	padding-top:0;
	padding-bottom:0;
}

#voorbeeld-vid{
	width: 90% !important;
	background-color: transparent !important;
}

.green-switch:checked{
    background-color: rgba(25,135,84,1)!important; /* Change the color of the toggle when it is checked */
    border-color: rgba(25,135,84,1)!important; /* Change the border color of the toggle when it is checked */
}

@font-face {
	font-family: 'RouwmediaSymbolen';
	src: url('/img/RouwMediasymbolen.otf') format('opentype');
}

.ql-my-icon-btn {
	font-family: 'RouwmediaSymbolen' !important;
	cursor: pointer;
}

#custom-button-i {
	background: #f3f3f3;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 2px 10px;
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
	color: #333;
	margin-right: 4px;
	width: auto;
    height: auto;
	float:right;
}

#custom-button-i:hover {
  background: #e2e2e2;
}