/* 
CSS for Coral 
https://github.com/coralproject/talk/blob/develop/CSS_VARIABLES.md

*/

@keyframes fadein {
    from { opacity: 0; height: 0px }
    to   { opacity: 1; height: auto}
}

:root {
  /* Change primary font */
  --font-family-primary: "Open Sans", sans-serif; /* Before 6.3.0: --font-family-sans-serif */
  --round-corners: 0px;
  --font-size-1: 1rem; /* Comments counter, links at bottom */
  --font-size-2: 1rem;
  --font-size-3: 1rem; /* Comment Text, Rich Text Box Text */
  --font-size-4: 1rem; /* Tab labels and user names above comments */
  --font-size-5: 1rem;
  --font-size-6: 1.rem;
  --font-size-7: 1.1rem;
  --font-size-8: 1.1rem;
  --font-size-9: 1.1rem;
  --font-size-icon-xl: 2.25rem;
  --font-size-icon-lg: 1.4rem;
  --font-size-icon-md: 1.4rem; /* Icons in Rich Text */
  --font-size-icon-sm: 1rem;
  --font-size-icon-xs: 1.4rem;
  --spacing-1: 8px;
  --spacing-2: 8px;
  --spacing-3: 16px;
  --spacing-4: 8px;
  --spacing-5: 8px;
  --spacing-6: 16px;
  --spacing-7: 16px;
  --spacing-8: 16px;
  --spacing-9: 16px;
  --mini-unit-small: 4;
  --mini-unit-large: 8;
  --mini-unit: calc(1px*var(--mini-unit-small));
}

.coral.coral-createComment,
.coral.coral-viewerBox,
.coral.coral-allComments,
.coral.coral-myComments,
.coral.coral-comment{
  animation: fadein 0.4s;
}

/* Site specific: uses classnames set in Site Config */
.GBL{
    --palette-primary-100: #f7f2eb; /* Before 6.3.0: --palette-primary-lightest */
    --palette-primary-200: #e6d9c3; /* Before 6.3.0: --palette-primary-lighter */
    --palette-primary-300: #d6c09b; /* Before 6.3.0: --palette-primary-light */
    --palette-primary-400: #c5a773; /* Before 6.3.0: --palette-primary-main */
    --palette-primary-500: #b6904e; /* The main one Before 6.3.0: --palette-primary-main The main one*/
    --palette-primary-600: #8c6e3a; /* Before 6.3.0: --palette-primary-main */
    --palette-primary-700: #644f29; /* Before 6.3.0: --palette-primary-main */
    --palette-primary-800: #3c2f19; /* Before 6.3.0: --palette-primary-dark */
    --palette-primary-900: #141008; /* Before 6.3.0: --palette-primary-darkest */ /* Before 6.3.0: --palette-primary-darkest */  
}

.HHE{

}

.EDP{

}

/* Family Notices: change Comments to "Messages" */
/* Tab Bar */
.family-notice .coral-tabBar-comments span,
.family-notice .coral-tabBarComments-allComments div{
  font-size: 0px;
}

.family-notice .coral-tabBar-comments span:after,
.family-notice .coral-tabBarComments-allComments div:before{
  content: "Messages";
  font-size: 16px;
}

.family-notice .coral.coral-counter{
  padding-left: 8px;
  padding-right: 8px;
}

.family-notice .coral.coral-rte-placeholder{
  font-size: 0px;
}

.family-notice .coral.coral-rte-placeholder:after{
  content: "Write a message";
  font-size: 16px;
}

/* Sign in button */
.family-notice .coral.coral-createComment-signIn{
  font-size: 0px;
}
.family-notice .coral.coral-createComment-signIn:after{
  content: "Write a message";
  font-size: 16px;
}

/* Top of comments*/
.family-notice .coral.coral-streamFooter-commentsTopLink{
  font-size: 0px;
}

.family-notice .coral.coral-streamFooter-commentsTopLink:after{
  content: "Top of messages";
  font-size: 16px;  
}

.family-notice .coral.coral-streamFooter-articleTopLink{
  font-size: 0px;
}

.family-notice .coral.coral-streamFooter-articleTopLink:after{
  content: "Top of notice";
  font-size: 16px;   
}

.family-notice #comments-allComments-log [class^="CallOut-root"] [class^="CallOut-inner"]{
  font-size: 0px;  
}

.family-notice #comments-allComments-log [class^="CallOut-root"] [class^="CallOut-inner"]:after{
  content: "There are no messages yet. Why don't you write one?";
  font-size: 16px!important;  
}

.coral nav{
  margin: 0px 0px 16px 0px!important;
}

.coral.coral-tabBar-tab{
  padding: 12px;
  background-color: #ffffff;
  font-weight: var(--font-weight-secondary-bold);
  border-bottom: 1px #f0f0f0 solid;
}

.coral.coral-tabBar-tab:before,
.coral.coral-tabBar-tab-active:before{
  display:none;
}

.coral.coral-viewerBox {
  padding-left: 12px;
  margin-bottom: 16px!important;
}

.coral.coral-viewerBox-username,
.coral.coral-viewerBox-username +span{
  font-size: 17px;
  font-weight: bold;
  margin: 0px;
  float: left;
  padding-bottom: 0px;
}

.coral.coral-commentForm{
  margin-bottom: 16px;
}
.coral.coral-comments{
  padding-top: 0px;
}

.coral.coral-rte{
  margin-bottom: calc(2px*var(--mini-unit));
}
.coral.coral-createComment{
  margin-bottom: 0px;
}

.coral.coral-createComment-submit{
  color:white
}

.coral.coral-createComment-submit:hover{
  color:white
}

.coral.coral-viewerBox > div{
    margin: 0px 10px 0px 0px;
    font-size: 17px;
    line-height: 18px;
}

.coral.coral-counter{
    padding: 3px 10px;
}

.coral.coral-streamFooter{
  padding: 10px;
}