/* 
    Created on : March 7, 2018
    Author     : Mike Volmar
*/
@import './portal-main.css';

    .content{
        FONT-FAMILY: Verdana, Arial, sans-serif; 
        color: #000;    

    }

    .error_msg{
        color: red;  
        font-size: 80%; 
        margin-left: 2em;
    }
    .exportcsv{
        font-size: 75%; 
        color: #1900ff;
    }
    .smalltext{ 
        font-size: 50%; 
        margin-left: 1em;
    }
    #e3d-logo {
        height: auto; 
        width: auto; 
        max-width: 125px; 
        max-height: 125px;
        padding-top:1em;
        padding-bottom:1em;
    }

    .e3d-menu{
        min-height:20px;
        min-width:600px;
        background-color: #135c97; 
        padding:.25em;
    }  

    /* navigation menu */

    .mainheader {
        text-align: center;
        /* background-color: #000 !important;
        padding: 0;
        margin: 0; */
    }

    .mainmenu a {
        font-size: 12px;
        font-weight: 600;
        padding: 16px;
    }

    .mainmenu a:hover,
    .mainmenu a:focus,
    .mainmenu a:active {
        background-color: #423b3b;
        color: #fff;
    }

    nav {
        font-size: 0; /* Remove annoying whitespace between Nav Elements (white-space-collapse got moved to CSS4) */
        width: auto;
        background-color: #000; 
        FONT-FAMILY: Verdana, Arial, sans-serif;
    }
    nav li {
        background-color: #000;
    }
    
    /*
    light blue a1cec5
    blue 135c97
    yellow f1c64c
    green 008b58
    purple 403074
    */

    a.link:link { 
        color: #1C65B4; 
    }
    a.link:hover { 
        color: #0000FF; 
    }
    a.link:visited { color: #800080; }
    a.link:active { color: #FF0000; }
    
    nav li:hover {
        background-color: #414047;
    }

    nav a {
        font-size: 10pt; 
        padding: 0.5em;
        display: block; /* So we can have padding */
        white-space: nowrap; /* No linebreaks in the menu */
        text-decoration: none;

    }
    nav a, nav a:visited{
        color: #fff;
    }
    
    nav a:hover,
    nav a:focus,
    nav a:active {
        color: #414047;
    }

    nav ul {
        list-style: none; /* Remove Bullets from Lists */
        padding: 0.1em; /* remove default browser padding for ul */
        z-index: 1000;
    }

    /* Any list item in the menu */
    nav li {
        position: relative; /* positioned so this is the reference. Required to be able to have the sub menu show up at the same level */
        display: inline-block;
    }

    /* All Sub menues */
    nav ul ul {
        display: none; /* Hide sub menu by default */
        position: absolute; /* Absolute position to push the sub menu out of the box instead of making the box larger and having the top level menu pushed down */
    }

    /* Show sub menu on hover */
    nav li:hover > ul {
    display: block;
    }

    /* Any sub menu below the second level (Flyout menues in the dropdown) */
    nav ul ul ul {
        left: 100%; /* Pushes the menu to the right of it's parent */
        top: 0; /* Make it appear at the same level as it's parent */
    }
    /* Make the top menu (first level) at least 100px wide  */
    nav > ul > li {
        min-width: 100px;
    }
    /* Make the dropdown menu (first level) at least as wide as it's parent */
    nav > ul > li > ul > li {
        min-width: 100%;
    }
    /* Make the flyout menu (second level) at least as wide as it's parent */
    nav > ul > li > ul > li > ul > li {
        min-width: 100%;
    }


    /* end navigation menu */

    .navlinks{
        font-size: 11px;  
        float: left;
        clear: left;
        margin: 1em;
    }
    .right{
        float: right;
    }
    a.deleteFile{ 
        color: red;
        font-weight: bold;
        font-size: 80%;         
        text-decoration: none;  
        border: 2px solid red; 
        padding:.25em;
    }    
    a.deleteFile:hover{
        color: #b30000;
        border: 2px solid #b30000;
    }
    a.deleteItem{ 
        color: red;
        font-weight: bold;
        font-size: 70%;         
        text-decoration: none;  
        border: 2px solid red; 
        padding:.125em;
    }    
    a.deleteItem:hover{
        color: #b30000;
        border: 2px solid #b30000;
    }    
    a.deleteEstimate{ 
        float: right;
        color: red;
        font-size: 80%;         
        text-decoration: none;  
        padding:.25em;
    }    
    a.deleteEstimate:hover{
        font-weight: bold;
    }    
    a.deleteContract { 
        float: left;
        color: red;
        font-size: 80%;         
        text-decoration: none;  
        padding:.25em;
    }    
    a.deleteContract:hover {
        font-weight: bold;
        color: red;
    } 
    a.deleteInvoice{ 
        color: red;
        font-weight: bold;
        font-size: 80%;         
        text-decoration: none;  
        border: 2px solid red; 
        padding:.25em;
    }    
    a.deleteInvoice:hover{
        color: #b30000;
        border: 2px solid #b30000;
    }    
    .message{
        color: #008A44;  
        font-size: 10pt; 
        margin-left:2em;
    }
    .addContactIssue{
        font-size: 20pt; 
        border: 1px solid #a1cec5;
    }


    #projectTotal{
        font-size: x-large;
    }

    .division_group{
        display: block;
        margin-bottom: 30px;
    }

    .division_group .form_label{
        font-weight: bold;
    }
    
.action_form_container {
    display: flex;
    flex-wrap: wrap;                 /* Allows stacking on smaller screens */
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;                  /* Center the form on the page */
    max-width: 1200px;              /* Prevent it from stretching too wide */
    padding: 0 1em;
}

.action_form_group {
    flex: 1 1 48%;                   /* Allows responsiveness & equal width */
    min-width: 300px;               /* Prevents it from becoming too narrow */
    border: 1px solid #a1cec5;
    padding: 10px;
    box-sizing: border-box;
}

    .division_row {
        display: flex;  /* Align items in a row */
        flex-wrap: wrap; /* Ensure checkboxes wrap properly */
        gap: 15px; /* Space between items */
        margin-bottom: 10px; /* Adds spacing between groups */
    }
    
    .division {
        display: flex;  /* Makes checkbox and label align */
        align-items: center;  /* Centers them vertically */
        gap: 5px;  /* Space between checkbox and label */
        min-width: 200px;  /* Ensures consistent width per column */
    }

    .small_form_group{
        width: 45%;
        /*height: 350px;*/
        padding:.5em;
        margin:.5em;
        float: left;  
        background-color: #EBEBE6;
        border: 1px solid #a1cec5;
    }
    .large_form_group{
        width: 90%;
        /*height: 350px;*/
        float: left;  
        margin:.5em; 
        padding:.5em;  
        background-color: #EBEBE6;
        border: 1px solid #a1cec5;
         
    }

    .userprofile{
        float:right;
    }
    .request_button{
        float:right;
        margin-top: .3em;
        margin-right: 1em;
    }
    a.userprofilelink{
        color: #000;
        font-size:10px;
        FONT-FAMILY: Verdana, Arial, sans-serif; 
        text-decoration: none;       
    }
    
    .userid{
        color: #000;
        font-size:10px;
        FONT-FAMILY: Verdana, Arial, sans-serif; 
        text-decoration: none; 
        margin-right: .5em;
    }
    a.userprofilelink:hover{
        text-decoration: underline;    
    }
    .e3dbanner{
        height:50px;
        min-width:600px;
        background-color: #2e2e2e;
        background-image: url('images/ellie-logo-white.png');
        background-repeat: no-repeat;  /* make the background image appear only once */
        vertical-align: middle;
        background-size: contain;
        background-position: center;
    }
    .banner_logo{
        height:50px;
        vertical-align: middle;
    }
    span.e3di{
        display: block;
        margin-left: 40%;
        color: #000;
        font-size:10px;
        FONT-FAMILY: Verdana, Arial, sans-serif; 
        float: right;
    }
    .footer{
        min-height:20px;
        min-width:600px;
        background-color: #135c97;  
        margin-top:4em;
        border-bottom: 4px solid #2C3E50;
    }
    .bar{
        min-height:50px;
        min-width:600px;
        background-color: #000;  
        margin-bottom:2em;
    }

    .title{
        FONT-FAMILY: Verdana, Arial, sans-serif;
    }
    .subtitle{
        margin-left:1em;
        FONT-FAMILY: Verdana, Arial, sans-serif;
    }

    .widgetbox{
        margin-left:1em;
    }
    .widget {
        width: 25%;
        height: 150px;
        border: 4px solid #115592;
        margin:10px;
        float: left;
        text-align: center;
        vertical-align: middle;
        line-height: 75px;
        min-width:250px;
        background: #F2F3F4;
    }
    .widget-title{
        padding-top:1em;
        font-size:20px;
        color:  #566573;
        text-align:center;  
    }
    .widget-info{
        font-size:40px;
        color: #000;      
        text-align:center;  
    }

    .user{
        margin: .2em;
        font-size:10px;
        FONT-FAMILY: Verdana, Arial, sans-serif;
    }
    .file{
        font-size:10px;
        FONT-FAMILY: Verdana, Arial, sans-serif;
    }
    .e3dlabel{
        font-size:12px;
        FONT-FAMILY: Verdana, Arial, sans-serif;    
    }

    .search{
        margin-left: 2em;
    }

    .controlpanel {    
        padding-left: 1em;
        background: #ffffff;  
        width: 98%;
        background-image: url(images/login-background.jpg);
    }

    .clear{
        clear: both;
    }

    .form_controls{
        
        display: inline-block;
        float: left;
        clear: left;
        width: 50%;
        text-align: left;
        padding-left: 4em;
        margin-top: 2em;
       
    }
    .form_response{
        display: inline-block;
        float: left;
        clear: left;
        width: 50%;
        text-align: left;
        padding-left: 4em;
        margin: 1em;        
    }
    
    .loginform{
        margin: 0 auto; 
        width:85%;
        max-width: 420px;
        padding: 3rem 5rem;
    }
 
    .login_label{       
        display: inline-block;
        float: left;
        clear: left;
        width: 100%;    
        vertical-align:middle;
        margin: .25em;
        font-weight: 600;
        font-size: 11px;
        color: #fff;
    }
    .login_field{        
        display: inline-block;
        width: 100%;
        min-width: 20%;
        float: left;   
        margin: .25em;
        font-size: 1rem;
        padding: 10px;
        border: 1px solid #b5b5b5;
        border-radius: 6px;
        background-color: #F8F8F8;
    }  
    
    /*
    light blue a1cec5
    blue 135c97
    yellow f1c64c
    green 008b58
    purple 403074
    */

    .login {
        background: linear-gradient(to bottom, #FFD564, #C89623);
        border: none;
        color: #000;
        padding: 12px 20px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        width: 100%;
        min-width: 20%;
        height: 40px; 
        margin: .25em;
        float: left;
        clear: left;
      }
      
      .login:hover {
        background: linear-gradient(to bottom, #FFE48A, #D4A637);
      }
      
      .login:active {
        background: linear-gradient(to bottom, #C89623, #A06F1D);
      }
    
    /* .login:hover{
        background-color: #FFC100;
    }
    
    .login{

       background-repeat: no-repeat;  
       vertical-align: middle;
       cursor: pointer;
       color: #000;
       font-size: 13px;
       font-weight: 600;
       background-color: #FFD141;
       width: 100%;
       min-width: 20%;
       height: 40px; 
       margin: .25em;
       float: left;
       clear: left;
       border: none;
       border-radius: 6px;
       transition: all .3s ease-in;
    } */

/*
    .section_header {
        float: left;
        clear: left;
        width: 99%;
        text-align: left;
        margin-right:1em;
        padding:.25em;
        padding-left:1em;
        background: #868686;
        /*background: linear-gradient(#868686, #acacac, #C0C0C0, #acacac, #868686);*//*
        text-shadow: 2px 2px 5px #868686;
        color: #FFFFFF;  
        FONT-FAMILY: Verdana, Arial, sans-serif;
    }
    
    */
    
    .section_header {
        float: left;
        clear: left;
        width: 95%;
        text-align: left;
        margin-left:2em;
        padding:.25em;
        color: #2C3E50;  
        FONT-FAMILY: Verdana, Arial, sans-serif;
        font-size: 14px;
        font-weight: bold;
    }
    
    .page_section_header {
        float: left;
        clear: left;
        width: 98.5%;
        text-align: left;
        padding:.25em;
        padding-left:1em;
        background: linear-gradient(#868686, #acacac, #C0C0C0, #acacac, #868686);
        text-shadow: 1px 1px 3px #868686;
        color: #FFFFFF;  

    }       
    .section_header2 {
        float: left;
        clear: left;
        width: 90%;
        text-align: left;
        padding:.25em;
        padding-left:2em;
        background: #FAA519;
        color: #000;
        FONT-FAMILY: Verdana, Arial, sans-serif;
    }  
    .form_section {
        float: left;
        clear: left;
        width: 95%;
        text-align: left;
        margin:.5em;
        padding:.25em;
        padding-left:1em;
        background: #C0C0C0;
        /*background: linear-gradient(#868686, #acacac, #C0C0C0, #acacac, #868686);*/
        text-shadow: 2px 2px 5px #868686;
        color: #FFFFFF;  
        FONT-FAMILY: Verdana, Arial, sans-serif;
        font-size: 12px;
        font-weight: normal;
    }    
/* job header */  

   
   .company_header{
       color: #967d25;
       margin:1em;
       font-size: 120%;  
       text-shadow: 1px 2px 5px #acacac;
   }
   
    .job_header{
        color: #967d25;
        margin:1em;
        font-size: 120%; 
        text-shadow: 1px 1px 5px #acacac;
    }
    
    a.company_name{
        color: #000;
        margin-right: 1em;
        text-decoration: none;
    }
    
    .show_location{
        margin-right: 1em;
        
    }
    
    .jobid{
        color: #002366;
        text-decoration: none;
    }
    
    /* estimate builder */
    
    a.build_estimate{
        float: left;
        margin-top: .25em;
        margin-bottom: .5em;
        margin-left: .5em;
        text-decoration: none; 
        color: #967d25;      
    }
    a.build_estimate:hover{
        text-decoration: underline; 
        color: #0000EE;
    }   
    .build_estimate_item{
        float: left;

        text-decoration: none; 
        color: #fcc331;               
    }
    a.build_estimate_item:hover{
        text-decoration: underline; 
        color: #0000EE;
    }  
    .filefield{
        width: 10%;
    }
    .filenotefield{
        width: 15%;
    }
    .filenotes{
        width: 100%;
        height: 100%;
        overflow-y: scroll;   
        overflow-x: hidden;  
        resize: vertical;
    }
    .filefield_link{
        width: 20%;
    }
    .filefield_status{
        width: 8%;
    }
    .filefield_action{
        width:1%;
        white-space:nowrap;
    }    
    
    .showMyComponents,.hideMyComponents,.showMyItems,.hideMyItems{ 
        /* color: blue;    */
        text-decoration: none;  
        margin-left: .5em;
        cursor: pointer;
        font-size: 12pt;
    }    
    .showMyComponents:hover, .hideMyComponents:hover,.showMyItems:hover,.hideMyItems:hover{
        /* font-weight: bold; */
    }    
    .contractItems{
        
    }
    .urgentTask{
        color: red;   
        
    }

    
    .invoicefield{
        width: 70%;
        float: left; 
        clear: left;
        padding-left: 25%;      
        padding-bottom: 1em;      
    }
    .invoicesummary{
 
        width: 70%;
        float: left; 
        clear: left;
        padding-left: 1em;           
    }
    .invoice_form_group{
        width: 90%;
        /*height: 350px;*/
        float: left;  
        margin:.5em; 
        padding:.5em;        
    }
    .invoice_form_label{
        float: left; 
        clear: left;   
        font-weight: bold;
        font-size: 90%;
        padding-bottom: 1em;  
    }
    .invoice_form_field{
        display: inline-block;
        width: 70%;
        float: left;   
        padding-left: 1em;        
    }
    .invoice_section_desc{
        width: 70%;
        height: 50px;
        display: inline-block;
        float: left;   
        overflow-y: scroll;   
        overflow-x: hidden;  
        resize: vertical;
    }
    
    .removeItem, .removeGroup{ 
        float:left;
        font-size: 80%;
        color: red;   
        text-decoration: none;  
        /*padding:.25em;*/
        cursor: pointer;
    }    
    .removeItem:hover{
        font-weight: bold;
    }
    .removeGroup:hover{
        font-weight: bold;
    }
    .Est_sectionitems, .Est_sectionitem, .flooring_sectionitems, .SS_sectionitem, .Graphic_sectionitem, .Flooring_sectionitem{
        float: left;
        clear:left;
        border-bottom: 1px solid #ddd;
    }
    .Est_sectionitems, .SS_sectionitem{
        margin-left: 1em;
        width: 95%;
    }
    .Est_sectionitem, .Graphic_sectionitem, .Flooring_sectionitem{
        margin-left: 2em;
        width: 95%;
        border-bottom: 1px solid #ddd;
        margin-bottom: .25em;
    }
    .proposalComponent{
        float: left;
    }
    .componentItems{
        margin-left: 2em;
        width: 90%;
        
    }    
    .componentItems td {
        border: 1px solid #ddd;
    }

    .componentItems tr:nth-child(even){
        background-color: #f4f4f4;
    }
    .estimate_details_header{
        background: #acacac;
        color: #fff;
        text-align: center;
        text-shadow: 2px 2px 5px #868686;
    }
    
    .proposalid{
        color: #002366;
        margin-left: 1em;
    }
    
    .proposal_name{
        cursor: pointer;
        
    }
    
    .proposal_name:hover {
        text-decoration: underline; 
        color: #0000EE;
    }        
    
    .proposal_section{
        width:95%;
        padding: .5em;
        margin: .5em;
    /*    background: linear-gradient(#868686, #acacac, #C0C0C0, #acacac, #868686);*/
        background: #acacac;
        text-shadow: 2px 2px 5px #868686;
        color: #FFFFFF;          
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        float:left;
        clear: left;
    }
    .estimate_section{
        width:90%;
        padding: .5em;
        margin: 1em;
        border: 2px solid #acacac;      
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        float:left;
        clear: left;
    }   
    
    .estimate_section_desc, .estimate_section_notes{
        min-width: 100%;
        max-width: 100%;
    }
    .estimate_section_notes{
        margin-top:.25em;
    }
    .estimate_section_total{
        float: left;
        font-size: 12pt;
        width: 10%;
        margin-top: 1em;
        border: 1px solid #acacac;         
    }
    .estimate_item_header input, .estimate_section_total_label {
        font-weight: bold;
        background: #868686;
        color: #fff;
        text-align: center;
    }
    
    .estimate_section_buttons, .estimate_section_total, .estimate_controls, .estimate_section_total_label {
        margin-top:.025em;
        margin-bottom:.25em;
        padding:.25em;
        float: left;
        
    }
    #addSection, #StockType, #StockComponent, #addStock{
        float: left;
    }
    .estimate_text{
        font-size: 8pt;
        margin-left: .25em;
        margin-right: .125em;
    }
    .estimate_label{
        font-size: 8pt;
        margin-left: .5em;
        margin-top: .25em;
        padding: .125em;
        float: left;
        clear:left;
        background: #868686;
        color: #fff;
        text-align: center;        
    } 
    .estimate_section_title {
        float: left;
        clear:left;        
    }
    .estimate_form_group{
        padding-top:2em;
    }    
    .estimate_section_total{
        margin-top: .125em;
        text-align:left;
    }
    .estimate_section_total_label{
        margin-top: .25em;
        margin-right: .125em;
        margin-left: .5em;
        font-weight:normal;
        font-size: 10pt;
    }
    
    .FileSubTable {
        font-size: 10;
 
    } 

    /* Job Status History */
    .JobStatusHistory{
        float: left;
        font-size: 12;
        width: 90%;
        padding: .5em;
        margin-left:.5em;
        margin-bottom: 1em;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);        
    }
    .statusevent{
        display: inline-block;
        width: 15%;
        float: left;
        margin-left:.5em;
    }
    .statustype{
        display: inline-block;
        width: 15%;
        float: left;
        margin-left:.5em;        
    }
    .statussubtype{
        display: inline-block;
        width: 15%;
        float: left;
        margin-left:.5em;        
    }
    .statusdetails{
        display: inline-block;
        width: 45%;
        float: left;
        margin-left:.5em;        
    }
    
    .SS_sectionitem{
        border-bottom: 1px solid #868686;
    }
    
    button.addItem, button.estimate_section_button, button.saveEstimate, button.removeSection, #StockType, #StockComponent, #addStock, .SaveFlooring,.rejectContract, .approveContract, .rejectReview, .CreateInvoice, .PrepareInvoice {
        margin-left:.15em;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
        cursor: pointer;  
    }
    .actionbtn{
        padding:.25em;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.19);
        cursor: pointer;  
    }
    .smActionbtn{
        margin-left:.125em;
        font-size: 80%;
        vertical-align: middle;
        cursor: pointer;
        border: 1px solid #868686;
    }   

    .contractMgr{
        font-size: 80%;
        padding-top: .5em;
        padding-bottom: .5em;
        margin-bottom: 1em;
        min-height: 3em;
        border: 1px solid #acacac;  
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    }
    .contractlink{
        min-width: 15%;
        float: left;
        clear: left;
        margin-left: 1em;

    }
    .contractAction{
        font-size: 10pt;
        min-width: 8%;
        float: left;
        margin-left: 1em;

    }
    .contractInfoTable{
        min-width: 7%;
        float: left;
        margin-left: 1em;

    }  
    .contractMgrTable{
        font-size: 85%;
        padding: .5em;       
        margin: 1em;
        width: 95%;
        border: 1px solid #acacac;  
    }
    .contractMgrTable td{
        width: 33%;
    }
    
    
    .ConfigureProposal{
        float: left;
        clear: left;
        margin-left: 1em;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    }
    
    .componentsSummary, .serviceSummary, .graphicsSummary, .flooringSummary{
        float: right;
        width: 35%;
        margin-top: .125em;
        margin-right: 5em;
        border: 1px solid #acacac;  
        font-size: 80%;
    }
    .contractSummary{
        width: 100%;
        margin-top: .125em;
        margin-right: 5em; 
        font-size: 90%;
    }    

    .contractSummary .summary_label, .componentsSummary .summary_label, .serviceSummary .summary_label, .graphicsSummary .summary_label, .flooringSummary .summary_label{
        font-weight: bold;
        padding-right: .25em;
    }
    
    .componentSummary{
        float: right;
        width: 35%;
        margin-top: .125em;
        margin-right: 3em;
        border: 1px solid #acacac;  
        font-size: 80%;
        background: #EAEDED;
    }    
    
    
    .addSectionItem, .sectionitems{
        float: left;
        clear: left;
    }
    
    /* AE Commissions */
    
    #commission_filters{
        border: 1px solid #C0C0C0;
        padding: 1em;
    }
    #commission_display, #bank_display, #forecast_display{
        margin-left: 1em;
        min-height: 200px;
    }
    .ae_commission_details, .bank_commission_details{
        border: 1px solid #C0C0C0;
        padding: .5em;
        margin: 1em;
    }
    .ae_commission_details th.tableheader, .bank_commission_details th.tableheader{
        background: #acacac; /* linear-gradient(#C0C0C0, #999999, #acacac); */
        color: #fff;  
        font-size: 9pt;      
        font-weight: normal;
        padding: .5;
    }
    .ae_commission_details tbody td, .bank_commission_details tbody td {
	font-size: 9pt;      
        font-weight: normal;
        padding: .5;
        border-bottom: 1px solid #C0C0C0;
    }
    .ae_commission_details tbody tr.odd td, .bank_commission_details tbody tr.odd td{
	background-color:#F0F0F6;        
    }
    .ae_commission_summary{
        border: 1px solid #C0C0C0;
        background-color:#F0F0F6;    
        margin: 0em;
    }
    .ae_commission_summary_header{
        background-color:#C0C0C0;  
        border-right: 1px solid #d2d2d2;
        margin: 0em;
    }
    .ae_commission_summary_title{
        width: 10em;
        padding-left: .25em;
        font-size: 9pt;   
        border-right: 1px solid #C0C0C0;
    }
    .ae_commission_summary_label{
        width: 10em;
        font-weight: bold;
        padding-left: .25em;
        font-size: 9pt;   
        border-right: 1px solid #C0C0C0;
        text-align: center;
    }
    .ae_commission_summary_result{
        width: 10em;
        padding-left: .25em;
        font-size: 9pt;   
        border-right: 1px solid #C0C0C0;
    }    
    .ae_commission_summary_amount{
        width: 10em;
        padding-left: .25em;
        font-size: 9pt;   
        border-right: 1px solid #C0C0C0;
    }
    .ae_commission_summary_controls{
        width: 2em;
        font-size: 9pt;  
        cursor: pointer;    
    }
