@font-face {
    font-family: 'arial_unicoderegular';
    src: url('./fonts/uh_2-webfont.eot');
    src: url('./fonts/uh_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/uh_2-webfont.woff') format('woff'),
         url('./fonts/uh_2-webfont.ttf') format('truetype'),
         url('./fonts/uh_2-webfont.svg#arial_unicoderegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

:root
{
    --content_bg: #f8eed9;

    /* Image grid column counts — edit these numbers only */
    --image-grid-columns-wide: 4;
    --image-grid-columns-1100: 2;
    --image-grid-columns-900: 2;
    --image-grid-columns-700: 1;

    --image-grid-columns: var(--image-grid-columns-wide);
}

html
{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    text-align: center;
      /*  overflow-y: scroll;*/
}

body
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 12px;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    text-align: left;
  /*  background-image: url(./images/headerAdmin.jpg);
    background-position: top;
    background-repeat: repeat-x;*/
    background-color:#efd6ad;
    min-height:960px;
}

form
{
    margin: 0;
    padding: 0;
    height: 100%;
    text-align: center;
}


/*.............*/
#header1
{
    width: 100%;
    max-width: unset;
    height: 95px;
    margin: 0 auto;
    text-align: left;
    padding: 0px;
    padding-left: 20px;
    box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(./images/header_bg.jpg);
}
.header_11
{
    float:left;

    width:800px;
    height: 95px;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

.header_12
{
    float: right;
    width:392px;
    height: 65px;
    padding: 0px;
    margin: 0px;
    margin-right: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.header_12_top
{
    width: 100%;
}

.header_12_bottom
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 0 0 0;
    margin-top: auto;
}

.header_donate
{
    margin: 0;
    padding: 0;
    height: auto;
    text-align: right;
    flex: 0 0 auto;
}

.header_donate_btn
{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    color: #50442c;
    border: 1px solid #dab377;
    border-radius: 6px;
    padding: 9px 15px 6px;
    background-color: #fdfaf4;
}

.header_donate_logo
{
    display: block;
    width: 16px;
    height: auto;
}

.header_donate_text
{
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1;
    color: #003f6d;
}

.header_brand
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    height: 100%;
    padding: 10px 12px 10px 14px;
    min-width: 0;
}

.header_logo
{
    display: block;
    width: 51px;
    height: 51px;
    flex: 0 0 51px;
    position: relative;
    top: -3px;
}

.header_brand_text
{
    min-width: 0;
    text-align: left;
}

.header_logo_text
{
    margin: 0px;
    padding: 0px;
    text-align: left;

    color: #50442c;
        text-decoration: none;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 17px;
   vertical-align:top;
   line-height:17px;
}

.header_title_text
{
    margin: 6px 0 0;
    padding: 0px;
    text-align: left;
    display: block;
    color: #f7831e;
        text-decoration: none;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 23px;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 6px;
    font-weight: 700;
}

.header_search
{
    padding: 8px 0px 0px 120px;
    margin: 0px;
    text-align: left;
    display: block;
    color: #50442c;
        text-decoration: none;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 17px;
    font-weight: bold;
    vertical-align:top;
    
}

.divLanguageContainer
{
    padding: 0px 0px 0px 0px;
    margin: 0px;
    text-align: right;
    display: block;
    color: Black;
        text-decoration: none;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 13px;
    vertical-align:top;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
        text-decoration: none;     
}

.divLanguageContainer a
{
    color: #919190;
    text-decoration: none;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 13px;

}

.divLanguageContainer a:hover
{
    color:#919190;
    text-decoration: underline;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 13px;

}




.divTableMenu
{
    display:  table;
    width:auto;
    border-spacing:0px;
}

.divRowMenu
{
   display:table-row;
   width:auto;
   margin:0px;
}

.divCellMenu
{
    float:left;
    display:table-column;
    width:auto;
    height: 25px;
/*    background-color:#ffffff;*/
     border:0px solid  Red;
     vertical-align:middle  !important;
     padding-top:9px;
     padding-bottom:0px;
     padding-left:9px;
     padding-right:9px;
     margin:0px;

white-space: nowrap;


    text-align: left;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 13px;
    /*font-weight: bold;*/
    /*font-variant:small-caps;*/ 

}
.divCellMenu a
{
    color: #ffffff;
    text-decoration: none;
}

.divCellMenu a:hover
{
    color: #ccccd2;
    text-decoration:underline;

}

.divCellMenuSelected
{
    float:left;
    display:table-column;
    width:auto;
    height: 25px;
/*    background-color:#ffffff;*/
     border:0px solid  Red;
     vertical-align:middle  !important;
     padding-top:9px;
     padding-bottom:0px;
     padding-left:9px;
     padding-right:9px;
     margin:0px;

white-space: nowrap;

background-color:#F7F8F6;
    text-align: left;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 13px;
  /*  font-weight: bold;*/
  /*  font-variant:small-caps; */


}

.divCellMenuSelected a
{
    color: #043F6B !important;
    text-decoration:underline !important;
}
/*.............*/

#footer
{
    border-width: 0px;

    width: 100%;
    max-width: 1196px;
    height: auto;
    min-height: 23px;
    margin: 0 auto;
    text-align: left;
    padding: 20px 0;
    box-sizing: border-box;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 14px;
    color:Black;
}

#footer .divTableFrame
{
    margin: 0 auto;
}

.footer1
{
    height: auto;
    min-height: 18px;

    border: 0px;

  padding: 0px 10px 0px 10px;
    width: auto;
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 14px;
    color:Black;
    box-sizing: border-box;
}

.footer2
{
    height: auto;
    min-height: 18px;

    border-width: 0px;
     width: auto;
     max-width: 573px;

  padding: 0px 0px 0px 0px;
    margin: 0 auto;
    text-align: right;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 14px;
    color:Black;
    box-sizing: border-box;

}

.email
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 14px;
    color:Black;
       text-decoration: none;
}

