/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

 :root {
  --main-color: var(--textc);
  --body-bg-color: var(--primary);
  --errorWrapper-bg-color: rgba(169, 14, 14, 1);
  --progressBar-color: rgba(0, 96, 223, 1);
  --progressBar-indeterminate-bg-color: rgba(40, 40, 43, 1);
  --progressBar-indeterminate-blend-color: rgba(20, 68, 133, 1);
  --scrollbar-color: rgba(121, 121, 123, 1);
  --scrollbar-bg-color: rgba(35, 35, 39, 1);
  --toolbar-icon-bg-color: rgba(255, 255, 255, 1);
  --toolbar-icon-hover-bg-color: rgba(255, 255, 255, 1);

  --sidebar-narrow-bg-color: rgba(42, 42, 46, 0.9);
  --sidebar-toolbar-bg-color: var(--primary);
  --toolbar-bg-color: var(--primary);
  --toolbar-border-color: rgba(12, 12, 13, 1);
  --button-hover-color: var(--primary);
  --toggled-btn-color: var(--textc);
  --toggled-btn-bg-color: var(--secondary);
  --toggled-hover-active-btn-color: var(--secondary);
  --dropdown-btn-bg-color: var(--secondary);
  --separator-color: var(--secondary)50;
  --field-color: var(--textc);
  --field-bg-color: var(--secondary);
  --field-border-color: var(--secondary);
  --findbar-nextprevious-btn-bg-color: var(--secondary);
  --treeitem-color: rgba(255, 255, 255, 0.8);
  --treeitem-hover-color: rgba(255, 255, 255, 0.9);
  --treeitem-selected-color: rgba(255, 255, 255, 0.9);
  --treeitem-selected-bg-color: rgba(255, 255, 255, 0.25);
  --sidebaritem-bg-color: rgba(255, 255, 255, 0.15);
  --doorhanger-bg-color: var(--primary);
  --doorhanger-border-color: var(--secondary);
  --doorhanger-hover-color: var(--textc);
  --doorhanger-hover-bg-color: var(--secondary);
  --doorhanger-separator-color: var(--secondary)50;
  --overlay-button-bg-color: var(--secondary);
  --overlay-button-hover-bg-color: var(--secondary);
  --speechToolbarButton-icon: url(dark-icons/headset.svg);
}

@media screen and (forced-colors: active) {
  :root {
    --button-hover-color: Highlight;
    --doorhanger-hover-bg-color: Highlight;
    --toolbar-icon-opacity: 1;
    --toolbar-icon-bg-color: ButtonText;
    --toolbar-icon-hover-bg-color: ButtonFace;
    --toggled-btn-color: HighlightText;
    --toggled-btn-bg-color: LinkText;
    --doorhanger-hover-color: ButtonFace;
    --doorhanger-border-color-whcm: 1px solid ButtonText;
    --doorhanger-triangle-opacity-whcm: 0;
    --overlay-button-border: 1px solid Highlight;
    --overlay-button-hover-bg-color: Highlight;
    --overlay-button-hover-color: ButtonFace;
    --field-border-color: ButtonText;
  }
}

body {
  background-color: var(--body-bg-color);
}

body,
input,
button,
select {
  scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
}

.pdfPresentationMode.pdfPresentationModeControls > *,
.pdfPresentationMode.pdfPresentationModeControls .textLayer span {
  cursor: default;
} 

#sidebarContainer {
  width: var(--sidebar-width);
  transition-duration: var(--sidebar-transition-duration);
  transition-timing-function: var(--sidebar-transition-timing-function);
}
html[dir='ltr'] #sidebarContainer {
  left: calc(0px - var(--sidebar-width));
  border-right: var(--doorhanger-border-color-whcm);
}
html[dir='rtl'] #sidebarContainer {
  transition-property: right;
  right: calc(0px - var(--sidebar-width));
  border-left: var(--doorhanger-border-color-whcm);
}

#sidebarContent {
  background-color: var(--secondary);
} 

#viewerContainer:not(.pdfPresentationMode) {
  transition-duration: var(--sidebar-transition-duration);
  transition-timing-function: var(--sidebar-transition-timing-function);
}

#toolbarSidebar {
  background-color: var(--sidebar-toolbar-bg-color);
}  

