/*  1. Generics Styles 
    2. Common controls styles
    3. dReveal/Infragistics Grid
    4. dReveal filtes
    5. Dashboard Dialog
    6. dReveal Dialog 
    7. dReveal ChartView 
    8. HOME
    9. SPRITE ICONS
    10. Dialogs
    11. Tab Links
    12. CalendarsPicker
    13. date-spinner
    14.- Filters 
*/

/* ====================================================================================
 1. Generics styles 
====================================================================================*/

body {
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    margin: 0;
}

input {
    color: #333;
    font-size: 0.9em;
    border: solid #D2D2D2 1px;
    cursor: auto;
    padding: 2px;
}
.text-bold {
    font-weight:bold;  
}

legend {
    font-size: .9em;
    font-weight:bold;
    margin-left: .5em;
}
fieldset
{ 
  border: 1px solid gray;
} 

select {
    color: #333;
    font-size: 0.9em;
    border: solid #D2D2D2 1px;
    cursor: auto;
    scrollbar-arrow-color: #000000;
    scrollbar-base-color: #ffffff;
    scrollbar-face-color: #e6e6e6;
    scrollbar-darkshadow-color: #e6e6e6;
}

textarea {
    color: #333;
    font-size: 0.9em;
    font-family: Arial, Helvetica, sans-serif;
    border: solid #d2d2d2 1px;
    cursor: auto;
    padding: 3px;
    box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.8);
}

a {
    color: #333;
}

    a:visited {
        color: #333;
    }

    a:hover {
        color: #003366;
    }

    a img {
        cursor: pointer;
    }

body.custom {
    background: rgb(83,150,189);
}

body.default {
    background: #ffffff;
}

body .disabled {
    color: #999;
}

/* fix ugly blue border in Chrome around container being selected */
*:focus {
    outline: none;
}

.fadingTooltip{
    background-color:lightgray;
}

.horizontalScroll {
    overflow:auto;
    width:100%
}

/*** grid layout ***/
.am-body input.expanded, 
.am-body button.expanded, 
.am-body select.expanded,
.am-grid-system input.expanded, 
.am-grid-system button.expanded, 
.am-grid-system select.expanded {
    width: 100%;
}

.am-grid-system .row * {
    box-sizing: border-box;
}

.am-grid-system .row {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

.am-grid-system .row .row {
    margin: 0 -5px;
    width: calc(100% + 10px);
}

.am-grid-system .row input, 
.am-grid-system .row select, 
.am-grid-system .row textarea {
    margin: 0 0 5px 0;
}

.am-grid-system .row table input, 
.am-grid-system .row table select, 
.am-grid-system .row table textarea {
    margin-bottom: 0;
}

.am-grid-system .row label, 
.am-grid-system .row span {
    display: block;
    margin: 3px 0 0 0;
}

.am-grid-system .row .col-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}
.am-grid-system .row .col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}
.am-grid-system .row .col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.am-grid-system .row .col-4 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}
.am-grid-system .row .col-5 {
  flex: 0 0 41.66667%;
  max-width: 41.66667%;
}
.am-grid-system .row .col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.am-grid-system .row .col-7 {
  flex: 0 0 58.33333%;
  max-width: 58.33333%;
}
.am-grid-system .row .col-8 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}
.am-grid-system .row .col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.am-grid-system .row .col-10 {
  flex: 0 0 83.33333%;
  max-width: 83.33333%;
}
.am-grid-system .row .col-11 {
  flex: 0 0 91.66667%;
  max-width: 91.66667%;
}
.am-grid-system .row .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.am-grid-system .row .offset-1 {
  margin-left: 8.33333%;
}
.am-grid-system .row .offset-2 {
  margin-left: 16.66667%;
}
.am-grid-system .row .offset-3 {
  margin-left: 25%;
}
.am-grid-system .row .offset-4 {
  margin-left: 33.33333%;
}
.am-grid-system .row .offset-5 {
  margin-left: 41.66667%;
}
.am-grid-system .row .offset-6 {
  margin-left: 50%;
}
.am-grid-system .row .offset-7 {
  margin-left: 58.33333%;
}
.am-grid-system .row .offset-8 {
  margin-left: 66.66667%;
}
.am-grid-system .row .offset-9 {
  margin-left: 75%;
}
.am-grid-system .row .offset-10 {
  margin-left: 83.33333%;
}
.am-grid-system .row .offset-11 {
  margin-left: 91.66667%;
}
.am-grid-system .row [class^="col-"] {
    padding: 0 5px;
}
.am-grid-system .row.collapse > [class^="col-"] {
    padding: 0;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.space-no-wrap {
    white-space: nowrap;
}

/* form controls */
.am-grid-system span input[type="checkbox"] {
    margin: -3px 0 0 0;
}

.am-grid-system input[type="checkbox"] + label,
.am-grid-system input[type="checkbox"] + span {
    margin: 0;
    display: inline;
}

.am-grid-system span.date-spinner {
    display: inline-block;
    margin: 0;
}

.am-grid-system .date-spinner .tm-datebox {
    height: 18px;
    width: 100px;
}

.am-grid-system .date-spinner .calendars-trigger {
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 -18px;
}

.am-grid-system .date-spinner .date-spinner-up,
.am-grid-system .date-spinner .date-spinner-down {
    height: 12px;
}
/* /form controls */

/*** /grid layout ***/

/* ====================================================================================
 End Generics styles 
====================================================================================*/

/* ====================================================================================
  2.- Common controls styles 
====================================================================================*/

/* the main content area of a page which will contain the page specific functionality */
#maincontainer {
    margin: 0;
    padding: 6px 1px 4px 4px;
    color: #333333;
    padding-left: 6px !important;
    border-top-left-radius: 5px;
    background-color: #ffffff;
    clear: right;
}

/* the banner across the top of the page */
/*todo update the name class e.g.  am-controlName */
.topbanner {
    text-align: right;
    background-color: #00619c;
    border-bottom: 1px solid rgb(31, 128, 173);
    width: 100%;
    height: 36px;
    z-index: 0;
}

#teammatelogo {
    height: 36px;
}

#logoteammate {
    float: left;
}

    #logoteammate .logo {
        background: url("../images/teammate_app_logo.png") no-repeat;
        cursor: pointer;
        height: 36px;
        width: 400px;
        margin: 6px 6px;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
    }

.topbanner .portaluserlog  {    
    display: flex;    
    justify-content: flex-end;
    width: 500px;
    height: 36px;    
    position: absolute;  
    top: 0px;
    right: 0px;  
}
.topbanner .portaluserlog-item {    
    height: 36px;
    margin: 2px;
}

#banneruserarea {
    margin-top: 10px;  
    margin-right: 5px;     
    white-space:nowrap;    
}

    #banneruserarea a {               
        color: #f2f2f2;
        height: 36px;
        width: 138px;  
    }

.logoapplication {
        /*background: url("../images/teamcentral.png"); 
	    width: 120px;
        height: 34px;*/           
        display:none;                                
    }
/* places the white line on the left of the logo inset to the right of the topbanner */
#logographic {
    border-left: 7px solid #ebebeb;
}


#portalMenu {
   width:254px;
   display: inline-flex;   
   white-space:nowrap;
}

    #portalMenu .am-icon {
        cursor: pointer;
    }

.bannerShrinker {
    position: absolute;
    top: 0px;
    right: 5px;
    width: 19px;
    cursor: pointer;
    z-index: 30;
}

.topbannerpopup {
    background-color: #00619c;
    width: 100%;
    height: 36px;
    display: flex;
}

    .topbannerpopup span {
        color: white;
        font-size: 1.3em;
        font-weight: bold;
        padding: 7px 0px 0px 10px;
    }

/* Generic styles for TopMenu - navbar*/
#navbar,
#maintabbar {
    background: #ddd;
    border-bottom: 5px solid rgb(83,150,189);
}

#maintabbar {
    border-top: 3px solid #ddd;
    height: 21px;
    line-height: 21px;
}

#tabMenu {
    float: left;
    margin-left: 5px;
    overflow: hidden;
    white-space: nowrap;
}

#navbar {
    line-height: 20px;
    white-space: nowrap;
    padding: 4px 0px .2px 1px;
}

    #navbar ul,
    #tabMenu ul {
        display: inline-block;
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    #navbar li,
    #tabMenu li {
        background-color: rgb(119,184,224);
        border: 1px solid #807fba;
        border-bottom: none;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        display: inline;
        padding: 0 .7em .30em .7em;
    }

        #navbar li a,
        #tabMenu li a {
            color: #fff;
            font-weight: bold;
            font-size: 11px;
            font-family: Arial;
            text-decoration: none;
        }

            #navbar li a:hover,
            #tabMenu li a:hover {
                color: #00619c;
            }

        #navbar li.active,
        #tabMenu li.active {
            background-color: rgb(83,150,189);
        }

            #navbar li.active a {
                color: rgb(255,255,255);
            }

                #navbar li.active a:hover,
                #tabMenu li.active a:hover {
                    color: rgb(255,255,255);
                }

#tabMenu ul li.active,
#tabMenu ul li.inactive {
    margin: 0 .13em;
}

#tabInfo {
    display: inline-flex;
    float: right;
    font-size: .9em;
    padding-right: 5px;
}

    #tabInfo a:hover {
        color: #00619c;
    }

    #tabInfo img {
        cursor: pointer;
    }

.tm-datebox {
    height: 13px;
}
.tm-datebox::-ms-clear{
    display: none;
}
.tm-datebox-rtl .calendars-trigger {
    position: relative;
    left: 19px;
    top: 0;
}

.tm-datebox-rtl input {
    text-align: right;
}

.tm-datebox-rtl .date-spinner .date-spinner-up,
.tm-datebox-rtl .date-spinner .date-spinner-down {
    left: 19px;
}

.tm-datebox:disabled ~ .am-icon {
    cursor: default;
    opacity: .5;
}

/* End styles for TopMenu - navbar*/

/* Generic styles for Left Menu*/
/* begin leftpanel formatting  - the following selectors apply to the left panel section of the page */
#bdContent .bd-content {
    background: #fff;
    border-top-left-radius: 7px;
    margin-left: 170px;
}

#bdContent .lpanel-content {
    display: block;
    float: left;
    width: 170px;
}

#leftpanel {
    clear: none;
    float: left;    
}
/* the divider between the leftpanel and maincontainer (note the curve at the top) */
#leftgutter {
    background-color: #ffffff !important;
    background-position: 100% 0%;
    background-repeat: no-repeat;
    clear: none;
    float: left;
    height: 100%;
    width: 4px;
}

/* on the right edge of the leftpanel a "column" is reserved for the placement    of the "slider" graphic upon which users click to open and close the leftpanel */
#leftsash {
    height: 100%;
    position: relative;
    top: 0;
    vertical-align: middle;
    width: 10px;
}

