/*===============================================================									CSS CUSTOM LAPSAPP
====================================================================SUMMARY==
01. MAIN SETTINGS
  01.1 VARIABLES
  01.2 DEFAULT CLASSES 
  01.3 RESET
   -- Fix bootstrap columns for Safari 
  01.4 CONTENT (general content)
  01.5 SCROLLBAR

02. NAVBAR HEADER
  02.1 HAMBURGER BUTTON - ARROW SHAPE
    02.1.1 HAMBURGER SHAPE
    02.1.2 ARROW SHAPE
  02.2 ICON FOR DROPDOWN PROFILE AND LOGOUT
  02.3 DROPDOWN PROFILE AND LOGOUT

03. SIDEBAR
  -- sidebar list
  -- dropdown sidebar
  03.1 SIDEBAR ICONS
  03.2 SIDEBAR FOOTER
  03.3 SIDEBAR EFFECT ON HOVER 
  03.4 SIDEBAR LOGO 

04. PARTIAL SIDEBAR
  04.1 PARTIAL SIDEBAR ICONS
  04.2 PARTIAL SIDEBAR DROPDOWN
  04.3 PARTIAL SIDEBAR TOOLTIP

05. CARD HOME
  -- hover effect for icon and p is in custom_gest.js
  -- card home title
  -- card home icon

06. FOOTER
07. BUTTON FLOATING HOME

08. LAYOUT PAGES
  08.1 MAIN CONTAINER
  08.2 HEADER PAGE 
    -- player header
    08.2.1 HEADER LOGO
  08.3 CONTROL PANEL   
    08.3.1 SEARCH BOX
    08.3.2 ICONS IN ACTION BUTTONS
    08.3.3 ACCORDION | HEADER PAGE - CONTROL PANEL + SCHEDA CAMERA (in edit_camera.php)
    -- accordion2
    -- chevron up for control panels
  08.4 CONTENT PAGE

09. BUTTONS STYLE
  09.1 PRIMARY BUTTON
    -- hover effect on button primary 'effect_primary'
  09.2 SECONDARY BUTTON 
  09.3 DARK BUTTON  
  09.4 UPLOAD DROPZONE
   -- upload svg

10. TABLE STYLE
  -- DataTables Style
  10.1 CHECKBOX IN TABLES
  10.2 TOOLTIP

11. SELECT2 STYLE
  --multiple select

12. FORM
  --anteprima logo
  12.1 LABELS
  12.2 INPUT
   -- height for input
  12.3 SPAN ERRORS

13. INDEX - LOGIN STYLE
  13.1 REGISTRATION FORM
  -- privacy check
  -- upload button
  -- anteprima logo
  -- form instruction

14. SCROLL TOP BUTTON

15. PLAYER
  -- switch camera buttons
  -- signal light
 15.1 PLAYER VIEW 
  -- disabled buttons
  15.1.1 VERTICAL CONTROLS
  15.1.2 TOOLTIP ON VERTICAL CONTROLS
 15.2 HORIZONTAL CONTROLS CONTAINER
  15.2.1 PLAYER TIMELINE
  -- Popup anteprima immagini player
  15.2.2 HORIZONTAL CONTROLS 
    15.2.2.1 TOGGLE PLAYER
    15.2.2.2 PLAYER ICONS
    15.2.2.3 FULLSCREEN ICONS
  15.3 PLAYER SITE INFO
  15.4 PLAYER PRELOADER
    15.4.1 SPINNER
    15.4.2 PROGRESS BAR


15F. PLAYER FULL
  15.F.1 PLAYER FULL VIEW
  
16. SETTINGS PAGE 
  -- tab menu
  -- admob cards

17. PAGINATION

18. MODALS
  -- add icon
  18.1 MODAL INFO (USER -  SITE -  CAMERA)
  18.2 MODAL ADD (BUILDER - CUSTOMER - SITE - CAMERA)
    -- modal add camera  
    18.2.1 Radio buttons - SOLARE - 220V | STATO TELECAMERA (also in edit_camera.php)
    -- modal add site
  18.3 MODAL INVITE
    -- height input email in modal invite
  18.4 MODAL LINK (CAM-SITE | SITE -USER) (**nothing here!**)
  18.5 MODAL PLAYER INFO SITE 
  18.6 MODAL PLAYER MAP = 18.9
  18.7 MODAL SHARE
  18.8 MODAL WEATHER
  18.9 MODAL CAM MAP  = 18.6

19. MENAGE CAMERAS (Gestione Telecamere in cameras.php)
  19.1 SELECT STATE CAMERA 
  -- Checkbox buttons (SELECT state cameras in cameras.php)    
  19.2 COUNTER
  19.3 FORM ADD CAMERA | FORM EDIT CAMERA
  19.4 HISTORY CAMERA    
    19.4.2 TIMELINE SWIPER
    -- horizontal line between slides
    -- content of every slide
      19.4.2.1 NOME ZONA CANTIERE
    19.4.3 GALLERY + DRAG + DATI CANTIERE + POSIZIONE
    -- gallery
    -- gallery scrollbar
    -- custom viewer.js
    -- dati cantiere
    -- posizione
    
20. EDIT TABS
  -- Tabs Menu
  -- Tabs Content
  20.1 TOGGLE BUTTON VISIBLE NOT VISIBLE (edit_builder.php)
  20.2 TOGGLE MANAGE IMAGES CAMERA in modal_add_camera.php and edit_camera.php

21. SWAL
22. 404

MEDIA QUERY
  -- vertical centering modals (MIN WIDTH 576PX)

=============================================================*/

/* 01. MAIN SETTINGS ---------------------------- */

body {
  padding: 0 !important;
}

/* 01.1 VARIABLES */

:root {
  /* Colors */
  --main_yellow: #F39400;
  --main_dark: #3b3e42;
  --main_white: #fff;
  --main_bg_gray: #E7EDEE;
  --bg_dark_gray: #6c757d;
  --bg_light_gray: #d6d6d6;
  --bg_medium_gray: #a9a9a9;
  --transp_gray: #ffffff80;
  --transp_dark: #383838cc;
  --transp_yellow: #f394006b;
  --signal_gray: #585858;
  --cl_border: #cac9c9;
  --main_red: #E74C3C;
  --red: #FF0101;
  --main_green: #28B95B;
  --green: #01F805;
  --gray: #B7B7B7;
  --group_input: #e0e0e0;
  --blu_info: #39C3DA;
  --table_h_yellow: #ffeacac9;
  --table_yellow: #fffbec;

  /* Typography */
  --main_font: 'Poppins', sans-serif;
  --montserrat: 'Montserrat', sans-serif;
  --roboto: 'Roboto', sans-serif;
  /* sidebar */

  /* Easing */
  --bezier: cubic-bezier(0.945, 0.020, 0.270, 0.665);
}

/* 01.2 DEFAULT CLASSES */

.bg_main_yellow {
  background-color: var(--main_yellow);
}

.bg_main_dark {
  background-color: var(--main_dark);
}

.bg_transp_yellow {
  background: var(--transp_yellow) !important;
}

.tx_main_yellow {
  color: var(--main_yellow);
}

.tx_main_white {
  color: var(--main_white);
}

.tx_main_dark {
  color: var(--main_dark);
}

.nowrap {
  white-space: nowrap;
}

.w-40 {
  width: 40% !important;
}

.w-20 {
  width: 20% !important;
}

.center_flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hor_flex_end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hor_flex_start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.ver_flex_end {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* 01.3 RESET */

.btn {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0;
}

.btn:hover {
  transform: translate(0, 0) !important;
}

.btn-outline-light {
  outline: 1px solid var(--main_white) !important;
}

.btn.btn-lg {
  font-size: 1.9rem;
}

a,
a:hover,
a:active,
a:visited {
  text-decoration: none;
  transform: translate(0, 0) !important;
}

.row {
  padding-left: 0px;
  padding-right: 0px;
}

/* Fix bootstrap columns for Safari */

.row:before,
.row:after {
  display: inline-block !important;
}

/* 01.4 CONTENT (general content) */

#content {
  width: 100%;
  min-height: 100vh;
  transition: all 0.3s;
}

/* end content */

[data-tooltip],
.tooltip {
  text-align: center;
}

/* 01.5 SCROLLBAR */

/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--main_gray);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--main_yellow);
  cursor: pointer;
}

/*=============================================================*/

/* 02. NAVBAR HEADER ---------------------------- */

.navbar {
  height: 70px;
  padding: 15px 10px;
  background-color: var(--main_dark);
  border: none;
  border-radius: 0;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

/* Container for: Dropdown Icon For Profile and Logout and Hamburger and Arrow button */
.div_navbar_main_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: -5px;
}

/* 02.1 HAMBURGER BUTTON */

/* Hamburger button */

.menu-link-wrapper {
  width: 65px;
  height: 45px;
  cursor: pointer;
  transition: all 0.4s ease;
}

.menu-link {
  width: 100%;
  height: 100%;
}

/* 02.1.1 HAMBURGER SHAPE */

.lines {
  display: block;
  width: 100%;
  height: 2px;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  width: 40%;
  margin: 0 20%;
  position: relative;
  background-color: var(--main_yellow);
  top: 22px;
}

