@charset "UTF-8";

:root {
  --bg-color-body:#6D6D64;
  --bg-color-main:#6D6D64;
  --bg-color-header-subnav:#BBBBBB;
  --bg-color-clickable:#CCCCCC;
  --bg-color-body-left:#CCCCCC;
  --bg-color-body-right:#EEEEEE;
  --bg-color-footer:#6D6D64;
  --bg-color-header:#6D6D64;

}

/* CSS Document */
h3 {
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}
/* New menu */
/* Add a black background color to the top navigation */
.topnav {
  /* height: 43px; */
/*   background-color:#333; newcolor*/
  background-color:#173e43;
  overflow:hidden;
  height:34px;

  /* Attempt to place whole top line in a grid */
  /* display:grid;
  grid-template-columns: 1fr 12fr 6fr;
  grid-row-gap: 6px;
  padding:6px; */

}

/* Style the sub navitation menu lines */
.subnav {
  height:22px;
  color:white;
  background-color:var(--bg-color-header-subnav);
  overflow:hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
  /* top:12px;
  position:fixed; */
  float:left;
  display:block;
  color:#f2f2f2;
  text-align:center;
  padding:7px 16px;
  text-decoration:none;
  font-size:17px;
}

/* .topnav-right {
  display:block;
  float:right;
} */

.topnav-grid {
  --column-width-min:9em;
  /* display:grid; */
  /* grid-row-gap: 6px; */
  margin-top:6px;
  /* padding:6px; */
  /* grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 3fr)); */
}

/* Style the links inside the navigation bar */
.subnav .subelementRemainder {
	padding-right:4px;
	margin-top:px;
	position:absolute;
	margin-left:220px;
}
/* Style the links inside the navigation bar */
.subnav .subelementFirst {
	width:316px;
	text-align:left !important;
	padding-right:4px;
  display:inline-block;
  float:left;

}
.subnav .subelementFirstLine2 {
	width:220px;
	text-align:left !important;
/*     padding:13px 30px 17px 17px !important;
    margin-top:6px !important;
 */}
.subnav .subelement {
  float:left;
  display:block;
/*   color:#4169E1; newcolor*/
  color:white;
  text-align:center;
  padding:0px 16px 0px 16px;
  text-decoration:none;
  font-size:17px;
  margin-top:7px;
}
.subnav .subtitle {
  float:left;
  display:block;
/*   color:#4169E1; newcolor*/
  color:black;
  text-align:left;
  padding:2px 5px;
  text-decoration:none;
  font-size:14px;
  position:relative;
  /* top:-3px; */
}
.subnav .subtitleB {
  margin-top:2px
}
.subnav .dropdown {
  margin-top:3px;
}
.subnav .subline2 {
	clear:both;
	float:left;
	padding-bottom:12px;
}
.subnav a {
  padding:0px 6px;
}
.subnav .dropdown .dropbtn {
  font-size: 17px; 
  border: none;
  outline: none;
/*   color: white; */
  padding: 0px 16px 0px 0px;
  background-color: inherit;
  font-family: inherit;
  /* margin-top: -13px; */
}
.subnav .place-features {
  display:inline-block;
  margin-top:10px;
  width:234px;
}
/* position the dropdown icon */
.dropbtn i {
  padding-left:6px;
}
/* Style the raw text on the menu */
.menu-user  {
  float:left;
  display:block;
  color:#f2f2f2;
  text-align:center;
  padding:11px 2px 16px 16px;
  text-decoration:none;
  font-size:12px;
  margin-top:-1px;
}
/* Style the search field on the menu */
.menu-search  {
  float:left;
  display:block;
  color:#f2f2f2;
  text-align:center;
  padding:4px 2px 16px 16px;
  text-decoration:none;
  font-size:12px;
  margin-top:-6px;
}
.search-query {
  height:18px;
  margin-top:6px;
}
/* Style a divider */
.dropdown-content .divider {
  float: none;
  color: black;
  height: 1px;
  padding: 4px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  background-color:#e5e5e5;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
/* Hide the link that should open and close the subnav on small screens */
.subnav .icon {
  display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
  margin-top:9px;
  height:25px;
  padding: 12px 6px 6px 6px;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px; 
  border: none;
  outline: none;
  color: white;
  padding: 0px 10px 6px 16px;
  background-color: inherit;
  font-family: inherit;
  margin-top: -13px;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999;
}
/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 4px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content span {
  float: none;
  color: black;
  padding: 4px 16px;
  text-decoration: none;
  text-align: left;
}
.dropdown-content a:last-child  {
  margin-bottom:28px;
}

#id-place-selector {
  position:fixed;
  display:block;
  left:215px;
  top:120px;
  background-color: white;
  z-index:33;
  border-radius: 4px;
  border: 1px solid #b5dbdc;


}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}
/* SUB NAVIGATION */
/* Add an active class to highlight the current page */
.sub-active {
  background-color:#808080;
  color:black;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.subnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}
