/*
lightbox
*/
.close.icon {
  color: #000;
  position: absolute;
  margin-top: 0;
  margin-left: 0;
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.close.icon:before {
  content: '';
  position: absolute;
  top: 10px;
  width: 30px;
  height: 2px;
  background-color: currentColor;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.close.icon:after {
  content: '';
  position: absolute;
  top: 10px;
  width: 30px;
  height: 2px;
  background-color: currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

#shadowbody, #shadowbodyMap, #shadowmenu {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2999;
}

#shadowbody.strong {
  background-color: rgba(0, 0, 0, 0.8);
}

.preventscroll {
  overflow: hidden;
}

#lightbox, #lightboxMap {
  display: none;
  position: fixed;
  top: 25px;
  bottom: 6px;
  left: 15%;
  right: 15%;
  padding-top: 35px;
  background-color: #fff;
  box-shadow: 1px 1px 15px #555;
  z-index: 5000;
  overflow-y: hidden;
}

#lightbox.strong, #lightboxMap.strong {
    padding-top: 0px;
    top: 10px;
    left: 1%;
    right: 1%;
    width: 98%;
    margin: 0 auto;
    max-width: 1150px;
}

#lightbox .container, #lightboxMap .container {
	display: block;
	/*width: 100%;*/
	height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}

#lightboxMap .container .label  {
    margin: 20px;
    color: #000;
    text-align: center;
}

#lightboxMap .container .label h4 {
    color: #000;
}

#lightboxMap.strong {
    padding-top: 0px;
    top: 10px;
    left: 1%;
    right: 1%;
    width: 98%;
    margin: 0 auto;
    max-width: 1150px;
}

#lightbox-close, #lightbox-close-map {
    position: fixed;
    top: 0;
    right: calc(15% - 15px);
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: #fff;
    z-index: 5001;
}

#lightbox .close.icon, #lightboxMap .close.icon {
  color: #000;
}

#lightbox .close.icon:hover::before, #lightboxMap .close.icon:hover::before {
  box-shadow: 0 0 15px #aaa;
}

#lightbox .close.icon:hover::after, #lightboxMap .close.icon:hover::after {
  box-shadow: 0 0 15px #aaa;
}

#lightbox .close.icon:active::before, #lightboxMap .close.icon:active::before {
  box-shadow: 0 0 6px #aaa;
}

#lightbox .close.icon:active::after, #lightboxMap .close.icon:active::after {
  box-shadow: 0 0 6px #aaa;
}

#lightbox h1, #lightboxMap h1 {
  width: 90%;
  font-weight: bold;
  color: #000;
  text-transform: uppercase;
}

#lightbox hr, #lightboxMap hr {
  border-color: #000;
}

#lightbox li, #lightboxMap li {
  /*line-height: 1.4rem;*/
}

#maposm.strongbox {
    position: absolute;
    top: 140px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    width: inherit;
    height: calc(100% - 160px);
    border-radius: 0 0 5px 5px;
}

#maposm.strongbox canvas {
    border-radius: 0 0 20px 20px;
}

#maposm.strongbox .ol-attribution.ol-uncollapsible {
    border-radius: 4px 0 20px 0;
}

#form_contact .complement {
    display: none;
}

@media screen and (max-width: 1680px) {
    #lightbox, #lightboxMap {
      left: 12%;
      right: 12%;
    }
    
    #lightbox-close, #lightbox-close-map {
        right: calc(12% - 15px);
    }
}

@media screen and (max-width: 1350px) {
    #lightbox, #lightboxMap {
      left: 5%;
      right: 5%;
    }
    
    #lightbox-close, #lightbox-close-map {
        right: calc(5% - 15px);
    }
}

@media screen and (max-width: 1050px) {
    #lightbox, #lightboxMap {
      left: 3%;
      right: 3%;
    }
    
    #lightbox-close, #lightbox-close-map {
        right: calc(3% - 15px);
    }
}

@media screen and (max-width: 960px) {
    #lightbox, #lightboxMap {
      top: 10px;
      bottom: 6px;
      left: 1%;
      right: 1%;
      box-shadow: 1px 1px 1px #555;
    }
    #lightbox-close, #lightbox-close-map {
        right: calc(1% - 15px);
    }
    #lightbox h1 {
      width: 85%;
    }
}


/*******************
    CADDY GRID
*******************/
div.caddy_grid {
    display: grid;
    grid-template-columns: 65px 1fr 150px 120px 120px 130px 30px;
    /*grid-template-rows: 100px;*/
    /*grid-auto-rows: 2px;*/
    width: 100%;
    gap: 5px 20px;
}

div.caddy_grid > div.caddy_header_product {
    grid-column: 1 / span 3;
}

div.caddy_grid > div.caddy_item {
    display: flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
}

div.caddy_grid.caddy_header > div.caddy_item {
    font-weight: bold !important;
}

div.caddy_grid > div.caddy_item div.product_title {
    display: none;
    font-weight: bold !important;
}

div.caddy_grid > div.caddy_item.caddy_right {
    justify-content: right;
}

div.caddy_grid > div.caddy_item_product {
    grid-column: 2 / span 2;
    
}

div.caddy_grid > div.caddy_line {
  grid-column: 1 / 8;
  height: 2px !important;
  border-bottom: 1px solid #ddd;
}

