/**
 * Plugin Name: TinyMCE Annotate
 * Description: Create annotations on your posts or pages
 * Version:     9.1.2
 * Author:      Chet
 * Author URI:  https://profiles.wordpress.org/xyulex/
 * License:     GPLv2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

.annotation:hover {
  cursor: pointer;
}

.annotation {
  background-color: #feff71;
}
.selectedanno{
  background-color: #f1f100 !important;
}

/*side nav */
#annotediv{
  height: 100%;
  width:0px;
  position: fixed;
  z-index: 11000;
  top:0;
  right:0;
  background-color: #f8f8f8;
  overflow-x: hidden;
  padding-top: 20px;
  transition: 0.5s;
  box-shadow: -5px 0px 22px 0px rgba(50, 50, 50, 0.7);
}

p.annotetext{
  padding: 30px;
  margin-top: 20px;
}

#annotediv .closebtn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 21px;
}
#annotediv button.closebtn {
    background-color: #cc0066;
    color: white;
    border: none;
    padding: 5px 13px;
    border-radius: 28px;
}

@media only screen and (min-width: 0px) and (max-width: 420px)  {
.showann{
  width:90% !important;
}
}

@media only screen and (min-width: 420px) and (max-width: 800px)  {
.showann{
  width:60% !important;
}
}

@media only screen and (min-width: 800px) and (max-width: 1200px)  {
.showann{
  width:45% !important;
}
}

@media only screen and (min-width: 1200px) and (max-width: 1400px)  {
.showann{
  width:30% !important;
}
}

@media only screen and (min-width: 1400px)  {
.showann{
  width:35% !important;
}
}