/* �ͷ�SDK��ʽ */
.container {
    display: grid;
    height: 100vh; /* �ӿڸ߶� */
    grid-template-rows: auto 1fr auto; /* ������������ */
}

.item {
    padding: 20px;
    background-color: lightgrey;
}

.top {
    height: 50px;
    background: red;
}
.btn {
    background-color: #01AE42; /* Green */
    border: none;
    color: white;
    padding: 10px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    width:110px; 
    height:45px;
}
.top_bottom {
    height: 150px;
    background: red;
}

.center { 
    background-color: yellow;
    overflow: auto;
}

.bottom {
    height: 123px;
    background: red;
}

.qa-sdk-wrapper {
    position: fixed; /* �̶�λ�� */
    width: 400px; /* ���� */
    right: -600px; /* ��ʼλ�����Ҳ��� */
    max-height: 530px; /* ���߶� */
    overflow: hidden; /* ����������� */
    border-radius: 4px; /* Բ�� */
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); /* ��ӰЧ�� */
    transition: all 0.5s ease-in-out; /* ������ */
    background: #fff; /* ������ɫ */
}

.qa-sdk-close-btn {
    display: inline-block; /* ���ڿ�Ԫ�� */
    width: 18px; /* ���� */
    height: 18px; /* �߶� */
    cursor: pointer; /* ���ָ����ʽ */
    position: absolute; /* ���Զ�λ */
    top: 16px; /* ���붥�� */
    right: 16px; /* �����Ҳ� */
}

    .qa-sdk-close-btn:hover {
        border-radius: 50%; /* �����ͣʱ��Բ�� */
        background-color: #d5d9df; /* �����ͣʱ�ı�����ɫ */
    }

#qa-sdk-iframe {
    width: 400px; /* iframe���� */
}

/* ��Ӧʽ��� */
@media (min-width: 1024px) and (max-width: 1366px) {
    .qa-sdk-wrapper {
        width: 356px; /* ���ض���Ļ�����µ������� */
    }

    #qa-sdk-iframe {
        width: 356px; /* ���ض���Ļ�����µ���iframe���� */
    }
}