/***************************************************************************************************/
 /* Copyright on the content of this file is owned by The Backyards Ltd. All rights reserved. *******/
 /* Please respect the money, knowledge and effort involved in developing this code. ****************/
 /* Copying, reproducing, manipulating or using this code in any way, other than indirectly as a user/ 
 /* of the The Backyards website, requires written permission from The Backyards Ltd. ***************/
 /***************************************************************************************************/

/*************************
*******Typography*********
**************************/

/*------------------ Core HTML Elements ---------------*/
html, body, select, input, div, p, h1, h2, h3, h4, h5 {
  font-family: Arial, Helvetica, sans-serif;  /* use Arial for design - for Release: "Segoe UI", Tahoma, Arial etc */
  color: var(--main-color); 
  font-size: 16px;
  line-height: 1.1;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}   

a { text-decoration-line: none; color: var(--main-note); font-family: Arial, Helvetica, sans-serif; }   
a.w3-button:hover { color: var(--main-color) !important; }
a:disabled { color: dimgray !important; }

h1 {
/*  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px #003300, 0 0 5px #003300; */
  font-family: inherit;
  margin: 0;
  padding: 0;
  font-size: 1.25em;
  text-align: center;
  color: var(--main-color);
}

h2, h3, h4 { 
  color: var(--main-color);
  margin: 0.25em 0;
}

h2 {
  font-size: 1.25em;
  margin-bottom: 0.25em;
}

h3 { font-size: 1.25em; }

h5 { /* Used for modal Headers */
  margin:0.25em;
  color: white;
  font-size: 1em;
  padding-top: 0.25em;
} 

input.w3-border:active, input.w3-border:focus  { outline:none; border: 2px solid var(--main-color) !important; }
input {
   color: var(--main-color);
   border-radius: 0.5em;
   padding: 0.35em 0.25em; 
   background-color: white;
}   
input::placeholder { color: darkgray; }

input[type="checkbox"].ui-disabled { pointer-events: none; background-color: dimgray !important; color: white !important; accent-color: dimgray!important; opacity:0.7; }
input[type="checkbox"]:disabled { background-color: dimgray !important; color: white !important; accent-color: dimgray!important; opacity:0.7;}
input:checked { accent-color: var(--main-color); }
input:disabled {background-color: dimgray!important;color: white !important;accent-color: dimgray!important;opacity:0.7;}
select:disabled, select[disabled] > option { background-color: dimgray !important; color: white !important; opacity:0.7; }
label { /* color: var(--main-note); */ font-size: 85%; }
p { margin: 0; padding: 0.25em 0.25em; }   
select.w3-border:active, select.w3-border:focus  { outline:none; border: 2px solid var(--main-color) !important; color: var(--main-color) !important; }
select {
   padding: 0.1em 0.25em;
   color: var(--main-color);
   background-color: white;
   border-radius: 0.5em;
}   

small { font-size: 75%; }
textarea.w3-border:active, textarea.w3-border:focus  { outline:none; border: 2px solid var(--main-color) !important; }
/*------------------ Core Classes ----------------*/
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
/*  padding: 0 0.25em; */
  background-color: gainsboro;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  line-height: 1.1;
  padding: 0 0.25em;
}

/*------------------ W3 Overrides ----------------*/
.w3 {font-family: unset;}
.w3-button:hover { font-weight: 600; color:var(--main-color) !important; background-color: unset !important; }
/* contemporary look */
/*
.w3-button { padding: 0.5em 0.25em; color:var(--main-color)!important; background-colour: none!important;  border: 1px solid silver!important; }
.w3-round { border-radius: unset!important;  }
.w3-round-large { border-radius: unset!important; }
*/
 /* remove for contemporary */
