@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

/* html5 reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

body {
    line-height: 1
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

nav ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
    content: none
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold
}

del {
    text-decoration: line-through
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

input, select {
    vertical-align: middle
}

textarea:focus, input:focus, select:focus {
    outline: 0;
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*:focus {
    outline: 0;
}

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button {
    cursor: pointer;
}

/* Start site CSS */
body {
    color: #666;
    font: 400 12px 'Open Sans', Arial, sans-serif;
    background: #f7f7f7;
    -webkit-font-smoothing: antialiased;
    padding-top: 50px;
}

body.login {
    background-color: #f7f7f7;
}

img {
    border: none;
}

p {
    font-size: 1em;
    line-height: 1.5em;
}

a {
    color: #3986de;
    text-decoration: none;
}

a:hover {
    color: #005a93;
}

a:visited {
    color: #6a899c
}

.text2 {
    font-size: 13px;
}

h1, h2, h3, h4 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    color: #3b3b3b;
    margin-bottom: 10px;
}

h1 {
    color: #3b3b3b;
    font-size: 28px
}

h2 {
    color: #3b3b3b;
    font-size: 24px;
}

h3 {
    font-size: 14px;
    color: #aaa;
    font-weight: 700
}

h4 {
    color: #3b3b3b;
}

h3.alt {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    color: #158db1
}

/* start layout */
.wrap {
    width: auto;
    margin: 0px;
}

#header {
    background: #fff;
    color: #666;
    position: fixed;
    z-index: 15;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
}

#header a {
    color: #158db1;
    text-transform: uppercase;
    font-size: 13px;
}

#header a:hover {
    color: #81d2ff
}

#header .wrap {
    padding-top: 10px;
    height: 60px;
    position: relative;
    margin: 0 10px
}

#header .logo {
    width: 50px;
    height: 35px;
    background: url('../images/logo.png') no-repeat;
    display: block;
    float: left;
    margin-right: 15px;
    background-size: 50px 35px;
}


#header .user-opt {
    position: absolute;
    top: 15px;
    right: 15px;
}

#header .user-opt .user { }
#header .user-opt .user span { text-transform:uppercase; padding:3px 4px; font-size:0.8em; margin:0 10px; background:#f4f4f4; color:#ccc }
#header .user-opt .user span:hover { color:#fff; background:limegreen }

#header .user-opt a {
    font-size: 11px;
}

#header .user-opt .mail {
    margin-right: 15px;
}

#header .user-opt .mail label {
    background: #f67046;
    color: #fff;
    font-size: 8px;
    text-align: center;
    padding: 0 4px;
    border-radius: 15px;
    border: 2px solid #fff;
    position: absolute;
    margin-left: -12px;
    margin-top: -6px;
    font-weight: bold;
}

#header {
}

#subheader {
    background: url('../images/head-bg.jpg') repeat-x;
}

#subheader .wrap {
    padding: 10px;
}

#subheader h1 {
    text-align: right;
    color: #fff;
    font-size: 24px;
}

#infoheader {
    background: #f0f4f6;
    padding: 12px;
    border-bottom: 1px solid #eee;
    margin-top:65px;
}

#main {
    margin-top:65px;
}
#infoheader + #main { margin-top:0 !important }

#main .wrap {
    position: relative;
}

#content {
    padding: 70px 20px 120px 20px;
    background: #fff;
    border-left: 1px solid #efefef;
    min-height: 100vh;
    /*overflow: hidden*/
}

#content.sidebar {
    margin-left: 230px;
}

#sidebar {
    position: absolute;
    width: 230px;
    top: 0;
    left: 0;
    background: #fff;
}

#sidebar.fixed {
    position: fixed;
    top: 50px;
}

/* profile photo */
#sidebar .profile-photo {
    margin: 0;
    background: #555;
}

#sidebar .profile-photo .photo {
    position: relative;
    overflow: hidden;
}

#sidebar .profile-photo .photo:hover .img {
    opacity: 1;
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
}

#sidebar .profile-photo .photo .img {
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

#sidebar .photo .img.pic:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 25%;
    min-height: 60px;
    background: #000;
    opacity: 0.6;
}

#sidebar .profile-photo .photo img {
    display: block;
}

#sidebar .profile-photo .photo .caption {
    opacity: 0;
    position: absolute;
    bottom: 5px;
    left: 10px;
}

#sidebar .profile-photo .photo:hover .caption {
    opacity: 1;
    text-align: center;
    position: absolute;
    z-index: 5
}

#sidebar .profile-photo .photo a {
    color: #fff
}

#sidebar .profile-photo .default {
    background: #1b89a9;
    color: #fff;
    text-align: center;
    padding: 20px;
    position: relative;
    height: 160px;
}

#sidebar .profile-photo .default .icon {
    font-size: 64px;
}

.student-info {
    letter-spacing: 0;
    font-size: 16px;
    color: #fff;
    position: absolute;
    z-index: 11;
    bottom: 5px;
    left: 5px;
    text-align: left;
}

.student-info .name {
    font-weight: 700;
    font-size: 14px;
}

.student-info .name.smaller {
    font-size: 12px;
}

.student-info .stud-id {
    color: #fff;
}

#sidebar .menu {
}

#sidebar .menu ul {
    list-style: none
}

#sidebar .menu ul > li {
    border-bottom: 1px solid #ddd;
}

#sidebar .menu ul > li > a {
    outline: 0;
    display: block;
    position: relative;
    color: #333;
    padding: 6px 12px;
    font-size: 13px;
    -webkit-transition: .15s ease-in;
    -moz-transition: .15s ease-in;
    -o-transition: .15s ease-in;
    transition: .15s ease-in;
}

#sidebar .menu ul > li > a:hover {
    color: #0ea9d7;
    -webkit-transition: .15s ease-in;
    -moz-transition: .15s ease-in;
    -o-transition: .15s ease-in;
    transition: .15s ease-in;
}

#sidebar .menu ul > li > a.active {
    background: #0ea9d7;
    color: #fff;
}

#sidebar .menu ul li ul li a {
    background: #fefefe;
    display: block;
    position: relative;
    padding-left: 35px;
    color: #444;
    font-size: 12px;
}

#sidebar .menu ul li ul li:last-child {
    border: 0;
}

#sidebar .menu ul li a .icon {
    margin-right: 5px;
    color: #999;
}

#sidebar .menu ul li .arrow {
    position: absolute;
    top: 7px;
    right: 5px;
    color: #fff;
    opacity: 0.5;
    font-size: 16px;
}

#sidebar .menu ul li > a:hover .icon {
    color: #0ea9d7
}

#sidebar .menu ul li > a.active .icon {
    color: #fff;
}

#sidebar .menu ul li a label {
    float: right;
    color: #fff;
    font-weight: bold;
    font-size: 8px;
    text-align: center;
    margin-top: 3px;
    padding: 1px 4px;
    background: #f67046;
    border-radius: 3px;
}

