html,body {
  height: 100%;
}

body {
  font-family: "Noto Sans JP",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo UI","Meiryo",sans-serif;
  display: flex;
  align-items: center;
/*  padding-top: 40px;*/
  padding-bottom: 40px;
}

.form-phone {
  width: 100%;
  max-width: 360px;
/*  padding: 15px; */
  margin: auto;
}

.header {
/*  position: absolute;
  top: 0; */
  width: 100%;
  font-size: 2rem;
  /* Set the fixed height of the footer here */
  height: 50px;
  /* background-color: #fff; */
  text-align: left;
}

.footer {
/*  position: absolute;*/
/*  bottom: 0; */
  width: 100%;
  /* Set the fixed height of the footer here */
  /* height: 50px; */
  background-color: #fff;
}

#title_sub {
  margin-bottom: 100px;
}

.fl-font-color {
 color:#7f8c8d;
}

.pd-bottom {
  padding-bottom: 50px;
}

.bg-main-dark{
/*  background-color: #EFF9FD;*/
  background-color: #000;
}

.bg-light-dark{
  background-color: #1a1a1a;
}

.monitor-frame {
    /* background-color: white;*/
    height: 150px;
}

#videoNotification{
  font-size: 0.9em;
  color: #0b0b0b;
}

.calling-icon {
    /* text-align: left; */
    color: #2ccc74;
}

.icon-btn {
  line-height: 0;
}

.icon-border-radius {
  width: 40px;
  height: 40px;
  margin-right: 7px;
  /* line-height: 200px; */
  /* background-color: #00A0E9;*/
  background-color: #000;
  border-radius: 50%;
  /* color: #fff;*/
  text-align: center;
}

.icon-border-radius-red {
  width: 35px;
  height: 35px;
  margin-right: 7px;
  margin-top: 3px;
  margin-bottom: 2px;
  /* line-height: 200px; */
  background-color: #f23636;
  border-radius: 50%;
  /* color: #fff;*/
  text-align: center;
}

.bi-size {
    font-size: 1.8rem;
}

.bi-font-size {
    font-size: 0.9rem;
}

.btn-success {
    background: #2ecc71;
    border: none;
}

.btn-success:hover, .btn-success:focus,
.btn-success:active, .btn-success:active:focus, .btn-success:active:hover, .btn-success:active.focus,
.btn-success.active, .btn-success.active:focus, .btn-success.active:hover, .btn-success.active.focus,
.open > .dropdown-toggle.btn-success,
.open > .dropdown-toggle.btn-success:hover,
.open > .dropdown-toggle.btn-success:focus,
.open > .dropdown-toggle.btn-success.focus,
.btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus {
    background: #48CE30;
}


.btn-danger {
    background: #D02644;
    border: none;
}

.btn-danger:hover, .btn-danger:focus,
.btn-danger:active, .btn-danger:active:focus, .btn-danger:active:hover, .btn-danger:active.focus,
.btn-danger.active, .btn-danger.active:focus, .btn-danger.active:hover, .btn-danger.active.focus,
.open > .dropdown-toggle.btn-danger,
.open > .dropdown-toggle.btn-danger:hover,
.open > .dropdown-toggle.btn-danger:focus,
.open > .dropdown-toggle.btn-danger.focus,
.btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled.focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger.focus {
    background: #3498db;
}


#header-logo {
    height: 40px;
    margin-left: 10px;
}

#footer-logo {
    width: 70px;
    margin-right: 5px;
    margin-left: -5px;
}

#tenant_video,
#tenant_video_info {
    /*max-width: 100%;*/
    /* max-height: 300px; */
    width: 100vw;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

.text-custom {
  color: #34495e;
}
.ad-video-info {
  height: 50px;
  margin-bottom: 10px;
}

#tenant_video_info {
  min-height: 50px;
  background-color: white;
}

.btn-video-detail {
  font-size: 12px;
  line-height: 14px;
  background-color: #00A0E9;
  text-decoration: underline;
  border-radius: 20px;
  padding-left: 25px;
  padding-right: 25px;
}

.video-main-info {
  margin-left: 10px;
  width: auto;
  line-height: 16px;
  text-align: left;
  font-size: 12px;
}

.wrapper-video-info-30s .wrapper-info {
  max-width: 60%;
}

.wrapper-video-info-30s .video-main-info {
  max-width: 85%;
}

.wrapper-video-info-6s .wrapper-info {
  max-width: 100%;
}

.wrapper-video-info-6s .video-main-info {
  max-width: 80%;
}

.video-title-link {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.video-logo {
  width: 50px;
  height: 50px;
}

.video-logo img {
  height: 40px;
  width: 40px;
  margin: 5px;
  border-radius: 50%;
}

#tenant_movie {
  height: 56.25vw;
}

.btn-stop-call,
.btn-stop-call:hover {
    background-color: #D02644 !important;
}


.btn-start-call,
.btn-start-call:hover {
    background-color: #00b591ff !important;
}

#overlay {
  /*　要素を重ねた時の順番　*/
  z-index:1;

  /*　画面全体を覆う設定　*/
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);

  /*　画面の中央に要素を表示させる設定　*/
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

}

.modal_keypad {
  flex-grow: 1;
  z-index:2;
  width:50%;
  padding: 1em;
}

.custom-select-wrapper {
    position: relative;
    width: 90%;
    text-align: center
}

.custom-select-wrapper select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: white;
    padding-right: 2em;
    text-align: center;
    background-image: none !important;
}

.custom-select-wrapper::after {
    content: '▼';
    font-size: 16px;
    position: absolute;
    right: 25px;
    top: 65%;
    transform: translateY(-50%);
    color: #007bff;
    pointer-events: none;
    text-align: center;
}