body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.d-hidden {     display:none;   }


.w-100 {width:100%;}
.w-75 {width:75%;}
.w-66 {width:66%;}
.w-50 {width:50%;}
.w-33 {width:33%;}
.w-25 {width:25%;}
.my-auto {margin-top:auto; margin-bottom:auto;}
.mx-auto {margin-left:auto; margin-right:auto;}
.m-auto {margin: auto;}

.my-0{margin-top:0;margin-bottom:0;}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mx-0{margin-right:0;margin-left:0}
.m-0{margin:0}
.ml-0{margin-left:0}
.mr-0{margin-right:0}

.m-d5{margin:.5rem;}
.mb-d5{margin-bottom:.5rem;}
.mt-d5{margin-top:.5rem;}
.mr-d5{margin-right:.5rem;}
.ml-d5{margin-left:.5rem;}
.my-d5 {margin-top:.5rem; margin-bottom:.5rem;}
.mx-d5 {margin-left:.5rem; margin-right:.5rem;}



.m-1{margin:1rem;}
.mb-1{margin-bottom:1rem;}
.mt-1{margin-top:1rem;}
.mr-1{margin-right:1rem;}
.ml-1{margin-left:1rem;}
.my-1 {margin-top:1rem; margin-bottom:1rem;}
.mx-1 {margin-left:1rem; margin-right:1rem;}

.m-2{margin:2rem;}
.mb-2{margin-bottom:2rem;}
.mt-2{margin-top:2rem;}
.mr-2{margin-right:2rem;}
.ml-2{margin-left:2rem;}
.my-2 {margin-top:2rem; margin-bottom:2rem;}
.mx-2 {margin-left:2rem; margin-right:2rem;}

.m-5{margin:5rem;}
.mb-5{margin-bottom:5rem;}
.mt-5{margin-top:5rem;}
.mr-5{margin-right:5rem;}
.ml-5{margin-left:5rem;}
.my-5 {margin-top:5rem; margin-bottom:5rem;}
.mx-5 {margin-left:5rem; margin-right:5rem;}



.p-1{padding:1rem;}
.pb-1{padding-bottom:1rem;}
.pt-1{padding-top:1rem;}
.pr-1{padding-right:1rem;}
.pl-1{padding-left:1rem;}
.py-1 {padding-top:1rem; padding-bottom:1rem;}
.px-1 {padding-left:1rem; padding-right:1rem;}



.regTable {
    width:400px;
    max-width:80vw;
    //border-collapse:collapse;
    //border: 1px solid #4b3c30;
    //background: #beb2a6
		  background: #867d55;
}
.regTable > div + div {
    padding-top:5px;
}
.kv-row {
    display: flex;
    flex-direction: row;
}
.flexy-row {display:flex; flex-direction:row;}
.flexy-col {display:flex; flex-direction:column;}

