@charset "utf-8";

/* Hide extra info on small screens */

@media screen and (min-width: 0px) and (max-width: 425px) {
    .hide-small {
        display: none;
    }
}

/* Head to Head */

.h2h h4 {
    margin-bottom: 5px;
}

/* Prediction Summary */
.prediction-summary {
    padding: 20px;
    text-align: center;
}

.prediction-summary div {
    border-bottom: 3px solid #DDD;
    text-align: center;
}

.prediction-summary p {
    font-size: 16px;
    margin: 10px;
    text-align: center;
}

.prediction-summary.correct div {
    border-bottom: 3px solid #379E45;
}

.prediction-summary.incorrect div {
    border-bottom: 3px solid #ED5565;
}

.prediction-summary img {
    max-width: 128px;
}

/* Team Admin */
.team-admin-panel {
    height: 94px;
    position: relative;
}

.team-admin-panel:hover {
    background-color: #DDD;
}

.team-admin-panel .team-admin-badge {
    height: 64px;
    left: 15px;
    left: 15px;
    position: absolute;
    position: absolute;
    top: 15px;
    width: 64px;
}

.team-admin-panel .team-admin-full-name {
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    font-weight: 300;
    left: 94px;
    position: absolute;
    top: 25px;
}

.team-admin-panel.favourite .team-admin-full-name {
    font-weight: 700;
}

.team-admin-panel .team-admin-short-name {
    font-size: 14px;
    left: 94px;
    position: absolute;
    top: 48px
}

.team-admin-panel.favourite .team-admin-short-name {
    font-weight: 700;
}

/* Print Icon */

.print-icon,
.save-icon {
    background-color: #406E7E;
    border-radius: 20px;
    color: #FFF;
    float: right;
    height: 40px;
    margin-right: 10px;
    position: relative;
    width: 40px;
}

.print-icon:hover,
.save-icon:hover,
.print-icon:hover i,
.save-icon:hover i {
    background-color: #345A67;
    color: #FFF;
}

.print-icon i {
    font-size: 2em;
    left: 10px;
    position: absolute;
    top: 6px;
}

.save-icon i {
    font-size: 1.5em;
    left: 11px;
    position: absolute;
    top: 7px;
}

.whatsapp-button {
    align-items: center;
    background-color: #25D366 !important;
    border-color: #25D366 !important;
    display: flex;
    justify-content: center;
    margin: 0 auto 20px auto;
    width: fit-content;
}

.whatsapp-button i {
    font-size: 1.5em;
    margin-right: 10px;
}

/* Player picker */

.player-picker .player {
    padding: 10px;
    text-align: center;
}

.player-picker .player:hover {
    background-color: #EEE;
}

/* Fixture Picker */

.fixture-picker {
    background-color: #406E7E;
    border-radius: 20px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    height: 40px;
    line-height: 40px;
    margin: auto;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    width: 260px;
}

.fixture-picker .left {
    color: #FFF;
    font-size: 2.7em;
    left: 10px;
    position: absolute;
    top: 4px;
}

.fixture-picker .right {
    color: #FFF;
    font-size: 2.7em;
    position: absolute;
    right: 10px;
    top: 4px;
}

.fixture-picker .title {
    color: #FFF;
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    margin: auto;
    text-align: center;
}

input.form-control.score {
    padding-left: 4px;
    padding-right: 4px;
}

/* Name Panel */

.name-panel {

    background-color: #406E7E;
    border-radius: 30px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    color: #FFF;
    height: 60px;
    line-height: 60px;
    margin: auto;
    margin-bottom: 30px;
    overflow: hidden;
    padding: 0 40px;
    position: relative;
    text-align: center;
    width: fit-content;
}

.name-panel .name {
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    overflow: hidden;
}

/* Prize Panel */

.prize-panel {
    background-color: #639754;
    border-radius: 20px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    color: #FFF;
    display: inline-block;
    font-family: 'Roboto Slab', serif;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    margin: 0 20px 30px 20px;
    overflow: hidden;
    padding: 0px 30px;
    position: relative;
    width: fit-content;
}

/* Failure Panel */

.failure-panel {
    background-color: #B31312;
    border-radius: 30px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    color: #FFF;
    height: 60px;
    line-height: 60px;
    margin: 0 20px 30px 20px;
    overflow: hidden;
    position: relative;
}

.failure-panel i {
    font-size: 3.2em;
    margin-left: 24px;
    margin-top: 10px;
}

.failure-panel .name {
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    font-weight: bold;
    left: 80px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    width: 50%;
}

/* Champion Panel */

.champion-panel {

    background-color: #FBD82C;
    border-radius: 30px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    color: #406E7E;
    height: 60px;
    line-height: 60px;
    margin: 0 20px 30px 20px;
    overflow: hidden;
    position: relative;
}

.champion-panel i {
    font-size: 3.2em;
    margin-left: 24px;
    margin-top: 10px;
}

.champion-panel .name {
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    font-weight: bold;
    left: 80px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    width: 50%;
}

.champion-panel .pts {
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
    position: absolute;
    right: 30px;
    top: 0px;
}

