/* line 24, workbench.scss */
*, *:before, *:after {
    box-sizing: border-box;
}

/* line 28, workbench.scss */
:root {
    --white: #fff;
    --black: #000;
    --bg: #f8f8f8;
    --grey: #999;
    --dark: #1a1a1a;
    --light: #e6e6e6;
    --wrapper: 1000px;
    --blue: #00b0ff;
    --co-brainers-green-light: #8ebdc3;
    --co-brainers-green-dark: #55949c;
}

/* line 39, workbench.scss */
body {
    /*background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    background-size: cover;
    background-repeat: none;*/
}

/* line 49, workbench.scss */
/*.wrapper {
  position: relative;
  left: 50%;
  width: var(--wrapper);
  height: 1200px;
  transform: translate(-50%, 0%);
}
*/
/* line 56, workbench.scss */
/*.container {
  position: relative;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 100%;
  background-color: var(--white);
  transform: translate(-50%, -50%);
}
*/
.container {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background: white;
}

/* line 64, workbench.scss */
.container .left {
    float: left;
    flex: 20%;
    height: 100vh;
    background-color: var(--white);
}
@media only screen and (min-width: 700px) {
    .container .left{
        max-width: 20vw;
    }
}
.container .right .bubble:before {
    position: absolute;
    top: 19px;
    display: block;
    width: 8px;
    height: 6px;
    content: '\00a0';
    transform: rotate(29deg) skew(-35deg);
}
.container .right .bubble.you:before {
    left: -1000px;
    background-color: var(--co-brainers-green-dark);
}
/* line 70, workbench.scss */
.container .left .top {
}
/* line 75, workbench.scss */
.container .left .top:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: 100%;
    height: 1px;
    content: '';
    background-color: var(--light);
    transform: translate(-50%, 0);
}
/* line 87, workbench.scss */

.container .left .nav ul{
    overflow:hidden;
    overflow-y:scroll;
    height: 680px;
}

.container .left input {
    float: left;
    width: 188px;
    height: 42px;
    padding: 0 15px;
    border: 1px solid var(--light);
    background-color: #eceff1;
    border-radius: 21px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
}
/* line 96, workbench.scss */
.container .left input:focus {
    outline: none;
}
/* line 100, workbench.scss */
.container .left a.search {
    display: block;
    float: left;
    width: 42px;
    height: 42px;
    margin-left: 10px;
    border: 1px solid var(--light);
    background-color: var(--co-brainers-green-dark);
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/name-type.png");
    background-repeat: no-repeat;
    background-position: top 12px left 14px;
    border-radius: 50%;
}
/* line 113, workbench.scss */
.container .left .people {
    padding-left: 0;
    list-style: none;
    margin-left: -1px;
    border-right: 1px solid var(--light);
    border-left: 1px solid var(--light);
    width: calc(100% + 2px);
    height:calc(100% + 2px) ;
}
/* line 118, workbench.scss */
.container .left .people .person {
    position: relative;
    width: 100%;
    padding: 12px 1% 16px;
    cursor: pointer;
    background-color: var(--white);
    padding: 10px;
}
/* line 124, workbench.scss */
.container .left .people .person:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: 100%;
    height: 1px;
    content: '';
    background-color: var(--light);
    transform: translate(-50%, 0);
}
/* line 135, workbench.scss */
.container .left .people .person img {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 50%;
    object-fit: cover;
}
/* line 143, workbench.scss */
.container .left .people .person .name {
    font-size: 16px;
    line-height: 22px;
    color: var(--dark);
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
}
/* line 149, workbench.scss */
.container .left .people .person .time {
    font-size: 12px;
    position: absolute;
    top: 16px;
    right: 3%;
    padding: 0 0 5px 5px;
    color: var(--grey);
    background-color: var(--white);
}
/* line 158, workbench.scss */
.container .left .people .person .preview {
    font-size: 14px;
    display: inline-block;
    overflow: hidden !important;
    width: 70%;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--grey);
}
/* line 167, workbench.scss */
.container .left .people .person.active, .container .left .people .person:hover {
    background-color: var(--co-brainers-green-dark);
}
/* line 175, workbench.scss */
.container .left .people .person.active span, .container .left .people .person:hover span {
    color: var(--white);
    background: transparent;
}
/* line 179, workbench.scss */
.container .left .people .person.active:after, .container .left .people .person:hover:after {
    display: none;
}

