:root {
    --animation-speed: 0.25s;
    --tiny-font-size: 12px;
    --normal-font-size: 14px;
    --large-font-size: 16px;

    --switch-size: 2rem;

    --small-btn-size: 1.3rem;

    --cus-card-grid-height: 72px;
    --cus-card-row-height: 32px;
    --agr-card-grid-height: 188px;
    --agr-card-row-height: 115px;

    --default-input-height: 24px;
}

[data-theme="light"]{
    --link-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='512px' height='512px' %0Afill='%23d7e1e7' %3E%3Cpath d='M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 12 L 19 12 L 19 19 L 5 19 L 5 5 L 12 5 L 12 3 L 5 3 z M 14 3 L 14 5 L 17.585938 5 L 8.2929688 14.292969 L 9.7070312 15.707031 L 19 6.4140625 L 19 10 L 21 10 L 21 3 L 14 3 z'/%3E%3C/svg%3E");
    --options-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M170 5098 c-44 -30 -69 -66 -80 -114 -14 -57 -12 -570 1 -619 14 -51%0A73 -110 124 -124 52 -14 576 -15 627 -1 45 13 93 51 116 94 15 27 17 67 17%0A336 0 168 -3 317 -7 332 -11 38 -57 88 -95 104 -25 11 -105 14 -351 14 -314 0%0A-320 0 -352 -22z m620 -418 l0 -260 -260 0 -260 0 0 260 0 260 260 0 260 0 0%0A-260z'/%3E%3Cpath d='M1594 5106 c-17 -8 -44 -31 -60 -52 l-29 -37 -3 -316 c-2 -205 1%0A-329 8 -353 13 -44 66 -93 117 -107 55 -16 3223 -15 3278 0 51 14 110 73 124%0A124 13 49 15 562 1 619 -11 48 -36 84 -80 114 l-33 22 -1646 0 c-1364 -1%0A-1651 -3 -1677 -14z m3256 -426 l0 -260 -1585 0 -1585 0 0 260 0 260 1585 0%0A1585 0 0 -260z'/%3E%3Cpath d='M175 3687 c-52 -29 -82 -76 -90 -140 -4 -29 -5 -173 -3 -322 3 -306%0A7 -324 81 -373 l40 -27 315 -3 c303 -3 315 -2 358 19 31 15 52 35 72 67 l27%0A47 3 278 c4 361 -6 410 -98 457 -37 19 -60 20 -352 20 -306 0 -314 -1 -353%0A-23z m615 -417 l0 -260 -260 0 -260 0 0 260 0 260 260 0 260 0 0 -260z'/%3E%3Cpath d='M1592 3689 c-28 -14 -51 -36 -67 -64 l-25 -42 0 -317 c0 -257 3 -322%0A14 -345 22 -41 81 -89 118 -96 18 -3 765 -4 1659 -3 l1625 3 41 27 c74 49 78%0A67 81 373 2 149 1 293 -3 322 -8 64 -38 111 -90 140 l-40 23 -1635 0 -1635 0%0A-43 -21z m3258 -419 l0 -260 -1585 0 -1585 0 0 260 0 260 1585 0 1585 0 0%0A-260z'/%3E%3Cpath d='M182 2279 c-49 -24 -75 -57 -91 -114 -13 -49 -15 -562 -1 -619 11%0A-51 38 -86 86 -113 38 -22 47 -23 352 -23 292 0 315 1 352 20 92 47 102 96 98%0A457 l-3 278 -27 47 c-19 32 -41 52 -71 67 -41 20 -59 21 -348 21 -289 0 -306%0A-1 -347 -21z m608 -429 l0 -260 -260 0 -260 0 0 260 0 260 260 0 260 0 0 -260z'/%3E%3Cpath d='M1610 2289 c-32 -13 -78 -56 -96 -91 -11 -22 -14 -91 -14 -344 l0%0A-317 25 -43 c16 -28 39 -49 68 -63 l43 -21 1635 0 1634 0 40 23 c52 29 82 76%0A90 140 4 29 5 174 3 322 -3 306 -7 324 -81 373 l-41 27 -1640 2 c-1074 1%0A-1650 -2 -1666 -8z m3240 -439 l0 -260 -1585 0 -1585 0 0 260 0 260 1585 0%0A1585 0 0 -260z'/%3E%3Cpath d='M205 875 c-50 -18 -100 -71 -114 -122 -13 -47 -14 -561 -1 -617 11%0A-48 36 -84 80 -114 32 -22 38 -22 352 -22 246 0 326 3 351 14 38 16 84 66 95%0A104 4 15 7 164 7 332 0 269 -2 309 -17 336 -23 43 -71 81 -116 94 -60 16 -588%0A12 -637 -5z m585 -435 l0 -260 -260 0 -260 0 0 260 0 260 260 0 260 0 0 -260z'/%3E%3Cpath d='M1616 875 c-50 -18 -94 -60 -107 -105 -6 -22 -9 -152 -7 -351 l3%0A-316 27 -35 c56 -74 -91 -68 1741 -68 l1644 0 33 22 c44 30 69 66 80 114 14%0A57 12 570 -1 619 -14 51 -73 110 -124 124 -29 8 -504 11 -1645 11 -1337 -1%0A-1611 -3 -1644 -15z m3234 -435 l0 -260 -1585 0 -1585 0 0 260 0 260 1585 0%0A1585 0 0 -260z'/%3E%3C/g%3E%3C/svg%3E");
    --plus-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23545454' stroke='none'%3E%3Cpath d='M2256 4784 c-723 -98 -1359 -548 -1691 -1195 -120 -234 -191 -462%0A-230 -734 -19 -130 -19 -448 -1 -585 89 -656 450 -1232 1001 -1593 201 -131%0A498 -256 731 -307 302 -66 668 -68 964 -5 659 138 1232 581 1535 1186 155 307%0A224 589 232 945 8 305 -22 518 -108 779 -48 143 -164 385 -246 510 -361 551%0A-937 912 -1593 1001 -132 17 -460 17 -594 -2z m569 -330 c711 -96 1320 -601%0A1549 -1286 65 -194 87 -327 93 -553 6 -228 -7 -351 -58 -544 -173 -656 -689%0A-1177 -1340 -1355 -173 -47 -324 -67 -510 -67 -352 0 -671 87 -972 265 -499%0A294 -838 801 -922 1377 -20 138 -20 400 0 538 118 806 722 1445 1521 1606 219%0A45 407 50 639 19z'/%3E%3Cpath d='M2472 3660 c-18 -11 -41 -34 -52 -52 -19 -32 -20 -52 -20 -460 l0%0A-428 -427 0 c-409 0 -429 -1 -461 -20 -48 -30 -72 -75 -72 -140 0 -65 24 -110%0A72 -140 32 -19 52 -20 461 -20 l427 0 0 -427 c0 -409 1 -429 20 -461 30 -48%0A75 -72 140 -72 65 0 110 24 140 72 19 32 20 52 20 461 l0 427 428 0 c408 0%0A428 1 460 20 48 30 72 75 72 140 0 65 -24 110 -72 140 -32 19 -52 20 -460 20%0Al-428 0 0 428 c0 408 -1 428 -20 460 -30 48 -75 72 -140 72 -37 0 -66 -6 -88%0A-20z'/%3E%3C/g%3E%3C/svg%3E");
    --edit-img: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23545454' stroke='none'%3E%3Cpath d='M3767 4745 c-105 -20 -210 -62 -293 -118 -38 -25 -133 -110 -211%0A-189 -117 -118 -143 -150 -153 -186 -12 -46 -7 -90 16 -132 7 -14 232 -244%0A501 -512 541 -540 520 -523 623 -498 44 11 63 26 197 163 161 165 212 240 264%0A387 116 328 11 713 -249 910 -84 64 -246 144 -332 165 -95 23 -269 28 -363 10z%0Am325 -384 c214 -83 337 -337 270 -558 -23 -73 -80 -170 -128 -215 l-30 -28%0A-322 323 -323 323 53 50 c66 62 114 91 186 115 78 26 214 21 294 -10z'/%3E%3Cpath d='M2655 3821 c-51 -32 -2273 -2264 -2285 -2294 -6 -18 -10 -204 -10%0A-523 0 -423 2 -500 15 -531 21 -50 42 -72 90 -94 37 -17 76 -19 537 -19 321 0%0A507 4 525 10 32 12 2276 2250 2299 2292 18 35 18 122 -1 162 -20 42 -972 992%0A-1008 1005 -46 18 -128 13 -162 -8z m-267 -2078 l-1003 -1003 -322 0 -323 0 0%0A322 0 323 1002 1002 1003 1003 322 -322 323 -323 -1002 -1002z'/%3E%3C/g%3E%3C/svg%3E");
    --recycling-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23545454' stroke='none'%3E%3Cpath d='M1928 4781 c-145 -47 -269 -174 -312 -320 -11 -37 -16 -95 -16 -178%0Al0 -123 -359 0 c-324 0 -365 -2 -420 -19 -85 -26 -137 -60 -204 -130 -149%0A-156 -174 -395 -62 -586 33 -58 133 -148 200 -180 30 -15 55 -28 55 -29 0 -43%0A284 -2532 291 -2556 49 -153 170 -275 319 -321 63 -19 94 -19 1165 -17 l1100%0A3 78 37 c132 63 228 178 261 314 8 32 77 618 152 1301 l138 1243 60 28 c95 45%0A168 119 218 219 40 81 43 91 46 188 3 76 0 118 -13 161 -43 152 -167 279 -316%0A325 -55 17 -96 19 -425 19 l-364 0 0 123 c0 83 -5 141 -16 178 -43 148 -168%0A274 -315 320 -57 18 -99 19 -632 18 -526 0 -577 -2 -629 -18z m1136 -311 c94%0A-21 127 -75 134 -211 l5 -99 -643 0 -643 0 5 99 c7 134 41 190 129 211 47 11%0A965 12 1013 0z m1166 -656 c107 -63 107 -205 0 -268 -35 -21 -39 -21 -1670%0A-21 -1631 0 -1635 0 -1670 21 -126 73 -99 250 43 284 17 5 759 7 1647 7 1610%0A-2 1615 -2 1650 -23z m-260 -636 c0 -27 -257 -2356 -266 -2406 -3 -18 -21 -51%0A-40 -72 -28 -30 -47 -41 -88 -50 -36 -7 -361 -10 -1051 -8 l-1000 3 -37 23%0Ac-71 44 -64 -4 -207 1297 -72 655 -131 1200 -131 1213 l0 22 1410 0 1410 0 0%0A-22z'/%3E%3Cpath d='M1992 2860 c-18 -11 -41 -34 -52 -52 -19 -32 -20 -52 -20 -808 0%0A-756 1 -776 20 -808 30 -48 75 -72 140 -72 65 0 110 24 140 72 19 32 20 52 20%0A808 0 756 -1 776 -20 808 -30 48 -75 72 -140 72 -37 0 -66 -6 -88 -20z'/%3E%3Cpath d='M2952 2860 c-18 -11 -41 -34 -52 -52 -19 -32 -20 -52 -20 -808 0%0A-756 1 -776 20 -808 30 -48 75 -72 140 -72 65 0 110 24 140 72 19 32 20 52 20%0A808 0 756 -1 776 -20 808 -30 48 -75 72 -140 72 -37 0 -66 -6 -88 -20z'/%3E%3C/g%3E%3C/svg%3E");
    --accept-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23545454' stroke='none'%3E%3Cpath d='M4440 4213 c-8 -3 -582 -572 -1275 -1264 l-1260 -1259 -610 610%0Ac-486 486 -615 610 -635 610 -36 0 -383 -348 -378 -379 3 -20 1573 -1602 1610%0A-1622 9 -5 20 -9 25 -9 4 0 664 656 1465 1457 985 985 1458 1465 1458 1478 0%0A21 -357 386 -376 384 -5 0 -16 -3 -24 -6z'/%3E%3C/g%3E%3C/svg%3E");
    --download-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23545454' stroke='none'%3E%3Cpath d='M988 5096 c-192 -68 -349 -227 -420 -426 l-23 -65 0 -2035 0 -2035%0A23 -65 c72 -201 231 -360 432 -432 l65 -23 1479 -3 c1651 -3 1527 -8 1686 69%0A69 34 101 58 170 128 89 89 130 154 172 271 l23 65 3 1585 c2 1532 2 1586 -17%0A1615 -10 17 -307 333 -660 703 l-642 672 -1112 0 -1112 0 -67 -24z m2094 -658%0Ac3 -365 7 -451 19 -488 64 -186 190 -313 369 -372 61 -20 90 -22 468 -26 l402%0A-4 0 -1467 c0 -1465 0 -1467 -21 -1529 -50 -147 -180 -257 -336 -282 -78 -13%0A-2748 -13 -2827 0 -126 20 -253 108 -307 211 -57 108 -53 -40 -57 2044 -1%0A1214 1 1943 7 1983 28 182 172 332 348 362 26 4 472 8 990 9 l942 1 3 -442z%0Am649 -171 c211 -222 395 -416 409 -431 l25 -27 -300 3 -300 3 -57 28 c-71 35%0A-120 88 -147 161 -20 53 -21 75 -21 361 0 168 2 305 4 305 2 0 177 -181 387%0A-403z'/%3E%3Cpath d='M2503 3410 c-60 -36 -58 -5 -63 -752 l-5 -686 -250 270 c-137 148%0A-262 276 -277 284 -36 19 -108 18 -136 -2 -47 -33 -67 -121 -39 -170 23 -41%0A756 -820 782 -832 37 -17 75 -15 112 6 18 9 201 198 407 420 405 436 402 430%0A377 513 -8 27 -23 46 -44 59 -34 21 -106 27 -136 10 -10 -5 -133 -132 -272%0A-282 l-254 -272 -5 685 c-5 651 -6 685 -24 712 -38 57 -114 73 -173 37z'/%3E%3Cpath d='M1516 1110 c-50 -16 -96 -73 -96 -120 0 -37 32 -91 64 -111 30 -18%0A71 -19 1085 -19 1030 0 1054 0 1085 20 77 47 81 152 9 207 l-36 28 -1041 2%0Ac-573 1 -1054 -2 -1070 -7z'/%3E%3C/g%3E%3C/svg%3E");
    --remove-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23545454' stroke='none'%3E%3Cpath d='M1352 3820 c-47 -29 -72 -75 -72 -137 0 -28 5 -64 11 -80 5 -15 238%0A-256 517 -535 l507 -508 -507 -507 c-279 -280 -512 -521 -517 -536 -6 -16 -11%0A-51 -11 -79 0 -94 64 -158 158 -158 28 0 63 5 79 11 15 5 256 238 536 517%0Al507 507 508 -507 c279 -279 520 -512 535 -517 16 -6 51 -11 79 -11 94 0 158%0A64 158 158 0 28 -5 63 -11 79 -5 15 -238 256 -517 536 l-507 507 507 508 c279%0A279 512 520 517 535 16 41 13 123 -4 157 -25 48 -81 80 -142 80 -28 0 -64 -5%0A-80 -11 -15 -5 -256 -238 -535 -517 l-508 -507 -507 507 c-280 279 -521 512%0A-536 517 -47 18 -128 13 -165 -9z'/%3E%3C/g%3E%3C/svg%3E");
    --theme-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23545454' stroke='none'%3E%3Cpath d='M2465 4694 c-16 -2 -73 -9 -125 -15 -523 -59 -1038 -335 -1387 -743%0A-647 -756 -687 -1840 -96 -2633 317 -427 801 -732 1323 -837 889 -177 1773%0A177 2260 907 52 78 146 247 137 247 -3 0 -34 -11 -70 -25 -80 -30 -236 -70%0A-337 -87 -99 -17 -442 -16 -545 1 -381 61 -710 227 -970 486 -405 406 -571%0A950 -459 1505 41 200 157 464 282 640 125 177 353 387 529 488 35 20 63 39 63%0A42 0 19 -486 37 -605 24z'/%3E%3C/g%3E%3C/svg%3E");
    --user-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23545454' stroke='none'%3E%3Cpath d='M2305 5113 c-671 -72 -1279 -393 -1707 -903 -300 -357 -489 -767%0A-569 -1234 -31 -176 -38 -543 -14 -726 120 -942 730 -1729 1612 -2079 191 -76%0A441 -137 658 -161 116 -13 434 -13 550 0 572 64 1091 307 1503 705 426 410%0A692 944 767 1535 24 183 17 550 -14 726 -95 555 -351 1042 -747 1424 -386 372%0A-837 600 -1368 691 -97 17 -172 22 -376 24 -140 2 -273 1 -295 -2z m545 -187%0Ac289 -37 526 -109 785 -241 455 -230 820 -595 1050 -1050 177 -349 255 -679%0A255 -1075 0 -305 -44 -552 -146 -830 -49 -131 -151 -336 -228 -455 -54 -83%0A-66 -96 -72 -80 -177 501 -557 926 -1034 1156 -69 33 -133 65 -143 70 -13 7%0A-29 -1 -71 -35 -112 -91 -262 -165 -421 -209 -69 -18 -106 -21 -265 -21 -159%0A0 -196 3 -265 21 -159 44 -309 118 -421 209 -42 34 -58 42 -71 35 -10 -5 -74%0A-37 -143 -70 -477 -230 -857 -655 -1034 -1156 -16 -45 -221 322 -300 535 -102%0A278 -146 525 -146 830 0 396 78 726 255 1075 361 713 1051 1196 1850 1294 117%0A14 441 12 565 -3z'/%3E%3Cpath d='M2470 4139 c-423 -39 -776 -372 -841 -792 -16 -103 -6 -285 21 -382%0A12 -44 23 -87 24 -95 1 -8 9 -26 17 -40 9 -14 35 -60 59 -103 49 -88 153 -205%0A241 -273 325 -250 813 -250 1138 0 88 68 192 185 241 273 24 43 50 89 59 103%0A8 14 16 32 17 40 1 8 12 51 24 95 27 97 37 279 21 382 -24 158 -103 331 -208%0A459 -148 178 -393 311 -611 329 -37 3 -78 7 -92 9 -14 1 -63 -1 -110 -5z'/%3E%3C/g%3E%3C/svg%3E");
    --grid-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23545454' stroke='none'%3E%3Cpath d='M1055 4146 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -298 -3 -624 3 -580%0A3 -592 24 -619 11 -15 33 -37 48 -48 27 -21 37 -21 646 -21 609 0 619 0 646%0A21 15 11 37 33 48 48 21 27 21 37 21 646 0 609 0 619 -21 646 -11 15 -33 37%0A-48 48 -27 21 -39 21 -634 23 -489 2 -613 0 -637 -11z'/%3E%3Cpath d='M2815 4146 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -298 -3 -624 3 -580%0A3 -592 24 -619 11 -15 33 -37 48 -48 27 -21 37 -21 646 -21 609 0 619 0 646%0A21 15 11 37 33 48 48 21 27 21 37 21 646 0 609 0 619 -21 646 -11 15 -33 37%0A-48 48 -27 21 -39 21 -634 23 -489 2 -613 0 -637 -11z'/%3E%3Cpath d='M1055 2386 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -298 -3 -624 3 -580%0A3 -592 24 -619 11 -15 33 -37 48 -48 27 -21 37 -21 646 -21 609 0 619 0 646%0A21 15 11 37 33 48 48 21 27 21 37 21 646 0 609 0 619 -21 646 -11 15 -33 37%0A-48 48 -27 21 -39 21 -634 23 -489 2 -613 0 -637 -11z'/%3E%3Cpath d='M2815 2386 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -298 -3 -624 3 -580%0A3 -592 24 -619 11 -15 33 -37 48 -48 27 -21 37 -21 646 -21 609 0 619 0 646%0A21 15 11 37 33 48 48 21 27 21 37 21 646 0 609 0 619 -21 646 -11 15 -33 37%0A-48 48 -27 21 -39 21 -634 23 -489 2 -613 0 -637 -11z'/%3E%3C/g%3E%3C/svg%3E");
    --row-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23545454' stroke='none'%3E%3Cpath d='M1060 3944 c-53 -23 -108 -82 -126 -136 -12 -38 -15 -82 -12 -216 3%0A-162 4 -168 31 -215 15 -26 47 -60 69 -75 l42 -27 1501 0 1501 0 42 27 c22 15%0A54 49 69 75 27 46 28 54 31 203 5 191 -6 246 -56 303 -76 84 68 77 -1587 76%0A-1289 0 -1474 -2 -1505 -15z'/%3E%3Cpath d='M1091 2900 c-51 -12 -113 -61 -141 -110 -23 -42 -25 -56 -28 -209 -3%0A-113 0 -178 9 -210 17 -59 88 -132 145 -149 60 -18 2918 -18 2978 0 25 8 59%0A31 87 59 62 61 72 106 67 309 -3 127 -7 161 -22 190 -26 49 -55 78 -101 103%0Al-40 22 -1460 2 c-803 0 -1475 -3 -1494 -7z'/%3E%3Cpath d='M1060 1834 c-53 -23 -108 -82 -126 -136 -12 -38 -15 -82 -12 -216 3%0A-162 4 -168 31 -215 15 -26 47 -60 69 -75 l42 -27 1501 0 1501 0 42 27 c22 15%0A54 49 69 75 27 46 28 54 31 203 5 191 -6 246 -56 303 -76 84 68 77 -1587 76%0A-1289 0 -1474 -2 -1505 -15z'/%3E%3C/g%3E%3C/svg%3E");
    --notification-img: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23545454' stroke='none'%3E%3Cpath d='M2418 4831 c-164 -53 -293 -194 -327 -359 -6 -29 -11 -119 -11 -200%0Al0 -147 -86 -39 c-294 -135 -554 -407 -673 -707 -67 -169 -78 -233 -137 -809%0A-30 -299 -56 -545 -57 -545 -1 -1 -32 -21 -70 -44 -312 -200 -359 -638 -96%0A-901 76 -76 189 -139 287 -159 32 -7 185 -11 386 -11 l333 0 7 -77 c14 -167%0A64 -281 171 -389 233 -234 597 -234 830 0 107 108 157 222 171 389 l7 77 336%0A0 c369 0 413 5 519 59 130 66 244 195 292 332 30 88 37 231 16 323 -33 140%0A-129 277 -249 355 -34 23 -65 42 -69 43 -4 2 -30 230 -58 508 -53 535 -66 624%0A-107 754 -107 341 -382 653 -707 802 l-86 39 0 147 c0 81 -5 171 -11 200 -35%0A167 -163 308 -326 358 -83 26 -206 26 -285 1z m222 -323 c65 -45 75 -68 78%0A-191 l4 -112 -162 0 -162 0 4 112 c2 94 6 116 24 140 35 48 82 73 134 73 32 0%0A57 -7 80 -22z m195 -653 c296 -89 514 -273 645 -547 69 -144 84 -228 144 -835%0A34 -340 61 -565 70 -586 22 -54 84 -116 147 -147 66 -34 112 -77 140 -132 65%0A-127 6 -293 -125 -354 l-51 -24 -1245 0 c-1231 0 -1246 1 -1290 21 -124 56%0A-186 189 -150 321 17 60 68 117 145 160 39 22 84 53 102 70 68 65 69 72 129%0A666 30 301 59 572 65 602 70 364 342 668 695 776 129 39 165 43 334 39 133 -3%0A168 -7 245 -30z m-8 -3012 c-12 -115 -91 -217 -190 -244 -64 -17 -158 -6 -212%0A25 -77 45 -135 150 -135 243 l0 33 271 0 272 0 -6 -57z'/%3E%3Cpath d='M1539 4491 c-427 -161 -732 -516 -818 -949 -11 -53 -22 -133 -26%0A-177 -5 -71 -4 -85 17 -125 42 -83 131 -113 214 -74 59 28 75 63 90 192 23%0A193 66 319 158 462 96 148 270 288 445 357 126 49 143 60 170 99 46 67 27 167%0A-40 215 -50 35 -118 35 -210 0z'/%3E%3Cpath d='M3388 4500 c-57 -30 -81 -79 -76 -151 4 -51 9 -64 38 -94 19 -20 55%0A-42 84 -51 216 -72 414 -225 525 -406 86 -139 126 -266 149 -475 11 -92 32%0A-131 86 -157 78 -37 167 -10 210 64 53 90 -3 408 -111 625 -146 293 -412 528%0A-721 639 -86 31 -134 32 -184 6z'/%3E%3C/g%3E%3C/svg%3E%0A");

    --scrollbar-color: #bababa #f2f2f2;
    --thead-background-color: #3a7e5b;
    --thead-text-color:#f1f1f1;
    --thead-btn-color-hover:#326b4d;
    --background-color: #82b99c;
    --auth-btn-color:#4CAF50;
    --auth-btn-color-hover:#43A047;
    --dlg-border-color: #545454;
    --border-color:#bababa;
    --border-btn-color-hover: #a8a8a8;
    --text-color:#545454;
    --main-color: #f1f1f1;
    --main-color-hover: #dfdfdf;
    --small-btn-color-hover: #d5d5d5;
    --checkbox-color:#3a7e5b;
    --input-color: #f2f2f2;
    --input-color-hover: #e8e8e8;
    --switch-circle-color:#545454;
    --switch-rail-color:#a8a8a8;
    --a-link-color:#0000EE;
    --a-visited-color:#0000EE;
    --a-hover-color:#0043ee;
    --a-active-color:#ff0000;
}

