body.material-admin {
    background: #e7ebee;
}

section#content, section#page-wrapper {
    background: #e7ebee;
    padding-top: 15px;
}

.project-box .main-box-body {
    padding: 0 !important;
}
.project-box .project-box-header {
    border-radius: 3px 3px 0 0;
    background-clip: padding-box;
    /* stops bg color from leaking outside the border: */
}
.project-box .project-box-header .name a {
    color: #fff;
    display: block;
    font-size: 1.4em;
    font-weight: 300;
    padding: 16px 15px;
    border-radius: 3px 3px 0 0;
    background-clip: padding-box;
    /* stops bg color from leaking outside the border: */
    -webkit-transition: background-color 0.1s ease-in-out 0s;
    transition: background-color 0.1s ease-in-out 0s;
}
.project-box .project-box-header .name a:hover {
    text-decoration: none;
}
.project-box .project-box-header.green-bg .name a:hover {
    background: #27ae60;
}
.project-box .project-box-content {
    padding: 10px 20px 5px;
    text-align: center;
}
.project-box .project-box-content .chart {
    position: relative;
    text-align: center;
    font-weight: 300;
    font-size: 1em;
    width: 130px;
    height: 130px;
    display: block;
    margin: 0 auto;
    padding-top: 37px;
}
.project-box .project-box-content .chart canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.project-box .project-box-content .chart .percent {
    font-size: 2.1em;
    font-weight: 600;
}
.project-box .project-box-content .chart .lbl {
    display: block;
    font-size: 0.875em;
    margin-top: -7px;
}
.project-box .project-box-footer {
    border-radius: 0 0 3px 3px;
    background-clip: padding-box;
    /* stops bg color from leaking outside the border: */
}
.project-box .project-box-footer a {
    border-right: 1px solid #eee;
    color: #344644;
    display: block;
    float: left;
    margin: 20px 0;
    padding: 5px 10px;
    text-align: center;
    width: 33.33%;
}
.project-box .project-box-footer a:last-child {
    border: none;
}
.project-box .project-box-footer a:hover {
    text-decoration: none;
}
.project-box .project-box-footer .value {
    display: block;
    font-size: 1.8em;
    font-weight: 300;
}
.project-box .project-box-footer .label {
    display: block;
    font-size: 0.875em;
    font-weight: 300;
    color: #344644;
}
.project-box .project-box-ultrafooter {
    background: #f7fafa;
    border-top: 1px solid #e9eef0;
    padding: 8px 15px;
    border-radius: 0 0 3px 3px;
    background-clip: padding-box;
    /* stops bg color from leaking outside the border: */
}
.project-box .project-box-ultrafooter .project-img-owner {
    border-radius: 50%;
    background-clip: padding-box;
    /* stops bg color from leaking outside the border: */
    display: block;
    float: left;
    height: 33px;
    margin-right: 5px;
    overflow: hidden;
    width: 33px;
}
.project-box .project-box-ultrafooter .link {
    margin-top: 6px;
    color: #c1c5c6;
}

.emerald-bg {
    background-color: #3498db !important; /*2980b9*/
}
.red-bg {
    background-color: #e74c3c !important; /*c0392b*/
}
.yellow-bg {
    background-color: #f1c40f !important; /*f39c12*/
}
.green-bg {
    background-color: #2ecc71 !important; /*27ae60*/
}
.purple-bg {
    background-color: #9b59b6 !important;
}
.gray-bg {
    background-color: #95a5a6 !important; /*7f8c8d*/
}
.white-bg {
    background-color: #ffffff !important;
}

.emerald {
    color: #3498db !important;
}
.red {
    color: #e74c3c !important;
}
.yellow {
    color: #f1c40f !important;
}
.green {
    color: #2ecc71 !important;
}
.purple {
    color: #9b59b6 !important;
}
.gray {
    color: #95a5a6 !important;
}

.status-green {
    color: #005826;
}
.status-red {
    color: #9e0b0f;
}

.txt-white {
    color: #fff !important;
}
.txt-white-hover:hover {
    color: #fff !important;
}

