/* code position/order/sequence matters, for media query code */

#id {  /* trick id in edit */
  font-size: 0.8em; 
  border: none; 
  margin-left: -4px;
  margin-right: -4px; 
}

.hide1 {
  display: none; 
  width: 0px;

}

/* for table cell on main table list page, customize default datatables css, update 2026-9-1 */
.dt-body-right {
  padding-right: 5px !important;  /* need !important to overwrite the lib */ 
}

/* increase width bottom footer search boxes: 5. blog number, 6. age, 7. days, 8. blog_id, 9. rank 
   skip a hidden 4 for atc_link
*/
#search5, #search5, #search6, #search7, #search8 {
  padding-right: 0px; 
  margin-right: 0px; 
  margin-left: 0px; 
  width: 130%; 
}

/* the paging */ 
#table_blogs_length {
  width:10%; 
  display: inline-block; 
  white-space: nowrap; 
  margin-right: 30%; 
}

/* the main default search */ 
.dataTables_filter  input {
  margin-left: 3em; 
  width: 70%; 
  margin: auto; 
}
#table_blogs_filter {
  width: 20%; 
  display: inline-block; 
  white-space: nowrap; 
}


/* end of update 2026-9-1


#popup_save_m, #popup_close_m, #popup_stamp_m, #popup_text_top_m, #popup_text_bottom_m, 
  #popup_text_bottom_m1, #popup_search_m {  /* buttons for mobile */
  display:none;
}

#popup_text_top_m {  /* go to top text, at bottom row */ 
  margin-left: -8px; /* somehow it inserted a inline, and increased margin-right! 2025-4-29 */ 
}

#div_bottom_mobile_buttons {
  display: none;
}

/* for pop up edit box */
#edit_area {
  font-size: 12px;    /* can be modified in textarea, pre, well, was before, changed all here, to better easier maintenance */
  font-family: monospace;
  position: absolute;
  top: -0.3em;
  left: 0;
  width: 100%;
  height: 90%;  /* leave 10% to show action buttons */
  /* width: 550px; */
  /* height: 300px; */
  /* border: 5px dotted blue; */
  padding: 1px;
  padding-bottom: 5px;
  /* background-color: cyan; */
  background-color: rgba(240,255,240,1);  /* nice mild light green */
  display: none; 

  /* background: url('images/gold-background.jpg');  */
  
}

textarea {
  /* font-family: inherit;
  font-size: inherit; */   /* will use area 11 px */

  font-family: monospace;
  font-size: 14px; 
}

pre {

  font-size:14px;

  width: 95%;
   
  -moz-tab-size : 2;
    -o-tab-size : 2;
        tab-size : 2;

  /* background: url('images/tricks-logo-gold-animation.gif');  */

}

.edit_cell_label {
  vertical-align: top;
  padding: 2px;
  padding-top: 10px;
  color: blue;
  width: 20px;
  display: inline-block;
}

.input1 {  /* trick ID */
  font-size: 100%;
  margin-right: -0.2em; 
  /* width: 400px; */
}

.input_button {  /* button and file upload */
  font-size:100%;   /* needed otherwise, date become 17 px size, need fix in future 2023-10-1, put 100% to narrow down causes/factors */
  margin: -0.2em; 
  margin-top: -1em; 
  box-shadow: 1px 1px 1px 1px #FFFF00;
}

#ur {  /* for user ids, wanna show a bit if 2nd ids there */
  width:1.8em; 
}

.input_n { /* for 1 digit number input fields, diff level, fun level, quote, html, etc */
  font-size:100%;   /* needed otherwise, date become 17 px size, need fix in future 2023-10-1, put 100% to narrow down causes/factors */
  width: 1em;
  margin-right: -0.2em; 
}

.input_d { /* for date */
  font-size:100%;   /* needed otherwise, date become 17 px size, need fix in future 2023-10-1, put 100% to narrow down causes/factors */
  width: 7.5em;
  margin-right: -0.2em; 
}

