@media(max-width:1298.99px) {

    .chat_wrapper,
    .chat_footer {
        padding: 0px 20px;
    }
}

@media(max-width:1198.99px) {
    .chat_intro_box h1 {
        font-size: 45px;
        line-height: 48px;
    }

    .chat_suggestion_box_outer {
        margin-top: 10px;
    }

    .chat_suggestion_box_outer .suggestion_box h3 {
        font-size: 16px;
        line-height: 23px;
    }

    .chat_suggestion_box_outer .suggestion_box {
        height: 170px;
    }
}

@media(max-width:991.98px){
    .chat_suggestion_box_outer{
        display: grid;
        grid-template-columns: 2fr 2fr;
    }
    .chat_intro_box{
        display: block;
    }
}

@media(max-width:767.98px) {

    .page_content {
        margin-left: 80px;
    }

    .sidebar {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        padding: 20px 0px;
    }

    .sidebar.active {
        min-width: 250px;
        max-width: 250px;
        padding: 20px 20px;
    }

    .sidebar.active .start_new_chat span {
        display: block;
    }

    .start_new_chat span {
        display: none;
    }

    .sidebar.active .start_new_chat {
        width: 100%;
    }

    .start_new_chat {
        margin: auto;
        width: 55px;
    }

    .sidebar_collapse_icon {
        text-align: center;
    }

    .sidebar.active .sidebar_collapse_icon {
        text-align: right;
    }

    .sidebar_history {
        display: none;
    }

    .sidebar.active .sidebar_history {
        display: block;
    }

    body.open_menu {
        position: relative;
        overflow: hidden;
    }

    body.open_menu::after {
        content: '';
        background-color: #4f4f5a87;
        top: 0px;
        position: absolute;
        left: 0px;
        width: 100%;
        height: 100%;
    }
    .hamburger_btn{
        padding: 0px 0px 20px;
    }
    .sidebar.active .sidebar_logo {
        padding: 0px 10px 10px 10px;
    }
    .sidebar_logo{
        padding: 20px 10px;
    }
}

@media(max-width:479.98px) {
    .hamburger_btn {
        display: none;
    }

    .sidebar_history{
        height: calc(100vh - 110px);
    }

    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.active {
        transform: translateX(0%);
    }

    .page_content,
    .open_menu .page_content {
        margin-left: 0px;
    }

    .mobile_hamburger_btn {
        display: block;
        padding: 0px;
    }

    .open_menu .close_sidebar_btn {
        display: flex;
        position: absolute;
        right: 3px;
        top: 3px;
    }

    .alert_box p,
    .chat_footer p {
        font-size: 12px;
    }

    .chat_footer p {
        margin-top: 5px;
    }

    .alert_box button {
        right: 9px;
    }

    .alert_box button img {
        width: 10px;
    }

    .chat_wrapper,
    .chat_footer {
        padding: 0px 10px;
    }

    .chat_footer textarea {
        height: 42px;
        padding: 7px 50px 7px 17px;
        font-size: 14px;
    }
    .chat_input .send_text {
        right: 13px;
        top: 8px;
    }

    .chat_intro_box h1 {
        font-size: 30px;
        line-height: 32px;
    }
    .chat_suggestion_box_outer .suggestion_box {
        height: auto;
        padding: 9px 9px;
    }
    .left_chat_box, .chat_box_outer .right_chat_box {
        margin-bottom: 20px;
    }
}

@media(max-width:419.98px) {
    .login-container {
        padding: 20px;
    }

    .login_header h2 {
        font-size: 24px;
        line-height: 24px;
    }

    .login_header p {
        font-size: 14px;
        line-height: 18px;
    }

    .login_form {
        padding: 10px 10px;
    }

    .chat_box_outer p {
        font-size: 12px;
        line-height: 16px;
    }

    .chat_box_outer .right_chat_box {
        padding: 7px 16px;
    }
    .chat_intro_box h1 {
        font-size: 24px;
        line-height: 27px;
    }
}