.email:hover
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 14px;
    color:Blue;
       text-decoration:underline;
}

.footer-contact-link,
a.footer-contact-link.email
{
    cursor: pointer;
    color: #0067b8;
    text-decoration: none;
}

.footer-contact-link:hover,
a.footer-contact-link.email:hover
{
    color: #005a9e;
    text-decoration: underline;
}

.contact-form
{
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
}

.contact-form-row
{
    margin: 0 0 12px 0;
}

.contact-form-row label
{
    display: block;
    margin: 0 0 4px 0;
    font-size: 13px;
    color: #333;
}

.contact-form-input,
.contact-form-textarea
{
    box-sizing: border-box;
    width: 100%;
    min-height: 32px;
    padding: 6px 10px !important;
}

.contact-form-textarea
{
    min-height: 110px;
    resize: vertical;
    line-height: 1.35;
}

.contact-form-hp
{
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form-status
{
    min-height: 1.2em;
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: bold;
}

.contact-form-status--ok
{
    color: #33691e;
}

.contact-form-status--error
{
    color: #b30700;
}

.contact-form-actions
{
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.contact-form-btn
{
    width: auto !important;
    min-width: 100px;
    height: 34px;
    padding: 0 14px;
    box-sizing: border-box;
}

.contact-form-btn-secondary
{
    background-color: #efe0c4;
}

.contact-ui-dialog .ui-dialog-titlebar
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
}


#page
{
    width: 100%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    min-height:841px;
    padding: 0 16px 30px;
    background-color: var(--content_bg);
    border-top: 1px solid #e5c48f;
    border-bottom: 1px solid #e5c48f;
}

#left
{
    float: left;
    width: 255px;
    height: 100%;
    padding: 0px;
    margin: 0px;
    vertical-align: top;
}


#middle
{
    
    height: 100%;
    padding: 0px;
    margin: 0 auto;
}

#right
{
    float: none;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0px;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: var(--content_bg);

}

.pageBody
{
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.pageBodyMain
{
    min-width: 0;
}

.pageBody .ContainerSearchImageList
{
    order: -1;
}


/*..Main page...........*/

.divContainer
{
    padding: 0px;
    margin: 0px auto;
}

.divMainContainer
{
    padding: 0px;
    margin: 0px;
    width: 1196px;
}

.divPathSelMenu
{
    height: auto;
    padding: 11px 20px 0px 20px;
    margin: 0px;
    text-align: left;
    color: black;
    text-decoration: none;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 12px;
}

.divPathSelMenuLink
{
    color: #264A8C;
    height: auto;
    padding: 11px 20px 0px 20px;
    margin: 0px;
    text-align: left;
    text-decoration: none;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 12px;
}

.divPathSelMenuLink a
{
    color: #264A8C;
    text-decoration: none;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 12px;
}



.hr
{
    background: url(./images/www/hr.gif) top left repeat-x;
    height: 5px;
    margin: 5px 20px 5px 20px;
    padding: 0px;
}

.hr2
{
    background: url(./images/hr.gif) top left repeat-x;
    height: 5px;
    width: 100%;
    margin: 5px 0px 20px 0px;
}

#hr
{
    background: url(./images/hr.gif) top left repeat-x;
    height: 5px;
    width: 100%;
    margin: 20px 0px 10px 0px;
}

#hr_main
{
    background: url(./images/hr.gif) top left repeat-x;
    height: 3px;
    width: 100%;
    margin: 8px 0px 0px 0px;
}

/*...... 1_2_3 continue .......*/
.pointer
{
    cursor: pointer;
}


.page_tbl
{
    /* display:inline;*/
    text-align: center;
    margin: 30px 0 0 0;
    padding: 0;
    width: 100%;
}



.page_cell,
.page_cell_sel
{
    display: inline-block;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    margin: 1px;
    padding: 2px 5px;
    line-height: 1.25;
    min-height: calc(1.25em + 4px + 2px);
    color: black;
    text-decoration: none;
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 16px;
    background-color: White;
    text-align: center;
    vertical-align: middle;
}

.page_cell
{
    border-color: #e0bd87;
}

.page_cell_sel
{
    border-color: #e0bd87;
    color: #f78523;
    font-weight: bold;
}

.page_cell_disabled
{
    cursor: default;
    color: #b0b0b0;
    border-color: #e8e0d4;
    background-color: #f7f7f7;
    pointer-events: none;
}

.page_cell_disabled .page-chevron
{
    border-color: #c8c8c8;
}

.page_cell_chevron
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8em;
    padding-left: 4px;
    padding-right: 4px;
}

.page_cell_chevron_left
{
    padding-left: 4px;
    padding-right: 0;
}

.page_cell_chevron_right
{
    padding-right: 6px;
}

.page-chevron-pair
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    line-height: 0;
}

