/* Minification failed. Returning unminified contents.
(8326,1): run-time error CSS1019: Unexpected token, found '}'
 */






.navbar-default .navbar-nav > li > a {
    color: red;
}

html {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: #ffffff;
    font-size: 14px;
    line-height: 1.4em;
    font-family: 'Hind', sans-serif;
    font-weight: normal;
    margin: 0;
    position: relative;
    color: #4c5c6b;
    height: 100%;
}

.inline-block {
    display: inline-block;
}

.row.title {
    border-bottom: solid 2px #E4E4E4;
    padding: 20px 15px 10px;
    background: #F9FAFA;
    margin: -20px -20px 20px -20px;
    height: auto;
}

.row.full-height {
    height: 100%;
}

.row.title h2 {
    color: #263c89;
    margin: 15px 0 10px;
    font-family: 'Montserrat',sans-serif;
    font-weight: bold;
    word-break: keep-all;
}

.row.title.subtitle h2 {
    margin: 0 10px 10px 0;
    font-weight: bold;
    display: inline-block;
}

.row.title small {
    display: block;
    text-transform: uppercase;
    color: #696969;
    font-size: 14px;
    padding: 0 0 5px 0;
}

.row.title .start-yr {
    font-size: 10pt;
    color: #ffffff;
    background: #5365ae;
    padding: 3px 8px;
    vertical-align: super;
    display: inline-block;
    margin: 0 0 0 10px;
    border-radius: 4px;
    font-family: 'Hind', sans-serif;
    font-weight: normal;
}

.row.title .add-btn-col a {
    width: 200px;
    background-color: #1c2431;
    border: solid 1px #1b2e6f;
    margin-top: 10px;
}

    .row.title .add-btn-col a.btn-sm {
        width: 130px;
    }

a {
    color: #006E9E;
}

    a:link, a:visited,
    a:active, a:hover, a::selection {
        text-decoration: none;
    }

    a:hover,
    .action-btn i:hover {
        cursor: pointer;
    }

    a.link-look {
        color: #3dbb94;
        text-decoration: underline;
        padding: 5px;
        display: inline-block;
    }

button {
    outline: none !important;
}

    button:focus,
    input:focus {
        outline: 0;
    }

.btn {
    font-family: 'Montserrat-regular',sans-serif;
}

a.btn.default {
    padding: 5px 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #231f20;
    color: #ffffff;
    margin: 10px 15px 0 0;
}

a:hover {
    cursor: pointer;
}

.sr-only {
    color: transparent;
    font-size: 0;
}


header, footer, hgroup,
nav, section {
}

#subheader {
    background-color: #5365ae;
    position: relative;
}

.navbar.Client-bar-top#subheader {
    background: #ffffff;
    border-bottom: solid 2px #e4e4e4;
}

.navbar#subheader .welcomeAvatar {
    background-color: #f48265;
    margin: 0;
    border: none;
    height: 18px;
    width: 18px;
    color: #ffffff;
    line-height: 18px;
    margin-right: 15px;
}

.welcomeAvatar.introText {
    background-color: #f48265;
    margin: 0;
    border: none;
    line-height: 18px;
    margin: 0 3px;
    display: inline-block;
    vertical-align: middle;
}

    .welcomeAvatar.introText:hover {
        cursor: default;
    }

.HP-bar-top#subheader {
    background-color: #5365ae;
}


/* Return to Dash btn */
a.Return_to_Dash_ico:after {
    content: "My Clients";
    color: #80CE52;
    font-style: italic;
    margin-right: 10px;
}

a.Return_to_Dash_ico:before {
    font-family: FontAwesome;
    content: "\f112";
    padding: 5px;
    color: #80CE52;
}

/* login as bar*/
#subheader.navbar.HP-bar-top,
.HP-bar-top#subheader .links {
    background: #1c2431;
    height: 26px;
    min-height: 26px;
}

    #subheader.navbar.HP-bar-top .innerLinks {
        line-height: 26px;
    }

#subheader .container {
    padding-right: 10px;
}

#subheader img {
    margin: 5px 5px 5px 20px;
}

.HP-bar-top#subheader img {
    margin: 0 0 0 20px;
    height: 26px;
}

.HP-bar-top#subheader .title {
    font-size: 16px;
    line-height: 26px;
    color: #5e708a;
    font-family: 'Montserrat-bold', sans-serif;
}

mark {
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.divider-bottom {
    border-bottom: solid 1px #ddd;
}

.nopadding {
    padding: 0 !important;
}

.nopadding-left {
    padding-left: 0 !important;
}

.nopadding-right {
    padding-right: 0 !important;
}

.nopadding-top {
    padding-top: 0 !important;
}

.nopadding-bottom {
    padding-bottom: 0 !important;
}


.nomargin {
    margin: 0 !important;
}

.nomargin-left {
    margin-left: 0 !important;
}

.nomargin-right {
    margin-right: 0 !important;
}

.nomargin-top {
    margin-top: 0 !important;
}

.nomargin-bottom {
    margin-bottom: 0 !important;
}

.margin-bottom {
    margin-bottom: 40px !important;
}

.margin-bottomHalf {
    margin-bottom: 20px !important;
}

.margin-top {
    margin-top: 20px !important;
}

.margin-topDouble {
    margin-top: 40px;
}

.block {
    display: block !important;
}

.relative {
    position: relative;
}

.last {
    margin-right: 0 !important;
}

.nowrap {
    white-space: nowrap;
}

h1 {
    /*color: red!important;*/
}

h1, h2, h3,
h4, h5, h6 {
    font-family: 'Montserrat-bold', sans-serif;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 2em;
    font-family: 'Montserrat',sans-serif;
    color: #666569;
}

h3 {
    font-size: 1.4em;
    color: #2b3d43;
    font-family: 'Montserrat',sans-serif;
    margin: 10px 0;
    font-weight: bold;
}

    h3.NAR-sub {
        font-weight: normal;
        font-size: 1.3em;
        margin-bottom: 20px;
    }

h4 {
    font-size: 1.2em;
    margin-top: 20px;
}

    h4.HP-assigned-label {
        margin: 0 0 20px;
        font-size: 1.2em;
        color: #47a447;
    }

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
    }

.invalid {
    background: #f9dcd2;
    border-color: #E8764D;
}

/* main layout
----------------------------------------------------------*/
.container.main {
    padding: 30px 15px 0 15px;
}

.content-wrapper {
}

.container-wrapper {
    width: 100%;
    min-height: 100%;
    position: relative;
}

.container-fluid {
    padding: 0 15px 0 15px;
    height: 100%;
    padding-bottom: 31px;
}

.container.fill {
    width: 100% !important;
}

#body {
}

.main-content {
    padding: 20px 20px 0 20px;
    margin: 0 0 45px;
    background: #ffffff;
}

    .main-content .contentWrapper {
        margin-bottom: 40px;
    }

.featured + .main-content {
}

header .content-wrapper {
}

#subheader .avatar {
    display: none;
    position: absolute;
}

#subheader .container.fill {
    padding: 0;
}

#subheader.navbar.HP-bar-top {
    background: #1c2431;
    height: 26px;
    min-height: 26px;
}

.HP-bar-top#subheader .links .innerLinks form {
    height: 26px;
    line-height: 26px;
}

    .HP-bar-top#subheader .links .innerLinks form a {
        background: rgba(0,0,0,.40);
    }

        .HP-bar-top#subheader .links .innerLinks form a:hover {
            background: rgba(0,0,0,.20);
        }

#subheader .links .innerLinks form {
    height: 40px;
    line-height: 40px;
}

    #subheader .links .innerLinks form a {
        color: #ffffff;
    }

.Client-bar-top#subheader .links .innerLinks,
.Client-bar-top#subheader .links .innerLinks form a {
    color: #8b9095;
}

    .Client-bar-top#subheader .links .innerLinks form a {
        background: rgba(192,192,192,0.3);
    }

        .Client-bar-top#subheader .links .innerLinks form a:hover {
            text-decoration: none;
            background: rgba(192,192,192,0.2);
            color: inherit;
        }

#subheader .links .innerLinks .user-name {
    padding-right: 15px;
    display: inline-block;
}

#subheader .links .innerLinks form a {
    display: inline-block;
    padding: 0 20px;
    background: rgba(0,0,0,.20);
}

    #subheader .links .innerLinks form a:hover {
        text-decoration: none;
        background: rgba(0,0,0,.15);
        color: #ffffff;
    }

.nav-wrapper {
    position: fixed;
    width: 100%;
    z-index: 9999;
}

#subheader.navbar {
    height: 42px;
    min-height: 42px;
    border: none;
}

#subheader.navbar {
    margin-bottom: 0;
    border-radius: 0;
}

.navbar-brand {
    display: none;
    position: absolute;
}

.navbar-collapse {
    padding: 0;
    max-height: none;
}


#left-col-sidebar {
    width: 205px;
}

#right-col-main {
    margin-left: 205px;
    height: 100%;
}

.col-xs-15 {
    width: 100%;
    float: left;
}

.helper-info-callout {
    padding: 10px 15px;
    background-color: #EDF6FD;
}

/* Sidebar
----------------------------------------------------------*/
.sidebar {
    background-color: #2a323e;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 0;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: block;
}

    .sidebar.Client-sidebar {
        background-image: url('../../Images/sidebar-photo-graphic.jpg');
        background-color: transparent;
    }

    .sidebar .navbar.navbar-default {
        background-color: inherit;
        border: none;
        min-height: 100%;
    }

    .sidebar h4 {
        color: #009ade;
        margin: 10px 0;
        font-family: 'Montserrat',sans-serif;
        font-size: 0.8em;
        text-transform: uppercase;
        padding: 0 0 0 20px;
    }

    .sidebar ul {
        padding: 0;
        width: 100%;
    }

ul.nav.navbar-nav.sidebar-sec.org-sec.margin-top {
    border-top: solid 2px #1c2431;
    padding: 15px 0 0 0;
}

.sidebar ul li {
    list-style: none;
    clear: both;
    padding: 0;
}

    .sidebar ul li a {
        padding: 10px 20px;
        color: #ffffff;
        font-family: 'Montserrat',sans-serif;
        font-weight: 500;
    }

.sidebar ul.nav.navbar-nav li a:visited {
    color: #ffffff;
}

.navbar-default .navbar-nav > li a:hover {
    background: rgba(195, 206, 250, .25);
}

.navbar-default .navbar-nav > li > a:hover {
    color: #ffffff;
    opacity: 1;
}

.sidebar #navbar .navbar-nav li a.navicon-hover-home,
.sidebar #navbar .navbar-nav li a.navicon-hover-storyline,
.sidebar #navbar .navbar-nav li a.navicon-hover-sketch,
.sidebar #navbar .navbar-nav li a.navicon-hover-statement,
.sidebar #navbar .navbar-nav li a.navicon-hover-exploration,
.sidebar #navbar .navbar-nav li a.navicon-hover-gettingfeedback,
.sidebar #navbar .navbar-nav li a.navicon-hover-myReportLink,
.sidebar #navbar .navbar-nav li a.navicon-hover-connectionGuideModel,

.sidebar #navbar .navbar-nav li a.navicon-hover-questions,
.sidebar #navbar .navbar-nav li a.navicon-hover-HPclients,
.sidebar #navbar .navbar-nav li a.navicon-hover-HPwhoyouarematters,
.sidebar #navbar .navbar-nav li a.navicon-hover-HPprofile,
.sidebar #navbar .navbar-nav li a.navicon-hover-HPdemoaccount,
.sidebar #navbar .navbar-nav li a.navicon-hover-Helpingprofessionals,
.sidebar #navbar .navbar-nav li a.navicon-hover-HPemailtemplates,
.sidebar #navbar .navbar-nav li a.navicon-hover-HPorganizationsetting,
.sidebar #navbar .navbar-nav li a.navicon-hover-HPclientresources,
.sidebar #navbar .navbar-nav li a.navicon-hover-HPfeedback,
.sidebar #navbar .navbar-nav li a.navicon-hover-HPPurchaseCredit,
.sidebar #navbar .navbar-nav li a.navicon-hover-Admindashboard,
.sidebar #navbar .navbar-nav li a.navicon-hover-Adminguidebookcode,
.sidebar #navbar .navbar-nav li a.navicon-hover-Adminadministrators,
.sidebar #navbar .navbar-nav li a.navicon-hover-Adminorganizations,
.sidebar #navbar .navbar-nav li a.navicon-hover-Adminhelpingpros,
.sidebar #navbar .navbar-nav li a.navicon-hover-Adminclients,
.sidebar #navbar .navbar-nav li a.navicon-hover-AdmincreditPurchase,
.sidebar #navbar .navbar-nav li a.navicon-hover-Adminresources,
.sidebar #navbar .navbar-nav li a.navicon-hover-HPEventPlanning,
.sidebar #navbar .navbar-nav li a.navicon-hover-HPEventListing {
    background: rgba(195, 206, 250, .4);
    color: #ffffff;
    opacity: 1;
    border-left: solid 5px #f9af25;
    padding: 10px 20px 10px 15px;
}

/* sidebar - bottom section */
.sidebar .nav.navbar-nav.support-bottom {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,.25);
}

ul.nav.navbar-nav.sidebar-sec.support-bottom.client-side {
    background-color: transparent;
    margin-bottom: 20px;
}

    ul.nav.navbar-nav.sidebar-sec.support-bottom.client-side li {
        font-size: 0.9em;
        clear: none;
    }

.sidebar ul.nav.navbar-nav.support-bottom li a {
    padding: 5px 20px;
    font-size: 0.9em;
    color: #8b9095;
}

.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}

/* sidebar styles based on user */
/* CLIENT SIDEBAR */
.sidebar.Client-sidebar {
    background-size: cover;
    background-position: center center;
}

    .sidebar.Client-sidebar .nav.navbar-nav.support-bottom li a {
        color: #d6defe;
    }

/*--- sidebar end ----*/

html, body, .container-fluid, .row {
    height: 100%;
}

    .row.client-reg-page {
        height: auto;
    }

.alert {
    margin: 0 -15px 0 190px;
    border-radius: 0;
    padding: 10px 15px;
}

    .alert .close {
        font-size: 14px;
        padding: 0 2px;
        margin: 0 2px;
    }

    .alert.alert-success {
        color: #ffffff;
        background-color: #18bb9c;
        text-align: center;
    }

.row.client-reg-page .alert.alert-success {
    margin: 0 auto;
    max-width: 550px;
}

.alert.inside-wrapper {
    margin: 0 0 15px;
}

.alert.alert-success .link {
    text-decoration: underline;
    color: #e9f6fc;
}

.close {
    line-height: 0.8;
}

footer {
    padding: 5px 15px;
    text-align: right;
    font-family: 'Montserrat',sans-serif;
    font-size: 0.8em;
    line-height: 20px;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 31px;
    border-top: solid 1px #e4e4e4;
    background-color: #ffffff;
    z-index: 10;
}

    footer a {
        margin-right: 0 5px;
        border-right: solid 1px #bbbfc1;
        padding: 0 7px;
    }

/* site title
----------------------------------------------------------*/
.site-title {
}

    .site-title a, .site-title a:hover, .site-title a:active {
    }


/* login
----------------------------------------------------------*/
#login {
}

    #login a {
    }

        #login a.username {
        }

    #login ul {
    }

    #login li {
    }

/* WYAM Registration page > Register > Survey > Intro
----------------------------------------------------------*/
.WYAM-loginpage {
    font-family: 'Hind', sans-serif;
}

    .WYAM-loginpage .wrapper {
        font-family: 'Hind', sans-serif;
    }

        .WYAM-loginpage .wrapper h1 {
            margin-top: 0;
        }


#WYAM-register h1 img {
    max-width: 400px;
    width: 100%;
    height: auto;
}

#WYAM-register h3 {
    font-size: 17px;
    font-weight: normal;
}

#WYAM-register p.WYAM-title-text {
    font-family: 'Montserrat',sans-serif;
    margin-top: 5px;
}

.WYAM-loginpage .wrapper h3 {
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 0;
}

.WYAM-loginpage .wrapper p {
    font-size: 14px;
}

#WYAM-register {
    margin: 0 auto;
    max-width: 750px;
    padding: 35px 35px 15px 35px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
    -o-box-shadow: 0 0 10px rgba(0,0,0,.3);
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    color: #666;
}

    #WYAM-register .row.first {
        margin-top: 30px;
        margin-bottom: 10px;
    }

        #WYAM-register .row.first img#guidebook-code {
            text-align: right;
            padding-left: 10px;
            margin-top: -20px;
            max-width: 329px;
            width: 100%;
        }

    #WYAM-register .form-group {
        padding: 0;
    }

        #WYAM-register .form-group label {
            padding-right: 0;
        }

    #WYAM-register select {
        width: 100%;
    }

    #WYAM-register .WYAM-btn-success {
        width: 200px;
        background: #18bb9c;
        border-color: #18bb9c;
        font-weight: bold;
    }

.mobile-only {
    display: none;
}

.survey .survey-rating {
    margin-top: 30px;
    color: #5160a5;
    font-family: 'Montserrat',sans-serif;
}

.survey .row.survey-header {
    border-bottom: solid 2px #ccd1e6;
    padding: 0 0 5px 0;
    color: #666;
}

.survey .col-md-2 {
    display: inline-block;
    padding: 0;
    text-align: center;
    font-family: 'Montserrat',sans-serif;
}

.survey label {
    color: #666;
}

.survey .col-md-2 input[type="radio"] {
    margin: 18px 5px;
}

.survey .row.yes-no-question {
    padding: 10px 0 0 0;
}

.survey .row.question p,
.survey .row.comments label {
    margin: 10px 0;
    font-weight: bold;
}

.survey .row.question:nth-child(odd) {
    background: #eef0f7;
}

.survey .row.comments {
    border-top: solid 2px #ccd1e6;
}

    .survey .row.comments textarea {
        margin-top: 15px;
        max-height: 200px;
    }

.survey .row#submit-survey {
    position: relative;
}

.survey .skip-btn {
    margin: 5px;
    color: #969696;
    position: absolute;
    right: 0;
}

.intro h3 {
    border-bottom: solid 2px #ccd1e6;
    padding-bottom: 15px;
    line-height: 1.2em;
}

.intro .OST-csk-image img {
    width: 280px;
    margin-top: 20px;
    height: auto;
}

.intro .btn-ref-text {
    color: #18bb9c;
    font-style: italic;
    font-weight: bold;
}

.career-statement-text {
    font-weight: bold;
    font-style: italic;
    white-space: nowrap;
}

    .career-statement-text span:first-child {
        color: #5365ae;
    }

    .career-statement-text span:last-child {
        color: #f58130;
    }

.input-footer {
    font-size: 12px;
    color: #a6a6a6;
    background-color: #e4e4e4;
    max-width: 750px;
    margin: 0 auto;
    padding: 10px 0;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

/*------ Persistent Banner for WYAM accounts ------*/
.persistent-headacheBar {
    text-align: center;
    background: #F52A6D;
    color: white;
}

    .persistent-headacheBar p {
        padding: 5px 15px 3px;
        margin: 0;
    }

#maintenance-warning.persistent-headacheBar {
    background: #80CE52;
    /*background: #4c4c4c;*/
}

    #maintenance-warning.persistent-headacheBar p {
        font-weight: bold;
    }

/*------ Persistent Banner down for maintenance ------*/


/* WYAM HP Pages
----------------------------------------------------------*/
.WYAM-stats .header-box {
    border-right: solid 1px #e1dfe0;
}

    .WYAM-stats .header-box:last-child {
        border: none;
    }

    .WYAM-stats .header-box h5 {
        font-size: 14px;
        font-family: 'Hind', sans-serif;
    }

    .WYAM-stats .header-box h1 {
        margin-top: 10px;
    }

.HP-breakdown h3.title-box {
    padding: 20px 0 5px 0;
    margin-top: 30px;
    color: #5365AE;
    border-top: dotted 2px #f6f6f6;
}

.HP-breakdown .header-box {
    margin: 0 0 10px;
}

.WYAM-table td span {
    display: none;
}

/* menu
----------------------------------------------------------*/
ul#menu {
}

    ul#menu li {
    }

        ul#menu li a {
        }

            ul#menu li a:hover {
            }

/* page elements
----------------------------------------------------------*/
/* mobile nav */

/* page titles */

/* nav tabs */
.nav-tabs {
    margin: -20px -20px 20px -20px;
    background-color: #F9FAFA;
    border-bottom: 2px solid #e4e4e4;
}

ul.nav.nav-tabs li {
    margin: 0 10px 0 20px;
    font-weight: bold;
    font-size: 1.2em;
}

    ul.nav.nav-tabs li a {
        margin: 10px 0;
        padding: 5px 10px;
        color: #B1B8B9;
        -webkit-border-radius: 35px;
        -moz-border-radius: 35px;
        border-radius: 35px;
    }

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus {
    background-color: #f58130;
    border: none;
    color: #46474A;
}

.nav.nav-tabs li.active a {
    color: #ffffff;
}

.nav.nav-tabs li a {
    border: none;
}

/* bs override */
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    border: none;
    color: #ffffff;
    background-color: #263c89;
}

/* dropdowns */
/*-- FF overrides --*/
select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

    select:focus {
        width: auto;
        position: relative;
    }

@-moz-document url-prefix() {
    select {
        background-image: url('../../Images/select-arrow.gif') !important;
        background-repeat: no-repeat;
        background-position: 95% center;
    }
}

/*--- BUTTON STYLES ----*/
.btn-primary {
    color: #fff;
    background-color: #009ade;
    border-color: #0299ce;
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: #0299ce;
    }

input[type=submit],
input[value=Save] {
    min-width: 100px;
}

/* filtering buttons */
/*CareerSketch filter*/
.btn-group.btn-group-sm.filter {
    margin-bottom: 15px;
}

/* table styles */
.table thead tr th,
.table tbody tr td {
    padding: 8px 15px;
}

.table tbody {
    border-bottom: solid 1px #e7ecee;
}

    .table tbody tr td {
        height: 60px;
        color: #5A6675;
        border-top: none;
        padding: 8px 15px;
    }