.trophy-badge {
    background-color: #406E7E;
    border-radius: 50%;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    color: #FBD82C;
    display: inline-block;
    margin: 0px 5px 10px 5px;
    padding: 10px;
    width: 57px;
}

.trophy-badge i {
    font-size: 3em;
}

/* Bootstrap Media */
.media-left {
    padding-right: 20px;
    vertical-align: middle;
}

/* Font Awesome */
.fa-stack {
    margin-bottom: 4px;
}

.fa-stack .icon {
    color: #5C828F;
}

.fa-stack .label {
    color: #FFF;
    margin-top: 3px;
}

.ui-state-active .fa-stack .label, .ui-state-hover .fa-stack .label {
    color: #5C828F;
}

.ui-state-active .fa-stack .icon, .ui-state-hover .fa-stack .icon {
    color: #FFF;
}

.fa-stack-15x {
    font-size: 1.5em;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

.worker-icon {
    padding: 0px 3px;
    text-align: center;
}

/* Notifications */
.notification-wrapper {
    display: inline-block;
    position: relative;
}

.notification-icon {
    font-size: 1.8em;
    margin-right: 20px;
}

a.count-info span.label {
    border-radius: 8px;
    position: absolute;
    right: 12px;
    top: -2px;
}

a.count-info:hover span.label {
    color: #FFF;
    text-decoration: none;
}

/* Modals */
.modal.admin .modal-content {
    border: none;
    border-radius: 0px;
}

.modal.admin .modal-header {
    background-color: #406E7E;
    border: none;
    color: #FFF;
    padding: 20px;
}

.modal.admin .modal-header button {
    color: #FFF;
    margin-top: 0px;
    opacity: inherit;
    text-shadow: none;
    transition: all .3s ease-in-out;
}

.modal.admin .modal-header * {
    transition: unset;
}

.modal.admin .modal-header button:hover {
    color: #A7DCEB;
}

.modal.admin .modal-body {
    padding: 20px;
}

.modal.admin .modal-body.contact-us-form {
    padding-bottom: 0px;
}

/* Big Sport Icons */

.big-sport-icon {
    margin-bottom: 50px;
    text-align: center;
}

.big-sport-icon .icon-panel {
    background-color: #FFF;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    height: 190px;
    margin: auto;
    max-width: 200px;
    padding: 30px 15px;
}

.big-sport-icon .icon-panel:hover {
    background-color: #E8E8E8;
}

.big-sport-icon .icon-panel .icon {
    margin-bottom: 10px;
    width: 84px;
}

.big-sport-icon .icon-panel .title {
    color: #888;
    font-family: 'Roboto Slab', serif;
    font-size: 28px;
    font-weight: 300;
    line-height: 25px;
    margin-bottom: 0;
}

/* Spinner */
.loading-modal {
    z-index: 99999;
}

.vertical-alignment-helper {
    display: table;
    height: 100%;
    pointer-events: none;
    width: 100%;
    /* This makes sure that we can still click outside of the modal to close it */
}

.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    pointer-events: none;
    vertical-align: middle;
}

.loading-spinner, .loading-spinner * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.loading-spinner {
    display: inline-block;
    height: 64px;
    margin-top: 28px;
    position: relative;
    width: 64px;
}

.loading-spinner div {
    animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border: 6px solid #5C828F;
    border-color: #5C828F transparent transparent transparent;
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    height: 51px;
    margin: 6px;
    position: absolute;
    width: 51px;
}

.loading-spinner div:nth-child(1) {
    animation-delay: -0.45s;
}

.loading-spinner div:nth-child(2) {
    animation-delay: -0.3s;
}

.loading-spinner div:nth-child(3) {
    animation-delay: -0.15s;
}

.modal-spinner {
    border-radius: 50%;
    height: 120px;
    margin: auto;
    width: 120px;
}

@keyframes loading-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Confirm Dialog */

/* Fonts */
BLOCKQUOTE {
    border-left: 5px solid #5C828F;
    margin-top: 30px;
}

