body {
    background-color: #f6f6f6; 
    --keyboard-zindex:1100; /* MathLive Virtual Keyboard */
}

/*Header*/
.img-header-banner {
  background: linear-gradient( rgba(144, 143, 143, 0.45), rgba(74, 74, 74, 0.45) ), url(../images/header-laptop.jpg) center
}
/*End of Header*/

/*Panel Top Up*/
#topup-container h4 { margin: 10px 0 0 10px; }
#topup-container h4 img { margin-bottom: 5px; }
#topup-btn { margin-top: 5px; }
/*End of Panel Top Up*/

/*Panel Ask*/
#panel-ask, #history_list #contents, #history_list #posted_contents, #history_list #panel-hist { display: none; }
#panel-ask input[id=image-file] { margin-top: 10px; }

.count { 
  display: inline-block;
  margin-top: 8px;
  font-style: italic;
  font-weight: 700;
  padding-right: 15px;
}
/*End Panel Ask*/

/*History Tab*/
img.loading_gif{
    width: 250px;
    height: auto;
    padding-top: 50px;
}

#history_list .loading{
  font-style: italic;
  margin-top: 30px;
}

.hist-container {
    background-color: #ffffff;
    margin-bottom: 15px;
    border-radius: 15px;
    width: 100%;
}

.hist-container a {
  display: block;
  color: unset;
  text-decoration: none;
  padding: 15px;
}

