/* reset, start
* clear style from previous declare
*/
.cp-footer * {
  color:unset; 
}

.footer {
  background-color:unset; 
}
/* reset, end */



/* global styles, start */
html {
  font-size:16px; 
}

html, body, .body-wrapper { 
  height:100%;
  font-family: "Gotham";
}

.body-wrapper {
  display: flex;
  flex-direction: column;
}

.body-container-wrapper {
  flex:1 0 auto; 
}

.iron-btn-round-pink {
  border-radius:128px;
  color:#fff;
  text-decoration:none;
  border:none;
  outline:none;
  font-weight:700;
  font-size:1rem;
  padding:12px 24px;
  text-align:center;
  min-width:240px;
  background-color:#e01a59;
  display:inline-block;

  &:hover {
    background-color:#c9041e;
  }
}

.circle {
  width:48px;
  aspect-ratio:1/1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  overflow:hidden;
}

.customer_hub_text {
  font:normal 700 1rem/1 "Gotham";
  color:#181818;
  display:inline-block;
  text-wrap:nowrap;
    .text_pink {
      color:#e01a59;
  }
}
/* global styles, end */



/* for header */
header.header {
  background-color:#fff;
  color:#181818;
  filter: drop-shadow(3px 7px 10px rgba(0, 0, 0, .1));
  padding:0;
  margin:0;
  line-height:1;

  .header__nav {
    display:none;
  }

  .menu_hub {
    a {
      font:normal 700 1rem/1 "Gotham";
      color:#181818;
      text-decoration:none;
      &:hover {
        text-decoration:underline; 
      }
    }
  }

  .menu_member {
    font:normal 400 1rem/1 "Gotham";
    color:#181818;
  }

  .member_avatar_wrapper {
    font:normal 700 1.5rem/1 "Gotham";
    color:#fff;
    background-color:#2A95D5;
    width:32px;
  }
}


/* for footer */
footer.footer,
footer.cp-footer {
  background-color:#0d0d0d;
  color:#fff;
  padding:0;
  margin:0;


  a {
    color:#fff;
    text-decoration:none;

    &:hover {
      color:#e01a59;
    }
  }

  .text_address {
    margin-top:1rem;
    font-size:0.75rem;
    font-weight:300;
  }

  .text_address_ironsoftware_logo {
    img {
      opacity:0.6;
      &:hover {
        opacity:unset; 
      }
    }
  }

  .text_copyright {
    font-size:0.75rem;
    font-weight:400;
  }

  .text_join_iron_slack {
    font-size:0.875rem;
    font-weight:700;

    a:hover {
      text-decoration:none;
      color:#e01a59;
    }

    img {
      vertical-align:middle; 
    }
  }

  .menu_pages {
    font-size:1rem;
    font-weight:700;  
  }

  .menu_terms {
    font-size:0.625rem;
    font-weight:700;  
  }

  .menu_social {
    a {
      opacity: 0.6;
      &:hover {
        opacity:unset; 
      }
    }
  }
}




/* for page 404 error */
main.page-404,
main-page-500 {
  & h2 {
    font-weight:900;
    font-size: 2rem;
    margin:2rem auto 1rem;
  }

  & p {
    font-weight:400;
    font-size: 1rem;
  }
}


main.page-login {
  h1 {
    color:#e01a59;
    font-size:48px;
    font-weight:900;
  }

  .form-wrapper--password-prompt {
    width:100%;
    max-width:760px;
    margin:0 auto;

    form {
      display:flex;
      flex-direction:column;
      align-items:center;
    }

    form input[name="password"] {
      display:block;
      border-radius:4px;
      border:solid 1px #181818;
      padding:12px 24px;
      color:#181818;
      font-size:1rem;
      font-weight:300;
      height:unset;
      width:100%;
      max-width:560px;
      text-align:center;
      margin-top:2rem;
    }

    form input[type="submit"] {
      border-radius:128px;
      color:#fff;
      text-decoration:none;
      border:none;
      outline:none;
      font-weight:700;
      font-size:1rem;
      padding:12px 24px;
      text-align:center;
      min-width:240px;
      width:fit-content;
      background-color:#e01a59;
      display:block;
      margin-top:1rem;
      &:hover {
        background-color:#c9041e;
      }     
    }
  }
}



main.page_home {
  background-color:#f8fafc;
  padding:2rem 0;

  h1 {
    font:normal 900 1.75rem/1.4 "Gotham";
    margin:0 0 1rem;
    color:#181818;
  }

  .hub_menu {
    .item {
      border:solid 2px #e7eef0;
      background-color:#fff;
      padding:1.5rem;
      border-radius:8px;
      text-decoration:none;
      color:#181818;
      height:100%;
      transition:all ease-in-out 0.2s;
      &:hover {
        border-color:#2A95D5;
        box-shadow:0 5px 20px 0 rgba(0,0,0,.05)
      }
      
      .logo_wrapper {
        font-size:2rem;
        background-color:#f1f9fb;
        color:#2A95D5;
        border-radius:8px;
        display:inline-flex;
        aspect-ratio:1/1;
        width:56px;
        justify-content:center;
        align-items:center;
      }
      
      h3 {
        font:normal 700 1rem/1.4 "Gotham";
        margin:0 0 0.5rem;
      }
      
      p {
        font:normal 400 0.8rem/1.4 "Gotham";
        margin:0;
        padding:0;
      }
    }
  }