/** Import Google Web Font **/

@import url(https://fonts.googleapis.com/css?family=Nunito:400,700,300);

/* -------------table of contents--------------------- */

/* Base Site Elements */
/* Select Input Button Appearance */
/* Global default text styling for base for elements  */
/* Global Dark Grey URL Link Styles */
/* Header Posistion */
/* ContentPlaceHolder Div Container */
/* Global AppsUserAdmin Left an Right Content Divs */
/* Control MasterStaticHeader */
/* Control MasterAppsHeader */
/* Admin Menu Menu Container */
/* Apps Admin Menu Account Info Div */
/* Footer Styles and Formatting */
/* Help Control Formatting */
/* Login Control Formatting */
/* Corperate Branding bar on login page */
/* Global Form Page Formatting */
/* Percentage Bar Chart Formatting */
/* Elements with Coloured Gradient Bar Image Reference*/
/* Table Elements with Coloured Gradient Bar Image Reference*/
/* Content link button */

/* -------------table of contents ends -------------- */



/* Base Site Elements */
/* Base settings for the width, height, BG colour and BG image of the site.*/
/*--------------------*/


html,body 
{
margin:0;
padding:0;
height:100%; /* needed for container min-height */
font: 12px Verdana, Tahoma, Helvetica-Narrow, Helvetica, sans-serif;
background-color: #f2f2f2;
}

#Container
{
margin:0 auto; /* center, not in IE5 */
width:980px;
background:#ffffff;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
background-repeat: repeat-y;
background-position: 0px top; 
border-top:none;
border-bottom:none;
}

/* Styling for empty div on masterpages. Used to clear the floats on #GlobalRightContentDiv content */ 

.Clear { clear: both; height: 0; overflow: hidden; }


#ContainerNoLine
{
margin:0 auto; /* center, not in IE5 */
width:980px;
background:#ffffff;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
border-bottom:none;
}


/* Load web font, overides default Verdana font in individual css */

#SubSectionBanner
{	font-family: 'Nunito', sans-serif !important;
    font-weight: 400;
}

/* Select Input Button Appearance */
/* Default padding on the ASP form button*/

.AspButton
{
	padding: 5px 10px 5px 10px;	
}

/* Global default text styling for base for elements  */

P, input, textarea, select{font: 12px Verdana, Tahoma, Helvetica-Narrow, Helvetica, sans-serif;}

/* Global Dark Grey URL Link Styles */
/*----------------------------------*/

.LinkDarkGray {color:#333333;}
.LinkDarkGray:link	{text-decoration:none; color:#333333;}	
.LinkDarkGray:visited {text-decoration:none; color:#333333;}	
.LinkDarkGray:active {text-decoration:none;	color:#333333;}	
.LinkDarkGray:hover {color:#333333; text-decoration: underline;}

/* Header */
/* Set to relative so that if the header height is changed for WL logo the menu nav can be set to align bottom 
/*----------------------------------*/

#Header { position:relative;}

/* ContentPlaceHolder Div Container */
/* These 2 styles are containers for the layout (width, height etc) of the both the left hand menu and the main content.
/*----------------------------------*/

#ContentplaceholderDiv 
{
padding-bottom:40px; /* bottom padding for footer */
width: 980px;
}

#ContentplaceholderDivNoLine 
{
width: 980px;
padding-bottom:35px; /* bottom padding for footer */
}

/* Global AppsUserAdmin Left an Right Content Divs */
/* These two styles are crucial to the layout of the site as they horizonatally split the layout between the header and footer */
/* into 2 sections: left for the menu and right for the content*/
/*-------------------------------------------------*/

 #GlobalLeftMenuDiv 
{
width:194px;
float: left;
margin-left:5px;
border:1px solid #b6b8b9;
border-bottom: none;
}

#GlobalRightContentDiv 
{
width:769px;
float:right;
padding: 0px 5px 0px 5px;  
}

/* Control MasterStaticHeader */
/* The following styles control the formatting of the header prior to login */
/*----------------------------*/

/*Div Containing Logo*/
/* Controls placement of the container div for the company logo which itself is part of the MasterStaticHeader */

#cMasterStaticHeader_LogoDiv {height: 64px; text-align: left; padding-top: 5px; padding-bottom:15px;} 

/* Menu Container */
/* Controls formatting of the container div for the static menu which itself is part of the MasterStaticHeader */
/* See MenuTopStatic control for actual menu formatting */ 

#cMasterStaticHeader_MenuDiv {width: 980px;}


/* Control MasterAppsHeader */
/* The following styles control the formatting of the header post login */
/*--------------------------*/

/*Div Containing Logo*/
/* Controls placement of the container div for the company logo which itself is part of the MasterAppsHeader */

#cMasterAppsHeader_LogoDiv {float:left; width: 350px; height: 64px; text-align: left; padding-top: 5px;} 

/* Admin Menu Menu Container */
/* Controls formatting of the container div for the apps admin menu which itself is part of the MasterAppsHeader */
/* See MenuTopAppsAdmin control for actual menu formatting */ 

#cMasterAppsHeader_MenuTopAppsAdminDiv {width: 550px; float:right;}

/* Menu Container */
/* Controls formatting of the container div for the apps menu which itself is part of the MasterAppsHeader */
/* See MenuTopApps control for actual menu formatting */

#cMasterAppsHeader_MenuDiv {width: 980px;}


/*  Apps Admin Menu Account Info Div */
/* Controls the formatting of the div container for account info such as username, credits etc */
/*-----------------------------------*/

#AdminAccountInfo
{
float:right;
font-size:10px; 
margin-top:2px;
margin-right:5px;
text-align:right;
}

/* Footer Styles and Formatting */
/*------------------------------*/

/* Posistion the footer container div */
#Footer_Container
{
position:relative;
width:100%;
margin-top: -39px;
height:39px;
margin-left: auto;
margin-right:auto;
background-color:#191814;

}

/* Formatting for machine name label */
#Footer_MachineName
{
width: 490px;
color:#888987; 
vertical-align: bottom;
position: absolute;
bottom: 0px;
left:50%;
font-size: 12px;
margin-left: auto;
margin-right:auto;
}

/* Footer link styling */

#Footer .CopyrightAndMenus {float: left; margin-top: 5px; margin-left: 5px;}
#Footer_MachineName .MachineName {float: right; margin-right: 5px; margin-bottom: 5px;}

/* Help Control Formatting */
/* Styles and formatting for the help popup */
/*-------------------------*/

/* Formatting for the help popup container div  */

.cHelp_Popup
{ 
position:  absolute;
display: block; /* To stop Opera breaking position of the popup */
visibility: hidden; 
width: 350px; 
z-index: 150;
font-weight:normal;
top: 1px;
left:20px;
}

/* Formatting for the help popup header bar (inc close link, see URL styles below)  */

.cHelpHeader
{
font-size: 12px;
padding:0px 3px 0px 1px;
text-align: right;
margin: 0px;
}

/* Layout formatting for the help popup content container inc scroll bar */

.cHelp_Content
{
text-align: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 3px;
overflow: auto;
max-height:250px
}


/* Help POPUP URL Styles */
/*-----------------------*/

.cHelpPopupLink {font-size:11px;}
.cHelpPopupLink:link	{text-decoration: none;}	
.cHelpPopupLink:visited {text-decoration:none;}	
.cHelpPopupLink:active {text-decoration:none;}	
.cHelpPopupLink:hover {text-decoration:none;}

/* Login Control Formatting */
/* Formatting the login control and the elements contained therein, see WL specific CSS for styles */
/* For the rounded box see WL CSS, below is only applicable to login control elements */
/*--------------------------*/

/* Containing Div*/

.cLogin 
{
width: 322px;
font-size: 12px;
color: #333;
padding:20px 0px 0px 0px;
margin:0px;
position:relative;
}

/* Titles formatting for login and content sections*/

.cLogin .titles, .cLoginContentBox .titles  
{
padding: 5px 0px 5px 0px;
font-weight:bold;
color: #333333;
margin-left:0px;
font-size:15px; 
}

/* Formatting used to divide form into sections */

.cLogin fieldset 
{
border: none;
padding: 5px 6px 10px 6px; 
margin: 0px;
}

.cLogin  fieldset.sub
{
border: none;
padding: 5px 6px 10px 6px; 
margin: 0px 0px 0px 100px;
}

/* Formatting for form sub elements */
/* OL and LI used to vertically list each from element.  Label formatted using min-width to lineup following form elements */

.cLogin fieldset ol 
{
margin: 0px;
padding: 10px 0px 1px 0px;
}

.cLogin fieldset li 
{
padding: 2px 0px 2px 0px;
/*background: url(../Images/ControlDivider.png) left bottom repeat-x;*/
list-style: none;
margin: 1px 0px 5px 0px;
/*padding-bottom:10px;*/
}

.cLogin span.Label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
color: #333333;
min-width:100px; 
}

.cLogin .rme, .cLogin .btn_Login
{
    margin-left:95px;
}

.cLoginLinks
{
border:1px solid #abadb3;
background-color: #e5e5e5;
}


/* Containing Div for WL text content on login page*/

.cLoginContentBox 
{
width:485px;
font-size: 12px;
color: #333;
padding:5px;
margin:0px;
position:relative;
background: url(../Images/LoginContentBoxBG.png) left top repeat-x;
}

/* --------------------------------- */

/* Corperate Branding bar on login page */
/* See WL CSS file for styling declarations */

.CorporateBrandingBar
{
width:940px;  
padding:20px;
*width:auto; /* IE7 hack */
}

/* Global Form Page Formatting */
/* Styles and formatting for the main page content, see WL CSS for styling */
/*-----------------------------*/

/* Containing div */ 

.Form_Layout
{
margin: 0px 0px 5px 0px;
padding:0px;
}

/* Title bar containing content containing title/help icon */  

.Form_Layout .title
{
height:20px;
margin:0px;
padding:4px 0px 0px 3px;
}

/* Title bar if table td used for layout containing title/help icon */  

.Form_Layout td.title
{
margin:0px;
padding:0px 0px 2px 3px;
}

/* Formatting for help image alignment */
  
.Form_Layout .title img
{ 
height:13px;
vertical-align: top;
padding-top:0px;
}

/* Formatting for individual form elements i.e. label for input field or textfield etc */

.Form_Layout .formlabel
{
min-width:10em; /* This controls the width of all form labels & allows dynamic width for non-english larger words */
                /* Width can be set per element */
white-space:nowrap;
float:left; 
padding-top:3px;
}

/* Formatting for vertically laying out form sections */

.Form_Layout ol
{
list-style-type: none;
list-style: none;
margin:0px;
padding: 5px;   
}

/* Formatting for OLs that need default styling */

.Form_Layout_Off ol
{
  list-style-type: decimal;
  padding: 0 0 0 40px;
}

/* Formatting for vertically laying out for elements such as label + textfield, label + checkbox etc */

.Form_Layout li
{
margin:2px 0px 2px 0px;
padding:2px 0px 2px 0px;    
}

/* fix drop down list alignment */

.Form_Layout .ddl_listalignment 
{
margin:2px;
}

/* Default vertical alignment for td elements */

.Form_Layout td
{
vertical-align: middle ;
}

.valign-top td
{
vertical-align: top ;
}

/* Cross browser layout alignment */

.Form_Layout .RadioButbrowsercompat label 
{
vertical-align: middle;
}

/* Percentage Bar Chart Formatting */
/* Bar colour set in WL CSS	*/

div.progress-container 
{
border: 1px solid #ccc; 
width: 100px; 
margin: 2px 5px 2px 0; 
padding: 1px; 
float: left; 
background: #FFFFFF;
}

div.progress-container > div 
{
height: 12px
}

/* Elements with Coloured Gradient Bar Image Reference*/

/*.cAddressBookBrowser_Title, .cAddressBookBrowserAccount_GroupTab, .cAddressBookBrowserUser_GroupTab, .Form_Layout .title, .cGridView_PagerStyle

{
background-image: url('../Images/TabOpacityGradient.png');
background-repeat:repeat-x;
}*/

/* Table Elements with Coloured Gradient Bar Image Reference*/

.ContentLeftTableTopTR
{
background: url('../Images/TableHeaderGrad.png') repeat-x  top; 
}

/* Content link button */
/*-----------------------*/

a.Button {
    background: transparent url('../Images/bg_button_a.png') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    margin-left:5px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.Button span {
    background: transparent url('../Images/bg_button_span.png') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.Button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.Button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
} 

/* Menu Tab Structure -- Apps White Label Admin Tabs */
/*---------------------------------------------------*/

/* Menu formatted as a horizontal unordered list */

#Tabs_WhiteLabelAdmin ul 
{
margin:0;
padding:5px 4px 5px 0px;
list-style:none;
}

/* Individual list menu elements*/ 
  
#Tabs_WhiteLabelAdmin li 
{
float:left;
margin:0;
padding:0 0 0 0px;
}

/* Link element formatting/styling 1 of 2 */
  
#Tabs_WhiteLabelAdmin a 
{
color: #444;
display: block;
float: left;
font: normal 11px verdana;
height: 24px;
margin-right: 2px;
padding-right: 10px;
text-decoration: none;
/*background: transparent url('../Images/Apps_Tab_WhiteLabelAdmin_Right.png') no-repeat scroll top right;*/
border: 1px solid #b6b8b9;
background-color: #e7e7e7;

}

/* Link element formatting/styling 2 of 2 */

#Tabs_WhiteLabelAdmin span 
{
/*background: transparent url('../Images/Apps_Tab_WhiteLabelAdmin_Left.png') no-repeat;*/
display: block;
height:19px;
padding: 5px 0 0px 10px;
}

/* Hover link formatting for links 1 of 2 */

#Tabs_WhiteLabelAdmin a:hover 
{
background-position: bottom right;
color: #FFF;
outline: none;
background-color:#464646;
}

/* Hover link formatting for links 2 of 2 */

#Tabs_WhiteLabelAdmin a:hover span 
{
background-position: bottom left;
}

/* Styling to highlight current tab 1 of 2 */

#Tabs_WhiteLabelAdmin .Current a
{
background-position: bottom right;
color: #FFF;
background-color:#464646;
}

/* Styling to highlight current tab 2 of 2 */

#Tabs_WhiteLabelAdmin .Current a span 
{
background-position: bottom left;
}

/* Smoothing scheduled options */
.stage_amount_field, .sequential_amount_field, input.Counter
{
     text-align: right;
}

/* AccordionDropdown Plugin */
/*--------------------------*/

div.ta-plugins-accordiondropdown-hitbox {
    border: 1px solid gray;
    background-color: #D9D9D9;
    cursor: pointer;
    margin-top: 2px;
    padding: 2px;
    height: 16px;
}
        
ul.ta-plugins-accordiondropdown-slider {
    border: 1px solid gray;
    border-width: 0 1px 1px 1px;
    background-color: #FFF;
    padding: 0.3em;
    list-style-type: none;
    margin: 0;
}
        
div.ta-plugins-accordiondropdown-hitbox:hover,
div.ta-plugins-accordiondropdown-lightgray {
    background-color: #F4F4F4;
}

h3.ta-plugins-accordiondropdown-header {
    display: inline;
    border: none;
    color: inherit;
    font-weight: normal;
    font-size: 11px;
}

div.ta-plugins-accordiondropdown-indicator {
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    background-image: url(../Images/accordion_icon.png);
    float: left;
}

/* End AccordionDropdown Plugin */
/*------------------------------*/

/* Login and Reg Page Link Styling */

a.Reg_Button { background:url(../Images/Reg_But_Right.png) no-repeat top right; display: block; float: left; height: 36px; margin-top:20px; margin-left:120px; margin-right: 20px; padding-right: 25px; font-weight:bold; text-decoration: none !important; font-size:16px  !important} 
 
a.Reg_Button span { background:url(../Images/Reg_But_Left.png) no-repeat; display: block; line-height: 36px; padding: 0 0 0 25px; color: #fff; }
 
a.Reg_Button:hover span { background-position: 0 -36px; color: #fff; }
 
a.Reg_Button:hover { background-position: right -36px; }


a.Reg_Button_Small { background:url(../Images/Reg_But_Right_Small.png) no-repeat top right; display: block; float: left; height: 20px; padding-right: 25px; font-weight:bold; text-decoration: none;  }
 
a.Reg_Button_Small span { background:url(../Images/Reg_But_Left_Small.png) no-repeat; display: block; line-height: 20px; padding: 0 0 0 25px; color: #fff; }
 
a.Reg_Button_Small:hover span { background-position: 0 -20px; color: #fff; text-decoration: none !important; }
 
a.Reg_Button_Small:hover { background-position: right -20px; text-decoration: none !important; }


a.Login_Button { background:url(../Images/Reg_But_Right.png) no-repeat top right; display: block; float: left; height: 36px; margin-top:20px; margin-left:100px; margin-right: 20px; padding-right: 25px; font-weight:bold; text-decoration: none !important; font-size:16px  !important}
 
a.Login_Button span { background:url(../Images/Reg_But_Left.png) no-repeat; display: block; line-height: 36px; padding: 0 0 0 25px; color: #fff; }
 
a.Login_Button:hover span { background-position: 0 -36px; color: #fff; }
 
a.Login_Button:hover { background-position: right -36px; }


a.SubLink, .cLogin a
{
    font-size:12px;
    color:#333333;
    text-decoration:underline;
}

a.SubLink:hover, .cLogin a:hover
{
    font-size:12px;
    color:#333333;
    text-decoration: underline;
}

.cLoginMsgBox
{
    border: 1px solid red;
    width:400px;
}

.ErrorBox
{
    border:1px solid #dd9c9c;
    background-color:#ffe9e9;
    color:Red;
    font-weight:bold;
    font-size: 1.2em;
}

td.conversation-item
{
    vertical-align: top;
}

.conversation-item-right
{    
    display: block;
    padding-left: 100px;
    text-align: left;
}

.conversation-item-left
{        
    padding-right: 100px;
    text-align: left;
}

.conversation-item-incoming
{
    background-color: #d3b7d8;
}

.conversation-item-outgoing
{
    background-color: #d7e0f6;
}

input.abFilter
{
    width: 100px;
}

/* TextSurvey GUI */

#paperContainer {
    background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 1px, transparent 100%);
    background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 1px, transparent 100%);
    background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 1px, transparent 100%);
    background-image: repeating-radial-gradient(center center, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 1px, transparent 100%);
    -webkit-background-size: 10px 10px;
    -moz-background-size: 10px 10px;
    background-size: 10px 10px;
    background-color: white;
    overflow: scroll;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

#key {
    z-index: 2;
    border: 1px solid #aaa;
    background-color: white;
    border-radius: 4px;
    height: 130px;
    width: 300px;
    position: fixed;
    left: 5px;
    bottom: 5px;
}

#minimap {
    border: 1px solid #aaa;
    border-radius: 4px;
    background-color: white;
    height: 130px;
    width: 170px;
    position: fixed;
    right: 5px;
    bottom: 5px;
}

.propertyGrid {
    font-size: 11px;
    background-color: white;
    border-collapse: collapse;
}

.propertyGrid-fullHeight {
    height: 100%;
}

.propertyGrid td {
    vertical-align: top;
    padding-top: 5px;
    padding-bottom: 5px;
}

.propertyGrid-left {
    width: 160px;
    border-right: 1px solid #aaa;
    padding-right: 10px;
}

.propertyGrid-right {
    padding-left: 10px;
}

.propertyGrid-right > * {
    width: 180px;
    position: relative;
}

.propertyGrid-right input[type='checkbox'], .propertyGrid-right input[type='radio'] {
    width: auto;
}

.propertyGrid-group-left {
    width: 85%;
}

.propertyGrid-group-right {
    width: 2em !important;
    float: right;
}

.propertyGrid-group-right span {
    padding: 0 !important;
    height: 18px !important;
    width: 18px !important;
}

#minimap svg {
    border-top: 1px dotted #aaa;
    border-bottom: 1px dotted #aaa;
}

#overlay {
    border: 1px solid blue;
    background-color: lightblue;
    opacity: 0.4;
    border-radius: 4px;
    cursor: move;
    position: fixed;
}

#toolbar {
    z-index: 2;
    position: fixed;
    left: 5px;
    top: 5px;
    padding: 6px;
}

#toolbar #save.ui-state-default {
    border: 1px solid #91e600;
    background: #C7FF67;
    color: #484747;
}
#toolbar #save.ui-state-hover {
    border: 1px solid #619900;
    background: #abff1a;
    color: #212121;
}
#toolbar #save.ui-state-active {
    border: 1px solid #619900;
    background: #fff url("../CSS/jquery-ui-1.11.4/images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;
    color: black;
}

.dropdown {
    border: 1px solid #aaa;
    background-color: white;
    list-style-type: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-weight: normal;
    width: 180px;
    z-index: 1;
}

.dropdown li {
    border: 1px solid white;
    padding: 2px;
}

.dropdown li:hover {
    border-color: #ccc;
}

.sortable {
    list-style-type: none; 
    margin: 0; 
    padding: 1.3em 0;
}
.sortable li {
    margin: 0 3px 3px 0; 
    padding: 0.4em 0.5em 0.4em 1.5em; 
    cursor: ns-resize;
    height: 16px;
}
.sortable li div {
    overflow: hidden;
}
.sortable li span.ui-icon {
    position: absolute !important; 
    margin-left: -1.3em !important;
}

.ui-button .ui-button-text {
    font-size: 0.9em !important;
}

#placeholderContainer {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.canDrop {
    outline: 2px solid green;
}

