:root
{
    --height-header-nav:        56px;
    --min-width-header-nav:     1120px;
}

main
{
    padding-top: 1.5rem;
    min-height: calc(100vh - var(--height-header-nav));
}

header
{
    height: var(--height-header-nav);
}

.videoSourcesDragEvent > .ui-resizable-handle 
{
    right: 1rem;
    bottom: -1rem;
}

.card-camera
{
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    overflow: hidden;
}

.card-camera_img
{
    width: 100%;
    height: 100%;
}

.card-camera_element
{
    position: absolute;
    left: 0.8rem;
    display: flex;
}

.card-camera_name
{
    bottom: 1.5rem;
}

.video-container 
{
    margin: 0;
    padding: 0;
    height: 60vh!important; 
    width: 100%!important; 
    margin: auto;
    z-index: 5;
}

.video-container.fullscreen 
{
    width: 100%;
    height: 100vh!important;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.video-type-caption
{
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 30px;
    color: white;
}

#playPauseSoundIcon
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

#volume-slider
{
    display: inline-block; 
}

#autoplay-sound-notification
{
    display: none;
}

.camcontrols
{
    padding-bottom:10px;
    width:100%;
}

.logo-small
{
	color: gray;
	font-size: 50px;
}

.f-icons
{
	color: black;
}

.remote-video
{
    width: 100%;
    height: 100%;
}

#saveButton
{
    margin: 20px 0 10px 0;
}

.image-area
{
    max-width: 800px;
    max-height: 800px;
}

.image-area-wrapper
{
    position: absolute;
    max-width: 800px;
    max-height: 800px;
}

.disable-selection
{
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select:none;
    user-select:none;
    -o-user-select:none;
}

body .card-camera_name
{
    color: var(--fs-spec-black-pure);
}

body.dark-mode .card-camera_name
{
    color: var(--fs-spec-white-pure);
}

.max-height-240px { max-height: 240px;}
.height-70px  { height: 70px; }
.height-auto { height: auto; }

.outline-none { outline: none; }

.max-width-320px { max-width: 320px }
.max-width-800px { max-width: 800px; }
.min-width-38px { min-width: 38px; }
.width-zero { width: 0%; }
.width-100-percent { width: 100%; }
.width-80-percent { width: 80%; }
.width-50-percent { width: 50%; }

.margin-top-20px { margin-top: 20px; }
.margin-top-30px { margin-top: 30px;}
.margin-bottom-5px { margin-bottom: 5px; }
.margin-bottom-10px { margin-bottom: 10px; }

.margin-zero { margin: 0 0 0 0; }
.margin-0-0-5-0 { margin: 0px 0px 5px 0px; }
.margin-20-0-5-0 { margin: 20px 0px 5px 0px; }
.margin-40-10-0-10 { margin: 40px 10px 0px 10px; }

.padding-zero{ padding: 0 0 0 0; }

.glyphicon-refresh-animate 
{
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}


/* CUSTOM START */
#archive-panel
{
    background: var(--custom-archive-panel-background-color);
}

#archive-panel button
{
    background: var(--custom-archive-panel-button-background-color);
    border-color: var(--custom-archive-panel-button-border-color);
    color: var(--custom-archive-panel-button-text-color);
}

.btn-primary
{
    background: var(--custom-btn-primary-background-color);
    border-color: var(--custom-btn-primary-border-color);
    color: var(--custom-btn-primary-text-color);
}

.btn-primary:hover
{
    background: var(--custom-btn-primary-background-color-hover);
}

.modal-btn-close
{
    filter: var(--fs-filter-first);
}
/* CUSTOM END */


/********** LIGHT MODE START **********/
body
{
    background-color: var(--main-bg-color-light)!important;
}

body header nav
{
    background-color: var(--header-bg-color-light)!important;
    box-shadow: 0px 1px 5px #0e0e0e;
    text-transform: var(--header-text-transform);
    border-radius: 0;
    border: none;
}

body header nav .nav-link
{
    cursor: pointer;
    height: 100%;
    color: var(--navbar-nav-nav-link-text-color)!important;
}

body header nav .navbar-nav .nav-item div
{
    display: flex;
    align-items: center;
    gap: 0.3em;
}

body #xeomaNavbarButton
{
    cursor: pointer;
    color: var(--navbar-brand-text-color)!important;
    text-transform: var(--navbar-brand-text-transform)!important;
}

body header nav .nav-link:hover
{
    color: var(--navbar-nav-nav-link-text-color-hover)!important;
    background-color: var(--navbar-nav-nav-link-background-color-hover)!important;
}

body header nav .navbar-brand
{
    color: var(--navbar-brand-text-color);
    text-transform: var(--navbar-brand-text-transform);
}

body header nav .navigation-link
{
    cursor: pointer;
}

.navbar-nav-dropdown-menu
{
    background-color: var(--navbar-nav-dropdown-menu-background-color)!important;
}

.navbar-nav-dropdown-menu .dropdown-item
{
    color: var(--navbar-nav-dropdown-menu-item-text-color)!important;
}

.navbar-nav-dropdown-menu .dropdown-item:hover
{
    color: var(--navbar-nav-dropdown-menu-item-text-color-hover)!important;
    background-color: var(--navbar-nav-dropdown-menu-item-background-color-hover)!important;
}


body header nav .navigation-link .active,
body header nav .navigation-link .active:hover,
body header nav .navigation-link .active:focus,
body header nav .nav-link .active,
body header nav .nav-link .active:hover,
body header nav .nav-link .active:focus
{
    color: var(--navbar-nav-nav-link-active-text-color)!important;
    background: var(--navbar-nav-nav-link-active-background-color)!important;
}

body .nav-link-block-item
{
    cursor:pointer;
    font-size: 2rem;
    color: var(--fs-spec-black-600)!important;
}
body .nav-link-block-item:hover
{
    opacity: 0.8;
}

/* VIDEO SOURCE CARD LIGHT START */
body .videoSourcesDragEvent
{
    cursor: pointer;
}
body .videoSourcesDragEvent .navigatorCard
{
    color: var(--fs-spec-black-pure)!important;
    background-color: var(--fs-spec-white-pure)!important;
    box-shadow: 0px 3px 3px 0px var(--fs-spec-grey-300)!important;
}
/* VIDEO SOURCE CARD LIGHT END */


/* VIDEO SOURCE VIEW BLOCK LIGHT START */
body .source-view-block
{
    color: var(--fs-spec-black-pure)!important;
}
/* VIDEO SOURCE VIEW BLOCK LIGHT END */


/* ACTIVATION BLOCK LIGHT START */
body .activation-block
{
    background-color: var(--fs-spec-white-pure)!important;
    box-shadow: 0px 3px 3px 0px var(--fs-spec-grey-300)!important;
}

body .activation-block p
{
    color: var(--fs-spec-black-pure)!important;
}
/* ACTIVATION BLOCK LIGHT END */


/* CAM SEARCH BLOCK LIGHT START */
body .cam-search-block
{
    color: var(--fs-spec-black-pure)!important;
}
/* CAM SEARCH BLOCK LIGHT END */


/* ARCHIVE FORM MODAL COMPONENT LIGHT START */
body .fs-modal .modal-body form
{
    box-shadow: none!important;
}
/* ARCHIVE FORM MODAL COMPONENT LIGHT END */


/* CLOUD LINKS CONTAINER COMPONENT LIGHT START */
body #cloud-links-container div
{
    cursor: pointer;
}

body #cloud-links-container div
{
    color: var(--fs-spec-grey-800);
}

body #cloud-links-container div:hover
{
    color: var(--fs-spec-grey-800);
    opacity: 0.9;
}
/* CLOUD LINKS CONTAINER COMPONENT LIGHT END */


/* FORM LIGHT START */
body form
{
    background-color: var(--fs-spec-white-pure);
    box-shadow: 0px 1px 5px var(--fs-spec-black-600);
}

body form #mark-mode-group
{
    box-shadow: none;
}

body form label
{
    color: var(--fs-spec-black-purey);
}

body form input,
body .fs-form-input,
body form select.form-control,
body .fs-form-select
{
    color: var(--fs-spec-black-pure)!important;
}

body form input:focus,
body .fs-form-input:focus,
body form select.form-control:focus,
body .fs-form-select:focus
{
    border: 1px solid var(--fs-spec-blue-900)!important;
    box-shadow: none!important;
}

body form select
{
    color: var(--fs-spec-black-pure)!important;
    background-color: var(--fs-spec-white-pure)!important;
    border: 1px solid var(--fs-spec-grey-300)!important;
}

body form button, body form .saveButtonText:not
{
    color: var(--fs-spec-white-pure);
}
/* FORM LIGHT END */




/* CLOUD HOME PAGE MAIN BLOCK LIGHT START */
body .cloudHomePageMainBlock h2,
body .cloudHomePageMainBlock h4
{
    color: var(--fs-spec-blue-a-700);
    margin-bottom: 1.5rem;
}

body .cloudHomePageNavBlock
{
    background-color: var(--fs-spec-white-pure);
    box-shadow: 0px 1px 5px var(--fs-spec-black-600);
}

body .cloudHomePageNavBlock div div
{
    cursor: pointer;
}

body .cloudHomePageNavBlock div div:hover *
{
    color: var(--fs-spec-blue-500)!important;
}

body .cloudHomePageNavBlock *
{
    color: var(--fs-spec-blue-800)!important;
}
/* CLOUD HOME PAGE MAIN BLOCK LIGHT END */

/* CLOUD INFO PAGE MAIN BLOCK LIGHT START */
body .cloudInfoPageMainBlock
{
    color: var(--fs-spec-black-pure);
    background-color: var(--fs-spec-white-pure);
    box-shadow: 0px 1px 5px var(--fs-spec-black-600);
}
/* CLOUD INFO PAGE MAIN BLOCK LIGHT END */

/* CLOUD GLOBAL SETTING PAGE MAIN BLOCK LIGHT START */
body .cloudGlobalSettingPageMainBlock
{
    color: var(--fs-spec-black-pure);
    background-color: var(--fs-spec-white-pure);
    box-shadow: 0px 1px 5px var(--fs-spec-black-600);
}
/* CLOUD GLOBAL SETTING PAGE MAIN BLOCK LIGHT END */

/********** LIGHT MODE END **********/










/********** DARK MODE START **********/
body.dark-mode
{
    background-color: var(--main-bg-color-dark)!important;
}

body.dark-mode header nav
{
    background-color: var(--header-bg-color-dark)!important;
    box-shadow: 0px 1px 5px var(--fs-spec-black-900);
}

body.dark-mode header nav .dropdown .dropdown-menu
{
    background-color: var(--fs-spec-black-800)!important;
}

body.dark-mode .nav-link-block-item
{
    color: var(--fs-spec-white-pure)!important;
}

/* VIDEO SOURCE CARD DARK START */
body.dark-mode .videoSourcesDragEvent .navigatorCard
{
    color: var(--fs-spec-white-pure)!important;
    background-color: var(--fs-spec-black-500)!important;
    box-shadow: 0px 3px 3px 0px var(--fs-spec-black-900)!important;
}

body.dark-mode .videoSourcesDragEvent .ui-resizable-handle
{
    filter: invert(100%);
}
/* VIDEO SOURCE CARD DARK END */


/* VIDEO SOURCE VIEW BLOCK DARK START */
body.dark-mode .source-view-block
{
    color: var(--fs-spec-white-pure)!important;
}
/* VIDEO SOURCE VIEW BLOCK DARK END */


/* ACTIVATION BLOCK DARK START */
body.dark-mode .activation-block
{
    background-color: var(--fs-spec-black-500)!important;
    box-shadow: 0px 3px 3px 0px var(--fs-spec-black-900)!important;
}

body.dark-mode .activation-block p,
body.dark-mode .activation-block label
{
    color: var(--fs-spec-white-pure)!important;
}

body.dark-mode .activation-block input,
body.dark-mode .activation-block select
{
    color: var(--fs-spec-white-pure)!important;
    background-color: var(--fs-spec-black-700)!important;
    border: 1px solid var(--fs-spec-black-900)!important;
}
/* ACTIVATION BLOCK DARK END */


/* CAM SEARCH BLOCK DARK START */
body.dark-mode .cam-search-block
{
    color: var(--fs-spec-white-pure)!important;
}
/* CAM SEARCH BLOCK DARK END */


/* LANGUAGE MODAL COMPONENT DARK START */
body.dark-mode .modal-dialog .modal-content
{
    color: var(--fs-spec-white-pure)!important;
    background-color: var(--fs-spec-black-500)!important;
}

body.dark-mode .modal-dialog .modal-content select
{
    color: var(--fs-spec-white-pure)!important;
    background-color: var(--fs-spec-black-800)!important;
}
/* LANGUAGE MODAL COMPONENT DARK END */


/* ARCHIVE FORM MODAL COMPONENT DARK START */
body.dark-mode .fs-modal .modal-content
{
    color: var(--fs-spec-white-pure)!important;
    background-color: var(--fs-spec-black-500);
}

body.dark-mode .fs-modal .modal-content select
{
    color: var(--fs-spec-white-pure);
    background-color: var(--fs-spec-black-800);
}
body.dark-mode .fs-modal .input-group-text
{
    color: var(--fs-spec-white-pure);
    background-color: var(--fs-spec-black-800)!important;
    border: 1px solid var(--fs-spec-black-900)!important;
}
/* ARCHIVE FORM MODAL COMPONENT DARK END */


/* ARCHIVE BOTTOM FORM START */
body.dark-mode .archive-bottom-form .input-group-text,
body.dark-mode .archive-bottom-form .slider-control
{
    color: var(--fs-spec-white-pure);
    background-color: var(--fs-spec-black-800)!important;
    border: 1px solid var(--fs-spec-black-900)!important;
}
/* ARCHIVE BOTTOM FORM DARK END */

/* ARCHIVE INFO TEXT DARK START */
body.dark-mode #archiveInfo
{
    color: var(--fs-spec-white-pure)!important;
}
/* ARCHIVE INFO TEXT DARK END */


/* CLOUD LINKS CONTAINER COMPONENT DARK START */
body.dark-mode #cloud-links-container div div
{
    color: var(--fs-spec-grey-500)!important;
}
/* CLOUD LINKS CONTAINER COMPONENT DARK END */


/* CLOUD SEARCH FORM CONTAINER COMPONENT DARK START */
body.dark-mode #search-field
{
    color: var(--fs-spec-white-pure)!important;
    background-color: var(--fs-spec-black-900)!important;
    border: 1px solid var(--fs-spec-black-900)!important;
}
body.dark-mode #search-field::placeholder 
{
    color: var(--fs-spec-grey-400);
}
/* CLOUD LINKS CONTAINER COMPONENT DARK END */


/* User personal account component */ 
/* FORM DARK START */
body.dark-mode form
{
    background-color: var(--fs-spec-black-500);
    box-shadow: 0px 1px 5px var(--fs-spec-black-800);
}

body.dark-mode form label
{
    color: var(--fs-spec-white-pure);
}

body.dark-mode form input,
body.dark-mode form textarea,
body.dark-mode .fs-form-input,
body.dark-mode form select.form-control,
body.dark-mode .fs-form-select
{
    color: var(--fs-spec-white-pure)!important;
    background-color: var(--fs-spec-black-700)!important;
    border: 1px solid var(--fs-spec-black-900)!important;
}

body.dark-mode form .form-range
{
    background-color: transparent!important;
    border: none!important;
}

body.dark-mode form #presets-list
{
    background-color: var(--fs-spec-black-700)!important;
}

body.dark-mode form #presets-list a
{
    color: var(--fs-spec-white-pure)!important;
    background-color: var(--fs-spec-black-800)!important;
    border-radius: 0;
}

body.dark-mode form #presets-list a.active
{
    background-color: var(--fs-spec-black-500)!important;
}

body.dark-mode form #presets-list a:hover
{
    background-color: var(--fs-spec-black-600)!important;
}

body.dark-mode form input:focus, form textarea:focus, body.dark-mode .fs-form-input:focus
{
    border: 1px solid var(--fs-spec-blue-600)!important;
}

body.dark-mode form select
{
    color: var(--fs-spec-white-pure)!important;
    background-color: var(--fs-spec-black-600)!important;
    border: 1px solid var(--fs-spec-black-900)!important;
}

body.dark-mode form button, body.dark-mode form .saveButtonText:not
{
    color: var(--fs-spec-white-pure);
}
/* FORM DARK END */




/* CLOUD HOME PAGE MAIN BLOCK DARK START */
body.dark-mode .cloudHomePageMainBlock h2,
body.dark-mode .cloudHomePageMainBlock h4
{
    color: var(--fs-spec-white-800);
}

body.dark-mode .cloudHomePageNavBlock
{
    background-color: var(--fs-spec-black-500);
    box-shadow: 0px 1px 5px var(--fs-spec-black-800);
}

body.dark-mode .cloudHomePageNavBlock div div:hover *
{
    color: var(--fs-spec-grey-300)!important;
}

body.dark-mode .cloudHomePageNavBlock *
{
    color: var(--fs-spec-white-pure)!important;
}
/* CLOUD HOME PAGE MAIN BLOCK DARK END */


/* CLOUD INFO PAGE MAIN BLOCK DARK START */
body.dark-mode .cloudInfoPageMainBlock
{
    color: var(--fs-spec-white-pure)!important;
    background-color: var(--fs-spec-black-500)!important;
    box-shadow: 0px 1px 5px var(--fs-spec-black-800)!important;
}
/* CLOUD INFO PAGE MAIN BLOCK DARK END */


/* CLOUD GLOBAL SETTING PAGE MAIN BLOCK DARK START */
body.dark-mode .cloudGlobalSettingPageMainBlock
{
    color: var(--fs-spec-white-pure);
    background-color: var(--fs-spec-black-500);
    box-shadow: 0px 1px 5px var(--fs-spec-black-800);
}

body.dark-mode .accordion-item
{
    border: 1px solid var(--fs-spec-black-900);
    background-color: var(--fs-spec-grey-900);
}

body.dark-mode .accordion-item table *
{
    color: var(--fs-spec-white-pure)!important;
}

body.dark-mode .accordion-item table td
{
    border-bottom: 1px solid var(--fs-spec-black-900);
}

body.dark-mode .accordion-item table .input-group-text
{
    background-color: var(--fs-spec-black-800)!important;
    border: 1px solid var(--fs-spec-black-900)!important;
}

body.dark-mode .accordion-item table input
{
    color: var(--fs-spec-white-pure)!important;
    background-color: var(--fs-spec-black-700)!important;
    border: 1px solid var(--fs-spec-black-900)!important;
}

body.dark-mode .accordion-item table input:focus
{
    border: 1px solid var(--fs-spec-blue-grey-900)!important;
    box-shadow: none!important;
}

body.dark-mode .cloudGlobalSettingPageMainBlock .accordion-item button
{
    color: var(--fs-spec-white-pure);
    background-color: var(--fs-spec-black-700);
    border-radius: 0!important;
    box-shadow: none!important;
}

body.dark-mode .cloudGlobalSettingPageMainBlock .accordion-item button:after
{
    filter: invert(1);
}
/* CLOUD GLOBAL SETTING PAGE MAIN BLOCK DARK END */


/********** DARK MODE END **********/









/* ARCHIVE LIST PAGE START */
#archive-menu
{
    width: 300px;
    margin: 5px 0 5px 0;
}

#archive-menu .container-fluid:hover
{
    background-color: unset!important;
}

.image-block
{
    position: relative;
    width: 100%;
    background: black;
    overflow: hidden;
}

.preview-image
{
    position: absolute;
    width: auto;
    height: auto;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/* ARCHIVE LIST PAGE END */


/* SOURCE LIST PAGE START */
#viewparams
{
    background-color: #414141;
}

#mainrow
{
    margin-bottom: 10px;
}

#maintext
{
    margin: 0;
}

#framerate-menu-item
{
    width: 300px;
    margin: 5px 0 5px 0;
}

.caption
{
    overflow: auto;
}

.image-block
{
    position: relative;
    width: 100%;
    background: black;
    overflow: hidden;
}

.first-image,
.second-image
{
    position: absolute;
    object-fit: contain;
    width: 100%!important;
    height: 100%!important;
    margin: auto;
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.second-image
{
    z-index: 999;
}

.ui-icon
{
    background-image: url(?obj=ui_icons.png);
}

.col-sm-6
{
    margin-bottom: 30px;
}

.videoSourcesDragEvent
{
    min-width: 200px;
    min-height: 112px;
}

.videoSourcesDragEvent > .ui-resizable-handle 
{
    right: 1rem;
    bottom: -1rem;
}
/* SOURCE LIST PAGE END */



@-webkit-keyframes spin2 
{
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin 
{
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}


/* MOBILE */
@media (max-width: 576px)
{

body #videosources .videoSourcesDragEvent
{
    padding-left: 0;
    padding-right: 0;
}


body #videosources .videoSourcesDragEvent .navigatorCard
{
    border: none;
}


body #videosources .videoSourcesDragEvent .navigatorCard img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


}