/*=================================================







Project: WhatsChat - WhatsApp Chat Widget jQuery Plugin



Author: Black Theme



Released On: 4, Sep 2019



@version: 1.0



 



===================================================*/







/*==================================================



[Table of Contents For Main Layout]



* WhatsChat Main Layout CSS



* WhatsChat Sidebar Togle CSS



* WhatsChat Style10 DropDown Menu CSS



====================================================*/









/*========================================



	Start WhatsChat Main Layout CSS



==========================================*/



/* Layout Section Seperator Line */



.layout .wrapper{



	padding-bottom: 115px;



	margin-top: -15px;



}



.layout .wrapper .divider{



	position: relative;



	margin-top: 90px;



	height: 1px;



}



.layout .wrapper .div-transparent:before{



	content: "";



	position: absolute;



	top: 0;



	left: 5%;



	right: 5%;



	width: 90%;



	height: 1px;



	background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);



}



.layout .wrapper .div-dot:after{



	content: "";



	position: absolute;



	z-index: 1;



	top: -9px;



	left: calc(50% - 9px);



	width: 18px;



	height: 18px;



	border: 1px solid rgb(48,49,51);



	border-radius: 50%;



	box-shadow: inset 0 0 0 2px white,



					0 0 0 4px white;



}







/* Layout Title Section */



.layout .title{



	padding: 25px;



}







/* Layout Heading */



.layout .layout-heading{



	margin-top: 20px;



	margin-bottom: 20px;



	text-align: center;



}



.layout .layout-heading img{



	width: 100px;



}



.layout .layout-heading h2{



	display: inline-block;



	position: relative;



	font-size: 25px;



	font-weight: 700;



	text-transform: capitalize;



}



.layout .layout-heading p{



	margin-bottom: 5px;



	font-size: 14px;



}











/* Layout features */



.layout .layout-style{



	padding-bottom: 20px;



}



.layout .layout-style-title{



	margin-bottom: 63px;



	text-align: center;



}



.layout .layout-style-title h3{



	display: inline-block;



	position: relative;



	font-weight: 700;



	font-size: 20px;



	text-transform: capitalize;



}



.layout .layout-style-title p{



	margin-bottom: 5px;



	font-size: 14px;



}







/* Style Images */



.wc-thumb{



    margin-bottom: 30px;



}







img.wc-zoom {



    border-radius:5px;



    object-fit:cover;



	box-shadow: 0px 0px 10px #bcbaba;



    -webkit-transition: all .3s ease-in-out;



    -moz-transition: all .3s ease-in-out;



    -o-transition: all .3s ease-in-out;



    -ms-transition: all .3s ease-in-out;



}



.transition {



    -webkit-transform: scale(1.1); 



    -moz-transform: scale(1.1);



    -o-transform: scale(1.1);



    transform: scale(1.1);



}







/* Layout features */



.layout .layout-features-title{



	margin-bottom: 22px;



	text-align: center;



}



.layout .layout-features-title h3{



	display: inline-block;



	position: relative;



	font-weight: 700;



	font-size: 20px;



	text-transform: capitalize;



}



.layout .layout-features-title p{



	margin-bottom: 5px;



	font-size: 14px;



}







/* Layout Features */



.layout .layout-features{



	padding: 40px 5px;



	text-align: center;



}



.layout .layout-features i{



    font-size: 45px;



	border-radius: 10px;



}



.layout .layout-features h4{



	margin-top: 20px;



	font-size: 18px;



    font-weight: 600;



}



.layout .layout-features p{



	margin-bottom: 5px;



	font-size: 14px;



}







/* Layout Funcation */



.layout .layout-funcation-title{



	margin-bottom: 64px;



	text-align: center;



}



.layout .layout-funcation-title h3{



	display: inline-block;



	position: relative;



	font-weight: 700;



	font-size: 20px;



	text-transform: capitalize;



}



.layout .layout-funcation-title p{



	margin-bottom: 5px;



	font-size: 14px;



}



.layout .layout-funcation .layout-funcation-odd{



    padding: 20px 20px 25px;



	width: 100%;



	text-align: center;



}



.layout .layout-funcation .layout-funcation-even{



	padding: 20px;



	width: 100%;



	text-align: center;



	border-left: 10px solid #eee;



	border-right: 10px solid #eee;



}



.layout .layout-funcation .icon-space{



    font-size: 30px;



}



.layout .layout-funcation h4{



	margin-top: 20px;



	font-size: 18px;



    font-weight: 600;



}



