:root {
    --readabler-bg: #ffffff;
    --readabler-bg-dark: #fff;
    --readabler-text: #000;
    --readabler-text-dark: #000;
    --readabler-color: #939393;
    --readabler-color-dark: #30906A;
    --readabler-color-transparent: #f2f2f2;
    --readabler-color-transparent-dark: #f2f2f2;
    --readabler-border-radius: 20px;
    --readabler-animate: 600ms;
    --readabler-overlay: rgba( 0, 0, 0, .4 );
    --readabler-btn-margin: 0;
    --readabler-btn-padding: 0;
    --readabler-btn-radius: .4375rem 0 0 .4375rem;
    --readabler-btn-color: #ffffff;
    --readabler-btn-color-hover: #fff;
    --readabler-btn-bg: #30906A;
    --readabler-btn-bg-hover: #287958;
    --readabler-btn-size: 36px;
    --readabler-btn-delay: 0s;
    --readabler-keyboard-light-bg: #ececec;
    --readabler-keyboard-light-key-bg: #ffffff;
    --readabler-keyboard-light-key: #111111;
    --readabler-keyboard-dark-bg: #000000CC;
    --readabler-keyboard-dark-key-bg: rgba( 0, 0, 0, .5 );
    --readabler-keyboard-dark-key: #ffffff;
    --readabler-text-magnifier-bg-color: #333333;
    --readabler-text-magnifier-color: #ffffff;
    --readabler-text-magnifier-font-size: 36px;
    --readabler-highlight-titles-style: solid;
    --readabler-highlight-titles-color: #639af9;
    --readabler-highlight-titles-width: 2px;
    --readabler-highlight-titles-offset: 2px;
    --readabler-highlight-links-style: solid;
    --readabler-highlight-links-color: #639af9;
    --readabler-highlight-links-width: 2px;
    --readabler-highlight-links-offset: 2px;
    --readabler-reading-guide-width: 500px;
    --readabler-reading-guide-height: 17px;
    --readabler-reading-guide-radius: 10px;
    --readabler-reading-guide-bg: #0274e6;
    --readabler-reading-guide-border-width: 7px;
    --readabler-reading-guide-border-color: #000000;
    --readabler-reading-guide-arrow: 10px;
    --readabler-reading-guide-arrow-margin: -10px;
    --readabler-reading-mask: rgba(0, 0, 0, 0.7);
    --readabler-highlight-hover-style: solid;
    --readabler-highlight-hover-color: #639af9;
    --readabler-highlight-hover-width: 2px;
    --readabler-highlight-hover-offset: 2px;
    --readabler-highlight-focus-style: solid;
    --readabler-highlight-focus-color: #639af9;
    --readabler-highlight-focus-width: 2px;
    --readabler-highlight-focus-offset: 2px;
    --readabler-tts-bg: rgba(33, 150, 243, 1);
    --readabler-tts-color: rgba(255, 255, 255, 1);
}

#mdp-readabler-overlay {
    transition: background-color .25s;
}

#mdp-readabler-popup-box {
    font-family: 'Noto Sans Thai', sans-serif !important;
    font-weight: 400;
}

.mdp-readabler-action-box .mdp-readabler-action-box-content .mdp-readabler-title {
    font-size: 1rem;
}

#mdp-readabler-popup-close:before {
    content: "\f00d";
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}

#mdp-readabler-popup-reset, 
#mdp-readabler-popup-close {
    border-radius: 100%;
}

.mdp-readabler-trigger-button-box button {
    cursor: pointer;
    width: 60px;
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mdp-readabler-trigger-button-box.top-right {
    top: 8rem !important;
}

#mdp-readabler-popup-box.mdp-readabler-modal-fixed #mdp-readabler-popup {
    top: 8rem !important;
    left: unset !important;
    bottom: unset !important;
    right: 0 !important;

    transition: right .25s;
    border-radius: .4375rem 0 0 .4375rem;
}

