/************************************************/
/* Basic */
body{
    margin: 0;
    font-family: 'Open Sans', verdana, Helvetica, sans-serif;
    font-size: 16px;
    background-color: #EEEEEE;
}

a {
    color: #065577;
    text-decoration: none;
}

a:hover{
    color: #AD4125;
}

.pop-label{
    color: #666666;
    font-size: 12px;
}

.link-white{
    color: #ffffff;
}
.link-white:hover{
    color: #ffffff;
    text-decoration: underline;
}

.hidden{
    display: none;
}

.resp-img{
    width: 100%;
}

.bold-text{
    font-weight: bold;
}

.mobile-show{
    display: none;
}

.mobile-hide{
    display: block;
}

/************************************************/
/* Global top search */
/* Example Expandable Search Field CSS */
.global-search{
    width: 200px;
    display: inline-block;
    margin-right: 8px;
}


.input-global-search {
    outline: none;
}
.input-global-search  {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
}

.input-global-search::-webkit-search-decoration,
.input-global-search::-webkit-search-cancel-button {
    display: none;
}

.input-global-search  {
    background: url('../images/SearchBlack24.svg') no-repeat right 9px center;
    border: none;
    padding: 9px 15px 9px 32px;
    width: 55px;

    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;

    box-shadow: 0 0 5px rgba(0,0,0,0);

    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
.input-global-search:focus {
    width: 150px;
    background-color: #ffffff;
    border-color: #BBBDBF;

    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,.4);
    box-shadow: 0 0 5px rgba(0,0,0,.4);
}


.input-global-search:-moz-placeholder {
    color: #BBBDBF;
}
.input-global-search::-webkit-input-placeholder {
    color: #BBBDBF;
}

.search-global input[type=search] {
    width: 18px;
    padding-left: 8px;
    color: transparent;
    cursor: pointer;
    border: 1px solid transparent;
}
.search-global input[type=search]:hover {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 5px rgba(0,0,0,.4);
}
.search-global input[type=search]:focus {
    width: 150px;
    padding-left: 10px;
    padding-right: 32px;
    color: #000;
    background-color: #ffffff;
    cursor: auto;
}
.search-global input:-moz-placeholder {
    color: transparent;
}
.search-global input::-webkit-input-placeholder {
    color: transparent;
}

#globalsearch-mobile{
    background-color: #ffffff;
}

/************************************************/
/* Color Fills (Primary) */
.color-gold{
    color: #FFC328;
}

.color-white{
    color: #FFFFFF;
}

.color-black{
    color: #000000;
}

.color-red{
    color: #AD4125;
}

.color-navy{
    color: #065577;
}

.color-navy-dark{
    color: #0D3354;
}

.color-lime{
    color: #779B30;
}

.color-teal{
    color: #3A929D;
}

.main-header{
    height: 60px;
    background-color: #F6F6F6;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.4);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

.top-line{
    background-color: #EBA51B;
    height: 4px;
}

.head-height{
    height: 64px; /* normal header height */
}

.head-height-banner{
    height: 114px; /* header height with impersonation on */
}

.nav-menu{
    float: left;
    margin-left: 20px;
    line-height: 60px;
    position: relative;
}

.header-right{
    float: right;
    margin-right: 20px;
    line-height: 60px;
    font-size: 14px;
}

.main{
    padding-top: 64px;
    z-index: 1;
    background-color: #ffffff;
}

.main-impersonate{
    padding-top: 114px;
    z-index: 1;
    background-color: #ffffff;
}

.provider-logo{
    width: 350px;
    float: left;
    text-align: center;
}

.provider-img-large{
    margin-top: 4px;
    max-height: 140px;
}

.provider-img-scroll{
    max-width: 114px;
    margin-top: 0px;
}

.provider-logo-slim{
    width: 110px;
    float: left;
}

.provider-img-slim{
    max-width: 114px;
    margin-left: -2px; /* This kills any transparency and shadow on the left side of the provider logo */
}

.left-full{
    min-width: 350px;
    width: 350px;
    background: #082743;
    color: #ffffff;
    position: relative;
    padding-top: 98px; /* to get below the provider logo */
}

.left-slim{
    width: 110px;
    background: #082743;
    color: #ffffff;
    position: relative;
    padding-top: 32px; /* to get below the provider logo */
}

.left-area-toggle{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 8px 8px 0;
}

.dyna-footer{
    background-color: #F6F6F6;
    text-align: center;
    border-top: 1px solid #BBBDBF;
    border-bottom: 1px solid #BBBDBF;
    width: 100%;
}

.dyna-footer-inner{
    margin: 16px 16px 0 16px;
    font-size: 12px;
}

.lds-footer{
    background-color: #EEEEEE;
    text-align: center;
    width: 100%;

}

.lds-footer-inner{
    margin: 32px 16px 32px 16px;
    font-size: 12px;
}

.success-message {
    background-color: #f0f7db;
    border: 1px solid #779B30;
    padding: 16px;
}

.error-message {
    background-color: #F7E4D3;
    border: 1px solid #AD4125;
    padding: 16px;
}

.info-message {
    background-color: #ECEFF2;
    border: 1px solid #065577;
    padding: 16px;
}

.warning-message {
    background-color: #FFF4DE;
    border: 1px solid #EBA51B;
    padding: 16px;
}

.success-header,  .error-header, .info-header, .warning-header {
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 32px 0 8px;
}

.success-header {
    color: #779B30;
}

.error-header{
    color: #AD4125;
}

.info-header{
    color: #065577;
}

.warning-header{
    color: #EBA51B;
}
.status-title {
    display: inline-block;
}

.status-title-modal {
    display: block;
    margin-top: 8px;
    margin-left: 32px;
}

.dialog-icon{
    vertical-align: text-bottom;
}

.head-icon{
    vertical-align: text-bottom;
    margin: 0 0 2px 8px;
}

.task-line{
    margin-bottom: 12px;
}

.task-left{
    display: inline-block;
    width: 96px;
    vertical-align: top;
    font-size: 14px;
    margin-left: 4px;
}

.task-right{
    display: inline-block;
    width: 200px;
    font-size: 14px;
    vertical-align: top;
}

.task-icon{
    vertical-align: bottom;
    margin-bottom: 2px;
    margin-right: 4px;
}
/************************************************/
/* Titles */

h1, h2, h3 {
    font-family: "Roboto Slab", serif;
    margin: 0;
}

h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    margin: 0;
}

h1 {
    font-weight: 300;
    font-size: 36px;
}

h2 {
    font-weight: 300;
    font-size: 30px;
}

h3 {
    font-weight: 400;
    font-size: 24px;
}

h4 {
    font-weight: 600; /* 600 is semi-bold */
    font-size: 18px;
}

h5 {
    font-weight: 600; /* 600 is semi-bold */
    font-size: 16px;
}