.layout .layout-funcation p{



	margin-bottom: 5px;



	font-size: 15px;



    font-weight: 400;



}



.layout .footer{



	padding: 20px;



	text-align: center;



	background-color: #222;



}



.layout .footer p{



	margin-bottom: 0;



    width: 100%;



	font-size: 15px;



    font-weight: 500;



    color: #fff;



}



/*========================================



	End WhatsChat Main Layout CSS



==========================================*/







/*==============================================



	Start WhatsChat Sidebar Togle CSS



================================================*/







/* MP Color */  



.wc-setting{



	display: block;



	position: fixed;



	top: 8%;



	left: 0px;



	width: 210px;



	box-shadow: 3px 0px 5px rgba(68, 68, 68, 0.18);



	z-index: 99;



}



.wc-setting .icon{



	position: absolute;



	margin-top: -13.5px;



	top: 50%;



	bottom: -24px;



	right: -49px;



	width: 50px;



	height: 50px;



	line-height: 50px;



	font-size: 32px;



	text-align: center;



	border-radius: 0 6px 6px 0;



	box-shadow: 3px 0px 5px rgba(68, 68, 68, 0.18);



	cursor: pointer;



}



.wc-setting,



.wc-setting .icon{



	background-color: #fff;	



}



.wc-setting .icon i{



	padding: 10px;



	font-size: 30px;



	cursor: pointer;	



}



.wc-header{



	display: block;



	padding: 10px;



	text-align: center;



}



.wc-setting .wc-header h4{



	margin-bottom: 0rem;



	font-size: 14px;



	font-weight: 700;



	text-transform: uppercase;



	color: #fff;



}



.wc-setting .link{



	padding: 20px;



	margin: 0;



	text-align: left;



	list-style: none;	



}



.wc-setting .link li{



	margin-bottom: 5px;



}



.wc-setting .link li i{



	margin-right: 5px;



}



.wc-setting .link li a{



	font-size: 15px;



}



.wc-setting .link li a:hover{



	font-weight: bold;



	text-decoration: none;



}



.wc-setting .icon,



.wc-setting .link li a{



	font-size: 13px;



}



.wc-setting .wc-color{	



	padding: 12px;



	text-align: center;



}



.wc-setting .wc-color span{



	display: inline-block;



	margin: 5px;



	width: 24px;



	height: 20px;



	border-radius: 0;



	cursor: pointer;



}



