@font-face {
  font-family: all;
  src: url("./assets/fonts/PetrovSans-Bold.ttf");
  font-weight: 700;
}
@font-face {
  font-family: all;
  src: url("./assets/fonts/PetrovSans-SemiBold.ttf");
  font-weight: 600;
}
@font-face {
  font-family: all;
  src: url("./assets/fonts/PetrovSans-Regular.ttf");
  font-weight: 400;
}
/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  5. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  /* display: block; */
  /* max-width: 100%; */
}
/*
  6. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}
/*
  7. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
  8. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}
body {
  background-color: rgb(151, 120, 217);
  font-family: all, sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
}

.allWrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.sreamingContainer {
  position: fixed;
  left: 20px;
  top: 20px;
  display: flex;
  flex-direction: column;
  /* justify-content: right; */

  gap: 10px;
}
.custom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  color: #fff;
  padding: 12px;
}
#custom {
  position: fixed;
  right: 20px;
  top: 20px;
  justify-content: end;
}
/* .custom > div {
  display: flex;

  justify-content: space-between;
} */
.actionBtn {
  /* box-shadow: 0px 0px 14px 5px rgba(0,0,0,0.42); */
  background-color: transparent;
  width: 63px;
  border-radius: 30px;
  /* color: #fff; */
  transition: all 0.6s ease-in-out;
  overflow: hidden;
  display: flex;
  /* flex-direction: row-reverse; */
  justify-content: start;
  padding: 8px;
}

.btnContainer {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 1rem;
}
.topend {
  align-items: start;
}

.logWrapper {
  padding: 5.5px;
  /* background: #000; */
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.logWrapper img {
  width: 22px;
}
.testUp {
  text-transform: uppercase;
}
.secondaryColor {
  color: rgba(238, 75, 75, 1);
  padding-top: 2px;
}

.divider {
  width: 2px;
  height: 15px;
  background-color: rgba(48, 48, 48, 1);
}
.singline {
  white-space: nowrap;
}
.exteded {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 14px;
  height: 100%;

  display: none;
  /* opacity: 0; */
  transition: all 1s ease;
}
/* .actionBtn:hover + .exteded,
.exteded:hover {
  display: flex;
  opacity: 1;

 

} */
.appwrapper {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: start;
}
.errorWrapper {
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  gap: 6px;
  color: rgba(203, 121, 46, 1);
}
.errorWrapper {
}
.recoringtime {
  display: flex;
  align-items: "center";
  justify-content: "center";
  min-width: 50px;
  font-weight: 700;
  line-height: 100%;
  
}

.recoringBtn {
  background-color: rgba(36, 36, 36, 1);
  padding: 8px 8px;
  border-radius: 30px;
  font-weight: 600;
  height: 100%;

}
button {
  background-color: transparent;
  border: none;
  height: 100%;
  color: #fff;
  align-items: center;
  justify-content: center;
  display: flex;
  gap: 6px;
  font-family: all;
  font-weight: 600 !important;
  font-size: 12px;
  line-height: 100%;
  

  cursor: pointer;
}
.recoringBtn:hover {
  
  background-color: rgb(51, 44, 44);
}
#stopBtn {
  display: none;
}
.secondarybtn {
  font-weight: 600;

  color: rgba(238, 75, 75, 1);
  /* padding: 8px 8px; */
}
.secondarybtn:hover {
  /* color: rgb(224, 105, 105); */
}
.btnsecondry {
  background-color: rgba(44, 26, 26, 1);
  padding: 3px 8px;
  border: 1px solid rgba(238, 75, 75, 0.35);
  border-radius: 30px;
  height: 100%;

}
.btnsecondry:hover {
  background-color: rgb(62, 36, 36);
  font-weight: 600 !important;
  font-size: 12px;
}
.tooltip {
  position: relative;

  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: rgb(57, 54, 54);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 0px 0;
  font-size: 12px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1000;
  left: 18px;
  top: 18px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.primaryColor {
  color: #fff;
}
.secondaryColor {
  color: rgba(238, 75, 75, 1);
}
.arrowIcon{
  /* margin-bottom: 5px; */
}
.errorWrapper{
  padding-top: 2px;
}
@media only screen and (max-width: 600px) {
  body {
    font-size: 10px;
  }
  button {
    font-size: 10px;
  }
  .exteded {
    gap: 0.5rem;
  }
  .arrowimg {
    width: 18px;
  }
}