.casf__outer { position: relative; width: 100%; border: 0px solid red; font-family: 'VAGRoundedNext-Light'; font-size: 24px; line-height: 30px; margin-bottom: -62px; } .casf__section__title { position: relative; display: block; width: 100%; text-align: center; font-family: 'VAGRoundedNext-Regular'; font-size: 30px; line-height: 48px; color: #ec1c99; padding-bottom: 32px; } .casf__section__subtitle { position: relative; display: block; width: 100%; text-align: left; font-family: 'VAGRoundedNext-Regular'; font-size: 24px; line-height: 36px; color: #ec1c99; padding: 0px 16px 32px; } .casf__section__intro { position: relative; display: block; width: 100%; text-align: center; font-family: 'VAGRoundedNext-Light'; font-size: 18px; line-height: 24px; padding: 0px 32px 32px; text-align: left; } .casf__not_for_students_text { position: relative; display: block; width: 100%; text-align: center; } .casf_anchor { position: relative; display: block; font-size: 0px; line-height: 0px; width: 0px; height: 0px; top: -160px; } .casf__section__line { position: absolute; left: 16px; top: 0px; height: 100%; width: 6px; background-color: #c6c6c6; } .casf__section__line.in_progress { background-color: #ec1c99; } .casf__section__line__circle { position: absolute; left: -1px; top: 20px; width: 40px; height: 40px; background-color: inherit; padding: 4px; } .casf__section__line__circle svg { fill: #c6c6c6; } .casf__section__line__circle.in_progress svg { fill: #ec1c99; } .casf__section__line__circle .tick { display: none; } .casf__section__open_close { position: absolute; top: 24px; right: 16px; width: 66px; height: 26px; background-color: #ec1c99; padding: 0px 8px; cursor: pointer; z-index: 10; font-size: 12px; line-height: 26px; text-align: center; font-family: 'VAGRoundedNext-SemiBold'; } .casf__section__open_close:before { content: "CLOSE"; color: #FFFFFF; display: inline-block; } .closed .casf__section__open_close:before { content: "OPEN"; color: #FFFFFF; display: inline-block; } /* .casf__section__open_close svg { position: relative; display: block; width: 100%; height: 100%; } .casf__section__open_close svg path { fill: #ec1c99; } .casf__section__open_close:hover svg path { fill: #ef8631; } */ .disabled .casf__section__open_close { display: none; } .disabled .casf__section__intro { display: none; } .disabled .casf__section__title { color: #c6c6c6; padding-bottom: 0px; } .local_authority_info { position: relative; display: block; width: 100%; margin: 16px 0px; background-color: #ec1c99; padding: 24px; border-radius: 10px; color: #FFFFFF; font-size: 18px; line-height: 30px; } .local_authority_info a { color: #01bafd !important; } .local_authority_info a:hover { color: #ef8631 !important; } @media only screen and (max-width: 500px) { .casf__section__title { text-align: left; font-size: 24px; line-height: 48px; padding-left: 16px; padding-bottom: 20px; } .casf__section__subtitle { font-size: 20px; line-height: 36px; } .casf__section__open_close { top: 28px; } .local_authority_info { font-size: 12px; line-height: 21px; padding: 16px; border-radius: 6px; } } @media only screen and (min-width: 500px) and (max-width: 767px) { .casf__section__title { text-align: left; font-size: 24px; line-height: 48px; padding-left: 16px; padding-bottom: 20px; } .casf__section__subtitle { font-size: 20px; line-height: 36px; } .casf__section__open_close { top: 26px; } .local_authority_info { font-size: 12px; line-height: 21px; padding: 16px; border-radius: 6px; } } @media only screen and (min-width: 768px) and (max-width: 1200px) { .casf__section__title { text-align: left; font-size: 24px; line-height: 48px; padding-left: 16px; padding-bottom: 20px; } .casf__section__subtitle { font-size: 20px; line-height: 36px; } .casf__section__open_close { top: 26px; } } @media only screen and (min-width: 768px) and (max-width: 840px) { .local_authority_info { font-size: 12px; line-height: 21px; padding: 16px; border-radius: 6px; } } /* CASF PROGRESS */ .casf__progress__outer { position: relative; width: 100%; background-color: #FFFFFF; padding: 12px 0px 12px; } .casf__progress__inner { position: relative; display: block; margin: 0 auto; width: 100%; max-width: 1280px; text-align: center; padding: 16px 16px 16px 16px; background-color: inherit; } .casf__progress__section { position: relative; display: inline-block; width: 25%; padding: 0px 0px; } .casf__progress__section__inner { position: relative; display: block; width: calc(100% - 22px); margin: 0px 8px 0px 16px; background-color: #c6c6c6; color: rgba(41,41,41,0.5); font-size: 14px; line-height: 32px; font-family: 'VAGRoundedNext-SemiBold'; text-align: center; text-transform: uppercase; } .casf__progress__section__inner:before { position: absolute; top: 0px; right: 100%; content: ""; width: 0px; height: 0px; border-top: 16px solid #c6c6c6; border-bottom: 16px solid #c6c6c6; border-left: 16px solid transparent; } .casf__progress__section__inner:after { position: absolute; top: 0px; left: 100%; content: ""; width: 0px; height: 0px; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 16px solid #c6c6c6; } .casf__progress__section__inner svg { position: absolute; right: 0px; top: 4px; width: 24px; height: 24px; fill: #FFFFFF; display: none; } .casf__progress__section__inner.complete { background-color: #c1d231; color: rgba(41,41,41,0.5); } .casf__progress__section__inner.complete svg { display: block; } .casf__progress__section__inner.complete:before { border-top: 16px solid #c1d231; border-bottom: 16px solid #c1d231; } .casf__progress__section__inner.complete:after { border-left: 16px solid #c1d231; } .casf__progress__section__inner.in_progress { background-color: #ec1c99; color: #FFFFFF; } .casf__progress__section__inner.in_progress:before { border-top: 16px solid #ec1c99; border-bottom: 16px solid #ec1c99; } .casf__progress__section__inner.in_progress:after { border-left: 16px solid #ec1c99; } .casf__progress__section__text { position: relative; display: block; padding: 0px 30px; } .casf__progress__actions__outer { position: absolute; top: 36px; left: 0px; width: 100%; border: 0px solid red; text-align: left; font-size: 0px; line-height: 0px; } .casf__progress__action { position: relative; display: inline-block; margin-right: 2px; width: 16px; height: 16px; cursor: pointer; } .casf__progress__action svg { position: relative; display: block; width: 100%; height: 100%; } .casf__progress__action.complete { fill: #c1d231; } .casf__progress__action.to_do { fill: #c6c6c6; } .casf__progress__action__hover { position: absolute; top: 26px; left: -16px; width: 300px; background-color: #292929; color: #FFFFFF; font-size: 14px; line-height: 18px; padding: 12px; z-index: 11; display: none; font-family: 'VAGRoundedNext-Light'; font-style: italic; } .casf__progress__action__hover:before { content: ""; position: absolute; top: -8px; left: 16px; width: 0px; height: 0px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #292929; } .casf__progress__action:hover .casf__progress__action__hover { display: block; } .casf__progress__action__hover__label { font-family: 'VAGRoundedNext-Regular'; font-style: normal; } @media only screen and (max-width: 500px) { .casf__progress__inner { padding-top: 0px; } .casf__progress__section { width: 75%; } .casf__progress__section--about { margin-right: 25%; } .casf__progress__section--survey { margin-left: calc(25% / 3); margin-right: calc(25% * 0.66); } .casf__progress__section--actions { margin-left: calc(25% * 0.66); margin-right: calc(25% / 3); } .casf__progress__section--actionplan { margin-left: 25%; } .casf__progress__section__inner { line-height: 24px; } .casf__progress__section__inner.complete::before { border-top: 12px solid #c1d231; border-bottom: 12px solid #c1d231; } .casf__progress__section__inner svg { top: 2px; width: 20px; height: 20px; } .casf__progress__section__inner::after { border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid #c1d231; } .casf__progress__section__inner.in_progress::before { border-top: 12px solid #ec1c99; border-bottom: 12px solid #ec1c99; } .casf__progress__actions__outer { top: 26px; } .casf__progress__action__hover { left: -60px; } .casf__progress__action__hover::before { left: 60px; } } @media only screen and (min-width: 500px) and (max-width: 767px) { .casf__progress__inner { padding-top: 0px; } .casf__progress__section { width: 60%; } .casf__progress__section--about { margin-right: 40%; } .casf__progress__section--survey { margin-left: calc(40% / 3); margin-right: calc(40% * 0.66); } .casf__progress__section--actions { margin-left: calc(40% * 0.66); margin-right: calc(40% / 3); } .casf__progress__section--actionplan { margin-left: 40%; } .casf__progress__section__inner { line-height: 24px; } .casf__progress__section__inner.complete::before { border-top: 12px solid #c1d231; border-bottom: 12px solid #c1d231; } .casf__progress__section__inner svg { top: 2px; width: 20px; height: 20px; } .casf__progress__section__inner::after { border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid #c1d231; } .casf__progress__section__inner.in_progress::before { border-top: 12px solid #ec1c99; border-bottom: 12px solid #ec1c99; } .casf__progress__actions__outer { top: 26px; } .casf__progress__action__hover { left: -60px; } .casf__progress__action__hover::before { left: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1200px) { .casf__progress__inner { padding-top: 0px; } .casf__progress__section { width: 50%; } .casf__progress__section--about { margin-right: 50%; } .casf__progress__section--survey { margin-left: calc(50% / 3); margin-right: calc(50% * 0.66); } .casf__progress__section--actions { margin-left: calc(50% * 0.66); margin-right: calc(50% / 3); } .casf__progress__section--actionplan { margin-left: 50%; } .casf__progress__section__inner { line-height: 24px; } .casf__progress__section__inner.complete::before { border-top: 12px solid #c1d231; border-bottom: 12px solid #c1d231; } .casf__progress__section__inner svg { top: 2px; width: 20px; height: 20px; } .casf__progress__section__inner::after { border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid #c1d231; } .casf__progress__section__inner.in_progress::before { border-top: 12px solid #ec1c99; border-bottom: 12px solid #ec1c99; } .casf__progress__actions__outer { top: 26px; } .casf__progress__action__hover { left: -60px; } .casf__progress__action__hover::before { left: 60px; } } /* CASF SIGNUP */ .casf__signup__outer { position: relative; width: 100%; background-color: #f8f7f0; padding: 12px 0px 12px; } .casf__signup__inner { position: relative; display: block; margin: 0 auto; width: 100%; max-width: 1280px; text-align: center; padding: 16px 16px 16px 32px; background-color: inherit; } .casf__signup__outer--signed_up .casf__section__line { background-color: #c5d052; } .casf__signup__outer--signed_up .casf__section__line__circle svg { fill: #c5d052; } .casf__signup__outer--signed_up .casf__section__line__circle .tick { display: block; } .casf__signup__outer .form__field--cols-2 { width: 50%; } .casf__signup__outer .form__field--cols-3 { width: 75%; } .casf__signup__outer .form__field__title { min-height: 30px; } .casf__signup__outer input[type="checkbox"] + label::after { content: " "; line-height: 21px; font-size: 21px; background-size: 20px; width: 20px; height: 21px; background-position: 50% 50%; background-repeat: no-repeat; opacity: 1; display: inline-block; margin: 0px 10px; } .casf__signup__outer input[type="checkbox"] + label::after { background-image: url('../img/check_circle_pink_empty_no_tick.svg'); } .casf__signup__outer input[type="checkbox"]:checked + label::after { background-image: url('../img/check-circle-pink-solid.svg'); opacity: 1; } .casf__signup__outer.closed .casf__section__open_close { transform: rotate(0deg); } .casf__signup__outer.closed .casf__signup__form { display: none; } .casf__signup__outer.closed .casf__section__title { padding-bottom: 16px; } .casf__signup__form { text-align: left; } .casf__signup__form .casf__section__intro { padding: 0px 16px 32px; } /* FORECAST SECTION */ .casf__forecast__outer { position: relative; display: block; width: 100%; padding-bottom: 16px; } .casf__section__open_close--forecast { position: absolute; top: 0px; right: 0px; } .casf__section__open_close--forecast:before { content: "CLOSE"; color: #FFFFFF; display: inline-block; } .closed .casf__section__open_close--forecast:before { content: "CLOSE"; color: #FFFFFF; display: inline-block; } .casf__forecast__outer--closed .casf__section__open_close--forecast:before { content: "DETAILS"; color: #FFFFFF; display: inline-block; } .casf__forecast__outer--closed .casf__section__intro { display: none; } .casf__forecast__outer--closed .casf__forecast__key__outer { display: none; } .casf__forecast__outer--closed .casf__forecast__location { display: none; } .casf__forecast__outer--closed .casf__section__subtitle { padding-bottom: 8px; } .casf__forecast__location { position: relative; display: block; width: 100%; padding: 0px 0px 32px; text-align: left; font-size: 16px; line-height: 18px; } .casf__forecast__location__title { font-family: 'VAGRoundedNext-Regular'; } .casf__forecast__outer .casf__section__intro { padding: 0px 16px 32px; } .casf__forecast { position: relative; display: block; width: 100%; padding: 16px 0px 16px 16px; } .casf__forecast__outer--closed .casf__forecast { padding: 0px 0px 0px 16px; } .casf__forecast__dates { position: relative; display: block; width: calc(100% + 4px); font-size: 0px; line-height: 0px; margin-left: -2px; margin-right: -2px; } .casf__forecast__dates--short { display: none; } .casf__forecast__date { display: inline-block; position: relative; width: calc(20% - 4px); margin: 0px 2px; vertical-align: top; font-size: 16px; line-height: 24px; } .casf__forecast__blocks { position: relative; display: block; width: calc(100% + 4px); margin-left: -2px; margin-right: -2px; } .casf__forecast__block { display: inline-block; position: relative; width: calc(20% - 4px); vertical-align: top; font-size: 16px; line-height: 30px; color: #292929; margin: 0px 2px; } .casf__forecast__block--last { } /* .casf__forecast__block--1 { background-color: #9cff9c; } .casf__forecast__block--2 { background-color: #31ff00; } .casf__forecast__block--3 { background-color: #31cf00; } .casf__forecast__block--4 { background-color: #ffff00; } .casf__forecast__block--5 { background-color: #ffcf00; } .casf__forecast__block--6 { background-color: #ff9a00; } .casf__forecast__block--7 { background-color: #ff9292; } .casf__forecast__block--8 { background-color: #ff0000; color:#FFFFFF; } .casf__forecast__block--9 { background-color: #990000; color:#FFFFFF; } .casf__forecast__block--10 { background-color: #ce30ff; color:#FFFFFF; } */ .casf__forecast__block--1 { background-color: #b5f0b4; } .casf__forecast__block--2 { background-color: #56db49; } .casf__forecast__block--3 { background-color: #57bb43; } .casf__forecast__block--4 { background-color: #dadb49; } .casf__forecast__block--5 { background-color: #dbc049; } .casf__forecast__block--6 { background-color: #dba149; } .casf__forecast__block--7 { background-color: #efb0b0; } .casf__forecast__block--8 { background-color: #db4949; color:#FFFFFF; } .casf__forecast__block--9 { background-color: #943b3b; color:#FFFFFF; } .casf__forecast__block--10 { background-color: #c35ade; color:#FFFFFF; } .casf__forecast__key__outer { position: relative; display: block; width: 100%; padding: 16px 0px; text-align: left; } .casf__forecast__key { display: inline-block; position: relative; width: 100%; max-width: 600px; vertical-align: top; text-align: center; } .casf__forecast__key__blocks { position: relative; display: block; width: 100%; padding: 0px 16px; } .casf__forecast__key__block { display: inline-block; position: relative; width: calc(80% / 9); color: #292929; font-size: 16px; } /* .casf__forecast__key__block--1 { background-color: #9cff9c; } .casf__forecast__key__block--2 { background-color: #31ff00; } .casf__forecast__key__block--3 { background-color: #31cf00; } .casf__forecast__key__block--4 { background-color: #ffff00; } .casf__forecast__key__block--5 { background-color: #ffcf00; } .casf__forecast__key__block--6 { background-color: #ff9a00; } .casf__forecast__key__block--7 { background-color: #ff9292; } .casf__forecast__key__block--8 { background-color: #ff0000; color:#FFFFFF; } .casf__forecast__key__block--9 { background-color: #990000; color:#FFFFFF; } .casf__forecast__key__block--10 { width: 20%; background-color: #ce30ff; color:#FFFFFF; } */ .casf__forecast__key__block--1 { background-color: #b5f0b4; } .casf__forecast__key__block--2 { background-color: #56db49; } .casf__forecast__key__block--3 { background-color: #57bb43; } .casf__forecast__key__block--4 { background-color: #dadb49; } .casf__forecast__key__block--5 { background-color: #dbc049; } .casf__forecast__key__block--6 { background-color: #dba149; } .casf__forecast__key__block--7 { background-color: #efb0b0; } .casf__forecast__key__block--8 { background-color: #db4949; color:#FFFFFF; } .casf__forecast__key__block--9 { background-color: #943b3b; color:#FFFFFF; } .casf__forecast__key__block--10 { width: 20%; background-color: #c35ade; color:#FFFFFF; } .casf__forecast__key__texts { position: relative; display: block; width: 100%; padding: 0px 16px 8px; } .casf__forecast__key__text { display: inline-block; position: relative; width: calc(80% / 3); color: #292929; font-size: 16px; line-height: 18px; border-right: 1px solid #292929; } .casf__forecast__key__text--very_high { width: 20%; border-right: 0px solid #292929; } .casf__forecast__key__description { display: block; position: relative; width: 100%; padding: 16px 16px; text-align: left; font-size: 18px; line-height: 24px; } /* LOCAL AUTHORITYSECTION */ .casf__authority__outer { position: relative; display: block; width: 100%; } .casf__section__open_close--authority { position: absolute; top: 0px; right: 0px; } .casf__section__open_close--authority:before { content: "CLOSE"; color: #FFFFFF; display: inline-block; } .closed .casf__section__open_close--authority:before { content: "CLOSE"; color: #FFFFFF; display: inline-block; } .casf__authority__outer--closed .casf__section__open_close--authority:before { content: "DETAILS"; color: #FFFFFF; display: inline-block; } .casf__authority { position: relative; display: block; width: 100%; padding: 0px 16px; text-align: left; } .casf__authority__outer--closed .casf__section__intro { display: none; } .casf__authority__outer--closed .casf__authority { display: none; } .casf__authority__outer--closed .casf__section__subtitle { padding-bottom: 8px; } .casf__authority__outer .casf__section__intro { padding: 0px 16px 32px; } .casf__action__authority_logo { position: relative; display: block; width: 100%; padding: 0px 50% 4px 8px; font-size: 13px; line-height: 15px; text-align: left; font-style: italic; } .casf__action__authority_logo img { position: relative; display: block; width: 100%; } .casf__actionplan__authority_logo { position: relative; display: block; width: 100%; padding: 4px 50% 4px 0px; font-size: 15px; line-height: 17px; text-align: left; font-style: italic; } .casf__actionplan__authority_logo img { position: relative; display: block; width: 100%; } @media only screen and (max-width: 500px) { .casf__signup__outer .form__field--cols-2 { width: 100%; } .casf__section__open_close--forecast { top: 4px; } .casf__section__open_close--authority { top: 4px; } .casf__signup__outer .form__field__title { font-size: 18px; line-height: 26px; } .casf__signup__outer .form__field__input { font-size: 16px; line-height: 22px; padding: 8px; } .casf__signup__outer .form__field { padding: 0px 16px 8px; } .casf__signup__outer .radio_each_outer label { font-size: 18px; line-height: 22px; vertical-align: top; } .casf__signup__outer input[type="checkbox"] + label::after { vertical-align: top; } .casf__forecast__dates { display: none; } .casf__forecast__dates--short { display: block; } .casf__forecast__date { font-size: 10px; line-height: 18px; } .casf__forecast__block { line-height: 24px; } .casf__forecast__key__block { line-height: 24px; } .casf__forecast__key__text { font-size: 12px; line-height: 14px; } .casf__authority { font-size: 18px; line-height: 24px; } } @media only screen and (min-width: 500px) and (max-width: 767px) { .casf__signup__outer .form__field--cols-2 { width: 100%; } .casf__section__open_close--forecast { top: 4px; } .casf__section__open_close--authority { top: 4px; } .casf__signup__outer .form__field__title { font-size: 18px; line-height: 26px; } .casf__signup__outer .form__field__input { font-size: 16px; line-height: 22px; padding: 8px; } .casf__signup__outer .form__field { padding: 0px 16px 8px; } .casf__signup__outer .radio_each_outer label { font-size: 18px; line-height: 22px; vertical-align: top; } .casf__signup__outer input[type="checkbox"] + label::after { vertical-align: top; } .casf__forecast__dates { display: none; } .casf__forecast__dates--short { display: block; } .casf__forecast__date { font-size: 10px; line-height: 18px; } .casf__forecast__block { line-height: 24px; } .casf__forecast__key__block { line-height: 24px; } .casf__forecast__key__text { font-size: 12px; line-height: 14px; } .casf__authority { font-size: 18px; line-height: 24px; } } @media only screen and (min-width: 768px) and (max-width: 1200px) { .casf__section__open_close--forecast { top: 4px; } .casf__section__open_close--authority { top: 4px; } .casf__signup__outer .form__field__title { font-size: 18px; line-height: 26px; } .casf__signup__outer .form__field__input { font-size: 16px; line-height: 22px; padding: 8px; } .casf__signup__outer .form__field { padding: 0px 16px 8px; } .casf__signup__outer .radio_each_outer label { font-size: 18px; line-height: 22px; vertical-align: top; } .casf__signup__outer input[type="checkbox"] + label::after { vertical-align: top; } .casf__forecast__block { line-height: 24px; } .casf__forecast__key__block { line-height: 24px; } .casf__forecast__key__text { font-size: 12px; line-height: 14px; } .casf__authority { font-size: 18px; line-height: 24px; } } /* CASF SURVEY */ .casf__survey__outer { position: relative; width: 100%; background-color: #FFFFFF; padding: 12px 0px 12px; } .casf__survey__inner { position: relative; display: block; width: 100%; margin: 0 auto; width: 100%; max-width: 1280px; text-align: center; padding: 16px 16px 16px 32px; background-color: inherit; } .casf__survey__outer--complete { padding-bottom: 16px; } .casf__survey__outer--complete .casf__section__line { background-color: #c5d052; } .casf__survey__outer--complete .casf__section__line__circle svg { fill: #c5d052; } .casf__survey__outer--complete .casf__section__line__circle .tick { display: block; } .disabled .casf__section__open_close { display: none; } .disabled .casf__section__title { color: #c6c6c6; } .casf__survey__outer.closed .casf__section__title { padding-bottom: 16px; } .casf__survey__outer.closed .casf__survey__inner__inner { position: relative; width: 100%; display: none; } .casf__survey__header { position: relative; width: 100%; padding-left: 16px; } .casf__survey__header__title { position: relative; display: inline-block; background-color: #ec1c99; border: 1px solid #292929; color: white; text-align: left; padding: 8px 16px; font-family: 'VAGRoundedNext-Regular'; } .casf__survey__header__title--question { width: 45%; border-right: 0px; } .casf__survey__header__title--toggle { width: 10%; text-align: center; } .casf__survey__header__title--find_out { width: 45%; border-left: 0px; } .casf__survey__question__outer { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; background-color: #FFFFFF; padding-left: 16px; } .casf__survey__question { position: relative; display: inline-block; width: 45%; vertical-align: top; text-align: left; font-size: 18px; line-height: 24px; border-color: #292929; border-style: solid; border-width: 0px 0px 1px 1px; padding: 16px; } .casf__survey__question__slider { position: relative; display: inline-block; width: 10%; vertical-align: top; border-color: #292929; border-style: solid; border-width: 0px 1px 1px 1px; padding: 16px; } .casf__survey__question__find_out { position: relative; display: inline-block; width: 45%; vertical-align: top; text-align: left; font-size: 16px; line-height: 24px; padding: 16px; border-color: #292929; border-style: solid; border-width: 0px 1px 1px 0px; } .casf__survey__inner__inner .form__field--submit { padding-top: 32px; text-align: center; } /* ON OFF SWITCH */ .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; position: relative; overflow: hidden; cursor: pointer; border: 1px solid #292929; border-radius: 16px; width: 100%; } .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: 'VAGRoundedNext-SemiBold'; box-sizing: border-box; } .onoffswitch-inner:before { content: "Yes"; background-color: #ec1c99; color: #FFFFFF; text-align: center; padding-right: 26px; } .onoffswitch-inner:after { content: "No"; padding-left: 26px; background-color: #f8f7f0; color: #292929; text-align: center; } .onoffswitch-switch { display: block; width: 22px; height: 22px; margin: 4px; background-color: #C0C0C0; position: absolute; top: 0; bottom: 0; right: calc(100% - 30px); border-radius: 11px; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0%; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0%; background-color: #FFFFFF; } .casf__survey__progress_outer { position: relative; width: 100%; padding: 0px 0px 0px; display: none; } .casf__survey__progress_outer .casf__section__intro { padding-left: 16px; } .casf__survey__outer--complete .casf__survey__progress_outer { display: block; } .casf__survey__progress_outer--closed .casf__section__intro { display: none; } .casf__survey__progress_outer--closed .casf__survey__progress__bars { display: none; } .casf__survey__progress_outer--closed .casf__section__subtitle { padding-bottom: 8px; } .casf__section__open_close--air_qual_score { position: absolute; top: 0px; right: 0px; } .casf__section__open_close--air_qual_score:before { content: "CLOSE"; color: #FFFFFF; display: inline-block; } .closed .casf__section__open_close--air_qual_score:before { content: "CLOSE"; color: #FFFFFF; display: inline-block; } .casf__survey__progress_outer--closed .casf__section__open_close--air_qual_score:before { content: "DETAILS"; color: #FFFFFF; display: inline-block; } .casf__survey__progress__bars { position: relative; display: block; width: 100%; padding: 40px 16px 60px; } .casf__survey__progress__bar__each { position: relative; display: block; width: 100%; padding: 2px 16px; text-align: left; } .casf__survey__progress__label { position: relative; display: inline-block; width: 150px; font-family: 'VAGRoundedNext-Light'; font-size: 18px; line-height: 24px; vertical-align: top; } .casf__survey__progress__bar__outer { position: relative; display: inline-block; width: calc(100% - 40px); height: 16px; font-size: 0px; line-height: 0px; vertical-align: top; background-color: #f66ac1; border-radius: 8px 0px 0px 8px; } .casf__survey__progress__bar__inner { position: relative; display: inline-block; height: 100%; background-color: #01bafd; vertical-align: top; border-radius: 8px 0px 0px 8px; } /* .casf__survey__progress__bar__inner--pos_diff { background-color: rgba(236,28,153,0.8); } .casf__survey__progress__bar__inner--negative_diff { background-color: rgba(236,28,153,0.1); } */ .casf__survey__progress__bar__marker { position: absolute; display: block; top: 36px; font-family: 'VAGRoundedNext-Light'; font-size: 12px; line-height: 12px; width: 150px; margin-left: -75px; text-align: center; } .casf__survey__progress__bar__marker__title { position: relative; display: block; width: 100%; text-align: center; font-family: 'VAGRoundedNext-SemiBold'; font-size: 17px; line-height: 17px; color: #292929; } .casf__survey__progress__bar__marker__text { position: relative; display: block; width: 100%; text-align: center; font-family: 'VAGRoundedNext-SemiBold'; font-size: 12px; line-height: 12px; color: #939598; } .casf__actionplan__progress__bar__outer--r2z .casf__survey__progress__bar__marker__title { display: none; } .casf__actionplan__progress__bar__outer--r2z .casf__survey__progress__bar__marker__text { display: none; } .end_of_progress_cloud_outer { display: inline-block; width: 60px; position: relative; height: 36px; margin-left: -20px; vertical-align: top; margin-top: -10px; } .end_of_progress_cloud_outer svg { display: block; width: 100%; height: 100%; } .end_of_progress_cloud_outer--r2z { width: 40px; margin-left: -15px; } .progress_map_marker_outer { position: absolute; top: -63px; left: 69px; display: block; width: 12px; height: 16px; } .progress_map_marker_outer svg { display: block; height: 100%; width: 100%; fill: #01bafd; } .progress_cloud_marker { position: absolute; top: -48px; left: 45px; display: block; width: 60px; height: 36px; } .progress_cloud_marker svg { display: block; height: 100%; width: 100%; } .progress_line_marker { position: absolute; top: -16px; left: 73px; height: 12px; width: 4px; background-color: #01bafd; border-radius: 0px 0px 2px 2px; } .casf__survey__question_find_out_link { display: none; } .casf__survey__question_find_out_resp { display: none; } .progress_average_school_outer { position: absolute; display: block; width: 150px; margin-left: -75px; left: 50%; top: -92px; } .average_school_text { position: relative; display: block; width: 100%; text-align: center; font-family: 'VAGRoundedNext-SemiBold'; font-size: 12px; line-height: 12px; color: #939598; text-transform: uppercase; } .average_school_icon_outer { position: relative; display: block; width: 40px; height: 32px; margin: 0px 55px; } .average_school_icon_outer svg { display: block; height: 100%; width: 100%; fill: #292929; } .average_school_dotted { position: absolute; top: 100%; height: 38px; width: 0px; border-left: 4px dotted #939598; left: 73px; } @media only screen and (max-width: 500px) { .casf__survey__header__title { font-size: 18px; line-height: 24px; } .casf__survey__header__title--question { width: 75%; } .casf__survey__header__title--toggle { width: 25%; } .casf__survey__header__title--find_out { display: none; } .casf__section__open_close--air_qual_score { top: 4px; } .casf__survey__question { width: 75%; font-size: 16px; line-height: 21px; } .casf__survey__question__slider { width: 25%; padding: 16px 8px; } .casf__survey__question__find_out { display: none; } .casf__survey__question_find_out_link { position: relative; display: block; width: 100%; color: #ec1c99; margin-top: 8px; cursor: pointer; } .casf__survey__question_find_out_resp.show { position: relative; display: block; width: 100%; } .casf__survey__progress__bars { padding-right: 0px; } .casf__survey__progress__bar__each { padding: 2px 0px; } } @media only screen and (min-width: 500px) and (max-width: 767px) { .casf__section__open_close--air_qual_score { top: 4px; } .casf__survey__header__title { font-size: 18px; line-height: 24px; } .casf__survey__header__title--question { width: 75%; } .casf__survey__header__title--toggle { width: 25%; } .casf__survey__header__title--find_out { display: none; } .casf__survey__question { width: 75%; font-size: 16px; line-height: 21px; } .casf__survey__question__slider { width: 25%; } .casf__survey__question__find_out { display: none; } .casf__survey__question_find_out_link { position: relative; display: block; width: 100%; color: #ec1c99; margin-top: 8px; cursor: pointer; } .casf__survey__question_find_out_resp.show { position: relative; display: block; width: 100%; } .casf__survey__progress__bars { padding-right: 0px; } .casf__survey__progress__bar__each { padding: 2px 0px; } } @media only screen and (min-width: 768px) and (max-width: 1200px) { .casf__section__open_close--air_qual_score { top: 4px; } .casf__survey__header__title { font-size: 18px; line-height: 24px; } .casf__survey__header__title--question { width: 42%; } .casf__survey__header__title--toggle { width: 16%; } .casf__survey__header__title--find_out { width: 42%; } .casf__survey__question { font-size: 16px; line-height: 21px; width: 42%; } .casf__survey__question__slider { width: 16%; } .casf__survey__question__find_out { font-size: 16px; line-height: 21px; width: 42%; } } /* CASF PATHWAYS */ .casf__pathways__outer { position: relative; display: block; width: 100%; background-color: #f8f7f0; padding: 12px 0px 12px; } .casf__pathways__inner { position: relative; display: block; width: 100%; margin: 0 auto; width: 100%; max-width: 1280px; text-align: center; padding: 16px 16px 16px 32px; background-color: inherit; } .casf__pathways__outer--complete { padding-bottom: 16px; } .casf__pathways__outer--complete .casf__section__line { background-color: #c5d052; } .casf__pathways__outer--complete .casf__section__line__circle svg { fill: #c5d052; } .casf__pathways__outer--complete .casf__section__line__circle .tick { display: block; } .casf__pathways__inner__inner {position: relative; display: block; width: 100%; background-color: rgba(248,247,240,1); } .casf__pathway__inner { position: relative; width: 96vw; left: 50%; margin-left: -48vw; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; padding: 16px 0px 16px; background-color: inherit; } .casf__pathway__inner--r2z { width: 100%; left: auto; margin-left: auto !important; } .casf__pathway__each { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; flex-grow: 1; flex-basis: 0; margin: 4px; background-color: #292929; border-radius: 10px; padding: 8px 2px 32px; } .r2z__pathway__each { margin: 4px 16px; } .r2z__pathway__each--even { background-color: #f1452e; } .r2z__pathway__each--odd { background-color: #f78423; } .casf__pathway__number { position: relative; display: block; font-size: 16px; line-height: 21px; color: #FFFFFF; font-family: 'VAGRoundedNext-SemiBold'; text-transform: uppercase; padding-bottom: 8px; } .casf__pathway__name { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; font-family: 'VAGRoundedNext-SemiBold'; font-size: 17px; line-height: 21px; height: 50px; justify-content: flex-start; padding: 0px 6px; color: #FFFFFF; } .r2z__pathway__each .casf__pathway__name { height: 26px; } .casf__pathway__goal { position: relative; display: block; font-size: 14px; line-height: 18px; color: #bcbec0; height: 72px; } .r2z__pathway__each--even .casf__pathway__goal { border-radius: 10px; background-color: #f78423; display: flex; flex-direction: column; align-content: center; justify-content: center; color: #FFFFFF; font-size: 15px; line-height: 20px; padding: 0px 8px; height: 96px; } .r2z__pathway__each--odd .casf__pathway__goal { border-radius: 10px; background-color: #f1452e; display: flex; flex-direction: column; align-content: center; justify-content: center; color: #FFFFFF; font-size: 15px; line-height: 20px; padding: 0px 8px; height: 96px; } .casf__pathway__rank__points { position: relative; display: block; width: 100%; text-align: left; padding: 0px 12px; color: #ec1c99; font-size: 10px; line-height: 19px; display: none; } .casf__pathways__inner__inner .form__field--submit { padding-top: 32px; text-align: center; } .casf__pathways__outer.closed .casf__section__open_close { transform: rotate(0deg); } .casf__pathways__outer.closed .casf__pathways__inner__inner { display: none; } .casf__pathways__outer.closed .casf__section__title { padding-bottom: 0px; } .casf__pathways__inner__inner .casf__section__intro { padding-left: 16px; } /* PATHWAY ACTIONS */ .casf__pathway__actions { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; } .casf__action { position: relative; display: block; border-radius: 8px; padding: 0px; padding-bottom: 12px; margin: 6px 0px 4px; background-color: #FFFFFF; overflow: hidden; } /* .casf__action--first { background-color: #FFFFFF; } .casf__action--first::before { content: "1st"; position: absolute; top: 0px; right: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 18px; line-height: 21px; padding: 2px 6px; color: #FFFFFF; background-color: #ec1c99; border-radius: 0px 0px 0px 3px; } .casf__action--equal_first { background-color: #FFFFFF; } .casf__action--equal_first::before { content: "=1st"; position: absolute; top: 0px; right: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 18px; line-height: 21px; padding: 2px 6px; color: #FFFFFF; background-color: #ec1c99; border-radius: 0px 0px 0px 3px; } */ /* .casf__action--second { background-color: #FFFFFF; } .casf__action--second::before { content: "2nd"; position: absolute; top: 0px; right: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 18px; line-height: 21px; padding: 2px 6px; color: #FFFFFF; background-color: #ec1c99; border-radius: 0px 0px 0px 3px; } .casf__action--equal_second { background-color: #FFFFFF; } .casf__action--equal_second::before { content: "=2nd"; position: absolute; top: 0px; right: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 18px; line-height: 21px; padding: 2px 6px; color: #FFFFFF; background-color: #ec1c99; border-radius: 0px 0px 0px 3px; } */ .casf__pathway__inner--recommended .casf__action--not_recommended { display: none; } .casf__pathway__inner--recommended .casf__action--first { order: -1; } .casf__pathway__inner--recommended .casf__action--equal_first { order: -1; } /* pink "#EC1C99", red "#F20043",orange "#EC652C",yellow "#FFCF0C", green "#A0E300",light blue "#00BAFD", dark blue"#000079",dark grey "#292929",cream "F8F7F1" */ .casf__action--na { background-color: #c6c6c8; } /* .casf__action--na::after { content: "Not Applicable"; position: absolute; bottom: 0px; right: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 12px; line-height: 14px; padding: 2px 6px; color: #292929; background-color: #C0C0C0; border-radius: 3px 0px 0px 0px; } */ .casf__action--already_do { background-color: #f2f6d0; } /* .casf__action--already_do::after { content: "We already do this"; position: absolute; bottom: 0px; right: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 12px; line-height: 14px; padding: 2px 6px; color: #292929; background-color: #A0E300; border-radius: 3px 0px 0px 0px; } */ .casf__action--on_plan {background-color: #f2f6d0; } /* .casf__action--on_plan::after { content: "On your action plan"; position: absolute; bottom: 0px; right: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 12px; line-height: 14px; padding: 2px 6px; color: #292929; background-color: #A0E300; border-radius: 3px 0px 0px 0px; } */ .casf__action--complete { background-color: #f2f6d0; } /* .casf__action--complete::after { content: "Complete"; position: absolute; bottom: 0px; right: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 12px; line-height: 14px; padding: 2px 6px; color: #292929; background-color: #A0E300; border-radius: 3px 0px 0px 0px; } */ .casf__action__top { position: relative; display: block; font-size: 17px; line-height: 20px; padding: 2px 8px; text-align: center; font-family: 'VAGRoundedNext-SemiBold'; background-color: #808284; color: #FFFFFF; } .r2z__pathway__actions .casf__action__top { background-color: #252525; } .casf__action--first .casf__action__top { background-color: #ec1c99; } .casf__action--equal_first .casf__action__top { background-color: #ec1c99; } .casf__action--second .casf__action__top { background-color: #ec1c99; } .casf__action--equal_second .casf__action__top { background-color: #ec1c99; } .casf__action--complete .casf__action__top { background-color: #c0d413; color: #292929; } .casf__action--already_do .casf__action__top { background-color: #c0d413; color: #292929; } .casf__action--on_plan .casf__action__top { background-color: #c0d413; color: #292929; } .casf__action__title { position: relative; display: block; font-size: 15px; line-height: 20px; padding: 8px 8px 4px; text-align: left; color: #292929; font-family: 'VAGRoundedNext-SemiBold'; } /* .casf__action--first .casf__action__title { padding-right: 40px; } .casf__action--equal_first .casf__action__title { padding-right: 56px; } .casf__action--second .casf__action__title { padding-right: 56px; } .casf__action--equal_second .casf__action__title { padding-right: 64px; } */ .casf__action__more { position: relative; display: block; font-size: 15px; line-height: 20px; padding: 0px 8px 12px; text-align: left; color: #292929; display: none; } .casf__action__more__subtitle { position: relative; display: block; font-size: 15px; line-height: 20px; padding-top: 6px; text-align: left; font-family: 'VAGRoundedNext-SemiBold'; color: #292929; } .casf__action__more__link { position: relative; display: block; font-size: 15px; line-height: 20px; padding: 0px 8px; text-align: left; color: #ec1c99; cursor: pointer; font-family: 'VAGRoundedNext-Regular'; text-decoration: underline; } .casf__action__more__link:hover { color: #ef8631; } .casf__action__icons { position: relative; display: block; width: 100%; font-size: 17px; line-height: 19px; color: #ec1c99; text-align: left; padding: 4px 8px 6px; } .casf__actionplan__action__action .casf__action__icons { padding: 4px 8px 6px; } .casf__action__icons .dim { color: #696969; display: none; } .casf__action__icon__impact { position: relative; display: inline-block; vertical-align: top; } .casf__action__icon__impact svg { display: inline-block; width: 20px; margin: 2px 1px 2px; } .casf__action__icon__impact svg path { fill: #50B6E8; } .casf__action__icon__impact .flower_icon { display: inline-block; width: 16px; margin: 2px 1px 2px; } .casf__action__icon__impact .flower_icon path { fill: #F39200; } .casf__action__icon__cost { position: relative; display: inline-block; vertical-align: top; font-family: 'VAGRoundedNext-Heavy'; color: #bcbec0; font-size: 20px; line-height: 20px; padding-left: 4px; letter-spacing: 2px; } .casf__action__icon__effort { position: relative; display: inline-block; vertical-align: top; } .casf__action__icon__effort svg { display: inline-block; width: 16px; margin: 2px 1px 2px; } .casf__action__icon__effort svg path { fill: #bcbec0; } .casf__action--na .casf__action__more__link { display: none; } .casf__action--na .casf__action__icons { display: none; } .casf__action--already_do .casf__action__more__link { display: none; } .casf__action--already_do .casf__action__icons { display: none; } .casf__action--complete .casf__action__more__link { display: none; } .casf__action--complete .casf__action__icons { display: none; } .casf__action--complete .casf__action__operations { display: none; } .casf__action__rank__info { position: relative; display: block; width: 100%; text-align: left; padding: 0px 12px; color: #ec1c99; display: none; } .casf__action__base__rank__score { position: relative; display: block; font-size: 10px; line-height: 12px; } .casf__action__base__rank { position: relative; display: block; font-size: 10px; line-height: 12px; margin-bottom: 8px; } .casf__action__operations { position: relative; display: block; width: 100%; text-align: left; padding: 4px 8px 0px; color: #ec1c99; } .casf__action__button { position: relative; display: block; font-size: 15px; line-height: 20px; margin: 4px 0px 0px; border-radius: 10px; cursor: pointer; padding: 6px 16px; border: 2px solid #ec1c99; text-align: center; text-transform: uppercase; font-family: 'VAGRoundedNext-SemiBold'; } .casf__action__button--add { margin-left: auto !important; background-color: #ec1c99; color: #FFFFFF; } .casf__action__button--already_back { display: none; } .casf__action__button--na_back { display: none; } .casf__action--already_do .casf__action__button--add { display: none; } .casf__action--already_do .casf__action__button--already { display: none; } .casf__action--already_do .casf__action__button--na { display: none; } .casf__action--already_do .casf__action__button--already_back { display: block; } .casf__action--na .casf__action__button--add { display: none; } .casf__action--na .casf__action__button--already { display: none; } .casf__action--na .casf__action__button--na { display: none; } .casf__action--na .casf__action__button--na_back { display: block; } .casf__action--on_plan .casf__action__operations { display: none; } .casf__action:hover .casf__action__button:hover { color: #ef8631; border-color: #ef8631; } .casf__action:hover .casf__action__button--add:hover { color: #FFFFFF; border-color: #ef8631; background-color: #ef8631; } .casf__action__hidden__buttons { position: relative; display: block; width: 100%; text-align: left; } .casf__action__button--add { font-size: 15px; line-height: 20px; } /* ON OFF SWITCH */ .casf__action__view__toggle__outer { position: relative; display: inline-block; width: 200px; margin-bottom: 16px; } .casf__action__view__toggle__outer .onoffswitch-label { display: block; position: relative; overflow: hidden; cursor: pointer; border: 0px solid #292929; border-radius: 16px; width: 100%; } .casf__action__view__toggle__outer .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .casf__action__view__toggle__outer .onoffswitch-inner:before, .casf__action__view__toggle__outer .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: 'VAGRoundedNext-SemiBold'; box-sizing: border-box; } .casf__action__view__toggle__outer .onoffswitch-inner:before { content: "View recommended"; background-color: #ec1c99; color: #FFFFFF; text-align: center; padding-right: 26px; } .casf__action__view__toggle__outer .onoffswitch-inner:after { content: "View all actions"; padding-left: 0px; background-color: #ec1c99; color: #FFFFFF; text-align: center; } .casf__action__view__toggle__outer .onoffswitch-switch { display: block; width: 22px; height: 22px; margin: 4px; background-color: #FFFFFF; position: absolute; top: 0; bottom: 0; right: calc(100% - 32px); border-radius: 11px; transition: all 0.3s ease-in 0s; } .casf__action__view__toggle__outer .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0%; } .casf__action__view__toggle__outer .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0%; background-color: #FFFFFF; } @media only screen and (max-width: 650px) { .casf__pathway__inner { flex-wrap: wrap; flex-direction: column; width: 100%; margin-left: 0; left : auto; } .casf__pathway__each { width: 100%; margin-bottom: 8px; } .r2z__pathway__each { margin: 4px 0px 8px; } .casf__pathway__name { height: auto; } .casf__pathway__goal { height: auto; padding: 0px 8px 16px; } .casf__pathway__rank__points { display: none; } } @media only screen and (min-width: 651px) and (max-width: 900px) { .casf__pathway__inner { flex-wrap: wrap; flex-direction: row; width: 100%; margin-left: 0; left : auto; } .casf__pathway__each { width: calc(50% - 8px); margin-bottom: 8px; flex-grow: 0; flex-basis: auto; } .r2z__pathway__each { width: calc(50% - 16px); margin: 4px 8px 8px; } .casf__pathway__name { height: auto; } .casf__pathway__goal { height: auto; padding: 0px 8px 16px; } .casf__pathway__rank__points { display: none; } } @media only screen and (min-width: 901px) and (max-width: 1200px) { .casf__pathway__inner { flex-wrap: wrap; flex-direction: row; width: 100%; margin-left: 0; left : auto; } .casf__pathway__each { width: calc((100% / 3) - 8px); margin-bottom: 8px; flex-grow: 0; flex-basis: auto; } .r2z__pathway__each { width: calc((100% / 3) - 16px); margin: 4px 8px 8px; } .casf__pathway__name { height: auto; } .casf__pathway__goal { height: auto; padding: 0px 8px 16px; } .casf__pathway__rank__points { display: none; } } @media only screen and (min-width: 1201px) and (max-width: 1600px) { .casf__pathway__inner { flex-wrap: wrap; flex-direction: row; width: 100%; margin-left: 0; left : auto; } .casf__pathway__each { width: calc((100% / 4) - 8px); margin-bottom: 8px; flex-grow: 0; flex-basis: auto; } .r2z__pathway__each { width: calc((100% / 4) - 16px); margin: 4px 8px 8px; } .casf__pathway__name { height: auto; } .casf__pathway__goal { height: auto; padding: 0px 8px 16px; } } /* ACTION PLAN */ .casf__actionplan__outer { position: relative; display: block; width: 100%; padding: 16px 0px 62px; background-color: #FFFFFF; } .casf__actionplan__inner { position: relative; display: block; width: 100%; margin: 0 auto; width: 100%; max-width: 1280px; text-align: center; padding: 16px 16px 16px 32px; background-color: inherit; } .casf__actionplan__inner__inner { position: relative; display: none; width: 100%; padding: 0px 0px 0px 16px; } .casf__actionplan__outer--ready .casf__section__intro { display: block; } .casf__actionplan__outer--ready .casf__actionplan__inner__inner { display: block; } .casf__actionplan__header { position: relative; width: 100%; } .casf__actionplan__header__title { position: relative; display: inline-block; background-color: #ec1c99; border-color: #292929; border-style: solid; border-width: 1px 0px 1px 1px; color: white; text-align: left; padding: 8px 16px; font-family: 'VAGRoundedNext-Regular'; font-size: 21px; } .casf__actionplan__header__title--action { width: 31%; } .casf__actionplan__header__title--more_detail { width: 31%; } .casf__actionplan__header__title--find_out { width: 18%; } .casf__actionplan__header__title--how_helps { width: 31%; } .casf__actionplan__header__title--actions { width: 7%; border-width: 1px 1px 1px 1px; text-align: center; padding: 8px 4px; } .casf__actionplan__each { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; background-color: #FFFFFF; } .casf__actionplan__each--complete { background-color: rgba(160, 227, 0,0.1); } .casf__actionplan__each--complete .casf__actionplan__action--action::before { content: "Completed"; position: absolute; top: 0px; left: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 12px; line-height: 14px; padding: 2px 6px; color: #292929; background-color: #A0E300; border-radius: 0px 0px 3px 0px; } .casf__actionplan__each--complete .casf__actionplan__action--action { padding-top: 24px; } .casf__actionplan__each__complete_message { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #333333; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; opacity: 0; z-index: -1; } .casf__actionplan__each__complete_message_title { position: relative; display: block; font-family: 'VAGRoundedNext-SemiBold'; color: #FFFFFF; font-size: 24px; line-height: 36px; text-transform: uppercase; text-align: center; } .casf__actionplan__each__complete_message_text { position: relative; display: block; font-family: 'VAGRoundedNext-Light'; color: #FFFFFF; font-size: 15px; line-height: 21px; text-align: center; } .casf__actionplan__each--completing .casf__actionplan__each__complete_message { z-index: 10; opacity: 1; transition: opacity 0.5s; } .casf__actionplan__each--completing_end { opacity: 0; transition: opacity 0.5s; } .casf__actionplan__each__saved_message { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #333333; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; opacity: 0; z-index: -1; } .casf__actionplan__each__saved_message_title { position: relative; display: block; font-family: 'VAGRoundedNext-SemiBold'; color: #FFFFFF; font-size: 24px; line-height: 36px; text-transform: uppercase; text-align: center; } .casf__actionplan__each__saved_message_text { position: relative; display: block; font-family: 'VAGRoundedNext-Light'; color: #FFFFFF; font-size: 15px; line-height: 21px; text-align: center; } .add_own_action_outer_outer--saving .casf__actionplan__each__saved_message { z-index: 10; opacity: 1; transition: opacity 0.5s; } .add_own_action_outer_outer--saving_end { opacity: 0; transition: opacity 0.5s; } .casf__actionplan__action { position: relative; display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; width: 31%; text-align: left; font-size: 18px; line-height: 24px; border-color: #292929; border-style: solid; border-width: 0px 0px 0px 1px; padding: 8px; } .casf__actionplan__action_inner { position: relative; display: block; width: 100%; border: 1px solid #FFFFFF; border-radius: 5px; padding: 8px; } .casf__actionplan__each--complete .casf__actionplan__action_inner { border: 1px solid #f5fbe6; } .r2z__actionplan__each--complete .casf__actionplan__action_inner { border: 1px solid #f5fbe6; } .actionplan__each--own_action.editing { background-color: #F8F8F8; } .editing .casf__actionplan__action_inner { border: 1px solid #ec1c99; background-color: #FFFFFF; } .editing .casf__actionplan__action_inner--deep { min-height: 156px; } .editing .casf__actionplan__action_inner--shallow { min-height: 76px; } .casf__actionplan__action--action { font-family: 'VAGRoundedNext-SemiBold'; } .casf__actionplan__action__action { flex-grow: 1; } .casf__actionplan__action__pathway { font-family: 'VAGRoundedNext-Regular'; font-size: 12px; line-height: 16px; padding-left: 8px; } .casf__actionplan__action--more_detail { font-size: 16px; line-height: 21px; justify-content: flex-start; } .casf__actionplan__action--find_out { width: 18%; font-size: 16px; line-height: 21px; word-break: break-all; } .casf__actionplan__action--how_helps { font-size: 16px; line-height: 21px; } .casf__actionplan__action--actions { width: 7%; text-align: center; border-width: 0px 1px 0px 1px; justify-content: center; } .casf__actionplan__action__share { position: relative; display: block; width: 32px; height: 32px; margin: 4px auto !important; cursor: pointer; } .casf__actionplan__action__complete { position: relative; display: block; width: 32px; height: 32px; margin: 4px auto !important; cursor: pointer; } .casf__actionplan__action__uncomplete { position: relative; display: none; width: 32px; height: 32px; margin: 4px auto !important; cursor: pointer; } .casf__actionplan__action__remove { position: relative; display: block; width: 24px; height: 24px; margin: 4px auto !important; cursor: pointer; } .casf__actionplan__each--complete .casf__actionplan__action__complete { display: none; } .casf__actionplan__each--complete .casf__actionplan__action__remove { display: none; } .casf__actionplan__each--complete .casf__actionplan__action__uncomplete { display: block; } .casf__actionplan__action--actions svg { position: relative; display: block; width: 100%; height: 100%; } .casf__actionplan__action--actions svg path { fill: #ec1c99; } .casf__actionplan__action--actions svg:hover path { fill: #ef8631; } .casf__actionplan__subtitle { position: relative; display: block; width: 100%; text-align: left; padding: 16px 16px 8px; font-family: 'VAGRoundedNext-Regular'; font-size: 24px; line-height: 32px; color: #ec1c99; } .casf__actionplan__already_do { position: relative; display: block; width: 100%; text-align: left; padding: 0px 16px; font-family: 'VAGRoundedNext-Regular'; font-size: 18px; line-height: 24px; margin-bottom: 8px; } .casf__actionplan__already_do__title { display: block; padding-right: 16px; } .casf__actionplan__already_do__pathway { display: block; font-family: 'VAGRoundedNext-Regular'; font-size: 12px; line-height: 16px; } .casf__actionplan__progress__outer { position: relative; width: 100%; padding: 32px 0px; display: none; } .casf__actionplan__outer--ready .casf__actionplan__progress__outer { display: block; } .casf__actionplan__progress__outer .casf__section__intro { padding-left: 16px; } .casf__actionplan__progress__bars { position: relative; display: block; width: 100%; padding: 40px 16px 100px; } .casf__actionplan__progress__bars--r2z { padding: 40px 16px 40px; } .casf__actionplan__progress__bar__each { position: relative; display: block; width: 100%; padding: 2px 0px; text-align: left; } .casf__actionplan__progress__label { position: relative; display: inline-block; width: 150px; font-family: 'VAGRoundedNext-Light'; font-size: 18px; line-height: 24px; vertical-align: top; } .casf__actionplan__progress__bar__outer { position: relative; display: inline-block; width: calc(100% - 40px); height: 16px; font-size: 0px; line-height: 0px; vertical-align: top; background-color: #f66ac1; border-radius: 8px 0px 0px 8px; } .casf__actionplan__progress__bar__outer--r2z { background-color: #39383a; } .casf__actionplan__progress__bar__inner { position: relative; display: inline-block; height: 100%; background-color: #ec1c99; vertical-align: top; } .casf__actionplan__progress__bar__inner--your_width { position: absolute; left: 0px; top: 0px; background-color: #01bafd; border-radius: 8px 0px 0px 8px; } .casf__actionplan__progress__bar__outer--r2z .casf__actionplan__progress__bar__inner--your_width { background-color: #c1cc4f; } .casf__actionplan__progress__bar__inner--complete_so_far { position: absolute; top: 0px; background-color: #4dcefe; } .casf__actionplan__progress__bar__inner--on_plan { position: absolute; top: 0px; background-color: #ef099a; } .casf__actionplan__progress__bar__outer--r2z .casf__actionplan__progress__bar__inner--complete_so_far { background-color: #f1452e; } .complete_so_far_cloud { position: absolute; top: -10px; display: block; width: 60px; height: 36px; margin-left: -30px; z-index: 10; } .complete_so_far_cloud svg { display: block; height: 100%; width: 100%; } .casf__actionplan__progress__bar__outer--r2z .complete_so_far_cloud { width: 40px; height: 40px; margin-left: -20px; } .casf__actionplan__progress__bar__marker--your_width { position: absolute; height: 48px; width: 4px; background-color: #01bafd; border-radius: 2px; top: -10px; margin-left: -2px; } .casf__actionplan__progress__bar__outer--r2z .casf__actionplan__progress__bar__marker--your_width { background-color: #c1cc4f; } .your_width_map_marker_outer { position: absolute; top: -20px; left: -4px; display: block; width: 12px; height: 16px; } .your_width_map_marker_outer svg { display: block; position: relative; height: 100%; width: 100%; fill: #01bafd; } .casf__actionplan__progress__bar__outer--r2z .your_width_map_marker_outer svg { fill: #c0cb4e; } .casf__actionplan__progress__bar__marker--on_plan { position: absolute; height: 60px; width: 4px; background-color: #ef099a; border-radius: 2px; top: -22px; margin-left: -2px; } .casf__actionplan__progress__bar__outer--r2z .casf__actionplan__progress__bar__marker--on_plan { background-color: #f1452e; } .casf__actionplan__progress__bar__marker--on_plan_text { position: absolute; width: 150px; top: 64px; left: -73px; } .casf__actionplan__progress__bar__each .progress_average_school_outer { top: -68px; } .casf__actionplan__action__more__detail__link { display: none; padding-left: 8px; } .casf__actionplan__action__more__detail { display: none; padding-left: 8px; } .casf__actionplan__action__inspiration { display: none; } .casf__actionplan__action__more_detail_inspiration_title { display: none; padding-left: 8px; } .casf__actionplan__action__more_detail_inspiration { display: none; padding-left: 8px; } .progress_key_outer { position: relative; display: block; width: 100%; padding-bottom: 24px; } .progress_key_title { position: relative; display: block; width: 100%; text-align: center; font-family: 'VAGRoundedNext-SemiBold'; font-size: 17px; line-height: 17px; color: #292929; } .progress_key_each { position: relative; display: inline-block; width: calc(100% / 3); padding: 0px 16px 8px; vertical-align: top; } .progress_key_block { position: relative; display: block; width: 100%; text-align: center; } .progress_key_block_inner { position: relative; display: inline-block; width: 64px; height: 16px; border-radius: 8px; } .progress_key_each--baseline .progress_key_block_inner { background-color: #c0cb4e; } .progress_key_each--to_complete .progress_key_block_inner { background-color: #f1452d; } .progress_key_each--further .progress_key_block_inner { background-color: #383839; } .progress_key_text { position: relative; display: block; width: 100%; text-align: center; font-family: 'VAGRoundedNext-Light'; font-size: 14px; line-height: 20px; } /* NEW ACTION PLAN STUFF HERE */ .casf__actionplan__action--own_notes { width: 100%; border-color: #292929; border-style: solid; border-width: 0px 1px 1px 1px; flex-shrink: 0; padding: 4px; } .casf_own_notes_inner { position: relative; display: block; width: 100%; border: 1px solid #292929; border-radius: 10px; padding: 8px 16px; font-size: 16px; line-height: 21px; } .casf_own_notes_inner.editing { background-color: #F8F8F8; } .casf_own_notes_title {position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-SemiBold'; font-size: 14px; line-height: 21px; } .casf_own_notes_edit_button { position: relative; display: inline-block; width: 21px; margin-left: 8px; vertical-align: top; cursor: pointer; } .casf_own_notes_inner.editing .casf_own_notes_edit_button { display: none; } .casf_own_notes_edit_button svg { position: relative; display: block; width: 100%; fill: #ec1c99; } .casf_own_notes_edit_button:hover svg { fill: #ef8631; } .casf_own_notes_save_button { position: relative; display: none; width: 17px; margin-left: 8px; vertical-align: top; cursor: pointer; } .casf_own_notes_inner.editing .casf_own_notes_save_button { display: inline-block; } .casf_own_notes_save_button svg { position: relative; display: block; width: 100%; fill: #ec1c99; } .casf_own_notes_save_button:hover svg { fill: #ef8631; } .casf_own_notes { position: relative; display: block; width: 100%; font-size: 14px; line-height: 20px; border: 1px solid #FFFFFF; border-radius: 5px; padding: 8px; } .casf_own_notes.editable { border: 1px solid #ec1c99; background-color: #FFFFFF; } .casf_own_notes:focus { outline: 0 !important; } .action_plan_buttons_outer { position: relative; width: 100%; display: flex; flex-direction: row; wrap: nowrap; justify-content: space-between; align-items: center; padding: 8px 16px 0px; border: 0px solid red; font-size: 0px; line-height: 0px; } .action_plan_dowload { position: relative; display: inline-block; width: auto; margin-bottom: 4px; } .action_plan_dowload a { display: inline-block; padding: 4px 16px; border-radius: 15px; font-size: 16px; line-height: 22px; background-color: #ec1c99; color: #FFFFFF !important; } .action_plan_dowload a:hover { background-color: #ef8631; } .action_plan_dowload svg { position: relative; display: inline-block; width: 16px; height: 21px; fill: #FFFFFF; margin-right: 8px; vertical-align: top; } /* .action_plan_dowload:hover svg { fill: #ef8631; } */ .action_plan_add_action { position: relative; display: inline-block; width: auto; text-align: center; padding: 4px 16px; border-radius: 15px; font-size: 16px; line-height: 22px; background-color: #ec1c99; color: #FFFFFF !important; cursor: pointer; margin-bottom: 4px; } .action_plan_add_action:hover { background-color: #ef8631; } .action_plan_add_action svg { position: relative; display: inline-block; width: 21px; height: 21px; fill: #FFFFFF; margin-right: 8px; vertical-align: top; } .add_own_action_outer_outer { position: relative; width: 100%; display: none; } .add_own_action_outer {position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; background-color: #FFFFFF; border-color: #292929; border-style: solid; border-width: 0px 0px 0px 0px; } .add_own_action_title { position: relative; width: 100%; display: block; background-color: #ec1c99; color: #FFFFFF; padding: 8px 16px; font-family: 'VAGRoundedNext-Regular'; font-size: 21px; line-height: 30px; text-align: left; border-color: #292929; border-style: solid; border-width: 0px 1px 1px 1px; } .add_own_action_subtitle { font-size: 16px; line-height: 21px;} .add_own_action_section { position: relative; display: inline-flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start;; width: 31%; text-align: left; font-size: 18px; line-height: 24px; border-color: #292929; border-style: solid; border-width: 0px 0px 1px 1px; padding: 8px 16px 16px; background-color: #F8F8F8; } .add_own_action_section--action { font-family: 'VAGRoundedNext-SemiBold'; } .add_own_action_section--detail { font-size: 16px; line-height: 21px; } .add_own_action_section--inspiration { font-size: 16px; line-height: 21px; } .add_own_action_section--actions { width: 7%; text-align: center; border-width: 0px 1px 1px 1px; justify-content: center; } .add_own_action_save_button { position: relative; display: block; width: 24px; height: 24px; margin: 4px auto !important; cursor: pointer; } .add_own_action_delete_button { position: relative; display: block; width: 24px; height: 24px; margin: 4px auto !important; cursor: pointer;} .add_own_action_save_button svg { position: relative; display: block; width: 100%; height: 100%; fill: #ec1c99; } .add_own_action_save_button:hover svg { position: relative; display: block; width: 100%; height: 100%; fill: #ef8631; } .add_own_action_delete_button svg { position: relative; display: block; width: 100%; height: 100%; fill: #ec1c99; } .add_own_action_delete_button:hover svg { position: relative; display: block; width: 100%; height: 100%; fill: #ef8631; } .add_own_action_section_title { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-SemiBold'; font-size: 14px; line-height: 21px; } .add_own_action_section_title.invalid { color: red; } .add_own_action_input { position: relative; display: block; width: 100%; font-size: 14px; line-height: 20px; border: 1px solid #ec1c99; min-height: 76px; background-color: #FFFFFF; border-radius: 5px; padding: 8px; } .add_own_action_input--details, .add_own_action_input--more_info { min-height: 156px; } .add_own_action_input--title { margin-bottom: 16px; } .add_own_action_input.invalid { border-color: red; } .add_own_action_input:focus { outline: 0 !important; } .casf__actionplan__action_inner:focus { outline: 0 !important; } .add_own_actions_icons { position: relative; display: block; width: 100%; padding: 0px 0px 0px; } .add_own_actions_icons .add_own_action_section_title { display: inline-block; vertical-align: top; width: auto; margin-right: 8px; } .add_own_actions_icons .casf__action__icon__impact { display: inline-block; vertical-align: top; } .add_own_actions_icons .casf__action__icon_each { display: inline-block; vertical-align: top; padding: 2px 2px; border: 0px solid red; font-size: 0px; line-height: 0px; cursor: pointer; } .add_own_actions_icons .casf__action__icon_each--cost { font-size: 20px; line-height: 16px; padding: 2px 2px; } .add_own_actions_icons .casf__action__icon__impact svg { margin: 0px 0px 0px; } .add_own_actions_icons .casf__action__icon__effort svg { margin: 0px 0px 0px; } .add_own_actions_icons .casf__action__icon__impact svg path { fill: #bcbec0; } .add_action_cost_icon { position: relative; display: inline-block; margin: 0px 1px; } .add_action_pathway_option { position: relative; display: inline-block; margin: 0px 4px 0px 1px; vertical-align: top; font-family: 'VAGRoundedNext-Heavy'; color: #bcbec0; font-size: 14px; line-height: 21px; cursor: pointer; } .add_action_pathway_option:hover { color: #ef8631; } .add_action_pathway_option.selected { color: #ec1c99; } .add_action_pathway_option.selected:hover { color: #ec1c99; } .add_own_actions_icons .casf__action__icon_each--impact.selected svg path { fill: #ec1c99; } .add_own_actions_icons .casf__action__icon_each--impact.selected.hovering svg path { fill: #bcbec0; } .add_own_actions_icons .casf__action__icon_each--impact.selected.hovered svg path { fill: #ef8631; } .add_own_actions_icons .casf__action__icon_each--impact.hovered svg path { fill: #ef8631; } .add_own_actions_icons .casf__action__icon_each--effort.selected svg path { fill: #ec1c99; } .add_own_actions_icons .casf__action__icon_each--effort.selected.hovering svg path { fill: #bcbec0; } .add_own_actions_icons .casf__action__icon_each--effort.selected.hovered svg path { fill: #ef8631; } .add_own_actions_icons .casf__action__icon_each--effort.hovered svg path { fill: #ef8631; } .add_own_actions_icons .casf__action__icon_each--cost.selected { color: #ec1c99; } .add_own_actions_icons .casf__action__icon_each--cost.selected.hovering { color: #bcbec0; } .add_own_actions_icons .casf__action__icon_each--cost.selected.hovered { color: #ef8631; } .add_own_actions_icons .casf__action__icon_each--cost.hovered { color: #ef8631; } .actionplan__each--own_action .r2z__actionplan__action--action { padding-top: 24px; } .actionplan__each--own_action .r2z__actionplan__action--action::before { content: "Your Own Action"; position: absolute; top: 0px; left: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 12px; line-height: 14px; padding: 2px 6px; color: #FFFFFF; background-color: #ec1c99; border-radius: 0px 0px 3px 0px; } .actionplan__each--own_action .casf__actionplan__action--action { padding-top: 24px; } .actionplan__each--own_action .casf__actionplan__action--action::before { content: "Your Own Action"; position: absolute; top: 0px; left: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 12px; line-height: 14px; padding: 2px 6px; color: #FFFFFF; background-color: #ec1c99; border-radius: 0px 0px 3px 0px; } .r2z__actionplan__each--own-complete .r2z__actionplan__action--action { padding-top: 24px; } .r2z__actionplan__each--own-complete .r2z__actionplan__action--action::before { content: "Your Own Action - Completed"; position: absolute; top: 0px; left: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 12px; line-height: 14px; padding: 2px 6px; color: #292929; background-color: #A0E300; border-radius: 0px 0px 3px 0px; } .casf__actionplan__each--own-complete .casf__actionplan__action--action { padding-top: 24px; } .casf__actionplan__each--own-complete .casf__actionplan__action--action::before { content: "Your Own Action - Completed"; position: absolute; top: 0px; left: 0px; font-family: 'VAGRoundedNext-SemiBold'; font-size: 12px; line-height: 14px; padding: 2px 6px; color: #292929; background-color: #A0E300; border-radius: 0px 0px 3px 0px; } .edit_action_inputs_outer { position: relative; display: none; width: 100%; padding: 8px 8px; } .editing .edit_action_inputs_outer { display: block; } .editing .casf__action__icons { display: none; } .editing .casf__actionplan__action__pathway { display: none; } @media only screen and (max-width: 500px) { .casf__actionplan__header__title { font-size: 18px; line-height: 24px; } .casf__actionplan__header__title--action { width: 80%; } .casf__actionplan__header__title--more_detail { display: none; } .casf__actionplan__header__title--how_helps { display: none; } .casf__actionplan__header__title--actions { width: 20%; } .casf__actionplan__action { width: 80%; justify-content: flex-start; font-size: 16px; line-height: 21px; } .casf__actionplan__action__action { flex-grow: 0; } .casf__actionplan__action--more_detail { display: none; } .casf__actionplan__action--how_helps { display: none; } .casf__actionplan__action--actions { width: 20%; justify-content: center; } .casf__actionplan__action__more__detail__link { position: relative; display: block; width: 100%; color: #ec1c99; margin-top: 8px; cursor: pointer; font-family: 'VAGRoundedNext-Regular'; } .casf__actionplan__action__more__detail.show { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-Regular'; } .casf__actionplan__action__more__detail.show .casf__actionplan__action__inspiration { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-SemiBold'; padding-top: 8px; } .casf__actionplan__subtitle { font-size: 18px; line-height: 24px; } .casf__actionplan__already_do { font-size: 16px; line-height: 21px; } .casf__actionplan__action__pathway { padding-top: 8px; } .casf__actionplan__action--own_notes { width: 100%; } .casf_own_notes { padding: 4px; } .action_plan_buttons_outer { flex-direction: column; } .add_own_action_subtitle { display: none; } .add_own_action_outer { flex-direction: column; } .add_own_action_section { width: 100%; border-right: 1px solid #292929; border-bottom: 0px; } .add_own_action_section--actions { width: 100%; flex-direction: row; border-bottom: 1px solid #292929; } .actionplan__each--own_action.editing { flex-direction: column; } .actionplan__each--own_action.editing .r2z__actionplan__action--action { width: 100%; } .actionplan__each--own_action.editing .casf__actionplan__action__more__detail__link { display: none; } .actionplan__each--own_action.editing .casf__actionplan__action__more__detail.show { display: none; } .actionplan__each--own_action.editing .r2z__actionplan__action--action { width: 100%; border-right: 1px solid #292929; } .actionplan__each--own_action.editing .casf__actionplan__action--more_detail { width: 100%; display: block; border-right: 1px solid #292929; } .actionplan__each--own_action.editing .casf__actionplan__action--how_helps { width: 100%; display: block; border-right: 1px solid #292929; } .actionplan__each--own_action.editing .casf__actionplan__action--actions { width: 100%; } } @media only screen and (min-width: 500px) and (max-width: 767px) { .casf__actionplan__header__title { font-size: 18px; line-height: 24px; } .casf__actionplan__header__title--action { width: 80%; } .casf__actionplan__header__title--more_detail { display: none; } .casf__actionplan__header__title--how_helps { display: none; } .casf__actionplan__header__title--actions { width: 20%; } .casf__actionplan__action { width: 80%; justify-content: flex-start; font-size: 16px; line-height: 21px; } .casf__actionplan__action__action { flex-grow: 0; } .casf__actionplan__action--more_detail { display: none; } .casf__actionplan__action--how_helps { display: none; } .casf__actionplan__action--actions { width: 20%; } .casf__actionplan__action__more__detail__link { position: relative; display: block; width: 100%; color: #ec1c99; margin-top: 8px; cursor: pointer; font-family: 'VAGRoundedNext-Regular'; } .casf__actionplan__action__more__detail.show { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-Regular'; } .casf__actionplan__action__more__detail.show .casf__actionplan__action__inspiration { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-SemiBold'; padding-top: 8px; } .casf__actionplan__subtitle { font-size: 18px; line-height: 24px; } .casf__actionplan__already_do { font-size: 16px; line-height: 21px; } .casf__actionplan__action__pathway { padding-top: 8px; } .progress_key_each { width: 100%; } .casf__actionplan__action--own_notes { width: 100%; } .casf_own_notes { padding: 4px; } .action_plan_buttons_outer { flex-direction: column; } .add_own_action_subtitle { display: none; } .add_own_action_outer { flex-direction: column; } .add_own_action_section { width: 100%; border-right: 1px solid #292929; border-bottom: 0px; } .add_own_action_section--actions { width: 100%; flex-direction: row; border-bottom: 1px solid #292929; } .actionplan__each--own_action.editing { flex-direction: column; } .actionplan__each--own_action.editing .r2z__actionplan__action--action { width: 100%; } .actionplan__each--own_action.editing .casf__actionplan__action__more__detail__link { display: none; } .actionplan__each--own_action.editing .casf__actionplan__action__more__detail.show { display: none; } .actionplan__each--own_action.editing .r2z__actionplan__action--action { width: 100%; border-right: 1px solid #292929; } .actionplan__each--own_action.editing .casf__actionplan__action--more_detail { width: 100%; display: block; border-right: 1px solid #292929; } .actionplan__each--own_action.editing .casf__actionplan__action--how_helps { width: 100%; display: block; border-right: 1px solid #292929; } .actionplan__each--own_action.editing .casf__actionplan__action--actions { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1200px) { .casf__actionplan__header__title { font-size: 18px; line-height: 24px; } .casf__actionplan__header__title--action { width: 44%; } .casf__actionplan__header__title--more_detail { width: 44%; } .casf__actionplan__header__title--how_helps { display: none; } .casf__actionplan__header__title--actions { width: 12%; } .casf__actionplan__action--how_helps { display: none; } .casf__actionplan__action--more_detail { width: 44%; } .casf__actionplan__action { width: 44%; font-size: 16px; line-height: 21px; } .casf__actionplan__action--actions { width: 12%; } .casf__actionplan__action__more_detail_inspiration_title { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-SemiBold'; padding-top: 8px; } .casf__actionplan__action__more_detail_inspiration { position: relative; display: block; width: 100%; font-family: 'VAGRoundedNext-Regular'; } .casf__actionplan__subtitle { font-size: 18px; line-height: 24px; } .casf__actionplan__already_do { font-size: 16px; line-height: 21px; } .casf__actionplan__action__pathway { padding-top: 8px; } .casf__actionplan__action--own_notes { width: 100%; } .casf_own_notes { padding: 4px; } .actionplan__each--own_action.editing { flex-direction: column; } .actionplan__each--own_action.editing .r2z__actionplan__action--action { width: 100%; } .actionplan__each--own_action.editing .casf__actionplan__action__more__detail__link { display: none; } .actionplan__each--own_action.editing .casf__actionplan__action__more__detail.show { display: none; } .actionplan__each--own_action.editing .r2z__actionplan__action--action { width: 100%; border-right: 1px solid #292929; } .actionplan__each--own_action.editing .casf__actionplan__action--more_detail { width: 100%; display: block; border-right: 1px solid #292929; } .actionplan__each--own_action.editing .casf__actionplan__action--how_helps { width: 100%; display: block; border-right: 1px solid #292929; } .actionplan__each--own_action.editing .casf__actionplan__action--actions { width: 100%; } .actionplan__each--own_action.editing .casf__actionplan__action__more_detail_inspiration_title { display: none; } .actionplan__each--own_action.editing .casf__actionplan__action__more_detail_inspiration { display: none; } }