/* Style the dropdown button to fit inside the topnav */
.submenubtn {
/*   color: #4169E1 !important; newcolor*/
  color: white !important;
}
.bottom-menu-wrap {
  background:#303440;
  border-top:4px solid #008987;
}
.menu-container {
  width:1170px;
  margin: 0 auto;
}

.headers {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:5;


}

.main-body {
  padding-top:68px;
  z-index:2;
}

/* Inline dropdown container - needed to position the dropdown content */
.inline-dropdown {
  float: none;
  overflow: hidden;
  /* margin-top:9px; */
}
/* Style the dropdown button to fit inside the topnav */
.inline-dropdown .inline-dropbtn {
  font-size: 17px; 
  border: none;
  outline: none;
  color: white;
  padding: 0px 10px 6px 16px;
  background-color: inherit;
  font-family: inherit;
  margin-top: -13px;
}
/* Style the dropdown content (hidden by default) */
.inline-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 250px;
  left:120px;
  margin-top:-24px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/*style the angle-right to be on the right of the dropdown */
.fa-angle-right {
  float:right;
  margin-top: 4px;
  padding-left: 12px;
}
/* Style the links inside the dropdown */
.inline-dropdown-content a {
  float: none;
  color: black;
  padding: 4px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.inline-dropdown-content a:last-child  {
  margin-bottom:28px;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.inline-dropdown:hover .inline-dropbtn {
  background-color: #555;
  color: white;
}
/* Add a grey background to dropdown links on hover */
.inline-dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.inline-dropdown:hover .inline-dropdown-content {
  display: block;
}
/* SUB NAVIGATION */
/* Add an active class to highlight the current page */
.sub-active {
  background-color:#808080;
  color:black;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.subnav a:hover, .inline-dropdown:hover .inline-dropbtn {
  background-color: #555;
  color: white;
}


.updown {
  padding-left:3px;
}
.simple-text {
  border: none;
  display: inline;
  font-family: inherit;
  font-size: inherit;
  background-color:inherit;
  padding: none;
  width: auto;
}



.rwd-line { display:inline;}

html {
	font-family:"Roboto", sans-serif;
}
h1 {
	font-size: 1.6em;
	margin: 10px 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
	color: #FF9900;
}

/************* GRID STYLING **************/

html,body {
  height: 100vh;
  margin: 0;
}
.the-page {
  display: grid;
  grid-template-columns: minmax(22px, 1fr) 5fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: 
    'header header'
    'pre-body pre-body'
    'body-left body-right'
    'footer footer';
  height: 100%;
  column-gap: 16px;
  overflow:hidden;
}
.the-page-narrow {
  grid-template-columns: 22px 5fr;
}

/* .box .row {
  border: 1px dotted #0313fc;
} */
.the-header {
  grid-area:header;
  /* overflow:scroll; */
}
.the-pre-body {
  grid-area:pre-body;
  height:0px;
  /* padding-top:19vh; */
  overflow:hidden;
  overflow-y:scroll;
  /* outline: 1px solid red; */
}
.the-body-left {
  grid-area:body-left;
  overflow:none;
  background-color:var(--bg-color-body-left);

  /* position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden auto; */

  display: grid;
  grid-template-rows: 10px 67px 56px 56px auto 37px;
  grid-template-areas:
        'body-left-header'
        'body-left-system'
        'body-left-place'
        'body-left-content'
        'body-left-content-actions'
        'body-left-help';
  height: 100%;
  overflow: hidden;
}

.the-icon-left {
  float: right;
  margin-right: 2px;
}

.the-body-right {
  grid-area:body-right;
  overflow:auto;
  background-color:var(--bg-color-body-right);
}
.the-footer {
  grid-area:footer;
  /* background-color:brown;
  outline: 1px solid blue; */
}

.the-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: 
  'content-preheader'
  'content-header'
    'content-body'
    'content-footer';
  height: 100%;
  overflow-x:scroll;
  /* border: 2px solid red; */
}
/* .box .row {
  border: 1px dotted #0313fc;
} */
.content-preheader {
  grid-area:content-preheader;
  /* border:2px solid blue; */
}
.content-header {
  grid-area:content-header;
  /* border:2px solid blue; */
}
.content-body {
  grid-area:content-body;
  /* height:0px; 5/5*/
  padding-top:8px;
  /* padding-top:19vh; */
  /* overflow:hidden;
  overflow-y:scroll; */
  /* min-height:92%; 5/5*/
  /* height:0; 5/5*/
  /* overflow-x:scroll; */
  /* outline: 1px solid red; */
  /* border:2px solid green; */
  overflow-y:scroll;
}
.content-footer {
  grid-area:content-footer;
  min-width:98%;
  width:0;
  margin:6px;
}
.footer-action {
  padding:0px 8px;
  margin:0px 4px;
  background-color:lightGrey;
}
.footer-previous {
  background-color:lightGrey;
}
.footer-next {
  background-color:lightGrey;
}

/* Layout for the body section */
.inner-content-place {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr;
  grid-template-rows: 1fr;

  grid-template-areas: 
    'inner-content-place-left inner-content-place-center inner-content-place-right';
  height: 100%;
}

.inner-content-place-left {
  grid-area:inner-content-place-left;
}
.inner-content-place-center {
  grid-area:inner-content-place-center;
  padding-left:8px;
  min-width:100%;
  width:0;
  overflow-y: auto;
}
.inner-content-place-right {
  grid-area:inner-content-place-right;
}

/* Layout for hovering over an element and a tooltip can appear */
/* Tooltip container */
.tooltip {
  /* position: relative; */
  /* display: inline-block; */
  /* border-bottom: 1px dotted black; If you want dots under the hoverable text */ */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: darkgrey;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  /* position: absolute; */
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}


/* Layout for content view and edit body section */
.viewedit {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-rows: 1fr minmax(100px, auto); */
  grid-template-rows: fit-content(10%);
  grid-template-areas: 
    'inner-content-viewedit-banner'
    'inner-content-viewedit-main'
    'inner-content-viewedit-footer';
    height: 100%;
    width:100%;
}
.viewedit-banner {
  grid-area:inner-content-viewedit-banner;
  min-width:98%;
  width:0;
  margin:6px;
}
.viewedit-main {
  grid-area:inner-content-viewedit-main;
  min-width:98%;
  width:0;
  margin:6px;
}
.viewedit-footer {
  grid-area:inner-content-viewedit-footer;
}

ol {
  padding-inline-start: 0px !important;
}

.copyright {
  position:relative;
  text-align:center;
  top:10px;
}

.page-name {
  /* display:flex; */
}

.edit-form {
  padding-bottom:58px;
}
.content-header {
  /*     background:#ddd; newcolor*/
      background:#dddfd4;
    font-size:0.9em;
     text-align:left;
  }
.places {
  margin-top:14px;
}  
.grid-header {
  grid-area:content-header;
  clear:both;
}
.grid-header-buffer {
  height:6px;
}
.listTitleText {
  font-weight: 800;
  font-size:large;
}
.listTitleDropdown {
  /* position:relative;
  float:right; */
}
.item-container-act {
  display:grid;
  grid-template-columns: 2fr 1fr 6fr 3fr 3fr;
  grid-row-gap: 6px;
  padding:6px;
}
.item-container-adm {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 6px;
  padding:3px;
}
.item-container-cal {
  display:grid;
  grid-template-columns: 1fr 2fr;
  grid-row-gap: 6px;
  padding:6px;
}
.attribute-container-cal {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 3fr));
}
.item-container-common {
  display:grid;
  grid-template-columns: 4fr 2fr 2fr 2fr 1fr;
  grid-row-gap: 8px;
  grid-column-gap: 8px;
  padding:6px;
}
.attribute-container-common {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 3fr));
}
.attribute-container-user-and-date {
  display:grid;
  grid-template-columns: 2fr 3fr;
}
.attribute-container-small-big {
  display:grid;
  grid-template-columns: 1fr 2fr;
}
.attribute-container-small-small-big {
  display:grid;
  grid-template-columns: 1fr 1fr 2fr;
}
.attribute-container-common1 {
  display:grid;
  grid-template-columns: 3fr 2fr;
}
.item-container-fil {
  clear:both;
  display:grid;
  grid-template-columns: 2fr 2fr 1fr 2fr 2fr;
  grid-row-gap: 12px;
  grid-column-gap:12px;
}
.item-container-fil-icons {
  clear:both;
  display:grid;
  grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
  grid-row-gap: 12px;
  grid-column-gap:12px;
}
.item-container-fin {
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-row-gap: 6px;
  padding:6px;
}
.item-container-fin-display {
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-row-gap: 6px;
  padding:6px;
}
.item-container-gas {
  display:grid;
  grid-template-columns: 1fr 1fr 6fr;
  grid-row-gap: 6px;
  padding:6px;
}
.attribute-container-gas {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 3fr));
}
.item-container-gen {
  display:grid;
  grid-template-columns: 2fr 3fr 3fr 1fr 4fr;
  grid-row-gap: 6px;
  padding:6px;
}
.item-container-js {
  display:grid;
  grid-row-gap: 6px;
  padding:6px;
}
.item-header-js {
  display:grid;
  grid-row-gap: 8px;
}
/* .item-header-js>div {
      border-left: 3px dotted red;
} */
.item-container-kwh {
  display:grid;
  grid-template-columns: 1fr 1fr 6fr;
  grid-row-gap: 6px;
  padding:6px;
}
.attribute-container-kwh {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.item-container-kwh2 {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-row-gap: 6px;
  padding:6px;
}
.item-container-inv {
  display:grid;
  grid-template-columns: 2fr 2fr 2fr;
  grid-row-gap: 6px;
  padding:6px;
}
.attribute-container-inv {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 3fr));
}
.attribute-container-inv1 {
  display:grid;
  grid-template-columns: 3fr 2fr;
}
.item-container-lst {
  display:grid;
  grid-template-columns: 3fr 3fr 3fr;
  grid-row-gap: 6px;
  padding:6px;
}
.attribute-container-lst {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 3fr));
}
.item-container-ntw {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 6px;
  padding:6px;
}
.attribute-container-ntw {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 3fr));
}
.item-container-ntw-display {
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-row-gap: 6px;
  padding:6px;
}
.item-container-pwd {
  display:grid;
  grid-template-columns: 3fr 2fr 2fr 3fr 2fr 2fr;
  grid-row-gap: 6px;
  padding:6px;
}
.item-container-pwd2 {
  display:grid;
  grid-template-columns: 2fr 3fr 5fr;
  grid-row-gap: 6px;
  padding:6px;
}
.item-container-sea {
  display:grid;
  grid-template-columns: 1fr 4fr 4fr;
  grid-row-gap: 6px;
  padding:6px;
}
.attribute-container-sea {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 3fr));
}
.item-container-stk {
  display:grid;
  grid-template-columns: 1fr 6fr;
  grid-row-gap: 6px;
  padding:6px;
}
.attribute-container-stk {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
}
.item-container-stk2 {
  display:grid;
  grid-template-columns: 1fr 2fr 2fr;
  grid-row-gap: 6px;
  grid-gap:6px;
  padding:6px;
}
.attribute-container-stk2 {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap:6px;
}
.attribute-container-stk3 {
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap:6px;
}
.item-container-trp {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 6px;
  padding:6px;
}
.attribute-container-trp {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 3fr));
}
.item-container-usr {
  display:grid;
  grid-template-columns: 1fr 2fr 2fr 2fr;
  grid-row-gap: 6px;
  padding:6px;
}
.item-container-wks {
  display:grid;
  grid-template-columns: 2fr 4fr 1fr 1fr 1fr 1fr 1fr;
  grid-row-gap: 6px;
  padding:6px;
}

   .folder-name {
     --column-width-min: 9em;
   }
   .truncate {
     overflow:hidden;
     text-overflow:ellipsis;
     white-space:nowrap;
   }

   .list-small { font-size:small;}
   .nobullet {list-style-type:none;}
   .attribute-name { min-width:82px; display:inline-block;}
   .bottom-padding { padding-bottom:16px;}
