@font-face {
  font-family: 'Tw Cen MT';
  font-style: normal;
  font-weight: normal;
  src: local('Tw Cen MT'), url('/storyface/styles/Tw Cen MT.woff') format('woff');
}

html {
    width: 100%;
    height: 100%;
    background-color: white;
    font-family: 'Tw Cen MT';
  }

/* HEADER CSS*/
header {
  display: block;
    background: linear-gradient(to right, #D51960, #F5EA2F);
    width: 100%;
    height: 48px; /*TODO : fix as a responsive height*/
    margin-bottom: 12px;
}

storyface-header #title {
    height: 41px;
    max-width: 60%;
    margin-top: 20px;
    margin-left: 17px;
}

storyface-header #infos{
  float: right;
  height: 60%;
  max-width: 10%;
  margin-top: 10px;
  margin-right: 10px;
}

storyface-header #username{
  float: right;
  margin-top : 10px;
  margin-right: 10px;
}

storyface-header #logout-button, storyface-header #logout-button > img{
  height: 28px;
}

#storyface-title, #storyface-meet{
  height: 100%;
}

body{
  font-family: 'Tw Cen MT'
}

/* Discussion component **/



.discussion-step{
  background-color: #d8d4d4;
  padding: 10px;
}

.discussion-step:nth-of-type(odd){
  background-color: #F3F0F0;
}

.discussion-answer{
  background-color: cornsilk;
  padding : 10px;
  margin : 10px;
}

.step-options{
  padding-top: 4px;
  border-top : azure 4px solid;
}

.answer-options{
  padding-top: 4px;
  margin-top: 4px;
  border-top: azure 4px solid;
}

discussion textarea{
  width: 100%;
}

.warning-toolbar{
  background-color: rgb(228, 53, 53)!important;
}

/** emojis **/
.emoji{
  vertical-align: middle;
}

/** Toast fix **/
#toast-container
{
  position: fixed;
  display : none;
  height: 48px;
  left: 5px;
  bottom: 5px;
  min-width: 30%;
  z-index: 10000;
  overflow: visible!important;
}

/** New chat css **/
chat{
  position: fixed;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
}

chat .chat-page{
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top : 60px;
  margin : 0;
}

.chat-profile-pic, .chat-webcam{
  position: absolute;
  left: 5px;
  right: 5px;
}

.chat-webcam{
  bottom: 5px;
}

chat .profile-pic{
  border-radius: 50%;
  width:100%;
}

.chatbox{
  height: 100%;
  border: 1px solid #CCC;
  background-color:#e6e6e6;
  border-radius: 5px;
}

.chatbox>h3{
  height: 5%;
}
#message-box{
  height: 93%;
  overflow-y: auto;
}
.message, .typing{
  background: #f3f3f3;
  box-shadow: 2px 2px 6px 1px rgba(119, 119, 119, 0.2);
  display: inline-block;
  max-width: 70%;
  padding: 5px;
}

.typing h5{
  margin-bottom: 18px;
}
.message-me{
  background: #11135B4D;
}

.answer{
  background-color: #11135B;
  color : white;
  cursor: pointer;
  opacity: 0;
  animation: fadein 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;

}

.answer:hover{
  background-color: #CF1459;
}

.answer p {
  margin : 5px;
}


.typing .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  background: #303131;
  animation: wave 1.3s linear infinite;
}
.typing .dot:nth-of-type(2) {
  animation-delay: -1.1s;
}
.typing .dot:nth-of-type(3) {
  animation-delay: -0.9s;
}

@keyframes wave {
  0%, 60%, 100% {
    transform: initial;
  }
  30% {
    transform: translateY(-15px);
  }
}

@keyframes fadein{
  from {
    opacity : 0;
  }
  to {
    opacity: 1;
  }
}

#leave-chat-button {
  float: right;
  width: 40px!important;
  display: inline;
}


/** New face analysis **/
face-analysis{
  position: relative;
  display: block;
  width: 100%
}
face-analysis > canvas, face-analysis .loading-container{
  width: 100%;
  display : block;
  border-radius: 15px;
}

face-analysis .webcam-denied{
  width: 100%;
  border-radius: 15px;
  background-color : black;
  height: 250px;
}

face-analysis .webcam-denied > p{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
}