body, body * {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

span.ui-inputnumber input {
    width: 100%;
}

.bold {
    font-weight: 700;
}

h1, h2, h3, h4, h5 {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
}

/* General */

.form-control input {
    background-color: #FFF;
    background-image: none;
    border: 1px solid #CCC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857143;
    padding: 6px 12px;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    width: 100%;
}

.well {
    background-color: #F1F1F1;
    border: 1px solid #F1F1F1;
    box-shadow: none;
}

.well-green {
    background-color: #406E7E;
    color: #FFF;
}

b {
    font-weight: 700;
}

.box-shadow {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

img.shadow {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.form-horizontal .control-label {
    padding-top: 9px;
}

.form-horizontal .checkbox {
    padding-top: 4px;
}

.container {
    padding: 30px 0;
}

.page-heading-test {
    background-color: #ED5565;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    color: #FFF;
    margin-bottom: 10px;
}

.page-heading {
    background-color: #A7DCEB;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    color: #5C828F;
    margin-bottom: 10px;
}

.page-heading-container {
    padding: 15px;
}

.page-heading .page-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 7px;
}

.page-heading .page-description {
    font-size: 13px;
    margin-bottom: 0px;
}

label, input, input.form-control, textarea.form-control {
    background-clip: padding-box !important;
    color: #888;
    line-height: normal !important;
}

input.ui-state-disabled {
    border-color: #CCC;
    color: #888;
    opacity: inherit;
}

.ui-inputnumber input.ui-state-disabled:hover, input.ui-state-disabled:hover {
    border-color: #CCC;
}

input::placeholder, textarea::placeholder {
    color: #B9B9B9 !important;
}

.form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.italic {
    font-style: italic;
}

a:focus {
    outline: none;
    text-decoration: none;
}

.no-padding {
    padding: 0px !important;
}

.gm-style * {
    transition: unset;
}

a.no-underline {
    text-decoration: none;
}

.white-background {
    background-color: #FFF;
}

.ui-state-active {
    -webkit-box-shadow: none;
    box-shadow: none;
}

body {
    font-size: 12px;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 14px;
}

h6 {
    font-size: 12px;
}

label {
    font-weight: normal;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

/* Modals */
body.modal-open {
    padding-right: 0px !important;
}

div.modal.fade.in {
    padding-right: 0px !important;
}

/* Badges */
.badge {
    background-color: #888;
    border-radius: 8px;
    color: #FFF;
    display: inline;
    line-height: 12px;
    padding: 2px 5px;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}

.badge.badge-large {
    border-radius: 11px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    font-weight: normal;
    padding: 5px 8px;
}

.badge.badge-danger {
    background-color: #ED5565;
}

.badge.badge-green {
    background-color: #1AB394;
}

/* Footer */
html {
    min-height: 100%;
    position: relative;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 80px;
}

.footer {
    background-color: #EEE;
    bottom: 0;
    height: 104px;
    /* Set the fixed height of the footer here */
    position: absolute;
    width: 100%;
}

.footer a:hover {
    color: #A7DCEB !important;
}

.row4 {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    margin-bottom: 5px;
}

#copyright {
    border: none;
    padding: 8px 15px 10px 15px;
}

/* icons */
.help-icon {
    color: #5C828F;
    font-size: 1.3em;
    margin-right: 10px;
}

tr.ui-state-highlight .help-icon, tr.ui-state-hover .help-icon {
    color: #FFF;
}

.delete-icon {
    color: #ED5565;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 2em;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
}

.delete-icon:hover {
    color: #D64655;
}

.delete-icon:before {
    content: "\f014";
}

.edit-icon {
    color: #888;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 2em;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
}

.edit-icon:hover {
    color: #2F2F2F;
}

.edit-icon:before {
    content: "\f044";
}

.move-icon {
    color: #888;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 2em;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
}

.move-icon:hover {
    color: #2F2F2F;
}

.move-icon:before {
    content: "\f047";
}

.overdue-bill-icon {
    color: #ED5565;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 2em;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
}

.overdue-bill-icon:hover {
    color: #ED5565;
}

.overdue-bill-icon:before {
    content: "\f06a";
}

.paid-bill-icon {
    color: #1AB394;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 2em;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
}

.paid-bill-icon:hover {
    color: #1AB394;
}

.paid-bill-icon:before {
    content: "\f058";
}

.caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    display: inline-block;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    width: 0;
}

a:hover .caret {
    color: #FFF;
}

/* Colours */
.gold {
    color: #FFD700;
}

.yellow {
    color: #F79703;
}

.red,
.red a {
    color: rgb(179, 19, 18) !important;
}

.green {
    color: rgb(99, 151, 84);
}

/* Input Icon */
.input-icon {
    position: relative;
}

.input-icon i {
    font-size: 1.5em;
    left: 12px;
    position: absolute;
    top: 7px;
}

.input-icon input.form-control, .input-icon input.ui-inputfield {
    padding-left: 35px;
}

.input-icon span.text-right input {
    padding-left: 15px;
}

/* Company Preview */
.company-personalisation.panel-header {
    padding: 20px;
}

.company-personalisation h3 {
    margin: 0px;
}

/* Navigator */
.navigator {
    border: 1px solid #5C828F;
    border-radius: 23px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    font-size: 18px;
    height: 46px;
    line-height: 1.3333333;
    margin: auto;
    margin-bottom: 20px;
    padding: 10px 60px;
    position: relative;
    text-align: center;
    width: 300px;
}

.navigator .previous {
    color: #5C828F;
    font-size: 36px;
    left: 8px;
    position: absolute;
    top: 4px;
}

.navigator .next {
    color: #5C828F;
    font-size: 36px;
    position: absolute;
    right: 8px;
    top: 4px;
}

/* Omni Search */
.omni-searchbar i.omni-search-icon {
    font-size: 1.5em;
    left: 40px;
    position: absolute;
    top: 14px;
}

.omni-searchbar i.omni-cancel-icon {
    color: #5C828F;
    font-size: 1.5em;
    position: absolute;
    right: 35px;
    top: 14px;
}

.omni-searchbar i.omni-cancel-icon:hover {
    color: #ED5565;
}

.omni-searchbar input.form-control.omni-searchbox {
    border-radius: 23px;
    font-size: 18px;
    height: 46px;
    line-height: 1.3333333;
    margin-bottom: 40px;
    padding: 10px 60px;
}

.omni-searchbar-mini {
    position: relative;
}

.omni-searchbar-mini i.omni-search-icon {
    left: 12px;
    position: absolute;
    top: 9px;
}

.omni-searchbar-mini i.omni-cancel-icon {
    color: #5C828F;
    position: absolute;
    right: 13px;
    top: 9px;
}

.omni-searchbar-mini i.omni-cancel-icon:hover {
    color: #ED5565;
}

.omni-searchbar-mini input.form-control.omni-searchbox {
    border-radius: 15px;
    font-size: 13px;
    height: 30px;
    line-height: 1.3333333;
    padding: 4px 30px;
}

/* File Download */
.file-download {
    margin: auto;
    text-align: center;
    width: 130px;
}

.file-download-container:hover {
    background-color: #EEE;
}

.file-download .file-download-container {
    padding: 10px 0px;
}

.file-download img {
    margin-bottom: 7px;
}

.file-download p {
    margin-bottom: 0px;
    margin-top: 2px;
}

/* BS Callouts */
.bs-callout {
    background-color: #F3F3F4;
    border: none;
    border-left: 5px solid #5C828F;
    color: #5C828F;
    margin: 20px 0;
    padding: 20px;
}

.bs-callout-success-cancelled, .bs-callout-warning-cancelled,
.bs-callout-danger {
    border-left-color: #D9534F;
    color: #D9534F;
}

.bs-callout-success {
    border-left-color: #1AB394;
    color: #1AB394;
}

.bs-callout-warning {
    border-left-color: #F0AD4E;
    color: #F0AD4E;
}

.bs-callout h4 {
    margin-bottom: 15px;
}

/* Page Search */
.page-search {
    transition: all .3s ease-in-out;
}

.page-search .page {
    background-color: #F7F7F7;
    margin-bottom: 15px;
}

.page-search .page:hover {
    background-color: #808080;
    color: #FFF;
}

.page-search .page * {
    transition: unset;
}

.page-search .page .media-body, .page-search .page .media-left {
    padding: 10px;
}

.page-search .page h4 {
    margin-bottom: 8px;
}

.page-search .page p {
    margin-bottom: 5px;
}

.page-search .page i {
    font-size: 3em;
}

/* Products */
.product *, a:hover .product * {
    color: #FFF;
    font-style: normal;
    transition: unset;
}

.product {
    margin-bottom: 15px;
    padding: 15px;
    position: relative;
}

.product.product-active, .product.product-active.product-no-hover:hover {
    background-color: #1AB394;
}

.product.product-active:hover {
    background-color: #13A587;
}

.product.product-inactive, .product.product-inactive.product-no-hover:hover {
    background-color: #888;
}

.product.product-inactive:hover {
    background-color: #757575;
}

.product.product-deleted, .product.product-deleted.product-no-hover:hover {
    background-color: #D9534F;
}

.product.product-deleted:hover {
    background-color: #C34643;
}

.product .product-title {
    font-size: 14px;
    font-weight: bold;
}

.product .product-description p {
    margin-bottom: 0px;
    margin-right: 130px;
}

.product .product-cost {
    float: right;
    font-size: 14px;
    font-weight: bold;
}

.product .product-purchase {
    bottom: 15px;
    position: absolute;
    right: 15px;
}

/* Email */
.emails .email.email-unread {
    background-color: #888;
}

.emails .email.email-unread:hover {
    background-color: #757575;
}

.emails .email.email-read {
    background-color: #1AB394;
}

.emails .email.email-read:hover {
    background-color: #13A587;
}

.emails .email {
    color: #FFF;
    margin-bottom: 15px;
    padding: 15px;
}

.emails .email * {
    transition: unset;
}

.emails .email .email-subject {
    font-size: 14px;
    font-weight: bold;
}

.emails .email .email-sender {
    font-size: 11px;
    margin-bottom: 8px;
}

.emails .email .email-date {
    font-size: 10px;
}

/* ToDo */
.todos .todo.todo-inactive {
    background-color: #888;
}

.todos .todo.todo-inactive:hover {
    background-color: #757575;
}

.todos .todo.todo-active {
    background-color: #2BA6EF;
}

.todos .todo.todo-active:hover {
    background-color: #2297DC;
}

.todos .todo.todo-complete {
    background-color: #1AB394;
}

.todos .todo.todo-complete:hover {
    background-color: #13A587;
}

.todos .todo.todo-overdue {
    background-color: #D9534F;
}

.todos .todo.todo-overdue:hover {
    background-color: #C34643;
}

.todos .todo {
    color: #FFF;
    margin-bottom: 15px;
    padding: 15px;
}

.todos .todo * {
    transition: unset;
}

.todos .todo .todo-header {
    font-size: 14px;
    font-weight: bold;
}

.todos .todo .todo-date {
    font-size: 10px;
    margin-bottom: 8px;
}

.todos .todo .note-complete-section {
    font-size: 10px;
    margin-top: 8px;
}

.todos .todo .todo-complete-icon {
    color: #1AB394;
    font-size: 2em;
    margin-right: 5px;
}

/* Directory Businesses */
.directory-businesses .directory-business {
    background-color: #F7F7F7;
    border: 1px solid #EEE;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    margin-bottom: 20px;
    padding: 15px;
}

.directory-businesses .directory-business .directory-business-header .directory-business-logo {
    display: table-cell;
    text-align: center;
    width: 100px;
}

.directory-businesses .directory-business .directory-business-header .directory-business-text {
    display: table-cell;
    vertical-align: top;
    width: auto;
}

.directory-businesses .directory-business .directory-business-icons {
    display: table-cell;
    padding-top: 10px;
    width: 100px;
}

.directory-businesses .directory-business .directory-business-icons i {
    display: block;
    line-height: 24px;
    text-align: center;
}

.directory-businesses .directory-business .directory-business-icons-text {
    display: table-cell;
    padding-top: 10px;
    vertical-align: top;
    width: auto;
}

.directory-businesses .directory-business .directory-business-icons-text .icon-label {
    display: block;
    line-height: 24px;
}

.directory-businesses .directory-business .directory-business-header h4 {
    margin-bottom: 0px;
}

.directory-businesses .directory-business .directory-business-header span {
    display: block;
}

.directory-business .btn-link {
    font-size: 11px;
}

/* Linked Accounts */
.linked-accounts .linked-account {
    background-color: #F7F7F7;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    margin-bottom: 20px;
    padding: 15px;
}

.linked-accounts .linked-account .linked-account-header img {
    float: left;
    margin-right: 15px;
}

.linked-accounts .linked-account .linked-account-header h3 {
    margin-bottom: 10px;
}

.linked-account .linked-account-detail {
    margin-top: 5px;
}

.linked-account .btn-link {
    font-size: 11px;
}

/* Notes */
.notes .note:first-child {
    border-top: none;
}

.notes .note {
    border-top: 1px solid #DDD;
    padding: 15px;
}

.notes .note .note-header {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
}

.notes .note .note-date {
    font-size: 10px;
    margin-bottom: 8px;
}

.notes .note-content {
    font-size: 13px;
    line-height: 1.4em;
}

/* Form Control */
.form-group.form-group-condensed {
    margin-bottom: 5px;
}

textarea.form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
}