.lines:before,
.lines:after {
  display: block;
  width: 100%;
  height: 2px;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  position: absolute;
  left: 0;
  content: '';
  background-color: var(--main_white)fff;
  -moz-transition: -moz-transform 0.2s ease 0s, width 0.2s ease 0.2s, top 0.2s ease 0.4s;
  -o-transition: -o-transform 0.2s ease 0s, width 0.2s ease 0.2s, top 0.2s ease 0.4s;
  -webkit-transition: -webkit-transform 0.2s ease, width 0.2s ease, top 0.2s ease;
  transition-delay: 0s, 0.2s, 0.4s;
  transition: transform 0.2s ease 0s, width 0.2s ease 0.2s, top 0.2s ease 0.4s;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

/* to change the shape you can invert these values from .lines (before and after) and .menu-trigger-open (before and after)*/
.lines:before {
  top: 0;
  width: 50%;
  -moz-transform: rotate3d(0, 0, 1, 45deg);
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
  background-color: var(--main_yellow);
}

.lines:after {
  top: 0;
  width: 50%;
  -moz-transform: rotate3d(0, 0, 1, -45deg);
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
  background-color: var(--main_yellow);
}

/* 02.1.2 ARROW SHAPE */

.menu-trigger-open .lines:before,
.menu-trigger-open .lines:after {
  -moz-transition: top 0.2s ease 0s, width 0.2s ease 0.2s, -moz-transform 0.2s ease 0.4s;
  -o-transition: top 0.2s ease 0s, width 0.2s ease 0.2s, -o-transform 0.2s ease 0.4s;
  -webkit-transition: top 0.2s ease, width 0.2s ease, -webkit-transform 0.2s ease;
  transition-delay: 0s, 0.6s, 0.4s;
  transition: top 0.2s ease 0s, width 0.2s ease 0.2s, transform 0.2s ease 0.4s;
  /**/
  top: 0;
  width: 50%;
  background-color: var(--main_yellow);
}

.menu-trigger-open .lines {
  display: block;
  width: 100%;
  height: 2px;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  width: 40%;
  /* width of all lines of hamburger*/
  margin: 0 20%;
  position: relative;
  background-color: var(--main_white);
  top: 22px;
  background-color: var(--main_yellow);
}

/* to change the shape you can invert these values from .lines (before and after) and .menu-trigger-open (before and after)*/
.menu-trigger-open .lines:before {
  -moz-transform: rotate3d(0, 0, 1, 0deg);
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
  background-color: var(--main_yellow);
  top: 10px;
  width: 100%;
}

.menu-trigger-open .lines:after {
  -moz-transform: rotate3d(0, 0, 1, 0deg);
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
  background-color: var(--main_yellow);
  top: -10px;
  width: 100%;
}

/* 02.2 ICON FOR DROPDOWN PROFILE AND LOGOUT */

.drop_container img {
  height: 50px;
  width: 50px;
  cursor: pointer;
}

.div_navbar_header_drop_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.div_navbar_header_drop_logo .btn_tut {
  transform: translate(0, 0) !important;
  padding: 6px 8px;
  font-size: 1.2rem;
  margin-right: 1.5rem;
  color: var(--main_white);
  background-color: var(--bg_dark_gray);
}

.div_navbar_header_drop_logo .btn_tut:hover,
.div_navbar_header_drop_logo.btn_tut:focus,
.div_navbar_header_drop_logo .btn_tut:active {
  color: var(--main_white) !important;
}

.div_navbar_header_drop_logo span {
  color: var(--main_white);
}

/* delete the natural caret of bootstrap dropdown */
.div_navbar_header_drop_logo .dropdown-toggle:after {
  content: none
}

/* 02.3 DROPDOWN PROFILE AND LOGOUT */

.drop_container {
  position: relative;
}

.ul_container {
  display: none;
  width: 100%;
}

.dropdown_ul {
  position: absolute;
  right: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--main_white);
  border: 1px solid var(--main_yellow);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.drop_header {
  padding: 12px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: var(--main_dark);
  font-size: 1.7rem;
  color: var(--main_white);
}

.dropdown_ul>a {
  width: 100%;
  height: 100%;
  padding: 12px;
  font-size: 1.6rem;
  color: var(--main_dark);
  transition: all 0.3s ease;
  cursor: pointer;
}

.dropdown_ul>a:hover {
  background-color: var(--bg_light_gray);
  color: var(--main_yellow);
}

/* 03.SIDEBAR ---------------------------- */

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: stretch;
  /*   perspective: 1500px;
 */
}

#sidebar {
  height: auto;
  min-width: 180px;
  max-width: 180px;
  background-color: var(--main_dark);
  color: var(--main_white);
  transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
  transform-origin: bottom left;
  position: relative;
  z-index: 3000;
}

/* Sidebar list */

#sidebar ul.components {
  padding: 10px 0;
  border-bottom: 1px solid var(--main_yellow);
}

#sidebar ul p {
  color: var(--main_white);
  padding: 10px;
}

#sidebar ul li a {
  padding: 10px 10px 10px 17px;
  font-size: 1.1em;
  font-family: var(--roboto);
  font-weight: 300;
  letter-spacing: .5px;
  display: block;
  color: var(--main_white);
  text-decoration: none;
  position: relative;
}

/* if sidebar has class "partial" by default, 
so "a" elements must be set as display none */
/* #sidebar a>span {
  display: none;
}
 */
#sidebar ul li.active>a,
a[aria-expanded="true"] {
  color: var(--main_white);
  background-color: var(--main_yellow);
  text-decoration: none;
}

a[data-toggle="collapse"] {
  position: relative;
  text-decoration: none;
}

/* Dropdown sidebar */

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* 03.1 SIDEBAR ICONS */

#sidebar i {
  padding-right: 1em;
  font-size: 1.1em;
  display: inline-block;
  width: 30px;
}

#sidebar .fa .fa-map-marker {
  font-size: 1.2em;
}

/* 03.2 SIDEBAR FOOTER */

.sidebar_footer {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 10px 10px 10px 17px;
  width: 90%;
  font-size: 1rem;
  font-weight: lighter;
  position: absolute;
  bottom: 0;
  /* display: none; */
}

.sidebar_footer a {
  color: var(--main_yellow);
  text-decoration: none;
}

.sidebar_footer img {
  width: 150px;
}

/* 03.3 SIDEBAR EFFECT ON HOVER */

#sidebar ul li a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  background-color: var(--transp_gray);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: scale(0.5, 1);
  transform: scale(0.5, 1);
}

#sidebar ul li a:hover:before {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

/* 03.4 SIDEBAR LOGO */

#sidebar .sidebar-header {
  height: 100px;
  padding: 2rem 1.5rem;
  background-color: var(--main_dark);
}

.div_logo_sidebar {
  width: 145px;
  height: auto;
  transition: all 0.8s ease;
}

.div_logo_sidebar img {
  width: 100%;
  height: auto;
  transition: all 0.8s ease;
}

.logo_sidebar_clip {
  /* clip-path: polygon(49% 0, 66% 0, 69% 100%, 52% 100%); */
  clip-path: polygon(49% 0, 66% 0, 69% 75%, 52% 75%);
}

.logo_sidebar_margin {
  margin-left: -75px;
}

.user_logo_lapsapp img {
  width: auto;
  height: 40px;
}

/* 04. PARTIAL SIDEBAR ---------------------------- */

#sidebar.partial {
  min-width: 50px;
  max-width: 50px;
  height: auto;
  /* transform: rotateY(30deg); */
  /* la rende obliqua quando partial */
}

#sidebar.partial ul li a {
  padding: 10px;
  text-align: center;
  font-size: 1.1em;
  height: 42px;
}

#sidebar.partial ul.components {
  padding: 10px 0;
  border-bottom: 1px solid var(--main_yellow);
}

/* 04.1 PARTIAL SIDEBAR ICONS */

#sidebar.partial ul li a i {
  padding-right: 0;
  padding-top: 2px;
  display: block;
  font-size: 1.1em;
  text-align: center;
}

/* 04.2 PARTIAL SIDEBAR DROPDOWN 
 Changing the arrow position to bottom center position, 
 translateX(50%) works with right: 50% 
 to accurately center the arrow */

#sidebar.partial .dropdown-toggle::after {
  top: auto;
  bottom: 8px;
  right: 50%;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

/* 04.3 PARTIAL SIDEBAR TOOLTIP */

.hover_sidebar {
  position: absolute;
  top: 0;
  left: 50px;
  width: 140px;
  height: 42px;
  padding: 10px;
  z-index: 99999;
  border: 1px solid var(--main_yellow);
  background-color: var(--main_dark);
  font-family: var(--main_font);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main_white);
}

/* 05. CARD HOME ---------------------------- */

.card_home {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  height: 90px;
  padding: 0;
  z-index: 100;
  background-color: var(--main_dark);
  position: relative;
  border-radius: 4px;
  /*   transition: all 0.8s var(--bezier), box-shadow 0.3s ease-in-out; */
  transition: all 0.8s var(--bezier);
  cursor: pointer;
  margin-top: 4rem;
}

.card_home:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 4px;
  background-color: var(--main_yellow);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: scale(0.5, 1);
  transform: scale(0.5, 1);
}

/* hover effect for icon and p is in custom_gest.js */

.card_home:hover:before {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

.card_home_title {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
}

/* card home title */

.card_home_title p {
  margin-bottom: 0;
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--main_white);
  font-family: var(--main_font);
  font-size: 1.4rem;
  font-weight: 300;
}

/* card home icon */

.fa-4x {
  font-size: 3rem;
}

.card_home_icon {
  height: 70px;
  width: 70px;
  border-radius: 90px;
  background-color: var(--main_white);
  position: absolute;
  top: -35px;
  margin: 1rem;
  z-index: 99999999;
  transition: all 0.4s ease;
}

.card_home_icon .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-49%, -49%);
  color: var(--main_yellow);
}

.card_home_icon_player .fa {
  left: 55%;
}

/* 06. FOOTER  ---------------------------- */

.footer-copyright span {
  color: #8d9293;
}

.footer-copyright a {
  color: var(--main_yellow);
}

footer.app-footer {
  bottom: 0;
  padding-left: 20px;
}

/* 07. BUTTON FLOATING HOME ---------------------------- */

.btn-floating .btn-bg {
  background-color: var(--main_yellow);
}

.btn-floating .fa-plus:before {
  color: var(--main_dark);
}

.btn-floating .toggle-content ul.actions>li a {
  color: var(--main_dark);
  font-weight: bold;
  text-align: center;
}

/* 08. LAYOUT PAGES ---------------------------- */

/* 08.1 MAIN CONTAINER */

.main_container {
  padding: 0 20px 20px 20px !important;
}

/* 08.2 HEADER PAGE */

.header_page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  width: 100%;
  padding: 1rem 2rem;
  cursor: pointer;
  background-color: var(--main_dark);
}

.header_title {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.header_page h3 {
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--main_white);
  margin: 0;
}

.header_page .fa {
  color: var(--main_white);
}

.managed_name {
  width: 100%;
}

.managed_name h3 {
  color: var(--main_yellow);
  font-weight: 500;
  text-align: right;
}

/* player-header */

.player_header {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 45px;
  width: 100%;
  padding: 1rem 2rem;
  cursor: pointer;
  background-color: var(--main_dark);
}

.player_header h3 {
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--main_white);
  margin: 0;
}

.player_header .fa {
  color: var(--main_white);
}

.wrapper_play_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.wrapper_play_title .header_title {
  width: auto;
}

.wrapper_play_title .managed_name {
  width: fit-content;
}

.wrapper_play_title .managed_name h3 {
  color: var(--main_yellow);
  font-weight: 500;
}

.player_select_label {
  font-size: 13rem;
}

/* 08.2.1 HEADER LOGO */