/************* END GRID STYLING **************/

/************* TASK DISPLAY STYLING **************/
.card_rest_of_lines {
  font-size: small;
  
}
.card_line {
  
}
}.card_due_date {
  margin-bottom: 0px;
  font-size: small;
  /* left: 12PX; */
  position: relative;
  /* top: 6px; */
  left: 24px;
  font-weight: bold;
}
.anchor-button {
  background-color:#3fb0ac;
  color:white;
  padding: 15px 25px;
  text-decoration:none;
  display: inline-block;
  border-radius: 7px;
  margin-top:6px;

}
.anchor-button.hover {
  background-color:#223094;
}
.link-button {
  background:transparent;
  border:none;
  padding:0;
  margin:0;
  font:inherit;
  color:-webkit-link;;
  text-align:left;
  cursor:pointer;
  text-decoration:none;
  display:inline;
}
.link-button:hover {
  text-decoration:none;
}
.nodecoration, .nodecoration:visited, .nodecoration:hover, .nodecoration:active {
  text-decoration:none;
  color:#0000FF;
}
/************* CALENDAR DISPLAY STYLING **************/

.calendar-grid ul, .calendar-grid li {
  padding:0;
  list-style-type:none;
}
.calendar-grid-hdr {
  display:grid;
  grid-template-columns: 2fr 8fr 2fr;
  grid-row-gap: 6px;
  padding:6px;
}
.cal-title {
  text-align: center;
  font-size: 130%;
  font-weight: bold;
  padding: 10px 0;
}
/* declare a 7 column grid on the table */
.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7, 1fr);
}

