/* slide out draw widget */
.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0, 0.65);
    z-index: 9999;
    display:none;
   
}







#wd-drawer {
    position: fixed;
    overflow:none;
    bottom: 0px;
    top: 0;
    right: -101%;
    left: initial;
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    display: block;
    border-radius: 0;
    border: 0;
    z-index: -1;
    transition: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23) !important;
    margin-bottom: 0 !important;
}
#wd-drawer.in {
    right:0;
    z-index: 15000000;

}


#wd-drawer .drawer-wrap {
    height:100%;
    min-height: 100%;
    max-height: 100%;
    width:100%;
    position: relative;
}

#wd-drawer .drawer-footer {
    position: absolute;
    top:auto;
    bottom:0;
    left: 0;
    right:0;
    height:50px;
    padding: 0 17px;
    width: 100%;
    background: #FFF;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    z-index: 15000100;
}
#wd-drawer .drawer-footer-title {

    position: absolute;
    top:0;
    left: 0;
    right:0;
    height:50px;
    z-index: 15000100;
    line-height: 50px;
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    font-weight: 500;
    font-size: 9px;
    text-transform: uppercase;
    text-decoration: none;
    color: #AAA;
}


i.tudodesk 
{
opacity: .5;
display: inline-block;
position: relative;
margin-right: 5px;
top: 1px;
width: 9px;
height: 9px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAE2SURBVBiVVdA/SwJhHAfw7++ee+D6A4J/qMMw1MVIDEIEacnWoNbiAmlzcSkIonfQWItTcJD0BhrcCowcosFAAqEg4jgbEirE8J7nfs19XsKHAKBcc5NKm3UGOwBsBg8I1JRCn3UaVY/KNTcZhOICjAoBspBNIBqx0O56gdL6Vopw31TarANcISKZT8dwuFMEM0NrlndP3rrSRt1gsEOAXE7HcLxXwtvgG6dXD8iloijm5iQzOwYAu5BN4Gi3iBfvC/lMHPHIFH4nCpvlDECwTQB+NGIt6JDhtnpIJmaxtZbFjCXx2P8AM3yTQM121zsYjQO5sZrCeKIwbUn8jANc378GBnFTLJa2n1VIK/7nKCVNIUpL8+i/D+G2eoE/HN1IEZ7QvydmBwQ7BA8EjEtTqPNOo+r9AZzygWimlJrjAAAAAElFTkSuQmCC);
}

#wd-drawer a:hover > .drawer-footer-title {
  color: #333;
}
#wd-drawer a:hover > .drawer-footer-title i.tudodesk {
  opacity: 1;
}

#wd-drawer .drawer-header {
    position: absolute;
    top:0;
    left: 0;
    right:0;
    height:50px;
    padding: 0 17px;
    width: 100%;
    background: #FFF;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    z-index: 15000100;
    text-align: center;
}
#wd-drawer .drawer-header-title {
    position: absolute;
    top:0;
    left: 0;
    right:0;
    height:50px;
    width: 100%;
    z-index: 15000100;
    line-height: 50px;
    font-size: 15px;
    font-weight: 500;
    max-width: 300px;
    margin: 0 auto;
    color: rgb(69, 90, 100);
}

#wd-drawer .drawer-header .wd_close_drawer {
    position: fixed;
    top: 0;
    height: 50px;
    right: 0;
    width: 50px;
    font-size: 26px;
    z-index: 15000101;
    font-weight: 300;
}




#wd-drawer .drawer-body {
    position: absolute;
    top:51px;
    bottom:51px;
    left: 0;
    right:0;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    width:100%;
    background: #f1f1f1;
}

#wd-drawer #livechat-section .drawer-body {
    top: 116px;
}


#wd-drawer #review-section .drawer-body {
    top: 51px;
}




.drawer-body .drawer-content {
  position: relative;
  padding: 0 30px;
  margin: 30px 0;
}



.drawer-body::-webkit-scrollbar {
    width: 3px;
}
.drawer-body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.drawer-body::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.5); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.35); 
}
.drawer-body::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(0,0,0,0.25); 
}




#wd-drawer .form-control {
    border: 1px solid #cdd5d7;
    background-color: #f4f6fc;
    border-radius: 3px;
    padding: 6px 10px;
    margin: 0;
    height: auto;
    font-size: 15px;
    line-height: 20px;
}

#wd-drawer .has-danger .form-control-feedback {
    display:block;
}

#wd-drawer .form-control-feedback {
    margin-top: .25rem;
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 500;
    display:none;
}



.wd_open_drawer, .wd_close_drawer {
    cursor: pointer;
}
/* media stuff for slide out widget */


@media (min-width: 48em) {
    #wd-drawer {
        width:400px;
        max-width:100%;
        right:-410px;
        transition: right .20s linear;
    }    
}


/* 

floating widget 

*/


.floating-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1200;
}



.floating-widget a.btn {
   width: 60px;
   height: 60px;
   min-width: 60px;
   padding: 0;
   border-radius: 50%;
   border:0;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}

.floating-widget .inbox-count {
    position: absolute;
    right: 5px;
    top: -5px;
    padding: 2px 5px;
    background: #f93f56;
    border-radius: 50%;
    color: white;
    font-size: small;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
    line-height: 1;
    border: 1px solid rgba(10, 10, 10, 0);
    font-weight: 300;
    opacity: 1;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}


.floating-widget .inbox-count:empty {
   opacity:0;
}


.floating-widget .msg-bubble {
    width: 340px;
    bottom: 75px;
    left: -285px;
    min-height: 100px;
    background: #fff;
    position: absolute;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 8px 0 rgba(35,47,53,.2);
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.floating-widget .msg-bubble:empty {
    opacity: 0;
}



.floating-widget a span {
    line-height: 60px !important;
}

.floating-widget a i {
    color: #fff;
}






.signature {
 border-radius: 4px;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
 border: 1px solid #ddd; 
}
.signature-head {
    background: #eee;
    border-bottom: 1px solid #ddd;
    padding: 5px 10px;
}
.signature-wrap {
    padding:5px;
}
.signature-pad {
    position:relative;
    width: 100%;
    height:175px;
    background-color: #fff;
    border: 1px solid #eee;
    margin-bottom:5px;
}

.signature-pad canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
  }

.signature-clr {
    
  }
.signature-footer {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    color:#777;
    text-align: center;
    margin-top:10px;
}



/* Let's get this party started */
::-webkit-scrollbar {
    width: 8px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.5); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.35); 
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(0,0,0,0.25); 
}


.scroll {
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.scroll::-webkit-scrollbar {
    width: 4px;
}

.scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0;
    border-radius: 0; 
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}  

label {
    text-transform: uppercase;
    color: #555;
    font-size: 10px;
    margin:0; 
}

.drawer-content .form-group {
    margin-bottom: .5rem;
}

.braintree-well {
    background: #FAFAFA;
    border-radius: 4px;
    color: #000;
    font-size: 14px;
    margin: 0 auto;
    padding: 18px;
    width: 100%;
    margin-bottom: 15px;
}