#sidebar .menu ul li a.active label {
    background: #fff;
    color: #333
}

#sidebar .menu ul > li > a.active:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 9px 8px 9px 0;
    border-color: transparent #fff;
    display: block;
    width: 0;
    z-index: 1;
    right: -1px;
    top: 5px;
}

#footer {
    border-top: 3px solid #72b3e0;
    background: #26729a;
    color: #7eafc9;
    padding: 5px 0;
    font-size: 11px;
    position: relative;
    z-index: 5;
}

#footer a {
    color: #97c8e1
}

#footer a:hover {
    color: #a6d4ec
}

#footer .foot-wrap {
    overflow: hidden;
    padding: 10px;
}

#footer .info {
    font-size: 11px;
    margin-bottom: 15px;
}

#footer .foot-wrap .copyright {
    float: left;
}

#footer .foot-wrap .contact {
    float: right;
}

#footer .notes {
    border-top: 1px solid #3487b3;
    padding-top: 10px;
}

#footer .socials {
    float: right;
    width: 100px;
}

#footer .socials ul {
    list-style: none;
}

#footer .socials ul li {
    overflow: hidden;
    display: inline;
}

#footer .socials ul li a:hover {
    color: #e7f1f7
}

#footer .socials ul li a.fb:hover .icon {
    color: #3B5998;
}

#footer .socials ul li a.twitter:hover .icon {
    color: #00aced;
}

#footer .socials ul li .icon {
    float: right;
    margin-right: 10px;
    width: 25px;
    height: 25px;
    text-align: center;
    padding-top: 3px;
    color: #ccc
}

/* end layout */

/*simple grid */
[class*='col-'] {
    float: left;
}

.col-2-3 {
    width: 66.66%;
}

.col-1-3 {
    width: 33.33%;
}

.col-1-2 {
    width: 50%;
}

.grid:after {
    content: "";
    display: table;
    clear: both;
}

.col-1-2 {
    width: 50%;
}

.col-1-4 {
    width: 25%;
}

.col-1-8 {
    width: 12.5%;
}

[class*='col-'] {
    padding-right: 20px;
}

[class*='col-']:last-of-type {
    padding-right: 0;
}

/* announcement */
.announcement {
    background: #fffff0;
    border: 1px solid #eee;
    padding: 10px;
    -webkit-box-shadow: 2px 2px 0px rgba(50, 50, 50, 0.05);
    -moz-box-shadow: 2px 2px 0px rgba(50, 50, 50, 0.05);
    box-shadow: 2px 2px 0px rgba(50, 50, 50, 0.05);
    margin-bottom: 15px;
    overflow: hidden;
}

.announcement .title {
    margin-bottom: 5px;
    font-weight: bold;
}

.announcement .opt {
    float: right
}

.announcement .opt a {
    padding: 4px;
    background: #fff;
}

/* announcement page */
.announcement-wrap {
}

.announcement-wrap h2 {
    font-weight: 700;
    color: #397587
}

.announcement-wrap .date {
    float: right;
    color: #ccc
}

.announcement-wrap .text {
    margin-bottom: 30px;
    font-size: 12px;
}