h6 {
    font-weight: 700;
    font-size: 14px;
}

.text-shadow{
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}

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

.mobile-top-title{
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #333333;
    float: left;
    margin: 10px 0 0 8px;
    text-align: center;
    line-height: 18px;
    display: none;
}

.img80{ /*used on container div to make an image only 80% width and still responsive*/
    max-width: 80%;
    margin: auto;
}

.minh115{
    min-height: 115px;
}

.mw50per{
    min-width: 50%;
}

.col50per{
    width: 50%;
}

/************************************************/
/* Margin Classes */
/* All sides */
.m0{
    margin: 0;
}
.m8{
    margin: 8px;
}
.m16{
    margin: 16px;
}
.m32{
    margin: 32px;
}

/* Right Only */
.mr8{
    margin-right: 8px;
}
.mr16{
    margin-right: 16px;
}
.mr20{
    margin-right: 20px; /* for full width flex column - Global Warning box */
}
.mr32{
    margin-right: 32px;
}

/* Left Only */
.ml6{
    margin-left: 6px; /* added to help align arrow icons on occasion */
}
.ml8{
    margin-left: 8px;
}
.ml16{
    margin-left: 16px;
}
.ml32{
    margin-left: 32px;
}

/* Top Only */
.mt4{
    margin-top: 4px;
}
.mt8{
    margin-top: 8px;
}
.mt12{
    margin-top: 12px;
}
.mt16{
    margin-top: 16px;
}

.mt24{
    margin-top: 24px;
}

.mt32{
    margin-top: 32px;
}

/* Bottom Only */
.mb0{
    margin-bottom: 0;
}

.mb2{
    margin-bottom: 2px;
}
.mb4{
    margin-bottom: 4px;
}
.mb8{
    margin-bottom: 8px;
}
.mb16{
    margin-bottom: 16px;
}
.mb32{
    margin-bottom: 32px;
}

.nowrap{
    white-space: nowrap;
}

/************************************************/
/* Padding Classes */
/* All sides */
.p0{
    padding: 0;
}
.p8{
    padding: 8px;
}
.p16{
    padding: 16px;
}
.p32{
    padding: 32px;
}

/* Right Only */
.pr8{
    padding-right: 8px;
}
.pr16{
    padding-right: 16px;
}
.pr32{
    padding-right: 32px;
}

/* Left Only */
.pl8{
    padding-left: 8px;
}
.pl16{
    padding-left: 16px;
}
.pl32{
    padding-left: 32px;
}

/* Top Only */
.pt8{
    padding-top: 8px;
}
.pt16{
    padding-top: 16px;
}
.pt32{
    padding-top: 32px;
}

/* Bottom Only */
.pb8{
    padding-bottom: 8px;
}
.pb16{
    padding-bottom: 16px;
}
.pb32{
    padding-bottom: 32px;
}

/************************************************/
/* Text Alignment & Line Height Classes */
.tal{
    text-align: left;
}
.tar{
    text-align: right;
}
.tac{
    text-align: center;
}

.vac{
    vertical-align: middle;
}

.vab{
    vertical-align: bottom;
}

.lh48{
    line-height: 48px;
}

.lh64{
    line-height: 64px;
}

.upper{
    text-transform: uppercase;
}

/************************************************/
/* Float Classes */
.float-left{
    float: left;
}
.float-right{
    float: right;
}

/************************************************/
/* All Buttons */
.btn {
    border-radius: 3px;
    border-width: 1px 1px 3px 1px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600; /* 600 is semi-bold */
    text-transform: uppercase;
    font-size: 14px;
    padding: 8px 16px 8px 16px;
    text-decoration: none;
    min-height: 40px;
    cursor: pointer;
    vertical-align: bottom; /* changed */
}

.btn24 {
    border-radius: 3px;
    border-width: 1px 1px 3px 1px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600; /* 600 is semi-bold */
    text-transform: uppercase;
    font-size: 12px;
    padding: 3px 6px;
    text-decoration: none;
    min-height: 24px;
    cursor: pointer;
    vertical-align: bottom; /* changed */
}

/* Solid Buttons - except disabled */

.btn-solid{
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
    color: #ffffff;

}

#btn-end{ /* changed */ /* this is just for the end impersonation button */
    vertical-align: middle;
}

/* -------- Lime --------- */
.btn-lime-solid {
    border-color: #39622D;
    background: #779B30;
}

.btn-lime-solid:hover {
    border: 1px solid #39622D;
}

/* -------- Dark Navy --------- */
.btn-dark-navy-solid {
    border-color: #042642;
    background: #0D3354;
}

.btn-dark-navy-solid:hover {
    border: 1px solid #042642;
}

/* -------- Navy --------- */
.btn-navy-solid {
    border-color: #0D3354;
    background: #065577;
}

.btn-navy-solid:hover {
    border: 1px solid #0D3354;
}

/* -------- Red --------- */
.btn-red-solid {
    border-color: #AD4125;
    background: #CB4A27;
}

.btn-red-solid:hover {
    border: 1px solid #CB4A27;
}

/* -------- Gold --------- */
.btn-gold-solid {
    border-color: #C28912;
    background: #EBA51B;
}

.btn-gold-solid:hover {
    border: 1px solid #EBA51B;
}

/* -------- Disabled --------- */
.btn-disabled {
    border-radius: 3px;
    border-width: 1px 1px 3px 1px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600; /* 600 is semi-bold */
    text-transform: uppercase;
    font-size: 14px;
    padding: 8px 16px 8px 16px;
    text-decoration: none;
    min-height: 40px;
    cursor: pointer;
    border-color: #BBBDBF;
    background: #ECEFF2;
    color: #BBBDBF;
}

.btn-disabled:hover {
    border: 1px solid #BBBDBF;
}



/* Hollow Buttons - No Shadow */

.btn-hollow{
    background: transparent;
    padding: 8px 16px 8px 16px;
}

.btn-hollow24{
    background: transparent;
    padding: 3px 6px;
}


/* Hollow Buttons - With Shadow */

.btn-hollow-shadow {
    background: transparent;
    padding: 8px 16px 8px 16px;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
}


/* -------- Gold --------- */
.btn-gold-hollow {
    border: 1px solid #FFC328;
    color: #FFC328;
}

.btn-gold-hollow:hover {
    background: #FFC328;
    color: #FFFFFF;
}

/* -------- Lime --------- */
.btn-lime-hollow {
    border: 1px solid #779B30;
    color: #779B30;
}

.btn-lime-hollow:hover {
    background: #779B30;
    color: #FFFFFF;
}

/* -------- Navy Primary --------- */
.btn-navy-hollow {
    border: 1px solid #065577;
    color: #065577;
}

.btn-navy-hollow:hover {
    background: #065577;
    color: #FFFFFF;
}

