/* ------------------------------------------------------------------------------
 *
 *  # Custom styles from Enala SL (https://enala.net)
 *
 * ---------------------------------------------------------------------------- */

@import "/css/enala/variables.enala-482131be080644ce4342d8354765b1ae.css";
@import "/css/enala/colors.enala-025070d60d5bf992b9aa9de25f7332fa.css";
@import "/css/enala/fonts.enala-bc7f617c88189330fbd55a0b2b38e488.css";
@import "/css/enala/buttons.enala-926fdaf913e5eae0546d6bac32378fc3.css";
@import "/css/enala/checkbox.enala-f1e116ef62e37ff8b625e8a76f9eaf9c.css";
@import "/css/enala/inputs.enala-4024077fa341be90a865644b2af35341.css";
@import "/css/enala/tables.enala-59ea64eb6e2d48a9535cd83a9202fd50.css";
@import "/css/enala/autocomplete.enala-a223b0d94d67d406b56f21e6f690740c.css";
@import "/css/enala/animations.enala-1f9ad549c6fc9dd01ea3e72dcfed6b8e.css";
@import "/css/enala/select2.enala-90735749cda9af91ec1e5a68103a67a9.css";
@import "/css/enala/tooltips.enala-e93457789e0608e04e18cbcf14b6e99d.css";
@import "/css/enala/modal.enala-b4d8aad07e1c4618d42d3e0d5021126b.css";
@import "/css/enala/radio.enala-6e23d1d3dbc7f476060fa6102623e713.css";
@import "/css/enala/brains.enala-f020ef4d3715d58fced4204cac3896ab.css";


/* ------------------------------------------------------------------------------
 *
 *  # General Styles (applied through out all the app)
 *
 * -----------------------------------------------------------------------------*/

:root {
    --top: 0;
    --header-height: 80px;
}

body {
    font-family: Heebo, sans-serif;
    font-size: 12px;
    font-weight: 300;
}

button.flyde-btn {
    font-family: "Heebo", serif;
    font-weight: 500;
    color: white;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--primary-color);
    padding: 9px 13px 8px 14px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

button.flyde-btn span {
    margin: 3px 0 0 0;
}

button.flyde-btn:hover {
    background: var(--hover-color);
    color: white;
}

button.flyde-btn:active {
    background: var(--active-color);
    color: white;
}

button:focus,
button.flyde-btn:focus {
    outline: 0;
}

#page-title {
    color: var(--primary-color);
    font-family: "Heebo", serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0;
}

#page-subtitle {
    font-family: Heebo, serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--grey-neutral-lighter);
    letter-spacing: 0;
    line-height: 18px;
    margin-top: 3px;
}

.opacity-100{
    opacity: 1;
}

.opacity-75{
    opacity: 0.75;
}

.opacity-50{
    opacity: 0.5;
}

.opacity-25{
    opacity: 0.25;
}

.opacity-0{
    opacity: 0;
}

.w-10{
    width: 10% !important;
}

.hide-div{
    display: none !important;
}

.show-div{
    display: flex !important;
}

.primary-color {
    color: var(--primary-color);
}

.prev-arrow {
    background: transparent !important;
    height: 26px;
    width: 26px;
}

.prev-arrow svg {
    fill: var(--grey-neutral-light);
}

.next-arrow {
    background: transparent !important;
    height: 26px;
    width: 26px;
}

.next-arrow svg {
    fill: #666c76;
}

.nav-sidebar-stroke {
    height: 48px;
    width: 4px;
    position: absolute;
    top: var(--top);
    left: 0;
    background: var(--primary-color);
}
.nav-link {
    position: relative;
}
.nav-sidebar .nav-link svg {
    margin-right: 1.25rem;
    margin-top: .12502rem;
    margin-bottom: .12502rem;
    top: 0;
    height: 20px;
    width: 20px;
    fill: var(--unselected-svg-color);
    /*stroke: var(--unselected-svg-color);*/
}

.nav-sidebar .nav-link.stroke svg {
    margin-right: 1.25rem;
    margin-top: .12502rem;
    margin-bottom: .12502rem;
    top: 0;
    height: 20px;
    width: 20px;
    stroke: var(--unselected-svg-color);
}

.nav-sidebar .nav-link.active svg {
    fill: var(--primary-color);
}

.nav-sidebar .nav-link.stroke.active svg {
    stroke: var(--primary-color);
}

.enala-input {
    transition: all var(--input-animation-duration) var(--easing-function);
    -webkit-transition: all var(--input-animation-duration) var(--easing-function);
    -moz-transition: all var(--input-animation-duration) var(--easing-function);
}

.enala-input-selected {
    transition: all var(--input-animation-duration) var(--easing-function);
    -webkit-transition: all var(--input-animation-duration) var(--easing-function);
    -moz-transition: all var(--input-animation-duration) var(--easing-function);
    border-color: var(--primary-color) !important;
}

.enala-input-has-error {
    transition: all var(--input-animation-duration) var(--easing-function);
    -webkit-transition: all var(--input-animation-duration) var(--easing-function);
    -moz-transition: all var(--input-animation-duration) var(--easing-function);
    border-color: var(--error-color) !important;
}

.top-flyde-row {
    padding: 0 52px;
}

.bottom-flyde-row {
    padding: 0 57px 18px 57px;
}

.flyde-chevron-right {
    width: 19px;
    height: 19px;
    margin: 0 8px;
    position: relative;
}

.flyde-breadcrumb-item {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 10px;
    color: #AAB1BC;
    letter-spacing: 0;
    margin-top: 2px;
}

.flyde-breadcrumb-item.active {
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 10px;
    color: #38465E;
    letter-spacing: 0;
}

.flyde-toolbar-item {
    width: 21px;
    height: 21px;
    fill: var(--primary-color);

    transition: all var(--input-animation-duration) var(--easing-function);
    -webkit-transition: all var(--input-animation-duration) var(--easing-function);
    -moz-transition: all var(--input-animation-duration) var(--easing-function);
}
.toolbar-flyde {
    z-index: 12;
}
.flyde-toolbar-item:hover {
    fill: var(--primary-color);
    cursor: pointer;
}

.nav-item-flyde {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    height: 36px;
    width: 36px;

    margin-left: 17px;
    background: white !important;
    border-radius: 50%;
    filter: drop-shadow(0px 2px 1px rgba(188, 194, 205, 0.2));
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    transition: all 0.28s ease-in-out;
}

.nav-item-flyde:hover {
    filter: drop-shadow(0px 4px 6px rgba(188, 194, 205, 0.5));
}
.flow-toolbar .nav-item-flyde:hover {
    /*border-radius: 3px;*/
}

.flow-toolbar .nav-item-flyde.delete-button:hover {
    /*width: 160px;*/
}
.flow-toolbar .nav-item-flyde.settings-button:hover {
    /*width: 160px;*/
}

/*.nav-item-flyde > .typewriter {*/
/*    bottom: 50%;*/
/*    transform: translateY(50%);*/
/*    left: 40px;*/
/*    animation-play-state: paused;*/
/*}*/
/*.nav-item-flyde:hover > .typewriter {*/
/*    animation-play-state: running;*/
/*}*/

.nav-item-flyde > svg {
    margin: auto;
}
.flow-toolbar .nav-item-flyde:hover > svg {
    /*margin: auto auto auto 5px !important;*/
}

.nav-item-flyde-user-left {
    position: relative;
    height: 36px;
    padding-left: 10px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.nav-item-flyde-user-left:before {
    content: "";
    position: absolute;
    height: 36px;
    left: 0;
    width: 36px;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    background: white;
    z-index: -1;
}

.nav-item-flyde-user-center {
    position: relative;
    height: 36px;
    align-items: center;
    display: flex;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.nav-item-flyde-user-center:before {
    content: "";
    position: absolute;
    height: 36px;
    width: 100%;
    background: white;
    z-index: -1;
}

.nav-item-flyde-user-right {
    position: relative;
    display: flex;
    height: 36px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.nav-item-flyde-user-right:before {
    content: "";
    position: absolute;
    /* right: 0; */
    right: -30px;
    height: 36px;
    width: 36px;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    background: white;
    z-index: -1;
}

.nav-item-dshadow {
    filter: drop-shadow(0px 2px 4px rgba(188, 194, 205, 0.4));
}


.nav-item-active:before{
    background: var(--primary-color) !important;
}

.nav-item-active span.user-name-label,
.nav-item-active::after{
    color: white;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.dropdown-user[aria-expanded=true] .nav-item-flyde-user-center span{
    color: white;
}

.nav-item-circle{
    display: flex;
    height: 22px;
    width: 22px;
    margin-top: 2px;

    justify-content: center;
    align-items: center;

    background-color: var(--primary-color);
    border-radius: 50%;
}

.nav-item-circle-deselected > .flex-row{
    display: flex;
    height: 22px;
    width: 22px;
    margin-top: 2px;

    justify-content: center;
    align-items: center;

    background-color: #AAB1BC;
    border-radius: 50%;
}
.nav-item-circle-deselected  > .nav-item-active > span{
    color:#AAB1BC;
    font-weight: 500;
}
.nav-item-circle-deselected > .flex-row > span{
    color: #F9F9FB
}

.nav-item-circle-selected > .flex-row{
    display: flex;
    height: 22px;
    width: 22px;
    margin-top: 2px;

    justify-content: center;
    align-items: center;

    background-color: var(--primary-color);
    border-radius: 50%;
}
.nav-item-circle-selected  > .nav-item-active > span{
    color: var(--primary-color);
    font-weight: 500;
}
.nav-item-circle-selected > .flex-row > span{
    color: #F9F9FB;
}

.nav-item-circle-checked > .flex-row{
    display: flex;
    height: 22px;
    width: 22px;
    margin-top: 2px;
    justify-content: center;
    align-items: center;
}
.nav-item-circle-checked  > .nav-item-active > span{
    font-weight: 500;
}
.nav-item-circle-checked > .flex-row > svg{
    fill: #00CD98;
    stroke: #00CD98
}
.nav-item-circle span {
    display: flex;

    justify-content: center;
    align-items: center;

    font-family: "Heebo", serif;
    font-weight: 400;
    font-size: 12px;
    color: white;
}

.circle-lg{
    height: 80px !important;
    width: 80px !important;
    margin-top: 0 !important;
}

.circle-lg span {
    font-weight: 400 !important;
    font-size: 45px !important;
    color: white !important;
    margin-top: 4px;
}

.nav-link-logout {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: .75rem 1.25rem;
    transition: background-color ease-in-out .15s, color ease-in-out .15s;
}

.faster {
    animation-duration: 0.3s !important;
}

/* ------------------------------------------------------------------------------
 *
 * Login styles
 *
 * -----------------------------------------------------------------------------*/
.login-btn {
    transition: all var(--input-animation-duration) var(--easing-function);
    -webkit-transition: all var(--input-animation-duration) var(--easing-function);
    -moz-transition: all var(--input-animation-duration) var(--easing-function);
}

.login-btn:hover {

}

.login-view .side-element {
    /*background-size: cover;*/
    /*background: var(--primary-color) url("/images/login/bg-7a9b8b3a0e6be22ca9bea5e398630678.jpg") center;*/
    /*height: 100%;*/
    background: #0b93ff;
}

.login-view .form-element {
    background: white !important;
    height: 100%;
}

.login-view .login-title {
    margin-bottom: 24px;
}

.login-view .login-logo {
    margin-bottom: 40px;
}

.login-view .login-logo-img {
    width: 119px;
    height: 24px;
}

.login-view label {
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 13px;
    color: #000000;
    letter-spacing: 0;
    text-align: left;
}

.login-view .login-input {
    margin-bottom: 24px;
}

.login-view .login-input .input-group-append {
}

.login-view input {
    border: 0;
    color: var(--input-color);
}

.login-view .login-input .input-group:focus {
    border-color: var(--primary-color);
    transition: 0.2s;
}

.login-view #password-input input {
    color: var(--primary-color);
    font-family: "Heebo", serif;
    letter-spacing: 0;
}

.login-view #password-input input[type='password']{
    font-size:16px;
}

.login-view #password-input input:placeholder-shown{
    font-weight: 400;
    font-size: 13px;
}

.login-view #eye_icon{
    cursor: pointer;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #AAB1BC;
    font-weight: 300;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #AAB1BC;
    font-weight: 300;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #AAB1BC;
    font-weight: 300;
}