/* hide the text input, textarea, give way to great editable div! */
#desc1 {  /* for brief desc */
  /* height: 10%;  */
  /* display: none; */

  height: 2.5em; 
  padding: 0.5em;  /* more padding to look decent as header or title */ 

  width: 100%; 

  background: url('../images/gold-background-2.jpg'); 
  background-size: cover;
  background-repeat: no-repeat;  

  border-color: goldenrod;
  
  color: yellow; 
  text-shadow: 1px 1px #220000;  

  font-weight: bold;
  caret-color: red;

  resize: none;
  overflow:hidden;
  
}

#div_notes {
  height: 100%; 
}

#div_notes_html {
  /* display: none; show all the time, no hurt */ 
  /* height: 70%; */
  display: none;  /* if not html, then don't display bad version without native space break */
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: auto;
  border: 5 solid red; 
  font-size: 14px; 
  border-color: goldenrod;

  background: url('../images/light-gold-back.jpg'); 
  background-size: cover;
  background-repeat: no-repeat;  

}

/* 
#notes_html {  
  margin: auto;
  overflow: auto;
  padding-left:1px; 
  border-color: goldenrod;
  border-right: 1px solid transparent;
  font-size: 5px;  clamp( 0.5rem, 1vw+1rem, 0.5rem); 

} */

.tooltips1 {
  background-color: gold;
  display: none; /* init status, show by js */
  position: fixed;
  padding: 0.5em; 
  margin-top: 0.5em; 
  border-color: goldenrod;
  box-shadow: 0px 0px 3px 3px #FFFF00;
}

.tooltip1, li {  /* set indent */
  margin-left: -1em ;
}

@media screen and (min-width: 800px) {  /* desktop */
  ::placeholder {
    color: gray;
    opacity: 0.4; /* Firefox */
  }
}

@keyframes example {
  from {background-color: goldenrod;}
  to {background-color: yellow;}
}

