h3 {
    font-weight: 600;
    font-size: 19px;
}
/*TESTE SINGUP STEP ONE*/
.pop-style {
    color: lightgreen;
    position: absolute;
    left: 10px;
    user-select: none;
    top: 10px;
}



.form-errors-dashboard {
    left: 20%;
    text-align: center;
}

#explication-btn {
    cursor: pointer;
}

.scores-menu{
    position: absolute;
    bottom: 0;
    padding-left: 15px;
    padding-bottom: 30px;
    padding-right: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-left: 40px;
}

@media screen and (max-width: 1169px) {
    .scores-menu {
        margin-left: 0px;
    }
}

.client-option{

}

.client-selected-option{
    width: auto;
    font-size: 15px;
}

.client-selected-status{
    width: 10px;
    height: 10px;

    border-radius: 10px;
    display: inline-block;

    margin-right: 10px;
}

.client-selected-name{
    width: 50px;
}

.client-status{
    width: 10px;
    height: 10px;

    border-radius: 10px;
    display: inline-block;
    margin-right: 10px;
}

.client-name{
    display: inline;
}

.client-status__active{
    background-color: #35c2a4;
}

.client-status__inactive{
    background-color: #6e7af5;
}

.client-status__churn{
    background-color: #a967fb;
}


.scores-menu__title{
    text-align: left;
    font-weight: bold;
    font-size: 15px;
}

.scores-menu .menu-score, .scores-menu .scores-menu__title{
    width:100%;
    margin-top: 20px !important;
}

.menu-score {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    cursor: pointer;
}

.menu-score .menu-score__link{
    color: #827e94;
    position: static;
    padding: 0;
}

.menu-score__title, .menu-score__value{
    display: inline-block;
    margin: 0;
}

.menu-score__progress-bar__progress {
    height: 3px;
    width: 20%;
    padding: 0px;
    margin: 0px;
    background-color: #F1F5F9;
    position: absolute;
    right: 0;
}

