.tool {
  font-family: 'Roboto', sans-serif;
  cursor: help;
  position: relative;
}
.tool::before,
.tool::after {
  left: 50%;
  opacity: 0;
  position: absolute;
  z-index: -100;
  font-family: 'Roboto', sans-serif;
}
.tool:hover::before,
.tool:focus::before,
.tool:hover::after,
.tool:focus::after {
  opacity: 1;
  transform: scale(1) translateY(0);
  z-index: 100;
  font-family: 'Roboto', sans-serif;
}
.tool::after {
  border-radius: .25em;
  bottom: 75%;
  color: #000;
  content: attr(data-tip);
  margin-left: -5em;
  font-weight: normal;
  padding: .75em;
  font-size: .75em;
  transition: all .3s cubic-bezier(.84,-0.18,.31,1.26) .2s;
  transform: scale(.6) translateY(50%);  
  width: 10em;
  font-family: 'Roboto', sans-serif;
}
.tool:hover::after,
.tool:focus::after  {
  transition: all .3s cubic-bezier(.84,-0.18,.31,1.26);
  font-family: 'Roboto', sans-serif;
}
.modal-header {
  border-bottom: solid 1px #cacaca; 
  border-radius: 5px 5px 0px 0px;
  padding: 5% 5% 0 5%;
}
.modal-body {
  padding: 3% 5% 0 5%;
}
.modal-content  {
  -webkit-border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  border-radius: 10px !important; 
}
.modal-footer {
  margin-top: 7%;
  padding: 0 5% 0 5%;
  border-top: solid 1px #cacaca; 
}
.smileys,
.smileys:hover,
.smileys:focus
{
  padding: 2%;
  cursor: pointer;
  width: 18%;
  border: none;
  outline: none;
  background: transparent;
}
.smileys:hover {
  transform: scale(1.25);
}
.smileys:active {
  box-shadow: none !important;
}
.grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
#btn-emoji-feedback,
#feedback_logo,
{
  -webkit-filter: drop-shadow(0 5px 5px rgba(0,0,0,0.50));
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.50));
}
.close,
.close:hover,
.close:focus {
  display: table;
  width: auto;
  margin: 4% 4% 0 0;
  padding: 0px;
  border: none;
  color: white;
  position: absolute;
  right: 0;
  top: -5%;
  outline: none;
  height: 25px;
  width: 25px;
  border-radius: 50%;
}
#feedback-modal {
  width: 320px;
  right: 1%;
  display: none;
  border-radius: 5px;
  background: #fff;
  position: fixed;
  top: 3%;
  z-index: 999999999 !important;
  -webkit-box-shadow: 0 0 100px 1px rgba(0,0,0,0.50);
  box-shadow: 0 0 100px 1px rgba(0,0,0,0.50);
}
#modal_title {
  font-weight: normal;
  color: #000;
}
#email-add,
#feedback-modal,
#btn-emoji-feedback,
#modal_title,
#charNum
{
  font-family: 'Roboto', sans-serif;
}
#institution-text {
  padding: 0.5em;
}
#rating-div {
  margin-bottom: 10px;
}
#email-add {
  top: 0px !important;
}
.rating-label,
.control-label {
  color: #000;
  font-family: 'Roboto', sans-serif;
}
#feedback-text,
#institution-text {
  margin-bottom: 0px !important;
  font-family: 'Roboto', sans-serif;
}
input[type="text"], #feedback-text, #institution-text {
  box-shadow: none !important;
  border-radius: 5px;
}
#button_submit {
  color: #fff;
  margin-top: 15px;
  border-radius: 5px;
  font-size: .875em;
  font-family: 'Roboto', sans-serif;
  border: none;
  box-shadow: none;
  outline: none;
  font-weight: normal;
  background-color: #4169e1;
}
.close {
  background-color: #4169e1;
}
.slick-slide {
  outline: none !important;
  margin-bottom: 0px !important;
}
.feedback-emoticons {
  width:100%;
}
#loading-div {
  display: none;
  margin-top: 25px;
}
#smiley_span,
#email_warning,
#email_error,
#affiliation_warning,
#others_warning,
#others {
    font-family: 'Roboto', sans-serif;
}
#email_warning,
#email_error {
  margin-top: 10px;
  font-size: .875em;
}
#footer_error {
  font-family: 'Roboto', sans-serif;
  margin-top: 25px;
  font-size: .875em;
  font-weight: bold;
}
#btn-emoji-feedback {
  line-height: 0;
  font-family: 'Roboto', sans-serif;
  z-index: 4999;
  color: #fff;
  background-color:#4169e1; 
  cursor: pointer;
  font-size: 1em;
  border: none;
  font-weight: normal;
  position: fixed;
  top: 50%;
  right: -39px;
  height: 35px;
  padding: 10px;
  border-radius: 3px 3px 0px 0px;
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}
@media (max-width: 760px) {
  .tool::after { 
    font-size: .75em;
    margin-left: -5em;
    width: 10em;
  }
}
@media print
{    
    #btn-emoji-feedback
    {
        display: none !important;
    }
}
/*bootstrap*/
.text-muted {
  color: #777;
}
.text-primary {
  color: #337ab7;
}
a.text-primary:hover,
a.text-primary:focus {
  color: #286090;
}
.text-success {
  color: #3c763d;
}
a.text-success:hover,
a.text-success:focus {
  color: #2b542c;
}
.text-info {
  color: #31708f;
}
a.text-info:hover,
a.text-info:focus {
  color: #245269;
}
.text-warning {
  color: #8a6d3b;
}
a.text-warning:hover,
a.text-warning:focus {
  color: #66512c;
}
.text-danger {
  color: #a94442;
}
a.text-danger:hover,
a.text-danger:focus {
  color: #843534;
}
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label {
  color: #8a6d3b;
}
.has-warning .form-control {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-warning .form-control:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
}
.has-warning .input-group-addon {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #8a6d3b;
}
.has-warning .form-control-feedback {
  color: #8a6d3b;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: #a94442;
}
.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}
.has-error .form-control-feedback {
  color: #a94442;
}
.form-control {
  display: block;
  width: 100%;
  height: 34px;
  font-size: .875em;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}