textarea.form-control:focus {
    border-color: #5C828F;
    -webkit-box-shadow: none;
    box-shadow: none;
}

input.form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: 14px;
}

input.form-control:hover, input.form-control:focus {
    border-color: #5C828F;
    -webkit-box-shadow: none;
    box-shadow: none;
}

input.form-control.username.green {
    color: #406E7E;
}

input.form-control.username.red {
    border-color: #ED5565;
    color: #ED5565;
}

.ui-inputfield {
    padding: 6px 12px;
}

.ui-icon.ui-icon-search {
    background-image: none;
}

span.validationError input, span.validationError input.ui-state-hover,
span.validationError input.ui-state-focus, div.validationError.form-control.ui-selectonemenu,
input.form-control.validationError, textarea.form-control.validationError {
    border: 1px solid #D9534F;
}

.text-right input {
    text-align: right;
}

/* Nav Bar */
#mainav ul.clear {
    border: none;
}

#mainav li a {
    border: none;
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    padding: 20px;
}

#mainav li ul {
    border-bottom: 2px solid #FFF;
    border-top: 2px solid #FFF;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.admin-nav #mainav li a {
    border: none;
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    padding: 15px;
}

@media screen and (min-width: 0px) and (max-width: 370px) {
    .admin-nav #mainav li a {
        border: none;
        font-family: 'Roboto Slab', serif;
        font-size: 14px;
        padding: 12px;
    }
}

