/*
Color reference:
#2C3E50 - primary dark color: dark background or regular text
#ECF0F1 - primary light color: regular background or text on dark background
#2980B9 - link and active menu background color
#3498DB - hover link or hover menu background color
#E74C3C - accent color (like headers)
#d9e5ec - tr hover color (link color * 0.1)

Use "Find and Replace" to adjust the default theme.
Created by PDAC Technologies
*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	direction: rtl;
}
html, body {
	font-family: 'Varela Round', sans-serif;
	font-size: 13px;
	margin: 0;
	padding: 0;
	color: #2C3E50;
	background-color: #ECF0F1;
        border: 1px solid white;
        height: 99%;
        page-break-after: avoid;
        page-break-before: avoid;
/*	height: 100%;*/
}
.container {
	height: 100%;
}
.align-center {
	text-align: center !important;
}
nav h1 {
	color: #ECF0F1;
}
h1 {
	color: #E74C3C;
	margin: 8px 0;
}
a {
	color: #2980B9;
	text-decoration: underline;
}
a:hover {
	color: #3498DB;
	text-decoration: none;
}
.dark-bg, nav, .header {
	background: #2C3E50;
	color: #ECF0F1;
}
nav {
	height: 100%;
	width: 200px;
	position: fixed;
}
nav #logo {
	position: absolute;
	bottom: 13px;
	left: 40px;
	width: 120px;
}
nav h1 {
	line-height: 36px;
	vertical-align: middle;
	padding-right: 16px;
	margin: 0;
}
nav ul {
	list-style: none;
}
nav ul a{
	width: 155px;
}
nav ul a, nav ul a:hover {
	color: #ECF0F1;
	display: inline-block;;
	text-decoration: none;
	padding: 8px 16px;

}
.sub-menu-a{
	width: 140px;
}

.notificationCircle{
	display: inline-block;
	background-color: #e74c3c;
	padding: 2px 6px;
	border-radius: 5px;
}
.subMenuCircle{
	border-radius: 25px;
}

nav ul li.active {
	border-left: 4px #E74C3C solid;
	background: #2980B9;
}
nav ul li {
	transition: all 0.2s;
	display: block;
}
nav ul > li:not(.sub-menu):hover {
	background-color: #3498DB;
}
li.menu-container > ul > li,
li.menu-container-tasks > ul > li {
	padding-right: 16px;
}
.menu-container,.menu-container-tasks {
	font-size: 90%;
	display: none;
}
.header {
	width: 100%;
	height: 36px;
	position: fixed;
	text-align: left;
	line-height: 36px;
	vertical-align: middle;
	padding-left: 16px;
	box-shadow: 0 0 5px 1px #2C3E50;
}
.header a {
	color: #ECF0F1;
	margin-right: 8px;
}
.header img {
	vertical-align: middle;
}
.content {
	margin-right: 200px;
	padding: 36px 0 4px 0;
	background: #d9e5ec;
}
.light-bg {
	background: #ECF0F1;
}
.content p {
	margin: 8px 0;
}
.controls {
	padding: 0 16px;
}
.controls h1 {
	display: inline-block;
}
.controls a {
	float: left;
	display: inline-block;
	margin-top: 8px;
	padding: 4px 8px;
	margin-right: 4px;
}
.loginContainer {
	height: 100%;
	width: 100%;
	background: #ECF0F1;
	display: table;
	position: absolute;
}
.loginContainer .formWrapper {
	display: table-cell;
	vertical-align: middle;
}
.loginContainer form {
	margin: 0 auto;
	padding: 16px 24px;
	display: block;
	width: 300px;
	border-radius: 3px;
	box-shadow: 0 0 3px 0 #3498DB;
}
.loginContainer form label, .loginContainer form input {
	display: block;
	width: 100%;
	color: #2980B9;
}
.loginContainer form input {
	background: #ECF0F1;
	border: 1px #3498DB solid;
	border-radius: 2px;
	padding: 8px;
	margin-bottom: 16px;
}
.loginContainer form input[type=submit] {
	background: #2980B9;
	color: #ECF0F1;
}
.loginContainer form input[name=username] {
	background: url('../img/login_username.png') no-repeat scroll 226px 7px;
	padding-right: 30px;
}
.loginContainer form input[name=password] {
	background: url('../img/login_password.png') no-repeat scroll 226px 7px;
	padding-right: 30px;
}
textarea:focus, input:focus, select:focus{
	outline: none;
}
.loginContainer form .errorMessage {
	text-align: center;
	display: block;
	color: red;
}
h1 {
	font-size: 150%;
}
table.data {
	clear: both;
	border-bottom: 1px #2980B9 solid;
	border-top: 1px #2980B9 solid;
	width: calc(100% - 32px);
	border-collapse: collapse;
	margin: 0 auto;
	background: #ECF0F1;
}
table.data tr:not(.top):hover {
	background: #d9e5ec;
}
table.data th, table.data td {
	vertical-align: middle;
	text-align: right;
}
table.data tr td.date_td_{
    
}
table.data td span.span_comments{
    font-size: 0.8em;
}
.valign-top {
	vertical-align: top;
}
.summary {
	display: table;
	table-layout: fixed;
	border-collapse: separate;
	width: 100%;
	background: #d9e5ec;
	border-spacing: 16px;
}
.summary > div {
	display: table-cell;
	background: #ECF0F1;
	box-shadow: 0px 0px 2px 0px #2980B9;
}
.summary > div:not(:first-child) {
	padding-right: 4px;
}
.summary > div > div {
	padding: 4px 8px;
}
.summary > div > div:first-child {
	font-size: 120%;
	font-weight: bold;
	color: #E74C3C;
	min-height: 40px;
}
.summary > div > div:first-child span{
	float: left;
	color: #8c8c8c;
	font-weight: 200;
	font-size: 15px;
}

