/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Goal
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.card-goal .goal-due-date {
    margin-bottom: 10px;
    display: inline-block;
    color: #b0b0b0;
}

.card-goal .card-info-header {
    -webkit-transition: background-color 240ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: background-color 240ms cubic-bezier(0.77, 0, 0.175, 1);
}

.card-goal .card-info-header-title {
    display: inline-block;
    max-width: 72%;
}

.card-goal .card-tabbed_link-list {
    box-shadow: none;
}

.card-goal .card-tabbed_link-list-item {
    margin-right: 0px;
}

.card-goal .status-block {
    margin-top: 0;
}

.card-goal .status-block .expand-close {
    color: #666666;
}

.card-row-goal {
    padding-left: 0 !important;
}

.card-row-goal-header {
    padding-left: 1.875rem;
}

.card-row-goal-header .status-block .status-image {
    margin-left: 0.85rem;
    margin-right: 0.5rem;
}

.card-row-goal-header .info__card-percent {
    margin-right: 0.8rem;
}

.goal-header-title {
    font-size: 1.5rem;
}

.goal-title {
    font-size: 14px;
    width: calc(100% - 50px);
    float: right;
    padding-top: 5px;
    line-height: 1.3em;
}

.goal-title.completed {
    color: #fff;
    font-size: 20px;
    padding-top: 0;
}

.goal-title.completed span {
    margin-left: 5px;
    font-weight: 300;
    opacity: .5;
}

.goal-header-label {
    font-size: 1rem;
    margin-right: 6px;
    color: rgba(255, 255, 255, 0.5);
}

.completed .goal-header-label {
    margin-left: 50px;
    font-size: 14px;
}

.completed .goal-header-value {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
}

.goal-header-value {
    font-size: 1rem;
    font-weight: 500;
}

.goals-sidebar {
    margin-top: 120px !important;
}

.goal-flyout .goal-name {
    width: 70%;
}

.goal-flyout .card-color {
    font-size: 1.25rem;
}

.goal-flyout .rangeslider-with-counter, .goal-task-flyout .rangeslider-with-counter {
    width: 70%;
    margin-left: 0px;
    bottom: 2px;
}

@media (min-width: 1500px) {
    .goal-flyout .rangeslider-with-counter, .goal-task-flyout .rangeslider-with-counter {
        width: 74%;
        margin-left: 0px;
        bottom: 2px;
    }
}

.goal-flyout .hierarchy-icon-none {
    color: #ffffff;
    top: 0px;
}



.goal-hierarchy {
    width: 25px;
    float: left;
    margin-top: 2px;
}


.goal-hierarchy.dropit .dropit-submenu {
    left: 0;
    padding: 20px 10px 10px 20px;
    min-width: 310px;
    top: 35px;
}

.goal-hierarchy.dropit .dropit-submenu .pointer {
    left: 7px;
    background: #576a82;
    color: #fff;
}

.goal-hierarchy ul.dropit-submenu li:after {
    content: "";
    display: table;
    clear: both;
}

.goal-hierarchy ul.dropit-submenu li {
    color: #666;
    font-size: 14px;
    white-space: normal;
    margin-bottom: 10px;
}

.goal-hierarchy ul.dropit-submenu li.hierarchy-header {
    background: #576a82;
    margin-left: -20px;
    margin-right: -10px;
    margin-top: -20px;
    padding: 10px;
    font-size: 16px;
    color: #fff;
}

.goal-hierarchy ul.dropit-submenu li:nth-of-type(3) {
    padding-left: 0px;
}

.goal-hierarchy ul.dropit-submenu li:nth-of-type(4) {
    padding-left: 20px;
}

.goal-hierarchy ul.dropit-submenu li .sub-content {
    width: calc(100% - 20px);
    float: right;
}

.goal-hierarchy ul.dropit-submenu li svg {
    height: 16px;
    width: 16px;
}

.goal-hierarchy ul.dropit-submenu li svg path {
    fill: #999;
}

.hierarchy-icon-none {
    font-size: 20px;
    font-weight: 600;
    color: #999999;
    text-align: center;
    width: 60px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

.hierarchy-icon-none span {
    top: calc(50% - 14px);
    position: relative;
}

.hierarchy-icon-none:hover {
    color: #11b5cc;
}

.list-view-card .list-view.goal-hierarchy {
    display: flex;
    width: 56px;
}

.list-view-card .list-view.goal-hierarchy li {
    height: 100%;
}

.list-view-card .list-view.goal-hierarchy a {
    height: 100%;
    padding: 0 16px;
    width: 100%;
}

.list-view-card .list-view.goal-hierarchy svg {
    height: 100%;
    width: 18px;
}

.caret-icon svg g {
    fill: #fff;
}

.caret-icon {
    display: inline-block;
    padding: 0 8px;
}

.hierarchy-icon svg path {
    fill: #fff;
}

.hierarchy-icon:hover svg path {
    fill: #fff;
}

.goal-flyout .no-border-input .form-title {
    height: 32px;
    line-height: 32px;
}

.goal-flyout .card-row.no-border-input input.autocomplete-text:not(.file):not([type="range"]):not(.search) {
    max-width: 180px;
    padding-left: 25px !important;
}

.goal-flyout .svg-search-icon {
    bottom: -9px;
    left: 14px;
}

.goal-flyout div.percent-symbol {
    padding: 0;
    left: -20px;
    top: 9px;
}


.goal-flyout .container.group dt.dropdown-title {
    min-width: 180px;
}

.goal-flyout button.goal-complete {
    width: 7rem !important;
    position: relative;
    top: -14px;
}

.goal-task-flyout button {
    width: 8.7rem;
}

.goal-flyout input.rangecounter, .goal-task-flyout input.rangecounter {
    max-width: 40px;
    font-weight: 400;
    margin-right: 0;
    bottom: 5px;
    font-size: 1rem !important;
    border-bottom: none;
    box-shadow: 0 1px 3px rgba(0,0,0, .25);
}



/*|/\/\/\/\/\/\/\/\/\/\/\/\|
    Create and Empty Cards
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.card-child-create {
    margin-bottom: 10px;
    margin-left: 10px;
    width: calc(100% - 10px);
}

.card-create {
    text-align: center;
    cursor: pointer;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    background: transparent;
}

.card-create.no-hover {
    cursor: default;
}

.card-row-create {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.card-row-create span {
    color: #11b5cc;
    vertical-align: top;
    display: inline-block;
}

.card-row-create div.add-new-icon svg {
    height: 1.5rem;
    width: 1.5rem;
}

.card-row-create:hover div svg path {
    fill: #11b5cc;
}

.card-row-right-link {
    margin-top: -40px;
    padding-right: 30px;
    position: relative;
    z-index: 1;
}

.card-empty {
    border: 1px dashed #aaa;
    height: 104px;
    cursor: pointer;
    margin-bottom: 30px;
    border-collapse: separate;
}

.card-empty.white {
    background-color: #ffffff;
}

.card-empty:hover {
    background-color: #DBF4F8;
}

.card-empty.no-hover {
    cursor: default;
    border: 2px dashed #aaa;
}

.card-empty.no-hover:hover {
    background-color: transparent;
}

.empty-item {
    color: #11b5cc;
    vertical-align: top;
    display: inline-block;
    margin-top: 18px;
    text-transform: uppercase;
}

.empty-item .add-new-icon {
    display: inline-block;
    position: relative;
    top: 4px;
    right: 8px;
}


.card-empty div.add-new-icon svg {
    float: left;
}



.card-empty div.add-new-text {
    display: inline-block;
    position: relative;
}


.card-empty td {
    vertical-align: middle;
    text-align: center;
}

.card-empty td.info {
    color: #666666;
    text-align: left;
    padding: 8px;
    font-size: 0.875rem;
}

.card-empty td.info div {
    min-height: 170px;
}

@media (min-width: 1500px) {
    .card-empty td.info {
        padding: 13px;
    }

    .card-empty td.info div {
        min-height: 160px;
    }
}

.card-empty td.info span {
    font-weight: 500;
    color: #333333;
}

.right-sidebar .card-empty {
    background: #DBF4F8;
    border: 2px dashed #11B5CC;
    border-radius: 3px;
    text-align: left;
    margin: 1.5rem 0 1.75rem;
}

.right-sidebar .card-empty td {
    text-align: left;
}


/*|/\/\/\/\/\/\/\/\/\/\/\/\|
    Objective
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.card-objective-summary .info__card-action:not(.expand-close) {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    border-left: 1px solid #ececec;
    cursor: pointer;
}

.card-objective-summary:not(.card-expanded) .center-card {
    cursor: pointer;
}

.card-objective-summary .info__card-action.no-border {
    border-left: none;
}

.card-objective-summary .info__card-action:not(.expand-close):hover {
    background-color: #DBF4F8;
}

.card-objective-summary .info__card-action:not(.expand-close) svg {
    position: relative;
    margin-left: -4px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
}

.card-objective-summary.expand:not(.card-expanded):hover {
    background-color: #DBF4F8;
}

.card-objective {
    padding-right: 60px;
    z-index: 1;
    -webkit-transition: -webkit-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out;
}

.card-objective.flipped {
    margin-bottom: 1.25rem !important;
    z-index: 10;
}

.card-objective.flipped:not(:first-of-type) {
    margin-top: 1.25rem !important;
    z-index: 10;
}

.card-objective .status-block {
    width: 14rem;
    vertical-align: top;
}

.card-objective .info__card-action {
    cursor: pointer;
}

.card-objective .status-block .info__card-action {
    vertical-align: top;
}

.info__card-action.card-objective {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 60px;
    border-left: 1px solid #ececec;
}

.info__card-action.card-objective:hover {
    background-color: #DBF4F8;
}

.card-objective .due-date {
    margin-bottom: 0.3125rem;
    display: inline-block;
    color: #b0b0b0;
}

.card-objective:not(.flipped) .card-row:hover, .card-gen-flip:hover:not(.flipped) {
    background-color: #DBF4F8;
    cursor: pointer;
}

.card-objective .card-info-header-title {
    max-width: 100%;
}

.card-objective .info__card-action svg {
    position: relative;
    top: calc(50% - 7px);
    left: 10px;
    display: inline-block;
}

.card-objective .objective-sub-count {
    position: absolute;
    top: calc(50% - 9px);
    left: 22px;
}

table.assignments {
    display: inline-block;
    width: 10rem;
    margin-right: .5rem;
}

.card-objective .assignments th {
    text-align: left;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}

.card-objective .assignments td {
    text-align: left;
    font-size: .75rem;
    font-weight: 400;
    white-space: nowrap;
    padding-top: .5rem;
}


/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Settings
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.card-setting, .card-gen-flip {
    z-index: 1;
}

.card-setting.flipped {
    margin-bottom: 1.25rem !important;
}

.card-setting.flipped:not(:first-of-type) {
    margin-top: 1.25rem !important;
}

.card-setting .info__block {
    max-width: 85%;
}

.card-setting .api-text-title {
    display: block;
}

.card-setting .api-text {
    display: block;
    color: #666666;
    font-size: 0.875rem;
    padding: 8px 0px;
}

.card-setting .link-hover:not(:hover) {
    color: #666666;
}

.card-setting .setting-icon {
    display: inline-block;
    margin-right: 14px;
}

.card-setting .setting-icon svg {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
}

.card-setting .setting-icon svg path {
    fill: #11b5cc;
}

.custom-fields .sub-tab-header {
    font-size: 1.1rem;
    margin-right: 20px;
}

.theme-setting {
    height: 230px;
}

.theme-setting .dropzone {
    min-height: 80px;
}

.theme-setting .dz-message {
    margin: 10px 0 0 0 !important;
}

.theme-setting .ppt-theme {
    max-width: 176px;
    display: block;
}

#card-Canvas-Flip-company-cadence dt.dropdown-title label {
    margin-top: -12px;
}

#card-Canvas-Flip-company-cadence .status-block .status-image {
    margin-right: 10px;
}

.info__welcome-email {
    font-size: 0.75rem;
    display: block;
    margin-top: 8px;
}

.info__welcome-email .text-date {
    color: #576a82;
    font-weight: 600;
}


.card-setting.flipped .Grab:not(.show) {
    display: none;
}

.card-setting .label-edit {
    margin-left: 20px;
    font-size: 0.875rem;
    font-weight: 400;
    color: #11b5cc;
}

.card.account-group .multi-select-list {
    overflow-y: scroll;
    height: 300px;
}

.label-item .label-text {
    width: 90%;
    display: inline-block;
}

.label-add {
    margin-left: 10px;
}

.label-delete:hover {
    text-decoration: underline;
}

.label-delete {
    font-size: 14px;
    color: #D73D3D;
}

.label-delete span {
    margin-left: 8px;
}

.label-delete:hover svg path {
    fill: #D73D3D;
}

li.custom-field-multiselect {
    list-style: square;
    margin: 2px 2px 2px 20px;
    font-size: 0.875rem;
    color: #333333;
}

.global-user-search {
    width: 300px;
    top: 2px;
}

.global-sort, .global-view {
    width: 130px;
    margin-right: 10px;
}

.global-sort-direction {
    width: 44px;
    margin-right: 10px;
}

.global-user-total .user-counts {
    position: relative;
    font-size: 1.25rem;
    top: -10px;
}

.global-user-total {
    position: relative;
}

@media (min-width: 1440px) {
    .global-user-total {
        position: absolute;
    }

    .global-user-total .user-counts {
        top: -40px;
    }
}

.instance-title {
    font-size: 0.875rem;
    color: #333333;
    font-weight: 500;
}

.instance-name {
    font-size: 0.875rem;
    color: #666666;
}

.instance-status {
    font-size: 0.75rem;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Card Cap
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.card-cap {
    width: 100%;
    height: 10px;
}

.card-cap-blue {
    background-color: #11b5cc;
    margin-bottom: 0.875rem;
}

.card-cap-blue.edit-mode, .card-edit-fields .card-cap-blue {
    font-size: 18px;
}

.card-cap-grey {
    background-color: #CCCCCC;
    margin-bottom: 0.875rem;
}

.card-cap-green {
    background-color: #11a918;
    margin-bottom: 0.875rem;
}

.card-cap-red {
    background-color: #D73D3D;
    margin-bottom: 0.875rem;
}

.card-cap-yellow {
    background-color: #e2a100;
    margin-bottom: 0.875rem;
}


.card-cap-small {
    height: 5px;
}

.card-cap-blue .cancel-edit svg path, .card-cap-blue .remove-element svg path, .card-cap-red .remove-element svg path {
    fill: #FFFFFF;
    cursor: pointer;
}

.delete.remove-element:hover svg path {
    cursor: pointer;
    fill: #11b5cc;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Card States
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.card.card-neutral .card-info-header {
    background-color: transparent;
    color: #000000;
}

.card.card-neutral .card-info-header .status-image:not(.pie-chart) svg path, .card.card-neutral .card-info-header .status-image:not(.pie-chart) svg line, .card.card-neutral .card-info-header .status-image:not(.pie-chart) svg circle {
    fill: #b0b0b0;
}

.card.card-neutral .card-info-header .status-image:not(.pie-chart) svg .text-context {
    /* color: $color-bad; */
}

.card.card-neutral .card-tabbed_link-list-item {
    border-bottom: none;
    -webkit-transition: background-color 240ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: background-color 240ms cubic-bezier(0.77, 0, 0.175, 1);
}

.card.card-good .card-info-header {
    background-color: transparent;
    color: #000000;
}

.card.card-good .status-image:not(.pie-chart) svg path, .card.card-good .card-info-header .status-image:not(.pie-chart) svg line, .card.card-good .card-info-header .status-image:not(.pie-chart) svg circle {
    fill: #47b14b;
}

.card.card-good .card-info-header .status-image:not(.pie-chart) svg .text-context {
    color: #f64431;
}

.card.card-good .card-tabbed_link-list-item {
    border-bottom: none;
    -webkit-transition: background-color 240ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: background-color 240ms cubic-bezier(0.77, 0, 0.175, 1);
}

.card.card-bad .card-info-header {
    background-color: transparent;
    color: #000000;
}

.card.card-bad .status-image:not(.pie-chart) svg path, .card.card-bad .card-info-header .status-image:not(.pie-chart) svg line, .card.card-bad .card-info-header .status-image:not(.pie-chart) svg circle {
    fill: #f64431;
}

.card.card-bad .goal-due-date {
    color: #f64431;
}

.card.card-bad .card-tabbed_link-list-item {
    border-bottom: none;
    -webkit-transition: background-color 240ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: background-color 240ms cubic-bezier(0.77, 0, 0.175, 1);
}

.card.card-alert .card-info-header {
    background-color: transparent;
    color: #000000;
}

.card.card-alert .status-image:not(.pie-chart) svg path, .card.card-alert .card-info-header .status-image:not(.pie-chart) svg line, .card.card-alert .card-info-header .status-image:not(.pie-chart) svg circle {
    fill: #e2a100;
}


.card-row.card-bad {
    background-color: #f64431;
}

.card-row.card-alert {
    background-color: #e2a100;
}

.card-row.card-good {
    background-color: #47b14b;
}

.card-row.card-neutral {
    background-color: #b0b0b0;
}

.card-row.card-white {
    background-color: #FFFFFF;
}

.card-row.card-plain {
    background-color: #11b5cc;
}

.card-row.normal {
    background-color: #576a82;
}

.card.card-alert .goal-due-date {
    color: #e2a100;
}

.card.card-alert .card-tabbed_link-list-item {
    border-bottom: none;
    -webkit-transition: background-color 240ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: background-color 240ms cubic-bezier(0.77, 0, 0.175, 1);
}

.card-expanded.card-neutral .text-neutral {
    color: #11b5cc;
}

.card-expanded.card-neutral .card-info-header {
    border-bottom: none;
    background-color: #b0b0b0;
    color: #ffffff;
}

.card-expanded.card-neutral .card-info-header .info__card-span {
    color: #ffffff;
}

.card-expanded.card-neutral .card-info-header .info__card-span span {
    color: #ffffff;
}

.card-expanded.card-neutral .card-info-header .goal-due-date {
    color: #ffffff;
}

.card-expanded.card-neutral .card-info-header .expand-close {
    color: #ffffff;
}

.card-expanded.card-neutral .card-info-header .info__card-percent {
    color: #ffffff;
}

.card-expanded.card-neutral .card-info-header .status-image:not(.pie-chart) svg path, .card-expanded.card-neutral .card-info-header .status-image:not(.pie-chart) svg line, .card-expanded.card-neutral .card-info-header .status-image:not(.pie-chart) svg circle {
    fill: #ffffff;
}

.card-expanded.card-neutral .card-info-header .status-image:not(.pie-chart) svg .text-context {
    /* color: $color-bad; */
}

.card-expanded.card-neutral .card-tabbed_link-list-item, .card-color.card-neutral .card-tabbed_link-list-item {
    border-bottom: none;
    background-color: #a3a3a3;
    color: #ffffff;
}

.card-expanded.card-neutral .card-tabbed_link-list-item a, .card-color.card-neutral .card-tabbed_link-list-item a {
    color: #ffffff;
}

.card-expanded.card-neutral .card-tabbed_link-list-item:hover, .card-color.card-neutral .card-tabbed_link-list-item:hover {
    background-color: #8a8a8a;
}

.card-expanded.card-neutral .card-tabbed_link-list-item.active, .card-color.card-neutral .card-tabbed_link-list-item.active {
    font-weight: 500;
    color: #b0b0b0;
    background-color: #ffffff;
}

.card-expanded.card-neutral .card-tabbed_link-list-item.active a, .card-color.card-neutral .card-tabbed_link-list-item.active a {
    color: #b0b0b0;
}

.card-expanded.card-neutral .card-tabbed_link-list-item.active:hover, .card-color.card-neutral .card-tabbed_link-list-item.active:hover {
    background-color: #ffffff;
}

.card-expanded.card-good .text-good, .card-color.card-good {
    color: #ffffff;
}

.card-expanded.card-neutral .text-good, .card-color.card-neutral {
    color: #ffffff;
}

.card-expanded.card-good .card-info-header {
    border-bottom: none;
    background-color: #47b14b;
    color: #ffffff;
}

.card-expanded.card-good .card-info-header .info__card-span {
    color: #ffffff;
}

.card-expanded.card-good .card-info-header .info__card-span span {
    color: #ffffff;
}

.card-expanded.card-good .card-info-header .goal-due-date {
    color: #ffffff;
}

.card-expanded.card-good .card-info-header .expand-close {
    color: #ffffff;
}

.card-expanded.card-good .card-info-header .info__card-percent {
    color: #ffffff;
}

.card-expanded.card-good .card-info-header .status-image:not(.pie-chart) svg path, .card-expanded.card-good .card-info-header .status-image:not(.pie-chart) svg line, .card-expanded.card-good .card-info-header .status-image:not(.pie-chart) svg circle {
    fill: #ffffff;
}

.card-expanded.card-good .card-info-header .status-image:not(.pie-chart) svg .text-context {
    color: #f64431;
}

.card-expanded.card-good .card-tabbed_link-list-item, .card-color.card-good .card-tabbed_link-list-item {
    border-bottom: none;
    background-color: #409f43;
    color: #ffffff;
}

.card-expanded.card-good .card-tabbed_link-list-item a, .card-color.card-good .card-tabbed_link-list-item a {
    color: #ffffff;
}

.card-expanded.card-good .card-tabbed_link-list-item:hover, .card-color.card-good .card-tabbed_link-list-item:hover {
    background-color: #317a34;
}

.card-expanded.card-good .card-tabbed_link-list-item.active, .card-color.card-good .card-tabbed_link-list-item.active {
    font-weight: 500;
    color: #47b14b;
    background-color: #ffffff;
}

.card-expanded.card-good .card-tabbed_link-list-item.active a, .card-color.card-good .card-tabbed_link-list-item.active a {
    color: #47b14b;
}

.card-expanded.card-good .card-tabbed_link-list-item.active:hover, .card-color.card-good .card-tabbed_link-list-item.active:hover {
    background-color: #ffffff;
}

.card-expanded.card-bad .text-bad, .card-color.card-bad {
    color: #ffffff;
}

.card-expanded.card-bad .card-info-header {
    border-bottom: none;
    background-color: #f64431;
    color: #ffffff;
}

.card-expanded.card-bad .card-info-header .info__card-span {
    color: #ffffff;
}

.card-expanded.card-bad .card-info-header .info__card-span span {
    color: #ffffff;
}

.card-expanded.card-bad .card-info-header .goal-due-date {
    color: #ffffff;
}

.card-expanded.card-bad .card-info-header .expand-close {
    color: #ffffff;
}

.card-expanded.card-bad .card-info-header .info__card-percent {
    color: #ffffff;
}

.card-expanded.card-bad .card-info-header .status-image:not(.pie-chart) svg path, .card-expanded.card-bad .card-info-header .status-image:not(.pie-chart) svg line, .card-expanded.card-bad .card-info-header .status-image:not(.pie-chart) svg circle {
    fill: #ffffff;
}

.card-expanded.card-bad .card-tabbed_link-list-item, .card-color.card-bad .card-tabbed_link-list-item {
    border-bottom: none;
    background-color: #ea200a;
    color: #ffffff;
}

.card-expanded.card-bad .card-tabbed_link-list-item a, .card-color.card-bad .card-tabbed_link-list-item a {
    color: #ffffff;
}

.card-expanded.card-bad .card-tabbed_link-list-item:hover, .card-color.card-bad .card-tabbed_link-list-item:hover {
    background-color: #d11c09;
}

.card-expanded.card-bad .card-tabbed_link-list-item.active, .card-color.card-bad .card-tabbed_link-list-item.active {
    font-weight: 500;
    color: #f64431;
    background-color: #ffffff;
}

.card-expanded.card-bad .card-tabbed_link-list-item.active a, .card-color.card-bad .card-tabbed_link-list-item.active a {
    color: #f64431;
}

.card-expanded.card-bad .card-tabbed_link-list-item.active:hover, .card-color.card-bad .card-tabbed_link-list-item.active:hover {
    background-color: #ffffff;
}

.card-expanded.card-alert .text-alert, .card-color.card-alert {
    color: #ffffff;
}

.card-expanded.card-alert .card-info-header {
    border-bottom: none;
    background-color: #e2a100;
    color: #ffffff;
}

.card-expanded.card-alert .card-info-header .info__card-span {
    color: #ffffff;
}

.card-expanded.card-alert .card-info-header .info__card-span span {
    color: #ffffff;
}

.card-expanded.card-alert .card-info-header .goal-due-date {
    color: #ffffff;
}

.card-expanded.card-alert .card-info-header .expand-close {
    color: #ffffff;
}

.card-expanded.card-alert .card-info-header .info__card-percent {
    color: #ffffff;
}

.card-expanded.card-alert .card-info-header .status-image:not(.pie-chart) svg path, .card-expanded.card-alert .card-info-header .status-image:not(.pie-chart) svg line, .card-expanded.card-alert .card-info-header .status-image:not(.pie-chart) svg circle {
    fill: #ffffff;
}

.card-expanded.card-alert .card-tabbed_link-list-item, .card-color.card-alert .card-tabbed_link-list-item {
    border-bottom: none;
    background-color: #c98f00;
    color: #ffffff;
}

.card-expanded.card-alert .card-tabbed_link-list-item a, .card-color.card-alert .card-tabbed_link-list-item a {
    color: #ffffff;
}

.card-expanded.card-alert .card-tabbed_link-list-item:hover, .card-color.card-alert .card-tabbed_link-list-item:hover {
    background-color: #af7d00;
}

.card-expanded.card-alert .card-tabbed_link-list-item.active, .card-color.card-alert .card-tabbed_link-list-item.active {
    font-weight: 500;
    color: #e2a100;
    background-color: #ffffff;
}

.card-expanded.card-alert .card-tabbed_link-list-item.active a, .card-color.card-alert .card-tabbed_link-list-item.active a {
    color: #e2a100;
}

.card-expanded.card-alert .card-tabbed_link-list-item.active:hover, .card-color.card-alert .card-tabbed_link-list-item.active:hover {
    background-color: #ffffff;
}

.card-expanded.card-good .text-good, .card-color.card-good {
    color: #ffffff;
}

.card-expanded.card-plain .card-info-header {
    border-bottom: none;
    background-color: #6271A4;
    color: #ffffff;
}

.card-expanded.card-plain .card-info-header .info__card-span {
    color: #ffffff;
}

.card-expanded.card-plain .card-info-header .info__card-span span {
    color: #ffffff;
}

.card-expanded.card-plain .card-info-header .goal-due-date {
    color: #ffffff;
}

.card-expanded.card-plain .card-info-header .expand-close {
    color: #ffffff;
}

.card-expanded.card-plain .card-info-header .info__card-percent {
    color: #ffffff;
}

.card-expanded.card-plain .card-info-header .status-image:not(.pie-chart) svg path, .card-expanded.card-plain .card-info-header .status-image:not(.pie-chart) svg line, .card-expanded.card-plain .card-info-header .status-image:not(.pie-chart) svg circle {
    fill: #ffffff;
}

.card-expanded.card-plain .card-info-header .status-image:not(.pie-chart) svg .text-context {
    color: #f64431;
}

.card-expanded.card-plain, .card-color.card-plain {
    color: #ffffff;
}

.card-color.card-plain .flyout-body {
    color: #000;
}

.card-expanded.card-plain .card-tabbed_link-list-item, .card-color.card-plain .card-tabbed_link-list-item {
    border-bottom: 4px solid rgba(0, 0, 0, 0.15);
    background-color: #fff;
    color: #b0b0b0;
    font-weight: normal;
}

.card-expanded.card-plain .card-tabbed_link-list-item a, .card-color.card-plain .card-tabbed_link-list-item a {
    color: #ffffff;
}

.card-expanded.card-plain .card-tabbed_link-list-item:hover, .card-color.card-plain .card-tabbed_link-list-item:hover {
    background-color: rgba(17, 181, 204, 0.15);
}

.card-expanded.card-plain .card-tabbed_link-list-item.active, .card-color.card-plain .card-tabbed_link-list-item.active {
    font-weight: 500;
    color: #11b5cc;
    background-color: #ffffff;
}

.card-expanded.card-plain .card-tabbed_link-list-item.active a, .card-color.card-plain .card-tabbed_link-list-item.active a {
    color: #6271A4;
}

.card-expanded.card-plain .card-tabbed_link-list-item.active:hover, .card-color.card-plain .card-tabbed_link-list-item.active:hover {
    background-color: #ffffff;
}

.card-background .card-tabbed_link-list-item {
    color: #fff;
}


.card-background .card-tabbed_link-list-item, .card-background .card-tabbed_link-list-item.active, .card-background .card-tabbed_link-list-item.active:hover {
    background: #11b5cc;
    border-bottom-color: #11b5cc;
    font-size: 1.25rem;
    font-weight: 400;
}

.card-background .card-tabbed_link-list-item:hover {
    background-color: #37C0D3;
}


.right-sidebar .card-tabbed_tab-content-item .card-row.no-border-input:first-of-type {
    margin-top: 20px;
}

.goal-flyout .card-tabbed_tab-content-item .card-row.no-border-input:first-of-type {
    margin-top: 10px;
}

.card-row.status-complete {
    box-shadow: inset 5px 0 rgba(118, 191, 121, 0.5);
}

.card-row.status-upcoming {
    box-shadow: inset 5px 0 rgba(187, 187, 187, 0.5);
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Card: Flip
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.card-editable {
    -webkit-perspective: 100px;
    perspective: 100px;
    position: relative;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: -webkit-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out;
}

.card-editable .front {
    z-index: 10;
    opacity: 1;
    position: absolute;
    width: 100%;
    -webkit-transition: opacity 0ms 250ms ease-in-out;
    transition: opacity 0ms 250ms ease-in-out;
}

.card-editable .back {
    z-index: 5;
    opacity: 0;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0ms 250ms ease-in-out;
    transition: opacity 0ms 250ms ease-in-out;
}

.card-editable.flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 2;
}

.card-editable.flipped .front {
    -webkit-transition: opacity 0ms 250ms ease-in-out;
    transition: opacity 0ms 250ms ease-in-out;
    z-index: 5;
    opacity: 0;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.card-editable.flipped .back {
    -webkit-transition: opacity 0ms 250ms ease-in-out;
    transition: opacity 0ms 250ms ease-in-out;
    z-index: 10;
    opacity: 1;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    position: absolute;
    width: 100%;
    visibility: visible;
}

.flip-action {
    cursor: pointer;
}



/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Team Card
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.card-team {
    margin-bottom: 0;
}

.card-team .info__card-title {
    margin-top: -4px;
    margin-bottom: 0;
    line-height: 1rem;
}

.card-team p.info__card-span {
    margin-top: 2px;
}

.card-team .profile-uppergraph {
    width: 100%;
}

.card-team-member .total-text .high-chart {
    display: block;
    padding-top: 6px;
}

.card-team .account-label, .card-team-member .account-label {
    margin-right: 8px;
    margin-top: 6px;
    vertical-align: top;
    display: inline-block;
}

.card-team .swot-oldest, .card-team .voc-oldest {
    color: #666666;
    display: inline-block;
    margin-left: 4px;
    font-size: 0.875rem;
}

.row-team .info__card-title {
    font-size: 1rem;
    font-weight: 500;
}

.row-team .swot-oldest, .row-team .voc-oldest {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
}

.summary-table th {
    font-size: 0.875rem;
    text-align: left;
    color: #323f4f;
    font-weight: bold;
    padding: 4px 0px;
    margin-right: 4px;
}

.summary-table td {
    font-size: 0.875rem;
    text-align: left;
    padding: 2px 4px;
    margin-right: 4px;
}

.summary-table tr {
    border-bottom: 1px solid #DDD;
}

.summary-table tr:nth-child(2n) td {
    background-color: #f7f7f7;
}

.notification-new .summary-table tr:nth-child(2n) td {
    background-color: transparent;
}

.compare-actions {
    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 14px;
}

.row-team .account-list-score-item {
    top: 0;
}

.team-name {
    font-size: 1.25rem;
}



.value-text {
    display: block;
    width: 100%;
    font-size: 1rem;
}

.value-text svg {
    width: 8px;
    height: 8px;
    margin-right: 2px;
    position: relative;
    top: -1px;
}

.text-bad svg path {
    fill: #f64431;
}

.text-good svg path {
    fill: #47b14b;
}

.value-text > span {
    display: inline-block;
    margin-left: 4px;
    padding-top: 2px;
    font-size: 12px;
    vertical-align: top;
    width: 35px;
    white-space: nowrap;
}

.value-health-score > span {
    padding-top: 7px;
}

.row-team table.blue-header thead tr th:not(:first-of-type) {
    white-space: normal;
    padding-right: 4px;
    padding-left: 4px;
}

.row-team table.blue-header thead tr th {
    font-size: 0.875rem;
}

.person-account-header {
    margin: 0px 8px 0px 100px;
}

.person-account-header > .third-section {
    width: calc(33% - 40px);
    display: inline-block;
    margin: 0px 20px;
}

.person-account-header .header-text {
    color: #999999;
    display: block;
    padding-bottom: 4px;
    font-size: 14px;
}

.person-account-header .header-value {
    display: block;
}

.person-account-header .health-score {
    position: absolute;
    right: 0px;
    top: 0px;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Overview Row
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.card-row-overview .title-secondary {
    margin-bottom: -4px;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Profile
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.profile-header {
    margin-bottom: 0.5rem;
}

.profile-header__image {
    text-align: center;
    cursor: pointer;
    height: 6rem;
    width: 6rem;
}

@media (min-width: 640px) {
    .profile-header__image {
        text-align: left;
        display: inline-block;
        float: left;
        margin-right: 1.25rem;
    }
}

@media (min-width: 1060px) {
    .profile-header__image {
        margin-right: 1.25rem;
    }
}

@media (min-width: 1230px) {
    .profile-header__image {
        margin-right: 1.875rem;
    }
}

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

.profile-header__info h2 {
    font-weight: 300;
    font-size: 1.5em;
    margin-bottom: 0.5rem;
    text-align: center;
}

@media (min-width: 640px) {
    .profile-header__info h2 {
        text-align: left;
    }
}

.profile-header__info h3 {
    color: rgba(0, 0, 0, 0.54);
    margin-bottom: 0.625rem;
    text-align: center;
}

@media (min-width: 640px) {
    .profile-header__info h3 {
        text-align: left;
    }
}

.profile-header__info-status {
    padding: 10px 14px;
    color: #ffffff;
    font-size: 0.875rem;
    background-color: #11b5cc;
    font-weight: 300;
}




/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Notification Box
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.notification-box {
    background-color: #d73d3d;
    border-radius: 2px;
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.15), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.25);
    font-size: 13px;
    color: #FFFFFF;
    line-height: 18px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
    padding: 4px 10px;
    position: relative;
    margin: 0 10px;
    top: -2px;
}

.notification-box_left-arrow:before {
    content: "";
    position: absolute;
    left: -3px;
    top: 9px;
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.15), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.25);
    height: 0;
    width: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-right: 3px solid #d73d3d;
}

.notification-box_right-arrow:before {
    content: "";
    position: absolute;
    right: -2px;
    top: 10px;
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.15), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.25);
    height: 0;
    width: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 3px solid #d73d3d;
}

.notification-dot:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 6px;
    width: 6px;
    background-color: #d73d3d;
    border-radius: 10px;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Notification Bar
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.notification-bar {
    display: block;
    position: relative;
    width: 100%;
    min-height: 40px;
    padding: 0.46875rem 0.9375rem;
    background-color: #11b5cc;
}

@media (max-width: 640px) {
    .notification-bar {
        padding: 0.625rem 1.25rem;
    }
}

@media (max-width: 1060px) {
    .notification-bar {
        padding: 0.625rem 1.25rem;
    }
}

@media (max-width: 1230px) {
    .notification-bar {
        padding: 0.625rem 1.25rem;
    }
}

.notification-bar:hover {
    cursor: pointer;
}

.notification-bar .notification-bar-content {
    color: #ffffff;
    line-height: 1.5;
    width: 100%;
    padding-right: 52px;
    display: block;
}

.notification-bar .notification-close {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 6px;
    right: 0;
}

.notification-bar .notification-close img {
    position: relative;
    height: 12px;
    width: 12px;
    text-align: center;
    top: 7px;
    left: 7px;
}

.notification-bar-good {
    background-color: #47b14b;
}

.notification-bar-alert {
    background-color: #e2a100;
}

.notification-bar-bad {
    background-color: #f64431;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Status Block
|/\/\/\/\/\/\/\/\/\/\/\/\|*/


.status-block {
    float: right;
}

.edit-text {
    position: absolute;
    right: 0;
    top: 0;
}




.status-block .status-image, .child-card-list .status-image {
    display: inline-block;
    vertical-align: middle;
}



.status-image.blind {
    margin-right: -8px;
    margin-left: -1px;
}

.status-block h2 {
    display: inline-block;
    margin-bottom: 0;
}

@media screen and (min-width: 640px) {
    .status-block h2 {
        margin-right: 1.25rem;
    }
}

@media screen and (min-width: 1230px) {
    .status-block h2 {
        margin-right: 1.25rem;
    }
}

.status-block span {
    display: inline-block;
    vertical-align: middle;
}

.status-block .vertical-menu-icon:not(.np) {
    padding: 0 1.25rem 0 0;
}

.vertical-container {
    position: absolute;
    top: 50%;
    margin-top: -13px;
    right: 35px;
    width: 11px;
}

.status-block .card-drop-down {
    list-style: none;
}

.card-drop-down .dropdownmenu-listitem:hover, .card-drop-down .dropdownmenu-listitem:hover svg path {
    color: #0d8b9d;
    cursor: pointer;
    fill: #11b5cc;
}

.card-drop-down svg {
    width: 13px;
    height: 13px;
}

.relationship-icon svg {
    width: 20px;
    height: 20px;
}

.gray-icon svg path {
    fill: #b0b0b0 !important;
}

.gray-icon svg g, .gray-icon svg path {
    fill: #b0b0b0 !important;
}

.dropdown-icon {
    display: inline-block;
    padding-right: 8px;
    vertical-align: top;
}


.dropdown-icon svg {
    width: 16px;
    max-height: 16px;
}

.contact-card-list .action-block {
    border-left: 1px solid #ececec;
}

.contact-dropdown-account {
    margin-left: 30px;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
    List Summary
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.card-summary .summary-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin: 2px;
}

.card-summary .summary-icon svg {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
}

.card-summary .summary-icon svg path {
    fill: #999999;
}

.card-summary .summary-title {
    color: #333333;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0px 0 4px 6px;
}

.card-summary .opp-sum-title {
    color: #666666;
    font-size: 0.75rem;
    font-weight: 500;
}

.card-summary .opp-sum-value {
    color: #333333;
    font-size: 1.25rem;
}

.card-summary .opp-sum-num {
    font-size: 0.75rem;
    display: inline-block;
    margin-right: 4px;
}

.card-summary .opp-sum-num.red {
    color: #f64431;
}

.card-summary .opp-sum-num.neutral {
    color: #999;
}

.card-summary .opp-sum-num.green {
    color: #47b14b;
}

.card-summary .opp-sum-vs {
    color: #333333;
    font-size: 0.75rem;
    display: inline-block;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Direct Reports
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.card-direct-report .status-block,
.card-approval .status-block {
    margin-top: 16px;
}

.card-direct-report .info__block .info__card-span,
.card-approval .info__block .info__card-span {
    line-height: 1.25;
}

.card-approval .info__block {
    max-width: 70%;
}

table tr td {
    vertical-align: middle;
}

.account-detail {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}

.account-detail .account-detail {
    max-width: 280px;
}

.account-detail .account-title {
    font-size: 1.25rem;
    color: #333333;
    font-weight: 500;
}

.account-detail .account-owner {
    color: #666666;
}


.account-detail .account-list-score-item {
    top: 4px;
}

li.account-assign {
    list-style: square;
    margin: 2px 2px 2px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #333333;
}

.inline-chart-report.chart-40 {
    width: 45%;
}

.inline-chart-report.chart-60 {
    width: 55%;
}


.portfolio-action-plan .title-text {
    font-size: 1.2em;
    color: #333333;
    font-weight: 500;
    margin-bottom: 8px;
}

.portfolio-action-plan .title-item-text {
    color: #666666;
    font-weight: 500;
    width: 25%;
    display: inline-block;
}


.portfolio-action-plan .item-value {
    font-size: 1.6em;
    color: #333333;
    font-weight: 400;
    width: 25%;
    display: inline-block;
    vertical-align: top;
}

.portfolio-action-plan .account-owner span {
    text-transform: none;
    display: inline-block;
    position: relative;
    top: -4px;
    color: #333333;
}


.goal-headers span {
    font-size: 0.75em;
    color: #999999;
    text-decoration: underline;
}

.goal-headers .goal-name {
    color: #999999;
    font-weight: 500;
    width: 55%;
    display: inline-block;
    max-width: 55%;
}

.goal-headers .goal-duedate {
    font-weight: 500;
    width: 15%;
    display: inline-block;
}

.goal-headers .goal-owner {
    font-weight: 500;
    width: 15%;
    display: inline-block;
}

.goal-headers .goal-progress {
    font-weight: 500;
    width: 15%;
    display: inline-block;
    text-align: right;
}

.contract-headers .contract-header {
    padding: 10px 0px 6px 0px;
    font-weight: 500;
    font-size: 1.25em;
    text-transform: uppercase;
    border-bottom: 1px solid #999;
}

.contract-headers .contract-name {
    color: #11b5cc;
    padding-top: 10px;
    font-weight: 500;
    width: 60%;
    display: inline-block;
    max-width: 60%;
}

.contract-headers .startdate {
    color: #11b5cc;
    font-weight: 500;
    width: 17%;
    display: inline-block;
    max-width: 17%;
}

.contract-headers .enddate {
    color: #11b5cc;
    font-weight: 500;
    width: 12%;
    display: inline-block;
    max-width: 12%;
}

.contract-headers .value {
    color: #11b5cc;
    font-weight: 500;
    width: 11%;
    display: inline-block;
    max-width: 11%;
    text-align: right;
}

.contract-headers .total-value {
    float: right;
    text-transform: none;
}


.contract-headers .total-value.estimated {
    margin-right: 24px;
}

.contract-headers .total-value .total-label {
    margin-right: 8px;
}

.contract-container {
    padding: 16px 0px;
    border-bottom: 1px solid #DDDDDD;
}

.contract-container .contract-name {
    font-weight: 500;
    width: 60%;
    display: inline-block;
    max-width: 60%;
}

.contract-container .startdate {
    width: 17%;
    display: inline-block;
    max-width: 17%;
    padding-right: 16px
}

.contract-container .enddate {
    width: 12%;
    display: inline-block;
    max-width: 12%;
}

.contract-container .value {
    width: 11%;
    display: inline-block;
    max-width: 11%;
    text-align: right;
}

.contract-container .description {
    color: #666666;
    width: 100%;
    display: inline-block;
    max-width: 100%;
}

.contract-container .products {
    color: #666666;
    width: 100%;
    display: inline-block;
    max-width: 50%;
}

/**************************************
    Products
***************************************/

.product-row .product-name {
    font-size: 0.875rem;
    color: #333333;
    padding-right: 8px;
    padding-bottom: 8px;
    vertical-align: top;
}

.product-row .product-dist {
    font-size: 0.8rem;
    color: #333333;
    padding-left: 8px;
    padding-bottom: 8px;
    text-align: right;
    vertical-align: top;
}


.product-row div:not(.list-remainder) {
    display: inline-block;
}

.product-row .product-graph-container {
    height: 14px;
    width: calc(100% - 46px);
    margin-right: 6px;
    top: 1px;
    position: relative;
    float: left;
}

.product-row .product-graph-container .count-visual {
    height: 14px;
    width: 100%;
    float: left;
}

.product-row .count-visual-container span {
    position: absolute;
    right: 0;
    width: 40px;
    top: 0;
    text-align: left;
}

.detail-view .account-name-spacer {
    min-width: 200px;
}

.detail-view .account-name {
    font-size: 0.875rem;
    min-width: 200px;
    padding: 8px;
    max-width: 200px;
    border-right: 1px solid #666666;
    border-bottom: 1px solid #dddddd;
    background-color: #fff;
    background-clip: padding-box;
}

.detail-view .product-name {
    font-size: 0.875rem;
    max-width: 60px;
    min-width: 60px;
    border-right: 1px solid #666666;
    border-bottom: 1px solid #666666;
    padding: 8px 0;
}

.detail-view .product-header {
    background-color: #fff;
}

.detail-view .product-header-outer {
    display: table;
}

.detail-view .product-header-inner {
    padding: 50% 0;
    height: 0;
}

.detail-view .product-name span {
    transform-origin: top left;
    /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
    transform: rotate(-90deg) translate(-100%);
    /* transform: rotate(90deg) translate(0, -100%); */
    display: block;
    margin-top: -50%;
    padding-top: 8px;
    white-space: nowrap;
    max-width: 400px;
    overflow: hidden;
    font-weight: 500;
    color: #333333;
}

.detail-view .product-item:not(.opp-included) {
    width: 60px !important;
    max-width: 60px;
    height: 60px;
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #666666;
    border-right: 1px solid #666666;
}

.detail-view .product-item.opp-included {
    width: 60px !important;
    max-width: 60px;
    height: 60px;
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #666666;
    border-right: 1px solid #666666;
}

.detail-view .product-item .product-potential {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
}

.detail-view .product-item svg {
    width: 18px;
    height: 18px;
    display: inline-block;
}

.detail-view .product-item span path {
    fill: #D73D3D;
}

.detail-view .product-item span.has-product path {
    fill: #47B14B;
}

.assign-product-list {
    height: 460px;
    overflow: hidden;
    overflow-y: scroll;
}

.bulk-product-list {
    height: 460px;
    max-width: 1084px;
    overflow: hidden;
    overflow-y: scroll;
    overflow-x: scroll;
}

.product {
    padding: 4px;
    display: inline-block;
}

.product.check {
    width: 6%;
}

.product.check label {
    top: -14px;
    left: 6px;
}

.product.name {
    width: 54%;
}

.product.code {
    width: 20%;
}

.product.family {
    width: 20%;
}

.product-summary .title-text {
    margin-top: 8px;
    font-size: 0.875rem;
}

.product-summary .sub-item-percent {
    margin-top: 6px;
}

.product-summary .percent-container {
    vertical-align: top;
    font-size: 1.5rem;
    padding-top: 2px;
    margin-left: 4px;
}

.pt-product-header {
    padding-top: 60px;
}

.account-name-header {
    white-space: nowrap;
    text-align: center;
    background-color: #efefef;
    padding: 4px;
    border: 1px solid #333333;
}

.location-name-header {
    white-space: nowrap;
    text-align: center;
    background-color: #efefef;
    padding: 4px 8px;
    border: 1px solid #333333;
    font-size: 0.875rem;
    max-width: 180px;
    min-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-product {
    border: 1px solid #333333;
    vertical-align: top;
    background-color: #f6f6f6;
}

.location-product div {
    padding: 4px;
    text-align: center;
    max-width: 179px;
    min-width: 179px;
    height: 100%;
}

.location-product .no-product {
    font-size: 0.875rem;
    background-color: #f6f6f6;
}

.location-product .has-product {
    font-size: 0.875rem;
    background-color: #47b14b;
}

.location-product .opp-product {
    font-size: 0.875rem;
    background-color: #0d8b9d;
    color: #ffffff;
}

.location-product .product-lost {
    font-size: 0.875rem;
    background-color: #f64431;
}

.card-print .report-section {
    margin: 10px 20px 0px 20px;
    padding: 0;
    font-size: 12px;
}

.report-section .product-graph, .report-section .contact-graph, .product-section .product-graph {
    margin: 8px;
    display: inline-block;
}

.report-section .product-graph svg, .report-section .contact-graph svg, .product-section .product-graph svg {
    width: 100px;
    height: 100px;
}

.product-section {
    padding: 18px 32px;
}

.product-section-header {
    font-size: 0.875em;
    color: #323f4f;
    font-weight: 500;
}

.product-section .dark-color {
    font-size: 0.875em;
    color: #323f4f;
    font-weight: 500;
}

.product-section .mid-color {
    font-size: 0.875em;
    color: #697d96;
    font-weight: 400;
}

.product-section li {
    margin-bottom: 5px;
    font-weight: 400;
}

.product-section .circle, .account-product-list .circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-top: 3px;
}

.product-section .legend .circle {
    width: 14px;
    height: 14px;
    margin-bottom: -2px;
    margin-top: 0;
}

.product-section .circle.red {
    background: red;
}

.product-section .circle.orange {
    background: orange;
}

.product-section .circle.green, .account-product-list .circle.green {
    background: #47B14B;
}

.product-section .circle.blue, .account-product-list .circle.blue {
    background: #048BE5;
}

.product-section .circle.empty-grey, .account-product-list .circle.empty-grey {
    background: #efefef;
}

.opportunity-profile #opportunity-activity-section .activity-circle svg {
    margin-top: 2px;
}

.plan-section-title .title-text {
    font-size: 1.25em;
    display: inline-block;
    margin: 4px 0px 4px 0px;
}

.plan-section-title .report-objective-status-summary {
    margin-top: 2px;
}

.profile-report .objective-name {
    font-size: 1.25em;
    font-weight: 400;
    color: #333333;
}

.profile-report .objective-description {
    font-size: 1em;
    font-weight: 400;
    color: #999999;
}

.risk-title {
    display: block;
    font-size: .875em;
    font-weight: 600;
    color: #666666;
    padding-bottom: 4px;
}

.risk-row {
    margin: 8px 0px 16px 0px;
    border-bottom: 1px solid #DDDDDD;
}

.risk-item {
    display: inline-block;
    font-size: 1em;
    width: 50%;
    vertical-align: top;
    padding-bottom: 8px;
}

.risk-item.description {
    width: 100%;
    font-size: .875em;
    color: #666666;
}

.risk-item .status {
    font-size: 1em;
    padding-right: 6px;
}

.product-bulk-table {
    overflow: auto;
    overflow-x: scroll;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Metrics
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.card.metric {
    height: 100%;
}

.metric.module-action:hover {
    opacity: 0.75;
    background-color: #dddddd;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.32), 0px 3px 3px 0px rgba(0, 0, 0, 0.44);
}

.metric-label-row {
    background-color: #F2F2F2;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 17px 12px 12px 12px;
    text-transform: uppercase;
    min-height: 60px;
}

@media (min-width: 1440px) {

    .metric-label-row {
        min-height: 44px;
    }
}

.metric-label-row .label-text {
    display: inline-block;
    width: calc(100% - 40px);
}

.metric-label-row .metric-icon {
    width: 20px;
    float: right;
}

.metric-label-row .metric-icon svg {
    width: 20px;
    height: 20px;
}

.metric-label-row .metric-icon svg path {
    fill: #000000;
}

.metric-data-row .data-area {
    padding: 16px 4px 12px 12px;
    width: calc(100% - 70px);
    display: inline-block;
    vertical-align: top;
}

.RT .metric-data-row .data-area {
    overflow-wrap: break-word;
}

.metric-data-row .summary-label {
    padding: 8px 10px 2px 10px;
    font-size: 0.875rem;
    color: #666666;
}

.metric-data-row .summary-label .icon-label {
    font-size: 0.875rem;
    color: #666666;
    width: calc(100% - 28px);
}

.metric-data-row .summary-data.action-text, .contact-details-info dd span.action-text {
    color: #11b5cc;
}

.metric-data-row .summary-data.action-text:hover, .contact-details-info dd span.action-text:hover {
    color: #0d8b9d;
}

.metric-data-row .summary-data {
    padding: 0px 12px 8px 10px;
    font-size: 1.25rem;
    color: #333333;
    white-space: nowrap;
}

@media (min-width: 1440px) {
    .metric-data-row .summary-data {
        font-size: 1.5rem;
    }
}

.metric-data-row .opp-pipe {
    padding: 0px 12px 8px 10px;
    font-size: 1.5rem;
    color: #333333;
}

.metric-data-row .opp-pipe {
    padding: 0px 12px 12px 12px;
}

.metric-data-row .summary-data .text-na {
    font-size: 1rem;
}

.metric-data-row .summary-data a {
    font-size: 1rem;
}

.metric-data-row .summary-data.sub {
    font-size: 0.875rem;
    color: #999999;
}

.metric-data-row .summary-data .graph {
    width: calc(100% - 80px);
    display: inline-block;
    padding-left: 0;
}

.metric-data-row .summary-data .high-chart {
    float: right;
    position: relative;
    top: -36px;
    right: -10px;
}

.metric-data-row .opp-stage-label {
    display: inline-block;
    width: 60%;
    font-size: 0.875rem;
    color: #666;
}

.metric-data-row .opp-stage-value {
    display: inline-block;
    width: 40%;
    text-align: right;
    font-size: 0.875rem;
    color: #333;
}

.metric-data-row .summary-label .summary-icon {
    display: inline-block;
    float: right;
    position: relative;
    top: -2px;
    left: 2px;
}


.metric-data-row .summary-label .summary-icon svg {
    width: 24px;
    height: 24px;
}


.metric-data-row .summary-label .summary-icon svg path {
    fill: #666666;
}

/* --------------------------------- 
    Data Tables
*/

.metric-data-info {
    display: inline-block;
    vertical-align: top;
}

.metric-data-info.w-third, .metric-data-graph.w-third {
    width: 33.33%;
}

.metric-data-info.w-2third, .metric-data-graph.w-2third {
    width: 66.66%;
}

.metric-data-label {
    display: block;
    padding: 8px 12px 0px 12px;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #666666;
}

.metric-data-value {
    display: block;
    padding: 0px 12px 8px 12px;
    font-size: 1.25rem;
    font-weight: 500;
}

.metric-data-value:last-of-type {
    padding-bottom: 12px;
}

.metric-data-graph {
    display: inline-block;
}

.card-report .data-area {
    width: 20%;
    display: inline-block;
}


.card-report .data-metric-chart {
    width: 80%;
    display: inline-block;
    margin-top: 8px;
}

.card-report .metric-data-row {
    min-height: 190px;
}

.metric-data-row .high-chart {
    margin-top: 8px;
}

.metric-data-row .data-description {
    margin: 8px 12px;
}


.metric-data-row .data-area .value-text {
    font-size: 1.25rem;
    font-weight: 500;
}

.metric-data-row .data-area .target-text {
    font-size: 0.8125rem;
    color: #757575;
}

.card-box.RT .data-area {
    padding-top: 0;
}

.metric-list-item {
    border-bottom: 1px #dddddd solid;
}

.report-section .metric-list-item {
    padding: 10px;
}

.metric-list-item .metric-name {
    font-size: 1.25em;
    display: inline-block;
    width: 50%;
    border-bottom: none;
}

.metric-list-item .metric-goal-info {
    float: right;
}

.metric-list-item .metric-goal-name {
    display: block;
    font-size: 0.875rem;
    color: #666666;
    margin-left: 30px;
}

.metric-list-item .metric-owner {
    color: #666666;
    font-size: 1em;
}

.metric-list-item .metric-value {
    font-size: 1.25em;
    display: inline-block;
    width: 140px;
    text-align: right;
}

.metric-list-item .metric-value-percent {
    font-size: 1.25em;
    color: #999999;
    display: inline-block;
    margin-left: 12px;
    width: 70px;
}

.metric-list-item .metric-value-graph {
    display: inline-block;
    vertical-align: top;
    margin-left: 4px;
}

.metric-list-item .metric-value-graph svg {
    width: 32px;
    height: 32px;
}

.metric-list-item .svg-metric-icon svg {
    width: 26px;
    height: 26px;
    position: relative;
    top: 6px;
    margin-right: 4px;
}

.block-1:nth-child(n+5) .account-metric-card {
    margin-top: 20px;
}

.account-metric-card .metric-icon {
    width: 20px;
    float: right;
}

.account-metric-card .metric-icon svg, table th .metric-icon svg {
    width: 16px;
    height: 16px;
    top: 2px;
    position: relative;
}



table th .metric-icon {
    display: inline;
}


table th .metric-name {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-metric-card .metric-icon svg path {
    fill: #333;
}

table th .metric-icon svg path {
    fill: #999;
}

table td .metric-icon svg path {
    fill: #666;
}

table td .metric-icon svg {
    width: 18px;
    height: 18px;
}

table td .metric-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.account-metric-card .metric-name {
    color: #333;
}

.account-sub-title {
    font-size: 0.875rem;
    padding-top: 4px;
}

.row.account-metric-detail .page-options-container .arrow svg, .dashboard-actions .arrow svg {
    width: 14px;
    height: 12px;
    top: 4px
}

.row.account-metric-detail .page-options-container .dropit {
    margin-top: 2px;
}

.account-detail-metric-card {
}

.account-detail-metric-card .metric-icon {
    margin-right: 8px;
    margin-left: 8px;
}

.account-detail-metric-card .metric-icon svg {
    width: 16px;
    height: 16px;
    top: 2px;
    position: relative;
}

.account-detail-metric-card .metric-icon svg path {
    fill: #333333;
}

.account-detail-metric-card .metric-name {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333;
}

.account-detail-metric-card .metric-description {
    font-size: 14px;
    padding: 20px 6px 6px 6px;
    font-weight: 400;
    color: #666;
    display: block;
}

.account-detail-metric-card .arrow {
    font-weight: 500;
}

.account-detail-metric-card .arrow svg {
    width: 14px;
    height: 10px;
    margin-right: 6px;
}

.metric-color {
    width: 30px;
    height: 18px;
    display: inline-block;
}

.metric-color-container {
    width: 180px;
    display: inline-block;
}

.metric-color-current {
    width: 4px;
    height: 30px;
    background-color: #000000;
    display: inline-block;
    top: 11px;
    position: absolute;
    right: 18px;
}

.account-profile.card-report .metric-color-current {
    top: -5px;
}


.metric-color-current.current-value {
    top: 42px;
    background-color: #ffffff;
    height: inherit;
    width: 56px;
    text-align: center;
    font-size: 0.875rem;
}

.account-profile.card-report .metric-color-current.current-value {
    top: 28px;
    background-color: transparent;
}

.metric-ryg {
    font-weight: 600;
    padding: 4px 4px 0px 0px;
}

.metric-ryg-item {
    display: inline-block;
    width: calc(14.2857% - 2px);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    margin: 30px 1px 0px 1px;
    padding: 6px;
    color: #fff;
    background-color: #999;
    border-radius: 4px;
}

.account-history .metric-ryg-item {
    margin: 0px 1px 0px 1px;
}

.account-history .img-middle {
    display: inline-block;
}


.account-history .img-timeline {
    height: 40px;
    margin: 0.5em 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-ryg-item.c7 {
    width: calc(12.5% - 2px);
}

.metric-ryg-item.c365 {
    width: calc(7.6923% - 2px);
    font-size: 0.7rem;
}

.metric-ryg-history-label {
    display: block;
}

.color-white {
    background-color: #ffffff;
    color: #333333;
}

.color-gray {
    background-color: #999999;
}

.color0 {
    background-color: #c51111;
}

.color1 {
    background-color: #dc3e1d;
}

.color2 {
    background-color: #fc8600;
}

.color3 {
    background-color: #fcc300;
}

.color4 {
    background-color: #73c129;
}

.color5 {
    background-color: #11a918;
}

.ryg3 .color0 {
    background-color: #c51111;
}

.ryg3 .color1 {
    background-color: #fcc300;
}

.ryg3 .color2 {
    background-color: #11a918;
}


.RT .color0 {
    background-color: #11a918;
}

.RT .color1 {
    background-color: #fcc300;
}

.RT .color2 {
    background-color: #c51111;
}

.RT .color3 {
    background-color: #b0b0b0;
}

.rb .color0 {
    background-color: #bb2626;
}

.rb .color1 {
    background-color: #D73D3D;
}

.rb .color2 {
    background-color: #e69594;
}

.rb .color3 {
    background-color: #92d1fc;
}

.rb .color4 {
    background-color: #3ca8f0;
}

.rb .color5 {
    background-color: #048be5;
}

.metric-ryg.b0 {
    color: #11a918;
}

.metric-ryg.b1 {
    color: #fcc300;
}

.metric-ryg.b2 {
    color: #c51111;
}

.metric-ryg.b3 {
    color: #666666;
}

.neutral div[class*="color"] {
    background: #b0b0b0;
}

.none div[class*="color"] {
    background: none;
}

.none div[class*="color"]:before {
    content: "-";
}

.card-report .n .circle {
    background: #b0b0b0;
}

.metric-color.b0, .left-bar.b0, .metric-range-item.b0, .circle.b0 {
    background-color: #c51111;
}

.ryg3 .left-bar.b0, .ryg3 .circle.b0 {
    background-color: #c51111;
}

.ryg3 .metric-color.b0, .ryg3 .metric-range-item.b0 {
    background-color: #c51111;
}

.rb .metric-color.b0, .rb .left-bar.b0, .rb .metric-range-item.b0, .rb .circle.b0 {
    background-color: #bb2626;
}

.RT .metric-color.b0, .RT .left-bar.b0, .RT .metric-range-item.b0, .RT .circle.b0, .metric-ryg-item.b0 {
    background-color: #11a918;
}

.metric-color.b1, .left-bar.b1, .metric-range-item.b1, .circle.b1 {
    background-color: #dc3e1d;
}

.ryg3 .left-bar.b1, .ryg3 .circle.b1 {
    background-color: #fcc300;
}

.ryg3 .metric-color.b1, .ryg3 .metric-range-item.b1 {
    background-color: #c51111;
}

.rb .metric-color.b1, .rb .left-bar.b1, .rb .metric-range-item.b1, .rb .circle.b1 {
    background-color: #D73D3D;
}

.RT .metric-color.b1, .RT .left-bar.b1, .RT .metric-range-item.b1, .rT .circle.b1, .metric-ryg-item.b1 {
    background-color: #fcc300;
}


.metric-color.b2, .left-bar.b2, .metric-range-item.b2, .circle.b2 {
    background-color: #fc8600;
}

.ryg3 .left-bar.b2, .ryg3 .circle.b2 {
    background-color: #11a918;
}

.ryg3 .metric-color.b2, .ryg3 .metric-range-item.b2 {
    background-color: #fcc300;
}

.rb .metric-color.b2, .rb .left-bar.b2, .rb .metric-range-item.b2, .rb .circle.b2 {
    background-color: #e69594;
}

.RT .metric-color.b2, .RT .left-bar.b2, .RT .metric-range-item.b2, .RT .circle.b2, .metric-ryg-item.b2 {
    background-color: #c51111;
}

.RT .metric-color.b3, .RT .left-bar.b3, .RT .metric-range-item.b3, .RT .circle.b3 {
    background-color: #b0b0b0;
}


.metric-color.b3, .left-bar.b3, .metric-range-item.b3, .circle.b3 {
    background-color: #fcc300;
}

.ryg3 .metric-color.b3, .ryg3 .metric-range-item.b3 {
    background-color: #fcc300;
}

.rb .metric-color.b3, .rb .left-bar.b3, .rb .metric-range-item.b3, .rb .circle.b3 {
    background-color: #92d1fc;
}

.metric-color.b4, .left-bar.b4, .metric-range-item.b4, .circle.b4 {
    background-color: #73c129;
}

.ryg3 .metric-color.b4, .ryg3 .metric-range-item.b4 {
    background-color: #11a918;
}

.rb .metric-color.b4, .rb .left-bar.b4, .rb .metric-range-item.b4, .rb .circle.b4 {
    background-color: #3ca8f0;
}

.metric-color.b5, .left-bar.b5, .metric-range-item.b5, .circle.b5 {
    background-color: #11a918;
}

.ryg3 .metric-color.b5, .ryg3 .metric-range-item.b5 {
    background-color: #11a918;
}

.rb .metric-color.b5, .rb .left-bar.b5, .rb .metric-range-item.b5, .rb .circle.b5 {
    background-color: #048be5;
}

.friend-A {
    color: #47b14b;
}

.friend-A.bg {
    background-color: #47b14b;
}

.friend-B {
    color: #73c129;
}

.friend-B.bg {
    background-color: #73c129;
}

.friend-C {
    color: #999999;
}

.friend-C.bg {
    background-color: #999999;
}

.friend-D {
    color: #D73D3D;
}

.friend-D.bg {
    background-color: #D73D3D;
}

.friend-E {
    color: #c51111;
}

.friend-E.bg {
    background-color: #c51111;
}

.metric-ryg-value {
    font-size: 16px;
    padding: 3px 6px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    height: 30px;
    min-width: 30px;
    display: inline-block;
    position: relative;
    line-height: 24px;
    font-weight: 400;
}

.metric-ryg-value.b0, .circle.ryg.b0 {
    background-color: #11a918;
}

.metric-ryg-value.b1, .circle.ryg.b1 {
    background-color: #fcc300;
}

.metric-ryg-value.b2, .circle.ryg.b2 {
    background-color: #c51111;
}

.metric-ryg-value.b3, .circle.ryg.b3 {
    background-color: #b0b0b0;
}

.metric-ryg-text.c0 {
    color: #11a918;
}

.metric-ryg-text.c1 {
    color: #fcc300;
}

.metric-ryg-text.c2 {
    color: #c51111;
}

.metric-ryg-text.c3 {
    color: #b0b0b0;
}

.card-report .metric-ryg-value {
    opacity: 0.8;
    width: 100%;
}

.account-profile.card-report .metric-ryg-value {
    width: auto;
}


/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Dividers
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.divider {
    width: 0.0625rem;
    height: 100%;
    background-color: #999999;
    position: relative;
    display: inline-block;
}



.divider-float-left {
    float: left;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Header Elements
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.objective-owner {
    padding: .5rem;
    position: relative;
    top: -.5rem;
}

.objective-owner span.info-percent {
    display: inline-block;
    vertical-align: top;
    margin-top: .3rem;
}

.objective-owner span.info-pie {
    display: inline-block;
    vertical-align: top;
    margin-top: .2rem;
}

.objective-owner span.info-action {
    vertical-align: top;
    display: inline-block;
    margin-top: .6rem;
}

.objective-grab {
    width: calc(100% - 10px);
    margin-left: 10px;
}

.center-edit {
    position: relative;
    left: 5px;
    /*bottom: 3px;*/
}

.survey-account-row {
    margin-bottom: 25px;
    margin-top: 10px;
}

.survey-account-row .text-header {
    padding: 11px 0;
}

.survey-account-row .page-navigation__title {
    margin-bottom: 0;
}

.card.survey-account-card.card-expanded {
    margin-top: 0 !important;
}

.objective-header span.info-percent {
    padding: 8px 0;
    display: inline-block;
    vertical-align: top;
}

.app-redirect-helper {
    max-width: 400px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.app-redirect-helper-text {
    color: #FFFFFF;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Accordion
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
a[data-toggle="accordion"] svg {
    fill: #11b5cc;
}

.accordion-bare .accordion-content {
    background-color: #dfdfdf;
    max-height: 40vh;
    overflow-y: scroll;
}

.accordion-default .accordion-content {
    background-color: #FAFAFA;
}

.accordion-activity .accordion-content {
    border-top: 1px solid rgba(176, 176, 176, 0.16);
    background-color: #FAFAFA;
    /* max-height: 200px;
  overflow-y: scroll; */
    /* @extend .pa; */
}

.accordion-activity .accordion-content .activity-row {
    display: block;
    padding: 0.46875rem 0.9375rem;
}

@media (min-width: 640px) {
    .accordion-activity .accordion-content .activity-row {
        padding: 0.625rem 1.25rem;
    }
}

@media (min-width: 1060px) {
    .accordion-activity .accordion-content .activity-row {
        padding: 0.625rem 1.25rem;
    }
}

@media (min-width: 1230px) {
    .accordion-activity .accordion-content .activity-row {
        padding: 0.625rem 1.25rem;
    }
}

.accordion-activity .accordion-content .activity-row:hover {
    cursor: pointer;
    background-color: #EEEEEE;
}

.accordion-activity .accordion-content .activity-row:first-of-type {
    padding-top: 20px;
}

.accordion-activity .accordion-content .activity-row:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

.accordion-activity .accordion-content .activity-image {
    min-width: 20px;
    vertical-align: top;
    margin-right: 0.9375rem;
}

@media (min-width: 640px) {
    .accordion-activity .accordion-content .activity-image {
        margin-right: 1.25rem;
    }
}

@media (min-width: 1060px) {
    .accordion-activity .accordion-content .activity-image {
        margin-right: 1.25rem;
    }
}

@media (min-width: 1230px) {
    .accordion-activity .accordion-content .activity-image {
        margin-right: 1.25rem;
    }
}

.accordion-activity .accordion-content .activity-content {
    display: table;
    width: 100%;
    border-bottom: 1px solid rgba(176, 176, 176, 0.16);
}

.accordion-activity .accordion-content .activity-info {
    display: table-cell;
    width: 100%;
}

.accordion-activity .accordion-content .activity-title {
    font-size: 0.875rem;
    color: #222222;
}

.accordion-activity .accordion-content .activity-date {
    font-size: 0.8125rem;
    color: #B0B0B0;
}

.accordion-activity .accordion-content .activity-detail {
    font-size: 0.875rem;
    color: #666666;
}

.goal-flyout table.activity-feed-simple {
    margin-left: 5px;
    width: 97%;
}


/*|/\/\/\/\/\/\/\/\/\/\/\/\|
History
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.history-list__item .card-history--active {
    display: block;
}

.history-list__item .card-history--active .card-row {
    padding-top: 0.46875rem;
    padding-bottom: 0.46875rem;
}

@media (min-width: 640px) {
    .history-list__item .card-history--active .card-row {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}

@media (min-width: 1060px) {
    .history-list__item .card-history--active .card-row {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}

@media (min-width: 1230px) {
    .history-list__item .card-history--active .card-row {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}

.history-list__item .card-history--active .status-image {
    display: none;
}

.history-list__item .card-history--active .status-block {
    display: none;
}

.history-list__item .card-history--active .info__card-span {
    display: none;
}

.history-list__item .card-history--active .info__card-action {
    display: none;
}

.history-list__item .card-history--active + .history-list > .history-list__item {
    display: block;
}

.history-list__item .card-history--active + .history-list > .history-list__item .status-image {
    display: inline-block;
}

.history-list__item .card-history--active + .history-list > .history-list__item .status-block {
    display: block;
}

.history-list__item .card-history--active + .history-list > .history-list__item .info__card-span {
    display: inline-block;
}

.history-list__item .card-history--active + .history-list > .history-list__item .info__card-action {
    display: block;
}

.history-list__item .card-history--active + .history-list > .history-list__item .card-history--active .status-image {
    display: none;
}

.history-list__item .card-history--active + .history-list > .history-list__item .card-history--active .status-block {
    display: none;
}

.history-list__item .card-history--active + .history-list > .history-list__item .card-history--active .info__card-span {
    display: none;
}

.history-list__item .card-history--active + .history-list > .history-list__item .card-history--active .info__card-action {
    display: none;
}

.history-list__item .history-list__item {
    display: none;
}

.history > .history-list > .history-list__item--active {
    margin-top: 10px;
    margin-bottom: 10px;
}

.history > .history-list > .history-list__item--active .card-history--active {
    padding-right: 0;
}

@media (min-width: 640px) {
    .history > .history-list > .history-list__item--active .card-history--active + .history-list > .history-list__item > .card-history:not(.card-history--active) {
        margin-left: 1.25rem;
        width: 600px;
    }
}

@media (min-width: 1060px) {
    .history > .history-list > .history-list__item--active .card-history--active + .history-list > .history-list__item > .card-history:not(.card-history--active) {
        margin-left: 1.25rem;
        width: 600px;
    }
}

@media (min-width: 1230px) {
    .history > .history-list > .history-list__item--active .card-history--active + .history-list > .history-list__item > .card-history:not(.card-history--active) {
        margin-left: 1.25rem;
        width: 740px;
    }
}

@media (min-width: 1366px) {
    .history > .history-list > .history-list__item--active .card-history--active + .history-list > .history-list__item > .card-history:not(.card-history--active) {
        margin-left: 1.25rem;
        width: 1012px;
    }
}

.history .card-row-history {
    -webkit-transition: none;
    transition: none;
    position: relative;
}

.card-history {
    position: relative;
    margin-bottom: 0;
    padding-right: 40px;
}

.card-history .info__card-action {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px;
    border-left: 1px solid #ececec;
}

.card-history .info__card-action:hover {
    background-color: #DBF4F8;
}

.card-history .info__card-action svg {
    position: relative;
    left: 50%;
    margin-left: -4px;
    top: 50%;
    margin-top: -8px;
}

.card-history .info__card-action svg path {
    fill: #dedede;
}

.card-history .info__block {
    margin-top: 6px;
}

.card-history .status-block {
    margin-top: 12px;
}

.card-history .status-block .info__card-percent {
    margin-right: 0;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Kanban
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.kanban-column-title {
    margin-bottom: 20px;
}

.kanban-title {
    color: #222222;
}

.kanban-owner {
    color: #b0b0b0;
}

.kanban-date {
    color: #b0b0b0;
}

.kanban-detail {
    color: #b0b0b0;
}

.kanban-empty {
    color: #b0b0b0;
    border: 1px dashed #b0b0b0;
    height: 104px;
}

.kanban-empty td {
    text-align: center;
    vertical-align: middle;
}

.card.kanban-list {
    margin-bottom: 0;
}

.card.kanban-list .card-row {
    display: table;
    width: 100%;
    border-collapse: separate;
}

@media (min-width: 640px) {
    .card.kanban-list .kanban-list-title {
        width: 50%;
    }
}

@media (min-width: 1230px) {
    .card.kanban-list .kanban-list-title {
        width: 59%;
    }
}

.card.kanban-list span {
    font-size: 0.8125rem;
    display: table-cell;
    vertical-align: middle;
    border-spacing: 0.46875rem;
}

@media (min-width: 640px) {
    .card.kanban-list span {
        border-spacing: 0.625rem;
    }
}

@media (min-width: 1060px) {
    .card.kanban-list span {
        border-spacing: 0.625rem;
    }
}

@media (min-width: 1230px) {
    .card.kanban-list span {
        border-spacing: 0.625rem;
    }
}

.card.kanban-list.card-good .kanban-list-status svg path {
    fill: #47b14b;
}

.card.kanban-list.card-alert .kanban-list-status svg path {
    fill: #e2a100;
}

.card.kanban-list.card-bad .kanban-list-status svg path {
    fill: #f64431;
}

.opportunity-kanban-fields .edit-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: 2px;
}

.opportunity-kanban-fields .edit-icon svg path {
    fill: #11b5cc !important;
}

.opportunity-kanban-fields:hover .edit-icon svg path {
    fill: #0d8b9d !important;
}

.dropTarget {
    background-color: #ECB87D;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Account List
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.company-account-list .sort-label {
    top: -4px !important;
}

.account-search .input-text {
    margin-bottom: 0 !important;
}

.input-text.lowercase {
    text-transform: lowercase;
}

.card.account-list {
    margin-bottom: 0;
}

.card.account-list .card-row {
    display: table;
    width: 100%;
    border-collapse: separate;
}

.card.account-list .account-list-title {
    width: 40%;
    font-weight: 500;
}



.card.account-list .account-list-owner {
    display: none;
}

@media (min-width: 640px) {
    .card.account-list .account-list-owner {
        display: table-cell;
        width: 16%;
    }
}

@media (min-width: 1230px) {
    .card.account-list .account-list-owner {
        width: 16%;
    }
}

.card.account-list .account-list-value {
    display: none;
}

@media (min-width: 640px) {
    .card.account-list .account-list-value {
        display: table-cell;
        width: 10%;
    }
}

@media (min-width: 1230px) {
    .card.account-list .account-list-value {
        width: 10%;
    }
}

.card.account-list .account-list-renewal {
    display: none;
}

@media (min-width: 640px) {
    .card.account-list .account-list-renewal {
        display: table-cell;
        width: 14%;
    }
}

@media (min-width: 1230px) {
    .card.account-list .account-list-renewal {
        width: 14%;
    }
}

@media (min-width: 640px) {
    .card.account-list .account-list-score {
        width: 8%;
    }
}

@media (min-width: 1230px) {
    .card.account-list .account-list-score {
        width: 8%;
    }
}

.account-list-task {
    width: 100%;
    text-align: center;
    display: block;
}

@media (min-width: 640px) {
    .card.account-list .account-list-task {
        width: 12%;
    }
}

@media (min-width: 1230px) {
    .card.account-list .account-list-task {
        width: 12%;
        text-align: center;
    }
}

.account-list-score {
    position: relative;
    display: block;
}

.account-parent-title svg {
    width: 18px;
    height: 18px;
    margin-right: 4px;
    vertical-align: top;
}

.account-parent-title svg path {
    fill: #999999;
}

.account-score {
    position: relative;
    display: inline-block;
}

.account-overview {
    color: #999;
    padding: 0 20px;
}

.account-list-score-item {
    font-size: 16px;
    padding: 3px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    height: 30px;
    min-width: 30px;
    display: inline-block;
    position: relative;
    line-height: 24px;
    top: -2px;
    font-weight: 400;
}

.dashboard-content .account-list-score-item, .account-list-score-item.small {
    padding: 0;
    top: 0;
    height: 24px;
    width: 24px;
    margin-right: 4px;
    border-radius: 2px;
    font-size: 14px;
    min-width: 24px;
}


.account-title + .account-list-score-item {
    margin-left: 10px;
}

.account-page .account-list-score-item {
    position: absolute;
}

.account-score-change {
    display: inline-block;
    vertical-align: top;
    padding-top: 20px;
    margin-left: 5%;
    width: 110px;
}

span.onboarding {
    position: absolute;
    top: 0px;
}

.account-list-score-item.onboarding {
    background-color: #11b5cc;
}

.account-list-score-item.bad {
    background-color: #f64431;
}

.account-list-score-item.alert {
    background-color: #e2a100;
}

.account-list-score-item.good {
    background-color: #47b14b;
}

.account-list-score-item.max {
    font-size: 14px;
}

.data-table .account-list-score-item.max {
    font-size: 12px;
}

.account-list-task.late {
    font-weight: 600;
    color: #f64431;
    border-spacing: 0;
}

.card.account-list span {
    font-size: 0.8125rem;
    display: table-cell;
    vertical-align: middle;
    border-spacing: 0.46875rem;
}

@media (min-width: 640px) {
    .card.account-list span {
        border-spacing: 0.625rem;
    }
}

@media (min-width: 1060px) {
    .card.account-list span {
        border-spacing: 0.625rem;
    }
}

@media (min-width: 1230px) {
    .card.account-list span {
        border-spacing: 0.625rem;
    }
}

.card.account-list.card-good .account-list-status svg path {
    fill: #47b14b;
}

.card.account-list.card-alert .account-list-status svg path {
    fill: #e2a100;
}

.card.account-list.card-bad .account-list-status svg path {
    fill: #f64431;
}

.card.account-list.header, .account-list-title.header {
    color: #ffffff;
    background-color: #7A7A7A;
    font-weight: 700 !important;
}

.account-list-chevron {
    padding-top: 3px;
}

li.account-select-list {
    list-style: none;
}


/*|/\/\/\/\/\/\/\/\/\/\/\/\|
    Accounts
|/\/\/\/\/\/\/\/\/\/\/\/\|*/



.card.card-account .card-row {
    display: table;
    width: 100%;
    border-collapse: separate;
}

@media (min-width: 640px) {
    .card.card-account .card-row {
        margin-left: 10px;
        margin-bottom: 10px;
    }
}

.card.card-account span {
    vertical-align: middle;
}

.card.card-account.card-good .card-account-status svg path {
    fill: #47b14b;
}

.card.card-account.card-alert .card-account-status svg path {
    fill: #e2a100;
}

.card.card-account.card-bad .card-account-status svg path {
    fill: #f64431;
}

.card-account .info__card-title {
    font-weight: 500;
    margin-bottom: 10px !important;
}

.card-account .card-tabbed_link-list-item {
    border-bottom: none;
}

.iframe-header .open-in-new-icon {
    position: relative;
    top: 3px;
    padding-left: 8px;
}

.iframe-header .open-in-new-icon svg {
    width: 20px;
    height: 20px;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Contracts
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.card-contract .value-text {
    display: inline;
    float: right;
    width: auto;
    font-size: 1.5rem;
    font-weight: 400;
    color: #333333;
}

.card-contract .account-title {
    display: block;
    font-size: 0.875rem;
    color: #666666;
    font-style: italic;
}

.card-contract .text-archived {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
}

.card-contract .date-text {
    font-size: 0.875rem;
    color: #999999;
    display: inline-block;
}

.card-contract .block-3 {
    min-height: 106px;
}



.with-icon.contract svg {
    height: 20px;
    top: 7px;
}

.with-icon.contract svg:hover path {
    fill: #11b5cc;
}


.contract-date {
    min-width: 100px;
}


.contract-edit {
    color: #11b5cc;
}

.contract-edit:hover {
    color: #0d8b9d;
}

.contract-total-value {
    font-size: 2rem;
    padding-top: 8px;
    font-weight: 400;
}

.contract-list-options {
    display: inline-block;
}

.card.top5-list {
    height: 100%;
}

.top5-list .account-logo {
    width: 24px;
    height: 27px;
}

.top5-list .list-details {
    margin-top: -4px;
    margin-left: 8px;
    display: inline-block;
    width: calc(100% - 34px)
}

.top5-list .list-details .opportunity-name, .closed-won-list .opportunity-name {
    display: block;
}

.top5-list .list-details .account-name {
    font-size: 0.875rem;
}

.closed-won-list .account-logo {
    width: 24px;
    height: 27px;
    margin-right: 8px;
}

.closed-won-list .account-name {
    font-size: 0.875rem;
}

.closed-won-list .close-date {
    display: block;
    color: #999999;
    font-size: 0.875rem;
}

.closed-won-list .opp-value {
    text-align: right;
    display: inline-block;
}

.closed-won-list .owner-name {
    font-size: 0.75rem;
    color: #666666;
    display: block;
}

.closed-won-list .product-list {
    font-size: 0.75rem;
    color: #999999;
    display: block;
}

.closed-won-list .product-list span {
    font-weight: 500;
}

.closed-won-list .account-total-heading {
    font-weight: 500;
    font-size: 1.25em;
}

.won-lost-report.show-totals .report-section {
    border-bottom: none;
}

.won-lost-report .report-section.account-total-section {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 80px;
    padding-right: 32px;
    border-bottom: 1px solid #ddd;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Careabouts
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.careabout-report .account-name {
    font-size: 1.1rem;
    margin-top: 2px;
}

.careabout-report .careabout-name {
    display: block;
}

.card-report.careabout-report .account-logo {
    width: 24px;
    height: 27px;
    margin-right: 8px;
}

.card-report.careabout-report .report-section {
    border-bottom: none;
}

.card-report.careabout-report .report-section.account-total-section {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 80px;
    padding-right: 32px;
    border-bottom: 1px solid #ddd;
}

.card-report .card-list.careabout-list {
    margin-left: 25px;
}

.card-report.careabout-report.account .report-section {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: -1px;
}

.card-report.careabout-report.account .title-section {
    margin-top: 18px;
    margin-right: 32px;
    margin-bottom: 5px;
    margin-left: 20px;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Components
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.info__block {
    display: inline-block;
    vertical-align: top;
    max-width: 54%;
}



@media (min-width: 1430px) {
    .info__block {
        max-width: 57%;
    }
}

@media (min-width: 1660px) {
    .info__block {
        max-width: 66.67%;
    }
}

.info__card-title {
    line-height: 1.3rem;
}

.info__card-span {
    color: #B0B0B0;
    line-height: 1;
    margin-right: 1.875rem;
}

.info__card-detail {
    margin-right: 1rem;
    text-transform: uppercase;
}


.info__card-description {
    display: block;
    color: #999;
    font-size: 0.875rem;
    margin-top: 2px;
}


.info__card-percent {
    line-height: 1;
    color: #202020;
    margin-right: 1.2rem;
}

.info__card-action {
    text-transform: uppercase;
}

.info__card-link {
    line-height: 0.875rem;
    font-size: 0.875rem;
    cursor: pointer;
    color: #11b5cc;
}

.info__block-header .info__card-title {
    margin-top: 12px;
    margin-bottom: 20px;
}

.info__header-percent {
    margin-top: 15px;
}

.profile-image:not(.tiny):not(.small):not(.medium) + .info__block .info__card-title {
    margin-top: 20px;
    margin-bottom: 10px;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Overview Card
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.card-overview {
    margin-bottom: 0.625rem;
}

.card-overview .overview__percent {
    vertical-align: top;
    line-height: 1;
    margin-top: 6px;
    display: inline-block;
}

.card-overview .overview__timing {
    color: #757575;
}

.card-overview .overview__detail {
    color: #757575;
}

.card-overview img {
    display: block;
}

.card-overview + p {
    margin-bottom: 1.875rem;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Pie Charts
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.pie-chart {
    display: inline-block;
}

.pie-medium svg {
    width: 28px;
    height: 28px;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Objective Guide
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.objective-guide {
    display: none;
    background-color: #FAFAFA;
    border-bottom: 1px solid rgba(176, 176, 176, 0.16);
}

.objective-guide > li .objective-guide-item {
    font-size: 1rem;
    border-bottom: 1px solid rgba(176, 176, 176, 0.16);
}

.objective-guide > li .objective-guide-item + .objective-guide-list .objective-guide-item {
    border-bottom: none;
    font-size: 0.875rem;
}

.objective-guide > li:last-of-type .objective-guide-item {
    border-bottom: none;
}

.objective-guide-item {
    padding-top: 20px;
    padding-left: 30px;
}

.objective-guide-item h2.context:before {
    content: "";
    position: absolute;
    display: block;
    height: 6px;
    width: 6px;
    background: #11bcff;
    border-radius: 6px;
    top: 7px;
    left: -16px;
}

.objective-guide-item p {
    margin-top: -20px;
    padding-bottom: 20px;
}

.objective-guide-item.active .arrow {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.objective-guide-item:hover {
    background-color: #EEEEEE;
    cursor: pointer;
}

.objective-guide-item + .objective-guide-list .objective-guide-item {
    padding-left: 40px;
}

.objective-guide-item + .objective-guide-list .objective-guide-item + .objective-guide-list .objective-guide-item {
    padding-left: 60px;
}

.objective-guide-list {
    list-style: none;
}

.objective-guide-list li {
    margin-left: 0;
}

.objective-guide-description {
    display: none;
    font-size: 0.875rem;
    color: #666666;
    padding-right: 80px;
}

.objective-guide-title {
    font-size: 1rem;
    position: relative;
    padding-bottom: 20px;
    padding-right: 80px;
}

.objective-guide-title .arrow {
    position: absolute;
    top: 20px;
    margin-top: -20px;
    right: 15px;
    -webkit-transition: -webkit-transform 240ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: transform 240ms cubic-bezier(0.77, 0, 0.175, 1);
}




/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Link
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
a {
    text-decoration: none;
    color: #11b5cc;
}

a:hover {
    color: #0d8b9d;
    -webkit-transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

a:hover svg path {
    fill: #11b5cc;
    -webkit-transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

a.small-text {
    font-size: 0.875rem;
}
/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Link Box
|/\/\/\/\/\/\/\/\/\/\/\/\|*/


.url-box {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 10px;
}

.url-box:after {
    content: "";
    display: table;
    clear: both;
}

.url-box .url-box-content {
    width: 75%;
    position: relative;
    float: left;
}

.url-box .url-box-icon {
    width: 40px;
    float: left;
}

.url-box .url-box-description {
    width: calc(100% - 40px);
    float: right;
}

.url-box .url-box-actions, .url-box .url-box-content {
    padding: 20px;
}

.url-box .url-box-actions {
    width: 25%;
    position: relative;
    float: right;
    opacity: 0;
}

.url-box .url-box-actions .download-doc {
    display: none;
}

.url-box:hover .url-box-actions {
    opacity: 1;
    transition: all 0.5s ease;
}

.url-box:hover .url-box-actions .download-doc {
    display: block;
    position: relative;
    background: #e9e9e9;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    float: right;
    transition: all 0.5s ease;
}

.url-box .url-box-actions .download-doc svg {
    margin: 0 auto;
    width: 20px;
    position: relative;
    display: block;
    height: 20px;
    top: 4px;
}

.url-box .url-box-actions .download-doc svg path {
    fill: #596A83;
}




/*|/\/\/\/\/\/\/\/\/\/\/\/\|
List
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
dl dt {
    display: block;
    margin-right: 0.625rem;
    float: left;
    width: 100%;
    font-size: 0.875em;
    color: #999;
    margin-bottom: 4px;
    line-height: 1em;
}

dt.autocomplete-title {
    float: none;
}


dl dd {
    text-align: left;
    display: block;
    margin-bottom: 20px;
    color: #333;
}

dl dd:last-of-type {
    margin-bottom: 0;
}

dl dd.dd-list {
    margin-bottom: 0;
}

dl dd th {
    color: #666666;
    font-size: 0.875rem;
    text-decoration: underline;
    padding-bottom: 4px;
}

.udf-view {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.udf-view dl {
    width: 50%;
}

.udf-view dl:nth-child(n+1) {
    padding-top: 10px;
}

.udf-view-group {
    width: 100%;
    border-bottom: 1px solid #ddd;
    color: #888;
    font-size: 0.75rem;
    padding: 8px 0px 4px 0;
    font-weight: 600;
}

ul li, ol li {
    margin-left: 20px;
    margin-bottom: 10px;
}

.side-bar_wrap li {
    list-style: none;
    margin-left: 0;
}

.clear-input-field {
    position: absolute;
    top: 6px;
    right: 8px;
    cursor: pointer;
}

.universal-search .clear-input-field {
    top: 3px;
}

.clear-input-field svg {
    width: 10px !important;
    height: 10px !important;
}


.actions-hover {
    position: absolute;
    opacity: 0;
    z-index: 4;
}

.task-card .actions-hover {
    margin-top: -2px;
    margin-left: -4px;
}

.actions-hover:hover, .actions-container-hover:hover .actions-hover {
    display: inline-block;
    background-color: #ffffff;
    opacity: 1;
}

.actions-hover .item-action {
    width: 32px;
    height: 32px;
    margin: 0px 2px;
    display: inline-block
}

.task-card .actions-hover .item-action {
    width: 24px;
    height: 24px;
}

.actions-hover .item-action .circle {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 1px;
    height: 1px;
    opacity: 0;
    transition: all 0.3s ease;
    position: absolute;
    margin-left: 15px;
    margin-top: 15px;
    z-index: 1;
}

.actions-hover .item-action:hover .circle {
    width: 32px;
    height: 32px;
    opacity: 1;
    background-color: #DDDDDD;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 1;
}

.task-card .actions-hover .item-action:hover .circle {
    width: 24px;
    height: 24px;
}

.actions-hover .item-action .icon {
    position: absolute;
    z-index: 4;
}

.actions-hover .item-action .icon svg {
    width: 16px;
    height: 16px;
    margin: 8px;
    z-index: 4;
}

.task-card .actions-hover .item-action .icon svg {
    width: 12px;
    height: 12px;
    margin: 5px 5px 5px 6px;
}

.actions-hover .item-action .icon svg path {
    fill: #333333;
}

.actions-hover .item-action:hover svg path {
    fill: #000000;
}
/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Tasks
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.card.card-task {
    margin-bottom: 0;
}

.card.card-task label {
    margin-bottom: 0;
    padding-top: 0;
    max-width: 72%;
}

.card.card-task input [type=checkbox] + label:before {
    top: 0;
}

.card-content .title-new {
    font-size: 1rem;
    color: #333333;
    font-weight: 500;
    margin-left: 0.625rem;
    padding-top: 10px;
    display: inline-block;
}

.block-task {
    margin-left: -0.625rem !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    width: 100%;
}


.task-wrap {
    position: relative;
    border-bottom: 1px solid #d3d3d3;
}

.task-wrap:last-of-type {
    border-bottom: none;
}

.task-wrap input[type=checkbox]:checked + label {
    color: #B0B0B0;
}

.task-wrap .task-detail {
    display: block;
    margin-top: 0;
    color: #B0B0B0;
    max-width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-wrap .task-edit {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100px;
    opacity: 1;
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(85%, white));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 85%);
    /* Chrome10+,Safari5.1+ */
    /* Opera 11.10+ */
    /* IE10+ */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 85%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
    /* IE6-9 */
}

@media (min-width: 1060px) {
    .task-wrap .task-edit {
        opacity: 0;
    }
}

.task-wrap .task-edit:hover {
    cursor: pointer;
}

.task-wrap .task-edit img {
    position: absolute;
    top: 0;
    right: 0px;
    height: 16px;
    width: 16px;
}

.task-wrap .task-content {
    position: relative;
}

.task-wrap .task-content.task-complete:after {
    content: "";
    position: static;
    top: auto;
    left: auto;
    width: auto;
    border-bottom: none;
}

.task-wrap .task-content:hover .task-edit {
    opacity: 1;
}


.task-name.task-edit:hover {
    color: #11b5cc;
    cursor: pointer;
}

.task-adv-card-row span {
    vertical-align: top;
}

.task-adv-card-row span.task-type svg {
    width: 1.675rem;
    height: 1.675rem;
    fill: #666666;
}

.task-adv-card-row span.task-type svg circle {
    stroke: #666666;
}

.task-complete .task-title {
    text-decoration: line-through;
    color: #b0b0b0;
    display: block;
}

.task-complete .task-account, .task-complete .task-duedate {
    text-decoration: line-through;
    color: #b0b0b0;
}

.task-complete .is-checked.task-checkbox ~ .task-title {
    text-decoration: none;
}

.card-task .task-due-date {
    margin-bottom: 0.2rem;
    font-size: 0.8125rem;
    color: #b0b0b0;
}

.card-task .task-due-date.late {
    color: #f64431;
}

.task-content.task-complete label {
    text-decoration: line-through;
}

.task-date .task-edit {
    top: 1.2em;
}

.task-container {
    padding: 8px 0px 20px 0px;
}

.span-no-tasks {
    height: 1.6rem;
    line-height: 1.6rem;
    vertical-align: middle;
    display: inline-block;
    padding-left: 0.625rem;
}

.span-no-tasks-message {
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: .875rem;
    font-weight: 500;
}

.span-no-tasks-congrats {
    vertical-align: middle;
    height: 1.5rem;
    line-height: 1.5rem;
    display: inline-block;
    font-size: 24px;
    font-weight: 400;
    padding-top: 0;
    color: #4f4c50;
}

.span-no-tasks svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #999999;
    margin-right: .7rem;
}

.span-no-tasks svg g {
    fill: #999999;
}



.kapta-icon {
    margin-left: 20px;
    height: 16px;
    display: inline-block;
}

.kapta-icon svg {
    height: 16px;
    width: auto;
    float: right;
}


span.task-name {
    font-size: 1rem;
}

span.task-account {
    font-size: 14px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 130px;
    line-height: 16px;
    margin-top: 6px;
    margin-right: 20px;
}

p.task-owner {
    font-size: 12px;
}

p.task-description {
    font-size: 0.875rem;
    color: #999;
}

.team-task .task-description {
    padding-right: 5%;
}

span.task-name-ellipse {
    width: 240px;
    line-height: 1.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 10px 0;
}

span.task-name-ellipse:hover {
    height: auto;
    white-space: normal;
}

.task-title {
    width: calc(100% - 30px);
    float: right;
    text-align: left;
    color: #666;
    position: relative;
    top: -1px;
}

.disabled-sub-task {
    background: #f1f1f1;
    opacity: 0.6;
}

.disabled-sub-task .task-title {
    color: #999;
}

.task-checkbox-container {
    width: 30px;
    float: left;
}

.task-checkbox-container.system {
    top: 14px;
    position: relative;
}

.task-checkbox-container .actions-hover {
    top: -7px;
    left: -9px;
}

.task-goal {
    display: block;
    font-size: 0.875rem;
    margin-top: 4px;
}

.task-goal-icon {
    display: inline-block;
    padding-right: 6px;
    position: relative;
    top: 2px;
}

.task-goal-icon svg {
    width: 14px;
    height: 14px;
}

.kapta-icon svg path {
    fill: #999;
}

.task-goal-icon svg path {
    fill: #999;
}

.task-goal.max-content {
    width: max-content;
}

.task-adv-card-row .block-two-thirds {
    width: 60%;
}

.task-adv-card-row .block-third {
    width: 40%;
}

@media (min-width: 1520px) {
    .task-adv-card-row .block-two-thirds {
        width: 66.6%;
    }

    .task-adv-card-row .block-third {
        width: 33.3%;
    }
}



@media (min-width: 640px) {
    span.task-name-ellipse {
        width: 100%;
    }
}


@media (min-width: 640px) {
    span.task-name-ellipse {
        width: 100%;
    }
}

@media (min-width: 1230px) {
    span.task-name-ellipse {
        width: 100%;
    }
}

@media (min-width: 1500px) {
    span.task-name-ellipse {
        width: 100%;
    }
}

span.task-duedate {
    font-size: 14px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-align: right;
    margin-top: 6px;
    margin-right: 20px;
    line-height: 16px;
}

span.suggested-text {
    font-style: italic;
    font-size: .8rem;
}

span.task-duedate.late {
    color: #f64431;
}

span.task-star {
    margin-left: 0.35rem;
}

span.task-star svg {
    width: 1.05rem;
    height: 1.05rem;
    position: relative;
}

span.task-star svg path {
    fill: #e2a100;
}

span.task-clock {
    height: 16px;
}

.task-clock svg {
    width: 1.35rem;
    height: 1.35rem;
}

.task-clock svg path {
    fill: #999;
}

.task-checkbox-container input[type=checkbox] + label {
    position: absolute;
}

.task-checkbox-container input[type=checkbox] + label:before {
    border-color: #000;
}

input[type=checkbox]:checked + label:after, input[type=checkbox]:checked + label:before {
    border-color: #47B14B;
}

.no-click[type=checkbox]:checked + label:after {
    border: none;
}

.no-click[type=checkbox]:checked + label:before {
    border-color: #000;
}

span.task-update-action:hover {
    cursor: pointer;
    color: #11b5cc;
}

span.task-update:hover {
    cursor: pointer;
    color: #11b5cc;
}

.task-update:hover svg path, .task-clock:hover svg g, .task-clock:hover svg path {
    fill: #11b5cc !important;
    cursor: pointer !important;
}


.card-task-create li.account-list {
    color: #666666;
    margin-left: 24px;
    padding: 2px 0px;
    font-size: .875rem;
}

.card-task-create li.account-list:last-of-type {
    list-style: none;
    font-style: italic;
    font-weight: 500;
    color: #666;
}

.card-task-create a.account-select-list {
    position: relative;
    top: 1px;
    margin-left: 6px;
    -webkit-transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
}


.card-task-create a.account-select-list:hover {
    color: #11b5cc !important;
}
/*|/\/\/\/\/\/\/\/\/\/\/\/\|
    Health Breakdown Scores
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.healthBreakdownchart {
    position: relative;
    float: left;
    min-height: 230px;
    width: 30%;
    padding-left: 15px;
}



.healthBarsContainer {
    float: right;
    padding-right: 25px;
    padding-bottom: 20px;
    width: 70%;
}

@media (min-width: 1366px) {
    .healthBarsContainer {
        float: right;
        padding-right: 25px;
        width: 70%;
    }
}

.healthBreakdownContainer {
    width: 100%;
    display: block;
    clear: both;
}

.healthBreakdownContainer.V2 {
    display: flex;
}

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

.healthBreakdownContainer:hover .healthBreakdownMetricBar {
    background: #0d8b9d;
    transition: 0.3s ease all;
}


.healthBreakdownContainer:hover .healthBreakdownScore {
    border-color: #0d8b9d;
    background: #DBF4F8;
    transition: 0.2s ease all;
}

.healthBreakdownContainer:hover .healthBreakdownSpaceBar {
    background: #b3b3b3;
    transition: 0.3s ease all;
}

.healthCombinedLabel {
    min-width: 300px;
    display: inline-block;
}

.healthBreakdownLabel {
    width: 50%;
    float: left;
    color: #666;
    font-weight: 400;
    text-align: right;
    padding-right: 15px;
}

.highcharts-title {
    font-family: 'roboto';
    font-size: 14px;
}

.healthBreakdownBarContainer {
    width: 50%;
    float: right;
    padding-top: 3px;
}

.healthBreakdownBarContainerV2 {
    display: inline-block;
    width: 100%;
    float: right;
    padding-top: 3px;
    padding-right: 45px;
}

@media (min-width: 1430px) {
    .healthBreakdownBarContainer {
        width: 60%;
    }

    .healthBreakdownLabel {
        width: 40%;
    }
}

.healthBreakdownMetricBar {
    width: 100%;
    height: 15px;
    border-radius: 3px;
    transition: 0.3s ease all;
}

.healthBreakdownMetricBar.show-checklist:hover {
    cursor: pointer;
}

.healthBreakdownMetricBar.show-checklist:hover {
    box-shadow: 0 0 0 1.5pt #999;
}

.healthBreakdownSpaceBar {
    position: relative;
    border-radius: 10%;
    float: right;
    height: 2px;
    background-color: #d0d0d0;
}

.healthBreakdownScore {
    position: relative;
    z-index: 999;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    left: calc(100% - 12px);
    background: #FFFFFF;
    top: -10px;
    text-align: center;
    border: solid;
    border-width: 2px;
    border-color: #11B5CC;
}

.healthBreakdownScoreV2 {
    position: relative;
    width: 36px;
    height: 18px;
    float: right;
    left: 45px;
}

.healthScoreTxt2digit {
    position: absolute;
    font-size: 16px;
    line-height: 16px;
    margin-top: -8px;
    top: 50%;
    left: 50%;
    margin-left: -18px;
    width: 36px;
    text-align: center;
}

.healthBreakdownScoreV2 .healthScoreTxt2digit {
    width: 100%;
    text-align: right;
}

.healthScoreTxt3digit {
    position: absolute;
    font-size: 14px;
    line-height: 14px;
    margin-top: -7px;
    top: 50%;
    left: 50%;
    margin-left: -18px;
    width: 36px;
    text-align: center;
}

.healthBreakdownContainerV2 .healthScoreTxt3digit {
    font-size: initial;
}

.healthscore-checklist-container {
    width: 50%;
    float: right;
    min-width: 350px;
}

@media (min-width: 1430px) {
    .healthscore-checklist-container {
        width: 60%;
    }
}

@media (min-width: 1520px) {
    .pull-right-if-room {
        float: right;
    }
}

.hidden.healthscore-checklist-container {
    display: none;
}

.health-history-container {
    width: 250px;
    padding-left: 50px !important;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\/\|
    Health Breakdown V2 Scores
|/\/\/\/\/\/\/\/\/\/\/\/\/\|*/
.healthBreakdownContainerV2 {
    margin-top: 10px;
}

.healthBreakdownItemRowV2 {
    margin-top: 8px;
    padding-bottom: 5px;
}

.healthBreakdownLabelV2 {
    color: #666;
    font-weight: 500;
    padding-right: 15px;
    display: inline-block;
    width: 320px;
    text-align: left;
    padding-left: 25px;
}

.healthBreakdownLabelV3 {
    color: #666;
    font-weight: 500;
    display: inline-block;
    text-align: left;
    padding-left: 25px;
}

.healthBreakdownWeightingV2 {
    color: #999;
    font-size: .875rem;
    font-weight: 400;
    padding-left: 10px;
    display: inline-block;
}

.healthBreakdownStatusV2 {
    padding-top: 3px;
}

.healthBreakdownRatingV2 {
    top: -12px;
    position: relative;
}

.healthBreakdownRatingV2.overdue svg {
    background-color: #f1f1f1;
    border-radius: 25px;
}

.healthBreakdownRatingV2.overdue svg path {
    stroke: #666;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
    Health Score Edit
|/\/\/\/\/\/\/\/\/\/\/\/\|*/


.highcharts-container svg {
    overflow: visible;
}

.highcharts-container {
    overflow: visible !important;
}

.health-edit:hover {
    background: #ddd;
    cursor: pointer;
    transition: .3s ease all;
}

.health-score-target-edit {
    font-size: 0.875rem;
    color: #11b5cc;
    text-align: right;
    margin-right: 8px;
}

.target-edit-action-text {
    vertical-align: top;
    display: inline-block;
    position: relative;
    top: -2px;
}

.target-cancel-action-text {
    vertical-align: top;
    display: inline-block;
    position: relative;
    top: -2px;
    color: #f64431;
    margin-right: 4px;
}

.target-save-action-text {
    vertical-align: top;
    display: inline-block;
    position: relative;
    top: -2px;
    color: #47b14b;
}

.health-score-target-edit .target-edit-container {
    cursor: pointer;
    display: inline-block;
    margin-top: 14px;
}

.health-score-target-edit .target-edit-container:hover span {
    text-decoration: underline;
}

.health-score-target-edit .target-edit-icon, .health-score-target-edit .target-cancel-icon, .health-score-target-edit .target-save-icon {
    margin: 0px 4px 0px 8px;
}

.health-score-target-edit .target-edit-icon svg, .health-score-target-edit .target-cancel-icon svg, .health-score-target-edit .target-save-icon svg {
    width: 14px;
    height: 14px;
}

.health-score-target-edit .target-edit-icon svg path {
    fill: #11b5cc;
}

.health-score-target-edit .target-cancel-icon svg path {
    fill: #f64431;
}

.health-score-target-edit .target-save-icon svg path {
    fill: #47b14b;
}

.health-score-change {
    position: absolute;
    top: 112px;
    width: 164px;
    text-align: center;
}

.health-score-v2 .health-score-change {
    top: 130px;
}

.health-score-chart.high-chart {
    min-width: 170px;
}

.health-score-chart-title {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    padding-left: 10px;
    top: 4px;
    position: relative;
    max-width: 160px;
}

.health-score-link {
    font-size: 0.875rem;
    text-align: left;
    margin-left: 20px;
}

.health-score-link .chart-icon {
    margin-left: 4px;
    position: absolute;
}

.health-score-link .chart-icon svg {
    width: 18px;
    height: 18px;
    position: relative;
    right: -4px;
    top: -2px;
}


/*|/\/\/\/\/\/\/\/\/\/\/\/\|
    Contacts
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.contact-CheckInPadding {
    margin-left: 45px;
}

.contact-name {
    font-size: 1.5rem;
    vertical-align: top;
}

.contact-name img {
    margin-right: 20px;
    position: relative;
    top: 10px;
}

.contact-vertical-align {
    vertical-align: top;
    padding-top: 30px !important;
}

.contact-title.flyout {
    font-size: 0.975rem;
    margin-left: 54px;
    color: #999;
}

.contact-field-title {
    font-weight: 500;
}

.contact-notes {
    color: #1E1F21;
}

li.contact-account-list-item {
    margin: 0;
}

dl.contact-type {
    width: 260px;
}

@media (min-width: 640px) {
    dl.contact-type {
        width: 340px;
        overflow: hidden;
    }
}

dl.contact-type > dt {
    float: left;
    clear: left;
    width: 50%;
}

dl.contact-type > dd {
    white-space: nowrap;
}

.card-contact-simple .profile-image {
    width: 96px;
    display: inline-block;
    vertical-align: top;
}

.card-contact-simple .header {
    width: calc(100% - 96px);
    display: inline-block;
}

.contact-enrich {
    margin-right: 20px;
    font-size: 14px;
    padding-top: 2px;
}

.contact-enrich-icon {
    margin-left: 4px;
}

.contact-enrich:hover svg path {
    fill: #11b5cc;
}

.contact-enrich-icon svg {
    width: 16px;
    height: 16px;
    position: relative;
    top: 3px;
}

.contact-enrich-icon svg path {
    fill: #666666;
}

.contact-header-wrapper dd span {
    margin-right: 8px;
}

.card.print .contact-header-wrapper {
    width: 80%;
}

div.card.print.contact-report {
    font-size: 24px;
}

.card.print.contact-report img.large, .print.contact-report .profile-image.square {
    width: 200px;
    height: 200px;
    min-width: 200px;
}

.row-modal .card-health-score-child-list {
    padding: 1rem;
}

.card.card-health-score {
    padding: 1.25rem;
    padding-bottom: 0.1rem;
}

.card.card-health-score:nth-of-type(1) .card-info-header-title {
    font-size: 1.125rem;
}


.card-health-score-child:first-of-type {
    z-index: -1;
}

.card-health-score-child {
    padding: 1rem;
    width: 280px;
}


@media (min-width: 640px) {
    .card-health-score-child {
        display: block;
        width: 600px;
    }
}

@media (min-width: 1060px) {
    .card-health-score-child {
        display: block;
        width: 100%;
    }
}


.health-title {
    width: 100%;
    vertical-align: top;
}

@media (min-width: 640px) {
    .health-title {
        width: 40%;
    }
}

.health-title > .card-info-header-title {
    width: 160px;
    vertical-align: top;
    padding-bottom: 20px;
}

.card-health-score > .status-block {
    width: 60%;
}

.status-block > .health-score-chart {
    display: none;
}

@media (min-width: 640px) {
    .status-block > .health-score-chart {
        display: block;
    }
}

.health-child-current {
    margin-left: .5rem;
    margin-right: .5rem;
    font-size: 1.25rem;
    font-weight: 600;
    width: 60px;
}

.table-data {
    display: grid;
    grid-auto-rows: 1fr;
}

.table-header {
    display: flex;
    gap: 4px;
}

.table-header-cell {
    font-size: 0.75rem;
    font-weight: 500;
    color: #ffffff;
    padding: 6px;
    border-radius: 4px;
    text-align: center;
}

.table-left-indent {
    width: 150px;
    padding: 4px;
}

.table-row {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}

.table-left-header {
    font-size: 0.875rem;
    font-weight: 500;
    width: 150px;
    color: #333333;
    background-color: #dddddd;
    text-align: center;
    padding: 8px 2px;
    border-radius: 4px;
}

.table-left-header.unassigned {
    background-color: #efefef;
    color: #666666;
}

.table-cell {
    border: 1px solid #dddddd;
    padding: 2px;
}

.table-cell.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.table-cell .contact-cell {
    padding: 2px;
    margin-bottom: 4px;
}

@media (min-width: 1400px) {
    .table-cell .contact-cell {
        padding: 4px;
    }
}

.table-cell .contact-cell img {
    width: 14px;
    height: 14px;
}

@media (min-width: 1400px) {
    .table-cell .contact-cell img {
        width: 24px;
        height: 24px;
    }
}

.table-cell .contact-cell, .table-cell .contact-cell .contact-name {
    font-size: 0.75rem;
    line-height: 0.75rem;
}

.table-cell .contact-cell .contact-container {
    display: inline-block;
    vertical-align: top;
    padding-left: 2px;
    width: calc(100% - 20px);
}

@media (min-width: 1400px) {
    .table-cell .contact-cell .contact-container {
        width: calc(100% - 26px);
        padding-left: 6px;
    }
}


.table-cell .contact-cell .contact-activity {
    float: right;
    vertical-align: top;
}

.table-cell .contact-cell .contact-line {
    height: 4px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.table-cell .contact-cell:hover {
    cursor: pointer;
    background-color: rgb(13 139 157 / 0.10);
}


/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Account Summary
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.account-logo {
    max-width: 120px;
    float: left;
}

.recent-list .account-logo {
    width: 24px;
    height: 27px;
}

.image-left {
    width: 80px;
    height: 40px;
    margin-right: 20px;
}

.image-left img {
    max-width: 100%;
    max-height: 100%;
    margin-right: 20px;
}

.account-description-wrapper {
    width: calc(100% - 140px);
    float: right;
}

.account-description-wrapper .product-graph {
    width: 0px;
    height: 0px;
    display: inline-block
}

.account-description-wrapper .product-graph svg {
    position: relative;
    left: -140px;
    width: 100px;
    height: 100px;
}

.account-description-wrapper .hide-account-description p {
    margin-bottom: 8px;
}

.account-products {
    clear: both;
}

.account-product-graph {
    width: 120px;
    display: inline-block;
}

.account-product-list {
    display: inline-block;
    width: calc(100% - 120px);
    vertical-align: top;
    padding: 10px;
}


.account-crm-icon {
    margin-right: 48px;
}

.account-crm-icon svg {
    width: 60px;
    height: 30px;
    position: relative;
    top: -14px;
}

.contact-header-wrapper .account-crm-icon svg {
    top: 0px;
}


.filter-container.health-compare {
    display: inline-block;
    margin-left: 4px;
}


.recent-list .account-name {
    padding-left: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #333333
}

.account-description-wrapper .account-product-list {
    min-height: 100px;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Surveys
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.card-survey-item-add {
    margin-left: 26px;
}


.card-survey .card-survey-item-add:hover div.add-new-icon svg path {
    fill: #11b5cc;
}

.card-survey .card-survey-item-add:hover {
    cursor: pointer;
    color: #11b5cc;
}

div.add-new-icon {
    display: inline-block;
    margin-right: 6px;
    position: relative;
}

div.add-new-text {
    display: inline-block;
    position: relative;
    color: #11b5cc;
    vertical-align: top;
    text-transform: uppercase;
    cursor: pointer;
}

.add-new-text .add-icon {
    position: relative;
    top: 4px;
}

.add-new-user .add-icon {
    margin-right: 6px;
    height: 20px;
    width: 20px;
}

.add-new-user .add-icon svg {
    position: relative;
    float: left;
}

.add-new-user, .add-new-user .add-icon path {
    color: #11b5cc;
    fill: #11b5cc;
    cursor: pointer;
}

.add-new-user:hover, .add-new-user:hover .add-icon path {
    color: #0d8b9d;
    fill: #0d8b9d;
}


div.add-new-icon svg path {
    fill: #11b5cc;
}


.card-survey div.add-new-text {
    display: inline-block;
    position: relative;
}


.survey-objective-title {
    font-size: 18px;
    margin-bottom: 10px;
}

.survey-info {
    padding-bottom: 20px;
}

.survey-titlebox {
    width: 10%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.survey-date, .survey-owner {
    font-size: 0.875rem;
}

.survey-date {
    text-align: right;
}

.survey-owner {
    overflow: hidden;
    max-width: 115px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (min-width: 1430px) {
    .survey-owner {
        max-width: 160px;
    }
}

.survey-account-title {
    display: block;
    text-align: right;
    clear: both;
    width: 100%;
    margin-top: 20px;
    font-size: 0.875rem;
    color: #666666;
    font-style: italic;
}

.survey-email-date {
    font-style: italic;
    margin-right: 6px;
    padding: 8px 6px 0 6px;
    display: inline-block;
    line-height: 14px;
}


.survey-sentiment {
    display: block;
    width: 100%;
    clear: both;
    font-size: 0.875rem;
    padding-top: 4px;
    text-align: right;
}

.survey-sentiment.positive {
    color: #47b14b;
    font-weight: 500;
}

.survey-sentiment.negative {
    color: #f64431;
}

.survey-sentiment.neutral {
    color: #999999;
    font-style: italic;
}



.survey-checkbox {
    padding-top: 10px;
    padding-left: 40px;
}

.survey-checkbox-header {
    text-align: left;
    position: relative;
    font-size: 14px;
    font-weight: 400;
    color: #999;
}

.survey-textbox .add-new-icon, .survey-textbox .add-new-text {
    cursor: pointer;
}

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

.survey-contact .email-date {
    display: block;
    font-size: 0.75rem;
    color: #666666;
}

.right-sidebar .survey-textbox {
    width: 100%;
}

.right-sidebar .example-voc .survey-textbox {
    width: 95%;
}

.right-sidebar .survey-card-row .survey-textbox {
    width: 95%;
}


.right-sidebar .survey-textarea {
    width: 95%;
    float: right;
}

.survey-textarea.completed li {
    padding: 0;
    margin: 0;
}

.survey-textarea span.ib {
    display: inline-block;
}


.right-sidebar .survey-textbox {
    font-weight: bold;
}


.right-sidebar .survey-textbox .section-header {
    font-weight: normal;
}


.right-sidebar .survey-textbox span {
    color: #000;
    font-weight: 500;
}

.right-sidebar .survey-textarea.completed {
    font-size: 14px;
    line-height: 1.2em;
}

.survey-textbox .survey-header {
    font-size: 1.15rem;
    font-weight: 300;
}

.survey-powered-by {
    color: #999999;
    cursor: pointer;
    display: inline-block;
    position: relative;
    top: -2px;
    margin-right: 8px;
}

.survey-powered-by:hover {
    color: #11b5cc;
}


.add-all {
    position: relative;
    left: 30px;
}

.portfolio-report-checkbox, .drag-drop-checkbox-right {
    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 20px !important;
    padding-bottom: 0px !important;
}

/* ***************************************************
    New Action Plan Goal Card
*******************************************************/

.actionplan-goal {
    margin-left: 10px;
    width: calc(100% - 10px);
    z-index: 0;
}

.actionplan-goal.list {
    margin-left: 0;
    width: 100%;
}

.actionplan-goal.flipped {
    z-index: 4;
    -webkit-box-shadow: inset 0px -1px 2px 0px rgba(60,60,60,0.3);
    -moz-box-shadow: inset 0px -1px 2px 0px rgba(60,60,60,0.3);
    box-shadow: inset 0px -1px 2px 0px rgba(60,60,60,0.3);
}

.actionplan-goal.inline-add {
    z-index: 1;
}

.actionplan-goal > .card-row {
    padding-left: 30px;
}

.actionplan-goal .vert-dropdown.dropit a svg {
    width: 3px;
}

.actionplan-goal .card-edit span {
    top: 50%;
    margin-top: -14px;
    position: absolute;
    margin-left: 20px;
}

.info__card-metric .svg-metric-icon {
    margin-right: 4px;
    position: relative;
    top: 1px;
}

.blind-update {
    font-size: 12px;
    padding-right: 20px;
    color: #f64431;
}

.status-image.green svg path {
    fill: #47b14b;
}

.status-image.red svg path {
    fill: #f64431;
}

.status-image.grey svg, .status-image.green svg, .status-image.red svg {
    width: 15px;
    height: 15px;
}

.integration-status .status-image.grey svg, .integration-status .status-image.green svg, .integration-status .status-image.red svg {
    width: 17px;
    height: 17px;
}

.status-image.grey svg path {
    fill: #999;
}

.status-image.small-image {
    height: 16px;
    width: 16px;
}

.status-image.small-image svg {
    height: 16px;
    width: 16px;
}

.card-small-pad {
    padding: 9px;
}

.expand-icon {
    position: absolute;
    transform: rotate(180deg);
    margin-top: 2px;
    height: 20px;
}

.expand-icon svg {
    height: auto;
    width: 12px;
}

.contract-icon {
    position: absolute;
    margin-top: -2px;
    height: 10px;
}

.contract-icon svg {
    height: 15px;
    width: 15px;
}

.contract-icon g {
    fill: #11b5cc;
}


.contract-icon.flip svg {
    width: 13px;
    height: auto;
    transform: rotate(0deg);
    margin-top: 5px;
}

.action-plan-expand {
    position: absolute;
}

.action-plan-expand .contract-icon {
    position: relative;
    left: -8px;
    top: 6px;
}

.action-plan-expand .expand-icon {
    position: relative;
    left: -8px;
    top: 6px;
}


.read-more, .collapse {
    color: #11b5cc;
    cursor: pointer;
    font-size: 14px;
}



/*|/\/\/\/\/\/\/\/\/\/\/\/\|
New Action Plan
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.card-content {
    width: calc(100% - 60px);
    float: left;
}

.action-plan-historic .action-plan-parent .card-content, .action-plan-historic .action-plan-sub-item .card-content {
    width: 100%;
}


.card-edit {
    width: 60px;
    float: right;
}

.card-edit .dropit {
    margin-top: -10px;
    margin-bottom: -20px;
}

.action-plan-sub-item .dash {
    position: absolute;
    font-weight: 600;
    font-size: 18px;
}

.parent-dash {
    font-size: 30px;
    line-height: 20px;
    margin-left: -6px;
    margin-top: 5px;
}

.contract-icon.sub-item-icon {
    margin-top: 2px;
    margin-left: 2px;
}

.expand-icon.sub-item-icon {
    transform: none;
    margin-top: 2px;
    margin-left: 2px;
}

.add-sub-item-button {
    background: #11b5cc;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    padding: 8px;
}

.edit-item-button {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    margin-top: 8px;
}

.action-plan-parent .percent-container {
    font-size: 20px;
    color: #666666;
    padding-right: 10px;
    min-width: 0px;
}

div.add-top-level-item {
    color: #11b5cc;
    float: right;
    cursor: pointer;
}

.action-plan-parent .info__block {
    padding-top: 4px;
}

.action-plan-parent .card-edit .dropit {
    margin-top: -5px;
}

.action-plan-sub-item {
    width: calc(100% - 10px);
    margin-left: 10px;
}

.action-plan-sub-item.drag-item {
    width: calc(100% - 30px);
    margin-left: 30px;
    color: #666;
    font-size: 14px;
    position: relative;
}

.drag-level-1 .action-plan-sub-item.drag-item.drag-action {
    width: calc(100%);
    margin-left: 0px;
}

.drag-level-2 .action-plan-sub-item.drag-item.drag-action {
    width: calc(100% - 30px);
    margin-left: 30px;
}

.drag-level-3 .action-plan-sub-item.drag-item.drag-action {
    width: calc(100% - 60px);
    margin-left: 60px;
}

.drag-level-1 .action-plan-sub-item.drag-item.drag-task {
    width: calc(100% - 30px);
    margin-left: 30px;
}

.drag-level-2 .action-plan-sub-item.drag-item.drag-task {
    width: calc(100% - 60px);
    margin-left: 60px;
}

.drag-level-3 .action-plan-sub-item.drag-item.drag-task {
    width: calc(100% - 90px);
    margin-left: 90px;
}

.action-plan-sub-item .info__card-title {
    font-size: 0.875rem;
    color: #333;
    padding-left: 16px;
    font-weight: 500;
}

.action-plan-sub-item .sub-item-icon svg path {
    fill: #999;
}

.percent-container {
    padding-right: 10px;
    min-width: 60px;
    text-align: right;
    display: inline-block;
    color: #999;
}

.account-profile.card-report .report-plan-section .percent-container {
    min-width: 40px;
}

.action-plan-sub-item .pie-chart {
    position: relative;
    top: 3px;
}

.action-plan-sub-item .sub-item-icon svg {
    width: 13px;
    margin-left: -10px;
    margin-top: 3px;
}


.action-plan-sub-item .edit-item-button {
    margin-top: 0;
}

.create-action.flyout-action {
    font-size: 14px;
    padding: 4px;
}

.create-action.flyout-action svg {
    width: 14px;
}

.action-plan-parent.card-editable.flipped {
    z-index: 3;
}

.action-plan-sub-item .card-editable.flipped .back {
    z-index: 2;
}

.action-plan-parent:not(.active-parent) + .card-container {
    margin-bottom: 20px !important;
}

.action-plan-metric {
    margin-left: 30px;
}

.action-plan-metric svg {
    position: relative;
    top: 2px;
    margin-right: 2px;
}

.card-container .container-space {
    margin-bottom: 20px !important;
}

.card-container .container-space.none {
    margin-bottom: 0 !important;
}



.card-edit .dropit {
    width: 40px;
    float: right;
}


.card.action-plan-parent:hover, .card.action-plan-sub-item:hover {
    background: #fff;
}

.action-plan-parent {
    z-index: 3;
}


.card.action-plan-sub-item.active-parent {
    z-index: 0;
}

.item-description svg {
    fill: #999;
    margin-left: 4px;
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
}

.item-description.darker svg {
    fill: #666;
}

.item-description.module-action:hover svg path {
    fill: #11b5cc;
}

/* card flipped */
.action-plan-parent .card-flip .card-row.card-cap-blue .text-context, .action-plan-sub-item .card-flip .card-row.card-cap-blue .text-context {
    color: #fff;
    width: auto;
}

#account-growth-canvas {
    margin-bottom: 60px;
}

#account-growth-canvas:after {
    content: "";
    display: table;
    clear: both;
}

/* jquery hack for inset box shadow in ie and firefox */
.boxShadowSidesInsetTop {
    box-shadow: inset 0px 4px 2px -2px rgba(0,0,0,.24), -2px 0px 2px -2px rgba(0, 0, 0, 0.3), 2px 0px 2px -2px rgba(0, 0, 0, 0.3) !important;
}


/*|/\/\/\/\/\/\/\/\/\/\/\/\|
List View Hierarchy View 
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.goal-state-container {
    font-size: 12px;
    padding-top: 8px;
}

@media (min-width: 1430px) {
    .goal-state-container {
        font-size: 14px;
    }
}



.page-options-container svg, .hierarchy-list-view svg {
    width: 24px;
    height: 24px;
    padding: 2px;
}

.hierarchy-list-view .user-view svg {
    width: 26px;
    height: 26px;
    padding: 2px;
}

.hierarchy-list-view .list svg {
    width: 17px;
}

.hierarchy-list-view .user-view.list svg {
    width: 21px;
}

.hierarchy-list-view .datepicker-wrap {
    background-color: transparent;
}

.page-options-container svg path, .hierarchy-list-view svg path {
    fill: #B0B0B0;
}

.page-options-container .icon-container:not(.active):hover svg path, .hierarchy-list-view .icon-container:not(.active):hover svg path {
    fill: #11b5cc;
}

.page-options-container .active svg path, .hierarchy-list-view .active svg path {
    fill: #666;
}

.page-options-container .icon-container, .hierarchy-list-view .icon-container {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    padding: 2px;
}

.hierarchy-list-view .icon-container.user-view {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    padding: 2px;
}

.page-options-container .icon-container.active, .hierarchy-list-view .icon-container.active {
    background: #eee;
    border: 1px solid #dddddd;
}

.download-img .icon-container span {
    display: inline-block;
    margin-left: 6px;
    position: relative;
    font-size: 14px;
    top: -4px;
}

.card-orgchart .download-img .icon-container svg {
    width: 16px;
    height: 16px;
    margin-left: 6px;
}

.card-orgchart .download-img .icon-container span {
    top: -2px;
}

.contact-section {
    position: absolute;
    top: -40px;
    right: 0;
}

.card-orgchart .download-img .icon-container.grey svg path {
    fill: #666;
}

.list.card-list ul.list-view svg path {
    fill: #999;
}

.card-orgchart .download-img.person-networked-img .icon-container svg {
    width: 19px;
    height: 19px;
}

.card-orgchart .download-img.person-question-img .icon-container svg {
    width: 22px;
    height: 22px;
    margin-bottom: -3px;
}

.list ul.list-view {
    display: inline;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 60px;
}

.list ul.list-view:hover svg path {
    fill: #11b5cc;
    transition: .3s ease;
}


.list ul.list-view a.hierarchy-icon {
    padding: 0 20px;
}

.action-account-name {
    width: 130px;
    text-align: left;
    margin-left: 10px;
}

.list-view-card .dropit .dropit-submenu {
    top: calc(50% + 20px);
}

.list-view.goal-hierarchy.dropit .dropit-submenu {
    left: -256px;
}

.list-view-card .goal-hierarchy.dropit .pointer {
    left: 280px;
}

.goal-caution {
    color: #edb500;
}

.goal-caution svg {
    width: 16px;
    margin-right: 4px;
    margin-bottom: -4px;
}

.goal-caution svg path {
    fill: #edb500;
}

.page-options-container {
    display: inline-block !important;
    float: right;
    text-align: right;
    white-space: nowrap;
    min-width: 80px;
    position: relative;
}

.page-options-container .page-options-title {
    color: #999;
    font-size: 12px;
    position: absolute;
    top: -16px;
    right: 0;
}

.page-options-container .page-options-title.left {
    left: 0;
    text-align: left;
    width: calc(100% - 50px);
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
    Inline Action Plan
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.card.parent-objective {
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Attachments
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.attachments {
    background-color: #fafafa;
    border-top: 1px solid #D3D3D3;
}

.attachments .attachment-list .attachment-item {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
}

@media (min-width: 640px) {
    .attachments .attachment-list .attachment-item {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

@media (min-width: 1060px) {
    .attachments .attachment-list .attachment-item {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

@media (min-width: 1230px) {
    .attachments .attachment-list .attachment-item {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

.attachments .attachment-list .attachment-item:hover {
    background-color: #EEEEEE;
}

.attachments .attachment-list .attachment-item:last-of-type .attachment-content {
    border-bottom: none;
}

.attachments .attachment-list .attachment-item:first-of-type .attachment-content {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.attachments .attachment-list .attachment-content {
    width: 100%;
    display: table;
    height: 40px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.attachments .attachment-list .attachment-title {
    display: table-cell;
    vertical-align: middle;
}

.attachments .attachment-list .attachment-title:hover {
    cursor: pointer;
}

.attachments .attachment-list .attachment-type {
    height: 22px;
    width: 22px;
}

.attachments .attachment-list .attachment-uploader-name {
    display: table-cell;
    vertical-align: middle;
}

.attachments .attachment-list .attachment-uploader-image {
    height: 20px;
    width: 20px;
}

.attachments .attachment-list .attachment-date {
    display: table-cell;
    vertical-align: middle;
}

.attachments .attachment-list .attachment-delete {
    display: table-cell;
    vertical-align: middle;
}

.attachments .attachment-list .attachment-delete:hover {
    cursor: pointer;
}

.attachments .upload-wrap {
    margin-top: 14px;
    padding-left: 0.9375rem;
}

@media (min-width: 640px) {
    .attachments .upload-wrap {
        padding-left: 1.25rem;
    }
}

@media (min-width: 1060px) {
    .attachments .upload-wrap {
        padding-left: 1.25rem;
    }
}

@media (min-width: 1230px) {
    .attachments .upload-wrap {
        padding-left: 1.25rem;
    }
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Image
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
img {
    max-width: 100%;
    display: inline-block;
}

img.circled {
    border-radius: 12.5rem;
}

img.large {
    height: 6rem;
    width: 6rem;
    min-width: 6rem;
}

img.medium {
    height: 3rem;
    width: 3rem;
}

img.medium-small {
    height: 2.5rem;
    width: 2.5rem;
}

img.small {
    height: 2rem;
    width: 2rem;
}

img.x-small {
    height: 1.5rem;
    width: 1.5rem;
}

img.tiny {
    height: 1.25rem;
    width: 1.25rem;
}

img.x-tiny {
    height: 1rem;
    width: 1rem;
}

img.edit {
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
}

img.edit:hover {
    opacity: .8;
    cursor: pointer;
}

.image-square-hover {
    display: none;
    position: absolute;
    background-color: rgba(193,193,193,.5);
}

.image-square-hover .edit-text {
    position: unset;
    margin: 6px;
    font-weight: 500;
    display: block;
}

.image-square-hover .edit-icon svg path {
    fill: #333333;
}

.image-edit:hover .image-square-hover {
    display: block;
    cursor: pointer;
}

.image-square-hover.large {
    height: 6rem;
    width: 6rem;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Profile Hierarchy
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.profile-hierarchy {
    position: relative;
    margin-bottom: 50px;
}

@media (max-width: 640px 1px) {
    .profile-hierarchy-context {
        display: block;
        margin: 8px auto;
    }
}

@media (min-width: 1060px) {
    .profile-hierarchy-context {
        margin: 6px 6px 6px 3px;
    }
}

.profile-hierarchy-list {
    list-style: none;
    position: relative;
    width: 100%;
}

.profile-hierarchy-list li {
    margin: 0 10px 4px 0;
}

.profile-hierarchy-list li img {
    height: 46px;
    width: 46px;
}

.profile-hierarchy-list_above {
    position: relative;
}

@media (max-width: 640px) {
    .profile-hierarchy-list_above {
        text-align: center;
    }
}

@media (min-width: 1060px) {
    .profile-hierarchy-list_above {
        margin-left: 30px;
    }
}

@media (max-width: 640px 1px) {
    .profile-hierarchy-list_above li {
        display: inline-block;
        margin-right: 0;
    }
}

.profile-hierarchy-list_above:after {
    content: "";
    background: url("/images/chevron-up.png");
    height: 8px;
    width: 12px;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (max-width: 640px) {
    .profile-hierarchy-list_above:after {
        margin: 0 auto;
    }
}

@media (min-width: 1060px) {
    .profile-hierarchy-list_above:after {
        display: block;
        left: 16px;
        position: relative;
    }
}

@media (min-width: 1060px) {
    .profile-hierarchy-list_aside {
        display: inline-block;
        height: 106px;
        width: 400px;
        padding-left: 22px;
    }
}

.profile-hierarchy-list_aside li {
    float: left;
}

@media (max-width: 1060px 1px) {
    .profile-hierarchy-list_aside li:nth-of-type(5n) {
        margin-right: 0;
    }
}

@media (min-width: 1060px) {
    .profile-hierarchy-list_aside:before {
        content: "";
        background: url("/images/chevron-right.png");
        display: block;
        height: 12px;
        width: 8px;
        position: absolute;
        left: 0;
        top: 48px;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

.profile-hierarchy-list_below {
    width: 106px;
}

@media (max-width: 640px) {
    .profile-hierarchy-list_below {
        margin: 0 auto;
    }
}

.profile-hierarchy-list_below li {
    float: left;
}

.profile-hierarchy-list_below li:nth-of-type(2n) {
    margin-right: 0;
}

.profile-hierarchy-list_below:before {
    content: "";
    background: url("/images/chevron-down.png");
    display: block;
    height: 8px;
    left: 46px;
    position: relative;
    width: 12px;
    background-size: cover;
    background-repeat: no-repeat;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Modals
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    transform: translate(0, -25%);
    -webkit-transition: -webkit-transform 300ms ease-out;
    transition: transform 300ms ease-out;
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    position: relative;
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    top: 20vh;
}

@media (min-width: 640px) {
    .modal-dialog {
        width: 50%;
    }
}

@media (min-width: 1060px) {
    .modal-dialog {
        width: 25%;
    }
}

.modal-content {
    position: relative;
    background-color: #ffffff;
    border-radius: 0px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    outline: 0;
}


.confirmation-modal-content {
    padding: 20px;
}

.confimation-modal-question {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
}

.confimation-modal-title {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

.card .modal-footer .button {
    padding: 20px 0;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: #000000;
}

.modal-backdrop.fade {
    opacity: 0;
}

.modal-backdrop.in {
    opacity: 0.85;
}

.modal-header {
    padding: 15px;
}

.modal-header .close {
    margin-top: -2px;
}

.modal-title {
    margin: 0;
    font-size: 1.125em;
    line-height: 1.5em;
    text-align: center;
}

.modal-body {
    position: relative;
    padding: 20px;
    text-align: center;
}

.modal-footer {
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.modal-footer .button, .modal-footer input[type="file"] {
    width: 100%;
    float: left;
    padding: 15px 0;
}

.modal-footer .button-half {
    width: 50%;
}

.modal-footer .button-third {
    width: 33.33333333%;
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

.create-new-modal .modal-dialog {
    max-width: 760px;
}

@media (min-width: 1060px) {
    .create-new-modal .modal-dialog {
        width: 38.75rem;
    }
}

@media (min-width: 1230px) {
    .create-new-modal .modal-dialog {
        width: 47.5rem;
    }
}



/*|/\/\/\/\/\/\/\/\/\/\/\/\|
SVGs
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.status-image.blind .svg-objective-icon {
    width: 30px;
    height: 30px;
}

.status-image.center .svg-objective-icon {
    position: relative;
    top: 2px;
}

.status-image.blind.center .svg-objective-icon {
    position: relative;
    top: 4px;
}

.svg-pencil-icon {
    width: 16px;
    height: 17px;
}

.svg-pencil-icon.medium {
    width: 40px;
    height: 40px;
}

.svg-email-icon.medium svg {
    height: 30px;
    width: 30px;
}

.svg-phone-icon.medium > svg {
    height: 30px;
    width: 30px;
}

.svg-linkedin-icon.medium svg {
    width: 25px;
    height: 25px;
}

.svg-google-plus-icon svg {
    width: 16px;
    height: 16px;
}

.svg-google-plus-icon path {
    fill: #dd4b39;
}

.svg-google-plus-icon.medium svg {
    width: 25px;
    height: 25px;
}

.svg-twitter-icon svg {
    width: 16px;
    height: 16px;
}

.svg-twitter-icon path {
    fill: #00aced;
}

.svg-twitter-icon.medium svg {
    width: 25px;
    height: 25px;
}

.svg-blog-icon svg {
    width: 16px;
    height: 16px;
}

.svg-blog-icon path {
    fill: #fb8f3d;
}

.svg-blog-icon.medium svg {
    width: 25px;
    height: 25px;
}

.side-bar-nav-icon svg {
    width: 20px;
    height: 20px;
}

.svg-business-icon svg {
    margin: .25rem;
    width: 16px;
    height: 16px;
    fill: #666666;
}

.svg-business-icon path {
    fill: #666666;
}

.svg-business-icon.medium > svg {
    height: 30px;
    width: 30px;
}

.svg-hierarchy-icon svg {
    margin: .25rem;
    width: 16px;
    height: 16px;
    fill: #666666;
}

.svg-hierarchy-icon path {
    fill: #666666;
}

.svg-hierarchy-icon.medium > svg {
    height: 40px;
    width: 40px;
}

.svg-relationship-icon svg {
    margin: .25rem;
    width: 16px;
    height: 16px;
    fill: #666666;
}

.svg-relationship-icon path {
    fill: #666666;
}

.svg-relationship-icon.medium > svg {
    height: 30px;
    width: 30px;
}

.svg-edit-icon.medium svg {
    height: 20px;
    width: 20px;
}

.download-icon svg {
    position: relative;
    top: 3px;
    right: 3px;
    height: 20px;
    width: 20px;
    fill: #fff;
}

.svg-circle-icon svg {
    margin: .25rem;
    height: 6px;
    width: 6px;
}

.svg-circle-icon.onboarding svg {
    margin: .25rem;
    height: 0.5rem;
    width: 0.5rem;
}

.svg-circle-icon.onboarding svg path {
    fill: #11b5cc;
}

.metric-icon {
}

.view-icon.active svg path {
    fill: #11b5cc;
}

.card-icon {
    padding-right: 10px;
}





.upload-modal-icon svg path {
    fill: #666666;
}

.upload-modal-icon svg:hover path {
    fill: #11b5cc;
}

.view-plan-icon svg {
    fill: #666666;
    top: 3px;
    left: 3px;
    height: 20px;
    width: 20px;
    display: inline-block;
    position: relative;
}

.view-plan-icon svg:hover path {
    fill: #11b5cc;
}



/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Goal Report
|/\/\/\/\/\/\/\/\/\/\/\/\|*/
.goal-report-header {
    margin-bottom: 1px;
    margin-top: 8px;
}

.goal-report {
    margin-bottom: 1px;
}

.goal-report .goal-detail {
    margin-left: 68px;
}

.goal-report .goal-rate-context {
    text-align: center;
    margin-top: 4px;
}

.goal-report .goal-rate-expected {
    display: inline-table;
    text-align: center;
    width: 50%;
    line-height: 1;
    margin-left: -4px;
    color: #ffffff;
    background-color: #b0b0b0;
}

.goal-report .goal-rate-expected > div {
    display: table-cell;
    vertical-align: middle;
}

.goal-report .goal-rate-expected > div p {
    line-height: 1;
}

@media (min-width: 640px) {
    .goal-report .goal-rate-expected > div p {
        font-size: 12px;
    }
}

@media (min-width: 640px) {
    .goal-report .goal-rate-expected {
        height: 54px;
    }
}

@media (min-width: 1230px) {
    .goal-report .goal-rate-expected {
        height: 74px;
    }
}

.goal-report .goal-rate-current {
    display: inline-table;
    text-align: center;
    width: 50%;
    line-height: 1;
    color: #ffffff;
    background-color: #11b5cc;
}

.goal-report .goal-rate-current > div {
    display: table-cell;
    vertical-align: middle;
}

.goal-report .goal-rate-current > div p {
    line-height: 1;
}

@media (min-width: 640px) {
    .goal-report .goal-rate-current > div p {
        font-size: 12px;
    }
}

@media (min-width: 640px) {
    .goal-report .goal-rate-current {
        height: 54px;
    }
}

@media (min-width: 1230px) {
    .goal-report .goal-rate-current {
        height: 74px;
    }
}

.goal-report .status-block {
    margin-top: 14px;
}

.goal-report .status-block .status-image {
    margin-top: 3px;
}

.goal-report .goal-detail-description {
    color: #666666;
}

.goal-report .goal-detail-progress {
    position: relative;
    min-height: 100px;
}

.goal-report .goal-detail-progress-bar {
    position: absolute;
    top: 50%;
    margin-top: -2px;
    width: 100%;
    height: 4px;
    background-color: #d3d3d3;
}

.goal-report .goal-detail-progress-current {
    width: 70px;
    position: absolute;
    top: 15px;
    left: 0;
    color: #666666;
    line-height: 1;
}

.goal-report .goal-detail-progress-current:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -14px;
    margin-left: -1px;
    height: 10px;
    width: 2px;
    background-color: #11b5cc;
}

.goal-report .goal-detail-progress-expected {
    width: 70px;
    position: absolute;
    bottom: 14px;
    left: 0;
    color: #666666;
    line-height: 1;
}

.goal-report .goal-detail-progress-expected:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: -15px;
    margin-left: -1px;
    height: 10px;
    width: 2px;
    background-color: #11b5cc;
}

.goal-report .goal-detail-progress-text {
    text-align: center;
}

.goal-report .goal-detail-progress-percent {
    text-align: center;
}


/********************************************
    Goal Details
 ********************************************/

.goal-details-button {
    width: 100% !important;
    display: block;
}

h1.goal-header {
    font-size: 20px;
    margin-bottom: 5px;
}

.goal-header .metric {
    font-size: 14px;
    color: #999;
    display: inline-block;
    padding-top: 4px;
    max-width: 18%;
    display: block;
}

.goal-header .metric.wide {
    max-width: 30%;
}

@media (min-width: 1520px) {
    .goal-header .metric {
        max-width: 22%;
    }

    .goal-header .metric.wide {
        max-width: 45%;
    }
}

.goal-header .need-update {
    padding-top: 6px;
    display: inline-block;
}

.goal-header .status {
    padding-top: 2px;
}

.goal-header span {
    vertical-align: top;
}

.goal-name {
    max-width: 50%;
    display: inline-block;
    color: #323f4f;
}

.goal-name.wide {
    max-width: 75%;
}

.goal-name.inline {
    max-width: 100%;
    display: inline-block;
    color: #333333;
    font-size: 1.165rem;
    margin-top: 8px;
}

.left-bar {
    position: absolute;
    width: 5px;
    height: 100%;
    left: 0;
    top: 0;
}

.top-bar {
    position: absolute;
    width: 100%;
    height: 5px;
    left: 0;
    top: 0;
}

.context-icon {
    position: relative;
    top: 4px;
}

.context-icon svg {
    width: 16px;
}


.left-bar.card-bad {
    background-color: #f64431;
}

.percent.card-bad, .status.card-bad {
    color: #f64431;
}

.status.card-bad svg g {
    fill: #f64431;
}

.left-bar.card-alert {
    background-color: #e2a100;
}

.percent.card-alert, .status.card-alert {
    color: #e2a100;
}

.status.card-alert svg g {
    fill: #e2a100;
}

.left-bar.card-good {
    background-color: #47b14b;
}

.percent.card-good, .status.card-good {
    color: #47b14b;
}

.status.card-good svg g {
    fill: #47b14b;
}

.left-bar.card-neutral {
    background-color: #b0b0b0;
}

.percent.card-neutral {
    color: #b0b0b0;
}

.status {
    font-size: 16px;
    font-weight: 500;
}

.status svg {
    width: 18px;
    height: 18px;
    position: relative;
    top: 2px;
}

.task-label {
    display: block;
    font-size: 0.75rem;
    color: #999999;
}

dl.task-owner dd {
    margin-left: 10px;
}


dl.task-owner img {
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 20px;
    position: relative;
    left: -10px;
    top: 3px;
}

.card.task-detail .task-status {
    display: inline-block;
    margin-right: 8px;
}

.card.task-detail .task-status .task-status-action {
    position: relative;
    top: 6px;
}

.card.task-detail .task-status .task-status-action svg {
    width: 28px;
    height: 28px;
}

.card.task-detail .task-status.completed .task-status-action svg path {
    fill: #47b14b;
}

.card.task-detail .task-completed {
    float: right;
    border: 4px solid #47b14b;
    border-radius: 6px;
    padding: 4px 8px;
    font-weight: 600;
    color: #47b14b;
}

.need-update {
    font-size: 14px;
    color: #f64431;
}

.accordion.hierarchy .accordion-normal svg {
    height: 16px;
    width: auto;
    top: 2px;
    position: relative;
    margin-right: 2px;
}

.accordion.hierarchy .accordion-text {
    font-size: 14px;
    font-weight: 500;
}

.accordion.hierarchy .accordion-normal svg path {
    fill: #11b5cc;
}

.accordion.hierarchy .context-icon svg path {
    fill: #999;
}

.accordion.hierarchy .accordion-content {
    background: #eee;
    padding: 10px 20px;
    margin-top: 10px;
    margin-left: -20px;
    margin-right: -20px;
}

.hierarchy-item.header {
    font-size: 16px;
    color: #666;
}

.hierarchy-item {
    font-size: 14px;
}

.hierarchy-item:nth-of-type(3) {
    padding-left: 20px;
}


.hierarchy-item:nth-of-type(4) {
    padding-left: 40px;
}

.hierarchy-content {
    width: calc(100% - 30px);
    float: right;
    padding-top: 8px;
}

/********************************************
    Opportunity Details
 ********************************************/

.opportunity-label {
    display: block;
    font-size: 0.75rem;
    color: #999999;
}

.opportunity-sidebar {
    margin-top: 180px !important;
}

.opportunity-checkbox-container {
    width: 100%;
    float: left;
}

.opportunity-checkbox-container.system {
    top: 14px;
    position: relative;
}

.opportunity-checkbox-container .actions-hover {
    top: 35px;
    left: 15px;
}

.opportunity-checkbox-container input[type=checkbox] + label {
    position: absolute;
}

.opportunity-checkbox-container input[type=checkbox] + label:before {
    border-color: #000;
}

.opportunity-table-checkbox-container {
    width: 100%;
    float: left;
}

.opportunity-table-checkbox-container.system {
    top: 5px;
    position: relative;
}

.opportunity-table-checkbox-container .actions-hover {
    top: -30px;
    left: 0px;
}

.opportunity-table-checkbox-container input[type=checkbox] + label {
    position: absolute;
}

.opportunity-table-checkbox-container input[type=checkbox] + label:before {
    border-color: #000;
}

/********************************************
   Document List
 ********************************************/

.modal-document-list {
    margin-bottom: 20px;
}

.modal-document-list li {
    margin: 0;
    list-style: none;
}

li.document-item {
    border-bottom: 1px #ddd solid;
    padding: 4px 2px;
}

li.document-item.no-border {
    border-bottom: none;
}

.modal-document-list .document-item .document-icon {
    display: inline-block;
    position: relative;
    top: 3px;
    margin-right: 8px;
}

.document-table .document-item .document-icon {
    display: inline-block;
    position: relative;
    top: 3px;
    margin-right: 8px;
}

.modal-document-list .document-item .document-name {
    width: calc(100% - 88px);
    overflow: hidden;
    display: inline-block;
    position: relative;
    top: 10px;
}

.modal-document-list .document-item.document-link .document-name {
    top: 04px;
}

.modal-document-list .document-item .document-delete {
    width: 24px;
    display: inline-block;
    cursor: pointer;
}

.modal-document-list .document-item.document-link .document-delete {
    float: right;
    margin-right: 10px;
}

.modal-document-list .document-item .document-delete:hover path, .document-container .document-delete:hover path {
    fill: #D73D3D;
}

.modal-document-list .document-item .document-icon svg, .document-table .document-item .document-icon svg {
    width: 20px;
    height: 20px;
}

.document-container {
    width: 100%;
    vertical-align: top;
    border: 4px solid #dddddd;
    padding: 8px;
}

.document-container .document-name {
    display: inline-block;
    vertical-align: top;
    margin-top: 6px;
}

.document-container .document-icon {
    margin-right: 4px;
}

.document-container .document-update {
    display: inline-block;
    margin: 2px 6px;
}

.document-container .document-update:hover svg path {
    fill: #11b5cc;
}

.document-container .document-delete {
    display: inline-block;
    margin: 0px 6px;
}

.document-container svg {
    top: 4px;
    position: relative;
}

.document-container .document-download {
    width: 70%;
    vertical-align: top;
}

.document-container .document-update {
    width: 24px;
    display: inline-block;
    float: right;
    cursor: pointer;
}

.document-container .document-delete {
    width: 24px;
    display: inline-block;
    float: right;
    cursor: pointer;
}

.document-item .ppicon path, .document-container .ppicon path {
    fill: #d04526;
}

.document-item .wordicon path, .document-container .wordicon path {
    fill: #048be5;
}

.document-item .pdficon path, .document-container .pdficon path {
    fill: #c51111;
}

.document-item .imgicon path, .document-container .imgicon path {
    fill: #83719b;
}

.document-item .excelicon path, .document-container .excelicon path {
    fill: #11a918;
}

.document-item .fileicon path, .document-container .fileicon path {
    fill: #576a82;
}

.document-item .sharepointicon path, .document-container .sharepointicon path {
    fill: #1e88e5;
}

.document-item .googledriveicon path, .document-container .googledriveicon path {
    fill: #2ea54d;
}

.download-list .dropit-submenu {
    right: -6px !important;
}

.dropdown .document-item {
    border-bottom: none;
    margin-bottom: 0;
}

.modal-document-list .document-list-header {
    padding: 0 0 4px 0;
    font-size: 0.875rem;
    color: #999;
    line-height: 1rem;
}

.modal-document-list .document-download {
    position: relative;
    left: -12px;
}

.document-msg {
    padding: 8px;
    margin-top: 12px;
}

.document-msg .msg-text {
    width: calc(100% - 120px);
    display: inline-block;
}

.document-msg.warning {
    background-color: #f64431;
    color: #fff;
}

.document-msg .button {
    float: right;
    background-color: #fff;
    padding: 2px;
    display: inline-block;
    position: relative;
    top: -1px;
    margin-left: 8px;
    width: 50px;
    color: #333;
    text-align: center;
    font-size: 0.875rem;
    text-transform: uppercase;
    cursor: pointer;
}

.document-msg .button:hover {
    color: #11b5cc;
}

.document-sidebar {
    margin-bottom: 0;
}

.document-sidebar .document-updated {
    font-size: 0.75rem;
    color: #999999;
}

.modal-note-document-list .button-auto {
    padding-top: 10px;
    padding-bottom: 10px;
}

.teams-connectors-buttons {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 90px !important;
}

.teams-subtype-selection {
    margin-top: 6px;
}

.slack-subtype-selection {
    margin-top: 6px;
}

.goal-documents, .task-documents {
    font-size: 1rem;
    vertical-align: top;
}

.goal-document-detail, .task-document-detail {
    display: inline-block;
    width: calc(100% - 20px);
}

.goal-document-action,
.task-document-action {
    display: inline-block;
    width: 20px;
    vertical-align: top;
}

.goal-document-detail .document-owner, .task-document-detail .document-owner {
    color: #999;
    font-size: 0.875rem;
}

.goal-document-detail .document-date, .task-document-detail .document-date {
    color: #999;
    font-size: 0.875rem;
    display: inline-block;
    margin-left: 24px;
}

.document-upload {
    cursor: pointer;
}

.document-upload .uploadTextLink {
    width: 0;
    height: 0;
}

.card.document-list {
    background: none;
    box-shadow: none;
}

.card.document-list .dz-message {
    margin: 8px 0px !important;
}

.document-form-icon {
    width: 26px;
    display: inline-block;
    float: left;
    margin: 10px 0 0 0;
}

.document-name-update {
    width: calc(100% - 32px);
    top: 14px;
    position: relative;
}

.document-download {
    cursor: pointer;
}

.progress-amount {
    color: #fff;
    font-size: 16px;
    padding: 10px 20px;
    text-transform: uppercase;
}

.document-list .document-upload .edit-icon svg {
    width: 16px;
    height: 16px;
}

.document-list .document-upload .edit-icon svg path {
    fill: #999;
}

.document-list .document-upload:hover .edit-icon svg path {
    fill: #11b5cc;
}

.document-list .document-upload:hover .edit-icon {
    color: #11b5cc;
}

.card .document-list .dropzone {
    border: none;
    width: 150px;
    min-height: 24px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    z-index: 5;
}


.card .document-list .dropzone .edit-icon {
    cursor: pointer;
    z-index: -1;
}

.card .document-list .dropzone svg {
    width: 18px;
    height: 18px;
    top: 3px;
    position: relative;
}

.card .document-list .dropzone svg path {
    fill: #999999;
}

.document-category-title-first {
    margin-bottom: 0px !important;
}

.document-category-title {
    padding-top: 20px !important;
    margin-bottom: 0px !important;
}

.row .document-category-section {
    margin-bottom: 0px !important;
}

.document-item .document-download:hover .document-name {
    color: #0d8b9d;
}

#account-document-form.link-container {
    border: 2px solid rgba(0, 0, 0, 0.3);
    padding: 15px;
}

.card-edit-connectors {
    border: 2px solid rgba(0, 0, 0, 0.3);
    padding: 15px;
    width: 100%;
    float: left;
    background-color: #ffffff;
    position: relative;
}

.card-edit-connectors-new {
    border: 2px solid rgba(0, 0, 0, 0.3);
    padding: 15px;
    background-color: #ffffff;
    position: relative;
}

/********************************************
    Activity Feed
 ********************************************/

.activity-circle svg {
    max-width: 15px;
    max-height: 15px;
    margin: 0 auto;
    vertical-align: middle;
}

.activity-row {
    position: relative;
    border-bottom: 1px solid #e9e9e9;
}

.activity-row:after {
    content: "";
    display: table;
    clear: both;
}

.activity-row:first-child .activity-icon {
    height: calc(100% - 35px);
}

.report-section .activity-row:first-child .activity-icon {
    height: 80%;
}

.activity-row:first-child .activity-circle {
    right: -15px;
    top: -15px;
}

.report-section .activity-row:first-child .activity-circle {
    right: 20px;
    top: 0px;
}

.activity-circle {
    display: inline-block;
    background: #e9e9e9;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    right: -15px;
    text-align: center;
    padding-top: 3px;
}

.report-section .activity-circle {
    right: 20px;
}

.activity-circle svg path {
    fill: #596a83;
}

.activity-content {
    width: calc(100% - 45px);
    float: right;
}

.report-section .activity-content {
    width: 100%;
}

.activity-icon {
    width: 35px;
    float: left;
    position: absolute;
    border-right: 1px solid #e9e9e9;
    bottom: 0;
    height: 100%;
}

.report-section .activity-icon {
    border-right: none;
}

.entity-title {
    display: block;
    color: #333333;
    font-size: 0.75rem;
}

.activity-date, .activity-owner {
    font-size: 14px;
    color: #B0B0B0;
}

.activity-date {
    width: 100px;
    display: inline-block;
    text-align: right;
    margin-top: 4px;
}

.activity-brief {
    font-size: 1rem;
    color: #333;
}

.activity-person-icon {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    top: 3px;
}

.activity-person-icon img {
    width: 18px;
    height: 18px;
}

.activity-brief-title {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 4px;
    padding-top: 4px;
}

.activity-brief-title .status {
    font-size: 0.85rem;
    font-weight: 400;
}


.activity-brief-title .status span {
    margin-right: 5px;
}


.activity-brief-title svg {
    height: 16px;
    width: 16px;
}

.progress-change {
    font-size: 14px;
    display: inline-block;
    width: 60px;
}

.progress-change.positive {
    color: #47b14b;
}

.progress-change.negative {
    color: #f64431;
}

.progress-change.positive .triangle {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #47b14b;
    position: relative;
    bottom: 14px;
    margin-right: 4px;
}

.progress-change.negative .triangle {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #f64431;
    position: relative;
    top: 11px;
    margin-right: 2px;
}

.progress-section {
    color: #999;
    font-size: 14px;
}

.progress-section .progress-graph {
    display: inline-block;
    width: 100px;
    height: 10px;
    background: #e9e9e9;
    margin-right: 5px;
}

.progress-section .progress-bar {
    display: block;
    height: 100%;
    background: #596A83;
}

.activity .filter-container {
    position: relative;
    clear: none;
    top: 0;
    width: auto;
    float: right;
    display: inline-block;
}





/************************************************************
    Integration Styles (Salesforce, Slack, etc)
 ************************************************************/

.int-config {
    color: #11b5cc;
    display: inline-block;
    padding: 58px 0px 58px 40px;
    vertical-align: top;
}

.int-config:hover {
    color: #0d8b9d;
}

.salesforce-switch {
    padding: 40px 10px;
    text-align: right;
}

.salesforce-details {
    display: inline-block;
    padding: 58px 0px 58px 40px;
    vertical-align: top;
    font-size: 1rem;
    cursor: pointer;
    color: #999;
}

.salesforce-details:hover {
    color: #0d8b9d;
}

.salesforce-info {
    font-size: 18px;
    line-height: 24px;
    color: #b0b0b0;
}

.salesforce-modal-title {
    display: inline-block;
    padding: 20px 0px 20px 40px;
    vertical-align: top;
    font-size: 1.25rem;
    font-weight: 500;
}

.salesforce-verify, .hubspot-response {
    font-size: 1rem;
    text-align: center;
    font-family: Courier New, Courier, monospace;
}

.salesforce-switch > .switch {
    float: right;
}

div.integration-success, div.integration-fail {
    padding-top: 8px;
    padding-left: 6px;
}

.integration-success {
    color: #47b14b;
    font-size: 24px;
    display: inline-block;
    vertical-align: top;
}

.integration-success > svg {
    width: 40px;
    height: 40px;
}

.integration-success > svg path, .integration-success > svg g {
    fill: #47b14b;
}

.integration-fail {
    color: #e2a100;
    font-size: 24px;
    display: inline-block;
    vertical-align: top;
}

.integration-fail > svg {
    width: 40px;
    height: 20px;
}

.integration-fail > svg path, .integration-fail > svg g {
    fill: #e2a100;
}

.salesforce-list-container, .zohocrm-list-container, .hubspot-list-container {
    height: 415px;
    overflow-y: scroll;
}

.hubspot-logo {
    width: 200px;
    padding-top: 46px;
}

.sf-opp-sync-icon {
    font-size: 0.875rem;
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    margin-right: 12px;
}

.sf-opp-sync-icon:hover {
    color: #11b5cc !important;
}

.sf-opp-sync-icon svg {
    width: 18px;
    height: 18px;
    margin-right: 4px;
    top: 4px;
    position: relative;
}

.sf-opp-none {
    font-size: 1.25rem;
    color: #666666;
}

body .text-small.integration-status {
    position: relative;
    top: -2px;
    font-weight: 500;
}

/********************************************
    Report Styles
 ********************************************/
.card.print {
    margin: 0;
}

.card.print.contact-report {
    font-size: 24px;
}

.row.print {
    margin: 0;
}

.download-report {
    position: relative;
    top: 16px;
    color: #11b5cc;
}

.report-row {
    width: 82.5rem !important;
    font-size: 1rem;
}

.report__heading {
    background-color: #576A82;
    color: #FFFFFF;
    height: 105px;
}

.report__heading span {
    line-height: 13px;
}

.print .goal-edit, .card-preview .goal-edit {
    display: none;
}

.card-preview .report__heading {
    height: 75px;
}

.report__footer {
}

.report-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    fill: #60C0FE;
}

.report-icon.large svg {
    width: 8rem;
    height: 8rem;
}

.report-icon svg path {
    fill: #60C0FE;
}

.kapta-logo svg path {
    fill: #B0B0B0;
}

.card-preview .report-header-container {
    padding-bottom: 1rem;
}

.report-header {
    font-size: 2.5rem;
    font-weight: 300;
}

.print .report-header {
    position: relative;
    bottom: 18px;
}

.report-section-title {
    color: #11b5cc;
}

.report-section h3 .account-name {
    vertical-align: top;
    font-size: 1.1rem;
    color: #333333;
    margin-left: 8px;
    margin-top: 10px;
    display: inline-block;
}

.report-info-block {
    width: 15%;
}

.report-info-block .score-number {
    font-size: 2rem;
    padding-bottom: 5px;
}


.report-chart-block {
    width: 50%;
    border: 1px solid #B0B0B0;
}

.report-chart-block .chart-label {
    width: 33.33%;
    padding: 5px;
}

.report-chart-block .chart-label span.pct-change {
    font-size: 2rem;
    display: block;
    padding-bottom: 5px;
}

.report-chart-block .chart-container {
    width: 66.66%;
    padding: 5px 15px 5px 0;
}

.report-overview-block {
    width: 34%;
    padding-left: 1.5rem;
    padding-right: 1rem;
}

.report-overview-block .overview-desc {
    line-height: 1.5rem;
}

.report-pie-block {
    width: 40%;
}

.print .report-pie-block {
    height: 594px;
}

.card-preview .report-pie-block {
    height: 500px;
}

.report-jsp-block {
    width: 60%;
    padding-right: 1rem;
    padding-top: 2rem;
}

.print .no-goals {
    padding: 5rem 14rem;
}

.card-preview .no-goals {
    padding: 5rem 8rem;
}

.card-preview .no-goals span {
    height: 340px;
}

.print .no-goals span {
    height: 440px;
}

.no-goals-header {
    font-size: 3rem;
}

.no-goals-text {
    line-height: 1.5rem;
    padding-right: 6rem;
}

.no-pie-goals {
    padding: 0 6rem;
}

.parent-card-list.commits {
    margin-left: 1rem;
}

.parent-card-list.commits .card-row {
    border: 1px solid #efefef;
    border-top: none;
}

.print .report-jsp-block .card-list {
    border: none;
}

.card-list .card-list .card-row {
    border-top: none;
}

.donut-chart-legend {
    position: relative;
    bottom: 60px;
}

.donut-chart-legend dl {
    padding: 0;
    margin: 0;
    font-size: 1rem;
}

.donut-chart-legend dt {
    float: left;
    clear: left;
    width: 50%;
    text-align: right;
    margin: 0;
    padding: 0 0.5rem 0 0;
}

.donut-chart-legend dd {
    padding: 0;
    margin: 0;
}

.donut-chart-legend dt:after {
    content: ":";
}

.print .parent-card-list .child-card-list, .card-preview .parent-card-list .child-card-list {
    margin-left: 1rem;
}

.print .parent-card-list .child-card-list .card, .card-preview .parent-card-list .child-card-list .card {
    width: 100%;
    margin-left: 0;
}

.print .child-card-list .info__block {
    width: 87.5%;
}

.card-preview .child-card-list .info__block {
    width: 86%;
}

.card-preview .card-gen-flip:hover:not(.flipped), .card-preview .card-objective-summary:not(.card-expanded) .center-card {
    background-color: initial;
    cursor: initial;
}

.print .card-gen-flip .status-image, .card-preview .card-gen-flip .status-image {
    margin-right: 0.5rem;
}

.print .status-image.blind, .card-preview .status-image.blind {
    margin-right: 0rem;
}

.print .status-image.blind.center .svg-objective-icon, .card-preview .status-image.blind.center .svg-objective-icon {
    right: 5px;
}

.card-preview .card-gen-flip .info__card-percent {
    margin-right: 1.8rem;
}

.card-preview .card-gen-flip .info__card-percent.blind {
    margin-right: 1.7rem;
}

.print .card-gen-flip .info__card-percent {
    margin-right: 1.6rem;
}

.print .card-gen-flip .info__card-percent.blind {
    margin-right: 1.5rem;
}

.total-goals-count {
    font-size: 2rem;
}

.total-goals {
    position: relative;
    bottom: 205px;
    font-size: 1rem;
}


.print .card-objective-summary, .card-preview .card-objective-summary {
    width: 100%;
    background-color: initial;
    cursor: initial;
}

.print .card.card-list.card-gen-flip, .card-preview .card.card-list.card-gen-flip {
    margin-left: 1.25rem;
    width: 100%;
    background-color: initial;
    cursor: initial;
}

.print .contract-icon, .card-preview .contract-icon {
    display: none;
}

.print .info__card-title, .card-preview .info__card-title {
    padding-left: 1rem !important;
}

.card-report .info__card-title {
    padding-left: 0 !important;
}

.prinvt .subGoal, .card-preview .subGoal {
    padding-left: 25px;
}

.card.card-list.card-gen-flip.last {
    margin-bottom: 1.25rem;
}

.card-report.card-contract {
    padding-bottom: 8px;
}

.card-report.card-contract.card-list:nth-child(2n + 3) {
    background: #f2f2f2;
}

.opportunity-container .card.opportunity-report.card-contract.card-list:last-of-type {
    margin-bottom: 25px;
}

.opportunity-container.border-bottom {
    width: calc(100% + 66px);
    margin-left: -33px;
}

/********************************************
    Account Matrix Report Styles
 ********************************************/
.table-key {
    width: 440px;
    border: 1px solid #ddd;
    color: #333;
    font-size: 14px;
    padding: 10px;
}

.text-header.text-mid-grey {
    color: #666;
}

.table-key .section1 {
    width: 40%;
    float: left;
    padding: 10px 0 0 10px;
}

.table-key .section2 {
    width: 60%;
    float: right;
}

.table-key .icon-container {
    width: 16px;
    float: left;
    margin-right: 5px;
}

.table-key .icon-container svg {
    height: 15px;
    margin: 0 auto;
    width: 15px;
}

.table-key .block-2 {
    text-align: center;
}

.table-key .matrix-graph-wrapper {
    margin: 0 auto !important;
    float: none;
    font-size: 12px;
    width: 80px;
}

.table-key .matrix-graph-outer {
    margin-left: 20px;
    margin-bottom: 4px;
}

.account-matrix-table thead tr td {
    font-size: 16px;
    color: #000;
    padding-top: 4px;
    line-height: 30px;
    text-align: center;
    font-weight: 500;
}

.account-kpis-table thead tr th {
    color: #000;
    padding: 4px 4px 6px;
    line-height: 20px;
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    width: 15%;
}

.account-kpis-table thead tr th:first-child {
    width: 25%;
}

.account-matrix-table thead, .account-kpis-table thead {
    border-bottom: 1px solid #999;
}

.account-kpis-table .account-list-score-item {
    margin-left: 0;
}

.account-matrix-table thead tr td:first-child {
    font-size: 20px;
    padding-top: 0;
    text-align: left;
}

.account-matrix-table tr td {
    width: 20%;
}

.account-kpis-table tr td {
    font-size: 20px;
    color: #999;
    padding: 20px 4px;
    width: 15%;
}

.account-kpis-table tr td:first-child {
    width: 25%;
}

.account-kpis-table .icon-container {
    height: 24px;
}

.account-kpis-table .no-icon {
    position: relative;
    top: 19px;
}

.account-kpis-table .icon-container svg {
    height: 20px;
}

.account-kpis-table .icon-container svg path {
    fill: #000;
}

.account-kpis-table .value-text:not(.value-health-score) > span {
    margin-left: 0;
}

.account-kpis-table .value-text.value-health-score > span {
    padding-top: 4px;
}

.account-kpis-table .value-text .text-light-grey {
    color: #B9B9B9 !important;
}

.account-kpis-table thead tr th:first-child, .account-kpis-table tbody tr td:first-child {
    font-size: 16px;
}

.account-kpis-table .target-text {
    display: block;
    font-size: 0.75rem;
    color: #999999;
}

.account-matrix-table tr td:first-child {
    width: 30%;
}

.account-matrix-table tr td:nth-child(2) {
    width: 10%;
}

.account-matrix-table tbody tr, .account-kpis-table tbody tr {
    border-bottom: 1px solid #ddd;
}

.account-matrix-table tbody tr td {
    padding: 20px 0 0;
    font-size: 16px;
    color: #666;
    text-align: center;
    vertical-align: top;
    height: 140px;
}

.account-matrix-table tbody tr td:first-child {
    font-size: 20px;
    color: #333;
    text-align: left;
    padding-bottom: 20px;
}

.account-matrix-table tbody tr td .block-4.mb {
    margin-top: 20px;
}

.account-matrix-table tbody tr td .block-4.mb:first-child {
    margin-top: 0px;
}

.account-matrix-table tbody .icon svg {
    height: 16px;
    margin-bottom: -2px;
}

.account-matrix-table .table-space {
    margin-top: 26px;
}

.table-space.dash {
    padding-top: 4px;
}

.no-info {
    display: inline-block;
    margin-top: 10px;
}

.matrix-graph-section {
    width: 100px;
    margin: 0 auto;
}

.matrix-graph-wrapper {
    width: 40px;
    float: left;
}

.matrix-graph-wrapper.friend {
    margin-right: 20px;
}

.matrix-graph-outer {
    height: 50px;
    width: 40px;
    position: relative;
    float: left;
}

.friend .matrix-graph-outer {
    background: #70a5c4;
}

.table-key .graph-range {
    line-height: 1.1rem;
}

.table-key .graph-range span {
    color: #999;
}

.power .matrix-graph-outer {
    background: #7d83cd;
}

.matrix-graph-inner {
    background: #ddd;
    position: absolute;
    top: 0;
    width: 100%;
}

.card-background {
    color: #FFFFFF;
    margin-bottom: 20px;
}

.row-modal .card-background {
    margin-bottom: 0;
    border: none;
}

.card-background span {
    font-size: 1.125rem;
}

.card-background .cancel-edit svg, .card-background .cancel-icon svg {
    height: 15px;
    width: 15px;
}

.card-background .cancel-edit path, .card-background .cancel-icon path {
    fill: #FFFFFF;
}

.card-background .auto-dropdown svg {
    fill: #EFEFEF;
}


/****************************************************
    Quick Note - V2 UI
*****************************************************/

#modal-note-document-list {
    min-height: 90px;
}

.card-note {
    min-height: 70px;
}

.card-note:not(:first-of-type):hover {
    cursor: zoom-in;
}

.card-note.card-expanded:hover {
    cursor: zoom-out;
}

.card-note:not(:first-of-type):hover .timeline-highlight {
    box-shadow: inset 5px 0px #11b5cc;
}

.card-note .info-icon {
    margin-right: 6px;
    position: relative;
    top: 6px;
}

.note-voice {
}

.note-voice-icon {
    float: right;
    padding-top: 10px;
    padding-right: 10px;
}

.note-voice-icon svg {
    width: 24px;
    height: 24px;
}

.note-voice-icon.on svg path {
    -webkit-animation: note-voice-color 2s infinite;
}

.modal-note-mic-mobile {
    padding-bottom: 30px;
}

@-webkit-keyframes note-voice-color {
    0% {
        fill: #1ae221;
    }

    50% {
        fill: #3c923f;
    }

    100% {
        fill: #1ae221;
    }
}

.modal-note-document-list .dropzone {
    min-height: 20px;
    padding: 0;
}


.timeline-highlight {
    position: absolute;
    height: 100%;
    width: 5px;
}

.card-note:first-of-type .timeline-container {
    position: relative;
}

.timeline-container div.timeline-icon {
    width: 35px;
    float: left;
    position: absolute;
    border-right: 1px solid #e9e9e9;
    bottom: 0;
    height: 100%;
}

.timeline-action-container {
    padding: 0px 0px 0px 4px !important;
}

.report-section .timeline-container div.timeline-icon {
    left: -15px;
    height: 80%;
    bottom: 10px;
    border-right: none;
}

.card-note:nth-of-type(2) div.timeline-icon {
    height: calc(100% - 30px);
}

.timeline-icon svg {
    width: 15px;
    height: 15px;
    position: relative;
    top: 4px;
}

.timeline-icon svg path {
    fill: #596A83;
}

.timeline-container .timeline-icon .timeline-circle {
    display: inline-block;
    background: #e9e9e9;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    right: -15px;
    text-align: center;
    padding-top: 2px;
}


.card-note:nth-of-type(2) .timeline-circle {
    right: -15px;
    top: -15px;
}

.report-section .timeline-icon .timeline-circle {
    top: 0px;
}

.timeline-note {
    background-color: #ffffff;
    margin-right: 4px;
}

.timeline-note .note-title {
    font-size: 13.25px;
    font-weight: 500;
    color: #333333;
}

.timeline-note .note-details, .timeline-note .note-details p {
    font-size: 13px;
    color: #666666;
    line-height: 15px;
}

.timeline-note .note-author {
    font-size: 12px;
    color: #666666;
    font-weight: 400;
    font-style: italic;
}

.card-note .note-container {
    width: calc(100% - 45px);
    float: right;
}

.card-account-note .note-container {
    margin-top: -20px;
}

.report-section .card-note .note-container {
    width: calc(100% - 20px);
}

.note-container .card-row {
    padding-left: 20px;
}

.card-note .note-container .dl-50 {
    width: 50%;
    display: inline-block;
}

.note-container .edit-note-icon.add-icon {
    top: 1px;
    position: relative;
    margin-left: 7px;
    padding-right: 3px;
}

.note-container .edit-note-icon.add-icon svg {
    width: 14px;
    height: 14px;
}

.note-container .link-text .edit-note-icon svg path {
    fill: #11b5cc;
}

.note-container .link-text:hover .edit-note-icon svg path {
    fill: #0d8b9d;
}

.note-table p {
    font-size: 0.75rem;
}

.card-row h3 {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #000;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 20px;
}

.card-list.voc .card-row h3 {
    text-transform: none;
}

.dashboard-content h4 {
    display: flex;
    justify-content: space-between;
}

.dashboard-content h4 svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
}

.dashboard-content h4 svg path {
    fill: #666;
}

.dashboard-block-icon {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-block-icon svg {
    width: 24px;
    fill: #fff;
}

.dashboard-block-icon.small {
    width: 24px;
    height: 24px;
}

.dashboard-block-icon.small svg {
    width: 20px;
}

.dashboard-block-icon.trend-bad {
    background: #f64431;
}

.dashboard-block-icon.trend-good {
    background: #47b14b;
}

.dashboard-block-icon.trend-none {
    background: #999;
}

.card-recent .account-logo img {
    max-height: 30px;
}

dl.dropdown-container.dashboard-header .dropdown-title-link span {
    font-size: 18px;
}

.table-color-block {
    width: 24px;
    height: 24px;
}


.trend-num {
    position: relative;
    padding-right: 10px;
    margin-left: 6px;
}

.trend-num:after {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
}

.trend-up:after {
    right: 0;
    top: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid #47b14b;
}

.trend-down:after {
    right: 0;
    top: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 7px solid #f64431;
}

.trend-none:after {
    right: 0;
    top: 5px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid #999;
}

.card-row h3 svg {
    width: 20px;
    max-height: 18px;
    margin-left: 10px;
}

.card-row h3 svg path {
    fill: #000;
}

.card-note .title-note {
    font-size: 1rem;
    color: #333333;
    font-weight: 500;
}

.card-note .accountname-note {
    font-size: .925rem;
    color: #333333;
    font-weight: 400;
    padding-left: 10px;
}

.card-note .accountname-small-note {
    font-size: .75rem;
    color: #666666;
    font-weight: 500;
    padding-left: 10px;
    display: block;
}

.card-note .contact-note {
    display: block;
    font-size: .75rem;
}

.card-note .qbr-note, .card-note .task-note {
    display: block;
    font-size: .875rem;
    padding-bottom: 4px;
    width: fit-content;
}

.card-note .qbr-note .qbr-note-icon, .card-note .task-note .task-note-icon {
    display: inline-block;
    padding-right: 4px;
}

.card-note .qbr-note .qbr-note-icon svg, .card-note .task-note .task-note-icon svg {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
}


.card-note .qbr-note .qbr-note-icon path, .card-note .task-note .task-note-icon path {
    fill: #666666;
}

.card-note .qbr-note:hover path, .card-note .task-note:hover path {
    fill: #0d8b9d;
}

.card-note .subtype-note {
    font-size: 0.75rem;
    color: #666666;
    font-weight: 400;
    font-style: italic;
    display: block;
}

.card-note .text-note, .preview-note .text-note {
    font-size: .875rem;
    color: #666666;
    font-weight: 400;
    display: block;
    margin-top: 4px;
}



.card-note ul, .card-note li {
    font-size: 0.875rem !important;
    clear: both;
}



.card-note .owner-note {
    font-size: .875rem;
    color: #666666;
    font-weight: 400;
    float: right;
    margin-right: 8px;
}

.card-note .date-note {
    font-size: .875rem;
    color: #666666;
    font-weight: 400;
    float: right;
    width: 130px;
    display: inline-block;
    text-align: right;
}


.card-note .highLt {
    display: inline;
}

.card-note .edit-note-section {
    float: right;
    width: 100%;
    padding-top: 4px;
}

body .timeline-container .text-note p, body .timeline-container .text-note li, body .timeline-container .text-note span, body .timeline-container .text-note div {
    font-size: 0.875rem !important;
}

.no-notes {
    margin-left: 90px;
}

.no-notes-print {
    margin-left: 95px;
}

.account-section {
    padding-left: 60px;
}

.notes-section {
    padding-left: 115px;
}

/********************************************
    Metric Control Styles
 ********************************************/
.scale-label-container {
    padding: 0 10px;
    clear: both;
}

.metric-title {
    font-size: 16px;
    margin-bottom: 10px;
    display: inline-block;
    width: 50%;
    color: #999999;
    font-weight: 400;
    line-height: 1rem;
}

.metric-title.right {
    text-align: right;
}

.metric-title.left {
    text-align: left;
}

.metric-value {
    color: #333;
    font-size: 16px;
    display: block;
    font-weight: 500;
    margin-top: 10px;
    line-height: 1rem;
}

input.metric-input {
    margin-bottom: 16px;
}

.scale-container {
    padding: 0px 10px;
}

.scale-container .scale-total {
    width: 100%;
    height: 2px;
    background-color: #D6D6D6;
    position: relative;
    border-radius: 4px;
}

.scale-container .scale-done {
    height: 3px;
    background-color: #11b5cc;
    position: relative;
    z-index: 2;
    top: -3px;
    border-radius: 4px;
    -webkit-transition: width 360ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: width 360ms cubic-bezier(0.77, 0, 0.175, 1);
}

.scale-current-slide {
    margin-left: auto;
}

.scale-current-slide.trans {
    -webkit-transition: width 360ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: width 360ms cubic-bezier(0.77, 0, 0.175, 1);
}

.scale-current-title-container {
    width: 90px;
    margin-left: -48px;
    margin-top: -9px;
    position: relative;
}

.scale-current-pointer {
    width: 10px;
    height: 10px;
    background: #11b5cc;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    top: -4px;
}

.scale-current-title {
    font-size: 15px;
    line-height: 1rem;
    color: #999999;
    padding: 10px 0px 5px 0px;
    text-align: center;
}

.scale-current-value {
    font-size: 12px;
    font-weight: 400;
    color: #333;
    text-align: center;
    white-space: nowrap;
}

/* *************************************************************
    Color Picker 
************************************************************** */

.colorpicker-container {
    margin-top: 10px;
}

.colorpicker-container label {
    display: none;
}

.colorpicker-container label.float-label {
    display: inline-block;
    left: 10px;
    transform: translateY(-24px);
}

.colorpicker-container .sp-replacer {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #11b5cc;
    background-color: #FFFFFF;
}

/* *************************************************************
    Report Settings
     ************************************************************/

.report-container {
    height: 622px;
    padding-top: 12px;
}

.report-title {
    font-size: 1.75rem;
}


.report-h1 {
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid #666666;
}

.report-h1 .title-text {
    max-width: 75%;
    display: inline-block;
    font-size: 1.5em;
    font-weight: 400;
    margin-top: 2px;
}

.report-h1 .title-description {
    max-width: 75%;
    display: block;
    font-size: 1em;
    font-weight: 400;
    margin-top: 2px;
    color: #999999;
}



.report-h1 .percent-container {
    font-size: 1.25em;
    margin-right: 8px;
}


.report-h2 {
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid #999;
    color: #333;
}

.report-h2.light {
    border-bottom: 1px solid #ddd;
}

.report-h2.combined {
    min-height: 50px;
}

.report-h2.no-border {
    border-bottom: none;
}

.report-h2:after {
    content: "";
    display: table;
    clear: both;
}

.report-h2 .title-text {
    max-width: 75%;
    display: inline-block;
    font-size: 1.2em;
    font-weight: 400;
    margin-top: 2px;
}

.report-h2 .heading-title-text {
    display: inline-block;
    font-size: 1.2em;
    font-weight: 400;
    margin-top: 2px;
}

.report-h2 .title-text-container {
    display: inline-block;
    max-width: 75%;
}

.report-h2 .title-text-container .title-text {
    display: block;
    max-width: 100%;
    font-weight: 500;
    font-size: 1em;
    padding-bottom: 4px;
}



.report-h2 .title-text-container .description-text {
    display: block;
    font-size: 1em;
    color: #999;
}

.report-h2 .percent-container {
    font-size: 1.2em;
}

.report-h2 .pie-chart {
    margin-right: 6px;
}

.report-h2 .status-block .owner-name {
    display: block;
    font-size: 1em;
    text-align: right;
    margin-bottom: 4px;
}

.report-h2 .status-block .last-modified {
    display: block;
    font-size: 0.825em;
    color: #697d96;
    text-align: right;
}

.report-h2 .status-block .account-name {
    display: block;
    font-size: 1em;
    text-align: right;
    color: #666666;
    font-style: italic;
}

.report-h3 {
    margin-left: 30px;
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid #dddddd;
}

.report-h3:after {
    content: "";
    display: table;
    clear: both;
}

.report-h3 .duedate-text {
    color: #999999;
    font-size: 0.895em;
    margin-right: 20px;
}

.report-h3 .title-text {
    display: inline-block;
    font-size: 1.2em;
    font-weight: 400;
    display: block;
    color: #333;
}

.report-h3.light {
    border-bottom: 1px solid #999999;
}

.goal-report-container {
    width: calc(100% - 70px);
    float: left;
}

.report-h3 .title-text-container {
    display: inline-block;
    max-width: 75%;
}

.report-h3 .title-text-container .title-text {
    display: block;
    max-width: 100%;
    padding-bottom: 4px;
}



.report-h3 .title-text-container .description-text {
    display: block;
    font-size: .825em;
    color: #666666;
}


.report-h3 .status-block .owner-name {
    display: block;
    font-size: 1em;
    text-align: right;
}

.report-h3 .status-block .last-modified {
    display: block;
    font-size: 0.895em;
    color: #999999;
}

.report-h3 .text-metric {
    color: #666;
}

.report-h3 .svg-metric-icon {
    position: relative;
    top: 3px;
    left: -1px;
    margin-right: 2px;
}

.report-h3 .percent-container {
    font-size: 1.2em;
    color: #999;
}

.report-h3 .status-image {
    margin-right: 12px;
}


/* *************************************************************
    Heat Map
     ************************************************************/
.cal-container {
    width: 100%;
    height: 200px;
}

.cal-row {
    float: left;
    margin: 1px;
    width: 4.5%;
}

.cal-box {
    position: relative;
    width: 100%;
}

.cal-box:before {
    content: "";
    display: block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.cal-header {
    font-size: .8vw;
    clear: both;
}

@media (min-width: 1500px) {
    .cal-header {
        font-size: 14px;
    }
}

.cal-header .cal-box:before {
    padding-top: 100%;
}

@media (min-width: 1660px) {
    .cal-header .cal-box:before {
        padding-top: 80%;
    }
}

.cal-index {
    font-size: 14px;
    clear: both;
    text-align: right;
    vertical-align: middle;
}

.cal-index span {
    margin-right: 2px;
    font-size: 11px;
}

@media (min-width: 1500px) {
    .cal-index span {
        font-size: 14px;
    }
}

.cal {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.cal-legend {
    font-size: 14px;
    font-weight: normal;
    color: #999998;
    float: right;
    height: 16px;
}

.cal-label {
    display: inline-block;
    position: relative;
    margin: 1px 4px 1px 4px;
    top: -4px;
}

.cal-label-item {
    width: 13px;
    height: 13px;
    display: inline-block;
    margin: 1px;
}

@media (min-width: 1500px) {
    .cal-label-item {
        width: 14px;
        height: 14px;
    }
}

.item.n {
    background-color: transparent;
}

.item-0 {
    background-color: #D0D0D0;
}

.item-1 {
    background-color: #A4CAE1;
}

.item-2 {
    background-color: #70A5C4;
}

.item-3 {
    background-color: #4883a5;
}

.item-4 {
    background-color: #2F6E93;
}

.item-5 {
    background-color: #18577D;
}


/* *************************************************************
    Please Wait
     ************************************************************/

.loading-message {
    font-size: 1.8em;
    width: 100%;
    padding: 36px 5px 20px 5px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    -webkit-animation: fadein 4s cubic-bezier(0.77, 0, 0.175, 1); /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 4s cubic-bezier(0.77, 0, 0.175, 1); /* Firefox < 16 */
    -o-animation: fadein 4s cubic-bezier(0.77, 0, 0.175, 1); /* Opera < 12.1 */
    animation: fadein 4s cubic-bezier(0.77, 0, 0.175, 1);
}



@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



.full-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    background-color: #ffffff;
    display: none;
}

.full-screen > .loading-message {
    margin-top: 100px;
}


/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Risks
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.row.account-list-title {
    margin-bottom: 0;
}

.card-risk-section {
    background-color: transparent;
    box-shadow: none;
}

.card-risk-section .title-text {
    font-size: 20px;
    font-weight: 300;
    color: #333;
}



.card-risk-item .title-text {
    font-size: 16px;
    color: #333;
}

.card-risk-item .title-sub {
    font-size: 14px;
    color: #999;
}

.card-risk-item:hover {
    box-shadow: inset 5px 0px #11b5cc, 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
}


/*|/\/\/\/\/\/\/\/\/\/\/\/\|
SWOT
|/\/\/\/\/\/\/\/\/\/\/\/\|*/


.card-account-swot {
}

.card-account-swot .pull-left {
    width: calc(100% - 32px);
}

.card-account-swot .title-new {
    vertical-align: top;
    width: 150px;
    display: inline-block;
    font-weight: 500;
}

.card-account-swot .display-text {
    display: inline-block;
    padding: 0px 8px;
    color: #333333;
    font-size: 0.875rem;
    width: calc(100% - 170px);
}

.risk-view .card-account-swot .display-text {
    width: auto;
}

.card-account-swot .display-text p {
    color: #333333;
    font-size: 0.875rem;
}

.card-account-swot .edit {
    color: #11b5cc;
}

.swot-header {
    position: absolute;
    width: 100%;
}

.swot-header div {
    font-size: 0.875rem;
}

.swot-container {
    display: flex;
    flex-wrap: wrap;
}

.swot-section {
    border: 1px solid #b0b0b0;
    vertical-align: top;
    margin-bottom: 10px;
    width: 49.5%;
}

.swot-section:nth-child(odd) {
    margin-right: 1%;
}

.swot-section.strengths {
    border: 1px solid #0d8b9d;
}

.qbr-details .swot-section.strengths:hover {
    background-color: #0d8b9d11;
}

.swot-section.weaknesses {
    border: 1px solid #c51111;
}

.qbr-details .swot-section.weaknesses:hover {
    background-color: #c5111111;
}

.swot-section.opportunities {
    border: 1px solid #47b14b;
}

.qbr-details .swot-section.opportunities:hover {
    background-color: #47b14b11;
}

.swot-section.threats {
    border: 1px solid #e2a100;
}

.qbr-details .swot-section.threats:hover {
    background-color: #e2a10011;
}


.swot-section-title {
    float: left;
    font-size: 2rem;
    padding-left: 8px;
    display: inline-block;
    color: #697d96;
    width: 75%;
}

.swot-section.strengths .swot-section-title {
    color: #0d8b9d;
}

.swot-section.weaknesses .swot-section-title {
    color: #c51111;
}

.swot-section.opportunities .swot-section-title {
    color: #47b14b;
}

.swot-section.threats .swot-section-title {
    color: #e2a100;
}

.swot-section-icon {
    float: right;
    font-size: 4rem;
    text-align: right;
    line-height: 58px;
    padding-right: 8px;
    display: inline-block;
    color: #697d96;
    width: 25%;
}

.swot-section-icon svg {
    width: 50px;
    height: 50px;
}

.swot-section-text {
    clear: both;
    padding: 16px;
}

.swot-section-text p, .swot-section-text li {
    font-size: 1em;
    color: #323f4f;
}

.swot-recommendation-list {
    height: 320px;
    overflow-y: scroll;
    padding-top: 10px;
}

.swot-recommendation-theme {
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-top: 8px;
    padding: 7px 10px 5px 10px;
    text-align: center;
    font-size: 12px;
    display: inline-block;
    margin-left: 10px;
}

.swot-recommendation-theme.selected {
    background-color: #DBF4F8;
}

.swot-theme-item {
    border-radius: 4px;
    color: #333333;
    background-color: #dddddd;
    display: inline-block;
    font-size: 0.75rem;
    padding: 4px;
    line-height: 0.75rem;
    margin: 2px 2px 0 0;
}

.swot-icon-title {
    font-size: 2.5rem;
    display: inline-block;
    margin: 8px 0 0 14px;
    line-height: 2.25rem;
    vertical-align: top;
    font-weight: bold;
}

.swot-icon-title.strengths {
    color: #0d8b9d;
}

.swot-icon-title.weaknesses {
    color: #D73D3D;
}

.swot-icon-title.opportunities {
    color: #11a918;
}

.swot-icon-title.threats {
    color: #e2a100;
}

.swot-icon svg {
    width: 50px;
    height: 50px;
}

.swot-icon.strengths path,
.swot-section.strengths path {
    fill: #0d8b9d;
}

.swot-icon.weaknesses path,
.swot-section.weaknesses path {
    fill: #D73D3D;
}

.swot-icon.opportunities path,
.swot-section.opportunities path {
    fill: #11a918;
}

.swot-icon.threats path,
.swot-section.threats path {
    fill: #e2a100;
}

.swot-coach-summary {
    display: inline-block;
    margin: 0 8px 0 10px;
}

.swot-coach-summary .pulse {
    right: -15px;
    top: -56px;
}


.swot-select {
    width: calc( 50% - 16px );
    margin: 8px;
    float: left;
    padding: 8px;
}

.swot-select:hover {
    background-color: #efefef;
    cursor: pointer;
}

.swot-select .swot-select-title {
    font-size: 2.25rem;
    font-weight: 500;
    width: calc(100% - 50px);
    float: left;
}

.swot-select .swot-select-icon {
    float: right;
    width: 50px;
}

.swot-select .swot-select-icon svg {
    width: 50px;
    height: 50px;
}

.swot-select.strengths {
    border: 2px solid #0d8b9d;
    color: #0d8b9d;
}

.swot-select.weaknesses {
    border: 2px solid #c51111;
    color: #c51111;
}

.swot-select.opportunities {
    border: 2px solid #47b14b;
    color: #47b14b;
}

.swot-select.threats {
    border: 2px solid #e2a100;
    color: #e2a100;
}

.swot-select.strengths .swot-select-icon path {
    fill: #0d8b9d;
}

.swot-select.weaknesses .swot-select-icon path {
    fill: #c51111;
}

.swot-select.opportunities .swot-select-icon path {
    fill: #47b14b;
}

.swot-select.threats .swot-select-icon path {
    fill: #e2a100;
}


/*
    Relationship Reports
    
    */
.friend-row {
    padding-top: 0px;
    margin-top: 20px;
    padding-bottom: 0px;
    padding-bottom: 20px;
}

.friend-row:not(:last-of-type) {
    padding-bottom: 0px;
}

.friend-row-container {
    min-height: 120px;
    background-color: #A4CAE1;
}

.friend-row .row-title-container {
    position: absolute;
    width: 40px;
    height: 100%;
    background-color: #4883a5;
}

.friend-row.power .friend-row-container {
    background-color: #D5D8F4;
}

.friend-row.power .row-title-container {
    background-color: #565CAB;
}


.friend-row .row-title {
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    position: relative;
    display: inline-block;
    width: 110px;
    text-align: center;
    top: 50px;
    left: -35px;
    color: #ffffff;
    font-weight: 500;
}

.friend-row .pad-cell {
    margin-left: 40px;
    display: table;
}

.print-contact-card {
    margin: 10px 0px 10px 10px;
    background-color: #ffffff;
    width: 170px;
    height: 100px;
    display: inline-block;
    float: left;
}

.print-contact-card .bottom-border {
    border-bottom: 1px #dddddd solid;
}

.print-contact-card .centered-image {
    display: block;
    text-align: center;
    padding: 4px 0px 0px 0px;
}

.print-contact-card .centered-text {
    display: block;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
}

.print-contact-card .centered-text.small {
    font-size: 12px;
    color: #999999;
}

/*
    KPI Reports
    
    */
div.card-row-kpi:first-of-type {
    padding-top: 20px;
}

.card-row.card-row-kpi {
    padding-top: 0px;
}

.card-kpi-block {
    color: #11b5cc;
    padding: 10px;
    background: #fff;
    border: 1px solid #2F6E93;
    width: 240px;
    min-height: 100px;
    display: inline-block;
    vertical-align: top;
}

.card-kpi-block .icon {
    height: 20px;
    margin-bottom: 6px;
}

.card-kpi-block .icon svg {
    width: 20px;
    height: 20px;
}

.card-kpi-block .icon svg path {
    fill: #11b5cc;
}


.card-kpi-block .health-metric {
    font-size: 24px;
    font-weight: 300;
    line-height: 24px;
    margin-bottom: 10px;
    display: inline-block;
}

.card-kpi-block .health-target-text {
    display: block;
    margin-bottom: 4px;
    color: #999999;
    position: relative;
    top: -2px;
}

@media (min-width: 1440px) {
    .card-kpi-block .health-metric {
        font-size: 2rem;
    }
}


.card-kpi-block .health-label {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    text-align: left;
    font-weight: 500;
    line-height: 14px;
}

.card-kpi-block .health-metric-change {
    font-size: 16px;
    display: inline-block;
    width: 40%;
    text-align: right;
}

.health-metric-change svg {
    margin-right: 4px;
    margin-bottom: 2px;
}

.card-account-kpi-report .card-row:nth-child(n+3) {
    padding-top: 0px;
}

.card-kpi-graph {
    width: 100%;
    display: inline-block;
}

.print .card-kpi-block {
    width: 280px;
}

.print .card-kpi-graph {
    width: 100%;
}

.print .card-kpi-graph img {
    width: 100%;
    height: 140px;
}


/*Account Search*/

.account-search {
    float: right;
    margin-bottom: -24px;
    z-index: 1;
}

.account-search label {
    font-size: 14px;
    top: 2px;
}


.left-menu-account-search input[type="text"].has-icon {
    background: #fff;
    border: 1px solid #d3d3d3;
    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
    padding-left: 30px;
    font-size: 14px;
}

.left-menu-account-search input:focus {
    border-bottom-width: 1px;
}

.left-menu-account-search .input-icon {
    left: 20px;
}

.left-menu-account-search .input-icon svg path {
    fill: #B0B0B0;
}

.left-menu-account-search .clear-input-field {
    top: 4px;
    right: 8px;
}

/*  *********************************************************
    User DNA Styles
************************************************************ */

.dna-table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: #333333;
}

.dna-table tr:hover {
    outline: 1px solid #fc8600;
}

.dna-table td {
    background-color: #ececec;
    border: solid 1px #DDDDDD;
    height: 10px;
    width: 5px;
    font-size: .875rem;
}

.dna-username {
    padding: 0px 2px;
}

.dna-table .dna-on {
    background-color: #0d8b9d;
    border-color: #0d8b9d;
}

/* *********************************************************
     Action Plan Templates
*********************************************************** */

.plan-bc-header {
    color: #11b5cc;
}

.plan-bc-header .active-view {
    color: #666;
}

.plan-bc-home {
    position: relative;
    top: 2px;
}

.plan-bc-home svg {
    width: 16px;
    height: 16px;
}

.plan-bc-home path {
    fill: #11b5cc;
}

.active-view .plan-bc-home path {
    fill: #999;
}


.active-view.plan-bc-home path {
    fill: #999;
}

.plan-bc-text {
    margin-right: 4px;
    margin-left: 4px;
}

.plan-bc-separator {
    margin-right: 4px;
    margin-left: 4px;
    color: #999999;
}

.plan-action-text {
    -webkit-transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

.plan-action-text:hover {
    color: #11b5cc;
}

.plan-launch-icon {
    margin-right: 8px;
    display: inline-block;
}

.plan-launch-icon svg {
    width: 12px;
    height: 12px;
}

.plan-launch-icon svg path {
    fill: #47B14B;
}

.plan-launch-text {
    color: #999999;
}

.plan-launch .top-header {
    padding-bottom: 8px;
    border-bottom: 2px solid #dddddd;
    display: block;
}

.plan-launch .account-header {
    padding-top: 20px;
    margin-bottom: 10px;
    display: block;
    color: #333333;
}

.plan-launch .top-header.no-border {
    margin-bottom: 4px;
    border-bottom: none;
    color: #333333;
}

.plan-launch .parent-text {
    padding: 12px 2px;
    border-bottom: 2px solid #dddddd;
}

.plan-launch .parent-text:after {
    content: "";
    display: table;
    clear: both;
}

.plan-launch .parent-text.box {
    border: 2px solid #dddddd;
    padding: 10px;
    font-size: 0.875rem;
    color: #666666;
}


.plan-launch .action-container {
    padding: 10px 0 8px 20px;
    color: #999999;
    border-bottom: 2px solid #dddddd;
}

.plan-launch .action-container.box {
    border-left: 2px solid #dddddd;
    border-right: 2px solid #dddddd;
    border-bottom: none;
}

.plan-launch .action-container.box:last-child {
    border-bottom: 2px solid #ddd;
}

.plan-launch .action-container.box + span {
    border-top: 2px solid #dddddd;
}

.plan-launch .parent-text label {
    padding-top: 0;
    color: #666666;
}

.plan-launch .action-text {
    padding: 10px 2px;
}

.plan-launch .action-text:after {
    content: "";
    display: table;
    clear: both;
}

.plan-launch .action-text.box {
    padding: 6px 8px;
    font-size: 0.875rem;
}

.plan-launch .action-text.box:hover {
    color: #999;
}

.plan-launch .action-text label {
    padding-top: 0;
}

.plan-launch .tasks-container {
    padding: 6px 0 8px 30px;
    color: #999999;
    border-top: 1px solid #dddddd;
}

.plan-launch .tasks-container label {
    font-size: 0.875rem;
}

.plan-launch .tasks-container input[type=checkbox] + label:before {
    height: 16px;
    width: 16px;
    margin-top: -2px;
}

.plan-launch .tasks-text {
    padding: 6px 2px;
}

.plan-launch .tasks-text:after {
    content: "";
    display: table;
    clear: both;
}

.plan-launch .tasks-text.box {
    padding: 4px 10px;
    font-size: 0.75rem;
}

.plan-launch .account-list-container {
    border: 2px solid #dddddd;
    padding-left: 14px;
    color: #999999;
}

.plan-launch .owner-container {
    width: 250px;
}


.step-icon {
    padding: 4px;
}

.step-icon svg {
    width: 10px;
    height: 10px;
}

.step-icon svg path {
    fill: #DDDDDD;
}

.step-icon.on svg path {
    fill: #47B14B;
}

.child-button {
    text-align: right;
    padding: 30px 20px 34px 20px;
}

.child-button:hover {
    background: #DBF4F8;
}

.child-button .icon {
    position: relative;
    top: 2px;
}

.child-button svg path {
    fill: #11b5cc;
}


/*user list*/

.status-block.user-list {
    width: 32%;
}

.status-block.user-list > span {
    max-width: 72%;
}

.status-block.user-list .vert-dropdown {
    float: right;
}

.info__block.user-list {
    max-width: 58%;
}

/*job changes list*/

.info__block.job-changes-list {
    max-width: 48%;
}

.info__block.job-changes-list .title-line {
    width: 130%;
}

.status-block.job-changes-list {
    width: 42%;
    max-width: 42%;
}

.status-block.job-changes-list > .job-changes-info {
    max-width: 30%;
    display: inline-block;
}

.status-block.job-changes-list > .job-changes-options {
    float: right;
    padding-left: 20px;
    width: 65%;
    display: inline-block;
}

.job-changes-options .email-icon {
    position: absolute;
    display: none;
}

.job-changes-options:hover .email-icon {
    display: inline-block;
}

.job-changes-options .email-icon svg {
    width: 16px;
    height: 16px;
    position: relative;
    left: 5px;
}

.job-changes-options .email-icon svg path {
    fill: #666666;
}

.job-changes-options:hover .email-icon:hover svg path {
    fill: #333333;
}


.launch-circle {
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ddd;
    border-radius: 50%;
    left: 25px;
    top: 50%;
    margin-top: -5px;
}

.launch-circle.launched {
    background: #47B14B;
    cursor: pointer;
}


/* *********************************************************
    Account Details Expand Collapse
*********************************************************** */

.card-section-toggle {
    position: relative;
}

.section-collapse-expand:not(li) {
    width: 16px;
    height: 16px;
    background: #fff;
    line-height: 13px;
    text-align: center;
    position: absolute;
    top: 20px;
    left: -8px;
    z-index: 21;
    border: 1px solid #CECECE;
    color: #666;
}

.section-collapse-expand:hover {
    cursor: pointer;
}

.row-expand .section-collapse-expand {
    top: 2px;
}

.row-expand h2 {
    margin-left: 14px;
}


/* /////////////////////////////
    Draggable
/ ////////////////////////////*/

.Grab, .Grab-child, .Grab2, .Grab-child2, .Grab-action, .Grab-task {
    width: 10px;
    float: left;
    cursor: move;
    position: absolute;
    z-index: 2;
    height: 100%;
}

.Grab svg, .Grab-child svg, .Grab2 svg, .Grab-child2 svg, .Grab-action svg, .Grab-task svg {
    height: 30px;
    width: 24px;
    top: 50%;
    position: absolute;
    margin-top: -15px;
}

.Grab svg path, .Grab-child svg path, .Grab2 svg path, .Grab-child2 svg path, .Grab-action svg path, .Grab-task svg path {
    fill: #999;
}


.drag-container {
    display: block;
    float: left;
    width: 100%;
}

.multi-section-drag .drag-container {
    margin-bottom: 5px;
}

.multi-section-drag .drag-container .drag-container {
    margin-bottom: 0px;
}

.opacity50 {
    opacity: 0.6;
    filter: alpha(opacity=60);
    z-index: 4;
}

.dropZoneEmpty {
    background: #ddd;
    border-bottom: 1px solid #fff;
    width: 100%;
    float: left;
    display: block;
    z-index: 0;
}


.drag-container .dropZoneEmpty {
    background: #D2FCEA;
    width: 100%;
    float: right;
}

.drag-container .drag-container .dropZoneEmpty {
    background: #D2FCEA;
    width: calc(100%);
    margin-left: 30px;
}

.drag-container .drag-container .drag-container .dropZoneEmpty {
    background: #D2FCEA;
    width: calc(100%);
    margin-left: 0px;
}

.drag-container .dragDZ {
    display: table;
    width: calc(100% - 30px);
    float: right;
}

.drag-container .drag-container .dragDZ {
    display: table;
    width: calc(100% - 60px);
    float: right;
}

.drag-container .drag-container .drag-container .dragDZ {
    display: table;
    width: calc(100% - 90px);
    float: right;
}

.dragHL {
    background-color: #D2FCEA;
    z-index: 2;
}

.drag-container .dragHL {
    background: #D2FCEA;
}

.dragDZ {
    height: 3px;
    display: block;
    position: relative;
    clear: both;
}

/* ///////////////////////////
    Org Chart
/////////////////////////////*/

.card-print.card-orgchart {
    background-color: #ffffff;
}

.card-orgchart table {
    width: auto;
    margin: 0 auto;
}

.card-print .card-orgchart table {
    position: relative;
    right: 20px;
}

.google-visualization-orgchart-table tr {
    padding: 8px !important;
}

.google-visualization-orgchart-table td {
    padding: 4px 4px 4px 6px !important;
}

.google-visualization-orgchart-table td:first-of-type {
    padding: 4px 8px 4px 16px !important;
}

.card-print .google-visualization-orgchart-table * {
    margin-right: 10px !important;
}

.orchart-item-content {
    padding: 0px !important;
    width: 100%;
    margin-right: 0 !important;
}

.card-preview .org-chart-viewer {
    width: 983px;
    height: 600px;
    overflow-x: scroll;
    overflow-y: scroll;
}

.card-report .orgchart-item {
    width: 180px;
    height: 7em
}


.card.card-orgchart.contacts .boc-search .boc-form-field {
    display: none;
}

.contact-flag.lost-touch {
    background: #f64431;
}

.contact-flag.warning {
    background: #e2a100;
}

.contact-flag {
    position: absolute;
    width: 16px;
    height: 16px;
    right: -8px;
    bottom: -8px;
    transform: rotate(45deg)
}

.contact-flag-legend .warning {
    width: 14px;
    height: 14px;
    background: #e2a100;
    display: inline-block;
}

.contact-flag-dropdown .dropdown-title-link {
    padding-left: 20px;
}

.contact-flag-dropdown .dropdown-title:before {
    content: '';
    width: 14px;
    height: 14px;
    top: 6px;
    position: absolute;
}

.contact-flag-dropdown.warning .dropdown-title:before {
    background: #e2a100;
}

.contact-flag-dropdown.lost-touch .dropdown-title:before {
    background: #f64431;
}


.contact-flag-legend .lost-touch {
    width: 14px;
    height: 14px;
    background: #f64431;
    display: inline-block;
}

.contact-cadence .dropdown-wrap {
    display: inline-block;
    width: 120px;
    top: 14px;
}

.contact-cadence .dropdown-wrap label {
    display: none;
}

.contact-cadence .dropdown-wrap .dropdown-arrow {
    bottom: 16px;
}

.role-cadence-custom {
    padding-top: 6px;
}

.account-cadence-button {
    width: 100px !important;
    height: 35px;
    padding-top: 11px;
}

.org-chart {
    overflow-x: auto;
}

.org-chart.card-report, .card-preview .org-chart {
    overflow-x: visible;
}

.orgchart-item {
    border: 1px solid #e7e9eA;
    background: #f7f9fA;
    min-height: 8em;
    width: 190px;
    padding: 0 !important;
    font-size: 1rem;
    line-height: 1.2em;
    position: relative;
}

.orgchart-item.count3 {
    min-height: 9em;
}

.orgchart-item.count4 {
    min-height: 10em;
}

.orgchart-item.count5 {
    min-height: 12em;
}

.orgchart-item.not-direct {
    height: 8em;
}

.orgchart-item .freshness-circle {
    margin-right: 0 !important;
}

.orgchart-item:before {
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 1.2em;
}

.orgchart-item:hover {
    border-color: #11b5cc;
    transition: .5s ease all;
}

.orgchart-name {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0 !important;
    padding: 4px 0px 4px 30px !important;
    line-height: 1.2em;
    display: block;
    background-color: #dddddd;
    border-bottom: 1px #CCC solid;
    color: #000;
    width: 100%;
}

.orgchart-title {
    font-size: 0.75rem;
    color: #999999;
    margin: 0px 0px 0px 26px !important;
    padding: 4px !important;
    display: block;
    max-height: 3em;
    overflow: hidden;
    position: relative;
    margin-right: -1.25em;
    padding-right: 2.25em;
}

.orgchart-title:before {
    content: '...';
    position: absolute;
    right: 4px;
    bottom: 0;
}

.orgchart-title:after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 1px;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: #f7f9fA;
}

.orgchart-role {
    font-size: 0.75rem;
    color: #333333;
    margin: 0px 0px 0px 26px !important;
    padding: 2px 4px !important;
    display: block;
}

.orgchart-isfriend {
    font-size: 0.75rem;
    margin: 0px 0px 0px 26px !important;
    padding: 2px 4px !important;
    display: block;
    font-weight: bold;
}

.orgchart-internal-contact-heading {
    font-size: 0.7rem;
    color: #999999;
    margin: 0px 0px 0px 26px !important;
    padding: 2px 4px 0px !important;
    display: block;
}

.orgchart-internal-contact {
    font-size: 0.825rem;
    color: #333333;
    margin: 0px 0px 0px 26px !important;
    padding: 0px 4px 2px !important;
    display: block;
}

.orgchart-udf {
    font-size: 0.825rem;
    color: #333333;
    margin: 0px 0px 0px 26px !important;
    padding: 2px 4px !important;
    display: block;
}

.orgchart-na {
    font-size: 0.75rem;
    color: #e2a100;
    margin: 0px 0px 0px 26px !important;
    padding: 2px 4px !important;
    display: block;
}

.orgchart-email {
    font-size: 0.75rem;
    margin: 0px 0px 0px 26px !important;
    padding: 0px 4px !important;
    display: block;
}

.orgchart-email span {
    padding: 0;
}

.orgchart-email .email-icon {
    position: absolute;
    display: none;
}

.orgchart-email:hover .email-icon {
    display: inline-block;
}

.orgchart-email .email-icon svg {
    width: 16px;
    height: 16px;
    position: relative;
    left: -16px;
}


.orgchart-email .email-icon svg path {
    fill: #666666;
}


.orgchart-email:hover .email-icon:hover svg path {
    fill: #333333;
}


.orgchart-account-title {
    background: #576A82;
    padding: 4px 18px !important;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    text-align: center;
}

.orgchart-header {
    background: #576A82;
    padding: 4px 4px !important;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    width: 100%;
    text-align: center;
}

.orgchart-unassigned {
    padding: 4px 4px !important;
    color: #999;
    font-size: 0.75rem;
    text-align: center;
}


.card-report .orgchart-account-title {
    white-space: normal;
    max-height: 34px;
    position: relative;
    padding: 2px 4px;
}

.orgchart-account-title.parent-account {
    background: #323f4f;
}


.org-image {
}

.orgchart-item .org-image {
    z-index: 0;
    position: absolute;
}

.orgchart-item .org-image img {
    height: 36px;
    width: 36px;
    padding: 0 !important;
    margin-right: 0 !important;
    position: relative;
    left: -17px;
    top: -14px;
    text-align: center;
    overflow: hidden;
    border-radius: 20px;
}

.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

.overflow-wrap {
    word-break: break-all;
}

.google-visualization-orgchart-lineleft {
    border-left: 2px solid #bbb !important;
}

.google-visualization-orgchart-lineright {
    border-right: 2px solid #bbb !important;
}

.google-visualization-orgchart-linebottom {
    border-bottom: 2px solid #bbb !important;
}

.google-visualization-orgchart-node {
    border: 0 !important;
    -moz-border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    background-color: #fff !important;
    background: none !important;
}

.contact-mapping .contact-column {
    display: block;
    width: 240px;
    float: left;
}

.contact-mapping .contact-column:after {
    content: "";
    display: table;
    clear: both;
}

.contact-mapping .name-container {
    width: 80%;
    float: left;
}

.contact-mapping .contact-image-container {
    width: 20%;
    float: right;
}

.contact-image {
    float: right;
    width: 30px;
    height: 30px;
    overflow: hidden;
    margin: 0 0 5px 5px;
}

.contact-mapping .meta-text {
    line-height: 1 !important;
}

.contact-mapping .contact-row {
    margin-bottom: 20px;
}

.contact-mapping .contact-row:after {
    content: "";
    display: table;
    clear: both;
}

.contact-mapping .mapping-title {
    font-size: .9em;
    color: #323f4f;
    font-weight: 500;
    font-style: italic;
    border-bottom: 1px solid #999;
}

.contact-mapping .mapping-role {
    font-size: 1em;
    color: #697d96;
    font-weight: 400;
}

.contact-mapping-container {
    display: block;
    margin-left: -17px;
    padding-bottom: 12px;
}

.contact-mapping-content {
    width: 100%;
    padding: 0px !important;
    margin-top: -30px;
    margin-right: 20px;
    min-height: 70px;
    line-height: 1.1em;
}

.card-print .contact-mapping-content {
    margin-top: -25px;
}

.contact-mapping .contact-mapping-column {
    display: block;
    width: 240px;
    float: left;
    padding-left: 20px;
    padding-right: 10px;
}

.contact-mapping .contact-mapping-column:after {
    content: "";
    display: table;
    clear: both;
}

.contact-mapping-body {
    padding-top: 5px;
    padding-bottom: 10px;
    font-size: 0.75rem;
}

.contact-mapping-body-left {
    padding-left: 32px;
}

.contact-mapping-item {
    padding: 0 !important;
    font-size: 1rem;
    line-height: 1.2em;
    position: relative;
}

.contact-mapping-item:before {
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 1.0em;
}

.contact-mapping .internal-contact {
    background: #576a82;
    color: #fff;
    padding: 10px;
    margin-right: 20px;
    min-height: 70px;
    line-height: 1.1em;
    width: 93%;
    margin-left: 17px;
}

.contact-mapping .internal-contact.no-assoc {
    background: #ff9e30;
    width: 100%;
    margin-left: 0px;
    margin-bottom: 10px;
    margin-top: 11px;
}

.contact-mapping .external-contact {
    background: #eee;
    outline: 1px solid #ddd;
    position: relative;
    line-height: 1.1em;
    margin-left: 17px;
}

.contact-mapping .external-contact:before {
    content: "";
    width: 10px;
    height: 9px;
    position: absolute;
    border-left: 2px solid #999;
    top: -15px;
    left: 105px;
    bottom: -5px;
}

.contact-mapping-image {
}

.contact-mapping-item .contact-mapping-image {
    position: absolute;
}

.contact-mapping .contact-mapping-image img {
    height: 36px;
    width: 36px;
    padding: 0 !important;
    margin-right: 0 !important;
    position: relative;
    text-align: center;
    overflow: hidden;
    border-radius: 20px;
    z-index: 9999;
}

.contact-mapping-name {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0 !important;
    padding: 4px 0px 4px 30px !important;
    line-height: 1.2em;
    display: block;
    background-color: #dddddd;
    border-bottom: 1px #CCC solid;
    color: #000;
    width: 100%;
}

.contact-mapping-name.internal-contact-header {
    background-color: #485a70;
    color: #fff;
}

.contact-mapping-title {
    color: #999999;
}

.freshness-circle {
    position: absolute;
    display: inline-block;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    bottom: 5px;
    right: 5px;
}

.freshness-circle.red {
    background: #f64431;
}

.freshness-circle.orange {
    background: #e2a100;
}

.legend-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    display: inline-block;
}

.legend-circle.red {
    background: #f64431;
}

.legend-circle.orange {
    background: #e2a100;
}

.legend-circle.green {
    background: #47b14b;
}

.contact-mapping-header h2 {
    width: 33.33%;
    float: left;
}

.contact-mapping-header .contact-mapping-legend {
    width: 66.67%;
    float: right;
}


.contact-mapping-header:after, .contact-flag-legend:after {
    content: "";
    display: table;
    clear: both;
    margin-bottom: 20px;
}

.card-report .contact-flag-legend {
    width: 500px;
}

.legend-box {
    display: inline-block;
    width: 30px;
    height: 16px;
    margin-right: 4px;
}

.legend-box.internal {
    background: #576a82;
}

.legend-box.child-account {
    background: #6a819e;
}

.legend-box.parent-account {
    background: #323f4f;
}

.legend-box.external-account {
    background: #576a82;
}

.legend-box.external {
    background: #eee;
    border: 1px solid #ddd;
}

.legend-graph {
    display: inline-block;
    width: 60px;
    height: 16px;
    margin-right: 4px;
    color: #fff;
    font-size: .85em;
    padding-left: 4px;
}

.legend-graph.power {
    background: #7B80C7;
}

.legend-graph.influence {
    background: #37B157;
}

.legend-graph.friendfoe {
    background: #6AA3C0;
}

.card-report .profile-image img.circled.small {
    border-radius: 0;
}

.block-4.active-users:nth-child(even) {
    background-color: #efefef;
}

.active-users .user-name {
    width: 30%;
    display: inline-block;
}

.action-plan-section-options {
    float: right;
}

.action-plan-section-options ul li {
    margin-bottom: 0;
}

.action-plan-section-options ul li .account-actions {
    margin-top: 2px;
}

.reorder-levels {
    display: inline-block;
    font-size: 0.75rem;
    color: #999999;
    position: relative;
    top: 14px;
}

.drag-level-3 .reorder-level-basic, .drag-level-2 .reorder-level-basic {
    display: none;
}

.reorder-level-basic {
    top: 5px;
    padding-right: 10px;
}

.report-pack-add {
    cursor: pointer;
    color: #11b5cc;
    margin-left: 8px;
    display: inline-block;
}

.report-pack-icon {
    position: relative;
    top: 4px;
}

.edit-report-pack {
    margin-top: 16px;
    font-size: 0.875rem;
    color: #11b5cc;
    display: inline-block;
}

.edit-report-pack:hover {
    color: #0d8b9d;
}

.edit-report-pack:hover svg path {
    fill: #0d8b9d;
}

.edit-report-pack svg {
    margin-right: 4px;
}

.edit-report-pack svg path {
    fill: #11b5cc;
}

.pick-list-container {
    width: 100%;
    height: 400px;
    overflow-y: auto;
    border: 1px #b0b0b0 solid;
    background: #f8f8f8;
}

.picker-list {
    position: relative;
}

.picker-list li {
    list-style: none;
    border-bottom: 1px #e0e0e0 solid;
    padding: 5px 20px 5px 5px;
    font-size: 0.875rem;
    margin: 0px 0px;
    color: #666;
}

.picker-list .report-outputs {
    font-size: 0.75rem;
    color: #999;
}


.picker-list li:hover {
    background-color: rgba(17, 181, 204, 0.13);
    cursor: pointer;
}

.picker-list li:after {
    content: "+";
    position: absolute;
    opacity: 0;
    right: 5px;
    color: #47b14b;
    margin-top: -32px;
}

.picker-list.top-list li:after {
    content: "-";
    color: #f64431;
    font-size: 20px;
}

.picker-list li:hover:after {
    opacity: 1;
    transition: all .3s ease;
}

.picker-message-light {
    text-align: center;
    font-size: 0.875rem;
    color: #666;
    margin-top: 30px;
}

.picker-message-light-2 {
    text-align: left;
    font-size: 0.875rem;
    color: #666;
    margin-top: 30px;
}


.picker-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #333333;
    margin-bottom: 5px;
}



/************Timeline Styles*************/



#sidebar-timeline-container {
    left: calc(100% + 40px);
    position: absolute;
    width: 350px;
    margin-top: 192px;
}

@media(min-width: 1420px) {
    #sidebar-timeline-container {
        left: calc(100% + 30px);
        position: absolute;
        width: 340px;
    }
}

@media(min-width: 1520px) {
    #sidebar-timeline-container {
        right: -380px;
        position: absolute;
        width: 360px;
    }
}

@media(min-width: 1720px) {
    #sidebar-timeline-container {
        right: calc(-240px - 100%);
        position: absolute;
        width: 400px;
    }
}

#sidebar-timeline-container.account-list {
    margin-top: 130px;
}

#sidebar-timeline-container.account-details {
    margin-top: 14px;
}

@media (min-width: 1440px) {
    #sidebar-timeline-container.account-details {
        margin-top: 9px;
    }
}

#sidebar-timeline-container.team-dashboard {
    margin-top: 10px;
}

.timeline.card {
    width: calc(100% - 40px);
    float: right;
}

.timeline-activity-container .card:before {
    content: "";
    border-left: 2px solid #ddd;
    position: absolute;
    height: calc(100% + 20px);
    left: -28px;
    bottom: -20px;
}

.timeline-activity-container .card.single:before {
    height: 100%;
}

.timeline-activity-container .block-4:last-child .card:before {
    bottom: 0;
}

.timeline-date-container {
    width: 40px;
    float: left;
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: 600;
    top: 14px;
}


.timeline-activity-container .month {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    position: relative;
    z-index: 2;
    background: #FAFAFA;
    width: 30px;
    margin-bottom: -14px;
}


.timeline-date-container .timeline-date {
    width: 26px;
    height: 26px;
    text-align: center;
    background: #fafafa;
    border: 2px solid #fafafa;
    border-radius: 50%;
    line-height: 23px;
    color: #666;
}


.timeline-header {
    color: #333;
    font-size: 16px;
    display: inline-block;
}

.timeline-subhead {
    color: #596A83;
    font-size: 14px;
}

.timeline-subhead svg {
    margin-right: 10px;
}


.timeline-subhead .timeline-icon svg {
    width: 18px;
    height: 18px;
    top: 2px;
}

.timeline-title {
    color: #596A83;
    font-size: 13px;
}

.activity-container li {
    list-style: none;
    margin-left: 8px;
}

.sidebar-header {
    display: inline-block;
    color: #333;
    -webkit-transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

.sidebar-header svg {
    width: 16px;
    height: 16px;
    margin-left: 4px;
    margin-right: 18px;
    top: 3px;
    position: relative;
}

.sidebar-header:not(.no-fill) svg path {
    fill: #333;
    -webkit-transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

.timeline-date-container .timeline-date.today {
    border: 2px solid #ddd;
    background: #fff;
    color: #11b5cc;
}


.timeline-icon {
    width: 20px;
}

.timeline-pointer {
    width: 24px;
    height: 24px;
    position: absolute;
    overflow: hidden;
    transform: rotate(270deg);
    left: -24px;
    z-index: 110;
    top: 18px;
}

.timeline-pointer:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    top: 18px;
    left: 8px;
    box-shadow: 0px 1px 2px 2px rgba(0,0,0,.2);
}

.card.timeline ul {
    margin-bottom: 20px;
    font-size: 12px;
    padding-left: 24px;
    color: #666;
}

.card.timeline ul li:hover, .card.timeline ul li:hover .text-light-grey {
    color: #11b5cc !important;
}

.card.timeline ul li span {
    color: #999;
}

.card.timeline ul li span.doc-name {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card.timeline ul:last-of-type {
    margin-bottom: 0;
}

#sidebar-timeline-container #shadow {
    position: absolute;
    background: #FAFAFA;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .3s ease-out;
}

#sidebar-timeline-container #shadow.fade {
    z-index: 200;
    opacity: .6;
    transition: opacity .3s ease-in;
}

.hide-show-toggle {
    -webkit-transition: height 680ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: height 680ms cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden;
}

.hide-some {
    height: 330px;
    -webkit-transition: height 680ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: height 680ms cubic-bezier(0.77, 0, 0.175, 1);
}

.text-note.hide-some, .text-opportunity.hide-some {
    max-height: 160px;
}



.hide-some:after {
    content: '';
    position: absolute;
    height: 40px;
    width: 100%;
    z-index: 110;
    bottom: 10px;
    left: 0;
    -webkit-box-shadow: inset 0 -20px 20px #fff;
    -moz-box-shadow: inset 0 -20px 15px #fff;
    box-shadow: inset 0 -20px 15px #fff;
}

.text-note.hide-some:after {
    bottom: 20px;
}

.text-opportunity.hide-some:after {
    bottom: 16px;
}

.hide-less {
    height: auto;
}

.upper-hide-show {
    position: absolute;
    font-size: 20px;
    margin-left: 12px;
    margin-top: 15px;
    z-index: 2;
}

@media (max-width: 1060px) {
    .upper-hide-show {
        margin-left: 8px;
    }
}

.upper-hide-show > a {
    font-family: monospace;
    font-weight: 600;
}

.upper-hide-show.hide-items {
    transform: rotate(90deg);
}

/************Contributors Section on Account Details*************/

.img-row {
    position: relative;
    clear: both;
    margin-bottom: 10px;
}

.img-row:last-child {
    margin-bottom: 0;
}

.img-row:after {
    content: "";
    display: table;
    clear: both;
}

.img-row .profile-image {
    width: 36px;
    height: 32px;
    float: left;
}

.img-row .profile-image img {
    width: 26px;
}

.img-row .content-section {
    width: calc(100% - 36px);
    float: right;
}

.img-row .person-check {
    display: inline-block;
    margin-right: 4px;
    float: left;
}

.hidden.list-remainder {
    display: none;
}

.account-contributors {
    position: relative;
    z-index: 1;
}

.account-action-plan-help {
    position: relative;
    z-index: 1;
}

.card.account-action-plan-section {
    background-color: transparent;
    display: block;
    overflow: auto;
}

.account-action-plan-help .sidebar-header {
    width: 100%;
}

.account-action-plan-help .sidebar-header.sidebar-expanded {
    padding-bottom: 8px;
    border-bottom: 1px solid #DDDDDD;
}

.account-action-plan-help .sidebar-header svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    margin-bottom: 8px;
    top: 4px;
}

.account-action-plan-help .sidebar-header path {
    fill: #666666;
}

.account-notes-help .sidebar-header {
    padding-bottom: 8px;
    border-bottom: 1px solid #DDDDDD;
    width: 100%;
}

.account-notes-help .sidebar-header svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    top: 4px;
}


.account-action-plan-help li {
    list-style: none;
    font-size: 0.875rem;
    margin-left: 8px;
}

.person-check-all {
    position: relative;
    top: -20px;
    left: 20px;
    margin-bottom: 4px;
    padding-bottom: 4px;
}

li.person-profile {
    list-style: none;
    display: inline-block;
    width: 45%;
}

li.person-profile .img-row, li.person-profile .img-row .person-check {
    display: inline-block;
    top: -8px;
    position: relative;
}

li.person-profile .img-row .person-check label {
    padding-right: 0px;
}

li.person-profile .img-row .content-section {
    display: inline-block;
    width: calc(100% - 80px);
    white-space: nowrap;
}

.contributor-card {
    padding: 10px;
}

.contributor-card li.dropit-trigger a .arrow {
    margin-left: 4px;
    margin-right: 0px;
    top: -3px;
}

.contributor-card li.dropit-trigger a .arrow svg {
    width: 8px;
}

.contributor-card .full-name {
    width: calc(100% - 136px);
    display: inline-block;
}

.contributor-card .role-name {
    width: 136px;
    display: inline-block;
    text-align: right;
    vertical-align: top;
}

.contributor-role-dropdown {
    margin-top: -4px;
}

.contributor-card .dropit .dd-text {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 114px;
    display: inline-block;
}

.account-details .account-contributors .dropit a {
    font-size: 12px;
    font-weight: normal;
    color: #666;
}

#AccountModalEdit .contributor-role-dropdown .dropit a {
    font-size: 14px;
    font-weight: normal;
    color: #666;
}

#AccountModalEdit .ql-editor, #AccountModalSelect .ql-editor {
    min-height: 125px;
    max-height: 300px;
}

.account-contributor-section li.multi-select-item:hover .delete svg path {
    fill: #B0B0B0;
}

.account-contributor-section li.multi-select-item .delete:hover svg path {
    fill: #f64431;
}


/***************  Quill CSS Overrides *****************/
.ql-toolbar button {
    box-shadow: none;
}

.ql-snow .ql-stroke {
    stroke: #666;
}

.ql-editor {
    min-height: 200px;
    max-height: 300px;
}

.quick-note .ql-editor {
    min-height: 100px;
    max-height: 250px;
}

.quick-note .ql-toolbar.ql-snow {
    padding: 2px;
}

.quick-note .note-voice-icon {
    padding: 6px 4px 0 0;
}

.quick-note .note-voice-icon svg {
    width: 18px;
    height: 18px;
}

.no-maxheight .ql-editor {
    max-height: none;
}


.ql-error {
    border: 2px solid #f64431 !important;
}

/* ***************************
    Setting -> Metrics
*/

span.rule-icon img {
    height: 16px;
    position: relative;
    top: 2px;
}

.metric-range.none {
    display: none;
}

.metric-range.ryg {
    display: inline;
}

.metric-range-item {
    width: 16.66%;
    height: 32px;
    display: inline-block;
}

.metric-range-marker {
    display: inline-block;
    position: absolute;
    width: 4px;
    height: 50px;
    background-color: #333333;
    top: 12px;
}

.rb .metric-range-marker.lower, .rb .metric-range-marker.upper {
    display: none;
}

.ryg .metric-range-marker.middle {
    display: none;
}

.none .metric-advanced, .SG .metric-advanced {
    display: none;
}



.metric-point {
    display: inline-block;
    width: 140px;
}

.metric-point.rt {
    width: 33.33%;
}

.metric-start {
    margin-left: 10px;
    display: inline-block;
}

.metric-threshold {
    display: inline-block;
    margin-left: 20px;
    width: 430px;
}

.metric-point-lower {
    display: inline-block;
    margin-left: 20px;
}

.metric-point-lower div.p {
    margin-left: 24px;
}

.metric-point-middle {
    display: inline-block;
    margin-left: 140px;
}

.metric-point-middle div.p {
    margin-left: 30px;
}

.metric-point-upper {
    display: inline-block;
    float: right;
    margin-right: 20px;
}

.metric-point-upper div.p {
    width: 114px;
}

.none .metric-point-lower, .none .metric-point-middle, .none .metric-point-upper {
    display: none;
}

.Auto .metric-threshold .metric-point:not(.value-text) {
    display: none;
}

.Manual .metric-threshold .metric-point.value-text {
    display: none;
}


.Dual .metric-point-lower, .Dual .metric-point-upper {
    display: none;
}

.Tri .metric-point-middle {
    display: none;
}

.metric-point.value-text {
    white-space: normal;
    text-align: center;
}

.metric-point.value-text .value-item {
    width: 100%;
    white-space: normal;
    font-size: 0.75rem;
}

.metric-point.value-text .value-label {
    display: block;
    margin-left: 0px;
    margin-bottom: 2px;
    color: #999999;
    position: absolute;
    text-align: center;
    top: 3px;
    width: 140px;
}

.metric-target {
    float: right;
    margin-right: 10px;
    display: inline-block;
}

.metric-target .metric-point.p > label, .metric-target .metric-point.p > input {
    margin-left: 55px;
}

.metric-input-section.N .metric-point.c, .metric-input-section.N .metric-point.p, .metric-input-section.N .metric-point.rt, .metric-input-section.standard.SG.sg-n .metric-point.c, .metric-input-section.standard.SG.sg-p .metric-point.c {
    display: none;
}

.metric-input-section.C .metric-point.n, .metric-input-section.C .metric-point.p, .metric-input-section.C .metric-point.rt, .metric-input-section.standard.SG.sg-c .metric-point.n, .metric-input-section.standard.SG.sg-p .metric-point.n {
    display: none;
}

.metric-input-section.P .metric-point.n, .metric-input-section.P .metric-point.c, .metric-input-section.P .metric-point.rt, .metric-input-section.standard.SG .metric-point.rt {
    display: none;
}

.metric-input-section.RT .metric-point.n, .metric-input-section.RT .metric-point.c, .metric-input-section.RT .metric-point.p, .metric-input-section.standard.SG:not(.sg-p) .metric-point.p {
    display: none;
}

.card.RT .metric-advanced, .card.RT .metric-range, .card.RT .metric-threshold {
    display: none;
}

.metric-input-section.standard.SG {
    /*  display: none; */
}

.metric-input-section.generated {
    display: none;
}

.metric-input-section.generated.SG {
    display: block;
}

.card.RT .metric-not-for-rangetype, .CNTEX .metric-not-for-rangetype {
    visibility: hidden;
    display: none;
}

.card.RT .metric-none-for-rangetype, .CNTEX .metric-none-for-rangetype {
    display: none;
}

.CRTVC .period-options, .CRTVL .period-options, .CRTVL .period-options, .OV .period-options, .OFV .period-options, .TCUR .period-options, .TLT .period-options, .APACNT .period-options,
.APCNT .period-options, .APC .period-options, .APL .period-options, .CNTEX .period-options, .QR .period-options {
    display: none;
}

.metric-note-options {
    padding: 30px 0px;
    clear: both;
    display: none;
}

.NON .metric-note-options {
    display: block;
}

.metric-action-plan-options {
    display: none;
}

.APC .metric-action-plan-options {
    display: block;
}

.metric-qbr-rating-options {
    display: none;
}

.QR .metric-qbr-rating-options {
    display: block;
}

.metric-qbr-count-options {
    display: none;
}

.QC .metric-qbr-count-options {
    display: block;
}

.ql-snow .ql-editor h2, .ql-snow .ql-editor h3, .ql-snow .ql-editor p {
    margin-bottom: 10px;
}

.metric-contract-expiring {
    display: none;
}

.CNTEX .metric-input-section .metric-point {
    display: none;
}

.CNTEX .metric-contract-expiring, .CNTEX .metric-label .metric-point {
    display: block !important;
}

/***** metric styles ****/

#chart-container {
    position: relative;
}

.account-metric-card {
    min-height: 267px;
}

@media (min-width: 1520px) {
    .account-metric-card {
        min-height: 232px;
    }
}

@media (min-width: 1660px) {
    .account-metric-card {
        min-height: 232px;
    }
}



.metric-excel-download {
    margin-right: 12px;
    position: relative;
}

.chart-overlay {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    left: 50%;
    margin-left: -20px;
    text-align: center;
    line-height: 40px;
    color: #11b5cc;
    font-size: 14px;
}

.metrics .high-chart {
    width: 100px;
    height: 100px;
    float: right;
    position: relative;
}

.metrics .donut-list {
    width: calc(100% - 100px);
    float: left;
}

.metrics .donut-list.neutral {
    width: 100%;
    margin-top: 10px;
}

.metrics .donut-list.neutral div {
    display: inline;
}

.metrics .donut-list.neutral div.text-dark-grey {
    margin-left: 10px;
}

.metrics .donut-list.full-size {
    display: none;
}

.metrics .donut-list.responsive {
    width: 50%;
    display: block;
    padding-top: 20px;
    position: relative;
}

.donut-list.responsive .metric-title-small {
    position: absolute;
    top: 0;
    white-space: nowrap;
}

.metrics .high-chart {
    width: 100%;
}

.metrics .high-chart .highcharts-container {
    margin: 0 auto;
}

.account-metric-card .metric-name:first-line {
    text-indent: 0;
}

@media (min-width: 1520px) {
    .metrics .donut-list.responsive {
        display: none;
    }

    .metrics .donut-list.full-size {
        display: block;
    }

    .metrics .donut-list.neutral {
        width: calc(100% - 100px);
    }

    .metrics .donut-list.neutral div.text-dark-grey {
        margin-left: 0px;
    }

    .metrics .donut-list.neutral div {
        display: block;
    }

    .metrics .high-chart {
        width: 100px;
        margin-right: -10px;
    }
}

.metric-dropdown {
    margin-top: 8px;
    display: inline-block;
}

.metric-dropdown span {
    display: inline-block;
    line-height: 18px;
}

ul.donut-list {
    list-style: none;
    font-size: 14px;
    color: #666;
}

ul.donut-list.neutral {
    color: #999;
}

.metrics ul.donut-list li {
    margin-left: 0;
    margin-bottom: 4px;
}

.metrics ul.donut-list:not(.neutral) li:hover {
    color: #11b5cc;
    cursor: pointer;
    transition: .3s all;
}

ul.donut-list li span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
    margin-bottom: 1px;
}

/**     Red Yellow Green     **/
.metric-color-RYG li:nth-child(1) span {
    background: #00a313;
}

.metric-color-RYG li:nth-child(2) span {
    background: #00ba4d;
}

.metric-color-RYG li:nth-child(3) span {
    background: #ff9a00;
}

.metric-color-RYG li:nth-child(4) span {
    background: #ff7e00;
}

.metric-color-RYG li:nth-child(5) span {
    background: #d73d3d;
}

.metric-color-RYG li:nth-child(6) span {
    background: #e3001e;
}


/**     Blue to Red    **/
.metric-color-BR li:nth-child(1) span {
    background: #048be5;
}

.metric-color-BR li:nth-child(2) span {
    background: #3ca8ef;
}

.metric-color-BR li:nth-child(3) span {
    background: #92d1fb;
}

.metric-color-BR li:nth-child(4) span {
    background: #e69494;
}

.metric-color-BR li:nth-child(5) span {
    background: #d75656;
}

.metric-color-BR li:nth-child(6) span {
    background: #bb2626;
}


.auto-search-container {
    position: relative;
}

.auto-search-container .input-icon {
    left: 0px;
}

.auto-search-container.note-search {
    position: relative;
    margin-right: 20px;
    min-width: 280px;
}

.auto-search-container.note-search .input-icon {
    left: 0px;
    top: 2px;
}

.auto-search-container.note-search label {
    padding-top: 5px;
}

.auto-search-container.note-search .clear-input-field {
    top: 1px;
}

.metric-header {
    min-height: 42px;
    display: block;
    float: left;
}

.card-import .opportunity-detail {
    position: relative;
    top: -5px;
}

.card-import .opportunity-detail .name {
    font-size: 20px;
}

.card-import .opportunity-detail .amount {
    color: #333333;
    font-weight: 500;
}

.card-import .opportunity-detail .title {
    color: #666666;
}

.card-import .opportunity-detail .property-title {
    font-size: 0.75rem;
    color: #666666;
    font-weight: 500;
}



.opportunity-stage-bar {
    background-color: #DDDDDD;
    width: 100%;
    height: 1.25rem;
}

.opp-stage {
    background-color: #ddd;
    border-radius: 4px;
    height: 8px;
    display: inline-block;
    margin: 0px 4px;
}

.opp-bar {
    margin-left: -4px;
    margin-top: -8px;
}

.opp-stage.active {
    background-color: #47b14b
}

.opp-stage-edit .dropdown-title-link span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 210px;
}

.opp-stage-closed-won {
    width: 155px;
}

.opp-stage-reopen {
    width: 70px !important;
    height: 25px;
    padding-top: 5px;
    padding-left: 8px;
    margin-top: 2px;
}

.empty-contract-doclist {
    position: relative;
    top: -20px;
}

.manager-view .opportunity-stage-bar {
    background-color: #ccc;
    height: 1rem;
}

.manager-view .opportunity-stage-bar.active {
    height: 1rem;
}

.opportunity-stage-bar.active {
    background-color: #7cb5ec;
    height: 1.25rem;
}

.report-section .opportunity-stage-bar.active, .report-section .opportunity-stage-bar {
    height: 1.125rem;
}

.opportunity-stage-bar.value {
    background-color: #666666;
    color: #ffffff;
    height: 1.25rem;
    position: relative;
    top: -40px;
    padding: 4px 8px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    font-size: 0.875rem;
}

@media (min-width: 1460px) {
    .opportunity-stage-bar.value {
        font-size: 1rem;
    }
}

.opp-pipe .opportunity-stage-bar {
    height: 0.875rem;
}

.opp-pipe .opportunity-stage-bar.active {
    height: 0.875rem;
}

.dashboard-block {
    display: flex;
}

.dashboard-content {
    background: #eee;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.dashboard-content.top {
    justify-content: flex-start;
}

.dashboard-content .icon-small {
    display: flex;
    align-self: flex-end;
    width: 20px;
}

.dashboard-content .icon-small.green svg path {
    fill: #47b14b;
}

.dashboard-content .pie-chart {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
}


.dashboard-block h4 {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.dashboard-block section {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
}

.dz-message span {
    font-size: 1.5rem;
    color: #999999;
}

.count-visual {
    height: 16px;
    background: #576a82;
}

.count-visual.background {
    background: #ccc;
}

.dashboard-block .count-visual {
    height: 10px;
    background: #576a82;
    margin-top: 2px;
}

.dashboard-block .count-visual.background {
    background: #ccc;
}

.dashboard-block .count-visual-container {
    padding-right: 50px;
}


.dashboard-block .count-visual-container.less-space {
    padding-right: 36px;
}

.dashboard-block .count-visual-container span {
    position: absolute;
    right: 0;
    width: 40px;
    top: 0;
    text-align: left;
}

.dashboard-table table th {
    color: #999;
    font-size: 14px;
    font-weight: 400;
    padding: 4px
}

.dashboard-table table th:first-child {
    color: #666;
    font-size: 14px;
    font-weight: 600;
}

.dashboard-table table td {
    color: #666;
    font-size: 14px;
    padding: 4px;
}

.account-type {
    width: 16px;
    height: 16px;
    top: 2px;
    position: relative;
}

.account-type svg {
    width: 16px;
    height: 16px;
}

.strategic svg, .strategic svg path {
    fill: #fc8600;
}

.flagged svg path {
    fill: #bb2626;
}

/******* Paginate *******/

.paginate svg g {
    fill: #333;
}

.paginate svg {
    width: 10px;
    height: 10px;
}

.paginate .disable svg g {
    fill: #999;
}

.paginate .disable:hover {
    cursor: default;
}

.paginate .paginate-button:not(.disable):hover svg g {
    fill: #11b5cc;
    transition: all .3s;
}

.paginate {
    display: inline-flex;
    align-content: center;
    justify-content: center;
    color: #666;
    font-size: 12px;
}

.paginate .paginate-button {
    display: inline-flex;
    width: 20px;
    height: 20px;
    justify-content: space-around;
    align-items: center;
    border: 1px solid #ddd;
    background: #fff;
    margin-right: 4px;
    border-radius: 2px;
    cursor: pointer;
}

.paginate .active {
    align-self: center;
    margin-right: 4px;
    padding: 0 6px;
}

.paginate-overview {
    align-self: center;
    margin-left: 4px;
}


#loading-icon .inner-loading {
    display: flex;
    justify-content: center;
    align-content: center;
}


/******* Swimlanes *******/

.plan-completion {
    height: 10px;
    background: #d0d0d0;
    flex-grow: 1;
    position: relative;
}

.plan-completion.goal {
    position: absolute;
}

.plan-completion .plan-percentage {
    position: absolute;
    height: 100%;
    top: 0;
    background: #576a82;
}

.plan-completion .plan-percentage.card-good, .plan-completion.goal .plan-percentage.complete {
    background: #47b14b;
}

.plan-completion .plan-percentage.card-alert {
    background: #e2a100;
}

.plan-completion .plan-percentage.card-bad {
    background: #f64431;
}


.goal-percent-text {
    position: absolute;
    right: -32px;
    top: -5px;
}

.complete.goal-percent-text {
    right: -24px;
}

.border-left-swimlane:before {
    content: '';
    width: 1px;
    background: #ddd;
    position: absolute;
    height: calc(100% + 40px);
    margin-top: -20px;
}

.border-right-swimlane:after {
    content: '';
    width: 1px;
    right: 20px;
    background: #ddd;
    position: absolute;
    height: calc(100% + 40px);
    margin-top: -20px;
}

.report-swimlane-border.right {
    width: 1px;
    height: 100%;
    background: #ddd;
    position: absolute;
    right: 40px;
    top: 0;
    z-index: 10;
}

.report-swimlane-border.left {
    width: 1px;
    height: 100%;
    background: #ddd;
    position: absolute;
    right: 66.6666%;
    top: 0;
    z-index: 10;
}

.today-line {
    position: absolute;
    height: calc(100% - 76px);
    margin-top: 76px;
    border-left: 1px dashed #ddd;
    left: -14px;
}

.card-report .today-line {
    left: -20px;
}


.card-preview .today-line {
    left: 0px;
}

.today-line:before {
    content: 'today';
    font-size: 10px;
    text-transform: uppercase;
    position: absolute;
    top: -18px;
    margin-left: -15px;
    color: #666;
}

.card-report .today-line:before {
    top: -30px;
    font-size: 8px;
}

.card-report.card-preview .today-line:before {
    top: -26px;
    font-size: 10px;
}

.timeline-action-container {
    min-height: 24px;
}

.swimlane-edit {
    cursor: pointer;
    margin-left: 10px;
    display: none;
    position: absolute;
}

.swimlane-action:hover .swimlane-edit {
    display: inline-block;
}

.swimlane-edit .edit-icon svg {
    width: 12px;
    height: 12px;
}

.swimlane-edit .edit-icon svg path {
    fill: #11b5cc;
}


.swimlane-add {
    display: inline-block;
    cursor: pointer;
    margin-left: 8px;
}

.swimlane-add .edit-icon svg {
    width: 14px;
    height: 14px;
    position: relative;
    top: 3px;
}

.swimlane-add .edit-icon svg path {
    fill: #11b5cc;
}

.swimlane-add:hover .edit-icon svg path {
    fill: #0d8b9d;
}

.swimlane-goal-action {
    font-size: 0.75rem;
    color: #999;
    margin-left: 4px;
    padding-top: 6px;
}

.swimlane-goal-edit {
    color: #999999;
    font-size: .75rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.swimlane-goal-edit:hover .swimlane-edit {
    display: inline-block;
}

.swimlane-goal-edit:hover .swimlane-edit .edit-icon {
    position: relative;
    left: -32px;
    padding: 6px 8px 14px 4px;
    top: 2px;
}

.swimlane-goal-edit:hover .swimlane-edit .edit-icon:hover {
    display: inline-block;
    top: -4px;
}

.report-section > .block-4 {
    overflow: hidden;
}

.report-section .today-line.top {
    height: 3000px;
    margin-top: -10px;
    top: 0px;
}

.today-line.top {
    height: calc(100% + 20px);
    margin-top: 10px;
    top: -20px;
}

.today-line.top:before {
    content: 'today';
    font-size: 10px;
    text-transform: uppercase;
    position: absolute;
    top: -15px;
    margin-left: -15px;
    color: #666;
}

.month {
    font-size: 12px;
    color: #999;
    z-index: 1;
}

.report-section .month {
    float: left;
}

.month:last-child {
    width: 0 !important;
}

li.feature-list {
    list-style: none;
    margin-left: 0px;
    border-bottom: 1px solid #999999;
    padding-bottom: 8px;
}

li.feature-list > span:first-of-type {
    display: block;
    font-size: .875rem;
    font-weight: bold;
    margin-top: 8px;
}


li.feature-list > span:not(:first-of-type) {
    display: block;
    color: #999999;
    font-size: .875rem;
}

.card-row.feature {
    display: flex;
    flex-wrap: wrap;
    padding-top: 0;
}

.feature-item {
    display: flex;
    min-height: 48px;
}

.feature-item.drop-down {
    margin-left: 64px;
}

.feature h3 {
    margin-bottom: 4px;
    margin-top: 10px;
}

.feature-switch {
    margin-top: 8px;
    margin-bottom: 4px;
    padding-right: 20px;
}

.feature-item label {
    margin-left: 8px;
    position: relative;
    top: -2px;
}

.feature-icon {
    margin-top: 8px;
    margin-bottom: 4px;
    padding-right: 30px;
}

.feature-icon svg {
    width: 32px;
    height: 32px;
    margin: 0 4px;
}

.feature-icon svg path {
    fill: #576a82;
}

.feature-dropdown {
    width: calc(100% - 40px);
    margin-left: 37px;
    margin-bottom: 16px;
}

.feature-dropdown .dropdown-title-link {
    font-size: 0.875rem;
}

.feature-label {
    margin-top: 4px;
    margin-bottom: 4px;
}

.feature-label .feature-description {
    display: block;
    color: #999999;
    font-size: 0.875rem;
}

.feature-users {
    width: 30%;
    margin-top: 20px;
}


.activity-hbar-bottom {
    width: calc(100% - 40px);
    height: 20px;
    background-color: #DDDDDD;
}

.activity-hbar-top {
    height: 20px;
    background-color: #323F4F;
}

.activity-hbar-item {
    position: relative;
    float: right;
    top: -20px;
}


.report-section .value-change-text {
    display: block;
}

.report-section .value-change-text svg {
    margin-right: 4px;
    position: relative;
    top: -1px;
}

.report-section .account-logo img {
    width: 28px;
}

.card-report.portfolio-value .account-name {
    font-size: 18px;
    margin-top: 2px;
    display: inline-block;
}

.card-report.portfolio-value .account-archived {
    top: 0px;
    display: inline-block;
}

/*********************************
Modals
**********************************/
.ui-widget-overlay {
    overflow: hidden;
    background-color: #000000;
    opacity: 0.8;
    -moz-opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 910;
}

.ui-dialog-titlebar {
    position: relative;
    height: 10px;
    top: 10px;
    z-index: 5;
}

.ui-dialog-titlebar-close {
    display: none;
}

.row-modal .text-notification {
    color: #47b14b;
    margin-left: 1rem;
}

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

.ui-draggable-handle {
    cursor: pointer;
}

#modal-launch {
    position: absolute;
    top: 0;
    left: 0;
}

.row-modal {
    margin: 0px;
}

.info-modal {
    font-size: 20px;
    line-height: 1.5rem;
}

.right-sidebar .max-modal-body {
    overflow: initial;
}

.right-sidebar .max-modal-body .card-row {
    padding: 10px 20px 0;
}

.card-preview {
    font-size: 14px;
}

.modal-report {
    padding: 0.25rem 3rem 0.25rem 3rem;
    margin: 0;
}

.modal-report:nth-of-type(1) {
    padding: 1rem 3rem 0 3rem;
}

.modal-report:only-of-type {
    padding: 1rem 3rem 1rem 3rem;
}

select.required {
    border: 1px solid #f64431;
}

.card-editable .front, .card-editable .back {
    position: static;
}

.content-wrap > .row.row-tabbed_tab-content-item {
    display: none;
}

.content-wrap > .row.row-tabbed_tab-content-item.active {
    display: block;
}

/* **********************************************
    Button Drop Down
 ************************************************/
/* These styles assume you are using ul and li */
.dropit {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropit.flat {
    box-shadow: none;
}

.dropit .dropit-trigger {
    position: relative;
}

.dropit .dropit-submenu {
    position: absolute;
    top: 36px;
    right: 0;
    z-index: 1000;
    display: none;
    min-width: 168px;
    list-style: none;
    padding: 10px 0px;
    margin: 0;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.24);
}

.dropit .dropit-submenu .pointer {
    width: 10px;
    height: 10px;
    background: #fff;
    position: absolute;
    top: -5px;
    right: 15px;
    transform: rotate(45deg);
    box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.14)
}

.dropit .dropit-open .dropit-submenu {
    display: block;
}

.dropit-submenu.left {
    left: 0;
}

.dropit-submenu.right {
    right: 0;
}

li.dropit-trigger {
    margin-left: 0px;
    margin-bottom: 0;
}

ul.dropit-submenu li:hover {
    background: #eee;
    cursor: pointer;
}

#AccountListFilter ul.dropit-submenu {
    max-height: 500px;
    overflow-y: scroll;
}

.vert-dropdown.dropit a {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    padding: 12px 18px;
}

.dropit a.text-light-grey:hover {
    color: #11b5cc !important;
}

.vert-dropdown.dropit a:hover {
    background: #eee;
}

.vert-dropdown.dropit .dropit-open a {
    background: #eee;
}

.vert-dropdown.dropit a svg {
    width: 4px;
    height: 16px;
    overflow: visible;
    position: relative;
}

.vert-dropdown ul.dropit-submenu li {
    padding: 10px 20px;
    color: #333;
}

.vert-dropdown .dropit-submenu {
    top: 50px;
    padding: 10px 0;
}

.vert-dropdown.dropit a svg path {
    fill: #999;
}

.dropit a {
    display: inline-block;
    padding: 0;
    border: none;
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap;
    margin-top: 4px;
    font-weight: bold;
}

.sort-container a > svg {
    width: 16px;
    height: 16px;
}

.sort-container .dropit-trigger a > svg {
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
}

.sort-container a > svg path {
    fill: #666666;
}

.sort-container .dropit .dropit-submenu {
    min-width: 32px;
}

.dropit a span.label-text {
    font-weight: normal;
}

.dropit a:hover span.label-text {
    color: #999;
}

#AccountListFilter li a, #MetricViewDropdown ul li a {
    white-space: nowrap;
    width: calc(100% - 16px);
    margin-top: 2px;
    margin-bottom: 2px;
}

.dropit a.hierarchy-icon {
    margin-top: 0;
}

.dropit a.person-profile {
    display: inline-block;
    padding: 0;
    border: none;
    font-size: 100%;
    line-height: 1rem;
}

.dropit a.button-transparent:hover {
    background-color: #DBF4F8;
}

.dropit a.button-default {
    background-color: #ffffff;
}

.dropit a.text-white {
    color: #FFFFFF;
}

.dropit a.text-white svg path {
    fill: #FFFFFF;
}

.dropit a.button-inline {
    padding: 0rem 1.25rem 0.9375rem 1.25rem;
    box-shadow: none;
}

li.dropit-trigger a .arrow {
    margin-left: 0.625rem;
}

ul.dropit-submenu {
    padding: 0px;
}

ul.dropit-submenu.person-profile {
    top: 3.45rem;
    right: 30px;
}

ul.dropit-submenu a {
    padding: 10px;
    color: #000000;
}

ul.dropit-submenu .text-blue a {
    color: #11b5cc;
}



ul.dropit-submenu li {
    padding-right: 10px;
    margin-left: 0px;
    white-space: nowrap;
    text-align: left;
}

ul.dropit-submenu li.tc {
    text-align: center;
}

ul.dropit-submenu li.separator {
    border-bottom: #333;
    border-bottom-style: solid;
    border-bottom-width: thin;
}

ul.dropit-submenu li .check-area {
    width: 20px;
    display: inline-block;
}

.dropdownadvanced-wrap {
}

.dropdownadvanced-wrap .dropdown-button {
    cursor: pointer;
}

.dropdownadvanced-wrap .dropdown-button .button-label {
    padding: 2px;
    display: inline-block;
}

.dropdownadvanced-wrap .dropdown-button:hover .button-label {
    color: #11b5cc;
    display: inline-block;
}

.dropdownadvanced-wrap .dropdown-button .button-icon {
    padding: 2px 2px 2px 6px;
}

.dropdownadvanced-wrap .dropdown-button .button-icon svg {
    top: -1px;
    position: relative;
}

.dropdownadvanced-wrap .dropdown-button .button-icon svg path {
    fill: #333333;
}

.dropdownadvanced-wrap .dropdown-button:hover .button-icon svg path {
    fill: #11b5cc;
}

.filter-list {
    min-width: 160px;
}

.filter-list label {
    font-size: 0.875rem;
}

.filter-list input[type=checkbox] + label:before {
    height: 16px;
    width: 16px;
    margin-top: -2px;
}

.sort-list {
}

.sort-list label {
    font-size: 0.875rem;
    white-space: nowrap;
}

.sort-list input[type=radio] + label {
    padding-left: 1.25rem;
    padding-top: 10px;
}

.sort-list input[type=radio] + label:before {
    height: 14px;
    width: 14px;
    left: 0;
    top: 12px;
}

.sort-list input[type=radio]:checked + label:after {
    height: 4px;
    width: 4px;
    left: 4px;
    top: 16px;
    border: 3px solid #11b5cc;
}

.person-info {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.report-section .person-info {
    width: 50%;
}

.portfolio-activity-report .report-section .person-info {
    width: 70%;
}

.person-info.dashboard {
    width: 100%;
}

.person-graphs .high-chart {
    overflow: visible !important;
}

.person-info .profile-image {
    width: 64px;
    display: inline-block;
    margin: 0px 12px 8px 0px;
    vertical-align: top;
}

.person-info .profile-image img {
    width: 64px;
    height: 64px;
}

.person-info .profile-details {
    width: calc(50% - 76px);
    display: inline-block;
    vertical-align: top;
}

.portfolio-activity-report .person-info .profile-details {
    width: calc(100% - 76px);
}

.person-info .name-text {
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding-bottom: 2px;
}

.person-info .name-text-small {
    font-size: 1.4rem;
    line-height: 1.4rem;
    padding-bottom: 2px;
}

.person-info .name-text-small-account {
    font-size: 1.25rem;
    line-height: 1.25rem;
    padding-bottom: 2px;
}

.person-info .info-text-tiny {
    font-size: .75rem;
    padding-bottom: 2px;
    color: #AAAAAA;
}

.person-info.contact-text {
    padding-bottom: 2px;
    padding-left: 25px !important;
}

.person-info.accountname-text {
    padding-bottom: 2px;
    padding-left: 25px !important;
}

.person-info .title-text {
    font-size: 0.875rem;
    font-style: italic;
    color: #999999;
}

.person-info .total-text {
    font-size: 0.875rem;
    padding-top: 2px;
    color: #333333;
    float: right;
    width: 33.33%;
}

.person-info .total-text.expanded-layout-block-2 {
    width: 50%;
}

.person-info .total-text.expanded-layout-block-3 {
    width: 66.66%;
}

.person-info .total-text.expanded-layout-block-4 {
    width: 100%;
}

.person-info .total-text .high-chart {
    height: 80px;
    display: block;
    padding-top: 6px;
}

.person-info .total-label {
    display: block;
    font-weight: 500;
    margin-right: 4px;
    color: #666666;
}

.person-info .total-label .swot-oldest, .person-info .total-label .voc-oldest {
    display: block;
    font-weight: 400;
    font-size: 0.75rem;
    margin-right: 4px;
    color: #999999;
}

.profile-uppergraph {
    width: 50%;
    display: inline-block;
    text-align: right;
}

.profile-uppergraph .high-chart {
    margin-left: auto;
    display: inline-block;
    position: relative;
    right: -6px;
}

.person-graph {
    width: 60%;
    display: inline-block;
    vertical-align: top;
}

.card-report .person-summary {
    display: inline-block;
    width: 60%;
    vertical-align: top;
}

.report-section .person-summary {
    width: 50%;
}

.portfolio-activity-report .report-section .person-summary {
    width: 30%;
}

.card-report .person-summary .total-text {
    font-size: 1rem;
}

.person-summary .overall-summary .percent-container {
    vertical-align: top;
    font-size: 1rem;
    padding-top: 4px;
}

dl.person-stat {
    margin-top: 6px;
}

.person-stat dt {
    float: left;
    width: 35%;
    font-size: 1em;
    text-align: left;
    padding: .15em 0;
    clear: left;
}

.person-stat dd {
    float: left;
    width: 60%;
    font-size: 1em;
    padding: .15em 0;
    margin-bottom: 0;
}


.account-plan-summary .account-icon img {
    display: inline-block;
    width: 48px;
    max-height: 48px;
    vertical-align: top;
}

.account-plan-summary .account-name {
    vertical-align: top;
    display: inline-block;
    font-size: 18px;
    margin: 2px 0px 0px 12px;
}

.account-plan-summary .plan-start-date {
    font-size: 16px;
    color: #999999;
    display: block;
}

.overall-summary .action-plan-table {
    width: 200px;
    border-bottom: 1px solid #DDDDDD;
}

.overall-summary .percent-container {
    font-size: 22px;
}

.overall-summary .account-plan-completion {
    text-align: right;
    vertical-align: top;
}

.overall-summary .percent-image-line {
    vertical-align: top;
    margin-top: 8px;
}

.overall-summary .action-plan-table .label-text {
    width: 60%;
    padding: 4px;
    font-size: 0.875rem;
    color: #999999;
    display: inline-block;
}

.overall-summary .action-plan-table .label-value {
    width: 40%;
    padding: 4px;
    text-align: right;
    display: inline-block;
}

.account-activity-container {
    padding-top: 10px;
    padding-left: 40px;
    border-bottom: 1px #DDDDDD solid;
}

.account-activity-container .report-section {
    border-bottom: none;
}

.account-activity-container .account-title {
    font-size: 18px;
    padding-left: 30px;
}

.account-activity-container .account-icon {
    padding: 8px 0;
    display: inline-block;
}

.account-activity-container .account-icon img {
    width: 24px;
}

.account-activity-container .account-title .account-name {
    padding: 4px 0px 0px 8px;
    display: inline-block;
    vertical-align: top;
    font-size: 22px;
}

.account-activity-container .activity-title {
    border-bottom: 1px solid #DDDDDD;
    font-size: 1em;
    font-weight: 500;
    color: #666666;
}

.account-activity-container .activity-none {
    margin: 8px 0;
    font-size: 1em;
    color: #999999;
    font-style: italic;
}

ul.activity-task-list, ul.activity-action-list, ul.activity-note-list {
    list-style: none;
    margin-top: 8px;
}

ul.activity-task-list li .task-icon {
    position: absolute;
    width: 12px;
    height: 12px;
    left: 10px;
    margin-top: 2px;
}

ul.activity-task-list li .task-icon svg {
    width: 16px;
    height: 16px;
}

ul.activity-task-list li .task-icon svg path {
    fill: #47b14b;
}

ul.activity-task-list li .task-name {
    display: block;
}

ul.activity-task-list li .task-completeddate, ul.activity-task-list li .task-duedate {
    display: inline-block;
    font-size: 1em;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 20px;
    line-height: 16px;
}

ul.activity-task-list li .opportunity-name, ul.activity-task-list li .risk-status {
    display: block;
    font-size: 1em;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 20px;
    line-height: 16px;
}

ul.activity-task-list li .task-duedate .task-late {
    color: #f64431;
    margin-left: 10px;
}

ul.activity-action-list li {
    margin-left: 0;
}

ul.activity-action-list .action-name {
    font-size: 1rem;
    display: block;
}

ul.activity-action-list .action-startdate, ul.activity-action-list .action-duedate {
    display: inline-block;
    font-size: 1em;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 20px;
    line-height: 16px;
}

ul.activity-action-list .action-completion {
    display: block;
}

ul.activity-action-list .action-completion-label {
    font-size: 1.5em;
    width: 50px;
    display: inline-block;
    text-align: left;
    margin-right: 10px;
}

ul.activity-note-list li {
    margin-left: 0;
}

.activity-note-item .note-icon {
    display: inline-block;
    padding-right: 4px;
}

.activity-note-item .note-icon svg path {
    fill: #333333;
}

ul.activity-note-list .note-title {
    font-size: 1rem;
    display: block;
    margin-top: 20px;
}

ul.activity-note-list .note-owner, ul.activity-note-list .note-createddate {
    display: inline-block;
    font-size: 1em;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 20px;
    line-height: 16px;
}

ul.activity-note-list .note-text {
    padding-top: 6px;
    font-size: 14px;
    line-height: 15px;
    display: block;
    color: #333333;
    border-top: 1px solid #dddddd;
    max-height: 316px;
    overflow: hidden;
    text-overflow: ellipsis;
}

ul.activity-note-list .note-text p {
    font-size: 14px;
    line-height: 15px;
    display: block;
    color: #333333;
}

ul .activity-note-list .note-icon {
    display: inline-block;
    margin-right: 8px;
}

ul.activity-note-list .note-icon svg {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 2px;
}

ul.activity-note-list .note-sub-type {
    display: block;
    font-size: 12px;
    font-style: italic;
    color: #666666;
}

.person-goal-options {
    position: relative;
    top: -42px;
    display: inline-block;
    float: right;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
    Action Plan
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.action-plan-level-0 .card:not(.card-one):not(.task-card) {
    float: none;
    clear: both;
}

.action-plan-level-0 h2 {
    margin-bottom: 20px;
    display: inline-block;
    font-size: 1.25rem;
    color: #333333;
}

.action-plan-level-0 h2 .expand-paragraph svg {
    width: 18px;
    height: 18px;
    position: relative;
    top: 2px;
}

h2 .expand-paragraph.small-icon svg {
    width: 18px;
    height: 18px;
    position: relative;
}

h2 .expand-paragraph.listview.small-icon {
    position: relative;
    top: 2px;
}

.action-plan-level-0 .historic-date {
    font-size: 0.875rem;
    color: #e2a100;
}

.action-plan-level {
    text-align: center;
}

.action-plan-level > span {
    font-size: 1.25rem;
}

.action-plan-level > span > p {
    color: #666666;
    font-size: 0.875rem;
    min-height: 96px;
    padding-top: 8px;
}

@media (min-width: 1440px) {
    .action-plan-level > span > p {
        min-height: 70px;
    }
}

.plan-choice {
    text-align: center;
}

.plan-choice > span {
    margin-left: 28px;
}

.action-plan-level-2:not(:empty) {
    margin-left: 20px;
    margin-bottom: 20px;
    -webkit-transition: max-height 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: max-height 350ms cubic-bezier(0.77, 0, 0.175, 1);
}

.action-plan-level-3 {
    -webkit-transition: max-height 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: max-height 350ms cubic-bezier(0.77, 0, 0.175, 1);
}

.no-yoverflow {
    overflow: hidden;
}

.missing-child {
    color: #e2a100;
    font-size: 0.875rem;
    font-style: italic;
}


.child-count {
    color: #999;
    font-size: 0.875rem;
    margin-right: 8px;
}

.action-plan-level-4.task-list {
    margin-left: 30px;
    margin-top: 1px;
}

.action-plan-level-3.task-list {
    margin-left: 20px;
    margin-top: 1px;
}

.action-plan-level-2.task-list {
    margin-left: 20px;
    margin-top: 1px;
    margin-bottom: 10px;
}

.risk-details .action-plan-level-2.task-list {
    margin-left: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.action-plan-level-1 > .card {
    z-index: 3;
}

.action-plan-level-2 > .card {
    z-index: 2;
}

.action-plan-level-3 > .card {
    z-index: 2;
    float: left;
}

.card-action-new, .card-task-new {
    z-index: 4 !important;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.24);
}

.action-plan-level-1 > .card .pie-chart {
    margin-top: 4px;
}

.action-plan-level-1 .sub-item-percent .percent-container {
    color: #333333;
    vertical-align: top;
}

.action-plan-level-1 > .card:not(.big) .percent-container {
    font-size: 1.25rem;
    padding-top: 7px;
}

.action-plan-level-1 > .card.big .percent-container {
    font-size: 1.25rem;
}

.action-plan-level-1 > .card .info__card-title {
    font-size: 1.15rem;
}

.action-plan-level-2 > .card .info__card-title {
    font-size: 1rem;
}

.action-plan-level-3 > .card .info__card-title {
    font-size: 0.875rem;
    color: #666666;
}

.action-plan-level-3 .task-card .task-owner, .action-plan-level-4 .task-card .task-owner {
    font-size: 0.75rem;
    text-align: right;
}

.action-plan-level-3 .task-card .person-team, .action-plan-level-4 .task-card .person-team {
    font-size: 0.75rem;
    text-align: right;
    white-space: nowrap;
}



.action-plan-switch {
    position: absolute;
    left: -14px;
    top: 6px;
    width: 16px;
    display: inline-block;
}

.action-goal-switch {
    width: 30px;
    height: 30px;
    display: inline-block;
}

.no-tasks .action-goal-switch {
    display: none;
}

.action-switch-padding {
    display: none;
}

.no-tasks .action-switch-padding {
    width: 30px;
    height: 30px;
    display: inline-block;
}

.card.action-goal .action-plan-switch {
    margin-left: 10px;
    margin-right: 10px;
    z-index: 100;
}

.action-plan-switch .sub-item-icon g {
    fill: #999999;
}

.action-plan-switch .contract-icon svg {
    width: 12px;
}

.action-plan-switch.expanded .contract-icon {
    display: none;
}

.action-plan-switch.expanded .expand-icon {
    display: inline-block;
}

.action-plan-switch:not(.expanded) .contract-icon {
    display: inline-block;
}

.action-filter-heading {
    margin-left: 12px;
}

.action-count {
    color: #999999;
    font-size: 0.875rem;
    position: absolute;
}

.action-count.no-add {
    position: relative;
}


.card.action-goal .action-plan-switch:not(.expanded) .contract-icon {
    display: inline-block;
    top: 2px;
}

.card.action-goal .person-name, .card.goal-upcoming .person-name, .card.goal-completed .person-name {
    text-align: right;
    font-size: 0.875rem;
    color: #333333;
    line-height: 15px;
}

.card.action-goal .person-team, .card.goal-upcoming .person-team, .card.goal-completed .person-team {
    text-align: right;
    font-size: 0.75rem;
    color: #999999;
}


.action-plan-switch:not(.expanded) .expand-icon {
    display: none;
}

.card-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(87, 106, 130, 0.80);
}

.card.action-plan:not(.flipped):hover, .card.action-goal.card-editable:not(.flipped):hover, .action-plan-level-1 .card.task-card:hover:not(#card-task-new), .goal-detail .card.task-card:hover {
    cursor: pointer;
    box-shadow: inset 4px 0px #11b5cc, 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
}

.activity-note:hover {
    box-shadow: inset 4px 0px #11b5cc;
}

.card.action-plan .actions-hover {
    right: 0;
    -webkit-box-shadow: -20px 0px 20px 0px rgba(255,255,255,1);
    -moz-box-shadow: -20px 0px 20px 0px rgba(255,255,255,1);
    box-shadow: -20px 0px 20px 0px rgba(255,255,255,1);
}

.card.action-goal .actions-hover {
    right: -10px;
    -webkit-box-shadow: -20px 0px 20px 0px rgba(255,255,255,1);
    -moz-box-shadow: -20px 0px 20px 0px rgba(255,255,255,1);
    box-shadow: -20px 0px 20px 0px rgba(255,255,255,1);
}

.card.action-plan:hover .actions-hover, .card.action-goal:hover .actions-hover, .card.goal-upcoming:hover .actions-hover, .card.goal-completed:hover .actions-hover, .card.card-contract:hover .actions-hover, tr[data-actioncontainer="OpportunityListRow"]:hover .actions-hover, .card.card-qbr:hover .actions-hover, .card.card-risk:hover .actions-hover {
    opacity: 0.95;
    background-color: #ffffff;
}

.card.goal-upcoming .actions-hover, .card.goal-completed .actions-hover {
    right: 10px;
    -webkit-box-shadow: -20px 0px 20px 0px rgba(255,255,255,1);
    -moz-box-shadow: -20px 0px 20px 0px rgba(255,255,255,1);
    box-shadow: -20px 0px 20px 0px rgba(255,255,255,1);
}

.card.goal-upcoming .actions-hover .item-action:hover .circle, .card.goal-completed .actions-hover .item-action:hover .circle {
    width: 28px;
    height: 28px;
    margin-left: 2px;
    margin-top: 2px;
}

.card.action-goal .card-row-half-pad {
    padding: 10px 20px 10px 20px;
}

.card.action-goal.big .card-row-half-pad {
    padding: 16px 20px 16px 20px;
}

.card.action-goal.big .info__card-goal-name {
    font-size: 1rem;
    color: #333333;
    line-height: 16px;
}

.action-goal .goal-name-container {
    display: inline-block;
    width: calc(100% - 30px);
}

.action-goal .info__card-priority {
    display: inline-block;
    margin: 0px 10px 0px 0px;
}

.action-goal .info__card-duedate, .goal-upcoming .info__card-duedate, .goal-completed .info__card-duedate {
    display: inline-block;
    margin-right: 6px;
    font-size: 0.75rem;
}

.action-goal .svg-metric-icon, .goal-upcoming .svg-metric-icon, .goal-completed .svg-metric-icon {
    display: inline-block;
    position: relative;
    padding-right: 2px;
    top: 3px;
}

.action-goal .unassigned {
    color: rgba(226, 161, 0, 0.80);
    font-size: 11.25px;
}

.action-late {
    font-size: 0.75rem;
    color: #f64431;
    display: inline-block;
    margin-right: 10px;
}

.card.goal-upcoming .card-row-half-pad {
    box-shadow: inset 5px 0 rgba(187, 187, 187, 0.5);
}

.info__card-metric {
    display: inline-block;
    margin-left: 8px;
}

.goal-header .info__card-metric {
    margin-left: 0px;
}

.card.goal-upcoming, .card.goal-completed {
    color: #999999;
}

.card.goal-upcoming .info__card-goal-name, .card.goal-completed .info__card-goal-name {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.card.goal-completed .card-row-half-pad {
    box-shadow: inset 5px 0px rgba(71, 177, 75, 0.50);
}



.card.goal-completed .info__card-task .svg-metric-icon, .card.goal-completed .info__card-metric .svg-metric-icon {
    margin-right: 4px;
    position: relative;
    top: 2px;
}

.goal-status.completed .info__card-metric .svg-metric-icon {
    margin-left: 4px;
    position: relative;
    top: 2px;
    float: right;
}

.goal-status.completed .info__card-metric {
    color: #999999;
    display: block;
    margin: 8px;
    position: absolute;
    width: 300px;
    text-align: right;
    left: 756px;
}

.task-card {
    padding-top: 2px;
}

.task-card:first-of-type {
    margin-top: 2px;
}

.task-card .task-title {
    font-size: 0.875rem;
    color: #333333;
    text-align: left;
    position: relative;
    top: 0px;
}

.task-card .task-owner {
    padding-right: 86px;
    font-size: 1rem;
    color: #333333;
}

.risk-details .task-card .task-owner {
    padding-right: 20px;
    font-size: 1rem;
    color: #333333;
}

.goal-detail .task-card .task-owner {
    padding-right: 20px;
    text-align: right;
}

.task-card .person-team {
    font-size: 0.75rem;
    color: #999999;
}

.task-card .task-duedate {
    font-size: 0.75rem;
    display: inline-block;
    margin-top: 4px;
    margin-right: 10px;
    float: none;
}

td.due-date-column {
    width: 4% !important;
}

td.set-date-column {
    width: 1% !important;
}

/*|/\/\/\/\/\/\/\/\/\/\/\/\|
    VOC
|/\/\/\/\/\/\/\/\/\/\/\/\|*/


.card.voc:not(.child) {
    cursor: pointer;
}

.voc.child .flip-action {
    width: 34px;
    color: #11b5cc;
    font-size: 14px;
    padding-left: 10px;
}

.voc.child .notification-save {
    z-index: 1;
}

.voc.child .block-two-thirds {
    width: calc(60% - 34px);
}

.voc.child .block-third {
    width: calc(40% - 34px);
}

.voc-title-text {
    font-size: 1rem !important;
    font-weight: 500;
    padding-left: 24px;
}

div .voc-title-text .svg-info-icon {
    margin-left: 4px;
    display: inline;
}

.voc-title-text .svg-info-icon path {
    fill: #333;
}

.account-voc-list .voc-list-options .dropdown ul.menu.dropit {
    width: 200px;
    margin-right: 95px;
}

.voc-account-filter {
    float: right;
    padding-top: 5px !important;
}

.recent-reports {
    min-height: 400px;
}

/***************************************
    Notifications
**************************************** */

.notification-date {
    font-size: .875rem;
    color: #666666;
    font-weight: 400;
    float: right;
    width: 130px;
    display: inline-block;
    text-align: right;
    margin-top: 4px;
}

.notification-dismiss {
    background-color: #11b5cc;
    color: #ffffff;
    width: 9rem;
    height: 23px !important;
    padding: 5px;
    margin-bottom: 3px;
}

.notification-dismiss-all {
    height: 30px;
    padding: 5px;
    width: 7rem;
}

.notification-new {
    background-color: #D4DDEC;
}

#notification-list .notification-new .text-note.hide-some:after {
    content: '';
    position: absolute;
    height: 40px;
    width: 100%;
    z-index: 111;
    bottom: 16px;
    left: 0;
    -webkit-box-shadow: inset 0 -20px 20px #D4DDEC;
    -moz-box-shadow: inset 0 -20px 15px #D4DDEC;
    box-shadow: inset 0 -20px 15px #D4DDEC;
}

#notification-list .timeline-circle.new-notification {
    background: #fff;
}

.nav-notifications .badge {
    position: relative;
    width: 25px;
    line-height: 25px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    top: 12px;
    right: 35px;
    background-color: red;
    color: white;
}

.nav-notifications-empty {
    margin-right: 25px;
}

.notification-banner {
    background-color: #D4DDEC;
    color: #323F4F;
}

.notification-banner-heading {
    color: #333;
    line-height: 1;
    margin-bottom: 0;
    font-weight: 500;
}

.notification-banner-close {
    position: relative;
}

.notification-banner-close svg path {
    fill: #333;
}

/***************************************
    JTI Product Matrix
**************************************** */

.row.extended {
    position: absolute;
    width: 100%;
}

.product-matrix-container {
    position: relative;
    white-space: nowrap;
    margin-left: 290px;
    background-color: #fafafa;
    z-index: 1;
}

.product-matrix-container .product-name {
    font-size: 0.875rem;
    max-width: 40px;
    min-width: 40px;
    border-right: 1px solid #666666;
    border-bottom: 1px solid #666666;
    padding: 8px 0;
    display: inline-block;
    background-color: #fafafa;
}

.product-matrix-container .product-header-outer {
    display: flex;
    width: 360px;
}

.product-matrix-container .product-header-inner {
    padding: 50% 0;
    height: 0;
    width: 100%;
}

.product-matrix-container .product-name span {
    transform-origin: top left;
    transform: rotate(-90deg) translate(-100%);
    display: block;
    margin-top: -50%;
    padding-top: 8px;
    max-width: 400px;
    overflow: hidden;
}

.product-person-container {
}

.product-person-summary {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    padding: 12px 4px 4px 0;
}

.product-person-summary .person-image {
    width: 2rem;
    display: inline-block;
    margin-right: 8px;
}

.product-person-summary .person-image img {
    width: 2rem;
    height: 2rem;
}

.product-person-summary .person-name {
    display: inline-block;
    vertical-align: top;
    font-size: 1.15rem;
}

.product-person-detail {
    vertical-align: top;
    margin-left: 8px;
    display: inline-block;
    position: relative;
}

.product-row {
    display: block;
    position: relative;
    white-space: nowrap;
}

.product-person-detail .account-details {
    margin: 0;
    padding: 0;
    vertical-align: top;
    border-bottom: 1px solid #efefef;
}

.product-person-detail .account-name {
    width: 282px;
    padding: 4px 4px 0 4px;
    display: inline-block;
    color: #ffffff;
}

.product-person-detail .account-touched {
    font-size: 0.8rem;
    clear: both;
    padding: 0 4px 4px 4px;
    display: block !important;
    border: none;
    color: #ffffff;
}

.product-person-detail .account-touched.not {
    color: #333;
    font-style: italic;
}

.product-person-detail .product-item {
    display: inline-block;
    padding: 0px 8px 0px 8px;
    width: 40px;
    height: 45px;
    border: 1px solid #dddddd;
    position: relative;
    margin: 0;
}

.product-person-detail .product-item span {
    display: inline-block;
    margin-top: 10px;
    position: relative;
    padding: 0;
    margin-bottom: 0;
}

.product-person-detail .product-item svg {
    width: 20px;
    height: 20px;
}

.product-person-detail .product-item .has-product path {
    fill: #47b14b;
}
/***************************************
    Contract Review
**************************************** */
.fee-range-title, .fee-volume-title {
    position: relative;
    margin-left: 10px;
    top: -20px;
    text-transform: uppercase;
    border-bottom: 1px solid #DDD;
    font-size: 1.25rem;
}

.fee-range-header {
    margin-left: 5px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #666;
}

.fee-range-new-item {
    width: 100%;
    clear: both;
    display: table;
}

.fee-range-global, .fee-volume-global {
    padding: 10px 10px 50px 9px;
}

.fee-volume-item {
    clear: both;
}

.fee-volume-type, .fee-volume-per-unit, .fee-volume-max, .fee-volume-frequency {
    margin: 10px 0px;
    padding: 0 10px;
    display: inline-block;
    float: left;
}

.fee-volume-type {
    width: 20%;
    padding-bottom: 8px;
    border-bottom: #d6d6d6;
}

.fee-volume-per-unit {
    width: 22%;
}

.fee-volume-max {
    width: 17%;
}

.fee-volume-frequency {
    width: 41%;
}

.range-percent .currency-wrapper:after {
    content: "%";
    position: relative;
    right: -92px;
    top: -20px;
}

.range-percent > input, .range-number > input {
    padding-left: 22px;
}

.fee-listing {
    clear: both;
    padding: 4px 0;
}

/*
    Multi Select Forms
*/
.multi-select-item.with-form {
    list-style: none;
    margin-left: 0;
    background-color: #fcfcfc;
}

.multi-select-item.with-form .card-row {
    padding: 20px 0 4px 0;
}

.multi-select-item.with-form .block-2 {
    padding-left: 2px;
}

.item-row {
    margin-bottom: 8px;
}

.item-row .item-title {
    font-size: 1.15rem;
}

.item-row .item-title.no-udf {
    font-size: 0.875rem;
}

/****  Team Dashboard ****/
.team-select {
    display: inline-block;
    margin: 0 0 0 16px;
}

.team-note-title {
    font-size: 1.5rem;
    font-weight: 300;
    vertical-align: top;
}

.team-note-title span {
    width: 66.66%;
}

.team-note-date {
    font-size: 0.75rem;
    color: #999;
    width: 66.66%;
}

.team-note-type {
    font-size: 1rem;
    font-weight: 400;
    color: #666;
    margin-bottom: 4px;
}

.team-note-person {
    display: inline-block;
    float: right;
    text-align: right;
    vertical-align: top;
    width: 33.33%;
}

.team-note-person .team-note.person-name {
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
    margin: 8px;
    font-size: 1.2rem;
    font-weight: 400;
    width: auto;
}

.team-note-edit {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: right;
    position: absolute;
    right: 28px;
    bottom: -12px;
}

.team-note-edit span.edit-card-icon {
    width: 26px;
}

.team-note-edit span.edit-card-icon svg {
    width: 18px;
    height: 18px;
}

.team-note-edit span.edit-card-text {
    width: 100px;
    vertical-align: top;
    padding-top: 2px;
}

.team-note-link {
    color: #11b5cc;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    -webkit-transition: color 240ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 240ms cubic-bezier(0.77, 0, 0.175, 1);
}

.team-note-link:hover {
    color: #0d8b9d;
}

.team-person-tasklist {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}


.team-person-header {
    margin-bottom: 10px;
    vertical-align: top;
}

.team-person-header span {
    display: inline-block;
    vertical-align: top;
}

.team-person-name {
    margin: 4px 0 0 8px;
    font-weight: 500;
    color: #333333;
}

.team-task-add {
    display: inline-block;
    margin: 4px 10px 0 10px;
}

.team-task-add .add-text {
    margin-left: 4px;
    color: #11b5cc;
}

.team-task-add.team-add {
    float: right;
    font-size: 1rem;
    vertical-align: top;
}

.team-task-add.team-add .add-text {
    vertical-align: top;
}

.team-task label {
    color: #666666;
    line-height: 1.25rem !important;
}

.team-task .task-due-date {
    float: right;
    font-size: 0.875rem;
    color: #666666;
}

.team-task .task-due-date.late {
    color: #f64431;
}

.team-task-actions {
    position: absolute;
    width: 100%;
    height: 0;
}

.team-task-actions ul {
    position: relative;
    display: inline-block;
    float: right;
    margin-right: 4px;
}

.team-task.completed {
    background-color: #efefef;
    margin-top: 10px;
}

.team-task.completed .link-hover {
    font-size: 0.875rem;
}

.team-task.completed .link-hover:not(:hover) {
    color: #666666;
}



.task-complete-switch {
    position: absolute;
    left: -10px;
    top: 18px;
    width: 16px;
    height: 16px;
    display: inline-block;
    cursor: pointer;
    z-index: 1;
}

.task-complete-switch span {
    background-color: #fff;
    width: 16px;
    height: 16px;
}

.task-complete-switch .expand-icon {
    top: -3px;
    right: 1px;
    position: relative;
}

.task-complete-switch .expand-icon svg {
    width: 15px;
    height: 15px;
}

.task-complete-switch:not(.expanded) .expand-icon {
    display: none;
}

.task-complete-switch g {
    fill: #666;
}

/**** Slide Show ****/

.ss-container {
}

.ss-page-header {
    width: 100%;
    text-align: center;
    position: absolute;
}

.ss-page-header > span {
    position: relative;
    font-size: 0.875rem;
    color: #999999;
    top: 4px;
}


.ss-left {
    width: 40px;
    height: 100%;
    border-right: 1px solid #dddddd;
    position: absolute;
    display: inline-block;
}

.ss-right {
    width: 40px;
    height: 100%;
    border-left: 1px solid #dddddd;
    position: absolute;
    display: inline-block;
}

.ss-right:hover, .ss-left:hover {
    background-color: #DBF4F8;
    cursor: pointer;
}

.ss-left:hover svg, .ss-right:hover svg path {
    fill: #0d8b9d;
}

.ss-left svg, .ss-right svg {
    margin: auto 16px;
    display: inline-block;
    top: 46%;
    position: absolute;
}

.ss-content {
    margin-left: 40px;
    width: calc(100% - 80px);
    display: inline-block;
    overflow: hidden;
    position: relative;
    height: 240px;
    -webkit-transition: height 340ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: height 340ms cubic-bezier(0.77, 0, 0.175, 1);
}

.ss-content .hide-some {
    max-height: 240px;
    overflow: visible;
}

.ss-content .hide-some:after {
    box-shadow: none;
    z-index: auto;
}

.ss-content div.show-sscard {
    text-align: center;
    cursor: pointer;
    background-color: #ffffff;
    -webkit-box-shadow: 0px -10px 5px -1px rgba(255,255,255,0.6);
    -moz-box-shadow: 0px -10px 5px -1px rgba(255,255,255,0.6);
    box-shadow: 0px -10px 5px -1px rgba(255,255,255,0.6);
    position: absolute;
    width: 100%;
    height: 32px;
    top: 210px;
    padding-top: 8px;
    z-index: 1;
    -webkit-transition: top 340ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: top 340ms cubic-bezier(0.77, 0, 0.175, 1);
}

.ss-content-left {
    position: absolute;
    left: -100%;
    width: 100%;
}

.ss-content-center {
    position: absolute;
    left: 0;
    width: 100%;
}

.ss-content-right {
    position: absolute;
    left: 100%;
    width: 100%;
}

.ss-content .left-center, .ss-content .right-center {
    -webkit-animation: ss-left-center 0.5s forwards;
    -webkit-animation-delay: 0.1s;
    animation: ss-left-center 0.5s forwards;
    animation-delay: 0.1s;
}

@-webkit-keyframes ss-left-center {
    100% {
        left: 0;
    }
}

@keyframes ss-left-center {
    100% {
        left: 0;
    }
}

.ss-content .center-left {
    -webkit-animation: ss-center-left 0.5s forwards;
    -webkit-animation-delay: 0.1s;
    animation: ss-center-left 0.5s forwards;
    animation-delay: 0.1s;
}

@-webkit-keyframes ss-center-left {
    100% {
        left: -100%;
    }
}

@keyframes ss-center-left {
    100% {
        left: -100%;
    }
}

.ss-content .center-right {
    -webkit-animation: ss-center-right 0.5s forwards;
    -webkit-animation-delay: 0.1s;
    animation: ss-center-right 0.5s forwards;
    animation-delay: 0.1s;
}

@-webkit-keyframes ss-center-right {
    100% {
        left: 100%;
    }
}

@keyframes ss-center-right {
    100% {
        left: 100%;
    }
}

/****  Person Card ****/
.deactivated {
    background-image: url("/images/disabled.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80px;
}

.usap-metric {
    margin-left: 40px;
}

.usap-metric .metric-setup-title {
    font-size: 1.25rem;
    color: #666666;
    margin-bottom: 10px;
}

.usap-metric span {
    display: inline-block;
    vertical-align: top;
}

.usap-metric .metric-weight {
    width: 70px;
    font-size: 2rem;
    line-height: 30px;
}

.usap-metric .metric-detail {
    width: 80%;
}

.usap-metric .metric-detail .metric-name {
    font-weight: 500;
}

.usap-metric .metric-detail .metric-description {
    color: #333333;
    font-size: 0.875rem;
    margin-bottom: 10px;
}

.jti-idea-section {
    width: 1110px;
}

@media (min-width: 1420px) {
    .jti-idea-section {
        width: 1150px;
    }
}

@media (min-width: 1520px) {
    .jti-idea-section {
        width: 1245px;
    }
}

@media (min-width: 1660px) {
    .jti-idea-section {
        width: 1380px;
    }
}

@media (min-width: 1820px) {
    .jti-idea-section {
        width: 1540px;
    }
}

/* ***************************
    Setting -> Weights
*/
.rg .weight-range-item.b0 {
    background-color: #c51111;
}

.rg .weight-range-item.b1 {
    background-color: #c51111;
}

.rg .weight-range-item.b2 {
    background-color: #c51111;
}

.rg .weight-range-item.b3 {
    background-color: #11a918;
}

.rg .weight-range-item.b4 {
    background-color: #11a918;
}

.rg .weight-range-item.b5 {
    background-color: #11a918;
}

.weight-range.none {
    display: none;
}

.weight-range.ryg {
    display: inline;
}

.weight-range-item {
    width: 16.66%;
    height: 32px;
    display: inline-block;
}

.weight-range-marker {
    display: inline-block;
    position: absolute;
    width: 4px;
    height: 50px;
    background-color: #333333;
    top: 12px;
}

.rg .weight-range-marker.lower, .rg .weight-range-marker.upper {
    display: none;
}

.weight-point {
    display: inline-block;
    width: 140px;
}

.weight-point.rt {
    width: 33.33%;
}

.weight-start {
    margin-left: 10px;
    display: inline-block;
}

.weight-threshold {
    display: inline-block;
    margin-left: 20px;
    width: 430px;
}

.weight-point-lower {
    display: inline-block;
    margin-left: 20px;
}

.weight-point-lower div.p {
    margin-left: 24px;
}

.weight-point-middle {
    display: inline-block;
    margin-left: 140px;
}

.weight-point-middle div.p {
    margin-left: 30px;
}

.weight-point-upper {
    display: inline-block;
    float: right;
    margin-right: 20px;
}

.weight-point-upper div.p {
    width: 114px;
}

.none .weight-point-lower, .none .weight-point-middle, .none .weight-point-upper {
    display: none;
}

.Auto .weight-threshold .weight-point:not(.value-text) {
    display: none;
}

.Manual .weight-threshold .weight-point.value-text {
    display: none;
}


.Dual .weight-point-lower, .Dual .weight-point-upper {
    display: none;
}

.Tri .weight-point-middle {
    display: none;
}

.weight-point.value-text {
    white-space: normal;
    text-align: center;
}

.weight-point.value-text .value-item {
    width: 100%;
    white-space: normal;
    font-size: 0.75rem;
}

.weight-point.value-text .value-label {
    display: block;
    margin-left: 0px;
    margin-bottom: 2px;
    color: #999999;
    position: absolute;
    text-align: center;
    top: 3px;
    width: 140px;
}

.weight-target {
    float: right;
    margin-right: 10px;
    display: inline-block;
}

.weight-target .weight-point.p > label, .weight-target .weight-point.p > input {
    margin-left: 55px;
}

.weight-input-section.N .weight-point.c, .weight-input-section.N .weight-point.p, .weight-input-section.N .weight-point.h {
    display: none;
}

.weight-input-section.C .weight-point.n, .weight-input-section.C .weight-point.p, .weight-input-section.C .weight-point.h {
    display: none;
}

.weight-input-section.P .weight-point.n, .weight-input-section.P .weight-point.c, .weight-input-section.P .weight-point.h {
    display: none;
}

.weight-input-section.H .weight-point.n, .weight-input-section.H .weight-point.c, .weight-input-section.H .weight-point.p {
    display: none;
}

.toggle-fullscreen {
    display: inline-block;
    margin-left: 8px;
}

.toggle-fullscreen .view-expanded, .toggle-fullscreen.full .view-normal {
    display: none;
}

.toggle-fullscreen.full .view-expanded, .toggle-fullscreen .view-normal {
    display: inline-block;
}

.card.fullscreen {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    position: fixed;
    overflow: auto;
}

.triggered-events-macros-section {
    display: inline-block;
    max-width: 33%;
}

.triggered-events-small-scroll {
    max-height: 175px;
    overflow: hidden;
    overflow-y: scroll;
}

.triggered-events-enable-checkbox {
    display: inline-block;
    top: -14px;
    position: relative;
    width: 35px;
}

/* ***************************
    JTI Investment Efficiency Report
*/

.jti-investment-efficiency {
    table-layout: fixed;
}

.jti-investment-efficiency .jti-acount-name {
    font-size: 0.75rem;
    max-width: 60px;
    min-width: 60px;
    border-right: 1px solid #666666;
    border-bottom: 1px solid #666666;
    padding: 8px 0;
}

.jti-investment-efficiency .jti-account-header {
    background-color: #fff;
}

.jti-investment-efficiency .jti-account-header-outer {
    display: table;
}

.jti-investment-efficiency .jti-account-header-inner {
    padding: 50% 0;
    height: 0;
}

.jti-investment-efficiency .jti-account-name span {
    transform-origin: top left;
    transform: rotate(-90deg) translate(-100%);
    display: block;
    margin-top: -50%;
    padding-top: 40px;
    padding-right: 10px;
    max-width: 100px;
    overflow: hidden;
    font-weight: 400;
    font-size: 0.875em;
    color: #333333;
}

.jti-investment-efficiency .jti-account-category {
    padding-top: 20px;
    text-align: center;
}

/****************************************
    Selection Hover Action Bar
*****************************************/

.quill-action-container {
    background-color: #efefef;
    border-radius: 4px;
    display: none;
    padding: 5px 10px;
    position: absolute;
}

.quill-action-container::before {
    box-sizing: border-box;
    border-bottom: 6px solid #efefef;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: ' ';
    display: block;
    height: 6px;
    left: 50%;
    position: absolute;
    margin-left: -6px;
    margin-top: -6px;
    top: 0;
    width: 6px;
}

.quill-action-container .actions-item:hover {
    border: 1px solid #999999;
    border-radius: 2px;
}

.quill-action-container .actions-item {
    display: inline-block;
    padding: 4px;
    border: 1px solid #efefef;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.actions-item.no-plan {
    width: auto;
}

.actions-item .actions-item.row-title {
    vertical-align: top;
    margin: 4px 6px 4px 0;
    position: relative;
    top: 3px;
}

.quill-action-container .actions-item svg {
    width: 24px;
    height: 24px;
    position: relative;
    top: -1px;
    right: 1px;
}

.quill-action-container .actions-item .actions-item-title {
    vertical-align: top;
    margin: 4px 4px 0 0;
    position: relative;
    top: 3px;
}

.quill-action-container .actions-item.shrink svg {
    width: 20px;
    right: -1px;
}

.quill-action-container .actions-item svg path {
    fill: #666666;
}

.quill-action-container .actions-item:hover path {
    fill: #11b5cc;
}

.quill-action-container .actions-title {
    font-size: 0.75rem;
    color: #333;
    font-weight: 600;
}

/****************************************
    fullcalendar tooltip
*****************************************/

.popper,
.tooltip {
    position: absolute;
    z-index: 9999;
    background: #b8edff;
    color: black;
    width: 400px;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    padding: 10px;
    text-align: left;
}

.style5 .tooltip {
    background: #1E252B;
    color: #FFFFFF;
    max-width: 200px;
    width: auto;
    font-size: .8rem;
    padding: .5em 1em;
}

.popper .popper__arrow,
.tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
}

.tooltip .tooltip-arrow,
.popper .popper__arrow {
    border-color: #b8edff;
}

.style5 .tooltip .tooltip-arrow {
    border-color: #1E252B;
}

.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
    margin-bottom: 5px;
}

.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
}

.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
    margin-top: 5px;
}

.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
}

.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
    margin-left: 5px;
}

.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}

.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
    margin-right: 5px;
}

.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
}

.tooltip-inner .border-bottom {
    border-color: #333;
}

.tooltip-item-icon {
    height: 1.4rem;
    line-height: 1.4rem;
    vertical-align: middle;
    display: inline-block;
}

.tooltip-item-icon svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: #999999;
    margin-right: .4rem;
}

.tooltip-item-icon svg g {
    fill: #999999;
}
/****************************************
    orgchartjs
*****************************************/
.orchartjs-tree {
    min-height: 700px;
}

.email-create-note {
    top: -15px;
}
/****************************************
    voc contact sentiment grid report
*****************************************/
.sentiment-data {
    display: grid;
    grid-auto-rows: 1fr;
}

.sentiment-header {
    display: flex;
    gap: 4px;
}

.sentiment-header-cell {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px;
    border-radius: 4px;
    text-align: center;
}

.sentiment-header-indent {
    padding-left: 48px;
}

.sentiment-left-indent {
    width: 400px;
    padding: 4px;
}

.sentiment-row {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}

.sentiment-left-header {
    font-size: 0.875rem;
    font-weight: 500;
    width: 400px;
    color: #333333;
    background-color: #dddddd;
    text-align: left;
    padding: 8px 2px;
    border-radius: 4px;
}

.sentiment-left-header.unassigned {
    background-color: #efefef;
    color: #666666;
}

.sentiment-left-header .contact-info {
    max-width: 230px;
}

.sentiment-cell {
    border: 1px solid #dddddd;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sentiment-cell.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.sentiment-cell .contact-cell {
    padding: 2px;
}

@media (min-width: 1400px) {
    .sentiment-cell .contact-cell {
        padding: 4px;
    }
}

.sentiment-cell .contact-cell, .sentiment-cell .contact-cell .contact-name {
    font-size: 0.75rem;
    line-height: 0.75rem;
    width: 100%;
}

.sentiment-cell .contact-cell.empty-cell {
    height: 100%;
}

.sentiment-cell .contact-cell .contact-container {
    display: inline-block;
    vertical-align: top;
    padding-left: 2px;
    width: calc(100% - 20px);
}


.sentiment-cell .contact-cell .contact-activity {
    float: right;
    vertical-align: top;
}

.sentiment-cell .contact-cell .contact-line {
    height: 4px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.sentiment-card .sentiment-data .profile-image img.circled.small {
    border-radius: 24px;
}

.sentiment-card .sentiment-data .profile-image.small {
    width: 48px;
    float: left;
    position: relative;
    padding-left: 5px;
}

.sentiment-card .sentiment-data .sentiment-icon {
    width: 48px;
    padding-top: 2px;
    margin-left: auto;
    margin-right: auto;
}

.sentiment-card .sentiment-data .sentiment-icon svg {
    width: 48px;
    height: 48px;
}

.sentiment-card .sentiment-data .sentiment-icon .icon-positive svg path {
    fill: #47b14b;
}

.sentiment-card .sentiment-data .sentiment-icon .icon-negative svg path {
    fill: #f64431;
}

.sentiment-card .sentiment-data .sentiment-icon .icon-neutral svg path {
    fill: #666666;
}

.account-profile.card-report .sentiment-icon {
    height: 24px;
    width: 24px;
    margin: 0 auto;
}

.account-profile.card-report .icon-positive svg path {
    fill: #47b14b;
}

.account-profile.card-report .icon-negative svg path {
    fill: #f64431;
}

.account-profile.card-report .icon-neutral svg path {
    fill: #666666;
}

body .ui-tooltip-content .sentiment-tooltip-date {
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

body .ui-tooltip-content .sentiment-tooltip-short {
    font-size: 12px;
    color: #333;
}

body .ui-tooltip-content .sentiment-tooltip-note, body .ui-tooltip-content .sentiment-tooltip-note p {
    font-size: 12px;
    color: #666;
}

body .ui-tooltip-content .sentiment-tooltip-heading {
    font-size: 11px;
    color: #666;
}


/****************************************
    highchart / Contact Engagement 
*****************************************/

.highchart [class*='hs-1'] {
    color: #f64431;
}

.highchart [class*='hs-2'] {
    color: #f64431;
}

.highchart [class*='hs-3'] {
    color: #f64431;
}

.highchart [class*='hs-4'] {
    color: #f64431;
}

.highchart [class*='hs-5'] {
    color: #e2a100;
}

.highchart [class*='hs-6'] {
    color: #e2a100;
}

.highchart [class*='hs-7'] {
    color: #47b14b;
}

.highchart [class*='hs-8'] {
    color: #47b14b;
}

.highchart [class*='hs-9'] {
    color: #47b14b;
}

.highchart .hs-1 {
    color: #f64431;
}

.highchart .hs-2 {
    color: #f64431;
}

.highchart .hs-3 {
    color: #f64431;
}

.highchart .hs-4 {
    color: #f64431;
}

.highchart .hs-5 {
    color: #f64431;
}

.highchart .hs-6 {
    color: #f64431;
}

.highchart .hs-7 {
    color: #f64431;
}

.highchart .hs-8 {
    color: #f64431;
}

.highchart .hs-9 {
    color: #f64431;
}

.highchart .hs-100 {
    color: #47b14b;
}

/****************************************
   Word Cloud
*****************************************/
.word-cloud-container {
    display: flex;
    justify-content: center;
}

/****************************************
   QBR
*****************************************/
.qbr-checkbox-container {
    width: 100%;
    float: left;
}

.qbr-checkbox-container.system {
    top: 14px;
    position: relative;
}

.qbr-checkbox-container .actions-hover {
    top: 0px;
    left: 10px;
}

.qbr-checkbox-container input[type=checkbox] + label {
    position: absolute;
}

.qbr-checkbox-container input[type=checkbox] + label:before {
    border-color: #000;
}

.qbr-modal-edit .rangeslider--horizontal {
    height: 15px;
}

.qbr-modal-edit .rangeslider__handle {
    width: 30px;
    height: 30px;
}

.qbr-modal-edit .card-range {
    width: 94%;
}

.qbr-modal-edit .rangeslider--horizontal .rangeslider__handle {
    top: -8px;
}

.qbr-modal-edit .range-text {
    position: relative;
    border: 1px;
    top: -5px;
    width: 40px;
    text-align: right;
    padding-top: 2px;
    padding-right: 5px;
    padding-left: 5px;
    border-bottom: 1px solid #333;
}

.qbr-modal-edit .rangeslider__fill {
    background: #47b14b;
}

.qbr-modal-edit .rangeslider__handle:after {
    display: none;
}

.qbr-modal-edit .qbr-rating-box, .qbr-details .qbr-rating-box, .qbr-report .qbr-rating-box, .risk-report .qbr-rating-box {
    border-radius: 20px;
    width: 35px;
    height: 35px;
    text-align: center;
    display: inline-block;
}

.qbr-details .mini-rating-box .qbr-rating-box, .qbr-report .mini-rating-box .qbr-rating-box, .risk-report .mini-rating-box .qbr-rating-box {
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
}

.qbr-modal-edit .qbr-rating-box.neutral, .qbr-details .qbr-rating-box.neutral, .qbr-reporty .qbr-rating-box.neutral, .risk-report .qbr-rating-box.neutral {
    background-color: #ffffff;
    color: #333;
    border-color: #333;
    border-style: solid;
    border-width: 1px;
}

.qbr-modal-edit .qbr-rating-box.neutral, .qbr-details .qbr-rating-box.grey, .qbr-report .qbr-rating-box.grey, .risk-report .qbr-rating-box.grey {
    background-color: #eee;
    color: #333;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
}

.qbr-modal-edit .qbr-rating-box.good, .qbr-details .qbr-rating-box.good, .qbr-report .qbr-rating-box.good, .risk-report .qbr-rating-box.good {
    background-color: #47b14b;
    color: #fff;
    border: solid 1px transparent;
}

.qbr-modal-edit .qbr-rating-box.alert, .qbr-details .qbr-rating-box.alert, .qbr-report .qbr-rating-box.alert, .risk-report .qbr-rating-box.alert {
    background-color: #e2a100;
    color: #fff;
    border: solid 1px transparent;
}

.qbr-modal-edit .qbr-rating-box.bad, .qbr-details .qbr-rating-box.bad, .qbr-report .qbr-rating-box.bad, .risk-report .qbr-rating-box.bad {
    background-color: #F64431;
    color: #fff;
    border: solid 1px transparent;
}

.qbr-modal-edit .qbr-rating-value, .qbr-details .qbr-rating-value, .qbr-report .qbr-rating-value, .risk-report .qbr-rating-value {
    padding-top: 8px;
}

.qbr-details .mini-rating-box .qbr-rating-value, .qbr-report .mini-rating-box .qbr-rating-value, .risk-report .mini-rating-box .qbr-rating-value {
    padding-top: 4px;
    padding-right: 1px;
}

.card-report .qbr-details .mini-rating-box .qbr-rating-value {
    padding-right: 0px;
}

.qbr-modal-edit .qbr-rating-header, .qbr-details .qbr-rating-header, .qbr-report .qbr-rating-header, .risk-report .qbr-rating-header {
    display: inline-block;
    vertical-align: top;
    margin-top: 15px;
}

.qbr-ratings-header-v2 {
    line-height: 1;
    display: inline-block;
    font-size: 24px;
    color: #090909;
    font-weight: 400;
    position: relative;
    top: -13px;
    margin-left: 14px;
}

.qbr-rating-item > span {
    display: inline-block;
    vertical-align: top;
    padding-bottom: 8px;
}

.qbr-rating-item .donut-chart {
    width: 34px;
}

.qbr-rating-item .qbr-rating-description {
    width: calc(100% - 44px );
    margin-left: 10px;
    padding-top: 4px;
}

.qbr-modal-edit .qbr-edit-rating-block {
    display: inline-block;
}

.qbr-details .qbr-rating-block, .qbr-report .qbr-rating-block, .risk-report .qbr-rating-block {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: -19px;
}

.qbr-details .qbr-rating-block.prior-qbr {
    margin-bottom: -15px;
}

.qbr-report.qbr-pdf .qbr-rating-block, .risk-report.qbr-pdf .qbr-rating-block {
    margin-bottom: -14px;
}

.card-report .qbr-details .qbr-rating-block {
    margin-bottom: 0px;
}

.qbr-details .qbr-rating-block.mini-rating-box, .qbr-report .qbr-rating-block.mini-rating-box, .risk-report .qbr-rating-block.mini-rating-box {
    margin-bottom: -10px;
}

.qbr-details .insert-agenda-link {
    top: 5px;
    position: relative;
}

.qbr-details .swot-details .last-updated {
    top: 10px;
    position: relative;
}

.qbr-report.qbr-pdf .qbr-rating-block.mini-rating-box, .risk-report.qbr-pdf .qbr-rating-block.mini-rating-box {
    margin-bottom: -5px;
}

.qbr-reorder-checkbox {
    margin-top: -12px;
    margin-right: -25px;
}

.qbr-macros-section {
    display: inline-block;
    max-width: 33%;
}

.qbr-ratings-header {
    line-height: 1;
    display: inline-block;
    font-size: 16px;
    color: #666;
}

.qbr-info {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.report-section .qbr-info {
    width: 50%;
}

.qbr-info.dashboard {
    width: 100%;
}

.qbr-info .qbr-details, .qbr-info .qbr-report {
    width: calc(50% - 10px);
    display: inline-block;
    vertical-align: top;
}

.qbr-info .name-text {
    font-size: 1.5rem;
    line-height: 1.5rem;
    padding-bottom: 2px;
}

.qbr-info .name-text-small {
    font-size: 1.4rem;
    line-height: 1.4rem;
    padding-bottom: 2px;
}

.qbr-info .name-text-small-account {
    font-size: 1.25rem;
    line-height: 1.25rem;
    padding-bottom: 2px;
}

.qbr-info .info-text-tiny {
    font-size: .75rem;
    padding-bottom: 2px;
    color: #AAAAAA;
}

.qbr-info .text-summary {
    font-size: 1rem;
    line-height: 1.25rem;
    padding-bottom: 2px;
    padding-top: 5px;
    margin-right: 110px;
    color: #666;
}

.qbr-info .text-summary .info-line {
    padding-bottom: 4px;
}

.qbr-info .text-summary .info-line .pull-right {
    width: 75px;
}

.qbr-info.accountname-text {
    padding-bottom: 2px;
    padding-left: 25px !important;
}

.qbr-info .title-text {
    font-size: 0.875rem;
    font-style: italic;
    color: #999999;
}

.qbr-info .total-text {
    font-size: 0.875rem;
    padding-top: 2px;
    color: #333333;
    float: right;
    width: 33.33%;
}

.qbr-info .total-text.expanded-layout-block-2 {
    width: 50%;
}

.qbr-info .total-text.expanded-layout-block-4 {
    width: 100%;
}

.qbr-info .total-text .high-chart {
    height: 80px;
    display: block;
    padding-top: 6px;
}

.qbr-info .total-label {
    display: block;
    font-weight: 500;
    margin-right: 4px;
    color: #666666;
}

.qbr-info .total-label .swot-oldest, .qbr-info .total-label .voc-oldest {
    display: block;
    font-weight: 400;
    font-size: 0.75rem;
    margin-right: 4px;
    color: #999999;
}

.report-section .qbr-info .qbr-details {
    width: calc(100% - 10px);
}

.report-section .qbr-info .qbr-score {
    float: right;
    margin-right: 20px;
    text-align: center;
}

.report-section .qbr-info .qbr-score .score-label {
    font-size: 0.75rem;
    font-weight: 400;
    padding-top: 3px;
}

.qbr-info.dashboard.split-left .name-text {
    min-width: 473px;
}

.qbr-report .account-name {
    font-size: 1.1rem;
    margin-top: 2px;
}

.qbr-report .qbr-name {
    display: block;
}

.qbr-report.profile {
    margin-left: -10px;
}

.card-report.qbr-report .account-logo, .card-report.risk-report .account-logo {
    width: 24px;
    height: 27px;
    margin-right: 8px;
}

.card-report.qbr-report .report-section, .card-report.risk-report .report-section {
    border-bottom: none;
}

.card-report.qbr-report .report-section.account-total-section, .card-report.risk-report .report-section.account-total-section {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 80px;
    padding-right: 32px;
    border-bottom: 1px solid #ddd;
}

.card-report .card-list.qbr-list {
    margin-left: 25px;
}

.card-report.qbr-report.account .report-section, .card-report.risk-report.account .report-section {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: -1px;
}

.card-report.qbr-report.account .title-section, .card-report.risk-report.account .title-section {
    margin-top: 18px;
    margin-right: 32px;
    margin-bottom: 5px;
    margin-left: 20px;
}

.qbr-report ul {
    float: left;
}

.contact-attendee-symbol svg {
    height: 12px;
    float: left;
    display: inline-block;
    width: 13px;
    margin-top: 3px;
    margin-right: 7px;
}

.contact-attendee-symbol.good svg path {
    fill: #47b14b;
}

.contact-attendee-symbol.bad svg path {
    fill: #f64431;
}

.qbr-details .document-download svg {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    top: 3px;
    position: relative;
}

.qbr-details #quill-editor-inline .ql-editor {
    resize: vertical;
    overflow-y: scroll;
    max-height: none;
    height: 300px;
}

.qbr-info-tip svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    margin-bottom: -4px;
}

.qbr-info-tip path {
    fill: #666666;
}

.qbr-coverage-dropdown {
    top: -4px;
}

.ql-editor.no-size {
    min-height: auto;
}

#AccountDataTable .qbr-rating-block {
    position: relative;
    top: -4px;
    height: 25px;
    left: -5px;
}

.qbr-list-tooltip .account-logo {
    width: 20px;
    height: 22px;
    margin-right: 5px;
}

.qbr-type-dropdown {
    display: inline-block;
    vertical-align: bottom;
    position: absolute;
    padding-top: 1px;
    z-index: 200;
}

.qbr-types-copy svg {
    width: 20px;
    height: 20px;
}

.qbr-types-copy svg path {
    fill: #11b5cc;
}

.module-activity .pull-button-up {
    margin-top: -72px;
}

.contacts-dropdown-pull-button-up {
    margin-top: -25px;
}

.account-contact-list li.autocomplete-listitem {
    padding-top: 0.225rem;
    padding-bottom: 0.425rem;
}

.notes-analysis-report .view-ql ul > li:not(.document-item)::before {
    content: '\25CF';
    margin-left: 0px;
}

.person-profile .img-row .profile-image {
    top: 4px;
}

.person-profile .summary-data.module-action.text-blue {
    color: #11b5cc !important;
}

.person-profile .metric-data-row .summary-data {
    word-wrap: break-word;
    white-space: normal;
}

.sidebar-coaching-list {
}

.account-details .sidebar-coaching-list {
    position: relative;
    z-index: 2;
}

.sidebar-coaching-list .sidebar-header {
    padding: 14px 6px;
    width: 100%;
    color: #333333;
    margin-bottom: 2px;
}

.sidebar-coaching-list .sidebar-header svg {
    margin-right: 9px;
}


.side-bar-coaching-container {
    box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 12%), 0px 2px 2px 0px rgb(0 0 0 / 24%);
}

.coaching-please-wait-text {
    text-align: center;
    font-size: 1rem;
    padding: 10px 10px 0px 10px;
}

.coaching-launch {
    text-align: center;
    margin: 10px 0px;
    width: 100%;
}

.coaching-item {
    padding: 8px 4px 0px 4px;
    font-size: 1rem;
    vertical-align: top;
}

.coaching-item-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 4px;
    margin-right: 6px;
    vertical-align: top;
}

.coaching-item-icon svg {
    position: relative;
    width: 20px;
    height: 20px;
    top: 3px;
}


.coaching-item-icon svg path, .coaching-item-icon svg polygon, .coaching-item-icon svg circle {
    fill: #596A83;
}

.coaching-header {
    display: inline-block;
    width: calc(100% - 26px);
    padding: 8px 8px 16px 8px;
    font-size: 0.875rem;
    color: #666;
}

.resolved .coaching-header {
    width: calc(100% - 106px);
}

.coaching-item-name {
    display: inline-block;
    font-weight: 600;
}

.coaching-item-view:not(.coaching-actions) {
    display: block;
    color: #11b5cc;
    padding: 2px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: monospace;
    cursor: pointer;
    width: 40px;
    text-align: center;
    position: absolute;
    bottom: -3px;
    margin-left: calc(50% - 32px);
}

.coaching-item-view:not(.coaching-actions):hover {
    color: #0d8b9d;
}

.coaching-item-view.sub-item {
    bottom: unset;
    top: -22px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.coaching-item-view svg path {
    fill: #11b5cc;
}

.coaching-item-view:not(.coaching-actions):hover svg path {
    fill: #0d8b9d;
}

.coaching-item-dismissed {
    display: none;
    margin: 0px 0px 10px 50px;
    position: relative;
    top: -4px;
}

.coaching-item-dismissed-text {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 8px;
}

.coaching-item-dismissed-date {
    color: #999;
    font-size: 0.75rem;
}

.dismissed .coaching-item-dismissed {
    display: inline-block;
}

.coaching-item-resolved {
    display: none;
    position: absolute;
    right: 0px;
    text-align: right;
    font-size: 0.75rem;
    padding: 8px;
}

.coaching-item-resolve-text {
    display: block;
    font-weight: 500;
}

.coaching-item-resolve-date {
    color: #999;
}

.resolved .coaching-item-resolved {
    display: inline-block;
}

.resolved .coaching-item-view {
    display: none;
}

.coaching-item-info {
    font-size: 0.75rem;
    padding: 4px 0px;
    color: #666666;
    line-height: 1.15rem;
}

.coaching-item-detail {
    color: #333333;
}

.coaching-detail {
    padding: 0px 32px 20px 32px;
    font-size: 0.75rem;
    line-height: 1rem;
}


.coaching-detail > ul {
    margin-top: 10px;
}

.coaching-detail .module-action:hover {
    color: #0d8b9d;
}

.coaching-detail .icon-email {
    display: inline-block;
    margin: 0 2px;
}

.coaching-detail .icon-email svg {
    position: relative;
    top: 3px;
    width: 14px;
}

.coaching-detail .icon-email svg path {
    fill: #11b5cc;
}

.coaching-detail .module-action:hover .icon-email svg path {
    fill: #0d8b9d
}

.coaching-detail .contact-list {
    list-style: none;
    font-size: 0.75rem;
    font-weight: 500;
}

.coaching-detail .contact-list .contact-icon {
    position: absolute;
}

.coaching-detail .contact-list .contact-icon img {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: relative;
    left: -24px;
}

.coaching-actions {
    padding: 10px;
    text-align: center;
    background-color: #f5fbfd;
    font-size: 0.875rem;
}

.coaching-actions > span {
    display: inline-block;
    width: 50%;
    color: #11b5cc;
    cursor: pointer;
}

.coaching-actions > span:not(.sub-item):hover {
    color: #0d8b9d;
}

.coaching-item-detail .coaching-actions {
    border-top: 1px solid #DDDDDD;
    width: calc(100% + 8px);
    position: relative;
    left: -4px;
}

.coaching-success {
    vertical-align: top;
    padding: 10px 0;
}

.coaching-success-icon {
    padding: 4px 8px 4px 0px;
    vertical-align: top;
    display: inline-block;
}

.coaching-success-icon svg {
    width: 48px;
    height: 48px;
}

.coaching-success-icon svg path {
    fill: #47b14b;
}

.coaching-success-text {
    display: inline-block;
    width: calc(100% - 70px);
    line-height: 21px;
}

.coaching-account-link {
    text-decoration: underline;
    font-weight: 500;
}

.coaching-account-link:hover {
    color: #0d8b9d;
}

.coaching-label-row {
    font-size: 1.25rem;
    padding: 4px 0 4px 0;
    border-bottom: 1px solid #999999;
}

.coaching-data-table {
    padding-bottom: 8px;
}

.coaching-data-table > div {
    width: 33%;
    display: inline-block;
}

.coaching-data-header {
    width: 100%;
    height: 4px;
    background-color: #fafafa;
}

.active .coaching-data-header {
    background-color: #11b5cc;
    position: relative;
    top: -1px;
    height: 5px;
}

.coaching-data-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #787878;
    padding: 4px 2px 0px 2px;
}

.coaching-data-label:hover {
    color: #0d8b9d;
    cursor: pointer;
}

.active .coaching-data-label {
    color: #11b5cc;
}

.coaching-data-value {
    font-size: 1rem;
    font-weight: 500;
    padding: 0px 2px;
}

.coaching-no-graph {
    text-align: center;
    background-color: #ededed;
    border: 1px solid #dddddd;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 8px;
}

.risk-header-add-new {
    position: relative;
    top: -5px;
}

.risk-color-box {
    border-radius: 12px;
    width: auto;
    padding-top: 2px;
    padding-bottom: 1px;
    padding-right: 12px;
    padding-left: 12px;
    max-width: fit-content;
}

.kanban-board .risk-color-box {
    max-width: 85px;
    display: inline-block;
    font-size: .71rem;
    padding-left: 6px;
    padding-right: 6px;
}

.kanban-board .risk-color-box span {
    display: flex;
    overflow: hidden;
}

.risk-settings .sub-tab-container {
    white-space: nowrap;
}

.risk-view .card-account-swot a.show-hidden-items, .risk-view .card-account-swot a.hide-items {
    display: block;
    line-height: 15px;
    font-size: 1rem;
    font-weight: 400;
}

.risk-view .rangeslider--horizontal {
    height: 15px;
}

.risk-view .rangeslider__handle {
    width: 30px;
    height: 30px;
}

.risk-view .card-range {
    width: 94%;
}

.risk-view .rangeslider--horizontal .rangeslider__handle {
    top: -8px;
}

.risk-view .range-text {
    position: relative;
    border: 1px;
    top: -5px;
    width: 40px;
    text-align: right;
    padding-top: 2px;
    padding-right: 5px;
    padding-left: 5px;
    border-bottom: 1px solid #333;
}

.risk-view .rangeslider__handle:after {
    display: none;
}

.risk-view .risk-rating-box {
    border-radius: 20px;
    width: 35px;
    height: 35px;
    text-align: center;
    display: inline-block;
}

.risk-view .risk-rating-box.neutral {
    background-color: #ffffff;
    color: #333;
    border-color: #333;
    border-style: solid;
    border-width: 1px;
}

.risk-view .risk-rating-box.neutral {
    background-color: #eee;
    color: #333;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
}

.risk-view .risk-rating-box.good {
    background-color: #47b14b;
    color: #fff;
    border: solid 1px transparent;
}

.risk-view .risk-rating-box.alert {
    background-color: #e2a100;
    color: #fff;
    border: solid 1px transparent;
}

.risk-view .risk-rating-box.bad {
    background-color: #F64431;
    color: #fff;
    border: solid 1px transparent;
}

.risk-view .risk-rating-value {
    padding-top: 8px;
}

.risk-view .risk-rating-header {
    display: inline-block;
    vertical-align: top;
    margin-top: 15px;
}

.risk-view .risk-edit-rating-block {
    display: inline-block;
}

.risk-checkbox-container {
    width: 100%;
    float: left;
}

.risk-checkbox-container.system {
    top: 14px;
    position: relative;
}

.risk-checkbox-container .actions-hover {
    top: -6px;
    left: 10px;
    width: 100px;
}

.risk-checkbox-container input[type=checkbox] + label {
    position: absolute;
}

.risk-checkbox-container input[type=checkbox] + label:before {
    border-color: #000;
}

card-risk .value-text {
    display: inline;
    float: right;
    width: auto;
    font-size: 1.5rem;
    font-weight: 400;
    color: #333333;
}

.card-risk .account-title {
    display: block;
    font-size: 0.875rem;
    color: #666666;
    font-style: italic;
}

.card-risk .text-archived {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
}

.card-risk .date-text {
    font-size: 0.875rem;
    color: #999999;
    display: inline-block;
}

.card-risk .block-3 {
    min-height: 25px;
}

dd.risk-color-display {
    padding-top: 15px;
}

.risk-reason-list, .risk-resolution-list {
    height: 280px;
    overflow-y: scroll;
    padding-top: 10px;
    margin: 0 12px;
}

.risk-resolution-reason {
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-top: 8px;
    padding: 7px 10px 5px 10px;
    text-align: center;
    font-size: 12px;
    display: inline-block;
    margin-left: 10px;
}

.risk-resolution-reason.selected {
    background-color: #DBF4F8;
}

.risk-reason-item {
    border-radius: 4px;
    color: #333333;
    background-color: #dddddd;
    display: inline-block;
    font-size: 0.75rem;
    padding: 4px;
    line-height: 0.75rem;
    margin: 2px 2px 0 0;
}

.account-risk-list .tab-section {
    margin-top: -30px;
}

.risk-board-view .pull-menu-up {
    margin-top: -22px;
}

.risk-board-view .kanban-board .account-logo {
    width: 18px;
    height: 20px;
}

.risk-board-view .kanban-board .account-name {
    font-size: 1rem;
    font-weight: 400;
    overflow-wrap: break-word;
    white-space: normal;
    padding: 4px 0 0 0;
    position: relative;
    top: 2px;
}

.risk-board-view .card-submenu {
    position: relative;
    top: -10px;
}

.risk-board-view .kanban-board .risk-value {
    font-size: 0.875rem;
    font-weight: 400;
}

.risk-board-view .kanban-board .risk-status {
    font-size: 0.75rem;
    font-weight: 400;
}

.risk-board-view .kanban-board .risk-last-updated {
    font-size: 0.75rem;
    font-weight: 400;
}

.risk-board-view .kanban-board .risk-reason {
    white-space: normal;
    font-size: 12px;
    display: inline-block;
}

.account-risk-list .recently-changed, .account-risk-list .kanban-column .card.recently-changed:hover {
    background-color: #F2F7FF;
}

#risk-table-wrapper tr:first-child td:first-child.freeze.table-account-name {
    box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.12);
}

#account-risk-periods .card-empty {
    margin-bottom: 10px;
}

.risk-resolution-flow-heading {
    color: #FAA433;
}

.slider-color-neutral .rangeslider__fill {
    background: #ccc;
    opacity: 0.7;
}

.slider-color-good .rangeslider__fill {
    background: #47b14b;
    opacity: 0.7;
}

.slider-color-alert .rangeslider__fill {
    background: #e2a100;
    opacity: 0.7;
}

.slider-color-bad .rangeslider__fill {
    background: #f64431;
    opacity: 0.7;
}

#AccountRiskDataTable .table-row {
    margin: 1px 0;
}

.risk-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 3px;
}

.risk-card-third {
    vertical-align: top;
    width: 32%;
}

.risk-card-quarter {
    vertical-align: top;
    width: 24%;
}

.risk-card-half {
    vertical-align: top;
    width: 48.7%;
}

.risk-card-full {
    vertical-align: top;
    width: 99%;
}

.risk-card-container .risk-card-data-row {
    padding: 8px 10px 2px 10px;
    font-size: 0.875rem;
    color: #666666;
}

.risk-card-container .card.metric {
    height: 148px;
}

.card-report .risk-card-container .data-area {
    width: calc(100% - 70px);
}

.risk-ratings-header {
    line-height: 1;
    display: inline-block;
    font-size: 24px;
    color: #090909;
    font-weight: 600;
    position: relative;
    top: -13px;
    margin-left: 14px;
}

.risk-rating-description {
    top: -10px;
    position: relative;
    margin-left: 10px;
}

.profile-image.x-small.risk-rating-image-profile {
    width: 32px;
    float: left;
    position: relative;
    margin-left: 10px;
}

.donut-chart.risk-donut-chart-mini {
    float: left;
}

.risk-rating-description-mini {
    top: 6px;
    position: relative;
    margin-left: 10px;
}

.risk-rating-description-mini.job {
    top: 0px;
}

.risk-rating-job-title {
    position: relative;
    left: 10px;
}

.qbr-details .risk-card-full .qbr-rating-block {
    display: inline-block;
    vertical-align: unset;
    margin-bottom: 0px;
}

.text-show-hide-larger {
    font-size: 16px !important;
}

.show-hide-arrow {
    font-family: monospace;
    font-weight: 600;
}

.show-less .show-hide-arrow {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    display: inline-block;
    position: relative;
    top: 4px;
    left: -2px;
}

#account-risk-title.at-risk svg {
    height: 20px;
    width: 20px;
    position: absolute;
    margin-left: 5px;
}

#account-risk-title.at-risk svg path {
    fill: #ff5f28;
}

#account-risk-title.active.at-risk svg path {
    fill: #11b5cc;
}

#account-risk-title.at-risk {
    padding-right: 35px;
}

#account-risk-title.at-risk:hover svg path {
    fill: #11b5cc;
}

.account-at-risk svg {
    height: 18px;
    width: 18px;
    position: relative;
    left: -3px;
}

.account-at-risk svg path {
    fill: #ff5f28;
}

.account-at-risk.module-action:hover svg path {
    fill: #11b5cc;
}

.account-title-line.at-risk {
    margin-left: 28px;
    top: -2px;
    position: relative;
}

.account-title-line.at-risk svg {
    height: 30px;
    width: 30px;
    margin-left: 20px;
}

.account-title-line.at-risk svg path:not([fill]) {
    fill: #f64431;
}

.rating-update-info svg {
    width: 18px;
    height: 18px;
    position: absolute;
    margin-left: 2px;
    margin-top: -2px;
}

.rating-update-info svg path {
    fill: #888;
}

.qbr-ratings-header .popper,
.qbr-ratings-header .tooltip {
    position: absolute;
    z-index: 9999;
    background: #f5fbfd;
    color: red;
    width: 400px;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    padding: 10px;
    text-align: left;
}

.account-list-submenu {
    left: -25px;
    position: relative;
    top: -10px;
}

.account-list-submenu.vert-dropdown .dropit-submenu {
    top: 10px;
}

.account-list-submenu.vert-dropdown.dropit li a {
    background: transparent;
    display: block;
    border-radius: 20px;
    padding: 0px;
    padding-left: 16px;
    top: 9px;
    position: relative;
    height: auto;
}

.account-list-submenu.vert-dropdown.dropit li a:hover {
    background: transparent;
}

.account-list-submenu.vert-dropdown.dropit a:hover svg path {
    fill: #11b5cc;
}

.account-list-submenu .dropdownmenu-listitem {
    padding-top: 5px;
    padding-bottom: 5px;
}

.account-list-submenu ul li, .account-list-submenu ol li {
    margin-bottom: 0px;
}

.add-risk-pull-down {
    top: 5px;
    position: relative;
}

.view-risk-pull-down {
    top: 5px;
    position: relative;
}

.view-risk-pull-down svg path {
    fill: #11b5cc;
}

.risk-details-title {
    font-size: 18px;
    color: #333;
}

.risk-resolution-task-icon.edit-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-left: 8px;
}

.risk-resolution-task-icon.add-icon {
    top: 2px;
    position: relative;
    margin-left: 7px;
    padding-right: 1px;
}

.risk-resolution-task-icon.add-icon svg {
    width: 14px;
    height: 14px;
}

.risk-resolution-task-icon svg path {
    fill: #666;
}

.risk-task .svg-info-icon path {
    fill: #666;
}

.risk-task.action-text:hover svg path {
    fill: #11b5cc;
}

#risk-table-wrapper .freeze.table-account-name {
    background-color: #ffffff;
    border-right: 1px solid #dddddd;
}

#risk-table-wrapper .recently-changed .freeze.table-account-name {
    background-color: #F2F7FF;
    border-right: 1px solid #dddddd;
}

#risk-table-wrapper .table-row {
    gap: 0px;
}

.account-risk-icon.view-icon svg {
    height: 16px;
    width: 16px;
    margin-left: 6px;
    top: 2px;
    position: relative;
}

.account-risk-icon.view-icon svg path {
    fill: #666;
}

.link-hover:hover .account-risk-icon.view-icon svg path {
    fill: #11b5cc;
}

.document-category-edit {
    margin-left: 38px !important;
    padding-right: 38px !important;
}

.recategorize-documents span.document-icon {
    top: 4px;
    position: relative;
    margin-right: 8px;
}

.recategorize-documents span svg {
    width: 20px;
    height: 20px;
}

.recategorize-documents .doc-details {
    top: 4px;
}

.account-tab-container {
    display: inline-block;
}

.notes-search-results {
    padding-top: 0.875rem !important;
}

.triggered-events-macros-section .email-icon svg {
    width: 16px;
    height: 16px;
    position: relative;
    left: 4px;
}

.triggered-events-macros-section .macro-section:hover .email-icon {
    display: inline-block;
}

.triggered-events-macros-section .macro-section .email-icon {
    position: absolute;
    display: none;
}

.triggered-events-macros-section .macro-section .email-icon svg {
    width: 16px;
    height: 16px;
    position: relative;
    left: 4px;
}

.triggered-events-macros-section .macro-section:hover .email-icon svg path {
    fill: #666666;
}

.triggered-events-macros-section .macro-section:hover .email-icon:hover svg path {
    fill: #333333;
}

.triggered-events-macros-section .macro-section .copied-notification {
    margin-left: 23px;
}

.healthBreakdownContainerV2 .tooltip {
    background: #f5fbfd;
}

.healthBreakdownContainerV2 .tooltip .header-text {
    font-size: 1rem;
    font-weight: 400;
    color: #333;
}

.healthBreakdownContainerV2 .tooltip .content-text {
    font-size: 0.875rem;
    font-weight: 400;
    color: #999;
}


/*|/\/\/\/\/\/\/\/\/\/\/\/\|
Dashboards
|/\/\/\/\/\/\/\/\/\/\/\/\|*/

.card.dashboard {
    min-height: 224px;
}

.card.dashboard.no-min {
    min-height: inherit;
}

.dashboard .title {
    padding: 10px 8px;
    background-color: #dddddd;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid #bbbbbb;
    min-height: 62px;
}

@media (min-width: 1440px) {
    .dashboard .title {
        min-height: 42px;
    }
}

.dashboard .title .title-name {
    display: inline-block;
    width: calc(100% - 24px);
}

.dashboard .title-icon {
    width: 24px;
    display: inline-block;
    vertical-align: top;
}

.dashboard .title-icon svg {
    width: 16px;
    height: 16px;
    position: relative;
    top: 0px;
}

.dashboard .title-icon svg path {
    fill: #888888;
}
.dashboard .inline-title {
    font-weight: 500;
    text-align: center;
}

.dashboard .graph-25 {
    width: 25%;
}

.dashboard .graph-75 {
    width: 75%;
}

.dashboard .change-title {
    font-size: 0.75rem;
    color: #999999;
    font-family: 'Roboto Condensed';
}

.dashboard .value-title {
    padding: 8px 0px 2px 0px;
    color: #333333;
    font-weight: 500;
}

.dashboard .value-item {
    padding: 8px 10px 2px 10px;
    font-size: 2.75rem;
    text-align: left;
    color: #333333;
}

@media (min-width: 1440px) {
    .dashboard .value-item {
        font-size: 3rem;
    }
}

.dashboard .value-item.good {
    color: #47b14b;
}

.dashboard .value-item.bad {
    color: #c51111;
}

.dashboard .change-item {
    padding: 0px 10px 12px 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.dashboard .change-item.inherit {
    position: inherit;
}

.dashboard .graph-25 .change-item {
    width: 25%;
}

.dashboard .change-item .change-value {
    font-size: 1.2rem;
    display: inline-block;
    margin-right: 8px;
    color: #666666;
    line-height: 24px;
}

@media (min-width: 1440px) {
    .dashboard .change-item .change-value {
        font-size: 1.6rem;
    }
}

.dashboard .change-item .change-container {
    border-radius: 8px;
    display: inline-block;
    padding: 0px 6px 2px 6px;
    vertical-align: top;
    float: right;
}


.dashboard .change-item.good .change-container {
    background-color: rgba(71, 177, 75, 0.1);
    border: 2px solid #47B14B;
}

.dashboard .change-item.bad .change-container {
    background-color: rgba(197, 17, 17, 0.1);
    border: 2px solid #c51111;
}

.dashboard .change-item.neutral .change-container {
    background-color: rgba(153, 153, 153, 0.1);
    border: 2px solid #999999;
}


.dashboard .change-item .change-icon svg {
    width: 20px;
    height: 20px;
    position: relative;
    top: 4px;
}

.dashboard .value-prev .change-container .change-icon svg {
    width: 18px;
    height: 18px;
    position: relative;
    top: 4px;
}

.dashboard .change-item.good svg rect, .dashboard .change-item.good svg polygon, .dashboard .good .value-prev .change-container .change-icon svg polygon {
    fill: #47b14b;
}

.dashboard .change-item.bad svg rect, .dashboard .change-item.bad svg polygon, .dashboard .bad .value-prev .change-container .change-icon svg polygon {
    fill: #c51111;
}

.dashboard .change-item.neutral svg path, .dashboard .neutral .value-prev .change-container .change-icon svg path {
    fill: #999999;
}

.dashboard .change-item .change-percent {
    font-weight: 500;
    margin-left: 4px;
    vertical-align: top;
    padding-top: 4px;
    display: inline-block;
}

.dashboard .change-item.good .change-percent {
    color: #47b14b;
}

.dashboard .change-item.bad .change-percent {
    color: #c51111;
}

.dashboard .change-item.neutral .change-percent {
    color: #999999;
}

.dashboard .person-list {
    margin: 2px 4px 8px 4px;
}

.dashboard table.top-list th {
    text-align: left;
    padding: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #666;
    border-bottom: solid #ddd 1px;
}

.dashboard table.top-list td {
    width: 30%;
}

.dashboard table.top-list td:first-child, .dashboard table.top-list th:first-child {
    width: 40%;
    border-bottom: none;
}

.dashboard table.top-list tr.list-row {
    border-bottom: solid 1px #ddd;
    height: 58px;
}

.dashboard table.top-list tr.list-row:last-child {
    border-bottom: none;
}

.dashboard table.top-list tr.list-row td:not(:first-child) {
    border-left: solid 1px #ddd;
}

.dashboard .value-container {
    vertical-align: top;
    padding: 0 4px 0 0;
}

.dashboard .value-container > .value-item {
    font-size: 1rem;
    padding: 0 2px;
    display: block;
    text-align: center;
    font-weight: 500;
}

@media (min-width: 1440px) {
    .dashboard .value-container > .value-item {
        font-size: 1.75rem;
        width: calc(100% - 62px);
        display: inline-block;
        text-align: left;
        font-weight: 400;
    }
}

.dashboard .value-total.center > .value-item {
    font-size: 2rem;
    padding: 0 2px;
    display: block;
    text-align: center;
    font-weight: 500;
    color: #333333;
}

@media (min-width: 1440px) {
    .dashboard .value-total.center > .value-item {
        font-size: 2.75rem;
        font-weight: 400;
    }
}

.dashboard .value-total > .value-title {
    text-align: center;
    font-size: 1.25rem;
    padding: 4px 0 0 0;
}

.dashboard .value-container .value-prev {
    display: block;
    padding-top: 6px;
    text-align: center;
}

@media (min-width: 1440px) {
    .dashboard .value-container .value-prev {
        width: 62px;
        display: inline-block;
        vertical-align: top;
        text-align: center;
    }
}

.dashboard .top-list .value-container .value-prev > .value-item {
    font-size: .75rem;
    font-weight: 500;
    line-height: 12px;
    color: #666;
    padding: 0 0 0 4px;
    text-align: center;
    display: inline-block;
    width: 40%;
}

@media (min-width: 1440px) {
    .dashboard .top-list .value-container .value-prev > .value-item {
        font-size: 1rem;
        display: block;
        width: 100%;
        padding: 0;
    }
}


.dashboard .value-container .value-prev .change-percent {
    font-size: 0.75rem;
    font-weight: 700;
    padding-left: 2px;
}

.dashboard .top-list .change-container {
    float: none;
    width: 60%;
    display: inline-block;
    text-align: right;
}

@media (min-width: 1440px) {
    .dashboard .top-list .change-container {
        border-radius: 8px;
        display: inline-block;
        padding: 2px 4px;
        vertical-align: top;
        float: right;
        width: 100%;
    }
}

.dashboard .top-list .change-item .change-icon svg {
    width: 18px;
    height: 18px;
    position: relative;
    top: 4px;
}

@media (min-width: 1440px) {
    .dashboard .top-list .change-item .change-icon svg {
        width: 20px;
        height: 20px;
        position: relative;
        top: 4px;
    }
}

.dashboard .top-list .value-prev .change-container .change-icon svg {
    width: 16px;
    height: 16px;
    position: relative;
    top: 4px;
}

@media (min-width: 1440px) {
    .dashboard .top-list .value-prev .change-container .change-icon svg {
        width: 18px;
        height: 18px;
        position: relative;
        top: 4px;
    }
}

.dashboard .good .value-container .value-prev .change-percent {
    color: #47b14b;
}

.dashboard .bad .value-container .value-prev .change-percent {
    color: #c51111;
}

.dashboard .neutral .value-container .value-prev .change-percent {
    color: #999;
}

.dashboard .person-details {
    padding: 4px;
}

.dashboard .person-details .person-image img {
    width: 28px;
    height: 28px;
    margin-top: 2px;
}

.dashboard .person-info {
    padding: 0px 4px;
    width: calc(100% - 28px);
}

.dashboard .person-info .person-name {
    font-size: 0.75rem;
    font-weight: 500;
}

@media (min-width: 1440px) {
    .dashboard .person-info .person-name {
        font-size: 0.875rem;
    }
}

.dashboard .person-info .person-title {
    font-size: 0.75rem;
    color: #666666;
    display: block;
}

.dashboard .donut-center {
    width: 100px;
    text-align: center;
}

.dashboard .donut-center.pull-down {
    position: relative;
    top: -6px;
}

.dashboard .donut-center.small {
    position: relative;
} 


.dashboard .donut-center .donut-title {
    font-size: 2.25rem;
    font-weight: 500;
    color: #333333;
    text-align: center;
}

.dashboard .donut-center.small .donut-title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 0.8rem;
    display: inline-block;
    width: 62px;
    margin-left: 18px;
}

.dashboard .donut-center .donut-sub-title {
    font-size: 1rem;
    font-weight: 700;
    color: #999999;
}

.dashboard .donut-center.small .donut-sub-title { 
    font-size: 0.75rem;
    display: inline-block;
    width: 22px;
    position: relative;
    top: -3px;
    left: 3px;
}


.dashboard .donut-center.good .donut-sub-title {
    color: #47b14b;
}

.dashboard .donut-center.bad .donut-sub-title {
    color: #c51111;
}

.dashboard .donut-chart {
    display: inline-block;
    width: 200px;
}

.dashboard .donut-chart.full-width {
    width: 100%;
}

.donut-table-container {
    width: calc(100% - 220px);
    float: right;
    margin: 20px 10px;
}

.dashboard .donut-table {
    width: 100%;
}

.donut-table .circle-item .circle-color {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin: 4px;
    background-color: #47b14b;
    border-radius: 15px;
    vertical-align: top;
}


.dashboard.user-list .rank-section, .rga .user-list .person-section, .dashboard.team-list .rank-section {
    float: left;
    padding: 4px;
    margin :4px;
    border: 1px solid #dddddd;
    width: 36px;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
}

.dashboard.user-list.wide .rank-section {
    width: 50px;
}

.dashboard.user-list .person-section, .dashboard .team-section {
    width: calc(100% - 44px);
    border: none;
    float: left;
}

.dashboard.user-list .person-section > span, .dashboard .team-section > span
{
    display: inline-block;
    vertical-align: top;
}

.dashboard.user-list .person-section .profile-image
{
    margin: 4px 8px;
    width: 50px;
}

.dashboard.user-list .person-section .profile-image img 
{
    width: 48px;
    height: 48px;
}

.dashboard.user-list .profile-details, .dashboard.team-list .profile-details {
    width: calc(60% - 50px);
}

.dashboard.user-list .qbr .profile-details, .dashboard.team-list .qbr .profile-details {
    width: calc(50% - 50px);
}

.dashboard.user-list .oppy .profile-details, .dashboard.team-list .oppy .profile-details {
    width: calc(50% - 50px);
}

.dashboard .team-section .profile-details {
    margin: 4px 8px;
    font-size: 1.25rem;
}

.dashboard.user-list .person-section .title-text {
    font-size: 0.875rem;
    color: #999999;
    padding: 0;
}

.dashboard.user-list .profile-overall, .dashboard.team-list .profile-overall {
    width: calc(40% - 20px);
    min-height: 64px;
}

.dashboard.team-list .profile-overall {
    width: calc(40%);
    min-height: 64px;
}

.dashboard.user-list .qbr .profile-overall, .dashboard.team-list .qbr .profile-overall {
    width: calc(50% - 20px);
    min-height: 64px;
}

.dashboard.team-list .qbr .profile-overall {
    width: calc(50%);
    min-height: 64px;
}

.dashboard.user-list .oppy .profile-overall, .dashboard.team-list .oppy .profile-overall {
    width: calc(50% - 20px);
    min-height: 64px;
}

.dashboard.team-list .oppy .profile-overall {
    width: calc(50%);
    min-height: 64px;
}

.dashboard .card.user-activity .profile-overall {
    padding-bottom: 8px;
}

.dashboard.user-list .profile-overall .total-health, .dashboard.team-list .profile-overall .total-health {
    width: 110px;
    float: right;
}

.dashboard.user-list .profile-overall .total-health .card, .dashboard.team-list .profile-overall .total-health .card {
    background-color: transparent;
    left: -52px;
    top: -8px;
}

.dashboard.user-list .profile-overall .total-accounts, .dashboard.team-list .profile-overall .total-accounts {
    width: 60px;
    text-align: right;
    float: right;
}

.dashboard .profile-overall .total-accounts.auto {
    width: auto;
    float: right;
}

.dashboard .profile-overall .total-activity {
    width: auto;
    float: right;
    margin-left: 20px;
}
.dashboard.user-list .profile-overall .total-label, .dashboard.team-list .profile-overall .total-label {
    display: inline-block;
    margin-top: 8px;
    font-weight: 500;
    font-size: 0.875rem;
}

.dashboard.user-list .profile-overall .total-label .total-value, .dashboard.team-list .profile-overall .total-label .total-value {
    display: block;
    text-align: center;
    font-weight: 400;
    font-size: 1.25rem;
}

.dashboard .profile-graphs .graph-title {
    color: #666666;
    font-size: 0.875rem;
    font-weight: 500;
}

.dashboard .qbr-info 
{
    font-size: 0.75rem !important;
}

.dashboard .qbr-info-value
{
    font-size: 0.75rem;
    white-space: nowrap;
}

.dashboard td.qbr-good
{
    font-size: 0.875rem;
    color: #ffffff;
    background-color: #47b14b;
}

.dashboard .total-coverage
{
    width: 120px;
    float: right;
    text-align: center;
}

.dashboard .total-coverage .coverage-graph svg
{
    width: 46px;
    height: 46px;
}

.dashboard .total-coverage .coverage-graph .percent
{
    display: inline-block;
    vertical-align: top;
    font-size: 1.25rem;
    padding: 10px 4px 0 0;
}

.dashboard .total-rating {
    width: 120px;
    float: right;
    text-align: center;
}

.dashboard .total-rating .donut-chart {
    width: 50px;
} 

.dashboard .total-opportunities {
    float: right;
    min-width: 90px;
    margin: 0 0 0 20px;
    text-align: center;
}

.dashboard .reason-table .reason-name {
    padding: 6px 0 0 0;
    width: 50%;
    display: inline-block;
}

.dashboard .reason-table .reason-value {
    padding: 6px 0 0 0;
    width: 50%;
    text-align: right;
    display: inline-block;
}

.health-breakdown {
    margin: 0px;
}

.health-breakdown .breakdown-row {
    margin: 0px;
}

.health-breakdown .breakdown-row span {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
}

.health-breakdown .breakdown-row .breakdown-label {
    width: 200px;
}

.health-breakdown .breakdown-row .breakdown-label  .breakdown-label-info {
    color: #999999;
    margin: 0 4px;
    font-weight: 400;
}

.health-breakdown .breakdown-row .breakdown-graph {
    width: calc(100% - 240px);
    top: 4px;
    position: relative;
}

.health-breakdown .breakdown-row .breakdown-graph .breakdown-full {
    width: 100%;
    border-radius: 2px;
    background-color: #ddd;
    height: 8px;
}

.health-breakdown .breakdown-row .breakdown-graph .breakdown-full .breakdown-amount
{
    position: relative;
    height: 8px;
    border-radius: 2px;
    top: -4px;;
}


.health-breakdown .breakdown-row .breakdown-percent {
    width: 40px;
    text-align: center;
}

.circle-item .circle-color.green {
    background-color: #47b14b;
}

.circle-item .circle-color.yellow {
    background-color: #e2a100;
}

.circle-item .circle-color.red {
    background-color: #f64431;
}

.circle-item .dotted-line {
    display: inline-block;
    vertical-align: bottom;
    border-bottom: dotted 2px #DDDDDD;
    width: calc(100% - 60px);
}

@media (min-width: 1440px) {
    .circle-item .dotted-line {
    width: calc(100% - 80px);
}
}

.circle-item .circle-value {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    width: 30px;
    padding: 0px 4px;
}

.dashboard .donut-sub-title .donut-icon {
    padding-right: 4px;
    display: inline-block;
}

.pipeline .row-item {
    border-bottom: 1px solid #dddddd;
}

.pipeline .row-item > span {
    vertical-align: top;
}

.pipeline .stage-info {
    display: inline-block;
    min-height: 90px;
    padding: 8px;
    width: 35%;
}

.pipeline .stage-info .stage-name {
    font-size: 1rem;
    font-weight: 500;
    color: #333333;
}

@media (min-width: 1440px) {
    .pipeline .stage-info .stage-name {
        font-size: 1rem;
    }
}

.pipeline .stage-info .stage-item {
    font-family: 'Roboto Condensed';
    font-size: 0.75rem;
    font-weight: 300;
    color: #999999;
}

@media (min-width: 1440px) {
    .pipeline .stage-info .stage-item {
        font-size: 0.875rem;
        font-weight: 400;
    }
}

.pipeline .stage-value {
    display: inline-block;
    width: 45%;
}

.pipeline .stage-value-text {
    display: inline-block;
    width: 20%;
    padding: 8px;
}

.pipeline .stage-value-title {
    font-family: 'Roboto Condensed';
    font-size: 0.75rem;
    font-weight: 300;
    color: #999999;
}


@media (min-width: 1440px) {
    .pipeline .stage-value-title {
        font-size: 0.875rem;
    }
}

.pipeline .stage-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #333333;
}

@media (min-width: 1440px) {
    .pipeline .stage-value {
        font-size: 1rem;
    }
}

.pipeline .stage-current {
    height: 20px;
    background-color: #7cb5ec;
    margin: 4px 8px 4px 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pipeline .stage-current:hover {
    background-color: #66aced;
    cursor: pointer;
}

.pipeline .stage-prev {
    height: 20px;
    background-color: #ecc17c;
    margin: 4px 8px 4px 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pipeline .stage-prev:hover {
    background-color: #edb966;
    cursor: pointer;
}

.top-table .list-row {
    width: 100%;
    padding: 4px 8px;
}

.top-table .list-row:not(:last-of-type) {
    border-bottom: 1px #dddddd solid;
}

.top-table .list-row span {
    display: inline-block;
}

.top-table .list-row .account-name {
    font-size: 16px;
    font-weight: 500;
    padding: 2px 6px;
    width: calc(100% - 100px);
}

.top-table .account-list-score {
    font-size: 14px;
    border-radius: 4px;
    height: 28px;
    width: 28px;
    line-height: 24px;
    top: 4px;
    padding: 2px;
    text-align: center;
    color: #FFFFFF;
}

.top-table .green .account-list-score {
    background-color: #47b14b;
}

.top-table .yellow .account-list-score {
    background-color: #e2a100;
}

.top-table .red .account-list-score {
    background-color: #f64431;
}

.top-table .list-row .value-change {
    width: 70px;
    vertical-align: top;
}

.top-table .list-row .value-change .rank-icon {
    display: inline-block;
    width: 16px;
    vertical-align: top;
}


.top-table .list-row .value-change .rank-icon svg {
    width: 16px;
}

.top-table .value-change .rank-icon path {
    fill: #666666;
}


.top-table .list-row .value-change .previous-rank {
    display: inline-block;
    width: 54px;
    font-size: 0.75rem;
    text-align: center;
}

.top-table .list-row .value-change .previous-rank .rank-value {
    font-weight: 500;
    color: #666666;
}

.donut-table td.text-item {
    border-bottom: 1px solid #dddddd;
    font-size: 0.875rem;
    color: #666666;
}

.donut-table td.text-value {
    font-weight: 500;
    padding: 0 4px;
    width: 24px;
    text-align: center;
}