/* -------------------- VARIABLES -------------------- */
:root {
	
	/* --- generic - color --- */
	--cookie-black: #000000;
	--cookie-white: #ffffff;
	--cookie-lightgrey: #ededed;
	--cookie-lightgreen: #81c868;
	
	/* --- generic - font family --- */
	--cookie-font-family: Verdana, sans-serif;
	
	/* --- generic - font size --- */
	--cookie-font-size: 15px;
	
	/* --- generic - line height --- */
	--cookie-line-height: calc(1em + 8px);
	
	/* --- title --- */
  --cookie-title-color: #3c3c3c;
	--cookie-title-font-size: 25px;
	
	/* --- link --- */
	--cookie-link-primary-color: #a0a0a0;
	--cookie-link-secondary-color: #000000;
	
	/* --- btn --- */
	--cookie-btn-font-size: 13px;
}


/* -------------------- TEXT -------------------- */

/* ----- font family ----- */
#cookieWall h4, #modal-cookie h4,
#cookieWall a, #modal-cookie a,
#cookieWall .text-cookie-wall,
#modal-cookie p,
#modal-cookie button,
#modal-cookie .text-desc-view {
	font-family: var(--cookie-font-family) !important;
	text-transform: none !important;
	text-decoration: none !important;
}

/* ----- font size ----- */
#cookieWall h4, #modal-cookie h4 {
	font-size: var(--cookie-title-font-size) !important;
	line-height: var(--cookie-line-height) !important;
}
#cookieWall .text-cookie-wall,
#cookieWall a:not(.btn), #modal-cookie a:not(.btn),
#modal-cookie p,
#modal-cookie .text-desc-view {
	font-size: var(--cookie-btn-font-size) !important;
	line-height: var(--cookie-line-height) !important;
}

/* ----- color ----- */
#cookieWall h4, #modal-cookie h4 {
	color: var(--cookie-title-color) !important;
}
#cookieWall a:not(.btn), #modal-cookie a:not(.btn) {
	color: var(--cookie-link-primary-color) !important;
}
#cookieWall a:not(.btn):hover, #modal-cookie a:not(.btn):hover {
	color: var(--cookie-link-secondary-color) !important;
}
#cookieWall .icon-cookie-wall-dismiss {
	color: var(--cookie-link-secondary-color) !important;
}
#cookieWall .icon-cookie-wall-dismiss:hover {
	color: var(--cookie-link-primary-color) !important;
}
#cookieWall .text-cookie-wall,
#modal-cookie p,
#modal-cookie .text-desc-view {
	color: var(--cookie-black) !important;
}


/* -------------------- BUTTON -------------------- */

/* ----- general ----- */
#cookieWall .btn, #modal-cookie .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
	font-size: var(--cookie-btn-font-size) !important;
	line-height: 1em !important;
	padding: 12px 30px !important;
	font-weight: bold !important;
	border-radius: 5px !important;
}
#cookieWall .btn-black-cookie {
	margin-right: 10px !important;
	margin-left: 10px !important;
}

/* ----- btn - black ----- */
#cookieWall .btn-black-cookie,
#modal-cookie .btn-black-cookie {
	color: var(--cookie-white) !important;
	background-color: var(--cookie-black) !important;
	border: 2px solid var(--cookie-black) !important;
}
#cookieWall .btn-black-cookie:hover,
#modal-cookie .btn-black-cookie:hover {
	color: var(--cookie-black) !important;
	background-color: var(--cookie-white) !important;
}

/* ----- btn - lightgrey ----- */
#cookieWall .btn-lightgrey-cookie,
#modal-cookie .btn-lightgrey-cookie {
	color: var(--cookie-black) !important;
	background-color: var(--cookie-lightgrey) !important;
	border: 2px solid var(--cookie-lightgrey) !important;
}
#cookieWall .btn-lightgrey-cookie:hover,
#modal-cookie .btn-lightgrey-cookie:hover {
	background-color: var(--cookie-white) !important;
	border-color: var(--cookie-black) !important;
}

/* ----- btn - outline ----- */
#cookieWall .btn-outline-cookie,
#modal-cookie .btn-outline-cookie {
	color: var(--cookie-black) !important;
	background-color: var(--cookie-white) !important;
	border: 2px solid var(--cookie-black) !important;
}
#cookieWall .btn-outline-cookie:hover,
#modal-cookie .btn-outline-cookie:hover {
	color: var(--cookie-white) !important;
	background-color: var(--cookie-black) !important;
}

/* ----- btn - rifiuta ----- */
#cookieWall .btn-rifiuta-cookie,
#modal-cookie .btn-rifiuta-cookie {
	color: var(--cookie-black) !important;
	background-color: var(--cookie-white) !important;
	border: 2px solid var(--cookie-black) !important;
}
#cookieWall .btn-rifiuta-cookie:hover,
#modal-cookie .btn-rifiuta-cookie:hover {
	color: var(--cookie-white) !important;
	background-color: var(--cookie-black) !important;
}

/* ----- btn - accetta ----- */
#cookieWall .btn-accetta-cookie,
#modal-cookie .btn-accetta-cookie {
	color: var(--cookie-white) !important;
	background-color: var(--cookie-lightgreen) !important;
	border: 2px solid var(--cookie-lightgreen) !important;
}
#cookieWall .btn-accetta-cookie:hover,
#modal-cookie .btn-accetta-cookie:hover {
	color: var(--cookie-lightgreen) !important;
	background-color: var(--cookie-white) !important;
}


/* -------------------- OBJECT -------------------- */