/* line 186, workbench.scss */
.container .right {
    display: flex;
    flex-direction: column;
    justify-content:flex-end;
    overflow:hidden;
    position: relative;
    float: left;
    flex: 80%;
    height: 100vh;
}


.container .right .topflop {
    flex:25%;
    width: 100%;
    padding: 10px 0px;
    background-color:  #55949c70;
    position: relative;
    color: #ffffff;
    top: 0px;
    bottom: 30px;
    border-radius: 0px;
    box-shadow: 5px 5px 15px rgba(119, 119, 119, 0.5);
}

/* line 205, workbench.scss */
.container .right .top_1 {
    flex:20%;
    width: 100%;
    padding: 0px 35px 10px;
    border-width: 1px 1px 1px 0;
    border-style: solid;
    border-color: var(--light);
    background-color:  #55949c70;
    height: 100%;
    justify-items: flex-start;
    box-shadow: 5px 5px 15px rgba(119, 119, 119, 0.5);
}

/*  */
.container .right .top {
    flex:50000%;
    padding-left: 35px;
    padding-right: 35px;
    padding: 20px 35px 0px;
    /*border-width: 1px 1px 1px 0;
    border-style: solid;
    border-color: var(--light);*/
    background-color:  #55949c70;
    height: max-content;
    justify-items: flex-start;
    min-height: 80px;
    max-height: 142px;
    overflow: hidden;
}

/* line 196, workbench.scss */
.container .right .top span {
    width: 140%;
    color:#ffffff;
    font-size: 20px;
}

.container .right .top span .name {
    background:  #55949C;
    position: relative;
    color: #611616;
    top: 300px;
    bottom: 30px;
    left: 0%;
    width: 140%;
    border-radius: 5px;
    box-shadow: 5px 5px 15px rgba(119, 119, 119, 0.5);

}

/* line 205, workbench.scss */
.container .right .chat {
    flex:40%;
    display:none;
    padding: 0 35px 0px;
    border-width: 1px 1px 1px 0;
    border-style: solid;
    border-color: var(--light);
    background-color:  #55949c70;
    height: 100%;
    justify-items: flex-start;

}
/* line 216, workbench.scss */
.container .right .chat.active-chat {
    display: flex;
    flex-direction: column-reverse;
    justify-items: flex-start;
    overflow-x: hidden;
    padding-top: 30px;
}
/* line 219, workbench.scss */
.container .right .chat.active-chat .bubble {
    transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
}
/* line 222, workbench.scss */
.container .right .chat.active-chat .bubble:nth-of-type(1) {
    animation-duration: 0.15s;
}
/* line 222, workbench.scss */
.container .right .chat.active-chat .bubble:nth-of-type(2) {
    animation-duration: 0.3s;
}
/* line 222, workbench.scss */
.container .right .chat.active-chat .bubble:nth-of-type(3) {
    animation-duration: 0.45s;
}
/* line 222, workbench.scss */
.container .right .chat.active-chat .bubble:nth-of-type(4) {
    animation-duration: 0.6s;
}
/* line 222, workbench.scss */
.container .right .chat.active-chat .bubble:nth-of-type(5) {
    animation-duration: 0.75s;
}
/* line 222, workbench.scss */
.container .right .chat.active-chat .bubble:nth-of-type(6) {
    animation-duration: 0.9s;
}
/* line 222, workbench.scss */
.container .right .chat.active-chat .bubble:nth-of-type(7) {
    animation-duration: 1.05s;
}
/* line 222, workbench.scss */
.container .right .chat.active-chat .bubble:nth-of-type(8) {
    animation-duration: 1.2s;
}
/* line 222, workbench.scss */
.container .right .chat.active-chat .bubble:nth-of-type(9) {
    animation-duration: 1.35s;
}
/* line 222, workbench.scss */
.container .right .chat.active-chat .bubble:nth-of-type(10) {
    animation-duration: 1.5s;
}
/* line 229, workbench.scss */
.container .right .write {
    height: 42px;
    padding-left: 8px;
    border: 1px solid var(--light);
    background-color: #eceff1;
    width: inherit;
    border-radius: 5px;
}
/* line 239, workbench.scss */
.container .right .write input {
    font-size: 16px;
    float: left;
    width: 347px;
    height: 40px;
    padding: 0 10px;
    color: var(--dark);
    border: 0;
    outline: none;
    background-color: #eceff1;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
}
/* line 253, workbench.scss */
.container .right .write .write-link.attach:before {
    display: inline-block;
    float: left;
    width: 20px;
    height: 42px;
    content: '';
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/attachment.png");
    background-repeat: no-repeat;
    background-position: center;
}
/* line 265, workbench.scss */
.container .right .write .write-link.smiley:before {
    display: inline-block;
    float: left;
    width: 20px;
    height: 42px;
    content: '';
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/smiley.png");
    background-repeat: no-repeat;
    background-position: center;
}
/* line 277, workbench.scss */
.container .right .write .write-link.send:before {
    display: inline-block;
    float: left;
    width: 20px;
    height: 42px;
    margin-left: 11px;
    content: '';
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/send.png");
    background-repeat: no-repeat;
    background-position: center;
}


