.controls {position:fixed;top:10px;left:10px;display:flex;gap:10px;z-index:99999}
.code-toggle {padding:10px 20px;width:160px;background:#000;color:#FFF;text-align: center;text-transform: uppercase}
.code-toggle:hover {cursor: pointer}
.code-modal {display:block;background:#262626;color: #FFF;font-size: 14px;line-height: 1.6;padding: 1px 40px 20px 40px;margin-bottom:10px;}
.code-modal:hover {cursor: pointer}

.templates {display:flex;flex-wrap: wrap;gap:20px}

.code-helpers {margin:0 10px}

.code {display:none;background:#262626;color: #FFF;font-size: 14px;line-height: 1.6;max-width: 1440px;padding: 1px 40px 20px 40px;margin: 100px auto 140px auto;position: relative;box-sizing: border-box}
.code::before {content: '';position: absolute;top: -40px;left: 30px;width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 40px solid #262626;transition: background-color 0.3s;}
.code.show {transition: background-color 0.3s;display:block}
.code:hover {cursor: pointer}
.modal-inner-box {max-width: 1200px}
.modal-inner-box .content {max-height: calc(100vh - 80px)}

.toggle-checkbox {display: none}
.dropdown-container {position: relative;display: inline-block}
.component-toggle {cursor: pointer;padding: 10px 20px;background: #000;color: #FFF;text-align: center;text-transform: uppercase;display: inline-block;width: 200px}
.popup-menu {display: none;position: absolute;top: 100%;left: 0;background-color: #000;color: #FFF;padding: 20px;margin-top: 1px;width: 340px;box-sizing: border-box;z-index: 1}
.popup-menu a {display:block;padding:5px 10px;color: #FFF;text-decoration: none;}
.popup-menu a:hover {background:#FFF;color: #000}
.toggle-checkbox:checked + .component-toggle + .popup-menu {display: block}

.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}
.slick-track:before,.slick-track:after{display:table;content:''}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;height:100%;min-height:1px}
[dir='rtl'] .slick-slide{float:right}
.slick-slide img{display:block}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}

.product-video {text-align: center;align-items: center}
.product-video .inner {box-shadow: 0 0 40px #DDD}
.product-video .product-details {padding:20px;justify-content: center;align-items: center}
.product-video .product-details .image {max-width:250px}    
.product-video .product-details .details {max-width:420px}   
.product-video .product-details h3{font-size:20px;line-height:1.2;margin:0;text-transform: uppercase}
.product-video .product-details p{font-size:16px;line-height:1.5;margin:10px 0 15px 0}
.product-video.background-2 .inner{box-shadow: none}

.learning .ebc-card .inner {box-sizing: border-box;background: #FFF;box-shadow: 0 20px 40px rgb(0, 0, 0, 0.1);text-align: center;padding: 40px 20px;border-radius: 6px}
.learning img {max-width:100px;height:100px; margin: 0 auto;padding-bottom: 25px;}
.learning h3 {font-size: 20px;line-height: 1.2;margin:0} 
.learning p {font-size: 16px;line-height: 1.6;margin:0}