[data-theme="dark"]{
    --link-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='512px' height='512px' %0Afill='%23d7e1e7' %3E%3Cpath d='M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 12 L 19 12 L 19 19 L 5 19 L 5 5 L 12 5 L 12 3 L 5 3 z M 14 3 L 14 5 L 17.585938 5 L 8.2929688 14.292969 L 9.7070312 15.707031 L 19 6.4140625 L 19 10 L 21 10 L 21 3 L 14 3 z'/%3E%3C/svg%3E");
    --options-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M170 5098 c-44 -30 -69 -66 -80 -114 -14 -57 -12 -570 1 -619 14 -51%0A73 -110 124 -124 52 -14 576 -15 627 -1 45 13 93 51 116 94 15 27 17 67 17%0A336 0 168 -3 317 -7 332 -11 38 -57 88 -95 104 -25 11 -105 14 -351 14 -314 0%0A-320 0 -352 -22z m620 -418 l0 -260 -260 0 -260 0 0 260 0 260 260 0 260 0 0%0A-260z'/%3E%3Cpath d='M1594 5106 c-17 -8 -44 -31 -60 -52 l-29 -37 -3 -316 c-2 -205 1%0A-329 8 -353 13 -44 66 -93 117 -107 55 -16 3223 -15 3278 0 51 14 110 73 124%0A124 13 49 15 562 1 619 -11 48 -36 84 -80 114 l-33 22 -1646 0 c-1364 -1%0A-1651 -3 -1677 -14z m3256 -426 l0 -260 -1585 0 -1585 0 0 260 0 260 1585 0%0A1585 0 0 -260z'/%3E%3Cpath d='M175 3687 c-52 -29 -82 -76 -90 -140 -4 -29 -5 -173 -3 -322 3 -306%0A7 -324 81 -373 l40 -27 315 -3 c303 -3 315 -2 358 19 31 15 52 35 72 67 l27%0A47 3 278 c4 361 -6 410 -98 457 -37 19 -60 20 -352 20 -306 0 -314 -1 -353%0A-23z m615 -417 l0 -260 -260 0 -260 0 0 260 0 260 260 0 260 0 0 -260z'/%3E%3Cpath d='M1592 3689 c-28 -14 -51 -36 -67 -64 l-25 -42 0 -317 c0 -257 3 -322%0A14 -345 22 -41 81 -89 118 -96 18 -3 765 -4 1659 -3 l1625 3 41 27 c74 49 78%0A67 81 373 2 149 1 293 -3 322 -8 64 -38 111 -90 140 l-40 23 -1635 0 -1635 0%0A-43 -21z m3258 -419 l0 -260 -1585 0 -1585 0 0 260 0 260 1585 0 1585 0 0%0A-260z'/%3E%3Cpath d='M182 2279 c-49 -24 -75 -57 -91 -114 -13 -49 -15 -562 -1 -619 11%0A-51 38 -86 86 -113 38 -22 47 -23 352 -23 292 0 315 1 352 20 92 47 102 96 98%0A457 l-3 278 -27 47 c-19 32 -41 52 -71 67 -41 20 -59 21 -348 21 -289 0 -306%0A-1 -347 -21z m608 -429 l0 -260 -260 0 -260 0 0 260 0 260 260 0 260 0 0 -260z'/%3E%3Cpath d='M1610 2289 c-32 -13 -78 -56 -96 -91 -11 -22 -14 -91 -14 -344 l0%0A-317 25 -43 c16 -28 39 -49 68 -63 l43 -21 1635 0 1634 0 40 23 c52 29 82 76%0A90 140 4 29 5 174 3 322 -3 306 -7 324 -81 373 l-41 27 -1640 2 c-1074 1%0A-1650 -2 -1666 -8z m3240 -439 l0 -260 -1585 0 -1585 0 0 260 0 260 1585 0%0A1585 0 0 -260z'/%3E%3Cpath d='M205 875 c-50 -18 -100 -71 -114 -122 -13 -47 -14 -561 -1 -617 11%0A-48 36 -84 80 -114 32 -22 38 -22 352 -22 246 0 326 3 351 14 38 16 84 66 95%0A104 4 15 7 164 7 332 0 269 -2 309 -17 336 -23 43 -71 81 -116 94 -60 16 -588%0A12 -637 -5z m585 -435 l0 -260 -260 0 -260 0 0 260 0 260 260 0 260 0 0 -260z'/%3E%3Cpath d='M1616 875 c-50 -18 -94 -60 -107 -105 -6 -22 -9 -152 -7 -351 l3%0A-316 27 -35 c56 -74 -91 -68 1741 -68 l1644 0 33 22 c44 30 69 66 80 114 14%0A57 12 570 -1 619 -14 51 -73 110 -124 124 -29 8 -504 11 -1645 11 -1337 -1%0A-1611 -3 -1644 -15z m3234 -435 l0 -260 -1585 0 -1585 0 0 260 0 260 1585 0%0A1585 0 0 -260z'/%3E%3C/g%3E%3C/svg%3E");
    --plus-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M2256 4784 c-723 -98 -1359 -548 -1691 -1195 -120 -234 -191 -462%0A-230 -734 -19 -130 -19 -448 -1 -585 89 -656 450 -1232 1001 -1593 201 -131%0A498 -256 731 -307 302 -66 668 -68 964 -5 659 138 1232 581 1535 1186 155 307%0A224 589 232 945 8 305 -22 518 -108 779 -48 143 -164 385 -246 510 -361 551%0A-937 912 -1593 1001 -132 17 -460 17 -594 -2z m569 -330 c711 -96 1320 -601%0A1549 -1286 65 -194 87 -327 93 -553 6 -228 -7 -351 -58 -544 -173 -656 -689%0A-1177 -1340 -1355 -173 -47 -324 -67 -510 -67 -352 0 -671 87 -972 265 -499%0A294 -838 801 -922 1377 -20 138 -20 400 0 538 118 806 722 1445 1521 1606 219%0A45 407 50 639 19z'/%3E%3Cpath d='M2472 3660 c-18 -11 -41 -34 -52 -52 -19 -32 -20 -52 -20 -460 l0%0A-428 -427 0 c-409 0 -429 -1 -461 -20 -48 -30 -72 -75 -72 -140 0 -65 24 -110%0A72 -140 32 -19 52 -20 461 -20 l427 0 0 -427 c0 -409 1 -429 20 -461 30 -48%0A75 -72 140 -72 65 0 110 24 140 72 19 32 20 52 20 461 l0 427 428 0 c408 0%0A428 1 460 20 48 30 72 75 72 140 0 65 -24 110 -72 140 -32 19 -52 20 -460 20%0Al-428 0 0 428 c0 408 -1 428 -20 460 -30 48 -75 72 -140 72 -37 0 -66 -6 -88%0A-20z'/%3E%3C/g%3E%3C/svg%3E");
    --edit-img: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M3767 4745 c-105 -20 -210 -62 -293 -118 -38 -25 -133 -110 -211%0A-189 -117 -118 -143 -150 -153 -186 -12 -46 -7 -90 16 -132 7 -14 232 -244%0A501 -512 541 -540 520 -523 623 -498 44 11 63 26 197 163 161 165 212 240 264%0A387 116 328 11 713 -249 910 -84 64 -246 144 -332 165 -95 23 -269 28 -363 10z%0Am325 -384 c214 -83 337 -337 270 -558 -23 -73 -80 -170 -128 -215 l-30 -28%0A-322 323 -323 323 53 50 c66 62 114 91 186 115 78 26 214 21 294 -10z'/%3E%3Cpath d='M2655 3821 c-51 -32 -2273 -2264 -2285 -2294 -6 -18 -10 -204 -10%0A-523 0 -423 2 -500 15 -531 21 -50 42 -72 90 -94 37 -17 76 -19 537 -19 321 0%0A507 4 525 10 32 12 2276 2250 2299 2292 18 35 18 122 -1 162 -20 42 -972 992%0A-1008 1005 -46 18 -128 13 -162 -8z m-267 -2078 l-1003 -1003 -322 0 -323 0 0%0A322 0 323 1002 1002 1003 1003 322 -322 323 -323 -1002 -1002z'/%3E%3C/g%3E%3C/svg%3E");
    --recycling-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M1928 4781 c-145 -47 -269 -174 -312 -320 -11 -37 -16 -95 -16 -178%0Al0 -123 -359 0 c-324 0 -365 -2 -420 -19 -85 -26 -137 -60 -204 -130 -149%0A-156 -174 -395 -62 -586 33 -58 133 -148 200 -180 30 -15 55 -28 55 -29 0 -43%0A284 -2532 291 -2556 49 -153 170 -275 319 -321 63 -19 94 -19 1165 -17 l1100%0A3 78 37 c132 63 228 178 261 314 8 32 77 618 152 1301 l138 1243 60 28 c95 45%0A168 119 218 219 40 81 43 91 46 188 3 76 0 118 -13 161 -43 152 -167 279 -316%0A325 -55 17 -96 19 -425 19 l-364 0 0 123 c0 83 -5 141 -16 178 -43 148 -168%0A274 -315 320 -57 18 -99 19 -632 18 -526 0 -577 -2 -629 -18z m1136 -311 c94%0A-21 127 -75 134 -211 l5 -99 -643 0 -643 0 5 99 c7 134 41 190 129 211 47 11%0A965 12 1013 0z m1166 -656 c107 -63 107 -205 0 -268 -35 -21 -39 -21 -1670%0A-21 -1631 0 -1635 0 -1670 21 -126 73 -99 250 43 284 17 5 759 7 1647 7 1610%0A-2 1615 -2 1650 -23z m-260 -636 c0 -27 -257 -2356 -266 -2406 -3 -18 -21 -51%0A-40 -72 -28 -30 -47 -41 -88 -50 -36 -7 -361 -10 -1051 -8 l-1000 3 -37 23%0Ac-71 44 -64 -4 -207 1297 -72 655 -131 1200 -131 1213 l0 22 1410 0 1410 0 0%0A-22z'/%3E%3Cpath d='M1992 2860 c-18 -11 -41 -34 -52 -52 -19 -32 -20 -52 -20 -808 0%0A-756 1 -776 20 -808 30 -48 75 -72 140 -72 65 0 110 24 140 72 19 32 20 52 20%0A808 0 756 -1 776 -20 808 -30 48 -75 72 -140 72 -37 0 -66 -6 -88 -20z'/%3E%3Cpath d='M2952 2860 c-18 -11 -41 -34 -52 -52 -19 -32 -20 -52 -20 -808 0%0A-756 1 -776 20 -808 30 -48 75 -72 140 -72 65 0 110 24 140 72 19 32 20 52 20%0A808 0 756 -1 776 -20 808 -30 48 -75 72 -140 72 -37 0 -66 -6 -88 -20z'/%3E%3C/g%3E%3C/svg%3E");
    --accept-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M4440 4213 c-8 -3 -582 -572 -1275 -1264 l-1260 -1259 -610 610%0Ac-486 486 -615 610 -635 610 -36 0 -383 -348 -378 -379 3 -20 1573 -1602 1610%0A-1622 9 -5 20 -9 25 -9 4 0 664 656 1465 1457 985 985 1458 1465 1458 1478 0%0A21 -357 386 -376 384 -5 0 -16 -3 -24 -6z'/%3E%3C/g%3E%3C/svg%3E");
    --download-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M988 5096 c-192 -68 -349 -227 -420 -426 l-23 -65 0 -2035 0 -2035%0A23 -65 c72 -201 231 -360 432 -432 l65 -23 1479 -3 c1651 -3 1527 -8 1686 69%0A69 34 101 58 170 128 89 89 130 154 172 271 l23 65 3 1585 c2 1532 2 1586 -17%0A1615 -10 17 -307 333 -660 703 l-642 672 -1112 0 -1112 0 -67 -24z m2094 -658%0Ac3 -365 7 -451 19 -488 64 -186 190 -313 369 -372 61 -20 90 -22 468 -26 l402%0A-4 0 -1467 c0 -1465 0 -1467 -21 -1529 -50 -147 -180 -257 -336 -282 -78 -13%0A-2748 -13 -2827 0 -126 20 -253 108 -307 211 -57 108 -53 -40 -57 2044 -1%0A1214 1 1943 7 1983 28 182 172 332 348 362 26 4 472 8 990 9 l942 1 3 -442z%0Am649 -171 c211 -222 395 -416 409 -431 l25 -27 -300 3 -300 3 -57 28 c-71 35%0A-120 88 -147 161 -20 53 -21 75 -21 361 0 168 2 305 4 305 2 0 177 -181 387%0A-403z'/%3E%3Cpath d='M2503 3410 c-60 -36 -58 -5 -63 -752 l-5 -686 -250 270 c-137 148%0A-262 276 -277 284 -36 19 -108 18 -136 -2 -47 -33 -67 -121 -39 -170 23 -41%0A756 -820 782 -832 37 -17 75 -15 112 6 18 9 201 198 407 420 405 436 402 430%0A377 513 -8 27 -23 46 -44 59 -34 21 -106 27 -136 10 -10 -5 -133 -132 -272%0A-282 l-254 -272 -5 685 c-5 651 -6 685 -24 712 -38 57 -114 73 -173 37z'/%3E%3Cpath d='M1516 1110 c-50 -16 -96 -73 -96 -120 0 -37 32 -91 64 -111 30 -18%0A71 -19 1085 -19 1030 0 1054 0 1085 20 77 47 81 152 9 207 l-36 28 -1041 2%0Ac-573 1 -1054 -2 -1070 -7z'/%3E%3C/g%3E%3C/svg%3E");
    --remove-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M1352 3820 c-47 -29 -72 -75 -72 -137 0 -28 5 -64 11 -80 5 -15 238%0A-256 517 -535 l507 -508 -507 -507 c-279 -280 -512 -521 -517 -536 -6 -16 -11%0A-51 -11 -79 0 -94 64 -158 158 -158 28 0 63 5 79 11 15 5 256 238 536 517%0Al507 507 508 -507 c279 -279 520 -512 535 -517 16 -6 51 -11 79 -11 94 0 158%0A64 158 158 0 28 -5 63 -11 79 -5 15 -238 256 -517 536 l-507 507 507 508 c279%0A279 512 520 517 535 16 41 13 123 -4 157 -25 48 -81 80 -142 80 -28 0 -64 -5%0A-80 -11 -15 -5 -256 -238 -535 -517 l-508 -507 -507 507 c-280 279 -521 512%0A-536 517 -47 18 -128 13 -165 -9z'/%3E%3C/g%3E%3C/svg%3E");
    --theme-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M2498 4671 c-13 -11 -67 -89 -119 -173 -59 -95 -115 -174 -150 -208%0A-94 -93 -211 -140 -350 -140 -89 0 -139 14 -319 87 -183 76 -192 78 -236 57%0A-61 -29 -65 -52 -50 -267 18 -265 1 -355 -90 -476 -88 -117 -164 -157 -418%0A-222 -217 -55 -236 -66 -236 -142 0 -40 8 -53 117 -182 64 -77 129 -160 145%0A-185 93 -146 93 -374 0 -520 -16 -25 -81 -108 -145 -185 -109 -129 -117 -142%0A-117 -182 0 -76 19 -87 235 -142 105 -27 213 -60 241 -74 123 -62 215 -169%0A255 -296 24 -75 26 -184 9 -389 -12 -146 -3 -179 54 -206 44 -21 53 -19 236%0A57 180 73 230 87 319 87 139 0 256 -47 350 -140 35 -34 91 -113 150 -208 52%0A-84 106 -162 119 -173 32 -25 92 -25 124 0 13 11 67 89 119 173 59 95 115 174%0A150 208 94 93 211 140 350 140 89 0 139 -14 319 -87 183 -76 192 -78 236 -57%0A57 27 66 60 54 206 -17 205 -15 314 9 389 40 127 132 234 255 296 28 14 136%0A47 241 74 216 55 235 66 235 142 0 40 -8 53 -117 182 -64 77 -129 160 -145%0A185 -93 146 -93 374 0 520 16 25 81 108 145 185 109 129 117 142 117 182 0 76%0A-19 87 -235 142 -105 27 -213 60 -241 74 -123 62 -215 169 -255 296 -24 75%0A-26 184 -9 389 12 146 3 179 -54 206 -44 21 -53 19 -236 -57 -180 -73 -230%0A-87 -319 -87 -139 0 -256 47 -350 140 -35 34 -91 113 -150 208 -52 84 -106%0A162 -119 173 -14 11 -40 19 -62 19 -22 0 -48 -8 -62 -19z m332 -860 c252 -57%0A446 -165 631 -350 188 -188 299 -392 355 -651 26 -119 26 -381 0 -500 -56%0A-259 -167 -463 -355 -651 -188 -188 -391 -299 -651 -355 -126 -27 -392 -25%0A-516 4 -262 62 -449 165 -635 351 -188 188 -299 392 -355 651 -26 119 -26 381%0A0 500 56 259 167 463 355 651 147 147 287 237 470 303 76 27 215 61 286 69 87%0A10 330 -3 415 -22z'/%3E%3Cpath d='M2435 3620 c-160 -21 -336 -86 -472 -177 -72 -48 -192 -160 -248%0A-233 -202 -264 -268 -598 -185 -925 26 -101 113 -280 178 -365 263 -346 707%0A-500 1124 -390 431 113 739 478 789 933 25 227 -42 489 -178 694 -78 118 -219%0A250 -348 324 -193 112 -448 166 -660 139z'/%3E%3C/g%3E%3C/svg%3E");
    --user-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M2305 5113 c-671 -72 -1279 -393 -1707 -903 -300 -357 -489 -767%0A-569 -1234 -31 -176 -38 -543 -14 -726 120 -942 730 -1729 1612 -2079 191 -76%0A441 -137 658 -161 116 -13 434 -13 550 0 572 64 1091 307 1503 705 426 410%0A692 944 767 1535 24 183 17 550 -14 726 -95 555 -351 1042 -747 1424 -386 372%0A-837 600 -1368 691 -97 17 -172 22 -376 24 -140 2 -273 1 -295 -2z m545 -187%0Ac289 -37 526 -109 785 -241 455 -230 820 -595 1050 -1050 177 -349 255 -679%0A255 -1075 0 -305 -44 -552 -146 -830 -49 -131 -151 -336 -228 -455 -54 -83%0A-66 -96 -72 -80 -177 501 -557 926 -1034 1156 -69 33 -133 65 -143 70 -13 7%0A-29 -1 -71 -35 -112 -91 -262 -165 -421 -209 -69 -18 -106 -21 -265 -21 -159%0A0 -196 3 -265 21 -159 44 -309 118 -421 209 -42 34 -58 42 -71 35 -10 -5 -74%0A-37 -143 -70 -477 -230 -857 -655 -1034 -1156 -16 -45 -221 322 -300 535 -102%0A278 -146 525 -146 830 0 396 78 726 255 1075 361 713 1051 1196 1850 1294 117%0A14 441 12 565 -3z'/%3E%3Cpath d='M2470 4139 c-423 -39 -776 -372 -841 -792 -16 -103 -6 -285 21 -382%0A12 -44 23 -87 24 -95 1 -8 9 -26 17 -40 9 -14 35 -60 59 -103 49 -88 153 -205%0A241 -273 325 -250 813 -250 1138 0 88 68 192 185 241 273 24 43 50 89 59 103%0A8 14 16 32 17 40 1 8 12 51 24 95 27 97 37 279 21 382 -24 158 -103 331 -208%0A459 -148 178 -393 311 -611 329 -37 3 -78 7 -92 9 -14 1 -63 -1 -110 -5z'/%3E%3C/g%3E%3C/svg%3E");
    --grid-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M1055 4146 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -298 -3 -624 3 -580%0A3 -592 24 -619 11 -15 33 -37 48 -48 27 -21 37 -21 646 -21 609 0 619 0 646%0A21 15 11 37 33 48 48 21 27 21 37 21 646 0 609 0 619 -21 646 -11 15 -33 37%0A-48 48 -27 21 -39 21 -634 23 -489 2 -613 0 -637 -11z'/%3E%3Cpath d='M2815 4146 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -298 -3 -624 3 -580%0A3 -592 24 -619 11 -15 33 -37 48 -48 27 -21 37 -21 646 -21 609 0 619 0 646%0A21 15 11 37 33 48 48 21 27 21 37 21 646 0 609 0 619 -21 646 -11 15 -33 37%0A-48 48 -27 21 -39 21 -634 23 -489 2 -613 0 -637 -11z'/%3E%3Cpath d='M1055 2386 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -298 -3 -624 3 -580%0A3 -592 24 -619 11 -15 33 -37 48 -48 27 -21 37 -21 646 -21 609 0 619 0 646%0A21 15 11 37 33 48 48 21 27 21 37 21 646 0 609 0 619 -21 646 -11 15 -33 37%0A-48 48 -27 21 -39 21 -634 23 -489 2 -613 0 -637 -11z'/%3E%3Cpath d='M2815 2386 c-41 -18 -83 -69 -90 -109 -3 -18 -5 -298 -3 -624 3 -580%0A3 -592 24 -619 11 -15 33 -37 48 -48 27 -21 37 -21 646 -21 609 0 619 0 646%0A21 15 11 37 33 48 48 21 27 21 37 21 646 0 609 0 619 -21 646 -11 15 -33 37%0A-48 48 -27 21 -39 21 -634 23 -489 2 -613 0 -637 -11z'/%3E%3C/g%3E%3C/svg%3E");
    --row-svg: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M1060 3944 c-53 -23 -108 -82 -126 -136 -12 -38 -15 -82 -12 -216 3%0A-162 4 -168 31 -215 15 -26 47 -60 69 -75 l42 -27 1501 0 1501 0 42 27 c22 15%0A54 49 69 75 27 46 28 54 31 203 5 191 -6 246 -56 303 -76 84 68 77 -1587 76%0A-1289 0 -1474 -2 -1505 -15z'/%3E%3Cpath d='M1091 2900 c-51 -12 -113 -61 -141 -110 -23 -42 -25 -56 -28 -209 -3%0A-113 0 -178 9 -210 17 -59 88 -132 145 -149 60 -18 2918 -18 2978 0 25 8 59%0A31 87 59 62 61 72 106 67 309 -3 127 -7 161 -22 190 -26 49 -55 78 -101 103%0Al-40 22 -1460 2 c-803 0 -1475 -3 -1494 -7z'/%3E%3Cpath d='M1060 1834 c-53 -23 -108 -82 -126 -136 -12 -38 -15 -82 -12 -216 3%0A-162 4 -168 31 -215 15 -26 47 -60 69 -75 l42 -27 1501 0 1501 0 42 27 c22 15%0A54 49 69 75 27 46 28 54 31 203 5 191 -6 246 -56 303 -76 84 68 77 -1587 76%0A-1289 0 -1474 -2 -1505 -15z'/%3E%3C/g%3E%3C/svg%3E");
    --notification-img: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='512pt' height='512pt' viewBox='0 0 512 512' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0,512) scale(0.1,-0.1)'%0Afill='%23d7e1e7' stroke='none'%3E%3Cpath d='M2418 4831 c-164 -53 -293 -194 -327 -359 -6 -29 -11 -119 -11 -200%0Al0 -147 -86 -39 c-294 -135 -554 -407 -673 -707 -67 -169 -78 -233 -137 -809%0A-30 -299 -56 -545 -57 -545 -1 -1 -32 -21 -70 -44 -312 -200 -359 -638 -96%0A-901 76 -76 189 -139 287 -159 32 -7 185 -11 386 -11 l333 0 7 -77 c14 -167%0A64 -281 171 -389 233 -234 597 -234 830 0 107 108 157 222 171 389 l7 77 336%0A0 c369 0 413 5 519 59 130 66 244 195 292 332 30 88 37 231 16 323 -33 140%0A-129 277 -249 355 -34 23 -65 42 -69 43 -4 2 -30 230 -58 508 -53 535 -66 624%0A-107 754 -107 341 -382 653 -707 802 l-86 39 0 147 c0 81 -5 171 -11 200 -35%0A167 -163 308 -326 358 -83 26 -206 26 -285 1z m222 -323 c65 -45 75 -68 78%0A-191 l4 -112 -162 0 -162 0 4 112 c2 94 6 116 24 140 35 48 82 73 134 73 32 0%0A57 -7 80 -22z m195 -653 c296 -89 514 -273 645 -547 69 -144 84 -228 144 -835%0A34 -340 61 -565 70 -586 22 -54 84 -116 147 -147 66 -34 112 -77 140 -132 65%0A-127 6 -293 -125 -354 l-51 -24 -1245 0 c-1231 0 -1246 1 -1290 21 -124 56%0A-186 189 -150 321 17 60 68 117 145 160 39 22 84 53 102 70 68 65 69 72 129%0A666 30 301 59 572 65 602 70 364 342 668 695 776 129 39 165 43 334 39 133 -3%0A168 -7 245 -30z m-8 -3012 c-12 -115 -91 -217 -190 -244 -64 -17 -158 -6 -212%0A25 -77 45 -135 150 -135 243 l0 33 271 0 272 0 -6 -57z'/%3E%3Cpath d='M1539 4491 c-427 -161 -732 -516 -818 -949 -11 -53 -22 -133 -26%0A-177 -5 -71 -4 -85 17 -125 42 -83 131 -113 214 -74 59 28 75 63 90 192 23%0A193 66 319 158 462 96 148 270 288 445 357 126 49 143 60 170 99 46 67 27 167%0A-40 215 -50 35 -118 35 -210 0z'/%3E%3Cpath d='M3388 4500 c-57 -30 -81 -79 -76 -151 4 -51 9 -64 38 -94 19 -20 55%0A-42 84 -51 216 -72 414 -225 525 -406 86 -139 126 -266 149 -475 11 -92 32%0A-131 86 -157 78 -37 167 -10 210 64 53 90 -3 408 -111 625 -146 293 -412 528%0A-721 639 -86 31 -134 32 -184 6z'/%3E%3C/g%3E%3C/svg%3E%0A");

    --scrollbar-color: #777c7e #374953;
    --thead-background-color: #1c2e2e;
    --thead-text-color:#d7e1e7;
    --thead-btn-color-hover:#152323;
    --background-color: #123b5b;
    --auth-btn-color:#0078d4;
    --auth-btn-color-hover:#016fc3;
    --dlg-border-color: #1a262d;
    --border-color:#3f515b;
    --border-btn-color-hover: #2d3f49;
    --text-color:#d7e1e7;
    --main-color: #374953;
    --main-color-hover: #263842;
    --small-btn-color-hover: #1c2e2e;
    --checkbox-color:#123b5b;
    --input-color: #3f515b;
    --input-color-hover: #36464f;
    --switch-circle-color:#d7e1e7;
    --switch-rail-color:#1c2e2e;
    --a-link-color:#0093ee;
    --a-visited-color:#0093ee;
    --a-hover-color:#00aeee;
    --a-active-color:#ff0000;
}
.preload * {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}
/*#region main*/
html{
    height: 98%;
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text-color);
    scrollbar-color:var(--scrollbar-color);
    scroll-behavior: smooth;
    transition: scrollbar-color var(--animation-speed);
}

