* { 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 { background:#0a1f3d; padding: 10px 30px; -webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,.2); box-shadow: 0 0 30px 0 rgba(0,0,0,.2); position: relative; z-index: 2; position: relative; color:#ffffff;}

.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; }

header a {color:#ffffff; text-decoration:none;}

/*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); }

/*Admin Dashboard*/
.admin-container {margin-right: 7%; margin-left: 7%; background-color: white;}
    .admin-container .admin-title-container {width: 100%; margin: 1% auto 2% 4%;}
        .admin-container .admin-title-container .title-item h1 {margin-bottom: 0; font-size: 300%; font-weight: 500;}
        .admin-container .admin-title-container .subtitle-item h1 {margin-top: 0;}
  
    .admin-container .filter-title {width: 100%; text-align: center;}
    .admin-container .filter-container {width: 100%; display: flex; justify-content: space-between; padding: 0 1% 0 1%;}
        .admin-container .filter-container div {width: 100%; text-align: center; padding: 0 15px 0 15px;}
            .admin-container .filter-container div input,
            .admin-container .filter-container div select {width: 100%; height: 32px; padding: 0 0 0 15px;}

    .admin-container #grid {width: 96%; margin: 0 2% 0 2%;}

    .admin-container .button-container-left {width: 100%; padding: 1.2% 1% 1.5% 2%; text-align: left;}
    .admin-container .button-container-right {width: 100%; padding: 0.5% 2.5% 2% 2%; text-align: right;}
        .admin-container .button-container-left button,
        .admin-container .button-container-right button {
            background:#229cd1;
            color:#fff;
            border-radius: 5px;
            -moz-border-radius: 5px;
            padding: 10px;
            text-align:center;
            display:inline-block;
            text-decoration:none;
            font-weight: 700;
            font-size: .8em;
            text-transform:uppercase;
            cursor: pointer;
            margin-right: 10px;
        }

/*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;}
    section#main-section .form-item-container p {text-align: justify;}

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: 45%; margin: 0 auto;}

#paymentForm .buttons-container { 
    display: flex;
    justify-content: flex-start;
}
    #paymentForm .buttons-container input {width: 220px; margin-right: 12px;}

/*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-additional-service { background:#28975d; color:#fff; font-weight: 500; text-decoration:none; display:inline-block; padding: 10px; border-radius: 3px;}

.services-outer-container { margin-bottom: 50px; padding: 30px; border: 1px solid #ccc; position:relative;}
    .formContainer:nth-of-type(even) { background:#f5f5f5;}


/*Receipt Page*/
.width50a { width: 40%;}
.width50a:nth-child(2) { width: 55%; margin-left: 5%;}

.flex-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.receipt-container .flex-container-2 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.receipt-container .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.receipt-container .title-container .image-container {width: 12%;}
.receipt-container .title-container .receipt-title {width: 88%;}

.receipt-container h2,.receipt-container h3,.receipt-container h4, .receipt-container h4 span {font-weight: 600;}
.receipt-container .receipt-title {text-align:center;}
    .receipt-container .receipt-title h1 {font-size: 2em;}
.receipt-container p.subtitle {font-size: 1.5em;}
.flex-container-2 h2 {margin-top: 5px;}
.receipt-container .inline, .receipt-container .inline2 {display: flex; justify-content: flex-start; align-items: center;}
    #payment-details .inline:nth-child(2n), #payment-details .inline2:nth-child(3n) {margin-bottom: 15px;}
    .receipt-container .inline h4, .receipt-container .inline2 h4 {margin: 5px 15px 5px 0;}
hr.receipt {margin: 15px 0; border: 0; height: 1px; box-shadow: inset 0 1px 1px -1px rgba(0, 0, 0, 0.5);}
.receipt-container div.tight {line-height: 150%;}
.receipt-container div.fee h4 {padding: 10px; padding-left: -10px;}
.receipt-container div.total {background-color: #d5e7f9; width: 60%; height: 50px; }
    .receipt-container div.total h4 {padding: 10px; padding-left: -10px;}
    .receipt-container #payment-details {width: 60%; padding-left: 10px;}
    .receipt-container div.total #total-amount {font-size: 1.8em; font-weight: 500;}

.receipt-container .buttons-container {margin-top: 30px;}
    .receipt-container .buttons-container input {cursor: pointer;}

#decline {color: #C70039;}
#decline .receipt-title {text-align:left; margin-left: 30px;}
/*Welcome Page*/

div#content-container.welcome-container {max-width: 46%; width: 46%; margin: 0 27% 0 27%; display: flex; flex-direction: column;}
.welcome-container .title-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #22466E;
}

/* .welcome-container div.float-right { background-color: plum;} */
    .welcome-container div.float-right button {float: right;}

.welcome-container .title-container .image-container {width: 18%;}
.welcome-container .title-container .welcome-main {width: 82%;}
    .welcome-container .title-container .welcome-main p {font-size: 1.2rem; margin: 10px auto 20px auto;}   
    .welcome-container .welcome {padding: 20px auto 20px 30%;}
    .welcome h1 {font-size: 2rem;font-weight: 500;}

    .welcome-container .title-container .notice-container {width: 95%}

    .welcome-container .title-container .notice-container p {font-size: 1rem; text-align: justify; text-justify: inter-word;}

.admin-login-container {display: flex; justify-content: flex-end;}
    #admin-login {font-size: 1.1rem; text-decoration: none;}
    #continue-to-payment {font-size: 1.1rem;}

.buttons-container {
    display: flex;
    justify-content: space-between;
}

.remove-section {
    position: absolute;
    top: 5px;
    right: 8px;
    display: inline-block;
    font-weight: 700;
    cursor: pointer;
    color: red;
    font-size: 14px;
}

span.emphasize {
    font-weight: 700;
    font-style: italic;
}

/*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-title #grand-total {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"], .form-item-container input[type="email"], .form-item-container input[type="number"], select, textarea
    { display:block; width: 100%; padding: 10px; font-size: 1em; max-width: 800px;}

    .form-item-container textarea { height: 75px;}
    .form-item-container p {margin-top: 2rem !important;}

    .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;}

.form-action-container {
    margin: 8px auto 20px auto;
}

.formContainer {margin-bottom: 30px;}
    .formContainer div:last-of-type {margin-top: 10px !important; margin-bottom: 0 !important;}

    .formContainer .insertion-point {margin-bottom: 30px !important;}

.cb-item { }
    .cb-item label { font-size: 1em;}

.form-btn, button.button
 { padding: 10px 20px; border: 0; display: inline-block; background:#1758b4; color:#fff; border-radius: 3px;  -moz-border-radius: 3px; font-weight: 500;}

 a#continue-to-payment { padding: 10px 20px; border: 0; display: inline-block; background:#1758b4; color:#fff; border-radius: 3px;  -moz-border-radius: 3px; font-weight: 500; text-decoration: none; margin-left: 10px;}

.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;}

/*Dialog*/
.k-dialog-titlebar {
    background-color: #0a1f3d;
    color: #ffffff;    
    padding: 15px;
}

.k-window-title.k-dialog-title {
    font-weight: 500;
}

.k-button-agree {
    width: 150px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    border-color: #3c91e6; 
    padding: 8px;
    background-color: #3c91e6;    
    color: #ffffff;
    font-weight: 500;
}

.k-button-decline {
    width: 150px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    border-color: #bbb;
    padding: 8px;
    font-weight: 500;
}

/* .k-button-decline:focus, .k-button-agree:hover, .k-button-decline:visited {border-color:#944F6A;background-color:#9F6D81;}
.k-button-decline:hover {border-color:#9F6D81;} */

/*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;
}

@media print {
    div#content-container.receipt-container { padding: 30px; background:#fff; max-width: 100%;}
}