/**
 * Transfusion and transplantation adverse events — product styles.
 * Add figure/chart styling as needed.
 */

/* Product-specific overrides and figure layout can go here */

/*table stuff*/
.table-responsive {
    padding-right: 2px;
}

table.dataTable thead .sorting_asc {
    background-image: url(/src/img/sorting-icons/sort_asc.png)!important;
	padding-right: 15px;
}
table.dataTable thead .sorting_desc {
    background-image: url(/src/img/sorting-icons/sort_desc.png)!important;
	padding-right: 15px;
}
table.dataTable thead .sorting {
    background-image: url(/src/img/sorting-icons/sorting_both.png)!important;
	padding-right: 15px;
}
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center right;
}
.dataTables_wrapper .dataTables_info:after {
    content: none !important;
}
.bar-chart details {
    margin-top: 2rem;
}

/* From html style tag... */
.boxes {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    padding-left: 3px;
    padding-right: 3px;
    height: 10%;
    /* align-items: center;*/
    justify-content: center;
}

/* a instead of .anchor*/
/*style="vertical-align: top; min-height: 150px; min-width: 300px;"*/
.boxes .anchor,
.boxes .anchor:visited,
.boxes .anchor:focus {
    flex: 1 0 30%;
    display: flex;
    flex-wrap: wrap;
    border: 3px solid #ccc;
    border-radius: 10px;
    margin: 11px;
    text-decoration: none;
    color: black;
    justify-content: center;
}

.customAnchor {
    border: 3px solid #ccc;
    border-radius: 10px;
    margin: 10px;
}

.boxes a:hover {
    border: 3px solid #000;
    border-radius: 10px;
    box-shadow: 2px 2px;
}

.boxes .halfScreen,
.boxes .halfScreen:visited,
.boxes .halfScreen:focus {
    flex: 0 0 24%;
    display: flex;
    flex-wrap: wrap;
    border: 3px solid #ccc;
    border-radius: 10px;
    margin: 10px;
    text-decoration: none;
    color: black;
    justify-content: center;
}

.boxes .halfScreen:hover {
    border: 3px solid #000;
    border-radius: 10px;
    box-shadow: 2px 2px;
}

.innerBox {
    flex: 0 0 24%;
    /*border: 1px solid #ccc;*/
    /*border-radius: 10px;*/
    margin-left: 0px;
    margin-right: 3px;
    text-decoration: none;
    color: black;
    margin-bottom: 5px;
    justify-content: center;
}

.boxHeader {
    flex: 0 0 98%;
    margin: 5px;
    margin-top: 10px;
    color: black;
    text-wrap: balance;
}

.boxHeader-noBold {
    text-decoration: none;
    font-weight: normal;
    color: grey;
}

.boxes p {
    font-size: 18px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.boxes p.h2 {
    font-size: 50px;
    margin-top: 5px;
}
/*boxes end*/

.bar-label {
    font-size: 13px;
}
.n-axis-title {
    font-size: 16px;
}

.html-legend {
    margin-top: 6rem;
    line-height: 1.1em;
}

.html-legend li {
    padding: 0.25em 0;
}
@media (max-width: 1200px) {
    .html-legend {
        margin-top: 4rem;
    }
}
@media (max-width: 991px) {
    .html-legend {
        margin-top: 0em;
    }
}