div.uploadContainer input {
    display: block !important;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height:  100% !important;
}

div.uploadContainer .ui-button-text {
    font-size: 1em !important;
}

.validationElement {
    background-color: #ff9191;
}

.validationMessage {
    display: block;
    color: red;
}

.ui-tooltip p {
    font-size: 1em !important;
}

.ui-tooltip p:first-child {
    margin-top: 0 !important;
}

.ui-tooltip p:last-child {
    margin-bottom: 0 !important;
}

.ui-tooltip.ui-widget-content {
    background-color: #FBF9EE !important;
}

.ui-dialog-title {
    font-weight: normal !important;
}

.link-tools .tool-remove {
     display: none !important
}
.marker-vertex, .marker-vertex:hover {
     fill: white !important; 
     stroke: black !important;
}
.marker-vertex-remove-area {
     fill: white !important; 
     stroke: black !important;
}
.marker-vertex-remove {
     fill: black !important;
}
.marker-vertex-remove:hover {
     fill: red !important;
}
.marker-vertex-remove-area:hover + .marker-vertex-remove {
     fill: red !important;
}

/* End TextSurvey GUI */

/* Coach screens */

.coachScreenOverlay {
    z-index: 1000;
    background-color: rgba(68, 66, 218, 0.78);
    position: fixed;
    display: none;
}
    
