:root { /* colors */ --flame: #E4572E; --onyx: #393E41; --dimgray: #687378; --alabaster: #F1F2EB; --dimalabaster: #D3D7C1; --prussianblue: #012B50; --shadow1: rgba(0, 0, 0, 0.1); --shadow4: rgba(0, 0, 0, 0.4); /* SVG */ --grabHandle: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23687378'%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%3Cg id='Interface / Drag_Vertical'%3E%3Cg id='Vector'%3E%3Cpath d='M14 18C14 18.5523 14.4477 19 15 19C15.5523 19 16 18.5523 16 18C16 17.4477 15.5523 17 15 17C14.4477 17 14 17.4477 14 18Z' stroke='%23687378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M8 18C8 18.5523 8.44772 19 9 19C9.55228 19 10 18.5523 10 18C10 17.4477 9.55228 17 9 17C8.44772 17 8 17.4477 8 18Z' stroke='%23687378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M14 12C14 12.5523 14.4477 13 15 13C15.5523 13 16 12.5523 16 12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12Z' stroke='%23687378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M8 12C8 12.5523 8.44772 13 9 13C9.55228 13 10 12.5523 10 12C10 11.4477 9.55228 11 9 11C8.44772 11 8 11.4477 8 12Z' stroke='%23687378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M14 6C14 6.55228 14.4477 7 15 7C15.5523 7 16 6.55228 16 6C16 5.44772 15.5523 5 15 5C14.4477 5 14 5.44772 14 6Z' stroke='%23687378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M8 6C8 6.55228 8.44772 7 9 7C9.55228 7 10 6.55228 10 6C10 5.44772 9.55228 5 9 5C8.44772 5 8 5.44772 8 6Z' stroke='%23687378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --settingsIcon: url("data:image/svg+xml,%3Csvg fill='%23687378' height='200px' width='200px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 491.52 491.52' xml:space='preserve' stroke='%23687378'%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%3Cg%3E%3Cg%3E%3Cpath d='M491.52 285.15v-78.78l-57.55-9.6c-4.49-17.3-11.375-33.86-20.525-49.41l33.95-47.53l-55.715-55.7l-47.53 33.95 c-15.545-9.16-32.11-16.04-49.405-20.53L285.155 0h-78.79l-9.59 57.55c-17.295 4.49-33.86 11.37-49.405 20.53L99.84 44.13 l-55.715 55.7l33.95 47.53c-9.15 15.55-16.035 32.11-20.525 49.41L0 206.37v78.78l57.55 9.6c4.49 17.3 11.375 33.86 20.525 49.41 l-33.95 47.53l55.715 55.7l47.53-33.95c15.545 9.16 32.11 16.04 49.405 20.53l9.59 57.55h78.79l9.59-57.55 c17.295-4.49 33.86-11.37 49.405-20.53l47.53 33.95l55.715-55.7l-33.95-47.53c9.15-15.55 16.035-32.11 20.525-49.41L491.52 285.15 z M415.6 283.55c-4.35 19.65-12.11 38.34-23.065 55.54l-3.715 5.83l31.825 44.55l-31.175 31.18l-44.56-31.83l-5.825 3.71 c-17.205 10.96-35.89 18.72-55.54 23.07l-6.75 1.5l-8.99 53.94h-44.09l-8.99-53.94l-6.75-1.5 c-19.65-4.35-38.335-12.11-55.54-23.07l-5.825-3.71l-44.56 31.83l-31.175-31.18l31.825-44.55l-3.715-5.83 C88.03 321.89 80.27 303.2 75.92 283.55l-1.495-6.75l-53.945-8.99v-44.1l53.945-8.99l1.495-6.75 c4.35-19.65 12.11-38.34 23.065-55.54l3.715-5.83l-31.825-44.55l31.175-31.18l44.56 31.83l5.825-3.71 c17.205-10.96 35.89-18.72 55.54-23.07l6.75-1.5l8.99-53.94h44.09l8.99 53.94l6.75 1.5c19.65 4.35 38.335 12.11 55.54 23.07 l5.825 3.71l44.56-31.83l31.175 31.18L388.82 146.6l3.715 5.83c10.955 17.2 18.715 35.89 23.065 55.54l1.495 6.75l53.945 8.99 v44.1l-53.945 8.99L415.6 283.55z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M245.76 143.36c-56.465 0-102.4 45.94-102.4 102.4s45.935 102.4 102.4 102.4s102.4-45.94 102.4-102.4 S302.225 143.36 245.76 143.36z M245.76 327.68c-45.17 0-81.92-36.75-81.92-81.92s36.75-81.92 81.92-81.92 s81.92 36.75 81.92 81.92S290.93 327.68 245.76 327.68z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --editIcon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23687378'%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='M18 10L21 7L17 3L14 6M18 10L8 20H4V16L14 6M18 10L14 6' stroke='%23687378' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); --deleteIcon: url("data:image/svg+xml,%3Csvg height='200px' width='200px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 50 50' enable-background='new 0 0 50 50' xml:space='preserve' fill='%23687378' stroke='%23687378'%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 fill='%23687378' d='M10.289 14.211h3.102l1.444 25.439c0.029 0.529 0.468 0.943 0.998 0.943h18.933 c0.53 0 0.969-0.415 0.998-0.944l1.421-25.438h3.104c0.553 0 1-0.448 1-1s-0.447-1-1-1h-3.741c-0.055 0-0.103 0.023-0.156 0.031 c-0.052-0.008-0.1-0.031-0.153-0.031h-5.246V9.594c0-0.552-0.447-1-1-1h-9.409c-0.553 0-1 0.448-1 1v2.617h-5.248 c-0.046 0-0.087 0.021-0.132 0.027c-0.046-0.007-0.087-0.027-0.135-0.027h-3.779c-0.553 0-1 0.448-1 1S9.736 14.211 10.289 14.211z M21.584 10.594h7.409v1.617h-7.409V10.594z M35.182 14.211L33.82 38.594H16.778l-1.384-24.383H35.182z'%3E%3C/path%3E%3Cpath fill='%23687378' d='M20.337 36.719c0.02 0 0.038 0 0.058-0.001c0.552-0.031 0.973-0.504 0.941-1.055l-1.052-18.535 c-0.031-0.552-0.517-0.967-1.055-0.942c-0.552 0.031-0.973 0.504-0.941 1.055l1.052 18.535 C19.37 36.308 19.811 36.719 20.337 36.719z'%3E%3C/path%3E%3Cpath fill='%23687378' d='M30.147 36.718c0.02 0.001 0.038 0.001 0.058 0.001c0.526 0 0.967-0.411 0.997-0.943l1.052-18.535 c0.031-0.551-0.39-1.024-0.941-1.055c-0.543-0.023-1.023 0.39-1.055 0.942l-1.052 18.535C29.175 36.214 29.596 36.687 30.147 36.718 z'%3E%3C/path%3E%3Cpath fill='%23687378' d='M25.289 36.719c0.553 0 1-0.448 1-1V17.184c0-0.552-0.447-1-1-1s-1 0.448-1 1v18.535 C24.289 36.271 24.736 36.719 25.289 36.719z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); --profileImage: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23687378'%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%3Ctitle%3Eprofile %5B%231341%5D%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Dribbble-Light-Preview' transform='translate(-180.000000 -2159.000000)' fill='%23687378'%3E%3Cg id='icons' transform='translate(56.000000 160.000000)'%3E%3Cpath d='M134 2008.99998 C131.783496 2008.99998 129.980955 2007.20598 129.980955 2004.99998 C129.980955 2002.79398 131.783496 2000.99998 134 2000.99998 C136.216504 2000.99998 138.019045 2002.79398 138.019045 2004.99998 C138.019045 2007.20598 136.216504 2008.99998 134 2008.99998 M137.775893 2009.67298 C139.370449 2008.39598 140.299854 2006.33098 139.958235 2004.06998 C139.561354 2001.44698 137.368965 1999.34798 134.722423 1999.04198 C131.070116 1998.61898 127.971432 2001.44898 127.971432 2004.99998 C127.971432 2006.88998 128.851603 2008.57398 130.224107 2009.67298 C126.852128 2010.93398 124.390463 2013.89498 124.004634 2017.89098 C123.948368 2018.48198 124.411563 2018.99998 125.008391 2018.99998 C125.519814 2018.99998 125.955881 2018.61598 126.001095 2018.10898 C126.404004 2013.64598 129.837274 2010.99998 134 2010.99998 C138.162726 2010.99998 141.595996 2013.64598 141.998905 2018.10898 C142.044119 2018.61598 142.480186 2018.99998 142.991609 2018.99998 C143.588437 2018.99998 144.051632 2018.48198 143.995366 2017.89098 C143.609537 2013.89498 141.147872 2010.93398 137.775893 2009.67298' id='profile-%5B%231341%5D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --addContact: url('data:image/svg+xml,'); --copyIcon: url('data:image/svg+xml, copy '); } body { background-color: var(--alabaster); font-family: Arial, Helvetica, sans-serif; color: #393e41; } a, a:visited { text-decoration: none; color: var(--prussianblue); } h1, h2 { color: var(--prussianblue) } input[type="text"], input[type="password"], input[type="email"], input[type="textarea"], input[type="number"], input[type="tel"], input[type="url"], textarea { max-width: 100%; padding: 10px; margin-bottom: 10px; } input[type="submit"], button, input[type="file"] { background-color: var(--onyx); color: var(--alabaster); padding: 10px 20px; border: none; cursor: pointer; } .bold { font-weight: bold; } .notification, .hidden { display: none; } .notificationShow { margin-top: 20px; margin-bottom: 10px; background-color: var(--flame); color: var(--alabaster); padding: 10px; } .pageHeader { background-color: var(--flame); padding: 50px; margin-top: -8px; margin-left: -8px; margin-right: -8px; margin-bottom: 10px; } .pageHeader h1, .pageHeader h2 { color: var(--alabaster); } .pageHeader a, .pageHeader a:visited { color: var(--onyx); } .mainContainer { max-width: 1000px; margin: auto; padding: 15px; } .centeredBox { width: 50%; margin: auto; margin-bottom: 55px; } .centeredContent { display: flex; flex-wrap: wrap-reverse; flex-direction: column; align-content: center; } .pageFooterUnderlay { height: 80px; } .pageFooter { background-color: var(--onyx); color: var(--alabaster); margin-top: 20px; margin-left: -8px; margin-right: -8px; margin-bottom: -8px; position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: 10px; z-index: 9999; /* ensure the div appears on top of other content */ } .pageFooter h1, .pageFooter h2 { color: var(--alabaster); } .pageFooter a, .pageFooter a:visited { color: var(--flame); } /* Home Page */ .fake-input { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 4px 0 0 4px; color: gray; font-size: 16px; max-width: 300px; background-color: field; margin-right: 5px; height: 50px; } .fake-input label { display: inline-block; padding: 10px; padding-right: 0px; margin-left: 10px; /* adjust margin to center label */ } .fake-input input[type="text"] { flex: 1; display: inline-block; padding: 10px; padding-left: 0px; border: none; width: 100%; font-size: inherit; color: inherit; outline: none; margin-bottom: 0px; background-color: transparent; } /* Style for bio section */ #copyButton { cursor: pointer; background-image: var(--copyIcon); width: 20px; height: 25px; background-repeat: no-repeat; background-position: top; margin: 5px; } #copiedText { display: none; } #cardNumber { display: flex; } #copiedText, #cardNumber { font-size: small; align-items: center; } .bioBlock, .bioBlockPublic { align-items: center; display: flex; flex-direction: column; } .bioBlockPublic { margin: 0 -16px -15px -16px; } .profileImagesContainer { display: flex; width: 100%; justify-content: center; } .profileImageWrapper, .profileImageWrapperInactive { width: 100%; border-style: solid; border-width: 1px 1px 0 1px; border-color: var(--dimalabaster); border-radius: 5px 5px 0 0; padding: 5px; } .profileImageWrapperInactive { background-color: rgba(0, 0, 0, 0.1); filter: grayscale(50%); border-width: 0 0 1px 0; cursor: pointer; } .profileImage { background-repeat: no-repeat; /* Prevent the SVG image from repeating */ background-position: center center; /* Center the SVG image within the div */ background-size: 100%; /* Set the size of the SVG image within the div */ width: 30%; /* height: 150px; */ margin: auto; } .profileImagePlaceholder { background-image: var(--profileImage); width: 150px; height: 150px; } .profileImage img { width: 100%; /* Set the width of the image to 100% */ height: auto; /* Automatically adjust the height based on the width */ clip-path: circle(50% at center); /* Create a circular clip path */ } .profileImageBtn { cursor: pointer; } .profileImageUpload { width: 300px; height: 450px; display: none; } .imageUploadForm { display: flex; flex-direction: column; } .profileImagePreview { width: 300px; height: 300px; margin: auto; margin-top: 10px; margin-bottom: 10px; background-image: var(--profileImage); } .bio, .publicName { display: flex; flex-direction: row; /* align-content: flex-start; */ align-items:flex-start; flex-wrap: wrap; max-width: 400px; } .publicName { align-items: center; /* overwrite */ } .bioText, .publicNameText { flex: 1; text-align: center; margin-bottom: 15px; } .addContactContainer { display: flex; justify-content: center; margin-bottom: 10px; } .addContactWrapper { display: flex; cursor: pointer; } .addContact { background-color: var(--flame); height: 40px; color: var(--alabaster); align-content: center; flex-wrap: wrap; display: flex; } .addContactLink { padding: 0 5px; border-radius: 0 5px 5px 0; } .addContactIcon { padding-left: 5px; border-radius: 5px 0 0 5px; background-image: var(--addContact); width: 20px; background-repeat: no-repeat; background-position: center; } /* Style for the list items */ .addItemButtons { display: flex; flex-direction: column; } .divList { display: flex; flex-direction: column; } .listItem { margin-bottom: 10px; } .urlBlock { display: flex; flex-direction: column; border: 1px solid gray; border-radius: 5px; box-shadow: 0 2px 4px var(--shadow1); background-color: white; } .separatorBlock { border-radius: 5px; } .separatorBlockUserAdmin { border: 1px dashed var(--dimgray); } .listDataContainer { display: flex; flex-direction: row; align-items: center; margin: 10px; } .listData{ display: flex; justify-content: center; flex: 1; padding: 10px; margin-right: 10px; } .drag-handle { z-index: 1; /* Set higher z-index to child-div-2 for overlapping */ width: 20px; height: 20px; background-image: var(--grabHandle); background-repeat: no-repeat; /* Prevent the SVG image from repeating */ background-position: center center; /* Center the SVG image within the div */ background-size: 100%; /* Set the size of the SVG image within the div */ cursor: grab; } /* .listItemUserAdmin { display: none; } */ .listItemUserAdmin, .listItemUserAdminToggle { display: flex; /* justify-content: center; */ margin-right: 20px; } .listItemUserAdminSeparator { border: none; border-top: 1px dotted var(--dimgray); margin: 0; } .listItemUserAdminToggle { background-image: var(--settingsIcon); background-repeat: no-repeat; /* Prevent the SVG image from repeating */ background-position: center center; /* Center the SVG image within the div */ height: 20px; background-size: contain; margin: 5px; margin-right: 20px; cursor: pointer; } .listItemDelete { background-image: var(--deleteIcon); } .listItemEdit, .bioEdit, .publicNameEdit { background-image: var(--editIcon); } .listItemDelete, .listItemEdit, .bioEdit, .publicNameEdit { background-repeat: no-repeat; /* Prevent the SVG image from repeating */ background-position: center center; /* Center the SVG image within the div */ width: 20px; height: 20px; background-size: contain; margin: 5px; flex: 0 0 20px; cursor: pointer; } .listItemEditPopup, .bioEditPopup, .publicNameEditPopup { display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 20px; background-color: #fff; z-index: 9999; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity for desired dimming effect */ z-index: 999; /* Adjust the z-index to make sure the overlay is on top of other elements */ } /* Team styles */ .teamMember { padding: 5px 0; } /* Cookie Popup Styles */ #cookiePopup { /* Remove display: none; to make the popup visible by default */ position: fixed; bottom: 0; left: 0; right: 0; padding: 16px; background-color: #f8f8f8; border-top: 1px solid #ddd; box-shadow: 0 -2px 6px var(--shadow1); text-align: center; z-index: 9999; } #cookiePopup h3 { margin: 0 0 8px; } #cookiePopup p { margin: 0 0 16px; } #cookiePopup form { display: flex; justify-content: center; align-items: center; } #cookiePopup input[type="radio"] { margin-right: 8px; } #cookiePopup input[type="submit"] { padding: 8px 16px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } /* Hamburger menu */ #hamburgerMenu-toggle { opacity: 0; } #hamburgerMenu-toggle:checked + .hamburgerMenu-btn > span { transform: rotate(45deg); } #hamburgerMenu-toggle:checked + .hamburgerMenu-btn > span::before { top: 0; transform: rotate(0deg); } #hamburgerMenu-toggle:checked + .hamburgerMenu-btn > span::after { top: 0; transform: rotate(90deg); } #hamburgerMenu-toggle:checked ~ .hamburgerMenu-box { right: 0; } .hamburgerMenu-btn { position: fixed; top: 20px; right: 20px; width: 26px; height: 26px; cursor: pointer; z-index: 3; } #hamburgerMenu-toggle:checked + .hamburgerMenu-btn > span { background-color: var(--flame); } #hamburgerMenu-toggle:not(:checked) + .hamburgerMenu-btn > span { background-color: var(--alabaster); } .hamburgerMenu-btn > span, .hamburgerMenu-btn > span::before, .hamburgerMenu-btn > span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: inherit; transition-duration: .25s; } .hamburgerMenu-btn > span::before { content: ''; top: -8px; } .hamburgerMenu-btn > span::after { content: ''; top: 8px; } .hamburgerMenu-box { display: block; position: fixed; top: 0; right: -300px; width: 300px; height: 100%; margin: 0; padding: 80px 0; list-style: none; background-color: var(--alabaster); box-shadow: 2px 2px 6px var(--shadow4); transition-duration: .25s; z-index: 2; } .hamburgerMenu-item { display: block; padding: 12px 24px; color: #333; transition-duration: .25s; } .hamburgerMenu-item:hover { background-color: var(--dimalabaster); }