/* Stylesheet for whole app */

/* Modified  */

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


html, body {.

    overscroll-behavior: none; /* Prevent bounce effects */
}

.smooth-scroll {
  scroll-behavior: smooth;
}
    

:root {
  
  
  
  /* Theme-related values: */
  
  /*--soft-keyboard-offset-height: 0px; 254px*/
  
  
  /* These values are set by the AppResizer function */
 --onscreen-keyboard-portrait-offset-height: 0px;  
 --onscreen-keyboard-portrait-open-time: 0ms;
 --onscreen-keyboard-portrait-delay: 0ms;
  
 --onscreen-keyboard-landscape-offset-height: 0px;  
 --onscreen-keyboard-landscape-open-time: 0ms;
 --onscreen-keyboard-landscape-delay: 0ms;
  
  --screen-size-portrait-height: 100%;
  --screen-size-landscape-height: 100%;
  
  
  /* These would be adjusted by javascript (to fix glitch on mobile browsers) */
  --window-inner-height: 100%; /* set dynamically in pixels */
  
  

  /*--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);
  
  --bottom-nav-submenu-bg: yellow; /* #bfad3c */
  
  --mobile-plus-bg: rgb(251, 184, 23);
  
  /*--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 ------*/
  
  --medium-grey: #a2a1a1;
  --dark-grey: grey;
  
  
  --light-blue: rgb(138, 164, 232);
  /*--light-blue: rgb(181,181,156);*/
  
  /* --entries-submenu: rgb(179, 179, 150); rgb(176, 176, 147); Dark yellow */
  
  --entries-submenu: #a2a1a1;
  
  /*--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);
  

  --tick-icon-content: url("data:image/svg+xml,%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 22 22' width='100%' height='100%'%3E%3Cdefs%3E%3Cpath d='M6.32 18.07C5.5 17.06 4.42 15.88 3.06 14.56C2.7 14.21 2.81 13.6 3.27 13.4C3.59 13.26 3.9 13.14 4.18 13.05C4.41 12.98 4.62 12.92 4.81 12.87C5.43 12.7 6.09 12.91 6.5 13.4C7.1 14.1 7.62 14.72 8.05 15.25C8.67 16.01 9.17 16.65 9.55 17.16C9.98 15.49 11 13.16 12.61 10.19C13.88 7.83 15.1 5.92 16.24 4.46C16.94 3.58 17.99 3.06 19.11 3.05C19.53 3.04 19.84 3.04 20.46 3.03C20.77 3.03 20.96 3.38 20.78 3.63C18.42 7.04 16.6 9.84 15.33 12.06C14.11 14.19 12.88 16.86 11.64 20.09C11.43 20.66 10.86 21.02 10.25 20.98C10.11 20.97 9.96 20.96 9.81 20.96C9.66 20.96 9.51 20.97 9.35 20.98C8.73 21.02 8.13 20.7 7.82 20.16C7.52 19.65 7.02 18.96 6.32 18.07Z' id='aqdlBogCl'%3E%3C/path%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cuse xlink:href='%23aqdlBogCl' opacity='1' fill='%23000000' fill-opacity='1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  
}


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;
  
  height: 100%;
}


/* -- Changes the App Size for onscreen keyboard: -- */

@media (orientation: landscape) {
  
  body {
    --onscreen-keyboard-offset-height: var(--onscreen-keyboard-landscape-offset-height);
  }
  
   #main_wrapper  {
    height: 100%;
    transition: height var(--onscreen-keyboard-landscape-open-time) ease-out var(--onscreen-keyboard-landscape-delay);
  }
  
   #main_wrapper.onscreen_keyboard_open {
    height: calc(var(--window-inner-height) - var(--onscreen-keyboard-landscape-offset-height));
    transition: height var(--onscreen-keyboard-landscape-open-time) ease-out var(--onscreen-keyboard-landscape-delay);
  }
}