/* -------- Dark Navy --------- */
.btn-dark-navy-hollow {
    border: 1px solid #0D3354;
    color: #0D3354;
}

.btn-dark-navy-hollow:hover {
    background: #0D3354;
    color: #FFFFFF;
}

/* -------- Dark Navy --------- */
.btn-red-hollow {
    border: 1px solid #AD4125;
    color: #AD4125;
}

.btn-red-hollow:hover {
    background: #AD4125;
    color: #FFFFFF;
}

.flat-button {
    background: none;
    border: none;
    /*padding: 16px;*/
    cursor: pointer;
    /*color: #AD4125;*/
    font-size: 16px;
    margin-left: 16px;
    vertical-align: middle;
}

/************************************************/
/* Existing Classes - possibly modified */
.pointer {
    cursor: pointer;
}

.dropdown-toggle{
    display: inline-block;
    padding-right: 8px;
    background-image: url("../images/CaretRightBlack.svg");
    background-repeat: no-repeat;
    background-position: right;
}

.dropdown-toggle:hover, .navuser-active{
    background-image: url("../images/CaretDownBlack.svg");
}

.dropdown-toggle-nav{ /* Different Color Caret and slightly different margin and padding */
    padding-right: 16px;
    background-image: url("../images/CaretRightNavy.svg");
    background-repeat: no-repeat;
    background-position: right;
}

.dropdown-toggle-nav:hover, .dropdown-toggle-nav-active{
    background-image: url("../images/CaretDownNavy.svg");
}

.dropdown-mobile-nav{ /* Different Color Caret and slightly different margin and padding */
    padding-right: 16px;
    background-image: url("../images/CaretRightWhite.svg");
    background-repeat: no-repeat;
    background-position: right;
}

.dropdown-mobile-nav-active, .dropdown-mobile-nav:hover{
    background-image: url("../images/CaretDownGold.svg");
}

.avatarlite{
    margin-bottom: -4px; /* better vertical center for user icon */
    width: 20px;
}

.top-icon{
    margin-bottom: -6px;
}

.notification-wrapper{
    position: relative;
    display: inline-block;
    margin-right: 16px;
    line-height: 60px;
    float: right;
}

.notify-circle {
    position:relative;
}
.notify-circle[data-badge]:after {
    content:attr(data-badge);
    position: absolute;
    top: 8px;
    right: 4px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    background-color: #AD4125;
    line-height:20px;
}

.UserLogin, .UserLoginMobile{
    display: inline-block;
}

.UserLogin{
    color: #000000;
    margin: 0 8px 0 8px;
}

.UserLoginMobile{
    margin: 0 0 0 8px;
}

.navbutton, .navbutton-mobile, .navbutton-active{
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.navbutton{
    color: #0D3354;
    margin-right: 24px;
}

.navbutton:hover, .navbutton-active{
    color: #3A929D;
}

.mobile-menu-container{
    margin: -16px 0 32px 0px;
}

#mobile-menu{
    display: none;
}


.mobile-menu{
    list-style-type: none;
    margin: 0 0 16px 20px;
    padding: 0;
}

.sub-mobile-menu{
    list-style-type: none;
    margin: 0 0 0 16px;
    padding: 0;
}

.mobile-menu li, .sub-mobile-menu li{
    line-height: 32px;
}

.navbutton-mobile{
    color: #ffffff;
}

.subnavbutton-active, .subnavbutton-active:hover, .navbutton-mobile:hover, .subnav-mobile:hover{
    color: #FFC328;
}

.subnav-mobile{
    color: #ffffff;
    font-weight: 700;
    margin-left: 8px;
}

.navbar-inverse{
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    margin-right: 32px;
    color: #3793AB;
}

.legalLinks{
    font-size: 12px;
    margin: 32px 16px 0 16px;
}
.legalLinks a{
    color: #000000;
    text-decoration: none;
}
.legalLinks a:hover{
    color: #000000;
}

#copyright{
    font-size: 12px;
}

.stripbackground {
    background-image: url("../images/impersonate-background.png");
    height: 50px;
    /*border-bottom: 4px solid #EBA51B;*/
    color: #ffffff;
    text-align: center;
    line-height: 50px;
}

.menu-toggle{
    background-color: #082743;
    float: right;
    height: 60px;
    cursor: pointer;
    width: 60px;
    text-align: center;
    display: none;
}

#mobile-hamburger{
    margin-top: 12px;
}

.program-logos{
    text-align: center;
    margin: 32px 0 16px 0;
}

#program-logo{
    max-width: 250px;
    margin: 0 auto;
}

#program-logo-slim{
    display: none;
    max-width: 80px;
    margin: 0 auto;
}

#register-now-btn{
    margin: 0 4px 32px 4px;
    text-align: center;
    display: none;
}

#amount-due-btn{
    margin: 0 4px 16px 4px;
    text-align: center;
}

.hr-mid-navy, .hr-gold{
    width:99%;
    padding: 1px;
    background-position: top;
    background-size: 6px 1px;
    background-repeat: repeat-x;
}

.hr-gold-solid, .hr-lime-solid{
    width:99%;
    padding: 2px;
    clear: both;
}
.hr-gold-solid{
    background-color: #EBA51B;
}

.hr-lime-solid{
    background-color: #39622D;
}