.menu-score__progress-bar__progress--risk, .menu-score__progress-bar__progress--setup {
    background: linear-gradient(90deg, #ABA9B5, rgb(110, 122, 245), rgb(53, 194, 164));
    height: 3px;
    width: 0%;
}

.scores-animation {
    animation: grow-bar 3s ease-in;
}

.menu-score__progress-bar {
    position: relative;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #ABA9B5, rgb(110, 122, 245), rgb(53, 194, 164));
}

.menu-score__progress-bar--risk, .menu-score__progress-bar--setup {
    height: 3px;
    position: relative;
}

@keyframes grow-bar {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.progress-bar {
    width: 100%;
    height: 5px;
    background-color: rgba(0,0,0,0.1);
}

.progress-bar .percentage-bar {
    border-radius: 2px;
    height: 5px;
    background-color: #8080e3;
    width: 20%;
    padding: 0px;
    margin: 0px;
}

.percentage-bar .pareto-gradient-bar-colors {
    height: 8px;
    position: relative;
    top: -2;
}

.progress-bar .percentage-bar .ref-line {
    position: relative;
    left: 80%;
    top: -5px;
    width: 3px;
    height: 300%;
    background-color: #DCDCDC;
}

.pareto-green {
    background-color: #35c2a4 !important;
    fill: #35c2a4 !important;
}

.pareto-blue {
    background-color: #6e7af5 !important;
    fill: #6e7af5 !important;
}

.pareto-purple {
    background-color: #a967fb !important;
    fill: #a967fb !important;
}

.pareto-gradient-bar-colors {
    background: linear-gradient(90deg, #fb8289, #ABA9B5, #73e293);
}

.navbar-top-links>li>a {
    line-height: 60px;
}

.navbar-top-links>li.right-side-toggle a:focus {
    background-color: rgba(0, 0, 0, 0.07);
}

.navbar-top-links>li>a>i {
    line-height: 60px;
}

.notifications {
    margin-top: 18px;
    margin-right: 20px;
}

.notifications-list {
    border: 0px;
    box-shadow: 0 7px 14px 0 rgba(50, 50, 93, .1), 0 3px 6px 0 rgba(0, 0, 0, .07);
}

@media screen and (max-width: 479px) {
    .notifications-list {
        left: -260px;
        position: absolute;
        width: 280px;
        z-index: 999;
    }
}

.all-notifications-wrapper {
    border-top: 1px solid rgba(0, 0, 0, .1);
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.all-notifications-link {
    color: #6470E5 !important;
}

.all-notifications-link:hover {
    text-decoration: underline !important;
}

.notify-badge {
    position: relative;
    top: -14;
    right: 14;
    background-color: #5F6BE0;
    padding: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 8px;
    font-size: 8pt;
    color: white;
    font-weight: bolder;
}

.notifications-list > .info {
    padding: 10px;
    padding-top: 4px;
    text-align: right;
    color: #8273E7;
    display: block;
    font-size: 12px;
}

.drop-item {
    padding: 10px;
    display: block;
    min-width: 250px;
    max-width: 500px;
    border-top: 1px solid #f1f1f1;
    color: #4e5563;
    font-size: 12px;
}
.drop-item:hover {
    background-color: #F0F5F9;
    color: #4e5563;
}
.drop-item.unread {
    font-weight: bolder;
}

.drop-item.read {
    color: #565e6e;
}

.drop-item.unread > .unread-indicator {
    width: 5px;
    height: 5px;
    border-radius: 10px;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 3px;
    background-color: #35c2a4;
}

.navbar-default.sidebar{
    z-index: 2;
}

.modal {
  text-align: center;
  padding: 0;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

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

.modal .modal-title {
    color: #96a2b4;
}

.modal-footer .btn-default:hover{
    color: #0f0f0f;
}

.modal a:hover{
    color: #0f0f0f;
}

#mobile-menu{
    width: 40px;
    height: 40px;

    position: absolute;
    left: 10px;
    top: 10px;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    align-items: center;
}

.logo-menu-mobile {
    background-image: url("../../img/menu-icon.png");
    background-repeat: no-repeat;
    height: 100%;
    margin-top: 15px;
    width: 100%;
}

.menu-mobile-items {
    margin-top: 25px;
    margin-left: -8px;
}

.menu-mobile__item {
    border-bottom: 1px solid rgba(120, 130, 140, .28);
}

.menu-mobile-items .menu-mobile__item:last-child {
    border-bottom: none;
}

.ti-menu{
    line-height: 0;
}

.ti-menu:visited{
    color: #01c0c8;
}

.ti-menu:hover{
    color: #01c0c8;
}

.navbar-header{
    background-color: #261f41;
    color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-bottom: 10px;
}

@media screen and (max-width: 479px) {
    .navbar-header {
        height: 60px;
        padding-bottom: 0px;
    }
}

.navbar-default{
    z-index: 1;
}

.user-profile {
    padding: 0;
    height: 20px;
}

.user-profile img {
    margin-top: 14px !important;
    margin-right: 10px !important;
}

.user-profile .user-pro-body img {
    width: 30px;
}

.user-profile .user-pro-body .dropdown-menu {
    border-radius: 6px;
    left: -270px;
    padding-right: 20px;
    top: 45px;
}

.ti-menu {
    line-height: 60px;
}

.ti-close {
    line-height: 60px;
}

.logo-dashboard {
    margin-left: 2px;
    margin-top: 13px;
    height: 40px;
}

.logo-text {
    margin-top: 13px;
    height: 40px;
}

.user-pro-body .username-nav {
    float: left;
    padding-right: 7px;
    padding-top: 5px;
    overflow: hidden;
}

.hidden {
    display: none;
}

.link-account {
    margin-left: 10%;
    padding-top: 18%;
}

.login-box__button--link-account {
    margin-bottom: 50px;
    font-weight: 100;
    padding: 12px 50px;
}

.login-box__button--link-account:active {
    color: #ffffff;
}

.link-account__title {
    color: #444444;
    font-size: 24px;
    font-weight: 100;
    text-align: center;
}

.link-account__text {
    font-size: 12px;
    margin-bottom: 12px;
    text-align: center;
}

@media screen and (max-width: 414px) {
    .link-account {
        padding-bottom: 45px;
    }
    .link-account__text {
        font-size: 11px;
        margin-bottom: 7px;
    }
    .login-box__button--link-account {
        padding: 5px 19px;
    }
}

#pareto-overview-aggregation-date{
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 320px) {
    .selectize-control {
        width: 160px;
    }

    .dropdown-accounts {
        margin-right: 0 !important;
    }
}

@media (max-width: 768px) {
    #pareto-overview-aggregation-date{
        display: flex;
        justify-content: flex-start;
    }


    .div-center-logo {
        width: 60%;
    }

    .dropdown-accounts {
        margin-right: 70px;
    }

    .sidebar-nav>ul {
        z-index: 1000;
        position: absolute;
        width: 100%;
        background-color: #f1f5f9;
        /*background-color: #353c48;*/
        opacity: 0.9;
    }
    .link-account {
        width: 94%;
        margin: 3%;
    }
    #pareto-quality-score {
        height: 240px !important;
    }
    #pareto-quality-score-area {
        height: 350px !important;
    }
    #structure-score {
        height: 300px;
    }
    #structure-score-info {
        min-height: 50px !important;
        padding-top: 0px !important;
        width: 100%;
        margin-right: 0%;
        margin-left: 0%;
    }

    .navbar-header-wrapper{
        position: fixed;
        width: 100%;
        top:0;
        left: 0;
        z-index: 2;
    }

    #mobile-menu{
        position: fixed;
        z-index: 3;
    }

    .structure-set{
        z-index: 0;
    }

    .index-logo{
        display: none;
    }

    .user-profile .user-pro-body .dropdown-menu {
        left: -320px;
        top: 45px;
    }
}