tr.odd {
  background-color: #f00;
  color: #080;
  text-shadow: 1px 1px #8FD; 
  background-image: linear-gradient( #a020f0,#FFFFF8,#FFFFE8,#FFFFE0, #a020f0); 
  background-image: linear-gradient( #a020f0,#FFFFF8,#FFFFE8,#FFFFE0, #a020f0); 
  background-image: linear-gradient( #faffee,#FFFFF8,#FFFFE8,#FFFFE0, #ddffed); 
}

tr.even {
  /* background-image: linear-gradient( #FFFFFF,#FFFFF8,#FFFFE8,#FFFFE0, #FFFFDD); */
  color: #00D; 
  text-shadow: 1px 1px #EEF; 
}

html, body {
  height: 100vh;
}

#notes {  /* default size for non-html text, editing, both desktop and mobile */
  width: 100%;
  height: 88vh;   /* not only works well, but also keep top title there! */ 
  /* height: 100%;  */
  /* min-height: 80%; */

  field-sizing: content; /* auto adjust height to fit contents! */ 
  min-height: 8em;
  max-height: 90%; 


  padding-left:3px;

  border-color: goldenrod;
  /* background-image: linear-gradient(to right, goldenrod,orange,gold,orange,#EECC00,orange,goldenrod); */
  /* background-image: linear-gradient(130deg, goldenrod,orange,gold,orange,#EECC00,orange,goldenrod); */
  /* background: url('../images/light-gold-back-6.jpg');  */


  background-image: linear-gradient( #ddffff,#FFFFFf,#f8FFff,#FFFFff, #ddffee); 
  background-size: cover;
  background-repeat: no-repeat;  

  color: #000; 
  /* text-shadow: 1px 0px #220 */
  /* background-position: center; */  /* will not shrink or strech, best original image effect, but hard to match */
  /* background-size: contain; */

  /* background-color: red;
  animation-name: example;
  animation-duration: 4s;  
	animation-iteration-count: infinite;
	animation-direction: alternate;   */
  
}

#t1 {  /* for pure /non-html text, editing */
  width: 100%;
  
  min-height: 80%;

  padding-left:3px;

  border-color: goldenrod;

  background-image: linear-gradient( #ddffff,#FFFFFf,#f8FFff,#FFFFff, #ddffee); 
  background-size: cover;
  background-repeat: no-repeat;  

  color: #000; 
  
}

/* media query code for mobile */ 
@media screen and (max-width: 600px) {  /* media query for mobile, 270 to 405 about 130 lines */

  /* the paging */ 
  #table_blogs_length {
    width:10%; 
    display: inline-block; 
    white-space: nowrap; 
    margin-right: 50%; 
  }

  /* the main default search */ 
  .dataTables_filter  input {
    margin-left: 3em; 
    width: 100%; 
    margin: auto; 
  }
  #table_blogs_filter {
    width: 30%; 
    display: inline-block; 
    white-space: nowrap; 
  }



  #edit_area {
    margin-top: 0.5em; 
  }

  #div_bottom_mobile_buttons {
    display: block;
  }

  .input_d { /* for date */
    font-size:100%;   /* needed otherwise, date become 17 px size, need fix in future 2023-10-1, put 100% to narrow down causes/factors */
    width: 5em;
    margin-right: -0.2em; 
  }
  
  #fileToUpload  { /* smaller for mobile */
    width: 8em; 
  }

  .bx-save, .bx-exit, .bx-calendar, .bx-time-five, 
  #popup_text_bottom_m, 
  #popup_search_m, #popup_search_next_m, #popup_search_m1, 
  #popup_linewrap_m, #popup_linewrap_m1 ,
  #popup_text_left_m, #popup_text_right_m,  #popup_text_left_m1, #popup_text_right_m1 {
    font-size: 3em; 
    vertical-align: bottom; 
    margin: 0px; 
  }

  /* add color */ 
  .bx-save {
    color: green; /* default color for both mobile save button, top and bottom tool bar*/
    text-shadow: 1px 1px darkgreen;
  }

  .bx-calendar, .bx-time-five {
    color: orange; /* default color for both mobile save button, top and bottom tool bar*/
    text-shadow: 1px 1px brown;
  }

  /* .bx-arrow-to-left , .bx-arrow-to-right, .bx-subdirectory-left , #popup_text_bottom_m, #popup_text_bottom_m1, #popup_text_top_m    {
    color: lightblue;
    text-shadow: 1px 1px darkblue;
  } */

  .navbtn {
    color: lightblue;
    text-shadow: 1px 1px darkblue;
    font-size: 3em; 
  }

  #popup_text_bottom_m, #popup_text_left_m, #popup_text_right_m,  #popup_text_right_m1 {
    margin-left: -12px;  
  }

  #popup_text_left_m1 {  /* this need diff spacing from top left, wonder why, but just make it work first */ 
    margin-left: 2px;  
  }

  #popup_text_bottom_m1 {
    margin-left: -24px;  
  }

  #popup_linewrap_m, #popup_linewrap_m1 { /* this one got extra space don't know why, so force it anyway for now, before I find out in future if ever */
    margin-left: -18px;  
  }

  .bx-exit {  /* 2 mobile exit / close buttons, add space to separate from other buttons, as this is big action */
    margin-left: 10px; 
    color: cyan; 
    text-shadow: 1px 1px darkblue; 
  }

  #popup_save {
    color: white; 
    background-color: green;
  }

  #notes{  /*mobile max-width: 600px */
   /* font-size: 2vw; */  /* 0.5em and 2vw works well */
   font-size: 1em; 

   /* background: url('../images/light-gold-back-1a.jpg');  */
    /* background: url('../images/light-gold-back-12-m1.jpg'); 
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain; */

   background-color: goldenrod;
   color: #007800; 
   text-shadow: 1px 1px #d8ffd8;

  field-sizing: content; /* auto adjust height to fit contents! */ 
  min-height: 10em;
  max-height: 90%; 

    /* phone height, so don't scroll too much to find action buttons, without phone keyboard pad */ 
    /* height: 500px;  */
 
  }

  html, body, table {
    font-size: 12px; /* 0.5em;  */
  }

  .input_button {  /* file upload and trick ID */
    /* font-size:150%; */
    box-shadow: 1px 1px 1px 1px #FFFF00;
    margin: 1px; 
    font-size: 1.5em; 
  }

  .input1 {  /* category and trick ID in edit */
    /* font-size: 150%; */ 
    margin: 0px;
    padding: 0px;
    /* width: 400px; */
  }
  
  .input_n {
    /* font-size: 150%; */ 
    /* margin-right: 0.2em;  */
    padding: 0; 
    margin: 0; 

  }

  #fileToUpload {  /* file upload */
    /* font-size:150%;  */  /* needed otherwise, date become 17 px size, need fix in future 2023-10-1, put 100% to narrow down causes/factors */
    /* margin-right: 0.2em;  */
    /* box-shadow: 1px 1px 1px 1px #FFFF00; */
    margin-left: -3px; 
    margin-right: -3px;
    font-size: 0.5em; 
    vertical-align: 0.5em; 
  }

  /* hide date created, updated and HTML format for mobile/touch screen */ 
  #dateC, #dateU {  
    display: none; 
  }

  #html_button {
    font-size: 0.6em; 
    margin-left: -5px; 
    margin-right: -1px; 
    vertical-align: 0.3em; 
  }

  #desc1::placeholder, #notes::placeholder {
    color: #FFFFFF;
    opacity: 1; /* Firefox */
    text-shadow: 0px 0px black ;
    font-weight: normal;
  }

}    /* @media screen and (max-width: 600px) for mobile */   /* end pop up edit box */