.login-view .login-input .input-group-prepend {
    margin: 0 !important;
}

.login-view .login-input .input-group-text {
    padding: 0.5rem 0.9rem;
}

.login-view .login-options {
    margin-bottom: 44px;
}


.login-view input[name="remember"] {
    margin-right: 12px;
}

.login-view .login-remember-label {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 12px;
    color: var(--input-color);
    letter-spacing: 0;
}

.login-view .login-forgot-link {
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--input-color);
    letter-spacing: 0;
    transition: color 0.2s ease-in-out;
}

.login-view .login-forgot-link:hover {
    color: var(--hover-color) !important;
}

.login-view .btn-flyde-submit {
    background: var(--primary-color);
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: 0;
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 11px;
    color: white;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;

    transition: all var(--input-animation-duration) ease-in-out;
    -webkit-transition: all var(--input-animation-duration) ease-in-out;
    -moz-transition: all var(--input-animation-duration) ease-in-out;
}

.login-view .btn-flyde-submit:hover {
    background: var(--dark-blue-flyde);
}

.login-view .flyde-welcome-text {
    font-family: "Montserrat", serif;
    font-size: 2.1rem;
    font-weight: 400;
    color: var(--dark-blue-flyde);
    letter-spacing: 0;
    text-align: center;
    width: 350px;
    height: 160px;
    position: absolute;
    top: 9%;
    left: 7%;
    -webkit-font-smoothing: subpixel-antialiased;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    color: var(--input-color);
    font-weight: 400;
}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.login-view #login_hype_container {
    width: 742px;
    height: 599px;
}

.login-view .recover-desc {
    max-width: 262px;
    margin-bottom: 29px;
}

.login-view .recover-title {
    margin-bottom: 3px;
}

.login-view .incorrect-login{
    background: #FFEAF1;
    margin-bottom: 5%;
    margin-top: -10%;
}
.incorrect-login{
    background: #FFEAF1;
    margin-bottom: 5%;
    margin-top: -10%;
}

.error-login-box-text{
    color: #CC3366;
    padding: 7% 7% 7% 7%;
    font-weight: 500;
}

.login-view .recover-btn {
    margin-top: 40px;
}

.login-view .recover-options {
    margin-top: 24px;
}

.email-svg {
    width: 18px;
    height: 12.63px;
    fill: var(--primary-color);
}

.enala-input-has-error .email-svg {
    fill: var(--error-color);
}

.eye-svg {
    width: 20px;
}

.ic_fold {
    width: 11px;
}

.no-style {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.fold-button {
    width: 30px;
    height: 30px;
}

.fold-button:hover,
.fold-button:focus {
    background: none;
}

.fold-button:active {
    background: none;
}

#fold-sidebar {
    top: 50vh !important;
    left: 100% !important;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%);
    background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%);
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transition: transform 0.4s ease-in-out;
    -webkit-transition: transform 0.4s ease-in-out;
    -moz-transition: transform 0.4s ease-in-out;
    -o-transition: transform 0.4s ease-in-out;
}

#fold-sidebar img {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transition: transform 0.4s ease-in-out;
    -webkit-transition: transform 0.4s ease-in-out;
    -moz-transition: transform 0.4s ease-in-out;
    -o-transition: transform 0.4s ease-in-out;
}

.sidebar-closed #fold-sidebar img {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.separator {
    padding: 0;
    border-top: 0.5px solid #F4F6FA;
}

.fixed-footer-sidebar {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: white;
    left: 0;
}


.content {
    padding: 56px 135px!important;
    overflow-x: hidden !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.02));
}

.content-wrapper {
    overflow-x: hidden !important;
    background: var(--background-color);
    opacity: 1;
    transition: opacity 0.12s ease-in-out;
}

.page-content {
    background: var(--background-color);
    max-height: 100vh;
}

/* ------------------------------------------------------------------------------
 *
 * Sidebar and topbar styles
 *
 * -----------------------------------------------------------------------------*/
.main-sidebar {
    max-width: 264px;
    width: 100%;
    position: relative;
    max-height: 100vh;
    filter: drop-shadow(0.2px 4px 0.2rem rgba(188, 194, 205, 0.2));
    -webkit-filter: drop-shadow(0.2px 4px 0.2rem rgba(188, 194, 205, 0.2));
    padding: 0;
    transform: translate3d(0, 0, 0px);
    -webkit-transform: translate3d(0, 0, 0px);
    -moz-transform: translate3d(0, 0, 0px);
    z-index: 11;
    -webkit-transition: max-width 0.5s ease-in-out;
    -moz-transition: max-width 0.5s ease-in-out;
    -o-transition: max-width 0.5s ease-in-out;
    transition: max-width 0.5s ease-in-out;
}
.replace-filter-with-boxshadow {
    filter: none !important;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.16) !important;
}

.sidebar-logo {
    margin-top: 88px;
    margin-bottom: 46px;
    align-items: center;
    transition: all 0.3s ease-in-out;
}
#logo-link {
    position: relative;
    margin-left: 34px;
    transition: all 0.3s ease-in-out;
}
.sidebar-closed #logo-link {
    margin-left: 34px;
    transition: all 0.3s ease-in-out;
}

.logo-flyde {
    width: 33px;
    height: 33px;
}

.sidebar-title {
    padding: 12px 40px 5px 40px;
    font-family: "Heebo", serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--grey-neutral);
    letter-spacing: 1px;
    text-align: left;
    min-height: 33px;
}

.svg-title {
    width: 18px;
    height: 18px;
    margin-right: 12px;
}

.nav-link {
    padding: 0 12px !important;
    height: 48px;
    color: var(--grey-neutral-lighter) !important;
    align-items: center !important;
    font-weight: 300;
    font-size: 13px;
    line-height: 19px;
}

.nav-link-data {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: 2px;
    align-items: center !important;
    transition: background-color 0.2s ease-in-out;
}

.nav-link-data:hover {
    background-color: rgba(0, 102, 255, 0.05);
}

.sidebar-icon-margin {
    margin-left: 28px !important;
}

.nav-link.active {
    border-left-color: var(--link-active);
    border-left-width: 4px;
    border-left-style: solid;
    font-family: "Heebo", serif;
    font-weight: 500;
    color: var(--link-text-active) !important;
}

.nav-link.active .nav-link-data {
    margin-left: -4px !important;
}

.main-topbar {

}

.breadcrumb-flyde {
    padding: 38px 0 35px 0;
}

.sidebar-item {
    width: 100%;
    height: 48px;
    font-family: "Heebo", serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--grey-neutral-lighter);
    letter-spacing: 0;
}

.wrapper {
    width: 100%;
    background: white;
    height: 100%;
    overflow: hidden !important;
}

.sandbox-or-enviroment{
    background: #00663E;
    text-align: center;
    color: white;
    font-family: Heebo;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    height: 35px;
}
.sandbox-or-enviroment-red{
    background: #9a0000;
    text-align: center;
    color: white;
    font-family: Heebo;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    height: 35px;
}
.div-sandbox-bar{
    position: relative;
    top: 25%;
}

/* SIDEBAR CLOSED */
.sidebar-closed.main-sidebar {
    max-width: 101px;
}

.sidebar-closed .nav-link-data {
    justify-content: center;
    max-width: 73px;
}

.sidebar-closed .nav-link-data svg {
    margin-left: auto !important;
    margin-right: auto !important;
}

.sidebar-closed .nav-link-data span {
    display: none;
}

.sidebar-closed .sidebar-title span {
    display: none;
}

.sidebar-closed .separator {
    width: 100% !important;
}

.sidebar-closed .logo-flyde-closed {
    width: 25px;
    height: 25px;
}

@keyframes fadeInSpan {
    from {
        display: none;
        opacity: 0;
    }
    to {
        display: flex;
        opacity: 1;
    }
}

.flyde-title span {
    font-family: "Heebo";
    font-weight: 300;
    font-size: 20px;
    color: #38465E;
    letter-spacing: 0;
    text-align: left;
}

/* ------------------------------------------------------------------------------
 *
 * Connections styles
 *
 * -----------------------------------------------------------------------------*/


/******       "AcqNoSources.html"       ******/

.acquisition-first .main-img img {
    max-height: 240px;
    max-width: 340px;
    height: 239px;
    width: 338px;
}

.acquisition-first .main-h2 {
    padding-top: 12px;
}

.acquisition-first .main-h2 h2 {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 24px;
    color: var(--input-color);
    letter-spacing: 0;
}

.acquisition-first .main-span {
    max-width: 400px;
    text-align: center;
    margin-bottom: 32px;
}

.acquisition-first .main-span span {
    color: var(--grey-neutral-light);
    font-family: "Heebo", serif;
    font-weight: 100;
    font-size: 13px;
    letter-spacing: 0;
}

.acquisition-first .button-wrapper {
    padding-top: 18px;
}

.acquisition-first .button-features {
    border-radius: 3px;
}

.acquisition-first .button-features a {
    background: var(--primary-color);
    height: 40px;
}

.acquisition-first .button-features a:hover {
    background: var(--hover-color);
}

.acquisition-first .button-img {
    height: 17px;
}

.acquisition-first .button-span {
    height: 17px;
}

.acquisition-first .button-span span {
    color: white;
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1px;
    padding-top: 2.5px;
}

/******       "ConnectionCardsExample.html"       ******/

.publication .size-cards {
    max-width: inherit;
    float: left;
}

.sources-wrapper .size-cards {
    /*max-width: inherit; !* 350px *!*/
    height: 272px;
    float: left;
}
.app-list {
    margin-top: 3px !important;
}
.app-list .size-cards {
    height: 192px;
    float: left;
}
.app-list .size-cards.opacity-50:hover {
    transform: translateY(0);
    box-shadow: 0 2px 4px 0 rgba(188, 194, 205, 0.20);
    -webkit-box-shadow: 0 2px 4px 0 rgba(188, 194, 205, 0.20);
}

.sources-wrapper .size-cards.cards-sm {
    width: 260px;
    height: 276px;
    margin: 1% 2% 1% 0;
}

.acquisition-added-sources .add-source {
    background: white;
    box-shadow: 0 2px 4px 0 rgba(188, 194, 205, 0.20);
    border-radius: 5px;
    cursor: pointer;
    padding: unset;

    align-items: center;
    justify-content: center;
}
.acquisition-added-sources .data-source {
    position: relative;
    padding: unset;
}

.acquisition-added-sources .grid-wrapper{
    display: grid;
    /**grid-template-columns: repeat(3, 1fr);**/
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}

.size-cards {
    background: white;
    box-shadow: 0 2px 4px 0 rgba(188, 194, 205, 0.20);
    -webkit-box-shadow: 0 2px 4px 0 rgba(188, 194, 205, 0.20);
    border-radius: 5px;
    overflow: hidden;
    padding: unset;
    transform: translateY(0);
    transition: all 0.15s ease-out;
    -webkit-transition: all 0.15s ease-out;
}
.size-cards:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 10px 0 rgba(188, 194, 205, 0.45);
    -webkit-box-shadow: 0 6px 10px 0 rgba(188, 194, 205, 0.45);
}

.title-link h2,
.title-link span {
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}
.title-link h2:hover,
.title-link span:hover {
    color: var(--primary-color) !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.acquisition-added-sources .main-h2 h2 {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 24px;
    color: var(--grey-neutral-light);
    letter-spacing: 0;
    text-align: left;
    margin: 1%;
}

.acquisition-added-sources .new-sources img {
    height: 84px;
    width: 180px;
    cursor: pointer;
}

.acquisition-added-sources .new-sources span {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 18px;
    color: var(--input-color);
    text-align: center;
    line-height: 25px;
    cursor: pointer;
}

.add-new-source-txt{
    width: 40% !important;
}

.add-new-source-txt h2 {
    font-size: 18px;
    font-weight: 300;
}

#addConnectionAnimIdle,
#addConnectionAnimHover {
    width: 210px;
}

