a:hover {text-decoration:none;}


/* form */
.MandatoryCaption {color: #FF9900;}
.NormalCaption {color:Silver;}
.HelpLink {cursor:pointer; border: solid 1px transparent;}
.titleArrowRight {background:url(images/title_arrow_right.png) no-repeat;width:166px;padding:10px 0 0 10px;line-height:1.3em;font-weight:bold;font-size:12px;height:45px;margin:0px 10px 0px 10px;color:#666666;}

.rl-button:focus { border: 1px dotted #666; background-color: transparent; }

.DataFormBorder {min-width:725px;max-width:825px;margin:auto;}

.DataFormHeader {text-align:left;}
.DataFormHeaderInnerContent {height: 90px;}
.DataFormTitle { display: none;}
.DataFormSubTitle{ display: none;}
.DataFormHeaderLogo{ width: 200px; float:left}
.DataFormHeaderSynopsis { width: auto; overflow: hidden;padding-top: 30px; padding-left: 140px;}
.DataFormHeaderInnerContent hr {width: 100%;clear:left;}
.DataFormContent {min-width:700px;max-width:800px;margin:0px auto; overflow:visible;}
.DataFormFooter {display:none;}

.DataFormSection {width:95%;background:transparent;}
.TabbedViewBody .DataFormSection {
    width: 100%;
}

.DataFormSectionHeader {}

.DataFormSectionHeaderToggle {margin:0px;}
.DataFormSectionHeaderToggDataFormSectionInnerContentle:visited {cursor:pointer; width:16px; height:16px; border:0px; text-decoration:none;background:transparent;}
/*
.DataFormSectionHeaderToggle:hover {cursor:pointer;border:0px; text-decoration:none;background:transparent;}
.DataFormSectionHeaderToggle:active {cursor:pointer;border:0px; text-decoration:none;background:transparent;}
*/
.DataFormSectionHeaderCaption a {float:left}

.DataFormSectionRow { margin-bottom:5px; padding:0px;border:0px; vertical-align:top; text-align:left;clear:both; overflow:visible; height:auto; display:inline-block;width:100%;}
.DataFormSectionContent {width:100%;text-align:center;margin:0px 0px 10px 0px;background:transparent;}
.DataFormSectionInnerContent {margin: auto;}
.NonDisplay{ display:none; }
.formcontainer {border:0px;margin:0px;padding:0px 5px 0px 0px;border:0px solid #333;background:transparent;width:calc(100% - 225px);overflow:auto;vertical-align:top;display:inline-block;max-height:calc(100% - 68px);}

.W10 {width:9.999%;float:left}
.W20 {width:19.999%;float:left}
.W30 {width:29.999%;float:left}
.W40 {width:39.999%;float:left}
.W50 {width:49.999%;float:left}
.W60 {width:59.999%;float:left}
.W70 {width:69.999%;float:left}
.W80 {width:79.3%;float:left}
.W85 {width:84.3%;float:left}
.W90 {width:89.999%;float:left}
.W100 {width:99.999%;float:left}

.ModuleWrap {}
.ModuleWrap h1 {padding-left:5px;}
.ModuleBody {height:100%}
.ModuleBody a {color:#cccccc;}


.FL {float:left;}
.FR {float:right;}

.clusterTd {clear:both; }
.DataFormCluster {float:left;}

.DataFormClusterHeader{background:none;height:20px;width:98%;margin-left:5px;padding:0px;}
.DataFormClusterHeader span {}
.DataFormClusterHeaderCaption a, .DataFormClusterHeaderCaption {margin-left:0px;float:left;padding:0 14px 0 0px;}

.DataFormClusterHeaderToggle {float:left; width: 18px; height: 15px; margin-top: 3px; cursor: pointer; font-family: Material Icons}
.DataFormClusterHeaderToggleExpanded:after {content: '\E5CE'}
.DataFormClusterHeaderToggleCollapsed:after {content: '\E5CF'}

.DataFormClusterBodyOuter {margin:0px; padding:0px; background:transparent;}
.DataFormClusterBody {margin:0px;padding:0px;}
.DataFormClusterBodyInner {padding:0px; margin: 0px; background:transparent; width:100%;}

.ClusterInnerContainer {width:100%;padding-right:-10px;}

.DataFormField {float:left; table-layout:fixed; margin:auto;margin-top:10px;height:45px}

.DataFormFieldCaption, .DataFormFieldCaption a {cursor:default; color:#333 !Important;}
.DataFormFieldCaptionHasHelp {cursor:help;color:#333 !Important; border-bottom:dashed; border-bottom-width:thin;}
.LimitedText {
    width: 10px;
    height: 10px;
    overflow: hidden;
}

.DataFormFieldAux {width:5px; visibility:hidden;}


/*************************************
	Data Grids & Attachment Grids
*************************************/
.DataFormGrid {border:1px solid #fff;margin-bottom:20px; text-overflow:ellipsis;width:100%;text-align:left;}
.DataFormGridHeader {border:0px solid #ccc;display:block;}
.DataFormGridCaption { text-align:left;line-height:22px}
.DataFormGridCaption a { text-align:left; color:#888888;}
.DataFormInnerGrid {width:99.999%;border:0px; text-align:left; table-layout:fixed; *border: 1.5px solid #ccc !important; /*For IE7*/}
.DataFormInnerGridHeader {background:#eee !Important;margin-top:15px;border:1px solid #ccc;font-weight:bold;font-size:11px;}
.DataFormInnerGrid th {border:0px solid #ccc;}
.DataFormInnerGrid th a {font-family:Arial;color:#666 !important;font-weight:bold}
.DataFormInnerGrid td {border:0px solid #ccc;border-left:0px solid #ccc;}
.DataFormInnerGrid div.LeftOverflow {direction:rtl;position:relative;overflow:visible;width:100%;white-space: nowrap;}
.DataFormInnerGrid div.LeftOverflow span {direction:ltr;unicode-bidi: embed;}
.DataFormInnerGrid a {color:#222}
.DataFormInnerGridSelectedRow {border:0px}
.DataFormInnerGridRow {background:#f9f9f9;border:1px solid #ccc;line-height:20px;}
.DataFormInnerGridHeader > th:last-child, .DataFormInnerGridRow > td:last-child {
    border-right: 1px solid #ccc;
}
.MetaGridCellPadding {padding: 2px 4px 2px 4px;}
.MetaGridCommandButton {width:16px; height:16px; cursor:pointer; float:left;}
.DataFormGrid .SingleLine {border:0px}
.DataFormGrid .SingleLine td {border:0px;}
.DataFormGrid .EditorInput {border:0px solid #ccc;}
.DataFormGrid span.EditorInput {border:0px solid #ccc}
.DataFormInnerGridOddRow {background:#f9f9f9;line-height:25px;height:25px;border:1px solid #ccc;font-style:italic;}

.MetaAttachItemTextContainer {background:transparent; overflow:hidden; text-overflow:ellipsis;}
.MetaAttachItems {border:1px solid #ccc; margin-bottom:20px; width: 99.9%; text-align:left; table-layout:fixed;}
.MetaAttachItemContainer { padding:1px;margin:1px;}

.MetaAttachItems input {border:0px solid red !Important;}
.MetaAttachItemSelectCell {width:22px;padding:0px 4px 0px 4px}
.MetaAttachItemOpenCell {width:20px;}
.MetaAttachItemNameCell {width:200px; }
.MetaAttachItemDescCell { width:100%; }
.MetaAttachItemDummyCell { white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.MetaAttachTitleInnerContainer {border:0px solid #ccc;background:#eee;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;font-weight:bold;padding:2px; }
.NotApplicableAttachment { height:40px; }

.MetaAttachBorder {text-align:left; width:100%; height:100%; overflow-x:hidden; overflow-y:visible; background:transparent;border:0px;}
.MetaAttachCaptionPanel {
    font-weight: 600;
}
.MetaAttachCommandPanel {width:99%;float:left;}
.MetaAttachCommandPanel iframe{width:100%; height:40px; border:0px;margin:0px;}

.EditorFocused input {color:#000000;background-color:#fff;}
.MetaAttachBody { float:left; overflow-x: hidden; overflow-y:visible;  background:transparent;border:0px; width:100%; height:100%; }
.MetaAttachFooter { padding-left:10px; padding-top:5px;text-align:left }
.AddAttachUpload {}
.AddAttachDesc {}
.MetaAttachButton {cursor:pointer;}

.ShortText { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width:160px; display: inline-block; }
.ShortText2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/*******************************************/
.GenericLookupButton {display: inline-block; border: 0px; width:32px;height:20px;padding: 0px; margin:0px;}
a.GenericLookupButton:focus {
    outline: 1px dotted;
}
.ClusterBody {padding:10px 10px 5px 20px; overflow:auto;}

/**********************
	Followup Tools Bar
**********************/

.ftbar{width:100%;margin:5px 5px 8px 5px; }
.DDLFormLetter {margin: 0px;padding: 0px;margin-right: 5px;width: 200px;}



/* add overflow-x and overflow-y for fix scroll bar in popup followup dialog */
.MetaGridDetails { top:-1px;bottom:40px;left:0px;right:0px; overflow-x:hidden; overflow-y:auto;} 
/*


/* MultiPickList */
.NullValueText{}

.mptRow { height: 32px; vertical-align: bottom;  }
.mptRow label {vertical-align: bottom; margin-top: 12px;}

/* 
.MetaEditorInnerBorder .EditorInput {padding-top:2px; width:100%; background:transparent; border:0px;}
*/

/* Everything you need to customize the DevExpress Editors -- For Paul to play around */

.clusterRow {clear:both; padding:0px; margin:0px; border:0px;}
*+html .clusterRow {margin-right:3px;} /***IE7 fix right border cut off on fields*****/
.AdjustBodyPlace{padding-left:5px;margin:10px;}

/* START of Validation Message ballon style **/
.DataFormSectionInnerContent 
{
     /* This is required for solving the issue of balloon overlapping in IE
        Please do not remove it 
     position:relative; 
     z-index:1000; */ 
     /* css changed, we do not need it anymore. Otherwsie, the cross-MetaSection balloon will be truncated--Allan */
}
.vbmsg,.vbmsg *{ display:block}
.vbmsg { width: 243px; left:5px; color:#000; font:lighter 11px/1.3 Arial,sans-serif; text-decoration:none;text-align:center}

/* balloon below the editor */
.vbmsg span.topbi1x{ padding: 20px 22px 2px 22px;  background-position:top;} 
.vbmsg span.btmbi1x{ padding: 3px 20px 10px; color: #548912; background-position:bottom;}
.vbmsg .closebtn1x{top:15px; left:224px;} /* position of close button */
.vbmsg .closeall1x{}

/* balloon above the editor */
.vbmsg span.topbi2x{ padding: 20px 22px 2px 22px; background-position:top;}
.vbmsg span.btmbi2x{ padding: 0px 20px 15px; color: #548912;  background-position:bottom;}
.vbmsg .closebtn2x{top:15px; left:224px;} /* position of close button */
.vbmsg .closeall2x{}

.vbmsg span.bi11{ background-image: url(images/vballoon-below-left.png); background-repeat:no-repeat;}/* below-left image */
.vbmsg span.bi12{ background-image: url(images/vballoon-below-right.png); background-repeat:no-repeat;}/* below-right image */
.vbmsg span.bi21{ background-image: url(images/vballoon-above-left.png); background-repeat:no-repeat;}/* above-left image */
.vbmsg span.bi22{ background-image: url(images/vballoon-above-right.png); background-repeat:no-repeat;}/*above-right image */

.vbmsg .closebtn{position:absolute;width:16px;height:16px;background: url('images/del.png') no-repeat;}
.vbmsg .closeall{margin-left:64px; margin-right:64px;}

/******************
    New tooltip
******************/
.vbmsgDark,.vbmsgDark *{ display:block}
.vbmsgDark { width: 243px; left:5px; color:whitesmoke; font-family: "Open Sans"; font-size:12px; font-weight: 700; text-decoration:none;text-align:center}

/* balloon below the editor */
.vbmsgDark span.topbi1x{ padding: 20px 22px 2px 22px;  background-position:top;} 
.vbmsgDark span.btmbi1x{ padding: 3px 20px 10px; color: #548912; background-position:bottom;}
/*.vbmsgDark .closebtn1x{top:15px; left:224px;}*/ /* position of close button */
/*..vbmsgDark .closeall1x{}*/

/* balloon above the editor */
.vbmsgDark span.topbi2x {
    padding: 20px 22px 2px 22px;
    background-position: top;
}
.vbmsgDark span.btmbi2x{ padding: 0px 20px 15px; color: #548912;  background-position:bottom;}
.vbmsgDark .closebtn2x{top:15px; left:224px;} /* position of close button */
.vbmsgDark .closeall2x{}

.vbmsgDark span.bi11{ background-image: url(images/vballoon-below-leftDark.png); background-repeat:no-repeat;}/* below-left image */
.vbmsgDark span.bi12{ background-image: url(images/vballoon-below-rightDark.png); background-repeat:no-repeat;}/* below-right image */
.vbmsgDark span.bi21{ background-image: url(images/vballoon-above-leftDark.png); background-repeat:no-repeat;}/* above-left image */
.vbmsgDark span.bi22{ background-image: url(images/vballoon-above-rightDark.png); background-repeat:no-repeat;}/*above-right image */

/*.vbmsgDark .closebtn{position:absolute;width:16px;height:16px;background: url('images/del.png') no-repeat;}
.vbmsgDark .closeall{margin-left:64px; margin-right:64px;}*/
/* END of Validation Message ballon style */

.MetaEditorButton {width:16px; height:16px; padding:0px; border:0px; cursor:pointer; line-height:0em; outline:0px;float:left}


/* New form Classes */

/******************
General Form Containers
*******************/
/* .DataFormFieldEditor {float:left;width:100%;text-align:left;fixed-table:} */
input.DataFormFieldEditorObject { padding-top:2px;}
.DataFormFieldEditorObject { width:100%; border: 0px; padding: 0px 0px 0px 0px; margin:1px; font:normal 14px/18px Arial;}
.DataFormFieldEditorButton { border: solid 1px transparent; cursor:pointer; }

/******************
Memo Form Containers
*******************/

/******************
Form Action Button Containers
*******************/
.formtoolbar-wrap { height: 20px; line-height: 20px; padding-bottom:8px; }
.formtoolbar:active, .formtoolbar { display: block; font: bold 12px/14px Arial; color: #70bb18; float: left; padding: 0 8px 0 8px; border-right: 1px dashed #ccc; }
.formtoolbar:hover {text-decoration: underline}

/******************
SingleLine Input Fields
*******************/
/*.DateEdit, .DataFormClusterBodyInner  select, .field input, .ComboBoxInput, .SingleLine {height:18px;line-height:18px;color:#888;width:150px;border:1px solid #ccc;}*/

input.SingleLine {width:100%;padding:1px 0px;text-indent:3px;}

.MultiLine, .DataFormClusterBodyInner div.EditorInput .MultiLine {border:1px solid #fff;min-height: 50px; height:180px; text-align:left; overflow:auto; table-layout:fixed;width:99%; line-height: normal;padding-left:3px}
.DataFormClusterBodyInner div.EditorInput .MultiLine {white-space: pre-line;}

.DataFormClusterBodyInner div.TextBoxInputHolder textarea.MultiLine {width: calc(99% + 3px);}

/******************
Form Lists
*******************/
.EditorInput ul {list-style-image:url("images/formbullet.png") !important;margin: 4px 0 4px 0;}
.DataFormClusterBodyInner .MultiLine ul{list-style-image:none !important;}
.EditorInput ul li {font:Normal 12px/14px Arial; min-height:10px;list-style-position: outside; margin-left:2.1em;}
.EditorInput ol li p {display:inline;}
.EditorInput ol li {display:list-item;}
/******************
	  ComboBox
*******************/
.MetaEditorButtonCell {width:16px;height:16px;display:none;visibility:hidden;cursor:hand;}
.DropdownOuterContainer{height:auto; max-height:250px; text-align:left; visibility:hidden; overflow-x:hidden; overflow-y:auto;  border:1px solid #ddd; right:10px;}
.DropdownInnerContainer{color:#333 !Important;background:#fff;height:auto;}
.DropdownItemContainer{padding:2px;margin:2px; table-layout:fixed;}
.DropdownItemContainer tr{ height:19px; }
.DropdownItemContainer td{font:normal 12px/16px Arial;padding:3px 0 3px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid #ddd; width:100%; }.DropdownItemContainer td.BorderCell{ width:1px;}
.DropdownItemContainer tr:hover{ cursor:pointer;background:#eee;color:#222;}
.DropdownItemContainer tr.SelectedItem{background:#7bc144;color:#fff;}
.DropdownItemHover { cursor:pointer;background:#ddd;color:#666;}
.DropdownItemLineHeight { line-height:1.5em; }
.DefaultCursor { cursor:default; }
.PointerCursor { cursor:pointer; }
.DataFormClusterBodyInner .SelectedItem {background:#7bc144; color:#fff;}


/******************
ConstraintField
*******************/
.ConstraintFieldContainer{ width:90%; padding:0px; border:0px solid #ccc; height:20px; line-height:18px;}
.ConstraintFieldInnerContainer{ padding:0px; margin:0px; border:0px; height:100%; width:100%;}
.ConstraintFieldInnerContainer tr{ height:18px; }
.ConstraintFieldButtonContainer{ width:20px; }
.ConstraintFieldInputHolder { padding:0px; margin:0px; border:1px solid #ccc; cursor:default; }
.ConstraintFieldInput {padding: 0px; border:1px; margin:0px; width:100%; height:16px;line-height:16px; border:0px; }
.ListSelectButton { float:right; }

/********************
UsersField
********************/
.UsersFieldContainer{}
.UsersFieldInnerContainer{}
/******************
Dialog Popups
*******************/
.CDialogBody .MetaGridDetails .DataFormBorder {min-width:50px; width:100%;border:0px;padding:0px;overflow:visible;}
.CDialogBody .MetaGridDetails .DataFormBorder .DataFormContent {width:auto;}
.CDialogBody {padding:10px;}

/******************
Date Edit
*******************/
.TimeEdit {width:72px;float:left;}
.DateEdit {width:72px;float:left;}
.DateTimeEdit {width:110px; float:left;}

/************
LocationSelector
*************/

.select2-container.location-selector .select2-choice {
    height: auto;
    min-height: 26px;    
}
.select2-drop.select2-drop-active .select2-results {
    height: auto;
    max-height: 300px;
}
.select2-results .select2-result.select2-highlighted {
    background: #f5f5f5;
    color: #1f1f1f;
}
.riskRatingTableContainer {
    border: 1px solid #ccc;
}

/* Rating matrix*/
table.riskRatingTable
{
    width: 100%;
    table-layout: fixed;
}
table.riskRatingTable th 
{
    border: 1px solid #ccc;
    /*padding: 2px;*/
    padding: 10px;
    background: #fff;
    font-weight: bold;
    overflow: hidden;
    word-wrap: break-word;
    height:auto;
    width:auto;
    vertical-align:top;
}
table.riskRatingTable th div.rrHeader
{

   /*// max-height: 40px;*/
    height:auto;
    min-width:10px;
    padding:5px;
    
}

.riskRatingYHeader {
    padding-right:6px !Important;
    padding-left:6px !Important;
}

table.riskRatingTable th.column1
{
    width: 5%;
}
table.riskRatingTable th.column2
{
    width: 10%;
}
table.riskRatingTable th.riskRatingYField
{
    vertical-align: top;
}
table.riskRatingTable th.riskRatingYField div
{   
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    transform:rotate(90deg);
    white-space:nowrap;
    display:block;
    width: 15px;
    margin: 20px auto;
    writing-mode: tb-rl;
    height: 230px;
    word-wrap: normal !important;
}
/* Everything but ie8 or less*/
:root table.riskRatingTable th.riskRatingYField div
{
    writing-mode: lr-tb !important;
    height: auto !important;
}
table.riskRatingTable td
{
    overflow: hidden;
    word-wrap: break-word;
    height:auto;
    width: auto;
    vertical-align: top;
}
table.riskRatingTable td label
{
    display: block;
    /*min-height: 37px;
    max-height: 57px;*/
     height:auto;
     width: auto;
    padding: 10px 2px 2px 10px;
    vertical-align: top;
    color: #161616;
}
    table.riskRatingTable td label input {
    padding-right:5px;
  
    vertical-align:middle;
    
    }

.ratingLabel {
padding:8px;
}
.ratingRadio {
float:left;
}
.ratingLabelText {
 margin-left:18px;
 display:block;
 margin-top:-0.5px;
 display:inline-block;
 margin-left:3px;
 margin-top:2px; 
}


/*
input, button, textarea, select {
margin-right:10px;
}
*/
/* Rating gradients */
/*.ratingGrad0 { background: #f7f7f7 }
.ratingGrad10 { background: #40C43C }
.ratingGrad20 { background: #6DD22D }
.ratingGrad30 { background: #99E01F }
.ratingGrad40 { background: #C6ED11 }
.ratingGrad50 { background: #EFF505 }
.ratingGrad60 { background: #FFDD00 }
.ratingGrad70 { background: #FFB000 }
.ratingGrad80 { background: #FF8300 }
.ratingGrad90 { background: #FF5600 }
.ratingGrad100 { background: #FF2900 }*/
.ratingGrad0 {
    background: #f7f7f7
}
.ratingGrad10 { background: #38D700 }
.ratingGrad20 { background: #38D700 }
.ratingGrad30 { background: #38D700 }
.ratingGrad40 { background: #38D700 }
.ratingGrad50 { background: #EDF700 }
.ratingGrad60 { background: #EDF700 }
.ratingGrad70 { background: #EDF700 }
.ratingGrad80 { background: #FF7B00 }
.ratingGrad90 { background: #FF7B00 }
.ratingGrad100 { background: #FF0000 }

.ratingGrad10,
.ratingGrad20, 
.ratingGrad30,
.ratingGrad40,
.ratingGrad50, 
.ratingGrad60,
.ratingGrad70,
.ratingGrad80, 
.ratingGrad90,
.ratingGrad100 {
border: 1px solid #ccc;
}


 /* Begin CardView (for tab form only, continue form should have a separated set of style) */

    .cardview{
        position:relative;
        width:100%;
        margin: 10px 0px 0px -1em;
        padding-right: 1em;
        height:calc(100vh - 245px);
    }
    .cardview-inner
    {
        width:inherit;
        height:inherit;
        position:inherit;
    }
    .cardview-action-bar{
        border-bottom:solid 1px #cccccc;
        width:100%;
        height:auto;
        box-sizing:border-box;
    }


    .cardview-caption-holder{
        position:relative;
        width:100%;
        height:20px;
        border-width:0px;
    }

    .cardview-caption{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        font-weight:bold;
        font-size: 13px;
        padding-left:10px;
        display:inline-block;
        max-width:100%;
        vertical-align:middle;
    }
    .cardview-mandatory-caption{
        max-width:calc(100% - 20px) !important;
    }
    .cardview-mandatory-flag{
    }
    .cardview-button-holder{
        position:relative;
        width:100%;
        height:50px;
        border-width:0px;
    }
    .cardview-button-holder a:focus,
    .cardview-button-holder a:hover{ 
        text-decoration: underline !important;
    }
    .cardview-button{
        display: inline-block;
        margin-top:6px;
        margin-left:10px;
        height: 28px;
        line-height: 28px;
        border-radius: 2px;
        border: solid 1px #868686;
        color: #868686;
        font-size: 13px;
        text-align: center;
        padding: 0px 12px;
    }

    .cardview-button-primary{
        background-color: #4c717e;
        border: solid 1px #4c717e;
        color: #fff;
    }
    
    .cardview .cardlist-holder{
        overflow-x:hidden;
        overflow-y:auto;
        height:100%;
    }

    .cardview .empty-list-message{
        font-size: 14px;
        font-weight: bold;
        line-height: 22px;
        color: #bfbfbf;
        padding: 15px;
    }
    .cardview-right{
        border-left:solid 2px #a8c8d4;
        overflow-x:hidden;
        overflow-y:auto;
    }
    .cardview .empty-editor-message{
        font-weight: bold;
        font-size: 14px;
        color: #bfbfbf;
        padding: 19px 10px;
    }

    .card-list{
        border-width:1px;
        border-color:black;
        position:relative;
    }
    .cardview .cardlist
    {
        width:100%;
        height:100%;
        border-width:0px;
    }
    .card-list > .card{
        background: #fff;
        padding: 14px 12px;
        border: solid 2px;
        border-color: transparent;
        border-bottom: solid 1px #a8c8d4;
        box-sizing:border-box;
        font-size: 12px;
    }
    .card-list > .card:hover{
        cursor: pointer;
        border: solid 2px #4c717e;
    }
    .empty-card{
    }
    .card-list > .highlighted-card{
        border:2px solid #4c717e;
    }
    .card.validation-fail{
        border-color:lightcoral;
    }
    .card.current-card{
        background-color: #fffff5;
        border: solid 2px #4c717e;
    }
    .card.recently-modified{
        animation: 6s edit-highlight forwards;
    }
    .card-field-row{
        position:relative; width:100%; overflow:hidden; padding: 0px; margin-top:2px; border-width:1px; box-sizing:border-box; vertical-align:middle;
    }
    .card-field-row.rowspan-1{
        height: 1.4em; white-space:nowrap; text-overflow:ellipsis;
    }
    .card-field-row.rowspan-2{
        height: 2.8em;
    }
    .card-field-row.rowspan-3{
        height: 4.2em;
    }
    .card-field-row.rowspan-4{
        height: 5.6em;
    }
    .card-field-row > .field-caption{
        width:30%;
        position:absolute; left:0px; top:0px; bottom:0px; overflow:hidden; text-overflow: ellipsis;
    }
    .card-field-row > .field-value{
        position:absolute; left:30%; right:0px; top:0px; bottom:0px; overflow:hidden; text-overflow: ellipsis;
    }
    .card-field-row > .field-value-nocaption{
        left:0% !important; overflow:hidden; text-overflow: ellipsis;
    }
    .card-field-row .empty{
        background-color:#dddddd;
        height: 12px;
        margin-top: 4px;
    } 
    .card-field-row .empty-1{
        width:100%;
    }
    .card-field-row .empty-2{
        width:80%;
    }    
    .card-field-row .empty-3{
        width:60%;
    }    
    .card-field-row .empty-4{
        width:40%;
    }

    /* End CardView */
   
    /* Begin Timeline*/
    .timeline-wrapper .DataFormSection { width: 100%; }

    .timeline{
        height: 100%;
        width: 100%;
        margin-bottom: 0px;
    }

    .timeline-inner{
        width:inherit;
        height:inherit;
        position:inherit;
    }

    .timeline-left *,
    .timeline-right * { box-sizing: border-box; }

    /* left panel*/
    .timeline-left{
        width: 590px;
        height:100%;
        position:relative;
        display: inline-block;
        box-sizing: border-box;
    }
    .timeline-left .timeline-mask { display: none; }
    .timeline-left.editing .existing-item:before { top: 18px; }
    .timeline-left.editing .existing-item:after { top: 13px; }
    .timeline-left.editing .existing-item:not(.opened) .button-holder-outer .nav-button-holder { display: none; }
    .timeline-left.editing .item-list:before { 
        content: ' ';
        opacity: 0.5;
        background: #fafafa;
        position: absolute;
        width: calc(100% + 100px);
        height :100%;
        top: 0px; left: -100px;
        z-index: 10;
    }
    .timeline-left.editing .item-list .timeline-item.opened { opacity:1; z-index: 10; }

    .timeline .action-bar{
        height: 85px; border-bottom: 1px solid #b0d9d5;
    }
    .timeline .instruction{
        color: #808080;
        font-size: 12px;
        height: 37px; line-height: 37px;
        margin-left: 12px;
    }
    .timeline .caption-holder{
        color: #808080;
        font-size: 12px;
        height: 37px; line-height: 37px;
        margin-left: 12px;

        position:relative;
        width:calc(100% - 12px);
        border-width:0px;
    }
    .timeline-caption{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        font-weight:bold;
        font-size: 13px;
        /*padding-left:10px;*/
        display:inline-block;
        max-width:100%;
        vertical-align:middle;
    }
    .timeline-mandatory-caption{
        max-width:calc(100% - 20px) !important;
    }
    .timeline .button-holder{
        height: 48px; margin: 0px;
    }

    .timeline .button{
        border: 1px solid #868686;
        border-radius: 4px;
        color: #868686;
        display: inline-block;
        font-size: 13px;
        font-weight: normal;
        height: 28px;
        line-height: 28px;
        padding: 0px 12px;
        margin-left: 12px;
        margin-top: 0px;
    }

    .timeline .button:focus{ 
        outline: 5px auto #4d90fe; 
        outline-offset: -2px;    
    }    

    .timeline .button-holder .button:first-child {
        border: 1px solid #4c717e;
        background: #4c717e;
        color: #FFF;
    }

    .timeline .new-card-panel{
        /*height: 355px;*/
        border-top: 1px solid #b0d9d5;
        padding: 16px 35px;
        background: #e7fffd;
        /*overflow-y: auto;*/
        position: relative;
        z-index: 10;
        left: -100px;
        width: 590px;
    }
    .bookend-label{
        left:-88px;
        border: solid 1px #b0d9d5; 
        background-color: #fff;
        position:absolute;
        color: #808080;
        font-size: 12px;
        font-weight: bold;
        padding: 4px 12px;
    }
    .bookend-label-start{
        top:18px;
    }
    .bookend-label-end{
        bottom:18px;
    }
    .bookend-label-line{
        width:0px; 
        left:-50px; 
        top: 42px; 
        bottom: 42px;  
        border: solid 1px #cccccc; 
        position:absolute; 
    }
    .timeline .item-list-holder{
        background: #fafafa;
        position:absolute;
        left:0px;
        right:0px;
        bottom:0px;
        padding-left:100px;
        overflow-y:auto;
        overflow-x:hidden;
    }

    .timeline .item-list {
        position:relative; 
        top:0px; 
        width:100%;
        padding-top:30px;
        padding-right:5px;
        padding-bottom:50px;
        min-height:100%;
        box-sizing:border-box;
    }

    .timeline .milestone{
        position:relative; 
        left:-85px;
        text-align:center; 
        z-index:3;
        margin-top:29px;
        margin-bottom:3px;
        padding: 3px 9px;
        background-color: #bfbfbf;
        color: #fff;
        display: inline-block;
        font-weight: bold;
    }
    .timeline-mask{
        position:absolute;
        top:38px;
        left:0px;
        width:100%;
        height:calc(100% - 40px);
        background-color:white;
        opacity:0.5;
        z-index:2;
        box-sizing:border-box;
    }
    .timeline-item{
        z-index:1;
        margin-top: 10px;
        position:relative;
        border: 1px solid #bfbfbf;
        background: #fff;
    }
    .timeline-item.existing-item:before{
        content: '';
        border-bottom: solid 1px #cccccc;
        position: absolute;
        left: -50px;
        top: 50px;
        width:50px;
        z-index: 1;
    }
    .timeline-item:last-child{
    }
    .timeline-item.existing-item:after{
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #cccccc;
        z-index: 2;
        position: absolute;
        left: -54px;
        top: 45px;
    }
    .timeline-item.existing-item .DataFormCluster{ 
        border-bottom: none;
        background: #fff;
        padding: 12px;
    }
    .timeline-item.existing-item .DataFormCluster .clusterRow table{ height: auto; } 
    .timeline-item.existing-item .DataFormCluster .clusterRow:first-child table{ margin-top: 0px;} 
    .timeline-item.existing-item:not(.opened) .DataFormCluster { float: none; display: block !important;  border: none; } 
    /*.timeline-item.existing-item:not(.opened) .DataFormCluster .clusterRow td:first-child{ display: none; }*/ 
    .timeline-item.existing-item:not(.opened) .button-holder-outer{ 
        border-radius: 0px 0px 2px 2px;
        padding: 0px 0px 12px 12px;        
    } 
    .timeline-item.recently-modified{
        animation: 6s edit-highlight forwards;
    }
    .timeline-item.recently-modified .DataFormCluster{
        animation: 6s edit-highlight forwards;
    }
    .timeline-item.recently-modified .button-holder-outer{
        animation: 6s edit-highlight forwards;
    }
    @keyframes edit-highlight {
        25% { background-color: #ebfffd; }
        75% { background-color: #ebfffd; }
        100% { background-color: #fff; }
    }    
    .timeline-item.opened{
        z-index:3;
        background: #fff;
        border: 1px solid #bfbfbf;
        border-radius: 2px;
        padding: 0px 17px;
    }
    .timeline-item.opened .DataFormField {
        height: 32px;
        /*width: 100% !important;*/
    }
    .timeline-item.opened .DataFormInnerGrid tr { display: table-row; }
    .timeline-item.opened .DataFormInnerGrid.PopupGrid tr.gridview-footer { display: none; }
    .timeline-item.opened .DataFormInnerGrid tr.grid-empty-table-message-row{ display:none; }
    .TabbedViewBody .timeline-item.opened .GridToolBarPanel a { margin-left: 0px; }
    .TabbedViewBody .timeline-item.opened .ComboBoxInputHolder input { height: 28px; line-height: 28px; }

    .timeline-item.validation-fail{
        border-color:lightcoral;
    }
    .timeline-item .content{

    }
    .timeline-item:focus{
        outline:none;
    }
    .timeline-item .item-summary-section{
        /*this class is appended to section used to render item inline summary*/
    }
    .timeline-item .button-holder-outer{
        width:100%;
        vertical-align:middle;
        text-align: left;
        background: #fff;
        padding: 0px 0px 26px 12px;
        clear:both;
    }
    .timeline-item .nav-button-holder{
        margin: 0px;
    }
    .timeline-item .nav-button-holder a{ 
        color: #4c717e !important;
        font-size: 13px;
        margin-left: 24px;
    }

    .timeline-wrapper a:focus,
    .timeline-wrapper a:hover{ 
        text-decoration: underline !important;
    }
   
    .timeline-item .nav-button-holder a:first-child{ margin-left: 0px; } 
    .timeline .nav-button[disabled]{
        display: none;
    }
    .timeline .nav-button[disabled]:hover{

    }
    .timeline-item .edit-button-holder{
        display: block;
        width: 100%;
        text-align: right;
    }
    .timeline-item .edit-button{
        border: 1px solid #868686;
        border-radius: 4px;
        color: #868686;
        display: inline-block;
        font-size: 13px;
        height: 28px;
        line-height: 28px;
        padding: 0px 12px;
        margin: 10px 12px 10px 0px;        
    }
    .timeline-item .edit-button:last-child{
        margin-right: 0px;
        border: 1px solid #4c717e;
        background: #4c717e;
        color: #FFF;        
     }
    .back-to-top-button-holder{
        position:relative;
        left:-100px;
        width:calc(100px + 100%); 
        height:50px; 
        line-height: 50px;
        border-top: 1px solid #b0d9d5;
        text-align:center;
        background: #fff;
        display:none;
    }
    .back-to-top-button{
        display: inline-block;
        height: 50px;
        line-height: 50px;
        color: #4c717e;
        padding-right: 30px;
        background: url(../../Images/back2top.png) no-repeat right center;
    }

    .back-to-top-button:focus {
        outline: 5px auto #4d90fe; 
        outline-offset: -2px;    
    }
    .timeline .init-instruction{
        width:100%;  
        height:20px;
        top:70px;
        left:70px;
        border: 0px; 
        position:absolute;
        font-size: 15px;
        font-weight: bold;
        color: #bfbfbf;
    }
    /* right panel*/
    
    .timeline-right{
        display: inline-block;
        border-left: 1px solid #a8c8d4;
        width: calc(100% - 590px);
        height: 100%;
        vertical-align: top;
        box-sizing: border-box;
        position: relative;
    }
    .timeline-right .title{        
        height:37px; line-height: 37px;
        font-size: 13px; color: #808080; font-weight: bold;
        padding-left: 12px;
        border-bottom: 1px solid #a8c8d4;
    }
    .timeline-right .attachment-holder{
        overflow-x:hidden;
        overflow-y:auto;
        height: calc(100% - 36px);
        word-wrap: break-word;
    }
   .timeline-right .att-instruction{
        height:40px;
        top:70px;
        right:5px;
        left:20px;
        border: 0px; 
        position:absolute;
        font-size: 15px;
        font-weight: bold;
        color: #bfbfbf;
   }
    .timeline-right .attachment-list{
        width:100%;
        border-bottom: 1px solid #a8c8da;
    }
    .timeline-right .attachment-list tr{
        border-bottom: 1px solid #a8c8da;
    }
    .timeline-right .attachment-list tr td:first-child{
        width: 85px;
        padding:10px 0px 5px 10px;
        vertical-align:top;
        font-weight: bold;
    }    
    .timeline-right .attachment-list tr td:last-child{
        width: 100%;
        padding: 10px 0px 5px 0px;
        vertical-align:top;
        border-bottom: 0px;
    }    
    
    .attachment-list .item-title{
        height: 13px; line-height: 13px; font-size: 13px;
        color: #4c7172;
        font-weight: bold;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        padding-right:5px;
    }
    .attachment-list .link-holder{
        height: 13px; line-height: 13px; font-size: 13px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        margin-top:5px;
        padding-right:5px;
    }
    .attachment-list .link-holder a{ 
        height: 13px; line-height: 13px; font-size: 13px;
        color: #4c717e !important; 
    }
    .attachment-list .description{
        width:100%;
        margin-top:5px;
        padding-right:5px;
        border-bottom: 1px solid #d8d8d8;
    }
    .attachment-list .description:last-child {
        border-bottom: 1px solid #ffffff;
    }
    .timeline-item .clusterRow.emptyRow { display: none !important; }
    .timeline-item .clusterRow .emptyFormField { visibility: hidden !important; }


/* TIMELINE */
.TabbedViewBody .timeline-item .DataFormInnerGrid > tbody > tr > th, 
.TabbedViewBody .timeline-item .DataFormInnerGrid > tbody > tr > td { 
    padding-left: 5px;
}


/* PEER REVIEW GRID STYLES */
.DataFormInnerGrid.InlineGrid td a {
    text-decoration: underline;
}
.DataFormInnerGrid a:hover {
    color: blue;
}
.aspNetDisabled.rl-buttonDisabled{ pointer-events: none; display: inline-block; visibility:hidden }

/*material design icon*/
.form-material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}