.header_page_logo {
  height: 55px;
  width: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header_page_logo img {
  height: 45px;
  width: auto;
  margin-left: 1rem;
}


/* 08.3 CONTROL PANEL */

.control_panel {
  height: auto;
  width: 100%;
  padding: 1.5rem;
  background-color: var(--bg_medium_gray);
}

.invite_col_button {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.edit_user_btns {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.edit_user_btns button:first-child {
  margin-right: 1rem;
}

/* 08.3.1 SEARCH BOX */

.form-control::-webkit-input-placeholder {
  color: #999999;
  font-family: var(--main_font);
  font-weight: 400;
  font-size: 1.3rem;
}

.search_block .form-control {
  background-color: var(--main_white);
  color: var(--main_dark);
  font-weight: 400;
  border-color: var(--bg_medium_gray);
  border-radius: 0;
}

.search_block {
  margin-right: 0;
  width: 100%;
}

/* 08.3.2 ICONS IN ACTION BUTTONS */

.fa-search:before {
  color: var(--main_dark);
}

.fa-eye:before {
  color: var(--main_white) !important;
}

a:hover .fa-eye:before {
  color: var(--main_white) !important;
}

.fa-link:before {
  color: var(--main_white) !important;
}

.form-control:focus {
  border-color: var(--main_yellow) !important;
  box-shadow: none !important;
}

/* 08.3.3 ACCORDION | HEADER PAGE - CONTROL PANEL + SCHEDA CAMERA */

#accordion {
  margin-bottom: 2rem;
}

ul {
  list-style-type: none;
}

ul,
ul#accordion.accordion,
ul.accord_control_panel {
  padding: 0 !important;
}

.chevron {
  padding-top: 3px;
  padding-left: 10px;
}

/* accordion2 */
.scheda_menu {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  background-color: var(--bg_dark_gray);
  color: var(--main_white);
  padding: 2rem 1rem;
  cursor: pointer;
}

/* chevron up for control panels */

.accordion li i.fa-chevron-up,
.accordion2 li i.fa-chevron-up,
.accordion3 li i.fa-chevron-up {
  right: 12px;
  left: auto;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

.accordion li.open i.fa-chevron-up,
.accordion2 li.open i.fa-chevron-up,
.accordion3 li.open i.fa-chevron-up {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* 08.4 CONTENT PAGE  */

.content_page {
  margin-bottom: 5rem;
}

/* 09. BUTTONS STYLE ---------------------------- */

.btn {
  transition: all 0.2s ease;
}

.btn a {
  text-decoration: none !important;
  color: var(--main_white) !important;
}

.btn:hover,
.btn a:hover,
a:not([href]):hover {
  transform: translate(0, 0) !important;
}

/* 09.1 PRIMARY */

.btn.btn-primary {
  background-color: var(--main_yellow) !important;
  border: 1px solid var(--main_yellow) !important;
}

.btn.btn-primary a {
  color: var(--main_white) !important;
}

/* .btn.btn-primary:hover {
  background: var(--main_white)!important;
  color: var(--main_yellow);
}

.btn.btn-primary a:hover {
  background: var(--main_white)!important;
  color: var(--main_yellow);
} */

/* .btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:hover,
.btn-primary:focus:hover {
  background: var(--main_white)!important;
  color: var(--main_dark)!important;
  border: 1px solid var(--main_yellow)!important;
}  */

/* hover effect on button primary 'effect_primary' */

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:hover,
.btn-primary:focus:hover {
  color: var(--main_white);
  border: 1px solid var(--main_yellow) !important;
}

.effect_primary:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background-color: var(--main_dark);
  z-index: -1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: scale(0.5, 1);
  transform: scale(0.5, 1);
}

.effect_primary:hover:before {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

/* 09.2 SECONDARY BUTTON */

.btn.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active:hover,
.btn-secondary:focus:hover {
  color: var(--main_yellow);
}

/* hover effect on button secondary 'effect_secondary' */

.effect_secondary:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background-color: var(--main_yellow);
  z-index: -1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: scale(0.5, 1);
  transform: scale(0.5, 1);
}

.effect_secondary:hover:before {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

/* 09.3 DARK BUTTON */

.btn.btn-dark:hover {
  color: var(--main_yellow);
}

.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:focus,
.btn-dark:not(:disabled):not(.disabled):active:hover,
.btn-dark:focus:hover {
  color: var(--main_yellow);
}

/* 09.4 UPLOAD DROPZONE */

.upload_area {
  padding: 0 15px;
  margin: 1.4rem 0;
}

#myDropzoneMulti .dropzone {
  min-height: 150px;
  border-radius: 0;
  background-color: var(--main_white);
  border: 1px dashed var(--main_dark);
}

#myDropzone {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 0;
  background-color: var(--main_white);
  border: 1px dashed var(--main_dark);
}

.dropzone .dz-preview {
  margin: auto;
}

.dropzone .dz-preview .dz-image {
  width: 180px;
  margin: auto;
}

.dz-remove {
  color: var(--main_yellow);
  font-size: 1.3rem;
  text-decoration: none;
}

.dz-remove:hover {
  color: var(--main_dark);
  text-decoration: none;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  display: none;
}

.dropzone .dz-preview .dz-image img {
  margin: auto;
}

.dropzone .dz-preview.dz-image-preview {
  background: transparent;
  margin: 0.5rem;
}

.dropzone_bg {
  background-color: var(--bg_light_gray);
  min-height: 345px;
}

/* upload svg */
.upload_icon {
  height: 20px;
  width: 20px;
}

/* 10. TABLE STYLE ---------------------------- */

.table {
  font-family: var(--main_font) !important;
}

.thead-dark>tr>th {
  background-color: var(--main_dark) !important;
  font-family: var(--montserrat) !important;
  font-weight: 400;
}

.table-striped thead>tr th {
  font-weight: 500;
}

table.table>tbody>tr td,
table.table>tbody>tr th,
table.table>thead>tr td {
  font-size: 1.5rem;
}

.table-hover>tbody>tr:hover {
  background-color: var(--table_h_yellow);
}

.spacer {
  margin-top: 1rem;
}

.inactive_camera_border {
  outline: 2px solid var(--main_red);
}

.active_camera_border {
  outline: 2px solid var(--main_green);
}

.pending_camera_border {
  outline: 2px solid var(--main_yellow);
  cursor: pointer;
}

.action_button {
  height: 40px;
  width: 40px;
  padding: 10px !important;
  margin: 0.5rem 0;
}

/* DataTables Style */

.data_table_w {
  /* it make responsive all tables instead of their inline width */
  width: 100% !important;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
  font-family: auto;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after {
  opacity: 0.5;
}

.dataTables_filter {
  display: none;
}

div.dataTables_wrapper div.dataTables_length select {
  border-radius: 0;
  cursor: pointer;
}

div.dataTables_wrapper div.dataTables_length label {
  font-weight: 600;
}

.even {
  background: var(--table_yellow);
}

.anteprima_logo_table_container {
  width: 130px;
  height: 80px;
  margin: auto;
}

.anteprima_logo_table {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;

}

/* 10.1 CHECKBOX IN TABLES */

.checkbox input:checked+label::after,
.radio input:checked+label::after {
  content: '\f00c';
  color: #fff;
  background-color: var(--main_yellow);
  border: 1px solid var(--main_yellow);
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

/* 10.2 TOOLTIP */

.personal_data_content .tooltip:after,
[data-tooltip]:after {
  background-color: var(--main_yellow);
  color: var(--main_dark);
  font-weight: bold;
  border-radius: 0;
  left: 50%;
  transform: translate(-50%, -11px) !important;
  margin: auto;
  width: max-content;
  padding: 4px 8px;
  white-space: nowrap;
  border: 1px solid var(--main_dark);
}

.tooltip:before,
[data-tooltip]:before {
  border-top: 9px solid var(--main_dark);
  left: 40%;
}

/* 11. SELECT2 STYLE ---------------------------- */

.select2 {
  margin-bottom: 0;
}

.select2-dropdown {
  z-index: 9999999999;
}

.select2-container .select2-dropdown .select2-results__option--highlighted {
  background-color: var(--main_yellow);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 20px;
}

.select2 .select2-selection--single {
  height: 40px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  font-size: 1.3rem;
  color: #999999;
}

/* multiple select */
.select2-container--default .select2-selection--multiple ::placeholder {
  font-size: 1.3rem;
  padding: 0 10px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid #999 1px;
  outline: 0;
  border-radius: 3px;
}

.select2-selection--multiple:before {
  content: "";
  position: absolute;
  right: 7px;
  top: 42%;
  border-top: 5px solid #888;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

/* 12. FORM ---------------------------- */

.form-horizontal .form-group {
  margin-right: 0;
  margin-left: 0;
}

/* Anteprima Logo */

.anteprima_column {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  padding-left: 32px !important;
  margin: 1rem 0 2rem 0;
}

.anteprima_container {
  background-color: var(--main_white);
  border: 1px solid var(--bg_medium_gray);
  width: calc(100% - 15px);
  height: 140px;
  max-height: 150px;
  /* same as dropzone */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

.anteprima_logo {
  max-width: 100%;
  max-height: 123px;
  display: block;
  margin: auto;
}

.j_view_cam_img {
  cursor: pointer;
}

/* 12.1 LABELS */

label {
  font-family: var(--montserrat);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--main_dark);
}

.form-horizontal .control-label {
  font-family: var(--montserrat);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--main_dark);
}

.form-horizontal .control-label-help {
  color: var(--red);
  font-size: 1.1rem;
  margin-top: 5px;
}

/* 12.2 INPUT */

/* height for input */
.input_height,
.resp_input_date {
  height: 35px !important;
}

input.form-control,
textarea.form-control {
  background-color: var(--main_white);
  border-radius: 2px !important;
}

input[type="date" i]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* clear date input icon*/
.clear_data {
  position: relative;
  float: right;
  cursor: pointer;
  color: var(--bg_dark_gray);
  transition: all 0.2s ease;
}

.clear_data:hover {
  color: var(--main_dark);
}

.smaller_date {
  font-size: 1.3rem !important;
}

/* 12.3 SPAN ERRORS */
.span_error {
  position: relative;
  font-size: 1.1rem;
  color: var(--main_red);
  bottom: 2rem;
  display: none;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 3px;
}

.span_error_radio_cam {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--main_red);
  display: none;
  font-size: 1.3rem;
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 2.5rem;
}

/* in include_profile_user_customer/builder */
.psw_reset_advice {
  color: var(--main_red);
}

#col_confirm {
  display: none;
}

.error {
  color: var(--main_red);
}

/* 13. INDEX - LOGIN STYLE ---------------------------- */

.app-login .app-body .app-block {
  background-color: var(--main_dark);
}

.login-form .app-brand {
  color: var(--main_yellow);
}

.login_title_lineitem .line_1 {
  background-color: var(--main_white);
}

.login-form .flipInX-1 i {
  color: var(--main_yellow);
}

.login_title_lineitem .line_2 {
  background-color: var(--main_white);
}

.login-form .input-group .input-group-addon .fa {
  color: var(--main_yellow);
}

.login-form .input-group {
  margin-bottom: 2rem;
}

.login-form .app-brand img {
  height: 60px;
  max-width: 280px;
}

.login_small_text {
  text-align: right;
  margin-top: 2rem;
}

.login_small_text a {
  color: var(--main_white);
  text-decoration: none;
}

.login_small_text a:hover {
  color: var(--main_yellow);
}

.title_index {
  text-align: center;
}

.title_index h3 {
  color: var(--main_white);
  font-family: var(--main_font);
  margin: 0;
  font-weight: 300;
  font-size: 1.8rem;
}

/* left arrow on password dimenticata log*/
.left_arrow_forget {
  margin-bottom: 1rem;
}

.left_arrow_forget a {
  text-decoration: none !important;
}

.left_arrow_forget a:hover {
  text-decoration: none !important;
}

.left_arrow_forget .fa {
  color: var(--main_yellow);
  font-size: 5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.4s ease;
  text-decoration: none !important;
}

.left_arrow_forget .text_arrow {
  color: var(--main_yellow);
  font-size: 1.3rem;
  font-weight: 300;
  font-family: var(--main_font);
  text-decoration: none !important;
  margin-left: 1rem;
  transition: all 0.4s ease;
  padding-top: 3px;
}

.left_arrow_forget .text_arrow:hover {
  color: var(--main_white);
}

/* password dimenticata padding*/
.padding_psw {
  padding: 1rem 3rem 5rem 3rem !important;
}

/* 13.1 REGISTRATION FORM */

#registration_form input[type="text"] {
  font-size: 1.4rem;
}

#registration_form h4,
#registration_form span {
  color: var(--main_white);
  text-align: center;
  margin-bottom: 1.8rem;
  font-weight: 300;
  font-size: 2.2rem;
}

