/* main font and background */
body{
  font-family: 'Raleway', sans-serif;
  /*background-color: #f1f1f1;*/
  background-color: #fafafa;
}

.background-grey{
  background-color: #ededed;
}


/* home */
.btn-fake-disabled{
  background-color: #9a9a9a;
  border-color: #9a9a9a;
}

.btn-fake-disabled:hover{
  background-color: #9a9a9a;
  border-color: #9a9a9a;
}

.small-lang-name{
  font-size: x-small;
}

/* primary text area: used for speech recognition results and last-translated item */
.primary-text-area{
  background-color: white;
  box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.06);
  padding: 10px;
  width: 100%;
}

.full-height{
  height: 100%;
}

#recognitionArea{
  min-height:67.5px;
}

#predictionArea{
  min-height: 133px;
}

/* secondary text area: used for less important text areas, e.g. history */
.secondary-text-area{
  background-color: inherit;
  border: 1px solid #dbdbdb;
  box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.06);
  padding: 10px;
  width: 100%;
  height: 100%;

}

/* logo size */
.main-logo{
  width: 50px;
}

@media (min-width: 768px) {  
  .main-logo{
    width: 100px;
  }
 }

 .flex-even{
   flex:1;
   align-items: flex-start;
 }

/* loading overlay after login/: covers entire screen while babelDr resources are loaded */

.overlay {
opacity:    0.5; 
background: url("../Images/spinnerLargeBlue.gif") center no-repeat; 
width:      100%;
height:     100%; 
z-index:    10;
top:        0; 
left:       0; 
position:   fixed; 
}

[ng-click] {
  cursor: pointer;
}

.shaded {
  opacity:    0.5; 
}


/* 10.01.2020 overriding bootstrap default */
.babeldr-main{
  padding-right: 0px;
  padding-left: 0px;
  background-color: #f1f1f1;
}

/* badge colours for different cases*/
.badge.default {
  color: white;
  background-color: #008cba;
}

.badge.success {
  color: white;
  background-color: #43ac6a;
}

.badge.warning {
  color: white;
  background-color: #e99002;
}

.badge.danger {
  color: white;
  background-color: #f04124;
}

.badge.plain {
  color: white;
  background-color: #d4d4d4;
}

/* line height for compact display (ressource management views) */
.line-height-1{
  line-height: 1;
}


/* app-specific styles */
.control-label{
    font-size: 12px;
}

/* global loading overlay */
.loading-overlay {
    opacity: 0.5;
    background-color: powderblue;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    position: fixed;
}

/* loading wrapper */
#loading-wrapper{
    text-align: center;
    margin-top:200px;
}

/* loading style with spinner background used for select inputs */
.loading {    
    background-color: #ffffff;
    background-image: url("../../assets/images/spin.svg");
    background-size: 25px 25px;
    background-position:10px center;
    padding-left: 5px;
    background-repeat: no-repeat;
}

.dropdown-menu>li {
  text-align: center;
}

.dropdown-menu>li>a {
  text-decoration: none;
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}

.dropdown-menu>li>a:hover {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

/* canvas for volume indicator*/
/*#canvas {
  
  position: absolute;
  top: 150px;
  left: 45%;
  text-align: center;
  border: 1px solid black;
}*/

#volume {
  width: 20px;
  height: 59px;
  /*position: absolute;
  top: 150px;
  left: 45%;*/
  text-align: center;
  border: 1px solid black;
}

.in-button-volume{
    padding-top: 10px;
    padding-left: 30px;
}

/* pulsating orange "enregistrement en cours" */
@keyframes pulsating-warning {
    0%   {          color: #FF5C00ff;
    }
    100% {   color: #FF5C0031;
    }
}

#recording-text-message{
    text-align: center;
    animation-name: pulsating-warning;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction:alternate-reverse;
    animation-timing-function: ease;
}

/* rec result origin badges in Dev mode */
.glm-badge {
  background-color:#6aa08e;
}

.robust-badge {
  background-color:#6a79a0;
}





/*  recording button */

.rec-button-div{
  min-width: 100px;
  min-height:100px;
}

.centered{
    float: none;
    margin: 0 auto;
}

@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-moz-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-o-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
.uil-ripple-css {
  background: none;
  position: relative;
  width: 150px;
  height: 150px;
}
.uil-ripple-css div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  -webkit-animation: uil-ripple 2s ease-out infinite;
  animation: uil-ripple 2s ease-out infinite;
}
.uil-ripple-css div:nth-of-type(1) {
  border-color: #ff5c00;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.uil-ripple-css div:nth-of-type(2) {
  border-color: #ff5c00;
}

.uil-ripple-css-2 {
  background: none;
  position: relative;
  width: 100px;
  height: 100px;
}
.uil-ripple-css-2 div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  -webkit-animation: uil-ripple 2s ease-out infinite;
  animation: uil-ripple 2s ease-out infinite;
}
.uil-ripple-css-2 div:nth-of-type(1) {
  border-color: #ff5c00;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.uil-ripple-css-2 div:nth-of-type(2) {
  border-color: #ff5c00;
}

/* rec results */
.selected-for-translation {
    color: #008cba;
    font-weight: bold;
}

/* coverage examples */
#coverage-search-input {
  padding-bottom: 20px;
}

