/*
    To override a style copy and paste it to 
    the application theme and then modify it

    0. Resets
    1. General Properties
    2. Structure
    3. Text formating
    4. Forms
    5. Buit-in widgets
    6. Validation    
    7. RichWidgets
    8. Customizations
*/


/***    0. Resets    ***/

html, body, div, span, 
a, img,  ul, li, form {
    margin: 0px;
    padding: 0px;
    border: 0px;
    font-size: 100%;
    font: inherit;
}

table, tbody, thead, tr, th, td {
    margin: 0px;
    padding: 0px;
    font-size: 100%;
    font: inherit;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}
 
table[cellSpacing] {
    border-collapse: separate;
}

td, textarea, img {
    vertical-align:top;
}

img {
    border-width: 0;
}

th {
    text-align: left;
}


/***     1. General properties    ***/

body {
    background: #f2f2f2;  
}

body, select, textarea, input, table {
    font-size: 14px;
    line-height: 1.43;
    font-family: Helvetica, Arial, sans-serif;
    color: #333;
}

.Heading1 {
    font-size: 28px;
    line-height: 1.07;
    margin-top: 40px;
    color: #444;
}

.Heading2 {
    font-size: 21px;
    line-height: 1.25;
    color: #444;
    margin-top: 30px;
}

.Heading3 {
    font-size: 18px;
    line-height: 1.11;
    color: #444;
    margin-top: 20px;
}

span.Heading1,
span.Heading2,
span.Heading3 {
    display: block;
}

a,
a:link,
a:visited {
    color: #006699;
    text-decoration: none;
    -webkit-transition: color .2s ease-in;  
    transition: color .2s ease-in;      
}

a:hover {
    color: #1f8ed7;
    text-decoration: underline;
}

a[disabled='disabled'], 
a[disabled='disabled']:hover {
    background: transparent;
    color: #CCC;
    text-decoration: none;
}


/***     2. Structure    ***/

.Header {
    border-bottom: 1px solid #DDD;
    background: url(/RichWidgets/img/Header_Background.png?22) bottom repeat-x #FFFFFF;
} 

.Application_Title {
    font-size: 24px;
    padding: 20px 0;
}
.Application_Title,
.Application_Title a,
.Application_Title a:link,
.Application_Title a:visited,
.Application_Title a:hover {
    text-decoration: none;
    font-size: 24px;
    padding-right: 10px;
    vertical-align: baseline;
}

.Application_Title img {
    vertical-align: middle;
}

.Login_Info {
    float: right;
    font-size: 12px;
    color: #a2a2a2;
    padding-top: 15px;
}

.Menu_TopMenus { 
    margin-left: 10px;

    margin-bottom: -1px;
}

.Menu_TopMenus:first-child {
    margin-left: 0;
}

.Menu_TopMenu { 
    display: inline-block;
    *display: inline;
    *zoom: 1;
    white-space: nowrap; 
    margin-right: 30px;
    padding-top: 5px;
    padding-bottom: 4px;

} 

.Menu_TopMenu a:link,
.Menu_TopMenu a:visited,
.Menu_TopMenu a {
    color: #666;
    text-decoration: none; 
}


.Menu_TopMenuActive {
    text-decoration: none; 
}

.Content {
    background: #fff;
    padding-top: 30px;
    min-height:400px;
}

