:root { --safeiframe-light-color: #d3d3d3; --safeiframe-dark-color: #a9a9a9; } .video_wrapper { width: 40rem; max-width: 100%; height: 56vw; max-height: 23rem; } .safeiframe { color: #808080; overflow: visible; } .safeiframe.confirmed { overflow: hidden; } .safeiframe iframe { width: 100%; height: 100%; } .safeiframe:before { display: none !important; } .safeiframe:not(.confirmed) .confirm { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; min-height: 20rem; background-image: url('../gfx/protect.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--safeiframe-light-color); border-color: var(--safeiframe-dark-color); border-style: solid; border-width: 1px; padding: 8px; } .safeiframe:not(.confirmed) .confirm>.cookie_infos.visible { display: block; position: absolute; background-color: #d3d3d3; top: 0; left: 0; width: 100%; max-height: 70%; overflow: auto; z-index: 5; color: #000; font-size: 12px; padding: 8px 13px; -webkit-transform: translateY(-82%); transform: translateY(-82%); } .safeiframe:not(.confirmed) .confirm>.cookie_infos.visible>a { display: block; margin-left: auto; padding: 0 3px; width: max-content; text-decoration: underline; background-color: transparent; } .safeiframe:not(.confirmed) .confirm>.cookie_infos.visible>.cookie_details { display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin-top: 4px; } .safeiframe:not(.confirmed) .confirm>.cookie_infos.visible>.cookie_details:first-child { margin-top: 0; } .safeiframe:not(.confirmed) .confirm>.cookie_infos.visible>.cookie_details:first-child .lbl+.txt { font-weight: bolder; } .safeiframe:not(.confirmed) .confirm>.cookie_infos.visible>.cookie_details:last-child { margin-bottom: 1rem; } .safeiframe:not(.confirmed) .confirm>.cookie_infos.visible>.cookie_details .lbl { -ms-flex-preferred-size: 30%; flex-basis: 30%; font-weight: bolder; } .safeiframe:not(.confirmed) .confirm>.cookie_infos.visible>.cookie_details .txt { -ms-flex-preferred-size: 70%; flex-basis: 70%; } .safeiframe:not(.confirmed) .confirm>.cookie_infos.visible>.cookie_details a { background-color: transparent; padding: 0; text-decoration: none; } .safeiframe:not(.confirmed) .confirm>.cookie_infos.visible>.cookie_details a:hover { text-decoration: underline; } .safeiframe:not(.confirmed) .confirm>.keep { display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin-bottom: 6px; font-size: 12px; } .safeiframe:not(.confirmed) .confirm>.keep input { margin-right: 6px; } .safeiframe:not(.confirmed) .confirm a { cursor: pointer; background-color: #d3d3d3; color: #000; padding: 3px 12px; border-radius: 4px; text-decoration: none; } .safeiframe:not(.confirmed) .confirm a:hover { background-color: #cbcbcb; } .safeiframe:not(.confirmed) .confirm a.accept { margin-bottom: 1rem; background-color: rgba(255,255,255,0.5); border: 1px solid #d3d3d3; padding: .7rem 1.2rem; text-align: center; position: relative; color: #808080; } .safeiframe:not(.confirmed) .confirm a.accept>b { display: block; position: relative; width: 3.5rem; height: 2rem; border: 3px solid #808080; margin: auto auto .7rem auto; border-radius: 1rem; -webkit-box-sizing: border-box; box-sizing: border-box; } .safeiframe:not(.confirmed) .confirm a.accept>b:before { content: ""; display: block; position: absolute; top: -3px; left: -3px; height: 2rem; width: 2rem; border: 3px solid #808080; border-radius: 1rem; -webkit-box-sizing: border-box; box-sizing: border-box; } .safeiframe:not(.confirmed) .confirm a.accept>label { display: block; cursor: pointer; } .safeiframe:not(.confirmed) .confirm a.accept>div { display: none; color: #000; background-color: #d3d3d3; } .safeiframe:not(.confirmed) .confirm a.accept a { padding: 0; text-decoration: underline; background-color: transparent; } .safeiframe:not(.confirmed) .confirm a.accept:hover { background-color: rgba(255,255,255,0.9); } .safeiframe:not(.confirmed) .confirm a.info { display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #4a4a4a; background-color: #fff; width: 1.5rem; height: 1.5rem; border-radius: .75rem; position: absolute; top: 5px; right: 5px; padding: 0; text-align: center; font-weight: bolder; font-family: serif; } .safeiframe:not(.confirmed) .confirm>.keep,.safeiframe:not(.confirmed) .confirm>.cookie_infos { display: none; } .safeiframe:not(.confirmed) .confirm:hover>a.accept,.safeiframe:not(.confirmed) .confirm.hover>a.accept { display: block; } .safeiframe:not(.confirmed) .confirm:hover>a.accept>div.safeiframe_details,.safeiframe:not(.confirmed) .confirm.hover>a.accept>div.safeiframe_details { display: block; position: absolute; top: -160%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 300% !important; max-width: 100vw; font-size: 10pt !important; } .safeiframe:not(.confirmed) .confirm:hover>.keep,.safeiframe:not(.confirmed) .confirm.hover>.keep { display: flex; } .safeiframe:not(.confirmed).video .confirm { background-image: url('../gfx/video.png'); } .safeiframe:not(.confirmed).maps .confirm { background-image: url('../gfx/map.png'); } .safeiframe:not(.confirmed).facebook .confirm { background-image: url('../gfx/facebook.png'); } .safeiframe:not(.confirmed).calc .confirm { background-image: url('../gfx/calc.png'); }