/*
Theme Name: Twenty Twenty-Three Child
Theme URI: https://diviextended.com/
Author: Elicus Technologies
Author URI: https://elicus.com
Template: twentytwentythree
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/





/*--------------------------------------------------------------
6.0 Forms
------------------------------------------------------KEEP THIS......needed for Medical DB...........

label {
	color: #333;
	display: block;
	font-weight: 800;
	margin-bottom: 0.5em;
}

*/

:root {
  --darkbutton: #556e82;
  --midbutton: #95a1ab ;
  --lightbutton: #b5c0c9;
  
  --hoverbutton: #6d8ea8;
  
  --dark_text:#556e82;
}



fieldset {
	margin-bottom: 1em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	background: #fff;
	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
	border: 1px solid #bbb;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: block;
	padding: 0.7em;
	width: 100%;
	font-size:1em;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #222;
	border-color: #333;
}

select {
	border: 1px solid #bbb;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	height: 3em;
	max-width: 100%;
	font-size:1em;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
	outline: thin dotted #333;
}

input[type="radio"],
input[type="checkbox"] {
	margin-right: 0.5em;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
	font-weight: 400;
}

button,
input[type="button"],
input[type="submit"] {
	background-color: #222;
	border: 0;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1;
	padding: 1em 2em;
	text-shadow: none;
	-webkit-transition: background 0.2s;
	transition: background 0.2s;
}

input + button,
input + input[type="button"],
input + input[type="submit"] {
	padding: 0.75em 2em;
}

button.secondary,
input[type="reset"],
input[type="button"].secondary,
input[type="reset"].secondary,
input[type="submit"].secondary {
	background-color: #ddd;
	color: #222;
}

:not( .mejs-button ) > button:hover,
:not( .mejs-button ) > button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background:var(--hoverbutton);      /*  #767676;  /*/
}

button.secondary:hover,
button.secondary:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="button"].secondary:hover,
input[type="button"].secondary:focus,
input[type="reset"].secondary:hover,
input[type="reset"].secondary:focus,
input[type="submit"].secondary:hover,
input[type="submit"].secondary:focus {
	background: #bbb;
}

