#CeCbody {
/*    background:url(../Content/Images/backGround.jpg) no-repeat;
    background:url(../Content/Images/backGround.jpg) top center no-repeat;  */
    /*background-size: cover;*/
    background-size:100%;
}

#CeCcontainer {
    background:url(../Content/Images/MaAfricaLogoLogin.JPG) no-repeat;
    background:url(../Content/Images/MaAfricaLogoLogin.JPG) top center no-repeat;  

    height:500px;
}


.disabled {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

.Configs {
    text-align:center;
    cursor:pointer;
}
.Configs :hover{
    opacity:0.5;
}


/*summary toggle*/

.downnn:hover{
    cursor:pointer;
    background-color:rgba(0, 130, 255, 0.05);
}


.activeSummary {
    background-color:rgba(255, 164, 0, 0.05);
}

/*summary toggle*/


/*Popup Chat*/

.compose {
  padding: 0;
  position: fixed;
  bottom: 0;
  right: 0;
  background: #fff;
  border: 1px solid #D9DEE4;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 5px;
  z-index: 9999;
  display: none;
}

.compose .compose-header {
  padding: 5px;
  background: #f39c12;
  color: #fff;
  border-top-left-radius: 5px;
}

.compose .compose-header .close {
  text-shadow: 0 1px 0 #ffffff;
  line-height: .8;
}

.compose .compose-body .editor.btn-toolbar {
  margin: 0;
}

.compose .compose-body .editor-wrapper {
  height: 100%;
  min-height: 50px;
  max-height: 180px;
  border-radius: 0;
  border-left: none;
  border-right: none;
  overflow: auto;
}

.compose .compose-footer {
  padding: 10px;
}
/** /inbox **/









/* Modals
---------------------------------- */

/* Large devices (Large desktops 1200px and up) */
@media (min-width: 1200px) {
	.modal-lg {
		width: 1140px;
	}
}





/***SIYA-CSS FOR DIALER**/

.dialerSteps {
position: relative; cursor: pointer;
}

.note {
color:red;
}

.script {
    font-size:large;
}

.DataRequired {
color:green;
}

div.timer {
    border:1px #666666 solid;
    width:190px;
    height:50px;
    line-height:50px;
    font-size:36px;
    font-family:"Courier New", Courier, monospace;
    text-align:center;
    margin:5px;
}

.shine {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: $color;
  background-image: -webkit-linear-gradient(-45deg, rgba(0,0,0,.6) 30%, #aff0ff 50%, rgba(0,0,0,.6) 70%);
  background-blend-mode: hard-light;
  background-size: 200%;
  -webkit-animation: shine 4s infinite;
}













/*Radio Payments*/

label.btn span {
  font-size: 1.5em ;
}



label input[type="radio"] ~ i.glyphicon-unchecked {
    color: #c8c8c8;
    display: inline;
}
label input[type="radio"] ~ i.glyphicon-ok-circle{
    display: none;
}
label input[type="radio"]:checked ~ i.glyphicon-unchecked{
    display: none;
}
label input[type="radio"]:checked ~ i.glyphicon-ok-circle{
    color: #7AA3CC;    display: inline;
}
label:hover input[type="radio"] ~ i.fa {
color: #7AA3CC;
}




label input[type="checkbox"] ~ i.glyphicon-unchecked {
    color: #c8c8c8;
    display: inline;
}
label input[type="checkbox"] ~ i.glyphicon-check {
    display: none;
}
label input[type="checkbox"]:checked ~ i.glyphicon-unchecked {
    display: none;
}
label input[type="checkbox"]:checked ~ i.glyphicon-check {
    color: #7AA3CC;
    display: inline;
}
label:hover input[type="checkbox"] ~ i.fa {
color: #7AA3CC;
}

div[data-toggle="buttons"] label.active{
    color: #7AA3CC;
}

div[data-toggle="buttons"] label {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 2em;
text-align: left;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
background-color: none;
border: 0px solid 
#c8c8c8;
border-radius: 3px;
color: #c8c8c8;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

div[data-toggle="buttons"] label:hover {
color: #7AA3CC;
}


.clsHoover:hover {
    box-shadow: 0px 0px 70px 10px #607D8B  inset;
    /*-webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;*/
}










@keyframes blinkTextWarning {
    0% {
        text-shadow: 0px 0px 6px #EAC700
    }

    50% {
        text-shadow: 8px 8px 8px;
    }

    100% {
        text-shadow: 0px 0px 6px #EAC700
    }
}

@-webkit-keyframes blinkTextWarning {
    0% {
        text-shadow: 0px 0px 6px #EAC700
    }

    50% {
        text-shadow: 8px 8px 8px;
    }

    100% {
        text-shadow: 0px 0px 6px #EAC700
    }
}

.blinkTextWarning {
    -webkit-animation: blinkTextWarning 1.0s linear infinite;
    -moz-animation: blinkTextWarning 1.0s linear infinite;
    -ms-animation: blinkTextWarning 1.0s linear infinite;
    -o-animation: blinkTextWarning 1.0s linear infinite;
    animation: blinkTextWarning 1.0s linear infinite;
}







@keyframes blinkText {
    0% {
        text-shadow: 0px 0px 7px #00D803
    }

    50% {
        text-shadow: 8px 8px 8px;
    }

    100% {
        text-shadow: 0px 0px 7px #00D803
    }
}

@-webkit-keyframes blinkText {
    0% {
        text-shadow: 0px 0px 7px #00D803
    }

    50% {
        text-shadow: 8px 8px 8px;
    }

    100% {
        text-shadow: 0px 0px 7px #00D803
    }
}

.blinkText {
    -webkit-animation: blinkText 1.0s linear infinite;
    -moz-animation: blinkText 1.0s linear infinite;
    -ms-animation: blinkText 1.0s linear infinite;
    -o-animation: blinkText 1.0s linear infinite;
    animation: blinkText 1.0s linear infinite;
}









div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
-webkit-box-shadow: none;
box-shadow: none;
}

@keyframes blink {
    0% { box-shadow: 8px 8px 15px green; }
    50% { box-shadow: 8px 8px 8px; }
    100% { box-shadow: 8px 8px 15px green; }
}

@-webkit-keyframes blink {
    0% { box-shadow: 8px 8px 15px green; }
    50% { box-shadow: 8px 8px 8px; }
    100% { box-shadow: 8px 8px 15px green; }
}

.blink {
    -webkit-animation: blink 1.0s linear infinite;
    -moz-animation: blink 1.0s linear infinite;
    -ms-animation: blink 1.0s linear infinite;
    -o-animation: blink 1.0s linear infinite;
    animation: blink 1.0s linear infinite;
}








@keyframes blinkChangeColorsOut {
    10% {
        box-shadow: 0px 0px 20px red;
    }

    40% {
        box-shadow: 0px 0px 20px orange;
    }

    75% {
        box-shadow: 0px 0px 20px green;
    }

    100% {
        box-shadow: 0px 0px 20px blue;
    }
}

@-webkit-keyframes blinkChangeColorsOut {
    10% {
        box-shadow: 0px 0px 20px red;
    }

    40% {
        box-shadow: 0px 0px 20px orange;
    }

    80% {
        box-shadow: 0px 0px 20px lime;
    }

    100% {
        box-shadow: 0px 0px 20px blue;
    }
}



.blinkChangeColorsOut {
    -webkit-animation: blinkChangeColorsOut 1.0s linear infinite;
    -moz-animation: blinkChangeColorsOut 1.0s linear infinite;
    -ms-animation: blinkChangeColorsOut 1.0s linear infinite;
    -o-animation: blinkChangeColorsOut 1.0s linear infinite;
    animation: blinkChangeColorsOut 1.0s linear infinite;
}












@keyframes blinkChangeColors {
    5% {
        box-shadow: 0px 0px 20px red inset;
    }
    25% {
        box-shadow: 0px 0px 20px orange inset;
    }

    50% {
        box-shadow: 0px 0px 20px blue inset;
    }
    75% {
        box-shadow: 0px 0px 20px green inset;
    }

    100% {
        box-shadow: 0px 0px 20px #ff00db inset;
    }
}

@-webkit-keyframes blinkChangeColors {
    5% {
        box-shadow: 0px 0px 20px red inset;
    }

    25% {
        box-shadow: 0px 0px 20px orange inset;
    }

    50% {
        box-shadow: 0px 0px 20px blue inset;
    }

    75% {
        box-shadow: 0px 0px 20px lime inset;
    }

    100% {
        box-shadow: 0px 0px 20px #ff00db inset;
    }
}



.blinkChangeColors {
    -webkit-animation: blinkChangeColors 1.0s linear infinite;
    -moz-animation: blinkChangeColors 1.0s linear infinite;
    -ms-animation: blinkChangeColors 1.0s linear infinite;
    -o-animation: blinkChangeColors 1.0s linear infinite;
    animation: blinkChangeColors 1.0s linear infinite;
}





@keyframes blinkSuccess {
    0% {
        box-shadow: 0px 0px 30px lime;
    }

    50% {
        box-shadow: 0px 0px 20px lime inset;
    }

    100% {
        box-shadow: 0px 0px 30px lime;
    }


}

@-webkit-keyframes blinkSuccess {
    0% {
        box-shadow: 0px 0px 30px lime;
    }

    50% {
        box-shadow: 0px 0px 20px lime inset;
    }

    100% {
        box-shadow: 0px 0px 30px lime;
    }
}



.blinkSuccess {
    -webkit-animation: blinkSuccess 1.5s linear infinite;
    -moz-animation: blinkSuccess 1.5s linear infinite;
    -ms-animation: blinkSuccess 1.5s linear infinite;
    -o-animation: blinkSuccess 1.5s linear infinite;
    animation: blinkSuccess 1.5s linear infinite;
}








@keyframes blinkDanger {
    0% { box-shadow: 0px 0px 20px  red inset; }
    50% { box-shadow: 0px 0px 15px; }
    100% { box-shadow: 0px 0px 20px red inset; }
}

@-webkit-keyframes blinkDanger {
    0% { box-shadow: 0px 0px 20px red inset; }
    50% { box-shadow: 0px 0px 15px; }
    100% { box-shadow: 0px 0px 20px red inset; }
}



.blinkDanger {
    -webkit-animation: blinkDanger 1.2s linear infinite;
    -moz-animation: blinkDanger 1.2s linear infinite;
    -ms-animation: blinkDanger 1.2s linear infinite;
    -o-animation: blinkDanger 1.2s linear infinite;
    animation: blinkDanger 1.2s linear infinite;
}




.blinkWarning {
    -webkit-animation: blinkWarning 1.2s linear infinite;
    -moz-animation: blinkWarning 1.2s linear infinite;
    -ms-animation: blinkWarning 1.2s linear infinite;
    -o-animation: blinkWarning 1.2s linear infinite;
    animation: blinkWarning 1.2s linear infinite;
}


@keyframes blinkWarning {
    0% { box-shadow: 0px 0px 20px  orange inset; }
    50% { box-shadow: 0px 0px 15px; }
    100% {
        box-shadow: 0px 0px 20px orange inset;
    }
}

@-webkit-keyframes blinkWarning {
    0% {
        box-shadow: 0px 0px 20px orange inset;
    }
    50% { box-shadow: 0px 0px 15px; }
    100% {
        box-shadow: 0px 0px 20px orange inset;
    }
}



/*------------ Close Button ------------*/

/*
    ImageViewer v 1.1.0
    Author: Sudhanshu Yadav
    Copyright (c) 2015 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
    Demo on: http://ignitersworld.com/lab/imageViewer.html
*/

/***** image viewer css *****/
#iv-container {
  position: fixed;
  background: #0d0d0d;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  z-index: 1000;
}

.iv-container {
  overflow: hidden;
}

.iv-close {
  width: 32px;
  height: 32px;
  position: absolute;
  right: 50px;
  top: 30px;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  text-shadow: 0px 0px 3px #6d6d6d;
  -webkit-transition: all ease 200ms;
  -moz-transition: all ease 200ms;
  -o-transition: all ease 200ms;
  transition: all ease 200ms;
}
.iv-close:after,
.iv-close:before {
  content: "";
  height: 4px;
  width: 32px;
  background: #FFF;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -2px;
}
.iv-close:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.iv-close:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.iv-close:hover {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
/***** snap view css *****/
.iv-snap-view {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 20px;
  left: 20px;
  border: 1px solid #666;
  background: black;
  z-index: 100;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: all ease 400ms;
  -moz-transition: all ease 400ms;
  -o-transition: all ease 400ms;
  transition: all ease 400ms;
  opacity: 0;
}

.iv-snap-image-wrap {
  display: inline-block;
  position: absolute;
  max-width: 150px;
  max-height: 150px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.iv-snap-image {
  position: relative;
}

.iv-snap-handle {
  position: absolute;
  border: 1px solid #ccc;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
}

/*** zoom slider ***/
.iv-zoom-slider {
  width: 100%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: 1px solid #666;
  border-top: 0;
  background: rgba(204, 204, 204, 0.1);
  height: 15px;
  position: absolute;
  top: 150px;
  left: -1px;
}

.iv-zoom-handle {
  width: 20px;
  height: 15px;
  background: #ccc;
  position: absolute;
}

/**** snap view css end *****/
.iv-image-view {
  position: absolute;
  height: 100%;
  width: 100%;
}

.iv-image-wrap {
  display: inline-block;
}

.iv-image-wrap:active {
  cursor: move;
}

.iv-large-image {
  max-width: 100%;
  max-height:100%;
  position: absolute;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  margin-left:0px;
}

/****** CSS loader by http://projects.lukehaas.me/css-loaders/ *****/
.iv-loader {
  top: 50%;
  left: 50%;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  z-index: 100;
  margin-top: -16px;
  margin-left: -16px;
  font-size: 5px;
  position: absolute;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.iv-loader:after {
  width: 10em;
  height: 10em;
  border-radius: 50%;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@media screen and (max-width: 767px) {
  .iv-snap-view {
    z-index: -1;
    visibility: hidden;
  }
}


.riders {
    height:346px;
    max-height:346px;
    min-height:346px;
}

.emotionImage{
    
     -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease-in-out;
      

}

.emotionImage:hover {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
  -webkit-transform: scale(1.1);
}


.emotionActive {
    box-shadow:0px 0px 60px orange;
}



.btn-arrow-right,
.btn-arrow-left {
  position: relative;
  padding-left: 18px;
  padding-right: 18px;
  border-radius: 0 !important;
  margin-right: 1px; }
  .btn-arrow-right[disabled],
  .btn-arrow-left[disabled] {
    opacity: 1.00; }
  .btn-arrow-right:before, .btn-arrow-right:after,
  .btn-arrow-left:before,
  .btn-arrow-left:after {
    content: "";
    position: absolute;
    top: 4px;
    /* move it down because of rounded corners */
    height: 24px;
    /* button_inner_height / sqrt(2) */
    width: 24px;
    /* same as height */
    background: inherit;
    /* use parent background */
    border: inherit;
    /* use parent border */
    border-left-color: transparent;
    /* hide left border */
    border-bottom-color: transparent;
    /* hide bottom border */
    border-radius: 0 !important; }
  .btn-arrow-right:before,
  .btn-arrow-left:before {
    left: -13px; }
  .btn-arrow-right:after,
  .btn-arrow-left:after {
    right: -13px; }
  .btn-arrow-right.btn-arrow-left,
  .btn-arrow-left.btn-arrow-left {
    padding-right: 36px; }
    .btn-arrow-right.btn-arrow-left:before, .btn-arrow-right.btn-arrow-left:after,
    .btn-arrow-left.btn-arrow-left:before,
    .btn-arrow-left.btn-arrow-left:after {
      -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
      transform: rotate(225deg);
      /* rotate right arrow squares 45 deg to point right */ }
  .btn-arrow-right.btn-arrow-right,
  .btn-arrow-left.btn-arrow-right {
    padding-left: 36px; }
    .btn-arrow-right.btn-arrow-right:before, .btn-arrow-right.btn-arrow-right:after,
    .btn-arrow-left.btn-arrow-right:before,
    .btn-arrow-left.btn-arrow-right:after {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      /* rotate right arrow squares 45 deg to point right */ }

.btn-arrow-right:after,
.btn-arrow-left:before {
  /* bring arrow pointers to front */
  z-index: 3; }

.btn-arrow-right:before,
.btn-arrow-left:after {
  /* hide arrow tails background */
  background-color: white; }


/* Large */
.btn-lg.btn-arrow-right,
.btn-lg.btn-arrow-left,
.btn-group-lg > .btn-arrow- left,
.btn-group-lg > .btn-arrow-right {
  padding-left: 42px;
  padding-right: 42px;
  margin-right: 0px; }
  .btn-lg.btn-arrow-right:before, .btn-lg.btn-arrow-right:after,
  .btn-lg.btn-arrow-left:before,
  .btn-lg.btn-arrow-left:after,
  .btn-group-lg > .btn-arrow-left:before,
  .btn-group-lg > .btn-arrow-left:after,
  .btn-group-lg > .btn-arrow-right:before,
  .btn-group-lg > .btn-arrow-right:after {
    top: 6px;
    /* move it down because of rounded corners */
    height: 32px;
    /* button_inner_height / sqrt(2) */
    width: 32px;
    /* same as height */ }
  .btn-lg.btn-arrow-right:before,
  .btn-lg.btn-arrow-left:before,
  .btn-group-lg > .btn-arrow-left:before,
  .btn-group-lg > .btn-arrow-right:before {
    left: -16px; }
  .btn-lg.btn-arrow-right:after,
  .btn-lg.btn-arrow-left:after,
  .btn-group-lg > .btn-arrow-left:after,
  .btn-group-lg > .btn-arrow-right:after {
    right: -16px; }
  .btn-lg.btn-arrow-right.btn-arrow-left,
  .btn-lg.btn-arrow-left.btn-arrow-left,
  .btn-group-lg > .btn-arrow-left.btn-arrow-left,
  .btn-group-lg > .btn-arrow-right.btn-arrow-left {
    padding-right: 44px; }
  .btn-lg.btn-arrow-right.btn-arrow-right,
  .btn-lg.btn-arrow-left.btn-arrow-right,
  .btn-group-lg > .btn-arrow-left.btn-arrow-right,
  .btn-group-lg > .btn-arrow-right.btn-arrow-right {
    padding-left: 44px; }


/* Button Groups */
.btn-group > .btn-arrow-left:hover, .btn-group > .btn-arrow-left:focus,
.btn-group > .btn-arrow-right:hover,
.btn-group > .btn-arrow-right:focus {
  z-index: initial; }

.btn-group > .btn-arrow-right + .btn-arrow-right,
.btn-group > .btn-arrow-left + .btn-arrow-left {
  margin-left: 0px; }

.btn-group > .btn:not(.btn-arrow-right):not(.btn-arrow-left) {
  z-index: 1; }





.funkyradioo div {
    clear: both;
    overflow: hidden;
}

.funkyradioo label {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #D1D3D4;
    font-weight: normal;
}

.funkyradioo input[type="radio"]:empty,
.funkyradioo input[type="checkbox"]:empty {
    display: none;
}

    .funkyradioo input[type="radio"]:empty ~ label,
    .funkyradioo input[type="checkbox"]:empty ~ label {
        position: relative;
        line-height: 2.5em;
        text-indent: 3.25em;
        margin: 3px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }


.maintencee {
    margin-top: 0px;
}


.funkyradioo input[type="radio"]:empty ~ label:before,
.funkyradioo input[type="checkbox"]:empty ~ label:before {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: '';
    width: 2.5em;
    background: #D1D3D4;
    border-radius: 3px 0 0 3px;
}

.funkyradioo input[type="radio"]:hover:not(:checked) ~ label,
.funkyradioo input[type="checkbox"]:hover:not(:checked) ~ label {
    color: #888;
}

    .funkyradioo input[type="radio"]:hover:not(:checked) ~ label:before,
    .funkyradioo input[type="checkbox"]:hover:not(:checked) ~ label:before {
        content: '\2714';
        text-indent: .9em;
        color: #C2C2C2;
    }

.funkyradioo input[type="radio"]:checked ~ label,
.funkyradioo input[type="checkbox"]:checked ~ label {
    color: #777;
}

    .funkyradioo input[type="radio"]:checked ~ label:before,
    .funkyradioo input[type="checkbox"]:checked ~ label:before {
        content: '\2714';
        text-indent: .9em;
        color: #fff;
        background-color: #5cb85c;
    }

.funkyradioo input[type="radio"]:focus ~ label:before,
.funkyradioo input[type="checkbox"]:focus ~ label:before {
    box-shadow: 0 0 0 3px #999;
}

.funkyradioo-success input[type="radio"]:checked ~ label:before,
.funkyradioo-success input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #5cb85c;
}






/**import('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css') */

.funkyradio div {
  clear: both;
  overflow: hidden;
}

.funkyradio label {
  width: 100%;
  border-radius: 3px;
  border: 1px solid #D1D3D4;
  font-weight: normal;
}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
  display: none;
}

.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
  position: relative;
  line-height: 2.5em;
  text-indent: 3.25em;
  margin-top: 2em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}


    .maintencee {
      
        margin-top: 0px;
       
    }


.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  width: 2.5em;
  background: #D1D3D4;
  border-radius: 3px 0 0 3px;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
  color: #888;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #C2C2C2;
}

.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
  color: #777;
}

