@font-face {
    font-family: 'Lora';
    src: url('/fonts/Lora/Lora-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/source-sans-pro/SourceSansPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
html {
    font-family: 'Source Sans Pro', sans-serif;
	font-size: 20px;
}
body {
    padding: 0px;
    margin: 0px;
}
h1 {
    font-family: 'Lora', serif;
}
h2,h3,h4,h5 {
    /* font-family: 'Lora', serif; */
     font-family: 'Source Sans Pro', sans-serif;
}
.banner.lummishore {
    background-image: url(/css/banners/lummishore.jpg);
}
.banner.neptunebeach {
    background-image: url(/css/banners/neptunebeach.jpg);
}
.banner.mtbaker {
    background-image: url(/css/banners/mtbaker.jpg);
}
.banner.lummiisland {
    background-image: url(/css/banners/lummisland.jpg);
}
.banner.river {
    background-image: url(/css/banners/test_lg.jpg);
}
.banner.portage {
    background-image: url(/css/banners/portage.jpg);
}
.banner.lake {
    background-image: url(/css/banners/lake.jpg);
}
.banner.deer {
    background-image: url(/css/banners/deer.jpg);
}
.banner.forest {
    background-image: url(/css/banners/forest.jpg);
}
.banner.waterfalls {
    background-image: url(/css/banners/waterfalls.jpg);
}
.banner.crab {
    background-image: url(/css/banners/crab.jpg);
}
.banner.chart {
    background-image: url(/css/banners/chart.jpg);
}
a {
    text-decoration: none;
}
a:hover{
    color: #4CAF50!important;
}

li a {
    text-decoration: none;
}
#pagecanvas {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
    background-color: white; 
}
#pagecanvas section {
    margin: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
  
    background: rgba(255,255,255,0);
}


#headerrow {
    position: sticky;
    top: 0;
    padding: 8px; 
    padding-bottom: 12px; 
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%)!important;
    z-index: 2;
}
#LNRLogo {
    float: left;
    max-width: 200px;
}
#LNRLogo img {
    width: 100%;
    cursor: pointer;
}
#menu-icon {
    margin-left: 8px;
}
.header-icon {
    float: right; 
    font-size: 3em;
}
.header-icon i{
    padding: 4px;
    border: thin solid black;
    border-radius: 5px;
}
.header-icon i:hover{
    border: thin solid #4CAF50;

}
#headerpanes {
    float: left;
    width: calc(100% - 300px);
    position: relative;
    overflow: hidden;
    font-size: 20pt;
}
.pane {
    overflow: hidden;
    display: block;
    
}
.pane div.subpane {
    width: 100%;
    clear: both;
    float: none;
}
.w3-dropdown-hover.trunk_link: hover{
    background-color: inherit;
    
}
.w3-dropdown-hover:hover > .w3-button.trunk_link:first-child{
    background-color: transparent !important;
}
ul.nav-links{
    width:100%;
    overflow:hidden;
    margin-top: 0px;
    margin-bottom: 0px;
} 
ul.nav-links li{
        display: inline-block;
        margin-right: 12px;
        color: #006699;
}
ul.nav-links li:hover{
        color: #4CAF50;
        cursor: pointer;
}
ul.trunk_child{
    padding-left: 5px;
    list-style-type: none;   
    text-align: center;
}
ul.trunk_child li{
        display: list-item;
        margin-right: 12px;
        color: #006699;
}
.animate__fast {
  --animate-duration: 200ms!important;
  --animate-delay: 0s;
}
img.uicon {
    border: 2px solid #006699;
    max-width: 62px;
    max-height: 70px;
    object-fit: cover;
    border-radius: 4px;
    padding: 0px;
}
img.uicon:hover  {
    cursor: pointer;
    border: 2px solid #4CAF50;
    border-radius: 4px;
}
#iconsrow i{
    cursor: pointer; 
    margin-right: 8px;
    margin-left: 8px;
    font-size: 1.5em;
}
.icon-container {
    display: inline-block;
    position: relative;
    text-align: center;
    height: 2em;
    color: #006699;
}
.icon-container:hover{
    color: #4CAF50!important; 
}
#iconsrow .w3-dropdown-hover:first-child{
   background-color: white!important; 
   text-align: center;
   color: #006699;

}

