/*--import variables here--*/
 

/*------------------------------------------------------------------*/

.cc-table {
    color: var(--primary-dark-color);
}

.cc-tr-highlight {
    background-color: rgba(var(--rgba-secondary-color),.1) !important;
}

.cc-cellborder-left {
    border-left: 1px solid var(--primary-dark-color);
}

.cc-cellborder-right {
    border-right: 1px solid var(--primary-dark-color);
}

.cc-table .cc-table-head tr th {
    color: var(--primary-color);
    font-weight: 500;
}

.cc-table .cc-table-head th {
    color: var(--primary-color);
    font-weight: 500;
}

.cc-table .cc-table-head .cc-no-border {
    border-bottom: 2px solid transparent;
}

.cc-table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    background-image: linear-gradient(var(--bs-table-accent-bg),var(--bs-table-accent-bg));
    border-bottom-width: 1px;
    font-weight: 400;
    padding: 1rem .5rem;
}

.cc-table.cc-table-sm > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    background-image: linear-gradient(var(--bs-table-accent-bg),var(--bs-table-accent-bg));
    border-bottom-width: 1px;
    font-size: 12px;
    font-weight: 400;
    padding: .6rem .5rem;
}



.cc-table thead tr {
    border-bottom: 3px solid var(--secondary-light-color);
    border-top: 2px solid transparent;
}

.cc-thead tr th {
    border-top: 0px;
    color: var(--primary-color);
    font-weight: 500;
}

.cc-thead th {
    border-top: 0px;
    color: var(--primary-color);
    font-weight: 500;
}

.cc-tr {
    background-color: #fff;
}
.cc-tr-hover:hover {
    background-color: rgba(var(--rgba-secondary-color),.1);
    cursor: pointer;
}

.cc-table-icons span {
    position: absolute;
    top: 5%;
}

.cc-table-icons span:first-child {
    right: 20px;
}

.cc-table-icons span:last-child {
    right: 70px;
}

.cc-table-icons a {
    position: absolute;
    top: 5%;
}

.cc-table-icons a:first-child {
    right: 20px;
}

.cc-table-icons a:last-child {
    right: 70px;
}

.cc-table-icons .material-icons {
    padding: 10px;
}

.cc-table-icons .material-icons {
    display: none;
}

.cc-table-icons .material-icons:hover {
    background-color: var(--hover-color);
    border-radius: 100%;
}
.cc-tr-hover:hover > .cc-table-icons .material-icons {
    display: block;
}

.cc-table-body tr {
    position: relative;
}

.cc-table-actions {
    display: none;
}

.cc-table-actions ul {
    background-color: rgba(255,255,255,.6);
    margin-bottom: 0;
    padding: 4px;
    padding-left: 0;
    position: absolute;
    right: 15px;
    top: 8px;
}

.cc-table-actions ul li {
    display: inline-block;
    list-style-type: none;
    margin-left: 16px;
}

.cc-table-actions ul li:first-child {
    margin-left: 0;
}

.cc-tr-hover:hover > .cc-table-actions {
    display: table-cell;
}

.cc-legacy-table-row-archived {
    background-color: #DDDDDD !important;
}




/*adding this class to table row items in the IFCO/Issues log
to indicate that the line item is archived. Discussed with
Ed, Diego and Jack on 19th of April 2022. I've named the
class with .cc-legacy at the start as its a quick fix that may
not be carried on into future designs*/

.cc-legacy-table-row-archived {
  background-color: #DDDDDD !important;
}





/*always have media queries at the bottom of the file like so*/


/* Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

}


/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}