.page-chevron
{
    display: block;
    width: 0.52em;
    height: 0.52em;
    border-style: solid;
    border-color: #543e30;
    border-width: 0 2px 2px 0;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.page-chevron-left
{
    transform: rotate(135deg);
}

.page-chevron-right
{
    transform: rotate(-45deg);
}

/* Same overlap for left and right pairs */
.page-chevron-left + .page-chevron-left,
.page-chevron-right + .page-chevron-right
{
    margin-left: -0.12em;
}

.grd_btn
{
    margin: 2px 0px 0px 2px;
    padding: 3px;
    width: 20px;
}


.errorEdit
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 11px;
    font-weight: bold;
    color: #e33d29;
    text-decoration: none;
    text-align: left;
}


.info
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 11px;
    font-weight: bold;
    color: Green;
    text-decoration: none;
    text-align: left;
}

.error
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 12px;
    color: #e33d29;
    text-decoration: none;
    text-align: left;
}




/*.....Grid (homepage image list)......*/
.ContainerGrid .divTable
{
    display: grid;
    grid-template-columns: repeat(var(--image-grid-columns), minmax(0, 1fr));
    gap: 20px 20px;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    padding: 0;
    min-height: 700px;
    align-items: start;
}

.divRow
{
   display:table-row;
   width:auto;
   margin:0px;
   
   /* border:1px solid  #666666;*/



}

.ContainerGrid .divCell
{
    float: none;
    display: flex;
    flex-direction: column;
    width: auto !important;
    min-width: 0;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    background-color: rgba(255, 255, 255, 0.25);
    position:relative;
    overflow: hidden;
}

/* PHP still emits spacer divs for the old 6-column float layout; hide them. */
.ContainerGrid .divCellMarginV,
.ContainerGrid .divCellMarginH
{
    display: none !important;
    float: none;
    width: 0 !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    border: 0;
}

.ContainerGrid .divCellImg
{
     border: none;
     padding: 0;
     font-family: "arial_unicoderegular", "Sylfaen";
     text-align: center;
     line-height: normal !important;
     min-width: 0 !important;
     width: 100%;
     box-sizing: border-box;
}

.ContainerGrid .divCellImg a
{
     display: block;
     width: 100%;
}

.ContainerGrid .divImg
{
     width: 100%;
     aspect-ratio: 4 / 3;
     min-height: 0 !important;
     padding: 0;
     box-sizing: border-box;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}


