@charset "UTF-8";

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

input,button{
  border:none;
  background-image:none;
  background-color:transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;color:#9DB8BF;
  text-decoration:none;
}

#citation-capture{
    font-family: -apple-system, system-ui, "Open Sans", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    overflow: hidden !important;
    width: 600px;
    height: auto;
    position: fixed !important;
    top: -5px !important;
    right: -5px !important;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100% - 50px);
    z-index:2147483;
    padding:20px;
}

.blockquote-wrapper{
  box-shadow: 0px 6px 20px 0px rgba(0,0,0,.15);
  border-radius:8px;
}

.citation-tools{
  margin-top:-15px;
  background-color:white;
  border: 1px solid #C2DFE3;
  border-radius: 8px;
  box-shadow: 0px 6px 20px 0px rgba(0,0,0,.15);   
}


.comment-field{
  padding: 12px;
  border-bottom: 1px solid #C2DFE3;
}

.citation-input{
  width: 500px;
  box-shadow:none;
  -webkit-appearance: none;
  color:#464A4D;
  box-sizing: border-box;
  border-radius: 4px;
  font-size:14px;
  word-wrap: break-word;
  word-break: break-all;   
  @include transition(all .10s ease);
  &::placeholder{
    font-size: 14px;
    line-height: 150%;
    color: #000000;
    opacity: 0.25;
  };
}
.citation-input:focus{
  outline:none;
}

.tools-buttons{
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  align-items: center;
  height:44px;
}

.control-button{
  border:none;
  height:44px;
  width:100%;
  text-align: center;
  font-size:14px;
  font-weight:500;
  font-family:inherit;
  display:inline-block;
  @include transition(background-color .20s ease);
  &:hover{
    cursor: pointer;
    opacity: 1;
    background-color:rgba(194,223,227,.25);
  }
  &:focus{
    outline:none;
  }
}

#getlink{
  padding:0px;
  color: #395FE5;
  border-right: 1px solid #C2DFE3;
}  

#getMarkdown{
  padding:0px;
  text-align:center;
  border-right: 1px solid #C2DFE3;
}  

#close-button{
  width:50%;
}


.save-indicator{
  font-size:14px;
  float:right;
  display:inline-block;
  text-align:center;
  box-sizing: border-box;
  color: rgba(23,154,12,.5);
  align-self:start;
}


#quoteslink{
  height:44px;
  line-height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9DB8BF;
  text-decoration:none;
  text-align: center;
  border-right: 1px solid #C2DFE3;
  img{
    width:24px;
    height:auto;
    margin-left:11px;
  }
}