.svg .pencil {
    width: 64px;
    height: 64px;
    background: url("data:image/svg+xml;charset=utf8,<svg version='1.0' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 64 64' enable-background='new 0 0 64 64' xml:space='preserve' fill='%23000000'><g id='SVGRepo_bgCarrier' stroke-width='0'></g><g id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'></g><g id='SVGRepo_iconCarrier'> <g> <path fill='%23F9EBB2' d='M3.001,61.999c-0.553,0-1.001-0.446-1-0.999l0.001-13.141L16.143,62L3.001,61.999z'></path> <path fill='%23F76D57' d='M61.414,16.729l-4.259,4.259L43.013,6.845l4.258-4.257c0.782-0.782,2.049-0.782,2.829-0.002L61.414,13.9 C62.195,14.682,62.194,15.947,61.414,16.729z'></path> <g> <rect x='37.256' y='14.744' transform='matrix(0.7071 0.7071 -0.7071 0.7071 25.6812 -28.5106)' fill='%23F9EBB2' width='20.001' height='4'></rect> </g> <g> <rect x='-1.848' y='28.74' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -15.6016 24.8148)' fill='%2345AAB8' width='48.002' height='5.001'></rect> <rect x='8.76' y='39.348' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -19.9956 35.4215)' fill='%2345AAB8' width='48' height='4.999'></rect> <rect x='3.456' y='33.544' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -17.7985 30.1183)' fill='%2345AAB8' width='48.001' height='5.999'></rect> </g> <rect x='-1.847' y='28.74' transform='matrix(-0.7071 0.7071 -0.7071 -0.7071 59.9084 37.6651)' opacity='0.2' fill='%23231F20' width='48.001' height='5'></rect> <rect x='30.26' y='17.847' transform='matrix(0.7071 0.7071 -0.7071 0.7071 39.1859 -10.9078)' opacity='0.2' fill='%23231F20' width='4.999' height='48'></rect> <path fill='%23394240' d='M62.828,12.486L51.514,1.172c-1.562-1.562-4.093-1.562-5.657,0.001c0,0-44.646,44.646-45.255,45.255 C-0.006,47.035,0,48,0,48l0.001,13.999c0,1.105,0.896,2,1.999,2.001h14c0,0,0.963,0.008,1.572-0.602s45.256-45.257,45.256-45.257 C64.392,16.579,64.392,14.05,62.828,12.486z M2.001,61v-1.583l2.582,2.582H3.001C2.448,61.999,2,61.553,2.001,61z M7.411,62 l-5.41-5.41l0.001-8.73L16.143,62H7.411z M52.912,25.23L38.771,11.088l-1.414,1.414l3.535,3.535L6.951,49.979l1.414,1.414 l33.94-33.941l4.243,4.243l-33.941,33.94l1.414,1.415l33.941-33.94l3.535,3.535L17.557,60.586L3.414,46.443L41.599,8.259 l14.143,14.143L52.912,25.23z M61.414,16.729l-4.259,4.259L43.013,6.845l4.258-4.257c0.782-0.782,2.049-0.782,2.829-0.002 L61.414,13.9C62.195,14.682,62.194,15.947,61.414,16.729z'></path> </g> </g></svg>")
        no-repeat center;
    background-size: contain;
}
.red-eye {
    width: 32px;
    height: 32px;
    background: url("data:image/svg+xml;charset=utf8,<svg version='1.1' id='Uploaded to svgrepo.com' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 32 32' xml:space='preserve' fill='%23000000'><g id='SVGRepo_bgCarrier' stroke-width='0'></g><g id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'></g><g id='SVGRepo_iconCarrier'><style type='text/css'> .duotone_twee{fill:%23ff0f77;} .duotone_een{fill:%230B1719;} </style> <g> <circle class='duotone_een' cx='16' cy='16' r='2'></circle> <path class='duotone_twee' d='M16,8C9.373,8,4,14,4,16c0,3,5.373,8,12,8s12-6,12-8S22.627,8,16,8z M16,20.5 c-2.485,0-4.5-2.015-4.5-4.5s2.015-4.5,4.5-4.5s4.5,2.015,4.5,4.5S18.485,20.5,16,20.5z'></path> </g> </g></svg>")
        no-repeat center;
    background-size: contain;
    vertical-align: middle;
    display: inline-block;
}

