html{height: 100%;}
body {
	font-family:'Open Sans', sans-serif;
	font-size:14px;
	height: 100%;
	min-height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#content {
	padding-bottom:70px; /* Height of the footer element */
}
.text-center {
    text-align:center;
}
h1, h2, h3, h4, h5, h6 {
    font-family:'Open Sans', sans-serif;
}
.alg-right-pad {
    float:right;
    padding-right:20px;
}
a:hover {
    text-decoration:none;
}

.navbar-brand {
font-size: 25px;
padding: 0px 80px 0px 60px;
}
.navbar-brand img{
	margin-right:10px;
	margin-top: 2px;
	height:45px;
}
.navbar-default .navbar-brand {
	color: #000000;
}
.navbar-default {
	background-color: #f3f3f3;
	border-color: #f3f3f3;
	margin-bottom:0px;
}
.navbar {
	border-radius: 0px; 
}
/*Menu link normal*/
.navbar-nav.mnulink li{margin-right: 10px; margin-top: 10px; padding:0px;}
.navbar-nav.mnulink > li > a{color: #FFF !important; font-weight:bold; background-color:#4285f4; padding:5px 15px;border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px;}
/*Menu link hover*/
.navbar-nav.mnulink > li > a:hover, .navbar-nav.mnulink > li > a:focus{color: #CCC !important;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
	background-color: #4285f4;
	color:#FBFBFB;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
	color: #050505;
	background-color: #FFFFFF;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
	color: #222;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
	color: #222;
}
.header-nav .btn{border:none; padding:4px; margin:0px; float:left; color: #050505; background-color: #FFFFFF;}
.header-nav .btn:hover{color: #FFFFFF;}
.header-nav .dropdown-menu li a{ padding:10px 10px;}
.header-nav .dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a {color: #fff; text-decoration: none; background: #f3f3f3;}
.header-nav .avatar{
    width: 40px;
    float: left;
}
.header-nav .avatar img {
    height: 40px;
    width: 40px
}
.header-nav .user {
    display: inline-block;
    text-align: left;
    padding: 0;
	float: left;
	margin-right:10px;
}
.header-nav .user .hello {
    display: block;
    font-size: 11px;
    font-weight: bold
}
.header-nav .user .name {
    display: block;
    margin-top: -6px!important;
    font-size: 13px
}
.navbar-nav > li > .dropdown-menu{
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.dropdown-menu.notifications li:first-child,.dropdown-menu.pnotifications li:first-child,.dropdown-menu.fnotifications li:first-child {
    background-color: transparent;
	font-weight:bold;
	text-align:center;
	color:#222;
	font-size:12px;
	border:0px;
}
.dropdown-menu.notifications li:first-child:hover,.dropdown-menu.pnotifications li:first-child:hover,.dropdown-menu.fnotifications li:first-child:hover { 
background-color:transparent;
}
.dropdown-menu.notifications li, .dropdown-menu.pnotifications li, .dropdown-menu.fnotifications li{ border-bottom: 1px dashed #666666;}
.dropdown-menu.notifications li.divider, .dropdown-menu.pnotifications li.divider, .dropdown-menu.fnotifications li.divider{ border-bottom: 1px solid #666666;}
.dropdown-menu.notifications .row,.dropdown-menu.pnotifications .row,.dropdown-menu.fnotifications .row{margin:0px; padding-bottom:5px;}
.dropdown-menu.notifications .row div,.dropdown-menu.pnotifications .row div,.dropdown-menu.fnotifications .row div{padding:0px;}
.dropdown-menu.notifications .row img,.dropdown-menu.pnotifications .row img,.dropdown-menu.fnotifications .row img{width:40px; height:40px; margin:3px 5px 0px 5px;}
.dropdown-menu.notifications .message,.dropdown-menu.pnotifications .message,.dropdown-menu.fnotifications .message{ font-size:10px; font-weight:bold;}
.dropdown-menu.notifications .time,.dropdown-menu.pnotifications .time,.dropdown-menu.fnotifications .time{ font-size:10px; color:#F00;}
.dropdown-menu.notifications > li select,.dropdown-menu.pnotifications > li select,.dropdown-menu.fnotifications > li select{ font-size:10px;width:50%; float:left; margin-left:5px !important; margin-right:5px !important;}
.dropdown-menu.notifications > li:hover, .dropdown-menu.notifications > li:focus,.dropdown-menu.pnotifications > li:hover, .dropdown-menu.pnotifications > li:focus,.dropdown-menu.fnotifications > li:hover, .dropdown-menu.fnotifications > li:focus
{ background-color:#87ceeb;border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;border: 0px solid #000000;}
.dropdown-menu.notifications > li:hover select, .dropdown-menu.notifications > li:focus select,.dropdown-menu.pnotifications > li:hover select, .dropdown-menu.pnotifications > li:focus select,.dropdown-menu.fnotifications > li:hover select, .dropdown-menu.fnotifications > li:focus select{color:#000;}
.dropdown-menu.pnotifications .img-circle,.dropdown-menu.fnotifications .img-circle{width:30px; height:30px;}
/*=======================================
  BOOTSTRAP ADJUSTMENTS
==================================================*/
.container{ padding-top:15px; padding-bottom:15px;}
.row {
    /*margin-bottom:10px;*/
}
label.btn{color:#000;}
.navbar-default .navbar-nav>li>a{color:#222;}
label.btn-default:hover, label.btn-default:focus, label.btn-default:active, label.btn-default.active {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad;
}
.btn.blue {margin-bottom:5px;color:#FFF;}
.blue{background-color:#87ceeb;	border:1px solid #2196f3;}
.blue a{color:#FFF;}
.btn a:hover{color:#FFF;}

.btn.grey {margin-bottom:5px;color:#222;}
.grey{background-color:#f3f3f3;	border:1px solid #C1C1C1;}
.grey a{color:#222;}
.btn a:hover{color:#FFF;}
/*.grey.announcements{color:#4285f4;}
.grey.public{color:#34a853;}
.grey.favorite{color:#fbbc05;}
.grey.member{color:#ea4335;}*/
/*Button  hover*/
/*.btn:hover, .btn:focus, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #c92407;
    border-color: #c92407;
}*/
/*=======================================
  INDEX PAGE
==================================================*/

.box-border {
    border:1px solid #e1e1e1;
}

.product-box h3>a,.product-box h3>a:hover,.product-box h3>a:focus {
    color:#000;
    text-decoration:none;
}

.offer-box {
background-color: #6A75F0;
border: 1px solid #096FC0;
color: #fff;
font-weight: 900;
font-size:16px;
}
    .offer-box a {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
        font-weight: normal;
    }
    .offer-box a:hover {
        color:#000;
    }
.list-group a {
    font-size:14px;
    font-weight:900;
    color:#808080;
}
.list-group a:hover {
     color:#000;
    text-decoration:none;
}
.list-group-item{padding:10px 5px;}
.main-li {max-height:200px; overflow-x: hidden;overflow-y: auto;}
ul.sublist li.usActive{
	background: url(../img/bullet_green.png) left center no-repeat #FFF;
}
ul.sublist li.usInactive{
	background: url(../img/bullet_yellow.png) left center no-repeat #FFF;
}
ul.sublist li.usBusy{
	background: url(../img/bullet_red.png) left center no-repeat #FFF;
}
ul.sublist li.usOffline{
	background: url(../img/bullet_grey.png) left center no-repeat #FFF;
}
ul.sublist li{
	padding-left:20px;
	background: url(../img/bullet_grey.png) left center no-repeat #FFF;
    /*list-style-image: url(../img/bullet_grey.png);*/
}
.offer-colors {
	background-color: #B05FDD;
	border: 1px solid #A228F3;
}

.download-app-box {
    background-color: #069E98;
border: 1px solid #0FAA8B;
padding:30px;
line-height:40px;
font-size:25px;
font-weight:900;
color:#fff;
}
/*=======================================
  SLIDER main-style.css Changes
==================================================*/
.mi-slider {
margin-top: 0px;
}

.offer-text
{
position: absolute;
color: #FFF;
padding: 14px 16px 12px 16px;
margin-top: 10px;
background-color:#18b424;

}
.offer-text2
{
position: absolute;
color: #FFF;
padding: 14px 16px 12px 16px;
margin-top: 10px;
background-color:#EB0429;

}
/*=======================================
  FOOTER SECTION
==================================================*/
.footer-box {
    background-color:#e6f4ff/*#069E98 #F5F5F5*/;
    padding:20px 50px 20px 50px;
}
hr{border-top: 1px solid #87ceeb;}
.small-box {
    font-size:10px;
}

.footer-box a {
    color:#808080;
    text-decoration:none;
}
.footer-box a:hover {
    color:#000;
}
.pad-botom {
    padding-bottom:30px;
}
.footer-box p {
    padding-top:15px;
    padding-bottom:15px;
    line-height:25px;
}
.social-box a{
     color:#333436;
    text-decoration:none;
}

.end-box {
	padding:20px;
	color:#222;
	background-color:#f3f3f3;
	font-size:14px;
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	height:60px;
}
.end-box a{color:#222;}
.end-box a{color:#222; text-decoration:underline;}
.form-group input[type="checkbox"] {display: none;}
.form-group input[type="checkbox"] + .btn-group > label span {width: 20px;}
.form-group input[type="checkbox"] + .btn-group > label span:first-child {display: none;}
.form-group input[type="checkbox"] + .btn-group > label span:last-child {display: inline-block;}
.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {display: inline-block;}
.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {display: none;}
input[type=radio] {display:none;}
input[type=radio] + label {
	display:inline-block;
	margin:-2px;
	padding: 4px 12px;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 20px;
	color: #333;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255,255,255,0.75);
	vertical-align: middle;
	cursor: pointer;
	background-color: #f5f5f5;
	background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
	background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
	background-image: -o-linear-gradient(top,#fff,#e6e6e6);
	background-image: linear-gradient(to bottom,#fff,#e6e6e6);
	background-repeat: repeat-x;
	border: 1px solid #ccc;
	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
	border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	border-bottom-color: #b3b3b3;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label{
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
	background-color:#3276b1;
	color: #FFF;
}
.modal-box {
	display: none;
	position: absolute;
	z-index: 1000;
	width: 98%;
	background: white;
	border-bottom: 1px solid #aaa;
	border-radius: 4px;
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.1);
	background-clip: padding-box;
}
@media (min-width: 32em) {
	.modal-box { width: 70%; }
}
.modal-main-body{
	position: fixed;
    overflow-y: scroll;
    width: 100%;
    padding-right: 0!important
}
.modal-box header, .modal-box .modal-header {padding: 1.25em 1.5em;	border-bottom: 1px solid #ddd;}
.modal-box header h3,.modal-box header h4,.modal-box .modal-header h3,.modal-box .modal-header h4 { margin: 0; }
.modal-box .modal-body { padding: 10px 10px; }
.modal-box footer,.modal-box .modal-footer {
	padding: 1em;
	border-top: 1px solid #ddd;
	background: rgba(0, 0, 0, 0.02);
	text-align: right;
}
.modal-overlay {
	opacity: 0;
	filter: alpha(opacity=0);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 900;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3) !important;
}
a.close {
	line-height: 1;
	font-size: 1.5em;
	position: absolute;
	top: 5%;
	right: 2%;
	text-decoration: none;
	color: #999;
}
a.close:hover {
	color: #222;
	-webkit-transition: color 1s ease;
	-moz-transition: color 1s ease;
	transition: color 1s ease;
}
.login-box,
.register-box {
    width: 400px;
    padding: 20px;
    margin: 0px auto;
    background: #e9ebec;
}

.login-box .header,
.register-box .header {
    background: #4285f4;
    color: #FFF;
    text-align: center;
    margin: -20px -20px 20px -20px;
    padding: 15px;
    text-transform: uppercase
}

.login-box form.login input[type="text"],
.register-box form.login input[type="text"],
.login-box form.login input[type="password"],
.register-box form.login input[type="password"] {
    border-right: none!important;
    -webkit-border-radius: 2px 0 0 2px;
    -moz-border-radius: 2px 0 0 2px;
    border-radius: 2px 0 0 2px
}

.login-box form.login .input-group-addon,
.register-box form.login .input-group-addon {
    height: 0!important;
    border: 1px solid #e9ebec!important;
    background: white;
    -webkit-border-radius: 0 2px 2px 0;
    -moz-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0;
    border-left: 1px none!important;
    margin-left: -1px!important
}

.login-box label,
.register-box label {
    margin: 10px 5px -10px 5px
}

.login-box input[type="text"],
.login-box input[type="email"],
.login-box input[type="password"],
.register-box input[type="text"],
.register-box input[type="email"]
.register-box input[type="password"] {
    border: 1px solid #e9ebec;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding: 0 10px;
    height: 40px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}
.register select{
	height: 39px;
    line-height: 39px;
    border: none;
    border-radius: 0px;
    padding: 0px 10px;
    margin-left: 1px;
}
.login-box input[type="text"]:focus,
.register-box input[type="text"]:focus,
.login-box input[type="password"]:focus,
.register-box input[type="password"]:focus {
    outline: 0
}

.login-box .confirm,
.register-box .confirm {
    position: relative;
    margin: 10px 0 10px -15px
}

.login-box .confirm label,
.register-box .confirm label {
    position: absolute;
    top: -9px;
    left: 30px
}

.login-box form.register .input-group-addon,
.register-box form.register .input-group-addon {
    height: 0!important;
    width: 35%;
    border: 1px solid #e9ebec!important;
    background: #e9ebec!important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}
form.register .row,form.login .row{
	margin-bottom:0px;
}
form.register .form-group,form.login .form-group{
	margin-bottom:10px;
}
form.register .innReg{ padding:0px;}
.login-box button,
.register-box button {
    margin: 15px 0!important
}
.login-box-locked {
    position: relative;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border: 1px solid #e9ebec;
    margin-top: 250px
}

.login-box-locked.type2 {
    background: rgba(255, 255, 255, 0.7)
}

.login-box-locked img.avatar {
    float: left;
    width: 120px;
    margin-right: 20px
}

.login-box-locked p {
    margin-top: -8px;
    font-weight: 300
}

.login-box-locked a {
    display: block;
    font-weight: 300;
    margin-top: 5px;
    font-size: 12px
}
.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0
}

.input-group-addon,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
input[type="file"],
.uneditable-input {
    border-color: #e9ebec;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

textarea {
    border: 1px solid #e9ebec;
    -webkit-border-radius: 2px!important;
    -moz-border-radius: 2px!important;
    border-radius: 2px!important
}
.input-group-addon.clear {
    background: white;
    margin: 0 -1px;
    color: #b2b8bd
}
.choose-date .input-group-addon,
.choose-date input {
    background: transparent;
    border: 0
}

.choose-date .input-group-addon {
    font-size: 12px
}
.bootstrap-timepicker .input-group-addon {
    cursor: pointer;
    -webkit-border-radius: 4px 0 0 4px!important;
    border-radius: 4px 0 0 4px!important;
    border-right: 0
}
.input-group.color .input-group-addon i {
    display: block;
    cursor: pointer;
    width: 13px
}

.profile-image {
    width: 100%;
    border: 5px solid white;
    outline: 1px solid #dbdee0
}

.profile h3 {
    padding: 0 5px
}

ul.profile-details {
    margin-top: 10px;
    padding: 0 5px;
    list-style: none;
    color: #333;
}

ul.profile-details li {
    position: relative;
    margin: 0 0 20px 0;
    padding-left: 22px
}

ul.profile-details li div {
    color: #b2b8bd
}

ul.profile-details li div i {
    position: absolute;
    top: 4px;
    left: -5px;
    color: #ced1d4;
    width: 20px;
    text-align: center
}

ul.profile-details li input[type="text"] {
    color: black!important
}

ul.friends-list {
    padding: 0;
    list-style: none
}

ul.friends-list li {
    width: auto;
    min-width: 170px;
    margin-bottom: 20px;
    border: 1px solid #e9ebec;
    background: #f7f7f8;
    float: left;
    padding: 5px;
    margin: 0 0 5px 5px;
    white-space: nowrap;
    overflow: hidden
}

ul.friends-list li:last-child {
    margin-bottom: 0
}

ul.friends-list li .avatar {
    float: left;
    margin-right: 10px;
    width: 40px
}

ul.friends-list li .avatar img {
    width: 40px
}

ul.friends-list li a {
    display: inline-block;
    font-size: 22px;
    line-height: 8px;
    text-decoration: none;
    color: #b2b8bd
}
.nav-tabs li a {
    border-color: #dbdee0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: #e9ebec;
    margin: 6px -1px -6px 0;
    line-height: 1
}

.nav-tabs li a:hover {
    border-color: #dbdee0;
    background: #dbdee0
}

.nav-tabs li.active>a {
    line-height: 1.428571429;
    margin: 0 -1px 0 0
}

.tab-content {
    background: white;
    border: 1px solid #dbdee0;
    border-top: 0;
    padding: 10px
}

.box-header .nav-tabs {
    border: 0;
    float: right
}

.box-header .nav-tabs li a {
    background: transparent;
    border: 0;
    border-left: 1px solid #ced1d4;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin: 0;
    font-size: 14px;
    line-height: 16px;
    font-weight: 300;
    padding: 11px 15px;
    height: 40px
}

.box-header .nav-tabs li.active>a {
    background: white;
    border: 0;
    border-left: 1px solid #ced1d4
}

.box-header .nav-tabs li:hover {
    border: 0
}

.box-header .nav-tabs li:last-child {
    margin-right: 3px
}

.box-content .tab-content {
    background: transparent;
    border: 0;
    padding: 0
}

/*Timeline Start*/
.page-todo .tasks {
    background: white;
    padding: 0;
    border-right: 1px solid #dbdee0;
    /*margin: -30px 15px -30px -15px*/
}

.page-todo .task-list {
    padding: 0px 15px;
    height: 100%
}

.page-todo .graph {
    height: 100%
}
/*
.page-todo .priority.high {
    background: #ffeded;
    margin-bottom: 1px
}

.page-todo .priority.high span {
    background: #ff5454;
    padding: 2px 10px;
    color: white;
    display: inline-block;
    font-size: 12px
}

.page-todo .priority.medium {
    background: #fef8eb;
    margin-bottom: 1px
}

.page-todo .priority.medium span {
    background: #fabb3d;
    padding: 2px 10px;
    color: white;
    display: inline-block;
    font-size: 12px
}

.page-todo .priority.low {
    background: #e4f5dc;
    margin-bottom: 1px
}

.page-todo .priority.low span {
    background: #78cd51;
    padding: 2px 10px;
    color: white;
    display: inline-block;
    font-size: 12px
}

.page-todo .task {
    border-bottom: 1px solid #f9f9f9;
    margin-bottom: 1px;
    position: relative
}

.page-todo .task .desc {
    display: inline-block;
    width: 75%;
    padding: 10px 10px;
    font-size: 12px
}

.page-todo .task .desc .title {
    font-size: 18px;
    margin-bottom: 5px
}

.page-todo .task .time {
    display: inline-block;
    width: 15%;
    padding: 10px 10px 10px 0;
    font-size: 12px;
    text-align: right;
    position: absolute;
    top: 0;
    right: 0
}

.page-todo .task .time .date {
    font-size: 18px;
    margin-bottom: 5px
}

.page-todo .task.last {
    border-bottom: 1px solid transparent
}

.page-todo .task.high {
    border-left: 2px solid #ff5454
}

.page-todo .task.medium {
    border-left: 2px solid #fabb3d
}

.page-todo .task.low {
    border-left: 2px solid #78cd51
}

.page-todo .timeline {
    width: auto;
    height: 100%;
    margin: 20px auto;
    position: relative
}

.page-todo .timeline:before {
    position: absolute;
    content: '';
    height: 100%;
    width: 4px;
    background: #e9ebec;
    left: 50%;
    margin-left: -2px
}

.page-todo .timeslot {
    display: inline-block;
    position: relative;
    width: 100%;
    margin: 5px 0
}

.page-todo .timeslot .task {
    position: absolute;
    width: 42%;
    padding-right: 18px;
    display: block;
    height: auto;
    border: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.page-todo .timeslot .task span {
    border: 2px solid #67c2ef;
    background: #f1fafe;
    padding: 5px;
    display: block;
    font-size: 11px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

.page-todo .timeslot .task span span.details {
    font-size: 16px;
    margin-bottom: 10px
}

.page-todo .timeslot .task span span.remaining {
    font-size: 14px
}

.page-todo .timeslot .task span span {
    border: 0;
    background: transparent;
    padding: 0
}

.page-todo .timeslot .task .arrow {
    position: absolute;
    top: 6px;
    right: 0;
    height: 20px;
    width: 20px;
    background: url(../img/timeline-left-arrow.png) no-repeat
}

.page-todo .timeslot .icon {
    position: absolute;
    border: 2px solid #b2b8bd;
    background: #34383c;
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
    height: 30px;
    width: 30px;
    left: 50%;
    margin-left: -16px;
    color: white;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    text-shadow: none;
    z-index: 2;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.page-todo .timeslot .time {
    background: #e9ebec;
    position: absolute;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    top: 1px;
    left: 50%;
    padding: 5px 10px 5px 40px;
    z-index: 1;
    margin-top: 1px
}

.page-todo .timeslot.alt .task {
    left: auto;
    right: -20px;
    padding-left: 18px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.page-todo .timeslot.alt .task .arrow {
    position: absolute;
    top: 6px;
    left: 0;
    height: 20px;
    width: 20px;
    background: url(../img/timeline-right-arrow.png) no-repeat
}

.page-todo .timeslot.alt .time {
    top: 1px;
    left: auto;
    right: 50%;
    padding: 5px 40px 5px 10px
}*/

.no-data{ text-align:center; padding:100px 0px;}
.timeline{
	background-image: url("../img/line.png");
    background-position: center; 
    background-repeat: repeat-y;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    height: auto;
    padding: 0px;
    clear: both;
    overflow: hidden;
}
.timeline.nodata{ background-image:none;}
.timeline li.year, .timeline li.event{
	list-style-type: none;
	z-index: 999;
}
.timeline li.year{
	clear: both;
	width: 4em;
	margin: 0 auto;
	line-height: 4em;
	background-color: #34383c;
	border-radius:50%;
	text-align: center;
	margin-bottom: 25px;
	border: 2px solid #b2b8bd;
	color:#FFF;
	-webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.timeline li.year:first-child{
	margin-top:0px;
}
.timeline li.event{
	width: 45%;
	border: 2px solid #999999;
    background: #f3f3f3;
	margin-bottom: 20px;
	padding: 10px;
	position: relative;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.timeline li.event h3{
	font-size:16px;
	padding:0px;
	margin:0px 0px 10px 0px;
}
.timeline li.event p{
	font-size:11px;
	float: left;
    width: 100%;
}
.evegallFI{width: 80px; margin-right: 5px; text-align: left; vertical-align: top; float: left;}
.timeline li.event .month{
	font-size:11px;
	font-weight:bold;
}
/*li.event:nth-child(even) {*/
li.event.even{
    /*color: green;*/
    clear:left;
    float: left;
	margin-top:100px;
	margin-bottom:50px;
}
/*li.event:nth-child(odd){*/
li.event.odd{
    /*color: red;*/
    clear: right;
    float: right;
    margin-top:100px;
	margin-bottom:50px;
}
li.event.firstli{ margin-top:0px; margin-bottom:0px;}

/*.timeline li.event:nth-child(even)::after {*/
li.event.even::after {
    content: "";
	position: absolute;
	top: 6px;
	right: -20px;
	height: 20px;
	width: 20px;
	background: url(../img/timeline-left-arrow.png) no-repeat;
}
/*li.event:nth-child(odd)::before{*/
li.event.odd::before {
	content: "";
	position: absolute;
	top: 6px;
	left: -20px;
	height: 20px;
	width: 20px;
	background: url(../img/timeline-right-arrow.png) no-repeat;
}
#loader{
	margin-top:10px;
}
.sk-spinner-pulse.sk-spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
  animation: sk-pulseScaleOut 1s infinite ease-in-out; 
}

@-webkit-keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);}

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;}
}

@keyframes sk-pulseScaleOut {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;}
}
.load-animate {opacity: 0;}
.fadeInUp {-webkit-animation-name: fadeInUp;-moz-animation-name: fadeInUp;-o-animation-name: fadeInUp;animation-name: fadeInUp;}
.animated {-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
-webkit-animation-fill-mode: both;-moz-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translateY(20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translateY(20px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp}
/*Timeline End*/
/*Family Tree Start*/
.imgTree{
	width:60px; height:60px;
}
#graph{
	background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
	background-size: 10px 10px;
	border: 1px dashed rgba(0,0,0,0);
	width:100%;
	min-height:680px;
}
#graphCont{
	width:100px;
	margin:0px;
	padding:0px;
}
.dslpTree{
	width:0px;height:0px; position: absolute; top: 55%; left: 3%; transform: translate(-50%,-50%); z-index:-1;
}
.dslpTree:hover{ z-index:1}
.dslpTree li {
	list-style: none;
}
.dslpTree li a {
	position: absolute;
	text-decoration: none;
	width:65px;
	height:65px;
	border-radius:50%;
	line-height:1.5em;
	text-align:center;
	font-family: helvetica, arial;
	background-color: #C0D9D9;
	transition: all .2s ease-in-out;
	z-index:100;
}
.dslpTree li a:hover {
	transform: scale(1.5); z-index:1000;
	-webkit-transition: 0.5s ease;
	-moz-transition: 0.5s ease;
	-ms-transition: 0.5s ease;
	-o-transition: 0.5s ease;
	transition: 0.5s ease;
}
.hasTree.Mother{border: 3px solid #990033;}
.hasTree.Father{border: 3px solid #666666;}
.hasTree.Wife,.hasTree.Husband{border: 3px solid #A61EA3;}
.hasTree.Brother{border: 3px solid #009900;}
.hasTree.Sister{border: 3px solid #FF9933;}
.hasTree.Son{border: 3px solid #FFFF00;}
.hasTree.Daughter{border: 3px solid #0033FF;}

.noTree{border: 3px solid;}
.dslpTree li a:link, .dslpTree li a:visited {
	color: #000;
	font-size: 12px;
}
#droparea{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 124px; width: 124px;padding: 0px; margin:0px; text-align: center;}
#droparea h4 { width: 124px; height: 124px; padding: 0px; margin:0px; text-align: center;}
#mainImg{background-color:#903;margin-top: 30px; margin-left: 3px; z-index:99; width:124px; height:124px;}

/*Family Tree End*/
.box-error {
	margin-top: 100px;
	margin-bottom: 100px;
}
.box-error h1 {
    float: left;
    font-size: 48px;
    margin-right: 20px
}
.box-error p {
    margin-top: -8px;
    font-weight: 300
}

.box {
    border: 1px solid #999999;
    margin: 0 0 30px 0
}

.box.noOverflow {
    overflow: hidden
}
.box .box-header {
    color: #222;
    font-size: 16px;
    overflow: hidden;
    background: #f3f3f3;
    border-bottom: 1px solid #999999;
    height: 40px
}
.fc-header-title h2, .box .box-header h2{
	font-size: 16px;
    line-height: 16px;
    font-weight: 300;
}
.box .box-header h2 {
    float: left;
    padding: 10px 0;
    margin: 0 0 0 20px;
}

.box .box-header h2 i {
    border-right: 1px solid #999999;
    color: #222;
    padding: 12px 0;
    height: 40px;
    width: 40px;
    display: inline-block;
    text-align: center;
    margin: -10px 20px -10px -20px;
    font-size: 16px
}

.box .box-header .box-icon {
    float: right
}

.box .box-header .box-icon i {
    display: inline-block;
    color: #ced1d4;
    text-align: center;
    height: 40px;
    width: 40px;
    padding: 12px 0;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    border-left: 1px solid #ced1d4;
    text-decoration: none
}

.box .box-header .box-icon a {
    margin-left: -3px!important
}

.box .box-content {
    padding: 10px;
    background: white
}

.box .box-content.no-padding {
    background: white;
    padding: 1px 0
}
.tt-dropdown-menu {
    min-width: 160px;
    margin-top: 2px;
    padding: 5px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box
}

.tt-suggestion {
    display: block;
    padding: 3px 20px
}

.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #08c, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #08c, #0077b3);
    background-image: -o-linear-gradient(top, #08c, #0077b3);
    background-image: linear-gradient(to bottom, #08c, #0077b3);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
    color: #fff
}

.tt-suggestion p {
    margin: 0
}

.notification {
    position: absolute;
    top: -12px;
    right: -12px;
    line-height: 16px;
    height: 16px;
    padding: 6px 10px;
    color: white!important;
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.notification.small {
    padding: 2px 7px;
    color: white!important;
    border-width: 1px;
    border-style: solid;
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em
}
.notification.small.blue,
.notification.blue {
	background: #36a9e1;
}
.notification.small.yellow,
.notification.yellow {
    background: #eae874
}

.notification.small.red,
.notification.red {
    background: #ff5454
}

.notification.small.green,
.notification.green {
    background: #78cd51
}

.notification.small.orange,
.notification.orange {
    background: #fabb3d
}

.notification.small.red,
.notification.red {
    background: #ff5454
}

.label,
.badge {
    font-weight: 300;
    font-size: 10px;
    padding: 4px 6px;
    border: 0;
    text-shadow: none
}
.badge{ background:#F00;}
.label {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

.label-important,
.badge-important,
.label-important[href],
.badge-important[href] {
    background: #ff5454
}

.label-warning,
.badge-warning,
.label-warning[href],
.badge-warning[href] {
    background: #fabb3d
}

.label-success,
.badge-success,
.label-success[href],
.badge-success[href] {
    background: #78cd51
}

.label-info,
.badge-info,
.label-info[href],
.badge-info[href] {
    background: #67c2ef
}


.slider {
    background: #e9ebec;
    border: 0;
    height: 10px;
    position: relative;
    z-index: 10;
    margin: 5px 0!important
}

.slider .ui-slider-range {
    position: absolute;
    -webkit-box-sizing: content-box;

    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.slider.small {
    height: 6px
}
.ui-droppable-hover {
    background-color:#2196f3;
}
.ui-droppable-active {
    border: 1px dashed #666;
}
.ui-slider-handle {
    border: 1px solid #ced1d4;
    outline: none!important
}

.ui-slider-horizontal .ui-slider-handle {
    background: url("../images/handle.png") no-repeat center center scroll #fff!important;
    background-position: 50% 50%;
    background-size: 8px 8px!important
}

.ui-slider-horizontal.small .ui-slider-handle {
    background: url("../images/handle.png") no-repeat center center scroll #fff!important;
    background-position: 50% 50%;
    background-size: 8px 8px!important;
    width: 14px!important;
    height: 14px!important
}

.sliderVertical {
    background: #e9ebec;
    border: 0;
    top: auto;
    bottom: auto;
    width: 10px!important;
    position: relative;
    float: left;
    height: 100px;
    margin: 10px 20px;
    width: 5px
}

.sliderVertical .ui-slider-range {
    height: 100%;
    width: 100%;
    top: auto;
    bottom: auto;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.sliderVertical .ui-slider-handle {
    background: url("../images/handlev.png") no-repeat center center scroll #fff!important;
    background-position: 50% 50%;
    background-size: 8px 8px!important;
    left: 50%;
    margin: 9px 0 -9px -9px!important
}

.sliderVertical .ui-slider-range-max {
    top: 0
}

.sliderVertical .ui-slider-range-min {
    bottom: 0
}

.sliderVertical.small {
    width: 6px!important;
    position: relative;
    float: left;
    height: 100px;
    margin: 10px 20px;
    width: 5px
}

.sliderVertical.small .ui-slider-handle {
    background: url("../images/handlev.png") no-repeat center center scroll #fff!important;
    background-position: 50% 50%;
    background-size: 8px 8px!important;
    width: 14px;
    height: 14px;
    margin: 0 0 -7px -7px!important
}

.sliderBlue .ui-slider-range,
.progressBlue .ui-progressbar-value {
    background: #36a9e1
}

.sliderGreen .ui-slider-range,
.progressGreen .ui-progressbar-value {
    background: #bdea74
}

.sliderDarkGreen .ui-slider-range,
.progressDarkGreen .ui-progressbar-value {
    background: #78cd51
}

.sliderPink .ui-slider-range,
.progressPink .ui-progressbar-value {
    background: #e84c8a
}

.sliderOrange .ui-slider-range,
.progressOrange .ui-progressbar-value {
    background: #fa603d
}

.sliderLightOrange .ui-slider-range,
.progressLightOrange .ui-progressbar-value {
    background: #fabb3d
}

.sliderRed .ui-slider-range,
.progressRed .ui-progressbar-value {
    background: #ff5454
}

.sliderYellow .ui-slider-range,
.progressYellow .ui-progressbar-value {
    background: #eae874
}

.progress {
    background: #e9ebec;
    color: #e9ebec;
    border: 0;
    height: 18px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    position: relative;
    margin-top: -2px
}

.progress .ui-progressbar-value {
    border: 0;
    height: 100%;
    top: 1px;
    position: absolute;
    left: 1px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

.progress.slim {
    height: 10px
}

.progressBarValue span {
    font-size: 12px
}

.progressBarValue span.progressCustomValueVal {
    font-size: 18px;
    font-weight: 700;
    padding: 0 5px;
    color: #fa603d
}

.progressSlim {
    background: #ced1d4;
    border: 0;
    height: 10px;
    position: relative;
    margin-top: -2px
}

.progressSlim .ui-progressbar-value {
    border-color: transparent;
    height: 100%;
    top: 0;
    position: absolute;
    left: 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

.tasks .progressSlim {
    overflow: hidden;
    border: none!important;
    height: 8px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    margin-top: 0
}

.tasks .progressSlim .ui-progressbar-value {
    overflow: hidden;
    margin: 0;
    border: none!important
}
input.error, textarea.error,select.error {
    border: 1px solid #F00 !important;
}
.valid{ border:1px solid #8BC34A !important;}
.error {
    color: #F00;
    font-size: 12px;
	margin:0px !important;
}
#agree-error{
	position: absolute;
    width: 140px;
    top: 20px;
}
.panel-default > .panel-heading,.panel-default > .panel-footer{ background-color:#4285f4; color:#FFF;}
.panel-default > .panel-heading,.panel-default > .panel-footer,.panel-default > .panel-body{ border:1px solid #4285f4;}
/*.panel-heading, .panel-footer{ background-color:#B05FDD !important; color:#FFF !important;}
.panel-heading,.panel-footer,.panel-body{ border:1px solid #A228F3 !important;}*/

.panel-public > .panel-heading, .panel-public > .panel-footer{ background-color:#996600 !important; color:#FFF !important;}
.panel-public > .panel-heading,.panel-public > .panel-footer,.panel-public > .panel-body{ border:1px solid #4285f4 !important;}

.panel ul{
    padding:0px;
    margin:0px;
    list-style:none;
}
.news-item{
    padding:4px 4px;
    margin:0px;
    border-bottom:1px dotted #555;
}
#public > .news-item{ border-bottom:none !important; text-align:left !important; padding:0px;}
.panel-public > .panel-body{ padding:0px;}
.imgPublic{ width:50px; height:50px;}
.panel-public .row{ margin:0px;}
.panel-public .panel-heading{ background-color:#4285f4 !important; color:#FFF !important; border-radius:0px;float:left; padding:18px 5px;}
#public{max-height:50px;}
.panel-public { margin-bottom:5px; overflow:hidden;}
.panel-public .panel-content{ padding:3px;}
.carousel, .item{
    height: 100%;
}
.carousel-inner {
    height: 100%;
}
.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.editable-click, a.editable-click{ border:none; color:#333;}
a.editable-click:hover{border-bottom: dashed 1px #0088cc; color:#333;}

.imgTree + .tooltip > .tooltip-inner {background-color: #000;}
.imgTree + .tooltip > .tooltip-arrow { border-top-color:#000;}
.imgTree + .tooltip > .tooltip-inner .rlsp_name{font-size:6px; word-break:keep-all;}
.imgTree + .tooltip > .tooltip-inner .rlsp_type{font-size:6px; clear: both;}

.listTree{min-height:210px;}

.imgareaselect-border1 {
	background: url(../img/border-anim-v.gif) repeat-y left top;
}

.imgareaselect-border2 {
    background: url(../img/border-anim-h.gif) repeat-x left top;
}

.imgareaselect-border3 {
    background: url(../img/border-anim-v.gif) repeat-y right top;
}

.imgareaselect-border4 {
    background: url(../img/border-anim-h.gif) repeat-x left bottom;
}

.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
    filter: alpha(opacity=50);
	opacity: 0.5;
}
.imgareaselect-handle {
    background-color: #fff;
	border: solid 1px #000;
    filter: alpha(opacity=50);
	opacity: 0.5;
}
.imgareaselect-outer {
	background-color: #000;
    filter: alpha(opacity=50);
	opacity: 0.5;
}
.imgareaselect-selection {
}

.noti-dropdown{margin-top:6px; margin-bottom:0px; margin-right:10px; padding:0px;}
.btn-circle { float:right; padding:8px; background:#ffffff; color:#222; margin-left:4px; }
.btn-circle:hover { float:right; padding:8px; background:#ffffff; color:#999999; margin-left:4px; }
.icon-btn { padding:0px !important; margin-bottom:0px; line-height: 30px; background-color: transparent; border: none; color:#FFF !important; float:left; margin-left:3px; border-radius:50px;}
.icon-btn > .fa-bell{margin:0px;}

.icon-btn > .fa-globe{margin:0px;padding: 8px 9px;}
.icon-btn > .fa-group{margin:0px;padding: 8px 8px;}
.navbar-default .navbar-nav > li > a.icon-btn:hover, .navbar-default .navbar-nav > li > a.icon-btn:focus{background-color:transparent;}
.noti-dropdown .dropdown-menu {padding:5px; min-width:240px;}

#previewProfilePic img{width:auto; height:300px;}

.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;
}
.image-preview{margin-bottom:20px;}
.image-preview-filename{ position:absolute; bottom:-16px; right:0px;}
#counter-text{font-size: 10px; clear: both; margin-top: 3px; display: block; position: absolute; bottom: 1px; background: #FF0000; right: 16px; padding: 0px 5px;}
.image-tag-preview{widht:50px; height:50px; position:absolute; left:0px;}

/* powertip event popup styles */
/* jquery.powertip overides */
#body #powerTip {
    color:#000;
    background-color:#fff;
    width:380px;
    padding:16px 16px 8px;
    white-space: normal;
    z-index:600;
    border:1px solid #ccc;
    -moz-box-shadow: 4px 4px 10px #222;
    -webkit-box-shadow: 4px 4px 10px #222;
    box-shadow: 4px 4px 10px #222;
}

#powerTip h3, #powerTip h4, #powerTip p {
    /*margin-bottom: 10px;*/
	margin-top:0px;
}

.event_img {
    margin: 0 10px 10px 0;
    float:left;
    width:80px;
}

.event_img img {border-radius: 2px;  width:80px;}

.event_title {
    font-size: 16px;
    line-height: 18px;
    color:#0976B7;
    font-weight: bold;
}

.event_desc {
    font-size: 12px;
    line-height: 14px;
}

.event_start {
    font-size: 11px;
    font-weight: normal;
    text-align: left;
    color:#888;
}

.event_title a {text-decoration: none;}
.event_title a:hover {text-decoration: underline;}

.event_link {
    text-decoration: underline;
    clear:left;
    font-weight: bold;
    font-size: 14px;
}
.event_divider {
    border-left:1px solid #ccc;
    padding-left:10px;
    margin-left:90px;
}
#posting{max-height: 220px; overflow-y: auto;}
#bottomMoreButton{padding-top:10px; clear:both;}
.CommentPosted{margin:0px;}
.commentPanel{ float:left; margin-left:0px; margin-right:0px; border-bottom: 1px #333 dashed; margin-top: 5px;}
.CommentImg{ margin:0px; width:40px; text-align:left; float:left;}
.postedComments{font-size:12px; font-weight:bold; width:100%;}
.divImg{ padding:0px;}
.divContent{ padding:0px;margin-left: -20px;}
.divContent p{ margin:0px;}
.divContent  span{color:#666666; font-size:11px}

#slides {
	  max-height:325px;
    }

    #slides .slidesjs-navigation {
      margin-top:5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(../img/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(../img/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }
.file-input{height:288px;}
.file-preview {max-height:250px; overflow-y:auto;}
.btn-info {
    color: #fff;
    background-color: #4387fd;
    border-color: #46b8da;
}
.btn-info:hover {
    color: #fff;
    background-color: #0000FF;
    border-color: #46b8da;
}
#myCanvas{ background-image:url(../img/banner/happy-family.jpg); background-repeat:no-repeat; background-size: contain; background-position: 50% 50%;}
.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}
.node {cursor: pointer;}
.node circle {fill: #fff;stroke: steelblue;stroke-width: 1.5px;}
.node text {font: 10px sans-serif;fill: #222;}
.link {fill: none;stroke: #ccc;stroke-width: 1.5px;}
.evtscrollimg{width:35px; height:35px; margin-right: 10px;}
.favlistimg{width:35px; position:absolute; top:2px; right:5px;}
.lineheg50{line-height:50px;}
#loadSearch{ overflow-y:auto;}
#notiAnno.panel{ border:0px;}
.calEveBody{max-height:490px; overflow-x: hidden;overflow-y: auto;}
#familyRelation li{font-size:10px;}
@media only screen and (min-width:992px) and (max-width:1199px) {
	.hidden-phone,#external-events{margin-bottom:20px;}
    .page-todo task .desc {
        display: inline-block;
        width: 70%;
        padding: 10px 10px;
        font-size: 12px
    }
    .page-todo task .desc .title {
        font-size: 16px;
        margin-bottom: 5px
    }
    .page-todo task .time {
        display: inline-block;
        float: right;
        width: 20%;
        padding: 10px 10px;
        font-size: 12px;
        text-align: right
    }
    .page-todo task .time .date {
        font-size: 16px;
        margin-bottom: 5px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .page-todo .task {
        border-bottom: 1px solid #f9f9f9;
        margin-bottom: 1px
    }
    .page-todo .task .desc {
        display: inline-block;
        width: 65%;
        padding: 10px 10px;
        font-size: 10px;
        margin-right: -20px
    }
    .page-todo .task .desc .title {
        font-size: 14px;
        margin-bottom: 5px
    }
    .page-todo .task .time {
        display: inline-block;
        float: right;
        width: 25%;
        padding: 10px 10px;
        font-size: 10px;
        text-align: right
    }
    .page-todo .task .time .date {
        font-size: 14px;
        margin-bottom: 5px
    }
    .page-todo .timeslot .task span {
        border: 2px solid #67c2ef;
        background: rgba(103, 194, 239, 0.1);
        padding: 5px;
        display: block;
        font-size: 10px
    }
    .page-todo .timeslot .task span span {
        border: 0;
        background: transparent;
        padding: 0
    }
    .page-todo .timeslot .task span span.details {
        font-size: 14px;
        margin-bottom: 0
    }
    .page-todo .timeslot .task span span.remaining {
        font-size: 12px
    }
	#droparea{top: 41%;}
	#graph{min-height:600px;}
}
@media only screen and (max-width:767px) {
    .page-todo .tasks {
        position: relative;
        margin: 0!important
    }
    .page-todo .graph {
        position: relative;
        margin: 0!important
    }
    .page-todo .task {
        border-bottom: 1px solid #f9f9f9;
        margin-bottom: 1px
    }
    .page-todo .task .desc {
        display: inline-block;
        width: 65%;
        padding: 10px 10px;
        font-size: 10px;
        margin-right: -20px
    }
    .page-todo .task .desc .title {
        font-size: 14px;
        margin-bottom: 5px
    }
    .page-todo .task .time {
        display: inline-block;
        float: right;
        width: 25%;
        padding: 10px 10px;
        font-size: 10px;
        text-align: right
    }
    .page-todo .task .time .date {
        font-size: 14px;
        margin-bottom: 5px
    }
    .page-todo .timeslot .task span {
        padding: 5px;
        display: block;
        font-size: 10px
    }
    .page-todo .timeslot .task span span {
        border: 0;
        background: transparent;
        padding: 0
    }
    .page-todo .timeslot .task span span.details {
        font-size: 14px;
        margin-bottom: 0
    }
    .page-todo .timeslot .task span span.remaining {
        font-size: 12px
    }
	#graph{min-height:600px;}
	#droparea{top: 41%;}
}
@media (max-width: 640px) {
	.dslpTree li a {width:45px;height:45px;}
	.navbar-header{ width:100%; margin:0px !important;}
	.family .row{margin:0px;}
	.family .btn-group{width:100%;}
	.alg-right-pad{padding:0px;}
	.grey{width:100% !important;}
	.timeline li.event{
		width: 80%;
		background-color: #fff;
		border: 1px solid #ff0000;
		margin: 20px auto;
		padding: 20px;
		position: relative;
	}
	li.event:nth-child(odd) {
	    color: green;
	    clear: both;
	    float: none;
	}
	li.event:nth-child(even) {
	    color: red;
	    clear: both;
	    float: none;
	}
	
	.timeline li.event:nth-child(odd)::after, li.event:nth-child(even)::before {
	    width: 0px;
	}
}
@media (max-width: 350px) {
	.timeline li.event{
		width: 98%;
		background-color: #fff;
		border: 1px solid #ff0000;
		margin: 20px auto;
		padding: 20px;
		position: relative;
	}
	
	li.event:nth-child(odd) {
	    color: green;
	    clear: both;
	    float: none;
	}
	li.event:nth-child(even) {
	    color: red;
	    clear: both;
	    float: none;
	}
	
	.timeline li.event:nth-child(odd)::after, li.event:nth-child(even)::before {
	    width: 0px;
	}
}
@media (max-width: 525px){
	.login-box, .register-box {width:95%;}
	.navbar-brand{ padding:0px 0px 0px 0px;}
}