.weekdays {
  background:#8e352e;
  color:white;
  text-align:center;
  font-size:130%;
  font-weight:bold;
}

.weekdays li {
    text-align: center;
    text-transform: uppercase;
    line-height: 20px;
    border: none !important;
    padding: 10px 6px;
    color: #fff;
    font-size: 13px;
    
}
.calendar-grid li {
    padding: 5px;
    box-sizing:border-box;
    border: 1px solid #ccc;
}

.calendar-grid .date {
    text-align: center;
    margin-bottom: 5px;
    padding: 4px;
    background: #333;
    color: #fff;
    width: 20px;
    height:20px;
    border-radius: 50%;
  flex: 0 0 auto;
  align-self: flex-end;
}
.calendar-grid ul {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
 width: 100%;
 margin:0px;
}
.calendar-grid a {
    color: #8e352e;
    text-decoration: none;
}
.calendar-grid .day {
  min-height: 180px;
  display: flex;
  flex-direction: column;
}

.calendar-grid .days li:hover {
/*     background: #d3d3d3; newcolor*/
    background: #3fb0ac;
}

.calendar-grid .event {
  flex: 0 0 auto;
    font-size: 13px;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 5px;
    line-height: 14px;
    background: #e4f2f2;
    border: 1px solid #b5dbdc;
    color: #009aaf;
    text-decoration: none;
}