.table.table-striped-custom {
    margin-top: 15px;
}

    .table.table-striped-custom thead tr th {
        border-bottom: 2px solid #009ade;
        color: #3BA4D2;
    }

    .table.table-striped-custom thead tr:first-child {
        border: none;
    }

    .table.table-striped-custom tr {
        border-left: solid 1px #e7ecee;
        border-right: solid 1px #e7ecee;
    }

        .table.table-striped-custom tr:nth-child(even) {
            background-color: #f6f6f6;
        }

        .table.table-striped-custom tr:last-child {
            border-bottom: solid 1px #e7ecee;
        }

/*-- ACCOUNT STATUSES --*/
/* table as */
.ac-status .btn-remind {
    margin-bottom: 20px;
    padding: 0;
}

.table tr td.td-status-Active div {
    color: #339933;
    font-weight: bold;
}

.table tr td.td-status-Invited,
.form-group.ac-status.ac-status-Invited {
    color: #1078b5;
    font-weight: bold;
}

td.td-status-Invited div {
    display: inline;
}

td.td-status-Invited span.invited-date {
    font-weight: normal;
    font-size: 0.9em;
}

td.td-status-Invited input[name="btnResendRegEmail"] {
    padding: 0;
}

.table tr td.td-status-Invited input,
.form-group.ac-status.ac-status-Invited input {
    border: none;
    background: inherit;
    color: #009ade;
    text-decoration: underline;
}

.form-group.ac-status.ac-status-Invited input {
    font-size: 14px;
}

.table tr td.td-status-Trial {
    color: #263c89;
}

.table tr td.td-status-Archive {
    color: #8b9db5;
    font-style: italic;
}

/* ==== Client Account Status ==== */
.form-group.ac-status {
    margin-bottom: 20px;
}

.ac-status-Invited {
    background-color: #e8f5fd;
    padding: 10px;
    border-radius: 3px;
    border: solid 1px #b9e1f9;
}

.form-group.ac-status.ac-status-Invited .ac-label {
    margin-bottom: -10px;
}

.form-group.ac-status.ac-status-Invited .success {
    color: #3a8844;
    font-weight: bold;
}

    .form-group.ac-status.ac-status-Invited .success:before {
        content: "\f00c ";
        font-family: FontAwesome;
    }

.ac-status label.client-status {
    vertical-align: top;
}

.ac-status .status-action-btn {
    margin: 0 5px;
}

.client-status span {
    padding: 3px 10px;
    border-radius: 5px;
    color: #ffffff;
}

    .client-status span.success {
        color: #3dbb94;
    }

#divActiveWithNoPassword > span,
#divActive > span {
    background-color: #339933;
}

#divArchived span {
    background-color: #8b9db5;
    font-style: italic;
}

.status-action-btn {
    display: inline-block;
}

.plain-link {
    background: none;
    border: none;
    text-decoration: underline;
    color: #8F8F8F;
}

.inline-success-massage {
    color: #3dbb94;
    padding: 10px 0;
}

/*-- Table Action buttons --*/
.table.table-striped-custom tr td.actions-td {
    padding: 0;
    white-space: nowrap;
    text-align: right;
}

.table tr td.actions-td .td-btn {
    display: inline-block;
}

.table.table-striped-custom tr td:last-child {
    padding: 5px 20px 5px 0;
}

.table.table-striped-custom tr td:first-child {
    padding: 5px 20px;
}

.table tr td .td-btn a {
    padding: 4px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    white-space: nowrap;
    background-color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    float: left;
    display: inline-block;
    margin: 2px;
}

    .table tr td .td-btn a:hover, .table tr td .td-btn a:focus {
        text-decoration: none;
    }

.table tr td .td-Edit-btn a {
    border: solid 2px #C4C5C1;
    color: #696969;
}

.table tr td .td-Login-As-btn a {
    border: solid 2px #C4C5C1;
    color: #696969;
    background-color: #f6f6f6;
}

.table tr td .td-Delete-btn a {
    border: solid 2px #c66;
    color: #c66;
}

/* Key Legends */
.panel-legend {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: solid 1px #e7ecee;
    margin-top: 15px;
}

    .panel-legend .panel-heading {
        background-color: #ecf0f1;
        border-bottom: solid 2px #3a8844;
    }

        .panel-legend .panel-heading .panel-title {
            text-transform: uppercase;
            font-size: .875em;
            color: #3a8844;
            font-weight: bold;
        }

    .panel-legend .panel-body strong {
        display: block;
        padding: 10px 0 0 0;
        border-top: solid 1px #e7ecee;
    }

/* Pagination */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: #009ade;
}

/* table search filters */
/*-- button style*/
.table-filter-btn {
    margin-right: 10px;
}

/* features */

/* ordered list */

/* forms */

.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}

.form-group {
    margin-bottom: 0;
}

.form-control {
    color: #848484;
}

.form-group input.form-control,
.form-group textarea.form-control,
.form-group select {
    color: #000;
    min-height: 35px;
}

.form-group-select {
    height: 35px;
    color: #999;
}

input.form-control,
select.form-control,
textarea.form-control {
    margin-bottom: 20px;
}

select.form-control {
    width: 100%;
}

.form-group input.form-control:disabled,
.form-group textarea.form-control:disabled {
    color: #848484;
}

.form-group-small-input input {
    width: 100px;
}

label {
    font-weight: normal;
    color: #69788b;
}

.label-b b {
    color: #3a8844;
}

#pw-not-created-holder {
    margin: 10px 0;
    padding: 5px 10px 5px;
    background-color: #ddeef5;
    border-radius: 5px;
}

    #pw-not-created-holder i {
        color: #EBA709;
        margin: 0 5px 0 0;
    }

    #pw-not-created-holder label {
        display: block;
        margin: 10px 0 0;
        font-weight: bold;
    }

input[type=checkbox] {
    vertical-align: middle;
    padding-right: 10px;
    margin: 0 5px 0 0;
}

.form-group.textarea-vert textarea {
    resize: vertical;
}

.form-group.textarea-vert.300-mh textarea {
    max-height: 500px;
}

textarea {
    resize: vertical;
}

.form-control, .btn {
    padding: 6px 10px;
    height: auto;
}

/*Disabled and Readonly input*/
input[readonly] {
    background-color: #eeeeee !important;
    color: #848484 !important;
}

/*Helping Pro - Client Search*/
.credits-holder {
    max-width: 600px;
    border-radius: 10px;
    border: dashed 3px #dddddd;
    margin: 0px 5px 15px 5px;
    padding: 15px;
    display: block;
   
    align-items: center;
}

    .credits-holder .add-more-credits {
        color: #009ade;
        white-space: nowrap;
        text-decoration: underline;
    }

    .credits-holder .btn-sm.pull-right {
        margin: 3px;
        min-width: 100px;
    }

#HP-td {
    color: #009ade;
    font-weight: bold;
}

#HP-badge {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    line-height: 25px;
    text-align: center;
    background: #f58130;
    display: inline-block;
    margin-left: 5px;
}

.row.HP-client-searchbar {
    margin: 0 0 10px 0;
}

.HP-client-searchbar .input-group .input-group-btn {
    vertical-align: top;
}

.HP-client-searchbar .input-group .form-group {
    min-width: 110px;
}

.HP-client-searchbar .input-group input.form-control {
    max-width: none;
    min-height: 35px;
    border-radius: 0 !important;
}

.HP-client-searchbar .input-group .form-group .control-label {
    display: none;
    position: absolute;
}

.HP-client-searchbar .input-group .form-group .form-control {
    border-right: none;
    height: 34px;
    float: none;
}

.HP-client-searchbar .input-group .input-group-btn .btn.btn-primary {
    border-color: #357ebd;
    background-color: #ffffff;
    color: #8b9db5;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    height: 35px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: none;
}

/* Purchase credits table */
/*.credits-table {
    max-width: 400px;
    border: solid 1px #2a323e;
    border-top: none;
    margin: 10px 0;
}

    .credits-table-row.title-row .credits-table-row-cell{
        background: #009ade;
        color: #ffffff;
        padding: 5px 0;
    }

    .credits-table .credits-table-row{

    }
    .credits-table-row .credits-table-row-cell:first-child{
        border-right: solid 1px #2a323e;
    }

        .credits-table .credits-table-row .credits-table-row-cell{
            min-width: 170px;
            border-top: solid 1px #2a323e;
            vertical-align: middle;
            display: table-cell;
            padding: 5px 15px;
        }*/

.credits-table {
    max-width: 425px;
}

    .credits-table td h6 {
        font-family: 'Montserrat',sans-serif;
        font-weight: bold;
    }

    .credits-table td {
        padding: 5px 20px !important;
    }

/* mini forms */
.mini-form-holder {
    width: 100%;
    float: left;
    margin: 10px 0 20px;
    border-bottom: solid 2px #e4e4e4;
    border-top: solid 2px #e4e4e4;
    padding-bottom: 10px;
}

    .mini-form-holder h4 {
        color: #698BB6;
    }

/*--  --*/
button.btn.btn-default.table-filter-btn {
    background: #ffffff;
    color: #009ade;
    border-radius: 25px;
    padding: 6px 15px;
    margin: 0 5px;
    border: solid 1px #1277a3;
}

    button.btn.btn-default.table-filter-btn:disabled {
        opacity: 1;
        background: #009ade;
        color: #ffffff;
    }

    button.btn.btn-default.table-filter-btn:focus {
        background: #009ade;
        color: #ffffff;
    }

.summary-total,
.paging-summary {
    padding: 6px 10px;
    color: #8b9db5;
    vertical-align: top;
    margin: 20px 0;
    text-align: right;
}

.paging-summary,
.pagination-container {
    display: inline-block;
}

/* Helpig Pro Demo Account */
.NAS-status {
    display: inline-block;
    color: #009ade;
    font-size: 1em;
    margin: 0 0 5px 0;
    font-weight: bold;
}

    .NAS-status.editClient-page {
        display: block;
        margin-top: 10px;
    }

        .NAS-status.editClient-page label {
            font-size: 14px;
            display: block;
            float: none;
        }

        .NAS-status.editClient-page #NasStatus {
            font-size: 14px;
        }

/* Date Picker */
.ui-widget {
    font-family: 'Montserrat',sans-serif;
}

.ui-widget-header {
    background: #75bde8;
    color: #fff;
}

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        background: #fff;
        border: solid 1px #8b9db5;
    }

    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
        background: #edf1f3;
    }

a.ui-state-default.ui-state-active {
    background-color: #009ade;
    color: #fff;
}

#calDiv .controls {
    position: relative;
}

    #calDiv .controls .form-control.hasDatepicker {
        float: left;
        position: relative;
    }

img.ui-datepicker-trigger {
    position: absolute;
    right: 10px;
    top: 6px;
}

#TrialcalDiv {
    position: relative;
}

    #TrialcalDiv img.ui-datepicker-trigger {
        top: 30px;
    }

#calDiv .controls .input-group-addon {
    width: 45px;
    height: 34px;
    position: absolute;
    right: 0;
}

/* add margin under form when buttons exitst*/
.btn-group-under-form {
    margin-top: 10px;
}

.btn-group.nowrap {
    white-space: nowrap;
}

    .btn-group.nowrap .btn {
        float: none;
        display: inline;
    }

/* form validation */
span.help-block.field-validation-error {
    color: #E24C2B;
    display: inline-block;
    padding: 0 5px;
    font-size: 0.85em;
    float: right;
    width: 100%;
    margin-top: -20px;
}

/*.validation-summary-errors ul li:before{
    content: "\f06a";
    font-family: FontAwesome;
    padding-right: 5px;
}*/

/*checkbox*/
.chkboxWrapper.inline .controls input {
    width: 5%;
    float: left;
    margin: 6px 0;
}

.chkboxWrapper.inline .controls label {
    width: 95%;
    float: left;
    margin-bottom: 20px !important;
}

/*Radio*/
input[type="radio"] {
    position: relative;
    top: 2px;
    margin-left: 10px;
}

/*custom totals blocks DB Analytics*/
.DA-totals .block {
    padding: 10px 0 5px;
    margin-right: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    max-width: 140px;
}

    .DA-totals .block .title {
        font-family: 'Montserrat',sans-serif;
    }

    .DA-totals .block .num {
        font-family: 'Montserrat-bold', sans-serif;
        font-size: 2em;
        padding: 5px 0 0;
        color: #3e3f3f;
    }

.circle {
    position: relative;
    display: block;
    background-color: transparent;
    color: #222;
    text-align: center;
    margin: 0 2px;
}

    .circle:after {
        display: block;
        padding-bottom: 100%;
        width: 100%;
        height: 0;
        border-radius: 50%;
        background-color: #ffffff;
        border: solid 1px #ddd;
        content: "";
    }

.circle__inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.circle__wrapper {
    display: table;
    width: 100%;
    height: 100%;
}

.circle__content {
    display: table-cell;
    padding: 1em;
    vertical-align: middle;
}

/* Modals */
.modal-open .modal, .btn:focus {
    outline: none !important;
}

.modal {
    overflow-y: auto;
    text-align: center;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.bootstrap-dialog.type-primary .modal-header {
    background-color: #F1B158 !important;
    color: #fff;
}

.bootstrap-dialog.type-warning .modal-header {
    color: #fff;
    background-color: #f0ad4e;
}

.modal-content {
    max-width: 900px;
    margin: 0 auto;
}

    .modal-content label[for=PossibilityText] {
        font-weight: bold;
        color: #1D398D;
    }

    .modal-content label[for=Clue] {
        font-weight: bold;
        color: #1770b7;
        text-transform: uppercase;
    }

    .modal-content label[for=Action] {
        font-weight: bold;
        color: #f48245;
        text-transform: uppercase;
    }

/*remove scroll bar when modal opens*/
body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    margin-right: 0;
}

/**/
.modal-header {
    padding: 15px 15px 10px;
    text-align: center;
    font-family: 'Montserrat-bold', sans-serif;
    font-size: 1.2em;
    border: none;
}

.bootstrap-dialog-message label {
    margin-top: 5px;
}

.bootstrap-dialog-message b {
    font-family: 'Montserrat', sans-serif;
    font-weight: normal;
}

    .bootstrap-dialog-message b b {
        font-weight: bold;
        font-size: 1.2em;
    }

.modal-footer {
    padding: 10px 15px;
    margin-top: 0;
    text-align: right;
    border-top: 1px solid #e5e5e5;
    background: #f6f6f6;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

    .modal-footer .btn-warning {
        background-color: #F34541;
        color: #fff;
        font-weight: bold;
        border-color: #D02925;
    }

        .modal-footer .btn-warning:hover {
            background: #DE2D29;
        }


/* Custom Modals - inline label and input */
.custom-inline-form .control-group {
    display: inline-flex;
    width: 100%;
}

    .custom-inline-form .control-group .controls {
        width: 100%;
    }

.custom-inline-form label.control-label {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.custom-inline-form input[type=text] {
}

.custom-inline-form select#BirthYear,
.custom-inline-form select#ExpiryStatus,
.custom-inline-form input#datepicker {
    max-width: 150px;
}

#calDiv img {
    display: none;
}

#calDiv.event-date img {
    display: initial;
}

#calDiv input[readonly].form-control.datepicker {
    background: #ffffff !important;
}

.custom-inline-form input#datepicker {
    background: url(/Images/Calender.png) no-repeat 95% 6px;
}

.custom-inline-form .form-group.force-push {
    margin-left: 25%;
}

/* -- Buy Credits Page -- */
.credits-table table th {
    background-color: #009ade;
    color: #ffffff !important;
}

.buy-credits-form .btn {
    margin: 10px 0;
}

#spnSubTotal {
    color: #5cb85c;
    font-weight: bold;
    font-size: 1.2em;
}

/* Buy Events Page */

.event-services-table{
    max-width: 650px;
}

    .event-services-table td {
        vertical-align: top !important;
        padding: 20px 15px !important;
    }

.event-services-table td h6 {
    font-family: 'Montserrat',sans-serif;
    font-weight: bold;
}

.event-services-table tr td:first-child {
    white-space: nowrap;
}

        /* content */
        /* login page */
        .validation-summary-errors {
            background: #f9dcd2;
            color: #9e3915;
            border: solid 2px #E8764D;
            padding: 10px 15px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

    .validation-summary-errors ul {
        margin: 0;
        padding: 0;
    }

/* --- Exploration Plan / Career Sketch --- */
.Exploration-plan .custom-row h3 {
    margin-top: 20px;
    color: #5365ae;
    font-weight: bold;
    text-transform: uppercase;
}

.Exploration-plan .tagwrapper .tag.tag-possibilities:hover {
    cursor: pointer;
}

.tagwrapper .text {
    color: inherit;
    line-height: 1.4em;
}

.tag-actions {
    margin-top: 5px;
}

    .tag-actions .action-ico {
        margin: 0 2px;
        padding: 0 2px;
    }

        .tag-actions .action-ico:hover {
            cursor: pointer;
        }

.star-type-tag {
    margin-top: 5px;
}

    .star-type-tag,
    .star-type-tag .type-tag {
        display: inline-block;
    }

#divSelectPossibility {
    background: #18bb9c;
    padding: 10px 15px;
    margin-top: 20px;
}

    #divSelectPossibility p {
        margin: 0;
        color: #ffffff;
        font-size: 18px;
    }

        #divSelectPossibility p span.uppercase {
            text-transform: uppercase;
            font-weight: bold;
        }

.careersketchpanel .tag-actions {
    display: inline-block;
    float: right;
}

.careersketchpanel .star-type-tag .type-tag {
    border: solid 1px #a8b0d7;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 12px;
    color: #8590c7;
    padding: 4px 8px;
    display: inline-block;
    line-height: 10px;
    margin: 0 5px;
    visibility: visible !important;
    position: relative !important;
}


.careersketchpanel .type-tag-feedback {
    border: solid 1px #a8b0d7;
    /*//-webkit-border-radius: 20px;*/
    /*-moz-border-radius: 20px;*/
    /*//border-radius: 20px;*/
    font-size: 12px;
    /*transparent color: #8590c7;*/
    padding: 4px 8px;
    display: inline-block;
    line-height: 10px;
    margin: 0 5px;
    border-color: transparent;
    visibility: visible !important;
    position: relative !important;
}


    .careersketchpanel .type-tag-feedback .desire {
        border: solid 1px #a8b0d7;
        /*//-webkit-border-radius: 20px;*/
        /*-moz-border-radius: 20px;*/
        /*//border-radius: 20px;*/
        font-size: 12px;
        color: #8590c7;
        padding: 4px 8px;
        display: inline-block;
        line-height: 10px;
        margin: 0 5px;
        visibility: visible !important;
        position: relative !important;
    }


    .careersketchpanel .type-tag-feedback .strength {
        border: solid 1px #a8b0d7;
        /*//-webkit-border-radius: 20px;*/
        /*-moz-border-radius: 20px;*/
        /*//border-radius: 20px;*/
        font-size: 12px;
        color: #8590c7;
        padding: 4px 8px;
        display: inline-block;
        line-height: 10px;
        margin: 0 5px;
        visibility: visible !important;
        position: relative !important;
    }



.careersketchpanel .noitem.blank-item {
    margin: 0;
    padding: 0 10px;
}

    .careersketchpanel .noitem.blank-item p {
        margin: 0;
        padding: 10px 25px 10px 0;
        font-size: 10pt;
        background: url(/Images/career-sketch/arrow.png) no-repeat top right;
        color: #7c7c7c;
        max-width: 165px;
    }

.careersketchpanel #PossibilitiesTagWrapper {
    padding-top: 0 !important;
}

/* #of Clues and Inspired Actions tied to that Possibility */
.inline.counter {
    display: inline-block;
    margin: 0 0 0 5px;
}

.counter.Clues-tag {
    color: #1770b7;
}

.counter.IA-tag {
    color: #f48245;
}

.totalActionByExplorationId,
.totalClueByExplorationId {
    float: right;
    padding: 0 0 0 3px;
}

.overdue {
    font-weight: bold;
    color: #c81e23;
}

.overdue-ico {
    color: #c81e23;
    display: inline-block;
    font-size: 9px;
}

    .overdue-ico i {
        color: inherit;
    }

