@charset "UTF-8";
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i&subset=vietnamese');

body {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

.baner-company{
    min-height: 250px;
    background-color: #cccccc !important;
    /* background-size: !important; */
    background-position: center;
    background-repeat: no-repeat;
    width: 334px;
    /* height: 315px; */
}

.text_middle{
    vertical-align: middle !important;
    border-top: 16px solid #f5f5f5 !important; 
    
   
}
.text_middle p {
    font-family: Roboto;
    font-size: 16px;
    color: #344356;
    text-decoration: none solid rgb(52, 67, 86)
}

.remind{
    border-radius: 5px;
    background-color: #fff;
    margin-top: 26px;
    margin-left: 15px;
    margin-right: 15px;
    border: solid 1px hsla(0, 0%, 70%, .5); padding: 20px
}
.title_remind{
    font-size: 19px;
    font-weight: bolder;
    padding-bottom: 10px;
}
.remind_course{
    font-size: 15px;
    font-weight: bolder;
    padding-bottom: 10px;
}
.percent_remind{
    border-radius: 5px;
    background-color: #00bba9;
    height: 4px;
}
.remind_lesson{
    font-size: 15px;
    font-weight: bolder;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #cccccc;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block
}
audio,
canvas,
progress,
video {
    display: inline-block
}
audio:not([controls]) {
    display: none;
    height: 0
}
progress {
    vertical-align: baseline
}
[hidden],
template {
    display: none
}
a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

a:active,
a:hover {
    outline-width: 0
}
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}
b,
strong {
    font-weight: inherit;
    font-weight: bolder
}
dfn {
    font-style: italic
}
h1 {
    font-size: 2em;
    margin: .67em 0
}
mark {
    background-color: #ff0;
    color: #000
}
small {
    font-size: 80%
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}
sub {
    bottom: -.25em
}
sup {
    top: -.5em
}
img {
    border-style: none
}
svg:not(:root) {
    overflow: hidden
}
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}
figure {
    margin: 1em 40px
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}
button,
input,
optgroup,
select,
textarea {
    font: inherit;
    margin: 0
}
optgroup {
    font-weight: 700
}
button,
input {
    overflow: visible
}
button,
select {
    text-transform: none
}
[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}
fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}
textarea {
    overflow: auto
}
[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}
[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}
::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}
.u-hide {
    display: none!important
}
.foundation-mq {
    font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"
}
html {
    box-sizing: border-box;
    font-size: 100%
}
*,
:after,
:before {
    box-sizing: inherit
}
body {
    margin: 0;
    padding: 0;
    background: #fefefe;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    height: auto;
    line-height: 1.5;
    color: #0a0a0a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic
}
textarea {
    height: auto;
    min-height: 50px
}
select,
textarea {
    border-radius: 4px
}
select {
    width: 100%
}
.map_canvas embed,
.map_canvas img,
.map_canvas object,
.mqa-display embed,
.mqa-display img,
.mqa-display object {
    max-width: none!important
}
button {
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 4px;
    background: transparent;
    line-height: 1
}
[data-whatinput=mouse] button {
    outline: 0
}
.is-visible {
    display: block!important
}
.is-hidden {
    display: none!important
}
.row {
    max-width: 85rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5px;
}
.row:after,
.row:before {
    display: table;
    content: ' '
}
.row:after {
    clear: both
}
.row.collapse>.column,
.row.collapse>.columns {
    padding-right: 0;
    padding-left: 0
}
.row .row {
    margin-right: -.625rem;
    margin-left: -.625rem
}
.lesson {
    width: 10px;
    height: 15px;
    border: 1px solid #3d3d3d;
    margin-top: 3px;
}
.content_lesson {
    margin-left: 19px;
}