/* privacy check */

.div_check {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
}

.div_check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  border: 2px solid var(--main_yellow);
  background-color: transparent;
  margin-right: 2%;
}

.div_check label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-size: 1.5rem;
  font-weight: 300;
  font-family: var(--main_font);
  color: var(--main_white);
  margin: 0 0 2rem 0;
}

.div_check a {
  font-weight: 300;
  font-family: var(--main_font);
  color: var(--main_yellow);
  margin-left: 4px;
  text-decoration: none;
}

.div_check a:hover {
  text-decoration: none;
}

.div_check input[type="checkbox"]+label:before {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  border: 2px solid var(--main_white);
  position: relative;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
  margin-right: 15px;
}

.div_check input[type="checkbox"]:checked+label:before {
  width: 10px;
  top: 0;
  left: 0;
  opacity: 1;
  border: 2px solid;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: var(--main_yellow);
  border-right-color: var(--main_yellow);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.privacy_error {
  width: 100%;
  height: 40px;
  background-color: var(--main_dark);
  color: var(--main_white) !important;
  font-size: 1.2rem !important;
  margin-top: -1rem;
}

.obblig_text {
  font-size: 1.1rem !important;
}

/* upload button */

.upload_logo_wrapper {
  height: 66px;
}

.upload_logo_wrapper.input-group {
  height: 66px;
}

.upload_logo_wrapper label {
  color: var(--main_white);
  font-family: var(--main_font);
  font-weight: 400;
  font-size: 1.3rem;
  text-align: left;
}

#input_upload_logo {
  background-color: var(--main_white);
  height: 40px;
  width: 100%;
  margin: 0 0 2rem 0;
}

.custom-file-input {
  margin-bottom: 0.5rem;
}

input[type="file" i]::-webkit-file-upload-button {
  border: none;
  background-color: var(--main_yellow);
  height: 40px;
  width: 100px;
  color: var(--main_dark);
  font-family: var(--main_font);
  font-size: 1.2rem;
}

/* anteprima logo in registration form )*/
.anteprima_form_container {
  background-color: var(--main_white);
  padding: 0.5rem;
  max-height: 130px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img_form_logo {
  height: 100px;
  max-width: 100%;
  object-fit: cover;
}

/* form instruction*/

.instruction {
  color: var(--main_white);
  margin-bottom: 1rem;
}

/* 14. SCROLL TOP BUTTON ---------------------------- */

#scrollTop {
  background-color: var(--main_dark);
  opacity: 0;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  height: 40px;
  width: 40px;
  border: 0;
  outline: 0;
  position: fixed;
  bottom: 25px;
  right: 10px;
  cursor: pointer;
  z-index: 999999;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  visibility: hidden;
}

#scrollTop i {
  color: #fff;
}

#scrollTop:hover {
  background-color: var(--main_yellow);
}

#scrollTop.showScroll {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
}

/* 15. PLAYER ---------------------------- */

.control_panel_player {
  padding: 1rem;
}

.player_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 800px;
  /*16:9 ratio with player height*/
}

.label_select_site {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.3rem !important;
}

/* switch camera buttons */

