.dashboard_mine {
    height:auto;
    position: relative;
    top: 0;
}
/*Gridster section*/
.gridster-sec {
    padding: 0 15px;
}

.ps-widget-header {
    background-color: transparent; /*#f4f4f4*/
    padding: 8px 15px;
}

.ps-widgets-header-buttons .btn {
    padding-top: 6px;
    color: #444444;
}
.panel {
    position: relative;
    border: none;
    -webkit-box-shadow: none;
    box-shadow:none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-bottom: 0;
}
.panelHeading {
    background-color:#028b97 !important;
    border-top-color:#02d0e3;
    border-top-width:thick;
    height:auto;
    margin-bottom:0;
    border-radius: 0;
    font-weight:bold;
}
.panelBody {
    height:200px;
    width:auto;
}
.grid {
    background-color:transparent;
}
.learningpath {
    height:100px;
}
.calender {
    height:400px;
    width:300px;
}
.bigSizeTemp {
    font-size: 150px !important;
}
/*Home.html Internal CSS moved into this stylesheet*/
    /*******************************
        * MODAL AS LEFT/RIGHT SIDEBAR
        * MODAL AS CENTER ALIGNMENT
        * Add "left" or "right" in modal parent div, after class="modal".
        * Get free snippets on bootpen.com
    *******************************/
.Custom_modal.modal.left .modal-dialog,
.Custom_modal.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 290px;
    height: 100%;
    -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);
}

.Custom_modal.modal.left .modal-content,
.Custom_modal.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
    color: #282828;
}
/*Left*/
.Custom_modal.modal.left.fade .modal-dialog {
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.Custom_modal.modal.left.fade.in .modal-dialog {
    left: 0;
}

/*Right*/
.Custom_modal.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}
/*Center*/
.modal.modal-center {
  text-align: center;
  padding: 0 !important;
}

.modal.modal-center:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-center .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.Custom_modal.modal.right.fade.in .modal-dialog {
    right: 0;
    top: 0;
}

.Custom_modal.modal.right.fade.in {
    background-color: transparent;
}

/* ----- MODAL STYLE ----- */
.Custom_modal.modal-content {
    border-radius: 0;
    border: none;
}

.modal.Custom_modal.right {
    background-color: transparent !important;
}

.modal-header.ForNotification {
    background: #f0f2f5 !important;
}

.modal-header.ForNotification .close, .modal-header.ForNotification .modal-title {
    color: #333333 !important;
}
#myModalLabel2 {
    color: #333333 !important;
    font-weight: 400;
}

#IndividualChat ul li, #GroupChat ul li {
    padding: 3px;
    cursor:pointer;
}
#GroupChat ul.chat li {
    margin: 10px 0;
}
li.chat-offline {
    cursor: default !important;
}

#ChatModal .tab-content {
    background-color: transparent !important;
}

.Custom_modal_footer {
    border-top-color: #f4f4f4;
    position: fixed;
    bottom: 50px;
    width: 80%;
    text-align: center;
    padding: 6px 20px;
}

.Custom_modal_History_footer {
    border-top: 2px solid #dfe0e1;
    padding: 10px 20px;
    /*position: fixed;*/
    width: 100%;
    bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.Custom_modal_History_footer1 {
    background: white !important;
}
.Custom_modal_footer #chat_search, .Custom_modal_footer .GroupChatInput, .Custom_modal_footer .IndividualChatInput {
    min-height: 30px;
}

#notiContent .NotificationList {
    padding: 5px;
    border-bottom: 1px solid #f9f9f9;
}
#notiContent .NotificationList:hover, #notiContent .NotificationList:hover .text-muted, #notiContent .NotificationList:hover a {
    color: #808080;
}
.LogOutModalDialog {
    width: 100%;
    margin: 12% 0;
}

.Custom_modal_header {
    background: #ededed !important;
    padding: 13px;
    border-radius: 0;
    z-index: 88;
    color: #30373e !important;
}

.chat-user-img {
    margin: 8px;
    border-radius: 50%;
    padding: 3px;
}

.mcs-horizontal-example::-webkit-scrollbar {
    height: 6px;
}

.mcs-horizontal-example::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.mcs-horizontal-example::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #03a9f4;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

.mcs-horizontal-example::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
}

.Chat-History-wrapper .Custom_modal_header, .Group-Chat-History-wrapper .Custom_modal_header {
    padding: 5px 13px !important;
    width: 100%;
}
.Custom_modal_header .close {
    height: 24px;
    width: 24px;
    font-size: 18px;
    color: #444 !important;
}

