@import url("font-rubik.css");

.arrow-permission {
	position: relative;
  margin: 0 auto;
  width: 100px;
  transform: rotate(250deg);
}

.arrow-permission .curve {
	border: 4px solid #FFFF00;
	border-color: transparent transparent transparent #FFFF00;
    height: 720px;
    width: 460px;
    border-radius: 460px 0 0 300px;
}

.arrow-permission .point {
	position: absolute;
	left: 80px;
    top: 630px;
}

.arrow-permission .point:before, .arrow-permission .point:after {
	border: 2px solid #FFFF00;
	height: 25px;
	content: "";
	position: absolute;
}

.arrow-permission .point:before {
    top: -13px;
    left: -10px;
	transform:rotate(-59deg);
	-webkit-transform:rotate(-59deg);
  -moz-transform:rotate(-59deg);
  -ms-transform: rotate(-59deg);
}

.arrow-permission .point:after {
    top: -23px;
    left: -3px;
	transform:rotate(-17deg);
	-webkit-transform: rotate(-17deg);
  -moz-transform:rotate(-17deg);
  -ms-transform: rotate(-17deg);
}

body{
    font-family: rubikregular, 'Roboto', sans-serif;
    color: #024668;
}

.strikethrough-text-red{
    text-decoration: line-through red;
}

#qrcode canvas img{
    margin: auto;
}

.lang-active{
    background-color: white !important;
    color:#024668 !important;
}

 @-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

@keyframes glow {
    from {
    -webkit-box-shadow: 0 0 10px -10px #3CFFFE;
    -moz-box-shadow: 0 0 10px -10px #3CFFFE;
      box-shadow: 0 0 10px -10px #3CFFFE;
    }
    to {
        -webkit-box-shadow: 0 0 10px 10px #3CFFFE;
        -moz-box-shadow: 0 0 10px 10px #3CFFFE;
         box-shadow: 0 0 10px 10px #3CFFFE;
    }
}

.precall-symptom-box{
    width: 965px;
    height: 465px;
    position: absolute;
    z-index: 1000;
    border-radius: 20px;
    top: 20px;
    left:45px;
}

.warning-red-box{
    width: 500px;
    height: 465px;
    position: absolute;
    z-index: 1000;
    border-radius: 20px;
    top: 20px;
    left:45px;
}

.fa-phone{
    transform: rotate(0deg) scaleX(-1);
}

.pulse {
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 0 white;
    animation: pulse 1s infinite;
  }
  .pulse:hover {
    animation: none;
  }
  
  @-webkit-keyframes pulse {
    0% {
      -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 150px rgba(255,255,255, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
    }
  }
  @keyframes pulse {
    0% {
      -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
      box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 150px rgba(255,255,255, 0);
        box-shadow: 0 0 0 150px rgba(255,255,255, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0);
    }
  }

.patient-arrow {
	position: relative;
    background: #00a1dc;
    border-radius: 10px;
    display: inline-block;
    padding: 10px 10px 10px 60px;
}
.patient-arrow:after {
	left: 100%;
	top: 20px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 185, 213, 0);
	border-left-color: #00a1dc;
	border-width: 10px;
    margin-top: -10px;
}

.doctor-arrow {
	position: relative;
    background: white;
    border-radius: 10px;
    display: inline-block;
    padding: 10px 60px 10px 10px;
}
.doctor-arrow:after {
	right: 100%;
	top: 20px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 185, 213, 0);
	border-right-color: white;
	border-width: 10px;
    margin-top: -10px;
}

.cursor-pointer{
    cursor: pointer;
}

.normal-call{
    background-color:#024668;
    color:white;
}

.end-call{
    background-color:white;
    color:#024668;
    border-style: solid;
    border-color: #024668;
}

.action-button{
    width:130px;
    height:100px;
    border-radius:20px;
}

.speech-bubble-patient {
	position: relative;
	background: #024668;
    border-radius: .4em;
    color:white;
}

.speech-bubble-patient:after {
	content: '';
	position: absolute;
	top: 0;
	left: 370px;
	width: 0;
	height: 0;
	border: 1.156em solid transparent;
	border-bottom-color: #024668;
	border-top: 0;
	margin-left: -1.156em;
    margin-top: -1.156em;
}

.speech-bubble-doctor {
	position: relative;
	background: #ffffff;
	border-radius: .4em;
}