.announcement-wrap .foot {
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.announcement-wrap .foot .views {
    float: right;
    color: #ccc
}

.announcement-wrap .attachments {
    margin-bottom: 15px
}

.attachments h3 {
    margin-bottom: 10px;
}

.attachments h3 .icon {
    color: #aaa;
    margin-right: 10px;
}

.attachments .size {
    font-size: 11px;
    color: #ccc;
    margin-left: 10px;
}

.attachments ol {
    margin-left: 20px
}

/* breadcrumbs */
.breadcrumbs {
    position: relative;
    z-index: 1;
    padding: 10px;
    color: #8d8d8d;
    font-size: 11px;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    margin: -25px -20px 15px -20px
}

.breadcrumbs a {
    color: #8d8d8d;
}

.breadcrumbs a:hover {
    color: #555
}

.breadcrumbs strong {
    color: #bbb;
}

.breadcrumbs li {
    display: inline;
    margin-right: 3px;
}

.breadcrumbs li + li:before {
    content: "/ ";
}

.breadcrumbs a:hover {
    text-decoration: underline
}

.breadcrumbs .back {
    position: absolute;
    right: 10px;
    top: 10px;
}

.breadcrumbs .back .icon {
    font-size: 14px;
}

.breadcrumbs .back a:hover {
    color: #0ea9d7;
    text-decoration: none;
}

.breadcrumbs .back a:before {
    content: "\e75d";
    font-family: "entypo";
    padding-right: 5px;
}

/* boxes */
.box {
    background: #fff;
    border: 1px solid #eee;
    padding: 10px;
    -webkit-box-shadow: 2px 2px 0px rgba(50, 50, 50, 0.05);
    -moz-box-shadow: 2px 2px 0px rgba(50, 50, 50, 0.05);
    box-shadow: 2px 2px 0px rgba(50, 50, 50, 0.05);
    margin-bottom: 15px;
}

.box.minheight {
    min-height: 240px;
}

.box .icon {
    color: #ccc
}

.boxes {
    overflow: hidden;
}

.boxes .box {
    border-color: #ddd;
    padding: 0;
}

.boxes .box h3 {
    padding: 5px 10px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.boxes .box .box-content {
    padding: 10px
}

.box ul.news {
    list-style: none
}

.box ul.news li {
    overflow: hidden
}

.box ul.news li .tag {
    float: right;
    background: #ddd;
    color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    padding: 2px 4px;
}

.box ul.news li .tag.red {
    background: #ed460c
}

.box ul.news li .tag.green {
    background: #4fbc57
}

.box ul.news li .date {
    color: #ccc;
    font-size: 11px;
}

.box ul.news li {
    margin-bottom: 4px;
}

.box ul.news li .sticky {
    float: right;
    margin-right: 5px;
    color: #bbb
}

.box table th {
    text-align: left;
    color: #ccc;
    padding: 4px;
    border-bottom: 1px solid #eee;
}

/* notifications */
div.success, div.error, div.notice {
    -webkit-box-shadow: 2px 2px 0px rgba(50, 50, 50, 0.05);
    -moz-box-shadow: 2px 2px 0px rgba(50, 50, 50, 0.05);
    box-shadow: 2px 2px 0px rgba(50, 50, 50, 0.05);
}

div.error {
    font-size: 13px;
    background: #fff3ee;
    padding: 10px;
    border-left: 3px solid #FC7479;
    margin-bottom: 10px;
}

div.success {
    font-size: 13px;
    background: #f9ffed;
    padding: 10px;
    border-left: 3px solid #99dc16;
    margin-bottom: 10px;
}

div.notice {
    font-size: 13px;
    background: #fff;
    padding: 10px;
    border-left: 3px solid #a4daff;
    margin-bottom: 10px;
    border-top: 1px solid #f8f8f8;
}

div.error .icon {
    color: #ed5959;
    font-size: 14px;
}

div.success .icon {
    color: #99dc16;
    font-size: 18px;
}

div.notice .icon {
    color: #a4daff;
    font-size: 18px;
}

div.notice.small, div.error.small, div.success.small {
    font-size: 11px;
    padding: 6px;
}

div.notice.small .icon, div.error.small .icon, div.success.small .icon {
    font-size: 15px
}

/* misc */
.icon {
    font-size: 16px;
    font-weight: normal;
}

select.select {
    width: 250px;
    margin-bottom: 3px;
}

input.inputtext {
    border: 1px solid #ccc;
    padding: 5px;
    color: #333;
    font: 11px 'Open Sans', Arial, sans-serif;
    width: 250px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

input.inputtext:focus {
    outline: none;
    border-color: #93d3f4;
    -webkit-box-shadow: 0px 0px 3px 3px #eef9ff;
    -moz-box-shadow: 0px 0px 3px 3px #eef9ff;
    box-shadow: 0px 0px 3px 3px #eef9ff;
}

input.inputtext.half {
    width: 140px;
}

input.inputtext.quarter {
    width: 60px;
}

.formnice select, select.select {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font: 11px 'Open Sans', Arial, sans-serif;
    color: #333;
    padding: 3px;
}

.formnice .btn.submit {
}

.formnice .btn.cancel {
}

textarea {
    border: 1px solid #ccc;
    padding: 5px;
    color: #333;
    font: 11px 'Open Sans', Arial, sans-serif;
    width: 250px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 100px;
}

textarea:focus {
    outline: none;
    border-color: #93d3f4;
    -webkit-box-shadow: 0px 0px 3px 3px #eef9ff;
    -moz-box-shadow: 0px 0px 3px 3px #eef9ff;
    box-shadow: 0px 0px 3px 3px #eef9ff;
}

.formnice textarea {
    height: 120px;
}

small.desc {
    display: block;
    margin-top: 4px;
    color: #888
}

span.desc {
    display: block;
    text-align: center;
    color: #ccc
}

/* content */
#content .lastlogin {
    text-align: right;
    margin-bottom: 15px;
    color: #c6c5c5;
}


table.uk-table-main { border:1px solid #eee !important; }
table.uk-table-main th { background:#f8f8f8; }

.uk-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 15px;
}
* + .uk-table {
    margin-top: 15px;
}
.uk-table th,
.uk-table td {
    padding: 8px 8px;
    border-bottom: 1px solid #dddddd;
}
.uk-table th {
    text-align: left;
}
.uk-table td {
    vertical-align: top;
}
.uk-table thead th {
    vertical-align: bottom;
}
.uk-table caption,
.uk-table tfoot {
    font-size: 12px;
    font-style: italic;
}
.uk-table caption {
    text-align: left;
    color: #aeaeae;
}
.uk-table tbody tr.uk-active {
    background: #f0f0f0;
}
.uk-table-middle,
.uk-table-middle td {
    vertical-align: middle !important;
}
.uk-table-striped tbody tr:nth-of-type(odd) {
    background: #fafafa;
}
.uk-table-condensed td {
    padding: 4px 8px;
}
.uk-table-hover tbody tr:hover {
    background: #f0f0f0;
}
/* main table */
table td {
    vertical-align: top;
    padding: 5px;
}

table td label input {
    vertical-align: top;
    margin-right: 2px
}

table.maintable {
    border: 1px solid #cecece;
    width: 100%;
    margin: 10px 0;
}

table.maintable tr {
}

table.maintable td {
    padding: 6px;
    border-bottom: 1px solid #e2e2e2;
    vertical-align: middle
}

table.maintable th {
    text-align: left;
    padding: 6px;
    font-weight: bold;
    font-size: 11px;
    color: #6d6d6d;
    background-color: #efefef;
    background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#fdfdfd), to(#eaeaea));
    background-image: -webkit-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    background-image: -moz-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    background-image: -ms-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    background-image: -o-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    background-image: -linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#eaeaea', GradientType=0); /* IE6-9 */
    border-bottom: 1px solid #cecece;
    border-top: 1px solid #cecece;
    text-shadow: 0px 1px 0px #fff;
    text-transform: uppercase;
}

table.maintable td.forum {
    background: #f2f2f2;
    color: #333;
    font-weight: bold;
}

table.maintable td .icon.topic {
    color: #666;
}

table.bordered td {
    border: 1px solid #e2e2e2
}

table.maintable.vtop td {
    vertical-align: top
}

table.maintable td.spacer {
    background-color: #efefef;
    background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#fdfdfd), to(#eaeaea));
    background-image: -webkit-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    background-image: -moz-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    background-image: -ms-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    background-image: -o-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    background-image: -linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#eaeaea', GradientType=0); /* IE6-9 */
    border-bottom: 1px solid #cecece;
    border-top: 1px solid #cecece;
    text-shadow: 0px 1px 0px #fff;
    text-transform: uppercase;
}

table.maintable th.centered, table td.centered {
    text-align: center
}

table.maintable tbody tr {
    background-color: #fff;
}

/*table.maintable tbody tr:nth-child(odd){ background-color:#f7f7f7; }*/

table.table {
    border: 1px solid #cecece;
    width: 100%;
    margin: 10px 0;
}

table.table tr {
    background: #fafafa
}

table.table td {
    padding: 5px;
    border-bottom: 1px solid #e2e2e2;
}

table.table th {
    text-align: left;
    padding: 5px;
    font-weight: bold;
    font-size: 12px;
    color: #666;
    background-color: #efefef;
    border-bottom: 1px solid #cecece;
    border-top: 1px solid #cecece;
    text-shadow: 0px 1px 0px #fff;
    text-transform: uppercase;
}

table.table th.centered, table td.centered {
    text-align: center
}

table.table tbody tr:nth-child(odd) {
    background-color: #fff;
}

table.table tr.new {
    background: #fefae7;
}

table.bordered {
    border-collapse: collapse;
}

table.bordered tr {
}

table.bordered th {
    border: 1px solid #e2e2e2;
    font-size: 11px;
}

table.compact th {
    font-size: 10px;
}

table.compact td {
    font-size: 11px;
}

table.borderless {
}

table.borderless tr {
    background: transparent !important;
}

table.borderless td, table.borderless th {
    border: none;
}

tr.hlchk {
    background: #fffcae !important;
}

/* clearfix */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* nice forms */
.formnice {
    background: #fff;
    border: 1px solid #efefef;
    margin-bottom: 10px;
}

.formnice div.row strong,
.formnice p strong {
    float: left;
    width: 150px;
    text-align: right;
    color: #666;
    font-weight: bold;
    margin-right: 10px;
    padding-top: 2px;
}

.formnice p, .formnice div.row {
    overflow: hidden
}

.formnice p .wrap,
.formnice div.row .wrap {
    margin-left: 160px;
}

.formnice div.row {
    border-bottom: 1px solid #eee;
    padding: 14px;
    background: #fff;
    margin: 0;
    color: #898177
}

.formnice div.row:last-child {
    border: none
}

.formnice div.submit {
    padding: 10px;
}

.zend_form {
    margin-bottom: 10px;
}

.zend_form dt {
    float: left;
    clear: left;
    width: 120px;
    margin-right: 10px;
    padding: 5px;
}

.zend_form dd {
    padding: 5px;
    margin-left: 135px;
}

.zend_form .zfpad {
}

/* button */
.btn {
    display: inline-block;
    *display: inline;
    padding: 4px 12px;
    margin-bottom: 0;
    *margin-left: .3em;
    font-size: 12px;
    line-height: 20px;
    color: #333333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    *background-color: #e6e6e6;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #cccccc;
    *border: 0;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
    color: #333333;
    background-color: #e6e6e6;
    *background-color: #d9d9d9;
}

.btn:active,
.btn.active {
    background-color: #cccccc 9;
}

.btn:first-child {
    *margin-left: 0;
}

.btn:hover,
.btn:focus {
    color: #333333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

.btn.active,
.btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.submit {
    background: #5ac9e8;
    background: -moz-linear-gradient(top, #5ac9e8 0%, #009ec3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5ac9e8), color-stop(100%, #009ec3));
    background: -webkit-linear-gradient(top, #5ac9e8 0%, #009ec3 100%);
    background: -o-linear-gradient(top, #5ac9e8 0%, #009ec3 100%);
    background: -ms-linear-gradient(top, #5ac9e8 0%, #009ec3 100%);
    background: linear-gradient(to bottom, #5ac9e8 0%, #009ec3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5ac9e8', endColorstr='#009ec3', GradientType=0);
    color: #fff;
    text-shadow: none;
}

.btn.submit:hover,
.btn.submit:focus,
.btn.submit:active,
.btn.submit.active,
.btn.submit.disabled,
.btn.submit[disabled] {
    color: #fff;
    background: #5ac9e8;
}

.btn.square {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.btn2 .icon {
    font-size: 12px
}

.btn.flat {
    background: #fff;
    color: #555;
    border-color: #fff
}

.btn.flat:hover {
    border-color: #eee
}

.btn.flat .icon {
    color: #aaa
}

div.opt {
    text-align: right;
    margin: 10px 0
}

div.opt a.btn:visited {
    color: #333
}

div.opt.thin {
    margin: 0;
}

div.opt.float {
    float: right
}

table.print th {
    text-align: left;
    padding: 10px;
    text-transform: uppercase
}

table.print td {
    border: 1px solid #eee;
}

table.noborder td {
    border: none
}

select.error {
    border: 1px solid red;
}

/* app form */
.appform {
    margin-top: 20px;
}

.appform h3 {
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid #efefef;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 12px;
    color: #2b8ac1
}

.appform .group {
    margin-bottom: 35px;
}

.appform .group:after {
    content: "";
    display: table;
    clear: both;
}

/* markupless clearfix */
.appform .group .row {
    padding: 10px;
    min-height: 85px;
    height: 80px;
    height: auto !important;
    position: relative;
}

.appform .group .row.half {
    float: left;
    width: 48%;
    margin-right: 10px;
}

.appform .group .row.clear {
    clear: both
}

.appform label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}

.appform .row .element .inputtext {
    width: 250px;
    margin-bottom: 3px;
    padding: 5px 7px;
    font-size: 13px;
}

.appform .row .element .inputtext.half {
    width: 100px;
}

.appform .row .element .inputtext.quarter {
    width: 125px;
}

.appform .row .element .help {
    display: block;
    font-size: 11px;
}

.appform .row .element .inputtext.disabled {
    background: #f1f1f1
}

.appform .row .element label {
    float: left;
    width: 50px;
    font-size: 12px;
}

.appform .row .element .select {
    margin-bottom: 3px;
    width: 250px;
}

.appform .row .element .select, .appform .row .element .select option {
    font-size: 12px;
}

select.select {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font: 11px 'Open Sans', Arial, sans-serif;
    color: #333;
    padding: 3px;
}

select.select optgroup {
    font-style: normal
}

.appform .reqMark {
    color: red
}

.appform .row .element .errormsg {
    display: block;
    font-size: 11px;
    color: red
}

.appform .row .element .inputtext.error, .appform .row .element select.error {
    border: 1px solid red;
}

.btn-submit {
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 700;
    height: 30px;
    padding: 0 12px;
    border-radius: 4px;
    /* border: 1px solid #3079ed; */
    border: 0px;
    color: #fff;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
    background-color: #4d90fe;
    background: -moz-linear-gradient(top, #5c9bfa 0%, #4786ed 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #5c9bfa), color-stop(100%, #4786ed));
    background: -webkit-linear-gradient(top, #5c9bfa 0%, #4786ed 100%);
    background: -o-linear-gradient(top, #5c9bfa 0%, #4786ed 100%);
    background: -ms-linear-gradient(top, #5c9bfa 0%, #4786ed 100%);
    background: linear-gradient(to bottom, #5cc0fa 0%, #47b8ed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c9bfa', endColorstr='#4786ed', GradientType=0);
}

.btn-submit:hover {
    /* border: 1px solid #2f5bb7; */
    border: 0px;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    background-color: #357ae8;
    background: -moz-linear-gradient(top, #5c9bfa 0%, #357ae8 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #5c9bfa), color-stop(100%, #357ae8));
    background: -webkit-linear-gradient(top, #5c9bfa 0%, #357ae8 100%);
    background: -o-linear-gradient(top, #5c9bfa 0%, #357ae8 100%);
    background: -ms-linear-gradient(top, #5c9bfa 0%, #357ae8 100%);
    background: linear-gradient(to bottom, #4dafe8 0%, #3fa6d6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c9bfa', endColorstr='#3da5d6', GradientType=0);
}

.btn-submit.disabled {
    background-color: #ccc;
    background: -moz-linear-gradient(top, #eee 0%, #ccc 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #eee), color-stop(100%, #ccc));
    background: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
    background: -o-linear-gradient(top, #eee 0%, #ccc 100%);
    background: -ms-linear-gradient(top, #eee 0%, #ccc 100%);
    background: linear-gradient(to bottom, #eee 0%, #ccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0);
}

.btn-cancel {
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 700;
    height: 30px;
    padding: 0 12px;
    border-radius: 4px;
    /* border: 1px solid #3079ed; */
    border: 0px;
    color: #fff;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
    background-color: #c1c1c1;
    background: -moz-linear-gradient(top, #ddd 0%, #c1c1c1 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #ddd), color-stop(100%, #c1c1c1));
    background: -webkit-linear-gradient(top, #ddd 0%, #f1f1f1 100%);
    background: -o-linear-gradient(top, #ddd 0%, #c1c1c1 100%);
    background: -ms-linear-gradient(top, #ddd 0%, #c1c1c1 100%);
    background: linear-gradient(to bottom, #ddd 0%, #c1c1c1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd, endColorstr=' #c1c1c1, GradientType=0);
}

.btn-cancel:hover {
    /* border: 1px solid #2f5bb7; */
    border: 0px;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    background-color: #bbb;
    background: -moz-linear-gradient(top, #ccc 0%, #bbb 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #bbb));
    background: -webkit-linear-gradient(top, #ccc 0%, #bbb 100%);
    background: -o-linear-gradient(top, #ccc 0%, #bbb 100%);
    background: -ms-linear-gradient(top, #ccc 0%, #bbb 100%);
    background: linear-gradient(to bottom, #ccc 0%, #bbb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc, endColorstr=' #bbb, GradientType=0);
}

.btn-cancel.disabled {
    background-color: #ccc;
    background: -moz-linear-gradient(top, #eee 0%, #ccc 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #eee), color-stop(100%, #ccc));
    background: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
    background: -o-linear-gradient(top, #eee 0%, #ccc 100%);
    background: -ms-linear-gradient(top, #eee 0%, #ccc 100%);
    background: linear-gradient(to bottom, #eee 0%, #ccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0);
}

/* rtl
	- inceif doesnt support RTL
	- removed
*/

/* tooltip */
.tooltip-info, .tooltip-inline {
    display: none;
}

.tooltip-info .icon, .tooltip-inline .icon {
    color: #189b26;
    float: left;
    font-size: 18px;
}

.tooltip-info .tooltip-content, .tooltip-inline .tooltip-content {
    margin-left: 30px;
}

.tooltip-inline {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 300px;
}

table tr:hover.info-rows .tooltip-inline {
    display: block;
}

.tooltip-info {
    /*padding:10px; background:#fefefe;*/
    position: absolute;
    width: 310px;
}

.appform .row:hover .tooltip-inline {
    display: block;
}

/* loading */
#loading {
    display: none;
    -webkit-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.25);
    -moz-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.25);
    box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.25);
    position: fixed;
    padding: 10px;
    top: 50%;
    left: 50%;
    color: #ccc;
    background: #fff;
    margin-left: -10px;
    z-index: 9999
}

.ui-tabs {
    background: transparent !important;
    border: none !important;
}

.ui-tabs .ui-widget-header {
    background: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.ui-tabs .ui-tabs-nav .ui-state-default {
    background: transparent;
    border: none;
}

.ui-tabs .ui-tabs-nav li:hover, .ui-tabs .ui-tabs-nav .ui-state-active {
    background: transparent;
    border-bottom: 4px solid #03b5eb !important;
}

.ui-tabs .ui-tabs-nav .ui-state-default a {
    color: #b1b1b1;
    font-family: 'Open Sans', Arial, sans-serif;
    outline: 0;
}

.ui-tabs .ui-tabs-nav .ui-state-active a {
    color: #333;
    font-family: 'Open Sans', Arial, sans-serif
}

.page-sec .notes {
    line-height: 1.6em;
    font-size: 13px;
    background: #e8f8ff;
    border: 1px solid #cbe9f5;
    padding: 10px;
    color: #2f5463;
    margin-bottom: 10px;

}

.text p {
    margin-bottom: 15px;
}

.text p:last-child {
    margin-bottom: 0
}

.toolbar {
    border-bottom: 1px solid #eee;
    margin: -20px -20px -20px 0;
    padding: 10px;
    background: #fafafa;
    position: absolute;
    top: 20px;
    right: 20px;
    left:0;
}

#content.fixed .toolbar {
    left: 250px;
}

.toolbar h2 {
    padding: 0;
    margin: 0;
    font-size: 18px;
}

.page-sec {
    margin-bottom: 15px;
    font-weight: 400
}

.page-sec .disclaimer {
    margin: 20px 0;
}

.page-sec .disclaimer strong {
    color: #555;
    text-decoration: underline;
}

.page-sec .content {
}

.page-sec ol {
    margin: 15px
}

.page-sec li {
    margin-bottom: 10px
}

.page-sec .hl {
    text-decoration: underline
}

.page-sec ul {
    margin: 15px 0 0 30px;
}

.page-sec h3 {
    color: #fff;
    background: #479fd1;
    padding: 5px 10px;
    border-left: 4px solid #8ad125;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
}

.page-sec .options {
    overflow: hidden;
    padding: 15px;
    background: #f6f6f6;
    margin: 10px 0;
}

.page-sec .options .icon {
    float: left;
    color: #58bcef;
    font-size: 24px;
    margin-top: 4px;
}

.page-sec .options ul {
    margin-left: 50px;
    margin-top: 0;
}

.page-sec .options ul li {
    margin-bottom: 4px;
}

.page-sec .reminder {
    font-size: 11px;
    color: #555;
}

.form-opt {
    margin-top: 10px;
    border: 1px solid #eee;
    padding: 10px;
}

.options {
    color: #aaa
}

.options .icon {
    color: #aaa
}

p.desc {
    font-size: 11px;
    margin-top: 5px;
    color: #aaa
}

ul.errors {
    margin: 10px 0 10px 15px;
}

ul.errors {
    color: red
}

.opt.time {
    color: #aaa
}

.opt strong {
    font-weight: bold
}

.reqMark {
    color: red
}

.textarea.large {
    width: 100%;
    height: 150px
}

ul.list {
    margin: 5px 0 0 20px
}

/* MESSAGING */
.messaging-wrap {
}

ul.tabs {
    list-style: none;
    border-bottom: 1px solid #ccc;
}

ul.tabs li {
    display: inline;
}

ul.tabs li:first-child a {
    margin-left: 10px;
}

ul.tabs li a {
    outline: none;
    float: left;
    margin-right: 1px;
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color: #bbb;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

ul.tabs li a.active {
    border: 1px solid #ccc;
    border-bottom: 0;
    background: #fff;
    position: relative;
    top: 1px;
}

ul.tabs li .icon {
    margin-right: 5px;
}

ul.tabs li a.active, ul li a:hover {
    color: #8d8d8d
}

.tab {
    display: none
}

.messaging-wrap .opt {
    float: right;
    margin: 0;
    padding: 0 10px 0 0
}

.messaging-content {
    padding: 10px;
}

.message-table tr.unread .msg {
    font-weight: bold
}

.ui-autocomplete .ui-menu-item {
    border: none !important;
    background: #fff !important;
    padding: 4px !important;
    font-size: 11px !important;
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
    border: none !important;
    background: #f1f1f1 !important;
    padding: 4px !important;
    font-size: 11px !important;
}

.req {
    color: red;
}

#messages-list {
    margin-bottom: 25px;
}

#messages-list .message-row {
    overflow: hidden;
    padding: 10px;
    position: relative
}

#messages-list .message-row .user {
    float: left;
    width: 130px;
}

#messages-list .message-row .photo {
    text-align: center;
}

#messages-list .message-row .photo .icon {
    font-size: 64px;
    color: #ccc;
}

#messages-list .message-row .head {
    border-bottom: 1px solid #eee;
    padding: 10px;
}

#messages-list .message-row .date {
    font-size: 11px;
    float: right;
    color: #bbb
}

#messages-list .message-row .name {
    font-weight: 700;
}

#messages-list .message-row .message {
    padding: 10px;
    padding: 10px;
    background: #fff
}

#messages-list .message-row .photo .thumb {
    border-radius: 5px
}

#messages-list .message-row .info {
    background: #fafafa;
    margin-left: 140px;
    border: 1px solid #eee;
}

#messages-list .student .info {
    border-color: #e1eaed;
    background: #f1f8f8
}

#messages-list .student .head {
    border-color: #e1eaed
}

#messages-list .student .name {
    color: #11a3b9
}

#messages-list .message-row .info::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 9px 8px 9px 0;
    border-color: transparent #fafafa;
    display: block;
    width: 0;
    z-index: 2;
    left: 143px;
    top: 20px;
}

#messages-list .message-row .user::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 9px 8px 9px 0;
    border-color: transparent #eee;
    display: block;
    width: 0;
    z-index: 1;
    left: 142px;
    top: 20px;
}

#messages-list .student .info::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 9px 8px 9px 0;
    border-color: transparent #f1f8f8;
    display: block;
    width: 0;
    z-index: 2;
    left: 143px;
    top: 20px;
}

#messages-list .student .user::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 9px 8px 9px 0;
    border-color: transparent #e1eaed;
    display: block;
    width: 0;
    z-index: 1;
    left: 142px;
    top: 20px;
}

/*tips*/
.tooltip .icon {
    color: #67d2ff;
    font-size: 11px;
}

.tooltip {
    cursor: pointer
}

.tooltiptext {
    display: none
}

/* misc */
.upper {
    text-transform: uppercase
}

.table th.center, .maintable th.center {
    text-align: center
}

.maintable td.border-side {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee
}

/* fieldset */
fieldset {
    border: 1px solid #bbb;
    padding: 10px;
}

legend {
    height: 20px;
    padding: 2px 5px;
    color: #FFFFFF;
    /*	font-weight: bold;*/
    font-size: 12px;
    background-color: #8f9a9f;
}

fieldset ul {
    margin-left: 30px;
}

/* dialog styling */
.ui-dialog, .ui-dialog-content {
    border: 1px solid #ccc;
    background-color: #fff !important;
    border-radius: 0;
    padding: 0;
}

.ui-dialog-titlebar {
    background-image: none !important;
    background-color: #f4f4f4;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    color: #555;
    font-size: 16px;
    font-family: Arial, sans-serif;
    padding: 8px !important;
}

.ui-dialog-titlebar-close {
    margin-right: 5px !important;
}

.ui-widget-content {
    color: #666;
    font: 400 12px 'Open Sans', Arial, sans-serif;
}

#progression {
    height: 80px;
    position: relative;
    margin-bottom: 20px;
}

#progression .line {
    height: 6px;
    background: #efefef;
    width: 100%;
    position: absolute;
    top: 30px;
}

#progression .step {
    float: left;
    text-align: center;
    width: 33%;
}

#progression .step .indicator {
    display: block;
    text-align: center;
    margin-top: 18px;
    margin-bottom: 5px;
    margin-left: -1px;
}

#progression .step .icon {
    background: #efefef;
    display: block;
    margin: 0 auto;
    height: 30px;
    width: 30px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    position: relative;
}

#progression .step .icon i {
    position: absolute;
    color: #bbd3e5;
    z-index: 1;
    left: 5px;
    font-size: 18px;
    top: 5px;
}

#progression .step .icon i.icon-check {
    color: #8fde04
}

#progression .step .icon.active i {
    color: #006fc0;
}

#progression .step .text {
    margin-top: 8px;
    display: block;
    font-size: 14px;
    color: #aaa
}

.ui-dialog .btn {
    font-size: 11px;
    padding: 2px 8px;
}

/* info table */
.infotable {
    border: 1px solid #eee;
}

.infotable td, .infotable th {
    padding: 5px;
    border: 1px solid #eee;
    vertical-align: top;
}

.infotable th {
    text-align: left;
    font-weight: bold;
    background: #fbfbfb;
}

.tooltiptext .table th {
    font-size: 10px;
}

.maintable td table {
    margin: 0;
}

.maintable td table tr {
}

.maintable td table tr td {
}

.maintable td table tr th {
    font-size: 10px;
    background: none;
    text-shadow: none;
}

.btn .icon {
    color: #bbb;
    font-size: 14px
}

.btn:hover .icon {
    color: #138eb1
}

ul.list {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.list li {
    margin-bottom: 0.5em;
}

ul.list li:before {
    content: "■";
    font-family: "Arial Black";
    color: #c3ddeb;
    padding-right: 10px;
}

ul.list li:hover:before {
    color: #52bdf5
}

hr {
    border-color: #e1e1e1;
    border-style: dotted;
    margin: 5px 0;
}

button.toggle-menu {
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    color: #158db1;
    top: 5px;
    left: -10px;
    position: absolute;
    font-size: 32px;
    display: none;
}

.midline {
    display: block;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
}

.midline:before,
.midline:after {
    background-color: #eee;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.midline:before {
    right: 0.5em;
    margin-left: -50%;
}

.midline:after {
    left: 0.5em;
    margin-right: -50%;
}

/* responsive */
@media only screen and (max-width: 768px) {
    .wrap {
        width: 100%;
        margin: 0 auto;
        padding: 0 10px;
    }

    .boxes .box {
        float: none;
        width: 100%;
    }

    #content.sidebar {
        margin: 40px 0 0 200px;
        padding: 20px 20px 120px 20px;
        background: #fff;
        min-height: 600px;
        height: 600px;
        height: auto !important;
    }

    .toolbar {
        border-bottom: 1px solid #eee;
        margin: -20px;
        padding: 10px;
        background: #fafafa;
        position: absolute;
        top: 20px;
        right: 20px;
        left: 220px;
    }

    .profile-photo img {
        width: 100%;
    }

    #main .wrap {
        padding: 0
    }

    #sidebar {
        position: absolute;
        width: 200px;
        top: 0;
        left: 0;
        background: #fff;
    }

    .col-2-3 {
        width: 100%;
    }

    .col-1-3 {
        width: 100%;
    }

    .col-1-2 {
        width: 100%;
    }

    [class*='col-'] {
        padding-right: 0px;
    }

    .breadcrumbs {
        position: relative;
        z-index: 1;
        padding: 10px;
        color: #8d8d8d;
        font-size: 11px;
        border-bottom: 1px solid #eee;
        text-transform: uppercase;
        margin: -15px -20px 15px -20px
    }

}

@media only screen and (max-width: 480px) {
    #header {
    }


    #content {
        width: auto;
        margin: 40px 0 0 0 !important;
        background: #fff;
    }

    button.toggle-menu {
        display: none
    }


    #sidebar {
        width: 0;
    }

    #main .wrap {
        padding: 0
    }

    #content .boxes {
        display: none
    }


    .appform .group .row.half {
        float: none;
        width: auto;
        margin: 0;
    }

    .appform .group .row select {
        width: 230px;
    }

    .messaging-wrap .opt {
        float: none;
        margin: 0 0 10px 0;
        padding: 0 5px 0 0
    }

    ul.tabs {
        list-style: none;
        border-bottom: 1px solid #ccc;
    }

    ul.tabs li {
        display: inline;
    }

    ul.tabs li:first-child a {
        margin-left: 10px;
    }

    ul.tabs li a {
        outline: none;
        float: left;
        margin-right: 1px;
        padding: 5px 10px;
        text-align: center;
        text-transform: uppercase;
        font-size: 12px;
        color: #bbb;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    ul.tabs li a.active {
        border: 1px solid #ccc;
        border-bottom: 0;
        background: #fff;
        position: relative;
        top: 1px;
    }

    ul.tabs li .icon {
        margin-right: 5px;
    }

    ul.tabs li a.active, ul li a:hover {
        color: #8d8d8d
    }

    table.maintable {
        overflow-x: auto;
        display: block;
    }

    .toolbar {
        border-bottom: 1px solid #eee;
        margin: -20px 0;
        padding: 10px;
        background: #fafafa;
        position: absolute;
        top: 20px;
        right: 0px;
        left: 0px;
    }

    .col-2-3 {
        width: 100%;
    }

    .col-1-3 {
        width: 50%;
    }

    .col-1-2 {
        width: 100%;
    }

    [class*='col-'] {
        padding-right: 0px;
    }

    .breadcrumbs {
        position: relative;
        z-index: 1;
        padding: 10px;
        color: #8d8d8d;
        font-size: 11px;
        border-bottom: 1px solid #eee;
        text-transform: uppercase;
        margin: -15px -20px 15px -20px
    }
}

