/* Dragula bibliotheek core definities */

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}

.gu-hide {
  display: none !important;
}

.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

/* dragtool applicatie CORE style definities (niet zelf aanpassen) */

#dragtool_app,
#dragtool_app button,
#dragtool_feedback_container {
  display: none;
}

#dragtool_app.active,
#dragtool_app.completed {
  display: block;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* dragtool applicatie CUSTOM */

.dragtool_container_title,
#draggable_items_container_start,
#drop_area_1,
#drop_area_2 {
  vertical-align: top;
}

.com_dragtool_container_wrapper {
  display: inline-block;
  width: 32%;
  margin-left: 2%;
  margin-right: 0px;
  padding-top: 2rem;
}

.com_dragtool_container_wrapper:first-of-type {
  background-image: linear-gradient(to bottom, #f9c019, #fea235);
  min-height: 400px;
  border-radius: 2.375rem;
  margin-left: 0px;
}

.com_dragtool_container_wrapper:nth-of-type(2),
.com_dragtool_container_wrapper:nth-of-type(3),
.com_dragtool_container_wrapper:nth-of-type(4),
.com_dragtool_container_wrapper:nth-of-type(5) {
  border-radius: 2.375rem;
  background-image: linear-gradient(to bottom, #a279d8 0%, #5b2cc0);
  min-height: 400px;
}


/* Draggable items CUSTOM */

.com_dragtool_draggable_item {

  float: left; /* test aanpassing */
  width: calc(100% - 2rem); /* test aanpassing */

  cursor: grab;
  border-radius: 1.25rem;
  background-color: var(--white);
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  padding-left: 3rem;
  padding-right: 3rem;
  background-image: url(/assets/images/icon-question-grey.webp);
  background-size: 1.5rem;
  background-repeat: no-repeat;
  background-position-x: 0.75rem;
  background-position-y: 0.75rem;
  font-family: Barlow;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: 0.54px;
  text-align: center;
  color: #071751;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.com_dragtool_draggable_item.dragging {
  background-color: #80ebf7;
	position: relative; z-index: 999999999999 !important;
}

.com_dragtool_draggable_item.state_correct {
  background-image: url(/assets/images/icon-yes-green.svg);
}

.com_dragtool_draggable_item.state_invalid {
  background-image: url(/assets/images/icon-no-red.svg);
}

.com_dragtool_draggable_item.state_locked {
  cursor: unset;
}

#page_main_content h1 {
  text-align: center;
}

.com_dragtool_container {
  height: 100%;
}

#dragtool_container_wrapper {
  position: relative;
  width: 100%;
  display: flex;
}

#dragtool_container_wrapper .com_dragtool_container:first-child {
  margin-left: 0px;
}

.dragtool_container_title {
  float:left; /* test aanpassing */
  pointer-events: none; /* test aanpassing */
  
  width: 100%;
  text-align: center;
  color: #ffffff;
  margin-bottom: 1rem;
  font-weight: 900;
  padding-left: 1rem;
  padding-right: 1rem;
}

#dragtool_feedback_container {
  margin: auto;
  border-radius: 1.5rem;
  background-image: linear-gradient(103deg, #85d95c 6%, #63bf30 95%);
  width: 90%;
  max-width: 800px;
  padding: 2rem;
  margin-bottom: 1rem;
}

#dragtool_feedback_basic {
  font-weight: bold;
  margin-bottom: 1rem;
}

img.draggable_item_image {
  border-radius: 1rem;
  margin-bottom: 1rem;
  margin-top: 0.25rem;
}

.feedback_invalid {
  background-image: linear-gradient(103deg, #FD0404 0%, #D21414 100%) !important;
  color: #ffffff !important;
}

#dragtool_extra_title {
  font-family: Barlow;
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.21;
  display: inline-block;
  width: 100%;
  letter-spacing: 0.72px;
  margin-bottom: 2rem;
  color: var(--bluey-purple);
}

.body-dragtool .cms6_component_paragraph {
  font-family: Barlow;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0.48px;
  margin-bottom: 1rem;
  color: #071751;
  font-size: 1.25rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

#dragtool_mobile{display:none;}

@media screen and (max-width: 640px) {
  	#dragtool_container_wrapper {display: block;}
	.com_dragtool_container_wrapper {width: 100%; margin-bottom: 1rem;}
	
	#dragtool_app{display:none !important;}	
	#dragtool_mobile{display:block;}	
	#dragtool_mobile_toelichting{margin-bottom:1rem;}
}