@media (orientation: portrait) {
  
  body {
    --onscreen-keyboard-offset-height: var(--onscreen-keyboard-portrait-offset-height);
  }
  
   #main_wrapper  {
    height: 100%;
    transition: height var(--onscreen-keyboard-portrait-open-time) ease var(--onscreen-keyboard-portrait-delay);
  }
  
  #main_wrapper.onscreen_keyboard_open{
    height: calc(var(--window-inner-height) - var(--onscreen-keyboard-portrait-offset-height));
    transition: height var(--onscreen-keyboard-portrait-open-time) ease var(--onscreen-keyboard-portrait-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;
  
  background-color: var(--top-nav-bg);
}

#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;

  
margin-left: auto;
margin-top: auto;
margin-bottom: 20px;
margin-right: 20px;

}

/* Adds a background circle that can be changed independent of the plus icon */
#mobile_plus_button:before {
  content: "";
  height: 100%;
  width: 100%;
  position: relative;
  background-color:var(--mobile-plus-bg);
  border-radius: 50px;
  opacity:0.7;
}

#mobile_plus_button span.plus-icon {
  width:100%;
  height:100%;
  position:absolute;
  opacity:1;
  border-radius: 50px;
  cursor: pointer;
  background-color:transparent;
}

#mobile_plus_button:hover:before, #mobile_plus_button:focus:before {
  opacity: 0.9;
}

#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 div.mobile-only {
  opacity: 0.8;
}

#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;  
    color:white;
    display:flex;
    align-items: center;
    opacity:0.5;
}


#app_submenu > li {
  padding-left: 28px;
}
  
#app_submenu li:hover {
  background-color: grey;
}

#app_submenu li[action="change_view_from_dropdown"] {
  background-color: #444144;
  background-color: #3b496d;
  background-color: #212d4d;
}

#app_submenu li[action="change_view_from_dropdown"]:hover, #app_submenu li[action="change_view_from_dropdown"][selected] {
  /*background-color: var(--top-nav-bg);*/
  background-color:rgb(54, 76, 132);
}

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

#app_menu > li:hover::after {
  opacity:1;
  position:absolute;
  
}

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

#app_menu > li[selected] {
  color:white !important; 
}

#app_menu > li[selected] > div {
  background-color: var(--translucent-black-high) !important;
  border-left: 2px solid white !important;
  opacity: 0.7;
}

/*
#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;
  margin-left:1px;
}




#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: 1px var(--link-height) calc(100% - var(--link-height) - var(--link-height)) var(--link-height);

  grid-template-areas:
    "top_line top_line"  /* Adds a line above the search_filters_calendar */
    "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;
  z-index:100; /* Makes the submenu go above the plus button */
}

#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;
    z-index: 100;
  }

#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);
  /*border-radius: 8px 8px 0 0;*/
}



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




#view_links {
  /*justify-content: flex-end;*/
  /*justify-content: center;*/
  justify-content: flex-start;
  overflow: hidden;
  padding-left: 5px;
  }
        




#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;
    justify-content: center;
  }
  



#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";
  
  min-width: 55%;
}





#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;
  padding-left: 6px;
  padding-right: 6px;
}
  


#modal_body button:hover {
  opacity:1;
}

#modal_window.fullscreen {
  display: flex;
  width: calc(100% - 40px);
  height: calc(100% - 20px);
  margin-bottom: 0;
  background:transparent;

}

/* Hides all elements inside modal_window except modal_body */
#modal_window.fullscreen > *:not(#modal_body) {
  display:none;
}

#modal_window.fullscreen > #modal_body {
  width: 100%;
  padding: 0;
  margin: 0;
  bottom: 0;
  border-top-left-radius: 15px;
  border-top-right-radius:15px;
  background:white;
}

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

#search_box:hover {
  background-color:rgba(255, 255, 255, 0.4);
  background-color: var(--translucent-white-low);
}

#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;
}



.search_box_holder {
  position:relative; display:flex; flex-grow:5;
}



  
/* 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";
  }
  
  /* Hide the views links from desktop app view (only shows in mobile view) */
  #app_submenu li[action="change_view_from_dropdown"] {display:none !important;}
}







#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;
}


/* Overwrite hover of touch enabled devices */
#entries_menu > li[selected] {
  color: white !important;
  background-color: var(--entries-submenu) ; 
  opacity: 1;
}