.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #fff;
  background-color: #5cb85c;
}

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
  box-shadow: 0 0 0 3px #999;
}

.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #5cb85c;
}



#dvScript1 {
  /*  background:url(../Content/Images/dialerBG.png) no-repeat;
    background:url(../Content/Images/dialerBG.png) top center no-repeat;  
    background-size: cover;*/
  background-color:white;
    background-size:100%;
}









/*weather*/

.weather-bg {
    background: #34AADC;    
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
}

.weather-bg i {
    font-size: 60px;
    display: block;
}
.weather-bg h3{
    font-weight: 300;
    font-size: 28px;
}
.weather-bg .degree {
    padding-top: 10px;
    font-size: 60px;
}

.weather-category {
    padding: 15px 0;
    color: #ffffff;    
}
.weather-info{
    background: #34AADC;
}

.weather-category ul {
    padding:0;
    margin: 0;
    display: inline-block;
    width: 100%;
}

.weather-category ul   {
    display: inline-block;
    width: 100%;
	padding-bottom: 10px;
    text-align: center;
	border-top:1px solid #e6e6e6 ;
	border-left:1px solid #e6e6e6 ;
    border-right:1px solid #e6e6e6 ;
	border-bottom:1px solid #e6e6e6 ;
    display: inline-block;
}
.weather-category ul  li {
    display: inline-block;
    width: 70%;
	padding-top: 10px;
	padding-bottom: 10px;
    text-align: center;
    display: inline-block;
}
.weather-category ul li i  {
    margin-bottom:10px;
}
.weather-category ul li h4 {
    margin: 10px 0 0 0 ;
    text-transform: uppercase;
    font-weight: 300;
}