@media (max-width: 991px) {
    #structure-score-info {
        padding-top: 0px !important;
        min-height: 0px !important;
    }

    #structure-score {
        top: -57px !important;
    }
}

#pareto-score-overview {
    height: 370px;
    width: 100%;
}

.adwords-logo {
    margin: -10px 0;
    width: 40%;
}

@media screen and (max-width: 414px) {
    .adwords-logo {
        width: 100%;
    }
}

.widget {
    background-color: white;
    border-radius: 4px;
    border: #261f4120 1px solid;
    color: #414141;
    position: relative;
}

/* mobile media queries */
@media screen and (max-width: 414px) {
    .widget {
        overflow: hidden;
    }

    .notifications-margin-top {
        margin-top: 20px;
    }
}

.settings-form__label {
    font-size: 12px;
}

.settings-form__input__line {
    border-bottom: 1px solid #7b68ee;
    width: 0%;
}

.settings-form__input {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    background-color: #ffffff;
    display: block;
    padding-bottom: 5px;
    width: 100%;
}

.settings-form__input:focus + .settings-form__input__line {
    transition: .2s width ease-in-out;
    width: 100%;
}

.settings-form__select {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    display: block;
    padding-bottom: 5px;
    width: 140px;
}

.settings__password-button:hover {
    color: #4e5564;
    opacity: 1;
}

.settings__select {
    background-color: rgba(120, 130, 140, .2);
    border: 1px solid rgba(120, 130, 140, .2);
    color: #4e5564;
    cursor: pointer;
    padding: 8px 12px;
    width: 140px;
}

.settings__inputlabel {
    background-color: rgba(120, 130, 140, .2);
    border: 1px solid rgba(120, 130, 140, .2);
    color: #4e5564;
    cursor: pointer;
    min-width: 140px;
    padding: 8px 12px;
}

.settings__inputfile {
    display: none !important;
}

.settings__button {
    background-color: #6470E5;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: -12px;
    padding: 10px 20px;
}

.widget .box-title {
    color: #303030;
    font-weight: 600;
    font-size: 18px;
}

.white-box .box-title {
    text-transform: none;
}
.settings-menu h4 {
    font-size: 16px;
}
.settings-menu__subtitle {
    padding-left: 0 !important;
}

#page-wrapper {
    background-color: #ffffff;
    padding: 15px 30px 0 30px;
    transition: background 0.7s;
}

@media screen and (max-width: 479px) {
    #page-wrapper {
        padding: 0;
    }
}
    
.container {
    width: 100%;
}

.content {
    display: inline-flex;
}

.flex-direction {
    flex-direction: row;
}

.score {
    width: 100%;
}

#pareto-quality-score {
    height: 140px;
}

#pareto-quality-score-monthly {
    height: 251px;
}

#pareto-quality-score-area {
    height: 523px;
}

#structure-score {
    height: 500px;
}

#structure-score-donuts {
    height: 100px;
    width: 100%;
}