#entries_menu > li[selected="from_context_menu"] {
  background-color: transparent; 
  opacity: 0.25;
}

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




/* Adds the tripple line menu icon */
#app_menu > li:after {
  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='white' fill-opacity='1'%3E%3C/use%3E%3C/g%3E%3Cg%3E%3Cuse xlink:href='%23f1eBzF7HXL' opacity='1' fill='white' fill-opacity='1'%3E%3C/use%3E%3C/g%3E%3Cg%3E%3Cuse xlink:href='%23a3NtHYGiJC' opacity='1' fill='white' 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;
  color:white;

}

#app_menu > li:hover::after {
  opacity: 0.9;
}


#app_menu > li[selected]::after{
  opacity: 0.9;
}

#search_filters_calendar {
  
}

#mobile_menu {
  height: var(--link-height-mobile);
  width: 45px;
}

  #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);
    
    background-color: rgb(144, 144, 144);
    background-color: var(--medium-grey);
  }


  #mobile_menu > li[selected], #mobile_menu > li[selected]:hover {
    
    opacity: 1;
    /*background-color: rgb(152, 169, 191) !important;  Make important to overwrite "touch" */
    background-color: rgb(144, 144, 144) !important;
    background-color: var(--medium-grey) !important;
  }



/* ------- 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));
  }
  */

  /* Fixes glitch - fixed-positioned modal not resizing with main wrapper: */
@media (orientation: landscape) {
  #main_wrapper.onscreen_keyboard_open #modal_overlay {
    height: calc(var(--screen-size-landscape-height) - var(--onscreen-keyboard-landscape-offset-height));
  }
}

@media (orientation: portrait) {
   #main_wrapper.onscreen_keyboard_open #modal_overlay {
    height: calc(var(--screen-size-portrait-height) - var(--onscreen-keyboard-portrait-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);
    background-color: var(--bottom-nav-submenu-bg);

    background-color: var(--dark-header-bg);
    

    top:0;
    right:0;
    height: var(--link-height-mobile);

  }
  
  
  
  /* -- New View layout - (allows gradual transition from old layout) -- */
  
  
  #app_panel.new-view-layout {
    
    grid-template-areas:
      "top_nav selected_item_view"  /*  mobile_top_nav */
      "entries_list selected_item_view"
      "bottom_nav selected_item_view"
      ;
  }
  
  /* Hides the mobile top nav background */
  #app_panel.new-view-layout #mobile_top_nav {
    
    height: 0;
    
    /* Puts mobile nav to the top of selected item view */
    grid-area: selected_item_view;
    position:absolute;
  }
  
  
  .desktop-app-title {
    display:none;
  }
  
  .mobile-app-title {
    display:flex;
  }
  
  
  /* ------ */
  
  
  
  
  
  /* Unhides the mobile top menu */
  #mobile_top_nav_links {
    display: flex;
    

    height: var(--link-height-mobile);
    width: 45px;

  }
  
  #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;
  }
  */
  
  
  
  #filters_submenu {
    top:initial;
    bottom: calc(var(--link-height-mobile) + 10px);
    
    max-height: calc(var(--window-inner-height) - var(--link-height-mobile) - 10px) !important;
  }
  
  #sort_submenu {
    top:initial;
    bottom: calc(var(--link-height-mobile) + 10px);
    max-height: calc(var(--window-inner-height)) - var(--link-height-mobile) - 10px) !important;
  }
  
  


  #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: 100;
  }
  
  #entries_submenu > li[action="create"] {
    display:none;
  }
  
  
  
  
    /* Changes the entries sub menu for touch devices */
  body[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 */
  body[touch-enabled] #entries_submenu > li {
    height: 50px;
    width: 35px;
    border-radius: 50px;
    justify-content:center;
    align-items: center;
    margin-left:2px;
  }
  
  body[touch-enabled] #entries_submenu span {
    display:none;
  }
  
  body[touch-enabled] #entries_submenu span:first-child {
    display:block;
    font-size: 36px;
  }
  
  body[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");
    */
    
    --icon: var(--restore);
    
    background-repeat: no-repeat;
    background-position: center center;

    background-size: 29px;
    width: 30px;
    height: 30px;
  }
  
  
  body[touch-enabled] #entries_submenu span.modify-icon {
    background-size: 24px;
  }
  
  body[touch-enabled] #entries_submenu span.duplicate-icon {
    background-size: 12px;
  }
  
  body[touch-enabled] #entries_submenu span.cross-icon {
    background-size: 17px;
  }
  
  body[touch-enabled] #entries_submenu span.erase-icon {
    background-size: 23px;
    width: 25px;
    height: 25px;
  }
  
  body[touch-enabled] #entries_list > li {
    color:black;
  }
  
  body[touch-enabled] #entries_list > li .tick-icon:before {
    opacity: 1;
  }
  
  
