#vorigeVolgendeBtn{
   display:inline-flex;
   justify-content: space-between;
   width:100%;
}
#vorigeVolgendeBtn .momentVolgende{display:none;}
#item_btns .item_nobtn{background-color: transparent;}
#item_vraag.auto_save #opslaanBtn{display:none !important;}/*opslaan btn niet nodig*/

#my_assignment_vl #opslaan_btn,
#vorigeVolgendeBtn,
#vorigeVolgendeBtn *,
#item_btns,
#item_btns *{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

/*#vorigeVolgendeBtn,*/
.leerplein_btns_bg{
   position: fixed;
   z-index: 10000;
   bottom:0;
   width:100%;
   height: 125px;
   margin:0;
   background-color: rgba(255,255,255,.2);
	pointer-events: none;
}

#my_assignment_vl #opslaan_btn,/*vragenlijst*/
#opslaanBtn {background-image: url(../../images/icons/btn_vragen_save.svg); order: 1;}
#resetBtn {background-image: url(../../images/icons/btn_vragen_undo.svg); order: 1;}
#checkBtn {background-image: url(../../images/icons/btn_vragen_check.svg);order: 1;}
#editBtn {background-image: url(../../images/icons/btn_vragen_write.svg);order: 1;}

#vorigeVolgendeBtn #vorigeBtn {
   order: 0;
   position: relative;
}
#vorigeVolgendeBtn #volgendeBtn {
   order: 2;
   position: relative;
}
#vorigeVolgendeBtn #vorigeBtn::before,
#vorigeVolgendeBtn #volgendeBtn::before{
   position: absolute;
   content: "\f104";
   font-family: "Font Awesome 7 Pro";
   background-color: #ffffff;
   border: 2px solid rgba(2,130,194, 1);
   border-radius: 50%;
   width: 45px;
   height: 45px;
   display: block;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: rgba(2,130,194, 1);
   text-indent: 0;
   text-align: center;
   line-height: 45px;
   font-size: 25px;
   transition: all 0.3s ease-in;
}
#vorigeVolgendeBtn #volgendeBtn::before{
   content: "\f105";
}
#vorigeVolgendeBtn #vorigeBtn:hover::before,
#vorigeVolgendeBtn #volgendeBtn:hover::before {
   background-color: rgba(2,130,194, 1);
   color: #ffffff;
}
body:not(.label_casus) #vorigeVolgendeBtn #vorigeBtn::after,
body:not(.label_casus) #vorigeVolgendeBtn #volgendeBtn::after {
   content: attr(data-title);
   position: absolute;
   top: 0;
   right: 55px;
   height: 60px;
   line-height: 60px;
   width: auto;
   max-width: 200px;
   padding: 0 8px;
   font-size: 14px;
   font-weight: normal;
   color: #0282c2;
   text-indent: 0;
   text-align: right;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transform: translateX(10px);
   pointer-events: none;
   transition: opacity 0.3s ease-in, transform 0.3s ease-in, visibility 0.3s;
}
/* vorige: tooltip rechts van de knop, schuift in van links */
body:not(.label_casus) #vorigeVolgendeBtn #vorigeBtn::after {
   right: auto;
   left: 55px;
   text-align: left;
   transform: translateX(-10px);
}
body:not(.label_casus) #vorigeVolgendeBtn #vorigeBtn:hover::after,
body:not(.label_casus) #vorigeVolgendeBtn #volgendeBtn:hover::after {
   opacity: 1;
   visibility: visible;
   transform: translateX(0);
}
#my_assignment_vl #opslaan_btn:hover,/*vragenlijst*/
#opslaanBtn:hover,
#resetBtn:hover,
#checkBtn:hover,
#editBtn:hover,
#item_btns .item_btn:hover{background-color:#d93940;}

#vorigeVolgendeBtn #volgendeBtn,
#vorigeVolgendeBtn #vorigeBtn{
   width:60px;
   height:60px;
   flex:0 0 60px;
   z-index:1;
}

#my_assignment_vl #opslaan_btn,/*vragenlijst*/
#opslaanBtn,
#resetBtn,
#checkBtn,
#editBtn,
#item_btns .item_btn{
   flex: 0 1 auto;
   width: auto;
   height: 40px;
   background-size: 40px 40px;
   background-repeat: no-repeat;
   background-position: right center;
   color: #fff;
   text-align: left;
   padding: 0 40px 0 15px;
   border-style:solid;
   border-width:1px;
   border-color:#fff;
   cursor:pointer;

   animation-iteration-count: 1;
   animation-direction: normal; /* or: alternate */
   animation-timing-function: linear; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
   animation-fill-mode: forwards; /* or: backwards, both, none */
   animation-duration: 500ms;

}