#structure-score-info {
    display: block;
}

#structure-score-info .selectize-input:after {
    border-color: #303030 transparent transparent transparent;
}

.structure-set {
    margin-bottom: 0;
    min-height: 668px;
    overflow: auto;
    padding-bottom: 0;
}

.structure-set2 {
    margin-bottom: 0;
    min-height: 655px;
    padding-bottom: 0;
}

#structure-score-info div {
    /*margin: 0 auto;*/
}

#structure-score-info span {
    text-align: center;
    display: table;
    color: #303030;
    margin-left: 2px;
}

#structure-score-time {
    min-height: 550px;
}

.category-metrics__title{
    color: #000;
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 10px 0;
}

.spinner {
    width: 35px !important;
    height: 35px !important;
    margin: 0 auto;
    z-index: 100;
    position: absolute;
    left: calc(50% - 17.5px);
    top: calc(50% - 17.5px);
}

.small-spinner {
    width: 15px !important;
    height: 15px !important;
    margin: 0 auto !important;;
    z-index: 100;
}

#pareto-quality-score-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
}

#pareto-quality-score-monthly-spinner {
    top: 212.5px !important;
}

#pareto-quality-score-area-spinner {
    top: 433px !important;
}

#pareto-score-overview-spinner {
    top: 292px !important;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.icon-bar {
    width: 30px;
    padding-right: 6px;
}

.icon-filled path{
    fill: #4e5564;
}

.pareto-logo-left {
    margin-top: 14px;
    margin-left: 77.5px;
    width: 80px;
    margin-bottom: 28px;
}

.pareto-logo-left--min {
    margin: 14px 0 0 21px;
    width: 40px;
}

@media screen and (min-width: 1170px) and (max-width: 1199px) {
    .pareto-logo-left {
        margin-top: 50px;
    }
}

@media screen and (max-width: 1169px) {
    .pareto-logo-left {
        margin: 14px 0 0 21px;
        width: 40px;
    }
}

.logo-dashboard {
    display: None;
    margin-left: 20px;
}

@media (min-width: 768px) {
    .content-wrapper .top-left-part {
        width: 80px;
    }
    .content-wrapper .sidebar {
        width: 80px;
    }
    .content-wrapper .user-profile .user-pro-body .u-dropdown {
        display: inherit !important;
    }
    .content-wrapper .user-profile .user-pro-body img {
        width: 30px;
    }
}

@media (max-width: 768px) {
    .top-left-part {
        background: #f1f5f9;
        /*background: #4c5667;*/
    }
}

@media (max-width: 1200px) {
    .icon-bar {
        padding-right: 0px;
    }
    .logo-dashboard {
        display: inline;
    }
    #side-menu>li>a.active {
        border-left: none !important;
        /*border-left: 3px solid #3FC2A8;*/
    }
}

@media (min-width: 1200px) {
    .navbar-default.sidebar {
        padding-top: 38px;
        z-index: 1000;
    }
    .navbar-default.sidebar li {
        margin: 3px;
        /*border-bottom: 0.1px solid #585868;*/
    }
    .navbar-default.sidebar li:first-child {
        margin: 3px;
        /*border-top: 0.1px solid #585868;*/
    }
    #side-menu>li>a.active {
        border-left: none;
        /*background: #313641;*/
    }
}

.hide-menu {
    font-weight: 500;
    color: #4e5564;
}

.sidebar {
    width: 235px;
    position: fixed;
}

#side-menu>li>a svg {
    vertical-align: middle;
}

#side-menu>li>a svg {
    vertical-align: middle;
}

#side-menu>li>a.active>span {
    color: #6473ea !important;
    /*color: #3FB6C2;*/
}

#side-menu>li>a.active svg path:first-child {
    fill: #6473ea;
    /*filter: brightness(85%) sepia(70) saturate(52) hue-rotate(147deg);*/
}

#side-menu>li>a.active .icon-bar.icon-stats path {
    fill: #6473ea;
    /*filter: brightness(85%) sepia(70) saturate(52) hue-rotate(147deg);*/
}

.active .menu-mobile__text {
    color: #6473ea;
}

.username-nav {
    font-weight: 500;
    color: #261f41;
    text-overflow: ellipsis;
}

.information-icon-wrapper{
    font-weight: normal;
}