/* Possibilities section - Ex Plan*/
.tagwrapper .tag.tag-possibilities.active {
    background-color: #97a2ce;
    color: #ffffff;
    border: none;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 8px;
}

    .tagwrapper .tag.tag-possibilities.active .counter.Clues-tag,
    .tagwrapper .tag.tag-possibilities.active .counter.IA-tag {
        color: #ffffff;
    }

    .tagwrapper .tag.tag-possibilities.active .active-cue {
        height: 5px;
        background: #1770b7; /* Old browsers */
        background: -moz-linear-gradient(left, #1770b7 0%, #1770b7 50%, #f48245 51%, #f48245 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #1770b7 0%,#1770b7 50%,#f48245 51%,#f48245 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #1770b7 0%,#1770b7 50%,#f48245 51%,#f48245 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1770b7', endColorstr='#f48245',GradientType=1 ); /* IE6-9 */
        margin-top: 10px;
        clear: both;
    }

    .tagwrapper .tag.tag-possibilities.active .tag-actions .type-tag {
        border: solid 1px #7483be;
        color: #7483be;
        background-color: #edf1f3;
    }

.tagwrapper .tag.tag-possibilities.active {
    background-color: #97a2ce;
    color: #ffffff;
    border: none;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    position: relative;
}

    .tagwrapper .tag.tag-possibilities.active .active-cue {
        height: 5px;
        background: #1770b7; /* Old browsers */
        background: -moz-linear-gradient(left, #1770b7 0%, #1770b7 50%, #f48245 51%, #f48245 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #1770b7 0%,#1770b7 50%,#f48245 51%,#f48245 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #1770b7 0%,#1770b7 50%,#f48245 51%,#f48245 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1770b7', endColorstr='#f48245',GradientType=1 ); /* IE6-9 */
        position: absolute;
        bottom: 0;
        width: 100%;
        margin-left: -8px;
    }

    .tagwrapper .tag.tag-possibilities.active .tag-actions .type-tag {
        border: solid 1px #7483be;
        color: #7483be;
        background-color: #edf1f3;
    }

    .tagwrapper .tag.tag-possibilities.active .edit-ico i {
        color: #edf1f3;
    }

.tagwrapper .tag.tag-possibilities [data-role="edit"] {
    float: right;
    color: #5677dc;
}

.Exploration-plan .tagwrapper .tag.tag-possibilities [data-role="edit"] {
    line-height: 31px;
    margin-bottom: -6px;
    height: 31px;
}

.tag.tag-possibilities.show-all {
    text-align: center;
    font-weight: bold;
}

.tag.tag-possibilities.show-all {
    text-align: center;
    font-weight: bold;
}

    .tag.tag-possibilities.show-all .text {
        line-height: 43px;
        font-size: 1.2em;
    }

.tagwrapper .tag.tag-possibilities .tag-actions .type-tag,
#storyteller-answer-items .tag-possibilities .type-tag,
.NAR-poss-tag {
    border: solid 1px #a8b0d7;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 12px;
    color: #8590c7;
    padding: 4px 4px;
    display: inline-block;
    line-height: 10px;
    margin: 0;
    visibility: visible !important;
    position: relative !important;
}




.NAR-poss-tag {
    vertical-align: text-top;
    margin-top: -3px;
}

.tagwrapper .tag.tag-possibilities .action-ico i {
    color: #5677dc;
    display: inline-block;
}

.tagwrapper .tag .ex-plan-ico:hover {
    cursor: pointer;
}

/* Clues and Inspired Actions */
.EP-Poss-container {
    border: solid 1px #d6d6d7;
    margin: 30px 0 0;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    position: relative;
}

    .EP-Poss-container .Clues-col,
    .EP-Poss-container .IA-col {
        margin-bottom: 20px;
    }

    .EP-Poss-container h3 {
        margin: 10px 0 3px;
        font-size: 18px;
        display: inline-block;
    }


.W4C-puzzle-piece, .IA-puzzle-piece {
    background-color: #e4e4e4;
    padding: 10px 20px;
    min-height: 120px;
    margin-bottom: 10px;
}

    .W4C-puzzle-piece .btn-block {
        margin: 5px 0 0 0;
        line-height: 24px;
        padding: 0;
        background-color: #1770b7;
        border: none;
        width: 95%;
        white-space: normal;
    }

        .W4C-puzzle-piece .btn-block:hover {
            background-color: #0A6FC2;
        }

    .W4C-puzzle-piece .plain-link {
        color: #1770b7;
        margin: 5px;
        float: right;
    }

.Notes-header {
    background-color: #e4e4e4;
    padding: 10px 20px;
}

    .Notes-header h3 {
        text-transform: uppercase;
        font-family: 'Montserrat',sans-serif;
        font-weight: bold;
        color: #32474e;
    }

    .Notes-header .btn.btn-default {
        color: #ffffff;
        background-color: #32474e;
        font-weight: bold;
    }

#cluePanel .btn.btn-default {
    background-color: #1770b7;
    color: #fff;
    font-weight: bold;
}

#actionPanel .btn.btn-default {
    background-color: #f48245;
    color: #fff;
    font-weight: bold;
}

.EP-Poss-container input[readonly],
.bootstrap-dialog-message input[readonly] {
    background-color: #fff !important;
}

.ui-datepicker-calendar a.ui-state-default.ui-state-active {
    color: #212121;
}

.bootstrap-dialog-message img.ui-datepicker-trigger {
    right: 25px;
    bottom: 7px;
    top: inherit;
}

.show-all-selected {
    min-height: 60px;
}

.puzzle-join {
    position: absolute;
    margin-left: -20px;
    z-index: 999;
    left: 50%;
}

.W4C-puzzle-piece h3 span {
    color: #1770b7;
    text-transform: uppercase;
    font-weight: bold;
}

.W4C-puzzle-piece, .IA-puzzle-piece {
    background-color: #e4e4e4;
    padding: 10px 20px;
    min-height: 120px;
}

    .W4C-puzzle-piece.show-all-selected p.small, .IA-puzzle-piece.show-all-selected p.small {
        margin: 0 !important;
    }

    .W4C-puzzle-piece p.small, .IA-puzzle-piece p.small {
        position: absolute;
        top: 15px;
        right: 25px;
    }

.show-all-selected {
    min-height: 60px;
}

.puzzle-join {
    position: absolute;
    margin-left: -20px;
    z-index: 999;
}

.W4C-puzzle-piece h3 span {
    color: #1770b7;
    text-transform: uppercase;
    font-weight: bold;
}

.IA-puzzle-piece h3 span {
    color: #f48245;
    text-transform: uppercase;
    font-weight: bold;
}

.blank-item {
    margin-top: 20px;
}

.IA-puzzle-piece input.form-control,
.IA-puzzle-piece select.form-control,
.IA-puzzle-piece .input-group-btn:last-child > .btn {
    height: 34px !important;
    margin-bottom: 0;
}

.IA-puzzle-piece select.form-control {
    width: 100%;
}

.EP-Poss-container .tagItemsWrapper {
    padding: 0 10px;
}

.EP-Poss-container .tagwrapper {
    border-radius: 0;
    color: #a5a5a5;
}

    .EP-Poss-container .tagwrapper .tag {
        margin: 0;
        border-radius: 0;
        padding: 10px 0;
        border: none;
        overflow: hidden;
    }

.Possibility-text {
    color: #5a6675;
    word-wrap: break-word;
}

.EP-Poss-container .tagwrapper .tag .Possibility-tag {
    font-size: 12px;
    line-height: 12px;
    font-weight: normal;
}

.actions-col {
    text-align: right;
}

    .actions-col .action-btn {
        padding: 0 5px;
    }


.IA-puzzle-piece input.form-control,
.IA-puzzle-piece .input-group-btn:last-child > .btn,
.W4C-puzzle-piece input.form-control,
.W4C-puzzle-piece .input-group-btn:last-child > .btn,
.Notes-col input.form-control,
.Notes-col .input-group-btn:last-child > .btn {
    height: 34px !important;
    margin-bottom: 0;
}

.blank-item {
    padding: 10px 17px;
    font-size: 1.2em;
    margin-left: 10px;
}

.Clues-col .blank-item {
    /*border-left: solid 3px #1770b7;*/
}

.IActions-col .blank-item {
    /*border-left: solid 3px #f48245;*/
}

#itemNotePannel {
    padding: 10px 27px;
}

    #itemNotePannel .blank-item {
        padding: 0 0 20px 0;
    }

.EP-Poss-container .tagwrapper {
    border-radius: 0;
    color: #a5a5a5;
    padding: 0;
    border-bottom: dashed 1px #e4e4e4;
}

s .EP-Poss-container .Notes-col .tagwrapper .tag {
    padding: 0 0 0 20px;
}

.EP-Poss-container .Notes-col .tagwrapper:last-child {
    border: none;
}

.Possibility-text {
    color: #5a6675;
    line-height: 1.4em;
    margin-bottom: 5px;
}

.IA-item-container {
    margin-top: 20px;
}

    .IA-item-container .Possibility-tag span {
        margin-bottom: 3px;
        display: inline-block;
        white-space: normal;
        line-height: 1.2em;
    }

span.poss-tag-parent,
.Clues-col .Possibility-tag {
    color: #9a9ab1;
}

.EP-Poss-container .tagwrapper .tag .Possibility-tag {
    font-size: 12px;
    line-height: 12px;
    font-weight: normal;
}

.actions-col {
    text-align: right;
}

    .actions-col .action-btn {
        padding: 0 5px;
    }

    .actions-col .fa {
        color: #838181;
    }

        .actions-col .fa:hover {
            cursor: pointer;
        }

.IA-checkbox {
    text-align: center;
    padding: 0 5px;
    min-width: 30px;
}

    .IA-checkbox .fa {
        font-size: 1.4em;
        color: #cccccc;
        padding: 3px;
    }

        .IA-checkbox .fa:hover {
            cursor: pointer;
        }

        .IA-checkbox .fa.selected {
            font-size: 1.6em;
            color: #f9a870;
            padding: 3px;
        }


.myToolTip {
    position: relative;
    display: inline-block;
}

.actions-col .fa {
    color: #838181;
}

    .actions-col .fa:hover {
        cursor: pointer;
    }

.IA-checkbox {
    text-align: center;
}

    .IA-checkbox .fa {
        font-size: 1.6em;
        color: #cccccc;
        padding: 3px;
    }

        .IA-checkbox .fa.selected {
            font-size: 1.6em;
            color: #f9a870;
            padding: 3px;
        }


.myToolTip {
    position: relative;
    display: inline-block;
}

    .myToolTip .myToolTipText {
        visibility: hidden;
        font-family: 'Montserrat',sans-serif;
        font-size: 14px;
        background-color: #55595B;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 125%;
        white-space: nowrap;
    }

        .myToolTip .myToolTipText::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent #55595B transparent transparent;
        }

    .myToolTip:hover .myToolTipText {
        visibility: visible;
    }

.ex-plan-ico .myToolTip .myToolTipText {
    top: -35px;
    left: -600%;
    width: 170px;
}

.myToolTip .myToolTipText::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #55595B transparent transparent;
}

.myToolTip:hover .myToolTipText {
    visibility: visible;
}

.fa-stack /* font-awesome css override */ {
    vertical-align: top !important;
}

.overdue-ico.fa-stack {
    height: 18px;
    width: 18px;
    background: #c81e23;
    border-radius: 20px;
    display: inline-block;
    margin: 1px 0 0 5px;
}

.IA-date.overdue {
    color: #c81e23;
}

span.IA-type {
    font-family: 'Montserrat',sans-serif;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-left: solid 5px #e4e4e4;
    border-right: solid 5px #e4e4e4;
    padding: 0 5px;
    margin: 0 5px;
}

.ex-plan-ico .myToolTip .myToolTipText::after {
    top: 100%;
    right: 40%;
    margin-bottom: -5px;
    border-width: 5px;
    margin-top: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #55595b;
}



.fa-stack /* font-awesome css override */ {
    vertical-align: top !important;
}

.IA-date.overdue {
    color: #c81e23;
}

span.nowrap.IA-type {
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Montserrat',sans-serif;
    padding-right: 10px;
}

/* EP Notes */
.Notes-col {
    margin-top: 40px;
}

.Clues-col .tagwrapper .tag {
    font-weight: normal;
}

    .Clues-col .tagwrapper .tag .poss-item-col {
        border-left: solid 3px #1770b7;
    }

.EP-Poss-container .IActions-col .tagwrapper .tag {
    padding: 0;
    margin: 10px 0 !important;
    border-left: solid 3px #f48245;
}
/*==============================================*/
/*====== Add Clue from Career Statement ========*/
/*==============================================*/
.external-clue h1 {
    color: #5365ae;
}

.external-clue span.standout label {
    font-family: 'Montserrat',sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    display: block;
    margin-top: 20px;
}

    .external-clue span.standout label[for="Strengths"] {
        color: #009ade;
    }

    .external-clue span.standout label[for="NaturalInterests"] {
        color: #f9a870;
    }

    .external-clue span.standout label[for="Assets"] {
        color: #75bde8;
    }

    .external-clue span.standout label[for="Personal_Qualities"] {
        color: #3a8844;
    }

    .external-clue span.standout label[for="Strengths"] {
        color: #009ade;
    }

    .external-clue span.standout label[for="Other_People"] {
        color: #87b76b;
    }

    .external-clue span.standout label[for="Desires"] {
        color: #f58232;
    }

    .external-clue span.standout label[for="Natural_Interests"] {
        color: #f9a870;
    }

    .external-clue span.standout label[for="Strengths"] {
        color: #009ade;
    }

    .external-clue span.standout label[for="Assets"] {
        color: #75bde8;
    }

    .external-clue span.standout label[for="PersonalQualities"] {
        color: #3a8844;
    }

    .external-clue span.standout label[for="Strengths"] {
        color: #009ade;
    }

    .external-clue span.standout label[for="OtherPeople"] {
        color: #87b76b;
    }

.external-clue input[type="checkbox"] {
    margin-left: 10px;
}

.btn-add-clue {
    background-color: #1770b7;
    color: #fff;
    font-weight: bold;
    margin-top: 30px;
}

    .btn-add-clue:hover {
        color: white;
    }

.plain-link {
    margin: 5px 0;
    display: inline-block;
    text-decoration: underline !important;
    color: #1770b7;
    background: none;
    border: none;
}

    .plain-link:hover,
    .plain-link:active {
        background: none;
        color: #1770b7;
        box-shadow: none;
    }

.NAS .plain-link {
    border: none;
    color: #5cb85c;
}

    .NAS .plain-link:hover {
        background: none;
        border: none;
    }
/*==============================*/
/*====== Career Sketch ========*/
/*==============================*/
.careersketch {
    position: relative;
}

.careersketch-height {
    padding-bottom: 79px;
}

.row.filtering {
    margin: 0 0 3px 0;
    padding: 10px 0;
    background: #f6f6f6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

    .row.filtering a.btn.btn.star-filter {
        background-image: url('../../Images/Rating/AssetsEmpty.png');
        background-repeat: no-repeat;
        background-position: 7px;
        padding-left: 30px;
        background-color: #ffffff;
        color: #848280;
        border: solid 1px #c7c5c2;
    }

        .row.filtering a.btn.btn.star-filter.active {
            background-image: url('../../Images/Rating/AssetsFilled.png');
            background-repeat: no-repeat;
            background-position: 7px;
            padding-left: 30px;
            background-color: #5365ae;
            color: #ffffff;
            border-color: #5365ae;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

.row-filtering .btn:hover,
.row-filtering .btn:focus,
.row-filtering .btn:active {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.row.filtering form.pull-left {
    margin-left: 15px;
}

.filtering .col-md-9 p, .filtering .col-md-9 label {
    margin: 0;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
}

.filtering .col-md-3 p.pull-right {
    margin: 15px 0;
}

.filtering button {
    float: left;
}

    .filtering button img {
        vertical-align: top;
    }

.filtering select.story-select {
    margin-bottom: 0;
    padding: 7px 10px;
    height: 34px;
}

.rating-img:hover {
    cursor: pointer;
}

.careersketch.custom-row .col-md-15 {
    width: 20%;
}

.tag.tag-thoughtsandfeelings.tag-inline {
    width: 19.8%;
}

.careersketchpanel .header {
    position: relative;
}

.custom-width, #thoughtsandfeelings {
    padding: 0 2px;
    width: 100%;
}

    #thoughtsandfeelings .tag:nth-child(5n+1) {
        clear: both;
    }

.careersketchpanel #PossibilityTypes {
    margin-bottom: 8px;
}

.careersketchpanel .tag.tag-possibilities {
    position: relative;
}
    /*GO BACK TO THIS*/
    .careersketchpanel .tag.tag-possibilities .tag-actions {
        /*position: absolute;
        bottom: 5px;
        width: 100%;
        padding: 0 15px 0 0;*/
    }

#PossibilitiesTagWrapper {
    padding: 0 2px;
    position: relative;
}

    /*GO BACK TO THIS*/
    #PossibilitiesTagWrapper .tag-actions {
        /*bottom: 5px;
        width: 100%;
        position: absolute;*/
    }


#prefetch-possibilities {
    margin: -8px 5px 10px;
}

/* --- Career Statement --- */
.wyam-blue {
    color: #009ade;
}

.wyam-orange {
    color: #f58130;
}

.wyam-green {
    color: #3a8844;
}

.wyam-lblue {
    color: #75bde8;
}

.wyam-lorange {
    color: #f9a870;
}

.wyam-lgreen {
    color: #87b76b;
}

.wyam-lpurple {
    color: #5365ae;
}

#CS-empty-state {
    padding: 150px 15% 250px;
    background-image: url(../../Images/career-statement/empty-state-BG2.jpg);
    background-size: cover;
    margin-bottom: -25px;
}

#CS-empty-state-inner {
    padding: 20px;
    border-radius: 20px;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
}

#CS-empty-state-text {
    padding: 0 15px;
}

#CS-empty-state-inner h4 {
    line-height: 1.4em;
}

    #CS-empty-state-inner h4 a,
    #CS-empty-state-inner p a {
        color: #263c89;
    }

    #CS-empty-state-inner h4 .fa,
    #CS-empty-state-inner p .fa {
        color: #263c89;
        font-size: 0.8em;
    }

#CS-empty-state h3 {
    color: #fff;
    margin: 0;
    padding: 10px 5px;
    display: inline-block;
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0.6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

    #CS-empty-state h3 a {
        color: #f7c100;
    }

        #CS-empty-state h3 a:hover {
            color: #ecb114;
        }


.CareerStatement {
    margin-top: 30px;
}

.CareerStatement-holder {
    border: solid 1px #e4e0e0;
    padding: 20px 60px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: 'Montserrat',sans-serif;
    padding: 20px 0;
    color: #5e5e5e;
}

.tab-design {
    position: relative;
    top: -44px;
    border-bottom: solid 1px #e4e0e0;
    padding: 0 0 20px 0;
}

    .tab-design img {
        display: none;
    }

#print-Brand-id-tab {
    background: #fff url(../../Images/career-statement/Brand-id-tab.png) no-repeat;
    height: 58px;
    width: 75px;
}

.CS-header #write-custom-CS {
    text-align: center;
    margin: 5px 0 0 0;
}

    .CS-header #write-custom-CS a {
        color: #8b9095;
        font-family: 'Hind',sans-serif;
        text-decoration: underline;
    }

        .CS-header #write-custom-CS a:hover {
            color: #009ade;
        }

.CS-header h3 {
    margin: 20px 0 0 0;
    text-align: center;
    color: #5e5e5e;
}

    .CS-header h3 span {
        font-weight: bold;
    }

.print-no-page-break {
    padding: 10px 0;
}

.CS-section {
    position: relative;
    padding: 0 60px;
}

    .CS-section p {
        color: #5e5e5e;
        font-family: 'Montserrat',sans-serif;
    }

    .CS-section ul {
        padding: 0 5px 0;
        margin: 0 0 5px 40px;
        display: inline-block;
    }


    .CS-section li {
        color: #767676;
        line-height: normal;
        position: relative;
        font-family: 'Hind',sans-serif;
        line-height: 1.4em;
    }




        .CS-section li .list-highlight {
            padding: 1px 0;
        }

.narrativeAssessmentTag {
    word-break: break-all;
}

.CS-section ul li i.fa {
    visibility: hidden;
    padding: 0 5px;
    position: absolute;
    right: -29px;
    line-height: 1.4em;
    top: 0;
    cursor: pointer;
}

    .CS-section ul li i.fa.fa-road.exploration-plan-link {
        position: relative;
        visibility: visible;
        right: inherit;
        top: inherit;
    }

.write-your-own-CareerStatement i.fa.fa-road.exploration-plan-link {
    display: none;
}

.auto-generated-CareerStatement .CS-section:hover ul {
    background-color: #ebebeb;
    transition: all .2s;
}

    .auto-generated-CareerStatement .CS-section:hover ul .fa {
        visibility: visible;
    }

.CS-section .standout {
    text-transform: uppercase;
    font-weight: bold;
}

.CS-section.Desires-row span.standout,
.CS-section.Desires-row li .fa,
.CS-section.Desiers-row span.standout {
    color: #f58130;
}

.CS-section.Natural-Interests-row span.standout,
.CS-section.Natural-Interests-row li .fa {
    color: #f9a870;
}

.CS-section.Strengths-row span.standout,
.CS-section.Strengths-row li .fa {
    color: #009ade;
}

.CS-section.Assets-row span.standout,
.CS-section.Assets-row li .fa,
.CS-section.Assests-row span.standout {
    color: #75bde8;
}

.CS-section.Thoughts-row span.standout,
.CS-section.Thoughts-row li .fa,
.CS-section.Thoughts-row span.standout {
    color: #878c92;
}


.CS-section.Personal-Qualities-row span.standout,
.CS-section.Personal-Qualities-row li .fa {
    color: #3a8844;
}

.CS-section.Other-People-row span.standout,
.CS-section.Other-People-row li .fa {
    color: #87b76b;
}

.CS-section.Possibilities-row span.standout,
.CS-section.Possibilities-row li .fa {
    color: #263c89;
}


.CS-section .tab-ico {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 8px;
    position: absolute;
    left: -6px;
    top: -10px;
}

.write-your-own-CareerStatement {
    margin: 0 45px;
}

.ReadOnlyDiv {
    font-family: 'Hind',sans-serif;
}

    .EditDivfromReadOnly div,
    .ReadOnlyDiv div {
        margin: 5px 0;
    }

    .EditDivfromReadOnly ul,
    .ReadOnlyDiv ul {
        margin: 5px 0;
    }

.write-your-own-CareerStatement .CS-section {
    padding: 0;
}

    .write-your-own-CareerStatement .CS-section .tab-ico {
        display: none;
    }

.CareerStatement-actions-holder {
    position: relative;
    height: 44px;
    z-index: 1;
}

/*hide unnessessary formatting buttons*/
.wysihtml5-toolbar .btn[title="Ordered list"],
.wysihtml5-toolbar .btn[title="Outdent"],
.wysihtml5-toolbar .btn[title="Indent"] {
    display: none;
}

.wysihtml5-toolbar .btn[title="Unordered list"] {
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}

.editor-btns {
    float: left;
    display: inline-block;
    width: 100%;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: absolute;
    display: none;
}

.write-your-own-CareerStatement .btn.edit-CS {
    text-align: center;
    min-width: 80px;
    position: absolute;
    background-color: #edf1f3;
    right: 0;
    z-index: -1;
    color: #5365ae;
}

    .write-your-own-CareerStatement .btn.edit-CS .fa {
        color: #5365ae;
        font-size: 1.4em;
        vertical-align: bottom;
        padding: 0 3px 0 0;
    }