#toolbarContainer,
.findbar,
.secondaryToolbar {
  background-color: var(--toolbar-bg-color);
  box-shadow: 0 1px 0 var(--toolbar-border-color);
}

#loadingBar {
  background-color: var(--body-bg-color);
  border-bottom: 1px solid var(--toolbar-border-color);

  transition-duration: var(--sidebar-transition-duration);
  transition-timing-function: var(--sidebar-transition-timing-function);
}

html[dir='ltr'] #loadingBar {
  right: var(--loadingBar-end-offset);
}
html[dir='rtl'] #loadingBar {
  left: var(--loadingBar-end-offset);
}

html[dir='ltr'] #outerContainer.sidebarOpen #loadingBar {
  left: var(--sidebar-width);
}
html[dir='rtl'] #outerContainer.sidebarOpen #loadingBar {
  right: var(--sidebar-width);
}

#loadingBar .progress {
  background-color: var(--progressBar-color);
}

#loadingBar .progress.indeterminate {
  background-color: var(--progressBar-indeterminate-bg-color);
}

#loadingBar .progress.indeterminate .glimmer {
  background: repeating-linear-gradient(
    135deg,
    var(--progressBar-indeterminate-blend-color) 0,
    var(--progressBar-indeterminate-bg-color) 5px,
    var(--progressBar-indeterminate-bg-color) 45px,
    var(--progressBar-color) 55px,
    var(--progressBar-color) 95px,
    var(--progressBar-indeterminate-blend-color) 100px
  );
}

.findbar {
  background-color: var(--toolbar-bg-color);
}

.findbar .splitToolbarButton > .toolbarButton {
  background-color: var(--findbar-nextprevious-btn-bg-color);
  border-top: 1px solid var(--field-border-color);
  border-bottom: 1px solid var(--field-border-color);
}

html[dir="ltr"] .findbar .splitToolbarButton > .findNext {
  border-right: 1px solid var(--field-border-color);
}
html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
  border-left: 1px solid var(--field-border-color);
}

.findbar label:hover,
.findbar input:focus + label {
  color: var(--toggled-btn-color);
  background-color: var(--button-hover-color);
}

.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel {
  background-color: var(--toggled-btn-bg-color) !important;
  color: var(--toggled-btn-color);
}

#findInput[data-status="pending"] {
  background-image: var(--loading-icon);
}

.secondaryToolbar {
  background-color: var(--doorhanger-bg-color);
}

.doorHanger,
.doorHangerRight {
  box-shadow: 0 1px 5px var(--doorhanger-border-color),
    0 0 0 1px var(--doorhanger-border-color);
  border: var(--doorhanger-border-color-whcm);
}
.doorHanger:after,
.doorHanger:before,
.doorHangerRight:after,
.doorHangerRight:before {
  opacity: var(--doorhanger-triangle-opacity-whcm);
}
.doorHanger:after {
  border-bottom-color: var(--toolbar-bg-color);
}
.doorHangerRight:after {
  border-bottom-color: var(--doorhanger-bg-color);
}
.doorHanger:before,
.doorHangerRight:before {
  border-bottom-color: var(--doorhanger-border-color);
}

.overlayButton:hover,
.overlayButton:focus {
  background-color: var(--overlay-button-hover-bg-color);
}

.overlayButton:hover > span,
.overlayButton:focus > span {
  color: var(--overlay-button-hover-color);
} 

.splitToolbarButton > .toolbarButton:hover,
.splitToolbarButton > .toolbarButton:focus,
.dropdownToolbarButton:hover,
.toolbarButton.textButton:hover,
.toolbarButton.textButton:focus {
  background-color: var(--button-hover-color);
}

.splitToolbarButtonSeparator {
  background-color: var(--separator-color);
}

.findbar .splitToolbarButtonSeparator {
  background-color: var(--field-border-color);
}

.toolbarButton,
.dropdownToolbarButton,
.secondaryToolbarButton,
.overlayButton {
  color: var(--main-color);
}
.toolbarButton:hover,
.toolbarButton:focus {
  background-color: var(--button-hover-color);
}
.secondaryToolbarButton:hover,
.secondaryToolbarButton:focus {
  background-color: var(--doorhanger-hover-bg-color);
  color: var(--doorhanger-hover-color);
}