.hr-mid-navy { /* applied to a div tag */
    background-image: linear-gradient(to right, #045274 50%, rgba(13, 51, 84, 0) 50%);
}

.hr-gold { /* applied to a div tag */
    background-image: linear-gradient(to right, #FFC328 50%, rgba(251, 193, 22, 0) 50%);
}

#hr-gold{
    display: none;
}

.provider-logo-mobile{
    display: none;
    max-width: 185px;
    margin: 0 auto;
}

.gold-left-icon{
    width: 24px;
    height: 24px;
    margin-top: 8px;
    vertical-align: text-bottom;
}

.gold-left-icon-slim{
    width: 36px;
    height: 36px;
    vertical-align: text-bottom;
}

.tool-icon{
    display: inline-block;
    margin: 0 8px;
}

.tool-slim{
    display: unset;
    margin: 8px 16px;
}

.left-icon-container{
    width: 40px;
    text-align: center;
    display: inline-block;
    margin-left: 10px;
}

.left-icon-container-slim{
    width: 100%;
    text-align: center;
    margin-bottom: -30px;
    margin-top: 24px;
    position: relative;
    cursor: pointer;
    display: none;
}

.left-module-head{
    cursor: pointer;
    padding-top: 20px;
}

.head-caret{
    float: right;
    margin: 8px 16px 0 16px;
}

.head-caret-right{
    width: 24px;
    height: 24px;
    background-image: url("../images/AngleRightGold24.svg");
    background-position: right;
    background-repeat: no-repeat;
    cursor: pointer;
}

.head-caret-down{
    width: 24px;
    height: 24px;
    background-image: url("../images/AngleDownGold24.svg");
    background-position: right;
    background-repeat: no-repeat;
    cursor: pointer;
}

.grid-caret-right {
    width: 24px;
    height: 24px;
    background-image: url(../images/AngleRightNavy24.svg);
    background-position: right;
    background-repeat: no-repeat;
    cursor: pointer;
}

.grid-caret-down {
    width: 24px;
    height: 24px;
    background-image: url(../images/AngleDownNavy24.svg);
    background-position: right;
    background-repeat: no-repeat;
    cursor: pointer;
}

.grid-caret {
    margin: 12px 0;
}

.drawer-head{
    background-color: #0D3354;
    padding: 8px;
    width: 92%;
}

.white-carrot-right {
    width: 24px;
    height: 24px;
    background-image: url(../images/AngleRightWhite24.svg);
    background-position: right;
    background-repeat: no-repeat;
    cursor: pointer;
}

.white-carrot-down {
    width: 24px;
    height: 24px;
    background-image: url(../images/AngleDownWhite24.svg);
    background-position: right;
    background-repeat: no-repeat;
    cursor: pointer;
}

.attachment-box{
    border: 1px solid #D0D3D3;
    padding: 16px;
}
.attachment-box-upload{
    border-left: 1px solid #D0D3D3;
    border-right: 1px solid #D0D3D3;
    border-bottom: 1px solid #D0D3D3;
    padding: 16px;
}

.bar-back{
    background-color: #D0D3D3;
    height: 4px;
    width: 100%;
}

.bar-progress{
    background-color: #779B30;
    height: 4px;
}

.open-row{
    padding: 8px 16px 16px 50px;
    border-bottom: 1px solid #000000;
}

.yellow-back{
    background-color: #FFFAEB !important;
}

.left-content-container{
    margin: 16px 16px 0 0;
}

#tasks-content, #recent-content{
    margin: 16px 16px 0 14px;
}

.pointer{
    cursor: pointer;
}

.prog-bar{
    width: 68%;
}

.byupw-chevron-img{
    max-width: 316px;
    margin: 0 auto;
}

.byupw-chevron-img-pop {
    max-width: 316px;
    background-color: #ffffff;
    padding: 8px;
    margin-top: -24px;
}

.progress-bar-custom {
    background: #FFC328;
    background-image: linear-gradient(#FFC328 50%, #C28912 50%);
}

.progress {
    border: 1px solid #0D3354;
    border-radius: 0;
    height: 30px;
    background-color: white;
    margin-bottom: 24px;
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

.navdetail{
    font-size: 14px;
    color: #ffffff;
}
.navdetail:hover{
    color: #ffffff;
    text-decoration: underline;
}

.tooltip{
    z-index: 20;
}

.tooltip.right {
    padding: 0 5px;
    margin-left: 3px;
}

.tooltip.right .tooltip-arrow {
    /*top: 50%;*/ /* change */
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #FFC328;
}

.tooltip-arrow {
    top: 20px; /* change */
    left: 0;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #FFC328;
}

.tooltip-inner {
    width: 380px;
    padding: 1px 1px 1px 8px;
    color: #000;
    text-align: center;
    background-color: #FFC328;
    opacity: 1;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, .40);
}

.customtooltip {
    background-color: white;
    width: auto;
    min-width: 185px;
    color: #000000;
    text-align: left;
    padding: 16px 16px 0 16px;
    font-size: 14px;
}

.tool-place-right-progress, .tool-place-right-gathering, .tool-place-right-contacts{
    padding: 0 5px;
    left: 90px;
    position: absolute;
}

/* change */
/*.tool-place-right-progress{
    top: -100px;
}

.tool-place-right-gathering{
    top: -42px;
}

.tool-place-right-contacts{
    top: -32px;
}*/

.tooltip-content{
    margin-right: 16px;
    width: 100%;
}

.toolTipClose{
    float: right;
}

.black-link{
    color: #000000;
    text-decoration: none;
}

.black-link:hover{
    color: #AD4125;
    text-decoration: underline;
}

.red-link{
    color: #AD4125;
    text-decoration: none;
}

.red-link:hover{
    color: #065577;
    text-decoration: underline;
}

.social-icon-block{
    text-align: center;
    margin-right: -4px;
}

.social-icon {
    margin: 0 8px 16px 0;
    text-decoration: none;
    display: inline-block;
}

.header-icon{
    vertical-align: middle;
    margin-bottom: 4px;
}

.module-head{
    box-sizing: border-box;
    border-radius: 4px 4px 0px 0px;
    border: 1px solid;
    /*height: 36px;*/
    width: 100%;
    padding: 6px 8px 4px 8px;
    clear: both;
}

.module-head-sq{
    box-sizing: border-box;
    border: 1px solid;
    height: 36px;
    width: 100%;
    padding: 6px 8px 0 8px;
    margin-top: 2px;
}

.payment-info{
    float:right;
}

.paymod{
    float: left;
    margin-bottom: 16px
}

#current-head, #future-head, #past-head{
    cursor: pointer;
}

.gold-head{
    background: #EBA51B;
    border-color: #C28912;
}

.lime-head{
    background: #779B30;
    border-color: #39622D;
}

.teal-head{
    background: #3793AB;
    border-color: #065577;
}

.navy-head{
    background: #065577;
    border-color: #0D3354;
}

.dark-navy-head{
     background: #0D3354;
     border-color: #042642;
 }

.dark-red-head{
    background: #AD4125;
    border-color: #70230F;
}

.edit-activity{
    background-color: #f5fff5;
    border-radius: 5px;
    padding: 8px 0 16px 0;
    border: 1px solid #F0F7cB;
}

.edit-highlight{
    background-color: #f5fff5 !important;
}

.pa-frame{
    background: #F6F6F6;
    border: 1px solid #ECEFF2;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 16px 16px 48px 16px;
    min-height: 300px;
    position: relative;
}

.pa-content{
    margin: 0 48px;
}

.video-pages, .more-link{
    clear: both;
    text-align: right;
    margin-right: 8px;
    cursor: pointer;
}

.video-pages img, .more-link img{
     vertical-align: text-bottom;
 }

.more-link img{
    vertical-align: middle;
    margin-bottom: 2px;
}

.video-pages{
    color: #065577;
    float: right;
}

.more-link a{
    color: #AD4125;
}


.left-nav-arrow, .right-nav-arrow{
    position: absolute;
    top: 50%;
    height: 24px;
    width: 24px;
    background-color: #065577;
    opacity: .05;
    border-radius: 50%;
    line-height: 26px;
    cursor: pointer;
}

.left-nav-arrow{
    left: 8px;
}

.right-nav-arrow{
    right: 8px;
}

.right-nav-arrow:hover, .left-nav-arrow:hover{
    opacity: 1;
}