.icon-container:has(.w3-dropdown-content:hover) .topicon:not(:hover){
    color: #4CAF50!important;  
}

.w3-dropdown-hover.topicon:hover {
    color: #4CAF50!important;
}
.w3-dropdown-content.icon-container{
    color: #4CAF50!important;
    text-align: center;
}

.icon-text.w3-dropdown-content {
	cursor: pointer;
	color: #4CAF50;
	background-color: rgba(0,0,0,0);
	display: none;
	position: absolute;
	width: 160px;
    left: 50%;
	margin-left: -80px;
    margin-top: -5px;
	padding: 0px;
    text-align: center;
   z-index: 3!important;
}

#user-apps-list {
    margin: 4px;
    padding-left: 0px;
}
/*Overlay Classes*/
    .overlay {
      height: 100%;
      width: 100%;
      display: none;
      position: fixed;
      z-index: 100;
      top: 0;
      left: 0;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0, 0.5);
    }

    .overlay-content {
        width: 90%;
        position: relative;
        margin-top: 30px;
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
        background-color: #ffffff;
        border-radius: 14px;
        max-height: 93.3vh;
        min-height: 93.3vh;
        border: 4px solid #006699;
        overflow: auto;
    }
    .overlay-title {
        border-radius: 9px 9px 0px 0px; 
        margin: 0px; 
        border: 4px solid #006699;
    }
    ul.nav-links a{
            text-decoration: none;
    }
     ul.nav-links li.trunk{
           font-size: 1.75em;

     }
/*End Overlay Classes*/


#breadcrumbs-row {
    text-align: center;
    margin-bottom: 12px;
}
.breadcrumbs {
    padding-left: 0px;
    margin: 0px;
}
.breadcrumbs>li{
        display: inline-block;
        margin-right: 12px;
        color: #006699;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 2ch;
        max-width: 20ch;
        text-align: center;
        margin-right: 0px;
        white-space: nowrap;
}

.breadcrumbs li:hover{
        color: #4CAF50;
        cursor: pointer;
}
.breadcrumbs li.caret{
    color: black;
    width: 1ch;
    min-width: 1ch;
    cursor: default;
}
li.subitem.breadrumbmenu{
    overflow: visible;  
}
li.subitem.current{
    color: #000000;
    cursor: default;
    font-size: 1em;
}
li.subitem a{
    text-decoration: none;
}

.breadrumbbutton.w3-dropdown-hover:first-child{
    background-color: rgba(255,255,255,0)!important;
    color: #006699;
}
.breadcrumb.w3-dropdown-content {
    border: thin solid #006699;
	background-color: white;
    padding: 8px;
	position: absolute;
    width: auto;
	margin-left: -15px;
    border-radius: 0px 0px 12px 12px;
 
}
.breadrumbbutton:hover{
    color: #4CAF50!important;  
}
ul.breadcrumb-menu-item {
    
    padding-left: 0px;
}
ul.breadcrumb-menu-item li{
    text-align: left;
    color: #006699;
    display: block;
    cursor: pointer;
}

#title-heading {
    background-color: #006699; 
    color: #ffffff;
    margin:0px;

}
#title-heading.banner {
	width: 100%;
	height: 150px;
	background-repeat: no-repeat;
	background-position: center center;
	-o-background-size: cover, auto;
	-moz-background-size: cover, auto;
	-webkit-background-size: cover, auto;
	background-size: cover, auto;
	position: static;
	clear: both;
	display: block;
    line-height: 150px;
    text-shadow: 2px 2px 5px black;
}
#page-footer {
    clear: both;
}
#page-footer p{
    font-size: 0.75em;
    text-align: center;
    color: #bbb;
}
#page-footer p a:hover{
    color: #4CAF50;
}
#page-footer a {
    text-decoration: none;
}
#widgets-list{
    margin-bottom:0px;
    margin-top:0px;
    padding-left: 0px;
}
#widgets-list>li{
    display: inline-block;
    margin-right: 2px;
    color: #bbb;
    text-align: center;
    white-space: nowrap;
    border: 0px solid #006699;
    border-radius: 6px 6px 0px 0px;
    padding: 6px;
    border-bottom: 0px;
    font-size: 0.8em; 
}

