:root {
    --border-color: #ff0000;
    --light-mode-color: rgba(255, 255, 255, 0.2);
    --dark-mode-color: #111;
    --standard-mode-color: #f0f0f0;
}

/* ================================= borders ============================= */
.notbot-rounded {border-radius: 4px;}
.notbot-rounded-btn {border-radius: 30px;}
.notbot-square {border-radius: 0;}
.notbot-b-dotted {border: 1px;border-style: dotted;border-color: var(--border-color);}
.notbot-b-dashed {border: 1px;border-style: dashed;border-color: var(--border-color);}
.notbot-b-solid {border: 1px;border-style: solid;border-color: var(--border-color);}
.notbot-b-double {border: 1px;border-style: double;border-color: var(--border-color);}
.notbot-b-groove {border: 1px;border-style: groove;border-color: var(--border-color);}
.notbot-b-ridge {border: 1px;border-style: ridge;border-color: var(--border-color);}
.notbot-b-inset {border: 1px;border-style: inset;border-color: var(--border-color);}
.notbot-b-outset {border: 1px;border-style: outset;border-color: var(--border-color);}
.notbot-b-none {border: 1px;border-style: none;border-color: var(--border-color);}
.notbot-b-hidden {border: 1px;border-style: hidden;border-color: var(--border-color);}
.notbot-b-mix {border: 1px;border-style: dotted dashed solid double;border-color: var(--border-color);}

/* ================================= Common css =============================== */

.notbot p{margin-bottom: 0;}
.notbot, .notbot a, .notbot input{color: var(--text-color);border-radius: unset !important;text-decoration: none;}
.notbot, .notbot a:hover{color: var(--text-color);}
.notbot-widget {right: 60px;margin: 0;bottom: 31px;position: fixed;z-index: 9;}
.notbot-widget a {text-decoration: none;}
.notbot-hide {display: none !important;}
.notbot .notbot-container {position: fixed;bottom: 94px;right: 60px;width: 340px;height: 540px;box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.2);max-width: 100%;z-index: 999;}
.notbot .notbot-popup {-ms-overflow-style: none;scrollbar-width: none;overflow-y: scroll; margin: 33px 0px 0;height: 507px;padding: 0 20px;}
.notbot .notbot-popup::-webkit-scrollbar {display: none;}
.notbot .notbot-title {margin:0;font-weight: 500;font-size: 32px;margin-bottom: 10px;line-height: 36px;}
.notbot .notbot-content {margin-bottom: 30px;}
.notbot .notbot-content p {margin:0;font-weight: 300;font-size: 16px;letter-spacing: 1.1px;line-height: 20px;}
.notbot .notbot-searchbox {margin:0;width: 100%;max-width: 100%;padding: 5px 0;font-size: 22px;border: none;border-bottom: 1px solid;font-weight: 300;background-color: transparent;border-bottom-color: var(--search-color);line-height: 26px;}
.notbot .notbot-searchbox::placeholder {opacity: 0.4;letter-spacing: 1px;}
.notbot .notbot-searchbox:-ms-input-placeholder {opacity: 0.4;}
.notbot .notbot-searchbox::-ms-input-placeholder {opacity: 0.4;}
.notbot .notbot-searchbox:focus-visible {outline: none;}



.notbot .notbot-search-area {margin-bottom: 30px;}
.notbot .notbot-search-area form {margin-bottom: 30px;}
.notbot .notbot-single-search-result:not(:last-child) {margin-bottom: 10px;}
.notbot .notbot-single-search-result {padding: 11px 16px;box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);}
.notbot .notbot-single-search-result p {font-weight: 700;}
.notbot .notbot-widget a {padding: 12px 16px;}
.notbot .notbot-search-results {margin-bottom: 30px;}
.notbot .notbot-single-post {padding: 12px 16px;display: flex;flex-direction: column;justify-content: space-between;flex-wrap: nowrap;height: 130px;background-color: var(--main_assent-color);margin-right: 15px;}
.notbot .notbot-post-title {font-size: 14px;}
.notbot .notbot-single-post .notbot-btn {align-self: end;}
.notbot .notbot-single-post .notbot-play-btn {max-width: 16px;}
.notbot-que_cover{padding: 15px;margin-bottom: 10px;}
.notbot-question,
.notbot-answer {justify-content: space-between; position: relative;display: flex;align-items: center;cursor: pointer;font-style: normal;font-weight: 300;font-size: 14px;line-height: 18px;}
.notbot-question.active svg{transform: rotate(90deg);}
.notbot-question svg path{fill: var(--text-color);}
.notbot-answercont {max-height: 0;overflow: hidden;transition: 0.3s;}
.notbot-answer {padding: 10px 10px 20px;}
.notbot-widget a .notbot-open {font-weight: 400;}
.notbot-widget a .notbot-close {display: flex;align-items: center;}
.notbot .notbot-heading {font-weight: 300;line-height: 20px;margin: 30px 0px 15px;font-size: 12px;}

.notbot .notbot-widget a{display: flex;align-items: center;gap: 10px;}
.notbot-widget a .notbot-close svg {color: #000;border-radius: 50%;background-color: var(--notbot-widget-color);}
.notbot-open svg path {fill: var(--notbot-widget-color);}

/*=============== Dark mode css =================*/

.notbot.notbot-dark .notbot-container{background-color: var(--dark-mode-color);}

/*=============== Standard mode css =================*/

.notbot.notbot-standard .notbot-container {background-color: var(--standard-mode-color);}
.notbot.notbot-standard .notbot-que_cover, .notbot.notbot-light .notbot-que_cover{background-color: rgba(255, 255, 255, 0.8);box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);}
.notbot.notbot-standard .notbot-question::after {filter: invert(1);}

/*=============== light mode css =================*/

.notbot.notbot-light .notbot-container {background: var(--light-mode-color);}     
.notbot.notbot-light .notbot-question::after {filter: invert(1);}

/* ===================== Responsive Media ========================= */

@media only screen and (max-width: 449px) {
    .notbot .notbot-container{right: 0;width: 100%;height: 90%;}
    .notbot .notbot-popup{height: 90%;}
    .notbot-widget {right: 20px;}
}

/*==================== Search reasult globle css ======================*/
.notbot .notbot-single-search-result{background-color: var(--search-reasult-bg);}
.notbot .notbot-single-search-result a{color: var(--search-reasult-text);}

/*==================== Modal btn global css ======================*/
.notbot .notbot-widget a{color: var(--modal-btn-text-color);background-color: var(--modal-btn-bg-color);}