.w3-button {background-color: var(--main-color);color: var(--main-btn);padding: 0.5em 0.25em;overflow:unset} 
.w3-button:hover { background-color: var(--main-color)!important; color: white !important;} 
.w3-button:active, .w3-button:hover { font-weight: normal; }
.w3-disabled, .w3-btn:disabled, .w3-button:disabled { color: white !important; background-color:dimgray !important; opacity: 0.7 !important; font-weight: normal!important; border: unset!important; } 
.w3-input { padding: 0.25em; }
.w3-modal { padding-top: 4em; z-index: 99; }
.w3-modal-content { max-height: 95%; overflow-y:auto; }
.w3-modal header { background-color: var(--main-color); }
.w3-hover-border-std { border-color: var(--main-color); }
.w3-select {padding: 0.25em 0 !important;}
/*------------------ CUSTOM Classes --------------*/
/*------------------ Generic --------------*/
/* Contemporary look */
/*  remove border radius & background-color
.actionBtn { color: var(--main-note)!important; font-size: 0.9em; padding: 0.5em 0.25em; } 
.actionBtn:hover { color: var(--main-note)!important; } 
*/
/* remove for contemporary */
.actionBtn {/* background-color: var(--main-note)!important; */color:white;font-size: 0.9em;padding: 0.3em 0.25em 0.25em;border-radius: 0.33em;} 
.actionBtn:hover { background-color: var(--main-note)!important; } 
.badInpVal { border: 1px solid red !important; }
.cbSize {transform: scale(1.5, 1.5);}
.closeModal {
  color: #aaa;
  float: right;
  font-size: 1.5em;
  font-weight: bold;
  padding-top:0.2em;
}
.closeModal:hover,
.closeModal:focus {
  text-decoration: none;
  cursor: pointer;
}
.disLink {
   color: gray !important;
   background-color: ghostwhite !important;
   pointer-events: none !important;
}   

.error { color:brown; }
.footer-text {margin: 0.1em 0;font-size: 0.7em !important;}
.fs75 { font-size: 0.75em; }
.fs85 {font-size: 0.85em;}
.helpBtn {
    display: block;
    color: var(--main-note);
    border-radius: 50%;
    border: 1px var(--main-note) solid;
    width: 1.15em;
    height: 1.15em;
    text-align: center;
    margin: 0 auto;
    font-size: 1.15em;
}
/* Required for loader */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader {
   border: 5px solid #f3f3f3;
   -webkit-animation: spin 1s linear infinite;
   animation: spin 1s linear infinite;
   border-top: 5px solid var(--main-color);
   border-radius: 50%;
   width: 4em;
   height: 4em;
   margin: 0 auto;
}
.logoimg { padding:0; }   

.mbrTD { padding:0; }

.modal-div {
 top: 4em;
 margin: 0 auto;
}

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%;
  left: 3em;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  border-radius: 1em;
  max-width:42em;
}
/* Modal Header */
.modal-header {
/*  padding: 0.25em 1em; */
  background-color: var(--main-color);
  color: white;
  opacity: 0.5;
  border-radius: 1em 1em 0 0;
}

.modal-body { padding: 0.5em 0.25em; } /* Modal Content area */
.modal-body p { font-size:0.85em; }
.must { color: brown; }
.note { color: var(--main-note); }   
.pad0 { padding:0; }
.procMsg { font-size: smaller; color: brown; }
.tblFull {width:100%;line-height: 1;}
.trgap { padding-top:0.5em;}


/*------------------ Page/Window Specific Classes--------------*/
/*--- Page: Support ---*/
.supMbr { padding: 0 16px; }
.supList { text-align: center; }
/*------------------ Page/Window Specific Elements -------------*/
/*--- Page: by-main, index??? ---*/
#logging-in { position: relative; top: 5.25em; }

:root {
   --main-color: #102432;
   --main-btn: #d8ff8e;
   --main-bkgrd-color: gainsboro;
   --main-page-color: whitesmoke;
   --main-note: #1f4561;
   --main-alt: #449a4c; 
}

/* revised green to Apr 11
   --main-color: #006633;
   --main-bkgrd-color: gainsboro;
   --main-page-color: whitesmoke;
   --main-note: #609078 /*Was #617C58; */
*/

/* original green
   --main-color: #006400;
   --main-bkgrd-color: gainsboro;
   --main-page-color: ghostwhite;
   --main-note: #669999;
*/

/* Lotus Green + Cactus green 
   --main-color: #004225; 
   --main-bkgrd-color: gainsboro;
   --main-page-color: ghostwhite;
   --main-note: #227442; 
*/

/* teal
   --main-color: #215C5C;
   --main-bkgrd-color: gainsboro;
   --main-page-color: ghostwhite;
   --main-note: #669999;
*/


/* 
Logo 
Backgd:#102432;  
Yellow #d8ff8e;
Green: #449a4c; 
*/