/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {
	color: blue;
	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

:-moz-placeholder {
	color: blue;
	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

::-moz-placeholder {
	color: blue;
	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
	opacity: 1;
	/* Since FF19 lowers the opacity of the placeholder by default */
}

:-ms-input-placeholder {
	color: blue;
	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

::placeholder
{
	color:#222 ;
	
}


/*--------------------------------------------------------------
7.0 Formatting
------------------------------------------------------------










/*.              END   OF   IMPORTED ..............................................#########################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################  










.......................*/











/*............BEM  STYLE  for ALL Med Database  GLOBAL ...........*/


#database {
background: #fff;



 }
 



.DBparagraph {
  color: #000;
  font-size:1.15em;
	
}


.db-global__p {
	font-size:1.15em;
}
	

.db-global__h1 {
	font-size:1.7em;
	
}

.db-global__h2 {
	font-size:1.5em;
	
}

.db-global__h3 {
	font-size:1.4em;
	
}

.db-global__h4 {
	font-size:1.3em;
	
}

.db-global__a:link {
	color: #b56718;
}

.db-global__a:visited {
	color: #b56718;
}

.db-global__a:hover {
	color: #b56718;
}

.db-global__a:focus {
	color: #b56718;
}

.db-global__a:active {
	color: #b56718;
}

.db-global__ul {
	list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin-left:20% ; /* Remove margins */
}


.db-global__label {
	font-weight:400;
	margin-bottom:0.3em;
 }


.db-global-color1 {
	color: #000;

}

.db-global-color2 {
	color: #b56718;

}

.db-global-color-red {
	color:red;
}

.db-global-text-cursive {
  font-family: 'Lucida Handwriting','Brush Script MT', cursive;
  text-decoration: underline;
  
}

.DBtextcolor { 	color: #000; }


.DBinput-check-color {
	accent-color: #b56718;
}


.list-select-text-size {
	font-size:1.25em;
}



.textcenter {	text-align:center;  }

.textleft { text-align:left;  }

.textright { text-align:right; }

.uppercase { text-transform: uppercase; }



/*.        big grey buttons for select customer and navigation thro DB   */  

.button2 {
  
  border: none;
  color: white;
  background-color: var(--darkbutton); /* #8c8c8c;  */
  height: 60px ; /*  calc(80px + (70 - 80) * ((100vw - 320px)/(599 - 320)));  */
  width: 100% ;  /* width of buttons not in a container */
  text-align: center;
  text-decoration: none;
  display:inline-block;
  
  /* min-font + (max-font - min-font) * (100% - min-screen-size) / (max-screen - min-screen)    */
  font-size: calc(11px + (17 - 11) * ((100vw - 320px)/(599 - 320)));
  
  cursor: pointer;
  border-radius: 20px; 
  text-shadow: -1px 0 #5c5c5c, 0 1px #5c5c5c, 1px 0 #5c5c5c, 0 -1px #5c5c5c;  
  padding:1%;
 
  }



	

.button2.button-green{
	background-color:#33ab2e ;
}

.button2.button-red{
	background-color:#c70606 ;
}

.button2.button-grey{
	background-color:#e0e0e0 ;
	text-shadow:none;
}

.button2.button-info{
	background-color:#555555 ;
	text-shadow:none;
	
}


.db-link-generator__ul {
	list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin-left:5% ; /* Remove margins */
}




/*...........................Customer Index BEM Block................................*/

.cust-directory__table 
{
	table-layout: fixed;
	width: 100%;
	border-collapse:collapse ;
	border:none ;    /*.......surrounds whole table......*/
	
}

.cust-directory__th
{	
  width:6.15%;
  padding:1%;
  padding-top:3%;
  padding-bottom:3%;
  border:none ;  
  background-image: linear-gradient(var(--darkbutton),var(--lightbutton));
  
}

	

.cust-directory__td
{	
  padding: 4px; 
  border:none ;
  
}


.cust-directory__th-text-size {
  font-weight:bold ;
  font-size: calc(17px + (23 - 17) * ((100vw - 320px)/(599 - 320)));
}



.cust-directoy__data_bg-color { background-color:#f5f5f5; }

.cust-directory__text_white {  color: white;  }

.cust-directory__text_grey {  color:var(--darkbutton)  }

.cust-directory__text_center { text-align:center;  }

 


.cust-directory__link {
	
	width:100%;
	/*text-underline-position: inherit;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: calc(3px + (8 - 3) * ((100vw - 320px)/(599 - 320)));
	text-decoration-color: #b1b1b1;  */
	color: white;
	font-size: calc(15px + (20 - 15) * ((100vw - 320px)/(599 - 320)));	
	
}

.cust-directory__link:hover{
	
	
	width:100%;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: calc(3px + (6 - 3) * ((100vw - 320px)/(599 - 320)));
	text-decoration-color: var(--lightbutton);
	color: white;
	font-size: calc(15px + (20 - 15) * ((100vw - 320px)/(599 - 320)));
    margin-bottom: 10px;
}


.cust-directory__link_bgcolor-grey {
	
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: calc(3px + (6 - 3) * ((100vw - 320px)/(599 - 320)));
	text-decoration-color: #f5f5f5;
	
}

.cust-directory__link_bgcolor-grey:hover {
	
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: calc(3px + (6 - 3) * ((100vw - 320px)/(599 - 320)));
	text-decoration-color: #f5f5f5;
	
}




.cust-directory__button {
  width:100%;	
  border: none;
  
  padding:4%;
  text-decoration: none;
  font-family: 'Montserrat','Noto Sans';
  font-weight: 400;
  display: inline-block;
  font-size: calc(17px + (23 - 17) * ((100vw - 320px)/(599 - 320))); 
  
  cursor: pointer;
  
  
  }
  
.cust-directory__button:hover {
  display: inline-block;
  border: none;
  color: white;
  padding:4% ;
  text-decoration: none;
  font-family: 'Montserrat','Noto Sans';
  font-weight: 400;
  
  font-size: calc(17px + (23 - 17) * ((100vw - 320px)/(599 - 320)));
  cursor: pointer;
  
  
  }



.cust-directory__iconsize{
	font-size: calc(22px + (26 - 22) * ((100vw - 320px)/(599 - 320)));	
	
	
}


.cust-directory__whatsapp {
	display:block;
	width:100%;
	color:#00cc00;
	transform:rotateY(0deg) rotate(-70deg);
	text-align:center;
		
}

.cust-directory__comms {
	display:block;
	width:100%;
	color:var(--darkbutton);
	text-align:center;	
}


/*.......................END Block cust-directory...................................................*/



/*...........................BEM  Block 3 button menu  .............................................*/

.menu-3-button__column {
    float: left;
    }

.menu-3-button__row {   }  
	
	
.menu-3-button__col3 {
    width: 30.5%;
    }
	
	
	
.menu-3-button__row:after {
    content: "";
    display: table;
    clear: both;
	
    }
	
	
.menu-3-button__spacer {
    width: 2%;
    }

.menu-3-button__button {
  
  border: none;
  color: white;
  background-color: var(--hoverbutton);
  height: 4em;
  width: 100% ;  /* width of buttons not in a container */
  text-align: center;
  text-decoration: none;
  display:inline-block;
  
  /* min-font + (max-font - min-font) * (100% - min-screen-size) / (max-screen - min-screen)    */
  font-size: calc(11px + (17 - 11) * ((100vw - 320px)/(599 - 320)));
  
  cursor: pointer;
  border-radius: 10px; 
  text-shadow: -1px 0 #5c5c5c, 0 1px #5c5c5c, 1px 0 #5c5c5c, 0 -1px #5c5c5c;  
  padding:1%;
 
  }


/*.......................END........BEM  Block 3 button menu  .............................................*/




/*......................BEM.............Page Header Table Block .........................................*/




.headertable__table {
	table-layout: fixed;
	width: 100%;
	border:4px solid var(--midbutton);/*#bac9cf;  /*/  
	}
	

.headertable__td-th {
	
	background-color:#f5f5f5; 
	border:3px solid #f5f5f5;
	padding:2% ;
	vertical-align:center ;
	   
	
}

.headertable__h1{
	/* font-size:1.7em;   */
	font-size: calc(22px + (30 - 22) * ((100vw - 320px)/(599 - 320)));
	color: var(--dark_text);      /*#828282;/*/
	margin: auto;
	
}

.headertable__h2{
	font-size: calc(16px + (22 - 16) * ((100vw - 320px)/(599 - 320)));
	color: var(--dark_text);      /*#828282;/*/
	margin: auto;
}

.headertable__bg-color{ background-color: #f5f5f5; } 

/*    END ............   Table.....   Form header box     */ 




/*......................BEM.............Select Customer Block .........................................*/

.select-customer__row { 
	padding-top:20px ;
	padding-bottom:20px ;
	
}

.select-customer__row-spacer { 
	padding:10px ;
		
}



.select-customer__row_header-padding {
	padding-top:0 ;
	padding-bottom:8px ;
	
	}

.select-customer__row_bg-color { background-color:#ededed ;}

.select-customer__text-color { color:var(--darktext);}

.select-customer__section-heading-padding { padding-left:20px;}


/*    END ............   Select Customer Block   ...........     */ 



/*......................BEM.............Treatment selector block .........................................*/

.treatment-selector__row { 
  
  background-color:#fff; 
  }


.treatment-selector__list-padding {
	
	padding-left:20%;
}

.treatment-selector__ul {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin-left:30% ; /* Remove margins */
  
}
 
.treatment-selector__label {
	color:red;
}




/*..........END    .............Treatment selector block .....................*/



/*......................BEM.............Medical Form block .........................................*/

.medical-form__p
{
	font-size:1em;
	
}


.medical-form__heading {
  color: #b56718;
  font-weight:500 ;
  
}

.medical-form__label
{
	font-size:1.25em;
	color:#000 ;
	padding-bottom:0px;
	font-weight:400;
	margin-bottom: 0.5em;
	
}

.medical-form__yes-no-text
{
	font-size:1.3em;
	color:#000;
	padding-top:0px;
	font-weight:500;
	
}

.medical-form__row-questions
{
	padding:15px;
	
	background-color:#fff;
	border-top: 1px dashed #b56718;
	
	
}



.medical-form__input-check-color {
	accent-color: #b56718;
}


/*...............END.............Medical Form block ...............................*/



/*......................BEM.............Medical Form Review  block .........................................*/


.med-form-review__heading {
  color: #b56718;
  font-weight:500 ;
  
}

.med-form-review__row { 

	border:4px solid #bac9cf;
    background-color:#f5f5f5;  
  }

.med-form-review__list-padding {
	
	padding-left:25%;
}

.med-form-review__text-color-appl-treats
{
	color:#828282 ;
}



.med-form-review__table {
	table-layout: fixed;
	width: 100%;
	font-weight:300;
	border: 3px solid #ededed;
	border-collapse: collapse;
	
}




.med-form-review__td {
  border: 1px solid #ddd;
  padding:15px 20px 15px 20px;
  /* min-font + (max-font - min-font) * (100% - min-screen-size) / (max-screen - min-screen)    
  font-size: calc(12px + (19 - 12) * ((100vw - 320px)/(599 - 320)));*/
  color:black;
}



.med-form-review__th {
  border: 1px solid #bac9cf;
  padding:15px 20px 15px 20px;
  /*background-color: #04AA6D;   */
  color: white;
  /* min-font + (max-font - min-font) * (100% - min-screen-size) / (max-screen - min-screen)    
  font-size: calc(12px + (19 - 12) * ((100vw - 320px)/(599 - 320)));*/
  
}

.med-form-review__col-left{
  width: 60%;
  background-color: #04AA6D;
}

.med-form-review__col-right {
  width: 40%;
  background-color: #04AA6D;
}




.med-form-review tr:nth-child(even){background-color: #f2f2f2;}
.med-form-review tr:nth-child(odd){background-color: white}


.med-form-review__text-red { color: red; font-weight:500; }




.med-form-review__th-background-image { background-image:         linear-gradient(var(--darkbutton), var(--lightbutton));   /*  #8c8c8c, #bdbdbd) */  }


.med-form-review__text-highlight-agecheck {
	text-align: center;
	background-color: red;
	color:white;
}


.med-form-review__text-signature {
  font-family: 'Lucida Handwriting','Brush Script MT', cursive;
  text-decoration: underline;
  
}




/*...........END............Medical Form Review  block ...................................*/








/*.............. Table Development 3 ...................  



table.formtable1 {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

.formtable1 thead th:nth-child(1) {
  width: 30%;
}

.formtable1 thead th:nth-child(2) {
  width: 20%;
}

.formtable1 thead th:nth-child(3) {
  width: 25%;
}

.formtable1 thead th:nth-child(4) {
  width: 25%;
}

.formtable1 th, td {
  padding: 20px;
}

.formtable1 tbody td, th{
  text-align: center;
}


.formtable1 thead th, tfoot th {
  font-family: 'Rock Salt', cursive;
}

.formtable1 tfoot th {
  text-align: right;
}


.formtable1 thead, tfoot {
  
  color: red;
  text-shadow: 1px 1px 1px black;
}


.formtable1 thead th, tfoot th, tfoot td {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
  border: 3px solid purple;
}

.formtable1 tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

.formtable1 tbody tr:nth-child(even) {
  background-color: #e495e4;
}


table.formtable1 {
  background-color: #ff33cc;
  
}


.formtable1 caption {
  font-family: 'Rock Salt', cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}


/*..............END   Table Development 3 ...................  */









/*.............. Customer Directory Table  ...................  */




/*    Customer name select button <<<<<<<<<<<<<<<<<<<<<<<<<< DELETE NEXT 

.button3 {
  width:100%;	
  border: none;
  color: #636363;
  padding:4%;
  text-decoration: none;
  font-family: 'Montserrat','Noto Sans';
  font-weight: 400;
  display: inline-block;
  font-size: calc(17px + (23 - 17) * ((100vw - 320px)/(599 - 320))); 
  
  cursor: pointer;
  
  
  }
  
.button3:hover {
  display: inline-block;
  border: none;
  color: white;
  padding:4% ;
  text-decoration: none;
  font-family: 'Montserrat','Noto Sans';
  font-weight: 400;
  
  font-size: calc(17px + (23 - 17) * ((100vw - 320px)/(599 - 320)));
  cursor: pointer;
  
  
  }
  
 

 
/*..............END   Customer Directory Table ...................  */


/*....................................BEM...............Div Tables................................*/


.grid-container-header__text-size { font-size:calc(13px + (19 - 13) * ((100vw - 320px)/(599 - 320))); }
.grid-container-data__text-size { font-size:calc(12px + (17 - 12) * ((100vw - 320px)/(599 - 320))); }



.buttondiv {
		width:100%;
		height:50px;
		text-align:center;
		font-weight:bold;
		text-decoration:none;
		color:white;
		
		border-radius:10px;
		justify-content: center;
		align-items: center;
		text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		background-color:var(--darkbutton);      /*#8c8c8c;  /*/
		padding:1px;
	}
	
	
	.buttondiv:hover {
		width:100%;
		height:50px;
		text-align:center;
		font-weight:bold;
		text-decoration:none;
		color:white;
		
		margin:auto;
		border-radius:10px;
		justify-content: center;
		align-items: center;
		text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		
	}

/*......................1 column 100% per column ...........................*/

.grid-container-1-col-100pc__header {
  display: grid;
  grid-template-columns: 100%;
  gap: 0px;
  padding: 0px;
}

.grid-container-1-col-100pc__header > div {
  background-image: linear-gradient(#bd853a, #edb974);
  border: 1px solid black;
  text-align: center;
  color:white;
  font-weight:bold ;
  
}


.grid-container-1-col-100pc__data {
  display: grid;
  grid-template-columns: 100%;
  gap: 0px;
  padding: 0px;
}

.grid-container-1-col-100pc__data > div {
  border: 1px solid black;
  color:black;
  font-weight:normal ;
  background-color: #f5f5f5;
  padding:5%;
}

.grid-container-1-col-100pc__spacer > div {
  border: none;
  color:black;
  font-weight:normal ;
  background-color: #ffffff;
  padding:1%;
}


/*........END.....1 column 100% per column ...........................*/


/*......................3 column 33% per column ...........................*/

.grid-container-3-col-33pc__header {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  gap: 0px;
  padding: 0px;
}

.grid-container-3-col-33pc__header > div {
  background-image: linear-gradient(#bd853a, #edb974);
  border: 1px solid black;
  text-align: center;
  color:white;
  font-weight:bold ;
  
}


.grid-container-3-col-33pc__data {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  gap: 0px;
  padding: 0px;
}

.grid-container-3-col-33pc__data > div {
  border: 1px solid black;
  color:black;
  font-weight:normal ;
  background-color: #f5f5f5;
  padding:10%;
}


/*............END..........3 column 33% per column ...........................*/

/*......................2 column 50% per column ...........................*/

.grid-container-2-col-50pc__header {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 0px;
  padding: 0px;
}

.grid-container-2-col-50pc__header > div {
  background-image: linear-gradient(#bd853a, #edb974);
  border: 1px solid black;
  text-align: center;
  color:white;
  font-weight:bold ;
  
}


.grid-container-2-col-50pc__data {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 0px;
  padding: 0px;
  align-items: center;
  justify-items: center;
  
}

.grid-container-2-col-50pc__data > div {
  border: 1px solid black;
  color:black;
  text-align: center;
  font-weight:normal ;
  background-color: #f5f5f5;
  justify-self: stretch;
  align-self: stretch;
  padding:10%;
  

}



/*............END..........2 column 50% per column...........................*/

/*......................2 column 35...65% per column ...........................*/

.grid-container-2-col-35-65pc__header {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 0px;
  padding: 0px;
}

.grid-container-2-col-35-65pc__header > div {
  background-image: linear-gradient(#bd853a, #edb974);
  border: 1px solid black;
  text-align: center;
  color:white;
  font-weight:bold ;
  justify-self: stretch;
  align-self: stretch;

  
}


.grid-container-2-col-35-65pc__data {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 0px;
  padding: 0px;
}

.grid-container-2-col-35-65pc__data > div {
  border: 1px solid black;
  color:black;
  font-weight:normal ;
  background-color: #f5f5f5;
  justify-self: stretch;
  align-self: stretch;
  padding:10px;
}



/*............END..........2 column 50% per column...........................*/


/*......................4 column 16_33_33_16 per column ...........................*/

.grid-container-4-col-16-33-33-16-pc__header {
  display: grid;
  grid-template-columns: 16.5% 33.3% 33.3% 16.5%;
  gap: 0px;
  padding: 0px;
}

.grid-container-4-col-16-33-33-16-pc__header > div {
  background-image: linear-gradient(#bd853a, #edb974);
  border: 1px solid black;
  text-align: center;
  color:white;
  font-weight:bold ;
  
}


.grid-container-4-col-16-33-33-16-pc__data {
  display: grid;
  grid-template-columns: 16.5% 33.3% 33.3% 16.5%;
  gap: 0px;
  padding: 0px;
  align-items: center;
  justify-items: center;
}

.grid-container-4-col-16-33-33-16-pc__data > div {
  border: 1px solid black;
  color:black;
  text-align: center;
  font-weight:normal ;
  background-color: #f5f5f5;
  
  justify-self: stretch;
  align-self: stretch;
  padding:10px;
  
}


/*............END..........4 column 16_33_33_16 per column...........................*/



/*......................4 column 25_25_25_25 per column ...........................*/

.grid-container-4-col-25-25-25-25-pc__header {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  gap: 0px;
  padding: 0px;
}

.grid-container-4-col-25-25-25-25-pc__header > div {
  background-image: linear-gradient(#bd853a, #edb974);
  border: 1px solid black;
  text-align: center;
  color:white;
  font-weight:bold ;
  
}


.grid-container-4-col-25-25-25-25-pc__data {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  gap: 0px;
  padding: 0px;
  align-items: center;
  justify-items: center;
}

.grid-container-4-col-25-25-25-25-pc__data > div {
  border: 1px solid black;
  color:black;
  text-align: center;
  font-weight:normal ;
  background-color: #f5f5f5;
  
  justify-self: stretch;
  align-self: stretch;
  padding:10px;
  
}


/*............END..........4 column 16_33_33_16 per column...........................*/





/*......................8 column 8x__12.5pc per column ...........................*/

.grid-container-8-col-12-5-pc__header {
  display: grid;
  grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% ;
  gap: 0px;
  padding: 0px;
}

.grid-container-8-col-12-5-pc__header > div {
  background-image: linear-gradient(#bd853a, #edb974);
  border: 1px solid black;
  text-align: center;
  color:white;
  font-weight:bold ;
  
}


.grid-container-8-col-12-5-pc__data {
  display: grid;
  grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% ;
  gap: 0px;
  padding: 0px;
  align-items: center;
  justify-items: center;
}

.grid-container-8-col-12-5-pc__data > div {
  border: 1px solid black;
  color:black;
  text-align: center;
  font-weight:normal ;
  background-color: #f5f5f5;
  
  justify-self: stretch;
  align-self: stretch;
  padding:10px;
  
}


/*............END..........4 column 16_33_33_16 per column...........................*/













/*......................Link Generator Grid ...........................*/

.grid-container {
  display: grid;
  width:88%;
  gap: 2px;
  background-color: #fff;
  padding: 2px;
  border:2px solid #8c8c8c;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.99);
  text-align: center;
  padding: 20px;
}

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.item2 {
  background-color:#5efc03;
  color:white;
  border-radius:20px;
  border:2px solid #fff;
}

.item3 {
  background-color:#03a1fc;
  color:white;
  border-radius:20px;
  border:2px solid #fff;
}


.item4 {
  grid-column: 1 / span 2;
  grid-row: 3;
}

.item5 {
  grid-column: 1 / span 2;
  grid-row: 4;
}



/*......................END ........Link Generator Grid ...........................*/





@media screen and (max-width: 1028px) and (min-width: 600px)     /*    Ipad Mini 2   */
{

#database { 

background: #fff;
margin-left: 10%;
margin-right: 10%
}

.button2 { font-size: 1em; }
.menu-3-button__button { font-size: 1em; }
.cust-directory__link {font-size: 1.3em; }
.cust-directory__link:hover {font-size: 1.3em; }
.cust-directory__button { font-size: 1.3em; }
.cust-directory__button:hover {font-size: 1.3em; }
.cust-directory__iconsize{ font-size: 1.75em;  }
.cust-directory__th-text-size { font-size: 1.5em; }
.headertable__h1{ font-size: 2em; }
.headertable__h2{ font-size: 2em; }

}  





@media screen and (min-width: 1029px)     /*    Ipad Mini 2   */
{

#database {
background: #fff;
margin-left: 20%;
margin-right: 20%
}

.button2 {font-size: 1em; }
.menu-3-button__button { font-size: 1em; }
.cust-directory__link {font-size: 1.3em; }
.cust-directory__link:hover {font-size: 1.3em; }
.cust-directory__button { font-size: 1.3em; }
.cust-directory__button:hover {font-size: 1.3em; }
.cust-directory__iconsize{ font-size: 2em;  }
.cust-directory__th-text-size { font-size: 1.5em; }
.headertable__h1{ font-size: 2em; }
.headertable__h2{ font-size: 2em; }


}  












  


}   /*  ........................ end work laptop   ..............*/