#widgets-list>li:hover{
    background-color: #006699; 
    color: #ffffff;
    cursor: pointer;
}
#widget-content {
    width: 100%;   
    text-align: center;
}
#widget-content.active {
    border: 1px solid #006699;
    padding: 8px;
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}
#links-list{
    margin-bottom:0px;
    margin-top:12px;
    padding-left: 0px;
}
#links-list>li{
    display: inline-block;
    margin-right: 2px;
    color: #006699;
    text-align: center;
    white-space: nowrap;
    padding: 0px;
    max-width: 25ch;
    text-overflow: ellipsis;

    cursor: pointer; 
}
#links-list>li:hover{

    color: #4CAF50;
    cursor: pointer; 
}
#links-list>li a{
  /* text-decoration-line: underline;   */
}
#links-list>li a div{
    border: 1px solid #006699;
    border-radius: 4px;
    padding: 6px;
}
#node_content {
    padding-top: 8px;
    padding-bottom: 8px;
}
#node_content h1 {
    text-align: center;
    clear: both;
}
#node_content p {
    color: #486e84;
    font-size: 18pt;
    text-align: justify;
    text-justify: auto;
}
#node_content li {
    font-size: 18pt;
    margin-bottom: 12px;
}
.custom-link:hover, .child-link:hover{
    border-bottom: thin solid grey;
}
.floated-image {
   max-width: 400px;
   border-radius: 12px;
} 
.floated-image.desktop-center {
   max-width: 100%;
   border-radius: 12px;
} 
.floated-image img {
    max-height: 100%;
    max-width: 100%;
    border-radius: 12px;
}
.floated-image.desktop-left-side {
    float: left;
    clear: left;
    margin-right: 8px;
    margin-left: 0px;
}
.floated-image.desktop-right-side {
    float: right;
    clear: right;
    margin-left: 8px;
    margin-right: 0px;
}
.floated-image.desktop-center {
    text-align: center;
    max-height: 80vh;
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}
.floated-image.desktop-center img{
    max-height: 70vh;
}
.image-caption {
    text-align: center;
    color: #aaa;
}

div.owl-carousel {
    clear: both;
}

div.owl-carousel.slideshow .item img{
    display: block;
    width: 100%;
    height: 50vh!important;
    object-fit: cover;
    object-position: center;
    min-height: 400px;
}
div.owl-carousel.slideshow .item .caption{
    display: block;
    position: absolute;
    bottom: 5%;
    width: 100%;
    color: white;
    text-shadow: 2px 2px 5px black;;
}
div.owl-carousel.slideshow .caption h1, .caption h2, .caption h3, .caption h4, .caption h5, .caption h6    {
    text-align: center;
}

hr {
    border: 2px solid #eee;
}

.owl-carousel.documents .item {
    padding: 8px;
}

.document {
    position: relative;
    width: 100%;
    background-color: #eee;
    margin-bottom: 0px;
    height: 6em;
    overflow: hidden;
}
div.owl-carousel .document {
    margin-bottom: 8px; 
}
.document-icon-container {
    float: left;
    width: 3em;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.document-icon-container.pdf {
    background-color: #2196F3;
    color: white;
}
.document-icon-container.excel {
    background-color: green;
    color: white;
}
.document-icon-container.word {
    background-color: #006699;
    color: white;
}
.document-icon-container.powerpoint {
    background-color: purple;
    color: white;
}
.document-icon-container.zip {
    background-color: #e67300;
    color: white;
}
.document-icon{
    font-size: 2em;
}
.document-icon i{
    vertical-align: middle;
}
.document-inner {
    float: left;
    width: calc(100% - 3em);
    height: 100%;
    padding: 8px;
}
.document-title {
    float: left;
    clear: right;
    text-align: left!important;
    max-height: calc(3em + 16px);
    font-size: 1em;
    line-height: 1em;
    padding-bottom: 5px;
    overflow: hidden;
    text-transform: capitalize;
    padding: 4px;
    padding-top: 8px;
    padding-bottom: 8px;  
    color: #006699;    
}
.document-title:hover {
    color: #4CAF50;
}
#node_content p > a, #node_content li > a {
    color: #2196F3!important; 
}
#node_content p > a:hover, #node_content li > a:hover {
    color: #4CAF50!important;
}
a.linkcontent {
    color: #2196F3;
}