#mainav li a.active {
    background-color: #A7DCEB !important;
    color: #5C828F;
    font-weight: bold;
}

#mainav a:hover {
    color: #5C828F;
    text-decoration: none;
}

#mainav li, nav li {
    transition: unset;
}

#mainav li:hover, #mainav li a:hover, nav li:hover, nav li a:hover {
    background-color: #FFF;
    color: #406E7E;
}

/* Error Messages */
.white-background div.ui-messages-error, .white-background div.ui-messages-info {
    background-color: #FFF;
}

div.ui-messages-error {
    background-color: #EEE;
    border: 0px solid #DDD;
    border-left: 5px solid #D9534F;
    border-radius: 0px;
}

span.ui-messages-error-icon {
    display: none;
}

span.ui-messages-error-summary {
    margin: 0px;
}

div.ui-messages-info {
    background-color: #EEE;
    border: 0px solid #DDD;
    border-left: 5px solid #1AB394;
    border-radius: 0px;
    color: #1AB394;
}

span.ui-messages-info-icon {
    display: none;
}

span.ui-messages-info-summary {
    margin: 0px;
}

/* Panels */
.panel {
    border: 0px solid transparent;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    clear: both;
    margin-bottom: 40px;
    margin-top: 0;
    padding: 0;
}

.panel-header {
    background-color: #406E7E;
    border: none;
    border-image: none;
    border-style: none;
    clear: both;
    color: #FFF;
    font-family: 'Roboto Slab', serif;
    font-size: 18px;
    margin-bottom: 0;
    padding: 20px;
}