.coachScreenOverlay.topLeft {
    top: 0;
    left: 0;
    height: 100%;
}
    
.coachScreenOverlay.top {
    top: 0;
}
    
.coachScreenOverlay.right {
    top: 0;
    height: 100%;
    width: 100%;
}
    
.coachScreenOverlay.bottom {
    height: 100%;
}
    
.coachScreenHoleContainer {
    z-index: 1000;
    position: fixed;
    overflow: hidden;
    display: none;
}
    
.coachScreenHole {
    box-shadow: rgba(68, 66, 218, 0.78) 0 0 0 100em;
    border-radius: 0.5em;
    width: 100%;
    height: 100%;
}
    
.coachScreenHelp {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 80px;
    color: rgb(101, 206, 192);
    font-size: 3em;
    z-index: 1001;
    display: none;
}

.coachScreenButtonContainer {
    position: absolute; 
    top: 88px; 
    left: 874px;
}

.coachScreenButton {
    border: 3px solid rgb(101, 206, 192);
    color: rgb(101, 206, 192);
    padding: 0.2em;
    font-size: 0.5em;
    background: none;
    display: block;
    float: right;
    margin-top: 0.5em;
    margin-right: 0.5em;
}

.coachScreenButton.showInFuture {
    border: none; 
    clear: both;
}