.hist-img {width: 12%;display: inline-block;vertical-align: middle;padding-left: 10px;text-align: center;}
.hist-img img { width: 70px; }
.hist-info {width: 50%;display: inline-block;vertical-align: middle;}
.hist-info h4 { margin-top: 10px; margin-bottom: 5px; }
.hist-info h4 span.subj { font-style: italic; font-size: 12px; color: #555555; }
.hist-date { width: 25%; display: inline-block; vertical-align: middle; font-style: italic; text-align: center; font-size: 12px; line-height: 20px; }
.hist-state {width: 10%;display: inline-block;vertical-align: middle;text-align: center;color: #555555;font-style: italic;padding-right: 10px;}
.hist-state .badge {font-style: normal;padding: 5px 10px;background-color: #ea8429;border-radius: 7px;font-weight: normal;font-size: 13px;}
.hist-state .badge.refund, .hist-state .badge.posted { background-color: #18a2e3; }
.hist-state .badge.answering { background-color: #4b9242; }
.hist-state .badge.expired { background-color: #999; }
.hist-pin { width: 2%;display: inline-block;vertical-align: middle;text-align: center; }
.hist-pin img { width: 24px; margin-bottom: 45px; cursor: pointer; }

.modal .rating { margin-bottom: 15px; }

/* rating modal */
#m-rate-modal h4 {
 margin-bottom: 0;
 color: #000;
}

.rate_modal .modal-body {
 max-height: unset !important;
}

.rate_modal .modal-dialog {
 max-width: 440px;
}

.rate_modal h4 {
 margin-bottom: 0;
 color: #000;
}

.rate_modal .modal-header {
 background-color: #B8E3F9;
 border-bottom: 0px;
 width: 100%;
}

.rate_modal a {
 cursor: pointer;
 cursor: hand;
}

.report_modal .modal-body {
 max-height: unset !important;
}

.report_modal .modal-dialog {
 max-width: 350px !important;
}

.report_modal h4,
#m-rate-modal h4 {
 margin-bottom: 0;
 color: #000;
}

.report_modal .modal-header {
 background-color: #B8E3F9;
 border-bottom: 0px;
 width: 100%;
}

.report_modal .flagthankyou h4 {
 margin-bottom: 20px;
}

.report_modal .flagthankyou {
 padding-top: 0px;
}

.report_modal textarea.form-control {
 resize: none;
 margin-bottom: 15px;
}

textarea#rate-and-review, textarea#posted-rate-and-review {
 margin-bottom: 20px;
 resize: none;
 border: 1px solid #ececec;
}

.profile-circle {
  margin: 0 auto;
  border-radius: 98px;
  background-color: #ffffff;
  width: 80px;
  height: 80px;
}

/*Style Star Rating */
.rate-mentor { 
  border: none;
  display: inline-block;
}

.rate-mentor > input { display: none; } 
.rate-mentor > label:before { 
  margin: 5px 5px 0 5px;
  font-size: 1.75em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rate-mentor > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS to Highlight Stars on Hover *****/
.rate-mentor > input:checked ~ label, /* show gold star when clicked */
.rate-mentor:not(:checked) > label:hover, /* hover current star */
.rate-mentor:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
/*End of Style Star Rating*/

#posted_tab .reddot, .link_bar .reddot {
    background:#ff0000;
    border-radius:100px;
    width:8px;
    height:8px;
    position:absolute;
    top:-2px;
    right:-2px;
    display:none;
}

.hist-container .reddot {
    background:#ff0000;
    border-radius:100px;
    width:8px;
    height:8px;
    float:right;
    margin-top:-2px;
    margin-right:-2px;
    display:none;
}
/*End of History Tab*/

/*End of Info and alert*/

/*Modal*/
.modal {
  text-align: center;
  padding: 0!important;
  overflow-y: hidden !important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-header {
  background-color: #18a2e3;
  border-radius: 0; 
}

.modal-header .close { margin-top: -25px; }

.modal-title { color: #ffffff; }

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  max-width: 500px;
  overflow-y: initial !important;
}

.modal-body{
  max-height: 250px;
  overflow-y: auto;
  padding: 25px 20px 0px 20px;
}

/*Table in modal*/
.modal-body .list-no { 
  font-size: 13px; 
  padding-right: 0; 
  padding-left: 0; 
  text-align: center;
}

.modal-body .list-title { 
  padding-left: 0; 
  padding-right: 0;
}

.modal-body .list-date {
  font-size: 13px; 
  padding-left: 0;  
  text-align: right;
  color: #b94c4a;
  font-weight: bold;
}

.modal-body th { 
  font-size: 12px; 
  font-weight: bold;
  color: #000000 !important;
}
/*End of table in modal*/

.modal-content {
  width: 100% !important;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.modal-footer {
  border-top:none;
  padding: 13px 20px 25px 20px;
  text-align: center;
}

.modal-footer p {text-align: left; margin-bottom: 15px;}

.modal-footer #check_prompt, .modal-footer #password_prompt { text-align:left; padding-bottom: 20px; }

.modal-error {
  margin-top: 0;
  text-align: left;
}

#proceed, #cancelProceed, .postedRateBtn { width: 105px;}

.alertmodal-btn { cursor: pointer !important; }


/* new css start here */

.capsule_wrapper .capsule_container{

  background-image: url('../images/dotted_lines.svg'), linear-gradient(to right, #DFF4FE, #DFF4FE);
  max-width: 1153px;
  margin: 0 auto;
  display: flex;
  border-radius: 30px;
  height:700px;
  background-size: cover;
  background-position: center;
  position: relative;
  flex-direction: column;
  margin-bottom: 40px;

}

.capsule_wrapper .capsule_container .get_solutions_box .questions_area .col-md-9 {
    width:75%;
    padding-left: 0px;
    padding-right: 0px;
    float: left;
}

.capsule_wrapper .capsule_container .get_solutions_box .questions_area .col-md-3 {
  width: 25%;
  padding-left: 0px;
  float: left;
}

.capsule_wrapper .capsule_container .capsule_curve_bottom{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    align-self: end;
}

.capsule_wrapper .capsule_container .capsule_curve_bottom img{
  width: 100%;
}

.capsule_wrapper .capsule_mobile_container{
  display: none;
}

.capsule_wrapper {
    padding-left: 15px;
    padding-right: 15px;
}


.capsule_wrapper .link_bar a {
    background: #18a2e3;
    padding: 10px;
    color: #fff;
    border-radius: 20px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    float: none;
    position: relative;
    right: 0px;
    font-size: 16px;
    top: -30px;
    text-decoration: none;
      -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
    width: 140px;
    text-align: center;
}
.capsule_wrapper .link_bar {
    margin-top: 30px;
    max-width: 1153px;
    margin: 0 auto;
    position: relative;
    padding-top: 30px;
    padding-bottom: 0px;
    display: flex;
    justify-content: flex-end;
}

.capsule_wrapper .link_bar a:hover{
  background:#0979AC;
}

.capsule_wrapper .capsule_container .ask_stuck span {
    display: block;
}

.capsule_wrapper .capsule_container .multi_step_form .msform #progressbar li::before {
    display: none;
}

.capsule_wrapper .capsule_container .ask_stuck span.emoji_header img {
    margin-bottom: 10px;
}

.capsule_wrapper .capsule_container .ask_stuck li span img {
    opacity: 0.5;
     transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.capsule_wrapper .capsule_container .ask_stuck li.active span img {
    opacity: 1;
}

.capsule_wrapper .capsule_container .get_solutions_box .questions_area #your_question_errorloc {
    text-align: left;
    padding: 15px 30px;
}

.capsule_wrapper .token_area {
    float: none;
    top: -10px;
    position: relative;
    text-align: right;
}

.capsule_wrapper .token_area img {
    margin-right: 5px;
}

.capsule_wrapper .capsule_container .ask_stuck .emoji {
    position: relative;
    z-index: 3;
}

.capsule_wrapper .capsule_container .get_solutions_box{

max-width: 600px;
height: 313px;
background: rgb(83,186,255);
background: linear-gradient(180deg, rgba(83,186,255,1) 0%, rgba(196,237,255,1) 100%);
border-radius: 30px;
}

.capsule_wrapper .capsule_container .get_solutions_box .get_solutions_header {
    padding-top: 25px;
}

.capsule_wrapper .capsule_container .get_solutions_box .questions_area {
    max-width: 650px;
    min-height: 150px;
    height: auto;
    background: white;
    position: relative;
    width: 110%;
    margin-left: -25px;
    border-radius: 30px;
    margin-top: 5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.capsule_wrapper .capsule_container .get_solutions_box .questions_area textarea {
    margin-top: 30px;
    padding-left: 5px !important;
    height: 94px;
    max-height: 94px;
    min-height: 94px;
    overflow-y: auto;
    padding-left: 30px;
    padding-right: 0px !important;
    padding-left: 30px !important;
    border: 0px !important;

}


.capsule_wrapper .capsule_container .get_solutions_box .questions_area textarea::-webkit-scrollbar {
    width: 10px;
    border-radius: 10px;
    cursor: pointer;
}

.capsule_wrapper .capsule_container .get_solutions_box .questions_area textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    height: 40px;
    cursor: pointer;
}

.capsule_wrapper .capsule_container .get_solutions_box .questions_area textarea::-webkit-scrollbar-thumb {
  background-color: #94a5a6;
  border-radius: 10px;
  cursor: pointer;
}


.capsule_wrapper .capsule_container .questions_area .slim .fa-image:before {
    content: url(../images/uploadimage_ico.png);
    height: 50px;
    width: 40px;
    margin-top: 10px;
    display: block;
}

.capsule_wrapper .capsule_container .questions_area label#uploadedQuestionImage {
    display: none;
}

.capsule_wrapper .capsule_container .questions_area .slim {
    background-color: white;
    margin-top: 30px;
    height: 90px;
}

.capsule_wrapper .capsule_container .questions_area .slim .slim-btn-group {
    padding-top: 0px !important;
    margin-top: 0px !important;
    top: 0px;
}


.capsule_wrapper .capsule_container .questions_area .slim button.slim-btn.slim-btn-edit {
    display: none;
}

.capsule_wrapper .capsule_container .questions_area .slim-result {
    max-width: 110px;
    margin: 0 auto;
    height: 90px;
}

.capsule_wrapper .capsule_container .questions_area .slim .slim-btn-group{
  background: rgba(255,255,255,0.8);
}

.capsule_wrapper .capsule_container .questions_area .slim .slim-btn-group:hover {
    background: rgba(255,255,255,0.8);
}

.capsule_wrapper .capsule_container .questions_area .slim .slim-btn{
  margin-top: 28px;
  border: 0px;
  background-color: transparent;
  border-radius: 0px;
}

.capsule_wrapper .capsule_container .questions_area .slim .slim-btn:before{
  border: 0px;
}

.capsule_wrapper .capsule_container .questions_area .slim .slim-btn-remove {
    background-image: url('../images/engage_trash_icon.png');
}


/* Add this attribute to the element that needs a tooltip */
.capsule_wrapper .capsule_container .questions_area .slim[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
.capsule_wrapper .capsule_container .questions_area .slim[data-tooltip]:before,
.capsule_wrapper .capsule_container .questions_area .slim[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
.capsule_wrapper .capsule_container .questions_area .slim[data-tooltip]:before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 140px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
.capsule_wrapper .capsule_container .questions_area .slim[data-tooltip]:after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
.capsule_wrapper .capsule_container .questions_area .slim[data-tooltip]:hover:before,
.capsule_wrapper .capsule_container .questions_area .slim[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.capsule_wrapper .capsule_container .questions_area .slim[data-state="preview"]:before, .capsule_wrapper .capsule_container .questions_area .slim[data-state="preview"]:after{
display: none;
}

.capsule_wrapper .capsule_container .ask_stuck.first li span img {
    opacity: 1;
}


/* multi step form with emoji */

.multi_step_form {
  display: block;
  overflow: hidden;
}

.multi_step_form .text-warning {
    text-align: left;
    margin-top: 0px;
    margin-left: 20px;
    padding-bottom: 10px;
}

.multi_step_form .msform {
  text-align: center;
  position: relative;
  min-height: 820px;
  max-width: 810px;
  margin: 0 auto;
  z-index: 1;
}
.multi_step_form .msform .tittle {
  text-align: center;
  padding-bottom: 55px;
}
.multi_step_form .msform .tittle h2 {
  color: #3f4553;
  padding-bottom: 5px;
}
.multi_step_form .msform .tittle p {
  color: #5f6771;
}
.multi_step_form .msform fieldset {
  border: 0;
  padding: 20px 105px 0;
  position: relative;
  width: 100%;
  left: 0;
  right: 0;
}
.multi_step_form .msform fieldset:not(:first-of-type) {
  display: none;
}
.multi_step_form .msform fieldset h3 {
  color: #3f4553;
}
.multi_step_form .msform fieldset h6 {
  color: #5f6771;
  padding-bottom: 30px;
}
.multi_step_form .msform fieldset .intl-tel-input {
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
.multi_step_form .msform fieldset .intl-tel-input .flag-container .selected-flag {
  padding: 0 20px;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  width: 65px;
}
.multi_step_form .msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow {
  border: 0;
}
.multi_step_form .msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow:after {
  position: absolute;
  top: 0;
  right: 0;
  color: #5f6771;
}
.multi_step_form .msform fieldset #phone {
  padding-left: 80px;
}
.multi_step_form .msform fieldset .form-group {
  padding: 0 10px;
}
.multi_step_form .msform fieldset .fg_2,
.multi_step_form .msform fieldset .fg_3 {
  padding-top: 10px;
  display: block;
  overflow: hidden;
}
.multi_step_form .msform fieldset .fg_3 {
  padding-bottom: 70px;
}
.multi_step_form .msform fieldset .form-control,
.multi_step_form .msform fieldset .product_select {
  border-radius: 3px;
  border: 1px solid #d8e1e7;
  padding: 0 20px;
  height: auto;
  color: #5f6771;
  box-shadow: none;
  outline: none;
  width: 100%;
}


.multi_step_form .msform fieldset .form-control.placeholder,
.multi_step_form .msform fieldset .product_select.placeholder {
  color: #5f6771;
}
.multi_step_form .msform fieldset .form-control:-moz-placeholder,
.multi_step_form .msform fieldset .product_select:-moz-placeholder {
  color: #5f6771;
}
.multi_step_form .msform fieldset .form-control::-moz-placeholder,
.multi_step_form .msform fieldset .product_select::-moz-placeholder {
  color: #5f6771;
}
.multi_step_form .msform fieldset .form-control::-webkit-input-placeholder,
.multi_step_form .msform fieldset .product_select::-webkit-input-placeholder {
  color: #5f6771;
}
.multi_step_form .msform fieldset .form-control:hover, .multi_step_form .msform fieldset .form-control:focus,
.multi_step_form .msform fieldset .product_select:hover,
.multi_step_form .msform fieldset .product_select:focus {
  border-color: #5cb85c;
}
.multi_step_form .msform fieldset .form-control:focus.placeholder,
.multi_step_form .msform fieldset .product_select:focus.placeholder {
  color: transparent;
}
.multi_step_form .msform fieldset .form-control:focus:-moz-placeholder,
.multi_step_form .msform fieldset .product_select:focus:-moz-placeholder {
  color: transparent;
}
.multi_step_form .msform fieldset .form-control:focus::-moz-placeholder,
.multi_step_form .msform fieldset .product_select:focus::-moz-placeholder {
  color: transparent;
}
.multi_step_form .msform fieldset .form-control:focus::-webkit-input-placeholder,
.multi_step_form .msform fieldset .product_select:focus::-webkit-input-placeholder {
  color: transparent;
}
.multi_step_form .msform fieldset .product_select:after {
  display: none;
}
.multi_step_form .msform fieldset .product_select:before {
  position: absolute;
  top: 0;
  right: 20px;
  color: #5f6771;
}
.multi_step_form .msform fieldset .product_select .list {
  width: 100%;
}
.multi_step_form .msform fieldset .done_text {
  padding-top: 40px;
}
.multi_step_form .msform fieldset .done_text .don_icon {
  height: 36px;
  width: 36px;
  line-height: 36px;
  font-size: 22px;
  margin-bottom: 10px;
  background: #5cb85c;
  display: inline-block;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
}
.multi_step_form .msform fieldset .done_text h6 {
  line-height: 23px;
}
.multi_step_form .msform fieldset .code_group {
  margin-bottom: 60px;
}
.multi_step_form .msform fieldset .code_group .form-control {
  border: 0;
  border-bottom: 1px solid #a1a7ac;
  border-radius: 0;
  display: inline-block;
  width: 30px;
  font-size: 30px;
  color: #5f6771;
  padding: 0;
  margin-right: 7px;
  text-align: center;
  line-height: 1;
}
.multi_step_form .msform fieldset .passport {
  margin-top: -10px;
  padding-bottom: 30px;
  position: relative;
}
.multi_step_form .msform fieldset .passport .don_icon {
  height: 36px;
  width: 36px;
  line-height: 36px;
  font-size: 22px;
  position: absolute;
  top: 4px;
  right: 0;
  background: #5cb85c;
  display: inline-block;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
}
.multi_step_form .msform fieldset .passport h4 {
  color: #5f6771;
  padding: 0;
}
.multi_step_form .msform fieldset .input-group {
  padding-bottom: 40px;
}
.multi_step_form .msform fieldset .input-group .custom-file {
  width: 100%;
  height: auto;
}
.multi_step_form .msform fieldset .input-group .custom-file .custom-file-label {
  width: 168px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #99a2a8;
  text-align: center;
  transition: all 300ms linear 0s;
  color: #5f6771;
}
.multi_step_form .msform fieldset .input-group .custom-file .custom-file-label i {
  font-size: 20px;
  padding-right: 10px;
}
.multi_step_form .msform fieldset .input-group .custom-file .custom-file-label:hover, .multi_step_form .msform fieldset .input-group .custom-file .custom-file-label:focus {
  background: #5cb85c;
  border-color: #5cb85c;
  color: #fff;
}
.multi_step_form .msform fieldset .input-group .custom-file input {
  display: none;
}
.multi_step_form .msform fieldset .file_added {
  text-align: left;
  padding-left: 190px;
  padding-bottom: 60px;
}
.multi_step_form .msform fieldset .file_added li {
  color: #5f6771;
}
.multi_step_form .msform fieldset .file_added li a {
  color: #5cb85c;
  font-weight: 500;
  display: inline-block;
  position: relative;
  padding-left: 15px;
}
.multi_step_form .msform fieldset .file_added li a i {
  font-size: 22px;
  padding-right: 8px;
  position: absolute;
  left: 0;
  transform: rotate(20deg);
}
.multi_step_form .msform #progressbar {
  margin-bottom: 30px;
  margin-top: 30px;
  overflow: hidden;
}
.multi_step_form .msform #progressbar li {
  list-style-type: none;
  color: #99a2a8;
  font-size: 9px;
  width: calc(90% / 3);
  float: left;
  position: relative;
  border: none;
}

.multi_step_form .msform #progressbar li .line_bar {
    border: none;
    border-bottom: 2px dashed #c5e4f2;
    position: absolute;
    padding-left: 199px;
    right: -97px;
    top: 54px;
}

.multi_step_form .msform #progressbar .third li .line_bar {
    display: none;
}

.multi_step_form .msform #progressbar .second li.active .line_bar {
    border-bottom: 2px dashed #c5e4f2;
}

.multi_step_form .msform #progressbar .ask_stuck li.done .line_bar {
   border-bottom: 2px dashed #18A3E3;
}

.multi_step_form .msform .stuck_stage.next {
    float: right;
    top: 20px;
    display: block;
    position: relative;
}

.multi_step_form .msform .stuck_stage.previous {
    float: left;
    top: 20px;
    display: block;
    position: relative;
}

.multi_step_form .msform #progressbar li:before {

}
.multi_step_form .msform #progressbar li:after {

}