.write-your-own-CareerStatement .editable {
    border: solid 1px #ffffff;
    padding: 10px 15px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

    .write-your-own-CareerStatement .editable.active {
        border: solid 1px #d3d8de;
    }



.write-your-own-CareerStatement .icon-holder {
    text-align: center;
    margin: -20px 0 20px;
}

    .write-your-own-CareerStatement .icon-holder.load {
        opacity: 1;
    }

    .write-your-own-CareerStatement .icon-holder .tab-ico {
        padding: 8px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin: 5px;
    }

.CS-section.Desires-row .tab-ico,
.De-tab {
    background-color: #f58130;
}

.CS-section.Natural-Interests-row .tab-ico,
.NI-tab {
    background-color: #f9a870;
}

.CS-section.Strengths-row .tab-ico,
.St-tab {
    background-color: #009ade;
}

.CS-section.Assets-row .tab-ico,
.As-tab {
    background-color: #75bde8;
}

.CS-section.Thoughts-row .tab-ico,
.Th-tab {
    background-color: #878c92;
}


.CS-section.Personal-Qualities-row .tab-ico,
.PQ-tab {
    background-color: #3a8844;
}

.CS-section.Other-People-row .tab-ico,
.OP-tab {
    background-color: #87b76b;
}

.CS-section.Possibilities-row .tab-ico,
.Po-tab {
    background-color: #263c89;
}

/* Career Statement Sharables */
.CS-sharable {
    padding-left: 0;
    margin-top: 20px;
}

.CS-sharable-holder {
    padding: 10px 5px;
    background: #f9fafa;
    border: solid 2px #e4e4e4;
}

.GettingFeedback {
    max-width: 1400px;
}

    .GettingFeedback .share-FB {
        padding-left: 60px;
    }

    .GettingFeedback .CS-sharable-holder {
        padding: 10px 15px;
        max-width: 300px;
    }

.CS-save-as-btn,
.CS-sharable-holder .myBtns {
    float: left;
}

.CS-sharable-holder i.fa,
.modal .myBtns .fa {
    font-size: 1.4em;
    color: #ffffff;
}

.CS-sharable-holder .myBtns,
.CS-sharable-holder .btn-group .btn {
    padding: 5px;
    border: solid 2px #53b826;
    background: #53b826;
    min-width: 33px;
    height: 33px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
}

    .CS-sharable-holder .myBtns.print-btn {
        background-color: #656969;
        border-color: #656969;
    }

.CS-sharable-holder .btn-default .caret {
    border-top-color: #ffffff;
    border-top: 4px solid #ffffff;
}

.modal .myBtns {
    padding: 5px 15px;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #53b826;
    color: #ffffff;
    font-weight: bold;
}

    .modal .myBtns:hover {
        cursor: pointer;
    }

    .modal .myBtns i {
        padding: 3px;
    }

.CS-sharable-holder p {
    margin: 15px 0 5px;
    font-size: 14px;
    font-weight: normal;
    color: #69788b;
}

.CS-sharable-holder .form-group {
    margin: 15px 0 0;
}

.CS-sharable-holder .myAddThis-holder {
    margin-top: 15px;
}

/* font awesome logo adblock workaround */
.fa-facebook-f:before, .facebook-ico:before {
    content: "\f09a";
}

.twitter-ico:before {
    content: "\f099";
}

.linkedin-ico:before {
    content: "\f0e1";
}

/* social share buttons */
.Share-icon-holder {
    margin-top: 10px;
}

    .Share-icon-holder span {
        vertical-align: 0 !important;
    }

input#CareerStatementPublicURL {
    margin: 0;
}

a.Open.CS-preview-link {
    float: right;
    font-size: 0.9em;
    padding: 5px;
}

.Share-icon-holder a.email-btn {
    background-color: #989595;
    font-size: 8px;
    line-height: 16px;
    display: inline-block;
    top: 0;
    height: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding-top: 2px;
    padding: 2px 4px;
    vertical-align: top;
}

    .Share-icon-holder a.email-btn:after {
        content: "Email";
        color: #fff;
        font-size: 11px;
        font-family: Arial, sans-serif;
        font-weight: bold;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
    }

.Share-icon-holder a .fa {
    color: #ffffff;
}

/* Career Statement share checbox - switch style */
.onoffswitch {
    position: relative;
    width: 75px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #999999;
    border-radius: 20px;
    font-family: 'Montserrat',sans-serif;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch-inner:before,
    .onoffswitch-inner:after {
        display: block;
        float: left;
        width: 50%;
        height: 25px;
        padding: 0;
        line-height: 26px;
        font-size: 12px;
        color: white;
        font-weight: bold;
        box-sizing: border-box;
    }

    .onoffswitch-inner:before {
        content: "ON";
        padding-left: 16px;
        background-color: #53B826;
        color: #FFFFFF;
    }

    .onoffswitch-inner:after {
        content: "OFF";
        padding-right: 14px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

    .onoffswitch-inner.yes:before {
        content: "YES";
    }

    .onoffswitch-inner.yes:after {
        content: "NO";
    }


.onoffswitch-switch {
    display: block;
    width: 22px;
    margin: 3.5px;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 46px;
    border: 2px solid #999999;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}

/* disable styled checkbox when Storyteller item has been edited in Career Sketch */
#storyteller-answer-items .tag,
.relevant-checkbox .HasBeenEdited {
    overflow: visible;
}

    .relevant-checkbox .HasBeenEdited .myToolTipText {
        top: -40px;
        left: -950%;
        font-size: 12px;
    }

    .relevant-checkbox .HasBeenEdited.myToolTip .myToolTipText::after {
        top: 105%;
        left: 77%;
        margin-left: -8px;
        border-top: 8px solid #55595b;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
    }

.HasBeenEdited:before {
    border-color: #aee995 !important;
}

.HasBeenEdited:after {
    color: #aee995 !important;
}

.sharables .Share-icon-holder,
.sharables .CS-preview-link {
    pointer-events: none;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.sharables input {
    pointer-events: none;
}

.sharables.activate input {
    pointer-events: initial;
}

.sharables.activate .Share-icon-holder,
.sharables.activate .CS-preview-link {
    pointer-events: initial;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.sharables.activate input {
    background: #ffffff !important;
}

/* Custom CS Modal */
.modal h4 {
    color: #263c89;
}

.modal .warning-save-PDF {
    text-align: center;
    margin: 0 0 15px 0;
    padding: 10px;
    background-color: #f6f6f6;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.modal p.modal-note {
    font-style: italic;
}

.modal a#btnSaveAndGenerateTextFile {
    padding: 3px;
    margin-top: 5px;
    font-size: 0.9em;
    display: inline-block;
}

/* CS email modal */
#CS-share-EmailModal h4 {
    color: #009ade;
}

#CS-share-EmailModal label {
    margin: 0 100px 10px;
    text-align: center;
    display: block;
    margin: 0 0 10px 0;
}

#CS-share-EmailModal input {
    width: 82%;
    margin: 0;
    display: inline-block;
}

/* CS ORG footer */
#ORG-footer {
    display: none;
}

/*=========== Storyteller ===========*/
/* title bar */
.row.title.story-teller {
    position: inherit;
}

.story-teller .story-item.restart-btn-holder {
    float: right;
}

.story-teller .story-item .type-tag {
    font-size: 12px;
    margin: 0 10px 0 0;
    padding: 4px 8px;
}

.row.title .title-inner p.story-category {
    display: block;
    font-family: 'Hind';
    font-family: 'Hind',sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 5px 0;
    max-width: 500px;
    font-family: 'Montserrat',sans-serif;
}

.row.title .title-inner h6 {
    margin: 0 0 8px;
    color: #898989;
    font-family: 'Montserrat', sans-serif;
    font-size: 12pt;
}

.title-inner.w-poss-tag span.type-tag {
    border: solid 1px #a8b0d7;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 12px;
    color: #8590c7;
    padding: 4px 8px;
    display: inline-block;
    line-height: 10px;
    margin: 0 5px;
    visibility: visible !important;
    position: relative !important;
    vertical-align: middle;
    font-weight: normal;
}

.time-line-short {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding-bottom: 11px;
}

a#restartStoryLink {
    font-weight: bold;
    color: #2d428d;
}

    a#restartStoryLink:hover {
        color: #2d428d;
        background: #e4e4e4;
    }

.progress.storyteller {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #e4e4e4;
    box-shadow: none;
    overflow: visible;
    clear: both;
    z-index: 1000;
    margin: 0 0 20px 0;
}

/*.progress.storyteller#ST-questions {
        margin-top: -25px;
    }*/

.progress-holder {
    margin-left: 0;
    margin-right: 0;
}

    .progress-holder:not(:first-child) {
        margin-left: -20px;
        margin-right: -20px;
    }

.progress-bar {
    background-color: #279dd7;
    -webkit-box-shadow: none;
    box-shadow: none;
    min-width: 28px;
    border-radius: 4px;
}

.progress-bar-percent {
    color: #fff;
    float: right;
    margin-top: -8px;
    background: #42b7f1;
    padding: 0 5px;
    border-radius: 10px;
}
/* sub nav sidebar */
#navListWrapper {
}

#navListWrapper {
    max-width: 260px;
}

    #navListWrapper h4 {
        color: #5c718a;
        text-transform: uppercase;
        margin: 10px 0;
        color: #5c718a;
    }

    #navListWrapper ul {
        list-style: none;
        padding: 0;
    }

    #navListWrapper li {
        margin: 10px 0;
    }

        #navListWrapper li a {
            color: #52657a;
        }

        #navListWrapper li.selected {
            color: #ecaf51;
            font-weight: bold;
        }

            #navListWrapper li.selected a {
                color: #ecaf51;
                font-weight: bold;
                border-left: solid 3px #f8b725;
                padding-left: 8px;
            }

        #navListWrapper li.completed a,
        #navListWrapper li.completed {
            color: #ecaf51;
            pointer-events: initial;
            cursor: pointer;
        }

        #navListWrapper li a {
            color: #9eadbe;
            display: inline-block;
            padding: 2px;
            pointer-events: none;
            cursor: default;
        }

/* question holder */
.question-holder {
    width: 60%;
}

.uniform-height {
    min-height: 405px;
}

.question-holder h3 {
    font-weight: bold;
    margin: 7px 0 10px;
    line-height: 1.4em;
    color: #2b3d43;
}

    .question-holder h3.end-stem {
        font-style: italic;
        clear: both;
        margin: 30px 0 0;
    }

h3.end-stem:before {
    /*padding: 0 10px 0 0;
            font-size: 0.5em;
            vertical-align: middle;
            font-style: normal;
            font-family: FontAwesome;
            content: "\f04b";
            color: #279dd7;
            margin-left:-15px;*/
}

.uniform-height h3:nth-child(2) {
    margin-top: 10px;
}

.question-holder.multi-field h3.end-stem {
    margin-bottom: 0;
}

.question-holder .input-group-btn .btn {
    background: #2b3d43;
    color: white;
    font-weight: bold;
    border: solid 1px #2b3d43;
}

.tag-cloud-holder {
    padding: 5px 20px 0 20px;
    margin-top: 25px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: dashed #e4e4e4 1px;
    background-color: #f9fafa;
}

    .tag-cloud-holder .tag-cloud-inner {
        margin-bottom: 10px;
    }

    .tag-cloud-holder h4,
    .storyteller-custom-answer h4 {
        text-transform: uppercase;
        font-size: 1em;
        display: inline-block;
        color: #898989;
    }

.storyteller-custom-answer h4 {
    margin-top: 0;
}

.form-control.answerTextBox {
    min-height: 34px;
}

.question-holder .form-group #PossibilityTypes {
    width: 49%;
    float: left;
    margin: 0 1% 20px 0;
    height: 34px;
}

.storyteller-validation,
#Error-Answer,
#tile-Count {
    color: #f58232 !important;
    font-style: italic;
    display: inline-block;
    position: relative;
    left: 0;
}

.multi-field h4 {
    display: none;
}

.tag-cloud-holder a {
    padding: 6px 8px;
    margin: 4px 2px;
    display: inline-block;
    background: #ffffff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #dadada;
    color: #3b3b3b;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(32,32,32,0.1);
    -moz-box-shadow: 1px 1px 3px 0px rgba(32,32,32,0.1);
    box-shadow: 1px 1px 3px 0px rgba(32,32,32,0.1);
}

.tag-cloud-holder.disabled a {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #f9fafa;
    pointer-events: none;
    cursor: default;
    color: #8b9095;
}

.tag-cloud-holder a:hover {
    background-color: #8b9095;
    color: #ffffff;
}

.tag-cloud-holder .tag-cloud-item.reveal {
    display: none;
}

.tag-cloud-holder .see-more-btn {
    background-color: #dadada;
    background: none;
    border: none;
    box-shadow: none;
    width: 100%;
    display: block;
    color: #8b9095;
    text-align: center;
    border-top: dashed 1px #dadada;
    border-radius: 0;
}

    .tag-cloud-holder .see-more-btn:hover {
        background: none;
        color: inherit;
    }

    .tag-cloud-holder .see-more-btn span {
        font-family: FontAwesome;
    }

    .tag-cloud-holder .see-more-btn:before {
        content: "Show more";
        padding-right: 5px;
    }

    .tag-cloud-holder .see-more-btn span:after {
        content: "\f078";
    }

    .tag-cloud-holder .see-more-btn.selected:before {
        content: "Show less";
    }

    .tag-cloud-holder .see-more-btn.selected span:after {
        content: "\f077";
    }

.storyteller-custom-answer {
    margin: 10px 0 20px;
}

    .storyteller-custom-answer select.form-control {
        margin-top: 5px;
        color: #848484;
    }

.input-group .form-control:not(:first-child):not(:last-child) {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.multi-field .storyteller-custom-answer {
    margin: 5px 0 20px;
}

#storyteller-answer-items .checkbox-label {
    float: right;
    clear: both;
    max-width: 120px;
    text-align: center;
    clear: both;
    color: #8d8b8b;
    line-height: 1em;
    margin-right: 55px;
    width: 100%;
    margin-bottom: 5px;
}

#storyteller-answer-items.tagwrapper .tag {
    padding: 8px 150px 8px 40px;
    min-height: 100%;
    margin: 5px 0 !important;
    position: relative;
    clear: both;
}

.feedback-questions #storyteller-answer-items.tagwrapper .tag {
    padding: 8px 40px;
}

#storyteller-answer-items.tagwrapper .tag.tag-none.checked {
    padding-left: 7px;
}

.multi-field #storyteller-answer-items.tagwrapper .tag,
.SF-possibility #storyteller-answer-items.tagwrapper .tag {
    padding-right: 35px;
}

/* Checkbox */
.relevant-checkbox {
    position: absolute;
    right: 100px;
    top: 7px;
}
    /* Base for label styling */
    .relevant-checkbox [type="checkbox"]:not(:checked),
    .relevant-checkbox [type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
    }

        .relevant-checkbox [type="checkbox"]:not(:checked) + label,
        .relevant-checkbox [type="checkbox"]:checked + label {
            position: relative;
            padding-left: 25px;
            cursor: pointer;
            height: 25px;
            vertical-align: middle;
        }

            /* checkbox aspect */
            .relevant-checkbox [type="checkbox"]:not(:checked) + label:before,
            .relevant-checkbox [type="checkbox"]:checked + label:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 25px;
                height: 25px;
                border: 2px solid;
                background: #ffffff;
                border-radius: 3px;
            }

.tag-desires [type="checkbox"]:not(:checked) + label:before {
    border-color: #fab285;
}

.tag-naturalinterests [type="checkbox"]:not(:checked) + label:before {
    border-color: #fab285;
}

.tag-strengths [type="checkbox"]:not(:checked) + label:before {
    border-color: #99dfff;
}

.tag-assets [type="checkbox"]:not(:checked) + label:before {
    border-color: #93ceeb;
}

.tag-personalqualities [type="checkbox"]:not(:checked) + label:before {
    border-color: #a7d7b1;
}

.tag-possibilities [type="checkbox"]:not(:checked) + label:before {
    border-color: #a8b0d7;
}

.tag-feelings [type="checkbox"]:not(:checked) + label:before {
    border-color: #b3b3b3;
}

.tag [type="checkbox"]:checked + label:before {
    color: #53b826;
}

/* checked mark aspect */
.relevant-checkbox [type="checkbox"]:not(:checked) + label:after,
.relevant-checkbox [type="checkbox"]:checked + label:after {
    content: '\f00c';
    font-family: FontAwesome;
    position: absolute;
    top: 6px;
    left: 4px;
    font-size: 18px;
    line-height: 0.8;
    color: #53b826;
    transition: all .2s;
}
/* checked mark aspect changes */
.relevant-checkbox [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}

.relevant-checkbox [type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}

#storyteller-answer-items.tagwrapper .tag .action-ico {
    position: absolute;
    top: 7px;
    right: 10px;
}

/* Storyteller item icons - Elements */
#storyteller-answer-items.tagwrapper .tag.tag-desires,
#storyteller-answer-items.tagwrapper .tag.tag-desires.checked {
    background: #fde2ce url(../../Images/icons/De-icolor.png) no-repeat 7px 7px;
}

#storyteller-answer-items.tagwrapper .tag.tag-naturalinterests,
#storyteller-answer-items.tagwrapper .tag.tag-naturalinterests.checked {
    background: #fbf0e9 url(../../Images/icons/NI-icolor.png) no-repeat 7px 7px;
}

#storyteller-answer-items.tagwrapper .tag.tag-strengths,
#storyteller-answer-items.tagwrapper .tag.tag-strengths.checked {
    background: #e9f6fc url(../../Images/icons/St-icolor.png) no-repeat 7px 7px;
}

#storyteller-answer-items.tagwrapper .tag.tag-assets,
#storyteller-answer-items.tagwrapper .tag.tag-assets.checked {
    background: #e9f5fb url(../../Images/icons/As-icolor.png) no-repeat 7px 7px;
}

#storyteller-answer-items.tagwrapper .tag.tag-personalqualities,
#storyteller-answer-items.tagwrapper .tag.tag-personalqualities.checked {
    background: #f0f4f1 url(../../Images/icons/PQ-icolor.png) no-repeat 7px 7px;
}

#storyteller-answer-items.tagwrapper .tag.tag-otherpeople,
#storyteller-answer-items.tagwrapper .tag.tag-otherpeople.checked {
    background: #f1f7ee url(../../Images/icons/OP-icolor.png) no-repeat 7px 7px;
}

#storyteller-answer-items.tagwrapper .tag.tag-possibilities,
#storyteller-answer-items.tagwrapper .tag.tag-possibilities.checked,
.SF-possibility #storyteller-answer-items.tagwrapper .tag.tag-possibilities {
    background: #edf1f3 url(../../Images/icons/Po-icolor.png) no-repeat 7px 7px;
}

#storyteller-answer-items.tagwrapper .tag.tag-thoughtsandfeelings,
#storyteller-answer-items.tagwrapper .tag.tag-thoughtsandfeelings.checked {
    background: #f6f6f6 url(../../Images/icons/Th-icolor.png) no-repeat 7px 7px;
}

#storyteller-answer-items.tagwrapper .tag.tag-non-element,
#storyteller-answer-items.tagwrapper .tag.tag-non-element.checked {
    background: #e4e4e4;
    color: #61666b;
}

#storyteller-answer-items.tagwrapper .tag.tag-non-element {
    border-color: #b3b3b3;
    padding-left: 12px;
}

    #storyteller-answer-items.tagwrapper .tag.tag-non-element label {
        color: #b3b3b3;
    }

.single-field #storyteller-answer-items.tagwrapper .tag {
    background-color: #ffffff;
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

    .single-field #storyteller-answer-items.tagwrapper .tag.checked {
        -moz-filter: unset;
        -o-filter: unset;
        -webkit-filter: unset;
        filter: unset;
        filter: unset;
    }

.button-controls {
    /*position: absolute;
    width: 100%;
    right: 15px;
    bottom: 0;*/
}

    .button-controls .btn {
        padding: 6px 25px;
        float: right;
    }

    .button-controls .dir-btn {
        clear: both;
        margin-top: 10px;
        float: right;
    }

        .button-controls .dir-btn a {
            color: #8d8b8b;
        }

            .button-controls .dir-btn a:hover {
                color: #009ade;
            }

            .button-controls .dir-btn a:first-child {
                margin-right: 12px;
            }

            .button-controls .dir-btn a:last-child {
                margin-left: 12px;
            }

.btn-sub {
    background-color: #e4e4e4;
    color: #5c718a;
    border: solid 1px #e4e4e4;
}

#complete-story-btn,
#complete-story-btn-NarrativeAssessment {
    padding: 6px 25px;
    height: 34px;
    line-height: 1.428571429;
    border-radius: 4px;
    background-color: #18bb9c;
    color: #ffffff;
    border: solid 1px #18bb9c;
}

/* success message */
p.stand-out {
    text-align: center;
    font-size: 18px;
    padding: 5px;
}

/* ======= ADMIN - Guidebooks ======== */
.org-guidebooks input {
    margin-bottom: 0;
}

.org-guidebooks btn {
    vertical-align: bottom;
}

.GB-stats span.GB-first-col {
    min-width: 220px;
    display: inline-block;
}

/* ======= TIMELINE INTERMIN STYLING (adapting old model) ======== */
#timeline-wrapper .slider-item p {
    font-family: 'Hind',sans-serif !important;
}

#timeline-wrapper .vco-slider .slider-item .content .content-container .media {
    width: auto;
}

#timeline-wrapper .slide-action-area.applied .btn {
    color: #333;
    background-color: #ebebeb;
    border: none;
    margin: 5px;
}

#timeline-wrapper .slide-action-area.applied .tellstory.btn {
    background-color: #18bb9c;
    color: #fff;
}

#timeline-wrapper .content-container.layout-text-media.pad-left .text {
    width: 100% !important;
}

    #timeline-wrapper .content-container.layout-text-media.pad-left .text .container {
        display: block !important;
    }

.divprogres.Timeline .progress.storyteller {
    position: relative;
    left: initial;
    margin: -15px 0 25px;
    height: 10px;
}

    .divprogres.Timeline .progress.storyteller .progress-bar-percent {
        margin-right: -2px;
        margin-top: -5px;
    }

.slide-action-area.applied .btn {
    padding: 0 15px;
    height: 32px;
}

