body {
    background: #175679;
    color: #fff;
    min-height: 98vh;
    font-family: "Open Sans", sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
.btn.btn-plain {
    outline: none;
    border: none;
    background: none;
    padding: 0;
}
.task {
    background: #ff7a00;
    border-radius: 166px;
    height: fit-content;
	box-shadow: 0 0 50px 0 rgba(26, 50, 93, .2);
}
.task + .task {
    margin-top: 24px;
}
.task > .d-flex {
    height: 100%
}
.task p {
	font-size: 16px;
	line-height: 20px;
}
.task .h3 {
	font-size: 18px;
	line-height: 20px;
	font-weight: 700;
	margin-bottom: 5px;
}

.worker {
    margin-top: 30px;
}
.icon {
    border-radius: 100%;
    background: #fff;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 50px 0 rgba(26, 50, 93, .2);
}
.icon img {
    width: 50px;
}
img {
    max-width: 100%;
}
.text {
    padding: 20px;
}
.tasklist {
    margin-top: 24px;
}
.container {
    margin: 1.5rem auto;
    max-width: 1260px;
}
.badge a {
    color: #fff !important;
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
#planView {
    width: 100%;
    min-height: 80vh;
    scrollbar-gutter: stable;
}
#workernav {
    max-width: 100%;
    gap: 6px;
}
#workernav button.badge {
    border: 0;
    cursor: pointer;
}
#workernav.public span {
    cursor: default;
}
th, td {
    color: #000 !important;
}
.text-start {text-align: start !important;}
.text-end {text-align: end !important;}
.text-center {text-align: center !important;}
.text-justify {text-align: justify !important;}
.text-nowrap {white-space: nowrap !important;}
iframe {
    border: 0;
}
.btn > i.fa-solid {
    margin-right: 6px;
}
#loginPanel {
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#loginPanel .card {
    padding: 9px 24px 18px 24px;
    color: #000;
}
#loginPanel .card form {
    margin-top: 9px;
}
#cat {
    padding: 64px;
}
#cat img {
    max-width: 300px;
}
#adminLogin {
    max-width: 350px;
}
#adminPanel {
    border-color: #fff;
    padding: 7px 14px;
    background: transparent;
    color: #fff;
}
.icon-wrapper {
    flex: 0 0 11%;
}
.table-rounded {
    --paddding-y: 6px;
    --padding-x: 9px;
    position: relative;
}
.table-rounded::before {
    position: absolute;
    top: calc(-1 * var(--paddding-y));
    left: calc(-1 * var(--padding-x));
    content: '';
    width: calc(100% + calc(2 * var(--padding-x)));
    height: calc(100% + calc(2 * var(--paddding-y)));
    background: #fff;
    z-index: -1;
    border-radius: 12px;
}
@media (max-width: 1399px) {
    .icon-wrapper {
        flex: 0 0 12%;
    }
}
@media (max-width: 1199px) {
    .icon-wrapper {
        flex: 0 0 17%;
    }
}
@media(max-width: 991px) {
    .icon-wrapper {
        flex: 0 0 32%;
    }
}
@media (max-width: 767px) {
    .icon-wrapper {
        display: none;
    }
    .task {
        border-radius: 70px;
    }
    .task .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 26px;
    }
    #adminPanel .controls {
        flex-wrap: wrap;
        justify-content: space-between;
    }
}