.multi_step_form .msform #progressbar li:last-child:after {
  width: 150%;
}

.multi_step_form .msform #progressbar li.active .line_bar {
    border: none;
    border-bottom: 2px dashed #18A3E3;
    padding-left: 202px;
    position: absolute;
    right: -108px;
    margin-right: 8px;
}

.multi_step_form .msform .stuck_stage.mathkeyboard {
    height: 38px;
    cursor: pointer;
    float: left;
    top: 20px;
    display: block;
    position: relative;
}

/* end of multi step form with emoji */


.multi_step_form .msform #progressbar li.active:before, .multi_step_form .msform #progressbar li.active:after {

}

.multi_step_form .msform .action-button {
    background: #18A3E3;
    color: white;
    border-radius: 20px;
    cursor: pointer;
    min-width: 89px;
    border: 1px solid #18A3E3;
    margin: 0px;
    text-transform: uppercase;
    display: inline-block;
    padding: 9px;
    font-size: 13px;
      -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
}

.multi_step_form .msform .action-button:hover, .multi_step_form .msform .action-button:focus {
  background: #0979AC;
  border-color: #0979AC;
}

.multi_step_form .msform .previous_button {
  background: transparent;
  color: #99a2a8;
  border-color: #99a2a8;
}

.multi_step_form .msform .previous_button:hover, .multi_step_form .msform .previous_button:focus {
  background: #405867;
  border-color: #405867;
  color: #fff;
}



