.cp-to-clip {
  text-wrap: wrap;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  background-color: rgb(240, 240, 240) !important;
  cursor: pointer;
}
.copy_to_clipboard::before,
.copy_to_clipboard.copied::before {
  content: "\200B";
}
.copy_to_clipboard {
  color: white;
  display: inline-block;
  width: 30px;
  background-image: url('data:image/svg+xml;base64,PHN2ZwogICB3aWR0aD0iNm1tIgogICBoZWlnaHQ9IjhtbSIKICAgdmlld0JveD0iMCAwIDE4MS40NTk4IDI0MS45NDY0IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjMuMSAoOWI5YmRjMTQ4MCwgMjAyMy0xMS0yNSwgY3VzdG9tKSIKICAgc29kaXBvZGk6ZG9jbmFtZT0iY3AyY2xpcC5zdmciCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJuYW1lZHZpZXcxIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzAwMDAwMCIKICAgICBib3JkZXJvcGFjaXR5PSIwLjI1IgogICAgIGlua3NjYXBlOnNob3dwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iMCIKICAgICBpbmtzY2FwZTpkZXNrY29sb3I9IiNkMWQxZDEiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9Im1tIgogICAgIGlua3NjYXBlOnpvb209IjQuMjQ4MjM1NiIKICAgICBpbmtzY2FwZTpjeD0iMzMuODk2NDI1IgogICAgIGlua3NjYXBlOmN5PSI1MS42Njg1MDkiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxNDUyIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijk5MSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMjYiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjIzIgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxLTUiIC8+CiAgPGRlZnMKICAgICBpZD0iZGVmczEiIC8+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiPgogICAgPHJlY3QKICAgICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo0Ljc2MTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGlkPSJyZWN0MSIKICAgICAgIHdpZHRoPSI5Ni4yMDc2NDIiCiAgICAgICBoZWlnaHQ9IjEyOC4wNDk2MSIKICAgICAgIHg9IjYxLjM1MDQ2NCIKICAgICAgIHk9IjM0LjIyMzc3IiAvPgogICAgPGcKICAgICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIgogICAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICAgIGlkPSJsYXllcjEtNSIKICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzLjEzODM5NSwyNi43MTcxMzgpIj4KICAgICAgPHJlY3QKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6NC43NjE7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICAgIGlkPSJyZWN0MS0zIgogICAgICAgICB3aWR0aD0iOTYuMjA3NjQyIgogICAgICAgICBoZWlnaHQ9IjEyOC4wNDk2MSIKICAgICAgICAgeD0iOC44MzQxODI3IgogICAgICAgICB5PSIzNi40NjkxNyIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-position: right;
}
.copy_to_clipboard.copied {
  color: white !important;
  display: inline-block;
  width: 30px;
  background-image: url('data:image/svg+xml;base64,PHN2ZwogICB3aWR0aD0iNm1tIgogICBoZWlnaHQ9IjhtbSIKICAgdmlld0JveD0iMCAwIDE4MS40NTk4IDI0MS45NDY0IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjMuMSAoOWI5YmRjMTQ4MCwgMjAyMy0xMS0yNSwgY3VzdG9tKSIKICAgc29kaXBvZGk6ZG9jbmFtZT0iY3AyY2xpcC5zdmciCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJuYW1lZHZpZXcxIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzAwMDAwMCIKICAgICBib3JkZXJvcGFjaXR5PSIwLjI1IgogICAgIGlua3NjYXBlOnNob3dwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iMCIKICAgICBpbmtzY2FwZTpkZXNrY29sb3I9IiNkMWQxZDEiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9Im1tIgogICAgIGlua3NjYXBlOnpvb209IjQuMjQ4MjM1NiIKICAgICBpbmtzY2FwZTpjeD0iMzMuODk2NDI1IgogICAgIGlua3NjYXBlOmN5PSI1MS42Njg1MDkiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxNDUyIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijk5MSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMjYiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjIzIgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxLTUiIC8+CiAgPGRlZnMKICAgICBpZD0iZGVmczEiIC8+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiPgogICAgPHJlY3QKICAgICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDpub25lO3N0cm9rZTojMDU3NTQxO3N0cm9rZS13aWR0aDo0Ljc2MTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGlkPSJyZWN0MSIKICAgICAgIHdpZHRoPSI5Ni4yMDc2NDIiCiAgICAgICBoZWlnaHQ9IjEyOC4wNDk2MSIKICAgICAgIHg9IjYxLjM1MDQ2NCIKICAgICAgIHk9IjM0LjIyMzc3IiAvPgogICAgPGcKICAgICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIgogICAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICAgIGlkPSJsYXllcjEtNSIKICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzLjEzODM5NSwyNi43MTcxMzgpIj4KICAgICAgPHJlY3QKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtzdHJva2U6IzA1NzU0MTtzdHJva2Utd2lkdGg6NC43NjE7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICAgIGlkPSJyZWN0MS0zIgogICAgICAgICB3aWR0aD0iOTYuMjA3NjQyIgogICAgICAgICBoZWlnaHQ9IjEyOC4wNDk2MSIKICAgICAgICAgeD0iOC44MzQxODI3IgogICAgICAgICB5PSIzNi40NjkxNyIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-position: right;
  }

.cp-to-clip .copy_to_clipboard {
  margin-left: 20px;
  position: relative;
  right: 10px;
  margin: auto;
  z-index: 1000;
  float: right;
}

.cp-to-clip.copied,
.cp-to-clip .copied {
  color: green;
}

.cp-to-clip .hide {
  display: none;
}

.cp-to-clip .show {
  display: inline-block;
}