thead th{
    font-size: clamp(0.6rem, 0.1rem + 1vw, 1rem);
    background-color: var(--thead-background-color);
    color: var(--thead-text-color);
    -webkit-transition: background-color var(--animation-speed), border-color var(--animation-speed), color var(--animation-speed);
    transition: background-color var(--animation-speed), border-color var(--animation-speed), color var(--animation-speed);
}
body{
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    -webkit-transition: background-color var(--animation-speed);
    transition: background-color var(--animation-speed);
}

input, textarea, select{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    border-radius: 5px;
    border: 1px solid var(--border-color);
}
input:focus, input:active, textarea:focus, textarea:active{
    outline: var(--border-btn-color-hover) solid 1px;
    border-color: var(--border-btn-color-hover);
}

input[type=checkbox]{
    accent-color: var(--checkbox-color);
    -webkit-transition: var(--animation-speed);
    transition: var(--animation-speed);
}
input[type=date],input[type=text],input[type=email], select, textarea{
    background: var(--input-color);
    color: var(--text-color);
    -webkit-transition:var(--animation-speed);
    transition:var(--animation-speed);
}
input[type=date]:hover,input[type=text]:hover,input[type=email]:hover, select:hover, textarea:hover{
    background: var(--input-color-hover);
}
input[type=email]:invalid{
    border: 1px solid var(--a-active-color);
}
button{
    border-color: var(--border-color);
    background-color: var(--main-color);
    color: var(--text-color);
    -webkit-transition:border-color var(--animation-speed), background-color var(--animation-speed), color var(--animation-speed);
    transition:border-color var(--animation-speed), background-color var(--animation-speed), color var(--animation-speed);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
p{
    color: var(--text-color);
    -webkit-transition: color var(--animation-speed);
    transition: color var(--animation-speed);
}
label{
    color: var(--text-color);
    -webkit-transition: color var(--animation-speed);
    transition: color var(--animation-speed);
}
a{
    cursor: pointer;
}
a:link{
    color: var(--a-link-color);
    -webkit-transition: color var(--animation-speed);
    transition: color var(--animation-speed);
}
a:visited{
    color: var(--a-visited-color);
    -webkit-transition: color var(--animation-speed);
    transition: color var(--animation-speed);
}
a:active{
    color: var(--a-active-color);
    -webkit-transition: color var(--animation-speed);
    transition: color var(--animation-speed);
}
a:hover{
    color: var(--a-hover-color);
    -webkit-transition: color var(--animation-speed);
    transition: color var(--animation-speed);
}
main{
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow:auto;
    scrollbar-gutter: auto;
    position: absolute;
    top: 3.2rem;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
}
footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
}
div.content{
    background-color: var(--main-color);
    -webkit-transition: background-color var(--animation-speed), border-color var(--animation-speed), color var(--animation-speed);
    transition: background-color var(--animation-speed), border-color var(--animation-speed), color var(--animation-speed);
}
/*#endregion*/