/* help stage */

.multi_step_form .msform .help_stage .subjectpicker{
  background: #F1F9FB;
}


.multi_step_form .msform .help_stage .subjectpicker.open span.caret {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.multi_step_form .msform .help_stage .btn-group {
    border: 0px !important;
}
.multi_step_form .msform .help_stage .btn-group button {
    box-shadow: none !important;
    border: 0px !important;
    font-size: 14px;
    padding: 14px;
    background-color: transparent !important;
}

.multi_step_form .msform .help_stage .subjectpicker .btn.selectpicker:focus {
    outline: 0px !important;
}

.multi_step_form .msform .help_stage .btn-group .dropdown-menu li {
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: left;
    padding-left: 0px;
    font-size: 14px;
}

.multi_step_form .msform .help_stage .dropdown-menu {
    box-shadow: none;
    background: #F1F9FB;
    border: 0px;
    margin-top: 5px;
    max-height: 200px !important;
    overflow: auto;
}

.multi_step_form .msform .help_stage .dropdown-menu::-webkit-scrollbar{
 width: 7px; 
} 

.multi_step_form .msform .help_stage .dropdown-menu::-webkit-scrollbar-track{
  background: #d9d9d9;
  border-radius: 10px;

}

.multi_step_form .msform .help_stage .dropdown-menu::-webkit-scrollbar-thumb{
  background: #888;
  border-radius: 10px;
}

.multi_step_form .msform .help_stage .dropdown-menu::-webkit-scrollbar-thumb:hover{
  background: #555; 
}

.multi_step_form .msform .help_stage .bootstrap-select.btn-group .btn .filter-option {
    font-size: 14px;
    color: #333333;
}

.multi_step_form .msform .help_stage .bootstrap-select.btn-group .dropdown-menu li a:focus {
    outline: none;
}

.multi_step_form .msform .help_stage .bootstrap-select.btn-group .dropdown-menu li a{
  border-radius: 0px;
}

.multi_step_form .msform .help_stage .bootstrap-select.btn-group .dropdown-menu li a span.text {
    margin-left: 14px;
}

.multi_step_form .msform .help_stage .count {
    float: left;
    margin-bottom: 10px;
}

.multi_step_form .msform .help_stage{
  margin-top: 80px;
}

.multi_step_form .msform .help_stage #subject_errorloc {
    text-align: left;
    margin-top: 10px;
}