.coachScreenArrowContainer {
    z-index: 1001;
    position: fixed;
    pointer-events: none;
    display: none;
}

.coachScreenArrowContainer .arrowEnd {
    stroke: #65cec0;
    fill: #65cec0;
    stroke-width: 1px;
}

.coachScreenArrowContainer .arrowPath {
    stroke: #65cec0;
    fill: none;
    stroke-width: 5px;
    stroke-linecap: round;
}

.coachScreenArrowContainer svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* End Coach screens */

/* Emoji picker */

button.emojiPicker {
    padding: 0;
    margin-left: 1em;
    border: none;
    background-color: transparent;
}

button.emojiPicker img {
    vertical-align: middle;
    height: 1.5em;
}

div.emojiPicker-textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    background-color: white;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    overflow: auto;
    padding: 2px;
    padding-right: 3em !important;
    resize: both;
    white-space: pre-wrap;
}

div.emojiPicker-input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
}

div.emojiPicker-input img.emojione,
div.emojiPicker-textarea img.emojione,
div.emojiPicker img.emojione,
img.emojiPicker-button {
    height: 1.6em;
    width: 1.6em;
    margin: 0.2em 0 0 0;
    background-image: none;
    text-indent: initial;
    image-rendering: auto;
}

div.emojiPicker-relativeContainer {
    position: relative;
    margin: 0;
    padding: 0;
    height: 0;
}