@media print,
screen and (min-width: 40em) {
    .row .row {
        margin-right: -.9375rem;
        margin-left: -.9375rem
    }
}
@media print,
screen and (min-width: 64em) {
    .row .row {
        margin-right: -.9375rem;
        margin-left: -.9375rem
    }
}
.row .row.collapse {
    margin-right: 0;
    margin-left: 0
}
.row.expanded {
    max-width: none
}
.row.expanded .row {
    margin-right: auto;
    margin-left: auto
}
.row.gutter-small>.column,
.row.gutter-small>.columns {
    padding-right: .625rem;
    padding-left: .625rem
}
.row.gutter-medium>.column,
.row.gutter-medium>.columns {
    padding-right: .9375rem;
    padding-left: .9375rem
}
.column,
.columns {
    width: 100%;
    float: left;
    padding-right: .625rem;
    padding-left: .625rem;
    margin-top: 3px;
}
@media print,
screen and (min-width: 40em) {
    .column,
    .columns {
        padding-right: .9375rem;
        padding-left: .9375rem
    }
}
.column:last-child:not(:first-child),
.columns:last-child:not(:first-child) {
    float: right
}
.column.end:last-child:last-child,
.end.columns:last-child:last-child {
    float: left
}
.column.row.row,
.row.row.columns {
    float: none
}
.row .column.row.row,
.row .row.row.columns {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0
}
.small-1 {
    width: 8.33333%
}
.small-push-1 {
    position: relative;
    left: 8.33333%
}
.small-pull-1 {
    position: relative;
    left: -8.33333%
}
.small-offset-0 {
    margin-left: 0
}
.small-2 {
    width: 16.66667%
}
.small-push-2 {
    position: relative;
    left: 16.66667%
}
.small-pull-2 {
    position: relative;
    left: -16.66667%
}
.small-offset-1 {
    margin-left: 8.33333%
}
.small-3 {
    width: 25%
}
.small-push-3 {
    position: relative;
    left: 25%
}
.small-pull-3 {
    position: relative;
    left: -25%
}
.small-offset-2 {
    margin-left: 16.66667%
}
.small-4 {
    width: 33.33333%
}
.small-push-4 {
    position: relative;
    left: 33.33333%
}
.small-pull-4 {
    position: relative;
    left: -33.33333%
}
.small-offset-3 {
    margin-left: 25%
}
.small-5 {
    width: 41.66667%
}
.small-push-5 {
    position: relative;
    left: 41.66667%
}
.small-pull-5 {
    position: relative;
    left: -41.66667%
}
.small-offset-4 {
    margin-left: 33.33333%
}
.small-6 {
    width: 50%
}
.small-push-6 {
    position: relative;
    left: 50%
}
.small-pull-6 {
    position: relative;
    left: -50%
}
.small-offset-5 {
    margin-left: 41.66667%
}
.small-7 {
    width: 58.33333%
}
.small-push-7 {
    position: relative;
    left: 58.33333%
}
.small-pull-7 {
    position: relative;
    left: -58.33333%
}
.small-offset-6 {
    margin-left: 50%
}
.small-8 {
    width: 66.66667%
}
.small-push-8 {
    position: relative;
    left: 66.66667%
}
.small-pull-8 {
    position: relative;
    left: -66.66667%
}
.small-offset-7 {
    margin-left: 58.33333%
}
.small-9 {
    width: 75%
}
.small-push-9 {
    position: relative;
    left: 75%
}
.small-pull-9 {
    position: relative;
    left: -75%
}
.small-offset-8 {
    margin-left: 66.66667%
}
.small-10 {
    width: 83.33333%
}
.small-push-10 {
    position: relative;
    left: 83.33333%
}
.small-pull-10 {
    position: relative;
    left: -83.33333%
}
.small-offset-9 {
    margin-left: 75%
}
.small-11 {
    width: 91.66667%
}
.small-push-11 {
    position: relative;
    left: 91.66667%
}
.small-pull-11 {
    position: relative;
    left: -91.66667%
}
.small-offset-10 {
    margin-left: 83.33333%
}
.small-12 {
    width: 100%
}
.small-offset-11 {
    margin-left: 91.66667%
}
.small-up-1>.column,
.small-up-1>.columns {
    float: left;
    width: 100%
}
.small-up-1>.column:nth-of-type(1n),
.small-up-1>.columns:nth-of-type(1n) {
    clear: none
}
.small-up-1>.column:nth-of-type(1n+1),
.small-up-1>.columns:nth-of-type(1n+1) {
    clear: both
}
.small-up-1>.column:last-child,
.small-up-1>.columns:last-child {
    float: left
}
.small-up-2>.column,
.small-up-2>.columns {
    float: left;
    width: 50%
}
.small-up-2>.column:nth-of-type(1n),
.small-up-2>.columns:nth-of-type(1n) {
    clear: none
}
.small-up-2>.column:nth-of-type(2n+1),
.small-up-2>.columns:nth-of-type(2n+1) {
    clear: both
}
.small-up-2>.column:last-child,
.small-up-2>.columns:last-child {
    float: left
}
.small-up-3>.column,
.small-up-3>.columns {
    float: left;
    width: 33.33333%
}
.small-up-3>.column:nth-of-type(1n),
.small-up-3>.columns:nth-of-type(1n) {
    clear: none
}
.small-up-3>.column:nth-of-type(3n+1),
.small-up-3>.columns:nth-of-type(3n+1) {
    clear: both
}
.small-up-3>.column:last-child,
.small-up-3>.columns:last-child {
    float: left
}
.small-up-4>.column,
.small-up-4>.columns {
    float: left;
    width: 25%
}
.small-up-4>.column:nth-of-type(1n),
.small-up-4>.columns:nth-of-type(1n) {
    clear: none
}
.small-up-4>.column:nth-of-type(4n+1),
.small-up-4>.columns:nth-of-type(4n+1) {
    clear: both
}
.small-up-4>.column:last-child,
.small-up-4>.columns:last-child {
    float: left
}
.small-up-5>.column,
.small-up-5>.columns {
    float: left;
    width: 20%
}
.small-up-5>.column:nth-of-type(1n),
.small-up-5>.columns:nth-of-type(1n) {
    clear: none
}
.small-up-5>.column:nth-of-type(5n+1),
.small-up-5>.columns:nth-of-type(5n+1) {
    clear: both
}
.small-up-5>.column:last-child,
.small-up-5>.columns:last-child {
    float: left
}
.small-up-6>.column,
.small-up-6>.columns {
    float: left;
    width: 16.66667%
}
.small-up-6>.column:nth-of-type(1n),
.small-up-6>.columns:nth-of-type(1n) {
    clear: none
}
.small-up-6>.column:nth-of-type(6n+1),
.small-up-6>.columns:nth-of-type(6n+1) {
    clear: both
}
.small-up-6>.column:last-child,
.small-up-6>.columns:last-child {
    float: left
}
.small-up-7>.column,
.small-up-7>.columns {
    float: left;
    width: 14.28571%
}
.small-up-7>.column:nth-of-type(1n),
.small-up-7>.columns:nth-of-type(1n) {
    clear: none
}
.small-up-7>.column:nth-of-type(7n+1),
.small-up-7>.columns:nth-of-type(7n+1) {
    clear: both
}
.small-up-7>.column:last-child,
.small-up-7>.columns:last-child {
    float: left
}
.small-up-8>.column,
.small-up-8>.columns {
    float: left;
    width: 12.5%
}
.small-up-8>.column:nth-of-type(1n),
.small-up-8>.columns:nth-of-type(1n) {
    clear: none
}
.small-up-8>.column:nth-of-type(8n+1),
.small-up-8>.columns:nth-of-type(8n+1) {
    clear: both
}
.small-up-8>.column:last-child,
.small-up-8>.columns:last-child {
    float: left
}
.small-collapse>.column,
.small-collapse>.columns {
    padding-right: 0;
    padding-left: 0
}
.expanded.row .small-collapse.row,
.small-collapse .row {
    margin-right: 0;
    margin-left: 0
}
.small-uncollapse>.column,
.small-uncollapse>.columns {
    padding-right: .625rem;
    padding-left: .625rem
}
.small-centered {
    margin-right: auto;
    margin-left: auto
}
.small-centered,
.small-centered:last-child:not(:first-child) {
    float: none;
    clear: both
}
.small-pull-0,
.small-push-0,
.small-uncentered {
    position: static;
    float: left;
    margin-right: 0;
    margin-left: 0
}
@media print,
screen and (min-width: 40em) {
    .medium-1 {
        width: 8.33333%
    }
    .medium-push-1 {
        position: relative;
        left: 8.33333%
    }
    .medium-pull-1 {
        position: relative;
        left: -8.33333%
    }
    .medium-offset-0 {
        margin-left: 0
    }
    .medium-2 {
        width: 16.66667%
    }
    .medium-push-2 {
        position: relative;
        left: 16.66667%
    }
    .medium-pull-2 {
        position: relative;
        left: -16.66667%
    }
    .medium-offset-1 {
        margin-left: 8.33333%
    }
    .medium-3 {
        width: 25%
    }
    .medium-push-3 {
        position: relative;
        left: 25%
    }
    .medium-pull-3 {
        position: relative;
        left: -25%
    }
    .medium-offset-2 {
        margin-left: 16.66667%
    }
    .medium-4 {
        width: 33.33333%
    }
    .medium-push-4 {
        position: relative;
        left: 33.33333%
    }
    .medium-pull-4 {
        position: relative;
        left: -33.33333%
    }
    .medium-offset-3 {
        margin-left: 25%
    }
    .medium-5 {
        width: 41.66667%
    }
    .medium-push-5 {
        position: relative;
        left: 41.66667%
    }
    .medium-pull-5 {
        position: relative;
        left: -41.66667%
    }
    .medium-offset-4 {
        margin-left: 33.33333%
    }
    .medium-6 {
        width: 50%
    }
    .medium-push-6 {
        position: relative;
        left: 50%
    }
    .medium-pull-6 {
        position: relative;
        left: -50%
    }
    .medium-offset-5 {
        margin-left: 41.66667%
    }
    .medium-7 {
        width: 58.33333%
    }
    .medium-push-7 {
        position: relative;
        left: 58.33333%
    }
    .medium-pull-7 {
        position: relative;
        left: -58.33333%
    }
    .medium-offset-6 {
        margin-left: 50%
    }
    .medium-8 {
        width: 66.66667%
    }
    .medium-push-8 {
        position: relative;
        left: 66.66667%
    }
    .medium-pull-8 {
        position: relative;
        left: -66.66667%
    }
    .medium-offset-7 {
        margin-left: 58.33333%
    }
    .medium-9 {
        width: 75%
    }
    .medium-push-9 {
        position: relative;
        left: 75%
    }
    .medium-pull-9 {
        position: relative;
        left: -75%
    }
    .medium-offset-8 {
        margin-left: 66.66667%
    }
    .medium-10 {
        width: 83.33333%
    }
    .medium-push-10 {
        position: relative;
        left: 83.33333%
    }
    .medium-pull-10 {
        position: relative;
        left: -83.33333%
    }
    .medium-offset-9 {
        margin-left: 75%
    }
    .medium-11 {
        width: 91.66667%
    }
    .medium-push-11 {
        position: relative;
        left: 91.66667%
    }
    .medium-pull-11 {
        position: relative;
        left: -91.66667%
    }
    .medium-offset-10 {
        margin-left: 83.33333%
    }
    .medium-12 {
        width: 100%
    }
    .medium-offset-11 {
        margin-left: 91.66667%
    }
    .medium-up-1>.column,
    .medium-up-1>.columns {
        float: left;
        width: 100%
    }
    .medium-up-1>.column:nth-of-type(1n),
    .medium-up-1>.columns:nth-of-type(1n) {
        clear: none
    }
    .medium-up-1>.column:nth-of-type(1n+1),
    .medium-up-1>.columns:nth-of-type(1n+1) {
        clear: both
    }
    .medium-up-1>.column:last-child,
    .medium-up-1>.columns:last-child {
        float: left
    }
    .medium-up-2>.column,
    .medium-up-2>.columns {
        float: left;
        width: 50%
    }
    .medium-up-2>.column:nth-of-type(1n),
    .medium-up-2>.columns:nth-of-type(1n) {
        clear: none
    }
    .medium-up-2>.column:nth-of-type(2n+1),
    .medium-up-2>.columns:nth-of-type(2n+1) {
        clear: both
    }
    .medium-up-2>.column:last-child,
    .medium-up-2>.columns:last-child {
        float: left
    }
    .medium-up-3>.column,
    .medium-up-3>.columns {
        float: left;
        width: 33.33333%
    }
    .medium-up-3>.column:nth-of-type(1n),
    .medium-up-3>.columns:nth-of-type(1n) {
        clear: none
    }
    .medium-up-3>.column:nth-of-type(3n+1),
    .medium-up-3>.columns:nth-of-type(3n+1) {
        clear: both
    }
    .medium-up-3>.column:last-child,
    .medium-up-3>.columns:last-child {
        float: left
    }
    .medium-up-4>.column,
    .medium-up-4>.columns {
        float: left;
        width: 25%
    }
    .medium-up-4>.column:nth-of-type(1n),
    .medium-up-4>.columns:nth-of-type(1n) {
        clear: none
    }
    .medium-up-4>.column:nth-of-type(4n+1),
    .medium-up-4>.columns:nth-of-type(4n+1) {
        clear: both
    }
    .medium-up-4>.column:last-child,
    .medium-up-4>.columns:last-child {
        float: left
    }
    .medium-up-5>.column,
    .medium-up-5>.columns {
        float: left;
        width: 20%
    }
    .medium-up-5>.column:nth-of-type(1n),
    .medium-up-5>.columns:nth-of-type(1n) {
        clear: none
    }
    .medium-up-5>.column:nth-of-type(5n+1),
    .medium-up-5>.columns:nth-of-type(5n+1) {
        clear: both
    }
    .medium-up-5>.column:last-child,
    .medium-up-5>.columns:last-child {
        float: left
    }
    .medium-up-6>.column,
    .medium-up-6>.columns {
        float: left;
        width: 16.66667%
    }
    .medium-up-6>.column:nth-of-type(1n),
    .medium-up-6>.columns:nth-of-type(1n) {
        clear: none
    }
    .medium-up-6>.column:nth-of-type(6n+1),
    .medium-up-6>.columns:nth-of-type(6n+1) {
        clear: both
    }
    .medium-up-6>.column:last-child,
    .medium-up-6>.columns:last-child {
        float: left
    }
    .medium-up-7>.column,
    .medium-up-7>.columns {
        float: left;
        width: 14.28571%
    }
    .medium-up-7>.column:nth-of-type(1n),
    .medium-up-7>.columns:nth-of-type(1n) {
        clear: none
    }
    .medium-up-7>.column:nth-of-type(7n+1),
    .medium-up-7>.columns:nth-of-type(7n+1) {
        clear: both
    }
    .medium-up-7>.column:last-child,
    .medium-up-7>.columns:last-child {
        float: left
    }
    .medium-up-8>.column,
    .medium-up-8>.columns {
        float: left;
        width: 12.5%
    }
    .medium-up-8>.column:nth-of-type(1n),
    .medium-up-8>.columns:nth-of-type(1n) {
        clear: none
    }
    .medium-up-8>.column:nth-of-type(8n+1),
    .medium-up-8>.columns:nth-of-type(8n+1) {
        clear: both
    }
    .medium-up-8>.column:last-child,
    .medium-up-8>.columns:last-child {
        float: left
    }
    .medium-collapse>.column,
    .medium-collapse>.columns {
        padding-right: 0;
        padding-left: 0
    }
    .expanded.row .medium-collapse.row,
    .medium-collapse .row {
        margin-right: 0;
        margin-left: 0
    }
    .medium-uncollapse>.column,
    .medium-uncollapse>.columns {
        padding-right: .9375rem;
        padding-left: .9375rem
    }
    .medium-centered {
        margin-right: auto;
        margin-left: auto
    }
    .medium-centered,
    .medium-centered:last-child:not(:first-child) {
        float: none;
        clear: both
    }
    .medium-pull-0,
    .medium-push-0,
    .medium-uncentered {
        position: static;
        float: left;
        margin-right: 0;
        margin-left: 0
    }
}
@media print,
screen and (min-width: 64em) {
    .large-1 {
        width: 8.33333%
    }
    .large-push-1 {
        position: relative;
        left: 8.33333%
    }
    .large-pull-1 {
        position: relative;
        left: -8.33333%
    }
    .large-offset-0 {
        margin-left: 0
    }
    .large-2 {
        width: 16.66667%
    }
    .large-push-2 {
        position: relative;
        left: 16.66667%
    }
    .large-pull-2 {
        position: relative;
        left: -16.66667%
    }
    .large-offset-1 {
        margin-left: 8.33333%
    }
    .large-3 {
        width: 25%
    }
    .large-push-3 {
        position: relative;
        left: 25%
    }
    .large-pull-3 {
        position: relative;
        left: -25%
    }
    .large-offset-2 {
        margin-left: 16.66667%
    }
    .large-4 {
        width: 36%
    }
    .large-push-4 {
        position: relative;
        left: 33.33333%
    }
    .large-pull-4 {
        position: relative;
        left: -33.33333%
    }
    .large-offset-3 {
        margin-left: 25%
    }
    .large-5 {
        width: 41.66667%
    }
    .large-push-5 {
        position: relative;
        left: 41.66667%
    }
    .large-pull-5 {
        position: relative;
        left: -41.66667%
    }
    .large-offset-4 {
        margin-left: 33.33333%
    }
    .large-6 {
        width: 50%
    }
    .large-push-6 {
        position: relative;
        left: 50%
    }
    .large-pull-6 {
        position: relative;
        left: -50%
    }
    .large-offset-5 {
        margin-left: 41.66667%
    }
    .large-7 {
        width: 58.33333%
    }
    .large-push-7 {
        position: relative;
        left: 58.33333%
    }
    .large-pull-7 {
        position: relative;
        left: -58.33333%
    }
    .large-offset-6 {
        margin-left: 50%
    }
    .large-8 {
        width: 64%
    }
    .large-push-8 {
        position: relative;
        left: 66.66667%
    }
    .large-pull-8 {
        position: relative;
        left: -66.66667%
    }
    .large-offset-7 {
        margin-left: 58.33333%
    }
    .large-9 {
        width: 75%
    }
    .large-push-9 {
        position: relative;
        left: 75%
    }
    .large-pull-9 {
        position: relative;
        left: -75%
    }
    .large-offset-8 {
        margin-left: 66.66667%
    }
    .large-10 {
        width: 83.33333%
    }
    .large-push-10 {
        position: relative;
        left: 83.33333%
    }
    .large-pull-10 {
        position: relative;
        left: -83.33333%
    }
    .large-offset-9 {
        margin-left: 75%
    }
    .large-11 {
        width: 91.66667%
    }
    .large-push-11 {
        position: relative;
        left: 91.66667%
    }
    .large-pull-11 {
        position: relative;
        left: -91.66667%
    }
    .large-offset-10 {
        margin-left: 83.33333%
    }
    .large-12 {
        width: 100%
    }
    .large-offset-11 {
        margin-left: 91.66667%
    }
    .large-up-1>.column,
    .large-up-1>.columns {
        float: left;
        width: 100%
    }
    .large-up-1>.column:nth-of-type(1n),
    .large-up-1>.columns:nth-of-type(1n) {
        clear: none
    }
    .large-up-1>.column:nth-of-type(1n+1),
    .large-up-1>.columns:nth-of-type(1n+1) {
        clear: both
    }
    .large-up-1>.column:last-child,
    .large-up-1>.columns:last-child {
        float: left
    }
    .large-up-2>.column,
    .large-up-2>.columns {
        float: left;
        width: 50%
    }
    .large-up-2>.column:nth-of-type(1n),
    .large-up-2>.columns:nth-of-type(1n) {
        clear: none
    }
    .large-up-2>.column:nth-of-type(2n+1),
    .large-up-2>.columns:nth-of-type(2n+1) {
        clear: both
    }
    .large-up-2>.column:last-child,
    .large-up-2>.columns:last-child {
        float: left
    }
    .large-up-3>.column,
    .large-up-3>.columns {
        float: left;
        width: 33.33333%
    }
    .large-up-3>.column:nth-of-type(1n),
    .large-up-3>.columns:nth-of-type(1n) {
        clear: none
    }
    .large-up-3>.column:nth-of-type(3n+1),
    .large-up-3>.columns:nth-of-type(3n+1) {
        clear: both
    }
    .large-up-3>.column:last-child,
    .large-up-3>.columns:last-child {
        float: left
    }
    .large-up-4>.column,
    .large-up-4>.columns {
        float: left;
        width: 25%
    }
    .large-up-4>.column:nth-of-type(1n),
    .large-up-4>.columns:nth-of-type(1n) {
        clear: none
    }
    .large-up-4>.column:nth-of-type(4n+1),
    .large-up-4>.columns:nth-of-type(4n+1) {
        clear: both
    }
    .large-up-4>.column:last-child,
    .large-up-4>.columns:last-child {
        float: left
    }
    .large-up-5>.column,
    .large-up-5>.columns {
        float: left;
        width: 20%
    }
    .large-up-5>.column:nth-of-type(1n),
    .large-up-5>.columns:nth-of-type(1n) {
        clear: none
    }
    .large-up-5>.column:nth-of-type(5n+1),
    .large-up-5>.columns:nth-of-type(5n+1) {
        clear: both
    }
    .large-up-5>.column:last-child,
    .large-up-5>.columns:last-child {
        float: left
    }
    .large-up-6>.column,
    .large-up-6>.columns {
        float: left;
        width: 16.66667%
    }
    .large-up-6>.column:nth-of-type(1n),
    .large-up-6>.columns:nth-of-type(1n) {
        clear: none
    }
    .large-up-6>.column:nth-of-type(6n+1),
    .large-up-6>.columns:nth-of-type(6n+1) {
        clear: both
    }
    .large-up-6>.column:last-child,
    .large-up-6>.columns:last-child {
        float: left
    }
    .large-up-7>.column,
    .large-up-7>.columns {
        float: left;
        width: 14.28571%
    }
    .large-up-7>.column:nth-of-type(1n),
    .large-up-7>.columns:nth-of-type(1n) {
        clear: none
    }
    .large-up-7>.column:nth-of-type(7n+1),
    .large-up-7>.columns:nth-of-type(7n+1) {
        clear: both
    }
    .large-up-7>.column:last-child,
    .large-up-7>.columns:last-child {
        float: left
    }
    .large-up-8>.column,
    .large-up-8>.columns {
        float: left;
        width: 12.5%
    }
    .large-up-8>.column:nth-of-type(1n),
    .large-up-8>.columns:nth-of-type(1n) {
        clear: none
    }
    .large-up-8>.column:nth-of-type(8n+1),
    .large-up-8>.columns:nth-of-type(8n+1) {
        clear: both
    }
    .large-up-8>.column:last-child,
    .large-up-8>.columns:last-child {
        float: left
    }
    .large-collapse>.column,
    .large-collapse>.columns {
        padding-right: 0;
        padding-left: 0
    }
    .expanded.row .large-collapse.row,
    .large-collapse .row {
        margin-right: 0;
        margin-left: 0
    }
    .large-uncollapse>.column,
    .large-uncollapse>.columns {
        padding-right: .9375rem;
        padding-left: .9375rem
    }
    .large-centered {
        margin-right: auto;
        margin-left: auto
    }
    .large-centered,
    .large-centered:last-child:not(:first-child) {
        float: none;
        clear: both
    }
    .large-pull-0,
    .large-push-0,
    .large-uncentered {
        position: static;
        float: left;
        margin-right: 0;
        margin-left: 0
    }
}
blockquote,
dd,
div,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
li,
ol,
p,
pre,
td,
th,
ul {
    /*margin: 0;*/
    padding: 0
}
p {
    margin-bottom: 1rem;
    font-size: inherit;
    line-height: 1.6;
    text-rendering: optimizeLegibility
}
em,
i {
    font-style: italic
}
b,
em,
i,
strong {
    line-height: inherit
}
b,
strong {
    font-weight: 700
}
small {
    font-size: 80%;
    line-height: inherit
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    color: inherit;
    text-rendering: optimizeLegibility
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
    line-height: 0;
    color: #cacaca
}
h1 {
    font-size: 1.5rem
}
h2 {
    font-size: 1.25rem
}
h3 {
    font-size: 1.1875rem
}
h4 {
    font-size: 1.125rem
}
h5 {
    font-size: 1.0625rem
}
h6 {
    font-size: 1rem
}
@media print,
screen and (min-width: 40em) {
    h1 {
        font-size: 3rem
    }
    h2 {
        font-size: 2.5rem
    }
    h3 {
        font-size: 1.9375rem
    }
    h4 {
        font-size: 1.5625rem
    }
    h5 {
        font-size: 1.25rem
    }
    h6 {
        font-size: 1rem
    }
}
a {
    line-height: inherit;
    color: #337899;
    text-decoration: none;
    cursor: pointer
}
a:focus,
a:hover {
    color: #2c6784
}
a img {
    border: 0
}
hr {
    clear: both;
    max-width: 75rem;
    height: 0;
    margin: 1.25rem auto;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #cacaca;
    border-left: 0
}
dl,
ol,
ul {
    margin-bottom: 1rem;
    list-style-position: outside;
    line-height: 1.6
}
li {
    font-size: inherit;
}
ul {
    list-style-type: disc
}
ol,
ul {
    margin-left: 1.25rem
}
ol ol,
ol ul,
ul ol,
ul ul {
    margin-left: 1.25rem;
    margin-bottom: 0
}
dl {
    margin-bottom: 1rem
}
dl dt {
    margin-bottom: .3rem;
    font-weight: 700
}
blockquote {
    margin: 0 0 1rem;
    padding: .5625rem 1.25rem 0 1.1875rem;
    border-left: 1px solid #cacaca
}
blockquote,
blockquote p {
    line-height: 1.6;
    color: #8a8a8a
}
cite {
    display: block;
    font-size: .8125rem;
    color: #8a8a8a
}
cite:before {
    content: "— "
}
abbr {
    border-bottom: 1px dotted #0a0a0a;
    color: #0a0a0a;
    cursor: help
}
code {
    padding: .125rem .3125rem .0625rem;
    border: 1px solid #cacaca;
    font-weight: 400
}
code,
kbd {
    background-color: #e6e6e6;
    font-family: Consolas, Liberation Mono, Courier, monospace;
    color: #0a0a0a
}
kbd {
    margin: 0;
    padding: .125rem .25rem 0;
    border-radius: 4px
}
.subheader {
    margin-top: .2rem;
    margin-bottom: .5rem;
    font-weight: 400;
    line-height: 1.4;
    color: #8a8a8a
}
.lead {
    font-size: 125%;
    line-height: 1.6
}
.stat {
    font-size: 2.5rem;
    line-height: 1
}
p+.stat {
    margin-top: -1rem
}
.no-bullet {
    margin-left: 0;
    list-style: none
}
.text-left {
    text-align: left
}
.text-right {
    text-align: right
}
.text-center {
    text-align: center;
    text-align: -webkit-center;
}
.text-justify {
    text-align: justify
}
@media print,
screen and (min-width: 40em) {
    .medium-text-left {
        text-align: left
    }
    .medium-text-right {
        text-align: right
    }
    .medium-text-center {
        text-align: center
    }
    .medium-text-justify {
        text-align: justify
    }
}
@media print,
screen and (min-width: 64em) {
    .large-text-left {
        text-align: left
    }
    .large-text-right {
        text-align: right
    }
    .large-text-center {
        text-align: center
    }
    .large-text-justify {
        text-align: justify
    }
}
.show-for-print {
    display: none!important
}
@media print {
    * {
        background: transparent!important;
        box-shadow: none!important;
        color: #000!important;
        text-shadow: none!important
    }
    .show-for-print {
        display: block!important
    }
    .hide-for-print {
        display: none!important
    }
    table.show-for-print {
        display: table!important
    }
    thead.show-for-print {
        display: table-header-group!important
    }
    tbody.show-for-print {
        display: table-row-group!important
    }
    tr.show-for-print {
        display: table-row!important
    }
    td.show-for-print,
    th.show-for-print {
        display: table-cell!important
    }
    a,
    a:visited {
        text-decoration: underline
    }
    a[href]:after {
        content: " (" attr(href) ")"
    }
    .ir a:after,
    a[href^='#']:after,
    a[href^='javascript:']:after {
        content: ''
    }
    abbr[title]:after {
        content: " (" attr(title) ")"
    }
    blockquote,
    pre {
        border: 1px solid #8a8a8a;
        page-break-inside: avoid
    }
    thead {
        display: table-header-group
    }
    img,
    tr {
        page-break-inside: avoid
    }
    img {
        max-width: 100%!important
    }
    @page {
        margin: .5cm
    }
    h2,
    h3,
    p {
        orphans: 3;
        widows: 3
    }
    h2,
    h3 {
        page-break-after: avoid
    }
}
[type=color],
[type=date],
[type=datetime-local],
[type=datetime],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 2.4375rem;
    margin: 0 0 1rem;
    padding: .5rem;
    border: 1px solid #cacaca;
    border-radius: 4px;
    background-color: #fefefe;
    box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, .1);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    color: #0a0a0a;
    transition: box-shadow .5s, border-color .25s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}