.information-icon-wrapper i {
    font-size: 12px;
    font-weight: normal;

    width: 28px;
    height: 28px;
    background: #eee;
    border-radius: 50%;

    line-height: inherit;
    text-align: center;

    color: #888;
}

.slimScrollBar {
    display: none !important;
}

.specifc-score-history-div {
    margin-top: -20px;
}

@media (max-width: 991px) {
    .specifc-score-history-div {
        display: none;
    }

    #structure-score {
        top: 0 !important;
    }

    #structure-score-donuts {
        /*height: 265px !important;*/
    }
}

@media (max-width: 991px) {
    .specifc-score-history-div {
        margin-top: -80px;
    }
}

.specifc-score-history-div .widget {
    border-radius: 4px;
    box-shadow: 2px 7px 14px 2px rgba(50, 50, 93, .1), 0 3px 6px 2px rgba(0, 0, 0, .07);
}

#structure-score-info .selectize-input {
    width: auto;
    color: #303030 !important;
}

#structure-score-info .selectize-control{
    padding: 0;
}

.pareto-score-window {
    /*position: absolute;*/
    margin-top: 10px;
    z-index: 999;
    right: calc(50% - 78.86px);
}

.account-name {
    text-transform: capitalize;
}

.specific-score-window {
    position: relative;
    right: 15px;
    top: 0px;
    z-index: 3;
}

/*@media (max-width: 991px) {
    .specific-score-window {
        top: 0 !important;
    }
}*/

.legend-link {
    color: #4c5667;
}

.legend-link:visited {
    color: #4c5667;
}

.legend-link:hover {
    color: #3FB6C2;
}

.legend-link.active {
    color: #6964b6;
    font-weight: 500;
}

.fit-height-pqs-gauge {
    height: 215px;
}

.fit-height-pqs-variation {
    height: 393px;
}

.fit-heigth-pqs-info {
    position: absolute;
    right: 0;
    top: 10px;
    width: 33px;
}

.fit-heigth-pqs-info--score {
    position: relative;
    left: 98.5%;
    top: -10px;
    width: 33px;
}

.fit-heigth-pqs-info__text {
    background-color: #f1f5f9;
    color: #5c626e;
    font-size: 13px;
    margin: 20px 0 0 0;
    padding: 0 5px;
}

@media (max-width: 768px) {
    .fit-height-area {
        height: 550px;
    }
}

@media (max-width: 400px) {
    .fit-height-pqs-gauge {
        height: 300px;
    }
    .fit-height-pqs-variation {
        height: 400px;
    }
    #structure-score-donuts {
        height: 200px;
    }
    #structure-score-time {
        height: 300px;
    }
}

@media (max-width: 337px) {
    .fit-height-pqs-gauge {
        height: 310px;
    }

    .information-icon-wrapper i {
        font-size: 15px;
        width: 28px;
        height: 28px;
        margin-left: 0px;
        background: #ccc;
        border-radius: 50%;
        position: inherit;
    }
}

.circle {
	border-radius: 50%;
	width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 5px;
}

.widget-text {
    color: #414141;
}

.tooltip .tooltip-inner {
    background-color: #7381ec;
    font-size: 15px;
    margin-right: 15px;
    max-width: 300px;
    padding: 25px;
    text-align: left;
}

.tooltip.bs-tether-element-attached-right .tooltip-inner::before, .tooltip.tooltip-left .tooltip-inner::before{
    content: "";
    border-left-color: #7381ec;
    border-width: 15px 0px 15px 15px;
    margin-top: -15px;
    margin-right: 5px;
    right: 0;
    top: 50%;
}

.hotspot-modal-content {
    background-color: #ffffff;
}

.hotspot-modal-close {
    font-size: 35px;
    margin-top: -10px;
}

.hotspot-modal__input {
    background: #ffffff;
    border-bottom: 1px solid #e4e4e4;
    font-size: 15px;
    padding-bottom: 5px;
    width: 100%;
}

.hotspot-modal__input--date {
    margin-top: 0;
    font-size: 15px;
}

.hotspot-modal__input__message {
    color: red;
    display: none;
    font-size: 10px;
}

.hotspot-modal__label {
    opacity: 0.8;
    font-size: 13px;
    margin-top: 30px;
}