#leftsashimage {
    background-color: rgb(255,255,255);
    cursor: pointer;
    float: left;
    height: 89px;
    vertical-align: middle;
    width: 10px;
}

.slider {
    display: flex;
    position: absolute;
    top: 250px;
    transform: translateY(-50%);
}

    .slider div {
        margin: auto;
    }

    .slider.left {
        border-radius: 5px 0px 0px 5px;
        margin-left: 170px;
    }
/* any page using the leftpanel should display its functional title in the paneltitlelabel area which is styled by the following two selectors */

#leftpanel .paneltitlelabel {
    padding: 2px 5px 0px 8px;
}

#leftpanel .panelsection,
#leftpanel .paneltitle {
    background-color: rgb(233,241,248);
    border-radius: 5px;
    color: #333333;
    font-size: .9em;
    margin: 6px 0 0 8px !important;
    min-width: 125px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 158px;
}

#leftpanel .paneltitle {
    font-weight: bold;
    font-size: 1em;
    color: #23668F;
}

#leftpanel .panelsectionlabel {
    font-weight: bold;
    padding: 3px 5px 1px 8px;
}

#leftpanel .panelsectiondata {
    line-height: 18px;
    min-width: 125px;
    padding: 0px 3px 3px 16px;
}

.panelsectiondata .inputText {
    font-size: 1em;
    width: 130px;
}

.panelsectiondata .divPaddingTop {
    padding-top: 2px;
}

.panelsectiondata span > span {
   display : inline-block;
}

#leftpanel .current {
    color: #023668;
    font-weight: bold;
    text-decoration: none;
}

#leftpanel a:hover a:visited {
    color: #333333;
}

/* End styles for Left Menu*/