.toolbarButton.toggled,
.splitToolbarButton.toggled > .toolbarButton.toggled,
.secondaryToolbarButton.toggled {
  background-color: var(--toggled-btn-bg-color);
  color: var(--toggled-btn-color);
  box-shadow: 0 1px 1px hsl(0deg 0% 0% / 10%) inset, 0 0 1px hsl(0deg 0% 0% / 20%) inset, 0 1px 0 hsl(0deg 0% 100% / 5%);
}

.secondaryToolbarButton.toggled::before {
  background-color: var(--toggled-btn-color);
}

.toolbarButton.toggled::before {
  background-color: var(--toggled-btn-color);
}

.toolbarButton.toggled:hover:active,
.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
.secondaryToolbarButton.toggled:hover:active {
  background-color: var(--toggled-hover-active-btn-color);
}

.dropdownToolbarButton {
  width: var(--scale-select-container-width);
  background-color: var(--dropdown-btn-bg-color);
}
.dropdownToolbarButton::after {  
  -webkit-mask-image: var(--toolbarButton-menuArrow-icon);
  mask-image: var(--toolbarButton-menuArrow-icon);
}

.dropdownToolbarButton > select {
  width: calc(var(--scale-select-container-width) + var(--scale-select-overflow));
  color: var(--main-color);
  background-color: var(--dropdown-btn-bg-color);
}

.dropdownToolbarButton > select:hover,
.dropdownToolbarButton > select:focus {
  background-color: var(--button-hover-color);
  color: var(--toggled-btn-color);
}

.dropdownToolbarButton > select > option {
  background: var(--doorhanger-bg-color);
  color: var(--main-color);
}

.toolbarButton::before,
.secondaryToolbarButton::before,
.dropdownToolbarButton::after,
.treeItemToggler::before {
  /* All matching images have a size of 16x16
   * All relevant containers have a size of 28x28 */
  background-color: var(--toolbar-icon-bg-color);
}

.dropdownToolbarButton:hover::after,
.dropdownToolbarButton:focus::after,
.dropdownToolbarButton:active::after {
  background-color: var(--toolbar-icon-hover-bg-color);
}

.toolbarButton::before {
  opacity: var(--toolbar-icon-opacity);
}

.toolbarButton:hover::before,
.toolbarButton:focus::before,
.secondaryToolbarButton:hover::before,
.secondaryToolbarButton:focus::before {
  background-color: var(--toolbar-icon-hover-bg-color);
}

.secondaryToolbarButton::before {
  opacity: var(--doorhanger-icon-opacity);
}

.toolbarButton#sidebarToggle::before {
  -webkit-mask-image: var(--toolbarButton-sidebarToggle-icon);
  mask-image: var(--toolbarButton-sidebarToggle-icon);
}

.toolbarButton#secondaryToolbarToggle::before {
  -webkit-mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
  mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
}

.toolbarButton.findPrevious::before {
  -webkit-mask-image: var(--findbarButton-previous-icon);
  mask-image: var(--findbarButton-previous-icon);
}

.toolbarButton.findNext::before {
  -webkit-mask-image: var(--findbarButton-next-icon);
  mask-image: var(--findbarButton-next-icon);
}

.toolbarButton.pageUp::before {
  -webkit-mask-image: var(--toolbarButton-pageUp-icon);
  mask-image: var(--toolbarButton-pageUp-icon);
}

.toolbarButton.pageDown::before {
  -webkit-mask-image: var(--toolbarButton-pageDown-icon);
  mask-image: var(--toolbarButton-pageDown-icon);
}

.toolbarButton.zoomOut::before {
  -webkit-mask-image: var(--toolbarButton-zoomOut-icon);
  mask-image: var(--toolbarButton-zoomOut-icon);
}

.toolbarButton.zoomIn::before {
  -webkit-mask-image: var(--toolbarButton-zoomIn-icon);
  mask-image: var(--toolbarButton-zoomIn-icon);
}

.toolbarButton.presentationMode::before,
.secondaryToolbarButton.presentationMode::before {
  -webkit-mask-image: var(--toolbarButton-presentationMode-icon);
  mask-image: var(--toolbarButton-presentationMode-icon);
}

.toolbarButton.print::before,
.secondaryToolbarButton.print::before {
  -webkit-mask-image: var(--toolbarButton-print-icon);
  mask-image: var(--toolbarButton-print-icon);
}

