html,body,form,.mainArea{
    height: 100%;
    margin: 0;
    }

body {
            font-family: Calibri;
        }

        /*scrollbar*/
        ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
        }

        ::-webkit-scrollbar-button {
            width: 0px;
            height: 0px;
        }

        ::-webkit-scrollbar-thumb {
            background: #827474;
            border: 0px none #ffffff;
            border-radius: 50px;
        }

            ::-webkit-scrollbar-thumb:hover {
                background: #827474;
            }

            ::-webkit-scrollbar-thumb:active {
                background: #099963;
            }

        ::-webkit-scrollbar-track {
            background: #ffffff;
            border: 0px none #ffffff;
            border-radius: 18px;
        }

            ::-webkit-scrollbar-track:hover {
                background: #cdd1cf;
            }

            ::-webkit-scrollbar-track:active {
                background: #cdd1cf;
            }

        ::-webkit-scrollbar-corner {
            background: transparent;
        }
        	
	.Template {
	    width: 90% !important;
	}
	
	.templateImage {
		width:100%;
		height:45px;
   		 background-position: center;
    		background-repeat: no-repeat;
    		    background-size: contain;
		    margin-top: -5px;
		    margin-bottom: -5px;
	}
	
        .AgentIcon {
            position: absolute;
			background-image: url(./getFile.aspx?profile=86&fname=icon_logo.png&sug=2);
			background-size: contain;
			background-repeat: no-repeat;
			width: 30px;
            height: 30px;
			left: -47px;
			top: 0px;
        }

        .ClientIcon {
			position: absolute;
			right: -70px;
			top: -2px;
			background-image: url(./getFile.aspx?profile=86&fname=client_logo.png&sug=2);
			background-size: contain;
			background-repeat: no-repeat;
			width: 50px;
			height: 32px;
			display: none;
        }

        .ClientBubble {
           float: right;
           margin-top: 20px;
			position: relative;
		   text-align: left;
		   padding: 10px;
		   padding-bottom: 20px;
		   -webkit-border-radius: 20px;
		   -moz-border-radius: 20px;
		   border-radius:20px;
		   display: inline-block;
		   width: 70%;
		   color: black;
		   margin-right: 0px;
		   direction: ltr;
		   word-wrap: break-word;
          border-top-right-radius: 0;
           background-color: #D9EFDF;
        }
        
	.ClientBubble:before {
			content: "";
			position: absolute;
			top: 0px;
			right: -16px;
			border-width: 11px 30px 0 0;
			border-color: #007d46 transparent;
			display: block;
			width: 0;
	}

        .AgentBubble {
            margin-top: 10px;
			position: relative;
			text-align: left;
			padding: 10px;
			padding-bottom: 20px;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			display: inline-block;
			width: 70%;
			color: black;
			background: #EDEDED;
			margin-left: 40px;
			direction: ltr;
			word-wrap: break-word;
			border-top-left-radius: 0;
        }
		   .AgentBubble:before {
			    content: "";
				position: absolute;
				top: 0px;
				left: -14px;
				border-width: 11px 0 0 30px;
				border-color: #232c65 transparent;
				display: block;
				width: 0;
		}



        .ActionButton {
        }

            .ActionButton text {
            }

        .ActionTemplate {
        }

            .ActionTemplate title {
            }

            .ActionTemplate image {
            }

            .ActionTemplate button {
            }

            .ActionTemplate buttonText {
            }

        .InputArea {
			width: 70%;
			height: 50px;
			background-color: #EDEDED;
			margin-left: 15%;
        }

        .SendBtn {
        }

        .ActionLink {
        }
		.btnSend{
		float: right;
		background-image:url(./getFile.aspx?profile=86&fname=SendBNP.png&sug=2);
		background-color: transparent;
		width: 35px;
		height: 35px;
		font-size: 0;
        border: none;
        background-size: cover;
        margin-right: 8px;
	    margin-top: 7.5px;
		cursor: pointer;
		}
        .InputText {
         width: calc(100% - 120px);
        height: 43px;
		font-size: 20px;
		direction: ltr;
		outline: none;
		padding-left: 15px;
		color: black;
		font-family: Calibri;
		margin-top: 4px;
		margin-left: 40px;
		border:none;
		background-color: transparent !important; 
        }

  .InputText ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	  color: white;
	}
	.InputText ::-moz-placeholder { /* Firefox 19+ */
	  color: white;
	}
	.InputText :-ms-input-placeholder { /* IE 10+ */
	  color: white;
	}
	.InputText :-moz-placeholder { /* Firefox 18- */
	  color: white;
	}   
        .MoreOnTopIcon {
        }

        .NewAgentLine {
        }

        .NewClientLine {
        }

        .NewOptionLine {
            margin: 10px;
            clear: both;
        }

        .OptionBubble {
            -webkit-border-radius: 15px;
            -moz-border-radius:15px;
            border-bottom-right-radius:1px;
            border-bottom-left-radius:30px;
            border-top-right-radius:30px;
            border-top-left-radius:30px;
            border-radius: 15px;
            border: 0.5px solid #01965E;
            color: #404040;
            cursor: pointer;
            width: auto;
            padding: 10px;
            margin-left: 10px;
            min-width: 50px;
            text-align: center;
            direction:ltr;
            margin-top: 10px;
	    font-size: 16px;
            width:90% !important;
	    background-color: #ededed;
        }

	.OptionBubbleImage {
            text-align: left !important;
            padding: 2px !important;
			border: 0.5px solid #e87527;
			background-color: #ededed;
			border-radius: inherit;
			border-bottom-right-radius: 30px;
			border-top-right-radius: 30px;
			height: 48px;
			font-weight: bold;
			font-size: 15px !important;
	}        
        .OptionBubble:hover {
        	    color: #e87527;
        }
	.OptionBubble:not(.OptionBubbleImage){
		
		background:#white;
	    border: 1px solid #01965E;
		border-radius:0;
		/*margin-top:0;*/
		width:100%;
		color:#01965E;
		border-radius: 22px;
		-webkit-border-radius:22px;
		-moz-border-radius:22px;
		
	}
	.OptionBubbleSelected {
        	color:white !important;
        	background-color:#01965E;	
        }

        .OptionBubbleContinue {
            -webkit-border-radius: 15px;
            -moz-border-radius:15px;
            border-radius: 15px;
            border: 1px solid #EE8E00;
            color: #007d46;
            cursor: pointer;
            width: auto;
            padding: 10px;
            margin-left: 10px;
            min-width: 50px;
            text-align: center;
            direction:ltr;
            margin-top: 10px;
			font-size: 20px;
	}

        .OptionBubbleContinue:hover {
        	color:white;
        	background-color:#029CE0;	
        }

        .Stage {
		width: 70%;
		height: calc(100% - 168px);
		margin-left: 15%;
		overflow: auto;
		padding: 15px;
	}

        .agentTexting {
                   margin-top: 10px;
				position: relative;
				text-align: left;
				padding: 0 10px;
				-webkit-border-radius: 20px;
				-moz-border-radius: 20px;
				border-radius: 20px;
				display: inline-block;
			  	color: black;
				background: #EDEDED;
				margin-left: 40px;
				direction: ltr;
				word-wrap: break-word;
				border-top-left-radius: 0;
        }

            .agentTexting img {
                background-image: url('./getFile.aspx?profile=86&fname=agenttyping.gif&sug=2');
				content:url('./getFile.aspx?profile=86&fname=agenttyping.gif&sug=2');
                background-size: 100%;
                /*width:100px;
                height:30px;
                margin-top: 10px;
                background-repeat: no-repeat;
                background-position: 50% 50%;*/ 
                border: 0px!important;


            }

        .mainArea {
            
        }

        .topLogo {/*
            background-image:url('./getFile.aspx?profile=86&fname=top.jpg&sug=2');
            background-size:contain;
                background-repeat: no-repeat;
                
            width:100%;
            height:80px;
            background-position-x : center;*/
        }
		
		.formButton{
			float: left;
			background: black;
			color: white;
			border: 1px solid black;
			width: 70px;
			height: 30px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			text-decoration: none;
			text-align: center;
			line-height: 30px;
			font-size: 20px;
			cursor: pointer;
			margin-top:8px;
		}
		.formFieldSet .formField{
			font-family: Calibri;
			width:100%;
		}  
		.formFieldSet textarea{
			height: 50px;
		}
		
	.InputAreaDateTime{
            position: absolute;
            bottom: 5px;
            width: calc(100vw - 30px);
            left: 6px;
            height: 40px;
            font-size: 20px;
            color: black;
            direction: ltr;
            max-width: 500px;
            border: 0px;
            outline: none;
        }
        
        	.InputDateTime{
       			width: calc(70%);
        	}
        	
        	.InputDateTimeBtn{
        		width: calc(25%);
        	}
              
       .FixedText {
       		padding-top:0px;
       		position: relative;
       		top: -14px;
       }
       
       .FixedImage {
       		height: 46px;
       }
        
      .FixedButton {
		color: white;
		cursor: pointer;
		width: calc(25% - 2px);
		padding-top: 10px;
		display: inline-block;
		/*min-width: 50px;*/
		text-align: center;
		direction: ltr;
		height: 100%;
		font-size: small;
		min-height: 46px;
	    	vertical-align: middle;
	}
        
        .FixedButton:hover {
        	color:white;
        	background-color:#98b8a0;	
        }

	.FixedButtonSelected {
        	color:white;
        	background-color:#ffa700;	
        }
          .FixedButtonsArea{
			  background-color: #707070;
			  position: absolute;
			  bottom: 0px;
			  left: 0px;
			  width: 100%;
		  }   
	  

	.OptionImage {
	    object-fit: cover;
            margin: 5px;
	    vertical-align: middle;
	    width: 12%;
	    margin-top: -15px;
	    margin-right: -30px;
	    margin-left: -30px;
	}

	.OptionText {
		vertical-align: super;
		padding-left: 1%;
	}
	.starDiv {
		width: 6% !important;
		text-align: start;
		font-weight: bold;
		font-size: x-large;
		color: #00965e;
		display: inline-block;
		padding: 4px;
	}
	
	.starButton {
		float: right;
		padding-right: 5px;
	}
	.starImage {
		background-image: url(./getFile.aspx?profile=86&fname=star.png&sug=2);
		background-repeat: no-repeat;
		background-size: contain;
		float: left;
		height: 28px;
		width: 28px;
	}
	.OptionBubbleSelected .starImage{
		background-image: url(./getFile.aspx?profile=86&fname=whiteStar.png&sug=2);
		}
@media only screen and (max-width: 600px) 
{
    .Stage{
				width: 92%;
				
				margin-left:0;
	}
	.InputArea{
		width: 100%;
		margin-left:0;
		
	}
	.InputText{
	   padding-left:0;
	}
	.OptionBubbleImage{
		    margin-left: -4%;
            width: 100% !important;
	}
	.OptionBubble:not(.OptionBubbleImage):not(.starDiv)
	{
		width: 100% !important;
    color: #01965E;
    margin-left: -4%;
	padding:5px;
	}

	.OptionImage {
	    width: 32%;
	    margin-top: -3px;
	}
	
	.OptionText {
		vertical-align: baseline;
	}
	.starDiv {
		width: 20% !important;
	}

}