.hotspot__button {
    background: #7b68ee;
    color: #ffffff;
    font-size: 18px;
    font-family: "Roboto", "sans-serif";
    padding: 20px;
    width: 100%;
}

.hotspot__button:hover {
    opacity: 0.8;
}

.hospot-modal__textarea {
    border: 1px solid #e4e4e4;
    font-size: 15px;
    padding: 5px 10px;
    width: 100%;
}

.category-tags-div .selectize-control .form-control {
    border: 1px solid #e4e4e4;
    min-height: 80px;
}

.category-tags-div .selectize-control .form-control input {
    background: #ffffff;
}

.estimate-metric-select, .dropdown-accounts__account-selectize {
    border: none;
}

.dropdown-accounts__account-selectize {
    padding: 0 !important;
}

.structure-score-label.single .selectize-input:after, 
.average-metrics__select.single .selectize-input:after, 
.estimate-metric-select.single .selectize-input:after, 
.dropdown-accounts__account-selectize.single .selectize-input:after {
    border: none;
    color: #505568;
    content: '\25bc'; /*This will draw the icon*/
    display: block;
    font-family: "Glyphicons Halflings";
    font-size: 11px;
    padding-top: 0px;
    top: -1px;
}

.average-metrics__select.single .selectize-input:after {
    padding-top: 3px !important;
}

.average-metrics__select.single .selectize-input:after, .estimate-metric-select.single .selectize-input:after {
    right: 20px;
    top: -12px;
}

.average-metrics__select.single .selectize-input:after {
    color: #727387;
    content: '\e259';
    font-size: 16px;
}
/* material design input and textarea */
.material-design-div {
    margin: 10px 0 20px;
    width: 100%;
}
.material-design-div label {
    display: block;
    min-height: 45px;
    position: relative;
    width: 100%;
}
.material-design-div .material-design-placeholder {
    cursor: text;
    display: block;
    font-size: 13px;
    position: absolute;
    top: 23px;
    transition: all 200ms ease-in-out;
    width: 100%;
    z-index: 0;
}
.material-design-div input,
.material-design-div textarea,
.material-design-div select {
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    font-size: 14px;
    margin: 15px 0 0 0;
    outline: none;
    padding: 0;
    transition: border-color 200ms ease-in-out;
    top: 15px;
    z-index: 1;
    width: 100%;
}
.material-design-div textarea {
    min-height: 30px;
    padding: 8px 0;
}
.material-design-div input,
.material-design-div select {
    background-color: #ffffff;
    height: 30px;
}
.material-design-div input:focus,
.material-design-div textarea:focus,
.material-design-div select:focus {
    border-bottom: 2px solid #6470E5;
}
.material-design-div input:valid + .material-design-placeholder,
.material-design-div select:valid + .material-design-placeholder {
    color: #414141;
    top: 0;
}
.material-design-input--readonly + .material-design-placeholder,
.material-design-div input:focus + .material-design-placeholder,
.material-design-div select:focus + .material-design-placeholder {
    cursor: inherit;
    color: #6470E5;
    font-size: 13px;
    top: 0;
}
.material-design-div button {
    padding: 10px;
    border-radius: 5px;
}
.material-design-simple-button {
    background-color: #6470E5;
    border-radius: 0 !important;
    color: #ffffff;
    padding: 10px;
}
.material-design-simple-button:hover {
    opacity: 0.9;
}
/* end material design input and textarea */
.material-design-input--readonly + .material-design-placeholder {
    color: #414141;
}
.settingsform-wrapper {
    display: flex;
    flex-direction: column
}
.settingsform-wrapper--inputs {
    width: 70%;
}
.settingsform-wrapper--avatar {
    text-align: right;
    align-self: center;
    width: 30%;
}
.settingsform-avatar-wrapper {
    text-align: center;
    width: 140px;
}
.settingsform-avatar-wrapper__square {
    background: #ffffff;
    border-radius: 5px;
    height: 128px;
    width: 128px;
}
.settingsform-avatar-wrapper__label {
    color: #6470E5;
    font-size: 13px;
    margin-top: 10px;
}
.settingsform-avatar-wrapper__label:hover {
    cursor: pointer;
    text-decoration: underline;
}
.form-errors > ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.form-errors > ul > li {
    color: rgb(163, 104, 250);
}
input[type=text].error, input[type=password].error {
    border: 1px solid rgb(163, 104, 250);
}
/* end account settings tab */
.showWorkFlowMenu {
    display: block !important;
}

