.layout{background:var(--platin-white)}.view-container{position:relative}.view-container>.head{display:flex;margin-bottom:20px}.view-container>.head .title{display:flex;align-items:center;gap:20px}.view-container>.head .title span{position:relative;width:44px;height:44px;background:white;border-radius:8px;box-shadow:0 2px 5px var(--light-shadow)}.view-container>.head .title span i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--primary)}.branches{display:flex;gap:20px;flex-wrap:wrap}.branch{width:calc((100% - 100px) / 6)}.branch:nth-of-type(n),.branch:nth-of-type(12n){--color: rgba(165 37 2);--shadow: rgba(165 37 2 / .5)}.branch:nth-of-type(2n),.branch:nth-of-type(11n){--color: rgba(255 153 51);--shadow: rgba(255 153 51 / .5)}.branch:nth-of-type(3n),.branch:nth-of-type(10n){--color: rgba(0 153 221);--shadow: rgba(0 153 221 / .5)}.branch:nth-of-type(4n),.branch:nth-of-type(9n){--color: rgba(0 171 189);--shadow: rgba(0 171 189 / .5)}.branch:nth-of-type(5n),.branch:nth-of-type(8n){--color: rgba(161 199 224);--shadow: rgba(161 199 224 / .5)}.branch:nth-of-type(6n),.branch:nth-of-type(7n){--color: rgba(2 110 129);--shadow: rgba(2 110 129 / .5)}.branch .card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:calc(100% - 24px);padding:12px 20px;background:white;border-radius:8px;box-shadow:0 0 10px var(--shadow);cursor:pointer}.branch .card h3{margin:0 0 5px;color:#2f4f4f;text-align:center;font-size:18px}.branch .card span{color:var(--color);font-size:24px;font-weight:700}.branch .clients:not(.show){display:none}.branch .clients{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:600px;max-height:500px;padding:20px;overflow-y:auto;background:white;border-radius:15px;box-shadow:0 4px 20px var(--light-shadow);z-index:100}.branch .clients h2{margin-top:0;color:var(--primary);text-align:center}.clients td:first-of-type{font-size:15px}.clients td:last-of-type{font-size:14px;padding-inline-start:40px}@media (max-width: 1200px){.branch{width:calc(20% - 16px)}}@media (max-width: 1000px){.branch{width:calc(25% - 15px)}}@media (max-width: 800px){.branch{width:calc(100% / 3 - 20px)}}@media (max-width: 650px){.branch .clients{width:380px}}@media (max-width: 600px){.view-container{width:calc(100% - 40px);padding:0 20px}.branch{width:calc(50% - 10px)}}@media (max-width: 450px){.branch .clients{width:280px}}