[type=color]:focus,
[type=date]:focus,
[type=datetime-local]:focus,
[type=datetime]:focus,
[type=email]:focus,
[type=month]:focus,
[type=number]:focus,
[type=password]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=time]:focus,
[type=url]:focus,
[type=week]:focus,
textarea:focus {
    outline: none;
    border: 1px solid #8a8a8a;
    background-color: #fefefe;
    box-shadow: 0 0 5px #cacaca;
    transition: box-shadow .5s, border-color .25s ease-in-out
}
textarea {
    max-width: 100%
}
textarea[rows] {
    height: auto
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #cacaca
}
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #cacaca
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #cacaca
}
input::placeholder,
textarea::placeholder {
    color: #cacaca
}
input:disabled,
input[readonly],
textarea:disabled,
textarea[readonly] {
    background-color: #e6e6e6;
    cursor: not-allowed
}
[type=button],
[type=submit] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 4px
}
input[type=search] {
    box-sizing: border-box
}
[type=checkbox],
[type=file],
[type=radio] {
    margin: 0 0 1rem
}
[type=checkbox]+label,
[type=radio]+label {
    display: inline-block;
    vertical-align: baseline;
    margin-left: 22px;
    margin-right: 1rem;
    margin-bottom: 0
}
[type=checkbox]+label[for],
[type=radio]+label[for] {
    cursor: pointer
}
label>[type=checkbox],
label>[type=radio] {
    margin-right: .5rem
}
[type=file] {
    width: 100%
}
label {
    display: block;
    margin: 0;
    /* font-size: .875rem; */
    font-weight: 300;
    line-height: 1.8;
    color: #0a0a0a
}
label.middle {
    margin: 0 0 1rem;
    padding: .5625rem 0
}
.help-text {
    margin-top: -.5rem;
    font-size: .8125rem;
    font-style: italic;
    color: #0a0a0a
}
.input-group {
    display: table;
    width: 100%;
    margin-bottom: 1rem
}
.input-group>:first-child {
    border-radius: 4px 0 0 4px
}
.input-group>:last-child>* {
    border-radius: 0 4px 4px 0
}
.input-group-button,
.input-group-button a,
.input-group-button button,
.input-group-button input,
.input-group-button label,
.input-group-field,
.input-group-label {
    margin: 0;
    white-space: nowrap;
    display: table-cell;
    vertical-align: middle
}
.input-group-label {
    padding: 0 1rem;
    border: 1px solid #cacaca;
    background: #e6e6e6;
    color: #0a0a0a;
    text-align: center;
    white-space: nowrap;
    width: 1%;
    height: 100%
}
.input-group-label:first-child {
    border-right: 0
}
.input-group-label:last-child {
    border-left: 0
}
.input-group-field {
    border-radius: 0;
    height: 2.5rem
}
.input-group-button {
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    width: 1%;
    height: 100%
}
.input-group-button a,
.input-group-button button,
.input-group-button input,
.input-group-button label {
    height: 2.5rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1rem
}
.input-group .input-group-button {
    display: table-cell
}
fieldset {
    margin: 0;
    padding: 0;
    border: 0
}
legend {
    max-width: 100%;
    margin-bottom: .5rem
}
.fieldset {
    margin: 1.125rem 0;
    padding: 1.25rem;
    border: 1px solid #cacaca
}
.fieldset legend {
    margin: 0;
    margin-left: -.1875rem;
    padding: 0 .1875rem;
    background: #fefefe
}
select {
    height: 2.4375rem;
    margin: 0 0 1rem;
    padding: .5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #cacaca;
    border-radius: 4px;
    background-color: #fefefe;
    font-family: inherit;
    font-size: 1rem;
    line-height: normal;
    color: #0a0a0a;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
    background-origin: content-box;
    background-position: right -1rem center;
    background-repeat: no-repeat;
    background-size: 9px 6px;
    padding-right: 1.5rem;
    transition: box-shadow .5s, border-color .25s ease-in-out
}
@media screen and (min-width: 0\0) {
    select {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==")
    }
}
select:focus {
    outline: none;
    border: 1px solid #8a8a8a;
    background-color: #fefefe;
    box-shadow: 0 0 5px #cacaca;
    transition: box-shadow .5s, border-color .25s ease-in-out
}
select:disabled {
    background-color: #e6e6e6;
    cursor: not-allowed
}
select::-ms-expand {
    display: none
}
select[multiple] {
    height: auto;
    background-image: none
}
.is-invalid-input:not(:focus) {
    border-color: #ec5840;
    background-color: #fcedeb
}
.is-invalid-input:not(:focus)::-webkit-input-placeholder {
    color: #ec5840
}
.is-invalid-input:not(:focus)::-moz-placeholder {
    color: #ec5840
}
.is-invalid-input:not(:focus):-ms-input-placeholder {
    color: #ec5840
}
.form-error,
.is-invalid-input:not(:focus)::placeholder,
.is-invalid-label {
    color: #ec5840
}
.form-error {
    display: none;
    margin-top: -.5rem;
    margin-bottom: 1rem;
    font-size: .75rem;
    font-weight: 700
}
.form-error.is-visible {
    display: block
}
.button {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem;
    padding: .85em 1em;
    -webkit-appearance: none;
    border: 1px solid transparent;
    transition: background-color .25s ease-out, color .25s ease-out;
    font-size: .9rem;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    background-color: #337899;
    color: #fefefe;
    border-radius: 4px
}
.btn-replay{
    padding: 6px 30px;
    display: inline-block;
    border-radius: 4px;
    background-color: #ffffff;
    background-size: cover;
    font-family: Roboto;
    font-size: 16px;
    color: #f5160a;
    text-decoration: none solid rgb(245, 22, 10);
    text-align: center;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}