.div_switch_camera {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.div_switch_camera a.btn_switch {
  width: 130px;
  margin-bottom: 0.5rem;
  margin-right: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  font-weight: normal;
  line-height: 1.42857143;
  padding: 8px 12px;
  outline: none;
  transform: translate(0, 0) !important;
  text-align: center;

  background-color: var(--main_dark) !important;
  color: var(--main_yellow) !important;
  border: 1px solid var(--main_yellow) !important;
}

/* btn switch ACTIVE - FOCUS */
.div_switch_camera a.btn_switch:not(:disabled):not(.disabled).active,
.div_switch_camera a.btn_switch:not(:disabled):not(.disabled):active,
.div_switch_camera a.btn_switch:focus {
  background: var(--main_yellow) !important;
  color: var(--main_dark) !important;
  border: 1px solid var(--main_dark) !important;
}

/* signal light */

.signal {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: default;
}

.signal_red {
  background: var(--red);
  background: -webkit-radial-gradient(center, var(--red), #000000);
  background: -moz-radial-gradient(center, var(--red), #000000);
  background: radial-gradient(ellipse at center, var(--red), #000000);
}

.signal_green {
  background: var(--green);
  background: -webkit-radial-gradient(center, var(--green), #000000);
  background: -moz-radial-gradient(center, var(--green), #000000);
  background: radial-gradient(ellipse at center, var(--green), #000000);
}

.signal_orange {
  background: var(--main_yellow);
  background: -webkit-radial-gradient(center, var(--main_yellow), #000000);
  background: -moz-radial-gradient(center, var(--main_yellow), #000000);
  background: radial-gradient(ellipse at center, var(--main_yellow), #000000);
}

.signal_gray {
  background: var(--signal_gray);
  background: -webkit-radial-gradient(center, var(--signal_gray), #000000);
  background: -moz-radial-gradient(center, var(--signal_gray), #000000);
  background: radial-gradient(ellipse at center, var(--signal_gray), #000000);
}

.border_signal_green {
  border: 1px solid var(--main_green)
}

.border_signal_orange {
  border: 1px solid var(--main_yellow)
}

.border_signal_red {
  border: 1px solid var(--main_red)
}

.border_signal_gray {
  border: 1px solid var(--gray)
}

/* 15.1 PLAYER VIEW */

.player {
  /* display: flex;  */
  width: 100%;
  /* height: 450px; 16:9 ratio with player_container width   */
  border: 5px solid var(--main_dark);
  border-bottom: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* overlay date */

.overlay {
  position: absolute;
  bottom: 0;
  background: var(--transp_dark);
  outline: 1px solid var(--main_yellow);
  width: 99%;
  max-width: 99%;
  transition: .5s ease;
  opacity: 1;
  color: var(--main_white);
  font-size: 1.6rem;
  font-family: var(--main_font);
  padding: 1rem;
  text-align: center;
  transform: translate(100%, 0);
}

.overlay_visible {
  transform: translate(0, 0);
}

.caret_date_rotate {
  transform: rotate(180deg);
}

/* disabled buttons */

.button_player_disabled {
  color: var(--bg_medium_gray) !important;
  cursor: default !important;
}

.switch_player_disabled {
  background-color: var(--bg_dark_gray) !important;
  cursor: default !important;
  border: 1px solid var(--main_yellow) !important;
}

/* 15.1.1 VERTICAL CONTROLS */

.vertical_controls {
  height: 100%;
  width: 50px;
  padding: 2rem 1rem;
  background-color: var(--main_dark);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 0;
}

.icon_vertical {
  margin-bottom: 3rem;
  cursor: pointer;
  position: relative;
  height: auto;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon_vertical i {
  color: var(--main_white);
  transition: all 0.2s ease-in-out;
}

.icon_vertical i:hover {
  color: var(--main_yellow);
}

.icon_vertical abbr:hover {
  color: var(--main_yellow);
}

#caret_date {
  position: absolute;
  bottom: 0;
  margin-bottom: 1rem;

}

/* 15.1.2 TOOLTIP ON VERTICAL CONTROLS */

.hover_vertical_controls {
  position: absolute;
  top: -6px;
  right: 46px;
  width: 120px;
  height: 42px;
  padding: 10px;
  z-index: 99999;
  border: 1px solid var(--main_yellow);
  background-color: var(--main_dark);
  font-family: var(--main_font);
  font-size: 1.3rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main_white);
}

/* 15.2 HORIZONTAL CONTROLS CONTAINER */

.horizontal_controls_container {
  border: 5px solid var(--main_dark);
  border-top: 0;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.j_play_button,
.j_pause_button {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

/* 15.2.1 PLAYER TIMELINE */

.timeline {
  align-self: flex-end;
  width: 100%;
  height: 15px;
  background-color: var(--main_yellow);
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

/* Popup anteprima immagini player */
.still_image {
  height: 100%;
  width: 100%;
  position: relative;
}

.still_image a {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
}

.tooltip-image {
  position: absolute;
  bottom: 15px;
  background: var(--main_dark);
  border-radius: 2px;
  padding: 0 0.5rem 0.5rem 0.5rem;
  color: white;
  text-align: center;
  /* transform: translate(-50%); */
  left: 50%;
  transform: translate(calc(-100% + 80px), 0%);
}

.tooltip-image::before {
  content: "\A";
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent var(--main_dark) transparent transparent;
  position: absolute;
  bottom: -15px;
  transform: rotate(-90deg) translate(0, -25%);
}

.popup_date {
  font-family: var(--main_font);
  font-size: 1.1rem;
  color: var(--main_white);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
}

/* 15.2.2 HORIZONTAL CONTROLS */

.horizontal_controls {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
  width: 100%;
  min-height: 70px;
  height: auto;
  background-color: var(--main_dark);
}

/* 15.2.2.1 TOGGLE PLAYER (3-way: All / Interval / Partial) */

.toggle_container {
  width: 33%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
}

.customSwitch3 {
  height: 3rem;
  margin-left: 5%;
  border-radius: 100em;
  /* 100em huge radius to force pill shape */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--main_yellow);
}

.customSwitch3 .modeLabel {
  cursor: pointer;
  text-transform: uppercase;
  user-select: none;
  color: var(--main_white);
  background: none;
  border: none;
  margin: 0;
  padding: 0 1.1em;
  font-size: 1.1rem;
  font-family: var(--montserrat);
  letter-spacing: 0.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.3s;
}

.customSwitch3 .modeLabel.active {
  background-color: var(--main_yellow);
  color: var(--main_dark);
}

.customSwitch3.switch_disabled .modeLabel {
  cursor: default;
}

/* FILTERS PANEL — attached to player block below controls */

.filters_panel {
  width: 100%;
  background-color: var(--main_dark);
  padding: 0.8rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1rem 1.5rem;
  box-sizing: border-box;
}

.filters_panel_title {
  color: var(--main_yellow);
  font-family: var(--montserrat);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  padding-right: 1rem;
  border-right: 2px solid var(--main_yellow);
  padding-top: 0.2rem;
}

.filters_items_container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  gap: 0.8rem 1.5rem;
}

.filter_item {
  display: grid;
  grid-template-columns: 105px auto;
  align-items: center;
  gap: 0.4rem;
}

.filter_label {
  color: var(--main_white);
  font-family: var(--montserrat);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0;
  white-space: nowrap;
}

.filter_select {
  padding: 3px 6px;
  font-size: 1rem;
  font-family: var(--montserrat);
  background: rgba(0, 0, 0, 0.25);
  color: var(--main_white);
  border: 1px solid var(--main_yellow);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  width: 130px;
}

.filter_select:focus {
  border-color: var(--main_white);
}

.filter_select option {
  background-color: #1a1a1a;
  color: var(--main_white);
}

.filter_date_input {
  padding: 3px 6px;
  font-size: 1rem;
  font-family: var(--montserrat);
  background: rgba(0, 0, 0, 0.25);
  color: var(--main_white);
  border: 1px solid var(--main_yellow);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  width: 130px;
}

.filter_date_input:focus {
  border-color: var(--main_white);
}

.filter_date_input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

@media (max-width: 991px) {
  /* Panel becomes a vertical stack */
  .filters_panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }

  /* Title spans full width with bottom border */
  .filters_panel_title {
    border-right: 0;
    border-bottom: 1px solid var(--main_yellow);
    padding-right: 0;
    padding-bottom: 0.5rem;
    padding-top: 0;
    width: 100%;
  }

  /* Items container: single column, full width */
  .filters_items_container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.8rem;
  }

  /* Each row: fixed label column + input fills remaining space */
  .filter_item {
    display: grid;
    grid-template-columns: 115px 1fr;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
  }

  .filter_label {
    width: auto;
    white-space: nowrap;
  }

  .filter_select,
  .filter_date_input {
    width: 100%;
    box-sizing: border-box;
  }
}

/* 15.2.2.2 PLAYER ICONS */

.player_icon_container {
  width: 33%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
}

.icon_horizontal i {
  color: var(--main_yellow);
  transition: all 0.2s ease-in-out;
}

.icon_horizontal i:hover {
  color: var(--main_white);
}

.backward_glyph {
  font-size: 2.7rem;
  transform: rotate(-90deg);
  padding-right: 3px;
}

.forward_glyph {
  font-size: 2.7rem;
  transform: rotate(90deg);

}

.play img {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

/* 15.2.2.3 FULLSCREEN ICONS */

.fullscreen_icon_container {
  width: 33%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
}

.search_icon i,
.timelapse i,
.timelapse a,
.fullscreen i,
.live_icon i {
  color: var(--main_white);
  transition: all 0.2s ease-in-out;
  margin-right: 2rem;
}

.search_icon i:hover,
.timelapse i:hover,
.fullscreen i:hover,
.live_icon i:hover {
  color: var(--main_yellow);
}

/* 15.3 PLAYER SITE INFO */

.player_site_wrapper {
  width: 100%;
  display: flex;
  height: fit-content;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid var(--main_yellow);
  background-color: var(--main_dark);
  padding: 0.5rem 1rem;
  margin-top: 1rem;
}

.player_site_wrapper h3 {
  color: var(--main_yellow);
  font-size: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 1rem 0 0;
}

.player_site_wrapper h5 {
  color: var(--main_white);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 1rem;
}

.player_site_wrapper strong {
  font-weight: 700;
}

.player_site_titles {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.8rem;
}

.player_site_date {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* 15.4 PLAYER PRELOADER */

#preloader {
  position: absolute;
  top: 50%;
  right: 50%;
  background-color: var(--transp_dark);
  padding: 100%;
  transform: translate(50%, -50%);
  text-align: center;
}

#preloader_nobar {
  position: absolute;
  top: 50%;
  right: 50%;
  background-color: var(--transp_dark);
  padding: 100%;
  transform: translate(50%, -50%);
  text-align: center;
}

/* 15.4.1 */
#preloader2 {
  height: 5px;
  position: absolute;
  background-color: var(--main_yellow);
  width: 100%;
  animation-name: colorChangePre2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
}

@keyframes colorChangePre2 {
  0% {
    background-color: var(--main_yellow);
  }

  50% {
    background-color: var(--main_dark);
  }

  100% {
    background-color: var(--main_yellow);
  }
}


.preloader_text {
  margin-top: 2rem;
  color: var(--main_yellow);
}

/* 15.4.1 SPINNER */

.btn_stop_load {
  border: 1px solid var(--main_dark);
  margin-top: 2rem;
}


/* 15.4.2 PROGRESS BAR */
#progress_bar_container {
  width: 200px;
  background-color: var(--bg_light_gray);
}

#progress_bar {
  width: 1%;
  height: 12px;
  margin-top: 2rem;
  background-color: var(--main_yellow);
}

/* 15.4.3 CURSOR */
#cursor {
  width: 0.5%;
  height: 15px;
  background-color: var(--main_white);
  position: absolute;
  left: 100%;
  z-index: 2;
}

/* 15.4.4 CURSOR */
.loading_thb {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 44%;
  font-size: smaller;
  color: var(--main_yellow);
}

/* 15F. PLAYER FULL ---------------------------- */

.player_container_full {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

/* 15F.1 PLAYER FULL VIEW */

.player_full {
  /* display: flex;  */
  width: 100%;
  /* height: 80vh; 16:9 ratio with player_container width   */
  border: 5px solid var(--main_dark);
  border-bottom: 0;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* 16. SETTINGS PAGE ---------------------------- */

/* tab menu */

#nav_settings_page {
  margin-bottom: 3rem;
}

.nav-tabs>li a {
  font-size: 15px;
  padding: 15px 25px;
  background-color: transparent;
  border: 1px solid var(--main_yellow);
  color: #8d9293;
  border: 0;
}

.nav-tabs>li.active a,
.nav-tabs>li.active a:focus,
.nav-tabs>li.active a:hover {
  border: 1px solid var(--main_yellow);
  font-weight: 600;
  background-color: var(--main_dark);
  border-radius: 0;
  color: var(--main_yellow);
}

/* admob cards */

.card_admob_container {
  width: 100%;
  float: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}

.card_admob_margin {
  margin: 2rem;
}

/* 17. PAGINATION  ---------------------------- */

div.dataTables_wrapper div.dataTables_info {
  padding: 2rem 2rem 2rem 0;
}

div.dataTables_wrapper div.dataTables_paginate {
  padding: 2rem 0 2rem 2rem;
}

.page-item.active .page-link {
  background-color: var(--main_yellow);
  border-color: var(--main_yellow);
}

.pagination>li.active>a,
.pagination>li.active>span {
  border: 0;
  border-bottom: 2px solid var(--main_yellow);
  background-color: var(--main_yellow);
}

.pagination>li.active>a:hover,
.pagination>li.active>a:focus,
.pagination>li.active>span:hover,
.pagination>li.active>span:focus {
  border: 0;
  border-bottom: 2px solid var(--main_yellow);
  background-color: var(--main_yellow);
}

/* 18. MODALS  ---------------------------- */

.modal .modal-dialog .modal-content .modal-header {
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  background-color: var(--main_dark);
  color: var(--main_white);
  padding: 20px 30px;
}

.modal .modal-dialog .modal-content .modal-body {
  padding: 2rem;
}

/* add icon - label container must have w-100 */
.add_icon {
  float: right;
  color: var(--main_green);
  margin-bottom: 0.3rem;
}

/* 18.1 MODAL INFO (USER - SITE -  CAMERA) */

#infoUserModal .header_modal,
#modalInfoSite .header_modal,
#modalInfoCamera .header_modal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

#infoUserModal .header_modal img,
#modalInfoCamera .header_modal img,
#modalInfoSite .header_modal img {
  max-height: 60px;
  width: auto;
}

#data_call_container h4 {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--main_yellow);
  font-size: 1.8rem;
}

#data_call_container p {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--blu_info);
  font-size: 1.3rem;
}

#map_info_site {
  height: 250px;
  width: 100%;
}

/* 18.2 MODAL ADD (BUILDER - CUSTOMER - SITE - CAMERA) */

.modal_add_bg {
  background-color: var(--main_bg_gray) !important;
}

.modalAdd .header_modal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.control-label {
  font-size: 1.5rem;
}

.upload_area_add label {
  font-size: 1.5rem;
}

/* modal add camera */
.input_group {
  background-color: var(--group_input);
  border: 1px solid var(--main_yellow);
  border-radius: 3px;
  padding: 1rem 1.5rem;
}

.title_label_group {
  font-size: 1.5rem;
  font-family: var(--montserrat);
  color: var(--main_dark);
  text-transform: uppercase;
}

/* 18.2.1 Radio buttons - SOLARE - 220V | STATO TELECAMERA (also in edit_camera.php)*/
.type_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.container_radio1 {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 15px;
}

.container_radio2 {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 15px;
}

.label_check1,
/* Solare/220V*/
.label_check2 {
  width: 135px;
}

.label_check_status1,
.label_check_status2,
.label_check_status3 {
  width: 200px !important;
}

.add_state_camera_label {
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 600;
}

.btn-warning:not(:disabled):not(.disabled):active {
  color: var(--main_white);
}

.form-group input[type="radio"],
.form-group input[type="radio"]:checked+.btn-group>label span:first-child+span,
.form-group input[type="radio"]+.btn-group>label span:first-child {
  display: none;
}

.form-group input[type="radio"]:checked+.btn-group>label span:first-child {
  display: inline-block;
}

.form-group input[type="radio"]+.btn-group>label {
  white-space: normal;
  font-size: 1.5rem;
  font-weight: 500;
}

.form-group input[type="radio"]+.btn-group>label.btn-secondary:focus {
  color: var(--main_white);
  background-color: var(--main_yellow);
  border-color: var(--main_yellow);
}

.form-group input[type="radio"]:checked+.btn-group>label.btn-secondary:focus {
  color: var(--main_yellow);
  background-color: var(--main_white);
  border-color: var(--main_dark);
}

.form-group input[type="radio"]:checked+.btn-group>label.btn-success:focus {
  color: var(--main_yellow);
  background-color: var(--main_green);
  border-color: var(--main_green);
}

.form-group input[type="radio"]:checked+.btn-group>label.btn-danger:focus {
  color: var(--main_white);
  background-color: var(--main_red);
  border-color: var(--main_red);
}

.form-group input[type="radio"]+.btn-group>label span[class*="fa-"] {
  width: 15px;
  float: left;
  margin: 4px 0 2px -2px;
}

.form-group input[type="radio"]+.btn-group>label span.content {
  margin-left: 10px;
  font-weight: 600;
  font-size: 1.5rem;
}

/* End::Radio buttons */


/* modal add site */

.site_status_form_group {
  padding: 0 15px;
}

.site_status_container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  border: 1px solid var(--bg_medium_gray);
  padding: 2rem 1rem;
  background-color: var(--main_white);
}

.content_label {
  text-transform: uppercase;
  padding-left: 5px;
  font-size: 1.3rem;
  font-weight: 600;
}

/* 18.3 MODAL INVITE */

#modalInvite label {
  font-size: 1.5rem;
}

#modalInvite .input.form-group {
  height: 40px;
}

.invite_title {
  max-width: 80%;
}

/* height input email in modal invite */
.input_invite {
  height: 40px !important;
}

.input_invite::placeholder {
  color: #999999;
}

/* 18.4 MODAL LINK */
/* nothing here*/

/* 18.5 MODAL PLAYER INFO SITE */

.info_modal_player_container {
  width: 100%;
  border: 1px solid var(--main_yellow);
  padding: 1rem;
  margin: 1rem;
  background-color: var(--main_white);
}

.info_modal_player_container p {
  margin: 0;
}

.border_result {
  border-left: 1px solid var(--main_yellow);
}

.modal_player_name_site {
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  font-family: var(--montserrat);
  color: var(--main-dark);
}

/* 18.6 MODAL PLAYER MAP */

#modalMap h4,
#modalPlayerInfoSite h4 {
  color: var(--main_yellow);
}

#map {
  height: 350px;
  width: 100%;
}