/*#region line-grid */
[data-positioning="row"] [class='grid-container']{
    grid-template-columns: 100%;
}
[data-positioning="row"] [class='addButton grid-item']{
    max-height: var(--cus-card-row-height);
    font-size: 1.5rem;
    width: 100%;
}
[data-positioning="row"] [id='addAgreement']{
    max-height: calc(var(--agr-card-row-height) + 4.8px);
    font-size: 1.5rem;
}

[data-positioning="row"] [class='agreementCard card grid-item']{
    height: var(--agr-card-row-height);
    align-content: center;
} 
[data-positioning="row"] [class='grid-agreement-container']{
    margin: 0;
    grid-template-columns: auto 43px 24px 24px;
    grid-template-rows: 30px 27px 27px 27px;
    height: 100%;
}
[data-positioning="row"] [class='divAgrNumber']{
    height: var(--default-input-height);
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: 2;
    margin: 3px 0 0px 3px;
}
[data-positioning="row"] [class='divAgrName']{
    height: var(--default-input-height);
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    margin: 0 0 3px 3px;
}
[data-positioning="row"] [class='divAgrResp']{
    height: var(--default-input-height);
    grid-row-start: 3;
    grid-column-start: 1;
    grid-column-end: 2;
    margin: 2px 0 3px 3px;
}
[data-positioning="row"] [class='agr-resp']{
    width: 96%;
}
[data-positioning="row"] [class='divAgrLink']{
    height: var(--default-input-height);
    grid-row-start: 4;
    grid-column-start: 1;
    grid-column-end: 2;
    margin: 3px 0 3px 3px;
}
[data-positioning="row"] [class='grid-agreement-container'] [type='button']{
    grid-row-start: 1;
    vertical-align: middle;
}
[data-positioning="row"] [class='agr-relevance']{
    grid-column-start: 2;
    vertical-align: middle;
}
[data-positioning="row"] [class='agreementName']{
    height: 71%;
}