.toolbarButton.openFile::before,
.secondaryToolbarButton.openFile::before {
  -webkit-mask-image: var(--toolbarButton-openFile-icon);
  mask-image: var(--toolbarButton-openFile-icon);
}

.toolbarButton.download::before,
.secondaryToolbarButton.download::before {
  -webkit-mask-image: var(--toolbarButton-download-icon);
  mask-image: var(--toolbarButton-download-icon);
}

.toolbarButton.bookmark::before,
.secondaryToolbarButton.bookmark::before {
  -webkit-mask-image: var(--toolbarButton-bookmark-icon);
  mask-image: var(--toolbarButton-bookmark-icon);
}

#viewThumbnail.toolbarButton::before {
  -webkit-mask-image: var(--toolbarButton-viewThumbnail-icon);
  mask-image: var(--toolbarButton-viewThumbnail-icon);
}

#viewOutline.toolbarButton::before {
  -webkit-mask-image: var(--toolbarButton-viewOutline-icon);
  mask-image: var(--toolbarButton-viewOutline-icon);
}

#viewAttachments.toolbarButton::before {
  -webkit-mask-image: var(--toolbarButton-viewAttachments-icon);
  mask-image: var(--toolbarButton-viewAttachments-icon);
}

#viewLayers.toolbarButton::before {
  -webkit-mask-image: var(--toolbarButton-viewLayers-icon);
  mask-image: var(--toolbarButton-viewLayers-icon);
}

#currentOutlineItem.toolbarButton::before {
  -webkit-mask-image: var(--toolbarButton-currentOutlineItem-icon);
  mask-image: var(--toolbarButton-currentOutlineItem-icon);
}

#viewFind.toolbarButton::before {
  -webkit-mask-image: var(--toolbarButton-search-icon);
  mask-image: var(--toolbarButton-search-icon);
}

.secondaryToolbarButton.firstPage::before {
  -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon);
  mask-image: var(--secondaryToolbarButton-firstPage-icon);
}

.secondaryToolbarButton.lastPage::before {
  -webkit-mask-image: var(--secondaryToolbarButton-lastPage-icon);
  mask-image: var(--secondaryToolbarButton-lastPage-icon);
}

.secondaryToolbarButton.rotateCcw::before {
  -webkit-mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
  mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
}

.secondaryToolbarButton.rotateCw::before {
  -webkit-mask-image: var(--secondaryToolbarButton-rotateCw-icon);
  mask-image: var(--secondaryToolbarButton-rotateCw-icon);
}

.secondaryToolbarButton.selectTool::before {
  -webkit-mask-image: var(--secondaryToolbarButton-selectTool-icon);
  mask-image: var(--secondaryToolbarButton-selectTool-icon);
}

.secondaryToolbarButton.handTool::before {
  -webkit-mask-image: var(--secondaryToolbarButton-handTool-icon);
  mask-image: var(--secondaryToolbarButton-handTool-icon);
}

.secondaryToolbarButton.scrollVertical::before {
  -webkit-mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
  mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
}

.secondaryToolbarButton.scrollHorizontal::before {
  -webkit-mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
  mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
}

.secondaryToolbarButton.scrollWrapped::before {
  -webkit-mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
  mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
}

.secondaryToolbarButton.spreadNone::before {
  -webkit-mask-image: var(--secondaryToolbarButton-spreadNone-icon);
  mask-image: var(--secondaryToolbarButton-spreadNone-icon);
}

.secondaryToolbarButton.spreadOdd::before {
  -webkit-mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
  mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
}

.secondaryToolbarButton.spreadEven::before {
  -webkit-mask-image: var(--secondaryToolbarButton-spreadEven-icon);
  mask-image: var(--secondaryToolbarButton-spreadEven-icon);
}

.secondaryToolbarButton.documentProperties::before {
  -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon);
  mask-image: var(--secondaryToolbarButton-documentProperties-icon);
}

.verticalToolbarSeparator {
  background-color: var(--separator-color);
}

.horizontalToolbarSeparator {
  border-top: 1px solid var(--doorhanger-separator-color);
}

.toolbarField {
  background-color: var(--field-bg-color);
  border-color: var(--field-border-color);
  color: var(--field-color);
}

.toolbarField.pageNumber.visiblePageIsLoading {
  background-image: var(--loading-icon);
}

.toolbarLabel {
  color: var(--main-color);
}