/*=========== Dashboard ===========*/
.row.dash-summary {
    background: #e4e4e4;
    margin: -20px;
    padding: 30px 15px;
}

    .row.dash-summary .col-md-3.col-sm-6 {
        margin: 10px 0;
    }

/* fix Firefox issue, underlines text on hover */
.whole-block:hover {
    text-decoration: none;
}

a.whole-block {
    display: block;
}

.dash-summary-box {
    border-radius: 4px;
    background: #ffffff;
    text-align: center;
    padding: 15px 10px;
    min-height: 170px;
    border-top: solid 7px;
    position: relative;
}

.empty-NAS h3 {
    margin: 15px;
}

.empty-NAS .dash-summary-box {
    min-height: 115px;
}

    .empty-NAS .dash-summary-box h2 span {
        font-size: 0.8em;
    }

.dash-summary-box h2 {
    font-size: 20px;
    font-weight: normal;
    color: #2b3d43;
    margin: 0 0 15px;
}

.star-text {
    margin-top: -5px;
}

.dash-storyline {
    color: #009ade;
    border-color: #009ade;
}

.dash-careerSk {
    color: #3a8844;
    border-color: #3a8844;
}

.dash-careerSt {
    color: #f58130;
    border-color: #f58130;
}

    .dash-careerSt p.subtle.sup {
        padding-bottom: 20px;
    }

    .dash-careerSt .dash-careerSt-on-off {
        font-weight: bold;
        color: #62a945;
    }

    .dash-careerSt .subtle {
        padding-top: 5px;
        line-height: 1.2em;
        color: #798086;
    }

        .dash-careerSt .subtle.sup {
            font-size: 12px;
        }

            .dash-careerSt .subtle.sup .small-star {
                height: 12px;
                width: auto;
                margin-top: -3px;
            }

.dash-explorationP {
    color: #5365ae;
    border-color: #5365ae;
}

.go-to-link.full-width {
    border-top: solid 1px #d3d4d4;
    margin: 0 -10px;
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
    padding: 3px;
}

    .go-to-link.full-width span {
        color: #93979c;
        font-size: 12px;
    }

#my-question {
    display: table;
    width: 100%;
    margin-top: 45px;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    background: url(/Images/Dashboard/my-question-bg.jpg) no-repeat;
    background-size: cover;
}

    #my-question h5 {
        font-family: 'Montserrat', sans-serif;
        text-decoration: underline;
    }

    #my-question .row {
        height: 100%;
        display: table-row;
    }

    #my-question .title-holder-inline {
        width: 160px;
    }

    #my-question h3 {
        margin: 0;
        padding: 10px 15px;
        min-width: 160px;
    }

    #my-question .textarea-holder {
        padding: 7px 85px 7px 10px;
        border-left: solid 2px #d3d4d4;
        height: 100%;
        background: #EEF7FC;
    }

    #my-question ::-webkit-input-placeholder {
        color: #93979c;
    }

    #my-question ::-moz-placeholder { /* Firefox 19+ */
        color: #93979c;
    }

    #my-question :-ms-input-placeholder { /* IE 10+ */
        color: #93979c;
    }

    #my-question :-moz-placeholder { /* Firefox 18- */
        color: #93979c;
    }



    #my-question .editable-content {
        min-height: 28px;
        font-size: 20px;
        line-height: 1.4em;
        width: 100%;
        /*height: 100%;*/
        border: none;
        -ms-overflow-style: none;
        resize: none;
        overflow: hidden;
        border: none;
        outline: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        background: none;
        padding-right: 80px;
        font-family: 'Montserrat',sans-serif;
        font-weight: bold;
        color: #444444;
    }

    #my-question .editable-action {
        font-size: 24px;
        display: inline-block;
        position: absolute;
        top: 55px;
        right: 25px;
        /*color: #5365ae;*/
    }

        #my-question .editable-action #question-save-btn {
            display: none;
        }

.my-notes {
    margin-top: 40px;
}

    .my-notes h3 {
        display: inline-block;
        margin: 0 10px;
    }

    .my-notes .Add-note-slide {
    }

.textarea-footer {
    margin: 10px 0 0;
}

.my-notes .date-input {
    display: inline-block;
    width: 135px;
    position: relative;
    margin-left: 10px;
}

.my-notes .textarea-footer .ui-datepicker-trigger.dashboard {
    position: absolute;
    top: 7px;
    right: 0;
    margin: 0 10px;
}

#ui-datepicker-div {
    z-index: 2000 !important;
}

.my-notes textarea {
    width: 100%;
    min-height: 200px;
    border-radius: 4px;
    padding: 10px;
}

.my-notes .entry {
    border-bottom: solid 1px #dededf;
    padding: 10px 60px 20px 10px;
    position: relative;
}

    .my-notes .entry .entry-content {
        padding: 10px 15px;
    }

    .my-notes .entry .dash-action {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 60px;
    }

        .my-notes .entry .dash-action .action-btn {
            display: inline-block;
            padding: 5px;
            margin-top: 5px;
        }

.my-notes .date {
    padding-top: 10px;
}

.my-notes .date,
.dash-resources-item .date,
.GettingFeedback .date {
    color: #a9a9a9;
    font-size: 12px;
    /* font-weight: bold; */
    font-family: 'Montserrat-regular';
    font-family: 'Montserrat',sans-serif;
}

.row.resources-col .col-md-9 .date {
    margin-left: 15px;
}

.my-helping-pro {
    background-color: #e59a31;
    background-image: url(/Images/Dashboard/HP-dash-BG.jpg);
    border-radius: 4px;
    color: #ffffff;
    padding: 20px 15px;
    margin-top: 30px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

    .my-helping-pro h3 {
        font-size: 16px;
        color: #ffffff;
        font-weight: normal;
    }

    .my-helping-pro .image-holder-circle {
        border-radius: 50%;
        overflow: hidden;
        border: solid 2px #5365ae;
        display: inline-block;
        background: #ffffff;
    }

    .my-helping-pro p.HP-name {
        font-weight: bold;
        color: #263c89;
        font-size: 16px;
        padding-top: 5px;
    }

        .my-helping-pro p.HP-name span {
            font-weight: normal;
            display: block;
        }

.resources-col {
    margin: 30px -20px 0;
}

    .resources-col .col-3-md {
        padding: 0;
    }

.dash-resources {
    padding: 10px;
    background: #F9FAFA;
    margin-top: 20px;
}

    .dash-resources h3 {
        margin: 0;
    }

    .dash-resources .small {
        margin-top: 5px;
    }

    .dash-resources .add-resource.btn,
    .add-notes-btn {
        background-color: #18bb9c;
        color: #fff;
        border: none;
    }

.add-notes-btn {
    background-color: #009ade;
    color: #ffffff;
    font-weight: bold;
    border: none;
    /*border-radius: 25px;*/
    float: right;
    margin-top: -10px;
}

.dash-resources .dash-resources-item {
    margin: 10px 0;
    background-color: #ffffff;
    word-wrap: break-word;
}

    .dash-resources .dash-resources-item b.title {
        color: #2b3d43;
        margin-bottom: 5px;
        display: block;
    }

    .dash-resources .dash-resources-item .item-content {
        border: solid 2px #cecece;
        border-bottom: none;
        -webkit-border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topleft: 4px;
        -moz-border-radius-topright: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        padding: 15px 10px 5px;
    }

    .dash-resources .dash-resources-item .set-completion {
        -webkit-border-bottom-right-radius: 4px;
        -webkit-border-bottom-left-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        -moz-border-radius-bottomleft: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        background-color: #bbbfc1;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        padding: 5px 10px;
    }

        .dash-resources .dash-resources-item .set-completion.completed {
            background-color: #3dbb94;
        }

        .dash-resources .dash-resources-item .set-completion label {
            color: #ffffff;
            font-weight: bold;
            padding-left: 5px;
        }

    .dash-resources .dash-resources-item .col-md-6:last-child {
        text-align: right;
    }

    .dash-resources .dash-resources-item .actions a,
    .table a.set-completion-a {
        color: #3dbb94;
        font-weight: bold;
    }

.cl-resources .table tr td:first-child {
    text-align: center;
}

.cl-resources .table tr td:last-child {
    text-align: right;
}

.set-completion.relevant-checkbox {
    position: relative;
    right: inherit;
    top: initial;
}

    .set-completion.relevant-checkbox [type="checkbox"]:not(:checked) + label, .set-completion.relevant-checkbox [type="checkbox"]:checked + label {
        height: 15px;
        padding-left: 15px;
        margin-bottom: 1px;
    }

        .set-completion.relevant-checkbox [type="checkbox"]:not(:checked) + label:before, .set-completion.relevant-checkbox [type="checkbox"]:checked + label:before {
            height: 15px;
            width: 15px;
            left: -5px;
        }

        .set-completion.relevant-checkbox [type="checkbox"]:not(:checked) + label:after, .set-completion.relevant-checkbox [type="checkbox"]:checked + label:after {
            content: '\f00c';
            top: 3px;
            left: -4px;
            font-size: 14px;
        }

@media screen and (max-width: 480px) {
    .dash-summary-box {
        min-height: 180px !important;
    }

    #CS-share-EmailModal input {
        width: 65%;
        margin: 0;
        display: inline-block;
    }

    .custom-inline-form .control-group {
        display: block;
    }

        .custom-inline-form .control-group .controls {
            width: 100%;
        }

    .custom-inline-form label.control-label {
        display: block !important;
        max-width: 100%;
    }

    .custom-inline-form .form-group.force-push {
        margin-left: 0;
    }
}

@media screen and (max-width: 500px) {
    .Add-note-slide .inline.pull-right {
        display: block;
        float: none !important;
    }
}

@media screen and (max-width: 580px) {
    .credits-holder {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .event-services-table tr td:first-child {
        white-space: initial;
    }

    .dash-summary-box {
        min-height: 150px !important;
    }

    .empty-NAS .dash-summary-box {
        min-height: 115px !important;
    }

    #my-question .textarea-holder {
        border-left: none;
        padding: 10px;
    }

    #my-question .editable-action {
        right: 10px;
        top: 10px;
    }

    .credits-holder {
        max-width: 100%;
    }

        .credits-holder h3 {
            display: inline-block;
            margin: 0 10px 0 0;
        }
}

@media screen and (max-width: 1130px) {
    .dash-summary-box {
        min-height: 200px;
    }

    .dash-resources .dash-resources-item .row.actions .col-md-6 {
        display: block;
        float: none;
        width: 100%;
        text-align: left;
    }
}

@media screen and (max-width: 1220px) {
    .dash-resources .link-look {
        float: none !important;
    }
}

/*=========== Storyline ===========*/
.storyline-wrapper {
    overflow-x: hidden;
}
/* storyline has stories */
#add-story-btn,
.AddStory-btn {
    background-color: #f8b725;
    color: #ffffff;
    font-weight: bold;
    border: none;
    /*border-radius: 25px;*/
    font-size: 1.3em;
    padding: 6px 15px;
}

    #add-story-btn:hover,
    .AddStory-btn:hover,
    #add-story-btn:focus,
    .AddStory-btn:focus {
        background-color: #F8B312;
    }

.timeline ul {
    padding: 0;
}

    .timeline ul li {
        list-style-type: none;
        position: relative;
        width: 2px;
        margin: -30px auto 0;
        padding: 0;
        background: #d3d4d4;
    }

    .timeline ul:first-child {
        margin-bottom: 0;
    }

        .timeline ul:first-child li:last-child {
            padding-bottom: 50px;
        }

    .timeline ul#early-years-list li {
        width: 100%;
        background: none;
        padding-top: 0;
        margin-top: 0;
    }

        .timeline ul#early-years-list li .story-item {
            background-color: #cbd0e7;
            border-color: #8691c6;
            margin: 0 auto;
            width: 450px;
            left: auto;
        }

        .timeline ul#early-years-list li.completed .story-item {
            border-color: #329a79;
            background-color: #b2e6d6;
        }

        .timeline ul#early-years-list li::after {
            background: none;
            content: '';
        }

        .timeline ul#early-years-list li:last-child::after {
            background: none;
        }

    .timeline ul li:first-child {
        margin-top: 5px;
        padding-top: 40px;
    }

        .timeline ul li:first-child::after {
            top: 56px;
        }

    .timeline ul li.completed::after {
        top: 12px;
    }

    .timeline ul li:first-child.completed::after {
        top: 52px;
    }

    .timeline ul li::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 16px;
        transform: translateX(-50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #f8b725;
    }

    .timeline ul li .story-item {
        position: relative;
        bottom: 0;
        width: 450px;
        padding: 15px 10px;
        background: #fff;
        border: solid 2px #d3d4d4;
        border-radius: 4px;
        word-wrap: break-word;
    }

        .timeline ul li .story-item::before {
            content: '';
            position: absolute;
            top: 24px;
            width: 0;
            height: 0;
            border-style: solid;
        }

        .timeline ul li .story-item h3 {
            font-size: 18px;
            font-weight: bold;
            margin-top: 0;
        }

    .timeline ul li:nth-child(odd) .story-item {
        left: 40px;
    }

        .timeline ul li:nth-child(odd) .story-item::before {
            left: -40px;
            border-width: 1px 40px 1px 0;
            border-color: #d3d4d4;
        }

    .timeline ul li:nth-child(even) .story-item {
        left: -486px;
    }

        .timeline ul li:nth-child(even) .story-item::before {
            right: -40px;
            border-width: 1px 0 1px 40px;
            border-color: #d3d4d4;
        }

    .timeline ul li::after {
        background-color: #f8b725;
        transition: background .5s ease-in-out;
    }

    .timeline ul li.in-view::after {
        background-color: #f8b725;
    }

    .timeline ul li .story-item {
        visibility: hidden;
        opacity: 0;
        transition: all .5s ease-in-out;
    }

    .timeline ul li:nth-child(odd) .story-item {
        transform: translate3d(200px,0,0);
    }

    .timeline ul li:nth-child(even) .story-item {
        transform: translate3d(-200px,0,0);
    }

    .timeline ul#early-years-list li .story-item {
        transform: none;
    }

    .timeline ul li.in-view .story-item {
        transform: none;
        visibility: visible;
        opacity: 1;
    }

.story-item .story-image {
    background-color: initial;
}

    .story-item .story-image img {
        margin: 0 10px 10px 0;
    }

.story-item p {
    color: #50717c;
}

.story-item .type-tag {
    border: solid 1px #8b9095;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 12px;
    color: #8b9095;
    padding: 4px 8px;
    display: inline-block;
    line-height: 10px;
}

.editor-label.editor-label-storycategory {
    display: inline-block;
    background-color: #b2e6d6;
    border: solid 1px #329a79;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: #656769;
    padding: 4px 8px 3px 8px;
    display: inline-block;
    margin: 0 0 10px 5px;
}

.story-item .sl-date {
    font-size: 12px;
    color: #798086;
    display: inline-block;
    margin: 0 10px;
}

.story-item .progress.storyteller {
    position: absolute;
    left: 0;
    background-color: #bee2f3;
    height: 6px;
}

    .story-item .progress.storyteller .progress-bar {
        min-width: unset;
    }

.story-item .tag-actions {
    background-color: #e4e4e4;
    margin: 0 -10px -15px -10px;
    padding: 10px 10px 5px;
}

    .story-item .tag-actions .sl-controls {
        float: right;
    }

#early-years-list .story-item .tag-actions {
    background-color: #cbd0e7;
}

.story-item .tag-actions .edit-ico i {
    vertical-align: middle;
}

.story-item .tag-actions span.progress-text {
    font-size: 12px;
    color: #798086;
}

.story-item .tag-actions span.percent-text {
    font-weight: bold;
    color: #279dd7;
}

.story-item .info-holder {
    padding: 5px 0 10px;
}

.tellstory.btn {
    float: right;
    margin: -2px 0 10px 0;
    background: #279dd7;
    color: #fff;
    border: none;
    padding: 2px 8px;
}

/* completed story */
.timeline ul li.completed::after {
    background-color: #3dbb94;
    height: 30px;
    width: 30px;
    padding: 7px 8px;
    content: "\f00c";
    font-family: FontAwesome;
    color: #fff;
}

.timeline ul li.completed .story-item::before {
    bottom: 53%;
}

.timeline ul li.completed:nth-child(even) .story-item::before {
    border-color: #329a79;
}

.timeline ul li.completed:nth-child(odd) .story-item::before {
    border-color: #329a79;
}

.timeline ul li.completed .story-item {
    border-color: #329a79;
    background-color: #b2e6d6;
}

    .timeline ul li.completed .story-item .tag-actions {
        background-color: #b2e6d6 !important;
    }

    .timeline ul li.completed .story-item .progress-bar {
        background: #3dbb94;
    }

    .timeline ul li.completed .story-item .tag-actions span.percent-text {
        color: #329a79;
    }

.timeline ul#early-years-list li #birth-story-item {
    text-align: center;
    padding: 0;
    background-color: white;
    border: none;
}

/* --- Add Story (Category Cards) --- */
.addStory-wrapper {
    max-width: 1000px;
    overflow-x: hidden;
    position: relative;
}

    /* change default gutter to 5px */
    .addStory-wrapper .step-1 div[class^="col"] {
        padding-left: 5px;
        padding-right: 5px;
    }

.story-categories {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding-left: 0;
}

.category-card {
    display: flex;
    width: 31%;
    border: solid 2px #EBEBEB;
    border-radius: 4px;
    margin: 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0);
}

    .category-card:hover {
        box-shadow: none;
        /*background-color: #FEF2D7;*/
        border-color: #F8B725;
    }

        .category-card:hover h3 {
            /*color: #f8b725;*/
        }

    .category-card .click-here {
        width: 100%;
    }

/* Default Story Category Images */
.cat-content.cat-job-exp {
    background: url(../../Images/Storyline/Category-icons/job-exp.gif) no-repeat right 20px center;
}

.cat-content.cat-dislike-exp {
    background: url(../../Images/Storyline/Category-icons/didnt-like.gif) no-repeat right 20px center;
}

.cat-content.cat-education-exp {
    background-image: url(../../Images/Storyline/Category-icons/education.gif);
    background-repeat: no-repeat;
    background-position: right 20px center;
}

.cat-content.cat-travel-exp {
    background: url(../../Images/Storyline/Category-icons/travel.gif) no-repeat right 20px center;
}

.cat-content.cat-at-best-exp {
    background: url(../../Images/Storyline/Category-icons/at-best.gif) no-repeat right 20px center;
}

.cat-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 30px 100px 30px 20px;
}

    .cat-content h3 {
        margin: 10px 10px 10px 0;
        word-wrap: break-word;
    }

.step-2 {
    position: relative;
    left: 100vw;
    height: 100%;
    background: #fff;
    /*display: none;*/
}

    .step-2 .story-form textarea {
        max-height: 200px;
        height: 120px;
    }

    .step-2 .fancy-input label {
        font-size: 1.4em;
        color: #2b3d43;
        font-family: 'Montserrat',sans-serif;
        margin: 5px 0 10px 0;
        font-weight: bold;
    }

/* --- Getting Feedback --- */
.GettingFeedback h4 {
    margin: 0;
}

.GettingFeedback .entry {
    padding: 15px 0;
    border-top: dashed 1px #dededf;
}

    .GettingFeedback .entry:first-child {
        border-top: none;
    }

.GettingFeedback .overdue {
    padding: 0 20px;
    font-weight: normal;
    background: #FCEDEE;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 10px;
    padding: 2px 4px;
    display: inline-block;
    line-height: 10px;
    margin: 0 5px;
}

.see-CSk-link {
    color: #5365ae;
    padding: 0 5px;
}

#requestFeedback {
    background-color: #53B826;
    color: #ffffff;
}

    #requestFeedback.btn-default[disabled] {
        background-color: #eeeeee !important;
        color: #4c5c6b !important;
    }

/* Request Feedback modal */
h5.modal-style {
    line-height: 1.4em;
    text-align: center;
}

.textarea-look {
    clear: both;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 15px 10px;
    background-color: #F0F6F9;
}

h4 .small.feedback-modal {
    font-family: 'Montserrat',sans-serif;
}

.input-copy-btn {
    margin-top: 5px;
}

#txtUrl {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 10px;
    width: 80%;
    margin: 0 3px 0 0;
    background-color: #F0F6F9 !important;
}

/* -- Empty State --*/
.feeback-q-list li {
    margin: 5px 0;
}

.step-2 .fancy-input label {
    float: left;
}

.step-2 .fancy-input span {
    display: block;
    clear: both;
    overflow: hidden;
    padding-top: 5px;
}

    .step-2 .fancy-input span > label {
        margin: 0;
        line-height: 1.4em;
        font-size: 1.4em;
        color: #2b3d43;
        font-family: 'Montserrat',sans-serif;
        margin: 10px 0;
        font-weight: bold;
    }

    .step-2 .fancy-input span > input {
        width: 100%;
        border: none;
        border-bottom: 2px solid #ccc;
        line-height: 1.4em;
        font-size: 20px;
        padding: 0 5px;
        font-weight: bold;
        color: #263c89;
        font-family: 'Montserrat',sans-serif;
    }

        .step-2 .fancy-input span > input::placeholder {
            color: #b3b3b3;
        }

        .step-2 .fancy-input span > input:-ms-input-placeholder {
            color: #b3b3b3;
        }

        .step-2 .fancy-input span > input::-ms-input-placeholder {
            color: #b3b3b3;
        }

        .step-2 .fancy-input span > input:focus {
            outline: none;
        }

.step-2 #divcount {
    padding: 5px 0;
}

.step-2 #StoryDate {
    width: 100px;
}

.step-2 .fileinput-new.thumbnail,
.step-2 .fileinput-preview.thumbnail {
    margin-bottom: 0;
}


/* --- Getting Feedback --- */
.GettingFeedback h4 {
    margin: 0;
}

.GettingFeedback .entry {
    padding: 15px 0;
    border-top: dashed 1px #dededf;
}

    .GettingFeedback .entry:first-child {
        border-top: none;
    }

.GettingFeedback .overdue {
    padding: 0 20px;
    font-weight: normal;
    background: #FCEDEE;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 10px;
    padding: 2px 4px;
    display: inline-block;
    line-height: 10px;
    margin: 0 5px;
}

