:root
{
  --ttsite: athome;  

  --body-bg-color:      #999999;
  --framebox-bg-color:  #EEEEEE;
  --logobox-bg:         linear-gradient(90deg, #FCE 0%, #F7A 100%);  

/*  
  --linkcolor:          #FF0000;
  --th-bg-color:        #CCFFCC;  
  --tr-hover-bg-color:  #CCFFFF;  
*/                        
/*
  --menu-bg-color:      #DDDDDD;
  --submenu-bg-color:   #D5D5D5;
  --menu-hover-color:   #888888;  
  */
  --framebox-shadow:    1px 1px 2px 1px #99F;
  --submenu-shadow:     0.2em 0.2em 0.2em 0px rgba(0,0,0,0.5);
 
  --corner-radius:      0px;
  --scroll-radius:      2px;
  --framebox-margin:    0px;
}

tr /* supposed to work as a min height thing */
{
  height: 1.2em; 
}


@media only screen 
{ 
tr /* supposed to work as a min height thing */
{
  height: 2.0em; 
}
}

#imagelist
{
  min-height: 3em;
  background-color: #DDDDDD; 
}

#imagelist.is-dragover
{
  min-height: 3em;
  background-color: #CCDDCC; 
}

#fileuploadresults
{
  background-color: #FFFFDD; 
}

input 
{
  border: 1px solid #444;
}

/* https://iamkate.com/code/checkboxes-and-radio-buttons/ */

img.logo
{
 height: 2.6em;
}
.Heading
{
  color: #000;
  
}

/*pannman*/


form.login label, form.login input, form.login select
{
  font-size: 2em;
  min-width: 25ch;
  max-width: 100%;

}

.DayHeadline
{
  font-size:        1.3em;
  font-weight:      bold;
  padding:          0.2em;
  display:          flex;
  flex-direction:   row;
  justify-content:  space-between;
  background-color: #DDDDDD;
}


.NewButton
{
  background-color: #AAFFAA;
  padding:          0.1em 1ch;
  border:           2px solid #00AA00;
  border-radius:    6px;
  box-sizing:       border-box;
  color:            #006600;
}

td div.NewButton
{
  font-size:        0.7em;
  display:          inline-block; 
  position:         absolute;
  border:           2px solid #00AA00;

  top:              0;
  right:            0;
  background-color: #ccc8;
  padding:          0.2em 0.2em 1.8em 1.8em;
  border:           1px solid #AA0000;
  border-radius:    0 0 0 70%;
  box-sizing:       border-box;
  color:            #AA0000;
}
      
.Btn    { 
          border: 2px solid #AAAAAA; 
          border-radius: 6px; 
          padding: 0.1em 1em; 
          margin: 0.2em 0em;     
        }     
              
.Legend
{
  display: inline-block;
  font-size: 1em;
}

/*
.THName
{
  font-size: 1.1em;
  vertical-align: middle;
  font-weight: bold;
}

.THDate
{
  font-size: 1em;
  background-color: #DDDDDD;
  vertical-align: top;
  text-align: left;
  font-weight: bold;
}
*/
  
form.ttform label,
form.ttform div.Lbl
{
  vertical-align: top;
  min-width: 17ch;
  display:inline-block;
  font-weight: bold;
  padding-left: 1ch;  
  box-sizing: border-box;

}       

label.ttform
{
  vertical-align: top;
  min-width: 17ch;
  display:inline-block;
  font-weight: bold;
  padding-left: 1ch;  
  box-sizing: border-box;
}       

div.ttform 
{
  display:inline-block;
}       



form.ttform div
{
  display:inline-block;
}       


.imgbox 
{
  min-width: 4em;
  min-height: 4em;
  max-width: 20em;
  max-height: 20em;
  display: inline-block;  
}
.imgbox img
{
    max-width: 100%;
    max-height: 100%;
    margin: 0.2em;
 /* object-fit: scale-down;*/
}

@media only screen and (max-width: 800px) 
{ 

  form.ttform input[type=text],
  form.ttform textarea,
  form.ttform select,
  {
    width: 97%;

    padding-right: 1ch;  
    box-sizing: border-box;
   
  }
  
  input[type=date]
  {
    max-width: 20ch; 
  }
} 
input[type=file] {
  max-width: 97%;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #CCC;
  opacity: 1; /* Firefox */
}

input[type="file"].custom-file-input
{
  width: 15ch;
  display: none;
}

input[type="file"].custom-file-input::file-selector-button {
  background-color: #FDD;
  width: 100%;
  
  border-color: #FAA;
  border-style: solid;
  border-width: 2px;
  
}



input[type=text],
input[type=number],
input[type=date],
input[type=time],
input[type=tel],
input[type=email],
textarea,
select  
{
  min-height: 1.5em;
  margin-bottom: 0.2em;  
}

@media only screen and (max-width: 800px) 
{ 
  html /*, input, textarea, select */
  {
    font-size: 1em;
  }

  div.ttform
  {
    width: 99%;
  }

  input[type=text],
  input[type=password],
  input[type=number],
  input[type=date],
  input[type=time],
  input[type=tel],
  input[type=email],
  textarea,
  select,
  button  
  {
    width: 99%;

    padding-right: 3ch;  
    box-sizing: border-box;   
    min-height: 2em;
    margin-bottom: 0.2em;
  }
  
  label
  { 
    vertical-align: bottom;
  }
  
}