.info_map_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--main_yellow);
  padding: 1rem;
  background-color: var(--main_white);
}

.address {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.lat_long {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
}

/* 18.7 MODAL SHARE */

#modalShare h4 {
  color: var(--main_yellow);
}

.share_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--main_yellow);
  padding: 1rem 0 1rem 0;
  background-color: var(--main_white);

  flex-flow: row wrap;
}

.a2a_kit a {
  margin: 0.5rem;
  text-align: center;
}

/* 18.8 MODAL WEATHER */

#modalWeather h4 {
  color: var(--main_yellow);
}

.weather_container {
  width: 100%;
  height: auto;
  padding: 0 2rem 2rem;
  margin: 0;
  border: 1px solid var(--main_yellow);
  background-color: var(--main_dark);
}

/* first_row ----------*/
.first_row {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 80px;
}

/* weather date and hour */
.weather_img_date {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.weather_img_date h3 {
  font-size: 1.6rem;
  color: var(--main_white);
  font-family: var(--main_font);
  font-weight: 400;
  margin: 0;
}

/* weather icon */
.weather_icon_div {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.weather-icon {
  width: 80px;
  height: 80px;
}

/* second row -----------*/
.second_row {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

/* weather camera image */
.weather_img_div {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.weather_img_div img {
  width: 250px;
  height: 150px;
  object-fit: cover;
  cursor: pointer;
}

/* weather current data titles*/
.weather-wrapper {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.weather-wrapper h3 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 400;
}

.weather-wrapper h3,
.weather-wrapper div {
  color: var(--main_white);
  margin-bottom: 1rem;
}

/* weather nodata */
.weather-wrapper_nodata {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
}

.weather-wrapper_nodata h3 {
  color: var(--main_white);
  font-size: 1.9rem;
  font-weight: 400;
}

/* 19. MENAGE CAMERAS (Gestione Telecamere in cameras.php)  ---------------------------- */

.wrapper_manage_cameras {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--main_yellow);
  margin-bottom: 2rem;
  padding: 1.5rem;
}

.wrapper_manage_cameras h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 2.3rem;
}

/* 19.1 SELECT STATE CAMERA  */

#state_camera .form-group {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

/* Checkbox buttons (SELECT state cameras in cameras.php) */

#state_camera .btn {
  width: 160px;
  margin: 0 1rem 0 0;
}

.state_camera_label {
  text-transform: uppercase;
  font-family: var(--montserrat);
  font-weight: 600;
  font-size: 1.2rem;
}

#state_camera .form-group input[type="checkbox"],
#state_camera .form-group input[type="checkbox"]+.btn-group>label span:first-child,
#state_camera .form-group input[type="checkbox"]+.btn-group>label span:first-child,
#state_camera .form-group input[type="checkbox"]:checked+.btn-group>label span:first-child+span {
  display: none;
}

#state_camera .form-group input[type="checkbox"]+.btn-group>label span:first-child+span,
#state_camera .form-group input[type="checkbox"]:checked+.btn-group>label span:first-child {
  display: inline-block;
}

#state_camera .form-group input[type="checkbox"]+.btn-group>label {
  white-space: normal;
}

#state_camera .form-group input[type="checkbox"]+.btn-group>label.btn-success {
  color: var(--main_white);
  background-color: var(--main_green);
  border-color: var(--main_green);
}

#state_camera .form-group input[type="checkbox"]+.btn-group>label.btn-warning {
  color: var(--main_white);
  background-color: var(--main_yellow);
  border-color: var(--main_yellow);
}

#state_camera .form-group input[type="checkbox"]+.btn-group>label.btn-danger {
  color: var(--main_white);
  background-color: var(--main_red);
  border-color: var(--main_red);
}

#state_camera .form-group input[type="checkbox"]+.btn-group>label span[class*="fa-"] {
  width: 15px;
  float: left;
  margin: 4px 0 2px -2px;
}

#state_camera .form-group input[type="checkbox"]+.btn-group>label span.content {
  margin-left: 10px;
}

/* ADDED */
#active_days .form-group input[type="checkbox"],
#active_days .form-group input[type="checkbox"]+.btn-group>label span:first-child,
#active_days .form-group input[type="checkbox"]+.btn-group>label span:first-child,
#active_days .form-group input[type="checkbox"]:checked+.btn-group>label span:first-child+span {
  display: none;
}

#active_days .form-group input[type="checkbox"]+.btn-group>label span:first-child+span,
#active_days .form-group input[type="checkbox"]:checked+.btn-group>label span:first-child {
  display: inline-block;
}

#active_days .form-group input[type="checkbox"]:not(:checked)+.btn-group>label {
  opacity: 0.5;
}

/* End::Checkbox buttons */

/* 19.2 COUNTER */

.counter_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
}

.count_item {
  width: 160px;
  height: 38px;
  padding: 10px 20px;
  margin: 0 1rem 0rem 0;
  border: 2px solid;
  font-size: 1.5rem;
  font-family: var(--montserrat);
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}

#count_active {
  border-color: var(--main_green);
}

#count_non_active {
  border-color: var(--main_red);
}

#count_pending {
  border-color: var(--main_yellow);
}

/* 19.3 FORM ADD CAMERA | FORM EDIT CAMERA  */

.wrapper_items_form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  border: 1px solid var(--main_yellow);
  background-color: var(--group_input);
  padding: 2rem 1rem;
  border-radius: 3px;
  margin-bottom: 2rem;
}

.wrapper_items_form .btn-group {
  margin-right: 0.5rem;
}

/* 19.4 HISTORY CAMERA */

.main_camera_data_container {
  width: 100%;
  border: 1px solid var(--main_yellow);
  padding: 2rem 1rem;
  background-color: var(--main_white);
  margin-bottom: 1rem;
  border-radius: 3px;
}

.main_camera_data_container input[type="text"],
.main_camera_data_container textarea {
  background-color: #dddddd;
  margin-bottom: 1rem;
  border: 1px solid #999999;
  outline: 0;
  width: 100%;
  padding: 0.5rem;
}

.label_data_name {
  font-size: 2rem;
  text-transform: uppercase;
}

.input_router {
  width: 90%;
}

.router_mid_wrapper {
  display: flex;
  flex-direction: row;
}

.router_mid {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.image_cam {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

.border_cam_green {
  border: 4px solid var(--main_green);
}

.border_cam_red {
  border: 4px solid var(--main_red);
}

.border_cam_orange {
  border: 4px solid var(--main_yellow);
}

.label_data_cam {
  font-family: var(--main_font);
  font-size: 1.2rem;
}

.label_data_cam_big {
  font-size: 1.5rem;
  font-weight: 700;
}

.cam_col {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.cam_col_note {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#signal_cam_status {
  background-color: var(--bg_light_gray);
  border: 1px solid var(--bg_medium_gray);
  border-radius: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 0.5rem 0;
  height: 3rem;
  width: 12rem;
}

#signal_cam_status_vertical {
  background-color: var(--bg_light_gray);
  border: 1px solid var(--bg_medium_gray);
  border-radius: 3px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 0.5rem 0;
  height: 3rem;
  width: 8rem;
  margin: auto;
}

#signal_cam_status_vertical .j_active {
  cursor: pointer;
}

/* 19.4.2 TIMELINE SWIPER */

.wrapper_timeline {
  width: 100%;
  margin-top: 2rem;
}

.wrapper_timeline label {
  margin-bottom: -1rem;
}

.timeline_container {
  display: -ms-inline-grid;
  display: inline-grid;
  width: 100%;
  border: 1px solid var(--main_yellow);
  padding: 2rem 3rem;
  background-color: var(--main_white);
  border-radius: 3px;
  margin-top: 2rem;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  background: var(--main_yellow);
  border-radius: 50%;
  height: 130px;
  width: 130px !important;
  cursor: pointer;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  transition: all 0.4s ease;
  margin-top: 10px;
  margin-bottom: 10px;
  /* box-shadow: 0px 0px 0px 3px var(--bg_dark_gray); */
  /* for border*/
}

.swiper-slide:hover,
.swiper_active {
  background: var(--bg_dark_gray);
  color: white;
  box-shadow: 0px 0px 0px 3px var(--main_yellow);
  /* for border*/
}


.swiper-button-next,
.swiper-button-prev {
  color: var(--main_yellow);
}

.swiper-button-next {
  right: 14px;
  margin-top: auto;
}

.swiper-button-prev {
  left: 14px;
  margin-top: auto;
}

/* horizontal line between slides */
.swiper-slide:before {
  position: absolute;
  display: block;
  content: "";
  border-bottom: 0.5rem solid var(--main_yellow);
  z-index: -1;
  /* width: 30rem;
  margin: 0;
  margin-top: 15px;
  transform: translateY(-1rem); */
  width: 80px;
  margin: 0;
  margin-top: 15px;
  transform: translate(105px, -0.5rem);
}

.swiper-slide:before:hover,
.swiper_active {
  border-bottom: 0.5rem solid var(--bg_dark_gray);
}

/* content of every slide */
.slide_container {
  position: absolute;
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-wrap: break-word;
  flex-direction: column;
  overflow: hidden;
  clip-path: circle(80% at 50% 50%);
}

.slide_container p {
  margin: 0;
  padding: 0;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  margin-bottom: 6px;
}

.slide_container span {
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 2px 0 0 0;
}

/* 19.4.2.1 NOME ZONA CANTIERE */

.site_name {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  border: 1px solid var(--main_yellow);
  border-radius: 3px;
  padding: 2rem;
  margin: 1rem 0;
  background-color: var(--main_white);
  color: var(--main_dark);
}

.site_name h3,
.site_name h4 {
  margin: 0;
}

/* 19.4.3 GALLERY + DRAG + DATI CANTIERE + POSIZIONE */

.margin_col_site,
.margin_col_position {
  margin: 3rem 0 3rem 0;
}

.margin_col_gallery,
.margin_col_upload {
  margin: 0;
}

/* gallery */

.gallery_container {
  border: 1px solid var(--main_yellow);
  padding: 0.5rem;
  background-color: var(--bg_light_gray);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  height: 410px;
  overflow: auto;
  border-radius: 3px;
}

.gallery_container div {
  width: 45%;
  height: 150px;
  margin: 0.5rem;
  cursor: pointer;
  position: relative;
}

.gallery_container img {
  object-fit: cover;
  width: 100%;
  height: 150px;
}

.gallery_container a {
  position: absolute;
  right: 0;
}

​
/* gallery scrollbar */

.gallery_container::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--main_dark);
}

