html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
}

div {
    box-sizing: border-box;
}

img#backgroundImage {
    height: auto;
    min-height: 100vh;
    width: 100%;
    vertical-align: top;
    position: fixed;
}

#allUsers {
    height: 100%;
    position: relative;
    /*top: 0%;
    left: 3%;*/
    width: 93%;
    font-size: 40px;
    color: white;
    margin-left: 3.5%;
}

#allUsers img {
    height: auto;
    width: auto;
    max-height: 170px;
    max-width: 66%;
    margin-top: 80px;
    margin-left: 0;
    left: 10px;
    vertical-align: top;
}

.error {
    color: #FF0000;
}

#allUsers .userImage {
    float: left;
    width: 396px;
    height: 224px;
    text-align: center;
    background: #fff;
    margin: 5px;
    background-size: cover;
    margin-top: 46px;
    margin-bottom: 0px;
    border-radius: 20px;
    position: relative;
}

#allUsers .userImage::before,
#allUsers .userImage::after {
    content: '';
    position: absolute;
    width: 30px;
    /* Adjust border size */
    height: 30px;
    background-color: transparent;
    border: 3px solid #4E69AE;
    /* Creates the border effect */
}

#allUsers .userImage::before {
    top: -1px;
    /* Adjust position */
    left: -1px;
    border-top-left-radius: 20px;
    /* Square corner */
    border-bottom: none;
    border-right: none;
}

#allUsers .userImage::after {
    bottom: -1px;
    right: -1px;
    border-bottom-right-radius: 20px;
    /* Square corner */
    border-top: none;
    border-left: none;
}




#boardHeader .alluserHeader {
    position: fixed;
    height: 53px;
    background: #ffffff;
    width: 100%;
    top: 0px;
    color: black;
    padding: 10px 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    z-index: 99;
    justify-content: space-between;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .05), 0 1px 0 rgba(0, 0, 0, .05);
}

#boardHeader .allUserIcons {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    right: 24px;
}



#boardHeader .allUserText {
    font-size: 18px;
    font-weight: 700;
    color: #303030;
}

div#allUsers {
    float: left;
    width: 100%;
    height: initial;
    padding: 10px;
}


/* The Modal (background) */
.modal.myModalDigital {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */

}