#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%;

     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);
  background-color: var(--bottom-nav-submenu-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; Keeps the back arrow sligthly faded*/
    /*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);
    background-color: rgb(144, 144, 144);
    background-color: var(--medium-grey);

    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: var(--dark-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 {
    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;
  
  /*position: relative;  relative position - allows the iframe within to be put as absolute, issue - context menu gets hidden */
}

.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;
}

/* Removes the hover option for menu links on touch devices */
body[touch-enabled] ul[id$="_menu"].links > li:hover {
  background-color:initial;
  opacity: initial;
  color: initial;
}

.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;;
}



.icon-sort-increasing {

  position: absolute;

  height: 100%;
  z-index: 0; /* puts the icon it behind the element */
    
  background-size:21px;
  
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.35;
  
  width: 35px;
  
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='evenodd' clip-rule='evenodd' viewBox='0 0 512 421.65'%3E%3Cpath fill-rule='nonzero' d='M383.01 379.71c11.57 0 20.97 9.4 20.97 20.97 0 11.57-9.4 20.97-20.97 20.97l-362.04-.44C9.4 421.21 0 411.81 0 400.24c0-11.57 9.4-20.97 20.97-20.97l362.04.44zm-90.97-238.93c-7.91 7.94-20.8 7.99-28.74.08-7.94-7.91-7.99-20.8-.08-28.74L369.33 5.98c7.91-7.94 20.79-7.99 28.73-.08l107.98 107.91c7.95 7.94 7.95 20.87 0 28.81-7.94 7.95-20.87 7.95-28.81 0l-73.12-73.11.32 206.4c0 11.2-9.1 20.3-20.3 20.3-11.2 0-20.29-9.1-20.29-20.3l-.32-206.63-71.48 71.5zM171.62 40.59c11.57 0 20.97 9.41 20.97 20.98 0 11.56-9.4 20.97-20.97 20.97l-150.65-.16C9.4 82.38 0 72.97 0 61.4c0-11.56 9.4-20.97 20.97-20.97l150.65.16zm41.33 170.71c11.57 0 20.97 9.4 20.97 20.97 0 11.57-9.4 20.97-20.97 20.97l-191.98-.23C9.4 253.01 0 243.61 0 232.04c0-11.56 9.4-20.97 20.97-20.97l191.98.23z'/%3E%3C/svg%3E");
}


.icon-sort-decreasing {
  
  position: absolute;

  height: 100%;
  z-index: 0; /* puts the icon it behind the element */
    
  background-size:21px;
  
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.35;
  
  width: 35px;
  
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='evenodd' clip-rule='evenodd' viewBox='0 0 512 421.65'%3E%3Cpath fill-rule='nonzero' d='M383.01 0c11.57 0 20.97 9.4 20.97 20.97 0 11.57-9.4 20.97-20.97 20.97l-362.04.44C9.4 42.38 0 32.97 0 21.4 0 9.84 9.4.43 20.97.43L383.01 0zM263.22 309.53c-7.91-7.95-7.86-20.83.08-28.74s20.83-7.86 28.74.08l71.48 71.5.32-206.63c0-11.2 9.09-20.3 20.29-20.3s20.3 9.1 20.3 20.3l-.32 206.4 73.12-73.12c7.94-7.94 20.87-7.94 28.81 0 7.95 7.95 7.95 20.88 0 28.82l-107.9 107.9c-8.02 7.91-20.9 7.87-28.81-.08L263.22 309.53zm-91.6 29.58c11.57 0 20.97 9.4 20.97 20.97 0 11.57-9.4 20.97-20.97 20.97l-150.65.16C9.4 381.21 0 371.81 0 360.24c0-11.56 9.4-20.97 20.97-20.97l150.65-.16zm41.33-170.7c11.57 0 20.97 9.4 20.97 20.97 0 11.57-9.4 20.97-20.97 20.97l-191.98.23C9.4 210.58 0 201.17 0 189.6c0-11.56 9.4-20.97 20.97-20.97l191.98-.22z'/%3E%3C/svg%3E");
}


