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

Project: FB Chat - Facebook Chat Widget jQuery Plugin
Author: Black Theme
Released On: 4, Sep 2019
@version: 1.0 
 
===================================================*/

/*==================================================
[Table of Contents For Main Layout]
* FB Chat Loader CSS ( only for demo )
* FB Chat Floating Button CSS ( only for demo )
* FB Chat Sidebar Togle CSS (required) 
* FB Chat Modal Window CSS (required) 
* FB Chat Login Form CSS (required) 
* FB Chat Form Alert CSS (required)
* FB Chat Form Layout CSS (required)
* FB Chat Style Profile CSS (required)
* FB Chat User Table CSS (required)
====================================================*/

body{
	margin: 0 auto;
	font-weight: normal;
	font-size: 18px;
	color: #222;
	letter-spacing: 1px;
	height: 100%;
	margin: 0;
	background: #FFF;
	font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a:hover, a:focus{
    text-decoration: none;
    outline: none;
}

/*==================================================
    Start FB Chat Loader CSS ( only for demo )
====================================================*/

/* Layout Loader CSS */
.fb-loader-container{
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgb(0, 0, 0.83);
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    z-index: 999999; 
}
.fb-loader{
    border: 12px solid #1dd9b8;
    border-radius: 50%;
    border-top: 12px double #1dd9b8;
    border-bottom: 12px double #1dd9b8;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*==================================================
    End FB Chat Loader CSS
====================================================*/

/*==================================================
    Start FB Chat Floating Button CSS ( only for demo )
====================================================*/

.fb-float{
    position:fixed;
    bottom:20px;
    right:20px;
    width:50px;
    height:50px;
    color:#fff;
    text-align:center;
    border-radius:50px;
    box-shadow: 0 0 5px #999;
    background:linear-gradient(to right, #2af598, #009efd);
    z-index: 999;
}
.fb-float:hover{
    color:#fff;
    box-shadow: 0 0 13px #999;
    -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;
}
.fb-float-plus{
    margin-top:18px;
}

/*==================================================
    End FB Chat Floating Button CSS
====================================================*/

/*==================================================
	Start FB Chat Sidebar Togle CSS (required)
====================================================*/

/* MP Color */  
.fb-setting{
	display: block;
	position: fixed;
	top: 35%;
	left: 0px;
	width: 210px;
	box-shadow: 3px 0px 5px rgba(68, 68, 68, 0.18);
	z-index: 99999;
}
.fb-setting .fb-header{
	display: block;
	padding: 10px;
	text-align: center;
    background: -webkit-linear-gradient(to right, #2af598, #009efd);
    background: -moz-linear-gradient(to right, #2af598, #009efd);
    background: -ms-linear-gradient(to right, #2af598, #009efd);
    background: -o-linear-gradient(to right, #2af598, #009efd);
    background: linear-gradient(to right, #2af598, #009efd);
}
.fb-setting .fb-header p{
	padding: 5px 10px;
	border: 1px solid #fff;
	color: #fff;
	font-size: 15px;
	line-height: 24px;
	cursor: pointer;
}
.fb-setting .fb-header p:last-child{
	margin-bottom: 0;
}
.fb-setting .fb-header p a{
	color: #fff;
}
.fb-setting .icon{
	position: absolute;
	margin-top: -13.5px;
	top: 40%;
	right: -50px;
	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;
}
.fb-setting,
.fb-setting .icon{
	background-color: #fff;	
}
.fb-setting .icon i{
	padding: 10px;
	font-size: 30px;
	cursor: pointer;	
}
/* Common CSS */
.fb-setting .icon,
.fb-setting .link a{
    color: #555;
}
.fb-setting .icon i,
.fb-setting .link a:hover{
    color: #009efd;
}

/* Media Css for Smaller Device */
@media(max-width: 576px){
	.fb-setting{
	    top: 3%;
	}
}

/*==================================================
	End FB Chat Sidebar Togle CSS
====================================================*/

/*==================================================
    Start FB Chat Modal Window CSS (required)
====================================================*/

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 99999;
}
.modal-header .close {
    margin-top: -25px;
    font-size: 30px;
}
.modal-title {
	font-weight: 700;
    text-align: center;
	color: #999;
}
.modal .fb-change-password{
	padding: 10px;
}
.modal .fb-user-title-div {
    padding: 30px !important;
}
/*==================================================
	End FB Chat Modal Window CSS
====================================================*/

/*==================================================
    Start FB Chat Login Form CSS (required)
====================================================*/

.fb-login{
	padding: 50px 10px;
}
.fb-login .fb-form-data .form-group label {
    width: 120px;
}
.fb-login .fb-form-data .form-group input {
	width: 100%;
}

/*==================================================
    End FB Chat Login Form CSS
====================================================*/

/*==================================================
    Start FB Chat Form Alert CSS (required)
====================================================*/

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
    font-weight: 700;
    font-size: 18px;
    color: #3c3c3c;
}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content div{
    font-size: 15px;
}
.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default, 
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default {
    font-size: 13px;
    color: #3c3c3c;
}

/*==================================================
    End FB Chat Form Alert CSS
====================================================*/

/*==================================================
    Start FB Chat Form Layout CSS (required)
====================================================*/
/* Plugin Dashboard Header Line */
.fb-plugin-title-div{
	padding: 50px;
	border-radius: 5px;
	border: 1px solid #ccc;
	text-align: center;
	color: #fff;
	background: linear-gradient(to right, #2af598, #009efd);
}
.fb-plugin-title-div h4{
    font-size: 22px;
    text-transform: uppercase;
}
.fb-plugin-title-div p{
    font-size: 17px;
}

/* Layout Section Seperator Line */
.fb-nav li.active{
	font-weight: 700;
}
.fb-nav li a{
    font-size: 15px;
    color: #959393;
    background: #eee;
}

/* Tab Contatiner */
.fb-tab{
    padding-bottom: 25px;
}

/* Form Container CSS */
.fb-form-data{
	padding: 20px;
	color: #383838;
	background: #eee;
}
.fb-form-data .form-group{
	display: flex;
}
.fb-form-data .form-group .form-control{
	height: auto;
}
.fb-user-form .form-group input[type="file"]{
	padding: 25px 10px;
	width: 44%;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
}
.fb-form-data .form-group label{
    padding-right: 10px; 
	margin-bottom: 0;
	line-height: 30px;
	width: 40%;
	font-size: 15px;
}
.fb-form-data .form-group .btn{
    font-weight: 600;
    border: none;
    color: #fff;
    background: linear-gradient(to right, #2af598, #009efd);
}
.fb-form-data .form-group .btn:hover{
    background: linear-gradient(to right, #009efd, #2af598);
}

/* Common CSS */
.fb-alert,
.fb-form-data .fb-preview-image{
	display: none;
}
.fb-form-data .form-group select,
.fb-form-data .form-group input{
	width: 60%;
	font-size: 15px;
}
.fb-form-data .fb-style-title-div,
.fb-form-data .fb-user-title-div,
.fb-form-data .fb-save-btn-div{
	display: block !important;
	text-align: center;
}
.fb-form-data .fb-style-title-div,
.fb-form-data .fb-user-title-div{
    padding: 50px;
    border-radius: 5px;
    border: 1px solid #ccc;
    color: #fff;
    background: linear-gradient(to right, #2af598, #009efd);
}
.fb-form-data .fb-style-title-div h4,
.fb-form-data .fb-user-title-div h4{
    font-size: 20px;    
    text-transform: uppercase;
}
.fb-form-data .fb-style-title-div p,
.fb-form-data .fb-user-title-div p{
    font-size: 15px;
}


/*==============================================
	  End FB Chat Form Layout CSS
================================================*/

/*==============================================
	  Start FB Chat Style Profile CSS (required)
================================================*/

/* FB Chat Style Form Layout */
.fb-form-data .fb-style-image-div{
    display: block;
    text-align: center;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 10px;
    background: #fff;
}
.fb-form-data .fb-style-image-div img{
    max-width: 100%;
}
.fb-form-data .fb-save-btn-div{
    padding-top: 5px;
    margin-bottom: 0;
}

/* FB Chat Style Profile */
.fb-active-style{
    margin: 0;
    border-radius: 5px;
    border: 2px solid #eee;
    background-color: #fff;
    box-shadow: none;
    box-sizing: border-box;
}

/* FB Chat Style Profile Header */
.fb-active-style .fb-header,
.fb-active-style .fb-img-header{
    padding: 15px 0;
    text-align: center;
}
.fb-active-style .fb-header .fb-style-img{
    width: 60%;
    border-radius: 5px;
}
.fb-active-style .fb-img-header img{
    width: 100%;
    border-radius: 5px;
}
.fb-active-style .fb-img-header .fb-style-img{
    padding-bottom: 20px;
}
.fb-active-style .fb-img-header .fb-no-style-img{
    padding-bottom: 0;
}

/* FB Chat Style Profile Body */
.fb-active-style .fb-body{
	text-align: center;
    background: #eee;
}
.fb-active-style .fb-body p{
    padding: 10px;
	font-size: 15px;
}
.fb-active-style .fb-body .fb-style-title{
    margin-bottom: 0;
    padding: 20px;
}
.fb-active-style .fb-body .fb-btn-style-title{
    padding-top: 0;
}
.fb-active-style .fb-body .fb-color{
    padding: 20px;
}

.fb-active-style .fb-body .fb-color-black{
	background: -webkit-linear-gradient(to right, #796c6c, #121010);
    background: -moz-linear-gradient(to right, #796c6c, #121010);
    background: -ms-linear-gradient(to right, #796c6c, #121010);
    background: -o-linear-gradient(to right, #796c6c, #121010);
    background: linear-gradient(to right, #796c6c, #121010);
}
.fb-active-style .fb-body .fb-color-blue{
	background: -webkit-linear-gradient(to right, #2af598, #009efd);
    background: -moz-linear-gradient(to right, #2af598, #009efd);
    background: -ms-linear-gradient(to right, #2af598, #009efd);
    background: -o-linear-gradient(to right, #2af598, #009efd);
    background: linear-gradient(to right, #2af598, #009efd);
}
.fb-active-style .fb-body .fb-color-green{
	background: -webkit-linear-gradient(to right, #2af598, #09e072);
    background: -moz-linear-gradient(to right, #2af598, #09e072);
    background: -ms-linear-gradient(to right, #2af598, #09e072);
    background: -o-linear-gradient(to right, #2af598, #09e072);
    background: linear-gradient(to right, #2af598, #09e072);
}
.fb-active-style .fb-body .fb-color-orange{
	background: -webkit-linear-gradient(to right, #ff9f0e, #ff4a10);
    background: -moz-linear-gradient(to right, #ff9f0e, #ff4a10);
    background: -ms-linear-gradient(to right, #ff9f0e, #ff4a10);
    background: -o-linear-gradient(to right, #ff9f0e, #ff4a10);
    background: linear-gradient(to right, #ff9f0e, #ff4a10);
}
.fb-active-style .fb-body .fb-color-pink{
	background: -webkit-linear-gradient(to right, #ff729b, #ce002f);
    background: -moz-linear-gradient(to right, #ff729b, #ce002f);
    background: -ms-linear-gradient(to right, #ff729b, #ce002f);
    background: -o-linear-gradient(to right, #ff729b, #ce002f);
    background: linear-gradient(to right, #ff729b, #ce002f);
}
.fb-active-style .fb-body .fb-color-purple{
	background: -webkit-linear-gradient(to right, #b76cd2, #4c3bb3);
    background: -moz-linear-gradient(to right, #b76cd2, #4c3bb3);
    background: -ms-linear-gradient(to right, #b76cd2, #4c3bb3);
    background: -o-linear-gradient(to right, #b76cd2, #4c3bb3);
    background: linear-gradient(to right, #b76cd2, #4c3bb3);
}
.fb-active-style .fb-body .fb-color-red{
	background: -webkit-linear-gradient(to right, #fa7d7d, #eb0505);
    background: -moz-linear-gradient(to right, #fa7d7d, #eb0505);
    background: -ms-linear-gradient(to right, #fa7d7d, #eb0505);
    background: -o-linear-gradient(to right, #fa7d7d, #eb0505);
    background: linear-gradient(to right, #fa7d7d, #eb0505);
}
.fb-active-style .fb-body .fb-color-yellow{
	background: -webkit-linear-gradient(to right, #f5d100, #50cc7f);
    background: -moz-linear-gradient(to right, #f5d100, #50cc7f);
    background: -ms-linear-gradient(to right, #f5d100, #50cc7f);
    background: -o-linear-gradient(to right, #f5d100, #50cc7f);
    background: linear-gradient(to right, #f5d100, #50cc7f);
}

/* FB Chat Style Profile Footer */
.fb-active-style .fb-footer{
    padding: 10px 10px 20px;
    text-align: center;
}
.fb-active-style .fb-footer .btn{	
    font-weight: 600;
    border: none;
    background: linear-gradient(to right, #2af598, #009efd);    
}
.fb-active-style .fb-footer .btn:hover{   
    font-weight: 600;
    border: none;
    background: linear-gradient(to right, #009efd, #2af598);    
}

/* Common CSS */
.fb-active-style .fb-body .fb-color-black,
.fb-active-style .fb-body .fb-color-blue,
.fb-active-style .fb-body .fb-color-green,
.fb-active-style .fb-body .fb-color-orange,
.fb-active-style .fb-body .fb-color-pink,
.fb-active-style .fb-body .fb-color-purple,
.fb-active-style .fb-body .fb-color-red,
.fb-active-style .fb-body .fb-color-yellow{
	color: #fff;
}

/*==============================================
	End FB Chat Style Profile CSS
================================================*/

/*==============================================
	Start FB Chat User Table CSS (required)
================================================*/

/* FB Chat User Form Layout */
.fb-form-data .fb-preview-image{
    display: none;
    margin-left: 1%;
    width: 15%;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* User Profile Card Layout CSS */
.fb-user-card{
    margin-right: 0;
    margin-left: 0;
}
.fb-user-card .card-col{
	padding: 0 0 15px;
}
.fb-user-card .card-col .card{
    padding: 0;
    margin: 0;
    word-wrap: break-word;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
    background-color: #fff;
    background-clip: border-box;
}
.fb-user-card .card img{
	  padding: 15px 0;
	  width: 100%;
}
.fb-user-card .fb-header .fb-no-user-img{
    width: 100%;
    border-radius: 5px;
}
.fb-user-card .card-col .fb-btn{
    padding: 7px;
    line-height: 14px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    color: #fff;
    background: linear-gradient(to right, #2af598, #009efd);
}
.fb-user-card .card-col .fb-btn:hover{
    background: linear-gradient(to right, #009efd, #2af598);
}

/* User Profile Card Header Section */
.fb-user-card .card-head .fb-active-status{
    padding: 0;
    margin: 0 0 15px;
	text-align: center;
}

/* User Profile Card Body Section */
.fb-user-card .card-body{
    padding: 5px 15px 15px 2px;
}
.fb-user-card .card-body h4{
	  font-size: 18px;
	  font-weight: bold;
	  color: #383838;
}
.fb-user-card .card-body p{
	  margin: 0;
	  font-size: 13px;
}
.fb-user-card .card-body .card-odd{
	  background: #f7f7f7;
}

/* The switch - the box around the slider */
.fb-user-card .card-head .fb-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    float:right;
}

/* Hide default HTML checkbox */
.fb-user-card .card-head .fb-switch input {
    display: none;
}

/* The slider */
.fb-user-card .card-head .fb-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 2px;
    bottom: 0;
    border-radius: 5px;
    background-color: #444;
    -webkit-transition: .4s;
    transition: .4s;
}
.fb-user-card .card-head .fb-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 24px;
    left: 4px;
    bottom: 4px;
    border-radius: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input.fb-default:checked + .fb-slider {
  border-radius: 5px;
    background: linear-gradient(to right, #2af598, #09e072);
}
input:focus + .fb-slider {
    box-shadow: 0 0 1px #2196F3;
}
input:checked + .fb-slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Common CSS */
.fb-user-card .card-body h4,
.fb-user-card .card-body p{
	padding: 10px;
	margin: 0;
}

/* Responsive media css for smaller device */
@media screen and (max-width: 480px){
    
    .fb-form-data .form-group{
        display: block;
    }
    .fb-form-data .form-group label,
    .fb-form-data .form-group select,
    .fb-form-data .form-group input{
        width: 100%;
    }
    .fb-form-data .form-group label{
        font-size: 13px;
    }
    .fb-form-data .form-group label br{
        display: none;
    }
    .fb-user-form .form-group input[type="file"] {
        padding: 2% 10px;
        width: 100%;
    }

    .fb-nav li a{
        font-size: 13px;
    }

    .fb-form-data .fb-preview-image{
        width: 100%;
        margin: 10px 0 0;
    }

    .fb-tab .fb-active-style,
    .fb-tab .fb-user-card{
        margin-top: 20px;
    }
    .fb-tab .fb-style-title-div,
    .fb-tab .fb-user-title-div{
        padding: 10px;
    }
    .fb-user-card .card-body {
        padding: 0 0 15px;
    }
    .fb-user-card .card-body h4, 
    .fb-user-card .card-body p{
        padding: 10px 10px 10px 15px;
    }
}

@media all and (max-width: 659px) and (min-width: 481px){
     
    .fb-form-data .form-group label {
        font-size: 13px;
    }
    .fb-tab .fb-style-title-div,
    .fb-tab .fb-user-title-div{
        padding: 10px;
    }
    .fb-tab .fb-active-style-container,
    .fb-tab .fb-active-user-container{
        margin-top: 30px;
    }

	.fb-nav li a{
		font-size: 13px;
	}
    
    .fb-user-card .card-body {
        padding: 5px 0 15px 2px;
    }

    .fb-user-form .form-group input[type="file"]{
        padding: 4% 10px;
        width: 43%;
    }
    .fb-form-data .fb-preview-image{
        width: 16%;
        margin-top: 0;
    }
}

@media all and (max-width: 1080px) and (min-width: 660px){
     
    .fb-user-card{
        margin-top: -18px;
    } 
    .fb-user-card .card{
        display: inline-flex;
    } 
    .fb-user-card .card .card-head{
        width: 35%;
    }
    .fb-user-card .card .card-body{
        width: 100%;
    }
}

@media all and (max-width: 767px) and (min-width: 660px){
     
    .fb-tab .fb-active-style-container,
    .fb-tab .fb-active-user-container{
        margin-top: 30px;
    }
}

@media all and (max-width: 991px) and (min-width: 768px){
      
    .fb-form-data .form-group label {
        font-size: 12px;
    }
    .fb-user-form .form-group input[type="file"] {
        padding: 17px 10px;
        width: 40%;
    }
}

@media all and (max-width: 1199px) and (min-width: 768px){
     
    .fb-form-data .fb-preview-image {
        width: 19%;
    }
    .fb-user-card .card-head .fb-active-status {
        text-align: center;
    }
    .fb-user-card .card-head .fb-switch {
        float: none;
    }
}

/*==============================================
  End FB Chat User Table CSS
================================================*/