.drawButton {
	background-color: white;
	width: 40px; height: 40px;
	background-image: url('../img/edit.png');
	padding: 10px;
}



div.annotate-controls {
    
    background-color: white;
    padding: 10px;
    opacity: 0.5; z-index: 100000005;
    -webkit-user-select: none; user-select: none;
    overflow: hidden;
	
	display: inline-block;
    float: left;
}

div.featureControls {
    
    background-color: white;
    /*box-shadow: 4px 4px 8px #a0a0a0;*/
    

    position: fixed; 
	top: 60px; 
	right: 10px; 
    padding: 10px;
   /* padding-top: 8px;*/
    /*border: outset 1px #808080;*/
    opacity: 0.5; z-index: 100000005;
    
    -webkit-user-select: none; user-select: none;
    overflow: hidden;
	border-style: groove; 
	display: inline-block;
    float: left;
    z-index:2147483646;
}

div.markerFeatureControl button{
	 cursor: pointer;
	background-color: white;
    width: 40px; height: 40px; 
    border: none;
    padding: 5px;
    background-position: 2px 2px;
    background-repeat: no-repeat;
    background-size: 32px 32px;
	float: left;
}

/*div.markerFeatureControl{
	width: 50px; 
	height: 30px;
	color: white;
	background-color:white;
	display: inline-block;
	float: left;
	padding: 5px;
}*/


div.annotate-controls:hover, div.annotate-controls[showing="true"] {
    opacity: 0.8;
}



div.annotate-controls button {
    cursor: pointer;
	background-color: white;
    width: 40px; height: 40px; 
    border: none;
    padding: 5px;
    background-position: 2px 2px;
    background-repeat: no-repeat;
    background-size: 32px 32px;
}


div.annotate-controls img, div.annotate-controls button.color {
    margin: 0px; margin-left: 10px;
}

div.annotate-controls button.color {
    width: 33px; height: 33px;
    border: none;

    /*border: inset 2px #808080;
    vertical-align: top;*/
}

div.annotate-controls[showing="true"]{
    /*min-width: 220px;
    max-width: 300px;*/  
} 

div.markerFeatureControl[featureEnabled="true"]{
    min-width: 150px;
    max-width: 200px;  
}

div.markerFeatureControl[featureEnabled="true"] button.red-marker,div.markerFeatureControl[featureEnabled="true"] button.blue-color,div.markerFeatureControl[featureEnabled="true"] button.green-color-marker,div.markerFeatureControl[featureEnabled="true"] button.clear-marker, div.markerFeatureControl[featureEnabled="true"] button.hideMarkers,div.markerFeatureControl[featureEnabled="true"] button.hideSelfMarkers
{
    /*margin: -3px; margin-left: 1px;*/
    border: 1px outset black;
    background-position: 3px 3px;
    /*padding: 3px;*/
}



div.annotate-controls[mode="draw"] button.mode-draw, div.annotate-controls[mode="draw-rec"] button.mode-draw-rec, div.annotate-controls[mode="draw-circle"] button.mode-draw-circle,  div.annotate-controls[mode="clearAll"] button.clearAll,div.annotate-controls[mode="unHide"] button.agentHide,div.annotate-controls[mode="selfHide"] button.selfHideBtn, div.annotate-controls[mode="pointer"] button.mode-pointer, div.annotate-controls[showing="true"] button.annotate, div.annotate-controls[showing="true"] button.red-color-marker,div.annotate-controls[showing="true"] button.blue-color-marker,div.annotate-controls[showing="true"] button.green-color-marker, div.annotate-controls[showing="true"] button.font_small,
div.annotate-controls[showing="true"] button.font_medium,div.annotate-controls[showing="true"] button.font_large
 {
    /*margin: -3px; margin-left: 1px;*/
    border: 1px outset black;
    background-position: 3px 3px;
    /*padding: 3px;*/
}