.see-CSk-link {
    color: #5365ae;
    padding: 0 5px;
}

#requestFeedback {
    background-color: #53B826;
    color: #ffffff;
}

    #requestFeedback.btn-default[disabled] {
        background-color: #eeeeee !important;
        color: #4c5c6b !important;
    }

/* Request Feedback modal */
h5.modal-style {
    line-height: 1.4em;
    text-align: center;
}

.textarea-look {
    clear: both;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 15px 10px;
    background-color: #F0F6F9;
}

h4 .small.feedback-modal {
    font-family: 'Montserrat',sans-serif;
}

.input-copy-btn {
    margin-top: 5px;
}

#txtUrl,
.event-subject{
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 10px;
    width: 80%;
    margin: 0 3px 0 0;
    background-color: #F0F6F9 !important;
}

.event-subject {
    width: 100%;
    margin-bottom: 10px;
    margin-top: 5px;
    background-color: #ffffff!important;
}

@media screen and (max-width: 1280px) {
    .timeline ul li .story-item {
        width: 360px;
    }

    .timeline ul li:nth-child(even) .story-item {
        left: -396px;
    }
}

@media screen and (max-width: 900px) {

    .timeline ul li:nth-child(even) div {
        left: -289px; /*250+45-6*/
    }
}

@media screen and (max-width: 850px) {
    .timeline ul li .story-item {
        width: 310px !important;
    }

    .timeline ul li:nth-child(even) .story-item {
        left: -350px !important;
    }

    .timeline ul#early-years-list li:last-child .story-item {
        left: auto !important;
    }

    /* Storyline Category cards */
    .story-categories .category-card {
        width: 48%;
    }
}

@media screen and (max-width: 572px) {
    .story-categories .category-card {
        width: 100%;
        margin: 5px 0 5px 0;
        display: initial;
    }
}

@media screen and (max-width: 360px) {
    .story-item .tag-actions {
        margin-bottom: 0;
    }

    .sl-controls {
        display: block !important;
        float: none !important;
    }

    .story-categories .category-card .cat-content {
        padding: 80px 20px 10px 20px;
        background-position: top 10px center;
        background-position: top 10px center !important;
        background-size: 150px !important;
    }

        .story-categories .category-card .cat-content h3 {
            text-align: center;
            margin: 90px 0 0 0;
        }
}

/* empty storyline */
#empty-storyline {
    text-align: center;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}

    #empty-storyline img {
        margin-top: 10px;
    }

/* styles for validation helpers */



/* tables
----------------------------------------------------------*/
.table {
    background: #ffffff;
}

    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
        vertical-align: middle;
    }
/* Action links - Edit, Login as, Delete*/
.table {
    margin-bottom: 0;
}

    .table th:first-child {
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
        border-top-left-radius: 4px;
    }

    .table th:last-child {
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        border-top-right-radius: 4px;
    }

    .table th {
        background-color: #ecf0f1;
        color: #8C8C8C;
        text-transform: uppercase;
        font-size: 0.875em;
    }

.table-responsive tr {
    border-left: solid 1px #e7ecee;
    border-right: solid 1px #e7ecee;
}

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

.table-responsive {
    margin: 10px 0 20px;
}

    .table-responsive .table > thead > tr > th {
        border-bottom: solid 1px #ddd;
    }

.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #ffffff;
}

.table-striped > tbody > tr:nth-child(even) > td, .table-striped > tbody > tr:nth-child(even) > th {
    background-color: #e7ecee;
}

td.action-links a {
    display: block;
    white-space: nowrap;
}

/* 404 page
----------------------------------------------------------*/
.mnts-range {
    position: absolute;
    top: 200px;
    width: 100%;
}

.error-page h1 {
    font-size: 120px;
    font-weight: bold;
}

.error-page h2 {
    font-size: 28px;
    font-weight: bold;
}

.error-page .col-md-4.main {
    margin-top: 100px;
}


/* Admin Styling Fixes */
.row.full-height.admin .main-content h1:first-of-type {
    color: #263c89;
    margin: -20px -20px 20px -20px;
    padding: 25px 20px 15px 20px;
}

.row.full-height.admin .thumbnail {
    margin-bottom: 5px;
}

.fileinput-exists .fileinput-new, .fileinput-new .fileinput-exists {
    display: none;
}


/*----------------------------------------*/
/*========= NARRATIVE ASSESSMENT =========*/
/*----------------------------------------*/

/*=== Admin Side Additions===*/

/* Question Builder - Add Category */
.label-col {
    min-width: 100px;
}

.radio-spacer {
    margin-left: 140px;
}

    .radio-spacer input[type=radio] {
        margin-left: 10px;
    }

input#IsDefault {
    margin-left: 20px;
}

/* Buttons */
.btn-primary {
    border-radius: 4px;
    border: none;
}

.admin .btn-primary {
    border-radius: 4px;
    border: solid 1px #357ebd;
}

.btn-primary-green {
    background-color: #3dbb94;
    margin: 0 5px;
}

    .btn-primary-green:hover {
        background-color: #37A985;
    }

.btn-primary-blue {
    background-color: #009ade;
}


/* ==============================================*/
/* ====== NARATIVE ASSESSMENT STYLE SHEET =======*/
/* ======== overrides the Site.css file ======== */
/* ==============================================*/
/* WYAM colors */
.purple {
    color: #1D398D;
}

.blue {
    color: #009ade;
}

.orange {
    color: #f58232;
}

.green {
    color: #348946;
}

.l-blue {
    color: #76bEED;
}

.l-orange {
    color: #F9A870;
}

.l-green {
    color: #88B86E;
}

.dark-grey {
    color: #4c5c6b;
}

.yellow {
    color: #f6b51c;
}

.teal {
    color: #36b290;
}

.na-blue {
    color: #2362ad;
}

/* General elements */
.preamble {
    font-family: 'Montserrat',sans-serif;
}

.modal-content .btn-primary {
    border-radius: 4px;
}

.aff {
    background: #93C349;
    border: solid 1px #93C349;
}

    .aff:hover {
        background: #87B83D;
        border: solid 1px #87B83D;
    }

.dec {
    background: #ACB3B5;
}

    .dec:hover {
        background: #9EA6A9;
    }

.rating-img {
    margin-top: -4px;
    padding: 0 3px;
}

/* Modal */
body.modal-open {
    overflow-x: hidden !important;
}

/* Dynamic content - intro box */
.NarA-intro-section {
    background-color: #EDF6FD;
    padding: 20px;
    background-image: url("../../Images/Narrative-Assessment/puzzle-bg.jpg");
    background-size: cover;
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
    margin-bottom: 30px;
}

    .NarA-intro-section .inner {
        max-width: 1000px;
        margin: 0 auto;
    }

        .NarA-intro-section .inner h2 {
            text-align: left;
        }

        .NarA-intro-section .inner p {
            margin: 0 0 15px;
        }

    .NarA-intro-section .NAS-ex-image-holder {
        margin-bottom: 20px;
    }

    .NarA-intro-section .inner span.WYAM-career-statement {
        white-space: nowrap;
    }

    .NarA-intro-section .inner span.WYAM-career-statement-C {
        color: #5466af;
        font-weight: bold;
    }

    .NarA-intro-section .inner span.WYAM-career-statement-S {
        color: #f58231;
        font-weight: bold;
    }




    /* responsive YT video*/
    .NarA-intro-section .vid-container {
        position: relative;
        width: 100%;
        height: 0;
        margin: 10px 0;
        padding-bottom: 56.25%;
    }

        .NarA-intro-section .vid-container img {
            width: 100%;
        }

    .NarA-intro-section .video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

.q-example {
    text-align: left;
    padding: 10px 0;
}

    .q-example b {
        color: #93C349;
    }

.NA-question {
    padding: 20px;
}

    .NA-question.simple .WYAM-h1-logo {
        height: 44px;
        vertical-align: bottom;
        padding: 10px 0 0 0;
    }

.category-card {
    width: 32%;
}

.cat-content h3 {
    color: #2b3d43;
}

.story-desc-holder {
    padding: 0 20px;
    overflow: hidden;
}

.fileinput-new.thumbnail,
.fileinput-preview.thumbnail {
    margin-bottom: 0;
}

/*////////////////////////////////*/
/*/////    NAS Storyteller    ////*/
/*////////////////////////////////*/

.title-inner .rating-img:hover {
    cursor: default;
}

.progress-holder:not(:first-child) {
    margin-left: 0;
    margin-right: 0;
}

.progress-holder {
    position: relative;
    z-index: 100;
}

.uniform-height {
    min-height: 200px;
}

#storyteller-answer-items {
    min-height: 50px;
}

#spnCareerSketchValidation {
    margin: 30px 0;
    display: block;
    text-align: center;
}

/* custome modal, no header */
.Storyline-modal .modal-header {
    display: none;
}

/*////////////////////////////////*/
/*///    NAS Career Sketch     ///*/
/*////////////////////////////////*/
/* Hide Element Dropdown */


/*////////////////////////////////*/
/*/////   Career Statement   /////*/
/*////////////////////////////////*/
.auto-generated-CareerStatement,
.CStatement-checklist {
    /*max-width: 700px;*/
    margin: 0 auto;
    padding: 0 20px;
}

.row.button-footer {
    border-top: solid 2px #E4E4E4;
    border-bottom: none;
    padding: 15px;
    margin-top: 30px;
    margin-bottom: 0;
    bottom: 0;
    min-height: 69px;
}

    .row.button-footer span {
        padding: 10px 0 0 0;
        display: inline-block;
    }

.debreif-words-holder {
    padding: 20px 30px;
    text-align: center;
    background: #f6f6f6;
    border-radius: 8px;
}

    .debreif-words-holder p {
        font-size: 18px;
    }

.btn-inline {
    margin: 5px 3px;
    border: solid 2px #f1b158;
    background: #ffffff;
    color: #D08011;
    border-radius: 25px;
}

    .btn-inline:hover,
    .btn-inline:active,
    .btn-inline:focus {
        background: #f1b158;
        color: #ffffff;
    }

/*////////////////////////////////*/
/*///  NAS Select Possibility ////*/
/*////////////////////////////////*/
#formContainer {
    /*max-width: 700px;*/
    margin: 0 auto;
    padding: 0 20px;
}

    #formContainer td {
        padding: 5px 0;
    }

        #formContainer td input[type="checkbox"]:hover {
            cursor: pointer;
        }

/*////////////////////////////////*/
/*///   NAS Exploration Plan   ///*/
/*////////////////////////////////*/
.form-group.NAS-cb-select span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px;
}

.form-group.NAS-cb-select input {
    float: left;
    margin: 3px 0 0 10px;
}

.external-clue {
    /*max-width: 700px;*/
    margin: 0 auto;
    padding: 0 20px;
}

.W4C-NAS h3,
.IA-NAS h3 {
    color: #2b3d43;
}

    .W4C-NAS h3 img,
    .IA-NAS h3 img {
        padding: 0 0 3px 0;
    }

    .W4C-NAS h3 span,
    .IA-NAS h3 span {
        text-transform: uppercase;
        font-weight: bold;
    }

    .W4C-NAS h3 span {
        color: #1770b7;
    }

    .IA-NAS h3 span {
        color: #f48245;
    }

.poss-item-col {
    /*border-bottom: dashed 1px #e4e4e4;*/
}

    .poss-item-col p {
        padding: 3px 15px;
        margin: 10px 0;
        line-height: 1.4em;
        font-family: 'Hind', sans-serif;
        word-wrap: break-word;
    }

.W4C-NAS .poss-item-col p {
    border-left: solid 3px #1770b7;
}

.IA-NAS .poss-item-col p {
    border-left: solid 3px #f48245;
}

/*////////////////////////////////*/
/*/////    NAS My Report     /////*/
/*////////////////////////////////*/
.BG {
    background: url("/Images/Narrative-Assessment/NAR-intro-BG.jpg") top center no-repeat;
    padding: 20px;
    background-size: cover;
}

.CG-section h1 {
    font-size: 2.2em;
    padding-bottom: 0 !important;
    margin-bottom: 10px !important;
    margin-top: 20px !important;
}

.CG-section h1 {
    font-family: 'Montserrat-bold', sans-serif;
}

.NAS-intro-section h2 {
    margin: 40px 0 15px;
    font-size: 1.8em;
    font-family: 'Montserrat',sans-serif;
    font-weight: normal;
    color: #2B3D43;
    line-height: 1.4em;
}

.CG-section h2 {
    font-size: 1.8em;
    font-family: 'Montserrat',sans-serif;
    font-weight: normal;
    color: #2B3D43;
    font-weight: 700;
    margin: 10px 0 15px;
    line-height: 1.4em;
}

    .CG-section h2.title-sa {
        margin: 30px 0 15px;
    }

.CG-section p {
    line-height: 1.6em;
    margin-bottom: 15px;
}

.CG-section .larger-list li {
    line-height: 1.6em;
}

.full-width-divider {
    width: 100%;
    margin: 30px 0;
}

.CG-question {
    max-width: 400px;
    color: #f6b51c !important;
}

.NAS-storyline .story-item img {
    height: 50px;
    width: auto;
    order: 1;
}

.NAS-career-statement .auto-generated-CareerStatement p {
    font-family: 'Montserrat',sans-serif;
    font-weight: bold;
}

.NAS-career-statement .auto-generated-CareerStatement li {
    line-height: 1.4em;
}

.NAS-contd-list i,
.CG-instruct i {
    padding-right: 5px;
}

.NAS-contd-list p {
    color: #8e9090;
    font-size: 1em;
    margin-bottom: 0;
}

    .NAS-contd-list p b {
        color: #4c5c6b;
        margin-top: 15px;
        display: block;
    }

.report-holder {
    padding: 0 20px;
}

.NAS-section.border-top-sec {
    padding-top: 30px;
    overflow-x: hidden;
}

.NAR-intro-sec-outter {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
    margin-top: 20px;
    overflow-x: hidden;
}

.NAR-intro-sec {
    padding: 0 20px;
    max-width: 960px;
    margin: 0 auto;
}

    .NAR-intro-sec h1 {
        color: #2B3D43;
    }

.model-light {
    background-image: url(/Images/Narrative-Assessment/model-light.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 45%;
    background-position: center;
}

.model-full {
    background-image: url(/Images/Narrative-Assessment/model-full.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 60%;
    background-position: center;
}

.email-callout {
    border: solid 1px #d3d3d3;
    background: #f6f6f6;
    padding: 20px;
    border-radius: 10px;
    font-style: italic;
    font-weight: bold;
}

/* Conversation Guide Questions */
.CG-question-holder h2 {
    margin-bottom: 10px;
    font-family: 'Montserrat',sans-serif;
    color: #2B3D43;
    font-weight: 700;
}

    .CG-question-holder h2 span {
        font-family: 'Montserrat-bold', sans-serif;
    }

ol.CG-question-response {
    padding-left: 20px;
    list-style-type: none;
}

    ol.CG-question-response li {
        counter-increment: step-counter;
        margin-top: 20px;
        line-height: 1.8em;
    }

        ol.CG-question-response li::before {
            content: counter(step-counter);
            margin-right: 8px;
            margin-left: -20px;
            font-family: 'Montserrat',sans-serif;
            font-weight: 700;
            font-size: 20px;
            margin-top: 10px;
        }

    ol.CG-question-response#story-questions li::before {
        color: #009ade;
    }

    ol.CG-question-response#CS-questions li::before {
        color: #f58231;
    }

    ol.CG-question-response#Ex-questions li::before {
        color: #273c89;
    }

.CG-question-response .empty-space {
    height: 6em;
}

.CG-instruct.border-bottom {
    border-bottom: dotted 1px #d3d4d4;
}

.CG-instruct {
    color: #8e9090;
    padding: 10px 0;
    margin-left: -20px;
    font-size: 1em;
}

    .CG-instruct img.star {
        height: 14px;
        width: auto;
        padding-left: 5px;
    }

.main-instruct {
    font-size: 1.2em !important;
    padding: 0;
    margin: 0;
}


.NAS-section.NAS-storyline {
    border-color: #009ade;
}


    /* STORYLINE fixes, without description*/
    .NAS-section.NAS-storyline .story-item {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
    }

        .NAS-section.NAS-storyline .story-item h3 {
            order: 2;
            max-width: 75%;
        }

        .NAS-section.NAS-storyline .story-item img {
            height: 50px;
            width: auto;
            order: 1;
        }

        .NAS-section.NAS-storyline .story-item .info-holder {
            order: 10;
            flex: 1 100%;
        }

/* client side Storyline fixes, story items less wide */
@media screen and (min-width: 1025px) and (max-width: 1226px) {
    .NAR-clientDash .NAR-intro-sec-outter {
        left: initial;
        width: initial;
        padding: 0 20px;
        margin-left: -40px;
        width: calc(100vw - 205px);
    }

        .NAR-clientDash .NAR-intro-sec-outter .NAR-intro-sec {
            padding: 15px 0;
        }
}

@media (max-width: 768px) {
    #NAR-show-report ul#early-years-list li::after,
    .NAR-clientDash .timeline ul#early-years-list li::after {
        background: #8691c6 !important;
    }

    #NAR-show-report ul#early-years-list li:last-child .story-item,
    .NAR-clientDash .timeline ul#early-years-list li:last-child .story-item {
        margin-left: 30px;
    }

    #NAR-show-report ul#early-years-list,
    .NAR-clientDash #early-years-list {
        margin-top: -20px;
    }

    .model-light {
        background-image: url(/Images/Narrative-Assessment/model-light-1-col.jpg);
        padding-top: 255%;
    }

    .model-full {
        background-image: url(/Images/Narrative-Assessment/model-full-1-col.jpg);
        padding-top: 255%;
    }
}

.NAR-clientDash .timeline ul li .story-item {
    width: 320px;
}

.NAR-clientDash .timeline ul li:nth-child(even) .story-item {
    left: -366px;
}

@media screen and (min-width: 769px) and (max-width: 850px) {
    .NAR-clientDash .timeline ul li .story-item {
        width: 280px !important;
    }

    .NAR-clientDash .timeline ul li:nth-child(even) .story-item {
        left: -326px !important;
    }
}

@media screen and (max-width: 768px) {
    .NAR-clientDash .timeline ul li:nth-child(even) .story-item,
    .NAR-clientDash .timeline ul li:nth-child(odd) .story-item {
        width: calc(100vw - 145px) !important;
    }
}


.NAS-section.NAS-career-statement {
    border-color: #f58232;
}

.NAS-section.NAS-exploration-plan {
    border-color: #1D398D;
}

/*.NAS-section.border-top-sec h1 {
    margin-bottom: 20px;
    text-transform: uppercase;
}*/

.story-item h3 {
    color: #2b3d43;
}

.NAS-section .preamble {
    margin-bottom: 40px;
}

    .NAS-section .preamble h1 {
        color: #2B3D43;
    }

.NAS-section h3 {
    margin: 25px 0 0;
    font-size: 1.2em;
}

.NAS-section li, .NAS-section p {
    line-height: 1.8em;
}

.timeline-NAS ul {
    overflow-x: hidden;
}

.NAS-career-statement .auto-generated-CareerStatement .CS-section:hover ul {
    background: none;
    transition: none;
    cursor: default;
}

    .NAS-career-statement .auto-generated-CareerStatement .CS-section:hover ul .fa {
        visibility: hidden;
    }

.report-holder .auto-generated-CareerStatement {
    max-width: none;
}

.NAS-EX-item h3 {
    display: inline-block;
    color: #5466AF;
    clear: both;
    margin: 10px 5px 0 0;
}

    .NAS-EX-item h3:first-letter {
        text-transform: capitalize;
    }

#itemCluePannel h3 {
    margin-top: 15px;
}

#next-steps h2 {
    margin-top: 40px;
}

/*/////   NAS Modals   /////*/
.NAS-modal .modal-content {
    max-width: 520px;
}

.bootstrap-dialog.type-primary.NAS-modal .modal-header {
    background-color: #ffffff !important;
}

.NAS-modal .bootstrap-dialog-message h1 {
    margin-top: -20px;
    text-align: center;
    margin-bottom: 10px;
}

.NAS-modal .bootstrap-dialog-message img.icon {
    margin: 20px 0 5px;
}

.NAS-modal .bootstrap-dialog-message .btn-primary,
.NAS-modal .bootstrap-dialog-message .btn-default {
    border-radius: 25px;
    margin: 5px;
    padding: 10px 20px;
    font-weight: bold;
}

.NAS-modal .bootstrap-dialog-message .btn-secondary-group {
    max-width: 250px;
    margin: 0 auto;
}


.CareerStatementCategory {
    display: none;
}

.CS-feels {
    border-radius: 20px;
    padding: 15px;
    /*border: solid 3px #F1B158;*/
    color: #D88011;
    font-size: 1.2em;
    /*text-align: center;*/
    width: 80%;
    margin-top: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

    .CS-feels p {
        margin: 0;
    }


/*////////////////////////////////*/
/*///    NAS Printed Report    ///*/
/*////////////////////////////////*/


/*/////////////////////////////////*/
/*//////  Event Planning     //////*/
/*////////////////////////////////*/

/*Choose Event Type*/

.event-date-holder {
    max-width: 200px;
}

.event-link-active {
    padding-top: 24px;
}

.section-border-top {
    border-top: solid 2px #e4e4e4;
    margin-top: 30px;
}

.btn-event-type {
    background-color: rgb(239, 239, 239) !important;
    color: #4c5c6b !important;
    border: solid 1px #d6d6d6 !important;
}

#CM-btn.selected,
#IE-btn.selected {
    background: #2b3d43 !important;
    color: #ffffff !important;
}

.event-card-group label {
    font-weight: bold;
    color: #009ade;
}

.event-card-group p {
    padding: 0 0 0 28px;
    margin: 0 0 10px 0;
    font-size: 0.9em;
    color: #69788b;
}

input#CM-btn[type="radio"] {
    margin: -5px 5px 0 0;
}

