@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@100;200;300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600&family=Oleo+Script:wght@400;700&family=Source+Sans+Pro&family=Inter&family=Courgette&family=Goldman&family=Roboto+Slab:wght@300;600&display=swap);:root{--primary-color:#2a73cc;--primary-color-hover:#215699;--primary-color-light:#e7eef9;--secondary-color:#153966;--light-color:#eff2fa;--light-color-hover:#f0f0f0;--dark-color:#333333;--shadow:0 0 5px 0 rgba(0, 0, 0, 0.1);--border-color:#e5e7eb;--border-radius:5px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--light-color);print-color-adjust:exact;-webkit-print-color-adjust:exact;font-family:Nunito,Inter,sans-serif;margin:0}body a{text-decoration:none;color:var(--primary-color)}.screen-reader-text{position:absolute;width:1px;height:1px;clip:rect(1px,1px,1px,1px);overflow:hidden;opacity:0;visibility:hidden}.main-content ol,.main-content ul{text-align:justify;margin-left:-10px;line-height:1.8}button,input,li,p,select{color:#212223;font-size:16px;font-weight:400}h1,h2,h3,h4,h5,h6{font-family:Poppins,Inter,sans-serif;font-weight:500;color:var(--dark-color);text-align:left}.page-title{margin:30px auto}.section{display:grid;grid-template-columns:22% 1fr 15%;grid-template-areas:'sidebar-left content sidebar-right' 'sidebar-left content-footer sidebar-right';grid-auto-rows:min-content;background-color:#fff}.main-content-home{display:flex;flex-direction:column;width:100%;position:relative;overflow:hidden}.main-content{width:100%;overflow:hidden;grid-area:content;z-index:100;position:relative;padding:30px;padding-top:0;height:fit-content;display:flex;flex-direction:column;gap:30px;border-left:1px solid rgb(0 0 0 / .05);border-right:1px solid rgb(0 0 0 / .05);box-shadow:-1px 0 5px -10px rgb(0 0 0 / .5),1px 0 5px -15px rgb(0 0 0 / .5)}article>ol,article>p,article>ul{text-align:justify}.main-content article>:last-child{margin-bottom:0}.content-footer{grid-area:content-footer;grid-column:2;position:relative;display:flex;flex-direction:column;gap:30px;padding:0;padding-bottom:30px;border-left:1px solid rgb(0 0 0 / .05);border-right:1px solid rgb(0 0 0 / .05);box-shadow:-1px 0 5px -15px rgb(0 0 0 / .5),1px 0 5px -15px rgb(0 0 0 / .5)}.main-content h1{font-size:36px;margin-top:0;margin-bottom:50px;font-weight:600}.main-content h2{font-size:34px;margin-top:50px;margin-bottom:20px;font-weight:500}.main-content h3{font-size:26px;margin-top:40px;margin-bottom:20px;font-weight:400}.main-content h4{font-size:22px;margin-top:30px;margin-bottom:20px;font-weight:400}.main-content h5{font-size:20px;margin-top:10px;margin-bottom:10px;font-weight:400}.main-content h6{font-size:20px;margin-top:10px;margin-bottom:10px;font-weight:400}.main-content p a,.main-content table a,.main-content ul li a{color:var(--primary-color);text-decoration:underline}.main-content p a:hover,.main-content table a:hover,.main-content ul li a:hover{color:var(--primary-color-hover)}.main-content a[target*="_blank"]:after{font-family:tutsinsider;content:'\e959';font-size:10px;padding-left:5px;text-decoration:none}.main-content>a[target*="_blank"]:after{border-bottom:1px solid}.main-content p{font-size:16px;line-height:1.8;text-align:justify}.main-content table{font-size:1rem;margin:30px auto;border:1px solid #999;width:100%;border-collapse:collapse}.main-content table caption{background:var(--light-color);color:#000;border:1px solid #ddd;text-align:center;padding:10px 0;text-transform:uppercase;font-weight:900;font-size:16px}.main-content table caption a{color:#3949ab}.main-content table thead{font-weight:900;line-height:30px;font-size:110%;background:var(--light-color);color:#333}.main-content table tbody tr:hover{background:#f7f7f4}.main-content table tr td,.main-content table tr th{padding:5px;padding-left:10px;padding-right:10px}.main-content table td,.main-content table th{border:1px solid #ddd}@media screen and (max-width:680px){.main-content-home{display:flex}.section{display:flex;flex-direction:column;align-items:center}.main-content{padding:15px;width:100%}.content-footer{width:100%;margin-bottom:0}.main-content h1{font-size:30px;margin-bottom:30px;line-height:1.5}.main-content h2{font-size:24px;margin-top:26px;margin-bottom:26px}.main-content h3{font-size:22px;margin-top:22px;margin-bottom:22px}.main-content h4{font-size:20px;margin-top:20px;margin-bottom:20px}.main-content h5{font-size:20px;margin-top:10px;margin-bottom:10px}.main-content h6{font-size:20px;margin-top:10px;margin-bottom:10px}}.sidebar-left{grid-area:sidebar-left}.sidebar-right{grid-area:sidebar-right;padding-left:30px}.section>input[type=checkbox]{display:none}.sidebar-left,.sidebar-right{padding-top:30px;background-color:var(--light-color)}.sidebar-left{position:sticky;top:40px;overflow-y:auto;max-height:calc(100vh - 40px)}body.tools-template-default .sidebar-left{top:0;max-height:100vh}@media (max-width:680px){.sidebar-left{position:relative;top:initial;overflow-y:initial;margin:auto;max-height:initial}body.tools-template-default .sidebar-left{top:0;max-height:100vh}}.sidebar-posts-list-outer{border-bottom:1px solid var(--border-color);margin-bottom:8px}.sidebar-posts-list-outer:nth-last-child(2){border-bottom:none}.sidebar-posts-list-outer input[type=checkbox]{display:none}.sidebar-posts-title{cursor:pointer;position:relative;margin:0}.sidebar-pagelist-title,.sidebar-posts-title label{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 30px;font-size:1rem;font-weight:600;color:var(--primary-color);cursor:pointer}.sidebar-posts-title label::after{content:'\e909';font-family:tutsinsider;color:var(--primary-color);transform:rotate(90deg);position:absolute;right:20px;font-size:16px;transition:transform .3s cubic-bezier(.25,.1,.25,1)}.sidebar-posts-list-inner{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.25,.1,.25,1)}.has-nested-posts{display:flex;justify-content:space-between;align-items:center;width:100%;cursor:pointer;position:relative}.has-nested-posts a{width:100%}.has-nested-posts::after{content:'\e905';font-family:tutsinsider;color:#ccc;position:absolute;right:20px;font-size:16px;transition:transform .3s cubic-bezier(.25,.1,.25,1)}.has-nested-posts+.sidebar-nested-posts{display:none}.sidebar-posts.active.has-nested-posts::after,.sidebar-posts.has-active-nested::after{content:'\e903'}.sidebar-nested-posts.is-active,.sidebar-posts.active.has-nested-posts+.sidebar-nested-posts{display:block}.sidebar-nested-posts{background:#fff;box-shadow:inset 0 3px 5px -5px #333,inset 0 -3px 5px -5px #333}.sidebar-left .sidebar-posts,.sidebar-right .sidebar-posts{display:block;padding:5px 30px;font-size:.95rem;line-height:26px;color:var(--dark-color);text-decoration:none;transition:background-color .2s ease,color .2s ease}.sidebar-posts.active::after,.sidebar-posts.has-active-nested,.sidebar-posts.has-active-nested::after{color:var(--primary-color)}.sidebar-posts:hover{background-color:var(--primary-color-light);color:var(--primary-color)}.sidebar-posts.active{background-color:var(--primary-color);color:var(--light-color)}.sidebar-posts-list-outer input[type=checkbox]:checked~.sidebar-posts-list-inner{max-height:1000px;padding-bottom:10px}.sidebar-posts-list-outer input[type=checkbox]:not(:checked)~.sidebar-posts-title label{color:#333}.sidebar-posts-list-outer input[type=checkbox]:not(:checked)~.sidebar-posts-title label::after{transform:rotate(0);color:#333}@media (max-width:680px){.sidebar-posts-title{margin:0}}.sidebar-right .sidebar-posts-list-outer{border-bottom:1px solid var(--border-color);padding-bottom:8px}.sidebar-right .sidebar-posts-list-outer:last-child{border-bottom:none}.sidebar-right .sidebar-posts-title label{padding:10px 0}.sidebar-posts-list-outer.page .sidebar-posts-title label:hover,.sidebar-right .sidebar-posts-title label:hover{cursor:default}.sidebar-posts-list-outer.page .sidebar-posts-title label::after,.sidebar-right label::after{content:''}.sidebar-right .sidebar-posts-list-inner a{padding:5px 0}.sidebar-right .sidebar-posts-list-inner a:hover{background:initial}.sidebar-posts-list-outer.page .sidebar-posts-list-inner,.sidebar-right .sidebar-posts-list-inner{max-height:1500px}.validation-checkbox-value{display:inline-flex;float:right;margin-top:10px;text-decoration:none;opacity:.3}.validation-passed{color:#0ac80a}.validation-failed{color:#ef0e0e}.sidebar-left-ad-unit{margin:24px 16px;text-align:center}.footer{background-color:var(--secondary-color);color:#cdd3d8;padding:60px 5% 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-template-rows:auto auto auto;gap:40px;position:relative;border-top:5px solid var(--primary-color);overflow:hidden}.footer::before{content:'';position:absolute;top:-50px;left:-50px;width:250px;height:250px;background-color:rgb(255 255 255 / .05);border-radius:50%;transform:rotate(45deg);pointer-events:none}.footer::after{content:'';position:absolute;bottom:-70px;right:-70px;width:150px;height:150px;background-color:rgb(255 255 255 / .03);border-radius:50%;transform:rotate(-30deg);pointer-events:none}.footer-menu,.footer-subscribe,.footer-title-section{display:flex;flex-direction:column;gap:20px}.footer-title-section{grid-row:1;grid-column:1/-1;margin:auto}.footer-title{font-size:3rem;font-weight:700;font-family:Goldman,cursive;color:var(--light-color);text-decoration:none;display:inline-flex;align-items:center;gap:12px;transition:color .3s ease}.footer-logo-icon{font-size:1.2em;color:var(--light-color)!important;transition:color .3s ease}.footer-title:hover,.footer-title:hover i{color:var(--primary-color)!important}.footer-menu{grid-row:2;display:flex;flex-direction:row;gap:60px;grid-column:span 2}.footer-menu nav{flex:1}.footer-menu nav::before{content:attr(data-title);font-size:18px;font-weight:600;color:var(--light-color);margin-bottom:15px;display:block}.footer-menu ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.footer-menu .menu-item a{color:#cdd3d8;text-decoration:none;font-size:15px;transition:color .3s ease,padding-left .3s ease;position:relative}.footer-menu .menu-item a:hover{color:var(--light-color);padding-left:8px}.footer-menu .menu-item a::before{content:'\e905';font-family:tutsinsider;position:absolute;left:-5px;opacity:0;transition:opacity .3s ease,left .3s ease;color:var(--primary-color)}.footer-menu .menu-item a:hover::before{opacity:1;left:-2px}.footer-subscribe{grid-row:2;position:relative}.footer-subscribe-form{display:flex;flex-direction:column;gap:15px}.footer-subscribe::before{content:'Stay Updated';font-size:18px;font-weight:600;color:var(--light-color);display:block}.footer-subscribe-form input[type=email]{width:100%;padding:12px 15px;border-radius:8px;border:1px solid #3a5f94;background:#a8a8a8;color:#333;font-family:Poppins,sans-serif;font-size:14px;transition:border-color .3s ease,box-shadow .3s ease,background .3s ease}.footer-subscribe-form input[type=email]:focus,.footer-subscribe-form input[type=email]:not(:placeholder-shown){outline:0;border-color:var(--primary-color);background:var(--light-color);box-shadow:0 0 0 3px rgb(42 115 204 / .3)}.footer-subscribe-form input[type=email]::placeholder{color:#575757}.footer-subscribe-form button[type=submit]{padding:12px 20px;border-radius:8px;border:none;background-color:var(--primary-color);color:var(--light-color);font-size:16px;cursor:pointer;transition:background-color .3s ease,transform .2s ease}.footer-subscribe-form button[type=submit]:hover{background-color:var(--primary-color-hover);transform:translateY(-2px)}.grecaptcha-badge{z-index:9999!important}.subscriber-message{font-size:1rem;font-weight:600}.subscriber-message.success{color:#0ac80a}.subscriber-message.error{color:#ff6161}.subscriber-message.hidden{display:none}.subscriber-loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border:5px solid #fff;border-bottom-color:#fff0;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}.subscriber-loader.hidden{display:none}@keyframes rotation{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}.footer-bottom{grid-row:3;grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding-top:30px;margin-top:30px;border-top:1px solid #3a5f94;flex-wrap:wrap;gap:20px}.copyright-text,.powerd-by,.powerd-by a{font-size:14px;color:#aab1b8}.powerd-by a{text-decoration:none;font-weight:500;color:#cdd3d8;transition:color .3s ease}.powerd-by a:hover{color:var(--primary-color)}.social-footer .menu{list-style:none;padding:0;margin:0;display:flex;gap:8px}.social-footer .menu-item a{display:inline-flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:50%;background-color:#1f4a80;color:#cdd3d8;font-size:16px;text-decoration:none;transition:background-color .3s ease,color .3s ease,transform .3s ease}.social-footer .menu-item a:hover{background-color:var(--primary-color);color:var(--light-color);transform:translateY(-3px)}.top-btn{position:fixed;bottom:20px;right:20px;z-index:999;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease,transform .4s ease;transform:translateY(20px)}.top-btn.show{opacity:1;visibility:visible;transform:translateY(0)}#top-btn{display:flex;align-items:center;justify-content:center;width:45px;height:45px;background-color:var(--primary-color);color:var(--light-color);border-radius:8px;text-decoration:none;font-size:20px;box-shadow:0 4px 12px rgb(0 0 0 / .2);transition:background-color .3s ease,transform .3s ease}#top-btn:hover{background-color:var(--primary-color-hover);transform:scale(1.1)}.screen-reader-text{display:none}@media (max-width:680px){.footer{display:flex;flex-direction:column;padding:40px 5%;text-align:center}.footer-title{justify-content:center}.footer-menu{flex-direction:column;gap:30px;align-items:center}.footer-menu nav{width:100%;text-align:center}.footer-menu .menu-item a:hover{padding-left:0}.footer-menu .menu-item a::before{display:none}.footer-subscribe{padding:50px 10px 50px 10px;background-color:#00000025;border-radius:15px}.footer-subscribe-form{position:relative;max-width:100%}.footer-subscribe-form input[type=email]{padding-right:60px;border-radius:50px;height:50px;box-sizing:border-box}.footer-subscribe-form button[type=submit]{position:absolute;right:0;top:50%;transform:translateY(-50%);width:auto;height:50px;border-top-right-radius:50px;border-bottom-right-radius:50px;padding:0 10px;display:flex;align-items:center;justify-content:center;font-size:18px}.footer-bottom{flex-direction:column;justify-content:center;gap:15px;border-top:none;margin-top:0;padding-top:10px}.footer-copyright{text-align:center}.social-footer .menu{justify-content:center}}iframe{border:none}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}kbd{background:var(--light-color);color:crimson;padding-left:4px;padding-right:4px;border-radius:2px}.bg-pattern{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAATklEQVQoU2NkYGAwZmBgOMuAACA+CKCIMSIpADGRNaEYgKwQ3WQUjTCF6CYhWw2WAynEpgjmIpg7jUlSiM0TWK2GWUOUZ7ApxggeogIcABHJFtftKVfJAAAAAElFTkSuQmCC) repeat}.highlight-green{background:#e9fde6;padding:1px 5px;border-left:5px solid #1e6014;border-right:5px solid #1e6014;border-radius:3px;display:inline-block}.highlight-blue{background:#d4f0fd;padding:1px 5px;border-left:5px solid #29b6f6;border-right:5px solid #29b6f6;border-radius:3px;display:inline-block}.highlight-red{background:#fde6e6;padding:1px 5px;border-left:5px solid #d92d2d;border-right:5px solid #d92d2d;border-radius:3px;display:inline-block}.code,.tidbit-blue,.tidbit-green,.tidbit-red{box-sizing:border-box;padding:10px;border-left:5px solid #000;margin:50px auto;border-radius:var(--border-radius);-webkit-box-shadow:0 0 5px 0 rgb(0 0 0 / .15);-moz-box-shadow:0 0 5px 0 rgb(0 0 0 / .15);box-shadow:0 0 5px 0 rgb(0 0 0 / .15)}.code .code-body,.tidbit-body-blue,.tidbit-body-green,.tidbit-body-red{padding:10px;text-wrap:wrap}.code h3.code-heading,.main-content h3.tidbit-heading-blue,.main-content h3.tidbit-heading-green,.main-content h3.tidbit-heading-red{position:relative;padding:0 20px;display:inline-block;width:auto;font-size:30px;margin:10px 0 10px -16px;line-height:2;border-radius:0 5px 5px 0;box-shadow:-1px 2px 3px rgb(0 0 0 / .5);font-family:'Source Sans Pro',sans-serif;font-weight:500}.code h3.code-heading::after,.code h3.code-heading::before,.tidbit-heading-blue::after,.tidbit-heading-blue::before,.tidbit-heading-green::after,.tidbit-heading-green::before,.tidbit-heading-red::after,.tidbit-heading-red::before{position:absolute;content:'';display:block}.code h3.code-heading::before,.tidbit-heading-blue::before,.tidbit-heading-green::before,.tidbit-heading-red::before{width:16px;height:100%;padding:0 0 10px;top:0;left:-15px;background:inherit;border-radius:5px 0 0 5px}.code h3.code-heading::after,.tidbit-heading-blue::after,.tidbit-heading-green::after,.tidbit-heading-red::after{width:11px;height:6px;background:rgb(0 0 0 / .5);bottom:-6px;left:-10px;border-radius:5px 0 0 5px;box-shadow:inset -1px 2px 2px rgb(0 0 0 / .3)}.tidbit-green{background:#e9fde6;color:#333}.tidbit-heading-green{background:#1e6014;color:#e9fde6}.tidbit-blue{background:#d4f0fd;color:#333}.tidbit-heading-blue{background:#29b6f6;color:#333}.tidbit-red{background:#fde6e6;color:#333}.tidbit-heading-red{background:#d92d2d;color:#fde6e6}.code-example{display:block;width:100%;overflow:hidden;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:10px;margin:50px auto}.code-example .code-file-name{padding:5px 0;margin:0 20px;color:#212529;border-radius:0;display:block;font-size:.85rem;font-weight:600;letter-spacing:.5px;box-shadow:none;transition:background .3s ease;border-bottom:1px solid #dee2e6}.code-example .code-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--light-color);border-bottom:1px solid #dee2e6;box-shadow:inset 0 -1px 0 rgb(0 0 0 / .05)}.code-example .code-header-heading{display:flex;align-items:center;gap:10px}.code-example .header-icon{display:flex;align-items:center;justify-content:center}.code-example h3.code-heading{font-size:1.1rem;margin:0;padding:0;font-weight:700;color:#153966;letter-spacing:.2px}.code-example .code-header-controls{display:flex;align-items:center;gap:8px}.code-example .code-toggle-group{display:flex;border-radius:50px;overflow:hidden;border:1px solid #ccc}.code-example .cc-button{display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:.875rem;font-weight:600;background-color:#fff;color:#495057;cursor:pointer;transition:all .25s ease;border:none;outline:0;text-decoration:none;white-space:nowrap}.code-example .code-toggle{border:1px solid #dee2e6;transition:all .3s ease}.code-example .code-toggle:last-child{border-right:none}.code-example .code-toggle i{max-width:0;height:16px;opacity:0;overflow:hidden;transition:all .3s ease;color:var(--light-color)}.code-example .code-toggle.active i{max-width:16px;opacity:1}.code-example .code-copy{border-radius:50px;border:1px solid #ccc;transition:all .3s ease}.code-example .cc-button.active,.code-example .cc-button.copying,.code-example .cc-button:not(.active):hover{background-color:var(--primary-color);color:var(--light-color);border-color:var(--primary-color)}.code-example a.tryit-btn{background-image:linear-gradient(to right,#2a73cc 0,#153966 100%);color:#fff;text-decoration:none;border-radius:50px;transition:all .3s ease-in-out;padding:6px 15px}.code-example a.tryit-btn:active,.code-example a.tryit-btn:focus,.code-example a.tryit-btn:hover{color:#fff!important;background-image:linear-gradient(to right,#2a73cc 0,#0d233f 100%)!important}.code-example .code-body{margin:15px;padding:10px;font-size:14px;color:#212529;overflow:auto;tab-size:2;-moz-tab-size:2;-o-tab-size:2;white-space:pre;word-wrap:normal;word-break:normal;line-height:23px;background:#fff;border-radius:8px;box-shadow:inset 0 0 5px 0 rgb(0 0 0 / .3)}.code-example .code-output{margin:15px;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:inset 0 0 5px 0 rgb(0 0 0 / .3)}.code-example .code-body{scrollbar-width:thin;scrollbar-color:var(--secondary-color) var(--light-color)}.code-example .code-body::-webkit-scrollbar{height:10px;width:10px}.code-example .code-body::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.code-example .code-body::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.code-example .code-body::-webkit-scrollbar-thumb:hover{background:#555}.code-example>p{padding:0 15px}@media (max-width:680px){.code-example{margin:30px auto}.code-example .code-file-name{padding:5px 0;margin:0 10px}.code-example .code-header{padding:10px;gap:10px}.code-example h3.code-heading{font-size:1rem}.code-example .cc-button,.code-example a.tryit-btn{padding:5px 10px;font-size:.8rem}.code-example .code-body,.code-example .code-output{margin:10px}}@media (max-width:380px){.code-example{margin:30px auto}.code-example .code-file-name{padding:5px 0;margin:0 10px}.code-example .code-header{padding:10px;gap:10px;flex-direction:column;align-items:flex-start}.code-example h3.code-heading{font-size:1rem}.code-example .cc-button,.code-example a.tryit-btn{padding:5px 10px;font-size:.8rem}.code-example .code-body,.code-example .code-output{margin:10px}}a.reference-link{background:var(--light-color);display:block;padding:5px;border-radius:4px;color:#000;text-align:center;max-width:400px;margin:10px auto;-webkit-box-shadow:0 0 5px 0 rgb(0 0 0 / .5);-moz-box-shadow:0 0 5px 0 rgb(0 0 0 / .5);box-shadow:0 0 5px 0 rgb(0 0 0 / .5)}a.reference-link:active,a.reference-link:focus,a.reference-link:hover{background:#e9eaf8}@media screen and (max-width:680px){.single-tutorial .tutorial-btn{font-size:14px;margin-top:10px;margin-bottom:5px;margin-left:-5px}.tidbit-blue,.tidbit-green,.tidbit-red{margin:20px auto}.tidbit-body-blue,.tidbit-body-green,.tidbit-body-red{padding:10px;margin:5px}.main-content h3.tidbit-heading-blue,.main-content h3.tidbit-heading-green,.main-content h3.tidbit-heading-red{font-size:20px;margin-top:0}}.code{box-sizing:border-box;padding:10px;margin:50px auto;width:100%;border-radius:var(--border-radius);background:var(--light-color);border-left:5px solid var(--primary-color);-webkit-box-shadow:0 0 5px 0 rgb(0 0 0 / .15);-moz-box-shadow:0 0 5px 0 rgb(0 0 0 / .15);box-shadow:0 0 5px 0 rgb(0 0 0 / .15)}.code .code p{margin:0 10px}.code .code-heading{background:var(--primary-color);color:#fff}.code .code-file-name{padding:0 10px;margin:10px;margin-bottom:-10px;background:#999;color:#fff}.code .code-file-name:hover{background:#aaa}.code .code-body{padding:0 10px;tab-size:2;text-align:left;-moz-tab-size:2;-o-tab-size:2;display:block;overflow-x:auto;overflow-y:auto;text-wrap:wrap;margin:10px;font-size:14px;border-radius:2px;line-height:1.9;background-image:repeating-linear-gradient(#f8f8f8 0 27px,#fdfdfd 27px 53px);-webkit-box-shadow:inset 0 0 3px 0 rgb(0 0 0 / .5);-moz-box-shadow:inset 0 0 3px 0 rgb(0 0 0 / .5);box-shadow:inset 0 0 3px 0 rgb(0 0 0 / .5)}.code .tryit-btn{display:inline-block;padding:5px 10px;margin:5px 0 0 10px;background:var(--primary-color);color:#fff;font-size:16px;font-weight:500;text-decoration:none;text-transform:uppercase;border-radius:var(--border-radius);transition:all .3s ease-in-out}.code .tryit-btn:active,.code .tryit-btn:focus,.code .tryit-btn:hover{color:#fff;-webkit-box-shadow:0 0 0 5px var(--primary-color-light);-moz-box-shadow:0 0 0 5px var(--primary-color-light);box-shadow:0 0 0 5px var(--primary-color-light);transition:all .3s ease-in-out}.code h3.code-output-heading{background:var(--light-color);color:#000;border-top-left-radius:5px;border-top-right-radius:5px;margin-bottom:0}.code .code-output,.code h3.code-output-heading{padding:10px;-webkit-box-shadow:inset 0 0 3px 0 rgb(0 0 0 / .5);-moz-box-shadow:inset 0 0 3px 0 rgb(0 0 0 / .5);box-shadow:inset 0 0 3px 0 rgb(0 0 0 / .5)}.code .code-output{margin:10px;background:#fff;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.code a.reference-link{background:var(--light-color);display:block;padding:5px;border-radius:4px;color:#000;text-align:center;max-width:400px;margin:10px auto;-webkit-box-shadow:0 0 5px 0 rgb(0 0 0 / .5);-moz-box-shadow:0 0 5px 0 rgb(0 0 0 / .5);box-shadow:0 0 5px 0 rgb(0 0 0 / .5)}.code a.reference-link:active,.code a.reference-link:focus,.code a.reference-link:hover{background:#e9eaf8}@media screen and (max-width:680px){.code .code-body{tab-size:1;-moz-tab-size:1;-o-tab-size:1}.code .code .tryit-btn,.code .single-tutorial .tutorial-btn{font-size:14px;margin-top:10px;margin-bottom:5px;margin-left:-5px}.code .code-output,.code h3.code-output-heading{font-size:20px}.code .code,.code .tidbit-blue,.code .tidbit-green,.code .tidbit-red{margin:20px auto}.code .code-body,.code .tidbit-body-blue,.code .tidbit-body-green,.code .tidbit-body-red{padding:10px;margin:5px}.code .main-content h3.code-heading,.code .main-content h3.tidbit-heading-blue,.code .main-content h3.tidbit-heading-green,.code .main-content h3.tidbit-heading-red{font-size:20px;margin-top:0}.code .code-output{margin:5px}.code .code-file-name{margin:5px 5px -5px 5px}}.code-wrapper .hidden{display:none}.tabs-wrapper{display:flex;margin:0 10px;border-bottom:1px solid #ddd;width:max-content}.code-tab{padding:0 20px;cursor:pointer;border:1px solid #fff0;border-bottom:none;margin-bottom:-1px}.code-tab.active{border-color:#ddd;border-bottom-color:#fff;background-color:#fff;color:var(--primary-color);font-weight:600}.code-tab:not(.active):hover{background-color:#f5f5f5}.single-tab{cursor:pointer;padding:0;margin:0 25px;display:inline-block;position:relative}.single-tab:first-child{margin-left:0}.single-tab:last-child{margin-right:0}.single-tab:before{font-family:tutsinsider;position:absolute;content:'\e935';margin-left:-30px;font-weight:900;color:#000}.single-tab:first-child:before{content:'';margin-left:-30px}.code .radio{display:none}.example-wrapper1 .tab1-content,.example-wrapper1 .tab2-content,.example-wrapper1 .tab3-content,.example-wrapper10 .tab1-content,.example-wrapper10 .tab2-content,.example-wrapper10 .tab3-content,.example-wrapper2 .tab1-content,.example-wrapper2 .tab2-content,.example-wrapper2 .tab3-content,.example-wrapper3 .tab1-content,.example-wrapper3 .tab2-content,.example-wrapper3 .tab3-content,.example-wrapper4 .tab1-content,.example-wrapper4 .tab2-content,.example-wrapper4 .tab3-content,.example-wrapper5 .tab1-content,.example-wrapper5 .tab2-content,.example-wrapper5 .tab3-content,.example-wrapper6 .tab1-content,.example-wrapper6 .tab2-content,.example-wrapper6 .tab3-content,.example-wrapper7 .tab1-content,.example-wrapper7 .tab2-content,.example-wrapper7 .tab3-content,.example-wrapper8 .tab1-content,.example-wrapper8 .tab2-content,.example-wrapper8 .tab3-content,.example-wrapper9 .tab1-content,.example-wrapper9 .tab2-content,.example-wrapper9 .tab3-content{display:none;opacity:0;animation:sass-fade .5s ease-in-out}@keyframes sass-fade{0%{opacity:0}100%{opacity:1}}#tab1-input10:checked~.code-wrapper10 .tab1-content,#tab1-input1:checked~.code-wrapper1 .tab1-content,#tab1-input2:checked~.code-wrapper2 .tab1-content,#tab1-input3:checked~.code-wrapper3 .tab1-content,#tab1-input4:checked~.code-wrapper4 .tab1-content,#tab1-input5:checked~.code-wrapper5 .tab1-content,#tab1-input6:checked~.code-wrapper6 .tab1-content,#tab1-input7:checked~.code-wrapper7 .tab1-content,#tab1-input8:checked~.code-wrapper8 .tab1-content,#tab1-input9:checked~.code-wrapper9 .tab1-content,#tab2-input10:checked~.code-wrapper10 .tab2-content,#tab2-input1:checked~.code-wrapper1 .tab2-content,#tab2-input2:checked~.code-wrapper2 .tab2-content,#tab2-input3:checked~.code-wrapper3 .tab2-content,#tab2-input4:checked~.code-wrapper4 .tab2-content,#tab2-input5:checked~.code-wrapper5 .tab2-content,#tab2-input6:checked~.code-wrapper6 .tab2-content,#tab2-input7:checked~.code-wrapper7 .tab2-content,#tab2-input8:checked~.code-wrapper8 .tab2-content,#tab2-input9:checked~.code-wrapper9 .tab2-content,#tab3-input10:checked~.code-wrapper10 .tab3-content,#tab3-input1:checked~.code-wrapper1 .tab3-content,#tab3-input2:checked~.code-wrapper2 .tab3-content,#tab3-input3:checked~.code-wrapper3 .tab3-content,#tab3-input4:checked~.code-wrapper4 .tab3-content,#tab3-input5:checked~.code-wrapper5 .tab3-content,#tab3-input6:checked~.code-wrapper6 .tab3-content,#tab3-input7:checked~.code-wrapper7 .tab3-content,#tab3-input8:checked~.code-wrapper8 .tab3-content,#tab3-input9:checked~.code-wrapper9 .tab3-content{display:block;opacity:1}#tab1-input10:checked~.tabs-wrapper .first-tab,#tab1-input1:checked~.tabs-wrapper .first-tab,#tab1-input2:checked~.tabs-wrapper .first-tab,#tab1-input3:checked~.tabs-wrapper .first-tab,#tab1-input4:checked~.tabs-wrapper .first-tab,#tab1-input5:checked~.tabs-wrapper .first-tab,#tab1-input6:checked~.tabs-wrapper .first-tab,#tab1-input7:checked~.tabs-wrapper .first-tab,#tab1-input8:checked~.tabs-wrapper .first-tab,#tab1-input9:checked~.tabs-wrapper .first-tab,#tab2-input10:checked~.tabs-wrapper .second-tab,#tab2-input1:checked~.tabs-wrapper .second-tab,#tab2-input2:checked~.tabs-wrapper .second-tab,#tab2-input3:checked~.tabs-wrapper .second-tab,#tab2-input4:checked~.tabs-wrapper .second-tab,#tab2-input5:checked~.tabs-wrapper .second-tab,#tab2-input6:checked~.tabs-wrapper .second-tab,#tab2-input7:checked~.tabs-wrapper .second-tab,#tab2-input8:checked~.tabs-wrapper .second-tab,#tab2-input9:checked~.tabs-wrapper .second-tab,#tab3-input10:checked~.tabs-wrapper .third-tab,#tab3-input1:checked~.tabs-wrapper .third-tab,#tab3-input2:checked~.tabs-wrapper .third-tab,#tab3-input3:checked~.tabs-wrapper .third-tab,#tab3-input4:checked~.tabs-wrapper .third-tab,#tab3-input5:checked~.tabs-wrapper .third-tab,#tab3-input6:checked~.tabs-wrapper .third-tab,#tab3-input7:checked~.tabs-wrapper .third-tab,#tab3-input8:checked~.tabs-wrapper .third-tab,#tab3-input9:checked~.tabs-wrapper .third-tab{color:var(--primary-color);font-weight:900}@media screen and (max-width:680px){.tabs-wrapper{font-size:12px;margin:0 5px}.code-tab{padding:0 10px}}.header-ad-unit{display:block}.article-ad-unit-1,.article-ad-unit-2,.article-ad-unit-3,.article-ending-ad-unit{display:block;width:90%;margin:0 auto}.article-ad-unit-1>.adsbygoogle,.article-ad-unit-2>.adsbygoogle,.article-ad-unit-3>.adsbygoogle,.article-ending-ad-unit>.adsbygoogle{display:block;margin:0 auto}.sidebar-left-ad-unit{display:block;width:95%;margin:0 auto}.sidebar-left-ad-unit>.adsbygoogle{display:block;margin:0 auto}.sidebar-right-ad-unit{display:block;width:95%;margin:0 auto}.sidebar-right-ad-unit>.adsbygoogle{display:block;margin:0 auto}.footer-ad-unit{display:block;width:90%;margin:0 auto}.footer-ad-unit>.adsbygoogle{display:block;margin:0 auto}.random-tools-wrapper.hidden{display:none}.random-tools-wrapper{display:flex;flex-direction:column;align-items:center;background:linear-gradient(to bottom right,var(--primary-color),var(--secondary-color));padding:2rem;width:100%;color:#fff;text-align:center;transition:all .3s ease-in-out;position:relative}.random-tools-wrapper::after{font-family:tutsinsider;font-weight:900;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;opacity:.2}.random-tools-wrapper:not(.last)::after{content:"\e913";font-size:15rem}.random-tools-wrapper.last::after{content:"\e96b";font-size:20rem}.random-tools-wrapper.last{background:linear-gradient(to bottom right,#e4e4e4,#e7e7e7);margin-bottom:0}.random-tools-wrapper::before{content:'';position:absolute;top:0;left:0;width:150px;height:100%;background-image:radial-gradient(#fff 2px,transparent 2px);background-size:10px 10px;opacity:.2;pointer-events:none;z-index:1}.random-tools-wrapper.last h3{color:#333}.random-tools-wrapper h3{font-size:2rem;font-weight:800;margin-bottom:3rem;line-height:1.25;color:#fff;text-align:center}.random-tools-wrapper h3 span{font-size:80%;color:#fff;background-color:#ff3737;padding:.2em .4em;border-radius:.2em;font-weight:600;box-shadow:0 0 10px rgb(255 55 55 / .5)}.random-tools-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;width:80%;z-index:2}.random-tools-container a{display:inline-flex;align-items:center;justify-content:center;gap:5px;background-color:#fff;font-weight:600;padding:.75rem 1.5rem;border-radius:9999px;box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);transition:all .3s ease-in-out;transform:translateY(0) scale(1);outline:0;position:relative;min-width:160px;font-size:1rem;text-decoration:none}.random-tools-container a:hover{transform:translateY(-4px) scale(1.05)}.random-tools-container a{color:var(--tool-color,var(--primary-color))!important}.random-tools-container a:hover{background-color:#f0f4ff!important;color:var(--tool-color,var(--primary-color))!important}.random-tools-container a:focus::after{content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border-radius:9999px;box-shadow:0 0 0 4px #b3d4ff!important}@supports (background-color:color-mix(in srgb,#000,white)){.random-tools-container a:hover{background-color:color-mix(in srgb,var(--tool-color,var(--primary-color)),#fff 80%)!important}.random-tools-container a:focus::after{box-shadow:0 0 0 4px color-mix(in srgb,var(--tool-color,var(--primary-color)),#fff 50%)!important}}@media (max-width:680px){.random-tools-wrapper{padding:1rem;margin:0}.random-tools-wrapper::after,.random-tools-wrapper:not(.last)::after{font-size:10rem}.random-tools-wrapper.last::after{font-size:15rem}.random-tools-wrapper::before{width:100px;background-size:8px 8px}.random-tools-wrapper h3{font-size:1.75rem;margin-bottom:2rem}.random-tools-wrapper h3 span{font-size:75%;padding:.15em .3em}.random-tools-container{width:90%;gap:.75rem}.random-tools-container a{padding:.6rem 1.2rem;min-width:unset;font-size:.9rem}}[data-tooltip-bottom],[data-tooltip-top]{position:relative;cursor:pointer}[data-tooltip-bottom]::before,[data-tooltip-top]::before{content:attr(data-tooltip-top);position:absolute;background-color:#333;color:#fff;padding:0 10px;height:30px;line-height:30px;border-radius:4px;font-size:13px;white-space:nowrap;z-index:10;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;pointer-events:none;left:50%;transform:translateX(-50%)}[data-tooltip-bottom]::after,[data-tooltip-top]::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-style:solid;z-index:10;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;pointer-events:none}[data-tooltip-top]::before{bottom:125%}[data-tooltip-top]::after{bottom:calc(125% - 5px);border-width:5px 5px 0 5px;border-color:#333 #fff0 #fff0 #fff0}[data-tooltip-bottom]::before{top:125%;content:attr(data-tooltip-bottom)}[data-tooltip-bottom]::after{top:calc(125% - 5px);border-width:0 5px 5px 5px;border-color:#fff0 #fff0 #333 #fff0}[data-tooltip-bottom]:hover::after,[data-tooltip-bottom]:hover::before,[data-tooltip-top]:hover::after,[data-tooltip-top]:hover::before{opacity:1;visibility:visible}@media screen and (max-width:690px){::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background-color:#fff;box-shadow:inset 0 0 5px 0 #a8a5a5}::-webkit-scrollbar-thumb{background-color:#333;border-radius:4px}::-webkit-scrollbar-thumb:hover{background-color:var(--primary-color)}}input[type=search]::-webkit-search-cancel-button{display:none}input::-webkit-clear-button,input::-webkit-search-cancel-button{display:none}input::-ms-clear,input::-ms-reveal{display:none}.related-posts-container{padding:0 30px;overflow:hidden;position:relative;border-top:1px solid var(--border-color)}h2.related-posts-heading{font-size:1.5rem;font-weight:700;color:#111827;padding:20px 0;margin:0;border-bottom:1px solid var(--border-color);display:flex;align-items:center;position:relative}.related-posts-heading i,.related-posts-icon{display:inline-flex;justify-content:center;align-items:center;max-width:40px;width:100%;height:40px;background-color:var(--light-color);border:1px solid #fff0;color:var(--color);border-radius:30px;margin-right:16px;font-size:1.2rem;transition:all .3s ease}.related-posts-heading i{background-color:var(--primary-color);color:var(--light-color)}.related-posts{list-style:none;padding:0;margin:0}.related-posts-item a.related-posts-link{display:flex;align-items:center;padding:10px 0;text-decoration:none;color:#374151;font-weight:500;transition:background-color .2s ease,color .2s ease;border-bottom:1px solid #f9f9f9}.related-posts-item:last-child a.related-posts-link{border-bottom:none}.related-posts-item a.related-posts-link:hover{color:var(--color,var(--primary-color))}.related-posts-item a.related-posts-link:hover .related-posts-icon{border:1px solid var(--color,var(--primary-color))}.related-posts-container.tools .related-posts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem 0 .2rem 0}@media (max-width:680px){.related-posts-container.tools .related-posts{grid-template-columns:1fr}}.related-posts-container.tools .related-posts-item a{position:relative;display:flex;flex-direction:column;gap:.5rem;border:none;background:var(--light-color);border-radius:4px;box-shadow:0 0 3px 0 rgb(0 0 0 / .5);transition:all .3s ease-in-out;overflow:hidden}.related-posts-container.tools .related-posts-item a::after{content:'';width:50px;height:1px;background:var(--primary-color);position:absolute;bottom:0;left:-50px;transition:all 1s ease}.related-posts-container.tools .related-posts-item a:hover::after{left:calc(100% + 50px)}.related-posts-container.tools .related-posts-item a:hover{background:#f8f9fa;color:#333}.related-posts-container.tools a.related-posts-link:hover .related-posts-icon{border:none}.related-posts-container.tools .related-posts-item .related-posts-icon{font-size:2rem;max-width:50px;background:0 0;border:none;height:50px;border-radius:50px;line-height:50px;text-align:center}@media (max-width:680px){.related-posts-container{margin:0;border-radius:0;box-shadow:none;padding:0 15px}h2.related-posts-heading{font-size:1.2rem;padding:10px 0}.related-posts-heading i,.related-posts-icon{display:inline-flex;justify-content:center;align-items:center;max-width:40px;width:100%;height:40px;background-color:var(--light-color);border:1px solid #fff0;box-shadow:inset 0 0 5px #eee;color:var(--color);border-radius:20px;margin-right:16px;font-size:1.2rem;transition:all .3s ease}.related-posts-heading i{background-color:var(--primary-color);color:var(--light-color)}.related-posts{list-style:none;padding:0;margin:0}.related-posts-item a.related-posts-link{display:flex;align-items:center;padding:10px 0;text-decoration:none;color:#374151;font-weight:500;transition:background-color .2s ease,color .2s ease;border-bottom:1px solid var(--border-color)}}mark.blue,mark.dark,mark.green,mark.red{padding:0 .4em;border-radius:4px;font-weight:600}mark.blue{background-color:#cce5ff;color:#004085}mark.green{background-color:#d4edda;color:#155724}mark.red{background-color:#f8d7da;color:#721c24}mark.dark{background-color:#343a40;color:#f8f9fa}.toc-wrapper{display:flex;justify-content:center;position:relative;margin:0 auto}.toc-tooltip{display:block;position:fixed;top:calc(-100% - 20px);padding:3px 20px;background:var(--light-color);border:2px solid #ccc;border-radius:20px;box-shadow:var(--shadow);cursor:pointer;z-index:100;width:max-content;transition:background .3s,opacity .3s,top .3s ease}.tools-template-default .toc-tooltip{padding:8px 20px}.toc-tooltip::after{content:'\e907';font-family:tutsinsider;margin-left:10px;display:inline-block;transition:transform .2s ease-in-out}.toc-wrapper.visible .toc-tooltip::after{transform:rotate(180deg)}.toc-tooltip.active{top:45px}.tools-template-default .toc-tooltip.active{top:5px}@media (max-width:680px){.toc-tooltip.active{top:35px}.tools-template-default .toc-tooltip.active{top:5px}}.toc-tooltip:hover{background:var(--light-color-hover)}.toc-tooltip-dropdown{position:fixed;top:70px;margin-left:0!important;background:#fff;border:2px solid var(--border-color);border-radius:12px;box-shadow:0 4px 6px rgb(0 0 0 / .1);list-style:none;padding:0;max-height:0;overflow-y:hidden;opacity:0;transition:max-height .4s ease,opacity .4s ease;z-index:999}.tools-template-default .toc-tooltip-dropdown{top:35px}.toc-tooltip-dropdown{scrollbar-width:thin;scrollbar-color:#333 #fff}.toc-tooltip-dropdown::-webkit-scrollbar{width:8px}.toc-tooltip-dropdown::-webkit-scrollbar-track{background-color:#fff;box-shadow:inset 0 0 5px 0 #a8a5a5;border-radius:20px}.toc-tooltip-dropdown::-webkit-scrollbar-thumb{background-color:#333;border-radius:4px}.toc-tooltip-dropdown::-webkit-scrollbar-thumb:hover{background-color:var(--primary-color)}@supports (not selector(::-webkit-scrollbar)){.toc-tooltip-dropdown{scrollbar-color:#333 #fff}.toc-tooltip-dropdown:hover{scrollbar-color:var(--primary-color) #fff}}.toc-tooltip-dropdown>li{list-style:decimal inside;margin:0;padding:0;font-weight:600}.toc-tooltip-dropdown ol{list-style:none;margin:0;padding:0}.toc-tooltip-dropdown ol li{margin:0;position:relative;font-size:95%;line-height:20px;cursor:pointer;padding:8px 50px;color:#555;transition:all .3s ease}.toc-tooltip-dropdown ol li::before{position:absolute;left:20px;width:20px;content:attr(data-prefix)}.toc-tooltip-dropdown li{cursor:pointer;padding:8px 10px;border-bottom:1px solid #f4f4f4;transition:all .3s ease}.toc-tooltip-dropdown li.active,.toc-tooltip-dropdown li:hover,.toc-tooltip-dropdown ol li.active,.toc-tooltip-dropdown ol li:hover{background:var(--primary-color-light);color:var(--primary-color)}