.summaryActions {
	margin-top: 4px;
	float: left;
	font-weight: normal;
}
.summary label {
	display: block;
	width: 100%;
}
.summary label:not(:first-child) {
	margin-top: 8px;
}
.summary th {
	text-align: start;
	color: #aaa;
	font-weight: 100;
	font-size: 12px;
}

.summary td {
	padding-left: 60px;
}

span.spacing {
	display: block;
	margin-top: 15px;
	margin-bottom: 30px;
	border-top: #2980B9 1px solid;
}
.messageHolder{
	width: 100%;
	margin-right: 20px;
}

.messages {
	margin-right: 200px;
	width: 540px;
}

.message {
	padding: 15px;
	width: 100%;
	border-bottom: 1px #9E9E9E solid;
	border-radius: 5px;
	box-shadow: 0px 0px 2px 0px #2980B9;
	margin: 7px 0;
}
.message img{
	float: right;
	border-radius: 50px;
	margin-left: 15px;

}

.message h3{
	display: inline-block;
}

.message p{
	white-space: pre-line;
}

.message .messageDate{
	float: left;
}
.comment{
	padding: 40px 0;
}
.commentForm {
	margin: 0 15px;
	width: 100%;
}

.comment img{
	border-radius: 50px;
	float: right;
}


.commentForm textarea {
	display: block;
	width: 480px;
	float: left;
}

.commentForm input[type=submit]{
	float: left;
	margin-top: 6px;
}

table.data th {
	padding: 8px;
}
table.data td {
	padding: 16px 5px;
}
table.data tr.top, table.data tr.search {
	border-bottom: 1px #2980B9 solid;
}
table.data tr.search {
	background: #d9e5ec;
}
.search * {
	font-size: 90%;
}
table.data th a {
	text-decoration: none;
	font-size: 110%;
}
a.active, span.active {
	color: #E74C3C;
}
td.active {
	background: rgba(231,76,60, .2);
}
.small {
	font-size: 85%;
}
.strong {
	font-weight: bold;
}
.highlight {
	background: #d9e5ec;
}
.big *, a.big {
	font-size: 120%;
}

.dailyReport .reportContent {
	background-color: #c4d7e2;
	display: block;
	padding: 10px;
	width: 750px;
}
.dailyReport .reportContent:last-child {
	border-bottom: 1px #ccc solid;
}
table.dailyReport {
	border: 0;
	border-collapse: collapse;
	margin: 0 auto;
}
table.dailyReport .user-content {
	padding: 10px;
	width: 100%;
	border-collapse: collapse;
}
table.dailyReport tbody {
	direction: initial;
}
.dailyReport tr .projects {
	background-color: #d9e5ec;
	white-space: pre;
	vertical-align: text-top;
	border-bottom: #d9e5ec 1px solid;
}
table.dailyReport .user-content th {
	color: #E74C3C;
	padding-bottom: 10px;
}
table.dailyReport .user-content th,
table .user-content td {
	text-align: right;
}
.dailyReport .user-content td {
	padding: 6px 0px;
}
.dailyReport td.projectName {
	padding: 5px 20px 5px 5px;
}