a:focus > .thumbnail > .thumbnailSelectionRing,
.thumbnail:hover > .thumbnailSelectionRing {
  background-color: var(--sidebaritem-bg-color);
}

.thumbnail.selected > .thumbnailSelectionRing {
  background-color: var(--sidebaritem-bg-color);
}

.treeItem > a {
  color: var(--treeitem-color);
}

.treeItemToggler::before {
  -webkit-mask-image: var(--treeitem-expanded-icon);
  mask-image: var(--treeitem-expanded-icon);
}
.treeItemToggler.treeItemsHidden::before {
  -webkit-mask-image: var(--treeitem-collapsed-icon);
  mask-image: var(--treeitem-collapsed-icon);
}

.treeItem.selected > a {
  background-color: var(--treeitem-selected-bg-color);
  color: var(--treeitem-selected-color);
}

.treeItemToggler:hover,
.treeItemToggler:hover + a,
.treeItemToggler:hover ~ .treeItems,
.treeItem > a:hover {
  background-color: var(--sidebaritem-bg-color);
  color: var(--treeitem-hover-color);
}

/* TODO: file FF bug to support ::-moz-selection:window-inactive
   so we can override the opaque grey background when the window is inactive;
   see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */

   #errorWrapper {
    background: none repeat scroll 0 0 var(--errorWrapper-bg-color);
    color: var(--main-color);
  }
  
  #errorMoreInfo {
    background-color: var(--field-bg-color);
    color: var(--field-color);
    border: 1px solid var(--field-border-color);
  }
  
  .overlayButton {
    color: var(--main-color);
    background-color: var(--overlay-button-bg-color);
    border: var(--overlay-button-border) !important;
  }
  
  #overlayContainer > .container > .dialog {
    color: var(--main-color);
    background-color: var(--doorhanger-bg-color);
  }
  
  .dialog .separator {
    background-color: var(--separator-color);
  }

.grab-to-pan-grab
  *:not(input):not(textarea):not(button):not(select):not(:link) {
  cursor: inherit !important;
}

@media all and (max-width: 840px) {
  #sidebarContainer {
    background-color: var(--sidebar-narrow-bg-color);
  }
}
/* 
=========================================================
>>> below codes aren't include in common.css file
=========================================================
*/    
/* popup form */
.popup_content input[type='text'] { border: 1px solid #ddd; border-radius: 5px; padding: 5px 0; margin: 7px 0; color: #666; }
.popup_content textarea { border: 1px solid #ddd; border-radius: 5px; padding: 2px 0; margin: 7px 0; color: #666; }
.popup_content h3 { color: #666; text-align: center; margin-bottom: 10px; }

/* Retina */

.spread .page, .pdfViewer.scrollHorizontal .page, .pdfViewer.scrollWrapped .page  {
margin-left: 6px;
margin-right: 6px;
}
.tnc-pdf-back-to-btn{
background: var(--secondary);
padding: 15px 30px;
position: fixed;
right: 10px;
bottom: 10px;
border: 1px solid var(--secondary);
}
.tnc-pdf-back-to-btn a{
color: #fff;
text-decoration: none;
}
.textLayer{
-moz-box-shadow: inset 0 0 10px var(--secondary);
-webkit-box-shadow: inset 0 0 10px var(--secondary);
box-shadow: inset 0 0 10px var(--secondary);
}

#toolbarContainer, .findbar, .secondaryToolbar {
  box-shadow: 1px 2px 20px var(--secondary);
  -webkit-box-shadow: 1px 2px 20px var(--secondary);
  -moz-box-shadow: 1px 2px 20px var(--secondary);
}

@media all and (max-width: 535px) {
  #scaleSelectContainer {
    display: none;
  }
}

@media print{
  .tnc-pdf-back-to-btn{
    display: none;
  }
  .pvfw_page_prev{
    display: none;
  }
  .pvfw_page_next{
    display: none;
  }
}

.pvfw_page_prev{
  position: absolute;
  top: 45%;
  left: 0;
  color: #fff;
  background: #00000050;
  border: 0px;
  z-index: 100;
}
.pvfw_page_next{
  position: absolute;
  top: 45%;
  right: 0;
  color: #fff;
  background: #00000050;
  border: 0px;
  z-index: 100;
}
.pvfw_page_prev img, .pvfw_page_next img{
  width: 30px;
  height:30px;
  padding: 10px;
}
html{
  margin-top: 0px!important;
}
#loadingBar{
  background: #dd3333;
  border-bottom: 1px solid #dd3333;
}