[data-positioning="row"] [class='customerCard card grid-item'], 
[data-positioning="row"] [class='specialistCard card grid-item']{
    height: var(--cus-card-row-height);
    align-content: center;
}
[data-positioning="row"] [class ='grid-block-container']{
    grid-template-columns: auto 24px 24px;
    grid-template-rows: auto;
}
[data-positioning="row"] [class ='grid-block-container'] *{
    grid-row-start: 1;
}
[data-positioning="row"] [class ='div-text']{
    display: flex;
    margin-left: 5px;
    padding: 0;
    width: calc(100% - 58px);
}
/*#endregion */

/*#region table*/

table {
    width: 99.4%;
    margin: 0.3% 0.3% 0 0.3%;
    border-spacing: 0;
    --b: 1px solid var(--border-color);
    --br: 10px;
    -webkit-transition: background-color var(--animation-speed), border-color var(--animation-speed), color var(--animation-speed);
    transition: background-color var(--animation-speed), border-color var(--animation-speed), color var(--animation-speed);
}
table [type=date], table input[type=text], table select, table textarea{
    font-size: clamp(0.5rem, 0.3rem + 1vw, 0.9rem);
}
tbody:not(:last-child)::after { /* Добавляем отступ после tbody */
    content: "";
    display: block;
    height: 10px;
}
td, th {
    user-select: none;
    background-color: var(--main-color);
    border: var(--b);
    padding: 4px;
    -webkit-transition: background-color var(--animation-speed), border-color var(--animation-speed);
    transition: background-color var(--animation-speed), border-color var(--animation-speed);
}
.stage-column{
    border-bottom-left-radius: var(--br); /* Левый нижний угол */
}
tbody:first-of-type tr:first-child td:first-child{ /* Убираем скругление у верхних ячеек первого tbody */
    border-top-left-radius: 0px;
}
tbody:first-of-type tr:first-child td:last-child{ /* Убираем скругление у верхних ячеек первого tbody */
    border-top-right-radius: 0px;
}
tr:first-child th:first-child {
    border-top-left-radius: var(--br); /* Левый верхний угол у thead*/
}
tr:first-child th:last-child {
    border-top-right-radius: var(--br); /* Правый верхний угол у thead*/
}
tr:last-child td:last-child {
    border-bottom-right-radius: var(--br); /* Правый нижний угол */
}
tr:first-child td:first-child{
    border-top-left-radius: var(--br); /* Левый верхний угол */
}
tr:first-child td:last-child{
    border-top-right-radius: var(--br); /* Правый верхний угол */
}
#specialistTasksTable tr:first-child td:first-child{
    border-bottom-left-radius: 0px;
    border-bottom-width: 0px;
}
#specialistTasksTable tr:last-child td:last-child{
    border-bottom-right-radius: 0px;
}
#specialistTasksTable tr:last-child td:first-child{
    border-bottom-width: 1px;
}
#responsiblePersonTable tr:first-child td:first-child{
    border-bottom-left-radius: 0px;
    border-bottom-width: 0px;
}
#responsiblePersonTable tr:last-child td:last-child{
    border-bottom-right-radius: 0px;
}
#responsiblePersonTable tr:last-child td:first-child{
    border-bottom-width: 1px;
}
/*#endregion */
   
