/* general
-----------------------------------------------------------*/
/*@import url(http://fast.fonts.net/cssapi/8f185aaa-4269-4891-babd-019b4646757e.css);*/
html { font-size:62.5%; background-color:#fff } /* 10px */

* { /*font-size:16px;font-size:1.6rem;*/ line-height:1.5 }
body { font-size:1.4em; }   /* 14px */
body { margin:0em; color: #232323; }
/*body, input { font-family: "Gill Sans W04 Light", "Open Sans", Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; }*/
body { font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; }


h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family:"Avenir LT W01 55 Roman","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:normal; }
h1,h2,h3,h4,h5,h6 { line-height:1.272; margin-bottom:12px; margin-bottom:1.2rem }
h1, .h1 { font-size:3rem }
h2, .h2 { font-size:2.2rem }
h3, .h3 { font-size:1.8rem }
h4, h5, h6, .h4, .h5, .h6 { font-size:1.6rem }

p { margin:.6rem 0rem }
ol, ul { padding-left:3.4rem; margin:.6rem 0rem }
ul.flat { padding-left:2rem }
ul.decimal { list-style:decimal }
blockquote { border-left: solid 2px #ccc; padding-left: 10px; margin: 5px 20px; }
q, blockquote/*, i, em*/ { font-style: italic; font-family: "HelveticaNeue-LightItalic","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; }
/*q:before, q:after { content: ""; }*/
.label, label { color:#808080 ; font-size: 1.6rem; }
.greyed { color:#808080 }
.amber { color: #FC922D }
.red { color:#CD0A0A }
.yellow { color:#F0C142 }
.green { color:#0FBD00 }
.dativ { color: #ff00cc } /*pink*/

.v-line { border-left:solid 2px #ccc; }
.v2-line { border-left:solid 1px #232323; }
a, .link { color: #1088C9; text-decoration:none; cursor:pointer }
a:hover, .link:hover { color:#2175C4; text-decoration:underline }
.em { font-weight:bold }
.hidden { display: none !important; }
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* do not hgroup these */
::-webkit-input-placeholder  { color:#4094BE; font-style:italic; transition:color .25s ease; opacity:1 }
:-moz-placeholder  { color:#4094BE; font-style:italic; transition:color .25s ease; opacity:1 }
::-moz-placeholder  { color:#4094BE; font-style:italic; transition:color .25s ease; opacity:1 }
:-ms-input-placeholder { color:#4094BE; font-style:italic; transition:color .25s ease; opacity:1 }
:focus::-webkit-input-placeholder { color:#999 !important }
:focus:-moz-placeholder { color:#999 !important }
:focus::-moz-placeholder { color:#999 !important }
:focus:-ms-input-placeholder { color:#999 !important }    

/* Microsoft Edge */
.strike { text-decoration:line-through }

table { margin:0px; padding:0px; border-collapse:collapse; empty-cells:hide }
table td, table th { margin:0px; padding:5px; border:none 1px #ccc; vertical-align:top; }
table.compact td, table.compact th { padding-top:0px; padding-bottom:0px; }
table.compact td:not([colspan]) blockquote, table.compact td:not([colspan]) p { margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px }
table.visible td { border:solid 1px #ccc; }

.clearfix::after { content:""; visibility: hidden; display: block; height: 0; clear: both; font-size: 0; }
.inline { display:inline-block }
.right { text-align:right }
.left { text-align:left }
.center { text-align:center }
.nobr { white-space:nowrap }
tr.nobr > td { white-space:nowrap }
.fright { float:right }
.onlyprint { display:none; visibility:hidden }
.greyover::after { content:""; position:absolute; left:0px; top:0px; width:100%; height:100%; opacity: .8; background: #fff; }
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.icon-mid::before { vertical-align: sub; }
.icon-clear { padding-left:2.5rem !important; position:relative }
.icon-clear > [class^="icon-"]:first-of-type::before, .icon-clear > [class*=" icon-"]:first-of-type::before { position:absolute; left:0rem; }
.icon-clear > .label[class^="icon-"]::before, .icon-clear > .label[class*=" icon-"]::before { position:absolute; left:0rem; top:.3rem }
.h2 [class^="icon-"]::before, .h2 [class*=" icon-"]::before { vertical-align: text-bottom; line-height:1.4rem; font-size:1.6rem !important; }
.h1 [class^="icon-"]::before, .h1 [class*=" icon-"]::before,
.h2 [class^="icon-"]::before, .h2 [class*=" icon-"]::before,
.h3 [class^="icon-"]::before, .h3 [class*=" icon-"]::before,
h1 [class^="icon-"]::before, h1 [class*=" icon-"]::before,
h2 [class^="icon-"]::before, h2 [class*=" icon-"]::before,
h3 [class^="icon-"]::before, h3 [class*=" icon-"]::before {
    vertical-align: text-bottom
}
/*.icon-clear > .icon-mid::before { top:0.4rem; }*/
.link[class^="icon-"]:hover, .link[class*=" icon-"]:hover { text-decoration:none !important; }
[class^="icon-"]::before, [class*=" icon-"]::before { font-size:14px !important; line-height:1.5; vertical-align:top }
.icon-sml [class^="icon-"]::before, .icon-sml [class*=" icon-"]::before { font-weight: bold !important; font-size: 1em !important; top: .2em; }

/*this will work with a link*/
.close { float:right; cursor:pointer; position:relative; top:-.5rem; right:-.5rem; color:inherit }
.close:hover { color:#2175C4 }
a.close:hover { text-decoration:none }

.form { margin:1em 0em; }
.form label { text-align:left; }
.form > p.error { max-width:25em; margin:.6rem auto }
.form > p { margin:.6rem 0rem }
.form .field { margin: .6rem 0rem }
.form .field > label { min-width:9em; display:inline-block; vertical-align: top; padding:.5em 0em; font-size:inherit }

 form .input { position:relative; padding:0px; background-color:#fff; margin:0; display:inline-block; border: solid 1px #ddd; vertical-align:middle; width:20em }
 form .input[type=checkbox] { width:auto; }
.form .input.flat { position:relative; border-left-color:transparent;  border-right-color:transparent;  border-color:transparent; }
.form .input.flat::after { content:""; position:absolute; left:0; bottom:.4rem; border-bottom:solid 1px #ddd; width:100%; }
.form .input.wide { display:block; }
.form .input input, .form .input div[contenteditable=true], .form .input .val { width: 100%; padding:.6rem; margin: 0px; border: none; box-sizing: border-box; }
.form .input input[type=checkbox] { width:auto }
/*.form input, .form textarea, .form button { font-family: "Open Sans", Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; font-size:1em; }*/
.form input, .form textarea, button { font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:1em; }
.form input:hover, .form [contenteditable=true]:hover { outline:solid 1px orange; outline-offset:0px; }
.form .input.autocomp input { overflow:hidden; white-space:nowrap }
.form .input.dropdown { min-width:182px; }
.form .input.dropdown .icon-arrow-65 { float:right; padding:5px; }
.form .input.dropdown .val { width:auto; }
.form .input input[readonly] { background-color:#EEE; color:#666 }
.form .input input[readonly]:hover { outline:none }

.form .error, .error { color:#CD0A0A }
.form .input.error { border: solid 1px #BF2026; }
.form .input.error { border-color:#CD0A0A }
.form .input.error > label.error { color:#CD0A0A; border:solid 1px #ddd; position:absolute; top:-1px; right:-13em; width:12em; padding:.6rem .6rem .6rem .8rem; background:#eee; box-sizing:border-box }
.form .input.error > label.error::after { content:""; position:absolute; border-left:solid 1px #ddd; border-bottom:solid 1px #ddd; left:-7px; top:9px; width: 12px; height: 12px; background:#eee; transform:rotate(45deg); }
.form .summarybox { padding:1em; }
.form .summarytext {}

.input { position:relative; padding:0px; background-color:#fff; margin:0; display:inline-block; border: solid 1px #ddd; vertical-align:middle; }
.input input, .input div[contenteditable=true], .input .val, .input textarea { 
    width: 100%; padding:.6rem; margin: 0px; border: none; box-sizing: border-box; 
}
.input textarea:hover {
    outline: solid 1px #ffa500;
    outline-offset: 0px;
}
input, textarea, button {
    font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1em;
}
textarea {
    vertical-align: top
}

.button {  padding: .6rem 1.2rem; background-color:#1088C9; color:#fff; margin:.6rem 0px; border: solid 1px #ddd; display:inline-block; border-radius: 4px; }
.button.button-outline { background-color:inherit; color:inherit }
.button.button-outline:hover { background-color:#76a1ca; cursor:pointer; text-decoration:none }
.button:hover { background-color:#2175C4; cursor:pointer; text-decoration:none }
.button[disabled] { background-color:#CCC; }
.button.secondary { background-color:#9fb4c8 }
.button.secondary:hover { background-color:#76a1ca; cursor:pointer; text-decoration:none }

table.table { border-spacing: 0px; border-collapse:collapse; }
.table tr.label td { border-bottom: solid 1px #ddd }
.table tr.label td { color: #666; white-space: normal; }
.table td { vertical-align: top; padding: .3rem 1.5rem .3rem .5rem; }
.table td:first-child { padding-left:0px; }
.table td:not(:first-child) { border-left: solid 1px #ddd }
.table tr:hover:not(.label) td { background:#F8F8F8; /*box-shadow: inset 0rem -4rem 4rem 1rem #EEE;*/ }


/* custom jquery ui
-----------------------------------------------------------*/
.ui-helper-hidden-accessible { display:none; }
.ui-autocomplete { list-style:none; padding:0px; max-width:30rem; border: solid 1px #ccc; background:#fff; z-index:200000; padding:1rem; max-height:30rem; overflow-x:hidden; overflow-y:auto }
.ui-autocomplete .ui-menu-item { white-space:nowrap; overflow:hidden }
.ui-autocomplete h3.ui-menu-item { border-bottom:1px solid #d3d3d3; margin-bottom:.7rem; margin-top:1rem; pointer-events:none }
.ui-autocomplete h3.ui-menu-item:first-child { margin-top:0 }

.ui-menu-item a { font-size:1.4rem; color:inherit; }
.ui-menu-item a:hover { color:#1088C9; text-decoration: underline; }

.ui-widget-overlay { z-index:200000; opacity:.8; background:#fff }
.ui-dialog { z-index:300000 }
.ui-widget, .ui-widget .button { font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:1.4rem; }
.ui-widget-header { font-weight:normal; font-size:1.6rem }
.ui-dialog .ui-dialog-titlebar { background:none; border:none; border-bottom: solid 1px #ccc }
.ui-dialog .ui-dialog-titlebar-close { display:none; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 0px }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 0px }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 0px }
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 0px }


/* public (login etc)
-----------------------------------------------------------*/

.space { margin:10em 0em; }

/*html { background:radial-gradient(#fff,#eee) }*/
.public { text-align:center; padding:1em; min-width:200px; }
.public .logo img { max-width:100%; margin:1em 0em; border:0px }
.public .form .input { max-width:100%; }

.public .link { margin:.5em; }
.public .message { max-width:30em; margin-left:auto; margin-right:auto; white-space:normal }

.public .tnc#Brief ul { list-style:decimal; text-align:left; max-width:60em; margin:auto }
.public .tnc#Full { text-align:left; counter-reset: h3counter; max-width: 60em; margin: auto; }
.public .tnc#Full h3::before { counter-increment: h3counter; content: counter(h3counter) " "; }


/* private templates
-----------------------------------------------------------*/

/*html.student, .student > body, .student .private { min-height:100%; box-sizing:border-box; }*/ /*does not work with min-height*/
.private .vbar { position:fixed; top:0px; height:100%; margin-left:18rem; border-left: solid 1px #DDD; z-index:19000 }

.private .reminder { position:absolute; top:0; right:-1rem; min-width:1.5rem; height:1.5rem; line-height: 1.5rem; font-size:.9rem; text-align: center; box-sizing:border-box;
                                       background-color:#ffc4c4; border: solid 1px #CD0A0A; color:#232323 !important; padding:0px 2px;
                                        -moz-border-radius:0.8rem; -webkit-border-radius:0.8rem; border-radius:0.8rem;  
                                        -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
                                        -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
                                        box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
                                        }

.private { max-width:1024px; min-width:70rem; background-color: #fff; text-align:left; position:relative; margin:0px auto; padding:0rem 1rem 1rem 1rem; overflow: visible;}
.private .topmenu { border-bottom:solid 1px #ddd; padding-left: 18rem; padding-top:1rem; padding-right:1rem; height:5rem; line-height:4rem; vertical-align:middle; position:fixed; width:100%; max-width: 1024px; min-width:70rem; box-sizing:border-box; background-color: inherit; z-index: 200000; }
.private .topmenu.greyover::after { border-bottom: solid 1px #ddd; }
.private .topmenu .greyoverfix { display:none; height:1.5rem; width:100%; position:absolute; left:18.1rem; bottom:-1.6rem; }
.private .topmenu.greyover .greyoverfix { display:block; }
.private .topmenu > .collapsed { display:none; }
.private .topmenu > .logo { position:absolute; top:1rem; left:0rem; padding:0rem; width:18rem; height:3.9rem; border-right:solid 1px #ddd; border-bottom: solid 1px #ddd; box-sizing:content-box }
.ghost .private .topmenu > .logo { background-color:#ddd }
.private .topmenu > .logo img { max-width:17rem; max-height:3rem; left:.5rem; top:.4rem; position:absolute }
.private .topmenu .link { float:left; margin:0em .7rem; padding:1rem 0rem; display:inline-block; position:relative; color:inherit; text-transform: uppercase; }
.private .topmenu .link.fright { float:right; }
.private .topmenu .link:hover { text-decoration:none }
.private .topmenu .link:hover span:not(.icon-consolidate-all) { text-decoration:none; color:#1088C9 }
.private .topmenu .link.active { font-weight:bold; }
/*.private .topmenu > .link.active ::after { 
    content:""; background:#fff; /*url(/content/blue-trig.png) bottom right no-repeat;*/
    /*width:1.35rem; height:1.35rem; position:absolute; bottom:-.6rem; left:45%; box-sizing:border-box;
    border-right:solid 1px #000; border-bottom:solid 1px #000;
    -webkit-transform:rotate(45deg) !important; -o-transform:rotate(45deg) !important; transform:rotate(45deg);
}*/
.private .topmenu .link::after { 
    content:attr(reminders); display:block; position:relative; bottom:-.1rem; margin:auto;
    width:1.5rem; height:1.5rem; border: solid 1px #CCC; box-sizing:border-box; margin:auto; background-color:#fff;
    -moz-border-radius:0.8rem; -webkit-border-radius:0.8rem; border-radius:0.8rem;
    line-height: 1.3rem; font-size:1.1rem; padding-left: 3px; font-weight:normal; text-align:center; padding:0

}
.private .topmenu .link.active::after { background-color:#1088C9; border-color:#000 }
.private .topmenu .link:hover::after { border-color:#232323 }
.private .topmenu .link[reminders]:not(:hover):not(.active)::after { border-color:#CD0A0A; color:#CD0A0A; /*width:1.7rem; height:1.7rem; bottom:0*/ }

.private .topmenu .link::before { content:""; }
.private .topmenu .link.c1.active::before,.private .topmenu .link.c1:hover::before { width:100%; position:absolute; top:.4rem; left:0rem; border-bottom:solid 2px #EF2722 }
.private .topmenu .link.c2.active::before,.private .topmenu .link.c2:hover::before { width:100%; position:absolute; top:.4rem; left:0rem; border-bottom:solid 2px #00843A }
.private .topmenu .link.c3.active::before,.private .topmenu .link.c3:hover::before { width:100%; position:absolute; top:.4rem; left:0rem; border-bottom:solid 2px #940059 }
.private .topmenu .link.c4.active::before,.private .topmenu .link.c4:hover::before { width:100%; position:absolute; top:.4rem; left:0rem; border-bottom:solid 2px #F7879A }
.private .topmenu .link.c5.active::before,.private .topmenu .link.c5:hover::before { width:100%; position:absolute; top:.4rem; left:0rem; border-bottom:solid 2px #273994 }
.private .topmenu .link.c6.active::before,.private .topmenu .link.c6:hover::before { width:100%; position:absolute; top:.4rem; left:0rem; border-bottom:solid 2px #AF5C0E }
.private .topmenu .link.c7.active::before,.private .topmenu .link.c7:hover::before { width:100%; position:absolute; top:.4rem; left:0rem; border-bottom:solid 2px #0099DE }
.private .topmenu .link.c8.active::before,.private .topmenu .link.c8:hover::before { width:100%; position:absolute; top:.4rem; left:0rem; border-bottom:solid 2px #F7879A }
.private .topmenu .link.c9.active::before,.private .topmenu .link.c9:hover::before { width:100%; position:absolute; top:.4rem; left:0rem; border-bottom:solid 2px #8C9299 }
.private .topmenu .link.c1.active::after,.private .topmenu .link.c1:hover::after { background-color:#EF2722; color:#fff }
.private .topmenu .link.c2.active::after,.private .topmenu .link.c2:hover::after { background-color:#00843A; color:#fff }
.private .topmenu .link.c3.active::after,.private .topmenu .link.c3:hover::after { background-color:#940059; color:#fff }
.private .topmenu .link.c4.active::after,.private .topmenu .link.c4:hover::after { background-color:#F7879A; color:#fff }
.private .topmenu .link.c5.active::after,.private .topmenu .link.c5:hover::after { background-color:#273994; color:#fff }
.private .topmenu .link.c6.active::after,.private .topmenu .link.c6:hover::after { background-color:#AF5C0E; color:#fff }
.private .topmenu .link.c7.active::after,.private .topmenu .link.c7:hover::after { background-color:#0099DE; color:#fff }
.private .topmenu .link.c8.active::after,.private .topmenu .link.c8:hover::after { background-color:#F7879A; color:#fff }
.private .topmenu .link.c9.active::after,.private .topmenu .link.c9:hover::after { background-color:#8C9299; color:#fff }

@media (min-width: 1025px) {
    .private .topmenu > .links { display: block !important; font-size:11px; margin-top:5px }
    .private .topmenu .link:first-of-type { margin-left: 2.6rem; }
    .private .topmenu .divider { display: none; }
}
@media (max-width: 1025px) {
    .private .topmenu > .collapsed { display: block; position: absolute; top: 1rem; right: 3.2rem; }
    .private .topmenu > .collapsed::before { font-size: 2.1rem !important; color: #000; }
    .private .topmenu > .links { display: none; position: absolute; top: 4rem; right: 3rem; background-color: #fff; padding-left: 2rem; border: solid 1px #ccc; }
    .private .topmenu .divider { border-top: solid 1px #ccc; position: relative; left: -1rem; margin:.5rem 0rem; }
    .private .topmenu .link { display: block; float: none !important; padding: .5rem; }
    .private .topmenu .link { margin: 0rem; }
    .private .topmenu .link::after { position: absolute; left: -1.8rem; top: .2rem; margin: .5rem; }
    .private .topmenu .link::before { content: ""; display: none; }
}

.private .topmenu .form { margin: 0em }
.private .topmenu .button { margin:0em }

.private .leftmenu { position: fixed; top:0; padding-top:6rem; z-index:100001; width:19rem; padding-right:2rem; height:100%; overflow-y:auto; overflow-x:hidden; box-sizing:border-box }
.private .leftmenu > .link { position:relative; display:block; text-align:right; color:inherit; /*text-transform: uppercase;*/ margin-top:1rem; box-sizing:border-box; padding-right:.5rem; }
.private .leftmenu > .link:hover { color:#2175C4 }
.private .leftmenu > .link:hover::after { background:#2175C4; border-color:#000 }
.private .leftmenu > .link.active { font-weight:bold; }
.private .leftmenu > .link.greyed { color:#aaa }
.private .leftmenu > .link.greyed:hover { color:#aaa; text-decoration:none; }
.private .leftmenu > .link::after { 
    content:""; display:block; position:absolute; right:-1.7rem; top:.3rem;
    width:1.4rem; height:1.4rem; border: solid 1px #CCC; box-sizing:border-box; margin:auto; background-color:#fff;
    -moz-border-radius:0.8rem; -webkit-border-radius:0.8rem; border-radius:0.8rem; 
}
.private .leftmenu > .link.active::after { background-color:#1088C9; border-color:#000 }
.private .leftmenu > h2 { border-bottom: solid 1px #DDD; }
.private .leftmenu > h2:first-child { margin-top:1rem }

.private .leftmenu .form { margin:0px; width:16.5rem; }

.private > .content { padding-top:14rem; padding-left:4rem; margin-left: 18rem; position:relative }
.private > .content > h3 { margin-top:3.5rem }

.private .title { padding-left: 22rem; padding-top:1rem; padding-right:1rem; min-height:5rem; line-height:4rem; vertical-align:middle; position:fixed; top:5rem; width:100%; max-width: 1024px; min-width:70rem; box-sizing:border-box; background-color: inherit; z-index: 100000; }
.private .title { font-family:"Avenir LT W01 55 Roman","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:3rem; line-height:1.5; }
.private .title::before { content:""; border-left:solid 1px #ddd; position:absolute; left:18rem; top:0rem; height:100%; }
/*.private .title::after { content:""; border-bottom: solid 1px #ddd; height: 1px; width: 100%; position: absolute; bottom: -1px; left: 0px; margin-left: 22rem; box-sizing: border-box; max-width: 803px; }*/

.private .normal { font-size:1.4rem; }

.private .label { color:#808080; white-space:nowrap; margin-top:1.5rem; }
/*.private .label, .private .label * { font-size:2rem }*/

.private .link { }
.private .link:hover { }

.private .dropdown { font-size:1.4rem; line-height:1; display:inline-block; position:relative; /*vertical-align:top*/ }
.private .dropdown > * { vertical-align:middle; }
.private .dropdown ul { display:none; list-style:none; margin:0px; padding:0px; position:absolute; left:0; background-color:#fff; z-index:100000; border:solid 1px #ccc; min-width:5rem }
.private .dropdown li { font-size:1.4rem; padding:.5rem 1rem; white-space:nowrap }
.private .dropdown li a { display:block; }
.private .dropdown .icon-arrow-65::before { vertical-align:middle }


/* circle plugin
-----------------------------------------------------------*/
.circle { position:relative; width:2.4rem; height:2.4rem; }
.circle > #slice { position:absolute; width:2.4rem; height:2.4rem; clip:rect(0,2.4rem,2.4rem,1.2rem); }
.circle > #slice.gt50 { clip:rect(auto, auto, auto, auto); }
.circle > #slice > .pie { box-sizing:border-box; border: solid 4px #fc922d; width:2.4rem; height:2.4rem; clip:rect(0rem,1.2rem,2.4rem,0rem); position:absolute; -moz-border-radius:1.2rem; -webkit-border-radius:1.2rem; border-radius:1.2rem; }
.circle > #slice > .pie.fill { -moz-transform:rotate(180deg) !important; -webkit-transform:rotate(180deg) !important; -o-transform:rotate(180deg) !important; transform:rotate(180deg) !important; }
.circle.fill > .percent { display: none; }
.circle.fill > #slice > .pie { border: transparent; background-color: #c0c0c0; width:1em; height:1em; }
.circle > .outline { position:absolute; border: solid 4px #ddd; width:2.4rem; height:2.4rem; -moz-border-radius:1.2rem; -webkit-border-radius:1.2rem; border-radius:1.2rem; box-sizing:border-box }
.circle > .percent { position: absolute; display:block; top: 0rem; left: 0rem; font-size: .8rem; width:2.4rem; line-height:2.4rem; text-align:center; /*z-index: 1000;*/ }
.circle .complete.tick::after { content:url(/content/tick-green-20.png); position:absolute; left:.4rem; top:0rem }
.circle[last='100'] > #slice > .pie { border-color: #008000; }
.circle[last='100'] > .percent { color: #008000; }



/* tip plugin
-----------------------------------------------------------*/
.tip { padding:1rem; background:transparent; position:absolute; z-index:20000; max-width:30rem; }
.tip .tip-margin { border:solid 1px #999; box-shadow: 0 5px 10px rgba(0,0,0,.2); -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); position:relative; z-index:0; border-radius:3px; }
.tip .tip-contain { z-index:1; border: solid 1.5rem #fff; border-left-width:1.8rem; border-right-width:1.8rem; border-radius:inherit; background:#fff; box-shadow: 0px 0px 35px rgba(255, 255, 255, 0.58); }
.tip .tip-arrow { 
   display:none; z-index:-1; position:absolute; width:1.6rem; height:1.6rem; margin:-.8rem; box-sizing:border-box; border-bottom:solid 1px #999; border-left:solid 1px #999; background:#fff;
   box-shadow: 0 5px 10px rgba(0,0,0,.2); -webkit-box-shadow: 0 5px 5px rgba(0,0,0,.2);
}
.tip .tip-arrow.tip-left { display:block; top:50%; left:0rem; transform:rotate(45deg); box-shadow: 4px 4px 15px rgba(0,0,0,.2); -webkit-box-shadow: 4px 4px 15px rgba(0,0,0,.2); }
.tip .tip-arrow.tip-right { display:block; top:50%; right:0rem; transform:rotate(225deg); box-shadow: -4px -4px 15px rgba(0,0,0,.2); -webkit-box-shadow: -4px -4px 15px rgba(0,0,0,.2); }
.tip .tip-arrow.tip-top { display:block; left:50%; top:0rem; transform:rotate(135deg); box-shadow: 4px -4px 15px rgba(0,0,0,.2); -webkit-box-shadow: 4px -4px 15px rgba(0,0,0,.2); }
.tip .tip-arrow.tip-bottom { display:block; left:50%; bottom:0rem; transform:rotate(315deg); box-shadow: -4px 4px 15px rgba(0,0,0,.2); -webkit-box-shadow: -4px 4px 15px rgba(0,0,0,.2); }
.tip .tip-title { margin-top:.4rem; }



/* tabit plugin
-----------------------------------------------------------*/
.tabit > ul { position:relative; list-style:none; margin:0px; padding:0px; border-bottom: solid 1px #ddd }
.tabit > ul > li { position:relative; top:0px; display:inline-block; padding:1rem; border: solid 1px transparent; white-space:nowrap; }
.tabit > ul > li.selected { border: solid 1px #ddd; color:inherit }
.tabit > ul > li.selected::after { content:""; position:absolute; left:0px; bottom:-2px; background-color:#fff; height:4px; width:100% }


/* modal plugin
-----------------------------------------------------------*/
#Overlay { display:none; text-align:center; z-index:1000000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
#Modal { z-index:1000001; position: fixed; top:200px; left: 0px; width: 100%; display:inline-block; margin:auto; max-width:40rem; min-width:20rem; padding:2rem; color:#000; background:#FFF }
#Modal > .close { float:right; cursor:pointer; position:relative; top:-.5rem; right:-.5rem; }
#Modal > .close:hover { color:#2175C4 }


/* placeholder on contenteditable
-----------------------------------------------------------*/
[contenteditable][placeholder]:empty:before {
    content: attr(placeholder);
    color: #808080; 
}
[contenteditable][placeholder]:empty:focus:before {
    content: "";
}


/* Controls
-----------------------------------------------------------*/

.grade-comb { border-spacing: 1px; }
.grade-comb .sw { font-weight:bold; text-align:center }
.grade-comb .sw { min-width:2em; text-align:right; }
.grade-comb .main { position:relative; text-align: center; vertical-align: middle; width: 15rem;}
.grade-comb .main .scales { position: absolute; top: 0; white-space: nowrap; visibility:hidden; margin:0px; }
.grade-comb .main .scales > div { width: 3rem; display: block; cursor:pointer; text-align:center; float: left;}
.grade-comb .main .scales > div.sel { font-weight:bold }
.grade-comb .main .sw { font-weight:normal; /* position:absolute; */ width:100%; /* top: 30%; */ left:0px; display:inline-block; text-align:center }
.grade-comb .main .sw .gr { font-size:2em; }
.grade-comb .main .bg { font-size:8em; opacity: 0.1; position:absolute; width:100%; top: 7.5rem; line-height:0px; left:0px; display:inline-block; text-align:center  }
.grade-comb td { padding: .4em .4em; }

.grade-comp { }
.grade-comp .sw { white-space:nowrap; border:solid 1px #333; background:#00FB00; padding:0; border-radius:2rem; width:2.4rem; height:2.4rem; line-height:2.4rem; margin-top:-.3rem; text-align:center }
.grade-comp [section=language] .sw { background:#00FEFF }
.grade-comp .name { white-space:nowrap; width:10% }
.grade-comp .name > * { white-space:initial }
.grade-comp .name .autoline { color:#808080; margin-left:1rem; vertical-align:top; visibility:hidden }
.grade-comp .name:hover .autoline { visibility:visible; }
.grade-comp td { padding:.2rem 1.6rem .2rem 0 }
.grade-comp .breakdown table { empty-cells:show; border-collapse:separate; border-spacing:6px 0px; width:100%; color:#999 }
.grade-comp .breakdown td { font-size:1.4rem }
.grade-comp .breakdown th { font-size:1rem }
.grade-comp .breakdown .offset { width:1%; text-align:right; padding-right: 1.3rem; }
.grade-comp .breakdown td, .grade-comp .breakdown th { padding:0px; margin:0px }
.grade-comp .breakdown td > div, .grade-comp .breakdown th > div { display:none; }

.grade-detail { /*font-size:1.6rem*/ }
.grade-detail .label { color:inherit; border-bottom:none; }
.grade-detail .faded { color:#808080 }
.grade-detail td { padding:.2rem .8rem .2rem 0; vertical-align:baseline; position:relative; min-width:4rem }
.grade-detail td > .colhdr { position:absolute; bottom:100%; left:0; width:100%; box-sizing:border-box; padding-right:inherit; }
.grade-detail .ch.marked { display:inline-block; font-size:1.6rem; border:solid 1px #333; background:#7A81FF; padding:0; border-radius:2rem; width:3.4rem; height:3.4rem; line-height:3.4rem; margin-top:-.5rem; text-align:center }
.grade-detail .label { font-size:inherit }

.grade-list { margin:0; padding: 0 }
.grade-list td { margin:0; padding: 2px 0px; vertical-align:middle }
.grade-list .name { padding-right:0; white-space:nowrap }
.grade-list .line { width:90%; padding-right:0rem; height:2rem; }
.grade-list .line > div { position:relative; width:100%; height:0px; border:solid 1px #999; background:#999; overflow:visible  }
.grade-list .mark { position:absolute; width:2.4rem; margin: -.9rem 0 0 -1.2rem; border:solid 1px #232323; line-height:1.8rem; text-align:center; vertical-align:middle; display:inline-block; border-radius:3px; color:inherit; background:inherit }
.grade-list.single-set .mark { background-color:#333 !important; color:#fff; }
.grade-list.multiple-set .mark { background-color:#eee; color:#000 }
.grade-list.multiple-set .mark.active { background-color:#333 !important; color:#fff; }
.grade-list .line .tick { display:none; position:absolute; top:-5px; margin-left:-1px; border-left:solid 1px #999; border-right:solid 1px #999; width:0px; height:5px; color:#999; font-size:12px }
.grade-list .line .tick::after { content:attr(data-txt); position:absolute; top:-14px; line-height:14px; left:-2em; width:4em; text-align:center }
.grade-list .line:hover .tick { display:block }

.grade-list tr[data-type-depth='3'] { font-size:12px; }
.grade-list tr[data-type-depth='3'] .name { padding-left:2rem; }
.grade-list tr[data-type-depth='3'] .mark { width:1.8rem; margin-left:-.9rem; line-height:1.4rem; font-size:1.1rem; padding-right:1px; }


.attendance-bar { width:100%; padding-right:0rem; height:4rem; padding-top:1.4rem; position:relative; box-sizing:border-box }
.attendance-bar .mark { display:inline-block; position:absolute; width:3.4rem; margin: -.9rem 0 0 -1.7rem; border:solid 1px #232323; line-height:1.8rem; text-align:center; vertical-align:middle; background:rgba(255, 255, 255, 0.9); border-radius:3px; color:#fff; background:#333 }
.attendance-bar > div:not(.mark) { float:left; height:3px; text-align:center; }
.attendance-bar > .present { background-color: #008000; }
.attendance-bar > .other { background-color: #d5a600; }
.attendance-bar > .absent { background-color: #BF2026; }
.attendance-bar > div > .label { margin:auto; display:inline-block; margin-top:9px; }
.attendance-bar > div > .label.top { position:relative; top:-25px; margin-top:0 }
.attendance-bar > .green { background-color: #0FBD00; width:25% }
.attendance-bar > .yellow { background-color: #F0C142; width:15% }
.attendance-bar > .red { background-color: #CD0A0A; width:60% }



.cerfl { overflow-y:visible; display:inline-block; white-space:nowrap; position:relative; width:100%; box-sizing:border-box }
.cerfl .cerfl-title { display:none; position:absolute; top:-40rem; left:0; height:40rem; background:#fff; width:100%; margin:0; z-index:-1; text-align:center; z-index:100000 }
.cerfl.cerfl-open .cerfl-title { display:block }
.cerfl.cerfl-open:not(.cerfl-closing) .group { opacity:0; }
.cerfl .cerfl-title > div { position:absolute; bottom:0; left:0; width:100%; padding-bottom:1rem; }
.cerfl .cerfl-title h2 { margin: 0 }

.cerfl .cerfl-intro { display:block; position:absolute; left:50%; top:50%; max-width:50%; white-space:normal; margin-top:-20%; padding-right:1rem }
.cerfl .cerfl-intro ul { list-style:decimal }
.cerfl .cerfl-intro li { margin-bottom:.5rem }
.cerfl .cerfl-intro .mark { display:inline-block; width:2em; height:2em; box-sizing:border-box; border: solid 1px #999; border-radius:1em; background:#81f7f3; text-align:center; padding-top:.2em }
.cerfl .cerfl-intro i { white-space:nowrap }

.cerfl .contain { height:50em; margin-top:5.5rem; position:relative; }
.cerfl .zoom { display:inline-block; overflow:hidden; position:absolute; top:0; left:0; height:100%; box-sizing:border-box; z-index:1; border:solid 1px #ccc; width:8rem; border-right-width:0px; }
.cerfl .part {  box-sizing:border-box; padding:0; margin:0; position:relative }
.cerfl .part.A1 { background-color:#e5eaff; border-top:solid 1px #ccc; }
.cerfl .part.A2 { background-color:#D9E0FF; border-top:solid 1px #ccc; }
.cerfl .part.B1 { background-color:#edffed; border-top:solid 1px #ccc; }
.cerfl .part.B2 { background-color:#e1fbe1; border-top:solid 1px #ccc; }
.cerfl .part.C1 { background-color:#fff4e2; border-top:solid 1px #ccc; }
.cerfl .part.C2 { background-color:#FFEFD9; border-top:solid 1px #ccc; border-top-color:transparent }
.cerfl .part .hours { position:absolute; left:-3rem; top:50%; width:10rem; text-align:center; color:#999; font-size:1.1rem; 
                      -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform:rotate(90deg); -ms-transform-origin:50% 0%; -webkit-transform-origin:50% 0%; transform-origin:50% 0%; }
.cerfl .part .mid { position:absolute; top:50%; margin:0; padding:0; height:0; width:100%; overflow:visible; left:0; vertical-align:middle }
.cerfl .part .mid h2 { position:absolute; left:2.5rem; top:-2rem; line-height:4rem; height:4rem; margin:0; padding:0 }
.cerfl .part .mid h2 { cursor:pointer; }
.cerfl .part .mid h2 > span { position:relative; bottom:2px; left:-8px }
.cerfl .part .mid h2:hover { color:#1088C9 }
.cerfl .part .help .ttl { margin:0 0 0em 8rem; padding:0 }
.cerfl .part .help ul { margin:0 0 0 8rem; padding:0; column-count:3 }
.cerfl .part .help ul > li { line-height:1.2em; margin:0 1rem 0 2rem; white-space:normal; font-size:1.2rem; }
.cerfl.compact .part .help ul > li { font-size:1.1rem; line-height:1.1rem; }
.cerfl.compact .part .help .ttl { font-size:1.1rem; line-height:1.1rem }
.cerfl.compact .part .hours { font-size:.9rem; }

.cerfl.cerfl-open .zoom { width:100%; border-right-width:1px; z-index:10000 }
.cerfl .mid h2 > span { display:inline-block; line-height:2.2rem; height:2.2rem; width:2.2rem; vertical-align:middle; text-align:center; transition: all ease 0.3s }
.cerfl .mid h2 > span::before { vertical-align:baseline; }
.cerfl.cerfl-open .mid h2 > span {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
}

.cerfl .group { display:inline-block; height:100%; position:relative; margin-left:-.4rem; }
.cerfl .group:first-of-type { margin-left:8.4rem; }
.cerfl .group > h2 { position:absolute; left:0; top:-7.5rem; height:4rem; line-height:4rem; vertical-align:top; text-align:left; padding:0; display:inline-block; padding-left:.5rem; background: #fff; }
.cerfl .group:last-of-type { border-right:solid 1px #ccc }

.cerfl .bar { display:inline-block; height:100%; width:3.2rem; height:100%; box-sizing:border-box; position:relative; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc }
.cerfl .bar + .bar { margin-left:-.4rem }
.cerfl .bar::before { content:""; position:absolute; left:50%; top:0; height:100%; width:4px; margin-left:-2px; background:#CCC; z-index:1 }
.cerfl .bar .mark { position:absolute; left:50%; width:2em; height:2em; padding:0px; margin:0 0 -1em -1em; box-sizing:border-box; border: solid 1px #999; border-radius:1em; background:#000; z-index:40 }
.cerfl .bar > h2 { position:absolute; left:50%; top:-2.2rem; height:2rem; width:4rem; line-height:2rem; vertical-align:middle; text-align:center; padding:0; display:inline-block; margin:0 0 0 -2rem; background:transparent; font-size:1.6rem; color:#999; transition:all .4s ease; }
.cerfl .bar .mark::after { content:attr(data-txt); position:absolute; left:50%; bottom:-1px; width: 2em; margin:0 0 0 -1em; line-height:2em; vertical-align:middle; text-align:center; }
.cerfl .bar .mark.hidden { display:none; }
.cerfl .bar .mark:hover { border-color:#444 }
.cerfl .bar .mark-tip { display:none; }
.cerfl .bar .tick { display: none; position: absolute; left: 50%; margin-left: -5px; margin-bottom:-1px; border-top: solid 1px #999; border-bottom: solid 1px #999; width: 5px; height: 0px; color: #999; font-size: 12px; z-index:30 }
.cerfl .bar .tick::after { content:attr(data-txt); position:absolute; left:-5rem; line-height:1rem; top:-.5rem; width:4em; text-align:right }

.cerfl.cerfl-student .bar.bar-init > .mark { background:#fff !important; color:#333; cursor:default }
.cerfl.cerfl-student .bar.bar-init > .mark:hover { background: #fff !important; color: #333 }
.cerfl .bar.bar-init .mark:hover { border-color: #999 }
.cerfl.cerfl-student .bar.bar-init > h2 { cursor:default }
.cerfl.cerfl-student .bar.bar-init > h2:hover { color: #999 }
    
.cerfl .group-fade { border-color:#ddd }
.cerfl .group-fade .bar::before { background:#ccc; }
.cerfl .group-fade .bar > .mark { background:#eee !important; color:#bbb !important; border-color:#ccc }

/*single report view*/
.cerfl.cerfl-report .group:first-of-type { z-index:3; border-left:none; margin-left:8rem }
.cerfl.cerfl-report.cerfl-open .group:first-of-type { z-index:0; }
.cerfl.cerfl-report.cerfl-open .bar > .mark { visibility:hidden; }
.cerfl.cerfl-report .help .part { padding:0 }
.cerfl.cerfl-report .help h2 { left:2rem; }
.cerfl.cerfl-report .contain { margin-top:0 }
.cerfl.cerfl-report .group h2 { display:none }
.cerfl.cerfl-report .bar > .mark { background: #232323 !important; color:#fff; width:3em; margin-left:-1.5em }
.cerfl.cerfl-report .bar > .mark::after { content:attr(data-lvl) }
.cerfl.cerfl-report .bar:hover .tick { display:block; }


/*student overview*/
.cerfl.cerfl-student .group:first-of-type { margin-left:8rem; }
.cerfl.cerfl-student .bar > .mark { background: #444 !important; color:#fff; cursor:pointer; width: 3em; margin-left: -1.5em; }
.cerfl.cerfl-student .bar > .mark::after { content: attr(data-lvl) }
.cerfl.cerfl-student .bar > .mark.unseen::after { content: "?" }
.cerfl.cerfl-student .bar > .mark.unseen { bottom:0 !important }
.cerfl.cerfl-student .bar:not(.bar-init) { cursor:pointer }
.cerfl.cerfl-student .bar:not(.bar-init) > .mark:hover { background: #1088C9 !important; color:#000; }
.cerfl.cerfl-student .bar:not(.bar-init):hover > h2 { color:#1088C9 }
.cerfl.cerfl-student .bar:not(.bar-init):hover::before { background:#1088C9 }
.cerfl.cerfl-student .contain.overlap { margin-top:14rem }
.cerfl.cerfl-student .contain.overlap .group > h2 { transform: rotate(-45deg); transform-origin: top left; top: -6rem; left:-.4rem; background-color:transparent }

.railmenu { margin: 1rem auto; display:block; width:100%; font-size:1.2rem }
.railmenu > ul  { display:block; margin:0; padding:0; list-style:none; position:relative; /*text-align:center;*/ white-space:nowrap; width:100% }
.railmenu > ul > li { margin:0; padding:0 1rem; height:4rem; display:inline-block; white-space:nowrap; overflow:visible; position:relative; box-sizing:border-box; cursor:pointer }
.railmenu > ul > li.active { font-weight:bold }
.railmenu.active > ul > li:not(.active) { color:#999 }
.railmenu > ul > li::before { content:""; border-bottom:solid 1px #ccc; position:absolute; top:2.45rem; width:110%; left:-5% }
.railmenu > ul > li:first-child::before { width:55%; right:-5%; left:unset }
.railmenu > ul > li:last-child::before { width:55%; left:-5%; right:unset }
.railmenu > ul > li:only-child::before { display:none }
.railmenu > ul > li.active::after, .railmenu > ul > li:hover::after { background: #1088C9; border-color:#000 }
.railmenu > ul > li:hover { color: #1088C9 !important }
.railmenu > ul > li::after { content:""; display: block; position: absolute; left:50%; margin-left:-.6rem; top:1.9rem; width: 1.2rem; height: 1.2rem;
    border: solid 1px #CCC; box-sizing: border-box; background-color: #fff; -moz-border-radius: 0.8rem; -webkit-border-radius: 0.8rem; border-radius: 0.8rem;
    line-height: 1.3rem; font-size: 1.1rem; padding-left: 3px; font-weight: normal; text-align: center; padding: 0; }
.railmenu > ul > li > span { position:absolute; left:50%; width:20rem; margin-left:-10rem; text-align:center; }
.railmenu.alternate > ul > li { height:5.2rem; }
.railmenu.alternate > ul > li:nth-child(2n) > span { bottom:0; }

.railmenu > ul > li { max-width:25%; width:12.4rem; }
.railmenu.compact > ul > li { max-width: 10%; width:10rem }
.railmenu.compact.alternate > ul > li { max-width: 7%; width:6rem }

.railmenu.angled { padding-top: 4rem; margin-top:0; overflow: hidden; position:relative }
.railmenu.angled::after {
    content: ""; height: 2rem; width:100%; display: block; position: absolute; top: 0; left: 0;
    background: -webkit-linear-gradient(#fff,rgba(255, 255, 255, 0));
    background: -o-linear-gradient(rgba(#fff,255, 255, 255, 0));
    background: -moz-linear-gradient(#fff,rgba(255, 255, 255, 0));
    background: linear-gradient(#fff,rgba(255, 255, 255, 0));
}
.railmenu.angled > ul > li { max-width: 4%; width:3.5rem; height:3rem }
.railmenu.angled > ul > li > span { 
    width:auto; text-align:left; left:0; margin-left:0; 
    transform-origin: 1.9em -1.5rem; -ms-transform-origin: 1.9em -1.5rem; -webkit-transform-origin: 1.9em -1.5rem; 
    transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); 
}

.railmenu > ul { margin-left: -6rem }
.railmenu.angled > ul { margin-left: 0rem }
.railmenu.compact > ul  { margin-left: -3.6rem }
.railmenu.compact.alternate > ul { margin-left: -2.6rem }