.gram .contentArea {
    height: calc(100vh - 112px);
    background-color: var(--main-background-color);
    color: var(--simple-text-color);
    overflow-y: auto;
    outline: none;
    padding: 10px;
}

.gram h4 {
    color: #B0B5BA !important;
}
.ck.ck-toolbar>.ck-toolbar__items>:not(.ck-toolbar__line-break) {
    margin-right: 10px !important;
}
.gram_content {
    cursor: pointer;
}

.toolsDropdown .dropdown-toggle {
    background-color: var(--different-bg-color) !important;
    color: var(--simple-text-color) !important;
    border: 0px solid var(--language-border-color) !important;
    width: 210px;
    text-align: left;
    box-shadow: none !important;
    padding: 8px 12px;
    text-align: left;
    font-size: 14px;
}
.editr-area{
    height: calc(100vh - 227px);
}



.Upload-Option strong {
    color: var(--heading-text-color);
    display: inline-block;
    margin: 10px 0px;
    font-size: 18px;
}

.Upload-Option p {
    color: var(--simple-text-color);
    font-size: 14px;
}

.ClearText svg {
    color: var(--main-background-color);
}

.w-49 {
    width: 49%;
}

.lightGreenBg {
    background-color: var(--light-green);
}

.lightPurpleBg {
    background-color: var(--light-purple);
}

.lightYellowBg {
    background-color: var(--light-yellow);
}