/*#region toolbar*/
.tbar{
    font-size: clamp(0.7rem, 2.0vw, 1rem);
    width: 100%;
    height: 52px;
    position: fixed;
    background-color:var(--main-color);
    border-bottom: 1px solid var(--border-color);
    margin: 0;
    z-index: 2;
    user-select: none;
    -webkit-transition: background-color var(--animation-speed), border-bottom var(--animation-speed);
    transition: background-color var(--animation-speed), border-bottom var(--animation-speed);
}
.tbar a{
    border-radius: 2rem;
    color: var(--text-color);
    display: inline-block;
    margin:0.5em 0 0.5em 0.5em;
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-decoration: none;
    font-family: Verdana;
    -webkit-transition: background-color var(--animation-speed), color var(--animation-speed);
    transition: background-color var(--animation-speed), color var(--animation-speed);
}
.tbar a:hover{
    background-color: var(--main-color-hover);
}

.grid-to-row {
    position: relative;
    display: inline-block;
    width: var(--switch-size);
    height: var(--switch-size);
    margin-right: 0.5rem;
}
.grid-to-row input{
    display:none;
}
input:focus + .gridToRowIcon {
    box-shadow: 0 0 1px #ffffff;
}
input:checked + .gridToRowIcon {
    background: var(--grid-svg) no-repeat;
    background-size: var(--switch-size);
  }
.gridToRowIcon {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--row-svg) no-repeat;
    background-size: var(--switch-size);
    border-radius: 50%;
    -webkit-transition: var(--animation-speed);
    transition: var(--animation-speed);
}
.gridToRowIcon:hover {
    background-color: var(--main-color-hover);
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: var(--switch-size);
    height: var(--switch-size);
    margin-right: 0.5rem;
}
.theme-switch input {
    display:none;
}
input:focus + .themeIcon {
    box-shadow: 0 0 1px #ffffff;
}
.themeIcon {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--theme-svg) no-repeat;
    background-size: var(--switch-size);
    border-radius: 50%;
    -webkit-transition: var(--animation-speed);
    transition: var(--animation-speed);
}
.themeIcon:hover {
    background-color: var(--main-color-hover);
}

.auth-btn{
    vertical-align: middle;
    background-image: var(--user-svg);
    background-size: 1.7rem;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    border-width: 0;
    height: var(--switch-size);
    width: var(--switch-size);
    margin:0 0.5rem 0 0;
    padding: 0;
}
.auth-btn:hover{
    cursor: pointer;
    background-color: var(--main-color-hover);
}
  