.s-btn-style{
  border: 0;
  border-radius: 4px;
  moz-border-radius: 4px;
  color: #ffffff;
  padding: 8px 20px;
  font-weight: bold;
  background: #0a772b;
  margin: 10px 0;
}
.r-btn-style{
  border: 0;
  border-radius: 4px;
  moz-border-radius: 4px;
  color: #ffffff;
  padding: 8px 20px;
  font-weight: bold;
  background: #d20808;
  margin: 10px 0;
}
.send-to-friend h3{
  text-align: center;
  margin: 10px 0;
}
.send-to-friend input[type=\"text\"], .send-to-friend input[type=\"email\"]{
  margin: 10px 0;
  padding: 5px 10px;
  border: 1px solid #eee;
  width: 90%;
  max-width: 100%;
}
.send-to-friend textarea{
  margin: 10px 0;
  padding: 5px 10px;
  border: 1px solid #eee;
  width: 90%;
  max-width: 100%;
}
.email-result{
  margin: 10px 0;
  text-align: center;
  font-weight: bold;
}
@media only screen and (max-width: 380px){
  #tnc-share{
    left: 0px;
    top:0px;
  }
}
@media only screen and (max-width: 900px){
  .logo_text {
    display: none;
  }
}
#overlayContainer{
  top:0;
  left: 0;
}
@media print{
  #overlayContainer{
    display: none;
  }
}
html .secondaryToolbarButton:before {
  display: none!important;
}
html .secondaryToolbarButton {
  padding-left: 0px!important;
}
html .secondaryToolbarButton {
  text-align: center!important;
}


/** PDF voice style start **/
.tnc-synthesis-wrapper {
  position: absolute !important;
  top:32px;
  background-color: var(--secondary);
  padding: 20px;
  right:35px;
}

button#tncHeadphone::before {
  -webkit-mask-image: var(--speechToolbarButton-icon);
  mask-image: var(--speechToolbarButton-icon);
}

html #speakButton::before  {
  position: unset !important;
}

html #pauseButton::before  {
  position: unset !important;
}

html #resumeButton::before  {
  position: unset !important;
}

#speakButton::before {
  display: none;
  width: auto !important;
}

#speakButton {
  width: auto;
}

#pauseButton::before {
  display: none;
  
} 
#pauseButton {
  width: auto;
}

#resumeButton::before {
  -webkit-mask-image: var( --speechPlayToolbarButton-icon);
  mask-image: var( --speechPlayToolbarButton-icon);
  display: none;
}  

#resumeButton {
  width: auto;
}

select#voiceSelect {
  max-width: 160px;
  font-size: 14px !important;
}  

.tnc-synthesis-container label {
  color:var(--main-color);
}

.tnc-synthesis-container span {
  color:var(--main-color);
}

.tnc-synthesis-wrapper button {
border:0.5px solid var(--main-color) ;
}

.tnc-synthesis-wrapper {
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.5s ease, visibility 0.5s ease !important;
}

.tnc-synthesis-wrapper.show {
opacity: 1 !important;
visibility: visible !important;
}

.tnc_pdf_rate {
 padding-bottom: 5px;
}

.tnc_pdf_pitch {
padding-top: 5px;
padding-bottom: 5px;
}

.tnc_pdf_voice {
padding-top: 5px;
padding-bottom: 5px;
}

.tnc_voice_group_btn {
padding-top: 10px;
}

.tnc_voice_group_btn {
display: flex;
gap: 5px;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}

.tnc_pdf_rate {
display: flex;
gap: 5px;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
}

.tnc_pdf_pitch {
display: flex;
gap: 5px;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
}

.tnc_pdf_voice {
display: flex;
gap: 5px;
align-items: center;
flex-wrap: nowrap;
}

.tnc-synthesis-close-icon {
  position: absolute;
  top: 0px;
  right: 5px;
  cursor: pointer;
  margin-bottom:10px;
}

.tnc-synthesis-close-icon span {
  font-size:10px;
}

#stopButton::before {
  display: none;
}

#stopButton {
width: auto;
}

/** PDF voice style end **/