/* Stylesheet for whole app */

/*
Copyright (c) www.codewizard.org 
*/

:root {
  
  /* Theme-related values: */
  
  --soft-keyboard-offset-height: 0px; /*254px*/

  /*--top-nav-bg: rgb(88, 109, 163);*/
  
  --top-nav-bg: rgb(88, 109, 163); /*BLUE - shown above item list on mobiles AND top right side on desktops */
  /*--loaded-item-header-bg: rgb(174, 203, 72);*/ /*rgb(103, 176, 62);*/  /*GREEN - shown above open view item on mobiles*/
  --loaded-item-header-bg: rgb(88, 109, 163); /* BLUE */
  
  --bottom-nav-bg: rgb(207, 197, 71);
  
  /*--left-pane-bg: #FFFF93;*/ /* original yellow */
  
  --left-pane-bg: #FFFFB4; /* light yellow */

  --mobile-max-width: 767px;
  
  --link-height: 36px;
  --link-height-mobile: 41px;
  --link-font-size: 16px;
  
  --left-pane-width: 25%; /* right pane width can be calculated accordingly */
  --right-pane-width: 75%;

  /* ----- Colour Pallet ------*/
  
  --light-blue: rgb(138, 164, 232);
  /*--light-blue: rgb(181,181,156);*/
  
  --entries-submenu: rgb(179, 179, 150); /* rgb(176, 176, 147); Dark yellow */
  
  /*--light-blue: rgba(159, 159, 159, 0.77);*/
  --orange: rgb(223, 172, 49);
    
  --white: rgb(255, 255, 255); 
  --black: rgb(0, 0, 0);
  
  --translucent-white-vlow: rgba(255, 255, 255, 0.06);  
  --translucent-white-low: rgba(255, 255, 255, 0.25);  
  --translucent-white-med: rgba(255, 255, 255, 0.50);
  --translucent-white-high: rgba(255, 255, 255, 0.75);

  --translucent-black-vlow: rgba(0, 0, 0, 0.10); 
  --translucent-black-low: rgba(0, 0, 0, 0.25); 
  --translucent-black-med: rgba(0, 0, 0, 0.40);
  --translucent-black-high: rgba(0, 0, 0, 0.65);
  --translucent-black-vhigh: rgba(0, 0, 0, 0.85);
  

  
}


html, body {
  font-family: Arial;
  /*
  height: calc(100% - var(--soft-keyboard-offset-height));
  overflow-y:hidden;
  position: fixed;
  */
  height: 100%;
  width: 100%;
  position:fixed;
  
  background-color: #eeeff0; /* grey colour like iPhone's onscreen keyboard */
}

#main_wrapper {
  display: grid;
  position: absolute;
  top:0;
  
  left:0;
  right:0;
  
  width: 100%;
  grid-template-columns: auto;
  
  /*
  height: 100%;
  grid-template-rows: var(--soft-keyboard-offset-height) calc(100% - var(--soft-keyboard-offset-height));
  grid-template-areas: 
    "spacer"
    "app";
  */
  
    grid-template-rows: auto;
  
    /* For onscreen keyboard: */
    height: calc(100% - var(--onscreen-keyboard-offset-height) + var(--top-scroll-offset-height));
    transition: height var(--onscreen-keyboard-open-time) ease-out var(--onscreen-keyboard-delay);
  
}

    
    /* Remove the blue outline of focused elements */
    input:focus, textarea:focus, select:focus{
        outline: none;
    }


#bottom_nav {
  background-color: var(--bottom-nav-bg);
  color: var(--translucent-black-med);
  max-width: 100%; 
  display: flex;
  flex-direction: row;
}

#developer_panel {
  display: none;

  padding-left: 5px;
  height: 100%;
  position: absolute;
  padding: 0;
  width: 100%;
  margin: 0;
}

#main_wrapper.developer {
  grid-template-rows: 70% 30%;
  grid-template-areas:
    "app"
    "developer";
}

#main_wrapper.developer .developer_panel {
  display: grid;
}

#app_panel {
  display: grid;
  grid-area: app;

  grid-column-gap: 0px;
  grid-row-gap: 0px;

  width: 100%;
  height: 100%;

  position: absolute;
}

#developer_panel {
  grid-area: developer;
  position: relative;
  width: 100%;
}



/* Hides the mobile-related navigation */
#mobile_top_nav  {
  display: none;
}

#mobile_bottom_nav_links {
  display:none;
}

#mobile_top_nav_links {
  display: none;
}


#mobile_plus_button {
  grid-area: entries_list;
  
/*display: flex;*/
  
display:none; /*hides initially*/
align-items: center;
justify-content: center;
position: relative;
height: 60px;
width: 60px;
border-radius: 50px;
cursor: pointer;
/*background-color: orange;*/
background-color:rgba(251, 184, 23, 0.81);
  
color: white;
font-size: 40px;
  
margin-left: auto;
margin-top: auto;
margin-bottom: 20px;
margin-right: 20px;

}


#mobile_plus_button:hover, #mobile_plus_button:focus {
  background-color:rgba(251, 184, 23);
}

#app_menu {
  padding-left:10px;
  width:auto;
}