.gallery_container::-webkit-scrollbar {
  width: 8px;
  background-color: var(--main_dark);
}

.gallery_container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--main_yellow);
}

/* custom viewer.js */

.viewer-title {
  color: var(--main_white);
  margin: 0 5% 10px;
}

.viewer-toolbar>ul {
  display: flex;
  margin: 0 auto 5px;
  overflow: hidden;
  padding: 3px 0;
  height: 50px;
  justify-content: center;
  align-items: center;
}

.viewer-container .viewer-backdrop .viewer-fixed .viewer-fade .viewer-transition .viewer-in {
  z-index: 99999999 !important;
}

/* dati cantiere */

#data_site_container {
  border: 1px solid var(--main_yellow);
  background-color: var(--bg_light_gray);
  border-radius: 3px;
  padding: 1rem;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#data_site_container label {
  margin-bottom: 0;
  font-size: 1.5rem;
  text-align: center;
  padding: 0;
}

#data_site_container div {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 1.5rem;
}

.col_site {
  padding: 0.5rem !important;
  margin: 0 !important;
  width: fit-content;
  height: 60px;
  outline: 1px solid var(--main_dark);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  background-color: var(--main_white);
}

.col_site label {
  white-space: nowrap;
  text-align: center;
}

/* posizione */

#position_site {
  border: 1px solid var(--main_yellow);
  background-color: var(--bg_light_gray);
  border-radius: 3px;
  padding: 1rem;
  width: 100%;
  height: 100%;
  position: relative;
}

#map_cam {
  height: 255px;
  width: 100%;
}

.position_label {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid var(--main_dark);
  border-radius: 3px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: var(--main_white);
}

/* 20. EDIT TABS ---------------------------- */

/* Tab Menu */
.nav-tabs {
  margin-bottom: 0;
}

.edit_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 5rem;
}

.edit_nav a {
  color: var(--main_dark);
  padding: 1rem 2rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.edit_nav .nav-tabs .nav-link {
  border: 1px solid var(--main_yellow);
  outline: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  color: var(--main_dark);
  background-color: var(--main_white);
  margin-right: 0.5rem;
}

.edit_nav .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--main_yellow);
  background-color: var(--main_dark);
  outline: 0;
  border: 1px solid var(--main_dark);
}

/* Tab content*/

.tab_section {
  border: 1px solid var(--main_yellow);
  padding: 2rem 1rem;
  background-color: var(--group_input);
  border-radius: 3px;
  margin-top: 1rem;
  height: 100%;
}

/* 20.1 TOGGLE BUTTON VISIBLE NOT VISIBLE (edit_builder.php)*/

label.btn.btn-danger.btn-small.active.toggle-off {
  color: var(--main_white);
  line-height: 12px;
  /* align text center for label */
  border-color: var(--main_red);
  background-color: var(--main_red);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.2rem;
  padding-left: 2rem;
}

label.btn.btn-success.btn-small.toggle-on {
  color: var(--main_white);
  line-height: 12px !important;
  /* align text center for label */
  border-color: var(--main_green);
  background-color: var(--main_green);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.2rem;
}

.toggle-handle.btn.btn-default.btn-small {
  background-color: var(--main_dark);
  padding: 10px 20px;
  display: inline-block !important;
}

/*  20.2 TOGGLE MANAGE IMAGES CAMERA in modal_add_camera.php and edit_camera.php */
.wrapper_manage_images {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
}

.workerless,
.originals {
  display: flex;
  flex-direction: column;
}

.workerless label.btn.btn-danger.btn-small.active.toggle-off,
.originals label.btn.btn-danger.btn-small.active.toggle-off {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 50px !important;
}

.workerless label.btn.btn-success.btn-small.toggle-on,
.originals label.btn.btn-success.btn-small.toggle-on {
  display: flex;
  justify-content: flex-start;
  padding-left: 25px !important;
}

/* 21. SWAL ---------------------------- */

.swal_higher {
  z-index: 300000 !important;
}

/* 22. 404 ---------------------------- */

.total_wrap {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.wrapper_error_title {
  background-color: var(--main_dark);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 18rem;
  border-radius: 0;
}

.wrapper_error_title img {
  width: 100%;
  object-fit: cover;
}

.logo_wrap {
  height: 120px;
}

.title_error_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  margin-top: 5%;
}

.title_error_wrapper h1 {
  font: bold 20rem arial, sans-serif;
  /* metal effect on text */
  background-color: #565656;
  color: transparent;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  margin: 0;
}

.title_error_wrapper h3 {
  color: var(--main_dark);
}

.title_error_wrapper h4 {
  font: bold 3rem arial, sans-serif;
  text-transform: uppercase;
  margin: 3rem 0 -3rem 0;
  background-color: #565656;
  color: transparent;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

.call_error {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0 2rem 0;
  position: relative;
}

.footer_error {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100px;
  background-color: var(--main_dark);
  color: var(--main_white);
  text-align: center;

}

.footer_error a {
  color: var(--main_yellow);
}

/* --------------------------------------------------
                  MEDIA QUERY
----------------------------------------------------- */

/* MIN */

@media screen and (min-width: 576px) {

  .modal-dialog {
    max-width: 100%;
    margin: auto;
  }

  /* vertical centering modals */
  .modal {
    height: 100%;
  }

  .modal-dialog {
    top: 50% !important;
    margin-top: 0;
    margin-bottom: 0;
  }

  .modal.fade .modal-dialog {
    transform: translateY(-100%) !important;
  }

  .modal.in .modal-dialog {
    transform: translateY(-50%) !important;
  }

  /* end centering */
}

/* MAX */

@media screen and (max-width: 1024px) {

  /* SIDEBAR WITH ABSOLUTE POSITION */
  #sidebar {
    min-width: 180px;
    max-width: 180px;
    z-index: 99999;
    position: absolute;
    top: 70px;
    height: inherit !important;
  }

  .div_logo_sidebar {
    width: 150px;
  }

  .sidebar_footer img {
    width: 150px;
  }

  #sidebar .sidebar-header {
    padding: 13px;
  }

  /* END SIDEBAR WITH ABSOLUTE POSITION */
  /* SIDEBAR ADJUSTMENTS FOR ABSOUTE POSITION*/
  #sidebar.partial {
    display: none;
  }

  #sidebarCollapse span:first-of-type,
  #sidebarCollapse span:nth-of-type(2),
  #sidebarCollapse span:last-of-type {
    transform: none;
    opacity: 1;
    margin: 5px auto;
  }

  #sidebarCollapse.active span {
    margin: 0 auto;
  }

  #sidebarCollapse.active span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
  }

  #sidebarCollapse.active span:nth-of-type(2) {
    opacity: 0;
  }

  #sidebarCollapse.active span:last-of-type {
    transform: rotate(0deg) translate(1px, -1px);
    /* Hamburger Button */
  }

  /* no tooltip on sidebar when mobile */
  .hover_sidebar {
    display: none;
  }

  /* END SIDEBAR ADJUSTMENTS */

  .customSwitch3 {
    height: 2.8rem;
  }

  .toggle-on,
  .toggle-off {
    line-height: 10px !important;
  }

  .customSwitch3 .modeLabel {
    font-size: 1rem;
    padding: 0 0.8em;
  }

  .wrapper_state_camera {
    flex-direction: column;
  }

  .wrapper_state_camera .btn-group {
    margin-bottom: 0.5rem;
  }

  /* 15.3 PLAYER SITE INFO*/
  .player_site_titles,
  .player_site_date {
    flex-direction: column;
  }

  .player_site_titles,
  .player_site_titles h3,
  .player_site_date h5 {
    margin-bottom: 0.5rem;
  }

  .label_select_site {
    text-align: center;
    width: 100%;
  }

  /*  20.2 TOGGLE MANAGE IMAGES CAMERA */
  .wrapper_manage_images {
    flex-direction: column;
  }

  .workerless {
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 992px) {
  .invite_col_button {
    margin-top: 1rem;
  }

  .edit_user_btns {
    flex-direction: column;
  }

  .edit_user_btns button:first-child {
    margin-right: 0;
    margin-top: 1rem;
  }

  .edit_user_btns button {
    margin-bottom: 1rem;
  }
}

@media screen and (max-width: 768px) {

  .menu-link-wrapper {
    margin-top: -20px;
  }

  .card_home_title p {
    font-size: 1.5rem;
  }

  .card_admob_container {
    flex-direction: column;
    margin: 15px;
  }

  #data_table_info {
    display: none;
  }

  .mar_resp {
    margin-bottom: 1rem;
  }

  .router_mid_wrapper {
    flex-direction: column;
    width: 100%;
  }

  .router_mid {
    width: 100%;
    margin: 0 !important;
  }

  .col_site {
    margin-bottom: 1rem !important;
  }

  #data_site_container label {
    margin-bottom: 0.5rem;
  }

  #data_site_container {
    margin-bottom: 2rem;
  }

  .margin_col_position {
    margin: 0 0 3rem 0;
  }

  .margin_col_upload {
    margin: 3rem 0 0 0;
  }

  .swiper-slide:hover {
    background: var(--main_yellow);
    color: var(--main_dark);
    box-shadow: 0px 0px 0px 3px var(--main_dark);
    /* for border*/
  }

  .edit_header_page {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: column;
    height: 70px;
  }

  .managed_name h3 {
    text-align: left;
  }

  .image_cam {
    height: 280px;
  }
}