.weather-days{    
    color: #ffffff;
    background: #34AADC;
}

.weather-days ul {
    padding:0;
    margin: 0;
    display: inline-block;
    width: 100%;
}

.weather-days ul li {
    display: inline-block;
    width: 16.6%;
    text-align: center;
    display: inline-block;
    margin-right: -2.9px;
    padding: 5px 0px;
}
.weather-days ul li.day1{
    background: rgba(0,0,0,0.05);
}
.weather-days ul li.day2{
    background: rgba(0,0,0,0.1);
}
.weather-days ul li.day3{
    background: rgba(0,0,0,0.15);
}
.weather-days ul li.day4{
    background: rgba(0,0,0,0.2);
}
.weather-days ul li.day5{
    background: rgba(0,0,0,0.25);
}
.weather-days ul li.day6{
    background: rgba(0,0,0,0.3);
}

.weather-days ul li h5 {
    margin: 0 0 5px 0;
    text-transform: uppercase;
    font-weight: 300;
}

.weather-category ul li a {

}

.weather-category ul li:last-child,.weather-days ul li:last-child  {
    border-right:none ;
}
/*weather widget 2*/
.weather-bg-img {
    background: url(../img/backgrounds/bg-14-small.jpg) no-repeat center center;    
    color: #fff;
    text-shadow: 0px 1px 5px #fed189;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
}