.card-section-size {
    display: flex;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 30px 19px;
    width: 100% !important;
    height: 50% !important;
    margin: unset !important;
}
.bottom-card-section-size {

    display: flex;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;

    padding-left: 16px;
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 24px;
    width: 100% !important;
    height: 100% !important;
    margin: unset !important;
}

.publication .card-section-size {
    height: 140px !important;
}

.publication-card-txt{
    align-items: flex-start !important;
    justify-content: start !important;
}
.publication-card-txt span{
    color:var(--primary-color);
    font-weight: lighter;
}

.circle-icon {
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    position: absolute;
    height: 92px;
    width: 92px;
    background-color: white;
    border-radius: 50%;
}

.circle-icon img {
    height: 58px;
}

.acquisition-added-sources .connection-name span {
    font-family: "Heebo", serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--input-color);
    text-align: left;
}

.acquisition-added-sources .connection-type span {
    font-family: "Heebo", serif;
    font-weight: 400;
    font-size: 11px;
    color: var(--grey-neutral);
    letter-spacing: 1px;
    text-align: left;
}

.acquisition-added-sources .update-time span {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 12px;
    color: var(--input-color);
    letter-spacing: 0;
    line-height: 20px;
    text-align: left;
}

.act-state-txt span {
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 12px;
    color: #aeaeae;
    letter-spacing: 0;
    text-align: right;
}

.act-state-txt.active span {
    color: var(--success-color);
}

.acquisition-added-sources .update-time svg {
    height: 20px;
    width: 20px;
    fill: #aeaeae;
    stroke: #aeaeae;
}

.acquisition-added-sources .update-time.active svg {
    fill: #CC3366;
    stroke: rgba(32, 124, 250, 0.58);
}


.acquisition-added-sources .update-time span {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 12px;
    color: #aeaeae;
    letter-spacing: 0;
    line-height: 20px;
    text-align: left;
}

.acquisition-added-sources .update-time.active span {
    color: var(--input-color);
}

.updating-state > .date-color span {
    color: var(--primary-color) !important;
    font-weight: 500;
}

.updating-state > .start-color span {
    color: var(--input-color) !important;
}

.acquisition-added-sources .button-features {
    border-radius: 3px;
}

.acquisition-added-sources .button-features a {
    background-color: var(--input-color);
    border-color: #cbcbcb;
    height: 40px;
}

.acquisition-added-sources .button-features a:hover {
    background-color: var(--input-color);
}

.acquisition-added-sources .button-span {
    height: 17px;
}

.acquisition-added-sources .button-span span {
    color: #cbcbcb;
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 1px;
    padding-top: 2.5px;
}

.acquisition-added-sources .responsive-update-img {
    width: 22% !important;
    height: 100% !important;
    margin-right: 0.125rem !important;
    margin-bottom: 1.25rem !important;
    margin-left: 0.825rem;
}

.acquisition-added-sources .responsive-update-txt {
    width: 25% !important;
    height: 100% !important;
    margin-right: 0.125rem !important;
    margin-bottom: 1.25rem !important;
    margin-left: 1.925rem;
}

.background-color {
    background-color: var(--background-color);
}

.background-hover {
    background-color: var(--input-color);
}

.card-section-size.background-flyde-blue {
    background-color: var(--svg-blue);
}

.card-section-size.background-activecampaign {
    background-color: #356AE6;
}

.card-section-size.background-shopify {
    background-color: #95BF47;
}

.card-section-size.background-sendinblue {
    background-color: #4492F7;
}

.card-section-size.background-indigitall {
    background-color: #8ADA3F;
}

.card-section-size.background-red-flyde {
    background-color: var(--red-flyde);
}


.card-section-size.background-dark-blue{
    background-color: var(--dark-blue-flyde);
}

.card-section-size.background-dark-gray{
    background-color: #38465E;
}

.card-section-size.background-yellow{
    background-color: #FF8E3E;
}

.card-section-size.background-light-blue {
    background-color: var(--svg-blue);
}

.card-section-size.background-postgresql {
    background-color: #336791;
}
.card-section-size.background-mysql {
    background-color: #00758F;
}
.card-section-size.background-dark-blue {
    background-color: var(--primary-color);
}
.card-section-size.background-oracle {
    background-color: #D60000;
}
.card-section-size.background-sqlserver {
    background-color: #AA1E23;
}
.card-section-size.background-mariadb {
    background-color: #003545;
}

.card-section-size.background-lighter-blue {
    background-color: var(--light-blue-flyde);
}

.card-section-size.background-grey {
    background-color: var(--disable-modal-step-color);
}

.card-section-size.background-grey2 {
    background-color: #848EA0;
}

.card-section-size.background-oracle_rds {
    background-color: #D60000;
}

.card-section-size.background-orange {
    background-color: var(--orange-secondary);
}

.card-section-size.background-red{
    background-color: var(--red-color);
}

.card-section-size.background-drive{
    background-color: var(--green-color);
}

.hover-error.background-hover-error {
    background: var(--error-color);
}

@media (max-width: 600px) {
    .login-view  {
        background: white;
    }

    .login-view #bottom-panel h1 {
        font-size: 24px;
        font-weight: 300;
        color: #38465E;
    }

    .login-view #bottom-panel p {
        font-size: 15px;
        font-weight: 300;
        color:#38465E;
    }
    div.act-state-txt {
        display: none !important;
    }

    div.date-color {
        display: none !important;
    }

    div.act-state {
        max-width: 40%;
        justify-content: right;
    }

    .add-new-source-txt {
        width: 70% !important;
    }

    .toogle-div {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    .updating-state {
        width: 80% !important;
        padding-left: 0 !important;
    }

    .div-resp-date {
        padding-left: 1.3em !important;
    }

    .connection-name {
        padding-left: 1.5em !important;
    }

    .connection-name span {
        font-size: 15px !important;
    }

    .connection-type {
        padding-left: 1.5em !important;
    }

    .connection-type span {
        font-size: 10px !important;
    }

    .error_upper_div span {
        font-size: 10.5px !important;
        padding-top: 0.55em !important;
    }

    div.error-changes span {
        padding-left: 0.5em !important;
    }

    .hover-error-top > .top-left span {
        font-size: 10px !important;
    }

    .hover-error > .hover-error-middle span {
        font-size: 13px !important;
    }

    .hover-error > .hover-error-bottom span {
        font-size: 11px !important;
    }

    .responsive-update-img {
        margin-left: 0 !important;
    }
    .content{
        padding: 16px!important;
    }

    .content #page-title{
        margin-top: 35px;
    }
    #section-apps{
        display: none;
    }
    .scoring-stage{
        display: none;
    }
    .scoring-stage-current{
        display: block;
    }
    #engagementChart{
        margin-top: 16px;
    }
    .engagement-general-legends {
        flex-wrap: wrap;
        justify-content: flex-start!important;
    }

    .logo-block{
      display: none;
    }
    #businessContainer{
        flex-wrap: wrap;
    }
    .business-metric-left{
        border-left: none!important;
        border-right: none!important;
        padding-left: 0!important;
        min-width: 100%!important;
    }

    #businessContainer .separating-bar-alt{
        margin-left: auto;
        margin-right: auto;
        width: 20%;
        display: block!important;
     }

    #audienceMetrics{
        flex-wrap: wrap;
    }
    .audiences-metric-left{
        width: 100%;
        border-left: none!important;
    }
    #audienceMetrics .separating-bar-alt{
        margin-left: auto;
        margin-right: auto;
        width: 20%;
        display: block!important;
        margin-top: 23px;
    }

    #campaigns{
        overflow: hidden;
        overflow-x: auto;
    }
    #campaigns table{
        min-width: 1000px;
    }

    .logo-block{
        display: none!important;
    }
    #timeline .section-title{
        padding-bottom: 20px;
    }

    #chartsScv{
        flex-wrap: wrap;
    }
    #chartsScv .chart-box{
        width: 100% !important;
    }

    #chartsScv .separator-arrow{
        transform: rotate(90deg);
        margin-top: 35px;
    }

    .brains-dashboard .brains-logo{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 22px;
    }
    .brains-dashboard .header{
        display: none!important;
    }

    #appbox{
        display: block!important;
    }

    .flyde-header-row{
        padding-left: 16px!important;
        padding-right: 0px!important;
    }

    #user-menu-btn{
        display: none!important;
    }

    .toolbar-flyde{
        padding-right: 22px;
    }



    .nav-menu {
        height: 0;
        overflow: hidden;
        transition: all 1s cubic-bezier(0.07, 0.74, 0.5, 0.99);
    }

    .nav-menu.--active {
        display: flex !important;
        height: calc(100vh - 70px);
        background: white;
    }

    .nav-menu-container > div:not(.separator),
    .nav-menu-container > a:not(.separator) {
        padding: 0 32px;
    }

    .nav-menu-apps {
        height: 0;
        overflow: hidden;
        transition: all 1s cubic-bezier(0.07, 0.74, 0.5, 0.99);
    }

    .nav-menu-apps.--active {
        display: flex !important;
        height: 119px;
        background: white;
    }

    .nav-menu-container-apps > div:not(.separator),
    .nav-menu-container-apps > a:not(.separator) {
        padding: 0 32px;
    }


    #apps-dropdown {
        width: 289px;
        height: auto;
        display: flex;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 20px 10px 0 10px !important;
    }

    .nav-menu-container .client-name {
        margin: 12px 32px 7px 32px;
        font-size: 14px;
    }

    /*  Ham Menu  */
    .ham-menu {
        position: relative;
        height: 16px;
        width: 24px;
    }

    .ham-bar {
        position: relative;
    }

    .ham-bar:before {
        content: "";
        position: absolute;
        width: 24px;
        border-top: 1px solid #000000;
        top: 0;
        left: 0;
        opacity: 1;
        transform: scale(1);
        transform-origin: top left;
        transition: all 0.3s ease-in-out;
    }

    .ham-bar:nth-child(1):before {
        top: 0;
    }

    .ham-menu.--active .ham-bar:nth-child(1):before {
        transform: rotateZ(45deg) translate(2%, -50%);
    }

    .ham-bar:nth-child(2):before {
        transform-origin: center;
        top: 7px;
    }

    .ham-menu.--active .ham-bar:nth-child(2):before {
        transform: rotateZ(-45deg) translate(-2px, -2px);
    }

    .ham-bar:nth-child(3):before {
        top: 14px;
    }

    .ham-menu.--active .ham-bar:nth-child(3):before {
        /*transform: rotateZ(-45deg);*/
        transform: translateX(12px);
        opacity: 0;
    }

    .nav-menu{
        display: flex !important;;
    }
    .nav-menu-container .dropdown-item.selected .circle-mark {
        border: 0;
    }

    .nav-menu-container .dropdown-item.selected .circle-mark:after {
        content: "";
        margin-left: 7px;
        margin-right: 4px;
        display: inline-block;
        transform: rotate(45deg);
        height: var(--height);
        width: var(--width);
        border-bottom: var(--borderWidth) solid var(--borderColor);
        border-right: var(--borderWidth) solid var(--borderColor);
    }
    .profileScreen{
        margin: 0!important;
    }
}

/**************************************************/
/******       Toggle Slider (classes)        ******/
/**************************************************/

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 25px;
}
.switch.switch-sm {
    transform: scale(0.8);
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #7A848E 0%, #34465C 100%);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .5s;
    transition: .5s;
}