input#IE-btn[type="radio"] {
    margin: -5px 5px 0 30px;
}
.event-card-group input[type="radio"] {
    margin-right: 5px;
}

.event-card-group input[value="IndividualDevelopment"]{
    margin-left: 30px;
}


#CM-group.show {
    display: inherit;
}

#send-post-event-email {
    background-color: rgb(239, 239, 239) !important;
}

.helper-icon {
    background-color: #b6b7b9;
    margin: 0;
    border: none;
    height: 18px;
    width: 18px;
    color: #ffffff;
    line-height: 18px;
    margin-right: 15px;
    display: inline-block;
}

.email-sequence.hidden {
    display: none;
}

.custom-select, #appt-time {
    height: 34px;
    font-size: 14px;
    line-height: 1.428571429;
    padding: 0 4px;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

textarea#FirstEmailContent,
textarea#SecondEmailContent,
textarea#ThirdEmailContent{
height: 200px;
}

/*//////////////////////////////////////*/
/*//////  Event Prep - Story     //////*/
/*////////////////////////////////////*/
@media only screen and (max-width: 640px) {
    .top-controls {
        position: relative !important;
        top: auto !important;
        right: 15px;
    }
}


@media only screen and (min-width: 1150px){
    .card-event-row {
        display: flex;
    }

    .cards {
        height: 100%;
    }
}

.card-storyteller .ipost .row {
    margin-bottom: 20px;
}

.card-storyteller .cards {
    box-shadow: 2px 2px 4px #d4d4d4;
    border: solid 1px #E0E0E0;
    border-radius: 3px;
    border-bottom: solid 3px;
    min-height: 210px;
    background: #ffffff;
    text-align: left;
}

    .card-storyteller .cards .cards-inner {
        padding: 20px 15px;
    }

        .card-storyteller .cards .cards-inner p {
            font-size: 18px;
            color: #959597;
            font-family: 'Nunito', sans-serif;
            margin: 0;
            line-height: 1.4em;
        }

        .card-storyteller .cards.active.cards.active p,
        .card-storyteller .cards.active b, .cards.active em,
        .card-storyteller .cards.active p.card-example,
        .card-storyteller .cards.active .cards-inner p {
            color: #ffffff !important;
        }

    .card-storyteller .cards .PQ-cards .cards b, .PQ-cards .cards em {
        color: #358945;
    }

.card-storyteller .cards .cards-inner .card-example{
    font-size: 0.9em;
    margin-top:20px;
}

.event-tag {
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    font-family: 'Nunito', sans-serif;
    line-height: 1.4em;
}

/*//// Element Card Colors - Custom answer tags ////*/


/* Yellow card group (Possibilities) */
.yellow-card-group .cards {
    border-bottom-color: #f6b51c;
}

    .yellow-card-group .cards b,
    .yellow-card-group .cards em {
        color: #f6b51c;
    }

    .yellow-card-group .cards.active {
        border: none;
        background: url(/images/event-prep/possibilities.png) no-repeat bottom right #f6b51c;
    }

.yellow-card-group .tag {
    background: #f6b51c !important;
}

/* Green card group */
.green-card-group .cards {
    border-bottom-color: #358945;
}

    .green-card-group .cards b,
    .green-card-group .cards em {
        color: #358945;
    }

    .green-card-group .cards.active {
        border: none;
        background: url(/Images/event-prep/green.png) no-repeat bottom right #358945;
    }

.green-card-group .tag {
    background: #358945 !important;
}

/* Light Green card group */
.l-green-card-group .cards {
    border-bottom-color: #88B86E;
}

    .l-green-card-group .cards b,
    .l-green-card-group .cards em {
        color: #88B86E;
    }

    .l-green-card-group .cards.active {
        border: none;
        background: url(/Images/event-prep/green.png) no-repeat bottom right #88B86E;
    }

.l-green-card-group .tag {
    background: #88B86E !important;
}

/* Blue card group */
.blue-card-group .cards {
    border-bottom-color: #009ade;
}

    .blue-card-group .cards b,
    .blue-card-group .cards em {
        color: #009ade;
    }

    .blue-card-group .cards.active {
        border: none;
        background: url(/Images/event-prep/blue.png) no-repeat bottom right #009ade;
    }

.blue-card-group .tag {
    background: #009ade !important;
}

/* Light Blue card group */
.l-blue-card-group .cards {
    border-bottom-color: #76bEED;
}

    .l-blue-card-group .cards b,
    .l-blue-card-group .cards em {
        color: #76bEED;
    }

    .l-blue-card-group .cards.active {
        border: none;
        background: url(/Images/event-prep/blue.png) no-repeat bottom right #76bEED;
    }

.l-blue-card-group .tag {
    background: #76bEED !important;
}

/* Orange card group */
.orange-card-group .cards {
    border-bottom-color: #f47921;
}

    .orange-card-group .cards b,
    .orange-card-group .cards em {
        color: #f47921;
    }

    .orange-card-group .cards.active {
        border: none;
        background: url(/Images/event-prep/orange.png) no-repeat bottom right #f47921;
    }

.orange-card-group .tag {
    background: #f47921 !important;
}

/* Light Orange card group */
.l-orange-card-group .cards {
    border-bottom-color: #F9A870;
}

    .l-orange-card-group .cards b,
    .l-orange-card-group .cards em {
        color: #F9A870;
    }

    .l-orange-card-group .cards.active {
        border: none;
        background: url(/Images/event-prep/orange.png) no-repeat bottom right #F9A870;
    }

.l-orange-card-group .tag {
    background: #F9A870 !important;
}

/* Purple card group (Possibilities) */
.purple-card-group .cards {
    border-bottom-color: #233d80;
}

    .purple-card-group .cards b,
    .purple-card-group .cards em {
        color: #233d80;
    }

    .purple-card-group .cards.active {
        border: none;
        background: url(/images/event-prep/possibilities.png) no-repeat bottom right #233d80;
    }

.purple-card-group .tag {
    background: #233d80 !important;
}

/* Disabled Cards */
.cards.disabled {
    border-color: #E0E0E0;
    background: #E0E0E0;
}

.cards.disabled:hover{
    cursor: not-allowed;
}

.cards.disabled b {
    color: #959597
}

/* Unclickable sidebar nav - card groups */
.event-card-group-parent #navListWrapper ul li a {
    cursor: default;
}


/* Card Animations and Sound */
.active.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0.2s;
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
} 


/* ---------------------------------------------------------
------------------------------------------------------------
===================== MEDIA QUIERIES =======================
------------------------------------------------------------
----------------------------------------------------------*/
@media (max-width: 1150px) {
    .event-card-group-parent .card-storyteller .ipost .col-sm-6 {
        width: 50%;
        margin-bottom: 20px;
    }
}

@media (max-width: 778px) {
    .event-card-group-parent .card-storyteller .ipost .col-sm-6 {
        width: 100%;
        margin-bottom: 20px;
    }
}

    @media (max-width: 1210px) {
        .slider-item .content-container .text h3 {
            font-size: 1.3em;
            margin-bottom: 0;
            line-height: 1.3em;
        }
    }

    @media (max-width: 1267px) {
        .event-link-active {
            padding: 0;
            width: 100%;
        }
    }


    @media only screen and (min-width: 1051px) {
        .controls.col-md-6.col-type-select {
            padding-left: 0;
        }

        .controls.col-md-6.col-date-select {
            padding-right: 0;
        }
    }

    @media only screen and (max-width: 1050px) {
        /* Force table to not be like tables anymore */
        .table-wide-action-td .table-striped-custom,
        .table-wide-action-td .table-striped-custom thead,
        .table-wide-action-td .table-striped-custom tbody,
        .table-wide-action-td .table-striped-custom th,
        .table-wide-action-td .table-striped-custom td,
        .table-wide-action-td .table-striped-custom tr {
            display: block;
        }

        #not-responsive.table-wide-action-td.not-responsive .table-striped-custom,
        #not-responsive.table-wide-action-td.not-responsive .table-striped-custom thead,
        #not-responsive.table-wide-action-td.not-responsive .table-striped-custom tbody,
        #not-responsive.table-wide-action-td.not-responsive .table-striped-custom th,
        #not-responsive.table-wide-action-td.not-responsive .table-striped-custom td,
        #not-responsive.table-wide-action-td.not-responsive .table-striped-custom tr {
            display: inline-grid !important;
        }

        .table.table-striped-custom tr td:first-child {
            padding-left: 170px;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        .table-wide-action-td .table-striped-custom thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .table-wide-action-td .table-striped-custom tr {
            border-top: 1px solid #e7ecee;
        }

        .table-wide-action-td .table-striped-custom td {
            /* Behave  like a "row" */
            border: none;
            position: relative;
            height: auto;
            padding-left: 170px;
        }

            .table-wide-action-td .table-striped-custom td.td-status-Invited div {
                display: inline;
            }

        /*Action btn - keep inline*/
        .table-wide-action-td .table-striped-custom .actions-td {
            display: inline-block;
            margin: 0 0 10px 10px;
            line-height: 20px;
            width: auto !important;
            border-bottom: none !important;
        }

            .table-wide-action-td .table-striped-custom .actions-td a {
                float: none;
            }

        .table tr td.actions-td .td-btn {
            display: inline-block !important;
        }

        .table-wide-action-td .table-striped-custom td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 11px;
            left: 8px;
            width: 170px;
            padding-right: 10px;
            font-weight: bold;
            text-transform: uppercase;
            font-size: .875em;
            color: #3ba4d2;
        }

        /*
	Label the data
	*/
        /*-----Name/Email/HP/Status-----*/
        .table-wide-action-td.N-E-HP-S-table .table-striped-custom td:nth-of-type(1):before,
        .table-wide-action-td.N-E-HP-S-table .table-striped-custom td:nth-of-type(1):before,
        .table-wide-action-td.N-E-O-Oo-table .table-striped-custom td:nth-of-type(1):before,
        .table-wide-action-td.N-E-DA-S-table .table-striped-custom td:nth-of-type(1):before {
            content: "Name";
        }

        .table-wide-action-td.N-E-HP-S-table .table-striped-custom td:nth-of-type(2):before,
        .table-wide-action-td.N-E-HP-O-S-table .table-striped-custom td:nth-of-type(2):before,
        .table-wide-action-td.N-E-O-Oo-table .table-striped-custom td:nth-of-type(2):before,
        .table-wide-action-td.N-E-O-HP-S-table .table-striped-custom td:nth-of-type(2):before,
        .table-wide-action-td.N-E-DA-S-table .table-striped-custom td:nth-of-type(2):before {
            content: "Email";
        }

        .table-wide-action-td.N-E-HP-S-table .table-striped-custom td:nth-of-type(3):before,
        .table-wide-action-td.N-E-HP-O-S-table .table-striped-custom td:nth-of-type(3):before,
        .table-wide-action-td.N-E-O-HP-S-table .table-striped-custom td:nth-of-type(4):before,
        .table-wide-action-td.HP-EN-ELA-ED-EP-R-EdDel-table .table-striped-custom td:nth-of-type(1):before {
            content: "Helping Professional";
        }

        .table-wide-action-td.HP-EN-ELA-ED-EP-R-EdDel-table .table-striped-custom td:nth-of-type(2):before,
        .table-wide-action-td.N-E-HP-S-table .table-striped-custom td:nth-of-type(5):before {
            content: "Event Name";
        }

        .table-wide-action-td.HP-EN-ELA-ED-EP-R-EdDel-table .table-striped-custom td:nth-of-type(3):before {
            content: "Event Date";
            text-align: left;
        }

        .table-wide-action-td.HP-EN-ELA-ED-EP-R-EdDel-table .table-striped-custom td:nth-of-type(4):before {
            content: "Event Link Activated";
            text-align: left;
        }

        .table-wide-action-td.HP-EN-ELA-ED-EP-R-EdDel-table .table-striped-custom td:nth-of-type(5):before {
            content: "Event Plan";
        }

        .table-wide-action-td.HP-EN-ELA-ED-EP-R-EdDel-table .table-striped-custom td:nth-of-type(6):before {
            content: "Registrants";
            text-align: left;
        }


        .table-wide-action-td.N-E-HP-S-table .table-striped-custom td:nth-of-type(4):before,
        .table-wide-action-td.N-E-HP-O-S-table .table-striped-custom td:nth-of-type(5):before,
        .table-wide-action-td.N-E-O-HP-S-table .table-striped-custom td:nth-of-type(5):before,
        .table-wide-action-td.N-E-DA-S-table .table-striped-custom td:nth-of-type(4):before {
            content: "Status";
        }

        /*-----Name/Email/HP/Org/S----*/
        .table-wide-action-td.N-E-HP-O-S-table .table-striped-custom td:nth-of-type(1):before,
        .table-wide-action-td.N-E-O-HP-S-table .table-striped-custom td:nth-of-type(1):before {
            content: "Client";
        }

        .table-wide-action-td.N-E-HP-O-S-table .table-striped-custom td:nth-of-type(4):before,
        .table-wide-action-td.N-E-O-Oo-table .table-striped-custom td:nth-of-type(3):before,
        .table-wide-action-td.N-E-O-HP-S-table .table-striped-custom td:nth-of-type(3):before {
            content: "Organization";
        }

        /* -----Name/Email/Org/OrgOwner ------ */
        .table-wide-action-td.N-E-O-Oo-table .table-striped-custom td:nth-of-type(4):before {
            content: "Organization Owner";
        }

        /*------ Date Added column -------*/
        .table-wide-action-td.N-E-DA-S-table .table-striped-custom td:nth-of-type(3):before {
            content: "Date Added";
        }

        /*----- Email Templates ------*/
        .table-wide-action-td.E-template-table .table-striped-custom td:nth-of-type(1):before {
            content: "Template Type";
        }

        .table-wide-action-td.E-template-table .table-striped-custom td:nth-of-type(2):before {
            content: "Template Content";
        }

        .table-wide-action-td.E-template-table .table-striped-custom td:nth-of-type(3):before {
            content: "Last Updated";
        }

        .table-wide-action-td.E-template-table .table-striped-custom td:nth-of-type(3) {
            padding-left: 170px;
        }

        /* -----Assign - Title - Desciprtion - Download-View ------ */
        .table-wide-action-td.A-T-Des-btn-table .table-striped-custom td:nth-of-type(1):before {
            content: "Assign";
        }

        .cl-resources .table-wide-action-td .table-striped-custom td:nth-of-type(1):before {
            content: "Completed";
        }

        .cl-resources .table-wide-action-td .table-striped-custom td:nth-of-type(1) {
            text-align: left;
        }

        .cl-resources .set-completion.relevant-checkbox [type="checkbox"]:not(:checked) + label,
        .cl-resources .set-completion.relevant-checkbox [type="checkbox"]:checked + label {
            margin-left: 5px;
        }

        .table-wide-action-td.A-T-Des-btn-table .table-striped-custom td:nth-of-type(2):before,
        .table-wide-action-td.resources-table .table-striped-custom td:nth-of-type(1):before,
        .cl-resources .table-wide-action-td .table-striped-custom td:nth-of-type(2):before {
            content: "Title";
        }

        .table-wide-action-td.A-T-Des-btn-table .table-striped-custom td:nth-of-type(3):before,
        .table-wide-action-td.resources-table .table-striped-custom td:nth-of-type(2):before,
        .cl-resources .table-wide-action-td .table-striped-custom td:nth-of-type(3):before {
            content: "Description";
        }

        .cl-resources .table-wide-action-td .table-striped-custom td:nth-of-type(4):before {
            content: "Date";
        }

        .cl-resources .table-wide-action-td .table-striped-custom td:nth-of-type(5):before {
            content: "Download/View";
        }

        .cl-resources .table-wide-action-td .table-striped-custom td:nth-of-type(5) {
            text-align: left;
        }

            .cl-resources .table-wide-action-td .table-striped-custom td:nth-of-type(5) a {
                margin-left: 170px;
            }

        /* ----- Resources Table  ------ */
        .table-wide-action-td.resources-table .table-striped-custom td:nth-of-type(3):before {
            content: "Order #";
        }

        .table-wide-action-td.resources-table .table-striped-custom td:nth-of-type(4):before {
            content: "Type";
        }

        .EP-Poss-container .col-md-6 {
            width: 100%;
        }

            .EP-Poss-container .col-md-6 .W4C-puzzle-piece {
                min-height: inherit;
            }

        .puzzle-join {
            display: none;
            position: absolute;
        }

        .controls.col-md-6.col-date-select {
            padding-right: 15px;
        }

        .col-date-select img.ui-datepicker-trigger {
            right: 25px;
        }

        controls col-md-6 col-type-select {
            padding-left: 15px;
        }

        /* WYAM Survey stats dynamic info */
        .WYAM-table .table.table-striped-custom tr:last-child,
        .WYAM-table .table.table-striped-custom tr,
        .WYAM-table .table tbody,
        .WYAM-table.table.table-striped-custom tr:last-child,
        .WYAM-table.table.table-striped-custom tr,
        .WYAM-table.table tbody {
            border: none;
        }

        .WYAM-table td {
            display: block;
            padding: 5px 10px !important;
            height: auto !important;
        }

            .WYAM-table td span {
                display: initial;
            }

            .WYAM-table td:last-child {
                padding: 5px 10px !important;
            }

        .WYAM-table th {
            display: none;
        }
    }

    @media screen and (min-width: 768px) {
        .modal-dialog {
            padding-top: 75px;
        }

        .timeline ul#early-years-list li .story-item::before {
            border: none;
        }

        .max-width-1-col {
            max-width: 768px;
        }
    }

    @media (max-width: 768px) {
        .row .mobile-center-row {
            text-align: center;
        }

        .modal-dialog {
            width: 90%;
        }

        .row .col-md-3.mobile-center-row .btn-primary.pull-right {
            float: none !important;
            margin-bottom: 15px;
        }

        .col-md-2.col-sm-2.pull-left .btn.btn-primary {
            margin: 10px 0 0 0;
        }

        .btn-responsive {
            padding: 2px 4px;
            line-height: 1;
            border-radius: 3px;
        }

        .modal {
            top: 100px;
        }

            .modal .col-xs-12 .fileinput {
                width: 100%;
                text-align: center;
            }

        .OST-csk-image img {
            display: none;
        }

        .timeline ul li {
            margin-left: 15px;
            padding-top: 30px;
            margin-top: 0;
        }

            .timeline ul li.completed::after {
                top: 42px;
            }

            .timeline ul li:nth-child(even) .story-item,
            .timeline ul li:nth-child(odd) .story-item {
                width: calc(100vw - 105px) !important;
                left: 30px !important;
            }

            .timeline ul li .story-item::before {
                left: 50px;
            }

            .timeline ul li:nth-child(even) .story-item::before {
                left: -40px;
            }

            .timeline ul li::after {
                top: 46px;
            }

        .timeline ul#early-years-list li .story-item {
            margin-left: 0;
        }

        .timeline ul#early-years-list li {
            list-style-type: none;
            position: relative;
            width: 2px;
            padding: 0;
            background: #d3d4d4;
        }

            .timeline ul#early-years-list li .story-item::after {
                left: -40px;
                border-width: 1px 40px 1px 0;
                border-color: #8691c6;
                border: inherit !important;
            }

            .timeline ul#early-years-list li::after {
                content: '';
                position: absolute;
                left: 0;
                top: 16px;
                transform: translateX(-50%);
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #8691c6;
            }

            .timeline ul#early-years-list li.completed .story-item::before {
                top: 30px;
            }

            .timeline ul#early-years-list li.completed::after {
                background-color: #3dbb94;
                height: 30px;
                width: 30px;
                padding: 7px 8px;
                content: "\f00c";
                font-family: FontAwesome;
                color: #fff;
            }

        #birth-story-item::before {
            border: none;
        }

        .timeline ul#early-years-list li .story-item:first-child::before {
            border-color: #8691c6;
        }

        .timeline ul#early-years-list li:last-child {
            background: none;
        }

            .timeline ul#early-years-list li:last-child .story-item {
                text-align: left !important;
                margin-left: -34px;
            }

                .timeline ul#early-years-list li:last-child .story-item p {
                    display: inline-block;
                }

        /* Add Story title */
        .step-2 .fancy-input label {
            float: none;
        }

        .step-2 .fancy-input span {
            padding-left: 0;
        }

        .event-date-holder {
            padding: 0;
        }


        .event-link-active {
            float: left !important;
            display: block;
        }
    }

    @media (max-width: 1070px) {
        .timeline ul li .story-item {
            width: 340px;
        }

        .timeline ul li:nth-child(even) .story-item {
            left: -376px;
        }
    }

    /* Timeline workarround delete once new */
    /*@media (max-width: 794px) {
    #timeline-wrapper .media,
    #timeline-wrapper .text .container p {
        display: none;
    }

    #timeline-wrapper .content-container.layout-text-media.pad-left {
        width: 100%;
    }
}*/

    @media (min-width: 992px) {
        .survey .col-md-2 {
            width: 20%;
        }
    }

    @media (max-width: 991px) {
        .mobile-only {
            display: inline;
        }

        .desktop-only {
            display: none;
        }

        .row.question {
            padding: 0 0 10px 0;
        }

        label.radio-inline {
            padding: 0;
        }

        .survey .col-md-2 {
            margin-right: 20px;
        }

            .survey .col-md-2 input[type="radio"] {
                margin: 5px 5px 10px 15px;
            }

        .survey .row.comments {
            padding-top: 10px;
        }

            .survey .row.comments textarea {
                margin-top: 0;
            }

        #WYAM-register .video-container {
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 30px;
            height: 0;
            overflow: hidden;
        }

            #WYAM-register .video-container iframe, .video-container object, .video-container embed {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

        .GettingFeedback .share-FB {
            padding-left: 15px;
        }

        .GettingFeedback .CS-sharable-holder {
            max-width: none;
        }

        .HP-client-searchbar .col-sm-9 button {
            float: left !important;
            margin-top: 10px !important;
        }
    }

    @media (min-width: 769px) and (max-width: 992px) {
        .puzzle-join {
            display: none;
        }

        .col-date-select img.ui-datepicker-trigger {
            right: 25px;
        }

        .btn-responsive {
            padding: 4px 9px;
            font-size: 90%;
            line-height: 1.2;
        }

        .btn.btn-default.btn-responsive.table-filter-btn.pull-right.pull-left-under-md {
            float: left !important;
        }
    }

    @media (max-width: 1024px) {
        /* place menu items back in stacking order */
        .nav-wrapper,
        .container-wrapper,
        .sidebar {
            position: static;
        }

        .alert {
            margin: 0 -15px;
        }

        /* fix single col issue - fixed sidebar width */
        #left-col-sidebar {
            width: 100%;
        }

        #right-col-main {
            margin-left: 0;
        }

        .navbar.navbar-default {
            background-color: #5365ae !important;
        }

        .navbar-nav {
            margin: 0;
        }

        /*sidebar stop mobile nav*/
        .sidebar {
            top: 0;
            padding: 0;
            height: auto;
        }

        .sidebar-wrapper {
            position: relative;
        }

        .sidebar .navbar.navbar-default {
            margin: 0;
            padding-bottom: 0;
        }

        /*show menu title*/
        .navbar-brand {
            display: block;
            color: #ffffff !important;
        }

        .sidebar .nav.navbar-nav.support-bottom {
            position: relative;
            margin-top: 0;
            background: transparent;
        }

        .sidebar ul.nav.navbar-nav.support-bottom li a {
            padding: 10px 20px;
            font-size: 1em;
            color: #ffffff !important;
        }

        .table-responsive {
            margin-bottom: 0;
        }

        /*nav tabs*/
        ul.nav.nav-tabs {
            border: none;
        }

            ul.nav.nav-tabs li {
                float: none;
                margin: 0 10px;
            }

        /*address margin-top in single column layout*/
        .profile-pic {
            margin-top: 20px;
        }

        /*DB totals*/
        .DA-totals .block {
            margin-right: 0;
        }

        .circle__content {
            font-size: 0.8em;
            line-height: 1.3em;
            margin: 0 5px;
        }

        /*404 page*/
        .mnts-range {
            top: 50px;
        }

        .progress.storyteller {
            left: 0;
        }

        .question-holder {
            width: 100%;
        }

        /* Storyteller questions - inner sidebar */
        #navListWrapper {
            width: 100%;
            max-width: 100%;
        }

            #navListWrapper li {
                display: inline;
            }

                #navListWrapper li:after {
                    content: "\f0da";
                    font-family: FontAwesome;
                    padding: 0 5px;
                }

                #navListWrapper li:last-child:after {
                    content: none;
                }

                #navListWrapper li.selected a {
                    border: none;
                    padding: 2px;
                }

        .blue-callout-box {
            padding: 10px 15px;
        }

        /* Career Statement empty state */
        #CS-empty-state-inner {
            display: inherit;
            text-align: center;
        }
    }

    @media (max-width: 1080px) and (min-width: 1050px) {
        .IActions-col .actions-col {
            position: absolute;
            right: 23px;
        }

        .myToolTip .myToolTipText {
            left: 100%;
        }
    }

    @media (min-width: 768px) {
        .DA-totals .block {
            max-width: 140px;
        }

        .mnts-range {
            top: 240px;
        }

        .navbar-nav > li {
            float: none;
        }

        .modal:before {
            display: inline-block;
            vertical-align: middle;
            content: " ";
            height: 100%;
        }
    }

    @media (min-width: 992px) {
        .col-md-15 {
            width: 20%;
            float: left;
        }

        .mnts-range {
            top: 220px;
        }

        .add-btn-col {
            max-width: 217px;
        }
    }

    @media (max-width: 1068px) {
        .careersketch .tagwrapper .tag {
            width: 49%;
        }

        .filtering .col-md-3 p.pull-right {
            float: left !important;
            margin: 20px 0 5px 0;
        }
    }

    @media (max-width:1089px) {
        .careersketch.custom-row .col-md-15 {
            width: 100%;
        }

        .careersketch.custom-row .possibilities-col.col-md-15 {
            position: relative;
        }

        .careersketch.custom-row .col-sm-9 .tag {
            width: 49.5%;
        }
    }

    @media (max-width: 1199px) and (min-width:992px) {
        #WYAM-register .row.first img#guidebook-code {
            margin-top: 0;
        }
    }

    @media (min-width: 1200px) {
        .mnts-range {
            top: 200px;
        }
    }

    @media (max-width: 1260px) {
        /* action buttons table - inline-block*/
        .table tr td.actions-td .td-btn {
            display: block;
        }
    }

    @media (max-width: 1300px) {
        .careersketch.custom-row .col-sm-9 .tagwrapper .tag:nth-child(odd) {
            clear: both !important;
        }

        #thoughtsandfeelings .tag:nth-child(5n+1) {
            clear: none;
        }

        #thoughtsandfeelings .tag:nth-child(odd) {
            clear: both;
        }
    }

    @media (min-width:1090px) and (max-width: 1300px) {
        .possibilities-col {
            position: absolute;
        }

        .careersketch.custom-row .col-md-15 {
            width: 75% !important;
        }

        .careersketch.custom-row .possibilities-col.col-md-15 {
            width: 25% !important;
        }

        .careersketch.custom-row .col-sm-9 .tag {
            width: 49.6%;
        }
    }

    @media (max-width: 430px) {
        .actions-col.col-xs-2.col-sm-2.col-md-2,
        .poss-item-col {
            clear: both;
            width: 100%;
        }

        /*Admin add category*/
        .admin .large-screens .radio-spacer {
            margin-left: 0;
        }

        .admin .large-screens .pull-left,
        .admin .pull-left.label-col {
            float: none !important;
        }
    }

    @media (max-width: 480px) {
        .careersketch.custom-row .col-sm-9 .tag {
            width: 99.6%;
        }

        .careersketchpanel .header.header-thoughtsandfeelings {
            padding: 10px 5px 10px 15px !important;
            min-height: 65px !important;
        }

            .careersketchpanel .header.header-thoughtsandfeelings .viewing {
                position: relative !important;
                right: 0 !important;
                top: 0 !important;
                float: none !important;
            }

        #restartStoryLink {
            width: 100%;
            margin-top: 15px;
        }

        /* Storyteller questions - checkbox/label position */
        .checkbox-label {
            margin-right: 0 !important;
        }

        .relevant-checkbox {
            right: 47px;
        }

        #storyteller-answer-items.tagwrapper .tag {
            padding-right: 80px;
        }

        .W4C-puzzle-piece p.small, .IA-puzzle-piece p.small {
            clear: both;
            top: 0;
            right: 0;
            left: 15px;
            float: left !important;
            position: relative;
        }

        .IA-puzzle-piece p.small {
            left: 0;
        }

        .EP-Poss-container h3 {
            display: block;
        }

        #actionPanel {
            clear: both;
        }

        .survey .col-md-2 {
            width: 100%;
            text-align: left;
        }

        #WYAM-register .WYAM-btn-success {
            width: 100%;
        }

        #submit-survey .skip-btn {
            clear: both;
            display: inline-block;
            position: relative;
            margin: 15px 0;
        }

        .story-item .info-holder .tellstory.btn {
            clear: both;
            margin: 10px 0;
            width: 100%;
        }

        /* NAS Poss label- fix positioning */
        .storyteller-custom-answer #PossibilityTypes {
            width: 100% !important;
            margin-bottom: 10px !important;
        }
    }

    @media (min-width: 480px) and (max-width:864px) {
        .col-sm-3 .careersketchpanel .viewing {
            position: absolute;
            top: 5px;
            right: 10px;
        }
    }

    @media (min-width: 480px) and (max-width:1275px) {
        .col-sm-9 .careersketchpanel .viewing {
            position: absolute;
            top: 5px;
            right: 10px;
        }

        .tagwrapper:nth-child(5),
        .tagwrapper:nth-child(8),
        .tagwrapper:nth-child(11) {
            clear: both !important;
        }
    }

    @media (max-width: 1275px) {
        .col-sm-15 {
            width: 33.33%;
            float: left;
        }
    }

    @media (min-width: 1276px) {
        .Exploration-plan .tagwrapper:nth-child(7),
        .Exploration-plan .tagwrapper:nth-child(12),
        .Exploration-plan .tagwrapper:nth-child(17),
        .Exploration-plan .tagwrapper:nth-child(22),
        .Exploration-plan .tagwrapper:nth-child(27),
        .Exploration-plan .tagwrapper:nth-child(32),
        .Exploration-plan .tagwrapper:nth-child(37),
        .Exploration-plan .tagwrapper:nth-child(42),
        .Exploration-plan .tagwrapper:nth-child(47),
        .Exploration-plan .tagwrapper:nth-child(52),
        .Exploration-plan .tagwrapper:nth-child(57),
        .Exploration-plan .tagwrapper:nth-child(62),
        .Exploration-plan .tagwrapper:nth-child(67),
        .Exploration-plan .tagwrapper:nth-child(72),
        .Exploration-plan .tagwrapper:nth-child(77),
        .Exploration-plan .tagwrapper:nth-child(82),
        .Exploration-plan .tagwrapper:nth-child(87),
        .Exploration-plan .tagwrapper:nth-child(92),
        .Exploration-plan .tagwrapper:nth-child(97),
        .Exploration-plan .tagwrapper:nth-child(102) {
            clear: both;
        }
    }

    .careersketchpanel .header {
        padding: 10px 5px 10px 0;
        min-height: 0 !important;
    }

    .tag tag-thoughtsandfeelings tag-inline {
        width: 98%;
    }

    .possibilities-col {
        top: 0;
        right: 0;
        width: 25%;
    }

    .custom-width .tag {
        width: 99%;
        float: left;
        margin: 1px auto !important;
    }

        .custom-width .tag.tag-possibilities {
            width: 99.6%;
            /*float: none;*/
            margin: 3px 2px;
            padding-bottom: 10px;
        }
}