.weather-bg-img i {
    font-size: 60px;
    text-shadow: 0px 1px 5px #fed189;
    display: block;
}
.weather-bg-img h3{
    font-weight: 300;
    font-size: 28px;
}
.weather-bg-img .degree {
    padding-top: 10px;
    font-size: 60px;
}

.weather-bg-img .weather-category {
    padding: 15px 0;
    color: #ffffff;
    text-shadow: 0px 1px 5px #fed189;
    background: transparent;
}

.weather-bg-img .weather-category ul {
    padding:0;
    margin: 0;
    display: inline-block;
    width: 100%;
}

.weather-bg-img .weather-category ul li {
    display: inline-block;
    width: 32%;
    text-align: center;
    border-right:1px solid #e6e6e6 ;
    display: inline-block;
}

.weather-bg-img .weather-category ul li h5 {
    margin: 0 0 5px 0;
    text-transform: uppercase;
    font-weight: 300;
    text-shadow: 0px 1px 5px #fed189;
}
.weather-bg-img .panel-body, footer.weather-bg-img ul{
    background: rgba(0,0,0,0.5);
}
.weather-days-img{
    color: #ffffff;
    text-shadow: 0px 1px 5px #fed189;
}
.weather-days-img{
    background: transparent !important;
}
.downn {
    cursor:pointer;
    color:black;
}
.downn:hover{
    color:green;
    font-weight:bold;
}