.speech-bubble-doctor:after {
	content: '';
	position: absolute;
	top: 0;
	left: 30px;
	width: 0;
	height: 0;
	border: 1.156em solid transparent;
	border-bottom-color: #ffffff;
	border-top: 0;
	margin-left: -1.156em;
	margin-top: -1.156em;
}

.arrow-down{
    width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #2f2f2f;
	font-size: 0;
	line-height: 0;
}

.canvas{
    margin: 20px auto;
    padding-left: 15px;
    padding-right: 15px;
    width:1366px;
    height:768px;
    box-shadow: 0px 30px 100px 1px #A9A9A9;
}

.doctor-modal-info{
    z-index: 1000;
    position:absolute;
    left:0;
    right:0;
    top:20px;
}

.consultation-info-box{
    width:450px;
    z-index: 1000;
    margin: 60px auto;
    transition: all 700ms;
    height: 600px; 
    border-radius: 20px; 
    background-color: #fff; 
    box-shadow: 0px 0px 10px 1px #A9A9A9;
    position: relative;
    overflow: hidden;
}

.blocked-by-modal{
    position:absolute;
    height:708px;
    width:1025px;
    background-color: rgba(0,0,0,0.6);
    z-index: 999;  
}

.top-menu{
    height:60px;
    background-color:white;
}

.top-menu-logo{
    margin-bottom:15px;
    height:75px;
    border: 2px solid #fff;
    border-radius: 10px;
}

.consult-action-bar{
    background-color:white;
    border-radius: 10px;
}

.wait-consultation{
    height:96px;
    background-color:#024668;
}

.content{
    height:100%;
    background-color:#fff;
}

.patient-menu-avatar{
    border-radius: 50%;
    height:70px;
    width:70px;
    border: 2px solid #fff;
}

.patient-menu-username{
    color:white;
    font-size:1.4em;
    line-height: 1.2;
    max-width: 200px;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: 800;
}

.header-logo{
    margin:auto;
    width:900px;
    margin-top:18px;
    margin-bottom:20px;
}
.box-content{
    margin: auto;
    width:900px;
    padding-top:64px;
    padding-left:60px;
    padding-right:60px;
    padding-bottom:50px;
    background-color:white;
    box-shadow: 0px 20px 100px 3px #00A1DC;
}

.box-blocking-content{
    margin: auto;
    background-color:white;
    box-shadow: 0px 20px 100px 3px #00A1DC;
}

.inner-left-panel {
    padding: 0 30px;
    color: #fff;
}

