:root {
    --erocms-sidebar-boder-light-color: #ffffffcc;
    --erocms-color-light: #f8f9fa;
    --erocms-color-green: #38b138;
    --erocms-color-hover: #212529;
    --erocms-color-dark: #212529;
    --erocms-link-color: #38b138;
    --erocms-link-color-hover: #212529;
    --erocms-bg-color: #212529;
    --erocms-bg-color-light: #f8f9fa;
    --erocms-sitebar-bg-hover: #f8f9fa;
    --erocms-warning-color: #ffa500;
    
    --erocms-actor-color: var(--erocms-color-dark);
    --erocms-member-color: #9f9f9f;    
}

.erocms-bg-color {
    background-color: var(--erocms-bg-color);
}

.erocms-text-light {
    color: var(--erocms-color-light);
}


a {
    text-decoration: none;
    color: var(--erocms-link-color);
}

a:hover {
    color: var(--erocms-link-color-hover);
}

.no-select, .material-symbols-outlined {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


#own_sidebar {
    width:100%;
    max-width: 300px;
    height:100vh;
    position:absolute;
    z-index:3;
    top:0;
    right:-350px;
    display:none;
    border-left: 1px solid var(--erocms-sidebar-boder-light-color);
}

#own_sidebar #sidebar_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--erocms-sidebar-boder-light-color);
}

#own_sidebar #sidebar_header #hide_sidebar { 
    padding: 0.5rem;
    background-color: var(--erocms-bg-color-light);
    width: 2rem;
    height: 2rem;
    box-sizing: content-box;
    cursor:pointer; 
}

#own_sidebar #sidebar_header #hide_sidebar span {
    font-size:2rem;
    color: var(--erocms-color-dark);
}


#own_sidebar #sidebar_header .buy_coins {
    text-align: center;
    width: 100%;
    cursor: pointer;
}

#own_sidebar #sidebar_body {
    padding: 0.5rem 0 0.5rem 0;
}

#own_sidebar #sidebar_body .actor_profile_picture {
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto 0.5rem auto;
}

#own_sidebar #sidebar_body .actor_profile_picture img {
    width:100%;
    height:100%;
    object-fit:cover;
}

#own_sidebar #sidebar_body ul li i.material-symbols-outlined {
    margin: 0 10px 0 5px;
    font-size: 1.5rem;
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
}

#own_sidebar #sidebar_body li.active,
#own_sidebar #sidebar_body li:hover {
    background-color: var(--erocms-sitebar-bg-hover) !important;
}

#own_sidebar #sidebar_body li.active a,
#own_sidebar #sidebar_body li:hover a {
    color: var(--erocms-color-dark) !important;
}

#body_box, #movieplayer_box {
    height: 100vh;
    overflow: hidden;
    position:relative;
}

#livecam_box, #movieplayer_box {
    height: 100vh;
    display:none;
}    

#livecam_box video,
.livecam_stream-dimensions,
#movieplayer_box video {
    max-height: 100%;
    max-width: 100%;
    height: 100vh;
    width: 100vw;
    /* object-fit: cover; */
}

/* Allgemeiner Ansatz: Steuerelemente in verschiedenen Browsern ausblenden */
#livecam_box video::-webkit-media-controls,
#livecam_box video::-webkit-media-controls-enclosure,
#livecam_box video::-webkit-media-controls-panel,
#livecam_box video::-webkit-media-controls-start-playback-button,
#livecam_box video::-moz-full-screen-ancestor,
#livecam_box video::-moz-media-controls,

#livecam_stream::-webkit-media-controls,
#livecam_stream::-webkit-media-controls-enclosure,
#livecam_stream::-webkit-media-controls-panel,
#livecam_stream::-webkit-media-controls-start-playback-button,
#livecam_stream::-moz-full-screen-ancestor,
#livecam_stream::-moz-media-controls {
    display: none !important;
}


#icon_nav_bar {
    position: absolute;
    width: 54px;
    height: auto;
    /* bottom: 2rem; */
    top: 0;
    right: 2rem;
    z-index: 3;
}

#icon_nav_bar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#icon_nav_bar ul li {
    padding: 0.5rem;
    background-color: var(--erocms-bg-color-light);
    width: 2rem;
    height: 2rem;
    box-sizing: content-box;
    cursor:pointer; 
    margin-top:1rem;
}

#icon_nav_bar ul li span {
    font-size:2rem;
    color:var(--erocms-color-dark);
}

#icon_nav_bar ul li#toggle_video_muted span {
    color:red;
}

