/*------------------------------------*\

    WebFX WYSIWYG Customizations - Global styling for all ACF WYSIWYG's

    Add custom WYSIWYG styling to this file if it should be applied to all ACF WYSIWYG's on the site
    Otherwise, put your block-specific styles in individual block stylesheets

\*------------------------------------*/

.wysiwyg {
    /* TODO: Update styling to match prototypes */
        position: relative;
    }

    @media (min-width: 768px) {
        .wysiwyg.section-padding {
            padding: 80px 0;
        }

        .masthead.bg-lighter-blue + .wysiwyg.bg-white,
        .masthead.bg-primary-light-blue + .wysiwyg.bg-white  {
            padding: 80px 0;
        }
    }


    .wysiwyg :where(h1, h2, h3, h4, h5) {
        margin-bottom: 16px;
        margin-top: 16px;
    }

    .wysiwyg.bg-blue :where(h1, h2, h3, h4, h5) {
        color: var(--color-white);
    }
    .wysiwyg.bg-light-blue :where(h1, h2, h3, h4, h5, p, li) {
        color: #0D0F33;
    }

    .wysiwyg.bg-white .wysiwyg__content a:not(.button,.btn,.btn-link) {
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        color: #222;
        text-decoration: underline;
        text-decoration-color: #FE5800; /* Change this to your desired color */
        text-underline-offset: 5px;
        text-decoration-thickness: 1.5px;
    }
    .wysiwyg.bg-white .wysiwyg__content a:not(.button,.btn,.btn-link):hover {
        color: #222;
        text-decoration-color: #524FB8; /* Change this to your desired color */
    }

    .wysiwyg .container {
        max-width: 1140px;
    }

    .wysiwyg .container {
        position: relative;
        z-index: 2;
    }

    .wysiwyg .col-md-6:first-child {
        margin-bottom: 40px;
    }

    .wysiwyg h2 {
        font-size: 33px;
        line-height: 40px;
    }
    @media (min-width: 768px) {
        .wysiwyg h2 {
            font-size: 40px;
            line-height: 52px;
        }
    }
    @media (min-width: 1025px) {
        .wysiwyg .col-md-6,
        .wysiwyg .col-md-6:first-child {
            margin-bottom: 0;
        }
        
        .wysiwyg__sidebar-inner-container {
            width: 339px;
            margin-left: auto;
        }
    }

    .wysiwyg.full-width .container {
        max-width: 1366px;
    }

    .masthead.section-padding + .wysiwyg:not(.bg-blue) {
        padding-top: 0;
    }
    .wysiwyg.full-width .callout .container {
        padding-left: 0px!important;
        padding-right: 0px!important;
    }

    @media( min-width : 1025px ) {
        .wysiwyg.section-padding.bg-blue {
            padding: 80px 0; /* this padding is for bg-blue color ONLY */
        }
    }

    .bg-white {
        background: #ffffff;
    }

    .form-wrapper.home-c {
        width: auto;
        padding: 45px 25px 15px;
        background-color: rgba(247,250,252,.7);
        text-align: center;
    }

    .form-title {
        font-size: 23px;
        line-height: 32px;
        font-weight: 500;
        text-align: center;
        max-width: 70%;
        margin: 0 auto;
    }
    @media (min-width: 768px) {
        .form-title {
            font-size: 28px;
            line-height: 36px;
        }
    }
    .line-separator.center.home-c {
        width: 50%;
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: auto;
        margin-right: auto;
    }

    .line-separator {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 30%;
        height: 3px;
        margin-top: 36px;
        margin-right: auto;
        margin-bottom: 36px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: var(--color-quote);
    }

    .form-block {
        width: auto;
        padding-right: 20px;
        padding-left: 20px;
        -webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
        background-color: transparent;
        -o-object-fit: fill;
        object-fit: fill;
    }

    .form {
        display: block;
        width: auto;
        padding: 15px 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        background-color: transparent;
        font-family: var(--font-secondary);
        -o-object-fit: contain;
        object-fit: contain;
    }

    .w-input, .w-select {
        display: block;
        width: 100%;
        height: 38px;
        padding: 8px 12px;
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
        vertical-align: middle;
        background-color: #fff;
        border: 1px solid #ccc;
    }

    #Signup-Form-homepage .button {
        padding: 12px 24px;
        background-color: #fe5800;
        -webkit-transition: color .3s,background-color .3s;
        transition: color .3s,background-color .3s;
        font-family: var(--font-secondary);
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        letter-spacing: .05em;
        text-transform: uppercase;
        line-height: 30px;
        transition: color .3s,background-color .3s;
        border: 2px solid var(--color-orange) !important;
    }

    #Signup-Form-homepage .w-button {
        display: inline-block;
        color: #fff;
        border: 0;
        line-height: 30px;
        text-decoration: none;
        cursor: pointer;
        border-radius: 0;

    }

    #Signup-Form-homepage .button:hover,
    #Signup-Form-homepage .button:active,
    #Signup-Form-homepage .button:focus{
        color:var(--color-orange);
        background-color: transparent;
    }

    .w-form-done,
    .w-form-fail {
        display: none;
    }
    /* TODO: Add additional background colors */

    /* Background Type */
    .bg-with-graphic-background {
        background-color: var(--color-lighter-blue);
    }

    .wysiwyg__background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.75;
    }

    .wysiwyg__background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Checklist */

    .checks-with-circle {
        list-style-type: none;
        padding: 0;
        margin: 0 0 20px;
    }

    .checks-with-circle li {
        position: relative;
        padding-left: 34px;
    }

    .checks-with-circle li:not(:last-child) {
        margin-bottom: 15px;
    }

    .checks-with-circle li:before {
        content: "";
        display: block;
        position: absolute;
        top: 1px;
        width: 24px;
        height: 24px;
        background-image: url(https://www.nutshell.com/wp-content/uploads/2022/12/icon-checklist.png);
        border-radius: 50%;
        background-position: center;
        background-size: 100%;
        left: 0;
    }

    .privacy-policy .wysiwyg .container {
        max-width: 1366px;
    }

    .privacy-policy .wysiwyg .col-md-10 {
        width: 100%;
        margin: 0;
    }

    .gray-logo-text + .bg-white {
        padding-top: 0;
        padding-bottom: 0;
    }

    .wysiwyg + .our-values,
    .gallery-masonry-block + .bg-white {
        padding: 0;
    }

    .wysiwyg .wysiwyg__content > *:last-child {
        margin-bottom: 0;
    }

    /* Sidebar */
    .wysiwyg__sidebar .table-of-contents__heading,
    .wysiwyg__content-table-of-content .table-of-contents__heading {
        /* Paragraph/Regular */
        font-style: normal;
        font-weight: 400;
        line-height: 27px; /* 150% */
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        margin-bottom: 0px;
        padding-bottom: 26px;
    }

    .wysiwyg__sidebar .table-of-contents {
        padding-left: 24px;
        padding-right: 24px;
        border: 1px solid var(--Primary-Lighter-Gray, #EBEDEF) !important;
        padding-top: 26px;
        padding-bottom: 0px;
        border-radius: 16px;
    }
    .wysiwyg__sidebar .table-of-contents .table-of-contents__heading::after {
        content: "";
        width: 24px;
        height: 24px;
        display: block;
        background-image: url(https://www.nutshell.com/wp-content/themes/nutshell/assets/img/caret.svg);
        background-size: auto;
        background-repeat: no-repeat;
        transform: rotate(180deg);
    }
    .wysiwyg__sidebar .table-of-contents.active .table-of-contents__heading::after {
        transform: rotate(0deg);
    }
    .wysiwyg__sidebar .acc-nav,
    .wysiwyg__content-table-of-content .acc-nav {
        list-style: none;
        padding-left: 0px;
    }

    .wysiwyg__sidebar .panel-inner .acc-nav li a,
    .wysiwyg__content-table-of-content .panel-inner .acc-nav li a {
        margin-bottom: 0px;
    }

    .wysiwyg__sidebar .panel-inner .acc-nav li li,
    .wysiwyg__content-table-of-content .panel-inner .acc-nav li li {
        margin-bottom: 0px;
    }

    .wysiwyg__sidebar .panel-inner > .acc-nav > li,
    .wysiwyg__content-table-of-content .panel-inner > .acc-nav > li {
        position: relative;
    }

    .wysiwyg__sidebar .panel-inner > .acc-nav > li > a,
    .wysiwyg__content-table-of-content .panel-inner > .acc-nav > li > a {
        font-weight: 600;
    }

    .wysiwyg__sidebar .panel-inner > .acc-nav > li li a,
    .wysiwyg__content-table-of-content .panel-inner > .acc-nav > li li a {
        font-weight: normal!important;
    }

    .wysiwyg__sidebar .panel-inner > .acc-nav > li li a:hover,
    .wysiwyg__sidebar .panel-inner > .acc-nav > li li a.active,
    .wysiwyg__content-table-of-content .panel-inner > .acc-nav > li li a:hover,
    .wysiwyg__content-table-of-content .panel-inner > .acc-nav > li li a.active {
        color: #FE5800;
    }

    .wysiwyg__sidebar .panel-inner .acc-nav > li a,
    .wysiwyg__content-table-of-content .panel-inner .acc-nav > li a {
        color: #1E212B;
        font-size: 14px;
        font-style: normal;
        font-weight: normal!important;
        line-height: 27px; /* 250% */
        font-weight: bold;
    }

    .wysiwyg__sidebar .acc-nav .with-sub-items,
    .wysiwyg__content-table-of-content .acc-nav .with-sub-items {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .wysiwyg__sidebar .acc-nav .with-sub-items span,
    .wysiwyg__content-table-of-content .acc-nav .with-sub-items span {
        flex: 1;
    }

    .wysiwyg__sidebar .acc-nav .with-sub-items::after,
    .wysiwyg__content-table-of-content .acc-nav .with-sub-items::after {
        content: '';
        display: block;
        background-image: url('https://www.nutshell.com/wp-content/themes/nutshell/assets/img/blocks/general/wywsiwyg/caret.svg');
        background-size: auto auto;
        background-repeat: no-repeat;
        width: 13px;
        height: 9px;
    }

    .wysiwyg__sidebar .acc-nav .list-with-sub-items.active .with-sub-items::after,
    .wysiwyg__content-table-of-content .acc-nav .list-with-sub-items.active .with-sub-items::after {
        transform: rotate(180deg);
    }

    .wysiwyg__sidebar .panel-inner .acc-nav .list-with-sub-items .acc-nav,
    .wysiwyg__content-table-of-content .panel-inner .acc-nav .list-with-sub-items .acc-nav {
        display: none;
    }

    .wysiwyg__sidebar .acc-nav .list-with-sub-items.active > .with-sub-items,
    .wysiwyg__sidebar .acc-nav .list-with-sub-items.active > a:not(.with-sub-items),
    .wysiwyg__sidebar .acc-nav .list-with-sub-items:hover > a:not(.with-sub-items),
    .wysiwyg__sidebar .acc-nav .list-with-sub-items:hover > .with-sub-items,
    .wysiwyg__content-table-of-content .acc-nav .list-with-sub-items.active > .with-sub-items,
    .wysiwyg__content-table-of-content .acc-nav .list-with-sub-items.active > a:not(.with-sub-items),
    .wysiwyg__content-table-of-content .acc-nav .list-with-sub-items:hover > a:not(.with-sub-items),
    .wysiwyg__content-table-of-content .acc-nav .list-with-sub-items:hover > .with-sub-items {
        font-weight: 600!important;
    }

    .wysiwyg__sidebar .acc-nav .list-with-sub-items.active::before,
    .wysiwyg__sidebar .acc-nav .list-with-sub-items:hover::before,
    .wysiwyg__content-table-of-content .acc-nav .list-with-sub-items.active::before,
    .wysiwyg__content-table-of-content .acc-nav .list-with-sub-items:hover::before {
        content: '';
        display: block;
        background-image: url(https://www.nutshell.com/wp-content/themes/nutshell/assets/img/blocks/general/wywsiwyg/nutshell-icon.svg);
        background-size: auto auto;
        background-repeat: no-repeat;
        width: 10px;
        height: 15px;
        position: absolute;
        left: -20px;
        top: 6px;
    }

    .wysiwyg__sidebar .acc-nav ul li:last-child,
    .wysiwyg__content-table-of-content .acc-nav ul li:last-child {
        margin-bottom: 0px;
    }


    .sidebar-divider {
        height: 1px;
        background: var(--Color-Palette-Greys-Light-Grey, #D2D3D5);
        margin-top: 32px;
        margin-bottom: 32px;
    }


    @media (min-width: 1201px) {
        .fixed-section {
            position: fixed;
            width: 339px;
            top: 164px;
            /* top: 200px; */
            background-color: white;
        }
        body.admin-bar .fixed-section {
            top: 207px;
        }
        .stucked-section {
            position: absolute;
            width: 339px;
            bottom: 0px;
            margin-top: 20px;
        }
    }

    @media (max-width: 1440px) {

        .fixed-section {
            top: 180px;
        }
    }

    @media screen and (min-width: 1022px) {
        .mobile-only {
            display: none;
        }
    }

    @media screen and (max-width: 1021px) {
        .wysiwyg__sidebar  {
            margin-top: 40px;
        }
        .wysiwyg__sidebar .table-of-contents__heading,
        .wysiwyg__content-table-of-content-container .table-of-contents__heading {
            font-weight: 600;
        }
        .desktop-only {
            display: none;
        }
        .wysiwyg__content-table-of-content-container {
            margin-bottom: 40px;
        }
        .wysiwyg__content-table-of-content-container .table-of-contents__heading {
            padding-top: 16px;
            padding-bottom: 16px;
            border-radius: 8px;
            background: #D9EDF7;
            padding-left: 16px;
            padding-right: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }
        .wysiwyg__content-table-of-content-container .table-of-contents__heading::after {

            content: '';
            display: block;
            background-image: url(https://www.nutshell.com/wp-content/themes/nutshell/assets/img/blocks/general/wywsiwyg/caret.svg);
            background-size: auto auto;
            background-repeat: no-repeat;
            width: 13px;
            height: 9px;
        }
        .wysiwyg__content-table-of-content-container .table-of-contents .panel-body {
            display: none;
        }
        .wysiwyg__content-table-of-content-container .table-of-contents.active .table-of-contents__heading::after {
            transform: rotate(180deg);
        }
        .wysiwyg__content-table-of-content-container .panel-body {
            padding-left: 16px;
            padding-right: 16px;
        }


    }

    .wysiwyg .wysiwyg__content a.btn.btn-link {
        font-size: 16px;
        font-weight: 500;
        position: relative;
        border: none;
        padding: 0;
        background: transparent;
    }
    .wysiwyg .wysiwyg__content a.btn.btn-link:hover {
        box-shadow: none;
    }
    .wysiwyg .wysiwyg__content a.btn.btn-link:before {
        content: '';
        display: block;
        height: 2px;
        width: 65px;
        position: absolute;
        bottom: -8px;
        background: var(--colors-orange, #FE5800);
        transition: .3s;
    }
    .wysiwyg .wysiwyg__content a.btn.btn-link:hover:before {
        width: 100%;
    }