/* WLVC styles */

/* Main Constants */
:root {
    --hc-text-color: rgb(24, 96, 150); /*rgb(50, 120, 180);*/ /*SteelBlue;*/ /*#024073;*/
    --hc-text-bkg-color: AliceBlue;
    --hc-main-bkg-color: #EBEBEB; /* Grey */
    --hc-chat-bkg-color: PaleTurquoise;
    --hc-btn-act-color: rgb(85, 155, 212);
    --hc-btn-hover-color: DeepSkyBlue;
}

.test-panel {
    border: 1px solid red;
}

.hc-body-scroll-off {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    color: var(--hc-text-color);
    overflow: hidden;
    background-color: var(--hc-main-bkg-color);
}

.hc-content-area {
    border: 1px solid LightGray;
    border-radius: 5px;
    padding: 5px 10px 5px 10px;
    background-color: white;
}

/* Bootstrap 5: */
/* Input text color */
.form-control,
.form-control:focus,
.form-select,
.dropdown-item {
    color: var(--hc-text-color);
}
/* Dialog */
.modal-header {
    background: linear-gradient(to top, rgb(210, 210, 210), rgb(255, 255, 255));
}
textarea {
    resize: none;
}
/* Placeholder text color */
.form-control::placeholder {
    color: LightGray;
}

/* Buttons color */
.wlvc-btn, .wlvc-btn + label {
    /*color: var(--hc-text-color);*/
    color: var(--hc-btn-act-color); /*var(--hc-btn-act-color);*/
    border-color: LightSteelBlue; /*var(--hc-btn-act-color);*/
    background-color: white;
    /*border: none;*/
    /*border-width: 2px;*/
    /*border-radius: 0px;*/
}
.wlvc-btn:hover, .wlvc-btn:hover + label, .wlvc-btn:hover + label:hover {
    color: var(--hc-btn-hover-color) !important;
    border-color: var(--hc-btn-hover-color) !important;
    background-color: rgb(230, 250, 255) !important;
}
.wlvc-btn:checked + label {
    color: white !important;
    border-color: var(--hc-btn-act-color) !important;
    background-color: var(--hc-btn-act-color) !important;
}
.wlvc-btn:disabled, .wlvc-btn:disabled + label {
    color: silver;
    border-color: silver;
    background-color: white;
}
.wlvc-btn:active, .wlvc-btn:active + label {
    transform: translate(0px, 2px);
    color: white;
    background-color: var(--hc-btn-act-color);
}
.hang-color, .wlvc-btn:hover + label.hang-color, .wlvc-btn:checked + label.hang-color {
    color: gold !important;
}
.wlvc-btn:disabled + label.hang-color {
    color: silver !important;
}
.wlvc-btn-icon {
    width: 18px;
    height: 18px;
    margin-bottom: 2px;
}
/* https://isotropic.co/tool/hex-color-to-css-filter/ */
.wlvc-btn:disabled > .wlvc-btn-icon,
.wlvc-btn:disabled + label > .wlvc-btn-icon {
    filter: invert(82%) sepia(4%) saturate(11%) hue-rotate(319deg) brightness(95%) contrast(91%); /* Silver */
}

.wlvc-btn-login, .wlvc-btn-logout {
  width: 160px;
  min-width: 160px;
  color: white;
}
.wlvc-btn-login {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
}
.wlvc-btn-logout {
  background-color: LightCoral;
  border-color: LightCoral;
}
.wlvc-btn-login:hover {
  background-color: LimeGreen !important;
  border-color: LimeGreen !important;
  color: white !important;
}
.wlvc-btn-logout:hover {
  background-color: Coral !important;
  border-color: Coral !important;
  color: white !important;
}
.login-color {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(4deg) brightness(102%) contrast(105%); /* White */
  transform: scaleX(-1);
}

.hangup-color {
    filter: invert(79%) sepia(51%) saturate(886%) hue-rotate(357deg) brightness(100%) contrast(105%); /* Gold */
}
.hangup-color-op {
    filter: invert(79%) sepia(51%) saturate(886%) hue-rotate(357deg) brightness(100%) contrast(105%) opacity(0.9); /* Gold Opacity */
}
.video-off-color {
    filter: invert(49%) sepia(15%) saturate(10%) hue-rotate(99deg) brightness(99%) contrast(86%); /* Gray #808080 */
}