@-webkit-keyframes toast {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 200% 0
    }
}

@keyframes toast {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 200% 0
    }
}

.add-hotspot-icon{
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: -15px;
    font-size: 38px;
    line-height: 50px;

    background: rgb(169, 103, 251);

    background: linear-gradient(to right, rgb(53, 194, 164), rgb(169, 103, 251) 50%, rgb(53, 194, 164) 100%);
    background-size: 200%;

    -webkit-animation: toast 2s cubic-bezier(.25, .46, .45, .94) both infinite;
    animation: toast 2s cubic-bezier(.25, .46, .45, .94) both infinite;

    cursor: pointer;
    box-shadow: 1px 1px 1px 1px rgba(50,50,50,0.3)
}

.segmented-metrics-menu__calendar__range--margin{
    margin-right: 10px;
}

.navbar-navigation-wrapper {
    align-items: center;
    background-color: #332a55;
    display: flex;
    height: 80px;
    justify-content: space-between;
    padding: 0 60px;
    width: 100%;
}

.navigation-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding-top: 5px;
}

.navigation-list-option {
    color: #ffffff;
    font-weight: 400;
    padding: 0 10px;
}

.navigation-list-option-link, .navigation-list-option-link:focus {
    color: #827e94;
    font-size: 16px;
}

.navigation-list-option-link--active {
    color: #ffffff;
}

.navigation-image {
    height: 50px;
}

.navigation-score-wrapper {
    display: flex;
}

.menu-score-padding-left {
    padding-left: 10px;
}

.page-title {
    font-size: 30px;
    padding-bottom: 15px;
}

.page__title--desc {
    font-size: 20px;
    padding-top: 15px;
}

@media screen and (max-width: 479px) {
    .page-title {
        padding: 20px 0;
    }
}

.page-subtitle {
    font-weight: bold;
}

.page-subtitle-description {
    padding-bottom: 20px;
}

.until-wrapper-padding-top {
    padding-top: 20px;
}

.estimate-metric-wrapper {
    padding-bottom: 20px !important;
}

.colors-wrapper {
    display: flex;
    position: relative;
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 24px;
    width: 50%;
    margin: 0 auto;
}

.colors-wrapper__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 20px;
    opacity: 0;
    z-index: 0;
}

.colors-wrapper__input__label {
    cursor: pointer;
    display: block;
    font-size: 12px;
    padding: 0 0 0 44px;
}

.colors-wrapper__input__label::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 36px;
    height: 14px;
    background-color: rgba(0, 0, 0, .26);
    border-radius: 14px;
    z-index: 1;
    transition: background-color 0.28s cubic-bezier(.4, 0, .2, 1);
}

.colors-wrapper__input__label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14),0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    z-index: 2;
    transition: all 0.28s cubic-bezier(.4, 0, .2, 1);
    transition-property: left, background-color;
}

.colors-wrapper__input:checked + .colors-wrapper__input__label::before {
    background-color: rgba(63, 81, 181, .5);
}

.colors-wrapper__input:checked + .colors-wrapper__input__label::after {
    left: 16px;
    background-color: #7467eb;
}

.notifications {
    margin-left: -30px;
    margin-right: 25px;
}

.team-image-wrapper {
    align-items: center;
    display: flex;
    padding-left: 20px;
}

.menu-group-options-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0 10px 20px;
}

.menu-group-option {
    color: #333 !important;
    padding: 5px 0;
    width: 50% !important;
}

.menu-group-option:hover {
    opacity: 0.8;
}

.menu-group__title {
    color: #261f41;
    font-weight: bold;
    padding: 10px 0 10px 20px;
    text-transform: uppercase;
}

.menu-group-wrapper {
    margin-top: 10px;
}

.dropdown-menu-teams {
    color: #bcbcbc !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.dropdown-menu-teams:hover {
    background: transparent !important;
    opacity: 0.8;
}

.dropdown-menu-teams-plus {
    color: #7b68ee;
}

.header-user-img-wrapper {
    margin-top: 12px;
}

@media screen and (max-width: 480px) {
    .menu-wrapper {
        z-index: 1;
    }
}