.calendar-grid .event-desc {
    color: #666;
    margin: 3px 0 7px 0;
    text-decoration: none;  
}

.calendar-grid .other-month {
    background: #f5f5f5;
    color: #666;
}















#calendar tr, #calendar tbody {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
 width: 100%;
}





#calendar a {
    color: #8e352e;
    text-decoration: none;
}

#calendar td, #calendar th {
    padding: 5px;
    box-sizing:border-box;
    border: 1px solid #ccc;
}



#calendar td {
    min-height: 180px;
  display: flex;
  flex-direction: column;
}

#calendar .days li:hover {
    background: #d3d3d3;
}

#calendar .date {
    text-align: center;
    margin-bottom: 5px;
    padding: 4px;
    background: #333;
    color: #fff;
    width: 20px;
    border-radius: 50%;
  flex: 0 0 auto;
  align-self: flex-end;
}

#calendar .event {
  flex: 0 0 auto;
    font-size: 13px;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 5px;
    line-height: 14px;
    background: #e4f2f2;
    border: 1px solid #b5dbdc;
    color: #009aaf;
    text-decoration: none;
}

#calendar .event-desc {
    color: #666;
    margin: 3px 0 7px 0;
    text-decoration: none;  
}

#calendar .other-month {
    background: #f5f5f5;
    color: #666;
}

/************* END CALENDAR DISPLAY STYLING **************/

.textinput {
	width: 520px;
}
.choiceinout {
	width: 360px;
}
.editForm, .viewForm {
	background-color:rgba(72, 72, 72, 0.29);
	padding: 10px 20px 30px 20px;
	width: 620px;	
	position: relative;
	margin: 30px auto 0 auto;
	border-radius:7px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
}
/* #gas-add-form {
	background-color:rgba(72,72,72,1);
	padding: 10px 20px 30px 20px;
	width: 420px;	
	position: relative;
	margin: 30px auto 0 auto;
	border-radius:7px;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
}
#gas-add-form input, #gas-add-form select, #gas-add-form label, #gas-add-form  {
	font-family: Arial;sans-serif;
	font-size: 1em;
	font-weight: 700;
	margin-bottom: 2px;
}
#gas-add-form input,   
#gas-add-form select,   
#gas-add-form textarea { 
	width:100%;
	background: #fff;
	border: 0; 
	-moz-border-radius: 4px;  
	-webkit-border-radius: 4px;  
	border-radius: 4px;
	margin-bottom: 15px;  
	padding: 5px;
	color: #303030;
	font-family: Arial, Helvetica, sans-serif;
}
#gas-add-form input:focus,   
#gas-add-form select:focus,   
#gas-add-form textarea:focus {  
	background-color: #E5E6E7; 
}  
#gas-add-form textarea {
	width:100%;
	height: 100px;
}
#gas-add-form button[type=submit] {
	cursor:pointer;
	width:100%;
	border:none;
	background:rgb(255, 255, 153);
	color:#000;
	margin:0 0 5px;
	padding:15px;
	border-radius:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: 900;
	letter-spacing: 2px;
}
#gas-add-form button[type=submit]:hover {
	background: rgb(255, 153, 0);
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}
#gas-add-form button[type=submit]:active {
	box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}

#gas-add-form button[type=reset] {
	cursor:pointer;
	width:100%;
	border:none;
	background:rgb(255, 255, 153);
	color:#000;
	margin:0 0 5px;
	padding:15px;
	border-radius:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: 900;
	letter-spacing: 2px;
}
#gas-add-form button[type=reset]:hover {
	background: rgb(255, 153, 0);
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}
#gas-add-form button[type=reset]:active {
	box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
 */
.bs-example {
	margin:20px;	
}

