.tabs{display:flex;flex-wrap:nowrap;flex-direction:row;align-items:stretch}.tabs .tab{margin:0;position:relative;text-transform:uppercase;padding:20px;text-align:center;cursor:pointer}.tabs .tab.active{border-bottom-color:#3a72d3;border-bottom-style:solid;border-bottom-width:2px;border-top-width:2px;border-right-width:2px;border-left-width:2px;border-top-style:none;border-right-style:none;border-left-style:none;font-weight:700}.tabs .tab:hover{color:#3a72d3;border-bottom-style:solid;border-bottom-width:2px;border-bottom-color:#3a72d3}.tabs-contents{display:flex;width:100%;flex-wrap:nowrap;flex-direction:column;align-items:flex-start}.tabs-contents .tab-content{display:none;width:100%;padding:20px 0}.tabs-contents .tab-content:first-child{display:block}input.toggle-input{display:none}label.toggle-label{display:block;width:35px;height:35px;cursor:pointer;color:#302b2b;transition:ease .5s;position:relative;pointer-events:none}.dark-mode label.toggle-label{color:#fff}label.toggle-label{position:relative;&::after,&::before{position:absolute;right:25px;top:5px;font-size:32px;font-weight:700;transition:opacity 0.3s ease,transform 0.3s ease}&::after{content:'+';opacity:1;transform:scale(1)}&::before{content:'-';opacity:0;transform:scale(.5)}}input.toggle-input:checked+label.toggle-label{&::after{opacity:0;transform:scale(.5)}&::before{opacity:1;transform:scale(1)}}@media(max-width:864px){.tabs{flex-wrap:wrap}.tabs .tab{min-width:50%;width:50%}}