/* monochrome gradient */

:root {
    --color-gradient-one: #0a0f24;
    --color-gradient-two: #162d6c;
    --color-gradient-three: #2d4d9c;
    --angle-gradient: 150deg;
    --bg-color-custom-one: black;
    --bg-color-custom-two: black;
    --text-color-custom-one: white;
    --text-color-custom-two: white;
    --color-custom-three: black;
    --color-btn-primary: black;
    --color-btn-primary-hover: green;
    --color-custom-four: red;
    --color-custom-five: #ffc107;
    --color-custom-text: var(--text-color-custom-one);
    --color-custom-icons: var(--color-custom-text);
    --color-custom-icons-hover: var(--color-custom-text);
    --color-custom-validate: green;
    --border-custom-width: 1px;
    --border-custom-color: #ffffff;
    --border-custom: var(--border-custom-width) solid var(--border-custom-color);
}

/* Gradient rules */
body {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%);
}

body.in-conference header, body.in-event header {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%);
}

body #app-layout #main-container #conference #bottom-bar {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%);
}

#right-panel {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%);
}

.js-toggle-pin-right-panel, .js-toggle-pin-right-panel-full {
    background: transparent !important;
}

#chat-room-toggle {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%);
}

.bottom-modal {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%);
}

#chat-room-modal {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%);
}

#conference-language-choose img.choosed,
#interpreters-display .speaker .video-user .video-user-header,
#speakers .video-user .video-user-header {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%) !important;
}

#speakers .video-user .volume, #interpreters-display .video-user .volume {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%) !important;
}

.card-ouispeak.color-two {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%) !important;
}

#connecting .card-ouispeak {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%) !important;
}

#modal-main .modal-content {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%);
}

#conference.modeReplay #modeReplay .conference-block-link a {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%);
}

#conference.modeReplay #modeReplay .conference-block-link a .details-container a {
    background: none;
}

#panel-questions .btn-question-to-the-speakers {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%);
}

#conference-links-modal, #conference-links .conference a .status {
    border: none;
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%);
}

#conference-links.mobile {
    background: linear-gradient(var(--angle-gradient), var(--color-gradient-one) 0%, var(--color-gradient-two) 50%, var(--color-gradient-three) 100%);
}

#conference-links.mobile.pinned>div::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#conference-links.mobile.pinned>div::-webkit-scrollbar-thumb {
    background: var(--color-gradient-three);
    border-radius: 4px;
}

#conference-links.mobile .conference a {
    width: 95% !important;
}

#conference-links .conference a {
  border: var(--border-custom);
}