input:checked + .slider {
    background: linear-gradient(90deg, #00CD98 0%, #02A58D 100%);
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider:hover {
    opacity: 0.8;
}

.slider.round:before {
    border-radius: 50%;
}

/******        General HOVER (classes)        ******/

.sources-hover {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;

    /*transition: 0.3s ease-in-out;*/
}

.error-open {
    opacity: 1;
}


/******       BOXES error (classes)        ******/

.error_upper_div {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    position: absolute;
    top: 24px;
    left: 24px;
    width: 72px;
    height: 30px;
    cursor: pointer;
    border-radius: 15px;
    background-color: white;
    box-shadow: 0 0 4px 0 rgba(188, 194, 205, 0.2);
    -webkit-box-shadow: 0 0 4px 0 rgba(188, 194, 205, 0.2);
    z-index: 5;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}
.error_upper_div:hover {
    box-shadow: 0 0 10px 4px rgba(188, 194, 205, 0.45);
    -webkit-box-shadow: 0 0 10px 4px rgba(188, 194, 205, 0.45);
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.error_upper_div span {
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--error-color);
    width: 80%;
}

.error_upper_div svg {
    width: 13px;
    fill: var(--error-color);
    stroke: var(--error-color);
    stroke-width: 0.5px;
    padding-bottom: 0.2rem;
}

.acquisition-added-sources .error-changes svg {
    height: 20px;
    width: 20px;
    fill: var(--error-color);
    stroke: var(--error-color);
    stroke-width: 0.5px;
}

.acquisition-added-sources .error-changes span {
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--error-color);
    letter-spacing: 0;
    line-height: 20px;
    text-align: left;
}

.acquisition-added-sources .dim-img-error {
    width: 40% !important;
}

/******       HOVER Error (classes)       ******/

.acquisition-added-sources .hover-error > .hover-error-top {
    max-height: 13%;
}

.hover-error-top > .top-left span {
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1px;
    color: white;
    text-align: center;
}

.hover-error-top > .top-right svg {
    max-height: 24px;
    max-width: 24px;
    fill: white;
    stroke: rgba(248, 248, 248, 0.58);
}

.hover-error-top > .top-right svg:hover {
    fill: white;
    stroke: rgba(248, 248, 248, 0.58);
    stroke-width: 2px;
}

.hover-error-top > .top-left span {
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1px;
    color: white;
}

.hover-error > .hover-error-middle {
    max-height: 20% !important;
}

.hover-error > .hover-error-middle span {
    font-family: "Heebo", serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 1px;
    color: white;
}

.hover-error > .hover-error-bottom span {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1px;
    color: white;
}

.close-hover-error {
    cursor: pointer;
}

/******       "modal - add conection"       ******/
.grey-background {
    background: var(--background-color);
}

.white-background {
    background: white;
    margin-bottom: 1rem;
}
#addForm {
    margin-bottom: 0;
}
.modal-inner-content {
    padding: 72px 92px 72px 72px;
    height: inherit;
}
@media (max-width:765px) {
    .modal-inner-content {
        padding: 72px 20px 72px 20px;
    }
}

.modal-inner-body {
    padding-left: 6rem;
    padding-right: 3.4rem;
}

.modal .close-btn {
    position: absolute;
    right: 34px;
    top: 20px;
}

.modal .close-btn svg {
    height: 34px;
    width: 34px;
    fill: var(--grey-neutral-lighter);
}

.modal .close-btn span {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 10px;
    line-height: 15px;
    color: var(--grey-neutral-lighter);

    text-align: center;
    letter-spacing: 1px;
}

.modal-step-divs {
    padding-right: 16px;

    align-items: center;
    justify-content: center;
}

.modal-step-divs span {
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 12px;
    color: #38465E;
    letter-spacing: 0;
    text-align: start;
}

.modal-content .separating-lines {
    border-bottom: 1px solid var(--grey-neutral-lighter);
    width: 48px;
}

.modal-content .close-step {
    display: none;
}

.modal-content .complete-step {
    justify-content: center;
    margin-left: 6px;
    display: none;
}

.modal-content .complete-step svg {
    fill: var(--green-secondary);
    height: 25px;
    width: 27px;
}

.step-name {
    color: var(--grey-neutral-lighter) !important;
}

.active .step-shape:after {
    background-color: var(--primary-color) !important;
}

.active .step-name {
    color: var(--primary-color) !important;
}

.completed .complete-step {
    display: inline !important;
}

.completed .step-shape {
    display: none !important;
}

.completed .step-name {
    color: var(--input-color) !important;
}

.step-shape {
    height: 16px;
    width: 16px;
    margin-left: 16px;
    margin-right: 0.6em;
    position: relative
}

.step-shape:after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    background-color: var(--disable-modal-step-color);
    border-radius: 50%;
    height: inherit;
    width: inherit;
}

.step-shape span {
    z-index: 1;
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 10px;
    color: white;
    letter-spacing: 0;
    line-height: 0;
    text-align: center;
    padding-top: 0.1rem;
}

.flyde-form .button {
    border-radius: 3px;
}

.flyde-form .button a {
    background: var(--primary-color);
    height: 40px;
}

.flyde-form .button a:hover {
    background: var(--hover-color);
}

.flyde-form .button span {
    color: white;
    font-family: "Heebo", serif;
    font-weight: 500;
    letter-spacing: 1px;
}


.flyde-form .text-with-hover{
    display: flex;
    align-items: center;
    justify-content: start;
}

.flyde-form .text-with-hover a {
    color: var(--input-color);
    transition: 0.2s ease-in-out;
    cursor: pointer;
}

.flyde-form .text-with-hover a:hover {
    color: var(--hover-color);
}
.form-content .flyde-sm {
    height: 40px;
    width: 272px;
}
.connection-details .form-content .content-group {
    margin-left: auto;
    margin-right: auto;
    width: 272px;
}

.dataset-details {
    padding: 0 57px 57px 57px;
}
.dataset-details .dataset-details--wrapper {
    width: 100%;
}
.dataset-details .form-content .content-group {
    margin-left: auto;
    margin-right: auto;
    width: 272px;
}

/*.form-content select option[data-default] {*/
/*    color: #888;*/
/*}*/

.flyde-form .input-group input {
    color: var(--input-normal-color);
    font-weight: 300;
}
.flyde-form .input-group select:first-child {
     color: var(--input-normal-color) !important;
 }

.flyde-form .flyde-select select:focus,
.flyde-form .input-group input:focus{
    color: var(--input-color) !important;
}

/******       "modal - Step 1"       ******/

.modal-add-sources-s1 .title {
    margin-top: 56px;
    margin-bottom: 56px;
    text-align: center;
}

.modal-add-sources-s1 .title span {
    font-family: "Heebo", serif;
    font-weight: 400;
    font-size: 18px;
    color: var(--input-color);
    letter-spacing: 0;
    text-align: center;
}

.modal-add-sources-s1 .body-s1 {
}

.modal-add-sources-s1 .wrapper-connection {
    align-items: center;
    display: flex;
    flex-direction: column;
    /**height: 100%;**/
    justify-content: space-between;
    margin-bottom: 3rem;
    min-width: 392px;
}
@media(max-width:768px) {
    .modal-add-sources-s1 .wrapper-connection {
        min-width: auto;
    }
}

button:active.btn-flyde {

}

.wrapper-connection .img {
    display: flex;
    height: 106px;
    width: 129px;
    justify-content: center;
    align-items: center;
}


.wrapper-connection .img img {
    height: 100%;
}

.wrapper-connection .text {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
    text-align: center;
}

.wrapper-connection .button {
    display: flex;
}

.wrapper-connection .button-span {
    align-items: center;
    height: 17px;
    margin-left: 0.125rem;
}

.wrapper-connection .button-span span {
    font-size: 11px;
    padding-top: 2.5px;
}

/******       Modal - Form        ******/

.flyde-form .title {
    margin-top: 56px;
    margin-bottom: 32px;
}

.flyde-form .title span {
    font-family: "Heebo", serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0;
    color: var(--input-color);
}

.separating-bar{
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--background-color);
}

.separating-bar-alt{
    left: 0;
    width: 100%;
    height: 1px;
    background: #DADEE3;
}

.separating-bar-nav{
    border-bottom: 1px solid;
    margin-left: 16.5px;
    margin-right: 16.5px;
    width: 48px;

}

.form-login {
    width: 275px;
}

label.form-label,
select.form-label {
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 19px;

    color: black;
}

.flyde-form-boxes {
    position: relative;
    display: flex;
    align-items: center;

    min-height: 40px;
    min-width: 272px;
    max-width: 425px;

    border: 1px solid #AAB1BC;
    z-index: 2;

}

.flyde-form-boxes input {
    width: 150px;
}

.flyde-form-boxes select {
    padding-left: 17px;
}

.flyde-form .form-small {
    display: flex;
    justify-content: start;
    align-items: center;
}

.flyde-form .form-small .text span {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 20px;

    color: var(--input-color);
}

button.flyde-btn {
    padding-top: 0;
    padding-bottom: 0;
    height: 40px;
}

.form-caret-down {
    position: relative;
    border-color: black transparent !important;
    border-style: solid !important;
    border-width: 6px 4px 0 4px !important;
    height: 0 !important;
    width: 0 !important;
    right: 15px;
    margin-left: auto;
}

.form-caret-down.active {
    transform:rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transition: 0.4s;
}


/******       Modal - Step OK & KO         ******/
.modal-add-sources-ok-ko .image-ok {
    display: flex;
    height: 244px;
    width: 3366px;

    margin-top: 6rem;
}

.modal-add-sources-ok-ko .image-ok img {
    height: 100%;
    width: 100%;
}

.modal-add-sources-ok-ko .image-ko {
    display: flex;
    height: 271px;
    width: 447px;

    margin-top: 6.4rem;
}

.modal-add-sources-ok-ko .image-ko img {
    height: 100%;
    width: 100%;
}

.modal-add-sources-ok-ko .header {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 24px;
    color: var(--input-color);
    letter-spacing: 0;
    text-align: center;
}

.modal-add-sources-ok-ko .text {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 13px;
    color: var(--grey-neutral-light);
    letter-spacing: 0;
    text-align: center;
    line-height: 20px;

    width: 25rem;
    margin-top: 0.8rem;
    margin-bottom: 2rem;
}

.modal-add-sources-ok-ko .buttons {
    display: flex;
    flex-direction: row;
}

.button .btn {
    width: 160px;
    display: flex;
    justify-content: center;
}

.modal-add-sources-ok-ko .button span {
    font-size: 11px;
}


/******       Flows       ******/
.sidebar-flow-back-arrow {
    width: 25px;
    height: 25px;
    fill: white;
}

.sidebar-flow-back-label {
    color: white;
    font-weight: 500;
    font-family: "Heebo", serif;
}

.sidebar-flow-header {
    background-color: var(--primary-color);
    height: 56px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--input-animation-duration) var(--easing-function);
}

.sidebar-flow-header:hover {
    background-color: var(--hover-color);
}

.sidebar-flow-header-content {
    margin-left: 35px;
    cursor: pointer;
}

.flow-sidebar.sidebar-logo {
    max-height: 93px;
    min-height: 93px;
    padding-top: 0;
    padding-bottom: 0;
    width: inherit;
    align-items: center;
    margin: 0;
}
.sidebar-closed .logo-flyde {
    margin:0;
}

.sidebar-flow-content {
    flex-grow: 1;
}

.user-top-panel {
    padding-left: 12px;
    padding-right: 17px;
}

.user-name-label {
    font-weight: 500;
    letter-spacing: 1px;
    padding-right: 5px;
    padding-left: 10px;
    font-size: 12px;
}

.flow-toolbar {
    width: 100%;
    height: 56px;
    background-color: var(--primary-color);
}

.flow-toolbar-item {
    height: 56px;
    width: fit-content;
    border-right: 1px solid rgba(255, 255, 255, 0.20);
    margin: 0;

}

.undo-button {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    padding: 0;
    margin-left: 18px;
    transition: all 0.2s ease-in-out;
}
.undo-button > svg {
    transform: scaleX(-1);
    margin: auto;
    height: 24px;
    width: 24px;
    fill: white;
    transition: all 0.2s ease-in-out;
}
.undo-button:hover {
    background: transparent;
}
.undo-button:hover > svg {
    fill: #00439E;
}
.undo-button:active,
.undo-button:focus {
    background: transparent !important;
}
.undo-button.disabled {
    opacity: 50%;
}

.redo-button {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    padding: 0;
    margin-left: 22px;
    transition: all 0.2s ease-in-out;
}

.redo-button > svg {
    height: 24px;
    width: 24px;
    margin: auto;
    fill: white;
    transition: all 0.2s ease-in-out;
}
.redo-button:hover {
    background: transparent;
}
.redo-button:hover > svg {
    fill: #00439E;
}
.redo-button:active,
.redo-button:focus {
    background: transparent !important;
}
.redo-button.disabled {
    opacity: 50%;
}

.delete-button {
    padding: 4px 4px 3px 4px;
    margin-right: 24px;
    background: white;
}

.settings-button {
    padding: 4px 4px 3px 4px;
}