.button-suggest{
    padding: 6px 30px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background-color: #ffffff;
    background-size: cover;
    font-family: Roboto;
    font-size: 12px;
    color: #5e5e5e;
    text-decoration: none solid rgb(94, 94, 94);
    text-align: center;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

[data-whatinput=mouse] .button {
    outline: 0
}
.button:focus,
.button:hover {
    background-color: #2b6682;
    color: #fefefe
}
.button.tiny {
    font-size: .6rem
}
.button.small {
    font-size: .75rem
}
.button.large {
    font-size: 1.25rem
}
.button.expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0
}
.button.primary {
    background-color: #337899;
    color: #fefefe;
    border-radius: 4px
}
.button.primary:focus,
.button.primary:hover {
    background-color: #29607a;
    color: #fefefe
}
.button.secondary {
    background-color: #00bba9;
    color: #fefefe;
    border-radius: 4px;
    
}
.button.secondary:focus,
.button.secondary:hover {
    background-color: #1a786d;
    color: #fefefe
}
.button.success {
    background-color: #3adb76;
    color: #fefefe;
    border-radius: 4px
}
.button.success:focus,
.button.success:hover {
    background-color: #22bb5b;
    color: #fefefe
}
.button.warning {
    background-color: #ffae00;
    color: #fefefe;
    border-radius: 4px
}
.button.warning:focus,
.button.warning:hover {
    background-color: #cc8b00;
    color: #fefefe
}
.button.alert {
    background-color: #ec5840;
    color: #fefefe;
    border-radius: 4px
}
.button.alert:focus,
.button.alert:hover {
    background-color: #da3116;
    color: #fefefe
}
.button.hollow {
    border: 1px solid #337899;
    color: #337899
}
.button.hollow,
.button.hollow:focus,
.button.hollow:hover {
    background-color: transparent
}
.button.hollow:focus,
.button.hollow:hover {
    border-color: #1a3c4d;
    color: #1a3c4d
}
.button.hollow.primary {
    border: 1px solid #337899;
    color: #337899
}
.button.hollow.primary:focus,
.button.hollow.primary:hover {
    border-color: #1a3c4d;
    color: #1a3c4d
}
.button.hollow.secondary {
    border: 1px solid #00bba9;
    color: #00bba9
}
.button.hollow.secondary:focus,
.button.hollow.secondary:hover {
    border-color: #114b44;
    color: #114b44
}
.button.hollow.success {
    border: 1px solid #3adb76;
    color: #3adb76
}
.button.hollow.success:focus,
.button.hollow.success:hover {
    border-color: #157539;
    color: #157539
}
.button.hollow.warning {
    border: 1px solid #ffae00;
    color: #ffae00
}
.button.hollow.warning:focus,
.button.hollow.warning:hover {
    border-color: #805700;
    color: #805700
}
.button.hollow.alert {
    border: 1px solid #ec5840;
    color: #ec5840
}
.button.hollow.alert:focus,
.button.hollow.alert:hover {
    border-color: #881f0e;
    color: #881f0e
}
.button.disabled,
.button[disabled] {
    opacity: .25;
    cursor: not-allowed
}
.button.disabled:focus,
.button.disabled:hover,
.button[disabled]:focus,
.button[disabled]:hover {
    background-color: #337899;
    color: #fefefe
}
.button.disabled.primary,
.button[disabled].primary {
    opacity: .25;
    cursor: not-allowed
}
.button.disabled.primary:focus,
.button.disabled.primary:hover,
.button[disabled].primary:focus,
.button[disabled].primary:hover {
    background-color: #337899;
    color: #fefefe
}
.button.disabled.secondary,
.button[disabled].secondary {
    opacity: .25;
    cursor: not-allowed
}
.button.disabled.secondary:focus,
.button.disabled.secondary:hover,
.button[disabled].secondary:focus,
.button[disabled].secondary:hover {
    background-color: #00bba9;
    color: #fefefe
}
.button.disabled.success,
.button[disabled].success {
    opacity: .25;
    cursor: not-allowed
}
.button.disabled.success:focus,
.button.disabled.success:hover,
.button[disabled].success:focus,
.button[disabled].success:hover {
    background-color: #3adb76;
    color: #fefefe
}
.button.disabled.warning,
.button[disabled].warning {
    opacity: .25;
    cursor: not-allowed
}
.button.disabled.warning:focus,
.button.disabled.warning:hover,
.button[disabled].warning:focus,
.button[disabled].warning:hover {
    background-color: #ffae00;
    color: #fefefe
}
.button.disabled.alert,
.button[disabled].alert {
    opacity: .25;
    cursor: not-allowed
}
.button.disabled.alert:focus,
.button.disabled.alert:hover,
.button[disabled].alert:focus,
.button[disabled].alert:hover {
    background-color: #ec5840;
    color: #fefefe
}
.button.dropdown:after {
    display: block;
    width: 0;
    height: 0;
    border: .4em inset;
    content: '';
    border-bottom-width: 0;
    border-top-style: solid;
    border-color: #fefefe transparent transparent;
    position: relative;
    top: .4em;
    display: inline-block;
    float: right;
    margin-left: 1em
}
.button.arrow-only:after {
    top: -.1em;
    float: none;
    margin-left: 0
}
.accordion {
    margin-left: 0;
    background: #fefefe;
    list-style-type: none
}
.accordion-item:first-child>:first-child {
    border-radius: 4px 4px 0 0
}
.accordion-item:last-child>:last-child {
    border-radius: 0 0 4px 4px
}
.accordion-title {
    position: relative;
    display: block;
    padding: 1.25rem 1rem;
    border: 1px solid #e6e6e6;
    border-bottom: 0;
    font-size: .75rem;
    line-height: 1;
    color: #337899
}
:last-child:not(.is-active)>.accordion-title {
    border-bottom: 1px solid #e6e6e6;
    border-radius: 0 0 4px 4px
}
.accordion-title:focus,
.accordion-title:hover {
    background-color: #e6e6e6
}
.accordion-title:before {
    position: absolute;
    top: 50%;
    right: 1rem;
    margin-top: -.5rem;
    content: '+'
}
.is-active>.accordion-title:before {
    content: '–'
}
.accordion-content {
    display: none;
    padding: 1rem;
    border: 1px solid #e6e6e6;
    border-bottom: 0;
    background-color: #fefefe;
    color: #0a0a0a
}
:last-child>.accordion-content:last-child {
    border-bottom: 1px solid #e6e6e6
}
.tree .is-accordion-submenu-none>a {
    padding: 0;
    line-height: 1.6
}
.is-accordion-submenu-parent>span {
    position: relative;
    display: block;
    color: #337899;
    cursor: pointer
}
.is-accordion-submenu-parent>span:hover {
    color: #2c6784
}
.is-accordion-submenu-parent>span:after {
    display: block;
    width: 0;
    height: 0;
    border: 6px inset;
    content: '';
    border-bottom-width: 0;
    border-top-style: solid;
    border-color: #337899 transparent transparent;
    position: absolute;
    top: 50%;
    right: 1rem;
    right: -4px
}
.is-accordion-submenu-parent[aria-expanded=true]>span:after {
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}
.badge {
    display: inline-block;
    min-width: 2.1em;
    padding: .3em;
    border-radius: 50%;
    font-size: .6rem;
    text-align: center;
    background: #337899;
    color: #fefefe
}
.badge.secondary {
    background: #00bba9;
    color: #fefefe
}
.badge.success {
    background: #3adb76;
    color: #fefefe
}
.badge.warning {
    background: #ffae00;
    color: #fefefe
}
.badge.alert {
    background: #ec5840;
    color: #fefefe
}
.breadcrumbs {
    margin: 0 0 1rem;
    list-style: none;
    font-size: 14px;
}
.breadcrumbs i {
    margin-left: 5px;
    margin-right: 5px;
    font-size: 10px;
}
.breadcrumbs:after,
.breadcrumbs:before {
    display: table;
    content: ' '
}
.breadcrumbs:after {
    clear: both
}
.breadcrumbs li {
    float: left;
    font-size: .6875rem;
    color: #0a0a0a;
    cursor: default;
    text-transform: uppercase
}
.breadcrumbs li:not(:last-child):after {
    position: relative;
    top: 1px;
    margin: 0 .75rem;
    opacity: 1;
    content: "/";
    color: #cacaca
}
.breadcrumbs a {
    color: black;
}
.breadcrumbs a:hover {
    text-decoration: underline
}
.breadcrumbs .disabled {
    color: #cacaca;
    cursor: not-allowed
}
.button-group {
    margin-bottom: 1rem;
    font-size: 0
}
.button-group:after,
.button-group:before {
    display: table;
    content: ' '
}
.button-group:after {
    clear: both
}
.button-group .button {
    margin: 0;
    margin-right: 1px;
    margin-bottom: 1px;
    font-size: .9rem
}
.button-group .button:last-child {
    margin-right: 0
}
.button-group.tiny .button {
    font-size: .6rem
}
.button-group.small .button {
    font-size: .75rem
}
.button-group.large .button {
    font-size: 1.25rem
}
.button-group.expanded {
    margin-right: -1px
}
.button-group.expanded:after,
.button-group.expanded:before {
    display: none
}
.button-group.expanded .button:first-child:nth-last-child(2),
.button-group.expanded .button:first-child:nth-last-child(2):first-child:nth-last-child(2)~.button {
    display: inline-block;
    width: calc(50% - 1px);
    margin-right: 1px
}
.button-group.expanded .button:first-child:nth-last-child(2):first-child:nth-last-child(2)~.button:last-child,
.button-group.expanded .button:first-child:nth-last-child(2):last-child {
    margin-right: -6px
}
.button-group.expanded .button:first-child:nth-last-child(3),
.button-group.expanded .button:first-child:nth-last-child(3):first-child:nth-last-child(3)~.button {
    display: inline-block;
    width: calc(33.33333% - 1px);
    margin-right: 1px
}
.button-group.expanded .button:first-child:nth-last-child(3):first-child:nth-last-child(3)~.button:last-child,
.button-group.expanded .button:first-child:nth-last-child(3):last-child {
    margin-right: -6px
}
.button-group.expanded .button:first-child:nth-last-child(4),
.button-group.expanded .button:first-child:nth-last-child(4):first-child:nth-last-child(4)~.button {
    display: inline-block;
    width: calc(25% - 1px);
    margin-right: 1px
}
.button-group.expanded .button:first-child:nth-last-child(4):first-child:nth-last-child(4)~.button:last-child,
.button-group.expanded .button:first-child:nth-last-child(4):last-child {
    margin-right: -6px
}
.button-group.expanded .button:first-child:nth-last-child(5),
.button-group.expanded .button:first-child:nth-last-child(5):first-child:nth-last-child(5)~.button {
    display: inline-block;
    width: calc(20% - 1px);
    margin-right: 1px
}
.button-group.expanded .button:first-child:nth-last-child(5):first-child:nth-last-child(5)~.button:last-child,
.button-group.expanded .button:first-child:nth-last-child(5):last-child {
    margin-right: -6px
}
.button-group.expanded .button:first-child:nth-last-child(6),
.button-group.expanded .button:first-child:nth-last-child(6):first-child:nth-last-child(6)~.button {
    display: inline-block;
    width: calc(16.66667% - 1px);
    margin-right: 1px
}
.button-group.expanded .button:first-child:nth-last-child(6):first-child:nth-last-child(6)~.button:last-child,
.button-group.expanded .button:first-child:nth-last-child(6):last-child {
    margin-right: -6px
}
.button-group.primary .button {
    background-color: #337899;
    color: #fefefe;
    border-radius: 4px
}
.button-group.primary .button:focus,
.button-group.primary .button:hover {
    background-color: #29607a;
    color: #fefefe
}
.button-group.secondary .button {
    background-color: #00bba9;
    color: #fefefe;
    border-radius: 4px
}
.button-group.secondary .button:focus,
.button-group.secondary .button:hover {
    background-color: #1a786d;
    color: #fefefe
}
.button-group.success .button {
    background-color: #3adb76;
    color: #fefefe;
    border-radius: 4px
}
.button-group.success .button:focus,
.button-group.success .button:hover {
    background-color: #22bb5b;
    color: #fefefe
}
.button-group.warning .button {
    background-color: #ffae00;
    color: #fefefe;
    border-radius: 4px
}
.button-group.warning .button:focus,
.button-group.warning .button:hover {
    background-color: #cc8b00;
    color: #fefefe
}
.button-group.alert .button {
    background-color: #ec5840;
    color: #fefefe;
    border-radius: 4px
}
.button-group.alert .button:focus,
.button-group.alert .button:hover {
    background-color: #da3116;
    color: #fefefe
}
.button-group.stacked-for-medium .button,
.button-group.stacked-for-small .button,
.button-group.stacked .button {
    width: 100%
}
.button-group.stacked-for-medium .button:last-child,
.button-group.stacked-for-small .button:last-child,
.button-group.stacked .button:last-child {
    margin-bottom: 0
}
@media print,
screen and (min-width: 40em) {
    .button-group.stacked-for-small .button {
        width: auto;
        margin-bottom: 0
    }
}
@media print,
screen and (min-width: 64em) {
    .button-group.stacked-for-medium .button {
        width: auto;
        margin-bottom: 0
    }
}
@media screen and (max-width: 39.9375em) {
    .button-group.stacked-for-small.expanded {
        display: block
    }
    .button-group.stacked-for-small.expanded .button {
        display: block;
        margin-right: 0
    }
}
.callout {
    position: relative;
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid hsla(0, 0%, 4%, .25);
    border-radius: 4px;
    color: #0a0a0a;
    background-color: #fff
}
.callout>:first-child {
    margin-top: 0
}
.callout>:last-child {
    margin-bottom: 0
}
.callout.primary {
    background-color: #ddecf4
}
.callout.secondary {
    background-color: #d7f6f2
}
.callout.success {
    background-color: #e1faea
}
.callout.warning {
    background-color: #fff3d9
}
.callout.alert {
    background-color: #fce6e2
}
.callout.small {
    padding: .5rem
}
.callout.large {
    padding: 3rem
}
.card {
    margin-bottom: 1rem;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fefefe;
    box-shadow: none;
    overflow: hidden;
    color: #0a0a0a
}
.card>:last-child {
    margin-bottom: 0
}
.card-divider {
    padding: 1rem;
    background: #e6e6e6
}
.card-divider>:last-child {
    margin-bottom: 0
}
.card-section {
    padding: 1rem
}
.card-section>:last-child {
    margin-bottom: 0
}
.close-button {
    position: absolute;
    color: #8a8a8a;
    cursor: pointer
}
[data-whatinput=mouse] .close-button {
    outline: 0
}
.close-button:focus,
.close-button:hover {
    color: #0a0a0a
}
.close-button.small {
    right: .66rem;
    top: .33em;
    font-size: 1.5em;
    line-height: 1
}
.close-button,
.close-button.medium {
    right: 1rem;
    top: .5rem;
    font-size: 2em;
    line-height: 1
}
.menu,
.tree {
    margin: 0;
    list-style-type: none
}
.menu>li,
.tree>li {
    display: table-cell;
    vertical-align: middle
}
[data-whatinput=mouse] .menu>li,
[data-whatinput=mouse] .tree>li {
    outline: 0
}
.menu>li>a,
.tree>li>a {
    display: block;
    padding: .7rem 1rem;
    line-height: 1
}
.menu a,
.menu button,
.menu input,
.menu select,
.tree a,
.tree button,
.tree input,
.tree select {
    margin-bottom: 0
}
.menu>li>a i,
.menu>li>a i+span,
.menu>li>a img,
.menu>li>a img+span,
.menu>li>a svg,
.menu>li>a svg+span,
.tree>li>a i,
.tree>li>a i+span,
.tree>li>a img,
.tree>li>a img+span,
.tree>li>a svg,
.tree>li>a svg+span {
    vertical-align: middle
}
.menu>li>a i,
.menu>li>a img,
.menu>li>a svg,
.tree>li>a i,
.tree>li>a img,
.tree>li>a svg {
    margin-right: .25rem;
    display: inline-block
}
.menu>li,
.tree>li {
    display: table-cell
}
.menu.vertical>li,
.tree.vertical>li {
    display: block
}
@media print,
screen and (min-width: 40em) {
    .menu.medium-horizontal>li,
    .tree.medium-horizontal>li {
        display: table-cell
    }
    .menu.medium-vertical>li,
    .tree.medium-vertical>li {
        display: block
    }
}
@media print,
screen and (min-width: 64em) {
    .menu.large-horizontal>li,
    .tree.large-horizontal>li {
        display: table-cell
    }
    .menu.large-vertical>li,
    .tree.large-vertical>li {
        display: block
    }
}
.menu.simple li,
.tree.simple li {
    display: inline-block;
    margin-right: 1rem;
    line-height: 1
}
.menu.simple a,
.tree.simple a {
    padding: 0
}
.menu.align-right:after,
.menu.align-right:before,
.tree.align-right:after,
.tree.align-right:before {
    display: table;
    content: ' '
}
.menu.align-right:after,
.tree.align-right:after {
    clear: both
}
.menu.align-right>li,
.tree.align-right>li {
    float: right
}
.menu.expanded,
.tree.expanded {
    display: table;
    width: 100%;
    table-layout: fixed
}
.menu.expanded>li:first-child:last-child,
.tree.expanded>li:first-child:last-child {
    width: 100%
}
.menu.icon-top>li>a,
.tree.icon-top>li>a {
    text-align: center
}
.menu.icon-top>li>a i,
.menu.icon-top>li>a img,
.menu.icon-top>li>a svg,
.tree.icon-top>li>a i,
.tree.icon-top>li>a img,
.tree.icon-top>li>a svg {
    display: block;
    margin: 0 auto .25rem
}
.menu.icon-top.vertical a>span,
.tree.icon-top.vertical a>span {
    margin: auto
}
.menu.nested,
.tree.nested {
    margin-left: 1rem
}
.menu .active>a,
.tree .active>a {
    background: #337899;
    color: #fefefe
}
.menu.menu-bordered li,
.tree.menu-bordered li {
    border: 1px solid #e6e6e6
}
.menu.menu-bordered li:not(:first-child),
.tree.menu-bordered li:not(:first-child) {
    border-top: 0
}
.menu.menu-hover li:hover,
.tree.menu-hover li:hover {
    background-color: #e6e6e6
}
.menu-text {
    padding-top: 0;
    padding-bottom: 0;
    padding: .7rem 1rem;
    font-weight: 700;
    line-height: 1;
    color: inherit
}
.menu-centered {
    text-align: center
}
.menu-centered>.menu {
    display: inline-block
}
.no-js [data-responsive-menu] ul {
    display: none
}
.menu-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 16px;
    cursor: pointer
}
.menu-icon:after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #fefefe;
    content: ''
}
.menu-icon:hover:after {
    background: #cacaca;
    box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca
}
.menu-icon.dark {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 16px;
    cursor: pointer
}
.menu-icon.dark:after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #0a0a0a;
    content: ''
}
.menu-icon.dark:hover:after {
    background: #8a8a8a;
    box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a
}
.is-drilldown {
    position: relative;
    overflow: hidden
}
.is-drilldown li {
    display: block
}
.is-drilldown.animate-height {
    transition: height .5s
}
.is-drilldown-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: -1;
    width: 100%;
    background: #fefefe;
    transition: transform .15s linear
}
.is-drilldown-submenu.is-active {
    z-index: 1;
    display: block;
    -ms-transform: translateX(-100%);
    transform: translateX(-100%)
}
.is-drilldown-submenu.is-closing {
    -ms-transform: translateX(100%);
    transform: translateX(100%)
}
.is-drilldown-submenu-parent>a {
    position: relative
}
.is-drilldown-submenu-parent>a:after {
    display: block;
    width: 0;
    height: 0;
    border: 6px inset;
    content: '';
    border-right-width: 0;
    border-left-style: solid;
    border-color: transparent transparent transparent #337899;
    position: absolute;
    top: 50%;
    right: 1rem;
    margin-top: -6px
}
.js-drilldown-back>a:before {
    display: block;
    width: 0;
    height: 0;
    border: 6px inset;
    content: '';
    border-right-style: solid;
    border-color: transparent #337899 transparent transparent;
    display: inline-block;
    vertical-align: middle;
    margin-right: .75rem;
    border-left-width: 0
}
.dropdown-pane {
    position: absolute;
    z-index: 10;
    display: block;
    width: 300px;
    padding: 1rem;
    visibility: hidden;
    border: 1px solid #cacaca;
    border-radius: 4px;
    background-color: #fefefe;
    font-size: 1rem
}
.dropdown-pane.is-open {
    visibility: visible
}
.dropdown-pane.tiny {
    width: 100px
}
.dropdown-pane.small {
    width: 200px
}
.dropdown-pane.large {
    width: 400px
}
.dropdown.menu>li.opens-left>.is-dropdown-submenu {
    /* top: 110%;
    right: -10px;
    left: auto;
    z-index: 999; */

    top: 79%;
    right: 15px;
    left: auto;
    z-index: 999;
}
.dropdown.menu>li.opens-right>.is-dropdown-submenu {
    top: 100%;
    right: auto;
    left: 0
}
.dropdown.menu>li.is-dropdown-submenu-parent>a {
    position: relative;
    padding-right: 16px;
}
.dropdown.menu>li.is-dropdown-submenu-parent>a:after {
    display: block;
    width: 0;
    height: 0;
    content: '';

    border-bottom-width: 0;
    border-top-style: solid;
    border-color: #337899 transparent transparent;
    right: 5px;
    margin-top: -2px
}
[data-whatinput=mouse] .dropdown.menu a {
    outline: 0
}
.no-js .dropdown.menu ul {
    display: none
}
.dropdown.menu.vertical>li .is-dropdown-submenu {
    top: 0
}
.dropdown.menu.vertical>li.opens-left>.is-dropdown-submenu {
    right: 100%;
    left: auto
}
.dropdown.menu.vertical>li.opens-right>.is-dropdown-submenu {
    right: auto;
    left: 100%
}
.dropdown.menu.vertical>li>a:after {
    right: 14px;
    margin-top: -5px
}
.dropdown.menu.vertical>li.opens-left>a:after {
    display: block;
    width: 0;
    height: 0;
    border: 5px inset;
    content: '';
    border-left-width: 0;
    border-right-style: solid;
    border-color: transparent #337899 transparent transparent
}
.dropdown.menu.vertical>li.opens-right>a:after {
    display: block;
    width: 0;
    height: 0;
    border: 5px inset;
    content: '';
    border-right-width: 0;
    border-left-style: solid;
    border-color: transparent transparent transparent #337899
}
@media print,
screen and (min-width: 40em) {
    .dropdown.menu.medium-horizontal>li.opens-left>.is-dropdown-submenu {
        top: 100%;
        right: 0;
        left: auto
    }
    .dropdown.menu.medium-horizontal>li.opens-right>.is-dropdown-submenu {
        top: 100%;
        right: auto;
        left: 0
    }
    .dropdown.menu.medium-horizontal>li.is-dropdown-submenu-parent>a {
        position: relative;
        padding-right: 1.5rem
    }
    .dropdown.menu.medium-horizontal>li.is-dropdown-submenu-parent>a:after {
        display: block;
        width: 0;
        height: 0;
        border: 5px inset;
        content: '';
        border-bottom-width: 0;
        border-top-style: solid;
        border-color: #337899 transparent transparent;
        right: 5px;
        margin-top: -2px
    }
    .dropdown.menu.medium-vertical>li .is-dropdown-submenu {
        top: 0
    }
    .dropdown.menu.medium-vertical>li.opens-left>.is-dropdown-submenu {
        right: 100%;
        left: auto
    }
    .dropdown.menu.medium-vertical>li.opens-right>.is-dropdown-submenu {
        right: auto;
        left: 100%
    }
    .dropdown.menu.medium-vertical>li>a:after {
        right: 14px;
        margin-top: -5px
    }
    .dropdown.menu.medium-vertical>li.opens-left>a:after {
        display: block;
        width: 0;
        height: 0;
        border: 5px inset;
        content: '';
        border-left-width: 0;
        border-right-style: solid;
        border-color: transparent #337899 transparent transparent
    }
    .dropdown.menu.medium-vertical>li.opens-right>a:after {
        display: block;
        width: 0;
        height: 0;
        border: 5px inset;
        content: '';
        border-right-width: 0;
        border-left-style: solid;
        border-color: transparent transparent transparent #337899
    }
}
@media print,
screen and (min-width: 64em) {
    .dropdown.menu.large-horizontal>li.opens-left>.is-dropdown-submenu {
        top: 100%;
        right: 0;
        left: auto
    }
    .dropdown.menu.large-horizontal>li.opens-right>.is-dropdown-submenu {
        top: 100%;
        right: auto;
        left: 0
    }
    .dropdown.menu.large-horizontal>li.is-dropdown-submenu-parent>a {
        position: relative;
        padding-right: 1.5rem
    }
    .dropdown.menu.large-horizontal>li.is-dropdown-submenu-parent>a:after {
        display: block;
        width: 0;
        height: 0;
        border: 5px inset;
        content: '';
        border-bottom-width: 0;
        border-top-style: solid;
        border-color: #337899 transparent transparent;
        right: 5px;
        margin-top: -2px
    }
    .dropdown.menu.large-vertical>li .is-dropdown-submenu {
        top: 0
    }
    .dropdown.menu.large-vertical>li.opens-left>.is-dropdown-submenu {
        right: 100%;
        left: auto
    }
    .dropdown.menu.large-vertical>li.opens-right>.is-dropdown-submenu {
        right: auto;
        left: 100%
    }
    .dropdown.menu.large-vertical>li>a:after {
        right: 14px;
        margin-top: -5px
    }
    .dropdown.menu.large-vertical>li.opens-left>a:after {
        display: block;
        width: 0;
        height: 0;
        border: 5px inset;
        content: '';
        border-left-width: 0;
        border-right-style: solid;
        border-color: transparent #337899 transparent transparent
    }
    .dropdown.menu.large-vertical>li.opens-right>a:after {
        display: block;
        width: 0;
        height: 0;
        border: 5px inset;
        content: '';
        border-right-width: 0;
        border-left-style: solid;
        border-color: transparent transparent transparent #337899
    }
}
.dropdown.menu.align-right .is-dropdown-submenu.first-sub {
    top: 100%;
    right: 0;
    left: auto
}
.is-dropdown-menu.vertical {
    width: 100px
}
.is-dropdown-menu.vertical.align-right {
    float: right
}
.is-dropdown-submenu-parent {
    position: relative
}
.is-dropdown-submenu-parent a:after {
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -2px
}
.is-dropdown-submenu-parent.opens-inner>.is-dropdown-submenu {
    top: 100%;
    left: auto
}
.is-dropdown-submenu-parent.opens-left>.is-dropdown-submenu {
    right: 100%;
    left: auto
}
.is-dropdown-submenu-parent.opens-right>.is-dropdown-submenu {
    right: auto;
    left: 100%
}
.is-dropdown-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
    display: none;
    min-width: 170px;
    border: 1px solid #cacaca;
    background: #fefefe
}
.is-dropdown-submenu .is-dropdown-submenu-parent>a:after {
    right: 14px;
    margin-top: -5px
}
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left>a:after {
    display: block;
    width: 0;
    height: 0;
    border: 5px inset;
    content: '';
    border-left-width: 0;
    border-right-style: solid;
    border-color: transparent #337899 transparent transparent
}
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right>a:after {
    display: block;
    width: 0;
    height: 0;
    border: 5px inset;
    content: '';
    border-right-width: 0;
    border-left-style: solid;
    border-color: transparent transparent transparent #337899
}
.is-dropdown-submenu .is-dropdown-submenu {
    margin-top: -1px
}
.is-dropdown-submenu>li {
    width: 100%
}
.is-dropdown-submenu.js-dropdown-active {
    display: block
}
.flex-video,
.responsive-embed {
    position: relative;
    height: 0;
    margin-bottom: 1rem;
    padding-bottom: 75%;
    overflow: hidden
}
.flex-video embed,
.flex-video iframe,
.flex-video object,
.flex-video video,
.responsive-embed embed,
.responsive-embed iframe,
.responsive-embed object,
.responsive-embed video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.flex-video.widescreen,
.responsive-embed.widescreen {
    padding-bottom: 56.25%
}
.label {
    display: inline-block;
    padding: .33333rem .5rem;
    border-radius: 4px;
    font-size: .8rem;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    background: #337899;
    color: #fefefe
}
.label.secondary {
    background: #00bba9;
    color: #fefefe
}
.label.success {
    background: #3adb76;
    color: #fefefe
}
.label.warning {
    background: #ffae00;
    color: #fefefe
}
.label.alert {
    background: #ec5840;
    color: #fefefe
}
.media-object {
    display: block;
    margin-bottom: 1rem
}
.media-object img {
    max-width: none
}
@media screen and (max-width: 39.9375em) {
    .media-object.stack-for-small .media-object-section {
        padding: 0;
        padding-bottom: 1rem;
        display: block
    }
    .media-object.stack-for-small .media-object-section img {
        width: 100%
    }
}
.media-object-section {
    display: table-cell;
    vertical-align: top
}
.media-object-section:first-child {
    padding-right: 1rem
}
.media-object-section:last-child:not(:nth-child(2)) {
    padding-left: 1rem
}
.media-object-section>:last-child {
    margin-bottom: 0
}
.media-object-section.middle {
    vertical-align: middle
}
.media-object-section.bottom {
    vertical-align: bottom
}
.off-canvas-wrapper {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-overflow-scrolling: auto
}
.off-canvas-wrapper-inner {
    position: relative;
    width: 100%;
    min-height: 100%;
    transition: transform .5s ease
}
.off-canvas-wrapper-inner:after,
.off-canvas-wrapper-inner:before {
    display: table;
    content: ' '
}
.off-canvas-wrapper-inner:after {
    clear: both
}
.off-canvas-content {
    z-index: 1;
    min-height: 100%;
    padding-bottom: .1px;
    background: #fefefe;
    transition: transform .5s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 0 10px hsla(0, 0%, 4%, .5)
}
.js-off-canvas-exit {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 100%, .25);
    transition: background .5s ease;
    cursor: pointer
}
.off-canvas {
    position: absolute;
    z-index: -1;
    max-height: 100%;
    -ms-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
    background: #e6e6e6;
    overflow-y: auto
}
[data-whatinput=mouse] .off-canvas {
    outline: 0
}
.off-canvas.position-left {
    top: 0;
    left: -250px;
    width: 250px
}
.is-open-left {
    -ms-transform: translateX(250px);
    transform: translateX(250px)
}
.off-canvas.position-right {
    top: 0;
    right: -250px;
    width: 250px
}
.is-open-right {
    -ms-transform: translateX(-250px);
    transform: translateX(-250px)
}
.off-canvas.position-top {
    top: -250px;
    width: 100%
}
.is-open-top {
    -ms-transform: translateY(250px);
    transform: translateY(250px)
}
@media print,
screen and (min-width: 40em) {
    .position-left.reveal-for-medium {
        left: 0;
        z-index: auto;
        position: fixed
    }
    .position-left.reveal-for-medium~.off-canvas-content {
        margin-left: 250px
    }
    .position-right.reveal-for-medium {
        right: 0;
        z-index: auto;
        position: fixed
    }
    .position-right.reveal-for-medium~.off-canvas-content {
        margin-right: 250px
    }
    .position-top.reveal-for-medium {
        top: 0;
        z-index: auto;
        position: fixed
    }
    .position-top.reveal-for-medium~.off-canvas-content {
        margin-top: 250px
    }
}
@media print,
screen and (min-width: 64em) {
    .position-left.reveal-for-large {
        left: 0;
        z-index: auto;
        position: fixed
    }
    .position-left.reveal-for-large~.off-canvas-content {
        margin-left: 250px
    }
    .position-right.reveal-for-large {
        right: 0;
        z-index: auto;
        position: fixed
    }
    .position-right.reveal-for-large~.off-canvas-content {
        margin-right: 250px
    }
    .position-top.reveal-for-large {
        top: 0;
        z-index: auto;
        position: fixed
    }
    .position-top.reveal-for-large~.off-canvas-content {
        margin-top: 250px
    }
}
.orbit,
.orbit-container {
    position: relative
}
.orbit-container {
    height: 0;
    margin: 0;
    list-style: none;
    overflow: hidden
}
.orbit-slide {
    width: 100%
}
.orbit-slide.no-motionui.is-active {
    top: 0;
    left: 0
}
.orbit-figure {
    margin: 0
}
.orbit-image {
    width: 100%;
    max-width: 100%;
    margin: 0
}
.orbit-caption {
    bottom: 0;
    width: 100%;
    margin-bottom: 0;
    background-color: hsla(0, 0%, 4%, .5)
}
.orbit-caption,
.orbit-next,
.orbit-previous {
    position: absolute;
    padding: 1rem;
    color: #fefefe
}
.orbit-next,
.orbit-previous {
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 10
}
[data-whatinput=mouse] .orbit-next,
[data-whatinput=mouse] .orbit-previous {
    outline: 0
}
.orbit-next:active,
.orbit-next:focus,
.orbit-next:hover,
.orbit-previous:active,
.orbit-previous:focus,
.orbit-previous:hover {
    background-color: hsla(0, 0%, 4%, .5)
}
.orbit-previous {
    left: 0
}
.orbit-next {
    left: auto;
    right: 0
}
.orbit-bullets {
    position: relative;
    margin-top: .8rem;
    margin-bottom: .8rem;
    text-align: center
}
[data-whatinput=mouse] .orbit-bullets {
    outline: 0
}
.orbit-bullets button {
    width: 1.2rem;
    height: 1.2rem;
    margin: .1rem;
    border-radius: 50%;
    background-color: #cacaca
}
.orbit-bullets button.is-active,
.orbit-bullets button:hover {
    background-color: #8a8a8a
}
.pagination {
    margin-left: 0;
    margin-bottom: 1rem
}
.pagination:after,
.pagination:before {
    display: table;
    content: ' '
}
.pagination:after {
    clear: both
}
.pagination li {
    margin-right: .0625rem;
    border-radius: 4px;
    font-size: .875rem;
    display: none
}
.pagination li:first-child,
.pagination li:last-child {
    display: inline-block
}
@media print,
screen and (min-width: 40em) {
    .pagination li {
        display: inline-block
    }
}
.pagination a,
.pagination button {
    display: block;
    padding: .1875rem .625rem;
    border-radius: 4px;
    color: #0a0a0a
}
.pagination a:hover,
.pagination button:hover {
    background: #e6e6e6
}
.pagination .current {
    padding: .1875rem .625rem;
    background: #337899;
    color: #fefefe;
    cursor: default
}
.pagination .disabled {
    padding: .1875rem .625rem;
    color: #cacaca;
    cursor: not-allowed
}
.pagination .disabled:hover {
    background: transparent
}
.pagination .ellipsis:after {
    padding: .1875rem .625rem;
    content: '\2026';
    color: #0a0a0a
}
.pagination-previous.disabled:before,
.pagination-previous a:before {
    display: inline-block;
    margin-right: .5rem;
    content: '\00ab'
}
.pagination-next.disabled:after,
.pagination-next a:after {
    display: inline-block;
    margin-left: .5rem;
    content: '\00bb'
}
.progress {
    height: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    background-color: #cacaca
}
.progress.primary .progress-meter {
    background-color: #337899
}
.progress.secondary .progress-meter {
    background-color: #00bba9
}
.progress.success .progress-meter {
    background-color: #3adb76
}
.progress.warning .progress-meter {
    background-color: #ffae00
}
.progress.alert .progress-meter {
    background-color: #ec5840
}
.progress-meter {
    position: relative;
    display: block;
    width: 0;
    height: 100%;
    background-color: #337899;
    border-radius: 4px
}
.progress-meter-text {
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    margin: 0;
    font-size: .75rem;
    font-weight: 700;
    color: #fefefe;
    white-space: nowrap;
    border-radius: 4px
}
.slider {
    position: relative;
    height: .5rem;
    margin-top: 1.25rem;
    margin-bottom: 2.25rem;
    background-color: #e6e6e6;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: none;
    touch-action: none
}
.slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    max-width: 100%;
    height: .5rem;
    background-color: #cacaca;
    transition: all .2s ease-in-out
}
.slider-fill.is-dragging {
    transition: all 0s linear
}
.slider-handle {
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    left: 0;
    z-index: 1;
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 4px;
    background-color: #337899;
    transition: all .2s ease-in-out;
    -ms-touch-action: manipulation;
    touch-action: manipulation
}
[data-whatinput=mouse] .slider-handle {
    outline: 0
}
.slider-handle:hover {
    background-color: #2b6682
}
.slider-handle.is-dragging {
    transition: all 0s linear
}
.slider.disabled,
.slider[disabled] {
    opacity: .25;
    cursor: not-allowed
}
.slider.vertical {
    display: inline-block;
    width: .5rem;
    height: 12.5rem;
    margin: 0 1.25rem;
    -ms-transform: scaleY(-1);
    transform: scaleY(-1)
}
.slider.vertical .slider-fill {
    top: 0;
    width: .5rem;
    max-height: 100%
}
.slider.vertical .slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.4rem;
    height: 1.4rem;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}