.header-block {
    /*background: linear-gradient(to left, rgb(50, 120, 180), rgb(85, 155, 212), rgb(50, 120, 180));*/
    background: white;
    height: 140px;
    min-height: 140px;
    border-bottom: 2px solid lightgray;
}
.header-block-logo {
    display: none;
    width: 150px;
    min-width: 150px;
    margin: 5px;
    background-color: white;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    /*background-origin: content-box;*/
    background-size: contain;
}
.header-block-content {
    background: linear-gradient(to right, white, LightSkyBlue);
}
.header-block-content-court {
    /*height: 50px;*/
    padding-left: 5px;
    padding-top: 2px;
    font-size: 30px;
    line-height: 40px;
    /*color: DeepSkyBlue;*/
    /*text-shadow: 0px 1px 0px DodgerBlue;*/
}

.toolbar-block {
    /*background: linear-gradient(to top, #EBEBEB, White);*/
    /*background: White;*/
    background: linear-gradient(to right, white, lightgray);
    height: 50px;
    min-height: 50px;
    padding-left: 5px;
}

.status-block {
    background: linear-gradient(to right, white, lightgray);
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}
.long-status-block {
    display: none;
    background-color: var(--hc-text-bkg-color);
}

.near-join-block {
    /*height: 50px;*/
}

.btn-join-block {
    width: 120px;
    color: var(--hc-text-color);
    background-color: Aquamarine;
}

.interpret-block {
    height: 50px;
}
.select-lang {
    width: 200px;
}
.slider-balance {
    width: 200px;
}
.slider-balance::-moz-range-track {
    background: white;
}
.slider-balance::-webkit-slider-runnable-track {
    background-color: white;
}
.slider-balance:disabled::-moz-range-thumb {
    background: DarkGrey;
}
.slider-balance:disabled::-webkit-slider-thumb {
    background: DarkGrey;
}

.main-block {
    padding: 5px 5px 0px 5px;
}

.chat-block {
    display: none;
    width: 30%;
    min-width: 30%;
}
.chat-header {
    /*background: linear-gradient(to top, White, #EBEBEB);*/
}

.chat-block > hr {
    margin: 5px 0;
}

.chat-to-br-msg, .chat-fr-br-msg {
    /*max-width: 80%;*/
    margin: 5px 0;
}

.chat-to-br-msg {
    /*background-color: var(--hc-main-bkg-color);*/
}

.chat-fr-br-msg {
    /*background-color: var(--hc-text-bkg-color);*/
}

.chat-to-br-name, .chat-fr-br-name,
.chat-to-br-text, .chat-fr-br-text {
    max-width: 90%;
}
.chat-to-br-name, .chat-fr-br-name {
    font-size: 80%;
}
.chat-to-br-text, .chat-fr-br-text {
    padding: 2px 8px;
}
.chat-to-br-text {
    border-radius: 0px 10px 10px 10px;
    background-color: var(--hc-main-bkg-color);
}
.chat-fr-br-text {
    border-radius: 10px 0px 10px 10px;
    background-color: var(--hc-chat-bkg-color);
}

.footer-block {
    height: 25px;
    min-height: 25px;
    font-size: 75%;
}

.foot-block-content, .foot-block-hc {
    margin-left: 5px;
    line-height: 25px; /* = foot-block height, vertical align */
    white-space: nowrap;
}

.hc-video-area {
    width: 100%;
}

.player-block {
    position: absolute;
    border-radius: 5px;
    /*border: solid LightGray;*/
    border-width: 1px;
    background-color: black;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    /*background-size: auto;*/
    background-size: contain;
}

.hang-up-icon, .thumb-up-icon {
    position: absolute;
    left: 8px;
    font-size: 8px;
    color: rgba(255, 215, 0, 0.9); /*Gold*/
}
.hang-up-icon {
    top: 8px;
}
.thumb-up-icon {
    bottom: 40px;
}
.video-off-icon {
    position: absolute;
}
.video-blocked {
    position: absolute;
    top: 35%;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    font-size: 32px;
    /*font-size: 5vh;*/
    color: white;
    background-color: rgba(0, 0, 0, 0.0);
}
.player-text {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 32px;
    line-height: 32px;
    font-size: 20px;
    color: white;
    border-radius: 0 0 5px 5px;
    background-color: rgba(64, 64, 64, 0.5);
}
.player-ctx-menu {
    position: absolute;
    display: none;
    font-size: 90%;
}

.blink-icon {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}















