﻿* { box-sizing: border-box; -moz-box-sizing: border-box; font-family: 'Montserrat', sans-serif; font-weight: 300;}

body {font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 14px; background:#ebf0f7; margin: 0;}


/*Login Styles*/
.login-container { width: 700px; margin: 50px auto; padding: 30px; background: #fff;}

/*Header*/
header {height: 50px;border-bottom: 1px solid black;background: black;padding: 0;position:fixed;width: 100%; padding-left: 20px;}

.logo-container {    position: absolute;    top: 15px;    left: 20px;    max-width: 180px;}
    .logo-container img { width: 100%; height: auto;}

.logo-text { position:absolute; width: 400px; left: 40px; top: 20px; }

/*Navigation*/
nav#main-nav { background:#dce2ec; position: fixed; top: 55px; left: 0; bottom: 53px; width: 300px; padding: 0; display:none;}    
nav#main-nav a { display:block; padding: 15px 30px; border-bottom: 1px solid #ebf0f7; font-size: .8em; overflow: auto;}    

/*Dashboard Section*/
section#dashboard-section { padding: 15px; position: fixed; top: 57px; left: 0; right: 0; bottom: 53px; overflow: auto;}

.dashboard-progress-header { background:#fff; margin-bottom: 15px;}
    .dashboard-progress-header .width25 { padding: 20px; border-left: 1px solid #dce2ec; text-align:center;}
        .dashboard-progress-header .width25:first-child { border-left: 0;}

.dashboard-meta { color: #5e6777; font-size: .8em;}

.dashboard-progress-header-type { display:block; border-bottom: 1px solid #dce2ec; font-size: .8em; font-weight: 700; text-transform:uppercase;padding-bottom: 5px; margin-bottom: 5px;}
    .dashboard-progress-header-type span { margin-right: 5px;}
.dashboard-progress-header-number { font-size: 4em; font-weight: 700;}

.dashboard-progress-bar { background:#dce2ec; height: 10px; width: 100%; border-radius: 10px; -moz-border-radius: 10px; margin: 10px 0; position: relative; overflow: hidden;}
.dashboard-current-progress { position: absolute; width: 25%; height: 100%; background:#28975d;}

.dashboard-filter { background:#dce2ec; padding: 10px; margin-bottom: 15px;}
    .dashboard-filter .form-item-container { margin-bottom: 0;}


.dashboard-title {text-transform: uppercase; font-size: .9em; font-weight: 700; text-transform:uppercase;}

.dashboard-column-title { }
.dashboard-column-title ul {margin: 0; padding: 0; list-style:none; }
    .dashboard-column-title ul li {float:left; padding: 0 0 15px 0; width: 30%; padding-left: 10px;}
    .dashboard-column-title ul li:first-child { width: 70%; text-align: left; padding-left:0;}

.dashboard-item { background:#fff; border-bottom: 1px solid #dce2ec;}
    .dashboard-item ul {margin: 0; padding: 0; list-style:none; }
    .dashboard-item ul li {float:left; padding: 10px; width: 30%; text-wrap:none; white-space:pre; text-overflow:ellipsis; overflow:hidden; position:relative;}
        .dashboard-item ul li span { display: inline-block; padding-right: 10px;}

.dashboard-escalated-items ul li:first-child { width: 70%; text-align: left; border-left: 5px solid #cc0606}
    .dashboard-escalated-items ul li:first-child span {  color:#cc0606;}

.dashboard-pending-items ul li:first-child { width: 70%; text-align: left; border-left: 5px solid #ddab08}
    .dashboard-pending-items ul li:first-child span {  color:#ddab08;}

.dashboard-complete-items ul li:first-child { width: 70%; text-align: left; border-left: 5px solid #28975d}
    .dashboard-complete-items ul li:first-child span {  color:#28975d;}

section#dashboard-progress { padding: 30px; position: fixed; top: 57px; width: 300px; right: 0; bottom: 55px; overflow: auto; background:rgba(255,255,255,.5); }



/*Main Section*/
section#main-section { padding: 30px; position: fixed; top: 73px; left: 0; right: 0; bottom: 0; overflow: auto;}
.section-title { font-size: 2em; margin-bottom: 15px;}

nav#section-sub-nav { }
    nav#section-sub-nav a { display: inline-block; padding: 10px 0; margin-right: 10px; border-bottom: 4px solid #dce2ec; text-decoration:none; color:#1758b4; font-size: .8em;}
        nav#section-sub-nav a.active { border-bottom: 4px solid #1758b4; color:#1758b4}
        nav#section-sub-nav a:last-child { margin-right: 0;}

div#content-container { padding: 30px; background:#fff; max-width: 700px; margin: 0 auto;}

/*Action Page*/
section#action-section {padding: 15px; position: fixed; top: 57px; left: 0; right: 300px; bottom: 53px; overflow: auto; }

.action-title-container { margin-bottom: 30px;}
.action-title { font-size: 1.75em;}
.action-title-details { color: #5e6777; font-size: .8em;}

fieldset.action-task-list { padding: 20px; border: 0; margin: 0; border-bottom: 1px solid rgba(0,0,0,.2); }
    fieldset.action-task-list:last-child {border-bottom:0; }

.action-task-list-title {text-transform: uppercase; font-size: .9em; font-weight: 700; text-transform:uppercase; margin-bottom: 20px;}
.action-task-list .form-item-container { margin-bottom: 1px; padding: 0 0 20px 30px; position: relative;}

    .action-task-list .form-item-container .task-status { position: absolute; font-size: 1.5em; left: 0;}
    .action-task-list .form-item-container .escalated {color:#cc0606;}
    .action-task-list .form-item-container .pending {color:#ddab08;}
    .action-task-list .form-item-container .completed {color:#28975d;}

section#action-details { padding: 15px; position: fixed; top: 57px; right: 0; bottom: 53px; width: 300px; overflow: auto; background: #dce2ec;}

.action-details-item { background:#fff; padding: 20px; margin-bottom: 15px;}
    .action-details-item.status { text-align:center;}
        .action-details-item.escalated { color:#cc0606}
    .action-details-item span { font-size: 3em;}

.tasks-due { text-align:center;}
.action-side-bar-number { font-size: 3em; font-weight: 700;}
.action-side-bar-tile { margin-bottom: 20px; }

.action-side-bar-progress { margin: 0; padding: 0; list-style:none;}
    .action-side-bar-progress li { border-bottom: 1px solid #dce2ec; text-align:left; padding: 15px 0;}    
.action-side-bar-progress span { font-size: 1em; margin-right: 7px;}
    .action-side-bar-progress span.escalated { color:#cc0606}
    .action-side-bar-progress span.pending { color:#ddab08}
    .action-side-bar-progress span.completed { color:#28975d}

a#add-mrgcd-service { background:#28975d; color:#fff; font-weight: 700; text-decoration:none; display:inline-block; padding: 10px; border-radius: 3px;}

.services-outer-container { margin-bottom: 50px; padding: 30px; border: 1px solid #ccc;}
    .services-outer-container:nth-child(even) { background:#f5f5f5;}

/*Footer*/
footer { background:#0a1f3d; color:#fff; padding: 20px 30px; position: fixed; bottom: 0; left: 0; right: 0; font-size: .8em;}


/*Form Properties Styles*/
.form-section { margin-bottom: 15px; border-bottom: 1px solid #dce2ec; padding-bottom: 15px; max-width: 800px; }
    .form-section:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0;}

.form-section-title { font-size: 1.5em; margin-bottom: 30px; font-weight: 700;}
.form-section-description { padding-bottom: 30px; line-height: 1.45em; font-size: .8em;}

.form-item-container { margin-bottom: 20px;}
    .form-item-container label { display:block; margin-bottom: 7px; font-size: .8em;}
        .form-item-container label.required:before {content:"*"; padding-right: 10px; display: inline-block; color:#ff0000; }
    .form-item-container input[type="text"], .form-item-container input[type="password"], .form-item-container input[type="date"], select, textarea
    { display:block; width: 100%; padding: 10px; font-size: 1em; max-width: 800px;}

    .form-item-container textarea { height: 75px;}

    .form-item-container blockquote:before { content: "Validation Notes: "; font-weight: 700;}
.form-item-container blockquote { padding: 0; font-size: .8em; font-style: italic; margin: 10px 0 0 0;}

.cb-item { }
    .cb-item label { font-size: 1em;}

.form-btn { padding: 10px 20px; border: 0; display: inline-block; background:#1758b4; color:#fff; border-radius: 3px;  -moz-border-radius: 3px; }

.main-table { width: 100%; border-collapse: collapse;}
    .main-table th { background:#0a1f3d; color:#fff; text-align:left; padding: 8px;}
    .main-table td {border-bottom: 1px solid #ccc; padding: 8px; }

        .main-table tr:nth-child(even) { background:#f5f9ff}


/*General Styles*/
.clear-after:after {content:""; display:block; clear:both; }

.float-left { float:left;}
.float-right { float:right;}

.width60 { width: 60%;}
.width50 { width: 47.5%;}
.width50:nth-child(2) { margin-left: 5%;}
.width40 { width: 40%;}
.width25 { width: 25%;}

.width33 { width: 30%;}
.width33:nth-child(2) {margin: 0 5%;}

.red { color:#cc0606;}
.yellow { color:#ddab08;}
.green { color:#28975d;}

hr { margin: 30px 0; padding: 0; border: 0; background: #ccc; height: 1px; }

.relative { position:relative;}

/*Fonts*/
@charset "UTF-8";

@font-face {
  font-family: "rhodes";
  src:url("fonts/rhodes.eot");
  src:url("fonts/rhodes.eot?#iefix") format("embedded-opentype"),
    url("fonts/rhodes.woff") format("woff"),
    url("fonts/rhodes.ttf") format("truetype"),
    url("fonts/rhodes.svg#rhodes") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "rhodes" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "rhodes" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-alert:before {
  content: "\61";
}
.icon-check:before {
  content: "\62";
}

span.arrow {
    margin-left: 6px;
    height:17px;
}
label.error {
    height:17px;
    margin-left:9px;
    padding:1px 5px 0px 5px;
    font-size:small;
    color: red;
}

.errorr {
    height:17px;
    margin-left:9px;
    padding:1px 5px 0px 5px;
    font-size:small;
    color: red;
}