.coding{margin:20px 0}.coding__title{font-size:16px;padding:0 0 10px 0;margin:0;font-weight:700}.coding__subtitle{font-size:14px;padding:5px 10px;background-color:#dbeaf7;font-weight:700}.coding__subtitle:first-of-type{border-top-left-radius:5px;border-top-right-radius:5px}.coding__subtitle span{font-weight:300}.coding__content{background-color:#faf9f9;font-size:14px;padding:10px;list-style:none;margin:0;font-weight:300;position:relative}.coding__content:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.coding__bytes>li{position:relative;padding:0 0 0 75px;margin:0 0 20px 0}.coding__bytes>li>span{display:inline-block;padding:3px;border-radius:3px;background-color:#fff1d5;font-size:12px;min-width:55px;text-align:center;font-weight:700}.coding__bytes>li:last-child{margin:0}.coding__bytes>li:before{content:"Byte " attr(data-byte);padding:3px;border-radius:3px;background-color:#fff1d5;position:absolute;left:0;top:0;font-size:12px;min-width:55px;text-align:center;font-weight:700}.coding__bytes>li:after{content:"";position:absolute;width:1px;height:calc(100% + 20px);background-color:#ece8e8;left:65px;top:-10px}.coding__bits{background-color:#faf9f9;font-size:14px;list-style:none;padding:0;margin:0;font-weight:300}.coding__bits>li{position:relative;padding:0 0 0 65px;margin:0 0 10px 0}.coding__bits>li:before{content:"Bit " attr(data-bit);padding:3px;border-radius:3px;background-color:#ece8e8;position:absolute;left:0;top:0;font-size:12px;min-width:55px;text-align:center;font-weight:700}.coding__bits>li:after{content:"";position:absolute;width:10px;height:1px;background-color:#ece8e8;left:-10px;top:12px}.coding__bits>li.add:before{background-color:#c8e8c2}.coding__bits>li.delete:before{background-color:#f4d8d8}.coding__totalcode{font-size:14px;padding:10px;background-color:#faf9f9;margin:0 0 10px 0;border-radius:5px}.coding__totalcode span{display:inline-block;background-color:#eee;padding:4px;border-radius:2px;min-width:30px;text-align:center}.coding__totalcode span:not(:first-child):not(:last-child){margin:0 5px}.coding__totalcode-title{font-size:14px;padding:5px 10px;background-color:#dbeaf7;font-weight:700;border-top-left-radius:5px;border-top-right-radius:5px;margin:10px 0 0 0}.coding__adaptations{padding:0}.coding__adaptations>li{display:flex;justify-content:space-between;align-items:center;padding:10px}.coding__adaptations>li:not(:last-child){border-bottom:1px dotted #ece8e8}.coding__adaptations-name{padding-right:20px;word-break:break-all}.coding__adaptations-value{display:inline-block;padding:3px 10px;border-radius:3px;background-color:#ece8e8;font-size:12px;text-align:center;font-weight:700;word-break:break-word;flex-shrink:0;flex-basis:120px}.coding__tip{width:20px;height:20px;display:inline-flex;background-color:#ccc;vertical-align:middle;border-radius:50%;position:relative;line-height:1;color:#fff!important;justify-content:center;align-items:center;cursor:pointer;text-decoration:none!important;transition:all .3s}.coding__tip:hover{background-color:#3a98ee}.coding__tip span{padding:10px;display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:250px;background-color:#fff;color:#000;border-radius:5px;font-size:12px;line-height:1.3;text-align:center;box-shadow:0 0 5px rgba(0,0,0,.1);word-break:auto-phrase}@media (max-width:576px){.coding__tip span{position:fixed;bottom:10px;width:300px;z-index:1}}.coding__tip span:after{content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:10px;height:10px;background-color:#fff;transform:rotate(45deg);transform-origin:top}.coding__tip:focus span{display:block}