#app_menu > li  {
  background-color:transparent;
    padding: 0;
    flex: 0 0 auto;
    overflow-y:hidden;
    height: var(--link-height);
  width:100%;
}

#app_menu > li:hover {

}

#app_menu > li > div  {
    
    height: calc(var(--link-height) + 15px);
    width: 100%;
    border-radius: var(--link-height) 0 0 var(--link-height);
    background-color: var(--translucent-black-med);  
    border-left: 2px solid transparent;  
   
    display:flex;
    align-items: center;
    opacity:0.5;
}



#app_menu > li > div:hover {
  background-color: var(--translucent-black-high);
  border-left: 2px solid white;
}

#app_menu > li:focus > div {
  background-color: var(--translucent-black-high);
  border-left: 2px solid white;
}

#app_menu > li svg {
  opacity: 0.7;
}

#app_menu > li > div:hover svg, #app_menu > li:focus svg {
  opacity: 1;
}

/*pencil icon*/
#loaded_item_topnav_links > li svg {
  opacity: 0.6;
}

#loaded_item_topnav_links > li:hover svg {
  opacity: 1;
}



#search_filters_calendar {
  display:flex;
  flex: 1 1 auto;
  position: relative;
  /*background-color:rgba(255, 186, 101, 0.65);*/

}

#search_filters_calendar .search_icon {
  
  position: absolute;

  /*
  display:flex;
  align-items:center;  
  padding-left:10px;
  padding-right:3px;  
  
  
  margin-left: 0px;
  */
  height: 100%;
  z-index: 0; /*puts search_icon it behind search_box*/
  
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='60' fill='black'%3E%3Ccircle cx='25' cy='25' r='20' stroke='black' stroke-width='8' fill='none' /%3E%3Crect width='25' height='8' x='40' y='40' style='transform: rotate(35deg); transform-box: fill-box; transform-origin: center;' /%3E%3C/svg%3E");        
  
  background-size:21px;
  
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.35;
  
  width: 35px;
}




#entries_list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  
  /*Shifts the items a bit down and to the right*/
  padding-left:8px;
  padding-top:8px;
  height: calc(100% - 8px);
  width: calc(100% - 8px);
  
  list-style-type: none;
  
  /*Adds scroll bar when needed*/
  overflow-y: auto;


}

#entries_list > li {
  color: var(--translucent-black-high);
  
  white-space: nowrap;
  overflow: hidden;

  min-width: 10px;
  
  cursor: pointer;
  text-overflow: ellipsis;
  
  flex: 0 0 auto;  /*Makes entries stay the same size*/
  
  /*border-bottom: 1px solid transparent;*/

  font-size: 16px;
  
  /* Puts link contents in the centre*/
  display: flex;
  align-items: center;
  
}



#entries_list > li:hover {
  background-color: var(--translucent-white-med);
  color: black;
}

#entries_list > li[selected], li:focus {
  display: flex;
  color: black;
  background-color: white;

  /*cursor:default;*/
}


      
      input {
        font-size: 16px;
      }



  #selected_item_view iframe {
    
    background-color: white;
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    overflow-y:hidden;
    
    /* Hides all iframes initially */
    display:none;
  }


/* Shows selected iframe */
#selected_item_view iframe[selected] {
  display:block;
}





/* -----  Desktop View -------- */




#app_panel {
  grid-template-columns: minmax(25%,150px) minmax(75%,auto);  /* NOTE: Total width must be 100%*/
  grid-template-rows: var(--link-height) calc(100% - var(--link-height) - var(--link-height)) var(--link-height);

  grid-template-areas:
    "search_filters_calendar top_nav"
    "entries_list selected_item_view"
    "entries_list selected_item_view";
}

#bottom_nav {
  grid-area: search_filters_calendar;
}






#app_submenu {

  position: absolute;
  right: 0;
  flex-direction: column;
  background-color: black;
  width: auto;
  height: auto;
  top: var(--link-height);
  overflow-y: auto;
}

#entries_list {
  grid-area: entries_list;
}

  #entries_submenu {
    grid-area: entries_list;
    position: absolute;
    height:auto;
    width: auto;
    top: var(--link-height);
    right: 0;
    flex-direction: column;
  }

#selected_item_view {
  grid-area: selected_item_view;
}


        #top_nav {
          grid-area:top_nav;
          display:flex;
          width: 100%;
          background-color: var(--top-nav-bg);
        }

#top_nav > ul > li {
  color: var(--translucent-white-med);
}

#top_nav > ul > li:hover {
  color: white;
  background-color: var(--translucent-white-vlow);
}



#top_nav > ul[active] > li[selected], #top_nav > ul > li[selected] {
  color:white;
  /*background-color: var(--translucent-white-low);*/
  background-color: transparent;
} 




#view_links {
  justify-content: flex-end;
  justify-content: center;
  overflow: hidden;
  }
        




#app_panel.hide-list  {

  grid-template-columns: 100%;  /* NOTE: Total width must be 100%*/
  grid-template-rows: var(--link-height) calc(100% - var(--link-height));

  grid-template-areas:
    "top_nav"
    "selected_item_view";
}