.ContainerGrid .divCellImgText
{
    padding: 4px 4px 6px;
    margin: 0;
    font-family: "arial_unicoderegular", "Sylfaen" !important;
    font-size: 18px;
    line-height: 1.35;
    color: black;
    text-decoration: none;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position:absolute;
    left:0;
    right:0;
    bottom:0px;
    /* Full text always laid out; slide it (parent .divCell overflow:hidden clips).
       Transform avoids height/overflow clipping through glyphs (letter shake). */
    height: auto;
    color:white;
    text-align:center;
    background-color:rgba(0, 0, 0, 0.5);
    z-index:1;
    /* Collapsed: keep ~1 line + padding visible at the bottom of the cell */
    transform: translate3d(0, calc(100% - 1em - 0.75em), 0);
    /* Closing */
    transition: transform 0.55s cubic-bezier(0.05, 0.85, 0.15, 1);
}

.ContainerGrid .divCellImgTextInner
{
    display: block;
}

.ContainerGrid .divCell:hover .divCellImgText
{
    transform: translate3d(0, 0, 0);
    /* Opening */
    transition: transform 0.85s cubic-bezier(0.05, 0.85, 0.15, 1);
}

.divCellHdr
{
    background-color: #ccccd2;
    
    float:left;/*fix for  buggy browsers*/
    display:table-column;
    width:auto;
/*    background-color:#ffffff;*/
     border:1px solid  white;
     /*min-height: 26px !important;*/
     height: 17px !important;
     vertical-align:middle  !important;
     padding-top:2px;
     padding-bottom:1px;
     padding-left:2px;
     padding-right:2px;
     
     font-family:  "arial_unicoderegular", "Sylfaen";
}

.divCellHdrLngCmbo
{
    background-color: white;
    
        
    float:left;/*fix for  buggy browsers*/
    display:table-column;
    width:auto;
/*    background-color:#ffffff;*/
     border:1px solid  #DBDBDB;
     /*min-height: 26px !important;*/
     height: 20px !important;
     vertical-align:middle  !important;
     padding-top:2px;
     padding-bottom:1px;
     padding-left:2px;
     padding-right:2px;
     
     font-family:  "arial_unicoderegular", "Sylfaen";
}

.grd_item_div_bg
{
 background-color: #ffffff;
}

.grd_item_div_bg_selected
{
 background-color: #becedb;
}

.grd_item_div
{
    margin: 0px;
    padding: 0px; 
        
        border:0px;
}


/*
.grd_item_div a
{
    display: block;
    margin: 3px;
    padding: 0px; 
        background-color:#ffffff;
        border:0px;
}

.grd_item_div a:hover
{

    margin: 3px;
    padding: 0px; 
        background-color:#D8DCDF;
        border:0px;
}
*/  

.grd_loading 
{
	/*background-image: url(./images/spinner.gif) center center no-repeat;*/
} 

#grd_pnl_loading {  
    display:none;
    background-position: center top;
    position: absolute;
    z-index: 80;
    
        background-color: Gray;
    filter: alpha(opacity=20);
    opacity: 0.20;
    -moz-opacity: 0.20;


} 

#divLoadingspinner
{
	display:block;

    display:none;
    position: absolute;

text-align:center;
padding: 280px 0px 0px 0px;
z-index: 90;
/*
    filter: alpha(opacity=70);
    opacity: 0.70;
    -moz-opacity: 0.70;
  */  
  /*  
    background-image: url(./images/loading.gif);
    background-position:  center;
    background-repeat:no-repeat;
      */
} 

.divLoading
{
   
text-align:center;
padding:65px;
z-index: 6010;

} 
.ContainerGrid
{

    /*border-width: 1px;
    border-style: solid;
    border-color: #DBDBDB;*/
    border:0px;
    padding: 10px 0px 10px 0px;
    margin: 0px;
    /*background-color: #F4F4F4;*/
    /*width: 1196px;*/
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 754px;
    text-align: left;
}

.ContainerGridSm
{
    border-width: 1px;
    border-style: solid;
    border-color: #DBDBDB;
    padding: 0px 10px 10px 10px;
    margin: 0px;
    background-color: #F4F4F4;
    width: 570px;
    text-align: left;
}

