/* Please use this css file for any custom component styles that you want. */

:root {
    --foreground: 222.2 84% 4.9%;
    --muted-foreground: 210 10% 45%;
    --radius: .5rem;
    --primary: 210 100% 35%;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --primary-foreground: 0 0% 100%;
    --card: 0 0% 100%;
}

::backdrop {
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
}

div.mx-custom-customnotedetail-sub-wrapper ul.ruInputs {
    margin-left: 0px;
}

div.mx-custom-customnotedetail-sub-wrapper span.ruFileWrap input[type='text'].ruFakeInput {
    width: 150px;
}

.mx-custom-newjoin-wrapper .max-w-md {
    max-width: 28rem
}

.mx-custom-newjoin-wrapper .text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.mx-custom-newjoin-wrapper .font-medium {
    font-weight: 500
}

.mx-custom-newjoin-wrapper .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s
}

.mx-custom-newjoin-wrapper .text-foreground {
    color: hsl(var(--foreground))
}

.mx-custom-newjoin-wrapper .bg-primary\/10 {
    background-color: hsl(var(--primary) / .1)
}

.mx-custom-newjoin-wrapper .shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}

.mx-custom-newjoin-wrapper .shadow-primary\/20 {
    --tw-shadow-color: hsl(var(--primary) / .2);
    --tw-shadow: var(--tw-shadow-colored)
}

.mx-custom-newjoin-wrapper .hover\:border-primary\/50:hover {
    border-color: hsl(var(--primary) / .5)
}

.mx-custom-newjoin-wrapper .group:hover .group-hover\:border-primary {
    border-color: hsl(var(--primary))
}

.mx-custom-newjoin-wrapper .hover\:bg-primary\/5:hover {
    background-color: hsl(var(--primary) / .05)
}

.mx-custom-newjoin-wrapper .group:hover .group-hover\:text-primary {
    color: hsl(var(--primary))
}

.mx-custom-newjoin-wrapper .bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1))
}

.mx-custom-newjoin-wrapper .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.mx-custom-newjoin-wrapper .border-l-2 {
    border-left: 2px solid hsl(var(--primary) / .3);
}

.mx-custom-newjoin-wrapper .border-muted-foreground {
    border-color: hsl(var(--muted-foreground))
}

.mx-custom-newjoin-wrapper .gap-2 {
    gap: .5rem
}

.mx-custom-newjoin-wrapper .gap-3 {
    gap: .75rem
}

.mx-custom-newjoin-wrapper .gap-4 {
    gap: 1rem
}

.mx-custom-newjoin-wrapper .grid {
    display: grid
}

.mx-custom-newjoin-wrapper .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mx-custom-newjoin-wrapper .duration-300 {
    transition-duration: .3s
}

.mx-custom-newjoin-wrapper .text-muted-foreground {
    color: hsl(var(--muted-foreground))
}

.mx-custom-newjoin-wrapper .rounded-full {
    border-radius: 9999px
}

.mx-custom-newjoin-wrapper  .rounded-lg {
    border-radius: var(--radius)
}

.mx-custom-newjoin-wrapper .w-2 {
    width: .5rem
}

.mx-custom-newjoin-wrapper .bg-primary-foreground {
    background-color: hsl(var(--primary-foreground))
}

.mx-custom-newjoin-wrapper .w-5 {
    width: 1.25rem
}

.mx-custom-newjoin-wrapper .h-2 {
    height: .5rem
}

.mx-custom-newjoin-wrapper .h-5 {
    height: 1.25rem
}

.mx-custom-newjoin-wrapper .flex-1 {
    flex: 1 1 0%
}

.mx-custom-newjoin-wrapper .gap-4 {
    gap: 1rem
}

.mx-custom-newjoin-wrapper .cursor-pointer {
    cursor: pointer
}

.mx-custom-newjoin-wrapper .transition-colors {
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s
}

.mx-custom-newjoin-wrapper  .bg-card {
    background-color: hsl(var(--card))
}

.mx-custom-newjoin-wrapper input.ruButton {
    display: inline;
}

#savingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#savingOverlay .spinner-border {
    width: 3rem;
    height: 3rem;
}

#savingOverlay .saving-text {
    font-weight: 600;
    color: var(--bs-primary);
}

/* Make mobile date inputs show a fake calendar icon */
input[type="date"] {
    position: relative;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='gray' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.89-1.99 2L3 20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6c0-1.11-.9-2-2-2Zm0 16H5V9h14v11Zm-7-9h5v5h-5v-5Z'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 18px 18px;
    cursor: pointer;
}

/* Hide native icon but keep native picker clickable */
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}