@media (max-width: 550px) {
    nav .container.fill {
        text-align: center;
    }

    #subheader.Admin-bar-top .links {
        background: inherit;
    }

    #subheader.navbar, #subheader.navbar.HP-bar-top {
        height: 100%;
        min-height: 100%;
    }
}

@media (max-width: 480px) {
    /*hide OLT logo text*/
    #subheader .title.middle {
        display: none;
        position: absolute;
    }

    .nav-wrapper {
        text-align: center;
    }

        .nav-wrapper .container .links {
            width: 100%;
            height: 40px;
        }

    /*mobile title row*/
    .row.title .title-inner h2 {
        margin-top: 0;
    }

    .row.title .add-btn-col {
        display: block;
        clear: both;
        text-align: center;
        width: 100%;
        float: none !important;
    }

        .row.title .add-btn-col a {
            float: none !important;
        }

    /*mobile advanced search*/
    .row.HP-client-searchbar .input-group {
        display: block;
    }

    .HP-client-searchbar .input-group .form-control {
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
    }

    .input-group .form-control,
    input#SearchCriteria {
        height: 34px !important;
        min-height: 34px;
    }

    .row.HP-client-searchbar .col-md-5.col-sm-9,
    .row.HP-client-searchbar .col-md-2.col-sm-3 {
        margin-top: 10px;
    }

    .row.HP-client-searchbar .input-group .input-group-btn {
        width: 100%;
        display: block;
    }

        .row.HP-client-searchbar .input-group .input-group-btn .btn.btn-primary {
            width: 100%;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

    /*filtering btns*/
    button.btn.btn-default.table-filter-btn {
        padding: 6px;
    }

    .IA-puzzle-piece .small,
    .W4C-puzzle-piece .small {
        clear: both;
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
    }

    .W4C-puzzle-piece .small {
        left: 15px;
    }
}

@media (max-width: 320px) {
    html {
        overflow-x: hidden;
    }

    .row.title .col-xs-4 {
        width: 100%;
        text-align: center;
    }

    .row.title .add-btn-col {
        width: 100%;
    }
}

@media (max-width: 320px) {
    #ui-datepicker-div {
        left: 0 !important;
    }
}

@media (max-width: 420px) {
    .table-wide-action-td .table-striped-custom td,
    .table-wide-action-td .table-striped-custom td:first-child {
        padding: 28px 0 5px 8px !important;
    }

    .table-wide-action-td .table-striped-custom .actions-td {
        padding: 10px 0 !important;
    }

    .cl-resources .table-wide-action-td .table-striped-custom td:nth-of-type(5):before {
        display: none;
    }

    .cl-resources .table-wide-action-td .table-striped-custom td:nth-of-type(5) a {
        margin-left: 0;
    }

    .cl-resources .table-wide-action-td .table-striped-custom td:nth-of-type(5) {
        padding-top: 5px !important;
    }

    .my-notes .entry {
        padding-right: 10px;
    }

        .my-notes .entry .textarea-footer .inline.pull-right {
            clear: both;
            display: block;
            float: none !important;
        }

    .dash-action {
        display: inline-block;
        position: relative !important;
        float: right;
        top: -30px !important;
    }

    .my-notes .date-input {
        margin-left: 0;
    }
}

/*Disabled and Readonly input*/
input[readonly] {
    background-color: #eeeeee !important;
    color: #848484 !important;
}

@media(max-width:550px) {
    nav .container.fill {
        text-align: center;
    }

    #subheader.Admin-bar-top .links {
        background: inherit;
    }

    #subheader.navbar, #subheader.navbar.HP-bar-top {
        height: 100%;
        min-height: 100%;
    }
}


@media (max-width: 760px) {
    .col-md-15 {
        width: 100%;
    }
}

@media (max-width: 864px) {
    .row.filtering .col-md-9 form.pull-left {
        clear: both;
        margin: 10px 0 0;
        width: 100%;
    }

    .custom-width .tag {
        width: 100%;
    }

    .careersketch #thoughtsandfeelings {
        width: 100%;
    }

    .careersketch.custom-row .col-md-15 {
        width: 100%;
        position: relative;
    }
}

/********************
*   Mobile Styles   *
********************/

/********************
*   OLD CCONLINE OVERRIDES   *
********************/

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #263c89;
}

.vco-storyjs .vco-feature h1, .vco-storyjs .vco-feature h2, .vco-storyjs .vco-feature h3, .vco-storyjs .vco-feature h4, .vco-storyjs .vco-feature h5, .vco-storyjs .vco-feature h6 {
    font-family: 'Montserrat',sans-serif !important;
}

.vco-storyjs h1, .vco-storyjs h2, .vco-storyjs h3, .vco-storyjs h4, .vco-storyjs h5, .vco-storyjs h6, .vco-storyjs p, .vco-storyjs blockquote, .vco-storyjs pre, .vco-storyjs a, .vco-storyjs abbr, .vco-storyjs acronym, .vco-storyjs address, .vco-storyjs cite, .vco-storyjs code, .vco-storyjs del, .vco-storyjs dfn, .vco-storyjs em, .vco-storyjs img, .vco-storyjs q, .vco-storyjs s, .vco-storyjs samp, .vco-storyjs small, .vco-storyjs strike, .vco-storyjs strong, .vco-storyjs sub, .vco-storyjs sup, .vco-storyjs tt, .vco-storyjs var, .vco-storyjs dd, .vco-storyjs dl, .vco-storyjs dt, .vco-storyjs li, .vco-storyjs ol, .vco-storyjs ul, .vco-storyjs fieldset, .vco-storyjs form, .vco-storyjs label, .vco-storyjs legend, .vco-storyjs button, .vco-storyjs table, .vco-storyjs caption, .vco-storyjs tbody, .vco-storyjs tfoot, .vco-storyjs thead, .vco-storyjs tr, .vco-storyjs th, .vco-storyjs td, .vco-storyjs .vco-container, .vco-storyjs .content-container, .vco-storyjs .media, .vco-storyjs .text, .vco-storyjs .vco-slider, .vco-storyjs .slider, .vco-storyjs .date, .vco-storyjs .title, .vco-storyjs .messege, .vco-storyjs .map, .vco-storyjs .credit, .vco-storyjs .caption, .vco-storyjs .vco-feedback, .vco-storyjs .vco-feature, .vco-storyjs .toolbar, .vco-storyjs .marker, .vco-storyjs .dot, .vco-storyjs .line, .vco-storyjs .flag, .vco-storyjs .time, .vco-storyjs .era, .vco-storyjs .major, .vco-storyjs .minor, .vco-storyjs .vco-navigation, .vco-storyjs .start, .vco-storyjs .active {
    font-family: 'Hind', sans-serif !important;
}

.vco-storyjs button, .vco-storyjs input[type="button"], .vco-storyjs input[type="reset"], .vco-storyjs input[type="submit"] {
    margin-right: 10px;
}

.table.Exploration-plan td {
    vertical-align: top;
}

input#Password, input#RepeatPassword {
    margin-bottom: 20px;
}

.progress {
    background: repeating-linear-gradient( 45deg, #f6f6f6, #d9d9d9 5px );
    margin-bottom: 0;
}

.careersketchpanel .twitter-typeahead {
    width: 100%;
    vertical-align: top;
}

    .careersketchpanel .twitter-typeahead input {
        height: 34px;
    }

.storyRow {
    width: 100% !important;
}

.table-wrapper {
    position: relative;
    margin-right: 20px;
}

#question-table {
    margin: -20px 0 0 -20px;
    max-width: 760px;
}

#navListWrapper {
    min-width: 200px;
}

#careerSketchTagCountIndicator {
    top: 13px !important;
    left: 15px !important;
    display: none;
    position: absolute;
}

.bubble.current {
    height: 100% !important;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: hidden;
}

.wrapper {
    max-width: none !important;
}

.modal-open {
    overflow: inherit !important;
}

.welcome-dialog .modal-dialog {
    width: 80% !important;
}

.modal-dialog .form99 textarea#Description {
    height: 100px !important;
}

.modal.bootstrap-dialog.type-primary.size-normal {
}

/* override default 768px mobile menu */
@media (max-width: 1024px) {
    .navbar-header {
        float: none;
    }

    .navbar-left, .navbar-right {
        float: none !important;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin-top: 7.5px;
    }

        .navbar-nav > li {
            float: none;
        }

            .navbar-nav > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .collapse.in {
        display: block !important;
    }

    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .container-wrapper,
    .sidebar {
        padding-top: 0 !important;
    }
}

/* Edit profile with sections */
@media (max-width: 1268px) and (min-width: 992px) {
    .profile-2-col {
        width: 50%;
    }

        .profile-2-col.col-sm-push-6 {
            left: 50%;
        }

        .profile-2-col.col-sm-pull-6 {
            right: 50%;
        }
}

/* =========== PRINT STYLES ============ */
@media print {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .main-content {
        padding-top: 5px;
    }

    .alert.alert-success,
    .row.title,
    #write-custom-CS,
    .editor-btns,
    .CS-sharable,
    footer {
        display: none;
    }

    a[href]:after {
        content: none !important;
    }

    ul, img, .print-no-page-break {
        page-break-inside: avoid;
    }

    .CareerStatement {
        margin-top: 10px;
    }

    .tab-design {
        border-width: 3px;
    }

        .tab-design img {
            display: block;
        }

    .De-tab {
        background-color: #f58130 !important;
    }

    .NI-tab {
        background-color: #f9a870 !important;
    }

    .St-tab {
        background-color: #009ade !important;
    }

    .As-tab {
        background-color: #75bde8 !important;
    }

    .PQ-tab {
        background-color: #3a8844 !important;
    }

    .OP-tab {
        background-color: #87b76b !important;
    }

    .Po-tab {
        background-color: #263c89 !important;
    }

    .editable {
        border: none !important;
    }

    #print-Brand-id-tab {
        background: none;
    }

    .CareerStatement-holder {
        border: none !important;
    }

    .print-no-page-break.first {
        margin-top: -20px;
    }

   
    .CS-section.Desires-row span.standout {
        color: #f58130 !important;
    }

    .CS-section.Natural-Interests-row span.standout {
        color: #f9a870 !important;
    }

    .CS-section.Strengths-row span.standout {
        color: #009ade !important;
    }

    .CS-section.Assets-row span.standout {
        color: #75bde8 !important;
    }
    .CS-section.Thoughts-row span.standout {
        color: #878c92 !important;
    }


    .CS-section.Personal-Qualities-row span.standout {
        color: #3a8844 !important;
    }

    .CS-section.Other-People-row span.standout {
        color: #87b76b !important;
    }

    .CS-section.Possibilities-row span.standout,
    .CS-section.Possibilities-row li .fa {
        color: #263c89 !important;
    }

    .CS-section .tab-ico {
        -webkit-border-top-left-radius: 5px !important;
        -webkit-border-bottom-left-radius: 5px !important;
        -moz-border-radius-topleft: 5px !important;
        -moz-border-radius-bottomleft: 5px !important;
        border-top-left-radius: 5px !important;
        border-bottom-left-radius: 5px !important;
        padding: 8px !important;
        position: absolute !important;
        left: -6px !important;
    }

    .CS-section.Desires-row .tab-ico {
        background-color: #f58130 !important;
    }

    .CS-section.Natural-Interests-row .tab-ico {
        background-color: #f9a870 !important;
    }

    .CS-section.Strengths-row .tab-ico {
        background-color: #009ade !important;
    }

    .CS-section.Assets-row .tab-ico {
        background-color: #75bde8 !important;
    }
    .CS-section.Thoughts-row .tab-ico {
        background-color: #878c92 !important;
    }

    .CS-section.Personal-Qualities-row .tab-ico {
        background-color: #3a8844 !important;
    }

    .CS-section.Other-People-row .tab-ico {
        background-color: #87b76b !important;
    }

    .CS-section.Possibilities-row .tab-ico {
        background-color: #263c89 !important;
    }

    .CS-section li {
        font-family: 'Hind',sans-serif !important;
    }

    .CareerStatement-actions-holder {
        display: none;
    }

    .captionThoughtsAndfeelings {
        color: #8b9095 !important;
        font-family: 'Hind',sans-serif !important;
        text-decoration: none !important;
    }

    .CS-header #lblThoughts a {
         color: #FFFFFF;        
        font-family: 'Hind',sans-serif;
        text-decoration: none !important;
        cursor:default !important
    }


    

}

.mb-3 {
    margin-bottom: 15px;
}