div.caddy_grid > div.caddy_right {
    text-align: right;
}

div.caddy_grid_total {
    display: grid;
    grid-template-columns: 350px 150px;
    grid-template-rows: 30px;
    justify-content: end;
    width: 100%;
    gap: 5px 20px;
}

div.caddy_grid_total > div.caddy_item {
    display: flex;
    align-items: center;
}

div.caddy_grid_total > div.caddy_item_total_amount {
    justify-content: right;
}

p.resh_ticketing_infos {
	margin: 0 0 40px;
}

p.resh_ticketing_infos_btn {
    padding: 10px 20px;
    height: 30px;
    width: fit-content;
    line-height: 1.625rem;
    border-color: transparent;
    box-shadow: 0 3px 5px 0 rgba(60,64,67,.18),0 1px 3px 1px rgba(60,64,67,.22)
}

p.resh_ticketing_infos_btn i {
	display: inline-block;
	vertical-align: middle;
}
	
p.resh_ticketing_infos_btn b {
	display: inline-block;
	vertical-align: middle;
}

p.resh_ticketing_infos_btn:hover {
    color: #fff;
    background-color: #000;
}

@media screen and (max-width: 799px) {
    div.caddy_grid {
        display: grid;
        grid-template-columns: 65px;
        grid-template-rows: auto;
        /*grid-auto-rows: 2px;*/
        width: 100%;
        gap: 20px;
        align-items: center;
    }

    div.caddy_grid.caddy_header {
        display: none;
    }

    div.caddy_grid > div.caddy_item {
        grid-column: 2 / span 6;
        height: 40px;
    }
    
    div.caddy_grid > div.caddy_item_product {
        grid-column: 2 / span 5;
        height: 40px;
    }
    
    div.caddy_grid > div.caddy_item_image {
        grid-column: 1;
        height: inherit;
        max-height: 65px; 
    }
    
    div.caddy_grid > div.caddy_item_product {
        grid-column: 2 / span 5;
        height: inherit;
        min-height: 40px;
    }
    
    div.caddy_grid > div.caddy_item_delete {
        grid-column: 7; 
        grid-row-start: 1;
        justify-content: right;
        text-align: right;
    }

    div.caddy_grid > div.caddy_item div.product_title {
        display: inline-block;
        justify-content: left;
        text-align: left;
        width: 50%;
    }

    div.caddy_grid > div.caddy_item div.product_value {
        display: inline-block;
        justify-content: right;
        width: 50%;
    }
    

    div.caddy_grid > div.caddy_item.caddy_right {
        display: flex;
    }

    div.caddy_grid > div.caddy_item.caddy_item_total {
        font-weight: bold !important;
    }

    div.caddy_grid > div.caddy_item div.touchspin {
        text-align: right;
    }
    
    div.caddy_grid_total {
        display: grid;
        grid-template-columns: 1fr 120px;
        grid-template-rows: 30px;
        justify-content: end;
        width: 100%;
        gap: 5px 20px;
    }
    
    #psp-block-grid {
        grid-template-columns: 50% 50% !important;
    }
        
}


/*******************
    HISTORY GRID
*******************/
table.history_container {
	table-layout: auto;
	width: 100%;
	border-collapse: collapse; 
}

table tr.history_header td.history_item {
    font-weight: bold !important;
    border-bottom: 1px solid #000;
}

table tr td.history_item {
	padding: 0 8px;
	height: 40px;
    font-size: 80%;
    border-bottom: 1px solid #ddd;
}

table tr td.history_item img {
    margin-top: 5px;
    height: 30px;
}

table tr td.history_item.center, table tr td.history_item.icon {
    text-align: center;
}

table tr td.history_item.center, table tr td.history_item.qr {
    text-align: center;
}

table tr td.history_item.center, table tr td.history_item.qr img {
    width: 40px !important;
    height: 40px !important;
}

table tr td.history_item.right {
    text-align: right;
}

@media only screen and (max-width: 799px) {
    table.history_container {
	    display: block;
	    padding-top: 15px;
	    width: 100%;
	    border-collapse: collapse; 
	}

	table.history_container tbody {
	    display: block;
        width: 100%;
	}

    /*
	table tr {
	    display: block;
	    padding-top: 10px;
	    width: 100%;
	    border-bottom: 1px solid #ddd;
	}
	*/
	
	table tr.history_header {
        display: block;
        color: #fff;
        background-color: #000;
        border-bottom: 1px solid #000;
    }
    
    table tr.history_header td.history_item.icon {
        display: none;
    }
    
	table tr.history_header td.history_item {
	    display: block;
	    font-weight: bold !important;
	    border-bottom: none;
	}
	
	table tr td.history_item {
	    display: block;
	    padding: 0 8px;
	    height: 40px;
	    width: 100%;
	    font-size: 80%;
	    border-bottom: none;
	}
	
	table tr td.history_item:first-child {
	    padding-top: 10px;
	    margin-top: 10px;
	}
	
	table tr td.history_item img {
	    margin-top: 5px;
	    height: 30px;
	}
	table tr td.history_item.icon {
        display: inline-block;
        width: inherit;
        max-width: 50px;
        text-align: left;
        /*float: right;*/
    }
	
	table tr td.history_item.center {
	    text-align: left;
	}
	
    table tr td.history_item.right {
        text-align: left;
    }

}