.starred label:after {
        content: '*';
        color: red;
        font-size: 13px;
        font-weight: bold;
    }
.fa-lg {
    width: 25px;
}

.bg-content {
    background-color: lightgray;
}

.bg-header {
    background-color: lightgray;
    padding-bottom: 10px;
}

.md-bg {
    background-color: lightgray;
    padding-bottom: 10px;
}
.back {
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 0%, rgba(4,115,191,1) 0%, rgba(43,156,218,1) 0%, rgba(0,212,255,1) 100%, rgba(0,212,255,1) 100%, rgba(144,221,255,1) 100%);
    padding: 10px;
    color: white;
    border-radius: 5px;
    text-align: center;
    width: 30%;
    font-size: 90%;
}
@media print {
    body * {
        visibility: hidden;
    }

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

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

@media print {
    .col-sm-3.back {
        width: 80% !important;
        margin-left: 40px;
    }
}

@media print {
    .title {
        width: 100% !important;
        text-align: center;
    }
}

.card {
    height: 225px;
    flex: 0 0 auto;
    width: 215px;
    margin-bottom: 20px;
    margin-right: 20px;
    float: left;
    vertical-align: top;
    background: #fff;
    border-radius: 20px;
}


#card-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: auto;
    max-height: 50vh;
    margin-top: 20px;
}

.card-header {
    height: 20px;
    color: whitesmoke;
    margin-top: 10px;
}

.ag-header-cell-text {
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    vertical-align: inherit;
    font-weight: bold;
}

.sticyfooter {
    position: fixed;
}

.ag-header {
    background-color: #507cd1;
}

#official-cards {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 50vh;
    margin-top: 20px;
}

.bg-primary-gradient {
    background: linear-gradient(to bottom, #0066ff 34%, #ffffff 89%);
}

.bg-secondary-gradient {
    background: linear-gradient(to bottom, #4a5b6f 34%, #ffffff 89%);
}

.bg-success-gradient {
    background: linear-gradient(to bottom, #00cf07 34%, #ffffff 89%);
}

.bg-danger-gradient {
    background: linear-gradient(to bottom, #dc3545 34%, #ffffff 89%);
}

.bg-warning-gradient {
    background: linear-gradient(to bottom, #fdac41 34%, #ffffff 89%);
}

.bg-info-gradient {
    background: linear-gradient(to bottom, #17a2b8 34%, #ffffff 89%);
}

.bg-dark-gradient {
    background: linear-gradient(to bottom, #535353 34%, #ffffff 89%);
}

.bg-ruby-gradient {
    background: linear-gradient(to bottom, #aa1743 34%, #ffffff 89%);
}

.bg-Fuchsia-gradient {
    background: linear-gradient(to bottom, #d20970 34%, #ffffff 89%);
}

.bg-indigo-gradient {
    background: linear-gradient(to bottom, #49007e 34%, #ffffff 89%);
}

.bg-Coral-gradient {
    background: linear-gradient(to bottom, #f77b4d 34%, #ffffff 89%);
}

.bg-yellow-gradient {
    background: linear-gradient(to bottom, #ffd701 34%, #ffffff 89%);
}

.bg-Teal-gradient {
    background: linear-gradient(to bottom, #008080 34%, #ffffff 89%);
}

.bg-olive-gradient {
    background: linear-gradient(to bottom, #7f8000 34%, #ffffff 89%);
}

.bg-voilet-gradient {
    background: linear-gradient(to bottom, #aa00aa 34%, #ffffff 89%);
}

.bg-NavyBlue-gradient {
    background: linear-gradient(to bottom, #004aac 34%, #ffffff 89%);
}

.bg-orange-gradient {
    background: linear-gradient(to bottom, #ffaa0d 34%, #ffffff 89%);
}

:root {
    --primary-start-color: #0066ff;
    --primary-end-color: #ffffff;
    --secondary-start-color: #4a5b6f;
    --secondary-end-color: #ffffff;
    --success-start-color: #00cf07;
    --success-end-color: #ffffff;
    --danger-start-color: #dc3545;
    --danger-end-color: #ffffff;
    --warning-start-color: #fdac41;
    --warning-end-color: #ffffff;
    --info-start-color: #17a2b8;
    --info-end-color: #ffffff;
    --dark-start-color: #535353;
    --dark-end-color: #ffffff;
    --purple-start-color: #c900c8;
    --purpetle-end-color: #ffffff;
    --ruby-start-color: #aa1743;
    --ruby-end-color: #ffffff;
    --Fuchsia-start-color: #d20970;
    --Fuchsia-end-color: #ffffff;
    --indigo-start-color: #49007e;
    --indigo-end-color: #ffffff;
    --Coral-start-color: #f77b4d;
    --Coral-end-color: #ffffff;
    --yellow-start-color: #ffd701;
    --yellow-end-color: #ffffff;
    --Teal-start-color: #008080;
    --Teal-end-color: #ffffff;
    --olive-start-color: #7f8000;
    --olive-end-color: #ffffff;
    --voilet-start-color: #aa00aa;
    --voilet-end-color: #ffffff;
    --NavyBlue-start-color: #004aac;
    --NavyBlue-end-color: #ffffff;
    --orange-start-color: #ffaa0d;
    --orange-end-color: #ffffff;
}
.card-body {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: white;
}