@media screen and (max-width: 767px) {
  .anteprima_column {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .anteprima_column label {
    align-self: flex-start;
    padding-left: 15px;
    ;
  }

  .anteprima_container {
    height: 180px;
  }
}

@media screen and (max-width: 600px) {
  .mb_max_600 {
    margin-bottom: 4%;
  }

  .wrapper_error_title img {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logo_wrap {
    height: 100px;
  }
}

@media screen and (max-width: 576px) {
  .responsive_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
  }

  .wrapper_manage_cameras h3 {
    font-size: 1.9rem;
  }

  #state_camera .form-group,
  .counter_container {
    flex-direction: column;
    width: auto;
  }

  #state_camera .form-group {
    order: 1;
  }

  #state_camera .btn {
    margin: 0 0.5rem 0.5rem 0;
  }

  .counter_container {
    order: 2;
  }

  .count_item {
    width: 120px;
    margin: 0 0 0.5rem 0;
  }

  /* 18.8 modal weather */
  .weather_container {
    padding-top: 2rem;
  }

  .first_row,
  .second_row {
    flex-direction: column;
  }

  .weather_img_date,
  .weather_icon_div,
  .weather_img_div,
  .weather-wrapper {
    width: 100%;
  }

  .weather-wrapper h3 {
    font-size: 1.8rem;
  }

  .weather_title {
    font-size: 1.3rem;
  }

  .weather_img_date {
    order: 1;
  }

  .weather_icon_div {
    order: 2;
  }

  .weather-wrapper {
    order: 3;
  }

  .weather_img_div {
    order: 4;
  }

  /* end modal weather*/
  .managed_name h3 {
    font-size: 1.2rem !important;
  }
}

@media screen and (max-width: 425px) {
  .horizontal_controls {
    flex-wrap: wrap;
  }

  .hover_vertical_controls {
    font-size: 1.2rem;
    width: 100px;
  }

  .player_icon_container {
    width: 100%;
    -webkit-order: 1;
    /* Safari 6.1+ */
    order: 1;
  }

  .toggle_container {
    width: 50%;
    -webkit-order: 2;
    /* Safari 6.1+ */
    order: 2;
    justify-content: center;
  }



  .fullscreen_icon_container {
    width: 50%;
    -webkit-order: 2;
    /* Safari 6.1+ */
    order: 2;
    justify-content: center;
  }

  .customSwitch3 {
    margin: 0;
  }

  .mb_max_600 {
    margin-bottom: 0;
  }

  .mb_max_425 {
    margin-bottom: 4%;
  }

  .header_modal_title {
    letter-spacing: inherit;
  }

  #modalAddCamera .form-group input[type="radio"]+.btn-group>label {
    padding: 10px 25px;
    width: 150px;
  }

  #modalAddSite .form-group input[type="radio"]+.btn-group>label,
  #edit_site .form-group input[type="radio"]+.btn-group>label {
    padding: 10px 25px 5px 25px;
    width: 160px;
    margin-bottom: 1rem;
  }

  .site_status_container {
    justify-content: center;
    flex-direction: column;
  }

  .type_container {
    flex-direction: column;
  }

  .container_radio1 {
    width: 100%;
    justify-content: center;
    padding-right: 0;
    margin-bottom: 0.5rem;
  }

  .container_radio2 {
    width: 100%;
    justify-content: center;
    padding-left: 0;
  }

  .resp_input_date {
    height: 60px !important;
  }

  /* player */
  .icon_vertical {
    margin-bottom: 1.5rem;
  }

  .icon_vertical .fa,
  .icon_vertical .fas {
    font-size: 18px;
  }

  .vertical_controls {
    width: 40px;
    padding: 1rem;
  }

  .player_icon_container,
  .toggle_container,
  .fullscreen_icon_container {
    height: 55px;
  }

  .icon_horizontal .fa,
  .icon_horizontal .fas {
    font-size: 25px;
  }

  .fullscreen_icon_container .fa,
  .fullscreen_icon_container .fas {
    font-size: 20px;
  }

  .play img {
    width: 40px;
    height: 40px;
  }

  /*end player*/
  .address p {
    text-align: left !important;
  }

  .lat_long {
    flex-direction: column;
  }

  .lat_long {
    align-items: flex-start;
  }

  .header_page h3 {
    font-size: 1.6rem;
  }

  .scheda_menu h4 {
    font-size: 1.4rem;
  }

  .title_error_wrapper h1 {
    font-size: 18rem;
  }

  .title_error_wrapper h3 {
    font-size: 2.5rem;
  }

  .overlay {
    font-size: 1.1rem;
    padding: 0.7rem;
  }

  .image_cam {
    height: 220px;
  }

  .invite_title {
    max-width: 100%;
  }
}

@media screen and (max-width: 375px) {
  .card_home_title p {
    font-size: 1.3rem;
  }

  #modalInvite label {
    font-size: 1.4rem;
  }

  .wrapper_items_form {
    padding: 2rem 0.8rem 2rem 0.8rem;
  }

  .resp_padding {
    padding: 0 !important;
  }

  .btn_switch {
    width: 115px;
  }
}

@media screen and (max-width: 360px) {
  #modalAddCamera .form-group input[type="radio"]+.btn-group>label {
    padding: 10px 16px;
  }

  #modalInvite label {
    font-size: 1.2rem;
  }

  .icon_horizontal .fa,
  .icon_horizontal .fas {
    font-size: 25px;
  }
}

@media screen and (max-width: 320px) {
  .card_home_title p {
    font-size: 1.2rem;
  }

  .modal .modal-dialog .modal-content .modal-header {
    padding: 20px 20px;
  }

  .container_radio1,
  .container_radio2 {
    width: 100%;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .count_item {
    width: 90px;
  }

  #modalInvite label {
    font-size: 1.1rem;
  }

  #modalAddCamera .form-group input[type="radio"]+.btn-group>label {
    padding: 10px 18px;
  }

  #edit_site .form-group input[type="radio"]+.btn-group>label,
  #modalAddSite .form-group input[type="radio"]+.btn-group>label {
    padding: 10px 18px;
    width: 130px;
  }

  .site_name h5 {
    font-size: 1rem;
  }

  .title_error_wrapper h3 {
    font-size: 2.3rem;
  }

  .icon_vertical .fa,
  .icon_vertical .fas {
    font-size: 15px;
  }

  .icon_vertical {
    margin-bottom: 0.7rem;
  }
}


/* Elia's Stuff */
.floating_action_button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

/* Stile per il popup a schermo intero */
.full_screen_popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3b3e42;
  /* Sfondo semi-trasparente */
  display: none;
  z-index: 999999;
  /* Inizialmente nascosto */
  /* Aggiungi altri stili per il contenuto del popup, come la griglia di immagini */
  background-image: url(../../images/icona.png);
  background-repeat: no-repeat;
  background-size: 100px;
  background-position-x: 10px;
  background-position-y: 90vh;
}

.popup-content {
  font-family: none;
  font-size: 15px;
  position: absolute;
  bottom: -4px;
  right: 191px;
  width: 76vw;
}

.popup-content p {
  margin: 0 !important;
  color: white !important;
  text-align: center !important;
}

/* Stile per il selettore multiplo */

/* Stile per la griglia delle immagini */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(700px, 1fr)); /* Aumenta la larghezza minima delle celle */
  grid-gap: 1px;
  justify-items: center;
  align-items: center;
  padding: 142px;
  padding-top: 3px;
  overflow-y: auto;
  max-height: 93vh;
}

/* Stile per le immagini */
.image-grid img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* Stile per l'elemento contenitore delle immagini */
.image-container {
  position: relative;
  display: inline-block;
  margin: 10px;
}

/* Stile per l'immagine */
.image-container img {
  max-width: 100%;
  height: auto;
}

/* Stile per l'elemento delle informazioni */
.image-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 5px;
  text-align: center;
  font-size: 12px;
}

/* Stile per il testo delle informazioni */
.image-info p {
  margin: 0 !important;
  color: white !important;
  text-align: center !important;
}

.custom-select {
  display: inline-block;
  white-space: nowrap;
  overflow-x: auto; /* Aggiunge uno scorrimento orizzontale se necessario */
  max-width: 100%; /* Impedisce che la select multipla superi la larghezza del contenitore */
  padding: 5px;
  vertical-align: middle;
  height: 58px !important;
  overflow-y: hidden;
}

.custom-select option {
  display: inline-block;
  white-space: nowrap;
  padding: 5px;
  border: 1px solid #ccc; /* Aggiunge una sottolineatura tra le opzioni */
  margin-right: 5px; /* Aggiunge spazio tra le opzioni */
}

/* Stile generale della selezione multipla */
.custom-select {
  display: block;
  /* margin-top: 75px; */
  height: 100px;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 2rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Stile delle opzioni selezionate */
.custom-select option {
  padding: 0.25rem 1.5rem;
}

/* Stile quando l'utente passa sopra un'opzione */
.custom-select option:hover {
  background-color: #f8f9fa;
}

/* Stile quando l'utente seleziona un'opzione */
.custom-select option:selected {
  background-color: #007bff;
  color: #fff;
}

/* Stile del cursore quando si passa sopra la selezione */
.custom-select:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.timelapse-icon {
  position: absolute;
  color: #3b3e42;
  padding: 2px;
  font-size: 14px;
  font-weight: bolder;
  font-family: 'Roboto';
  margin-left: -32px;
  margin-top: 5px;
}

@media screen and (max-width: 768px) {
  .timelapse-icon {
    margin-left: -26px;
    margin-top: 2px;
  }
}

#backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 1;
  cursor: pointer;
}

/* HD Video Player */
.hd_player_view {
  width: 100%;
  background: var(--main_dark);
  border: 5px solid var(--main_dark);
  border-bottom: 0;
  box-sizing: border-box;
  position: relative;
}

.hd_video {
  width: 100%;
  display: block;
  max-height: 70vh;
  object-fit: contain;
  background: #000;
}

.hd_player_bar {
  width: 100%;
  min-height: 70px;
  background-color: var(--main_dark);
  border: 5px solid var(--main_dark);
  border-top: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 1rem;
}

.hd_buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hd_buttons i,
.hd_buttons a,
.hd_buttons button {
  color: var(--main_white);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  position: relative;
}

.hd_buttons i:hover,
.hd_buttons a:hover,
.hd_buttons button:hover {
  color: var(--main_yellow);
}

.hd_back_btn {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

#modalMap .player_map_wrap {
  align-items: stretch;
}

#modalMap #player_site_map {
  display: block;
  height: 350px;
  min-height: 350px;
  width: 100%;
}

#player_image_container.vertical-image {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--main_dark);
  padding-right: 50px;
  box-sizing: border-box;
}

#player_image_container.vertical-image #player_image,
#player_image_container.vertical-image img,
#player_image_container.vertical-image video {
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  max-height: 65vh;
  margin: 0 auto;
  object-fit: contain;
}

/* RESOLUTION OVERLAY - Positioned above date overlay */
.overlay_resolution {
  bottom: 60px !important;
  font-size: 1.2rem !important;
  padding: 0.5rem 1rem !important;
  opacity: 0.9 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  outline: 1px solid rgba(243, 148, 0, 0.6) !important;
}