@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900&subset=latin-ext');

@media print 
    {
        .noPrint {display:none !important;}
        .adminBtn{display:none !important;}
    }

html, body, form {height: 100%;width: 100%;padding: 0;margin: 0}
body{font-family: 'Roboto', sans-serif;font-size:15px; color:#555;}

/* common begin */

.link{cursor:pointer}
.fl {float:left}
.fr {float:right}
.oh {overflow:hidden}
.db {display:block}
.dib {display:inline-block}
.dt {display:table}
.dtr {display:table-row}
.dtc {display:table-cell}
.vat {vertical-align:top}
.w100{width:100%}
.sp30{height:30px}
.center{margin:0px auto;}
.pr {position:relative;}
.opacity3 {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter: alpha(opacity=30);-moz-opacity: 0.3;-khtml-opacity: 0.3;opacity: 0.3;}
.tar {text-align:right;}
.tac {text-align:center;}

a, a:active{color:#004990;text-decoration:none;outline:0;}
a:hover {color:#555;text-decoration:none;outline:0;}
h1, h2{font-weight:700;padding:0;}
h1{font-size:30px;margin:0px 0px 30px 0px;}
h2{font-size:22px;margin:0px 0px 20px 0px;}
strong, b{font-weight:700}

/* common end */

/* transition */

a, .kv a, .sign-up a, input, button, select, .login .oh .fl, .login .oh .fl i, .ProjectList .phase > div:hover > div, .ProjectList table tr td, .ProjectNotes > div, .ProjectAdditionalHours table tr {
    -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}



/* header begin */

header {background-color:#004990;}
header > .container{height:inherit;}
header .logo a {color:#fff;font-size:18px; font-weight:900;letter-spacing:0.06em;}
header .logo a:hover {color:#eee;}
header .row {margin-top:24px;margin-bottom:24px;}
header .row .col-md-8 {padding-top:5px;}
header .col-md-8 > a {color:#fff;}

.pull-right > .dropdown-menu {right:15px;}

/* header end */


/* form begin */

input, textarea, select {max-width:100%;outline:0;}
a.btn i, input.btn i {margin-right:5px;}

/* form end */

/* login begin */


.login {width:300px;}
.login > div:first-child {margin-bottom:5px;}
.login .btn {width:100%;}


/* login end */

/* projects begin */

.ProjectList table {border-collapse:collapse;width:100%;}
.ProjectList table th {background-color:#004990;}
.ProjectList table th, .ProjectList table th a {color:#fff;}
.ProjectList table th, .ProjectList table td {border:1px solid #ddd;padding:5px 10px;}
.ProjectList table th i.faSort {float:right;margin-top:3px;}
.ProjectList table th i:not(.faSort){font-size:18px;vertical-align:middle;}
.ProjectList table tr:nth-child(odd) td {background-color:#f6f6f6;}
.ProjectList table tr:hover td {background-color:#ddd;border-color:#fff;}
.ProjectList table th.th-hours {width:70px;text-align:center;}
.ProjectList table tr > td:first-child i {margin-top:3px;}
.ProjectList table tr > td:last-child {color:#aaa;}
.ProjectList table tr > td:last-child a {color:#000;}
.ProjectList table tr > td:last-child a:hover {color:#004990;}
.ProjectList table tr > td:last-child span.fa-stack {width:1.28571em;}
.ProjectList table tr > td:last-child span.noteCnt {color:#fff;right:-1px;top:-1px;position:absolute;text-align:center;display:inline-block;background-color:#ff0000;font-size:9px;line-height:normal;border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;height:12px;width:12px;}
.ProjectList table tr.deleted td {background-color:rgba(255,0,0,0.2);}
.ProjectList table tr.finished td {background-color:rgba(0,255,0,0.2);}
.ProjectList table tr.deleted:hover td {background-color:rgba(255,0,0,0.3);}
.ProjectList table tr.finished:hover td {background-color:rgba(0,255,0,0.3);}
.ProjectList .phase > div {display:inline-block;width:100px;border:1px solid #ddd;background-color:#fff;}
.ProjectList .phase > div:not(:first-child){border-left:none;}
.ProjectList .phase > div > div i {font-size:12px;vertical-align:top; margin-top:4px;margin-left:6px;}
.ProjectList .phase > div.phase-progress-0 > div {width:100%;background-color:#fff;}
.ProjectList .phase > div.phase-progress-1 > div {width:50px;background-color:#fbcf61;}
.ProjectList .phase > div.phase-progress-2 > div {width:100%;background-color:#0ead9a;}
.ProjectList .phase > div.phase-progress-2 > div i {color:#fff;}
.ProjectList .phase > div:hover > div { filter: alpha(opacity=70);-moz-opacity: 0.7;-khtml-opacity: 0.7;opacity: 0.7;}
.ProjectList .hours > div {position:relative;}
.ProjectList .hours > div > span.max:before {content:'/';}
.ProjectList .hours > div > span.max, .ProjectList .hours > div > span.max:before {color:#555;}
.ProjectList .hours > div > span.progressLine {display:block;position:absolute;height:2px;left:-10px;bottom:-6px;}
.ProjectList .notes {display:none;}

.ProjectForm .hours .input-group-addon, .ProjectForm .additionalHours .input-group-addon {width:140px;text-align:left;}
.ProjectForm .hours input {text-align:right;}
.ProjectForm .leader button, .ProjectForm .additionalHours button {width:100%;text-align:left;}
.ProjectForm .leader button .caret, .ProjectForm .additionalHours button .caret {position: absolute; right:15px; top: 45%;}
.ProjectForm .leader ul, .ProjectForm .additionalHours ul {width:100%;}
.ProjectForm .additionalHours .chk {padding-top:6px;}
.ProjectForm .additionalHours .chk label {font-weight:400;}
.ProjectForm .phase > .row {margin-top:10px;}
.ProjectForm h3 {margin-top:40px;margin-bottom:20px;}
.ProjectForm button.active[data-phase="1"]{background-color:#fbcf61;}
.ProjectForm button.active[data-phase="2"]{background-color:#0ead9a;color:#fff;}
.ProjectForm .detailLine {font-size:12px;margin-top:10px;font-weight:400;}
.ProjectForm .fa-calculator {position:absolute; top:9px; right:-4px; cursor:pointer;}


.ProjectNotes {margin-left:-20px;margin-right:-20px;}
.ProjectNotes > div {border-top:1px solid #ccc;padding:20px 20px;}
.ProjectNotes > div:first-child {border:none;}
.ProjectNotes .col-md-8 {font-weight:700;}
.ProjectNotes .col-md-8 span {color:#aaa;font-size:12px;font-weight:400;}
.ProjectNotes > div > div:last-child {padding-top:10px;}
.ProjectNotes a, .ProjectAdditionalHours a {color:#000;}
.ProjectNotes a:hover, .ProjectAdditionalHours a:hover {color:#004990;}
.ProjectNotes .noteEditing, .ProjectAdditionalHours .hoursEditing {background-color:rgba(251,207,97,0.3);}


.modal-body .ProjectNotes {font-size:14px;margin:0;}
.modal-body .ProjectNotes .col-md-8 span {font-size:12px;}
.modal-body .ProjectNotes a {display:none;}

.ProjectHours table > thead > tr > th:first-child {width:120px;}
.ProjectHours table > thead > tr > th:nth-child(2) {width:100px;}
.ProjectHours table > thead > tr > th.added {width:180px;}
.ProjectHours table > thead > tr > th:last-child {width:90px;}
.ProjectHours table tr > td:last-child a {color:#000;}

.ProjectAdditionalHours table > thead > tr > th:first-child {width:140px;}
.ProjectAdditionalHours table > thead > tr > th:nth-child(2) {width:100px;}
.ProjectAdditionalHours table > thead > tr > th:nth-child(3) {width:180px;}
.ProjectAdditionalHours table > thead > tr > th:nth-child(4) {width:150px;}
.ProjectAdditionalHours table > thead > tr > th:nth-child(5) {width:150px;}
.ProjectAdditionalHours table > thead > tr > th:last-child {width:90px;}

.ProjectHoursForm .dropdown button {width:100%;text-align:left;}
.ProjectHoursForm .dropdown button .caret {position: absolute; right:15px; top: 45%;}
.ProjectHoursForm .dropdown ul {width:100%;}
.ProjectForm textarea, .ProjectHoursForm textarea {max-width:100%; min-width:100%;height:200px;min-height:200px;max-height:200px; resize:none;}
 .modal .ProjectHoursForm textarea {height:100px;min-height:100px;max-height:100px;}

.ui-datepicker {z-index:3 !important;}
.modal-header h4, .modal-body {text-align:left;}
.modal-header h4 {color:#000;}
.modal-body {color:#555;max-height:400px;overflow:auto;width:100%;}
#btnCancelNotes {display:none;margin-left:10px;}

.ui-datepicker {z-index: 10000 !important; } 

/* projects end */

a.flag-green i, i.flag-green, .green {color:green;}
a.flag-red i, i.flag-red, .red {color:red;}
i.flag-gold {color:#fbcf61;}

/* tipsy begin */

.tipsy { font-size: 11px; position: absolute; padding: 5px; z-index: 100000; }
.tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }

/* Rounded corners */
.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
  
/* Uncomment for shadow */
/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
  
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
  
/* Rules to colour arrows */
.tipsy-arrow-n { border-bottom-color: #000; }
.tipsy-arrow-s { border-top-color: #000; }
.tipsy-arrow-e { border-left-color: #000; }
.tipsy-arrow-w { border-right-color: #000; }
  
.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }

/* tipsy end */