/*  https://www.w3schools.com/cssref/css_selectors.asp       syntax cheat sheet  */
 

/* 0 ---------------------------------------------------------------------------------------------------------------- */
/* 
   220610 TN note
      This css assumes you are using html 5 only. If the page uses bootstrap 3 (or other versions), it may override
      the method/css such as one for drop-down menu, and this scripts may misbehave.
*/
 
/* 1 ---------------------------------------------------------------------------------------------------------------- */
/*   css used only by topnave (the navbar at the top of dh pages). This version does not rely on bootstrap library.   */


 /* body {margin:0;font-family:Arial}  */

   .dh_topnav_fixer_top {  /* Fix the navbar to the window top. Let this wrap dh_topnav as you may     */
      position: fixed;     /* use fixed here, but cannot use it for dh_topnav (which must use static)  */
      border-width: 0px;
      top: 0;
      right: 0;
      left: 0;
      z-index: 999;        /* Change this to prevent other page conent covering the navbar.            */
   }

 /* Reference for the actual page content */
   .x_page_content {            /* Scrollable with top space adjusted for dh_topnav_fixer       */
      x_margin-top: 40px;       /* Use same value as the height of dh_topnave needed here       */
      x_padding-left: 16px;
   }


   .dh_topnav {
      height: 50px;        /* See note below of .dh_nav_dropbtn to avoid gap making drop-down issue    */
      line-height:50px;    /* Set this same as height, so each line use max height and center text     */
      x_position: sticky;  /* Only static (default) works, any other one disables dropdown menu        */

      overflow: hidden;    /* Disable this to test if drop-menu content pulled down is clipped off     */
                           /* Also see note for .dh_nav_dropdown about right-aligned dropdown menu     */
      margin-bottom: 0px;  /* This seems to fix the occasional covering of Edit switch                 */

      background-color: #292929; /* Default #333 */
      font-family: inherit;
      font-size: 14px;
      color: #ddd;
      text-align: center;
      text-decoration: none;
      vertical-align: middle;

      padding: 0px;
   }

   .dh_topnav .dh_topnav_left_group    { /* TN mod: added. This menu group shows on the left          */
      float:none;
   }

   .dh_topnav .dh_topnav_right_group   { /* TN mod: added. This menu group shows on the right         */
      float:right;
   }

   .dh_topnav .dh_nav_mobile_menu_icon { /* mobile menu icon is initially hidden                      */
      display: none;
      font-size: 20px;
   }

   .dh_topnav a {         /* Menus that immediately runs onclick func or jumps to page                */
      float: left;        /* this makes all <a> menus lines up horizontally left to right in the bar  */
      display: block;     /* each menu is block element but float:left lines it up without line-break */

      height: inherit;
      line-height: inherit;
      background-color: transparent; /* prevent multiplying transparency from .dh_topnav in mobile    */
      font-size: inherit;
      font-family: inherit;
      color: inherit;
      text-align: inherit;
      text-decoration: inherit;

      padding: 0px 12px;   /* Non-zero vertical off-centers. horizontal adds both sides               */
   }

   .dh_topnav .dh_topnav_brand {  /* Use this for the colored logo staying at topleft                 */
      background-color: peru; /* opaque Options: #04AA6D DarkOliveGreen DarkGoldenRod DarkSlateGrey   */
      font-size: 16px;
      font-weight: 900;
      padding-left: 20px;
      padding-right: 20px;
      margin-right: 20px;
   }

   .dh_topnav a.dh_topnav_title { /* Use this for page title that says in the bar for mobile          */
      pointer-events: none;       /* This makes the menu static, not reacting mouse at all            */
      margin-right: 20px;         /* Cosmetic tune-up                                                 */
  }

   .dh_topnav a.dh_topnav_static {/* Use this for page title that says in the bar for mobile          */
      pointer-events: none;       /* This makes the menu static, not reacting mouse at all            */
      font-size: 16px;
   }

  /* About right-aligned dropdown menu
     To make pulled-down content of .dh_nav_dropdown right-aligned to the .dh_nav_dropbtn,     
     there are two methods. I am currently using method B.
       Method A: Change the current settings as below.
           .dh_nav_dropdown_pad > right:0px 
           .dh_nav_dropdown > position:relative   (pad is placed relative to .dh_nav_dropdown)
           .dh_topnav       > .overflow:visible   (disables cropping of outside of navbar)
       Method B: Manually align the horizontal position via translateX. 
           .dh_nav_dropdown_pad > transformX: translateX(-30px); 
           style="width:100px; transformX: translateX(-30px);"

           * In this case, if you just want to prevent right-most menu going over window edge,  
           .dh_nav_dropdown_pad > right:0px sticks the menu to window edge, and works good.
  */

   .dh_nav_dropdown {       /* Drop down menu label assembly wrapper                                  */
      x_position: relative; /* See note above for right-aligned dropdown menu.                        */
      float:left;        /* makes all <dropdown> menus lines up horizontally left to right in the bar */
      x_overflow: hidden;
   }

   .dh_nav_dropdown .dh_nav_dropbtn {
      height: inherit;      /* The ACTUAL size of the button must not be bigger than dh_topnav height */
                            /* If so, a gap is made between the navbar bottom and dropdown_pad        */
                            /* and disables pull down effect. The actuall size may be bigger than     */
                            /* size specified here, if the font size+padding+margin adds up larger    */
      line-height: inherit;
      text-transform: none; /* changed from Uppercase, which capitalizes menu name;                   */
      border: none;
      outline: none;

      background-color: transparent; /* prevent multiplying transparency factor from .dh_topnav       */
      font-size: inherit;
      font-family: inherit;
      color: inherit;
      text-align: center;
      text-decoration: inherit;

      padding: 0px 10px;       /* Non-zero vertical off-centers. horizontal adds both sides           */
   }

   .dh_nav_dropdown_pad {      /* Contains what shows when drop-down menu is pulled down              */
      display: none;
      position: absolute;

      x_right: 0px;
      x_transform: translateX(-30px);
      x_width:150px;

      color: white;
      font-size: 100%;
      font-weight: 400;
      background-color: peru; /* #00000088 #f9f9f9; */

      min-width: 120px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
      z-index: 200 ;        /* TN mod: originaly 1 */
   }

  .dh_nav_dropdown_pad.dh_nav_right_most {     /* Use this to align the pad to right edge of window   */
      right: 0px;
  }


   .dh_nav_dropdown_pad a {                    /* Each of menu lines in the drop-down menu expanded   */
      float: none;
      x_font-style: italic;

      height: 40px;
      line-height: 40px;  /* keep this same as height so text centers vertically */

      padding: 0px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
      white-space: nowrap;                     /* No menu makes two llines                            */
   }

   .dh_topnav a:hover, .dh_nav_dropdown:hover .dh_nav_dropbtn {
      background-color: #555;  /* #555; */
      x_color: white;
   }

   .dh_nav_dropdown:hover .dh_nav_dropdown_pad {
      display: block;
   }

   .dh_nav_hidden_checker {
      x_display: block;   /* for debugging */
      display: none;
   }


   /* This eliminates boostrap moodification for label tag */
   .dh_nav_checker_label { 
      x_color: red;
      margin-bottom: 0px ;          /* kill bootstrap default for label */
      font-weight: 400 ;            /* kill bootstrap default for label */
   }   

   /* smartphone max-width:480 (smartphones only), or max-width=768 (include ipad, tablet)            */
   /* hide most menus entries from the top menu bar untill the dh_nav_mobile_menu_icon is clicked     */
   @media screen and (max-width: 480px) {

  /*  .dh_topnav a:not(:first-child), .dh_nav_dropdown .dh_nav_dropbtn { */
      .dh_topnav a:not(.dh_topnav_brand, .dh_topnav_title), .dh_nav_dropdown .dh_nav_dropbtn {
         display: none;
      }

      .dh_topnav a.dh_nav_mobile_menu_icon {
         float: right;
         display: block;   /* show the three-bar mobile menu icon */
      }
   }

   /* When clicked, mobie_menu_icon's on-click action changes menu entries's name by adding .responsive 
      Change float:left to float:none to make each menu (display:block) to show in its own row.                            
      Also, change float:right of the menu_group_right so the inside menus lines up correctly, too.                   
      If you want to change these settings in the middle of page, you need to issue clear:both        */
   @media screen and (max-width: 480px) {
      .dh_topnav.responsive {
         x_position: relative;      /* TN note: keep the default (static)                             */
         height: inherit;           /* let (fixed-height) navbar expand and show the menus vertically */
         background-color: #000000cc; /* a bit transparent helping mobile when expanded. Default #333 */
      }

      .dh_topnav.responsive .dh_nav_mobile_menu_icon {
         position: absolute;
         right: 0;
         top: 0;
      }

      /* TN mod: switch the two groups to float:none. They now show stacked in two vertical rows.     */
      .dh_topnav.responsive .dh_topnav_right_group {  /* .dh_topnav_left_group is already float:none  */
         float:none;                  /* let the right_group show beneath the left group in mobile    */
      }

      /* The brand name and the title menu shows together in the top row. Others lines up vertically  */

      .dh_topnav.responsive a:not(.dh_topnav_brand, .dh_topnav_title), .dh_nav_dropdown {
         clear: both;
         float: none;
         display: block;           /* each entry gets its own line */
         text-align: right;        /* select left, center, or right to change the menu label position */
      }

      .dh_topnav.responsive .dh_nav_dropdown_pad {
         position: relative;

		 color: #ddd;
         font-size: 95%;
         font-weight: 600;
         background-color: rgba(250,250,250,0.09); /* peru=#CD853F #D79D65 #DFB184 #E5C19D #EACDB1 #EED7C1 #F1DFCD #F4E5D7 #F6EADF #F8EEE5 */
      }

      .dh_topnav.responsive .dh_nav_dropdown .dh_nav_dropbtn, .dh_nav_checker_label {
         display: block;
         width: 100%;
         text-align: right;        /* select left, center, or right to change the menu label position */
      }

      /* This overrides desktop dropdown behavior       */ 
      .dh_nav_dropdown:hover .dh_nav_dropdown_pad {
         display: none;
      }

      /* This overrides desktop dropdown behavior       */
      .dh_topnav a:hover, .topnav a:focus, .dh_nav_dropdown:hover .dh_nav_dropbtn { 
         background-color: transparent;   /* #555; No hilighting of hovered menu in mobile*/
	  }

      /* This selects closest next dh_nav_dropdown_pad after dh_nav_hidden_checker:checked
         and overrides .dh_nav_dropdown:hover behavior                                     */
      .dh_nav_hidden_checker:checked + .dh_nav_dropdown_pad { 
         display: block;
         x_background-color: yellow;
      }
   }

   /* credit text popup from the ABOUT/INFO menu of topnav */

   /* The Modal (background) */
   .modalCreditBGclass {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 202; /* Sit on top */
      margin-top: 50px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      x_background-color: rgb(0,0,0);  /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
   }

   /* Modal Content */
   .modalCredit_pad {
      position: relative;
      background-color: #fefefe;    /* peru */
      margin: auto;                 /* This centers modalCredit_pad in .modalCreditBGclass */
      padding: 20px 20px 5px 20px;
      border: 4px double #888;
      width: 360px; /* 60%; */
   }

   /* The Close Button */
   .modalCreditCloseBox {
      position: absolute ;         /* relative to .modalCredit_pad                         */
      right:10px;
      top:10px;

      height: 36px;
      width:  36px;
      line-height: 36px;

      padding: 0px;
      color: #888;

      font-size: 36px;
      border: 0px solid #888;      /* set the border to 1px for debugging                  */
   }

   .modalCreditCloseBox:hover, .modalCreditCloseBox:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
   }

   /* Adjust the size of credit display pad for mobile.  */ 
   @media screen and (max-width: 480px) {
      .modalCredit_pad {
         margin: 0px;
         width: calc(100% - 48px);
         x_background-color:yellow;
      }
   }


