
:root {

   /* --------------  gd table specific cell widths -------------- */
   --gd-table-cell-width-qty: 80px;
   --gd-table-cell-width-id: 100px;   
   --gd-table-cell-width-status: 100px;
   --gd-table-cell-width-date: 150px;
   --gd-table-cell-width-amount: 100px;
   --gd-table-cell-width-price: 100px;
}


/* transitions */
details summary,
.gd-accordion-toggle,
.gd-accordion-toggle .gd-el-icon,
.gd-accordion-toggle .gd-el-icon:before,
.gd-accordion-toggle .gd-el-icon:after  {
   transition: all var(--gd-transition-timing);
}






/* OVERLAY */
.overlay {
	display: none;
	padding:60px 20px;
	text-align:center;
	width:90%;	
	max-width:500px;
	height:calc(100% - 150px);
	max-height:500px;
	min-height:350px;
	border-radius:var(--gd-border-radius-1);
}

.overlay .close {
	position:absolute;
	top:20px;
	right:20px;
	font-size:20px;
	line-height:20px;
	width:30px;
	height:30px;
	border:0;
   border-radius:50%;
	padding:0;
	background-color:transparent;
	cursor:pointer;
	opacity:0.8;
	z-index:1;
}

.overlay .close .icon {
   position:relative;
   display:block;
   top:50%;
   margin-top:-25px;
}


.overlay .close:hover,
.overlay .close:focus-visible {
	opacity:1;
}


.overlay-content {
	position:relative;
	width:90%;
   margin:0 auto;
	vertical-align:middle;
	top:50%;
	transform:translatey(-50%);
	z-index:0;
}

.overlay-content .icon {
	font-size:60px;
	line-height:1;
	display:block;
	text-align:center;
	margin-bottom:20px;
	color:#000000;
}

.overlay-content .icon img {
   display:block;
   width:80px;
   margin:0 auto;
}

.overlay-content .icon + [class*="heading"] {
	margin-top:0;
}

.overlay section {
	height:100%;
}



/* -------------------------------------------------- GD TABLE -------------------------------------------------- */


.gd-table [class*="gd-heading"] {
   max-width:100%;
   text-align:left;
}

.gd-table p {
   line-height:var(--gd-line-height-body-1);
   margin:0 0 20px 0;
   text-align:left;
}

.gd-table td p:last-child,
.gd-table td p:last-of-type {
   margin:0;
}



.gd-table {
   border:var(--gd-border-color-dkr) solid 1px;
   border-top:0;
   width:100%;
   font-size:var(--gd-font-size-body-1);
   line-height:var(--gd-table-line-height);
   text-align:left;
   margin:var(--gd-table-margin);
}

.gd-table:last-child {
   margin-bottom:0;
}


/* no transform table with 2 columns cell widths */
.gd-table.two-columns td:first-child {
   width:50%;
}

@media screen and (min-width:768px) {
   .gd-table.two-columns td:first-child {
      width:250px;
   }   
}


/* table row */
.gd-table tbody {
   border-top:var(--gd-border-color-dkr) solid 1px;
}

.gd-table thead + tbody {
   border-top: 0px;
}


/* table cell */
.gd-table td {
   word-break: break-word;
   vertical-align:top;
   padding:var(--gd-table-cell-padding);
}

/* hide label div inside table cell when not in mobile view */
.gd-table.transform-sm td .label,
.gd-table.transform-md td .label,
.gd-table.transform-lg td .label,
.order-purchase td .label {
   display:none;
}


/* table header */
.gd-table thead {
   background-color:var(--gd-bg-color-dkr);
   border-top:var(--gd-border-color-dkr) solid 1px;
   border-bottom:var(--gd-border-color-dkr) solid 2px;
}

.gd-table thead th,
.gd-table thead td  {
   font-weight:normal;
   font-size:var(--gd-font-size-body-3);
   text-transform:uppercase;
   letter-spacing:1px;
   color:var(--gd-font-color-dkr);
   max-width:100%;
   text-overflow:ellipsis;
   white-space:nowrap;
   padding:var(--gd-table-header-cell-padding);
}



/* hide mobile header */
.gd-table tr.mobile-header {
   display:none;
}


/* table footer */
.gd-table tfoot{
   background-color:var(--gd-bg-color-dkr);
   border-top:var(--gd-border-color-dkr) solid 2px;
}

.gd-table tfoot tr {
   border-top:var(--gd-border-color-dkr) solid 1px;
}

.gd-table tfoot tr:first-child {
   border-top:0;
}

/* subtotal rows */
.gd-table tfoot tr.subtotal {
   text-align:right;
}

/* add colon after  labels */
[lang="en"] .gd-table.label-colon .label:after,
[lang="en"] ul.label-colon .label:after {
   content:": ";
   display:inline;
}

