body {
	font-family: Graphik Web Regular Regular, arial;
}
.roostermenu {
	display: flex;
	padding: 5px;
}
.roostermenu > .roostermenuitem {
	flex: 1;
	text-align: center;
	font-weight: bold;
}
.sticky {
	position: sticky;
	top: 0;
	overflow: hidden;
	background-color: #ffffff;
	z-index: 999;
}
.voorstellingtitel a {
	color: #000000;
	text-decoration: none;
}
.voorstellingtitel a:hover {
	color: #106fe7;
	text-decoration: underline;
}
.rooster .tijdwarn {
	font-size: 16px;
	padding: 5px;
	border: 1px solid #7A5A0F;
	border-radius: 10px;
	text-align: center;
	color: #7A5A0F;
	background-color: #FFF4DA;
	line-height: 23px;
}
.rooster .tijdwarn.severe {
	color: #900C3F;
	border: 1px solid #900C3F;
	background-color: #FFF6F6;
}
.rooster .tijdwarn span {
	font-size: 20px;
	vertical-align: middle;.
}
.dienstcell select {
	margin-bottom: 20px;
}
.dienstcell .selectzaalwissel {
	margin-bottom: 0px;
	margin-top: 10px;
}
.rooster, .roosteredit {
	margin-top: 20px;
	font-family: Graphik Web Regular Regular, Arial, Helvetica, sans-serif;
	font-size: 20px;
	border: 1px solid #000000;
}
.topmarg20 {
	margin-top: 20px;
	text-align: center;
}
.roosterrow {
	display: flex;
	font-family: Graphik Web Regular Regular, Arial, Helvetica, sans-serif;
	font-size: 18px;
}
.roosterrow.film {
	background-color: #ffffff;
}
.roosterrow.theater {
	background-color: #f7f0e1;
}
.roosterrow.zakelijk {
	background-color: #e9ffd9;
}

.roosteredit .roosterrow {
	border-top: 1px dotted #BEBEBE;
}
.roosteredit select {
	/*flex-basis: 100%;*/
}
.roosteredit .roosterrow div .edit {
	bottom: 0;
	display: flex;
	right: 0;
}

.bordertb:nth-child(even) {
	border-bottom: 1px solid #000000;
	border-top: 1px solid #000000;
}
.roosterrow div {
	flex: 1;
}


.columns {
	display: flex;
}
.columns > div {
	flex: 1;
}
.sticky > .roosterrow div {
	font-weight: bold;
	color: #000000;
	font-size: 14px;
	text-transform: uppercase;
}
.aligncenter {
	align-items: center;
	justify-content: center;
	text-align: center;
}
.roosterdatum {
	padding: 5px;
	border: 1px dotted #000000;
	max-width: 290px;
	margin: auto;
	margin-top: 10px;
}
.roosterdatum a {
	text-decoration: none;
	color: #000000;
	font-weight: bold;
}
.roosterdatum a:hover {
	text-decoration: none;
	color: #106fe7;
}
.geenrooster {
	max-width: 80%;
	max-height: 200px;
	padding: 30px;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: auto;
}
.dienstcell {
	padding: 20px;
	border-right: 1px solid #000000;
	width: 20%;
}
.dienstcell select {
	text-align-last: left;
}
.bordertop {
	border-top: 1px solid #000000;
}

.roosterrow:nth-child(2) > .bordertop, .roosterrow:nth-child(2) > .voorstelling, .roosterrow:nth-child(2) > .diensttijd {
	border-top: 0;
}
.roosterrow > .voorstelling, .roosterrow > .diensttijd {
	border-top: 1px solid #000000;
}

.nobordertop {
	border-top: 0 !important;
}
.roosterrow:first-child > .voorstelling {
	border-top: 0;
}
.norightborder {
	border-right: 0;
}
.voorstellingtitel {
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 5px;
  	display: flex;
  	flex-direction: row;
  	align-items: center;
  	min-height: 39px;
}
.voorstellingtitel span:first-child {
	margin-right: 10px;
}
.voorstellingtitel span:last-child {
	margin-left: auto;
}
.voorstellingtitel a {
	word-wrap: break-word;
	max-width: 75%;
}
	
