/
Placeholder after script customization v2
Placeholder after script customization v2
- Karl Horstmann
- Arthur Ott
Owned by Karl Horstmann
Often, customizing the script does not cause any problems as long as the customized script is not a visual element on the page (e.g. Google Analytics).
However, when customizing visual elements like YouTube, there is a problem that a content block is missing on the page.
To solve this problem we used placeholders, which show the user what actually should be displayed here.
We divide the areas into a JavaScript, HTML and styling part.
1. Script Part
The first block consists of a normal script tag that has the appropriate data-usercentrics value for the service. In our example it is YouTube Video. It is important that the name of the service must exactly match the name of the service in usercentrics.
This script has the type="text/plain" which is not recognized by the browser as JavaScript and therefore will not be played.
As soon as the approval for the service is given, the type changes and the JavaScript in the brackets is executed.
In our example the Youtube iframe is inserted into a div we created with the id youtubePlaceholder.
Important: The script should be inserted underneath the HTML part. So that the HTML placeholder is loaded before the script, otherwise there may be problems when setting the iframe.
<script type="text/plain" data-usercentrics="YouTube Video">
document.getElementById('youtubePlaceholder').innerHTML = '';
document.getElementById('youtubePlaceholder').innerHTML += '<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com" frameborder="0" allowfullscreen=""></iframe>';
</script>
2. HTML Part
The second block consists of a div with the id youtubePlaceholder the content of this div will be overwritten with the YouTube iframe from the first block as soon as the consent for Youtube is granted. The background image can be easily removed if needed.
In line 2-3 is the YouTube icon which is set as background image (Base64 Encoded)
In line 13-16 a button is shown, when you click on the button more information about Youtube is shown.
the
##ServiceId##must be replaced with the correct Service Id. (ServiceId/TemplateId can be found in the admin interface at the service or can be searched via the browser console usingUC_UI.getServices()).
In line 17-21 a button is shown, when clicking on the button Youtube is accepted and the placeholder disappears and is replaced with the correct Youtube video.
The
##ServiceId##must be exchanged with the correct Service Id. (ServiceId/TemplateId can be found in the admin interface at the service or can be searched via the browser console usingUC_UI.getServices()).
<div id="youtubePlaceholder">
<img style="width: 100%; height: 100%; object-fit: cover;"
src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAASwCAMAAADc/0P9AAAAkFBMVEX/////7+//v7//39//r6//f3//T0//Pz//AAD/X1//z8//Dw//b2//j4//Ly//n5//Hx+urq5dXV2Tk5MoKCjX19fy8vJQUFA1NTV4eHjk5OSGhoZCQkLJycm8vLxra2uhoaH/QED/kJD/EBD/8PD/YGD/0ND/sLD/ICD/gID/4OD/wMD/oKD/UFD/MDD/cHAoQPQqAAAZ3ElEQVR4AezBMQEAAADCIPun9l8GYAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcPbgkAAAAABA0P/XdjcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAXO3ZhEDEQBVBwL8LaSQL03yru7kRminhflgUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgE3zYQHgN7TNla6/cRTvpB8S7+T+RtdcacOLAMptmHK8VNNE1HhpexuyEtYIaJrmpk9pXur1OrZzXy4fnk1XkUpLUS/jtZMuWJS22fVxnxYsxn7XbAIwa+WwjWktatwe2gDM0eaQa1qdIXdhZoAup7WquQnzARyGtGrDIbBm4/FbxoBcSRaTcXL6lpPAdDT7xIVYAtMmWGy2iRt9YMoEizIk7uxLYLIEi0PiodoFJkqw2Cae2AUmSbDIiWfyOXv3ueCgzURheLIlvSxCdGST3pP7v7qv1xSZI/AOXr/n/66rHoOYGUxLE7Kpdvkv9e2XB2wPYG0OXiFWG7MJtipVzKa6/SOV7QEsvCLbxepiLr2tyhCzGQELsNi/In8crYZ0Uq3R1ZvNP4BFDnp9kDyYkKSfzannldN9gwVY5MPMYAby0aMJ6UVsdPRO9w0WYJFsOw55z4ScxV13fZ2bfwCLOOYZk/Yrx1q2r7MQczkDFmDddT5EpB1PCseYTdp8VrkAFmDddS6OQSbv2vrMW7lpYjYNYAHWPecJjy7nYa/ChmFr2ehs/gEs4pd9JzSw737a6s2wSTzAAixKsMjDXt057cay0RNgARY7WGS/Dp0Qc0nXBg+wAItLhORxp8KGelvZaDDAAiyaCMl+tViNIs7+qwWwAIstd/LpTt05/bZS+QawAIszwj3DOeEQcxmvxZ0ewAIszgg5J6y2DGwYr1vUAFiARdsz1e6COdM27fwDWF4h7+DQ6ny009jRsKVQvgUswLrjPODQ+ny4U3fOBuw6AyzAYrAM2XcTK20oHX3dtQJYgEWZO8Xu6sAGwTr/AJZXyHVGI1OJdS6+0lcfv6gBsJxCHlFIyU5jR+di6s52WxlTNjGbIWUDWPkwCos87FTY0JaWjVb2phIdXAAs9tzZdRfHjqZS6UbAAqx7zrsgpORjW52h8BtfHaqoAbAAizp3xo6GwgquCbAA666DQdeqdW8LL/Z1+wwbBSzAYlQDsVwEecayNWyrA1iARWMOedjpO18VlY2eAWt9AIuLhOTJ9hk7OhWtlAWw1gewGIZFnm2fsaOhqGx0BKztASw6CekmlO0pUW627QEswGKeO3UNckVVKigbHQALsKhqIEJeLBcBn6WgeusEWIDFuFGixIR0+tHS5DBsFLAAi6oG7pxjNun7UcHjDqqABVjMaqAQy0764ZJLUQNgARZlWBRimcm77snnDqqABViARSGWndUv/eI0bBSwAIsyLMDK+XNWhRsAC7AAi2h5z4Q06gHT7DRsFLAAi7pRwMoCNIqVWy1gARZ1o0TLiykZtDLQ0xGHjQIWYAHW5198eQeVo1ZpAxumIy4SwAIsxvd9bl99fQdgtVodaNha1NCmpQ6hi/9JCENdNXb1ANZYTWGO/0gfhjrZ1rSpqof/fpghhKFeUkuhuxNYZt98fqOl7kI6aWDDpqKGcTnPf4rjdLLrBbCaaY6/SX8W3nLhs+xDncwjgGX27Xc3WeoupFaOmZJaBfHbFZPN6gU01tlU9kep6mzSbmClKzy7cRtYpxD/MLMkrvBZ9sPJ7jGfeINl9v2XbxuspLTaLKVFDVUX16SvW+05Cy2NQbOnHKz6Cs8ubQErZd78WYNF+CznuqXQ3QEs++HWtrI+Mym9UAl6Lhs2Ws0xH5EswBLAas8xm8mkiJ/lqwewzH78/MZK3aWchUKFuaSoIc1RSV/tCBZgnfp4IZ3AivhZzie7r3xwCLDMfvry7YJVrS8FHQt+qNshqgntXmAB1hAzUcVqz1HN0NKZ4wCWffX9Ld2tXsq4fp2c9InKzRz19M0uYAFW28VMhJLf8s+y8xALsMx++Pl2enO0zKsX5CTfs6LqY1GqzWABVsYrfR+r/LPsGnMIYJn9+MvbBGtaXaoQ1KKGKpam2gwWYOW80ofxV7Ewc0tnjgtYZl98+RbBOq0uBlWHjVaxPNVGsACr7RRUZK+Of1YIWPbVrzfR/Sxmba1CIxY1nOKWpG1gAdY5CqmF6xxyzuYTwDL74QZKHExMWHmcs2h3rGj6uCX9uAUswKqjlNFyGfu4JYs5BbDMfvzurYG1rNyNHaRd27aL29JtAAuwUtQyCB2ncvqRVkI3sI7frWNimpWrq5M2bae4NXUxWIDVzqoprdBwKieYXwDr6INn3jEx/bpqBWnYaIrb05SCBVg6MYtwQqgnmV8A6+CDZx5MzLDqi5akRTjH7QmFYAHWoBMzC91bembzDGCZ/fTd2wGrWvW7uyi/znXcIycVLMAqTyOcges5cd9nX7Dsq++/fCtgtav2Ys/Cd73t4x6ZAev1wJqEq8h6AsManME67uCZB1PTrblUNwuu1HGfVID1amDNygGWnsZcAljH79Z5MtuvO6eVDsPyB1h6AmCpYJVnFHY49UzmHsA65uCZZ1OTViyVJOxPLPFSuqmu6xVbw40OFmDtWt45xnzCklqzphqOv+0OWPrgGX+wxMKGesUKadVLhCGtnQAwbAMLsM5VMktVUDpohAea0+ppWcl8Aljy4Jnjg3W+/C0+ry9JT+sVajuhnlEFC7CGUZgV2tsfZV7f1zzc+znhu4cES+/WOT5Yy+Uj+Xn9sh1WeLVWrKoYLMDqk9YqNdrv0ygtNyGLG+OwnMCSB88cH6zx4vleK+wz9cook0Y4T1HAAqyuEevVKxM7rGppv6s1/wDWAQfPfGx65vxaySHRi2NlKu14TAILsDIzrpaS5s1ZOl8/H7x2FLD0wTP+E/y0wob60gIZTBJoFi9DnSSwACszGH/Wi0hG7YrI6WY2sQBLuE20P1jCN+186bez0tbFIraqTQJYgJUtUlj0XfdF/C05cLE7YOmDZ/zB0rtzuksKjdoR0yhO3+1KwAKsUFBSFcW+51Z8HeYfwNIHz/iDpa2YFaAJv+OzgKU8ugaw8mXrnTwEphcv+9V33Z3zcjtgCbeJ9gdLW2Ypb8SkbWFN8jo6SWABVr4IVHurG/UxTtonyYRkD7D0wTP+YAn1NssFz7QtrEruVqt1sAArFfUx19LZeq2eddbmGsDSB8/4g6V350xZU3rxBK8xdTM4AJYGVqZxT21QnuRRGnKflXsAS+/W8QcrQ1LInrWdRU30H/5eBguwprKbSQTpaSW1kyeYRwDr6INnPrKSVFlj1l89r/Vb4bQxmxGwiu78rD9MkF5+Uh+hN48A1uEHz1hJxhwYab0m54LlKqxWGSzAEnbdpToI/YWYRwDr8INnrChdZrVU6zdLunXnKsLfLHuBBViLBlbSwZputa4BsPy6dawoU+bbP60HqMSFoCEHWKVgJa16q9bBqm93JBZgeQ2esaKkzMWdsLq0ZpQbRvTTSMC6FlhJOFzqdbBO5hDAOvzgGStLZon1q39lk7ry9I16wCoGyzSwgv5C6tsuxAIsj24d05M9zrF2/Ze22h+sCFhOYHX6CzkB1o2D5XCbaJOT35Edk3IH1f3BancEC7CEv9v7jkaTOQSwDj94xmzfwoa0rL/sM5SAtWh/BFjFYHWuYAVzCGAdfvCMyclXKdd1vqhBWHnCXvC+YAGW/i40gHWHYDncJtr0ZI+Ohi7fHHZtsCrAcgErARZgHRmsUxRzEnqoN4BVA9YrgXW+LlgdYO0YTgnbKKZVVzhgOYM1KE9u2RusCFhy2HTPpItSgr0OWNMOYAGW/uRqfUYgYF0plDUIX2dhWYzXACsA1gHBqgHrTYLlcMdCK00TpTQyPYAFWFoAi9acTPoopDfAAizAovnZD6xzFDIA1tsGKxQ8RgtYehgvU5oqCqleC6wOsG4GLAMsPQzwK80YhbSvBVYErFcCqwcsRiT7g1Ve2CBXAS6AdctgRcDyB4ubUJSPHZVb72vAOjRYCbAA603c5kvvzkmAJYIFWC1g6eFGqrmUFjUAFmBxhLVfuFW9Xtig9MkCFmAB1ssNgvWjXspwKLCWsqIGwAIswHrPHyyXAe4OYOndOSNgARZgHRgshyEyDmDZHFdlNsACLMA6MlgOQ2QcwBr0ogbAukewSmL+ASy9D+fQYFX6sFHAAizA8gerfIiMbz42OfrYUQMswAKso4OlD5FxyLNtSldS1ABYgAVY7/qD5T1ExgGsOq7IAliABVi/ybM/WN59OA5gJb2oAbAAC7D8wfIfIuMBlvV6UQNgARZg+YPlMUTGASy9O2cALMACrOODpQ+RcciTidELG06ABViAdXyw9Js5O+TBtmUsGDYKWIAFWE/+YLkPkXEAy2b9DqqABViA9eAPlv8QGQewJr2oAbAAC7DcwXK4mbMDWPrY0QawAAuwjg+WPkTGI+/Y1ujDRgELsADLH6zyITKOsc0JclEDYAEWYJk/WP59OB5gLfqwUcACLMDyB8t/iIwHWEldPoAFWIDlD1b5EBnHvAAWYAEWYOlDZHzyHmAB1iuAFWo9xkCsq4Gl9+EAFmAx090/gKUPkQEswAIstwCWPkTGLx8DFmABlks+8AdLHyLjnWfAAizAcsmzP1j6zZwBC7AOC1YNWG8dLH2IjHM+8wSrAqxbBmsGrE35xB8svQ/HOw+eYKVrgDUD1iuBFQDrVpsJPz/MzZwBKwAWYF0OYJUPkfHM4y5gARZgDYAl5kNPsPyHyHi1EgIWYBU9BnEEK9OHA1iABViTke1gkRdXsNprgDXsBRZgDRJY6gshLwCk5j1XsOwaYNWAVQ6W/i4A1u315gAWYAFWAizAunqefcHqrwDWAliARan7NQJY4Qpgpb3AAqxe+WkoA2s6139L+ltawCIX8+QPlvynC2C9ElhRepwSsH7zUuYQwn8Es9+Gez+TB1+whrV/KqzxEbBuCSzh+JpSd/LoC1Z9BbBsJ7AAq4n/n7+yd54LjqswGNX2XgAZYwzY7/+St99sy0T5GAKejc7fNBFHJyAUIvxDbqoRVkCG8bvxTAWEQmOFtbcXVlJhNREW3tdrgctyAhiGdo4qXwcLK9f8peGGpHi9sFRYOyasBbhzjbC0c1R5M1hYk5TieLourYSlwgJjcyqsGzdiKe8GC4vaC8u1EpYKa8NiKxXCyvctrI+qIIxXo4WV8HQVtFBaCUuFNfNFVmi6PKmwtBHr0bwcLSyLp6vni0wqrFbCYnA8FR8DAzxC+xqU512Fhedrxcuh9w9jhWWOK6zM4MvM8swXCWzSI/yUn6CuwsLzNcIPsXDe9RcWEN08UFiOwYuz4C+yXX9htK9B+TBcWBP+2BUqrDxxYfFAYVk0tB0/wS/dubA+q4QQ3vQXFpjjcCnYoE7kfGhh+WHC8sz4XLZhPTLQHfBaJYTwcbCw8Ko7XnMn4oru1LmbsGp0mnoIy/BlFnD8dIYCXHvdJlQ+DRcWXnU3cAmdL7MCidReWJEvswsd6ICwQDXMeGQWXt4DQtTzGpTnnYWFq6GABzxsuLBm+gWfugmLmNEBxdBYWFwqpn48EfYyKzhVdHQHvFAJIdB4YXkwXz2+vrPobhdZ7ikscMroZ24trDDhEyxGt1AS+G2V6R74oBa6ns8HEBZZzCYO74OwqH0W7iYsOToD+AoRlmAsxwIWLq4ZbOxRj3VXfuTdEYS1Q3kRK9qWVilb/Y9G2PhIwkoe9VWFsDiUM5VCfDQLMBKigkzItOqufBohLLzqDKTrLilRXnfmxF2F5RjZjSuBa4UlsETZ8WIfekH2FacA3Jn0xznK+wHCwoslBpheRCi+E5s/JdHG3FdYRlbJKbpsmeuFJbGVf18o7olFAp0lNHNvofbooaPa544LC58ARfoXk2rqKuRZJKzZU8xuZu4trMwiyf0T3Sp7RBSWQLLWyq9ycg+8/E7mavd6+gHtdVdeDxIW7pPZ/cUSWMLgZ9jgNBYWcXNwYeEUcIF/wq7OORtQIeqRWMqnYwiLFm5EoPNshxaWfYrCCtCmbwMh6oENyouDCGtiHPxscpzQR1hrXXBhqLAW/MMAkQhAz3XXLqyewiLLTQge24gUWFwfYeU6OW9DhZXxM2QhDAHomlBXhF2FlbkJrmkShWj6CItClZxdF2HhE6Byk+fXNaHy4jDCouXGH/K1Sn+5k7AWxjFURgrLIPPlBs+vze7KOzqOsHy4bZl2qtNfJ2EVhrFEUzNhzYySblyStHRPfFEZXcPzIcICy+IAG96cKkWd+giLEr5cJaJmwpps2wnQyjLS8AC07K6HjfYWVoPOg+Txo+MludhOwnIMsl+QMCysQFPbCpNPuiBsfSiW8ny8sJp+yCe6SKpZk6ydhOVDTU+BbSSsDTSmfEWn0LZlQqtYyms6lrBoCjf9UjY1DRJ7J2GBwpi98CBMWDtaKN9IwqivdKOwKR9ejBdWS2OZil4v+XSo3EtYlCoqPKaRsCZwghs8iRgtuOshMy35ROOF1dBYhkRigH1FvpuwMm5Tyo2Ehb75E12B6Tq/0p9Aa8W9v7DqjWWAFAKMQBR6CYtcRXRthGXBN98Q3dBYju6T93pUMrogHC8s8jNXEDJdxQobgWwHYWHdo/NEJxIgLDmqOCO+ksmhzaXUZizlOY0RloxjmM2TCOCE2cuPaCUsPDrr6RsWFJZwZ78gvpLxlkEWT7+gPylUvtBhhUVoE2MqsA4BqbgewgKMtctTRlhYyPnLoRBCSQxgM90179RM53lHvYUFkS2gK0MQJYgLrh/IPYVFRojORvqBHRSWvCnnVykADO/CeF2psdRXoLBA8sJXYQ2h+AXSX+wqLIoblNEZFpYcVFz4IYKhCszMMmGZqA9qLPUVRXeRSDDebIEvM++RAOSM3Ar9inuATGdxF8mPcPV25sH++nc8X391/J7O29xTHXGdBVsVwtE6ljZgHYvstsRnCXYtnqrxZuOfCJuJdAzibs9E56kn0/7T98W8TvQYYlktn8MuZiJF9wof4MNLelrk4txiv+Gcyb5FShq32X9ZXJnoWOT9FN3qyhiVxry7fzF/slsX2ZHDUABF5W+rBcVVs06y/2WGmRnvnRtE7+jgvd642e32tmdO33tnZPR1vcSyp28MGOb1HDl9c0As6zFKT98fsFrL1XqV3hkgWXIFTK3+VbMW6WcBhlWb1T9n3aYE/Eh9NS/1r5iV+WpMwI82xiKXZf3FSsmLGBLwawwRObdSftGNqrS8iEjAbxYR+TRe5ec1qrScF/FHMwX0iJjysVZOzL5RnY7N87EpInq6F8AYp6Z87l+5VN9JudTyuSlOjekDAAzxbOlHAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAj9uCQAAAAAEDQ/9d2NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFd7cEACAAAAIOj/63YE6hsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABz5nQC0M0mTMAAAAASUVORK5CYII='>
<div class="uc-embedding-wrapper">
<h3>We need your consent to load the Youtube service!</h3>
<p class="description-text">We use a third party service to embed video content that may collect data about
your activity. Please review the details and accept the service to watch this video.</p>
<p class="not-existing-service">This content is not permitted to load due to trackers that are not disclosed
to the visitor. The website owner needs to setup the site with their CMP to add this content to the list
of technologies used.</p>
<div class="uc-embedding-buttons">
<button ontouchstart="UC_UI.showSecondLayer('##ServiceId##');"
onclick="UC_UI.showSecondLayer('##ServiceId##');" class="uc-embedding-more-info">
More Information
</button>
<button ontouchstart="UC_UI.acceptService('##ServiceId##');"
onclick="UC_UI.acceptService('##ServiceId##');"
class="uc-embedding-accept">
Accept
</button>
</div>
<span></span>
</div>
</div>
3. Styling
For the placeholder to be styled correctly, CSS is still needed. This can of course be adjusted as desired, so that this corresponds to the style of the page.
In line 3-6 the width and height of the placeholder can be set.
In line 34 the color of the "More Information" button can be adjusted.
In line 55 the color of the "Accept" button can be customized.
<style>
#youtubePlaceholder {
height: 470px;
width: 100%;
max-height: 470px;
max-width: 1000px;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.uc-embedding-wrapper h3 {
color: black;
}
p.description-text {
color: black !important;
max-width: 100% !important;
}
.uc-embedding-more-info {
text-transform: uppercase;
cursor: pointer;
box-shadow: none;
font-size: 16px;
display: inline-block;
height: 45px;
width: 100%;
max-width: 230px;
letter-spacing: 1.2;
background: #ffffff;
color: #6E6E6E;
border: 1px solid #6E6E6E;
margin: 5px 10px 15px 10px;
line-height:0px;
}
.uc-embedding-accept {
text-transform: uppercase;
cursor: pointer;
border: none;
box-shadow: none;
font-size: 16px;
display: inline-block;
height: 45px;
width: 100%;
max-width: 230px;
padding: 0;
letter-spacing: 1.2;
padding-left: 25px;
padding-right: 25px;
background: #9b004b;
color: #fff;
margin: 5px 10px 15px 10px;
line-height:0px;
}
.uc-embedding-wrapper {
width: 100%;
height: 100%;
justify-content: center;
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
background: rgba(255, 255, 255, 0.75);
border-radius: 4px;
box-shadow: 0 3px 6px rgb(0 0 0 / 50%);
position: absolute;
padding: 10px;
top: 50%;
left: 50%;
text-align: center;
font-size: 14px;
line-height: 20px;
transform: translateX(-50%) translateY(-50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
overflow: auto;
font-family: Arial, Verdana, sans-serif;
}
.uc-embedding-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.uc-embedding-wrapper>h3 {
margin-top: 0px !important;
max-width: 100% !important;
}
</style>