.panel-header h1,
.panel-header h2,
.panel-header h3,
.panel-header h4,
.panel-header h5 {
    margin-bottom: 0px;
}

.panel-header .checkbox-label {
    font-size: 12px;
}

.panel-content {
    background-color: #FFF;
    border-color: #E7EAEC;
    border-image: none;
    border-style: none;
    border-width: 1px 0;
    clear: both;
    color: inherit;
    padding: 20px;
}

.panel-footer {
    background: #FFF;
    border-top: 1px solid #E7EAEC;
    color: inherit;
    padding: 10px 20px;
}

.scrollable-panel {
    overflow-y: auto;
}

/* Buttons */
a {
    color: #406E7E;
}

a i:hover {
    color: #345A67;
    text-decoration: none;
}

a:focus, a:hover {
    color: #345A67;
}

a.green:focus, a.green:hover {
    color: #406E7E;
}

a.red:focus, a.red:hover {
    color: #B9414D;
}

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

a:hover span {
    color: #3C606D;
    text-decoration: underline;
}

.btn {
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -3px rgba(0, 0, 0, 0.2), 0 1px 5px 1px rgba(0, 0, 0, 0.12);
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 15px;
    text-transform: none;
}

.btn-xs {
    font-size: 11px;
    font-weight: normal;
    padding: 2px 8px;
}

.btn-link {
    background-color: inherit;
    border: none;
    box-shadow: none;
    color: #406E7E;
    font-size: 16px;
    padding: 0px;
}

.btn-link.full-height {
    line-height: 46px;
}

.btn-link:hover {
    color: #345A67;
}

.btn-link.btn-danger {
    background-color: #FFF;
    color: #D9534F;
}

.btn-link.btn-danger:hover {
    background-color: #FFF;
    color: #B33F3B;
}

.btn-primary {
    background-color: #406E7E;
    border-color: #406E7E;
    color: #FFF;
}

.btn-primary.ui-state-disabled, .btn-primary:hover, .btn-primary:active,
.btn-primary:focus, .btn-primary:active:hover {
    background-color: #345A67;
    border-color: #345A67;
    color: #FFF;
}

.btn-primary.btn-outline {
    background-color: #FFF;
    border: 2px solid #406E7E;
    color: #406E7E;
}

.btn-primary.btn-outline.btn-xs {
    background-color: #FFF;
    border: 1px solid #406E7E;
    color: #406E7E;
}

.btn-primary.btn-outline:hover {
    background-color: #406E7E;
    border-color: #406E7E;
    color: #FFF;
}

.btn-danger {
    background-color: #D9534F;
    border-color: #D9534F;
    color: #FFF;
}

.btn-danger:hover {
    background-color: #B33F3B;
    border-color: #B33F3B;
    color: #FFF;
}

.btn-danger.btn-outline {
    background-color: #FFF;
    border-color: #D9534F;
    color: #D9534F;
}

.btn-danger.btn-outline:hover {
    background-color: #D9534F;
    border-color: #D9534F;
    color: #FFF;
}

.btn-success {
    background-color: #1AB394;
    border-color: #1AB394;
    color: #FFF;
}

.btn-success:hover {
    background-color: #099C7F;
    border-color: #099C7F;
    color: #FFF;
}

.btn-success.btn-outline {
    background-color: #FFF;
    border-color: #1AB394;
    color: #1AB394;
}

.btn-success.btn-outline:hover {
    background-color: #1AB394;
    border-color: #1AB394;
    color: #FFF;
}

.user-icon:hover {
    background-color: #EEE;
}

.company-chooser *, .user-chooser * {
    transition: unset;
}

.user-icon {
    padding: 10px;
}

/* My Documents */
.document {
    border-top: 1px solid #DADADA;
    height: 45px;
    padding: 5px 10px;
    position: relative;
}

.document:hover {
    background-color: #EEE;
}

.document:focus {
    color: inherit;
    outline: none;
}

.document.document-deleted .document-name, .document.document-deleted .document-filesize,
.folder.folder-deleted .folder-name {
    color: #D9534F;
}

.document .document-filesize {
    font-size: 10px;
}

.document .delete-icon, .folder .delete-icon {
    float: right;
    margin-top: 3px;
}

.document .edit-icon, .folder .edit-icon {
    float: right;
    margin-right: 15px;
    margin-top: 4px;
}

.document .restore-button, .folder .restore-button {
    float: right;
    font-size: 12px;
    margin-top: 1px;
    padding: 5px 10px;
}

.document .move-icon {
    float: right;
    margin-right: 15px;
    margin-top: 4px;
}

.document .document-text-div {
    left: 42px;
    position: absolute;
}

.document .document-icons-div {
    background: #FFF;
    padding-left: 10px;
    position: absolute;
    right: 0;
}

.document .document-img-div {
    position: absolute;
}

.document:hover .document-icons-div {
    background: #EEE;
}

