﻿
body {
    /*font-family:'Trebuchet MS';*/
    /*font-family: 'Roboto', sans-serif!important;*/
    font-family: 'Poppins', sans-serif!important;
}
ul {
    list-style:none;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #f00;
display: block;
margin-top: 8px;
text-align:left;
/*text-align: center;
position:absolute;
top:0;
right:5px;*/
}

.field-validation-valid {
display: none;
}
.div-image-margin-40 {
    margin-left: 40%;
}
.div-image {
    width: 100px;
    height: 100px;
    background-image: url('../Content/images/circle-loading-animation.gif');
    background-size: 100%;
}


.div-image-data-loading {
    width: 20px;
    height: 20px;
    background-image: url('../Content/images/loading-data.gif');background-position:center center;

    background-size: 100%;
}

.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}

.validation-summary-errors {
font-weight: bold;
color: #f00;
}

.validation-summary-valid {
display: none;
}


/* jQuery mobile styles
-----------------------------------------------------------*/

/* Make listview buttons fill the whole horizontal width of the screen */
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
padding-right: 15px;
}

.ui-bar-a, .ui-body-a, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a,
.ui-bar-b, .ui-body-b, .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b,
.ui-bar-c, .ui-body-c, .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c,
.ui-bar-d, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d,
.ui-bar-e, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e,
.ui-btn-active  {
text-shadow: none;
}

.close {
    background-image: url("../images/clear.png");
    float: right;
    height: 16px;
    opacity: 0.7;
    width: 16px;
}
.header {
    background-color:#fff;
    border-bottom:5px solid #316697;
    padding-bottom:5px;
   
}
.nav {
/*left:50%;
margin-left:-150px;
top:20px;
position:absolute*/
/*position:absolute;
right:0px;
top:20px;*/
}
.nav>li>a:hover, .nav>li>a:focus, .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
background:#fff;
}
.navbar-nav > li > a {
    padding:5px 10px;
}
.navbar-nav li{
    margin-left:5px;
}
    .navbar-nav li a:hover {
        color:#000;
    }
