#sb-site, .sb-site-container {
	/* You may now use class .sb-site-container instead of #sb-site and use your own id. However please make sure you don't set any of the following styles any differently on your id. */
	width: 100%;
	position: relative;
	z-index: 1; /* Site sits above Slidebars */
	background-color: #f1f1f1; /* Default background colour, overwrite this with your own css. I suggest moving your html or body background styling here. Making this transparent will allow the Slidebars beneath to be visible. */
}

/* ---------------
 * 003 - Slidebars
 */

.sb-slidebar {
	height: 100%;
	overflow-y: auto; /* Enable vertical scrolling on Slidebars when needed. */
	position: fixed;
	top: 0;
	z-index: 0; /* Slidebars sit behind sb-site. */
	display: none; /* Initially hide the Slidebars. Changed from visibility to display to allow -webkit-overflow-scrolling. */
	background-color: #222222; /* Default Slidebars background colour, overwrite this with your own css. */
	-webkit-transform: translate(0px); /* Fixes issues with translated and z-indexed elements on iOS 7. */
}

.sb-left {
	left: 0; /* Set Slidebar to the left. */
}

.sb-right {
	right: 0; /* Set Slidebar to the right. */
}

html.sb-static .sb-slidebar,
.sb-slidebar.sb-static {
	position: absolute; /* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */
}

.sb-slidebar.sb-active {
	display: block; /* Makes Slidebars visibile when open. Changed from visibility to display to allow -webkit-overflow-scrolling. */
}

.sb-style-overlay {
	z-index: 9999; /* Set z-index high to ensure it overlays any other site elements. */
}

.sb-momentum-scrolling {
	-webkit-overflow-scrolling: touch; /* Adds native momentum scrolling for iOS & Android devices. */
}

/* Slidebar widths for browsers/devices that don't support media queries. */
	.sb-slidebar {
		width: 75%;
	}
	
	.sb-width-thin {
		width: 75%;
	}
	
	.sb-width-wide {
		width: 75%;
	}

@media (max-width: 480px) { /* Slidebar widths on extra small screens. */
	.sb-slidebar {
		width: 75%;
	}
	
	.sb-width-thin {
		width: 75%;
	}
	
	.sb-width-wide {
		width: 75%;
	}
}

@media (min-width: 481px) { /* Slidebar widths on small screens. */
	.sb-slidebar {
		width: 75%;
	}
	
	.sb-width-thin {
		width: 75%;
	}
	
	.sb-width-wide {
		width: 75%;
	}
}

@media (min-width: 768px) { /* Slidebar widths on medium screens. */
	.sb-slidebar {
		width: 75%;
	}
	
	.sb-width-thin {
		width: 75%;
	}
	
	.sb-width-wide {
		width: 75%;
	}
}

@media (min-width: 992px) { /* Slidebar widths on large screens. */
	.sb-slidebar {
		width: 75%;
	}
	
	.sb-width-thin {
		width: 75%;
	}
	
	.sb-width-wide {
		width: 75%;
	}
}

@media (min-width: 1200px) { /* Slidebar widths on extra large screens. */
	.sb-slidebar {
		width: 75%;
	}
	
	.sb-width-thin {
		width: 75%;
	}
	
	.sb-width-wide {
		width: 75%;
	}
}

/* ---------------
 * 004 - Animation
 */

.sb-slide, #sb-site, .sb-site-container, .sb-slidebar {
	-webkit-transition: -webkit-transform 400ms ease;
	   -moz-transition: -moz-transform 400ms ease;
	     -o-transition: -o-transform 400ms ease;
	        transition: transform 400ms ease;
	-webkit-transition-property: -webkit-transform, left, right; /* Add left/right for Android < 4.4. */
	-webkit-backface-visibility: hidden; /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */
}

/* --------------------
 * 005 - Helper Classes
 */
 
.sb-hide { 
	display: none; /* Optionally applied to control classes when Slidebars is disabled over a certain width. */
}












@media (max-width: 800px) {
/* Modal Dialogue */
.modal-title i {margin-right:10px;}

#modal-label {
    width:100%;
    font-size:13px;
    text-align: left;
    background:#daeaf2;
    padding:5px 10px;
    border-bottom: 1px solid #b3c9d4;
}

.modal-backdrop {
    display:none;
}

.modal-content {
    -webkit-box-shadow: none!important;
    -moz-box-shadow:    none!important;
    box-shadow:         none!important;
    border-radius:0px!important;
    -moz-border-radius:0px!important;
    -webkit-border-radius:0px!important;
    border:none!important;
}