.Footer {
    background: #f2f2f2;
    font-size: 12px;    
    color: #999;
    text-align: right;
    padding: 10px 0;
    min-height: 50px;
    background: #d6d6d6;
    background: -webkit-linear-gradient(#d6d6d6 0%,#f2f2f2 10%,#f2f2f2 100%);
    background: linear-gradient(#d6d6d6 0%,#f2f2f2 10%,#f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#f2f2f2',GradientType=0 );

}

.Footer img {
    padding-bottom: 3px;
}

.MainPopup {
    background: #fff;
    vertical-align: top;
    padding: 14px 16px 14px 16px;
    display: table-cell;
}

.Title {
    margin: 0px;
}

.Actions {
    margin-bottom: 30px;
}

div.Title_Links {
    font-size: 14px;
    margin-top: 5px;
}

.MainContent {
    background: #fff;
    min-height: 400px;
    padding-bottom: 30px;
}
    
.ThemeGrid_Container {
    /* Width and Paddings will be automatically set based on 
     the theme Grid properties */
    margin-left: auto;
    margin-right: auto;
}

.OSInlineClear {
  /* This style will never be used in runtime.
  When applied in Service Studio, it will prevent the style 'OSInline' from being
  automatically applied to divs and tables with widths != (fill parent) */
}


/***     3. Text formatting    ***/

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

.Italic {
    display: inline;
    font-style: italic;
}

.Underline {
    display: inline;
    text-decoration: underline;
}    

.Text_Note {
    font-size: 12px;
    color: #888;
}

.Text_Error {
    color: #c7331f;
}

.Text_NoWrap {
    white-space: nowrap;
}

.Text_AlignBaseline {
    /* Empty class that needs to be applied to text to align it with inputs and buttons in Google Chrome 
    (create spans that reset vertical-align to baseline)*/
}


/***     4. Forms    ***/

label,
input,
button,
select,
textarea {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

select,
textarea,
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"] {
    background: #fff;
    border: 1px solid #ccc;
    line-height:1;  
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
    -webkit-appearance: none;    
 }

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"] {
    height: 26px;
}

select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

input, textarea {
    padding: 4px;
    margin: 0px;
}

input[type=radio],
input[type=checkbox] {
    vertical-align: middle;
    padding: 0px;
    margin-right: 5px;
}

select {
    margin: 0px;
    padding: 3px 4px;
    border: 1px solid #ccc;
    line-height: 1.143;
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
    background-repeat: no-repeat;
    background-position: right center;
    -webkit-appearance: none;
    border-radius: 0;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
}

textarea {
    overflow: auto;
}

input[disabled='disabled'] {
    background: #fafafa;
    cursor: text;
}

input[type="text"][readonly],
input[type="password"][readonly],
input[type="datetime"][readonly],
input[type="datetime-local"][readonly],
input[type="date"][readonly],
input[type="month"][readonly],
input[type="time"][readonly],
input[type="week"][readonly],
input[type="number"][readonly],
input[type="email"][readonly],
input[type="url"][readonly],
input[type="search"][readonly],
input[type="tel"][readonly],
input[type="color"][readonly],
textarea[readonly],
select[disabled] {
    background: #eaeaea;
}

input[type=file] {
    vertical-align: bottom;
}

/***    5. Buit-in widgets     ***/

.Button {
    text-align: center;
    padding: 5px 15px 6px 15px;
    -webkit-appearance:none;
    -moz-appearance:none;
    line-height: 1;
    border: 1px solid #ccc;
    border-radius: 3px;
    border-color: #c8c8c8;
    border-bottom-color: #aeaeae;
    background: #eeeeee;
    background: -webkit-linear-gradient(#ffffff, #dedede);
    background: linear-gradient(#ffffff, #dedede);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dedede');

    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
    font-size: 13px;
    vertical-align: 1px;   
    vertical-align: 0 \0/; /* IE8+9  */    

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* IE10 */
    .Button { vertical-align: 1px;}
}


.Button:hover {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 3px rgba(82, 168, 236, 0.6);
}

.Button:active {
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1) inset;
}

.ButtonDefault,
.Button.Is_Default {
    font-weight: bold;
    color: #444;
    text-shadow: 0 1px 1px #eee;  
}

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

.Button::-moz-focus-inner {
    border: 0px;
    margin: -1px;
    padding: 0px;
}

.Button.ThemeGrid_MarginGutter {
    margin-left: 5px;
}

.EditRecord_Caption {
    color: #666;
    padding: 7px 10px 0 0; /* needed to align labels with inputs*/
    vertical-align:top;    
}

.EditRecord_Value {
    padding: 5px 0;
    line-height: 22px; /* needed to align labels with inputs*/
    vertical-align: top;    
}

.EditRecord_Buttons {
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: baseline;
}

.EditRecord_Buttons .Button {
    padding-top:8px;
    padding-bottom:8px;
    vertical-align: baseline;
}

.ShowRecord_Caption {
    color: #999;
    padding: 4px 10px 4px 0;
}

.ShowRecord_Value {
    padding: 4px 0;
}

.EditRecord .Heading2,
.ShowRecord .Heading2 {
    margin-bottom: 10px;  
}

.TableRecords_Header {
    color: #999;
    border-bottom: 1px solid #DDD;
    padding: 5px 0 5px 10px;
}

.TableRecords_OddLine:first-child,
.TableRecords_EvenLine:first-child,    
.TableRecords_Header:first-child {
    padding-left: 0;
}

.TableRecords_Header a,
.TableRecords_Header a:link,
.TableRecords_Header a:visited {
    color: #999;
}

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

.TableRecords_OddLine,
.TableRecords_EvenLine {
    border-bottom: 1px dotted #ddd;
    margin: 1px;
    padding: 5px 0 5px 10px;
}

.TableRecords_TopNavigation {
    font-size: 12px;
}
    
.TableRecords_BottomNavigation {
    margin-top: 5px;
    font-size: 12px;
}

.RecordPicture {
    max-width: 138px;
    border: 1px solid #eaeaea;
}

.RecordPicture_Wrapper {
    max-width: 138px;
}

.RecordPicture_Wrapper .RecordPicture {
    display: block;
}

.TableRecords .RecordPicture {
    max-height: 40px;
}

/***     6. Validation    ***/

.Prompt {
    color: #bbb;
}

input.Not_Valid,
textarea.Not_Valid {
    border: 2px solid #bf1601;
    padding: 3px;
}

select.Not_Valid {
    border: 2px solid #bf1601;
    padding: 2px 3px;
}

.ValidationMessage {
    position: absolute;
    max-width: 300px;
    z-index: 100;
    background: #bf1601;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    padding: 2px 4px;
    vertical-align: top;
    line-height: 22px; /* same height as default inputs */
}

.MainPopup .ValidationMessage {
     position:relative;
     display: inline-block;
 }

span.InputMandatorySymbol {
    content: '*';
    position: absolute;
    font-size: 12px;
    color: #BF1601;
    padding: 5px;
    font-weight: bold;
}


/************** 7. RichWidgets **************/

div.os-internal-Popup .os-internal-ui-dialog,
div.os-internal-Popup.os-internal-ui-dialog {
    border: 1px solid #999;
}
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: #888;
}

ul.os-internal-ui-autocomplete a {
  -webkit-transition: none;
  transition: none;
}

ul.os-internal-ui-autocomplete a.os-internal-ui-state-hover {
    text-decoration: none;
    cursor: default;
    background:#006699;    
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-title, 
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title {
    top: 4px;
}

/* ExcludeFromPickers: Bold, Underline, Italic, Header, Header_Title, Header_Title_Application, Header_Title_Image, 
Header_Title_Spacer, Login_Info, Login_Image, Footer,
TableRecords_Wrapper, TableRecords_TopNavigation, TableRecords_Actions,
TableRecords_BottomNavigation, TableRecords_Footer, Filters_Wrapper,
RecordPicture_Wrapper, RecordPicture, Text_AlignBaseline, Application_Title, calendar, Content,
MainContent, MainPopup, Menu_Container, Menu_TopMenu, Menu_TopMenuActive, Menu_TopMenus, RecordPicture,
OnRowHover, ThemeGrid_Container, Title, 
os-internal-Popup, os-internal-ui-autocomplete, os-internal-ui-dialog, os-internal-ui-dialog-titlebar, os-internal-ui-state-hover, uneditable-input,
rowhilite, selected, ThemeGrid_MarginGutter, OSInlineClear, EditRecord_Buttons, ButtonDefault, 
Application_Title, Menu_SubMenuItem, Menu_SubMenuItemActive, MenuDropDownPanel,AppSwitcherContainer,
os-internal-Popup, os-internal-ui-dialog, os-internal-ui-dialog-title, os-internal-ui-autocomplete os-internal-ui-state-hover, Application_Menu, Actions */




/**************  8. Customizations **************/



/* Copy and paste to your theme and change the colors to match your company brand */

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

.Menu_TopMenu:hover a,
.Menu_TopMenuActive a:link,
.Menu_TopMenuActive a:visited,
a.Menu_SubMenuItemActive:link, 
a.Menu_SubMenuItemActive:visited,
a.Menu_SubMenuItem:hover {
    color: #cc0000;
}

.Menu_TopMenuActive {
    border-bottom: 3px solid #cc0000;
}

.Header {
    background-color: #FFFFFF;
}