.settings-button:hover {
    background: white;
}
.settings-button:focus > svg,
.settings-button:active > svg {
    fill: var(--primary-color) !important;

}

.settings-button > svg {
    height: 24px;
    width: 24px;
    margin: auto;
    fill: var(--primary-color);
}

.delete-button > svg {
    height: 24px;
    width: 24px;
    margin: auto;
    fill: var(--primary-color);
}

.delete-button:focus > svg,
.delete-button:active > svg {
    fill: var(--primary-color) !important;

}

.zoom-container {
    position: relative;
    margin-left: 32px;
    margin-right: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.zoom-container > .left:before {
    content: "";
    position: absolute;
    background: white;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    top: -7px;
    left: -7px;
    height: 33px;
    width: 33px;
    z-index: 0;
}

.zoom-container > .right:before {
    content: "";
    position: absolute;
    background: white;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    top: -7px;
    right: -7px;
    height: 33px;
    width: 33px;
    z-index: 0;
}

.zoom-container > .center:before {
    content: "";
    position: absolute;
    top: -7px;
    left: 25px;
    height: 33px;
    width: 59%;
    background: white;
    z-index: -1;
}

.zoom-minus {
    padding: 0;
    margin: 0;
    background: #D8D8D8;
    border-radius: 50%;
    z-index: 1;
}

.zoom-minus:hover {
    background: #ababab;
}

.zoom-plus {
    padding: 0;
    margin: 0;
    background: #D8D8D8;
    border-radius: 50%;
    z-index: 1;
}

.zoom-plus:hover {
    background: #ababab;
}

.zoom-minus > svg {
    height: 18px;
    width: 18px;
}

.zoom-plus > svg {
    height: 18px;
    width: 18px;
}

.zoom-label {
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0 20px;
    z-index: 1
}

.active-container {
    position: relative;
    margin-left: 32px;
    margin-right: 10px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.active-container > .left:before {
    content: "";
    position: absolute;
    background: white;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    top: -4px;
    left: -7px;
    height: 33px;
    width: 33px;
    z-index: 0;
}

.active-container > .right:before {
    content: "";
    position: absolute;
    background: white;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    top: -4px;
    right: -7px;
    height: 33px;
    width: 33px;
    z-index: 0;
}

.active-container > .center:before {
    content: "";
    position: absolute;
    top: -4px;
    left: 25px;
    height: 33px;
    width: 59%;
    background: white;
    z-index: -1;
}

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

.active-label {
    margin-top: 1px;
    margin-right: 7px;
    margin-left: 7px;
    font-family: "Heebo", serif;
    font-weight: 500;
    color: #aeaeae;
    letter-spacing: 0;
}

.active-label.active {
    color: var(--green-secondary);
}

button.save-button {
    border-radius: 3px;
    height: 32px;
    width: auto;
    background: white;
    margin-left: 24px;
    padding: 0 12px;
    font-size: 12px;
    color: var(--primary-color);
    letter-spacing: 1px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: all 0.2s ease-in-out;
}

button.save-button:disabled {
    opacity: 0.5;
    color: var(--primary-color);
}

button.save-button:hover {
    background: #DADEE3;
    color: var(--primary-color);
}

button.save-button:focus,
button.save-button:active {
    background: #DADEE3;
}

button.save-button > svg {
    width: 17px;
    height: 17px;
    margin: auto 5px auto auto;
    fill: var(--primary-color);
}
button.save-button:hover > svg {
    fill: var(--primary-color);
}

button.test-button {
    border-radius: 3px;
    height: 32px;
    width: auto;
    background: white;
    margin-left: 24px;
    padding: 0 12px;
    font-size: 12px;
    color: var(--primary-color);
    letter-spacing: 1px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: all 0.2s ease-in-out;
}

button.test-button:disabled {
    opacity: 0.5;
    color: var(--primary-color);
}

button.test-button:hover {
    background: #DADEE3;
    color: var(--primary-color);
}

button.test-button:focus,
button.test-button:active {
    background: #DADEE3;
}

button.test-button > svg {
    width: 17px;
    height: 17px;
    margin: auto 5px auto auto;
    fill: var(--primary-color);
}
button.test-button:hover > svg {
    fill: var(--primary-color);
}

button.publish-button {
    border-radius: 3px;
    height: 32px;
    width: auto;
    background: var(--light-blue-flyde);
    margin-left: 8px;
    margin-right: 50px;
    padding: 0 12px;
    color: white;
    letter-spacing: 1px;
    font-size: 12px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: all 0.2s ease-in-out;
}

button.publish-button:disabled {
    opacity: 50%;
    color: white;
}

button.publish-button:hover {
    background: #00ABD5;
    color: white;
}


button.publish-button:focus,
button.publish-button:active {
    background: #00ABD5;
}

button.publish-button > svg {
    width: 17px;
    height: 17px;
    margin: auto 5px auto auto;
    fill: var(--primary-color);
}

.flow-section-icon {
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

.flow-collapsible {
    padding-left: 24px;
    position: relative;
}

.flow-collapsible:hover,
.flow-collapsible:active,
.flow-collapsible:focus {
    background: none;
}

.flow-collapsible > span {
    font-family: "Heebo", serif;
    font-weight: 500;
    color: var(--link-text-active);
    font-size: 13px;
    text-transform: none;
    margin-left: 10px;
    line-height: 19px;
    letter-spacing: 0;
}

.flow-collapsible:after {
    content: "\f107";
    color: #333;
    top: 50%;
    right: 24px;
    font-size: 16px;
    position: absolute;
    font-family: "FontAwesome";
    transform: translate(-50%, -50%);
}

.flow-collapsible[aria-expanded="true"]:after {
    content: "\f106";
}

.flow-section-container {
    margin-bottom: 24px;
}

.flow-section-container:first-child {
    margin-top: 24px;
}

.flow-section {
    padding: 5px 24px 4px 24px;
}

.flow-node {
    padding: 5px 15px 7px 15px;
    background: var(--background-color);
    color: var(--link-text-active);
    font-size: 13px;
    margin-bottom: 4px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0);
    -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,0);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0);
    transform: translateY(0);
    transition: transform 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out;
}

.flow-node:hover {
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
    -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.09);
    transform: translateY(-2px);
}

.flow-node > span {
    margin-right: auto;
}

.flow-node > img {
    margin-left: auto;
    width: 14px;
    height: 14px;
}

.flow-editor {
    width: 3000px;
    height: 1500px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow: hidden;
}

.editor-title-bar {
    padding: 32px 48px;
    z-index: 1;
}

.editor-title-bar > span {
    font-size: 24px;
    font-weight: 300;
}

.error-container {
    position: relative;
    height: 32px;
    padding: 0px 15px;
    cursor: pointer;
    margin-left: 16px;
    margin-right: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.error-container:after {
    content: "";
}

.error-container > .left:before {
    content: "";
    position: absolute;
    background: white;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    top: 0;
    left: 0;
    height: 33px;
    width: 33px;
    z-index: 0;
}

.error-container.has-errors > .left:before {
    background: var(--red-secondary);
}

.error-container > .right:before {
    content: "";
    position: absolute;
    background: white;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    top: 0;
    right: 0;
    height: 33px;
    width: 33px;
    z-index: 0;
}

.error-container.has-errors > .right:before {
    background: var(--red-secondary);
}

.error-container > .center:before {
    content: "";
    position: absolute;
    top: 0;
    left: 25px;
    height: 33px;
    width: 59%;
    background: white;
    z-index: -1;
}

.error-container.has-errors > .center:before {
    background: #CC3366;
}

#error-status {
    border-radius: 50%;
    height: 13px;
    width: 13px;
    margin: 0 8px 0 0;
    padding: 0;
    background: var(--success-color);
}

.error-container.has-errors #error-status {
    background: white;
}
.error-container.no-init #error-status {
    background: var(--primary-color);
}

#error-count-label {
    color: var(--input-color);
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 12px;
    margin-top: 2px;
}

.error-container.has-errors #error-count-label {
    color: white;

}

.error-dropdown {
    background: var(--white-primary);
    box-shadow: 0 2px 4px 0 rgba(188, 194, 205, 0.20);
    border-radius: 3px;
    margin-top: 8px;
}

.dropdown-menu {
    min-width: 13.25rem;
    max-height: 400px;
    padding: 0 !important;
    overflow: auto;
}

.dropdown-flyde {
    padding: 0;
    margin-top: 10px;
    box-shadow: none;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(188, 194, 205, 0.4));
    -webkit-filter: drop-shadow(0 2px 4px rgba(188, 194, 205, 0.4));
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 8px;
}

.dropdown-flyde .dropdown-item {
    height: 60px;
    padding: 0 18px;
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 13px;
}

.dropdown-flyde .dropdown-item:last-child {
    margin-bottom: 10px;
}
.config-dropdown {
    display: flex;
}
.narrow {
    height: 48px !important;
}

.dropdown-item > img {
    max-height: 32px;
}

.client-name {
    background: #E7EBEF;
    margin: 12px 18px 7px 18px;
    text-align: center;
    border-radius: 5px;
}

.client-name > span{
    color: #4F5D72;
}

.client-key {
    text-align: center;
    font-weight: 300;
}
.dropdown-flyde .client-key > p{
    margin-bottom: 7px!important;
}

.circle-mark {
    margin-right: 10px;
    height: 20px;
    width: 20px;
    border: 1px solid var(--grey-neutral-lighter);
    background: transparent;
    border-radius: 50%;
}

.light {
    font-weight: 300 !important;
}

.medium,
.selected {
    font-weight: 500 !important;
}

.dropdown-flyde .dropdown-item.selected .circle-mark {
    border: 0;
}

.dropdown-flyde .dropdown-item.selected .circle-mark:after {
    content: "";
    margin-left: 7px;
    margin-right: 4px;
    display: inline-block;
    transform: rotate(45deg);
    height: var(--height);
    width: var(--width);
    border-bottom: var(--borderWidth) solid var(--borderColor);
    border-right: var(--borderWidth) solid var(--borderColor);
}

.hidden {
    display: none !important;
}

.p-center {
    text-align: center;
}

.p-grey {
    color: #7D838D;
}

.title-header {
    height: 90px;
}

.plus {
    margin-right: 6px !important;
}

.plus > svg {
    fill: white;
}

.color-circle {
    position: relative;
    margin-left: 22px;
}

.color-circle.published:before {
    content: "";
    position: absolute;
    top: -6px;
    left: -22px;
    width: 14px;
    height: 14px;
    background: var(--success-color);
    border-radius: 50%;
}

.color-circle.draft:before {
    content: "";
    position: absolute;
    top: -6px;
    left: -22px;
    width: 14px;
    height: 14px;
    background: var(--yellow-color);
    border-radius: 50%;
}



.color-donut {
    position: relative;
    margin-left: 22px;
}

.color-donut.published:before {
    content: "";
    position: absolute;
    top: -6px;
    left: -22px;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    border: 2px solid var(--success-color);
}

.color-donut.draft:before {
    content: "";
    position: absolute;
    top: -6px;
    left: -22px;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    border: 2px solid var(--yellow-color);
}

.bg-white {
    height: 100%;
}

.flyde-link-table {
    color: var(--primary-color) !important;
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 13px;
    transition: color 0.2s ease-in-out;
}

.flyde-link-table:hover {
    color: #001f47 !important;
}

.flyde-outline-table {
    background: transparent !important;
    border-color: var(--primary-color);
    border-width: 1px;
    border-radius: 3px;
    margin-left: 19px;
    height: 32px;
    padding: 0 16px 0 11px;
}

.flyde-outline-table:hover {
    box-shadow: none !important;
    background: transparent !important;
    border-color: var(--hover-color) !important;
    color: var(--hover-color) !important;
}

.options-btn-table {
    width: 16px;
    margin-right: 6px;
}

.pagination {
    background: transparent !important;
    font-family: "Heebo", serif !important;
    font-weight: 300 !important;
    font-size: 12px !important;

    line-height: 20px !important;
}

.pagination .page-link {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    color: var(--grey-neutral-light) !important;
}

.pagination .page-item {
    display: flex;
    align-items: center;
}

.pagination .page-item.prev .page-link,
.pagination .page-item.next .page-link {
    padding: 0;
}