.wc-setting .wc-color span.color1{



	background: linear-gradient(to right, #796c6c, #362626);/* Light Black */



}



.wc-setting .wc-color span.color2{



	background: linear-gradient(to right, #00eefa, #05b6eb);/* Blue */



}



.wc-setting .wc-color span.color3{



	background: linear-gradient(to right, #26C281, #09e072);/* Green */



}



.wc-setting .wc-color span.color4{



	background: linear-gradient(to right, #ff9f0e, #ff4a10);/* Orange */



}



.wc-setting .wc-color span.color5{



	background: linear-gradient(to right, #ff729b, #ce002f);/* Pink */



}



.wc-setting .wc-color span.color6{



	background: linear-gradient(to right, #b76cd2, #4c3bb3);/* Purple */



}



.wc-setting .wc-color span.color7{



	background: linear-gradient(to right, #fa7d7d, #eb0505);/* Red */



}



.wc-setting .wc-color span.color8{



	background: linear-gradient(to left, #50cc7f, #f5d100);/* Dark Yellow */



}



.wc-setting .wc-color span.color1:hover,



.wc-setting .wc-color span.color2:hover,



.wc-setting .wc-color span.color3:hover,



.wc-setting .wc-color span.color4:hover,



.wc-setting .wc-color span.color5:hover,



.wc-setting .wc-color span.color6:hover,



.wc-setting .wc-color span.color7:hover,



.wc-setting .wc-color span.color8:hover{



	box-shadow: 1px 2px 3px;



}







/* Media Css for Smaller Device */



@media(max-width: 576px){



	.wc-setting{



	    top: 3%;



	}



}







/*==============================================



	End WhatsChat Sidebar Togle CSS



================================================*/







/*==============================================



	Start WhatsChat Style10 DropDown Menu CSS



================================================*/



/* Layout Button */



.layout .layout-button-title{



	margin-bottom: 22px;



	text-align: center;



}



.layout .layout-button-title h3{



	display: inline-block;



	position: relative;



	font-weight: 700;



	font-size: 20px;



	text-transform: capitalize;



}



.layout .layout-button-title p{



	margin-bottom: 5px;



	font-size: 14px;



}







/* WhatsChat Button Style DropDown */



.old-select{



    position: absolute;



    top: -9999px;



    left: -9999px;



}



.wc-dropdown .new-select{



    width: 300px;



    height: 50px;



    margin: auto;



    margin-top: 40px;



    margin-bottom: 60px;



    text-align: center;



    line-height: 50px;



    position: relative;



}



.wc-dropdown .new-select .selection:active{



    transform:         rotateX(42deg);



    -o-transform:      rotateX(42deg);



    -ms-transform:     rotateX(42deg);



    -moz-transform:    rotateX(42deg);



    -webkit-transform: rotateX(42deg);



    transform-style:         preserve-3d;



    -o-transform-style:      preserve-3d;



    -ms-transform-style:     preserve-3d;



    -moz-transform-style:    preserve-3d;



    -webkit-transform-style: preserve-3d;



    transform-origin:         top;



    -o-transform-origin:      top;



    -ms-transform-origin:     top;



    -moz-transform-origin:    top;



    -webkit-transform-origin: top;



    transition:         transform         200ms ease-in-out;



    -o-transition:      -o-transform      200ms ease-in-out;



    -ms-transition:     -ms-transform     200ms ease-in-out;



    -moz-transition:    -moz-transform    200ms ease-in-out;



    -webkit-transition: -webkit-transform 200ms ease-in-out;



}



.wc-dropdown .new-select .selection{



    width: 100%;



    height: 100%;



    border-radius: 10px;



    box-shadow: 0 1px 1px rgba(0,0,0,0.1);



    cursor: pointer;



    position: relative;



    z-index: 20; /* Doit être supérieur au nombre d'option */ 



    transform:         rotateX(0deg);



    -o-transform:      rotateX(0deg);



    -ms-transform:     rotateX(0deg);



    -moz-transform:    rotateX(0deg);



    -webkit-transform: rotateX(0deg);



    transform-style:         preserve-3d;



    -o-transform-style:      preserve-3d;



    -ms-transform-style:     preserve-3d;



    -moz-transform-style:    preserve-3d;



    -webkit-transform-style: preserve-3d;



    transform-origin:         top;



    -o-transform-origin:      top;



    -ms-transform-origin:     top;



    -moz-transform-origin:    top;



    -webkit-transform-origin: top;



    transition:         transform         200ms ease-in-out;



    -o-transition:      -o-transform      200ms ease-in-out;



    -ms-transition:     -ms-transform     200ms ease-in-out;



    -moz-transition:    -moz-transform    200ms ease-in-out;



    -webkit-transition: -webkit-transform 200ms ease-in-out;



}



.wc-dropdown .new-select .selection p{



    width: calc(100% - 60px);



    position: relative;



    



    transition:         all 200ms ease-in-out;



    -o-transition:      all 200ms ease-in-out;



    -ms-transition:     all 200ms ease-in-out;



    -moz-transition:    all 200ms ease-in-out;



    -webkit-transition: all 200ms ease-in-out;



}



.wc-dropdown .new-select .selection i{



    display: block;



    width: 1px;



    height: 70%;



    position: absolute;



    right: -1px; top: 15%; bottom: 15%;



    border: none;



    background-color: #bbb;



}



.wc-dropdown .new-select .selection > span{



    display: block;



    position: absolute;



    top: 18px;



    right: 22px;



    width: 0;



    height: 0;



    border-style: solid;



    border-width: 14px 8px 0 8px;   



}



.wc-dropdown .new-select .selection.open > span{



    width: 0;



    height: 0;



    border-style: solid;



    border-width: 0 8px 14px 8px;



}



.wc-dropdown .new-option{



    text-align: center;



    cursor: pointer;



    border: 1px solid #dedcdc;



    border-radius: 10px 10px 10px 10px;



    box-shadow: 0 1px 1px rgba(0,0,0,0.1);



    position: relative;



    margin-top: -1px;    



    position: absolute;



    left: 0; right: 0;    



    transition:         all 300ms ease-in-out;



    -o-transition:      all 300ms ease-in-out;



    -ms-transition:     all 300ms ease-in-out;



    -moz-transition:    all 300ms ease-in-out;



    -webkit-transition: all 300ms ease-in-out;



}



.wc-dropdown .new-option p{



	margin-bottom: 0;



    width: calc(100% - 60px);



}



/*==============================================



	End WhatsChat Style10 DropDown Menu CSS



================================================*/