﻿/*
    IMPORTANT: 
        This CSS file is organized in the following layout:
        * Universal styling of all the general HTML elements.
        * Common classes and buttons that are used in all the pages.
        * Classes used per page (.aspx) or control (.ascx).

        ** Each section has its own mobile overrides at the bottom. **

*/

/**************************************************************************************************************************************************************

                                            Universal styling of all the general HTML elements. 

**************************************************************************************************************************************************************/
html                            { font-size:16px; height:100%; }
body                            { font-family:Arial; margin: auto; width:90%; height:99%; }
header                          { font-size:1.5em; margin: 15px; text-align:center; }
section                         { margin:auto; }
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select                          { border: 1px solid #61686e; padding: 3px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
                                  color: #666; font-size:17px; background: #fff; }

input[type="text"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover                    { color: #111;}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus                    { color: #111;}

A                               { font-size: 0.9em; color: blue; }
@media screen and (max-width:799px) {
    body                        { width:97%;}
}
@media screen and (max-width:599px){
    body                        { width:90%;}
    header                      { font-size:1.1em; }
}

/*
* { outline: 4px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
*/
/**************************************************************************************************************************************************************

                                            Common classes and buttons that are used in all the pages. 

***************************************************************************************************************************************************************/
.visuallyhidden                 { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.button-box                     { margin-left: auto; margin-right: auto; padding: 12px 0px 12px 0px; text-align:center; }
.menu-button-box                { margin-left: auto; margin-right: auto; padding: 5px 0px 5px 0px; text-align:center; }
.button                         { width:200px; }
.desktop-only                   { display: block; }
.desktop-only-inline            { display: inline; }
.desktop-only-tc                { display:table-cell; }
.form_label_std                 { font-size: 1em; }
.form_label_hdr                 { font-size:1em; font-weight:bold; }
.form_label_warning             { font-size: 1.1em; font-weight:bold; color:maroon; }
.form_label_error               { font-size: 1em; color: maroon; }
.form_page_hdr                  { FONT-SIZE: 1.2em; FONT-WEIGHT: bold; }
.form_page_title                { font-size:1.5em; margin: 15px; text-align:center; }
.inline2block                   { display: table-cell; margin: 4px; width:50%; vertical-align:middle;}
.mobile-only                    { display:none; }
.mobile-only-inline             { display:none; }
.mobile-only-tc                 { display:none; }
.page-text                      { display:block; color:maroon; margin: 5px; text-align:center; }
.SmallLink                      { color: blue; font-size: 0.9em; text-decoration: none; }
.tbl                            { display:table; }
.tr                             { display:table-row; }
.tc                             { display: table-cell; padding: 3px; }
.vscroll                        { overflow-y: scroll; }
.vscroll-auto                   { overflow-y: auto; }
.tb3                            { width: 40px;}
.tb4                            { width: 50px;}
.tbRx                           { width: 125px;}
.tc_secCode                     { display:table-cell; padding: 3px 0px 3px 0px; }
.flex_container                 { width: 50%; margin: 0 auto;}
.cross-btn                      { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }
.cross-btn:hover,
.cross-btn:focus                { color: #000; text-decoration: none; cursor: pointer; }

/*Hide spin button on the Firefox*/
input[type='number']            { -moz-appearance:textfield; }
/*Hide spin button on Chrome*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }

@media screen and (max-width:1690px) {
    .flex_container             { width: 70%; }
}
@media screen and (max-width:1290px) {
    .flex_container             { width: 80%; }
}
@media screen and (max-width:900px) {
    .flex_container             { width: 90%; }
}
@media screen and (max-width:700px) {
    .flex_container             { width: 100%; }
}
@media screen and (max-width:599px) {
    .form_label_std             { font-size: 0.9em;}
    .form_label_hdr             { font-size: 0.9em; }
    .form_label_warning         { font-size: 1.0em; }
    .form_label_error           { font-size: 0.9em; }
    .form_page_hdr              { FONT-SIZE: 1.1em; }
    .form_page_title            { font-size:1.2em; margin: 15px; text-align:center; }
    .mobile-only-tc             { display:table-cell; }
    .desktop-only-tc            { display: none; }
    .desktop-only               { display:none; }
    .mobile-only                { display:block; }
    .mobile-only-inline         { display:inline; }
    .desktop-only-inline        { display:none; }
    .inline2block               { display:block; width:100%;}
    .tc_secCode                 { display:block; }
}

/* ALL BUTTONS*/
.big_button_ovr                 { background-color:rgba(137,97,136,1); background-image:none; background-position:center; border-width:0; color:White; 
                                  text-shadow: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-appearance: none;
                                  border-radius: 5px; display: inline-block; cursor: pointer; font-size: 16px; font-weight:500;	height: 40px; width: 260px;}

.medium_large_button_ovr        { background-color:rgba(137,97,136,1); background-image:none; background-position:center; border-width:0; color:White; FONT-SIZE: 13pt; 
                                  FONT-WEIGHT:normal; width: 180px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-appearance: none; border-radius: 5px;
                                  height: 40px;	text-shadow:none; cursor: pointer; }

.medium_large_button_ovr-back   { background-color:rgba(137,97,136,1); background-image:none; background-position:center; -moz-border-radius: 5px; 
                                  -webkit-border-radius: 5px; -webkit-appearance: none; border-radius: 5px; height: 40px; 	text-shadow:none;	
                                  border-width:0; color:White; FONT-SIZE: 13pt; FONT-WEIGHT:normal; width: 180px; cursor: pointer; }

.medium_button_ovr-down         { background-color:rgba(137,97,136,1); background-image:none; background-position:center; background-repeat:no-repeat; 
                                  border-width:0; color:White; FONT-SIZE: 9pt; FONT-WEIGHT:normal; height:23px; text-shadow: none; width:220px; 
                                  -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-appearance: none; border-radius: 5px; cursor: pointer; }

.small_button_ovr               { background-color:rgba(137,97,136,1); background-image:none; background-position:center; background-repeat:no-repeat; background-size:100%; 
                                  border-width:0; color:White; FONT-SIZE: 10pt; FONT-WEIGHT:normal; height:20px; padding-bottom: 2px; text-shadow: none; width:100px; 
                                  -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-appearance: none; border-radius: 5px; cursor: pointer; }

.square_button_ovr              { background-color:rgba(137,97,136,1); background-image:none; background-position:center; background-repeat:no-repeat; border-width:0; 
                                  color:White; FONT-SIZE: 12pt; FONT-WEIGHT:normal; padding-bottom: 2px; text-shadow: none; white-space: normal; text-decoration:none;
                                  -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-appearance: none; border-radius: 5px; text-shadow:none; cursor: pointer; 
                                  padding: 10px; width: 80px; display:inline-block; text-align:center; }

.huge_button_ovr                { background-color:rgba(137,97,136,1); background-image:none; background-position:center; background-repeat:no-repeat; background-size:100%; 
                                  border-width:0; color:White; FONT-SIZE: 16px; FONT-WEIGHT:500; height:55px; text-shadow: none; width:380px; -moz-border-radius: 5px; 
                                  -webkit-border-radius: 5px; -webkit-appearance: none; border-radius: 5px; display: inline-block;	cursor: pointer; }

@media screen and (max-width:599px) {
    .medium_large_button_ovr      { width: 135px;  }
    .medium_large_button_ovr-back { width: 135px;  }
}


/**************************************************************************************************************************************************************

                                            Classes used per page (.aspx) or control (.ascx). 

***************************************************************************************************************************************************************/

/*=====================================================================  Refill - RxEntry ===================================================================== */
.rxentry_container          { margin:auto; width:100%; display:table; }
.patient_title_bkg          { background-color: #575757; padding: 5px 5px 5px 5px; }
.patient_title              { color: White; font-size: 0.9em; }
.checkBox_cursor_pointer input{ cursor: pointer; }
.dl-rx-mouseover            { display:table-row; background-color:#DDDDDD;	cursor:pointer; }
.dl-rx-item                 { display:table-row; background-color:White; }
.rx-cell                    { width:33%; display:table-cell; }
.HideHiddenRxs              { display:none; }
.ord_info_text              { font-size: 0.9em}
.right_label                { width: 250px; }
.tc_rxEntryStore            { display: table-cell;}
.AdditionalRxMsg            { FONT-SIZE: 1.0em; FONT-WEIGHT: bold; color: maroon;}
.AdditionalReviewMsg        { font-size: 0.9em; color: maroon;}
@media screen and (max-width:599px) {
    .rxentry_container      { margin:auto; width:100% }
    .rx-cell                { width:100%; display:block; }
    .ord_info_text          { font-size: 0.7em}
    .tc_rxEntryStore         { display: block;}
}

/*===================================================================== OutsideTransfer===================================================================== */
.std_container              { width:95%; margin:20px; }
.row_padding                { padding: 10px 0px 10px 0px; }

/*===================================================================== TransferResults ===================================================================== */
.spec_svc_list              { color:blue; font-size: 0.8em; }
.locator_section            { border:1px solid lightgray;display:inline-block; height: 80%; width: 49%; vertical-align: top; }
.tc_get_dir_btn             { text-align: left; width: 50%; }
.tc_dir_back                { text-align: right; width: 50%; }
.direction_section          { height:100%; overflow-y:auto; overflow-x:hidden; text-align:center;}
.google_drive_dirs          { width:95%; text-align:center; }
.direction_section_btn      { max-width:198px; width: 100%; }

@media screen and (max-width:599px) {
    .locator_section        { width: 100%;}
    .tc_get_dir_btn         { text-align: center; width: 100%;}
    .tc_dir_back            { display: none; }
}

/*===================================================================== Choose Language ===================================================================== */
.choose_lang_tbl            { width:100%;text-align:center;margin:auto;padding-top:30px; }
/*===================================================================== Choose Pickup Time ===================================================================== */
.cpt_hidden                 { display: none; }

/*===================================================================== PickupDayAndTime===================================================================== */
.pkup_day_time_section-row  { display:block;}

/*===================================================================== Confirmation===================================================================== */
.confirmation-row           { display:block; text-align:center; padding: 20px 0px 20px 0px; }

/*===================================================================== Mail=====================================================================  */
.mail-cc-options            { display:block; text-align:center; margin:4px; }

/*=====================================================================  PharmacyInfo ===================================================================== */
#pv_container               { max-width: 260px; display: inline-block; text-align: center; }
.pharmacyInfo_leftAligned #pv_container { max-width: none; text-align: left; }
.pharmacyInfo_leftAligned #pv_container .pv_title { font-weight: normal; }
#pv_titleContainer          { margin-bottom: 5px; }
.pv_title                   { font-weight: bold; text-align: left; }
.pv_info                    { text-align: left; color: #5C5C5C; }
.pv_hoursDiv                { display: inline-block; text-align: left; margin-top: 5px; cursor: pointer; }
.pv_hoursDiv label          { cursor: pointer; }
#pv_weeklyHours .pv_lastRowVisible { display: none; }
#pv_weeklyHours tr:last-child .pv_lastRowVisible { display: inline; }

/* ===================================================================== Pickup Options ===================================================================== */
#po_container               { margin: 10px 2px; padding-top: 8px; padding-bottom: 10px; border-style: outset; border-width: 1px; border-color: LightGrey; text-align: center; }
#po_center_container        { display: inline-block; }
#po_options_container       { display: block; margin: 10px 0px 0px 20px; text-align: left; }
.po_title                   {  display: inline-block;  font-weight: bold; margin: 5px 0px; vertical-align: top; }
.po_radioBtn_container      { display: inline-block; position: relative; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: top; }
.po_radioButton             { width: 180px; vertical-align: top; }
.po_radioButton_option      { float: right; margin-left: 5px; }
#po_pharmacyView            { margin: 10px 0px 10px 40px; }

/*===================================================================== Manage Config ===================================================================== */
.AlternateItemStyle         { background-color: #DDDDDD; }
.ItemStyle                  { background-color: #EEEEEE; }
.GridHeadline               { COLOR: #ECE66A; /*Rx Central Yellow*/    background-color: #293170; /*Rx Central Blue*/    FONT-WEIGHT:700;    FONT-SIZE: 10pt; }
.HeaderTop                  {    FONT-SIZE: 14pt;    color: #293170; /*Rx Central Blue*/ }

/* ===================================================================== Login ===================================================================== */
.login_section              { display:inline-block; width: 45%; vertical-align: top; padding: 5px 5px 5px 5px;}
.login_separation           { border-right:1px dotted gray; border-bottom: 0px; }
.login_title                { display:block; padding: 10px 10px 10px 10px;text-align:center;}
.login_guest_sub_section    { width:300px; margin:auto;}
.login_secton_modify        { width: 100%; }
.login_sso_timedout_msg     { FONT-SIZE: 12pt; display:block; padding: 5px 5px 5px 7px;}

@media screen and (max-width:599px) {
    .login_section          { width: 100%;}
    .login_separation       {border-right:0px; border-bottom: 1px dotted gray;}
}


/*===================================================================== UserRegistration ===================================================================== */
.us_container                   { position: relative; height: auto; margin-top: 10px; border-style: outset; border-width: 1px; border-color: LightGrey; }
.us_sidebar                     { position: absolute; width: 30%; height: 100%; float: left; background-color: #EFEFEF;} 
.us_content                     {  margin: 10px auto; padding-left: 30%;}  
.us_section                     { margin: 10px 10px 40px 10px; padding: 0px;} 
.us_header                      { margin-top: 25px; text-align: center; background-color: #444455; color: White; font-family: Tahoma, Arial, Helvetica, Verdana, 'Trebuchet MS'; 
                                  font-size: 14pt; padding: 2pt 0px 2pt 0px;}
.us_sidebar span                { display: block; margin-top: 5px; margin-left: 5px; }
.us_section-header              { margin-left: 20px;   }
.us_sub-section                 { margin: 10px 5%; padding: 5px; border-style: solid; border-width: 1px; border-color: #ddd;}
.us_pharmacy-view_container     { display: block; margin-bottom: 20px;   }
.us_pharmacy-view               { display: inline-block; text-align: left; margin: 5px 0px;}
.us_section_home-pharmacy       { text-align: center;}
.us_section_home-pharmacy input { width: 60px;   }
.us_textBox                     { margin-bottom: 5px;   }
.us_section_user-information    { text-align: center;   }
.us_userInfo-container          { display: inline-block; text-align: right;}
.us_userInfo-container > *      { margin: 5px 0px;} 
.us_userInfo-container input    { width: 150px;}
.us_userInfo-validator          { max-width: 200px; text-align: left;}
.us_hidden                      { display: none;   }
.us_change-button               { display: block; float: none; margin: 10px auto 0px auto;}
.us_settings-button             { display: block; margin: 10px auto;}
.us_input-container             { display: block; margin: 5px; text-align: center;}
.us_input-container span        { display: block; margin: 15px 0px 2px 0px; text-align: center;}
.us_input-container input       { max-width: 200px;}
.us_input-container select      { width: 200px;  }
.us_submit-button               { display:block; width: 80px; margin: 20px auto 5px auto;   }
.us_page-options                { margin: 20px auto 0px auto; text-align: center;   }
.us_page-options span           { display: block; margin-top: 5px;   }
.rd_content-header              { display: block;}
.rd_section-header              { display: block; margin-left: 10px; margin-bottom: 10px;}
.rd_section-details             { display: inline-block; margin: 0px 10px;}
.rd_section-row                 { margin: 15px 0px;}
.rd_section-row input           { width: 200px; font: inherit;}
.rd_section-row select          { width: 50%; font: inherit;}
.rd_section-row span            { display: inline-block; text-align: right; width: 40%; margin-right: 10px;}
.rd_section-error               { margin-left: 10px;}
.rd_section-error::after        { content: '\A'; white-space: pre;}
.rd_section-help_btn            { margin-left: 5px; vertical-align: sub;}
.rd_section-row .rd_row-label   { width: auto; text-align: left; display:inline;}
.rd_section-row .rd_row-go_btn  { width: auto; vertical-align: middle; display:inline;}
.rd_page-options                { text-align: center;}
.rd_page-options > input        { margin-top: 10px;}
.rd_error                       { display: inline-block; margin: 0px 0px 10px 20px;}
.us_tc_HomePharmacy                { display:table-cell; padding: 3px;}
@media screen and (max-width:599px) {
 .rd_section-row span           { display:block; text-align: left; width: auto; margin-left: 10px; }
 .rd_section-row input          { margin-left: 10px; width: 90%; }
 .rd_section-row select         { margin-left: 10px; width: 90%; }
 .us_container                  { border-width: 0px; } 
 .us_sidebar                    { display: none; } 
 .us_content                    { margin: 0px auto; padding-left: 0%; } 
 .us_section                    { margin: 5px 10px 10px 10px; padding: 10px 5px; border-style: outset; border-width: 1px; border-color: LightGrey; } 
 .us_header                     { margin-top: 25px; margin-bottom: 20px; text-align: center; background-color: #444455; color: White; 
                                  font-family: Tahoma, Arial, Helvetica, Verdana, 'Trebuchet MS'; font-size: 14pt; padding: 2pt 0px 2pt 0px;  }
 .us_tc_HomePharmacy            { display:block; }
}
/* ===================================================================== user header ===================================================================== */
.uh_div_hdr                     { text-align:center;padding: 10px 0px 10px 0px; width:90%; }
.uh_hdr_img                     { width: 100%; }
.uh_login_section               { position: absolute; vertical-align: text-top; top: 10px; right: 10px; text-align: right; }
.uh_user_name                   { font-size: 12pt; color:black;}
/* ===================================================================== Rx Details ===================================================================== */
.rd_section                     { text-align:center; margin: 15px 0px; padding: 5px 0px;}
.rd_pillImageContainer          { display: inline-block; width: 160px; margin-bottom: 20px; padding-right: 10px;}
.rd_rxInfoContainer             { display: inline-block; max-width: 500px; text-align: left; vertical-align: top;}
.rd_rxInfoContainer > div:nth-last-child(n+2){ margin-bottom: 10px;}
.rd_pillImage                   { display: block; max-width: 160px; height: auto; margin-bottom: 5px; margin-right: 10px;}
.rd_rxInfoContainer strong      { font-size: 9pt; letter-spacing: -0.05em; color: #5C5C5C;}
.rd_rxInfo                      { display: inline-block; max-width: 370px;}
.rd_section input[type=image]   { vertical-align: bottom;}
.rd_enrollmentOptions           { margin-top: 20px;}
.rd_enrollmentOptions span      { margin-right: 5px; margin-left: 5px;}
.rd_section:nth-child(n + 3)    { max-width: 670px; border: 1px solid #D3D3D3;}
.rd_section:nth-child(2)        { max-width: 500px;}
.rd_enrollmentHelpImg           { vertical-align: bottom; margin-left: 5px;}
@media screen and (max-width:599px) 
{
 .rd_pillImage                  { margin-bottom: 5px; }
 .rd_rxInfoContainer            { display: block; margin-left: 5px; }
 .rd_rxInfoContainer strong     { display: block; }
}

/* ===================================================================== Schedule View ===================================================================== */
#sv_container                   { margin: 0 auto; text-align: center; border-width:1px; border-style:solid; padding: 8px 8px 8px 8px; border-color: silver; width: 80%;}
#sv_titleContainer              { display: inline-block; margin-bottom: 20px;}
#sv_titleContainer span         { font-weight: bold;   }
.sv_optionsContainer            { display: inline-block;}
#sv_optionsContainer a          { margin-right: 20px;}

/* ===================================================================== Create Schedule ===================================================================== */
.SchedulesList                  { width: 100%;}

/* ===================================================================== Edit Daily Schedule ===================================================================== */
#ds_timeList                    { display: none; list-style: none; overflow: auto; margin: 0px; padding: 0px;}
#ds_timeList li                 { margin: 0px 0px 5px 0px; }
.ds_timeInput                   { width: 50px;}
.ds_container                   { display: block; max-width: 300px;	padding: 5px 0px;	margin: 0px auto; border: 1px solid #dddddd;background: #eeeeee; }
.ds_listTitle                   { display: inline-block; font-weight: bold;  margin-bottom: 10px; }

/* ===================================================================== Edit Period Schedule ===================================================================== */
.ps_dayItem                     { float: left; width: 150px; height: auto; min-height: 100px; margin-bottom: 5px; margin-right: 5px; border: 1px solid #dddddd;	background: #eeeeee; color: #333333;}
#ps_timePicker                  { width: 70px; }
#ps_addTimeContainer            { text-align: center; margin: 10px 0px;}
#ps_dayList                     { list-style: none; overflow: auto;  padding: 0px; margin: 0px;}
.ps_dayCellHeader               { margin: 4px 0px;   }
.ps_dayCellHeader label         { margin-left: 2px; font-weight: bold; vertical-align: middle;}
.ps_dayCellBody ul              { list-style: none; padding: 0px; margin: 5px 0px 0px 0px;}
.ps_dayCellBody li              { text-align: center; margin: 0px 0px 5px 0px;}
#ps_scheduleOptionsContainer    { margin: 2px 0px 0px 0px;}
#ps_startDateContainer          { margin: 20px 0px 0px 10px;}
.ps_btnSave                     { margin: 20px 0px 0px 10px; }
.ps_timeInput                   { width: 40px; }
.ps_txtOtherPeriod              { width: 40px; }

/* ===================================================================== Patient Statement ===================================================================== */
.pts_card                       { -webkit-box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.40); -moz-box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.40); box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.40);}
.pts_inputContainer             { display: inline-block; width: 200px; height: 24px; vertical-align: middle; margin-bottom: 5px;}
.pts_btnContainer               { display: inline-block; vertical-align: text-bottom;   }
.pts_parametersContainer        { padding: 20px; margin: 20px auto 0px auto; max-width: 500px; background-color: #F5F5F5;}
.pts_parametersContainer span   { display: inline-block; width: 80px;   }
.pts_datePicker                 { width: 100px;}
.pts_statementContainer         { max-height: 600px; padding: 10px; margin-top: 20px; overflow-y: auto;}
.pts_statementHeader            { display: block; text-align: center; margin: 20px;}
.pts_outputContainer            { text-align: right;}
.pts_pageOptions                { margin: 30px auto 0px auto; text-align: center;   }
@media screen and (max-width:599px) 
{
 .pts_parametersContainer       { max-width: 200px;  margin-top: 0px; } 
 .pts_statementContainer        { max-height: 300px; } 
 .pts_inputContainer            { display: block; }
  .pts_btnContainer             { display: block; margin-left: 84px; }
}

/* ===================================================================== Verification View ===================================================================== */
.vv_forms                       { margin: 10px 0px; text-align: left;}
.vv_formsSelection              { text-align: left;}
.vv_formsList                   { margin-left: 0px;}
.vv_message                     { display: block; margin: 5px 0px;}
.vv_field                       { display: block; width: 100%; margin-top: 5px;}
.vv_button                      { display: block; text-align: center; margin: 15px auto;}
.vv_question                    { display: block; margin: 5px 0px;}
.vv_choices                     { display: block; width: 100%;}
.vv_error                       { display: block; text-align: center; }

/* ===================================================================== Admin Page ===================================================================== */
.admin_header                   { text-align: center; background-color: #444455; color: White; font-family: Tahoma, Arial, Helvetica, Verdana, 'Trebuchet MS'; 
                                  font-size: 14pt; padding: 2pt 0px 2pt 0px; max-width: 800px; margin: 20px auto ;}
.admin_container                { max-width: 780px; margin: auto auto 20px auto; padding: 10px; -webkit-box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.40); 
                                  -moz-box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.40); box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.40);}
.admin_logOffBtn                { position: absolute; top: 10px; right: 10px;}
.admin_loginContainer           { max-width: 300px; margin: 10px auto;}
.admin_loginContainer-header    { width: 250px !important; margin-bottom: 30px;}
.admin_loginContainer input     { display: inline-block; max-width: 250px; margin-top: 6px;}
.admin_loginContainer span      { display: inline-block; width: 90px; margin-top: 2px; text-align: left;}
.admin_loginContainer-button    { display: inline-block; max-width: 260px !important; margin-top: 30px !important; margin-left: 0px;}
.admin_loginContainer-error     { width: auto !important; text-align: left !important; margin-top: 5px;}
.admin_inputContainer           { max-width: 700px; margin: 10px auto; text-align:center;}
.admin_inputContainer table     { margin: 10px auto; }
.admin_inputContainer input     { display: inline-block; max-width: 200px; margin-top: 2px;}
.admin_inputContainer span      { display: inline-block; width: 140px; margin-top: 2px; text-align: right;}
.admin_inputContainer-button    { display: inline-block; width: 110px; margin-left: 144px; margin-top: 6px !important;}
.admin_inputContainer-error     { width: auto !important; margin-left: 134px; text-align: left !important; display:block;}
.admin_searchGrid               { margin-bottom: 10px; }
.admin_center                   { text-align: center; }
.admin_changePassResult         { display: block; text-align: center;}

/* ===================================================================== Update Account ===================================================================== */
.ua_body{    max-width: 990px;    margin: 0px auto;}

@media screen and (max-width:599px) 
{
 .ua_container                  { border-width: 0px; }
 .ua_sidebar                    { display: none; } 
 .ua_content                    { margin: 0px auto; padding-left: 0%; }
 .ua_section                    { margin: 5px 10px 10px 10px; padding: 10px 5px; border-style: outset; border-width: 1px; border-color: LightGrey; }
 .ua_header                     { margin-top: 25px; margin-bottom: 20px; text-align: center; background-color: #444455; color: White; 
                                  font-family: Tahoma, Arial, Helvetica, Verdana, 'Trebuchet MS'; font-size: 14pt; padding: 2pt 0px 2pt 0px;  }
}
@media screen and (min-width:600px) 
{
 .ua_container                  { position: relative; height: auto; margin-top: 10px; border-style: outset; border-width: 1px; border-color: LightGrey; }
 .ua_sidebar                    { position: absolute; width: 30%; height: 100%; float: left; background-color: #EFEFEF; }
 .ua_content                    { margin: 20px auto; padding-left: 30%; }   
 .ua_section                    { margin: 5px 10px 10px 10px; padding: 5px 0px; } 
 .ua_header                     { margin-top: 25px; text-align: center; background-color: #444455; color: White; font-family: Tahoma, Arial, Helvetica, Verdana, 'Trebuchet MS'; 
                                  font-size: 14pt; padding: 2pt 0px 2pt 0px; }
}
.ua_sidebar span                { display: block; margin-top: 5px; margin-left: 5px; }
.ua_content                     { text-align: center;   }
.ua_content-center              { display: inline-block; text-align: left; margin: 0px 10px; max-width: 400px;}
.ua_fields                      { display: inline-block;   }
.ua_fields-center               { display: block; margin: 15px auto 0px auto;    }
.ua_fields span                 { display: inline-block; width: 150px; margin: 3px 0px;}

/* ===================================================================== Forgot Username ===================================================================== */
.fu_body                        { max-width: 990px; margin: 0px auto;}
@media screen and (max-width:599px) 
{
 .fu_container                  { border-width: 0px; }
 .fu_sidebar                    { display: none; } 
 .fu_content                    { margin: 0px auto; padding-left: 0%; } 
 .fu_header                     { margin-top: 25px; margin-bottom: 20px; text-align: center; background-color: #444455; color: White; 
                                  font-family: Tahoma, Arial, Helvetica, Verdana, 'Trebuchet MS'; font-size: 14pt; padding: 2pt 0px 2pt 0px;   }
 .rp_sidebar                    { display: none; }
 .rp_label_std                  { FONT-WEIGHT: normal; FONT-SIZE: 9pt; FONT-FAMILY: Arial, Tahoma, Helvetica, Verdana, 'Trebuchet MS' }
}
@media screen and (min-width:600px) 
{
 .fu_container                  { position: relative; height: auto; margin-top: 10px; border-style: outset; border-width: 1px; border-color: LightGrey; }
 .fu_sidebar                    { position: absolute; width: 30%; height: 100%; float: left; background-color: #EFEFEF; } 
 .fu_content                    {  margin: 20px auto; padding-left: 30%; }   
 .fu_section                    { margin: 5px 10px 10px 10px; padding: 5px 0px; } 
 .fu_header                     { margin-top: 25px; text-align: center; background-color: #444455; color: White; 
                                  font-family: Tahoma, Arial, Helvetica, Verdana, 'Trebuchet MS'; font-size: 14pt; padding: 2pt 0px 2pt 0px; }
 .rp_sidebar                    { background-color: #EFEFEF; }
 .rp_label_std                  { FONT-WEIGHT: normal; FONT-SIZE: 12pt; FONT-FAMILY: Arial, Tahoma, Helvetica, Verdana, 'Trebuchet MS' }
}
.fu_container                   { min-height: 200px; margin-bottom: 40px;}
.fu_content                     { max-width: 500px; margin: 0px auto;}
.fu_section_header              { display: block; margin: 15px 0px 10px 0px;}
.fu_section_error               { display: block; margin-top: 10px;}
.fu_submit_button               { display: block; margin: 40px auto; max-width: 180px;}
.fu_sidebar span                { display: block; margin-top: 5px; margin-left: 5px; }

/* ===================================================================== Terms and Condition control ===================================================================== */
.terms_bg                       { display:none; position: fixed; left:0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); }
.terms_modal                    { background-color: #fefefe; position: absolute; left:50%; top: 50%; transform: translate(-50%, -50%); width: 85%; height: 85%; padding: 20px; }
.terms_content                  { display:block; height: 90%; overflow-x: auto; }

/*
    //Animation test

.form_label_warning { animation: breathing 0.75s 1; }

@keyframes breathing{
    0%{ font-size:5px;  }
    10%{ font-size:6px;  }
    20%{ font-size:7px;  }
    30%{ font-size:8px;  }
    37%{ font-size:9px;  }
    47%{ font-size:10px; }
    55%{ font-size:11px; }
    65%{ font-size:12px; }
    100%{ font-size:12px; }
}
 
.form_label_error { animation: blinking 0.75s 1; }

@keyframes blinking{
0%{   color: red;   }
47%{   color: #000; }
62%{   color: transparent; }
97%{   color:transparent; }
100%{  color: #000;   }
}

*/   