@media ( max-width: 585px ) {
    .input-group span.input-group-btn,.input-group input,.input-group button{
        display: block;
        width: 100%;
        border-radius: 0;
        margin: 0;
    }
    .input-group {
        position: relative;   
    }
    .input-group span.data-up{
        position: absolute;
        top: 0;
    }
    .input-group span.data-dwn{
        position: absolute;
        bottom: 0;
    }
    .form-control.text-center {
        margin: 34px 0;
    }
    .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group{
        margin-left:0;
    }

}



/* Tabs panel */
.tabbable-panel {
  border:1px solid #eee;
  padding: 10px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.tabbable-line > .nav-tabs > li {
  margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
  border: 0;
  margin-right: 0;
  color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
  border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
  border: 0;
  background: none !important;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
  border-bottom: 4px solid #f3565d;
  position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
  border: 0;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
  color: #404040;
}
.tabbable-line > .tab-content {
  margin-top: -3px;
  background-color: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
  padding-bottom: 0;
}

/* Below tabs mode */

.tabbable-line.tabs-below > .nav-tabs > li {
  border-top: 4px solid transparent;
}
.tabbable-line.tabs-below > .nav-tabs > li > a {
  margin-top: 0;
}
.tabbable-line.tabs-below > .nav-tabs > li:hover {
  border-bottom: 0;
  border-top: 4px solid #fbcdcf;
}
.tabbable-line.tabs-below > .nav-tabs > li.active {
  margin-bottom: -2px;
  border-bottom: 0;
  border-top: 4px solid #f3565d;
}
.tabbable-line.tabs-below > .tab-content {
  margin-top: -10px;
  border-top: 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}


/* Hiding the checkbox, but allowing it to be focused */
.badgebox
{
    opacity: 0;
}

.badgebox + .badge
{
    /* Move the check mark away when unchecked */
    text-indent: -999999px;
    /* Makes the badge's width stay the same checked and unchecked */
	width: 27px;
}

.badgebox:focus + .badge
{
    /* Set something to make the badge looks focused */
    /* This really depends on the application, in my case it was: */
    
    /* Adding a light border */
    box-shadow: inset 0px 0px 5px;
    /* Taking the difference out of the padding */
}

.badgebox:checked + .badge
{
    /* Move the check mark back when checked */
	text-indent: 0;
}




.image-preview-input {
    position: relative;
    overflow: hidden;
    margin: 0px;    
    color: #333;
    background-color: #fff;
    border-color: #ccc;    
}
.image-preview-input input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}
.image-preview-input-title {
    margin-left:2px;
}


.faqHeader {
        font-size: 27px;
        margin: 20px;
    }

    .panel-heading [data-toggle="collapse"]:after {
        font-family: 'fontawesome';
        content: "\f054"; /* "play" icon */
        float: right;
        color: #F58723;
        font-size: 18px;
        line-height: 22px;
        /* rotate "play" icon from > (right arrow) to down arrow */
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .panel-heading [data-toggle="collapse"].collapsed:after {
        /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        color: #454444;
    }




    /* USER PROFILE PAGE */
 .card {
    margin-top: 20px;
    padding: 30px;
    background-color: rgba(214, 224, 226, 0.2);
    -webkit-border-top-left-radius:5px;
    -moz-border-top-left-radius:5px;
    border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-top-right-radius:5px;
    border-top-right-radius:5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.card.hovercard {
    position: relative;
    padding-top: 0;
    overflow: hidden;
    text-align: center;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 1);
}
.card.hovercard .card-background {
    height: 130px;
}
.card-background img {
    -webkit-filter: blur(25px);
    -moz-filter: blur(25px);
    -o-filter: blur(25px);
    -ms-filter: blur(25px);
    filter: blur(25px);
    margin-left: -100px;
    margin-top: -200px;
    min-width: 130%;
}
.card.hovercard .useravatar {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
}
.card.hovercard .useravatar img {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.5);
}
.card.hovercard .card-info {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
}
.card.hovercard .card-info .card-title {
    padding:0 5px;
    font-size: 20px;
    line-height: 1;
    color: #262626;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.card.hovercard .card-info {
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    color: #737373;
    text-overflow: ellipsis;
}
.card.hovercard .bottom {
    padding: 0 20px;
    margin-bottom: 17px;
}
.btn-pref .btn {
    -webkit-border-radius:0 !important;
}






@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