/* 2 ---------------------------------------------------------------------------------------------------------------- */
/*   css not used by topnav itself, but used by the some pages that has secondary navigation working with topnav      */

   /* secondary-navbar shows project name, etc. inside the model viewport for edit page, etc. */
   #secondary-navbar{
      position: absolute;
      top: 50px;
      right: 0px;
      z-index: 10; /* TN mod: originally 20 : 10 allows Note near the navbar still draggable */
      height: 50px;
      padding: 0 10px;
   }

   #secondary-navbar.patch{
      left: 300px;
   }

   #secondary-navbar.demo{
      left: 200px;
   }

   #secondary-navbar>.secondary-navbar-left{
      width:60%;
      height: 100%;
      float:left;
      display: flex;
     align-items: center;
   }

   #secondary-navbar>.secondary-navbar-right{
      width:40%;
      height: 100%;
      float:right;
      display: flex;
      align-items: center;
      justify-content: flex-end;
   }

   .secondary-navbar-left>div, .secondary-navbar-right>div{
      padding: 0 10px;
   }

   #secondary-navbar img.viewIcon{
       width: 30px;
       margin-left: 5px;
       margin-right: 5px;
   }

   .right-divider{
       border-right: 1px solid #c4c4c4;
   }

   /* viewIcon shows the icon switch for vr ar google cardboard etc in viewport */
   #viewingMode{
       position:relative;
       top:0px;
       right: 0px;
       padding-right:20px;
       /* width:100px; */
   }

   .viewIcon{
       width:30px;
       margin-left:5px;
       margin-right: 5px;
   }

   .viewIcon:hover {
       opacity:0.7;
   }

   /* onoffswitch shows the switch between Storyboard Edit and View Catalog in viewport */

   .switch-label{
       float: left;
       color: #1890FF;
   }

   li.switch{
       min-width:100px;
       padding-top:15px;
       height:50px;
   }

   .onoffswitch {
       position: relative;
       float: left;
       margin-left: 5px;
       width: 60px;
       -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
   }

   .onoffswitch label{
       margin-bottom: 0px;
   }

   .onoffswitch-checkbox {
       display: none;
   }

   .onoffswitch-label {
       display: block; overflow: hidden; cursor: pointer;
       border: 2px solid #1890FF; border-radius: 16px;
   }

   .onoffswitch-inner {
       display: block; width: 200%; margin-left: -100%;
       transition: margin 0.3s ease-in 0s;
   }

   .onoffswitch-inner:before, .onoffswitch-inner:after {
       display: block; float: left; width: 50%; height: 16px; padding: 0; line-height: 16px;
       font-size: 10px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
       box-sizing: border-box;
   }

   .onoffswitch-inner:before {
       content: "ON";
       padding-left: 10px;
       background-color: #1890FF;
       color: #FFFFFF;
   }

   .onoffswitch-inner:after {
       content: "OFF";
       padding-right: 10px;
       background-color: ; color: #1890FF;
       text-align: right;
   }

   .onoffswitch-switch {
       display: block;
       width: 12px;
       height: 12px;
       margin: 4px;
       background: #FFFFFF;
       position: absolute; top: 0; bottom: 0;
       right: 40px;
           border: 2px solid #1890FF; border-radius: 16px;
       transition: all 0.3s ease-in 0s;
   }

   .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
       margin-left: 0;
   }

   .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
       right: 0px;
   }