.sticky,
.sticky-container {
    position: relative
}
.sticky {
    z-index: 0;
    transform: translateZ(0)
}
.sticky.is-stuck {
    position: fixed;
    z-index: 5
}
.sticky.is-stuck.is-at-top {
    top: 0
}
.sticky.is-stuck.is-at-bottom {
    bottom: 0
}
.sticky.is-anchored {
    position: relative;
    right: auto;
    left: auto
}
.sticky.is-anchored.is-at-bottom {
    bottom: 0
}
body.is-reveal-open {
    overflow: hidden
}
html.is-reveal-open,
html.is-reveal-open body {
    min-height: 100%;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.reveal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1005;
    display: none;
    background-color: hsla(0, 0%, 4%, .45);
    overflow-y: scroll
}
.reveal {
    z-index: 1006;
    display: none;
    padding: 1rem;
    border: 1px solid #cacaca;
    border-radius: 4px;
    background-color: #fefefe;
    position: relative;
    top: 100px;
    margin-right: auto;
    margin-left: auto;
    overflow-y: auto
}
[data-whatinput=mouse] .reveal {
    outline: 0
}
@media print,
screen and (min-width: 40em) {
    .reveal {
        min-height: 0
    }
}
.reveal .column,
.reveal .columns {
    min-width: 0
}
.reveal>:last-child {
    margin-bottom: 0
}
@media print,
screen and (min-width: 40em) {
    .reveal {
        width: 600px;
        max-width: 75rem
    }
}
@media print,
screen and (min-width: 40em) {
    .reveal .reveal {
        right: auto;
        left: auto;
        margin: 0 auto
    }
}
.reveal.collapse {
    padding: 0
}
@media print,
screen and (min-width: 40em) {
    .reveal.tiny {
        width: 30%;
        max-width: 75rem
    }
}
@media print,
screen and (min-width: 40em) {
    .reveal.small {
        width: 50%;
        max-width: 75rem
    }
}
@media print,
screen and (min-width: 40em) {
    .reveal.large {
        width: 90%;
        max-width: 75rem
    }
}
.reveal.full {
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100vh;
    min-height: 100vh;
    margin-left: 0;
    border: 0;
    border-radius: 0
}
@media screen and (max-width: 39.9375em) {
    .reveal {
        top: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        height: 100vh;
        min-height: 100vh;
        margin-left: 0;
        border: 0;
        border-radius: 0
    }
}
.reveal.without-overlay {
    position: fixed
}
.switch {
    height: 2rem;
    position: relative;
    margin-bottom: 1rem;
    outline: 0;
    font-size: .875rem;
    font-weight: 700;
    color: #fefefe;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.switch-input {
    position: absolute;
    margin-bottom: 0;
    opacity: 0
}
.switch-paddle {
    position: relative;
    display: block;
    width: 4rem;
    height: 2rem;
    border-radius: 4px;
    background: #cacaca;
    transition: all .25s ease-out;
    font-weight: inherit;
    color: inherit;
    cursor: pointer
}
input+.switch-paddle {
    margin: 0
}
.switch-paddle:after {
    position: absolute;
    top: .25rem;
    left: .25rem;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateZ(0);
    border-radius: 4px;
    background: #fefefe;
    transition: all .25s ease-out;
    content: ''
}
input:checked~.switch-paddle {
    background: #337899
}
input:checked~.switch-paddle:after {
    left: 2.25rem
}
[data-whatinput=mouse] input:focus~.switch-paddle {
    outline: 0
}
.switch-active,
.switch-inactive {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}
.switch-active {
    left: 8%;
    display: none
}
input:checked+label>.switch-active {
    display: block
}
.switch-inactive {
    right: 15%
}
input:checked+label>.switch-inactive {
    display: none
}
.switch.tiny {
    height: 1.5rem
}
.switch.tiny .switch-paddle {
    width: 3rem;
    height: 1.5rem;
    font-size: .625rem
}
.switch.tiny .switch-paddle:after {
    top: .25rem;
    left: .25rem;
    width: 1rem;
    height: 1rem
}
.switch.tiny input:checked~.switch-paddle:after {
    left: 1.75rem
}
.switch.small {
    height: 1.75rem
}
.switch.small .switch-paddle {
    width: 3.5rem;
    height: 1.75rem;
    font-size: .75rem
}
.switch.small .switch-paddle:after {
    top: .25rem;
    left: .25rem;
    width: 1.25rem;
    height: 1.25rem
}
.switch.small input:checked~.switch-paddle:after {
    left: 2rem
}
.switch.large {
    height: 2.5rem
}
.switch.large .switch-paddle {
    width: 5rem;
    height: 2.5rem;
    font-size: 1rem
}
.switch.large .switch-paddle:after {
    top: .25rem;
    left: .25rem;
    width: 2rem;
    height: 2rem
}
.switch.large input:checked~.switch-paddle:after {
    left: 2.75rem
}
table {
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 4px
}
table tbody,
table tfoot,
table thead {
    border: 1px solid #f1f1f1;
    background-color: #fefefe
}
table caption {
    padding: .5rem .625rem .625rem;
    font-weight: 700
}
table thead {
    background: #f8f8f8;
    color: #0a0a0a
}
table tfoot {
    background: #f1f1f1;
    color: #0a0a0a
}
table tfoot tr,
table thead tr {
    background: transparent
}
table tfoot td,
table tfoot th,
table thead td,
table thead th {
    padding: .5rem .625rem .625rem;
    font-weight: 700;
    text-align: left
}
table tbody td,
table tbody th {
    padding: .5rem .625rem .625rem
}
table tbody tr:nth-child(even) {
    border-bottom: 0;
    background-color: #f1f1f1
}
table.unstriped tbody {
    background-color: #fefefe
}
table.unstriped tbody tr {
    border-bottom: 0;
    border-bottom: 1px solid #f1f1f1;
    background-color: #fefefe
}
@media screen and (max-width: 63.9375em) {
    table.stack tfoot,
    table.stack thead {
        display: none
    }
    table.stack td,
    table.stack th,
    table.stack tr {
        display: block
    }
    table.stack td {
        border-top: 0
    }
}
table.scroll {
    display: block;
    width: 100%;
    overflow-x: auto
}
table.hover thead tr:hover {
    background-color: #f3f3f3
}
table.hover tfoot tr:hover {
    background-color: #ececec
}
table.hover tbody tr:hover {
    background-color: #f9f9f9
}
table.hover:not(.unstriped) tr:nth-of-type(even):hover {
    background-color: #ececec
}
.table-scroll {
    overflow-x: auto
}
.table-scroll table {
    width: auto
}
.tabs {
    margin: 0;
    border: 1px solid #e6e6e6;
    background: #fefefe;
    list-style-type: none
}
.tabs:after,
.tabs:before {
    display: table;
    content: ' '
}
.tabs:after {
    clear: both
}
.tabs.vertical>li {
    display: block;
    float: none;
    width: auto
}
.tabs.simple>li>a {
    padding: 0
}
.tabs.simple>li>a:hover {
    background: transparent
}
.tabs.primary {
    background: #337899
}
.tabs.primary>li>a {
    color: #fefefe
}
.tabs.primary>li>a:focus,
.tabs.primary>li>a:hover {
    background: #3781a4
}
.tabs-title {
    float: left
}
.tabs-title>a {
    display: block;
    padding: 1.25rem 1.5rem;
    font-size: .75rem;
    line-height: 1
}
.tabs-title>a:hover {
    background: #fefefe
}
.tabs-title>a:focus,
.tabs-title>a[aria-selected=true] {
    background: #e6e6e6
}
.tabs-content {
    border: 1px solid #e6e6e6;
    border-top: 0;
    background: #fefefe;
    transition: all .5s ease
}
.tabs-content.vertical {
    border: 1px solid #e6e6e6;
    border-left: 0
}
.tabs-panel {
    display: none;
    padding: 1rem
}
.tabs-panel[aria-hidden=false] {
    display: block
}
.thumbnail {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 1rem;
    border: 4px solid #fefefe;
    border-radius: 4px;
    box-shadow: 0 0 0 1px hsla(0, 0%, 4%, .2);
    line-height: 0
}
a.thumbnail {
    transition: box-shadow .2s ease-out
}
a.thumbnail:focus,
a.thumbnail:hover {
    box-shadow: 0 0 6px 1px rgba(51, 120, 153, .5)
}
a.thumbnail image {
    box-shadow: none
}
.title-bar {
    padding: .5rem;
    background: #00bba9;
    color: #fefefe
}
.title-bar:after,
.title-bar:before {
    display: table;
    content: ' '
}
.title-bar:after {
    clear: both
}
.title-bar .menu-icon {
    margin-left: .25rem;
    margin-right: .25rem
}
.title-bar-left {
    float: left
}
.title-bar-right {
    float: right;
    text-align: right
}
.title-bar-title {
    vertical-align: middle
}
.has-tip,
.title-bar-title {
    display: inline-block;
    font-weight: 700
}
.has-tip {
    position: relative;
    border-bottom: 1px dotted #8a8a8a;
    cursor: help
}
.tooltip {
    position: absolute;
    top: calc(100% + .6495rem);
    z-index: 1200;
    max-width: 10rem!important;
    padding: .75rem;
    border-radius: 4px;
    background-color: #0a0a0a;
    font-size: 80%;
    color: #fefefe
}
.tooltip:before {
    border: .75rem inset;
    border-top-width: 0;
    border-bottom-style: solid;
    border-color: transparent transparent #0a0a0a;
    position: absolute;
    bottom: 100%;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}
.tooltip.top:before,
.tooltip:before {
    display: block;
    width: 0;
    height: 0;
    content: ''
}
.tooltip.top:before {
    border: .75rem inset;
    border-bottom-width: 0;
    border-top-style: solid;
    border-color: #0a0a0a transparent transparent;
    top: 100%;
    bottom: auto
}
.tooltip.left:before {
    border: .75rem inset;
    border-right-width: 0;
    border-left-style: solid;
    border-color: transparent transparent transparent #0a0a0a;
    left: 100%
}
.tooltip.left:before,
.tooltip.right:before {
    display: block;
    width: 0;
    height: 0;
    content: '';
    top: 50%;
    bottom: auto;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}