#node_content ul li a:hover {
    color: #4CAF50!important;
}
a.linkcontent:hover {
    color: #4CAF50;
}
.document-author {
    float: left;
    clear: left;
    padding-left: 4px;
    text-align: left;
}
.document-size {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 25%;
    text-align: right;
    padding-right: 4px;    
}

/* Start Search Box Related CSS*/

.even {
	background-color: #e5ecf9;
}
#doc_search {
		width: 95%;
		position: relative;
		font-size: 18px;
		padding-top: 0px;
		margin: -0px auto 0;
}
#main_search, .search_container {
		width: 95%;
		position: relative;
		font-size: 18px;
		padding-top: 40px;
		margin: -0px auto 0;
}
#doc_search {
		margin: -0px auto 0;
		padding-top: 0px;
		margin: -0px auto 0;
}
#main_search label, .search_container label {
	position: absolute;
	left: 17px;
	top: 51px;
}
#doc_search label, .search_container label {
	position: absolute;
	left: 17px;
	top: 11px;
}
#file_picker_search_input, #search_input, #select_input, #site_search_input, #document_search_input {
	border: 1px solid #ccc;
	height: 46px;
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.3333333;
	width: 100%;
	padding-left: 43px;
	padding-right: 43px;
	border-radius: 23px;
    margin-bottom: 5px;
}
#file_picker_search_input:focus, #search_input:focus, #select_input:focus, #site_search_input:focus, #document_search_input:focus {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

#search-clear, #select-clear {
	text-decoration: none;
	position: absolute;
	right: 18px;
	top: 54px;
	color: #b3b3b3;
}
#doc_search #search-clear, #select-clear {
	text-decoration: none;
	position: absolute;
	right: 18px;
	top: 14px;
	color: #b3b3b3;
}
.count_results_row {
	background-color: #f9f9e0;
	color: #18679b;
	font-size: 1.3em;
}
	
/* End Search Box Related CSS*/

/* Form element Styling */
.lnr {
        width: 100%;
}
textarea.lnr {
	font-size: 24px!important;
	border: 1px solid grey;	
}
input.lnr {
	font-size: 24px!important;
	border: 1px solid grey;	
}
label.lnr {
	font-size: 24px!important;
	color: grey;
}
select.lnr {
	border: 1px solid grey;	
	background-color: white;
	font-size: 24px!important;
	margin-bottom: 1px;
}
select.lnr.nomargin {
	margin-bottom: 0px;
}
select.lnr:hover:disabled{
	border: 1px solid white;
}
select.lnr:focus {
	border: 1px solid #006699;	
}
input.lnr:focus {
	border: 1px solid #006699;
}
select.lnr:hover {
	border: 1px solid green;
}
select.lnr optgroup { 
	font-size: 24px; 
}
input.lnr:hover {
	border: 1px solid green;
}
textarea.lnr {
	width: 100%;
	height: 150px;
}
textarea.lnr:focus {
	border: 1px solid #006699;
}
textarea.lnr:hover {
	border: 1px solid green;
}
input[type='submit'].lnr {
	border: 0;
}
/* End Form element Styling */


/* toggle switch styles */
.switchname{
	vertical-align: middle;
	text-align: left;
	display: block;
	height: 100%;
	width: 50%;
	position: absolute;
    left: 0px;
    top: 0px;
	margin: 0px;
	padding: 5px;
}

.switch {
	position: relative;
	display: inline-block;
	width: 100px;
	height: 30px;
	padding: 3px;
	margin: 2px;
	/*background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);*/
	border-radius: 18px;
	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}