div.annotate-controls[showing="false"] button.mode-draw, div.annotate-controls[showing="false"] button.mode-draw-rec, div.annotate-controls[showing="false"] button.mode-draw-circle, div.annotate-controls[showing="false"] button.mode-note, div.annotate-controls[showing="false"] button.mode-pointer, div.annotate-controls[showing="false"] button.delete, div.annotate-controls[showing="false"] button.color, div.annotate-controls[showing="false"] button.text-chat, div.annotate-controls[showing="false"] div.sp-replacer.sp-light, div.annotate-controls[showing="false"] button.clearAll,div.annotate-controls[showing="false"] button.agentHide ,div.annotate-controls[showing="false"] button.agentunhide ,div.annotate-controls[showing="false"] button.selfHide,div.annotate-controls[showing="false"] button.custunHide,div.annotate-controls[showing="false"] button.red-color-marker,div.annotate-controls[showing="false"] button.blue-color-marker,
div.annotate-controls[showing="false"] button.green-color-marker, div.annotate-controls[showing="false"] button.font_small,
div.annotate-controls[showing="false"] button.font_medium,div.annotate-controls[showing="false"] button.font_large,div.annotate-controls[showing="false"] div.grpElements {
    display: none;
}

/*div.makerEnable[markerMode="enableMarkerFeature"] button.btnMark{
	 border: 1px outset black;
}*/

.btnDisabled{
	opacity: 0.65;
    cursor: not-allowed;
}

button.enablemarker[markerMode="enableMarkerFeature"]{
	border: 1px outset black;
    background-position: 3px 3px;
}

div.enablemarker[markerMode="enableMarkerFeature"]{
	border: 1px outset black;
    background-position: 3px 3px;
}

div.markerFeatureControl[showcolor="false"] div.grpMakerColors, div.markerFeatureControl[showcolor="false"] div.divMakerElements {
	display: none;
}



div.markerFeatureControl[showcolor="true"] div.grpMakerColors, div.markerFeatureControl[showcolor="true"] div.divMakerElements{
    background-position: 3px 3px;
}

/*div.featureControls[features="show"] div.divMakerElements, div.featureControls[features="show"] div.annotate-controls  {
	display: inline-block;
	background-position: 3px 3px;
}*/

div.featureControls[features="hide"] div.divMakerElements, div.featureControls[features="hide"] div.annotate-controls  {
	
	display: none;
}


div.markerFeatureControl button.blue-marker {
   background-color:#A3CEDC;
   	width: 25px; 
	height: 25px;
	color: white;	
	
}

div.markerFeatureControl button.red-marker {
   background-color:#FF3C3C;
   	width: 25px; 
	height: 25px;
	color: white;	
	
}

div.markerFeatureControl button.clear-marker {
   	width: 25px; 
	height: 25px;
	color: white;	
	background-image: url('../img/delete-text.png');
}

div.markerFeatureControl button.hide-marker {
   	width: 45px; 
	height: 45px;
	color: white;	
	//background-image: url('../img/cobrowse.png');
}
/*#hideMarkers {
	background-image: url('../img/agent-hide.svg');
}*/

.hideSelfMarkersClass{
	background-image: url('../img/customer-hide.jpg');
}

.unHideSelfMarkersClass{
	background-image: url('../img/customer-unhide.jpg');
}

.hideAgentMarkersClass{
	background-image: url('../img/agent-hide.svg');
}

.unHideAgentMarkersClass{
	background-image: url('../img/agent-unhide.svg');
}



div.markerFeatureControl button.green-marker {
   background-color:#50FF50;
   	width: 25px; 
	height: 25px;
	color: white;	
	
}




div.annotate-controls button.annotate {
    background-image: url('../img/edit.png');
}

div.annotate-controls button.mode-draw {
    background-image: url('../img/draw.png');
}

div.annotate-controls button.mode-draw-rec {
    background-image: url('../img/shapeSquare.png');
	
}

div.annotate-controls button.mode-draw-circle {
    background-image: url('../img/shapeCircle.png');
}
div.annotate-controls button.red-color-marker {
	background-color:red;
	width: 25px; 
	height: 25px; 
	color: white;
}
div.annotate-controls button.blue-color-marker {
   background-color:blue;
   	width: 25px; 
	height: 25px;
	color: white;	
	
}
div.annotate-controls button.green-color-marker {
   background-color:green;
   	width: 25px; 
	height: 25px;
	color: white;	
}

div.annotate-controls button.font_small {
   background-color:black;
   	width: 5px; 
	height: 5px;
	color: white;	
}

div.annotate-controls button.font_medium {
   background-color:black;
   	width: 10px; 
	height: 15px;
	color: white;	
}

div.annotate-controls button.font_large {
   background-color:black;
   	width: 20px; 
	height: 25px;
	color: white;	
}


div.annotate-controls[showing="true"] div.grpElements {
	width: 90px; 
	height: 30px;
	color: white;
	background-color:white;
	display: inline-block;
    float: left;
	padding: 5px;
}

