/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 07 May 2019, 11:39:05 AM
    Author     : hoffmam
*/

@media (max-width: 1000px) {
  .divCellMultiInline {
    display: grid;
  }
  .divRadioQuestion {
    width: 100%;
  }
}

@media (min-width: 1000px) {
  .divCellMultiInline {
    display: table;
    width: 88%;
  }
  .divRadioQuestion {
    width: 70%;
  }
}

.divCellMultiInlineGroup {
  display: flex;
  justify-content: space-between;
}

.divRadioQuestion {
  display: table-cell;
  text-align: left;
  /* font-weight: bold; */
}

.divTextArea {
  font-weight: bold;
}

.divCell1 {
  display: table;
}

.divCellText {
  /*display: table-cell;*/
  width: 100%;
  text-align: left;
}

.divCellRight {
  /*display: table-cell;*/
  /*display: flex;*/
  width: 10vw;
  float: right;
}

.divRow > .divCellRight {
  display: table-cell;
  width: 1vw;
  float: none;
}

.divRadioAnswer {
  display: table-cell;
  /*width: 45%*/
}

.crgDivUl {
  display: table;
}

.RadioHorizontal > .crgDivLi {
  display: table-cell;
  padding-left: 0.1vw;
  padding-right: 0.1vw;
}

.RadioHorizontal > .crgDivLi > .divCelInline {
  display: block;
}

ul.MultiColor {
  padding-left: 0;
  /*list-style-type: none;*/
  /*max-width: 80%;*/
  /*display: inherit;*/
}

.RadioHorizontal {
  display: flex;
  justify-content: space-between;
}

/*input[type="radio" ]{
        margin: 0px 5px 0px 25px;
    }*/

.divRadioAnswer .MultiColor {
  /*padding-top: 1vh;*/
  /*padding-bottom: 1vh;*/
  /*    display: flex;*/
  justify-content: space-between;
  background-image: linear-gradient(
    to right,
    rgba(255, 0, 0, 0.1),
    rgba(255, 0, 0, 0.1),
    rgba(255, 255, 0, 0.1),
    rgba(255, 255, 0, 0.1),
    rgba(0, 255, 0, 0.1)
  );

  /*display: inline-grid;*/
  /*box-shadow: 0 0 4px 4px white inset;*/
}

.divSectionScore {
  display: inline;
  min-width: 2.5em;
  float: right;

  background-size: contain; /* <------ */
  background-repeat: no-repeat;
  background-position: center center;
}

.divEmoji {
  min-width: 2.5em;
}

.divRow > .divCellRight > .divEmoji {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.divSectionScore {
  /*background-image: url("../icons/notes.png");*/
}

.divEmojiComment {
  /*background-image: url("../icons/notes.png");*/
}

.divSideTextarea {
  width: 90%;
  min-height: inherit;
}

.divSideComment {
  position: absolute;
  overflow: hidden;
  display: box;
  width: 0;
  right: 4vw;
  hight: 90vh;
  min-height: 45vh;
  border: 1px solid #666666;
  background-color: #f0f0f0;
  transition: width 0.7s;
}

.divInlineHdr {
  padding-top: 0.5vh;
}

/* ................New and Overriding Facelift Styles........................ */
.divSideTextarea {
  width: 100%;
  min-height: inherit;
  border: none;
  padding: 5px;
  background-color: #f1f1f1;
  font-family: "Poppins", sans-serif;
}

.divSideTextarea:focus {
  outline: none;
}

.divSideComment {
  background-color: #f1f1f1;
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: "Poppins", sans-serif;
}

#fl-c {
  height: 35px;
  width: 100%;
  background-color: #00bbd3;
  color: white;
  padding-left: 5px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
}

#fl-close-div {
  text-align: right;
  padding-right: 5px;
}

.fa-close {
  transition: 0.3s all;
}

.fa-close:hover {
  cursor: pointer;
  transform: scale(1.3);
}

.fl-left-text {
  justify-self: flex-start;
}

.divRow > .divCellRight > .divEmoji {
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}

/* .......................................................................... */

.crgTemplateInclude {
  display: inline;
  float: right;
}

.divRow.divRowTemplate.divRowTemplateMaster {
  /*border: 1px solid greenyellow;*/
  background-color: aqua;
}