.borderBottom {
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .borderBottom {
    border-bottom: 1px solid #464852;
}

.upload_button {
    border: 1px solid var(--language-border-color);
    border-radius: 6px;
}

.Section-divided {
    display: flex;
    padding: 15px 0px;
    align-items: center;
}

.Section-divided strong {
    font-weight: 500;
    display: inline-block;
    margin: 0px 15px 0px 0px;
    color: var(--simple-text-color);
    font-size: 18px;
}

.submitGrammerbutton button {
    /* float: right; */
    margin-bottom: 10px;
    width: 320px;
    padding: 12px !important;
    border: 0px;
    margin-bottom: 0px !important;
}

/* result area grammar checker  */
.mian-reasultbox {
    height: calc(100vh - 100px);
    background: var(--secondary-background-color);
    border-radius: 6px;
    /* padding: 20px; */
    position: relative;
}

.handleEditorWidth {
    width: 100%;
}

/* .edittools {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--language-border-color);
    padding-bottom: 10px;
}

.editortools1,
.editortools2,
.editortools3 {
    border-right: 1px solid #BFD9F0;
    margin: 0px 5px 0px 0px;
    padding: 0px 7px 0px 0px;
}

.editortools3 {
    border-right: 0px solid #BFD9F0;
}

.editortools1 svg,
.editortools2 svg,
.editortools3 svg {
    margin-right: 10px;
} */

.CheckPlagiarismBTN button {
    background: #1463FF;
    color: #B3D5F5;
    border: 0;
    border-radius: 6px;
    padding: 8px;
    display: inline-block;
    font-size: 14px;
}

.CheckPlagiarismBTN button a {
    color: #fff
}

.contentUploaded {
    /* margin-top: 20px; */
    line-height: 2.2;
    /* overflow-y: scroll; */
    height: calc(100vh - 182px);
    color: var(--main-text-color);
    font-size: 14px;
}

.word-CounterPart {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    font-weight: 600;
    color: var(--simple-text-color);
    font-size: 14px;
    align-items: center;
}
.word-CounterPart span{
    font-size: 14px;
    margin-bottom: 0;
    color: var(--simple-text-color) !important;
    min-width: 160px;
}


.fortextarea .ck-content {
    margin-top: 5px;
    overflow-y: overlay !important;
    word-break: normal;
    height: calc(100% - 50px);
    color: var(--main-text-color);
    border: none !important;
    box-shadow: none !important;
}

.ck.ck-toolbar.ck-toolbar_grouping>.ck-toolbar__items{
    justify-content: end !important;
}

.ck.ck-powered-by {
    display: none !important;
}

.ck.ck-icon,
.ck.ck-icon * {
    color: var(--main-text-color) !important
}

.ck.ck-button.ck-on,
a.ck.ck-button.ck-on {
    background-color: var(--main-text-color) !important;
}

.ck.ck-button.ck-on .ck-icon,
a.ck.ck-button.ck-on .ck-icon {
    color: white !important;
    fill: white !important;
}

.ck.ck-button.ck-on .ck.ck-icon.ck-icon_inherit-color :not([fill]) {
    fill: white !important;
}

.ck.ck-toolbar {
      background: transparent !important;
    border: 0px solid var(--border-color) !important;
}


.HideAssistant {
    position: absolute;
    top: 8px;
    right: 20px;
    z-index: 1;
    /* background-color: #6D8094; */
}

.HideAssistant.closed {
    position: absolute;
    top: 37px;
    right: 25px;
    z-index: 99;
}

.HideAssistant svg {
    transform: rotate(0deg);
    transition: .3s ease-in-out;
}

.HideAssistant.closed svg {
    transform: rotate(180deg);
    transition: .3s ease-in-out;
}

.dark-mode .HideAssistant.closed svg path {
   fill: var(--simple-text-color);
}

.result-section {
    height: calc(100vh - 200px);
}

.toggleWidth {
    width: 600px !important;
}

.Correction-box {
    background: var(--main-background-color);
    color: var(--main-text-color);
    padding: 10px;
    border-radius: 6px;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    margin: 10px 0px;
    font-weight: 600;
    font-size: 14px;
}

.CorrectAll {
    background: #29CF8E;
    padding: 7px 14px;
    border-radius: 6px;
    margin: 0px 15px;
    color: #fff;
    box-shadow: 0px 6px 10px 0px #00C2764D;
    display: inline-block;
}

.IgnoreAll {
    color: #EE4949;
    text-decoration: underline;
}

.all-accordains {
    overflow-y: auto;
    overflow-x: clip;
    width: 390px;
    padding: 10px;
    height: calc(100vh - 274px);
}

.nothingToCheck {
    width: 380px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: calc(100vh - 220px); */
}

.nothingToCheck h4 {
    font-weight: bold;
    font-size: 22px;
    color: var(--main-text-color);
    text-align: center;
}

.nothingToCheck p {
    font-size: 16px;
    color: var(--main-text-color);
}

.nothingToCheck svg {
    width: 300px;
    display: block;
}


.all-accordains .accordion-item {
    margin-bottom: 10px;
    /* box-shadow: 0px 6px 30px 0px var(--boxshadow-color); */
    border: 1px solid var(--border-color);
    background: var(--main-background-color);
    border-radius: 6px;
    border-radius: 8px;
    /* transition: 1s ease-in-out; */
}

.line-through {
    text-decoration-line: line-through;
}

.CutWord {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 115px;
    vertical-align: middle;
    color: var(--text-light);
}

.all-accordains .accordion-item .accordion-button::after {
    background-position: center;
}

.lightGreen {
    background: var(--light-green);
    color: var(--main-text-color);
}


.lightBlue{
    background: var(--light-blue);
    color: var(--main-text-color);
}

.lightPurple {
    background: var(--light-purple);
    color: var(--main-text-color);
}


.bgFFEDC1 {
    background: var(--light-yellow);
    color: var(--main-text-color);
}

.bgFFCDCD {
    background: var(--darkpink);
    color: var(--main-text-color);
}



.realword {
    background: var(--primary-color);
    display: inline-block;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0px 6px 10px 0px#2958cf57;
    color: #fff;
    margin-right: 5px;
}

.all-accordains .accordion-item .accordion-header button {
    background: transparent;
    box-shadow: none;
    height: 45px;
}

.all-accordains .accordion-header .accordion-button::after {
    transform: rotate(0deg) !important;
}
.all-accordains .accordion-header .accordion-button::after {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="24" y="24" width="24" height="24" rx="4" transform="rotate(180 24 24)" fill="%23F0F1F4"/><path d="M11.9975 7.9975C12.2575 7.9975 12.5075 8.0975 12.7075 8.2875L17.7075 13.2875C18.0975 13.6775 18.0975 14.3175 17.7075 14.7075C17.3175 15.0975 16.6775 15.0975 16.2875 14.7075L11.9975 10.4175L7.7075 14.7075C7.3175 15.0975 6.6875 15.0975 6.2975 14.7075C5.9075 14.3175 5.9075 13.6875 6.2975 13.2975L11.2975 8.2975C11.4975 8.0975 11.7475 8.0075 12.0075 8.0075L11.9975 7.9975Z" fill="%2364748B"/></svg>') !important;
}
.dark-mode .all-accordains .accordion-header .accordion-button::after {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="24" y="24" width="24" height="24" rx="4" transform="rotate(180 24 24)" fill="%23515559"/><path d="M11.9975 15.0025C12.2575 15.0025 12.5075 14.9025 12.7075 14.7125L17.7075 9.7125C18.0975 9.3225 18.0975 8.6825 17.7075 8.2925C17.3175 7.9025 16.6775 7.9025 16.2875 8.2925L11.9975 12.5825L7.7075 8.2925C7.3175 7.9025 6.6875 7.9025 6.2975 8.2925C5.9075 8.6825 5.9075 9.3125 6.2975 9.7025L11.2975 14.7025C11.4975 14.9025 11.7475 14.9925 12.0075 14.9925L11.9975 15.0025Z" fill="white"/></svg>') !important;
}

.all-accordains .accordion-header.collapsed .accordion-button::after {
    transform: rotate(-180deg) !important;
}

.all-accordains .accordion-header.collapsed .onOpen {
    display: none !important;
}

.all-accordains .accordion-header .onOpen {
    display: flex !important;
    align-items: center;
    font-size: 14px;
}

.all-accordains .accordion-header .onClose {
    display: none !important;
}

.all-accordains .accordion-header.collapsed .onClose {
    font-size: 14px;
    display: flex !important;
    align-items: center;
}


.accordion-body .word-design {
    background: #EFF2F4;
    margin: 6px;
    padding: 5px;
    border-radius: 6px;
    color: #001C36;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
}

.EE4949 {
    color: #EE4949
}

.textColor {
    color: var(--simple-text-color) !important;
}

.delete_AND_Dictionary span {
    margin-right: 12px;
    text-decoration: underline;
    color: var(--simple-text-color);
    font-size: 14px;
}

.delete_AND_Dictionary svg {
    margin-right: 8px;
}

/* ---- */
.coversuggestionBox {
    /* height: 125px; */
    border-bottom: 1px solid var(--border-color);
}

.coversuggestionBox .overallScorePercent {
    position: relative;
}

.coversuggestionBox .overallScorePercent svg {
    position: relative;
    width: 30px;
    height: 30px;
    transform: rotate(-90deg);
}

.coversuggestionBox .overallScorePercent svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #BFD9F0;
    strokeWidth: 4;
}