/* Modal Content/Box */
.modal.myModalDigital .modal-dialog {
    padding: 0px;
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.modal.myModalDigital .modal-content {
    margin: 0px;
    /* 15% from the top and centered */
    padding: 0px;
    background-color: #ffffff;
    /* width: 100%; */
    /* width: 822px; */
    float: left;
    border-radius: 5px;
    /* Could be more or less, depending on screen size */
}

.modal.myModalDigital .modal-header {
    width: 100%;
    float: left;
    padding: 15px;
}

.modal.myModalDigital .modal-header h4 {
    margin-top: 0px;
    padding: 10px;

}

/* The Close Button */
.modal.myModalDigital .close {
    color: #aaa;
    float: right;
    font-size: 20px;
    font-weight: bold;
    background: rgba(254, 254, 254, 0.9);
    border: 0px;
    margin: -30px;
    border-radius: 100%;
    width: 25px;
    height: 25px;
    display: none;
}

.modal.myModalDigital .close:hover,
.modal.myModalDigital .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal.myModalDigital .modal-body {
    width: 100%;
    float: left;
    padding: 25px 15px 20px;
    border-top: solid 1px #D8D8D8;
    border-bottom: solid 1px #D8D8D8;
}

.modal.myModalDigital .modal-body .myselectBackGround {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal.myModalDigital .modal-body .myselectBackGround label {
    font-size: 18px;
}

.modal.myModalDigital .modal-body .myselectBackGround #selectEvent {
    border-radius: 4px;
    background: none;
    padding: 16px;
    border: solid 1px #D8D8D8;
}

.cardEvent {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}


.modal.myModalDigital .modal-footer {
    width: 100%;
    float: left;
    padding: 10px 15px;
    font-size: 16px;
}

.modal.myModalDigital .modal-footer button {
    width: auto;
    float: right;
    padding: 7px 25px;
    margin-left: 5px;
    background: none;
    border: solid 1px rgba(5, 37, 82, 0.59);
    color: rgba(5, 37, 82, 0.59);
    font-size: 18px;
    font-weight: 500;
}

.modal.myModalDigital .modal-footer button:hover {
    color: #fff;
    /* background: rgba(5, 37, 82, 0.59); */
}

.myModalDigitalRow {
    /* width: 100%; */
    /* float: left; */
    /* margin: 5px 0px;
    position: relative; */
    display: flex;
    flex-direction: column;
}

.myModalDigitalRowMaxCard {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 48%;
    /* position: relative; */
}

.myModalDigitalRowMaxCard input {
    padding: 10px;
    border: solid 1px #D8D8D8;
}

.myModalDigitalRowMaxCard label {
    font-size: 18px;
}

.myModalDigitalRowTopMargin {
    display: flex;
    flex-direction: column;
    width: 48%;
    gap: 15px;
    /* position: relative; */

}

.myModalDigitalRowTopMargin input {
    padding: 10px;
    border: solid 1px #D8D8D8;
}

.myModalDigitalRowTopMargin label {
    font-size: 18px;
}

.myModalDigitalRow label {
    /* width: 30%;
    float: left; */
    /* min-height: 35px; */
    line-height: 35px;
    /* font-size: 14px; */
}

.myModalDigitalRow .inputFiledboxText {
    color: #4E69AE;

    /* H4/Regular */
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    text-transform: capitalize;
}


.myModalDigitalRow input {
    /* width: 60%; */
    /* float: right; */
    /* padding: 0 2.5%;
    min-height: 35px;
    line-height: 35px;
    border-radius: 3px; */
}

.myModalDigitalRow input#backgroundFile {
    opacity: 0;
    position: relative;
    z-index: 999;
    width: 95%;
}

.myModalDigitalRow .inputFiledbox {
    position: relative;
    /* Create positioning context for absolute input */
    width: 100%;
    /* Full width of parent */
    height: 40px;
    /* Fixed height for consistency */
    border: 1px solid #ccc;
    /* Border to match other inputs */
    border-radius: 4px;
    /* Rounded corners */
    background-color: #fff;
    /* White background */
    overflow: hidden;
    /* Prevent overflow of child elements */
}

.myModalDigitalRow .inputFiledboxRow {
    display: flex;
    /* Flexbox for horizontal layout */
    align-items: center;
    /* Center vertically */
    justify-content: flex-start;
    /* Align content to start */
    height: 100%;
    /* Fill parent height */
    padding: 0 10px;
    /* Padding for content */
    cursor: pointer;
    /* Indicate clickability */
}

.myModalDigitalRow .inputFiledboxImge {
    margin-right: 8px;
    /* Space between image and text */
}

.myModalDigitalRow .inputFiledboxImge img {
    width: 20px;
    /* Size of SVG icon */
    height: 20px;
    /* Maintain aspect ratio */
}

.myModalDigitalRow .inputFiledboxText {
    font-size: 14px;
    /* Match font size of other inputs */
    color: #333;
    /* Dark text for readability */
    font-family: Arial, sans-serif;
    /* Consistent font */
}

.myModalDigitalRow input#backgroundFile {
    position: absolute;
    /* Position over entire inputFiledbox */
    top: 0;
    left: 0;
    width: 100%;
    /* Cover full width */
    height: 100%;
    /* Cover full height */
    opacity: 0;
    /* Make invisible */
    cursor: pointer;
    /* Ensure clickability */
    z-index: 1;
    /* Place above other content */
}

.myModalDigitalRow .inputFiledbox {
    border: 1px dotted #4E69AE;
    border-radius: 4px;
    padding: 4px;
}

.myModalDigitalRow .inputFiledboxRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    /* top: 12px; */
}

span.backgroundFile {
    /* width: 65%; */
    /* height: 100%;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    left: 35%;
    top: 0px;
    z-index: 9;
    line-height: 35px;
    color: #fff;
    background: rgba(5, 37, 82, 0.59); */
}