.divCelInline {
  display: table-cell;
}

.RadioVertical > li > .divCelInline {
  display: table-cell;
  /*min-width: 20vw;*/
  margin: auto;
  /*border: 1px solid green;*/
}

.RadioVertical .questionItem {
  display: flex;
}

.RadioVertical .questionLabel label {
  margin-bottom: 0px;
}

li.textareaClassHidden {
  padding-right: 30vw;
}

.crgCommentButton {
  padding-top: 0.5vh;
  padding-bottom: 0.5vh;
  border: 1px solid #aaa;
  border-radius: 1vh;
}
.crgCommentButtonDiv {
  padding-top: 1.5vh;
  padding-bottom: 1vh;
  padding-left: 40%;
  padding-right: 40%;
}

.colorRed {
  color: red;
  font-size: medium;
}

.divCellMultiInlineGroupToggle {
  /* border: solid 1px #AAA; */
  /*border-radius: 1.5vh;*/
}

.divCellMultiInlineGroupToggle1 {
  border: solid 1px #aaa;
  display: table;
  width: 100%;
  /*border-radius: 1.5vh;*/
  border-radius: 0vh;
}

.divCellMultiInlineGroupNoToggle {
  border: solid 1px #aaa;
  /*border-radius: 1.5vh;*/
  display: table;
}

.dotProgress {
  background-color: #ffffff;
}

.dotGreen {
  background-color: #33cc33;
}

.dotRed {
  background-color: #ff0000;
}

.dotGreen,
.dotRed,
.dotProgress {
  height: 8px;
  width: 8px;
  margin: 1px 8px 1px 1px;
  border-radius: 50%;
  display: inline-block;
}

.divCell {
  border: 0px solid grey;
  text-align: center;
}

.divCellMultiInline {
  /*width: 88%;*/
  table-layout: fixed;
  text-align: center;
}

.radio-inline input[type="radio"] {
  /* width: 2em; */
  /* height: 1.2em; */
}

.radio-inline input[type="checkbox"] {
  width: 1.5vw;
  height: 1.5vw;
  padding-right: 40vw;
}

.MultiRadioClass_ {
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.RadioVertical {
  text-align: left;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

.RadioVertical li {
  margin: 0%;
}

.RadioHorizontal2 {
  display: inline-block;
  text-align: left;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

.RadioHorizontal2 li {
  display: inline-block; /*necessary*/
  margin: 2%;
}

.RadioHorizontal3 {
  display: inline-block;
  text-align: left;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.RadioHorizontal3 li {
  margin: 0%;
  list-style-type: none;
}

li {
  list-style-type: none;
}

.installGuide li {
  list-style-type: unset !important;
}

.radio-inline {
  border: 0px solid grey;
  white-space: nowrap;
  min-width: 25vw;
}

.tableAnswers {
}

.tableAnswers td {
}

.tableAnswers tr {
  text-align: left;
  height: 1px;
}

.td_input {
  text-align: right;
}

.mandatoryText {
  color: red;
  padding-top: 1vh;
}

.MultiColor li {
  display: inline-grid;
}

.hospitalSub {
  display: inline-flex;
}

.width-90 {
  width: 90%;
}

.width-60 {
  width: 60%;
}

.width-30 {
  width: 30%;
}

.MultiColor .form-check,
.RadioHorizontal .form-check {
  padding-left: 0rem !important;
}

.MultiColor .form-check .form-check-input {
  float: right !important;
  margin-left: 0px !important;
}

.MultiColor .form-check-input,
.RadioHorizontal .form-check-input {
  margin-left: 0px !important;
  position: relative;
}

.MultiColor label,
.RadioHorizontal label {
  padding-left: 0px !important;
}

.RadioHorizontal .form-check .form-check-input {
  float: none !important;
}

#crgSubmitSurveyButton {
  border-radius: 5px;
  padding: 0.4rem;
}

#crgSubmitSurveyButton[disabled] {
  background-color: #d7d7d7;
}

#crgSubmitSurveyButton[disabled]:hover {
  cursor: default;
  background-color: #d7d7d7;
  opacity: 1;
}

.divCellMultiInline .divRadioQuestion {
  white-space: pre-line;
}