.main-box {
    background: #FFFFFF;
    box-shadow: 1px 1px 9px 0 #CCCCCC;
    margin-bottom: 16px;
    -webikt-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.project-box.primary-box.bgm-primary {
  color: #fff !important;
}

.project-box.primary-box.bgm-primary,
.project-box.primary-box.bgm-primary .project-box-footer .value,
.project-box.primary-box.bgm-primary .project-box-footer .label
{
  color: #fff !important;
}

.project-box.primary-box .project-box-footer a:hover {
    color: #508bb3;
}
.project-box.emerald-box .project-box-footer a:hover {
    color: #3498db;
}
.project-box.red-box .project-box-footer a:hover {
    color: #e74c3c;
}
.project-box.yellow-box .project-box-footer a:hover {
    color: #f1c40f;
}
.project-box.green-box .project-box-footer a:hover {
    color: #2ecc71;
}
.project-box.purple-box .project-box-footer a:hover {
    color: #9b59b6;
}
.project-box.gray-box .project-box-footer a:hover {
    color: #95a5a6;
}

.card.card-no-header .project-box-content .chart, .chart-modal {
    position: relative;
    text-align: center;
    font-weight: 300;
    font-size: 1em;
    width: 60px;
    height: 60px;
    display: block;
    margin: 0 auto;
    padding-top: 15px;
}

.card .project-box-content .chart .percent, .chart-modal .percent {
    font-weight: bold;
}

.card .project-box-content .chart .lbl, .chart-modal .lbl {
    font-size: 16px;
}

.card .project-box-content .chart canvas, .chart-modal canvas {
    position: absolute;
    top: 0px;
    left: 0;
}

.card.card-no-header .project-box-content .chart canvas, .chart-modal canvas {
    position: absolute;
    top: 5px;
    left: 0;
}

/* Project box hover */
.project-box {
  position:relative;
}
.project-box:before {
  -webkit-transition: height;
  -o-transition: height;
  transition: height;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  height: 252px;
  background: rgba(0,0,0,.1);
  position: absolute;
  left: 0;
  top: 0;
}

.project-box:hover:before {
    height: 360px;
}

/* titles */
body.material-admin h1, body.material-admin h2, body.material-admin h3, body.material-admin h4 {
    font-family: roboto;
}

body.material-admin .fab-button {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

body.material-admin .block-header-fab-button {
    margin-top: -30px;
    float: right;
}

body.material-admin .card-header-fab-button {
    margin-top: 5px;
    float: right;
}

body.material-admin .block-header h2 {
    padding: 0 !important;
}

body.material-admin header + section {
    padding-top: 90px;
}

/* Summernot editor overriding */
body.material-admin .panel-heading.note-toolbar {
    bottom: 8px;
    position: absolute;
    z-index: 5;
    background-color: white;
    width: 98%;
}

body.material-admin .note-editable.panel-body {
    padding-bottom: 65px;
}
@media (max-width: 992px) {
    body.material-admin .note-editable.panel-body {
        padding-bottom: 100px;
    }
}

body.material-admin header[data-ma-theme=white] {
    background-color: white;
    color: #333;
}

body.material-admin header[data-ma-theme=white] li a {
    color: #333;
}

.fg-line.fg-toggled.fg-unfocused:after {
    transform: scale(0);
}

/* Changing switch sizes */
.toggle-switch.small input {
    position: absolute;
    z-index: 1;
    width: 23px;
    margin: 0 0 0 -4px;
    height: 12px;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
}

.toggle-switch.small input:checked+.ts-helper:before {
    left: 10px;
}

.toggle-switch.small .ts-helper {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 8px;
    border-radius: 8px;
}

.toggle-switch.small .ts-helper:before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 12px;
    height: 12px;
}

/* Bigger modal titles */
body.material-admin .modal-header .modal-title {
    font-size: 17px;
    font-weight: bold;
    /*color: #000;*/
}

/* Override datepicker style faults */
body.material-admin .datepicker table td.today, body.material-admin .datepicker table td.active,
body.material-admin .datepicker table tr td.day.focused, body.material-admin .datepicker table tr td.day:hover{
    background-color: transparent !important;
    background-image: none !important;
}

body.material-admin .bootstrap-datetimepicker-widget a[data-action] {
    color: #569BC2;
}
body.material-admin .timepicker-picker table tbody tr + tr:not(:last-child) {
    background: #569BC2;
    color: #fff;
}
body.material-admin .datepicker table thead tr:first-child th {
    background: #569BC2;
    padding: 20px 0;
}
body.material-admin .datepicker table thead tr:first-child th:hover {
    background: #569BC2;
}
body.material-admin .datepicker table thead tr:last-child:not(:only-child) {
    background: #5092b7;
}

.datepicker-months .month.active,
.datepicker-years .year.active,
.timepicker-minutes .minute.active,
.timepicker-hours .hour.active {
    background: #569BC2;
}

.datepicker table td.active:before {
    background-color: #569BC2;
}

body.material-admin .bootstrap-datetimepicker-widget table td.today:before {
    position: static;
}


/* Header button circle effect */
.actions > li > a, .actions > a, .actions > li > a {
    position: relative;
}

.actions > li > a:hover:before, .actions > a:hover:before, .actions > li > a.open:before, .actions > a.open:before {
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
    filter: alpha(opacity=100);
}

.actions > li > a:before, .actions > a:before {
    left: 0;
    top: 0;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -ms-transform: scale3d(0, 0, 0);
    -o-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    -webkit-transition: all;
    -o-transition: all;
    transition: all;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 0;
    border-radius: 50%;
    opacity: 0;
    filter: alpha(opacity=0);
}

/* General button circle effect */
.circle-effect:hover:before {
/*.actions > li > a:hover:before, .actions > a:hover:before, .actions > li > a.open:before, .actions > a.open:before {*/
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    opacity: 1;
    filter: alpha(opacity=100);
}

.circle-effect:before {
    left: 0;
    top: 0;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -ms-transform: scale3d(0, 0, 0);
    -o-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    -webkit-transition: all;
    -o-transition: all;
    transition: all;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 0;
    border-radius: 50%;
    opacity: 0;
    filter: alpha(opacity=0);
}

.dropdown-menu>li>a.dropdown-red {
    /*margin: 0 10px !important;
    padding: 10px 10px !important;
    border-radius: 6px;*/
    background-color: #fff;
    color: #f55 !important;
}

.dropdown-menu>li>a.dropdown-red:focus, .dropdown-menu>li>a.dropdown-red:hover {
  background-color: #f55;
  color: #fff !important;
}

[ng-cloak] {
    display: none !important;
}

.select2-hidden-accessible {
    display: none;
}
.actions>li>a.text-option {
    width: auto;
}

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.flip-container .flipped .back {
    transform: rotateY(0deg);
}

.flip-container .flipped .front {
    transform: rotateY(180deg);
}

.flip-container .back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* flip speed goes here */
.flip-container .flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.flip-container .front, .flip-container .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
}

/*  UPDATED! front pane, placed above back */
.flip-container .front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.flip-container .back {
    transform: rotateY(-180deg);
}
.table-hover>tbody>tr:hover {
    background-color: #dcedf6 !important;
}