body.fi-body.fi-panel-admin {
    background: url(/img/bg.jpg) center center / cover no-repeat;
    background-attachment: fixed;
}
body.fi-body > .fi-layout {
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 0.75) 100%);
}
.dark > body.fi-body > .fi-layout {
    background: linear-gradient(to right, rgba(9, 9, 11, 1) 0%,rgba(9, 9, 11, 0.75) 100%);
}
.text-4xl {
    font-size: 4rem;
    line-height: 1.1;
}

.login-btn img {
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 0 2px white;
}
a#credit {
    bottom: 1rem;
    color: wheat;
    font-size: .5rem;
    left: 1rem;
    position: absolute;
}

section.fi-section.photo-wrapper {
    background: no-repeat;
    box-shadow: none;
}
section.fi-section.photo-wrapper .fi-section-content {
    padding: 0;
}
.labelOnly {
    margin-top: 1rem;
}
.labelOnly:after {
    border-top: 1px solid rgba(var(--gray-500));
    content: "";
    display: block;
    opacity: .5;
    width: 100%;
}
.labelOnly > div {
    white-space: nowrap;
}

[type="radio"] + div > span {
    --tw-text-opacity: 1;
    color: rgba(var(--gray-400), var(--tw-text-opacity, 1));
}
[type="radio"]:checked + div > span {
    color: rgba(var(--primary-600), var(--tw-text-opacity, 1));
}

input[type="file"] {
    max-width: 160px;
    opacity: 0;
}

div:has(> .bg-ossc) {
    background: url("/img/ossc.svg") center center / cover no-repeat;
    position: relative;
}
div:has(> .bg-ossc):after {
    background-image: radial-gradient(rgba(255, 255, 255, 1) 0%, rgba(0, 96, 155, 0) 100%);
    border-radius: 50%;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
img.bg-ossc {
    position: relative;
    z-index: 2;
}
.imgSection {
    min-width: 160px;
}

/* Calendar */
.att-calendar > div > section {
    background-color: transparent !important;
    border: none;
    box-shadow: none;
}
.att-calendar > div > section .fi-section-content.p-6 {
    padding: 0;
}
.att-calendar .fc-button.fc-button-primary {
    background-color: rgba(var(--primary-600));
    border-color: rgba(var(--primary-600));
    font-size: .75rem;
}
.att-calendar th.fc-col-header-cell.fc-day {
    color: rgba(var(--primary-600));
    font-size: .75rem;
    font-weight: 500;
}
.att-calendar table, .att-calendar .fc .fc-daygrid-body {
    width: 100% !important;
}
.att-calendar > div > section.bg-white tbody {
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.att-calendar > div > section.dark\:bg-gray-900:is(.dark *) tbody {
    background-color: rgba(var(--gray-900), var(--tw-bg-opacity, 1));
} 
.att-calendar th.fc-col-header-cell.fc-day.fc-day-sun {
    color: rgba(var(--danger-600));
}
.att-calendar .fc .fc-col-header-cell-cushion {
    padding: 4px;
}
.att-calendar td.fc-day.fc-daygrid-day {
    font-size: .875rem;
}
.att-calendar .fc-daygrid-day.fc-day-today {
    background-color: rgba(var(--primary-200));
}
.att-calendar .fc-daygrid-day.fc-day-today:disabled {
    opacity: .25;
}
.att-calendar .fc-day.fc-day-sun {
    border-color: rgba(var(--danger-300));
}
.att-calendar .fc-day.fc-day-sun .fc-daygrid-day-frame {
    background-color: rgba(var(--danger-100));
}
.att-calendar .fc-day.fc-day-sun .fc-daygrid-day-number {
    color: rgba(var(--danger-600));
}
.att-calendar .fc-h-event.primary {
    background-color: rgba(var(--primary-500));
    border-color: rgba(var(--primary-500));
}
.att-calendar .fc-h-event.success {
    background-color: rgba(var(--success-500));
    border-color: rgba(var(--success-500));
}
.att-calendar .fc-h-event.danger {
    background-color: rgba(var(--danger-500));
    border-color: rgba(var(--danger-500));
}
.att-calendar .fc-h-event.warning {
    background-color: rgba(var(--warning-500));
    border-color: rgba(var(--warning-500));
}
.att-calendar .fc-h-event.info {
    background-color: rgba(var(--info-500));
    border-color: rgba(var(--info-500));
}
.att-calendar .fc-h-event.gray {
    background-color: rgba(var(--gray-500));
    border-color: rgba(var(--gray-500));
}
.fi-fo-repeater-item:has(.attn-danger, .ki-danger, .pi-danger, .kt-danger) {
    background-color: rgba(var(--danger-50));
    border-left: .25rem solid rgba(var(--danger-500));
}
.fi-fo-repeater-item .fi-fo-repeater-item-content:has(.attn-danger, .ki-danger, .pi-danger, .kt-danger) {
    padding-left: .75rem;
}

/* ID Card */
#idcard {
    font-size: .49rem;
}
@media screen and (min-width:600px) {
    #idcard {
        font-size: .925rem;
    }
}
#idcard {
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 2px 0 black;
    font-family: "Inter", sans-serif;
    height: 23.25em;
    overflow: hidden;
    position: relative;
    width: 35.75em;
}
#bg-ossc {
    background: url("/img/ossc.svg") center center / cover no-repeat;
    height: 25.25em;
    left: -1em;
    position: absolute;
    top: -1em;
    width: 37.75em;
    z-index: 2;
}
#bg-ossc:after {
    background-color: rgba(255, 255, 255, .85);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