.tooltip.right:before {
    border: .75rem inset;
    border-left-width: 0;
    border-right-style: solid;
    border-color: transparent #0a0a0a transparent transparent;
    right: 100%;
    left: auto
}
.top-bar {
    padding: .5rem
}
.top-bar:after,
.top-bar:before {
    display: table;
    content: ' '
}
.top-bar:after {
    clear: both
}
.top-bar,
.top-bar ul {
    background-color: #e6e6e6
}
.top-bar input {
    max-width: 200px;
    margin-right: 1rem
}
.top-bar .input-group-field {
    width: 100%;
    margin-right: 0
}
.top-bar input.button {
    width: auto
}
.top-bar .top-bar-left,
.top-bar .top-bar-right {
    width: 100%
}
@media print,
screen and (min-width: 40em) {
    .top-bar .top-bar-left,
    .top-bar .top-bar-right {
        width: auto
    }
}
@media screen and (max-width: 63.9375em) {
    .top-bar.stacked-for-medium .top-bar-left,
    .top-bar.stacked-for-medium .top-bar-right {
        width: 100%
    }
}
@media screen and (max-width: 74.9375em) {
    .top-bar.stacked-for-large .top-bar-left,
    .top-bar.stacked-for-large .top-bar-right {
        width: 100%
    }
}
.top-bar-title {
    display: inline-block;
    float: left;
    margin: .45rem 1rem 0
}
.top-bar-left {
    float: left
}
.top-bar-right {
    float: right
}
.hide {
    display: none!important
}
.invisible {
    visibility: hidden
}
@media screen and (max-width: 39.9375em) {
    .hide-for-small-only {
        display: none!important
    }
}
@media screen and (max-width: 0em),
screen and (min-width: 40em) {
    .show-for-small-only {
        display: none!important
    }
}
@media print,
screen and (min-width: 40em) {
    .hide-for-medium {
        display: none!important
    }
}
@media screen and (max-width: 39.9375em) {
    .show-for-medium {
        display: none!important
    }
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .hide-for-medium-only {
        display: none!important
    }
}
@media screen and (max-width: 39.9375em),
screen and (min-width: 64em) {
    .show-for-medium-only {
        display: none!important
    }
}
@media print,
screen and (min-width: 64em) {
    .hide-for-large {
        display: none!important
    }
}
@media screen and (max-width: 63.9375em) {
    .show-for-large {
        display: none!important
    }
}
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
    .hide-for-large-only {
        display: none!important
    }
}
@media screen and (max-width: 63.9375em),
screen and (min-width: 75em) {
    .show-for-large-only {
        display: none!important
    }
}
.show-for-sr,
.show-on-focus {
    position: absolute!important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0)
}
.show-on-focus:active,
.show-on-focus:focus {
    position: static!important;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto
}
.hide-for-portrait,
.show-for-landscape {
    display: block!important
}
@media screen and (orientation: landscape) {
    .hide-for-portrait,
    .show-for-landscape {
        display: block!important
    }
}
@media screen and (orientation: portrait) {
    .hide-for-portrait,
    .show-for-landscape {
        display: none!important
    }
}
.hide-for-landscape,
.show-for-portrait {
    display: none!important
}
@media screen and (orientation: landscape) {
    .hide-for-landscape,
    .show-for-portrait {
        display: none!important
    }
}
@media screen and (orientation: portrait) {
    .hide-for-landscape,
    .show-for-portrait {
        display: block!important
    }
}
.float-left {
    float: left!important
}
.float-right {
    float: right!important
}
.float-center {
    display: block;
    margin-right: auto;
    margin-left: auto
}
.clearfix:after,
.clearfix:before {
    display: table;
    content: ' '
}
.clearfix:after {
    clear: both
}
html body {
    background-color: #f5f5f5
}
.main-content {
    min-height: 88vh;


}
.container {
    max-width: 924px;
    margin-left: auto;
    margin-right: auto;
    position: relative
}
.container.columns,
.container .row .small-12 {
    padding-left: 15px;
    padding-right: 15px
}
.container--padding {
    padding-top: 15px;
    padding-bottom: 40px
}
.container--margin {
    margin-top: 15px;
    margin-bottom: 0px
}
.container--primary {
    background-color: #f5f5f5
}
.container--main {
        background-color: #f5f5f5;
}
.container--nopadding {
    padding: 0
}
.container--profile {
    max-width: 500px
}
.container--auth,
.container--profile {
    background-color: #fff;
    margin-top: 15px
}
.container--auth {
    max-width: 300px;
    padding-left: 30px;
    padding-right: 30px
}
.container .container--slider {
    padding-left: 0;
    padding-right: 0
}
.column:last-child:not(:first-child),
.columns:last-child:not(:first-child) {
    float: left
}
@media screen and (min-width: 64em) {
    .container--row .row {
        margin-left: -15px;
        margin-right: -15px
    }
    .container--slider {
        padding-left: 15px;
        padding-right: 15px
    }
}
.search-comp {
    width: 100%;
    background-color: #f5f5f5;
    padding: 7.5px 15px;
}

.search-comp__wrapper {
    position: relative;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff
}
.search-comp__input-wrapper {
    margin-right: 0px;
    border-radius: 4px;
}
.search-comp__input-wrapper input {
    border-radius: 0;
    margin-bottom: 0;
    height: 30px;
    border: none;
    box-shadow: none;
    transition: none;
    background-color: transparent
}
.search-comp__input-wrapper input:focus {
    box-shadow: none;
    outline: none;
    border: none
}
.search-comp button {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    line-height: 30px;
    background-color: transparent;
    color: #7f7f7f;
}
.search-comp--desktop {
    background-color: transparent;
    padding-top: 6px;
    padding-bottom: 6px
}
.search-comp--desktop .search-comp__input-wrapper input {
    height: 35px
}
.detail-part {
    margin-bottom: 30px
}
.detail-part__title {
    text-transform: uppercase;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
}
.course-item {
    text-align: center;
    background-color: #fff;
    box-shadow: 0px 2px 5px 1px hsla(0, 0%, 70%, .5);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.course-item.final{
    height: 440px;
}
.course-item.final .course-item__wrapper{
    box-shadow: none;
}
.course-item__wrapper {
    border-radius: 2px;
    padding: 25px 25px 0 25px;
    /*box-shadow: 0px 2px 5px 1px hsla(0, 0%, 70%, .5);*/
    position: relative;
    overflow: hidden;
    height: 100%;
    max-height: 450px;
}
.course-item__wrapper>p {
    margin-bottom: 0;
    color: #3b3b3b;
    font-size: 14px;
}
.course-item__wrapper>p img {
    height: auto !important;
}
.course-item__title {
    font-size: 23px;
    color: #000;
    margin-top: -25px;
    font-weight: 500;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    width: 290px;
    overflow: hidden;
    padding: 0px 10px 0px 10px;
}
.course-item--main .course-item__wrapper,
.course-item--test .course-item__wrapper {
    padding-top: 0px;
    height: 80vw;
    max-height: 415px;
}
.course-item--main .course-item__title,
.course-item--test .course-item__title {
    font-size: 1.6rem;
    margin-bottom: 45px
}
.course-item--test .course-item__title {
    font-size: 1.4rem;
    margin-bottom: 15px
}
.course-detail {
    margin-top: 15px
}
.course-detail__title {
    text-transform: uppercase
}
.course-detail__rating {
    color: #00bba9
}
.course-detail__helper {
    margin-bottom: 15px;
    display: inline-block
}
.course-item--test .check-list {
    text-align: left
}
.instructor-comp p{
    margin-top: 0;
    margin-bottom: 0;
}
.instructor-comp__wrapper {
    padding-left: 25px;
    text-transform: capitalize;
    display: inline;
}
.instructor-comp__wrapper img{
    float: left;
    width: 90px;
    margin-right: 15px;
}
.instructor-block{
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    width: 100%;
    height: 110px;
}
.instructor-block .instructor-avt {
    float: left;
    margin-left: 15px;
    margin-right: 15px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.instructor-block img{
    float: left;
    margin-left: 15px;
    margin-right: 15px;
    height: 100%;
    opacity: 1;
    max-height: 110px;
    max-width: 110px;
    object-fit: cover;
}
.instructor-comp__name {
    font-size: medium;
    color: black;
    margin-bottom: 10px;
}
.instrtructor-comp__title {
    font-size: 16px;
    color: #424242;
}
.instructor-comp__information {
    font-size: 14px;
    color: #424242;
}
.comment-box textarea {
    width: 100%;
    height: 100px
}
.comment-box button {
    float: right
}
.comment-box:after {
    clear: right;
    display: block;
    content: ''
}
.comment-comp__list {
    list-style-type: none;
    margin-left: 0
}
.comment-item {
    position: relative
}
.comment-item__avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    overflow: hidden
}
.comment-item__avatar img {
    width: 100%
}
.comment-item__content-wrapper {
    padding-left: 65px
}
.comment-item__name {
    margin-bottom: 0
}
.comment-item__helper {
    display: block
}
.section-list {
    margin-top: 30px;
    margin-bottom: 30px
}
.section-list .button {
    margin-bottom: 4px;
    text-transform: uppercase;
    text-align: left
}
.section-list .button._active {
    background-color: #337899;
    color: #fff !important;
}
.button.back-btn {
    text-align: left;
    padding-left: 0;
}
@media screen and (min-width: 64em) {
    .course-item,
    .course-item__wrapper {
        min-height: 270px
    }
}
.bottom-comp {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #f5f5f5;
    z-index: 99
}
.bottom-comp p {
    margin-bottom: 0
}
.bottom-comp .button {
    margin-bottom: 0;
    height: 45px;
    border-radius: 0;
    font-weight: 500;
}
.bottom-comp .columns {
    padding-left: 0;
    padding-right: 0;
    border-right: 1px solid #fff
}
.bottom-comp .columns:last-child {
    border-right: none
}
.header-bar {
    position: relative;
    height: 60px;
    width: 100%;
    color: #fff;
    background-color: #00bba9;
    box-shadow: 0px 5px 10px 5px #2a6b8b;
    margin-bottom: -13px;
    margin-top: -10px;
}
.header-bar .fa {
    font-size: 1.4rem;
    vertical-align: middle
}
.header-bar__left,
.header-bar__right {
    position: absolute;
    top: 0;
    line-height: 50px;
    padding: 0 15px;
    color: #fff
}
.header-bar__left:focus,
.header-bar__right:focus {
    outline: none
}
.header-bar__left {
    left: 0
}
.header-bar__right {
    right: 0;
    /*height: 20px;*/
}
.header-bar__title {
    text-align: center;
    line-height: 50px;
    font-weight: 700;
}

.header_mobile{
    margin: 0 30px 0 30px;
}

.header-bar--light {
    box-shadow: none;
    height: 25px;
}
.header-bar--light,
.header-bar--light .header-bar__title {
    background-color: #f5f5f5;
}
.header-bar--light .header-bar__right {
    color: rgba(0, 0, 0, .5)
}
.header-bar--light .button-close{
    padding: 0;
    line-height: 25px;
    color: #000000;
}
.header-menu {
    position: absolute;
    top: 50px;
    z-index: 99;
    width: 100%;
    background-color: #3b3b3b;
    color: #fff;
    height:100%;
}
.header-menu__list {
    list-style-type: none;
    margin: 0;
    margin-top: 15px;
    margin-bottom: 15px
}
.header-menu__item a {
    padding: 7.5px;
    padding-left: 15px;
    display: block;
    color: #fff;
    border-bottom: 1px solid hsla(0, 0%, 50%, .5)
}
.header-menu__item a:focus {
    color: #00bba9
}
.header-menu__item:last-child a {
    border-bottom: 0
}
.nav-bar {
    background-color: #337899;
    padding-left: 25px;
}
.nav-bar__list {
    list-style-type: none;
    margin-left: -15px;
    margin-bottom: 0
}
.nav-bar__item {
    display: inline-block
}
.nav-bar__item:hover {
    cursor: pointer;
}
.nav-bar__item a {
    display: block;
    padding: 15px;
    color: #fff
}
.nav-bar__item a:hover {
    text-decoration: underline
}
.nav-bar__item a:first-child {
    padding-left: 0;
}
.nav-bar__sub_item {
    display: inline-block
}
.nav-bar__sub_item a {
    display: block;
    padding: 15px;
    color: #fff
}
.nav-bar__sub_item a:hover {
    text-decoration: underline
}
.nav-bar__sub_item a:first-child {
    padding-left: 0;
}
.header-dropdown {
    margin-right: -15px;
    float: right
}
.header-dropdown>li>a {
    color: #fff
}
.header-dropdown .submenu>li>a:hover {
    text-decoration: underline
}
.profile-comp__avt-wrapper {
    display: inline-block;
    width: 45px;
    height: 45px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 7.5px;
    border: 1px solid #fff;
    border-radius: 100%;
}
.profile-comp__avt-wrapper img {
    width: 100%
}
.dropdown.menu>li.is-dropdown-submenu-parent>a:after {
    border-color: #fff transparent transparent
}
.menu>li>a,
.tree>li>a {
    padding: .6rem 1rem
}
@media screen and (min-width: 64em) {
    .header-bar__title {
        text-align: left;
        margin-left: -15px
    }
}
.profile-comp {
    text-align: center;
    padding-top: 46px;
    padding-bottom: 30px
}
.workplace-comp {
    text-align: center;
    padding-top: 15px;
    padding-bottom: 30px
}

.profile-comp__wrapper {
    position: relative
}
.profile-comp__img-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    display: inline-block;
    overflow: hidden;
    background-color: #fff;
    border: 2px solid #ebeae7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.profile-comp__img-wrapper img {
    width: 200%;
    opacity: 1;
}
.workplace-comp__img-wrapper {
    width: 100px;
    height: 100px;
    /* border-radius: 100%; */
    display: inline-block;
    overflow: hidden;
    background-color: #fff;
    border: 2px solid #ebeae7;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.profile-comp__edit-btn, .avatar_edit {
    position: absolute;
    bottom: 0;
    margin-left: -30px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #00bba9;
    color: #fff;
}
.avatar_edit .fa{
    padding: 8px 0px 0px 0px;
    font-size: 20px;
}
.profile-comp__edit-btn:focus {
    outline: none
}
.profile-comp__name {
    margin-bottom: 0;
    font-family: Roboto;
    font-size: 14px;
    color: #000000;
    font-weight: 500;
    text-decoration: none solid rgb(0, 0, 0);
    text-align: center;
    padding-top: 17px;
    word-wrap: break-word;
}
.group_of_workplace{
    margin-left: 10px;
    margin-right: 10px;
}
.group_of_workplace .item-of-workplace {
    border: 0px solid #ddd;
    padding-bottom: 2px;
    padding-top: 2px;
}
.group_of_workplace .item-of-workplace.active {
    background-color: #5db49a;
}
.group_of_workplace .item-of-workplace.active
.content-item {
    font-size: 14px;
    color: #ffffff;
}
.group_of_workplace .item-of-workplace.active
.lesson {
    background-color: #ffffff;
    border: 1px solid #ffffff;
}
.group_of_workplace .item-of-workplace
.content-item {
    font-size: 14px;
    color: #3d3d3d;
    font-weight: 300;
    text-decoration: none solid rgb(61, 61, 61);
}
.group_of_workplace .hr-line {
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #dedede;
    border-left: 0;
    margin-top: 4px;
    margin-bottom: 4px;
}

.workplace-comp__name {
    font-size: 16px;
    color: #030303;
    text-decoration: none solid rgb(3, 3, 3);
    text-align: center;
}
.workplace-comp__domain {
    font-size: 14px;
    color: #1335cf;
    font-weight: 300;
    text-decoration: none solid rgb(19, 53, 207);
    text-align: center;
}
.my-course-title {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.2rem;
    color: #00bba9
}
.profile-note {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid hsla(0, 0%, 50%, .7);
    padding-bottom: 5px;
    color: hsla(0, 0%, 50%, .7)
}
.profile-helper {
    color: #000;
    text-align: center;
    /* font-size: 1.1rem; */
    text-transform: uppercase;
    /* margin-top: 15px; */
    font-weight: 500;
}

.profile-helper--course {
    text-align: left
}
.lesson-list {
    margin-top: 0px;
    margin-bottom: 30px;
}
.check-list__title,
.lesson-list__title {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 20px;
}
.check-list__list,
.lesson-list__list {
    list-style-type: none;
    margin: 0;
    position: relative;
    text-align: left;
}
.check-list__list li{
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #eaeaea;
}
.lesson-list__list .btn-container {
    width: 100%;
    text-align: center;
}
.lesson-list__list .btn-container .btn-submit {
    display: inline-block;
    padding: 8px 14px;
    color: #ffffff;
    text-transform: uppercase;
    background-color: #00bba9;
    border-radius: 5px;
}

.lesson-list__list .btn-container .btn-is-disabled {
    pointer-events: none; /* Disables the button completely. Better than just cursor: default; */
    opacity: 0.5;
}

