<?php  
header("Content-type: text/css; charset: UTF-8");  
require_once('config.php');
require_once('ElemColor.inc');
$dbh = db_connect(); 

function bgcolors($pre,$index)
{ 
  global $dbh;
  if(empty($pre)  ) $pre   = 'LT';
  if(empty($index)) $index = 0;
  $colors = $dbh->getAssoc('icName','SELECT icName,icColor FROM interface_color');
  require_once('ElemColor.inc');
  $elemcolors = new ElemColor($colors[$pre]);
  return $elemcolors->get_color($index);
}
function bg($pre,$index)
{
  echo 'background-color: '.bgcolors($pre,$index).';';
}
function bgcolor($pre,$index)
{
  echo ''.bgcolors($pre,$index).'';
}

?>
html {
  box-sizing: border-box;
  font-size: 100%; 
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  /* 2. Layout Width */
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;

  font-size: clamp(1rem, 4.5vw, 1.125rem); 
  line-height: 1.6;
  font-family: system-ui, -apple-system, sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


body      {}
body      {font-family: arial,sans-serif; }
body      { background-color: #154060;}
div       { box-sizing: border-box; }
a         {text-decoration:none; color:black;}
a:link    { color: black; }
a:visited { color: black; }
a:hover   { color: #222;}
a:active  { color: black; }
input     { padding: 0px 2px; border: 2px solid black;  border-radius: 0.3em;}
textarea  { padding: 0px 2px; border: 1px solid black; font-family: arial, sans-serif;} 
select    { padding: 0px 2px; border: 1px solid black; background-color: none;}
option    { padding: 0px 2px;}
optgroup  { border: 1px solid black;}

#overlay, #overlay2, #overlay3, #overlay4 { 
 visibility: visible; 
 position: absolute; 
 z-index: 100; 
 width: 100%; 
 text-align: center; vertical-align: top; 
 color: black; 
 //background-image:  url('/admin/images/transgrid.gif'); 
 background-color: rgb(0 0 0 / .3);
}
.error_msg_box{
 margin-top: 1em;
 min-width: 20em; 
 max-height: 40em; 
 overflow-y:auto;
 border: 1px solid silver;
 border-radius: .5em;
 background-color: #ffb872;
 padding: 1em;
 text-align: left;
 vertical-align: top;
 font-weight: normal;
 color: black;
 font-size: 1.4em;
}

.warn_red{ color: #E00;}
.caution_yellow{ color: #F90;}
.good_green{ color: #0B0; }
.gen_con{
  border: 1px solid black;
  padding: 0.3em;
  margin: 0.3em;
  border-radius: 0.3em;
  box-sizing: border-box;
  background-color: white;
}
.light-gen-con{
 background-color: #f6f1e5 !important;
 border: 1px solid silver;
 border-radius: 0.5em;
 box-sizing: border-box;
}

.rounded_wrapper {
padding: 0.3em;
margin: 0.3em;;
border: 1px solid black;
border-radius: 0.3em;
background-color: white;
}


.tblc_title{display: table-cell; font-weight: bold; text-align: left; padding: 0em 0.5em 0em 0em; vertical-align: top; color: #555; white-space: nowrap;}
.tblc_value{display: table-cell; font-weight: normal; text-align: left; padding: 0em 0.3em; white-space: nowrap; vertical-align: top;}


#content
{
 min-height: 100dvh; 
 box-sizing: border-box;
 background-color: white;
}
#topnav {
 width: 100%;
 height: 4dvh;
 max-height: 4dvh;
 min-height: 2em;
 margin: auto;
 padding: 0.2em 0em;
 text-align: right;
 border-bottom: 1px solid black;
 background-color: #154060;
 box-sizing: border-box; 
 color: white;
 a{
  color: white; 
  font-weight:normal;
  padding:0px 10px;
 }
 a:hover {color:#999;}
}
#midnav{
width: 100%; 
margin: auto; 
padding: 0em 1em; 
background-color: white; 
height: 12dvh;
max-height: 12dvh; 
min-height: 8em;
box-sizing: border-box; 
border-bottom: 1px solid black;     
border-radius: 0 0 0.3em 0.3em; margin-bottom: 0.2em; 
}
#main_wrapper{
 width: 100cqw;
 max-width: 100cqw;
 height: 100cqw;
 max-height: 100cqh;
 overflow: auto;
 box-sizing: border-box;
 align-items: stretch;
}
#main{ 
 flex-grow: 1;
 text-align: center;
 vertical-align: top;
 min-height: 100cqh;
 height: 200em;
 //max-width: 1200px;
 <?php bg('MD',8); ?>
 place-content: start center;
 box-sizing: border-box; 
 padding: 0.2em;
}

.page_title{ 
 <?php bg('LT',1); ?>
 display: flex; 
 align-items: center; 
 margin-bottom: 0.5em;
 padding-left: 1em;
 text-align: left; 
 font-weight: bold; 
 font-size: 1.3em;
 border: 1px solid #555;
}

.sbox{
 border: 1px solid #555;
 border-radius: .3em;
 margin: .5em auto;
 padding: 2px;
 width: 94%;
 background-color: white;
 .sbtitle { color: black; font-weight: bold; margin: auto; margin-bottom: 1em; padding-left: 0.2em;}
}

.flextable{
 display: flex; 
 flex-flow: row wrap;
 font-size: 1em;
 font-weight: normal;
 width: 100%;
 row-gap: 0.2em;
}

.flextitle{
 flex-grow: 1;
 flex-shrink: 1;
 flex-basis: auto;
 min-width: min-content;
 text-align: left;
 white-space: nowrap;
 font-weight: bold;
 vertical-align: top;
 text-align: left;
 color: #555;
}

.flexvalue{
 flex-grow: 1;
 flex-shrink: 1;
 flex-basis: auto;
 min-width: min-content;
 text-align: left;
 white-space: nowrap;
 font-weight: normal;
 vertical-align: top;
 text-align: left;
 color: #555;
#border: 1px solid blue;
}


.form_table{ 
 font-size: 1em; 
 font-weight: normal; 
 width: 100%; 
}
.form_table .fttitle{
  font-weight: bold;
  text-align: left;
  padding-right: 1em;
  color: #555;
  border: 0px;
  width: 1%;
  min-width: 2em;
  white-space: nowrap;
  vertical-align: top; 
}
.form_table .value{ font-size: inherit; font-weight: normal; text-align: left; white-space: nowrap; vertical-align: top; padding: 0.3em 0em; padding-right: 0.3em;}
.form_table .label{ font-size: 1.4em;   font-weight: bold;   color: #555;         text-align: left; margin-bottom: 5px;}
.form_table .header{ 
  font-weight: bold;
  vertical-align: top;
  text-align: left;
  padding-right: 0.5em;
  color: black;
  border: 0px;
  width: 1%;
  min-width: 5em;
  white-space: nowrap;
  vertical-align: top;
  background: #5FA8D3;
}


.list_table{ 
 background-color: white; 
 margin: auto; 
 table-layout: fixed  !important; 
    width: 100%;
    max-width: 100%;
    table-layout: fixed; /* Prevents content from pushing width */
    word-wrap: break-word; /* Forces long strings to break */
}     
.list_table tr{background-color: white;}
.list_table tr:hover{ background-color: #FE9; }
/* .list_table tr:nth-child(odd) { background-color: #CAE9FF; } */
.list_table tr:nth-child(odd) {  <?php bg('MD',10); ?> }
.list_table tr:nth-child(odd):hover{ background-color: #FE9; }
.list_table .header
{
 color:      black;
 font-weight: bold;
 padding:    .25em .75em;
 <?php bg('LT',4); ?>
 white-space: nowrap;
}
.list_table .cell
{
 #border: 1px solid silver;
 color: black;
 padding: 0.3em 0.5em;
 vertical-align: top;
 max-width: 30em;
 text-align: left;
}

.list_table td {
    word-wrap: break-word !important; 
    overflow-wrap: break-word !important;
    overflow: hidden !important; 
}

.list_table .lttitle{
  font-weight: bold;
  vertical-align: top; text-align: left;
  color: #555;
  width: 1%;
  padding-right: 2em;
  padding-left: 2em;
  white-space: nowrap;
  vertical-align: top;
}

.search_form_horiz_box{ 
 <?php bg('LT',4); ?>
 border: 1px solid silver; 
 border-radius: 0.3em; 
 display: flex;
 flex-flow: row;
 justify-content: center;
 align-items: center;
 gap: 0.3em;
 max-width: 98%;
}
.search_form_horizontal{
 display: flex;
 flex-flow: row;
 justify-content: flex-start; 
 align-items: center;
 gap: 0.3em;
}
.search_form_horizontal input  {max-width: 8em !important; box-sizing: border-box;} 
.search_form_horizontal select { max-width: 10em !important; box-sizing: border-box;}
.search_form_horizontal_title{ 
 font-weight: bold; 
 text-align: left; 
 font-size: 0.8em; 
}


.search_form_vertical{
 display: flex;
 flex-flow: column nowrap;
 justify-content: flex-start;
 align-items: flex-start;
 gap: 0.2em;
}
.search_form_vertical input  { width: 10em; max-width: 10em !important; box-sizing: border-box;}
.search_form_vertical select { width: 10em; max-width: 10em !important; box-sizing: border-box;}
.search_form_vertical_title{
 font-weight: bold;
 text-align: left;
}


/* Used by Search.inc search_field() to generate automatically styled search fields for forms.  Not used yet */
.search_form_text_input{
 width: 3em;
}
.search_form_date_input{
 width: 6em;
}
.search_form_select_input{
 width: 6em;
}


#page_controls{ font-size: 1em; font-weight: bold;}

.pagebutton {
 font-size: 1.1em;
 font-weight: bold;
 margin: 0.25em auto;
 padding: 0.5em 1em;
 width: 80%;
 color: black;
 border: 1px solid #black;
 border-radius: .3em;
}

.smallbutton {
 font-size: 0.9em;
 font-weight: bold;
 margin:      0.1em 0.3em;
 padding:     0em 0.2em;
 color:       black;
 border: 1px solid #black;
 border-radius: .2em;
}

.bigbutton {
 font-size: 1.2em;
 font-weight: bold;
 margin:      0.5em 1em;
 padding:     0.5em;
 color:       black;
 border: 1px solid #black;
 border-radius: 0.6em;
 background-color: white;
}
.form_button {
 font-size: 1em;
 font-weight: 500;
 margin:      .2em auto;
 padding:     .1em .2em;
 color:       black;
 border: 1px solid #222;
 border-radius: .2em;
 line-height: 1.2em;
 background-color: #EEE;
}
.form_button:disabled{ color: silver; background-color: rgba(0, 0, 0, 0.5);}
.one_button {
 font-weight: normal; 
 width: 1rem; 
 height: 1rem; 
 padding: 0;  
 display: flex; 
 justify-contents: center; 
 align-items: center; 
 margin: .2em auto;
 border: 1px solid #black;
 border-radius: .3em;
 line-height: 1.0em;
}
.button_close_small{
 font-size: 0.8em; 
 font-weight: bold; 
 color: #555; 
 border: 1px solid #555; 
 border-radius: 0.2em; 
 padding: 0em 0.2em;
}
.button_upper_right_small{
 position: relative; 
 float: right; 
 top: -1.1em; 
 left: 1em;
}
.fcfieldpanel{
 display:none; 
 position:absolute; 
 padding: 1em; 
 border: 1px solid black; 
 border-radius: .5em; 
 background-color: white;
 max-width: 100em;
 max-height: 20em;
 overflow: auto;
}
/*
.main_box_wrap{
 position: absolute;
 width: 1em;
 top: 0px;
 left: 50%;
}
*/


.pop_box{
 position: absolute;
 top: 10em;
 margin: auto; margin-top: 50px;
 padding: 1em; 
 clear: both;
 width: min-content;
 min-width: 20em;
 max-width: 96vw;
 background-color: #FFF;
 border: 1px solid black;
 border-radius: .5em;
 box-shadow: -5px 25px 50px -8px rgb(0,0,0,0.25);
}

.main_box{
 position: absolute;
 top: 10em;
 margin: auto; margin-top: 50px;
 padding: 1em; //0.1em 0.5em;
 clear: both;
 width: min-content;
 min-width: 30em;
 max-width: 96vw;
 background-color: #FFF;
 border: 1px solid black;
 border-radius: .5em;
 box-shadow: -5px 25px 50px -8px rgb(0,0,0,0.25);
 .mbcontent{ clear: both; vertical-align: top; min-height: 5em; }
 table{ margin: auto; }
 .title{
   margin: auto;
   padding: .1em .3em;
   text-align: left;
   font-size: 1.2em;
   font-weight: bold;
   color: black;
 }
 .subtitle{
   margin: auto;
   padding: .1em .3em;
   text-align: left;
   font-size: 1em;
   font-weight: bold;
   color: black;
 }
}


.search_field_result{
 margin: 0px; 
 padding: 0.2em; 
 background-color: white;
 border-left: 1px solid silver;
 border-right: 1px solid silver;
}
.search_field_result:hover{
 background-color: #FFC;
}

.field_changes_button{
  min-width: 1em; 
  margin-left: .5em;
  border-radius: 0.2em; 
  display: inline-block; 
  vertical-align: top;
  font-size: 10px;
}


.bc_title{ display: flex; flex-flow: row nowrap; gap: 1em; background: #c3e2ea; border: 1px solid silver;  border-radius: 0.3em; padding: 0.2em; margin: 0.3em 0em; }
.bc_box{ display: none; border: 1px solid silver; border-radius: 0.3em; padding: 0.3em; width: 100%; background-color: white;}
.bc_titlebarinfo{ 
 display: flex;
 justify-items: left;
 align-items: center;
 width: 4em;
 max-width: 4em;
 font-weight: bold;
 color: black;
 font-size: 1.1em;
}
.bc_titlebarvalue{ 
/* display: inline; text-align: left; font-weight: bold; color: black; font-size: 1.1em; */
}
.bc_titlebarright{ margin-left: auto; flex-grow: 1; text-align: right;}

.resflexcell{ border: 1px solid silver; padding: 0.2em; border-radius: 0.3em; background-color: white;}
.tdplaceholder{ line-height: 1.5em;}


.drag-item{ cursor: move; width: 12em; }

.pets-account{ display: flex; flex-flow: row nowrap; gap: 0.3em; justify-content: center; align-items: center; width: 100%; margin-bottom: 1em;}
.pets-account-entry{padding: 0.1em 0.5em; text-align: left;}
.pets-account-header{ display: flex; flex-flow: row nowrap;}
.pets-account-header-data{ text-align: left; line-height: 1.5em;}

.pets-to-group{ display: flex; flex-flow: column nowrap; gap: 0.3em; justify-content: center; align-items: center; width: 97%; margin: auto; padding: 1em .3em; border: 1px dashed silver; border-radius: 0.3em; background-color: white; }

#pet_groups{ display: flex; flex-flow: row wrap; gap: 1em; justify-content: left; align-items: center; padding: 1em .3em; width: 100%; margin: auto;}
.pet-grouping-title{ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin: 0.2em 0.3em; font-weight: bold;}
.pet-group{ width: 97%; margin: auto; }
.pet-group-msg{ 
 border: 1px solid silver; border-radius: 0.3em; 
 background-color: #ffb872;
 padding: 0.3em; display: none; 
 font-size: 1.4em;
 position: absolute; bottom: calc(100% + 0rem); left: -1em;
 }
.pet-group-reason{ border: 1px solid silver; border-radius: 0.3em; background-color: white; padding: 0.3em; display: none; position: absolute;}  
.pet-group-lgp{ display: flex; flex-flow: column nowrap; gap: 0.3em; justify-content: center; align-items: center; width: 97%; min-height: 5em; border: 1px dashed silver; margin: auto; margin-bottom: 0.3em; background-color: white;}
.pet-group-ctrl{}
.pet-group-ctrl-info{display: flex; flex-flow: row nowrap; align-items: center; justify-content: left; gap: 1em; border: 1px solid silver; border-radius: 0.3em; margin-bottom: 0.3em; padding: 0.1em 0.3em;}

.reqp-entry{ display: flex; flex-flow: row nowrap; gap: 1em; line-height: 1.4em; width: 95%; padding: 0.5em; }
.reqp-group-entry{ width: 98%; padding: none; background-color: none; max-width: 80em;}

.pet-question-wrap{display: flex; flex-flow: column nowrap; gap: 0.3em; justify-content: flex-start; align-content: center; width: 100%; margin-bottom: 1em;}
.pet-question-innr{display: flex; flex-flow: row; gap: 0.3em; justify-content: flex-start; align-content: center; width: 100%;}
.pet-question-quest{text-align: left; font-weight: bold; font-size: 1.1em;}
.pet-question-elem{text-align: left; height: 1.3em; line-height: 1.3em;}


.accwrap{}
.acchead{}

.tag-disp{
font-size: 0.8em; 
font-weight: normal;
margin: 0.1em 0.2em; 
padding: 0.1em 0.3em;
border: 1px solid #999; 
border-radius: 0.3em;
line-height: 1.5em;
}

.tag-disp-small{
font-size: 0.7em;
line-height: 1em;
}

#loggedin {float: right; margin:1px 10px;  font-size: 10px; color:#999;}
#loggedin span {font-style:normal; color:#333;}
#waitscreen
{ 
  visibility: hidden;  position: absolute; 
  width: 1000px; min-height: 800px; z-index: 500; top: 0px;
  text-align: center;
}

.bigdot{ font-size: 2em; font-weight: bold; line-height: 1em; display: inline-block; vertical-align: middle; transform: translateY(-0.1em); }

#ui-datepicker-div {
    z-index: 9999 !important;
}

.ui-dialog {
    border: 1px solid silver !important;
    border-radius: 0.3em !important;
    background: <?php bgcolor($GLOBALS['CONTEXT'].'MD',8); ?> !important; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: adds depth */
}

.ui-dialog .ui-dialog-titlebar {
    background:  <?php bgcolor($GLOBALS['CONTEXT'].'MD',8); ?>  !important;
    border: none !important;
}

.ui-dialog .ui-dialog-content {
    font-size: 1.2em;
    text-align: center;
}

.ui-dialog.ui-corner-all {
    border-radius: 0.5em !important;
}

.ui-dialog .ui-corner-all {
    border-radius: 0.5em !important;
}

.ui-dialog .ui-dialog-buttonpane {
    background:  <?php bgcolor($GLOBALS['CONTEXT'].'MD',5); ?>  !important;
    border-top: 1px solid #ccc;
    text-align: right; /* Aligns buttons to right */
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: 0.5em 0.4em 0.5em 0;
    font-weight: bold;
}

.ui-dialog .ui-dialog-titlebar-close {
    display: none;
}


/* FLEX CONTAINERS STANDARDIZED */

.flex-space-between-row, .flex-start-row, .flex-end-row, .flex-center-row, .flex-space-around-row{
no-width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
gap: 1em;
}
.flex-space-between-row{ justify-content: space-between;}
.flex-space-around-row{ justify-content: space-around;}
.flex-start-row{ justify-content: flex-start; }
.flex-end-row{ justify-content: flex-end; }
.flex-center-row{ justify-content: center;}


.flex-space-between-col, .flex-start-col, .flex-end-col, .flex-center-col, .flex-space-around-col{
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: center;
gap: 1em;
}
.flex-space-between-col{ justify-content: space-between; }
.flex-space-around-col{ justify-content: space-around; }
.flex-start-col{ justify-content: flex-start; }
.flex-end-col{ justify-content: flex-end; }
.flex-center-col{ justify-content: center; }

.grid-2080 { display: grid; grid-template-columns: 2fr 8fr; height: 100cph; gap: 1em;}
.grid-3070 { display: grid; grid-template-columns: 3fr 7fr; height: 100cph; gap: 1em;}
.grid-4060 { display: grid; grid-template-columns: 4fr 6fr; height: 100cph; gap: 1em;}
.grid-5050 { display: grid; grid-template-columns: 1fr 1fr; height: 100cph; gap: 1em;}
.grid-6040 { display: grid; grid-template-columns: 6fr 4fr; height: 100cph; gap: 1em;}
.grid-7030 { display: grid; grid-template-columns: 7fr 3fr; height: 100cph; gap: 1em;}
.grid-8020 { display: grid; grid-template-columns: 8fr 2fr; height: 100cph; gap: 1em;}


:root { --grid-rows-min: 6em; }
.grid-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax( var(--grid-rows-min), 1fr));
    gap: 0.5em;
}


 .vertical-text{
 writing-mode: vertical-rl; /* Vertical right-to-left */
 transform: rotate(180deg); /* Flips it to be 90deg counter-clockwise */
 }


.collapse-header { 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    text-align: center;
    background-color: #EEF;
    padding: 1em; 
    font-weight: bold;
    font-size: 1.2em;
}
.collapse-header .ui-icon { 
    margin-right: 8px; 
}
.collapse-content { 
    display: inline-block; 
    margin-top: -0.5em; 
    margin-bottom: 0.5em;
}


/* ICONS */

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url('fonts/material-symbols.woff2') format('woff2');
}

.ms-icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  /* Default Variable Settings */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}