.icon {
    display: flex;
    justify-content: start;
    width: 100%;
    background: var(--co-brainers-green-dark)
}



.icon .icon .glyphicon-play{
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center
}


.icon .text{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* line 291, workbench.scss */
.container .right .bubble {
    font-size: 16px;
    position: relative;
    display: inline-block;
    clear: both;
    margin-bottom: 8px;
    padding: 13px 14px;
    vertical-align: top;
    border-radius: 5px;
}

/* line 300, workbench.scss */
.container .right .bubble:before {
    position: absolute;
    top: 19px;
    display: block;
    width: 8px;
    height: 6px;
    content: '\00a0';
    transform: rotate(29deg) skew(-35deg);
}
/* line 309, workbench.scss */
.container .right .bubble.you {
    float: left;
    color: var(--white);
    background-color: var(--co-brainers-green-dark);
    align-self: flex-start;
    animation-name: slideFromLeft;
}
/* line 315, workbench.scss */
.container .right .bubble.you:before {
    left: -3px;
    background-color: var(--co-brainers-green-dark);
}
/* line 320, workbench.scss */
.container .right .bubble.me {
    float: right;
    color: white;
    background-color: var(--co-brainers-green-light);
    align-self: flex-end;
    animation-name: slideFromRight;
}
/* line 326, workbench.scss */
.container .right .bubble.me:before {
    right: -3px;
    background-color: var(--co-brainers-green-light);
}
/* line 332, workbench.scss */
.container .right .conversation-start {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}
/* line 337, workbench.scss */
.container .right .conversation-start span {
    font-size: 14px;
    display: inline-block;
    background-color: var(--grey);
    border-radius: 10px;
    padding: 5px;
    color: white;
}
/* line 341, workbench.scss */
.container .right .conversation-start span:before, .container .right .conversation-start span:after {
    position: absolute;
    top: 10px;
    display: inline-block;
    width: 30%;
    height: 1px;
    content: '';
    background-color: var(--light);
}
/* line 350, workbench.scss */
.container .right .conversation-start span:before {
    left: 0;
}
/* line 353, workbench.scss */
.container .right .conversation-start span:after {
    right: 0;
}

@keyframes slideFromLeft {
    0% {
        margin-left: -200px;
        opacity: 0;
    }
    100% {
        margin-left: 0;
        opacity: 1;
    }
}
@-webkit-keyframes slideFromLeft {
    0% {
        margin-left: -200px;
        opacity: 0;
    }
    100% {
        margin-left: 0;
        opacity: 1;
    }
}
@keyframes slideFromRight {
    0% {
        margin-right: -200px;
        opacity: 0;
    }
    100% {
        margin-right: 0;
        opacity: 1;
    }
}
@-webkit-keyframes slideFromRight {
    0% {
        margin-right: -200px;
        opacity: 0;
    }
    100% {
        margin-right: 0;
        opacity: 1;
    }
}


/* general structure of page */

.h1 {
    padding-bottom: 40px;
    color: #ffffff;
}

.h3 {
    text-align: center;
    padding: 10px 10px 10px 25px;
    color: #ffffff;
}



A:link { color: #ffffff}
A:visited {color: #ffffff }
A:active { color: #ffffff }
A:hover {color: #ffffff }

.link {
    text-align: center;
    color: #ffffff;
    width: 100%;
    max-width: 330px;
    padding: 10px;
    margin: auto;
}

th, td {
    padding: 8px;

}

th { border-bottom: 1px solid rgb(255, 255, 255); }

.tableright {
    text-align: right;


}


.center{
    text-align: center;
}

.box {

    top: 50px;
    bottom: -50px;
    background:  #f9fbff;
    position: relative;
    left: 5%;
    padding-bottom: 50px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(119, 119, 119, 0.5);
}
.spacebox {
    position: relative;
    height: 70px;
    width: 90%;

}

.spacebox3 {
    padding-top: 50px;
    text-align: center

}

.btn-primary{  text-align: center; }



.btn-group{
    border: #000;
}

.dropdown{
    color: white;
    background-color: transparent;
    width: 100%;
    border: #000;


}

.dropdown-menu1{

    color: #000;
    border: #000;
}

.dropdown-item{

    color: purple;
    background-color: transparent;
}









.box2 table{
    border-radius: 4px;
}




.box2 table  {
    border-collapse: unset;
    border-spacing: 1px;
    width:100%;
}

.box2 th{
    background-color: maroon;
}

.box2 td{
    height:40px;
}

.box2 tr{
    background-color: var(--co-brainers-green-light)
}

.box2 tr:nth-child(1)
{
    background-color: var(--co-brainers-green-dark);
    color:white;
}
.box2 th
{
    background-color:yellow;
    color:black;
}




.textbox {

    position: relative;
    padding: 10px 10px 10px 25px;
    height: 70px;
    left: 5%;
    width: 90%;

}

.glyphicon {
    font-size: 25px;
}


div.pre-space{
    display: none;

}

.box3 {


    background:  #ffffff;
    position: relative;
    top: 30px;
    bottom: 30px;
    left: 5%;

    width: 90%;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(119, 119, 119, 0.5);
}


.box888 {
    background:  #55949C;
    position: relative;
    display: inline-flex;
    padding-left: 200px;
    color: #ffffff;
    width:100%;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(119, 119, 119, 0.5);
}

.box4 {
    position: relative;
    display: inline-flex;
    margin-bottom: 5px;
    background:  #55949c70;
    color: #f9fbff;
    /*font-size: 1.0em;*/
    padding: 10px 10px 10px 25px;
    border-radius: 15px;
}


.box5 {
    background:  #55949C;
    font-size: 16px;
    position: relative;
    clear: both;
    margin-bottom: 8px;
    padding: 13px 14px;
    vertical-align: top;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(119, 119, 119, 0.5);
}


/* Style for the dialog field */

.bubble {
    position: relative;
    display: inline-flex;
    margin-bottom: 5px;
    color: #f9fbff;
    /*font-size: 1.0em;*/
    padding: 10px 10px 10px 25px;
    border-radius: 15px;
}
.incoming {
    padding: 10px;
    padding-right: 20%;
    text-align: left
}
.incoming .bubble {
    background: #b2b2b2;
}

.outgoing {
    padding: 20px;
    padding-left: 20%;
    text-align: right
}
.test {
    padding-left: 30px;
}

.outgoing .bubble {
    background: #00bcd1;
}

/* Style for the login field */

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 10px;
    margin: auto;
}
.form-signin .checkbox {
    font-weight: 600;
}
.form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Collaps css for dialog details */
.collapsible {
    margin-top: 50px;
    text-align: center;

}

.collapsible:hover {
    background-color: #555;
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;

    background-color: #f1f1f1;
}

/* configuration side */

.form-style-2{
    color: #ffffff;
    max-width: 900px;
    padding: 20px 20px 20px 20px;
}
.form-style-2-heading{
    margin-bottom: 20px;
    padding-bottom: 30px;
    font-family: 'lato', sans-serif;
    font-size: 29px;
}
.form-style-2 label{
    display: block;
    margin: 0px 0px 15px 0px;

}
.form-style-2 label > span{
    width: 100px;
    display: block;
    float: left;
    padding-top: 8px;
    padding-right: 30px;


}
.form-style-2 span.required{
    color:red;
}
.form-style-2 .tel-number-field{
    width: 40px;
    text-align: center;
}
.form-style-2 input.input-field, .form-style-2 .select-field{
    color: #313131;
    width: 70%;
}
.form-style-2 input.input-field,
.form-style-2 .tel-number-field,
.form-style-2 .textarea-field,
.form-style-2 .select-field{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #C2C2C2;
    box-shadow: 1px 1px 4px #EBEBEB;
    -moz-box-shadow: 1px 1px 4px #EBEBEB;
    -webkit-box-shadow: 1px 1px 4px #EBEBEB;
    border-radius: 4px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 7px;
    outline: none;
}
.form-style-2 .input-field:focus,
.form-style-2 .tel-number-field:focus,
.form-style-2 .textarea-field:focus,
.form-style-2 .select-field:focus{
    border: 1px solid #0C0;
}
.form-style-2 .textarea-field{
    height:100px;
    width: 80%;
}

.form-style-2 .btn{

    color: #3f3f3f;
    width: 35%;

}

/* config side */

.form-style-3{
    color: #ffffff;
    max-width: 900px;
    padding: 20px 20px 20px 20px;
}
.form-style-3-heading{
    margin-bottom: 20px;
    padding-bottom: 30px;
    font-family: 'lato', sans-serif;
    font-size: 29px;
}
.form-style-3 label{
    display: block;
    margin: 0px 0px 15px 0px;

}
.form-style-3 label > span{
    width: 100px;
    display: block;
    float: left;
    padding-top: 8px;
    padding-right: 30px;


}
.form-style-3 span.required{
    color:red;
}
.form-style-3 .tel-number-field{
    width: 40px;
    text-align: center;
}
.form-style-3 input.input-field, .form-style-2 .select-field{
    color: #313131;
    width: 90%;
}
.form-style-3 input.input-field,
.form-style-3 .tel-number-field,
.form-style-3 .textarea-field,
.form-style-3 .select-field{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 1px solid #C2C2C2;
    box-shadow: 1px 1px 4px #EBEBEB;
    -moz-box-shadow: 1px 1px 4px #EBEBEB;
    -webkit-box-shadow: 1px 1px 4px #EBEBEB;
    border-radius: 4px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 7px;
    outline: none;
}
.form-style-3-heading .input-field:focus,
.form-style-3 .tel-number-field:focus,
.form-style-3 .textarea-field:focus,
.form-style-3.select-field:focus{
    border: 1px solid #0C0;
}
.form-style-3 .textarea-field{
    height:100px;
    width: 55%;
}

.form-style-3 .btn{

    color: #3f3f3f;
    width: 35%;

}
#maincontainer{
    padding-right: 0;
    padding-left: 0;
}
tbody{
//box-shadow: 5px 5px 15px rgba(119, 119, 119, 0.5);
}
.box2{
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}
#navactions{
    display: flex;
}
#navactions i{
    font-size: 32px;
    padding-left: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    cursor: pointer;
}
#navactions i:hover{
    color: var(--co-brainers-green-light);
}
.left .top{
    background-color: var(--co-brainers-green-dark);
    display: flex;
    color: white;
}
.left .top h1{
    padding-left: 10px;
}
#back{
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 30px;
    z-index: 20;
    color: white;
}
@media only screen and (min-width: 700px) {
    #back{
        display: none;
    }
}
table{
    font-size: 16px !important;
}
.btn-warning{
    font-size: 16px !important;
}
table {
    -moz-border-radius: 5px !important;
    border-collapse: collapse !important;
    border: none !important;
}
table {
    border-collapse: collapse !important; /* IE7 and lower */
    border-spacing: 0 !important;
}
tr:first-child {
    border-radius: 6px 0 0 0 !important;
}

tr:last-child {
    border-radius: 0 6px 0 0 !important;
}

tr:only-child{
    border-radius: 6px 6px 0 0 !important;
}
.chat.active-chat{
    overflow-x: hidden;
}
.top h1{
    font-size: 26px;
    line-height: inherit;
}
#navactions a{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.left .top{
    border-bottom: 3px solid white;
}
.left{
    overflow-y: auto;
    overflow-x: hidden;
}
#domainholder{
    display: flex;
    align-items: center;
}
#domainholder p{
    margin-top: 0px;
    margin-left: 8px;
    margin-right: 0px;
    margin-bottom: 0px;
}
#domainholder input{
    direction: rtl;
}