body{
/* 	background-color:beige; */
/*	background-color:#fae596; */
 background-color:var(--bg-color-body);
    font-family:"Roboto", sans-serif;
	/* font-family:Skia, serif; */
	width:99%;
	height:100%;
	margin:auto;
}
.editTextField {
	width: 400px;
} 
.editTextLabel {
	width:80px;
	vertical-align:top;
}
.editTextLabelLg {
	width:180px;
}
.myButton {
	width:80px;
	margin: 8px;
}
.spanAsButton {
  font: bold 11px Arial;
  text-decoration:none;
  background-color:#bcf;
  color:#123;
  padding:2px 6px 2px 6px;
  border-radius:2px;
  border-top:1px solid #cccccc;
  border-right:1px solid #333333;
  border-bottom:1px solid #333333;
  border-left:1ps solid #cccccc;
}
/* Graph styling */
/* path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
} */

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
/* enf of: Graph styling */
/*
li p {
  display:none;
}
*/
/*
li h3 {
  font-size: small;
  margin: 2px;
}
*/
/*
li{
	list-style-type:none;
	float:left;
	padding:10px;
	border:thin gray solid;
	background-color:tan;
	border-radius:5px;
	margin-right:10px;
}
*/
a{
	text-decoration:none;
}

.clickable:hover{
/* 	background-color:white; newcolor*/
	background-color:var(--bg-color-clickable);
}

.left{
	margin-left:-40px;
}

.master-menu {
	position: relative;
	z-index: 10000;
}

.list-place {
	color: #a9a9a9;
}

.list-title {
	font-size: 15px;
}

.list-date {
	font-size: 13px;
	color: rgb(139,139,139);
}

.list-place a:visited, .list-place a, .list-place a:hover, .list-place a:active {
	color: #a9a9a9;
}
.header-line-two {
	color: #8b8b8b;
}
.content {
	background: white;
	position: relative;
	padding: 0px 5px;
	border: 1px solid #dadada;
}
.account_name {
	font-size:16px;
	font-weight:bold;
}
.myModal {
	top:8%;
}
#modal_account_name {
	width:280px;
}
.buttons_right {
	display:inline-block;
	float:right;
	margin-right:119px;
}
.left_label {
	width:280px;
}
.account_entry_detail {
	display:inline-block;
}
.small_desc {
	font-size:11px;
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}
.view-scroll {
	height: 62vh;
	overflow-y:scroll;
}
.drop_marker {
	padding-top: 0px;
	padding-bottom: 10px;
	border-bottom: 6px solid royalblue;
	
}


.box {
	webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);
	box-shadow:0 1px 2px rgba(0,0,0,.05);
	border:2px solid;
	border-radius:4px;
	margin:10px 0px;
	padding-bottom:2px;
}

.box-heading {
	padding:10px 15px;
	color:#333;
	background-color:#BDB76B;
	border-color:#ddd;
}
.box-title {
	margin-top:0px;
	margin-bottom:0px;
	font-size:16px;
	color:inherit;
}
.box-body {
	padding:6px 18px;
}
.box-size-1 {width:calc(5% - 8px);}
.box-size-2 {width:calc(16% - 8px);}
.box-size-3 {width:calc(30% - 8px);}
.box-size-4 {width:calc(45% - 8px);}
.box-size-6 {width:calc(64% - 8px);}
.box-size-8 { width:calc(79% - 8px);}
.box-size-10 {width:calc(100% - 30px);}

.box-left {
	float:left;
	min-height:1px;
}
.box-right {
  /* position:fixed; */
  /* min-height:1px; */
	/* margin-top:94px; */
  margin-left:70%;
  width:29%;
}
.box-entry {
	margin:6px 12px 18px 12px;
	padding-left:10px;
  padding-bottom:7px;
}
.box-entry-title {
	color:white;
	background-color:blue;
	margin-bottom:12px;
	padding: 4px 12px;
}
.box-with-padding {
	padding:5px 15px;
}
.box-right-of-4 {
	position:fixed;
	margin-left:712px;
}