.modal-dialog {margin:0px!important;width:100%;}

.modal-header {
    background:var(--first-color-plunk-text);
    color:#fff;
    }

.close {
    font-size:30px;
    color:#fff;
    opacity:1;
    text-shadow: none;
    width:35px;
}

.modal {/*
    height:100%;*/
    background:#fff;
    top:0px;
    padding-right:0px!important;
}

.modal-open .modal {overflow: auto;}

.modal-body {min-height: 400px;padding:0!important;}
}










.dncalendar-inactive{opacity:.2}.dncalendar-header{margin:20px 0;position:relative}.dncalendar-header h2{color:#434343;font-size:20px;line-height:1;text-align:center}.dncalendar-header .dncalendar-links{height:19px;width:100%;position:absolute;top:2px}.dncalendar-header .dncalendar-links div{cursor:pointer;width:35px;height:35px;-webkit-user-select:none;touch-action:pan-y;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}

.dncalendar-header .dncalendar-links .dncalendar-next-month{position:absolute;right:10px;background:url('arrows.png?') no-repeat -48px 0;background-size:148px 28px; width: 100px;margin-top: -5px;margin-right:5px;}

.dncalendar-header .dncalendar-links .dncalendar-prev-month{position:absolute;left:10px;background:url('arrows.png?') no-repeat 0 0;background-size:148px 28px; width: 100px;margin-top: -5px;margin-right:5px;}

.dncalendar-body{margin:0 0 10px}.dncalendar-body table{width:100%;text-align:center;border-collapse:collapse;font-size:15px}.dncalendar-body table th,td{display:table-cell;margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}.dncalendar-body thead td{color:#727272;font-size:11px;text-transform:normal;padding:10px 0;font-weight:bold;}.dncalendar-body tbody tr td{width:13%;border-top:1px solid #ddd;color:#bdbdbd;background:#f8f8f8;text-decoration:none;vertical-align:middle}.dncalendar-body tbody td#calendarClick{cursor:pointer}.dncalendar-body tbody td.calendarClick{color:#434343;background:#fff}.dncalendar-body tbody td .entry{padding:11px 0 13px;position:relative}.dncalendar-body tbody td.calendarClick:active{background:#ddd}.dncalendar-body tbody td .entry:after{content:attr(data-title);left:0;position:absolute;font-size:10px;bottom:1px;text-align:center;width:100%}

.dncalendar-body table td.holiday{color:#ef0006 !important}

.dncalendar-body table td.calendarClick.holiday{color:#ef0006 !important}

.dncalendar-body table td.default-date{border:1px solid #96d4fd;color:#96d4fd !important;background:#e6f2fa}.dncalendar-body table td.calendarClick.default-date{border:1px solid #0d7fcc;color:#0d7fcc !important;background:#e6f2fa}.dncalendar-body table td.today-date{border:1px solid #7ee699;color:#7ee699 !important;background:#e9fdee}.dncalendar-body table td.calendarClick.today-date{border:1px solid #0dcc3f;color:#0dcc3f !important;background:#e9fdee}

.dncalendar-body table td.note,.dncalendar-body table td.calendarClick.note{position:relative;color:#ef0006;font-weight:bold;}

.dncalendar-body table td.note:before{display:block;position:absolute;width:0;height:0;top:0;right:0;content:"";border-top:5px solid #c55;border-right:5px solid #c55;border-left:5px solid transparent;border-bottom:5px solid transparent;}

.dncalendar-body table td.calendarClick.note:before{display:block;position:absolute;width:0;height:0;top:0;right:0;content:"";border-top:5px solid #d00;border-right:5px solid #d00;border-left:5px solid transparent;border-bottom:5px solid transparent;}

.dncalendar-note-list{list-style:none;margin-left:4.5%;margin-bottom:20px;padding:0;color:#999}

.dncalendar-note-list .date{font-size:12px;color:#ef0006;}






.box-switch {
        cursor: pointer;
        text-indent: -9999px;
        width: 40px;
        height: 20px;
        background: grey;
        display: block;
        border-radius: 25px;
        position: relative;
        float:right;
}

.box-switch:after {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        width: 10px;
        height: 10px;
        background: #fff;
        border-radius: 15px;
        transition: 0.3s;
}

input:checked + .box-switch {
      background: #445870;
}

input:checked + .box-switch:after {
      left: calc(100% - 5px);
      transform: translateX(-100%);
}


.box-switch:active:after {
        width: 30px;
}