.ContainerGridSm2
{
    border-width: 1px;
    border-style: solid;
    border-color: #DBDBDB;
    padding: 0px 10px 10px 10px;
    margin: 0px;
    background-color: #F4F4F4;
    width: 1062px;
    text-align: left;
}

.ContainerGridSmDinamicWidth
{
    border-width: 1px;
    border-style: solid;
    border-color: #DBDBDB;
    padding: 10px 10px 10px 10px;
    margin: 0px;
    background-color: #F4F4F4;
    text-align: left;
}

.ContainerGridEdit
{
    border-width: 1px;
    border-style: solid;
    border-color: #DBDBDB;
    padding: 20px;
    margin: 0px;
    background-color: #F4F4F4;
    width: 1160px;
    text-align: left;
}

.ContainerEdit
{
    border-width: 1px;
    border-style: solid;
    border-color: #DBDBDB;
    padding: 10px 10px 10px 10px;
    margin: 0px;
    background-color: #FFFFFF;
    width: 1139px;
    text-align: left;
}
     
.grd_InfoMsg
{
    padding: 0px 0px 8px 10px;
    margin: 0px;
    vertical-align: middle; /* width:835px;*/
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 11px;
    font-weight: bold;
    color: green;
    text-decoration: none;
    text-align: left;
    min-height:13px;
} 

.pageConfirmIsOk
{
    padding: 5px;
    margin: 0px;
    width:100%;
    vertical-align: middle; 
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 11px;
    font-weight: bold;
    color: green;
    text-decoration: none;
    text-align: left;
    height:100%;
} 


.dialogInfo
{
    padding: 0px;
    margin: 0px;
    font-family: "arial_unicoderegular", "Sylfaen" !important;
    font-size: 13px;
    color: black;
    text-decoration: none;
    text-align: left;
} 





.txtLogin
{
    border-width: 1px;
    border-style: solid;
    border-color: #DBDBDB;
    padding: 0px;
    margin: 0px;
    background-color: #F4F4F4;
    width: 180px;
    text-align: left;
}



.txtField
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen" !important;
    font-size: 16px;
    font-weight: normal;
    color: #706d6d;
    text-decoration: none;
    background-color: #FFFFFF;
    border: 1px solid #dab377;
    padding: 0px 0px 0px 0.5em;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    
}

.txtFieldSearch
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen" !important;
    font-size: 16px;
    font-weight: normal;
    color: #706d6d;
    text-decoration: none;
    background-color: #FFFFFF;
    border: 1px solid #dab377;
    height: auto;
    width:220px;

            border-top-left-radius:8px;
    border-bottom-left-radius:8px;
    border-top-right-radius:8px;
    border-bottom-right-radius:8px;

        padding: 0px 0px 0px 10px;

}

.txtFieldDate
{
    font-size: 13px;
    font-weight: normal;
    color: Black;
    text-decoration: none;
    background-color: #FFFFFF;
    border: 1px solid #BABABA;
    height: 15px;

}
.txtFieldMulti
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 13px;
    font-weight: normal;
    color: Black;
    text-decoration: none;
    background-color: #FFFFFF;
    border: 1px solid #BABABA;
    height: 32px;

}



.txtFieldCombo
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 16px;
    font-weight: normal;
    color: Black;
    text-decoration: none;
    background-color: #FFFFFF;
    border: 1px solid #D8A659;
    height: auto;
    width:172px;
    /*
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
*/
}



.txtFieldComboLabel
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 13px;
    font-weight: normal;
    color: Black;
    text-decoration: none;
    background-color: #e0bd87;
    border: 1px solid #D8A659;
    height: 20px;
    width: 102px;



}



.line
{ 
    background-color: #BABABA;
    height: 1px;
    width: 100%;
    margin: 4px 0px 4px 0px;
    padding: 0px;
}

.line2
{ 
    background-color: #BABABA;
    height: 1px;
    width: 100%;
    margin: 4px 0px 4px 0px;
    padding: 0px;
}

#save_pnl_loading {  
	display:block;

    display:none;
    background-position: center top;
    position: absolute;
    z-index: 3000;
    
        background-color: Blue;
    filter: alpha(opacity=10);
    opacity: 0.10;
    -moz-opacity: 0.10;
}

#cover_pnl {  
	display:block;

    display:none;
    background-position: center top;
    position: absolute;
    z-index: 98;
    
        background-color: Blue;
    filter: alpha(opacity=10);
    opacity: 0.10;
    -moz-opacity: 0.10;
}