.nav.nav-justified > li > a { position: relative; }
.nav.nav-justified > li > a:hover,
.nav.nav-justified > li > a:focus { background-color: transparent; }
.nav.nav-justified > li > a > .quote {
    position: absolute;
    left: 0px;
    top: 0;
    opacity: 0;
    width: 30px;
    height: 30px;
    padding: 5px;
    background-color: #13c0ba;
    border-radius: 15px;
    color: #fff;  
}
.nav.nav-justified > li.active > a > .quote { opacity: 1; }
.nav.nav-justified > li > a > img { box-shadow: 0 0 0 5px #13c0ba; }
.nav.nav-justified > li > a > img { 
    max-width: 100%; 
    opacity: .3; 
    -webkit-transform: scale(.8,.8);
            transform: scale(.8,.8);
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav.nav-justified > li.active > a > img,
.nav.nav-justified > li:hover > a > img,
.nav.nav-justified > li:focus > a > img { 
    opacity: 1; 
    -webkit-transform: none;
            transform: none;
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tab-pane .tab-inner { padding: 30px 0 20px; }

@media (min-width: 768px) {
    .nav.nav-justified > li > a > .quote {
        left: auto;
        top: auto;
        right: 20px;
        bottom: 0px;
    } 
}



/*.clsPitchPoints :hover {
    background-color: red;
}*/

.clsPitchPoints{
    cursor:pointer;
    margin:10px;
}


.clsSelfQa{
    cursor:pointer;
    margin:10px;
}

.selectedImg:hover {

    -webkit-transform: scale(.6,.6);
            transform: scale(.6,.6);
          z-index:9999;
             box-shadow: 0px 0px 10px 10px rgba(255, 148, 0, 0.30);
             cursor:pointer;
             -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);

    -webkit-transition: all 2s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 2s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.selectedIcon:hover {

    -webkit-transform: scale(1.05,1.12);
            transform: scale(1.05,1.12);
          cursor:pointer;
             box-shadow: 0px 0px 5px 5px rgba(198, 255, 0, 0.32);

    -webkit-transition: all 1s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 1s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.selectedIconNoBorder:hover {

    -webkit-transform: scale(1.12,1.25);
            transform: scale(1.12,1.25);
          cursor:zoom-in;

    -webkit-transition: all 1s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 1s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}




/* Switch button */
.btn-default.btn-on.active{background-color: #5BB75B;color: white;}
.btn-default.btn-off.active{background-color: #DA4F49;color: white;}



.btn-default.btn-on-1{color: black; border:1px rgba(0, 0, 0, 0.5)  solid; width:40px}
.btn-default.btn-off-1{color: black; border:1px rgba(0, 0, 0, 0.5) solid;  width:40px}

.btn-default.btn-on-1.active{background-color: #006FFC;color: white;border:1px rgba(0, 0, 0, 0.5) solid; font-weight:bold;}
.btn-default.btn-off-1.active{background-color: #DA4F49;color: white;border:1px rgba(0, 0, 0, 0.5)  solid; font-weight:bold;}



.btn-default.btn-on-2.active{background-color: #00D590;color: white;}
.btn-default.btn-off-2.active{background-color: #A7A7A7;color: white;}

.btn-default.btn-on-3.active{color: #5BB75B;font-weight:bolder;}
.btn-default.btn-off-3.active{color: #DA4F49;font-weight:bolder;}

.btn-default.btn-on-4.active{background-color: #006FFC;color: #5BB75B;}
.btn-default.btn-off-4.active{background-color: #DA4F49;color: #DA4F49;}






.clsCampaignItem:hover{
    color: black;
}

.clsCampaignItemActive{
    color: white;
    background-color:green;
}






/* The actual popup */
 .popuptext {
    display:block;
    width: 200px;
    background-color: #fff;
    color: #666666;
    text-align: center;
    border-radius: 20px;
    padding: 10px 0;
    position: absolute;
    z-index: 99999;
    top: 0;
    right: 0;
    margin-right:128px;
    margin-top: 43px;  
    box-shadow:  0px 0px 7px 7px rgba(65, 255, 0, 0.5);
    cursor:pointer;
}

 

/* The actual popup */
 .popuptext1 {
    display:none;
    width: 250px;
    background-color: #fff;
    color: #666666;
    text-align: center;
    border-radius: 10px;
    padding: 4px 15px;
    box-shadow:  0px 0px 6px 6px rgba(65, 255, 0, 0.4);
    cursor:pointer;
}



/* Popup arrow */
.popuptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popuptext .show {
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}





.greenBg {
    background-color: #12b400! important;
    background-image: linear-gradient(90deg, #37d808, #37d874);
}
.darkBlueBg {
    background-color: #0a00ff! important;
    background-image: linear-gradient(90deg, #0004ad, #000465);
}
.lightBlueBg {
    background-color: #00e0c4! important;
    background-image: linear-gradient(90deg, #00b1c3, #02d4e9);
}
.yellowBg {
    background-color: #f6ad00! important;
    background-image: linear-gradient(90deg, #eb9f00, #eb9f89);
}



.intro-banner-vdo-play-btn{
    height:100px;
    width:100px;
    position:absolute;
    top:50%;
    left:50%;
    text-align:center;
    margin:-30px 0 0 -50px;
    border-radius:100px;
    z-index:1;
    margin-top:40px
   
}
.intro-banner-vdo-play-btn span{
    line-height:100px;
    font-size:14px;
    color:white
}
.intro-banner-vdo-play-btn .ripple{
    position:absolute;
    width:160px;
    height:160px;
    z-index:-1;
    left:50%;
    top:50%;
    opacity:0;
    margin:-80px 0 0 -80px;
    border-radius:100px;
    -webkit-animation:ripple 1.8s infinite;
    animation:ripple 1.8s infinite
}

@-webkit-keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
.intro-banner-vdo-play-btn .ripple:nth-child(2){
    animation-delay:.3s;
    -webkit-animation-delay:.3s
}
.intro-banner-vdo-play-btn .ripple:nth-child(3){
    animation-delay:.6s;
    -webkit-animation-delay:.6s
}


















#frame {
    width: 100%;
    min-width: 360px;
    height: 92vh;
    min-height: 300px;
    max-height: 720px;
    background: #E6EAEA;
}

@media screen and (max-width: 360px) {
    #frame {
        width: 100%;
        height: 100vh;
    }
}

#frame #sidepanel {
    float: left;
    min-width: 280px;
    max-width: 340px;
    width: 40%;
    height: 100%;
    background: #2c3e50;
    color: #f5f5f5;
    overflow: hidden;
    position: relative;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel {
        width: 58px;
        min-width: 58px;
    }
}

#frame #sidepanel #profile {
    width: 80%;
    margin: 25px auto;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile {
        width: 100%;
        margin: 0 auto;
        padding: 5px 0 0 0;
        background: #32465a;
    }
}

#frame #sidepanel #profile.expanded .wrap {
    height: 210px;
    line-height: initial;
}

    #frame #sidepanel #profile.expanded .wrap p {
        margin-top: 20px;
    }

    #frame #sidepanel #profile.expanded .wrap i.expand-button {
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
    }

#frame #sidepanel #profile .wrap {
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    -moz-transition: 0.3s height ease;
    -o-transition: 0.3s height ease;
    -webkit-transition: 0.3s height ease;
    transition: 0.3s height ease;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap {
        height: 55px;
    }
}

#frame #sidepanel #profile .wrap img {
    width: 50px;
    border-radius: 50%;
    padding: 3px;
    border: 2px solid #e74c3c;
    height: auto;
    float: left;
    cursor: pointer;
    -moz-transition: 0.3s border ease;
    -o-transition: 0.3s border ease;
    -webkit-transition: 0.3s border ease;
    transition: 0.3s border ease;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap img {
        width: 40px;
        margin-left: 4px;
    }
}

#frame #sidepanel #profile .wrap img.online {
    border: 2px solid #2ecc71;
}

#frame #sidepanel #profile .wrap img.away {
    border: 2px solid #f1c40f;
}

#frame #sidepanel #profile .wrap img.busy {
    border: 2px solid #e74c3c;
}

#frame #sidepanel #profile .wrap img.offline {
    border: 2px solid #95a5a6;
}

#frame #sidepanel #profile .wrap p {
    float: left;
    margin-left: 15px;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap p {
        display: none;
    }
}

#frame #sidepanel #profile .wrap i.expand-button {
    float: right;
    margin-top: 23px;
    font-size: 0.8em;
    cursor: pointer;
    color: #435f7a;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap i.expand-button {
        display: none;
    }
}

#frame #sidepanel #profile .wrap #status-options {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    width: 150px;
    margin: 70px 0 0 0;
    border-radius: 6px;
    z-index: 99;
    line-height: initial;
    background: #435f7a;
    -moz-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    -webkit-transition: 0.3s all ease;
    transition: 0.3s all ease;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options {
        width: 58px;
        margin-top: 57px;
    }
}

#frame #sidepanel #profile .wrap #status-options.active {
    opacity: 1;
    visibility: visible;
    margin: 75px 0 0 0;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options.active {
        margin-top: 62px;
    }
}