#app_panel.hide-list #search_filters_calendar {
  display:none;
}

#app_panel.hide-list #entries_list{ 
  display: none;
}

#app_panel.hide-list #bottom_nav{ 
  display: none;
}

  #entries_list > li {
    min-height: var(--link-height);
    padding:0 !important;
    
  }
  



#modal_overlay {
  display: flex;
  
  /*
  display:grid;
  grid-template-columns: minmax(15px, 2fr) minmax(100px, auto) minmax(15px, 2fr);
  grid-template-rows: minmax(15px, 1fr) minmax(120px, auto) minmax(15px, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  
  grid-template-areas:
    "a a a"
    "b window d"
    "e e e";
  */
  
  width: 100%;
  height: 100%;
  
  /*align-items: center;*/
  justify-content: center;

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(5, 5, 5, 0.65);

  overflow-y:auto;
}

#modal_header {
  display: none;
  background-color: #00e7ff;
  border-radius: 5px;
}



#modal_window {

  margin:auto;
  position:relative;
  
  
  border-radius: 5px;
  background-color: white;

  display: grid;
  grid-template-columns: minmax(min-content, 20%) minmax(auto,auto);
  grid-template-rows: minmax(20%, auto) min-content;

  grid-template-areas:
    "icon body"
    "icon links";
}



#modal_icon {
  display:flex;
  padding: 0px;
  grid-area: icon;
  background-color: #33CC33;
  font-size: 25px;
  text-align: center;
  padding: 8px;
  padding-top: 20%;
  font-family: "Arial Rounded MT Bold", Arial;
  color: rgba(255, 255, 255, 0.4);
  border-radius: 5px 0px 0px 5px;
}

#modal_body {
  grid-area: body;
  display:flex;
  flex-direction:column;
  
  overflow-y: auto;
  margin-top: 5px;
}

#modal_links {
  background-color: white;
  grid-area: links;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  margin-bottom:8px;
  margin-top:8px;
}

#modal_links li {
  background-color: #33CC33;
  background-color: #a2a2a2;
  color: white;
  margin-right: 5px;
  margin-left: 5px;
  border-radius: 3px;
}



#modal_links li:hover {
  background-color: #686868;
}

/* Makes the first modal button green */
#modal_links li:first-child {
	background-color: #4fa64f;
}

#modal_links li:first-child:hover {
  background-color: #33CC33;
}

#modal_top_links {
}

#modal_body button {
  opacity:0.85;
}

#modal_body button:hover {
  opacity:1;
}


#search_box {
    font-family: Arial;
    color:black;
    width:100%;
    background-color:transparent;
    border:0;
    
    font-size:var(--link-font-size);
    
    padding-left:37px;
    
    /* Makes the input box span over the search icon */
    /*margin-left: -32px;
    padding-left: 39px;*/
    
    z-index: 0; /* */
    
}


#search_box:focus {
    background-color: var(--translucent-white-med);
    color: black;
}


#search_box::placeholder {
  /*color: rgba(108, 71, 31, 0.80); */
  /*color: rgba(0,0,0,0.5);*/
  color: #978f33;
}

#search_box:focus::placeholder {
  color: transparent;
}



/* Hides the mobile menu for open items */
#mobile_open_item_links {
  display: none;
}

/*
#mobile_top_nav_title {
  flex-grow:5; 
  position:relative; 
  padding-left:15%;
  padding-right:15%; 
  display:flex; 
  color:white;
  overflow:hidden;
  align-items: center;
  justify-content:center;
}

#mobile_top_nav_title > span {
  overflow:hidden;text-overflow: ellipsis; white-space: nowrap;
}
*/


#mobile_top_nav_title > * {
  /*color: rgba(0, 0, 0, 0.35);*/
  /*color: rgba(12, 136, 1, 0.55);*/
  
  color: rgba(255, 255, 255, 0.9);
  
  font-size: 17px;
  
  
}

/* Hides the note title in mobile nav if there is no title text AND user has not scrolled down */
#mobile_top_nav_title .blank_name {
  
  /*margin-bottom: -55px;*/
  
  opacity: 0;
  
  transition: margin 0.6s 0.4s, opacity 0.4s;
}

/* Shows the note title in mobile nav if user has scrolled */
#mobile_top_nav_title.show-blank_name-mobile-nav-title .blank_name {
  
  margin-bottom: 0;
  opacity: 0.95;
  
  /*transition: margin 0.6s;*/
  transition: opacity 0.6s;
}



/* Desktop-Only View */

@media screen and (min-width: 767px) {

  .mobile-only {
    display:none !important;
    visibility: hidden !important;
  }
  
  
  /* Hides top nav on the desktop
  NOTE: This may need need tweaking: */
  
  #app_panel.hide-top-nav {

  grid-template-areas:
    "search_filters_calendar selected_item_view"
    "entries_list selected_item_view"
    "entries_list selected_item_view";
  }
  
  #app_panel.hide-top-nav #top_nav{
    display:none;
  }
  
  #app_panel.maximise-selected-view {
    
    grid-template-columns: 100%;
    grid-template-rows: 100%;

    grid-template-areas:
      "selected_item_view";
  }
}







#entries_menu {
  width: 40px;
}