.search_modal {
    max-width: 655px;
    border-radius: 20px;
    background: url("../images/search_modal_bg2.svg") no-repeat center center, linear-gradient(#DFF4FE, #DFF4FE);
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 30px;
}

.search_modal .modal_content {
    padding-top: 20px;
    padding-bottom: 30px;
}

.search_modal.different_page {
    max-width: 350px;
}

.search_modal.different_page .barry_with_magnifiyingglass {
    height: 146px;
}


.smaller_modal{
    max-width: 577px;
    border-radius: 20px;
    background: url("../images/smaller_modal_bg.svg") no-repeat center top, linear-gradient(#DFF4FE, #DFF4FE);
    padding: 0px;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.smaller_modal button[type=button] {
    background: #18A3E3;
    color: white;
    border-radius: 20px;
    cursor: pointer;
    min-width: 89px;
    border: 1px solid #18A3E3;
    margin: 0px;
    text-transform: uppercase;
    display: inline-block;
    padding: 9px;
    font-size: 13px;
    margin-top: 20px;
    margin-right: 10px;
}

.smaller_modal button[type=button].one_side {
    text-transform: none;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 20px;
    margin-right: 0px;
}

.smaller_modal h3 {
    max-width: 250px;
    margin: 0 auto;
    margin-bottom: 20px;
    font-size: 17px;
    color: #555555;
    line-height: 20px;
}

.smaller_modal span {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #555555;
    font-size: 17px;
}

.smaller_modal span.glyphicon-info-sign {
    font-size: 12px;
    display: inline-block;
    font-weight: normal;
    margin-right: 5px;
}

.search_modal h3 {
    max-width: 250px;
    margin: 0 auto;
    margin-bottom: 20px;
    font-size: 23px;
    color: #555555;
    line-height: 28px;
}

.search_modal span.badge {
    color: #0B76A7;
    background: none;
    font-size: 22px;
}

.search_modal p, .smaller_modal p {
    color: #707070;
    font-size: 14px;
    max-width: 300px;
    margin: 0 auto;
}

.search_modal .tips_container {
    background: white;
    z-index: 1;
    width: 100%;
}

.search_modal .barry_with_magnifiyingglass {
    height: 154px;
}

.search_modal .barry_mentor_not_available {
    height: 135px;
    margin-top: 30px;
}

.search_modal .tips_text {
    margin-top: 20px;
}

.search_modal .tips_icon {
    padding-left: 0px;
    padding-right: 0px;
    float: left;
    position: relative;
    left: 20px;
    padding-bottom: 10px;
}

.search_modal .tips_text p {
    color: #000000;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 284px;
}

.search_modal .tips_icon img {
    margin-top: -20px;
}

.search_modal button[type=button] {
    background: #18A3E3;
    color: white;
    border-radius: 20px;
    cursor: pointer;
    min-width: 89px;
    border: 1px solid #18A3E3;
    margin: 0px;
    text-transform: uppercase;
    display: inline-block;
    padding: 9px;
    font-size: 13px;
    margin-top: 20px;
    margin-right: 0px;
}

.search_modal button[type=button].cancelling {
    background: #abd2e5;
    border: 1px solid transparent;
    pointer-events: none;
}

.search_modal button[type=button].yes {
    margin-right: 10px;
}

.search_modal button[type=button]:focus {
    outline: 0px !important;
}

.search_modal a.no-opac {
    opacity: 1;
}

/* animation */

.barry_hands {
    position: absolute;
    bottom: 20px;
    text-align: center;
    left: 179px;
}

.magnifiying {
  animation: diagonal_movement 2s linear infinite;
}

.eyes{
animation: lefteye_diagonal_movement 2s linear infinite;
transform-origin: center;
}

.eyes-right{
animation: righteye_diagonal_movement 2s linear infinite;
transform-origin: center;
}



@keyframes diagonal_movement{ /*left and right */
   0% {
    transform: translate(-55.454px, -120.57px);
  }

  30% {
    transform: translate(-60.454px, -120.57px);
  }

  50% {
    transform: translate(-60.454px, -110.57px);
  }

  100% {
     transform: translate(-55.454px, -120.57px);
  }
}

@keyframes lefteye_diagonal_movement{/* left and right */

  0% {
    transform: translate(3.842px, -17.558px);
  }

 30% {
    transform: translate(-6.842px, -17.558px);
  }

 50% {
    transform: translate(-6.842px, -7.558px);
 }

  100% {
    transform: translate(3.842px, -17.558px);
  }
}

@keyframes righteye_diagonal_movement{/* left and right */
  0% {
    transform: translate(29.698px, -17.558px);
  }

  30% {
    transform: translate(23.698px, -17.558px);
  }

  50% {
    transform: translate(23.698px, -7.558px);
  }

  100% {
    transform: translate(29.698px, -17.558px);
  }

}



.modal-dialog{
  max-width: 655px;
}

/* Rating popup */

.popup_list {
    width: 320px;
    float: right;
    margin: 20px 20px;
}

.popup_list .popup_post {
    max-width: 320px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #FFF;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.popup_list .popup_post .popup_profile_img img {
    width: 70px;
    border-radius: 50%;
    margin-top: -40px;
}

.popup_list .popup_post .popup_text {
    padding: 10px 40px 0px 40px;
    text-align: center;
}

.popup_list .popup_post .popup_text .popup_time{
  font-style: italic;
}

.popup_list .popup_mentor_rating {
    background: #DFF4FE;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding-bottom: 10px;
}

.popup_list .popup_mentor_rating .rate-mentor > label:before {
    margin: 5px 5px 0 5px;
    font-size: 1.3em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
}

.popup_list .popup_mentor_rating .popup_text p {
    margin-top: 10px;
    margin-bottom: 0px;
}

.popup_list .popup_mentor_rating .rate-mentor label.full{
  color: #FFD700;
}

.popup_list .popup_close {
    position: absolute;
    right: 20px;
    margin-top: 10px;
    cursor: pointer;
}

.popup_list.appear.withbacktotop {
      width: auto;
      right: 0px;
}

.popup_list.appear {
    opacity: 1;
    right: 0px;
    bottom: 0px;
    transition: all 1s;
    -webkit-transition: all 1s;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    position: fixed;
    z-index: 5;
}

.popup_list .popup_block{
  display: none;
}

/* End of rating popup */


.no-view-container, #use-app, #use-app2, #no-subject, #act-ses {
    border: 1px solid #e6e6e6;
    padding: 30px 0 20px 0;
    margin-bottom: 60px;
    background: #eeeeee;
    border-radius: 5px;
}
.no-view-container img, #use-app img, #use-app2 img, #no-subject img, #act-ses img {
    padding: 0;
    width: 160px;
}

#tab_ask_question p.text-info, #tab_history p.text-info {
    color: #5ca8ce;
    font-weight: unset;
    font-size: 14px;
    padding: 10px 10px 0 10px;
}

