body {
  padding-top: 70px;
}

#page_title {
  color:#627899;
  position:absolute;
  top:-15px;
  left:5px;
  font-size: min(max(21px, 4vw), 41px);
  margin-right:20%;
}

.info {
  display:inline-block;
  width:1.3ex;
  height:1.3ex;
  text-align:center;
  vertical-align:middle;
  margin-left:0.3em;
  padding:0.2ex;
  border:1px solid #627899;
  border-radius:50%;
  background-color:#e5f9ff;
  cursor:help;
}

.info span {
  display:table;
  margin:auto;
  font-size:0.6em;
  font-weight:bold;
  font-family:courier;
}

.legal {
  border:1px solid silver;
  border-radius:5px;
  padding:0 9px;
  margin-top:20px;
  background-color:#fafafa;
}

.badge {
  font-size:1.5ex;
}

.stats > ul {
  padding-left:15px;
  font-size:2.5ex;
}

.fine-print {
  font-size:small;
  color:#999;
}

#page_lang {
  float:right;
  margin-top:1em;
  margin-left:20px;
}

/* Form */
label {
  margin-left:5px;
}

#input_container {
  text-align:right;
}

#persian_input {
  width: 100%;
  margin-bottom:5px;
  direction:rtl;
}

#shown_status,
#shown_lang,
#show_info {
  min-width:30%;
  display:inline-block;
}

#shown_lang label {
  margin-bottom:0;
}

input[type="checkbox"].switch {
  appearance: none;
  width: 3.5em;
  height: 1.5em;
  background: #ddd;
  border-radius: 3em;
  position: relative;
  top: 0.5em;
  cursor: pointer;
  outline: none;
  transition: all .2s ease-in-out;
}

input[type="checkbox"].switch:checked{
}
    
input[type="checkbox"].switch::after {
  position: absolute;
  left: 0;
  content: "";
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 .25em rgba(0,0,0,.3);
  transform: scale(.7);
  transition: all .2s ease-in-out;
}

input[type="checkbox"].switch:checked:after{
  left: calc(100% - 1.5em);
}

.used-transcription i {
  font-style:normal;
  font-weight:bold;
  margin-left:10px;
}

.used-transcription i:hover {
  background-color: #f9f9cd;
  border: 1px solid #ffefef;
  padding: 0 3px;
  position: absolute;
  border-radius: 3px;
  cursor: copy;
  transform: translate(2px,-2px) scale(1.8);
}

.container-row div {
  vertical-align:top;
}

/* Result */
.word-container {
  background-color:#ffffff;
  margin:10px;
  min-height:200px;
  overflow:auto;
  padding-right:5px;
}

.bottom_line {
  margin:10px;
  padding-right:5px;
}

.words {
  background-color:#fffebf;
  border:1px solid #ffec84;
  border-radius:5px;
  float:left;
  margin:5px 0 5px 5px;
}

.words > span {
  border-bottom:1px solid #f9dd60;
  padding:2px 5px;
  display:block;
  min-height: 24px;
  min-width: 50px;
}

.words > span:last-child {
  border-bottom:none;
}

.edit {
  display: inline-block;
  min-width: 30px;
  height: 20px;
  vertical-align: bottom;
}

.edit:hover {
  background-color:#3333331a;
}

.words input {
  border: 1px solid #ccc;
  border-radius: 2px;
  height: 20px;
  width: 90px;
}

.new {
  background-color:#ffbc8b;
}

.new, .new span {
  border-color:#ff8a18;
}

.words .new {
  border:1px solid #ff8a18;
  border-radius:3px;
  padding:0 3px;
  margin-left: 5px;
}

.words span .new {
  border:none;
}

.ambiguous {
  color:red;
}

.ambiguous span {
  display:inline;
  border:none;
  padding:0 3px 0 0;
  cursor:pointer;
}

.ambiguous span:first-child {
  margin-right:10px;
}

.delete,
.ok {
  visibility:hidden;
  float:right;
  margin-left: 5px;
  cursor:pointer;
  height:25px;
  color:#f55a5a;
}

.ok {
  color:#0eb500;
}

.delete::before {
  content:"✖";
}