img.emojiPicker-button {
    position: absolute;
    z-index: 1;
    height: 2em;
    width: 2em;
}

div.emojiPicker {
    position: fixed;
    width: 25.2em;
    height: 22em;
    border: 1px solid #bfccd9;
    background-color: white;
    z-index: 200;
    overflow: hidden;
    border-radius: 0.2em;
    box-shadow: 1px 1px 5px #000000;
}

div.emojiPicker-tabs {
    height: 2.5em;
    background-color: #bfccd9;
    padding-left: 0.4em;
}

div.emojiPicker a.emojiPicker-tab img {
    height: 2em;
    width: 2em;
    padding: 0.2em;
    top: 0 !important;
    border: none;
}

div.emojiPicker-list {
    position: absolute;
    top: 2.5em;
    bottom: 2em;
    overflow-y: scroll;
    overflow-x: hidden;
}

div.emojiPicker-category {
    min-height: 20em;
}

div.emojiPicker-warning {
    position: absolute;
    bottom: 0;
    height: 2em;
    background-color: #bfccd9;
    text-align: center;
    color: white;
    width: 100%;
    padding-top: 0.5em;
}

div.emojiPicker-list div {
    display: inline-block;
    margin: 0.4em;
    zoom: 1;
    *display: inline;
}

div.emojiPicker * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.emojiPicker-tab-selected img {
    background-color: white !important;
}

.emojiPicker h3 {
    border: none;
    font-weight: normal;
    padding-left: 0.5em;
    border-bottom: 1px solid #bfccd9 !important;
}

/* End Emoji picker */

.messageEditor .firstRow {
    width: 1px;
}
.messageEditor .firstColumn {
    padding-right: 1em;
}

.messageEditor td {
    white-space: nowrap;
}

.messageEditor textarea {
    white-space: pre-wrap;
}

.messageEditor .charactersCredits {
    width: 100%;
}

.messageEditor .charactersCredits .credits {
    float: right;
    padding-left: 1em;
}

.messageEditor .charactersCredits input {
    margin-left: 1em;
}

table.textpremiumtariff input {
    width: 15px;
    display: block;
    float: left;
}

table.textpremiumtariff label {
    width: 90%;
    display: block;
    float: left;
}

.newSiteNotification
{
    padding: 5px;
    background-color: #fcf8e3;
}