.chat-switch{



  	border-top-left-radius: 10px;



    border-top-right-radius: 10px;



    text-align: center;



    color: white;



    position: fixed;



    bottom: -1px;



    right: 0;



    float: right;



    width: 300px;



    background-color: #0c376b;



    border: 1px solid grey;



    z-index: 1;



    width: 174px;



  }







  .interfaceForm{



	    border-top-left-radius: 4px;



    border-top-right-radius: 4px;







    text-align: center;



    color: grey;



    position: fixed;



    bottom: -1px;



    right: 3%;



    float: left;



    width: 333px;



    background-color: white;



   



    box-shadow: 0px 0px 12px #403e3e;



        height: 514px;



}





.interfaceForm.cambio .interfaceFormHeader{

    

background: rgb(0,165,81);

background: -moz-linear-gradient(194deg, rgba(0,165,81,1) 21%, rgba(66,166,114,1) 70%);

background: -webkit-linear-gradient(194deg, rgba(0,165,81,1) 21%, rgba(66,166,114,1) 70%);

background: linear-gradient(194deg, rgba(0,165,81,1) 21%, rgba(66,166,114,1) 70%);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00a551",endColorstr="#42a672",GradientType=1);



}







.interfaceForm.cambio .interfaceFormBody .btn-primary{

    background:#00A551;

}











.interfaceFormBtn, .interfaceForm{



    z-index: 50000; 



}



.interfaceFormBody{



		padding:15px;







}











.interfaceForm form{



    padding-bottom: 53%;



}







.interfaceFormBody h3{



    font-size: 20px;



    font-weight: bold;



    margin: 0;



        color: #727272;



}











.interfaceFormBody .title{



    margin: 16px 0;







}











.interfaceFormBody a h3{



    color: white;



}







.interfaceForm textarea{



	width: 99%;



	height:150px;



}







.interfaceForm input{



       display: block !important;

    width: 100% !important;

    height: 34px !important;

    padding: 6px 12px !important;

    font-size: 14px !important;

    line-height: 1.42857143 !important;

    color: #555 !important;

    background-color: #fff !important;

    background-image: none !important;

    border: 1px solid #ccc !important;

    border-radius: 4px !important;

    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;

    box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !important;

    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s !important;

    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s !important;

    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s !important;



        width: 99% !important;

    height: 57px !important;



}







.interfaceForm  input::placeholder { color: #ccc !important; }









.interfaceForm input#nombre-wsp{



	background: url(../storage/img/wsp-chat/icon-input-name.png) no-repeat scroll 7px 17px !important;

    

    



    padding-left: 30px !important;



}







.interfaceForm input#telefono-wsp{



	background: url(../storage/img/wsp-chat/icon-input-phone.png) no-repeat scroll 7px 17px !important;

    padding-left: 30px !important;



}











.interfaceForm input#email-wsp{



    background: url(../storage/img/wsp-chat/icon-input-email.png) no-repeat scroll 7px 20px !important;



    padding-left: 30px !important;



}











.interfaceFormHeader{



	color:white;



    border-top-left-radius: 4px;



    border-top-right-radius: 4px;



    background-color: #00c9a3;



    padding:5px;





}







.interfaceFormHeader img{



	width: 128px;



	height: 40px;



    margin-left: 24px !important;



}







.interfaceFormBtn{



	border-radius: 15px;



	text-align: center;



	color:white;



	position:fixed;



	bottom:10px;



    right: 6px;



	float:right;



	background-color: #00c9a3;



    width: 209px;



   padding: 15px 10px 15px 10px;



        box-shadow: 0px 4px 20px #403e3e;



}





.interfaceFormBtn.cambio{



    background:red;

    padding: 19px 7px 17px 10px;

    border-radius: 50%;

    width: 65px;

        height: 65px;

    

background: rgb(0,165,81);

background: -moz-linear-gradient(194deg, rgba(0,165,81,1) 21%, rgba(66,166,114,1) 70%);

background: -webkit-linear-gradient(194deg, rgba(0,165,81,1) 21%, rgba(66,166,114,1) 70%);

background: linear-gradient(194deg, rgba(0,165,81,1) 21%, rgba(66,166,114,1) 70%);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00a551",endColorstr="#42a672",GradientType=1);

}











.interfaceFormBtn.cambio img{

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    margin: auto !important;

    margin-top: auto !important;

    /* margin-top: unset !important; */

    margin-right: auto !important;

    width: unset !important;

    height: unset !important;



}





.interfaceFormBtn h3{

        

		font-weight: bolder;



		color:white;

        font-size: 18px;



        margin: 0px !important;

        padding: 0px !important;







}





.interfaceFormBtn.cambio h3{

        

        display:none !important;







}











.interfaceFormBody .btn-primary {



        color: #ffffff;



    background-color: #00ff6a;



    border: unset !important;



    font-weight: bolder;



    width: 80%;



    line-height: 2px;



    padding: 13px;



    /* vertical-align: middle; */







}







#interfaceForm .btn-primary:hover {



    color: #ffffff;



    background-color: #25d366;



    border:unset !important;



}











#interfaceForm .error,#interfaceFormXs .error{



    

	    display: none;

    float: left;

    color: #00ff6a;

    /* padding: 9px; */

    margin-bottom: 11px;

    margin-top: 9px;

    



}



















/* Preloader */







/* Preloader */







.interfaceForm #preloader {



       position: absolute;



    top: 0;



    left: 0;



    right: 0;



    bottom: 0;



    background-color: rgba(255, 255, 255, 0.5);



    z-index: 10043;



    height: auto;



    opacity: 1;



    color: #1a9cd6;



    text-align: center;



    /* display: none; */







}







.interfaceForm #preloader .confirm-container{



        position: absolute;



    top: 0;



    bottom: 0;



    left: 0;



    right: 0;



    margin: auto;



    width: 25%;



    height: 100px;



}







.interfaceForm #preloader img{



        width: 200px;



    margin-left: auto;



    margin-right: auto;



    display: block;



}







.interfaceForm #preloader .exito{



    position: absolute;



    top: 0;



    bottom: 0;



    left: 0;



    width: 50%;



    margin: auto;



    right: 0;



    height: 400px;



}







.interfaceForm #status {



 position: absolute;



    left: 0;



    top: -24%;



    bottom: 0;



    right: 0;



    margin: auto;



    /* margin-right: auto; */



    /* margin-top: 16%; */



}







.interfaceForm .spinner-sm {



      border: 3px solid grey;



        border-top: 3px solid #25d366;



    border-radius: 50%;



    width: 30px;



    height: 30px;



    animation: spin 1s linear infinite;



}





@keyframes spin {



    0% { transform: rotate(0deg); }



    100% { transform: rotate(360deg); }



}







@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation:landscape) {

    

    .interfaceFom{

        height:200px !important;

    

    }





    .interfaceFormBtn{



    padding: 12px 10px 12px 10px !important;



}



 

}



@media only screen and (max-width: 767px) {



    .interfaceFormBtn.cambio{

        width: 50px;

        height: 50px;

    }



    .interfaceFormBtn.cambio img{

    width: 24px !important;

    height: 24px !important;



    }





     #interfaceFormBtn{

        display:none;

    }





    #interfaceFormBtnXs{

        display:block;

    }



    .interfaceFormBtn h3

    {

        font-size: 15px !important;

    }



    .interfaceFormBtn{



    padding: 12px 10px 12px 10px !important;



}



.interfaceFormBtn {







    width: 49px;

    border-radius:50%;







}







.interfaceForm {



    left: 0;



    right: 0;



    float: unset;



    margin: auto;











}

}