.dot-nav-container{
    width: calc(100% - 32px); /* Takes care of centering the dot-nav */
    position: absolute;
    bottom: 16px;
}

.dot-nav{
    width: 40%;
    margin: 0 auto;
    text-align: center;
}

.dot-nav-solid, .dot-nav-hollow{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #065577;
    margin: 8px 8px 0 8px;
    display: inline-block;
}

.dot-nav-solid{
    background: #065577;
    cursor: pointer;
}

.dot-nav-hollow{
    background: #ffffff;
    cursor: pointer;
}

.module-sub-head{
    padding: 8px;
    background-color: #FFEFD0;
}

.grid-subhead, .grid-subhead-notify{
    padding: 10px 8px 4px 8px;
    background-color: #EFF3FF;
}

.payment-sub-head{
    padding: 8px;
    background-color: #D8E39D;
}

.module-row, .payment-row, .todo-row, grid-row{
    padding: 8px;
}

.module-row:nth-child(even){
    background: #F2F2F2;
}

.module-row:nth-child(odd){
    background: #ffffff;
}

.grid-row:nth-child(even), .todo-row:nth-child(even){
    background: #F2F2F2;
}

.grid-row:nth-child(odd), .todo-row:nth-child(odd){
    background: #ffffff;
}

.notify-row:nth-child(even){
    background: #ffffff;
}

.notify-row:nth-child(odd){
    background: #F2F2F2;
}

.date-cell, .text-cell{
    display: inline-block;
}

.date-cell{
    margin-right: 24px;
    min-width: 60px;
}

.grid-cell{
    font-size: 14px;
    padding: 8px 8px 4px 0;
    line-height: 36px;
 }

.grid-cell-two{
    font-size: 14px;
    padding: 8px 8px 0 0;
    line-height: 16px;
}

.cell-desk-center{
    text-align: center;
    margin: 0 auto;
}

.grid-icon{
    vertical-align: text-bottom;
    padding-bottom: 2px;
}

.inline-icon{
    vertical-align: text-bottom;
}

.grade-cell {
    text-align: right;
    flex: 1;
    white-space: nowrap;
    margin-left: 16px;
}

.head-small{
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    margin: -9px 0 -6px 0;

}

.date-top, .date-bottom{
    font-size: 12px;
    text-transform: uppercase;
    margin: 0;
}

.date-bottom{
    padding-bottom: 4px;
}

.student-bottom{
    font-size: 12px;
    font-weight: 600;
    margin-top: 0px;
}

.page-numbers{
    display: inline-block;
    margin-left: 32px;
    float: right;
}

.module-frame{
    border: 1px solid;
    padding: 0;
    margin: 1px 0 0 0;
}

.module-extra-frame{
    border-top: 4px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    padding: 0;
}

.lime-frame{
    border-color: #39622D;
}

.teal-frame{
    border-color: #065577;
}

.dark-frame{
    border-color: #042642;
}

.red-frame{
    border-color: #AD4125;
}

.gold-frame{
    border-color: #C28912;
}

.contact-head-column{
    line-height: 28px;
    margin-top: 12px;
}


/* changed */
.gen-frame{
    background: #F6F6F6;
    border: 1px solid #ECEFF2;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 16px;
    position: relative;
}

.videocontainer{
    padding: 0px;
    width: 100%;
    height: auto;
}

.videoplayer {
    display: inline-block;
    position: relative;
    padding-bottom: 56.25%;
    width: 100%;
    height: auto;
}

.videoplayer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.menu-icon{
    vertical-align: text-bottom;
    margin-right: 4px;
    display: inline-block;
}

.ira-icon{
    margin: 18px 0 0 8px;
}

.dropmenu-container{
    display: inline-block;
    position: relative;
}

.dropdown-menu-finances, .dropdown-menu-profile, .dropdown-menu-reports, .dropdown-info{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    position: absolute;
    border-top: 5px solid #065577;
    border-right: 1px solid #065577;
    border-bottom: 1px solid #065577;
    border-left: 1px solid #065577;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, .40);
    z-index: 50;
    display: none;
}

.dropdown-menu-finances {
    left: 0px;
    top: 60%;
    min-width: 140px;
    position: absolute;

}

.dropdown-menu-reports {
    left: 0px;
    top: 60%;
    min-width: 140px;

}

.dropdown-menu-profile {
    right: 16px;
    top: 83%;
    line-height: 16px;
    padding: 0 16px;
}

.dropdown-info {
    top: 30px;
}

.dropdown-menu-notify{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    position: absolute;
    border-top: 5px solid #AD4125;
    border-right: 1px solid #AD4125;
    border-bottom: 1px solid #AD4125;
    border-left: 1px solid #AD4125;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, .40);
    z-index: 50;
    display: none;
}

.dropdown-menu-notify{
    right: 14px;
    top: 83%;
    line-height: 20px;
    min-width: 300px;
}

.dropdown-menu-finances:before, .dropdown-menu-profile:before, .dropdown-menu-reports:before, .dropdown-info:before {
    position: absolute;
    top: -9px;
    display: inline-block;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #065577;
    border-left: 5px solid transparent;
    content: '';
}

.dropdown-menu-notify:before {
    position: absolute;
    top: -9px;
    display: inline-block;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #AD4125;
    border-left: 5px solid transparent;
    content: '';
    right: 8px;
}

.dropdown-menu-finances:before, .dropdown-menu-reports:before {
    left: 25px;
}

.dropdown-menu-profile:before {
    right: 50px;
}

.dropdown-info:before {
    left: 50px;
}

dropdown-menu-notify:before {
    left: 10px;
}

.dropdown-menu-finances li, .dropdown-menu-reports li{
    padding: 8px 8px 8px 0;
    margin-left: -28px;
    line-height: 16px;
}

.resource-row{
    display: flex;
    flex: 1;
    flex-wrap: wrap;
}

.resource-block{
    position: relative;
    flex: 1;
    margin: 0 16px 16px 0;
    min-width: 320px;
}

.resource-icon{
    position: absolute;
    top: 4px;
    right: 4px;
    height: 48px;
    width: 48px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 1px solid;
    text-align: center;
    line-height: 66px;
    overflow: hidden;
    /*display: none;*/ /* Until we get some illustrations */
}

.resource-icon-border-gold{
    border-color: #C28912;
}

.resource-icon-border-lime{
    border-color: #39622D;
}

.resource-icon-border-navy{
    border-color: #0D3354;
}

.resource-illustration{
    max-width: 44px;
    max-height: 44px;
    margin-top: 2px;
}

.resource-copy{
    padding: 16px;
    height: 115px;
    overflow: hidden;
}

.head-slim{
    font-size: 14px;
}

.grid-mobile-only, .notify-mobile-only {
    display: none;
    margin: 6px 8px 0 0;
}

/************************************************/
/* Modal Windows */
.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
    z-index: 1000;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    overflow: auto;
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 60%;
    max-height: 80%;
    position: relative;
    transition: all 5s ease-in-out;
}