.dropdown {
    position: relative;
    display: inline-block;
    height: var(--switch-size);
    margin: 0;
    padding: 0;
}
/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--main-color);
    border: 1px, solid, var(--border-color);
    border-top-width: 0;
    margin-top:0.6em;
    padding: 0.5em 0.5em 0.5em 0;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 0;
    -webkit-transition: background-color var(--animation-speed), border-color var(--animation-speed);
    transition: background-color var(--animation-speed), border-color var(--animation-speed);
}
.dropdown-content a {
    color: var(--text-color);
    padding: 0.5em 0.5em 0.5em 1em;
    margin:0 0.5em 0 0.5em;
    text-decoration: none;
    display: block;
    -webkit-transition: background-color var(--animation-speed), margin-left var(--animation-speed);
    transition: background-color var(--animation-speed), margin-left var(--animation-speed);
}
.dropdown-content a:hover {
    margin-left: 1em;
}
/* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
.show {
    display:block;
} 
/*#endregion */

/*#region Registration и ChangePass*/

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  background-color: var(--main-color);
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 5px;
  -webkit-transition: background-color var(--animation-speed);
  transition: background-color var(--animation-speed);
}
.form input {
  color: var(--text-color);
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: var(--main-color-hover);
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: var(--normal-font-size);
  -webkit-transition: background-color var(--animation-speed);
  transition: background-color var(--animation-speed);
}
input:-webkit-autofill, input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:active{
    box-shadow: inset 20px 20px 0px 30px var(--main-color-hover);
    -webkit-text-fill-color: var(--text-color) !important;
  }
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: var(--auth-btn-color);
  width: 100%;
  border: 0;
  padding: 15px;
  border-radius: 5px;
  color: #d7e1e7;
  font-size: var(--normal-font-size);
  -webkit-transition: background var(--animation-speed);
  transition: background var(--animation-speed);
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: var(--auth-btn-color-hover);
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: var(--tiny-font-size);
}
.form .message a {
  color: var(--auth-btn-color-hover);
  text-decoration: none;
}
.form .register-form, .form .password-recovery-form{
  display:none;
}
.loginErrorMessage, .registrationErrorMessage, .passwordRecoveryErrorMessage, .changePassErrorMessage{
    margin-top: -2px;
    font-size: var(--normal-font-size);
    color: #EF3B3A;
}
.loginErrorMessage:empty, .registrationErrorMessage:empty, .passwordRecoveryErrorMessage:empty, .changePassErrorMessage:empty{
    display: hide;
}
/*#endregion */

/*#region Главная страница*/
.bg {
    animation:slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, var(--thead-background-color) 50%, var(--background-color) 50%);
    bottom:0;
    left:-50%;
    opacity:.5;
    position:fixed;
    right:-50%;
    top:0;
    z-index:-1;
  } 
  .bg2 {
    animation-direction:alternate-reverse;
    animation-duration:4s;
  }
  .bg3 {
    animation-duration:5s;
  }
  @keyframes slide {
    0% {
      transform:translateX(-25%);
    }
    100% {
      transform:translateX(25%);
    }
  }
  .content {
    background-color:rgba(255,255,255,.8);
    border-radius:.25em;
    box-shadow:0 0 .25em rgba(0,0,0,.25);
    box-sizing:border-box;
    left:50%;
    padding:10vmin;
    position:fixed;
    text-align:center;
    top:50%;
    transform:translate(-50%, -50%);
  }
/*#endregion */

/*#region Customers/Specialists*/
.customerCard, .specialistCard, #addCustomer{
    height: var(--cus-card-grid-height);
}
#addCustomer, #addSpecialist{
    height: calc(var(--cus-card-grid-height) + 4.8px);
}
.grid-block-container{
    width: 100%;
    display: grid;
    grid-template-columns: auto 24px 24px;
    grid-template-rows: 24px 24px 24px;
}
.div-text{
    padding: 0 5px 0 5px;
    grid-row: 2/3;
    grid-column-start: 1;
    grid-column-end: 4;
    overflow:hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
}
.div-email{
    padding: 0 5px 0 5px;
    grid-row: 3/3;
    grid-column-start: 1;
    grid-column-end: 4;
    overflow:hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
}
.customerName, .specialistName, .specialistEmail{
    font-size: var(--large-font-size);
    width: calc(100% - 6px);
    align-self:center;
}
.customerText, .specialistText{
    width: 95%;
    vertical-align: middle;
    user-select: none;
}
.cus-edit, .spe-edit{
    grid-column: 2/3;
}
.cus-remove, .spe-remove{
    grid-column: 3/3;
}
.cusBtn{
    width: 100%;
    background-color:var(--main-color);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    display: inline-block;
    text-decoration: none;
    font-family: Verdana;
    -webkit-transition: background-color var(--animation-speed), color var(--animation-speed);
    transition: background-color var(--animation-speed), color var(--animation-speed);
}
.cusBtn a{
    border-radius: 2rem;
    color: var(--text-color);
    display: inline-block;
    margin:0.5em 0 0.5em 0.5em;
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-decoration: none;
    font-family: Verdana;
    -webkit-transition: background-color var(--animation-speed), color var(--animation-speed);
    transition: background-color var(--animation-speed), color var(--animation-speed);
}
.cusBtn a:hover{
    background-color: var(--main-color-hover);
}
/*#endregion */

/*#region Agreements*/
.agr-nav{
    font-size: clamp(0.7rem, 0.6rem + 1vw, 1rem);
    width: 100%;
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    user-select: none;
    position: fixed;
}
.relevanceButton{
    border-color: var(--border-color);
    background-color: var(--main-color);
    color: var(--text-color);
    position: relative;
    display: inline-block;
    border-radius: 0px;
    border-style: solid;
    border-width: 0;
    font-size: var(--largess-font-size);
    height: 2rem;
    width: 100%;
    text-align: center;
    align-content: center;
    align-self: center;
    -webkit-transition:var(--animation-speed);
    transition:var(--animation-speed);
}
.rel-btn-checked{
    background-color: var(--main-color-hover);
}
.relevanceButton input{
    display:none;
}
.relevanceButton:hover{
    background-color: var(--border-btn-color-hover);
}

.agr-div{
    user-select: none;
    margin: 2.25rem 5px 0 5px;
    border-radius: 5px;
    text-align: center;
    font-size: clamp(0.7rem, 0.6rem + 1vw, 1rem);
    font-family: Verdana;
    font-weight: bolder;
}

.agreementCard{
    height: var(--agr-card-grid-height);
}
#addAgreement{
    height: calc(var(--agr-card-grid-height) + 4.8px);
}
.grid-agreement-container{
    width: 100%;
    display: grid;
    grid-template-columns: auto 43px 24px 24px;
    grid-template-rows: 24px 24px 84px 26px 26px;
}
.agreement-a{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-all;
}
.divAgrNumber{
    width: 100%;
    margin: 0 0 0 3px;
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: 5;
    overflow:hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
}
.agreementNumber{
    font-size: var(--large-font-size);
    width: 96%;
    align-self:center;
}
.agreementNumberText{
    width: 95%;
    user-select: none;
}
.divAgrName{
    width: 100%;
    margin: 1px 0 0 3px;
    grid-row: 3/3;
    grid-column-start: 1;
    grid-column-end: 5;
    overflow:hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
}
.agreementName{
    height: 77px;
    font-size: var(--large-font-size);
    width: 96%;
    resize: none;
    overflow:auto;
    scrollbar-width:thin;
}
.agreementNameText{
    margin-right: 2%;
    width: 95%;
    user-select: none;
}
.agreementTitle{
    width: 96px;
}
.divAgrResp{
    width: 100%;
    margin: 3px 0 0 3px;
    grid-row: 4;
    grid-column-start: 1;
    grid-column-end: 5;
    overflow:hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    display: grid;
    grid-template-columns: 96px auto;
}
.agr-resp{
    width: 96.1%;
    height: var(--default-input-height);
}
.agreementNameRespText{
    width: 95%;
    user-select: none;
}
.divAgrLink{
    width: 100%;
    margin: 3px 0 0 3px;
    grid-row: 5;
    grid-column-start: 1;
    grid-column-end: 5;
    overflow:hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
}
.agreementLink{
    font-size: var(--large-font-size);
    width: 96%;
    align-self:center;
}
.agreementLinkText{
    width: 95%;
    vertical-align: middle;
    user-select: none;
}
.agr-relevance{   
    margin: 0 5px 0 3%;
    grid-row-start: 1;
    grid-column-start: 2;
    grid-column-end: 3;
    user-select: none;
    border-radius: 5px;
    height: var(--small-btn-size);
    align-self: center;
    font-size: var(--normal-font-size);
}
.agr-relevance:hover{
    background-color: var(--small-btn-color-hover);
    cursor: pointer;
}
.agr-edit{   
    grid-row-start: 1;
    grid-column-start: 3;
    align-self: center;
}
.agr-remove{
    grid-row-start: 1;
    grid-column-start: 4;
    align-self: center;
}
/*#endregion */