.svg-yellow-eye {
    vertical-align: middle;
    display: inline-block;

    width: 32px; /* Set the desired width */
    height: 32px; /* Set the desired height */
    background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-3.2 -3.2 38.40 38.40" xml:space="preserve" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><style type="text/css"> .duotone_twee{fill:%23f6fa00;} .duotone_een{fill:%230B1719;} </style><g><circle class="duotone_een" cx="16" cy="16" r="2"></circle><path class="duotone_twee" d="M16,8C9.373,8,4,14,4,16c0,3,5.373,8,12,8s12-6,12-8S22.627,8,16,8z M16,20.5 c-2.485,0-4.5-2.015-4.5-4.5s2.015-4.5,4.5-4.5s4.5,2.015,4.5,4.5S18.485,20.5,16,20.5z"></path></g></g></svg>')
        no-repeat center center;
    background-size: contain;
}

.svg-green-eye {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3.2 -3.2 38.40 38.40'%3E%3Cg%3E%3Ccircle cx='16' cy='16' r='2' fill='%230B1719' /%3E%3Cpath d='M16,8C9.373,8,4,14,4,16c0,3,5.373,8,12,8s12-6,12-8S22.627,8,16,8z M16,20.5c-2.485,0-4.5-2.015-4.5-4.5s2.015-4.5,4.5-4.5s4.5,2.015,4.5,4.5S18.485,20.5,16,20.5z' fill='%2300EB1B' /%3E%3C/g%3E%3C/svg%3E")
        no-repeat center;
    background-size: contain;
    vertical-align: middle;
    transition: transform 0.3s ease;
    cursor: grab;
}

.svg-green-eye:hover {
    transform: scale(1.6);
}

.svg-trash {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M724.3 198H296.1l54.1-146.6h320z' fill='%23FAFCFB'%3E%3C/path%3E%3Cpath d='M724.3 216.5H296.1c-6.1 0-11.7-3-15.2-7.9-3.5-5-4.3-11.3-2.2-17L332.8 45c2.7-7.3 9.6-12.1 17.4-12.1h320c7.7 0 14.7 4.8 17.4 12.1l54.1 146.6c2.1 5.7 1.3 12-2.2 17-3.5 4.9-9.2 7.9-15.2 7.9z m-401.6-37h375.1L657.3 69.9H363.1l-40.4 109.6z' fill='%230F0F0F'%3E%3C/path%3E%3Cpath d='M664.3 981.6H339.7c-54.2 0-98.5-43.3-99.6-97.5L223.7 235h572.9l-32.8 651.4c-2.3 53.2-46.1 95.2-99.5 95.2z' fill='%23ff0f0f'%3E%3C/path%3E%3Cpath d='M664.3 995H339.7c-29.7 0-57.8-11.4-79-32.2-21.2-20.8-33.3-48.6-34-78.3L210 221.6h600.7L777.2 887c-2.6 60.5-52.2 108-112.9 108zM237.4 248.3l16 635.5c0.5 22.7 9.7 44 25.9 59.8 16.2 15.9 37.7 24.6 60.4 24.6h324.6c46.3 0 84.2-36.2 86.2-82.5l32.1-637.4H237.4z' fill='%23191919'%3E%3C/path%3E%3Cpath d='M827.1 239.5H193.3c-22.2 0-40.4-18.2-40.4-40.4v-2.2c0-22.2 18.2-40.4 40.4-40.4h633.8c22.2 0 40.4 18.2 40.4 40.4v2.2c0 22.2-18.2 40.4-40.4 40.4z' fill='%23D39E33'%3E%3C/path%3E%3Cpath d='M826 252.9H194.4c-30.3 0-54.9-24.6-54.9-54.9 0-30.3 24.6-54.9 54.9-54.9H826c30.3 0 54.9 24.6 54.9 54.9s-24.7 54.9-54.9 54.9z m-631.6-83.1c-15.5 0-28.2 12.6-28.2 28.2s12.6 28.2 28.2 28.2H826c15.5 0 28.2-12.6 28.2-28.2 0-15.5-12.6-28.2-28.2-28.2H194.4z' fill='%23111111'%3E%3C/path%3E%3Cpath d='M354.6 430.3v369.6' fill='%23FAFCFB'%3E%3C/path%3E%3Cpath d='M354.6 813.3c-7.4 0-13.4-6-13.4-13.4V430.3c0-7.4 6-13.4 13.4-13.4s13.4 6 13.4 13.4v369.6c-0.1 7.4-6 13.4-13.4 13.4z' fill='%230F0F0F'%3E%3C/path%3E%3Cpath d='M458.3 430.3v369.6' fill='%23FAFCFB'%3E%3C/path%3E%3Cpath d='M458.3 813.3c-7.4 0-13.4-6-13.4-13.4V430.3c0-7.4 6-13.4 13.4-13.4s13.4 6 13.4 13.4v369.6c0 7.4-6 13.4-13.4 13.4z' fill='%230F0F0F'%3E%3C/path%3E%3Cpath d='M562.1 430.3v369.6' fill='%23FAFCFB'%3E%3C/path%3E%3Cpath d='M562.1 813.3c-7.4 0-13.4-6-13.4-13.4V430.3c0-7.4 6-13.4 13.4-13.4s13.4 6 13.4 13.4v369.6c-0.1 7.4-6.1 13.4-13.4 13.4z' fill='%230F0F0F'%3E%3C/path%3E%3Cpath d='M665.8 430.3v369.6' fill='%23FAFCFB'%3E%3C/path%3E%3Cpath d='M665.8 813.3c-7.4 0-13.4-6-13.4-13.4V430.3c0-7.4 6-13.4 13.4-13.4s13.4 6 13.4 13.4v369.6c0 7.4-6 13.4-13.4 13.4z' fill='%230F0F0F'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
        no-repeat center;
    background-size: contain;
    vertical-align: middle;
    transition: transform 0.3s ease;
    cursor: grab;
}