.LogOutModalContent {
    padding: 20px;
}

.LogOutModalContent .modal-body h2 {
    color: #ffffff;
    font-weight: 600;
    margin: 0 !important;
}

.LogOutModalBody {
    text-align: left !important;
    margin: 0 20%;
}

.content-legend {
    color: #fff;
    text-align: left !important;
    margin-top: 15px;
}

div#LogOutModal.modal {
    background: rgba(39, 38, 38, 0.5);
}

.toast_success {
    display: none;
    z-index: 11060;
    top: 60px;
    position: absolute;
    padding: 10px !important;
    color: #fff;
    width:300px;
    right: 10px;
    cursor: pointer;
}
.toat-icon{
  padding: 15px;
    color: #ede3e3;
    font-size: 22px;
    border-right: 1px solid #c6b4b4;
}
.toast_success_green {
    display: none;
    z-index: 11060;
    top: 60px;
    position: absolute;
    background: transparent;
    color: #fff;
    width:300px;
    right: 10px;
    cursor: pointer;
}
.notification-head {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}
.toast-bg {
    margin-top: 10px;
    background-color: #2EC23E;
    border: 1px solid rgba(46, 194, 62, 0.6);
    border-radius: 2px;
    box-shadow: rgb(240, 244, 247) 0px 16px 32px;
}
.toast .toast-message {
    display: inline-block;
    padding: 0 10px;
    color: #fff;
}
/* CHAT CSS */
.ScrollToBottom {
    width: 100%;
    padding: 0 15px !important;
    margin-top: 39px;
    margin-bottom: 49px;
    /*min-height: 232px;*/
    max-height: calc(100% - 88px);
    overflow-y: auto;
    opacity: 1 !important;
}
.chat-head {
    position: fixed;

}
#IndividualGroupChat {
    margin-top: 0;
    margin-bottom: 10px;
    height: calc(100vh - 182px);
    overflow-y: auto;
}

.Chat-wrapper {
    width: 300px;
    position: fixed;
    overflow: auto;
    height: 100%;
    right: 0;
    top: 0;
    background-color: #FFF;
    box-shadow: 0 0 40px #999;
    opacity:1;
    z-index:1050;
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
}
.Chat-wrapper.ng-hide {
    right: -500px;
    opacity:0;
}
.Chat-History-wrapper.ui-resizable .ui-resizable-n {
    top: -1px;
}
.ui-resizable-handle.ui-resizable-n:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(90deg);
    margin-top: 0px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 10px 0 rgba(0,0,0,0.5), 0 20px 0 rgba(0,0,0,0.5);
}
.Chat-History-wrapper.ui-resizable {
    min-height:320px;
}
.Chat-History-wrapper {
    min-width: 256px;
    position: absolute;
    bottom: 0 !important;
    top: auto !important;
    overflow: hidden;
    max-height: 90vh;
    z-index: 1060;
    box-shadow: 3px 3px 50px #ccc;
}
.Chat-History-box {
    position:fixed;
    bottom:0;
    z-index: 1059;
}
.Chat-History-box-list {
    float:right !important;
    height: 100vh;
}
.Group-Chat-History-wrapper {
    /*width: 298px;
    position: fixed;
    overflow: hidden;
    height: 92%;
    right: 0;
    bottom: 0;
    border-top: 2px solid white;
    box-shadow: 3px 3px 49px #ccc;*/
}

.Group-Chat-History-wrapper ul li, .Chat-History-wrapper ul li {
    color: #333;
    margin-top: 5px !important;
    margin-bottom: 5px;
}