.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #eee;
  opacity: 1;
}
.form-control[disabled],
fieldset[disabled] .form-control {
  cursor: not-allowed;
}
textarea.form-control {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"].form-control,
  input[type="time"].form-control,
  input[type="datetime-local"].form-control,
  input[type="month"].form-control {
    line-height: 34px;
  }
  input[type="date"].input-sm,
  input[type="time"].input-sm,
  input[type="datetime-local"].input-sm,
  input[type="month"].input-sm,
  .input-group-sm input[type="date"],
  .input-group-sm input[type="time"],
  .input-group-sm input[type="datetime-local"],
  .input-group-sm input[type="month"] {
    line-height: 30px;
  }
  input[type="date"].input-lg,
  input[type="time"].input-lg,
  input[type="datetime-local"].input-lg,
  input[type="month"].input-lg,
  .input-group-lg input[type="date"],
  .input-group-lg input[type="time"],
  .input-group-lg input[type="datetime-local"],
  .input-group-lg input[type="month"] {
    line-height: 46px;
  }
}
.form-group {
  margin-bottom: 15px;
}
.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}
.radio label,
.checkbox label {
  min-height: 20px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-top: 4px \9;
  margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px;
}
.radio-inline,
.checkbox-inline {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
  cursor: not-allowed;
}
.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
  cursor: not-allowed;
}
.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
  cursor: not-allowed;
}
.form-control-static {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
}
.form-control-static.input-lg,
.form-control-static.input-sm {
  padding-right: 0;
  padding-left: 0;
}
.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
select.input-sm {
  height: 30px;
  line-height: 30px;
}
textarea.input-sm,
select[multiple].input-sm {
  height: auto;
}
.form-group-sm .form-control {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.form-group-sm select.form-control {
  height: 30px;
  line-height: 30px;
}
.form-group-sm textarea.form-control,
.form-group-sm select[multiple].form-control {
  height: auto;
}
.form-group-sm .form-control-static {
  height: 30px;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.input-lg {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
select.input-lg {
  height: 46px;
  line-height: 46px;
}
textarea.input-lg,
select[multiple].input-lg {
  height: auto;
}
.form-group-lg .form-control {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
.form-group-lg select.form-control {
  height: 46px;
  line-height: 46px;
}
.form-group-lg textarea.form-control,
.form-group-lg select[multiple].form-control {
  height: auto;
}
.form-group-lg .form-control-static {
  height: 46px;
  min-height: 38px;
  padding: 11px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}
.has-feedback {
  position: relative;
}
.form-control-feedback {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
}
.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px;
}
.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}