/* for truncate the columns in the main data table */
.truncate {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* for individual search boxes at the bottom of the table */
.search1 {
  text-align: left;
  /* margin-left: -10px; */
  padding: 2px; 
  width: 100%; 
  font-weight: normal;

}

/* for footer of the table, to add search boxes */
table tfoot th {
  text-align: left;
  padding-left: -20px;
}

/* for underline label for shortcut/accesskey */
form ud {
  text-decoration: underline;
}

/* test wrap 2022-12-24-Sat 06:25:03 */
.text-wrap{
    white-space: nowrap;
}

#title1 > span {
  display: inline-block;
}

#div_user_info {
  padding: 5px; 
/*   
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  margin: auto;
  overflow: auto;
  height: 30%;
  border: solid 5 red; 
  
  background-color: red; 
  display: none; 
   */
}

#addnewtrick{
  border: 2px solid red;
  border-radius: 3px;
  border-inline-start-style: dotted;
  box-shadow: 1px 1px brown;

  /* background-image: linear-gradient(red, yellow); */
  background-image: radial-gradient(yellow, orange, red); 

  font-size:10px; 
  font-family: consola;  
  text-decoration: none;

  margin-top: 0px;
  margin-left: 5px; 
  position: fixed;
  padding:3px; 

  cursor: pointer;
} /* addnewtrick */

a#addnewtrick:hover {
  background-image: radial-gradient(#FFFF44, #FFBB00, #FF4444); 
}

label {
  font-size:11px; 
}

.symbols {
  font-size: 200%;
}

#html_tool_bar {
  display: none; 
  background: #fafafa;  /* make same as the text */
  /* border: 1px solid red;  */

}

.BtnImg {  /* for button image */
  margin-bottom: -10px;
  vertical-align: bottom;
}

.spanbutton {
  opacity: 0.3;
  /* background-color: #888; */
  padding: 100px 0px 10px 0px; 
  margin: 100px 0px 10px 0px; 
  /* margin-right: 0px;  */
  border: 0px ; 

}
.spanbutton:hover {opacity: 1}

.b1 {
  border: 0px; 
  margin: 4px 0px 2px 0px;
}


/* so it will NOT be default vertical bar to 1. not edit, 2.  hard to read , but to click */
td {
  cursor: pointer;
  font-size:12px; 
  font-family:  sans-serif;
}

th {
  font-size: 14px; 
  font-family: sans-serif;
  /* color: coral;
  text-shadow: -1px 0 red, 0 1px yellow, 1px 0 yellow, 0 -1px yellow; */
}

.dataTables_info, .paginate_button, .previous, .disabled {
  font-family: sans-serif;
  font-size: 12px;
}


#subtitle1 {
  font-size: 50% ;
}


#subtitle1 {
  font-size: 50% ;
}