.pagination .page-item.active .page-link {
    color: var(--primary-color) !important;
}

.pagination .page-item.active .page-link:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(0, 102, 255, 0.10);
}

.bottom-config-panel {
    bottom: 0;
    left: 0;
    max-height: calc(90% - 149px);
    width: 100%;
    padding: 35px 35px;
    background: white;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));
    transition: all 0.4s ease-in-out;
    z-index: 1000;
}

.fill-white {
    fill: white !important;
}
#fold-panel {
    top: 0 !important;
    right: 20px !important;
    background: linear-gradient(to top, rgba(255, 255, 255, 0), white 50%);
    background: -webkit-linear-gradient(to top, rgba(255, 255, 255, 0), white 50%);
    background: -moz-linear-gradient(to top, rgba(255, 255, 255, 0), white 50%);
    background: -ms-linear-gradient(to top, rgba(255, 255, 255, 0), white 50%);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transition: transform 0.4s ease-in-out;
    -webkit-transition: transform 0.4s ease-in-out;
    -moz-transition: transform 0.4s ease-in-out;
    -o-transition: transform 0.4s ease-in-out;
}

#fold-panel img {
    transition: transform 0.4s ease-in-out;
    -webkit-transition: transform 0.4s ease-in-out;
    -moz-transition: transform 0.4s ease-in-out;
    -o-transition: transform 0.4s ease-in-out;
}

.panel-closed {
    bottom: -30px;
    transform: translateY(100%);
    opacity: 0;
}

.panel-closed #fold-panel img {
    transform: translateY(-50);
    -webkit-transform: translateY(-50);
    -moz-transform: translateY(-50);
    -o-transform: translateY(-50);
}

#general-main-content {
    overflow-y: auto;
    overflow-x: hidden;
}

.no-wrap {
    white-space: nowrap;
}

.file-color {
    color: var(--input-color);
    font-weight: 300;
    margin-bottom: 0;
    cursor: pointer;
}

.folder-color {
    font-weight: 300;
}

.upt_time_text_failed {
    font-weight: 500 !important;
    color: var(--red-secondary) !important;
}

.has-error {
    background: var(--red-secondary) !important;
}

.hover-error-title {
    color: white;
    font-size: 17px;
    margin-bottom: 10px;
}

.hover-error-container {
    color: white;
    padding: 72px 24px 24px;
}

/******       Datasets        ******/


.text-box {
    color: var(--grey-neutral-light) !important;
    width: 415px;
    text-align: center;
    margin-bottom: 20px;
}

.datasets .size-cards {
    height: 280px;
    margin: 0;
    padding: 0;
}

.datasets .size-cards .dataset-info {
    height: 280px;
    margin: 0;
}
.datasets .size-cards .dataset-info--general {
    padding: 32px 24px 24px 32px;
    height: calc(100% - 53px);
}
.datasets .size-cards.processing .dataset-info--general {
    padding-top: 16px;
    height: calc(100% - 53px - 40px);
}
.datasets .size-cards .dataset-info--special {
    padding: 24px;
    height: calc(100% - 53px - 41px);
}
.datasets .size-cards.processing .dataset-info--special {
    padding-top: 16px;
    height: calc(100% - 53px - 41px - 31px);
}

.datasets .size-cards .dataset-active {
    width: 100%;
    height: 53px;
    align-items: center;
    margin: 0;
    padding-right: 20px;
}

.wrapper-little-card{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    grid-row-gap: 10px;
    grid-column-gap: 24px;
}

.grid-auto-fill-min20 {
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
@media all and (min-width: 1920px) {
    .grid-auto-fill-min20 {
        grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    }
}

.tab-dataset {
    position: relative;
}

.select-tab {
    position: relative;
    height: 30px;
    cursor: pointer;
}

.select-tab span {
    font-family: "Heebo", serif;
    font-style: normal;
    font-weight: 500;
    color: var(--checkbox-stroke);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.select-tab:hover {
    position: relative;
    border-bottom: 0;
}

.select-tab:hover span {
    color: var(--primary-color);
}

.select-tab:hover:after {
    color: var(--primary-color);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 2px solid var(--primary-color);
}

span.txt-hour {
    font-family: "Heebo", serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 20px;
    padding-top: 2px;
    color: var(--input-color);
}

.reaload-svg{
    height: 20px;
    width: 20px;
}

.reaload-svg svg{
    fill: var(--primary-color);
    stroke: var(--primary-color);
    stroke-width: 0.5px;
    height: 100%;
    width: 100%;
}


.star-svg{
    height: 13px;
    width: 13px;
    margin-left: 24px;
    margin-right: 6px;
}

.star-svg svg{
    fill: #ffffff;
    stroke: #ffffff;
    stroke-width: 0.5px;
    height: 100%;
    width: 100%;
}

.wrapper-dataset h3{
    font-size: 13px !important;
}

.wrapper-dataset h2, h3{
    margin-bottom: 0 !important;
}

.dataset-type span{
    font-family: "Heebo", serif;
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    /* identical to box height */

    text-align: center;
    letter-spacing: 1px;
}

.dataset-type.original {
    background: rgba(255, 180, 0, 0.1);
    border-radius: 3px;
}

.dataset-type.original span{
    color: var(--yellow-color);
    margin: 2px 8px 2px 8px;
}

.dataset-type.process{
    background: rgba(0, 102, 255, 0.1);
    border-radius: 3px;
}

.dataset-type.process span{
    color: var(--primary-color);
    margin: 2px 8px 2px 8px;
}

.color-bar-datasets.original{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--yellow-color);
}

.color-bar-datasets.process{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--primary-color);
}

.datasets .active:after {
    color: var(--primary-color);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 2px solid var(--primary-color);
}

.datasets .active span {
    color: var(--primary-color);
}
button.btn-flyde-outline.hover-grey-color{
    border: 1px solid white;
    background: var(--input-color);
    color: white;
    height: 40px;
    opacity: 0.5;

    /*color: #ffffff94;*/
}

button.btn-flyde-outline.hover-grey-color:hover{
    opacity: 1;
    transition: 0.3s;
}

.hover-box-img {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
}

.hover-box-img svg {
    fill: rgba(255, 255, 255, 0.6);
    width: 24px;
    height: 24px;
    transition: all 0.6s ease-in-out;
}

.hover-box-img svg:hover {
    fill: rgba(255, 255, 255, 0.9);
    stroke: white;
    stroke-width: 0.5px;
}

.hover-dataset-div{
    position: relative;
    height: 100%;
}

.properties-dataset-title,
#dataset-title,
#dataset-version,
#rgpd-title{
    color: var(--primary-color);
    font-family: "Heebo", serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0;
}


.tag.last-version{
    background: rgba(0, 205, 152, 0.1);
    border-radius: 3px;
    display: flex;
    justify-content: center;
}

.tag.last-version span{
    color: var(--success-color);
    margin: 2px 8px 2px 8px;
    font-size: 10px;
    line-height: 15px;
    font-weight: 500;
    letter-spacing: 0.909091px;
    text-transform: uppercase;
}

.datepicker-datasets{
    position: relative;
    background-color: var(--background-color);
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 3px;
    height: 40px;
}

.datepicker-datasets svg{
    width: 18px;
    height: 20px;
    fill: var(--primary-color)
}

.daterangepicker.dropdown-menu {
    width: 100% ;
}

.version-wrapper{
    background-color: var(--white-primary);
    border-top: 1px solid #DADEE3;
    border-left: 1px solid #DADEE3;
    border-right: 1px solid #DADEE3;
}

.version-wrapper:last-child {
    background-color: var(--white-primary);
    border-top: 1px solid #DADEE3;
    border-left: 1px solid #DADEE3;
    border-right: 1px solid #DADEE3;
    border-bottom: 1px solid #DADEE3;
}

.version-wrapper.active {
    background-color: #F9F9FB;
}

.version-wrapper .error-log{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;

    background-color: var(--red-light);
    height: 40px;
}

.version-wrapper .error-log svg{
    padding-left: 20px;
    padding-right: 11px;
}

.detail-container{
    display: grid;
    grid-template-columns: auto minmax(270px, auto) 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 25px;
    grid-template-areas:
            "name       input-name      save-btn"
            "treatment  treatment-res   nothing"
            "format     format-res      nothing"
            "type       type-res        nothing"
            "date       date-res        nothing"
            "size       size-res        nothing"
            "last-upt   last-upt-res    nothing"
            "operation  operation-res   nothing";

    justify-items: start;
    align-items: center;
}

.detail-container label{
    font-size: 13px;
    margin: 0;
    color: var(--input-color);
}

.detail-container p{
    margin: 0;
}

.detail-container > .name{
    grid-column-start: name;
    grid-column-end: name;
}

.detail-container > .input-name{
    grid-column-start: input-name;
    grid-column-end: input-name;
}

.detail-container > .save-btn{
    grid-column-start: save-btn;
    grid-column-end: save-btn;
}

.detail-container > .format{
    grid-column-start: format;
    grid-column-end: format;
}

.detail-container > .format-res{
    grid-column-start: format-res;
    grid-column-end: format-res;
}

.detail-container > .type{
    grid-column-start: type;
    grid-column-end: type;
}

.detail-container > .type-res{
    grid-column-start: type-res;
    grid-column-end: type-res;
    display: flex;
    align-items: center;
}

.detail-container > .date{
    grid-column-start: date;
    grid-column-end: date;
}

.detail-container > .date-res{
    grid-column-start: date-res;
    grid-column-end: date-res;
}

.detail-container > .size{
    grid-column-start: size;
    grid-column-end: size;
}

.detail-container > .size-res{
    grid-column-start: size-res;
    grid-column-end: size-res;
}

.detail-container > .last-upt{
    grid-column-start: last-upt;
    grid-column-end: last-upt;
}

.detail-container > .last-upt-res{
    grid-column-start: last-upt-res;
    grid-column-end: last-upt-res;
}

.detail-container > .operation{
    grid-column-start: operation;
    grid-column-end: operation;
}

.detail-container > .operation-res{
    grid-column-start: operation-res;
    grid-column-end: operation-res;
}

.detail-container > .treatment{
    grid-column-start: treatment;
    grid-column-end: treatment;
}

.detail-container > .treatment-res{
    grid-column-start: treatment-res;
    grid-column-end: treatment-res;
}

.detail-container-sm{
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    grid-column-gap: 8px;

    justify-items: start;
    align-items: center;
}

.detail-container-sm > .date{
    font-family: Heebo, serif;
    font-weight: 300;
    grid-column-start: 1;
    grid-column-end: 2;
}
.detail-container-sm > .date.active{
    font-weight: 400;
}

.detail-container-sm > .tag{
    grid-column-start: 2;
    grid-column-end: 3;
}

.detail-container-sm > .btn-hide{
    grid-column-start: 4;
    grid-column-end: 5;
}

.detail-container-sm > .btn-download{
    grid-column-start: 5;
    grid-column-end: 6;
}

#datasets_table a.flyde-link-table{
    font-family: Heebo, serif;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    color: var(--input-color) !important;
}


/*********************************/
/*********************************/
/*********************************/

.output-port-connected {
    fill: var(--input-color);
}
.item-message {
    font-family: Heebo, serif;
    font-weight: 300;
    color: var(--red-secondary);
    font-size: 12px;
}
.item-message-see{
    font-family: Heebo, serif;
    font-weight: 500;
    color: var(--input-color);
    font-size: 12px;
    padding-left: 15px;
}
.item-svg-image {
    margin: 0 10px 0 0 !important;
    width: 20px;
}
.dropdown-item {
    padding: 15px 13px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.dropdown-item:last-child {
    border-bottom: 0;
}
#dropdownErrors {
    padding: 0 !important;
}
#dropdownErrors.show {
    display: flex;
}
.flyde-alert-div {
    margin-top: 21px;
    height: 41px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}
