.header{display:flex;align-items:center;width:100%;height:60px;border-bottom:1px solid #e0e0e0;}.header .header-logo{display:flex;align-items:center;width:100%;max-width:260px;height:100%;padding:0 20px;border-right:1px solid #e0e0e0;}.header .header-logo .x-img-link{width:auto;}.header .header-title-and-nav{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 20px;}.header .header-page-title{padding:15px 0;}.header .header-page-title .x-title{font-weight:normal;}.header .x-icon{color:#4db9d6;}.header .header-nav{display:flex;}.header .header-nav .header-button{display:inline-flex;}.header .header-nav .header-button:hover{background:#e4f5f9;}.header .header-nav .login-user-wrapper{position:relative;}.header .header-nav .login-user-wrapper .user-icon-wrapper{display:flex;align-items:center;}.header .header-nav .login-user-wrapper .user-icon-wrapper .x-icon{color:#fff;}.header .header-nav .login-user-wrapper .user-icon-wrapper .user-icon{align-items:center;justify-content:center;width:40px;height:40px;margin-left:15px;background:#4db9d6;border-radius:100px;border:none;}.header .header-nav .login-user-wrapper .login-user-menu{display:none;position:absolute;top:60px;right:0;width:400px;padding:20px;border:none;box-shadow:0 4px 8px #ccc;border-radius:8px;background:#fff;z-index:10;}.header .header-nav .login-user-wrapper .login-user-menu .login-user-email{margin-bottom:1rem;font-size:12px;word-break:break-all;}.header .header-nav .login-user-wrapper .login-user-menu .x-buttons{justify-content:flex-end;}.header .header-nav .login-user-wrapper .login-user-menu .x-button{height:26px;margin-right:20px;font-size:12px;border:solid 1px #4db9d6;}.header .header-nav .login-user{display:flex;align-items:center;height:60px;padding:0 20px;transition:all .3s ease;cursor:pointer;}@media screen and (max-width:768px){.header .header-nav .login-user{padding:0 10px;}}.header .header-nav .login-user:hover{background:#b7e3ef;}.header .header-nav .login-user .user-name{font-weight:bold;}.header .header-nav .login-user .arrow-icon{transition:all .3s ease;}.header .header-nav .login-user .arrow-icon.rotate{transform:rotate(180deg);}.header .header-nav .user-name .header-button{align-items:center;height:100%;padding:20px;font-weight:bold;}.header .header-nav .login{display:flex;align-items:center;}.header .header-nav .login .x-icon{color:#fff;position:relative;}.header .header-nav .login .x-icon::after{display:block;position:absolute;top:-12px;right:-12px;width:6px;height:6px;background:#ff5964;border-radius:100px;content:"";}.header .header-nav .login .login-button{align-items:center;justify-content:center;width:40px;height:40px;background:#4db9d6;border-radius:100px;}.header .header-nav .login .login-button:hover{opacity:.5;}.header .login-user-commucatto .commucatto-button{display:flex;align-items:center;justify-content:center;width:60px;height:60px;transition:all .3s ease;cursor:pointer;}.header .login-user-commucatto .commucatto-button:hover{background:#b7e3ef;}.header .login-user-commucatto .commucatto-link-area{display:none;position:absolute;top:60px;right:20px;padding:20px;border:none;box-shadow:0 4px 8px #ccc;border-radius:8px;background:#fff;z-index:10;}.header .login-user-commucatto .commucatto-link-area img{width:160px;}