.popup .close {
    position: absolute;
    top: 0;
    right: 8px;
    transition: all 200ms;
    font-size: 30px;
}

.pop-content {
    max-height: 90%;
    overflow: auto;
    margin-bottom: 16px;
    padding: 8px;
}

/************************************************/
/* Form Classes */

.form-row{
    width: 60%;
    margin-bottom: 8px;
}

.form-label{
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: #333333;
    margin: 8px 0 0 8px;
}

.form-label-gray{
    font-size: 12px;
    font-weight: 400;
    color: #767676;
    margin: 8px 0 0 0;
}

.form-label-small{
    font-size: 12px;
    font-weight: 300;
}

.astrix, .required-field {
    color: #AD4125;
    font-size: 12px;
    font-weight: 700;
    margin-top: 8px;
}

.field-input, .select-input, .menu-select-input, .field-input-30, .select-input-30, .menu-select-input-30{
    width: 97%;
    border: 1px solid #cccccc;
    border-radius: 3px;
    font-size: 16px;
    color: #333333;
    background-color: #ffffff;
    padding: 0 0 0 8px;
}

.field-input-30, .select-input-30, .menu-select-input-30{
    height: 30px;
}

.field-input{
    height: 36px;
    padding-left: 8px;
}

.textarea-input{
    height: 90px;
    padding: 8px;
}

.filter-input{
    height: 24px;
    font-size: 14px;
    padding-left: 8px;
    /*margin-right: 8px;*/
    border-radius: 3px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
}

.select-input, .menu-select-input{
    height: 40px;
}

.grid-input{
    width: 84px;
    text-align: right;
    padding: 0 8px;
}

.invalid{
    border: 1px solid #AD4125;
}

#second-students-grid{
    display: none;
}

.percent-col{
    width: 40px;
    text-align: right;
    margin-top: 32px;
    margin-right: 8px;
}

/*.percent-col label{
    position: absolute;
    top: 45%;
    left: 64px;
}*/


/* Content Switchers on contact card */
.switcher-first{
    text-align: center;
    text-transform: uppercase;
    color: #0D3354;
    cursor: pointer;
    border: 1px solid #0D3354;
    box-sizing: border-box;
    min-width: 230px;
    width: 50%
}
.switcher-two, .switcher-three{
    text-align: center;
    text-transform: uppercase;
    color: #0D3354;
    cursor: pointer;
    border-top: 1px solid #0D3354;
    border-bottom: 1px solid #0D3354;
    border-right: 1px solid #0D3354;
    box-sizing: border-box;
    min-width: 230px;
    width: 50%
}

.switcher-last{
    text-align: center;
    text-transform: uppercase;
    color: #0D3354;
    cursor: pointer;
    border-top: 1px solid #0D3354;
    border-bottom: 1px solid #0D3354;
    border-right: 1px solid #0D3354;
    box-sizing: border-box;
    min-width: 230px;
    width: 50%
}

.switcher-first:hover, .switcher-two:hover, .switcher-three:hover, .switcher-last:hover{
    background-color: #F2F2F2;
}

.switcher-active{
    background-color: #0D3354;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}

.switcher-active:hover{
    background-color: #0D3354;
}


/*  Circular Progress Bars CSS */
.progress-circle {
    font-size: 20px;
    margin: 0 auto;
    position: relative; /* so that children can be absolutely positioned */
    padding: 0;
    width: 5em;
    height: 5em;
    background-color: #666666;
    border-radius: 50%;
    line-height: 5em;
    -webkit-box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.75);
}

.progress-circle:after{
    border: none;
    position: absolute;
    top: 0.35em;
    left: 0.35em;
    text-align: center;
    display: block;
    border-radius: 50%;
    width: 4.3em;
    height: 4.3em;
    background-color: #065577;
    content: " ";
}

/* for the tool-tip - slightly different coloring*/
.progress-circle-tip {
    font-size: 20px;
    margin: 0 auto;
    position: relative; /* so that children can be absolutely positioned */
    padding: 0;
    width: 5em;
    height: 5em;
    background-color: #cccccc;
    border-radius: 50%;
    line-height: 5em;
    -webkit-box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.75);
}

.progress-circle-tip:after{
    border: none;
    position: absolute;
    top: 0.35em;
    left: 0.35em;
    text-align: center;
    display: block;
    border-radius: 50%;
    width: 4.3em;
    height: 4.3em;
    background-color: #666666;
    content: " ";
}


/* Text inside the control */
.progress-circle span, .progress-circle-tip span {
    position: absolute;
    line-height: 5em;
    width: 5em;
    text-align: center;
    display: block;
    color: #ffffff;
    z-index: 2;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
    font-weight: 600;
}
.left-half-clipper {
    /* a round circle */
    border-radius: 50%;
    width: 5em;
    height: 5em;
    position: absolute; /* needed for clipping */
    clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/
}
/* when p>50, don't clip left half*/
.progress-circle.over50 .left-half-clipper, .progress-circle-tip.over50 .left-half-clipper {
    clip: rect(auto,auto,auto,auto);
}
.value-bar {
    /*This is an overlayed square, that is made round with the border radius,
    then it is cut to display only the left half, then rotated clockwise
    to escape the outer clipping path.*/
    position: absolute; /*needed for clipping*/
    clip: rect(0, 2.5em, 5em, 0);
    width: 5em;
    height: 5em;
    border-radius: 50%;
    border: 0.45em solid #FFC328; /*The border is 0.35 but making it larger removes visual artifacts */
    box-sizing: border-box;
    -webkit-box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.75);

}
/* Progress bar filling the whole right half for values above 50% */
.progress-circle.over50 .first50-bar, .progress-circle-tip.over50 .first50-bar {
    /*Progress bar for the first 50%, filling the whole right half*/
    position: absolute; /*needed for clipping*/
    clip: rect(0, 5em, 5em, 2.5em);
    background-color: #FFC328;
    border-radius: 50%;
    width: 5em;
    height: 5em;
}
.progress-circle:not(.over50) .first50-bar, .progress-circle-tip:not(.over50) .first50-bar{ display: none; }


