/* SLOWLY LOADING CSS FILE - AVOIDING SLOW PAGE LOAD */


/* INPUT ICON */

input[autocomplete="organization"] {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="%23aaaaaa"><path d="M0.011,256.473L4.177,0H40.467l5.024,106,67.161-55.174v58.879l71.67-58.879v59.9l71.67-58.879V256.015Zm59.017-99.481H48.67a4.817,4.817,0,0,0-4.654,4.965v23.071H59.028V156.992Zm0,36.031H44.016v20.025a4.817,4.817,0,0,0,4.654,4.965H59.028v-24.99Zm21.747-31.066a4.817,4.817,0,0,0-4.654-4.965H66.027v28.036H80.774V161.957Zm0,31.066H66.027v24.99H76.121a4.817,4.817,0,0,0,4.654-4.965V193.023Zm51.254-36.015H121.274a4.818,4.818,0,0,0-4.654,4.966v23.054h15.408v-28.02Zm0,36.015H116.62v20.025a4.817,4.817,0,0,0,4.654,4.965h10.754v-24.99Zm21.348-31.049a4.817,4.817,0,0,0-4.654-4.966h-9.7v28.02h14.349V161.974Zm0,31.049H139.027v24.99h9.7a4.817,4.817,0,0,0,4.654-4.965V193.023Zm37.851,20.025a4.817,4.817,0,0,0,4.654,4.965h11.147v-24.99h-15.8v20.025Zm0-51.091v23.071h15.8V156.992H195.881A4.817,4.817,0,0,0,191.227,161.957Zm36.758,0a4.817,4.817,0,0,0-4.654-4.965h-9.3v28.036h13.958V161.957Zm0,31.066H214.027v24.99h9.3a4.817,4.817,0,0,0,4.654-4.965V193.023Z"/></svg>')}

input[autocomplete="street-address"] {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="%23aaaaaa"><path d="M219.884,85.563q-0.118,1.55-.359,3.329c-0.321,2.369-.8,5.029-1.444,7.94a201.868,201.868,0,0,1-5.7,20.169,391.736,391.736,0,0,1-21.878,51.435C171.227,204.783,147.93,247.125,130.69,256c-17.847-9.508-44.207-51.707-64.3-87.852a351.083,351.083,0,0,1-22.686-51.2A193.366,193.366,0,0,1,37.93,96.836C37.284,93.93,36.8,91.272,36.475,88.9q-0.242-1.777-.362-3.332C36.034,84.535,36,83.578,36,82.7c0.049-22.447,10.342-43.2,26.958-58.316A93.126,93.126,0,0,1,92.188,6.47,96.944,96.944,0,0,1,109.457,1.62q4.491-.824,9.134-1.237,2.321-.2,4.673-0.3T128,0q2.382-.015,4.735.082t4.672,0.3q4.639,0.409,9.135,1.237a96.926,96.926,0,0,1,17.269,4.849,93.152,93.152,0,0,1,29.233,17.919C209.665,39.511,219.956,60.261,220,82.7,220,83.574,219.963,84.529,219.884,85.563Zm-45.532-16.73v-33.4H160.82V55.811L127.767,24,61.994,86.777,79.7,86.613V155h29.42V106.862H145.03V155h29.313V86.77h18.649Z"/></svg>')}

input[autocomplete="tel"] {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="%23aaaaaa"><path d="M255.879,61.691c-0.125-5.143-1.293-27.212-12.181-31.3C221.281,21.974,165.89,15.26,128.423,15.26S35.56,21.974,13.142,30.388C2.242,34.485,1.086,56.582.963,61.7a13.769,13.769,0,0,0,.09,4.284L3.184,76.467A10.772,10.772,0,0,0,15.82,84.842L64.971,75.5a10.589,10.589,0,0,0,8.538-12.392l-2.553-6.244c4.533-.62,9.081-1.206,13.583-1.744L83.071,69.363S0.011,146.893.011,161.144s10,79.613,10,79.613H245.807s10.005-65.83,10.005-79.613S173.77,69.363,173.77,69.363L172.3,55.123c4.5,0.538,9.052,1.124,13.585,1.744l-2.553,6.244A10.587,10.587,0,0,0,191.868,75.5l49.153,9.339a10.772,10.772,0,0,0,12.636-8.375l2.131-10.477A13.833,13.833,0,0,0,255.879,61.691ZM128.423,51.914c4.558,0,22.029.8,27.208,1.446,0-.092-1.694,13.99-1.735,13.929H102.944l-1.578-13.943C111.247,52.451,120.506,51.914,128.423,51.914Zm-1.3,164.581c-27.976,0-50.656-21.679-50.656-48.421s22.68-48.422,50.656-48.422,50.656,21.679,50.656,48.422S155.1,216.494,127.127,216.494Z"/></svg>')}

input[type="email"] {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="%23aaaaaa"><path d="M152.523,178.744a25.986,25.986,0,0,0,7.863,10.2,30.148,30.148,0,0,0,11.677,5.371,63.113,63.113,0,0,0,14.325,1.556q20.7,0,36.589-11.052t24.445-31.523q8.56-20.467,8.563-46.311a121.771,121.771,0,0,0-2.647-25.374,92.653,92.653,0,0,0-8.329-23.428,83.155,83.155,0,0,0-36.278-35.959,120.321,120.321,0,0,0-29.35-10.352A172.873,172.873,0,0,0,141.7,8.131q-31.453,0-58.232,10.2T37.928,46.97A123.584,123.584,0,0,0,9.591,89.079,132.352,132.352,0,0,0,.015,139.2q0,34.716,12.534,58.843t39,36.971q26.468,12.843,67.106,12.843a187.917,187.917,0,0,0,30.751-2.491,148.017,148.017,0,0,0,26.858-6.849l-5.138-18.681a186.154,186.154,0,0,1-25.846,6.305,156.5,156.5,0,0,1-25.068,1.946q-27.249,0-46.476-9.963A65.528,65.528,0,0,1,44.7,188.707q-9.809-19.458-9.809-47.324,0-33,13.157-59a94.937,94.937,0,0,1,37.757-40.24Q110.4,27.9,143.259,27.9A108.357,108.357,0,0,1,176.5,32.727,65.36,65.36,0,0,1,202.269,47.9q10.743,10.354,16.66,26.386t5.916,38.295a107.645,107.645,0,0,1-4.593,32.067q-4.595,14.792-12.534,22.962t-17.9,8.172q-5.919,0-8.719-3.58t-2.8-10.9a53.633,53.633,0,0,1,.467-6.538q0.468-3.736,2.336-12.3L198.532,63.86l-15.57-3.425L170.351,69a46.447,46.447,0,0,0-14.4-6.538,64.357,64.357,0,0,0-15.8-1.868,62.11,62.11,0,0,0-26.313,5.526A68.7,68.7,0,0,0,92.968,80.828,88.162,88.162,0,0,0,77.943,102a108.364,108.364,0,0,0-9.186,25.063A113.985,113.985,0,0,0,65.72,152.9a61.736,61.736,0,0,0,3.659,21.871,33.483,33.483,0,0,0,11.21,15.411q7.55,5.685,18.45,5.682,12.922,0,25.846-9.34t23.044-25.841L149.642,161Q149.642,172.362,152.523,178.744Zm3.737-76.511q-0.7,5.059-2.569,14.4a98.494,98.494,0,0,1-6.306,21.249,100.056,100.056,0,0,1-10.432,17.59q-6.62,9.106-12.534,13.232a21,21,0,0,1-12.144,4.125q-6.7,0-9.342-5.292t-2.647-16.5a112.536,112.536,0,0,1,1.946-20.7,119.449,119.449,0,0,1,5.527-20,77.4,77.4,0,0,1,7.863-15.955A48.216,48.216,0,0,1,124.575,84.1a31.516,31.516,0,0,1,9.108-5.526,26.59,26.59,0,0,1,9.264-1.635q7.317,0,10.666,3.814t3.347,12.22A67.952,67.952,0,0,1,156.26,102.233Z"/></svg>')}

input[autocomplete="url"] {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="%23aaaaaa"><path d="M128,0C199.526,0,255.992,56.471,255.992,128S199.526,255.992,128,255.992,0,199.526,0,128,56.471,0,128,0ZM57.6,122.352c0.758-16.188,5.273-36.516,12.8-56.846C59.1,60.612,48.933,55.345,41.03,49.7,23.717,68.9,13.182,94.119,12.044,122.352H57.6ZM12.044,133.645C13.182,161.878,23.717,187.1,41.03,206.3c7.9-5.647,18.071-10.914,29.365-15.808-7.9-20.33-12.42-41.032-12.8-56.846H12.044ZM95.624,16.191a109.364,109.364,0,0,0-46.69,25.6,130.958,130.958,0,0,0,25.23,13.93A180.041,180.041,0,0,1,95.624,16.191ZM48.933,214.209c13.178,12.046,29,21.082,46.69,25.217A158.415,158.415,0,0,1,74.542,199.9,126.424,126.424,0,0,0,48.933,214.209ZM122.346,79.815c-12.8-.758-27.481-4.52-41.784-10.541-6.777,17.694-10.914,35.386-11.672,53.078h53.457V79.815Zm-53.457,53.83c0.759,16.94,4.9,35.011,11.673,53.083,14.3-6.026,28.986-9.788,41.784-10.541V133.645H68.889ZM122.346,11.676A64.358,64.358,0,0,0,110.674,12.8,228.309,228.309,0,0,0,83.951,59.86a140.322,140.322,0,0,0,38.4,8.283V11.676Zm0,176.178a142.911,142.911,0,0,0-38.016,7.9,207.192,207.192,0,0,0,26.344,47.436,64.353,64.353,0,0,0,11.672,1.126V187.854ZM133.639,68.143a140.231,140.231,0,0,0,38.395-8.283A227.773,227.773,0,0,0,145.311,12.8a64.249,64.249,0,0,0-11.672-1.127V68.143Zm0,54.209H187.1c-0.747-17.692-4.894-35.385-11.673-53.078-14.3,6.021-28.986,9.783-41.784,10.541v42.537Zm0,11.293v42.542c12.8,0.753,27.481,4.515,41.784,10.541,6.779-18.072,10.926-36.143,11.673-53.083H133.639Zm0,110.675a64.244,64.244,0,0,0,11.672-1.126,207.686,207.686,0,0,0,26.356-47.436,142.9,142.9,0,0,0-38.028-7.9V244.32ZM207.052,41.788a109.318,109.318,0,0,0-46.679-25.6,179.983,179.983,0,0,1,21.449,39.527A130.975,130.975,0,0,0,207.052,41.788ZM160.373,239.426c17.693-4.135,33.5-13.171,46.679-25.217a126.329,126.329,0,0,0-25.6-14.309A159.1,159.1,0,0,1,160.373,239.426Zm83.568-117.074C242.815,94.119,232.269,68.9,214.956,49.7c-7.9,5.647-18.072,10.914-29.365,15.808,7.525,20.33,12.052,40.658,12.8,56.846h45.553Zm-45.553,11.293c-0.378,15.814-4.893,36.516-12.8,56.846,11.293,4.894,21.461,10.161,29.365,15.808,17.313-19.2,27.859-44.421,28.985-72.654H198.388Z"/></svg>')}

input[autocomplete="address-level2"] {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="%23aaaaaa"><path d="M254.945,256H176.5l1.071-122.616,38.544-31,39.9,31ZM229,147H204v26h25V147Zm0,44H204v26h25V191ZM87.453,256L89.689-.012h82.8L170.256,256h-82.8ZM143,23H118V49h25V23Zm0,44H118V93h25V67Zm0,44H118v26h25V111Zm0,44H118v26h25V155Zm0,44H118v26h25V199ZM-1,256L-0.364,58.707h82.8L81.8,256H-1ZM52,92H27v26H52V92Zm0,44H27v26H52V136Zm0,44H27v26H52V180Z"/></svg>')}

input[autocomplete="name"] {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="%23aaaaaa"><path d="M184.445,127.892c-0.2,0-.388-0.031-0.583-0.044-4.743,15.379-13.208,28.416-24.017,37.363,0.183,5.943.858,17.661,1.849,19.886,3.776,8.535,31.16,16.115,38.71,18.488s45.326,9.482,49.1,50.717L256,256H0l0.337-1.7a0.3,0.3,0,0,1-.109-0.074L6.368,254.3c3.779-41.235,41.545-48.339,49.095-50.717S90.4,193.632,94.178,185.1c0.416-.932.7-10.35,0.888-16.856-13.294-9.3-23.6-24.5-28.7-42.8-7.014-.1-14.463-8.395-14.463-19.12,0-9.222,1.08-17.528,5.8-19.748-0.078-1.031-.124-2.055-0.124-3.04,0-7.325,1.215-51.275,1.215-51.275l3.647-1.225-0.4-4.881s47.423-52.9,98.09-8.14c0,0,18.645,4.886,24.321-.4,0,0,.674,6.157,1.169,14.134l3.695-.705s3.839,28.146,1.352,57.394c6.925,0.127,8.376,9.622,8.376,20.334C199.037,119.55,191.5,127.892,184.445,127.892Z"/></svg>')}

input[autocomplete="new-password"], input[autocomplete="current-password"], input[type="password"], input.password {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="%23aaaaaa"><path d="M227.667,256H31L15.99,238.667V125.333l12.677-13.158H36.18L36.1,86.594C36.1,46.689,68.452,0,128.512,0c57.951,0,89.761,45.6,93.048,82.325l0.307,29.855h7.8L241.989,127V238.333ZM105.475,231.669h45.1l-7.164-44.653a25.367,25.367,0,1,0-30.769,0ZM183.322,83.2c-1.151-20.009-22.816-49.815-55.333-49.815s-52.848,31.473-54,51.481v27.313H183.322V83.2Z"/></svg>')}

input[autocomplete="postal-code"] {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="%23aaaaaa"><path d="M232.388,246.485a0.672,0.672,0,0,1-.073.115c-0.067-.036-0.135.093-0.2,0.06-0.01-.006-0.019-0.175-0.028-0.175h0.123l-68.772-57.079,69.551-55.1V246.485h-0.6ZM27.99,120.991H87.865c14.135,27.662,31.2,56.9,43.123,64.017,11.558-6.664,26.8-36.132,40.166-64.017H232.21L130.339,201.719Zm151.754-63c-0.172,1.545-.432,3.281-0.776,5.18-0.689,3.8-1.715,8.249-3.066,13.158a287.379,287.379,0,0,1-11.771,33.555c-10.373,23.713-22.908,51.335-32.184,57.123-9.6-6.2-23.785-33.732-34.593-57.312a256.172,256.172,0,0,1-12.206-33.4c-1.377-4.891-2.415-9.329-3.11-13.121-0.347-1.9-.609-3.63-0.783-5.176q-0.13-1.159-.195-2.174T81,53.953A56.935,56.935,0,0,1,95.5,15.909,49.6,49.6,0,0,1,111.232,4.221a45.282,45.282,0,0,1,9.291-3.163A44.322,44.322,0,0,1,125.438.25q1.248-.133,2.514-0.2T130.5,0q1.281-.01,2.547.053t2.514,0.2a44.306,44.306,0,0,1,4.915.807,45.3,45.3,0,0,1,9.292,3.164A49.627,49.627,0,0,1,165.5,15.911,56.9,56.9,0,0,1,180,53.953c0,0.569-.018,1.192-0.06,1.866S179.831,57.218,179.744,57.991ZM131.728,36.56A17.571,17.571,0,1,0,149.1,54.131,17.475,17.475,0,0,0,131.728,36.56ZM28.058,135.118l-0.069-.055h0.069v0.055Zm0,112.044V135.118l69.815,54.971Zm102.916-32.546,23.708-18.8,70.851,60.072L34.785,256l72.048-58.8Z"/></svg>')}

input[type="search"] {background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" fill="%23aaaaaa"><path d="M7.461,247.307a25.537,25.537,0,0,0,36.126.092L100.6,190.855a25.47,25.47,0,0,0,6.956-23.49A92.9,92.9,0,0,0,256,93.149,92.9,92.9,0,1,0,88.2,147.824a25.51,25.51,0,0,0-23.616,6.812L7.538,211.184A25.538,25.538,0,0,0,7.461,247.307Zm90.9-154.6A64.76,64.76,0,1,1,117.2,138.583,64.279,64.279,0,0,1,98.359,92.711Z"/></svg>')}



details:is(.warning, .info, .help) {border: 1px solid var(--quaternary); border-radius: var(--borderRadius)}
details:is(.warning, .info, .help) summary {background: var(--quaternary); color: var(--white); padding: 16px 8px 16px 24px; font-weight: bold; border-radius: var(--borderRadius); transition: 0.4s; list-style: none; display: flex; justify-content: start; align-items: center; text-overflow: ellipsis; overflow: hidden; width: 100%}
details:is(.warning, .info, .help) summary:hover {padding: 16px 8px 16px 16px; background: var(--secondary); color: var(--white)}
details:is(.warning, .info, .help) div {padding: 24px 32px}
details[open]:is(.warning, .info, .help) > summary {border-radius: var(--borderRadius) var(--borderRadius) 0 0}
details:is(.warning, .info, .help) summary::before {content: ''; margin: 4px 16px 0 0}

details.warning summary::before {content: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 256 256%22%3E%3Cpath fill=%22white%22 d=%22M241.882,239.89c-50.765-.057-181.554-0.031-230.359,0-13.317.01-14.068-8.163-7.506-19.488,26.327-45.44,91.911-159.242,115.5-200.09,3.1-5.36,13.829-5.888,17.169-.055,65.67,114.693,117.8,206.377,117.8,206.377S262.347,239.913,241.882,239.89ZM112.825,88.365l4.519,86.666h21.623l4.519-86.665H112.825ZM139.454,194.19q-4.034-3.9-11.387-3.9-7.623,0-11.609,3.815t-3.988,11.265q0,7.185,4.077,11.133t11.52,3.947q7.264,0,11.343-4.036t4.076-11.044Q143.486,198.1,139.454,194.19Z%22/%3E%3C/svg%3E')}

details.info summary::before {content: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 256 256%22%3E%3Cpath fill=%22white%22 d=%22M127.5,255A127.5,127.5,0,1,1,255,127.5,127.5,127.5,0,0,1,127.5,255ZM138.628,46.179a17.926,17.926,0,0,0-13.29-5.188q-8.145,0-13.171,5.188a17.819,17.819,0,0,0-5.029,12.909,16.993,16.993,0,0,0,5.029,12.668Q117.2,76.7,125.338,76.7t13.29-4.946a16.792,16.792,0,0,0,5.149-12.668A17.6,17.6,0,0,0,138.628,46.179ZM155.99,194.692l-13.65-.724V92.627H99.474v20.027l8.382,0.482q3.351,0,4.67,1.448t1.317,5.55v67.078q0,7-6.945,7.721l-7.9.724V214H155.99v-19.3Z%22/%3E%3C/svg%3E')}

details.help summary::before {content: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 256 256%22%3E%3Cpath fill=%22white%22 d=%22M246.83,177.237c-18.913,26.687-53.914,4.806-77.018,23.744-15.457,12.669-19.85,39.728-4.879,54.684-34.215,2.446-67.8-18.015-81.026-50.907-4.912-12.218-2.241-12.951-15.963-12.951-10.265,0-20.835.775-31.084,0C16.023,190.231,2.454,174.789.793,154.213-2.315,115.692.229,85.592,0.228,46.952,0.228,8.9,23.09.25,61,.25,61,0.25,212.486.4,207.422,0.4c42.292,0,48.2,33.391,48.2,61.759v74.332C255.626,150.535,255.359,165.2,246.83,177.237ZM110.476,192h43.409V161.2H110.476V192ZM103.869,82.316V82.1c0.856-8.074,6.967-16.383,19.165-16.383,9.145,0,16.767,3.131,16.767,20.169,0,8.956-5.073,12.72-13.5,18.712-15.465,10.992-16.407,19-16.407,39.974H153.16c0-15.728,3.918-16.965,13.283-23.737,16.768-12.014,20.544-25.411,20.544-43.1,0-42.813-35.5-56.72-61.558-56.72C101.691,21.01,63,44.309,63,82.316h40.87Z%22/%3E%3C/svg%3E')}

details.warning {border: 1px solid red}
details.warning summary {background: red}
details.warning:hover summary {background: var(--linkHover)}
details.info {border: 1px solid var(--infoColor)}
details.info summary {background: var(--infoColor)}
details.info:hover summary {background: var(--infoColorHover)}
details.help {border: 1px solid var(--helpColor)}
details.help summary {background: var(--helpColor)}
details.help:hover summary {background: var(--helpColorHover)}



/* WARNINGS */

div.warning {margin: calc( var(--gapSmall) + 12px) auto; width: max-content; min-width: 300px; max-width: var(--formWidth); padding: 20px var(--gapSmall) 20px 90px; color: white; text-align: left; box-shadow: var(--materialShadow); border-radius: var(--borderRadius); font-size: var(--fontSizeXLarge); background-repeat: no-repeat; background-size: 42px; background-position: 26px center; line-height: 1.3; background-color: red; background-image: url("/ico/warning-white.svg"); position: relative;
	&.warningSmall {background-size: 24px; background-position: 22px center; padding-left: 62px}
	&.warningText {font-size: var(--fontSize)}
	&.warningSmallText {font-size: var(--fontSizeSmall)}
	&.success {background-color: var(--addColorHover); background-image: url("/ico/ok-white-128.png");}
	&.failure {background-color: red; background-image: url("/ico/not_ok-white-128.png");}
	&.info {background-color: var(--infoColor); background-image: url("/ico/info-white.svg");}
	&.help {background-color: var(--helpColor); background-image: url("/ico/help-white.svg");}
	&.download {background-color: var(--green); background-image: url("/ico/download.svg");}
	&.message {background-color: var(--helpColor); background-image: url("/ico/message.svg");}
	h4 {font-size: calc( var(--fontSizeLarge) + 0.2rem); color: white; text-align: left; margin: 0 auto 3px auto !important; font-weight: normal;}
	p {color: white; font-size: var(--fontSizeSmall); font-weight: bold; margin: 2px auto 0 auto; letter-spacing: 0.5px;}
	a {position: absolute; padding: 8px 16px; left: 50%; transform: translateX(-50%); border: 3px solid white; border-radius: 42px; font-size: calc(var(--fontSizeSmall) - 0.1rem); color: white; font-weight: bold; bottom: -20px; box-shadow: var(--materialShadow); letter-spacing: 0.5px; white-space: nowrap}
	a:not(.addButton) {background-color: inherit}
	a.addButton {padding: 10px 16px; bottom: -28px;}
	a::after:not(.addButton) {content: "→"; position: absolute; right: -14px; opacity: 0; transition: right 0.25s ease, opacity 0.25s ease; font-weight: bold;}
	a:hover:not(.addButton) {padding: 8px 28px; box-shadow: var(--materialShadowHover)}
	a:hover::after:not(.addButton) {right: 10px; opacity: 1;}
	label {color: white; font-weight: bold;}
}

.warning:has(a){padding-bottom: 26px; margin-bottom: var(--gap);}


@media screen and (max-width: 768px) {

	div.warning {margin: var(--gap) 0; width: auto; max-width: 650px; background-image: none !important; padding-inline: var(--gapSmall) !important; text-align: center;
		* {text-align: center !important;}
	}
	.warning:has(a){padding-bottom: 30px; margin-bottom: var(--gap);}

}



/* WARN BOX */

.warn {margin: var(--gap) auto 0 auto; background: var(--lightestGrey); width: fit-content; max-width: 850px; padding: var(--gapSmall); border-radius: var(--borderRadius);
	* {font-size: var(--fontSizeSmall);}
	ul {margin: 0 0 0 var(--gapSmall)}
	ul li {margin: 0 0 3px 0}
	h4 {margin-bottom: 3px;}
	dd {font-size: 15px;}
}

@media screen and (max-width: 768px) {
	.warn {margin: var(--gapLarge) 0 0 0; width: auto;
		ul {margin:0}
	}
}



/* LOADING BAR */

.loadingWrap {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.1);backdrop-filter:blur(2px);z-index:9900;
	.loading {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
		img, svg {width: 250px; height: 250px;}
	}
}






/* FLOATING SUBMIT FORM BUTTON WHEN SCROLLING /onload.js */
/* ===================================================== */


.formFloatingButton {} /* area above floating button */


.floatingSubmitButtonWrap {text-align: center; z-index: 9999; background: rgb(255 191 105 / 34%); border-top: 5px solid rgba(255,255,255,0.4); transition: 0s;

	* {transition: 0s;}

	.floatingSubmitButtonContainer {display: flex; flex-direction: row; align-items: center; max-width: var(--formWidth); width: 100%; margin: 0 auto; justify-content: center;

		&.largerButtonContainer {max-width: var(--displayWidthDesktop)} /* larger width of container, good for more items in row */
		&.smallerButtonContainer {max-width: calc(var(--displayWidthMobile) - 200px)} /* smaller width of container, good for 2 items in row */

		&.onlySubmitButton {justify-content: center} /* only one button (usually submit) */

		&.centeredButtons {justify-content: center} /* buttons / links only in the center */

		&.leftRightButtonGroups {justify-content: space-between; /* left and right placed buttons */
			> div {display: flex; gap: 18px; flex: 1; align-items: center;}
			.leftSideButtons {justify-content: flex-start;}
			.rightSideButtons {justify-content: flex-end;}
		}
		
		&.onlySubmitButtonAndBack {justify-content: space-between; gap: 18px;/* left backward button and right centered submit */
			> div {display: flex; gap: 18px; align-items: center;}
			.leftSideButtons {justify-content: flex-start;}
			.rightSideButtons {flex: 1; justify-content: center;
				a, button {max-width: 450px; width: 100%}
			}
		}

		&.buttonsInColumn {flex-direction: column; gap: 24px;} /* used when static and items must be in column - doc and cmr templates */

	}

	.formInputItem {display: flex; text-align: left; font-weight: bold; font-size: var(--fontSizeSmall);} /* form for name / text like template name */




/* BUTTONS AND LINK STYLES */
/* ======================= */

	button[type="submit"]::before,button[type="submit"]::after,input[type="submit"]::before,input[type="submit"]::after,a.submit::before,a.submit::after,input.submit::before,input.submit::after,button.submit::before,button.submit::after {content: none;display: none;}

	button, .submit, a {border: 3px solid transparent; width: auto; max-width: none; box-shadow: var(--materialShadow); margin: 0; padding: 12px 32px; background-color: var(--link); font-weight: bold; font-size: calc( var(--fontSizeLarge) - 0.1rem); letter-spacing: 0.5px; line-height: 1.1; color: white; white-space: nowrap; transition: background-color 0.5s ease, box-shadow 0.5s ease;
		svg, img {width: 16px; height: 16px; fill: white; vertical-align: middle; margin-right: 8px;}
		small {display: block; font-size: 12px; font-weight: normal; color: inherit; letter-spacing: 0; margin: 0}
	}

	button:has(small), .submit:has(small), a:has(small) {padding: 8px 32px;}

	button.largerButton, a.largerButton {max-width: 300px; width: 100%;}
	button.smallerButton, a.smallerButton {text-transform: none; font-size: var(--fontSize); padding: 10px 16px;
		svg, img {width: 14px; height: 14px;}
	}

	.backward {background-image: url('/ico/ArrowLeft.svg'); background-repeat: no-repeat; background-size: 14px; background-position: left 8px center; text-align: left; font-size: calc(var(--fontSizeLarge) - 0.3rem); line-height: 1;
		small {font-size: 11px;}
	}
	.backward:hover {background-color: #ca5b00;}

	.forward {background-image: url('/ico/ArrowRight.svg'); background-repeat: no-repeat; background-size: 14px; background-position: right 8px center; text-transform: uppercase; padding-right: 28px;}

	.onlySubmitButton {
		button, a {border-radius: 64px; font-size: var(--fontSizeLarge); max-width: 600px; width: 100%;}
	}



/* STATIC POSITION */

	&.positionStatic .floatingSubmitButtonContainer {

		.backward {color: var(--link); background-image: url('/ico/ArrowLeftRed.svg'); background-color: transparent !important; box-shadow: none; padding: 0 0 0 28px;}
		.backward:hover {color: var(--linkHover);}

		.forward {padding-right: 28px;}

	}



/* FIXED POSITION */

	&.positionFixed .floatingSubmitButtonContainer {

		button, .submit, a {border-radius: 12px;}

		.backward {background-image: url('/ico/ArrowLeft.svg'); padding: 8px 12px 8px 28px; background-color: darkorange;}

		button:hover, .submit:hover, a:hover {border: 3px solid rgba(255,255,255,0.3); box-shadow: var(--materialShadowHover);}
		button:disabled,button[disabled]{border: 3px solid rgba(255,255,255,0.7)}

	}






	/* STATIC STATUS */
	&.positionStatic {position: static; background: none; margin-top: var(--gap);

		.formInputItem {display: flex; flex-direction: row; gap: 8px; align-items: center; justify-content: center; margin: auto;}

	}


	/* FLOATING STATUS */
	&.positionFixed {position: fixed; bottom: 0; right: 0; left: 0; backdrop-filter: blur(4px);

		.floatingSubmitButtonContainer {flex-direction: row; flex-wrap: wrap; padding: 12px 0; margin: 0 auto; gap: 18px;
		
			&.buttonsInColumn {flex-direction: row; gap: 12px;}

			.formInputItem {display: flex; flex-direction: column; background: #ebe3dd; padding: 8px 18px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.7); text-align: left; box-shadow: var(--materialShadow); font-weight: bold; font-size: var(--fontSizeSmall);
				input {display: block;}
			}


		}
	}


}


@media (min-width: 1024px) {
	.floatingSubmitButtonWrap.positionFixed {left: var(--menuWidthClosed)}
}


@media (min-width: 1920px) {
	.floatingSubmitButtonWrap.positionFixed {left: var(--menuWidthOpen)}
}


@media (max-width: 1024px) {
	.floatingSubmitButtonWrap.positionFixed {padding: var(--gapSmall);}
}


@media (max-width: 1024px) {

	.floatingSubmitButtonWrap.positionFixed {padding: 12px;}

	.floatingSubmitButtonWrap.positionFixed, .floatingSubmitButtonWrap.positionStatic {
		.floatingSubmitButtonContainer {flex-direction: column; flex-wrap: nowrap; gap: 18px; justify-content: center; overflow: hidden; padding: 0;
			> div {width: 100%;}
		}
		.leftSideButtons {order: 2; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; -ms-overflow-style: none;}
		.leftSideButtons::-webkit-scrollbar {display: none}
		.rightSideButtons {order: 1; justify-content: center; flex-direction: column; gap: 12px !important;
			button {width: 100%; order: 10}
			button.forward {order:1}
		}
	}

}




/* SUBMIT BUTTON CONTAINER - FOR DEMO USER */

.submitButtonWrap {display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gapSmall); margin: var(--gap) auto; width: var(--formWidth);
	button {margin: 0 auto; flex:1;}
	.fullWidth {flex: 1 0 100%}
	.halfWidth {flex: 1 0 45%; padding: 16px 14px; font-size: calc( var(--fontSize) + 0.2rem); width:auto; min-width: 300px; margin: 0 auto; text-align: center;}
}


/* 2 BUTTONS IN ONE ROW */
.submitButtonDouble {display: flex; flex-direction: column; gap: 0 8px; margin: var(--gap) auto; width: var(--formWidth);
	> div {display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gapSmall)}
	> div > div {margin: 0 auto; flex: 1 0 45%; }
	button {margin-top: 0}
	a {padding: 8px 28px; display: table !important; margin: 0 auto; position: relative; background: rgba(255,255,255,0.7)}
}


@media only screen and (max-width: 768px) {
	.submitButtonDouble {width: auto; background: rgba(255,255,255,0.4); padding: 0 12px;
		.buttonRow {flex-direction: column;
			> div {flex: 1 0 100%; width: 100%;}
			button {width: 100%; max-width: 700px; margin: 0 auto !important;}
		}
	}
}







/* ------ LIGHTBOX ------- */
/* ======================= */

/* MASK */
#lightbox, .maska, .modal, .modalExtra {background-color: rgba(0,0,0,0.4); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999995; justify-content: center; align-items: center; backdrop-filter: blur(4px);}

#lightbox {display: none;}


/* COMMON */

.lightbox > div, .modal-content, .modalInner, .mobile_tally_record {background: #f3f3f3; border: 2px solid white; padding: var(--gapSmall); z-index: 999999; border-radius: var(--borderRadius);}

.lightbox > div.preloader {width: auto; height: auto; text-align: center; justify-content: center; box-shadow: none; max-width: none; background: none; border: none}

.lightbox > div {text-align: center; box-shadow: 4px 4px 12px rgba(0,0,0,.5); max-width: 850px; width: auto; margin: 24px; position: relative;

	&.wideLightbox {width: 100%}

	a.close {position: absolute; right: -24px; top: -24px; padding: 10px; z-index: 12;
		img {width: 32px; height: 32px;}
	}

	#lightboxPreloader {display: none; background: rgba(0,0,0,0.1); top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(2px); position: absolute; z-index: 10;
		> div {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;}
	}

	.lightbox-header {font-size: var(--fontSizeXLarge); font-weight: bold; border-bottom: 1px solid #C1C1C1; text-align: left; padding: 6px 12px 14px 12px; color: var(--darkGrey); text-shadow: 1px 1px 3px #fff; display: flex; width: 100%; justify-content: space-between;
		h6 {font-size: 17px; font-weight: normal; color: #777; margin: 0 0 0 41px; text-shadow: none; flex: 1}
		a {font-size: 13px; font-weight: normal; float: right; margin: 10px 0 0 10px;}
		img {vertical-align: middle; margin: -4px 6px 0 0; max-height: 32px;}
		svg {vertical-align: middle; margin: -4px 6px 0 0; height: 14px; width: 14px}
	}

	.lightbox-body {border-top: 1px solid #fff; padding: 12px;
		li {text-align: left; margin-bottom: 8px; line-height: 1.25}
		td {text-align: left; white-space: nowrap;}
		th {text-align: right; color: #777;}
		strong {color: #ff0000;}
		hr {border-top: 1px solid var(--lighterGrey);}
		:is(tfoot td, tfoot th) {padding: 14px 6px;}
		:is(td,th) {font-weight: normal; vertical-align: middle; padding: 7px 6px; background: none; border: none}
		:is(td,th,li,a,b) {font-size: 17px; white-space: normal;}
		textarea {height: 150px}
	}

}


@media screen and (max-width: 1024px) {

}


.lightbox table {border-spacing: 0; border: 0; margin: 0 auto 0 auto;}



/* EMAIL MESSAGE - #lightbox-email #lightbox-email-free #lightbox-email-pdf */

.lightbox {

	.emailbox {max-width: 500px; width: 100%;
		.form {}
		.form .column {grid-gap: 12px; margin-top: 12px}
		.form b {font-size: var(--fontSize);}
		.form button {margin: 20px 0 0 0}
	}

	.emailbox.messageClassifieds {
		
		.lightbox-header, .lightbox-body {border: none;}
		.lightbox-header {padding-bottom: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
			.recipient {max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
		}
		.form {margin: 0}
		.form .column {grid-gap: 6px}
		.form .obl::before{content:""}
		.form .column > div {padding: 0}

	}

	.message_sent, .message_failed {margin: var(--gapSmall) auto; font-weight: bold; font-size: var(--fontSizeXLarge)}
	
	.message_sent {color: var(--green)}
	.message_failed {color: red;
		small {margin: 3px auto; color: red}
	}
	
}


@media screen and (max-width: 1024px) {

	.lightbox-body {padding-block: 0; overflow: auto;}
	.lightbox > div {padding: 12px 0; max-width: -webkit-fill-available; width: auto;}

}





/* ==== LIGHTBOX - STM TALLY ==== */


/* ITEMS */

.tallyRemoveItem {
	button, hr {margin: var(--gapSmall) auto calc( var(--gapSmall) - 4px) auto;}
	button svg.iconInline {margin: -3px 8px 0 0}
}



/* TEMPLATE INFO */

.tallyTemplateInfo {width: auto;
	dl {text-align: left;
		dt {font-size: var(--fontSize); margin: var(--gapSmall) 0 4px 0; font-weight: bold;}
		dt:first-child {margin-top: 0}
		dd {font-size: var(--fontSizeSmall); margin: 0 0 3px 3px;
			b {display: inline-block; margin-right: 3px}
		}
	}
}



/* PARTNER */

.lightbox {

	> div.tallyPartner {max-width: 500px; width: 100%;

		.partnerSector {text-align: left; overflow :auto; max-height: 370px; font-size: 16px;
			
			a {display: block; border-bottom: 1px solid #ddd; padding: 8px 10px; text-align: left; margin-right: 10px; font-size: 18px;}
			
			p.address {font-size: var(--fontSizeLarge)}
			.partnerData {display: flex; flex-wrap: wrap; margin: var(--gapSmall) 0; gap: 12px 3px;
				> div {flex: 1 48%; vertical-align: top;}
				> div:empty, span:empty {display: none;}
				b {display: block; font-size: var(--fontSizeSmall)}
			}
		}
	}
}




/* TALLY STATUS */

.lightbox {

	> div.tallybox.docStatus {max-width: 500px; width: 100%;
		
		h4 {margin-bottom: 6px;}
		.column {margin: 0}
		button {margin: var(--gapSmall) auto 0 auto;}

	}

}



/* CATEGORY SELECTION */

.lightbox {

	.categorySelection {width: 100%; max-width: 650px;

		.lightbox-header {display: flex; align-items: end; justify-content: space-between;
			.red {font-weight: normal;}
		}

		.lightbox-footer {
			button {margin: var(--gapSmall) auto 0 auto}
		}

		.lightbox-body {overflow: auto; max-height: 400px;
			label {padding: 0 0 0 4px; color: black; font-size: 16px;}
			label:hover {color: #bb0000;}
			h4 {text-align: left; margin: 12px 0 8px 0;}
			h4, h4 label {font-size: 18px; font-weight: bold;}
			div {border-bottom: 1px solid #ddd; text-align: left; padding: 5px 0 10px 0;}
			ul {width: 100%; display: flex; flex-wrap: wrap;
				li {display: block; min-width: 50%; flex: 1; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0}
			}
		}
	}
}


@media screen and (max-width: 768px) {

	.lightbox {
		.categorySelection {
			.lightbox-body {
				ul {flex-direction: column;
					li {min-width: 90%}
				}
			}
		}
	}

}



/* MODAL - COMMON CLASSES */
/* ====================== */



.modalInner {display: none; width: auto; max-width: 550px; margin: var(--gapSmall); padding: 28px var(--gap); text-align: center; box-shadow: var(--outsetShadow); overflow: hidden;

	p {text-align: justify;}
	hr {border-top: 1px solid var(--lighterGrey);}
	button.modalClose {margin: auto 0 auto auto; align-self: end}
	h6 {font-size: var(--fontSizeLarge); text-align: center; text-transform: uppercase;}
	img {width: 100%; height: auto;}
	ul, ol {list-style-position: inside;}
	:is(ul,ol) li {text-align: left; margin: 0 0 8px 0}
	.modalInnerFooter {display: flex; align-items: center; justify-content: end; margin: var(--gapSmall) auto 0 auto; gap: var(--gap);}
	.modalInnerFooter.centered {justify-content: center;
		button.modalClose {margin: auto}
	}
	.modalInnerFooter.left {justify-content: left}
	.modalInnerFooter.spaceBetween {justify-content: space-between}
	.modalInnerFooter.spaceEvenly {justify-content: space-evenly}
}

.modalInner.modalWarning {
	p {text-align: center;}
	h6 {color: var(--linkHover)}
}


/* MODAL EXTRA - extra from all_main, useful for showing after pageload */
.modalExtra {display: flex;
	.modalInner {display: block;}
}

.logoutModal.modalInner {
	p {text-align: center; font-size: var(--fontSizeLarge)}
	a.logout {display: flex; font-weight: bold; gap: 8px; font-size: var(--fontSizeLarge); align-items: center; border: 3px solid var(--link); border-radius: 50px; padding: 8px 14px;
		svg {width: 24px; height: 24px;}
	}
	a.logout:hover {border: 3px solid var(--linkHover); text-decoration: none;}
}


/* BOOTBOX http://bootboxjs.com/ - bootstrap.min.css - confirm modal window */
/* Bootbox.js - Modified by Claude for translations and trigger */

.modal-backdrop {top: 0; right: 0; bottom: 0; left: 0;}
.modal-open {overflow: hidden}
.modal {overflow: auto; overflow-y: hidden; position: fixed; z-index: 10050; -webkit-overflow-scrolling: touch; outline: 0; vertical-align: middle}
.modal.fade .modal-dialog {transform .3s ease-out}
.modal.in .modal-dialog {transform: translate(0,0)}
.modal-dialog {position: relative; width: auto; margin: 10px}
.modal-content {position: relative; border: 1px solid rgba(0,0,0,.7); border-radius: var(--borderRadius); box-shadow: 0 0 9px rgba(0,0,0,1); background-clip: padding-box; outline: 0; text-align: center; padding: 5px; display: block}
.modal-backdrop {position: fixed; z-index: 10040; background-color: #000}
.modal-backdrop.fade {opacity: 0; filter: alpha(opacity=0)}
.modal-backdrop.in {opacity: .5; filter: alpha(opacity=50)}
.modal-header {padding: 15px; min-height: 6px}
.modal-header .close {margin-top: -2px}
.modal-title {margin: 0}
.modal-body {position: relative; padding: 0 20px 20px 20px; line-height: 33px;
	b {font-size: var(--fontSizeLarge);}
}
.modal-footer {padding: 0 20px 25px; text-align: center}
.modal-footer .btn+.btn {margin-left: 5px; margin-bottom: 0}
.modal-footer .btn-group .btn+.btn {margin-left: -1px}
.modal-footer .btn-block+.btn-block {margin-left: 0}
.bootbox-close-button.close {background: 0 0; border: none; outline: 0; box-shadow: none; font-size: 42px; position: absolute; right: 6px; top: -5px; font-weight: 600; width: auto; color: var(--darkGrey);}
.modal p {display: block}
.modal-footer .btn {display: block; font-size: 23px; width: 100%; font-weight: bold; margin: 10px auto; padding: 12px 0;}
.modal-footer .btn:hover {box-shadow: 0 0 8px rgba(0,0,0,.3)}

@media screen and (min-width: 769px) {
	.modal-dialog {width: 100%; max-width: 600px; margin: 30px auto}
	.modal-content {box-shadow: 0 5px 15px rgba(0,0,0,.5)}
	.modal-sm {width: 300px}
}


@media screen and (min-width: 992px) {
	.modal-lg {width:900px}
}

.btn.btn-default {display: none;}

.fsk {
	background: url(/images/flags.png);
	background-repeat: no-repeat;
	background-position: 0 -30px;
	background-size: cover;
	width: 12px;
	height: 10px;
}





/* MODAL FOR WARNING OF SMALL DISPLAY - USING ONCEPERSESSION toggle */

.modalExtra.show {display: flex}

@media screen and (min-width: 1190px) {
	#useLargeDisplay {display: none !important}
}







/* WHERE NEXT */

.whereNextWrap {margin: var(--gapLarge) auto 0 auto; text-align: center}
.whereNext {margin: 0 auto; width: fit-content;
	ul {padding: 0 10px; display: flex; flex-direction: column;}
	h6 {font-size: var(--fontSizeXLarge); text-align: left;}
	li {text-align: left; list-style: none; padding: 0 0 10px 0;}
	a {font-size: var(--fontSizeLarge);}
}


/* TOOLTIP DONE BY CHATGPT - JQUERY IN ONLOAD.JS */

.tooltip {position: absolute; display: none; text-align: center; padding: 8px 12px; background-color: var(--darkGrey); color: #fff; border-radius: 24px; font-size: calc( var(--fontSizeSmall) - 0.1rem); z-index: 199; pointer-events: none; border: 4px solid rgba(255,255,255,0.7);}





/* PHONE NUMBER - COUNTRY CODE CLEAVE PLUGIN */

.phone {float: right; margin: 0; padding: 0;

	.prefix-button {margin: 0 6px 0 0; display: inline-block; width: 80px; text-align: right; background: none; border: 1px solid #aaa; box-shadow: none; padding: 10px; box-sizing: border-box; vertical-align: top; border-radius: var(--borderRadiusSmall); border: 2px solid var(--lightGrey); margin: 2px 8px 2px 0}
	.prefix-button, .prefix-button * {font-size: var(--formInputFontSize); display: none}
	.input-group .form-control {display: inline-block; float: right; margin: 0 !important; vertical-align: top;}
	#prefix {text-align: right; display: inline-block;}
	.input-group ul {display: none; background: #fafafa; width: 410px; position: absolute; list-style: none; margin: 0; height: 200px; overflow-x: hidden; overflow-y: scroll; top: calc(100% + 1px);}
	.input-group .open ul {display: block; z-index: 10;}
	.input-group .open ul li a {display: block; text-decoration: none; color: #333; padding: 4px 14px;}
	.input-group .open ul li a:hover {background: #efefef;}
	.input-group {padding: 0; margin: 3px auto; vertical-align: top; display: flex; flex-direction: row;}
	.input-group-btn {position: relative; padding: 0; margin: 0;}
	.input-group-btn .arrowDown {margin: 0 0 0 4px !important; fill: #333; width: 10px; height: 10px;}

}





/* EMPTY (bottom part) - WHEN NO DATA SUBMITTED */

.empty {margin: var(--gap) auto; text-align: center;
	> * {margin: 0 auto;}
	.actionButtonLarge {margin: var(--gapSmall) auto;}
	.videoTutorials {margin: var(--gap) auto;
		a {display: inline-block; margin-inline: 8px; text-align: center; font-size: var(--fotnSizeSmall); font-weight: bold; white-space: normal; line-height: 1.1;
			img {width: 200px; height: auto; display: block; margin: 0 auto 8px auto;}
			small {display: block; margin: 3px auto; text-align: center; font-size: calc( var(--fontSizeSmall) - 0.1rem); font-weight: normal; white-space: normal; color: inherit;}
		}
	}
}



/* INTERNAL BANNER */

.bannerInt {width: 100%; max-width: 500px; height: 500px; overflow: hidden; display: flex; margin: var(--gapLarge) auto; background-size: cover; background-repeat: no-repeat; background-position: 0 50%; 
animation: moveBackground 14s ease-in-out infinite alternate; justify-content: center; position: relative; border: 2px solid var(--lightGrey);
align-items: center; transition: .3s;}

.bannerIntLogo {position: absolute; top:0; left:0;right:0; background: rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; font-size: 2.2rem; font-weight: bold; color: white; overflow: hidden; padding: 10px; text-shadow: 2px 2px 3px rgba(0,0,0,0.4); transition: .3s}

.bannerInt:hover .bannerIntLogo {background: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(0,0,0,0.7);}

.bannerIntLogo img {width: 42px; heigth: 42px; margin-right: 10px;}
.bannerIntClickHere {position: absolute; opacity: 0; bottom: 0; transition: .5s; padding: 12px 16px; background: rgba(0,0,0,0.4); color: white; font-weight: bolder; font-size: 16px;}
.widthResponsive .bannerInt .bannerIntClickHere, .bannerInt:hover .bannerIntClickHere {opacity: 1;}

.bannerInt:hover {border: 2px solid var(--linkHover); box-shadow: var(--materialShadow); text-decoration: underline;}
#bannerRecApp {background-image: url("../images/banner/rec_app/{RANDOM4}.jpg");}

@keyframes moveBackground {
0% {
	background-position: 0 50%;
	}
100% {
	background-position: 100% 50%;
	}
}

.bannerIntSlide {position: absolute; backdrop-filter: blur(5px); background: rgba(0,0,0,.4); color: white; font-size: 2.3rem; font-weight: 400; opacity: 0; animation: 12s autoSlide infinite linear; padding: 16px; margin: auto var(--gapSmall); text-align: center; line-height: 1.3;}
@keyframes autoSlide {
 0% {opacity: 0.0}
 4% {opacity: 1.0}
 33.33% {opacity: 1.0}
 37.33% {opacity: 0.0}
 100% {opacity: 0.0}
}

.bannerIntSlide:nth-child(1) {animation-delay: 0s}
.bannerIntSlide:nth-child(2) {animation-delay: 4s}
.bannerIntSlide:nth-child(3) {animation-delay: 8s}



/* FEATURE BLOCKED - common template - feature_blocked.tpl */

.featureBlocked, .featureBlocked div {display: flex; justify-content: center}
.featureBlocked {min-height: 400px; margin: var(--gapSmall) auto; gap: var(--gapLarge);

	> div {flex: 1; align-items: stretch; background-size: cover; background-repeat: no-repeat; background-position-y: center; line-height: 1.2; font-size: 2.6rem;}

	.featureBlockedText {

		div {font-size: 2.1rem; flex-direction: column; gap: var(--gapSmall); justify-content: center; text-align: center; line-height: 1.4}
		b {font-size: 3.0rem; display: block; line-height: 1.2; color: red}
		.actionLink {margin: 6px auto 0 auto;}
		
	}

	.featureBlockedOffer {
		
		.featureBlockedOfferBlackBG {background-color: rgba(0,0,0,0.3); width: 100%; height: 100%; padding: var(--gap); backdrop-filter: blur(2px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gapSmall);}
		
		h6 {font-size: 3.3rem; display: block; color: #ffdc93; -webkit-text-stroke-width: 1px;-webkit-text-stroke-color: rgba(0, 0, 0, 0.2); text-align: center; text-shadow: 2px 3px 4px rgba(0,0,0,0.4)}
		
		#featureSlideshow div {display: block; font-size: 42x; color: white; text-align: center; font-size: 2.3rem; line-height: 1.4;
			b {font-size: 3.4rem; display: block; color: white; margin-bottom: 8px;}
		}
		
	}

}



/* TOP STATUSES IN PRESENTATION FOR FEATURES */
/* ========================================= */

.featureStatus {display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; padding: var(--gapSmall) var(--gap); gap: 12px;

	* {color: white; font-weight: bold}
	
	&.userUnpaid {background: red;}
	&.appInstalled {background: green;}
	&.appNotInstalled {background: darkorange;}
	
	> div {flex: 1;
		b {display: block; font-size: calc(var(--fontSizeLarge) + 0.15rem); margin: 0 0 4px 0; line-height: 1.25;}
	}
	.actionLink {border-color: white; margin: 0}

}




@media only screen and (max-width: 1124px) {

	.featureBlocked {flex-direction: column; margin: var(--gap) auto;
		.featureBlockedOffer {

			.featureBlockedOfferBlackBG {padding: calc( var(--gapLarge) + 25px) var(--gapSmall);}

		}
	}
	
	.featureBlockBlocked {flex-direction: column; gap: 16px;
		> div {text-align: center; margin-bottom: 8px:}
	}

	.featureStatus {flex-direction: column; text-align: center;
	
	}

}


.noticeGreen, .notice, .more {margin: var(--gap) auto; text-align: center}
.noticeGreen {color: var(--green); font-size: var(--fontSizeXLarge)}
.notice {}
.more {}


.backLink {display: block; text-align: left; padding: 4px; margin: 0;
	svg {display: inline-block; width: 12px; height: 12px; margin: 0 8px 0 0;}
}