/* Generic styles for Page Title */
.am-page-title {
    background: #E9F1F8;
    border-radius: 5px;
    color: #23668F;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.am-page-title .first ,
.am-page-title .middle  {
    margin: 6px 5px 6px 10px;
} 

.am-page-title .second {
    text-align: right;
    margin: 0 10px 0 0;
    display: flex;
}

.am-page-title .second span {
    margin: 5px 5px 0px 5px;
}
         
.am-page-title .second input {
    margin: 2px 0px 0px 0px;
}

.am-page-title .second a {
    font-weight: lighter;
    margin: 8px 5px 0px 5px;
}

.am-page-title .second a:hover {
    color: #0099CC;
}
/* End styles for Page Title */

/* ListBar */
.tm-listbar {
    margin: .4em 0;
}
.am-child-window .tm-listbar {
    margin: .4em .2em;
}
.tm-listbar .tm-listbar-content {
    border: 2px solid #c7dbe5;
    padding: .2em;
    display: block;
}
.tm-listbar.tm-listbar-statemin .tm-listbar-content {
    display: none;
}
.tm-listbar .tm-listbar-label {
    background: #d1e5ef;
    min-width: 15em;
    color: #00619c;
    display: inline-block;
    border: solid 1px #c7dbe5;
    border-bottom: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding: .2em 1em;
    font-weight: bold;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.tm-listbar .tm-listbar-label .am-icon {
    float: right;
    cursor: pointer;
}
.tm-listbar.listbar-disabled {
    opacity: 0.5;
}
.tm-listbar .am-footer {
    background: #eee;
    border-top: 1px solid #c0c0c0;
    text-align: right;
    padding: 1px;
}

.am-listbar-admin .tm-listbar {
    margin-bottom: 13px;
}

.am-listbar-admin .tm-listbar .tm-listbar-content {
    border-radius: 0 12px 12px;
    padding: 8px;
}

.am-listbar-admin .tm-listbar .tm-listbar-label {
    padding: 8px 5px 5px 15px;
}

.am-listbar-admin .tm-listbar .am-grid-view {
    margin: 8px 0;
}

.am-listbar-admin .tm-listbar .tm-listbar-content .am-footer {
    background: #fff;
    border: none;
    color: #008000;
}

.am-listbar-admin .tm-listbar .am-admindashboard .am-label {
            display: inline-block;
            width: 20%;
        }

.am-listbar-admin .tm-listbar .am-admindashboard select {
    width: 78%;
}

.am-listbar-admin .tm-listbar .am-admindashboard .am-grid,
.am-listbar-admin .tm-listbar .am-admindashboard .radio-button {
    margin-left: auto;
    margin-right: 0;
    width: auto;
}

.am-listbar-admin .tm-listbar .am-admindashboard .radio-button {
    padding-bottom: 12px;
}

.am-listbar-admin .tm-listbar .am-admindashboard .am-title {
    height: 30px;
    padding-top: 5px;
}

.am-listbar-admin .tm-listbar .am-admindashboard .am-title input {
    width: 76%;
}

/* End ListBar*/

/* Generic styles for Grid*/
.am-grid {
}

    .am-grid .column-link {
        font-weight: bold;
    }

    .am-grid .column-edit .tm-datebox {
        width: 144px;
    }

    .am-grid .column-edit .tm-numericbox {
        width: 121px;
    }

    .am-grid .column-edit select {
        width: 150px;
    }

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

.customDataGridColumnCenter {
    text-align: center;
}

.customDataGridColumnRight {
    text-align: right;
}

/* Generic styles for button */
.am-button,
.am-button.input.ui-button,
.am-button.ui-state-default,
.am-button.ui-button:focus, 
.am-button.ui-widget-content .am-button.ui-state-default,
.am-button.ui-widget-header .am-button.ui-state-default {
    background-color: rgb(31, 128, 173);
    border: 1px solid transparent;
    border-radius: 3px;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.25s ease-out 0s, color 0.25s ease-out 0s;
}


    .am-button:active {
        font-weight: bold;
    }

    .am-button:hover,
    .am-button:focus {
        background-color: rgb(35, 102, 143);
    }

    .am-button:disabled,
    .am-button.disabled,
    .am-button[disabled],
    .am-button.ui-button.ui-state-disabled:focus,
    .am-button.ui-button.ui-state-disabled:hover,
    .am-button.ui-button.ui-state-disabled:active {
        background-color: rgb(31, 128, 173);
        cursor: not-allowed !important;
        opacity: .4;
        color : white;
        border: 1px solid transparent;
        border-radius: 3px;            
    }

    .am-button.expanded {
        width: 100%;
    }

    .am-button.hollow,
    .ui-button.ui-corner-all.ui-widget,
    .dxbButton_dReveal {
        background-color: #D1E5EF;
        border: 1px solid #77B8E0;
        color: rgb(31, 128, 173);
        transition: border-color 0.25s ease-out 0s, color 0.25s ease-out 0s, color 0.25s ease-out 0s, color 0.25s ease-out 0s;
    }

        .am-button.hollow:hover,
        .ui-button.ui-corner-all.ui-widget:hover,
        .am-button.hollow:focus,
        .dxbButton_dReveal:hover {
            background-color: #C7DBE5;
        }
.am-button.hollow:disabled, 
.am-button.hollow.disabled,
.am-button.hollow[disabled],
.am-button.hollow.disabled:focus {
    background-color: rgb(209, 229, 239);
    border: 1px solid rgb(119, 184, 224);
    cursor: not-allowed;
    opacity: .4;
}

    .am-button > span {
        padding: 0 !important;
    }

    .am-button.small {
        font-size: 0.85em;
        padding: 3px 6px;
    }

    .am-button.large {
        font-size: 1.15em;
        padding: 8px 11px;
    }

button.am-button.hollow {
    margin-top:0.5em;
}

.am-spinner .ui-button-icon-only .ui-icon {
 margin-left: 0px; 
}

/* Generic styles for Labels*/
.LabelHeader {
    color: #023668;
    font-family: arial,Sans-Serif;
    text-decoration: none;
    font-weight: bold;
    height: 20px;
    font-weight: normal;
    padding-left: 6px;
}

/* End generic styles for labels*/
.hiddenControl {
    display: none;
}

.hidden {
    display: none;
}

.tc-update-progress {
    background-image:url(../images/spinner.gif);
    background-repeat:no-repeat;
    background-position:center;
    height:30px;
    width:30px;
}
/* ====================================================================================
  End Common controls styles 
====================================================================================*/


/* ====================================================================================
  3.  dReveal's Grid
  ==================================================================================== */

.am-grid {
    border: 1px solid #C0C0C0;
}

    .am-grid .igg_Control table {
        border-collapse: separate;
    }

.am-grid-view {
    width: 100%;
    border-collapse: collapse;
}

    .am-grid-view th.headerSortUp .am-icon {
        background-position: -449px -73px;
    }

.am-grid-view th.headerSortDown .am-icon {
   background-position: -465px -73px;
}

.am-grid-view tr.selected,
.am-grid-view tbody tr.selected:nth-child(2n)
{ 
   background-color: #409cd2;
   color: #fff;
}

    .am-grid-view .disabled td, .am-grid-view .disabled th {
        opacity: .7;
    }

    .am-grid-view th {
        cursor: pointer;
    }
    
.am-grid-view th .am-icon,
.am-grid-view .indicator .am-icon{
    background-position: -40px 40px;
}



/*Header*/
.am-grid td.dxgvHeader_dReveal,
.am-grid .igg_HeaderCaption,
.am-grid .table_HeaderCaption,
.am-grid .ighg_GroupArea .ighg_GroupedColumn,
.am-pivot-grid .dxpgHeader_dReveal,
.am-pivot-grid .dxpc-contentWrapper .dxgvHeader,
.dReveal-gridview > .dxgvControl_dReveal .dxgvHeader_dReveal,
.am-grid-view thead th,
.am-grid-view th {
    background: #77B8E0;
    border-top: #5396E0 solid 1px;
    border-right: #5396E0 solid 1px;
    border-bottom: #5396E0 solid 1px;
    border-left: #77B8E0 solid 1px;
    color: #FFF;  
    cursor: pointer;      
    font-weight: bold;         
    text-align: center;
    padding: 0 3.5px; 
    height:25px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.am-grid .ighg_GroupArea .ighg_GroupedColumn {
    display: inline-block;
    padding: .5em;
    height: 1.2em;
}

/* items */
.am-grid .dxgvDataRow_dReveal,
.am-pivot-grid .dxgvDataRow_dReveal .dxgvHEC {
    background-color: #FFF;
}

.am-grid .dxgvDataRowAlt_dReveal,
.am-grid .igg_Alt td,
.am-grid .am_Alt,
.am-grid-view tbody tr:nth-child(even),
.am-pivot-grid .dxgvTable tbody tr:nth-child(even){
    background-color: #F6F6F6;
}

.am-grid-dx .dxgvControl_dReveal .dxgvGroupPanel_dReveal .dxgvHeader_dReveal {
    padding: 0 0.3em;
}

.am-grid .dxgvDataRow_dReveal .dxgv,
.am-grid .igg_Item td,
.am-grid-view tbody td {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: none;
    border-bottom: 1px solid #E6E6E6;
    padding: 2.5px 3.5px;
    vertical-align: middle;
    height:18px;
    overflow: hidden;
}
.am-grid .ighg_ExpandableArea .igg_Control tbody td:first-child{height:0px; }
.am-grid .igg_Item td{
    border-bottom: none;
}

.am-grid .igg_Item tr[role*="row"] {
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
}

.am-grid .dxgvHyperlink,
.am-grid .dxgvMailto {
    color: #333;
}

/* items sort */
.am-grid .dxgvHeader_dReveal .dxgvHeaderContent .dxgvHeaderOpts,
.am-pivot-grid .dxpgHeaderFilter_dReveal .dxPivotGrid_pgFilterButton_dReveal, 
.am-pivot-grid .dxpgHeaderFilter_dReveal .dxPivotGrid_pgFilterButtonActive_dReveal {
    float: right;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: url(../images/ui-icons_ffffff_256x240.png) -128px -192px no-repeat;
}

.am-grid .dxgvHeader_dReveal .dxgvHeaderContent .dxgvHeaderSortUp,
.am-pivot-grid .dxpgHeaderSort_dReveal .dxPivotGrid_pgSortUpButton_dReveal,
.am-pivot-grid .dxpc-contentWrapper .dxgvHeader .dxGridView_gvHeaderSortUp {
    background: url(../images/ui-icons_ffffff_256x240.png) 0px -16px no-repeat;
    width: 16px;
    height: 16px;
    float: left;
}

.am-grid .dxgvHeader_dReveal .dxgvHeaderContent .dxgvHeaderSortDown,
.am-pivot-grid .dxpgHeaderSort_dReveal .dxPivotGrid_pgSortDownButton_dReveal,
.am-pivot-grid .dxpc-contentWrapper .dxgvHeader .dxGridView_gvHeaderSortDown  {
    background: url(../images/ui-icons_ffffff_256x240.png) -64px -16px no-repeat;
    width: 16px;
    height: 16px;
    float: left;
}


/*pagging og subgrid*/
.am-grid .dxgvFooter_dReveal .dxgvInfo,
.am-grid .dxgvGroupFooter_dReveal .dxgvInfo {
    font-weight: bold;
    border-top: double #CCC;
}

/*Grouping*/
.am-grid .dxGridView_gvCollapsedButton_dReveal,
.am-grid .dxGridView_gvExpandedButton_dReveal,
.am-grid .dxgvDataRow_dReveal .dxgvDetailButton_dReveal img,
.am-pivot-grid .dxPivotGrid_pgCollapsedButton_dReveal,
.am-pivot-grid .dxPivotGrid_pgExpandedButton_dReveal
 {
    width: 16px;
    height: 16px;
}

    .am-grid .dxGridView_gvCollapsedButton_dReveal,
    .am-grid .dxgvDataRow_dReveal .dxgvDetailButton_dReveal img.dxGridView_gvDetailCollapsedButton_dReveal,
    .am-pivot-grid .dxpgRowFieldValue_dReveal .dxPivotGrid_pgCollapsedButton_dReveal  {
        background: url(../images/tmicons.png) -557px -107px no-repeat;
    }

    .am-grid .dxGridView_gvExpandedButton_dReveal,
    .am-grid .dxgvDataRow_dReveal .dxgvDetailButton_dReveal img.dxGridView_gvDetailExpandedButton_dReveal,
    .am-pivot-grid .dxpgRowFieldValue_dReveal .dxPivotGrid_pgExpandedButton_dReveal {
        background: url(../images/tmicons.png) -577px -107px no-repeat;
    }

.am-grid .dxgvGroupRow_dReveal td,
.am-grid .ighg_GroupedRow td {
    font-weight: bold;
}

.am-pivot-grid .dxpgFilterArea_dReveal,
.am-grid .dxgvControl_dReveal .dxgvGroupPanel_dReveal,
.am-grid .ighg_GroupArea {
    white-space: nowrap;
    padding: 0.3em 1em 0.5em;
}

/*grid footer*/
.am-grid .dxgvPagerBottomPanel_dReveal,
.am-grid .igg_Pager,
.am-pivot-grid .dxpgBottomPager_dReveal {
    background: #C6CED4;
    border-top: 1px solid #bebebe;
    padding: .5em;
}

    .am-grid .dxgvPagerBottomPanel_dReveal .dxp-num,
    .am-pivot-grid .dxpgBottomPager_dReveal .dxp-num,
    .am-grid .igg_PageCurrent {
        text-decoration: underline;
        background: #9ecbd6;
        border: 1px solid #4897aa;
        margin-right: 2px;
        padding: 4px 8px;
    }

    .am-grid .dxgvPagerBottomPanel_dReveal .dxp-lead,
    .am-pivot-grid .dxpgBottomPager_dReveal .dxp-lead {
        padding: .4em;
    }

    .am-grid .dxgvPagerBottomPanel_dReveal .dxp-num .dxp-current,
    .am-pivot-grid .dxpgBottomPager_dReveal .dxp-num .dxp-current,
    .am-grid .igg_PageCurrent.CurrentPage {
        text-decoration: none;
        cursor: default;
    }

    .am-grid .dxgvPagerBottomPanel_dReveal a.dxp-button .dxWeb_pPrevDisabled_dReveal,
    .am-pivot-grid .dxpgBottomPager_dReveal .dxWeb_pPrevDisabled_dReveal{
        margin-left: 0.5em;
        cursor: default;
        width: 16px;
        height: 16px;
        background: url(../images/ui-icons_72a7cf_256x240.png) -48px -160px no-repeat;
    }

    .am-grid .dxgvPagerBottomPanel_dReveal a.dxp-button .dxWeb_pPrev_dReveal,
    .am-pivot-grid .dxpgBottomPager_dReveal .dxWeb_pPrev_dReveal{
        margin-left: 0.5em;
        cursor: pointer;
        width: 16px;
        height: 16px;
        background: url(../images/ui-icons_72a7cf_256x240.png) -48px -160px no-repeat;
    }

    .am-grid .dxgvPagerBottomPanel_dReveal a.dxp-button .dxWeb_pNext_dReveal,
    .am-pivot-grid .dxpgBottomPager_dReveal .dxWeb_pNext_dReveal{
        cursor: pointer;
        width: 16px;
        height: 16px;
        background: url(../images/ui-icons_72a7cf_256x240.png) -32px -160px no-repeat;
    }

    .am-grid .dxgvPagerBottomPanel_dReveal a.dxp-button .dxWeb_pNextDisabled_dReveal,
    .am-pivot-grid .dxpgBottomPager_dReveal .dxWeb_pNextDisabled_dReveal{
        cursor: default;
        width: 16px;
        height: 16px;
        background: url(../images/ui-icons_72a7cf_256x240.png) -32px -160px no-repeat;
    }

.am-grid .igg_Footer .igg_Summary {
    border-top: double #c0c0c0;
    padding: 0.2em;
}

.am-grid-dx .dxgvTable_dReveal .dxgvDataRow_dReveal .dxgvHEC {
    background-color: #FFF;
}

.am-grid-ig .ighg_ExpansionColumnHeader,
.am-grid-ig .ighg_GroupIndentHeaderCell{
    background: #77B8E0;
    border: #5396E0 solid 1px;
}

.am-grid-ig .ighg_ExpansionColumnHeader,
.am-grid-ig .ighg_GroupIndentHeaderCell,
.ighg_ExpansionColumn,
.am-grid-dx .dxgvDI{
    width: 20px !important;
}

.am-grid .igg_Item td.ighg_ExpansionColumn { 
    width:20px; 
}

.am-grid .igg_Item td.ighg_ExpansionColumn,
.am-grid-ig td.ighg_GroupIndentCell{
    border-right:1px solid #D8D8D8;
}

/*  Head */
.am-grid-dx .grid-hd {
    border-bottom: solid 1px #c6c6c6;
    background: #EEE;
    padding: 0.2em;
    padding-bottom: 3px;
}

    .am-grid-dx .grid-hd input {
        padding: 0 0.2em;
        margin: 0 2px;
        border: 0px;
    }

    .am-grid-dx .grid-hd table {
        width: 100%;
    }

.am-grid .record-count {
    font-style: italic;
    font-size: 8pt;
    float: right;
    margin-right: .5em;
}

/* Organization Header*/
.am-grid-dx .OrgLabelHeader {
    color: #023668;
    font-weight: bold;
    font-size: 10pt;
    height: 20px;
}

/* Grid Conditions Editor */
.dReveal-conditions-editor {
    font-size: .9em;
    text-align: left;
}

    .dReveal-conditions-editor textarea {
        width: 100%;
        height: 4em;
    }

    .dReveal-conditions-editor fieldset {
        border: solid 1px #C0C0C0;
        padding: 0.3em 0.5em;
    }

    .dReveal-conditions-editor .dReveal-ce-expression select {
        width: 50%;
        margin-right: 0.3em;
    }

    .dReveal-conditions-editor .dReveal-ce-expression input {
        padding: 0 0.4em;
        margin: 0 0.2em;
    }

    .dReveal-conditions-editor .dReveal-ce-conditions input {
        width: 8em;
    }

    .dReveal-conditions-editor .dReveal-ce-conditions select {
        margin: 0 0.8em 0 0;
    }

    .dReveal-conditions-editor .dReveal-ce-edit {
        margin: 0.2em 0;
    }

    .dReveal-conditions-editor .dReveal-ce-style-color {
    }

        .dReveal-conditions-editor .dReveal-ce-style-color label {
            float: left;
            margin-left: 35px;
        }

    .dReveal-conditions-editor .dReveal-ce-style-text {
        margin-left: 56%;
    }

    .dReveal-conditions-editor .dReveal-ce-misc {
        float: left;
        width: 54%;
    }

    .dReveal-conditions-editor .dReveal-ce-selector1 {
        float: left;
        width: 32%;
        margin-top: 0.3em;
    }

    .dReveal-conditions-editor .dReveal-ce-selector2 {
        margin-left: 1%;
        float: left;
        width: 32%;
        margin-top: 0.3em;
    }

    .dReveal-conditions-editor .dReveal-ce-help {
        margin-left: 66%;
        border: solid 1px #C0C0C0;
        padding: 0.2em;
        margin-top: 0.3em;
        height: 7.6em;
        overflow: hidden;
    }

    .dReveal-conditions-editor .dReveal-ce-selector1 select {
        width: 100%;
    }

    .dReveal-conditions-editor .dReveal-ce-selector2 select {
        width: 100%;
    }

    .dReveal-conditions-editor .dReveal-picker-color-fore {
        width: 28px;
        height: 21px;
        background-image: url('../images/tmicons.png') !important;
        background-position: -103px -155px;
        cursor: pointer;
        border: solid 1px #CCC;
    }

    .dReveal-conditions-editor .dReveal-picker-color-back {
        width: 28px;
        height: 21px;
        background-image: url('../images/tmicons.png') !important;
        background-position: -140px -155px;
        cursor: pointer;
        border: solid 1px #CCC;
    }

    .dReveal-conditions-editor .smallColorPicker_button_color {
        width: 18px;
        height: 5px;
        margin: 15px 0 0 2px;
        overflow: hidden;
    }

    .dReveal-conditions-editor .smallColorPicker_button_back_popup {
        border-bottom: none;
        z-index: 2;
        height: 22px;
    }

    .dReveal-conditions-editor .picker_panel {
        position: absolute;
        background-color: #fff;
        margin-top: -1px;
        border: solid 1px #4A4A4A;
        z-index: 1;
        display: none;
        width: 178px;
    }

    .dReveal-conditions-editor .picker_panel_header {
        height: 10px;
    }

    .dReveal-conditions-editor .clear {
        clear: both;
    }

    .dReveal-conditions-editor .color_parent {
        height: 20px;
        width: 18px;
        padding: 2px;
        float: left;
        display: inline;
        overflow: hidden;
    }

        .dReveal-conditions-editor .color_parent a {
            padding: 2px;
            display: block;
        }

            .dReveal-conditions-editor .color_parent a:hover {
                border: solid 1px #1b253e;
            }

            .dReveal-conditions-editor .color_parent a div {
                height: 10px;
                width: 11px;
                border: solid 1px #808080;
                overflow: hidden;
            }

    .dReveal-conditions-editor .ui-icon-text-bold {
        background-position: -6px -155px;
    }

    .dReveal-conditions-editor .ui-icon-text-italic {
        background-position: -27px -155px;
    }

    .dReveal-conditions-editor .ui-icon-text-underline {
        background-position: -49px -155px;
    }

    .dReveal-conditions-editor .ui-icon-text-strikeout {
        background-position: -76px -155px;
        width: 24px;
    }

    .dReveal-conditions-editor .dReveal-ce-style-text .ui-state-active,
    .dReveal-conditions-editor .dReveal-ce-style-text .ui-state-active.ui-state-hover {
        border: 1px solid #2694e8;
        background: #3baae3;
        font-weight: bold;
        color: #ffffff;
    }

    .dReveal-conditions-editor .dReveal-ce-style-text label {
        background: #dbeff9;
        border: 1px solid #c7dbe5;
        color: rgb(31, 128, 173);
    }

    .dReveal-conditions-editor .dReveal-ce-style-text .ui-state-hover {
        background: #d1e5ef;
        border: 1px solid #c7dbe5;
        color: rgb(35, 102, 143);
        font-weight: bold;
    }


/*field chooser*/
.dReveal-hidden-editor {
    font-size: .9em;
    text-align: left;
}

    .dReveal-hidden-editor ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .dReveal-hidden-editor li {
        /*background-color: rgb(158,205,233);*/
        background-color: #FFF;
        margin: 2px 0;
        padding: 0.1em 0.1em 0.2em 0.1em;
        /*color: #fff;*/
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dReveal-hidden-editor .fields-container {
        border: 1px solid #bbb;
        margin-top: 0.3em;
        padding: 0.1em 0.2em 0.1em 0.3em;
    }

    .dReveal-hidden-editor .selectAll {
        margin: 0.3em 0 0.1em 0.4em;
    }

/*Sub Grid */
.dReveal-ce-conditions .button-up,
.dReveal-ce-conditions .button-down {
    background-color: white;
    margin-bottom: 0.05em;
}

    .dReveal-ce-conditions .button-up:hover,
    .dReveal-ce-conditions .button-down:hover {
        background: #d1e5ef;
        border: 1px solid #c7dbe5;
        margin-bottom: 0.05em;
    }

    .dReveal-ce-conditions .button-up:active,
    .dReveal-ce-conditions .button-down:active {
        border: 1px solid #2694e8;
        background: #3baae3;
        margin-bottom: 0.05em;
    }

 /* End dReveal grid */

 .am-grid-hover {
    font-weight: bold;
    text-align: center;
}

    .am-grid-hover th {
        background-color : #77B8E0;    
        color: White;
        vertical-align: middle; 
    }

    .am-grid-hover td {
        background-color: #F6F6F6;    
    }

/* ====================================================================================
    End  Grid
  ==================================================================================== */

/* ====================================================================================
   4. dReveal's Filter
  ==================================================================================== */

/* For both filter*/


.am-filter .group {
    margin: 0.3em 0.1em;
}

.am-filter .group-hd {
    margin: 0.2em;
    padding-bottom: 4px;
    padding-left: 0.4em;
    width: 98%;
}

    .am-filter .group-hd .ui-icon {
        float: left;
    }

.am-filter .group-bd {
    padding: 0.4em;
}

    .am-filter .group-bd input {
        color: #003366;
        font-size: 8pt;
        border: solid #003366 1px;
        cursor: auto;
    }

.am-filter .ft {
    background-color: #EEE;
    border-top: solid 1px #C0C0C0;
    padding: 3px;
    font-size: 11px;
    text-align: right;
}

    .am-filter .ft input {
        background-color: rgb(31, 128, 173);
        border: 1px solid transparent;
        border-radius: 3px;
        box-sizing: border-box;
        color: white;
        cursor: pointer;
        display: inline-block;
        font-family: inherit;
        font-size: 1em;
        font-weight: bold;
        padding: 5px 8px;
        text-align: center;
        text-decoration: none;
        transition: background-color 0.25s ease-out 0s, color 0.25s ease-out 0s;
        font-size: 0.85em;
        padding: 3px 6px;
        margin-right: 2px;
    }

    .am-filter .ft .filter {
        padding-left: 5px;
        padding-right: 5px;
    }

.am-filter fieldset.group .group-hd {
    border: solid 1px #C0C0C0;
    background: #EEE;
    margin: 0 0 0 0.6em;
    padding: 0 0 0.1em 0.4em;
}

.am-filter fieldset.group {
    border: solid 1px #C0C0C0;
}

.am-filter .FilterHeader {
    color: #023668;
}

/*Advanced filter*/
.am-filter-advanced {
    border: solid 1px #C0C0C0;
}

    .am-filter-advanced a {
        color: #1E90FF;
        text-decoration: underline;
        margin: 2px 2px 3px 0;
    }

    .am-filter-advanced img {
        border: none;
    }

    .am-filter-advanced .hd {
        padding-right: 5px;
        padding-left: 5px;
        margin-bottom: 2px;
        padding-bottom: 2px;
        padding-top: 2px;
        margin-top: 2px;
        border-bottom: #ccc 1px solid;
        background-color: #eee;
        text-align: left;
        background-color: #EEE;
        border-bottom: solid 1px #C0C0C0;
    }

        .am-filter-advanced .hd .filter {
            background: url(../images/buttons.png) 0 -102px no-repeat;
            width: 48px;
            height: 16px;
        }

    .am-filter-advanced .odd {
        background-color: #FFFFE5;
        padding: 4px 8px;
    }

    .am-filter-advanced .even {
        padding: 4px 8px;
    }

    .am-filter-advanced .group-bd {
        padding: 4px;
    }

        .am-filter-advanced .group-bd select {
            margin-right: 5px;
            font-size: 13px;
        }

        .am-filter-advanced .group-bd ol {
            list-style-position: inside;
            margin: 0;
            padding: 0;
        }

        .am-filter-advanced .group-bd .remove {
            margin-left: 10px;
            margin-right: 10px;
            text-decoration: none;
            font-size: 12px;
            color: #1E90FF;
        }

            .am-filter-advanced .group-bd .remove:hover {
                text-decoration: underline;
            }

        .am-filter-advanced .group-bd .hc_input {
            width: 300px;
        }

        .am-filter-advanced .group-bd div.container {
            border: thin solid #808080;
            background: #FFF;
            width: 305px;
            z-index: 999;
        }

        .am-filter-advanced .group-bd div.bd ul {
            list-style-position: outside;
            margin-left: 1pt;
            _margin-left: 0em;
        }

            .am-filter-advanced .group-bd div.bd ul li {
                text-align: left;
                margin-left: -3em;
                *margin-left: 0.8em;
                _margin-left: 0em;
                list-style-type: none;
                padding: 0.1em 0;
            }

                .am-filter-advanced .group-bd div.bd ul li input {
                    margin-right: 0.2em;
                }

                .am-filter-advanced .group-bd div.bd ul li li {
                    margin-left: 1.5em;
                    *margin-left: 1.2em;
                }

        .am-filter-advanced .group-bd div .link_open {
            background-image: url('../images/tmicons.png');
            float: left;
            width: 12px;
            height: 14px;
            cursor: pointer;
            margin: 0 !important;
            background-position:-557px -102px;
        }

        .am-filter-advanced .group-bd div .link_close {
            background-image: url('../images/tmicons.png');
            float: left;
            width: 12px;
            height: 14px;
            cursor: pointer;
            margin: 0 !important;
            background-position:-575px -102px;
        }

        .am-filter-advanced .group-bd div.iCroll {
            overflow: scroll;
            max-height: 300px;
            height: 300px;
        }

            .am-filter-advanced .group-bd div.iCroll INPUT {
                border: none;
            }

        .am-filter .group-bd .ui-hierarchical-trigger {
            Position: relative;
            top: 4px;
            left: 1px;
        }

        .am-filter .group-bd a.TreeLoad { 
            background-image: url(../images/ui-anim_basic_16x16.gif); 
            display:inline-block;
            width:15px;
            height:15px;
            margin-bottom:-2px;
        }

    .am-filter .group-hd  .am-icon-plusthick{
        background-position: -557px -105px; 
    }

    .am-filter .group-hd  .am-icon-minusthick{
        background-position: -575px -105px; 
    }

   

/* Basic Filter*/
.am-filter-basic {
    border: solid 1px #C0C0C0;
}

    .am-filter-basic table {
        width: 99%;
    }

        .am-filter-basic table td {
            font-size: 8pt;
        }

    .am-filter-basic .hd {
        padding-right: 5px;
        padding-left: 5px;
        margin-bottom: 2px;
        padding-bottom: 2px;
        padding-top: 2px;
        margin-top: 2px;
        border-bottom: #ccc 1px solid;
        background-color: #eee;
        text-align: left;
    }

    .am-filter-basic .bd select {
        width: 53%;
    }

    .am-filter-basic .bd TD {
        text-align: right;
    }

    .am-filter-basic .bd .label {
        font-size: 13px;
        margin-right: 5px;
        font-weight: normal;
    }

    .am-filter-basic .bd input {
        text-align: right;
    }

    .am-filter-basic a {
        color: #1E90FF;
        text-decoration: underline;
        margin: 2px 2px 3px 0;
    }



img.ui-datepicker-trigger{
    vertical-align:middle;
}


/* ====================================================================================
   End dReveal's Filter
  ==================================================================================== */


/* ====================================================================================
   5. Dashboard 
  ==================================================================================== */

.am-dashboard-view {
    display: flex;
    flex-wrap: wrap;
    width:100%;
}

.am-dashboard iframe {
    width: 99.5%;
}

.am-dashboard {
    border: 1px #23668f solid;
    border-radius: 4px;
    margin: 4px;
    background-color:#ffffff;
}
.am-dashboard.column50 {
    flex: 0 0 49%;
}

.am-dashboard.column100 {
    flex: 0 0 99%;
}

    .am-dashboard .am-header {
        background: #77B8E0;
        border: 1px #23668f solid;
        border-radius: 4px;
        color: #FFF;
        margin:3px;
        padding: 3px;
    }

        .am-dashboard .am-header .am-title {
            font-size: 1.1em;
            font-weight: bold;
        }
        .am-dashboard .am-header .buttons {
            float:right;
        }

.am-dashboard-content{
    margin:3px;
}

/*start with filter*/
.am-dashboard-content .am-filter {
    border: solid 1px #C0C0C0;
    background: #EEE;
    margin: 0;
    padding: 10px 10px 0 10px;
}

    .am-dashboard-content .am-filter .row {
        display: flex;
        width: 100%;
    }

        .am-dashboard-content .am-filter .row .am-label {
            margin-right: 15px;
        }

        .am-dashboard-content .am-filter .row .am-ddl {
            width:85%;
        }
        .am-dashboard-content .am-filter .row .am-lbox {
           width:85%;
           margin-right:-30px;
           display:inline-block;
           overflow-x:scroll;       
         
        }      
        .am-dashboard-content .am-filter .row .am-tbox {
            width:80%;
        }
        .am-dashboard-content .am-filter .row .am-ddl.smaller {
            width:50%;
        }

        .am-dashboard-content .am-filter .row .am-label.small {
            color: green;
            font-size: x-small;
            text-align: justify;
            margin-top: 5px;
        }

        .am-dashboard-content .am-filter .row .column {
            flex: 0 0 25%;
        }
            .am-dashboard-content .am-filter .row .column.column-label {
                text-align: right;
            }

                .am-dashboard-content .am-filter .row .column.column-label.note {
                    flex: 0 0 50%;
                }
        .am-dashboard-content .am-filter .row .column .tm-datebox {
            width: 90px;
        }

        .am-dashboard-content .am-filter .row .am-footer {
            display: inline-block;
            text-align: right;
            margin: 0.3em 1.5em;
            width: 100%;
        }

.am-dashboard-content .am-grid {
    border: none;
    margin-top: 1.1em;   
}
    .am-dashboard-content .am-grid .am-title {
        font-size: 1.2em;
        text-align: center;
        color: #23668f;
        font-weight: bold;
        margin-bottom: .3em;
    }

    .am-dashboard-content .am-grid .igg_HeaderCaption,
    .am-dashboard-content .am-grid .am-col-header,
    .am-dashboard-content .am-grid .igg_Item td {
        font-size: .92em;
    }

    .am-dashboard-content .am-grid .ighg_GroupArea,
    .am-dashboard-content .am-grid .ighg_GroupIndentCell,
    .am-dashboard-content .am-grid .ighg_GroupIndentHeaderCell {
        display: none;
    }

    .am-dashboard-content .am-grid .igg_Control table[role*="grid"] {
        border-left: 1px solid #c0c0c0;        
    }
    .am-grid .igg_Control table[role*="grid"] {
        border-left: 1px solid #c0c0c0;
        table-layout: inherit;
    }
    .am-dashboard-content .am-grid .igg_Item td {
        border-top: 1px solid #c0c0c0;
        border-right: 1px solid #c0c0c0;        
    }

    .am-dashboard-content .am-grid .am-col-number,
    .am-dashboard-content .am-grid .am-col-state {
        text-align: center;
    }

    .am-dashboard-content .am-grid .am-col-header {
        background: #77B8E0;
        border: #5396E0 solid 1px;
        color: #FFF;
        font-weight: bold;
        text-align: center;
        height: 2.8em;
    }

    .am-dashboard-content .am-grid.recommendations-quarter .am-col-number {
        font-weight: bold;
    }

    .am-dashboard-content .am-grid.recommendations-quarter .am-col-state {
        font-style: italic;
    }


    .am-dashboard-content .am-grid.am-grid-ig-flat .ig_Item tr .ig_Selected,
    .am-dashboard-content .am-grid TABLE TBODY tr.igg_ActiveRow > td
    {
       background-color: #409cd2;
       color: #fff;       
    }
    .am-dashboard-content .am-grid.am-grid-ig-flat .ig_Item tr .ig_Selected a
    {
       color: #fff;     
    }

.am-dashboard-spinner {
    background-image:url(../images/spinner.gif);
    background-repeat:no-repeat;
    height:220px;
    top:0px;
}
.am-dashboard-spinner.center{
    background-position:center;
}

.am-dashboard-newpanel select{
    width:95%
}
.am-dashboard-newpanel .am-tbox{
    width:90%
}
.am-dashboard-newpanel .views{
    float:right;
    width:60%;
}

.am-dashboard-actions {
    position: relative; 
    top:30px;
    width:99%;
    z-index:1; 
}

.dashboardContent {
    position:relative;
}

.project-tracking .am-dashboard-view {
    width:100%
}
.project-tracking .am-dashboard-view.maximize {
    left:5px; 
    top: 55px;
    position:absolute;
}

.truncate-label {
    max-width: 150px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====================================================================================
   End Dashboard 
  ==================================================================================== */

/* ====================================================================================
   6. dReveal Dialog 
  ==================================================================================== */

.dReveal-gridview .ui-dialog .ui-dialog-buttonpane button {
    float: right;
}

.dReveal-gridview .ui-button-text-only .ui-button-text {
    font-weight: bold;
}

.dReveal-gridview .ui-dialog-titlebar .ui-dialog-title {
    padding: 0.3em;
}

.dReveal-gridview .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-button-text {
    padding: 0.3em 0.4em 0 0.4em;
}

/* ====================================================================================
   End dReveal Dialog
  ==================================================================================== */


/* ====================================================================================
   7. dReveal ChartView 
  ==================================================================================== */
.am-chart-view table {
    border-collapse: collapse;
}

.am-chart-view .am-header {
    display: flex;
    justify-content: space-between;
    border-bottom: solid 1px #c6c6c6;
    background: #EEE;
    padding: 0.2em;
    text-align: left;
}

.am-chart-view .header .section1,
.am-chart-view .header .section2 {
    flex: 1;
}

.am-chart-view .header .section1 {
    padding-top: 4px;
    padding-left: 6px;
}

.am-chart-view .header .section2 {
    text-align: right;
}

    .am-chart-view .header .section2 input {
        vertical-align: bottom;
    }

/* ====================================================================================
   Report in survey area  todo: after update the Report View page these could be removed 
  ==================================================================================== */


.ReportViewer .viewer-layout-main-panel {
    background: #FFF;
    display: block !important;
    top: 33px !important;
}

.ReportViewer .am-dialog .ui-dialog-titlebar-close span {
    margin: -7px !important;
}

.ReportViewer .arvToolBar {
    background: #EEE;
    display: block;
}
.ReportContainer{
  overflow:hidden;
}

.am-dashboard .dwiframe div.ReportContainer
{
  overflow-x:hidden;
  overflow-y:auto;
}

.dashboard-report #viewer-layout-main-panel > div {
    overflow-y: hidden !important;
}

/* ====================================================================================
   End dReveal ChartView 
  ==================================================================================== */


/* ====================================================================================
   8. HOME
  ==================================================================================== */

.home {
    background-image: url('../images/bodybackground.png');
}

.teamcentralLogo {
    background: url('../images/teamcentral_logo.png') right center no-repeat;
    width: 645px;
    height: 43px;
}

.teamcentralTeammateLogo {
    background: url('../images/login_logo.png') top center no-repeat;  
}

.maincontainerHome {
    display: flex;
    flex-wrap: wrap;
    width: 645px;
    margin: auto;
    padding-top: 70px;
    color: white;
}

.maincontainer-item-logo {
    background-color: white;
    width: 365px;
    height: 320px;
    display: flex;
}

    .maincontainer-item-logo div {
         width: 365px;
        height: 320px;
        margin: auto;
    }

.maincontainer-item-contain {
    background-color: rgb(0,101,161);
    padding-left: 10px;
    flex-direction: column;
    height: 320px;
    width: 270px;
    margin: auto;
}

    .maincontainer-item-contain select {
        width: 88%;
    }

.maincontainer-item-contain-item {
    padding-top: 15px;
    margin: auto;
}

    .maincontainer-item-contain-item div {
        padding-top: 3px;
    }

.maincontainer-item-right {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
}

.maincontainer-item-left {
    width: 100%;
    padding-top: 5px;
}


.logintext {
    font-family: 'Arial';
    font-size: 8pt;
    color: white;
}

.home a:link {
    color: #ffffff;
}

.home a:visited {
    color: #ffffff;
}

.home a:hover {
    color: #C6C5E4;
}

.home a:active {
    color: #ffffff;
}

.home input {
    color: #003366;
    font-size: 8pt;
    border: solid #003366 1px;
    cursor: auto;
}

.home select {
    color: #003366;
    font-size: 8pt;
    border: solid #003366 1px;
    cursor: auto;
    scrollbar-arrow-color: #000000;
    scrollbar-base-color: #ffffff;
    scrollbar-face-color: #e6e6e6;
    scrollbar-darkshadow-color: #e6e6e6;
}

.divTable {
    display: table;
    width: 100%;
    text-align: left;
    margin: 0 auto;
}

.divRow {
    display: table-row;
}

.divCell {
    display: table-cell;
    vertical-align: middle;
}
.workflow-title {
    font-weight: bold;
    font-size: 18px;
}
.workflow-label {
    font-family:'Segoe Print';
    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
}
.homeHeaderWhite {
    font-family: arial,Sans-Serif;
    color: #ffffff;
    font-weight: 400;
    font-size: 18px;
    text-decoration: none;
}

.LabelHome {
    font-family: arial,Sans-Serif;
    color: #ffffff;
    font-weight: 400;
    font-size: 13px;
    text-decoration: none;
}

.labelhomeInformation{            
   color: rgb(0, 97, 156) !important;    
   font-weight:bold;   
}
 
.Error {
    color: Red;        
    background-color: #ffd9d9;
    min-height: 0px;
}
.userprofile .error {
    color: red;
}
.maincontainerHome .Error {
    color: Red;        
    background-color: #ffd9d9;
    border: 1px solid #e5202e;
    min-height: 21px;
}


.Success {
    color: Green;
    font-size: 1.1em;
    font-weight: normal;
    text-decoration: none;
    padding: 2px;
}

.HyperLinkDarkBackground {
    font-family: arial,Sans-Serif;
    color: #ffffff;
    font-weight: 400;
    font-size: 11px;
    text-decoration: underline;
}

.HyperLinklogout {
    font-family: arial,Sans-Serif;
    font-weight: bold;
    font-size: 11px;
    text-decoration: underline;
}

.nodisplayCtrl {
    DISPLAY: none;
}
/* ====================================================================================
   End HOME
  ==================================================================================== */


/* ====================================================================================
   9. SPRITE ICONS
  ==================================================================================== */
.am-icon,
.ui-icon,
.ui-stars-grid a {
    background-image: url('../images/tmicons.png') !important;
    height: 16px;
    width: 16px;
}

span.am-icon {
    display: inline-block;
    vertical-align: middle;
}

.am-icon-empty {
    background-position: -40px 40px;
}

.am-icon-dashboard-home {
    background-position: -3px -4px;
    width: 40px;
    height: 40px;
}

.am-icon-leftpanel-left {
    background-position: -497px -57px;
}

.am-icon-leftpanel-right {
    background-position: -481px -57px;
}

.am-icon-report-home {
    background-position: -53px -6px;
    width: 40px;
    height: 40px;
}

.am-icon-risk-home {
    background-position: -253px -4px;
    width: 40px;
    height: 40px;
}

.am-icon-schedule-home {
    background-position: -205px -4px;
    width: 40px;
    height: 40px;
}

.am-icon-survey-home {
    background-position: -303px -8px;
    width: 40px;
    height: 40px;
}

.am-icon-timeexpense-home {
    background-position: -153px -5px;
    width: 40px;
    height: 40px;
}

.am-icon-tracking-home {
    background-position: -105px -6px;
    width: 40px;
    height: 40px;
}

.am-icon-arrow-down {
    background-position: -565px -20px;
}

.am-icon-arrow-up {
    background-position: -511px -19px;
}

.am-icon-close,
.ui-icon-closethick {
    background-position: -465px -19px !important;
}

.am-icon-dashboard-home32 {
    background-position: -7px -56px;
    width: 32px;
    height: 32px;
}

.am-icon-report-home32 {
    background-position: -58px -57px;
    width: 32px;
    height: 32px;
}

.am-icon-risk-home32 {
    background-position: -256px -55px;
    width: 32px;
    height: 32px;
}

.am-icon-schedule-home32 {
    background-position: -207px -57px;
    width: 32px;
    height: 32px;
}

.am-icon-survey-home32 {
    background-position: -307px -55px;
    width: 32px;
    height: 32px;
}

.am-icon-timeexpense-home32 {
    background-position: -157px -57px;
    width: 32px;
    height: 32px;
}

.am-icon-tracking-home32 {
    background-position: -110px -55px;
    width: 32px;
    height: 32px;
}

.am-icon-arrow-right-button {
    background-position: -360px -60px !important;
    width: 24px;
    height: 24px;
}

.am-icon-filter {
    background-position: -410px -61px;
    width: 20px;
    height: 20px;
}

.am-icon-arrow-down,
.am-filter .tm-listbar.tm-listbar-statemin .tm-listbar-label .am-icon,
.ui-icon-triangle-1-s {
    background-position: -449px -57px !important;
}

.am-icon-arrow-top,
.am-filter .tm-listbar .tm-listbar-label .am-icon,
.ui-icon-triangle-1-n {
    background-position: -465px -57px !important;
}

.am-icon-arrow-right {
    background-position: -481px -57px;
}

.am-icon-arrow-left {
    background-position: -497px -57px;
}

.am-icon-arrow-down-double,
.tm-listbar.tm-listbar-statemin .tm-listbar-label .am-icon {
    background-position: -513px -57px;
}

.am-icon-arrow-up-double,
.tm-listbar .tm-listbar-label .am-icon {
    background-position: -529px -57px;
}

.am-icon-arrow-down-white { background-position: -449px -73px;}
.am-icon-arrow-up-white { background-position: -465px -73px;}
.am-icon-arrow-right-white,
.am-grid-view tr.selected td.indicator .am-icon{
     background-position: -481px -73px;
}
.am-icon-arrow-left-white{ background-position: -497px -73px;}
.am-icon-arrow-down-double-white{ background-position: -513px -73px;}
.am-icon-arrow-up-double-white{ background-position: -529px -73px;}

.am-icon-survey-question{ background-position: -553px -57px;}
.am-icon-survey-group-grid{ background-position: -569px -57px;}
.am-icon-survey-group{ background-position: -585px -57px;}

.am-icon-survey-add-group{ background-position: -3px -100px;  width: 24px; height: 24px;}
.am-icon-survey-add-group-grid{ background-position: -27px -100px;  width: 24px; height: 24px;}
.am-icon-survey-add-question{ background-position: -51px -100px;  width: 24px; height: 24px;}
.am-icon-survey-copy-question{ background-position: -75px -100px; width: 24px; height: 24px;}
.am-icon-survey-remove-question{ background-position: -99px -100px; width: 24px; height: 24px;}

.am-icon-delete {
    background-position: -609px -57px;
}

.am-icon-delete-red {
    background-position: -607px -21px;
}

.am-icon-next {
    background-position: -44px -129px;
    width: 18px;
    height: 17px;
}

.am-icon-spinner-down {
    background-position: -63px -132px;
    width: 11px;
    height: 6px;
}

.am-icon-calendar {
    background-position: -5px -128px;
    width: 17px;
    height: 18px;
}

.am-icon-spinner-up {
    background-position: -80px -132px;
    width: 13px;
    height: 7px;
}

.am-icon-preview {
    background-position: -29px -130px;
    width: 15px;
    height: 14px;
}

.am-icon-bold {
    background-position: -6px -155px;
}

.am-icon-italic {
    background-position: -27px -155px;
}

.am-icon-underline {
    background-position: -49px -155px;
}

.am-icon-strikeout {
    background-position: -76px -155px;
    width: 24px;
}

.am-icon-color-fore {
    background-position: -103px -155px;
    width: 28px;
    height: 21px;
}

.am-icon-color-back {
    background-position: -140px -155px;
    width: 28px;
    height: 21px;
}


.am-icon-dashboard-add {
    background-position: -5px -178px;
}

.am-icon-dashboard-add-disabled {
    background-position: -33px -178px;
}

.am-icon-dashboard-add:hover {
    background-position: -59px -178px;
}

.am-icon-dashboard-delete {
    background-position: -85px -178px;
}

.am-icon-dashboard-delete-disabled,
.am-button.hollow:disabled .am-icon-delete-red
{ background-position: -106px -178px;}
.am-icon-dashboard-delete:hover{ background-position: -130px -178px;}
.am-icon-dashboard-edit{ background-position: -153px -178px;}
.am-icon-dashboard-edit-disabled,
.am-button.hollow:disabled .am-icon-dashboard-edit
{ background-position: -172px -178px;}

.am-icon-dashboard-edit:hover {
    background-position: -193px -178px;
}
.am-icon-cancel {
    background-position: -133px -100px;
}
.am-icon-cancel-hover {
    background-position: -157px -100px;
}

.ui-stars-grid a,
.am-icon-star {
    background-position: -181px -100px;
}

.ui-stars-grid-on a,
.am-icon-star-on {
    background-position: -205px -100px;
}

.ui-stars-grid-hover a,
.am-icon-star-hover {
    background-position: -232px -100px;
}



.am-icon-approve {
    background-position: -318px -100px;
}

.am-button.action:disabled .am-icon-approve {
    background-position: -337px -100px;
}

.am-icon-reject {
    background-position: -599px -100px;
}

.am-button.action:disabled .am-icon-reject {
    background-position: -620px -100px;
}

.am-icon-updatestatus {
    background-position: -256px -101px;
}

.am-button.action:disabled .am-icon-updatestatus {
    background-position: -279px -100px;
}

.am-icon-comment {
    background-position: -453px -100px;
}

.am-button.action:disabled .am-icon-comment {
    background-position: -475px -100px;
}

.am-icon-implemented {
    background-position: -358px -100px;
}

.am-button.action:disabled .am-icon-implemented {
    background-position: -380px -100px;
}

.am-icon-closebutton {
    background-position: -403px -100px;
}

.am-button.action:disabled .am-icon-closebutton {
    background-position: -428px -100px;
}

.am-icon-reopen {
    background-position: -497px -100px;
}

.am-icon-approve{ background-position: -318px -100px; }
.am-button.hollow:disabled .am-icon-approve{ background-position: -337px -100px; }
.am-icon-reject{ background-position: -599px -100px; }
.am-button.hollow:disabled .am-icon-reject{ background-position: -620px -100px;}
.am-icon-updatestatus{ background-position: -256px -101px; }
.am-button.hollow:disabled .am-icon-updatestatus{ background-position: -279px -100px;}
.am-icon-comment{ background-position: -453px -100px;}
.am-button.hollow:disabled .am-icon-comment{ background-position: -475px -100px; }
.am-icon-implemented{ background-position: -358px -100px;}
.am-button.hollow:disabled .am-icon-implemented{ background-position: -380px -100px; }
.am-icon-closebutton{ background-position: -403px -100px; }
.am-button.hollow:disabled .am-icon-closebutton{ background-position: -428px -100px;}
.am-icon-reopen{ background-position: -497px -100px; }
.am-button.hollow:disabled .am-icon-reopen{ background-position: -519px -100px;}


.am-icon-warning {
    background-position: -299px -100px;
}

.am-icon-cog{ background-position: -166px -200px; }
.am-icon-helpsmall{ background-position: -46px -200px; }
.am-icon-subtract{ background-position: -25px -200px; }
.am-icon-add{ background-position: -4px -200px; }
.am-icon-filter-white{ background-position: -74px -200px;}
.am-icon-filter-white24{ background-position: -97px -200px; width: 24px; height: 24px; }
.am-icon-filter-white32{ background-position: -126px -200px; width: 32px; height: 32px; }
.am-icon-dashboard-back{ background-position: -191px -200px; }
.am-icon-dashboard-goto{ background-position: -212px -200px; }

.am-icon-graph{ background-position: -53px -222px; width: 20px; height: 20px; }
.am-icon-pdf{ background-position: -27px -220px; }
.am-icon-xls{ background-position: -3px -220px; }

.am-icon-replace{ background-position: -5px -250px; }

.am-icon-attachment{ background-position: -351px -150px; width: 18px; height: 18px;}
.am-icon-attachment-disabled{ background-position: -373px -150px; width: 18px; height: 18px; }
.am-icon-dialog-error{ background-position: -416px -150px;}
.am-icon-find{ background-position: -394px -150px;}
.am-icon-notes{ background-position: -439px -150px; width: 10px; height: 10px; }

.am-icon-approval{ background-position: -600px -150px; width: 10px; height: 10px; }
.am-icon-inprogress{ background-position: -476px -150px; width: 10px; height: 10px; }
.am-icon-inprogress-down{ background-position: -585px -150px; width: 10px; height: 10px; }
.am-icon-newtimesheet{ background-position: -459px -150px; width: 12px; height: 12px; }
.am-icon-overdue{ background-position: -534px -150px; }
.am-icon-tec-reject{ background-position: -505px -150px; width: 10px; height: 10px; }
.am-icon-resubmit{ background-position: -569px -150px; width: 10px; height: 10px; }
.am-icon-submit{ background-position: -553px -150px; width: 10px; height: 10px; }
.am-icon-unsubmit{ background-position: -520px -150px; width: 10px; height: 10px; }
.am-icon-awaiting{ background-position: -490px -150px; width: 10px; height: 10px; }

.am-icon-finder{ background-position: -351px -170px; }
.am-icon-finder-disabled{ background-position: -375px -170px; }
.am-icon-pencil-cancel{ background-position: -449px -170px; width: 15px; height: 15px;}
.am-icon-save{ background-position: -423px -170px; width: 15px; height: 15px; }
.am-icon-pencil{ background-position: -399px -170px; width: 15px; height: 15px; }
.am-icon-print{ background-position: -511px -170px; width: 20px; height: 20px; }
.am-icon-timesheet-copy{ background-position: -471px -170px; }
.am-icon-timesheet-delete{ background-position: -491px -170px; }
.am-icon-arrow-expand{ background-position: -536px -170px; width: 15px; height: 15px; }
.am-icon-logout{ background-position: -556px -170px; width: 10px; height: 10px; }
.am-icon-key{ background-position: -572px -168px; width: 13px; height: 11px; }

.am-icon-timesheet-arrow-down{ background-position: -339px -170px; width: 7px; height: 6px; }
.am-icon-user{ background-position: -612px -170px; }
.am-icon-reject-dark{ background-position: -591px -170px; }

.am-icon-grid-divider{ background-position: -631px -150px; width: 4px; height: 22px; }

.am-icon-legend{ background-position: -337px -200px; }

/* ====================================================================================
   End SPRITE ICONS
  ==================================================================================== */


/* ====================================================================================
   10. Dialogs
  ==================================================================================== */
.am-dialog,
.dReveal-gridview .ui-widget-content {
    font-family: Arial,Sans-Serif;
    font-size: 9pt;
    border: 1px #c7dbe5 solid;
}

    .am-dialog .ui-widget-header,
    .dReveal-gridview .ui-widget-header {
        font-weight: bold;
    }

    .am-dialog .ui-dialog-titlebar,
    .dReveal-gridview .ui-dialog-titlebar {
        background: #EEF3F8;
        border: 1px #c7dbe5 solid;
        color: black;
    }


    .am-dialog .ui-widget-content,
    .dReveal-gridview .ui-widget-content {
        background: #fff none repeat scroll 0 0;
        color: #362b36;
    }

.am-dialog  .ui-button-text-only,
.am-dialog  .ui-dialog-titlebar-close .ui-state-default,
.am-dialog .ui-dialog-buttonpane .ui-state-default,
.dReveal-gridview .ui-button-text-only,
.am-dialog .ui-dialog-titlebar-close,
.am-dialog .ui-widget-content .ui-state-default,
.am-dialog .ui-widget-header .ui-state-default,
.dReveal-gridview .ui-dialog-buttonpane .ui-state-default,
.dReveal-gridview .ui-dialog .ui-widget-header .ui-state-default,
.am-pivot-grid .dxpcLite .dxpc-closeBtn{
    background-color: #D1E5EF;
    border: 1px solid #77B8E0;
    color: rgb(31, 128, 173);
    font-weight: bold;
}


.am-dialog .ui-dialog-buttonpane .ui-state-hover,
.am-dialog .ui-dialog-titlebar-close .ui-state-hover,
.dReveal-gridview .ui-dialog-buttonpane .ui-state-hover,
.am-pivot-grid .dxpcLite .dxpc-closeBtn:hover{
    background-color: #C7DBE5;   
    border: 1px solid #77B8E0;
    color: rgb(31, 128, 173);
    font-weight: bold;
}
.am-dialog .ui-dialog-buttonpane,
.dReveal-gridview .ui-dialog .ui-dialog-buttonpane {
    border-top: 1px solid #bbc8ce;
    font-weight: bold;
}
.am-dialog .ui-icon-closethick,
.dReveal-gridview .ui-icon-closethick,
.am-pivot-grid .dxWeb_pcCloseButton {
    background-image:url('../images/tmicons.png');
    background-position: -465px -19px;
}


/* ====================================================================================
   End Dialogs
  ==================================================================================== */

/* ====================================================================================
   11. Tab Links
  ==================================================================================== */

.tab-Header {    
    min-height: 18px;
    width: 260px;
    display: inline-flex;
    font-size: 0.95em;
    font-weight: bold;
    color: rgb(0,97,156);
    padding: 2px 5px 2px 15px;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    background-color: #d1e5ef;
    border: 1px solid #c7dbe5;
}

    .tab-Header span {        
        margin-top: 5px;              
    }

    .tab-Header .am-icon {
        float: right;
    }

.tab-content {
    background: #fff;
    padding: 2px 0px 2px 2px;
    border: 2px solid #c7dbe5;
    font-size: 0.95em;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-top-right-radius: 12px;
}

    .tab-content .divCell {
        padding-left: 10px;
    }

#administrationlayout {
    padding-left: 15px;
    padding-top: 10px;
    height: 100%;
    width: 700px;
}

/* ====================================================================================
   End Tab Links
  ==================================================================================== */

/* ====================================================================================
   12. CalendarsPicker
  ==================================================================================== */

.calendars {
    background-color: #fff;
    font-family: helvetica,Arial,sans-serif;
    font-size: .95em;
    -webkit-box-shadow: 0 2px 3px 1px rgba(100,100,100,.5) !important;
    border: 1px solid #bbc8ce;
    padding: .2em;
    border-radius: 5px;
}

.calendars-rtl {
    direction: rtl;
}

.calendars-popup {
    z-index: 1000;
}

.calendars-disable {
    position: absolute;
    z-index: 100;
    background-color: white;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.calendars a {
    color: #fff;
    text-decoration: none;
}

    .calendars a.calendars-disabled {
        color: #888;
        cursor: auto;
    }

.calendars button {
    margin: 0.25em;
    padding: 0.125em 0em;
    background-color: #fcc;
    border: none;
    border-radius: 0.25em;
    font-weight: bold;
}

.calendars-nav, .calendars-ctrl {
    display: none;
}

.calendars-rtl .calendars-cmd-prev, .calendars-rtl .calendars-cmd-prevJump,
.calendars-rtl .calendars-cmd-clear {
    float: right;
    padding-left: 0%;
    padding-right: 2%;
    text-align: right;
}

.calendars-rtl .calendars-cmd-current, .calendars-rtl .calendars-cmd-today {
    float: right;
}

.calendars-rtl .calendars-cmd-next, .calendars-rtl .calendars-cmd-nextJump,
.calendars-rtl .calendars-cmd-close {
    float: left;
    padding-left: 2%;
    padding-right: 0%;
    text-align: left;
}

.calendars-month-nav {
    float: left;
    background-color: #777;
    text-align: center;
}

    .calendars-month-nav div {
        float: left;
        width: 12.5%;
        margin: 1%;
        padding: 1%;
    }

    .calendars-month-nav span {
        color: #888;
    }

.calendars-month-row {
    clear: left;
}

.calendars-month {
    float: left;
    width: 19.5em;
    text-align: center;
    margin-bottom: .5em;
}

.ui-datepicker .ui-datepicker-header,
.calendars-month-header {
    border: 1px solid #bbc8ce;
    background-color: #eef3f7;
    color: #222;
    padding: .25em 0;
    border-radius: 5px;
}

    .calendars-month-header,
    .calendars-month-header select,
    .calendars-month-header input {
        color: #222;
        font-family: helvetica,Arial,sans-serif;
        font-size: 1.1em;
    }

        .calendars-month-header select,
        .calendars-month-header input {
            border: rgb(169, 169, 169) 0.2px solid;
        }

        .calendars-month-header input {
            position: absolute;
            display: none;
        }

.calendars-month table {
    width: 100%;
}

.calendars-month thead {
    border-bottom: 1px solid #aaa;
}

.calendars-month th, .calendars-month td {
    margin: 0;
    padding: 0;
    font-weight: normal;
    text-align: center;
}

    .calendars-month th, .calendars-month th a {
        background-color: #FFF;
        color: #222;
        font-weight: bold;
    }

.calendars-month td {
    background: #FFF;
}

    .calendars-month td.calendars-week * {
        background-color: #e9eef2;
        color: #fff;
        border: none;
    }

.calendars-month a,
.calendars-month span {
    display: block;
    width: 100%;
    padding: 0.3em 0;
}

.calendars-month a {
    color: black;
    text-decoration: none;
}

.calendars-month td span {
    opacity: .6;
    text-shadow: 2px 2px 2px #c0c0c0;
}

.calendars-month td .calendars-other-month {
}

.calendars-month td .calendars-today {
}


.ui-datepicker .ui-datepicker-calendar td a.ui-state-default.ui-state-hover,
.calendars-month td .calendars-highlight {
    background-color: #dbeff9;
}



.ui-datepicker .ui-datepicker-calendar td a.ui-state-default.ui-state-active,
.calendars-month td .calendars-selected {
    color: #fff;
    background-color: #409cd2;
    border-radius: 2px;
}

.calendars-status {
    clear: both;
    background-color: #ddd;
    text-align: center;
}

.calendars-clear-fix {
    clear: both;
}


.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.calendars-month-header .calendars-cmd-prev,
.calendars-month-header .calendars-cmd-next {
    background-image: url('../images/tmicons.png');
    background-repeat: no-repeat;
    width: 13.3px;
    height: 14px;
    display: inline-block;   
    margin-top: 2px;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.calendars-month-header .calendars-cmd-prev {
    background-position: -29px -130px;
    float: left;
    margin-left: 0.4em;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.calendars-month-header .calendars-cmd-next {
    background-position: -45px -130px;
    float: right;
    margin-right: 0.3em;   
}

.am-grid .am-icon.calendars-trigger,
span.am-icon.calendars-trigger {
    background-position: -5px -129px;
    margin: 0 0 0 -18px;
    width: 16px;
    height: 17px;
    vertical-align: bottom;
    cursor: pointer;
}


.ui-datepicker .ui-datepicker-calendar td a.ui-state-default {
    border:none;
}

.ui-datepicker .ui-datepicker-header span.ui-icon.ui-icon-circle-triangle-w,
.ui-datepicker .ui-datepicker-header span.ui-icon.ui-icon-circle-triangle-e {
    background-image:none;
    background-position:47px 47px;
}

.ui-datepicker .ui-datepicker-calendar td a.ui-state-default.ui-state-highlight {
    background-color:#85bc20;
    border:1px solid transparent;
    color:#FFF;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    margin-right: 0.4em;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next
{    
    width: 14px;
    top:5px;
}


/* ====================================================================================
   End CalendarsPicker
  ==================================================================================== */


/* ====================================================================================
   13. date-spinner 
  ==================================================================================== */


.date-spinner {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
}

    .date-spinner .date-spinner-up,
    .date-spinner .date-spinner-down {
        display: block;
        height: 8px;
        width: 13px;
        position: absolute;
        right: 18px;
    }

    .date-spinner .date-spinner-up {
        background-position: -81px -132px;
        bottom: 10px;
    }

    .date-spinner .date-spinner-down {
        background-position: -63px -132px;
        bottom: 1px;
    }



/* ====================================================================================
   End date-spinner 
  ==================================================================================== */


/* ====================================================================================
   14. Filters 
  ==================================================================================== */
.am-filter .tm-listbar-label {
    background: #eee;
    border: 1px solid #c0c0c0;
    display: block;
    border-radius: 0;
    padding: .3em;
}
.am-filter .tm-listbar-label .am-icon {
    display: inline-block;
    float: none;
    vertical-align: text-bottom;
}
.am-filter .tm-listbar-content {
    border: 1px solid #c0c0c0;
    border-top: none;
    padding: 0;
}
.am-filter .am-body {
    padding: 0 .2em;
}
.am-filter .am-body .row .column {
    margin: .2em 0;
}
.am-filter .am-body .row {
    display: flex;
    width: 100%;
    align-items: center;
}
.am-filter .am-body .row .column fieldset {
    margin: 0 auto;
    padding: 0;
}
.am-filter .am-body .row .column fieldset select {
    width: 99%;
    display: block;
    margin: 0 auto;
}
.am-filter .am-body .row .column-label {
    text-align: right;
    font-size: .9em;
}
.am-filter .am-body .row .column-label > * {
    margin-right: .4em;
}
.am-filter .am-body .row .column .tm-datebox {
    width: 90px;
}
.am-filter .am-body .row .column.column-icon{
    flex: 0 0 16px;
}
.am-filter .am-body .row .column.column-icon .am-icon {
    margin: 1px 0;
}
/* Recommendation */
.am-filter-recommendation .row .column {
    flex: 2;
}
.am-filter-recommendation .row .column.column-label {
    flex: 1;
}
.am-filter-recommendation .row .column-project > * {
    margin-top: .1em;
    margin-bottom: .1em;
}
.am-filter-recommendation .row .column-date-range {
    text-align: right;
}
.am-filter-recommendation .row .column-date-range .tm-datebox {
    margin-top: 1px;
    margin-left: 1px;
}
.am-filter-recommendation .row .column select {
    width: 100%;
}
/* Notification */
.am-filter-notification .row .column {
    flex: 0 0 14%;
}
.am-filter-notification .row .column.column-date-range,
.am-filter-notification .row .column.column-days-due {
    flex: 0 0 72%;
}
.am-filter-notification .row .column .column {
    flex: 2;
}
.am-filter-notification .row .column .column.column-label {
    flex: 1;
}
.am-filter-notification .row .column .am-body{
    border: 1px solid #c0c0c0;
}
.am-filter-notification .row .column select {
    width: 100%;
}
.am-filter-notification .row .column.column-filter-type select {
    width: auto;
}
/* Aging, Project */
.am-filter-aging .row .column, 
.am-filter-project .row .column {
    flex: 0 0 20%;
}
.am-filter-aging .row .column.column-date-range,
.am-filter-project .row .column.column-date-range {
    flex: 0 0 40%;
}
.am-filter-aging .row .column .column {
    flex: 0 0 65%
}
.am-filter-aging .row .column .column.column-label {
    flex: 0 0 35%
}
.am-filter-aging .row .column.column-date-range .column,
.am-filter-project .row .column.column-date-range .column {
    flex: 0 0 30%
}
.am-filter-aging .row .column.column-date-range .column.column-label,
.am-filter-project .row .column.column-date-range .column.column-label {
    flex: 0 0 20%
}
.am-filter-aging .row .column fieldset,
.am-filter-project .row .column fieldset {
    min-height: 5em;
    width: 96%;
}
.am-filter-aging .row .column.column-date-range fieldset,
.am-filter-project .row .column.column-date-range fieldset  {
    width: 98%;
}
.am-filter-project.am-filter-project-status .row .column fieldset {
    min-height: 6.5em;
}
/* Status Update, Implementation */
.am-filter-status .row .column,
.am-filter-implementation .row .column {
    flex: 1;
}
.am-filter-status .row .column fieldset,
.am-filter-implementation .row .column fieldset {
    width: 98%;
    min-height: 5em;
}
.am-filter-status .row .column.column-date-range .column,
.am-filter-implementation .row .column.column-date-range .column {
    flex: 0 0 30%;
}
.am-filter-status .row .column.column-date-range .column.column-label,
.am-filter-implementation .row .column.column-date-range .column.column-label {
    flex: 0 0 20%;
}
/* States View */
.am-filter-states-view .row .column {
    flex: 0 0 20%;
}
.am-filter-states-view .row .column.column-date-range {
    flex: 0 0 40%;
}
.am-filter-states-view .row .column fieldset {
    width: 96%;
}
.am-filter-states-view .row .column.column-date-range fieldset {
    width: 98%;
}
.am-filter-states-view .row .column .column {
    flex: 1;
}
.am-filter-states-view .row .column.column-date-range .column {
    flex: 0 0 30%;
}
.am-filter-states-view .row .column.column-date-range .column.column-label {
    flex: 0 0 20%;
}
.am-filter-states-view .row .column.column-project .column {
    flex: 0 0 65%;
}
.am-filter-states-view .row .column.column-project .column.column-label {
    flex: 0 0 35%;
}
.am-filter-states-view .row .column.column-project .column input {
    width: 92%;
}
.am-filter-states-view .row .column fieldset {
    min-height: 5.5em;
}
.am-filter-states-view.am-filter-states-view-contactless .row .column {
    flex: 1;
}
.am-filter-states-view.am-filter-states-view-contactless .row .column.column-date-range {
    flex: 2;
}
/* Milestone */
.am-filter-milestone .row .column {
    flex: 0 0 26%;
}
.am-filter-milestone .row .column-date-range {
    flex: 0 0 48%;
}
.am-filter-milestone .row .column .column {
    flex: 0 0 60%;
}
.am-filter-milestone .row .column .column.column-label {
    flex: 0 0 40%;
}
.am-filter-milestone .row .column.column-date-range .column {
    flex: 0 0 30%;
}
.am-filter-milestone .row .column.column-date-range .column.column-label {
    flex: 0 0 20%;
}
.am-filter-milestone .row .column fieldset {
    width: 97%;
    min-height: 5em;
}
/* ====================================================================================
   End Filters
  ==================================================================================== */

/*  ====================================================================================
15. TABS
====================================================================================
*/
.am-tabs .ui-widget-header {
    background: #eee;
    color: #222222;
    font-weight: bold;
}

.am-tabs .ui-tabs{    
    border: silver 1px solid;
    border-radius: 0px;
    font-size:9pt;
    font-family:Arial,Sans-Serif;
}

.am-tabs ul.ui-tabs-nav {
    padding: 0;
    border: none;
    border-radius: 0px;   
    width:100%;
    display:inline-table;    
    margin-bottom:5px;   
}

.am-tabs ul.ui-tabs-nav li.ui-state-default {
    background: rgb(230,230,230);
    border: rgb(155,155,155) 1px solid;
    margin-left: 1px;
    margin-right: -1px;        
}
.am-tabs .ui-tabs-panel{
    background: #fff;     
    padding:12px 10px 0px 10px;    
}
.am-tabs .ui-state-default .ui-tabs-anchor {    
    color: rgb(31,128,173);
    font-weight: bold;
    padding: .5em 1em;
}

.am-tabs ul.ui-tabs-nav li.ui-tabs-active {
    background: #fff;    
    color: #231d8a;
    border-bottom: 1px solid #fff;
}

.am-tabs .ui-selected li {
    height: 20px;
    background: #fff;
}

.am-tabs .ui-selected td {
   background-color: #409cd2;
   color: #fff;
}

.am-tabs .survey-div-grid {
    background: #fff;
    margin:4px 0;
    border: 0;
    padding: 0px 10px 0px 10px;
}

.am-tabs-audit .ui-tabs-panel {
    padding: 0;
}

/*
====================================================================================
END TABS
====================================================================================
*/

/*
====================================================================================
16. This is the default class for the HtmlSandboxControl.
====================================================================================
*/
.HtmlSandbox {
    border: none 1px #000000;
    height: 100%;
    overflow: visible;
    padding: 0px;
    width: 100%;    
}

.HtmlSandbox-container {
    font-size: 1.1em;
}
.TabScroll {
    height: 100%;
    width: 100%;
    overflow: auto;
    OVERFLOW-X: auto;
    OVERFLOW-Y: auto;
    scrollbar-arrow-color: #000000;
    scrollbar-base-color: #ffffff;
    scrollbar-face-color: #e6e6e6;
    scrollbar-darkshadow-color: #e6e6e6;   
}
/*
====================================================================================
END HtmlSandboxControl.
====================================================================================
*/


/*
====================================================================================
Style Conditional F. Grid
====================================================================================
*/

.RowGridBackgroundgold {
    background-color: gold !important;
}

.RowGridBackgroundtomato {
    background-color: tomato !important;
}

.RowGridBackgroundlightGreen {
    background-color: lightgreen !important;
}

.ColorTomato {
    background-color: tomato !important;
}
.ColorGold {
    background-color: goldenrod !important;
}
.ColorLightGreen {
    background-color: lightgreen !important;
}

.StatusBlueItalic {
    color :  #839DB6 !important;
    font-style: italic !important;
}
.StatusGreyItalic {
    color :  #949494 !important;
    font-style: italic !important;
}
.StatusBold {
    font-weight:bold !important;
    color: lightgreen !important;
}
.StatusBlackBold {
    font-weight:bold !important;
    color: #000000 !important;
}
.ActiveColumn {
    color: green !important;
}

.InactiveColumn {
    color: red !important;
}

/*
====================================================================================
END Style Conditional F. Grid
====================================================================================
*/

/**/
@media screen and (max-width:1280px) {
    .am-filter-recommendation .row .column select {
        width: 80%;
        float: left;
    }

    .am-filter-recommendation .am-body .row .column fieldset {
        width: 180px;
        float: left;
        min-width: 100px
    }

    .am-filter-recommendation .column.column-date-range {
        width: 180px;
        float: left;
    }

    .am-filter-recommendation .row .column.column-label {
        width: 400px;
    }

    .am-filter-recommendation .am-body .row .column.column-icon {
        position: relative;
        left: -30px;
    }
}

@media screen and (max-width:1024px) {
    .am-filter-recommendation .row .column select {
        width: 80%;
        float: left;
    }

    .am-filter-recommendation .am-body .row .column fieldset {
        width: 130px;
        float: left;
        min-width: 100px;
    }

    .am-filter-recommendation .column.column-date-range {
        width: 130px;
        float: left;
    }

    .am-filter-recommendation .row .column.column-label {
        width: 400px;
    }
}
/**/