/****************************************************************************************
  Bootstrap initialisation
  
  Please refer to the Code Convention prior to any dev: 
  http://testweb.dev1.whispir.net/charles/bootstrap/doco-front-end/conv.html
****************************************************************************************/
/************************ Reset */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  vertical-align: middle;
}
body {
  line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
nav ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}
/************************ Function for LESS */
/****************************************************************************************	
	Core function for CSS LESS usage only
****************************************************************************************/
/* Sprite */
/* Box Shadow */
/* Border radius */
/* Custom border radius */
/* Generate gradient */
/* Animation */
/******************************* Gradients use in different places */
/* Background Shell */
.whp-gradient-shell {
  background: #f5f5f5;
  background: linear-gradient(to bottom, #f5f5f5 0, #f0f0f0 100%);
}
/* Gradient Rich Text Editor + Mapping */
.whp-gradient-rich-text-editor {
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.whp-gradient-rich-text-editor-hover {
  background: #ffffff;
  background: linear-gradient(to bottom, #ffffff 0, #eff3f5 100%);
}
.whp-gradient-rich-text-editor-active {
  background: #d0dbe3;
  background: linear-gradient(to bottom, #d0dbe3 0, #dde5e9 100%);
}
/************************ Grid system */
/****************************************************************************************
  TODO: Redo the fixed grid, and integrate design constraints
****************************************************************************************/
/****************************************************************************************
  Column Nest
****************************************************************************************/
.whp-container-nest {
  width: 100%;
  float: left;
}
/* Do not correct left margin for the first column */
.whp-row-nest {
  margin-left: 0;
  margin-bottom: 10px;
}
/****************************************************************************************
  Column Fixed
****************************************************************************************/
.whp-container {
  margin: auto !important;
}
/* Correct left margin for the first column */
.whp-row {
  margin-left: -30px;
}
/*Clear both after and before a row (with columns inside) */
.whp-row:after,
.whp-row-nest:after {
  clear: both;
}
.whp-row:before,
.whp-row:after,
.whp-row-nest:before,
.whp-row-nest:after {
  content: "";
  display: table;
}
/*Clear both after and before a container (with columns inside) */
.whp-container:after,
.whp-container-nest:after {
  clear: both;
}
.whp-container:before,
.whp-container-nest:before,
.whp-container:after,
.whp-container-nest:after {
  content: "";
  display: table;
}
/* 
    Portrait tablet to landscape and desktop
    Adaptation of the fixed width for all the columns
    Float left for all the columns
    Adaptation of all the offsets
  */
.whp-container {
  width: 970px !important;
}
/* Correct left margin for the first column */
.whp-row {
  margin-left: -10px;
  float: left;
}
.whp-column1 {
  width: 60px;
  float: left;
  margin-left: 10px;
}
.whp-column2 {
  width: 120px;
  float: left;
  margin-left: 10px;
}
.whp-column3 {
  width: 180px;
  float: left;
  margin-left: 10px;
}
.whp-column4 {
  width: 220px;
  float: left;
  margin-left: 10px;
}
.whp-column5 {
  width: 360px;
  float: left;
  margin-left: 10px;
}
.whp-column6 {
  width: 460px;
  float: left;
  margin-left: 10px;
}
.whp-column8 {
  width: 740px;
  float: left;
  margin-left: 10px;
}
.whp-column9 {
  width: 800px;
  float: left;
  margin-left: 10px;
}
.whp-column10 {
  width: 860px;
  float: left;
  margin-left: 10px;
}
.whp-column12 {
  width: 940px;
  float: left;
  margin-left: 10px;
}
.whp-offset1 {
  margin-left: 60px;
}
.whp-offset2 {
  margin-left: 120px;
}
.whp-offset3 {
  margin-left: 180px;
}
.whp-offset4 {
  margin-left: 220px;
}
.whp-offset5 {
  margin-left: 360px;
}
.whp-offset6 {
  margin-left: 460px;
}
.whp-offset8 {
  margin-left: 740px;
}
.whp-offset9 {
  margin-left: 800px;
}
.whp-offset10 {
  margin-left: 860px;
}
.whp-offset12 {
  margin-left: 940px;
}
/* 
    Large desktop
    Adaptation of the fixed width for all the columns
    Float left for all the columns
    Adaptation of all the offsets
  */
@media screen and (min-width: 1200px) {
  .whp-container {
    width: 1100px !important;
  }
  /* Correct left margin for the first column */
  .whp-row {
    margin-left: -30px !important;
    float: left;
  }
  .whp-column1 {
    width: 90px;
    float: left;
    margin-left: 30px;
  }
  .whp-column2 {
    width: 140px;
    float: left;
    margin-left: 30px;
  }
  .whp-column3 {
    width: 240px;
    float: left;
    margin-left: 30px;
  }
  .whp-column4 {
    width: 340px;
    float: left;
    margin-left: 30px;
  }
  .whp-column5 {
    width: 440px;
    float: left;
    margin-left: 30px;
  }
  .whp-column6 {
    width: 530px;
    float: left;
    margin-left: 30px;
  }
  .whp-column8 {
    width: 740px;
    float: left;
    margin-left: 30px;
  }
  .whp-column9 {
    width: 840px;
    float: left;
    margin-left: 30px;
  }
  .whp-column10 {
    width: 910px;
    float: left;
    margin-left: 30px;
  }
  .whp-column12 {
    width: 1100px;
    float: left;
    margin-left: 30px;
  }
  .whp-offset1 {
    margin-left: 70px;
  }
  .whp-offset2 {
    margin-left: 140px;
  }
  .whp-offset3 {
    margin-left: 240px;
  }
  .whp-offset4 {
    margin-left: 340px;
  }
  .whp-offset5 {
    margin-left: 440px;
  }
  .whp-offset6 {
    margin-left: 530px;
  }
  .whp-offset8 {
    margin-left: 740px;
  }
  .whp-offset9 {
    margin-left: 840px;
  }
  .whp-offset10 {
    margin-left: 910px;
  }
  .whp-offset12 {
    margin-left: 1110px;
  }
}
/****************************************************************************************
  Column Fluid - Percent Based
****************************************************************************************/
.whp-container-fluid {
  width: 100%;
  margin-left: 0;
}
/* Correct left margin */
.whp-container-fluid .whp-row {
  margin-left: 0 !important;
  width: 100%;
  float: left;
}
/*Clear both after and before a fluid container (with fluid columns inside) */
.whp-container-fluid:after {
  clear: both;
}
.whp-container-fluid:before,
.whp-container-fluid:after {
  content: "";
  display: table;
}
/* Default fluid column 1 */
.whp-container-fluid .whp-column1 {
  width: 6.5%;
  margin-left: 2%;
  float: left;
}
/* Default fluid column 2 */
.whp-container-fluid .whp-column2 {
  width: 15%;
  margin-left: 2%;
  float: left;
}
/* Default fluid column 3 */
.whp-container-fluid .whp-column3 {
  width: 23.5%;
  margin-left: 2%;
  float: left;
}
/* Default fluid column 4 */
.whp-container-fluid .whp-column4 {
  width: 32%;
  margin-left: 1.9%;
  float: left;
}
/* Default fluid column 5 */
.whp-container-fluid .whp-column5 {
  width: 38.5%;
  margin-left: 2%;
  float: left;
}
/* Default fluid column 6 */
.whp-container-fluid .whp-column6 {
  width: 49%;
  margin-left: 2%;
  float: left;
}
.ie7 .whp-container-fluid .whp-column6 {
  width: 48%;
  margin-left: 2%;
  float: left;
}
/* Default fluid column 8 */
.whp-container-fluid .whp-column8 {
  width: 66%;
  margin-left: 2%;
  float: left;
}
.ie7 .whp-container-fluid .whp-column8,
.ie8 .whp-container-fluid .whp-column8 {
  width: 65%;
  margin-left: 2%;
  float: left;
}
/* Default fluid column 9 */
.whp-container-fluid .whp-column9 {
  width: 73%;
  margin-left: 2%;
  float: left;
}
/* Default fluid column 10 */
.whp-container-fluid .whp-column10 {
  width: 81%;
  margin-left: 2%;
  float: left;
}
/* Default fluid column 12 */
.whp-container-fluid .whp-column12 {
  width: 100%;
  float: left;
  margin-left: 0;
}
/* Default fluid offset 1 */
.whp-container-fluid .whp-offset1 {
  margin-left: 6%;
}
/* Default fluid offset 2 */
.whp-container-fluid .whp-offset2 {
  margin-left: 14%;
}
/* Default fluid offset 3 */
.whp-container-fluid .whp-offset3 {
  margin-left: 23%;
}
/* Default fluid offset 4 */
.whp-container-fluid .whp-offset4 {
  margin-left: 30%;
}
/* Default fluid offset 5 */
.whp-container-fluid .whp-offset5 {
  margin-left: 36%;
}
/* Default fluid offset 6 */
.whp-container-fluid .whp-offset6 {
  margin-left: 48%;
}
/* Default fluid offset 8 */
.whp-container-fluid .whp-offset8 {
  margin-left: 66%;
}
.ie7 .whp-container-fluid .whp-offset8,
.ie8 .whp-container-fluid .whp-offset8 {
  margin-left: 65%;
}
/* Default fluid offset 9 */
.whp-container-fluid .whp-offset9 {
  margin-left: 73%;
}
/* Default fluid offset 10 */
.whp-container-fluid .whp-offset10 {
  margin-left: 82%;
}
/* Default fluid offset 12 */
.whp-container-fluid .whp-offset12 {
  margin-left: 100%;
}
/* Fix the first margin for the first column, fluid based only */
.whp-container-fluid .whp-row [class*="column"]:first-child {
  margin-left: 0;
}
.whp-rg-container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.whp-rg-row {
  margin-left: -15px;
  margin-right: -15px;
}
.whp-rg-col-sm-1,
.whp-rg-col-md-1,
.whp-rg-col-lg-1,
.whp-rg-col-sm-2,
.whp-rg-col-md-2,
.whp-rg-col-lg-2 .whp-rg-col-sm-3,
.whp-rg-col-md-3,
.whp-rg-col-lg-3,
.whp-rg-col-sm-4,
.whp-rg-col-md-4,
.whp-rg-col-lg-4,
.whp-rg-col-sm-5,
.whp-rg-col-md-5,
.whp-rg-col-lg-5,
.whp-rg-col-sm-6,
.whp-rg-col-md-6,
.whp-rg-col-lg-6,
.whp-rg-col-sm-7,
.whp-rg-col-md-7,
.whp-rg-col-lg-7,
.whp-rg-col-sm-8,
.whp-rg-col-md-8,
.whp-rg-col-lg-8,
.whp-rg-col-sm-9,
.whp-rg-col-md-9,
.whp-rg-col-lg-9,
.whp-rg-col-sm-10,
.whp-rg-col-md-10,
.whp-rg-col-lg-10,
.whp-rg-col-sm-11,
.whp-rg-col-md-11,
.whp-rg-col-lg-11,
.whp-rg-col-sm-12,
.whp-rg-col-md-12,
.whp-rg-col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .whp-rg-col-sm-1,
  .whp-rg-col-sm-2,
  .whp-rg-col-sm-3,
  .whp-rg-col-sm-4,
  .whp-rg-col-sm-5,
  .whp-rg-col-sm-6,
  .whp-rg-col-sm-7,
  .whp-rg-col-sm-8,
  .whp-rg-col-sm-9,
  .whp-rg-col-sm-10,
  .whp-rg-col-sm-11,
  .whp-rg-col-sm-12 {
    float: left;
  }
  .whp-rg-col-sm-12 {
    width: 100%;
  }
  .whp-rg-col-sm-11 {
    width: 91.66666667%;
  }
  .whp-rg-col-sm-10 {
    width: 83.33333333%;
  }
  .whp-rg-col-sm-9 {
    width: 75%;
  }
  .whp-rg-col-sm-8 {
    width: 66.66666667%;
  }
  .whp-rg-col-sm-7 {
    width: 58.33333333%;
  }
  .whp-rg-col-sm-6 {
    width: 50%;
  }
  .whp-rg-col-sm-5 {
    width: 41.66666667%;
  }
  .whp-rg-col-sm-4 {
    width: 33.33333333%;
  }
  .whp-rg-col-sm-3 {
    width: 25%;
  }
  .whp-rg-col-sm-2 {
    width: 16.66666667%;
  }
  .whp-rg-col-sm-1 {
    width: 8.33333333%;
  }
}
@media (min-width: 992px) {
  .whp-rg-col-md-1,
  .whp-rg-col-md-2,
  .whp-rg-col-md-3,
  .whp-rg-col-md-4,
  .whp-rg-col-md-5,
  .whp-rg-col-md-6,
  .whp-rg-col-md-7,
  .whp-rg-col-md-8,
  .whp-rg-col-md-9,
  .whp-rg-col-md-10,
  .whp-rg-col-md-11,
  .whp-rg-col-md-12 {
    float: left;
  }
  .whp-rg-col-md-12 {
    width: 100%;
  }
  .whp-rg-col-md-11 {
    width: 91.66666667%;
  }
  .whp-rg-col-md-10 {
    width: 83.33333333%;
  }
  .whp-rg-col-md-9 {
    width: 75%;
  }
  .whp-rg-col-md-8 {
    width: 66.66666667%;
  }
  .whp-rg-col-md-7 {
    width: 58.33333333%;
  }
  .whp-rg-col-md-6 {
    width: 50%;
  }
  .whp-rg-col-md-5 {
    width: 41.66666667%;
  }
  .whp-rg-col-md-4 {
    width: 33.33333333%;
  }
  .whp-rg-col-md-3 {
    width: 25%;
  }
  .whp-rg-col-md-2 {
    width: 16.66666667%;
  }
  .whp-rg-col-md-1 {
    width: 8.33333333%;
  }
}
@media (min-width: 1200px) {
  .whp-rg-col-lg-1,
  .whp-rg-col-lg-2,
  .whp-rg-col-lg-3,
  .whp-rg-col-lg-4,
  .whp-rg-col-lg-5,
  .whp-rg-col-lg-6,
  .whp-rg-col-lg-7,
  .whp-rg-col-lg-8,
  .whp-rg-col-lg-9,
  .whp-rg-col-lg-10,
  .whp-rg-col-lg-11,
  .whp-rg-col-lg-12 {
    float: left;
  }
  .whp-rg-col-lg-12 {
    width: 100%;
  }
  .whp-rg-col-lg-11 {
    width: 91.66666667%;
  }
  .whp-rg-col-lg-10 {
    width: 83.33333333%;
  }
  .whp-rg-col-lg-9 {
    width: 75%;
  }
  .whp-rg-col-lg-8 {
    width: 66.66666667%;
  }
  .whp-rg-col-lg-7 {
    width: 58.33333333%;
  }
  .whp-rg-col-lg-6 {
    width: 50%;
  }
  .whp-rg-col-lg-5 {
    width: 41.66666667%;
  }
  .whp-rg-col-lg-4 {
    width: 33.33333333%;
  }
  .whp-rg-col-lg-3 {
    width: 25%;
  }
  .whp-rg-col-lg-2 {
    width: 16.66666667%;
  }
  .whp-rg-col-lg-1 {
    width: 8.33333333%;
  }
}
/************************ All font sizes */
/****************************************************************************************	
	All font sizes
****************************************************************************************/
* {
  font-family: Arial, Sans-Serif;
}
body {
  /* Base UNIT never change this - Refer to this website for computing font size: http://pxtoem.com/ */
  font-size: 0.750em;
  line-height: 1.4;
}
.whp-login-intro .whp-login-intro-title,
.whp-sidebar-title .whp-maintitle,
.whp-map-sidebar-title {
  font-size: 1.500em;
}
.whp-address-book-container h2,
.whp-sidebar-item-profile h3,
.whp-wizard-title,
.whp-btn.whp-map-topbar-search {
  font-size: 1.333em;
}
.whp-btn,
.recipientsBox,
.whp-custom-dropdown dt,
.whp-megamenu-shortcuts .whp-megamenu-link li.whp-megamenu-link-title,
.whp-sidebar-title .whp-subtitle,
.whp-header .whp-workspace h2,
.whp-form-header h2,
div.whp-form-title h2,
input,
textarea,
select,
.whp-login-intro-note,
.whp-container-form .whp-form-header,
.whp-container-form .whp-form-title,
.whp-pic-change-text,
.oddColourSuggestion {
  font-size: 1em;
}
.whp-comp-time,
.whp-toolbar-link a,
.whp-info,
.whp-info-error,
.whp-escalation-name-desc,
article.whp-sidebar-item-content,
.whp-followers-menu .whp-nested-list-link,
.whp-sidebar-item-content-time,
.whp-status-table-report,
.whp-map-pinp-number {
  font-size: 0.917em;
}
#whp-fileupload-dropzone,
.whp-header-edu,
.whp-header-login,
.whp-login-intro .whp-login-intro-content,
.whp-login-tagline,
.whp-megamenu-shortcuts .whp-megamenu-link li,
.whp-megamenu .whp-megamenu-link-add,
.whp-sidebar-item-content h4,
.whp-wizard-desc,
.whp-rolodex li a,
.whp-pagination li a,
.whp-top-menu li a,
.whp-top-menu-dropdown {
  font-size: 1.167em;
}
div.suggestions div,
.whp-login-container {
  font-size: 1.2em;
}
.whp-title,
#whp-fancybox-title {
  font-size: 1.667em;
}
.whp-login-intro .whp-btn {
  font-size: 1.583em;
}
.whp-login-box > h1,
.whp-login-recover > h1,
.whp-megamenu-more .whp-megamenu-shortcuts h3 {
  font-size: 1.25em;
}
.whp-login-container label {
  font-size: 1.071em;
}
.whp-link-login-recover {
  font-size: 0.857em;
}
.whp-sidebar-controls .whp-sidebar-controls-item .whp-sidebar-tab-notif,
.whp-megamenu-more .whp-megamenu-link li a,
.whp-map-notification,
.whp-map-contact-notification,Ha
.whp-map-user-notification,
.whp-map-distr-notification,
.whp-map-messages-notification,
.whp-map-assets-notification,
.whp-map-events-notification,
.whp-map-tab-menu-item-desc {
  font-size: 0.833em;
}
.whp-login-container .whp-btn {
  font-size: 1.143em;
}
.whp-map-topbar,
.whp-tabs .whp-tab {
  font-size: 1.083em;
}
#pickerDiv {
  font-size: 0;
}
.whp-megamenu {
  font-size: 14px;
  line-height: 24px;
}
/************************ Main */
/* Body and HTML tags */
/****************************************************************************************
	Global
****************************************************************************************/
html {
  height: 100%;
}
body:before {
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px;
}
body {
  padding-top: 50px;
  height: 100%;
  background-image: url("../img/bckBody.png");
  background-repeat: repeat;
  color: #575757;
}
hr {
  border-top: 1px solid #d6e0e6;
}
::-moz-selection {
  background-color: #649cbd;
  color: #ffffff;
  text-shadow: none;
}
::selection {
  background-color: #649cbd;
  color: #ffffff;
  text-shadow: none;
}
/* Map fullscreen for body adjustement */
.whp-fullmap {
  height: 100%;
  padding-top: 0;
}
/* Content displayed in a Fancy Box */
.whp-content-in-popup {
  padding-top: 0;
  background-image: none;
  background-repeat: no-repeat;
}
a {
  text-decoration: none;
  outline: none;
  color: #3087c4;
}
#componentGroups .your-components-div .whp-component-hover-links {
  margin: auto 15px auto 5px;
}
#componentGroups .your-components-div .whp-component-hover-links a {
  color: #ccc;
  padding: 5px 15px;
  border-radius: 20px;
  border: 1px solid #ccc;
}
#componentGroups .your-components-div .whp-component-hover-links a:hover {
  color: #66c3ee;
  border: 1px solid #66c3ee;
}
a:hover {
  text-decoration: none;
  color: #116597;
}
a:visited {
  text-decoration: none;
  color: #3087c4;
}
ul,
ol {
  margin: 0;
  padding: 0;
  padding-left: 20px;
}
/* Main DIV which encapsulates the whole content */
#mainAppContainer {
  overflow: hidden;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix {
  display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* close commented backslash hack */
.affix {
  position: fixed !important;
}
/* Toolbox to make developer team's life easier */
/****************************************************************************************	
	Toolbox
****************************************************************************************/
/* Highlight a specific line of data */
.whp-selectedLine {
  background-color: #eeeeee !important;
}
/* Hide and do not keep the space */
.whp-hide {
  display: none !important;
}
.whp-bold {
  font-weight: bold !important;
}
.whp-width-auto {
  width: auto !important;
}
/* Align text on the right */
.whp-align-right {
  text-align: right !important;
}
/* Margin right for a box but affects only the last element */
.whp-align-right *:last-child {
  margin-right: 10px;
}
/* Align on the right and deactivate the margin right for the composition box (keep alignements clean) */
.whp-comp-box .whp-align-right *:last-child {
  margin-right: 0;
}
.whp-float-right {
  float: right !important;
}
.whp-float-left {
  float: left !important;
}
.whp-center-text {
  text-align: center;
}
/* Keep the space but hide */
.whp-visibility-hidden {
  visibility: hidden;
}
/* Margin for elements located on the extreme right */
.whp-margin-right {
  margin-right: 20px !important;
}
/* Margin for elements located on the extreme left */
.whp-margin-left {
  margin-left: 10px !important;
}
/* Margin for elements located outside of container */
.whp-margin-top {
  margin-top: 20px !important;
}
.whp-m0 {
  margin: 0 !important;
}
.whp-m5 {
  margin: 5px !important;
}
.whp-m10 {
  margin: 10px !important;
}
.whp-m15 {
  margin: 15px !important;
}
.whp-m20 {
  margin: 20px !important;
}
.whp-m30 {
  margin: 30px !important;
}
.whp-mb0 {
  margin-bottom: 0 !important;
}
.whp-mb5 {
  margin-bottom: 5px !important;
}
.whp-mb10 {
  margin-bottom: 10px !important;
}
.whp-mb15 {
  margin-bottom: 15px !important;
}
.whp-mb20 {
  margin-bottom: 20px !important;
}
.whp-mb30 {
  margin-bottom: 30px !important;
}
.whp-ml0 {
  margin-left: 0 !important;
}
.whp-ml5 {
  margin-left: 5px !important;
}
.whp-ml10 {
  margin-left: 10px !important;
}
.whp-ml15 {
  margin-left: 15px !important;
}
.whp-ml20 {
  margin-left: 20px !important;
}
.whp-ml30 {
  margin-left: 30px !important;
}
.whp-mr0 {
  margin-right: 0 !important;
}
.whp-mr5 {
  margin-right: 5px !important;
}
.whp-mr10 {
  margin-right: 10px !important;
}
.whp-mr15 {
  margin-right: 15px !important;
}
.whp-mr20 {
  margin-right: 20px !important;
}
.whp-mr30 {
  margin-right: 30px !important;
}
.whp-mt0 {
  margin-top: 0 !important;
}
.whp-mt5 {
  margin-top: 5px !important;
}
.whp-mt10 {
  margin-top: 10px !important;
}
.whp-mt15 {
  margin-top: 15px !important;
}
.whp-mt20 {
  margin-top: 20px !important;
}
.whp-mt30 {
  margin-top: 30px !important;
}
.whp-p0 {
  padding: 0 !important;
}
.whp-p5 {
  padding: 5px !important;
}
.whp-p10 {
  padding: 10px !important;
}
.whp-p15 {
  padding: 15px !important;
}
.whp-p20 {
  padding: 20px !important;
}
.whp-p30 {
  padding: 30px !important;
}
.whp-pt0 {
  padding-top: 0 !important;
}
.whp-pt5 {
  padding-top: 5px !important;
}
.whp-pt10 {
  padding-top: 10px !important;
}
.whp-pt15 {
  padding-top: 15px !important;
}
.whp-pt20 {
  padding-top: 20px !important;
}
.whp-pt30 {
  padding-top: 30px !important;
}
.whp-pb0 {
  padding-bottom: 0 !important;
}
.whp-pb5 {
  padding-bottom: 5px !important;
}
.whp-pb10 {
  padding-bottom: 10px !important;
}
.whp-pb15 {
  padding-bottom: 15px !important;
}
.whp-pb20 {
  padding-bottom: 20px !important;
}
.whp-pb30 {
  padding-bottom: 30px !important;
}
.whp-pl0 {
  padding-left: 0 !important;
}
.whp-pl5 {
  padding-left: 5px !important;
}
.whp-pl10 {
  padding-left: 10px !important;
}
.whp-pl15 {
  padding-left: 15px !important;
}
.whp-pl20 {
  padding-left: 20px !important;
}
.whp-pl30 {
  padding-left: 30px !important;
}
.whp-pr0 {
  padding-right: 0 !important;
}
.whp-pr5 {
  padding-right: 5px !important;
}
.whp-pr10 {
  padding-right: 10px !important;
}
.whp-pr15 {
  padding-right: 15px !important;
}
.whp-pr20 {
  padding-right: 20px !important;
}
.whp-pr30 {
  padding-right: 30px !important;
}
/* Set width 100% for element */
.whp-width-full {
  width: 100% !important;
}
.whp-clear-left {
  clear: left !important;
}
/* Set padding for element */
.whp-padding-right {
  padding-right: 10px !important;
}
.whp-padding-left {
  padding-left: 10px !important;
}
/* Set height 100% for parent element */
.whp-height-fullscreen {
  height: 100%;
}
/* Display a curosr, gives the ability to use <a> tag without href because JS  */
.whp-pointer {
  cursor: pointer;
}
/* Indentation */
.whp-indent-1 {
  padding-left: 20px !important;
}
.whp-indent-2 {
  margin-left: 20px !important;
  padding-left: 20px !important;
}
.whp-indent-3 {
  margin-left: 40px !important;
  padding-left: 20px !important;
}
.whp-indent-4 {
  margin-left: 60px !important;
  padding-left: 20px !important;
}
.whp-indent-5 {
  margin-left: 80px !important;
  padding-left: 20px !important;
}
/* Force no border */
/* No border at the top */
.whp-no-top-border {
  border-top: 0 !important;
}
/* No border at the bottom */
.whp-no-bottom-border {
  border-bottom: 0 !important;
}
/* No border at the left */
.whp-no-left-border {
  border-left: 0 !important;
}
/* No border at the right */
.whp-no-right-border {
  border-right: 0 !important;
}
.whp-border-bottom-all {
  padding-bottom: 10px !important;
  margin-bottom: 20px;
}
/* valign top */
.whp-valign-top {
  vertical-align: top;
}
.whp-bb {
  border: 1px solid #b5c9d6;
}
.whp-bbt {
  border-top: 1px solid #b5c9d6;
}
.whp-bbb {
  border-bottom: 1px solid #b5c9d6;
}
.whp-bbl {
  border-left: 1px solid #b5c9d6;
}
.whp-bbr {
  border-right: 1px solid #b5c9d6;
}
.whp-lbb {
  border: 1px solid #dde6ec;
}
.whp-lbbt {
  border-top: 1px solid #dde6ec;
}
.whp-lbbb {
  border-bottom: 1px solid #dde6ec;
}
.whp-lbbl {
  border-left: 1px solid #dde6ec;
}
.whp-lbbr {
  border-right: 1px solid #dde6ec;
}
.whp-wpix-20 {
  width: 20px !important;
}
.whp-wpix-50 {
  width: 50px !important;
}
.whp-wpix-70 {
  width: 70px !important;
}
.whp-wpix-100 {
  width: 100px !important;
}
.whp-wpix-150 {
  width: 150px !important;
}
.whp-wpix-200 {
  width: 200px !important;
}
.whp-wpix-300 {
  width: 300px !important;
}
.whp-wpix-400 {
  width: 400px !important;
}
.whp-wpix-500 {
  width: 500px !important;
}
.whp-wp-5 {
  width: 5% !important;
}
.whp-wp-7 {
  width: 7% !important;
}
.whp-wp-8 {
  width: 8% !important;
}
.whp-wp-10 {
  width: 10% !important;
}
.whp-wp-12 {
  width: 12% !important;
}
.whp-wp-15 {
  width: 15% !important;
}
.whp-wp-20 {
  width: 20% !important;
}
.whp-wp-25 {
  width: 25% !important;
}
.whp-wp-30 {
  width: 30% !important;
}
.whp-wp-35 {
  width: 35% !important;
}
.whp-wp-40 {
  width: 40% !important;
}
.whp-wp-50 {
  width: 50% !important;
}
.whp-wp-60 {
  width: 60% !important;
}
.whp-wp-70 {
  width: 70% !important;
}
.whp-wp-80 {
  width: 80% !important;
}
.whp-wp-90 {
  width: 90% !important;
}
.whp-wp-100 {
  width: 100% !important;
}
/* colors */
.whp-black {
  color: #1d1d1d;
}
.clearfix {
  display: inline-block;
  display: block;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
/* Header + Footer */
/****************************************************************************************
	Workspace
****************************************************************************************/
/* A workspace with his title and his access menu */
.whp-header .whp-workspace {
  height: 50px;
  border-left: 1px solid #101010;
  cursor: pointer;
  box-shadow: -1px 0 0 0 #444444, transparent 0 0 0;
}
.whp-header .whp-workspace:last-child {
  width: 48px;
}
.ie7 .whp-header .whp-workspace,
.ie8 .whp-header .whp-workspace {
  height: 49px;
}
.whp-workspaces .whp-column1,
.whp-workspaces .whp-column2 {
  margin-left: 0;
  padding-left: 12px;
  padding-right: 12px;
}
.whp-workspaces .whp-column1:hover,
.whp-workspaces .whp-column2:hover {
  background-color: #3e3e3e;
}
.whp-workspaces .whp-column2 {
  width: 108px;
}
.ie7 .whp-workspace.whp-column1 {
  border-left: 1px solid #101010;
  border-right: 1px solid #101010;
}
.whp-header ul.whp-workspaces {
  padding: 0;
}
#workspaceSrollbar {
  margin-left: 290px;
}
/* Modifier of a column to display the "More" menu access */
.whp-workspace.whp-column1 {
  width: 48px;
  padding: 0;
  margin: 0;
}
.whp-workspace.whp-column1 h2 {
  display: block;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 50px;
}
/* Workspace Name */
.whp-header .whp-workspace .whp-workspace-name {
  float: left;
  width: 95px;
  margin-top: 4px;
  overflow: hidden;
  height: 32px;
}
.whp-header .whp-workspace h2 {
  font-weight: bold;
  line-height: 1.167em;
  color: #a8a8a8;
  text-shadow: 0 -1px 0 #111111;
  vertical-align: bottom;
  display: table-cell;
  width: 95px;
  height: 32px;
  word-wrap: break-word;
  max-width: 95px;
  overflow: hidden;
}
/* Fix JQuery height computing for name cropping */
.ie7 .whp-header .whp-workspace h2 {
  width: auto;
  height: auto;
}
/* Workspace Name More */
.whp-header .whp-workspace.whp-column1 h2 {
  height: 49px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px -20px;
}
.whp-header .whp-workspace.whp-column1 h2:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -60px -20px;
}
/* Workspace Name More Hover */
.whp-header .whp-workspace.whp-column1.whp-hover h2 {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -120px -20px;
}
/* Workspace Access Menu */
.whp-header .whp-workspace a.whp-workspace-link {
  float: right;
  width: 8px;
  height: 7px;
  margin-top: 31px;
  margin-right: 1px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -20px 0px;
  font-weight: normal;
  color: #a8a8a8;
  text-indent: -9000px;
}
.whp-header .whp-hover a.whp-workspace-link,
.whp-header .whp-wks-a a.whp-workspace-link {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px 0px;
}
/* Click on a workspace */
.whp-header .whp-wks-a {
  background-color: #005cff;
  margin-right: 1px;
}
.whp-header .whp-wks-a .whp-workspace-link {
  background-position: 0 0;
}
.whp-header .whp-wks-a h2 {
  color: #fefffd;
  text-shadow: 0 1px 0 #0c1624;
}
/* Hover a workspace */
.whp-header .whp-hover {
  background-color: #3e3e3e;
}
.whp-header .whp-hover h2 {
  text-shadow: 0 -1px 0 #202020;
}
/* Color when you hover or click on a workspace */
.whp-header .whp-hover h2 {
  color: #fefffd;
}
/****************************************************************************************
	Mega Menu
****************************************************************************************/
/************************ Megamenu and add workspace */
.whp-header .whp-container {
  position: relative;
}
.whp-megamenu {
  visibility: hidden;
  position: absolute;
  left: 60px;
  margin: 50px 0 0 -13px;
  padding: 5px 0 0 0;
  z-index: 0;
  background-color: #363636;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* With box shadow */
.whp-megamenu-back {
  background: #545454;
}
.whp-megamenu .whp-container-fluid .whp-menu-column {
  padding: 0 32px;
  margin-top: 32px;
  min-width: 190px;
  margin-bottom: 32px;
  border-right: 1px solid #484848;
}
/* modernizer class for ie9 - to correct flexbox non-support */
.ie9 .whp-megamenu .whp-container-fluid .whp-menu-column {
  display: table-cell;
}
.whp-megamenu ul {
  padding: 0;
  margin: 0;
}
.whp-megamenu-customise,
.whp-megamenu-workspace {
  margin-right: 50px;
}
.whp-megamenu-close {
  margin-right: 20px;
}
.whp-megamenu-container {
  display: -ms-flexbox;
  display: flex;
}
.whp-megamenu-active {
  color: #3e3e3e;
}
.whp-megamenu .whp-megamenu-link {
  margin-bottom: 25px;
}
.whp-megamenu .whp-megamenu-link:last-child {
  margin-bottom: 0;
}
.whp-megamenu .whp-megamenu-link > li > a {
  color: #97bdd7;
}
.whp-megamenu .whp-megamenu-link > li > a:hover {
  color: #f9c83e;
}
.whp-megamenu .whp-megamenu-link > li input[type="checkbox"] {
  margin-top: 3px;
  margin-right: 5px;
}
.whp-megamenu .whp-megamenu-link li a {
  line-height: 24px;
  margin-left: 13px;
}
.whp-megamenu-back .whp-megamenu-link li {
  margin-left: 0;
  color: #ededed;
}
.whp-megamenu .whp-megamenu-link h3 {
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  margin: 5px 0 0 0;
}
.whp-megamenu .whp-megamenu-link h3 a {
  font-size: 20px;
  margin-left: 0;
  color: #FFFFFF;
  line-height: 1.5;
}
.whp-megamenu .whp-megamenu-link h3 a:hover {
  border-bottom: 2px solid #FFF;
}
.whp-megamenu-more {
  border-left: 1px solid #bcbcbc;
  border-right: 1px solid #bcbcbc;
  border-bottom: 1px solid #bcbcbc;
}
/* With box shadow */
.whp-megamenu-more {
  background-color: #363636;
  box-shadow: 0 0 10px 5px rgba(149, 173, 189, 0.5), transparent 0 0 0;
  clip: rect(0, 1000px, 1000px, -10px);
}
/* Modifier of a column to display the "More" menu access */
.whp-workspace.whp-column1 h2 {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -120px -20px;
  text-indent: -5000px;
}
.whp-megamenu .whp-megamenu-link li {
  line-height: 1.8em;
}
/* Dev are usgin either a or span when the title takes the user somewhere */
.whp-megamenu-link h3 > a,
.whp-megamenu-link h3 > span {
  cursor: pointer;
}
.whp-megamenu-more {
  visibility: hidden;
  position: fixed;
  width: 300px;
  padding-top: 5px;
  padding: 5px 20px 20px;
  margin: 1px -3px;
  z-index: 9999;
}
.ie8 .whp-megamenu-more {
  margin-top: 1px;
}
.ie7 .whp-megamenu-more {
  z-index: 1000;
  margin-top: 1px;
}
.ie9 .whp-megamenu-more {
  margin-top: 1px;
}
.whp-megamenu-more .whp-megamenu-shortcuts h3 {
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  margin: 20px 5px 10px 10px;
}
.whp-megamenu-more #whp-new-workspace {
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  margin: 32px 5px 5px 10px;
}
.whp-megamenu-more .whp-megamenu-link {
  padding: 0;
  margin: 0 0 10px;
  list-style: none;
}
.whp-megamenu-more .whp-megamenu-link li .whp-thumbnail {
  width: 20px;
  height: 20px;
  float: left;
  background: url(../img/mainSprite.png) no-repeat;
  background-position: -120px 0px;
}
.whp-megamenu .whp-megamenu-separation ul:first-child {
  margin-top: -15px;
}
.whp-megamenu.whp-megamenu-custom .whp-megamenu-separation ul:first-child {
  margin-top: -15px;
}
.whp-megamenu-more .whp-megamenu-link li {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
}
/* Links in the Megamenu "More" */
.whp-megamenu-more .whp-megamenu-link li a {
  padding-left: 10px;
  padding-top: 2px;
  float: left;
  font-size: 100%;
}
.whp-megamenu-more .whp-megamenu-link li:after {
  clear: both;
}
.whp-megamenu-more .whp-megamenu-link li:before,
.whp-megamenu-more .whp-megamenu-link li:after {
  content: "";
  display: table;
}
/* Separation line */
.whp-megamenu-more .whp-megamenu-shortcuts hr {
  border-color: #e3e3e2;
}
.whp-megamenu-more .whp-megamenu-shortcuts .whp-megamenu-link li {
  line-height: 1.1em;
}
.whp-megamenu-more .whp-megamenu-link a {
  color: #97bdd7;
  font-weight: normal;
}
.whp-megamenu-more .whp-megamenu-shortcuts .whp-moreLinks {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 8px;
  display: block;
  color: #3087c4;
  font-weight: normal;
}
/************************ Megamenu - Left hand side column */
/* Vertical separation line */
/* Plus button with icon */
.whp-megamenu .whp-megamenu-link-add {
  color: #97bdd7;
  margin-top: 20px;
  width: 140px;
}
.whp-megamenu .whp-megamenu-link-add .whp-megamenu-link-add-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -100px 0px;
  float: right;
  width: 10px;
  height: 10px;
}
.whp-megamenu-link h3 {
  padding-bottom: 10px;
}
/************************ Megamenu - Links at the bottom */
.whp-megamenu .whp-megamenu-bottom {
  padding: 7px 20px 12px;
  background-color: #484848;
  font-size: 12px;
  box-sizing: border-box;
}
.whp-megamenu .whp-megamenu-bottom a {
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
}
.whp-megamenu .whp-megamenu-bottom .leftside-btns svg {
  margin-right: 5px;
  position: relative;
  top: 5px;
  fill: white;
}
.whp-megamenu .whp-megamenu-bottom .rightside-btns svg {
  margin-right: 3px;
  position: relative;
  top: 5px;
  fill: white;
}
.whp-megamenu .whp-megamenu-bottom .leftside-btns {
  float: left;
}
.whp-megamenu .whp-megamenu-bottom .rightside-btns {
  float: right;
}
.whp-megamenu-bottom .whp-btn {
  margin-right: 4px;
}
.whp-megamenu-bottom a {
  color: #a8a8a8;
  text-shadow: 0 -1px 0 #000000;
  cursor: pointer;
}
.whp-megamenu-bottom a:hover svg path,
.whp-megamenu-bottom a:hover {
  color: #a8a8a8;
  fill: #a8a8a8;
}
/************************ Megamenu - Specific style when you customise the megamenu */
/* Style when you active the megamenu customisation with no boxshadow support */
.whp-megamenu.whp-megamenu-custom {
  background: #f5f5f5;
  background: linear-gradient(to bottom, #f5f5f5 0, #f0f0f0 100%);
  border-left: 1px solid #bcbcbc;
  border-right: 1px solid #bcbcbc;
  border-bottom: 1px solid #bcbcbc;
}
/* Style when you active the megamenu customisation with boxshadow support */
.boxshadow .whp-megamenu.whp-megamenu-custom {
  box-shadow: 0 0 10px 5px rgba(149, 173, 189, 0.5), transparent 0 0 0;
}
/* Title custom column */
.whp-megamenu .whp-megamenu-shortcuts h3 {
  color: #908e8b;
  padding-left: 10px;
  margin-top: 7px;
  margin-bottom: 15px;
}
/* Specific color for title normal column custom megamenu */
.whp-megamenu.whp-megamenu-custom .whp-megamenu-link li h3,
.whp-megamenu.whp-megamenu-custom .whp-megamenu-link li a,
.whp-megamenu.whp-megamenu-custom .whp-megamenu-link li a:hover {
  color: #313131;
}
/* Left hand side column within the megamenu when the customisation is active */
.whp-megamenu.whp-megamenu-custom .whp-megamenu-shortcuts .whp-megamenu-link li:hover {
  background-color: #e5e5e5;
}
.whp-megamenu.whp-megamenu-custom .whp-megamenu-shortcuts .whp-megamenu-link li i {
  margin-top: 6px;
}
.whp-megamenu.whp-megamenu-custom .whp-megamenu-shortcuts .whp-megamenu-link li:hover .whp-megamenu-link-close-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -80px 0px;
}
/* Custom color for the bottom, replace the texture */
.whp-megamenu.whp-megamenu-custom .whp-megamenu-bottom {
  height: auto;
  background: transparent;
}
/* When you display a checkbox */
.whp-megamenu.whp-megamenu-custom input[type="checkbox"] {
  float: none;
  margin-top: 4px;
}
/************************ Menu nav for the full map */
.whp-nav-fullmap {
  position: absolute;
  left: 12px;
  top: 0;
}
/****************************************************************************************
	Header
****************************************************************************************/
.whp-header {
  width: 100%;
  position: fixed;
  top: 0;
  height: 50px;
  left: 0;
  z-index: 9000;
  background-color: #212121;
  box-shadow: 0 1px 5px 1px rgba(53, 87, 110, 0.4), transparent 0 0 0;
}
.whp-header-fullmap {
  box-shadow: 0 0 0 0, transparent 0 0 0;
}
.ie7 .whp-header {
  z-index: 800;
}
/* Company Logo */
.whp-header .whp-logo {
  float: left;
  width: 47px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -180px -80px;
  text-indent: -5000px;
  cursor: pointer;
}
.whp-header .whp-logo:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -180px -140px;
}
/* Page Title */
.whp-title {
  padding-top: 21px;
  margin-bottom: 18px;
  font-weight: 600;
  color: #4b7a96;
  text-shadow: 0 1px 0 #f2f5f7;
}
.ie7 .whp-title,
.ie8 .whp-title {
  padding-top: 10px;
  margin-bottom: 20px;
}
/* Page Title with line */
.whp-title-line {
  padding-bottom: 18px;
  border-bottom: 1px solid #dbdada;
  font-size: 1.667em;
  padding-top: 21px;
  margin-bottom: 18px;
  font-weight: 600;
  color: #4b7a96;
  text-shadow: 0 1px 0 #f2f5f7;
}
.ie7 .whp-title-line,
.ie8 .whp-title-line {
  padding-top: 10px;
  margin-bottom: 19px;
}
.whp-admin-page .whp-title-line {
  text-shadow: none;
}
.ie9 .whp-title,
.ie9 .whp-title-line {
  font-weight: 400;
  text-shadow: none;
}
.whp-section-title {
  font-size: 1.5em;
  margin-top: 20px;
  margin-bottom: 5px;
}
/****************************************************************************************
	Footer
****************************************************************************************/
.whp-footer {
  margin-top: 60px;
  height: 140px;
  color: #578cac;
  text-shadow: 0 1px 0 #f2f5f7;
}
/* Footer sepration line */
.whp-footer-border {
  height: 1px;
  margin-bottom: 20px;
  border-top: 1px solid #9ebbcd;
  background-color: #dde6ed;
}
.ie7 .whp-footer-border {
  height: 20px;
  background: none;
  border-top: 1px solid #a4bfd0;
}
.whp-footer-border:after {
  clear: both;
}
.whp-footer a,
.whp-login-footer a {
  color: #578cac;
}
/* Link within the footer */
.whp-footer ul li,
.whp-login-footer ul li {
  display: inline;
  float: left;
  padding-left: 13px;
  padding-right: 13px;
}
.whp-footer ul li:last-child,
.whp-login-footer ul li:last-child {
  padding-right: 0;
  border-right: 0;
}
/* Sidebar */
/****************************************************************************************
	Sidebar - Main container
****************************************************************************************/
.whp-sidebar {
  position: fixed;
  margin-left: 635px;
  top: 0;
  margin-top: 0;
  height: 100%;
  overflow: hidden;
  background-color: #ffffff;
  color: #313131;
}
.ie7 .whp-sidebar {
  margin-left: 30px !important;
  z-index: 900 !important;
}
.whp-sidebar ul {
  padding: 0;
  margin: 0;
}
/* If it's the admin section, the overflow is displayed for the blue arrow */
.whp-sidebar.whp-sidebar-admin {
  overflow: visible;
}
/* Ensure that the content is below the menu */
.whp-sidebar-content {
  margin-top: 70px;
  position: absolute;
}
/* Boxshadow */
.boxshadow .whp-sidebar-container {
  box-shadow: 0 0 5px 3px rgba(22, 60, 72, 0.2), transparent 0 0 0;
}
/************************ Item in the sidebar */
.whp-sidebar-item,
.whp-sidebar-item-admin {
  border-bottom: 1px solid #e8e7e7;
}
.whp-sidebar-item,
.whp-sidebar-item-time {
  float: left;
  width: 100%;
}
.ie7 .whp-sidebar-item {
  padding-bottom: 10px;
}
.whp-sidebar-item:after,
.whp-sidebar-item-time:after {
  clear: both;
}
.whp-sidebar-item:before,
.whp-sidebar-item:after,
.whp-sidebar-item-time:before,
.whp-sidebar-item-time:after {
  content: "";
  display: table;
}
.whp-sidebar-item-profile:last-child {
  padding-bottom: 25px;
}
.whp-sidebar-item:after {
  clear: both;
}
.whp-sidebar-item:before,
.whp-sidebar-item:after {
  content: "";
  display: table;
}
/* Separation between messages within sidebar items */
.whp-sidebar-item .whp-row {
  margin-bottom: 12px;
}
.whp-sidebar-item-admin .whp-row {
  margin-bottom: 0;
}
.whp-sidebar-item-admin-arrow {
  display: none;
  float: left;
  width: 18px;
  height: 35px;
  margin-left: -38px;
  margin-top: -8px;
}
/* Padding for activity stream with image */
.whp-sidebar-item .whp-column1 {
  padding-top: 4px;
  padding-right: 10px;
}
/* Set a curosr for the link within the item */
.whp-sidebar-item a {
  cursor: pointer;
}
/************************ Title of a sidebar */
.whp-sidebar-activity.whp-sidebar-title {
  border-bottom: 1px solid #efefef;
}
.whp-sidebar-title .whp-maintitle {
  line-height: 1em;
  color: #3f3f3f;
}
.whp-sidebar-title-notification {
  border-bottom: 1px solid #e8e7e7;
}
/* Subtitle for activity stream */
.whp-sidebar-title .whp-subtitle {
  color: #888888;
}
/* Sidebar for full map */
.whp-sidebar-fullmap {
  position: fixed;
  top: 0;
  right: 0;
}
.whp-sidebar-fullmap {
  width: 220px;
}
@media screen and (min-width: 1200px) {
  .whp-sidebar-fullmap {
    width: 340px;
  }
}
@media screen and (max-width: 1200px) {
  /* Item within the sidebar */
  .whp-sidebar-item {
    width: 200px;
  }
  /************************ Title of the sidebar */
  .whp-sidebar-title {
    padding: 7px 10px 18px;
  }
  .ie7 .whp-sidebar-title,
  .ie8 .whp-sidebar-title {
    padding-top: 8px;
  }
  /************************ Main Container of the sidebar */
  /* Margin left bigger */
  /* Specific condition in response the the existing Whispir interface */
  .whp-sidebar {
    margin-left: 760px !important;
  }
  .ie7 .whp-sidebar {
    margin-left: 30px !important;
  }
  /* Force fluid margin left */
  .whp-container-fluid .whp-sidebar {
    margin-left: 69% !important;
  }
  .whp-sidebar-controls.whp-container-fluid .whp-column2 {
    float: left;
    width: 15%;
    margin-left: 0 !important;
  }
  /* Tab's title and tabs's notifications */
  .whp-sidebar-controls .whp-sidebar-controls-item span.whp-sidebar-tab-title {
    width: 22px;
    height: 57px;
    display: block;
    margin: auto;
    padding: 0;
  }
  .whp-sidebar-controls .whp-sidebar-controls-item span.whp-sidebar-tab-notif {
    position: absolute;
    top: 25px;
    display: block;
    margin-left: 15px;
    padding: 2px 3px;
  }
  .ie7 .whp-sidebar-controls .whp-sidebar-controls-item span.whp-sidebar-tab-notif {
    margin-left: -20px;
  }
  .ie8 .whp-sidebar-controls .whp-sidebar-controls-item span.whp-sidebar-tab-notif {
    margin-left: -3px;
  }
  .whp-sidebar .whp-sidebar-menu {
    left: -90px !important;
  }
}
@media screen and (min-width: 1200px) {
  /* Item within the sidebar */
  .whp-sidebar-item {
    width: 300px;
  }
  /************************ Title of the sidebar */
  .whp-sidebar-title {
    padding: 7px 20px 18px;
  }
  .ie7 .whp-sidebar-title,
  .ie8 .whp-sidebar-title {
    padding-top: 8px;
  }
  /************************ Main Container of the sidebar */
  /* Margin left bigger */
  .whp-sidebar {
    margin-left: 770px !important;
  }
  .ie7 .whp-sidebar {
    margin-left: 30px !important;
  }
  /* Force fluid margin left */
  .whp-container-fluid .whp-sidebar {
    margin-left: 69% !important;
  }
  .whp-sidebar-controls.whp-container-fluid .whp-column2 {
    float: left;
    width: 15%;
    margin-left: 0 !important;
  }
  /* Tab's title and tabs's notifications */
  .whp-sidebar-controls .whp-sidebar-controls-item span.whp-sidebar-tab-title {
    width: 22px;
    height: 57px;
    display: block;
    margin: auto;
    padding: 0;
  }
  .whp-sidebar-controls .whp-sidebar-controls-item span.whp-sidebar-tab-notif {
    position: absolute;
    display: block;
    top: 25px;
    margin-left: 5px;
    padding: 2px 3px;
  }
  .ie7 .whp-sidebar-controls .whp-sidebar-controls-item span.whp-sidebar-tab-notif {
    margin-left: -25px;
  }
  .ie8 .whp-sidebar-controls .whp-sidebar-controls-item span.whp-sidebar-tab-notif {
    margin-left: -2px;
  }
  .whp-sidebar .whp-sidebar-menu {
    left: 20px !important;
  }
}
/****************************************************************************************
	Sidebar - Activity Stream + History + Notification
****************************************************************************************/
/************************ Update of an item */
.whp-sidebar-item-update {
  background-color: #ecf5e4;
}
.whp-sidebar-item-update.whp-ANIM-flip {
  transition: background-color 1200ms ease;
}
.whp-sidebar-item-update.whp-ANIM-flip {
  background-color: #ffffff;
}
/************************ Creation of an item */
.whp-sidebar-item-new {
  opacity: 0;
  transform: rotateX(80deg);
  transform-style: preserve-3d;
  background-color: #ecf5e4;
}
.whp-sidebar-item-new.whp-ANIM-flip {
  transition: all 600ms ease, background-color 1200ms ease, opacity 300ms ease;
  transform-style: preserve-3d;
}
.whp-sidebar-item-new.whp-ANIM-flip {
  opacity: 1;
  transform: rotateX(0deg);
  transform-style: preserve-3d;
  background-color: #ffffff;
}
/************************ Icons used for different items */
.whp-sidebar-icons-group {
  float: left;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -240px;
  height: 17px;
  width: 21px;
}
.whp-sidebar-icons-people {
  float: left;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -240px;
  height: 18px;
  width: 18px;
}
.whp-sidebar-icons-draft {
  float: left;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -240px;
  height: 18px;
  width: 14px;
}
.whp-sidebar-icons-calendar {
  float: left;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -240px;
  height: 17px;
  width: 16px;
}
.whp-sidebar-icons-message {
  float: left;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -240px;
  height: 12px;
  width: 18px;
}
.whp-sidebar-icons-chat {
  float: left;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -240px;
  height: 18px;
  width: 18px;
}
.whp-sidebar-icons-wks {
  float: left;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px -240px;
  height: 13px;
  width: 18px;
}
/************************ Time in item */
.whp-sidebar-item-content-time {
  color: #a2a1a1;
}
/* Time in title (title of a group of card) - title */
.whp-sidebar-item-time {
  padding: 10px 0 10px 0;
  font-weight: 600;
  color: #a2a1a1;
}
/* Time in notification's title (title of a group of card) - title */
.whp-sidebar-item-time.whp-sidebar-item {
  font-weight: 600;
  color: #a2a1a1;
}
/* Time in title - title */
.whp-sidebar-item-title .whp-sidebar-item-content-time {
  font-weight: 600;
}
/* Style for item - content */
.whp-sidebar-item-content h4 {
  font-weight: 600;
}
.whp-sidebar-item-content .whp-sidebar-item-content-author {
  display: block;
  font-weight: 600;
}
/* Style for item - comment */
.whp-sidebar-item-comment textarea {
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid #cacaca;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, transparent 0 0 0;
  height: 20px;
}
.whp-sidebar-item-comment-history,
.whp-sidebar-item-comment-followers {
  color: #c1c1c1;
}
.whp-sidebar-item-comment-history,
.whp-followers-menu-access {
  cursor: pointer;
}
.whp-sidebar-item-comment-history:hover,
.whp-sidebar-item-comment-followers:hover {
  color: #3f3f3f;
}
/* Deactivate hover for history */
.whp-sidebar-history .whp-sidebar-item-comment-followers {
  cursor: default;
}
.whp-sidebar-history .whp-sidebar-item-comment-followers:hover {
  color: #c1c1c1;
}
.whp-sidebar-item-comment-history .whp-sidebar-icons-history {
  float: left;
  width: 13px;
  height: 13px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -260px;
  margin-top: 2px;
  margin-right: 8px;
}
.whp-sidebar-item-comment-followers .whp-sidebar-icons-followers {
  float: left;
  width: 14px;
  height: 13px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -260px;
  margin-top: 2px;
  margin-right: 8px;
}
.whp-sidebar-item-comment-history:hover .whp-sidebar-icons-history {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -260px;
}
.whp-sidebar-item-comment-followers:hover .whp-sidebar-icons-followers {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px -260px;
}
/* Deactivate hover for history */
.whp-sidebar-history .whp-sidebar-item-comment-history:hover .whp-sidebar-icons-history {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -260px;
}
.whp-sidebar-history .whp-sidebar-item-comment-followers:hover .whp-sidebar-icons-followers {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -260px;
}
/* Active state for followers link */
.whp-sidebar-item-comment-followers.whp-active {
  color: #3f3f3f;
}
.whp-sidebar-item-comment-followers.whp-active .whp-sidebar-icons-followers {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px -260px;
}
/************************ Style for notification tab */
.whp-sidebar-notification {
  border-bottom: 1px solid #efefef;
}
.whp-sidebar-notification.whp-sidebar-item-content-box .whp-sidebar-item-content-action {
  font-weight: 600;
}
/************************ Style for the history tab */
/* Mask the histore if the admin pannel is active */
.whp-sidebar-admin .whp-sidebar-history {
  display: none;
}
.whp-sidebar-history {
  background-color: #ffffff;
}
.whp-sidebar-history .whp-sidebar-item-time {
  padding-top: 0;
  display: block;
}
.whp-sidebar-back {
  border-bottom: 1px solid #e8e7e7;
  padding-top: 25px;
  padding-bottom: 25px;
  line-height: 0;
  font-weight: 600;
  color: #3087c4;
  cursor: pointer;
}
.whp-sidebar-back .whp-sidebar-icons-back {
  float: left;
  width: 5px;
  height: 8px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -260px;
  margin-top: -5px;
  margin-left: 20px;
  margin-right: 11px;
}
/************************ Display number of older comments*/
.whp-sidebar-alert-content {
  color: #3087c4;
}
.whp-sidebar-alert-link {
  color: #3087c4;
}
.whp-sidebar-alert-number {
  padding: 0 3px 0 3px;
  border: 1px solid #c4c4c4;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: #e8e8e8;
  font-weight: 600;
  color: #575757;
  text-shadow: 1px 0 1px #fff;
}
/************************ Error overlay */
.rgba .whp-sidebar-overlay {
  background-color: rgba(217, 227, 235, 0.4);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 4999;
  padding-top: 60px;
}
.no-rgba .whp-sidebar-overlay {
  background: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66d9e3eb', endColorstr='#66d9e3eb', GradientType=0);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 4999;
  padding-top: 60px;
}
@media screen and (max-width: 1200px) {
  /************************ Menu at the top of the activity stream */
  .whp-sidebar-access-menu-box span {
    display: none;
  }
  /************************ Creation of a post */
  .whp-sidebar-create-box {
    margin-top: 10px;
  }
  /************************ Item within the sidebar */
  .whp-sidebar-item {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
  }
  /************************ Column structure for item - title */
  .whp-sidebar-item-title .whp-sidebar-item-icon {
    width: 30px;
    float: left;
  }
  .whp-sidebar-item-title .whp-sidebar-item-content {
    width: 125px;
    margin-right: 5px;
    float: left;
  }
  .ie7 .whp-sidebar-item-title .whp-sidebar-item-content,
  .ie8 .whp-sidebar-item-title .whp-sidebar-item-content {
    width: 130px;
    margin: 0;
  }
  /* Opera fix alignement with time */
  x:-o-prefocus,
  .whp-sidebar-item-content {
    width: 200px;
    margin-right: 10px;
  }
  .whp-sidebar-item-title .whp-sidebar-item-content-time {
    width: 30px;
    margin-left: 6px;
    float: right;
  }
  .ie7 .whp-sidebar-item-title .whp-sidebar-item-content-time,
  .ie8 .whp-sidebar-item-title .whp-sidebar-item-content-time {
    width: 40px;
    margin-left: 0;
    float: right;
  }
  /* Container for a title */
  .whp-sidebar-item-title:after {
    clear: both;
  }
  /************************ Column structure for item - Notification */
  .whp-row.whp-sidebar-item-content-box.whp-sidebar-notification {
    width: 200px;
    padding: 10px;
  }
  .whp-sidebar-notification .whp-sidebar-item-icon {
    float: left;
    width: 30px;
  }
  .whp-sidebar-notification.whp-sidebar-item-content-box .whp-sidebar-item-content {
    float: left;
    margin-left: 0;
    width: 110px;
  }
  /* Opera - Avoid cariage return for date */
  x:-o-prefocus,
  .whp-sidebar-notification.whp-sidebar-item-content-box .whp-sidebar-item-content {
    width: 100px;
    margin-right: 10px;
  }
  /* Avoid cariage return for date */
  .ie7 .whp-sidebar-notification.whp-sidebar-item-content-box .whp-sidebar-item-content {
    width: 100px;
  }
  .whp-sidebar-notification.whp-sidebar-item-content-box .whp-sidebar-item-content-time {
    float: right;
    margin-top: 3px;
    width: 50px;
  }
  /************************ Column structure for item - content */
  .whp-sidebar-item-content-box .whp-sidebar-item-content {
    margin-left: 20px;
    width: 180px;
  }
  .whp-sidebar-item-content-box .whp-sidebar-item-content-author {
    float: left;
  }
  .whp-sidebar-item-content-box .whp-sidebar-item-content-time {
    width: 43px;
    margin-left: 6px;
    float: right;
  }
  .whp-sidebar-item-content-box .whp-sidebar-item-content-text {
    float: left;
    width: 180px;
  }
  /************************ Column structure for item - comment */
  .whp-sidebar-item-comment {
    margin-left: 20px;
  }
  .whp-sidebar-item-comment:after {
    clear: both;
  }
  .whp-sidebar-item-comment textarea {
    width: 160px;
  }
  .whp-sidebar-item-comment-history {
    width: 100px;
    float: left;
  }
  .whp-sidebar-item-comment-followers {
    width: 160px;
    float: left;
  }
  .whp-sidebar-item-comment-history,
  .whp-sidebar-item-comment-followers {
    margin-top: 0;
  }
  /************************ History - Column structure */
  .whp-sidebar-history {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 360px;
    margin-top: 50px;
    bottom: 0;
  }
  .whp-sidebar-history .whp-sidebar-item {
    padding-left: 0;
    padding-right: 0;
    margin-left: 10px;
    margin-right: 10px;
  }
  /************************ Time in notification's title (title of a group of card) - title */
  .whp-sidebar-item-time.whp-sidebar-item {
    padding: 10px 20px 0px 10px;
  }
  /* Forced padding bottom */
  .ie7 .whp-sidebar-item-time.whp-sidebar-item {
    padding: 10px 20px 10px 10px;
  }
}
@media screen and (min-width: 1200px) {
  /************************ Menu at the top of the activity stream */
  .whp-sidebar-access-menu-box span {
    float: left;
    margin-left: 30px;
    margin-right: 10px;
    display: block;
  }
  /************************ Creation of a post */
  .whp-sidebar-create-box {
    margin-top: 23px;
  }
  /************************ Item within the sidebar */
  .whp-sidebar-item {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
  }
  /************************ Column structure for item - title */
  .whp-sidebar-item-title .whp-sidebar-item-icon {
    width: 30px;
    float: left;
  }
  .whp-sidebar-item-title .whp-sidebar-item-content {
    width: 200px;
    margin-right: 5px;
    float: left;
  }
  .ie7 .whp-sidebar-item-title .whp-sidebar-item-content,
  .ie8 .whp-sidebar-item-title .whp-sidebar-item-content {
    width: 230px;
    margin: 0;
  }
  /* Opera fix alignement with time */
  x:-o-prefocus,
  .whp-sidebar-item-content {
    width: 200px;
    margin-right: 10px;
  }
  .whp-sidebar-item-title .whp-sidebar-item-content-time {
    width: 57px;
    margin-left: 6px;
    float: right;
  }
  .ie7 .whp-sidebar-item-title .whp-sidebar-item-content-time,
  .ie8 .whp-sidebar-item-title .whp-sidebar-item-content-time {
    width: 40px;
    margin-left: 0;
    float: right;
  }
  /* Container for a title */
  .whp-sidebar-item-title:after {
    clear: both;
  }
  /************************ Column structure for item - Notification */
  .whp-row.whp-sidebar-item-content-box.whp-sidebar-notification {
    width: 320px;
  }
  .whp-sidebar-notification {
    padding: 10px 0 10px 20px;
  }
  .whp-sidebar-notification .whp-sidebar-item-icon {
    float: left;
    width: 30px;
  }
  .whp-sidebar-notification.whp-sidebar-item-content-box .whp-sidebar-item-content {
    float: left;
    margin-left: 0;
    width: 200px;
  }
  .whp-sidebar-notification.whp-sidebar-item-content-box .whp-sidebar-item-content-time {
    float: right;
    margin-top: 3px;
    width: 60px;
  }
  /************************ Column structure for item - content */
  .whp-sidebar-item-content-box .whp-sidebar-item-content {
    margin-left: 30px;
    width: 270px;
  }
  .whp-sidebar-item-content-box .whp-sidebar-item-content-author {
    float: left;
  }
  .whp-sidebar-item-content-box .whp-sidebar-item-content-time {
    width: 43px;
    margin-left: 6px;
    float: right;
  }
  .whp-sidebar-item-content-box .whp-sidebar-item-content-text {
    float: left;
    width: 260px;
  }
  /************************ Column structure for item - comment */
  .whp-sidebar-item-comment {
    margin-left: 30px;
  }
  .whp-sidebar-item-comment:after {
    clear: both;
  }
  .whp-sidebar-item-comment textarea {
    width: 260px;
  }
  .whp-sidebar-item-comment-history {
    width: 100px;
    display: inline-block;
  }
  .ie7 .whp-sidebar-item-comment-history,
  .ie8 .whp-sidebar-item-comment-history {
    float: left;
  }
  .whp-sidebar-item-comment-followers {
    width: 160px;
    display: inline-block;
  }
  .ie7 .whp-sidebar-item-comment-followers,
  .ie8 .whp-sidebar-item-comment-followers {
    float: left;
  }
  .whp-sidebar-item-comment-history,
  .whp-sidebar-item-comment-followers {
    margin-top: 10px;
  }
  /************************ History - Column structure */
  .whp-sidebar-history {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 360px;
    margin-top: 50px;
    bottom: 0;
  }
  .whp-sidebar-history .whp-sidebar-item {
    padding-left: 0;
    padding-right: 0;
    margin-left: 20px;
    margin-right: 20px;
  }
  /************************ Time in notification's title (title of a group of card) - title */
  .whp-sidebar-item-time.whp-sidebar-item {
    padding: 10px 20px 0px 20px;
  }
  /* Forced padding bottom */
  .ie7 .whp-sidebar-item-time.whp-sidebar-item {
    padding: 10px 20px 10px 20px;
  }
}
/****************************************************************************************
	Sidebar - Create a post + Suggestion of contact with creation of post
****************************************************************************************/
.whp-sidebar-create-box {
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid #cacaca;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, transparent 0 0 0;
}
.whp-sidebar-create-box .whp-sidebar-create-post,
.whp-sidebar-create-box .whp-sidebar-create-post:hover {
  height: 40px;
  width: 95%;
  padding-top: 5px;
  padding-left: 8px;
  resize: none;
  border: 0;
  border-radius: 0;
  background-clip: padding-box;
  background: none;
  color: #9f9d9a;
  box-shadow: 0 0 0 0;
}
.whp-sidebar-create-box.whp-focus .whp-sidebar-create-post {
  color: #313131;
}
.whp-sidebar-create-box.whp-focus {
  background-color: #f9f9f9;
}
.whp-sidebar-create-button {
  padding-right: 4px;
  border-top: 1px solid #d9d9d9;
  background-color: #ececec;
  text-align: right;
}
.whp-sidebar-create-button .whp-btn {
  margin-top: 4px;
  margin-bottom: 5px;
}
/* Bouton to add a contact */
.whp-sidebar-add-contacts {
  float: left;
  width: 23px;
  height: 13px;
  margin-top: 10px;
  margin-left: 8px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -260px;
}
.whp-sidebar-add-contacts-box {
  width: 42px;
  height: 34px;
  float: left;
  cursor: pointer;
}
/* Hach Safari-Opera fix the bck color when hover */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .whp-sidebar-add-contacts-box {
    width: 42px;
    height: 32px;
    float: left;
    cursor: pointer;
  }
}
/* Hach IE9 fix the bck color when hover */
.ie8 .whp-sidebar-add-contacts-box,
.ie9 .whp-sidebar-add-contacts-box {
  height: 32px;
}
.whp-sidebar-add-contacts-box:hover {
  border-right: 1px solid #d9d9d9;
  background-color: #fcfcfc;
}
/************************ Field to add a contact */
.whp-sidebar-add-contact-field {
  padding-left: 8px;
  border-top: 1px dotted #d9d9d9;
}
.whp-sidebar-create-box .whp-sidebar-add-contact-field input,
.whp-sidebar-create-box .whp-sidebar-add-contact-field input:hover {
  padding: 0;
  width: 30%;
  border: 0;
  border-radius: 0;
  background-clip: padding-box;
  background: none;
  color: #9f9d9a;
  box-shadow: 0 0 0 0, transparent 0 0 0;
}
.ie7 .whp-sidebar-add-contact-field input {
  margin-left: 5px;
}
.whp-sidebar-add-contact-field.whp-focus {
  background-color: #ffffff;
}
.whp-sidebar-add-contact-field.whp-focus input {
  color: #313131;
}
/* Contact added in the contact field area */
.whp-sidebar-contact {
  margin-bottom: 2px;
  margin-left: 2px;
  display: inline-block;
  padding: 3px 7px 4px 5px;
  background-color: #e1e9ee;
  line-height: 0;
  color: #3087c4;
  text-shadow: 0 1px 1px #ffffff;
}
.ie7 .whp-sidebar-contact {
  margin-top: 3px;
  margin-right: 3px;
}
.whp-sidebar-contact i {
  display: inline-block;
  width: 7px;
  height: 8px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -240px;
}
/************************ Area to pick a contact */
.whp-sidebar-suggest {
  padding: 0;
  position: relative;
  border-top: 1px solid #cacaca;
  background: #ffffff;
  list-style: none;
}
.whp-sidebar-suggest.whp-followers-add-field-suggest {
  border-left: 1px solid #cacaca;
  border-right: 1px solid #cacaca;
  border-bottom: 1px solid #cacaca;
  border-top: 0;
}
.whp-custom-dropdown span.whp-custom-dropdown-value {
  display: none;
}
.whp-sidebar-suggest li a {
  padding-left: 25px;
  padding-top: 9px;
  padding-bottom: 9px;
  height: 17px;
  display: block;
  border-bottom: 1px solid #e0e0e0;
  color: #3e3e3e;
  font-weight: 400;
  cursor: normal;
}
.whp-sidebar-suggest li:last-child a {
  border-bottom: 0;
}
.whp-sidebar-suggest li a:hover {
  background-color: #e1e9ee;
  color: #3087c4;
  cursor: pointer;
}
.whp-sidebar-suggest li a {
  padding-left: 9px;
}
.whp-sidebar-suggest li a i {
  float: left;
  height: 18px;
  width: 18px;
  margin-right: 7px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -240px;
}
.whp-sidebar-suggest .whp-distribution-list a i {
  float: left;
  height: 17px;
  width: 21px;
  margin-right: 4px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -240px;
}
/****************************************************************************************
	Sidebar - Administration pannel
****************************************************************************************/
.whp-sidebar-item-admin {
  padding: 8px 20px 7px 20px;
  height: 20px;
  color: #578cac;
  cursor: pointer;
}
.whp-sidebar-item-admin:hover {
  background-color: #e1e9ee;
  color: #3087c4;
  font-weight: bold;
}
/* Active item */
.whp-sidebar-item-admin.whp-active {
  background-image: url("../img/bckAdminSidebarHover.png");
  color: #ffffff;
  font-weight: bold;
}
.whp-sidebar-item-admin:hover a,
.whp-sidebar-item-admin a:hover {
  color: #3087c4;
}
.whp-sidebar-item-admin.whp-active .whp-sidebar-item-admin-arrow {
  display: inline-block;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -80px;
}
/****************************************************************************************
	Sidebar - Control at the top
****************************************************************************************/
/* Background for the sidebar's menu */
.whp-sidebar-controls {
  height: 57px;
  width: 100%;
  position: absolute;
  z-index: 5000;
  background-image: url("../img/bckSidebar.png");
  background-repeat: repeat-x;
}
/* Hide unselected tabs */
.ui-tabs .ui-tabs-hide {
  position: absolute;
  left: -10000px;
}
/************************ Icons in the menu */
/* Activity Stream */
.whp-sidebar-tabs-1 .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px -80px;
}
.whp-sidebar-tabs-1:hover .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px -140px;
}
.whp-active .whp-sidebar-tabs-1 .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px -200px;
}
/* Profile */
.whp-sidebar-tabs-2 .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -40px -80px;
}
.whp-sidebar-tabs-2:hover .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -40px -140px;
}
.whp-active .whp-sidebar-tabs-2 .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -40px -200px;
}
/* Search */
.whp-sidebar-tabs-3 .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -80px -80px;
}
.whp-sidebar-tabs-3:hover .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -80px -140px;
}
.whp-active .whp-sidebar-tabs-3 .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -80px -200px;
}
/* Administration */
.whp-sidebar-tabs-4 .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -120px -80px;
}
.whp-sidebar-tabs-4:hover .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -120px -140px;
}
.whp-active .whp-sidebar-tabs-4 .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -120px -200px;
}
/* Notifications */
.whp-sidebar-tabs-5 .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px -380px;
}
.whp-sidebar-tabs-5:hover .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px -440px;
}
.whp-active .whp-sidebar-tabs-5 .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px -500px;
}

/* Whispir Store */
.whp-sidebar-tabs-6 .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px -280px;
}
.whp-sidebar-tabs-6:hover .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -30px -280px;
}
.whp-active .whp-sidebar-tabs-6 .whp-sidebar-tab-title {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -60px -280px;
}

/* Sprite management for the menu buttons - Main menu */
.whp-sidebar-controls .whp-sidebar-controls-item {
  height: 50px;
}
.whp-sidebar-controls .whp-sidebar-controls-item a {
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  cursor: pointer;
}
.whp-sidebar-controls .whp-sidebar-controls-item:hover a {
  background-color: #3e3e3e;
}
/* Tab's title and tabs's notifications */
.whp-sidebar-controls .whp-sidebar-controls-item .whp-sidebar-tab-title {
  text-indent: -5000px;
}
.whp-sidebar-controls .whp-sidebar-controls-item.whp-active a {
  background-color: #3e3e3e;
  border-bottom: 4px solid #005cff;
  box-sizing: border-box;
}
/* Notification in the sidebar */
.whp-sidebar-controls .whp-sidebar-controls-item .whp-sidebar-tab-notif {
  border: 1px solid #9f2222;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #f11d1d;
  color: #ffffff;
  font-weight: 600;
}
.ie7 .whp-sidebar-controls .whp-sidebar-controls-item .whp-sidebar-tab-notif {
  font-weight: 400;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .whp-sidebar-controls .whp-sidebar-controls-item .whp-sidebar-tab-notif {
    font-weight: 400;
  }
}
/************************ Sprite management for the minimize button and possible other features - Main menu */
/* Minimize the content of the sidebar */
.whp-minimized.whp-sidebar {
  height: 49px;
  border-bottom: 1px solid #0a1015;
}
/* Minimize - Delete the drop shadow */
.boxshadow .whp-minimized.whp-sidebar {
  box-shadow: 0 0 0 0, transparent 0 0 0;
}
/* Minimize button */
.whp-sidebar-controls-special {
  float: right;
  margin-right: 20px;
}
.whp-sidebar-controls-special #whp-sidebar-minimize {
  display: block;
  width: 19px;
  height: 50px;
  margin-right: 20px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -160px -80px;
  text-indent: -5000px;
  cursor: pointer;
}
.whp-sidebar-controls-special #whp-sidebar-minimize:hover,
.whp-sidebar-controls-special #whp-sidebar-minimize:active {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -160px -140px;
}
/* Maximize button */
.whp-minimized #whp-sidebar-minimize {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -40px -380px;
}
.whp-minimized #whp-sidebar-minimize:hover,
.whp-minimized #whp-sidebar-minimize:active {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -40px -440px;
}
/* Hide the sidebar */
.whp-minimized .whp-sidebar-container {
  display: none;
}
/****************************************************************************************
	Sidebar - Flyout menu
****************************************************************************************/
/************************ Icon to activate the menu */
.whp-sidebar-access-menu-box {
  margin-top: 5px;
  float: right;
  color: #3087c4;
  cursor: pointer;
}
.whp-sidebar-access-menu-box span {
  float: left;
  margin-left: 30px;
  margin-right: 10px;
}
.whp-sidebar-access-menu {
  margin-left: 3px;
  width: 18px;
  height: 15px;
  display: block;
  float: right;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px 0px;
  text-indent: -5000px;
}
.whp-sidebar-access-menu:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -20px;
}
.whp-sidebar-access-menu.whp-hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -40px;
}
/************************ The menu */
.whp-sidebar-menu {
  z-index: 9999;
  border: 1px solid #bcbcbc;
  background: #f5f5f5;
  background: linear-gradient(to bottom, #f5f5f5 0, #f0f0f0 100%);
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), transparent 0 0 0;
}
.whp-sidebar-menu:after,
.whp-sidebar-menu:before {
  bottom: 100%;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border: solid transparent;
  pointer-events: none;
}
.whp-sidebar-menu:after {
  left: 290px;
  margin-left: -10px;
  border-bottom-color: #f4f4f4;
  border-width: 10px;
}
.whp-sidebar-menu:before {
  left: 290px;
  margin-left: -11px;
  border-bottom-color: #bcbcbc;
  border-width: 11px;
}
.whp-sidebar-menu hr {
  margin-top: 9px;
  margin-bottom: 0;
  border-color: #e0e0e0;
}
.whp-sidebar-menu .whp-control-group {
  padding-left: 0;
}
.whp-sidebar-menu-link {
  color: #3e3e3e;
}
.ie7 .whp-sidebar-menu-link label {
  display: inline-block;
}
.whp-sidebar-menu-link input {
  margin-right: 9px;
}
/* Align span with check box */
.whp-sidebar-menu .whp-control-fluid span {
  padding-top: 0;
}
.whp-sidebar-menu h3 {
  margin-bottom: 10px;
  margin-top: 18px;
}
.whp-sidebar-menu .whp-form-actions {
  margin-top: 16px;
}
@media screen and (max-width: 1200px) {
  /* Menu at the top of the ativity stream */
  .whp-sidebar-menu {
    visibility: visible;
    width: 276px;
    margin-top: 35px;
    position: absolute;
    padding-left: 17px;
    padding-right: 17px;
    padding-bottom: 17px;
  }
  .ie7 .whp-sidebar-menu {
    margin-top: 5px;
  }
  .whp-sidebar-menu-link {
    list-style: none;
  }
}
@media screen and (min-width: 1200px) {
  /* Menu at the top of the ativity stream */
  .whp-sidebar-menu {
    visibility: visible;
    width: 276px;
    margin-top: 35px;
    position: absolute;
    padding-left: 17px;
    padding-right: 17px;
    padding-bottom: 17px;
  }
  .ie7 .whp-sidebar-menu {
    margin-top: 5px;
  }
  .whp-sidebar-menu-link {
    list-style: none;
  }
}
/****************************************************************************************
	Sidebar - Menu to add or remove followers
****************************************************************************************/
.whp-followers-menu {
  color: #3e3e3e !important;
  border: 1px solid #bcbcbc;
  background: #f5f5f5;
  background: linear-gradient(to bottom, #f5f5f5 0, #f0f0f0 100%);
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), transparent 0 0 0;
}
.whp-followers-menu:after,
.whp-followers-menu:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.whp-followers-menu:after {
  border-bottom-color: #f4f4f4;
  border-width: 10px;
}
.whp-followers-menu:before {
  border-bottom-color: #bcbcbc;
  border-width: 11px;
}
/* Nested list within the followers menu (specific to this menu) */
.whp-followers-menu .whp-nested-list {
  border-radius: 2px;
  background-clip: padding-box;
  border: 1px solid #cacaca;
}
.whp-followers-menu .whp-nested-list ul li.whp-nested-list-item {
  border-bottom: 1px solid #e0e0e0;
}
.whp-followers-menu .whp-nested-list ul li.whp-nested-list-item:last-child {
  border-bottom: 0;
}
.whp-followers-menu .whp-nested-list-text {
  color: #3e3e3e;
  font-weight: 600;
}
.whp-followers-menu .whp-nested-list-link {
  margin-top: 3px;
  width: 40px;
  color: #3087c4;
  cursor: pointer;
}
/************************ Add a followers - area below the nested list */
/* Button to add a follower */
.whp-followers-add-field-icon {
  width: 42px;
  height: 35px;
  float: left;
  border-right: 1px solid transparent;
  cursor: pointer;
}
.whp-followers-add-field-icon i {
  float: left;
  width: 23px;
  height: 13px;
  margin-top: 10px;
  margin-left: 8px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -260px;
}
.whp-followers-add-field:hover .whp-followers-add-field-icon {
  border-right: 1px solid #d9d9d9;
  background-color: #fcfcfc;
}
.whp-row.whp-followers-header {
  color: #3e3e3e;
  font-weight: 600;
}
.whp-row.whp-followers-header .whp-column4 {
  text-align: right;
  color: #3087c4;
  cursor: pointer;
}
.whp-followers-add-field {
  display: block;
  height: 36px;
  border: 1px solid #bfbfbf;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: #ececec;
}
.whp-followers-add-field input {
  border: 0;
  border-radius: 0;
  background-clip: padding-box;
  background-color: #ececec;
  color: #3e3e3e;
  box-shadow: 0 0 0 0, transparent 0 0 0;
  cursor: pointer;
}
.whp-followers-add-field input:hover {
  border: 0 !important;
}
.whp-followers-add-field.whp-focus {
  border-top-right-radius: 0;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 0;
  background-clip: padding-box;
  background-color: #f9f9f9;
}
.whp-followers-add-field.whp-focus input,
.whp-followers-add-field.whp-focus input:hover {
  background-color: #f9f9f9;
}
@media screen and (max-width: 1200px) {
  .whp-row.whp-followers-header {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  /************************ Followers menu with the history link */
  .whp-followers-menu {
    width: 180px;
    margin-top: 10px;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    left: -26px;
    float: left;
  }
  .ie8 .whp-followers-menu {
    width: 176px;
    margin-top: 10px;
    position: absolute;
    padding-left: 17px;
    padding-right: 17px;
    left: 0;
  }
  .ie7 .whp-followers-menu {
    padding-bottom: 10px;
    width: 165px;
    left: -15px;
  }
  .whp-followers-menu:after {
    left: 180px;
    margin-left: -140px;
  }
  .whp-followers-menu:before {
    left: 180px;
    margin-left: -141px;
  }
  /************************ Nested List within the followers menu */
  .whp-followers-menu .whp-nested-list {
    width: 180px;
    height: auto !important;
    float: left;
    overflow: visible;
  }
  .ie7 .whp-followers-menu .whp-nested-list {
    width: 167px;
  }
  .whp-followers-menu .whp-nested-list .whp-sidebar-icons-people,
  .whp-followers-menu .whp-nested-list .whp-sidebar-icons-group {
    display: none;
  }
  .whp-followers-menu .whp-nested-list-text {
    width: 100px !important;
    margin-left: 10px;
    margin-top: 2px;
  }
  .whp-followers-add-field {
    width: 180px;
  }
  .ie7 .whp-followers-add-field {
    width: 165px;
  }
  .whp-followers-add-field input {
    float: left;
    width: 120px;
    margin-left: 7px;
    margin-top: 5px;
  }
  .ie7 .whp-followers-add-field input,
  .ie8 .whp-followers-add-field input {
    width: 110px;
  }
  .whp-followers-add-field.whp-focus input,
  .whp-followers-add-field.whp-focus input:hover {
    width: 140px;
  }
  /************************ Area to pick a contact in the follower add field */
  .whp-sidebar-contact-suggest.whp-followers-add-field-suggest {
    left: 0;
    width: 180px;
    margin-top: 0;
  }
  .ie8 .whp-sidebar-contact-suggest.whp-followers-add-field-suggest {
    width: 180px;
  }
  .ie7 .whp-sidebar-contact-suggest.whp-followers-add-field-suggest {
    width: 165px;
    margin-top: 0;
    left: 0;
  }
  /************************ Area to pick a contact */
  ul.whp-sidebar-contact-suggest {
    left: -8px;
    width: 198px;
  }
}
@media screen and (min-width: 1200px) {
  .whp-row.whp-followers-header {
    margin-top: 20px;
    margin-bottom: 17px;
  }
  /************************ Followers menu with the history link */
  .whp-followers-menu {
    width: 290px;
    margin-top: 10px;
    position: relative;
    padding: 0 10px 17px 10px;
    left: -138px;
    float: left;
  }
  .ie8 .whp-followers-menu {
    width: 276px;
    padding-left: 17px;
    padding-right: 17px;
  }
  .ie7 .whp-followers-menu {
    width: 276px;
    left: -138px;
    padding-left: 17px;
    padding-right: 17px;
  }
  .whp-followers-menu:after {
    left: 290px;
    margin-left: -140px;
  }
  .whp-followers-menu:before {
    left: 290px;
    margin-left: -141px;
  }
  /************************ Followers menu without the history link */
  .whp-followers-menu.whp-alone {
    left: -42px;
  }
  .ie7 .whp-followers-menu.whp-alone {
    width: 276px;
  }
  .whp-followers-menu.whp-alone:after {
    left: 290px;
    margin-left: -230px;
  }
  .whp-followers-menu.whp-alone:before {
    left: 290px;
    margin-left: -231px;
  }
  /************************ Nested List within the followers menu */
  .whp-followers-menu .whp-nested-list {
    width: 287px;
    height: auto !important;
    float: left;
    overflow: visible;
  }
  .ie7 .whp-followers-menu .whp-nested-list,
  .ie8 .whp-followers-menu .whp-nested-list {
    width: 275px;
  }
  .whp-followers-menu .whp-nested-list .whp-sidebar-icons-people,
  .whp-followers-menu .whp-nested-list .whp-sidebar-icons-group {
    margin-left: 10px;
  }
  .whp-followers-menu .whp-nested-list-text {
    width: 160px !important;
    margin-left: 10px;
    margin-top: 2px;
  }
  .ie7 .whp-followers-menu .whp-nested-list-text,
  .ie8 .whp-followers-menu .whp-nested-list-text {
    width: 275px;
  }
  .whp-followers-add-field {
    width: 288px;
  }
  .ie7 .whp-followers-add-field,
  .ie8 .whp-followers-add-field {
    width: 274px;
  }
  .whp-followers-add-field input {
    float: left;
    width: 230px;
    margin-left: 7px;
    margin-top: 5px;
  }
  .ie7 .whp-followers-add-field input,
  .ie8 .whp-followers-add-field input {
    float: left;
    width: 210px;
    margin-left: 7px;
    margin-top: 5px;
  }
  .whp-followers-add-field.whp-focus input,
  .whp-followers-add-field.whp-focus input:hover {
    width: 265px;
  }
  .ie7 .whp-followers-add-field.whp-focus input {
    width: 255px;
  }
  /************************ Area to pick a contact in the follower add field */
  .whp-sidebar-contact-suggest.whp-followers-add-field-suggest {
    left: 0;
    width: 288px;
    margin-top: 0;
  }
  .ie8 .whp-sidebar-contact-suggest.whp-followers-add-field-suggest {
    width: 274px;
  }
  .ie7 .whp-sidebar-contact-suggest.whp-followers-add-field-suggest {
    width: 272px;
    margin-top: 0;
    left: 0;
  }
  /************************ Area to pick a contact */
  ul.whp-sidebar-contact-suggest {
    left: -8px;
    width: 298px;
  }
}
/****************************************************************************************
	Sidebar - Profile pannel
****************************************************************************************/
.whp-sidebar-profile-card {
  padding: 23px 0 59px;
  margin-bottom: 19px;
  border: 1px solid #bfbfbf;
  border-radius: 5px;
  background-clip: padding-box;
  background: #f3f3f3;
  background: url("../img/bckProfile.png"), linear-gradient(to bottom, #f3f3f3 0, #e9e9e9 100%);
  background-repeat: repeat;
  text-shadow: 0 1px 0 #f2f5f7;
  box-shadow: 0 4px 4px 4px rgba(230, 230, 230, 0.5), transparent 0 0 0;
}
.whp-sidebar-profile-card .whp-column8 h3,
.whp-sidebar-profile-card .whp-column8 ul {
  margin-left: 19px;
}
.whp-sidebar-item-profile .whp-sidebar-profile-card li {
  margin-bottom: 3px;
}
/************************ Profile picture + A JS script (function named profilePicEffect) add a class when hover image */
.whp-sidebar-profile-pic {
  overflow: hidden;
  border-radius: 2px;
  background-clip: padding-box;
  cursor: pointer;
}
.ie7 .whp-sidebar-profile-pic,
.ie8 .whp-sidebar-profile-pic {
  width: 70px;
  height: 70px;
}
.whp-sidebar-profile-pic-hover {
  position: relative;
  display: inline-block;
  border-radius: 3px;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 3px #2c8fb9, transparent 0 0 0;
}
/* not show inset border for IE9 */
.ie9 .whp-sidebar-profile-pic-hover {
  box-shadow: 0 0 0 0;
}
.whp-pic-change {
  background-color: #ffffff;
}
/* Fix the hover text size for avatar when resize the window */
.whp-pic-change-text {
  display: none;
  opacity: 1;
  text-decoration: none;
  color: #2c8fb9;
  font-weight: bold;
  cursor: pointer;
}
/* Link list - Profile */
.whp-sidebar-item-profile ul {
  padding: 0;
  margin: 20px 0 0 0;
  list-style: none;
  font-weight: bold;
}
.whp-sidebar-item-profile ul li {
  margin-bottom: 5px;
  cursor: pointer;
}
.whp-sidebar-item-profile .whp-sidebar-profile-card ul {
  margin-top: 3px;
}
/* Preferences - Profile */
.whp-sidebar-item-profile .whp-sidebar-prof-pref label {
  margin-bottom: 0;
  display: inline-block;
}
.whp-sidebar-item-profile .whp-sidebar-prof-pref ul li {
  margin-bottom: 0;
}
#whp-sidebar-tabs-1 .whp-sidebar-item:last-child {
  border-bottom: 0;
}
@media screen and (max-width: 1200px) {
  .ie7 .whp-sidebar-item-profile .whp-sidebar-profile-pic,
  .ie8 .whp-sidebar-item-profile .whp-sidebar-profile-pic {
    float: none;
    width: 40px;
    height: 40px;
  }
  /* Fix the image and the inset border */
  .whp-sidebar-profile-pic {
    float: right;
    width: 40px;
    height: 40px;
    margin: 0 10px 19px 0;
  }
  .whp-sidebar-profile-pic img {
    width: 40px;
    height: 40px;
  }
  /* Container progress bar for profile image uploading */
  .whp-sidebar-profile-card .whp-column8 h3,
  .whp-sidebar-profile-card .whp-column8 ul {
    margin-left: 8px;
    margin-right: 8px;
  }
  .whp-sidebar-item-profile {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
  }
  /* Fix the hover text size for avatar when resize the window */
  .whp-pic-change-text {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  /* Fix the image and the inset border */
  .whp-sidebar-profile-pic {
    float: right;
    width: 70px;
    height: 70px;
    margin: 0 20px 19px 0;
  }
  .whp-sidebar-profile-pic img {
    width: 70px;
    height: 70px;
  }
  /* Fix the hover text size for avatar when resize the window */
  .whp-pic-change-text {
    position: absolute;
    left: 12px;
    top: 20px;
  }
  /* Container progress bar for profile image uploading */
  .whp-sidebar-profile-card .whp-column8 h3,
  .whp-sidebar-profile-card .whp-column8 ul {
    margin-left: 19px;
  }
  .whp-sidebar-item-profile {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
  }
}
/****************************************************************************************
	Sidebar - Custom scrollbar
****************************************************************************************/
.whp-custom-scrollbar {
  background-color: transparent;
}
.whp-custom-scrollbar .viewport {
  height: 99%;
  overflow: hidden;
  position: relative;
}
.whp-custom-scrollbar .overview {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  list-style: none;
}
.whp-custom-scrollbar .thumb .end {
  background: transparent;
}
.whp-custom-scrollbar .thumb {
  border-radius: 5px;
  background-clip: padding-box;
  background-color: #a0a0a0;
}
.ie7 .whp-custom-scrollbar .thumb {
  background-color: rgba(0, 0, 0, 0.3);
}
.whp-custom-scrollbar .scrollbar {
  opacity: 0;
}
.whp-custom-scrollbar:hover .scrollbar {
  opacity: 1;
}
.whp-custom-scrollbar .track {
  height: 100%;
  width: 7px;
  position: relative;
  padding: 0 1px;
  border-radius: 5px;
  background-clip: padding-box;
  background-color: #e5e5e5;
}
.ie7 .whp-custom-scrollbar .track {
  background-color: rgba(0, 0, 0, 0.1);
}
.whp-custom-scrollbar .thumb {
  height: 20px;
  width: 7px;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  top: 0;
}
.whp-custom-scrollbar .thumb .end {
  overflow: hidden;
  height: 5px;
  width: 13px;
}
.whp-custom-scrollbar .disable {
  display: none;
}
@media screen and (max-width: 1200px) {
  .whp-custom-scrollbar .scrollbar {
    float: right;
    width: 7px;
    position: absolute;
    margin-left: 208px;
    z-index: 8000;
  }
}
@media screen and (min-width: 1200px) {
  .whp-custom-scrollbar .scrollbar {
    float: right;
    width: 7px;
    position: absolute;
    margin-left: 328px;
    z-index: 8000;
  }
}
/* Shared icons */
/****************************************************************************************
	Shared Icons
	Note: 	Some icons are not shared so you may find icons 
			within the appropriate sections
****************************************************************************************/
.whp-icons-perm-usr {
  display: inline-block;
  width: 18px;
  height: 19px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -20px;
}
.whp-icons-perm-tem {
  display: inline-block;
  width: 18px;
  height: 19px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -20px;
}
.whp-icons-perm-pwr {
  display: inline-block;
  width: 18px;
  height: 19px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -20px;
}
.whp-icons-perm-cad {
  display: inline-block;
  width: 18px;
  height: 19px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -20px;
}
.whp-icons-calendar {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -40px;
}
.whp-icons-time {
  display: inline-block;
  width: 16px;
  height: 15px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -40px;
}
.whp-icons-fold {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -20px;
  float: left;
  width: 14px;
  height: 15px;
  margin-right: 5px;
  cursor: pointer;
}
.whp-icons-unfold {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -20px;
  float: left;
  width: 14px;
  height: 15px;
  margin-right: 5px;
  cursor: pointer;
}
.whp-icons-close {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px -260px;
  float: left;
  width: 17px;
  height: 16px;
}
.whp-icons-close:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -20px -260px;
  float: left;
  width: 17px;
  height: 16px;
}
.whp-icons-info {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -40px 0px;
  float: left;
  width: 12px;
  height: 12px;
  margin-right: 5px;
}
.whp-icons-quartet-expandall {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -160px -280px;
  float: left;
  width: 17px;
  height: 14px;
  margin-right: 2px;
  cursor: pointer;
}
.whp-icons-quartet-selectall {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -160px -260px;
  float: left;
  width: 17px;
  height: 14px;
  margin-right: 2px;
  cursor: pointer;
}
.whp-icons-quartet-deselectall {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -180px -260px;
  float: left;
  width: 17px;
  height: 14px;
  cursor: pointer;
}
.whp-icons-folder-inbox {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -200px -260px;
  float: left;
  width: 24px;
  height: 15px;
}
.whp-icons-folder-sent {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -240px -260px;
  float: left;
  width: 25px;
  height: 15px;
}
.whp-icons-folder-unsent {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -280px -260px;
  float: left;
  width: 22px;
  height: 15px;
}
.whp-icons-folder-deleted {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -260px;
  float: left;
  width: 23px;
  height: 15px;
}
.whp-icons-disabled-checkbox {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -180px -280px;
  float: left;
  width: 14px;
  height: 14px;
  margin-left: 5px;
}
.whp-icons-enabled-checkbox {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -200px -280px;
  float: left;
  width: 17px;
  height: 14px;
  margin-left: 5px;
}
.whp-icons-deleted {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -80px 0px;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  margin-right: 5px;
  margin-top: 5px;
  width: 16px;
}
.whp-icons-large-tick {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -160px -440px;
  display: inline-block;
  height: 10px;
  width: 10px;
}
.whp-icons-video {
  background: url(../img/mainSprite.png) no-repeat;
  background-position: -420px -625px;
  display: inline-block;
  height: 19px;
  width: 25px;
  margin-right: 5px;
  position: relative;
  top: 4px;
}
/* Container */
/****************************************************************************************
	Text styles
****************************************************************************************/
.whp-title-dark-18 {
  color: #1d1d1d;
  font-size: 18px;
  font-weight: bold;
}
.whp-title-light-10-caps {
  font-size: 10px;
  color: #adadad;
  text-transform: uppercase;
}
.whp-blue-link-14 {
  font-size: 14px;
  font-weight: bold;
}
/****************************************************************************************
	Container which displays blue border and white background 
	+ rolodex and pagination style
****************************************************************************************/
.whp-container-data,
.whp-container-form {
  background-color: #ffffff;
  border: 1px solid #b5c9d6;
  padding: 10px;
  padding-bottom: 30px;
}
.whp-container-table-popup {
  padding-top: 10px;
  padding-bottom: 40px;
}
.whp-container-actions {
  border: 1px solid #b5c9d6;
  background-image: url("../img/bckActions.png");
  background-repeat: repeat;
  padding: 10px 10px 0 10px;
  color: #578cac;
  min-height: 27px;
}
.whp-admin-container .whp-container-actions {
  padding: 10px;
}
.whp-container-actions.whp-comp-box {
  padding: 19px 10px;
  border: 1px solid #b5c9d6;
  background-image: url("../img/bckActionsComp.png");
  background-repeat: repeat;
  color: #578cac;
}
.whp-container-actions.whp-no-bottom-border {
  padding-bottom: 10px;
}
/************************ DATA - Form Header */
.whp-container-data .whp-form-title h2 {
  padding-top: 0;
}
/************************ FORM - Form Header */
.whp-container-form .whp-form-header,
.whp-container-form .whp-form-title {
  border: none;
  background: none;
  color: #313131;
  font-weight: 400;
}
/************************ ACTION - Form Header */
.whp-container-actions .whp-form-header {
  background: none;
}
.whp-container-actions .whp-form-bck {
  background: none;
}
/* Adaptation for labels within an action container, header container and new message page type */
.whp-container-actions .whp-control-label label,
.whp-container-actions label,
.whp-comp-bck .whp-control-label label,
.whp-comp-bck label {
  margin-top: 2px;
  color: #578cac;
  text-shadow: 0 1px 0 #f2f5f7;
}
/* Adaptation for texts within an action container */
.whp-container-actions,
.whp-comp-bck {
  color: #578cac;
  text-shadow: 0 1px 0 #f2f5f7;
}
/************************ Parameters for containers */
/* No border at the top */
.whp-rounded-corners-top {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 2px;
  background-clip: padding-box;
}
.whp-rounded-corners-bottom {
  border-top-right-radius: 0;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 0;
  background-clip: padding-box;
}
.whp-rounded-corners-full {
  border-radius: 2px;
  background-clip: padding-box;
}
/* Margin top if the container is between two blocks */
.whp-container-margin-top {
  margin-top: 20px;
}
/* Margin bottom if the container is between two blocks */
.whp-container-margin-bottom {
  margin-bottom: 20px;
}
/* Default buttons style within action containers */
.whp-container-buttons {
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #dee8f1;
  background: linear-gradient(to bottom, #dee8f1 0, #d8e5ee 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
}
/* Hover buttons style within action containers */
.whp-container-buttons-hover {
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #e3edf3;
  background: linear-gradient(to bottom, #e3edf3 0, #e3edf3 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
}
/* Clicked buttons style within action containers */
.whp-container-buttons-active {
  border-bottom: 1px solid #f4f8fa;
  background: #84b2ce;
  background: linear-gradient(to bottom, rgba(19, 64, 94, 0.1) 0, rgba(255, 255, 255, 0) 100%);
  color: #578cac;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: inset 0 1px 1px 0 #9fafba, transparent 0 0 0;
}
/* Neutral only for pagination, not for rolodex - Neutral state is when there is no bck/border */
ul li.whp-button-container-neutral a,
ul li.whp-button-container-neutral a:hover {
  border-radius: 0;
  background-clip: padding-box;
  border: 0 solid transparent;
  background: none;
  box-shadow: 0 0 0 0;
}
/* Sepration */
.whp-container-actions hr,
.whp-address-book-container hr {
  margin-top: 9px;
  margin-bottom: 9px;
  border-color: #b7cad8;
}
/* Form within the container */
.whp-container-actions .whp-control-group {
  padding-left: 0;
}
/* Pagination */
.whp-container-actions .whp-pagination {
  margin: 0;
}
.ie7 .whp-container-page-popup .whp-container-actions {
  padding: 10px;
}
/************************ Force scrolling within container for Map associate people to event */
.whp-container-scroll {
  padding: 9px;
  height: 150px;
  border: 1px solid #b5c9d6;
  background-color: #ffffff;
}
.whp-container-scroll-content {
  height: 150px;
  overflow: auto;
}
/****************************************************************************************
	Grey block 
****************************************************************************************/
.whp-grey-block {
  background-color: #f0f0f0;
  border: 1px solid #b5c9d6;
  padding: 20px 15px;
}
/****************************************************************************************
	White block 
****************************************************************************************/
.whp-white-block {
  background-color: #fff;
  border: 1px solid #b5c9d6;
  padding: 20px 15px;
}
/****************************************************************************************
	Admin
****************************************************************************************/
.whp-admin-container .whp-title {
  text-shadow: none;
}
.whp-admin-form-bck {
  padding-bottom: 15px;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f0f0f0;
}
/* Admin sub title + Admin Form Header */
.whp-admin-form-title,
.whp-admin-form-header {
  color: #313131;
  padding: 10px 0 10px 0;
}
.ie9 .whp-admin-form-title,
.ie9 .whp-admin-form-header {
  font-weight: 400;
}
.whp-admin-form-header h2 {
  padding-left: 10px;
}
/* Admin page are called from  an iFrame, specific rule for iframe */
body.whp-admin-page {
  padding-top: 0;
  background-image: none !important;
  overflow: hidden !important;
}
/* Admin menu on the left hand side */
.whp-admin-menu li a:first-child i {
  float: left;
  width: 14px;
  height: 15px;
}
.ie7 .whp-admin-page,
.ie8 .whp-admin-page {
  padding-top: 0;
}
.ie7 .whp-admin-form-title,
.ie8 .whp-admin-form-title {
  display: block;
}
/* Background color + respect of margin for admin fancy box */
.whp-admin-container {
  margin-left: 10px;
  padding-bottom: 40px;
  background-color: #ffffff;
}
/* fix the ie7 & 8 for fancybox container width issue */
.ie7 .whp-admin-container,
.ie8 .whp-admin-container {
  width: auto;
  margin-left: 10px;
}
/* fix the ie7 overflow not hidden issue for admin pages*/
.ie7 .whp-admin-container {
  padding-bottom: 0;
}
/* Admin section because in iFrame */
.ie7 .whp-admin-container .whp-control-label,
.ie8 .whp-admin-container .whp-control-label {
  float: left !important;
  text-align: right !important;
}
.ie7 .whp-admin-container .whp-control-label-button,
.ie8 .whp-admin-container .whp-control-label-button {
  float: left !important;
  text-align: right !important;
}
.ie7 .whp-admin-container .whp-control,
.ie8 .whp-admin-container .whp-control {
  margin-left: 150px !important;
  width: auto !important;
}
/* fix the ie7, ie8  isssue for iteration 1314 added by Manoj */
.ie7 .whp-admin-container .whp-select-multiple,
.ie8 .whp-admin-container .whp-select-multiple {
  height: 200px !important;
}
td.whp-admin-permission-object,
th.whp-admin-permission-object {
  width: 122px !important;
  padding-left: 10px !important;
}
.whp-admin-permission-label {
  width: 608px !important;
}
.whp-admin-permission-last {
  width: 53px !important;
}
/* For content in a iframe within an iframe (specific to admin section only) */
.whp-admin-container-nested {
  margin-left: 10px;
  margin-right: 10px;
  width: auto !important;
}
/* Admin section title */
.whp-admin-section-title {
  padding-bottom: 16px;
  padding-left: 10px;
  padding-top: 20px;
  font-weight: bold;
}
/* Admin section title */
.whp-auto-disable {
  width: 350px !important;
  padding-bottom: 10px;
}
.whp-auto-disable .whp-control-group {
  margin-bottom: 0;
}
.whp-auto-disable .whp-control-group .whp-control-label {
  padding-top: 0;
}
/* Admin menu */
.whp-admin-menu,
.whp-admin-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.whp-admin-menu a,
.whp-admin-menu a:hover {
  color: #578cac !important;
}
/* Grey line under each head element */
.whp-admin-menu > li {
  border-bottom: 1px solid #e6e6e6;
}
/* Grey line on the top for the first element */
.whp-admin-menu > li:first-child {
  border-top: 1px solid #e6e6e6;
}
/* Padding for the first link + block */
.whp-admin-menu > li > a:first-child {
  padding-top: 8px;
  padding-bottom: 9px;
  display: block;
  padding-left: 10px;
  font-weight: bold;
}
.whp-admin-menu li a:hover {
  background-color: #dde9f1;
  font-weight: bold;
}
.whp-admin-menu i {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -20px;
  float: left;
  width: 14px;
  height: 15px;
  margin-right: 5px;
  cursor: pointer;
  padding-left: 5px;
}
.whp-admin-menu li a:first-child .whp-unfold {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -20px;
  float: left;
  width: 14px;
  height: 15px;
  margin-right: 5px;
  cursor: pointer;
}
/* No style and hidden for the sub element */
.whp-admin-menu ul {
  display: none;
  list-style: none;
}
/* Grey line under each head element */
.whp-admin-menu ul li {
  border-top: 1px solid #e6e6e6;
}
.whp-admin-menu ul li a {
  padding-top: 8px;
  padding-bottom: 9px;
  display: block;
  padding-left: 40px;
}
/* Table cell style */
.whp-table-admin {
  width: 100%;
  margin-bottom: 15px;
  text-align: left;
  margin-top: 20px;
}
.whp-table-admin th {
  background-color: #f0f0f0;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  text-shadow: 0 1px 1px #ffffff;
}
.whp-table-admin td {
  text-align: left;
  vertical-align: middle;
  height: 27px;
  border-bottom: 1px solid #e4e4e4;
  background-color: #ffffff;
}
/* Permission Table */
.whp-admin-permission th,
.whp-admin-permission td {
  margin: 0;
  padding: 0;
}
th.whp-admin-permission-object,
td.whp-admin-permission-object {
  width: 102px !important;
  padding-left: 10px;
}
th.whp-admin-permission-label {
  background-image: url('../img/admin-permission.png');
  background-repeat: no-repeat;
  height: 55px !important;
  width: 608px !important;
}
.whp-admin-permission .whp-admin-permission-input {
  margin: 0;
  padding: 0;
  text-align: center !important;
  width: 24px;
}
.whp-admin-permission input {
  float: none !important;
  padding: 0;
  margin: 0;
}
.whp-admin-permission tbody tr td:first-child {
  background-color: #ffffff;
}
/* Guarantee a background for IE7/8 */
.whp-admin-permission-bck {
  background-color: #f0f0f0 !important;
}
.whp-admin-permission-last {
  padding-left: 5px !important;
  width: 53px !important;
}
.whp-api-mapping-button {
  position: relative;
  width: 100%;
  background-color: #f9f8f8;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.15);
  padding: 20px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f8f8+0,cdcdcd+100&amp;0+0,0.2+100 */
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(249, 248, 248, 0) 0%, rgba(205, 205, 205, 0.2) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f9f8f8', endColorstr='#33cdcdcd', GradientType=0);
  /* IE6-9 */
  box-shadow: 0px 0px 3px 0px rgba(180, 180, 180, 0.6), inset 0px 1px 1px 0px rgba(255, 255, 255, 0.7);
}
.whp-api-mapping-button:hover .whp-api-mapping-option-hover {
  opacity: 1;
}
.whp-api-mapping-option {
  font-size: 14px;
  color: #323232;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}
.whp-api-mapping-option-icon {
  height: 60px;
  width: auto;
}
.whp-api-mapping-option-hover {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-wrap: normal;
  word-wrap: break-word;
  display: table-cell;
  vertical-align: middle;
  padding: 15px;
  line-height: 16px;
  color: #323232;
  border-radius: 3px;
  font-size: 12px;
  box-sizing: border-box;
  background-color: #eaf2f7;
  z-index: 100;
  border: 1px solid #eaf2f7;
}
.whp-api-mapping-option-hover .create {
  margin-top: 18px;
  font-weight: 600;
  color: #4b7a96;
  text-shadow: 0 1px 0 #f2f5f7;
  padding: 4px 10px;
  border-radius: 2px;
  background-clip: padding-box;
  border: 1px solid #21618e;
  background: #238cd5;
  background: linear-gradient(to bottom, #238cd5 0, #2079b6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#238cd5', endColorstr='#2079b6', GradientType=0);
  background-clip: border-box;
  text-shadow: 0 -1px 0 #12548c;
  color: #ffffff;
  font-weight: bold;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  outline: 0;
}
.whp-new-api-mapping-icon {
  height: 35px;
  width: auto;
  margin-bottom: -10px;
  margin-right: 10px;
}
/****************************************************************************************
	Custom Search Field with icon
****************************************************************************************/
.whp-form-search {
  margin-bottom: 10px;
  width: 308px;
  height: 25px;
  border: 1px solid #a3b8c6;
  border-radius: 1px;
  background-clip: padding-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, transparent 0 0 0;
  background: #f4f4f4;
  background: linear-gradient(to bottom, #f4f4f4 0, #fefefe 100%);
}
/* Just fit size */
.whp-form-search.whp-just-fit {
  width: 100%;
  margin-bottom: 0;
}
.whp-form-search.whp-just-fit input {
  width: 65% !important;
}
.ie7 .whp-form-search.whp-just-fit input,
.ie8 .whp-form-search.whp-just-fit input {
  margin-top: -10px;
}
.whp-megamenu-more .whp-form-search.whp-just-fit {
  width: 93%;
  margin-bottom: 0;
  height: 30px;
  margin: 20px 0 0 10px;
}
.whp-megamenu-more .whp-form-search.whp-just-fit input {
  width: 80% !important;
  margin: -10px 0px 0px 20px;
}
.whp-megamenu-more .whp-form-search.whp-just-fit input::-webkit-input-placeholder {
  color: #9f9d9a;
}
.whp-megamenu-more .whp-form-search.whp-just-fit .whp-placeholder {
  color: #9f9d9a;
}
.whp-form-search:hover {
  border: 1px solid #B9B9B9;
}
.whp-form-search input,
.whp-form-search input:hover {
  border: 0 !important;
  color: #575757;
  box-shadow: 0 0 0 0, transparent 0 0 0;
  background-color: transparent;
  display: inline-block;
  height: 21px;
  margin-left: 2px;
  padding: 0;
  margin-top: -10px;
}
.ie7 .whp-form-search input,
.ie7 .whp-form-search input:hover {
  margin-top: 0 !important;
}
.whp-form-search .whp-form-search-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -80px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-top: 7px;
  margin-right: 5px;
  cursor: pointer;
}
/****************************************************************************************
	Forms container
****************************************************************************************/
.whp-form-bck hr {
  margin-top: 23px;
  margin-bottom: 10px;
  border-color: #e0e0e0;
}
/* Header of a form */
/* Common with DATA */
.whp-form-header {
  background-color: #f0f0f0;
  padding-top: 10px;
  padding-bottom: 10px;
  text-shadow: 0 1px 1px #ffffff;
  border-bottom: 1px solid #e4e4e4;
  border-top: 1px solid #e4e4e4;
}
.whp-form-header h2 {
  padding-left: 10px;
  text-shadow: 0 1px 1px #ffffff;
}
/* Title of a form */
/* Common with DATA */
/* H2 ONLY for the title */
h2.whp-form-title {
  background-color: #f0f0f0;
  font-weight: bold;
  padding: 10px;
  text-shadow: 0 1px 1px #ffffff;
  border-bottom: 1px solid #e4e4e4;
  border-top: 1px solid #e4e4e4;
}
/* Multiple titles in the H2 section */
div.whp-form-title {
  background-color: #f0f0f0;
  font-weight: bold;
  text-shadow: 0 1px 1px #ffffff;
  border-bottom: 1px solid #e4e4e4;
  border-top: 1px solid #e4e4e4;
}
.ie9 div.whp-form-title {
  font-weight: 400;
}
div.whp-form-title h2 {
  padding: 19px 0 10px 10px;
  text-shadow: 0 1px 1px #ffffff;
}
.whp-form-subtitle {
  font-weight: 400;
}
/* Bck of a form */
.whp-form-bck {
  padding-bottom: 15px;
  padding-top: 10px;
  height: 100%;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f0f0f0;
}
/* Container wich contains a form bck */
.whp-container-actions .whp-form-bck {
  padding-bottom: 0;
  padding-top: 0;
  border: 0;
}
/* Misc elements */
.whp-error {
  border: 1px solid #cf3030;
}
.whp-required-field {
  color: #313131;
}
.whp-channel-field {
  color: #313131;
}
.whp-form-boldtext {
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 7px;
}
input:-ms-input-placeholder {
  color: #bbbbbb;
}
/****************************************************************************************
	Data
****************************************************************************************/
.whp-data-bck {
  background-color: #ffffff;
}
.whp-data-line {
  border-bottom: 1px solid #e4e4e4;
  padding-top: 10px;
  padding-bottom: 5px;
}
/* Data line within a composition box */
.whp-comp-box .whp-data-line {
  padding-bottom: 0;
  padding-top: 5px;
}
.whp-data-first-line {
  border-bottom: 1px solid #e4e4e4;
  border-top: 1px solid #e4e4e4;
  padding-top: 10px;
  padding-bottom: 5px;
}
.whp-data-last-line {
  border-bottom: 0;
  padding-top: 10px;
  padding-bottom: 5px;
}
.whp-data-last-black-line {
  border-bottom: 1px solid #b8b8b8;
  padding-top: 10px;
  padding-bottom: 5px;
}
.whp-data-desc {
  float: left;
  width: 140px;
  text-align: right;
  font-weight: normal;
}
.whp-data-display {
  margin-left: 150px;
  font-weight: normal;
  word-wrap: break-word;
}
.whp-form-header .whp-data-display {
  text-shadow: 0 1px 1px #FFFFFF;
}
/* Table*/
/****************************************************************************************
	Table Styles
****************************************************************************************/
.whp-table {
  width: 100%;
  text-align: left;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  color: #575757;
}
/* Table cell style */
.whp-table th {
  padding: 5px 7px 6px;
  height: 31px;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  background-color: #f0f0f0;
  text-align: left;
  vertical-align: middle;
  text-shadow: 0 1px 0 #f2f5f7;
}
.whp-table th a {
  color: #575757;
}
.whp-table td {
  padding: 3px 7px 2px;
  height: 27px;
  border-bottom: 1px solid #e4e4e4;
  background-color: #ffffff;
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
}
.whp-table th.whp-alt-color {
  background-color: #cce3e9;
  color: #404d52;
}
.whp-table td.whp-alt-color {
  background-color: #e7f6fa;
}
/* Condensed version of table */
.whp-table.whp-condensed td {
  padding: 2px 10px 2px;
  height: 21px;
  border-bottom: 1px solid #e4e4e4;
  background-color: #ffffff;
  text-align: left;
  vertical-align: top;
}
.whp-table.whp-condensed th {
  padding: 2px 10px 2px;
  height: 21px;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  background-color: #f0f0f0;
  text-align: left;
  vertical-align: middle;
  text-shadow: 0 1px 0 #f2f5f7;
}
/* Table total */
.whp-table tfoot {
  font-weight: 600;
  text-shadow: 0 1px 0 #f2f5f7;
}
/* No wrap */
.whp-table-nowrap {
  white-space: nowrap;
}
/* Wrap */
.whp-table-wrap {
  word-wrap: break-word;
}
/* Table with a zebra (automatic) */
.whp-table-striped tbody tr:nth-child(2n+1) td,
.whp-table-striped tbody tr:nth-child(2n+1) th {
  background-color: #f0f0f0;
}
/************************ Indentation Table */
.whp-table-indent-1 {
  padding-left: 20px !important;
}
.whp-table-indent-2 {
  padding-left: 40px !important;
}
.whp-table-indent-3 {
  padding-left: 60px !important;
}
.whp-table-row {
  background-color: #ffffff;
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 15px;
  padding-top: 10px;
}
/****************************************************************************************
	Table scenario
****************************************************************************************/
.whp-table-scenario td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.whp-table-scenario .whp-inbox-label-a {
  border-bottom: 1px solid #d7e1ce;
  color: #658548;
}
.whp-table-scenario .whp-inbox-label-b {
  border-bottom: 1px solid #c3d2d6;
  color: #548db5;
}
/****************************************************************************************
	Inbox
****************************************************************************************/
table.whp-inbox {
  width: 100%;
  word-wrap: break-word;
  table-layout: fixed;
  border-collapse: inherit;
}
.whp-inbox th {
  border-bottom: 1px solid #dcdcdb;
  background-color: #f0f0f0;
  padding-top: 10px;
  vertical-align: middle;
  padding-bottom: 11px;
  text-shadow: 0 1px 0 #f2f5f7;
  text-align: left;
}
.whp-inbox th a {
  color: #575757;
}
.whp-inbox td {
  text-align: left;
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: top;
  border-bottom: 1px solid #e4e4e4;
  background-color: #ffffff;
}
/************************ Specific size for columns */
.whp-inbox .whp-inbox-column-checkbox {
  padding-left: 10px;
  width: 27px;
}
.whp-inbox .whp-inbox-column-attach {
  width: 35px;
}
.whp-inbox .whp-inbox-column-status {
  width: 20px;
  text-align: left;
}
.whp-inbox .whp-inbox-column-subject {
  padding-right: 10px;
}
.whp-inbox .whp-inbox-column-from {
  width: 100px;
  text-align: left;
  padding-right: 10px;
}
.whp-inbox .whp-inbox-column-to {
  width: 100px;
  text-align: left;
  padding-right: 10px;
}
.whp-inbox .whp-inbox-column-date {
  width: 100px;
}
.whp-inbox .whp-inbox-column-actions {
  width: 90px;
  padding-right: 10px;
}
/* Make all the icons into a column */
.whp-inbox tbody td.whp-inbox-column-subject i {
  float: left;
}
.whp-inbox tbody td.whp-inbox-column-subject span {
  float: left;
  width: 90%;
  margin-left: 8px;
}
.whp-inbox tbody td.whp-inbox-column-subject span:after {
  clear: both;
}
/************************ Reply icons */
.whp-inbox-reply-notification .whp-icons-unfold {
  margin-right: 5px;
}
.whp-inbox-reply-notification {
  color: #3087c4;
  font-weight: 600;
  margin-top: 5px;
}
.whp-inbox-column-subject.whp-inbox-reply-1 .whp-inbox-reply-notification,
.whp-inbox-column-subject.whp-inbox-reply-child .whp-inbox-reply-notification {
  float: left;
  margin-left: 20px;
}
.whp-inbox-column-subject.whp-inbox-reply-1 .whp-inbox-reply-notification:after,
.whp-inbox-column-subject.whp-inbox-reply-child .whp-inbox-reply-notification:after {
  clear: both;
}
/************************ Indentation Level 1 */
.whp-inbox-column-subject.whp-inbox-reply-1 {
  padding-left: 20px;
  background-image: url("../img/indent-1.png");
  background-repeat: no-repeat;
  background-position: 5px -5px;
}
.whp-inbox-column-subject.whp-inbox-reply-1.whp-between {
  background-position: 5px -20px;
}
.whp-inbox-column-subject.whp-inbox-reply-1.whp-last {
  background-position: 5px -382px;
}
/************************ Indentation Level 2 */
.whp-inbox-column-subject.whp-inbox-reply-2 {
  padding-left: 60px;
  background-image: url("../img/indent-2.png");
  background-repeat: no-repeat;
  background-position: 5px -5px;
}
.whp-inbox-column-subject.whp-inbox-reply-2.whp-between {
  background-position: 5px -20px;
}
.whp-inbox-column-subject.whp-inbox-reply-2.whp-last {
  background-position: 5px -382px;
}
/************************ Child within the indentation */
.whp-inbox-column-subject.whp-inbox-reply-child {
  padding-left: 60px;
  background-image: url("../img/indent-1.png");
  background-repeat: no-repeat;
  background-position: 45px -4px;
}
.whp-inbox-column-subject.whp-inbox-reply-child.whp-between {
  padding-left: 60px;
  background-image: url("../img/indent-1.png");
  background-repeat: no-repeat;
  background-position: 45px -20px;
}
.whp-inbox-column-subject.whp-inbox-reply-child.whp-last {
  padding-left: 60px;
  background-image: url("../img/indent-1.png");
  background-repeat: no-repeat;
  background-position: 45px -382px;
}
/************************ Labels for Inbox */
.whp-inbox-label {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 10px;
  font-weight: bold;
}
/* Label colour */
.whp-inbox-label-a td {
  background-color: #ecf5e4;
  border-bottom: 1px dotted #d7e1ce;
}
.whp-inbox-label-a td.whp-inbox-label {
  text-shadow: 0 1px 1px #ffffff;
  color: #658548;
}
.whp-inbox-label-b td {
  background-color: #e4f2f5;
  border-bottom: 1px dotted #c3d2d6;
}
.whp-inbox-label-b td.whp-inbox-label {
  text-shadow: 0 1px 1px #ffffff;
  color: #548db5;
}
/************************ Labels tables */
.whp-table-label-a td {
  background-color: #ecf5e4;
}
.whp-table-label-b td {
  background-color: #e4f2f5;
}
/************************ Icons */
/* RSS - Icon in the first column */
.whp-inbox-rss {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -280px -20px;
  display: inline-block;
  width: 15px;
  height: 15px;
}
/* Status - Icon in the first column */
.whp-inbox-status {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -280px 0px;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-top: 4px;
  margin-right: 4px;
}
/* Unpublished message - Icon in the first column */
.whp-inbox-unpub {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px -60px;
  display: inline-block;
  width: 14px;
  height: 14px;
}
/* Published message - Icon in the first column */
.whp-inbox-pub {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px -80px;
  display: inline-block;
  width: 14px;
  height: 14px;
}
/* Expired message - Icon in the first column */
.whp-inbox-expired {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px -100px;
  display: inline-block;
  width: 14px;
  height: 14px;
}
/* Sent message - Icon in the first column */
.whp-inbox-sent {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px 0px;
  display: inline-block;
  width: 11px;
  height: 9px;
  margin-top: 2px;
  margin-right: 2px;
}
/* Received message - Icon in the first column */
.whp-inbox-received {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px 0px;
  display: inline-block;
  width: 11px;
  height: 9px;
  margin-top: 2px;
  margin-right: 2px;
}
/* Unsent message - Icon in the first column */
.whp-inbox-unsent {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -300px 0px;
  display: inline-block;
  width: 10px;
  height: 12px;
  margin-top: 4px;
  margin-right: 4px;
}
/* Attached - Icon in the first column */
.whp-inbox-attach {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px 0px;
  display: inline-block;
  width: 15px;
  height: 14px;
  margin-top: 2px;
  margin-right: 2px;
}
/* Chat Closed - Icon in the first column */
.whp-inbox-chat-closed {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px 0px;
  display: inline-block;
  width: 16px;
  height: 15px;
  margin-top: 4px;
  margin-right: 4px;
}
/* Chat Active - Icon in the first column */
.whp-inbox-chat-active {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -300px -20px;
  display: inline-block;
  width: 16px;
  height: 15px;
  margin-top: 4px;
  margin-right: 4px;
}
/* Delete - Icon in the first column */
.whp-inbox-deleted {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -20px;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  margin-right: 4px;
}
/****************************************************************************************
	Table Column
****************************************************************************************/
/* Table Cell size */
.whp-table-column0 {
  width: 2.5%;
  word-wrap: break-word;
}
.ie7 .whp-table-column0,
.ie8 .whp-table-column0 {
  width: 3.5%;
}
.whp-table-column1 {
  width: 5%;
  word-wrap: break-word;
}
.whp-table-column2 {
  width: 15%;
  word-wrap: break-word;
}
.whp-table-column3 {
  width: 25%;
  word-wrap: break-word;
}
.whp-table-column4 {
  width: 30%;
  word-wrap: break-word;
}
.whp-table-column5 {
  width: 40%;
  word-wrap: break-word;
}
.whp-table-column6 {
  width: 50%;
  word-wrap: break-word;
}
.whp-table-column7 {
  width: 55%;
  word-wrap: break-word;
}
.whp-table-column8 {
  width: 65%;
  word-wrap: break-word;
}
.whp-table-column9 {
  width: 75%;
  word-wrap: break-word;
}
.whp-table-column10 {
  width: 80%;
  word-wrap: break-word;
}
.whp-table-column11 {
  width: 90%;
  word-wrap: break-word;
}
/* specifically for response rules */
.whp-response-rule-column1 {
  width: 13%;
  word-wrap: break-word;
}
.whp-response-rule-column2 {
  width: 61%;
  word-wrap: break-word;
}
.whp-response-rule-column3 {
  width: 9%;
  word-wrap: break-word;
}
.whp-response-rule-column4 {
  width: 13%;
  word-wrap: break-word;
}
/* All related to forms */
/****************************************************************************************
	Input, select, textarea
  	TODO: Clean up everything, became over complicated
****************************************************************************************/
/************************ Main */
input,
textarea,
select {
  padding: 2px;
  width: 270px;
  display: inline-block;
  height: 21px;
  border: 1px solid #a3b8c6;
  border-radius: 1px;
  background-clip: padding-box;
  color: #575757;
  line-height: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, transparent 0 0 0;
  outline: none;
}
/* General Textarea*/
textarea {
  height: 180px;
  resize: vertical;
}
.whp-save-overbar,
.whp-save-as-panel-wrap textarea {
  height: 180px;
  resize: vertical;
}
select {
  height: 27px;
  padding-bottom: 5px;
}
label {
  display: block;
  color: #575757;
}
.whp-form-help-text {
  color: #969696;
  padding-top: 5px;
  padding-bottom: 15px;
}
.whp-form-help-text-checkbox {
  color: #969696;
  padding-top: 20px;
  padding-bottom: 15px;
}
.whp-container-form input,
.whp-container-form textarea,
.whp-container-form select,
.whp-admin-container input,
.whp-admin-container textarea,
.whp-admin-container select {
  border: 1px solid #a3b8c6;
}
/* 95% width (because padding) for all kind of size if fluid control */
.whp-control-fluid input,
.whp-control-fluid select,
.whp-control-fluid textarea {
  width: 95% !important;
}
/* General checkboxex + radio */
input[type="checkbox"],
input[type="radio"] {
  margin-left: 0;
  float: left;
  width: 15px !important;
  height: 15px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: 0 0 0 0, transparent 0 0 0 !important;
  margin-top: 0;
}
.ie7 input[type="checkbox"],
.ie7 input[type="radio"],
.ie8 input[type="checkbox"],
.ie8 input[type="radio"] {
  width: 15px;
  height: 15px;
}
label input[type="checkbox"],
label input[type="radio"] {
  float: right;
  margin-left: 10px;
}
.ie7 label input[type="checkbox"],
.ie7 label input[type="radio"] {
  float: none;
}
.ie9 input[type="checkbox"],
.ie9 input[type="radio"] {
  border: 0;
  background: none;
}
/* Checkboxes within a container action + address book */
.whp-container-actions input[type="checkbox"],
.whp-address-book-container input[type="checkbox"],
.whp-map-tab-content input[type="checkbox"] {
  margin-top: 5px;
}
/* Checbox within page filter ensure a non impact from container action */
.whp-map-siderbar-list-item input[type="checkbox"],
.whp-container-actions .whp-page-filter-menu input[type="checkbox"] {
  margin-top: 0px;
}
/* Checkboxes within a control inline + input column */
.whp-control input[type="checkbox"],
.whp-control-list .whp-control-group input[type="checkbox"],
.whp-input-column input[type="checkbox"] {
  margin-top: 2px;
}
/* Checkboxes + radio within a map */
#OpenLayers\.Control\.LayerSwitcher_layersDiv input[type="radio"],
#OpenLayers\.Control\.LayerSwitcher_layersDiv input[type="checkbox"] {
  float: none;
  width: auto!important;
  height: auto!important;
  -webkit-appearance: radio;
}
/* Height for textarea */
.whp-height-mini {
  height: 60px !important;
}
/************************ Control group */
/* Margin under a form */
.whp-control-group {
  margin-bottom: 5px;
  padding-left: 10px;
}
/*Clear both after and before a fluid container (with fluid columns inside) */
.whp-control-group:after {
  clear: both;
}
/* fix the ie7 issue for admin contact details - jira 1317 */
.ie7 .whp-control-group {
  clear: both;
}
.whp-control-group:before,
.whp-control-group:after {
  content: "";
  display: table;
}
/* No margin if a form element in a table */
table .whp-control-group {
  margin-bottom: 0;
}
/************************ Control one single line */
/* No margin for element into one single line */
.whp-form-single-line .whp-control-label {
  float: none !important;
  display: inline-block !important;
  width: auto;
  text-align: left;
}
/* Needs to stay aligned with whp-control, float is the only recognized solution */
.ie7 .whp-form-single-line .whp-control-label {
  float: left;
}
.whp-form-single-line .whp-control {
  margin-left: 0 !important;
  display: inline;
}
.whp-form-single-line .whp-control span:after {
  clear: both;
}
.whp-form-single-line .whp-control span:before,
.whp-form-single-line .whp-control span:after {
  content: "";
  display: table;
}
.whp-form-single-line .whp-control span input[type="checkbox"],
.whp-form-single-line .whp-control span input[type="radio"] {
  margin: 0 0 -4px -2px;
}
/************************ Control list */
/* List of control group with scrollbar */
.whp-control-list {
  height: 150px;
  overflow: auto;
  margin-right: 20px;
  margin-left: 20px;
  border: 1px solid #a3b8c6;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #ffffff;
}
.whp-control-list .whp-control-group {
  margin-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e3e3e2;
}
.whp-control-list .whp-control-group:last-child {
  border-bottom: 0;
}
.ie7 .whp-control-list .whp-control-inline .whp-control-label {
  display: inline-block !important;
  padding-top: 0;
}
.whp-control-list .whp-control-inline {
  clear: both;
}
.ie7 .whp-control-list .whp-control-inline {
  display: inline-block !important;
  margin-bottom: 10px;
}
/************************ Control label */
/* Put the label of the left */
.whp-control-label {
  float: left;
  text-align: right;
  width: 140px;
  padding-top: 3px;
}
/* FluidFluid label into one single line (for thin column usage) */
.whp-control-label-fluid {
  float: left;
  padding-top: 5px;
  text-align: left;
  width: 100%;
}
/* Put the label of the left within a column 2 */
.whp-column2 .whp-control-label {
  float: left;
  text-align: right;
  width: 120px;
  padding-top: 3px;
}
/* Larger Label */
.whp-larger-label .whp-control-label {
  width: 160px;
}
/* Put the label of the left */
.whp-control-label-button {
  float: left;
  text-align: right;
  width: 140px;
}
/************************ Control error */
/* Set a red border for the input field */
.whp-control.whp-error input,
.whp-control.whp-error textarea,
.whp-control.whp-error select {
  margin-top: -13px;
  border: 1px solid #cf3030;
}
/* Display the icon for an error */
.whp-control.whp-error i {
  display: inline-block;
  height: 18px;
  width: 20px;
  padding-top: 8px;
}
/* Text underneath a control */
.whp-control-subtitle {
  display: block;
  padding-left: 23px;
  padding-top: 0;
  width: 240px;
  margin-left: 18px;
  color: #8f8e8a;
}
/* Manage the hover state on an input */
input[type="text"]:hover,
select:hover,
textarea:hover {
  border: 1px solid #a3b8c6;
  border-style: solid;
  border-width: 1px;
}
/* Manage the focus state on an input */
input[type="text"]:focus,
select:focus,
textarea:focus {
  border-color: #a3b8c6;
  outline: 0 none;
}
/* If the input has a disabled attribute */
input[disabled],
select[disabled],
textarea[disabled] {
  z-index: 5000;
  background-color: #eeeeee;
}
input[disabled]:hover,
select[disabled]:hover,
textarea[disabled]:hover {
  box-shadow: 0 0 0 0, transparent 0 0 0 !important;
}
/* If the input has a readonly attribute */
input[readonly],
select[readonly],
textarea[readonly] {
  background-color: #ffffff;
}
/* If text that you can edit, nothing to display */
input.whp-input-edit-text,
input.whp-input-edit-text:hover {
  border: 0;
  color: #575757;
  box-shadow: 0 0 0 0, transparent 0 0 0;
  cursor: pointer;
  margin-top: -5px;
}
/************************ Control */
/* Alignement for a text beside a control */
.whp-control span {
  display: inline-block;
  padding-top: 4px;
  padding-left: 5px;
}
.ie7 .whp-control span {
  padding-top: 0;
}
.ie8 .whp-control span {
  padding-top: 2px;
}
/* Specific condition for button within a control for IE7 */
.ie7 .whp-column4 .whp-control .whp-btn {
  margin-left: 5px;
}
/* Fluid control into one single line (for thin column usage) */
.whp-control-fluid {
  margin-left: 0;
  width: 100%;
}
/* Alignement for a text beside a control */
.whp-control-fluid span {
  display: inline-block;
  padding-left: 5px;
  padding-top: 2px;
}
/* fix IE7 span alignment issue beside a control */
.ie7 .whp-control-fluid span {
  padding-top: 0px;
}
/* Control onto one single line */
.whp-control {
  margin-left: 150px;
}
.ie7 .whp-control,
.ie8 .whp-control {
  margin-left: 149px;
}
.whp-larger-label .whp-control {
  margin-left: 170px;
}
/* Large desktop */
@media screen and (min-width: 1200px) {
  /* Place the input beside the label */
  .whp-control {
    margin-left: 150px;
  }
  .ie7 .whp-control,
  .ie8 .whp-control {
    margin-left: 149px;
  }
  .whp-larger-label .whp-control {
    margin-left: 170px;
  }
}
/* Control onto one single line into a column4 */
.ie7 .whp-column4 .whp-control,
.ie8 .whp-column4 .whp-control,
.ie9 .whp-column4 .whp-control,
.whp-column4 .whp-control {
  margin-left: 0;
}
/************************ Control inline */
/* Control group inline */
.whp-control-inline .whp-control-label {
  text-align: left;
  width: auto !important;
  margin-right: 5px;
  margin-top: 2px;
}
.whp-control-inline .whp-control,
.ie7 .whp-control-inline .whp-control,
.ie8 .whp-control-inline .whp-control {
  margin-left: 0;
}
/************************ Sizes */
/* Width fit if the sizes don't work */
input.whp-just-fit,
textarea.whp-just-fit,
select.whp-just-fit {
  width: 100%;
}
/* Width auto if the sizes don't work */
input.whp-flexo,
textarea.whp-flexo,
select.whp-flexo {
  width: auto;
}
/* Tiny size of form elements */
input.whp-tiny,
textarea.whp-tiny,
select.whp-tiny {
  width: 20px !important;
  padding-left: 2px !important;
}
/* Small size of form elements */
input.whp-small,
textarea.whp-small,
select.whp-small {
  width: 40px !important;
  padding-left: 2px !important;
}
/* Small-Slim size of form elements */
input.whp-small-slim,
textarea.whp-small-slim,
select.whp-small-slim {
  width: 78px !important;
  padding-left: 2px !important;
}
/* Slim size of form elements */
input.whp-slim,
textarea.whp-slim,
select.whp-slim {
  width: 100px !important;
  padding-left: 2px !important;
}
/* Medium size of form elements */
input.whp-medium,
textarea.whp-medium,
select.whp-medium {
  width: 140px !important;
  padding-left: 2px !important;
}
/* Large size of form elements */
input.whp-large,
textarea.whp-large,
select.whp-large {
  width: 180px !important;
}
/* Huge size of form elements */
input.whp-huge,
textarea.whp-huge,
select.whp-huge,
.recipientsBox.whp-huge {
  width: 340px !important;
}
/* Extra Huge size of form elements */
input.whp-giant,
textarea.whp-giant,
select.whp-giant {
  width: 530px !important;
}
/* Size with calendar or clock icon */
/* Slim size of form elements */
input.whp-slim.whispirTimeInput,
textarea.whp-slim.whispirTimeInput,
select.whp-slim.whispirTimeInput,
input.whp-slim.whispirTimeInputNoSec,
textarea.whp-slim.whispirTimeInputNoSec,
select.whp-slim.whispirTimeInputNoSec,
input.whp-slim.epochCalInput,
textarea.whp-slim.epochCalInput,
select.whp-slim.epochCalInput {
  width: 73px !important;
  padding-left: 2px !important;
}
/* Medium size of form elements */
input.whp-medium.whispirTimeInput,
textarea.whp-medium.whispirTimeInput,
select.whp-medium.whispirTimeInput,
input.whp-medium.whispirTimeInputNoSec,
textarea.whp-medium.whispirTimeInputNoSec,
select.whp-medium.whispirTimeInputNoSec,
input.whp-medium.epochCalInput,
textarea.whp-medium.epochCalInput,
select.whp-medium.epochCalInput {
  width: 113px !important;
  padding-left: 2px !important;
}
/* Large size of form elements */
input.whp-large.whispirTimeInput,
textarea.whp-large.whispirTimeInput,
select.whp-large.whispirTimeInput,
input.whp-large.whispirTimeInputNoSec,
textarea.whp-large.whispirTimeInputNoSec,
select.whp-large.whispirTimeInputNoSec,
input.whp-large.epochCalInput,
textarea.whp-large.epochCalInput,
select.whp-large.epochCalInput {
  width: 153px !important;
}
/* Huge size of form elements */
input.whp-huge.whispirTimeInput,
textarea.whp-huge.whispirTimeInput,
select.whp-huge.whispirTimeInput,
input.whp-huge.whispirTimeInputNoSec,
textarea.whp-huge.whispirTimeInputNoSec,
select.whp-huge.whispirTimeInputNoSec,
input.whp-huge.epochCalInput,
textarea.whp-huge.epochCalInput,
select.whp-huge.epochCalInput {
  width: 313px !important;
}
/* Extra Huge size of form elements */
input.whp-giant.whispirTimeInput,
textarea.whp-giant.whispirTimeInput,
select.whp-giant.whispirTimeInput,
input.whp-giant.whispirTimeInputNoSec,
textarea.whp-giant.whispirTimeInputNoSec,
select.whp-giant.whispirTimeInputNoSec,
input.whp-giant.epochCalInput,
textarea.whp-giant.epochCalInput,
select.whp-giant.epochCalInput {
  width: 503px !important;
}
.whp-select-multiple {
  height: 200px !important;
}
.whp-select-multiple-assets {
  height: 100px !important;
}
.whp-complementary-field {
  margin-left: 5px;
}
.whp-complementary-field.whp-medium {
  width: 120px !important;
}
.whp-container-popup .whp-control-fluid input.whp-huge,
.whp-container-popup .whp-control-fluid textarea.whp-huge,
.whp-container-popup .whp-control-fluid select.whp-huge,
.whp-container-popup .whp-control-fluid input.whp-large,
.whp-container-popup .whp-control-fluid textarea.whp-large,
.whp-container-popup .whp-control-fluid select.whp-large,
.whp-container-popup .whp-control-fluid input.whp-giant,
.whp-container-popup .whp-control-fluid textarea.whp-giant,
.whp-container-popup .whp-control-fluid select.whp-giant {
  width: 100% !important;
}
/* Textarea which has the height of an input */
.whp-height-input {
  height: 18px;
  margin-top: 0px;
}
/****************************************************************************************
	Buttons
****************************************************************************************/
.whp-btn {
  padding: 4px 10px;
  border-radius: 2px;
  background-clip: padding-box;
  border: 1px solid #21618e;
  background: #238cd5;
  background: linear-gradient(to bottom, #238cd5 0, #2079b6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#238cd5', endColorstr='#2079b6', GradientType=0);
  background-clip: border-box;
  text-shadow: 0 -1px 0 #12548c;
  color: #ffffff;
  font-weight: bold;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  outline: 0;
}
/* Fix IE7 bug with the padding */
button {
  overflow: visible;
}
.ie7 .whp-btn {
  margin-right: 5px;
}
.whp-btn.whp-btn-secondary {
  border: 1px solid #427ca1;
  background: #87b1cc;
  background: linear-gradient(to bottom, #87b1cc 0, #6996b6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87b1cc', endColorstr='#6996b6', GradientType=0);
  box-shadow: "0 1px 0 rgba(0,0,0,20%), inset 0 1px 1px 0 #a1c2d8", transparent 0 0 0;
}
/* Hover state */
.whp-btn:hover {
  border: 1px solid #32719e;
  box-shadow: 0 0 0, inset 0 1px 1px 0 rgba(255, 255, 255, 0.2);
  background: #48a3e1;
  background: linear-gradient(to bottom, #48a3e1 0, #3887be 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#48a3e1', endColorstr='#3887be', GradientType=0);
}
.whp-btn-secondary:hover {
  border: 1px solid #518bb0;
  box-shadow: 0 0 0, inset 0 1px 1px 0 #a1c2d8;
  background: #8eb9d6;
  background: linear-gradient(to bottom, #8eb9d6 0, #6a97b6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8eb9d6', endColorstr='#6a97b6', GradientType=0);
}
/* Pressed */
.whp-btn:active {
  border: 1px solid #206a9e;
  background: #1f83c7;
  background: linear-gradient(to bottom, #1f83c7 0, #1e72ad 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1f83c7', endColorstr='#1e72ad', GradientType=0);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 0 7px 7px #1b6190;
}
.whp-btn-secondary:active {
  border: 1px solid #477592;
  background: #6b9ab8;
  background: linear-gradient(to bottom, #6b9ab8 0, #5382a4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9ab8', endColorstr='#5382a4', GradientType=0);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 0 7px 7px #3b769c;
}
/* Disabled */
.whp-btn[disabled] {
  opacity: 0.5;
  filter: "alpha(opacity=50)";
  -ms-filter: "alpha(opacity=50)";
  /* old ie */
  cursor: default;
}
.whp-btn[disabled]:hover {
  background: #238cd5;
  background: linear-gradient(to bottom, #238cd5 0, #2079b6 100%);
  background-clip: border-box;
}
.whp-btn-secondary[disabled]:hover {
  background: #87b1cc;
  background: linear-gradient(to bottom, #87b1cc 0, #6996b6 100%);
}
.whp-btn[disabled]:active {
  box-shadow: none;
}
.whp-btn-secondary[disabled]:active {
  background: #87b1cc;
  background: linear-gradient(to bottom, #87b1cc 0, #6996b6 100%);
}
/* IE7 */
.ie7 .whp-btn,
.ie7 .whp-btn,
.ie7 .whp-btn:active {
  border: 0;
}
.ie7 .whp-btn-secondary,
.ie7 .whp-btn-secondary,
.ie7 .whp-btn-secondary:active {
  border: 0;
}
/* Small version of the button */
.whp-btn.whp-small {
  padding: 2px 8px 4px;
}
/* Large version of the button */
.whp-btn.whp-large {
  padding: 4px 10px;
}
/* Larger version of the button */
.whp-btn.whp-larger {
  padding: 8px 20px;
}
.whp-toolbar-menu .whp-btn {
  height: 27px;
  margin-top: 5px;
}
.whp-btn-column .whp-btn {
  width: 40px;
  display: block;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
}
/************************ Add Button */
.whp-add-field {
  width: 16px;
  height: 20px;
  padding-top: 2px;
  padding-left: 8px;
  float: right;
  margin-top: 3px;
  line-height: 18px;
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #dee8f1;
  background: linear-gradient(to bottom, #dee8f1 0, #d8e5ee 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
}
.ie7 .whp-add-field {
  width: 10px;
  height: 20px;
  padding-top: 0;
  padding-left: 4px;
  padding-right: 4px;
  margin-right: 2px;
  line-height: 22px;
}
.ie8 .whp-add-field {
  width: 10px;
  height: 20px;
  padding-top: 0;
  padding-right: 4px;
  margin-right: 2px;
  line-height: 22px;
}
/************************ Buttons at the end of the form */
.whp-form-actions {
  display: block;
  margin-bottom: 10px;
  margin-top: 10px;
}
.whp-container-actions .whp-form-actions {
  margin-top: 0;
}
/* the size of different buttons */
.whp-btn-size-large {
  width: 100px;
}
.whp-btn-size-medium {
  width: 70px;
}
.whp-btn-size-small {
  width: 40px;
}
.whp-btn-block {
  width: 100% !important;
}
.whp-addon-button {
  background-color: #ffffff;
  background: linear-gradient(top, #ffffff, #f2f2f2);
  cursor: pointer;
}
.whp-addon-button:hover {
  background-color: #f2f2f2;
  background: linear-gradient(top, #f2f2f2, #f2f2f2);
}
.whp-addon-button:active {
  background-color: #e8e8e8;
  background: linear-gradient(top, #e8e8e8, #f2f2f2);
}
.whp-button {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #333333;
  background-color: #ffffff;
  border-color: #cccccc;
}
.whp-button:focus,
.whp-button:active:focus,
.whp-button.active:focus,
.whp-button.focus,
.whp-button:active.focus,
.whp-button.active.focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.whp-button:hover,
.whp-button:focus,
.whp-button.focus {
  color: #333333;
  text-decoration: none;
}
.whp-button:active,
.whp-button.active {
  outline: 0;
  background-image: none;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.whp-button.disabled,
.whp-button[disabled],
fieldset[disabled] .whp-button {
  cursor: not-allowed;
  opacity: 0.65;
  filter: alpha(opacity=65);
  box-shadow: none;
}
a.whp-button.disabled,
fieldset[disabled] a.whp-button {
  pointer-events: none;
}
.whp-button:focus,
.whp-button.focus {
  color: #333333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.whp-button:hover {
  color: #333333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.whp-button:active,
.whp-button.active,
.open > .dropdown-toggle.whp-button {
  color: #333333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.whp-button:active:hover,
.whp-button.active:hover,
.open > .dropdown-toggle.whp-button:hover,
.whp-button:active:focus,
.whp-button.active:focus,
.open > .dropdown-toggle.whp-button:focus,
.whp-button:active.focus,
.whp-button.active.focus,
.open > .dropdown-toggle.whp-button.focus {
  color: #333333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.whp-button:active,
.whp-button.active,
.open > .dropdown-toggle.whp-button {
  background-image: none;
}
.whp-button.disabled,
.whp-button[disabled],
fieldset[disabled] .whp-button,
.whp-button.disabled:hover,
.whp-button[disabled]:hover,
fieldset[disabled] .whp-button:hover,
.whp-button.disabled:focus,
.whp-button[disabled]:focus,
fieldset[disabled] .whp-button:focus,
.whp-button.disabled.focus,
.whp-button[disabled].focus,
fieldset[disabled] .whp-button.focus,
.whp-button.disabled:active,
.whp-button[disabled]:active,
fieldset[disabled] .whp-button:active,
.whp-button.disabled.active,
.whp-button[disabled].active,
fieldset[disabled] .whp-button.active {
  background-color: #ffffff;
  border-color: #cccccc;
}
.whp-btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.whp-btn-group > .whp-button {
  position: relative;
  float: left;
}
.whp-btn-group > .whp-button:hover,
.whp-btn-group > .whp-button:focus,
.whp-btn-group > .whp-button:active,
.whp-btn-group > .whp-button.active {
  z-index: 2;
}
.whp-btn-group .whp-button + .whp-button,
.whp-btn-group .whp-button + .whp-btn-group,
.whp-btn-group .whp-btn-group + .whp-button,
.whp-btn-group .whp-btn-group + .whp-btn-group {
  margin-left: -1px;
}
.whp-btn-group > .whp-button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.whp-btn-group > .whp-button:first-child {
  margin-left: 0;
}
.whp-btn-group > .whp-button:first-child:not(:last-child) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.whp-btn-group > .whp-button:last-child:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.whp-btn-group > .whp-btn-group {
  float: left;
}
.whp-btn-group > .whp-btn-group:not(:first-child):not(:last-child) > .whp-button {
  border-radius: 0;
}
.whp-btn-group > .whp-btn-group:first-child:not(:last-child) > .whp-button:last-child {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.whp-btn-group > .whp-btn-group:last-child:not(:first-child) > .whp-button:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
[data-toggle="buttons"] > .whp-button input[type="radio"],
[data-toggle="buttons"] > .whp-btn-group > .whp-button input[type="radio"],
[data-toggle="buttons"] > .whp-button input[type="checkbox"],
[data-toggle="buttons"] > .whp-btn-group > .whp-button input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
/****************************************************************************************
	Compose, read message / template / scenario
****************************************************************************************/
/* Message Info */
.whp-comp-info {
  font-size: 0.917em;
  margin: 10px 10px 10px 0;
  padding: 13px;
  border: 1px solid #c8d5dd;
  border-radius: 3px;
  background-clip: padding-box;
  color: #578cac;
  text-shadow: 0 1px 0 #fbfcfd;
}
.whp-comp-left .whp-comp-info {
  width: 475px;
}
.whp-comp-full .whp-comp-info {
  width: 692px;
}
/* Actions btn */
.whp-comp-btn {
  margin-top: 20px;
}
.whp-comp-recipient-btn .whp-pagination {
  margin: 0;
  float: right;
  margin-left: 5px;
}
.ie7 .whp-comp-recipient-btn {
  padding-bottom: 5px;
}
.ie7 .whp-comp-recipient-btn input {
  float: left;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .whp-comp-recipient-btn .whp-pagination {
    display: inline-block;
    float: none;
  }
  .whp-comp-recipient-btn .whp-pagination a {
    padding-left: 3px;
    padding-right: 3px;
  }
}
.ie7 .whp-comp-recipient-btn .whp-pagination,
.ie7 .whp-comp-recipient-btn .whp-pagination a {
  width: 15px !important;
}
/************************ Feature within a row */
.whp-comp-row-feature {
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 10px;
}
.whp-comp-row-feature:first-child {
  margin-top: 5px;
}
.whp-comp-row-feature .whp-control-group {
  padding-left: 0;
  margin-bottom: 0;
}
/* Row of feature in a tab design with two columns compLeft - compRight */
.whp-comp-left .whp-comp-row-feature {
  margin-left: 0;
}
/* Social Component */
.whp-social {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
}
.whp-social img {
  float: right;
  margin-right: 2px;
}
.whp-social:after {
  clear: both;
}
.whp-comp-social {
  list-style: none;
  display: inline;
  padding: 0;
}
.whp-comp-social li {
  display: inline;
}
.whp-comp-social li i {
  display: inline-block;
  float: none;
}
.ie7 .whp-comp-social li i {
  margin-right: 2px;
}
/************************ Preview on the right hand side */
.whp-sms-preview {
  padding: 10px 10px 5px 10px;
  border: 1px solid #a3b8c6;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, transparent 0 0 0;
}
.whp-sms-preview-separation {
  margin: 10px 0 3px 0;
  border-color: #e8e7e7;
}
.whp-sms-preview .whp-sms-preview-text {
  height: 147px;
  width: 175px;
  resize: none;
}
.whp-sms-preview input.whp-sms-preview-gauge {
  display: block;
  font-weight: 600;
  /* Maintain this color #939392 in Safari. Without this the colour is brighten and thus unreadable */
  -webkit-text-fill-color: #939392;
}
.ie7 .whp-sms-preview input.whp-sms-preview-gauge {
  margin-left: -5px;
}
.whp-sms-preview-gauge-warning {
  display: block;
  color: #939392;
}
/* Add a red border and a red text for the gauge in case of excess */
.whp-sms-preview-excedded .whp-sms-preview-gauge-warning {
  color: #bd3131;
}
.whp-sms-preview-excedded.whp-sms-preview {
  border: 1px solid #bd3131;
}
/* No border for sms preview even in case of hover */
.whp-sms-preview-text,
input.whp-sms-preview-gauge {
  padding: 0;
  overflow: auto;
  border: none;
  background-color: #ffffff;
  color: #939392;
  box-shadow: 0 0 0 0, transparent 0 0 0;
}
input.whp-sms-preview-gauge:hover {
  border: none;
}
.whp-sms-view-right,
.whp-data-display.whp-sms-view-right {
  margin-left: 0;
}
.whp-column4.whp-sms-view-right-column {
  width: 31%;
}
.whp-sms-view-right-column {
  border-left: 1px solid #e8e7e7;
}
/* Highlight text if SMS optimization */
.whp-sms-highlight {
  padding: 2px;
  border-bottom: 1px dotted #bd3131;
  background-color: #fce3e7;
  text-shadow: none;
}
/************************ Header of a the new message page */
.whp-comp-box {
  margin-bottom: 20px;
}
.whp-comp-bck {
  background-color: #f2f5f7;
  padding-bottom: 15px;
  padding-top: 8px;
  box-shadow: 0 0 2px 1px #bcccd6, transparent 0 0 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 0;
  background-clip: padding-box;
  border-top: 1px solid #f6f8fa;
}
.whp-comp-header {
  float: left !important;
  background-color: #f0f0f0;
  font-weight: bold;
}
.whp-comp-header.whp-form-header {
  border: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.whp-comp-header .whp-data-desc {
  font-weight: normal;
}
.whp-comp-header .whp-data-display {
  font-weight: 600;
}
.whp-comp-time {
  float: right;
  margin-bottom: 10px;
  color: #888888;
}
.whp-comp-time:after {
  clear: both;
}
/* Align on the left the label within a comp. page */
.whp-comp-right .whp-control-group .whp-control-label {
  text-align: left;
}
.whp-comp-bck label {
  color: #578cac;
  text-shadow: 0 1px 0 #f2f5f7;
}
/* Icon for OSOM */
.whp-comp-help {
  float: right;
  width: 22px;
  height: 23px;
  margin-top: 2px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -80px;
}
/************************ iFrame used by the rich text editor */
.whp-comp-toolbar-iframe {
  display: inline-block;
  height: 180px;
  padding: 5px;
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid #a3b8c6;
  background-color: #ffffff;
  color: #575757;
  line-height: 18px;
}
.whp-comp-left .whp-comp-toolbar-iframe {
  width: 498px !important;
}
.whp-comp-full .whp-comp-toolbar-iframe {
  width: 708px !important;
}
/************************ Toolbar structure */
.whp-comp-full .whp-comp-toolbar {
  margin: 0;
  margin-bottom: 10px;
}
.whp-comp-toolbar {
  margin: 0;
  padding: 0;
  margin-left: 10px;
  margin-bottom: 10px;
  list-style: none;
  float: left;
  width: 100%;
}
.whp-comp-toolbar:after {
  clear: both;
}
.whp-comp-toolbar:before,
.whp-comp-toolbar:after {
  content: "";
  display: table;
}
.whp-comp-left .whp-comp-toolbar {
  margin-left: 0;
  margin-bottom: 10px;
}
.whp-comp-toolbar li {
  float: left;
  margin-top: 5px;
}
/* Element from composition toolbar displayed within control */
.whp-control .whp-comp-toolbar {
  width: auto;
  margin: -8px 0 0 0;
}
.whp-form-single-line .whp-control .whp-comp-toolbar {
  width: 100%;
  margin: 0;
}
/* no float needed for whp-comp-toolbar within whp-control */
.ie7 .whp-control .whp-comp-toolbar {
  display: inline-block;
  float: none;
}
/************************ Rick Text Editor */
.whp-toolbar-link a,
.whp-toolbar-feature a {
  border-left: 1px solid #d6e0e6;
  border-right: 1px solid #d6e0e6;
  border-top: 1px solid #d6e0e6;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  display: inline-block;
  text-align: center;
  margin-right: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
  border-radius: 3px;
  background-clip: padding-box;
}
.whp-toolbar-feature a:hover,
.whp-toolbar-link a:hover {
  border-left: 1px solid #b4c5cf;
  border-right: 1px solid #b4c5cf;
  border-top: 1px solid #b4c5cf;
  background: #ffffff;
  background: linear-gradient(to bottom, #ffffff 0, #eff3f5 100%);
}
.whp-toolbar-link a.whp-toolbar-active,
.whp-toolbar-feature a.whp-toolbar-active {
  border-left: 1px solid #bec7cd;
  border-right: 1px solid #bec7cd;
  border-top: 1px solid #bec7cd;
  border-bottom: 1px solid #d6e0e6;
  background: #d0dbe3;
  background: linear-gradient(to bottom, #d0dbe3 0, #dde5e9 100%);
  box-shadow: 0 1px 1px #ffffff, transparent 0 0 0;
}
/* Toolbar Menu */
.whp-toolbar-menu {
  visibility: hidden;
  width: 27px;
  margin-top: 10px;
  position: absolute;
  padding: 5px;
  padding-bottom: 2px;
  margin-left: -5px;
  border: 1px solid #6188a3;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #ffffff;
  box-shadow: 0 5px 10px 5px #e3e3e3, transparent 0 0 0;
  z-index: 1;
}
.whp-toolbar-menu:after,
.whp-toolbar-menu:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  clear: both;
}
.whp-toolbar-menu:after {
  border-bottom-color: #ffffff;
  border-width: 10px;
  left: 18px;
  margin-left: -10px;
}
.whp-toolbar-menu:before {
  border-bottom-color: #6188a3;
  border-width: 11px;
  left: 18px;
  margin-left: -11px;
}
.whp-toolbar-menu.whp-medium {
  width: 85px !important;
  padding: 5px !important;
}
.whp-toolbar-menu.whp-large {
  width: 140px !important;
  padding: 5px !important;
}
.whp-toolbar-menu.whp-huge {
  width: 205px !important;
  padding: 5px !important;
}
.whp-toolbar-menu a {
  margin: 0;
  margin-bottom: 3px;
}
/* Specific menu within the toolbar */
.whp-toolbar-menu .whp-toolbar-link {
  width: 100%;
  float: left;
  line-height: 15px;
}
.whp-toolbar-menu .whp-toolbar-link a {
  width: 85%;
}
/* existing whp-control span conflicts with the 
		 whp-toolbar-menu span
		*/
.whp-toolbar-menu > span {
  padding: 0;
}
/* Default behaviour for an icon with the rich text editor */
.whp-toolbar-feature a i {
  display: inline-block;
}
.whp-toolbar-link a {
  height: 22px;
  width: auto;
  padding-top: 5px;
  text-shadow: 0 1px 0 #f2f5f7;
  padding-left: 8px;
  padding-right: 8px;
  color: #578cac !important;
}
/* Icons for the rich text editor */
.whp-toolbar-feature a .whp-toolbar-forminsert {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -280px -40px;
  width: 15px;
  height: 16px;
  margin-top: 5px;
}
.whp-toolbar-feature a:hover .whp-toolbar-forminsert {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -280px -60px;
}
.whp-toolbar-feature a .whp-toolbar-formedit {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -300px -40px;
  width: 15px;
  height: 16px;
  margin-top: 5px;
}
.whp-toolbar-feature a:hover .whp-toolbar-formedit {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -300px -60px;
}
/* bold + italic + underline */
.whp-toolbar-feature a .whp-toolbar-formatting {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -200px;
  width: 10px;
  height: 12px;
  margin-top: 8px;
}
.whp-toolbar-feature a:hover .whp-toolbar-formatting {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -220px;
}
.whp-toolbar-feature a .whp-toolbar-bold {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -120px;
  width: 10px;
  height: 12px;
  margin-top: 8px;
}
.whp-toolbar-feature a:hover .whp-toolbar-bold {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -140px;
}
.whp-toolbar-feature a .whp-toolbar-italic {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -120px;
  width: 8px;
  height: 12px;
  margin-top: 8px;
}
.whp-toolbar-feature a:hover .whp-toolbar-italic {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -140px;
}
.whp-toolbar-feature a .whp-toolbar-underline {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -120px;
  width: 10px;
  height: 13px;
  margin-top: 8px;
}
.whp-toolbar-feature a:hover .whp-toolbar-underline {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -140px;
}
/* Text Alignements */
.whp-toolbar-feature a .whp-toolbar-leftjustify {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -120px;
  width: 15px;
  height: 10px;
  margin-top: 9px;
}
.whp-toolbar-feature a:hover .whp-toolbar-leftjustify {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -140px;
}
.whp-toolbar-feature a .whp-toolbar-centerjustify {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -160px;
  width: 14px;
  height: 10px;
  margin-top: 9px;
}
.whp-toolbar-feature a:hover .whp-toolbar-centerjustify {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -180px;
}
.whp-toolbar-feature a .whp-toolbar-justify {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -200px;
  width: 15px;
  height: 10px;
  margin-top: 9px;
}
.whp-toolbar-feature a:hover .whp-toolbar-justify {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -220px;
}
.whp-toolbar-feature a .whp-toolbar-fulljustify {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -200px;
  width: 15px;
  height: 10px;
  margin-top: 9px;
}
.whp-toolbar-feature a:hover .whp-toolbar-fulljustify {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -220px;
}
.whp-toolbar-feature a .whp-toolbar-rightjustify {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px -160px;
  width: 15px;
  height: 10px;
  margin-top: 9px;
}
.whp-toolbar-feature a:hover .whp-toolbar-rightjustify {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px -180px;
}
.whp-toolbar-feature a .whp-toolbar-outdent {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -200px;
  width: 15px;
  height: 10px;
  margin-top: 9px;
}
.whp-toolbar-feature a:hover .whp-toolbar-outdent {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -220px;
}
.whp-toolbar-feature a .whp-toolbar-indent {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -200px;
  width: 15px;
  height: 10px;
  margin-top: 9px;
}
.whp-toolbar-feature a:hover .whp-toolbar-indent {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -220px;
}
.whp-toolbar-feature a .whp-toolbar-numberedlist {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -120px;
  width: 13px;
  height: 16px;
  margin-top: 5px;
}
.whp-toolbar-feature a:hover .whp-toolbar-numberedlist {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -140px;
}
.whp-toolbar-feature a .whp-toolbar-list {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -120px;
  width: 12px;
  height: 13px;
  margin-top: 7px;
}
.whp-toolbar-feature a:hover .whp-toolbar-list {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -140px;
}
.whp-toolbar-feature a .whp-toolbar-textcolour {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -120px;
  width: 13px;
  height: 15px;
  margin-top: 6px;
}
.whp-toolbar-feature a:hover .whp-toolbar-textcolour {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -140px;
}
.whp-toolbar-feature a .whp-toolbar-bgcolour {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -160px;
  width: 13px;
  height: 17px;
  margin-top: 4px;
}
.whp-toolbar-feature a:hover .whp-toolbar-bgcolour {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -180px;
}
.whp-toolbar-feature a .whp-toolbar-font {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -160px;
  width: 11px;
  height: 12px;
  margin-top: 8px;
}
.whp-toolbar-feature a:hover .whp-toolbar-font {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -180px;
}
.whp-toolbar-feature a .whp-toolbar-fontsize {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px -120px;
  width: 14px;
  height: 13px;
  margin-top: 8px;
}
.whp-toolbar-feature a:hover .whp-toolbar-fontsize {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px -140px;
}
.whp-toolbar-feature a .whp-toolbar-addword {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -160px;
  width: 15px;
  height: 13px;
  margin-top: 8px;
}
.whp-toolbar-feature a:hover .whp-toolbar-addword {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -180px;
}
.whp-toolbar-feature a .whp-toolbar-url {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -200px;
  width: 11px;
  height: 11px;
  margin-top: 8px;
}
.whp-toolbar-feature a:hover .whp-toolbar-url {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -220px;
}
.whp-toolbar-feature a .whp-toolbar-addcode {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -160px;
  width: 13px;
  height: 7px;
  margin-top: 11px;
}
.whp-toolbar-feature a:hover .whp-toolbar-addcode {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -180px;
}
.whp-toolbar-feature a .whp-toolbar-clear {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -200px;
  width: 12px;
  height: 12px;
  margin-top: 9px;
}
.whp-toolbar-feature a:hover .whp-toolbar-clear {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -220px;
}
.whp-toolbar-feature a .whp-toolbar-world {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -160px;
  width: 10px;
  height: 11px;
  margin-top: 8px;
}
.whp-toolbar-feature a:hover .whp-toolbar-world {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -180px;
}
.whp-toolbar-feature a .whp-toolbar-b {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -160px;
  width: 12px;
  height: 13px;
  margin-top: 7px;
}
.whp-toolbar-feature a:hover .whp-toolbar-b {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -180px;
}
.whp-toolbar-feature a .whp-toolbar-undo {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -40px;
  width: 14px;
  height: 16px;
  margin-top: 5px;
}
.whp-toolbar-feature a:hover .whp-toolbar-undo {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -60px;
}
.whp-toolbar-feature a .whp-toolbar-redo {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -40px;
  width: 14px;
  height: 16px;
  margin-top: 5px;
}
.whp-toolbar-feature a:hover .whp-toolbar-redo {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -60px;
}
/************************ Column system for compo page only */
.whp-comp-left {
  width: 519px;
  float: left;
  margin-left: 10px;
}
.ie7 .whp-comp-left,
.ie8 .whp-comp-left,
.ie9 .whp-comp-left {
  width: 509px !important;
}
.whp-comp-right {
  width: 180px;
  float: left;
}
.ie7 .whp-comp-right {
  margin-left: 10px;
}
.ie8 .whp-comp-right,
.ie9 .whp-comp-right {
  margin-left: 10px;
}
.whp-comp-full {
  width: 720px;
  float: left;
  margin-left: 10px;
}
.ie7 .whp-comp-left,
.ie7 .whp-comp-full {
  margin-left: 5px;
}
.whp-comp-left textarea {
  padding: 5px;
  width: 493px !important;
  margin-bottom: 10px;
}
/* Match the height of sms preview */
/* Without optimize button */
.whp-comp-textarea-height-sms {
  height: 210px;
}
/* With optimize button  */
.whp-comp-textarea-height-optimizesms {
  height: 223px;
}
.whp-comp-left .whp-control-fluid input {
  width: 503px !important;
}
/* Textarea with width spreads on a whole tab */
.whp-comp-full textarea {
  padding: 5px;
  width: 705px;
  margin-bottom: 10px;
}
/************************ Form within the column system for comp page */
.whp-comp-left .whp-control-group {
  padding-left: 0;
}
.whp-comp-right .whp-control-group {
  padding-left: 0;
}
.whp-comp-left .whp-control-group .whp-control-label {
  width: auto;
}
.whp-comp-right .whp-control-group .whp-control-label {
  float: none;
}
.whp-comp-right .whp-control-group .whp-control {
  margin-left: 0;
}
.whp-comp-full .whp-control-group {
  padding-left: 0;
}
/************************ Row which contains field to add labels + labels which has been added */
@media screen and (min-width: 1200px) {
  .whp-comp-label .whp-column9 {
    width: 70%;
  }
  .whp-comp-label .whp-column3 {
    margin-left: 0;
    width: 30%;
  }
}
/************************ Preview on the right hand side */
#oldCategoryContainer i,
#categoryContainer i,
#templateCategoryContainer i {
  margin-top: 5px;
  margin-left: 2px;
}
/****************************************************************************************
	Compose - Recipient Field
****************************************************************************************/
.recipientsBox {
  float: left;
  margin-right: 2px;
  height: 25px;
  padding-right: 4px;
  border: 1px solid #a3b8c6;
  border-radius: 1px;
  background-clip: padding-box;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, transparent 0 0 0;
}
.recipientsBox:hover {
  border: 1px solid #a3b8c6Hover;
  border-style: solid;
  border-width: 1px;
}
.recipientsBox input,
.recipientsBox textarea {
  height: 15px;
  border: 0;
  margin-left: 5px !important;
  margin-top: 3px !important;
  float: left;
  z-index: 5000;
  border-radius: 0;
  background-clip: padding-box;
  box-shadow: 0 0 0 0, transparent 0 0 0 !important;
  background-color: transparent;
}
.recipientsBox textarea {
  width: 250px;
  height: 120px !important;
  resize: none;
  border: 0;
  float: left;
  overflow: auto;
  display: none;
  margin-left: 0 !important;
  margin-top: 0 !important;
  padding: 5px !important;
}
.recipientsBox input:hover,
.recipientsBox input:focus,
.recipientsBox textarea:hover,
.recipientsBox textarea:focus {
  border: 0 !important;
}
.recipientsBox #status {
  float: right;
  margin-right: 5px;
  margin-top: 5px;
  font-weight: bold;
  text-align: left;
  display: none;
  cursor: pointer;
  text-shadow: none !important;
}
.recipientsBox #status span {
  text-align: left;
  padding: 0 !important;
}
#linkSee {
  color: #666666;
  margin-top: 10px;
  text-align: left;
  display: none;
}
#deleteAll {
  color: #f45633;
  text-align: left;
  display: none;
  margin-top: 10px;
}
#attributeDescriptionMenu,
#attributeInstructionMenu {
  margin-left: 0;
}
/* Specific pages */
/****************************************************************************************
	Login

	Attention NEEDS to be refactor
****************************************************************************************/
.whp-login-body {
  padding: 0;
  margin: 0;
  background-image: url("../img/bckLogin.png");
  background-repeat: repeat;
}
.whp-login-wrap {
  min-height: 100%;
  background: #000000;
  /* autoprefixer: off */
  background: url("../img/bckLoginLight.png"), -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 40%);
  background: url("../img/bckLoginLight.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0)));
  background: url("../img/bckLoginLight.png"), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 40%);
  background: url("../img/bckLoginLight.png"), -o-linear-gradient(top, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 40%);
  background: url("../img/bckLoginLight.png"), -ms-linear-gradient(top, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 40%);
  background: url("../img/bckLoginLight.png"), linear-gradient(top, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 40%);
  background-repeat: repeat;
}
.ie7 .whp-login-wrap,
.ie8 .whp-login-wrap,
.ie9 .whp-login-wrap {
  background-image: url("../img/bckLogin.png");
  background-repeat: repeat;
}
.whp-login-main {
  overflow: hidden;
  padding-bottom: 70px;
}
/* must be same height as the footer */
.whp-login-inner-wrap {
  width: 360px;
  margin: auto;
  color: #cacaca;
}
.whp-login-inner-wrap .whp-column6 {
  width: 50%;
  margin-left: 0;
}
#whp-login-devider {
  display: none;
  margin-top: 18px;
  height: 2px;
  border-color: #080808;
  background-color: #333333;
  opacity: .8;
}
.whp-login-container {
  position: relative;
  height: 380px;
  width: 360px;
  float: right;
  z-index: 9000;
  font-weight: bold;
  -o-perspective: 800;
  perspective: 800;
}
.ie7 .whp-login-container {
  margin-top: 25px;
}
.whp-login-intro {
  width: 422px;
  padding-top: 51px;
  color: #ffffff;
}
.whp-login-intro .whp-login-intro-title {
  margin-bottom: 21px;
  font-weight: bold;
}
.whp-login-intro .whp-login-intro-content {
  margin-bottom: 13px;
  line-height: 23px;
}
.whp-login-intro .whp-large {
  padding: 8px 20px;
}
.ie7 .whp-login-intro .whp-large {
  padding: 0 20px 6px;
}
.ie8 .whp-login-intro .whp-large {
  padding: 5px 20px 8px;
}
.whp-login-intro .whp-btn {
  font-weight: 500;
  margin-bottom: 30px;
  height: 80px;
}
.whp-login-intro .whp-login-intro-link {
  color: #238ad1;
}
.whp-login-intro-note {
  margin-top: 40px;
  color: #888888;
}
/* Manage the animation, container for the login screen or the recover screen */
.whp-login-card {
  position: absolute;
  border-radius: 10px;
  background-clip: padding-box;
  transition: transform 1s;
}
.whp-login-recover {
  opacity: 0;
}
.whp-login-recover.whp-ANIM-noflip {
  opacity: 1;
}
.whp-ANIM-flipped-1 {
  opacity: 0;
}
.whp-ANIM-flipped-2 {
  opacity: 1;
}
.whp-ANIM-noflip {
  transform: none;
}
.whp-login-box {
  padding: 24px 30px 35px;
  height: 272px;
  /* autoprefixer: off */
  background: #565656;
  background: url("../img/bckLoginBox.png"), #565656;
  background: url("../img/bckLoginBox.png"), -moz-linear-gradient(top, #565656 0, #3f3f3f 100%);
  background: url("../img/bckLoginBox.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #3f3f3f));
  background: url("../img/bckLoginBox.png"), -webkit-linear-gradient(top, #565656 0, #3f3f3f 100%);
  background: url("../img/bckLoginBox.png"), -o-linear-gradient(top, #565656 0, #3f3f3f 100%);
  background: url("../img/bckLoginBox.png"), -ms-linear-gradient(top, #565656 0, #3f3f3f 100%);
  background: url("../img/bckLoginBox.png"), linear-gradient(to bottom, #565656 0, #3f3f3f 100%);
  background-repeat: repeat;
  border-bottom: 1px solid #2b2b2b;
  z-index: 1000;
}
.ie7 .whp-login-box {
  background: #565656;
}
.ie8 .whp-login-box {
  background-color: #565656;
}
.whp-login-box > h1 {
  margin-bottom: 14px;
}
.whp-login-recover {
  padding: 24px 30px 35px;
  height: 272px;
  background-image: url("../img/bckBody.png");
  background-repeat: repeat;
  border: 1px solid #666e73;
  box-shadow: inset 0 1px 0 #ffffff, transparent 0 0 0;
  border-radius: 10px;
  background-clip: padding-box;
  z-index: 100;
}
.ie7 .whp-login-recover,
.ie8 .whp-login-recover {
  border: 1px solid #666e73;
}
.whp-login-header-text {
  margin-bottom: 10px;
}
.whp-login-header-text p {
  font-size: 1.80em;
  text-align: center;
  font-weight: 100;
  color: #00b4e4;
}
.whp-login-header-text span {
  color: #cacaca;
}
.whp-login-header-logo {
  width: 360px;
  height: 64px;
  font-size: 1.6em;
  z-index: 10000;
  color: white;
  text-align: center;
  background: url("../img/loginV6.png") no-repeat;
  position: relative;
  top: 7px;
  padding-top: 110px;
}
.ie7 .whp-login-header-logo,
.ie8 .whp-login-header-logo {
  margin-bottom: 5px;
}
.whp-login-container .whp-control-group {
  padding-left: 0 ;
  margin-bottom: 8px;
}
.ie7 .whp-login-container .whp-control-group {
  margin-bottom: 3px;
}
.whp-login-recover > h1 {
  height: 20px;
  width: 100%;
  margin-bottom: 19px;
  background: none;
  color: #4b7a96;
  text-shadow: 0 1px 0 #f2f5f7;
}
.whp-login-container label {
  color: #cacaca;
  padding-bottom: 5px;
  font-weight: bold;
}
.whp-login-recover label {
  color: #3984ab;
}
.whp-login-input,
.whp-password-input {
  margin-bottom: 5px;
}
.whp-login-container input {
  width: 276px;
  height: 17px;
  padding: 7px 11px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border: 1px solid #323232;
  /* autoprefixer: off */
  background: #eaeaea;
  background: -moz-linear-gradient(top, #eaeaea 0, #fefefe 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaeaea), color-stop(100%, #fefefe));
  background: -webkit-linear-gradient(top, #eaeaea 0, #fefefe 100%);
  background: -o-linear-gradient(top, #eaeaea 0, #fefefe 100%);
  background: -ms-linear-gradient(top, #eaeaea 0, #fefefe 100%);
  background: linear-gradient(to bottom, #eaeaea 0, #fefefe 100%);
  color: #303030;
  border-radius: 4px;
  background-clip: padding-box;
  box-shadow: 0 1px 0 #7d7d7d, 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}
.whp-login-recover input {
  box-shadow: 0 0 0 0, transparent 0 0 0;
  border: 1px solid #96b5c3;
  background: none;
  background-color: #ffffff;
}
.whp-login-container input:hover,
.whp-login-container input:focus {
  border: 1px solid #323232;
  box-shadow: 0 1px 0 #7d7d7d, 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}
.whp-login-recover input:hover,
.whp-login-recover input:focus {
  box-shadow: 0 0 0 0, transparent 0 0 0;
  border: 1px solid #96b5c3;
  background-color: #ffffff;
}
.whp-link-login-recover {
  font-weight: 800;
  color: #cacaca;
  cursor: pointer;
}
.whp-login-container hr {
  margin: 0;
  height: 2px;
  border-color: #2b2b2b;
  background-color: #4d4d4d;
}
.ie7 .whp-login-container hr,
.ie8 .whp-login-container hr {
  margin: 0;
  height: 0;
  border-color: #505050;
}
.whp-login-recover hr {
  height: 2px;
  margin-bottom: 10px;
  background-color: #ebf2f5;
  border-color: #a0bbcd;
}
.ie7 .whp-login-recover hr,
.ie8 .whp-login-recover hr {
  margin-bottom: 10px;
  border-color: #a0bbcd;
}
.whp-login-container .whp-btn {
  margin-bottom: 23px;
  padding: 6px 13px;
  border: 1px solid #0f3652;
}
.ie7 .whp-login-container .whp-btn {
  padding: 2px 13px;
  margin: 5px 0 18px;
}
.ie8 .whp-login-container .whp-btn {
  padding: 5px 13px;
}
.whp-login-recover .whp-btn {
  margin-bottom: 23px;
}
.whp-login-box .whp-link-login-recover,
.whp-login-box .whp-link-login-recover:hover {
  display: block;
  margin-top: 10px;
  color: #d7e1e8;
}
.ie7 .whp-login-box .whp-link-login-recover,
.ie7 .whp-login-box .whp-link-login-recover:hover {
  margin-top: 2px;
}
.whp-login-recover .whp-link-login-recover,
.whp-login-recover .whp-link-login-recover:hover {
  display: block;
  margin-top: 10px;
  color: #3087c4;
  text-shadow: 0 1px 0 #f2f5f7;
}
.whp-login-shadow {
  width: 360px;
  height: 20px;
  position: relative;
  margin: 13px auto 0;
  float: right;
  z-index: 8000;
  /* autoprefixer: off */
  background: -moz-radial-gradient(center, ellipse cover, rgba(33, 33, 33, 0.4) 0, rgba(43, 43, 43, 0) 80%);
  background: -webkit-gradient(radial, center center, 0, center center, 80%, color-stop(0%, rgba(33, 33, 33, 0.4)), color-stop(80%, rgba(43, 43, 43, 0)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(33, 33, 33, 0.4) 0, rgba(43, 43, 43, 0) 80%);
  background: -o-radial-gradient(center, ellipse cover, rgba(33, 33, 33, 0.4) 0, rgba(43, 43, 43, 0) 80%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(33, 33, 33, 0.4) 0, rgba(43, 43, 43, 0) 80%);
  background: radial-gradient(center, ellipse cover, rgba(33, 33, 33, 0.4) 0, rgba(43, 43, 43, 0) 80%);
}
.whp-login-backlight {
  height: 250px;
  width: 100%;
  margin: auto;
  top: 0;
  position: absolute;
  z-index: 7000;
  opacity: 0.6;
  /* autoprefixer: off */
  background: -moz-radial-gradient(center, ellipse cover, #595959 0, rgba(56, 56, 56, 0.5) 40%, rgba(47, 47, 47, 0) 80%);
  background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%, #595959), color-stop(40%, rgba(56, 56, 56, 0.5)), color-stop(80%, rgba(47, 47, 47, 0)));
  background: -webkit-radial-gradient(center, ellipse cover, #595959 0, rgba(56, 56, 56, 0.5) 40%, rgba(47, 47, 47, 0) 80%);
  background: -o-radial-gradient(center, ellipse cover, #595959 0, rgba(56, 56, 56, 0.5) 40%, rgba(47, 47, 47, 0) 80%);
  background: -ms-radial-gradient(center, ellipse cover, #595959 0, rgba(56, 56, 56, 0.5) 40%, rgba(47, 47, 47, 0) 80%);
  background: radial-gradient(center, ellipse cover, #595959 0, rgba(56, 56, 56, 0.5) 40%, rgba(47, 47, 47, 0) 80%);
  background-repeat: repeat;
}
.ie7 .whp-login-backlight,
.ie8 .whp-login-backlight,
.ie9 .whp-login-backlight {
  display: none;
}
/************************ Error */
.whp-login-container .whp-error {
  border: 3px solid #cf3030;
}
/************************ Login Footer */
.whp-login-footer {
  clear: both;
  height: 70px;
  margin-top: -70px;
  position: relative;
  z-index: 8500;
  border-top: #000000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset, transparent 0 0 0;
  background-image: url("../img/bckBody.png");
  color: #3d6c88;
  text-shadow: 0 1px 1px #ffffff;
}
.whp-login-footer-links {
  padding-top: 28px;
  border-top: #000000;
  background-image: url("../img/bckBody.png");
  color: #3d6c88;
  text-shadow: 0 1px 1px #ffffff;
}
/************************ Education Environment */
/* Patch on existing class for EDU, for position */
.whp-login-edu-reposition {
  width: 360px;
  height: 400px;
  margin: 180px auto;
  float: none;
}
.ie7 .whp-login-edu-reposition {
  margin: 180px auto;
}
.whp-login-edu-bcklight-reposition {
  margin-top: 620px;
}
.whp-login-edu.whp-login-shadow {
  position: absolute;
  top: 440px;
}
/*  Add the header with the logo */
.whp-login-edu {
  padding: 0;
  border-top: 0;
}
.whp-login-edu form,
.whp-login-edu p {
  padding: 0 30px;
}
.whp-login-container .whp-login-edu hr {
  margin: 0 30px;
}
.whp-login-recover.whp-login-edu .whp-login-logo {
  padding: 30px 30px 0 30px;
}
.whp-login-box.whp-login-edu .whp-login-logo {
  width: 100%;
  height: 66px;
  margin-bottom: 30px;
  border-top: 1px solid #7ad2f6;
  border-bottom: 1px solid #414141;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 10px;
  background-clip: padding-box;
  /* autoprefixer: off */
  background-color: #5ecefd;
  background: url("../img/bckLoginEdu.png"), -moz-linear-gradient(top, #5ecefd 0, #418fb0 100%);
  background: url("../img/bckLoginEdu.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5ecefd), color-stop(100%, #418fb0));
  background: url("../img/bckLoginEdu.png"), -webkit-linear-gradient(top, #5ecefd 0, #418fb0 100%);
  background: url("../img/bckLoginEdu.png"), -o-linear-gradient(top, #5ecefd 0, #418fb0 100%);
  background: url("../img/bckLoginEdu.png"), -ms-linear-gradient(top, #5ecefd 0, #418fb0 100%);
  background: url("../img/bckLoginEdu.png"), linear-gradient(to bottom, #5ecefd 0, #418fb0 100%);
  background-repeat: repeat, repeat;
}
.ie7 .whp-login-box.whp-login-edu .whp-login-logo {
  padding-left: 0 30px 0 30px;
  background-color: #5ecefd;
}
.whp-login-logo-content {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px -340px;
  float: left;
  width: 300px;
  height: 29px;
  text-indent: -5000px;
  margin-top: 20px;
  margin-left: 30px;
}
.whp-login-box.whp-login-edu,
.whp-login-recover.whp-login-edu {
  height: 360px;
}
.whp-login-recover .whp-btn.whp-login-edu {
  margin-bottom: 51px;
}
/* Media Queries */
/* for tablets */
@media only screen and (min-width: 480px) and (max-width: 980px) {
  .whp-login-page .whp-login-inner-wrap {
    margin-top: 50px;
  }
  .whp-login-edu-reposition {
    margin-top: 150px;
  }
  .whp-login-backlight {
    height: 200px;
    margin-top: 560px;
  }
  .whp-login-edu-bcklight-reposition {
    margin-top: 650px;
  }
}
/* for desktop */
@media only screen and (min-width: 980px) {
  .whp-login-inner-wrap {
    margin-top: 50px;
  }
  .whp-login-backlight {
    height: 200px;
    margin-top: 560px;
  }
  .whp-login-edu-bcklight-reposition {
    margin-top: 650px;
  }
}
/* for large desktop screen */
@media screen and (min-width: 1200px) {
  .whp-login-page .whp-login-inner-wrap {
    margin-top: 50px;
  }
  .whp-login-backlight {
    height: 200px;
    margin-top: 560px;
  }
}
@media screen and (min-width: 1024px) and (min-height: 700px) {
  .whp-login-inner-wrap {
    margin-top: 50px;
  }
  .ie7 .whp-login-inner-wrap,
  .ie8 .whp-login-inner-wrap {
    margin-top: 50px;
  }
  .whp-login-edu-bcklight-reposition {
    margin-top: 550px;
  }
}
@media screen and (min-width: 1500px) {
  .whp-login-page .whp-login-inner-wrap {
    margin-top: 140px;
  }
  .whp-login-backlight {
    height: 250px;
    margin-top: 620px;
  }
  .whp-login-edu-bcklight-reposition {
    margin-top: 540px;
  }
}
/****************************************************************************************
	Access History
****************************************************************************************/
body.whp-access-history .signup-box {
  width: 600px;
  padding-top: 25px;
  padding-bottom: 25px;
}
body.whp-access-history .whp-login-inner-wrap {
  width: 670px;
}
body.whp-access-history .header {
  width: 670px;
}
body.whp-access-history table {
  width: 100%;
}
.whp-login-table {
  margin-bottom: 20px;
}
.whp-login-table th {
  font-size: 14px;
  color: #335f79;
  font-weight: bold;
  margin-bottom: 3px;
  text-align: left;
  padding: 7px 15px 15px;
}
.whp-login-table td {
  color: #303030;
  font-size: 14px;
  background-color: #FFF;
  border-bottom: 1px solid #e0e0e0;
  padding: 15px;
}
.whp-login-table .whp-dot-wrap {
  display: inline-block;
  padding-bottom: 1px;
  height: 7px;
}
.whp-login-table .whp-dot {
  display: block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 5px;
}
.whp-login-table .whp-dot-red {
  background-color: #e70009;
}
.whp-login-table .whp-dot-green {
  background-color: #00ac68;
}
div.whp-continue-bar p {
  float: left;
  width: 490px;
}
div.whp-continue-bar .whp-btn {
  float: right;
  width: 150px;
  margin-top: 0;
}
/****************************************************************************************
	Address Book
****************************************************************************************/
/* Deactiviation of the style for a form */
.whp-container-actions .whp-form-header,
.whp-address-book-container .whp-form-header,
.whp-address-book-container .whp-form-bck {
  background: none;
  border: 0;
}
/* Apply the style for the address book */
.whp-address-book-container {
  border: 1px solid #b5c9d6;
  background-image: url("../img/bckActions.png");
  background-repeat: repeat;
  padding: 10px 10px 0 10px;
  min-height: 27px;
  color: #578cac;
  text-shadow: 0 1px 0 #f2f5f7;
  width: auto;
  border-radius: 3px;
  background-clip: padding-box;
  padding-top: 20px;
}
.ie7 .whp-address-book-container {
  float: left;
  width: 97%;
}
/* Label usage witin the adress book */
.whp-address-book-container label {
  color: #578cac;
}
.whp-address-book-container .whp-address-book-line {
  display: table-cell;
  height: 15px;
  line-height: 0;
  vertical-align: top;
  padding-right: 5px;
}
.whp-address-book-container .whp-address-book-fluid-line {
  width: 100%;
}
.whp-address-book-container .whp-address-book-line-nomargin {
  padding-right: 0;
}
.whp-address-book-container .whp-address-book-fluid-line input {
  width: 98%;
}
.whp-address-book-container .whp-column2 {
  width: 5% !important;
  margin-left: 2% !important;
  margin-right: 2% !important;
}
.whp-container .whp-address-book-container .whp-column2 {
  width: 15% !important;
  margin-right: 0 !important;
}
.whp-address-book-container .whp-column5 {
  width: 45.5% !important;
  margin-left: 0 !important;
}
.whp-address-book-container .whp-control-group {
  padding-left: 0;
}
/* fix the ie7 issue of the input box width and height */
.ie7 .whp-address-book-container .whp-address-book-fluid-line input {
  width: 85%;
  height: auto;
}
.whp-address-book-container .whp-address-book-fluid-line input.epochCalInput {
  width: 92%;
}
/* adjust the address book buttons position to fit the fancybox */
.whp-address-book-button {
  margin-top: 100px;
}
/* adjust the address book buttons position to fit the fancybox for ie7 */
.ie7 .whp-address-book-button {
  margin-top: 160px;
}
.whp-address-book-nested {
  margin-top: 20px;
}
.whp-address-book-container h2 {
  padding-top: 5px;
}
/* fix IE7 address book line padding issue */
.ie7 .whp-address-book-container .whp-address-book-line {
  padding-bottom: 15px;
  float: left;
}
.ie7 .whp-address-book-container .whp-control-group {
  clear: both;
}
.ie7 .whp-address-book-container .whp-address-book-fluid-line {
  width: auto;
}
.ie7 .whp-address-book-container .whp-address-book-search .whp-address-book-fluid-line input {
  width: 85%;
}
.ie7 .whp-address-book-container .whp-address-book-search .whp-btn {
  margin-left: 5px;
}
/************************ Address Book Lite */
.whp-address-book-lite {
  padding: 5px;
  width: 353px;
  z-index: 5000;
  border-collapse: collapse;
  border: 1px solid #6188a3;
  background-color: #ffffff;
  text-align: center;
  box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.1), transparent 0 0 0;
}
.whp-address-book-lite-container {
  width: 340px;
  padding: 5px;
  min-height: 27px;
  border: 1px solid #b5c9d6;
  border-radius: 3px;
  background-clip: padding-box;
  background-image: url("../img/bckActions.png");
  background-repeat: repeat;
  color: #578cac;
  text-align: center;
}
.whp-address-book-lite-title {
  text-align: right;
  width: 352px;
}
.whp-address-book-lite-close {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px -260px;
  display: block;
  margin-left: 336px;
  width: 16px;
  height: 17px;
  margin-bottom: 5px;
}
.whp-address-book-lite-close:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -20px -260px;
  display: block;
  margin-left: 336px;
  width: 16px;
  height: 17px;
}
/****************************************************************************************
	Escalation
****************************************************************************************/
.whp-escalation-name {
  display: block;
  margin-bottom: 5px;
}
.whp-escalation-name-desc {
  display: block;
  color: #8F8E8A;
}
.whp-escalation-arrow {
  display: inline-block;
  width: 11px;
  height: 12px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px 0px;
}
.whp-escalation-arrow-dude {
  display: inline-block;
  width: 26px;
  height: 13px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -40px;
}
.ie7 .whp-escalation-arrow {
  margin-right: 5px;
  margin-top: 5px;
  float: left;
}
.whp-escalation-name-remove {
  float: right;
  width: 14px;
  height: 15px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -20px;
  cursor: pointer;
}
.whp-escalation-row {
  background-color: #ffffff;
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 15px;
  padding-top: 10px;
}
.whp-escalation-table .whp-column2 {
  margin-left: 1%;
}
.whp-escalation-table .whp-column1 i {
  margin-left: 20px;
}
/****************************************************************************************
	Status page

	Rounded corners set at 3.1px instead of 3px for IE10. See link below.
	http://blogs.atlassian.com/2012/11/rounded-corners-and-gradients-in-ie10-the-4-missing-pixels/
****************************************************************************************/
/************************ Status */
.whp-status-container {
  height: 16px;
  display: inline-block;
  overflow: hidden;
  margin-top: 3px;
  margin-bottom: 0;
  border-radius: 3.1px;
  background-clip: padding-box;
  border-top: 1px solid #c3c3c3;
  box-shadow: inset 0 1px 1px 1px #d2d2d2, transparent 0 0 0;
  padding: 1px 2px 2px;
  background: #dcdcdc;
  background: linear-gradient(to bottom, #dcdcdc 0, #e9e9e9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc', endColorstr='#e9e9e9', GradientType=0);
}
.whp-status-container:after {
  clear: both;
}
.whp-status-container:before,
.whp-status-container:after {
  content: "";
  display: table;
}
.whp-status-container .whp-status-loader {
  height: 14px;
  float: left;
}
.whp-status-legend {
  margin-top: 10px;
  display: block;
}
.whp-status-legend ul {
  margin: 0;
  padding: 0;
}
.whp-status-legend ul li {
  display: inline;
  margin-right: 5px;
}
.whp-status-legend ul li i {
  margin-right: 2px;
}
.ie7 .whp-status-legend ul li i {
  margin-right: 2px;
}
/************************ Progress, custom width for each column */
.whp-status-table .whp-status-extra {
  width: 15px;
  padding: 0;
}
.whp-status-table .whp-status-icon {
  width: 15px;
  padding: 0 0 0 5px;
}
.ie7 .whp-status-table .whp-status-icon {
  width: 25px;
  padding: 0;
}
.whp-status-state {
  width: 95px;
}
.whp-status-recipients {
  width: 40px;
}
.ie7 .whp-status-recipients {
  width: 45px;
}
.whp-status-percent {
  width: 20px;
}
/* Hack for Safari */
::made-up-pseudo-element,
.whp-status-percent {
  width: 25px;
}
.whp-status-bar {
  width: 280px;
}
.whp-status-link {
  width: 130px;
  text-align: right;
  word-wrap: wrap;
}
/* Table alignements */
.whp-status-table-header i {
  margin-right: 5px;
  float: left;
}
.whp-status-table-header {
  padding: 6px 10px 2px;
  height: 31px;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  background-color: #f0f0f0;
  text-align: left;
  text-shadow: 0 1px 0 #f2f5f7;
}
/************************ Status report */
.whp-status-table td {
  vertical-align: middle !important;
}
.whp-status-table-report-state {
  width: 80px;
}
.whp-status-table-report .whp-table-column0 {
  padding-left: 0;
  padding-right: 0;
}
.ie7 .whp-status-table-report .whp-table-column0 {
  width: 25px;
}
.whp-status-table-report .whp-table-column1 {
  padding-left: 0;
  padding-right: 10px !important;
  width: 7%;
}
/* Icons */
.whp-status-icons-sent {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -60px;
}
.whp-status-icons-pending {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -60px;
}
.whp-status-icons-received {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -60px;
}
.whp-status-icons-acknowledged {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -60px;
}
.whp-status-icons-undeliverable {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -60px;
}
.whp-status-icons-published {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -60px;
}
.whp-status-icons-publishing {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -80px;
}
.whp-status-icons-unpublished {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -100px;
}
.whp-status-icons-failed {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -80px;
}
/* Borders parameters */
.whp-status-container .whp-status-loader {
  border-radius: 3.1px;
  background-clip: padding-box;
}
.whp-status-container .whp-status-loader.whp-status-loader-noborder {
  border-radius: 0 !important;
  background-clip: padding-box !important;
}
.whp-status-container .whp-status-loader.whp-status-loader-noborder-left {
  border-top-right-radius: 3.1px;
  border-bottom-right-radius: 3.1px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  background-clip: padding-box;
}
.whp-status-container .whp-status-loader.whp-status-loader-noborder-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3.1px;
  border-top-left-radius: 3.1px;
  background-clip: padding-box;
}
/* Gradient Colours */
/* Capital letters are used because specific requirements from the dev. team */
/* Gradient for Status */
.whp-gradient-status-a {
  background: #989898;
  background: linear-gradient(to bottom, #989898 0, #7e7e7e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#989898', endColorstr='#7e7e7e', GradientType=0);
}
.whp-gradient-status-b {
  background: #e29627;
  background: linear-gradient(to bottom, #e29627 0, #bd7d21 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e29627', endColorstr='#bd7d21', GradientType=0);
}
.whp-gradient-status-c {
  background: #44ad36;
  background: linear-gradient(to bottom, #44ad36 0, #39902d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44ad36', endColorstr='#39902d', GradientType=0);
}
.whp-gradient-status-d {
  background: #2b8db6;
  background: linear-gradient(to bottom, #2b8db6 0, #247598 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b8db6', endColorstr='#247598', GradientType=0);
}
.whp-gradient-status-e {
  background: #db3939;
  background: linear-gradient(to bottom, #db3939 0, #b63030 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#db3939', endColorstr='#b63030', GradientType=0);
}
.whp-status-container .whp-status-loader.whp-status-bar-SENT {
  border: 1px solid #838383;
  background: #989898;
  background: linear-gradient(to bottom, #989898 0, #7e7e7e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#989898', endColorstr='#7e7e7e', GradientType=0);
}
.whp-status-container .whp-status-loader.whp-status-bar-PENDING {
  border: 1px solid #c48122;
  background: #e29627;
  background: linear-gradient(to bottom, #e29627 0, #bd7d21 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e29627', endColorstr='#bd7d21', GradientType=0);
}
.whp-status-container .whp-status-loader.whp-status-bar-DELIVRD {
  border: 1px solid #3b962f;
  background: #44ad36;
  background: linear-gradient(to bottom, #44ad36 0, #39902d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44ad36', endColorstr='#39902d', GradientType=0);
}
.whp-status-container .whp-status-loader.whp-status-bar-READ {
  border: 1px solid #25789b;
  background: #2b8db6;
  background: linear-gradient(to bottom, #2b8db6 0, #247598 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b8db6', endColorstr='#247598', GradientType=0);
}
.whp-status-container .whp-status-loader.whp-status-bar-FAILED {
  border: 1px solid #bd3131;
  background: #db3939;
  background: linear-gradient(to bottom, #db3939 0, #b63030 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#db3939', endColorstr='#b63030', GradientType=0);
}
.whp-status-container .whp-status-loader.whp-status-bar-UNSELECTED {
  border: 1px solid #838383;
  background: #989898;
  background: linear-gradient(to bottom, #989898 0, #7e7e7e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#989898', endColorstr='#7e7e7e', GradientType=0);
}
.whp-status-container .whp-status-loader.whp-status-bar-NORESPONSE {
  border: 1px solid #bd3131;
  background: #db3939;
  background: linear-gradient(to bottom, #db3939 0, #b63030 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#db3939', endColorstr='#b63030', GradientType=0);
}
.whp-status-container .whp-status-loader.whp-status-bar-SELECTED_0 {
  border: 1px solid #25789b;
  background: #2b8db6;
  background: linear-gradient(to bottom, #2b8db6 0, #247598 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b8db6', endColorstr='#247598', GradientType=0);
}
/****************************************************************************************
	COMPANY LOGO / MESSAGING THEME SETTINGS
****************************************************************************************/
.whp-container .jscolorpicker,
.whp-admin-container .jscolorpicker {
  height: 38px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  box-sizing: content-box;
  padding-top: 50px;
  padding-bottom: 20px;
  border: 0;
}
.whp-branding-logo {
  width: 100%;
  background-color: #ffffff;
  padding: 20px;
  border: 1px dashed #cccccc;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
}
.whp-branding-logo:hover {
  background-color: #f5f5f5;
  border: 1px dashed #b1b1b1;
}
.whp-branding-logo img {
  max-width: 100%;
}
.whp-custom-css-styles {
  height: auto;
}
.whp-logo-container {
  position: relative;
}
.whp-logo-settings {
  position: absolute;
  top: 0px;
  width: 0px;
}
.whp-row .whp-logo-preview {
  margin-left: 377px;
}
.whp-preview-pane {
  border: 1px solid #d9d9d9;
  font-size: 14px;
}
.whp-preview-header {
  padding: 20px;
  border-bottom: 1px solid #d9d9d9;
}
.whp-preview-header img {
  display: block;
  max-height: 8ex;
  max-width: 100%;
}
.whp-preview-body {
  padding: 20px;
  color: #6e6e6e;
  border-bottom: 1px solid #d9d9d9;
}
.whp-preview-body h1 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
}
.whp-preview-body p {
  margin-bottom: 10px;
}
.whp-preview-body button {
  margin-top: 15px;
  padding: 12px 25px;
  border-radius: 8px;
  border: 0;
  color: #FFF;
  font-weight: bold;
}
.whp-preview-subtext {
  font-weight: bold;
  margin-bottom: 12px;
}
.whp-preview-footer {
  padding: 20px;
  font-size: 11px;
}
/****************************************************************************************
	CODE MIRROR THEME (MONOKAI)
****************************************************************************************/
.cm-s-monokai.CodeMirror {
  background: #272822;
  color: #f8f8f2;
}
.cm-s-monokai div.CodeMirror-selected {
  background: #49483E !important;
}
.cm-s-monokai .CodeMirror-gutters {
  background: #272822;
  border-right: 0px;
}
.cm-s-monokai .CodeMirror-guttermarker {
  color: white;
}
.cm-s-monokai .CodeMirror-guttermarker-subtle {
  color: #d0d0d0;
}
.cm-s-monokai .CodeMirror-linenumber {
  color: #d0d0d0;
}
.cm-s-monokai .CodeMirror-cursor {
  border-left: 1px solid #f8f8f0 !important;
}
.cm-s-monokai span.cm-comment {
  color: #75715e;
}
.cm-s-monokai span.cm-atom {
  color: #ae81ff;
}
.cm-s-monokai span.cm-number {
  color: #ae81ff;
}
.cm-s-monokai span.cm-property,
.cm-s-monokai span.cm-attribute {
  color: #a6e22e;
}
.cm-s-monokai span.cm-keyword {
  color: #f92672;
}
.cm-s-monokai span.cm-string {
  color: #e6db74;
}
.cm-s-monokai span.cm-variable {
  color: #a6e22e;
}
.cm-s-monokai span.cm-variable-2 {
  color: #9effff;
}
.cm-s-monokai span.cm-def {
  color: #fd971f;
}
.cm-s-monokai span.cm-bracket {
  color: #f8f8f2;
}
.cm-s-monokai span.cm-tag {
  color: #f92672;
}
.cm-s-monokai span.cm-link {
  color: #ae81ff;
}
.cm-s-monokai span.cm-error {
  background: #f92672;
  color: #f8f8f0;
}
.cm-s-monokai .CodeMirror-activeline-background {
  background: #373831 !important;
}
.cm-s-monokai .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}
.cm-s-monokai .CodeMirror-linenumber {
  min-width: 27px;
  padding-left: 0;
}
.cm-s-monokai.CodeMirror {
  height: 400px;
}
/****************************************************************************************
	TEMPLATE DESIGN STUDIO
****************************************************************************************/
html,
body {
  font-family: helvetica, arial, sans-serif;
}
.tds {
  overflow: hidden;
}
.tds html,
.tds body {
  word-wrap: break-word;
}
.tds .whp-header {
  box-shadow: 0 1px 5px 1px rgba(53, 87, 110, 0.4), transparent 0 0 0;
}
.tds h2 {
  font-size: 16px;
  margin-bottom: 15px;
}
.tds input[type="text"] {
  height: auto;
}
.tds .whp-inline-label-inputs input {
  margin-right: 5px;
}
.tds .whp-inline-label-inputs span {
  margin-right: 15px;
}
.tds .whp-black-overlay {
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 10;
  transition: opacity 0.3s ease;
}
.tds .whp-black-overlay.whp-on {
  opacity: 0.4;
}
.tds .whp-red-text {
  color: #e70000;
}
.whp-grey-boxed-title {
  position: relative;
  margin-left: -20px;
  margin-right: -20px;
  background-color: #efefef;
  padding: 12px 20px;
  border-top: 1px solid #d1d1cf;
  border-bottom: 1px solid #d1d1cf;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}
.whp-grey-boxed-accordion-trigger {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -18px;
  padding: 10px;
}
.whp-grey-boxed-accordion-box {
  width: 18px;
  height: 14px;
  background-color: #f7f7f7;
  border: 1px solid #d7d7d7;
  border-radius: 4px;
}
.whp-grey-boxed-accordion-box i {
  opacity: 0.5;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
  display: block;
  width: 10px;
  height: 10px;
  background: url(../img/tds-sprite.png) -175px 4px;
}
.whp-grey-boxed-accordion-trigger.whp-closed i {
  background-position: -175px -10px;
}
.whp-grey-boxed-accordion-trigger:hover i {
  opacity: 1;
}
.whp-accordion-container {
  overflow: hidden;
  box-sizing: border-box;
}
.whp-tds-tabs-container {
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.whp-tds-tabs {
  display: inline-block;
  margin-bottom: 20px;
  padding: 0;
  min-height: 30px;
}
.whp-tds-tab {
  cursor: pointer;
  position: relative;
  float: left;
  padding: 6px 13px;
  list-style-type: none;
  border: 1px solid #c0c0c0;
  border-right: 0;
  font-weight: bold;
  color: #8d8d8d;
  background-color: #efefef;
}
.whp-tds-tab:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.whp-tds-tab:last-child {
  border-right: 1px solid #c0c0c0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.whp-tds-tab.whp-active {
  color: #505050;
  background-color: #fff;
}
.whp-features-tab-container {
  width: 870px;
  margin: 0 auto;
}
.whp-folder-tabs {
  padding: 0;
  margin-bottom: -1px;
}
.whp-folder-tab {
  cursor: pointer;
  padding: 14px 20px;
  min-width: 65px;
  float: left;
  list-style-type: none;
  background-color: #efefef;
  border: 1px solid #c0c0c0;
  border-radius: 5px 5px 0 0;
  margin-right: -1px;
  text-align: center;
  color: #969696;
  font-weight: bold;
}
.whp-folder-tab.whp-active {
  background-color: #FFF;
  color: #313131;
  border-bottom: 1px solid #FFF;
}
.whp-folder-tab-content {
  min-height: 350px;
  border: 1px solid #c0c0c0;
  background-color: #FFF;
  padding: 50px 20px 20px;
}
.whp-code-tabs-container .CodeMirror {
  padding: 10px 0;
  text-align: left;
}
.whp-code-tabs-container .CodeMirror span {
  font-family: "Lucida Console", "Monaco", monospace;
}
.whp-code-tabs-container .CodeMirror-linenumber {
  color: #777;
}
.whp-code-tabs-container .whp-folder-tabs {
  margin-bottom: 0px;
}
.whp-code-tabs-container .whp-folder-tab-content {
  min-height: 0;
  background-color: #272822;
  padding: 0px;
  border: 0px;
}
.whp-code-tabs-container .whp-folder-tab {
  padding: 8px 20px;
  min-width: 0px;
  color: #FFF;
  background-color: #424242;
  border-color: #000;
  border-bottom: 0px;
}
.whp-code-tabs-container .whp-folder-tab.whp-active {
  background-color: #272822;
  border-bottom: 0;
}
.tds #fullscreenContent {
  overflow: hidden;
  position: relative;
}
.whp-tds-search-container {
  margin-bottom: 22px;
}
.whp-tds-search-icon {
  float: left;
  display: block;
  width: 15px;
  height: 15px;
  margin-top: 4px;
  margin-right: 7px;
  background-image: url(../img/tds-sprite.png);
}
.whp-tds-search {
  float: left;
  font-size: 16px;
  color: #b7b6b6;
  border: 0;
  background-color: transparent;
  box-shadow: none;
}
.whp-btn-dropdown {
  display: inline-block;
  position: relative;
}
.whp-btn-dropdown-primary-action-container {
  position: relative;
  padding-right: 35px;
}
.whp-btn-dropdown-primary-action {
  background-color: #efefef;
  border: 1px solid #c0c0c0;
  overflow: hidden;
  border-radius: 5px 0 0 5px;
  padding: 7px 22px;
}
.whp-btn-dropdown-primary-action:hover {
  background-color: #e0e0e0;
}
.whp-btn-dropdown-arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  height: 100%;
  border: 1px solid #c0c0c0;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background-color: #efefef;
  box-sizing: border-box;
}
.whp-btn-dropdown-arrow i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -2px;
  margin-left: -4px;
  width: 8px;
  height: 4px;
  background: url(../img/tds-sprite.png) -140px 0;
}
.whp-btn-dropdown-arrow:hover {
  background-color: #e0e0e0;
}
.whp-btn-dropdown-secondary-actions-container {
  position: absolute;
  overflow: hidden;
  top: 100%;
  left: 0px;
  width: 100%;
  margin-top: -1px;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
  box-sizing: border-box;
}
.whp-btn-dropdown-secondary-action {
  padding: 10px;
  color: #757575;
  background-color: #FFF;
}
.whp-btn-dropdown-secondary-action:hover {
  background-color: #e0e0e0;
}
.whp-lower-wrapper {
  position: relative;
}
.whp-tds-topbar {
  border-bottom: 1px solid #b5c9d6;
}
.whp-tds-topbar > div {
  float: left;
  height: 60px;
  box-sizing: border-box;
  text-shadow: 0 1px 0 #f2f5f7;
}
.whp-topbar-name-container {
  width: 30%;
  font-weight: bold;
  padding: 8px 0 0 20px;
}
.whp-topbar-template-name {
  color: #326481;
  font-size: 18px;
}
.whp-topbar-flow-name {
  color: #7c9cb0;
  font-size: 12px;
}
.whp-topbar-phase-container {
  width: 40%;
  border-bottom: 1px solid #ddd;
}
.whp-phase {
  position: relative;
  display: block;
  float: left;
  padding: 20px 0px;
  padding-right: 25px;
  font-weight: bold;
  color: #7c9cb0;
  font-size: 14px;
  cursor: pointer;
}
.whp-phase.whp-active {
  color: #35637f;
}
.whp-phase.whp-disabled {
  opacity: 0.5;
}
.whp-phase:last-child {
  padding-right: 0;
}
.whp-phase .whp-arrow {
  position: absolute;
  right: 10px;
  top: 26px;
  display: block;
  width: 5px;
  height: 8px;
  background: url(../img/tds-sprite.png) -120px 0 no-repeat;
}
.whp-prev-next-container {
  width: 30%;
  text-align: right;
  padding: 14px 20px 0 0;
}
.whp-prev-next-container button {
  position: relative;
}
.whp-prev-next-container button.whp-disabled {
  opacity: 0.5;
}
.whp-prev-next-container .whp-arrow {
  position: absolute;
  top: 8px;
  display: block;
  width: 5px;
  height: 8px;
}
.whp-btn.whp-prev {
  padding-left: 20px;
  margin-right: 5px;
}
.whp-btn.whp-prev i {
  left: 8px;
  background: url(../img/tds-sprite.png) -110px -10px no-repeat;
}
.whp-btn.whp-next {
  padding-right: 20px;
}
.whp-btn.whp-next i {
  right: 8px;
  background: url(../img/tds-sprite.png) -100px -10px no-repeat;
}
.whp-resize-bar {
  cursor: col-resize;
  position: absolute;
  top: 0px;
  width: 10px;
  height: 100%;
  z-index: 20;
}
.whp-resize-bar.left {
  left: 295px;
}
.whp-resize-bar.right {
  right: 345px;
}
.whp-tds-left-sidebar .whp-resize-bar {
  right: 0px;
}
.whp-tds-right-sidebar .whp-resize-bar {
  left: 0px;
}
.sidebar-container,
.whp-overbar-container {
  padding: 25px 20px 20px;
}
.sidebar-container .whp-sidebar-header,
.whp-overbar-container .whp-sidebar-header {
  margin-bottom: 20px;
  position: relative;
}
.sidebar-container .whp-sidebar-icon,
.whp-overbar-container .whp-sidebar-icon {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  background: url(../img/tds-sprite.png) no-repeat 0 -25px;
}
.sidebar-container h2,
.whp-overbar-container h2 {
  font-size: 16px;
  padding-top: 2px;
  padding-left: 35px;
  font-weight: normal;
  color: #8c8c8c;
  margin-bottom: 0;
}
.sidebar-container h3,
.whp-overbar-container h3 {
  color: #969696;
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 2px;
}
.sidebar-container p,
.whp-overbar-container p {
  color: #313131;
  margin-bottom: 25px;
}
.whp-preview-sidebar .whp-sidebar-icon {
  background-position: -150px -225px;
}
.whp-editor-sidebar .whp-sidebar-icon,
.whp-editor-social-sidebar .whp-sidebar-icon {
  background-position: -175px -225px;
}
.whp-save-overbar .whp-sidebar-icon {
  background-position: -150px -250px;
}
.whp-send-overbar .whp-sidebar-icon {
  background-position: -175px -250px;
}
.whp-editor-overbar h2 {
  padding-left: 30px;
}
.whp-editor-overbar .whp-sidebar-icon {
  background-size: 25px auto;
  background-position: 0 0;
  opacity: 0.3;
}
.whp-editor-overbar .whp-sidebar-icon[data-component="Spacer"] {
  background-image: url(../img/tds/icon-component/spacer.png);
}
.whp-editor-overbar .whp-sidebar-icon[data-component="Body Text"] {
  background-image: url(../img/tds/icon-component/body-text.png);
}
.whp-editor-overbar .whp-sidebar-icon[data-component="Rich Text"] {
  background-image: url(../img/tds/icon-component/rich-text.png);
}
.whp-editor-overbar .whp-sidebar-icon[data-component="Image"] {
  background-image: url(../img/tds/icon-component/image.png);
}
.whp-editor-overbar .whp-sidebar-icon[data-component="Image and Text"] {
  background-image: url(../img/tds/icon-component/image-and-body-text.png);
}
.whp-editor-overbar .whp-sidebar-icon[data-component="Map"] {
  background-image: url(../img/tds/icon-component/maps.png);
}
.whp-editor-overbar .whp-sidebar-icon[data-component="Video"] {
  background-image: url(../img/tds/icon-component/video.png);
}
.whp-editor-overbar .whp-sidebar-icon[data-component="Audio"] {
  background-image: url(../img/tds/icon-component/audio.png);
}
.whp-editor-overbar .whp-sidebar-icon[data-component="File"] {
  background-image: url(../img/tds/icon-component/file.png);
}
.whp-editor-overbar .whp-sidebar-icon[data-component="Survey"] {
  background-image: url(../img/tds/icon-component/survey.png);
}
.whp-editor-overbar .whp-sidebar-icon[data-component="Button"] {
  background-image: url(../img/tds/icon-component/button.png);
}
.whp-tds-left-sidebar {
  display: none;
  position: absolute;
  left: 0;
  background-color: #FFF;
  width: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
}
.whp-template-menu {
  border-radius: 4px;
  overflow: hidden;
  padding-left: 0;
  border: 1px solid #cbd7e0;
  border-bottom: 0;
}
.whp-template-menu-item {
  display: block;
  position: relative;
  cursor: pointer;
  list-style-type: none;
  padding: 15px 30px 15px 15px;
  border-bottom: 1px solid #ddd;
}
.whp-template-menu-item .whp-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -4px;
  display: block;
  width: 5px;
  height: 8px;
  background: url(../img/tds-sprite.png) -100px 0 no-repeat;
}
.whp-template-menu-item.whp-active {
  background-color: #edeeef;
  font-weight: bold;
}
.whp-template-menu-item.whp-active a {
  color: #000;
}
.whp-template-menu-item.whp-active .whp-arrow {
  background-position: -110px 0;
}
.whp-preview-sidebar select {
  display: block;
  width: 130px;
  margin-bottom: 10px;
}
.whp-preview-sidebar .whp-btn {
  width: 130px;
  font-size: 14px;
  margin-bottom: 25px;
}
.whp-tds-right-sidebar {
  display: none;
  position: absolute;
  right: 0;
  background-color: #FFF;
  width: 350px;
  overflow-x: visible;
  overflow-y: auto;
  border-left: 1px solid #ddd;
  box-sizing: border-box;
}
.whp-editor-sidebar {
  padding: 20px;
}
.whp-editor-sidebar .whp-sidebar-header,
.whp-editor-social-sidebar .whp-sidebar-header {
  display: inline-block;
}
.whp-components-wrap {
  height: 100%;
  margin-top: 10px;
}
#feeditems .whp-components-wrap {
  font-size: 14px;
  padding: 20px;
}
#feeditems .whp-grey-boxed-title {
  font-size: 14px;
}
#fancybox-title-inside {
  padding-left: 12px;
}
.whp-component {
  text-align: left;
  margin-bottom: 10px;
  cursor: all-scroll;
  overflow: hidden;
}
.whp-component:hover .whp-component-hover-links {
  opacity: 1;
}
.whp-component-title {
  font-weight: bold;
  color: #000;
}
.whp-component-desc {
  color: #8d8d8d;
  margin-bottom: 4px;
}
.whp-component-hover-links {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.whp-component-hover-links a {
  margin-right: 4px;
}
.whp-component-thumb {
  float: left;
  margin-right: 10px;
  width: 60px;
  height: 60px;
  padding: 6px;
  background-color: #f3f3f3;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  box-sizing: border-box;
}
.whp-component-thumb:hover {
  background-color: #ebebeb;
}
.whp-component-thumb:hover img,
.whp-component-thumb:hover svg {
  opacity: 0.7;
}
.whp-component-thumb img,
.whp-component-thumb svg {
  width: 100%;
  opacity: 0.5;
}
.whp-component-thumb-layout {
  width: 100%;
  height: auto;
  padding: 10px;
}
.whp-attributes {
  text-align: left;
}
.whp-attributes input,
.whp-attributes textarea,
.whp-attributes select {
  width: 100%;
  box-sizing: border-box;
}
.whp-attributes-wrap {
  padding: 20px 0;
}
/*.whp-clone-block-first{
	border-bottom: 1px solid rgb(0,0,255);
	background-color: rgba(0,0,255,0.5);
}
.whp-clone-block-up{
	border-bottom: 1px solid rgb(0,191,32);
	background-color: rgba(0,191,32,0.5);
}
.whp-clone-block-down{
	border-bottom: 1px solid rgb(255,0,0);
	background-color: rgba(255,0,0,0.5);
}   */
.whp-element-container {
  padding: 20px 0;
}
.whp-element.whp-body-text .whp-element-container {
  padding: 0;
}
.whp-element.whp-body-text .whp-accordion-container {
  margin: 0 -20px;
}
.whp-mobile-content {
  /* position: absolute;
	left: 14px;
	top: 25px; */
  width: 320px;
  height: 480px;
  border: 1px solid #ccc;
}
.whp-landscape .whp-mobile-content {
  position: absolute;
  left: -80px;
  top: 80px;
  width: 480px;
  height: 320px;
  transform: rotate(-90deg);
}
.whp-mobile-frame.whp-landscape {
  transform: rotate(90deg);
  margin-top: -80px;
}
.whp-landscape .whp-sms-body {
  height: 270px;
}
.whp-landscape + .whp-btn-rotate {
  margin-top: -120px;
  display: block;
}
.whp-landscape #smsTemplateReviewMobileIFrame {
  width: 420px;
}
.whp-sms-text {
  line-height: 1.5;
}
.whp-tds-right-overbar {
  position: absolute;
  right: 0;
  background-color: #FFF;
  width: 350px;
  border-left: 1px solid #ddd;
  transform: translate3d(2500px, 0, 0);
  transition: transform 0.3s ease;
  box-sizing: border-box;
}
.whp-tds-right-overbar.open {
  transform: translate3d(0, 0, 0);
}
.whp-overbar-container {
  padding: 0;
  height: 100%;
}
.whp-overbar-scroll-container {
  padding: 20px;
  height: 100%;
  overflow-x: visible;
  overflow-y: auto;
  box-sizing: border-box;
}
.whp-editor-overbar {
  position: relative;
}
.whp-editor-overbar .whp-sidebar-header {
  display: inline-block;
  position: relative;
}
.whp-content-editor textarea {
  width: 100%;
  height: 100px;
}
.whp-content-item {
  text-align: left;
}
.whp-white-square-button-container {
  border-radius: 7px;
  border: 1px solid #d1d1cf;
  margin-bottom: 25px;
  display: inline-block;
}
.whp-white-square-button {
  float: left;
  width: 116px;
  height: 97px;
  border-right: 1px solid #d1d1cf;
  text-align: center;
}
.whp-white-square-button:last-child {
  border: 0;
}
.whp-white-square-icon {
  margin: 0 auto;
  display: block;
}
.whp-white-square-button-text {
  font-size: 14px;
  color: #313131;
}
.whp-white-square-browse i {
  width: 43px;
  height: 37px;
  background: url(../img/tds-sprite.png) 0px -50px no-repeat;
  margin-top: 18px;
  margin-bottom: 10px;
}
.whp-white-square-upload i {
  width: 34px;
  height: 35px;
  background: url(../img/tds-sprite.png) -50px -50px no-repeat;
  margin-top: 19px;
  margin-bottom: 11px;
}
.whp-resource-left-col {
  float: left;
  width: 25%;
  margin-right: 5%;
}
.whp-resource-right-col {
  float: left;
  width: 70%;
  text-align: left;
}
.whp-resource-details {
  padding-bottom: 20px;
  border-bottom: 1px solid #d1d1cf;
  margin-bottom: 20px;
}
.whp-resource-thumb {
  width: 100%;
  border: 1px solid #d0d0d0;
  background-color: #f1f1f1;
}
.whp-resource-filename {
  margin-bottom: 15px;
  word-break: break-word;
}
.whp-resource-attributes {
  padding-bottom: 20px;
}
.whp-resource-attributes input,
.whp-resource-attributes textarea,
.whp-resource-attributes select {
  width: 100%;
  box-sizing: border-box;
}
.whp-resource-attributes [type="checkbox"] {
  margin-top: 0;
  margin-right: 5px;
}
.whp-form-element {
  margin-bottom: 15px;
  box-sizing: border-box;
  float: left;
  width: 100%;
}
.whp-form-element label {
  margin-bottom: 4px;
}
.whp-version-text {
  font-weight: bold;
}
.whp-form-indent {
  float: left;
  padding-left: 22px;
}
.whp-inline-checkbox-and-select input[type="checkbox"] {
  float: left;
  margin-top: 6px;
  margin-right: 5px;
}
.whp-inline-checkbox-and-select label {
  float: left;
  margin-top: 6px;
  margin-right: 5px;
}
.whp-inline-checkbox-and-select select {
  float: left;
  margin-right: 5px;
}
.whp-form-element.whp-half {
  width: 48%;
  margin-right: 3.95%;
}
.whp-form-element.whp-last {
  margin-right: 0;
}
.whp-resource-attribute-align {
  float: left;
  width: 100px;
  margin-right: 20px;
}
.whp-resource-attribute-width {
  float: left;
  width: 50px;
}
.whp-resource-attribute-lock {
  float: left;
  margin: 23px 0 0;
  padding: 5px;
  width: 23px;
}
.whp-resource-attribute-lock i {
  display: block;
  width: 13px;
  height: 10px;
  background: url(../img/tds-sprite.png) -100px -50px;
}
.whp-resource-attribute-lock i.whp-unlocked {
  background: url(../img/tds-sprite.png) -115px -50px;
}
.whp-resource-attribute-height {
  float: left;
  width: 50px;
}
.whp-resource-attribute-link {
  clear: left;
  text-align: left;
}
.whp-done-bar {
  position: absolute;
  left: 0;
  bottom: 0px;
  z-index: 11;
}
.whp-bottom-bar {
  height: 67px;
  width: 100%;
  padding: 20px 0 0 20px;
  text-align: left;
  background-color: #ddd;
  box-sizing: border-box;
  background-image: url("../img/bckBody.png");
  border-top: 1px solid #b5c9d6;
}
.whp-btn-done {
  margin-right: 20px;
}
.whp-btn-save {
  margin-right: 20px;
}
.whp-btn.whp-save,
.whp-btn.whp-save-as-save,
.whp-btn.whp-done {
  margin-right: 5px;
}
.whp-send-to-btn {
  display: block;
}
[data-tab-item="code"] .whp-form-actions {
  text-align: left;
}
.whp-save-as-component-panel,
.whp-save-as-template-panel {
  position: absolute;
  bottom: 0;
  left: 0px;
  background-color: #fff;
  border-radius: 5px 5px 0 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 50;
}
.whp-save-as-component-panel .whp-save-as-panel-wrap,
.whp-save-as-template-panel .whp-save-as-panel-wrap {
  padding: 20px;
}
.whp-save-as-component-panel .whp-component-details,
.whp-save-as-template-panel .whp-component-details {
  position: relative;
  margin-bottom: 20px;
}
.whp-save-as-component-panel .whp-name,
.whp-save-as-template-panel .whp-name {
  margin-bottom: 10px;
}
.whp-save-as-component-panel input,
.whp-save-as-template-panel input,
.whp-save-as-component-panel select,
.whp-save-as-template-panel select,
.whp-save-as-component-panel textarea,
.whp-save-as-template-panel textarea {
  width: 100%;
  box-sizing: border-box;
}
.whp-save-as-thumbs label {
  margin-bottom: 9px;
}
.whp-save-as-thumb {
  float: left;
  display: block;
  margin: 0 7px 7px 0;
  border-radius: 5px;
  padding: 3px;
  width: 42px;
  height: 42px;
  background-color: #f3f3f3;
  border: 1px solid #d0d0d0;
  box-sizing: border-box;
}
.whp-save-as-thumb img {
  width: 100%;
  opacity: 0.3;
}
.whp-save-as-thumb.whp-selected {
  border: 1px solid #a7a7a7;
  background-color: #e8e8e8;
  transform: scale(1.2);
}
.whp-save-as-thumb.whp-selected img {
  opacity: 1;
}
.whp-save-as-thumb:hover {
  background-color: #ebebeb;
}
.whp-save-overbar input,
.whp-send-overbar input,
.whp-save-overbar select,
.whp-send-overbar select,
.whp-save-overbar textarea,
.whp-send-overbar textarea {
  width: 100%;
  box-sizing: border-box;
}
.whp-tds-main {
  width: auto;
  margin-left: 300px;
  background-color: #efefef;
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.whp-template-listing-container {
  padding: 23px 35px 35px;
}
.whp-template {
  float: left;
  width: 18%;
  margin-right: 2.49%;
  margin-bottom: 2.5%;
}
.whp-template:nth-child(5) {
  margin-right: 0;
}
.whp-template-thumb-container {
  position: relative;
  line-height: 0;
  box-sizing: border-box;
  border: 1px solid #c9d4dc;
  overflow: hidden;
}
.whp-template-rollover {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  line-height: 1.5;
  color: #FFF;
  text-align: center;
}
.whp-template-rollover .whp-btn-wrap {
  width: 85px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -39px;
  margin-left: -42px;
}
.whp-template-rollover .whp-edit,
.whp-template-rollover .whp-use,
.whp-template-rollover .whp-preview {
  display: block;
  font-size: 14px;
  padding-top: 7px;
  padding-bottom: 7px;
  width: 85px;
}
.whp-template-rollover .whp-edit,
.whp-template-rollover .whp-use {
  margin-bottom: 10px;
}
.whp-template-name {
  position: relative;
  border: 1px solid #c9d4dc;
  border-top: 0;
  padding: 15px 40px 15px 15px;
  box-sizing: border-box;
  background-color: #FFF;
}
.whp-template-version {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #3087c4;
  font-weight: bold;
  text-decoration: underline;
}
.whp-template-version:hover {
  text-decoration: underline;
}
.whp-new-template .whp-template-thumb-container {
  background-color: #FFF;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #c9d4dc;
  /*box-shadow: inset 0 0 10px rgba(0,0,0,0.1);*/
}
.whp-new-template .whp-template-add {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -17px;
  margin-top: -17px;
  background-image: url(../img/tds-sprite.png);
  background-position: -25px 0;
  width: 34px;
  height: 34px;
}
.whp-new-template .whp-template-add.whp-white {
  background-position: -60px 0;
}
.whp-new-template .whp-template-thumbnail-spacer {
  position: relative;
  width: 100%;
  margin-bottom: 47px;
}
.whp-new-template .whp-template-new-content {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}
.whp-template-thumb-container:hover .whp-template-rollover {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.whp-template-thumb {
  width: 100%;
}
.whp-template-editor-container {
  text-align: center;
  position: relative;
}
.whp-template-editor-container .whp-tds-tabs {
  position: absolute;
  top: 20px;
  left: 0%;
  z-index: 1;
}
.whp-template-editor-container .whp-tds-tabs {
  width: 100%;
}
.whp-template-editor-container .whp-tds-tab {
  position: relative;
  float: none;
  padding-left: 36px;
  padding-right: 18px;
  display: inline-block;
  margin-right: -4px;
}
.whp-template-editor-container .whp-tds-tab.whp-unlinkable {
  padding-right: 37px;
}
.whp-template-editor-container .whp-tds-tab[data-tab='sms'] {
  border-radius: 5px 0 0 5px;
}
.whp-checkbox {
  position: absolute;
  top: 0px;
  left: 10px;
  padding: 7px 0 7px 7px;
}
.whp-checkbox i {
  display: block;
  width: 13px;
  height: 13px;
  background: url(../img/tds-sprite.png) -40px -38px no-repeat;
}
.whp-checkbox.whp-checked i {
  background: url(../img/tds-sprite.png) -25px -38px no-repeat;
}
.whp-btn-open-unlink-panel {
  position: absolute;
  top: 2px;
  right: 7px;
  vertical-align: middle;
  background: none;
  border: 0;
  padding: 10px;
  margin: 0;
}
.whp-btn-open-unlink-panel i {
  display: block;
  background: url(../img/tds-sprite.png) -140px 0 no-repeat;
  width: 9px;
  height: 4px;
}
.whp-unlink-panel {
  overflow: hidden;
  position: absolute;
  top: 28px;
  left: 0px;
  left: 50%;
  margin-left: -102px;
  width: 200px;
}
.whp-unlink-panel > div {
  display: inline-block;
  margin-right: -4px;
  background-color: #FFF;
  padding: 6px 13px;
  border: 1px solid #c0c0c0;
}
.whp-unlink-panel .whp-left {
  position: relative;
  border-radius: 5px 0 0 5px;
  padding-right: 20px;
}
.whp-unlink-panel .whp-right {
  padding-left: 20px;
  border-radius: 0 5px 5px 0;
}
.whp-btn-unlink {
  position: absolute;
  top: 5px;
  right: -10px;
  padding: 4px 4px;
  border-radius: 5px;
  background-color: #686868;
}
.whp-btn-unlink i {
  display: block;
  width: 12px;
  height: 11px;
  background: url(../img/tds-sprite.png) -75px -42px no-repeat;
}
.whp-iframe-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}
.whp-section {
  margin: 0 auto;
  box-sizing: border-box;
}
.whp-iframe-bg-wrap.active {
  background-color: #eee;
}
.whp-iframe-container {
  margin: 0 auto;
  position: relative;
  line-height: 0;
}
.whp-template-editor-container iframe {
  display: block;
  margin: 0 auto;
}
.whp-mobile-editor-iframe {
  width: 320px;
  height: 480px;
}
.whp-web-editor-iframe {
  width: 100%;
  height: 800px;
}
#smsTemplateReviewMobileIFrame {
  width: 260px;
}
.whp-clone-container {
  position: absolute;
  top: 90px;
  left: 0px;
  width: 100%;
}
.whp-clone-block {
  box-sizing: border-box;
}
.whp-clone-block.whp-bottompadding {
  padding-bottom: 40px;
  box-sizing: content-box;
}
.whp-clone-block-first {
  height: 36px;
  box-sizing: border-box;
}
.whp-mobile {
  padding-top: 90px;
}
.whp-mobile .whp-iframe-container {
  width: 320px;
  position: relative;
}
.whp-long-sms {
  position: absolute;
  top: 50px;
  left: -100px;
}
.whp-short-sms {
  position: absolute;
  top: 100px;
  left: -100px;
}
.whp-template-features-container {
  padding: 30px 0 50px;
}
.whp-template-features-container [type="checkbox"] {
  margin-right: 7px;
}
.whp-feature-icon {
  float: left;
  width: 65px;
}
.whp-feature-icon i {
  display: block;
  width: 50px;
  height: 70px;
  background-image: url(../img/tds-sprite.png);
}
.whp-message-alerts-icon {
  background-position: -100px -150px;
}
.whp-message-escalation-icon {
  background-position: -150px -150px;
}
.whp-message-retries-icon {
  background-position: -50px -225px;
}
.whp-message-push-icon {
  background-position: 0px -300px;
}
.whp-message-no-reply-icon {
  background-position: -100px -225px;
}
.whp-message-alias-icon {
  background-position: -100px -75px;
}
.whp-message-delivery-receipts-icon {
  background-position: -50px -300px;
}
.whp-message-secure-message-icon {
  background-position: 0px -150px;
}
.whp-message-expiry-icon {
  background-position: -150px -75px;
}
.whp-message-delivery-report-icon {
  background-position: -50px -150px;
}
.whp-feature-icon i.whp-message-response-rules-icon {
  display: block;
  width: 40px;
  height: 55px;
  background-image: url(../img/graphs-icon.png);
}
.whp-response-rule-details {
  border: 1px solid #CCC;
}
.whp-response-rule-details th {
  padding: 5px 0 5px 10px;
  border-bottom: 1px solid #cccccc;
  text-align: left;
}
.whp-response-rule-details th:first-of-type {
  border-right: 1px solid #cccccc;
}
.whp-feature-content-wrap {
  float: left;
  width: 763px;
}
.whp-feature-row {
  padding-bottom: 40px;
}
.whp-feature-row-title {
  position: relative;
  margin-top: 6px;
  height: 16px;
  border-top: 1px solid #c0c0c0;
}
.whp-feature-row-title-text {
  position: absolute;
  top: -10px;
  left: 0px;
  padding-right: 12px;
  background-color: #FFF;
  font-size: 14px;
  color: #313131;
}
.whp-feature-row-desc {
  float: left;
  color: #969696;
  width: 180px;
  padding-right: 50px;
}
.whp-feature-row-forms {
  float: left;
  width: 530px;
}
.whp-alias-details {
  border: 1px solid #CCC;
}
.whp-alias-details i {
  background-color: #CCC;
  background: url(../img/alias-icons.png) 0 50% no-repeat;
  padding-right: 3px;
}
.whp-alias-details img {
  vertical-align: text-bottom;
}
.whp-alias-details td {
  padding: 6px 8px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
.whp-alias-channel {
  min-width: 60px;
  font-weight: bold;
}
.whp-alias-email i {
  background-position: -20px 1px;
}
.whp-alias-voice i {
  background-position: -40px 1px;
}
.whp-unsubscribe-icon {
  background-image: url(../img/mail-unsubscribe.svg) !important;
  background-repeat: no-repeat;
}
.whp-unsubscribe-check {
  margin-bottom: 5px;
}
.whp-unsubscribe-url input {
  width: 200px;
}
.whp-unsubscribe-label-and-icon {
  display: flex;
  align-items: center;
}
.whp-unsubscribe-label-and-icon i {
  margin-left: 5px;
}
i.whp-unsubscribe-info-icon {
  background-image: url(../img/mainSprite.png);
  background-position: -40px -0px;
  width: 5%;
  height: 15px;
}
.whp-unsubscribe-info {
  display: flex;
  color: #3087c4;
  border: double;
  padding: 5px;
  width: 90%;
}
.whp-unsubscribe-info div {
  margin-left: 10px;
}
.whp-unsubscribe-api input {
  width: 185px;
}

/* WhatsApp Tab New Rich Template Screen */
.whp-whatsapp-template {
  padding-top: 90px;
  max-width: 600px;
  margin: 0px auto;
  font-family: helvetica, arial, sans-serif;
  text-align: left;
}

.whp-whatsapp-template h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.whp-whatsapp-component-body textarea {
  height: 80px;
}

.whp-whatsapp-component-body textarea[readonly] {
  background-color: #f0f0f0;
}

.whp-whatsapp-template textarea {
  width: 100%;
}

.whp-whatsapp-parameters-table {
    margin-top: 10px;
}

.whp-whatsapp-parameters {
  table-layout: auto;
  color: inherit;
}

.whp-whatsapp-parameters th:first-child {
  width: 120px;
}

.whp-whatsapp-parameters td {
  background-color: transparent;
  padding: 5px 0;
  vertical-align: middle;
}

.whp-whatsapp-param {
  text-align: center !important;
}

.whp-whatsapp-value input[readonly] {
  background-color: #f0f0f0;
}

/* WhatsApp Tab New Message Screen */
.whp-whatsapp-tab-body {
  padding-top: inherit !important;
  max-width: inherit !important;
}

.whp-message-expiry-check {
  margin-bottom: 5px;
}
.whp-message-expiry-time input {
  width: 40px;
}
.whp-template-review-container {
  position: relative;
  text-align: center;
  padding-top: 25px;
}
.whp-template-review-container .whp-tds-tabs {
  margin-bottom: 10px;
}
.whp-template-review-container .whp-tds-tabs-container {
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.whp-preview-name {
  font-size: 14px;
  margin-bottom: 15px;
  color: #b7b6b6;
}
.whp-desktop-preview {
  margin-right: 20px;
}
.whp-desktop-frame {
  width: 650px;
  background-color: #FFF;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  margin-bottom: 50px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}
.whp-desktop-frame iframe {
  width: 100%;
  height: 615px;
}
.whp-mobile-frame {
  position: relative;
  width: 340px;
  height: 590px;
  background-color: #FFF;
  box-sizing: border-box;
  padding: 40px 8px 50px;
  border: 1px solid #d7d7d7;
  border-radius: 20px;
  margin: 0 auto;
  margin-bottom: 20px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.whp-mobile-frame .whp-element {
  float: left;
  background-color: #dfdfdf;
  border-radius: 50px;
}
.whp-mobile-frame-top-elements {
  position: absolute;
  top: 15px;
  left: 50%;
  margin-left: -30px;
  width: 60px;
  height: 10px;
}
.whp-mobile-frame-top-elements .whp-circle {
  width: 10px;
  height: 10px;
}
.whp-mobile-frame-top-elements .whp-rounded-rec {
  width: 44px;
  margin-left: 6px;
  height: 10px;
}
.whp-mobile-frame-bottom-elements {
  position: absolute;
  top: 534px;
  left: 50%;
  margin-left: -20px;
}
.whp-mobile-frame-bottom-elements .whp-circle {
  width: 40px;
  height: 40px;
}
.whp-btn-rotate {
  font-size: 14px;
  padding-bottom: 30px;
}
.whp-mobile-preview {
  width: 360px;
}
.whp-thumbnail-preview {
  width: 300px;
}
.whp-sender-name {
  font-size: 16px;
  font-weight: bold;
  color: #656565;
  padding-top: 12px;
  height: 50px;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}
.whp-sms-body {
  position: relative;
  height: 430px;
  padding: 15px;
  padding-bottom: 0;
  box-sizing: border-box;
}
.whp-speech-bubble {
  position: relative;
  text-align: left;
  background-color: #efefef;
  border: 1px solid #afafaf;
  padding: 15px;
  border-radius: 5px;
  color: #000;
  font-size: 14px;
  box-sizing: border-box;
}
.whp-speech-bubble:after,
.whp-speech-bubble:before {
  top: 100%;
  left: 10%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.whp-speech-bubble:after {
  border-color: rgba(239, 239, 239, 0);
  border-top-color: #efefef;
  border-width: 8px;
  margin-left: -8px;
}
.whp-speech-bubble:before {
  border-color: rgba(201, 201, 201, 0);
  border-top-color: #afafaf;
  border-width: 9px;
  margin-left: -9px;
}
.whp-speech-bubble-link {
  color: #0070bc;
}
.whp-sms-text-input {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 290px;
  border: 1px solid #b1b1b1;
  text-align: left;
  padding: 9px 6px;
  box-sizing: border-box;
  color: #898989;
}
.whp-tds-left-sidebar-open .whp-tds-left-sidebar {
  display: block;
}
.whp-tds-left-sidebar-open .whp-tds-right-sidebar {
  display: none;
}
.whp-tds-left-sidebar-open .whp-tds-main {
  margin-right: 0 !important;
  margin-left: 300px;
}
.whp-tds-left-sidebar-open .whp-resize-bar.right {
  display: none;
}
.whp-tds-right-sidebar-open .whp-tds-right-sidebar {
  display: block;
}
.whp-tds-right-sidebar-open .whp-tds-left-sidebar {
  display: none;
}
.whp-tds-right-sidebar-open .whp-tds-main {
  margin-left: 0 !important;
  margin-right: 350px;
}
.whp-tds-right-sidebar-open .whp-resize-bar.left {
  display: none;
}
.whp-tds-no-sidebars .whp-tds-right-sidebar {
  display: none;
}
.whp-tds-no-sidebars .whp-tds-left-sidebar {
  display: none;
}
.whp-tds-no-sidebars .whp-tds-right-overbar {
  display: none;
}
.whp-tds-no-sidebars .whp-tds-main {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.whp-tds-no-sidebars .whp-resize-bar.left,
.whp-tds-no-sidebars .whp-resize-bar.right {
  display: none;
}
.whp-tds-lightbox.whp-black-overlay {
  z-index: 5001;
  background-color: rgba(0, 0, 0, 0.4);
}
.whp-tds-lightbox.whp-black-overlay.whp-on {
  opacity: 1;
}
.whp-white-content-box {
  background-color: #FFF;
  border-radius: 7px;
  margin: 0 25px;
  margin-top: 70px;
  height: 500px;
}
.whp-white-content-box.whp-tds-medium-lightbox {
  width: 540px;
  margin: 0 auto;
  margin-top: 70px;
}
.whp-white-content-box.whp-height-auto {
  height: auto;
}
.whp-tds-lightbox-header {
  border-bottom: 1px solid #cccccc;
  padding: 12px 20px;
  position: relative;
}
.whp-tds-lightbox-title {
  color: #313131;
  font-size: 18px;
  font-weight: bold;
}
.whp-tds-lightbox-close {
  cursor: pointer;
  position: absolute;
  width: 12px;
  height: 12px;
  right: 19px;
  top: 19px;
  background: url(../img/tds-sprite.png) -150px 0;
  opacity: 0.7;
}
.whp-tds-lightbox-close:hover {
  opacity: 1;
}
.whp-height-auto .whp-white-content-box {
  height: auto;
}
.whp-tds-lightbox-body {
  padding: 20px;
  padding-bottom: 60px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.whp-lb-resource {
  display: inline-block;
  vertical-align: top;
  margin-right: 15px;
  margin-bottom: 20px;
  width: 152px;
}
.whp-lb-resource-img-wrap {
  width: 150px;
  height: 100px;
  overflow: hidden;
  background-color: #f1f1f1;
  margin-bottom: 4px;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid #d0d0d0;
}
.whp-lb-resource-img-wrap.whp-spreadsheet {
  background: url(../img/resource-library-spreadsheet.png) #f1f1f1;
}
.whp-lb-resource-img-wrap.whp-pdf {
  background: url(../img/resource-library-pdf.png) #f1f1f1;
}
.whp-lb-resource-img-wrap.whp-textdoc {
  background: url(../img/resource-library-textdoc.png) #f1f1f1;
}
.whp-lb-resource-img-wrap.whp-noimage {
  background: url(../img/resource-library-noimage.png) #f1f1f1;
}
.whp-lb-resource-filename {
  margin-bottom: 15px;
  word-wrap: break-word;
}
.whp-upload-image #whp-fileupload-dropzone {
  border: 1px dashed #969696;
  background-color: #FFF;
  height: auto;
}
.whp-upload-image .whp-fileupload-icon-image {
  background: url(../img/tds-sprite.png) 0 -90px;
  width: 56px;
  height: 58px;
}
.whp-upload-image #dropzone_text {
  color: #313131;
  font-weight: bold;
}
.whp-table-label-c td {
  background-color: #fff8da;
}
.whp-new-template-segment {
  line-height: 1;
  display: table;
  width: 101%;
  height: 50%;
  color: #1a9edc;
  transition: all 0.3s ease;
  cursor: pointer;
  box-sizing: border-box;
  border-collapse: collapse;
}
.whp-new-template-segment:hover {
  background-color: #1a9edc;
  color: #ffffff;
}
.whp-new-template-segment:hover .whp-icon-template-thumb {
  transform: scale(1.1, 1.1);
}
.whp-new-template-segment:hover .whp-icon-template-thumb path,
.whp-new-template-segment:hover .whp-icon-template-thumb polygon {
  fill: #ffffff;
}
.whp-new-template-library,
.whp-back-template-library {
  border-bottom: 1px solid #c9d4dc;
}
.whp-new-template-icon,
.whp-new-template-text {
  display: table-cell;
  vertical-align: middle;
}
.whp-new-template-icon {
  width: 40%;
  position: relative;
}
.whp-new-template-icon-canvas {
  display: none;
}
_:-ms-fullscreen,
:root .whp-new-template-icon-canvas {
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.whp-new-template-text {
  padding-right: 10px;
  text-align: left;
  font-weight: bold;
  font-size: 110%;
}
.whp-icon-template-thumb {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  padding: 10px 20px 10px 20px;
}
.whp-icon-template-thumb path,
.whp-icon-template-thumb polygon {
  fill: #1a9edc;
  transition: all 0.2s ease;
}
.whp-template-thumbnail-upload {
  background-color: #f2f2f2;
  padding: 10px;
  max-width: 340px;
}
.whp-template-thumbnail-upload .replace {
  text-decoration: underline;
}
.whp-template-thumbnail-image {
  margin-bottom: 10px;
  border: 1px solid #d8e2e7;
  width: 100%;
  height: auto;
  background-size: cover;
  background-repeat: no-repeat;
}
.whp-template-thumbnail {
  width: 100%;
  height: auto;
  background-size: cover;
  background-repeat: no-repeat;
}
.whp-tds-topbard-center-title {
  display: table;
  float: none !important;
  text-align: center;
  width: 100%;
}
.whp-tds-topbard-center-title .whp-topbar-template-name {
  display: table-cell;
  vertical-align: middle;
  font-size: 20px;
  font-weight: bold;
}
.whp-editor-voice-sidebar .whp-form-element {
  position: relative;
  display: table;
}
.whp-editor-voice-sidebar .whp-form-element .line {
  border-left: 2px dotted #cdced0;
  position: absolute;
  width: 2px;
  height: 100%;
  left: 15px;
  top: 34px;
}
.whp-editor-voice-sidebar .whp-form-element div {
  display: table-cell;
  vertical-align: top;
  width: 90%;
}
.whp-editor-voice-sidebar h2 {
  padding: 0;
  color: #5d6e8b;
}
.whp-editor-voice-sidebar h3 {
  color: #1a9edc;
}
.whp-editor-voice-sidebar p {
  margin-bottom: 20px;
}
.whp-editor-voice-sidebar img {
  display: table-cell;
  margin-right: 20px;
  background: white;
}
.whp-newstyle-wrapper .whp-editor-sidebar {
  padding: 20px;
}
.whp-newstyle-wrapper .whp-editor-sidebar .whp-sidebar-header,
.whp-editor-social-sidebar .whp-sidebar-header {
  display: inline-block;
}
.whp-newstyle-wrapper .whp-tds-tabs {
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  margin-left: -20px;
  margin-right: -20px;
}
.whp-newstyle-wrapper .whp-tds-tab {
  cursor: pointer;
  position: relative;
  float: left;
  padding: 20px 13px;
  border-radius: 0;
  border: none;
  border-bottom: 3px solid #d4d4d4;
  color: #8d8d8d;
  font-weight: normal;
  font-size: 17px;
  width: 50%;
}
.whp-newstyle-wrapper .sidebar-container h2 {
  color: #326481;
  font-size: 20px;
  font-weight: bold;
  padding: 15px;
}
.whp-newstyle-wrapper .whp-active {
  border-bottom: 3px solid #f9c83e;
  color: #3b3838;
}
.whp-newstyle-wrapper .whp-grey-boxed-title {
  position: relative;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 2px;
  background-color: #f7f7f7;
  padding: 18px 20px;
  border-top: none;
  border-bottom: none;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  color: #000;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}
.whp-newstyle-wrapper .whp-grey-boxed-accordion-trigger {
  cursor: pointer;
  position: absolute;
  right: 25px;
  top: 50%;
  margin-top: -18px;
  padding: 10px;
}
.whp-newstyle-wrapper .whp-grey-boxed-accordion-box {
  width: 18px;
  height: 14px;
  background-color: transparent;
  border: none;
  border-radius: none;
}
.whp-newstyle-wrapper .whp-grey-boxed-accordion-box i {
  opacity: 0.5;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
  display: block;
  width: 15px;
  height: 15px;
  background: url(../img/tds-sprite.png) -172px -25px;
}
.whp-newstyle-wrapper .whp-grey-boxed-accordion-trigger.whp-closed i {
  background-position: -172px -40px;
}
.whp-newstyle-wrapper .whp-grey-boxed-accordion-trigger:hover i {
  opacity: 1;
}
.whp-newstyle-wrapper .whp-accordion-container {
  overflow: hidden;
  box-sizing: border-box;
}
.whp-newstyle-wrapper .whp-component {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  text-align: left;
  padding: 9px 5px 9px 0;
  margin: 0;
  cursor: all-scroll;
  overflow: hidden;
  border-bottom: 1px solid #edecec;
}
.whp-newstyle-wrapper .whp-component:last-child {
  border-bottom: none;
}
.whp-newstyle-wrapper .whp-component-thumb {
  margin-right: 10px;
  padding: 0;
  background-color: #fff;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
}
.whp-newstyle-wrapper .whp-component-thumb:hover {
  background-color: #ebebeb;
}
.whp-newstyle-wrapper .whp-component-thumb:hover img,
.whp-newstyle-wrapper .whp-component-thumb:hover svg {
  opacity: 0.7;
}
.whp-newstyle-wrapper .whp-component-thumb img,
.whp-newstyle-wrapper .whp-component-thumb svg {
  width: 60px;
  height: 60px;
  opacity: 0.5;
}
.whp-newstyle-wrapper .whp-component-title-wrap {
  padding: 0 7px;
  -ms-flex-positive: 2;
      flex-grow: 2;
}
.whp-newstyle-wrapper .whp-component-title {
  font-weight: bold;
  color: #3c3c3c;
  font-size: 16px;
  padding: 3px 12px 4px 0;
}
.whp-newstyle-wrapper .whp-component-description {
  color: #bebebe;
  font-size: 13px;
  line-height: 1.35;
}
.whp-newstyle-wrapper .whp-component-addicon {
  margin: auto 0;
}
.whp-newstyle-wrapper .whp-component-addicon i {
  opacity: 1;
  display: block;
  width: 26px;
  height: 25px;
  background: url(../img/tds-sprite.png) -209px -199px;
  background-size: 120px;
}
.whp-newstyle-wrapper .whp-component-addicon i:hover {
  background: url(../img/tds-sprite.png) -209px -174px;
  background-size: 120px;
}
.whp-tb-newstyle-wrapper * {
  /*border: 1px solid red;*/
}
.whp-tb-newstyle-wrapper .whp-tds-topbar > div {
  height: 90px;
  box-sizing: border-box;
  text-shadow: 0 1px 0 #f2f5f7;
}
.whp-tb-newstyle-wrapper .whp-topbar-template-name {
  color: #326481;
  font-size: 20px;
  padding: 25px;
}
.whp-tb-newstyle-wrapper .whp-topbar-name-container {
  width: 35%;
}
.whp-tb-newstyle-wrapper .whp-topbar-phase-container {
  width: 420px;
  border-bottom: 1px solid #ddd;
  text-align: right;
}
.whp-tb-newstyle-wrapper .whp-topbar-phase-container ul {
  padding: 0;
}
.whp-tb-newstyle-wrapper .whp-phase {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  padding: 20px 0px;
  width: 80px;
  padding-right: 25px;
  font-weight: normal;
  color: #7c9cb0;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}
.whp-tb-newstyle-wrapper .whp-phase:last-child {
  padding-right: 0;
}
.whp-tb-newstyle-wrapper .whp-phase .icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #66c3ee;
  margin-bottom: 7px;
}
.whp-tb-newstyle-wrapper .whp-phase.details .icon svg {
  position: absolute;
  top: 17px;
  left: 31px;
  fill: white;
}
.whp-tb-newstyle-wrapper .whp-phase.edit .icon svg {
  position: absolute;
  top: 22px;
  left: 30px;
  fill: white;
}
.whp-tb-newstyle-wrapper .whp-phase.features .icon svg {
  position: absolute;
  top: 23px;
  left: 30px;
  fill: white;
}
.whp-tb-newstyle-wrapper .whp-phase.preview .icon svg {
  position: absolute;
  top: 24px;
  left: 29px;
  fill: white;
}
.whp-tb-newstyle-wrapper .whp-phase:hover {
  color: #35637f;
}
.whp-tb-newstyle-wrapper .whp-phase:hover .icon {
  background: white;
}
.whp-tb-newstyle-wrapper .whp-phase:hover .icon svg {
  fill: #f9c83e;
}
.whp-tb-newstyle-wrapper .whp-phase.whp-active {
  color: #35637f;
}
.whp-tb-newstyle-wrapper .whp-phase.whp-active .icon {
  background: #f9c83e;
}
.whp-tb-newstyle-wrapper .whp-phase.whp-active .icon svg {
  fill: white;
}
.whp-tb-newstyle-wrapper .whp-phase .whp-arrow {
  position: absolute;
  right: 0px;
  top: 42px;
  display: block;
  width: 24px;
  height: 8px;
  background: url(../img/tds-sprite.png) -121px -11px no-repeat;
}
.whp-tb-newstyle-wrapper .whp-saves-container {
  width: 220px;
  text-align: right;
  float: right;
  padding: 30px 39px 0 0;
}
.whp-tb-newstyle-wrapper .whp-saves-container .whp-btn.save,
.whp-tb-newstyle-wrapper .whp-saves-container .whp-btn.send {
  margin-right: 15px;
}
.whp-tb-newstyle-wrapper .whp-saves-container .whp-btn.save,
.whp-tb-newstyle-wrapper .whp-saves-container .whp-btn.send,
.whp-tb-newstyle-wrapper .whp-saves-container .whp-btn.save-as {
  padding: 7px 13px;
  width: 80px;
}
.whp-tb-newstyle-wrapper .whp-saves-container .whp-btn.save,
.whp-tb-newstyle-wrapper .whp-saves-container .whp-btn.send {
  background: #3980c3;
}
@media only screen and (max-width: 990px) {
  .whp-tb-newstyle-wrapper .whp-topbar-name-container {
    width: 30%;
  }
}
@media only screen and (max-width: 920px) {
  .whp-tb-newstyle-wrapper .whp-topbar-name-container {
    float: none;
    width: 100%;
    text-align: center;
  }
}
@media only screen and (max-width: 645px) {
  .whp-tb-newstyle-wrapper .whp-saves-container {
    width: 100%;
    text-align: left;
    padding: 15px 39px 0 20px;
    height: 70px !important;
  }
  .whp-tb-newstyle-wrapper .whp-topbar-name-container {
    float: none;
    width: 100%;
    text-align: left;
  }
  .whp-tb-newstyle-wrapper .whp-topbar-template-name {
    padding: 20px 5px 10px 0;
    height: 60px;
  }
}
.whp-prop-container {
  margin: 20px 0;
}
/****************************************************************************************
	NEW MESSAGE PAGE (CR82)
****************************************************************************************/
.whp-new-replies {
  position: absolute;
  right: 115px;
  top: 37px;
  background-color: #2ec532;
  color: #FFF;
  border-radius: 20px;
  padding: 2px 10px 2px 30px;
  font-size: 11px;
}
.whp-new-replies span {
  font-size: 12px;
}
.whp-action-group-wrap {
  padding-top: 20px;
  padding-bottom: 20px;
}
.whp-action-group-details {
  padding: 20px;
  border: 1px solid #b5c9d6;
  background-image: url("../img/bckActionsComp.png");
  background-repeat: repeat;
  color: #000000;
  font-size: 13px;
}
.whp-action-group-details label {
  margin-top: 5px;
  color: #578cac;
  text-shadow: 0 1px 0 #f2f5f7;
}
.whp-action-highlight {
  background-image: url("../img/bckActionsComp.png");
}
.whp-action-segment-title {
  padding: 10px;
  background-color: #dae4ec;
  border-bottom: 1px solid #C7DDF0;
}
.whp-action-segment-title .title-input {
  background-color: transparent;
  border: none;
  box-shadow: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  padding-left: 5px;
  font-size: 140%;
}
.whp-action-segment-title .title-input:focus,
:hover.whp-action-segment-title .title-input {
  background-color: #ffffff;
  transition: background-color 0.3s ease;
  border: none;
  outline: none;
}
.whp-action-segment {
  margin-bottom: 20px;
  border: 1px solid #b5c9d6;
}
.whp-action-segment-body {
  background-color: #ffffff;
}
.whp-action-segment-condition,
.whp-action-segment-action,
.whp-action-segment-buttons {
  padding: 15px;
}
.whp-action-segment-action {
  border-top: 1px solid #b5c9d6;
  padding-top: 15px;
}
.whp-action-segment-buttons {
  border-top: 1px solid #b5c9d6;
  padding-top: 15px;
}
.whp-action-section-add {
  width: 100%;
  cursor: pointer;
  height: 45px;
  font-size: 1.25em;
  background-color: #dae4ec;
  border: 1px solid #578cac;
  color: #578cac;
}
.whp-action-section-add,
.whp-action-section-add:hover,
.whp-action-section-add:active {
  outline: 0;
}
.whp-action-section-add:hover {
  background-color: #749cb7;
}
.whp-action-section-add:active {
  background-color: #86b3d1;
}
.whp-action-component-title {
  padding-bottom: 5px;
  font-weight: bold;
}
.whp-action-component {
  padding: 10px;
}
.whp-action-component.action-highlight {
  background-color: #f5f5f5;
}
.whp-action-component-link {
  height: 20px;
  margin-left: 32px;
  border-left: 2px solid #ccc;
}
.whp-action-component-add {
  padding: 10px;
  color: #575757;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  cursor: pointer;
}
.whp-action-component-add,
.whp-action-component-add:hover,
.whp-action-component-add:active {
  outline: 0;
}
.whp-action-component-add:hover {
  background-color: #e1e1e1;
}
.whp-action-component-add:active {
  background-color: #ffffff;
}
.whp-action-prefix {
  text-align: center;
  padding-top: 5px;
}
.whp-action-prefix-large {
  padding-top: 5px;
  padding-left: 12px;
}
.whp-action-component-remove {
  text-align: center;
}
.whp-action-component-remove-button {
  border: none;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background-color: #cdcdcd;
  color: #ffffff;
}
.whp-action-component-remove-button,
.whp-action-component-remove-button:hover,
.whp-action-component-remove-button:active {
  outline: 0;
}
.whp-action-component-remove-button:hover {
  background-color: #b9b9b9;
}
.whp-action-component-remove-button:active {
  background-color: #e1e1e1;
}
.execute-event .whp-action-component-title {
  color: #578cac;
  text-shadow: 0 1px 0 #f2f5f7;
  font-weight: normal;
}
.execute-event .whp-action-component.action-highlight {
  background-color: transparent;
  border: 1px solid #b5c9d6;
}
.execute-event .whp-action-component-link {
  border-left: 1px solid #b5c9d6;
}
.execute-event .whp-action-component-add {
  border: 1px solid #b5c9d6;
  background-color: transparent;
}
.execute-event .whp-action-component-add:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.execute-event .whp-action-component-add:active {
  background-color: rgba(255, 255, 255, 0.5);
}
.whp-action-execute-condition {
  margin-top: 20px;
}
.whp-action-alert {
  text-align: center;
  padding: 10px;
  color: #000000;
  background-color: #bde2d4;
  margin-bottom: 20px;
  border: 1px solid #00b38d;
}
.whp-action-alert.event-ended {
  background-color: #fce1e2;
  border-color: #f43f47;
}
.whp-micro-clearfix:before,
.whp-micro-clearfix:after {
  content: " ";
  display: table;
}
.whp-micro-clearfix:after {
  clear: both;
}
.whp-action-info-text {
  color: #999999;
}
.whp-event-actions-refresh {
  padding: 3px 0 2px 0;
}
.whp-event-actions-refresh svg {
  width: 16px;
}
/* Components */
/****************************************************************************************
	Message Info + Error + Success + Loader + Spinner
****************************************************************************************/
/* Spinner */
.whp-spinner {
  font-weight: 600;
  color: #3087c4;
}
.whp-spinner-link {
  cursor: pointer;
}
.whp-loader-spinner {
  background-image: url("../img/spinner.gif");
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  float: right;
}
.whp-loader-spinner-error {
  background-image: url("../img/spinner-error.gif");
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  float: right;
}
.ie7 .whp-loader-spinner,
.ie7 .whp-loader-spinner-error {
  display: inline-block;
  float: none;
  margin-right: 5px;
}
.whp-loader-spinner-small {
  background-image: url("../img/spinner-small.gif");
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
}
/* Message Info within page */
/* Classic information */
.whp-info {
  margin: 10px 10px 10px 0;
  padding: 13px;
  border: 1px solid #c8d5dd;
  border-radius: 3px;
  background-clip: padding-box;
  color: #578cac;
  text-shadow: 0 1px 0 #fbfcfd;
}
.whp-info.whp-no-margin-right {
  margin-right: 0;
}
.whp-info.whp-margin-left {
  margin-left: 10px;
}
.whp-sidebar-item .whp-info {
  margin: 0;
  margin-bottom: 20px;
}
.ie8 .whp-sidebar-item .whp-info {
  margin-bottom: 10px;
}
/* Error */
.whp-info-error {
  padding: 13px;
  margin: 10px 10px 10px 0;
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid #d73838;
  background-color: #fef3f3;
  text-shadow: 0 1px 0 #fbfcfd;
  font-weight: bold;
  color: #d73838;
}
.whp-info-error.whp-margin-left {
  margin-left: 10px;
}
.whp-sidebar-item .whp-info-error {
  margin: 0;
  margin-bottom: 20px;
}
.ie8 .whp-sidebar-item .whp-info-error {
  margin-bottom: 10px;
}
/* Message at the bottom */
.whp-message {
  height: 110px;
  width: 535px;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9500;
  background-color: rgba(34, 34, 34, 0.9);
  color: #fff;
  text-align: left;
}
/* black opacity 100% for login as its on a black background */
.whp-login-wrap .whp-message {
  background-color: #000;
}
.ie7 .whp-message,
.ie8 .whp-message {
  background-color: #000000;
}
.whp-message.whp-message-huge {
  height: 80px;
}
/* Text for error + success message */
.whp-message span {
  margin-left: 40px;
  max-width: 300px;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* ==> Webkit */
  .whp-message span {
    margin-left: 12px;
  }
}
/* Text for progress bar */
.whp-message-loader span {
  margin-left: 0;
  margin-right: 10px;
  max-width: 125px;
}
/* Container progress bar static version with animation */
.whp-message-loader div {
  width: 300px;
  height: 16px;
  display: inline-block;
  margin-top: 5px;
  overflow: hidden;
}
/* Progress bar static version with animation */
.whp-message-loader .whp-ANIM-loader-static {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  border: 0;
  height: 16px;
  width: 300px;
}
/* Error + Success icon */
.whp-message i {
  width: 30px;
  height: 30px;
  position: absolute;
}
.ie9 .whp-message i {
  position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* ==> Webkit */
  .whp-message i {
    position: relative;
    vertical-align: top;
  }
}
/* Close button */
.whp-message-close {
  right: 16px;
  width: 16px;
  height: 16px;
  position: absolute;
  margin-top: 0;
  margin-top: 16px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -200px -198px;
  text-indent: -9000px;
  cursor: pointer;
}
.whp-message-close:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -200px -217px;
}
/* Attention icon */
.whp-message-attention {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -180px -20px;
}
/* Error icon */
.whp-message-error {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -220px 0px;
}
/* Info icon */
.whp-message-info {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -220px -40px;
}
/* loading spinner animation */
@keyframes rotate-infinite {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.whp-message-loading-spinner {
  animation: rotate-infinite 0.8s linear infinite;
  border: 5px solid #a1f3b6;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  height: 25px !important;
  width: 25px !important;
  margin-right: 5px;
}
.whp-alert-message-content {
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding-left: 40px;
}
/* Container for the progress bar */
.ie7 .whp-loader-box,
.ie8 .whp-loader-box,
.ie9 .whp-loader-box {
  display: none;
}
.whp-message-loader .whp-loader-box {
  border-radius: 5px;
  background-clip: padding-box;
  border-bottom: 1px solid #626262;
  padding: 2px;
  background: #1e1e1e;
  background: linear-gradient(top, #1e1e1e 0, #2f2f2f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e1e1e', endColorstr='#2f2f2f', GradientType=0);
}
/* Progress bar static version with animation */
.whp-message-loader .whp-ANIM-loader-static {
  padding: 0;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #69a13d;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
  animation: progress-bar-stripes 2s linear infinite;
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
/* Progress bar dynamic version */
.ie7 progress,
.ie8 progress,
.ie9 progress {
  display: none;
}
progress.whp-loader-dynamic,
progress[role].whp-loader-dynamic {
  width: 300px;
  height: 16px;
  border: 0;
  border-radius: 3px;
  background-clip: padding-box;
  background-size: auto;
  background: transparent;
  background-image: transparent;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
/* Gradient for loader dynamic */
.whp-gradient-loader-dynamic {
  background: #2a87af;
  background: -ms-linear-gradient(top, #2a87af 0, #247598 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a87af', endColorstr='#247598', GradientType=0);
}
progress.whp-loader-dynamic::-webkit-progress-bar {
  background: transparent;
}
progress.whp-loader-dynamic::-webkit-progress-value {
  border-radius: 3px;
  background-clip: padding-box;
  background: #2a87af;
  background: -ms-linear-gradient(top, #2a87af 0, #247598 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a87af', endColorstr='#247598', GradientType=0);
}
progress.whp-loader-dynamic[aria-valuenow]:before {
  background: #2a87af;
  background: -ms-linear-gradient(top, #2a87af 0, #247598 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a87af', endColorstr='#247598', GradientType=0);
}
progress[role].whp-loader-dynamic:after {
  background-image: none;
}
/* Progress bar for all browsers (HTML tag instead of progress tag) */
.whp-progressbar-box {
  padding: 2px;
  border-radius: 5px;
  background-clip: padding-box;
  border-top: 1px solid #c1ced9;
  border-left: 1px solid #cfdbe3;
  border-right: 1px solid #cfdbe3;
  background: #cbd7df;
  background: linear-gradient(to bottom, #cbd7df 0%, #dee9f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbd7df', endColorstr='#dee9f1', GradientType=0);
}
.whp-progressbar-box .whp-progressbar {
  float: left;
  width: 0;
  height: 100%;
  background: #2a87af;
  background: -ms-linear-gradient(top, #2a87af 0, #247598 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a87af', endColorstr='#247598', GradientType=0);
  border-radius: 3px;
  background-clip: padding-box;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15), transparent 0 0 0;
  box-sizing: border-box;
  transition: width 0.6s ease;
}
.whp-no-browser-support {
  text-align: center;
}
.whp-no-browser-support .whp-white-content-box {
  margin-left: auto;
  margin-right: auto;
  width: 540px;
  overflow: hidden;
}
.whp-no-browser-support .whp-tds-lightbox-body {
  padding-bottom: 0;
}
.whp-no-browser-support .whp-white-bg {
  padding: 20px 0;
}
.whp-no-browser-support .whp-grey-bg {
  background-color: #f5f5f5;
  margin: 0 -20px;
  padding: 20px;
}
.whp-no-browser-support h2 {
  font-size: 22px;
  color: #e40606;
  font-weight: normal;
}
.whp-no-browser-support h3 {
  font-size: 14px;
  color: #313131;
}
.whp-no-browser-support p {
  margin-bottom: 10px;
}
.whp-no-browser-support .whp-btn {
  padding: 7px 25px;
}
.whp-no-support-pencil {
  display: block;
  margin: 0 auto 15px;
  width: 80px;
  height: 40px;
  background: url(../img/mainSprite.png) -300px -600px;
}
/* Error text */
.whp-message-error-text {
  max-width: 920px;
}
/****************************************************************************************
	Tab for new message page
****************************************************************************************/
.whp-tabs {
  margin: 0;
  padding: 0;
  display: inline-block;
  float: left;
}
.whp-tabs .whp-tab {
  display: inline;
  float: left;
  width: 110px;
  margin-right: 4px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 3px;
  background-clip: padding-box;
  border-top: 1px solid #f6f8fa;
  font-weight: bold;
  color: #575757;
  background-image: url("../img/bckTab.png");
  background-repeat: repeat;
  box-shadow: 0 0 2px 1px #bcccd6, transparent 0 0 0;
  list-style: none;
}
/* fix the new message ie7 tab width and not float right issue */
.ie7 .whp-tabs .whp-tab {
  width: auto;
}
/* Clear both after and before a fluid container (with fluid columns inside) */
.whp-tabs:after {
  clear: both;
}
.whp-tabs:before,
.whp-tabs:after {
  content: "";
  display: table;
}
.whp-tabs .whp-tab {
  width: 110px;
}
/* Large desktop */
@media screen and (min-width: 1200px) {
  .whp-tabs .whp-tab {
    width: 110px;
  }
}
/* Mask to hide the box shadow from the tab */
.whp-tab-clip {
  height: 4px;
  position: absolute;
  background-color: #f2f5f7;
  margin-top: 35px;
  width: 110px;
}
#whp-comp-attr-tabs .whp-tab-clip {
  margin-top: 34px;
}
#whp-comp-attr-tabs hr {
  box-shadow: 0 0 2px 1px #bcccd6, transparent 0 0 0;
  height: 5px;
  display: inline-block;
  width: 100%;
  margin-top: 0;
  background-color: #f2f5f7;
}
/* fix the new message page separator issue */
.ie7 #whp-comp-attr-tabs hr {
  margin-top: -10px;
  height: 8px;
  clear: left;
}
.ie7 .whp-tab-clip,
.ie7 #whp-comp-attr-tabs .whp-tab-clip,
.ie8 .whp-tab-clip,
.ie8 #whp-comp-attr-tabs .whp-tab-clip {
  display: none;
}
.whp-tab-content {
  padding-top: 10px;
  padding-bottom: 20px;
  background-color: #f2f5f7;
}
/* Tab Title */
.whp-tabs .whp-tab a {
  float: left;
  width: 80%;
  padding: 9px 10px 8px;
  border-bottom: 0;
  color: #578cac;
  text-shadow: 0 1px 0 #f2f5f7;
  outline: 0;
}
.whp-tabs .whp-tab a:hover {
  color: #578cac;
}
/* Icon within a link */
.whp-tab i {
  float: right;
  width: 20px;
  height: 12px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -140px;
  margin-top: 3px;
}
.whp-tab a {
  cursor: pointer;
}
/* IE7 issue */
.ie7 .whp-tab i,
.ie7 .whp-tab a {
  float: none;
  display: inline-block;
}
/* fix the ie7 tab no gap issue */
.ie7 .whp-tab i {
  margin-left: 25px;
}
/* ie7 issue for message tab gap */
.ie7 .whp-tab span {
  padding-right: 20px;
}
/* Active - No text */
.whp-tab.whp-active i {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -100px;
}
/* Active - Text */
.whp-tab.whp-complete.whp-active i {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -80px;
}
/* Non active - Text */
.whp-tab.whp-complete i {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -120px;
}
/* Active tab */
.whp-tabs .whp-tab.ui-state-active {
  background-color: #f2f5f7;
  background-image: none;
  position: relative;
}
.whp-tabs .whp-tab.force-ui-state-active {
  background-color: #f2f5f7;
  background-image: none;
  position: relative;
}
/****************************************************************************************
	Date Picker - Old Version
****************************************************************************************/
/* Gradient date time */
.whp-gradient-datetime {
  background: #9db6c7;
  background: linear-gradient(to bottom, #9db6c7 0, #6a8fa8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9db6c7', endColorstr='#6a8fa8', GradientType=0);
}
.whp-gradient-datetime-selected {
  background: #b9cdda;
  background: linear-gradient(to bottom, #b9cdda 0, #cadbe6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9cdda', endColorstr='#cadbe6', GradientType=0);
}
.whp-gradient-datetime-btn {
  background: #a5bccb;
  background: linear-gradient(to bottom, #a5bccb 0, #7499b1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5bccb', endColorstr='#7499b1', GradientType=0);
}
.whp-gradient-datetime-btn-active {
  background: #7999af;
  background: linear-gradient(to bottom, #7999af 0, #759ab3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7999af', endColorstr='#759ab3', GradientType=0);
}
.whp-datetime-old {
  padding: 10px;
}
.whp-datepicker-old-date .tb-caltopday,
.whp-datepicker-old-date .tb-caltopend {
  border: 1px solid #ffffff;
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
  color: #888888;
  font-weight: bold;
  width: 26px;
  height: 26px;
}
.whp-datepicker-old-date .nxmth {
  text-align: center;
  color: #e0e0e0;
}
.whp-datepicker-old-top {
  border-top: 1px solid #6188a3;
  border-left: 1px solid #6188a3;
  border-right: 1px solid #6188a3;
  border-radius: 0 !important;
  background-clip: padding-box !important;
  background: #a5bccb;
  background: linear-gradient(to bottom, #a5bccb 0, #7499b1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5bccb', endColorstr='#7499b1', GradientType=0);
  box-shadow: 0 1px 0 0 #94afc3, inset 0 1px 0 0 #b9cbd6;
  color: #ffffff;
  text-shadow: 1px -1px 1px #5980a0;
  margin-top: 5px;
  width: 248px;
  height: 60px;
}
.whp-datepicker-old-browse a {
  border: 1px solid #6188a3;
  border-radius: 0 !important;
  background-clip: padding-box !important;
  background: #a5bccb;
  background: linear-gradient(to bottom, #a5bccb 0, #7499b1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5bccb', endColorstr='#7499b1', GradientType=0);
  box-shadow: 0 1px 0 0 #94afc3, inset 0 1px 0 0 #b9cbd6;
  color: #ffffff;
  text-shadow: 1px -1px 1px #5980a0;
  margin-top: 5px;
  width: 19px;
  height: 20px;
  padding: 5px;
}
.whp-datepicker-old-select select {
  width: 100px;
}
.whp-datepicker-old-content {
  padding: 9px;
  border: 1px solid #6188a3;
  background-color: #ffffff;
  width: 230px;
}
.whp-datepicker-old-content table {
  width: 230px;
  text-align: center;
  -moz-user-select: none;
  border-collapse: collapse;
}
.whp-datepicker-old-content table td {
  border: 1px solid #e0e0e0;
  vertical-align: middle;
  text-align: center;
  font-weight: 400;
  width: 26px;
  height: 26px;
  border-collapse: collapse;
  cursor: pointer;
}
/****************************************************************************************
	Date Picker
****************************************************************************************/
#whp-datetime-prev {
  float: left;
  margin-left: 5px;
}
#whp-datetime-next {
  float: right;
  margin-right: 5px;
}
.whp-datetime-control {
  border: 1px solid #6188a3;
  border-radius: 0 !important;
  background-clip: padding-box !important;
  background: #a5bccb;
  background: linear-gradient(to bottom, #a5bccb 0, #7499b1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5bccb', endColorstr='#7499b1', GradientType=0);
  box-shadow: 0 1px 0 0 #94afc3, inset 0 1px 0 0 #b9cbd6;
  color: #ffffff;
  text-shadow: 1px -1px 1px #5980a0;
  margin-top: 5px;
  width: 19px;
  height: 20px;
}
.whp-datetime-control:active {
  background: #7999af;
  background: linear-gradient(to bottom, #7999af 0, #759ab3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7999af', endColorstr='#759ab3', GradientType=0);
}
.calendar {
  border-collapse: collapse;
  background-color: #ffffff;
  width: 230px;
  text-align: center;
  -moz-user-select: none;
  z-index: 5000;
  border: 1px solid #6188a3;
  box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.1), transparent 0 0 0;
}
.calendar td {
  border: 0;
  text-align: center;
}
.mainheading {
  position: relative;
  background: #9db6c7;
  background: linear-gradient(to bottom, #9db6c7 0, #6a8fa8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9db6c7', endColorstr='#6a8fa8', GradientType=0);
  height: 31px;
}
.mainheading .whp-datetime-select {
  width: 150px;
  float: left;
  margin-left: 20px;
  margin-top: 4px;
}
.mainheading .whp-datetime-select select {
  width: 70px;
}
.mainheading:after,
.mainheading:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.mainheading:after {
  border-bottom-color: #9db6c7;
  border-width: 9px;
  left: 50%;
  margin-left: -9px;
}
.mainheading:before {
  border-bottom-color: #6188a3;
  border-width: 10px;
  left: 50%;
  margin-left: -10px;
}
table.caldayheading {
  border-collapse: collapse;
  cursor: pointer;
  empty-cells: show;
  margin: 0 6px 0 6px;
}
table.caldayheading td {
  border: 1px solid #ffffff;
  text-align: center;
  color: #888888;
  font-weight: bold;
  width: 26px;
  height: 26px;
}
table.calcells {
  border-collapse: collapse;
  cursor: pointer;
  margin: 0 6px 0 6px;
}
table.calcells td {
  border: 1px solid #e0e0e0;
  vertical-align: middle;
  font-weight: bold;
  width: 26px;
  height: 26px;
}
.calcells .hover {
  font-weight: 600;
  text-align: center;
  color: #5488a8;
}
table.calcells td div {
  padding: 1px;
  margin: 0;
}
.wkhead {
  text-align: center;
  color: #888888;
}
.wkday,
.wkend {
  color: #5488a8;
  text-align: center;
  font-weight: 400;
}
.curdate {
  background: #b9cdda;
  font-weight: 600;
  color: #5488a8;
  text-align: center !important;
}
.cell_selected {
  background: #b9cdda;
  background: linear-gradient(to bottom, #b9cdda 0, #cadbe6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9cdda', endColorstr='#cadbe6', GradientType=0);
  box-shadow: inset 0 1px 1px 1px #9fb1bc, transparent 0 0 0;
  font-weight: 600;
  color: #5488a8 !important;
  text-align: center !important;
}
.notmnth {
  text-align: center;
  color: #e0e0e0;
}
.epochCalInput {
  background-image: url('../img/calendar.png');
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 27px;
  margin-right: 3px;
  width: 65px;
}
.searchbutton2,
.actionButton {
  padding: 0 !important;
  margin-top: 5px;
  margin-bottom: 5px;
}
table.calendar .whp-btn {
  padding: 0 !important;
}
.whp-datetime-icon-prev {
  float: left;
  width: 5px;
  height: 9px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -80px;
  margin-left: 3px;
  margin-top: -3px;
}
.whp-datetime-icon-next {
  float: left;
  width: 5px;
  height: 9px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -100px;
  margin-left: 3px;
  margin-top: -3px;
}
/****************************************************************************************
	Time Picker
****************************************************************************************/
table.calendarTime {
  border-collapse: collapse;
  background-color: #ffffff;
  /*width: 230px;*/
  text-align: center;
  -moz-user-select: none;
  z-index: 5000;
  border: 1px solid #6188a3;
  box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.1), transparent 0 0 0;
}
.calendarTimeRestricted {
  width: 100px !important;
}
table.calendarTime td {
  border: 0;
  text-align: center;
}
.mainheadingTime {
  position: relative;
  background: #9db6c7;
  background: linear-gradient(to bottom, #9db6c7 0, #6a8fa8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9db6c7', endColorstr='#6a8fa8', GradientType=0);
  height: 31px;
}
.mainheadingTime:after,
.mainheadingTime:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.mainheadingTime:after {
  border-bottom-color: #9db6c7;
  border-width: 9px;
  left: 50%;
  margin-left: -9px;
}
.mainheadingTime:before {
  border-bottom-color: #6188a3;
  border-width: 10px;
  left: 50%;
  margin-left: -10px;
}
.whispirTimeInput {
  background-image: url('../img/calendar.png');
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 27px;
  margin-right: 3px;
  width: 65px;
}
.whispirTimeInputNoSec {
  background-image: url('../img/clock.png');
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 27px;
}
.actionSelect {
  margin-left: 5px !important;
}
.actionButton {
  margin-left: 5px !important;
}
.ie7 .actionButton.whp-small {
  padding-left: 5px !important;
}
#attributeStartDateTime_Time_calendar tr:nth-child(2) div {
  padding: 0 5px;
}
/****************************************************************************************
	Fancybox (attention a fancy box renders an iframe)
****************************************************************************************/
body.whp-container-popup {
  background-image: none;
}
.whp-container-popup {
  padding-top: 0 !important;
}
.whp-container-page-popup {
  padding-top: 20px;
}
.whp-fancybox-page {
  overflow: auto;
  background-color: #000000;
}
#whp-fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9100;
  display: none;
  background-color: #000000;
}
#whp-fancybox-tmp {
  padding: 0;
  margin: 0;
  border: 0;
  overflow: auto;
  display: none;
}
#whp-fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  z-index: 9101;
  outline: none;
  display: none;
}
#whp-fancybox-outer {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  border: 10px solid rgba(0, 0, 0, 0.3);
  background-clip: padding-box;
}
#whp-fancybox-content {
  width: 0;
  height: 0;
  padding: 0;
  outline: none;
  position: relative;
  z-index: 9102;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  padding-top: 60px;
}
#feeditems {
  box-sizing: border-box;
}
#feeditems .whp-grey-boxed-title {
  margin: 0;
}
#whp-fancybox-hide-sel-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 9101;
}
#whp-fancybox-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 16px;
  height: 17px;
  cursor: pointer;
  z-index: 9103;
  display: none;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: 0px -260px;
}
#whp-fancybox-close:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -20px -260px;
}
#whp-fancybox-fullscreen {
  position: absolute;
  top: 18px;
  right: 42px;
  width: 16px;
  height: 17px;
  cursor: pointer;
  z-index: 9103;
  display: none;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -40px -260px;
}
#whp-fancybox-fullscreen:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -60px -260px;
}
.whp-fancybox-fullscreen-active {
  background: url("../img/mainSprite.png") no-repeat !important;
  background-position: -80px -260px !important;
}
.whp-fancybox-fullscreen-active:hover {
  background: url("../img/mainSprite.png") no-repeat !important;
  background-position: -100px -260px !important;
}
#whp-fancybox-img {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  line-height: 0;
  vertical-align: top;
}
#whp-fancybox-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.whp-fancybox-bg {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 0;
  width: 20px;
  height: 20px;
  z-index: 9001;
}
#whp-fancybox-title {
  z-index: 9102;
  padding-left: 5px;
  margin-top: 0;
  height: 60px;
  padding-top: 21px;
  margin-bottom: 18px;
  font-weight: 600;
  color: #4b7a96;
}
.whp-fancybox-title-inside {
  padding-top: 14px;
  color: #333;
  position: absolute;
  top: 0;
  height: 24px;
}
/* Hack IE */
.ie7 #whp-fancybox-title {
  height: 32px;
}
/****************************************************************************************
	Admin Fancybox (attention a fancy box renders an iframe)
****************************************************************************************/
#whp-fancybox-overlay.whp-fancybox-admin {
  display: none !important;
}
#whp-fancybox-wrap.whp-fancybox-admin {
  top: 0 !important;
  left: 0 !important;
  padding: 0 !important;
  position: relative !important;
}
/* Ensure that the fancy box is under the main navigation when scrolling */
.whp-fancybox-admin {
  z-index: 700 !important;
}
.no-boxshadow .whp-fancybox-admin #whp-fancybox-content {
  border-right: 1px solid #e8e7e7;
  margin-left: -1px;
}
/* No border right for IE7 */
.ie7.no-boxshadow .whp-fancybox-admin #whp-fancybox-content {
  border-right: 1px solid #ffffff;
}
.whp-fancybox-admin #whp-fancybox-outer {
  box-shadow: 0 0 0 0, transparent 0 0 0 !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  background-clip: padding-box !important;
}
.whp-fancybox-admin #whp-fancybox-content {
  padding: 0 !important;
  background-color: #ffffff !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
}
.whp-fancybox-admin #whp-fancybox-title-float-main {
  background-color: #ffffff !important;
}
.whp-fancybox-admin #whp-fancybox-fullscreen {
  display: none !important;
}
#whp-fancybox-admin-box #whp-fancybox-loading {
  z-index: auto !important;
}
#whp-fancybox-admin-box #whp-fancybox-overlay {
  z-index: auto !important;
  background-color: #ffffff !important;
}
#whp-fancybox-admin-box #whp-fancybox-frame {
  overflow: hidden !important;
  width: inherit !important;
}
#whp-fancybox-admin-box #whp-fancybox-wrap {
  background-color: #ffffff !important;
  z-index: auto !important;
}
#whp-fancybox-admin-box #whp-fancybox-content {
  z-index: auto !important;
  border-style: 0 !important;
  background-color: #ffffff !important;
}
#whp-fancybox-admin-box #whp-fancybox-hide-sel-frame {
  z-index: auto !important;
}
#whp-fancybox-admin-box #whp-fancybox-close {
  z-index: auto !important;
  right: 0 !important;
}
#whp-fancybox-admin-box .fancybox-bg {
  z-index: auto !important;
}
#whp-fancybox-admin-box #whp-fancybox-title {
  z-index: auto !important;
}
#whp-fancybox-admin-box #whp-fancybox-close {
  width: 16px !important;
  height: 16px !important;
  background: none;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -120px -260px;
}
#whp-fancybox-admin-box #whp-fancybox-close:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -140px -260px;
}
.whp-popup {
  color: #3e3e3e !important;
  border: 1px solid #bcbcbc;
  background: #f5f5f5;
  background: linear-gradient(to bottom, #f5f5f5 0, #f0f0f0 100%);
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), transparent 0 0 0;
  z-index: 9999;
}
.whp-popup:after,
.whp-popup:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.whp-popup:after {
  border-bottom-color: #f4f4f4;
  border-width: 10px;
}
.whp-popup:before {
  border-bottom-color: #bcbcbc;
  border-width: 11px;
}
/****************************************************************************************
	Custom Drop Down
****************************************************************************************/
.whp-custom-dropdown {
  display: inline-block;
  z-index: 1000;
}
.whp-custom-dropdown dd,
.whp-custom-dropdown dt,
.whp-custom-dropdown ul {
  margin: 0;
  padding: 0;
  z-index: 1000;
}
.whp-custom-dropdown dd {
  position: relative;
}
.whp-custom-dropdown a,
.whp-custom-dropdown a:visited {
  text-decoration: none;
  outline: none;
}
.whp-custom-dropdown dt {
  display: inline-block;
  height: 21px;
  padding: 2px;
  width: 340px;
  border: 1px solid #a3b8c6;
  border-radius: 1px;
  background-clip: padding-box;
  background: #e9f0f4;
  background: linear-gradient(to bottom, #e9f0f4 0, #dde8ee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9f0f4', endColorstr='#dde8ee', GradientType=0);
  line-height: 18px;
  color: #575757;
  box-shadow: 0 1px 1px #f4f7f9 inset, transparent 0 0 0;
  cursor: pointer;
}
.whp-custom-dropdown dt a {
  padding-left: 7px;
  padding-top: 2px;
  height: 17px;
  position: absolute;
}
.whp-custom-dropdown-arrow {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -40px;
  display: inline-block;
  height: 5px;
  width: 9px;
  margin-top: 8px;
  margin-right: 10px;
  margin-left: 10px;
  /* Fix for old version */
  float: right;
}
.whp-custom-dropdown dt a span {
  cursor: pointer;
  display: block;
}
.whp-custom-dropdown dd ul {
  background: #ffffff;
  border-left: 1px solid #a4bac9;
  border-right: 1px solid #a4bac9;
  border-bottom: 1px solid #a4bac9;
  display: none;
  left: 0;
  padding: 0;
  position: absolute;
  list-style: none;
  /* Fix for old version */
  /* width: 220px; */
  width: 344px;
  top: -4px;
  height: 144px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 10px 10px 5px rgba(149, 173, 189, 0.5), transparent 0 0 0;
}
/* Fix for old version only for IE7 */
.ie7 .whp-custom-dropdown dd ul {
  top: 0;
  width: 344px;
}
.whp-custom-dropdown span.whp-custom-dropdown-value {
  display: none;
}
.whp-custom-dropdown dd ul li a {
  padding-left: 25px;
  padding-top: 9px;
  padding-bottom: 9px;
  height: 17px;
  display: block;
  border-bottom: 1px solid #d0dbe3;
  cursor: normal;
  color: #578cac !important;
  font-weight: 400;
}
.ie7 .whp-custom-dropdown dd ul li a {
  height: auto;
}
.whp-custom-dropdown-group {
  padding-left: 7px;
  padding-top: 2px;
  height: 17px;
  display: block;
  border-bottom: 1px solid #d0dbe3;
}
.whp-custom-dropdown dd ul li:last-child a {
  border-bottom: 0;
}
.whp-custom-dropdown dd ul li a:hover {
  background-color: #e1e9ee;
  color: #578cac !important;
  cursor: pointer;
}
.whp-custom-dropdown dd ul li.whp-custom-dropdown-icon a {
  padding-left: 9px;
}
.whp-custom-dropdown dd ul li.whp-custom-dropdown-icon a i {
  display: inline-block;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -40px;
  height: 7px;
  width: 9px;
  margin-right: 7px;
}
/* css from rte.css*/
.customListContainer {
  background: none repeat scroll 0%;
  width: 100%;
  display: block;
  float: right;
  overflow: hidden;
}
.customListItems {
  padding: 0;
  width: 100%;
  max-height: 140px;
  overflow: auto;
}
/****************************************************************************************
	Suggestion menu: auto completion, map
****************************************************************************************/
.whp-dropdown {
  position: absolute;
  width: 330px;
  padding: 0;
  margin: -2px 0 0 0;
  border: 1px solid #a3b8c6;
  list-style: none;
}
.whp-dropdown-item {
  padding: 10px;
  border-bottom: 1px solid #c9d5dd;
  background: #ffffff;
  cursor: pointer;
}
.whp-dropdown-item:last-child {
  border-bottom: 0;
}
.whp-dropdown-item:hover {
  background-color: #e9eff2;
}
/* Used for keyboard navigation, class added in JS */
.whp-dropdown-item.whp-selected {
  background-color: #e9eff2;
}
/****************************************************************************************
	Suggestion Menu
****************************************************************************************/
div.suggestions {
  background: #ffffff;
  border: 1px solid #a4bac9;
  position: absolute;
  overflow: auto;
  /* Needs to be underneath the mega menu */
  z-index: 4000;
  width: 220px;
  height: 115px;
}
.ie7 div.suggestions {
  z-index: 700;
}
/* Suggestion within the drop down */
div.suggestions div {
  padding: 9px 0 9px 25px;
  height: auto;
  display: block;
  border-bottom: 1px solid #d0dbe3;
  color: #578cac !important;
  font-weight: 600;
  cursor: normal;
}
/* Last suggestion in the list */
#lastSuggestion {
  border-bottom: none;
}
/* hover on a suggestion */
.suggestions .current.oddColourSuggestion,
.suggestions .current {
  background-color: #e1e9ee;
  color: #578cac !important;
  cursor: pointer;
}
/* Label on a suggestion */
.suggestions .oddColourSuggestion {
  background-color: #e4f2f5;
}
.suggestTextInput {
  background-image: url('../img/custom-drop-down.png');
  background-position: right center;
  background-repeat: no-repeat;
}
/****************************************************************************************
	Label
****************************************************************************************/
/************************ Tags aka label */
.whp-label-container i {
  margin-top: 5px;
  margin-left: 5px;
}
/* Define label and delete confusion with span (used for hierarchy) in inbox*/
.whp-inbox tbody td.whp-inbox-column-subject .whp-label,
.whp-label {
  display: inline-block;
  padding: 3px 6px;
  margin: 0 5px 6px 0;
  width: auto;
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid #444444;
  background-color: #cccccc;
  color: #444444;
  text-shadow: none;
}
/************************ State */
.whp-state-success {
  color: #4fa446;
}
.whp-state-warning {
  color: #d78017;
}
.whp-state-error {
  color: #c92b2a;
}
.whp-state-pending {
  color: #868686;
}
/****************************************************************************************
	List with ability to select option, see address book
****************************************************************************************/
/************************ Multiple Select with nested list */
.whp-nested-list {
  width: 270px;
  overflow: auto;
  border: 1px solid #a3b8c6;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #ffffff;
}
.whp-control-fluid .whp-nested-list {
  width: 100%;
  overflow: auto;
}
.ie7 .whp-control-fluid .whp-nested-list,
.ie8 .whp-control-fluid .whp-nested-list {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.whp-nested-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.whp-nested-list ul li.whp-nested-list-item {
  border-bottom: 1px solid #eeeeee;
}
.whp-nested-list ul li {
  float: left;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}
.whp-nested-list ul li:before,
.whp-nested-list ul li:after {
  clear: both;
}
.whp-nested-list-sub-list {
  margin-left: 40px !important;
}
.whp-control-group .whp-nested-list-radio {
  float: left;
  margin-top: 0 !important;
}
input.whp-nested-list-text {
  float: left;
  width: 65% !important;
  color: #578cac;
}
.whp-nested-list-text {
  float: left;
  width: 70% !important;
  color: #578cac;
}
/* fix the new message page recipient lists issue jira 847 */
.ie7 input.whp-nested-list-text {
  margin-left: auto;
}
.whp-nested-list-link {
  float: right;
  width: 60px;
  margin-right: 10px;
}
.whp-nestid-list-fold {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -20px;
  float: left;
  width: 14px;
  height: 15px;
  margin-right: 5px;
  cursor: pointer;
  margin-left: 10px;
}
.whp-nestid-list-unfold {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -20px;
  float: left;
  width: 14px;
  height: 15px;
  margin-right: 5px;
  cursor: pointer;
  margin-left: 10px;
}
/****************************************************************************************
	Blue button located at the top of a list, form, admin section
	Change view within the page
****************************************************************************************/
/************************ Top Menu Drop Down */
/* Main container */
.ie8 .whp-top-menu-dropdown {
  float: left;
}
.whp-top-menu-dropdown-access {
  padding: 8px 14px;
  display: block;
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #dee8f1;
  background: linear-gradient(to bottom, #dee8f1 0, #d8e5ee 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
  cursor: pointer;
}
.whp-top-menu-dropdown-access:hover {
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #e3edf3;
  background: linear-gradient(to bottom, #e3edf3 0, #e3edf3 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
}
.whp-top-menu-dropdown-access.whp-hover {
  border-bottom: 1px solid #f4f8fa;
  background: #84b2ce;
  background: linear-gradient(to bottom, rgba(19, 64, 94, 0.1) 0, rgba(255, 255, 255, 0) 100%);
  color: #578cac;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: inset 0 1px 1px 0 #9fafba, transparent 0 0 0;
}
.ie7 .whp-top-menu-dropdown-access.whp-hover,
.ie8 .whp-top-menu-dropdown-access.whp-hover,
.ie9 .whp-top-menu-dropdown-access.whp-hover {
  color: #ffffff !important;
}
.whp-top-menu-dropdown-content {
  visibility: hidden;
}
/* Icon */
.whp-top-menu-dropdown-access i {
  margin-top: 8px;
  margin-left: 10px;
  display: inline-block;
  width: 9px;
  height: 5px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -100px;
}
.ie7 .whp-top-menu-dropdown-access i {
  margin-top: -10px;
}
/* Item within the menu */
ul.whp-top-menu-dropdown-content {
  padding: 8px 14px;
  display: block;
  margin-top: 5px;
  position: absolute;
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #dee8f1;
  background: linear-gradient(to bottom, #dee8f1 0, #d8e5ee 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
  cursor: pointer;
  list-style: none;
}
.ie7 ul.whp-top-menu-dropdown-content {
  width: 200px;
}
ul.whp-top-menu-dropdown-content li {
  padding: 8px 14px;
  margin-right: 0;
  display: block !important;
  cursor: pointer;
}
ul.whp-top-menu-dropdown-content li:hover {
  background: #e3edf3;
  background: linear-gradient(to bottom, #e3edf3 0, #e3edf3 100%);
}
/* Sepration */
.whp-top-menu-dropdown-separation {
  padding: 0 !important;
}
/************************ Page Top menu */
.whp-JS-display-link-feature {
  cursor: pointer;
  display: inline-block;
  margin-bottom: 5px;
}
.whp-JS-link-activate-feature {
  cursor: pointer;
  display: inline-block;
}
/************************ Page Top menu */
.whp-top-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
}
.whp-top-menu li {
  display: inline-block;
  margin-right: 7px;
}
.ie7 .whp-top-menu li {
  display: inline;
  margin-right: 5px;
}
.ie8 .whp-top-menu:after {
  clear: both;
}
.ie8 .whp-top-menu li {
  margin-right: 5px;
}
.ie8 .whp-top-menu li a {
  float: left;
}
.whp-top-menu li a {
  padding: 8px 14px;
  display: block;
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #dee8f1;
  background: linear-gradient(to bottom, #dee8f1 0, #d8e5ee 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
  cursor: pointer;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .whp-top-menu li a {
    font-weight: 600 !important;
  }
}
.whp-top-menu li a:hover {
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #e3edf3;
  background: linear-gradient(to bottom, #e3edf3 0, #e3edf3 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
}
.ie7 .whp-top-menu li a:hover,
.ie8 .whp-top-menu li a:hover {
  color: #ffffff !important;
}
.whp-top-menu .whp-top-menu-active {
  border-bottom: 1px solid #f4f8fa;
  background: #84b2ce;
  background: linear-gradient(to bottom, rgba(19, 64, 94, 0.1) 0, rgba(255, 255, 255, 0) 100%);
  color: #578cac;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: inset 0 1px 1px 0 #9fafba, transparent 0 0 0;
}
.ie7 .whp-top-menu .whp-top-menu-active,
.ie8 .whp-top-menu .whp-top-menu-active,
.ie9 .whp-top-menu .whp-top-menu-active {
  color: #ffffff !important;
}
.whp-top-menu .whp-top-menu-active:hover {
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #e3edf3;
  background: linear-gradient(to bottom, #e3edf3 0, #e3edf3 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
}
.ie7 .whp-top-menu .whp-top-menu-active:hover,
.ie8 .whp-top-menu .whp-top-menu-active:hover {
  color: #ffffff !important;
}
.whp-admin-container .whp-top-menu {
  margin-bottom: 0 !important;
}
/****************************************************************************************
	Show extract of code
****************************************************************************************/
/************************ Prettify */
.whp-code-extract {
  margin-bottom: 20px;
  border-radius: 6px;
  background-clip: padding-box;
  word-wrap: break-word;
}
/* Class generated with JavaScript, please refer to prettify.js */
.com {
  color: #93a1a1;
}
.lit {
  color: #195f91;
}
.pun,
.opn,
.clo {
  color: #93a1a1;
}
.fun {
  color: #dc322f;
}
.str,
.atv {
  color: #D14;
}
.kwd,
.prettyprint .tag {
  color: #1e347b;
}
.typ,
.atn,
.dec,
.var {
  color: #008080;
}
.pln {
  color: #48484c;
}
.prettyprint {
  padding: 8px;
  border: 1px solid #e1e1e8;
  background-color: #f7f7f9;
}
.prettyprint span {
  font-family: "Courier New", "Lucida Console";
}
.prettyprint.linenums {
  box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}
.prettyprint .linenums li {
  padding-left: 20px;
  color: #bebec5;
  line-height: 20px;
  text-shadow: 0 1px 0 #ffffff;
}
/****************************************************************************************
	Pagination + Rolodex (really similar, propose a fusion)
****************************************************************************************/
/************************ Pagination */
.whp-pagination {
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: 3px;
  margin-bottom: 3px;
}
.whp-pagination li {
  display: inline-block;
  text-align: center;
}
.ie7 .whp-pagination li {
  float: left;
  margin-right: 5px;
}
.whp-pagination li a {
  width: auto;
  padding: 3px 7px 0 7px;
  height: 24px;
  display: inline-block;
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #dee8f1;
  background: linear-gradient(to bottom, #dee8f1 0, #d8e5ee 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
}
.whp-pagination li a:hover {
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #e3edf3;
  background: linear-gradient(to bottom, #e3edf3 0, #e3edf3 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
}
.ie7 .whp-pagination li a:hover,
.ie8 .whp-pagination li a:hover {
  color: #ffffff !important;
}
li.whp-pagination-item-active a {
  border-bottom: 1px solid #f4f8fa;
  background: #84b2ce;
  background: linear-gradient(to bottom, rgba(19, 64, 94, 0.1) 0, rgba(255, 255, 255, 0) 100%);
  color: #578cac;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: inset 0 1px 1px 0 #9fafba, transparent 0 0 0;
}
.ie7 li.whp-pagination-item-active a,
.ie8 li.whp-pagination-item-active a,
.ie9 li.whp-pagination-item-active a {
  color: #ffffff !important;
}
.whp-pagination-first-link {
  margin-right: 12px;
}
.whp-pagination-last-link {
  margin-left: 12px;
}
/************************ Rolodex */
.whp-rolodex {
  list-style: none;
  margin: 0;
  padding: 0;
}
.whp-rolodex li {
  display: inline-block;
  text-align: center;
}
.ie7 .whp-rolodex li {
  display: inline;
  margin-right: 5px;
}
.ie7 .whp-rolodex .whp-float-right {
  float: none !important;
}
.whp-rolodex li a {
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #dee8f1;
  background: linear-gradient(to bottom, #dee8f1 0, #d8e5ee 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
  width: 22px;
  padding-top: 3px;
  height: 24px;
  display: inline-block;
}
.whp-rolodex li:last-child a {
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #dee8f1;
  background: linear-gradient(to bottom, #dee8f1 0, #d8e5ee 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
  width: auto;
  padding: 3px 7px 0 7px;
  height: 24px;
  display: inline-block;
}
/* Align all the alaphabet and the All button into one single line */
.ie7 .whp-rolodex li a {
  width: 21px;
}
/* Hack for Opera, keep the font clean */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .whp-rolodex li a,
  .whp-rolodex li a:active {
    font-weight: 600 !important;
  }
}
.whp-rolodex li a:hover {
  border-radius: 2px;
  background-clip: padding-box;
  border-bottom: 1px solid #a4b5bd;
  background: #e3edf3;
  background: linear-gradient(to bottom, #e3edf3 0, #e3edf3 100%);
  color: #749db9;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: 0 0 2px 2px #bdceda, inset 0 1px 0 0 #f4f8fb;
}
.ie7 .whp-rolodex li a:hover,
.ie8 .whp-rolodex li a:hover {
  color: #ffffff !important;
}
.whp-rolodex li a:active,
.whp-rolodex-active {
  border-bottom: 1px solid #f4f8fa;
  background: #84b2ce;
  background: linear-gradient(to bottom, rgba(19, 64, 94, 0.1) 0, rgba(255, 255, 255, 0) 100%);
  color: #578cac;
  text-shadow: 0 1px 1px #ffffff;
  font-weight: 600;
  box-shadow: inset 0 1px 1px 0 #9fafba, transparent 0 0 0;
  width: 22px;
  padding-top: 3px;
  height: 24px;
  display: inline-block;
}
.whp-rolodex li:last-child {
  border-right: 0;
}
/* Within a data form */
.whp-control-group .whp-rolodex {
  float: left;
  margin-left: 15px;
}
/****************************************************************************************
	Blue arrow at the top + menu when you click on it if applicable
****************************************************************************************/
/************************ Page filter */
.whp-page-filter {
  float: right;
  margin-top: 7px;
  width: 120px;
  font-weight: normal;
  cursor: pointer;
}
.whp-page-filter:after {
  clear: both;
}
.whp-page-filter > span {
  float: left;
  width: 90px;
  overflow: hidden;
  text-align: right;
  color: #3087c4;
}
/* Page filter arrow down */
.whp-page-filter i {
  float: right;
  width: 18px;
  height: 15px;
  margin-left: 10px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px 0px;
}
.whp-page-filter i:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -20px;
}
.whp-page-filter i.whp-hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -40px;
}
/* Page filter arrow up */
.whp-page-filter i.whp-fold {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -20px;
  cursor: pointer;
}
.whp-page-filter i.whp-fold:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px 0px;
}
/************************ Page filter menu */
.whp-page-filter-menu {
  visibility: hidden;
  width: 220px;
  margin-top: 30px;
  margin-left: -18px;
  position: absolute;
  padding-left: 17px;
  padding-right: 17px;
  padding-bottom: 17px;
  z-index: 9999;
  border: 1px solid #bcbcbc;
  background: #f5f5f5;
  background: linear-gradient(to bottom, #f5f5f5 0, #f0f0f0 100%);
  text-align: left;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), transparent 0 0 0;
}
.ie7 .whp-page-filter-menu {
  margin-top: 40px;
}
.whp-page-filter-menu:after,
.whp-page-filter-menu:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.whp-page-filter-menu:after {
  border-bottom-color: #f4f4f4;
  border-width: 10px;
  left: 128px;
  margin-left: -10px;
}
.whp-page-filter-menu:before {
  border-bottom-color: #bcbcbc;
  border-width: 11px;
  left: 128px;
  margin-left: -11px;
}
.whp-page-filter-menu h3 {
  margin-bottom: 8px;
  margin-top: 20px;
  font-weight: bold;
  color: #3e3e3e;
}
.whp-page-filter-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #3e3e3e;
}
.whp-page-filter-menu .whp-control-group {
  padding-left: 0;
}
/* Align span with check box */
.whp-page-filter-menu .whp-control-fluid span {
  padding-top: 0;
}
/****************************************************************************************	
	Map Component
****************************************************************************************/
/************************ Top bar for search and geofence tools */
.whp-map-topbar {
  margin-top: 50px;
  position: fixed;
  height: 54px;
  padding-top: 18px;
  top: 0;
  left: 0;
  z-index: 2001;
  background: url("../img/bckActionsComp.png") 0 0 repeat;
  border-bottom: 1px solid #b5c9d6;
  color: #2e7aa6;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2), transparent 0 0 0;
}
/* Ensure compatiblity with zindex for IE7, link to header and activity stream */
.ie7 .whp-map-topbar {
  z-index: 601;
}
/* Reduce the size of the top bar */
@media (max-height: 800px) {
  .whp-map-topbar {
    padding-top: 5px;
    height: 40px;
  }
}
/* Search form */
/* MQ - Tablet resolution */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .whp-map-topbar-input {
    margin-top: -2px;
    padding: 5px;
    width: 120px;
  }
}
/* MQ - Normal desktop */
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .whp-map-topbar-input {
    margin-top: -2px;
    padding: 5px;
    width: 120px;
  }
}
/* MQ - Large desktop */
@media screen and (min-width: 1200px) and (max-width: 1350px) {
  .whp-map-topbar-input {
    margin-top: -2px;
    padding: 5px;
    width: 170px;
  }
}
/* MQ - Large desktop */
@media screen and (min-width: 1350px) {
  .whp-map-topbar-input {
    margin-top: -2px;
    padding: 5px;
    width: 200px;
  }
}
/* MQ - Large desktop */
@media screen and (min-width: 1510px) {
  .whp-map-topbar-input {
    margin-top: -2px;
    padding: 5px;
    width: 240px;
  }
}
/* MQ - Large desktop */
@media screen and (min-width: 1700px) {
  .whp-map-topbar-input {
    margin-top: -2px;
    padding: 5px;
    width: 280px;
  }
}
.ie7 .whp-map-topbar-input {
  margin-top: -20px;
  margin-right: 5px;
}
.whp-map-topbar-search {
  margin-left: 9px;
  padding: 5px 10px;
}
/* Drop down for suggested locations */
.ie7 .whp-map-topbar .whp-dropdown {
  left: 10px;
  top: 55px;
}
/* Custom drop down for saved geofence */
.whp-map-topbar .whp-custom-dropdown-facade {
  height: 24px;
  width: 219px;
  padding-top: 5px;
  padding-left: 11px;
  margin-left: 15px;
}
.whp-map-topbar .whp-map-dropdown-facade-desc {
  padding-top: 0;
}
.whp-map-topbar .whp-custom-dropdown-list {
  width: 232px;
  height: 221px;
  margin-left: 15px;
}
/* Display a small list when empty or needs to be with dynamic height */
.whp-map-topbar .whp-custom-dropdown-list.whp-empty {
  height: auto;
}
.whp-map-topbar .whp-custom-dropdown-list.whp-empty .whp-custom-dropdown-list-item-label,
.whp-map-topbar .whp-custom-dropdown-list.whp-empty .whp-custom-dropdown-list-item-desc,
.whp-map-topbar .whp-custom-dropdown-list.whp-empty li a:hover {
  background-color: #ffffff;
  cursor: default;
}
.ie7 .whp-map-topbar .whp-custom-dropdown-list {
  width: 232px;
}
.whp-map-topbar .whp-custom-dropdown-list-item-link {
  padding-left: 11px;
  float: left;
  width: 100%;
  height: 100%;
}
.whp-map-topbar .whp-custom-dropdown-list-item-label {
  color: #578cac;
  cursor: pointer;
}
.whp-map-topbar .whp-checkbox[type="checkbox"] {
  margin: 2px 5px 0 0;
}
.whp-map-topbar .whp-custom-dropdown-list-item-desc {
  float: left;
  margin-left: 6px;
  width: 170px;
}
/* MQ - Tablet resolution */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .whp-map-topbar .whp-custom-dropdown-facade {
    width: 160px;
  }
  .whp-map-topbar .whp-custom-dropdown-list {
    width: 173px;
    margin-left: 15px;
  }
  .ie7 .whp-map-topbar .whp-custom-dropdown-list {
    width: 173px;
  }
  .whp-map-topbar .whp-custom-dropdown-list-item-desc {
    width: 105px;
  }
}
/* MQ - Normal desktop */
@media screen and (min-width: 1024px) and (max-width: 1250px) {
  .whp-map-topbar .whp-custom-dropdown-facade {
    width: 225px;
  }
  .whp-map-topbar .whp-custom-dropdown-list {
    width: 238px;
    margin-left: 15px;
  }
  .ie7 .whp-map-topbar .whp-custom-dropdown-list {
    width: 238px;
  }
  .whp-map-topbar .whp-custom-dropdown-list-item-desc {
    width: 170px;
  }
}
/* MQ - Large desktop */
@media screen and (min-width: 1400px) {
  .whp-map-topbar .whp-custom-dropdown-facade {
    width: 330px;
  }
  .whp-map-topbar .whp-custom-dropdown-list {
    width: 343px;
    margin-left: 15px;
  }
  .ie7 .whp-map-topbar .whp-custom-dropdown-list {
    width: 343px;
  }
  .whp-map-topbar .whp-custom-dropdown-list-item-desc {
    width: 275px;
  }
}
/* Icons */
.whp-map-topbar-label {
  float: left;
  margin-top: 8px;
}
/* MQ - Lower than tablet resolution */
@media screen and (min-width: 480px) and (max-width: 768px) {
  .whp-map-topbar-label {
    display: none;
  }
}
/* MQ - Tablet resolution */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .whp-map-topbar-label {
    display: none;
  }
}
/* MQ - Normal desktop */
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .whp-map-topbar-label {
    display: none;
  }
}
/* Separate filter by area from placemark */
.whp-map-placemark {
  margin-right: 20px;
}
.whp-map-topbar-tool {
  width: auto;
}
.whp-map-topbar-tool li {
  margin-top: 0;
}
.whp-map-topbar-tool .whp-toolbar-feature a {
  width: 32px;
  height: 32px;
  border: 1px solid #a4bac9;
  background-color: #e4edf3;
  background: linear-gradient(top, #e4edf3, #d9e5ed);
}
.whp-map-topbar-tool .whp-toolbar-feature a.whp-map-toolbar-separation {
  margin-right: 9px;
}
.whp-map-topbar-tool .whp-toolbar-link a {
  padding-top: 9px;
  height: 23px;
  border: 1px solid #a4bac9;
  background-color: #e4edf3;
  background: linear-gradient(top, #e4edf3, #d9e5ed);
}
.whp-map-topbar-tool .whp-toolbar-feature a.whp-toolbar-active,
.whp-map-topbar-tool .whp-toolbar-link a.whp-toolbar-active {
  border-top: 1px solid #a9bbc8;
  border-left: 1px solid #a9bbc8;
  border-right: 1px solid #a9bbc8;
  border-bottom: 1px solid transparent;
  background-color: rgba(94, 148, 180, 0.1);
  background: linear-gradient(top, rgba(94, 148, 180, 0.1), rgba(102, 157, 189, 0.1));
}
.ie7 .whp-map-topbar-tool .whp-toolbar-feature a.whp-toolbar-active,
.ie7 .whp-map-topbar-tool .whp-toolbar-link a.whp-toolbar-active,
.ie8 .whp-map-topbar-tool .whp-toolbar-feature a.whp-toolbar-active,
.ie8 .whp-map-topbar-tool .whp-toolbar-link a.whp-toolbar-active {
  background: #d0dbe3;
}
.whp-map-icons-geofence {
  width: 20px;
  height: 22px;
  margin-top: 5px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -320px;
}
.whp-map-icons-geofence-circle {
  width: 20px;
  height: 20px;
  margin-top: 5px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -360px;
}
.whp-map-icons-refresh {
  width: 20px;
  height: 20px;
  margin-top: 5px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -280px;
}
/* Display the coloured icon only if Canvas is supported, otherwise displays a coloured rect. */
.canvas .whp-map-icons-geofence-tinted {
  float: left;
  width: 17px;
  height: 17px;
}
.no-canvas .whp-map-icons-geofence-tinted {
  float: left;
  margin: 3px 3px 0px 4px;
  width: 10px;
  height: 10px;
}
.whp-map-icons-manual-zoom {
  float: left;
  width: 18px;
  height: 18px;
  margin-top: 7px;
  margin-left: 7px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -440px;
}
.whp-map-icons-geofence-saved {
  float: left;
  width: 17px;
  height: 17px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -400px;
}
.whp-map-icons-move {
  width: 18px;
  height: 18px;
  margin-top: 6px;
  margin-left: 2px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -360px;
}
.whp-map-icons-cursor {
  width: 11px;
  height: 17px;
  margin-top: 6px;
  margin-left: 3px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -360px;
}
.whp-map-icons-placemark {
  width: 11px;
  height: 18px;
  margin-top: 7px;
  margin-left: 1px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -460px;
}
/* Icons with text */
.whp-map-iconslabel {
  float: left;
  margin-right: 8px;
}
.ie7 .whp-map-iconslabel {
  margin-top: -2px;
}
.whp-map-icons-save {
  float: left;
  width: 13px;
  height: 11px;
  margin-top: 1px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -340px;
}
.whp-map-icons-delete {
  float: left;
  width: 11px;
  height: 11px;
  margin-top: 1px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -340px;
}
/************************ Pintpoints on the map */
.whp-map-pinp-b-asset {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -60px -480px;
}
.whp-map-pinp-b-message {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -120px -480px;
}
.whp-map-pinp-b-event {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -180px -480px;
}
.whp-map-pinp-b-people {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -240px -480px;
}
.whp-map-pinp-b-people-active {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -180px -540px;
}
.whp-map-pinp-b-dist-list {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -300px -480px;
}
.whp-map-pinp-b-geofence {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -480px;
}
.whp-map-pinp-b-contact {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -120px -540px;
}
.whp-map-pinp-b-contact-active {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -240px -540px;
}
.whp-map-pinp-b-group {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -540px;
}
.whp-map-pinp-siren-on {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -220px -600px;
}
.whp-map-pinp-siren-off {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -260px -600px;
}
.whp-map-pinp-refuge-ready {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -260px -660px;
}
.whp-map-pinp-refuge-open {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -180px -660px;
}
.whp-map-pinp-refuge-standby {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -220px -660px;
}
.whp-map-pinp-refuge-activated {
  display: inline-block;
  width: 31px;
  height: 50px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -300px -660px;
}
/************************ Cluster for pinpoint */
.whp-map-pinp-number {
  display: inline;
  padding: 2px 5px 2px 5px;
  height: 18px;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: #3087c4;
  background: linear-gradient(top, #3087c4, #2b7ab1);
  font-weight: 600;
  color: #ffffff;
}
/* Number to be combined with pinpoint */
.whp-map-pinp-indicator .whp-map-pinp-number {
  position: absolute;
  margin-left: 20px;
  margin-top: -10px;
  padding-bottom: 0;
}
/************************ Shows the number of assets, contacts in a small tags */
.whp-map-notification {
  float: right;
  padding: 3px 4px 0 4px;
  height: 16px;
  margin: -1px -1px 0 0;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: #3087c4;
  background: linear-gradient(top, #3087c4, #2b7ab1);
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
}
.whp-map-contact-notification {
  float: right;
  padding: 3px 4px 0 4px;
  height: 16px;
  margin: -1px -1px 0 0;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: #ff4cd7;
  background: linear-gradient(top, #ff4cd7, #e946c5);
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
}
.whp-map-user-notification {
  float: right;
  padding: 3px 4px 0 4px;
  height: 16px;
  margin: -1px -1px 0 0;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: #fbcf02;
  background: linear-gradient(top, #fbcf02, #e9c002);
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
}
.whp-map-distr-notification {
  float: right;
  padding: 3px 4px 0 4px;
  height: 16px;
  margin: -1px -1px 0 0;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: #e43825;
  background: linear-gradient(top, #e43825, #d23322);
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
}
.whp-map-messages-notification {
  float: right;
  padding: 3px 4px 0 4px;
  height: 16px;
  margin: -1px -1px 0 0;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: #04acf0;
  background: linear-gradient(top, #04acf0, #04a0de);
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
}
.whp-map-assets-notification {
  float: right;
  padding: 3px 4px 0 4px;
  height: 16px;
  margin: -1px -1px 0 0;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: #c7c7c7;
  background: linear-gradient(top, #c7c7c7, #b6b6b6);
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
}
.whp-map-events-notification {
  float: right;
  padding: 3px 4px 0 4px;
  height: 16px;
  margin: -1px -1px 0 0;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: #04a650;
  background: linear-gradient(top, #04a650, #049749);
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
}
/************************ Map */
.whp-map-content {
  z-index: 500;
}
.whp-map-tiles {
  margin-left: 430px;
  /* The height will be setup after by a JS, can cause problem with Open Layers */
  height: 1px;
  position: absolute;
  top: 122px;
  bottom: 0;
  left: 0;
  right: 0;
}
.whp-map-tiles.whp-no-margin {
  margin-left: 0;
}
/* Reduce the size of the top bar */
@media (max-height: 800px) {
  .whp-map-tiles {
    top: 96px;
  }
}
/************************ Viewport */
/* 
			Position relative hide the map, IE7 needs a static position to display the map (static not supported) 
			!important clause in use due to inline style	
		*/
.ie7 .olMapViewport {
  position: static !important;
}
/* Ensure a proper render for OSOM account, where the map is in a Fancy Box */
.ie7 .whp-container-map-content .olMapViewport {
  position: relative !important;
}
/************************ Pan Zoom Bar */
#OpenLayers.Control.PanZoomBarWhispir_32.whp-no-margin {
  margin-left: 0;
}
#OpenLayers.Control.PanZoomBarWhispir_32.whp-left-margin {
  margin-left: 460px;
}
/************************ Pan Zoom Bars */
/* Pan zoom bar */
.olControlPanZoomBarWhispir {
  height: 77px;
  width: 77px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -300px;
  position: absolute;
  left: 20px !important;
  top: 20px !important;
  z-index: 1004;
}
/* Within the fullscreen map */
.whp-map-tiles .olControlPanZoomBarWhispir {
  left: 50px !important;
}
.whp-map-panzoombar,
#OpenLayers_Control_PanZoomBarWhispir_ZoombarOpenLayers\.Map_18,
#OpenLayers_Control_PanZoomBarWhispir_ZoombarOpenLayers\.Map_23,
#OpenLayers_Control_PanZoomBarWhispir_ZoombarOpenLayers\.Map_24 {
  left: 35px !important;
  width: 9px !important;
  height: 232px !important;
  position: absolute;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px -280px;
}
.ie7 .whp-map-panzoombar {
  left: 35px !important;
  width: 9px !important;
  height: 232px !important;
  position: absolute;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -480px -280px;
  background-color: transparent!important;
}
#OpenLayers\.Control\.PanZoomBarWhispir_OpenLayers\.Map_24 {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -280px;
  width: 28px;
  height: 22px;
  cursor: pointer;
  left: 25px !important;
}
/************************ Layer controls */
#OpenLayers_Control_MaximizeDiv {
  width: 18px;
  height: 18px;
  top: 5px;
  right: 0;
  border-radius: 1px;
  background-clip: padding-box;
  background-color: #f7f9fa;
  border: 1px solid #ffffff;
  padding: 3px;
  box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.2), transparent 0 0 0;
  z-index: 1005;
}
#OpenLayers_Control_MaximizeDiv:after {
  display: block;
  width: 18px;
  height: 18px;
  content: "";
}
.ie7 #OpenLayers_Control_MaximizeDiv {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"OpenLayers_Control_MaximizeDiv-icon\" );
}
.ie7 .OpenLayers_Control_MaximizeDiv-icon {
  display: block;
  width: 18px;
  height: 16px;
  content: "";
}
#OpenLayers_Control_MinimizeDiv {
  width: 18px;
  height: 16px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -280px;
  top: 5px;
  right: 0;
}
#OpenLayers\.Control\.LayerSwitcher_layersDiv {
  border-radius: 1px;
  background-clip: padding-box;
  background-color: #f7f9fa;
  border: 1px solid #ffffff;
  padding: 3px;
  box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.2), transparent 0 0 0;
  opacity: 1 !important;
}
.olControlLayerSwitcher {
  top: 80px !important;
  right: 20px !important;
}
/************************ Framecloud */
.FramedCloud {
  padding: 20px 0 20px 20px;
}
.FramedCloud a {
  cursor: pointer;
}
/* Overwrite inline style and guarante an inline title with logo */
.whp-bubble-list-title {
  width: 200px!important;
}
/* Button to close the fancybox*/
.olPopupCloseBox {
  cursor: pointer;
}
.olPopupCloseBox:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -120px -260px;
  display: block;
  width: 16px;
  height: 16px;
  content: "";
  margin: 10px;
  right: 0;
  position: absolute;
}
.ie7 .olPopupCloseBox {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olPopupCloseBox-icon\" );
}
.ie7 .olPopupCloseBox-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -120px -260px;
  display: block;
  width: 16px;
  height: 16px;
  content: "";
  margin: 10px;
  right: 0;
  position: absolute;
}
.olNavBubbleNext {
  display: block;
  width: 14px;
  height: 18px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -200px;
}
.olNavBubblePrev {
  display: block;
  width: 14px;
  height: 18px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -220px;
}
.olNavBubbleNextOff {
  display: block;
  width: 14px;
  height: 18px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -160px;
}
.olNavBubblePrevOff {
  display: block;
  width: 14px;
  height: 18px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -180px;
}
.whp-bubble-icon-asset {
  float: left;
  margin-right: 5px;
  width: 13px;
  height: 11px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -500px;
}
.whp-bubble-icon-message {
  float: left;
  margin-right: 5px;
  width: 13px;
  height: 10px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -500px;
}
.whp-bubble-icon-event {
  float: left;
  margin-right: 5px;
  width: 13px;
  height: 12px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -500px;
}
.whp-bubble-icon-people {
  float: left;
  margin-right: 5px;
  width: 13px;
  height: 13px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -520px;
}
.whp-bubble-icon-people-active {
  float: left;
  margin-right: 5px;
  width: 15px;
  height: 13px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -540px;
}
.whp-bubble-icon-distlist {
  float: left;
  margin-right: 5px;
  width: 17px;
  height: 13px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -520px;
}
.whp-bubble-icon-geofence {
  float: left;
  margin-right: 5px;
  width: 17px;
  height: 17px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -520px;
}
.whp-bubble-icon-contact {
  float: left;
  margin-right: 5px;
  width: 13px;
  height: 11px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -540px;
}
.whp-bubble-icon-contact-active {
  float: left;
  margin-right: 5px;
  width: 18px;
  height: 13px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -540px;
}
/************************ Sidebar */
.whp-map-sidebar {
  position: fixed;
  padding: 19px 10px 0 10px;
  margin-top: 122px;
  height: 100%;
  width: 410px;
  top: 0;
  left: 0;
  z-index: 2000;
  background-color: #f0f0f0;
  box-shadow: 1px 0px 10px 0px rgba(86, 86, 86, 0.15), transparent 0 0 0;
}
/* Ensure compatiblity with zindex for IE7, link to header and activity stream */
.ie7 .whp-map-sidebar {
  z-index: 600;
}
/* Filter Header */
.whp-map-sidebar-list-header {
  background-color: #f4f4f4;
}
/* The header doesn't need to have a specific back when hovering */
.whp-map-siderbar-list-item.whp-map-sidebar-list-header:hover {
  background-color: #f4f4f4;
}
.whp-map-sidebar-list-header span {
  color: #575757;
  text-shadow: 0 1px 1px #FFF;
  font-weight: bold;
}
/* Filter */
.whp-map-sidebar-filter {
  width: 390px;
  margin-top: 35px;
  margin-left: 352px;
  position: absolute;
  padding: 17px;
  z-index: 9999;
  color: #578cac;
  border: 1px solid #b5c9d6;
  background: url("../img/bckActionsComp.png") 0 0 repeat;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), transparent 0 0 0;
  text-shadow: 0 1px 1px #ffffff;
}
.ie7 .whp-map-sidebar-filter {
  margin-left: -40px;
}
.whp-map-sidebar-filter:after,
.whp-map-sidebar-filter:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.whp-map-sidebar-filter:after {
  left: 20px;
  margin-left: -10px;
  border-bottom-color: #b5c9d6;
  border-width: 10px;
}
.whp-map-sidebar-filter:before {
  left: 20px;
  margin-left: -11px;
  border-bottom-color: #b5c9d6;
  border-width: 11px;
}
/* Reduce the size of the top bar */
@media (max-height: 800px) {
  .whp-map-sidebar {
    margin-top: 96px;
  }
}
/* Tab mennu for the map sidebar */
.whp-map-tab-menu {
  position: relative;
  padding-left: 0;
  list-style: none;
}
.ie7 .whp-map-tab-menu {
  float: left;
}
.ie7 .whp-map-tab-menu:after {
  clear: both;
}
.ie7 .whp-map-tab-menu:before,
.whp-map-tab-menu:after {
  content: "";
  display: table;
}
.whp-map-tab-menu-item {
  float: left;
  margin-right: 3px;
  width: 64px;
  height: 73px;
  border-top: 1px solid #fcfcfc;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 3px;
  background-clip: padding-box;
  background-color: #f5f5f5;
  background: linear-gradient(top, #f5f5f5, #ededed);
  box-shadow: 0px 0px 3px 0px rgba(170, 170, 170, 0.4), transparent 0 0 0;
  cursor: pointer;
}
.ie7 .whp-map-tab-menu-item {
  float: left;
  margin-right: 2px;
}
.whp-map-tab-menu-item.whp-active {
  background: none;
  background-color: #ffffff;
  cursor: default;
}
.whp-map-tab-menu-item-desc {
  display: block;
  margin-top: 45px;
  height: 25px;
  text-align: center;
  line-height: 1.2em;
}
.whp-map-tab-clipper {
  position: absolute;
  height: 5px;
  width: 64px;
  z-index: 500;
  background-color: #ffffff;
}
.ie7 .whp-map-tab-clipper {
  display: none;
}
/* Tab filter for the map sidebar */
.whp-map-tab-filter {
  padding-bottom: 18px;
  border-bottom: 1px solid #e4e4e4;
}
.whp-map-tab-filter .whp-add-field {
  float: none;
  display: inline-block;
}
/* Tab content for the map sidebar */
.whp-map-tab-content {
  position: relative;
  margin-top: -1px;
  padding: 20px 10px 10px 10px;
  background-color: #ffffff;
  box-shadow: 0px 0px 3px 0px rgba(170, 170, 170, 0.4), transparent 0 0 0;
}
/* Setup margin left for custom scrollbar */
.whp-map-tab-content .whp-custom-scrollbar {
  margin-bottom: 10px;
}
.whp-map-tab-content .whp-custom-scrollbar .scrollbar {
  margin-left: 380px;
}
/* Keep alignement consistent with Fitler */
.whp-map-tab-content .whp-control-group {
  margin-top: 7px;
  padding-left: 0;
}
/* Icon for the tab within the map sidebar */
.whp-map-icons-user {
  display: block;
  position: absolute;
  width: 21px;
  height: 20px;
  margin: 21px 0 0 21px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -380px;
}
.whp-map-icons-contact {
  display: block;
  position: absolute;
  width: 26px;
  height: 21px;
  margin: 21px 0 0 19px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -560px;
}
.whp-map-icons-dist-list {
  display: block;
  position: absolute;
  width: 27px;
  height: 21px;
  margin: 20px 0 0 19px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -460px;
}
.whp-map-icons-asset {
  display: block;
  position: absolute;
  width: 26px;
  height: 20px;
  margin: 21px 0 0 19px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -380px;
}
.whp-map-icons-message {
  display: block;
  position: absolute;
  width: 26px;
  height: 19px;
  margin: 21px 0 0 19px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -400px;
}
.whp-map-icons-event {
  display: block;
  position: absolute;
  width: 24px;
  height: 22px;
  margin: 21px 0 0 20px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -420px;
}
/* icons in the map filter tags */
.whp-map-filter-icons-user {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -600px;
  margin: 0 4px 0 0;
}
.whp-map-filter-icons-contact {
  display: inline-block;
  width: 13px;
  height: 11px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -460px -600px;
  margin: 0 4px 0 0;
}
.whp-map-filter-icons-dist-list {
  display: inline-block;
  width: 17px;
  height: 13px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -440px -600px;
  margin: 0 4px 0 0;
}
/* List within the tab */
.whp-map-siderbar-list {
  padding-left: 0;
  margin-bottom: 19px;
  list-style: none;
}
.whp-map-siderbar-list-item {
  display: block;
  padding: 12px 0 14px 9px;
  border-bottom: 1px solid #e4e4e4;
  color: #3087c4;
}
.whp-map-siderbar-list-item:hover {
  background-color: #e0e7ec;
}
/* Sidebar open or close */
.whp-map-sidebar-openclose {
  position: absolute;
  margin-left: 420px;
  margin-top: 5px;
  padding: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  background-clip: padding-box;
  background-color: #f0f0f0;
  box-shadow: 5px 0px 10px 0px rgba(86, 86, 86, 0.15), transparent 0 0 0;
  cursor: pointer;
}
.whp-map-icons-close {
  display: block;
  width: 14px;
  height: 18px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -180px;
}
.whp-map-icons-close:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -220px;
}
.whp-map-icons-open {
  display: block;
  width: 14px;
  height: 18px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -160px;
}
.whp-map-icons-open:hover {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -200px;
}
/* Animation of the sidebar */
/* Open */
.whp-map-sidebar-anim-open {
  animation: whp-ANIM-mapSidebarOpen 0.5s;
  -webkit-animation: whp-ANIM-mapSidebarOpen 0.5s;
  -ms-animation: whp-ANIM-mapSidebarOpen 0.5s;
  -o-animation: whp-ANIM-mapSidebarOpen 0.5s;
  animation-fill-mode: forwards;
}
@keyframes whp-ANIM-mapSidebarOpen {
  0% {
    transform: translate(-430px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes whp-ANIM-mapSidebarOpen {
  0% {
    -ms-transform: translate(-430px, 0);
  }
  100% {
    -ms-transform: translate(0, 0);
  }
}
/* Close */
.whp-map-sidebar-anim-close {
  animation: whp-ANIM-mapSidebarClose 0.5s;
  -webkit-animation: whp-ANIM-mapSidebarClose 0.5s;
  -ms-animation: whp-ANIM-mapSidebarClose 0.5s;
  -o-animation: whp-ANIM-mapSidebarClose 0.5s;
  animation-fill-mode: forwards;
}
@keyframes whp-ANIM-mapSidebarClose {
  100% {
    transform: translate(-430px, 0);
  }
}
/****************************************************************************************	
	Map within a Fancy Box
****************************************************************************************/
/************************ Icon */
/* Toolbox for each Icon */
.whp-openlayers-icons-bck {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
}
.whp-openlayers-icons-bck-active {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
}
div.olControlPanel,
#labelDetails,
#searchForm {
  border-radius: 1px;
  background-clip: padding-box;
  background-color: #f7f9fa;
  border: 1px solid #ffffff;
  padding: 3px;
  box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.2), transparent 0 0 0;
  z-index: 4000;
}
div.olControlPanel {
  top: 23px;
  left: 130px;
}
/* Hand */
/* Gradient button open layers button */
.whp-gradient-openlayers-container-active {
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlMouseDefaultsItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
  margin-left: 0;
}
.olControlPanel .olControlMouseDefaultsItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
  margin-left: 0;
}
.olControlMouseDefaultsItemActive:after,
.olControlPanel .olControlMouseDefaultsItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -220px -280px;
  display: block;
  width: 12px;
  height: 13px;
  content: "";
  margin-left: 6px;
  margin-top: 6px;
}
.ie7 .olControlMouseDefaultsItemActive,
.ie7 .olControlPanel .olControlMouseDefaultsItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlMouseDefaultsItem-icon\" );
}
.ie7 .olControlMouseDefaultsItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -220px -280px;
  display: block;
  width: 12px;
  height: 13px;
  content: "";
  margin-left: 6px;
  margin-top: 6px;
}
/* Zoom */
.olControlPanel .olControlZoomtoBoxItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlZoomtoBoxItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlZoomtoBoxItemActive:after,
.olControlPanel .olControlZoomtoBoxItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -240px -280px;
  display: block;
  width: 14px;
  height: 14px;
  content: "";
  margin-left: 5px;
  margin-top: 6px;
}
.olHandlerBoxZoomBox {
  border: 2px solid #ff8a00;
  background-color: #ffffff;
  opacity: 0.50;
  filter: alpha(opacity=50);
  cursor: crosshair;
}
.ie7 .olControlZoomtoBoxItemActive,
.ie7 .olControlPanel .olControlZoomtoBoxItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlZoomtoBoxItem-icon\" );
}
.ie7 .olControlZoomtoBoxItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -240px -280px;
  display: block;
  width: 14px;
  height: 14px;
  content: "";
  margin-left: 5px;
  margin-top: 5px;
}
/* Draw Feature */
.olControlPanel .olControlDrawFeatureItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlDrawFeatureItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlDrawFeatureItemActive:after,
.olControlPanel .olControlDrawFeatureItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -260px -280px;
  display: block;
  width: 17px;
  height: 17px;
  content: "";
  margin-left: 3px;
  margin-top: 4px;
}
.ie7 .olControlDrawFeatureItemActive,
.ie7 .olControlPanel .olControlDrawFeatureItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlDrawFeatureItem-icon\" );
}
.ie7 .olControlDrawFeatureItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -260px -280px;
  display: block;
  width: 17px;
  height: 17px;
  content: "";
  margin-left: 3px;
  margin-top: 4px;
}
/* Draw Circle */
.olControlPanel .olControlDrawCircleFeatureItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlDrawCircleFeatureItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlDrawCircleFeatureItemActive:after,
.olControlPanel .olControlDrawCircleFeatureItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -280px -280px;
  display: block;
  width: 13px;
  height: 14px;
  content: "";
  margin-left: 5px;
  margin-top: 6px;
}
.ie7 .olControlDrawCircleFeatureItemActive,
.ie7 .olControlPanel .olControlDrawCircleFeatureItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlDrawCircleFeatureItem-icon\" );
}
.ie7 .olControlDrawCircleFeatureItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -280px -280px;
  display: block;
  width: 13px;
  height: 14px;
  content: "";
  margin-left: 5px;
  margin-top: 6px;
}
/* Drag Feature */
.olControlPanel .olControlDragFeatureItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlDragFeatureItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlDragFeatureItemActive:after,
.olControlPanel .olControlDragFeatureItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -300px -280px;
  display: block;
  width: 14px;
  height: 14px;
  content: "";
  margin-left: 5px;
  margin-top: 6px;
}
.ie7 .olControlDragFeatureItemActive,
.ie7 .olControlPanel .olControlDragFeatureItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlDragFeatureItem-icon\" );
}
.ie7 .olControlDragFeatureItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -300px -280px;
  display: block;
  width: 14px;
  height: 14px;
  content: "";
  margin-left: 5px;
  margin-top: 6px;
}
/* Modify Feature */
.olControlPanel .olControlModifyFeatureItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlModifyFeatureItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlModifyFeatureItemActive:after,
.olControlPanel .olControlModifyFeatureItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -280px;
  display: block;
  width: 9px;
  height: 15px;
  content: "";
  margin-left: 8px;
  margin-top: 4px;
}
.ie7 .olControlModifyFeatureItemActive,
.ie7 .olControlPanel .olControlModifyFeatureItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlModifyFeatureItem-icon\" );
}
.ie7 .olControlModifyFeatureItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -320px -280px;
  display: block;
  width: 9px;
  height: 15px;
  content: "";
  margin-left: 8px;
  margin-top: 4px;
}
/* Delete Selected */
.olControlPanel .olControlDeleteSelectedItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlDeleteSelectedItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlDeleteSelectedItemActive:after,
.olControlPanel .olControlDeleteSelectedItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -280px;
  display: block;
  width: 12px;
  height: 13px;
  content: "";
  margin-left: 6px;
  margin-top: 6px;
}
.ie7 .olControlDeleteSelectedItemActive,
.ie7 .olControlPanel .olControlDeleteSelectedItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlDeleteSelectedItem-icon\" );
}
.ie7 .olControlDeleteSelectedItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -380px -280px;
  display: block;
  width: 12px;
  height: 13px;
  content: "";
  margin-left: 6px;
  margin-top: 6px;
}
/* Show search item */
.olControlPanel .olControlShowSearchItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlShowSearchItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlShowSearchItemActive:after,
.olControlPanel .olControlShowSearchItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -280px;
  display: block;
  width: 14px;
  height: 14px;
  content: "";
  margin-left: 6px;
  margin-top: 6px;
}
.ie7 .olControlShowSearchItemActive,
.ie7 .olControlPanel .olControlShowSearchItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlShowSearchItem-icon\" );
}
.ie7 .olControlShowSearchItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -340px -280px;
  display: block;
  width: 14px;
  height: 14px;
  content: "";
  margin-left: 6px;
  margin-top: 6px;
}
/* Show Pin */
.olControlPanel .olControlShowPinItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlShowPinItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlShowPinItemActive:after,
.olControlPanel .olControlShowPinItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -280px;
  display: block;
  width: 9px;
  height: 14px;
  content: "";
  margin-left: 8px;
  margin-top: 6px;
}
.ie7 .olControlShowPinItemActive,
.ie7 .olControlPanel .olControlShowPinItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlShowPinItem-icon\" );
}
.ie7 .olControlShowPinItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -360px -280px;
  display: block;
  width: 9px;
  height: 14px;
  content: "";
  margin-left: 8px;
  margin-top: 6px;
}
/* Save Label */
.olControlPanel .olControlSaveLabelItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlSaveLabelItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlSaveLabelItemActive:after,
.olControlPanel .olControlSaveLabelItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -280px;
  display: block;
  width: 15px;
  height: 13px;
  content: "";
  margin-left: 5px;
  margin-top: 6px;
}
.ie7 .olControlSaveLabelItemActive,
.ie7 .olControlPanel .olControlSaveLabelItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlSaveLabelItem-icon\" );
}
.ie7 .olControlSaveLabelItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -280px;
  display: block;
  width: 15px;
  height: 13px;
  content: "";
  margin-left: 5px;
  margin-top: 6px;
}
/* Radar */
.olControlPanel .olControlSearchFormItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlSearchFormItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlSearchFormItemActive:after,
.olControlPanel .olControlSearchFormItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -300px;
  display: block;
  width: 15px;
  height: 15px;
  content: "";
  margin-left: 5px;
  margin-top: 5px;
}
.ie7 .olControlSearchFormItemActive,
.ie7 .olControlPanel .olControlSearchFormItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlSearchFormItem-icon\" );
}
.ie7 .olControlSearchFormItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -300px;
  display: block;
  width: 15px;
  height: 15px;
  content: "";
  margin-left: 5px;
  margin-top: 5px;
}
/* Filter */
.olControlPanel .olControlLoadListsItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlLoadListsItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlLoadListsItemActive:after,
.olControlPanel .olControlLoadListsItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -320px;
  display: block;
  width: 13px;
  height: 10px;
  content: "";
  margin-left: 6px;
  margin-top: 8px;
}
.ie7 .olControlLoadListsItemActive,
.ie7 .olControlPanel .olControlLoadListsItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlLoadListsItem-icon\" );
}
.ie7 .olControlLoadListsItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -320px;
  display: block;
  width: 13px;
  height: 10px;
  content: "";
  margin-left: 6px;
  margin-top: 8px;
}
/* Message */
.olControlPanel .olControlSendMessageItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlSendMessageItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlSendMessageItemActive:after,
.olControlPanel .olControlSendMessageItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -300px;
  display: block;
  width: 12px;
  height: 8px;
  content: "";
  margin-left: 7px;
  margin-top: 9px;
}
.ie7 .olControlSendMessageItemActive,
.ie7 .olControlPanel .olControlSendMessageItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlSendMessageItem-icon\" );
}
.ie7 .olControlSendMessageItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -420px -300px;
  display: block;
  width: 12px;
  height: 8px;
  content: "";
  margin-left: 7px;
  margin-top: 9px;
}
/* Information */
.olControlPanel .olControlInfoItemActive {
  border: 0;
  box-shadow: 0 1px 1px #c1c6ca inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-top: 1px;
  margin-left: 5px;
  background: #e0e6ea;
  background: linear-gradient(to bottom, #e0e6ea 0, #f2f4f6 100%);
}
.olControlPanel .olControlInfoItemInactive {
  border-left: 1px solid #d8e2e7;
  border-right: 1px solid #d8e2e7;
  border-top: 1px solid #dae2e8;
  border-bottom: 1px solid #bec7cd;
  box-shadow: 0 1px 1px #ffffff inset, transparent 0 0 0;
  cursor: pointer;
  width: 25px;
  height: 27px;
  float: left;
  border-radius: 3px;
  background-clip: padding-box;
  margin-left: 4px;
  background: #eff3f5;
  background: linear-gradient(to bottom, #eff3f5 0, #e8eef1 100%);
}
.olControlPanel .olControlInfoItemActive:after,
.olControlPanel .olControlInfoItemInactive:after {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -320px;
  display: block;
  width: 7px;
  height: 15px;
  content: "";
  margin-left: 9px;
  margin-top: 5px;
}
.ie7 .olControlInfoItemActive,
.ie7 .olControlPanel .olControlInfoItemInactive {
  zoom: expression( this.runtimeStyle.zoom=\"1\", this.insertBefore( document.createElement(\"i\"), this.firstChild).className=\"olControlInfoItem-icon\" );
}
.ie7 .olControlInfoItem-icon {
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -400px -320px;
  display: block;
  width: 7px;
  height: 15px;
  content: "";
  margin-left: 9px;
  margin-top: 5px;
}
/************************ Structure to render a map with search pannel */
.whp-container-map .whp-container-map-search {
  float: left;
  margin-right: -100%;
  width: 250px;
}
/* Maintain the focus opertional, avoid overlaping */
.ie7 .whp-container-map .whp-container-map-search {
  position: relative;
}
.whp-container-map .whp-container-map-search .whp-select-multiple {
  height: 180px !important;
}
.whp-container-map .whp-container-map-search .whp-column4 {
  width: auto !important;
  margin-left: 0 !important;
  float: none !important;
  height: 507px;
}
#mapTablesearchDiv {
  height: 473px;
}
.whp-container-map .whp-container-map-content {
  width: 100%;
}
.whp-container-map .whp-container-map-content input {
  float: none;
}
.whp-container-map .whp-container-map-content .whp-container-form {
  margin-left: 250px;
  overflow: hidden;
  height: 547px;
  padding: 0;
}
.ie7 .whp-container-map .whp-container-map-content .olControlLayerSwitcher,
.ie8 .whp-container-map .whp-container-map-content .olControlLayerSwitcher {
  top: 50px !important;
}
.whp-fullscreen.whp-container-map .whp-container-map-content .whp-container-form {
  margin-left: 0;
}
.ie7 .whp-fullscreen.whp-container-map .whp-container-map-content .whp-container-form,
.ie8 .whp-fullscreen.whp-container-map .whp-container-map-content .whp-container-form {
  margin-left: 0 !important;
}
/****************************************************************************************	
	Wizard
****************************************************************************************/
.whp-wizard-list {
  padding: 0;
  margin-bottom: 10px;
  list-style: none;
}
.ie7 .whp-wizard-list {
  padding-bottom: 20px;
}
.whp-wizard-list:after {
  clear: both;
}
.whp-wizard-list:before,
.whp-wizard-list:after {
  content: "";
  display: table;
}
.whp-wizard-step {
  display: inline;
  list-style-type: none;
}
.whp-wizard-part {
  float: left;
  height: 59px;
}
.whp-wizard-title {
  margin-top: 7px;
  width: 90px;
  display: block;
  font-weight: 600;
}
.whp-wizard-desc {
  display: block;
  font-weight: 600;
}
.whp-wizard-back {
  width: 16px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -240px -380px;
}
.whp-wizard-middle {
  padding: 0 15px 0 14px;
  background-image: url('../img/bckWizardUnselected.png');
  background-repeat: repeat;
}
.whp-wizard-point {
  background-image: url('../img/bckWizardUnselected.png');
  background-repeat: repeat;
}
.whp-wizard-first .whp-wizard-back {
  width: 6px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -160px -380px;
}
.whp-wizard-last .whp-wizard-point {
  width: 16px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -280px -380px;
}
/* When an item is selected */
.whp-wizard-selected {
  color: #48748f;
}
.whp-wizard-selected.whp-wizard-first .whp-wizard-back {
  width: 6px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -180px -380px;
}
.whp-wizard-selected.whp-wizard-last .whp-wizard-point {
  width: 16px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -260px -380px;
}
.whp-wizard-selected .whp-wizard-back {
  width: 16px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -200px -380px;
}
.whp-wizard-selected .whp-wizard-middle {
  background-image: url('../img/bckWizardSelected.png');
  background-repeat: repeat;
}
.whp-wizard-next-selected .whp-wizard-back {
  width: 16px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -220px -380px;
}
/* Valid step */
.whp-wizard-valid i {
  margin-top: 7px;
}
.ie7 .whp-wizard-valid i {
  margin-top: -12px;
}
/****************************************************************************************
	Drag And Drop area
****************************************************************************************/
/* drop zone */
#whp-fileupload-dropzone {
  position: relative;
  height: 482px;
  border: 2px dashed #d8e5ee;
  border-radius: 5px;
  background-clip: padding-box;
  background-color: #f7fafc;
  color: #4b7a96;
  text-align: center;
  font-weight: bold;
}
#whp-fileupload-dropzone span {
  display: block;
  margin-bottom: 12px;
}
#whp-fileupload-dropzone input {
  width: auto;
}
#whp-fileupload-image {
  z-index: 999;
}
.whp-fileupload-content {
  padding: 120px;
}
.whp-fileupload-content .whp-progressbar-box {
  width: 336px;
  height: 16px;
  display: inline-block;
  overflow: hidden;
}
/* upload image icon */
.whp-fileupload-icon-image {
  width: 83px;
  height: 89px;
  margin: 0 auto 15px;
  display: block;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -60px -380px;
}
.whp-fileupload-icon-file {
  width: 83px;
  height: 89px;
  margin: 0 auto 15px;
  display: block;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -300px -380px;
}
/****************************************************************************************
	Blue tags
****************************************************************************************/
.whp-blue-tag-box {
  padding: 9px;
  height: 150px;
  border: 1px solid #b5c9d6;
  background-color: #ffffff;
}
.whp-blue-tag-contact {
  display: inline-block;
  margin-top: 5px;
  margin-right: 3px;
  padding: 5px;
  border: 1px solid #6289a4;
  border-radius: 2px;
  background-clip: padding-box;
  background-color: #d1dfe9;
  background: linear-gradient(top, #d1dfe9, #c0d3df);
  color: #6188a3;
  box-shadow: inset 0px 1px 1px 1px #dae5ed;
}
.whp-blue-tag-contact .whp-tag-icon-close {
  display: inline-block;
  margin-left: 3px;
  width: 10px;
  height: 11px;
  background: url("../img/mainSprite.png") no-repeat;
  background-position: -160px -200px;
}
/************************ Color Palette / Color Picker */
/* Similar of toolbar-menu, especially adapted for colour palette */
.whp-color-palette {
  width: auto;
  margin-top: 15px;
  margin-left: -13px;
  padding: 5px;
  position: absolute;
  border: 1px solid #6188a3;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: #ffffff;
  box-shadow: 0 5px 10px 5px #e3e3e3, transparent 0 0 0;
}
/* fix for ie7 */
.ie7 .whp-color-palette {
  width: 82px;
}
.ie7 .whp-color-palette-item {
  float: left;
  margin-bottom: 1px;
}
/* fix for the new message page position */
.whp-toolbar-feature .whp-color-palette {
  margin-left: -6px;
  margin-top: 10px;
}
/* fix for ie7 new message page color palette */
.ie7 .whp-toolbar-feature .whp-color-palette {
  margin-left: -30px;
}
.whp-color-palette:after,
.whp-color-palette:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  clear: both;
}
.whp-color-palette:after {
  left: 18px;
  margin-left: -10px;
  border-bottom-color: #ffffff;
  border-width: 10px;
}
.whp-color-palette:before {
  border-bottom-color: #6188a3;
  border-width: 11px;
  left: 18px;
  margin-left: -11px;
}
.whp-color-palette ul {
  margin: 0 0 1px 0;
  padding: 0;
  list-style: none;
  line-height: 0;
}
/* fix for ie7 */
.ie7 .whp-color-palette > ul {
  height: inherit;
}
/* fix the new message page color palette */
.whp-color-palette li {
  margin-top: 0;
}
.whp-color-palette-item {
  width: 15px;
  height: 15px;
  display: inline-block;
  margin-left: 1px;
}
.whp-color-palette-item:first-of-type {
  margin-left: 0;
}
.whp-color-palette-item:hover {
  cursor: pointer;
}
/* Small square to open the color palette - JS depedencies, thus named not normalized */
#tagColour {
  display: none;
}
#tagColourPicker {
  float: left;
}
/* rename the pickrDiv class to make the namespace more consistent with the standards*/
#pickerDiv,
.whp-color-pickerbox {
  width: 12px;
  height: 12px;
  margin-top: 3px;
  display: block;
  line-height: 0;
  border: 1px solid #575757;
  background: #fefefe;
  cursor: pointer;
}
.whp-bg-active {
  background-color: #ecf5e4;
}
.whp-table > tbody > tr.whp-bg-active > td,
.whp-table > tbody > tr.whp-bg-active > th,
.whp-table > tbody > tr > td.whp-bg-active,
.whp-table > tbody > tr > th.whp-bg-active,
.whp-table > tfoot > tr.whp-bg-active > td,
.whp-table > tfoot > tr.whp-bg-active > th,
.whp-table > tfoot > tr > td.whp-bg-active,
.whp-table > tfoot > tr > th.whp-bg-active,
.whp-table > thead > tr.whp-bg-active > td,
.whp-table > thead > tr.whp-bg-active > th,
.whp-table > thead > tr > td.whp-bg-active,
.whp-table > thead > tr > th.whp-bg-active {
  background-color: #ecf5e4;
}
/****************************************************************************************
    Tooltip: when user does a search
****************************************************************************************/
/************************ Floating Notification */
.whp-tooltip-notification {
  position: absolute;
  margin: 10px;
  height: auto;
  top: 20px;
  padding: 15px;
  left: 50%;
  z-index: 4800;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  background-clip: padding-box;
  border: 1px solid #578cac;
  background-color: #cbdfe9;
  color: #3c6a7e;
  box-shadow: 0px 2px 15px rgba(50, 50, 50, 0.25), transparent 0 0 0;
  box-shadow: 0px 2px 15px rgba(50, 50, 50, 0.25);
  text-shadow: 0 1px #ffffff;
}
.whp-tooltip-text {
  padding-top: 5px;
}
.whp-tooltip-action {
  text-align: right;
}
@media only screen and (min-width: 1200px) {
  .whp-tooltip-notification {
    width: 650px;
    margin-left: -325px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .whp-tooltip-notification {
    width: 500px;
    margin-left: -250px;
  }
}
@media only screen and (max-width: 992px) {
  .whp-tooltip-notification {
    width: 500px;
    margin-left: -250px;
  }
}
@media only screen and (max-width: 780px) {
  .whp-tooltip-notification {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    left: 0;
  }
  .whp-tooltip-action {
    text-align: left;
  }
}
@media only screen and (max-width: 480px) {
  .whp-tooltip-notification {
    width: 80%;
    margin-left: 5%;
    margin-right: 5%;
    left: 0;
  }
  .whp-tooltip-action {
    text-align: left;
  }
}
/****** tooltip box ************/
.tooltip {
  position: absolute;
  z-index: 6000;
  display: block;
  visibility: visible;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  filter: alpha(opacity=0);
}
.tooltip.in {
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.tooltip.top {
  margin-top: -3px;
  padding: 5px 0;
}
.tooltip.right {
  margin-left: 3px;
  padding: 0 5px;
}
.tooltip.bottom {
  margin-top: 3px;
  padding: 5px 0;
}
.tooltip.left {
  margin-left: -3px;
  padding: 0 5px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 5px 8px;
  color: #000000;
  /*text-align: center;*/
  text-decoration: none;
  background-color: #fff18f;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #fff18f;
}
.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  left: 5px;
  border-width: 5px 5px 0;
  border-top-color: #fff18f;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  right: 5px;
  border-width: 5px 5px 0;
  border-top-color: #fff18f;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #fff18f;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #fff18f;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #fff18f;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  left: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #fff18f;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  right: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #fff18f;
}
.whp-tooltip-black {
  display: none;
  position: absolute;
  width: 210px;
  top: 0px;
  left: 0px;
  padding: 20px;
  border-radius: 10px;
  background-image: url(../img/tooltip-bg.png );
  color: #FFF;
  font-size: 12px;
  font-weight: normal;
}
.whp-tooltip-black.whp-top-arrow:after,
.whp-tooltip-black.whp-bottom-arrow:after,
.whp-tooltip-black.whp-left-arrow:after,
.whp-tooltip-black.whp-right-arrow:after,
.whp-tooltip-black.whp-top-right-arrow:after,
.whp-tooltip-black.whp-top-left-arrow:after {
  content: '';
  position: absolute;
  border-style: solid;
  opacity: 0.75;
  display: block;
  width: 0;
}
.whp-tooltip-black.whp-top-arrow:after {
  border-color: #000 transparent;
  border-width: 0 10px 10px;
  top: -10px;
  left: 50%;
  margin-left: -10px;
}
.whp-tooltip-black.whp-top-right-arrow:after {
  border-color: #000 transparent;
  border-width: 0 10px 10px;
  top: -10px;
  left: 85%;
  margin-left: -10px;
}
.whp-tooltip-black.whp-top-left-arrow:after {
  border-color: #000 transparent;
  border-width: 0 10px 10px;
  top: -10px;
  left: 15%;
  margin-left: -10px;
}
.whp-tooltip-black.whp-bottom-arrow:after {
  border-color: #000 transparent;
  border-width: 10px 10px 0;
  width: 0;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
}
.whp-tooltip-black.whp-left-arrow:after {
  border-width: 10px 10px 10px 0;
  border-color: transparent #000;
  left: -10px;
  top: 50%;
  margin-top: -10px;
}
.whp-tooltip-black.whp-right-arrow:after {
  border-width: 10px 0px 10px 10px;
  border-color: transparent #000;
  right: -10px;
  top: 50%;
  margin-top: -10px;
}
/****************************************************************************************
	Contextual Help (Video tutorials)
****************************************************************************************/
.whp-column8 {
  position: relative;
}
.whp-video-link {
  position: absolute;
  right: 0px;
  top: 30px;
  padding: 3px 0 3px 30px;
  cursor: pointer;
}
.whp-video-link .whp-tooltip-black {
  display: none;
  opacity: 0;
  cursor: default;
  top: 35px;
  left: -120px;
  text-align: center;
}
.whp-video-link .whp-tooltip-black p {
  margin-bottom: 10px;
}
#vimeoVid {
  margin-bottom: 10px;
}
.whp-video-tutorial p {
  margin-bottom: 10px;
}
/****************************************************************************************
	walkthrough
****************************************************************************************/
.whp-walkthrough-container {
  background-color: rgba(255, 255, 255, 0.8);
  display: block;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 0;
  z-index: 99999;
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 11%, #ffffff 26%, #ffffff 28%, #ffffff 76%, rgba(255, 255, 255, 0.7) 89%, rgba(255, 255, 255, 0) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=0);
  /* IE6-9 */
}
.whp-walkthrough-content {
  display: block;
  line-height: 1em;
  margin: 10% auto;
  opacity: 1;
  width: 770px;
  z-index: 100;
  color: #000000;
  font-weight: normal;
}
.whp-walkthrough-title {
  font-size: 3em;
  line-height: 1.5;
  margin-bottom: 15px;
}
.whp-walkthrough-text {
  font-size: 1.5em;
  margin-bottom: 15px;
  line-height: 1.3;
}
.whp-walkthrough-header {
  text-align: center;
  padding-bottom: 20px;
}
.whp-walkthrough-intro {
  width: 500px;
  margin: 0 auto;
  color: #777777;
}
.whp-walkthrough-steps {
  display: block;
  /*  height: 200px;
  margin-bottom: 20px;*/
}
.whp-walkthrough-steps ul {
  display: inline-block;
  padding: 0;
  width: 100%;
}
.whp-walkthrough-steps li {
  display: inline;
  float: left;
  width: 33%;
}
.whp-walkthrough-steps .whp-walkthrough-img {
  width: 190px;
  height: 190px;
  margin-bottom: 14px;
  background-size: 100% auto;
}
.walkthrough_img1_unselected {
  background: url("../img/walkthrough/step-01-unselected.png") no-repeat scroll 1px 1px rgba(0, 0, 0, 0);
}
.walkthrough_img2_unselected {
  background: url("../img/walkthrough/step-02-unselected.png") no-repeat scroll 1px 1px rgba(0, 0, 0, 0);
}
.walkthrough_img3_unselected {
  background: url("../img/walkthrough/step-03-unselected.png") no-repeat scroll 1px 1px rgba(0, 0, 0, 0);
}
.walkthrough_img1_selected {
  background: url("../img/walkthrough/step-01-selected.png") no-repeat scroll 1px 1px rgba(0, 0, 0, 0);
}
.walkthrough_img2_selected {
  background: url("../img/walkthrough/step-02-selected.png") no-repeat scroll 1px 1px rgba(0, 0, 0, 0);
}
.walkthrough_img3_selected {
  background: url("../img/walkthrough/step-03-selected.png") no-repeat scroll 1px 1px rgba(0, 0, 0, 0);
}
.walkthrough_img1_completed {
  background: url("../img/walkthrough/step-01-completed.png") no-repeat scroll 1px 1px rgba(0, 0, 0, 0);
}
.walkthrough_img2_completed {
  background: url("../img/walkthrough/step-02-completed.png") no-repeat scroll 1px 1px rgba(0, 0, 0, 0);
}
.walkthrough_img3_completed {
  background: url("../img/walkthrough/step-03-completed.png") no-repeat scroll 1px 1px rgba(0, 0, 0, 0);
}
.whp-walkthrough-imgcaption {
  text-align: center;
  color: #909090;
}
.whp-walkthrough-imgcaption .selected {
  color: #3087C4;
}
.whp-walkthrough-stepcontainer {
  width: 195px;
  margin: 0 auto;
}
.whp-walkthrough-popupbtn {
  text-align: center;
  font-size: 1.2em;
  margin-top: 24px;
}
.whp-walkthrough-tooltip {
  display: block;
  opacity: 1;
  z-index: 100;
  width: 300px;
  text-shadow: none;
}
.whp-walkthrough-tooltip hr {
  margin: 10px 0px;
}
.whp-walkthrough-tooltip-title {
  width: 67%;
  display: inline-block;
}
.whp-walkthrough-tooltip-stepcount {
  width: 33%;
  display: inline-block;
  text-align: right;
}
.whp-walkthrough-tooltip-content {
  font-family: arial;
  line-height: 20px;
}
.whp-walkthrough-tooltip-number {
  border: 1px solid #000;
  border-radius: 30px;
  padding: 0px 7px;
  font-size: 1.4em;
  float: left;
  margin-right: 7px;
}
.whp-walkthrough-steptitle {
  font-size: 1em;
  padding-top: 4px;
}
.whp-panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}
.whp-panel-body {
  padding: 15px;
}
.whp-panel-body:before,
.whp-panel-body:after {
  content: " ";
  display: table;
}
.whp-panel-body:after {
  clear: both;
}
.whp-panel-heading {
  padding: 10px 20px;
  border-bottom: 1px solid transparent;
}
.whp-panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 113%;
  color: inherit;
}
.whp-panel-title > a,
.whp-panel-title > small,
.whp-panel-title > .small,
.whp-panel-title > small > a,
.whp-panel-title > .small > a {
  color: inherit;
}
.whp-panel-footer {
  padding: 10px 20px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
}
.whp-panel-default {
  border-color: #C7DDF0;
}
.whp-panel-default > .whp-panel-heading {
  color: #4b7a96;
  font-size: 120%;
  text-shadow: 0 1px 0 #fff;
  background-color: #dee8f1;
  border-color: #C7DDF0;
  font-weight: bold;
}
/* Exceptions */
/* Slim size of form only response rule */
input.whp-response-rule-slim,
textarea.whp-response-rule-slim,
select.whp-response-rule-slim {
  width: 82px;
  padding-left: 2px;
}
input.whp-response-rule-name {
  width: 70px;
  padding-left: 2px;
}
/*for notification channel list */
.whp-notification {
  margin-left: 100px;
}
.whp-notification:after {
  clear: both;
}
.whp-notification:before,
.whp-notification:after {
  content: "";
  display: table;
}
.whp-notification-options {
  width: 95px;
  float: left;
}
.ie8 .whp-notification-options {
  width: 100px;
}
.whp-notification-options .whp-input-column {
  height: 32px;
  padding-top: 2px;
  float: left;
  margin-top: 2px;
}
.whp-notification-options .whp-input-column span {
  padding-top: 2px;
  float: left;
}
.whp-notification-column {
  width: 160px;
  margin-left: 5px;
  float: left;
}
.whp-notification-column .whp-input-column {
  height: 32px;
  padding-top: 2px;
}
.whp-notification-column select {
  width: 160px;
}
.ie8 .whp-notification-column select {
  padding: 2px 0 2px 2px;
}
.whp-notification-label {
  width: 80px;
  text-align: right;
}
/************************ Specific Envrionement (EDU) */
.whp-special-env .whp-header {
  height: 100px;
}
.whp-special-env .whp-header .whp-header-edu {
  height: 37px;
  width: 100%;
}
.whp-header-login {
  position: fixed;
  height: 37px;
  width: 100%;
  left: 0;
  top: 0;
}
.whp-header-edu,
.whp-header-login {
  padding-top: 13px;
  background: #5ecefd;
  background: url("../img/bckLoginEdu.png"), linear-gradient(to bottom, #5ecefd 0, #418fb0 100%);
  background-repeat: repeat, repeat;
  text-align: center;
  color: #ffffff;
}
.ie7 .whp-header-login {
  background: #5ecefd;
}
/* Special Environment */
.whp-special-env .whp-sidebar {
  margin-top: 50px;
}
/* Special banner for environment */
body.whp-special-env {
  padding-top: 100px;
}
/* Login education environment */
.ie7 .whp-login-box.whp-login-edu,
.ie8 .whp-login-box.whp-login-edu,
.ie7 .whp-login-recover.whp-login-edu,
.ie8 .whp-login-recover.whp-login-edu {
  padding: 0;
  height: 380px;
}
/* custom list style */
.whp-control-fluid .whp-customlist-content,
.ie7 .whp-control-fluid .whp-customlist-content,
.ie8 .whp-control-fluid .whp-customlist-content {
  width: 90%;
}
.whp-customlist-container,
.ie7 .whp-customlist-container {
  overflow: hidden;
}
/************************ Specific Envrionement (Trial bar) */
.whp-header-trial {
  height: 41px;
  padding-top: 9px;
  color: #b8b8b8;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}
.whp-header-trial .highlight {
  color: #FFF;
}
.whp-header-trial .whp-btn {
  display: inline-block;
  padding: 5px 20px;
  margin-left: 10px;
  color: #FFF;
  font-size: 14px;
}
.whp-header-trial .whp-btn.orange {
  background: linear-gradient(to bottom, #ffae19 0, #ff8b00 100%);
  background-color: #ff9800;
  -webkit-filter: none;
          filter: none;
  border-color: #ff8b00;
  text-shadow: 0 -1px 0 #bf6d00;
}
.whp-header-trial .whp-btn.orange:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 0 7px 7px #ff8b00;
}
/*
Added by manoj to fix ITERATION-8710
*/
@media print {
  body * {
    visibility: hidden;
  }
  #mainContent,
  #mainContent * {
    visibility: visible;
  }
  #mainContent {
    position: absolute;
    left: 0;
    top: 0;
  }
  /* Adi and Manoj for ITERATION-9033 */
  .whp-container-data * {
    visibility: visible;
  }
  /* Adi and Manoj for ITERATION-9033 */
  #fullscreenContent,
  #fullscreenContent * {
    visibility: visible;
  }
  #fullscreenContent {
    position: absolute;
    left: 0;
    top: 0;
  }
}
/* Tooltip container */
.customTooltip {
  position: relative;
  display: inline-block;
}
/* Tooltip text */
.customTooltip .customTooltiptext {
  visibility: hidden;
  width: 240px;
  background-color: #fff18f;
  color: black;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  margin-top: 25px;
  margin-right: 37px;
  right: -38px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.customTooltip:hover .customTooltiptext {
  visibility: visible;
}
.smaller {
  right: 10%;
}
.children {
  display: block;
  position: relative;
  transform: translateY(-50%);
  margin-top: 3%;
}