/* high-res/retina-specific */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
    #header .logo {
        background: url('../images/logo2x.png') no-repeat;
        background-size: 114px 30px;
    }
}

/* Use x3 images for iPhone 6 plus / Samsung S5 and similar devices */
@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 3dppx), /* Default way */
only screen and (min-resolution: 350dpi) /* dppx fallback */ {
    #header .logo {
        background: url('../images/logo3x.png') no-repeat;
        background-size: 114px 30px;
    }
}

/* app form */
.appform {
    margin-top: 0px;
}

.appform h3 {
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 14px;
    color: #2b8ac1
}

.appform .group {
    margin-bottom: 35px;
}

.appform .group:after {
    content: "";
    display: table;
    clear: both;
}

/* markupless clearfix */
.appform .group .row {
    padding: 10px;
    min-height: 85px;
    height: 80px;
    height: auto !important;
}

.appform .group .row.half {
    float: left;
    width: 48%;
    margin-right: 10px;
}

.appform .group .row.clear {
    clear: both
}

.appform label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
}

.appform .row .element .inputtext {
    width: 98%;
    margin-bottom: 3px;
    padding: 5px 7px;
    font-size: 13px;
}

.appform .row .element .inputradio {
    width: 98%;
    margin-bottom: 3px;
    padding: 5px 7px;
    font-size: 13px;
}