.divLoadingSave
{
   
text-align:center;
padding:265px;
z-index: 3010;

} 


.divTableSrch
{
    display:  table;
    width:auto;
    /*background-color:#ffffff;*/
    /*border:1px solid  #DBDBDB;*/
    border-spacing:0px;
  

    /*cellspacing:poor IE support for  this*/
   /* border-collapse:separate;*/
}

.divRowSrch
{
   display:table-row;
   width:auto;
   margin:0px;
   
   /* border:1px solid  #666666;*/



}

.divCellSrch
{
    float:left;/*fix for  buggy browsers*/
    display:table-column;
    width:auto;
/*    background-color:#ffffff;*/
     border:0px;
     /*min-height: 26px !important;*/
     height: 18px !important;
     vertical-align:bottom  !important;
     padding-top:6px;
     padding-bottom:8px;
     padding-left:6px;
     padding-right:6px;
     margin:0px;
     font-family:  "arial_unicoderegular", "Sylfaen";
     font-size:16px;
     color:Black;

}


.divCellSrch2
{
    float:left;/*fix for  buggy browsers*/
    display:table-column;
    width:auto;
/*    background-color:#ffffff;*/
     border:0px;
     /*min-height: 26px !important;*/
     height: 18px !important;
     vertical-align:bottom  !important;
     padding-top:3px;
     padding-bottom:0px;
     padding-left:2px;
     padding-right:2px;
     margin:2px;
     font-family:  "arial_unicoderegular", "Sylfaen";
     font-size:13px;
     color:Black;

}

.btnFieldOk
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 12px;
    font-weight: normal;
    color: Black;
    text-decoration: none;
    background-color: fff;
    border: 1px solid #BABABA;
    height: 19px;
    width:100px;
    cursor: pointer;
}


.btnField
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 16px;
    font-weight: normal;
    color: #f78523;
    text-decoration: none;
    background-color: #f5deb4;
    border: 1px solid #dab377;
    height: auto;
    width:172px;
    cursor: pointer;

    /*
    background-position: left top;
    background-repeat: no-repeat;    
    background-image: url(./images/btn_search_bgr.png);
        */


        border-top-left-radius:8px;
    border-bottom-left-radius:8px;
    border-top-right-radius:8px;
    border-bottom-right-radius:8px;

}

.btnFieldHdrSearch
{
    margin: 8px 0px 0px 5px;
    transform: rotate(-25deg);
    /*
        background-position: left top;
    background-repeat: no-repeat;    
    background-image: url(./images/search_.png);
        */
}


.btnFieldReset
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 12px;
    font-weight: normal;
    color: White;
    text-decoration: none;
    background-color: #BABABA;
    border: 1px solid #BABABA;
    height: 19px;
    width:100px;
    cursor: pointer;

}

.noSearchResult
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 12px;
    font-weight: normal;
    color: Red;
    padding: 5px;
    margin: 5px;
}


.divTableEdit
{
    display:  table;
    width:auto;
    /*background-color:#ffffff;*/
    /*border:1px solid  #DBDBDB;*/
    border-spacing:0px;
  

    /*cellspacing:poor IE support for  this*/
   /* border-collapse:separate;*/
}

.divRowEdit
{
   display:table-row;
   width:auto;
   margin:0px;
   
   /* border:1px solid  #666666;*/



}

.divCellEdit
{
    

    float:left;/*fix for  buggy browsers*/
    display:table-column;
    width:auto;
/*    background-color:#ffffff;*/
     border:0px solid  #DBDBDB;
     /*min-height: 26px !important;*/
     /*min-height: 10px !important;*/
     vertical-align:bottom  !important;
     padding-top:2px;
     padding-bottom:3px;
     padding-left:2px;
     padding-right:2px;
     margin:2px;

    font-size: 13px;
    font-family:  "arial_unicoderegular", "Sylfaen";
color:Black;
white-space: nowrap;

}



.divResultCount
{
color:Black;
padding:0px 6px 5px 12px;
font-size: 13px;
    font-family:  "arial_unicoderegular", "Sylfaen";
}

.divColorBold
{
color:Black;
}


.divTableFrame
{
    display:  table;
    width:auto;
    border:0px solid  red;
    border-spacing:0px;
}

.divRowFrame
{
   display:table-row;
   width:auto;
   margin:0px;
   
}