.ok::before {
  content:"✔";
}

.fa:hover .delete,
.fa:hover .ok {
  visibility:visible;
}


.fa, .fa span {
  font-weight:bold;
  font-family: "Geeza Pro", "Nadeem", "Al Bayan", "DecoType Naskh", "DejaVu Serif", "STFangsong", "STHeiti", "STKaiti", "STSong", "AB AlBayan", "AB Geeza", "AB Kufi", "DecoType Naskh", "Aldhabi", "Andalus", "Sakkal Majalla", "Simplified Arabic", "Traditional Arabic", "Arabic Typesetting", "Urdu Typesetting", "Droid Naskh", "Droid Kufi", "Roboto", "Tahoma", "Times New Roman", "Arial", serif;
  font-size:1.2em;
  direction:rtl;
}

.fi i {
  font-style:normal;
  color:green;
  padding-left:5px;
  cursor:pointer;
}

/* icons */
.icon-copy {
  margin-left:5px;
}

.icon-copy:hover::before,
.icon-copy:hover::after {
  background-color:#eee;
  cursor:copy;
}

.icon-copy::before,
.icon-copy::after {
  content:"";
  width:10px;
  height:13px;
  display:inline-block;
  border:1px solid gray;
  border-radius:3px 0 0;
  background-color:#FFF;
}

.icon-copy::after {
  position:relative;
  top:4px;
  left:-6px;
}

/* animations for text */
.flying-text {
  position:absolute;
  z-index:1000;
  font-size:1.7em;
  color:#606060;
  font-weight:bold;
  opacity:0;
  animation: show 0.8s linear forwards;
}

@keyframes show {
  10% { opacity:1 }
  100% { transform:translate(10px,-40px) scale(1.3); }
}

.blink::before,
.blink::after {
  animation: blinker 1s linear 5;
}

@keyframes blinker {
  50% { border-color:orange; box-shadow:2px 2px 5px orange; }
}


/* the following should be in the tooltipster theme "info" */
.tooltipster-info {
  position:fixed;
  left:auto !important;
  width:auto !important;
  top:20px !important;
  right:20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.waiting {
  border: 3px solid #c8c8c8;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  animation: spin 1s linear infinite;
  -webkit-animation: spin 1s linear infinite; /* Safari */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes spin { /* Safari */
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

/* custom styles that overwrite bootstrap */
.container .jumbotron {
  padding:20px;
}

.ui-dialog {
  max-width: 100%;
  z-index:9999;
}

/* shepherd.js tour custom style */
.shepherd-title {
  font-size:min(max(15px,5vw),21px);
  font-weight:800;
}

.shepherd-text {
  font-size:1.75rem;
}

.shepherd-text textarea {
  width:100%;
}

/* Custom Colors */
.shepherd-element {
  box-shadow:0 1px 20px rgba(0,0,0,.7);
  background-color:#cfedf6;
  max-width:480px;
  max-height:100%;
}

.shepherd-element.shepherd-has-title > .shepherd-arrow::before {
  background-color:#cfedf6;
}

.shepherd-has-title .shepherd-content .shepherd-header,
.shepherd-element.shepherd-has-title[data-popper-placement^="bottom"] > .shepherd-arrow::before {
  background:#5bc0de;
}

/* Custom arrow placement */
.shepherd-element[data-popper-placement^="left"] > .shepherd-arrow {
  right:-5px;
}

.shepherd-element[data-popper-placement^="right"] > .shepherd-arrow {
  left:-5px;
}

.shepherd-element[data-popper-placement^="top"] > .shepherd-arrow {
  bottom:-5px;
}

.shepherd-element[data-popper-placement^="bottom"] > .shepherd-arrow {
  top:-5px;
}

/* Custom element positioning */
.shepherd-element[data-popper-placement^="left"] {
  margin-right:5px;
}

.shepherd-element[data-popper-placement^="right"] {
  margin-left:5px;
}

.shepherd-element[data-popper-placement^="top"] {
  margin-bottom:5px;
}

.shepherd-element[data-popper-placement^="bottom"] {
  margin-top:5px;
}

.width-110px {
  width:110px;
}

.width-160px {
  width:160px;
}