.BackToSignBoardbg {
    position: relative
}

#myProfile {
    width: auto;
    position: absolute;
    right: 0px;
    top: 0px;
    text-align: right;
}

#myProfile div {
    display: inline-block;
    margin: 0px;
    padding: 8px 25px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 14px;
    color: #fff;
    cursor: pointer;
}

#myProfileLg {
    width: auto;
    position: absolute;
    right: 0px;
    top: 0px;
    text-align: right;
    z-index: 999;
}

#myProfileLg div {
    /* display: none !important; please un comment before merge this pr */
    display: none !important;
    margin: 0px;
    padding: 0;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
}

.BackToSignBoard {}

.BackToSignBoard a {
    color: #fff;
    top: 0;
    text-decoration: initial;
    padding: 8px 25px;
    background: rgb(89, 134, 165);
    float: left;
}

.BackToSignBoard a:hover {
    background-color: #57a4de;
}

div#allUsers {
    float: left;
    margin-top: 10px;
}

.logout {}

.switchEvent {}

.event-selector {
    float: left;
    width: 100%;
}

.form-group {
    background-color: transparent;
}

.event-selector .form-group .modal.myModalDigital .modal-content {
    margin: 0px;
    padding: 0px;
    background-color: rgba(170, 170, 170, 0.42);
    width: 100%;
    float: left;
}

.event-selector .modal.myModalDigital .modal-header {
    width: 100%;
    float: left;
    text-align: center;
    color: #0e0e0e;
    margin-bottom: -40px;
    font-size: 25px;
}

.event-selector .form-group .modal.myModalDigital .modal-header h4 {
    background-color: #4e69ae;
    text-align: center;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #4e69ae;
}

.event-selector .form-group .myModalDigitalRow p {
    width: 100%;
    float: left;
    text-align: center;
    font-size: 21px;
    margin: 33px 0;
    color: #fff;
}

.event-selector .form-group select#selectEvent {
    background: #f4f4f4;
    padding: 10px;
    float: left;
    width: 100%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    margin-bottom: 10px;
    cursor: pointer;
}

.event-selector .modal.myModalDigital .modal-footer button {
    color: #4E69AE;
    /* background: #D8D8D8; */
    border: 1px solid #4E69AE;
    cursor: pointer;
    border-radius: 4px;
}

.event-selector .modal.myModalDigital .modal-footer button.saveButton {
    background-color: #4E69AE !important;
    color: #fff;
}



#kk.myModalDigital {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
}

#kk.myModalDigital .modal-dialog {
    width: 400px;
    float: none;
    margin: auto;
    background: #fff;
    text-align: center;
    padding: 10px 25px 25px;
    overflow: hidden;
}

#kk.myModalDigital .modal-dialog .modal-body {
    padding: 10px 0px;
    overflow: hidden;
}

#kk.myModalDigital .modal-dialog .modal-body .myModalDigitalRow p {
    width: 35%;
    float: left;
    line-height: 40px;
    margin: 0px;
}

#kk.myModalDigital .modal-dialog .modal-body .myModalDigitalRow select {
    width: 65%;
    float: right;
    min-height: 40px;
    min-height: 40px;
    padding: 0 10px;
}

#kk.myModalDigital .modal-dialog .modal-footer {
    padding: 10px 0px;
}

#headerEventModal .modal-dialog {
    overflow: hidden;
    background: #fff;
}

a.fullLengthAnchor {
    width: 100%;
    float: left;
    text-align: center;
    font-size: 14px;
    margin: 0px 0 10px;
    cursor: pointer;
    text-decoration: underline;
    color: #4E69AE;
}

.button {
    background-color: #eb3017;
}

.clearButton {
    border-radius: 50px !important;
    margin-bottom: 8px !important
}