/* Tripple dot and Create */
#entries_menu > li {
  width: 100%;
  justify-content: center;
  background: auto;
  color: rgba(255, 255, 255, 0.7);
  background-color:transparent;  
}



#entries_menu > li[action="toggle_entries_submenu"] {
  display:none;
}

#entries_menu.entries-selected > li[action="create"] {
  display:none;
}

#entries_menu.entries-selected > li[action="toggle_entries_submenu"] {
  display:flex;
}


#entries_menu > li:hover, #entries_menu > li:focus {
  
  color: white;
  
  /*background-color: #B9B027;*/
  /*background-color: #9D9624;*/
  
  /*background-color: #DFAC31;*/ /* orange */
  background-color: var(--entries-submenu);
}




/* Adds the tripple line menu icon */
#app_menu > li > div::before {
  content: "";
  background: url("data:image/svg+xml,%0A%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='0 0 30 30' width='30' height='30'%3E%3Cdefs%3E%3Cpath d='M5 5L23 5L23 7.28L5 7.28L5 5Z' id='aT8CjL7Jr'%3E%3C/path%3E%3Cpath d='M5 12.8L23 12.8L23 15.09L5 15.09L5 12.8Z' id='f1eBzF7HXL'%3E%3C/path%3E%3Cpath d='M5 20.72L23 20.72L23 23L5 23L5 20.72Z' id='a3NtHYGiJC'%3E%3C/path%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cuse xlink:href='%23aT8CjL7Jr' opacity='1' fill='%23ffffff' fill-opacity='1'%3E%3C/use%3E%3C/g%3E%3Cg%3E%3Cuse xlink:href='%23f1eBzF7HXL' opacity='1' fill='%23ffffff' fill-opacity='1'%3E%3C/use%3E%3C/g%3E%3Cg%3E%3Cuse xlink:href='%23a3NtHYGiJC' opacity='1' fill='%23ffffff' fill-opacity='1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  opacity: 0.5;
  position: absolute;
  /*top: 6px;*/
  right: 0;
  width: 30px;
  height:30px;
  margin-right:2px;
}

#app_menu > li > div {
  padding-right: 42px;
  padding-left: 15px;
  font-size: 17px;
}

#app_menu > li > div:hover::before {
  opacity: 1;
}

#search_filters_calendar {
  
}

  #mobile_menu > li:focus, #mobile_menu > li[selected], #mobile_menu > li[selected]:hover, #mobile_menu > li:hover {
    
    opacity: 1;
    
    /*background-color: rgb(146, 185, 11);
    background-color: var(--orange);*/
    
    background-color: var(--entries-submenu);
    background-color: rgb(168, 177, 189);
    background-color: rgb(152, 169, 191);
  }



/* ------- Mobile View --------- */



@media screen and (max-width: 767px) {
  
  #app_panel {
    grid-template-columns: 100% 100%;
    /*grid-template-rows: var(--link-height-mobile) calc(100% - var(--link-height-mobile) - var(--link-height-mobile)) var(--link-height-mobile);*/

    grid-template-rows: var(--link-height-mobile) calc(100% - var(--link-height-mobile) - var(--link-height-mobile) - 10px) calc(var(--link-height-mobile) + 10px);

    
    grid-template-areas:
      "top_nav mobile_top_nav"
      "entries_list selected_item_view"
      "bottom_nav selected_item_view"
      ;
  }
  
  
  #app_panel.hide-mobile-top-nav {
    
    /*grid-template-rows: 0px calc(100% - var(--link-height-mobile)) var(--link-height-mobile);*/

  }
  

  #main_wrapper.onscreen_keyboard_open #app_panel.maximise-selected-view {
    
    grid-template-columns: 100% 100%;
    grid-template-rows: 100%;

    grid-template-areas:
      "---- selected_item_view";

  }
  
  
  /* Fixes glitch - fixed-positioned modal not resizing with main wrapper: */
  #main_wrapper.onscreen_keyboard_open #modal_overlay {
    height: calc(100% - var(--onscreen-keyboard-offset-height) + var(--top-scroll-offset-height));
  }
  
  
/* Adds transition effects */