.appform .row .element .inputtext.half {
    width: 250px;
}

.appform .row .element .inputtext.quarter {
    width: 125px;
}

.appform .row .element .help {
    display: block;
    font-size: 11px;
}

.appform .row .element .inputtext.disabled {
    background: #f1f1f1
}

.appform .row .element label {
    float: left;
    width: 50px;
    font-size: 12px;
}

.appform .row .element .select, .appform .row .element .select option {
    font-size: 13px;
}

select.select {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font: 11px 'Open Sans', Arial, sans-serif;
    color: #333;
    padding: 3px;
}

.appform .reqMark {
    color: red
}

.appform .row .element .errormsg {
    display: block;
    font-size: 11px;
    color: red
}

.appform .row .element .inputtext.error, .appform .row .element select.error {
    border: 1px solid red;
}

input[type=text], input[type=password],select {
    height: 28px;
    font-size: 12px;
    margin-bottom: 5px;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #ccd6dd;

    /* border-radius: 2px; */
    padding: 0 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family:  'Open Sans', Arial, sans-serif;
    box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
}

input[type=text]:focus, input[type=password]:focus {
    border: 1px solid #56b4ef;
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.05),0 0 8px rgba(82,168,236,0.6)
}



/*input[type=text], input[type=radio], select {
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    color: #333333;
    font: 12px 'Open Sans', Arial, sans-serif;
    padding: 3px;
    margin-bottom: 3px;
}

input[type=text]:focus, input[type=password]:focus {
    border: 1px solid #56b4ef;
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.05),0 0 8px rgba(82,168,236,0.6)
}

input[type=text] {
    width: 250px;
}*/