#mdp-readabler-popup #mdp-readabler-popup-header {
    cursor: unset !important;
    background-color: var(--readabler-btn-bg);
    background-image: unset !important;
    height: 60px !important;
    padding-top: unset !important;
}

#mdp-readabler-popup-header{
    background-color: #30906A !important;
}

#mdp-readabler-popup-container-heading {
    display: flex;
    align-items: center;
}
#mdp-readabler-popup-heading-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 60px;
    height: 60px;
    margin: 0;
    font-size: 24px;
}
#mdp-readabler-popup-heading-icon > svg {
    fill: #ffffff !important;
    display: block;
    height: 60%;
    width: auto;
}
#mdp-readabler-popup #mdp-readabler-popup-header h3 {
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff !important;
    margin: unset !important;
}
#mdp-readabler-popup #mdp-readabler-popup-reset:before, #mdp-readabler-sidebar #mdp-readabler-popup-reset:before,
#mdp-readabler-popup #mdp-readabler-popup-close:before, #mdp-readabler-sidebar #mdp-readabler-popup-close:before {
    color: #fff !important;
}
#mdp-readabler-popup #mdp-readabler-popup-reset:hover, #mdp-readabler-popup #mdp-readabler-popup-reset:focus, #mdp-readabler-sidebar #mdp-readabler-popup-reset:hover, #mdp-readabler-sidebar #mdp-readabler-popup-reset:focus,
#mdp-readabler-popup #mdp-readabler-popup-close:hover, #mdp-readabler-popup #mdp-readabler-popup-close:focus, #mdp-readabler-sidebar #mdp-readabler-popup-close:hover, #mdp-readabler-sidebar #mdp-readabler-popup-close:focus {
    outline: 2px dotted #fff !important;
}
.mdp-readabler-subheader {
    display: none !important;
}
.mdp-readabler-action-box:not(.mdp-readabler-shortcode) {
    padding: 8px !important;
    height: 100%;
    min-height: unset;
    margin-top: 8px !important;
    flex-direction: row;
    justify-content: space-between;
}
.mdp-readabler-action-box .mdp-readabler-action-box-content {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.mdp-readabler-toggle-box {
    width: calc(50% - 4px);
}
.mdp-readabler-input-spinner-box {
    width: 75%;
}
#mdp-readabler-popup-main {
    padding: 0 0 23.5px 0;
}
.mdp-readabler-action-box .mdp-readabler-action-box-content .mdp-readabler-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 0;
}

#mdp-readabler-popup-footer {
    display: none;
}

/* Custom Reset Button */
#mdp-readabler-popup-reset {
    background: transparent;
    border: 0;
    padding: 10px;
    margin-right: 10px;
}
#mdp-readabler-popup-reset:before {
    content: "\f2ea";
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}
#mdp-readabler-popup #mdp-readabler-popup-reset:focus,
#mdp-readabler-sidebar #mdp-readabler-popup-reset:focus {
    outline: none !important;
}
#mdp-readabler-popup #mdp-readabler-popup-reset:before,
#mdp-readabler-sidebar #mdp-readabler-popup-reset:before {
    color: var(--readabler-text);
}
#mdp-readabler-popup #mdp-readabler-popup-reset:hover, #mdp-readabler-popup #mdp-readabler-popup-reset:focus,
#mdp-readabler-sidebar #mdp-readabler-popup-reset:hover,
#mdp-readabler-sidebar #mdp-readabler-popup-reset:focus {
    outline: 2px dotted var(--readabler-text);
}
#mdp-readabler-popup #mdp-readabler-popup-reset:before,
#mdp-readabler-sidebar #mdp-readabler-popup-reset:before {
    color: var(--readabler-text-dark);
}
#mdp-readabler-popup #mdp-readabler-popup-reset:hover, #mdp-readabler-popup #mdp-readabler-popup-reset:focus,
#mdp-readabler-sidebar #mdp-readabler-popup-reset:hover,
#mdp-readabler-sidebar #mdp-readabler-popup-reset:focus {
    outline: 2px dotted var(--readabler-text-dark);
}



