/*=============================Sales monthly agencies accounts page================*/
#agencycontactsDataTable table tr:nth-of-type(even) {
    background: #183e1d47;
}
/* Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically. */

#agencycontactsDataTable {
  position:relative;
  padding: 0px;
  box-sizing: border-box;
}

#agencycontactsDataTable table { 
  width: 100%; 
  border-collapse: collapse; 
}

#agencycontactsDataTable table th { 
  background: #183a1d; 
  color: white; 
  font-weight: bold; 
  cursor: cell;
}
#agencycontactsDataTable table td, #agencycontactsDataTable table th { 
  padding: 6px 15px; 
  border: 0px solid #183a1d; 
  text-align: left; 
  box-sizing: border-box;
}
#agencycontactsDataTable table th { 
  padding: 15px 15px;
}
#agencycontactsDataTable table tr:nth-of-type(odd) { 
  background: #e1eedd; 
}
#agencycontactsDataTable table td a {
   /* color: #183a1d;*/
}
@media only screen  and (max-width: 760px), (min-device-width: 768px)  and (max-device-width: 1024px)  {

    #agencycontactsDataTable table {
        margin-top: 106px;
    }
    /* Force table to not be like tables anymore */
    #agencycontactsDataTable table, #agencycontactsDataTable thead, #agencycontactsDataTable tbody, 
    #agencycontactsDataTable th, #agencycontactsDataTable td, #agencycontactsDataTable tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
    #agencycontactsDataTable thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #agencycontactsDataTable tr {
      margin: 0 0 1rem 0;
      overflow: auto;
      border-bottom: 1px solid #ccc;
    }
       
    #agencycontactsDataTable tbody tr:before {
        counter-increment: my-sec-counter;
        content: "";
        background-color:#333;
        display: block;
        height: 0px;
    }

      
    #agencycontactsDataTable tr:nth-child(odd) {
      background: #ccc;
    }
    
    #agencycontactsDataTable td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        margin-right: 0%;
        display: block;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
        box-sizing:border-box;
    }

    #agencycontactsDataTable td:before {
    /* Top/left values mimic padding */
        font-weight: bold;
        width: 100%;
        float:left;
        box-sizing:border-box;
        padding-left: 0px;
    }

    /*Label the data You could also use a data-* attribute and content for this. That way "bloats" the HTML,
    this way means you need to keep HTML and CSS in sync.Lea Verou has a clever way to handle with text-shadow. */
    #agencycontactsDataTable td:nth-of-type(1):before { content: "Contact name"; }
    #agencycontactsDataTable td:nth-of-type(2):before { content: "Progress   "; }
    #agencycontactsDataTable td:nth-of-type(3):before { content: "Action"; }

}

/*===============================ve-agency contact-accounts page========================== */
#agencyaccountdataTable table tr:nth-of-type(even) {
    background: #183e1d47;
}
/* Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically. */

#agencyaccountdataTable {
  position:relative;
  padding: 0px;
  box-sizing: border-box;
}

#agencyaccountdataTable table { 
  width: 100%; 
  border-collapse: collapse; 
}

#agencyaccountdataTable table th { 
  background: #183a1d; 
  color: white; 
  font-weight: bold; 
  cursor: cell;
}
#agencyaccountdataTable table td, #agencyaccountdataTable table th { 
  padding: 6px 15px; 
  border: 0px solid #183a1d; 
  text-align: left; 
  box-sizing: border-box;
}
#agencyaccountdataTable table th { 
  padding: 15px 15px;
}
#agencyaccountdataTable table tr:nth-of-type(odd) { 
  background: #e1eedd; 
}
#agencyaccountdataTable table td a {
    /*color: #183a1d;*/
}
@media only screen  and (max-width: 760px), (min-device-width: 768px)  and (max-device-width: 1024px)  {

    #agencyaccountdataTable table {
        margin-top: 106px;
    }
    /* Force table to not be like tables anymore */
    #agencyaccountdataTable table, #agencyaccountdataTable thead, #agencyaccountdataTable tbody, 
    #agencyaccountdataTable th, #agencyaccountdataTable td, #agencyaccountdataTable tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
    #agencyaccountdataTable thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #agencyaccountdataTable tr {
      margin: 0 0 1rem 0;
      overflow: auto;
      border-bottom: 1px solid #ccc;
    }
       
    #agencyaccountdataTable tbody tr:before {
        counter-increment: my-sec-counter;
        content: "";
        background-color:#333;
        display: block;
        height: 0px;
    }

      
    #agencyaccountdataTable tr:nth-child(odd) {
      background: #ccc;
    }
    
    #agencyaccountdataTable td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        margin-right: 0%;
        display: block;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
        box-sizing:border-box;
    }

    #agencyaccountdataTable td:before {
    /* Top/left values mimic padding */
        font-weight: bold;
        width: 100%;
        float:left;
        box-sizing:border-box;
        padding-left: 0px;
    }

    /*Label the data You could also use a data-* attribute and content for this. That way "bloats" the HTML,
    this way means you need to keep HTML and CSS in sync.Lea Verou has a clever way to handle with text-shadow. */
    #agencyaccountdataTable td:nth-of-type(1):before { content: "Contact name"; }
    #agencyaccountdataTable td:nth-of-type(1):before { content: "Account name"; }
    #agencyaccountdataTable td:nth-of-type(1):before { content: "Contacts email"; }
    #agencyaccountdataTable td:nth-of-type(1):before { content: "Sales status"; }
    #agencyaccountdataTable td:nth-of-type(2):before { content: "Progress   "; }
    #agencyaccountdataTable td:nth-of-type(2):before { content: "Date   "; }
    #agencyaccountdataTable td:nth-of-type(3):before { content: "Action"; }

}

.table-details-list {
    display: flex;
    padding: 20px 15px;
}
.heading-name {
    font-size: 24px;
    font-weight: 600;
    padding-right: 8px;
    margin: 0;
}
.heading-name span a{
    font-weight: normal;
    color: #000;
    font-size: 18px;
    margin: 0;
}