textarea {
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    color: #333333;
    font: 12px 'Open Sans', Arial, sans-serif;
    padding: 3px;
    height: 100px;
    width: 250px;
}

.loginselect {
     border: 1px solid #CCCCCC;
     border-radius: 3px;
     color: #333333;
     font: 13px 'Open Sans', Arial, sans-serif;
     padding: 3px;
     width: 100%;
     height: 30px;
     background-color: #f8f8f8;
     margin-bottom: 4px;
 }

.loginselect:focus {
    border: 1px solid #56b4ef;
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.05),0 0 8px rgba(82,168,236,0.6)
}

.btn-submit {
    text-align: center;
    font-size: 12px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 700;
    height: 32px;
    padding: 0 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 0px;
    color: #fff;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
    background-color: #0198cd;
    background: -moz-linear-gradient(top, #4bbbe8 0%, #0198cd 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #4bbbe8), color-stop(100%, #0198cd));
    background: -webkit-linear-gradient(top, #4bbbe8 0%, #0198cd 100%);
    background: -o-linear-gradient(top, #4bbbe8 0%, #0198cd 100%);
    background: -ms-linear-gradient(top, #4bbbe8 0%, #0198cd 100%);
    background: linear-gradient(to bottom, #4bbbe8 0%, #0198cd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c9bfa', endColorstr='#4786ed', GradientType=0);
}

.btn-submit:hover {
    border: 0px;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    background-color: #357ae8;
    background: -moz-linear-gradient(top, #4bbbe8 0%, #017ba6 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #4bbbe8), color-stop(100%, #017ba6));
    background: -webkit-linear-gradient(top, #4bbbe8 0%, #017ba6 100%);
    background: -o-linear-gradient(top, #4bbbe8 0%, #017ba6 100%);
    background: -ms-linear-gradient(top, #4bbbe8 0%, #017ba6 100%);
    background: linear-gradient(to bottom, #4bbbe8 0%, #017ba6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4bbbe8, endColorstr=' #017ba6, GradientType=0);
}

.btn-submit.disabled {
    background-color: #ccc;
    background: -moz-linear-gradient(top, #eee 0%, #ccc 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #eee), color-stop(100%, #ccc));
    background: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
    background: -o-linear-gradient(top, #eee 0%, #ccc 100%);
    background: -ms-linear-gradient(top, #eee 0%, #ccc 100%);
    background: linear-gradient(to bottom, #eee 0%, #ccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0);
}

.btn-submit.disabled, .btn-submit.disabled:hover {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ccc 0%, #ddd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccc), color-stop(100%, #ddd));
    background: -webkit-linear-gradient(top, #ccc 0%, #ddd 100%);
    background: -o-linear-gradient(top, #ccc 0%, #ddd 100%);
    background: -ms-linear-gradient(top, #ccc 0%, #ddd 100%);
    background: linear-gradient(to bottom, #ccc 0%, #ddd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc, endColorstr=' #ddd, GradientType=0);
    color: #777;
}

#declaration-wrap { overflow:hidden; margin-bottom:20px; }
.agree-wrap { overflow:hidden; margin-bottom:10px; }
#declaration-wrap .checkbox, .agree-wrap .checkbox { float:left; }
#declaration-wrap .text, .agree-wrap .text { margin-left:25px; }
#declaration-wrap .text p { line-height:1.8em }


#mainmenu { background:#398fd8; }
.dropmenu,
.dropmenu ul,
.dropmenu ul li,
.dropmenu ul li a,
.dropmenu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.dropmenu:after,
.dropmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.dropmenu #menu-button {
    display: none;
}
.dropmenu {
    width: auto;
    font-family: 'Open Sans', sans-serif;
    line-height: 1;
    background: #ffffff;
}
.dropmenu > ul > li {
    float: left;
}
.dropmenu.align-center > ul {
    font-size: 0;
    text-align: center;
}
.dropmenu.align-center > ul > li {
    display: inline-block;
    float: none;
}
.dropmenu.align-center ul ul {
    text-align: left;
}
.dropmenu.align-right > ul > li {
    float: right;
}
.dropmenu.align-right ul ul {
    text-align: right;
}
.dropmenu > ul > li > a {
    padding: 20px;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff !important;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
}
.dropmenu > ul > li:hover > a,
.dropmenu > ul > li.active > a {
    color: #009ae1;
}
.dropmenu > ul > li.has-sub > a {
    padding-right: 25px;
}
.dropmenu > ul > li.has-sub > a::after {
    position: absolute;
    top: 21px;
    right: 10px;
    width: 4px;
    height: 4px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    content: "";
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: border-color 0.2s ease;
    -moz-transition: border-color 0.2s ease;
    -ms-transition: border-color 0.2s ease;
    -o-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
}
.dropmenu > ul > li.has-sub:hover > a::after {
    border-color: #009ae1;
}
.dropmenu ul ul {
    position: absolute;
    left: -9999px;
}
.dropmenu li:hover > ul {
    left: auto;
}
.dropmenu.align-right li:hover > ul {
    right: 0;
}
.dropmenu ul ul ul {
    margin-left: 100%;
    top: 0;
}
.dropmenu.align-right ul ul ul {
    margin-left: 0;
    margin-right: 100%;
}
.dropmenu ul ul li {
    height: 0;
    -webkit-transition: height .2s ease;
    -moz-transition: height .2s ease;
    -ms-transition: height .2s ease;
    -o-transition: height .2s ease;
    transition: height .2s ease;
}
.dropmenu ul li:hover > ul > li {
    height: 32px;
}
.dropmenu ul ul li a {
    padding: 10px 20px;
    width: 160px;
    font-size: 12px;
    background: #2774b5;
    text-decoration: none;
    color: #ccdfef !important;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
    text-transform:none !important;
}
.dropmenu ul ul li:hover > a,
.dropmenu ul ul li a:hover {
    color: #ffffff !important;
}
.dropmenu ul ul li.has-sub > a::after {
    position: absolute;
    top: 13px;
    right: 10px;
    width: 4px;
    height: 4px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    content: "";
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: border-color 0.2s ease;
    -moz-transition: border-color 0.2s ease;
    -ms-transition: border-color 0.2s ease;
    -o-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
}
.dropmenu.align-right ul ul li.has-sub > a::after {
    right: auto;
    left: 10px;
    border-bottom: 0;
    border-right: 0;
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
}
.dropmenu ul ul li.has-sub:hover > a::after {
    border-color: #ffffff;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    .dropmenu {
        width: 100%;
    }
    .dropmenu ul {
        width: 100%;
        display: none;
    }
    .dropmenu.align-center > ul,
    .dropmenu.align-right ul ul {
        text-align: left;
    }
    .dropmenu ul li,
    .dropmenu ul ul li,
    .dropmenu ul li:hover > ul > li {
        width: 100%;
        height: auto;
        border-top: 1px solid rgba(120, 120, 120, 0.15);
    }
    .dropmenu ul li a,
    .dropmenu ul ul li a {
        width: 100%;
    }
    .dropmenu > ul > li,
    .dropmenu.align-center > ul > li,
    .dropmenu.align-right > ul > li {
        float: none;
        display: block;
    }
    .dropmenu ul ul li a {
        padding: 20px 20px 20px 30px;
        font-size: 12px;
        color: #000000;
        background: none;
    }
    .dropmenu ul ul li:hover > a,
    .dropmenu ul ul li a:hover {
        color: #000000;
    }
    .dropmenu ul ul ul li a {
        padding-left: 40px;
    }
    .dropmenu ul ul,
    .dropmenu ul ul ul {
        position: relative;
        left: 0;
        right: auto;
        width: 100%;
        margin: 0;
    }
    .dropmenu > ul > li.has-sub > a::after,
    .dropmenu ul ul li.has-sub > a::after {
        display: none;
    }
    #menu-line {
        display: none;
    }
    .dropmenu #menu-button {
        display: block;
        padding: 20px;
        color: #fff;
        cursor: pointer;
        font-size: 12px;
        text-transform: uppercase;
    }
    .dropmenu #menu-button::after {
        content: '';
        position: absolute;
        top: 20px;
        right: 20px;
        display: block;
        width: 15px;
        height: 2px;
        background: #fff;
    }

    .dropmenu .submenu-button {
        position: absolute;
        z-index: 10;
        right: 0;
        top: 0;
        display: block;
        border-left: 1px solid rgba(120, 120, 120, 0.15);
        height: 52px;
        width: 52px;
        cursor: pointer;
    }
    .dropmenu .submenu-button::after {
        content: '';
        position: absolute;
        top: 21px;
        left: 26px;
        display: block;
        width: 1px;
        height: 11px;
        background: #fff;
        z-index: 99;
    }
    .dropmenu .submenu-button::before {
        content: '';
        position: absolute;
        left: 21px;
        top: 26px;
        display: block;
        width: 11px;
        height: 1px;
        background: #fff;
        z-index: 99;
    }
    .dropmenu .submenu-button.submenu-opened:after {
        display: none;
    }
}