#selected_item_view, #top_nav, #entries_list, #bottom_nav, #mobile_top_nav {
  position:absolute;
  width: 100%;
  height: 100%;
  left: 0;
  transition: left 0.44s 0.1s;
}
  
  
  /* Hides top nav bar when keyboard is open 
  #main_wrapper.onscreen_keyboard_open #app_panel {
    grid-template-rows: 0px calc(100% - var(--link-height)) var(--link-height);
  } 
  
  #main_wrapper.onscreen_keyboard_open #top_nav {
    display:none;
  }
  
  #main_wrapper.onscreen_keyboard_open #mobile_top_nav {
    display:none;
  }
  
  */
  
  
  /* Shows the "+"" button*/
  #mobile_plus_button {
    display: flex;
  }
  
  
  #app_menu > li > div {
    padding-right: 42px;
    padding-left: 15px;
    font-size: 18px;
  }
  
  #app_menu > li > div::before {
    margin-right: 5px; 
  }
  
  
  #search_filters_calendar .search_icon {
  
    margin-left: 10px;
    
    background-size:26px;

  }
  
  #search_box {
    font-size: 19px;
    /*margin-left: -37px;*/
    padding-left: 55px;
    color: rgba(0, 0, 0, 0.64);
  }
  
  
  .desktop-only {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* -------  */
  
  #mobile_top_nav {
    display: flex;
    grid-area: mobile_top_nav;
    
    background-color: var(--loaded-item-header-bg);
    
    /* Puts mobile nav to the top of selected item view 
    grid-area: selected_item_view;
    position:absolute;
    */
    

    top:0;
    right:0;
    height: var(--link-height-mobile);
  }
  
  /* Unhides the mobile top menu */
  #mobile_top_nav_links {
    display: flex;
  }
  
  #view_links {
    display:none;
  }
  
  #view_links.hybrid-dropdown > li {
    display:none;
  }
  
  #view_links.hybrid-dropdown > li[selected] {
    display:block;
    background-color: transparent;
    color:var(--translucent-white-med);
  }
   
  #view_links[active].hybrid-dropdown > li[selected] {
    display:block;
    background-color: var(--translucent-white-low);
    color:white;
  } 
   
  #view_links[active].hybrid-dropdown > li[selected]::after {
    content: "";
    position: absolute;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' fill='white' stroke='none'><path d='M0,0 L7,7 L14,0 Z'></path></svg>") no-repeat;
    height: 10px;
    width: 20px;
    right: 8px;
    top: 11px;
  }
  
  
  #app_menu > li  {
    height: var(--link-height-mobile);
  }
  

  #app_menu > li svg {
    opacity: 1;
  }
  /*pencil icon*/
  #loaded_item_topnav_links > li svg {
    opacity: 0.9;
  }
  
  /* Increases the size of rows: */

  
  
  /* Adds an arrow 
  
  #entries_list > li[selected]::after {
    content: "";
    position: absolute;
    
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='rgba(0,0,0,0.15)' stroke='none'><path d='M0,0 L0,20 L10,10 Z'></path></svg>") no-repeat;
    
    height: 20px;
    width: 10px;
    right: 8%;
    top: 2px;
  }
  */
  
  
  
  #search_filters_calendar {

  }

  #bottom_nav {
    grid-area: bottom_nav; 
  }
  
  /* Hides the tripple dot for mobiles */
  #entries_menu > li {
    display:none !important;
  }
  
  #entries_menu {
    width: 0;
  }
  
  #entries_submenu {
    position: absolute;
    height: auto;
    top: auto;
    bottom: var(--link-height-mobile);
    right: 0;
    width: auto;
    flex-direction:column;
    z-index: 1;
  }
  
  #entries_submenu > li[action="create"] {
    display:none;
  }
  
  
  
  
    /* Changes the entries sub menu for touch devices */
  #main_wrapper[touch-enabled] #entries_submenu {
    position: absolute;
    height: auto;
    bottom:51px;
    width:auto;
    flex-direction:row;
    margin-left: auto;
    margin-right: auto;
  }


  /* Changes the entries sub menu for touch devices */
  #main_wrapper[touch-enabled] #entries_submenu > li {
    height: 50px;
    width: 35px;
    border-radius: 50px;
    justify-content:center;
    align-items: center;
    margin-left:2px;
  }
  
  #main_wrapper[touch-enabled] #entries_submenu span {
    display:none;
  }
  
  #main_wrapper[touch-enabled] #entries_submenu span:first-child {
    display:block;
    font-size: 36px;
  }
  
  #main_wrapper[touch-enabled] #entries_submenu span.restore-icon {
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='20.51' height='20.51' viewBox='241.155 240.255 20.51 20.51' xml:space='preserve'%3E%3Cdesc%3ECreated with Fabric.js 4.6.0%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg transform='matrix(1 0 0 1 251.41 250.51)' id='Ut9dfA2zsQ-pYFOabNv6v' %3E%3Cg style='' vector-effect='non-scaling-stroke' %3E%3Cg transform='matrix(0.34 -0.94 0.94 0.34 0 0)' id='o1fNw3oYNRN_-XxiUgkp3' %3E%3Cpath style='stroke: rgb(255,255,255); stroke-width: 3; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' transform=' translate(-8, -8.5)' d='M 1.6692 5.5 C 1.2398 6.4083 1 7.425 1 8.5 C 0.996006284520712 10.357736873313101 1.7322216165317925 12.140535630987781 3.0458429927720063 13.454157007227995 C 4.35946436901222 14.767778383468208 6.142263126686897 15.50399371547929 7.999999999999998 15.5 C 9.857736873313103 15.50399371547929 11.640535630987781 14.767778383468208 12.954157007227995 13.454157007227995 C 14.267778383468208 12.14053563098778 15.00399371547929 10.357736873313101 15 8.5 C 15.00399371547929 6.642263126686898 14.267778383468208 4.85946436901222 12.954157007227995 3.5458429927720054 C 11.64053563098778 2.232221616531791 9.857736873313101 1.4960062845207114 7.999999999999999 1.5' stroke-linecap='round' /%3E%3C/g%3E%3Cg transform='matrix(0.17 -0.98 0.98 0.17 -6.78 0)' id='RWmOaUtTTjQIlAZQkDIeG' %3E%3Cpath style='stroke: rgb(255,255,255); stroke-width: 3; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' transform=' translate(-5, -4)' d='M 7 6 L 7 2 L 3 4 z' stroke-linecap='round' /%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        
    background-repeat: no-repeat;
    background-position: center center;

    background-size: 29px;
    width: 30px;
    height: 30px;
  }
  
  
  #main_wrapper[touch-enabled] #entries_submenu span.modify-icon {
    background-size: 24px;
  }
  
  #main_wrapper[touch-enabled] #entries_submenu span.duplicate-icon {
    background-size: 12px;
  }
  
  #main_wrapper[touch-enabled] #entries_submenu span.cross-icon {
    background-size: 17px;
  }
  
  #main_wrapper[touch-enabled] #entries_submenu span.erase-icon {
    background-size: 23px;
    width: 25px;
    height: 25px;
  }
  
  #main_wrapper[touch-enabled] #entries_list > li {
    color:black;
  }
  
  
  
  