.couse-page .lesson-list__title{
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}
.couse-page .list-lessons{
    max-height:55vh;
    overflow: auto;
}
.couse-page ul.list-lessons{
    margin-left: 0;
}
.couse-page ul,
.couse-page li{
    /*margin: 10px 25px 10px 25px;*/
}
.couse-page .list-lessons__item>a>label{
    font-weight: bold;
}
.couse-page li.lesson-list__item{
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #eaeaea;
}
.couse-page li.lesson-list__item.disabled {
    pointer-events: none;

}
.couse-page li.lesson-list__item.disabled label {
    color: #cccccc;
}
.check-list__item:last-child,
.lesson-list__item:last-child {
    border-bottom: 0
}
.check-list__item input[type=checkbox],
.lesson-list__item input[type=checkbox] {
    position: absolute;
    margin-bottom: 0;
    vertical-align: middle;
    display: inline-block;
    /*top: 50%;*/
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
}
.check-list__item label,
.lesson-list__item label {
    width: 100%;
    padding: 10.5px;
    padding-left: 30px;
    /* display: initial; */
    margin: 0;
    cursor: pointer;
    max-height: calc(15px *2 *1.5);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.check-list .check-list__item label {
    display: block;

    padding-left: 35px;
}
.check-list .check-list__item label.highlight {
    color: #31bfa7;
}
.check-list .check-list__item label.highlight_red {
    color: #ff6561;
}
.lesson-list__item .fa {
    color: #00bba9;
    display: none;
}
.lesson-list__item.active .fa {
    display: inline-block;
    margin-right: -10px;
}
.lesson-list .lesson-list__item label {
    padding: 10.5px;
    padding-left: 20px
}
.btn-explore {
    margin-top: 10%;
    margin-left: 40%;
    width: 216px;
    height: 30px;
    padding: 6px 10px;
    border-radius: 20px;
    background-color: #f5f5f5;
    background-size: cover;
    font-family: Roboto;
    font-size: 14px;
    color: #000000;
    font-weight: 300;
    text-decoration: none solid rgb(0, 0, 0);
    text-align: center;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}
.login-comp {
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center
}
.login-comp .forgot-password{
    text-align: right;
    margin-bottom: 15px;
}
.login-comp:first-child {
    padding-top: 0
}
.login-comp__title {
    color: gray;
    margin-bottom: 15px
}
.login-comp__logo{
    max-width: 100px;
    margin: 40px;
}
.login-comp label {
    margin-bottom: 15px
}
.login-comp label input[type=checkbox] {
    margin-bottom: 0
}
.login-comp__form {
    margin-bottom: 60px;
    height: 70%
}
.control-button {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 20px;
    margin-top: 20px;
}
.control-button .button,
.control-button button {
    width: 100px;
    height: 40px;
    border-radius: 5px;
    background-color: #00bba9;
    color: #fff;
    margin-left: 20px;
    margin-right: 20px;
    cursor: pointer;
}
.control-button .button i,
.control-button button i {
    font-size: 1.3rem
}
.control-button--single {
    text-align: right;
    margin-bottom: 0
}
.control-button--single .button,
.control-button--single button {
    margin: 0
}
.group-button {
    text-align: center
}
.group-button .button,
.group-button button {
    width: 120px
}
.group-button .button:first-child,
.group-button button:first-child {
    margin-right: 2px;
    background-color: #d8d8d8;
    color: #494949;
}
.group-button .button:last-child,
.group-button button:last-child {
    margin-left: 2px;
    background-color: #d8d8d8;
    color: #3b3b3b;
}
button.button.primary:hover{
    background-color: #00bba9;
    color:#fff;
}
input.button.expanded:hover{
    background-color: #00bba9;
    color:#fff;
}
@media screen and (min-width: 481px) and (max-height: 699px) {
    .f-modal {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: hsla(0, 0%, 50%, .9);
        overflow-x: hidden;
        overflow-y: auto;
        min-height: inherit;
        z-index: 1000;
    }
    .f-modal__wrapper {
        position: absolute;
        display: block; 
        top: 0;
        transform: translateY(0);
        left: 15px;
        right: 15px;
        border-radius: 20px;
        max-width: 600px;
        overflow: visible;
        background-color: #ffffff;
    }
}

@media screen and (min-width: 481px) and (min-height: 700px) {
    .f-modal {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: hsla(0, 0%, 50%, .9);
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 600px;
        z-index: 1000;
    }
    .f-modal__wrapper {
        position: absolute;
        display: block; 
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 15px;
        right: 15px;
        border-radius: 20px;
        max-width: 600px;
        overflow: visible;
        background-color: #ffffff;
    }
}
@media screen and (max-width: 480px) and (min-height: 700px) {
    .f-modal {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: hsla(0, 0%, 50%, .9);
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 600px;
        z-index: 1000;
    }
    .f-modal__wrapper {
        position: absolute;
        display: block;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 15px;
        right: 15px;
        max-width: 600px;
        overflow: visible;
        background-color: #ffffff;
    }
}

@media screen and (max-width: 480px) and (max-height: 699px) {
    .f-modal {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: hsla(0, 0%, 50%, .9);
        overflow-x: hidden;
        overflow-y: auto;
        min-height: inherit;
        z-index: 1000;
    }
    .f-modal__wrapper {
        position: absolute;
        display: block;
        top: 0;
        transform: translateY(0);
        /* top: 50%; */
        left: 15px;
        right: 15px;
        max-width: 600px;
        overflow: visible;
        background-color: #ffffff;
    }
}

.f-modal__wrapper--auth {
    max-width: 450px;
    padding-left: 15px;
    padding-right: 15px
}
.f-modal .close-reveal-modal {
    position: absolute;
    right: 15px;
    top: -10px;
    font-size: 1.8rem;
    z-index: 99
}
textarea#thVal{
    height: 100%;
    resize: none;
    overflow: auto;
}
.close-reveal-modal {
    position: absolute;
    right: 0;
    z-index: 10;
    font-size: 25px;
}
.button.link {
    background-color: transparent;
    color: #000;
}

.button.facebook {
    width: 100%;
    height: 40px;
    padding: 6px 10px 6px 32px;
    border-radius: 6px;
    background-color: #00528f;
    font-family: "Roboto";
    font-size: 16px;
    color: #ffffff;
    font-weight: 300;
    text-decoration: none solid rgb(255, 255, 255);
    text-align: center;

    /* background-color: #37649b;
    color: #fff */
}
.button.facebook img{
    width: 25px;
    float: left;
    margin-left: 5%;
}
.button.facebook p{
    font-family: Rotobo;
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    text-decoration: none solid;
    padding-left: 6%;
    float: left;
    /* vertical-align: middle */
}
.button.google {
    width: 100%;
    height: 40px;
    padding: 6px 10px 6px 32px;
    border: 1px solid #b8b8b8;
    border-radius: 6px;
    background-color: #ffffff;
    font-family: "Roboto";
    font-size: 16px;
    color: #000000;
    font-weight: 300;
    text-decoration: none solid rgb(0, 0, 0);
    text-align: center;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);

    /* background-color: #b23434;
    color: #fff */
}
.button.google img{
    width: 25px;
    float: left;
    margin-left: 5%;
}
.button.google p{
    font-family: Rotobo;
    font-size: 16px;
    font-weight: 300;
    color: #171717;
    text-decoration: none solid;
    padding-left: 6%;
    float: left;
    /* vertical-align: middle */
}
.button.hara {
    width: 100%;
    height: 40px;
    padding: 6px 10px 6px 32px;
    border: 1px solid #1b67a3;
    border-radius: 6px;
    font-family: "Roboto";
    font-size: 16px;
    color: #171717;
    font-weight: 300;
    text-decoration: none solid rgb(23, 23, 23);
    text-align: center;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
    background-color: #ffffff;
    /* margin-bottom: 0 */
    /* background-color: #0d3064;
    color: #fff */
}
.button.hara img{
    width: 25px;
    float: left;
    margin-left: 5%;
}
.button.hara p{
    font-family: Rotobo;
    font-size: 16px;
    font-weight: 300;
    color: #171717;
    text-decoration: none solid;
    padding-left: 6%;
    float: left;
    /* vertical-align: middle */
}
.control-inline label {
    display: inline
}
.styled-checkbox {
    position: absolute;
    opacity: 0
}
.styled-checkbox+label {
    position: relative;
    cursor: pointer;
    padding: 0;
    margin-left: 0;
    padding-left: 30px
}
.styled-checkbox+label:before {
    content: '';
    width: 20px;
    height: 20px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    border: 1px solid #00bba9;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 3px;
}
.styled-checkbox.radio+label:before {
    border-radius: 50%;
}
/*.styled-checkbox:focus+label:before,*/
.styled-checkbox:hover+label:before {
    background: #00bba9;
}
.styled-checkbox:checked+label:before {
    background: #00bba9
}
.styled-checkbox.disabled+label,
.styled-checkbox[disabled]+label {
    color: #b8b8b8
}
.styled-checkbox.disabled+label:before,
.styled-checkbox[disabled]+label:before {
    box-shadow: none;
    background: #ddd
}
.styled-checkbox:checked+label:after {
    content: '';
    width: 2px;
    height: 2px;
    position: absolute;
    left: 6px;
    margin-top: -2px;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #fff;
    box-shadow: 2px 0 0 #fff, 4px 0 0 #fff, 4px -2px 0 #fff, 4px -4px 0 #fff, 4px -6px 0 #fff;
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}
.bx-wrapper {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    margin-bottom: 20px !important;
    margin-top: 15px;
}
.bx-wrapper .bx-controls-auto,
.bx-wrapper .bx-pager {
    bottom: -10px
}
.header-bar__title a {
    color: #fff;
}
.information {
    padding: 10px;
}
.course-item__author {
    color: #3b3b3b;
    text-transform: capitalize;
}

.point-course {
    width: 100%;
    background: #00bba9;
    color: #fff;
    padding: 5px 0px 5px 0px;
    margin-top: -34px;
}

@media screen and (min-width: 320px) and (max-width: 768px) {
    .search-comp {
        box-shadow: 0px 1px 5px hsla(0, 0%, 70%, .5);
    }
    .search-comp__wrapper{
        border: none;
    }
    .header-bar {
        box-shadow: 0px 5px 10px hsla(0, 0%, 60%, .5);
        margin-bottom: 0px;
        margin-top: 0px;
        padding-left:0px;
    }

    .profile-helper--course {
        text-align: center;
        margin-bottom: 10px;
    }
    .profile-helper {
       margin-top: 0px;
    }

    .review-comp.detail-part {
        text-align: center;
    }
    .nav-bar{
        padding-left:0px;
    }

    .row.course-list-item {
        margin-top: 50px;
    }

    .head-page-workplace {
        position: absolute;
        right: 0px;
        display: flex;
        margin-right: 20px;
        margin-top: -20px;
    }

    .head-page-workplace .news-workplace {
        font-size: 14px !important;
        color: #333333;
        text-decoration: none solid rgb(51, 51, 51);
    }
    .head-page-workplace
    #fa-sort-amount-asc {
        font-size: 14px !important;
        margin-left: 5px;
        margin-top: 2px;
    }

    .gradient.course_image {
        height: 190px;
        width: 300px;
    }

    .gradient.header-title-course {
        margin-top: 10px;
        height: 25px;
        width: 130px;
        /* margin-left: 40px; */
    }

    .gradient.course_title {
        margin-top: 5px;
        height: 10px;
    }

    .gradient.course_description {
        height: 110px;
    }

    .gradient.course_catalo {
        height: 25px;
        width: 100px;
        margin-left: 15px;
    }

    .gradient.item-course-job {
        height: 25px;
        margin-top: -25px;
        width: 100px;
        margin-left: 165px;
    }

    .gradient {
        animation-duration: 1.8s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #fafafa 54%);
        background-size: 1000px 640px;
        position: relative;
    }

    @keyframes placeHolderShimmer{
        0%{
            background-position: -468px 0
        }
        100%{
            background-position: 468px 0
        }
    }
}

.course-des-detail {
    height: 150px;
}
.course-author-detail {
    height: 40px;
}
.course-des-detail-profile {
    height: 115px;
}
.course-author-detail-profile {
    height: 25px;
}


.caret-up-filter{
    float: right;
    margin-top: -30px;
}
.fa-caret-up {
    color: #00bba9;
}
.course-detail-scroll{
    overflow: scroll;
    text-align: justify;
}
.course-detail-scroll::-webkit-scrollbar {
    display: none;
}
.title-course-main{
    margin-bottom: 15px;
    font-size: medium;
    font-weight: bold;
    color: black;
}
.slidernumber {
    position: absolute !important;
    bottom: 0;
    font-size: 15px;
    width: 100% !important;
    text-align: center;
    color: #00bba9;
}
.slidernumber p{
    margin: 0;
}
i.fa.fa-save{
    color: #337899;
    font-size: 30px;
}
.course-title-detail {
    font-weight: 500;
}

.container_course_detail_about{
    background:#fff;
    margin-left: -15px;
    margin-right: -15px;
    padding: 15px;
    margin-bottom: 15px;
}
.lesson-detail-content {
    text-align: justify;
    padding: 5px 10px 5px 10px;
}
.course-item-test{
    padding-top:10px;
}
.header-bar.header-bar--light {
    box-shadow: none;
    background-color: #ffffff;
}
li.check-list__job {
    padding: 20px 0px 20px 0px;
    border-bottom: 1px solid #c6c6c6;
}
li.check-list__job:last-child{
    border-bottom: none;
}
.background-fillter{
    background: #fff;
}
.noshadow-slider{
    box-shadow: none;
}
.course-item.course-item--test{
    height:400px;
    overflow:scroll;
}
.slidertestpage{
    height:400px;
    overflow:scroll;
}
.course-detail-caret-up{
    float:right;
}
.link {
    color: #00bba9;
}
.lesson-slides{
    position: relative;
    /*width: 450px;
    height: 450px;*/
    max-width: 450px;
    max-height: 450px;
    margin-left: auto;
    margin-right: auto;
}
.lesson-slides .lesson-results,
.lesson-results{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 50px;
    text-align: center;
    background-color: #ffffff;
    z-index: 10;
}
.lesson-slides .lesson-results .container,
.lesson-results .container{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.lesson-slides .lesson-results .title,
.lesson-results .title{
    font-size: 18px;
    font-weight: 500;
}
.lesson-slides .lesson-results .description,
.lesson-results .description{
    margin: 0;
}
.lesson-slides .lesson-results .btn-show,
.lesson-results .btn-show{
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    color: #ffffff;
    background-color: #00bba9;
}
.course-item-lesson{
    height: 87vw;
    overflow: auto;
    max-height: 440px;
}
.margin-bottom{
    margin-bottom: 15px;
}
.control-slide{
    font-size: 50px;
    line-height: 50px;
}
#slider-next{
    padding: 0;
    position: absolute;
    top: 50%;
    right: -25px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background-color: #00bba9;
    opacity: 0.5;
}
#slider-prev{
    padding: 0;
    position: absolute;
    top: 50%;
    left: -25px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background-color: #00bba9;
    opacity: 0.5;
}
#slider-next a, #slider-prev a {
    display: inline-block;
    width: 50px;
    height: 50px;
    color: #fff;
    text-align: center;
}
#slider-next a {
    padding-left: 6px;
}
#slider-prev a {
    padding-right: 5px;
}
#slider-next:hover, #slider-prev:hover{
    opacity: 1;
}

#slider-prev .change-lesson,
#slider-next .change-lesson {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
}

.flip-container, .front, .back {
    width: 100%;
    height: 100%;
}

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

.flip-container .back {
    display: none;
}

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

    position: relative;
    padding-top: 100%;
}

.front_temp{
  position: initial !important;  
}
/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

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

button.slide-more-prev, button.slide-more-next{
    width: 40px;
    height: 40px;
    background-color: #337899;
    border-radius: 3px;
    color: #fff;
    font-size: 30px;
    position: absolute;
    z-index: 10;
    top: 40%;
    cursor: pointer;
}
button.slide-more-next{
    right: 0;
}
.lesson-note textarea {
    background-color: #F2F0EA;
    border: 1px solid #e3e3e3;
    box-shadow: none;
}

/* Loading */
#loading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 20000;
}

#circularG {
    position:absolute;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 58px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: auto;
}

.circularG {
    position:absolute;
    background-color: #ffffff;
    width:14px;
    height:14px;
    border-radius:9px;
    -o-border-radius:9px;
    -ms-border-radius:9px;
    -webkit-border-radius:9px;
    -moz-border-radius:9px;
    animation-name:bounce_circularG;
    -o-animation-name:bounce_circularG;
    -ms-animation-name:bounce_circularG;
    -webkit-animation-name:bounce_circularG;
    -moz-animation-name:bounce_circularG;
    animation-duration:1.1s;
    -o-animation-duration:1.1s;
    -ms-animation-duration:1.1s;
    -webkit-animation-duration:1.1s;
    -moz-animation-duration:1.1s;
    animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    animation-direction:normal;
    -o-animation-direction:normal;
    -ms-animation-direction:normal;
    -webkit-animation-direction:normal;
    -moz-animation-direction:normal;
}