.starttijd {
	font-weight: bold;
}
.edit button {
	font-weight: bold;
  align-items: center;
  padding: 6px 14px;
  /*font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;*/
  border-radius: 6px;
  border: none;
  color: #fff;
  background: linear-gradient(180deg, #336269 0%, #183B3F 100%);
   background-origin: border-box;
  box-shadow: 0px 0.2px 0.6px rgba(54, 122, 246, 0.25), inset 0px 0.4px 0px -0.25px rgba(255, 255, 255, 0.2);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.edit button:hover {  
	box-shadow: inset 0px 0.4px 0px -0.1px rgba(255, 255, 255, 0.2), 0px 0.2px 0.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
	outline: 0;
}
.voorstelling .edit button {
	background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);
}

.vervallen::before {
	color: red;
	font-weight: bold;
	font-size: 2.2vw;
	content: "GEANNULEERD";
	top: -50px;
	position: relative;
	display: inline-block;
	transform: rotate(-15deg);
	border: 4px solid red;
	padding: 10px;
	border-radius: 10px;
		-webkit-mask-image: url('/style/img/grunge.png');
  -webkit-mask-size: 944px 604px;
  mix-blend-mode: multiply;
}
.selectwissel {
	display: none;
}
.opmline {
	border-bottom: 1px dashed #BDBDBD;
}
.edit {
	float: left;
	margin-right: 5px;
}
input.aanvang {
	padding: 2px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
	font-size: 18px;
	font-weight: bold;
}
input.eindtijd {
	padding: 2px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
	font-size: 18px;
}
.roosterin {
	background-color: rgba(255,255,255,0);
border: 2px solid #106fe7;
border-radius: 100px;
color: #106fe7;
display: inline-block;
font: normal normal 15px / 15px Graphik Web Regular Regular, Helvetica, Arial, Verdana, sans-serif;
overflow: hidden;
padding: 4px 12px 5px;
position: relative;
text-decoration: none;
transition: all .3s ease-in-out;
min-width: 100px;
text-align: center;
z-index: 1;
}
.dienstinfo, .dienstruil, .dienstinfotitel {
	width: 600px;
	margin: auto;
}
.dienstruil {
	margin-top: 20px;
}
.anderemedewerker select, .dienstruil select, .dienstinfotitel select {
	width: 100%;
	margin: 10px 0;
	text-align-last: left;
}
.dienstruil button, .dienstinfotitel button {
	float: right;
}
$select-color: #b6b6b6;
.selector {
  /* wrapper style */
  position: relative;
  display:block;
  max-width: 400px;
  min-width: 180px;
  margin:0 auto;

  select {
    /* Select Reset */
    border: 1px solid $select-color;
    outline:none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    margin:0;
    display:block;
    width: 100%;
    cursor: pointer;
    
    /* custom select appearance */  
    padding: 12px 55px 15px 15px;
    font-size: 14px;
  }
  /* the down arrow */
  &:after{
    position: absolute;
    right:0; top:0;
    width: 50px; 
    height:100%;
    line-height: 50px;
    content: '\25BC';
    text-align: center;
    z-index:-1;
    background: $select-color;
    color:#fff;
    font-size: 18px;
  }
}
a.rstrbutton, .roosterin, .medewerkers button, .diensten-overzicht button, .eigendiensten button, .overnameruilknop, .algemeen button, .verzoeken button {
    background-color: rgba(255,255,255,0);
    border: 2px solid #106fe7;
    border-radius: 100px;
    color: #106fe7;
    display: inline-block;
    font: normal normal 15px / 15px Graphik Web Regular Regular, Helvetica, Arial, Verdana, sans-serif;
    overflow: hidden;
    padding: 4px 12px 5px;
    position: relative;
    text-decoration: none;
    transition: all .3s ease-in-out; 
    min-width: 100px;
    text-align: center;
    z-index: 1; }
a.rstrbutton:hover, a.rstrbutton.clicked, 
a.rstrbutton:focus, .roosterin:hover, .roosterin:focus, .medewerkers button:hover, .diensten-overzicht button:hover, .medewerkers button:focus, .eigendiensten button:hover,
.eigendiensten button:focus, .overnameruilknop:hover, .overnameruilknop:focus, .algemeen button:hover, .algemeen button:focus, .verzoeken button:hover, .verzoeken button:focus {
    color: #fff; 
    transition: all .3s ease-in-out; }

a.rstrbutton::before, .roosterin::before, .medewerkers button::before, .diensten-overzicht button::before, .eigendiensten button::before, .overnameruilknop::before, .algemeen button::before, .verzoeken button::before {
    background: linear-gradient(#106fe7, #106fe7) -100px 0 no-repeat;
    content: "";
    display: inline-block;
    
    height: 10em;
    width: 300%;

    opacity: 0;
    
    position: absolute;
    top: 0;
    left: -40%;

    -webkit-transform: skewX(-33deg) translateX(-80%);
        -ms-transform: skewX(-33deg) translateX(-80%);
            transform: skewX(-33deg) translateX(-80%); 
    
    transition: opacity .25s ease-in-out, -webkit-transform 0s .85s;
    transition: opacity .25s ease-in-out, -ms-transform 0s .85s;
    transition: opacity .25s ease-in-out, transform 0s .85s; 

    z-index: -1; }
a.rstrbutton:hover::before, a.rstrbutton.clicked::before, .roosterin:hover::before, 
a.rstrbutton:focus::before, .roosterin:focus::before, .medewerkers button:hover::before, .diensten-overzicht button:hover::before, .medewerkers button:focus::before,
.eigendiensten button:hover::before, .eigendiensten button:focus::before, .overnameruilknop:hover::before, .overnameruilknop:focus::before,
.algemeen button:hover::before, .algemeen button:focus::before, .verzoeken button:hover::before, .verzoeken button:focus::before {
    opacity: 1;
    
    -webkit-transform: skewX(-30deg) translateX(0);
        -ms-transform: skewX(-30deg) translateX(0);
            transform: skewX(-30deg) translateX(0); 
    
    transition: -webkit-transform 0.5s ease-in-out;
    transition: -ms-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out; }

    button.notclickable {
    	 opacity: 0.3;
    }
    .medewerkers .col button {
		
    }
    .vakantiemarge {
    	height: 10px;
    }