#frame #sidepanel #profile .wrap #status-options:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #435f7a;
    margin: -8px 0 0 24px;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options:before {
        margin-left: 23px;
    }
}

#frame #sidepanel #profile .wrap #status-options ul {
    overflow: hidden;
    border-radius: 6px;
}

    #frame #sidepanel #profile .wrap #status-options ul li {
        padding: 15px 0 30px 18px;
        display: block;
        cursor: pointer;
    }

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options ul li {
        padding: 15px 0 35px 22px;
    }
}

#frame #sidepanel #profile .wrap #status-options ul li:hover {
    background: #496886;
}

#frame #sidepanel #profile .wrap #status-options ul li span.status-circle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 5px 0 0 0;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options ul li span.status-circle {
        width: 14px;
        height: 14px;
    }
}

#frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -3px 0 0 -3px;
    background: transparent;
    border-radius: 50%;
    z-index: 0;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before {
        height: 18px;
        width: 18px;
    }
}

#frame #sidepanel #profile .wrap #status-options ul li p {
    padding-left: 12px;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #profile .wrap #status-options ul li p {
        display: none;
    }
}

#frame #sidepanel #profile .wrap #status-options ul li#status-online span.status-circle {
    background: #2ecc71;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-online.active span.status-circle:before {
    border: 1px solid #2ecc71;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-away span.status-circle {
    background: #f1c40f;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-away.active span.status-circle:before {
    border: 1px solid #f1c40f;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-busy span.status-circle {
    background: #e74c3c;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-busy.active span.status-circle:before {
    border: 1px solid #e74c3c;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-offline span.status-circle {
    background: #95a5a6;
}

#frame #sidepanel #profile .wrap #status-options ul li#status-offline.active span.status-circle:before {
    border: 1px solid #95a5a6;
}

#frame #sidepanel #profile .wrap #expanded {
    padding: 100px 0 0 0;
    display: block;
    line-height: initial !important;
}

    #frame #sidepanel #profile .wrap #expanded label {
        float: left;
        clear: both;
        margin: 0 8px 5px 0;
        padding: 5px 0;
    }

    #frame #sidepanel #profile .wrap #expanded input {
        border: none;
        margin-bottom: 6px;
        background: #32465a;
        border-radius: 3px;
        color: #f5f5f5;
        padding: 7px;
        width: calc(100% - 43px);
    }

        #frame #sidepanel #profile .wrap #expanded input:focus {
            outline: none;
            background: #435f7a;
        }

#frame #sidepanel #search {
    border-top: 1px solid #32465a;
    border-bottom: 1px solid #32465a;
    font-weight: 300;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #search {
        display: none;
    }
}

#frame #sidepanel #search label {
    position: absolute;
    margin: 10px 0 0 20px;
}

#frame #sidepanel #search input {
    font-family: "proxima-nova", "Source Sans Pro", sans-serif;
    padding: 10px 0 10px 46px;
    width: calc(100% - 25px);
    border: none;
    background: #32465a;
    color: #f5f5f5;
}

    #frame #sidepanel #search input:focus {
        outline: none;
        background: #435f7a;
    }

    #frame #sidepanel #search input::-webkit-input-placeholder {
        color: #f5f5f5;
    }

    #frame #sidepanel #search input::-moz-placeholder {
        color: #f5f5f5;
    }

    #frame #sidepanel #search input:-ms-input-placeholder {
        color: #f5f5f5;
    }

    #frame #sidepanel #search input:-moz-placeholder {
        color: #f5f5f5;
    }

#frame #sidepanel #contacts {
    height: calc(100% - 177px);
    overflow-y: scroll;
    overflow-x: hidden;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #contacts {
        height: calc(100% - 149px);
        overflow-y: scroll;
        overflow-x: hidden;
    }

        #frame #sidepanel #contacts::-webkit-scrollbar {
            display: none;
        }
}

#frame #sidepanel #contacts.expanded {
    height: calc(100% - 334px);
}

#frame #sidepanel #contacts::-webkit-scrollbar {
    width: 8px;
    background: #2c3e50;
}

#frame #sidepanel #contacts::-webkit-scrollbar-thumb {
    background-color: #243140;
}

#frame #sidepanel #contacts ul li.contact {
    position: relative;
    padding: 10px 0 15px 0;
    font-size: 0.9em;
    cursor: pointer;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #contacts ul li.contact {
        padding: 6px 0 46px 8px;
    }
}

#frame #sidepanel #contacts ul li.contact:hover {
    background: #32465a;
}

#frame #sidepanel #contacts ul li.contact.active {
    background: #32465a;
    border-right: 5px solid #435f7a;
}

    #frame #sidepanel #contacts ul li.contact.active span.contact-status {
        border: 2px solid #32465a !important;
    }

#frame #sidepanel #contacts ul li.contact .wrap {
    width: 88%;
    margin: 0 auto;
    position: relative;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #contacts ul li.contact .wrap {
        width: 100%;
    }
}

#frame #sidepanel #contacts ul li.contact .wrap span {
    position: absolute;
    left: 0;
    margin: -2px 0 0 -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #2c3e50;
    background: #95a5a6;
}

    #frame #sidepanel #contacts ul li.contact .wrap span.online {
        background: #2ecc71;
    }

    #frame #sidepanel #contacts ul li.contact .wrap span.away {
        background: #f1c40f;
    }

    #frame #sidepanel #contacts ul li.contact .wrap span.busy {
        background: #e74c3c;
    }

