body{
    height:100%;
    width:100%;
    background-color: #eee;
}

/*Begin - Only PC Display--------------------------------------------------*/
@media screen and (min-device-width: 1400px) { 
    .table-FixedFooter{
        width:98.5%;
    }
    .table-FixedHeader {
        width:98.7%;                
    } 
    .table-FixedHeader thead tr th {border:0 none !important}   
}
/*End - Only PC Display--------------------------------------------------*/

/*Non-Phone Display--------------------------------------------------*/
@media screen and (min-width: 769px) {
    .container-topmargin{
        /*margin-top:155px;*/
        margin-top:7%;
    }

    /*.modal {
        text-align: center;
    }

    .modal:before {
            display: inline-block;
            vertical-align: middle;
            content: " ";
            height: 100%;
    }

    .modal-dialog {
        width: 955px;
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }

    .modal-body {
        max-height: calc(100vh - 210px);
        overflow-y: auto;
    }*/

    .modal {
        /*z-index: 900;*/
    }

    .modal-dialog {
        height: 100vh !important;
        display: flex;
        z-index: 998;
    }

    .modal-content {
        margin: auto !important;
        height: fit-content !important;
    }

    .lg-Header{
        background-image:url('/Common/Images/headerbg.gif');
        background-repeat:repeat-x;
        background-color:silver;
        height:60px;
        color:white;    
        font-size:2.1em;  
        vertical-align:middle;
        font-weight:bold;         
    }

    .lg-HeaderText{
        padding-left:0px;
        height: 56px;
        vertical-align: middle;    
        display: table-cell;
    }

    .lg-LoggedInUserDiv{
        font-size:0.5em;   
        font-weight:bold; 
        padding-right:2px;
    }

    .lg-LoggedInUserDiv a{
        color:white;
    }

    .xs-Display{
        display:none !important; 
    }

    .lg-Display{
        display:block !important;
    }

    .navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important; }
    .navbar {min-height:32px !important;position: static;}
    .navbar .nav > li {  z-index: 1; }

    .table-FixedBody {
       table-layout:fixed !important;
       /*height:245px !important;*/
       overflow-y:scroll !important;
    }

    .sortable{cursor:pointer}

    #benefitDetailModalBody .optionHeight{
        border-left-style:solid;border-left-width:1px;height:400px;border-color:lightgray;
    }

    /*.modal .modal-dialog { width: 900px; }*/
}

@media screen and (min-width: 769px) and ( min-height: 768px ) {
       .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        height: 200px;        
    }
}
/*-------------------------------------------------------------------*/

/*Phone Display*/
/*This style is for the all phones with screen width less or equal than 420px*/
@media screen and (min-width : 320px) and (max-width : 420px) 
    {   
      .xs-HeaderText{          
        padding-left:0px !important;        
        vertical-align: middle;    
        display: table-cell;
        text-align:left !important;
        font-size:1.4em;
        height:60px;
        color:white;
    }

      .xs-LoggedInUser{
        font-size:0.9em;   
        font-weight:bold; 
        text-align:right !important;
        padding-right:0px;    
         vertical-align: middle;    
        
    }

    #divStepNav div{
        padding:0px !important;
    }

    #divStepNav div ul li a{
        height:80px !important;
    }
}

/*This style is for the all phones/tablets with screen width greater than 421px*/
@media screen and (min-width : 421px) 
    {   
      .xs-HeaderText{          
        padding-left:0px !important;        
        vertical-align: middle;    
        display: table-cell;
        text-align:left !important;
        font-size:1.8em;
        height:60px;
        color:white;
    }

      .xs-LoggedInUser{
        font-size:1.0em;   
        font-weight:bold; 
        text-align:right !important;
        padding-right:0px;        
    }
}
/*--------------------------------------------------------------------*/

/*This common style will apply to all types of phone/tablet screen widths*/
@media screen  and (max-width: 768px) {

    .navbar-nav {
        float: none;
        margin: 0 auto;
        display: block;
    }

    .navbar-nav > li {
        display: inline-block;
        float: none;
    }

    .container-topmargin{
        margin-top:15px;        
    }   
  
    .modal-dialog {
      width: 100%;
      height: 100%;
      padding: 0;
      margin:0;
    }

    .modal-content {
      height: 100%;
      border-radius: 0;
      overflow:auto;
    }

    .MainHeaderDiv{        
        background-image:url('/Common/Images/headerbg.gif');
        background-repeat:repeat-x;
        background-color:silver;
        height:45px;
        color:white;    
        font-size:1.2em;    
        vertical-align:middle;
        font-weight:bold;   
        padding-right:2px;        
    }

    .xs-Header{
        background-image:url('/Common/Images/headerbg.gif');
        background-repeat:repeat-x;
        background-color:silver;
    }

    .navbar-brand{
        /*padding-left:10px;
        height: 45px;
        vertical-align: middle;    
        display: table-cell;*/        
    }  

    .xs-LoggedInUser{
        color:white;
    }
    .xs-LoggedInUser a{
        color:white;
    }
  
    /*.table-striped{
        background-color:lightgray;
    }

    .table{
        border-top-width:0px;
    }*/

    .xs-Display{
        display:block !important; 
        font-weight:bold;
    }

    .lg-Display{
        display:none !important;
    }

    .nav-divider{
        background-color:white !important;
    }  
    
    .navbar-toggle{
       background-color:inherit !important;    
        position:absolute;
        top:0px;
        left:10px;    
    } 

    .xs-FullWidth{
        display:inline !important;
        width:100% !important;
    }

    /*.modal .modal-dialog { width: 100%; }*/
}
/*--------------------------------------------------------------------*/