.box-entry-name {
	float:left;
	min-width:22%;
  /* width:22%; */
  word-wrap:break-word;
  grid-area:attributeName;
}
.box-entry-name1 {
	position:relative;
	float:left;
	min-width:22%;
	top:7px;
}
.box-entry-name-lg {
	float:left;
	min-width:32%;
}
.box-entry-value {
/* 	float:left; */
	min-width:60%;
  grid-area:attributeValue;
}
.box-entry-attribute {
  /* 	float:left; */
    min-width:24%;
}
.box-entry-attribute-value {
  /* 	float:left; */
    min-width:40%;
  }
  
  .box-entry-value1 {
/* 	float:left; */
	min-width:15%;

}
.box-entry-value2 {
	position:relative;
	float:left;
	min-width:45%;
	padding-bottom:12px;
	margin-left:16px;
	top:7px;
}
.box-entry-value-sm {
	float:left;
	min-width:40%;
}
.box-entry-value-only {
	float:left;
	margin-left:calc(22%);
	min-width:60%;
}
.box-entry-scroll {
	float:left;
	height: 62vh;
	overflow-y:scroll;
}
.box-entry-full {
	float:left;
	min-width:100%;
}
.box-entry-full.textarea {
	width:100%;
}
.box-entry-multiline {
	margin-left:15px;
	margin-right:15px;
	float:left;
	border:.75px solid #666666;
	padding:2px;
}
.box-popup {
  visibility: hidden;
  /* position: absolute; */
  z-index:999;
  background: ghostwhite;
  border: 3px solid #666666;
  /* width: 40%; */
  /* height: 24%; */
  /* left: 30%;
  margin-top:3%; */
  
  position:fixed;
    left: 50%;
    top: 45%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
}
.box-popup.active {
	visibility:visible;
	vertical-align:middle;
/* 	text-align:center;
 */
}
.box-popup-content {
  /*Hides pop-up content when there is no "active" class */
  visibility: hidden;
}

.box-popup-content.active {
  /*Shows pop-up content when "active" class is present */
  visibility: visible;
}
.box-button {
	background-color:red;
	color:white;
	padding:0.8em 0.8em;
	font-style: normal;
	font-weight: 400;
	font-size: 11px;
	cursor:pointer;
	text-decoration:none;
	text-transform:uppercase;
	border:2px solid red;
	border-radius:3px;
	top:1px;
	float:left;
	margin:0px 24px 6px 0px;
	
}
.special-button {
  background-color: #199319;
  color: white;
  width: 206px !important;
  outline: 0;
  margin: 4px 4px 0 0;
  padding: 7px 2px 2px 2px;
  height: 27px;
  top: -6px;
  text-decoration: none !important;
  cursor: pointer;
  position: relative;
  display: inline-block;
  text-align: center;
  -moz-border-radius: 15px;
  -webkit-border-radius: 8px;}
.myButton:hover {
background-color: #223094;
}
.special-locate {
  display:inline;
  padding-left:2rem;
  margin-left:690px;
}
.form-grid {
  display:grid;
  grid-template-columns: 2fr 3fr;
  grid-template-areas: 
  'form-entry-name form-entry-value';
  /*grid-row-gap: 6px;*/
  gap: 8px;
  padding:6px;
}

.content-entry {
	/* clear:both; */
 	/* display:block; */
 	/* position:relative; */
 	/* width:100%; */
 	margin-top:10px;
 	/* float:left; */
 	border-bottom:3px solid #eee;
 	padding-bottom:12px;
}
.content-entry:last-child { border-bottom:none;}
.content-icon {
 	/* float:left; */
 	/* width:32px; */
}
.content-title {
 	/* position:relative; */
 	font-size:18px;
 	font-weight:bold;
 	top:2px;
}
.content-meta {
 	/* position:relative; */
 	/* float:left; */
 	/* width: calc(100% - 32px); */
 	margin-left:16px;
 	margin-top:6px;
 	font-size:12px;
}
.content-meta-def {
 	/* float:left; */
 	width:128px;
 	font-size:12px;
   /* clear:both; */
}
.content-meta-who {
  	/* position:relative; */
  	top:-2px;
 	/* float:left; */
 	width:240px;
	font-size:14px;
 	font-weight:bold;
}
.content-meta-date {
 	/* float:left; */
 	top:-2px;
 	/* width:165px; */
 	font-size:14px;
 	font-weight:bold;
}
.content-meta-action {
 	/* float:left; */
 	top:-2px;
 	font-size:14px;
 	font-weight:bold;
}
.content-meta-all {
 	position:relative;
 	float:left;
 	top:-2px;
 	width:100%;
}
.content-meta-sm {
 	float:left;
 	top:-2px;
 	width:84px;
 	font-size:14px;
 	font-weight:bold;
}
.content-meta-med {
 	float:left;
 	top:-2px;
 	width:102px;
 	font-size:14px;
 	font-weight:bold;
}
.content-meta-large {
 	float:left;
 	top:-2px;
 	width:150px;
 	font-size:14px;
 	font-weight:bold;
}
.content-meta-xl {
 	float:left;
 	top:-2px;
 	width:90%;
 	font-size:14px;
 	font-weight:bold;
}

.list-left {
	text-align:left;
}
.list-right {
	text-align:right;
}
.hidden {
	display:none !important;
}
.paging {
	clear:both;
	position:relative;
	margin-top:12px;
}
.tail-button {
	float:left;
	margin:3px 3px;
	padding:5px;
	border:1px solid royalblue;	
}
.tail-button a {
	margin-left:12px;
	margin-right:12px;
}
.history-item {
	margin-left:12px;
	font-size:12px;
}
.pointer {
	cursor:pointer;
}