.flexy-collapse {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@media (max-width: 600px) { //previous 768
			    .flexy-collapse {
				  flex-direction: column;
			      }
			  }

.align-center{ align-items:center}
.justify-end {     justify-content:end;   }
.justify-center {     justify-content:center;   }
.justify-start {     justify-content:start;   }
.kv-center {
    display: flex; justify-content:center; margin:auto
}



.kv-col,.kv-key,.kv-val {
    display: flex;
}
.kv-key {
    justify-content:end;
}
.kv-item {
    width: 100%;
}
.kv-req::after {
    font-weight: bold;
    color: red;
    content: " *";
}

@media only screen and (min-width: 600px) {
    .justify-end-min-600 {     justify-content:end !important;   }
    .justify-center-min-600 {     justify-content:center !important;   }
    .justify-start-min-600{     justify-content:start !important;   }
}

@media only screen and (max-width: 600px) {
    .justify-end-max-600 {     justify-content:end !important;   }
    .justify-center-max-600 {     justify-content:center !important;   }
    .justify-start-max-600{     justify-content:start !important;   }
    
    .kv-key,.kv-val {
	width: 100%;
    }
    .kv-key {
	justify-content:unset;
    }

    .kv-row {
	flex-direction: column;
	align-items: center;
    }
}

.w-100-max-500px {
    width:100%;
    max-width:500px
}
.w-95-max-500px {
    width:95%;
    max-width:500px
}
.w-90-max-500px {
    width:90%;
    max-width:500px
}



.outline-rounded {
    outline-style: double;
    outline-color: black;
    outline-width: thin;
    border-radius: 5px;
}

.outline-red {
    outline-color: red;
}

.theme-background-grey{
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    color:black;
}
.theme-background-grey a {
    color: #42749a;
}

/*
   <span class="share">&lt;</span>
*/
.gear-icon-after::after {
    content: '\2699'; /* Unicode for the gear icon &#9881*/
    dcolor:blue;
    transform: scaleX(1.5);
    font-family: 'Arial', sans-serif; /* Specify a font-family for the icon */
    margin-left: 10px; /* Adjust the margin as needed */
}
.close-icon-after::after {
    content: '×'; /* Unicode character for the "x" */
    font-family: 'Arial', sans-serif; /* Specify a font-family for the icon */
    margin-left: 5px; /* Adjust the margin as needed */
}
.pointer{
    cursor:pointer;
}
.share {
    cursor: pointer;
    font-weight: bold;
    position: relative;
}
.share:before {
    content: ".";
    font-size: 2.2em;
    position: absolute;
    bottom: -2.5px;
    left: -4px;
}
.share:after {
    content: ":";
    font-size: 2em;
    position: absolute;
    bottom: -6px;
    right: -7px;
}
.link-text {
    //color: blue;
    text-decoration: underline;
    cursor: pointer;
}
.scroll-y {
    overflow-y: scroll;
}
.scroll-x {
    overflow-y: scroll;
}





.scroll-container {
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; 
}

.scroll-content {
    display: inline-block;
}

/* Webkit browsers (Chrome, Safari) */
.scroll-container::-webkit-scrollbar {
    width: 12px;
    -webkit-overflow-scrolling: touch; 
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 6px;
}

.scroll-container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 6px;
}
.scroll-container::-webkit-scrollbar-track:hover {
    //background-color: #ffcc99;
    //border-radius: 6px;
}
.scroll-container:hover::-webkit-scrollbar-track {
    //background-color: #ffcc99; /* Change color on hover */
}


.overlay-close-icon {
    position: relative;
    padding-right: 20px; /* Adjust padding to make room for the "x" */
    cursor: pointer;
}

.overlay-close-icon::before {
    content: '×'; /* Unicode character for the "x" */
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 16px; /* Adjust font size as needed */
    color: #FFF; /* Adjust color as needed */
    background:#000;
    border: 2px solid #888; /* Border around the "x" */
    border-radius: 50%; /* Make it circular */
    width: 20px; /* Equal to the font-size */
    height: 20px; /* Equal to the font-size */
    line-height: 20px; /* Ensure the "x" stays centered vertically */
    text-align: center; /* Ensure the "x" stays centered horizontally */
}


/* Add a hover effect */
.overlay-close-icon:hover::before {
    color: #ff0000; /* Change color on hover */
    border-color: #ff0000; /* Change border color on hover */
}

/* Add an invisible overlay */
.overlay-close-icon::after {
    content: ''; /* Empty content */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    background: rgba(0, 0, 0, 0); /* Transparent background */
    z-index: 1; /* Ensure the overlay is on top */
}
/*
      <script>
      document.querySelector('.close-icon::after').addEventListener('click', function() {
      // Handle the click event here
      alert('Close button clicked!');
      });
      </script>

*/  

.truncate {
    white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  
}
.truncate-r{
    white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;
    direction:rtl;
}

.justify-between {
    display:flex;
    justify-content: space-between;
}