table.data th input, table.data th select {
	display: block;
	width: 100%;
}
table.data th {
	white-space: nowrap;
}
table.data p {
	margin-top: 0px;
	margin-bottom: 4px;
}
.pagination {
	margin: 8px 16px;
	color: #2980B9;
}
.pagination .back {
	float: right;
}
.pagination .forward {
	float: left;
}
.pagination .current {
	text-align: center;
	width: 400px;
	margin: 0 auto;
}
.clear {
	margin: 0;
	padding: 0;
	height: 0;
	clear: both;
}
input:not([type=checkbox]), select, textarea {
	padding: 4px 8px;
	width: 200px;
	color: #2980B9;
	border: 1px #3498DB solid;
	background: #ECF0F1;
}
select {
	padding: 3px 7px;
}
table.data input, table.data select {
	margin-bottom: 0;
}
.marginBottom {
	margin-bottom: 8px !important;
}
.paddingBottom {
	padding-bottom: 16px !important;
}
.content form label,
.popupContainer form label {
	display: inline-block;
	width: 120px;
	float: right;
}
.content input[type=submit],
.popupContainer input[type=submit], input[type=button] {
	color: #ECF0F1;
	background: #3498DB;
	font-weight: bold;
	padding-top: 8px;
	padding-bottom: 8px;
}
.errors {
	margin-bottom: 16px;
	list-style: none;
	color: #E74C3C;
	font-weight: bold;
}
table.data .shrink {
	white-space: nowrap;
	width: 1px;
	padding-right: 4px;
	text-align: left;
}
/*table.data .shrink-non-padding  {
    padding-left: 0;
    padding-right: 0;
}*/
table.data .shrink img {
	margin: 0px 2px;
}
.buttonLink {
	color: #2980B9;
	border: #2980B9 1px solid;
	padding: 4px 8px;
	text-decoration: none;
	display: inline-block;
	text-align: center;
}
.buttonLink:hover {
	color: #d9e5ec;
	background: #2980B9;
}
table.data .small {
	width: 75px;
}
table.data .medium, .medium {
	width: 150px;
}
.popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../img/popupBg.png') repeat;
}
.popupContent {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.popupContent iframe {
	background: #ECF0F1;
	width: 800px;
	height: 600px;
	border: #2980B9 1px solid;
	border-radius: 4px;
}
.popupContent .frameWrapper {
	position: relative;
	display: inline-block;
}
.popupContent .frameWrapper img {
	position: absolute;
	top: 8px;
	left: 8px;
	cursor: pointer;
}
.popupContainer {
	padding: 8px;
}
textarea {
	font-family: inherit;
	font-size: inherit;
}
table.summary {
	width: 100%;
	text-align: right;
}
table.summary th, table.summary td {
	background: #d9e5ec;
}
.summary label {
	font-weight: bold;
}
.summary .inline-card {
	border-radius: 5px;
	display: inline-block;
	margin: 0 0 8px 8px;
	box-shadow: 0px 0px 2px 0px #2980B9;
	padding: 16px 16px 16px 24px;
	max-width: 200px;
	vertical-align: top;
}
.summary .inline-card.phantom {

	max-width: 184px;

}
.bottom-panel {
	display: table;
	table-layout: fixed;
	border-collapse: collapse;
	border-top: #d9e5ec 1px solid;
	margin: 4px -16px -16px -24px;
	background: #d9e5ec;
	width: calc(100% + 40px);
	padding: 0;
}
.bottom-panel > div {
	display: table-cell;
	padding: 4px;
	text-align: center;
}
.bottom-panel .align-left {
	text-align: left;
	padding-right: 8px;
}
.bottom-panel .align-right {
	text-align: right;
	padding-left: 8px;
}
#chatTask {
	display: none;
}
.summary th img {
	vertical-align: middle;
	height: 16px;
}
.status {
	display: inline-block;
	padding: 4px 4px;
	border-radius: 4px;
	color: white;
	text-align: center;
	font-size: 90%;
	min-width: 80px;
}
table.data input.date {
	display: inline-block;
	width: 75px;
}
.dateTh {
	width: 170px;
}
.newItem td {
	text-align: right;
}
.newItem th {
	text-align: right;
	width: 100px;
}
.newItem input:not([type=checkbox]), .newItem select, .newItem textarea {
	width: 100%;
}
.newItem {
	width: 700px;
	background: #d9e5ec;
	border: 1px solid #3498DB;
	padding: 8px;
	border-radius: 2px;
}
.popupContainer .newItem {
	width: 100%;
}
.content .newItem {
	text-align: center;
	margin-right: 16px;
}
.newItem table {
	border-spacing: 8px;
}
.newItem input[name=email], .newItem input[name=phone], .email, .phone, .ltr, .cell-ltr {
	direction: ltr;
}
.delimiter {
	border-top: #2980B9 1px solid;
}
.subtitle {
	color: #E74C3C;
}
.email, .phone, .ltr {
	display: inline-block;
}
pre {
	font: inherit;
	white-space: pre-wrap;
}
input[type=submit], input[type=button] {
	cursor: pointer;
}
.header select {
	font-size: 90%;
	background: #2C3E50;
	color: #ECF0F1;
	width: 100px;
	border: #ECF0F1 1px solid;
}
.clockBtn {
	display: block;
	font-size: 250%;
	height: 100px;
	line-height: 100px;
	vertical-align: middle;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	border-width: 2px;
	border-style: solid;
	transition: all .1s;
	margin: 0 4px;
}
.clockBtn:hover {
	border-color: #3498DB;
}
.not-active {
	pointer-events: none;
	cursor: default;
	opacity: 0.5;
}
.clockWrapper {
	display: inline-block;
	margin: 16px auto;
}
.clockWrapper > div {
	float: right;
	width: 50%;
	margin-bottom: 8px;
}
.clockWrapper td {
	padding: 0 32px;
	color: #2C3E50;
}
.clockWrapper h1 {
	font-size: 1000%;
	text-align: center;
}
.clockWrapper h2 {
	font-size: 300%;
	text-align: center;
}
.clockMonthlyReport, .userReport {
	width: 750px;
	margin: 8px auto;
	border: #2980B9 1px solid;
	border-collapse: collapse;
}
.userReportWrapper {
	padding: 0 16px;
}
.userReport {
	margin: 0 0 8px 8px;
	width: 400px;
	float: right;
}
.clockMonthlyReport td, .clockMonthlyReport th, .userReport td, .userReport th {
	border: #2980B9 1px solid;
	padding: 2px;
}
.clockMonthlyReport .reportBody tr.weekend, .clockMonthlyReport th, .userReport th {
	background: #d9e5ec;
}
.clockMonthlyReport a, .userReport a {
	text-decoration: none;
}
nav ul li.menuHeader {
	display: none;
	font-size: 120%;
}
.user-summary-project {
	display: inline-block;
	background: #d9e5ec;
	padding: 4px 8px;
}
tr:hover .user-summary-project {
	background: #ECF0F1;
}
.inactive {
	opacity: 0.5;
}
.hidden {
	display: none !important;
}
.slider {
	width: 200px;
	margin-right: 42px;
}
.hourHandle {
	text-align: center;
	width: 42px !important;
}
.only-print {
    display: none;
}
.yesorno{
	text-align:center;
	margin-top:10px;
}
.yesorno input.btn{
	display: inline-block;
    margin: 2px;
    width: fit-content;
}