.coversuggestionBox .overallScorePercent svg circle:last-of-type {
    stroke-dasharray: 76px;
    stroke-dashoffset: calc(76px - (76px * var(--scorePercent)) / 100);
    stroke: #1463FF;
}

.coversuggestionBox strong {
    font-size: 14px;
    color: var(--heading-text-color);
}

.suggestionBox {
    /* margin: 20px 5px; */
    background: var(--main-background-color);
    color: var(--simple-text-color);
    padding: 10px;
    border-radius: 6px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.suggestionBox .progress{
    height: 8px;
}

.AllSuggestionBox {
    background: #1463FF;
    padding: 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    justify-content: space-between;
    margin: 10px 0;
    font-size: 14px;
    cursor: pointer;
}


.AllSuggestionBox svg {
    margin-right: 10px;
}

.AllSuggestionBox span {
    background: white;
    /* float: right; */
    display: inline-block;
    padding: 3px 7px;
    border-radius: 4px;
    color: #1463FF;
    font-weight: 600;
}

/* .wrap-for-scroll {
    overflow-y: auto;
    overflow-x: clip;
    padding: 10px;
    height: calc(100vh - 350px);
} */

.accuracyPart {
    background: var(--main-background-color);
    padding: 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    /* overflow: hidden; */
    margin-bottom: 10px;
    /* box-shadow: 0px 0px 7px 0px var(--boxshadow-color); */
    cursor: pointer;
}

.accuracyPart p {
    margin: 0px 0px 0px 10px;
    color: var(--main-text-color);
    font-size: 14px;
}


.Undo_redoButton {
    display: flex;
    margin-top: 10px;
    justify-content: flex-end;
}

.Undo_redoButton svg {
    margin-right: 10px
}

.Undo_redoButton button {
    padding: 8px 12px;
    margin: 0px 10px 0px 0px;
    border: 0px;
    background: var(--unactive-icon-colors);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
}

.reportModal hr{
    margin: 30px 0px;
}

.reportModal .modal-header h2 {
    /* color: var(--primary-color); */
    font-size: 28px;
    font-weight: 600;
}

.reportModal .modal-dialog,
.languageModal .modal-dialog,
.dictionaryModal .modal-dialog,
.targetModal .modal-dialog {
    max-width: 640px;
}

.reportModal .modal-header,
.languageModal .modal-header,
.dictionaryModal .modal-header,
.targetModal .modal-header {
    /* background-color: var(--light-blue); */
    padding-left: 30px;
    padding-right: 30px;
}

.languageModal .modal-header h2,
.dictionaryModal .modal-header h2,
.targetModal .modal-header h2 {
    font-size: 28px;
    /* color: var(--main-text-color); */
    font-weight: 600;
}

.reportModal .modal-body h3,
.languageModal .modal-body h3,
.dictionaryModal .modal-body h3,
.targetModal .modal-body h3 {
    font-size: 18px;
    /* color: var(--main-text-color); */
    font-weight: 600;
}

.reportModal p,
.dictionaryModal p,
.languageModal p,
.targetModal p {
    color: #6D8094;
    font-size: 16px;
}

.dark-mode .reportModal p,
.dark-mode .dictionaryModal p,
.dark-mode .languageModal p,
.dark-mode .targetModal p {
    color: #ADBECE;
}

.reportModal button {
    background-color: var(--primary-color);
    color: #FFFFFF;
}

.reportModal .modal-body,
.dictionaryModal .modal-body,
.languageModal .modal-body,
.targetModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
    /* background-color: var(--secondary-background-color); */
    color: var(--main-text-color);
    padding-left: 30px;
    padding-right: 30px;
}


