/* css/style.css */
body
{
  margin: 0;
  font-family: 'Roboto','Helvetica Neue';
  font-size: 1em;
  height: 100%;
}

p
{
  margin: 0;
}

html
{
  margin: 0;
  font-size: 1em;
  height: 100%;
  overflow: hidden;
}

div:focus
{
  outline: 0;
}

input, textarea, select, button
{
  outline: 0;
}

/*----- txt,links,lines,titles -----*/

h1, h2, h3, h4, h5
{
  color: #000;
  font-weight: normal;
  padding-bottom: 20px;
  position: relative;
  text-transform: none;
  text-shadow: 1px 1px #e1e1e1;
}

h1
{
  font-size: 29px;
  line-height: 32px;
}

h2
{
  font-size: 26px;
  line-height: 28px;
}

h3
{
  font-size: 24px;
  line-height: 26px;
  word-spacing: -1px;
}

h3 span
{
  display: block;
  margin-top: -1px;
}

h4
{
  font-size: 20px;
  line-height: 22px;
}

h5
{
  font-size: 18px;
  line-height: 20px;
}

h6
{
  line-height: 1em;
  font-size: 18px;
  color: #323232;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 19px;
}

a
{
  outline: none;
  cursor: pointer;
  text-decoration: none;
}

a:focus
{
  outline: none;
}

a:hover
{
  text-decoration: none;
}