div.grpMakerElements{
	width: 50px; 
	height: 30px;
	color: white;

	background-color:white;
	display: inline-block;
	float: left;
	padding: 0px;	
}

div.grpMakerColors{
	width: 90px; 
	height: 30px;
	color: white;
	background-color:white;
	display: inline-block;
    float: left;
	padding: 0px;
	
}

div.divMakerElements{
	width: 40px; 
	height: 40px;
	color: white;

	background-color:white;
	display: inline-block;
	float: left;
	padding: 5px;	
	
}

div.annotate-controls[showing="true"] div.colorChoiceDiv {
	width: 10px; 
	height: 10px;
	color: white;
	background-color:white;
	border-style: solid;
	border-color:black;
	display: inline-block;
    float: left;
	padding: 5px;
}

button.color-selection{
	width: 5px; 
	height: 5px;
}


div.makerEnable {
	width: 40px; 
	height: 40px;
	color: white;
	background-color:white;
	display: inline-block;
    float: left;
	padding: 5px;
}

div.divMakerElements button.enablemarker{
	
	background-image: url('../img/brush.png');
}



div.annotate-controls button.clearAll {
    background-image: url('../img/delete-text.png');
}

div.annotate-controls button.agentHide {
    background-image: url('../img/agent-hide.svg');
}
.agentunhide{
	background-image: url('../img/agent-unhide.svg');
}

div.annotate-controls button.selfHide {
   background-image: url('../img/customer-hide.jpg');
}

.custunHide {
   background-image: url('../img/customer-unhide.jpg');
}


div.annotate-controls button.delete {
    background-image: url('../img/delete-text.png');
}

svg.background {
	/*background:url('assets/bg.png') repeat #e4e4e4;*/
    position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
    opacity: 0.5; z-index: 100000000;
}



div.note-annotate, div.pointer-annotate {
    z-index: 100000010;
    position: absolute;
    opacity: 0.95;
    border: none;
    overflow: visible;
    outline: none;
    resize: both;
}


div.pointer-annotate {
    width: 143px; height: 117px;
    z-index: 100000012;
    resize: none;
}
div.note-annotate:hover, div.pointer-annotate:hover {
    opacity: 1.0;
}

div.note-annotate iframe.text, div.pointer-annotate iframe.text {
    position: absolute;
    z-index: inherit;
    width: 100%; height: 100%;
    border: none;
    outline: none;
    display: inherit;
}
div.annotate-controls[mode="pointer"] ~ div iframe{
    pointer-events: none;
}

div.note-annotate img.close {
    position: absolute;
    right: 10px; top: 4px; width: 16px; height: 16px;
    z-index: inherit;
    border: none;
    cursor: pointer;
    
    background-image: url('assets/pin.png');
}

span.people-count {
    position: absolute;
    left: 4px; top: 4px;
    color: #800000; font-size: 10px;
    background-color: #ffffff;
    display: none;
}

/* position icon for mouse pointer for note and draw modes */
img.position-icon {
    position: absolute; width: 24px; height: 24px;
    visibility: hidden; display: none;
    background-size: 24px 24px;
}
.draggable {
        cursor: move;
    }


body[showing="true"][mode="draw"] img.position-icon {
    background-image: url('../img/draw.png');
}
body[showing="true"][mode="erase"] img.position-icon {
    background-image: url('../img/eraser.png');
}

body[showing="true"][mode="draw"] img.position-icon, body[showing="true"][mode="erase"] img.position-icon{
    visibility: visible; display: block;
}

/*  eraser-assist */
img.eraser-assist-icon {
    position: absolute; width: 40px; height: 40px;
    visibility: hidden; display: none;
    background-size: 40px 40px;
}

body[showing="true"][mode="erase"] img.eraser-assist-icon {
    visibility: visible; display: block;
    border-radius: 25px;
    background-color: cornsilk;
    opacity: 0.7;
    /*background-image: url('assets/circle_minus.png');*/
}

@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {
    div.annotate-controls button {
        width: 48px; height: 48px;
        background-size: 48px 48px;
    }
    /*div.annotate-controls button.color {
        width: 48px; height: 48px;
    }*/
    img.position-icon {
        width: 48px; height: 48px;
        background-size: 48px 48px;
    }
    div.note-annotate img.close {
        right: -10px; top: -10px; width: 32px; height: 32px;
        background-size: 32px 32px;
    }
    span.people-count {
        font-size: 16px;
    }
}