/* NOTE: THIS IS A BIG ICON (6KB) - NEEDS TO BE OPTIMISED */
.icon-swap-arrows {
  
  position: relative;
  
  height: 20px;
    
  background-size:21px;
  
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.2;
  
  width: 25px;
  padding-left:5px;
  
  content: var(--sort-swap);
  
}


#sort_submenu li:hover .icon-swap-arrows {
  opacity: 0.9;
}



/* Hides all submenus initially */
ul[id$="_menu"] ul[id$="_submenu"] {
  display:none;
}

/* Shows submenu for selected menu item that has a submenu */
ul[id$="_menu"] > li[selected] + ul[id$="_submenu"] {
  display:flex;
}




/*  */
#filters_menu > li, #sort_menu > li {
  background-color:transparent;
  opacity: 0.4;
  color: black;
}


#filters_menu > li:hover, #sort_menu > li:hover {
  background-color: var(--bottom-nav-submenu-bg);

  opacity:0.9;
  color:black;
}


/* Adds the selected colour for filters and sort menu */
#filters_menu > li[selected], #sort_menu > li[selected] {
  background-color: var(--bottom-nav-submenu-bg) !important;
  opacity:0.9 !important;
  color:black !important;
}



.modal-checkbox:hover {
  background-color: rgba(116, 0, 255, 0.08);
}



/* Highlights the (untagged) and ALL filters  */
#filters_submenu > li:last-child, #filters_submenu > li:nth-last-child(2) {
  /*background-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 0, 0.1);*/
}

/* Adds a border above the "ALL" filter */
#filters_submenu > li:nth-last-child(2) {
  border-top:grey solid 1px;
}

#filters_submenu > li:hover, #sort_submenu > li:hover, #filters_submenu > li[selected], #sort_submenu > li[selected] {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Makes the view name text be white on mobiles */
#app_menu > li > div:nth-child(2) {
  color:white;
}

#filters_submenu > li {
  padding-left:15px;
}

#sort_submenu > li {
  padding-left:12px;
}


#search_box::placeholder {
color:transparent;
}

/* Moves the first two filters ("ALL" and "no tag") to the end 
#filters_submenu > li:nth-child(1) {
  order: 1000;
}

#filters_submenu > li:nth-child(2) {
  order: 1001;
}
*/

#sort_menu {
  width: 42px;
}

#bottom_nav, #entries_menu > li {
 border-radius: 0 7px 0 0; 
}


/* Mobile View */

@media screen and (max-width: 767px) {
  
  /* Shows the placeholder for mobile view */
  #search_box::placeholder {
    color:rgba(0, 0, 0, 0.3);
  }
  
#sort_menu {
  width: 50px;
}
  
  #sort_menu > li {
    width:50px !important;
    opacity:0.8;
  }
  
  #filters_menu > li {
    opacity: 0.8;
  }
  
#bottom_nav {
 border-radius: 0; 
}
  
  /* Hack - Makes the tripple-line menu bar be hidden properly in mobile mode */
  #app_panel > *, #selected_item_view, #modal_overlay  {
    /*z-index:1;*/
  }
  
}