[lang="fr"] .gd-table.label-colon .label:after,
[lang="fr"] ul.label-colon .label:after  {
   content:" : ";
   display:inline;
}


/* lists inside a table */
.gd-table ul {
   list-style:none;
   padding:0;
   margin:var(--gd-margin-paragraph);
}

.gd-table ul:last-child {
   margin:0;
}





/* ----- TABLE ONLY BREAKPOINTS  - use max-width instead of min-width since default should be table, only mobile should see it stacked -- 1px less than normal min-width breakpoints */
/* all table elements in breakpoints are the same just change class suffix to --sm, --md, --lg */



/* ----- GD  TABLE BREAKPOINT SM ----- */
@media screen and (max-width:359px) {

   

   /* ----- TRANSFORM TABLE -----*/

   /* for  links, button with icons and labels - only show label when mobile view  */
   .gd-table.transform-sm .mobile-label .gd-el-label {
     display:inline-block;
     overflow:visible;
     width:auto;
     height:auto;
     margin:0 0 0 10px;
  } 


   /* table row */
   .gd-table.transform-sm tr {
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
   }

   .gd-table.transform-sm tr td:first-child {
      border-top:0;
   }

   .gd-table.transform-sm thead tr {
      display:none;
   }

   .gd-table.transform-sm tr.mobile-header {
      display:flex;
   }

   .gd-table.transform-sm thead + tbody {
      border-top:0;
   }


   /* table cell */
   .gd-table.transform-sm td {
      display:flex;   
      flex-direction:row;
      flex-wrap:wrap;
      align-items:baseline;
      width:100%;
      text-align:left;
      gap:0 var(--gd-table-cell-column-gap);
      border-top:var(--gd-border-color-dk) solid 1px;
   }

   .gd-table.transform-sm td:first-child {
      border-top:0;
   }

   .gd-table.transform-sm td .label {
      display:block;
      flex: 0 0 var(--gd-table-col-label-width);
   }
   
   .gd-table.transform-sm td .value {
      flex: 1 0 var(--gd-table-col-value-width);
   }

   .gd-table.transform-sm  td:empty,
   .gd-table.transform-sm  th:empty {
      display:none;
   }




   /* --------------- TRANSFORM CHECKBOX OR RADIO TABLE --------------- */
   .gd-table.transform-sm.checkbox .cell-checkbox,
   .gd-table.transform-sm.radio .cell-radio {
      width:var(--gd-table-cell-checkbox-width);
   }

   .gd-table.transform-sm.checkbox td:nth-child(2),
   .gd-table.transform-sm.radio td:nth-child(2){
     border-top:0;
   }

   .gd-table.transform-sm.checkbox td:nth-child(n+2),
   .gd-table.transform-sm.radio td:nth-child(n+2){
      flex:0 1 calc(100% - var(--gd-table-cell-checkbox-width));
      border-left:var(--gd-border-color-dk) solid 1px;
   }
   
   .gd-table.transform-sm.checkbox td:nth-child(n+3),
   .gd-table.transform-sm.radio td:nth-child(n+3) {
      flex:0 1 calc(100% - var(--gd-table-cell-checkbox-width));
      border-left:var(--gd-border-color-dk) solid 1px;
      margin-left:auto;
   }


    /* ----- TABLE STACKS COLUMN ----- */
    .gd-table.transform-sm.stack tr {
      display: flex;
      flex-direction: column;
   }

   .gd-table.transform-sm.stack tbody tr {
      padding:var(--gd-table-cell-padding);
   }
   

   .gd-table.transform-sm.stack td {
      padding:0;
      border:0;
      margin-bottom:5px;
   }

   .gd-table.transform-sm.stack td:last-child {
      margin:0;
   }

   .gd-table.transform-sm.stack thead {
      display:none;
   }
   
   

   
   
}