#tab_ask_question .no-view-container p.text-info, #tab_history .no-view-container p.text-info, #use-app p.text-info, #no-subject p.text-info, #use-app2 p.text-info, #act-ses p.text-info, #no-subject p.text-info {
    color: #666666;
    font-size: 15px;
}

.rate_modal textarea {
 border: 0px;
}

.rate_modal .earnstar_note {
 text-align: center;
 padding: 0px 25px 15px 25px;
 width: 100%;
 display: block;
 border-radius: 0px;
 background: url(../images/rate_earnstar_graphic.png) #daf1fe no-repeat top center;
 background-size: 280px;
}

.rate_modal .profile-rating {
 margin-top: 20px;
}

.rate_modal .profile-circle {
 width: 50px;
 height: 50px;
}

.rate_modal .earnstar_note p {
 color: #000;
 padding: 0px;
 display: block;
 margin-bottom: 5px;
 font-size: 15px;
 font-style: italic;
}

.rate_modal .earnstar_note b {
 font-weight: bold;
}

.rate_modal .earnstar_note h4 {
 margin-bottom: 5px;
 margin-top: 5px;
 color: #18a2e3;
 padding-top: 25px;
 font-size: 16px;
}

.rate_modal .earnstar_note i {
 color: #FFD700;
}