/* Progress bar rotation position */
.progress-circle.p0 .value-bar, .progress-circle-tip.p0 .value-bar { display: none; }
.progress-circle.p1 .value-bar, .progress-circle-tip.p1 .value-bar { transform: rotate(4deg); }
.progress-circle.p2 .value-bar, .progress-circle-tip.p2 .value-bar { transform: rotate(7deg); }
.progress-circle.p3 .value-bar, .progress-circle-tip.p3 .value-bar { transform: rotate(11deg); }
.progress-circle.p4 .value-bar, .progress-circle-tip.p4 .value-bar { transform: rotate(14deg); }
.progress-circle.p5 .value-bar, .progress-circle-tip.p5 .value-bar { transform: rotate(18deg); }
.progress-circle.p6 .value-bar, .progress-circle-tip.p6 .value-bar { transform: rotate(22deg); }
.progress-circle.p7 .value-bar, .progress-circle-tip.p7 .value-bar { transform: rotate(25deg); }
.progress-circle.p8 .value-bar, .progress-circle-tip.p8 .value-bar { transform: rotate(29deg); }
.progress-circle.p9 .value-bar, .progress-circle-tip.p9 .value-bar { transform: rotate(32deg); }
.progress-circle.p10 .value-bar, .progress-circle-tip.p10 .value-bar { transform: rotate(36deg); }
.progress-circle.p11 .value-bar, .progress-circle-tip.p11 .value-bar { transform: rotate(40deg); }
.progress-circle.p12 .value-bar, .progress-circle-tip.p12 .value-bar { transform: rotate(43deg); }
.progress-circle.p13 .value-bar, .progress-circle-tip.p13 .value-bar { transform: rotate(47deg); }
.progress-circle.p14 .value-bar, .progress-circle-tip.p14 .value-bar { transform: rotate(50deg); }
.progress-circle.p15 .value-bar, .progress-circle-tip.p15 .value-bar { transform: rotate(54deg); }
.progress-circle.p16 .value-bar, .progress-circle-tip.p16 .value-bar { transform: rotate(58deg); }
.progress-circle.p17 .value-bar, .progress-circle-tip.p17 .value-bar { transform: rotate(61deg); }
.progress-circle.p18 .value-bar, .progress-circle-tip.p18 .value-bar { transform: rotate(65deg); }
.progress-circle.p19 .value-bar, .progress-circle-tip.p19 .value-bar { transform: rotate(68deg); }
.progress-circle.p20 .value-bar, .progress-circle-tip.p20 .value-bar { transform: rotate(72deg); }
.progress-circle.p21 .value-bar, .progress-circle-tip.p21 .value-bar { transform: rotate(76deg); }
.progress-circle.p22 .value-bar, .progress-circle-tip.p22 .value-bar { transform: rotate(79deg); }
.progress-circle.p23 .value-bar, .progress-circle-tip.p23 .value-bar { transform: rotate(83deg); }
.progress-circle.p24 .value-bar, .progress-circle-tip.p24 .value-bar { transform: rotate(86deg); }
.progress-circle.p25 .value-bar, .progress-circle-tip.p25 .value-bar { transform: rotate(90deg); }
.progress-circle.p26 .value-bar, .progress-circle-tip.p26 .value-bar { transform: rotate(94deg); }
.progress-circle.p27 .value-bar, .progress-circle-tip.p27 .value-bar { transform: rotate(97deg); }
.progress-circle.p28 .value-bar, .progress-circle-tip.p28 .value-bar { transform: rotate(101deg); }
.progress-circle.p29 .value-bar, .progress-circle-tip.p29 .value-bar { transform: rotate(104deg); }
.progress-circle.p30 .value-bar, .progress-circle-tip.p30 .value-bar { transform: rotate(108deg); }
.progress-circle.p31 .value-bar, .progress-circle-tip.p31 .value-bar { transform: rotate(112deg); }
.progress-circle.p32 .value-bar, .progress-circle-tip.p32 .value-bar { transform: rotate(115deg); }
.progress-circle.p33 .value-bar, .progress-circle-tip.p33 .value-bar { transform: rotate(119deg); }
.progress-circle.p34 .value-bar, .progress-circle-tip.p34 .value-bar { transform: rotate(122deg); }
.progress-circle.p35 .value-bar, .progress-circle-tip.p35 .value-bar { transform: rotate(126deg); }
.progress-circle.p36 .value-bar, .progress-circle-tip.p36 .value-bar { transform: rotate(130deg); }
.progress-circle.p37 .value-bar, .progress-circle-tip.p37 .value-bar { transform: rotate(133deg); }
.progress-circle.p38 .value-bar, .progress-circle-tip.p38 .value-bar { transform: rotate(137deg); }
.progress-circle.p39 .value-bar, .progress-circle-tip.p39 .value-bar { transform: rotate(140deg); }
.progress-circle.p40 .value-bar, .progress-circle-tip.p40 .value-bar { transform: rotate(144deg); }
.progress-circle.p41 .value-bar, .progress-circle-tip.p41 .value-bar { transform: rotate(148deg); }
.progress-circle.p42 .value-bar, .progress-circle-tip.p42 .value-bar { transform: rotate(151deg); }
.progress-circle.p43 .value-bar, .progress-circle-tip.p43 .value-bar { transform: rotate(155deg); }
.progress-circle.p44 .value-bar, .progress-circle-tip.p44 .value-bar { transform: rotate(158deg); }
.progress-circle.p45 .value-bar, .progress-circle-tip.p45 .value-bar { transform: rotate(162deg); }
.progress-circle.p46 .value-bar, .progress-circle-tip.p46 .value-bar { transform: rotate(166deg); }
.progress-circle.p47 .value-bar, .progress-circle-tip.p47 .value-bar { transform: rotate(169deg); }
.progress-circle.p48 .value-bar, .progress-circle-tip.p48 .value-bar { transform: rotate(173deg); }
.progress-circle.p49 .value-bar, .progress-circle-tip.p49 .value-bar { transform: rotate(176deg); }
.progress-circle.p50 .value-bar, .progress-circle-tip.p50 .value-bar { transform: rotate(180deg); }
.progress-circle.p51 .value-bar, .progress-circle-tip.p51 .value-bar { transform: rotate(184deg); }
.progress-circle.p52 .value-bar, .progress-circle-tip.p52 .value-bar { transform: rotate(187deg); }
.progress-circle.p53 .value-bar, .progress-circle-tip.p53 .value-bar { transform: rotate(191deg); }
.progress-circle.p54 .value-bar, .progress-circle-tip.p54 .value-bar { transform: rotate(194deg); }
.progress-circle.p55 .value-bar, .progress-circle-tip.p55 .value-bar { transform: rotate(198deg); }
.progress-circle.p56 .value-bar, .progress-circle-tip.p56 .value-bar { transform: rotate(202deg); }
.progress-circle.p57 .value-bar, .progress-circle-tip.p57 .value-bar { transform: rotate(205deg); }
.progress-circle.p58 .value-bar, .progress-circle-tip.p58 .value-bar { transform: rotate(209deg); }
.progress-circle.p59 .value-bar, .progress-circle-tip.p59 .value-bar { transform: rotate(212deg); }
.progress-circle.p60 .value-bar, .progress-circle-tip.p60 .value-bar { transform: rotate(216deg); }
.progress-circle.p61 .value-bar, .progress-circle-tip.p61 .value-bar { transform: rotate(220deg); }
.progress-circle.p62 .value-bar, .progress-circle-tip.p62 .value-bar { transform: rotate(223deg); }
.progress-circle.p63 .value-bar, .progress-circle-tip.p63 .value-bar { transform: rotate(227deg); }
.progress-circle.p64 .value-bar, .progress-circle-tip.p64 .value-bar { transform: rotate(230deg); }
.progress-circle.p65 .value-bar, .progress-circle-tip.p65 .value-bar { transform: rotate(234deg); }
.progress-circle.p66 .value-bar, .progress-circle-tip.p66 .value-bar { transform: rotate(238deg); }
.progress-circle.p67 .value-bar, .progress-circle-tip.p67 .value-bar { transform: rotate(241deg); }
.progress-circle.p68 .value-bar, .progress-circle-tip.p68 .value-bar { transform: rotate(245deg); }
.progress-circle.p69 .value-bar, .progress-circle-tip.p69 .value-bar { transform: rotate(248deg); }
.progress-circle.p70 .value-bar, .progress-circle-tip.p70 .value-bar { transform: rotate(252deg); }
.progress-circle.p71 .value-bar, .progress-circle-tip.p71 .value-bar { transform: rotate(256deg); }
.progress-circle.p72 .value-bar, .progress-circle-tip.p72 .value-bar { transform: rotate(259deg); }
.progress-circle.p73 .value-bar, .progress-circle-tip.p73 .value-bar { transform: rotate(263deg); }
.progress-circle.p74 .value-bar, .progress-circle-tip.p74 .value-bar { transform: rotate(266deg); }
.progress-circle.p75 .value-bar, .progress-circle-tip.p75 .value-bar { transform: rotate(270deg); }
.progress-circle.p76 .value-bar, .progress-circle-tip.p76 .value-bar { transform: rotate(274deg); }
.progress-circle.p77 .value-bar, .progress-circle-tip.p77 .value-bar { transform: rotate(277deg); }
.progress-circle.p78 .value-bar, .progress-circle-tip.p78 .value-bar { transform: rotate(281deg); }
.progress-circle.p79 .value-bar, .progress-circle-tip.p79 .value-bar { transform: rotate(284deg); }
.progress-circle.p80 .value-bar, .progress-circle-tip.p80 .value-bar { transform: rotate(288deg); }
.progress-circle.p81 .value-bar, .progress-circle-tip.p81 .value-bar { transform: rotate(292deg); }
.progress-circle.p82 .value-bar, .progress-circle-tip.p82 .value-bar { transform: rotate(295deg); }
.progress-circle.p83 .value-bar, .progress-circle-tip.p83 .value-bar { transform: rotate(299deg); }
.progress-circle.p84 .value-bar, .progress-circle-tip.p84 .value-bar { transform: rotate(302deg); }
.progress-circle.p85 .value-bar, .progress-circle-tip.p85 .value-bar { transform: rotate(306deg); }
.progress-circle.p86 .value-bar, .progress-circle-tip.p86 .value-bar { transform: rotate(310deg); }
.progress-circle.p87 .value-bar, .progress-circle-tip.p87 .value-bar { transform: rotate(313deg); }
.progress-circle.p88 .value-bar, .progress-circle-tip.p88 .value-bar { transform: rotate(317deg); }
.progress-circle.p89 .value-bar, .progress-circle-tip.p89 .value-bar { transform: rotate(320deg); }
.progress-circle.p90 .value-bar, .progress-circle-tip.p90 .value-bar { transform: rotate(324deg); }
.progress-circle.p91 .value-bar, .progress-circle-tip.p91 .value-bar { transform: rotate(328deg); }
.progress-circle.p92 .value-bar, .progress-circle-tip.p92 .value-bar { transform: rotate(331deg); }
.progress-circle.p93 .value-bar, .progress-circle-tip.p93 .value-bar { transform: rotate(335deg); }
.progress-circle.p94 .value-bar, .progress-circle-tip.p94 .value-bar { transform: rotate(338deg); }
.progress-circle.p95 .value-bar, .progress-circle-tip.p95 .value-bar { transform: rotate(342deg); }
.progress-circle.p96 .value-bar, .progress-circle-tip.p96 .value-bar { transform: rotate(346deg); }
.progress-circle.p97 .value-bar, .progress-circle-tip.p97 .value-bar { transform: rotate(349deg); }
.progress-circle.p98 .value-bar, .progress-circle-tip.p98 .value-bar { transform: rotate(353deg); }
.progress-circle.p99 .value-bar, .progress-circle-tip.p99 .value-bar { transform: rotate(356deg); }
.progress-circle.p100 .value-bar, .progress-circle-tip.p100 .value-bar { transform: rotate(360deg); }