#coverage-examples{
  overflow: auto;
  height:200px;
  /*added 16.08.2017*/
  /* display: inline-block; */
  vertical-align: top;
}

#coverage-examples-structured{
  overflow: auto;
  height:200px;
}

.secondary-coverage-example {
  padding-left: 10px;
}

/* history */

#history-all{
overflow: auto;
height:200px;
padding: 10px;
/*added 16.08.2017*/
/* display: inline-block; */
vertical-align: top;
}

/* translation result (patient view) */
.rtl{
  direction: rtl;
  font-size:28px;
}


#translation-result {
  font-size:18px;
   border: 1px solid #dddddd;
}

/* logs view */
pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.log-item-summary {
    padding-left: 30px;
    color:#008cba;
}

/* used in main2 view*/

#main-container:focus{
    outline: none;
}

.translatable {
  line-height: 1;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

span.translatable:hover, div.translatable:hover { 
    /*color:#FF5C00;*/
    background-color:darkgray;
    font-weight: bold;
    cursor: url('../images/traduire2.png'), default;
}

.notTranslatable {
  color: rgb(163,163,163);
}

span.notTranslatable:hover, div.notTranslatable:hover { 
  font-weight: bold;
  cursor: url('../images/indisponible.png'), default;
}

 .vis-hidden{
     visibility: hidden;
  }

 .alt-results-row{
    height: 100px;
    overflow-y: auto;
 }

 .alt-results-row-2{
    height: 150px;
    overflow-y: auto;
 }
/* end of used in main2 view */





/* bidirectional*/

#doctor-view {
    width:100%;
    position: absolute;
    left:0px;
    transition: left 1s;
}

#doctor-view.hidden {
  /*display: none;*/
    left:-100vw;
    position: absolute;
    /*width: 0px;*/
    transition: left 1s, width 0s 1s;
    overflow: hidden;
}

#patient-view{
    width: 100%;
    position: absolute;
    left:0px;
    transition: left 1s;
}

#patient-view.hidden{
  /* display: none; */
    position: absolute;
    left: 100vw;
    width: 0px;
    transition: left 1s, width 0s 1s;
    overflow: hidden;
}



/* domain selector */
.domain-selector-button{
    background-color:inherit;
    border: none;
    color: black;
}

.selected-response{
    border: 2px solid green;
}

.selected-response-for-deletion{
  border: 2px solid red;
}

/* patient view */
.validation-button{
  height: 70px;
}

@media (min-width: 768px) { 
  .validation-button{
    height: 120px;
  }
 }

 /*subtitles*/
 video::cue {
  color:white;
  background-color:rgba(0, 0, 0, 0);
  font-weight:bold
}

/* tabs */
.nav-tabs .nav-link.active{
  background-color: transparent;
  border-color:#dee2e6 #dee2e6 #f1f1f1
}

/* highlight responses when none selected */
.warning-highlight{
    animation-name: warning-border;
    animation-duration: 2s;
}

@keyframes warning-border{
  0%{}
  50% {box-shadow: 0 0 5px 5px #ff9a64;}
  100%{}
}

.attention-highlight{
  animation-name: attention-border;
  animation-duration: 1s;
  animation-iteration-count: 3;
}

@keyframes attention-border{
  0%{border-radius: 70px;}
  50% {box-shadow: 0 0 5px 5px #008cba;
  border-radius: 70px;}
  100%{border-radius: 70px;}
}

.domain-suggest-highlight{
  animation-name: suggest-border;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes suggest-border{
  0%{}
  50% {box-shadow: 0 0 5px 5px #BadA55;}
  100%{}
}

.animate-if {
  position: fixed;
 bottom: 40px;
 right: 40px;
 background-color: #ff5c00;
 color: #FFF; 
 text-align: center;
 padding: 15px;
}

.animate-if.ng-enter, .animate-if.ng-leave {
 transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
 opacity:0;
}

.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
 opacity:1;
}

.checkbox-nav-item{
  display: block;
    padding: .5rem 1rem;
    color: rgba(255,255,255,.5);
}

.custom-control-input-green:focus~.custom-control-label::before {
  border-color: rgba(255,255,255,.5) !important;
  
}

.custom-control-input-green:checked~.custom-control-label::before {
  border-color: #ff5c00 !important;
  background-color: #ff5c00 !important;
}

.custom-control-input-green:focus:not(:checked)~.custom-control-label::before {
  border-color: rgba(255,255,255,.5) !important;
}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

.custom-control-input-blue:focus~.custom-control-label::before {
  border-color: rgba(255,255,255,.5) !important;
  
}

.custom-control-input-blue:checked~.custom-control-label::before {
  border-color: #bada55 !important;
  background-color: #bada55 !important;
}

.custom-control-input-blue:focus:not(:checked)~.custom-control-label::before {
  border-color: rgba(255,255,255,.5) !important;
}

.custom-control-input-blue:not(:disabled):active~.custom-control-label::before {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

.selection-btn.selected{
  background-color: white;
  color: #008cba;
}

#repeat-container{
  height: 100%;
  width: 100%;
}

.credits{
  font-size:x-small;
  line-height: normal;
}

/* loading error alert */
#loadingError{
  display: none;
}
#initialLoadingSpinner{
  display: none;
}