/*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;}
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 - 262px); 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;}
.sentence.activated { border: 1px solid #1b9b8b/*primary*/!important; }
.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; 
}
.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*/; 
}
#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;
}

.info-message span {
    vertical-align: middle;
    margin-right: 8px;
}


.badge-alert { position: absolute; top: 8px; right:16px; transform: scale(1) translate(50%, -50%); transform-origin: 100% 0%; height: 8px; min-width: 8px; border-radius: 4px; }
.badge-alert.active { background-color: rgb(220, 0, 78); }
.sentence-alert { position: relative; top: 14px; height: 8px; min-width: 8px; border-radius: 4px; background-color: rgb(220, 0, 78); }

.icon-text-left { float: left; margin-right: 8px; }

.table-custom {
    word-break: break-word;
    white-space: inherit !important;
    table-layout: fixed;
    width: 100%;
}

.td-custom {
}

.td-custom-45 {
    vertical-align: top;
    width: 45%;
}

.td-custom-5 {
    vertical-align: top;
    width: 5%;
}

.td-textarea {
    width:100%;
    height:100%;
    line-height: 140%;
    font-size: var(--mdc-typography-body2-font-size, 0.875rem);
    letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)
}

.info-message {
    background-color: #f8ecad;
    padding: 1rem 2rem;
    margin: 1rem;
    border-radius: 4px;
}

.info-summary { 
    background-color: #efefef; 
    padding: 1rem 2rem;
    margin: 1rem;
    border-radius: 4px;
}

.info-summary span {
    vertical-align: middle;
    margin-right: 8px;
}


.input_sm {
              border: 1px solid rgba(0, 0, 0, 0.38);
              border-radius: 4px;
              width: 2rem;
              color: rgba(0, 0, 0, 0.87);
              padding-left: 0.5rem!important;
              margin: auto 0.5rem;
              font-size: var(--mdc-typography-body2-font-size, 0.875rem);
}


/* IDML SENTENCE EDITOR STYLES */

.idmlEditor{
  margin-left: 5%;
  margin-right: 5%;
  min-height: 900px;
  outline: 1px solid #c7c7c7;
  padding: 24px;
  line-height: 1.9;
  margin-bottom: 24px;  
}

.idmlEditor span{
  padding: 7px 0px;
}

.idmlEditor span.highlighted{
  background-color: rgba(27, 155, 139, 0.15);
}

.idmlEditor span.check-warning{
  background-color: rgba(234, 51, 51, 0.20);
}
.idmlEditor span.check-warning.highlighted{
  background-color: rgba(242, 150, 31, 0.30)
}

#tooltip{
  padding: 12px;
  background-color: #F2F2F2;
  border-radius: 4px;
  max-width: 600px;
}
#tempElement {
  padding: 12px;
  border-radius: 4px;
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
  max-width: 600px;
}

.translations-container{
  display: block;
}

.idmlEditorMenu li.mdc-deprecated-list-item {
  color: var(--mdc-theme-primary)
}

.translations-container span:focus-visible{
  outline: none;
}