#modal_overlay  {
    /*z-index:1;*/
  }




  /* When search box is focused - hide other elements  */
  #search_filters_calendar.search_box_focused > *:first-child, #search_filters_calendar.search_box_focused > *:nth-child(2) {
    width: 0 !important;
    overflow: hidden;
    
    opacity: 0;
    transition: opacity 0s;
    -moz-transition: 0.5s;
    
  }
  
  #search_filters_calendar.search_box_focused > div.search_box_holder {
    display:flex;

    
  }


  
  /* ---- */





  /* When search box is focused - hide other elements  
  #search_filters_calendar.search_box_focused > *:first-child {
    translate: scale(0);
    width: 0px;
    opacity: 0;
    visibility: hidden;
    
    transition: all 1s linear;
  }
  
  #search_filters_calendar.search_box_focused > div.search_box_holder {
    display:flex;
    width: 100%;
    opacity: 1;
    
  }

#search_filters_calendar {
  transition: all 2s ease-in-out;

}*/




      
/* Styles the dropdown imitation */
#modal_body [name="views_selection_box"].links {
  border: solid grey 1px;

}

#modal_body [name="views_selection_box"].links li {
  color:black;
  padding: 4px;
  padding-left:6px;
  min-height: auto;
  font-size: 14px;
  border: 1px dotted transparent;
}
    
#modal_body [name="views_selection_box"].links li[selected] {
  color:white;
  background:#0063e0; /* blue colour */
  border: 1px dotted white;
}

#modal_body [name="views_selection_box"].links li:before {
  content: attr(view-prefix);
  margin-right:4px;
  min-width: 13px;
}

#modal_body [name="views_selection_box"].links li:after {
  content:"\2192";
  color:transparent;
  margin-left:4px;
}

#modal_body [name="views_selection_box"].links li[selected]:after {
  color:white;
}

#modal_body [name="views_selection_box"].links li:hover {
  background:lightgray;
}

#modal_body [name="views_selection_box"].links li[selected]:hover {
  background:#0063e0;
}

/* NOTE: Need a better way to align */
#modal_body [name="view_selection_details_holder"] > div > div {
  margin-top:3px;
}


/* Style for the data entry column in modal */
#modal_body table tr td:nth-child(2) {display:flex; align-items: center; justify-content: center;}
#modal_body table tr td:nth-child(2) textarea {flex-grow:1; flex-shrink:1;}




/* Set the  */
textarea[input] {
  font-size: 16px;
  height: 25px;
  resize: none;
  overflow: hidden;
  font-family: Arial;
  padding-top:1px;
  padding-bottom: 1px;
}

select {
  font-size: 15px;
  font-family: Arial;
}





/* --------------- */

/* Format UL to act as dropdown */

