/* 
  styles for Relation pages
  mainBackdrop: '#5D9CEC',
  ourBlue: '#2196F3',
  ourWhite: '#FFFFFF',
  ourGold: '#FFC728',
  ourGrey: '#E5E9ED',

  categories
  humanBehavior: '#DEB887',
  criticalThinking: '#FE826E',
  finance: '#5CD6B3',
  technology: '#75B1F2',
*/

body {
    background-color: #5D9CEC;
    text-align: center;
    padding-left: 2%;
    padding-right: 2%;
}

.question-container {
    background-color: azure;
    margin: 0 auto;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    padding: 1em;
    width: 90%;
    max-width: 45em;
}

.question-container-nolink {
    background-color: azure;
    margin: 0 auto;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    padding: 1em;
    width: 90%;
}


.title-area {
    margin-top: 1em;
}

.title {
    color: #FFFFFF;
    font-size: 3em;
}

.category-name {
    color: black;
    font-size: 1.5em;
    font-weight: bold;
}

.question-type-name {
    color: black;
    font-size: 1em;
    font-style: italic;
}

.question-text {
    color: black;
    font-size: 1em;
    padding: 0.5em;
}

.promo-text {
    color: #FFFFFF;
    font-size: 1.5em;
    padding-top: 1em;
}

.answers-container {
    margin: 0 auto;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    padding: 1em;
    width: 90%;
    max-width: 45em;
}

.text-and-try {
    display: flex;
    flex-direction: row;
  }


.ios-store {
    margin: 0 auto;
    padding-top: 1em;
    padding-bottom: 2em;
    max-width: 45em;
}

table {
  margin-left: auto;
  margin-right: auto;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

form {
   margin: 0 auto;
}


label {
    display: inline-block;
    background: #eee;
    width: 90%;
    min-height: 4em;
    border-radius: 5px;
    padding: 0.5em;
}

label.rank {
    background: #eee;
    width: 90%;
    min-height: 4em;
    border-radius: 5px;
    padding: 0.5em;
}
label.picker:hover {
    display: inline-block;
    background: #FFC728;
    cursor:pointer;
    border: 1px solid #aaa;
}

 input.guess:checked+label{ 
     font-weight: bold;
     background: #FFC728;
    }

input.guess {
    visibility:hidden;
    position:absolute;top:0px;left:0px;
}

.siteimages {
  width: 70%;
  height: auto;
}

.category-image  {
    width: 20%;
}

.ranking {
    width: 100%;
}

p.wrong-answers {
    display: inline-block;
    background: #eee;
    width: 90%;
    min-height: 4em;
    border-radius: 5px;
    padding: 0.5em;
    opacity: 0.4;
}

p.correct-answer {
    display: inline-block;
    width: 90%;
    min-height: 4em;
    border-radius: 5px;
    padding: 0.5em;
    background: #FFC728;
    font-weight: bold;
    border: 1px solid #aaa;

}

p.links-after-answers {
    display: inline-block;
    text-align: left;
    width: 90%;
}
.single-external-link {
    display: inline-block;
    width: 90%;
    text-align: left;
}


.reading-header {
    color: #FFC728;
    font-size: 3em;
    font-weight: bold;

}

.reading-text {
    color: black;
    font-size: 1em;
    padding: 0.5em;
    text-align: left;
}

.external-linksSection {
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    margin-Bottom: 30px;
  }


.linkdescription-text {
    font-size: 14;
    display: flex;
    flex-wrap: wrap;
    text-align: left;

  }

  .reading-link-button {
    flex: 2; display: flex; justify-content: flex-end;
  }


  .usertheme-external-link-button {
    white-space: nowrap;
  }


  .usertheme-container {
    background-color: azure;
    margin: 0 auto;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    padding: 1em;
    width: 90%;
    max-width: 45em;
  }

  .usertheme-theme-title {
    color: black;
    font-size: 1em;
    font-weight: bold;
}

.usertheme-text {
    color: black;
    font-size: 1em;
    text-align: left;
}

.usertheme-subtitle {
    color: black;
    font-size: 1.5em;
    text-align: left;
}

.usertheme-secondary-subtitle {
    color: black;
    font-size: 1.2em;
    text-align: left;
}


.text-and-link-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #eee;
    min-height: 4em;
    min-width: 100%;
    border-radius: 5px;
    padding: 0.4em;
    margin-bottom: 0.5em;
}

.text-and-link-item-no-hover {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #eee;
    min-height: 4em;
    min-width: 100%;
    border-radius: 5px;
    padding: 0.4em;
    margin-bottom: 0.5em;
}

.try-question-and-emoji {
    display: flex;

}

.usertheme-emoji {
    margin-left: 0.5em;
    font-size: 1.5em;
}

.usertheme-emoji:hover {
    cursor:pointer;
}

.big-score {
    font-size: xx-large;
}


.text-and-link-item:hover {
    background: #FFC728;
    /* cursor:pointer; */
    border: 1px solid #aaa;
}

.usertheme-data-container {
    margin: 0 auto;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    padding: 0.5em;
    width: 90%;
    max-width: 45em;

}

/* format for the modals on web */
.emoji-modal-body {
    background-color: #2196F3;
    margin: 0 auto;
    border-radius: 1em;
    padding: 1em;
    height: 20;
    width: 70%;
    
}

.modal-image {
    width: 50%;
}

.impact-graphic {
    width: 70%;
}

.answer-response {
    color: black;
    font-size: 1.5em;

}