@media (max-width: 425px) {
    .modal.myModalDigital .modal-dialog {
        padding: 0px;
        position: fixed;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -40%);
        width: 90%;
        overflow-y: auto;
        max-height: 84%;
    }

    .cardEvent {
        display: flex;
        flex-direction: column;
        margin-top: 15px;
    }

    .myModalDigitalRowMaxCard {
        display: flex;
        width: 100%;
    }

    .myModalDigitalRowTopMargin {
        display: flex;
        flex-direction: column;
        width: auto;
        margin-top: 13px;

    }

    .modal.myModalDigital .modal-header h4 {
        padding: 5px;
        font-size: 16px;

    }

    .event-selector .modal.myModalDigital .modal-footer button {
        width: 100%;
        margin-bottom: 7px;
    }

    .modal.myModalDigital .modal-content {
        border-radius: 5px;
    }

    .modal.myModalDigital .modal-body {
        margin-top: 10px;
    }

    .modal.myModalDigital .modal-body .myselectBackGround label {
        font-size: 16px;
    }

    .myModalDigitalRowMaxCard label {
        font-size: 16px;
    }

    .myModalDigitalRowTopMargin label {
        font-size: 16px;
    }

    .modal.myModalDigital .modal-body .myselectBackGround #selectEvent {
        padding: 10px;
    }
}

.myselectBackGround .input#selectedEventDisplay {
    background-color: #f5f5f5;
    /* Light gray background, typical for disabled inputs */
    color: #666;
    /* Muted text color for disabled look */
    border: 1px solid #ccc;
    /* Border similar to other inputs */
    padding: 8px;
    /* Consistent padding with input fields */
    border-radius: 4px;
    /* Rounded corners for a modern look */
    cursor: not-allowed;
    /* Cursor indicates non-interactable element */
    font-size: 14px;
    /* Match font size of other inputs */
    line-height: 1.5;
    /* Ensure text alignment is consistent */
    width: 100%;
    /* Full width to match input fields */
    box-sizing: border-box;
    /* Ensure padding doesn't affect width */
    opacity: 0.7;
    /* Slightly transparent to mimic disabled state */
}

.commonFonts {
    color: #303030;

    /* H4/Regular */
    font-family: Inter;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
    text-transform: capitalize;
}

.popUpHeading {
    color: #303030;

    font-family: Inter;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 22.4px;
    /* 93.333% */
    text-transform: capitalize;
}

.myModalDigitalRow .inputFiledbox {
    position: relative;
    /* Create positioning context for absolute input */
    width: 100%;
    /* Full width of parent */
    height: 40px;
    /* Fixed height for consistency */
    border: 1px solid #ccc;
    /* Border to match other inputs */
    border-radius: 4px;
    /* Rounded corners */
    background-color: #fff;
    /* White background */
    overflow: hidden;
    /* Prevent overflow of child elements */
}

.myModalDigitalRow .inputFiledboxRow {
    display: flex;
    /* Flexbox for horizontal layout */
    align-items: center;
    /* Center vertically */
    height: 100%;
    /* Fill parent height */
    padding: 0 10px;
    /* Padding for content */
    cursor: pointer !important;
    /* Indicate clickability */
}

.myModalDigitalRow .inputFiledboxImge {
    margin-right: 8px;
    /* Space between image and text */
}

.myModalDigitalRow .inputFiledboxImge img {
    width: 20px;
    /* Size of SVG icon */
    height: 20px;
    /* Maintain aspect ratio */
}

.myModalDigitalRow .inputFiledboxText {
    font-size: 14px;
    /* Match font size of other inputs */
    color: #333;
    /* Dark text for readability */
    font-family: Arial, sans-serif;
    /* Consistent font */
}

.myModalDigitalRow input#backgroundFile {
    position: absolute;
    /* Position over entire inputFiledbox */
    top: 0;
    left: 0;
    width: 100%;
    /* Cover full width */
    height: 100%;
    /* Cover full height */
    opacity: 0;
    /* Make invisible */
    cursor: pointer !important;
    /* Ensure clickability */
    z-index: 1;
    /* Place above other content */
}

input {
    cursor: pointer;
}

.allUserIcons {
    idth: 35px;
    height: 35px;
    border-radius: 50%;
    background: lightgray;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.allUserIcons>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#boardHeader .allUserIcons{
        width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #d3d3d3;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}