body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
background-color: #00318bfc;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 30%;
width: 280px;
}

/* The popup chat - hidden by default */
.chat-popup {
/*display: none;*/
position: fixed;
bottom: 15px;
/* right: 30%; */
border: 3px solid #f1f1f1;
z-index: 9;
}

/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}

/* Full-width textarea */
.form-container textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #e3eaf4;
resize: none;
min-height: 100px;
border-radius: 5px;
}

.form-container input {
width: 100%;
padding: 10px;
margin: 0px 0 0px 0;
border: none;
background: #e3eaf4;
resize: none;
border-radius: 5px;
/*min-height: 200px;*/
}

.form-container input,textarea::placeholder {
font-size: 12px; /* Change the font size as needed */
}


/* Set a style for the submit/send button */
.form-container .btn {
background-color: #00318bfc;
color: white;
/* padding: 10px 20px; */
border: none;
cursor: pointer;
/* width: 100%; */
/* margin-bottom:10px; */
/* opacity: 0.8; */
}

/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: #CFB53B;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
.card-bordered {
border: 1px solid #ebebeb
}

.card {
border: 0;
border-radius: 0px;
margin-bottom: 30px;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.03);
-webkit-transition: .5s;
transition: .5s
}

.padding {
/*padding: 3rem !important*/
}

body {
background-color: #f9f9fa
}

.card-header:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0
}

.card-header {
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
padding: 15px 20px;
background-color: transparent;
border-bottom: 1px solid rgba(77, 82, 89, 0.07)
}

.card-header .card-title {
padding: 0;
border: none
}

h4.card-title {
font-size: 17px
}

.card-header>*:last-child {
margin-right: 0
}

.card-header>* {
margin-left: 8px;
margin-right: 8px
}

.btn-secondary {
color: #4d5259 !important;
background-color: #e4e7ea;
border-color: #e4e7ea;
color: #fff
}

.btn-xs {
font-size: 11px;
padding: 2px 8px;
line-height: 18px
}

.btn-xs:hover {
color: #fff !important
}

.card-title {
font-family: Roboto, sans-serif;
font-weight: 300;
line-height: 1.5;
margin-bottom: 0;
padding: 15px 20px;
border-bottom: 1px solid rgba(77, 82, 89, 0.07)
}

.ps-container {
position: relative
}

.ps-container {
-ms-touch-action: auto;
touch-action: auto;
overflow: hidden !important;
-ms-overflow-style: none
}

.media-chat {
padding-right: 64px;
margin-bottom: 0
}

.media {
padding: 2px 12px;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear
}

.media .avatar {
flex-shrink: 0
}

.avatar {
position: relative;
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 100%;
background-color: #f5f6f7;
color: #8b95a5;
text-transform: uppercase
}

.media-chat .media-body {
-webkit-box-flex: initial;
flex: initial;
display: table
}

.media-body {
min-width: 0
}

.media-chat .media-body p {
position: relative;
padding: 6px 8px;
margin: 4px 0;
/*background-color: #f5f6f7;*/
background-color: #d7e2ed;
border-radius: 3px;
font-weight: 100;
color: ##000000
}

.media>* {
margin: 0 8px
}

.media-chat .media-body p.meta {
background-color: transparent !important;
padding: 0;
opacity: .8
}

.media-meta-day {
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
margin-bottom: 0;
color: #8b95a5;
opacity: .8;
font-weight: 400
}

.media {
padding: 1px 8px;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear
}

.media-meta-day::before {
margin-right: 16px
}

.media-meta-day::before,
.media-meta-day::after {
content: '';
-webkit-box-flex: 1;
flex: 1 1;
border-top: 1px solid #ebebeb
}

.media-meta-day::after {
content: '';
-webkit-box-flex: 1;
flex: 1 1;
border-top: 1px solid #ebebeb
}

.media-meta-day::after {
margin-left: 16px
}

.media-chat.media-chat-reverse {
padding-right: 12px;
padding-left: 64px;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
flex-direction: row-reverse
}

.media-chat {
padding-right: 64px;
margin-bottom: 0
}

.media {
padding: 1px 12px;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear
}

.media-chat.media-chat-reverse .media-body p {
float: right;
clear: right;
background-color: #48b0f7;
color: #fff
}

.media-chat .media-body p {
position: relative;
padding: 6px 8px;
margin: 4px 0;
/*background-color: #f5f6f7;*/
background-color: #d7e2ed;
border-radius: 3px
}

.border-light {
border-color: #f1f2f3 !important
}

.bt-1 {
border-top: 1px solid #ebebeb !important
}

.publisher {
position: relative;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
padding: 12px 20px;
background-color: #f9fafb
}

.publisher>*:first-child {
margin-left: 0
}

.publisher>* {
margin: 0 8px
}

.publisher-input {
-webkit-box-flex: 1;
flex-grow: 1;
border: none;
outline: none !important;
background-color: transparent
}

label {
font-size: 14px;
font-weight: bold;
}

button,
input,
optgroup,
select,
textarea {
font-family: Roboto, sans-serif;
font-weight: 300
}

.publisher-btn {
background-color: transparent;
border: none;
color: #8b95a5;
font-size: 16px;
cursor: pointer;
overflow: -moz-hidden-unscrollable;
-webkit-transition: .2s linear;
transition: .2s linear
}

.file-group {
position: relative;
overflow: hidden
}

.publisher-btn {
background-color: transparent;
border: none;
color: #cac7c7;
font-size: 16px;
cursor: pointer;
overflow: -moz-hidden-unscrollable;
-webkit-transition: .2s linear;
transition: .2s linear
}

.file-group input[type="file"] {
position: absolute;
opacity: 0;
z-index: -1;
width: 20px
}

.text-info {
color: #48b0f7 !important
}

body 
{
background:#f1f1f1;
}
.error_label {
  font-size: 16px;
  color: red;
}
.align-items-center{
margin-top: 10px;
margin-bottom: 10px;
font-size: 16px;
}
.tawk-button {
        margin: 0;
        border-radius: 5px;
        overflow: hidden;
        font: inherit;
        color: inherit;
        text-transform: none;
        display: inline-block;
        padding: .5rem 1rem;
        font-size: 1rem;
        border: 1px solid #03a84e;
        border-color: var(--tawk-header-background-color);
        line-height: 1.5rem;
        text-decoration: none;
        background-color: #03a84e;
        background-color: var(--tawk-header-background-color);
        color: #fff;
        /* color: var(--tawk-header-text-color); */
        background: #76b51b;
        margin-left: 50%;
    }