/* Temp Calendar Styles - proto */
.vanilla-calendar *, .vanilla-calendar *:before, .vanilla-calendar *:after {
    box-sizing: border-box;
}

.vanilla-calendar {
    background-color: #ffffff;
    border-radius: 3px;
    border: solid 1px #cccccc;
    margin: 0;
    overflow: hidden;
    width: 90%;
}

.vanilla-calendar .vanilla-calendar-btn {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: button;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: normal;
    min-width: 27px;
    outline: none;
    overflow: visible;
    padding: 0;
    text-align: center;
}

.vanilla-calendar .vanilla-calendar-header {
    align-items: center;
    display: flex;
    padding: 2px 4px 0 4px;
    text-transform: uppercase;
    font-size: 15px;
}

.vanilla-calendar .vanilla-calendar-header svg {
    fill: #333333;
}

.vanilla-calendar .vanilla-calendar-header__label {
    font-weight: bold;
    text-align: center;
    width: 100%;
}

.vanilla-calendar .vanilla-calendar-week {
    background-color: #e1e1e1;
    display: flex;
    flex-wrap: wrap;
}

.vanilla-calendar .vanilla-calendar-week span {
    color: #000000;
    flex-direction: column;
    flex: 0 0 14.28%;
    font-size: 12px;
    font-weight: 600;
    max-width: 14.28%;
    padding: 4px 0px;
    text-align: center;
    text-transform: uppercase;
}

.vanilla-calendar .vanilla-calendar-body {
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 4px
}

.vanilla-calendar .vanilla-calendar-date {
    align-items: center;
    background-color: #fff;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    flex: 0 0 14.28%;
    max-width: 14.28%;
    padding: 4px 0;
    font-size: 14px;
}

.vanilla-calendar .vanilla-calendar-date--active {
    cursor: pointer;
}

.vanilla-calendar .vanilla-calendar-date--today {
    background-color: #e1e1e1;
    color: #000000;
}

.vanilla-calendar .vanilla-calendar-date--selected {
    background-color: #0D3354;
    color: #ffffff;
}

.vanilla-calendar .vanilla-calendar-date--disabled {
    border-radius: 0;
    cursor: not-allowed;
    opacity: 0.2;
}