@media screen and (min-width: 0px) {
  .sideBox {
    width: 300px;
  }
  .centerBox {
    width: calc(100% - 600px);
  }
  .sideItem {
    width: 150px;
  }
  .record-item-img {
    width: 80px;
    height: 80px;
  }
  .left.sideItem0 {
    margin-right: -40px !important;
  }
  .left.sideItem1 {
    margin-right: 0px !important;
  }
  .left.sideItem2 {
    margin-right: 20px !important;
  }
  .left.sideItem3 {
    margin-right: 50px !important;
  }
  .left.sideItem4 {
    margin-right: 80px !important;
  }
  .left.sideItem5 {
    margin-right: 90px !important;
  }
  .left.sideItem6 {
    margin-right: 80px !important;
  }
  .left.sideItem7 {
    margin-right: 50px !important;
  }
  .left.sideItem8 {
    margin-right: 20px !important;
  }
  .left.sideItem9 {
    margin-right: 0px !important;
  }
  .left.sideItem10 {
    margin-right: -40px !important;
  }
  .right.sideItem11 {
    margin-left: -10px !important;
  }
  .right.sideItem12 {
    margin-left: 30px !important;
  }
  .right.sideItem13 {
    margin-left: 50px !important;
  }
  .right.sideItem14 {
    margin-left: 80px !important;
  }
  .right.sideItem15 {
    margin-left: 110px !important;
  }
  .right.sideItem16 {
    margin-left: 120px !important;
  }
  .right.sideItem17 {
    margin-left: 110px !important;
  }
  .right.sideItem18 {
    margin-left: 80px !important;
  }
  .right.sideItem19 {
    margin-left: 50px !important;
  }
  .right.sideItem20 {
    margin-left: 30px !important;
  }
  .right.sideItem21 {
    margin-left: -10px !important;
  }
  .bottom-nav-inner {
    width: calc(100vw - 100px);
    margin-left: 50px;
    margin-right: 50px;
  }
}

@media screen and (min-width: 1080px) {
  .bottom-nav-inner {
    width: 1000px;
    margin: auto;
  }
}

@media screen and (min-width: 1440px) {
  .sideBox {
    width: 400px;
  }
  .centerBox {
    width: calc(100% - 800px);
  }
  .sideItem {
    width: 200px;
  }
  .left.sideItem0 {
    margin-right: -55px !important;
  }
  .left.sideItem1 {
    margin-right: 20px !important;
  }
  .left.sideItem2 {
    margin-right: 65px !important;
  }
  .left.sideItem3 {
    margin-right: 100px !important;
  }
  .left.sideItem4 {
    margin-right: 130px !important;
  }
  .left.sideItem5 {
    margin-right: 140px !important;
  }
  .left.sideItem6 {
    margin-right: 130px !important;
  }
  .left.sideItem7 {
    margin-right: 100px !important;
  }
  .left.sideItem8 {
    margin-right: 65px !important;
  }
  .left.sideItem9 {
    margin-right: 20px !important;
  }
  .left.sideItem10 {
    margin-right: -55px !important;
  }
  .right.sideItem11 {
    margin-left: -25px !important;
  }
  .right.sideItem12 {
    margin-left: 50px !important;
  }
  .right.sideItem13 {
    margin-left: 95px !important;
  }
  .right.sideItem14 {
    margin-left: 130px !important;
  }
  .right.sideItem15 {
    margin-left: 160px !important;
  }
  .right.sideItem16 {
    margin-left: 170px !important;
  }
  .right.sideItem17 {
    margin-left: 160px !important;
  }
  .right.sideItem18 {
    margin-left: 130px !important;
  }
  .right.sideItem19 {
    margin-left: 95px !important;
  }
  .right.sideItem20 {
    margin-left: 50px !important;
  }
  .right.sideItem21 {
    margin-left: -25px !important;
  }
}

@media screen and (min-height: 0px) {
  .record-iframe {
    margin-top: 0px;
    max-height: none;
    height: 100%;
    width: 100%;
  }
}

@media screen and (min-height: 768px) {
  .record-iframe {
    margin-top: 0px;
    max-height: none;
    height: 100%;
    width: 100%;
  }
}

label.checked {
  opacity: 0.4;
}

div.MuiSnackbar-root {
  bottom: calc(50% - 50vh + 24px) !important;
}

div.react-tel-input {
  max-width: 400px !important;
  min-width: 400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 30px !important;
}

div.react-tel-input input.form-control {
  width: 400px !important;
  height: 45px !important;
}

div.react-tel-input ul.country-list {
  width: 400px !important;
}

div.react-tel-input ul.country-list input.search-box {
  width: 350px !important;
}

div.rhap_container {
  background-color: transparent !important;
  padding: 5px !important;

  @media (max-width: 1024px) {
    padding: 0 !important;
  }
}

button.rhap_rewind-button {
  display: none !important;
}

button.rhap_forward-button {
  display: none !important;
}

.rhap_controls-section .rhap_main-controls {
  margin: auto !important;
}

.rhap_progress-indicator {
  border-radius: 0px !important;
  margin-left: 0px !important;
  width: 10px !important;
}

.ant-message {
  z-index: 99999 !important;
  /* width: 60%; */

  /* .ant-message-custom-content.ant-message-info {
    align-items: start;
  }

  span.anticon.anticon-info-circle {
    margin-top: 4px;
  } */
}