.switch-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.switch-label {
	position: relative;
	display: block;
	height: inherit;
	font-size: 10px;
	text-transform: uppercase;
	background: #eceeef;
	border-radius: inherit;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
	position: absolute;
	top: 50%;
	margin-top: -.5em;
	line-height: 1;
	-webkit-transition: inherit;
	-moz-transition: inherit;
	-o-transition: inherit;
	transition: inherit;
}
.switch-label:before {
	content: attr(data-off);
	right: 11px;
	color: #aaaaaa;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
	content: attr(data-on);
	left: 11px;
	color: #FFFFFF;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
	opacity: 0;
}
.switch-input:checked ~ .switch-label {
	background: #0099cc;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
	opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
	opacity: 1;
}

.switch-handle {
	opacity: 1;
	position: absolute;
	top: 4px;
	left: 4px;
	width: 28px;
	height: 28px;
	filter: alpha(opacity=100);
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.switch-handle:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -6px;
	width: 12px;
	height: 12px;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
	border-radius: 6px;
	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
	transition: All 0.3s ease;
	left: 74px;
	box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-handle:before {
	background: green;
}

.switch-label, .switch-handle {
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	-moz-transition: All 0.3s ease;
	-o-transition: All 0.3s ease;
}

.pinned_field .switch {
	position: relative;
	display: inline-block;
	width: 100px;
	height: 21.3px;
	padding: 3px;
	margin: 2px;
	border-radius: 18px;
	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
}
.pinned_field .switch-handle {
	opacity: 1;
	position: absolute;
	top: 4px;
	left: 4px;
	width: 19.3px;
	height: 20px;
	filter: alpha(opacity=100);
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* end toggle switch styles */
.appDebug{
    background-color: white;
	z-index: 1000;
    position: fixed;
	padding: 50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 70vw;
} 
.appDebug.warning{
	background-color: red;
	background: rgba(255, 0, 0, 0.95);
    color: white;
    
}
.appDebug.notice{
	background-color: #e68a00;
	background: rgba(230, 138, 0, 0.95);
    color: black;
}
.appDebug.message{
	background-color: #006699;
	background: rgba(0, 102, 153, 0.95);
    color: white;
}

.nomargins-vertical {
    margin-top: 0px;
    margin-bottom: 0px;
}
.user-buttons {
    position: absolute;
    top: 20px;  
    width: 100%;
    right:24px;
}
.userpanebutton {
    float: right;
    padding: 4px;
    border-radius: 5px;
    background-color: white;
    margin-right: 10px;

}
#userpane{
    width: 100%;
    text-align: left;
    position: relative;
}
ul.linktypes {
    margin-bottom: 0px;
    
}
li.linktype {
    user-select: none;
    border-radius: 8px 8px 0px 0px;
}
li.linktype:hover {
    cursor: pointer;
	background-color: #4CAF50;
    color: white; 
}
li.linktype.selected {
	background-color: #006699;
    color: white; 
    
}
li.linktype.selected {
    cursor: default; 
}
#new_link_box {
    border: 5px solid #006699;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;    
}
.control-verification {
    top: 0px;
    right: 0px;
    margin-top: 0px;
    margin-right: 12px;
    position: absolute;
    font-size: 0.75em;
}
.staff_carousel_item {
    width: 100%;
    height: 150px;
}
.staff_carousel_image {
    float: left;
    width: 25%;
    display: inline-block;
}
.staff_carousel_image img {
    max-height: 150px; 
    max-width: 100%;
    width: auto!important;
}
.staff_carousel_content{
     width: 75%;
     float: left;
     height: 150px; 
     display: inline-block;
     padding: 5px;
     padding-top: 0px;
     display: inline-block;

}

.staff_carousel_content div{
    display: inline-block;
    width: 100%;
}
.grouppage {
    color: grey;
}
.staffname {
    font-size: 1.25em;
}
@media (min-width:993px){
    /* desktop */
    #pagecanvas {
        padding: 12px;
    }
    #headerrow .pane {
        background: rgba(255,255,255,1)!important;
    }
    #menu-icon {
        display: none;
    }     

    .pane {
        text-align: center;
    }
    .pane.hide {
        display: none;
    }

    #headerpanes{
        position: relative;
    }
    #navpane{
        min-height: 65px;
        padding: 10px 0;
        overflow: hidden;
    }
    #iconsrow {
        padding-left: 43%;
    }
    #user-apps-list {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2; 
    }
    #links-list>li{
        font-size: 1.25em;   
    }
    .document-title {
        font-size: 1.2em;
        line-height: 1.1em;
        padding-bottom: 0px;
        padding-top: 0px;
        max-height: 3.5em;
    }
    div.owl-carousel.slideshow .item img{

        height: 60vh!important;
        min-height: 600px;
        
    }
    #title-heading {
        white-space: nowrap;
        overflow: hidden;
        font-size: 2.5em;
        max-width: 100vw;
        text-overflow: ellipsis;

    }
    #links-list.nodesktop {
        display: none;
    }

}

