@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
            
/*
    How to generate a theme for your company: 
    
        1 - Go to http://labs.outsystems.net/ThemeCustomizer/GenerateDublin.aspx
        2 - Copy the generated CSS
        3 - Paste it here
*/

/*------------------------------------*\
             Import Font
\*------------------------------------*/

@font-face {
    font-family: 'Open-Sans';
    src: url('/SilkUIFonts/fonts/OpenSans-Regular.eot');
    src: url('/SilkUIFonts/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/SilkUIFonts/fonts/OpenSans-Regular.woff') format('woff'),
         url('/SilkUIFonts/fonts/OpenSans-Regular.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/OpenSans-Regular.svg#Open-Sans') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open-Sans';
    src: url('/SilkUIFonts/fonts/OpenSans-Bold.eot');
    src: url('/SilkUIFonts/fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
         url('/SilkUIFonts/fonts/OpenSans-Bold.woff') format('woff'),
         url('/SilkUIFonts/fonts/OpenSans-Bold.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/OpenSans-Bold.svg#Open-Sans') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open-Sans';
    src: url('/SilkUIFonts/fonts/OpenSans-Italic.eot');
    src: url('/SilkUIFonts/fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
         url('/SilkUIFonts/fonts/OpenSans-Italic.woff') format('woff'),
         url('/SilkUIFonts/fonts/OpenSans-Italic.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/OpenSans-Italic.svg#Open-Sans') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open-Sans';
    src: url('/SilkUIFonts/fonts/OpenSans-Semibold.eot');
    src: url('/SilkUIFonts/fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
         url('/SilkUIFonts/fonts/OpenSans-Semibold.woff') format('woff'),
         url('/SilkUIFonts/fonts/OpenSans-Semibold.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/OpenSans-Semibold.svg#Open-Sans') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('/SilkUIFonts/fonts/Oswald-Regular.eot');
    src: url('/SilkUIFonts/fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
         url('/SilkUIFonts/fonts/Oswald-Regular.woff') format('woff'),
         url('/SilkUIFonts/fonts/Oswald-Regular.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/Oswald-Regular.svg#oswaldregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('/SilkUIFonts/fonts/Oswald-Bold.eot');
    src: url('/SilkUIFonts/fonts/Oswald-Bold.eot?#iefix') format('embedded-opentype'),
         url('/SilkUIFonts/fonts/Oswald-Bold.woff') format('woff'),
         url('/SilkUIFonts/fonts/Oswald-Bold.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/Oswald-Bold.svg#oswaldbold') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('/SilkUIFonts/fonts/Oswald-Light.eot');
    src: url('/SilkUIFonts/fonts/Oswald-Light.eot?#iefix') format('embedded-opentype'),
         url('/SilkUIFonts/fonts/Oswald-Light.woff') format('woff'),
         url('/SilkUIFonts/fonts/Oswald-Light.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/Oswald-Light.svg#oswaldlight') format('svg');
    font-weight: 300;
    font-style: normal;
}

/*------------------------------------*\
             Font Definition
\*------------------------------------*/


html, body, a, select, form, fieldset, table, tr, td, img, input, button, select, textarea, optgroup, option {
    font-family: 'Arial', Meiryo, sans-serif;
    font-weight: 400;
}

.TileIcon_text, .TileNumber_text, .TileIconText_label, .Heading1, .Heading2, .Heading3, .Heading4, .Header_title a, .EditableTable thead td, .TableRecords_Header {
    font-family: 'Arial', Meiryo, sans-serif;
    font-weight: 400;
}

/*------------------------------------*\
              Font Classes
\*------------------------------------*/

/* Font Oswald classes */

.Oswald_Regular {
    font-family: 'Oswald',Meiryo;
    font-weight: 400;
}

.Oswald_Bold {
    font-family: 'Oswald',Meiryo;
    font-weight: 700;
}

.Oswald_Light {
    font-family: 'Oswald',Meiryo;
    font-weight: 300;
}

/* Font OpenSans classes */

.OpenSans_Regular {
    font-family:  'Open-Sans', Meiryo, sans-serif;
    font-weight: 400;
}

.OpenSans_Bold {
    font-family:  'Open-Sans', Meiryo, sans-serif;
    font-weight: 700;
}

.OpenSans_Italic {
    font-family:  'Open-Sans',Meiryo, sans-serif;
    font-style: italic;
}

.OpenSans_Semibold {
    font-family:  'Open-Sans',Meiryo, sans-serif;
    font-weight: 600;
}

/*------------------------------------*\
               Dev's CSS
\*------------------------------------*/
/******************** Structure ********************/
body,
.Content,
.MainContent {
    background: #f5f5f5;
}

.Content,
.MainContent {
    font-size: 12px;
}

a,
a:link,
a:visited {
    color: #6C9BAD;
}

body,
select,
textarea,
input,
.Heading1,
.Heading2,
.Heading3,
.Heading4 {
    color: #000;
}

.Header {
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background: #2d4a6c; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #2d4a6c, #ffffff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #2d4a6c, #ffffff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #2d4a6c, #ffffff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #2d4a6c, #ffffff); /* Standard syntax */
    border-bottom: 20px solid #021e46;
    height: 80px;
}

.Header_RightSection {
    padding: 0px 45px 0px 0px;
}

.Application_Title a,
.Application_Title a:link,
.Application_Title a:visited,
.Application_Title a:hover {
    color: #fff;
}

.Application_Title img {
    max-height: 100%;
}

.Login_Info {
    float: right;
    color: #021e46;
    font-size: 12px;
    padding: 5px;
    top: 60px;
    margin-right: 10px;
}

.AppSwitcherContainer,
a.Login_Info_Username,
a.Login_Info_Username:link,
a.Login_Info_Username:visited {
    color: #000;
}

.Login_Info_Logout:before,
.Login_Info_Username:before,
.AppSwitcherContainer:before,
.AppSwitcherLink[disabled='disabled']:before {
    color: #000;
}

.tablet .Login_Info_Logout:before,
.phone .Login_Info_Logout:before {
    color: #fff;
    padding: 0px 10px;
}

a.LoginInfo_Username {
    color: #000;
    margin-left: 5px;
}

.tablet .LoginInfo_Username,
.phone .LoginInfo_Username {
   display: none;
}

.Login_Title {
    color:  #fff;
}

.Login_Text {
    color: #333;
}

.Login_background + span .Feedback_Message_Wrapper span + .Feedback_Message_Error .Feedback_Message_Wrapper_Close:after {
    color: #fff;
}

.Login_Footer {
   color: #999;
}

.login-info-placeholder { 
    background: #000;
}

.ContainerBand {
    border-top: solid 13px #afafaf;
 }

.Footer { 
    background: #afafaf; 
    height: 50px;
}

.phone .Menu .LoginInfo {
    color: #000;
    background-color: #000;
}

.Page.phone.MenuOpen .Header, 
.Page.phone.MenuOpen 
.Content.ThemeGrid_Wrapper {
    left: 70px;
}

.headerBreadcrumbs {
    margin-left: 240px;
    margin-top: 5px;
}
 
.tablet .headerBreadcrumbs {
    margin-left: 90px;
}

html .Content.ThemeGrid_Wrapper,
.Content.ThemeGrid_Wrapper {
    left: 230px;
    right: 10px;
    top: 80px;
    overflow-x: initial !important;
}

.desktop.small .Content.ThemeGrid_Wrapper {
    left: 230px;
}

.tablet .ThemeGrid_Wrapper.Content {
    left: 75px;
}
   
.Login_background + span .Feedback_Message_Wrapper span + .Feedback_Message_Error .Feedback_Message_Wrapper_Close:after {
    color: #000;
}

.DropdownMenu .PH > a:hover {
   color: #125f90;
}

.Title {
    width: 100%;
}

.tablet .Title,
.phone .Title {
    vertical-align: top;
}

.Actions {
    width: 38%;
    line-height:  120%;
}

.tablet .Actions,
.phone .Actions {
    vertical-align: top;
}

.Notes_Section {
    margin-top: 5px;
    position: relative;
}

.Menu_Section {
    margin-top: 20px;
    position: relative;
}

.Language {
    line-height: 25px;
    text-align: right;
    width: 100%;
}

.Note {
    font-size: 12px;
    line-height: 25px;
    width: 100%;
}

.Menu2 {
    font-size: 12px;
    line-height: 34px;
    width: 100%;
}

.Application_Title a,
.Application_Title a:link,
.Application_Title a:visited,
.Application_Title a:hover {
    color: #fff;
    text-decoration: none;
}

.tablet .Application_Menu a,
.phone .Application_Menu a,
.tablet .Application_Menu a:link,
.phone .Application_Menu a:link,
.phone .Application_Menu a:visited,
.phone .Application_Menu a:visited{
    border-bottom: 1px solid #afafaf !important;
}

.Application_Title img {
    max-height: 100%;
}

.Footer { 
    background: #afafaf; 
}

.Header_Menu,
.Application_Menu {
    background-color: #64829c;
}

.ie8 .Header_Menu { 
    border-bottom: #000; 
}

.Header_title {
    border-right: none;
    padding-left: 0px;
}

.Title_Section {
    margin-top: 10px;
}

.Title.Heading1 {
    border-bottom: none;
}

.Header_title a img { 
    height: 100%;
    margin-bottom: 3px;
}

.ApptitleSize {
    font-size: 20px;
    overflow: hidden;
    padding-right: 10px;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.Title.Heading1 {
    height: auto; 
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 10px;
}

.tablet .Login_Info_Logout:before,
.phone .Login_Info_Logout:before {
    color: #fff;
    padding: 0px 10px;
}

.Header_RightSection {
    padding: 0px 45px 0px 0px;
}

a.LoginInfo_Username {
    color: #000;
    margin-left: 5px;
}

.tablet .LoginInfo_Username,
.phone .LoginInfo_Username {
   display: none;
}

.ContainerBand {
    border-top: solid 13px #afafaf;
 }

.Text_Note.Sub_title {
    line-height: 12px;
}
/******************** END Structure ********************/

/******************** Menu ********************/
.Menu,
.desktop.small .Menu {
    background: #64829c;
    background-color: #64829c;
    width: 215px;
    z-index: 20; 
    top: 80px; 
}

.tablet .Menu {
    width: 70px;
}

/* login info **************************/
.phone .Menu .LoginInfo {
    display: block;
    width: 260px;
    padding: 20px 20px 20px 25px;
    margin-top: 0;
    text-align: left;
    color: #fff;
    background-color: #000;
}

.Application_Menu {
    
    position: relative
}

.tablet .Application_Menu a,
.phone .Application_Menu a,
.tablet .Application_Menu a:link,
.phone .Application_Menu a:link,
.phone .Application_Menu a:visited,
.phone .Application_Menu a:visited{
    border-bottom: 0px solid #fff !important;
}

.Menu_TopMenu a:link,
.Menu_TopMenu a:visited,
.Menu_TopMenu a,
.desktop.small .Menu_TopMenu a:link,
.desktop.small .Menu_TopMenu a:visited,
.desktop.small .Menu_TopMenu a,
.tablet .Menu_TopMenu a:link,
.tablet .Menu_TopMenu a:visited,
.tablet .Menu_TopMenu a{
    display: block;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 0px solid #fff;
    border-left: none;
    text-shadow: none;
    text-align: left;
    box-shadow: 0px 0px 0px 0 #fff;
}

.Menu_TopMenuActive a:link,
.Menu_TopMenuActive a:visited {
    border-left: none;
    background-color: #64829c;
}

.desktop.small .Menu_TopMenu a span {
    top: 10px;
    left: 45px;
    position: static;
}

/* style icon font **************************/
.Menu_TopMenu a span.fa {
    background-color: transparent;
    width: 34px;
    height: 34px;
    margin-right: 0;
    line-height: 30px;
    border: 0;
    font-size:22px
}

.Menu_TopMenuActive a span.fa,
.Menu_TopMenuActive a:link .fa {
    color: #021e46;
    background-color: transparent;
    border-color: #fff;
}

.desktop.small .Menu_TopMenu a span.fa, 
.tablet .Menu_TopMenu a span.fa {
    left: 0;
    display: inline-block;
    margin: 0px;
}

.MenuIcon { 
    display:inline-block;
    margin-right: 5px; 
}

.MenuText { 
    display:inline-block;
    font-weight: 400;
    width: 140px;
    vertical-align: middle;
    line-height:33px;
    padding: 0px 10px;
}

.MenuText:hover,
.Menu_TopMenu:hover .MenuText,
.Menu_TopMenuActive .MenuText {
    color: #021e46;
}

/* style hover/active menu **************************/
.Menu_TopMenu:hover, 
.Menu_TopMenuActive a,
.Menu_DropDownPanel a.Menu_SubMenuItemActive, 
.Menu_DropDownPanel a.Menu_SubMenuItemActive:visited, 
.Menu_DropDownPanel a.Menu_SubMenuItemActive:link, 
.Menu_DropDownPanel a.Menu_SubMenuItem:hover {
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    background-color: #92a6ba !important;
    color: #021e46;
}

.tablet .Menu_TopMenu .Menu_DropDownArrow,
.desktop.small .Menu_TopMenu:hover .Menu_DropDownArrow,
.tablet .Menu_TopMenu:hover .Menu_DropDownArrow,
.tablet .Menu_TopMenuActive .Menu_DropDownArrow,
.tablet .Menu_TopMenuActive:hover .Menu_DropDownArrow {
    display: none;
}

.desktop.small .Menu_TopMenu .Menu_DropDownArrow,
.desktop.small .Menu_TopMenuActive .Menu_DropDownArrow,
.desktop.small .Menu_TopMenuActive:hover .Menu_DropDownArrow {
    display: none;
}

.Menu_TopMenu span.fa {
    width: 50px;
}

/* style icon on hover **************************/
.Menu_TopMenu:hover span.fa {
    color: #021e46;
    border-color: #fff;
    background: none;
}

.Menu_TopMenu:hover .Menu_DropDownArrow {
    border-top-color: #64829c;
}

.Menu_TopMenuActive:hover a:visited,
.Menu_TopMenuActive a,
.Menu_TopMenuActive a:visited,
.Menu_TopMenuActive:hover a:link,
.Menu_TopMenuActive a:link,
.Menu_TopMenuActive:hover a,
.Menu_TopMenu a {
    border-left: none;
}

.Menu_TopMenu a:hover, 
.Menu_TopMenu a:link:hover {
    border-left: none;
}

.Menu_TopMenu a:visited {
    color: #fff;
}

.Menu_TopMenuActive .Menu_DropDownArrow,
.Menu_TopMenuActive:hover .Menu_DropDownArrow {
    display:none;
}

.Menu_DropDownArrow {
    position: absolute;
    top: 50%;
    right: 10px;
    display: none;
    width: 0;
    height: 0;
    padding-top: 0;
    margin-top: -5px;
    border-width: 0;
    border-style: solid dashed dashed; 
    border-top: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 4px solid transparent;
    background-color: transparent;
}

.Menu_DropDownButton {
    display: block;
    position:relative
}

.MenuSlider_Toggler {
    color: #fff;
}

/* hover submenu **************************/
.CommonMenu_DropDownPanel,
.Menu_DropDownPanel {
    font-weight: 400px;
    position: absolute;
    margin: 0;
    list-style: none;
    border: 0;
    background-color: #63819b;
    box-shadow: none;
    top:0;
    right: -261px;
}

.CommonMenu_DropDownPanel a,
.CommonMenu_DropDownPanel a:link,
.CommonMenu_DropDownPanel a:visited,
.Menu_DropDownPanel a,
.Menu_DropDownPanel a:link,
.Menu_DropDownPanel a:visited {
    display: block;
    min-width: 0;
    margin: 0;
    clear: both;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    border-width: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-shadow: none;
    padding: 10px 15px !important;
    line-height: inherit;
    height: auto
}

.CommonMenu_DropDownPanel a:hover,
.CommonMenu_DropDownPanel a:link:hover,
.CommonMenu_DropDownPanel a:visited:hover,
.Menu_DropDownPanel a:hover,
.Menu_DropDownPanel a:link:hover,
.Menu_DropDownPanel a:visited:hover {
    -webkit-transition: all 300ms ease;
       -moz-transition: all 300ms ease;
         -o-transition: all 300ms ease;
            transition: all 300ms ease;
    background-color: #92a6ba;
    color: #021e46;
    height: auto !important;
}

.CommonMenu_DropDownPanel a span.fa,
.Menu_DropDownPanel a span.fa {
    margin-right: 8px;
    color: #fff;
}

.desktop.small .CommonMenu_DropDownPanel,
.desktop.small .Menu_DropDownPanel {
    position: absolute;
    left:216px;
    top: 0px;
}

.desktop.small .Menu.toggle-active .Menu_DropDownPanel {    
    left: 71px;
}

.desktop.small .Menu_SubItemsPlaceholder {
    width: 210px;
    top: 0px;
}

.desktop.small .CommonMenu_DropDownPanel,
.tablet .CommonMenu_DropDownPanel,
.desktop.small .Menu_DropDownPanel,
.tablet .Menu_DropDownPanel {
    top:0;
    height:auto;
    position: absolute;
    bottom: auto;
}

.tablet .Menu_SubItemsPlaceholder {
    position: relative;
    left: 0;
    height: 100%;
    width:auto;
    -webkit-overflow-scrolling: touch;
    top:0
}


/* show submenu if active **************************/
.Menu_TopMenuActive + .Menu_DropDownPanel:not(:Empty) {
    display: none;
}

.desktop.small .Menu_TopMenuActive + .Menu_DropDownPanel:not(:Empty),
.tablet .Menu_TopMenuActive + .Menu_DropDownPanel:not(:Empty) {
    display: none;
}

.DropdownMenu .PH > a {
   color: #A4A4A4;
}

.DropdownMenu .PH > a:hover {
   color: #afafaf;
}

.Page.phone.MenuOpen .Menu {
    width: 70px;
    left: 0;
}

.phone .Menu {
    top: 0;
    left: -260px;
    width: 70px;
}

.phone .Menu .Menu_TopMenu .MenuText,
.phone .btn-toggle-menu {
    display: none;
}

/******************** END Menu ********************/

/******************** Table ********************/
.EditableTable thead td {
    color: #2e3136;
}

.EditableTable {
    border: 1px solid #d0d0d0;
}
.EditableTable thead td {
    border-bottom: 1px solid #d0d0d0;
}

.EditableTable tr:nth-child(even) {
    background: #f5f5f5;
}

td.RowWithAddAction {
    background: none repeat scroll 0 0 #FFF;
}

.TableRecords_Wrapper {
    margin: 0px;
}

.TableRecords {
    background: none repeat scroll 0 0 #fff;
    border: none;
    border-radius: 0px;
    font-size: 12px;
    margin: 0px;
}

.TableRecords_Header {
    color: #000;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid #afafaf;
    border-top: 1px solid #afafaf;
    padding: 10px;
}

.TableRecords > tbody > tr:hover {
    background: #fafcff;
}

.TableRecords > tbody > tr > td a {
    color: #6C9BAD;
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline;
}

.TableRecords_OddLine, 
.TableRecords_EvenLine {
    padding: 10px;
}

.TableRecords_EvenLine {
    background-color: #f0f0f1;
}

.TableRecords_OddLine, .TableRecords_EvenLine {
    border-bottom: none;
}

.TableRecords_BottomNavigation {
    background: #fff;
    border-top: 1px solid #afafaf;
    padding: 10px;
    border-radius: 0px 0px 8px 8px;
    margin: 0px;
}

.EditableTable thead td {
    color: #2e3136;
}

.EditableTable {
    border: 1px solid #d0d0d0;
}
.EditableTable thead td {
    border-bottom: 1px solid #d0d0d0;
}

.EditableTable tr:nth-child(even) {
    background: #f5f5f5;
}

td.RowWithAddAction {
    background: none repeat scroll 0 0 #FFF;
}

table.EditRecord tr td:first-child, table.ShowRecord tr td:first-child{
        text-transform: uppercase;
}

.EditRecord_Caption {
    color: #555555;
}

.table-container{
    background-color: white;   
    min-height: 500px;
    padding-top: 20px;
    overflow-x:auto;
    overflow-y:auto;
}

.TableRecords-Profile {
    background: none repeat scroll 0 0 #E8E8E8;
    border: none;
    border-radius: 0px;
    font-size: 12px;
    margin: 0px;
}

.TableRecords_BottomNavigation-Profile {
    background: #E8E8E8;
    border-top: 1px solid #afafaf;
    padding: 20px 20px 35px;
    border-radius: 0px 0px 8px 8px;
    margin: 0px;
}

.TableRecords_EvenLine-Profile {
    background-color: #E8E8E8;
    padding: 10px;
    border-bottom: none;
}

/* table navigation **************************/
a.ListNavigation_PageNumber:link,
span.ListNavigation_CurrentPageNumber,
span.ListNavigation_Ellipsis,
a.ListNavigation_Previous:link,
a.ListNavigation_Next:link {
    background: #fcfcfc;
    border: 1px solid #CCCCCC;
    color: #2e3136;
}

a.ListNavigation_PageNumber:link:hover,
span.ListNavigation_Ellipsis:hover,
a.ListNavigation_Previous:link:hover,
a.ListNavigation_Next:link:hover {
    background-color: #E6E6E6;
    border-color: #4C4C4C;
}

span.ListNavigation_CurrentPageNumber {
    border: 1px solid #4C4C4C;
    background-color: #E6E6E6;
}

div.Counter_Message {
    color: #000;
}

.responsiveTable {
    overflow-x: auto !important;
}

table.EditRecord, table.ShowRecord {
    border: 0;
}

.EditRecord td, 
.ShowRecord td {
    padding-left: 0px !important;
}

table.EditRecord, 
table.ShowRecord {
    background-color: transparent;
}

:first-child.TableRecords_OddLine, 
:first-child.TableRecords_EvenLine, 
:first-child.TableRecords_Header {
    padding-left: 10px !important;
}

/******************** END Table ********************/

/******************** Forms ********************/
select, 
input[type="text"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"], 
.Form input.ReadOnly, 
.Form textarea.ReadOnly,
.Form select.ReadOnly {
    height: 30px !important;
    line-height: 20px;
    border: 1px solid #555555;
}



.Form textarea.ReadOnly[readonly="readonly"], 
.Form textarea.ReadOnly[disabled="disabled"], 
.Form select.ReadOnly[disabled="disabled"],
.Form input.ReadOnly[readonly="readonly"],
.Form input.ReadOnly[disabled="disabled"],
textarea[disabled="disabled"],
textarea[readonly="readonly"],
select[disabled="disabled"],
input[readonly="readonly"],
input[disabled="disabled"] {
    color: #000000;
}

textarea {
    border: 1px solid #555555;
    resize: none;
}

.tablet select, .phone select {
    line-height: 20px;
}
/******************** END Forms ********************/

/******************** Button ********************/
a.Header_ButtonMenu {
    color: #000;
}

a.ActionAdd,
a.ActionEdit,
a.ActionChange,
a.ActionDelete {
    background: #63819B;
    border: 1px solid #63819B;
    color: #fff !important;
    font-weight: 400;
    text-transform: uppercase;
    padding: 0px 10px;
    min-width: 0px;
    height: 30px;
    line-height: 30px;
}

a.ActionAdd:hover,
a.ActionEdit:hover,
a.ActionChange:hover,
a.ActionDelete:hover {
    background: #000;
    border: 1px solid #000;
    color: #fff;
    height: 30px;
}

.ButtonGroup_button.Button {
    color: #171717;
    background-color: #F5F5F5;
    border-right: 1px solid #B5B5B5;
    width: 20%;
    border-bottom: none;
    border-top: 2px solid #B5B5B5;
    border-radius: 0px;
    font-weight: bold;
}

.ButtonGroup_button.Button:hover,
.ButtonGroup_button.Button.active,
.ButtonGroup_button.Button:active {
    border-color: #B5B5B5;
    border-top: 2px solid #B5B5B5;
    background: #63819B;
}

.ButtonGroup_button.Button:hover {
    background: #63819B;
}

.ButtonGroup_button.Button:first-child {
    border-left: none;
    border-radius: 0px;
}

.ButtonGroup_button.Button:last-child {
    border-right:none;
    border-radius: 0px;
}

.desktop .ButtonGroup .Button:hover {
    border: 1px solid #CCC;
    background: #E6E6E6;
}

.desktop .ButtonGroup .Button:first-child:hover {
    border: 1px solid #CCC;
}

.desktop .ButtonGroup_button.Button.disabled,
.desktop .ButtonGroup_button.Button.disabled:hover {
    color: #999;
    background-color: #F5F5F5;
}

.desktop .ButtonGroup_button.Button.active,
.tablet .ButtonGroup_button.Button.active,
.phone .ButtonGroup_button.Button.active {
    background: #63819B;
}

.phone .ButtonGroup_button.Button,
.mini.tablet .ButtonGroup_button.Button {
    border-left: 1px solid #CCC;
} 

.ButtonDropdown_text,
.ButtonDropdown_icon {
    color: #000;
}

.ButtonDropdown_text,
.ButtonDropdown_icon {
    color: #000;
}

.phone .Button,
.phone a.Button,
.tablet .Button,
.tablet a.Button,
.Button,
a.Button {
   background-color: #555555;
   border: 1px solid #555555;
   color: #fff;
   font-weight: 400;
   height: 30px;
   text-transform: uppercase;
   min-width: 0px;
   height: 30px;
   line-height: 30px;
   padding: 0px 10px;
}

a.Button span.fa {
    margin-right: 0px;
}

.Button:visited,
.Button:link {
    color: #f5f5f5;
}

.Button[disabled] {
    background: #eeeeee;
    color: #ccc;
    border-color: #eeeeee;
}

.Button.Cancel {
    border-color: #999;
    color: #4c4c4c;
}

.Button.Neutral {
    background-color:  #FCFCFC;
}

.Button.Link {
    color: #6C9BAD;
}

.desktop .Button:hover,
.desktop a.Button:hover {
    background-color: #000000;
    border: 1px solid #000000;
    color: #f5f5f5;
}

.desktop .Button[disabled]:hover {
    color: #FF0000;
}

.desktop .Button.Cancel:hover {
    background-color:  #e0e1e3;
    border-color: #999999; 
    color: #4c4c4c;
}

.desktop .Button.Success:hover {
    background-color: #acc469;
}

.desktop .Button.Danger:hover {
    background-color: #9e5141;
    border-color: #9e5141;
}

.desktop .Button.Link:hover {
    border-color: #afafaf;
    color: #afafaf;
}

.Button.ButtonDefault,
.Button.Is_Default {
    background: #63819B;
    border: 1px solid #63819B;
    color: #fff !important;
    font-weight: 400;
    text-transform: uppercase;
    margin-left: 0px;
    padding: 0px 10px;
    min-width: 0px;
    height: 30px;
    line-height: 30px;
    border-left: 0;
    border-right: 0;
}

.desktop .Button.ButtonDefault:hover,
.Button.Button.Is_Default:hover {
    background-color: #000000;
    border-color: #000000;
}

.Button.Icon {
    background: #63819B;
    border-color: #63819B;
    color: #fff;
    padding: 0px 5px;
    margin-right: 5px; 
    margin-bottom: 5px;
}

.Button.Icon:hover,
.desktop .Button.Success:hover {
    background: #000000;
    border-color: #000000;
    color: #f5f5f5;
}
/******************** END Button ********************/

/******************** Silk UI ********************/
/* icon badge **************************/
.IconBadge_number {
    background-color: #fff;
}

.IconDropdown.open .Button {
    background-color: #afafaf;
    border-color: #afafaf;
}

.IconBadge_number {
    border: 2px solid #F2F2F2;
    background-color: #afafaf;
    text-shadow: 1px 1px #000;
}

/* section index **************************/
.SectionIndex.vertical a.active,
.SectionIndex.vertical a:hover {
    border-left-color: #afafaf;
}

.SectionIndex a.active,
.SectionIndex a:hover {
    border-bottom: 2px solid #afafaf;
    color: #afafaf;
}

/* WIZARD *****************************************************/
.WizardParent {
    display: table;
    overflow: hidden;
    width: 100%;
    border-radius: 0px;
    border: none;
}

.WizardStep {
    color: #000000;
    background: #F5F5F5;
    display: table-cell;
    position: relative;
    width: 1%;
    text-align: center;
    line-height: 50px;
    padding-right: 20px;
    
        
    font-size: 18px;
    font-size: 1.1vw;
    border-radius: 0px;
    font-weight: 400;
}

.WizardStep.ActiveStep {
    background: #82AABD;
    color: #000000;
    font-weight: 400;
}

.WizardStep.First {
    background: #3C3C3B;
}

.WizardStep.Second {
    background: #545454;
}

.WizardStep.Third {
    background: #696969;
}

.WizardStep.Fourth {
    background: #7e7e7e;
}

.WizardStep.Fifth {
    background: #939393;
}

.WizardStep.Sixth {
    background: #a8a8a8;
}

.WizardStep.Seventh {
    background: #bdbdbd;
}

.WizardStep a,
.WizardStep a:link {
    display: block;
    line-height: 50px;
    /*padding-right: 20px;*/
    text-align: center;
}

.WizardStep a,
.WizardStep a:link,
.WizardStep a[disabled="disabled"],
.WizardStep a[disabled="disabled"]:hover {
    color: #333;
}

/* after: right arrow on wizard step **************************/
.WizardStep:after {
    content: "";
    height: 40px;
    position: absolute;
    right: 8px;
    top: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    width: 50px;
    z-index: 1;
}

.WizardStep:last-of-type:after {
    transform: rotate(0deg);
    content:"";
    position:absolute;
    height:0;
    width:0;
    left: 87%;
    top: 0;
    border: 25px solid #F5F5F5;
    border-left: 23px solid #bdbdbd;
}

.WizardStep.ActiveStep:last-of-type:after {
    transform: rotate(0deg);
    content:"";
    position:absolute;
    height:0;
    width:0;
    left: 87%;
    top: 0;
    border: 25px solid #F5F5F5;
    border-left: 23px solid #82AABD;
}

.WizardStep:after {
    border-top: none;
    border-right: none;
}

.WizardStep:last-of-type {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

/* before: left "inverted" arrow on wizard step **************************/
.WizardStep:before {
    border-bottom: 25px solid transparent;
    border-left: 25px solid transparent;
    border-top: 25px solid transparent;
    content: "";
    height: 0;
    left: -25px;
    position: absolute;
    top: 0;
    width: 0;
}

.WizardStep:first-of-type {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

.WizardStep.ActiveStep:before {
    border-bottom-color: #82AABD;
    border-top-color: #82AABD;
}

.WizardStep.First:before {
    border-bottom-color: #3C3C3B;
    border-top-color: #3C3C3B;
}

.WizardStep.Second:before {
    border-bottom-color: #545454;
    border-top-color: #545454;
}

.WizardStep.Third:before {
    border-bottom-color: #696969;
    border-top-color: #696969;
}

.WizardStep.Fourth:before {
    border-bottom-color: #7e7e7e;
    border-top-color: #7e7e7e;
}

.WizardStep.Fifth:before {
    border-bottom-color: #939393;
    border-top-color: #939393;
}

.WizardStep.Sixth:before {
    border-bottom-color: #a8a8a8;
    border-top-color: #a8a8a8;
}

.WizardStep.Seventh:before {
    border-bottom-color: #bdbdbd;
    border-top-color: #bdbdbd;
}
/* !important needed to override in all themes **************************/
.ie7 .WizardStep:after,
.ie8 .WizardStep:after {
    right: 0 !important;
    width: 0 !important;
}

.ie7 .WizardStep:before,
.ie8 .WizardStep:before {
    content: none !important;
}


/* tabs **************************/
.TabsServer a,
.TabsServer a:link,
.TabsServer a:visited {
    color: #333;
    background-color: #e6e6e6;
    border-color: #CCC;
}

.TabsServer a:hover,
.TabsServer a:active,
.TabsServer a.Active {
    color: #333;
    background-color: #F2F2F2;
    border-bottom-color: #F2F2F2;
}

.TabsServer a:hover {
    border-color: #CCC;
    background-color: #F2F2F2;
}

.Panel .Tabs__tab {
    border-left: 1px solid #CCC;
}

.phone.landscape .Tabs__tab,
.tablet .Tabs__tab {
    border-right: 1px solid #ccc;
}

div.Tabs_TabOn, li.Tabs_TabOn { /*active tab*/
    border-top: 4px solid #63819B;
    background-color: #E8E8E8;
    border-left: none;
}

a.Tabs_TabOn, a.Tabs_TabOn:link, a.Tabs_TabOn:visited, 
a.Tabs_TabOn:hover, span.Tabs_TabOn{ /*active tab text*/
    color: #000000;
    background-color: #E8E8E8;
    border-bottom: none;
    font-weight: bold;
}

ul.Tabs_Header { /*tabs header*/
    height: 43px;
    text-transform: uppercase; 
    font-size: 17px;
}

.Tabs_TabOff, li.Tabs_TabOff, a.Tabs_TabOff, a.Tabs_TabOff:link,
a.Tabs_TabOff:visited{ /*inactive tab*/
    background: white;;
    border: 2px solid #ADB8BC;
}

a.Tabs_TabOff, a.Tabs_TabOff:link, a.Tabs_TabOff:visited{
    background: white;
    color: #ADB8BC;
    border: none;
    font-weight: bold;
}

.Tabs_TabBody{ /*tab body*/
    background-color: #E8E8E8;
    border: none;
    border-radius: 8px;
    border-top-left-radius: 0px;
    padding: 30px;
}

/* calendar **************************/
div.calendarPattern tr.daynames {
    border-top: 2px solid #afafaf;
}

div.calendarPattern thead .button {
    color: #afafaf;
}

div.calendarPattern tbody td.selected {
    background:  #afafaf;
}

.Calendar-day-selected, 
.Calendar-day-selected:hover {
    background: #afafaf; 
}

.Calendar-navDisabled > div, 
.topBar-navDisabled .Calendar-navBtn > div,
.Calendar-time-down, 
.Calendar-time-up, 
.Calendar-time-am {
    color: #afafaf; 
}

.Calendar-dayNames {
    border-top: 2px solid #afafaf; 
}

.Calendar_wrapper {
    font-family: FontAwesome;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    position: relative;
}

.Calendar_wrapper:after {
    color: #000;
    content: "\f073";
    right: 10px;
    position: absolute;
    top: 7px;
    font-size: 16px;
}

/* buttons **************************/
.Buttons_Left {
    width: 65%;
    vertical-align: top;
}

.Buttons_Right {
    width: 35%;
    vertical-align: top;
}

.phone .Buttons_Left,
.tablet .Buttons_Left {
    width: 50%;
    vertical-align: top;
}

.phone .Buttons_Right,
.tablet .Buttons_Right {
    width: 50%;
    vertical-align: top;
}

/* accordion **************************/
.Accordion {
    background-color: #fff;
    border: 1px solid #d0d0d0;
}

/* tooltip **************************/
.tooltip_style {
    background-color: #393939;
}

/* balloon **************************/
.Balloon_content {
    /*overflow: hidden;*/
    padding: 8px 10px;
    background-color: #fff;
    min-height: 35px;
    min-width: 100px;
    display: table !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

/* search **************************/
.Search_wrapper:after {
    color: #000 !important;
    top: 7px !important;
}

.Search_wrapper input[type="text"] {
    background-color: rgba(131, 170, 190, 0.4) !important;
    border-color: #555555 !important;
    border-radius: 5px !important;
    line-height: 30px !important;
}
/******************** END Silk UI ********************/

/*------------------------------------*\
                Random
\*------------------------------------*/
div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
    background: #afafaf;
}

.Feedback_AjaxWait {
    color: #fff;
}

div.Feedback_Message_Wrapper {
    z-index: 1000;
}

.Login_background + span .Feedback_Message_Wrapper span + .Feedback_Message_Error .Feedback_Message_Wrapper_Close:after {
    color: #000;
}

.Post {
    background: none repeat scroll 0 0 #fff;
    padding: 5px;
    border: 1px solid #d0d0d0;
}

.posRel { 
    position: relative 
}

.Grid_Container { 
    margin-left: auto;
    margin-right: auto;
}

.Filters_Wrapper { 
    padding: 10px;
    background: #fff; 
    border-color: #fff;
    border-radius: 8px 8px 0px 0px ;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content:" ",
}

.clearfix:after {
    clear:both
}

.Section_Title {
    font-size: 20px;
    color: #000000;
    font-weight: 600;
}

.Blue_Labels {
    color: #6C9BAD;
}

.column-container{
    background-color: #fff;
    padding: 15px;
    height: 950px;
    border-radius: 5px;
    margin-top: 10px;
    width: 48%;
}

.tablet .column-container,
.phone .column-container{
    width: 100%;
}

.rightContainer {
    margin-left: 20px;
}

.tablet .rightContainer,
.phone .rightContainer {
    margin-left: 0px;
}

.search-container{
    display: inline-block; 
    color: #fff;
    border-radius: 6px;
    background-color: #63819B;
    height: 30px;
}

.search-filter{
    display: inline-block; 
    background-color: transparent;
    padding-left: 10px;
    padding-right: 5px;
    font-size: 14px;
    vertical-align: top;
    line-height: 30px;
    text-transform: uppercase;
}

.icon-filter{
    background-color: #transparent;
    border-left: 1px solid #fff;
    text-align: center;
    display: inline-block;   
    color: #fff;
    padding-top: 2px;
    height: 100%;
    margin-left: 5px;
}

.search-container:hover{
    background: #000000;
}

.div-filter{
    position:absolute;
    background-color: white;
    border: solid black 1px;
    padding: 10px;
    display: inline-block;
    width: 
}

.tags-style{
    border: solid 1px #555555;
    border-radius: 10px;
    background-color: #555555;
    color: #fff;
    text-align: center;
    display: inline;
    padding-left: 5px;
    padding-right: 15px;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-right: 10px;
    margin-top: 3px;
    font-size: 12px; 
}

.tags-style a:link{
    padding-right:5px;
    color: #fff;
    font-size: 11px;
}

.tags-style a:visited{
    padding-left:10px;
    color: black;
}

.advanced-search-label{
    font-size: 15px; 
    display: inline;
    text-transform: uppercase;
}

.title{
    text-transform: uppercase;   
}

.tile-name{
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
}

.tile-name a{
    font-size: 20px;
    font-weight: bold;
}

.container-top {
    padding-top:10px;
    padding-bottom:10px;
    padding-left:20px;
    padding-right:20px;
    text-transform: uppercase;
}

.container-details {
    border-top: 2px solid #000000;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:20px;
}

.tile{
    background-color: #E8E8E8;
    border-radius: 10px;
}

.grey-container{
    background-color: #E8E8E8;
    border-radius: 5px;
}

.grey-container-title{
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-top: 15px;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: bold;;
}

.grey-container-body{  
    border-top: 2px solid #B3B3B3;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-top: 25px;
}

.supplier-formulator{
    color: #6C9BAD;   
    font-size: 20px;
    text-transform: uppercase;
}

.word-wrap{
    word-wrap: break-word;  
}

.white-container{
    background-color: #fff;
    padding-left:15px;
    padding-right:15px;
    padding-top:5px;
    padding-bottom:5px;
    border-radius:5px;
}

.reg-font-13{
    font-size: 13px;  
}

.reg-font-15{
    font-size: 15px;  
}

.reg-font-16{
    font-size: 16px;  
}

.reg-font-17{
    font-size: 17px;   
}

.reg-font-18{
    font-size: 18px;
}

.reg-font-20{
    font-size: 20px;
}

.reg-font-22{
    font-size: 22px;
}

.reg-font-24{
    font-size: 24px;
}

.reg-font-26{
    font-size: 26px;  
}

.reg-font-29{
    font-size: 29px;
}

.reg-font-35{
    font-size: 35px;
}

.reg-font-40{
    font-size: 40px;
}

.reg-font-45{
    font-size: 45px;
}

.reg-form-title{
    background-color: #82AABD;
    color: #fff;
    height:35px; 
    font-size: 18px;
}

.reg-form-title-icon{
    padding-top:5px;
    display: inline-block;
    background-color: #5A727C;
    height: 35px;
    width: 45px; 
}

.reg-form-title-label{
    padding-top:5px;
    margin-left: 10px;
}

.reg-form-body{
    background-color: #F5F5F5;   
    padding-left: 10px;
    font-size: 15px;
    text-transform: none;
    padding: 15px;
}

.white-container-padding30{
    background-color: #fff;
    padding: 30px;
    border-radius:5px;
}


@media (max-width: 920px) {
        .ThemeGrid_Wrapper.Content { margin-top: 45px !important; }
}

.tblCellLeft { border-left: 1px solid !important; }
.tblBorder {border: 1px solid !important;}

.PanelHeading { 
    color: white;
    background: #636363;
    text-align: left; 
    font-weight: bold;
    padding: 7px 12px; 
}

.PanelContainer {
    margin: 0px;
    padding: 10px;
    background-color: white;
    border: #e1ebee solid 1px;
}

/* ---------------------------------------------------------------- *\
                            CLEANCHAIN CSS                           
\* ---------------------------------------------------------------- */

/************* Actions *************/
.Square_Button_DarkBlue,
a.Square_Button_DarkBlue {
    background-color: #00205b;
    border-color: #00205b;
    border-radius: 2px;    
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    font-weight: 400;
    height: 26px;
    line-height: 22px;
    min-width: 26px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    margin: 2px 5px 2px 0px;
    -webkit-transition: background-color 300ms ease-out;
       -moz-transition: background-color 300ms ease-out;
         -o-transition: background-color 300ms ease-out;
            transition: background-color 300ms ease-out;
}

.Round_Button_DarkBlue,
a.Round_Button_DarkBlue {
    background-color: #00205b;
    border-color: #00205b;
    border-radius: 50%;
    color: #fff !important;
    cursor: pointer;   
    display: inline-block;
    font-size: 10px;
    font-weight: 400;
    line-height: 24px;
    margin: 2px 5px 2px 0px;
    min-height: 26px;
    min-width: 26px;
    text-align: center;
    text-decoration: none;    
    -webkit-transition: background-color 300ms ease-out;
       -moz-transition: background-color 300ms ease-out;
         -o-transition: background-color 300ms ease-out;
            transition: background-color 300ms ease-out;
}

.Square_Button_GreyBlue,
a.Square_Button_GreyBlue {
    background-color: #63819b;
    border-color: #63819b;
    border-radius: 2px;    
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    font-weight: 400;
    height: 26px;
    line-height: 22px;
    min-width: 26px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    margin: 2px 5px 2px 0px;
    -webkit-transition: background-color 300ms ease-out;
       -moz-transition: background-color 300ms ease-out;
         -o-transition: background-color 300ms ease-out;
            transition: background-color 300ms ease-out;
}

.Button_Green,
a.Button_Green,
.Button_Green_Tab, 
a.Button_Green_Tab {
    background-color: #829b00;
    border-color: #829b00;    
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    height: 30px;
    line-height: 30px;  
    margin-left: 0px;
    margin-right: 0px;
    min-width: 80px;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background-color 300ms ease-out;
       -moz-transition: background-color 300ms ease-out;
         -o-transition: background-color 300ms ease-out;
            transition: background-color 300ms ease-out;
}

.Button_Green,
a.Button_Green { 
    border-radius: 2px; 
    margin-bottom: 10px;
}

.Button_Green_Tab, 
a.Button_Green_Tab {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    margin-bottom: 0px;
}

.Button_Green span.fa,
.Button_Green_Tab span.fa,
a.Button_Green span.fa,
a.Button_Green_Tab span.fa { 
    margin-right: 5px; 
}

.Square_Button_Green,
a.Square_Button_Green {   
    background-color: #829b00;
    border-color: #829b00;
    border-radius: 2px;
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 10px; 
    font-weight: 400;
    height: 26px;
    line-height: 22px;
    margin: 2px 5px 2px 0px;    
    min-width: 26px;
    text-align: center;
    text-decoration: none;    
    -webkit-transition: background-color 300ms ease-out;
       -moz-transition: background-color 300ms ease-out;
         -o-transition: background-color 300ms ease-out;
            transition: background-color 300ms ease-out;   
}

.Button_Red,
a.Button_Red,
.Button_Red_Tab, 
a.Button_Red_Tab {
    background-color: #aa0000;
    border-color: #aa0000;
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    min-height: 30px;
    min-width: 80px;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background-color 300ms ease-out;
       -moz-transition: background-color 300ms ease-out;
         -o-transition: background-color 300ms ease-out;
            transition: background-color 300ms ease-out;
}

.Button_Red,
a.Button_Red { 
    border-radius: 4px; 
    margin-bottom: 10px;
}

.Button_Red_Tab, 
a.Button_Red_Tab {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: 0px;
}

.Button_Red span.fa,
.Button_Red_Tab span.fa,
a.Button_Red span.fa,
a.Button_Red_Tab span.fa { 
    margin-right: 5px; 
}

.Square_Button_Red,
a.Square_Button_Red {   
    background-color: #aa0000;
    border-color: #aa0000;
    border-radius: 2px;
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 10px; 
    font-weight: 400;
    height: 26px;
    line-height: 22px;
    margin: 2px 0px 2px 0px;    
    min-width: 26px;
    text-align: center;
    text-decoration: none;    
    -webkit-transition: background-color 300ms ease-out;
       -moz-transition: background-color 300ms ease-out;
         -o-transition: background-color 300ms ease-out;
            transition: background-color 300ms ease-out;   
}

.Round_Button_Red,
a.Round_Button_Red {
    background-color: #aa0000;
    border-color: #aa0000;
    border-radius: 50%;
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    line-height: 24px;
    margin: 2px 0px 2px 0px;
    min-height: 26px;
    min-width: 26px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background-color 300ms ease-out;
       -moz-transition: background-color 300ms ease-out;
         -o-transition: background-color 300ms ease-out;
            transition: background-color 300ms ease-out;
}

.Square_Button_Disabled,
a.Square_Button_Disabled {   
    background-color: #b3afaf;
    border-color: #b3afaf;
    border-radius: 2px;
    color: #fff !important;
    cursor: default;
    display: inline-block;
    font-size: 10px; 
    font-weight: 400;
    height: 26px;
    line-height: 22px;
    margin: 2px 5px 2px 0px;    
    min-width: 26px;
    text-align: center;
    text-decoration: none;    
    -webkit-transition: background-color 300ms ease-out;
       -moz-transition: background-color 300ms ease-out;
         -o-transition: background-color 300ms ease-out;
            transition: background-color 300ms ease-out;   
}

.Round_Button_Disabled,
a.Round_Button_Disabled {
    background-color: #b3afaf;
    border-color: #b3afaf;
    border-radius: 50%;
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    line-height: 24px;
    margin: 2px 0px 2px 0px;
    min-height: 26px;
    min-width: 26px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background-color 300ms ease-out;
       -moz-transition: background-color 300ms ease-out;
         -o-transition: background-color 300ms ease-out;
            transition: background-color 300ms ease-out;
}

.Button_Disabled,
a.Button_Disabled,
.Button_Disabled_Tab, 
a.Button_Disabled_Tab {
    background-color: #b3afaf;
    border-color: #b3afaf;    
    color: #fff;
    cursor: default;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    height: 30px;
    line-height: 30px;  
    margin-left: 0px;
    margin-right: 0px;
    min-width: 80px;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background-color 300ms ease-out;
       -moz-transition: background-color 300ms ease-out;
         -o-transition: background-color 300ms ease-out;
            transition: background-color 300ms ease-out;
}

.Button_Disabled,
a.Button_Disabled { 
    border-radius: 2px; 
    margin-bottom: 10px;
}

.Button_Disabled_Tab, 
a.Button_Disabled_Tab {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    margin-bottom: 0px;
}

.Button_Disabled span.fa,
.Button_Disabled_Tab span.fa,
a.Button_Disabled span.fa,
a.Button_Disabled_Tab span.fa { 
    margin-right: 5px; 
}

.Button_Disabled:hover,
a.Button_Disabled:hover,
.Square_Button_Disabled:hover,
a.Square_Button_Disabled:hover,
.Button_Disabled_Tab:hover, 
a.Button_Disabled_Tab:hover,
.Round_Button_Disabled:hover,
a.Round_Button_Disabled:hover {
    background-color: #b3afaf;
    border-color: #b3afaf;
}

.Button_GreyBlue,
a.Button_GreyBlue {
    background-color: #63819b;
    border-color: #63819b;
    border-radius: 2px; 
    color: #fff;
    cursor: default;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    height: 30px;
    line-height: 30px;  
    margin-left: 0px !important;
    margin-right: 0px !important;
    min-width: 80px;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: background-color 300ms ease-out;
       -moz-transition: background-color 300ms ease-out;
         -o-transition: background-color 300ms ease-out;
            transition: background-color 300ms ease-out;
}

.Button_GreyBlue span.fa,
a.Button_GreyBlue span.fa { 
    margin-right: 5px; 
}

.BigIcon {
    height: 60px !important;
    line-height: 12px !important;
    padding: 10px 15px;
    text-align: left !important;
    text-transform: uppercase;
}

.BigIcon_text {
    font-size: 11px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.smallicongreen {
    color: #829b00;
    font-size: 8px; 
    position: absolute; 
    z-index: 1;
}

.smalliconblue {
    color: #001f46;
    font-size: 8px; 
    position: absolute;
    z-index: 1;
}

.smalliconwhite {
    color: #fff;
    font-size: 8px; 
    position: absolute;
    z-index: 1;
}

.Button_Red:hover,
a.Button_Red:hover,
.Button_Green:hover,
a.Button_Green:hover,
.Button_Red_Tab:hover, 
a.Button_Red_Tab:hover,
.Button_Green_Tab:hover, 
a.Button_Green_Tab:hover,
.Round_Button_Red:hover,
a.Round_Button_Red:hover,
.Button_GreyBlue:hover,
a.Button_GreyBlue:hover,
.Square_Button_Red:hover,
a.Square_Button_Red:hover,
.Square_Button_Green:hover,
a.Square_Button_Green:hover,
.Round_Button_DarkBlue:hover,
a.Round_Button_DarkBlue:hover,
.Square_Button_GreyBlue:hover,
a.Square_Button_GreyBlue:hover,
.Square_Button_DarkBlue:hover,
a.Square_Button_DarkBlue:hover {
    cursor: pointer;
    opacity: .5;    
}

.Buttons_TabContainer {
    text-align: right;
    width: 100%;
}

.Icons_Wrapper {
    background-color: #fff;
    border-bottom: 1px solid rgba(99, 129, 155, .5);
    border-left: 1px solid rgba(99, 129, 155, .5);
    border-radius: 5px;
    border-right: 1px solid rgba(99, 129, 155, .5);
    border-top: 5px solid #829b00;
    padding: 15px 0px 15px 5px;
    margin-bottom: 15px;   
}

.Filter_Wrapper {
    border-bottom: 1px solid #001f46;
    display: table;
    padding: 15px 20px 5px 20px !important; 
    width: 100%;
}

.Filter_Wrapper_WithoutBorder {
    display: table;
    padding: 15px 20px 5px 20px !important;
    width: 100%;
}

.Filter_Wrapper_Left {
    display: table-cell;
    text-align: left;
    vertical-align: top;
    width: 60%; 
}

.Filter_Wrapper_Right {
    display: table-cell;
    text-align: right;  
    vertical-align: top; 
    width: 40%; 
}

.SectionExpandable {
    border-top: 5px solid #829b00;
    border-radius: 0px !important;
    box-shadow: none !important;
    padding: 0px !important;
}

.SectionExpandable__title.Heading2 {
    font-size: 12px;
    padding: 10px !important;
}

.SectionExpandable__icon.Heading2 > .fa {
    border: none !important;
    border-radius: 0px !important;
    color: #001f46 !important;
    font-size: 16px !important;
}

.SectionExpandable__title {
    border-right: none !important;
}

.expanded .SectionExpandable__icon.Heading2 > .fa {
    background-color: transparent !important;
    border: none !important;
}

.SectionExpandable_header {
    margin-bottom: 0px !important;
    padding: 0px !important;
}

.SectionExpandable_content {
    padding: 0px !important;
}

.SectionExpandable.expanded .SectionExpandable_header {
    border-bottom: 1px solid #001f46 !important;
}

.WithFilter .SectionExpandable.expanded .SectionExpandable_header {
    border-bottom: none !important;
}

.SectionExpandable.expanded .SectionExpandable_content {
    padding: 0px !important;
}

.TableRecords_Wrapper_WithButton {
    background-color: #fff;  
    border-bottom: 1px solid rgba(99, 129, 155, .5);
    border-left: 1px solid rgba(99, 129, 155, .5);
    border-right: 1px solid rgba(99, 129, 155, .5);
    border-top: 5px solid #829b00;
}

.TableRecords_Wrapper_WithButton {
    border-top-left-radius: 5px;
}

.Margin_Bottom {
    margin-bottom: 10px !important;
}

.Margin_Right {
    margin-right: 10px !important;
}

.Margin_Left {
    margin-left: 10px !important;
}

.Margin_Bottom_Right {
    margin-bottom: 10px !important;
    margin-right: 10px !important;
}

.Margin_Bottom_Left {
    margin-bottom: 10px !important;
    margin-left: 10px !important;
}

.Display_Table {
    display: table;
    width: 100%;
}

.Display_TableRow {
    display: table-row;
    width: 100%;
}

.Display_TableCell {
    display: table-cell;
}

.Display_Two_Columns {
    display: table-cell;
    width: 50%;
}

/* Added By:      Froilan C. Benito
 * Date Added:    November 8, 2017 
 * Date Modified: November 8, 2017 
*/
usrtxtBox { 
    width: 350px;
    top: 0;
    left: 0;
    cursor: default;
}

.bold-text {
    font-weight: bold;
}

.ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 20px;
            position:absolute;
    }
    /* IE 6 doesn't support max-height
     * we use height instead, but this forces the menu to always be this tall
     */
    * html .ui-autocomplete {
        height: 100px;
    }

.TableRecords_Wrapper {
    background-color: #fff;  
    border-bottom: 1px solid rgba(99, 129, 155, .5);
    border-left: 1px solid rgba(99, 129, 155, .5);
    border-radius: 5px;
    border-right: 1px solid rgba(99, 129, 155, .5);
    border-top: 5px solid #829b00;
}

html input[type="radio"], html input[type="checkbox"] {
    height: 18px;
}

/********* CHECKBOX CSS *********/
input[type="checkbox"] {
    height: 18px;
    margin-bottom: 5px;
    margin-right: 3px;
    width: 18px;
}

input[type="checkbox"]:before {
    background: #829b00;
    border-color: #829b00;
    border-radius: 0px;
    border-style: solid;
    border-width: 2px;
    box-shadow: none;
    color: #fff;
    content: "\f00c";
    display: inline-block;
    font-family: FontAwesome;
    font-size: 12px;
    height: 14px;
    margin-bottom: 5px;
    margin-right: 3px;
    text-align: center;
    vertical-align: middle;
    width: 14px;
}

input[type="checkbox"]:not(:checked):before {
    background: #fff;   
    border-color: #63819b; 
    border-radius: 0px;
    border-style: solid;
    border-width: 2px;
    box-shadow: none;
    content: " ";
    display: inline-block;
    height: 14px;
    margin-bottom: 5px;
    margin-right: 3px;
    vertical-align: middle;
    width: 14px;
}

input[type="checkbox"]:hover:before {
    background: #63819b;   
    border-color: #63819b; 
    color: #fff;
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 12px;
    text-align: center;
}

input[type="radio"]:after,
input[type="checkbox"]:after {
    border: none;
    display: none;
}

/********* CHECKBOX CSS *********/

input[type="radio"]:before {
    background: #829b00;
    border-color: #829b00;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    box-shadow: inset 0 0 0 2px #fff;
    display: inline-block;
    height: 14px;
    margin-bottom: 5px;
    vertical-align: middle;
    width: 14px;
}

input[type="radio"]:not(:checked):before {
    background: #fff;   
    border-color: #63819b; 
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    box-shadow: none;
    content: " ";
    display: inline-block;
    height: 14px;
    margin-bottom: 5px;
    margin-right: 0px;
    vertical-align: middle;
    width: 14px;
}

input[type="radio"]:hover:before {
    background: #63819b; 
    border-color: #63819b; 
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    box-shadow: inset 0 0 0 2px #fff;
    display: inline-block;
    height: 14px;
    vertical-align: middle;
    width: 14px;
}

/********* TOGGLE SWITCH CSS *********/

.ToggleButton_label:after,
.ToggleButton_label.changed:after {
    content: "";
    top: -5px;
    width: 18px;
    height: 18px;
    border-radius: 30px;
    display: inline-block;
    cursor: pointer;
    pointer-events: none;
    box-shadow: 1px 1px 1px #dddddd;
    border: none;
}

.ToggleButton {
    border-radius: 30px;
    height: 10px;
    width: 33px;
    background-color: rgba(120, 120, 120, .5);
    border-color: rgba(120, 120, 120, .10);
}

.ToggleButton.changed {
    background-color: rgba(130, 155, 0, .5);
}

.ToggleButton_label.changed:after {
    background-color:  #829b00;
    left: 15px;
}

.ToggleButton_label:after {
    background-color: #666666;
    left: -5px;
}

.form-display-table { 
    border-bottom: 1px solid #b3afaf; 
    display: table; 
    width: 100%; 
}

.form-display-table-cell { 
    border-right: 1px solid #b3afaf; 
    display: table-cell; 
    width: 50%; 
}

.remove-border .Fieldset { border: none !important; }
.Form:not(.form-top) label { padding-top: 0px !important; }
.cbx-line-height, .rbtn-line-height { line-height: 20px; }


.Responsive div.Feedback_Message_Wrapper {
    margin-top: 35px;
}

.bg {
    background-color: rgba(255, 255, 255, 1);
}

.divAlign{
    padding: 10%;
}

html, body {
    background-color: #fff;
}

.Login_Footer {
    background: #193255;
    box-shadow: none;
    color: #fff;
    height: 10%;
    padding: 5px 0;
}

.Login_background {
    background-position: initial;
    background-position-x: 0%;
    -ms-background-position-x: 0%;
    background-position-y: 50%;
    -ms-background-position-y: 50%;
}

.Login_Box {
    background-color: rgba(255, 255, 255, .75);
    width: 400px;
    margin-left: -200px;
    margin-top: -70px;
    padding: 30px 25px 0px 25px;
    border-radius: 30px;
    box-shadow: 3px 3px 15px #bbbbbb;
    top: 40%;
}

.Login__Logo {
    padding: 0px 20px;
    text-align: left;
}

input[type="text"], input[type="password"] {
    border: 1px solid rgba(25, 50, 85, 1);
}

.Square_Button_Gray,
.Square_Button_Gray:hover {
    background: rgba(25, 50, 85, 1);
    color: #fff;
    border-color: rgba(25, 50, 85, 1);
    cursor: pointer;
}

.forgotlink {
    font-size: 10px !important;
}

.passwordchecker {
    float: right;
    margin-left: 330px !important;
    margin-top: 0px !important;
    display: block;
    position: absolute;
}

.Login_Footer {
    display: none !important;
} 

.Login__Form {
    padding: 20px important;
}