/*#region Stages*/
.drop-zone-hover{
    background-color: var(--main-color-hover);
}
#table div{
    font-size: clamp(0.5rem, 0.2rem + 1vw, 1rem);
}
#table .small-btn{
    height: clamp(calc(var(--small-btn-size) - 0.3rem) + 1px, 2vw, var(--small-btn-size));
    width: clamp(calc(var(--small-btn-size) - 0.3rem) + 1px, 2vw, var(--small-btn-size));
}
#table .edit-img, #table .remove-img, #table .accept-img, #table .recycling-img{
    background-size: clamp(calc(var(--small-btn-size) - 0.3rem), 2vw, var(--small-btn-size));
    background-position: center;
    background-repeat: no-repeat;
}
.textField{
    width: calc(100% - 5px);
}
.description{
    min-height: 5rem;
    width: 100%;
    resize: none;
    overflow:auto;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    scrollbar-width:thin;
}
.stage-column{
    width: 15%;
    max-width: 12em;
    min-width: 4rem;
}
.task-column{
    width: 20%;
    max-width: 30rem;
    min-width: 4rem;
}
.task-text{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow-wrap:anywhere;
}
.checkbox-column, .date-column, .responsible-column{
    width: 0.1%;
}
.responsible-column select{
    width: 100%;
}
.description-column{
    width: 35%;
}
.fileName{
    width: 14em;
    margin: 0.2em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.file-btn{
    margin-left: 1%;
}
.options-stage-btn{
    float:right;
    height: clamp(calc(var(--small-btn-size) - 0.3rem) + 1px, 2vw, var(--small-btn-size));
    width: clamp(calc(var(--small-btn-size) - 0.3rem) + 1px, 2vw, var(--small-btn-size));
    padding: 0;
    -webkit-transition: var(--animation-speed);
    transition: var(--animation-speed);
}
.options-stage-btn:hover{
    background-color: var(--thead-btn-color-hover);
    cursor: pointer;
}
.stg-div{
    user-select: none;
    margin: 5px 5px 0 5px;
    border-radius: 5px;
    text-align: center;
    font-size: clamp(0.7rem, 0.6rem + 1vw, 1rem);
    font-family: Verdana;
    font-weight: bolder;
}
.stage-link{
    width: 20px;
    height: 20px;
}
.expired{
    animation: borderBlink 0.5s linear infinite alternate;
}
@keyframes borderBlink{
    to{ border-color: rgba(255, 0, 0, 0.5);
        background-color: rgba(255, 0, 0, 0.1);}
}
/*#endregion */

/*#region SpecialistTasks*/
#specialistTasksTable{
    margin-top: 2.3rem;
}
#specialistTasksTable div{
    font-size: clamp(0.7rem, 0.2rem + 1vw, 1rem);
}
.spe-nav{
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    user-select: none;
    position: fixed;
    z-index: 1;
}
.spe-relevance{
    user-select: none;
    border-radius: 5px;
    height: var(--small-btn-size);
    width: 38px;
    height: 20px;
    font-size: var(--normal-font-size);
}
.spe-relevance:hover{
    background-color: var(--small-btn-color-hover);
    cursor: pointer;
}
.taskRow{
    width: 100%;
}
.add-specialist-task-btn{
    height: 32px;
    width: 99.4%;
    margin: 0 0.3% 0 0.3%;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-width: 1px;
    border-color: var(--border-color);
}
.add-specialist-task-btn:hover{
    border-color: var(--text-color);
}

.spe-task-text{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: pre-wrap;
    overflow-wrap:anywhere;
}
.spe-textField{
    width: calc(100% - 5px);
}
.spe-task-column{
    width: 30%;
    max-width: 30em;
}
.spe-date-column{
    width: 0.01%;
}
.spe-description-column{
    width: 50%;
}
.grid-spe-task-container [class='small-btn row-btn accept-img']{
    margin: 22% 0 22% 0;
}
.spe-div{
    user-select: none;
    margin: 2.5rem 5px -1.8rem 5px;
    border-radius: 5px;
    text-align: center;
    font-size: clamp(0.7rem, 0.6rem + 1vw, 1rem);
    font-family: Verdana;
    font-weight: bolder;
}
/*#endregion */

/*#region общие настройки*/
.card{
    border-radius: 10px;
    border-style: solid;
    border-color: var(--border-color);
    background-color: var(--main-color);
    -webkit-transition: all var(--animation-speed);
    transition: all var(--animation-speed);
}
.addButton{
    border-radius: 10px;
    border-style:dashed;
    border-color: rgba(215, 225, 231, 0.9);
    background-color: transparent;
    color: rgba(215, 225, 231, 0.9);
    font-size: calc(var(--cus-card-grid-height) / 2);
    -webkit-transition: background-color var(--animation-speed), border-color var(--animation-speed), color var(--animation-speed), font-size var(--animation-speed);
    transition: background-color var(--animation-speed), border-color var(--animation-speed), color var(--animation-speed), font-size var(--animation-speed);
}
.addButton:hover{
    border-style: solid;
    border-color: var(--border-btn-color-hover);
    background-color: var(--main-color-hover);
    color: var(--text-color);
    box-shadow: 0 0 .25em rgba(0,0,0,.25);
    cursor: pointer;
}

.card:hover, .add-specialist-task-btn:hover{
    background-color: var(--main-color-hover);
    border-color: var(--border-btn-color-hover);
    box-shadow: 0 0 .25em rgba(0,0,0,.25);
    cursor: pointer;
}
.row-btn{
    float: right;
}
.small-btn{
    user-select: none;
    border-radius: 25%;
    height: var(--small-btn-size);
    width: var(--small-btn-size);
}
.small-btn:hover{
    background-color: var(--small-btn-color-hover);
    cursor: pointer;
}
.task-container{
    position: relative;
    min-height: 5rem;
    align-content: center;
}
.task-btns{
    display: flex;
    gap: 5px;
    position: absolute;
    right: 0;
    top: 0;
}
.ID-column{
    width: 30px;
    text-align: center;
}
/*#endregion */

/*#region анимации*/
/* Добавить анимацию загрузки страницы */
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid var(--auth-btn-color);
    width: 75px;
    height: 75px;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Добавить анимацию плавного появления страницы */
  .animate-appearance {
    position:relative;
    -webkit-animation-name: animateappearance;
    -webkit-animation-duration: 0.3s;
    animation-name: animateappearance;
    animation-duration: 0.3s
  }
  
  @-webkit-keyframes animateappearance {
    from { opacity:0 } 
    to { opacity:1 }
  }
  
  @keyframes animateappearance { 
    from{ opacity:0 } 
    to{ opacity:1 }
  }
  
  #myDiv {
    display: none;
    Margin-top: 0.05rem;
  }
/*#endregion */

/*#region flex настройки*/
.flex-container {
    display: flex;
}
.row {
    flex-direction: row;
}
.row-reverse {
    flex-direction: row-reverse;
}
.column {
    flex-direction: column;
}
.column-reverse {
    flex-direction: column-reverse;
}
.flex-end{
    justify-content: flex-end;
}
.center{
    justify-content: center;
}
.align-items-center{
    align-items: center;
}
.space-between{
    justify-content: space-between;
}
.space-around{
    justify-content: space-around;
}
.text-align-center{
    text-align:center;   
}
.text-align-right{
    text-align:right;   
}
.text-align-left{
    text-align:left;   
}
/*#endregion */

/*#region общие grid настройки*/
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin: 7px 5px 5px 5px;
    gap: 5px;
    justify-content: center;
}
.grid-item {
    align-self: center;
}
.grid-spe-task-container{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: auto 43px;
    align-items: center;
}
.grid-task-container{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: auto 65px;
    align-items: center;
}
.grid-task-item{
    box-sizing: border-box;
    align-self: center;
}
.grid-two-column-auto-20px{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: auto 20px;
    align-items: center;
}
.grid-two-column-50per-50per{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 1%;
    align-items: center;
}
/*#endregion */

/*#region Настройки dialog окна*/

.dlg-win{
    width: clamp(30vw, 400px, 50vw);
    background-color: var(--main-color);
    padding-top: 0;
    padding-bottom: 0;
    border-width: 2px;
    border-color: var(--dlg-border-color);
    border-radius: 10px;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    user-select: none;
}

.dialog-title {
    text-align: center;
    color: var(--text-color);
}

.tasks-btns button{
    background-color: var(--main-color);
    border-radius: 5px;
    border-width: 1px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.dlg-btns{
    text-align: center;
}
.dlg-btns button{
    width: 98%;
    font-size: clamp(1rem, 0.1rem + 1vw, 1rem);
    height: 1.8rem;
    border-radius: 5px;
    border-width: 1px;
    border-color: var(--dlg-border-color);
}
.dlg-btns button:hover{
    background-color: var(--main-color-hover);
}
  
.elements-list {
    background-color:var(--main-color) ;
    border-style: solid;
    border-width: 1px;
    border-color: var(--dlg-border-color);
    border-radius: 5px;
    text-align: left;
    margin: 0px 0 0 0;
    padding: 0;
    max-height: 50vh;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}
.elements-list:empty {
    visibility: hidden;
}
.dlg-task-text{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: max-content;
}
.elements-item {
    transition: background-color var(--animation-speed);
    margin: 1px;
    padding: 5px;
    border: 1px solid var(--dlg-border-color);
    border-radius: 5px;
    text-align: left;
    cursor:grab;
}
.elements-item div {
    user-select: none;
}

.elements-item input{
    vertical-align: middle;
}

.elements-item:active{
    cursor:grabbing;
}
  
.selected {
    opacity: 0.6;
}

.add-item{
    border-width: 0px;
    text-align: left;
    margin: 0;
    padding: 0;
    margin-top: 15px;
}

.add-item p{
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    border-radius: 5px;
}

.add-item button{
    font-size: clamp(0.94rem, 0.01rem + 0.5vw, 0.95rem);
    height: 1.8rem;
    text-align: center;
    width: 100%;
    border-radius: 5px;
    border-color: var(--dlg-border-color);
    border-width: 1px;
}

.add-item button:hover{
    background-color: var(--main-color-hover);
}

.dialog-notification-input{
    width: 98%;
}

.email-selector{
    width: 98%;
    height: 1.8rem;
}
.add-email-btns{
    width: 98%;
    height: 1.8rem;
    font-size: clamp(1rem, 0.1rem + 1vw, 1rem);
    border-radius: 5px;
    border-width: 1px;
    border-color: var(--dlg-border-color);
}
.add-email-btns:hover{
    background-color: var(--main-color-hover);
}

/*#endregion */
  
/*#region img */
.stage-options-img, .plus-img, .edit-img, .notification-img, .accept-img, .recycling-img, .download-img, .remove-img, .link-img{
    border: 0;
    align-self: center;
}
.stage-options-img{
    background: var(--options-svg);
    background-size: clamp(calc(var(--small-btn-size) - 0.3rem), 2vw, var(--small-btn-size));
    background-position: center;
    background-repeat: no-repeat;
}
.plus-img{
    background: var(--plus-svg);
    background-size: clamp(calc(var(--small-btn-size) - 0.3rem), 2vw, var(--small-btn-size));
    background-position: center;
    background-repeat: no-repeat;
}
.edit-img{
    background: var(--edit-img);
    background-size: var(--small-btn-size);
}
.notification-img{
    background: var(--notification-img);
    background-size: var(--small-btn-size);
}
.icon-img{
    background: var(--edit-img);
    background-size: var(--small-btn-size);
}
.accept-img{
    background: var(--accept-svg);
    background-size: var(--small-btn-size);
}
.recycling-img{
    background: var(--recycling-svg);
    background-size: var(--small-btn-size);
}
.download-img{
    background: var(--download-svg);
    background-size: clamp(calc(var(--small-btn-size) - 0.3rem), 2vw, var(--small-btn-size));
    background-position: center;
    background-repeat: no-repeat;
}
.remove-img{
    background: var(--remove-svg);
    background-size: var(--small-btn-size);
}
.link-img{
    background: var(--link-svg);
    background-size: clamp(calc(var(--small-btn-size) - 0.3rem), 2vw, var(--small-btn-size));
    background-position: center;
    background-repeat: no-repeat;
}
/*#endregion */