.recorderControls .controls {
  /* background-color:#c3c3c3; */
  /* margin-right: 20px; */
  display: flex;
  flex-direction: row;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
}
.controls .playpause {
  display: flex;
  flex-direction: row;
}

.micstart svg,
.micstop svg {
  width: 6rem;
  height: 6rem;
}
.controls button:hover {
  background-color: grey;
}

.pulse button:hover {
  background-color: red;
}

.recorderControls {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  /* height: 50%; */
}
.recorder {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
}

.consentdiv {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.Blink {
  animation: blinker 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}
@keyframes blinker {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.transciptionwindow {
  display: flex;
}
.transciptionwindow .MuiOutlinedInput-notchedOutline {
  border: none !important;
}
.visualizer {
  background-color: white;
  padding: 5px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* .visualizer canvas {
  border-radius: 50%;
} */

.editor {
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.ck.ck-editor {
  padding-bottom: 5px !important;
}
/* .ck-editor__editable {
  height: calc(90vh - 182px) !important;
  overflow: auto;
  color: black;
} */

.editorTab .ck-editor__editable {
  height: calc(90vh - 11rem) !important;
  overflow: auto;
  color: black;
}

#fullscreeneditor .ck-editor__editable {
  height: 100% !important;
  overflow: auto;
  color: black;
}

#fullscreeneditor {
  z-index: 100000 !important;
}
.config {
  display: flex;
  justify-content: center;
  align-items: center;
  height: fit-content;
}

.red {
  background-color: red;
}
.circle {
  /* width: 35px;
    height: 35px; */
  border-radius: 50%;
  box-shadow: 0px 0px 1px 1px #0000001a;
}

.pulse {
  animation: pulse-animation 1.5s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

@keyframes inAnimation {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes outAnimation {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loader {
  display: block;
  --height-of-loader: 4px;
  --loader-color: #1b9dcf;
  width: 100%;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.2);
  position: relative;
}

.loader::before {
  content: "";
  position: absolute;
  background: var(--loader-color);
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius: 30px;
  animation: moving 1s ease-in-out infinite;
}

@keyframes moving {
  50% {
    width: 100%;
  }

  100% {
    width: 0;
    right: 0;
    left: unset;
  }
}
.visit-type-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-evenly;
  align-items: flex-start;
  width: 100%;
}
.visit-type-container .MuiTextField-root {
  width: 180px;
}
.template-type-container .MuiTextField-root {
  width: 180px;
}
.visit-type {
  display: flex;
  /* gap: 126px; */
}
.template-type-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-evenly;
  align-items: flex-start;
  width: 100%;
  /* margin-left: 50px; */
}
.patients-template {
  margin-left: 50px !important;
}
.speechToText .ck.ck-editor__main > .ck-editor__editable {
  height: calc(100vh - 17rem) !important;
  padding-bottom: 20px !important;
  border-bottom: none !important;
}
.split-type .submit-editor {
  position: absolute !important;
  width: 100% !important;
  padding: 5px !important;
  bottom: 69px !important;
  border-top: 1px solid #d3cece;
  left: -4px;
  z-index: 2;
}
.editorTab .submit-editor {
  position: absolute !important;
  width: 97% !important;
  padding: 12px !important;
  bottom: 75px !important;
  border-top: 1px solid #d3cece;
}
@media screen and (min-width: 320px) and (max-width: 768px) {
  .editorTab .submit-editor {
    position: fixed !important;
    bottom: 0px !important;
    left: 0px !important;
  }
  .speechToText .ck.ck-editor__main > .ck-editor__editable {
    overflow: auto !important;
    border-bottom: none !important;
  }
}
.summary-tab {
  /* top: calc(11vh - 4.5rem) !important; */
  /* margin-left: 10px; */
  /* margin-right: 10px; */
  width: auto !important;
  /* border: 1px solid #d3cece; */
}
.editorTab > div {
  padding: 0px !important;
}
.recorder {
  .pause {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.audio-container {
  right: 85px;
  top: 150px !important;
  left: unset !important;
}
@media screen and (min-width: 320px) and (max-width: 770px) {
  .audio-container {
    border: none !important;
  }
  .outlet {
    position: relative;
    /* top: 0px !important; */
  }
  /* .summary-tab {
    height: unset !important;
    overflow: scroll; 
    min-height: 100vh !important;
  } */
}
.audio-tag {
  transform: none !important;
  right: 10px !important;
  top: 180px !important;
  left: unset !important;
  z-index: 9999 !important;
}
.recorder {
  .resetButton {
    position: absolute;
    top: 0;
    width: 100%;
    justify-content: space-between;
    display: flex;
  }
}
.gender-correction {
  background: transparent;
  border: none;
  outline: none;
  width: 118px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  font-size: 14px;
  color: #606060;
}
.gender-type fieldset {
  border: transparent !important;
}
#demo-select {
  color: #817a7a !important;
  text-transform: uppercase !important;
  font-size: 15px;
}