aside.ai-toolbox .ai-control-box-text-indicator{
    margin-top: -10px;
    font-size: 15px;
}

aside.ai-toolbox .custom-range {
    height: 1.25rem;
}

/* Chrome/Safari/Edge (Blink/WebKit) */
aside.ai-toolbox .custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 15px;
    border-radius: 50px;
    background: #007bff;
    border: 0;
    margin-top: -3px;
    box-shadow: 0 0 0 2px #fff inset;
}

/* Firefox */
aside.ai-toolbox .custom-range::-moz-range-thumb {
    width: 28px;
    height: 15px;
    border-radius: 50px;
    background: #007bff;
    border: 0;
    box-shadow: 0 0 0 2px #fff inset;
}

.ai-control-box p {
    font-size: 14px;

}

.ai-control-box b.control-value {
    font-weight: bold;

}

.ai-toolbox hr {
    margin: 5px 0;
}

.ai-ckeditor .ck-editor__editable {
    min-height: 70vh;
}

/* Added by Alejandro */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

#readability_results_div img[alt="hli readseasy"] {
    width: 75px;
}

body {
    margin: 0;
    height: 100%;
    font-size: larger;
    font-weight: 300 !important;
}

#fldSuggestions {
    /* width:336px; */
    /* height:84px; */
    top: 127px;
    left: 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
}

#fldSuggestions option {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*cke_66* is the language selector in this case, it is required by the spellCheck, so we need to hide it via css, the order of the button can change, then we need to change the number here */
.cke_button__language,
.cke_button__save {
    display: none !important;
}

/* Changes to improve CKEditor5 */
.ck-editor__editable {
    min-height: 200px;
}

.ck-powered-by-balloon {
    opacity: 0;
}

.btn-hla-cke-plugin {
    background-color: #8dd5f1 !important;
    color: #333333 !important;
    font-weight: bold !important;
    font-size: 12px !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
    0 2px 10px 0 rgba(0, 0, 0, 0.12);
    margin: 0 6px !important;
}

.btn-hla-cke-plugin:hover {
    background-color: #e9ebed !important;
}

/* #advisor_form_group .ck-content {
    height: 550px;
    resize: vertical;
} */

.ck-button {
    cursor: pointer !important;
}

.ck-content .marker-blue,
.ck-content .marker-green,
.ck-content .marker-pink,
.ck-content .marker-yellow,
.ck-content .pen-red {
    border-radius: 0 !important;
    padding: 0 !important;
}

#editor1 + .ck-editor .ck-toolbar {
    background-color: #e3f2fd !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.25rem !important;
    z-index: 1040 !important;
}

#editor1 + .ck-editor .ck-toolbar .ck-button:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

#editor1 + .ck-editor .ck-sticky-panel__content {
    border: 0 !important;
    margin-bottom: 1rem !important;
    box-shadow: none !important;
    top: 6rem !important;
}

#editor1 + .ck-editor .ck-sticky-panel__content_sticky {
    border-bottom: 1px solid #ccc !important;
    border-radius: 0 !important;
}

#editor1 + .ck-editor .ck-editor__main .ck-content {
    border-radius: 0.25rem !important;
    width: calc(100% - 0.25rem) !important;
    aspect-ratio: 8.5/11 !important;
    padding: 4rem !important;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.12) !important;
    border: 0 !important;
    margin: 0 0.125rem !important;
}

#editor1 + .ck-editor .ck-editor__main .ck-content > :first-child {
    margin-top: 0 !important;
}

.ck-context-menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    border-radius: 0.25rem;
    background-color: #fff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.22);
    z-index: 9998;
}

.ck-context-menu:not(.show) {
    display: none;
}

.ck-context-menu .ck-context-menu-item {
    display: flex;
    align-items: center;
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.3s;
    border: 1px solid transparent;
}

.ck-context-menu .ck-context-menu-item .ck-context-menu-icon {
    width: 1.5rem;
    height: 1.5rem;
    max-width: 1.5rem;
    max-height: 1.5rem;
}

.ck-context-menu .ck-context-menu-item .ck-context-menu-label {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

.ck-context-menu .ck-context-menu-item:hover {
    background-color: #f2f2f2;
}

.ck-context-menu .ck-context-menu-separator {
    border-top: 1px solid #ccc;
    margin: 0.25rem 0;
}

/* End Changes to improve CKEditor5 */

.btn-info {
    background-color: #3362e5 !important;
}

.custom-select {
    height: 1.5rem;
    padding: 0.01rem 1.5rem 0.1rem 0.3rem;
}

.btn {
    text-transform: none !important;
    font-size: 1.1rem !important;
}

.btn .fas,
i.fab {
    font-size: 1.1rem !important;
}

.myProgress {
    /* display: none; */
    height: 1.8rem;
    font-size: 1.25rem;
    font-weight: 500;
}

.progress {
    height: 1.8rem;
    font-size: 1.25rem;
    font-weight: 500;
}

#myProgress {
    width: 20%;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: fixed;
    margin-left: -18% !important;
    margin-top: -20% !important;
    box-shadow: inset 0px 4px 6px #ccc;
    height: 1.8rem;
    font-size: 1.25rem;
    font-weight: 500;
}