face-analysis > .emoji-on-video{
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.loading-icon {
  width: 40px;
  height: 40px;
  background-color: white;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

.loading-container{
  background-color: black;
  padding-top : 1px;
}

.loading-container > p{
  padding-bottom-bottom: 10px;
  color: white;
  text-align: center;
}

/** New Gender component **/
.gender-hint{
    color: grey;
    font-size: 3em;
}

.gender-question{
  color : #0c0c35;
  border-bottom: 2px solid #D7D7D7;
  padding-left: 0;
}

/** New emotion component **/
.emotions-background{
  position: fixed;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  width:100%;
}


.emotions-webcam-container{
  padding : 0px 35px;
}

emotions h2{
  text-align: center;
}

.find-love-button{
  background-color: #0c0c35!important;
  color: white!important;
  padding: 20px 20px 14px!important;
  border-radius: 1000px!important;
  font-size: 2em!important;
}

.find-love-button .emoji{
  margin-bottom: 6px;
  margin-right: 10px;
}

.discarded-emotion{
  opacity: 0;
  animation: fadeout 1s;
  animation-fill-mode: forwards;

}

@keyframes fadeout{
  from {
    opacity : 1;
  }
  to {
    opacity: 0;
  }
}

.vertical-center{
  display: flex;
  align-items: center;
}

/* PROFILE CHOICE CSS*/
.md-icon-button{
  width: 100%!important;
  height: inherit!important;
  margin:0;
  padding: 0!important;
  border-radius: 0!important;
}

.md-icon-button[disabled]{
  filter : grayscale(100%);
}

profile-choice .profile-pic-name-container{
  padding: 0px 40px;
}
profile-choice .profile-pic > img{
  width: 100%;
  border-radius: 50%;
  border: 2px solid rgb(12,12,53);

}
.md-icon-button > img{
  width : 100%;
}

profile-choice .profile-name{
  height: 42px;
  margin-top : -15px;
  padding : 0;
  position: absolute;
  left: 40px;
  right: 40px;
  background-color: rgb(12,12,53);
  border-radius: 999999px;
  color : white;
  font-size: 27px;
}


profile-choice .profile-name>p{
  margin : 0;
  position: relative;
  z-index: 1;
}


.profile-info-container{
  border-top: 1px solid rgb(12,12,53);
  margin-top: 6px;
  padding-top : 40px;
  padding-left: 12%;
  padding-right: 5%;
  background-color: #f9f9f9;
}

.next-match-button{
  display : flex;
  align-items: center;
}

profile-choice .profile-info{
  padding: 10px;
}
profile-choice .profile-info > img{
  height: 60px;
}

md-tooltip {
  font-size: 1.5em!important;
  padding : 4px!important;
}

/** Welcome **/
.lang-buttons{
  margin-top : 5vh;
  margin-bottom: 48px;
}
.lang-button-container{
  padding: 3px;
}
footer{
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  background: linear-gradient(to left, #D51960, #F5EA2F);
  height: 48px;
}

.vertically-aligned-content>div{
  display: flex;
  align-items: center;
}



/** profile edit **/
.row-form{
  margin-left: 0!important;
  margin-right: 0!important;
}

.row-form:first-of-type{
  margin-top: 15px;
}

profile md-input-container, authentication md-input-container{
  width : 100%;
}

.homosexual-switch, .emotion-select{
  margin-bottom : 0;
}

.homosexual-switch{
  margin-top: 0;
}

.author-label{
  background: #5FC35F;
  color: white;
  border-radius: 10px;
  float: left;
  padding-left : 10px;
  padding-right : 10px;
}
#options-footer{
  position: fixed;
  bottom: 0;
  background-color: white;
  left: 0;
  right: 0;
  z-index: 1;
}

#footer-fill{
  height: 60px;
}
/** Gauge component **/
.gauge-container{
  width: 100px;
  height: 100px;
  position: relative;
}

.gauge-circle, .gauge-hide{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border : 2px solid white;
}
.gauge-emoji-container{
  position: absolute;
  top :10%;
  left: 10%;
  bottom:10%;
  right: 10%;
}
.gauge-emoji-container > .emoji{
  width: 100%;
  height: 100%;
}

/** info component **/
info .row{
  margin-bottom: 100px;
}

/** Full-screen login component **/
.wrapper {
	margin-top: 80px;
	margin-bottom: 20px;
}

.login-form {
  max-width: 420px;
  padding: 30px 38px 66px;
  margin: 0 auto;
  background-color: #eee;
  border: 3px rgba(0,0,0,0.1);
}
.login-form-heading {
  text-align:center;
  margin-bottom: 30px;
}

.form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
}

.login-button{
  margin-left:0;
  text-align:center;
  width : 100%
}


ui-cropper{
  height: 200px!important;
}

.input-tip{
  color: grey;
  font-size : .8em;
}

.card-info{
  padding-left: 17px;
}
.card-published{
  color: #1de71d
}
.card-not-published{
  color: #f63939;
}


/** Accordion components, thanks https://www.w3schools.com/howto/howto_js_accordion.asp ;) **/
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
   background-color: #eee;
   color: #444;
   cursor: pointer;
   padding: 18px;
   width: 100%;
   text-align: left;
   border: none;
   outline: none;
   transition: 0.4s;
}

.accordion:after {
   content: '\02795'; /* Unicode character for "plus" sign (+) */
   font-size: 13px;
   color: #777;
   float: right;
   margin-left: 5px;
}

.active:after {
   content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
   background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.dialog-title{
  color : #5d5b5b
}