.rate_modal .earnstar_note span {
 font-weight: bold;
 color: #18a2e3;
 font-size: 20px;
 margin: 0 auto;
}

.rate_modal .modal-body {
 padding-top: 0px;
}

.rate_modal .modal-content,
.report_modal .modal-content {
 max-width: 655px;
 padding: 0px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 background: #FFFFFF;
 border-radius: 20px;
}

#report-modal .loading_overlay {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 10;
 background: rgba(255,255,255,0.7);
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.report_modal p {
 color: #000000;
 margin-bottom: 0px;
}

.report_modal .flagdiv p {
 margin-bottom: 0px;
}

.report_modal .flagthankyou p{
 margin-bottom: 20px;
}

.report_modal .text-danger {
 margin-top: 10px;
 display: block;
 margin-bottom: 10px;
}


@media screen and (min-width: 768px) {
    #use-app, #use-app2 { display: none; }
    #panel-ask, #history_list #contents, #history_list #posted_contents, #history_list #panel-hist { display: block; }
    .takenote_ic {padding-left: 0px;height: 150px;} /* Added by M 29062020 */
    .takenote_ic h3 {margin-top:0px;} /* Added by M 29062020 */
    #history_list #contents span, #history_list #posted_contents span {
        margin-right: 5px;
    }

    .capsule_wrapper .capsule_container .get_solutions_box .questions_area textarea {
        max-width: 438px;
        min-width: 438px;
    }
}