#icon_nav_bar ul li#toggle_webcam,
#icon_nav_bar ul li#toggle_webcam_sound {
    display:none;
}

#icon_nav_bar #toggle_messenger_textarea {
    position: relative;
}

#icon_nav_bar #toggle_messenger_textarea #number_new_messages {
    position: absolute;
    top: -0.6rem;
    right: -0.4rem;
    background-color: var(--erocms-color-green);
    width: 1.8rem;
    height: 1.8rem;
    text-align: center;
    font-size: 1.2rem;
    display: none;
}

#webcam_alert_info {
    bottom: -300px;
    position: absolute;
    right: 1rem;
    z-index: 2;
    margin-left:1rem;
}

#webcam_alert_info img {
    max-height: 95px;
    max-width: 95px;
    width:100%;
    height: auto;
}

/* ======================================== 
 * Lightbox
 * ======================================== 
 */

.lightbox {
  /* Default to hidden */
  display: none;

  /* Overlay entire screen */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* A bit of padding around image */
  padding: 1em;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when it's the target */
.lightbox:target {
  display: block;
}

.lightbox span {
  /* Full width and height */
  display: block;
  width: 100%;
  height: 100%;

  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}


/* ======================================== 
 * Modals
 * ======================================== 
 */

#attach_file_modal,
#gifts_modal,
#webcam_waiting_for_activation_modal,
#webcam_is_displayed_on_another_device_modal,
#not_enough_coins,
#webcam_price_modal,
#signin_modal,
#signup_modal {display: none;}

#attach_file_modal modal-dialog,
#gifts_modal modal-dialog,
#webcam_waiting_for_activation_modal .modal-dialog,
#webcam_is_displayed_on_another_device_modal .modal-dialog,
#webcam_price_modal .modal-dialog,
#not_enough_coins .modal-dialog,
#signin_modal .modal-dialog,

#signup_modal .modal-dialog,
#attach_file_modal .modal-dialog {z-index: 3;}

#signin_modal #signin_modal_error,
#signup_modal #signup_modal_success,
#signup_modal #signup_modal_error{display:none;}

#signin_modal.bg-secondary,
#signup_modal.bg-secondary {
    --bs-bg-opacity: 0.6;
}

#signup_modal .modal-header,
#signup_modal .modal-header {
    padding:3rem 3rem 1.5rem 3rem;
}

#signup_modal .modal-body ,
#signup_modal .modal-body  {
    padding:0rem 3rem 3rem 3rem;
}

#attach_file_modal .material-symbols-outlined,
#gifts_modal .material-symbols-outlined {
    font-size:4rem;
}

#attach_file_modal #select_file #select_file_pdf .material-symbols-outlined { 
    transform: rotate(-45deg);
}

#attach_file_modal #select_file #select_file_pdf,
#attach_file_modal #select_file #select_file_image {
    cursor: pointer;
}

#attach_file_modal #select_file,
#gifts_modal #select_gift,
#gifts_modal #gift_payed {
    align-items: center;
}

#attach_file_modal .file_error {
    display:none;
}

#attach_file_modal #file_sent {
    color: var(--erocms-color-green);
    font-size: 1.2rem;
    align-items: center;
}


#select_file_pdf,
#select_file_image {
  display: inline-block;
  position: relative;
}

#select_file_pdf input[type="file"],
#select_file_image input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}


#gifts_modal #gift_payed .material-symbols-outlined {
    color: var(--erocms-color-green);
}

#gifts_modal .gift_error {
    display:none;
}

#loading_spinner {
    position: absolute;
    z-index: 1;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    font-size: 1.3rem;
    display:none;
}

#loading_spinner .spinner-border {
    width: 4rem;
    height: 4rem;
    --bs-spinner-animation-speed: 1s;
}

@media only screen and (max-width: 776px) {
    #icon_nav_bar {
        position: fixed; /* Ändere von 'absolute' auf 'fixed' */
        right: 1rem;
        /* bottom: 1rem; */ 
        max-height: 100vh; /* Verwende '100vh' für den sichtbaren Bereich des Viewports */
        width: 54px; /* Setze die Breite auf 54px, damit sie in dieser Ansicht gleich bleibt */
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    
    #signup_modal .modal-header,
    #signup_modal .modal-header {
        padding:1.5rem 1.5rem 1.5rem 1.5rem;
    }

    #signup_modal .modal-body ,
    #signup_modal .modal-body  {
        padding:0rem 1.5rem 1.5rem 1.5rem;
    }
}