#meetingCodeContent {

   color: #333;

   /* flexbox */
   display: flex;
   flex-flow: column nowrap;
   align-items: stretch;

   /*background-color: rgba(250,250,250,0.9);*/
   margin: 6px 12px 6px 12px;
   padding: 0;
   height: 312px;

   flex: 1 1 auto;
}

.meetingCodeBackground {
   margin: 0;
   padding: 10px 15px 5px 15px;
   flex: 1 1 auto;

   /* flexbox */
   display: flex;
   flex-flow: column nowrap;
   align-items: stretch;
}

#meetingCodeContent hr {
   display: inline-block;
   color: #BBB;
   background-color: #BBB;
   width: 30%;
   height: 1px;
   border: 0;
   margin-left: 10px;
   margin-right: 10px;
}

#meetingCodeContent span {
   display: inline-block;
   transform: translate(0,-4px);
}

.mcDivider {
   text-align: center;
   margin: 12px 0px;
}



html.useHover #meetingCodeSmallDisplay:hover {
   color: #3AACD6;
}

#mcMainDisplay {
   color: #629FB9;
   font-size: 1.8em;
   font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace;
   font-weight: 400;
   text-align: center;
   letter-spacing: 4px;
   margin-top: 5px;
   height: 33px;
}

.mcDescriptionText {
   font-size: .95em;
}

.mcHelpText {
   font-size: 0.85em;
   color: #888;
}



.meetingCodeOrLabel {
   padding: 6px 12px;
   align-self: flex-end;
}


.mcJoinRow {
   flex: 0 0 auto;
   margin: 8px 0px;

   /* flexbox */
   display: flex;
   flex-flow: row nowrap;
   align-items: stretch;
   justify-content: space-between;

}

#mcInput {
   font-size: 1em;
   padding: 4px 8px;
   margin: 0px;
   border: 1px solid #3AACD6;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
   width: 50%;
   flex: 1 1 auto;
}

.uppercaseText {
   text-transform: uppercase;
}
.lowercaseText {
   text-transform: lowercase;
}

#mcJoinButton {
   font-size: 1em;
   color: #FFF;
   background-color: #3AACD6;
   border-top: 1px solid #3AACD6;
   border-right: 1px solid #3AACD6;
   border-bottom: 1px solid #3AACD6;
   border-left: 0px;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   padding: 2px 8px;
   align-self: stretch;

   flex: 1 0 120px;
}

#mcJoinButton[disabled] {
   color: #AAA;
   background-color: transparent;
   border-top: 1px solid #AAA;
   border-right: 1px solid #AAA;
   border-bottom: 1px solid #AAA;
}

html.useHover #mcJoinButton:not([disabled]):hover {
   color: #FFF;
   background-color: #41C1F0;
}

#mcStatus {
   font-size: 0.8em;
   text-align: center;
   color: #555;
}

.codeSpinner {
   display: inline-block;
   background-image: url("../images/spinner.svg");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 33px 33px;
   width: 33px;
   height: 33px;
}

.statusSpinner {
   display: inline-block;
   background-image: url("../images/spinner.svg");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 18px 18px;
   width: 18px;
   height: 18px;
}

#mcBottomLink {
   font-size: 0.9em;
   align-self: center;
   cursor: pointer;
   border: 1px solid transparent;
   height: 20px;
   user-select: none;
   -moz-user-select: none;
   transition: color 0.5s linear;
}

html.useHover #mcBottomLink:hover {
   padding: 0px 8px;
   border: 1px solid rgba(58, 172, 214, 0.5);
   border-radius: 4px;
}


.meetingCodeSmallDisplay {
   font-size: 1.15em;
   font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace;
   letter-spacing: 2px;
}