.svg-trash:hover {
    transform: scale(1.6);
}

.icon-logout {
    display: inline-block;
    width: 20px; /* Set your preferred width */
    height: 20px; /* Set your preferred height */
    background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000000%22%3E%3Cg%20id%3D%22SVGRepo_bgCarrier%22%20stroke-width%3D%220%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_tracerCarrier%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fg%3E%3Cg%20id%3D%22SVGRepo_iconCarrier%22%3E%3Cg%20fill%3D%22%23f4526b%22%3E%3Cpath%20d%3D%22m%203%205%20v%200.003906%20c%20-0.265625%200%20-0.519531%200.105469%20-0.707031%200.289063%20l%20-2%202%20c%20-0.3906252%200.390625%20-0.3906252%201.023437%200%201.414062%20l%202%202%20c%200.1875%200.183594%200.441406%200.289063%200.707031%200.285157%20v%200.007812%20h%201%20v%20-2%20h%205%20c%200.550781%200%201%20-0.449219%201%20-1%20s%20-0.449219%20-1%20-1%20-1%20h%20-5%20v%20-2%20z%20m%200%200%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m%206.820312%201.097656%20c%202.394532%20-0.40625%204.910157%200.453125%206.546876%202.398438%20c%202.175781%202.597656%202.175781%206.40625%200%209%20c%20-2.179688%202.597656%20-5.929688%203.257812%20-8.863282%201.5625%20c%20-0.230468%20-0.132813%20-0.398437%20-0.351563%20-0.46875%20-0.605469%20c%20-0.066406%20-0.257813%20-0.03125%20-0.53125%200.101563%20-0.761719%20c%200.277343%20-0.476562%200.886719%20-0.640625%201.367187%20-0.363281%20c%202.105469%201.214844%204.765625%200.75%206.328125%20-1.117187%20c%201.5625%20-1.863282%201.5625%20-4.5625%200%20-6.429688%20c%20-1.5625%20-1.863281%20-4.222656%20-2.332031%20-6.328125%20-1.113281%20c%20-0.480468%200.273437%20-1.089844%200.113281%20-1.367187%20-0.367188%20c%20-0.132813%20-0.226562%20-0.167969%20-0.5%20-0.101563%20-0.757812%20c%200.070313%20-0.257813%200.238282%20-0.476563%200.46875%20-0.609375%20c%200.730469%20-0.421875%201.515625%20-0.699219%202.316406%20-0.835938%20z%20m%200%200%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
        no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

.svg-red-pencil {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 392.605 392.605'%3E%3Cg%3E%3Cpath style='fill:%23FFC10D;' d='M317.413,170.879c-6.659,1.681-12.735,5.107-17.713,9.956c-9.18,9.18-13.059,22.174-10.408,34.909 c2.844,7.758-3.62,16.162-12.929,14.481c-12.994-3.168-26.893,0.711-36.267,10.15c-9.18,9.18-13.059,22.174-10.408,34.974 c2.78,7.628-2.844,16.485-12.929,14.481c-14.222-3.168-26.117,0.711-36.267,10.15c-4.913,4.978-8.339,11.055-9.956,17.713 l108.8,30.966l68.978-68.978L317.413,170.879z'%3E%3C/path%3E%3Cpath style='fill:%23FFFFFF;' d='M355.295,303.598l-51.846,51.846l51.717,14.739c9.18,2.844,17.713-6.271,14.933-14.933 L355.295,303.598z'%3E%3C/path%3E%3Cpath style='fill:%23d30daf;' d='M193.55,268.689L54.948,130.087L25.275,159.76c-4.202,4.008-4.719,12.154,0,17.067l127.03,127.03 c3.038-7.176,7.37-13.77,12.994-19.329C173.186,276.576,182.883,271.21,193.55,268.689z'%3E%3C/path%3E%3Cpath style='fill:%23FFFFFF;' d='M208.936,253.238c2.521-10.537,7.887-20.299,15.838-28.251c7.887-7.887,17.713-13.317,28.251-15.838 L114.487,70.548l-44.218,44.154L208.936,253.238z'%3E%3C/path%3E%3Cpath style='fill:%23d30daf;' d='M129.873,55.097l138.537,138.537c2.521-10.537,7.887-20.299,15.838-28.251 c5.56-5.624,12.154-9.956,19.329-12.994L176.613,25.424c-5.624-4.719-11.313-4.719-17.067,0L129.873,55.097z'%3E%3C/path%3E%3Cpath style='fill:%23590094;' d='M335.837,155.816c-0.517-1.875-1.552-3.297-2.78-4.719L191.998,10.038 c-13.77-12.994-32.84-13.77-47.903,0L9.889,144.374c-12.671,12.412-13.446,34.844,0,47.903l140.994,140.994 c1.164,1.164,2.715,2.069,4.719,2.78l193.552,55.143c26.182,7.758,49.519-17.907,41.891-41.891L335.837,155.816z M159.546,25.424 c5.818-4.719,11.442-4.719,17.067,0l127.03,127.03c-7.176,3.038-13.77,7.37-19.329,12.994c-7.952,7.952-13.317,17.778-15.838,28.251 L129.873,55.097L159.546,25.424z M114.487,70.548l138.667,138.667c-10.602,2.521-20.428,7.952-28.251,15.838 c-7.952,7.952-13.317,17.778-15.838,28.251L70.334,114.701L114.487,70.548z M152.306,303.857l-127.03-127.03 c-4.719-4.913-4.202-13.059,0-17.067l29.673-29.673L193.55,268.689c-10.602,2.521-20.428,7.952-28.251,15.838 C159.611,290.087,155.215,296.681,152.306,303.857z M170.6,317.691c1.681-6.659,5.107-12.8,9.956-17.713 c10.15-9.374,22.044-13.317,36.267-10.15c10.02,2.004,15.58-6.853,12.929-14.481c-2.651-12.735,1.164-25.729,10.408-34.974 c9.438-9.438,23.337-13.188,36.267-10.149c9.18,1.681,15.709-6.723,12.929-14.481c-2.651-12.735,1.164-25.729,10.408-34.909 c4.913-4.913,11.055-8.339,17.713-9.956l31.095,108.671l-69.107,69.042L170.6,317.691z M303.449,355.445l51.846-51.846 l14.739,51.717c2.78,8.663-5.689,17.778-14.933,14.933L303.449,355.445z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
        no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

.svg-green-pencil {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 392.605 392.605' xml:space='preserve' fill='%23000000'%3E%3Cg%3E%3Cpath style='fill:%23FFC10D;' d='M317.413,170.879c-6.659,1.681-12.735,5.107-17.713,9.956c-9.18,9.18-13.059,22.174-10.408,34.909 c2.844,7.758-3.62,16.162-12.929,14.481c-12.994-3.168-26.893,0.711-36.267,10.15c-9.18,9.18-13.059,22.174-10.408,34.974 c2.78,7.628-2.844,16.485-12.929,14.481c-14.222-3.168-26.117,0.711-36.267,10.15c-4.913,4.978-8.339,11.055-9.956,17.713 l108.8,30.966l68.978-68.978L317.413,170.879z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M355.295,303.598l-51.846,51.846l51.717,14.739c9.18,2.844,17.713-6.271,14.933-14.933 L355.295,303.598z'/%3E%3Cpath style='fill:%2391e8a2;' d='M193.55,268.689L54.948,130.087L25.275,159.76c-4.202,4.008-4.719,12.154,0,17.067l127.03,127.03 c3.038-7.176,7.37-13.77,12.994-19.329C173.186,276.576,182.883,271.21,193.55,268.689z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M208.936,253.238c2.521-10.537,7.887-20.299,15.838-28.251c7.887-7.887,17.713-13.317,28.251-15.838 L114.487,70.548l-44.218,44.154L208.936,253.238z'/%3E%3Cpath style='fill:%2391e8a2;' d='M129.873,55.097l138.537,138.537c2.521-10.537,7.887-20.299,15.838-28.251 c5.56-5.624,12.154-9.956,19.329-12.994L176.613,25.424c-5.624-4.719-11.313-4.719-17.067,0L129.873,55.097z'/%3E%3Cpath style='fill:%23007508;' d='M335.837,155.816c-0.517-1.875-1.552-3.297-2.78-4.719L191.998,10.038 c-13.77-12.994-32.84-13.77-47.903,0L9.889,144.374c-12.671,12.412-13.446,34.844,0,47.903l140.994,140.994 c1.164,1.164,2.715,2.069,4.719,2.78l193.552,55.143c26.182,7.758,49.519-17.907,41.891-41.891L335.837,155.816z M159.546,25.424 c5.818-4.719,11.442-4.719,17.067,0l127.03,127.03c-7.176,3.038-13.77,7.37-19.329,12.994c-7.952,7.952-13.317,17.778-15.838,28.251 L129.873,55.097L159.546,25.424z M114.487,70.548l138.667,138.667c-10.602,2.521-20.428,7.952-28.251,15.838 c-7.952,7.952-13.317,17.778-15.838,28.251L70.334,114.701L114.487,70.548z M152.306,303.857l-127.03-127.03 c-4.719-4.913-4.202-13.059,0-17.067l29.673-29.673L193.55,268.689c-10.602,2.521-20.428,7.952-28.251,15.838 C159.611,290.087,155.215,296.681,152.306,303.857z M170.6,317.691c1.681-6.659,5.107-12.8,9.956-17.713 c10.15-9.374,22.044-13.317,36.267-10.15c10.02,2.004,15.58-6.853,12.929-14.481c-2.651-12.735,1.164-25.729,10.408-34.974 c9.438-9.438,23.337-13.188,36.267-10.149c9.18,1.681,15.709-6.723,12.929-14.481c-2.651-12.735,1.164-25.729,10.408-34.909 c4.913-4.913,11.055-8.339,17.713-9.956l31.095,108.671l-69.107,69.042L170.6,317.691z M303.449,355.445l51.846-51.846 l14.739,51.717c2.78,8.663-5.689,17.778-14.933,14.933L303.449,355.445z'/%3E%3C/g%3E%3C/svg%3E")
        no-repeat center;
    background-size: contain;
    vertical-align: middle;
    transition: transform 0.3s ease;
    cursor: grab;
}

.svg-green-pencil:hover {
    transform: scale(1.6);
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
    }
}

.animate-zoom:hover {
    transform: scale(1.6);
}