/* CSS Document */

/*
CSS format:
float
width, height
border, padding, margin
background-color
font

 */

:root {
   /* ---side bar and navigation bar---*/
   --navbar-bg-color: #333; /* dark gray*/ 
   --navbar-text-color: #E3E3E3; /* pale white*/
   --navbar-text-hover-color: #333; /* light gray*/
   --navbar-bg-hover-color:  #CCC; /* rgba(255,255,255,0.8); /* light gray*/


   --navbar-bg-chosen-color: #EEEEEE;
   --navbar-text-chosen-color: #111111;

   /* --- dropdown menu  ---*/
   --menu-bg-color:  #E3E3E3;
   --menu-text-color: #333;

   --menu-bg-chosen-color: #EEEEEE;
   --menu-text-chosen-color: #111111;


   /*--- tutor profile modification menu ---*/
   --submenu-bg-color: #DDD;
   --submenu-text-color: black;
   --submenu-bg-color-hover:  #CCC; /* rgba(255,255,255,0.8); /* light gray*/
   --submenu-text-color-hover: black;
   --submenu-bg-color-chosen: gray;
   --submenu-text-color-chosen: white;
}

body {
   max-width:800px;
   margin:0 auto;
   margin-top:5px;
}

@media (hover:none) {
   /* Primary Input doesn't respond to hover at all, even partially (ie: there is no pointing device) */
}
/* ============= Element ============*/

.one-line {
   white-space: nowrap;
}



/* ============= sidebar =============*/
.sidenav a {
   white-space: nowrap;
}

.sidenav {
   display:inline-block;
   background-color: var(--navbar-bg-color);
}
.sidenav > div> a {
   background-color: var(--navbar-bg-color);
   color: var(--navbar-text-color);
   text-decoration: none;
}

.sidenav > div:hover > a {
   font-weight: bold;
   background-color: var(--navbar-bg-hover-color);
   color: var(--navbar-text-hover-color);
   text-decoration: none;
   //transition:0.2s;
}

.sidenav >div.chosen  {
   background-color: var(--navbar-bg-chosen-color);
}

.sidenav >div.chosen > a {
   background-color: var(--navbar-bg-chosen-color);
   color: var(--navbar-text-chosen-color);
}



@media screen and (max-width: 767px) { /*small screen*/
   .sidenav {
      width:0px;
      height: 100%;
      position: fixed;
      z-index: 9;
      top: 0;
      left: 0;
      padding-top: 40px ;
      overflow-x: hidden;
   }

   .sidenav > div {
      width:100%;
      padding: 7px 0px;
      text-decoration: none;
      font-size: 18px;
      display: inline-block;
   }
   .sidenav a{
      text-decoration: none;
      padding: 0px 25px;
   }
   .sidenav > div:hover {
      background-color:var(--navbar-bg-hover-color);
      // transition:0.2s;
      cursor:pointer;
   }

   .sidenav > div.chosen:hover > a{
      background-color:var(--navbar-bg-hover-color);
      // transition:0.2s
   }

   .sidenav .closebtn {
      color: var(--navbar-text-color);
      position: absolute;
      top: 2px;
      right: 10px;
      font-size: 26px;
      //margin-left: 50px;

   }

}

@media screen and (min-width: 768px) {   /*big screen*/
   .sidenav {
      display:block;
      width:100%;
   }
   .sidenav {
      display:inline-block;
   }

   .sidenav >  div > a {
      display: block;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      float:left;
   }

   .sidenav .closebtn {
      display:none;
   }
}

@media screen and (max-height: 450px) and (max-width: 767px) {
   .sidenav {padding-top: 15px;}
   .sidenav a {font-size: 18px;}
}

.overlay {
   display: none;
   position: fixed;
   /* full screen */
   width: 100vw;
   height: 100vh;
   /* transparent black */
   background: rgba(0, 0, 0, 0.5);
   /* middle layer, i.e. appears below the sidebar */
   z-index: 8;
   opacity: 0;
   /* animate the transition */
   transition: all 0.5s ease-in-out;
}

.overlay.active {
   display: block;
   opacity: 1;
}
/* ================= DROPDOWN MENU on SIDE BAR ======================== */
.dropdown {
   position: relative;
   display: inline;
   padding:0px;
}


/* Dropdown Content (Hidden by Default) */
.dropdown-content {
   display: none;
   position: absolute;
   top:0px;
   right:0px;
   background-color: var(--navbar-bg-hover-color);
   color: var(--menu-text-color);
   //box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
   z-index: 11;
   border-radius: 3px ;
}
@media screen and (min-width: 768px) { /*big screen*/
   .dropdown-content {
      top:50px;
      width:130px;

   }

   .dropdown-content a {
      padding:5px 8px;
   }
}


@media screen and (max-width: 767px) { /*small screen*/
   .dropdown-content {
      position: relative;
      width:100%;
      border-radius: 0px  ;
   }
}

/* Links inside the dropdown */
.dropdown-content a {
   color: var(--menu-text-color) ;
   width:100%;
   text-align:left;
   font-size: 16px;
   text-decoration: none;
   display: inline-block;
   border-radius: 3px ;
}

.dropdown-content a.chosen  {
   color: var(--menu-text-chosen-color) ;
   background-color: var(--menu-bg-chosen-color);                  
}

@media screen and (max-width: 767px) { /*small screen*/
   #nav-service.chosen, #nav-tutor-info.chosen {
      background-color: var(--navbar-bg-hover-color);
   }
   #nav-service.chosen > a, #nav-tutor-info.chosen > a {
            background-color: var(--navbar-bg-hover-color);
                  color: var(--menu-text-color);
                     }
}


.dropdown:hover .dropdown-content {
   display: inline-block;
}

.show-dropdown {
   display: inline-block;
}
/* ============ tutor profile modification menu ========================= */
#nav-modify {
   background-color:var(--submenu-bg-color);

}

#nav-modify div   {
   background-color:var(--submenu-bg-color);
   text-align:center;
   display: inline-block;
}
#nav-modify div a  {
   color:var(--submenu-text-color);
   text-align:center;
   text-decoration:none;
   display: block;

}

#nav-modify div.chosen  {
   color:var(--submenu-text-color-chosen);
   background-color:var(--submenu-bg-color-chosen);
}

#nav-modify div.chosen a {
   color:var(--submenu-text-color-chosen);
}

#nav-modify div:hover   {
   background-color:var(--submenu-bg-color-hover);
   color:var(--submenu-text-color-hover);
   transition:0.2s;
   cursor:pointer;
}

#nav-modify div:hover a  {
   color:var(--submenu-bg-text-hover);
}

.forminvalid::-webkit-input-placeholder { /* WebKit, Blink, Edge */
   background-color:#FBB;
   color:    #00F;
}
.forminvalid:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   background-color:#FBB;
   color:    #00F;
   opacity:  1;
}
.forminvalid::-moz-placeholder { /* Mozilla Firefox 19+ */
   background-color:#FBB;
   color:    #00F;
   opacity:  1;
}
.forminvalid:-ms-input-placeholder { /* Internet Explorer 10-11 */
   background-color:#FBB;
   color:    #00F;
}

/* ========================= MODAL +++++++++++++++++++++++++++++ */