.main-layout {
                display: flex;
                flex-direction: column;
                min-height: 100vh;
                overflow: auto;
            }

            .container {
                max-width: 1440px;
                padding: 0 10px;
                margin: 0 auto;
                width: 100%;
            }

            .container-main {
                background-color: white;
                margin: 1rem 0.25rem 20px;
                padding: 1.333rem 0.5556rem 1.5rem;
                border-radius: 5px;
                flex: 1;
            }

            .container-home {
                background-color: white;
                padding: 2rem 0.5556rem 1rem;
                border-radius: 5px;
                flex: 1;
                margin: -1rem 0.25rem 20px;
            }

            .container-article {
                padding: 1.333rem 0.5rem;
            }

            .container-search {
                margin: -1rem 0.25rem 20px;
                background-color: white;
                padding: 0 0 1.5rem;
                border-radius: 5px;
                flex: 1;
            }

            .container-footer {
                border-radius: 5px;
                margin: 0 0.25rem 20px;
            }

            @media only screen and (min-width: 768px) {
                .container-article {
                    width: 75%;
                    margin: auto;
                    padding: 0 0 2rem;
                }

                .container-home {
                    max-width: 1022px;
                    margin: -2.5rem auto 40px;
                    padding: 2.5rem 2rem 1.5rem;
                    width: 100%;
                }

                .container-main {
                    margin: 2.5rem auto 40px;
                    padding: 2.5rem 2rem 1.5rem;
                    width: 100%;
                    max-width: 1022px;
                }

                .container-search {
                    max-width: 1022px;
                    width: 100%;
                    margin: -2.5rem auto 40px;
                }

                .container-footer {
                    max-width: 1022px;
                    margin: 0 auto 40px;
                    width: 100%;
                }
            }

            /* 
  ==============================
  4.0 Buttons
  ==============================
*/
            .btn {
                border: 1px solid transparent;
                padding: 0.675rem 0.875rem;
                color: white;
                border-radius: 3px;
                text-transform: uppercase;
                font-family: "Sweetlife-Medium";
                line-height: 1.2;
                font-weight: 400;
                font-size: 12px;
                letter-spacing: 2px;
                text-transform: uppercase;
                transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
            }

            .btn:hover {
                cursor: pointer;
            }

            .btn-primary {
                background-color: #1F4F46;
            }

            .btn-primary:hover {
                background-color: #27625B;
                color: w;
                border-color: #1F4F46;
            }

            .btn-secondary {
                background-color: rgba(255, 255, 255, 0);
                ; color: #1F4F46;
                border: 1px solid #1F4F46;
                border-radius: 3px;
            }

            .btn-icon {
                background-color: transparent;
                color: #9c9FA8;
                padding: 0.2rem;
            }

            .btn-icon .mdi {
                transition: color 0.2s ease-in-out;
            }

            .btn-icon.btn-md {
                padding: 0.25rem;
                font-size: 1.25rem;
            }

            .btn-icon:hover {
                background-color: #1F4F46;
            }

            .btn-icon:hover .mdi:before {
                color: white;
            }

            .btn-sml {
                font-size: 12px;
                letter-spacing: 2px;
            }

            a.btn {
                color: white;
            }

            .btn-arrow-right {
                width: 32px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                font-size: 1.25rem;
            }

            /* 
  ==============================
  5.0 Forms
  ==============================
*/
            ::-webkit-input-placeholder {
                color: #939FA8;
            }

            ::-moz-placeholder {
                color: #939FA8;
            }

            :-ms-input-placeholder {
                color: #939FA8;
            }

            .form-control {
                border: 1px solid #EFF3F6;
                border-radius: 3px;
                outline: 0;
                height: 50px;
                line-height: 50px;
                font-size: 1rem;
                font-family: 'Gotham';
                color: #939FA8;
            }

            .form-group {
                display: flex;
                margin-top: 1rem;
            }

            .form-control-field {
                display: flex;
                flex-direction: column;
            }

            .label {
                text-transform: uppercase;
                color: #939FA8;
                font-size: 0.875rem;
            }

            .form-group-pair .form-control-field:first-child {
                margin-right: 0.5rem;
            }

            .form-group-pair .form-control-field:last-child {
                margin-left: 0.5rem;
            }

            /* 
  ==============================
  6.0 Pages
  ==============================
*/
            /* 
  ==============================
  6.1 Homepage
  ==============================
*/
            .home-search-wrap {
                margin-bottom: 3rem;
            }

            .container-home .back-to-top {
                color: #1F4F46;
            }

            @media only screen and (max-width: 767px) {
                .home-search-wrap h2 {
                    text-align: center;
                    margin-bottom: 1rem;
                }
            }

            /* 
  ==============================
  6.2 Article page
  ==============================
*/
            .article-search-header {
                text-transform: uppercase;
                color: #939FA8;
                font-size: 0.75rem;
                margin-bottom: 0.5rem;
            }

            .article-header {
                display: flex;
                align-items: center;
                padding-bottom: 1rem;
                border-bottom: 1px solid #E9EFF4;
            }

            .article-body h1 {
                margin: 2rem 0 0.5rem;
            }

            .article-body h2 {
                margin-top: 2rem;
            }

            .article-body p {
                line-height: 1.618rem;
                font-family: 'Gotham';
            }

            .article-body p span {
                line-height: 1.618rem;
                font-family: "Gotham" !important;
                font-weight: 300;
            }

            .article-body .article-updated {
                margin-bottom: 1rem;
            }

            .article-body img {
                display: block;
                margin: auto;
                max-width: 100%;
                height: auto;
                margin-bottom: 2rem;
            }

            .article-body ul {
                margin-bottom: 2rem;
            }

            .article-body ul li {
                line-height: 1.618rem;
            }

            .article-body a {
                color: #1F4F46;
            }

            .article-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 1rem;
            }

            .tag-wrap {
                display: flex;
                flex-wrap: wrap;
            }

            .tag {
                display: flex;
                align-items: center;
                padding: 0.25rem 0.5rem;
                background-color: #E9EFF4;
                margin-right: 0.25rem;
                font-size: 0.75rem;
                color: #939FA8;
                border-radius: 3px;
                text-transform: uppercase;
            }

            .tag:hover {
                cursor: pointer;
            }

            .share-wrap {
                display: flex;
                align-items: center;
            }

            .feedback-wrap {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 2rem 0;
                border-top: 1px solid #E9EFF4;
                border-bottom: 1px solid #E9EFF4;
                margin-bottom: 3rem;
            }

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

            @media only screen and (max-width: 767px) {
                .article-search-header {
                    margin-bottom: 1rem;
                }

                .search-wrap:not(.home-search-wrap):not(.search-results-header) {
                    padding: 0 1rem;
                }

                .article-footer {
                    flex-direction: column;
                }

                .article-body .article-updated {
                    font-size: 0.825rem;
                }

                .article-footer .tag-wrap {
                    margin-bottom: 1.5rem;
                    width: 80%;
                    justify-content: center;
                }

                .article-footer .tag {
                    margin-top: 0.25rem;
                }

                .article-footer .share-wrap {
                    flex-wrap: wrap;
                    justify-content: space-around;
                }

                .article-footer .share-wrap .label {
                    width: 100%;
                    text-align: center;
                    margin-bottom: 0.5rem;
                }

                .article-footer .share-wrap .btn-icon {
                    font-size: 1.75rem;
                }
            }

            /* Quill indent support... */
            .article-body ol, .article-body ul {
                padding-left: 1.5em;
            }

            .article-body ol > li, .article-body ul > li {
                list-style-type: none;
            }

            .article-body ul > li::before {
                content: '\25CF';
            }

            .article-body li::before {
                display: inline-block;
                margin-right: 0.3em;
                text-align: right;
                white-space: nowrap;
                width: 1.2em;
            }

            .article-body li:not(.ql-direction-rtl)::before {
                margin-left: -1.5em;
            }

            .article-body ol li, .article-body ul li {
                padding-left: 1.5em;
            }

            .article-body ol li {
                counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
                counter-increment: list-num;
            }

            .article-body ol li:before {
                content: counter(list-num, decimal) '. ';
            }

            .article-body ol li.ql-indent-1 {
                counter-increment: list-1;
            }

            .article-body ol li.ql-indent-1:before {
                content: counter(list-1, lower-alpha) '. ';
            }

            .article-body ol li.ql-indent-1 {
                counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
            }

            .article-body ol li.ql-indent-2 {
                counter-increment: list-2;
            }

            .article-body ol li.ql-indent-2:before {
                content: counter(list-2, lower-roman) '. ';
            }

            .article-body ol li.ql-indent-2 {
                counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
            }

            .article-body ol li.ql-indent-3 {
                counter-increment: list-3;
            }

            .article-body ol li.ql-indent-3:before {
                content: counter(list-3, decimal) '. ';
            }

            .article-body ol li.ql-indent-3 {
                counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
            }

            .article-body ol li.ql-indent-4 {
                counter-increment: list-4;
            }

            .article-body ol li.ql-indent-4:before {
                content: counter(list-4, lower-alpha) '. ';
            }

            .article-body ol li.ql-indent-4 {
                counter-reset: list-5 list-6 list-7 list-8 list-9;
            }

            .article-body ol li.ql-indent-5 {
                counter-increment: list-5;
            }

            .article-body ol li.ql-indent-5:before {
                content: counter(list-5, lower-roman) '. ';
            }

            .article-body ol li.ql-indent-5 {
                counter-reset: list-6 list-7 list-8 list-9;
            }

            .article-body ol li.ql-indent-6 {
                counter-increment: list-6;
            }

            .article-body ol li.ql-indent-6:before {
                content: counter(list-6, decimal) '. ';
            }

            .article-body ol li.ql-indent-6 {
                counter-reset: list-7 list-8 list-9;
            }

            .article-body ol li.ql-indent-7 {
                counter-increment: list-7;
            }

            .article-body ol li.ql-indent-7:before {
                content: counter(list-7, lower-alpha) '. ';
            }

            .article-body ol li.ql-indent-7 {
                counter-reset: list-8 list-9;
            }

            .article-body ol li.ql-indent-8 {
                counter-increment: list-8;
            }

            .article-body ol li.ql-indent-8:before {
                content: counter(list-8, lower-roman) '. ';
            }

            .article-body ol li.ql-indent-8 {
                counter-reset: list-9;
            }

            .article-body ol li.ql-indent-9 {
                counter-increment: list-9;
            }

            .article-body ol li.ql-indent-9:before {
                content: counter(list-9, decimal) '. ';
            }

            .article-body .ql-indent-1:not(.ql-direction-rtl) {
                padding-left: 3em;
            }

            .article-body li.ql-indent-1:not(.ql-direction-rtl) {
                padding-left: 4.5em;
            }

            .article-body .ql-indent-1.ql-direction-rtl.ql-align-right {
                padding-right: 3em;
            }

            .article-body li.ql-indent-1.ql-direction-rtl.ql-align-right {
                padding-right: 4.5em;
            }

            .article-body .ql-indent-2:not(.ql-direction-rtl) {
                padding-left: 6em;
            }

            .article-body li.ql-indent-2:not(.ql-direction-rtl) {
                padding-left: 7.5em;
            }

            .article-body .ql-indent-2.ql-direction-rtl.ql-align-right {
                padding-right: 6em;
            }

            .article-body li.ql-indent-2.ql-direction-rtl.ql-align-right {
                padding-right: 7.5em;
            }

            .article-body .ql-indent-3:not(.ql-direction-rtl) {
                padding-left: 9em;
            }

            .article-body li.ql-indent-3:not(.ql-direction-rtl) {
                padding-left: 10.5em;
            }

            .article-body .ql-indent-3.ql-direction-rtl.ql-align-right {
                padding-right: 9em;
            }

            .article-body li.ql-indent-3.ql-direction-rtl.ql-align-right {
                padding-right: 10.5em;
            }

            .article-body .ql-indent-4:not(.ql-direction-rtl) {
                padding-left: 12em;
            }

            .article-body li.ql-indent-4:not(.ql-direction-rtl) {
                padding-left: 13.5em;
            }

            .article-body .ql-indent-4.ql-direction-rtl.ql-align-right {
                padding-right: 12em;
            }

            .article-body li.ql-indent-4.ql-direction-rtl.ql-align-right {
                padding-right: 13.5em;
            }

            .article-body .ql-indent-5:not(.ql-direction-rtl) {
                padding-left: 15em;
            }

            .article-body li.ql-indent-5:not(.ql-direction-rtl) {
                padding-left: 16.5em;
            }

            .article-body .ql-indent-5.ql-direction-rtl.ql-align-right {
                padding-right: 15em;
            }

            .article-body li.ql-indent-5.ql-direction-rtl.ql-align-right {
                padding-right: 16.5em;
            }

            .article-body .ql-indent-6:not(.ql-direction-rtl) {
                padding-left: 18em;
            }

            .article-body li.ql-indent-6:not(.ql-direction-rtl) {
                padding-left: 19.5em;
            }

            .article-body .ql-indent-6.ql-direction-rtl.ql-align-right {
                padding-right: 18em;
            }

            .article-body li.ql-indent-6.ql-direction-rtl.ql-align-right {
                padding-right: 19.5em;
            }

            .article-body .ql-indent-7:not(.ql-direction-rtl) {
                padding-left: 21em;
            }

            .article-body li.ql-indent-7:not(.ql-direction-rtl) {
                padding-left: 22.5em;
            }

            .article-body .ql-indent-7.ql-direction-rtl.ql-align-right {
                padding-right: 21em;
            }

            .article-body li.ql-indent-7.ql-direction-rtl.ql-align-right {
                padding-right: 22.5em;
            }

            .article-body .ql-indent-8:not(.ql-direction-rtl) {
                padding-left: 24em;
            }

            .article-body li.ql-indent-8:not(.ql-direction-rtl) {
                padding-left: 25.5em;
            }

            .article-body .ql-indent-8.ql-direction-rtl.ql-align-right {
                padding-right: 24em;
            }

            .article-body li.ql-indent-8.ql-direction-rtl.ql-align-right {
                padding-right: 25.5em;
            }

            .article-body .ql-indent-9:not(.ql-direction-rtl) {
                padding-left: 27em;
            }

            .article-body li.ql-indent-9:not(.ql-direction-rtl) {
                padding-left: 28.5em;
            }

            .article-body .ql-indent-9.ql-direction-rtl.ql-align-right {
                padding-right: 27em;
            }

            .article-body li.ql-indent-9.ql-direction-rtl.ql-align-right {
                padding-right: 28.5em;
            }

            /* 
  ==============================
	6.3 Search page
  ==============================
*/
            #searchInput {
                font-family: inherit;
                font-weight: 400;
                color: #6d6d6d;
            }

            .search-results-header {
                background-color: #1F4F46;
                padding: 1.5rem;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }

            .search-results-left {
                color: #939FA8;
                font-size: 1.5rem;
                margin-bottom: 1.5rem;
            }

            .search-results-number {
                color: white;
                font-weight: bold;
                display: block;
            }

            @media only screen and (max-width: 767px) {
                .search-results-header.search-sml-wrap {
                    margin-bottom: 0;
                }
            }

            @media only screen and (min-width: 768px) {
                .search-results-header {
                    padding: 2.5rem 2rem;
                }

                .search-results-number {
                    display: inline;
                }

                .search-results-left {
                    margin-bottom: 0;
                }
            }

            /* 
  ==============================
  6.4 Category Page
  ==============================
*/
            .link-return {
                color: #1F4F46;
            }

            @media only screen and (max-width: 767px) {
                .category-right .article-item-footer .updated-at {
                    margin-bottom: 0;
                }
            }

            @media only screen and (min-width: 768px) {
                .category-col-wrap {
                    display: flex;
                }

                .category-left {
                    flex: 0 1 220px;
                }

                .category-right {
                    flex: 1 1 auto;
                    margin-left: 124px;
                }
            }

            .category-header {
                color: #3b4245;
                font-weight: 500;
            }

            /* 
  ==============================
  6.5 404 Page
  ==============================
*/
            .fourOhFour-wrap {
                padding: 1rem 0 1.5rem;
                text-align: center;
            }

            .fourOhFour-header {
                font-size: 0.6667rem;
                color: #939FA8;
                font-weight: bold;
                line-height: 16px;
                text-align: center;
                text-transform: uppercase;
                padding-bottom: 0.6667rem;
                width: 140px;
                margin: 0 auto 1.333rem;
                border-bottom: 3px solid #E9EFF4;
            }

            .fourOhFour-subheader {
                font-size: 1.4rem;
                margin-bottom: 1.333rem;
            }

            .fourOhFour-body {
                color: #939FA8;
            }

            .fourOhFour-body a {
                color: #1F4F46;
            }

            .fourOhFour-search {
                margin: 2.611rem auto;
                max-width: 462px;
            }

            @media only screen and (max-width: 767px) {
                .fourOhFour-search.form-control-search-wrap {
                    margin-top: 2.611rem;
                }
            }

            @media only screen and (min-width: 768px) {
                .fourOhFour-subheader {
                    font-size: 2rem;
                }

                .fourOhFour-search.form-control-search-wrap .icon-search {
                    left: 3.25rem;
                }
            }

            @media only screen and (min-width: 1025px) {
                .fourOhFour-wrap {
                    padding: 3.444rem 9.444rem 5.556rem;
                }
            }

            /* 
  ==============================
  6.6 Contact Page
  ==============================
*/
            .form-flex-1 {
                flex: 1 1 50%;
            }

            .contact-header {
                font-size: 2rem;
                margin-bottom: 0.5rem;
            }

            .contact-subtext {
                font-size: 1rem;
                color: #939FA8;
            }

            .contact-email {
                color: #1F4F46;
            }

            .contact-divider {
                height: 3px;
                width: 140px;
                background-color: #E9EFF4;
                margin-top: 1.778rem;
            }

            .contact-form-wrap {
                padding-top: 0.778rem;
            }

            .contact-form-wrap .label {
                margin-bottom: 0.375rem;
            }

            .contact-form-wrap .form-control-field {
                flex: 1 1 auto;
            }

            .contact-form-wrap .form-control-textarea {
                max-width: 713px;
                min-height: 150px;
            }

            .contact-form-wrap .btn-submit {
                margin-top: 1.778rem;
            }

            /* 
  ==============================
  7.0 Components
  ==============================
*/
            /* 
  ==============================
  7.1 Nav
  ==============================
*/
            .nav {
                padding: 1rem 0.5rem;
                background-color: white;
            }

            .nav .container {
                display: flex;
                justify-content: space-between;
            }

            .nav-left {
                display: flex;
                align-items: center;
            }

            .header-logo {
                max-width: 150px;
            }

            .nav-right {
                display: flex;
                align-items: center;
            }

            .nav-list {
                font-weight: 500;
                list-style: none;
                margin: 0;
                padding-left: 0;
                display: flex;
            }

            .nav-list-item {
                color: #1f4f46;
                font-size: 0.75rem;
                padding: 0 0.5rem;
                text-transform: uppercase;
            }

            .nav-list-item:last-child {
                margin-right: 0;
                border-right: 0;
            }

            @media only screen and (min-width: 768px) {
                .nav {
                    padding: 1rem 3.875rem;
                }

                .nav-list-item {
                    border-right: 1px solid #E9EFF4;
                }
            }

            /* 
  ==============================
  7.2 Hero Image
  ==============================
*/
            .heroImg-wrap {
                height: 22.375rem;
                /* Replace below url to replace hero image */
                background-image: url('https://web.archive.org/web/20231206014959im_/https://s3-us-west-1.amazonaws.com/sweetgreen-wordpress/wp-content/uploads/2016/05/23175030/FAQsHeadDesktop.jpg');
                background-color: #F8F8F6;
                background-position: center center;
                background-size: cover;
            }

            .heroImg-wrap.heroImg-wrap-sml {
                height: 14rem;
            }

            @media only screen and (max-width: 767px) {
                .heroImg-wrap {
                    height: 14rem;
                }

                .heroImg-wrap.heroImg-wrap-sml {
                    height: 10rem;
                }
            }

          
            .category-wrap {
                margin-bottom: 3rem;
            }

            .category-header-wrap {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 0.5rem;
                margin-bottom: 0.5rem;
                border-bottom: 2px solid #E9EFF4;
            }

            .category-header .icon-primary {
                padding: 1rem;
            }

            .category-body {
                display: flex;
                flex-wrap: wrap;
            }

            .category-item {
                margin-bottom: 0.5rem;
                border-bottom: 1px solid #E9EFF4;
                flex: 1 1 100%;
            }

            .category-item-inner {
                display: flex;
                padding: 1rem;
                margin-bottom: 0.5rem;
                border-radius: 3px;
                transition: background-color 0.2s ease-in-out;
            }

            .category-item .mdi:before {
                transition: color 0.2s ease-in-out;
            }

            .category-item:nth-child(even) {
                margin-left: 0.5rem;
            }

            .category-item:nth-child(odd) {
                margin-right: 0.5rem;
            }

            .category-item:hover .category-item-inner {
                cursor: pointer;
                background-color: #E9EFF4;
            }

            .category-item:hover .btn-icon {
                background-color: #1F4F46;
            }

            .category-item:hover .mdi:before {
                color: white;
            }

            .category-item:hover .cat-article-title {
                color: #1F4F46;
            }

            .cat-item-left {
                flex: 4 1 auto;
                display: flex;
                flex-direction: column;
            }

            .cat-article-title {
                color: #3b4245;
                font-weight: 500;
                margin-bottom: 0.75rem;
                transition: color 0.2s ease-in-out;
            }

            .article-updated {
                font-size: 0.75rem;
                text-transform: uppercase;
                color: #6d6d6d;
                font-weight: 400;
            }

            .cat-item-right {
                flex: 1 1 auto;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }

            @media only screen and (min-width: 768px) {
                .category-item {
                    flex: 1 1 48%;
                    max-width: 49%;
                    /* prevent odd # of children expanding to 100% */
                }
            }

            /* 
  ==============================
  7.5 Search Header
  ==============================
*/
            .search-wrap {
                margin-bottom: 2rem;
            }

            .form-control-search {
                padding-left: 3rem;
                width: 100%;
                transition: border-color 0.2s ease-in-out;
                color: #1B394E;
                font-size: 0.7778rem;
            }

            .form-control-search:focus {
                border-color: #1F4F46;
            }

            .form-control-search-wrap {
                position: relative;
            }

            .form-control-search-wrap .icon-search {
                position: absolute;
                left: 1rem;
                top: 14px;
                font-size: 1.125rem;
                color: #8B97A1;
            }

            .home-search-wrap .form-control-search {
                font-size: 1rem;
            }

            /* First child, passed in as a prop */
            .search-wrap > div:first-child {
                flex: 1 1 50%;
            }

            .search-wrap-right {
            }

            .search-sml-wrap .icon-search {
                left: 0.75rem;
                top: 9px;
            }

            .search-sml-wrap .form-control-search {
                height: 42px;
                line-height: 42px;
                padding-left: 2.5rem;
            }

            @media only screen and (max-width: 767px) {
                .home-search-wrap p {
                    margin-bottom: 1.5rem;
                    width: 70%;
                }

                .form-control-search-wrap {
                    margin-top: 1rem;
                }
            }

            @media only screen and (min-width: 768px) {
                .search-wrap {
                    display: flex;
                    align-items: center;
                    margin-bottom: 3.722rem;
                }

                .form-control-search {
                    width: 382px;
                }

                .search-sml-wrap .form-control-search {
                    width: 302px;
                }

                .search-wrap-right {
                    flex: 1 1 50%;
                    display: flex;
                    justify-content: flex-end;
                }
            }

            /* 
  ==============================
  7.6 Article Breadcrumbs
  ==============================
*/
            .breadcrumbs-wrap {
                display: flex;
                align-items: center;
                line-height: 1;
            }

            .breadcrumb {
                text-transform: uppercase;
                color: #1B394E;
                font-size: 0.75rem;
                letter-spacing: -0.1px;
                font-weight: bold;
            }

            /* 
  ==============================
  7.7 Article Item
  ==============================
*/
            .article-item {
                border-bottom: 1px solid #E9EFF4;
                padding-bottom: 1rem;
                margin-bottom: 1.5rem;
            }

            .article-item-header-wrap {
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
                transition: color 0.2s ease-in-out;
            }

            .article-item-header-wrap {
                font-size: 1rem;
            }

            .article-item-header-wrap:hover .article-item-header {
                color: #1F4F46;
            }

            .article-item-header-wrap:hover .btn-icon {
                background-color: #1F4F46;
            }

            .article-item-header-wrap:hover .mdi:before {
                color: white;
            }

            .article-item-header-wrap .btn-icon {
                font-size: 1.25rem;
            }

            .article-item-header {
                font-size: 1rem;
                font-weight: normal;
            }

            .article-item-body {
                padding: 0.5rem 0 1rem;
                max-width: 520px;
                color: #939FA8;
                font-size: 0.8889rem;
            }

            .article-item-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .article-item-updated {
                font-size: 0.75rem;
                text-transform: uppercase;
                color: #939FA8;
            }

            .breadcrumb-category-wrap {
                display: flex;
                flex-wrap: wrap;
            }

            .breadcrumb-category {
                display: flex;
                align-items: center;
                padding: 0 0.35rem;
                border-right: 1px solid #DEE4E8;
                font-size: 0.75rem;
                text-transform: uppercase;
                font-weight: bold;
                transition: color 0.2s ease-in-out;
            }

            .breadcrumb-category:hover {
                color: #1F4F46;
                cursor: pointer;
            }

            .breadcrumb-category-wrap .breadcrumb-category:first-child {
                padding-left: 0;
            }

            .breadcrumb-category-wrap .breadcrumb-category:last-child {
                border-right: 0;
            }

            @media only screen and (max-width: 768px) {
                .article-item {
                    padding: 0 1rem 1rem;
                }

                .article-item-footer {
                    flex-direction: column;
                    align-items: flex-start;
                }

                .article-item-footer .breadcrumb-category-wrap {
                    order: 2;
                    /* flex-direction: column; */
                }

                .article-item-footer .breadcrumb-category {
                    display: inline-block;
                }

                .article-item-footer .updated-at {
                    order: 1;
                    margin-bottom: 1rem;
                }
            }

            /* 
  ==============================
  7.8 Article Pagination
  ==============================
*/
            .pagination-wrap {
                display: flex;
                align-items: center;
                width: 14.29rem;
                /* 200px equivalent */
                justify-content: space-between;
                margin: auto;
            }

            .pagination-item {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 2.143rem;
                height: 2.143rem;
                color: #939FA8;
                border-radius: 3px;
                transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
            }

            .pagination-item:hover {
                cursor: pointer;
                color: white;
                background-color: #1F4F46;
            }

            /* 
  ==============================
  7.9 Category Nav
  ==============================
*/
            .category-list-header-wrap {
                display: flex;
                align-items: center;
                border-bottom: 3px solid #E9EFF4;
                margin-bottom: 1rem;
                padding: 0 1rem;
            }

            .category-list-header {
                font-size: 0.75rem;
                padding: 0 0 0.5rem;
            }

            .category-list-item {
                margin-top: 0.25rem;
                font-size: 0.7778rem;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
                position: relative;
                border-radius: 4px;
                line-height: 1;
                color: #5B6770;
            }

            .category-list-item:hover {
                cursor: pointer;
                background-color: white;
            }

            .category-list-item a {
                display: flex;
                align-items: center;
                padding: 0.5rem 0.7rem;
            }

            .category-list-item .btn-icon {
                flex: 0;
            }

            .category-list-item .mdi-chevron-right {
                font-size: 1rem;
                color: #939FA8;
                opacity: 0;
                position: relative;
                top: 2px;
                transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
            }

            .category-list-item:hover .mdi {
                opacity: 1;
            }

            .category-list-item a {
                color: inherit;
                flex: 1 1 auto;
            }

            .category-list-item:hover a {
                color: #1F4F46;
            }

            .category-list-item .mdi-chevron-right:hover {
                color: #1F4F46;
            }

            .category-nav-menu {
                position: absolute;
                background-color: #fff;
                padding: 0.5rem;
                border: 1px solid #E9EFF4;
                border-radius: 4px;
                min-width: 210px;
                max-width: 238px;
            }

            .category-nav-menu .category-list-item {
                color: #939FA8;
            }

            .cat-nav-outer {
                display: flex;
                border-bottom: 1px solid #E9EFF4;
                padding-bottom: 0.25rem;
            }

            .category-nav-header {
                padding: 0.375rem 0.25rem;
                width: 100%;
                border-radius: 4px;
                margin-top: 0;
            }

            .category-nav-header:hover {
                background-color: #E9EFF4;
            }

            .btn-cat-nav {
                width: 32px;
                height: 32px;
                font-size: 1rem;
                outline: 0;
            }

            .cat-icon {
                color: #7FCD69;
            }

            .home-icon {
                color: #939FA8;
                font-size: 1rem;
            }

            .category-back {
                color: #939FA8;
                height: 32px;
                padding-left: 0;
            }

            .category-back:hover {
                color: #1F4F46;
            }

            .category-nav-menu .category-back:hover {
                cursor: pointer;
                color: #1F4F46;
            }

            .category-back:hover .mdi {
                color: #1F4F46;
            }

            .category-back-icon {
                font-size: 1rem;
                color: #939FA8;
                margin-top: 1px;
                margin-right: 1px;
                transition: color 0.2s ease-in-out;
            }

            @media only screen and (min-width: 768px) {
                .category-list-header-wrap {
                    padding: 0;
                }
            }

            /*
  ==============================
  7.10 Subcategory Item
  ==============================
*/
            .subcat-item-header-wrap {
                display: flex;
                align-items: center;
                cursor: pointer;
                transition: color 0.2s ease-in-out;
            }

            .subcat-item-header {
                margin-left: 0.5rem;
            }

            .subcat-header-arrow {
                margin-left: auto;
            }

            /* 
  ==============================
  8.0 Utilities
  ==============================
*/
            .separator-wrap {
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 2rem;
                margin: auto;
            }

            .separator {
                width: 4px;
                height: 4px;
                background-color: #939FA8;
                border-radius: 50%;
            }

            .list-unstyled {
                padding-left: 0;
                list-style: none;
            }

            .pull-right {
                float: right;
            }

            .pull-left {
                float: left;
            }

            .bold {
                font-weight: bold;
            }

            .m1rem {
                margin: 1rem;
            }

            .mt5 {
                margin-top: 0.3571rem;
            }

            .mt10 {
                margin-top: 0.7142rem;
            }

            .mr5 {
                margin-right: 0.3571rem;
            }

            .mb5 {
                margin-bottom: 0.3571rem;
            }

            .mb2rem {
                margin-bottom: 2rem;
            }

            .ml5 {
                margin-left: 0.3571rem;
            }

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

            .visible-phone {
                display: none;
            }

            .visible-phone-ib {
                display: none;
            }

            .hide {
                display: none;
            }

            @media only screen and (max-width: 767px) {
                .hidden-phone {
                    display: none;
                }

                .visible-phone {
                    display: block;
                }

                .visible-phone-ib {
                    display: inline-block;
                }
            }

            @media only screen and (max-width: 1024px) {
                .hidden-tablet {
                    display: none;
                }
            }

            /* 
  ==============================
  9.0 Language Select
  ==============================
*/
            .language-select {
                background: #fff;
                border: 0;
                height: 30px;
            }

            .language-select:focus {
                outline: 0;
            }
        </style>
        <style>
            .survey h1 {
                margin-top: 1rem;
                text-align: center;
            }

            .survey-rating-prompt {
                text-align: center;
            }

            .survey-options-wrap {
                max-width: 95%;
                margin: 2rem auto 0;
                background-color: rgb(244, 243, 248);
                border-radius: 5px;
                padding: 1rem;
            }

            .survey-questions-wrap {
                margin: 2rem auto 0;
                max-width: 95%;
            }

            .survey-questions hr {
                margin: 2.5rem auto 0;
                max-width: 90%;
                background-color: #E5E4E7;
                /* Fallback for FireFox */
                border-color: #E5E4E7;
                border-style: solid;
                border-top: 0;
            }

            .survey .btn-primary {
                max-width: 100px;
                margin: 2rem auto 0;
                display: block;
            }

            .survey-question-label {
                margin-bottom: 0.5rem;
                display: block;
            }

            .survey-question {
                width: 100%;
                height: 100px;
            }

            .survey-options {
                display: flex;
                justify-content: space-between;
                margin: 1rem auto 0.5rem;
            }

            .survey-option {
                flex: 0 0 auto;
                margin: 0 1px;
                height: 62px;
                width: 62px;
            }

            .survey-option:hover {
                cursor: pointer;
            }

            .survey-labels {
                flex: 1 1 auto;
                display: flex;
                justify-content: space-between;
                margin: auto;
                color: #9a9a9a;
            }

            .survey-options.survey-options-2 {
                justify-content: center;
            }

            .survey-options-2 .survey-option {
                margin: 0 15px;
            }

            .survey-labels.survey-labels-2 {
                justify-content: center;
            }

            .survey-labels-2 .survey-label {
                margin: 0 15px;
            }

            .survey-success-wrap {
                margin-top: 2rem;
                text-align: center;
            }

            /* Media queries */
            @media only screen and (max-width: 380px) {
                .survey-option {
                    height: 45px;
                    width: 45px;
                }

                .survey-labels {
                    max-width: 100%;
                }
            }

            @media only screen and (min-width: 767px) {
                | .survey-options-wrap {
                    max-width: 80%;
                }

                .survey-options {
                    max-width: 85%;
                }

                .survey-options-3 {
                    max-width: 350px;
                }

                .survey-labels {
                    max-width: 80%;
                }

                .survey-labels-3 {
                    max-width: 350px;
                }

                .survey-labels-3 .survey-label:first-child {
                    margin: 0 auto 0 10px;
                }

                .survey-labels-3 .survey-label:last-child {
                    margin: 0 10px 0 auto;
                }
            }

            @media only screen and (min-width: 1024px) {
                .survey-questions-wrap {
                    max-width: 66.67%;
                }

                .survey-option {
                    height: 94px;
                    width: 94px;
                }
            }

            /* This darkens the border of the inputs and add textarea styles */
            .form-control {
                border-color: #DBDADF;
            }

            .form-control-textarea {
                padding: 10px;
                line-height: 1rem;
            }