.dropdown {
background-color:#fff;
border:1px solid #ccc;
border-radius:4px;
width:auto;   

}
.dropdown-menu>li>a {
color:#428bca;
}
.dropdown ul.dropdown-menu {
border-radius:4px;
box-shadow:none;
margin-top:20px;
width:150px;
}
.dropdown ul.dropdown-menu:before {
content: "";
border-bottom: 10px solid #fff;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
top: -10px;
right: 16px;
z-index: 10;
}
.dropdown ul.dropdown-menu:after {
content: "";
border-bottom: 12px solid #ccc;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
position: absolute;
top: -12px;
right: 14px;
z-index: 9;
}
/*--Chat--*/
.portlet-heading {
   background-color: #34495e;
    padding:10px;
    color:#fff;
}
.mar-top {
    margin-top:15px;
}
.chat-user{ padding:5px;}
.chat-user a{color:#000;}
.chat-user a:hover, .chat-user:hover {
  background-color:#f3f3f3; 
  /*color:#fff;*/
  cursor:pointer;
  text-decoration:none; 
}
.fa.pull-right {
    margin-top:0.3em; margin-left:1em;
}
.fa.pull-left {
    margin-top:0.3em; margin-right:1em;
}
.chatusers {
    position: fixed;
    text-align: left;
    /*right: -2px;*/
    left:5px;
    width:267px;
    /*width:215px;*/
    min-height:400px;
    height: auto;
    border: 1px solid #ccc;
    background-color:#fff;
    /*float: right;*/
    float:left;
    bottom:-2px;
    z-index:2000;
}
.text-green {
    color:#90c400; padding-right:10px;    font-size: 12px;
    padding-top: 1px;

}

.text-orange-idel {
    color:orange; 
    padding-right:10px;    
    font-size: 12px;
    padding-top: 1px;

}

.text-grey {
     color:#BCBDB8; padding-right:10px;    font-size: 12px;
    padding-top: 1px;
    
}
.chat-user img{ margin-left:0px;}
.chatwin1 {
    /*width: 88%;*/
    min-width:70%;
    max-width:5000px;

    /*max-width:1000px;*/
    /*width:500px;*/
    position: absolute;
    text-align: left;
    /*height:300px;*/
    height:350px;
    float: right;
    bottom: 1px;
    /*right: 20.5%;*/
    right:0px;
    /*background-color:red;*/
    
    /*z-index:1000;*/
    /*overflow-x:auto;*/
    background-color:red;
    overflow-x:auto;
    display:block;
    overflow:visible;
}
.close {
    background-image: url("../images/clear.png");
    float: right;
    height: 16px;
    opacity: 0.7;
    width: 16px;
}

.chatuserwin2 {   
    position: absolute;
    height: 0%;
    float: right; 
    bottom:40px;
	width:20%;
}
.chatuserwin2 .chatwindow2, .chatuserwin2 .chattext2, .chatuserwin2 .chattext{ display:none;}
/*.chatuserwin2 .portlet-heading{border-radius:50%; text-indent:-51px;}
.chatuserwin2 .chat-close{position: absolute;right: -35px;}*/

.chatwindow2 {
    bottom:2px;
    width: auto;
    height:0px;
    overflow-y:hidden;
    background-color:#f3f3f3;
     
}   
.chattext2 {
    bottom: 0px;
    width:100%;
    height: 0;
}

.chatuserwin {
    /*width: 20%;*/
    width:267px;
    /*width:250px;*/
    position: absolute;
    text-align: left;
    min-height: 350px;
    height: auto;
    border: 1px solid #34495e;
    float: right;
    /*margin-left:4px;*/
    bottom: 1px;
    display: inline-block;
    direction:ltr; 
}
.chattext {
    bottom: 52px;    
    width:100%;
    height: 10%;
}
.chatwindow {
    bottom:2px;   
    /*width: auto;*/
    /*width:200px;*/
    width:100%;
    height:300px;
    overflow-y:scroll;
    padding: 10px 5px;
    background-color:#f3f3f3;    
	word-wrap:break-word;
}   
.chatcontent {
    bottom: 2px;
    width: auto;
    height:100%;
}
.chatinput {
    border:1px solid #ccc;
    /*background-color:green;*/
    width:100%;
    /*height: 10%;*/
    /*padding:3px;*/
   word-wrap: break-word;
   word-break: break-word;
   /*min-height:17px;*/
   /*max-height:27px;*/
  /*height: auto;*/
  overflow:auto;
   /*height:40px;*/
   min-height:35px;
   max-height:120px;
   text-align:left;
}
.chat-close {
  width:auto;
  height: 22px;
  text-align: center;
  float: right;
  display: inline-block; 
  background-color: transparent;
  position: relative;
  border:none;
}
.chat-close a {
    color: #fff;
    cursor: pointer;
    margin-left:10px;
    }
.chat-close a:hover{text-decoration:none;}
.menu-tab input[type="button"] {
    border: none;
    background-color: #316697;
    margin: 0 2px 0 0;
    color: #fff;
    font-size: 12px;
    padding:5px 10px;
    font-weight:bold;
    border-radius:3px;
}
.menu-tab input[type="button"]:hover{
    background:#90c400 ;
}
.active {background:#90c400 !important;
}

.menu-tab-main {
    /*background-color: #ccc;*/
    background-image:linear-gradient(#f5f5f5, #fff, #f5f5f5);
    padding: 15px;
}
.group-user{
    position: absolute;
    top: -15px;
    right: -15px;
    height: 330px;
    border-left: 1px solid #ccc;
    padding: 0;
    width: 100%;
}
.users-list{
    padding:10px 5px;
}
.dbbk {
    word-wrap:break-word;
}
.form-login {
    background-color: #EDEDED;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 15px;
    border-color:#d2d2d2;
    border-width: 5px;
    box-shadow:0 1px 0 #cfcfcf;
}
.btn-glyphicon {height:30px;width:30px; background:#ffffff; margin-right:10px; padding:6px;}
.btn-img{padding:10px 0px;}
.icon-btn { padding:3px 15px 3px 4px; border-radius:50px; font-size:16px;}
.btn-emp {
    padding-left:0;
}
.btn-emp span{
    margin:5px 10px;
}
.group-textbox {
}
.btn-group {
}

.chat-time {
    font-size:10px; color:green;
}
.wdh100
{
    width:100%;
}
.grpbtn
{
    text-align:left;
}
    .grpbtn div.btn
    {
        width:100%;
        margin-bottom:2px;
    }

.grpbtn input[type="button"].btn
{
    float:left;
}
.grpbtn span.btn
{
    float:right;
}
.griddiv
{
    background-color:#fff; margin-top:10px; border:1px solid #ccc;
}
table.celpad5 td
{
    padding:5px;
}
.padmar0
{
    padding:0px;
    margin:0px;
}
/*.hmbtn a.btn {
    width:100%;
    text-align:left;
}*/

.fl{
    float:left;
}
.fr{float:right;}
.logoglob {
    margin-right:0px;
    margin-top:10px;
}
.logoimg{padding-top:0px;}
.dtma{display:table; margin:0;}
.blackspot
{   
    background:url(images/black-spot.png) no-repeat left center;
    width:10px;
    height:10px;
    display:block;
    position:fixed; 
    left:0px;
    bottom:0px;
}

.bstimeslider {
    
width:inherit;
height:inherit;
background:#ccc;
position:relative;    
}

.bktibx {
    
float:left;
margin:0 40px 0 0 ;
font-size:18px;
width:60px;
display:block;
background:#000;
color:#fff;
    
}

#tslshow {
position:absolute;
left:0;
width:1200px;
border:3px solid #90c400;
   
}

#leftArrow {
    
width:40px;
height:40px;
background:#ff0000; 
position:absolute;
left:0px;
}

#rightArrow {
    
width:40px;
height:40px;
background:#ff0000; 
position:absolute;
right:0px;
}