@media (max-width:992px) and (min-width:601px){
    /* tablet */
    #pagecanvas {
        padding: 8px;
    }
    #headerrow .pane{
        background: rgba(255,255,255,1)!important;
    }
    #headerpanes {
        clear: both;
        float: none;
        width: 100%;
    }
    #headerpanes div.pane {
        display: none;
    }
    #headerpanes div.pane.active {
        display: block;
    }
   .pane {
        padding: 8px;
        border: thin solid grey;
        box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        border-top: 0px;
        border-radius: 0px 0px 8px 8px;
        margin-bottom: 8px;
    }
    #title-heading {
        white-space: nowrap;
        overflow: hidden;
        font-size: 2em;
        max-width: 100vw;
        text-overflow: ellipsis;

    }
    ul.nav-links{
        margin-top: 8px;
    }
    ul.nav-links li{
            display: block;
    }
    #userpane{
        display: none;
    }
    #user-apps-list {
        columns: 3;
        -webkit-columns: 3;
        -moz-columns: 3; 
    }
    #iconsrow {
        padding-left: 40%;
    }
    #links-list>li{
        margin-right: 1px;
        padding: 3px;
        max-width: 20ch;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .document-title {
        font-size: 1em;
        line-height: 0.9em;
        padding-bottom: 0px;
        padding-top: 0px;
        max-height: 4em;
    }
    #links-list.nodesktop {
        display: block;
    }

}

@media (max-width:600px){
    /* mobile */
    #pagecanvas {
        padding: 5px;
    }
    #headerrow .pane {
        background: rgba(255,255,255,1)!important;
    }
    #headerpanes {
        clear: both;
        float: none;
        width: 100%;
    }
    #headerpanes div.pane {
        display: none;
    }
    #headerpanes div.pane.active {
        display: block;
    }
   .pane {
        padding: 8px;
        border: thin solid grey;
        box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        border-top: 0px;
        border-radius: 0px 0px 8px 8px;
        margin-bottom: 8px;
    }
    #title-heading {
        white-space: nowrap;
        overflow: hidden;
        font-size: 1.25em;
        max-width: 100vw;
        text-overflow: ellipsis;

    }
    .overlay-content {
        width: 95%;
    }
    ul.nav-links{
        margin-top: 8px;
    } 
    ul.nav-links li{
            display: block;
    }
    #iconsrow {
        padding-left: 20%;
    }
    .breadcrumbs {
        font-size: 0.8em;
    }
    #links-list{
        margin-top:6px;
    }
    #widgets-list>li{
        font-size: 0.65em;   
    }
    #links-list>li{
        font-size: 1em;   
    }
    #links-list>li{
        margin-right: 1px;
        padding: 3px;
        max-width: 18ch;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #user-apps-list {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1; 
    }
    .floated-image.desktop-left-side {
        float: none;
        clear: both;
        width: 100%;
        text-align: center;
        margin-left: auto!important;
        margin-right: auto!important;
    }
    .floated-image.desktop-right-side {
        float: none;
        clear: both;
        width: 100%;
        text-align: center;
        margin-left: auto!important;
        margin-right: auto!important;
    }
    .document-title {
        font-size: 1.1em;
        line-height: 1em;
        max-height: 4em;
    }
    #links-list.nodesktop {
        display: block;
    }
    .staff_carousel_content div{
        font-size: 0.75em;
    }
    .staffname{
        font-size: 0.9em!important;
    }
    .w3-dropdown-content.trunk_link_child{
        display:none;
    }
    .w3-dropdown-hover.trunk_link:hover .w3-dropdown-content{
       display:none !important;
    }
}