#myBar {
    width: 0%;
    height: 30px;
    color: #000;
    box-shadow: inset 0px 4px 6px rgba(100, 100, 100, 0.6);
}

/* replace inline functionality */
#dropdown-menu-replaceInline {
    display: none;
    position: fixed;
    padding: 0.5rem;
    background-color: #fff;
    border-radius: 0.375rem;
    transform: translateY(1.5rem);
    max-width: 20rem;
}

#dropdown-menu-replaceInline .dropdown-menu-header {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    margin: 0;
    border-radius: 0.25rem;
    background-color: #e3f2fd;
    color: #333;
    height: fit-content;
    width: 100%;
    margin-bottom: 0.125rem;
}

#dropdown-menu-replaceInline .dropdown-header-title {
    text-decoration: line-through;
    font-style: italic;
}

#dropdown-menu-replaceInline > .dropdown-item {
    position: relative;
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0.25rem 0.75rem;
    margin: 0;
    border-radius: 0.25rem;
    cursor: pointer;
    background-color: #fff;
    color: #333;
    height: fit-content;
    width: 100%;
}

#dropdown-menu-replaceInline > .dropdown-item + .dropdown-item {
    margin-top: 0.125rem;
}

#dropdown-menu-replaceInline > .dropdown-item:hover {
    background-color: #f2f2f2;
}

#dropdown-menu-replaceInline > .dropdown-placeholder {
    background-color: #fff !important;
}

#dropdown-menu-replaceInline > .dropdown-item > a {
    color: inherit;
    text-decoration: none;
    white-space: wrap;
}

/* end replace inline functionality */

/* Navbar custom style */
.navbar.navbar-dark .navbar-nav .nav-item.active > .nav-link {
    background-color: #3362e5;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    border-radius: 0.125rem;
}

a.nav-link:hover {
    background-color: #3362e5;
    border-radius: 0.125rem;
    color: white;
}

/* end navbar custom style */

table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
    bottom: 0.5em;
}

/* Table styles */
.card.card-cascade.narrower .view.view-cascade {
    margin-top: -1.25rem;
}

.card.card-cascade .view.view-cascade {
    border-radius: 0.25rem;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18),
    0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.btn-rounded {
    border-radius: 10em;
}

#advisor-top-buttons {
    margin-top: -0.375rem;
}

.cke_button__mycommand_label,
.cke_button__highlight_label,
.cke_button__readability_label,
.cke_button__save_document_label,
.cke_button__ai_simplification_label {
    display: inline !important;
    font-weight: bold !important;
}

a.cke_button__mycommand:hover,
a.cke_button__highlight:hover,
a.cke_button__readability:hover,
a.cke_button__save_document:hover,
a.cke_button__ai_simplification:hover {
    background: #e9ebed !important;
}

a.cke_button__mycommand,
a.cke_button__highlight,
a.cke_button__readability,
a.cke_button__save_document,
a.cke_button__ai_simplification {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
    0 2px 10px 0 rgba(0, 0, 0, 0.12);
    border: 0;
    border-radius: 0.125rem;
    margin: 0.375rem !important;
    background: #33b5e57d !important;
    color: white !important;
}

table.diff th.author {
    opacity: 0;
}

#save-document {
    background-color: #0b9444 !important;
}

/* .spinner-green {
  color: #0b9444 !important;
} */

.hr_bold {
    border-top: 2px solid;
}

@media (min-width: 414px) {
    #materialUnchecked {
        margin-left: -2.25rem;
    }
}

/* Hide when print */
@media print {
    .progress,
    .printButton,
    .myProgress,
    #btnTop,
    #Embed {
        display: none;
    }

    #reda_certified {
        margin-left: -20mm;
    }
}

/* End Added by Alejandro */

/* Card Loading */
.loading {
    opacity: 0.5;
}

.loading .disabled {
    pointer-events: none;
}

/* Readability */
#readability_results {
    width: fit-content;
}

#readability_results label {
    margin-bottom: 0;
}

.readability-result {
    display: flex;
    align-items: center;
}

.readability-result .readability-reads-easy {
    display: none;
    margin-left: 0.5rem;
    width: 5rem;
}

.readability-result .readability-value,
.readability-result .readability-grade-name {
    color: red;
}

.readability-result.readability-valid .readability-reads-easy {
    display: block;
}

.readability-result.readability-valid .readability-value,
.readability-result.readability-valid .readability-grade-name {
    color: green;
}

.app-logo {
    max-width: 9rem !important;
    height: auto !important;
}

.navbar-nav button.btn-link {
    font-size: 23px !important;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.navbar-nav button.btn-link:hover {
    background-color: #3362e5;
    border-radius: 0.125rem;
}