@media screen and (max-width: 767px) {
  #contents, #posted_contents, #no-history-container, #loading-container, #no-subject, #fixed-tab, #chatMessage, #postedMessage { display: none !important; }

  .capsule_wrapper .capsule_mobile_container{
    display: block;
    margin-top: 20px;
  }

  .capsule_wrapper .capsule_container{
  display: none;
  }

  .modal{
    display: none !important;
  }

  .modal-backdrop.in{
    opacity: 0;
  }

  .capsule_wrapper .link_bar{
    display: none;
  }

  .popup_list{
    display: none;
  }
}

@media screen and (min-width: 992px) { 
  .hist-img {width: 10%;}
  .hist-info {width: 58%;}
  .hist-date {width: 20%;}
  .hist-state {width: 10%;}
  .takenote_ic {padding-left: 80px;height: 150px;} /* Edited by M 09022021 */
  .capsule_wrapper .capsule_container .get_solutions_box .questions_area textarea {
    max-width: 478px;
    min-width: 478px;
}
}

.capsule_container.during_chat {
  background-image: none !important;
  height: auto !important;
  margin-bottom: 0px;
}

.capsule_container.during_chat .capsule_curve_bottom {
  display: none;
}

/*MathLive Virtual Keyboard START */
math-field::part(menu-toggle) {
    display: none;
}

math-field::part(virtual-keyboard-toggle) {
    display: none;
}

#mathfield{
    font-size:2.5rem;
    display: block;
}

#mathfieldDiv{
    display: inline-block;
}
/*MathLive Virtual Keyboard END */

/*History Tab START*/
.tabbable-line {
 background-color: #e9e9e9 !important;
 padding-top: 15px
}

.tabbable-line > .container > .left-tab {
 padding-left: 15px;
}

.tabbable-line > .container > .left-tab > .nav-tabs {
 border: none;
 margin: 0px;
 padding: 0px !important;
}

.tabbable-line > .container > .left-tab > .nav-tabs > li {
 margin-right: 5px;
 margin-bottom: 0px;
}

.tabbable-line > .container > .left-tab > .nav-tabs > li > a {
 border: 0;
 margin-right: 0;
 color: #737373;
 font-size: 16px;
 padding: 15px 15px;
 margin-bottom: 0px;
}

.tabbable-line > .container > .left-tab > .nav-tabs > li > a > i {
  color: #a6a6a6;
}
.tabbable-line > .container > .left-tab > .nav-tabs > li.open, .tabbable-line > .container > .left-tab > .nav-tabs > li:hover {
  background: #efefef;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.tabbable-line > .container > .left-tab > .nav-tabs > li.open > a, .tabbable-line > .container > .left-tab > .nav-tabs > li:hover > a {
  border: 0;
  background: none !important;
  color: #333333;
}
.tabbable-line > .container > .left-tab > .nav-tabs > li.open > a > i, .tabbable-line > .container > .left-tab > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;
}
.tabbable-line > .container > .left-tab > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .container > .left-tab > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .container > .left-tab > .nav-tabs > li.active {
  position: relative;
  background: #f6f6f6;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.tabbable-line > .container > .left-tab > .nav-tabs > li.active > a > i {
  color: #18a2e3;
}
.tabbable-line > .container > .left-tab > .nav-tabs > li.active > a {
  border: 0;
  color: #18a2e3;
  font-weight: bold;
}

.tabbable-line .nav-tabs > li.active > a {
  background: none;
}

.tabbable-line .nav > li > a:focus { outline: none; }
/*History Tab END*/

/* Posted Question START */
.multi_step_form .msform .stuck_stage.post {
    float: right;
    top: 20px;
    display: none;
    position: relative;
    margin-right: 10px;
}

#notice-post-question-modal button[type=button].ok {
    margin-right: 10px;
}
/* Posted Question END */