/* end job header */  

    .po_form_group{
        width: 40%;
        min-height: 150px;
        padding:.5em;
        margin:.5em;
        float: left;  
        border: 1px solid #C0C0C0;
    }
    
    .po_form_group_total{
        width: 60%;
        min-height: 20px;
        padding:.5em;
        margin-left:2em;
        float: left;  
        border: 1px solid #C0C0C0;  
        font-weight: bold;
        
    }
    .po_form_group_total input{
        width: 20em;
        font-weight: bold;
        
    }
    
    .po_button_group{
        float: left;
        clear: left;   
        margin-left: 2em;
    }
    /*#addPOItem, #savePO{*/    
    .po_button_group button{
        padding-left: .5em;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    }
    .POMessages{
        float: left;
        clear: both;
        margin: 1em;
    }
    .po_form_label{       
        display: inline-block;
        float: left;
        clear: left;
        width: 40%;
        text-align: left;
        padding-left: 1em;
        vertical-align: middle;
        margin-bottom: .5em;
        font-size: 12px;
    }
    
    .po_form_field{        
        display: inline-block;
        width: 50%;
        float: left;   
        padding-left: 1em;
        
    }
    .form_message{
        float: left;
        clear: left;
        font-size: 70%;
        padding: 1em;
    }
    
    .small_form_label{       
        display: inline-block;
        float: left;
        clear: left;
        width: 20%;
        text-align: left;
        padding-left: 2em;
        vertical-align: middle;
        margin-bottom: .5em;
        font-size: 12px;
    }
    
    .small_form_field{        
        display: inline-block;
        width: 70%;
        float: left;   
        padding-left: 1em;
        
    }

    .small_form_button{       
        display: inline-block;
        float: left;
        clear: left;
        width: 10%;
        text-align: center;
        margin-top: 1em;
        margin-left: 2em;
        vertical-align: middle;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    } 

    .touchform{
        width: 95%;
        min-width: 800px;
        margin-left: 4em;
    }
    .form_label{       
        display: inline-block;
        float: left;
        clear: left;
        min-width: 15%;
        max-width: 20%;
        text-align: left;
        vertical-align: middle;
        margin-bottom: .5em;
        font-size: 12px;
        margin-left: 2em;
    }
    
    .form_info{       
        display: inline-block;
        float: left;
        clear: left;
        min-width: 80%;
        max-width: 80%;
        text-align: left;
        vertical-align: middle;
        margin-bottom: .5em;
        font-size: 10px;
    }
    
    .form_field{        
        display: inline-block;
        min-width: 50%;
        max-width: 50%;
        float: left;   
        padding-left: 1em;
        
    }
    
    .form_buttons{       
        display: inline-block;
        float: left;
        clear: left;
        min-width: 90%;
        max-width: 90%;
    }
    .noticeAction{       
        float: left;
        text-align: center;
        margin: .25em;
        vertical-align: middle;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    }      
    .action_button{       
        float: left;
        clear: left;
        text-align: center;
        margin: .25em;
        vertical-align: middle;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    } 
    #ContactFormButton{       
        float: left;
        clear: left;
        /* text-align: center;
        margin: .25em;
        vertical-align: middle;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); */
    }     
    .action_button_group{
        float: left;
        clear: left;
        margin-left: 2em;
        margin-top: 1em;
    }
    
    label.error{
        color: #ff0000;
        font-style: italic; 
        float: left;
        display: inline;
        width:250;
        font-size:12px; 
        margin-left:1em;
    }

    .green{
        color: #008A44;
    }
    .red{
        color: #ff0000;
    }
    .dob_block{        
        display: inline;
    }
    
    #debug{
        display: inline-block;
        float: left;
        clear: left;
        width: 65%;
        text-align: left;
        padding-left: 2em;    
    }
    .e3duser{
        margin: .2em;
        font-size:10px;
        FONT-FAMILY: Verdana, Arial, sans-serif;
    }
    a.userprofilelink{
        color: #000;
        font-size:10px;
        FONT-FAMILY: Verdana, Arial, sans-serif; 
        text-decoration: none; 
        float:right;
    }
    a.userprofilelink:hover{
        text-decoration: underline;    
    }

    .resultarea{
        margin-left: 1em;
    }
    
    /* table cells */
    
    .cell, .datecell, .namecell, .notecell,.callback_date_cell,.callback_notes_cell,.callback_action_cell,.action_cell{
        border-bottom: 1px solid #D7DBDD;
    }
    .refused_label, .refused_date, .refused_count{
        color: red;  
        font-weight:bold;
    }
    .newTasks_count{
        color: green;  
        font-weight:bold;        
    }
    .show_service_row td{
        
        
    }

    .notice_count{
        font-weight:bold;
    }
    .datecell{
        width: 5%;
    }
    .namecell{
        width: 5%;
    }
    .notecell{
        width: 40%;
    }
    .callback_date_cell{
        width: 15%;
    }
    .callback_notes_cell{
        width: 60%;
    }
    .callback_action_cell,.action_cell{
        width: 10%;
    }  
    
    #service_title{
        font-weight: bold;
        margin-left: 2em;
        
    }
    
