@charset "UTF-8"; /* Theme Name: Enfold Child Description: A Child Theme for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then. Version: 1.2.1 Author: Kriesi Author URI: http://www.kriesi.at Template: enfold */ /*Add your own styles here:*/ /* font-family:'Museo Slab W01_500'; font-family:'Museo Slab W01_700'; font-family:'Chino ITC W01 Light'; font-family:'Chino ITC W01'; font-family:'ChinoITCW01-MediumItali'; */ :root { --clr-white: #fff; --clr-black: #202020; --clr-primary-accent: #ffb957; --clr-secondary-accent: #704b37; --clr-light-primary: #386B70; --clr-light-primary-bg: #e3e6e8; --clr-light-primary-dark: #0b474c; --clr-light-secondary: #668899; --clr-light-secondary-bg: #c4cfd4; --clr-dark-primary: #e3e6e8; --clr-dark-primary-bg: #386B70; --clr-dark-secondary: #c4cfd4; --clr-dark-secondary-bg: #223944; --clr-primary: var(--clr-light-primary); --clr-primary-bg: var(--clr-light-primary-bg); --clr-primary-dark: var(--clr-light-primary-dark); --clr-secondary: var(--clr-light-secondary); --clr-secondary-bg: var(--clr-light-secondary-bg); /** * * we are not using blue anymore * */ --blue-h: 219; --blue-s: 88%; --blue-l: 36.5%; --clr-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l)); --clr-blue-dark: #3d5267; --clr-blue-medium: #748da6; --clr-blue-light: #9aabbb; --clr-blue-lightest: #f3f7fa; --clr-light-gray: #e5eaee; --clr-white-green: #f3f6f9; --clr-light-green: #e7f7f8; --clr-table-hightlight: var(--clr-light-green); --clr-green: #0fae26; --clr-red: #F02020; --clr-orange: #ffb61d; --clr-error: var(--clr-red); --clr-warning: var(--clr-orange); --clr-text: var(--clr-primary); --clr-disabled: var(--clr-blue-medium); --clr-main: var(--clr-blue); --pcsig_content_width: 580px; --spacer: 2rem; --border-radius: 4px; --drop-shadow: 0px 4px 8px 0px rgba(57, 85, 106, 0.04); --navbar-height: 70px; --font-manrope: 'Manrope', sans-serif; --font-open-sans: 'Open Sans', sans-serif; --font-source-sans: 'Source Sans Pro', sans-serif; --font-pc-design: var(--font-manrope); --weight-regular: 500; --weight-semibold: 600; --weight-bold: 700; --font-titles: var(--font-manrope); --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' xml:space='preserve'%3E%3Ccircle cx='10' cy='10' r='7' fill='none' stroke='%230b474c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath fill='none' stroke='%230b474c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M19.5 19.5 15 15'/%3E%3C/svg%3E"); --icon-arrow-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'xmlns:xlink='http://www.w3.org/1999/xlink'width='31px' height='22px' viewBox='0 0 31 22'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M29.499,12.17 L5.461,12.17 L11.505,18.168 C12.152,18.822 12.152,19.882 11.505,20.536 C10.859,21.189 9.812,21.189 9.167,20.536 L0.491,11.707 C0.154,11.54 0.154,9.993 0.491,9.339 L9.167,0.512 C9.812,0.141 10.859,0.141 11.505,0.512 C12.152,1.166 12.152,2.226 11.505,2.880 L5.478,9.13 L29.499,9.13 C30.328,9.13 31.0,9.685 31.0,10.513 L31.0,10.517 C31.0,11.346 30.328,12.17 29.499,12.17 Z'/%3E%3C/svg%3E"); --icon-arrow-forward: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'xmlns:xlink='http://www.w3.org/1999/xlink'width='31px' height='21px' viewBox='0 0 31 21'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M30.477,11.674 L21.810,20.488 C21.165,21.140 20.119,21.140 19.474,20.488 C18.828,19.835 18.828,18.777 19.474,18.124 L25.495,11.999 L1.500,11.999 C0.671,11.999 0.0,11.328 0.0,10.500 C0.0,9.671 0.671,8.999 1.500,8.999 L25.512,8.999 L19.474,2.858 C18.828,2.205 18.828,1.146 19.474,0.494 C20.119,0.157 21.165,0.157 21.810,0.494 L30.477,9.309 C31.123,9.961 31.123,11.20 30.477,11.674 Z'/%3E%3C/svg%3E"); --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='44' height='44' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E%0A"); --icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='44' height='44' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E%0A"); --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230b474c' stroke-width='4' stroke-linecap='square' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --icon-checkbox-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40' xml:space='preserve'%3E%3Ccircle cx='20' cy='20' r='18.5' style='fill:none;stroke:%23386b70;stroke-width:3;stroke-linecap:round;stroke-linejoin:round'/%3E%3C/svg%3E"); --icon-checkbox-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40' xml:space='preserve'%3E%3Cpath style='fill:none;stroke:%23386b70;stroke-width:3;stroke-linecap:round;stroke-linejoin:round' d='m26 15-9 11-4-4'/%3E%3C/svg%3E"); --webcam_aspect_ratio: 290/380; } @font-face { font-family: 'Manrope'; src: local("Manrope"), url("./fonts/Manrope/Manrope-Medium.woff2") format("woff2"), url("./fonts/Manrope/Manrope-Medium.ttf") format("truetype"); font-weight: 500; } @font-face { font-family: 'Manrope'; src: local("Manrope"), url("./fonts/Manrope/Manrope-SemiBold.woff2") format("woff2"), url("./fonts/Manrope/Manrope-SemiBold.ttf") format("truetype"); font-weight: 600; } @font-face { font-family: 'Manrope'; src: local("Manrope"), url("./fonts/Manrope/Manrope-Bold.woff2") format("woff2"), url("./fonts/Manrope/Manrope-Bold.ttf") format("truetype"); font-weight: 700; } /* Columns for better content separation ================================================== */ :root { --pc-column-gutter: 2.25rem; } ::selection { background-color: var(--clr-primary); color: var(--clr-white); } .content .entry-content-wrapper { padding-left: 0; padding-right: 0; } @media screen and (min-width: 990px) { .container .container { padding-left: 0; padding-right: 0; } div .av_one_fifth { margin-left: var(--pc-column-gutter); width: 15.2%; --cols: 5; --length: 1; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_one_fourth { margin-left: var(--pc-column-gutter); width: 20.5%; --cols: 4; --length: 1; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_one_third { margin-left: var(--pc-column-gutter); width: 29.333333333333332%; --cols: 3; --length: 1; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_two_fifth { margin-left: var(--pc-column-gutter); width: 36.4%; --cols: 5; --length: 2; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_one_half { margin-left: var(--pc-column-gutter); width: 47%; --cols: 2; --length: 1; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_three_fifth { margin-left: var(--pc-column-gutter); width: 57.599999999999994%; --cols: 5; --length: 3; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_two_third { margin-left: var(--pc-column-gutter); width: 64.66666666666666%; --cols: 3; --length: 2; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_three_fourth { margin-left: var(--pc-column-gutter); width: 73.5%; --cols: 4; --length: 3; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_four_fifth { margin-left: var(--pc-column-gutter); width: 78.8%; --cols: 5; --length: 4; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_one_sixth { margin-left: var(--pc-column-gutter); width: 11.666666666666666%; --cols: 6; --length: 1; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_one_seventh { margin-left: var(--pc-column-gutter); width: 9.142857142857142%; --cols: 7; --length: 1; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_one_eighth { margin-left: var(--pc-column-gutter); width: 7.25%; --cols: 8; --length: 1; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_one_nineth { margin-left: var(--pc-column-gutter); width: 5.777777777777778%; --cols: 9; --length: 1; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } div .av_one_tenth { margin-left: var(--pc-column-gutter); width: 4.6%; --cols: 10; --length: 1; width: calc( ((100% + var(--pc-column-gutter))/ var(--cols) * var(--length)) - var(--pc-column-gutter)); } } body .main_color .button, body .main_color .ajax_controlls a, body .main_color #submit, body .main_color .big_button, body .main_color .contentSlideControlls a, body .main_color #submit, body .main_color input[type='submit'] { background-color: var(--clr-primary); } body .main_color .button:hover, body .main_color .ajax_controlls a:hover, body .main_color #submit:hover, body .main_color .big_button:hover, body .main_color .contentSlideControlls a:hover, body .main_color #submit:hover, body .main_color input[type='submit']:hover { background-color: var(--clr-secondary); } body .main_color a:hover, body .main_color h1 a:hover, body .main_color h2 a:hover, body .main_color h3 a:hover, body .main_color h4 a:hover, body .main_color h5 a:hover, body .main_color h6 a:hover, body .main_color .template-search a.news-content:hover, body .main_color .wp-playlist-item .wp-playlist-caption:hover { color: var(--clr-primary); } /* * * This file should be re-usable across projects! * * Keep that in mind! * */ @use 'sass:map'; .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .ml-0 { margin-left: 0; } .mr-0 { margin-right: 0; } .mb-0 { margin-bottom: 0; } .m-auto { margin: auto; } .mt-auto { margin-top: auto; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .mb-auto { margin-bottom: auto; } .p-0 { padding: 0; } .pt-0 { padding-top: 0; } .pl-0 { padding-left: 0; } .pr-0 { padding-right: 0; } .pb-0 { padding-bottom: 0; } .m-10 { margin: 0.625rem; } .mt-10 { margin-top: 0.625rem; } .mb-10 { margin-bottom: 0.625rem; } .ml-10 { margin-left: 0.625rem; } .mr-10 { margin-right: 0.625rem; } .p-10 { padding: 0.625rem; } .pt-10 { padding-top: 0.625rem; } .pb-10 { padding-bottom: 0.625rem; } .pl-10 { padding-left: 0.625rem; } .pr-10 { padding-right: 0.625rem; } .m-20 { margin: 1.25rem; } .mt-20 { margin-top: 1.25rem; } .mb-20 { margin-bottom: 1.25rem; } .ml-20 { margin-left: 1.25rem; } .mr-20 { margin-right: 1.25rem; } .p-20 { padding: 1.25rem; } .pt-20 { padding-top: 1.25rem; } .pb-20 { padding-bottom: 1.25rem; } .pl-20 { padding-left: 1.25rem; } .pr-20 { padding-right: 1.25rem; } .m-30 { margin: 1.875rem; } .mt-30 { margin-top: 1.875rem; } .mb-30 { margin-bottom: 1.875rem; } .ml-30 { margin-left: 1.875rem; } .mr-30 { margin-right: 1.875rem; } .p-30 { padding: 1.875rem; } .pt-30 { padding-top: 1.875rem; } .pb-30 { padding-bottom: 1.875rem; } .pl-30 { padding-left: 1.875rem; } .pr-30 { padding-right: 1.875rem; } .m-40 { margin: 2.5rem; } .mt-40 { margin-top: 2.5rem; } .mb-40 { margin-bottom: 2.5rem; } .ml-40 { margin-left: 2.5rem; } .mr-40 { margin-right: 2.5rem; } .p-40 { padding: 2.5rem; } .pt-40 { padding-top: 2.5rem; } .pb-40 { padding-bottom: 2.5rem; } .pl-40 { padding-left: 2.5rem; } .pr-40 { padding-right: 2.5rem; } .m-50 { margin: 3.125rem; } .mt-50 { margin-top: 3.125rem; } .mb-50 { margin-bottom: 3.125rem; } .ml-50 { margin-left: 3.125rem; } .mr-50 { margin-right: 3.125rem; } .p-50 { padding: 3.125rem; } .pt-50 { padding-top: 3.125rem; } .pb-50 { padding-bottom: 3.125rem; } .pl-50 { padding-left: 3.125rem; } .pr-50 { padding-right: 3.125rem; } .m-60 { margin: 3.75rem; } .mt-60 { margin-top: 3.75rem; } .mb-60 { margin-bottom: 3.75rem; } .ml-60 { margin-left: 3.75rem; } .mr-60 { margin-right: 3.75rem; } .p-60 { padding: 3.75rem; } .pt-60 { padding-top: 3.75rem; } .pb-60 { padding-bottom: 3.75rem; } .pl-60 { padding-left: 3.75rem; } .pr-60 { padding-right: 3.75rem; } .m-70 { margin: 4.375rem; } .mt-70 { margin-top: 4.375rem; } .mb-70 { margin-bottom: 4.375rem; } .ml-70 { margin-left: 4.375rem; } .mr-70 { margin-right: 4.375rem; } .p-70 { padding: 4.375rem; } .pt-70 { padding-top: 4.375rem; } .pb-70 { padding-bottom: 4.375rem; } .pl-70 { padding-left: 4.375rem; } .pr-70 { padding-right: 4.375rem; } .m-80 { margin: 5rem; } .mt-80 { margin-top: 5rem; } .mb-80 { margin-bottom: 5rem; } .ml-80 { margin-left: 5rem; } .mr-80 { margin-right: 5rem; } .p-80 { padding: 5rem; } .pt-80 { padding-top: 5rem; } .pb-80 { padding-bottom: 5rem; } .pl-80 { padding-left: 5rem; } .pr-80 { padding-right: 5rem; } .m-90 { margin: 5.625rem; } .mt-90 { margin-top: 5.625rem; } .mb-90 { margin-bottom: 5.625rem; } .ml-90 { margin-left: 5.625rem; } .mr-90 { margin-right: 5.625rem; } .p-90 { padding: 5.625rem; } .pt-90 { padding-top: 5.625rem; } .pb-90 { padding-bottom: 5.625rem; } .pl-90 { padding-left: 5.625rem; } .pr-90 { padding-right: 5.625rem; } .m-100 { margin: 6.25rem; } .mt-100 { margin-top: 6.25rem; } .mb-100 { margin-bottom: 6.25rem; } .ml-100 { margin-left: 6.25rem; } .mr-100 { margin-right: 6.25rem; } .p-100 { padding: 6.25rem; } .pt-100 { padding-top: 6.25rem; } .pb-100 { padding-bottom: 6.25rem; } .pl-100 { padding-left: 6.25rem; } .pr-100 { padding-right: 6.25rem; } .m-110 { margin: 6.875rem; } .mt-110 { margin-top: 6.875rem; } .mb-110 { margin-bottom: 6.875rem; } .ml-110 { margin-left: 6.875rem; } .mr-110 { margin-right: 6.875rem; } .p-110 { padding: 6.875rem; } .pt-110 { padding-top: 6.875rem; } .pb-110 { padding-bottom: 6.875rem; } .pl-110 { padding-left: 6.875rem; } .pr-110 { padding-right: 6.875rem; } .m-120 { margin: 7.5rem; } .mt-120 { margin-top: 7.5rem; } .mb-120 { margin-bottom: 7.5rem; } .ml-120 { margin-left: 7.5rem; } .mr-120 { margin-right: 7.5rem; } .p-120 { padding: 7.5rem; } .pt-120 { padding-top: 7.5rem; } .pb-120 { padding-bottom: 7.5rem; } .pl-120 { padding-left: 7.5rem; } .pr-120 { padding-right: 7.5rem; } @media (min-width: 768px) { .m-md-0 { margin: 0; } .mt-md-0 { margin-top: 0; } .ml-md-0 { margin-left: 0; } .mr-md-0 { margin-right: 0; } .mb-md-0 { margin-bottom: 0; } .m-md-auto { margin: auto; } .mt-md-auto { margin-top: auto; } .ml-md-auto { margin-left: auto; } .mr-md-auto { margin-right: auto; } .mb-md-auto { margin-bottom: auto; } .p-md-0 { padding: 0; } .pt-md-0 { padding-top: 0; } .pl-md-0 { padding-left: 0; } .pr-md-0 { padding-right: 0; } .pb-md-0 { padding-bottom: 0; } .m-md-10 { margin: 0.625rem; } .mt-md-10 { margin-top: 0.625rem; } .mb-md-10 { margin-bottom: 0.625rem; } .ml-md-10 { margin-left: 0.625rem; } .mr-md-10 { margin-right: 0.625rem; } .p-md-10 { padding: 0.625rem; } .pt-md-10 { padding-top: 0.625rem; } .pb-md-10 { padding-bottom: 0.625rem; } .pl-md-10 { padding-left: 0.625rem; } .pr-md-10 { padding-right: 0.625rem; } .m-md-20 { margin: 1.25rem; } .mt-md-20 { margin-top: 1.25rem; } .mb-md-20 { margin-bottom: 1.25rem; } .ml-md-20 { margin-left: 1.25rem; } .mr-md-20 { margin-right: 1.25rem; } .p-md-20 { padding: 1.25rem; } .pt-md-20 { padding-top: 1.25rem; } .pb-md-20 { padding-bottom: 1.25rem; } .pl-md-20 { padding-left: 1.25rem; } .pr-md-20 { padding-right: 1.25rem; } .m-md-30 { margin: 1.875rem; } .mt-md-30 { margin-top: 1.875rem; } .mb-md-30 { margin-bottom: 1.875rem; } .ml-md-30 { margin-left: 1.875rem; } .mr-md-30 { margin-right: 1.875rem; } .p-md-30 { padding: 1.875rem; } .pt-md-30 { padding-top: 1.875rem; } .pb-md-30 { padding-bottom: 1.875rem; } .pl-md-30 { padding-left: 1.875rem; } .pr-md-30 { padding-right: 1.875rem; } .m-md-40 { margin: 2.5rem; } .mt-md-40 { margin-top: 2.5rem; } .mb-md-40 { margin-bottom: 2.5rem; } .ml-md-40 { margin-left: 2.5rem; } .mr-md-40 { margin-right: 2.5rem; } .p-md-40 { padding: 2.5rem; } .pt-md-40 { padding-top: 2.5rem; } .pb-md-40 { padding-bottom: 2.5rem; } .pl-md-40 { padding-left: 2.5rem; } .pr-md-40 { padding-right: 2.5rem; } .m-md-50 { margin: 3.125rem; } .mt-md-50 { margin-top: 3.125rem; } .mb-md-50 { margin-bottom: 3.125rem; } .ml-md-50 { margin-left: 3.125rem; } .mr-md-50 { margin-right: 3.125rem; } .p-md-50 { padding: 3.125rem; } .pt-md-50 { padding-top: 3.125rem; } .pb-md-50 { padding-bottom: 3.125rem; } .pl-md-50 { padding-left: 3.125rem; } .pr-md-50 { padding-right: 3.125rem; } .m-md-60 { margin: 3.75rem; } .mt-md-60 { margin-top: 3.75rem; } .mb-md-60 { margin-bottom: 3.75rem; } .ml-md-60 { margin-left: 3.75rem; } .mr-md-60 { margin-right: 3.75rem; } .p-md-60 { padding: 3.75rem; } .pt-md-60 { padding-top: 3.75rem; } .pb-md-60 { padding-bottom: 3.75rem; } .pl-md-60 { padding-left: 3.75rem; } .pr-md-60 { padding-right: 3.75rem; } .m-md-70 { margin: 4.375rem; } .mt-md-70 { margin-top: 4.375rem; } .mb-md-70 { margin-bottom: 4.375rem; } .ml-md-70 { margin-left: 4.375rem; } .mr-md-70 { margin-right: 4.375rem; } .p-md-70 { padding: 4.375rem; } .pt-md-70 { padding-top: 4.375rem; } .pb-md-70 { padding-bottom: 4.375rem; } .pl-md-70 { padding-left: 4.375rem; } .pr-md-70 { padding-right: 4.375rem; } .m-md-80 { margin: 5rem; } .mt-md-80 { margin-top: 5rem; } .mb-md-80 { margin-bottom: 5rem; } .ml-md-80 { margin-left: 5rem; } .mr-md-80 { margin-right: 5rem; } .p-md-80 { padding: 5rem; } .pt-md-80 { padding-top: 5rem; } .pb-md-80 { padding-bottom: 5rem; } .pl-md-80 { padding-left: 5rem; } .pr-md-80 { padding-right: 5rem; } .m-md-90 { margin: 5.625rem; } .mt-md-90 { margin-top: 5.625rem; } .mb-md-90 { margin-bottom: 5.625rem; } .ml-md-90 { margin-left: 5.625rem; } .mr-md-90 { margin-right: 5.625rem; } .p-md-90 { padding: 5.625rem; } .pt-md-90 { padding-top: 5.625rem; } .pb-md-90 { padding-bottom: 5.625rem; } .pl-md-90 { padding-left: 5.625rem; } .pr-md-90 { padding-right: 5.625rem; } .m-md-100 { margin: 6.25rem; } .mt-md-100 { margin-top: 6.25rem; } .mb-md-100 { margin-bottom: 6.25rem; } .ml-md-100 { margin-left: 6.25rem; } .mr-md-100 { margin-right: 6.25rem; } .p-md-100 { padding: 6.25rem; } .pt-md-100 { padding-top: 6.25rem; } .pb-md-100 { padding-bottom: 6.25rem; } .pl-md-100 { padding-left: 6.25rem; } .pr-md-100 { padding-right: 6.25rem; } .m-md-110 { margin: 6.875rem; } .mt-md-110 { margin-top: 6.875rem; } .mb-md-110 { margin-bottom: 6.875rem; } .ml-md-110 { margin-left: 6.875rem; } .mr-md-110 { margin-right: 6.875rem; } .p-md-110 { padding: 6.875rem; } .pt-md-110 { padding-top: 6.875rem; } .pb-md-110 { padding-bottom: 6.875rem; } .pl-md-110 { padding-left: 6.875rem; } .pr-md-110 { padding-right: 6.875rem; } .m-md-120 { margin: 7.5rem; } .mt-md-120 { margin-top: 7.5rem; } .mb-md-120 { margin-bottom: 7.5rem; } .ml-md-120 { margin-left: 7.5rem; } .mr-md-120 { margin-right: 7.5rem; } .p-md-120 { padding: 7.5rem; } .pt-md-120 { padding-top: 7.5rem; } .pb-md-120 { padding-bottom: 7.5rem; } .pl-md-120 { padding-left: 7.5rem; } .pr-md-120 { padding-right: 7.5rem; } } /** * * short hand for @media screen and (min-width: xxxxx) * * * use @include mq($desktop) * */ .photoconsent-card { background: var(--clr-white); border-radius: 4px; background-color: white; box-shadow: var(--drop-shadow); padding: 1.25rem 1.5rem 1.5rem 6.25rem; } .pill-button { display: block; border-radius: var(--border-radius); box-shadow: 0px 2px 8px 0px rgba(28, 43, 72, 0.1); min-width: 9.375rem; min-width: clamp(6rem, 9.375rem, 100%); padding: 0.5rem 1rem 0.4735rem; font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--clr-white); text-align: center; line-height: 1.65; background-color: var(--clr-primary); transition: background-color 200ms; cursor: pointer; } .pill-button:is(button) { appearance: none; border: none; cursor: pointer; line-height: 1.65; } .pill-button:hover { background-color: var(--clr-primary-dark); text-decoration: none; color: var(--clr-white); } .pill-button:active, .pill-button:focus { background-color: var(--clr-primary-dark); } .pill-button:disabled, .pill-button.disabled { pointer-events: none; background-color: #99aac4; user-select: none; } .pill-button.pill-button-micro { padding: 0.5rem 0.75rem; min-width: unset; } .pill-button.pill-button-big { font-weight: var(--weight-bold); padding: 1.25rem 1.5rem; } .pill-button.faded { background-color: #99aac4; } .pill-button.btn-semi-transparent { opacity: 0.5; } .pill-button.btn-semi-transparent:hover { opacity: 1; } .pill-button.has-icon { display: flex; justify-content: center; gap: 0.5rem; align-items: center; white-space: nowrap; } .pill-button .icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .pill-button .icon svg { width: 100%; height: auto; } body .main_color .photoconsent_list_button a { display: block; border-radius: var(--border-radius); box-shadow: 0px 2px 8px 0px rgba(28, 43, 72, 0.1); min-width: 9.375rem; min-width: clamp(6rem, 9.375rem, 100%); padding: 0.5rem 1rem 0.4735rem; font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--clr-white); text-align: center; line-height: 1.65; background-color: var(--clr-primary); transition: background-color 200ms; cursor: pointer; } body .main_color .photoconsent_list_button a:is(button) { appearance: none; border: none; cursor: pointer; line-height: 1.65; } body .main_color .photoconsent_list_button a:hover { background-color: var(--clr-primary-dark); text-decoration: none; color: var(--clr-white); } body .main_color .photoconsent_list_button a:active, body .main_color .photoconsent_list_button a:focus { background-color: var(--clr-primary-dark); } body .main_color .photoconsent_list_button a:disabled, body .main_color .photoconsent_list_button a.disabled { pointer-events: none; background-color: #99aac4; user-select: none; } body .main_color .photoconsent_list_button a.pill-button-micro { padding: 0.5rem 0.75rem; min-width: unset; } body .main_color .photoconsent_list_button a.pill-button-big { font-weight: var(--weight-bold); padding: 1.25rem 1.5rem; } body .main_color .photoconsent_list_button a.faded { background-color: #99aac4; } body .main_color .photoconsent_list_button a.btn-semi-transparent { opacity: 0.5; } body .main_color .photoconsent_list_button a.btn-semi-transparent:hover { opacity: 1; } body .main_color .photoconsent_list_button a.has-icon { display: flex; justify-content: center; gap: 0.5rem; align-items: center; white-space: nowrap; } body .main_color .photoconsent_list_button a .icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } body .main_color .photoconsent_list_button a .icon svg { width: 100%; height: auto; } .button-row { display: flex; flex-wrap: wrap; justify-content: end; gap: 1rem; margin-block: 2rem; } @media screen and (min-width: 990px) { .button-row { margin-block: 1rem; } } .tippy-template { display: none; } .tippy-content { padding: 0.6125rem 1.25rem; font-family: var(--font-open-sans); font-weight: var(--weight-semibold); } .tippy-content .tippy-template { display: flex; margin-left: -0.5rem; margin-right: -0.5rem; align-items: center; } .tippy-content .close-tippy { position: absolute; top: 0.25rem; right: 0.25rem; margin-left: 0.5rem; border-radius: 100px; background-color: #333; padding: 0.2rem; cursor: pointer; } .tippy-content .close-tippy svg { display: block; stroke: #c3d1de; width: 18px; height: auto; } .tippy-content input[type="text"] { margin-bottom: 0 !important; background: #343434 !important; color: #fff !important; } .tippy-content input[type="text"]::placeholder { color: #a7a7a7 !important; } .tippy-content span.title { font-weight: var(--weight-semibold); font-size: 10px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .pc-square { display: inline-block; width: 1.6875rem; height: 1.6875rem; background-color: var(--clr-primary); border-radius: var(--border-radius); color: var(--clr-white); text-align: center; font-weight: var(--weight-semibold); font-size: 0.875rem; } /** * * Page titles * * .title-normal * e.g. @ min-konto/opret-samtykke/ the h1"Opret nyt samtykke" and the h2"dine skabeloner" * * .title-small * the little title below the bigger section title * e.g. @ min-konto/opret-samtykke/ the "du har 3 skabelone title" * */ .main_color .title-normal { font-size: 1.625rem; color: var(--clr-text); } .main_color .title-small { font-size: 1rem; color: var(--clr-blue-medium); } #top .main_color .photoconsent_section, #top .main_color form, #top .consent_content { /** * * used on the "old" consent styles * (still in use in PDF and consent creation screen) * "bottom-border only" style * */ } #top .main_color .photoconsent_section input[type="submit"], #top .main_color .photoconsent_section button, #top .main_color form input[type="submit"], #top .main_color form button, #top .consent_content input[type="submit"], #top .consent_content button { display: block; border-radius: var(--border-radius); box-shadow: 0px 2px 8px 0px rgba(28, 43, 72, 0.1); min-width: 9.375rem; min-width: clamp(6rem, 9.375rem, 100%); padding: 0.5rem 1rem 0.4735rem; font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--clr-white); text-align: center; line-height: 1.65; background-color: var(--clr-primary); transition: background-color 200ms; cursor: pointer; } #top .main_color .photoconsent_section input[type="submit"]:is(button), #top .main_color .photoconsent_section button:is(button), #top .main_color form input[type="submit"]:is(button), #top .main_color form button:is(button), #top .consent_content input[type="submit"]:is(button), #top .consent_content button:is(button) { appearance: none; border: none; cursor: pointer; line-height: 1.65; } #top .main_color .photoconsent_section input[type="submit"]:hover, #top .main_color .photoconsent_section button:hover, #top .main_color form input[type="submit"]:hover, #top .main_color form button:hover, #top .consent_content input[type="submit"]:hover, #top .consent_content button:hover { background-color: var(--clr-primary-dark); text-decoration: none; color: var(--clr-white); } #top .main_color .photoconsent_section input[type="submit"]:active, #top .main_color .photoconsent_section input[type="submit"]:focus, #top .main_color .photoconsent_section button:active, #top .main_color .photoconsent_section button:focus, #top .main_color form input[type="submit"]:active, #top .main_color form input[type="submit"]:focus, #top .main_color form button:active, #top .main_color form button:focus, #top .consent_content input[type="submit"]:active, #top .consent_content input[type="submit"]:focus, #top .consent_content button:active, #top .consent_content button:focus { background-color: var(--clr-primary-dark); } #top .main_color .photoconsent_section input[type="submit"]:disabled, #top .main_color .photoconsent_section input[type="submit"].disabled, #top .main_color .photoconsent_section button:disabled, #top .main_color .photoconsent_section button.disabled, #top .main_color form input[type="submit"]:disabled, #top .main_color form input[type="submit"].disabled, #top .main_color form button:disabled, #top .main_color form button.disabled, #top .consent_content input[type="submit"]:disabled, #top .consent_content input[type="submit"].disabled, #top .consent_content button:disabled, #top .consent_content button.disabled { pointer-events: none; background-color: #99aac4; user-select: none; } #top .main_color .photoconsent_section input[type="submit"].pill-button-micro, #top .main_color .photoconsent_section button.pill-button-micro, #top .main_color form input[type="submit"].pill-button-micro, #top .main_color form button.pill-button-micro, #top .consent_content input[type="submit"].pill-button-micro, #top .consent_content button.pill-button-micro { padding: 0.5rem 0.75rem; min-width: unset; } #top .main_color .photoconsent_section input[type="submit"].pill-button-big, #top .main_color .photoconsent_section button.pill-button-big, #top .main_color form input[type="submit"].pill-button-big, #top .main_color form button.pill-button-big, #top .consent_content input[type="submit"].pill-button-big, #top .consent_content button.pill-button-big { font-weight: var(--weight-bold); padding: 1.25rem 1.5rem; } #top .main_color .photoconsent_section input[type="submit"].faded, #top .main_color .photoconsent_section button.faded, #top .main_color form input[type="submit"].faded, #top .main_color form button.faded, #top .consent_content input[type="submit"].faded, #top .consent_content button.faded { background-color: #99aac4; } #top .main_color .photoconsent_section input[type="submit"].btn-semi-transparent, #top .main_color .photoconsent_section button.btn-semi-transparent, #top .main_color form input[type="submit"].btn-semi-transparent, #top .main_color form button.btn-semi-transparent, #top .consent_content input[type="submit"].btn-semi-transparent, #top .consent_content button.btn-semi-transparent { opacity: 0.5; } #top .main_color .photoconsent_section input[type="submit"].btn-semi-transparent:hover, #top .main_color .photoconsent_section button.btn-semi-transparent:hover, #top .main_color form input[type="submit"].btn-semi-transparent:hover, #top .main_color form button.btn-semi-transparent:hover, #top .consent_content input[type="submit"].btn-semi-transparent:hover, #top .consent_content button.btn-semi-transparent:hover { opacity: 1; } #top .main_color .photoconsent_section input[type="submit"].has-icon, #top .main_color .photoconsent_section button.has-icon, #top .main_color form input[type="submit"].has-icon, #top .main_color form button.has-icon, #top .consent_content input[type="submit"].has-icon, #top .consent_content button.has-icon { display: flex; justify-content: center; gap: 0.5rem; align-items: center; white-space: nowrap; } #top .main_color .photoconsent_section input[type="submit"] .icon, #top .main_color .photoconsent_section button .icon, #top .main_color form input[type="submit"] .icon, #top .main_color form button .icon, #top .consent_content input[type="submit"] .icon, #top .consent_content button .icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } #top .main_color .photoconsent_section input[type="submit"] .icon svg, #top .main_color .photoconsent_section button .icon svg, #top .main_color form input[type="submit"] .icon svg, #top .main_color form button .icon svg, #top .consent_content input[type="submit"] .icon svg, #top .consent_content button .icon svg { width: 100%; height: auto; } #top .main_color .photoconsent_section .input-text, #top .main_color .photoconsent_section input[type="text"], #top .main_color .photoconsent_section input[type="input"], #top .main_color .photoconsent_section input[type="password"], #top .main_color .photoconsent_section input[type="email"], #top .main_color .photoconsent_section input[type="number"], #top .main_color .photoconsent_section input[type="url"], #top .main_color .photoconsent_section input[type="tel"], #top .main_color .photoconsent_section textarea, #top .main_color .photoconsent_section select, #top .main_color form .input-text, #top .main_color form input[type="text"], #top .main_color form input[type="input"], #top .main_color form input[type="password"], #top .main_color form input[type="email"], #top .main_color form input[type="number"], #top .main_color form input[type="url"], #top .main_color form input[type="tel"], #top .main_color form textarea, #top .main_color form select, #top .consent_content .input-text, #top .consent_content input[type="text"], #top .consent_content input[type="input"], #top .consent_content input[type="password"], #top .consent_content input[type="email"], #top .consent_content input[type="number"], #top .consent_content input[type="url"], #top .consent_content input[type="tel"], #top .consent_content textarea, #top .consent_content select { -webkit-appearance: none; border: none; border-bottom: 2px solid #c3d1de; padding: 8px 6px; outline: none; font-family: var(--font-manrop); font-weight: var(--weight-regular); font-size: 0.875rem; color: var(--clr-text); margin: 0 0 1.25rem; width: 100%; display: block; background: transparent; border-radius: 0px; } #top .main_color .photoconsent_section .input-text ::placeholder, #top .main_color .photoconsent_section input[type="text"] ::placeholder, #top .main_color .photoconsent_section input[type="input"] ::placeholder, #top .main_color .photoconsent_section input[type="password"] ::placeholder, #top .main_color .photoconsent_section input[type="email"] ::placeholder, #top .main_color .photoconsent_section input[type="number"] ::placeholder, #top .main_color .photoconsent_section input[type="url"] ::placeholder, #top .main_color .photoconsent_section input[type="tel"] ::placeholder, #top .main_color .photoconsent_section textarea ::placeholder, #top .main_color .photoconsent_section select ::placeholder, #top .main_color form .input-text ::placeholder, #top .main_color form input[type="text"] ::placeholder, #top .main_color form input[type="input"] ::placeholder, #top .main_color form input[type="password"] ::placeholder, #top .main_color form input[type="email"] ::placeholder, #top .main_color form input[type="number"] ::placeholder, #top .main_color form input[type="url"] ::placeholder, #top .main_color form input[type="tel"] ::placeholder, #top .main_color form textarea ::placeholder, #top .main_color form select ::placeholder, #top .consent_content .input-text ::placeholder, #top .consent_content input[type="text"] ::placeholder, #top .consent_content input[type="input"] ::placeholder, #top .consent_content input[type="password"] ::placeholder, #top .consent_content input[type="email"] ::placeholder, #top .consent_content input[type="number"] ::placeholder, #top .consent_content input[type="url"] ::placeholder, #top .consent_content input[type="tel"] ::placeholder, #top .consent_content textarea ::placeholder, #top .consent_content select ::placeholder { color: red !important; } #top .main_color .photoconsent_section .input-text:not([disabled]):hover, #top .main_color .photoconsent_section input[type="text"]:not([disabled]):hover, #top .main_color .photoconsent_section input[type="input"]:not([disabled]):hover, #top .main_color .photoconsent_section input[type="password"]:not([disabled]):hover, #top .main_color .photoconsent_section input[type="email"]:not([disabled]):hover, #top .main_color .photoconsent_section input[type="number"]:not([disabled]):hover, #top .main_color .photoconsent_section input[type="url"]:not([disabled]):hover, #top .main_color .photoconsent_section input[type="tel"]:not([disabled]):hover, #top .main_color .photoconsent_section textarea:not([disabled]):hover, #top .main_color .photoconsent_section select:not([disabled]):hover, #top .main_color form .input-text:not([disabled]):hover, #top .main_color form input[type="text"]:not([disabled]):hover, #top .main_color form input[type="input"]:not([disabled]):hover, #top .main_color form input[type="password"]:not([disabled]):hover, #top .main_color form input[type="email"]:not([disabled]):hover, #top .main_color form input[type="number"]:not([disabled]):hover, #top .main_color form input[type="url"]:not([disabled]):hover, #top .main_color form input[type="tel"]:not([disabled]):hover, #top .main_color form textarea:not([disabled]):hover, #top .main_color form select:not([disabled]):hover, #top .consent_content .input-text:not([disabled]):hover, #top .consent_content input[type="text"]:not([disabled]):hover, #top .consent_content input[type="input"]:not([disabled]):hover, #top .consent_content input[type="password"]:not([disabled]):hover, #top .consent_content input[type="email"]:not([disabled]):hover, #top .consent_content input[type="number"]:not([disabled]):hover, #top .consent_content input[type="url"]:not([disabled]):hover, #top .consent_content input[type="tel"]:not([disabled]):hover, #top .consent_content textarea:not([disabled]):hover, #top .consent_content select:not([disabled]):hover { border-color: var(--clr-light-primary); } #top .main_color .photoconsent_section .input-text:not([disabled]):active, #top .main_color .photoconsent_section .input-text:not([disabled]):focus, #top .main_color .photoconsent_section input[type="text"]:not([disabled]):active, #top .main_color .photoconsent_section input[type="text"]:not([disabled]):focus, #top .main_color .photoconsent_section input[type="input"]:not([disabled]):active, #top .main_color .photoconsent_section input[type="input"]:not([disabled]):focus, #top .main_color .photoconsent_section input[type="password"]:not([disabled]):active, #top .main_color .photoconsent_section input[type="password"]:not([disabled]):focus, #top .main_color .photoconsent_section input[type="email"]:not([disabled]):active, #top .main_color .photoconsent_section input[type="email"]:not([disabled]):focus, #top .main_color .photoconsent_section input[type="number"]:not([disabled]):active, #top .main_color .photoconsent_section input[type="number"]:not([disabled]):focus, #top .main_color .photoconsent_section input[type="url"]:not([disabled]):active, #top .main_color .photoconsent_section input[type="url"]:not([disabled]):focus, #top .main_color .photoconsent_section input[type="tel"]:not([disabled]):active, #top .main_color .photoconsent_section input[type="tel"]:not([disabled]):focus, #top .main_color .photoconsent_section textarea:not([disabled]):active, #top .main_color .photoconsent_section textarea:not([disabled]):focus, #top .main_color .photoconsent_section select:not([disabled]):active, #top .main_color .photoconsent_section select:not([disabled]):focus, #top .main_color form .input-text:not([disabled]):active, #top .main_color form .input-text:not([disabled]):focus, #top .main_color form input[type="text"]:not([disabled]):active, #top .main_color form input[type="text"]:not([disabled]):focus, #top .main_color form input[type="input"]:not([disabled]):active, #top .main_color form input[type="input"]:not([disabled]):focus, #top .main_color form input[type="password"]:not([disabled]):active, #top .main_color form input[type="password"]:not([disabled]):focus, #top .main_color form input[type="email"]:not([disabled]):active, #top .main_color form input[type="email"]:not([disabled]):focus, #top .main_color form input[type="number"]:not([disabled]):active, #top .main_color form input[type="number"]:not([disabled]):focus, #top .main_color form input[type="url"]:not([disabled]):active, #top .main_color form input[type="url"]:not([disabled]):focus, #top .main_color form input[type="tel"]:not([disabled]):active, #top .main_color form input[type="tel"]:not([disabled]):focus, #top .main_color form textarea:not([disabled]):active, #top .main_color form textarea:not([disabled]):focus, #top .main_color form select:not([disabled]):active, #top .main_color form select:not([disabled]):focus, #top .consent_content .input-text:not([disabled]):active, #top .consent_content .input-text:not([disabled]):focus, #top .consent_content input[type="text"]:not([disabled]):active, #top .consent_content input[type="text"]:not([disabled]):focus, #top .consent_content input[type="input"]:not([disabled]):active, #top .consent_content input[type="input"]:not([disabled]):focus, #top .consent_content input[type="password"]:not([disabled]):active, #top .consent_content input[type="password"]:not([disabled]):focus, #top .consent_content input[type="email"]:not([disabled]):active, #top .consent_content input[type="email"]:not([disabled]):focus, #top .consent_content input[type="number"]:not([disabled]):active, #top .consent_content input[type="number"]:not([disabled]):focus, #top .consent_content input[type="url"]:not([disabled]):active, #top .consent_content input[type="url"]:not([disabled]):focus, #top .consent_content input[type="tel"]:not([disabled]):active, #top .consent_content input[type="tel"]:not([disabled]):focus, #top .consent_content textarea:not([disabled]):active, #top .consent_content textarea:not([disabled]):focus, #top .consent_content select:not([disabled]):active, #top .consent_content select:not([disabled]):focus { color: var(--clr-text); box-shadow: none; border-color: var(--clr-light-primary); } #top .main_color .photoconsent_section label.with-text .input-text, #top .main_color .photoconsent_section label.with-text input[type="text"], #top .main_color .photoconsent_section label.with-text input[type="input"], #top .main_color .photoconsent_section label.with-text input[type="password"], #top .main_color .photoconsent_section label.with-text input[type="email"], #top .main_color .photoconsent_section label.with-text input[type="number"], #top .main_color .photoconsent_section label.with-text input[type="url"], #top .main_color .photoconsent_section label.with-text input[type="tel"], #top .main_color .photoconsent_section label.with-text textarea, #top .main_color .photoconsent_section label.with-text select, #top .main_color form label.with-text .input-text, #top .main_color form label.with-text input[type="text"], #top .main_color form label.with-text input[type="input"], #top .main_color form label.with-text input[type="password"], #top .main_color form label.with-text input[type="email"], #top .main_color form label.with-text input[type="number"], #top .main_color form label.with-text input[type="url"], #top .main_color form label.with-text input[type="tel"], #top .main_color form label.with-text textarea, #top .main_color form label.with-text select, #top .consent_content label.with-text .input-text, #top .consent_content label.with-text input[type="text"], #top .consent_content label.with-text input[type="input"], #top .consent_content label.with-text input[type="password"], #top .consent_content label.with-text input[type="email"], #top .consent_content label.with-text input[type="number"], #top .consent_content label.with-text input[type="url"], #top .consent_content label.with-text input[type="tel"], #top .consent_content label.with-text textarea, #top .consent_content label.with-text select { margin-block-end: 0.2rem; } #top .main_color .photoconsent_section label.with-text > span, #top .main_color form label.with-text > span, #top .consent_content label.with-text > span { font-size: 0.75rem; padding-inline: 1.125rem; } #top .main_color .photoconsent_section label.with-text input[type="file"], #top .main_color form label.with-text input[type="file"], #top .consent_content label.with-text input[type="file"] { display: block; } #top .main_color input[type="search"] { box-shadow: var(--drop-shadow); margin-bottom: 0; background-image: var(--icon-search); background-position: 0.8125rem center; background-repeat: no-repeat; background-color: var(--clr-white); border-radius: var(--border-radius); border: none; padding: 0.5rem 1rem 0.4735rem; padding-left: 3rem; line-height: 1.6; } #top.form-signing-view .main_color .photoconsent_section .input-text, #top.form-signing-view .main_color .photoconsent_section input[type="text"], #top.form-signing-view .main_color .photoconsent_section input[type="input"], #top.form-signing-view .main_color .photoconsent_section input[type="password"], #top.form-signing-view .main_color .photoconsent_section input[type="email"], #top.form-signing-view .main_color .photoconsent_section input[type="number"], #top.form-signing-view .main_color .photoconsent_section input[type="url"], #top.form-signing-view .main_color .photoconsent_section input[type="tel"], #top.form-signing-view .main_color .photoconsent_section textarea, #top.form-signing-view .main_color .photoconsent_section select, #top.form-signing-view .main_color form .input-text, #top.form-signing-view .main_color form input[type="text"], #top.form-signing-view .main_color form input[type="input"], #top.form-signing-view .main_color form input[type="password"], #top.form-signing-view .main_color form input[type="email"], #top.form-signing-view .main_color form input[type="number"], #top.form-signing-view .main_color form input[type="url"], #top.form-signing-view .main_color form input[type="tel"], #top.form-signing-view .main_color form textarea, #top.form-signing-view .main_color form select, #top.form-signing-view .consent_content .input-text, #top.form-signing-view .consent_content input[type="text"], #top.form-signing-view .consent_content input[type="input"], #top.form-signing-view .consent_content input[type="password"], #top.form-signing-view .consent_content input[type="email"], #top.form-signing-view .consent_content input[type="number"], #top.form-signing-view .consent_content input[type="url"], #top.form-signing-view .consent_content input[type="tel"], #top.form-signing-view .consent_content textarea, #top.form-signing-view .consent_content select { height: unset; margin-bottom: 0; padding: 0.75rem 1rem; line-height: 1.5; background: #fff; border: none; border-radius: var(--border-radius); } html { font-family: 'Open Sans', sans-serif; } body { font-family: 'Open Sans', sans-serif; } body .togglecontainer { font-size: 14px; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-titles); } button { font-family: 'Open Sans', sans-serif; } .container_wrap { border: none; } .responsive .photoconsent_page .container, .responsive .single-portfolio .container { max-width: 1300px; } .responsive .photoconsent_page .container .container, .responsive .single-portfolio .container .container { padding-left: 0; padding-right: 0; } .responsive .photoconsent_page .content .entry-content-wrapper { padding-left: 0; } .single-portfolio, .photoconsent_page { font-size: 16px; line-height: 23px; } .html_header_top.html_header_sticky body.photoconsent_page #main, .html_header_top.html_header_sticky body.single-portfolio #main { padding-top: 0 !important; } .mfp-wrap { top: 5vH !important; position: fixed !important; height: 80vH !important; -webkit-transform: translate(-50%); -moz-transform: translate(-50%); transform: translate(-50%); left: 50%; } .mfp-container { display: grid; align-items: center; } .mfp-container::before { display: none !important; } .mfp-iframe-scaler { padding-top: 64.25%; } .mfp-iframe-scaler iframe { min-height: 80vH; } .main_menu .menu-item-language a { padding: 0 6px; font-size: 12px !important; } .main_menu .menu-item-language + .menu-item-language a:before { /* line-height: 90px; */ content: '/'; width: auto; display: inline-block; float: left; padding: 0; margin-left: -9px; color: #acc6c7 !important; } .template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 { text-transform: none; } .photoconsent_page .sidebar, .single-portfolio .sidebar { background: var(--clr-primary); } #top .container .guest_user.av-content-small.units { width: 100%; } #top .sidebar_left.sidebar_align_left .widget_nav_menu ul.__removed_at_multiuser > li { padding: 0 0 0 40px; background-repeat: no-repeat; background-size: 22px; background-color: transparent; background-position: 6px 8px; border-radius: 10px; margin: 5% 5% 5% 0; width: 82%; } #top .sidebar_left.sidebar_align_left .widget_nav_menu ul.__removed_at_multiuser > li:hover { /* width: 100%; */ box-shadow: none; background-color: #3a797d; top: 0; /* margin: 0; */ padding: 0 0 0 40px; /* width: 82%; */ } #top .sidebar_left.sidebar_align_left .widget_nav_menu ul.__removed_at_multiuser:first-child > .current-menu-item, #top .sidebar_left.sidebar_align_left .widget_nav_menu ul.__removed_at_multiuser:first-child > .current_page_item, #top .sidebar_left.sidebar_align_left .widget_nav_menu ul.__removed_at_multiuser:first-child > .current-menu-ancestor { /* width: 100%; */ box-shadow: none; background-color: #3a797d; top: 0; /* margin: 0; */ padding: 0 0 0 40px; /* width: 82%; */ } /* .sidebar_left.sidebar_align_left .widget_nav_menu ul:first-child>li { */ /* width: 100%; */ /* } */ .photoconsent_page .sidebar, .single-portfolio .sidebar { padding-top: 0; } .photoconsent_page .sidebar_left .inner_sidebar, .single-portfolio .sidebar_left .inner_sidebar { margin-left: 0px; margin-right: 0px; } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu { margin-left: 30px; margin-left: 6%; text-align: left; } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu ul { margin-top: 0px; padding-top: 58px; border-top: 1px solid #bad0d1; } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu ul > li.dashboard { background-image: url(/wp-content/uploads/Overblik.svg); } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu ul > li.create { background-image: url(/wp-content/uploads/Opret.svg); } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu ul > li.customize { background-image: url(/wp-content/uploads/CCostumized.svg); } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu ul > li.list { background-image: url(/wp-content/uploads/Oprettede.svg); } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu ul > li.signed { background-image: url(/wp-content/uploads/Godkendte.svg); } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu ul > li.faq { background-image: url(/wp-content/uploads/FAQ.svg); } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu ul > li.profile { background-image: url(/wp-content/uploads/Profil.svg); } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu ul > li.settings { background-image: url(/wp-content/uploads/Indstillinger.svg); } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu ul > li.logout { background-image: url(/wp-content/uploads/Log-ud.svg); } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu ul > li.separator-menu-bar { border-top: 1px solid #bad0d1; border-radius: 0px; height: 0; text-indent: -99999px; margin: 40px 0%; width: calc(100% - 30px); padding: 0; } /** * * New account pages sidebar design multiuser * */ #top .sidebar.sidebar_left .inner_sidebar > ul { margin: 0; padding: 0; float: none; } #top .sidebar.sidebar_left .widget_nav_menu ul:first-child > .current-menu-item, #top .sidebar.sidebar_left .widget_nav_menu ul:first-child > .current_page_item, #top .sidebar.sidebar_left .widget_nav_menu ul:first-child > .current-menu-ancestor { padding-left: 0; background: transparent; box-shadow: none; } #top .sidebar.sidebar_left .widget_nav_menu ul.menu { padding: 0; } @media screen and (min-width: 768px) { #top .sidebar.sidebar_left .widget_nav_menu ul.menu { display: flex; flex-wrap: wrap; } } @media screen and (min-width: 990px) { #top .sidebar.sidebar_left .widget_nav_menu ul.menu { display: block; padding: 1.5rem 1.815rem; } } #top .sidebar.sidebar_left .widget_nav_menu ul.menu > ul { margin-bottom: 5rem; } #top .sidebar.sidebar_left .widget_nav_menu ul.menu li { font-size: 0.875rem; position: relative; margin-bottom: 0.625rem; } #top .sidebar.sidebar_left .widget_nav_menu ul.menu li a { padding: 0.375rem 0.5rem; } #top .sidebar.sidebar_left .widget_nav_menu ul.menu li.current-menu-item, #top .sidebar.sidebar_left .widget_nav_menu ul.menu li.current_page_item, #top .sidebar.sidebar_left .widget_nav_menu ul.menu li.current-menu-ancestor { width: auto; } #upload_profile_logo { font-size: 14px; } #upload_profile_logo h3, #upload_profile_logo p, #upload_profile_logo div { float: left; text-align: left; width: 100%; clear: both; } #upload_profile_logo #wpua-file-existing { float: left; text-align: left; width: 100%; clear: both; margin-bottom: 20px; height: 40px; } #upload_profile_logo #wpua-preview-existing, #upload_profile_logo #wpua-thumbnail-existing, #upload_profile_logo #wpua-remove-button-existing { clear: none; width: auto; margin-right: 20px; } #upload_profile_logo #wpua-max-upload-existing, #upload_profile_logo #wpua-allowed-files-existing { font-size: 12px; width: 100%; clear: both; line-height: 1.2; float: left; } #upload_profile_logo #wpua-upload-messages-existing { margin-top: 0; } #upload_profile_logo #wpua-undo-button-existing { display: none; } .inputInfoIcon { position: absolute; right: 0; top: 0; background-image: url("../../../wp-content/plugins/photoconsent/img/info.png"); width: 16px; height: 16px; background-size: 100%; margin: 4px; cursor: pointer; } .infoContent { position: absolute; font-size: 0.75rem; line-height: 1.2; background: var(--clr-primary); color: #fff; z-index: 123; right: 0; top: -2.25rem; padding: 0.25rem 0.5rem; box-shadow: var(--drop-shadow); border-radius: var(--border-radius); } #photoconsent_sign { text-align: center; } #photoconsent_sign .signForm { font-size: 18px !important; padding: 12px 40px; margin-left: auto; margin-right: auto; } .centerTextSection { text-align: center; } .sidebar #photoconsent_sidebar_logo { padding: 0; background-repeat: no-repeat; width: 86%; height: 80px; min-height: 80px; background-position: center; margin-top: 30px; margin-bottom: 30px; flex-direction: column; justify-content: center; align-items: center; display: inline-flex; display: flex; margin: 30px auto; } .photoconsent_page .content, .single-portfolio .content { padding-top: 7rem; } .photoconsent_page .content.guest_user, .single-portfolio .content.guest_user { padding-top: 50px; } .photoconsent_page #main main.guest_user::before, .single-portfolio #main main.guest_user::before { display: none !important; } .successMsg, .errorMsg { clear: both; margin: 0; font-size: 14px; font-weight: bold; text-align: center; } .successMsg { color: #33a6ad; } .errorMsg { color: var(--clr-error); } .photoconsent_buttons + .errorMsg, .photoconsent_buttons + .successMsg { float: right; } .variations label { line-height: 1.1; } .woocommerce-Address, ul.woocommerce-error { padding: 12px; } body.single-portfolio #main { padding: 0 !important; } @media screen and (min-width: 990px) { body.single-portfolio #main .main_color .container { display: grid; grid-template-columns: auto minmax(auto, 1300px) auto; } } #top #main .consent-page p .input_placeholder { font-size: inherit; } #top #main .form_field_input { display: inline-block; width: auto; background: transparent; border: none; border-bottom: 1px solid #183d41; color: #183d41; margin: 0; padding: 0; outline: none; padding: 3px 10px 3px 10px; } #top #main .input_placeholder { display: inline-block; width: auto; background: transparent; border: none; border-bottom: 1px solid #183d41; color: #183d41; margin: 0; padding: 0; outline: none; padding: 3px 10px 3px 10px; font-size: 16px; line-height: 23px; padding: 0px 10px 0px 10px !important; width: auto !important; background: transparent !important; font-weight: bold; border: none; padding: 0 !important; font-size: 16px; line-height: 23px; font-size: 14px; line-height: 18px; } #top #main .input_placeholder[data-target-name="pc_page_break"] { width: 100%; display: block; margin-top: 10px; text-align: center; } #top #main .preview_form_fields .input_placeholder { min-width: 100px !important; font-weight: normal; } #top .overLimitWarning { color: red !important; line-height: 1.1 !important; font-size: 13px !important; max-width: 540px !important; width: 100% !important; clear: both !important; } #top .buttonSubscribe { display: block; border-radius: var(--border-radius); box-shadow: 0px 2px 8px 0px rgba(28, 43, 72, 0.1); min-width: 9.375rem; min-width: clamp(6rem, 9.375rem, 100%); padding: 0.5rem 1rem 0.4735rem; font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--clr-white); text-align: center; line-height: 1.65; background-color: var(--clr-primary); transition: background-color 200ms; cursor: pointer; display: inline-block; margin-bottom: 12px; margin-top: 12px; } #top .buttonSubscribe:is(button) { appearance: none; border: none; cursor: pointer; line-height: 1.65; } #top .buttonSubscribe:hover { background-color: var(--clr-primary-dark); text-decoration: none; color: var(--clr-white); } #top .buttonSubscribe:active, #top .buttonSubscribe:focus { background-color: var(--clr-primary-dark); } #top .buttonSubscribe:disabled, #top .buttonSubscribe.disabled { pointer-events: none; background-color: #99aac4; user-select: none; } #top .buttonSubscribe.pill-button-micro { padding: 0.5rem 0.75rem; min-width: unset; } #top .buttonSubscribe.pill-button-big { font-weight: var(--weight-bold); padding: 1.25rem 1.5rem; } #top .buttonSubscribe.faded { background-color: #99aac4; } #top .buttonSubscribe.btn-semi-transparent { opacity: 0.5; } #top .buttonSubscribe.btn-semi-transparent:hover { opacity: 1; } #top .buttonSubscribe.has-icon { display: flex; justify-content: center; gap: 0.5rem; align-items: center; white-space: nowrap; } #top .buttonSubscribe .icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } #top .buttonSubscribe .icon svg { width: 100%; height: auto; } #top #main .consent_content { background: #fff; padding: 40px 20px; display: inline-block; font-size: 14px; line-height: 18px; overflow-wrap: anywhere; } #top #main .consent_content a { text-decoration: underline; } #top #main .consent_content .form_generic_checkbox { margin-right: 12px; } #top #main .consent_content input[type="text"].form_generic_textinput, #top #main .consent_content .form_generic_textarea { border: 1px solid transparent; border-bottom: 1px solid #183d41; background: #d1dfe0; } #top #main .consent_content input[type="text"].form_generic_textinput { display: inline-block; width: auto; margin-bottom: 0px; padding: 2px 4px; } #top #main .top_form_fields { width: 100%; margin: 40px -2px 40px; } #top #main .top_form_fields .input-text, #top #main .top_form_fields input[type="text"], #top #main .top_form_fields input[type="input"], #top #main .top_form_fields input[type="password"], #top #main .top_form_fields input[type="email"], #top #main .top_form_fields input[type="number"], #top #main .top_form_fields input[type="url"], #top #main .top_form_fields input[type="tel"], #top #main .top_form_fields .tooltip { font-weight: var(--font-weight-normal); } #top #main .giver_form_fields { display: inline-block; margin: 20px 0 110px; width: 100%; position: relative; } #top #main .giver_form_fields h3 { margin-bottom: 1.5rem; } #top #main .giver_form_fields .form_field { clear: both; position: relative; display: block; width: 100%; } #top #main .giver_form_fields .form_field label { font-weight: bold; font-size: 0.92em; width: 20%; float: left; /* max-width: 200px; */ } #top #main .giver_form_fields .form_field input[type="file"] { background: transparent; border: none; height: auto; margin-left: 0; padding-left: 0; padding-top: 0; color: #77a2a4; width: 100%; margin: 10px 0; } #top #main .giver_form_fields .form_field .uploadLabel { width: auto; min-width: 0px; margin: 0px 10px 0 0px; font-weight: normal; line-height: 1.66; font-size: 13px; color: #77a2a4; float: none; } #top #main .giver_form_fields .form_field .uploadLabel strong { font-size: inherit; color: inherit; } #top #main .giver_form_fields .form_field.wrap_giver_zip { max-width: 35%; float: left; margin-right: 5%; } #top #main .giver_form_fields .form_field.wrap_giver_city { clear: none; float: left; max-width: 60%; } #top #main .giver_form_fields .form_field.wrap_giver_zip input, #top #main .giver_form_fields .form_field.wrap_giver_city input { width: 100%; } #top #sendToEmailAddress input { border: none; background: transparent; padding: 4px 10px; outline: none; box-shadow: none; border-bottom: 1px solid #33a6ad; } #top #sendToEmailAddress textarea { text-align: left; height: 110px; } #top #main .giver_form_fields .form_field input.error, #top #sendToEmailAddress input.error { border-bottom: 1px solid var(--clr-error); } #top #main .giver_form_fields .form_field .required-field-warning, #top #sendToEmailAddress .required-field-warning { display: none; color: var(--clr-error); } #top #main .giver_form_fields .form_field input.error + .required-field-warning, #top #sendToEmailAddress input.error + .required-field-warning { display: block; } #top #main .giver_form_fields .form_field:has(input.error) label[for], #top #sendToEmailAddress:has(input.error) label[for] { color: var(--clr-error); } #top #main .general_field { margin: 0; /* border: none!important; */ box-shadow: none !important; } #top #main .general_field:focus { margin: 0; /* border: none!important; */ box-shadow: none !important; } #top #main .preview_form_fields { display: inline-block; margin: 20px 0; width: 100%; width: 70%; float: left; } #top #main .logoSection { width: 30%; display: inline-block; float: right; } #top #main .logoSection:empty { min-height: 140px; } #top #main .logoSection img, #top #main .logoSection object { max-width: 100%; width: 100%; height: auto; margin: 0 auto; float: right; padding: 12px; } #top #main .preview_form_fields.half_width_section { width: 48%; } #top #main .preview_form_fields.half_width_section + .half_width_section { float: right; } #top #main .full_width_section { margin: 20px 0; width: 100%; display: inline-block; } #top #main .full_width_section.flex-fields { display: flex; } #top #main .full_width_section.flex-fields .checkbox { flex-shrink: 0; flex-grow: 0; } #top #main .preview_form_fields .form_field { clear: both; } #top #main .preview_form_fields .form_field label { font-weight: bold; font-weight: normal; font-size: 0.92em; float: left; padding-right: 8px; } #top #main .preview_form_fields.half_width_section .form_field label { min-width: 120px; } #top #main .preview_form_fields .form_field span { float: left; display: inline-block; background: transparent; color: #183d41; margin: 0; padding: 0; outline: none; padding: 0 2px 3px 10px; background: #d1dfe0; } .tooltip { top: -0.8125rem; z-index: 9; position: absolute; padding: 0px 2px 0px 6px; background: transparent; font-size: 11px; font-weight: var(--weight-semibold); color: #77a2a4; width: 100%; line-height: 16px; } input:focus + .tooltip { color: var(--clr-light-primary); } .giver_form_fields .tooltip { width: 300px; /* right: 0px; */ left: 0px; } #top #main .top_form_fields .form_field { float: left; display: inline-block; margin: 4px 2px; position: relative; } .template-portfolio.content .entry-content-wrapper { padding-right: 0; } #top #main .top_form_fields .form_field textarea { padding: 5px 2px 3px 10px; border: none; background: #d1dfe0; font-size: 12px; border: 1px solid transparent; } #top #main .top_form_fields .form_field:nth-child(2n+1) { clear: both; } ::-webkit-input-placeholder { color: #77a2a4 !important; } :-ms-input-placeholder { color: #77a2a4 !important; } ::placeholder { color: #77a2a4 !important; } #top #main .form_field.one_quarter_width_input { grid-column: span 1; } #top #main .form_field.three_quarter_width_input { grid-column: span 3; } #top #main .form_field.half_width_input { grid-column: span 2; } #top #main .form_field.full_width_input { grid-column: 1/-1; } #top #main .general_field.error { border-bottom: 1px solid red !important; } #top #main input.checkbox.error { border: 1px solid red !important; } #top #main input.checkbox.error + label { color: red; } .photoconsent_section h3 { margin-bottom: 1rem; font-weight: var(--weight-regular); } .entry-content tr, .photoconsent_section tr { border-bottom: 1px solid var(--clr-light-gray); } .entry-content tr th, .entry-content tr td, .photoconsent_section tr th, .photoconsent_section tr td { font-size: 14px; text-transform: none; font-weight: normal; color: var(--clr-text); border: 1px solid #dce7e8; border: none; text-align: center; padding: 5px 0; letter-spacing: 0px; text-align: left; } .entry-content tbody tr th, .entry-content tbody tr td, .photoconsent_section tbody tr th, .photoconsent_section tbody tr td { text-align: left; } .entry-content tbody tr.no_results_row td, .photoconsent_section tbody tr.no_results_row td { text-align: center; } .entry-content tbody tr.expiration-state-expired .order_expire a, .photoconsent_section tbody tr.expiration-state-expired .order_expire a { color: var(--clr-error); } .entry-content tbody tr.expiration-state-warning .order_expire a, .photoconsent_section tbody tr.expiration-state-warning .order_expire a { color: var(--clr-warning); } .entry-content tbody tr a.expired, .photoconsent_section tbody tr a.expired { color: var(--clr-error); } .entry-content tbody tr a svg, .photoconsent_section tbody tr a svg { color: #2c3e50; } .entry-content .paginated tbody tr, .photoconsent_section .paginated tbody tr { display: none; } .entry-content tbody tr.notSearchResult, .photoconsent_section tbody tr.notSearchResult { display: none !important; } .entry-content tr th, .photoconsent_section tr th { cursor: pointer; white-space: nowrap; } .entry-content tr th:hover, .photoconsent_section tr th:hover { text-decoration: underline; } .main_color table.objectsList { background: var(--clr-white); border-radius: 4px; background-color: white; box-shadow: var(--drop-shadow); } .main_color tr:nth-child(odd), .main_color tr:nth-child(even) { background: transparent; } .main_color thead tr th { color: var(--clr-blue-medium); padding: 0.5em 0.125em; } .main_color thead tr th:first-child { padding-left: 24px !important; } .main_color tr th:first-child, .main_color tr td:first-child, .main_color tr { border: none; } .main_color th, .main_color td { vertical-align: middle; border: none; } @media screen and (min-width: 990px) { .main_color th, .main_color td { max-width: 18ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .main_color tbody tr td.actionIcon { padding: 0; vertical-align: middle; min-width: 24px; position: relative; } .objectsList tr, .photoconsent_section tr { position: relative; } .objectsList tr:before, .photoconsent_section tr:before { display: block; content: " "; pointer-events: none; height: auto; position: absolute; inset: .4375rem .5em; border-radius: 0.375rem; background-color: transparent; transition: background-color 200ms; } .objectsList tbody tr:hover::before, .photoconsent_section tbody tr:hover::before { background-color: var(--clr-table-hightlight); /** * hide it in safari */ } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .objectsList tbody tr:hover::before, .photoconsent_section tbody tr:hover::before { background-color: transparent; } } } tr .td-fill { display: block; padding: 0.5em 0.5em; transition: background 200ms; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .main_color .photoconsent_section td.order_date { width: 8ch; } .main_color .photoconsent_section td.order_date .td-fill { text-overflow: initial; } td.actionIcon .td-fill { padding-left: 0.125em; padding-right: 0.125em; } tr th:first-child, tr td:first-child { padding-left: 10px !important; } tr th:first-child .td-fill, tr td:first-child .td-fill { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; padding-left: 12px; } tr th:last-child, tr td:last-child { padding-right: 10px !important; } tr th:last-child .td-fill, tr td:last-child .td-fill { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } .actionLink { display: block; cursor: pointer; padding: 4px 3px 6px; } .actionLink svg { display: block; width: 1.25rem; height: auto; margin: 0 auto; } .actionLink.expired svg { stroke: var(--clr-error); } .actionLink.disabled svg { stroke: var(--clr-blue-light); stroke: #cfcfcf; } .copiedMsg { display: none; } /* we need different styling on the text inside the button */ .copyLinkButton .copiedMsg { display: none; position: relative; top: inherit; left: inherit; -webkit-transform: none; -moz-transform: none; transform: none; height: auto; } .deletePrivacyLink { width: 12px; height: 14px; display: inline-block; background-size: 100%; background-repeat: no-repeat; margin: 4px 4px 0px 4px; } .see_save_note[data-notecontent]:not([data-notecontent=""]) svg { stroke: var(--clr-error); } #noteForm .counter { margin-top: 2px; text-align: right; font-size: 10px; } #noteForm #noteFormContentArea { font-size: 12px; line-height: 1.2; color: var(--clr-primary); text-align: left; margin: 0; } .errorRow { color: red; padding: 4px 10px; } .errorRow .errorMsg { font-size: 12px; font-weight: normal; } .one_third { width: 33%; } .two_thirds { width: 66%; } .photoconsent_section.list .two_thirds, .photoconsent_section.list .one_third { display: inline-block; float: left; /* margin: 0; */ margin: 0 0 20px 0; } .photoconsent_section.signed .two_thirds, .photoconsent_section.signed .one_third { display: inline-block; float: left; /* margin: 0; */ margin: 0 0 20px 0; } .photoconsent_section.list .two_thirds + .one_third, .photoconsent_section.signed .two_thirds + .one_third { width: 34%; } .objectsList td { position: relative; } .flex_column .widget .widgettitle, .content .widget .widgettitle { text-transform: none; } #top_header img { width: 100vW; height: auto; max-width: 800px; } #overlapping_left img, #overlapping_right img { width: 33vW; height: auto; max-width: 340px; } #overlapping_left img { max-width: 280px; } .no_results_row { display: none; } /* datepicker styling */ .ui-widget { font-size: 12px; } .ui-widget.ui-widget-content { border: 1px solid #d1dfe0; padding: 0; } .ui-widget-header { background: #d1dfe0; border: none; } .ui-datepicker .ui-datepicker-title { margin: 0; line-height: 1.1; text-align: center; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: 0px; text-align: center; text-decoration: none; } .ui-datepicker tr:first-child th, .ui-datepicker tr:first-child td { border: none; } .ui-datepicker tr td:first-child { border: none; } .ui-datepicker tr:first-child th { border-bottom: 1px solid green; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.1em; height: 1.1em; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button { background: #d1dfe0 50% 50% repeat-x; } html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { background: #d1dfe0 50% 50% repeat-x; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background: #33a6ad 50% 50% repeat-x; color: #ffffff; } .ui-button:hover, .ui-button:focus { background: #33a6ad 50% 50% repeat-x; color: #ffffff; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active { background: #33a6ad 50% 50% repeat-x; color: #ffffff; } .ui-button:active, .ui-button.ui-state-active:hover { background: #33a6ad 50% 50% repeat-x; color: #ffffff; } .ui-datepicker th { padding: 0; text-align: center; font-weight: normal; letter-spacing: 0px; } .ui-datepicker td { font-size: 11px; } .ui-datepicker .ui-datepicker-prev-hover { left: 2px; } .ui-datepicker .ui-datepicker-next-hover { right: 2px; } .warningExpire { color: #ff4900 !important; } #footer { font-size: 16px; line-height: 23px; } @media only screen and (min-width: 768px) { #top #main .form_field.selfieImage { position: absolute; top: 0; left: 480px; width: 230px; } #top #main .form_field.selfieImage img { width: auto; max-width: 100%; height: auto; } .woocommerce-form-login-toggle, .woocommerce-form-login, .woocommerce-form-coupon-toggle, .woocommerce-form-coupon { width: 48%; clear: both; float: left; } } @media only screen and (min-width: 767px) { #overlapping_left .av_one_third, #overlapping_right .av_one_third { position: absolute; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); top: 50%; } #overlapping_left .av_one_third { left: 0; } #overlapping_left .av_one_third + .flex_column { float: right; } #overlapping_right .av_one_third { right: 0; } #overlapping_right .av_one_third + .flex_column { float: left; } } .photoconsentBurger { display: none; } #top #payment div.payment_box { padding: 1em 0px; } #top .sidebar_left.sidebar_align_left .widget_nav_menu.openBurgerMenu { visibility: visible; /* shows sub-menu */ opacity: 1; z-index: 999999; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%); -webkit-transition-delay: 0s, 0s, 0.3s; -o-transition-delay: 0s, 0s, 0.3s; transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */ } @media only screen and (max-width: 992px) { .mobile-scroller { overflow: scroll; border-right: 1px solid; border-bottom: 1px solid; border-radius: var(--border-radius); margin-bottom: 20px; } table.objectsList { margin-bottom: 0; } } @media only screen and (max-width: 767px) { .sidebar #photoconsent_sidebar_logo { margin: 0 auto; margin-right: 0%; width: 70%; height: 60px; min-height: 60px; height: 40px; min-height: 40px; float: right; background-position: center right; } .sidebar #photoconsent_sidebar_logo:before { content: ' '; width: 20%; float: left; margin-left: 0%; height: 60px; display: block; } .photoconsentBurger { float: right; display: inline-block; padding-top: .25rem; margin-left: 0%; max-width: 20%; position: relative; color: #fff; text-align: left; height: 20px; } .photoconsentBurger .av-hamburger-inner { background-color: #acc6c7; } .photoconsentBurger .av-hamburger-inner::before, .photoconsentBurger .av-hamburger-inner::after { background-color: #acc6c7; } #top .sidebar_left.sidebar_align_left .widget_nav_menu ul.menu { padding: 0px; } #menu-photoconsent-top-menu, .photoconsent_page #main main::before, .single-portfolio #main main::before { display: none !important; } .responsive .sidebar { padding-bottom: 0; } .responsive.__removed_at_multiuser #top #main .sidebar.smartphones_sidebar_active { border: none; /* border: 1px solid red; */ height: auto !important; min-height: 1px !important; padding-bottom: 0; margin-left: -9%; width: 118%; position: relative; z-index: 9; margin-left: 0%; width: 100%; z-index: 9; top: 0; left: 0; /* height: 100vH!important; */ overflow: visible !important; } .responsive.__removed_at_multiuser #top #main .sidebar.smartphones_sidebar_active .inner_sidebar { padding: 20px 0; width: 100%; margin: 0 auto; max-height: 80px; } #top.__removed_at_multiuser .sidebar_left.sidebar_align_left .widget_nav_menu { visibility: hidden; /* hides sub-menu */ opacity: 0; position: absolute; position: fixed; /* top: 100%; */ left: 0; width: 100%; -webkit-transform: translateY(-2em); -moz-transform: translateY(-2em); transform: translateY(-2em); z-index: -1; -webkit-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; -o-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; top: 80px; background: var(--clr-primary); margin-left: 0; padding-left: 6%; height: 100%; } .photoconsent_page .content, .single-portfolio .content { padding: 80px 0 40px 0; } .photoconsent_section.list .two_thirds, .photoconsent_section.signed .two_thirds, .photoconsent_section.list .one_third, .photoconsent_section.signed .one_third { width: 100% !important; } .avia_textblock { /* line-height: 1.1em; */ } .photoconsent_buttons button, .photoconsent_buttons .button { font-size: 2.9vW; } .photoconsent_list_button { font-size: 2.9vW; } #top #main .form_field.one_quarter_width_input, #top #main .form_field.three_quarter_width_input, #top #main .form_field.half_width_input, #top #main .form_field.full_width_input { width: 100%; } #top #main .top_form_fields { margin-bottom: 10px; } #top .photoconsent_buttons { margin: 0px 0 10px 0; float: right; text-align: right; width: 100%; } .photoconsent_section.showInPreview { width: 100%; display: inline-block; margin-top: 20px; clear: both; padding-left: 1rem; padding-right: 1rem; } #top #main .preview_form_fields { width: 100%; } #top #main .preview_form_fields label { font-weight: normal; } #top #main .giver_form_fields .form_field { width: 100%; margin-top: 20px; clear: both; float: none; } #top #main .giver_form_fields .form_field .tooltip { top: -1rem; } #top #main .giver_form_fields .form_field input { width: 100%; height: 30px; max-width: 100%; font-size: 16px; } #top #main .giver_form_fields .form_field .uploadLabel { margin-top: 10px; margin-left: 0; margin-right: 0; font-size: 16px; } #top #main .giver_form_fields .form_field.wrap_selfie_upload { float: none !important; } #top #main .giver_form_fields .form_field input[type="file"] { width: auto; min-width: 0px; margin: 0; padding: 0; max-width: 75%; margin-top: 10px; } #top #main .giver_form_fields .selfie-upload-wrapper { position: relative; margin-top: 1rem; text-align: center; } #top #main .giver_form_fields .selfie-upload-wrapper .selfieIcon { top: 0 !important; left: 50% !important; transform: translateX(-50%); } #top #main .preview_form_fields:first-child { width: 70%; } #top #main .logoSection { /*display: none!important;*/ } #top #main .consent_content { margin-bottom: 10px; } .photographers-notes { padding-left: 1rem; padding-right: 1rem; } .popup { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 85%; } #footer .widget { margin: 0; } .giver_form_fields .tooltip { width: 100%; } .responsive table.shop_table { width: 100%; overflow: scroll; display: inline-block; } .responsive #top .cart_dropdown { top: 100%; margin-top: 10px; } .html_visible_cart .av-burger-menu-main { padding-right: 0px; } .wpml-ls-menu-item { float: left; clear: none; } .woocommerce .login .lost_password { clear: both; position: relative; top: 0; } #top #main .giver_form_fields .form_field.wrap_giver_zip { max-width: 35%; margin-right: 2%; } #top #main .giver_form_fields .form_field.wrap_giver_city { max-width: 63%; } .responsive #top .col2-set .col-1, .responsive #top .col2-set .col-2 { width: 100%; } .responsive .cart-collaterals .shipping_calculator { width: 100%; } .responsive table.shop_table { overflow: auto; display: inline-table; } #top #main .giver_form_fields { margin: 20px 0 40px; } } @media only screen and (max-width: 567px) { #top #main .preview_form_fields.half_width_section { width: 100%; } } @media only screen and (max-height: 568px) { .mfp-iframe-holder .mfp-content { height: 85vH; overflow-y: scroll; } .mfp-wrap { top: 5vH !important; -webkit-transform: translate(-50%, -5vH); -moz-transform: translate(-50%, -5vH); transform: translate(-50%, -5vH); } } .template-shop div.product div.summary { padding-bottom: 40px; } .reset_variations, .entry-summary .product_meta, .avia-wc-30-product-gallery-lightbox { display: none !important; } .woocommerce-product-gallery__image { pointer-events: none !important; } /* ignacio new styles for the Få adgang page */ /*this block is the content of catalog.css which isn't being loaded when the page is published but it IS loaded on page preview*/ .av-catalogue-container { margin: 30px 0; } .av-catalogue-heading { text-align: center; padding-bottom: 15px; font-weight: normal; letter-spacing: 1px; } .av-catalogue-list { border-top: 1px dashed; margin: 0; } .av-catalogue-list li { list-style-type: none; margin: 0; border-bottom: 1px dashed; padding: 0; clear: both; } #top .av-catalogue-item { text-decoration: none; padding: 10px 5px; display: block; overflow: hidden; } div.av-catalogue-item:hover { cursor: default; } .av-catalogue-title-container { position: relative; font-size: 1.3em; line-height: 1.4em; } .av-catalogue-title { padding-right: 60px; text-transform: uppercase; } .av-catalogue-price { position: absolute; right: 0; top: 0; } .av-catalogue-content { padding-right: 60px; font-size: 1.1em; } .av-catalogue-content p:first-child { margin-top: 0; } .av-catalogue-content p:last-child { margin-bottom: 0; } .av-catalogue-list .added_to_cart.wc-forward { display: none; } .av-catalogue-image { border-radius: 400px; width: 44px; float: left; margin-right: 15px; } .av-catalogue-image-no { display: none; } .av-catalogue-item-inner { overflow: hidden; } .av-catalogue-container-woo { margin-top: 0; } #top .main_color .av-catalogue-list li.photoconsent-product { margin-bottom: 3rem; border-bottom: none; } #top .main_color .av-catalogue-list li.photoconsent-product:hover { background-color: transparent; } #top .main_color .av-catalogue-list li.photoconsent-product > img { display: block; width: 200px; float: none; margin: 0 auto 1rem; } #top .main_color .av-catalogue-list li.photoconsent-product .av-catalogue-title-container { margin-bottom: .75rem; } #top .main_color .av-catalogue-list li.photoconsent-product .av-catalogue-title-container .av-catalogue-price { float: none; position: relative; } #top .main_color .av-catalogue-list li.photoconsent-product .product-link-wrapper { text-align: right; } #top .main_color .av-catalogue-list li.photoconsent-product a { display: block; width: 100%; margin-top: 1em; background-color: #183d41; color: #ffffff; border-color: #061b20; padding: 15px; line-height: 1em; font-size: 12px; text-align: center; text-decoration: none; border: none; cursor: pointer; font-family: inherit; border-radius: 2px; } @media screen and (min-width: 768px) { #top .main_color .av-catalogue-list li.photoconsent-product { margin-bottom: 1.5rem; float: left; clear: both; } } @media screen and (min-width: 768px) { #top .main_color .av-catalogue-list li.photoconsent-product > img { float: left; margin: 0 50px 0 0; } } @media screen and (min-width: 1200px) { #top .main_color .av-catalogue-list li.photoconsent-product .av-catalogue-title-container .av-catalogue-price { float: right; position: absolute; right: 0; top: 0; } } @media screen and (min-width: 768px) { #top .main_color .av-catalogue-list li.photoconsent-product a { display: inline-block; min-width: 130px; width: auto; } } .pdf-checkbox-checked, .pdf-checkbox-not-checked { display: none; } .output-textinput { border: 1px solid black; padding: 8px 12px; /*clear:left;*/ } .output-textarea { border: 1px solid black; padding: 8px 12px; /*clear:left;*/ display: block; box-sizing: border-box; } .output-textinput { display: inline-block; width: auto; margin-bottom: 0px; padding: 2px 4px; clear: none; } .output-textinput.empty-field { min-width: 80px; border: 1px solid #920; } div.wfu_overlay_editor { display: none !important; } #upload_privacy_policy { padding: 10px; } #top #upload_privacy_policy .file_div_clean_responsive { /* float: left; */ /* margin-right: 10px; */ /* display: inline-flex; */ vertical-align: top; } #top #upload_privacy_policy .file_input_textbox { font-size: 13px; padding: 13px 40px 13px 10px; line-height: 14px; display: inline-block; float: left; } #top #upload_privacy_policy .file_input_uploadform, #top #upload_privacy_policy .file_input_textbox { margin-bottom: 0; } #upload_privacy_policy input[type="button"].file_input_button, #upload_privacy_policy input[type="button"].file_input_submit { background-color: #183d41; color: #e8eff0; border-color: #061b20; background-image: none; } #upload_privacy_policy .file_input_textbox { cursor: pointer; } #upload_privacy_policy input[type="file"].file_input_hidden { cursor: pointer; } #upload_privacy_policy input[type="button"].file_input_button, #upload_privacy_policy input[type="button"].file_input_submit { cursor: pointer; } #top #upload_privacy_policy td.file_messageblock_filearrow_td { display: none !important; } #top #upload_privacy_policy .file_messageblock_table { display: table; width: 300px; } #top #upload_privacy_policy td.file_messageblock_filesubheader_td, #top #upload_privacy_policy td.file_messageblock_fileheader_td { border: none !important; } #top #upload_privacy_policy .file_messageblock_fileheader { border: none !important; } #top #upload_privacy_policy .file_messageblock_filesubheader_tr { display: table-row !important; } #top #upload_privacy_policy label.file_messageblock_fileheader_label, #top #upload_privacy_policy .file_messageblock_filesubheader_tr label { font-size: 13px; line-height: 1.1em; } #top #upload_privacy_policy div.file_progress_bar { width: 300px; } /* datepicker */ .ui-datepicker .ui-datepicker-title { margin: 0 25px; } #simba_tfa_woocommerce_user_settings { display: inline-block; margin: 2rem 0; } #tfa_advanced_heading, #tfa_advanced_box { display: none; } /* * * ignacio * animated svg styles * */ .animated-circle { position: relative; width: min-content; margin: 0 auto; font-family: 'Museo Slab W01_700'; color: white; } .animated-circle .legend { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: -0.25em; font-size: 25px; line-height: 1.2; text-align: center; } .animated-circle .animated-path { transform-origin: center; transform: rotate(-90deg); } #top form .consent_content { width: 100%; } #top #main .customize-content-wrapper .editable-toolbar { margin-bottom: 2rem; } #top #main .customize-content-wrapper .editable-toolbar > div { display: flex; flex-wrap: wrap; } #top #main .customize-content-wrapper .editable-toolbar > div button { flex: 1; } @media screen and (min-width: 768px) { #top #main .customize-content-wrapper .editable-toolbar > div button { flex: unset; } } #top #main .customize-content-wrapper .editable-toolbar button { -webkit-appearance: none; margin-right: 8px; margin-bottom: 8px; } #top #main .customize-content-wrapper .input_placeholder { background: #d1dfe0 !important; min-width: 60px; width: min-content; margin-bottom: 6px; } #top #main .customize-content-wrapper .input_placeholder .close-btn { font-size: 0.7em; vertical-align: super; padding: 0.25rem 0.25rem 0rem 0.25rem; color: red; cursor: pointer; } #top .photoconsent_buttons + .photoconsent_buttons { /*weird but they are floated*/ margin-right: 1rem; } #top .main_color .input_post_excerpt { display: inline-block; background: transparent; border: 1px solid transparent; color: #183d41; margin: 1rem 0 10px 0; padding: 0; outline: none; padding: 5px 2px 3px 10px; font-size: 12px; background: #d1dfe0; height: 20px; outline: none; box-shadow: none; } /* * ignacio * new preloader * */ #preloaderPopup { padding: 10ch 6ch; top: 50%; transform: translate(-50%, -50%); } #preloaderPopup img { display: block; margin: 0 auto; width: 150px; padding: 10px; } #preloaderPopup h3 { font-weight: bolder; color: var(--clr-primary); margin-top: 1em; } /* * ignacio * new confirmation popup styles * */ #successSignForm { /*display: block;*/ top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 280px; padding-bottom: 2rem; } @media screen and (max-width: 767px) { #successSignForm .buttons { flex-direction: column; } #successSignForm .buttons .photoconsent_list_button { width: 100%; } } #successSignForm .check-img { display: block; margin: 0 auto 2rem; max-width: 130px; height: auto; } #successSignForm h3 { font-family: inherit; font-size: 1.25rem; font-weight: bolder; color: #1a2f33; } #successSignForm .photoconsent_list_button { font-family: inherit; float: none !important; box-shadow: none; border: 1px solid #1a2f33; padding: 0.5em 2em; font-size: .8125rem; min-width: 180px; display: block; margin-left: auto; margin-right: auto; } /** * * Fix float error on coupon code at checkout * **/ @media only screen and (min-width: 768px) { .woocommerce-form-login-toggle, .woocommerce-form-login, .woocommerce-form-coupon-toggle, .woocommerce-form-coupon { float: none; } } #pageOverlay { background: rgba(0, 0, 0, 0.8); position: fixed; width: 100%; height: 100%; z-index: 9999; top: 0; left: 0; display: none; } .popup { display: none; position: fixed; top: calc(50% - var(--navbar-height) / 2); left: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 8px; background: #d1dfe0; z-index: 10000; padding: 1.5rem; width: 450px; max-width: 90%; max-height: 80vh; } body.form-signing-view#top .popup { top: 50%; transform: translate(-50%, -50%); border-radius: var(--border-radius); } body.form-signing-view#top .popup#sendToEmailAddress input#sendToEmailAddressInput, body.form-signing-view#top .popup textarea { height: unset; margin-bottom: 0; padding: 0.75rem 1rem; line-height: 1.5; background: #fff; border: none; border-radius: var(--border-radius); margin-bottom: 1rem; } .popup h3 { font-size: 17px; color: var(--clr-primary); } .popup p { font-size: 12px; line-height: 1.2; color: var(--clr-primary); } .popup .popupButton span { display: inline-block; width: 100%; color: #fff; } .popup .buttons { display: flex; gap: 1rem; margin-top: 2rem; } .popup .buttons > .photoconsent_list_button { display: block; border-radius: var(--border-radius); box-shadow: 0px 2px 8px 0px rgba(28, 43, 72, 0.1); min-width: 9.375rem; min-width: clamp(6rem, 9.375rem, 100%); padding: 0.5rem 1rem 0.4735rem; font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--clr-white); text-align: center; line-height: 1.65; background-color: var(--clr-primary); transition: background-color 200ms; cursor: pointer; flex: 1 0 auto; min-width: 6rem; } .popup .buttons > .photoconsent_list_button:is(button) { appearance: none; border: none; cursor: pointer; line-height: 1.65; } .popup .buttons > .photoconsent_list_button:hover { background-color: var(--clr-primary-dark); text-decoration: none; color: var(--clr-white); } .popup .buttons > .photoconsent_list_button:active, .popup .buttons > .photoconsent_list_button:focus { background-color: var(--clr-primary-dark); } .popup .buttons > .photoconsent_list_button:disabled, .popup .buttons > .photoconsent_list_button.disabled { pointer-events: none; background-color: #99aac4; user-select: none; } .popup .buttons > .photoconsent_list_button.pill-button-micro { padding: 0.5rem 0.75rem; min-width: unset; } .popup .buttons > .photoconsent_list_button.pill-button-big { font-weight: var(--weight-bold); padding: 1.25rem 1.5rem; } .popup .buttons > .photoconsent_list_button.faded { background-color: #99aac4; } .popup .buttons > .photoconsent_list_button.btn-semi-transparent { opacity: 0.5; } .popup .buttons > .photoconsent_list_button.btn-semi-transparent:hover { opacity: 1; } .popup .buttons > .photoconsent_list_button.has-icon { display: flex; justify-content: center; gap: 0.5rem; align-items: center; white-space: nowrap; } .popup .buttons > .photoconsent_list_button .icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .popup .buttons > .photoconsent_list_button .icon svg { width: 100%; height: auto; } .popup .buttons > .photoconsent_list_button.button-warning { background-color: var(--clr-secondary-accent); } .popup .buttons > .photoconsent_list_button.button-faded { background-color: var(--clr-primary); } .popup .button_center, .popup .button_left { background: #33a6ad; } .popup .button_right { background: #80c9d0; } .popup .popup-preloader { text-align: center; } .popup .popup-preloader svg { margin-top: 1rem; transform-origin: center center; animation: rotation 1.2s infinite linear; } button.button { display: block; border-radius: var(--border-radius); box-shadow: 0px 2px 8px 0px rgba(28, 43, 72, 0.1); min-width: 9.375rem; min-width: clamp(6rem, 9.375rem, 100%); padding: 0.5rem 1rem 0.4735rem; font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--clr-white); text-align: center; line-height: 1.65; background-color: var(--clr-primary); transition: background-color 200ms; cursor: pointer; } button.button:is(button) { appearance: none; border: none; cursor: pointer; line-height: 1.65; } button.button:hover { background-color: var(--clr-primary-dark); text-decoration: none; color: var(--clr-white); } button.button:active, button.button:focus { background-color: var(--clr-primary-dark); } button.button:disabled, button.button.disabled { pointer-events: none; background-color: #99aac4; user-select: none; } button.button.pill-button-micro { padding: 0.5rem 0.75rem; min-width: unset; } button.button.pill-button-big { font-weight: var(--weight-bold); padding: 1.25rem 1.5rem; } button.button.faded { background-color: #99aac4; } button.button.btn-semi-transparent { opacity: 0.5; } button.button.btn-semi-transparent:hover { opacity: 1; } button.button.has-icon { display: flex; justify-content: center; gap: 0.5rem; align-items: center; white-space: nowrap; } button.button .icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } button.button .icon svg { width: 100%; height: auto; } .container_wrap_first, .container_wrap_first > .container { min-height: 85vh; } @media screen and (min-width: 990px) { .main_color.sidebar_left .container { max-width: 100%; padding-left: 0; padding-right: 0; display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 1fr; grid-template-areas: "sidebar main"; } .main_color.sidebar_left main { grid-area: main; background: var(--clr-white-green); } .main_color.sidebar_left main article { padding-left: 2rem; padding-right: 2rem; } .main_color.sidebar_left aside { grid-area: sidebar; background: #fff; } } .sidebar_align_left { min-width: 250px; } .container .av-content-small.units { width: 100%; padding-left: 0; margin-right: auto; } .main_color, .main_color .site-background, .main_color .first-quote, .main_color .related_image_wrap, .main_color .gravatar img .main_color .hr_content, .main_color .news-thumb, .main_color .post-format-icon, .main_color .ajax_controlls a, .main_color .tweet-text.avatar_no, .main_color .toggler, .main_color .toggler.activeTitle:hover, .main_color #js_sort_items, .main_color.inner-entry, .main_color .grid-entry-title, .main_color .related-format-icon, .grid-entry .main_color .avia-arrow, .main_color .avia-gallery-big, .main_color .avia-gallery-big, .main_color .avia-gallery img, .main_color .grid-content, .main_color .av-share-box ul, #top .main_color .av-related-style-full .related-format-icon, .main_color .related_posts.av-related-style-full a:hover, .main_color.avia-fullwidth-portfolio .pagination .current, .main_color.avia-fullwidth-portfolio .pagination a, .main_color .av-hotspot-fallback-tooltip-inner, .main_color .av-hotspot-fallback-tooltip-count { background: var(--clr-white-green); } /** * * new design header * * normal page and template-photoconsent.php use the same now * different buttons are hidden with Menu visibility plugin */ @media only screen and (max-width: 1199px) { .av-main-nav > li.menu-item-avia-special { display: block; } .av-main-nav > li { display: none; } } body#top #header { background: var(--clr-primary); } @media screen and (min-width: 1200px) { body#top #header #header_main > .container { max-width: unset !important; padding-top: 1.25rem; padding-bottom: 1rem; } } @media screen and (min-width: 1200px) { body#top #header .inner-container { display: flex; align-items: center; width: 100%; justify-content: space-between; } } @media screen and (min-width: 1200px) { body#top #header span.logo { position: relative; height: auto; flex: 1 0 auto; } } body#top #header span.logo a { margin-right: 4.6875rem; color: #fff; cursor: pointer; } body#top #header span.logo img { height: auto; max-height: unset; } @media screen and (min-width: 76px) and (max-width: 1200px) { body#top #header span.logo img { padding-top: 0.5rem; } } @media screen and (min-width: 1200px) { body#top #header #header_main > .container .main_menu { position: relative; flex: 1 0 auto; } } @media screen and (min-width: 1200px) { body#top #header .container .main_menu .av-main-nav-wrap { float: none; } } body#top #header .container .main_menu .av-main-nav-wrap ul.menu { margin-left: 0; } @media screen and (min-width: 1200px) { body#top #header .container .main_menu .av-main-nav-wrap ul.menu { display: flex; margin-bottom: 0; justify-content: end; align-items: center; } } @media screen and (min-width: 1200px) { body#top #header .container .main_menu .av-main-nav-wrap ul.menu > li { float: none; padding: 0 0.9375rem; flex: 0 1 8ch; } body#top #header .container .main_menu .av-main-nav-wrap ul.menu > li:first-child { padding-left: 0; } } body#top #header .container .main_menu .av-main-nav-wrap ul.menu > li:not(.av-burger-menu-main) > a { font-size: 1rem; min-width: 9.375rem; padding: 0.3125rem 1.125rem 0.25rem; background-color: var(--clr-primary-dark); color: var(--clr-primary-bg); border-radius: var(--border-radius); transition: backgound-color 1200ms; background-color: transparent; min-width: unset; white-space: nowrap; line-height: 1.5; height: unset; padding-bottom: 0.35rem; transition: background-color 200ms; } .current-menu-item body#top #header .container .main_menu .av-main-nav-wrap ul.menu > li:not(.av-burger-menu-main) > a, body#top #header .container .main_menu .av-main-nav-wrap ul.menu > li:not(.av-burger-menu-main) > a:hover { --blue-l: 39%; } body#top #header .container .main_menu .av-main-nav-wrap ul.menu > li:not(.av-burger-menu-main) > a:focus { --blue-l: 43%; } body#top #header .container .main_menu .av-main-nav-wrap ul.menu > li:not(.av-burger-menu-main) > a:down { --blue-s: 90%; --blue-l: 34%; } body#top #header .container .main_menu .av-main-nav-wrap ul.menu > li:not(.av-burger-menu-main) > a:disabled { --blue-s: 66%; --blue-l: 41%; color: #d3e2ff; } body#top #header .container .main_menu .av-main-nav-wrap ul.menu > li:not(.av-burger-menu-main) > a:hover { background-color: var(--clr-primary-dark); } body#top #header .container .main_menu .av-main-nav-wrap ul.menu li.current-menu-item:not(.wpml-ls-menu-item) a { background-color: var(--clr-primary-dark); } body#top #header .container .main_menu .av-main-nav-wrap ul.menu ul { background-color: var(--clr-primary); border: none; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); padding-bottom: 0.5rem; } body#top #header .container .main_menu .av-main-nav-wrap ul.menu ul a { border-radius: 0; border: none; border-right: none; } body#top #header .container .main_menu .av-main-nav-wrap ul.menu ul a:hover { background-color: var(--clr-primary-dark); } body#top #header .container .main_menu .av-main-nav-wrap ul.menu li.menu-item-language ul { width: fit-content; padding-left: 0.9375rem; padding-right: 0.9375rem; } body#top #header .container .main_menu .av-main-nav-wrap ul.menu li.menu-item-language ul a { padding-left: 1.12rem; padding-right: 0.9375rem; } /** * * not in use anymore but kept for reference * */ .user-area__header { background: var(--clr-primary); } .user-area__header .container { max-width: unset !important; padding-top: 1rem; padding-bottom: 0; } @media screen and (min-width: 768px) { .user-area__header .container { display: flex; align-items: center; padding-top: 1.25rem; padding-bottom: 1rem; } } @media screen and (min-width: 768px) { .user-area__header .branding { flex-basis: 220px; } } .user-area__header #photoconsent_sidebar_logo { display: flex; align-items: center; margin-right: 4.6875rem; color: #fff; font-size: 1.25rem; cursor: pointer; } .user-area__header #photoconsent_sidebar_logo svg { width: 1.5em; height: 1.5em; margin-right: .33em; } .user-area__header #photoconsent_sidebar_logo:hover { text-decoration: none; } @media screen and (min-width: 768px) { .user-area__header .user-area__nav__wrapper { margin-left: auto; flex: 1 0 auto; } } .user-area__header .user-area__nav__wrapper ul.user-area__nav { margin-left: 0; } @media screen and (min-width: 768px) { .user-area__header .user-area__nav__wrapper ul.user-area__nav { display: flex; margin-bottom: 0; } } .user-area__header .user-area__nav__wrapper ul.user-area__nav > li { padding: 0 0.9375rem; } @media screen and (min-width: 768px) { .user-area__header .user-area__nav__wrapper ul.user-area__nav > li:first-child { padding-left: 0; } } .user-area__header .user-area__nav__wrapper ul.user-area__nav a { font-size: 1rem; min-width: 9.375rem; padding: 0.3125rem 1.125rem 0.25rem; background-color: var(--clr-primary-dark); color: var(--clr-primary-bg); border-radius: var(--border-radius); transition: backgound-color 1200ms; background-color: transparent; } .current-menu-item .user-area__header .user-area__nav__wrapper ul.user-area__nav a, .user-area__header .user-area__nav__wrapper ul.user-area__nav a:hover { --blue-l: 39%; } .user-area__header .user-area__nav__wrapper ul.user-area__nav a:focus { --blue-l: 43%; } .user-area__header .user-area__nav__wrapper ul.user-area__nav a:down { --blue-s: 90%; --blue-l: 34%; } .user-area__header .user-area__nav__wrapper ul.user-area__nav a:disabled { --blue-s: 66%; --blue-l: 41%; color: #d3e2ff; } .user-area__header .user-area__nav__wrapper ul.user-area__nav li.current-menu-item a { background-color: var(--clr-primary-dark); } .user-area__header .user-area__nav__wrapper ul.user-area__nav ul { display: none; background-color: var(--clr-primary); border: none; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); padding-bottom: 0.5rem; } .user-area__header .user-area__nav__wrapper ul.user-area__nav ul a { border-radius: 0; border: none; border-right: none; } .user-area__header .user-area__nav__wrapper ul.user-area__nav ul a:hover { background-color: var(--clr-primary-dark); } /** * * Dashboard * */ /** * the little "cards" in the top of the overview page. */ .photoconsent-card h3 { font-size: 14px; color: #748da6; } .photoconsent-card p { font-size: 2.25rem; margin: 0; } .photoconsent-card.list-total::before, .photoconsent-card.signed-total::before, .photoconsent-card.templates-total::before { content: " "; display: block; position: absolute; top: 1.5rem; left: 1.25rem; width: 50px; height: 50px; background-size: contain; } .photoconsent-card.list-total::before { background: url("./images/decoration/card-icon-oprettede.png"); background-size: contain; } .photoconsent-card.signed-total::before { background: url("./images/decoration/card-icon-indhentede.png"); background-size: contain; } .photoconsent-card.templates-total::before { background: url("./images/decoration/card-icon-skabeloner.png"); background-size: contain; } @media screen and (max-width: 991px) { .photoconsent-card.templates-total { margin-bottom: 20px; } } .photoconsent-card span.new { padding-left: 0.5rem; color: var(--clr-green); font-size: 14px; } .photoconsent-card span.new .arrow-icon { vertical-align: baseline; } .photoconsent-card span.new .arrow-icon svg { width: 14px; height: 14px; } /** * * Onboarding * */ .onboarding.onboarding-empty { text-align: center; font-size: 1.25rem; padding-top: 4rem; } /** * * on opretted and indhentede, we have a big header * with the h1, a search form and possibly a butt * */ .title-with-progress-wrapper .content { padding-top: 0; } .big-list-header { margin-bottom: 2rem; } @media screen and (min-width: 768px) { .big-list-header { display: flex; align-items: center; } } .big-list-header h1 { font-size: 1.625rem; } .big-list-header input.searchForm { font-size: 0.875rem !important; padding-top: 0.8rem !important; padding-bottom: 0.8rem !important; } .big-list-header a.pill-button { color: #fff !important; min-width: unset; width: auto; white-space: nowrap; margin-bottom: var(--spacer); } @media screen and (min-width: 768px) { .big-list-header h1 { margin-bottom: 0; } .big-list-header .search-wrapper { display: flex; align-items: center; margin-left: auto; } .big-list-header input.searchForm { max-width: 190px; } .big-list-header a.pill-button { margin-right: 20px; margin-bottom: 0; } } #container-step-1 .content, #container-step-2 .content { padding-top: 0; } /** * * Skabeloner grid * */ ul.list_forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 2.25rem; list-style: none; margin-left: 0; } ul.list_forms > li { display: flex; flex-direction: column; padding: 0; margin-left: 0; } /** * these form_item are used both on opret samtykke and on Skabeloner... * */ .form_item { position: relative; display: flex; flex-direction: column; flex: 1 0 auto; } .form_item .form_item_body { background: var(--clr-white); border-radius: 4px; background-color: white; box-shadow: var(--drop-shadow); position: relative; flex: 1 0 auto; display: flex; flex-direction: column; transition: box-shadow 200ms; cursor: pointer; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(185, 185, 185, 0); } .form_item.selected .form_item_body { box-shadow: 0 0 0 1.5px var(--clr-primary); } .form_item.selected .buttons { display: flex; pointer-events: initial; } @media screen and (min-width: 990px) { .form_item.selected .buttons { visibility: visible; opacity: 1; } } .form_item .form_thumb img { display: block; margin: 0 auto; padding: 1.25rem 2.875rem 0; } .form_item .form_thumb.color-pink { background-color: #f0eef9; } .form_item .form_thumb.color-yellow { background-color: #fcf8ef; } .form_item .form_thumb.color-light-blue { background-color: #e9f6fc; } .form_item .form_thumb.color-purple { background-color: #e6eefc; } .form_item .form_info { background: var(--clr-white); padding: 1.1875rem; flex-grow: 1; position: absolute; width: 100%; bottom: 0; min-height: 6rem; transform: translateY(calc(100% - 6rem)); transition: transform 200ms; } .form_item.selected .form_info, .form_item:hover .form_info { transform: none; } .form_item.selected .form_info p, .form_item:hover .form_info p { max-height: 12ch; overflow: auto; } .form_item .form_header h6 { display: inline-block; font-size: 1rem; font-weight: var(--weight-regular); font-family: var(--font-open-sans); color: var(--clr-text); line-height: 1.5; padding-right: 0.5rem; } .form_item .form_header span.tags { display: inline; padding-left: 0; margin-left: 0; } .form_item .form_header span.tags > span { display: inline-block; color: var(--clr-white); border-radius: var(--border-radius); font-weight: var(--weight-semibold); font-size: 0.875rem; background: #afbbd2; padding: 0.125rem 0.5rem 0.125rem; margin-right: 0.5rem; margin-bottom: 0.25rem; } .form_item p { font-size: 0.9375rem; color: var(--clr-blue-medium); line-height: 1.6; margin-top: 0; margin-bottom: 0; max-height: 3rem; text-overflow: ellipsis; overflow: hidden; } .form_item .buttons { display: flex; gap: 1rem; margin-top: 1rem; margin-left: -4px; margin-right: -4px; transition: opacity 200ms; display: none; pointer-events: none; } .form_item .buttons > * { flex: 1 0 auto; } .form_item .buttons .create-buttons, .form_item .buttons .edit-buttons { display: none; } .form_item .buttons .create-buttons.visible-buttons, .form_item .buttons .edit-buttons.visible-buttons { display: flex; gap: 1rem; } .form_item .buttons .create-buttons > .photoconsent_list_button, .form_item .buttons .edit-buttons > .photoconsent_list_button { flex: 1 0 auto; } .form_item .buttons .create-buttons > .photoconsent_list_button a, .form_item .buttons .edit-buttons > .photoconsent_list_button a { flex-wrap: wrap; } .form_item .buttons .create-buttons span.mobile-label, .form_item .buttons .edit-buttons span.mobile-label { display: block; color: var(--clr-primary); flex: 1 0 100%; } @media screen and (min-width: 768px) { .form_item .buttons .create-buttons span.mobile-label, .form_item .buttons .edit-buttons span.mobile-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } } .form_item .buttons .edit-buttons { flex-wrap: wrap; max-width: 100%; } .form_item .buttons .edit-buttons .photoconsent_list_button { flex: 1 1 25%; } @media screen and (min-width: 768px) { .form_item .buttons .edit-buttons .photoconsent_list_button { flex: 1 0 auto; } } .form_item .buttons .edit-buttons a { box-shadow: none; background-color: transparent; min-width: unset; padding: 0.5rem 0.15rem 0.4735rem; display: flex; align-items: center; justify-content: center; } .form_item .buttons .edit-buttons a svg { max-width: 1.5rem; height: auto; margin-bottom: 6px; } .form_item .toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; border-radius: 4px; padding: 0.5rem; box-shadow: inherit; } .form_item .toast.error { background-color: var(--clr-red); } .form_item .toast p { color: #fff; margin-top: 0; line-height: 1.2; max-height: unset; text-overflow: unset; overflow: unset; } .list_forms.edit-mode .form_item_body { border: none; box-shadow: 0 0 0 1.5px rgba(11, 71, 76, 0.25); } .list_forms.edit-mode .selected .form_item_body { box-shadow: 0 0 0 1.5px var(--clr-primary); } .list_forms.edit-mode .edit-buttons a svg { stroke: var(--clr-primary); } .list_forms.edit-mode .edit-buttons a:hover, .list_forms.edit-mode .edit-buttons a:active, .list_forms.edit-mode .edit-buttons a:focus { background-color: transparent; } .list_forms.edit-mode .static_lock_template a { cursor: default; } .list_forms.edit-mode .icon-locked, .list_forms.edit-mode .icon-unlocked { line-height: 0; } .list_forms.edit-mode [data-template-locked="1"] { --clr-primary: var(--clr-red); } .list_forms.edit-mode [data-template-locked="1"] .icon-locked { display: block; } .list_forms.edit-mode [data-template-locked="1"] .icon-unlocked { display: none; } .list_forms.edit-mode [data-template-locked="0"] .icon-locked { display: none; } .list_forms.edit-mode [data-template-locked="0"] .icon-unlocked { display: block; } .list_forms.edit-mode .form_item[data-template-locked="1"] .form_item_body { box-shadow: 0 0 0 1.5px rgba(185, 68, 71, 0.25); } .list_forms.edit-mode .form_item[data-template-locked="1"].selected .form_item_body { box-shadow: 0 0 0 1.5px #B94447; } /** * * on opret nyt samtykke, the progress indicator * */ ul.photoconsent-progress { list-style: none; padding-left: 0; } ul.photoconsent-progress li { display: inline-block; color: var(--clr-primary); font-weight: var(--weight-semibold); } ul.photoconsent-progress li .pc-square { margin-right: 0.625rem; } ul.photoconsent-progress li:first-child { cursor: pointer; } ul.photoconsent-progress li:not(.current-step) { color: var(--clr-disabled); } ul.photoconsent-progress li:not(.current-step) .pc-square { background-color: var(--clr-disabled); } /** * * modal with previewing a consent or template * */ body.photoconsent-modal-opened { overflow: hidden; } .photoconsent-modal { --paper-width: 880px; position: fixed; width: 100vw; height: 100vh; z-index: 1000; top: 0; left: 0; right: 0; bottom: 0; } .photoconsent-modal::before { display: block; content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); } .photoconsent-modal .photoconsent-modal-content-wrapper { background: var(--clr-white); border-radius: 4px; background-color: white; box-shadow: var(--drop-shadow); background-color: var(--clr-primary-bg); padding: 1.875rem .875rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--paper-width); max-width: 90%; height: 90%; margin: 0 auto; overflow-y: auto; } @media screen and (min-width: 768px) { .photoconsent-modal .photoconsent-modal-content-wrapper { padding: 1.875rem; } } .photoconsent-modal .logoSection { max-width: 40%; } .photoconsent-modal .consent_content { background: var(--clr-white); border-radius: 4px; background-color: white; box-shadow: var(--drop-shadow); padding-left: 1rem !important; padding-right: 1rem !important; } @media screen and (min-width: 768px) { .photoconsent-modal .consent_content { padding-left: 2rem !important; padding-right: 2rem !important; } } .photoconsent-modal .photoconsent-modal-preloader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .photoconsent-modal .photoconsent-modal-preloader svg { transform-origin: center center; animation: rotation 1.2s infinite linear; } .photoconsent-modal .photoconsent-modal-close { position: absolute; top: 1.25rem; right: 1.25rem; color: var(--clr-primary); cursor: pointer; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /** * * * PHOTOCONSENT PLUGIN CSS for hot reload * * * */ /** * * Tables components for signed and created * */ ul.table-breadcrumb { list-style: none; margin-block-end: 0.5rem; } ul.table-breadcrumb li { display: inline-block; font-size: 0.8125rem; margin-inline-start: 0.25rem; cursor: pointer; } ul.table-breadcrumb li::before { content: "/ "; } ul.table-breadcrumb li:first-child::before { content: ""; } ul.table-breadcrumb li:last-child { font-weight: bold; } ul.table-breadcrumb li:last-child::before { font-weight: normal; } /** * * Folder ui sidebar * */ body.page-template-template-photoconsent#top .sidebar_left .inner_sidebar { margin-right: 0; } @media screen and (min-width: 990px) { #top .folders-ui { padding: 1.5rem 0 1.5rem 1.815rem; } } #top .folders-ui > ul { margin-bottom: 5rem; } #top .folders-ui li { font-size: 0.875rem; position: relative; } #top .folders-ui li > a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-inline-end: 2rem; } #top .folders-ui ul > li { margin-bottom: 0.625rem; } #top .folders-ui .item-label { display: flex; padding: 0.375rem 0.5rem; align-items: center; border-radius: var(--border-radius); transition: background 300ms; } @media screen and (min-width: 990px) { #top .folders-ui .item-label { border-top-right-radius: 0; border-bottom-right-radius: 0; } } #top .folders-ui .item-label span.icon { margin-right: 0.33rem; } #top .folders-ui .item-label svg.icon { display: block; max-width: 1.125rem; height: auto; } #top .folders-ui .item-label .label { font-size: 0.875rem; } #top .folders-ui li.active > .item-label, #top .folders-ui li:hover > .item-label { background: var(--clr-light-green); } #top .folders-ui .categories > ul.subFoldersList { padding: 0.5em 0.5em 0.5em 1.5rem; } #top .folders-ui .categories > ul.subFoldersList li { text-align: start; padding: 0.375rem 0.5rem !important; } #top .folders-ui .categories > ul.subFoldersList li ul.subFoldersList > li { padding-inline-end: 0 !important; } #top .folders-ui .categories > ul.subFoldersList a { color: var(--clr-text); } #top .folders-ui .categories > ul.subFoldersList .menuOptions a { color: var(--clr-white); } #top .folders-ui .add-new-root-folder { color: red; text-align: start; padding-left: 2rem; } #top #main li .collapse { display: none; color: inherit; float: left; cursor: pointer; z-index: 9; position: absolute; width: 20px; left: -20px; top: 1.5rem; transform: translateY(-50%); } #top #main li .collapse::before { display: block; background-size: contain; background-repeat: no-repeat; background-position: center; width: 1.5rem; height: 1.5rem; } #top #main li .collapse::before { content: ' '; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='52' height='52' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpolyline points='6 9 12 15 18 9' /%3E%3C/svg%3E"); background-size: 60%; } #top #main .subFoldersList ~ .collapse { display: block !important; } #top #main li .expanded::before { content: ' '; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='52' height='52' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpolyline points='6 15 12 9 18 15' /%3E%3C/svg%3E"); background-size: 60%; } /** * list pagination CSS * */ .buttons.pagination { display: flex; align-items: center; float: right; --item-width: 1.875rem; --item-height: 1.875rem; } #top .pagination .page_prev, #top .pagination .page_next { display: grid; place-items: center; background: transparent; width: var(--item-width); height: var(--item-height); max-width: none; border-radius: var(--border-radius); box-shadow: none; } #top .pagination .page_prev svg, #top .pagination .page_next svg { transform: scale(0.75); } .countItemsOutOfTotal { float: left; margin: 0 1rem; } .countItemsOutOfTotal span { line-height: 24px; padding: 2px; } #top .main_color .pagination .page_prev:hover, #top .main_color .pagination .page_next:hover { background: var(--clr-primary); } #top .main_color .pagination .page_prev:hover svg path, #top .main_color .pagination .page_next:hover svg path { fill: #fff; } #top .pagination a { width: 100%; background: transparent; } .pagination-bar { display: flex; background: #fff; box-shadow: var(--drop-shadow); border-radius: var(--border-radius); padding: 0.375rem; } .pagination-bar .pagination-pages { display: flex; } .pagination-bar .pagination-pages span { float: none; padding: 0; display: grid; place-items: center; border-radius: var(--border-radius); color: var(--clr-primary); background-color: #fff; transition: color 200ms, background-color 200ms; width: var(--item-width); height: var(--item-height); font-size: 0.875rem; font-weight: var(--weight-semibold); cursor: pointer; display: none; } .pagination-bar .pagination-pages span.active { background-color: var(--clr-primary); color: #fff; } .pagination-bar .pagination-pages span.active, .pagination-bar .pagination-pages span.in-scope { display: grid; } .pagination-bar .pagination-pages span.out-of-scope { display: none !important; } .pagination-bar .pagination-pages span.more { place-items: end; cursor: default; } .pagination-bar .pagination-pages span.more svg { max-width: 80%; height: auto; margin-bottom: -2px; } /** * * Skabeloner page * */ #top .skabeloner-buttons { text-align: end; margin-top: 0.5rem; margin-bottom: 2rem; } @media screen and (min-width: 768px) { #top .skabeloner-buttons { float: right; margin-bottom: 0; } } #top .skabeloner-buttons span { color: var(--clr-primary); } .switch { position: relative; display: inline-flex; height: 1.5rem; /* Rounded sliders */ } .switch .slider-wrapper { position: relative; width: 45px; flex: 1; margin-left: 0.5rem; margin-right: 0.5rem; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .switch .slider:before { position: absolute; content: ""; height: 1rem; width: 1rem; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } .switch input:checked + .slider { background-color: var(--clr-red); } .switch input:focus + .slider { box-shadow: 0 0 1px #2196F3; } .switch input:checked + .slider:before { -webkit-transform: translateX(1.3rem); -ms-transform: translateX(1.3rem); transform: translateX(1.3rem); } .switch .slider.round { border-radius: 1.5rem; } .switch .slider.round:before { border-radius: 50%; } .switch .inputInfoIcon { top: -0.5rem; } .switch span.icon { display: inline-block; width: 24px; height: 24px; } .switch span.flex-label { display: flex; gap: 0.25rem; align-items: flex-end; } #top .switch span.infoContent { color: #fff; transform: translateY(-100%); } .switch.with-infoContent { padding-inline-end: 2rem; } .global-templates-header { display: flex; } .global-templates-header h2 { cursor: pointer; } .global-templates-header h2::after { display: inline-block; content: ' '; background-image: var(--icon-chevron-up); background-size: contain; width: 1.5rem; height: 1.5rem; vertical-align: middle; margin-left: 1rem; } .global-templates-header h2.collapsed::after { background-image: var(--icon-chevron-down); } /** * * Indhentede Folders GUI * */ .folders-ui .subFolder:hover + .optionsLink { display: block; } /** * * copied from the plugin css files * */ #top #main #newFolderCreate { margin-bottom: 0; min-height: 50px; padding-inline-end: 1rem; } #top #main #newFolderCreate button.button { margin-block-start: 0.5rem; } #top #main .main_color .newFolder { display: none; position: absolute; top: 0; right: 0; font-size: 10px; } #top #main .main_color .newFolderInput { display: none; border-bottom: 2px solid #186165; position: relative; color: var(--clr-primary); font-size: 14px; font-weight: var(--font-weight-normal); margin: 0; } #top #main .main_color .renameFolderInput { width: calc(100% - 13px); } #top #main .main_color .newFolderInput.error, #top #main .main_color .renameFolderInput.error { border-color: #8b0000; } #top #main .sidebar .subFolder { display: block; } #top #main .optionsLink { content: ''; background-image: url("./images/dots_vert.png"); background-repeat: no-repeat; width: 40px; height: 40px; position: absolute; right: 0; top: 0; z-index: 20; background-size: 70%; padding: 0; margin: 0; background-position: center; display: none; } #top #main .sidebar a.optionsLink:hover, #top #main .sidebar a:hover ~ .optionsLink { display: block; } .menuOptions { display: none; position: absolute; top: -70px; background: #468184; width: auto; box-shadow: var(--drop-shadow); right: 0; padding: 5px 0 5px 10px; min-width: 140px; z-index: 30; border-radius: var(--border-radius); } .menuOptions a { font-size: 14px; text-transform: none; font-weight: normal; color: #dce7e8; line-height: 1.1; text-align: right; padding: 4px 20px 4px 0; background-repeat: no-repeat; background-size: 12px; display: block; height: 24px; width: auto; clear: both; float: right; vertical-align: middle; cursor: pointer; background-position: right center; margin: 0 10px 0 0; } .menuOptions a:hover { text-decoration: underline; } .menuOptions .createFolder { background-image: url("./images/newFolder.png"); } .menuOptions .renameFolder { background-image: url("./images/edit-white.svg"); } .menuOptions .deleteFolder { background-image: url("./images/delete-white.svg"); } #top #main .categories > .item-label ~ .menuOptions { top: 40px !important; } #top #main .categories > .item-label ~ .menuOptions .renameFolder, #top #main .categories > .item-label ~ .menuOptions .deleteFolder { display: none !important; } #top #main .subFoldersList { padding-top: 0; border: none; height: auto !important; overflow: visible !important; } #top #main .subFoldersList .subFoldersList { padding-left: 13px; display: none; } #top #main .subFoldersList li { padding-left: 0; padding-top: 0; padding-bottom: 0; margin: 0; } #top #main .subFoldersList li:before { display: none !important; } #top #main #renameFolder, #top #main #renameFolderInput { margin-bottom: 0; } #top #main #renameFolderInput { color: var(--clr-primary); background: transparent; font-size: 14px; } .top_form_fields { display: grid; grid-template-columns: 1fr; column-gap: 1.5rem; row-gap: 1rem; } @media screen and (min-width: 768px) { .top_form_fields { grid-template-columns: repeat(4, 1fr); } } .top_form_fields .full_width_input { grid-column: span 4; } /** * 2024 * New design for input fields * */ #top #main .pcsig .giver_form_fields .form_field .tooltip { display: none !important; } #top #main .pcsig .giver_form_fields .form_field label { display: block; width: 100%; float: none; font-weight: var(--weight-bold); margin-bottom: 0.5rem; } #top #main .pcsig .giver_form_fields .form_field input { height: unset; margin-bottom: 0; padding: 0.75rem 1rem; line-height: 1.5; background: #fff; border: none; border-radius: var(--border-radius); } .photoconsent_form .form_field { position: relative; } .photoconsent_form .form_field span { float: none !important; } @media screen and (min-width: 990px) { .photoconsent_form > .full_width_input { padding-left: 2rem; padding-right: 2rem; } .photoconsent_form > .full_width_input .inputInfoIcon { right: 2rem; } } .photoconsent_form span.no-picture { display: block; text-align: center; } #top #main .variable-fields-inputs { display: grid; grid-template-columns: 1fr; column-gap: 1.5rem; row-gap: 1rem; margin: 40px -2px 40px; } @media screen and (min-width: 768px) { #top #main .variable-fields-inputs { grid-template-columns: repeat(4, 1fr); } } #top #main .variable-fields-inputs .full_width_input { grid-column: span 4; } #top #main .variable-fields-inputs .form_field { width: 100%; display: flex; align-items: center; } #top #main .variable-fields-inputs .form_field label { flex: 1 0 auto; color: var(--clr-text); font-weight: var(--font-weight-normal); margin-inline-end: 0.5rem; } #top #main .variable-fields-inputs .form_field input[type="text"] { font-weight: var(--font-weight-normal); margin-bottom: 0; } #top .wpkqcg_qrcode_wrapper + .photoconsent_buttons { margin-top: 2rem; } #top .main_color .photoconsent_buttons { clear: both; float: none; /** * * .add-folder is a complex widget that rolls down * an UL to choose the folder.... * */ } @media screen and (min-width: 768px) { #top .main_color .photoconsent_buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; column-gap: 1.5rem; row-gap: 1rem; } #top .main_color .photoconsent_buttons .show-stats-code-wrapper, #top .main_color .photoconsent_buttons .saveform { margin: 0 !important; } } @media screen and (min-width: 990px) { #top .main_color .photoconsent_buttons { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; } } #top .main_color .photoconsent_buttons .button, #top .main_color .photoconsent_buttons button { display: block; border-radius: var(--border-radius); box-shadow: 0px 2px 8px 0px rgba(28, 43, 72, 0.1); min-width: 9.375rem; min-width: clamp(6rem, 9.375rem, 100%); padding: 0.5rem 1rem 0.4735rem; font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--clr-white); text-align: center; line-height: 1.65; background-color: var(--clr-primary); transition: background-color 200ms; cursor: pointer; display: flex; align-items: center; justify-content: center; padding-top: 0.75rem; padding-bottom: 0.75rem; } #top .main_color .photoconsent_buttons .button:is(button), #top .main_color .photoconsent_buttons button:is(button) { appearance: none; border: none; cursor: pointer; line-height: 1.65; } #top .main_color .photoconsent_buttons .button:hover, #top .main_color .photoconsent_buttons button:hover { background-color: var(--clr-primary-dark); text-decoration: none; color: var(--clr-white); } #top .main_color .photoconsent_buttons .button:active, #top .main_color .photoconsent_buttons .button:focus, #top .main_color .photoconsent_buttons button:active, #top .main_color .photoconsent_buttons button:focus { background-color: var(--clr-primary-dark); } #top .main_color .photoconsent_buttons .button:disabled, #top .main_color .photoconsent_buttons .button.disabled, #top .main_color .photoconsent_buttons button:disabled, #top .main_color .photoconsent_buttons button.disabled { pointer-events: none; background-color: #99aac4; user-select: none; } #top .main_color .photoconsent_buttons .button.pill-button-micro, #top .main_color .photoconsent_buttons button.pill-button-micro { padding: 0.5rem 0.75rem; min-width: unset; } #top .main_color .photoconsent_buttons .button.pill-button-big, #top .main_color .photoconsent_buttons button.pill-button-big { font-weight: var(--weight-bold); padding: 1.25rem 1.5rem; } #top .main_color .photoconsent_buttons .button.faded, #top .main_color .photoconsent_buttons button.faded { background-color: #99aac4; } #top .main_color .photoconsent_buttons .button.btn-semi-transparent, #top .main_color .photoconsent_buttons button.btn-semi-transparent { opacity: 0.5; } #top .main_color .photoconsent_buttons .button.btn-semi-transparent:hover, #top .main_color .photoconsent_buttons button.btn-semi-transparent:hover { opacity: 1; } #top .main_color .photoconsent_buttons .button.has-icon, #top .main_color .photoconsent_buttons button.has-icon { display: flex; justify-content: center; gap: 0.5rem; align-items: center; white-space: nowrap; } #top .main_color .photoconsent_buttons .button .icon, #top .main_color .photoconsent_buttons button .icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } #top .main_color .photoconsent_buttons .button .icon svg, #top .main_color .photoconsent_buttons button .icon svg { width: 100%; height: auto; } #top .main_color .photoconsent_buttons .button + button, #top .main_color .photoconsent_buttons .button + .button, #top .main_color .photoconsent_buttons button + button, #top .main_color .photoconsent_buttons button + .button { margin-top: 1rem; } @media screen and (min-width: 768px) { #top .main_color .photoconsent_buttons .button + button, #top .main_color .photoconsent_buttons .button + .button, #top .main_color .photoconsent_buttons button + button, #top .main_color .photoconsent_buttons button + .button { margin-left: 0; margin-top: 0; } } #top .main_color .photoconsent_buttons .button.button-back, #top .main_color .photoconsent_buttons .button.button-forward, #top .main_color .photoconsent_buttons button.button-back, #top .main_color .photoconsent_buttons button.button-forward { padding-left: 1.4375rem; padding-right: 1.4375rem; justify-content: space-between; } #top .main_color .photoconsent_buttons .button.button-back svg, #top .main_color .photoconsent_buttons .button.button-forward svg, #top .main_color .photoconsent_buttons button.button-back svg, #top .main_color .photoconsent_buttons button.button-forward svg { max-width: 15px; height: auto; } #top .main_color .photoconsent_buttons .button.button-back, #top .main_color .photoconsent_buttons button.button-back { background-color: var(--clr-secondary-bg); } #top .main_color .photoconsent_buttons .button.button-forward, #top .main_color .photoconsent_buttons button.button-forward { min-width: 182px; } #top .main_color .photoconsent_buttons .button.button-forward svg, #top .main_color .photoconsent_buttons button.button-forward svg { order: 2; } #top .main_color .photoconsent_buttons .button[name="back-button"], #top .main_color .photoconsent_buttons button[name="back-button"] { margin-block-start: 2rem; padding-block: 0.75rem; } @media screen and (min-width: 990px) { #top .main_color .photoconsent_buttons .button[name="back-button"], #top .main_color .photoconsent_buttons button[name="back-button"] { margin-block-start: 0; } } #top .main_color .photoconsent_buttons .button.show-stats-code, #top .main_color .photoconsent_buttons .button.add-folder, #top .main_color .photoconsent_buttons button.show-stats-code, #top .main_color .photoconsent_buttons button.add-folder { background-color: transparent; box-shadow: none; color: var(--clr-light-secondary); } #top .main_color .photoconsent_buttons .button.show-stats-code svg, #top .main_color .photoconsent_buttons .button.add-folder svg, #top .main_color .photoconsent_buttons button.show-stats-code svg, #top .main_color .photoconsent_buttons button.add-folder svg { max-width: 2rem; height: auto; margin-right: 0.8125rem; } #top .main_color .photoconsent_buttons .button.show-stats-code path, #top .main_color .photoconsent_buttons .button.add-folder path, #top .main_color .photoconsent_buttons button.show-stats-code path, #top .main_color .photoconsent_buttons button.add-folder path { stroke: var(--clr-light-secondary); } @media screen and (max-width: 767px) { #top .main_color .photoconsent_buttons button.button { width: 100%; } } #top .main_color .photoconsent_buttons a.button { padding-top: 0.55rem; padding-bottom: 0.55rem; } #top .main_color .photoconsent_buttons .add-folder { --height: 2.3rem; flex: 1 0 auto; display: flex; color: var(--clr-light-secondary); } #top .main_color .photoconsent_buttons .add-folder svg { max-width: 2rem; height: auto; margin-right: 0.8125rem; } #top .main_color .photoconsent_buttons .add-folder path { stroke: var(--clr-light-secondary); } #top .main_color .photoconsent_buttons .add-folder .add-folder-inner { position: relative; flex: 1 0 auto; } @media screen and (min-width: 990px) { #top .main_color .photoconsent_buttons .add-folder .add-folder-inner { max-width: 25ch; } } #top .main_color .photoconsent_buttons .add-folder .chosen-folder { margin-block-end: 0; } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore { position: absolute; top: 0; left: 0; width: 100%; margin: 0; z-index: 2; list-style: none; margin-top: var(--height); overflow: hidden; max-height: 0; transition: .3s ease-in-out; background: #fff; box-shadow: var(--drop-shadow); } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore.open { padding-block: 1rem; max-height: 320px; overflow: auto; } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore li { margin-inline-start: 0; padding: 0.25em 0.5em; cursor: pointer; text-align: start; line-height: 1.2; } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore li:hover { font-weight: var(--weight-semibold); background: var(--clr-primary-bg); } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore li.closed { max-height: 0; overflow: hidden; padding: 0; opacity: 0; } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore li[data-indentation] .caption { display: flex; } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore li[data-indentation] .caption::before { display: inline-block; content: " "; height: 2px; margin-block-start: 0.7em; vertical-align: middle; background: var(--clr-secondary-bg); margin-inline-end: 1ch; } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore li[data-indentation="0"] .caption::before { display: none; } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore li[data-indentation="1"] .caption::before { width: calc( 1ch * 1); } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore li[data-indentation="2"] .caption::before { width: calc( 1ch * 2); } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore li[data-indentation="3"] .caption::before { width: calc( 1ch * 3); } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore li[data-indentation="4"] .caption::before { width: calc( 1ch * 4); } #top .main_color .photoconsent_buttons .add-folder ul.___not_anymore li[data-indentation="5"] .caption::before { width: calc( 1ch * 5); } #top .main_color .photoconsent_buttons .show-stats-code-wrapper { position: relative; display: flex; margin-block: 1rem; text-align: start; } #top .main_color .photoconsent_buttons .show-stats-code-wrapper .show-stats-code { position: relative; flex: 1; } @media screen and (max-width: 540px) { #top .main_color .photoconsent_buttons .show-stats-code-wrapper .show-stats-code input { min-width: unset; } } #top .main_color .photoconsent_buttons .show-stats-code-wrapper svg { flex: 1 0 auto; max-width: 2rem; height: auto; margin-right: 0.8125rem; } #top .main_color .photoconsent_buttons .show-stats-code-wrapper svg path { stroke: var(--clr-light-secondary); } #top .main_color .photoconsent_buttons .show-stats-code-wrapper input { min-width: 28ch; } #top .main_color .photoconsent_buttons .show-stats-code-wrapper .infoContent { top: 0; transform: translateY(-100%); } @media screen and (min-width: 768px) { #top .main_color .photoconsent_buttons .show-stats-code-wrapper { margin-block: 0; } } @media screen and (min-width: 990px) { #top .main_color .photoconsent_buttons .show-stats-code-wrapper { margin-inline-end: 2rem; margin-block: 0.25rem; } } #top .main_color .photoconsent_buttons .lock-template { text-align: start; flex: 1 auto; } @media screen and (min-width: 990px) { #top .main_color .photoconsent_buttons .lock-template { text-align: end; width: 40vw; } } @media screen and (min-width: 1220px) { #top .main_color .photoconsent_buttons .lock-template { width: auto; } } /* * new select/dropdown library styles */ #top .lcslt-wrap.lcslt-f-folder_selector { width: 100%; } #top .lcslt.lcslt-f-folder_selector { border: none; border-bottom: 2px solid #c3d1de; background-color: transparent; padding: 8px 6px 4px; outline: none; width: 100%; } #top .lcslt.lcslt-f-folder_selector > span { font-family: var(--font-open-sans); font-weight: var(--weight-semibold); font-size: 14px; color: var(--clr-text); } #top .lcslt.lcslt-f-folder_selector > span.lcslt-placeholder { color: #77a2a4; } #lc-select-dd { border-color: var(--clr-primary); border-color: #c3d1de; font-family: var(--font-open-sans); font-weight: var(--weight-regular); } #lc-select-dd .lcslt-search-li { border-bottom: none !important; } #lc-select-dd .lcslt-search-li input[type="text"] { margin-bottom: 0; font-family: var(--font-open-sans); font-weight: var(--weight-regular); font-size: 0.8rem; border: none; } #lc-select-dd .lcslt-search-li::before { width: 26px; height: 26px; background-color: transparent; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-search' width='44' height='44' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0' /%3E%3Cpath d='M21 21l-6 -6' /%3E%3C/svg%3E"); mask: unset; } #lc-select-dd li > span { display: flex; font-family: var(--font-open-sans); padding-left: 5px; } #lc-select-dd .lcslt-img { --_bg-icon-size: 40px; background-position: left center; background-size: var(--_bg-icon-size); width: var(--_bg-icon-size); margin-left: calc(5px + var(--_bg-icon-size) / 2 - 10px); opacity: 0; } #lc-select-dd .lcslt-img[style*="tab-1.svg"] { --_bg-icon-size: 10px; } #lc-select-dd .lcslt-img[style*="tab-2.svg"] { --_bg-icon-size: 20px; } #lc-select-dd .lcslt-img[style*="tab-3.svg"] { --_bg-icon-size: 30px; } #lc-select-dd .lcslt-img[style*="tab-4.svg"] { --_bg-icon-size: 40px; } #lc-select-dd li.lcslt-dd-opt:not(.lcslt-disabled):not(.lcslt-selected):hover, #lc-select-dd .lcslt-dd-opt-hlight, #lc-select-dd li.lcslt-selected { background-color: var(--clr-primary); color: #fff; } div#lc-select-dd li.lcslt-selected, div#lc-select-dd li.lcslt-selected.lcslt-dd-opt-hlight { box-shadow: 6px 0 0 #77a2a4 inset; } #top .main_color .lock-template { position: relative; padding-top: .5rem; padding-bottom: .5rem; margin-top: 2rem; margin-bottom: 1rem; } #top .consent_content { background: var(--clr-white); border-radius: 4px; background-color: white; box-shadow: var(--drop-shadow); padding: 2rem; } #top .consent_content .preview_form_fields label { font-weight: normal; } #top .consent_content .preview_form_fields:not(.half_width_section) { float: none; margin-bottom: 2.8125rem; } #top .consent_content .logoSection { float: right; margin-bottom: 2.8125rem; } @media screen and (min-width: 768px) { #top .consent_content .giver_form_fields { max-width: 260px; } } #top .consent_content .giver_form_fields h3 { font-size: 1.3125rem; } #top .consent_content .input-text, #top .consent_content input[type="text"], #top .consent_content input[type="input"], #top .consent_content input[type="password"], #top .consent_content input[type="email"], #top .consent_content input[type="number"], #top .consent_content input[type="url"], #top .consent_content input[type="tel"], #top .consent_content textarea, #top .consent_content select { background: transparent !important; } #top #main #consent_content { margin-top: 4rem; line-height: 1.5; } #top #main #consent_content h1, #top #main #consent_content h2, #top #main #consent_content h3, #top #main #consent_content h4, #top #main #consent_content h5, #top #main #consent_content h6 { text-align: start; } #top #main #consent_content * { overflow-wrap: anywhere; } /** * * a single form on customize mode: */ form#photoconsent_form_customize h2 { margin-bottom: 3rem; } form#photoconsent_form_customize h2 span.title { font-style: italic; } @media screen and (min-width: 990px) { form#photoconsent_form_customize .photoconsent_section.showInPreview { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto auto; column-gap: 2.5rem; row-gap: 2rem; align-items: end; } form#photoconsent_form_customize .photoconsent_section.showInPreview .title-editor-wrapper { grid-column: span 2; grid-row: 1; } form#photoconsent_form_customize .photoconsent_section.showInPreview .top-button-wrapper { grid-column: 2 / span 3; grid-row: 3; } #top #main form#photoconsent_form_customize .photoconsent_section.showInPreview .form-post-excerpt { grid-column: span 2; grid-row: 2; } #top #main form#photoconsent_form_customize .photoconsent_section.showInPreview .form-post-excerpt textarea { max-width: 100%; } form#photoconsent_form_customize .photoconsent_section.showInPreview .folder-assignment { grid-column: span 1; grid-row: 2; margin-bottom: 1.25rem; } form#photoconsent_form_customize .photoconsent_section.showInPreview .lock-template { grid-column: span 1; grid-row: 2; min-width: 240px; align-self: end; text-align: end; } } form#photoconsent_form_customize .photoconsent_section.showInPreview .title-editor-wrapper h2, form#photoconsent_form_customize .photoconsent_section.showInPreview .description-editor-wrapper h2 { font-size: 1rem; } form#photoconsent_form_customize .photoconsent_section.showInPreview .title-editor-wrapper .tooltip, form#photoconsent_form_customize .photoconsent_section.showInPreview .description-editor-wrapper .tooltip { display: none !important; } form#photoconsent_form_customize .photoconsent_section.showInPreview .full_width_input { margin-top: 1rem; } form#photoconsent_form_customize .photoconsent_section.showInPreview .description-editor-wrapper { margin-top: var(--spacer); } form#photoconsent_form_customize .photoconsent_section.showInPreview .top-button-wrapper { margin-top: 1.5rem; } @media screen and (min-width: 990px) { form#photoconsent_form_customize .photoconsent_section.showInPreview .top-button-wrapper { margin-top: 0; } } @media screen and (min-width: 768px) { form#photoconsent_form_customize .photoconsent_buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; column-gap: 1.5rem; row-gap: 0rem; } form#photoconsent_form_customize .photoconsent_buttons > * { grid-column: unset; grid-row: unset; } } form#photoconsent_form_customize .folder-assignment { display: grid; grid-template-columns: 1fr 24px; align-items: end; gap: 0.75rem; } form#photoconsent_form_customize .folder-assignment label { grid-column: 1 / -1; } form#photoconsent_form_customize .editable-toolbar > div { margin-bottom: 1rem; display: flex; flex-wrap: wrap; } form#photoconsent_form_customize .editable-toolbar button { flex: 1; } @media screen and (min-width: 768px) { form#photoconsent_form_customize .editable-toolbar button { flex: unset; } } :root { --clr-dark-green: #386b70; --app-height: 100%; } @keyframes pcsig-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes pcsig-fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .responsive body.form-signing-view#top { font-family: var(--font-pc-design); font-weight: var(--weight-regular); padding: 0; } .responsive body.form-signing-view#top main.template-page, .responsive body.form-signing-view#top form.photoconsent_form { padding-block: 0; margin-block: 0; margin-block-end: 0; } .responsive body.form-signing-view#top #main .main_color .container { display: block; padding-inline: 0; } .responsive body.form-signing-view#top .main_color.sidebar_left main article { padding-left: 0; padding-right: 0; } /** * * Layout * */ .pcsig__panel { --_inline-padding: 1.25rem; grid-area: body; height: 100%; overflow: auto; display: none; padding-top: 1.5rem; } .pcsig__panel.active { display: grid; grid-template-columns: var(--_inline-padding) 1fr var(--_inline-padding); align-content: start; } .pcsig__panel.active > * { grid-column: 2; } .pcsig__panel.active > .pcsig__panel--wide { grid-column: 1 / -1; } /** * * Styling * */ #top .pcsig__navigation-buttons .pill-button.signForm, #top .pcsig__navigation-buttons .thankyou-row { display: none; } #top .pcsig__navigation-buttons .signForm.waiting { display: flex; } #top .pcsig.full-content-mode .pcsig__content { grid-row-start: header !important; grid-row-end: footer !important; } #top .pcsig.full-content-mode .pcsig__header, #top .pcsig.full-content-mode .pcsig__navigation-buttons { display: none !important; } #top .pcsig.thankyou-mode .pcsig__content { grid-row-start: body !important; grid-row-end: footer !important; } #top .pcsig.thankyou-mode .pcsig__breadcrumb { display: none !important; } #top .pcsig.thankyou-mode .pcsig__navigation-buttons .onboarding-row { display: none; } #top .pcsig.thankyou-mode .pcsig__navigation-buttons .thankyou-row { width: 100%; display: flex; justify-content: space-between; gap: 1rem; } .expired-notice { width: 80vw; max-width: 32ch; margin: 20vh auto 12vh; } #top #main .main_color .pcsig { --inner-color-bg: #E3E6E8; --border-radius: 12px; background: var(--clr-white-green); /** * * Little top widget that show title and progress * with a breadcrumb * */ /* each page of the consent */ } #top #main .main_color .pcsig .pcsig__background { display: none; } #top #main .main_color .pcsig .pcsig__content-outer { --color-text: var(--clr-black); --color-darkest: var(--clr-black); --color-btn-bg: var(--clr-dark-primary-bg); --color-btn-text: #fff; max-width: var(--pcsig_content_width); margin-inline: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: min-content auto 75px; grid-template-rows: auto 1fr 75px; grid-template-areas: "header" "body" "footer"; background: var(--inner-color-bg); color: var(--color-text); min-height: 100vh; min-height: 100svh; height: calc(100 * var(--vh)); border-left: var(--border-thinest); border-right: var(--border-thinest); padding-bottom: 12px; } @supports (min-height: -webkit-fill-available) { #top #main .main_color .pcsig .pcsig__content-outer { min-height: -webkit-fill-available; } } @supports (height: 100dvh) { #top #main .main_color .pcsig .pcsig__content-outer { height: 100dvh; } } #top #main .main_color .pcsig .pcsig__content-outer.pcsig__content-outer--dark { --color-text: #fff; --color-btn-bg: #fff; --color-btn-text: var(--clr-dark-secondary-bg); } #top #main .main_color .pcsig .pcsig__content-outer .pcsig__navigation-buttons { grid-area: footer; place-self: center; width: 100%; padding-inline: 1.25rem; } #top #main .main_color .pcsig .pcsig__content-outer .pcsig__content { grid-area: body; overflow: auto; width: 100%; max-width: var(--pcsig_content_width); margin-inline: auto; } #top #main .main_color .pcsig .pcsig__content-outer .pcsig__content .pcsig__panel.pcsig__step { height: 100%; overflow: auto; } @media screen and (min-width: 990px) { #top #main .main_color .pcsig .pcsig__content-outer .pcsig__content { padding-block: 0.5rem; margin-inline-start: 0; margin-inline-end: auto; } } #top #main .main_color .pcsig strong { color: inherit; } #top #main .main_color .pcsig h1, #top #main .main_color .pcsig h2, #top #main .main_color .pcsig h3, #top #main .main_color .pcsig h4, #top #main .main_color .pcsig h5, #top #main .main_color .pcsig h6, #top #main .main_color .pcsig span { color: var(--color-text); } #top #main .main_color .pcsig h3 { font-size: 1rem; font-family: var(--font-pc-design); } #top #main .main_color .pcsig .panel-title { font-size: 1rem; font-weight: var(--weight-bold); text-align: center; color: var(--clr-black); } #top #main .main_color .pcsig .panel-title--big { font-size: 1.75rem; text-align: start; } #top #main .main_color .pcsig .panel-giver-fields h2.consent_title { font-size: 1.6rem; } #top #main .main_color .pcsig input[type="checkbox"] { --_w: 2.25rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; position: relative; margin: 0; display: inline-block; vertical-align: bottom; width: var(--_w); height: var(--_w); margin-inline-end: 1.25rem; border-radius: var(--_w); accent-color: var(--clr-primary-dark); background-color: var(--clr-primary-bg); } #top #main .main_color .pcsig input[type="checkbox"]::before { position: absolute; display: block; content: " "; box-sizing: border-box; width: 100%; height: 100%; border-radius: var(--_w); background-image: var(--icon-checkbox-circle); background-position: center; background-repeat: no-repeat; } #top #main .main_color .pcsig input[type="checkbox"]::after { display: block; content: " "; pointer-events: none; box-sizing: border-box; width: 100%; height: 100%; border-radius: 100px; background-image: var(--icon-checkbox-v); background-position: center; background-repeat: no-repeat; transition: opacity 200ms; opacity: 0; } #top #main .main_color .pcsig input[type="checkbox"]:checked::after { opacity: 1; } #top #main .main_color .pcsig .pill-button { background: var(--color-btn-bg); color: var(--color-btn-text); font-family: var(--font-pc-design); font-weight: var(--font-weight-regular); border: 1px solid var(--clr-dark-primary-bg); box-shadow: none; font-size: 1rem; padding: 0.75rem 1.5rem; line-height: 1.375; } #top #main .main_color .pcsig .pill-button.btn-secondary { --color-btn-text: var(--clr-dark-primary-bg); --color-btn-bg: transparent; } #top #main .main_color .pcsig .pill-button.btn-tertiary { --color-btn-text: var(--clr-dark-primary-bg); --color-btn-bg: transparent; opacity: 0.5; } #top #main .main_color .pcsig .pill-button.btn-tertiary path, #top #main .main_color .pcsig .pill-button.btn-tertiary circle, #top #main .main_color .pcsig .pill-button.btn-tertiary g { stroke: var(--color-btn-text); } #top #main .main_color .pcsig .pill-button.btn-disabled { opacity: 0.5; } #top #main .main_color .pcsig .pill-button.faded { background-color: var(--clr-secondary); color: var(--clr-light-primary-bg); } #top #main .main_color .pcsig .qrcode-wrapper { background: #fff; padding: 1.25rem; display: inline-block; margin-left: auto; margin-right: auto; margin-block-end: 1rem; border-radius: var(--border-radius); } @media screen and (min-width: 990px) { #top #main .main_color .pcsig .qrcode-wrapper { padding: 1.5rem; } } #top #main .main_color .pcsig .qrcode-wrapper img { width: 100%; } #top #main .main_color .pcsig .pcsig__header { --_c_height: 68px; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 35vh; max-height: var(--_c_height); transition: max-height 500ms; background-color: #fff; } #top #main .main_color .pcsig .pcsig__header.active .pcsig__breadcrumb { display: flex; margin-top: auto; } #top #main .main_color .pcsig .pcsig__header.presentation-mode { height: 35vh; max-height: 35vh; } #top #main .main_color .pcsig .pcsig__header.presentation-mode .pcsig__breadcrumb { display: none; } #top #main .main_color .pcsig .pcsig__header.presentation-mode .signing-logo img { max-width: 80%; max-height: 35vh; width: 100%; height: 100%; object-fit: contain; } #top #main .main_color .pcsig .pcsig__header .signing-logo { margin-top: auto; margin-bottom: auto; } #top #main .main_color .pcsig .pcsig__header .signing-logo img { display: block; align-self: center; margin-inline: auto; max-height: 50px; max-width: 90%; width: auto; transition: max-width 500ms, max-height 500ms; } #top #main .main_color .pcsig .pcsig__header h2 { display: none; font-size: 1.25rem; color: #000; font-weight: var(--weight-bold); margin-block-start: 1.25rem; } @media screen and (min-width: 990px) { #top #main .main_color .pcsig .pcsig__header { padding-block-start: 0; } } #top #main .main_color .pcsig .pcsig__breadcrumb { --x-size: 2.1875rem; --y-size: 2px; display: flex; justify-content: space-between; gap: 0; position: relative; width: 100%; margin-block-start: 1.25rem; margin-block-end: 0; } #top #main .main_color .pcsig .pcsig__breadcrumb .step { display: flex; flex: 1; align-items: center; justify-content: center; position: relative; text-indent: -9999px; width: var(--x-size); height: var(--y-size); background-color: var(--clr-light-secondary-bg); border-radius: 0; } #top #main .main_color .pcsig .pcsig__breadcrumb .step::after { position: absolute; top: 0; left: 0; content: " "; width: 100%; height: var(--y-size); max-width: 0; background-color: var(--clr-primary-dark); transition: max-width 400ms; transform-origin: center left; } #top #main .main_color .pcsig .pcsig__breadcrumb .step.active::after, #top #main .main_color .pcsig .pcsig__breadcrumb .step.checked::after { max-width: 100%; } #top #main .main_color .pcsig .pcsig__breadcrumb .step.disabled { pointer-events: none; } #top #main .main_color .pcsig .pcsig__navigation-buttons .navigation-row { justify-content: space-between; display: none; } #top #main .main_color .pcsig .pcsig__navigation-buttons .navigation-row.active { display: flex; } #top #main .main_color .pcsig .pcsig__navigation-buttons .onboarding-row { justify-content: space-between; display: none; } #top #main .main_color .pcsig .pcsig__navigation-buttons .onboarding-row.active { display: flex; } @media screen and (min-width: 990px) { #top #main .main_color .pcsig .pcsig__navigation-buttons { justify-content: end; } } #top #main .main_color .pcsig div.panel-onboarding { grid-area: header / body / footer; flex-direction: column; padding: 3.75rem 0 3.125rem; } #top #main .main_color .pcsig div.panel-onboarding.active { place-content: center; grid-row-start: 1; grid-row-end: 3; } @media screen and (min-width: 990px) { #top #main .main_color .pcsig div.panel-onboarding { padding-inline: 0; } } #top #main .main_color .pcsig div.panel-onboarding h1 { min-height: 4.625rem; text-align: center; } #top #main .main_color .pcsig div.panel-onboarding h1 img { max-width: 100%; max-height: 120px; width: auto; } #top #main .main_color .pcsig div.panel-onboarding h2 { font-size: 1.75rem; font-weight: var(--weight-bold); text-align: center; margin-block-end: 3.25rem; } #top #main .main_color .pcsig div.panel-onboarding .form_client_fields { margin-block-start: 3.125rem; } #top #main .main_color .pcsig div.panel-onboarding .form_client_fields .form_field { line-height: 1.5625; } #top #main .main_color .pcsig div.panel-onboarding .form_client_fields .input_placeholder { font-weight: var(--font-weight-regular); } #top #main .main_color .pcsig div.panel-onboarding .button-row { margin-block-start: auto; } #top #main .main_color .pcsig .giver_form_fields { display: grid; grid-template-columns: 35% auto; column-gap: MAX(2%, 1rem); row-gap: 1.5rem; } #top #main .main_color .pcsig .giver_form_fields .form_field { margin-top: 0; } #top #main .main_color .pcsig .giver_form_fields .form_field input::placeholder { font-weight: normal !important; } #top #main .main_color .pcsig .giver_form_fields .form_field .required-field-warning { margin-top: 8px; font-size: 0.8125rem; line-height: 1.5; color: var(--clr-error); } #top #main .main_color .pcsig .giver_form_fields h3, #top #main .main_color .pcsig .giver_form_fields .form_field:not(.wrap_giver_zip):not(.wrap_giver_city) { grid-column: 1 / -1; } #top #main .main_color .pcsig .giver_form_fields .wrap_giver_zip, #top #main .main_color .pcsig .giver_form_fields .wrap_giver_city { width: auto; float: none; max-width: unset; } #top #main .main_color .pcsig div.panel-consent-content { /** * * The signer fields on the last page. * */ } #top #main .main_color .pcsig div.panel-consent-content .panel-title { padding-left: 1rem; padding-right: 1rem; margin-bottom: 1rem; } #top #main .main_color .pcsig div.panel-consent-content.panel-consent-content--first .consent-page { padding-top: 5rem; } #top #main .main_color .pcsig div.panel-consent-content.panel-consent-content--last .consent-page { padding-bottom: 1rem; } #top #main .main_color .pcsig div.panel-consent-content .consent-page { border-radius: var(--border-radius); background-color: white; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); padding: 2rem 1rem 2rem; margin-bottom: 2rem; overflow-wrap: anywhere; } #top #main .main_color .pcsig div.panel-consent-content .consent-page > :last-child { margin-bottom: 0; } #top #main .main_color .pcsig div.panel-consent-content .consent-page h1, #top #main .main_color .pcsig div.panel-consent-content .consent-page h2 { margin-top: 0.2em; font-size: 1.25rem; } #top #main .main_color .pcsig div.panel-consent-content .consent-page h3 { font-size: 1.125rem; } #top #main .main_color .pcsig div.panel-consent-content .consent-page h4, #top #main .main_color .pcsig div.panel-consent-content .consent-page h5, #top #main .main_color .pcsig div.panel-consent-content .consent-page h6 { font-size: 1rem; } #top #main .main_color .pcsig div.panel-consent-content .consent-page p:has(span:empty) { display: none; } #top #main .main_color .pcsig div.panel-consent-content .consent-page input[type="text"].form_generic_textinput { display: inline-block; margin-inline-start: 1.25rem; width: auto; background-color: var(--clr-white-green); } #top #main .main_color .pcsig div.panel-consent-content .preview_form_fields { float: none; display: block; margin-block: 0.5rem 0; } #top #main .main_color .pcsig div.panel-consent-content .preview_form_fields .form_field label { float: none; display: block; color: rgba(32, 32, 32, 0.5); font-size: 0.75rem; line-height: 2; font-weight: var(--weight-bold); } #top #main .main_color .pcsig div.panel-consent-content .preview_form_fields .form_field .input_placeholder { --color-text: var(--clr-black); font-size: 1rem; line-height: 1.5; font-weight: var(--weight-normal); } #top #main .main_color .pcsig div.panel-consent-content .preview_form_fields .form_field .input_placeholder:empty { min-width: 50% !important; display: inline-block; opacity: 0.5; border-bottom: 1px dashed var(--clr-dark-green); } #top #main .main_color .pcsig div.panel-consent-content .terms-wrapper { position: sticky; bottom: 0; background: var(--clr-primary-bg); border-top: var(--border-thinest); padding-top: 1.5rem; } #top #main .main_color .pcsig div.panel-consent-content .terms-wrapper .full_width_section { padding-inline: 1.25rem; padding-bottom: 1.25rem; margin-top: 0; margin-bottom: 0; transition: opacity 500ms; } #top #main .main_color .pcsig div.panel-consent-content .terms-wrapper .full_width_section label { font-weight: var(--weight-normal); } #top #main .main_color .pcsig div.panel-consent-content .terms-wrapper .full_width_section.disabled { opacity: 0.5; } #top #main .main_color .pcsig label[for="termsAndConditions"].error { color: var(--clr-error); } #top #main .main_color .pcsig .panel-controls { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; min-height: 44px; margin-bottom: 12px; } #top #main .main_color .pcsig .panel-controls .btn-back { display: flex; gap: .25rem; align-items: center; min-width: unset; background-color: transparent; color: var(--clr-black); padding: 0; font-weight: var(--weight-normal); box-shadow: none; } #top #main .main_color .pcsig .panel-controls .btn-back .icon { width: 1rem; height: auto; } #top #main .main_color .pcsig .panel-controls .btn-back .icon svg { display: block; } #top #main .main_color .pcsig div.panel-more-information h2 { margin-bottom: 2rem; } #top #main .main_color .pcsig div.panel-more-information .panel-title { text-align: start; margin-bottom: 1rem; } #top #main .main_color .pcsig div.panel-more-information .form_field label { display: block; margin-top: 0.5rem; font-weight: var(--weight-normal); font-size: 0.75rem; line-height: 2; color: rgba(32, 32, 32, 0.5); } #top #main .main_color .pcsig div.panel-more-information .form_field .input_placeholder { font-size: 1rem; line-height: 1; font-weight: var(--weight-normal); } #top #main .main_color .pcsig div.panel-more-information .form_field .input_placeholder a { color: var(--clr-primary); text-decoration: underline; } #top #main .main_color .pcsig div.panel-more-information .show_stats_wrapper { margin-top: 3rem; } #top #main .main_color .pcsig div.panel-more-information .show_stats_wrapper label[for="show_stats_input"] { display: block; margin-top: 1rem; margin-bottom: 0.5rem; } #top #main .main_color .pcsig div.panel-more-information .button-row { margin-top: 1rem; margin-bottom: 1rem; } #top #main .main_color .pcsig div.panel-more-information .stats-spinner { display: none; width: 32px; height: auto; margin: 2rem auto; } #top #main .main_color .pcsig div.panel-more-information .stats-spinner.activated { display: block; } #top #main .main_color .pcsig div.panel-statistics #statsContainer .mobile-scroller, #top #main .main_color .pcsig div.panel-statistics #statsContainer table { border-radius: 0; } #top #main .main_color .pcsig div.panel-thankyou { padding-block-start: 1.5rem; position: relative; min-height: 100%; justify-content: space-between; } #top #main .main_color .pcsig div.panel-thankyou.active { align-content: space-between; } #top #main .main_color .pcsig div.panel-thankyou h3 { font-size: 1.25rem; text-align: center; font-weight: var(--weight-bold); } #top #main .main_color .pcsig div.panel-thankyou .thankyou-animation-wrapper { width: 192px; aspect-ratio: 1/1; height: auto; max-width: 90vw; margin-top: 94px; margin-inline: auto; } #top #main .main_color .pcsig div.panel-thankyou .ref-number-wrapper { margin-top: 1.5rem; color: rgba(32, 32, 32, 0.5); font-size: 0.75rem; text-align: center; } #top #main .main_color .pcsig div.panel-thankyou .ref-number-wrapper .value { color: inherit; } #top #main .main_color .pcsig div.panel-thankyou .button-row { justify-content: space-between; margin-top: 0; margin-bottom: 1rem; } #top #main .main_color .pcsig div.panel-thankyou .btn-close-window { display: flex; gap: 0.5rem; position: absolute; top: 1.25rem; right: 1.25rem; } .contract-information { margin-block-start: 2rem; } .contract-information h3 { margin-top: 1.5rem; font-size: 1rem; line-height: 1.5; } .contract-information .address-wrapper { --color-text: rgba(32,32,32,0.75); --border-color: rgba(32,32,32,0.25); border: 1px solid var(--border-color); border-radius: var(--border-radius); margin-top: 2rem; padding: 1rem; } .contract-information .address-wrapper h4.company-name { font-size: 0.875rem; font-weight: var(--weight-bold); line-height: 1.5; margin-bottom: 0.5rem; } .contract-information .address-wrapper span { display: block; font-size: 0.75rem; font-weight: var(--weight-semibold); } .contract-information .address-wrapper .company-email { margin-top: 0.35rem; } .signature-wrapper, #top .main_color .signature-wrapper { position: relative; margin-block-start: 1rem; background: var(--clr-light-primary-bg); border: 1px solid var(--clr-light-secondary-bg); border-radius: var(--border-radius); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; align-items: center; } .signature-wrapper.error, #top .main_color .signature-wrapper.error { border: 3px solid var(--clr-error); } .signature-wrapper canvas#signature, #top .main_color .signature-wrapper canvas#signature { grid-column: 1 / -1; background: var(--clr-white); display: block; width: 100%; height: 240px; border-radius: var(--border-radius); } .signature-wrapper .clear-signature, #top .main_color .signature-wrapper .clear-signature { grid-column: 2; grid-row: 2; justify-self: end; min-width: unset; width: min-content; padding-inline: 24px; border-radius: 0; border-bottom-right-radius: var(--border-radius); } .signature-wrapper .instructions, #top .main_color .signature-wrapper .instructions { --color-text: var(--clr-dark-primary-bg); line-height: 1.2; grid-column: 1; grid-row: 2; padding-inline: 1em; text-align: start; pointer-events: none; font-size: 0.8125rem; } @media (hover: hover) { .signature-wrapper .instructions-touch, #top .main_color .signature-wrapper .instructions-touch { display: none; } } @media (hover: none) { .signature-wrapper .instructions-mouse, #top .main_color .signature-wrapper .instructions-mouse { display: none; } } #top:not(.form-signing-view) .main_color .signature-wrapper { max-width: 450px; } .button-row { display: flex; gap: 1rem; } .button-row > .pill-button { flex: 1; } @media screen and (min-width: 990px) { .button-row { justify-content: flex-end; } } #top .main_color .pcsig-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); display: none; } #top .main_color .pcsig-modal.active { display: grid; place-content: center; animation: pcsig-fadeIn 200ms ease-in; } #top .main_color .pcsig-modal .pcsig-modal__content { margin-inline: auto; max-height: 80vh; max-height: calc(80 * var(--vh)); max-width: MIN(37.5rem, calc(100vw - 2rem)); position: relative; max-width: 450px; } #top .main_color .pcsig-modal .pcsig-modal__content.pcsig-modal__content--background { background-color: #fff; width: MIN(760px, calc(100vw - 2rem)); padding: 2rem 1rem; } #top .main_color .pcsig-modal.panel-statistics .pcsig-modal__content { width: auto; min-width: MIN(760px, calc(100vw - 2rem)); max-width: 90vw; } #top .main_color .pcsig-modal.panel-statistics .pcsig-modal__content.pcsig-modal__content--background { width: auto; max-width: 90vw; } #top .main_color .pcsig-modal .pcsig-modal__close { position: absolute; top: -2.5rem; right: 0; background: transparent; color: #fff; min-width: unset; box-shadow: unset; padding: 0.125rem 0.5rem; } @media screen and (min-width: 990px) { #top .main_color .pcsig-modal .pcsig-modal__close { top: 0; right: -2.5rem; } } #top .main_color .pcsig-modal.panel-signed-consent-content { max-width: 100%; } #top .main_color .pcsig-modal.panel-signed-consent-content .pcsig-modal__content { background: transparent; } #top .main_color .pcsig-modal.panel-signed-consent-content .half_width_section { float: none !important; } #top .main_color .pcsig-modal.panel-signed-consent-content .half_width_section .form_field { float: none; } #top .main_color .pcsig-modal .consent_content_wrapper { background-color: #fff; overflow: auto; margin-top: 0; padding: 0 1rem 1.125rem; height: 100%; border-radius: var(--border-radius); box-shadow: var(--paper-shadow); overflow-wrap: anywhere; } #top .main_color .pcsig-modal .consent_content_wrapper .signing-logo { margin-block-start: 2rem; max-width: 45%; height: auto; } #top .main_color .pcsig-modal .consent_content_wrapper .address-wrapper { margin-top: 0; } #top .main_color .pcsig-modal .consent_content_wrapper h1, #top .main_color .pcsig-modal .consent_content_wrapper h2 { margin-top: 0.2em; font-size: 1.25rem; } #top .main_color .pcsig-modal .consent_content_wrapper h3 { font-size: 1.125rem; } #top .main_color .pcsig-modal .consent_content_wrapper h4, #top .main_color .pcsig-modal .consent_content_wrapper h5, #top .main_color .pcsig-modal .consent_content_wrapper h6 { font-size: 1rem; } #top .main_color .pcsig-modal .consent_content_wrapper h5 { font-weight: var(--weight-bold); } #top .main_color .pcsig-modal .consent_content_wrapper h6 { font-weight: var(--weight-semibold); } #top .main_color .panel-signed-qr-code .ref-number-wrapper span.label, #top .main_color .panel-signed-qr-code .ref-number-wrapper span.value { --color-text: #fff; display: block; font-size: 30px; line-height: 1.2; text-align: center; } #top .main_color .panel-signed-qr-code .ref-number-wrapper span.value { font-weight: var(--weight-bold); letter-spacing: 0.1em; margin-block-end: 2rem; } #top .main_color .panel-qr-code .qrcode-wrapper { margin-block-end: 1rem; max-width: 100%; } #top .main_color .panel-qr-code .qrcode-wrapper #qrcode-current-page canvas, #top .main_color .panel-qr-code .qrcode-wrapper #qrcode-current-page img { max-width: 100%; height: auto; } #top .main_color .panel-qr-code .button-row { margin-top: 1rem; justify-content: center; } #top .main_color .panel-qr-code .button-row button.pill-button { --color-btn-bg: #fff; --color-btn-text: var(--clr-dark-secondary-bg); flex: 1 1 auto; font-weight: var(--weight-regular); padding-left: 1rem; padding-right: 1rem; min-width: unset; border-color: #fff !important; } #top .main_color .panel-qr-code .button-row button.pill-button.copiedMsg { --color-btn-bg: var(--clr-dark-secondary-bg); --color-btn-text: #fff; } #statsContainer { display: none; overflow: auto; max-height: 70vh; } #statsContainer .table-wrapper { overflow: auto; } #statsContainer .mobile-scroller, #statsContainer table { margin-bottom: 0; } #statsContainer tr > th, #statsContainer tr > td { padding: 8px 4px; white-space: nowrap; font-size: 1rem; } #statsContainer thead tr th:first-child { padding-left: 10px !important; } #statsContainer thead tr, #statsContainer tr:nth-child(even) { background-color: #D5DADD; } .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper { position: relative; aspect-ratio: var(--webcam_aspect_ratio); background-color: transparent; border: 1px dashed var(--clr-primary-dark); border-radius: var(--border-radius); margin: 2.125rem 10% 0; overflow: hidden; } .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper .wait-icon { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper.activated { border: 2px dashed var(--clr-primary-dark); margin-block-end: 0; } .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper.activated input[type="file"], .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper.activated .selfieIcon, .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper.activated .selfie-required-warning { display: none; } .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper.activated .wait-icon { display: block; } .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper.error .selfie-required-warning { visibility: visible; opacity: 1; margin-bottom: 1.5rem; } .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper.error.activated { border-color: var(--clr-error); } .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper.error.activated .selfieIcon svg path, .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper.error.activated .selfieIcon svg circle, .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper.error.activated .selfieIcon svg g { stroke: var(--clr-error); } .panel-selfie .form_field.wrap_selfie_upload .selfie-upload-wrapper.error.activated .selfie-required-warning { display: block; } .panel-selfie .form_field.wrap_selfie_upload input[type="file"], .panel-selfie .form_field.wrap_selfie_upload .selfieIcon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; } .panel-selfie .form_field.wrap_selfie_upload input[type="file"] { opacity: 0; z-index: 10; padding: 0; } .panel-selfie .form_field.wrap_selfie_upload .selfieIcon { z-index: 9; } .panel-selfie .form_field.wrap_selfie_upload .upload-disclaimer { display: block; margin: 2.125rem auto; max-width: 32ch; text-align: center; font-weight: normal !important; } .panel-selfie .form_field.wrap_selfie_upload .upload-disclaimer p { text-wrap: balance; } .webcam-controls { position: absolute; bottom: 0; width: 100%; } .webcam-controls .selfie-required-warning { font-size: 0.875rem; line-height: 1.5; text-align: center; color: var(--clr-error); visibility: hidden; opacity: 0; transition: opacity 200ms, margin-bottom 200ms; } .selfie-required-warning { font-size: 0.875rem; line-height: 1.5; color: var(--clr-error); visibility: hidden; opacity: 0; transition: opacity 200ms, margin-bottom 200ms; } .selfie-required-warning label { font-size: inherit !important; } .selfie-required-warning.error { visibility: visible; opacity: 1; } .selfie-required-warning.error span { display: block; } #takePhoto { margin: auto auto 1.125rem; } #top .main_color form #takePhoto { min-width: clamp(6rem, 11.375rem, 100%); } .selfie-upload-wrapper.activated #takePhoto { width: 60px; height: 60px; content: " "; text-indent: -99999px; border: 2px solid white; border-radius: 100%; min-width: unset !important; margin: 0 auto 1rem; --color-btn-bg: rgba(255,255,255,0.5); } @media screen and (min-width: 768px) { .selfie-upload-wrapper.activated #takePhoto { bottom: 80px; } } #takePhotoAgain { margin: 1rem auto; } #top .main_color form #takePhotoAgain { min-width: clamp(6rem, 11.375rem, 100%); } #webcamManipulator { display: inline-block; position: relative; border-radius: var(--border-radius); } #webcamManipulator.active { display: block; } #webcamManipulator #canvas, #webcamManipulator #webcam { display: none; border-radius: var(--border-radius); width: 100%; height: auto; } #webcamManipulator #canvas.active, #webcamManipulator #webcam.active { display: block !important; } .uploadWarning { margin-top: 1rem; margin-inline: 10%; font-size: 14px; font-weight: var(--weight-bold); text-align: center; color: var(--clr-primary-dark); border-color: currentColor !important; border: 1px solid var(--clr-primary-dark); border-radius: var(--border-radius); padding: 0.75rem 1.5rem; background: transparent; } .uploadWarning p { font-size: 14px; font-weight: bold; color: inherit; margin-top: 0 !important; } .__pcsig-modal.panel-signed-consent-content { display: block !important; width: 350px !important; min-width: unset !important; position: fixed; top: 0; bottom: 0; left: 0; overflow: auto; } .__pcsig-modal.panel-signed-consent-content .pcsig-modal__content { width: 350px !important; min-width: unset !important; } /** * * file were all the changes for the multiuser * and account page changes live * */ :root { --small-content-max-width: 100%; } @media screen and (min-width: 990px) { :root { --small-content-max-width: MIN(530px, 90%); } } body.page-template-template-photoconsent-sidebar .main_color { z-index: 2; } body.page-template-template-photoconsent-sidebar .content { padding-block: 5.25rem; } body.page-template-template-photoconsent-sidebar .sidebar.sidebar_left .inner_sidebar { margin-right: 0; } .wpua-edit, .small-content { max-width: var(--small-content-max-width); margin-inline: auto; } @media screen and (min-width: 990px) { .wpua-edit, .small-content { margin-inline: 4rem auto; } } .wpua-edit h1, .small-content h1 { font-size: 28px; line-height: 1.1em; margin-bottom: 10px; } .wpua-edit #wpua-preview, .wpua-edit #wpua-preview-existing, .wpua-edit #wpua-thumbnail, .wpua-edit #wpua-thumbnail-existing { text-align: start; } #top .component.js-user-overview-splash-empty-case { text-align: center; } #top .component.js-user-overview-splash-empty-case button.js-create-user { margin-inline: auto 0; margin-block-end: 2rem; } #top .component.js-user-overview-splash-empty-case h2 { margin-block-end: 0; } @media screen and (min-width: 990px) { .user-management { max-width: MIN(1494px, 90%); margin-inline: auto; } } #top .main_color .component h2 { margin-inline-end: auto; margin-block-end: 2rem; } #top .main_color .component label { display: inline-block; font-size: 0.875rem; font-weight: normal; padding-bottom: .25em; } #top .main_color .component label.large-label { width: 350px; max-width: 100%; } #top .main_color .component input[type="text"], #top .main_color .component input[type="email"] { background-color: var(--clr-white); border-radius: var(--border-radius); border: none; padding: 0.5rem 1rem 0.4735rem; font-size: 1rem; } #top .main_color .component input[type="checkbox"] { --checkbox-size: 1.25rem; appearance: none; background-color: #fff; margin: 0; display: inline-block; vertical-align: text-bottom; width: var(--checkbox-size); height: var(--checkbox-size); margin-inline-end: .8125rem; margin-inline-end: calc(var(--checkbox-size) / 2); border-radius: var(--border-radius); accent-color: var(--clr-primary-dark); border: 2px solid var(--clr-primary-dark); } #top .main_color .component input[type="checkbox"]::after { display: block; content: " "; pointer-events: none; box-sizing: border-box; width: 100%; height: 100%; background-color: #fff; background-image: var(--icon-checkbox-x); background-position: center; background-repeat: no-repeat; background-size: contain; transition: opacity 200ms; opacity: 0; } #top .main_color .component input[type="checkbox"]:checked::after { opacity: 1; } #top .main_color .component button { display: block; border-radius: var(--border-radius); box-shadow: 0px 2px 8px 0px rgba(28, 43, 72, 0.1); min-width: 9.375rem; min-width: clamp(6rem, 9.375rem, 100%); padding: 0.5rem 1rem 0.4735rem; font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--clr-white); text-align: center; line-height: 1.65; background-color: var(--clr-primary); transition: background-color 200ms; cursor: pointer; } #top .main_color .component button:is(button) { appearance: none; border: none; cursor: pointer; line-height: 1.65; } #top .main_color .component button:hover { background-color: var(--clr-primary-dark); text-decoration: none; color: var(--clr-white); } #top .main_color .component button:active, #top .main_color .component button:focus { background-color: var(--clr-primary-dark); } #top .main_color .component button:disabled, #top .main_color .component button.disabled { pointer-events: none; background-color: #99aac4; user-select: none; } #top .main_color .component button.pill-button-micro { padding: 0.5rem 0.75rem; min-width: unset; } #top .main_color .component button.pill-button-big { font-weight: var(--weight-bold); padding: 1.25rem 1.5rem; } #top .main_color .component button.faded { background-color: #99aac4; } #top .main_color .component button.btn-semi-transparent { opacity: 0.5; } #top .main_color .component button.btn-semi-transparent:hover { opacity: 1; } #top .main_color .component button.has-icon { display: flex; justify-content: center; gap: 0.5rem; align-items: center; white-space: nowrap; } #top .main_color .component button .icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } #top .main_color .component button .icon svg { width: 100%; height: auto; } #top #main .js-user-configure { max-width: var(--small-content-max-width); margin-inline: auto; } @media screen and (min-width: 990px) { #top #main .js-user-configure { margin-inline: 4rem auto; } } #top #main .js-user-configure .folders-wrapper { margin-block-start: 3rem; } #top #main .js-user-configure .folders-wrapper .folders-ui { padding: 0.5rem 0; } #top #main .js-user-configure .folders-wrapper .folders-ui ul { max-width: 25ch; list-style: none; margin-inline-start: 0; } #top #main .js-user-configure .folders-wrapper .folders-ui li:hover > .optionsLink { display: inline-block; margin-inline-start: 1em; } #top #main .js-user-configure .folders-wrapper .folders-ui .add-new-root-folder { padding-inline-start: 2rem; font-size: 0.875rem; } #top #main .js-user-configure .folders-wrapper .folders-ui.disabled { opacity: 0.25; pointer-events: none; } #top #main .js-user-configure .folders-wrapper .folders-explanation, #top #main .js-user-configure .folders-wrapper .admin-disclaimer { font-size: 0.8125rem; margin-block: 0; padding-inline-start: 2rem; display: none; } #top #main .js-user-configure .folders-wrapper .folders-explanation.showing, #top #main .js-user-configure .folders-wrapper .admin-disclaimer.showing { display: block; } #top #main .js-user-configure .folders-wrapper #newFolderCreate { padding-block-start: 1rem; padding-inline-start: 2rem; width: 350px; max-width: 100%; display: flex; } #top #main .js-user-configure .folders-wrapper #newFolderCreate .newFolderInput { border-bottom: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } #top #main .js-user-configure .folders-wrapper #newFolderCreate button.button { min-width: unset; margin-block-start: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } #top #main .js-user-configure .folders-wrapper .subFoldersList #newFolderCreate { position: relative; width: max-content; padding-inline-start: 0; max-width: unset; } #top #main .js-user-configure .folders-wrapper .subFoldersList label.subFolder + #newFolderCreate { margin-bottom: 1rem; } #top #main .js-user-configure .js-user-configure-cancel { background-color: var(--clr-disabled); } #top #main .js-user-configure .js-user-configure-submit-error { width: 100%; margin-block-start: 1em; justify-self: start; } #top #main .js-user-configure .js-user-configure-delete-section { display: flex; align-items: start; gap: 1rem; padding-inline-start: 1rem; } #top #main .js-user-configure .js-user-configure-delete-section label { line-height: 1.2; } #top #main .js-user-configure .js-user-configure-delete-section button { background-color: var(--clr-secondary-accent); } #top .main_color #user-delete-form .js-user-delete-cancel { background-color: var(--clr-disabled); } #top .main_color #user-delete-form .js-user-delete-error { color: var(--clr-secondary-accent); } #top .main_color #user-delete-form input[type="text"], #top .main_color #user-delete-form input[type="email"] { background-color: var(--clr-white); border-radius: var(--border-radius); border: none; padding: 0.5rem 1rem 0.4735rem; font-size: 1rem; } #top .js-user-overview .js-user-table-header { display: flex; flex-direction: column; gap: var(--spacer); flex-wrap: wrap; margin-block-end: var(--spacer); } #top .js-user-overview .js-user-table-header h2 { margin-block-end: 0; align-self: end; order: 1; } #top .js-user-overview .js-user-table-header button { order: 2; } #top .js-user-overview .js-user-table-header input[type="search"] { order: 3; font-size: 0.875rem; } @media screen and (min-width: 990px) { #top .js-user-overview .js-user-table-header { flex-direction: row; margin-block-end: 2.875rem; gap: unset; } #top .js-user-overview .js-user-table-header input[type="search"] { display: block; max-width: 12.5rem; margin-right: 1.375rem; order: unset; } #top .js-user-overview .js-user-table-header h2 { order: unset; margin-block-end: 0.25rem; } #top .js-user-overview .js-user-table-header button { order: unset; } } #top .js-user-overview .objectsList { background-color: #fff; } #top .js-user-overview #user-table-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #top .js-user-overview #user-table-footer .user-licenses { font-size: 0.8125rem; padding-inline: 1.5rem; line-height: 1.4; order: 2; width: 100%; } #top .js-user-overview #user-table-footer #user-pagination-container { order: 1; flex: 1 0 auto; padding-block-end: 2rem; } #top .js-user-overview #user-table-footer .pagination { padding-block: 0; } @media screen and (min-width: 768px) { #top .js-user-overview #user-table-footer { flex-wrap: nowrap; } #top .js-user-overview #user-table-footer .user-licenses { order: 1; width: auto; } #top .js-user-overview #user-table-footer #user-pagination-container { order: 2; padding-block-end: 0; } } #top .main_color .small-content, #top .main_color .organization-form, #top .main_color form.profile-form { max-width: var(--small-content-max-width); margin-inline: auto; } @media screen and (min-width: 990px) { #top .main_color .small-content, #top .main_color .organization-form, #top .main_color form.profile-form { margin-inline: 4rem auto; } } #top .main_color .small-content h1, #top .main_color .organization-form h1, #top .main_color form.profile-form h1 { margin-block-end: 2.875rem; } #top .main_color .small-content h2, #top .main_color .organization-form h2, #top .main_color form.profile-form h2 { font-size: 1.5rem; } h1 + #top .main_color .small-content h2, h1 + #top .main_color .organization-form h2, h1 + #top .main_color form.profile-form h2 { margin-block-start: 2.875rem; } #top .main_color .small-content label, #top .main_color .organization-form label, #top .main_color form.profile-form label { font-size: 0.875rem; font-weight: normal; } #top .main_color .small-content input:not([type="submit"]), #top .main_color .organization-form input:not([type="submit"]), #top .main_color form.profile-form input:not([type="submit"]) { background-color: var(--clr-white); border-radius: var(--border-radius); border: none; padding: 0.5rem 1rem 0.4735rem; font-size: 1rem; margin-block-start: 0.125rem; } #top .main_color .small-content input[type="submit"], #top .main_color .small-content button, #top .main_color .organization-form input[type="submit"], #top .main_color .organization-form button, #top .main_color form.profile-form input[type="submit"], #top .main_color form.profile-form button { display: block; border-radius: var(--border-radius); box-shadow: 0px 2px 8px 0px rgba(28, 43, 72, 0.1); min-width: 9.375rem; min-width: clamp(6rem, 9.375rem, 100%); padding: 0.5rem 1rem 0.4735rem; font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--clr-white); text-align: center; line-height: 1.65; background-color: var(--clr-primary); transition: background-color 200ms; cursor: pointer; margin-block: 2rem; margin-inline: auto 0; } #top .main_color .small-content input[type="submit"]:is(button), #top .main_color .small-content button:is(button), #top .main_color .organization-form input[type="submit"]:is(button), #top .main_color .organization-form button:is(button), #top .main_color form.profile-form input[type="submit"]:is(button), #top .main_color form.profile-form button:is(button) { appearance: none; border: none; cursor: pointer; line-height: 1.65; } #top .main_color .small-content input[type="submit"]:hover, #top .main_color .small-content button:hover, #top .main_color .organization-form input[type="submit"]:hover, #top .main_color .organization-form button:hover, #top .main_color form.profile-form input[type="submit"]:hover, #top .main_color form.profile-form button:hover { background-color: var(--clr-primary-dark); text-decoration: none; color: var(--clr-white); } #top .main_color .small-content input[type="submit"]:active, #top .main_color .small-content input[type="submit"]:focus, #top .main_color .small-content button:active, #top .main_color .small-content button:focus, #top .main_color .organization-form input[type="submit"]:active, #top .main_color .organization-form input[type="submit"]:focus, #top .main_color .organization-form button:active, #top .main_color .organization-form button:focus, #top .main_color form.profile-form input[type="submit"]:active, #top .main_color form.profile-form input[type="submit"]:focus, #top .main_color form.profile-form button:active, #top .main_color form.profile-form button:focus { background-color: var(--clr-primary-dark); } #top .main_color .small-content input[type="submit"]:disabled, #top .main_color .small-content input[type="submit"].disabled, #top .main_color .small-content button:disabled, #top .main_color .small-content button.disabled, #top .main_color .organization-form input[type="submit"]:disabled, #top .main_color .organization-form input[type="submit"].disabled, #top .main_color .organization-form button:disabled, #top .main_color .organization-form button.disabled, #top .main_color form.profile-form input[type="submit"]:disabled, #top .main_color form.profile-form input[type="submit"].disabled, #top .main_color form.profile-form button:disabled, #top .main_color form.profile-form button.disabled { pointer-events: none; background-color: #99aac4; user-select: none; } #top .main_color .small-content input[type="submit"].pill-button-micro, #top .main_color .small-content button.pill-button-micro, #top .main_color .organization-form input[type="submit"].pill-button-micro, #top .main_color .organization-form button.pill-button-micro, #top .main_color form.profile-form input[type="submit"].pill-button-micro, #top .main_color form.profile-form button.pill-button-micro { padding: 0.5rem 0.75rem; min-width: unset; } #top .main_color .small-content input[type="submit"].pill-button-big, #top .main_color .small-content button.pill-button-big, #top .main_color .organization-form input[type="submit"].pill-button-big, #top .main_color .organization-form button.pill-button-big, #top .main_color form.profile-form input[type="submit"].pill-button-big, #top .main_color form.profile-form button.pill-button-big { font-weight: var(--weight-bold); padding: 1.25rem 1.5rem; } #top .main_color .small-content input[type="submit"].faded, #top .main_color .small-content button.faded, #top .main_color .organization-form input[type="submit"].faded, #top .main_color .organization-form button.faded, #top .main_color form.profile-form input[type="submit"].faded, #top .main_color form.profile-form button.faded { background-color: #99aac4; } #top .main_color .small-content input[type="submit"].btn-semi-transparent, #top .main_color .small-content button.btn-semi-transparent, #top .main_color .organization-form input[type="submit"].btn-semi-transparent, #top .main_color .organization-form button.btn-semi-transparent, #top .main_color form.profile-form input[type="submit"].btn-semi-transparent, #top .main_color form.profile-form button.btn-semi-transparent { opacity: 0.5; } #top .main_color .small-content input[type="submit"].btn-semi-transparent:hover, #top .main_color .small-content button.btn-semi-transparent:hover, #top .main_color .organization-form input[type="submit"].btn-semi-transparent:hover, #top .main_color .organization-form button.btn-semi-transparent:hover, #top .main_color form.profile-form input[type="submit"].btn-semi-transparent:hover, #top .main_color form.profile-form button.btn-semi-transparent:hover { opacity: 1; } #top .main_color .small-content input[type="submit"].has-icon, #top .main_color .small-content button.has-icon, #top .main_color .organization-form input[type="submit"].has-icon, #top .main_color .organization-form button.has-icon, #top .main_color form.profile-form input[type="submit"].has-icon, #top .main_color form.profile-form button.has-icon { display: flex; justify-content: center; gap: 0.5rem; align-items: center; white-space: nowrap; } #top .main_color .small-content input[type="submit"] .icon, #top .main_color .small-content button .icon, #top .main_color .organization-form input[type="submit"] .icon, #top .main_color .organization-form button .icon, #top .main_color form.profile-form input[type="submit"] .icon, #top .main_color form.profile-form button .icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; } #top .main_color .small-content input[type="submit"] .icon svg, #top .main_color .small-content button .icon svg, #top .main_color .organization-form input[type="submit"] .icon svg, #top .main_color .organization-form button .icon svg, #top .main_color form.profile-form input[type="submit"] .icon svg, #top .main_color form.profile-form button .icon svg { width: 100%; height: auto; } #top .main_color .small-content .user-info, #top .main_color .organization-form .user-info, #top .main_color form.profile-form .user-info { margin-bottom: 1.125rem; } #top .main_color .small-content .user-info span, #top .main_color .organization-form .user-info span, #top .main_color form.profile-form .user-info span { display: block; line-height: 1; } #top .main_color .small-content p.disclaimer, #top .main_color .organization-form p.disclaimer, #top .main_color form.profile-form p.disclaimer { font-size: 0.8125rem; line-height: 1.2; margin-block-start: 0; padding-inline: 0.5rem; } #top .main_color .small-content p.disclaimer a, #top .main_color .organization-form p.disclaimer a, #top .main_color form.profile-form p.disclaimer a { text-decoration: underline; } #top .main_color .small-content .button-row input[type="submit"], #top .main_color .small-content .button-row button, #top .main_color .organization-form .button-row input[type="submit"], #top .main_color .organization-form .button-row button, #top .main_color form.profile-form .button-row input[type="submit"], #top .main_color form.profile-form .button-row button { margin-inline-start: 0; } #top .main_color .small-content .cancel-button, #top .main_color .organization-form .cancel-button, #top .main_color form.profile-form .cancel-button { background-color: var(--clr-disabled); } form.organization-logo-form .current-logo { transition: 200ms opacity; } form.organization-logo-form .button-row { margin-block-start: 2rem; } form.organization-logo-form .new-logo-wrapper { display: none; background: #fff; } form.organization-logo-form .new-logo-wrapper.dirty { display: block; margin-block-start: 2rem; padding: 1rem; border-radius: var(--border-radius); } form.organization-logo-form .new-logo-wrapper img { display: block; } /*# sourceMappingURL=style.css.map */