.folder {
    border-top: 1px solid #DADADA;
    padding: 5px 10px;
}

.folder:hover {
    background-color: #EEE;
}

.folder:focus {
    color: inherit;
    outline: none;
}

.folder .folder-name {
    padding-left: 10px;
}

/* Document Breadcrumb */
.document-breadcrumb {
    margin-bottom: 10px;
    padding: 8px 15px;
}

.document-breadcrumb .breadcrumb-separator {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    -webkit-font-smoothing: antialiased;
    margin: 0px 5px 5px 5px;
    text-rendering: auto;
}

.document-breadcrumb .breadcrumb-separator {
    margin-bottom: 5px;
}

.document-breadcrumb .breadcrumb-separator:before {
    content: "\f0da";
}

/* Expenses */
.expenses-cost {
    background-color: #5C828F;
    color: #FFF;
    font-weight: bold;
    margin: 30px -20px;
    padding: 15px 0;
}

/* font Awesome */

.check-icon {
    font-size: 2em;
    line-height: 32px;
}

.fa-15x {
    font-size: 1.5em;
}

a.faicon-facebook i.fa-facebook:hover, a.faicon-twitter i.fa-twitter:hover {
    color: #FFF;
}

.fa-facebook, .fa-twitter, *::before {
    transition: unset;
}

/* GMail */
p.gmail-subject {
    font-family: 'Roboto Slab', serif;
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 15px;
}

p.gmail-from {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 4px;
}

p.gmail-date {
    font-size: 12px;
    font-weight: 300;
}

/* iFrame */
.email-iframe {
    border: none;
    height: 1000px;
    width: 100%;
}

/* switch */

/* The switch - the box around the slider */
.switch {
    display: inline-block;
    height: 27px;
    position: relative;
    width: 50px;
}

/* Hide default HTML checkbox */
.switch input {
    display: none;
}

/* The slider */
.slider {
    background-color: #CCC;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:hover {
    background-color: #B7B7B7;
}

.slider:before {
    background-color: white;
    bottom: 4px;
    content: "";
    height: 20px;
    left: 4px;
    position: absolute;
    -webkit-transition: .4s;
    transition: .4s;
    width: 20px;
}

.switch.invert .slider:before {
    left: 25px;
}

input:checked + .slider {
    background-color: #5C828F;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -ms-transform: translateX(22px);
    -webkit-transform: translateX(22px);
    transform: translateX(22px);
}