@media print {
    
     html, body {
        border: 1px solid white;
        height: 99%;
        page-break-after: avoid;
        page-break-before: always;
     }
    
    * {
      font-size: 14px;  
       margin: 0;
       padding: 0;
    }
    /* TEST */
    
    .email, .phone, .ltr {
/*        display: table;*/
    }
    div.row > div {
      display: inline-block;  
/*      border: solid 1px #ccc;*/
      height: 50px;
      margin: 2px;
      white-space: normal;
    }
   
    div.row.top > div {
      display: inline-block;  
      border: solid 1px #ccc;
      padding: 5px;
/*      margin: 0.2cm;*/
    }
    
    div.row {
      display: block;
    }
    
    .big {
        font-weight: 200;
        margin-top: 7px;
    }
    
    div.status {
        width: 80px;
    }
    
    div.clientTh {
        width: 150px;
    }
    
    div.contact {
        width: 100px;
    }
    
    div.dateTh {
        width: 85px;
    }
    
    span.countTask {
        display: block;
    }
    
    /* END TEST */
	.no-print, .no-print * {
		display: none !important;
                visibility: hidden !important;
	}

	.content {
		margin-right: 0 !important;                
	}
	
	select{
		border: 0; background: none;
		-webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: '';
	}
        
        .only-print {
            display: block !important;
            visibility: visible !important;
        }

}
@media (max-width: 768px) {
	nav {
		width: 100%;
		height: auto;
		position: relative;
	}
	nav #logo {
		display: none;
	}
	nav h1 {
		text-align: center;
	}
	.header {
		display: none;
	}
	.content {
		margin: 0;
		padding: 8px;
	}
	table.data {
		width: 100%;
	}
	table.data, table.data tbody, table.data th, table.data td, table.data tr {
		display: block !important;
	}
	table.data tr {
		border-bottom: 1px #2980B9 solid;
	}
	table.data td {
		border-bottom: 1px solid #eee;
		position: relative;
		padding: 8px 4px;
		padding-right: 40% !important;
		min-height: 32px;
	}
	table.data td:before {
		position: absolute;
		padding: 8px 4px;
		top: 0;
		right: 0;
		width: 35%;
		padding-left: 10px;
		white-space: nowrap;
		content: attr(data-attr);
		font-weight: bold;
	}
	table.data .shrink {
		width: auto;
	}
	table.data tr.top, table.data tr.search {
		display: none !important;
	}
	.controls {
		padding: 0;
	}
	.controls a, .controls h1, .buttonLink {
		display: block;
		text-align: center;
		margin: 4px 0;
		float: none;
	}
	.popupContainer .controls h1 {
		margin-left: 4px;
		text-align: right;
	}
	.pagination .current {
		width: 40%;
	}
	nav ul li:not(.menuHeader) {
		display: none;
	}
	nav ul li.menuHeader {
		display: inherit;
	}
	.popupContent iframe {
		width: 100%;
	}
	.content .newItem {
		width: 100%;
		margin-right: 0;
	}
	.newItem table, .newItem tbody, .newItem tr, .newItem td, .newItem th {
		display: block;
		width: 100%;
	}
	.newItem td, .newItem th {
		padding: 2px;
	}
	.newItem tr {
		margin-bottom: 8px;
	}
	.summary {
		display: block;
		padding: 8px 0;
	}
	.summary > div {
		display: block;
		margin-bottom: 8px;
	}
	.summary > div:not(:first-child) {
		padding-right: 0;
	}
	.clockWrapper h1 {
		font-size: 500%;
	}
	.clockWrapper h2 {
		font-size: 200%;
	}
	.clockBtn {
		font-size: 150%;
		height: 75px;
		line-height: 75px;
	}
	.clockWrapper {
		margin: 0;
	}
	.summaryActions {
		float: none;
	}
	.summary .inline-card {
		display: block;
		margin-left: 0px;
		box-shadow: none;
		padding: 4px 0;
		border-bottom: #d9e5ec 1px solid;
		max-width: none;
	}
	.bottom-panel {
		width: 100%;
		border: none;
		margin: 0;
		margin-bottom: -4px;
		margin-top: 4px;
	}
	.user-summary-project {
		margin-bottom: 2px;
	}
	.popupContainer .controls {
		margin-left: 24px;
	}
	.userReport {
		float: none;
		width: 100%;
	}
	.popupContent iframe {
		height: 450px;
	}
	.slider {
		width: calc(100% - 34px);
		margin-right: 34px;
		margin-top: 8px;
	}
}

@media only screen and (max-width: 1400px) {
    .content {
        width: 1245px;
    }

}

#list5 { color:black;  }
#list5 ul { font-size:18px; }
#list5 ul li { }
#list5 ul li ul { list-style-image: url("../images/nested.png"); padding:5px 0 5px 18px; font-size:15px; }
#list5 ul li ul li { color:black; height:15px; margin-left:10px; }