#circularG_1 {
    left:0;
    top:23px;
    animation-delay:0.41s;
    -o-animation-delay:0.41s;
    -ms-animation-delay:0.41s;
    -webkit-animation-delay:0.41s;
    -moz-animation-delay:0.41s;
}

#circularG_2 {
    left:6px;
    top:6px;
    animation-delay:0.55s;
    -o-animation-delay:0.55s;
    -ms-animation-delay:0.55s;
    -webkit-animation-delay:0.55s;
    -moz-animation-delay:0.55s;
}

#circularG_3 {
    top:0;
    left:23px;
    animation-delay:0.69s;
    -o-animation-delay:0.69s;
    -ms-animation-delay:0.69s;
    -webkit-animation-delay:0.69s;
    -moz-animation-delay:0.69s;
}

#circularG_4 {
    right:6px;
    top:6px;
    animation-delay:0.83s;
    -o-animation-delay:0.83s;
    -ms-animation-delay:0.83s;
    -webkit-animation-delay:0.83s;
    -moz-animation-delay:0.83s;
}

#circularG_5 {
    right:0;
    top:23px;
    animation-delay:0.97s;
    -o-animation-delay:0.97s;
    -ms-animation-delay:0.97s;
    -webkit-animation-delay:0.97s;
    -moz-animation-delay:0.97s;
}

#circularG_6 {
    right:6px;
    bottom:6px;
    animation-delay:1.1s;
    -o-animation-delay:1.1s;
    -ms-animation-delay:1.1s;
    -webkit-animation-delay:1.1s;
    -moz-animation-delay:1.1s;
}

#circularG_7 {
    left:23px;
    bottom:0;
    animation-delay:1.24s;
    -o-animation-delay:1.24s;
    -ms-animation-delay:1.24s;
    -webkit-animation-delay:1.24s;
    -moz-animation-delay:1.24s;
}

#circularG_8 {
    left:6px;
    bottom:6px;
    animation-delay:1.38s;
    -o-animation-delay:1.38s;
    -ms-animation-delay:1.38s;
    -webkit-animation-delay:1.38s;
    -moz-animation-delay:1.38s;
}

#test-page .btn-container {
    text-align: center;
}

#test-page .btn-container .btn-submit {
    display: none;
    padding: 10px 20px;
    color: #ffffff;
    background-color: #00bba9;
}

.empty-page .title {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #cccccc;
    font-size: 22px;
    font-weight: 300;
    text-align: center;
}

.content_more_less {
    overflow: hidden;
}
.card-content p img {
    display: initial;
}

/* FOOTER */
.pi360-footer {
    background-color: #e9eef9;
}
.main-footer {
    padding: 40px 0;
}

.main-footer .logo-footer img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100px;
}

.main-footer .logo-title{
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
}

.main-footer .title{
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1rem;
    font-weight: bold;
}
.main-footer a{
    color: #333333;
    display: block;
    margin: 10px 0;
}
.main-footer a:hover{
    color: #31bfa7;
    text-decoration: none;
}
.main-footer .social {
    text-align: center;
    background-color: #f2f7ff;
    width: 100px;
    height: 100px;
    padding-top: 15px;
    border-radius: 5px;
}
.bottom-footer{
    padding: 10px 0;
    background-color: #a5b4cf;
    color: #fff;
}
.bottom-footer a{
    color: #333333;
    margin-left: 30px;
}
.bottom-footer a:hover{
    color: #fff;
    text-decoration: none;
}

/* RESPONSIVE */
@media (max-width: 768px){
    .bottom-footer a {
        margin-left: 3px;
    }
    
    .main-footer {
        padding: 40px 15px;
    }

    .main-footer .logo-footer img{
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: 45px;
    }

    .button.hara {    
        padding: 6px 10px 6px 15px;
    }

    .button.hara p{
        font-size: 0.9em !important
    }

    .button.hara img{
        margin-left: 0px;
    }

    .button.google {   
        padding: 6px 10px 6px 15px;
    }
    .button.google img{
        margin-left: 0px;
    }
    .button.google p{
        font-size: 0.9em !important
    }

    .button.facebook {
        padding: 6px 10px 6px 15px;
    }
    .button.facebook img{
        margin-left: 0px;
    }
    .button.facebook p{
        font-size: 0.9em !important
    }
}

@media (max-width: 320px){
    .button.hara p {
        letter-spacing: -1px;
        font-size: 0.9em !important;
    }
    .button.google p {
        letter-spacing: -1px;
        font-size: 0.9em !important
    }
}

@media screen and (min-width: 1024px) {
    .gradient.course_image {
        height: 190px;
        width: 280px;
    }

    .gradient.header-title-course {
        margin-top: 10px;
        height: 25px;
        width: 130px;
        /* margin-left: 40px; */
    }

    .gradient.course_title {
        margin-top: 5px;
        height: 10px;
    }

    .gradient.course_description {
        height: 110px;
    }

    .gradient.course_catalo {
        height: 25px;
        width: 100px;
        margin-left: 15px;
    }

    .gradient.item-course-job {
        height: 25px;
        margin-top: -25px;
        width: 100px;
        margin-left: 165px;
    }

    .gradient {
        animation-duration: 1.8s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #fafafa 54%);
        background-size: 1000px 640px;
        position: relative;
    }

    @keyframes placeHolderShimmer{
        0%{
            background-position: -468px 0
        }
        100%{
            background-position: 468px 0
        }
    }
}

.login-comp .or-text{
    position: relative;
    color: #7a7a7a;
    font-size: 16px;
    padding: 0 10px;
 }
 .login-comp .or-text::after{
    content:"";
    position: absolute;
    top: 50%;
    right: 0;
    width: 40px;
    transform: translate(100%, 0);
    border-top: 1px solid black;
    z-index: -1;
 }
 .login-comp .or-text::before{
    content:"";
    position: absolute;
    top: 50%;
    left: 0;
    width: 40px;
    transform: translate(-100%, 0);
    border-top: 1px solid black;
    z-index: -1;
}
.add-skill {
    background: #5db49a;
    width: 20px;
    height: 20px;
    line-height: 21px;
    border-radius: 50%;
}
.add-skill i{
    color:#ffffff;
}

.f-popup{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: hsla(0, 0%, 50%, .9);
    z-index: 1000;
}
.popup{
	max-width: 460px;
	border-radius: 10px;
	background-color: #ffffff;
	background-size: cover;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.popup .head{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #5db49a;
	background-size: cover;
	display: flex;
}
.popup .head .text{
	font-family: Roboto;
	font-size: 16px;
	color: #ffffff;
	text-align: center;
	line-height: 50px;
	width: 100%;
}
.popup .head .icon-close{
	color: #000;
	position: absolute;
	right: 5px;
	top: 5px;
    font-size: 25px;
    line-height: 25px;
}
.popup .head .icon-close:hover{
    color: #fff;
    cursor: pointer;
}
.popup .title-text{
	font-family: Roboto;
	font-size: 16px;
	color: #1c1c1c;
	text-align: center;
	margin-top:50px;
	font-weight: 600;
}

.popup .content{
	font-family: Roboto;
	font-size: 16px;
	color: #121212;
	font-weight: 300;
	text-align: center;
	margin-top:50px;
	padding: 0 20px;
}
.popup-change-member .popup .content{
	font-size: 16px;
	color: #121212;
	font-weight: 300;
	text-align: center;
	margin-top:80px;
	padding: 0 20px;
}

.popup .search{
	padding: 0px 10px;
	border-radius: 6px;
	font-family: Roboto;
	font-size: 14px;
	color: #454545;
	font-weight: 300;
	margin-top: 45px;
}
.popup .search select{
	width: 100%;
}
.popup .select2.select2-container.select2-container--default{
    width: 100% !important;
    /* height: 30px !important;
    line-height: 30px !important; */
}
.popup .select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 1px solid #aaa;
    border-radius: 15px !important;
    cursor: text;
}

.popup .select2-search__field{
    height: 25px !important;
}
.popup .select2-selection__rendered{
    padding: 0 5px !important;
}
.popup .bot{
	margin: 20px 10px;
	display: flex;
	justify-content: center;
	border: none;
}
.popup .bot button{
	border: none;
	width: 138px;
	height: 30px;
	border-radius: 5px;
	font-family: Roboto;
	font-size: 16px;
	text-align: center;
}
.popup .bot .save{
	background-color: #5db49a;
    color: #ffffff;
    margin-top: 0px !important;
}
.popup .bot .skip{
	background-color: #ababab;
	color: #000000;
	margin-left: 20px;
}
#select2-select2-skills-results .select2-results__option[aria-disabled=true]{
    display: none !important;
 }
 #select2-select2-skills-selected-results{
    display: none !important;
 }
 .skills-selected input{
    display: none !important;
 }
 select[multiple], select[size] {
    height: 40px;
    border-radius: 15px;
}

.select2-dropdown.select2-dropdown--below{
    /*border: none !important;*/
}
.skills-selected .select2-selection.select2-selection--multiple{
    border: none !important;
}
#select2-skills-selected{
    visibility: hidden;
    margin: 0;
    height: 29px;
}
#select2-skills{
    visibility: hidden;
    margin: 0;
    height: 30px;
}
.select2-selection__choice {
    background-color: #a7abaa !important;
    border: 1px solid #aaa;
    border-radius: 15px !important;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px;
}
/* .select2-container--default .select2-selection--multiple{
    height: 40px;
} */
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    color: #fff !important;
}
/* .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-search__field{
    height: 40px;
} */
#create-course-page .col-xs-6{
    width: 100%;
}

#create-course-page .select2-results__option{
    height: 112px;
}

#create-course-page .select2-results__options img.img-flag{
    max-width: 150px;
    min-width: 150px;
    max-height: 100px;
    min-height: 100px;
    border-radius: 5px;
}

#create-course-page .select2-results__options{
    font-size: 15px;
    max-height: 230px;
}

#select2-select2-company-results img{
    max-width: 1.5rem;
}

.search *{
    font-size: 14px;
}

.select2-results__option{
    font-size: 14px;
}

.popup-background{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #d1d1d1;
    top: 0;
    left: 0;
    z-index: 9999;
}
.popup-not-support-mobile{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 300px;
    max-width: 340px;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    box-shadow: 0 0 5px #9d9d9d;
}
.popup-not-support-mobile .title{
    background-color: #f07a1a;
    text-align: center;
}
.popup-not-support-mobile .title i{
    font-size: 32px;
    color: #fff;
    padding-top: 7px;
}
.popup-not-support-mobile .title .title-text{
    font-size: 17px !important;
    font-weight: 600;
    color: #fff;
    padding-top: 12px;
    padding-bottom: 10px;
}
.popup-not-support-mobile .content{
    padding: 0 20px;
    font-size: 14px;
}
.popup-not-support-mobile .content p{
    margin: 28px 0;
}
.popup-not-support-mobile .button-ok{
    text-align: center;
    font-size: 15px;
}
.popup-not-support-mobile a{
    display: block;
    width: 100%;
    line-height: 40px;
    color: #5db49a;
    text-decoration: none;
    border-top: 1px solid #d1d1d1;
}

.popup-add-member .popup{
    padding-bottom: 20px;
}

.popup-add-member .popup .popup-header{
    text-align: right;
}
.popup-add-member .popup .popup-header button{
    padding: 10px;
}

.popup-add-member .popup .popup-body{
    width: 460px;
}

.popup-add-member .popup .popup-body .title-company{
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-top: 10px;
}

.popup-add-member .popup .popup-body .title-company span{
    color: #ff0d00;
}

.popup-add-member .popup .popup-body .content{
    padding: 0 50px;
    margin-bottom: 10px;
}

.popup-add-member .popup .popup-body .content .btn-opt-add-member{
    background: #2ba6cb;
    border: 1px solid #2284a1;
    padding: 10px 20px;
    border-radius: 3px;
    text-align: left;
    margin-bottom: 30px;
    cursor: pointer;
}

.popup-add-member .popup .popup-body .content .btn-opt-add-member .title{
    font-size: 18px;
    color: #222222;
    font-weight: 400;
}

.popup-add-member .popup .popup-body .content .btn-opt-add-member .sub-title{
    font-size: 14px;
    color: #ffffff;
}

.popup-change-member .popup{
    border-radius: 8px;
    max-width: 540px;
    padding-bottom: 20px;
}

.popup-change-member .popup .popup-header{
    text-align: right;
}
.popup-change-member .popup .popup-header button{
    padding: 10px;
}

.popup-change-member .popup .popup-body{
    width: 540px;
}

.popup-change-member .popup .popup-body .title-company{
    font-size: 16px;
    color: #121212;
    font-weight: 500;
    text-decoration: none solid rgb(18, 18, 18);
    text-align: center;
}

.popup-change-member .popup .popup-body .content{
    margin-bottom: 130px;
}

.popup-change-member .popup 
.popup-body .footer {
    padding-left: 20px;
}

.popup-change-member .popup 
.popup-body .footer .finish {
    width: 100px;
    height: 30px;
    border-radius: 3px;
    background-color: #5db49a;
    background-repeat: no-repeat;
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none solid rgb(255, 255, 255);
    text-align: center;
}

.popup-change-member .popup 
.popup-body .footer .cancel {
    width: 100px;
    height: 30px;
    margin-left: 30px;
    border-radius: 3px;
    background-color: #a8a8a8;
    background-repeat: no-repeat;
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none solid rgb(255, 255, 255);
    text-align: center;
}

.text-red{
    color : #ff0d00;
    font-size: 14px;
}
.popup-for-add-user{
    border-radius: 10px;
    background-color: #ffffff;
    background-size: cover;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.add-member{
    background: #fff;
    overflow-y: auto;
    
}
#create-user1 >.form-group >.col-sm-12 >input{
 border-radius: 7px;
}
#create-user1 >.form-group >.col-sm-10 >input{
    border-radius: 7px;
   }
.input-error{
    border: #fc1105 1px solid;
}
.mg-top{
    margin:20px 0px;
    background-color: #ffffff;
}
.mg-left{
    margin-top: 5px;
    font-size: 16px;
    font-weight: 300;
    margin-left: 20px;
}
.mg-right{
    margin-top: 5px;
    font-size: 16px;
    font-weight: 300;
    margin-right: 20px;
}
.mg-lefts{
    margin-top: 2px;
    font-size: 16px;
    font-weight: 300;
    margin-left: 10px;
}
.mg-rights{
    margin-top: 2px;
    font-size: 16px;
    font-weight: 300;
    margin-left: 5px;
    margin-right: 10px;
}
.notifi-create-member{
    height: 300px;
    opacity: 0.9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    background-color: #ffffff;
    margin-top: 5%;
}
#create-course-page #container_course .instrtructor-comp__title,.instructor-comp__information {
    font-family: Roboto;
    font-size: 16px;
    color: #484848;
    font-weight: 300;
    text-decoration: none solid rgb(72, 72, 72);
    text-align: justify; 
}

.warning{
    width: 340px;
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    background-color: #ffffff;
    background-size: cover;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    }
.warning .head_warning{
    text-align: center;
    background-color: #f07a1a;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #f07a1a;
    color: #ffffff;
    padding-top: 10px;
}
.warning .head_warning .title{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
.warning .content-box{
    text-align: center;
    background-color: #d1d1d1;
    padding-bottom: 30px;
}
.warning .content-box p{
    padding-top: 30px;
    margin: 0 20px 0 20px;
}
.warning .bot-box{
    background-color: #ffffff;
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 100%;
}
.warning .bot-box .cancel{
    width: 50%;
    text-align: center;
    border-right: 1px solid #d1d1d1;
}
.warning .bot-box .cancels{
    width: 50%;
    text-align: center;
}
.warning .bot-box a{
    text-decoration: none;
}

.popup-deactive-member .popup{
    max-width: 460px;
    min-width: 300px;
    width: -webkit-fill-available;
}

.popup-deactive-member .popup span{
    font-size: 15px !important;
}

.popup-deactive-member .popup .content{
    margin-bottom: 70px;
}

.instructor-comp__avatar {
    width: 80px;
    height: 80px !important;
    background-color: white !important;
}

.star-rating{
    text-align: center;
}
.star-rating span{
    font-size: 24px; 
    padding: 7.5px;
    cursor: pointer;
}
.star-title{
    text-align: center;
}
.fa-star{
    color: #5db49a;
}
.js-send-star-rating{
    margin-top: 35px; 
    width: 120px; 
    height: 30px; 
    background-color: #d4d2d2; 
    text-align: center;
}
#rate-lesson{
    text-align: center;
}
#stars-rating{
    margin-bottom: 35px;
}
#rate-lesson p{
    font-size: 16px;
    /* margin-top: 35px; */
}


/* The offline */
.container_offline {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    /* font-size: 22px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container_offline input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark_offline {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #cdcdcd;
    /* border-radius: 25px; */
}

/* On mouse-over, add a grey background color */
.container_offline:hover input ~ .checkmark_offline {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container_offline input:checked ~ .checkmark_offline {
    background-color: #5db49a;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark_offline:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container_offline input:checked ~ .checkmark_offline:after {
    display: block;
}

/* Style the checkmark/indicator */
.container_offline .checkmark_offline:after {
    left: 9px;
    top: 5px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}