#app_submenu {
  top: var(--link-height-mobile);
}
  
/*
  #app_submenu {
    grid-area: entries_list;

    position: absolute;
    right: 0;
    
    flex-direction: column;
    background-color: black;
    width: auto;
    height: auto;
  }
*/
  
  #entries_list {
    grid-area: entries_list;
  }

  #selected_item_view {
    /*grid-area: entries_list / bottom_nav;
    display:none;*/
  }
  
  
  #mobile_bottom_nav_links{
    display:flex;
  }
  
  

  #loaded_item_topnav_links {
    /*display:none;*/
  }
  
  #app_panel.show-mobile-views-pane #loaded_item_topnav_links {
    display:flex;
  }
  
  
  
  #app_panel.show-mobile-views-pane  #selected_item_view iframe {
        /*position:fixed;*/
    
    height: 100%;

     background-color:red;

     width: 100%;
     /*height: calc(100% - var(--link-height));*/
     /*top: var(--link-height);*/
          
      }
  
  
#top_nav {
  grid-area:top_nav;
  display:flex;
  width: 100%;
  background-color: var(--top-nav-bg);
  justify-content: flex-end;
}
  
  #app_panel.show-mobile-views-pane #top_nav {
  /*background-color: var(--loaded-item-header-bg);*/
  }
        