.clear
{
  clear: both;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

p > a
{
  color: #000;
  font-weight: bold;
  text-decoration: underline;
}

p > a:hover
{
  text-decoration: none;
}

p em
{
  color: #777777;
}

p strong
{
  color: #252525;
}

.p
{
  padding-top: 1px;
}

.overflow
{
  overflow: hidden;
}

section#content
{
  padding: 0 0 14px;
}

footer
{
  padding: 20px 0 20px;
}

.Cr8LargeToolTip
{
  display:flex;
  align-items: center;
  background-color:#363636;
  border:2px solid #969696;
  border-radius:15px;
  height:1rem;
  padding:.4rem;
  color:#969696;
  text-transform: capitalize;
  white-space: nowrap;
}

.Cr8ToolTip
{
  display:flex;
  align-items: center;
  background-color:#363636;
  border:2px solid #969696;
  border-radius:6px;
  height:.8rem;
  padding:.2rem;
  color:#969696;
  font-size:1rem;
  text-transform: capitalize;
  white-space: nowrap;
}


#contentContainer
{
  height:100%;
  width:100%;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}


#contentContextContainer
{
  display: flex;
  position: relative;
  width:100%;
  height:99%;

}

#confScreenShareContainer
{
  height:100%;
  display:none;
  background-color:black;
}

.Cr8AppFrame
{
  width:100%;
  height:100%;
  display:flex;
}

.Cr8LeftNavContainer
{
  width:6vw;
  height:100%;
  background:linear-gradient(90deg, #000000 0%, #2B2B2B 100%);
  box-sizing: border-box;
}

.Cr8StdDialogBtnBar
{
  display: flex;
  justify-content: center;
}

.Cr8StdDialogBtn
{
  text-transform: uppercase;
  color: #5c9ec8;
  width: 6em;
  height: 2.5em;
  border: 1px solid #5c9ec8;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

}

.Cr8StdDialogBtn:nth-child(n+2)
{
  border-left: none;
}

.Cr8BlueImg
{
  display:none;
}


.Cr8AppFrameHdrTitle
{
  color: white;
  font-size: 150%;
  text-transform: capitalize;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
 }


.Cr8PopUpOverlay
{
  background: rgba(0, 0, 0, 0.9);
}


#mouseOverImageDisplay
{
  position: absolute;
  width: 350px;
  height: 350px;
  display: inline-block;
  padding: 1em;
  float: left;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
}

#mouseOverImageDisplay img
{
  width: 100%;
  height: 100%;
  border: 2px solid #5c9ec8;
  box-sizing: border-box;
  border-radius: 0.2em;
  object-fit: cover;
}

.Cr8FormTooltip
{
  text-align: center;
  background: #111;
  position: absolute;
  z-index: 99999;
  padding: 15px;
  border: 1px solid white;
  border-radius: 2px;
  color: white;
}

.Cr8FormTooltip:after
{
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  content: '';
  position: absolute;
  border-bottom: 10px solid #5c9ec8;
  top: -9px;
  margin-left: -10px;
  left: 50%;
}



.Cr8BlueBorderButton
{
  border: 2px solid #5c9ec8;
  border-radius: 2px;
  box-sizing: border-box;
  outline: 0;
  background: transparent;
  color: #5c9ec8;
  text-transform: capitalize;
  cursor: pointer;
  font-size: 100%;
}


.Cr8SignupButton
{
  width: 10em;
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Cr8MsgPopup
{
  align-items: center;
  justify-content: center;
  width: 28em;
  height: 30em;
  box-sizing: border-box;
  padding: 1em;
  background: rgba(0, 0, 50, 0.85);
}

.Cr8MsgPopupContent
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #5c9ec8;
  border-radius: 2px;
}


.Cr8BlueButton
{
  border: 2px solid #5d9ec8;
  border-radius: 2px;
  box-sizing: border-box;
  text-transform: uppercase;
  color: #5d9ec8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.Cr8GreyButton
{
  border: 2px solid black;
  border-radius: 2px;
  box-sizing: border-box;
  text-transform: uppercase;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#999, #666);
  cursor: pointer;
}

.Cr8QuestionMarkImage
{
  width: 1.5em;
  height: 1.5em;
  background-image: url("/images/icons/question_circle_black_blue.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-right:.3em;
}

.Cr8DialogButton
{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  background:black;
  color:#5c9ec8;
  border:3px solid #5c9ec8;
  border-radius:6px;
  cursor:pointer;

}


.Cr8DialogButton:hover
{
  background:#5c9ec8;
  color:black;
}

.Cr8Button
{
  display:flex;
  align-items:center;
  justify-content:center;
  height:2.5em;
  min-width:5rem;
  border-radius:6px;
  padding-left:1rem;
  padding-right:1rem;
  margin-right:1rem;
  cursor:pointer;
  z-index:99999;

}

.Cr8Background.Blue, .Cr8Button.Blue
{
  background:linear-gradient(180deg, #5C9EC8 0%, #1C91E2 47%, #5865B9 100%);
  color:black;
}

.Cr8Button.Disabled
{
  background:linear-gradient(180deg, #5C9EC8, #1C91E2);
  color:grey;
  cursor:not-allowed;
}

.Cr8Background.Black, .Cr8Button.Black
{
  background-image: linear-gradient(to bottom, #363636, #1e1e1e);
  color:#969696;
  
}

.Cr8Button img
{
  width:1.8em;
  height:1.8em;
}

.Cr8Button.Blue:hover
{
  background:#5c9ec8;
  color:black;
}

.Cr8BlueText
{
  color: #5c9ec8 !important;
}

.Cr8Red
{
  background:red;
}

.Cr8RedText
{
  color: red !important;
}

.Cr8WhiteText
{
  color: white !important;
}


.Cr8Tab
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid grey;
  border-radius: 2px;
  font-weight: normal;
  text-transform: capitalize;
  cursor: pointer;
}

.Cr8Tab img
{
  height: 2em;
}

.Cr8RadioLabel
{
  margin-left:.4rem;
  max-width: 90%;
}

.Cr8StdInput::placeholder
{
  color:#5c9ec8;
}

.Cr8CursorPointer
{
  cursor:pointer;
}


.Cr8IconPointer
{
  cursor:pointer;
}

.Cr8FormFieldWrapper
{
  border: solid 2px #5c9ec8;
  vertical-align: middle;
  border-radius: 0.2em;
  height: 3em;
  display: table;
  width: 90%;
  margin: 0 auto;
}

.Cr8ErrorOutlineField
{
  border: 3px solid red !important;
}

.Cr8FormFieldImg
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.Cr8FormFieldImg img
{
  height: 2.5em;
  width: 2.5em;
  padding: 3px 0.25em;
  box-sizing: border-box;
}

.Cr8FormFieldInput
{
  background:transparent;
  height:1.5rem;
  outline:0;
  color:white;
  border:2px solid #5c9ec8;
  border-radius:6px;
  padding-left:.2rem;
  padding-right:.2rem;
}


.Cr8FormFieldInput::placeholder
{
  color:#5c9ec8;
}

.Cr8TextDark
{
  color:#969696;
}

.Cr8TextDark.Small
{
  font-size:80%;
}

.Cr8TextLight
{
  color:white;
}

.Cr8TextLight.Small
{
  font-size:80%;
}

.Cr8FilterSearchBar
{
  width: 100%;
  display: flex;
}

::placeholder
{
  color:#5c9ec8;

}


.Cr8FullScreenViewer
{
  display:flex;
  flex-direction:column;
  position:absolute;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  background:black;
}

.Cr8DialogFormBorder
{
  border:2px solid #5c98c8;
  border-radius:6px;
}


.Cr8IconHoverContainer
{
  display:flex;
  align-items:center;
}

.Cr8ActionImg
{
  display:none;
}

.Cr8IconHoverContainer img
{
  cursor:pointer;
}

.Cr8IconHoverContainer:hover .Cr8GreyImg
{
  display:none;
}

.Cr8IconHoverContainer:hover .Cr8ActionImg
{
  display:inline;
}

.Cr8GreenDot
{
  position:absolute;
  right:.6rem;
  top: 2px;
  background:#00ff00;
  width:.6em;
  height:.6em;
  border-radius:50%;
}

.Cr8Elipsis
{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

.Cr8DialogFormBorder
{
  border:2px solid #5c98c8;
  border-radius:6px;
}

.Cr8DialogTextInput
{
  height:1.5em;
  font-size:120%;
  background:black;
  color:#5c9ec8;
  outline:0;
  padding-left:.4em;
  border:3px solid #5c9ec8;
  border-radius:6px;
}


.Cr8NoSelect
{
  user-select: none;
}

.Cr8RadioBtnOuter
{
  display:flex;
  align-items: center;
  justify-content: center;
  width:1.2rem;
  height:1.2rem;
  background:black;
  border-radius:50%;
  border:1px solid #5c9ec8;
}

.Cr8RadioBtnInner
{
  width:.8rem;
  height:.8rem;
  border-radius:50%;
  background:#5c9ec8;
  display:none;
}

.Cr8RadioBtnLabelContainer
{
  display:flex;
  align-items:center;
  margin-top:.4rem;
  cursor:pointer;
}

.Cr8Grey
{
  color:#969696;
}

.Cr8Black
{
  color:black;
 }

.Cr8AnnotationWindow
{
  width: 100vw;
  position: absolute;
  left: 0;
  bottom:0;
  z-index: 99999;
}

.Cr8AnnotationWindow.ECN
{
  bottom: 2rem;

}

.Cr8CenterBlockInParent
{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}