/*#endregion */
.cpPanel {
  position: absolute;
  right: 0;
  top: 0;
  width: 314px;
  height: 100%;
  min-height: 350px;
  -moz-transition: margin ease-out 0.2s, right ease-out 0.2s, left ease-out 0.2s;
  -o-transition: margin ease-out 0.2s, right ease-out 0.2s, left ease-out 0.2s;
  -webkit-transition: margin ease-out 0.2s, right ease-out 0.2s, left ease-out 0.2s;
  transition: margin ease-out 0.2s, right ease-out 0.2s, left ease-out 0.2s;
}
.cpPanel input,
.cpPanel textarea {
  border: none;
}
.cpPanel.collapsed {
  margin-right: 0;
  width: 32px;
}
.cpPanel .cp-open-close-button {
  background-color: #64bafd;
  float: right;
  border-radius: 3px;
  cursor: pointer;
  width: 32px;
}
.cpPanel .cp-open-close-button .maximizeCPIcon {
  background-image: url("../images/CannedPhrases/canned_phrases.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 19px;
  margin-top: 5px;
}
.cpPanel .cp-open-close-button .maximizeCPCaption {
  text-transform: uppercase;
  font: bold 11px Arial;
  color: #ffffff;
  letter-spacing: 1px;
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  white-space: nowrap;
  margin-top: 95px;
  margin-bottom: 12px;
}
.cpPanel .cp-content-container {
  background-color: #495968;
  border: 1px #43525f;
  box-shadow: 1px 1px 3px 3px rgba(30, 35, 40, 0.34);
  width: 282px;
  height: 100%;
  float: right;
  position: relative;
  -moz-transition: box-shadow linear 0.2s;
  -o-transition: box-shadow linear 0.2s;
  -webkit-transition: box-shadow linear 0.2s;
  transition: box-shadow linear 0.2s;
  -moz-transition: width ease-out 0.2s;
  -o-transition: width ease-out 0.2s;
  -webkit-transition: width ease-out 0.2s;
  transition: width ease-out 0.2s;
}
.cpPanel .cp-content-container.collapsed {
  width: 0;
  overflow: hidden;
}
.cpPanel .cp-content-container .CPHeader {
  margin-left: 11px;
  margin-top: 9px;
  margin-bottom: 9px;
}
.cpPanel .cp-content-container .CPHeader .CPBack {
  height: 19px;
  width: 20px;
  background: url("../images/CannedPhrases/Back.png") no-repeat;
  float: left;
  cursor: pointer;
}
.cpPanel .cp-content-container .CPHeader .CPBack:hover {
  background: url("../images/CannedPhrases/Back_hover.png") no-repeat;
}
.cpPanel .cp-content-container .CPHeader .CPTitle {
  padding-left: 25px;
  text-transform: uppercase;
  font: 11px Arial;
  color: #ffffff;
}
.cpPanel .cp-content-container .CPTitleSeperator {
  width: 264px;
  height: 1px;
  background-color: #2c343b;
  margin-left: 11px;
}
.cpPanel .cp-content-container .CPSearchBox {
  height: 26px;
  margin: 9px 11px 16px 11px;
}
.cpPanel .cp-content-container .CPSearchBox input {
  border-radius: 3px;
  width: 100%;
  height: 100%;
  background: #e5eff9 url("../images/CannedPhrases/search.png") no-repeat 10px;
  padding-left: 30px;
}
.cpPanel .cp-content-container .CPHighlighted {
  color: #fff200;
}
.cpPanel .cp-content-container .CPBase {
  background-repeat: no-repeat;
  background-position: right top;
  font: 11px Arial;
  color: #ffffff;
  height: 23px;
  line-height: 23px;
  margin-left: 18px;
  padding-left: 18px;
  vertical-align: middle;
}
.cpPanel .cp-content-container .CPBase:hover {
  cursor: pointer;
  color: #419fe8;
}
.cpPanel .cp-content-container .CPItemSeperator {
  width: 282px;
  height: 1px;
  background-color: #ffffff;
}
.cpPanel .cp-content-container .CPPhrasesContainer {
  height: 288px;
  width: 282px;
  overflow-x: hidden;
  overflow-y: auto;
}
.cpPanel .cp-content-container .CPFolder {
  font-weight: bold;
}
.cpPanel .cp-content-container .CPForward {
  background: url("../images/CannedPhrases/click_to_open.png") no-repeat 230px;
}
.cpPanel .cp-content-container .CPPhrase {
  background-color: #38424c;
}
.cpPanel .cp-content-container .CPPut {
  background: url("../images/CannedPhrases/now_open.png") no-repeat 230px;
}
.cpPanel .cp-content-container .CPSelectedPhrase {
  background-color: #419fe8;
}
.cpPanel .cp-content-container .CPSelectedPhrase:hover {
  cursor: default;
  color: #ffffff;
}
.cpPanel .cp-content-container .CPPreview {
  position: absolute;
  bottom: 50px;
}
.cpPanel .cp-content-container .CPPreview .CPPreviewTitle {
  text-transform: capitalize;
  font: bold 11px Arial;
  color: #ffffff;
  margin-left: 17px;
}
.cpPanel .cp-content-container .CPPreview .CPMessagetriangle {
  background: url("../images/CannedPhrases/canned_phrases_message_triangle.png") no-repeat 32px;
  height: 10px;
}
.cpPanel .cp-content-container .CPPreview .CPPreviewMessage {
  background-color: #64768A;
  width: 241px;
  height: 140px;
  font: 12px Arial;
  color: #ffffff;
  resize: none;
  margin-left: 13px;
  margin-right: 13px;
  margin-bottom: 14px;
  border: none;
  white-space: pre-wrap;
}
.cpPanel .cp-content-container .cp-use-button {
  width: 62px;
  height: 33px;
  border-radius: 3px;
  font: 12px Arial;
  color: #313131;
  text-align: center;
  vertical-align: middle;
  line-height: 33px;
  position: absolute;
  bottom: 9px;
  margin-left: 110px;
  background-color: gray;
  cursor: default;
}
.cpPanel .cp-content-container .cp-use-button.on {
  background-color: #419fe8;
  cursor: pointer;
}
.cpPanel .cp-content-container .cp-use-button.on:hover {
  background-color: #7edafc;
}
.cpPanel .cp-content-container .cp-use-button.on:active {
  background-color: #3589ca;
}
.window.popin .cpPanel {
  height: 450px;
  position: absolute;
  right: -314px;
  z-index: -1;
  display: flex;
}
.window.popin .cpPanel .cp-open-close-button {
  height: 25px;
}
.window.popin .cpPanel .cp-open-close-button.collapsed {
  height: 144px;
}
.window.popin .cpPanel .CPPhrasesContainer {
  height: 98px;
}
.window.popin .cpPanel.collapsed {
  margin-right: auto;
  right: -32px;
}
.window.popin .cpPanel.collapsed .cp-open-close-button {
  border-radius: 3px;
}
.window.popin .cpPanel.collapsed .cp-content-container {
  box-shadow: none;
}
.window.popin .cpPanel.collapsed .cp-content-container .CPPreview textarea.CPPreviewMessage {
  height: 50px;
}