#chat1 .form-outline .form-control ~ .form-notch div {
    pointer-events: none;
    border: 1px solid;
    border-color: #eee;
    box-sizing: border-box;
    background: transparent;
}

#chat1 .form-outline .form-control ~ .form-notch .form-notch-leading {
    left: 0;
    top: 0;
    height: 100%;
    border-right: none;
    border-radius: .65rem 0 0 .65rem;
}

#chat1 .form-outline .form-control ~ .form-notch .form-notch-middle {
    flex: 0 0 auto;
    max-width: calc(100% - 1rem);
    height: 100%;
    border-right: none;
    border-left: none;
}

#chat1 .form-outline .form-control ~ .form-notch .form-notch-trailing {
    flex-grow: 1;
    height: 100%;
    border-left: none;
    border-radius: 0 .65rem .65rem 0;
}

#chat1 .form-outline .form-control:focus ~ .form-notch .form-notch-leading {
    border-top: 0.125rem solid #39c0ed;
    border-bottom: 0.125rem solid #39c0ed;
    border-left: 0.125rem solid #39c0ed;
}

#chat1 .form-outline .form-control:focus ~ .form-notch .form-notch-leading,
#chat1 .form-outline .form-control.active ~ .form-notch .form-notch-leading {
    border-right: none;
    transition: all 0.2s linear;
}

#chat1 .form-outline .form-control:focus ~ .form-notch .form-notch-middle {
    border-bottom: 0.125rem solid;
    border-color: #39c0ed;
}

#chat1 .form-outline .form-control:focus ~ .form-notch .form-notch-middle,
#chat1 .form-outline .form-control.active ~ .form-notch .form-notch-middle {
    border-top: none;
    border-right: none;
    border-left: none;
    transition: all 0.2s linear;
}

#chat1 .form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
    border-top: 0.125rem solid #39c0ed;
    border-bottom: 0.125rem solid #39c0ed;
    border-right: 0.125rem solid #39c0ed;
}

#chat1 .form-outline .form-control:focus ~ .form-notch .form-notch-trailing,
#chat1 .form-outline .form-control.active ~ .form-notch .form-notch-trailing {
    border-left: none;
    transition: all 0.2s linear;
}

#chat1 .form-outline .form-control:focus ~ .form-label {
    color: #39c0ed;
}

#chat1 .form-outline .form-control ~ .form-label {
    color: #bfbfbf;
}

.text-box {
    text-align: left;
    cursor: auto;
}

/*for streched contaniner*/

#header {
    padding: 0 10px 0 10px;
}

@media (min-width: 1800px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 1200px !important;
    }
}


@media (min-width: 1800px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 1200px !important;
    }
}

@media (min-width: 1700px) and (max-width: 1799.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 1175px !important;
    }
}

@media (min-width: 1600px) and (max-width: 1699.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 1110px !important;
    }
}

@media (min-width: 1500px) and (max-width: 1599.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 1060px !important;
    }
}

@media (min-width: 1500px) and (max-width: 1599.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 1060px !important;
    }
}

@media (min-width: 1450px) and (max-width: 1499.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 990px !important;
    }
}

@media (min-width: 1400px) and (max-width: 1449.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 960px !important;
    }
}

@media (min-width: 1350px) and (max-width: 1399.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 930px !important;
    }
}

@media (min-width: 1300px) and (max-width: 1349.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 900px !important;
    }
}

@media (min-width: 1250px) and (max-width: 1299.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 850px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1249.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 825px !important;
    }
}

@media (min-width: 1150px) and (max-width: 1199.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 800px !important;
    }
}

@media (min-width: 1100px) and (max-width: 1149.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 790px !important;
    }
}

@media (min-width: 1050px) and (max-width: 1099.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 750px !important;
    }
}

@media (min-width: 1000px) and (max-width: 1049.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 710px !important;
    }
}

@media (min-width: 1000px) and (max-width: 1049.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 710px !important;
    }
}

@media (min-width: 992px) and (max-width: 999.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 705px !important;
    }
}



/*@media (min-width: 900px) and (max-width: 944.98px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 605px !important;
    }
}*/


/*@media (max-width: 991.98px) {
    .container {
        padding: 0 15px !important;
    }
}*/