.drager_col{overflow:hidden;display:flex;box-sizing:border-box}.drager_col *{box-sizing:border-box}.drager_col>div{height:100%}.drager_left{padding-right:10px}.drager_left>div{height:100%;overflow:hidden}.drager_right{padding-left:10px}.drager_right>div{height:100%;overflow:hidden}.drager_col>.slider_col{transition:background .2s;position:relative;z-index:1;cursor:col-resize;background:var(--0203b1b2)}.drager_col>.slider_col:before{transition:background-color .2s;position:absolute;top:50%;left:31%;transform:translateY(-50%);content:"";display:block;width:1px;height:24%;min-height:30px;max-height:70px;background-color:var(--1afa9ff7)}.drager_col>.slider_col:after{transition:background-color .2s;position:absolute;top:50%;right:31%;transform:translateY(-50%);content:"";display:block;width:1px;height:24%;min-height:30px;max-height:70px;background-color:var(--1afa9ff7)}.drager_col>.slider_col:hover:before,.drager_col>.slider_col:hover:after,.drager_col>.slider_col:active:before,.drager_col>.slider_col:active:after{background-color:var(--706ea773)}.drager_col>.slider_col:hover,.drager_col>.slider_col:active{background:var(--6efb1ad0)}.drager_row{overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}.drager_row *{box-sizing:border-box}.drager_row>div{width:100%}.drager_top{padding-bottom:10px}.drager_top>div{height:100%;overflow:hidden}.drager_bottom{padding-top:10px}.drager_bottom>div{height:100%;overflow:hidden}.drager_row>.slider_row{transition:background .2s;position:relative;z-index:1;cursor:row-resize;background:var(--0dfab1de)}.drager_row>.slider_row:before{transition:background-color .2s;position:absolute;left:50%;top:31%;transform:translate(-50%);content:"";display:block;height:1px;width:24%;min-width:30px;max-width:70px;background-color:var(--526889ba)}.drager_row>.slider_row:after{transition:background-color .2s;position:absolute;left:50%;bottom:31%;transform:translate(-50%);content:"";display:block;height:1px;width:24%;min-width:30px;max-width:70px;background-color:var(--526889ba)}.drager_row>.slider_row:hover:before,.drager_row>.slider_row:hover:after,.drager_row>.slider_row:active:before,.drager_row>.slider_row:active:after{background-color:var(--65a8b072)}.drager_row>.slider_row:hover,.drager_row>.slider_row:active{background:var(--2bfea428)}.resize_col{position:relative;overflow:hidden;box-sizing:border-box;padding-right:20px}.resize_col *{box-sizing:border-box}.resize_col_body{width:100%;height:100%}.resize_col>.slider_col{transition:background .2s;position:absolute;right:0;top:0;z-index:1;cursor:col-resize;height:100%;background:var(--0e8e0ce6)}.resize_col>.slider_col:before{transition:background-color .2s;position:absolute;top:50%;left:31%;transform:translateY(-50%);content:"";display:block;width:1px;height:24%;min-height:30px;max-height:70px;background-color:var(--72f3badc)}.resize_col>.slider_col:after{transition:background-color .2s;position:absolute;top:50%;right:31%;transform:translateY(-50%);content:"";display:block;width:1px;height:24%;min-height:30px;max-height:70px;background-color:var(--72f3badc)}.resize_col>.slider_col:hover:before,.resize_col>.slider_col:hover:after,.resize_col>.slider_col:active:before,.resize_col>.slider_col:active:after{background-color:var(--22438db8)}.resize_col>.slider_col:hover,.resize_col>.slider_col:active{background:var(--58b6db9d)}.resize_row{overflow:hidden;box-sizing:border-box;padding-bottom:20px;position:relative}.resize_row *{box-sizing:border-box}.resize_row_body{width:100%;height:100%}.resize_row>.slider_row{transition:background .2s;position:absolute;bottom:0;left:0;width:100%;z-index:1;cursor:row-resize;background:var(--9dd5c64e)}.resize_row>.slider_row:before{transition:background-color .2s;position:absolute;left:50%;top:31%;transform:translate(-50%);content:"";display:block;height:1px;width:24%;min-width:30px;max-width:70px;background-color:var(--742aae44)}.resize_row>.slider_row:after{transition:background-color .2s;position:absolute;left:50%;bottom:31%;transform:translate(-50%);content:"";display:block;height:1px;width:24%;min-width:30px;max-width:70px;background-color:var(--742aae44)}.resize_row>.slider_row:hover:before,.resize_row>.slider_row:hover:after,.resize_row>.slider_row:active:before,.resize_row>.slider_row:active:after{background-color:var(--4c7316ec)}.resize_row>.slider_row:hover,.resize_row>.slider_row:active{background:var(--95ae305e)}.resize{position:relative;overflow:hidden;box-sizing:border-box;padding:0 20px 20px 0}.resize *{box-sizing:border-box}.resize_body{width:100%;height:100%}.resize>.slider_row{transition:background .2s;position:absolute;bottom:0;left:0;width:100%;z-index:1;cursor:row-resize;background:var(--54a7f13e)}.resize>.slider_col{transition:background .2s;position:absolute;right:0;top:0;z-index:1;cursor:col-resize;height:100%;background:var(--54a7f13e)}.resize>.slider_col:before{transition:background-color .2s;position:absolute;top:50%;left:31%;transform:translateY(-50%);content:"";display:block;width:1px;height:24%;min-height:30px;max-height:70px;background-color:var(--96fd5afa)}.resize>.slider_col:after{transition:background-color .2s;position:absolute;top:50%;right:31%;transform:translateY(-50%);content:"";display:block;width:1px;height:24%;min-height:30px;max-height:70px;background-color:var(--96fd5afa)}.resize>.slider_col:hover:before,.resize>.slider_col:hover:after,.resize>.slider_col:active:before,.resize>.slider_col:active:after{background-color:var(--efa4a732)}.resize>.slider_col:hover,.resize>.slider_col:active{background:var(--26d7eae8)}.resize>.slider_row:before{transition:background-color .2s;position:absolute;left:50%;top:31%;transform:translate(-50%);content:"";display:block;height:1px;width:24%;min-width:30px;max-width:70px;background-color:var(--96fd5afa)}.resize>.slider_row:after{transition:background-color .2s;position:absolute;left:50%;bottom:31%;transform:translate(-50%);content:"";display:block;height:1px;width:24%;min-width:30px;max-width:70px;background-color:var(--96fd5afa)}.resize>.slider_row:hover:before,.resize>.slider_row:hover:after,.resize>.slider_row:active:before,.resize>.slider_row:active:after{background-color:var(--efa4a732)}.resize>.slider_row:hover,.resize>.slider_row:active{background:var(--26d7eae8)}body{margin-top:40px;font-family:sans-serif;background:#04111b}h1{font-size:40px;text-align:center;color:#fff}h2{margin-top:80px;font-size:30px;text-align:center;color:#fff}h3{margin-top:80px;font-size:20px;text-align:center;color:#fff}p{text-align:center;color:#9db0c2;margin-bottom:40px}.link{transition:color .2s;color:#6a8299;text-align:center;display:block;text-decoration:none;margin:30px 0}.link>span{transition:margin-right .2s;margin-right:6px;vertical-align:top;display:inline-block;line-height:20px}.link>svg{vertical-align:top}.link:hover{color:#c1d0df}.link:hover>span{margin-right:10px}.container{box-sizing:border-box;padding:20px 20px 100px;max-width:400px;width:100%;margin:0 auto}.drager_col,.drager_row,.resize_col,.resize_row,.resize{border-radius:12px}.resize *{border-radius:0}.example_1 .drager_left,.example_1 .drager_right{overflow:hidden;position:relative}.example_1 .drager_left>div{height:auto;font-size:24px;font-weight:700;color:#648192;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.example_1 .drager_right>div{height:auto;font-size:24px;font-weight:700;color:#89a0af;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.drager_left{background:#2d4252}.drager_right{background:#4d6170}.drager_top{background:#2d4252}.drager_bottom{background:#4d6170}.example_2 .drager_top,.example_2 .drager_bottom{overflow:hidden;position:relative}.example_2 .drager_top>div{height:auto;font-size:24px;font-weight:700;color:#648192;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.example_2 .drager_bottom>div{height:auto;font-size:24px;font-weight:700;color:#89a0af;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.resize_col{background:#4d6170}.example_3 .resize_col{overflow:hidden}.example_3 .resize_col_body{height:auto;width:auto;font-size:24px;font-weight:700;color:#89a0af;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.resize_row{background:#4d6170}.example_4 .resize_row{overflow:hidden}.example_4 .resize_row_body{height:auto;width:auto;font-size:24px;font-weight:700;color:#89a0af;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.resize{background:#4d6170}.example_5 .resize{overflow:hidden}.example_5 .resize_body{height:auto;width:160px;font-size:20px;font-weight:700;color:#89a0af;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}