/* ----- GD  TABLE BREAKPOINT MD ----- */
@media screen and (max-width:767px) {

   /* ----- TRANSFORM TABLE -----*/
   /* for  links, button with icons and labels - only show label when mobile view  */
   .gd-table.transform-md .mobile-label .gd-el-label {
     display:inline-block;
     overflow:visible;
     width:auto;
     height:auto;
     margin:0 0 0 10px;
  } 


   /* table row */
   .gd-table.transform-md tr {
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
   }

   .gd-table.transform-md tr td:first-child {
      border-top:0;
   }

   .gd-table.transform-md thead tr {
      display:none;
   }

   .gd-table.transform-md thead tr.mobile-header {
      display:flex;
   }

   .gd-table.transform-md thead + tbody {
      border-top:0;
   }


   /* table cell */
   .gd-table.transform-md td {
      display:flex;   
      flex-direction:row;
      flex-wrap:wrap;
      align-items:baseline;
      width:100%;
      text-align:left;
      gap:5px var(--gd-table-cell-column-gap);
      border-top:var(--gd-border-color-dk) solid 1px;
   }

   .gd-table.transform-md td:first-child {
      border-top:0;
   }

   .gd-table.transform-md td .label {
      display:block;
      flex: 0 0 var(--gd-table-col-label-width);
   }
   
   .gd-table.transform-md td .value {
      flex: 1 0 var(--gd-table-col-value-width);
   }


   .gd-table.transform-md  td:empty,
   .gd-table.transform-md  th:empty {
      display:none;
   }



   /* --------------- TRANSFORM CHECKBOX OR RADIO TABLE --------------- */
   .gd-table.transform-md.checkbox .cell-checkbox,
   .gd-table.transform-md.radio .cell-radio {
      width:var(--gd-table-cell-checkbox-width);
   }

   .gd-table.transform-md.checkbox td:nth-child(2),
   .gd-table.transform-md.radio td:nth-child(2){
     border-top:0;
   }

   .gd-table.transform-md.checkbox td:nth-child(n+2),
   .gd-table.transform-md.radio td:nth-child(n+2){
      flex:0 1 calc(100% - var(--gd-table-cell-checkbox-width));
      border-left:var(--gd-border-color-dk) solid 1px;
   }
   
   .gd-table.transform-md.checkbox td:nth-child(n+3),
   .gd-table.transform-md.radio td:nth-child(n+3) {
      flex:0 1 calc(100% - var(--gd-table-cell-checkbox-width));
      border-left:var(--gd-border-color-dk) solid 1px;
      margin-left:auto;
   }


    /* ----- TABLE STACKS COLUMN ----- */
    .gd-table.transform-md.stack  tr {
      display: flex;
      flex-direction: column;
   }

   .gd-table.transform-md.stack tbody tr {
      padding:var(--gd-table-cell-padding);
   }



   .gd-table.transform-md.stack td {
      padding:0;
      border:0;
      margin-bottom:5px;
   }

   .gd-table.transform-md.stack td:last-child {
      margin:0;
   }

   .gd-table.transform-md.stack thead tr {
      display:none;
   }

   .gd-table.transform-md.stack thead tr.mobile-header {
      display:flex;
   }

  
    
   /* for link icons only show icon in column */
    .gd-table.transform-md .link-icon--col-only .link-icon__icon {
      margin:0 10px 0 0;
   } 
   .gd-table.transform-md .link-icon--col-only .link-icon__label + .link-icon__icon {
      margin:0 0 0 10px;
   }

   .gd-table.transform-md .link-icon--col-only .link-icon__label {
      overflow:visible;
      width:auto;
      height:auto;
   }



}

/* ----- GD  TABLE BREAKPOINT LG ----- */
@media screen and (max-width:991px) {



   /* ----- TRANSFORM TABLE -----*/

   /* for  links, button with icons and labels - only show label when mobile view  */
   .gd-table.transform-lg .mobile-label .gd-el-label {
     display:inline-block;
     overflow:visible;
     width:auto;
     height:auto;
     margin:0 0 0 10px;
  } 


   /* table row */
   .gd-table.transform-lg tr {
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
   }

   .gd-table.transform-lg tr td:first-child {
      border-top:0;
   }

   .gd-table.transform-lg thead tr {
      display:none;
   }

   .gd-table.transform-lg thead tr.mobile-header {
      display:flex;
   }

   .gd-table.transform-lg thead + tbody {
      border-top:0;
   }


   /* table cell */
   .gd-table.transform-lg td {
      display:flex;   
      flex-direction:row;
      flex-wrap:wrap;
      align-items:baseline;
      width:100%;
      text-align:left;
      gap:5px var(--gd-table-cell-column-gap);
      border-top:var(--gd-border-color-dk) solid 1px;
   }

   .gd-table.transform-lg td:first-child {
      border-top:0;
   }

   .gd-table.transform-lg td .label {
      display:block;
      flex: 0 0 var(--gd-table-col-label-width);
   }
   
   .gd-table.transform-lg td .value {
      flex: 1 0 var(--gd-table-col-value-width);
   }

   .gd-table.transform-lg  td:empty,
   .gd-table.transform-lg  th:empty {
      display:none;
   }



   /* --------------- TRANSFORM CHECKBOX OR RADIO TABLE --------------- */
   .gd-table.transform-lg.checkbox  .cell-checkbox,
   .gd-table.transform-lg.radio  .cell-radio {
      width:var(--gd-table-cell-checkbox-width);
   }

   .gd-table.transform-lg.checkbox td:nth-child(2),
   .gd-table.transform-lg.radio td:nth-child(2){
      border-top:0;
   }

   .gd-table.transform-lg.checkbox td:nth-child(n+2),
   .gd-table.transform-lg.radio td:nth-child(n+2){
      flex:0 1 calc(100% - var(--gd-table-cell-checkbox-width));
      border-left:var(--gd-border-color-dk) solid 1px;
   }
   
   .gd-table.transform-lg.checkbox td:nth-child(n+3),
   .gd-table.transform-lg.radio td:nth-child(n+3) {
      flex:0 1 calc(100% - var(--gd-table-cell-checkbox-width));
      border-left:var(--gd-border-color-dk) solid 1px;
      margin-left:auto;
   }


    /* ----- TABLE STACKS COLUMN ----- */
    .gd-table.transform-lg.stack tr {
      display: flex;
      flex-direction: column;
   }

   .gd-table.transform-lg.stack tbody tr {
      padding:var(--gd-table-cell-padding);
   }
   

   .gd-table.transform-lg.stack td {
      padding:0;
      border:0;
      margin-bottom:5px;
   }

   .gd-table.transform-lg.stack td:last-child {
      margin:0;
   }

   .gd-table.transform-lg.stack thead tr:not(.mobile-header) {
      display:none;
   }

   
 
   
   
}
/* ----- TABLE ONLY BREAKPOINTS  -----*/
/* -------------------------------------------------- END GD TABLE -------------------------------------------------- */







