body {
    background-color: #eeeeee;
}


.topo {
    background-color: #3f85f4;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    padding: 51px;
}

.placeholders{
    margin-right: 12px;
}

.username {
    margin-right: 122px;
    color: white;
}

.system_title {
    color: white;
}

.content-left {
    display: flex;
    align-items: center;
}

.user_info {
    display: flex;
    align-items: center;
}

.content-right {
    display: flex;
    flex-direction: column;
    color: white;
    justify-content: center;
    text-align: right;
}

.bg-custom {
    background-color: #4050b0;
    color: white;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 10px;
}

/* ------:Main Content Master */

.content-master {
    width: 100%;
    height: 160px;
    margin-top: 0;
    display: flex;
    align-items: center;
}

.cards-status {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.st {
    color: white;
    width: 20%;
    height: 80%;
    display: flex;
    padding: 15px;
}

.left-side {
    width: 30%;
    background-color: #008477;
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0px 0px 10px;
    border: none;
    outline: none;
}

.right-side {
    width: 70%;
    background-color: #029688;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    padding-right: 10px;
    border-radius: 0px 10px 10px 0px;
}

.left-side2 {
    width: 30%;
    background-color: #313fa4;
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0px 0px 10px;
    border: none;
    outline: none;
}

.right-side2 {
    width: 70%;
    background-color: #3f51b5;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    padding-right: 10px;
    border-radius: 0px 10px 10px 0px;
}

.left-side3 {
    width: 30%;
    background-color: #781fa3;
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0px 0px 10px;
    border: none;
    outline: none;
}

.right-side3 {
    width: 70%;
    background-color: #9d29b2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    padding-right: 10px;
    border-radius: 0px 10px 10px 0px;
}

.left-side4 {
    width: 30%;
    background-color: #8e0011;
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0px 0px 10px;
    border: none;
    outline: none;
}

.right-side4 {
    width: 70%;
    background-color: #c0273b;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    padding-right: 10px;
    border-radius: 0px 10px 10px 0px;
}

.left-side5 {
    width: 30%;
    background-color: #080808;
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0px 0px 10px;
    border: none;
    outline: none;
}

.right-side5 {
    width: 70%;
    background-color: #2c2c2c;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    padding-right: 10px;
    border-radius: 0px 10px 10px 0px;
}
.left-side6 {
    width: 30%;
    background-color: #f7d935;
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0px 0px 10px;
    border: none;
    outline: none;
    color: black;
}

.right-side6 {
    width: 70%;
    background-color: rgb(255, 230, 90);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    padding-right: 10px;
    border-radius: 0px 10px 10px 0px;
    color: black;
}

.username {
    cursor: pointer;
}

.username:hover {
    color: rgb(206, 206, 206);
}