/*This is common style for both Phone and NonPhone--------------------*/
@media screen {  

    /*Carret effects*/
    .carretColor {
        border-top: 4px solid white;
    }

    /*Aligns item to middle*/
    .vcenter {
        vertical-align: middle;
    }

    /*Panel Heading style*/
    .panel-heading {
        height: 45px;
        vertical-align: bottom;
        padding-left: 5px;
    }

    /*Panel Footer style*/
    .panel-footer {
        padding: 1px 15px;
        color: #A0A0A0;
    }

    /*Login page profile image style*/
    .profile-img {
        width: 96px;
        height: 96px;
        margin: 0 auto 10px;
        display: block;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }

    /*Fixed table div content with scroll*/
    .div-table-content {
        height: 445px;
        overflow-y: scroll !important;
    }

    /*Box shadow effect style*/
    .boxshadow {
        box-shadow: 5px 5px 5px #888888;
    }

    /*Item bold style*/
    .bold {
        font-weight: bold;
    }

    /*Make modal window to the forefront*/
    .modal-backdrop {
        z-index: -1;
    }

    /*This style will lighten the shades from top to bottom giving a grading effect*/
    .gradientEffect {
        background: -webkit-linear-gradient(white,lightgray); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(white,lightgray); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(white,lightgray); /* For Firefox 3.6 to 15 */
        background: linear-gradient(white,lightgray); /* Standard syntax (must be last) */      
    }

    .box {
        padding: 10px;
        /*border: #cdcdcd medium solid;*/
        border: #cdcdcd none;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
    }   

    /*Make item visible with space left*/
    .isVisible {
        display: inline;
    }

    /*Make item hidden with no space left*/
    .isHidden {
        display: none;
    }

    /*Make font italic*/
    .italic{
        font-style:italic;
    }

    .noBorder{
        border-style: none !important; 
        border-width: 0 !important;
    }

    .showLeftBorder{
        /*border-width:0 !important;*/
        border-left-width:1px !important;
        border-left-style:solid !important;
        border-left-color:lightgray;
    }

    .showBottomtBorder{
        border-width:0 !important;
        border-bottom-width:1px !important;
        border-style:solid !important;
        border-color:lightgray;
    }

    a {cursor:pointer !important;}

    /*Begin - This is for the SlideControl*/
    .dragContainer{
        background-color: lightgray;        
        height: 50px;
        border-radius:5px !important;
    }

    .dragStart{
         text-align:left !important;
         padding-left:6px !important; 

    }

    .dragTitle{
      padding-top:12px !important; font-size:1.2em !important; display:inline-block !important;text-align:center !important;vertical-align:text-bottom !important;
        /*width:320px !important*/
    }

    .dragEnd{
        text-align:right !important;
        padding:0 !important; 
        padding-right:2.5px !important; 
    }

    .hoverBeforeDrop{
        background-color:green;
    }
    /*End - This is for the SlideControl*/

    /*Begin - css to show the loader on entire page*/
    #loading-overlay {
        position: absolute;
        width: 100%;
        height:200%;
        left: 0;
        top: 0;
        display: none;
        align-items: center;
        background-color: gray;
        z-index: 999;
        opacity: 0.85;
    }
    .loading-icon{ 
        position:fixed;
        border-top:2px solid #fff;
        border-right:2px solid #fff;
        border-bottom:2px solid #fff;
        border-left:2px solid #767676;
        border-radius:25px;width:25px;
        height:25px;margin:0 auto;
        position:fixed;left:50%;
        margin-left:-20px;top:50%;margin-top:-20px;z-index:4;
        -webkit-animation:spin 1s linear infinite;
        -moz-animation:spin 1s linear infinite;
        animation:spin 1s linear infinite;
    }
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
    /*End - css to show the loader on entire page*/

    /*show app environ in header*/
    .spanAppEnviron {
        font-size: 0.6em !important
    }
}
/*------------------------------------------------------------*/

/*This style will be used for print---------------------------*/
@media screen {
  #printSection {
      display: none;
  }
}

@media print {

    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;
        margin-left: 5mm;  /* this affects the margin in the printer settings */
    }

    body * {
     visibility:hidden;
    }

    #printSection, #printSection * {
     visibility:visible;
    }

    #printSection {
     position:absolute;
     left:0;
     top:0;
    }

    div#divPayStatementTaxes{
        width: 300px;
        float: left;
    }

    div#divPayStatementDeductions{
        width: 360px;
        float: right;
    }

    .noprint{
        display:none;
    }
}
/*------------------------------------------------------------*/