.extension-container {
    display: block;
    position: absolute;
    top: 56px;
    bottom: 0%;
    width: 0;
    z-index: 9;
    transition: 0.1s;
    -webkit-transition: 0.1s;
}

.rtl .extension-container {
    left: 0;
}

.ltr .extension-container {
    right: 0;
}

.extension-container.show {
    width: 350px;
    box-shadow: 0px 2px 5px 5px rgb(0 0 0 / 40%);
}

.extensions {
    height: 100%;
    background-size: cover;
    overflow-x: hidden;
    overflow-y: hidden;
}

.filter {
    background: linear-gradient(rgb(223, 223, 223), rgba(235, 235, 235, 0.7)),
        url(../images/WW_1811_blog_CAD_and_BIm_02.b94e2a6f31ab3589b8e5e505689a31e4.webp)
            center;
    background-size: cover;
}

.filter .filter-select {
    margin: 15px;
}

.filter .filter-select div:hover {
    border-color: rgb(70, 190, 190);
    box-shadow: none;
}

.comments {
    background: linear-gradient(rgb(223, 223, 223), rgba(235, 235, 235, 0.7)),
        url(../images/UtmV99QwYcZRfxycVkwkpk-1200-80.jpg) center;
    background-size: cover;
}

.extensions .extension-title span,
.extensions .card-header span {
    position: absolute;
}

.rtl .extensions .extension-title span.extension-close,
.ltr .extensions .extension-title span.extension-refresh,
.rtl .extensions .card-header span {
    right: 20px;
}

.ltr .extensions .extension-title span.extension-close,
.rtl .extensions .extension-title span.extension-refresh,
.ltr .extensions .card-header span {
    left: 20px;
}

.comments .card-header i {
    font-size: larger;
}

.extensions .extension-title i:hover,
.comments .card-header i:hover {
    color: #ffcb05;
    cursor: pointer;
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
}

.extensions .extension-title i,
.extensions .extension-title i::before {
    vertical-align: sub;
}

.comments .custom-check label {
    vertical-align: sub;
}

.comments-all {
    height: 85%;
    overflow-y: auto;
}
.comment-one {
    height: calc(100vh - 123px);
    overflow-y: auto;
}

.card.comment-card {
    opacity: 50%;
    border-radius: 10px;
    width: 100%;
}

.comment-card:hover {
    opacity: 100%;
    border: 2px solid darkgray;
    background-color: lightgray;
}

.card.comment-card.gallery {
    max-width: calc(50% - 8px);
}

.single-comment-card {
    width: 100%;
    min-height: 100%;
    height: max-content;
    background-color: rgba(255, 255, 255, 0.5);
}

.card-header,
.card-footer {
    background-color: rgba(100, 100, 100, 0.05);
}

.resolved {
    opacity: 70% !important;
    background-color: rgba(175, 238, 238, 0.75) !important;
}

.resolved:hover {
    opacity: 100% !important;
}

.resolved .resolve-icon {
    color: #46bebe;
}

.comments .btn {
    height: 1.7rem;
}

.comments .btn.comment-btn {
    width: 80px;
}

.comments .btn i {
    color: grey;
}

.comment-img {
    width: 100%;
    height: 75px;
    object-fit: cover;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.img-container {
    padding-bottom: 0 !important;
}

.comment-img-card {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.comment-img-card:hover {
    cursor: pointer;
}

.form-check-input {
    margin-top: 6px;
}

.divider {
    border-bottom: 0.1rem solid darkgray;
}

.textarea {
    display: block;
    width: 100%;
    overflow: hidden;
    min-height: 25px;
    line-height: 20px;
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 5px;
    outline: none !important;
}

.textarea:focus {
    border: 1px solid darkgray;
}

.rtl .title-textarea[contenteditable]:empty::before {
    content: 'عنوان ...';
    color: gray;
}

.ltr .title-textarea[contenteditable]:empty::before {
    content: 'title ...';
    color: gray;
}

.title-textarea {
    font-weight: bold;
}

.rtl .description-textarea[contenteditable]:empty::before {
    content: 'توضیحات ...';
    color: gray;
}

.ltr .description-textarea[contenteditable]:empty::before {
    content: 'description ...';
    color: gray;
}

.rtl .reply-textarea[contenteditable]:empty::before {
    content: 'پاسخ ...';
    color: gray;
}

.ltr .reply-textarea[contenteditable]:empty::before {
    content: 'reply ...';
    color: gray;
}

.char-left {
    color: darkgray;
}

.view-icon {
    font-size: 1.5rem;
    color: darkgray;
}
.view-icon.active {
    color: rgb(70, 190, 190);
    /* background-color: rgb(250, 250, 250); */
}
.view-icon:hover {
    color: #ffcb05;
    background-color: darkgray;
    cursor: pointer;
}
.comment-detail p {
    font-weight: bold;
}
.comment-detail p span {
    font-weight: normal;
}
.comment-icon {
    font-size: 10px;
    margin-right: 5px;
}
.comment-icon.reply-icon {
    margin: 0;
}

.resolve-icon:hover {
    color: #46bebe;
    cursor: pointer;
}
.resolved .resolve-icon:hover {
    color: #ffcb05;
}
.reply-icon:hover {
    color: paleturquoise;
    cursor: pointer;
}
.delete-icon:hover {
    color: red;
    cursor: pointer;
}
.edit-icon:hover {
    color: #ffcb05;
    cursor: pointer;
}

.all-comments-container {
    height: calc(100vh - 172px);
}
.all-comments-container .all-comments {
    height: calc(100% - 63px);
    overflow: auto;
    padding: 0 5px 5px 5px;
}

.show-comment:hover {
    cursor: pointer;
}

.custom-check.resolved-check input[type='checkbox']:checked + label span {
    background-color: #46bebe;
}

.extensions .main-button button {
    margin: 15px;
    width: calc(100% - 30px);
    padding: 5px 20px;
    background-color: #46bebe;
    color: white;
    /* font-family: 'BYekan'; */
    font-family: 'Segoe UI';
    font-size: 18px;
    font-weight: 600;
    border: 0;
    border-radius: 10px;
}

.extensions .main-button button:hover {
    cursor: pointer;
}
.extensions .main-button button.btn-filter:hover {
    background: #010101;
    color: paleturquoise;
}

.extensions .main-button button.btn-filter {
    margin-bottom: 0;
}

.extensions .main-button button.btn-cancel {
    background-color: #ffcb05;
}

.extensions .main-button button.btn-cancel:hover {
    background: #010101;
    color: #ffcb05;
}

.extensions .main-button button i {
    padding: 0 10px 0 0;
    font-size: 15px;
}

.extensions .rc-slider-track {
    background-color: #46bebe;
}

.extensions .rc-slider-handle {
    border-color: #46bebe;
}

.extensions .slider {
    background-color: rgb(170, 170, 170);
}

.extensions input:checked + .slider {
    background-color: #46bebe;
}

.text-break {
    word-break: break-word!important;
    overflow-wrap: break-word!important;
}

.flex-grow-1 {
    -ms-flex-positive: 1!important;
    flex-grow: 1!important;
}