.add-roommate-modal{background:var(--bg-primary);color:var(--color-primary);display:flex;flex-direction:column;max-height:85dvh;overflow-y:auto;padding-inline:16px;width:100%}@media screen and (max-width:768px){.add-roommate-modal{border-radius:20px;padding-inline:20px}}.add-roommate-modal__header{align-items:center;display:flex;justify-content:center;position:relative;width:100%}.add-roommate-modal__header-text{font-size:30px;font-weight:700;width:100%}@media screen and (max-width:768px){.add-roommate-modal__header-text{font-size:24px}}.add-roommate-modal__header .ui-button.--blank{color:var(--color-primary);cursor:pointer;display:flex;font-size:20px;position:absolute;right:-16px}@media screen and (max-width:768px){.add-roommate-modal__header .ui-button.--blank{font-size:16px}}.add-roommate-modal__form{display:flex;flex-direction:column;gap:16px;margin-top:36px}.add-roommate-modal__groups{display:flex;flex-direction:column;gap:12px}.add-roommate-modal__groups-item{align-items:center;background:var(--settings-color);border-radius:12px;display:flex;font-size:16px;font-weight:600;justify-content:space-between;padding:8px 22px}.add-roommate-modal__groups-select-all{align-items:center;display:flex;gap:16px}.add-roommate-modal__input-group{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;width:100%}.add-roommate-modal__input-group-label{font-size:16px;font-weight:400;text-align:start;width:100%}@media screen and (max-width:768px){.add-roommate-modal__input-group-label{font-size:14px}}.add-roommate-modal__input-group-input{background:var(--color-bg-hover);border-color:transparent;border-radius:12px;font-size:16px;outline:none;padding:20px;width:100%}@media screen and (max-width:768px){.add-roommate-modal__input-group-input{font-size:14px}}.add-roommate-modal__users{background:var(--color-bg-hover);border-radius:12px;display:flex;flex-direction:column;gap:12px;height:168px;overflow-x:hidden;overflow-y:auto;padding:12px 8px}.add-roommate-modal__users::-webkit-scrollbar{border-radius:2px;left:10px;margin-inline-start:10px;position:absolute;width:8px}.add-roommate-modal__users::-webkit-scrollbar-track{background:var(--settings-color);border-radius:2px;width:4px}.add-roommate-modal__users::-webkit-scrollbar-thumb{background:var(--color-active);border-radius:12px;height:32px;width:8px}.add-roommate-modal__users-user{background:var(--bg-primary);border-radius:12px;padding:8px 20px}.add-roommate-modal__users-user.--placeholder{background:transparent;padding:0;text-align:center}.header-content{position:absolute;right:40px;top:40px;z-index:10}@media screen and (max-width:1200px){.header-content{right:20px;top:20px}}.header-content__flex{align-items:center;display:flex;gap:20px}.header-content__menu-container{position:relative}.header-content .header-button{background:transparent;border:none;cursor:pointer;display:block;outline:none;position:relative}.header-menu{background:var(--bg-primary);border:solid var(--color-border);border-radius:24px;box-shadow:0 0 10px 0 var(--service-shadow-color);-webkit-box-shadow:0 0 10px 0 var(--service-shadow-color);display:flex;flex-direction:column;max-height:45vh;max-width:calc(40vw - 142.8px);min-width:300px;padding:20px 10px 20px 20px;position:absolute;right:0;width:-moz-fit-content;width:fit-content;z-index:100}.header-menu__item-list{display:flex;flex-direction:column;gap:10px}@media screen and (max-width:1200px){.header-menu{max-width:calc(50vw - 20px)}}@media screen and (max-width:430px){.header-menu{padding:12px}}@media screen and (max-width:375px){.header-menu{left:50%;max-width:calc(100vw - 40px);min-width:0;position:fixed;transform:translate(-50%);width:calc(100vw - 40px)}}.header-menu__item,.header-menu__item-btn{align-items:center;background:none;border:none;border-radius:12px;cursor:pointer;display:flex;flex-direction:row;gap:28px;justify-content:space-between;padding:12px;transition:.3s ease;width:100%}@media screen and (max-width:430px){.header-menu__item,.header-menu__item-btn{padding:8px}}.header-menu__item-btn:hover,.header-menu__item:hover{background-color:var(--color-bg-hover)}.header-menu__item.--active{background-color:var(--color-active)}.header-menu__item-btn{font-size:16px;font-weight:600}.header-menu__item-edit[aria-current=page]{color:var(--color-active)}.header-menu__item-title{flex:1;font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-menu__item-title.--active{color:var(--color-icon-hover)}@media screen and (max-width:370px){.header-menu__item-icon{display:none!important}}