#unselected_views_submenu {
  justify-content: flex-end;
  overflow: hidden;

  position: absolute;
  right: 0px;
  flex-direction: column;
  width: auto;
  height: auto;
  top: var(--link-height);
  background-color:black;
}
  
  #unselected_views_submenu > li[selected] {
    display:none;
  }
        

  
  
  #app_panel #view_links {
    display: none !important;
  }  
  
  
  #modal_window {
    margin:auto;
  }
  
  
  /* Unhides the mobile top menu */
  #app_panel.show-mobile-views-pane #mobile_top_nav_links {
    display: flex;
  }
  
  #app_panel.show-mobile-views-pane #view_links {
    display: flex;
  }
  
  
  #mobile_top_nav_links {
    width:auto;
  }
  
  
  #mobile_top_nav_links > li, #mobile_top_nav_links > li[selected] {
    background-color: transparent;
  }
  
  
  #mobile_top_nav_links > li:nth-child(1) {
    padding-left: 10px;
    padding-right: 10px;
    opacity: 0.9; /* Makes the "back" arrow slightly faded */
  }
  
  
  #mobile_top_nav_links > li[selected]:hover, #mobile_top_nav_links > li:hover {
    /*background-color: var(--translucent-white-vlow);*/
    opacity: 0.9;
    /*background-color: rgba(88, 109, 163, 0.5);*/
    background-color: rgb(146, 185, 11);
    background-color: rgba(255, 255, 0, 0.37);
    background-color: rgba(0, 0, 0, 0.20);
  }
  
  
  
  /* ------------- */
  
  
  #mobile_top_nav_links > li:nth-child(1) {
    opacity: 0.9; /* Makes the tripple-dot slightly faded */
  }
  
  #mobile_submenu > li {
    /*background-color: rgb(146, 185, 11);*/
    /*background-color: var(--orange); */ /* ORANGE */
    background-color: rgb(168, 177, 189); /*rgb(156, 167, 181);*/
    
    background-color: rgb(143, 160, 183);
    background-color: rgb(152, 169, 191);
    
    color: white;
  }  
  

  

  
  
  #mobile_submenu {
    position: absolute;
    top: var(--link-height-mobile);
    flex-direction: column;
    right: 0;
    width: auto;
    z-index: 100;
  }
  
  #mobile_submenu > li:hover {
    background-color: grey; 
    
  }
  
  
  /* ----- */

  
  /*
  #mobile_top_nav_links > li[selected]:nth-child(1) {
    display:none;
  }
  */
  
  #dropdown_view_links > li {
    margin-left: auto;
    padding-right: 35px;
  }
  
  #dropdown_view_links > li::after {
    content: "";
    position: absolute;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' fill='white' stroke='none'><path d='M0,0 L7,7 L14,0 Z'></path></svg>") no-repeat;
    height: 60px;
    top: calc(50% - 3px);
    width: 20px;
    right: 5px;
    opacity: 0.6;
    
  }
  
  
  
  /* Resets the colour to default */
  #view_links > li[selected] {
    /*background-color: transparent;
    color: var(--translucent-white-med);
    padding-right: 35px;*/
  }
  
  #view_links > li[selected]:hover {
    background-color: #6477AA;
  }
  
  
  #entries_list {
    padding: 0;
    width: 100%;
    height: 100%;
    
  }
  
  
  /*Puts separation line under each list item*/
  #entries_list > li {
    border-bottom: solid 1px var(--translucent-black-vlow);
  }
  

  
  #entries_list > li {
    min-height: calc(var(--link-height) + 10px);
    padding:0 !important;
    font-size: 18px;
  }
  
  #entries_list > li[selected] {
    /*background-color: transparent;*/
  }  
  
  #entries_menu > li {
    padding-left: 13px;
    padding-right: 13px;
  }

  
  /*Adds a click zone
  #entries_list[active]> li::before {
    content:"";
    min-width:20%;
    max-width:50px;
    top:0;
    right:0;
    bottom:0;
    position:absolute;
    background-color: rgba(25,255,255,0.25);
  }
  */
  
  /*  */
  
  #app_panel.show-mobile-views-pane {
    grid-template-columns: 100% 100%;
    /*
    grid-template-rows: var(--link-height-mobile) calc(100% - var(--link-height-mobile));

    grid-template-areas:
      "top_nav"
      "selected_item_view";*/
  }
  
  
  #app_panel.show-mobile-views-pane #selected_item_view {
    display: block;
    grid-area: selected_item_view;
    left: -100%;
  }
  
  
  /* Adds transition - sliding accross action */
  
  #app_panel.show-mobile-views-pane #selected_item_view {
    left: -100%;
  }  
  
  #app_panel.show-mobile-views-pane #mobile_top_nav {
    left: -100%;
  }
  
  #app_panel.show-mobile-views-pane #top_nav {
    left: -10%
  }  
  
  #app_panel.show-mobile-views-pane #entries_list {
    left: -10%;
    overflow-y: hidden; /*hides the scrollbar*/
  }
  
  #app_panel.show-mobile-views-pane #bottom_nav {
    left: -10%
  }
  
  /* ---------- */
  
  
  /* Hides the app_menu when item is opened */
  #app_panel.show-mobile-views-pane #app_menu {
    /*display:none;*/
  }
  

  
  
  /* Shows the  */
  
  #app_panel.show-mobile-views-pane #mobile_open_item_links {
    display: flex;
  }
  
  
  /* Moves the top mobile links 
  #app_panel.show-mobile-views-pane #mobile_top_nav_links {
    margin-right:50px;
  }
  */
  #app_panel.show-mobile-views-pane #entries_list {
    /*display: none !important;*/
  }
  
  #app_panel.show-mobile-views-pane #bottom_nav {
    /*display: none !important;*/
  }
  /*
  #app_panel.show-mobile-views-pane #app_menu {
    display: none !important;
  }
  */

  
  #app_panel.show-mobile-views-pane #search_filters_calendar {
    /*display: none !important;*/
  }  
  
  #app_panel.show-mobile-views-pane #view_links {
    grid-area: app_menu;
    
  }  
  
  
  /* Hides the top navbar and shows the iframe full screen */
  

  
  #app_panel.show-mobile-views-pane.hide-top-nav {
    
    /*
    grid-template-columns: 100%;
    grid-template-rows: 100%;

    grid-template-areas:
      "selected_item_view";
    */
    
    grid-template-rows: 0px calc(100% - var(--link-height-mobile)) var(--link-height-mobile);
   }
  
  #app_panel.show-mobile-views-pane.hide-top-nav #top_nav{
    display:none;
  }
  
  
  #app_panel.show-mobile-views-pane.hide-mobile-top-nav {
    grid-template-rows: 0px calc(100% - var(--link-height-mobile)) var(--link-height-mobile);

   }
  
  #app_panel.show-mobile-views-pane.hide-mobile-top-nav #mobile_top_nav{
    display:none;
  }
  
  
  
  #app_panel.show-mobile-views-pane.maximise-selected-view #mobile_top_nav_links {
    display:none;
  }
  
  

  
 
    #app_panel.show-mobile-views-pane.maximise-selected-view  {
    
    grid-template-columns: 100% 100%;
    grid-template-rows: 100%;

    grid-template-areas:
      "---- selected_item_view";
      
      /*      
  grid-template-rows: calc(100% - var(--link-height-mobile)) var(--link-height-mobile);
      

grid-template-areas: 
  "entries_list selected_item_view"
  "bottom_nav selected_item_view";      
    */  
  }
  

  
  
 /*    

  #app_panel.show-mobile-views-pane.maximise-selected-view  #mobile_top_nav{
    display:none;
  }
  
  #app_panel.show-mobile-views-pane.maximise-selected-view #top_nav{
    display:none;
  }
  
  #app_panel.show-mobile-views-pane.maximise-selected-view #bottom_nav{
    display:none;
  }
  
  #app_panel.show-mobile-views-pane.maximise-selected-view #entries_list {
    display:none;
  }
  */
  /*----*/
  
  
  
  #app_panel.hide-list #mobile_top_nav_links > li:nth-child(1) { 
    display: none;
  }
  
  #app_panel.hide-list #selected_item_view { 
    display: block;
  }
  
  
  
  
