.sidebar {
    position: absolute;
    overflow-x: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    width: 0;
    z-index: 300;
    background-color: #e6e6e6;
    height: 100%; /*Specify height*/
}

    .sidebar.left {
        left: 0;
    }

    .sidebar.right {
        right: 0;
    }

    .sidebar.open {
        width: 450px;
    }

@media (max-width:764px) {
    .sidebar.open {
        width: 100%;
    }
}

.page-content {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    .page-content.left {
        margin-left: 0;
    }

    .page-content.right {
        margin-right: 0;
    }



    .page-content.left.open {
        margin-left: 450px;
    }

    .page-content.right.open {
        margin-right: 450px;
    }

@media (max-width:764px) {
    .page-content.left.open {
        margin-left: 130px;
    }

    .page-content.right.open {
        margin-right: 130px;
    }
}


.toggleSidebar {
    position: relative;
    left: -15px;
    margin-top: 15px;
    z-index: 3;
    height: 57px;
    width: 53px;
    border: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-repeat: no-repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA5CAYAAACWJGMLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+lpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxNS0xMC0xMlQxMzozMDoyMSswMjowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTUtMTAtMTJUMTE6NTE6NTUrMDI6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTUtMTAtMTJUMTE6NTE6NTUrMDI6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU2OEU3QUU4Njg5NjExRTVBOEMwRkM1NDFFQjk1MzhBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVBNUJGQkFDNjg5ODExRTVBOEMwRkM1NDFFQjk1MzhBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTY4RTdBRTY2ODk2MTFFNUE4QzBGQzU0MUVCOTUzOEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTY4RTdBRTc2ODk2MTFFNUE4QzBGQzU0MUVCOTUzOEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7wSJ0pAAAB6UlEQVR42uyawWrCQBCGd6sGLxEkChaNGAI5V/TkQfBuH6CP0EfqC/QFmlOhvYjNqZBiURsQWwLiZRFTUImI3Sl4azESScIyP+xByOJ8/jOzKxO63+/viBhy+TIppfYFEUcqX7fcpCuRoA7qigilighFEAqhYlQ66IPL5VIejUYNz/Mufd+XowpQluVZoVD40nX9I5vN+kH20CCHr+M4xmQyaVWrVUlVVZLL5SIB2m63hDFGptMp+eaq1+uPxWKRhYYCh3q93k273Y4M5i8B2Hg89judzv0xx47WFKScYRixAoE0TSPcJcm27VboRrFYLGqlUikRDQB+XKjp0FC73U6K26WDII4gTQrPKYRCKITCu18omab5/1/Rbvfk59AphEIohEKo2Fp60HZ8rraN6YfphzcKTD+EQiiEwhsFOoVQCIVQSYdKpVL+er1ORLCe5/3GExoKZq7z+TwRUK7rknw+/xkaStO0dxhNwvw1bpcgDl3XB6GhyuXyjFs+Gw6HsQJZlkUqlcrrWQbZoM1mI/X7/etMJqPAiDKqcSnUMqQcOKQoyqDZbFpB9tFT3vezbbvBGKvxL1OigIKmADUNJQAZE3QfFeglRjx8ESoBWokI9SYi1EtaMKAnSqkjCtSKr2cO9AAffgQYABpzwQSFI/XuAAAAAElFTkSuQmCC');
}

    .toggleSidebar,
    .toggleSidebar:active,
    .toggleSidebar:hover,
    .toggleSidebar:focus {
        outline: none;
    }

        .toggleSidebar:hover {
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA5CAYAAACWJGMLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+lpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxNS0xMC0xMlQxMzozMDoyMSswMjowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTUtMTAtMTJUMTE6NTI6NDMrMDI6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTUtMTAtMTJUMTE6NTI6NDMrMDI6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVBNUJGQkFGNjg5ODExRTVBOEMwRkM1NDFFQjk1MzhBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVBNUJGQkIwNjg5ODExRTVBOEMwRkM1NDFFQjk1MzhBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUE1QkZCQUQ2ODk4MTFFNUE4QzBGQzU0MUVCOTUzOEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUE1QkZCQUU2ODk4MTFFNUE4QzBGQzU0MUVCOTUzOEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7ynaipAAACHklEQVR42mL8////TIbhAR4D8RZGRsYLTAzDB8gCcSYwkgyGk6dgwGc4ekp2OHqKYdRTo54aQMBCrMKrzz9LrLz+3eHpby6eLwwcdAsMSaZPP9V4fj8P0uY/JsHH8YUYPYzEVL7zT7+02/eOX8NFno3BXpqRQYGXkS4e+vqHgeHau/8M2x7+Y3j07vu/JNXf+62VBO9SHFOgGNrxTlij04qZbp6BAW6g60zFGIGYGegxLqYZN345K4v8eEkoxggmI1CSC1VhoruH0IGXPBODvhgrw7Qzn3woLiju/+bjMxFjHBQFQAgwcEF5mmJP/QKm0IGOJRgAuYOYQmq0nhr11KinRj012vajCITv/IO7AndnIVndaEyNemrUU6OeGvXUgBXpxBbH1Cq2R5PfaPIbbVGMJr9RT416atRToy2K0Zga9dSop0Y9Ndg9xcbwh+H198Hh2Aef/4PdQ7GnJJm/fDv96t+g8NTBp/8ZFFk/faLYU47SDBe3PfwPnn8d6FgCzf26K7CepthTnpoil1l+fvy58Ma/AfVQ06m/DGZcb58TM5FN1Oz8i08/eBpP/Azj4+FhAU1RmtJpuhSUlw8++8ew7cE/BmXmt2+qHcTXEaOPkZT1fr2HX/re+c4h+u4/Nws9PAUqFEB5GpQFQCmGWH2Mw2gR42jlO+qpQQC+DUdPXRyOnjo23Dy1l5GR8RbLcMlHQLwP6KHNIA5AgAEA7Fy2gXo4y00AAAAASUVORK5CYII=');
        }


/*side bar menu Options 
    this is custom code for the menu options for UFS
*/