/*Font Family*/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

.mini_thumbnail { max-width: 26px; }



:root {
  --mdc-typography-font-family: 'Lato';
  --mdc-theme-primary: #1B9B8B;
  --mdc-theme-secondary: #F2961F;
  
} 


.mdc-data-table__table th a { text-decoration: none; font-weight: 700; color: #1b9b8b/*primary*/; }
.mdc-data-table__table th a:hover { color: #086d5b/*primary900*/; }

/*PRIMARY COLOR*/
.bg-white { background-color: #ffffff; }
.bg-primary50,
.activated, .mdc-chip  { background-color: #e4f3f1; }
.bg-primary100 { background-color: #bbe1dc; }
.bg-primary200 { background-color: #8dcdc5; }
.bg-primary300 { background-color: #5fb9ae; }
.bg-primary400 { background-color: #3daa9c; }
.bg-primary500 { background-color: #1b9b8b; }
.bg-primary600 { background-color: #189383; }
.bg-primary700 { background-color: #148978; }
.bg-primary800 { background-color: #107f6e; }
.bg-primary900 { background-color: #086d5b; }

.text-grey {color: rgba(0,0,0,.6);}
.alert { color: #b00020;  background-color: rgba(176, 0,12, 0.1); padding: 8px 16px;}
.alert-success { color: var(--bs-success-text-emphasis) !important;  background-color: var(--bs-success-bg-subtle) !important; padding: 8px 16px; border-color: var(--bs-success-border-subtle)}
body { margin: 0; }
.ui-helper {
    width: 25% !important;
    height: 30px !important;
    overflow: hidden !important;
}

/*borders*/
.border-top--grey { border-top: 1px solid rgba(0,0,0,.12); }
.border-bottom--grey { border-bottom: 1px solid rgba(0,0,0,.12); }
.border-left { border-left: 1px solid #000; }
.border-right { border-right: 1px solid #000; }
.border-bottom { border-bottom: 1px solid #000; }

/*paddings*/
.p-2 { padding: 16px; }
.pt-2 { padding-top: 16px; }
.pb-2 { padding-bottom: 16px; }
.pl-2 { padding-left: 16px; }
.pr-2 { padding-right: 16px; }

/*margins*/
.mb-1 { margin-bottom: 8px; }
.ml-1 { margin-left: 8px; }
.ml-2 { margin-left: 16px; }
.ml-3 { margin-left: 24px; }
.ml-4 { margin-left: 32px; }
.ml-5 { margin-left: 40px; }
.ml-6 { margin-left: 48px; }

.clearfix { margin: 0; height: 1px; }
.clearfix:after { content: ""; clear: both; display: table; }


.mdc-button--outlined.activated:disabled { border: 1px solid #1b9b8b/*primary*/; color: #1b9b8b/*primary*/; }
.btn-close-window { position: absolute; top:8px; right: 16px; }
.mdc-button--outlined.btn-border-color:not(:disabled) { border-color: #1b9b8b/*primary*/;}

/*mdc-list*/
.mdc-list-item { align-items: center; height: 48px; }
.mdc-list-item__graphic { margin-right: 24px; }
.mdc-select__menu :not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple {
  top: 8px; left: 16px; }
.mdc-select__menu.mdc-menu-surface--open { z-index: 999;}

/*mdc-text-field*/
.mdc-text-field--fullwidth { width: 100%;}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  { transition: background-color 5000s; }
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label { color: #1b9b8b/*primary*/; }
.mdc-text-field--sm { height: 36px; }
.mdc-text-field--sm .mdc-text-field__input { font-size: 0.875rem; }

/*mdc-top-app-bar*/
.mdc-top-app-bar .mdc-typography--body1 { color: #bbe1dc/*primary100*/; } 
.mdc-top-app-bar .mdc-text-field--outlined { height: 36px; border-radius: 4px; }
.mdc-top-app-bar a { color: #fff; text-decoration: none; } 
.mdc-top-app-bar a:hover { color: #bbe1dc/*primary100*/; }
.mdc-top-app-bar .mdc-floating-label.mdc-typography--subtitle2.mdc-floating-label--float-above { display: none!important;}
.mdc-top-app-bar .mdc-notched-outline__notch { border-top: 1px solid rgba(0, 0, 0, 0.38);}
.mdc-top-app-bar .mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch { border-top: 2px solid #1b9b8b/*primary*/;}
i#btn-search-filters { color: rgba(0, 0, 0, 0.87); width: 32px; height: 32px; padding: 4px; right: 8px;}
#language_selector.mdc-select--outlined .mdc-select__anchor { height: 36px; }
#language_selector .mdc-select__anchor { width: auto;}
#language_selector.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text {
  color:#8dcdc5 /*primary200*/; } 
#language_selector.mdc-select:not(.mdc-select--disabled) .mdc-select__dropdown-icon {
    fill:#8dcdc5 /*primary200*/; } 
#language_selector.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading, 
#language_selector.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch, 
#language_selector.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__trailing, 
#language_selector.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading, 
#language_selector.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch, 
#language_selector.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__trailing {
      border-color: #107f6e; 
    } 
.mdc-top-app-bar__section { z-index: auto; }

/*mdc-data-table*/
.mdc-data-table--sticky-header { position: sticky; top: 128px; margin-bottom: 52px;}
.mdc-data-table__row.disabled, .disabled { opacity: 0.38; }
.mdc-data-table__cell .mdc-select__anchor, 
.chaptermanager .mdc-select--outlined .mdc-select__anchor,
#sentence_edit .mdc-select--outlined .mdc-select__anchor { height: 36px; }
#chapter-table .mdc-data-table__cell { overflow: initial;}
.mdc-data-table__cell .mdc-select__anchor .mdc-select__selected-text { font-size: 0.875rem;}
.mdc-data-table__pagination-rows-per-page { margin-right: 16px; }
ul.pagination { display: none; }

/**/
.mdc-select__anchor .mdc-notched-outline__leading { border-radius: 4px 0 0 4px;}
.mdc-select__anchor .mdc-notched-outline__trailing { border-radius: 0 4px 4px 0;}
.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {color: #1b9b8b/*primary*/; }


/*chapter-paragraphs-table*/
#chapter_box, #sentence_edit { height: calc(100vh - 332px); overflow-y: scroll!important; }
.chapter_box_aligned_player { height: calc(100vh - 252px); overflow-y: scroll!important; }
.chapter_box_aligned { height: calc(100vh - 122px); overflow-y: scroll!important; }
.paragraph { display: flex; justify-content: flex-start; }
.paragraph .sentence { display: flex; justify-content: flex-start; }
.paragraph .sentence:hover { background-color: rgba(0, 0, 0, 0.04); }
.paragraph .sentence .sentence_version { padding: 8px; width: 100%; }
.paragraph .code { padding-top: 8px; width: 25%; }
.paragraph .content { width: 75%;}
.paragraph .border-top--grey:first-child { border-top: none;}

/*dialog*/
.mdc-dialog .mdc-dialog__actions { padding: 8px 24px 20px 24px; }
.xxl-dialog .mdc-dialog__container { width: 100%; }
.xxl-dialog .mdc-dialog__surface { width: 90%; max-width: 90%;}
.xl-dialog .mdc-dialog__container { width: 100%; }
.xl-dialog .mdc-dialog__surface { width: 60%; max-width: 60%;}
.md-dialog .mdc-dialog__container { width: 100%; }
.md-dialog .mdc-dialog__surface { width: 40%; max-width: 40%;}
.mdc-dialog-visible .mdc-dialog__content { overflow: initial!important; }
.mdc-dialog-visible .mdc-dialog__surface { overflow-y: initial!important; }

/*menu*/
.mdc-menu-surface { min-width: max-content; }

/*tabbar-bgdark*/
.tabbar-bgdark { margin-top: 24px; position: sticky; height: 72px; }
.tabbar-bgdark button .mdc-tab__text-label, 
.tabbar-bgdark button .mdc-tab__icon { color: #fff; opacity: 0.6;}
.tabbar-bgdark button.mdc-tab--active .mdc-tab__text-label, 
.tabbar-bgdark button.mdc-tab--active .mdc-tab__icon,
.tabbar-bgdark button:hover .mdc-tab__text-label, 
.tabbar-bgdark button:hover .mdc-tab__icon { opacity: 1;}
.tabbar-bgdark .mdc-tab-indicator .mdc-tab-indicator__content--underline { border-color: #fff; }

#sentence_edit .tabbar-bgdark { position: inherit;}
.paragraph .sentence.activated:hover { background-color: #e4f3f1; }

.content-tab { display: none; }
.content-tab--active { display: block; }

/*input file*/
.file-upload-wrapper {
  position: relative;
  width: 100%;
  height: 56px;
}
.file-upload-wrapper:after {
  content: attr(data-text);
  font-size: 0.875rem;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  padding: 7px 15px;
  display: block;
  width: calc(100% - 40px);
  pointer-events: none;
  z-index: 20;
  height: 40px;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 5px 10px 10px 5px;
  font-weight: 300;
  border: 1px solid #9E9E9E;
  overflow: hidden;
}
.file-upload-wrapper:before {
  content: "Upload";
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  height: 56px;
  background: #9E9E9E;
  color: #fff;
  z-index: 25;
  font-size: 1rem;
  line-height: 56px;
  padding: 0 15px;
  text-transform: uppercase;
  pointer-events: none;
  border-radius: 0 5px 5px 0;
}
.file-upload-wrapper:hover:before {
  background:#9E9E9E;
}
.file-upload-wrapper input {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  height: 40px;
  margin: 0;
  padding: 0;
  display: block;
  cursor: pointer;
  width: 100%;
}

/* SENTENCE EDITOR */
#btn-replace { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline; }
#sentence_edit .mdc-card {
  padding: 16px;
  margin: 16px 0px;
}

#sentence-editor:focus {
    outline: none;
}
#sentence-editor .material-icons { color: #8dcdc5/*primary-200*/; }
#silence-editor {
  line-height: 32px;
}
#silence-editor, #sentence-editor { 
  font-family: 'Lato';
  color:rgba(0, 0, 0, 0.87);
  padding: 16px;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
button.silences { border: none; border-radius: 4px; background-color: #bbe1dc/*primary100*/;}

#sentence-editor s, #silence-editor prosody {
    text-decoration: none;
    line-height: 56px;
}
#sentence-editor s span {
    display: inline-block;
}
/*#sentence-editor s > span {
  margin-bottom: .5em;
}*/
#sentence-editor span.underline {
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  line-height: 18px;
  position: relative;
  display: inherit;
}
.underline .list-icons { 
  position: absolute; 
  top: -24px; 
  left: 0; 
  color: #bbe1dc/*primary-100*/; 
  display: block; 
  white-space: nowrap;
}
.underline .list-icons .active { 
  color: #1B9B8B/*primary*/; 
}
.underline .underline {
  padding-bottom: 8px !important;
}
.underline .underline .underline {
  padding-bottom: 14px !important;
}
#sentence-editor span.underline[data-color="1"] {
    border-bottom-color: #1B9B89;
}
#sentence-editor span.underline[data-color="2"] {
    border-bottom-color: #2957A4;
}
#sentence-editor span.underline[data-color="3"] {
    border-bottom-color: #F7AE2B;
}
#sentence-editor span.underline[data-color="4"] {
    border-bottom-color: #F7802B;
}
#sentence-editor span.underline[data-color="5"] {
    border-bottom-color: #b00020;
}
#sentence-editor span.underline[data-color="6"] {
    border-bottom-color: #78909c;
}

.mdc-text-field--textarea{
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
}
textarea:focus {
  outline: 0 none;
}

.editor-switch-container{
    display: flex;
    margin: 24px 8px;
}

.silence-switch-editor{
    flex: auto;
}

/*Phoneme box*/
.phonemeBox { overflow-y: scroll; } 
.box { border: 1px solid black; padding: 0 0.5em 0 0.5em; list-style-type: none; margin-right: 5px; }
.container { display: flex; }
.container2 { display: flex; flex-wrap: wrap; width: 100%;}
.nameList { width: 10%; padding-right: 16px; margin-top: 0px; text-transform: capitalize; }
#draggable { cursor: pointer; }
.hide { display: none; }

#sentence-editor span.material-icons{
  cursor: pointer;
}

#sentence-editor {
  max-height: 200px;
  overflow-y: auto;
}

.info-message span {
    vertical-align: middle;
    margin-right: 8px;
}
.azure-tabs-warning {
  color: var(--bs-primary);
}

.badge-alert { 
  position: absolute;
  top: -2px;
  right: -12px;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  opacity: 0.5;
}
.badge-alert-check {
  opacity: 1;
}
.badge-alert.active { background-color: var(--bs-primary); }
.badge-alert.misprint_comment.active { 
  background-color: rgb(220, 0, 78); 
  }

.badge-alert.language_adaptation_comment.active { 
  background-color: rgb(198, 121, 0);
  }

.badge-alert-typo.active, .sentence-alert-typo {
  background-color: rgb(160, 3, 255);
}
.sentence-alert {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  line-height: 12px;
  opacity: 0.5;
  background-color: var(--bs-primary);
}
.sentence-misprint-alert {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  line-height: 12px;
  opacity: 0.5;
  background-color: rgb(220, 0, 78);
}
.sentence-language-adaptation-alert {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  line-height: 12px;
  opacity: 0.5;
  background-color: rgb(211, 129, 0);
}
.sentence-alert-check {
  opacity: 1;
}
.sentence-misprint-alert-check {
  opacity: 1;
}
.sentence-language-adaptation-alert-check {
  opacity: 1;
}
.image-check-comments {
  width: 8px;
  height: 8px;
  left: 1.7px;
  position: relative;
  top: -0.62px;
}
.image-check-comments-badge {
  width: 8px;
  height: 8px;
  left: 0px;
  position: relative;
  top: -7px;
}
.check_misprint_comment {
  background-color: rgb(220, 0, 78);
  border-color: rgb(220, 0, 78);
}
.check_language_adaptation_comment {
  color: #fff!important;
  background-color: rgb(198, 121, 0);
  border-color: rgb(198, 121, 0);
}
.btn-default.check_misprint_comment:hover, .btn-default.check_misprint_comment:active, .btn-default.check_misprint_comment:focus, .btn-default.check_misprint_comment:focus-visible, .check_misprint_comment:hover, .check_misprint_comment:active, .check_misprint_comment:focus, .check_misprint_comment:focus-visible {
  color: #fff!important;
  background-color: rgb(198, 0, 70) !important;
  border-color: rgb(198, 0, 70) !important;
}
.btn-default.check_language_adaptation_comment:hover, .btn-default.check_language_adaptation_comment:active, .btn-default.check_language_adaptation_comment:focus, .btn-default.check_language_adaptation_comment:focus-visible, .check_language_adaptation_comment:hover, .check_language_adaptation_comment:active, .check_language_adaptation_comment:focus, .check_language_adaptation_comment:focus-visible {
  color: #fff!important;
  background-color: rgb(211, 129, 0) !important;
  border-color: rgb(211, 129, 0) !important;
}
.check_misprint_comment .icon-ok {
  color: white;
  top: 3px;
  position: relative;
}
#check_misprint_comment, #check_misprint_comment:hover, #check_misprint_comment:active, #check_misprint_comment:focus-visible, #check_misprint_comment:focus, #check_misprint_comment.comment-uncheck:hover, #check_misprint_comment.comment-uncheck:active, #check_misprint_comment.comment-uncheck:focus-visible, #check_misprint_comment.comment-uncheck:focus {
  color: #fff!important;
  background-color: rgb(220, 0, 78)!important;
  border-color: rgb(220, 0, 78)!important;
}
#check_language_adaptation_comment, #check_language_adaptation_comment:hover, #check_language_adaptation_comment:active, #check_language_adaptation_comment:focus-visible, #check_language_adaptation_comment:focus, #check_language_adaptation_comment.comment-uncheck:hover, #check_language_adaptation_comment.comment-uncheck:active, #check_language_adaptation_comment.comment-uncheck:focus-visible, #check_language_adaptation_comment.comment-uncheck:focus {
  color: #fff!important;
  background-color: rgb(198, 121, 0)!important;
  border-color: rgb(198, 121, 0)!important;
}
#check_misprint_comment.comment-uncheck { 
  background-color: var(--bs-gray-300) !important;
  border-color:  var(--bs-gray-300) !important;
}
#check_language_adaptation_comment.comment-uncheck { 
  background-color: var(--bs-gray-300) !important;
  border-color:  var(--bs-gray-300) !important;
}
.comment-uncheck {
  background-color: var(--bs-gray-300) !important;
  border-color:  var(--bs-gray-300) !important;
}
.comments-row {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.comments-col {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.icon-text-left { float: left; margin-right: 8px; }

.mdc-top-app-bar .mdc-button--unelevated.button-shaped {border-radius: 20px; background-color: #ff8526/*primary400*/;}
.mdc-top-app-bar .mdc-button--unelevated.button-menu { text-transform: initial; letter-spacing: 0; font-size: 16px;}
.mdc-top-app-bar .mdc-select__dropdown-icon { width: 24px; fill: #fff; margin-left: 4px; margin-right: 0;}
.mdc-top-app-bar .material-icons.dropdown-icon { font-size: 18px; margin-right: 8px; }
.mdc-select__dropdown-icon-graphic { width: 16px; fill: #fff; margin-left: 4px; margin-right: 0; }