/* Global */
.container { max-width: 1000px; margin: 0 auto; position: relative; }
.well { padding: 20px; }

/* Main Header */
.main-header          { padding: 20px 0; margin-bottom: 40px; background: #2250e3; }
.main-header h1       { margin: 0; }
.main-header a        { color: #52adf5; text-decoration: none; cursor: pointer; }
.main-header a:hover  { color: #fff; }
.main-header nav      { position: absolute; right: 0; top: 13px; }
.main-header .brand a { padding: 12px 0 12px 70px; display: block;  background-image: url(/static/img/World_Triathlon_Stacked_white.png); background-size: contain; background-repeat: no-repeat; font-size: 18px; font-weight: normal; font-family: Ubuntu; }

/* Forms */
.pure-form select { height: 2.55em; }
.pure-form fieldset { padding: 0; }

.aligned-fields .input-wrap label { display: inline-block; width: 200px; }
.aligned-fields .input-wrap input { display: inline-block; }
/* label,
button { margin-top: 10px !important; } */

.inline-fields input[type="text"],
.inline-fields input[type="datetime-local"],
.inline-fields .input-wrap,
.inline-fields button {
    display: inline-block;
}

.body {font-family: Ubuntu; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; }
.h1 { font-family: Ubuntu; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px; } 
.h2 { font-family: Ubuntu; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px; } 
.h3 { font-family: Ubuntu; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; } 
.p { font-family: Ubuntu; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } 
.div{font-family: Ubuntu; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; }
.a { font-family: Ubuntu; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } 
.blockquote { font-family: Ubuntu; font-size: 21px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; } 
.pre { font-family: Ubuntu; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5714px; }

.input-wrap label { margin-bottom: 0; }

/* Text */
.text-success {
    color: rgb(103, 211, 99); /* this is a green */
}

.text-error {
    color: rgb(202, 60, 60); /* this is a maroon */
}

.text-warning {
    color: rgb(223, 117, 20); /* this is an orange */
}

.text-secondary {
    color: rgb(82, 173, 245); /* this is a light blue */
}

/* Buttons */
.pure-button-primary {background: #302682;}
.ui.primary.button, .ui.primary.buttons .button {
    background-color: #302682;}
.button-success,
.button-error,
.button-warning,
.button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {  background: rgb(103, 211, 99); }
.button-error {  background: rgb(202, 60, 60); }
.button-warning {  background: rgb(223, 117, 20); }
.button-secondary {  background: rgb(66, 184, 221); }
.button-xsmall {font-size: 70%;}
.button-small {font-size: 85%;}
.button-large {font-size: 110%;}
.button-xlarge {font-size: 125%;}

/* Other */
.other-tools-links { margin-top: 40px; }

#introduction {
  margin-right: 320px;
}
.instructions {
  width: 300px;
  /* position: absolute; */
  top: 20px; right: 20px;
  font-size: 12px;
}

/* Questions */

.question { margin-bottom: 60px; }
.question .question {margin-bottom: 0; margin-top: 30px;}
.question h3 { display: block; padding-bottom: 5px; border-bottom: 1px solid #aaa; }
.question h4 { display: block; padding-bottom: 5px; border-bottom: 1px solid rgb(196, 196, 196); color: rgb(161, 161, 161); }
.question p { font-style: italic; margin-top: 5px; }
.question-actions { margin-top: 10px; }

.question legend span { display: block; font-size: 0.8em; color: #666; }


  span {font-weight: bold;}

.pure-u-sm-3-5, .pure-u-sm-12-24 {
    width: 100%;
}
.table {
  background: #e5e5e5;
  color: #fff;
  border-radius: .4em;
  overflow: hidden;
  text-align: center;
  tr {
    border-color: lighten(#34495E, 10%);
  }
  th, td {
    margin: .5em 1em;
  }

}
  /* Style the tab */
.tabs {
    margin-top: 80px;
}

/* Style the buttons that are used to open the tab content */
.tabs a {
    display: inline-block;
    margin: 0px 20px 5px 0;
    position: relative;
}

.tabs a.show { font-weight: bold; }

.tabs a:after {
    display: block;
    content: ">";
    text-decoration: none;
    position:absolute;
    top: 0;
    right: -15px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.tabcontent.show { display: block; }

.question .field .para_data { display: none; }

#start_time-fields > .segment > .fields > .field > .fields:nth-child(3) {
    margin-bottom: 0 !important;
}
.para_data > .fields { margin-bottom: 0 !important; margin-top: 1em !important; }

.flash-message {
    position: fixed !important;
    top: 0;
    right: 10px;
    z-index:300;
    transition: all 0.5s;
}
.flash-message.hidden {
    top: -80px;
    transition: all 0.5s;
}

.material-icons.md-12 { font-size: 12px; }
.material-icons.md-14 { font-size: 14px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.nowrap { white-space: nowrap; }
.table-scroll {
    max-width: 100%;
    overflow-x: scroll;
}
.tiny.text { font-size: 10px; line-height: 10px; font-weight: normal; }