:root {
  --client-primary-color: #101237;
  --client-secondary-color: #FFFFFF;
  --primary-color: #101237;
  --secondary-color: #FFFFFF;
  --custom-tooltip-percentage: -50%;
}

#tolkie-embed-body * {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: transparent;
  text-align: -webkit-center;
  text-align: -moz-center;
  overflow: hidden;
}

.loading, .loading button, .loading select, .loading label, .loading input, .loading .slider {
  cursor: progress !important;
}

.error, .error button, .error select, .error label, .error input, .loading .slider:before {
  cursor: not-allowed !important;
}

.tol-tooltipbottom {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-justify-content: space-between;
      justify-content: space-between;
  margin-top: 10px;
}

.tol-tooltipbutton {
  color: #535353;
  background: #CCCCCC;
  border: 3px solid #b2b2b2;
  border-radius: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 38px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 5px!important;
  padding-right: 5px;
  font-family: 'Roboto', sans-serif;
  width: 150px;
  font-size: 16px;
}

#tol-summarize.tol-tool-activated,
#tol-tts-btn.tol-tool-activated,
#tol-fontselector.tol-tool-activated {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

#tol-tts-btn-image {
  width: 22px;
  height: 40px;
}

#tol-white-plus,
.tol-white-minus {
  height: 40px;
}

#tol-summarize-icon,
#tol-fontsize-icon {
  height: 40px;
  width: 25px;
}

#tol-close-btn-image {
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tol-white-t {
  height: 40px;
  width: 18px;
}

.tol-activate-button {
  height: 30px;
}

.tolkie-toolbar {
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  position: absolute;
  bottom: 30px;
  right: 30px;
  display: flex;
  justify-content: flex-end;
  background: var(--client-primary-color);
  transition: 0.3s ease all;
  border: 1px solid #DDDDDD;
  cursor: pointer;
}

.tolkie-toolbar.extended {
  background: #FFF;
  width: -webkit-max-content;
  width: max-content;
  cursor: unset;
  overflow: visible;
}

.tolkie-toolbar-inner{
  display: flex;
  justify-content: flex-end;
  width: fit-content;
  position: relative;
}

.tolkie-toolbar-inner button {
  cursor: pointer;
}

.tolkie-toolbar.extended .tol-tool-button:not(:first-child){
  margin-left: 10px;
}

.tolkie-toolbar .tol-tool-button:not(:last-child) {
  display: none;
}

.tolkie-toolbar.extended .tol-tool-button:not(:last-child) {
  display: block;
}

.tolkie-toolbar .tol-tool-button:last-child {
  position: relative;
}

.tolkie-toolbar.extended .tol-tool-button:last-child {
  display: none;
}

.tol-tool-button.disabled img {
  opacity: 0.2;
  cursor: not-allowed;
}
.tol-tool-button.disabled {
  cursor: not-allowed;
}

/* Do Not delete These Classes */
.tol-tool-button .tol-white-question-mark {}
.tol-tool-button .tol-summarize-icon {}
.tol-tool-button .tol-fontsize-icon {}
.tol-tool-button .tol-white-plus {}
.tol-tool-button .tol-white-minus {}
.tol-tool-button .tol-white-t {}
.tol-tool-button .tol-tts-button {}

.tol-tool-button {
  height: 40px;
  width: 40px;
  border-radius: 5px;
  background: #E9E9E9;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  color: #141948;
  padding: 0;
}

.tol-readability-button {
  background: var(--client-primary-color);
  position: absolute;
  transition: 0.3s ease all;
  border-radius: 0;
}

.tol-close-btn {
  position: relative;
  background: #C92020;
  color: white;
}

.tol-close-btn img {
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tolkie-toolbar.extended .tol-readability-button {
  visibility: hidden;
  opacity: 0;
}

.tol-bar-wrapper {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 7px 22px;
  font-family: 'Roboto', sans-serif;
  /*width: 63px;*/
  bottom: 0;
  position: absolute;
  margin-bottom: 20px;
  margin-right: 20px;
  right: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 1.5px solid #CCCCCC;
}

.tol-bar-wrapper > div > div{
  display: inline-block;
}

.tol-bar-wrapper > div:not(:first-child){
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.tol-bar-wrapper .right-pair {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#tolkie-custom-tooltip {
  font-size: 11px;
  position: relative;
  width: fit-content;
  top: -75px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-color);
  padding: 5px 8px;
  border-radius: 10px;
  color: #fff;
  white-space: nowrap;
}

#tolkie-custom-tooltip::after {
  content: '';
  border-top: solid 6px var(--primary-color);
  border-left: solid 6px transparent;
  border-right: solid 6px transparent;
  position: absolute;
  bottom: -6px;
  left: var(--custom-tooltip-left);
  transform: translateX(var(--custom-tooltip-percentage));
}

#tolkie-toolbar-375px {
  bottom: 10px;
  right: 10px;
}

#tolkie-toolbar-330px {
  bottom: 10px;
  right: 4px;
}

#tolkie-toolbar-320px {
    bottom: 10px;
    right: 1px;
    padding: 7px;
}

#alert-banner {
  display: none;
  position: absolute; 
  width: 1px; 
  height: 1px; 
  overflow: hidden; 
  clip: rect(1px, 1px, 1px, 1px);
}