.bg-doctor { background: url('/img/bg-wallpaper.jpg') #fff no-repeat right; background-size: cover; }
.bg-white { background-color: #fff; }
.bg-gray { background-color: #D8ECED !important; }

.icon-user-white { font-size: 70px; color:#fff; }

.capsule { font-size: 20px; font-weight: 800; cursor: pointer; position: absolute; bottom: 35px; }
.capsule img { width: 28px; margin-top: -6px; }
.capsule .capsule-left { background-color: lightgray; color: #fff; padding: 10px; text-align: right; border-radius: 20px 0 0 20px; float: left; white-space: nowrap; height: 50px;}
.capsule .capsule-right { background-color: lightgray; color: #fff; padding: 10px; text-align: left; border-radius: 0 20px 20px 0; float: right; white-space: nowrap; height: 50px;}
.capsule-left.lang-active, .capsule-right.lang-active { background-color: #fff; color: #212529; cursor: default; }

.bg-blue { background-color: #024668; }
.rounded-right { border-radius: 0 20px 20px 0 !important; }
.text-bold { font-weight: 800; }
.text-right { text-align: right; }
.margin-center { margin: 0 auto !important; }

.menu-navigations a { font-weight: 800; text-transform: uppercase; font-size: 20px; cursor: pointer; }

.innerRightMenu { padding: 120px 30px; }

.select-symptom-option { -webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;-ms-transition: all 0.2s ease;transition: all 0.2s ease;cursor:pointer;display: flex;background-color:white;justify-content: flex-end;flex-direction: column;text-align: center;padding-top: 10px;padding-bottom: 10px; border-radius: 20px; }
.select-symptom-option label { text-transform: uppercase; font-weight: bold; padding-top: 5px; font-size: 13px; }
.select-symptom-option img { max-height: 60px; max-width: 60px; }
.select-symptom-option img.symptom-selected-icon { display:none; }
.select-symptom-other-text { background-color:#024668;display: flex;align-items: center;justify-content: center; width:100%; border-radius: 20px 0 20px 20px; padding: 20px 0 !important; }
.select-symptom-other-text input#symptomNote { font-size: 21px; text-align: center; }
.btnNextConsult { cursor:pointer;margin: auto;display: block;height: 80px; }

ul.list-thumbnail { padding-left: 0; }
ul.list-thumbnail li { margin-bottom: 5px; list-style: none; padding: 8px 0; opacity: .7; position: relative; cursor: pointer; }
ul.list-thumbnail li p { color: #fff; }
ul.list-thumbnail li.selected, ul.list-thumbnail li:hover { border-left: 8px solid #70bfc1; opacity: 1; background-color: #3E4D5C; }
ul.list-thumbnail li > div { margin-left: 25px; }
ul.list-thumbnail li.selected > div, ul.list-thumbnail li:hover > div { margin-left: 0px; }
ul.list-thumbnail li.selected:after { content: ""; display: inline-block; background: url('/img/checked.png') center center no-repeat; height: 32px; width: 30px; position: absolute; top: 35px; right: 10px; }

#btnPayment { cursor: pointer; }
#subprecall { top: 0px; left: 30%; position: absolute; z-index: 4; margin-top: 60px; width: 450px; height: 600px; background-color: rgb(2, 70, 104); transition: all 700ms; }
#consultation-info-box { top: 0px; left: 30%; position: absolute; z-index: 5; }

#subPaymentMethods { height: 100%; flex-direction: column; overflow-x: hidden; overflow-y: scroll; flex-wrap: nowrap; }
#subPaymentMethods > a { padding: 10px 20px; border-radius: 20px; margin: 10px 10px 10px 20px; background-color: #fff; }

.optionrow { padding: 10px 0; margin: 10px; background-color: #fff; cursor: pointer; max-height: 98px; }
.optionrow > .icon, .optionrow > .icon * { color: #024668 !important; max-height: 50px; }
.optionrow > .middle > .title { color: #024668; font-weight: 800; text-transform: uppercase; font-size: 1.2em; white-space: normal; word-break: break-word; }
.optionrow > .middle > .subtitle, .optionrow > .middle > .subtitle * { color: #024668 !important; margin-bottom: 0px; font-weight: 800; }
.optionrow > .right { text-align: right; }
#subPaymentMethods .optionrow > .icon, #subPaymentMethods .optionrow .icon * { -webkit-transform-style: preserve- 3 d; -webkit-transition: all ease-in-out 0.3s; }
#subPaymentMethods .optionrow:hover > .icon, #subPaymentMethods .optionrow:hover .icon * { -webkit-transform: rotatey(180deg); }

.withBgWallpaper { background: url('/img/bg-wallpaper.jpg') #fff no-repeat right; }
.border-bottom { border-bottom: 1px solid #ece7e3; }
.rounded { border-radius: 12px; }
.absolute-right { position: absolute; right: 0; }
.absolute-bottom { position: absolute; bottom: 0; }
.pull-right { float: right; }

.label-capsule { white-space: nowrap; font-size: 13px; padding: 5px 10px; border-radius: 20px; font-weight: 600;}
.label-green { background-color:green; color: #fff; }
.label-yellow { background-color:yellow; color: #000; }
.label-red { background-color:red; color: #fff; }
.text-red { color: red !important; }

.strippedDiv { border-top: 1px dashed #33465b; border-bottom: 1px dashed #33465b; background-color: #D8ECED; }
.selected-toggle-mode {
    background-color: #024668;
    padding: 5px 10px;
    border-radius: 15px !important;
    color: white !important;
}
.selected-toggle-mode.with-arrow:after {
    content: '';
    width: 10px;
    height: 10px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 15px solid #024668;
    clear: both;
    position: absolute;
    top: 43px;
}
.select-capsule-container { cursor: pointer; display: flex; align-items: center; justify-content: space-evenly; background-color: #B3DAD1; margin: 0px; padding: 8px; border-radius: 20px !important; }
.select-capsule-container .toggle-capsule { display: flex; align-items: center; justify-content: center; font-size: 18px; width: 50%; color: #8CA5A5; }
.lottie-label { position: absolute; top: 51%; color: #fff; font-size: 23px; left: 15%; font-weight: 800; }

.call-buttons { position: absolute; left: 0; right: 0; bottom: 0; }
.call-accept { cursor: pointer; font-size: 2em; color: #fff; border-radius: 0 70px 0 0; background-color: #60BABD; padding: 15px; font-weight: 800; }
.call-reject { cursor: pointer; font-size: 2em; color: red; padding: 15px; text-align: right; }
.call-reject:hover { animation: shake 0.82s infinite cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; }
.doctor-avatar { width: 130px; height: 130px; }

.container-video { height: 770px; }
.upperConsultationScreen { position: absolute; left: 0; right: 0; z-index: 99; background-color: #fff; font-size: 20px; opacity: .95; }
#videoOutput { height:200px;position:absolute;top:80px;right:16px; border-radius: 20px; border:1px solid #fff;}

#blinking-record{ position: absolute; top: 80px; left: 16px; z-index: 1; display: inline-flex; }
.blinking { 
    -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
    animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
.flip { -webkit-transform-style: preserve- 3 d; -webkit-transition: all ease-in-out 0.3s; }
.flip:hover { -webkit-transform: rotatey(180deg); }
.hover-white-bordered { border: none; }
.hover-white-bordered:hover { border: 1px solid #fff !important; }
.bounce-7 {
    animation-name: bounce-7;
    animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

@keyframes bounce-7 {
    0%   { transform: scale(1,1)      translateY(0); }
    10%  { transform: scale(1.1,.9)   translateY(0); }
    30%  { transform: scale(.9,1.1)   translateY(-20px); }
    50%  { transform: scale(1.05,.95) translateY(0); }
    57%  { transform: scale(1,1)      translateY(-7px); }
    64%  { transform: scale(1,1)      translateY(0); }
    100% { transform: scale(1,1)      translateY(0); }
}
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(1px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-2px, 0, 0); }
  40%, 60% { transform: translate3d(2px, 0, 0); }
}

.shadow { box-shadow: 0px 0px 14px 1px #000 !important; }
#blinking-record .circle { background-color: red; border-radius: 20px; width: 34px; height: 34px; margin-right: 10px; }
#blinking-record .label { padding: 2px 5px; background-color: red; color: #fff; font-size: 20px; border-radius: 8px; font-weight: bold; }
.consultation_panel { position:absolute; left:10px; right: 10px; bottom: 10px; background-color: #fff; border-radius: 20px; }
.consultation_buttons { position: absolute;bottom: 0; left: 0; right: 0; background-color: #024668; padding: 15px; border-radius: 20px; }
.consultation_buttons > .row > .col > .pull-right { margin-left: 15px; }
#btnEndConsultation { background-color: red; color: #fff; padding: 15px 10px; font-size: 1.4em; border: none; border-radius: 20px; }
.sign-plus-white { font-size: 2em; color: #8CBD3B; background-color: #fff; border-radius: 20px; }
.label-nav-consultation { font-size: 2em; color: #fff; padding: 0; }
.consultation_chat { margin-bottom: 88px; }
.consultation_chat textarea { resize: none; width: 900px; border: none; font-size: 20px; padding: 10px; border-bottom: 1px solid #3E5063; }


div#chat_box {
    bottom: 20px;
    position: absolute;
    overflow: auto;
    padding-top: 30px;
}
div.message__wrap {
    margin-top: 15px;
}
.message__wrap {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 0 16px 0;
}
.message__content {
    flex: 1 0;
    flex-wrap: nowrap;
    overflow: hidden;
}
div.fadeout-top {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0, 0), rgba(0, 0, 0, 1) 30%);
}
#text_chat_box:focus { outline: none; }
#mode_phone { height: 700px; }

.popup { position: absolute; top: 30%; right: 30%; background-color: #fff; z-index: 1; padding: 16px; font-weight: 800; font-size: 19px; border-radius: 10px; }
.popup p { font-size: 20px; text-align: center; margin-bottom: 6px; }
.popup button { background-color: #024668; color: #fff; padding: 10px 12px; font-size: 20px; border: none; border-radius: 10px; font-weight: 800; }
.popup .close { position: absolute; width: 35px; height: 35px; border-radius: 20px; right: -15px; top: -15px; background-color: red; text-align: center; font-size: 35px; color: #fff; opacity: 1; }
.additionalSession { top: -134px; right: auto; left: -2px; }
.additionalSession:after { 
    content: '';
    width: 30px;
    height: 30px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #fff;
    clear: both;
    position: absolute;
    bottom: -30px;
    left: 24px;
}