#viewContainer {
width:90%;
height:100%;
background:#00ff00;
position:absolute;
left:50%;
margin-left:-180px;
overflow:hidden; 
}
.navbar-brand {
    padding: 10px 15px!important;
}
#main .navbar {
   
    min-height: 90px!important;
    border-radius:0px!important;
}
#main .navbar-inverse {
    background: linear-gradient(#4072a3, #58a9d4) !important;
    /* height: 140px !important; */
    max-height: unset !important;
    position: relative;
    border:none!important;
    border-bottom: 4px solid #90c400!important;
}
.btn-primary, a.btn-primary, a.btn-success {
    color: #fff !important;
}

.others-chat, .my-chat {
    max-width: 80%;
    clear: both;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 5px;
    display: table;
    min-width: 200px !important;
    position: relative;
    box-shadow: 0 .125rem .25rem rgb(197 182 193 / 73%) !important; /*0 .125rem .25rem rgba(0, 0, 0, .075) !important;*/
}

.others-chat {
    /*background: #e3f7fe !important;*/
    /*background: #e8f9ff!important;*/
    background: #d7f0f8!important;
}

    .others-chat .name {
        color: #015877 !important;
    }

    .others-chat:before {
        display: block;
        clear: both;
        content: '';
        position: absolute;
        top: -6px;
        left: -7px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 12px 15px 12px;
        border-color: transparent transparent #d7f0f8 transparent;
        -webkit-transform: rotate(-37deg);
        -ms-transform: rotate(-37deg);
        transform: rotate(-37deg);
    }