/* ----- backdrop ----- */
.backdrop-cookie {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500 !important;
	width: 100vw;
	height: 100vh;
	background-color: var(--cookie-black);
}
.backdrop-cookie.fade {
	opacity: 0;
} 
.backdrop-cookie.show {
	opacity: .5;
}

/* ----- cookiewall ----- */
#cookieWall {
	z-index: 510 !important;
	background-color: var(--cookie-white);
}
#cookieWall {
  bottom: 0;
  left: 0;
  padding: 20px;
  position: fixed;
  width: 100%;
  display: inline-block;
  transform: translate3d(0px, 200px, 0px);
  transition: all 0.7s ease 0s;
}
#cookieWall.modal-active {
  transform: translate3d(0px, 0px, 0px);
}

/* ----- modal - preference ----- */
#modal-cookie .row-pref-cookie {
	display: flex !important;
	align-items: center !important;
}
#modal-cookie .row-pref-cookie .col-pref-cookie {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
#modal-cookie .row-pref-cookie .col-pref-cookie .text-desc-view {
	display: inline-flex;
	align-items: center;
}
#modal-cookie .row-pref-cookie .col-pref-cookie .text-desc-view:hover {
	cursor: pointer;
}
#modal-cookie .row-pref-cookie [id^='coockieDescDet'] {
  padding-top: 10px;
}
#modal-cookie .row-pref-cookie [id^='coockieDescDet'].hide-cookie {
	display: none !important;
}

/* ----- modal - icon ----- */
#modal-cookie .icon-cookie-wall {
  width: 1em;
  height: 1em;
  display: inline-block;
  font-size: var(--cookie-font-size);
  line-height: 1em;
}
#modal-cookie .btn > .icon-cookie-wall {
	margin-right: 0.4em;
}
#modal-cookie .text-desc-view .icon-cookie-wall {
	margin-left: 0.4em;
}

/* ----- icon - info [i] ----- */
.cookie-edit-preference {
	position: fixed;
	z-index: 100;
	left: 10px;
	bottom: 10px;
	width: 2em;
	height: 2em;
	font-size: var(--cookie-font-size) !important;
	text-align: center;
	background-color: var(--cookie-white);
	color: var(--cookie-black) !important;
	border: 1px solid var(--cookie-lightgrey);
	border-radius: 3px;
}
.cookie-edit-preference:hover {
	background-color: var(--cookie-black);
	color: var(--cookie-white) !important;
}
.cookie-edit-preference .icon-cookie-wall.info {
	display: block;
	width: 1.2em;
	height: 1.2em;
  position: absolute !important;
  top: calc(100% - (1.2em + 5px));
  left: 0.5em;
}

/* ----- icon - dismiss [X] ----- */
.icon-cookie-wall-dismiss {
	width: 25px;
  height: 25px;
  position: absolute;
  right: 20px;
  top: 5px;
}

/* ----- hr ----- */
#modal-cookie hr {
  width: 100% !important;
  border-color: var(--cookie-lightgrey) !important;
  display: block !important;
}


/* -------------------- MARGIN E PADDING -------------------- */
#modal-cookie p,
#modal-cookie .col-pref-cookie > .switch-color-success {
  margin-bottom: 0 !important;
}

#cookieWall .mt-30,
#modal-cookie .mt-30 {
	margin-top: 30px !important;
}
#cookieWall .mt-40,
#modal-cookie .mt-40 {
	margin-top: 40px !important;
}

#cookieWall .mb-30,
#modal-cookie .mb-30 {
	margin-bottom: 30px !important;
}

#cookieWall .ml-5,
#modal-cookie .ml-5 {
	margin-left: 5px !important;
}

#cookieWall .pt-10,
#modal-cookie .pt-10 {
	padding-top: 10px !important;
}


/* -------------------------------------------------- */
/* ----- RESPONSIVE --------------------------------- */
/* -------------------------------------------------- */


/* ----- TABLET ORIZZONTALE ------------------------- */
@media (max-width: 1024px) and (min-width: 769px)
{
	
}

/* ----- TABLET VERTICALE --------------------------- */
@media (max-width: 768px) and (min-width: 577px)
{
	
	/* ---------- button ---------- */
	#modal-cookie .btn-outline-cookie,
	#modal-cookie .btn-lightgrey-cookie {
		width: 100%;
		padding: 12px !important;
	}
	
	/* ---------- modal ---------- */
	#modal-cookie > .modal-dialog {
    max-width: 90% !important;
    margin-top: 10% !important;
	}
	#modal-cookie > .modal-dialog > .modal-content > .modal-body {
		padding: 20px !important;
	}
	.modal-body > .row:first-child > .col-sm-6:first-child {
    padding-right: 5px !important;
	}
	.modal-body > .row:first-child > .col-sm-6:last-child {
    padding-left: 5px !important;
	}
	
}

/* ----- MOBILE ------------------------------------- */
@media (max-width: 576px)
{
	
	/* ---------- button ---------- */
	#cookieWall .btn {
		margin-right: 0px !important;
		margin-left: 0px !important;
	  margin-bottom: 10px !important;
	}
	#cookieWall .btn,
	#modal-cookie .btn {
    width: 100%;
    padding: 15px !important;
	}
	#modal-cookie .modal-body > .row:not(:last-child) .btn {
  	margin-bottom: 10px;
	}
	#modal-cookie .btn-accetta-cookie {
		margin-left: 0px !important;
	}
	
	/* ---------- cookiewall ---------- */
	#cookieWall .container {
		padding: 0 15px;
	}
	
}