/* end table cells */
    
/* sortable table */

    .tableheader {
        /*background: #003366;*/
        background: linear-gradient(#C0C0C0, #999999, #acacac);
        text-align: left;
        color: #FFFFFF;
        font-weight: bold;
    }

    .sortable{
        font-size: 8pt;
        background: #FFFFFF;
        margin:1em;
        width: 95%;
        border: 1px solid #999999;
    }

    .sortable TD{
        font-size: 9pt;
    }
    .sortable TR{
        font-size: 8pt;
        border-bottom: 1px solid #999999;
    }
    
/* sortable table */    
     
    .companyInfoResults{
        padding: 1em;
    }

    .searchform {
        /*
        width: 5em;
        margin: 0 auto;
        */

        margin: .25em;
    }

    #searchfield{
        max-width: 10%;
    }
    
    #searchvalue{   
        width: 10%;
        margin-left: .5em;
    }   
    
    
    .callback_group, .project_group, .taskBy_group, .taskTo_group, .myProjects_group {
        margin: 2em;
    }
    
    .callback_summary, .project_summary, .taskBy_summary, .taskTo_summary, .myProjects_summary{
        border-bottom: 2px solid #000;
        display: inline-block;
        float: left;
        clear: left;
        width: 100%;
        margin-bottom: 1em;
        font-size: 90%;

    }
    
    /* task table */
    
    .task {
        border: 2px solid #D7DBDD;
        width: 100%;
        margin-bottom: 1em;
        font-size: 12pt;
    }
    .task td {
        font-size: 80%;
    }    
    

    .task_label{       
        display: inline-block;
        float: left;
        clear: left;
        width: 10%;
        line-height:3em;
        text-align: left;
        padding-left: 1em;
        vertical-align: middle;
        margin-bottom: .5em;
        font-size: 75%;
    }    
    .task_field{    
        
        display: table-cell;        
        width: 12%;
        line-height:5em;
        float: left;   
        margin: .25em;
        font-size: 75%;        
        border-right:1px solid #D7DBDD;
        text-align:center;
        vertical-align:middle;    
        
    }        
    .task_notes, .CClist{
        display: table-cell;        
        width: 40%;
        float: left;
        line-height:10em;
        margin: .25em;
        overflow-y: scroll;   
        overflow-x: hidden;        
    }
    .task_note{    
        display: table-cell;         
        width:auto;
        float: left;   
        margin: .25em;     

    }  
    .task_note_author{       
        display: inline-block;
        float: left;
        clear: left;
        line-height:2em;
        text-align: left;
        padding-left: 1em;
        vertical-align: middle;
        margin-bottom: .5em;
        font-size: 75%;
    }    
    .task_note_content{    
        display: inline-block;
        float: left;
        clear: left;
        line-height:2em;
        text-align: left;
        padding-left: 1em;
        vertical-align: middle;
        margin-bottom: .5em;
        font-size: 75%;  
        
    }  
    
    .task_action_area{
        padding-left:1em;
        border-left:1px solid #D7DBDD;
    }
    
    .task_action{
        display: table-cell;        
        width: 5%;
        line-height:3em;
        float: left;   
        margin: .25em;
        margin-left:5em;
        font-size: 75%;        
        text-align:center;
        vertical-align:middle; 

        /*
             display: flex;
     justify-content: space-between;
        */

    }
    
    .task_field table{        
        font-size: 95%;
    }   
    
    .commgroup{
        float: left; 
        clear:left;
        margin: .25em;        
    }
    
    .commgrouptitle{
        float: left; 
        clear:left;
        font-size: 85%;
        color:#003366;
        width: 99%;
        border-top:1px solid #C0C0C0;
    }
    
    .commitem{
        float: left;   
        margin: .5em;  
        width: auto;
        height: 2em;
        font-size: 75%;
    }
    
    .dashboardArea{
        height: 25%; 
        width: 95%;
        
    }

    .scrollArea{
        margin:1em;        
        float: left;
        width: 95%;
        height: 30%;
        overflow-y: scroll;   
        overflow-x: hidden;
        
    }
 
  #accordion-resizer {
    padding: 10px;
    width: 350px;
    height: 220px;
  }
  
  
  .sup_shipform_results, .client_shipform_results{
      float: left;
      clear: left;
  }
     
    .callback_count, .project_count, .taskBy_count, .taskTo_count, .myProjects_count,.taskBy_count_flagged, .taskTo_count_flagged, .myProjects_count_flagged, .all_callback_count {
        margin-left: 1em;
        font-style: italic;
        cursor: pointer;    
    }
    .taskBy_count_flagged, .taskTo_count_flagged, .myProjects_count_flagged{
        color: red;
        font-weight: bold;
    }
    /* tablesorter */
    th.tableheader.header{
      background: #acacac; /* linear-gradient(#C0C0C0, #999999, #acacac); */
      color: #fff;        
    }
    .tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
    }    
    /*
    .tablesorter tbody tr:nth-child(odd) {
        background-color: #CDCDCD;
    }
    table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
    }
    */
    #JobScope{
        margin:.25em;        
        float: left;
        width: 100%;
        height: 5em;
        overflow-y: scroll;   
        overflow-x: hidden;
        font-size: 80%;
    }    
    #Scope{
        margin:.25em;        
        float: left;
        width: 100%;
        height: 70%;
        overflow-y: scroll;   
        overflow-x: hidden;
        font-size: 80%;
    } 
    .scope_instructions{
        margin:.25em;        
        float: left;
        width: 100%;
        height: 40%;
        overflow-y: scroll;   
        overflow-x: hidden;
        font-size: 75%;        
    }
    
    
    
    .scopeUpdateResults{
        float:left;
        clear: left;
    }
    .tablefooter {
        font-weight: bold;
    }
    
    #AddMgmtNoteButton{
        float:left;
        padding-bottom: 2em;
    }
    .team_notes{
        padding: 1em;
        margin: 1em;
        width: 40%;
        border:1px solid #C0C0C0;
        float: left;
        height: 50%;
        overflow-y: scroll;   
        overflow-x: hidden;
    }     
    .mgmt_notes{
        padding: 1em;
        margin: 1em;
        width: 40%;
        border:1px solid #C0C0C0;
        float: left;
        height: 50%;
        overflow-y: scroll;   
        overflow-x: hidden;
    }
    .mgmt_note{
        float:left;
        clear: left; 
        padding-left: 1em;
    }
    .mgmt_note_header{
        float:left;
        clear: left;  
        padding-top: 1em;
        padding-left: 2em;
        border-bottom:1px solid #C0C0C0;
        font-size: 55%;
    }
    .mgmt_note_body{
        float:left;
        clear: left;  
        padding-left: 2em;
        font-size: 75%;
    }
    .notes_title{
        float:left;
        clear: left;
        font-weight: bold;
        margin: .25em;
    }


    button.osx {
        text-decoration: none;
        font-family:".LucidaGrandeUI", "Lucida Grande", "Lucida sans unicode";
        color: black;
        font-size: 11px;
        padding: 1px 7px;
        border:1px solid #9C9C9C;
        margin: 2px 2px;
        display: inline-block;
        background-image: -webkit-linear-gradient(
        #ffffff 0%, #F6F6F6 	30%, 
        #F3F3F3 45%, #EDEDED 	60%, 
        #eeeeee 100%);
        border-radius: 3px;
        cursor: default;
        box-shadow: 0px 0px 1px rgba(0,0,0,0.20);
    }
    button.osx:active {
        border-color:#705ebb;
        background-image:-webkit-linear-gradient(
        #acc5e9 0%, 		#a3c0f2 18%, 
        #61a0ed 39%,		#55a3f2 70%, 
        #82c2f1 91.72%, 	#9AD2F2 100%); 
        box-shadow: 0px 0px 1px rgba(0,0,0,0.65);		
    }
    button.osx.disabled {
        color: #999!important;
        background-image: -webkit-linear-gradient(#fbf8f8 0%, #f0f0f0 30%, #e3e3e3 45%, #d7d7d7 60%, #cbc9c9 100%);
    }
    
    /* dashboard charts */


        .chart_group{
            float: left;
            clear: left;
            border-radius: 25px;
            background: #EBEBE6;
            border: 2px solid #32323C;
            padding: 20px; 
            margin-bottom: 1em;
            width:90%;
        }
        .chart_group_title{
            float: left;
            margin-bottom: .5em;
            font-size: 12pt;
            width:90%;
        }
        .chart_group_subtitle{
            float: left;
            margin-bottom: .5em;
            margin-left: 40%;
            font-size: 10pt;
        }
        .chartgroup{
            float: left;  
            margin-right: 2em;
            width: 30%;
            height: 250px;
        }
        .chart_control{
            height: 1.5em;
            margin-bottom: .5em;
            font-size: 10pt;
        }
        .chart_display{
            
        }
        .charts{
            float: left;
            clear: left;
        }
        .piechart{
            float: left;
            clear: left;
            margin: .5em;
            
        }
        .barchart{
            float: left;
            margin: .5em;
            
        }    
    
    /* legend for pie charts */
    
    .legend{
        font-size: 10px;
        float: left;
        clear: left;
        margin-bottom: 2em;
        border: 1px solid;
        padding: 1em;
    }
    .legend_element{
        margin: 1em;
        font-weight: bold;
        float:left;
        display: inline-block;
        width: 40px;
    }
    .legend_swatch{
      margin-left: .25em;
      margin-top: 1em;
      width: 30px;
      height: 20px;
      float:left;
      display: inline-block;
    }
    .clearleft{
        clear: left;
    }
    #e3d_color1 {
      background: #2C3E50; /* light green */
    }
    #e3d_color2 {
      background: #00c425; /* lead green */
    }
    #e3d_color3 {
      background: #008A44; /* mid green */
    }
    #e3d_color4 {
      background: #006446; /* dark green */
    }
    #e3d_color5 {
      background: #EBEBE6; /* light gray */
    }
    #e3d_color6 {
      background: #CACACC; /* lead gray */
    }
    #e3d_color7 {
      background: #a1cec5; /* mid gray */
    }  
    #e3d_color8 {
      background: #135c97; /* dark gray */
    }
    #e3d_color9 {
      background: #1C65B4; /* yellow */
    }
    #e3d_color10 {
      background: #FAA519; /* blue */
    } 
    
    /* end legend */
 
    @media screen and (min-width:320px) and (max-width:640px) {
      /* for screens that are at least 320 pixels wide but less than or equal to 640 pixels wide */



    }