/*********************************** M O D I F I C A T I O N   L O G ***********************************
 Modified by  DD-MMM-YYYY  Description
 -----------  -----------  ------------------------------------------------------
 Rafi Malik                - New module.
 Rafi Malik   20-SEP-2021  - Changes for Daily Sale File.
 Rafi Malik   20-SEP-2021  - Added #region Label Buttons
 Rafi Malik   10-OCT-2021  - Changed color scheme to Osmow's (Changing #FF9900 to #D92128)
 Rafi Malik   17-APR-2025  - Changed height from 40px to 50px in #Header and color from #D92128; to #636363;, having added the product logo
*********************************** M O D I F I C A T I O N   L O G ***********************************/

/* #region Link Colors */

/* changed color scheme to Osmow's - didn't rename color description from white*/
a.link_white:link {color:#000000;text-decoration:none;font-size:small;}
a.link_white:visited {color:#000000;text-decoration:none;}
a.link_white:hover {color:#D92128;text-decoration:none;}
a.link_white:active {color:#000000;text-decoration:none;}
a.link_blue:hover {color:#D92128;text-decoration:none;}

a.link_small:link {color:#474747;text-decoration:underline;font-size: 100%;}
a.link_small:visited {color:#474747;text-decoration:underline;font-size: 100%;}
a.link_small:hover {color:#D92128;text-decoration:underline;font-size: 100%;font-weight:bold}

/* #endregion Link Colors */

/* #region Misc */

#content
{
    width:1080px;
    margin:0 auto 0 auto;
}

#Header
{
    background-color: #FFFFFF;
    color: #636363;
    width: 1080px;
    height: 50px;
    font-family: Segoe UI, Arial;
}
	
*
{
    font-family: Segoe UI, Arial;
    font-size: 16px;
    margin-left: 7px;
}

#h1
{
    font-size: 18px;
}

#MenuWrapper {
    /*    background-color: #D92128;    Web Portal Name background color - #D92128; is Osmow's red color
    color: #FFFFFF;*/
    background-color: #E0E0E0; /*menu ribbon bar background color - light gray*/
    font-size: 14px;
    width: 1080px;
    height: 30px;
}

#MainContent
{
    width: 1080px;
    float: left;
}

#Footer {
    background-color: #212331; /*footer background color*/
    /*color: #D92128;*/
    color: white;
    width: 1080px;
    clear: both;
    height: 27px;
    /*font-weight: bold;*/
}

.t {
    display: inline;
    font-weight: bold;
}

.Hide {
    display: none;
}

.Inline {
    display: inline;
}

.PicHeader {
    text-align: center;
    background-color: #D92128;
    color: #FFFFFF;
    width: 690px;
    clear: both;
    height: 10px;
}

.PicBase {
    text-align: center;
    background-color: #D92128;
    color: #FFFFFF;
    width: 500px;
    clear: both;
    height: 25px;
}

.PageTitle {
    font-size: 20pt;
    font-weight: bold;
}

.MaxWidth100 {
    max-width: 100px;
}

.MaxWidth200 {
    max-width: 2100px;
}

/*.RadioButtonList label {
    margin-right: 10px;   NOT WORKING IN C#  */
}  

/* #endregion Misc */

/* #region Text Styles */

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.bolditalic {
    font-weight: bold;
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.FontSize75Pct {
    font-size: 25%;
}

.FontSize100Pct {
    font-size: 100%;
}

.TextAlignRightBold {
    text-align: right;
    font-weight: bold;
}

.FontSizeSmaller {
    font-size: smaller;
}

/* #endregion Text Styles */

/* #region Alignment Styles */

.VerticalAlignTop {
    vertical-align: top;
}

.VerticalAlignMiddle {
    vertical-align: middle;
}

.VerticalAlignBottom {
    vertical-align: bottom;
}

.TextAlignRight {
    text-align: right;
}

.TextAlignCenter {
    text-align: center;
}

.TextAlignLeft {
    text-align: left;
}

.TextAlignLeftItalic {
    text-align: left;
    font-style: italic;
}

.TextAlignRightItalic {
    text-align: right;
    font-style: italic;
}

.TextAlignCenterMiddle {
    text-align: center;
    vertical-align: middle;
}

.TextAlignRightMiddle {
    text-align: right;
    vertical-align: middle;
}

.ImageAlignHorizontal {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

/* #endregion Alignment Styles */

/* #region Border Color Styles */

.BorderRightColorWhite {
    border-right-color: #FFFFFF;
}

.BorderRightColorOrange {
    border-right-color: #D92128;
}

.BorderRightColorBlack {
    border-right-color: #000000;
}

.BorderBottomColorWhite {
    border-bottom-color: #FFFFFF;
}

.BorderBottomColorOrange {
    border-bottom-color: #D92128;
}

.BorderBottomColorBlack {
    border-bottom-color: #000000;
}

/* #endregion Border Color Styles */

/* #region Auto-Generated Styles */

.style1 {
    font-size: x-small;
}

.style2 {
    width: 100%;
    height: 20px;
}

.style4 {
    font-size: small;
}

.style5 {
    font-size: 5pt;
}

.style6 {
    width: 649px;
}

.style7 {
    font-size: 20pt;
}

.style8 {
}

/* #endregion Auto-Generated Styles */

/* #region Button Styles */

.ButtonClass {
    background: #D92128; /*#D92128; is Osmow's red color*/
    color: White;
    height: 35px;
}

.ButtonSquareClass {
    background: #D92128; /*#D92128; is Osmow's red color*/
    color: White;
    height: 27px;
    width: 27px;
}

.ButtonSelectClass {
    background: #D92128; /*#D92128; is Osmow's red color*/
    color: White;
    height: 30px;
}

/* #endregion Button Styles */



/* #region Snackbar  */

#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

/* #endregion Snackbar  */


/* #region AjaxCalendar */

.AjaxCalendar .ajax__calendar_container
{
    border: 1px solid #646464;
    background-color: lemonchiffon;
    color: Background;
    width:215px;
    padding: 10px;
    z-index: 1000;
}
.AjaxCalendar .ajax__calendar_body, .AjaxCalendar .ajax__calendar_header, .AjaxCalendar .ajax__calendar_footer
{
    color: darkblue;
    width:auto;
}
.AjaxCalendar .ajax__calendar_other .ajax__calendar_day, .AjaxCalendar .ajax__calendar_other .ajax__calendar_year
{
    color: #CC9966;
}
.AjaxCalendar .ajax__calendar_hover .ajax__calendar_day
{
    color: #D92128;
}
.AjaxCalendar .ajax__calendar_active .ajax__calendar_day, .AjaxCalendar .ajax__calendar_active .ajax__calendar_month, .AjaxCalendar .ajax__calendar_active .ajax__calendar_year
{
    color: darkblue;
    font-weight: bold;
}
.AjaxCalendar .ajax__calendar_container td
{
    border:none
}

/* #endregion AjaxCalendar */

/* #region Label Buttons */

.labelButtonGreen {
    background-color: #44c767;
    border-radius: 28px;
    border: 1px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 12px;
    padding: 5px 7px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #2f6627;
}

    .labelButtonGreen:hover {
        background-color: #5cbf2a;
    }

    .labelButtonGreen:active {
        position: relative;
        top: 1px;
    }


.labelButtonLightGray {
    margin: 0 0 1.2em 0;        /*to left align lable with the rest of the control--1.2em for bottom margin*/
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
    background-color: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    cursor: pointer;
    color: #666666;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffffff;
}

    .labelButtonLightGray:hover {
        background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
        background-color: #e9e9e9;
    }

    .labelButtonLightGray:active {
        position: relative;
        top: 1px;
    }

/* #endregion Label Buttons */

/* #region Checkbox Styles */

/* Customize the label (the container) */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */


.main {
    display: block;
    position: relative;
    padding-left: 45px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 20px;
}

h1 {
    color: orange;
}
/* Hiding the initial checkbox <<<<< 2022-02-25 - moved to AddServiceInvoice.aspx so as not to apply this globally*/
/*input[type=checkbox] {
    visibility: hidden;
}*/
/* Creating a custom checkbox based on demand */
.w3docs {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: lightgray;
}
/* Specify the background color to be shown when hovering over checkbox */
.main:hover input ~ .w3docs {
    background-color: gray;
}
/* Specify the background color to be shown when checkbox is active */
.main input:active ~ .w3docs {
    background-color: white;
}
/* Specify the background color to be shown when checkbox is checked */
.main input:checked ~ .w3docs {
    background-color: green;
}
/* Checkmark to be shown in checkbox */
/* It is not be shown when not checked */
.w3docs:after {
    content: "";
    position: absolute;
    display: none;
}
/* Display checkmark when checked */
.main input:checked ~ .w3docs:after {
    display: block;
}
/* Styling the checkmark using webkit */
/* Rotated the rectangle by 45 degree and 
      showing only two border to make it look
      like a tickmark */
.main .w3docs:after {
    left: 8px;
    bottom: 5px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}






/*.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}*/

/* On mouse-over, add a grey background color */
/*.container:hover input ~ .checkmark {
    background-color: #ccc;
}*/

/* When the checkbox is checked, add a green background */
/*.container input:checked ~ .checkmark {
    background-color: #07a616;
}*/

/* Create the checkmark/indicator (hidden when not checked) */
/*.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}*/

/* Show the checkmark when checked */
/*.container input:checked ~ .checkmark:after {
    display: block;
}*/

/* Style the checkmark/indicator */
/*.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}*/

/* #endregion Checkbox Styles */

/* #region Table Styles */

/* #region MyFormattedTable */

table.MyFormattedTable {
  border-collapse: collapse;
  border: 2px solid #C5BA85;
  font: normal 8px verdana, arial, helvetica, sans-serif;
  color: #333333;
  background: #CCCCCC;
  }
.MyFormattedTable caption {
  padding: 0 .4em .4em;
  text-align: left;
  font-size: 75%;
  font-weight: bold;
  text-transform: uppercase;
  color: #333333;
  background: transparent;
  }
.MyFormattedTable td, .MyFormattedTable th {
  color: #636363;
  border: 1px solid #cc9;
  padding: .3em;
  font-size: 75%;
  }
.MyFormattedTable thead th, .MyFormattedTable tfoot th {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  border: transparent;
  text-align: left;
  font-size: 75%;
  font-weight: bold;
  color: #333333;
  background: #C5BA85;
  }
.MyFormattedTable tbody td a {
  background: transparent;
  color: #72724c;
  text-decoration: none;
  font-size: 75%;
  }
.MyFormattedTable tbody td a:hover {
  background: transparent;
  color: #636363;
  }
.MyFormattedTable tbody th a {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  background: transparent;
  color: #333333;
  text-decoration: none;
  font-weight:normal;
  }
.MyFormattedTable tbody th a:hover {
  background: transparent;
  color: #333333;
  }
.MyFormattedTable tbody th, tbody td {
  vertical-align: top;
  text-align: left;
  }
.MyFormattedTable tfoot td {
  border: 1px solid #C5BA85;
  background: #C5BA85;
  }
.odd {
  background: #91AB59;
  }
.MyFormattedTable tbody tr:hover {
  color: #333444;
  background: #DDCFAE;
  }
.MyFormattedTable tbody tr:hover th,
.MyFormattedTable tbody tr.odd:hover th {
  background: #C5BA85;
  }


table.MyFormattedTableLargerFont {
  border-collapse: collapse;
  border: 2px solid #C5BA85;
  font: normal 8px verdana, arial, helvetica, sans-serif;
  color: #333333;
  background: #CCCCCC;
  }
.MyFormattedTableLargerFont caption {
  padding: 0 .4em .4em;
  text-align: left;
  font-size: 85%;
  font-weight: bold;
  text-transform: uppercase;
  color: #333333;
  background: transparent;
  }
.MyFormattedTableLargerFont td, .MyFormattedTableLargerFont th {
  color: #636363;
  border: 1px solid #cc9;
  padding: .3em;
  font-size: 85%;
  }
.MyFormattedTableLargerFont thead th, .MyFormattedTableLargerFont tfoot th {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  border: transparent;
  text-align: left;
  font-size: 85%;
  font-weight: bold;
  color: #333333;
  background: #C5BA85;
  }
.MyFormattedTableLargerFont tbody td a {
  background: transparent;
  color: #72724c;
  text-decoration: none;
  font-size: 85%;
  }
.MyFormattedTableLargerFont tbody td a:hover {
  background: transparent;
  color: #636363;
  }
.MyFormattedTableLargerFont tbody th a {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  background: transparent;
  color: #333333;
  text-decoration: none;
  font-weight:normal;
  }
.MyFormattedTableLargerFont tbody th a:hover {
  background: transparent;
  color: #333333;
  }
.MyFormattedTableLargerFont tbody th, tbody td {
  vertical-align: top;
  text-align: left;
  }
.MyFormattedTableLargerFont tfoot td {
  border: 1px solid #C5BA85;
  background: #C5BA85;
  }
.odd {
  background: #91AB59;
  }
.MyFormattedTableLargerFont tbody tr:hover {
  color: #333444;
  background: #DDCFAE;
  }
.MyFormattedTableLargerFont tbody tr:hover th,
.MyFormattedTableLargerFont tbody tr.odd:hover th {
  background: #C5BA85;
  }

/* #endregion MyFormattedTable */

/* #region MyScheduleTable */

table.MyScheduleTable {
  border-collapse: collapse;
  border: 1px solid #C5BA85;
  font: normal 8px verdana, arial, helvetica, sans-serif;
  color: #333333;
  background: #ffffff;
  }
.MyScheduleTable caption {
  padding: 0 .4em .4em;
  text-align: left;
  font-size: 75%;
  font-weight: bold;
  text-transform: uppercase;
  color: #333333;
  background: transparent;
  }
.MyScheduleTable td, .MyScheduleTable th {
    color: #636363;
    border: 1px solid #cc9;
    padding-left: 0;
    /*margin-right: 25px;*/
    /*margin-left: 25px;*/
    font-size: 75%;
}
.MyScheduleTable thead th, .MyScheduleTable tfoot th {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  border: transparent;
  text-align: left;
  font-size: 75%;
  font-weight: bold;
  color: #333333;
  background: #C5BA85;
  }
.MyScheduleTable tbody td a {
    background: transparent;
    color: #72724c;
    /*padding-right: 15px;
    padding-left: 15px;*/
    /*margin-right: 25px;
    margin-left: 25px;*/
    text-decoration: none;
    font-size: 75%;
}
.MyScheduleTable tbody td a:hover {
  background: transparent;
  color: #636363;
  }
.MyScheduleTable tbody th a {
  font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
  background: transparent;
  color: #333333;
  text-decoration: none;
  font-weight:normal;
  }
.MyScheduleTable tbody th a:hover {
  background: transparent;
  color: #333333;
  }
.MyScheduleTable tbody th, tbody td {
  vertical-align: top;
  text-align: left;
  }
.MyScheduleTable tfoot td {
  border: 1px solid #C5BA85;
  background: #C5BA85;
  }
.odd {
  background: #91AB59;
  }
.MyScheduleTable tbody tr:hover {
  color: #333444;
  background: #DDCFAE;
  }
.MyScheduleTable tbody tr:hover th,
.MyScheduleTable tbody tr.odd:hover th {
  background: #C5BA85;
  }

/* #endregion MyScheduleTable */





/* #region TableWithFloralWhiteBackground */

table.TableWithFloralWhiteBackground {
    border-collapse: collapse;
    border: 2px solid #C5BA85;
    font: normal 8px verdana, arial, helvetica, sans-serif;
    color: #333333;
    background: #FFFAF0;
}

.TableWithFloralWhiteBackground caption {
    padding: 0 .4em .4em;
    text-align: left;
    font-size: 85%;
    font-weight: bold;
    text-transform: uppercase;
    color: #333333;
    background: transparent;
}

.TableWithFloralWhiteBackground td, .TableWithFloralWhiteBackground th {
    color: #636363;
    border: 1px solid #cc9;
    padding: .3em;
    font-size: 85%;
}

.TableWithFloralWhiteBackground thead th, .TableWithFloralWhiteBackground tfoot th {
    font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
    border: transparent;
    text-align: left;
    font-size: 85%;
    font-weight: bold;
    color: #333333;
    background: #C5BA85;
}

.TableWithFloralWhiteBackground tbody td a {
    background: transparent;
    color: #72724c;
    text-decoration: none;
    font-size: 85%;
}

    .TableWithFloralWhiteBackground tbody td a:hover {
        background: transparent;
        color: #636363;
    }

.TableWithFloralWhiteBackground tbody th a {
    font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
    background: transparent;
    color: #333333;
    text-decoration: none;
    font-weight: normal;
}

    .TableWithFloralWhiteBackground tbody th a:hover {
        background: transparent;
        color: #333333;
    }

.TableWithFloralWhiteBackground tbody th, tbody td {
    vertical-align: top;
    text-align: left;
}

.TableWithFloralWhiteBackground tfoot td {
    border: 1px solid #C5BA85;
    background: #C5BA85;
}

.odd {
    background: #91AB59;
}

.TableWithFloralWhiteBackground tbody tr:hover {
    color: #333444;
    background: #DDCFAE;
}

    .TableWithFloralWhiteBackground tbody tr:hover th,
    .TableWithFloralWhiteBackground tbody tr.odd:hover th {
        background: #C5BA85;
    }

/* #endregion TableWithFloralWhiteBackground */

/* #region TableWithFloralWhiteBackgroundSmallerFont */

table.TableWithFloralWhiteBackgroundSmallerFont {
    border-collapse: collapse;
    border: 2px solid #C5BA85;
    font: normal 8px verdana, arial, helvetica, sans-serif;
    color: #333333;
    background: #FFFAF0;
}

.TableWithFloralWhiteBackgroundSmallerFont caption {
    padding: 0 .4em .4em;
    text-align: left;
    font-size: 70%;
    font-weight: bold;
    text-transform: uppercase;
    color: #333333;
    background: transparent;
}

.TableWithFloralWhiteBackgroundSmallerFont td, .TableWithFloralWhiteBackgroundSmallerFont th {
    color: #636363;
    border: 1px solid #cc9;
    padding: .3em;
    font-size: 70%;
}

.TableWithFloralWhiteBackgroundSmallerFont thead th, .TableWithFloralWhiteBackgroundSmallerFont tfoot th {
    font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
    border: transparent;
    text-align: left;
    font-size: 70%;
    font-weight: bold;
    color: #333333;
    background: #C5BA85;
}

.TableWithFloralWhiteBackgroundSmallerFont tbody td a {
    background: transparent;
    color: #72724c;
    text-decoration: none;
    font-size: 70%;
}

    .TableWithFloralWhiteBackgroundSmallerFont tbody td a:hover {
        background: transparent;
        color: #636363;
    }

.TableWithFloralWhiteBackgroundSmallerFont tbody th a {
    font: normal 11px georgia, verdana, arial, helvetica, sans-serif;
    background: transparent;
    color: #333333;
    text-decoration: none;
    font-weight: normal;
}

    .TableWithFloralWhiteBackgroundSmallerFont tbody th a:hover {
        background: transparent;
        color: #333333;
    }

.TableWithFloralWhiteBackgroundSmallerFont tbody th, tbody td {
    vertical-align: top;
    text-align: left;
}

.TableWithFloralWhiteBackgroundSmallerFont tfoot td {
    border: 1px solid #C5BA85;
    background: #C5BA85;
}

.odd {
    background: #91AB59;
}

.TableWithFloralWhiteBackgroundSmallerFont tbody tr:hover {
    color: #333444;
    background: #DDCFAE;
}

    .TableWithFloralWhiteBackgroundSmallerFont tbody tr:hover th,
    .TableWithFloralWhiteBackgroundSmallerFont tbody tr.odd:hover th {
        background: #C5BA85;
    }

/* #endregion TableWithFloralWhiteBackgroundSmallerFont */

/* #endregion Table Styles */

/* #region Grid */

.Grid {background-color: #fff; margin: 5px 5px 10px 0; 
border: solid 1px #525252; border-collapse:collapse; font-family:Segoe UI, Arial; color: #474747;
}
.Grid td {
      padding: 2px; 
      border: solid 1px #c1c1c1; }
.Grid th  {
      padding : 4px 2px; 
      color: #fff; 
      background: #FAAC58 url(Images/grid-header.png) repeat-x top; 
      border-left: solid 1px #525252; 
      font-size: 16px; }
.Grid .alt {
      background: #F7F2E0 url(Images/grid-alt.png) repeat-x top; }
.Grid .pgr {background: #FAAC58 url(Images/grid-pgr.png) repeat-x top; }
.Grid .pgr table { margin: 3px 0; }
.Grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }   
.Grid .pgr a { color: Gray; text-decoration: none; }
.Grid .pgr a:hover { color: #000; text-decoration: none; }
.Grid th a:link {color: Blue; }
.Grid th a:visited {color: Blue; text-decoration: none; }
.Grid th a:active {color: Blue; text-decoration: none; }
.Grid th a:hover {color: Black; text-decoration: none; }

/* #endregion Grid */

/* #region GridSmall */

.GridSmall {background-color: #fff; margin: 5px 5px 10px 0; border: solid 1px BurlyWood; border-collapse:collapse; font-family:Segoe UI, Arial; color: #474747;}        /* #fff; is white (background),  #474747; is gray (text) */
.GridSmall td {padding: 2px; border: solid 1px BurlyWood; font-size: 70%;}
.GridSmall th  {padding : 4px 2px; color: #fff; background: #D92128 url(Images/grid-header.png) repeat-x top; border-left: solid 1px BurlyWood; font-size: medium; }  /* #D92128 is Osmow's red (header background), BurlyWood is brown (borders) */
.GridSmall .alt {background: #F7F2E0 url(Images/grid-alt.png) repeat-x top; }                                                                                           /* #F7F2E0 is beige (alt background) */
.GridSmall .pgr {background: #D92128 url(Images/grid-pgr.png) repeat-x top; }                                                                                           /* #D92128 is Osmow's red (pager bar background at the bottom) */
.GridSmall .pgr table { margin: 3px 0; }
.GridSmall .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px BurlyWood; font-weight: bold; color: darkgray; line-height: 12px; }   
.GridSmall .pgr a { color: white; text-decoration: none; }
.GridSmall .pgr a:hover { color: #000; text-decoration: none; }                                                                                                         /*#000; ???*/
.GridSmall th a:link {color: white; font-size: 70%; }                                                                                                                 /*#D92128; is Osmow's red color*/
.GridSmall th a:visited {color: white; text-decoration: none; }
.GridSmall th a:active {color: white; text-decoration: none; }
.GridSmall th a:hover {color: black; text-decoration: none; }
.GridSmallPager {font-size: 70%; }

/* #endregion GridSmall */

/* #region Toggle */

input#toggle {
  max-height: 0;
  max-width: 0;
  opacity: 0;
}

    input#toggle + label {
        display: block;
        position: relative;
        box-shadow: inset 0 0 0px 1px #D92128; /*#D92128; is Osmow's red color*/
        text-indent: -5000px;
        height: 20px;
        width: 40px;
        border-radius: 15px;
    }

input#toggle + label:before {
  content: "";
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  top: 0;
  left: 0;
  border-radius: 15px;
  background: rgba(19, 191, 17, 0);
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

input#toggle + label:after {
  content: "";
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  top: 0;
  left: 0px;
  border-radius: 15px;
  background: white;
  box-shadow: inset 0 0 0 1px #FF3300, 0 2px 4px rgba(0, 0, 0, .2);
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

input#toggle:checked + label:before {
  width: 40px;
  background: #009900;
}

input#toggle:checked + label:after {
    left: 20px;
    box-shadow: inset 0 0 0 1px #009900, 0 2px 4px rgba(0, 0, 0, .2);
}

/* #endregion Toggle */

/* #region Assessment Listing Table */

/*#ass_int_listing_table_wrapper{border:1px solid BurlyWood;float:left; font: normal 8px verdana, arial, helvetica, sans-serif;}*/
  /*#header{ width:1117px; border-bottom:1px solid BurlyWood; background:Bisque;}
  #header div {padding:1px 0px; overflow:hidden;}*/

/*Header cell widths*/
  #head1{float:left; width:100px; border-right:0px solid BurlyWood; font-size: 70%;}                        /*Location*/
  #head2{float:left; width:75px; border-right:0px solid BurlyWood; font-size: 70%; text-align: center;}     /*Assessment Date*/
  #head3{float:left; width:45px; border-right:0px solid BurlyWood; font-size: 70%; text-align: center;}     /*Scope*/
  #head4{float:left; width:95px; border-right:0px solid BurlyWood; font-size: 70%;}                        /*Auditor*/
  #head5{float:left; width:95px; border-right:0px solid BurlyWood; font-size: 70%;}                        /*Manager on Duty*/
  #head6{float:left; width:95px; border-right:0px solid BurlyWood; font-size: 70%;}                        /*Closing Manager*/
  #head7{float:left; width:50px; border-right:0px solid BurlyWood; font-size: 70%;}                         /*Note*/
  #head8{float:left; width:55px; border-right:0px solid BurlyWood; font-size: 70%; text-align: center;}     /*Overall Score*/
  #head9{float:left; width:45px; border-right:0px solid BurlyWood; font-size: 70%; text-align: center;}     /*Cleaning*/
  #head10{float:left; width:50px; border-right:0px solid BurlyWood; font-size: 70%; text-align: center;}    /*Quality*/
  #head11{float:left; width:60px; border-right:0px solid BurlyWood; font-size: 70%; text-align: center;}    /*Procedural Compliance*/
  #head12{float:left; width:50px; border-right:0px solid BurlyWood; font-size: 70%; text-align: center;}    /*General Practice*/
  #head13{float:left; width:45px; border-right:0px solid BurlyWood; font-size: 70%; text-align: center;}    /*Service*/
  #head14{float:left; width:55px; border-right:0px solid BurlyWood; font-size: 70%; text-align: center;}    /*Bonus*/

  .ass_int_listing_table td{padding:1px 2px; /* pixels */
      border-right:1px solid BurlyWood; /* to avoid the hacks for the padding */
      border-bottom:1px solid BurlyWood;
      border-left:1px solid BurlyWood;} 

/*Data column widths*/
  .ass_int_listing_location{font-size: 70%; width:110px;}
  .ass_int_listing_date{font-size: 70%; width:80px; text-align: center;}
  .ass_int_listing_scope{font-size: 70%; width:45px; text-align: center;}
  .ass_int_listing_auditor{font-size: 70%; width:100px;}
  .ass_int_listing_mgr_on_duty{font-size: 70%; width:100px;}
  .ass_int_listing_closing_mgr{font-size: 70%; width:100px;}
  .ass_int_listing_note{font-size: 70%; width:75px;}
  .ass_int_listing_overall_score{font-size: 70%; width:55px; text-align: center;}
  .ass_int_listing_cleaning{font-size: 70%; width:55px; text-align: center;}
  .ass_int_listing_quality{font-size: 70%; width:55px; text-align: center;}
  .ass_int_listing_proc_compl{font-size: 70%; width:65px; text-align: center;}
  .ass_int_listing_gen_practice{font-size: 70%; width:55px; text-align: center;}
  .ass_int_listing_service{font-size: 70%; width:55px; text-align: center;}  
  .ass_int_listing_Bonus{font-size: 70%; width:55px; text-align: center;}
  /*.ass_int_listing_Bonus{font-size: 70%; border-right-width:0;}*/


  /*.ass_int_listing_td_width_location td {width:100px;}
  .ass_int_listing_td_width_date td {width:75px;}
  .ass_int_listing_td_width_scope td {width:45px;}
  .ass_int_listing_td_width_auditor td {width:95px;}
  .ass_int_listing_td_width_mgr_on_duty td {width:95px;}
  .ass_int_listing_td_width_closing_mgr td {width:95px;}
  .ass_int_listing_td_width_note td {width:50px;}
  .ass_int_listing_td_width_overall_score td {width:55px;}
  .ass_int_listing_td_width_cleaning td {width:45px;}
  .ass_int_listing_td_width_quality td {width:50px;}
  .ass_int_listing_td_width_proc_compl td {width:60px;}
  .ass_int_listing_td_width_gen_practice td {width:50px;}
  .ass_int_listing_td_width_service td {width:45px;}
  .ass_int_listing_td_width_Bonus td {width:55px;}*/

/* #endregion Assessment Listing Table */