/*    *******************************************   */
/*    ***       max-width: iP{hone 8 Plus     ***   */
/*    *******************************************   */
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1080px) {

  /* TOP NAVIGATION LINE  */

  body { width:100%; }

  .topnav {
    height:48px;
  }
  .topnav a:not(:first-child), .dropdown .dropbtn, .menu-user, .menu-search {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
    margin-top:-17px;
    font-size:48px;
  }
  .topnav.responsive {
    position: relative;
    height:auto;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .menu-user {
    display:block;
    font-size: 32px;
  }

  .the-page {
    overflow:scroll;
  }
  
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn, .topnav.responsive .menu-search{
    display: block;
    width: 100%;
    text-align: left;
  }
  .dropdown .dropbtn {
    margin-top:0;
  }
 .dropdown {
  height:auto;
  margin-top:0;
  padding: 0px;
}

  .resetleft {
    float:left !important;
  }
  /* SUB NAVIGATION LINE  */

  .subnav.responsive .subelementFirst {
    width:100%;
  } 
  .subnav {
    /* height:32px; */
  /* Attempt to place whole top line in a grid */
  /* display:flex;
  /* grid-template-columns: 1fr 12fr 1fr; */
  /* padding:6px; */
  height:auto;
  }
  .subnav a, .subnav .dropdown .dropbtn, .subnav .place-features {
    display: none;
  }
  .subnav a.icon {
    float: right;
    display: block;
    margin-top:-3px;
    margin-right: 11px;
    font-size:48px;
  }
  
  .subnav .subelement {
    float:none;
  }
  
  .subnav.responsive {
    position: relative;
    height:auto;
  }
  .subnav.responsive a.icon {
    position: absolute;
    right: 0px;
    top: -9px;
    font-size:48px;
  }
  .subnav.responsive a {
    float: none;
    display: block;
    margin-top:6px;
    text-align: left;
    margin-left:20px;
  }
  .subnav.responsive .place-features {
    display:block;
    margin-top:9px;
  }

  .subnav.responsive .dropdown {
    clear:both;
    margin-left:20px;
  }
  .subnav.responsive .dropdown-content {
    position: relative;
  }
  .subnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    margin-top:0px;
  }

  .subnav .subline2 {
    padding-bottom:0px;
  }
  /* .subnav.responsive a, .subnav.responsive .place-features {
    margin-top:9px;
  } */
  .subnav .dropdown .dropbtn {
    font-size: 72px; 
  }
  .dropdown-content {
    font-size: 72px; 
  }
  .dropdown .dropbtn {
    font-size: 60px; 
  }
  .dropdown-content a {
    font-size: 60px; 
  }  
  .dropdown-content a:last-child  {
    margin-bottom:48px;
    padding-bottom:48px;
  }
  
  .place-features {
  font-size:32px;
  }  
  .subnav.responsive a {
    font-size:32px;
  }
  .subnav .subtitle {
    font-size: 64px;
  }
  .subnav .subelement {
    font-size: 48px;
  }

  .search-query {
    height:32px;
    margin-top:6px;
    font-size: 32px;
  }

  body {
    font-size:34px;
  }

  select {
    font-size:34px;
  }
  #top_contributors { display:none; }
  #featured_content { display:none; }
  #recent_activity { display:none }

  .box-button {
    font-size: 36px;
    padding:0.4em 0.4em;
    border:2px solid red;
    border-radius:15px;
    top:1px;
    float:left;
    margin:0px 24px 6px 0px;

  }
  #searchContent { font-size:36px; }

  .attribute-name {
    min-width: 230px;
    display: inline-block;
}
  .special-locate {
    display:inline;
    padding-left:2rem;
    margin-left:22px;
  }

  #calendar .weekdays, #calendar .other-month {
    display: none;
  }

  #calendar li {
      height: auto !important;
      border: 1px solid #ededed;
      width: 100%;
      padding: 10px;
      margin-bottom: -1px;
  }

  #calendar, #calendar tr, #calendar tbody {
  grid-template-columns: 1fr;
  }

  #calendar  tr {
  grid-column: 1 / 2;
  }

  #calendar .date {
      align-self: flex-start;
  }

  .box-size-1 {width:calc(5% - 8px);}
  .box-size-2 {width:calc(35% - 8px);}
  .box-size-3 {width:calc(93% - 8px);}
  .box-size-4 {width:calc(45% - 8px);}
  .box-size-6 {width:calc(64% - 8px);}
  .box-size-8 { width:calc(79% - 8px);}
  .box-size-10 {width:calc(100% - 30px);}

  .list-small { font-size:36px;}
  .list-larger { font-size:54px; }
 
  #generic_selector { font-size:32px; }

  .calendar-grid .date {
    font-size:x-small;
  }

}