ul.dropdown {
  display: flex;
  margin: 0;
  padding: 0;
  /* width: 100%; */
  list-style-type: none;
  position:relative;
  
  align-items: flex-start;  /* prevents flex items from stretching */

  /*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);
}

ul.dropdown > li {
  background-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  flex: 0 5 auto;

  min-width: 10px;
  cursor: pointer;
  position:relative;
  
  
  border-radius: 4px;
  border: grey solid 1px;
  background-color: #e9e9ed;
  
  /*! width: initial; */
  
  
  color: black;
  min-height: initial;
  
  padding:3px;
  padding-left:8px;
  padding-right:0px;

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




/* Add the prefix symbol (if defined) */
ul.dropdown > li::before {
  
  content: attr(prefix);
  background: transparent;

  /*width:15px;*/
  
width: fit-content;
padding-right: 6px;
  
}


/* Add the shevron down icon */
ul.dropdown > li::after {
  content: "";
  background: transparent;
  
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no' %3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='25' height='25' viewBox='307.5 307.5 25 25' xml:space='preserve'%3E%3Cdesc%3ECreated with Fabric.js 5.3.0%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg transform='matrix(1 0 0 1 320 320)' id='AKXrj5M2rYh_X6U75mqLl' %3E%3Cpath style='stroke: none; stroke-width: 1; 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(-12, -12)' d='M 0 0 L 24 0 L 24 24 L 0 24 z' stroke-linecap='round' /%3E%3C/g%3E%3Cg transform='matrix(1 0 0 1 319.9363950336 319.6994941396)' id='A2p9yFmC66XjC2KX2cyS6' %3E%3Cpath style='stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(111, 111, 111); fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' transform=' translate(0, 0)' d='M -3.72366 -2.90131 L -4.34579 -2.56327 L -4.48567 -2.01432 L -0.5641399999999996 2.4925 L 0.06361000000000039 2.9012900000000004 L 0.6927300000000004 2.4626600000000005 L 4.48568 -2.0143199999999997 L 4.36552 -2.5839199999999996 L 3.70691 -2.9013199999999997 L 3.02205 -2.56328 L 0.06361000000000017 0.9086000000000003 L -3.0241599999999997 -2.5839299999999996 z' stroke-linecap='round' /%3E%3C/g%3E%3C/svg%3E");
  
  background-repeat: no-repeat;
  background-position-x: -1px;
  background-position-y: -6px;

  width:21px;
  height: 10px;
  
}

ul.dropdown > li:hover {
  background-color:#c6c6c6;
}

ul[open].dropdown > li {
  background-color:#c6c6c6;
}

/* Removes the hover option for menu links on touch devices */
body[touch-enabled] ul.dropdown > li:hover {
  background-color:initial;
  opacity: initial;
  color: initial;
}

ul.dropdown > ul {
  list-style-type: none;
  border: 1px solid lightgrey;
  background-color: #ebe4e4;
  position: absolute;
  top: 28px;
  left:0;
  width: max-content;
  border-radius: 4px;
  padding: 0;
  padding-top: 3px;
  padding-bottom: 3px;
  
  overflow:hidden;
  overflow-y: auto; /* adds crollbars if needed */
  
  z-index:2000;
  
  position: absolute;
  flex-direction: column;
  width: auto;
  height: auto;
  overflow-y: auto;
  
  display: flex;
  display:none;
}

  
/* Shows the options when "open" flag is set */
ul[open].dropdown > ul {
  display:flex;
}

ul.dropdown > ul > li {
  padding:3px;
  padding-left:22px;
  padding-right: 12px;
}

ul.dropdown > ul > li::before {
  content: "";
  width: 10px;
  position:absolute;
  left:6px;
}

ul.dropdown > ul > li[selected]::before {
  content: "✓";
}

ul.dropdown > ul > li:hover {
  color: white;
  background-color: #4797fd;
}


/* Changes the selected option marker for status dropdown */
ul.dropdown[name="status_select"] > ul > li[selected]::before {
  content: "▹";
}


/*
#dropbox_overlay {
  width:100%;
  height: 100%;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background: transparent;
  position:fixed;
  z-index: 1000;
}

*/
  
/* ----- */  

/* Makes the svg element expand to fill the container */
.icon-holder {position:relative;}
.icon-holder > svg {width:100% !important; height:100% !important; } 


.checkered-background {
 
    --checker-size: 10px;
    --color-one: #fff;
    --color-two: #ccc;

    background-color: var(--color-one);
    background-image: 
        linear-gradient(45deg, var(--color-two) 25%, transparent 25%, transparent 75%, var(--color-two) 75%, var(--color-two)),
        linear-gradient(45deg, var(--color-two) 25%, transparent 25%, transparent 75%, var(--color-two) 75%, var(--color-two));
    background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
    background-position: 0 0, var(--checker-size) var(--checker-size);
}

/* Adjust the square size for items in entries_list */
#entries_list .checkered-background {
  --checker-size: 5px;
}

/* -- For Task View  -- */

/*

#entries_list .tick-icon:before {  
  
  content: var(--tick-icon-content);
  opacity: 0.6;
  width: 17px;
  position:relative;
  display: inline-block;
}

#entries_list > li:hover .tick-icon:before, #entries_list > li[selected] .tick-icon:before {
  opacity: 1;
}
*/

#entries_list .icon.tick-icon {
  
--icon: var(--completed-task);
  --opacity: 0.6;
  --icon-size: 13px;
  width: 35px;
  height: 30px;
  position: absolute;
  left: 0;
  
}

#entries_list .icon.important-icon {
--icon:var(--important-task); --opacity:0.6; --icon-size: 6px; width:35px; height:30px; position:absolute; left:0;
}

#entries_list > li[selected] .icon {
  opacity: 1 !important;
}


.temp_top {
  position:fixed;
  top:10px;
}