#frame #sidepanel #contacts ul li.contact .wrap img {
    width: 40px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #contacts ul li.contact .wrap img {
        margin-right: 0px;
    }
}

#frame #sidepanel #contacts ul li.contact .wrap .meta {
    padding: 5px 0 0 0;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #contacts ul li.contact .wrap .meta {
        display: none;
    }
}

#frame #sidepanel #contacts ul li.contact .wrap .meta .name {
    font-weight: 600;
}

#frame #sidepanel #contacts ul li.contact .wrap .meta .preview {
    margin: 5px 0 0 0;
    padding: 0 0 1px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-transition: 1s all ease;
    -o-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    transition: 1s all ease;
}

    #frame #sidepanel #contacts ul li.contact .wrap .meta .preview span {
        position: initial;
        border-radius: initial;
        background: none;
        border: none;
        padding: 0 2px 0 0;
        margin: 0 0 0 1px;
        opacity: .5;
    }

#frame #sidepanel #bottom-bar {
    position: absolute;
    width: 100%;
    bottom: 0;
}

    #frame #sidepanel #bottom-bar button {
        float: left;
        border: none;
        width: 50%;
        padding: 10px 0;
        background: #32465a;
        color: #f5f5f5;
        cursor: pointer;
        font-size: 0.85em;
        font-family: "proxima-nova", "Source Sans Pro", sans-serif;
    }

@media screen and (max-width: 735px) {
    #frame #sidepanel #bottom-bar button {
        float: none;
        width: 100%;
        padding: 15px 0;
    }
}

#frame #sidepanel #bottom-bar button:focus {
    outline: none;
}

#frame #sidepanel #bottom-bar button:nth-child(1) {
    border-right: 1px solid #2c3e50;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #bottom-bar button:nth-child(1) {
        border-right: none;
        border-bottom: 1px solid #2c3e50;
    }
}

#frame #sidepanel #bottom-bar button:hover {
    background: #435f7a;
}

#frame #sidepanel #bottom-bar button i {
    margin-right: 3px;
    font-size: 1em;
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #bottom-bar button i {
        font-size: 1.3em;
    }
}

@media screen and (max-width: 735px) {
    #frame #sidepanel #bottom-bar button span {
        display: none;
    }
}

#frame .content {
    float: right;
    width: 60%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

@media screen and (max-width: 735px) {
    #frame .content {
        width: calc(100% - 58px);
        min-width: 300px !important;
    }
}

@media screen and (min-width: 900px) {
    #frame .content {
        width: calc(100% - 340px);
    }
}

#frame .content .contact-profile {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #f5f5f5;
}

    #frame .content .contact-profile img {
        width: 40px;
        border-radius: 50%;
        float: left;
        margin: 9px 12px 0 9px;
    }

    #frame .content .contact-profile p {
        float: left;
    }

    #frame .content .contact-profile .social-media {
        float: right;
    }

        #frame .content .contact-profile .social-media i {
            margin-left: 14px;
            cursor: pointer;
        }

            #frame .content .contact-profile .social-media i:nth-last-child(1) {
                margin-right: 20px;
            }

            #frame .content .contact-profile .social-media i:hover {
                color: #435f7a;
            }

#frame .content .messages {
    height: auto;
    min-height: calc(100% - 93px);
    max-height: calc(100% - 93px);
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    left: 0;
    width: 98%;
}

@media screen and (max-width: 735px) {
    #frame .content .messages {
        max-height: calc(100% - 105px);
    }
}

#frame .content .messages::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

#frame .content .messages::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
}

#frame .content .messages ul li {
    display: inline-block;
    clear: both;
    float: left;
    margin: 15px 15px 5px 15px;
    width: calc(100% - 25px);
    font-size: 0.9em;
}

    #frame .content .messages ul li:nth-last-child(1) {
        margin-bottom: 20px;
    }

    #frame .content .messages ul li.sent img {
        margin: 6px 8px 0 0;
    }

    #frame .content .messages ul li.sent p {
        background: #435f7a;
        color: #f5f5f5;
    }

  

    #frame .content .messages ul li.replies img {
        float: right;
        margin: 6px 0 0 8px;
    }

    #frame .content .messages ul li.replies p {
        background: #f5f5f5;
        float: right;
    }

    #frame .content .messages ul li img {
        width: 22px;
        border-radius: 50%;
        float: left;
    }

    #frame .content .messages ul li p {
        display: inline-block;
        padding: 10px 15px;
        border-radius: 20px;
        max-width: 205px;
        line-height: 130%;
    }

@media screen and (min-width: 735px) {
    #frame .content .messages ul li p {
        max-width: 80%;
    }
}

#frame .content .message-input {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 99;
}

    #frame .content .message-input .wrap {
        position: relative;
    }

        #frame .content .message-input .wrap input {
            font-family: "proxima-nova", "Source Sans Pro", sans-serif;
            float: left;
            border: none;
            width: calc(100% - 90px);
            padding: 11px 32px 10px 8px;
            font-size: 0.8em;
            color: #32465a;
        }

@media screen and (max-width: 735px) {
    #frame .content .message-input .wrap input {
        padding: 15px 32px 16px 8px;
    }
}

#frame .content .message-input .wrap input:focus {
    outline: none;
}

#frame .content .message-input .wrap .attachment {
    position: absolute;
    right: 60px;
    z-index: 4;
    margin-top: 10px;
    font-size: 1.1em;
    color: #435f7a;
    opacity: .5;
    cursor: pointer;
}

@media screen and (max-width: 735px) {
    #frame .content .message-input .wrap .attachment {
        margin-top: 17px;
        right: 65px;
    }
}

#frame .content .message-input .wrap .attachment:hover {
    opacity: 1;
}

#frame .content .message-input .wrap button {
    float: left;
    border: none;
    width: 60px;
    padding: 9px 0;
    cursor: pointer;
    background: #32465a;
    color: #f5f5f5;
    height:36px;
}

@media screen and (max-width: 735px) {
    #frame .content .message-input .wrap button {
        padding: 16px 0;
    }
}

#frame .content .message-input .wrap button:hover {
    background: #435f7a;
}

#frame .content .message-input .wrap button:focus {
    outline: none;
}