#modal_window {

  grid-template-columns: 100%;
  grid-template-rows: min-content min-content min-content;

  grid-template-areas:
    "icon"
    "body"
    "links";
  min-width:70%;
 }
  
#modal_icon {
  justify-content:center;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 5px 5px 0px 0px;
}
  
  #modal_body {
    padding:5px;

}
  
}





#selected_item_view {
  overflow-y: hidden; /* NOTE: Disable scrolling of this panel. Only have one srollable element - the view iframe */
  overflow-x: hidden;
  background-color: white;
}

.entries-list {
  background-color: var(--left-pane-bg);
}





.items-view {
  background-color: var(--left-pane-bg);
}








/*Named Elements*/

[name="editor-text-box"] {
  width: 100%;
  height: 50%;
  font-family: Verdana;
}
[name="csv-text-box"] {
  width: 100%;
  height: 45%;
}

html,
body {
  padding: 0;
  margin: 0;
}

#developer_top_links li:hover {
  background-color: grey;
}

/*Link formatting*/

.links {
  display: flex;
  margin: 0;
  padding: 0;
  min-height: var(--link-height);
  width: 100%;
  list-style-type: none;
  position:relative;
  

  /*Disables text selection*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*added on:*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.links > li {
  background-color: transparent;
  color: #CCCCCC;
  white-space: nowrap;
  overflow: hidden;
  flex: 0 5 auto;
  padding-left: 10px;
  padding-right: 10px;
  min-width: 10px;
  cursor: pointer;
  position:relative;
  
  min-height: var(--link-height);
  
  font-size: var(--link-font-size);
  
  /* Puts link contents in the centre*/
  display: flex;
  align-items: center;
}

.links > li:hover {
  color: white;
  background-color: #6477AA;
  
}

.links > li[selected] {
  display: flex;
  align-items: center;
  color: white;
  background-color: #6477AA;
  flex: 0 1 auto;
}

.links > li[arrow] {
  display:none;
}

/*
#app_menu.links > li:hover {
  background-color: orange;
  opacity: 0.75;
  color: white;
}
*/



/* Tabs - Rounded*/

.links-rounded {
  display: flex;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  list-style-type: none;
}

.links-rounded > li {
  background-color: #e2e2e2;

  white-space: nowrap;
  overflow: hidden;
  flex: 0 5 auto;
  padding: 5px;
  padding-right: 0;

  min-width: 10px;

  /*Makes the tab look like it's behind another one*/
  margin-right: -5px;
  padding-right: 10px;

  border-radius: 5px 0 0 0;
  border-style: solid;
  border-width: 1px 0 0 1px;
  border-color: grey;
  cursor: pointer;
}

.links-rounded > li:first-child {
  /*Moves tab to show left border*/
  margin-left: 1px;
}

.links-rounded > li:last-child {
  padding-right: 5px;
  margin-right: 0;
  border-width: 1px 1px 0 1px;
  border-radius: 5px 5px 0 0;
  margin-right: 1px;
}

/*
  .links > li:last-child[selected], li:last-child:hover {
    Adds rounded border
    border-width: 1px 1px 0 1px;
    border-radius: 5px 5px 0 0;  
    margin-right:1px;
  }
  */
.links-rounded > li:hover {
  background-color: #f3f390;
  flex: 0 0 auto;
}

.links-rounded > li[selected] {
  display: block;

  background-color: yellow;
  background-color: #ffff93;
  border-width: 1px 1px 0 1px;
  border-radius: 5px 5px 0 0;
  margin-right: -1px;
  padding-right: 5px;
  flex: 0 1 auto;
}







/*Buttons formatting*/

.buttons { 
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style-type: none;
}

.buttons > li {
  white-space: nowrap;
  overflow: hidden;
  flex: 1 1 auto;
  padding: 3px;
  text-align: center;
  /*! color:white; */
  cursor: pointer;
}

.buttons > li:hover {
  color: black;
  opacity: 0.75;
  flex: 1 0 auto;
}

.bottom-nav .buttons > li:hover {
  background-color: #A69B02;
}

.buttons > li[selected] {
  display: block;
  background-color: white;
  flex: 1 0 auto;
  background-color: #A69B02;
}





#entries_submenu > li {
  
  color: white;
  
  /*background-color: #B9B027;*/
  /*background-color: #9D9624;  (dark brown)*/
  /*background-color: var(--orange);*/
  
  background-color: var(--entries-submenu);
}

#entries_submenu > li:hover {
  background-color: grey;
}

.noselect, .noselect * , .nofocus, .nofocus *, .links, .links *, .noselect li {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*added on:*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  
-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-webkit-user-select: none;      
  
}

      .hidden {
        display: none !important;
        visibility: hidden !important;
      }


.shown {
  display: inherit !important;;
  visibility: visible !important;;
}