.my-chat {
    float: right;
    /*background: #fee9f9;*/
    /*background: #f6edf4;*/
    background: #fae7f6!important;
}

    .my-chat:before {
        display: block;
        clear: both;
        content: '';
        position: absolute;
        top: -6px;
        right: -8px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 12px 15px 12px;
        border-color: transparent transparent #fae7f6 transparent;
        -webkit-transform: rotate(37deg);
        -ms-transform: rotate(37deg);
        transform: rotate(37deg);
    }

    .my-chat div {
        float: right;
        text-align: left;
        clear: both;
    }

    .my-chat .name {
        /*color:#356703!important;*/
        /*color: #f56ad3 !important;*/
        color: #c61e9d!important;
    }

    .my-chat div, .others-chat div {
        padding: 0px;
        margin: 0px;
        margin-bottom: 5px;
        word-break: break-word !important;
        line-height: normal !important;
    }

        .my-chat .name, .others-chat .name {
            font-size: 11px;
            font-weight: bold;
            background: #fff !important;
            padding: 3px !important;
            width: 100%;
            border-radius:4px;
            margin-bottom:4px;
        }
    .my-chat div.msg-text, .others-chat div.msg-text {
        word-break: break-word !important;
        font-size:13px;
        color:#000;
        margin-top:5px;
        margin-bottom:5px;
    }
    .my-chat .chat-time, .others-chat .chat-time{
        text-align:right;
    }
    .btn-emp.bg-chat-list {
        /*border: 2px solid #ceeef9;
        background: #e3f7fe;
        padding: 5px;*/
        width: 100% !important;
    }
.grpbtn {
    font-family: 'Roboto', sans-serif !important;
}
.grpbtn .btn.btn-success, .grpbtn .btn.btn-default /*.btn.btn-primary, .grpbtn .btn.btn-success .btn.btn-default, .grpbtn .btn.btn-success .btn.btn-success*/ {
    background:#e8f9ff;
    border: none !important;
    font-weight: bold;
    float: left !important;
    border-bottom: 2px solid #b4dcea !important;
    border-radius: 0px;
    padding: 0px !important;
}

.grpbtn .btn.btn-success, .grpbtn .btn.btn-default {
    position: relative !important;
    padding: 0px !important;
    min-height: 40px !important;
}

.grpbtn .btn.btn-default {
    background: #ceeef9 !important;
}

.grpbtn .btn.btn-success:last-child {
    border-bottom-width: 0px !important;
}

.plus-minus {
    float: left;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    padding: 2px 5px;
    background: #5cb85c !important;
    color: #fff !important;
    position: absolute;
    left: 8px;
    top: 8px;
    margin: 0px !important;
}

.grpbtn .btn.btn-default .plus-minus {
    /*position: absolute;
        left: 0px;
        top: 2px;*/
}

.grpbtn .group-name {
    float: left !important;
    position: absolute;
    left: 38px;
    top: 10px;
    background: none !important;
    border: none !important;
    font-weight: bold;
    color: #025985 !important;
}

.grpbtn .count-number {
    float: right;
    border: 0px solid red !important;
    border-radius: 5px;
    padding: 2px;
    /*background:#f3fcea;*/
    color: #9c4a06;
    font-size: 12px;
    justify-content: flex-end;
    align-items: center;
    padding-top:8px;
}
.btn-default .count-number.badge {
    color:#316697!important;
    background-color: #ffffff!important;
}
.user-name {
    text-align: left;
    margin-bottom: 2px;
    padding: 8px 2px !important;
    white-space: nowrap;
    font-size: 13px;
}
    .user-name img {
        width: 12px;
        height: 12px;
        margin-right: 3px;
    }
a.btn-success:hover{
    background:#5ab704!important;
}
.navbar-nav > li > a.btn{
    padding-top:5px;
    padding-bottom:5px;
}
.online, .offline{
    background-position:left center;
    background-repeat:no-repeat;
    background-size:12px 12px;
    padding-left:22px!important;
}
.online{
    background-image:url(images/dot-green.png);
}
.offline{
    background-image:url(images/dot-gray.png);
}
.list-offline {
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    padding-left: 22px !important;
    background-image: url(images/dot-gray.png);
    font-size: 12px!important;
}
.warn{
    font-size:11px;
    color:red!important;
}