.flyde-alert {
    padding: 10px 20px;
    height: 100%;
    width: 100%;
    background: var(--warning-alert-color);
    color: var(--warning-alert-font-color) !important;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.flyde-alert span {
    margin-left: 10px;
    font-family: Heebo, serif;
    font-weight: 400;
    font-size: 13px;
}
.bottom-panel-background {
    background: var(--bottom-panel-background);
    padding: 30px;
}
.operator-separator {
    text-transform: uppercase;
    font-family: Heebo, serif;
    font-size: 13px;
    color: var(--input-color);
    font-weight: 300;
}
.mb-13 {
    margin-bottom: 13px;
}
#config-title {
    font-family: Heebo, serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--primary-color);
}
#frmSubselect fieldset .form-group:last-child {
    margin: 0;
}
.inner-flow-sidebar-container {
    min-height: min-content;
    display: flex;
    width: 100%;
}
.flyde-header {
    height: 160px;
    position: fixed;
    width: calc(100% - 264px);
    background: var(--background-color);
    transition: all 0.5s ease-in-out;
    z-index: 10;
}
.flyde-header-alt {
    height: 95px;
    background: rgba(255,255,255, 0.7);
    z-index: 10;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.main-sidebar.sidebar-closed + .content-wrapper > .flyde-header {
    width: calc(100% - 101px);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.flyde-header + #general-main-content .simplebar-track.simplebar-vertical {
    top: 160px !important;
    transition: top 0.3s ease-in-out;
}
.flyde-header-alt + #general-main-content .simplebar-track.simplebar-vertical {
    top: 95px !important;
    transition: top 0.3s ease-in-out;
}
.flyde-header .bottom-flyde-row {
    transform: translateY(0);
    transition: all 0.5s;
}
.flyde-header-alt .bottom-flyde-row {
    transform: translateY(-69px);
    transition: all 0.5s;
}
.flyde-header .main-topbar #breadcrumb-labels {
    transform: translateY(0);
    transition: all 0.5s;
}
.flyde-header-alt .main-topbar #breadcrumb-labels {
    transform: translateY(-100px);
    transition: all 0.1s;
}
.scrollable-sidebar {
    overflow-y: auto;
    height: calc(100vh - 56px - 93px);
}
.w-fit-content {
    width: fit-content;
}
.validation-error {
    color: var(--error-color) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 13px;
}

/*******************************/
/*         Scroll bar          */
/*******************************/

.scrollbar-sm::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

.scrollbar-sm::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.scrollbar-sm::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
}
.scrollbar-sm::-webkit-scrollbar-thumb:active {
    background-color: #999999;
}

.scrollbar-sm::-webkit-scrollbar-track {
    background: #e1e1e1;
    border-radius: 4px;
}
.scrollbar-sm::-webkit-scrollbar-track:hover,
.scrollbar-sm::-webkit-scrollbar-track:active {
    background: #d4d4d4;
}
/*******************************/
/*******************************/

.dashboard-blue-box {
    padding: 20px;
    font-family: "Heebo", serif;
    font-size: 12px;
    color: white;
    border-radius: 10px;
}

.dashboard-blue-box .rounded {
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%!important;
}

.dashboard-blue-box svg {
    padding: 10px;
    width: 40px;
    height: 40px;
}

.dashboard-white-box {
    padding: 14px;
    font-family: "Heebo", serif;
    font-size: 12px;
    background-color: white;
    border-radius: 10px;
}


.dashboard-title {
    overflow: hidden;
    width: 100%;
}
.dashboard-title span {
    float: left;
    font-size: 20px;
    text-transform: capitalize;
}
.dashboard-title hr {
    float: right;
    height: 1px;
    margin: 15px 0 0 0;
}
.connection-details {
    padding: 0 57px 57px 57px;
}
.dataset-details {
    padding: 20px 57px;
}
.w-acquisition-process {
    width: 100%;
}
.p-inner-connection {
    padding: 32px 32px 0 32px;
}
.d-shadow {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
}
#no-canvas {
    z-index: 0;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease-in-out;
}

#no-canvas.canvas-hidden {
    opacity: 0;
    z-index: -1;
    transform: translateY(-50px);
}

#btn-delete {
    color: #CC3366;
    border-color: #CC3366;
}
[data-shape="flow.shape.dataset.DatasetInput"] .dataset-name {
    padding-left: 15px;
}
.dataset-circle {
    position: absolute;
    height: 10px;
    top: 48%;
    transform: translateY(-50%);
    width: 10px;
    border-radius: 50%;
    margin: 0 !important;
    padding: 0 !important;
}
.dataset-circle.original {
    background: var(--yellow-color);
}
.dataset-circle.processed {
    background: var(--primary-color);
}
.hover-error-message {
    color: white;
}

.editable-input {
    font-family: "Heebo", serif;
    font-weight: 300;
    font-size: 24px;
    letter-spacing: 0;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    background: transparent;
    outline: none;
    width: auto;
}
.editable-input:hover {
    outline: none;
}
.editable-input[contenteditable="true"] {
    color: var(--grey-primary);
    text-decoration: underline;
}
.editable-input[contenteditable="true"] + button {
    /*display: none;*/
}

.editable-input[contenteditable="false"] {
    color: var(--grey-primary);
    text-decoration: none;
}

.CodeMirror-gutter {
    background-color: var(--light-blue-flyde);
}

.CodeMirror-linenumber {
    color: white!important;
}

#btn-save {
    transition: all 0.3s ease-in-out;
}
.saved {
    background: var(--green-color) !important;
}
.not-saved {
    background: var(--red-color) !important;
}
.error-container-scrollable {
    max-height: 310px;
    overflow: hidden;
}

.data-type-txt {
    font-family: "Heebo", serif;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 20px;
    color: #38465E;
}

.data-type-svg{
    margin-top:4px;
    margin-right: 4px;
    height: 10px;
    width: 10px;
}

.accept-form {
    width: 1167px;
    margin-left: auto;
    margin-right: auto;
}

.accept-logo {
    margin-top: 43px;
    margin-bottom:43px;
}

.accept-logo img {
    /*height: 24px;*/
}

.accept-container {
    width: 100%;
    background-color: #ffffff;
}

.accept-title {
    margin: 43px 12px 43px 12px;
    text-align: center;
}

.accept-text {
    width: 1030px;
    overflow: scroll;
    border: 1px solid #DADEE3;
    margin: 0 auto 0 auto;
    padding: 32px;
    color: #7D838D;
}

.accept-checkbox {
    margin: 22px auto 22px auto;
}

.accept-checkbox .file-color {
    font-weight: 300;
    color: #38465E;
}

.accept-button {
    margin-bottom: 43px;
}

.accept-footer {
    height: 43px;
}

.span-green{
    color:#07B286;
    font-weight: bold;
}

#apps-dropdown {
    width: 289px;
    height: auto;
    display: flex;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 20px 10px 0 10px!important;
}

#apps-dropdown .app {
    width: 33%;
    display: flex;
    flex-direction: column;
    align-content: center;
    padding: 5px 0;
    margin-bottom: 20px;
}

#apps-dropdown .app img{
    height: 25px;
}

#apps-dropdown .app span{
    text-align: center;
    font-size: 12px;
    font-weight: 300;
    color: #7D838D;
}

#apps-dropdown .app.active span{
    font-weight: 500;
    color: #38465E;
}

#apps-dropdown .app:hover {
    background-color: #f3f8ff;
}


.dropdown-menu-center {
    right: auto;
    left: auto;
}

#apps-menu-btn .flyde-toolbar-item {
    height: 18px;
}

#apps-menu-btn .flyde-toolbar-item {
    fill: var(--primary-color) !important;
}

#apps-menu-btn.nav-item-active{
    background: var(--primary-color) !important;
}

#apps-menu-btn.nav-item-active .flyde-toolbar-item {
    fill: white!important;
}

#connections {
    width: 100%;
    height: 100%;
}
#mappings-container {
    padding: 24px;
    background: rgba(0, 102, 255, 0.05);
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
}

#mappings-container .connection-line {

}
.connection-mapping {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, calc(30% - 15px)) 10%;
    grid-gap: 15px;
    margin-bottom: 15px;
}
.connection-mapping-wrapper {
    width: 100%;
}
.connection-mapping-wrapper-button {
    flex-direction: column-reverse !important;
    margin-bottom: 12px;
}
.dataset-details-button-spacing {
    margin-right: 8px;
}

.wizard-container {
    padding: 0 57px 57px 57px;
}
.wizard-container .modal-inner-body {
    padding-left: 3.4rem;
    padding-right: 3.4rem;
}
.wizard-container  form .content-group {
    margin: 0 auto;
    width: 272px;
}
/*********************************
*
* Modals
*
*********************************/
.modal-dialog.modal-full {
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px;
    position: relative;
    width:fit-content;
    width: -moz-fit-content;
}