.chat {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat .chat-img {
    border-radius: 50%;
}
.chat .chat-body {
    border-radius: 6px;
}
.chat .right .chat-body .chat-arrow {
    display: block;
    position: absolute;
    right: -7px;
    top: 15px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #03a9f4;
}

.chat .left .chat-body .chat-arrow {
    display: block;
    position: absolute;
    top: 15px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #03a9f4;
}

.IndividualChatSend, .GroupChatSend {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}


.chat li.left .chat-body {
    margin-left: 35px;
    position: relative;
}
.Chat-History-wrapper .chat li.left .chat-body {
    margin-left: 0px !important;
    position: relative;
    padding:10px;
    background: rgba(29, 161, 243, 0.1);
}

.chat li.right .chat-body {
    margin-right: 35px;
    position: relative;
    padding:10px;
}
.chat li.right .chat-body .chattime{
    font-size: 10px !important;
    color: #949393;
    text-align:right;
}
.chat li.left .chat-body .chattime{
    font-size: 10px !important;
    color: #949393;
    text-align:left;
}
.Chat-History-wrapper .chat li.right .chat-body {
    margin-right: 0px !important;
    position: relative;
     padding:10px;
        background: rgba(82, 250, 51, 0.1);
}
.Chat-History-wrapper .Custom_modal_header {
   color: #fff !important;
}

.Chat-History-wrapper .Custom_modal_header button .fa {
   color: #fff !important;

}
.chat li .chat-body p {
    margin: 0;
    word-wrap: break-word;
    word-break: break-word;
}
#RecentChat .badge {
    top: -10px;
    font-size: 9px;
    padding: 3px;
}
#RecentChat p {
    word-wrap: break-word;
    word-break: break-word;
}
.IndividualChatUserList {
    padding: 5px 0;
}

.chat .right .chat-body {
    border-right: 2px solid #03a9f4 !important;
    /*border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;*/
    padding-left: 10px;
    border: 1px solid #ededed;
    background-color: #ededed;
}

.chat .left .chat-body {
    border-left: 2px solid #03a9f4 !important;
    /*border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;*/
    padding-left: 15px;
    border: 1px solid #ededed;
    background-color: #ededed;
}

.mcs-horizontal-example img .OnlineUser {
    content: "\2022";
    font-size: 200%;
    color: #df391f;
}
#GroupChatTeam.tab-pane.active {
    display: flex;
}
.GroupChatUserslist {
    overflow-y: auto;
}

.IndividualChatUserList span, #GroupChat span {
    color: #30373e;
}

.IndividualChatUserList::after {
    content: "\2022";
    font-size: 200%;
    color: green;
    float: right;
    line-height: 26px;
}

.MyTeamOnline::after{
    content: "\2022";
    font-size: 250%;
    color: rgba(114,192,44,0.8);
}

.MyTeamOffline::after{
    content: "\2022";
    font-size: 250%;
    color: #bfbfbf;
}

.Chat-wrapper .nav.nav-tabs > li > a {
    padding: 5px;
    margin: 2px;
    cursor: pointer !important;
}

#IndividualChatOffline .IndividualChatUserList::after {
    content: "\2022";
    font-size: 200%;
    color: #bfbfbf;
    float: right;
}
.ScrollToBottom::-webkit-scrollbar, 
#IndividualGroupChat::-webkit-scrollbar, 
#Notifications-list::-webkit-scrollbar, 
#ChatModal::-webkit-scrollbar {
    width: 5px !important;
}

.ScrollToBottom::-webkit-scrollbar-thumb, #IndividualGroupChat::-webkit-scrollbar-thumb, 
#Notifications-list::-webkit-scrollbar-thumb, #ChatModal::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: rgba(0,0,0,0.3);
}
/*.nav-tabs.online > li.active:after {
    border-bottom: 0 solid rgb(243, 156, 18) !important;
}*/

.panel .slidedown .glyphicon, .chat .glyphicon {
    margin-right: 5px;
}

#IndividualGroupChat .header, .ScrollToBottom .header {
    text-align: left;
    border-bottom: solid 0;
    position: relative;
    background: transparent;
    height: 30px;
    color: #333;
}

.mcs-horizontal-example {
    overflow: hidden;
    width: 100%;
    height: 60px;
}

.mcs-horizontal-example:hover {
    overflow-x: auto;
    white-space: nowrap;
}

.NotificationFrom {
    color: #fff !important;
}

.mcs-horizontal-example .item {
    display: inline-block;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
   width: 10px;
    height: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #afafaf;
}
.Chat-wrapper img.circle-offline:after {
    width: 8px;
	height: 8px;
	background: #bfbfbf;
	-moz-border-radius:  50%;
	-webkit-border-radius:  50%;
	border-radius: 50%;
}
.Chat-wrapper img.circle-online:after {
    width: 8px;
	height: 8px;
	background: green;
	-moz-border-radius:  50%;
	-webkit-border-radius:  50%;
	border-radius: 50%;
}
.Chat-wrapper a > img {
    outline:none !important;
}
.Chat-wrapper .online-chat:after{
    content: '\2022';
    color: green;
    border-radius: 50%;
    position: absolute;
    top: -33px;
    left: 35px;
    font-size: 34px;
    display: inline-block;
}

