/*
* selects every element, ::before and ::after are CSS pseudo elements, comma is how you seperate elements you’re applying rules to in CSS. “apply this rule to all elements, all ::before pseudo-elements and all ::after pseudo-elements”.
*/
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
video::-webkit-media-controls-start-playback-button {
display: none !important;
}
html {
font-family: ProximaNova,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 1rem;
color: #444;
min-height: -webkit-fill-available;
height: 100%;
/*
iphone safe area if needed
MUSt HAVE meta tag for iphone notch fullscreen - viewport-fit=cover"
Ex. below
*/
padding: env(safe-area-inset);
}
body {
margin:0px;
padding:0px;
height: 100%;
min-height: -webkit-fill-available;
}
#root,
#provider_root,
#patient_root {
z-index:8;
position:relative;
background: rgba(45, 49, 59, 0.3);
max-width: 450px;
min-width:360px;
padding: 0.25rem 1rem;
overflow:hidden;
overflow-y:scroll;
max-height: 100vh; /* scroll only to 80% if tge screen height */
/* padding: 0 1rem; */
/* padding-bottom:10px; */
/* background-color: #000; */
}
#root,
#patient_root {
margin: 2rem auto;
margin-top: 1rem;
}
#provider_root {
height:100%;
/* height:100vh; */
}
form {
/* display: flex; */
margin-bottom: 1.5rem;
}
[type="text"],
[type="email"],
[type="number"],
[type="tel"],
button {
display: inline-block;
-webkit-appearance: none;
padding: .5rem 1rem;
font-size: 1rem;
border: 2px solid #ccc;
border-radius: 4px;
}
button {
cursor: pointer;
/*
background: #007bff;
border: 2px solid #007bff;
*/
color: white;
margin: 0 .5rem;
font-weight:bold;
background: #09f;
border: 2px solid #09f;
}
[type="number"],
[type="tel"],
[type="email"],
[type="text"] {
width: 100%;
margin-top:0;
margin-bottom:0;
}
[type="number"]:active,
[type="number"]:focus,
[type="tel"]:active,
[type="tel"]:focus,
[type="email"]:active,
[type="email"]:focus,
[type="text"]:active,
[type="text"]:focus {
outline: 0;
border: 2px solid #007bff;
}
[type="checkbox"] {
margin-right: 0.25rem;
font-size: 2rem;
}
h1, h2 {
color: #fff;
/* color: #222; */
}
ul {
padding: 0;
}
li {
display: flex;
align-items: center;
padding: 0.25rem;
margin-bottom: 0.25rem;
background: #f4f4f4;
border-radius: 4px;
cursor:pointer;
}
li:hover
{
cursor: pointer;
border:#ccc solid 2px;
-moz-box-shadow: 2px 2px 10px #ccc;
-webkit-box-shadow: 2px 2px 10px #ccc;
box-shadow: 2px 2px 10px #ccc;
}
.waiting-list
{
margin-bottom: 20px;
}
.patientBody,
.providerBody {
background-color:#0CF;
color:#fff;
margin:0px;
height: 100%; /* used to allow scroll to hide address bar in mobile device */
}
.logoHolder
{
display: flex;
align-items: center;
padding: 0.25rem;
margin-bottom: 0.25rem;
}
.loginPageLogoHolder
{
margin: 0rem auto;
width: min-content;
padding: 0.75rem;
padding-bottom: 0.35rem;
padding-top: 0.5rem;
/* background: rgba(45, 49, 59, 0.2); */
border-radius: 4px 4px 4px 4px;
cursor:pointer;
margin-left:0.5rem;
}
.logoHolder,
.loginPageLogoHolder
{
display: flex;
align-items: center;
padding: 0.25rem;
margin-bottom: 0rem;
}
.logoBeginLarge,
.logoBegin,
.logoBeginSmall
{
display: inline-block;
padding-bottom: .3rem;
font-family: ProximaNova,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 1.25rem;
color: #09f;
font-style: italic;
font-weight: 600;
}
.logoBeginSmall
{
font-size:1.125rem;
padding-bottom: 0rem;
}
.logoBeginLarge
{
font-size: 1.75rem;
}
.logoMid,
.logoMidSmall,
.loginPageLogoMid
{
display: inline-block;
padding: .1rem;
font-family: LeagueGothicRegular,sans-serif;
font-size: 1.25rem;
color: #fff;
font-weight: bold;
background-color: #09f;
border-radius: .2rem;
margin-top: -.3rem;
margin-left: 0.05rem;
padding-bottom: .0rem;
padding-top: .0rem;
padding-right: .1rem;
}
.logoMidSmall
{
font-size:1.125rem;
margin-top: 0rem;
}
.loginPageLogoMid
{
margin-top: -.0rem;
}
.logEndLarge,
.logoEndLargeLong,
.logoEnd,
.logoEndSmall
{
display: inline-block;
padding-bottom: .3rem;
font-family: ProximaNova,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 1.0rem;
color: #09f;
font-weight: 600;
margin-top: 0.1rem;
}
.logEndLarge
{
font-size: 1.5rem;
}
.logoEndLargeLong
{
/* width: 200px; */
color: rgb(45 49 59 / 59%);
margin-left: 10px;
font-weight: 800;
font-size: 1.5rem;
}
.logoEndSmall
{
font-size:1rem;
padding-bottom: 0rem;
}
.providerStatusHolderOffline,
.providerStatusHolder
{
flex-grow: 1;
justify-content: flex-end;
}
.providerStatusHolder
{
display: flex;
}
.providerStatusHolderOffline
{
display: none;
}
.providerStatusText
{
display: inline-block;
font-family: ProximaNova,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 1.0rem;
color: #fff;
}
.onlineStatusGreenDot,
.onlineStatusRedDot
{
height: 12px;
width: 12px;
border-radius: 50%;
display: inline-block;
margin-left: 0.5rem;
margin-top: 0.15rem;
}
.onlineStatusGreenDot
{
background-color: #53e622;
}
.onlineStatusRedDot
{
background-color: #ff2600;
}
.mediumWhiteText
{
display: inline-block;
font-size: 1.5em;
margin-block-start: 0em;
margin-block-end: 0.83em;
margin-inline-start: 0em;
margin-inline-end: 0em;
font-weight: normal;
line-height: 1.35em;
font-family: ProximaNova,Helvetica Neue,Helvetica,Arial,sans-serif;
}
.sideMediumWhiteText
{
display: inline-block;
font-size: 1.25rem;
margin-block-start: 0.75rem;
margin-block-end: 0.25rem;
margin-inline-start: 0em;
margin-inline-end: 0rem;
font-weight: normal;
line-height: 1.35rem;
font-family: ProximaNova,Helvetica Neue,Helvetica,Arial,sans-serif;
}
.textField,
.textFieldFlex
{
margin-top:0em;
position: relative;
}
.textFieldFlex
{
display:flex;
margin:0em;
justify-content: space-around;
}
.textField
{
margin:1em;
}
.textAreaWide,
.textFieldWide
{
margin: 0.75rem 0rem;
position: relative;
}
.textAreaWide
{
margin-bottom: 0.25rem;
margin-top: 0.5rem;
}
.textFieldWide
{
margin-top: 0.5rem;
}
.field-title-with-top
{
margin-top: 2rem;
}
.field-small-title
{
font-size: 0.75rem;
line-height: 1rem;
}
.error-field-medium-title,
.field-medium-title
{
font-size: 0.875rem;
line-height: 1rem;
}
.error-field-medium-title
{
color: red;
font-weight: 600;
}
.red-text-bold
{
color: #f53c3c;
font-weight: 800;
}
.counter-div
{
display: flex;
justify-content: flex-end;
margin-inline-end: 0.5rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
.capitalizeField
{
/* Only capitalizes the display and not the actual value in the input field, so ignore */
/* text-transform: capitalize; */
}
.bottom_button
{
flex-grow: 1;
flex-shrink: 0;
display: flex; /* flexes this div inside of its container */
flex-direction: column; /* forces flexing in the up/down direction ONLY */
justify-content: flex-end; /* forces div to justify to the end of the flex */
padding-bottom: 10px;
}
.main_menu_holder
{
position: fixed;
display: block;
z-index: 8;
top: 0;
left: 0;
flex-direction: column;
width: 217px;
height: 100%;
font-size: 14px;
transform: translateX(0);
transition: transform .5s;
background: rgba(45, 49, 59, 0.3);
}
.main_menu
{
display: flex;
height: 100%;
flex-direction: column;
background: rgba(45, 49, 59, 0.3);
}
.controlsHolder
{
position: absolute;
bottom: 0;
width:100%;
height: 150px;
z-index:8;
background: rgba(45, 49, 59, 0.7);
border-radius: 8px 8px 0px 0px;
padding: 0.25rem 1rem;
max-height: 80vh; /* scroll only to 80% if tge screen height */
margin-top: 1rem;
visibility: hidden;
}
.connectionLost,
.connectionFound,
.topHolder
{
position: absolute;
top: 0;
width:100%;
z-index:10;
padding: 0.25rem 0rem;
visibility: hidden;
}
.connectionLost
{
background: rgba(255, 38, 0, 0.7);
}
.connectionFound
{
background: rgba(83, 230, 34, 0.7);
}
.connectionHolder
{
display: flex;
justify-content: center;
}
.topSubholder
{
width: 100%;
display: flex;
justify-content: space-between;
}
.circleButton
{
border-radius: 50%;
width: 1.25rem;
height: 1.25rem;
background-color: rgb(44,108,128);
margin-right:1rem;
}
.circleButton::before {
content: "+";
height:1.25rem;
width:1.25rem;
font-size:1.25rem;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
font-weight:bold;
font-family:courier;
color:white;
}
.timerHolder
{
display:flex;
}
.timerTop
{
background: rgba(38, 222, 52, 0.7);
border-radius: 1rem;
font-size:1rem;
font-weight:500;
color: white;
padding: 0.25rem 1rem;
margin: 0.25rem 0.5rem;
}
.addPersonTop,
.nameTop
{
background: rgba(253, 253, 251, 0.7);
border-radius: 1rem;
font-size:1rem;
font-weight:500;
color: #1d1d1f;
padding: 0.25rem 1rem;
margin: 0.25rem 0rem;
}
.addPersonTop
{
display: flex;
justify-content: center;
margin-right:0.25rem;
padding-left: 0.25rem;
}
.addPersonHolder
{
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0.75rem;
}
.addPersonHolderHidden
{
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0.75rem;
visibility:hidden;
}
.addPersonListText
{
margin-bottom: 0.5rem;
}
.spanDarkGrayNoBold
{
color: #1d1d1f;
font-weight: 300;
}
.spanBlueSlightBold
{
color: #09f;
font-weight: 400;
}
.spanDarkGray
{
color: #1d1d1f;
}
.spanBlue
{
color: #09f;
}
.spanPlain
{
color: #1d1d1f;
}
.fullPageHolder
{
position: absolute;
top: 0;
width:100%;
height:100%;
z-index:8;
padding: 0.25rem 0rem;
visibility: hidden;
}
.centerMiddleHolder
{
display: flex;
/* height: 100%; */
align-items: center;
justify-content: center;
margin-top: 50vh;
}
.centerBubble
{
background: rgba(253, 253, 251, 0.7);
border-radius: 1rem;
font-size:1rem;
font-weight:500;
color: #1d1d1f;
padding: 0.25rem 1rem;
margin: 0.25rem 0rem;
}
.controls
{
display: flex;
justify-content: center;
width:100%;
margin-top: 2em;
}
.controlsButtonContainer
{
display: flex;
justify-content: center;
flex-grow: 1;
align-items: center;
}
.zoomValueHolder,
.controlsButtonHolder,
.controlsButtonHolderWhiteBG,
.controlsButtonHolderBlueBG,
.controlsButtonHolderBlueTransBG,
.zoomInButtonHolderBlueTransBG,
.zoomOutButtonHolderBlueTransBG,
.controlsButtonHolderTransBG
{
cursor: pointer;
display: inline-block;
padding:0px;
height: fit-content;
width: fit-content;
/* margin-inline-start: 1.5em;
margin-inline-end: 1.5em; */
}
.zoomValueHolder,
.controlsButtonHolderBlueTransBG,
.zoomInButtonHolderBlueTransBG,
.zoomOutButtonHolderBlueTransBG,
.controlsButtonHolderWhiteBG,
.controlsButtonHolderBlueBG,
.controlsButtonHolderTransBG
{
padding:10px;
border-radius: 50%;
}
.controlsButtonHolderBlueTransBG:hover
{
background: rgba(0, 153, 255, 0.4);
}
.controlsButtonHolderWhiteBG:hover,
.controlsButtonHolderBlueBG:hover,
.controlsButtonHolderTransBG:hover
{
background: white;
}
.controlsButtonHolderTransBG
{
background: tranparent;
}
.controlsButtonHolderBlueBG
{
background:#6FC ;
}
.controlsButtonHolderBlueTransBG
{
background: rgba(0, 153, 255, 0.7);
}
.zoomInButtonHolderBlueTransBG
{
background: rgba(220, 246, 4, 0.7);
margin-left:1rem;
}
.zoomInButtonHolderBlueTransBG:hover
{
background: rgba(220, 246, 4, 0.4);
}
.zoomOutButtonHolderBlueTransBG
{
background: rgba(255, 172, 20, 0.7);
margin-left:2rem;
}
.zoomOutButtonHolderBlueTransBG:hover
{
background: rgba(255, 172, 20, 0.4);
}
.zoomValueHolder
{
cursor: auto;
background: rgba(253, 253, 251, 0.7);
margin-left:1rem;
}
.zoomValueDiv
{
height: 1.5rem;
width: 1.5rem;
font-weight: 400;
display: flex;
/* line-height: 1.5rem; */
/* text-align: center; */
align-content: center;
justify-content: center;
align-items: center;
}
.zoomInButtonIMG,
.zoomOutButtonIMG,
.addPersonButtonIMG,
.controlsButtonIMG,
.controlsMediumButtonIMG
{
width: 64px;
height: 64px;
margin:2px;
border-radius: 7px;
/* margin: auto; */
display: block;
}
.controlsMediumButtonIMG
{
width: 44px;
height: 44px;
}
.addPersonButtonIMG
{
width: 30px;
height: 30px;
}
.zoomInButtonIMG
{
width: 24px;
height: 24px;
}
.zoomOutButtonIMG
{
width: 20px;
height: 20px;
}
/*
.controlsButtonHolder:active,
.controlsButtonHolder:focus {
outline: none !important;
}
.controlsButtonHolder:hover,
.controlsButtonIMG:hover
{
cursor: pointer;
border:#ccc solid 2px;
-moz-box-shadow: 2px 2px 10px #ccc;
-webkit-box-shadow: 2px 2px 10px #ccc;
box-shadow: 2px 2px 10px #ccc;
}
.controlsButtonIMG:active,
.controlsButtonIMG:focus,
.controlsButtonIMG:inactive, {
outline: 0;
border: 2px solid #093;
}
*/
.small-svg-icon-30
{
width: 30px;
height: 30px;
}
.small-svg-icon-35
{
width: 35px;
height: 35px;
}
.small-svg-icon-40
{
width: 40px;
height: 40px;
}
.icon-svg-white
{
fill: #ffffff;
}
.icon-svg-small
{
width: 25px;
}
.inviteButtonMiddleDiv,
.inviteButtonLeftDiv,
.inviteButtonRightDiv,
.inviteButtonDiv,
.copyButtonDiv
{
margin-top:0em;
display: flex;
}
.inviteButtonLeftDiv
{
width: 100%;
border-right-color: lightslategray;
border-right-style: solid;
border-right-width: 1px;
}
.inviteButtonMiddleDiv
{
width: 100%;
border-right-color: lightslategray;
border-right-style: solid;
border-right-width: 1px;
border-left-color: lightgray;
border-left-style: solid;
border-left-width: 1px;
}
.inviteButtonRightDiv
{
width: 100%;
border-left-color: lightgray;
border-left-style: solid;
border-left-width: 1px;
}
.inviteButtonMiddle,
.inviteButtonLeft,
.inviteButtonRight,
.inviteButton,
.copyButton
{
margin: 0rem;
}
.copyButton
{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.inviteButtonMiddle,
.inviteButtonLeft,
.inviteButtonRight,
.inviteButton
{
flex-grow: 1;
border-radius: 5px;
padding: 0.25rem 0rem;
}
.inviteButtonLeft
{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.inviteButtonRight
{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.inviteButtonMiddle
{
border-radius: 0;
}
.copyButtonDiv
{
justify-content: flex-end;
}
.inviteButtonDiv
{
width: 100%;
justify-content: center;
}
copyLinkInput:active,
copyLinkInput:focus,
copyLinkInputHighlighted:active,
copyLinkInputHighlighted:focus
{
border: 1px solid #f4f6f5;
}
.copyLinkInput,
.copyLinkInputHighlighted
{
color: #606c7c;
background: #f4f6f5;
border-radius: 4px;
border: 1px solid #f4f6f5;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding: .5rem 0.5rem;
font-size: 0.875rem;
}
.copyLinkInputHighlighted
{
background: #00ccfff7;
box-shadow: inset 0 0 0 1px #fff;
}
.buttonInnerHolder
{
display: flex;
justify-content: center;
align-items: center;
}
.buttonText
{
display: flex;
align-content: center;
align-items: center;
margin: 0rem 0.5rem;
}
.flexInline
{
}
.submitButtonDiv
{
margin-top:0em;
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 1em;
}
.submitButton
{
/* nothing */
}
.twoButtonsDiv
{
width: 100%;
display: flex;
justify-content: space-between;
}
.form-no-bottom
{
margin-bottom: 0rem;
}
.overlay-buttons-holder
{
border-top: 1px solid lightgray;
padding: 1rem;
}
.cancelButton,
.goButton
{
min-width: 10rem;
margin: 0rem;
}
.cancelButton
{
background: #f53c3c;
border: 2px solid #f53c3c;
}
.goButton
{
background: green;
border: 2px solid green;
}
.menuContentHolder
{
display: flex;
flex-direction: column;
height: 100%;
/*
Padding added ONLY for iphone safe area if needed
MUSt HAVE meta tag for iphone notch fullscreen - viewport-fit=cover"
Ex. below
*/
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.basicButtonHolderHidden,
.basicButtonHolder,
.logoutButtonHolder
{
flex-grow: 1; /* forces div to grow to in the flex-direction */
flex-shrink: 0;
margin-top: 0em;
width: 100%;
justify-content: flex-end;
margin-bottom: 1.5em;
flex-direction: column;
text-align: center;
/*
position: absolute;
bottom: 0;
left: 0;
*/
}
.basicButtonHolder,
.logoutButtonHolder
{
display: flex;
}
.basicButtonHolderHidden
{
display: none;
}
.basicButtonDiv,
.logoutButtonDiv
{
margin-top:0em;
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 1.5em;
position: absolute;
bottom: 0;
}
.logoutButton
{
width: 180px;
height: 40px;
border: 2px solid #F00;
background: #F30;
}
.leaveWaitingRoomButton
{
width: auto;
height: 40px;
/*
border: 2px solid #F00;
background: #F30;
*/
border: 2px solid #ef7b18;
background: #ef7b18;
margin-top: 2rem;
}
.patientHolder {
display: flex;
align-items: center;
padding: 0.25rem;
margin-bottom: 0.25rem;
background: #f4f4f4;
border-radius: 4px;
cursor:pointer;
}
.patientHolder:hover
{
cursor: pointer;
border:#ccc solid 2px;
-moz-box-shadow: 2px 2px 10px #ccc;
-webkit-box-shadow: 2px 2px 10px #ccc;
box-shadow: 2px 2px 10px #ccc;
}
.patientAvatar
{
display: inline-block;
padding:0px;
height:auto;
width:auto;
}
.patientAvatarIMG
{
width: 64px;
height: 64px;
margin:2px;
border-radius: 7px;
/* margin: auto; */
display: block;
}
.nameText {
display: inline-block;
padding-bottom: .3rem;
border-radius: 4px;
border: 2px solid transparent;
font-family: sans-serif;
font-size: 1.25rem;
color: #444;
width:auto;
/* min-width:310px; */
}
.waitingTimeText {
display: block;
font-style:italic;
width:auto;
border-radius: 4px;
border: 2px solid transparent;
font-family: sans-serif;
font-size: 1rem;
color: #CCC;
}
.patientDetails
{
display: block;
padding: .5rem;
width: 100%;
max-width: 350px;
position:relative;
}
.waiting-list
{
/*
max-height: 100vh;
overflow: auto;
*/
}
.moreHolder
{
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-grow: 1;
margin-right: 0.5rem;
padding:0px;
height:30px;
width:15px;
cursor:pointer;
position:relative;
right:0px;
}
.moreDotsYellow
{
background: #FF0;
}
.moreDotsGreen
{
background: #0C3;
}
.moreDotsRed
{
background: #f53c3c;
}
.moreDotsGray
{
background: #999;
}
.moreDotsGreen,
.moreDotsRed,
.moreDotsGray,
.moreDotsYellow,
.moreDots
{
display: block;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
border-radius: 50%;
/* background: #999; */
transform: translateY(25%) translateX(-1%); /* Required - Translate brings dots togehter */
}
.moreDotsGreen::after,
.moreDotsRed::after,
.moreDotsGray::after,
.moreDotsYellow::after,
.moreDots::after
{
bottom: 100%;
margin-bottom: 3px;
}
.moreDotsGreen::before,
.moreDotsRed::before,
.moreDotsGray::before,
.moreDotsYellow::before,
.moreDots::before
{
top: 100%;
margin-top: 3px;
}
.moreDotsGreen::after, .moreDotsGreen::before,
.moreDotsRed::after, .moreDotsRed::before,
.moreDotsGray::after, .moreDotsGray::before,
.moreDotsYellow::after, .moreDotsYellow::before,
.moreDots::after, .moreDots::before
{
position: absolute;
left: 0;
content: ""; /* Required - empty text must be there for this to work */
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
}
.editableText {
display: inline-block;
padding: .5rem;
width: 250px;
border-radius: 4px;
border: 2px solid transparent;
}
.editableText:hover {
background: rgba(179, 215, 255, 0.52);
}
.editableText:focus {
outline: 0;
border: 2px solid #007bff;
background: rgba(179, 207, 255, 0.52)
}
/*------------------------------------------
*
* Cool Buttons
*
*-----------------------------------------*/
.whiteText {
color: #FFF;
}
.startVisitBut {
float:left;
position:absolute;
bottom: 100px;
color: #09F;
font-size:20px;
/* width:200px; */
text-decoration: none;
background: rgba(255, 255, 255, 0.8);
border-radius:8px;
padding:20px;
z-index:90;
-webkit-transform:
translateX(-50%);
transform:
translateX(-50%);
left:50%;
border:1px solid #999;
cursor:pointer;
font-weight: bold;
/* background-color: #0099FF; */
background-color: #3C0;
background-image:url(../css_images/iphone_sms_overlay4.png);
background-repeat:repeat-x;
font-family: Verdana, Geneva, sans-serif;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
text-shadow: 0 -1px 0 black;
color: #FFF;
}
/*------------------------------------------
*
* Video CSS
*
*-----------------------------------------*/
.bg-overlay
{
position:absolute;
width: 100%;
height: 100%;
background: rgba(45, 49, 59, 0.7);
z-index:19;
top:0;
left:0;
display:none;
}
.mid-page
{
margin: 2rem auto;
margin-top: 1rem;
max-width: 460px;
min-width: 360px;
background: white;
color: darkslategrey;
z-index:20;
border-radius: 7px;
max-height: 90%;
overflow: auto;
}
.dropdownHolder,
.dropdownHolderFull,
.dropdownHolderSelected,
.dropdownHolderFullSelected
{
position: absolute;
border: 1px solid transparent;
background-color: transparent;
padding: 0.5rem;
width: auto;
font-weight: normal;
font-family: ProximaNova,Helvetica Neue,Helvetica,Arial,sans-serif;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display: flex;
align-items: center;
height: 2.875rem;
cursor: pointer;
}
.dropdownHolderFull,
.dropdownHolder
{
background-color: transparent;
}
.dropdownHolderFullSelected,
.dropdownHolderSelected
{
background-color: lightgray;
-moz-border-top-right-radius: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;
-moz-border-bottom-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
-moz-border-bottom-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.dropdownHolderFullSelected,
.dropdownHolderFull
{
width:100%;
}
.errorEmailInput::-webkit-input-placeholder,
.errorCellphoneInput::-webkit-input-placeholder,
.emailInput::-webkit-input-placeholder,
.cellphoneInput::-webkit-input-placeholder
{
font-size: 1.25rem;
color: darkgray;
}
.errorEmailInput,
.errorCellphoneInput,
.emailInput,
.cellphoneInput
{
padding-left: 6.75rem;
font-size: 1.5rem;
}
.errorEmailInput,
.emailInput
{
padding-left:1.5rem;
}
.errorEmailInput,
.errorCellphoneInput
{
border: red solid thick;
}
.option-align-right
{
text-align:right;
}
.countryCodeDiv
{
/* position: absolute;
margin-top: -1rem;
margin-left: 0.5rem; */
display: inline-block;
text-align: right;
color: slategray;
font-weight: 500;
margin-right: 0.25rem;
margin-left: 0.5rem;
font-size: 1.25rem;
}
.countryCodeDivHolder,
.emailMethodDivHolder
{
display: flex;
width: 5.5rem;
justify-content: flex-end;
position: relative;
align-items: center;
}
.emailMethodDivHolder
{
width:100%;
justify-content: space-between;
position: relative;
align-items: center;
}
.emailMethodDivSubHolder
{
align-content: center;
justify-content: center;
position: relative;
display: flex;
padding-left: 0.5rem;
position: relative;
align-items: center;
}
.emailmethod-menu,
.countrycode-menu
{
padding-top: 0.25rem;
margin: 0;
}
.emailmethod-item,
.countrycode-item
{
background: none;
padding: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
}
.span-countrycode-item
{
margin-right: 0.5rem;
margin-left: 0.75rem;
}
.emailmethod-item
{
justify-content: space-between;
}
.emailmethod-icon
{
width:25px;
}
.emailmethod-selector-icon
{
width:25px;
margin-left:0.5rem;
}
.error-span-relative-only
.span-relative-only
{
position: relative;
}
.error-span-relative-only
{
outline: red solid 2px;
}
.span-emailmethod-item,
.span-dialcode-item
{
position: relative;
}
.emailmethod-menu-holder,
.countrycode-menu-holder
{
background-color: white;
margin-top: -0.125rem;
max-height: 10rem;
height:auto;
overflow: auto;
border: 2px solid #ccc;
}
.emailmethod-menu-holder
{
max-height: 15rem;
}
.emailmethod-dropdown-holder,
.countrycode-dropdown-holder
{
position: absolute;
display: none;
z-index: 20;
}
.selectBoxNoOutline
{
width:auto;
font-size: 1rem;
border:0px;
outline:none;
background-color:transparent;
margin: 0px;
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
opacity:0;
height: 1rem;
}
/* Makes Drop Down Arrow used by Select tag in a span */
.down_caret_red,
.up_caret_red
{
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position:relative;
}
.down_caret_red
{
border-top: 6px solid #f00;
}
.up_caret_red
{
border-bottom: 6px solid #f00;
}
.overlay-topbar
{
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
border-bottom: 1px solid lightgray;
}
.overlay-title
{
margin-left:1rem;
font-size:1.25rem;
}
.formHolder
{
padding: 1rem;
color: slategray;
}
.choosePersonHolder
{
padding: 0rem 1rem;
color: slategray;
max-height: 75%;
height: auto;
overflow: auto;
margin-bottom: 20px;
border-bottom: 1px solid lightgray;
}
.error-overlay-textarea,
.overlay-textarea
{
resize: none;
width: 100%;
font-size: 1rem;
padding: .5rem 1rem;
font-family: ProximaNova,Helvetica Neue,Helvetica,Arial,sans-serif;
}
.error-overlay-textarea
{
border: red solid thick;
}
.closeX {
display: block; /* IMPORTANT - REVEAL THE MOBILE MENU ICON */
cursor: pointer;
margin: 0.75rem;
margin-bottom: 0.5rem;
}
/* IMPORTANT - TRANSITION TO "X" AFTER CLICKING ON MENU */
.closeX .redbar:nth-child(2) {
opacity: 0;
}
.closeX .redbar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.closeX .redbar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.redbar
{
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: red;
}
/*------------------------------------------
*
* Video CSS
*
*-----------------------------------------*/
video {
border: 1px solid black;
background-color: #000;
/* background-color: #6CC; */
/*width: 640px;*/
/*height: 480px;*/
}
video {
/* Disable video controls */
/* pointer-events: none; */ /* we did this in javascript using videoElement.removeAttribute("controls") */
}
.remoteVideoFullScreen{
width:100%;
height:100%;
object-fit: contain; /*magic* - options are 'cover' (used for regular fullscreen background) or 'contain' */
position:absolute;
top: 0;
bottom: 0;
margin: 0 auto;
top:0px;
z-index:2;
visibility:hidden;
}
/* Default is mirror image */
.spinnerMiniScreen,
.videoMiniScreen,
.videoMiniScreenNoMirror
{
width:25%;
float:left;
position:absolute;
z-index:15;
border:solid 1px #555;
border-radius:8px;
bottom: 20px;
right:10px;
visibility:hidden;
/*
Padding added ONLY for iphone safe area if needed
MUSt HAVE meta tag for iphone notch fullscreen - viewport-fit=cover"
Ex. below
*/
margin-left: env(safe-area-inset-left);
margin-right: env(safe-area-inset-right);
background-size: 10rem;
background-repeat: no-repeat;
/* background-image: url(../icons/blue_loading.gif); */
background-position: center;
}
.videoMiniScreen
{
-webkit-transform: scaleX(-1); /* Used to create mirror image from frontfacing camera */
transform:scaleX(-1); /* Used to create mirror image from frontfacing camera */
}
.videoMiniScreenNoMirror
{
-webkit-transform: scaleX(1); /* Used to create mirror image from frontfacing camera */
transform:scaleX(1); /* Used to create mirror image from frontfacing camera */
}
.spinnerMiniScreen
{
z-index:16;
border: none 1px #555;
justify-content: center;
align-items: center;
display: flex;
visibility: hidden;
height: auto;
}
/*
Use as follows: (note: the more divs you put inside the main one,
the wider the circumference of the spinner arc
*/
.spinnerRingMedium
{
display: inline-block;
position: absolute;
width: 60px;
height: 60px;
}
.spinnerRingMedium div
{
box-sizing: border-box;
display: block;
position: absolute;
width: 48px;
height: 48px;
margin: 4px;
border: 4px solid #fff;
border-radius: 50%;
animation: spinnerRingMedium 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.spinnerRingMedium div:nth-child(1) {
animation-delay: -0.45s;
}
.spinnerRingMedium div:nth-child(2) {
animation-delay: -0.3s;
}
.spinnerRingMedium div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes spinnerRingMedium {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.videoMiniScreenLeft{
width:25%;
float:left;
position:absolute;
z-index:5;
border:solid 1px #555;
border-radius:8px;
bottom: 20px;
left:10px;
-webkit-transform: scaleX(-1); /* Used to create mirror image from frontfacing camera */
transform:scaleX(-1); /* Used to create mirror image from frontfacing camera */
}
.videoFullScreen{
height:100%;
width:auto;
/* width:100%;
flaot:left; */
position:absolute;
/*
display: block;
margin-left: auto;
margin-right: auto;
*/
left: 0;
right: 0;
margin: 0 auto;
z-index:5;
border-radius:0px;
top: 0px;
pointer-events: none;
-webkit-transform: scaleX(-1); /* Used to create mirror image from frontfacing camera */
transform:scaleX(-1); /* Used to create mirror image from frontfacing camera */
}
.video_frame
{
clear: left;
margin:0px;
padding:0px;
z-index:5;
background-color: #FFC;
}
@media only screen and (max-width: 768px) { /* IMPORTANT - FLEX DIRECTION COLUMN VERTICAL */
.logoutButton
{
width: 120px;
height: 40px;
border: 2px solid #F00;
background: #F30;
}
}