/* Refined Add to Morrow upload card */

.refreshed-upload-card{
  padding:34px 26px 30px;
}

.refreshed-upload-card .upload-icon{
  margin:0 auto 18px;
}

.refreshed-upload-card h2{
  margin:0;
}

.refreshed-upload-card .upload-tagline{
  margin:5px 0 0;
  line-height:1.45;
}

.upload-examples{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  width:100%;
  max-width:430px;
  margin:30px auto 34px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(15,34,56,.09);
}

.upload-example{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  color:#4f5558;
  font-size:10px;
  font-weight:700;
  line-height:1.15;
  text-align:center;
}

.upload-example-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:21px;
  font-weight:900;
}

.upload-example-icon.calendar{
  color:#765fc8;
  background:#f1edfb;
}

.upload-example-icon.teacher{
  color:#ef806f;
  background:#fceeed;
}

.upload-example-icon.activity{
  color:#329764;
  background:#eaf7ef;
}

.upload-example-icon.bell{
  color:#ec8a36;
  background:#fff1e5;
}

.upload-example-icon.newsletter{
  color:#337fc7;
  background:#eaf3fb;
}

.refreshed-upload-card #chooseImageButton{
  min-width:132px;
  margin:0 auto;
}

.supported-files{
  display:grid;
  gap:4px;
  margin:14px auto 0;
  color:#777b80;
  font-size:10px;
  line-height:1.35;
  text-align:center;
}

.supported-files strong{
  color:#62676c;
  font-size:10px;
  font-weight:800;
}

.supported-files span{
  font-size:9px;
}

.refreshed-upload-card .file-preview,
.refreshed-upload-card #preview{
  margin-top:24px;
}

.refreshed-upload-card .status{
  margin-top:20px;
}

@media(max-width:390px){
  .refreshed-upload-card{
    padding:30px 18px 26px;
  }

  .upload-examples{
    gap:7px;
    margin-top:27px;
    margin-bottom:30px;
    padding-bottom:25px;
  }

  .upload-example-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:18px;
  }

  .upload-example{
    font-size:9px;
  }
}


/* v0.4.9 — approved logo image + optical centering */

.morrow-brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  line-height:0;
}

.morrow-header-logo{
  display:block;
  width:174px;
  max-width:48vw;
  height:auto;
  object-fit:contain;
}

/* True central column for everything inside the upload card */
.refreshed-upload-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.refreshed-upload-card > *{
  flex:0 0 auto;
}

.refreshed-upload-card .upload-icon{
  align-self:center;
}

.refreshed-upload-card h2,
.refreshed-upload-card .upload-tagline{
  width:100%;
  text-align:center;
}

/*
  Fixed equal-width columns stop the icons from looking shifted when labels
  have different lengths, such as "School calendar" versus "Bill".
*/
.upload-examples{
  width:100%;
  max-width:430px;
  grid-template-columns:repeat(5,1fr);
  align-items:start;
  justify-items:center;
  margin-left:auto;
  margin-right:auto;
}

.upload-example{
  width:100%;
  min-width:0;
  align-items:center;
  justify-content:flex-start;
}

.upload-example-icon{
  margin-left:auto;
  margin-right:auto;
}

.refreshed-upload-card #chooseImageButton,
.supported-files,
.refreshed-upload-card .file-preview,
.refreshed-upload-card #preview,
.refreshed-upload-card .status{
  margin-left:auto;
  margin-right:auto;
}

.refreshed-upload-card #chooseImageButton{
  display:flex;
  align-items:center;
  justify-content:center;
}

.supported-files{
  width:100%;
  max-width:410px;
  text-align:center;
}

@media(max-width:390px){
  .morrow-header-logo{
    width:156px;
    max-width:52vw;
  }

  .upload-examples{
    max-width:100%;
    gap:6px;
  }
}


/* v0.5.3 — custom Morrow upload icons, Direction P */
.upload-example-icon{
  width:52px;
  height:52px;
  border-radius:0;
  background:transparent !important;
  color:inherit;
  overflow:visible;
}
.upload-example-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
@media(max-width:390px){
  .upload-example-icon{
    width:46px;
    height:46px;
  }
}