.navbar-inverse {
    background-image: -webkit-linear-gradient(#988A7E 0%, #6B6158 100%);
    background-image: -o-linear-gradient(#988A7E 0%, #6B6158 100%);
    background-image: linear-gradient(#988A7E 0%, #6B6158 100%);
    border-color: #9FCCED;
}
.navbar-inverse .navbar-brand {
    color: #CDE4F6;
}
.navbar-brand {
    padding: 0px 15px 0px 0px;
}
.navbar-inverse .navbar-nav>li>a {
    color: #CDE4F6;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.open>a {
    border-radius: 10px;
}
@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
        color: #CDE4F6;
    }
}
span.navbar-welcome {
    color: #CDE4F6;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    overflow: hidden;
    font-size: small;
}
body {
    padding-top: 50px;
}

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

.form-input {
    background-color: #CDE4F6;
    border-radius: 10px;
    padding: 20px;
}

.form-group .alert {
    margin-bottom: 0px;
    padding: 8px;
}

input[type=checkbox] {
    transform: scale(2,2);
}

grid-checkbox {
    display: block;
    text-align: center;
}

grid-checkbox span.glyphicon-ok {
    color:lightgreen;
}
grid-checkbox span.glyphicon-remove {
    color: #FF7777;
}

span.colour-swatch {
    display:inline-block;
    width: 32px;
}

span.colour-picker-swatch {
    height: 32px;
    margin: 2px;
    cursor: pointer;
}
span.project-picker-swatch {
    height: 20px;
    margin: 2px;
    margin-right: 10px;
    border-radius: 5px;
}
span.app-project-swatch {
    height: 27px;
    margin-left: 10px;
    border-radius: 5px;
    position: absolute;
}

@keyframes colour-picker-selected {
    from { border-color: red; }
    to { border-color: lightgray; }
}
span.selected-colour {
    border: 3px solid red;
    border-radius: 3px;
    animation-name: colour-picker-selected;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
span.unavailable-colour {
    border: 3px gray solid;
    border-radius: 3px;
    text-align: center;
    padding-top: 6px;
}

.form-group .status-alert {
    font-size: 16px;
    text-align: center;
    padding: 5px;
}

table.cal {
    min-width: 320px;
    margin: auto;
}
table.cal tbody {
    text-align: center;
}
td.cal-div {
    text-align: center;
    border-right: 1px solid lightgray;
    border-bottom: 1px dashed lightgray;
}
td.cal-div span {
    width: 200px;
    display: block;
    height: 30px;
}
td.cal-div-timecol > span {
    padding-top: 5px;
    width: 100px;
}
td.cal-div-header > span {
    height: auto;
}
td.no-bottom-border {
    border-bottom: none;
}
td.cal-div-timecol {
    text-align: right;
    padding-right: 5px;
    background-image: linear-gradient(to right, lightgray 0%, white 100%);
}
td.cal-div-header {
    padding-top: 0;
    background-image: linear-gradient(lightgray 0%, white 100%);
    font-weight: bold;
}
span.cal-app {
    padding: 2px 3px;
    overflow: hidden;
}
span.cal-app .cal-app-pname {
    text-align: left;
    font-size: small;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    height: auto;
}
span.cal-app .cal-app-desc {
    font-size: x-small;
    display: block;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: auto;
}
@media (max-width: 414px) {
    td.cal-div span {
        width: 100px; 
    }
    td.cal-div-timecol > span {
        width: 80px;
        padding-right: 2px;
    }
}
@media (min-width: 415px) and (max-width: 767px) {
    td.cal-div span {
        width: 120px; 
    }
    td.cal-div-timecol > span {
        width: 90px;
        padding-right: 4px;
    }
}

modal#datePicker div.modal-body {
    text-align: center;
}

div.cal-detail-header {
    margin: 0px -10px;
    border-radius: 5px;
}
div.cal-detail-header h3 {
    padding: 8px 8px 0px 8px;
}
div.cal-detail-header span {
    padding-left: 5px;
    padding-bottom: 5px;
    display: block;
}
.modal-header .close {
    font-size: 28px;
    margin-top: -12px;
    border: 1px solid black;
    border-radius: 5px;
    background: gray;
    padding: 0px 5px;
    opacity: .3;
}
.modal-header .close:hover {
    opacity: .7;
}

modal-content.cal-detail label {
    text-align: right;
}
modal-content.cal-detail label.cal-detail-reschedule {
    text-align: left;
    font-size: larger;
    text-decoration: underline;
}
.cal-detail del {
    color: #BBBBBB;
}

div#errors > span {
    display:block;
}