#vorigeVolgendeBtn #vorigeBtn,
#vorigeVolgendeBtn #volgendeBtn{
   cursor:pointer;
   background-repeat: no-repeat;
   background-position:center center;
   background-size:80% 80%;
   text-indent:-9999px;
   color:white;
   font-weight:bold;
   position: relative;
}

#vorigeVolgendeBtn{
   -webkit-transition: opacity 250ms ease-in-out;
   -moz-transition: opacity 250ms ease-in-out;
   -ms-transition: opacity 250ms ease-in-out;
   -o-transition: opacity 250ms ease-in-out;
   transition: opacity 250ms ease-in-out;
}
#vorigeVolgendeBtn.showbtn{
   opacity:1;
   filter: alpha(opacity=100);
}
#vorigeVolgendeBtn.hidebtn{
   opacity:0;
   filter: alpha(opacity=0);
}
#item_btns .item_btn.showbtn,
#vorigeVolgendeBtn #vorigeBtn.showbtn,
#vorigeVolgendeBtn #volgendeBtn.showbtn{
   display:block;
   opacity:1;
   filter: alpha(opacity=100);
}
#item_btns .item_btn.hidebtn,
#vorigeVolgendeBtn #vorigeBtn.hidebtn,
#vorigeVolgendeBtn #volgendeBtn.hidebtn{
   display:none;
   opacity:0;
   filter: alpha(opacity=0);
}

#item_btns {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: flex;
   justify-content: center;
   margin-top: 10px;
   flex-flow: row wrap;
}
#item_btns .melding {
   margin: 1em 10%;
   flex: 0 1 80%;
   order: 2;
}
#vorigeVolgendeBtn #vorigeBtn{
   left: 0px;
   background-position: 25% 50%;
}

#vorigeVolgendeBtn.animate #volgendeBtn,
#vorigeVolgendeBtn.animate #vorigeBtn,
#item_btns .item_btn{animation-name: btn_animation_scale;opacity:0; }

#vorigeVolgendeBtn.animate #volgendeBtn{
   /*animation-name: btn_animation_rechts;*/
   animation-delay: 500ms;
}
#vorigeVolgendeBtn.animate #vorigeBtn{
   /*animation-name: btn_animation_links;*/
   animation-delay: 1000ms;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>BTN ANIMATION */
@-webkit-keyframes btn_animation_scale {
   0%   {opacity:0;}
   100%  {opacity:1;}
}
@-moz-keyframes btn_animation_scale {
   0%   {opacity:0;}
   100%  {opacity:1;}
}
@-o-keyframes btn_animation_scale {
   0%   {opacity:0;}
   100%  {opacity:1;}
}
@keyframes btn_animation_scale {
   0%   {opacity:0;}
   100%  {opacity:1;}
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>BTN ANIMATION pulse bij start */
@-webkit-keyframes pulse-bij-start {
   0%   {border-width: 0 0 0 0;margin:0 0 0 0;}
   100% {border-width: 25px 0 0 40px;margin:-25px 0 0 -40px;}
}
@-moz-keyframes pulse-bij-start {
   0%   {border-width: 0 0 0 0;margin:0 0 0 0;}
   100% {border-width: 25px 0 0 40px;margin:-25px 0 0 -40px;}
}
@-o-keyframes pulse-bij-start {
   0%   {border-width: 0 0 0 0;margin:0 0 0 0;}
   100% {border-width: 25px 0 0 40px;margin:-25px 0 0 -40px;}
}
@keyframes pulse-bij-start {
   0%   {border-width: 0 0 0 0;margin:0 0 0 0;}
   100% {border-width: 25px 0 0 40px;margin:-25px 0 0 -40px;}
}


/*OPSLAAN BTN IN VRAGENLIJST IN CBT*/
#my_assignment_vl #opslaan_btn{
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   background-repeat: no-repeat;
   background-position: right 10px center;
   text-align: left;
   text-indent: 10px;
   padding: 0 50px 0 7px !important;
}
#my_assignment_vl #opslaan_btn:after{content:none}

#my_assignment_vl .volgendevorige_btns {
   position: relative;
   margin-top: 10px;
   margin-bottom:20px;
}