.reportModal .modal-content,
.dictionaryModal .modal-content,
.languageModal .modal-content,
.targetModal .modal-content {
    border: 0;
}

.reportModal .modal-header .btn-close {
    display: none;
}

.targetModal .mode-buttons {
    /* background-color: var(--lightgrey-bg); */
    padding: 6px;
    /* width: 332px; */
    height: 56px;
    display: flex;
    align-items: center;

}

.targetModal .mode-buttons button {
    background-color: transparent !important;
    border: 0;
    width: 50%;
    height: 44px;
    color: var(--text-light) !important;
}

.targetModal p span {
    color: var(--main-text-color)
}

.intentBtn {
    /* background-color: var(--lightgrey-bg); */
    margin: 0px !important;
    width: 25%;
}

.intentBtn label {
    padding: 10px 10px;
    height: 44px;
    
    /* min-width: 144px; */
    display: flex;
    align-items: center;
    color: var(--text-light);
}

.intentBtn .form-check-input {
    background-color: var(--secondary-background-color) !important;
    border: 0;
    outline: none !important;
    box-shadow: none !important;
    margin-top: 0;
    margin-right: 12px;
}

.intentBtn .form-check-input:checked {
    background-color: var(--main-text-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='mediumseagreen' strokeLinecap='round' strokeLinejoin='round' strokeWidth='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.intentBtn:has(input:checked) {
    background-color: var(--main-background-color);
    color: var(--primary-color) !important;
}

.intentBtn:has(input:checked) label {
    color: var(--primary-color) !important;
    font-weight: 600;
}


.targetModal .mode-buttons .active {
    background-color: var(--main-background-color) !important;
    border: 0;
    color: var(--primary-color) !important;
    font-weight: 600;
}

.ck-focused {
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

.contentUploaded .ck-content {
    height: calc(100% - 50px);
}

.accuracyPart .alertPercent {
    position: relative;
}

.accuracyPart .alertPercent svg {
    position: relative;
    width: 10px;
    height: 10px;
    transform: rotate(-90deg);
}

.accuracyPart .alertPercent.accuracy svg circle{
    fill: #E24040;
}

.accuracyPart .alertPercent.clarity svg circle{
    fill: #9051D6;
}

.accuracyPart .alertPercent.style svg circle{
    fill: #29CF8E;
}

.accuracyPart .alertPercent.redundency svg circle{
    fill: #FF6B00;
}

.accuracyPart .alertPercent.syntax svg circle{
    fill: #FFC800;
}

.accuracyPart .alertPercent.vocab svg circle{
    fill: #1463FF;
}


.purpleProgressWrap {
    border-radius: calc(0.25px * 16);
    display: flex;
    height: calc(0.25px * 16);
    justify-content: flex-start;
    position: relative;
    width: 120px;
    z-index: 1;
    background: var(--light-purple);
}

.purpleRightSideProgress {
    border-bottom-right-radius: calc(0.25px * 16);
    border-top-right-radius: calc(0.25px * 16);
    height: 100%;
    margin-left: 50%;
    transition: width .8s ease-in-out 0s;
    background: #9051D6;
}

.purpleLeftSideProgress {
    border-bottom-left-radius: calc(0.25px * 16);
    border-top-left-radius: calc(0.25px * 16);
    height: 100%;
    margin-right: 50%;
    transition: width .8s ease-in-out 0s;
    background: #9051D6;
}

.yellowProgressWrap {
    border-radius: calc(0.25px * 16);
    display: flex;
    height: calc(0.25px * 16);
    justify-content: flex-start;
    position: relative;
    width: 120px;
    z-index: 1;
    background: var(--light-yellow);
}

.yellowRightSideProgress {
    border-bottom-right-radius: calc(0.25px * 16);
    border-top-right-radius: calc(0.25px * 16);
    height: 100%;
    margin-left: 50%;
    transition: width .8s ease-in-out 0s;
    background: #FFC800;
}

.yellowLeftSideProgress {
    border-bottom-left-radius: calc(0.25px * 16);
    border-top-left-radius: calc(0.25px * 16);
    height: 100%;
    margin-right: 50%;
    transition: width .8s ease-in-out 0s;
    background: #FFC800;
}

@keyframes growProgressBar {

    0%,
    33% {
        --pgPercentage: 0;
    }

    100% {
        --pgPercentage: var(--value);
    }
}

@property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

.performanceScore {
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, var(--secondary-background-color) 85%, transparent 86% 100%),
        conic-gradient(#1463FF calc(var(--pgPercentage) * 1%), #BFD9F0 0);
    color: #1463FF;
}

.performanceScore::before {
    counter-reset: percentage var(--value);
    content: counter(percentage)"%";
    font-size: 20px;
    font-weight: 600;
}

@media (max-width: 767.5px) {
    .reportModal .modal-header h2 {
        font-size: 20px;
    }

    .reportModal .modal-body,
    .dictionaryModal .modal-body,
    .languageModal .modal-body,
    .targetModal .modal-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .reportModal .modal-header,
    .languageModal .modal-header,
    .dictionaryModal .modal-header,
    .targetModal .modal-header {
        padding-left: 20px;
        padding-right: 20px;
    }

    .reportModal .modal-body h3,
    .targetModal .modal-body h3 {
        font-size: 18px;
    }

    .reportModal .modal-body p,
    .targetModal .modal-body p {
        font-size: 14px;
    }

    .targetModal .mode-buttons {
        width: 255px;
    }

    .targetModal .mode-buttons button {
        width: 138px;
    }

    .targetModal .form-check-label {
        width: auto;
    }

    .mian-reasultbox {
        padding: 5px;
    }

    .contentArea {
        height: calc(100vh - 289px);
    }

    .wrapSection {
        height: calc(100vh - 190px);
    }

    .mian-reasultbox {
        height: calc(100vh - 274px);
        overflow: auto;
        background-color: var(--main-background-color);
    }

}

/* ----upload grammar Files css---- */
.grammarFilesPage {
    height: calc(100vh - 65px);
    padding: 10px;
    ;
}

.File-upload-Section {
    /* height: 300px; */
    height: calc(100vh - 455px);
    background: var(--secondary-background-color);
    border-radius: 6px;
    padding: 20px;
}

.File-upload-Section .dragZONE {
    border: 3px dashed var(--language-border-color);
    background: var(--main-background-color);
    height: 100%;
    border-radius: 6px;
    padding: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.File-upload-Section .dragZONE strong {
    color: var(--main-text-color);
    margin: 10px 0px;
    display: inline-block;
}

.File-upload-Section .dragZONE p {
    color: #6D8094;

}

.File-upload-Section .dragZONE p label {
    color: #1463FF;
    text-decoration: underline;
    cursor: pointer;
}

.driveUploaded svg {
    margin: 0px 7px;
    color: var(--secondary-background-color);
}

.topbarSearching {
    padding: 15px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inputbar {
    padding: 5px 0px;
    background: var(--secondary-background-color);
    border-radius: 6px;
}

.inputbar input {
    border: 0;
    box-shadow: none !important;
    background: var(--secondary-background-color) !important;
    color: var(--main-text-color) !important;

}

.inputbar button {
    background: transparent !important;
    border: 0;
    box-shadow: none;

}

.topbarSearching strong {
    color: #1463FF;
    font-size: 20px;
}

.searchbar-zone {
    display: flex;
    align-items: center;
}

.gridLIST {
    display: flex;
}

.gridLIST svg {
    margin: 0px 10px 0px 0px;
    color: var(--main-text-color);
}

.gridLIST .active svg {
    color: var(--primary-color);
}

.main-recentfiles {
    display: flex;
    flex-wrap: wrap;
    /* height: calc(100vh - 455px); */
    height: 300px;
    overflow-y: scroll;
}

.recent-files {
    width: 238px;
    height: 215px;
    background: var(--secondary-background-color);
    padding: 15px;
    border-radius: 6px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.recent-files strong {
    color: var(--main-text-color);
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-view strong {
    width: 200px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-files p {
    color: var(--simple-text-color);
    margin-top: 10px;
    line-height: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;

}

.del-download svg {
    margin: 0px 10px 0px 0px;
}

.list-view {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
}

.list-view .innerlist {
    flex-direction: row;
    display: flex;
    align-items: center;
    width: 100%;
}

.list-view .innerlist p {
    margin: 0px 0px 0px 20px;
    width: 33%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.toggle .form-check-input {
    height: 26px;
    width: 48px !important;
    box-shadow: none !important;
}

.dictionaryModal .searchbar {
    width: 100%;
}

.dictionaryModal .form-control {
    background-color: var(--main-background-color);
    color: var(--main-text-color);
    border: 0;
    outline: 0;
    box-shadow: none;
}

.dictionaryModal .form-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ADBECE;
    font-size: 16px;
    opacity: 1;
    /* Firefox */
}

.dictionaryModal .form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #ADBECE;
    font-size: 16px;
}

.dictionaryModal .form-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #ADBECE;
    font-size: 16px;
}

.dictionaryModal button {
    background-color: var(--primary-color) !important;
    border: 0;
}

.languageModal .selectLang {
    background-color: var(--lightgrey-bg);
}

/* .languageModal .form-check-input {
    background-color: var(--lightgrey-bg);
    border: 1px solid var(--secondary-background-color);
} */

.languageModal input[type=radio] {
    width: 20px;
    height: 20px;
}

.languageModal .selectLang label {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    height: 100%;
}

.wrap-for-scroll {
    overflow-y: auto;
    overflow-x: clip;
    padding: 10px;
    height: calc(100vh - 435px);
}

.udo_option {
    position: relative;
}

.udo_optionbutton {
    /* opacity: 0; */
    display: none;
    position: absolute;
    z-index: 200;
    background: #6D8094;
    width: 225px;
    padding: 11px;
    justify-content: space-between;
    /* display: inline-flex; */
    align-items: center;
    border-radius: 6px;
    font-size: 14px;
    left: 20px;
    color: #fff;
    bottom: 16px;

}

.udo_optionbutton span {
    cursor: pointer;
    color: #001C36;
    background: #fff;
    padding: 6px 20px;
    border-radius: 6px;
}

.customTooltip {
    pointer-events: none !important;
    position: fixed !important;

}

.customTooltip.show {
    opacity: 1;
}

.customTooltip .tooltip-inner {
    background: var(--main-text-color) !important;
    min-height: 100px;
    width: 200px;
    border-radius: 6px;
    color: var(--main-background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.customTooltip .tooltip-arrow:before {
    border-left-color: var(--main-text-color) !important;
}

.reportModalTooltip {
    pointer-events: none !important;
    position: fixed !important;
}

.reportModalTooltip.show {
    opacity: 1;
}

.reportModalTooltip .tooltip-inner {
    background: var(--main-text-color) !important;
    min-height: 100px;
    width: 200px;
    border-radius: 6px;
    color: var(--main-background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.reportModalTooltip .tooltip-arrow:before {
    border-top-color: var(--main-text-color) !important;
}




/* start mobile view design  */
.correctBar,
.showOnMobile {
    display: none;
}

.overlaping {
    width: 270px;
}

.sugsClosed {
    display: none;
}

.popOverMobile {
    position: fixed !important;
    background-color: var(--main-background-color);
    padding: 0px !important;
}

.bs-popover-bottom>.popover-arrow::after {
    border-bottom-color: var(--main-background-color);
}

@media only screen and (max-width: 1400px) {
    .overlaping {
        position: absolute;
        background: var(--main-background-color);
        right: 0;
        top: 0px;
        padding: 0px 10px;
        height: calc(100vh - 130px);
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        z-index: 98;
        transform: translate3d(0);
        transition: 0.5s ease-in-out;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .HideAssistant {
   
    top: 5px !important;
    z-index: 99 !important;
    /* background-color: #6D8094; */
}

    .overlaping.sugsClosed {
        transform: translate3d(300px, 0, 0);
        transition: 0.5s ease-in-out;
        display: block;
    } 
}

/* end mobile view design  */

/* responisve screen start  */
@media only screen and (max-width: 1366px) {

    .contentUploaded,
    .all-accordains .accordion-body,
    .delete_AND_Dictionary span,
    .word-CounterPart,
    .Correction-box,
    .CheckPlagiarismBTN button,
    .coversuggestionBox strong,
    .AllSuggestionBox,
    .accuracyPart p,
    .udo_optionbutton,
    .realword,
    .CutWord,
    .all-accordains .accordion-item .accordion-button .textColor,
    .all-accordains .accordion-item .accordion-body .word-design {
        font-size: 12px;
    }

    .editortools1 svg,
    .editortools2 svg,
    .editortools3 svg {
        /* margin-right: 4px; */
        width: 17px;
    }

    .HideAssistant {
       
        z-index: 99;
        /* background-color: #6D8094; */
    }

    .CorrectAll {
        padding: 7px 8px;
        margin: 0px 6px;
    }

    .overlaping {
        position: absolute;
        background: var(--main-background-color);
        right: 0;
        top: 0px;
        padding: 0px 10px;
        height: calc(100vh - 130px);
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        z-index: 98;
        transform: translate3d(0);
        transition: 0.5s ease-in-out;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .overlaping.sugsClosed {
        transform: translate3d(300px, 0, 0);
        transition: 0.5s ease-in-out;
        display: block;
    }

    .all-accordains .accordion-item .accordion-button {
        padding: 10px;
    }

    .all-accordains .accordion-item .accordion-button::after {
        background-size: 70% 100%;
    }

    .delete_AND_Dictionary svg {
        margin-right: 6px;
        width: 16px;
    }

    .suggestionBox {
        margin: 10px 0px;
    }


    .accuracyPart svg {
        width: 20px;
    }

    /* .coversuggestionBox {
        height: 110px;
    } */

    .File-upload-Section {
        padding: 10px;
        height: calc(100vh - 400px);
    }


    .File-upload-Section .dragZONE strong,
    .File-upload-Section .dragZONE p {
        font-size: 14px;
    }

    .main-recentfiles {
        height: 230px;
    }

    .nothingToCheck svg {
        width: 200px;
    }

    .wrap-for-scroll {
        height: calc(100vh - 370px);
    }

    .submitGrammerbutton{
        display: flex;
    }
    .submitGrammerbutton button{
        width: 50% !important;
    }
}

@media only screen and (max-width: 992px) {
    .main-sidebar {
        display: none;
    }

    .list-view {
        height: auto;
    }

    .list-view strong,
    .list-view .innerlist p {
        width: auto;
        white-space: pre-wrap;
    }

    .all-accordains {
        width: 270px;
        height: calc(100vh - 300px);
    }

    .nothingToCheck {
        width: 270px;
    }

    .submitGrammerbutton button{
        width: 260px !important;
    }

}


@media only screen and (max-width: 767.5px) {

    /* start mobile view design  */
    .correctBar {
        margin-top: 5px;
        display: flex;
        width: 100%;
        padding: 10px;
        background: var(--main-background-color);
        justify-content: space-between;
        align-items: center;
        border-radius: 6px;
        color: var(--main-text-color);
        font-size: 12px;
    }

    .intentBtn{
        width: 100%;
    }

    .correctBar span {
        cursor: pointer;
        color: #fff;
        background: #29CF8E;
        padding: 6px 20px;
        border-radius: 6px;
    }

    .showOnMobile {
        display: block;
    }

    .gram .contentArea {
        height: calc(100vh - 167px) !important; 
    }

        .gram .editr-area{
            height: calc(100vh - 295px);
        }

    /* start mobile view design  */


    .toolsDropdown,
    .CheckPlagiarismBTN {
        display: none;
    }





    .Section-divided strong {
        font-size: 13px;
        margin: 5px;
    }

    .udo_option,
    .HideAssistant {
        display: none !important;
    }

    .contentUploaded {
        height: calc(100vh - 462px);
        margin-top: 5px;
    }


    .coversuggestionBox {
        height: inherit;
        border-bottom: 0px;

    }

    .suggestionBox {
        margin: 5px 0px;
    }

}

@media only screen and (max-width: 576px) {
   
    .word-CounterPart {
        display: flex;
        flex-wrap: wrap;
        justify-content: inherit;
        height: auto;
    }

    .word-CounterPart span {
        margin-right: 20px;
        font-size: 14px;
        /* margin-bottom: 5px; */
    }

    .recent-files {
        width: 100%;
        height: auto;
    }

    .recent-files p {
        -webkit-line-clamp: 2;
    }

    .gridLIST {
        display: none;
    }

}

@media only screen and (max-width: 472px) {

    .submitGrammerbutton button {
        width: 100%
    }

    .toolarea {
        padding: 10px;
    }

    .main-recentfiles {
        height: 230px;
    }

    .toolsDropdown,
    .toolsDropdown .dropdown-toggle {
        width: 100%;
        margin: 2px 0px !important;

    }

    .Section-divided {
        padding: 0
    }

    .Upload-Option strong {
        font-size: 16px;
    }

    .Upload-Option p {
        font-size: 14px;
    }

    .UploadDrivs svg {
        width: 33px;
        height: 33px;
    }

    .UploadDrivs button {
        font-size: 14px;
    }

}