.divCellFrame
{
    float:left;/*fix for  buggy browsers*/
    display:table-column;
    width:auto;
/*    background-color:#ffffff;*/
 /*    min-height: 20px !important;*/

     border:0px;
     padding:0px;
}




#pnl_edit_grd01 {  
    display:none;
    background-position: center top;
    position: absolute;
    z-index: 100;

        border-width: 3px;
    border-style: solid;
    border-color: #d0cfcf;

    background-color:#fff;

    min-width:230px;
    min-height:26px;
}


.container_edit_pnl {  

	display:block;
	
	padding:0px;
	margin: 0px;

    text-align:left;
    
}

.container_edit_pnl_header {  

	display:block;
	min-height:14px;
	width:auto;
	padding:2px;
	margin: 1px 1px 1px 1px;
    border-width: 1px;
    border-style: solid;
    border-color: #d0cfcf;
    color:Black;

    background-color:#e2dfdf;
    text-align:left;
        font-size: 11px;
    font-weight: bold;
    
}


.btnHidePnl
{
    float:right;
    background-image: url(./images/wind_hide2.gif);
    background-repeat:no-repeat;
 border:0px;
width:14px;
 height:14px;
 cursor: pointer;
     background-position: top left;
     	padding:0px;

}

.btnHidePnl:hover
{
    background-position: bottom left;
}


 
 .divCellExit
{
    float:right;

    /*font-weight: bold;*/
    /*font-variant:small-caps;*/ 

}
.divCellExit a
{
    font-family: "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    font-size: 14px;

    color:#043f6b;
    text-decoration: none;
}

.divCellExit a:hover
{
    color: #ccccd2;
    text-decoration:underline;

}

.ContainerSearch
{
    border-width: 1px;
    border-style: solid;
    border-color: #DBDBDB;
    padding: 6px 10px 10px 10px;
    margin: 0px;
    background-color: #F4F4F4;
    width: 1180px;
    text-align: left;
    height:144px;
}


.ContainerSearchImageList
{
    /*border-width: 1px;
    border-style: solid;
    border-color: #DBDBDB;*/
    border:0px;
    padding: 0px;
    margin: 0px;
    background-color: #f8eed8;
    width: auto;
    text-align: left;
    height:64px;
}

.pageBody .ContainerSearchImageList
{
    width: 100%;
    max-width: 230px;
    height: auto;
    min-height: 0;
    padding: 12px 12px 14px;
    box-sizing: border-box;
    position: sticky;
    top: 12px;
    margin-top: 32px;
}

.pageBody .ContainerSearchImageList .divTableSrch
{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

.pageBody .ContainerSearchImageList .divRowSrch
{
    display: flex;
    flex-direction: column;
    float: none;
    width: 100%;
    margin: 0;
    gap: 4px;
}

.pageBody .ContainerSearchImageList .divCellSrch
{
    float: none;
    display: block;
    width: 100% !important;
    height: auto !important;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-align: left !important;
}

.pageBody .ContainerSearchImageList .divCellSrchLbl
{
    font-size: 16px;
    line-height: 1.3;
    color: #50442c;
}

.pageBody .ContainerSearchImageList .divCellSrchCtrl .txtField,
.pageBody .ContainerSearchImageList .divCellSrchCtrl .txtFieldCombo,
.pageBody .ContainerSearchImageList .divCellSrchCtrl .ui-selectmenu-button
{
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size:16px;
    height: auto;
    max-height: unset;
}

.pageBody .ContainerSearchImageList .divCellSrchCtrl .btnField
{
    width: 100%;
    margin-top: 4px;
}

.pageBody .ContainerSearchImageList .divRowSrchBtn .divCellSrch
{
    padding-top: 4px;
}

.sep_line1
{
   width: 100%;
   max-width: 1196px;
    height: 2px;
    margin: 0 auto;
    text-align: left;
    padding: 0px;
     background-color: #50442c;
     box-sizing: border-box;
}

.sep_line2
{
   width: 100%;
   max-width: 1196px;
    height: 1px;
    margin: 0 auto;
    text-align: left;
    padding: 0px;
     background-color: #eec994;
     box-sizing: border-box;
}

.sep_line3
{
   width: 100%;
   max-width: 1196px;
    height: 1px;
    margin: 0 auto;
    text-align: left;
    padding: 0px;
     background-color: white;
     box-sizing: border-box;
}

.ui-selectmenu-button
{
    height: auto;
}

.ui-selectmenu-button span.ui-selectmenu-text {
    line-height:1;
    padding: 0.3em 2.1em 0.3em 0.5em;
}

.ui-menu .ui-menu-item {
    font-size: 16px;
}


/*........  PhotoSwipe caption .............*/
.pswp__custom-caption
{
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    box-sizing: border-box;
    max-width: min(720px, calc(100% - 32px));
    padding: 10px 16px;
    background: #f8eed8;
    color: #000;
    text-shadow: none;
    border-radius: 5px;
    font: normal 13px/20px "arial_unicoderegular", "Arial Unicode", "Sylfaen";
    text-align: center;
    z-index: 10;
    pointer-events: none;
}

a._pswp
{
    cursor: zoom-in;
}

.pswp__img
{
    object-fit: contain;
}

.pswp--ui-visible .pswp__hide-on-close
{
    background: unset;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

.pswp--ui-visible .pswp__top-bar
{
    background: unset;
    background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.6) 0,
        rgba(0, 0, 0, 0.6) 80px,
        transparent 80px,
        transparent calc(100% - 110px),
        rgba(0, 0, 0, 0.6) calc(100% - 110px),
        rgba(0, 0, 0, 0.6) 100%
    );
    color: white;
}