#logo-ossc {
    background-color: #00609b;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
    height: 5em;
    left: 2.625em;
    position: absolute;
    top: 1.5em;
    width: 4.5em;
    z-index: 2;
}
#logo-ossc img {
    height: 4em;
    margin: .25em;
    width: 4em;
}
#address {
    background-color: #00609b;
    border-radius: 0 0 0 2.5em;
    color: #fff;
    height: 4.75em;
    padding: .8em .8em .7em .8em;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 26.65em;
    z-index: 100;
}
#address h1 {
    font-size: 1.025em;
    font-weight: 600;
    margin: .05em 0;
    padding: 0;
}
#address p {
    font-size: .57em;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
    padding: 0;
}
#student-photo {
    bottom: 1.5em;
    height: calc(4em * 4);
    left: -1em;
    position: absolute;
    width: calc(4em * 3);
    z-index: 99;
}
#qr-code {
    bottom: 2.25em;
    height: 4.5em;
    left: 11em;
    position: absolute;
    width: 4.5em;
    z-index: 99;
}
#data-wrapper {
    color: #00609b;
    left: 11em;
    position: absolute;
    top: 5.5em;
    width: 24.75em;
    z-index: 99;
}
#data-name {
    align-items: center;
    display: flex;
    height: 4.1em;
}
#data-name h1 {
    font-size: 1.75em;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    padding: 0;
    width: 23.25em;
}
#data-wrapper p {
    margin: 0;
    padding: 0;
}
#data-wrapper .p {
    display: flex;
    font-size: .76em;
    font-weight: 500;
    justify-content: start;
    line-height: 1.55;
    margin: 0;
    padding: 0;
}
#data-wrapper .p .pe {
    position: relative;
    width: 4.6em;
}
#data-wrapper .p .pe:after {
    content: ":";
    position: absolute;
    right: .1em;
    top: 0;
}
#data-wrapper .p .dt {
    margin-left: .35em;
    width: 26.5em;
}
#signature {
    bottom: 0;
    color: #00609b;
    height: 7em;
    position: absolute;
    right: 2.5em;
    text-align: center;
    width: 13.5em;
    z-index: 101;
}
#signature h1, #signature p {
    line-height: 1.3;
    margin: .2em 0;
    padding: 0;
}
#signature h1 {
    font-size: .75em;
    font-weight: 600;
    margin-top: 3.5em;
}
#signature p {
    font-size: .65em;
    font-style: italic;
}
#ttd {
    left: 6em;
    position: absolute;
    top: 1em;
    width: 6em;
}
#stamp {
    position: absolute;
    right: 1.25em;
    top: 1em;
    transform: rotate(-30deg);
    width: 4.1em;
}
#card-border {
    background-color: #00609b;
    bottom: -1em;
    height: 1.8em;
    left: -1em;
    position: absolute;
    width: 37.75em;
    z-index: 100;
}
#card-border:after {
    background-color: #00609b;
    border-radius: 0 1em 0 0;
    content: "";
    display: block;
    height: 1.8em;
    margin-top: -1em;
    width: 13em;
}