/* --------------- GENERAL DETAILS ACCORDION --------------- */
/* ----- reset details ----- */

details summary {
	cursor:pointer;
   list-style: none;
   margin-bottom:0;
}

/* for safari */
details summary::-webkit-details-marker {
    display: none;
}

details[open] summary  {
   margin-bottom:20px;
}

/* ----- end reset details ----- */


.gd-accordion-group {
   border:var(--gd-border-color-dkr) solid 1px;
   border-radius: var(--gd-border-radius-1);
   margin:var(--gd-margin-paragraph);
}

.gd-accordion {
   border-bottom:var(--gd-border-color-dkr) solid 1px;
}

.gd-accordion:last-child {
   border-bottom:0;
}

.gd-accordion p {
   text-align:left;
   margin-left:0;
   margin-right:0;
   max-width:100%;
}


.gd-accordion:first-child .gd-accordion-toggle {
   border-radius: calc(var(--gd-border-radius-1) - 1px) calc(var(--gd-border-radius-1) - 1px)  0 0;
}


.gd-accordion:last-child .gd-accordion-toggle {
   border-radius:0 0  calc(var(--gd-border-radius-1) - 1px) calc(var(--gd-border-radius-1) - 1px);
}

.gd-accordion.open:last-child .gd-accordion-toggle {
   border-radius:0;
}


.gd-accordion:only-child .gd-accordion-toggle {
   border-radius: calc(var(--gd-border-radius-1) - 1px);
}

.gd-accordion.open:only-child .gd-accordion-toggle  {
   border-radius: calc(var(--gd-border-radius-1) - 1px) calc(var(--gd-border-radius-1) - 1px)  0 0;
}




.gd-accordion-toggle:hover,
.gd-accordion-toggle:focus-visible {
   background-color:var(--gd-bg-color-dkr);
}




.gd-accordion-toggle {
   text-align:left;
   background-color:transparent;
   border:0;
   width:100%;
   cursor:pointer;
   font-weight:bold;
   color:var(--gd-font-color-dkr);
   display:block;
   position:relative;
   padding:10px 40px 10px 20px;
   transition: border-radius var(--gd-transition-timing);
}

.gd-accordion-body {
   display:grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows var(--gd-transition-timing);
}

.gd-accordion.open .gd-accordion-body {
   grid-template-rows: 1fr;
}

.gd-accordion-content {
   transition: visibility  var(--gd-transition-timing) ,opacity  var(--gd-transition-timing);
   opacity:0;
   visibility:hidden;
   overflow:hidden;
}

.gd-accordion.open .gd-accordion-content {
   opacity:1;
   visibility:visible;
}

.gd-accordion-content > :last-child {
   margin-bottom:0;
}

.gd-accordion-padding {
   padding: 20px var(--gd-event-header-padding-vertical);
}

.gd-accordion-toggle:after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 7px solid #000000;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -4px;
}




.gd-accordion.open .gd-accordion-toggle:after {
   border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 7px solid  #000000;
	border-top:0;
}



/* --------------- END GENERAL DETAILS ACCORDION --------------- */





/* ----------------------------------------------------------------- SPECIFIC PAGES  ----------------------------------------------------------------- */

.pg-signed-out .icon-signed-out {
   display:block;
   width:80px;
   margin:0 auto 20px auto;
}

.pg-signed-out p {
   max-width:400px;
}


