/* 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 {
  min-height: 400px;
  border-radius: 2.375rem;
  margin-left: 0px;
	padding-top: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: 0px;
  background-color: #42145F;
  min-height: 400px;
}

.com_dragtool_container_wrapper:first-of-type .dragtool_container_title {
    color: #000000;
    text-align: left;
    margin-left: 0px;
    padding-left: 0px;
}


/* Draggable items CUSTOM */

.com_dragtool_draggable_item {

  float: left; /* test aanpassing */
  width: calc(100% - 2rem); /* test aanpassing */
  cursor: grab;
  margin-left: 0px;
  margin-right: 2rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  /*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-size: 1rem;
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: 0.54px;
  text-align: left;
  color: #000000;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
background-color:#ffffff;
}

.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);*/
	background-image: url("/assets/images/icon-green.svg");	
	margin-left: 1rem;
    padding-right: 3rem;
    background-position: right 0.5rem bottom 0.5rem;
}

.com_dragtool_draggable_item.state_invalid {
 /* background-color:#e17000;*/
 background-image: url("/assets/images/icon-red.svg");	
	margin-left: 1rem;
    padding-right: 3rem;
    background-position: right 0.5rem bottom 0.5rem;
}

.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: 0px;
  background-color:#777b00; width: 100%; padding: 2rem; margin-bottom: 1rem;
  color:#ffffff;}

#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 {
  text-align: left;  
  display: inline-block;
  width: 100%;
  margin-bottom: 2rem;
}

.body-dragtool .cms6_component_paragraph {
  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;}
#end-button {margin-top: 2rem;}

#dragtool_feedback_popup {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    top: 0px; text-align:center;
    left: 0px; z-index:999999999;
    max-width: unset;
	max-height: unset;}

.dragtool_feedback_popup_close {
    width: 2rem;
    display: block;
    position: absolute;
    right: 2rem; cursor:pointer;
	top: 2rem;}

#dragtool_feedback_popup_basic { margin-top: 4rem;color:#ffffff;}
#dragtool_feedback_popup_content{color:#ffffff;}
.dragtool_feedback_popup_close_button {background-color: #ffffff; color: #42145f;}

@media screen and (max-width: 800px) {
  	#dragtool_container_wrapper {display: block;}
	.com_dragtool_container_wrapper {width: 100%; margin-bottom: 1rem; margin-left:0px;}
	.com_dragtool_container{padding-bottom:1rem;}
	.com_dragtool_container_wrapper:first-of-type{min-height:unset;}
	.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){min-height:200px;}
	
	/*#dragtool_app{display:none !important;}	
	#dragtool_mobile{display:block;}	
	#dragtool_mobile_toelichting{margin-bottom:1rem;}*/
}