/*..... Responsive (public site) — keep after layout rules ......*/
@media (max-width: 1100px)
{
    .header_11
    {
        width: 58%;
    }

    .header_12
    {
        width: 42%;
    }

    .header_search
    {
        padding-left: 24px;
    }

    .divLanguageContainer
    {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    :root
    {
        --image-grid-columns: var(--image-grid-columns-1100);
    }
}

@media (max-width: 900px)
{
    body
    {
        min-height: 0;
    }

    #header1
    {
        height: auto;
        min-height: 95px;
        background-size: cover;
        padding-bottom: 10px;
    }

    .header_11,
    .header_12
    {
        float: none;
        width: 100%;
        height: auto;
    }

    .header_brand
    {
        padding: 12px 16px;
    }

    .header_title_text
    {
        font-size: 20px;
    }

    .header_search
    {
        padding: 10px 16px 0;
    }

    .txtFieldSearch
    {
        width: 100%;
        max-width: 280px;
        box-sizing: border-box;
    }

    .header_12_bottom
    {
        justify-content: space-between;
        padding: 8px 16px 0;
        margin-top: 0;
    }

    .divLanguageContainer
    {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        text-align: left;
        box-sizing: border-box;
    }

    .pageBody
    {
        grid-template-columns: 1fr;
    }

    .pageBody .ContainerSearchImageList
    {
        width: 100%;
        max-width: none;
        position: static;
    }

    .ContainerGrid
    {
        min-height: 0;
        padding-top: 4px;
    }

    .ContainerGrid .divTable
    {
        min-height: 0;
    }

    :root
    {
        --image-grid-columns: var(--image-grid-columns-900);
    }

    #footer .divTableFrame,
    #footer .divRowFrame
    {
        display: block;
        width: 100%;
    }

    #footer .divCellFrame
    {
        float: none;
        display: block;
        width: 100%;
    }

    .footer1,
    .footer2
    {
        width: 100%;
        max-width: none;
        text-align: left;
        padding-left: 0;
        margin: 4px 0;
    }
}

@media (max-width: 700px)
{
    #page
    {
        padding: 0 10px;
        min-height: 0;
    }

    .header_brand
    {
        gap: 10px;
        padding: 10px 12px;
    }

    .header_logo
    {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .header_logo_text
    {
        font-size: 14px;
        line-height: 1.25;
    }

    .header_title_text
    {
        font-size: 17px;
        margin-top: 4px;
    }

    .txtFieldSearch
    {
        max-width: none;
    }

    .ContainerGrid .divTable
    {
        gap: 14px;
        padding: 0 0 8px;
        min-height: 0;
    }

    :root
    {
        --image-grid-columns: var(--image-grid-columns-700);
    }

    .ContainerGrid .divCell
    {
        padding: 6px;
    }

    .ContainerGrid .divCellImgText
    {
        font-size: 12px;
    }

    .page_tbl
    {
        margin-left: 0;
        text-align: center;
    }

    .sep_line1,
    .sep_line2,
    .sep_line3
    {
        width: 100%;
        max-width: none;
    }
}