/*********************************
*
* Common
*
*********************************/
.h2__primary {
    color: var(--primary-color);
}
.a__primary {
    color: var(--primary-color);
    font-family: "Heebo", sans-serif;
    font-size: 0.81rem;
    font-weight: 300;
}
/*********************************
*
* Orchestation
*
*********************************/
.orchestation-popup-container {
    background-color: #F8F8F8;
    padding: 15px;
    margin-left: 40px;
    margin-right:40px;
}
.orchestation-popup-container tr > td:nth-child(1) {
    height: 30px;
    text-align: center;
}
.orchestation-popup-container tr > td:nth-child(1) > img {
    height: 20px;
}
.orchestation-popup-container tr > td:nth-child(2) {
    height: 30px;
    padding-left: 10px;
}
.form-orchestation tbody tr {
    background-color: var(--background-color);
    border-bottom: 1px solid #DADEE3;
}
.form-orchestation tbody tr.open {
    background-color: #FFF;
    border-bottom: none;
}
.form-orchestation tbody .choose-children {
    cursor: pointer;
}
/*********************************
*
* Progress Wizard bar
*
*********************************/
.flyde-progress-wizard-bar {
    margin: 50px 57px 0 57px;
}
.flyde-progress-wizard-bar > div {
    background: rgb(60,100,239);
    background: -moz-linear-gradient(90deg, rgba(60,100,239,1) 0%, rgba(0,207,251,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(60,100,239,1) 0%, rgba(0,207,251,1) 100%);
    background: linear-gradient(90deg, rgba(60,100,239,1) 0%, rgba(0,207,251,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c64ef",endColorstr="#00cffb",GradientType=1);
    height:10px;
}

.acquisition-first {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.processing-header,
.processing-component {
    background: #FFF9EA;
    height: 40px;
    padding: 0 14px;
}
.processing-component.special {
    height: 31px;
}

.processing-header .loader,
.processing-component .loader {
    margin-bottom: 1px;
}

.processing-header span,
.processing-component span {
    color: var(--yellow-color);
    font-family: Heebo, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    margin-left: 10px;
}

.processing-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 24px;
}

.acquisition-top-help {
    background-color: var(--grey-neutral-hover);
    padding: 25px;
    font-family: Heebo, sans-serif;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 50px;
}

.acquisition-top-help .acquisition-top-help-title {
    font-weight: 500;
}

.acquisition-top-help .acquisition-top-help-subtitle {
    font-weight: 500;
    margin-top:20px;
}

.acquisition-top-help .acquisition-top-help-text {

}

.vertical-separator {
    background: #38465E;
    width: 1px;
    height: 11px;
    margin-left: 12px;
    margin-right: 12px;
    opacity: 0.5;
}
.dataset-connection {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dataset-connection img {
    width: 15px;
    height: 15px;
    margin-right: 7px;
}
.dataset-detail-save {
    margin-top: 46px;
    padding-top: 24px;
    position: relative;
}
.horizonal-separator {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 1px solid #DADEE3;
    margin-left: -32px;
    width: calc(100% + 56px);
}
.delete-special-title {
    font-family: 'Heebo', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 19px;
    text-align: left;
}
#csv-load-error {
    height: 200px;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 300;
}


.select-client-container {
    width: 100%;
    background-color: #ffffff;
}

.select-client-title {
    margin: 43px 12px 43px 12px;
    text-align: center;
}

.select-client-select {
    width: 538px!important;
    margin: 24px auto 24px auto;
    outline: 1px solid var(--grey-neutral-lighter);
}

.select-client-subtitle {
    margin: 22px auto 0 auto;
}

.flyde-header-row{
    padding: 0 135px;
    min-width: 100%;
    position: relative;
    background: white;
    height: var(--header-height);
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.05));
    z-index: 10;
}

.section-subtitle {
    font-family: "Heebo", serif;
    font-weight: 500;
    font-size: 13px;
    color: #38465E;
    line-height: 19px;
}

.section {
    padding: 12px 0 !important;
}

.logo-app{
    height: 38.3px;
    width: 38.3px;
}
.logo-arrow{
    height: 12px;
}

.logo-block{
    display: flex;
    justify-content: flex-end;
    color: var(--primary-color);
}

.logo-block span{
    color: var(--primary-color)
}

.engagement-general-legends {
    display: flex;
    justify-content: flex-end;
}



.engagement-general-legends div {
    margin-right: 10px;
}

.scoring-white-box h3 {
    font-family: "Heebo", serif;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
}


.scoring-error {
    background-color: #ffffff;
    padding: 100px 100px 100px 100px;
    text-align: center;
}

.scoring-error-main-img img {
    width: 220px;
}


.scoring-error-main-title {
    margin-top: 25px;
    font-family: 'Heebo';
    font-size: 24px;
    font-weight: 300;
    color: #38465E;
}

.scoring-error-main-text {
    margin-top: 16px;
    font-family: 'Heebo';
    font-size: 13px;
    font-weight: 300;
    line-height: 13px;
    color: #7D838D;
}

.scoring-title {
    overflow: hidden;
}
.scoring-title span {
    float: left;
    font-size: 20px;
    text-transform: capitalize;
}
.scoring-title hr {
    float: right;
    height: 1px;
    margin: 15px 0 0 0;
}

.scoring-white-box {
    padding: 32px;
    font-family: "Heebo", serif;
    font-size: 12px;
    background-color: white;
}

.scoring-white-box h3 {
    font-family: "Heebo", serif;
    font-size: 13px;
    font-weight: 500;
    color: #000000;
}

.scoring-general .scoring-stages {
    margin-top: 65px;
    width: 100%;
    display: flex;
}

.scoring-general .scoring-stages .scoring-stage {
    flex: 1;
    height: 86px;
    border: 1px solid #F9F9FB;
    text-align: center;
}

.scoring-general .scoring-stages .scoring-stage.scoring-stage-last,
.scoring-general .scoring-stages .scoring-stage.scoring-stage-first
{
    border: 0;
    padding-top:1px;
}

.scoring-general .scoring-stages .scoring-stage .scoring-stage-color {
    height: 10px;
}

.scoring-general .scoring-stages .scoring-stage.scoring-stage-inactive .scoring-stage-color {
    background-color: #F9F9FB!important;
}

.scoring-general .scoring-stages .scoring-stage.scoring-stage-first .scoring-stage-color {
    border-radius: 100px 0px 0px 100px;
}

.scoring-general .scoring-stages .scoring-stage.scoring-stage-last .scoring-stage-color {
    border-radius: 0px 100px 100px 0px;
}

.scoring-general .scoring-stages .scoring-stage .scoring-stage-number {
    font-family: "Heebo", serif;
    font-size: 16px;
    font-weight: 500;
    color: #38465E;
    padding: 10px 0 5px 0;
}

.scoring-general .scoring-stages .scoring-stage.scoring-stage-inactive .scoring-stage-number {
    color: #D3D3D3;
}

.scoring-general .scoring-stages .scoring-stage .scoring-stage-title {
    font-family: "Heebo", serif;
    font-size: 13px;
    font-weight: 300;
    color: #38465E;
}

.scoring-general .scoring-stages .scoring-stage.scoring-stage-inactive .scoring-stage-title {
    color: #D3D3D3;
}

.scoring-general .scoring-stages .scoring-stage.scoring-stage-current .scoring-stage-number {
    font-weight: 700;
}

.scoring-general .scoring-stages .scoring-stage.scoring-stage-current .scoring-stage-title {
    font-weight: 700;
}

.scoring-general .scoring-stages .scoring-stage.scoring-stage-current {
    border: 1px solid!important;
    padding-top: 0;
}

.scoring-general .scoring-stages .scoring-stage.scoring-stage-current .scoring-stage-color {
    border-radius: 0!important;
}


.business-title h2 {
    width: max-content;
    margin: 0;
}

.business-title {
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}

.business-title h2 span {
    font-size: 20px;
    font-weight: 500;
    color: #38465E;
    float: left;
    width: max-content;
}

.business-title hr {
    float: right;
    height: 1px;
    width: 100%;
    margin-left: 10px;
}

.business-subtitle p {
    font-size: 13px;
    font-weight: 300;
    color: #7D838D;
}

.business-metric-left {
    display: flex;
    align-items: center;
    min-width:33%;
}

.business-metric-left h3 {
    font-weight: 300;
    font-size: 36px;
    color: #00439D;
}

.business-metric-left span {
    font-weight: 400;
    font-size: 13px;
    color: #000000;
    display: block;
}

.business-metric-left img {
    width: 50px;
    height: 50px;
    margin: 25px 10px 25px 0;
}

.business-metric-right {
    display: flex;
    align-content: center;
    align-items: center;
}

.business-metric-right h3 {
    font-weight: 300;
    font-size: 36px;
    color: #4ED3A4;
    margin: 25px 10px 25px 0;
    border-left: 1px solid #D8D8D8;
    padding-left: 25px;
    display: flex;
}

.business-metric-right h3 i {
    font-size: 24px;
    margin-top: 12px;
}

.business-metric-right h3.color-red {
    color: #CC3366;
}

.business-metric-right h3.color-yellow {
    color: #F79009;
}

.business-metric-right span {
    font-weight: 400;
    font-size: 13px;
    color: #000000;
    display: block;
    margin: 25px 10px 25px 0;
}

.business-metric-right img {
    width: 70px;
    margin: 25px 10px 25px 0;
}

.business-trends-chart {
    background-color: #ffffff;
    padding: 24px;
    margin: 27px 0 70px 0;
}

.business-trends-chart h2 {
    font-weight: 500;
    font-size: 13px;
    color: #000000;
    width: 100%;
}

.business-trends-chart p {
    font-weight: 300;
    font-size: 13px;
    color: #7D838D;
    width: 100%;
}



.business-metric-right2 {
    display: flex;
    align-content: center;
    align-items: center;
}

.busines-metric-right-percents {
    display: flex;
    border-left: 1px solid #D8D8D8;
    flex-direction: column;
    margin: 0 10px 0 0;
}

.business-metric-right2 h2 {
    font-weight: 300;
    font-size: 36px;
    color: #00439D;
    margin: 0;
    padding-left: 25px;
    display: flex;
}

.business-metric-right2 h3 {
    font-weight: 500;
    font-size: 14px;
    color: #4ED3A4;
    margin: 0;
    padding-left: 25px;
    display: flex;
}

.business-metric-right2 h3 i {
    font-size: 14px;
    margin-top: 3px;
}

.business-metric-right2 h3.color-red {
    color: #CC3366;
}

.business-metric-right2 h3.color-yellow {
    color: #F79009;
}

.business-metric-right2 span {
    font-weight: 400;
    font-size: 13px;
    color: #000000;
    display: block;
    margin: 25px 10px 25px 0;
}

.business-trends-legends {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin-top: 20px;
}

.business-trends-legends div {
    margin-right: 10px;
}

.business-welcome {
    display: flex;
}

.business-welcome h1 {
    font-weight: 400;
    font-size: 18px;
    color: #38465E;
    margin-bottom: 0;
}

.business-welcome h1 b {
    font-weight: 500;
}

.business-welcome h2 {
    font-weight: 400;
    font-size: 18px;
    color: #38465E;
    margin-bottom: 0;
}

.business-welcome .audience-selector {
    margin-left: auto;
    display: flex;
}

.business-welcome select {
    width: auto;
    font-weight: 300;
    color: #38465E;
    font-size: 13px;
    outline: 0;
}


.business-metric-right h3 i {
    font-size: 24px;
    margin-top: 12px;
}

.business-metric-left h3.color-red {
    color: #CC3366;
}

.business-metric-left h3.color-yellow {
    color: #F79009;
}

.business-metric-left h3.color-green {
    color: #00806F;
}

.section-title {
    font-weight: 400!important;
    font-size: 16px!important;
    line-height: 24px!important;
    letter-spacing: 0!important;
    color: #000000!important;
}


.metric-card{
    margin-left: 32px;
}

.audience-subtitle{
    padding: 0 40px;
    text-align: center;
}

.audience-subtitle h2{
    font-size: 24px;
    margin-bottom: 0px!important;
}

.audience-subtitle span{
    font-size: 14px;
}


.tab-content table {
    width: 100%;
}

.tab-content table thead {
    height: 40px;
    background-color: var(--primary-color);
    font-family: Heebo;
    font-weight: 500;
    font-size: 13px;
    color: #ffffff;
}

.tab-content table thead th {
    padding-left: 0px;
}

.tab-content table tbody td {
    padding: 10px;
    font-family: Heebo;
    font-weight: 300;
    font-size: 13px;
    color: #38465E;
}


.score-campaign {
    display: flex;
}

.score-campaign .score-campaign-number {
    font-family: 'Heebo';
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    text-align: center;
}

.score-campaign-buttons {
    text-align: center;
    stroke: #00439D;
    padding-left: 25px;
    width:195px;
}

.score-campaign-buttons a {
    margin-right: -80px;
}

.score-campaign-buttons a img {
    fill: var(--primary-color);
}


.audiences-metric-left {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width:25%;
}

.audiences-metric-left h3 {
    font-weight: 300;
    font-size: 36px;
    text-align: center;
    color: var(--primary-color);
}

.audiences-metric-left span {
    font-weight: 400;
    font-size: 13px;
    color: #000000;
    display: block;
}

.entry-list {
    margin-top: 3px !important;
}

.entry-list .logo-arrow{
    height: 12px;
    stroke: var(--primary-color);
}

.entry-list .logo-arrow:hover{
    height: 12px;
    stroke: #38465E;
}
.entry-list .entry-image{
    width: 100%;
    height: 100%;
}
.entry-list .size-cards {
    height: 332px;
}
.entry-list .size-cards.opacity-50:hover {
    transform: translateY(0);
    box-shadow: 0 2px 4px 0 rgba(188, 194, 205, 0.20);
    -webkit-box-shadow: 0 2px 4px 0 rgba(188, 194, 205, 0.20);
}

.grid-auto-fill-min30 {
    grid-template-columns: repeat(5, 1fr);
}
.entry-list .tags {
    min-height: 20px;
    margin-top: 12px;
}
.entry-list .tags p {
    font-style: normal;
    font-weight: 300;
    font-size: 11px;
    line-height: 20px;
    color: #38465E;
    margin-bottom: 0;
}
.separator-title{
    font-family: 'Heebo', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
}

.card-title-link {
    min-height: 96px;
}
.card-title-link a h2{
    font-family: 'Heebo', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.card-title-link a h2:hover{
    color: var(--primary-color);;
}

.blog-card-link{
    font-family: 'Heebo', serif;
    font-style: normal;
    font-weight: 500!important;
    font-size: 13px;
    line-height: 18px;
    color: var(--primary-color);!important;
}
.blog-card-link:hover{
    color:#38465E!important;

}

.blog-img-holder {
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
}
.blog-img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 180px;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.select-client-form {
    width: 60%!important;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 600px) {
    .select-client-form {
        width: 95%!important;
        margin-left: auto;
        margin-right: auto;
    }
}

.logo-ribbon {
    position: fixed;
    background: #ff0000;
    box-shadow: 0 0 0 999px #ff0000;
    clip-path: inset(0 -100%);
    inset: 0 auto auto 0;
    transform-origin: 100% 0;
    transform: translate(-29.3%) rotate(-45deg);
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    z-index: 1000;
}

.engagement-general-chart {
    background-color: #ffffff;
    padding: 24px;
    margin: 27px 0 70px 0;
}

.engagement-general-legends {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: -30px;
    padding-bottom: 20px;
}

.engagement-general-legends div {
    margin-right: 10px;
}

.light-blue-box{
    background-color: rgba(215, 229, 253, 0.3);
    border: 1px solid rgba(98, 154, 248, 0.3);
    border-radius: 3px;

}

.text-box-circular-graph{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    cursor: default;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
}
.select2-style{
    background-color: white;
    border: 1px solid var(--grey-neutral-lighter);
}

.title-name-app {
    font-size: 18px;
    font-weight: 500;
}