li.chat-offline::after {
    width: 7px;
    height: 7px;
    background: #867373;
    border-radius: 50%;
    float: right;
    margin-top: 10px;
}
li.chat-online::after {
    width: 7px;
    height: 7px;
    background: green;
    border-radius: 50%;
    float: right;
    margin-top: 10px;
}


.Chat-wrapper a.offline-chat, a.online-chat  {
    position: relative;
}
.Chat-wrapper .offline-chat:after {
    content: '\2022';
    color: #9a9a9a;
    border-radius: 50%;
    position: absolute;
    top: -33px;
    left: 35px;
    font-size: 34px;
    display: inline-block;
}
.ChattingModal {
    position: fixed !important;
    top: 0 !important;
    right: 0;
    bottom: auto !important;
    left: auto !important;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
/*Widget Dropdown*/
.btn.addwidgetdropdownbutton, .btn.addwidgetdropdownbutton:active,
.btn.addwidgetdropdownbutton:hover, .btn.addwidgetdropdownbutton:focus {
    position: absolute;
    right: 5px;
    bottom: 6px;
    width: 24px;
    height: 24px;
    margin: 0 !important;
    padding: 0;
    border-radius: 50%;
    background-color: #444444;
    -webkit-box-shadow: 0 1px 10px rgba(11, 21, 25, 0.39);
    box-shadow: 0 1px 10px rgba(11, 21, 25, 0.39);
    outline: none;
}
.btn.addwidgetdropdownbutton i.fa-cog {
    /*font-size: 18px;*/
    color: #ffffff;
    padding: 0;
    margin: 0;
}
.open > .btn.addwidgetdropdownbutton, .open > .btn.addwidgetdropdownbutton:focus,
.open > .btn.addwidgetdropdownbutton:hover {
    background-color: #ffffff;
    -webkit-box-shadow: 0 1px 10px rgba(200, 200, 200, 0.4);
    box-shadow: 0 1px 10px rgba(200, 200, 200, 0.4);
}
.open.widget-dropdown .btn.addwidgetdropdownbutton i.fa-cog {
    color: #444444;
}
.widget-dropdown > .dropdown-menu {
    width: 200px;
    border-radius: 0 !important;
}
.widget-dropdown ul.dropdown-menu:before {
    content: "";
    border-bottom: 6px solid #fff;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    position: absolute;
    top: -6px;
    right: 10px;
    z-index: 10;
}
.widget-dropdown ul.dropdown-menu:after {
    content: "";
    border-bottom: 8px solid #ccc;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    position: absolute;
    top: -8px;
    right: 8px;
    z-index: 9;
}
/*Calender Widget CSS*/
.calender-gridster .panel-heading, .todolist-widget .panel-heading {
    cursor:move;
}
.gridster-item.gridster-item-moving {
    z-index: 100;
}
/*Todo widget*/
.Todolist-item {
    padding: 10px 15px;
}
.Todolist-item.Todolist-checked {
    text-decoration: line-through;
}
.todolist-widget .list-group-item {
    word-break: break-word;
}
.ToDoUl .badge.badge-success {
    background: #17B6A4 !important;
}
.ToDoUl .badge.badge-warning {
    background: #fcaf41 !important;
}
.ToDoUl .badge.badge-info {
    background: #38AFD3 !important;
}
.todolist-widget .input-group .form-control,
.todolist-widget .input-group-btn:last-child > .btn, .todolist-widget .input-group-btn:last-child > .btn-group,
.todolist-widget .nav-pills > li.active > a::after,
.calender-gridster .btn-group > .btn.active {
    z-index: auto;
}
/*Xtra small Devices*/
@media screen and (max-width: 767px) {
    .ind-chat-open .Chat-wrapper {
        display: none;
    }
    .ind-chat-open .Chat-History-wrapper {
        right: 0;
        width: 290px;
    }
}
/*Start with small Devices*/
@media screen (min-width: 768px) {
    .dashboard_mine .gridster, .dashboard_mine .gridster .gridster-item {
        max-height: 330px !important;
        margin: 0 15px;
        box-shadow: none;
    }

    .gridster, .gridster-loaded {
        position: relative;
    }

    .dashboard_mine .gridster .gridster-item {
        position: absolute;
        top: 0 !important;
        height: 330px !important;
    }

    .gridster #CurrentPlan canvas {
        max-height: 280px !important;
    }
    .cours-contents .right-sec {
        min-height: 588px !important;
    }
}