.spinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
    position: absolute;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }

}

.SecureMessage {
    font-size: 16px;
}

.Landing-Page-Card {
    background-color: #03A9E7;
    opacity: 0.96;
    padding-top: 4%;
    padding-bottom: 4%;
    border-radius: 18px;
}


#wrap {
    width: 100%;
    /*height: 1400px;*/ /*Network International*/
    /*height: 626px;*/ /*Windcave*/
    height: 700px; /*MarinaPay*/
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

#scaled-frame {
    width: 100%;
    /*height: 1400px;/* /*Network International*/
    height: 1112px; /*MarinaPay*/ /*Windcave*/
    border: 0px;
}

#PyxisDivIframe {
    width: 100%;
    height: 300px;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

#PyxisIframe {
    border: 0px;
    width: 330px
}

#PaymenGatewayLogo {
    max-width: 100%;
    width: 150px;
}

.link-text {
    cursor: pointer;
    color: black; /* Change color to match your design */
    text-decoration: underline;
}

    .link-text:hover {
        text-decoration: none;
    }
.GridHeader-row {
    margin-top: 10px;
    background-color: white;
    vertical-align : middle;
}
.table > thead {
    background-color: #138496 !important;
    color: white !important;
    text-align: center;
    vertical-align: middle !important;
}

.table > tbody {
    vertical-align: middle !important;
}

.link-text {
    cursor: pointer;
    color: black; /* Change color to match your design */
    text-decoration: none;
}

.link-text:hover {
        text-decoration: underline;
  }

.CustomTextAlignRight{
    text-align:right;
}

.CustomTextAlignLeft {
    text-align: left;
}


.messages-list {
    height: calc(60vh - 35px - 75px);
    overflow-y: auto;
    max-height: calc(60vh - 35px - 75px); /* Adjust the height as needed */
    background-color: white;
}

.single-msg-Logo {
    border: 1px solid lightgray;
    padding: 4px 10px;
    border-radius: 25px;
    width: 83%;
}
.single-msg {
    border: 1px solid lightgray;
    padding: 4px 10px;
    border-radius: 25px;
    width: fit-content;
}
.me {
    border-bottom-right-radius: 0;
    background-color: #f3f4ee;
}

.other {
    border-bottom-left-radius: 0;
    background-color: #cacdf7;
}

.msg-dt {
    font-size: 11px;
}

.me .msg-dt {
    display: block;
    width: 100%;
    text-align: right;
}


.StyleError {
    color: red;
    font: 20px;
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Set desired size */
    height: 50px; /* Set desired size */
    background-color: #007bff; /* Adjust to your color choice */
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 30px; /* Adjust for font size */
    margin-right: 5px; /* Spacing between avatar and message */
}