.switch.invert input:checked + .slider:before {
    -ms-transform: translateX(-21px);
    -webkit-transform: translateX(-21px);
    transform: translateX(-21px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 28px;
}

.slider.round:before {
    border-radius: 50%;
}

/* MARGINS & PADDINGS */
.p-xxs {
    padding: 5px;
}

.p-xs {
    padding: 10px;
}

.p-sm {
    padding: 15px;
}

.p-m {
    padding: 20px;
}

.p-md {
    padding: 25px;
}

.p-lg {
    padding: 30px;
}

.p-xl {
    padding: 40px;
}

.m-xxs {
    margin: 2px 4px;
}

.m-xs {
    margin: 5px;
}

.m-sm {
    margin: 10px;
}

.m {
    margin: 15px;
}

.m-md {
    margin: 20px;
}

.m-lg {
    margin: 30px;
}

.m-xl {
    margin: 50px;
}

.m-n {
    margin: 0 !important;
}

.m-l-none {
    margin-left: 0;
}

.m-l-xs {
    margin-left: 5px;
}

.m-l-sm {
    margin-left: 10px;
}

.m-l {
    margin-left: 15px;
}

.m-l-md {
    margin-left: 20px;
}

.m-l-lg {
    margin-left: 30px;
}

.m-l-xl {
    margin-left: 40px;
}

.m-l-n-xxs {
    margin-left: -1px;
}

.m-l-n-xs {
    margin-left: -5px;
}

.m-l-n-sm {
    margin-left: -10px;
}

.m-l-n {
    margin-left: -15px;
}

.m-l-n-md {
    margin-left: -20px;
}

.m-l-n-lg {
    margin-left: -30px;
}

.m-l-n-xl {
    margin-left: -40px;
}

.m-t-none {
    margin-top: 0;
}

.m-t-xxs {
    margin-top: 1px;
}

.m-t-xs {
    margin-top: 5px !important;
}

.m-t-sm {
    margin-top: 10px;
}

.m-t {
    margin-top: 15px;
}

.m-t-md {
    margin-top: 20px;
}

.m-t-lg {
    margin-top: 30px;
}

.m-t-xl {
    margin-top: 40px;
}

.m-t-n-xxs {
    margin-top: -1px;
}

.m-t-n-xs {
    margin-top: -5px;
}

.m-t-n-sm {
    margin-top: -10px;
}

.m-t-n {
    margin-top: -15px;
}

.m-t-n-md {
    margin-top: -20px;
}

.m-t-n-lg {
    margin-top: -30px;
}

.m-t-n-xl {
    margin-top: -40px;
}

.m-r-none {
    margin-right: 0;
}

.m-r-xxs {
    margin-right: 1px;
}

.m-r-xs {
    margin-right: 5px;
}

.m-r-sm {
    margin-right: 10px;
}

.m-r {
    margin-right: 15px;
}

.m-r-md {
    margin-right: 20px;
}

.m-r-lg {
    margin-right: 30px;
}

.m-r-xl {
    margin-right: 40px;
}

.m-r-n-xxs {
    margin-right: -1px;
}

.m-r-n-xs {
    margin-right: -5px;
}

.m-r-n-sm {
    margin-right: -10px;
}

.m-r-n {
    margin-right: -15px;
}

.m-r-n-md {
    margin-right: -20px;
}

.m-r-n-lg {
    margin-right: -30px;
}

.m-r-n-xl {
    margin-right: -40px;
}

.m-b-none {
    margin-bottom: 0;
}

.m-b-xxs {
    margin-bottom: 1px;
}

.m-b-xs {
    margin-bottom: 5px;
}

.m-b-sm {
    margin-bottom: 10px;
}

.m-b {
    margin-bottom: 15px;
}

.m-b-md {
    margin-bottom: 20px;
}

.m-b-lg {
    margin-bottom: 30px;
}

.m-b-xl {
    margin-bottom: 40px;
}

.m-b-n-xxs {
    margin-bottom: -1px;
}

.m-b-n-xs {
    margin-bottom: -5px;
}

.m-b-n-sm {
    margin-bottom: -10px;
}

.m-b-n {
    margin-bottom: -15px;
}

.m-b-n-md {
    margin-bottom: -20px;
}

.m-b-n-lg {
    margin-bottom: -30px;
}

.m-b-n-xl {
    margin-bottom: -40px;
}

.p-l-none {
    padding-left: 0;
}

.p-l-xs {
    padding-left: 5px;
}

.p-l-sm {
    padding-left: 10px;
}

.p-l {
    padding-left: 15px;
}

.p-l-md {
    padding-left: 20px;
}

.p-l-lg {
    padding-left: 30px;
}

.p-l-xl {
    padding-left: 40px;
}

.p-l-n-xxs {
    padding-left: -1px;
}

.p-l-n-xs {
    padding-left: -5px;
}

.p-l-n-sm {
    padding-left: -10px;
}

.p-l-n {
    padding-left: -15px;
}

.p-l-n-md {
    padding-left: -20px;
}

.p-l-n-lg {
    padding-left: -30px;
}

.p-l-n-xl {
    padding-left: -40px;
}

.p-t-none {
    padding-top: 0;
}

.p-t-xxs {
    padding-top: 1px;
}

.p-t-xs {
    padding-top: 5px;
}

.p-t-sm {
    padding-top: 10px;
}

.p-t {
    padding-top: 15px;
}

.p-t-md {
    padding-top: 20px;
}

.p-t-lg {
    padding-top: 30px;
}

.p-t-xl {
    padding-top: 40px;
}

.p-t-n-xxs {
    padding-top: -1px;
}

.p-t-n-xs {
    padding-top: -5px;
}

.p-t-n-sm {
    padding-top: -10px;
}

.p-t-n {
    padding-top: -15px;
}

.p-t-n-md {
    padding-top: -20px;
}

.p-t-n-lg {
    padding-top: -30px;
}

.p-t-n-xl {
    padding-top: -40px;
}

.p-r-none {
    padding-right: 0;
}

.p-r-xxs {
    padding-right: 1px;
}

.p-r-xs {
    padding-right: 5px;
}

.p-r-sm {
    padding-right: 10px;
}

.p-r {
    padding-right: 15px;
}

.p-r-md {
    padding-right: 20px;
}

.p-r-lg {
    padding-right: 30px;
}

.p-r-xl {
    padding-right: 40px;
}

.p-r-n-xxs {
    padding-right: -1px;
}

.p-r-n-xs {
    padding-right: -5px;
}

.p-r-n-sm {
    padding-right: -10px;
}

.p-r-n {
    padding-right: -15px;
}

.p-r-n-md {
    padding-right: -20px;
}

.p-r-n-lg {
    padding-right: -30px;
}

.p-r-n-xl {
    padding-right: -40px;
}

.p-b-none {
    padding-bottom: 0;
}

.p-b-xxs {
    padding-bottom: 1px;
}

.p-b-xs {
    padding-bottom: 5px;
}

.p-b-sm {
    padding-bottom: 10px;
}

.p-b {
    padding-bottom: 15px;
}

.p-b-md {
    padding-bottom: 20px;
}

.p-b-lg {
    padding-bottom: 30px;
}

.p-b-xl {
    padding-bottom: 40px;
}

.p-b-n-xxs {
    padding-bottom: -1px;
}

.p-b-n-xs {
    padding-bottom: -5px;
}

.p-b-n-sm {
    padding-bottom: -10px;
}

.p-b-n {
    padding-bottom: -15px;
}

.p-b-n-md {
    padding-bottom: -20px;
}

.p-b-n-lg {
    padding-bottom: -30px;
}

.p-b-n-xl {
    padding-bottom: -40px;
}

a.full-width {
    width: 100%;
}