

.event_table {width: 100%; padding: 0px; margin: 0px; text-align: left}

.event_table th {background: #f1f1f1; padding: 8px 5px; margin: 0px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;
font-weight: 500; color: var(--secondary); font-size: 0.9em}

.event_table td {background: #fff; padding: 6px 5px; margin: 0px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 0.85em; width: 12%; color: #666; font-weight: 200}
.event_table .name {width: 52%}

.event_table i {color: #777}
.event_table a {color: var(--main); text-decoration: underline}
.event_table i:hover {color: var(--main)}

.event_table button {display: inline-block!important; background: none; border: none; cursor: pointer}

.event_table td:first-child, .event_table th:first-child { border-left: 1px solid #ddd}

.event_table td:last-child, .event_table th:last-child { text-align: center}

.center {text-align: center!important}
.left {text-align: left!important}
.right {text-align: right!important}
.top {vertical-align: top}

.table_link {color: var(--main); font-size: 0.9em; font-weight: 400}

/*delete pop up */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.5);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
    width: 100vw; height: 100vh; z-index: 4000
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup_del {background: #fff; width: 500px; height: auto; border: 1px solid var(--secondary); padding: 30px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.1);
position: relative; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%)}

.popup_del .close {position: absolute; top: -2px; right: 5px; font-size: 1.4em; font-weight: 500; color: #777; text-decoration: none}
.popup_del .close:hover {color: var(--main)}
.popup_del h5 {font-size: 1.01em; font-weight: 400; color: #111; margin: 0px 0px 10px 0px}
.popup_del p {font-size: 1.0em; font-weight: 300; color: #111; margin: 0px 0px 20px 0px}

/*end delete pop up */

/*pagination*/

.pagination {margin: 10px auto; font-size: 0.9em; font-weight: 500; letter-spacing: 3px; color: #777; text-decoration: none}
.pag_in a {text-decoration: none; color: #111; font-weight: 400}
.pag_in i {text-decoration: none; color: var(--secondary)}
.pag_in .prevnext_off {text-decoration: none; color: #ccc!important; opacity: 0.1}

/*end pagination*/

.edit_but {border: none; width: calc(100% - 60px)!important; text-transform: uppercase; cursor: pointer; margin: 0px 30px}
.small_error {font-size: 0.8em; font-weight: 400;  color: var(--main); text-decoration: none; line-height: 1.2em; margin: 5px 0px}
.dropdown {display: inline-block; background: #f9f9f9; border: 1px solid #f1f1f1; border-bottom: 1px solid #ccc; font-size: 1em; padding: 8px 0px 4px 4px; font-weight: 300; color: #777; margin: 2px 0px 1px 15px; width: auto; line-height: 1.5em}


.del_button {border: 0px; background: none; color: var(--main); margin: 0px 0px 0px 10px; font-size: 1.3em; cursor: pointer}

.speakers table {width: 100%}
.speakers table tr td:first-child {width: 98%}

/* 4 columns */
.wrapperfour {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 25% 25% 25% 25% ;
  padding: 0px;
  margin: 10px 0px;
  width: 100%;
}
.boxfour {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.boxfour h3 {font-size: 1.1em; color: var(--secondary); font-weight: 500}

.wrapperfour label {margin: 15px 0px 0px 0px; display: block}

.k1 {grid-row: 1;  grid-column: 1 / span4}     

.k1a {grid-row: 1;  grid-column: 1} 
.k1b {grid-row: 1;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k1c {grid-row: 1;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k1d {grid-row: 1;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k1aa {grid-row: 1;  grid-column: 1 / span 2} 
.k1bb {grid-row: 1;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 

.k2 {grid-row: 2;  grid-column: 1 / span4}     

.k2a {grid-row: 2;  grid-column: 1} 
.k2b {grid-row: 2;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k2c {grid-row: 2;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k2d {grid-row: 2;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k2aa {grid-row: 2;  grid-column: 1 / span 2} 
.k2bb {grid-row: 2;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 

.k2aaa {grid-row: 2;  grid-column: 1 / span 3} 

.k3 {grid-row: 3;  grid-column: 1 / span4}     

.k3a {grid-row: 3;  grid-column: 1} 
.k3b {grid-row: 3;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k3c {grid-row: 3;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k3d {grid-row: 3;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k3aa {grid-row: 3;  grid-column: 1 / span 2} 
.k3bb {grid-row: 3;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 


.k4 {grid-row: 4;  grid-column: 1 / span4}     

.k4a {grid-row: 4;  grid-column: 1} 
.k4b {grid-row: 4;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k4c {grid-row: 4;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k4d {grid-row: 4;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k4aa {grid-row: 4;  grid-column: 1 / span 2} 
.k4bb {grid-row: 4;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 

.k4aaa {grid-row: 4;  grid-column: 1 / span 3} 


.k5 {grid-row: 5;  grid-column: 1 / span4}     

.k5a {grid-row: 5;  grid-column: 1} 
.k5b {grid-row: 5;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k5c {grid-row: 5;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k5d {grid-row: 5;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k5aa {grid-row: 5;  grid-column: 1 / span 2} 
.k5bb {grid-row: 5;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 


.k6 {grid-row: 6;  grid-column: 1 / span4}     

.k6a {grid-row: 6;  grid-column: 1} 
.k6b {grid-row: 6;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k6c {grid-row: 6;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k6d {grid-row: 6;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k6aa {grid-row: 6;  grid-column: 1 / span 2} 
.k6bb {grid-row: 6;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 


.k7 {grid-row: 7;  grid-column: 1 / span4}     

.k7a {grid-row: 7;  grid-column: 1} 
.k7b {grid-row: 7;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k7c {grid-row: 7;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k7d {grid-row: 7;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k7aa {grid-row: 7;  grid-column: 1 / span 2} 
.k7bb {grid-row: 7;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 

.k8 {grid-row: 8;  grid-column: 1 / span4}     

.k8a {grid-row: 8;  grid-column: 1} 
.k8b {grid-row: 8;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k8c {grid-row: 8;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k8d {grid-row: 8;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k8aa {grid-row: 8;  grid-column: 1 / span 2} 
.k8bb {grid-row: 8;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 

.k9 {grid-row: 9;  grid-column: 1 / span4}     

.k9a {grid-row: 9;  grid-column: 1} 
.k9b {grid-row: 9;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k9c {grid-row: 9;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k9d {grid-row: 9;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k9aa {grid-row: 9;  grid-column: 1 / span 2} 
.k9bb {grid-row: 9;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 

.k9aaa {grid-row: 9;  grid-column: 1 / span 3} 


.k10 {grid-row: 10;  grid-column: 1 / span4}     

.k10a {grid-row: 10;  grid-column: 1} 
.k10b {grid-row: 10;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k10c {grid-row: 10;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k10d {grid-row: 10;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k10aa {grid-row: 10;  grid-column: 1 / span 2} 
.k10bb {grid-row: 10;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 



.k40 {grid-row: 40;  grid-column: 1 / span4}     

.k40a {grid-row: 40;  grid-column: 1} 
.k40b {grid-row: 40;  grid-column: 2; margin: 0px 0px 0px 5px} 
.k40c {grid-row: 40;  grid-column: 3; margin: 0px 0px 0px 5px} 
.k40d {grid-row: 40;  grid-column: 4; margin: 0px 0px 0px 5px} 

.k40aa {grid-row: 40;  grid-column: 1 / span 2} 
.k40bb {grid-row: 40;  grid-column: 3 /span 2; margin: 0px 0px 0px 5px} 


/* end 4 columns */

.form_table {margin-top: -3px;}

.table_payers {width: 53%}


/* 4 columns interactions */
.wrappersix {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 25% 25% 25% 25%  ;
  padding: 0px;
  margin: 0px 0px;
  width: 100%;
}
.boxsix {
  padding: 0px 0px;
  margin: 0px 10px 0px 0px;
  text-align: center;
  border: 0px solid #ee0000;
}

.boxsix .icon {height: 3.5em; filter:drop-shadow(1px 1px 2px rgb(0 0 0 / 0.4))}


.boxsix .button {padding: 5px 20px!important; font-size: 75%; margin: 15px 0px 0px!important; display: inline-block}
.boxsix .button:hover {text-decoration: none}


.boxsix h3 {font-size: 1.1em; font-weight: 550; margin: 15px 0px 0px}
.boxsix p {font-size: 0.95em; margin: 15px 0px 0px}
.opacity_half {opacity: 0.4}

.b1 {grid-row: 1;  grid-column: 1} 

.b2 {grid-row: 1;  grid-column: 2} 

.b3 {grid-row: 1;  grid-column: 3} 

.b4 {grid-row: 1;  grid-column: 4} 

.b5 {grid-row: 2;  grid-column: 1} 

.b6 {grid-row: 2;  grid-column: 2} 

.b7 {grid-row: 2;  grid-column: 3} 

.b8 {grid-row: 2;  grid-column: 4} 

.b5, .b6, .b7, .b8 {margin-top: 60px}

.b4, .b8 {margin-right: 0px;}

/* end 4 columns interactions */

.menuline {height: 20px; background: #fff; border: none; margin: 2px 0px 0px}
/*
.menu_inactive {background: var(--main); width: 100%; display: block; text-align: center; color: #fff; font-size: 1em; font-weight: 300; padding: 5px 8px}
.menu_active {background: var(--secondary); width: 100%; display: block; text-align: center; color: #fff; font-size: 1em; font-weight: 500; padding: 5px 8px; cursor: default}
*/

.menu_inactive {background: var(--main); width: 100%; display: block; text-align: center; color: #fff; font-size: 1em; font-weight: 300; padding: 5px 8px; border-bottom: 2px solid var(--main)}
.menu_active {background: var(--mainlight); width: 100%; display: block; text-align: center; color: var(--main); font-size: 1em; font-weight: 600; padding: 5px 8px; cursor: default;  border-bottom: 2px solid var(--main)}

.menu_inactive:hover, .menu_active:hover {text-decoration: none}

/* 2 responsive columns */
.column2 {
  float: left;
  width: 50%;
  padding: 0 5px; border: 0px solid #f09; margin: 0px;
}

.titulillo {font-size: 1.7em; font-weight: 500; text-align: center; color: #444; padding: 0px; margin: 80px 0px 50px; line-height: 1.6em; display: inline-block; 
font-family:  'Display', "serif";}

.row2 {margin: 0 -5px; padding: 0px; min-width: 100%}

.row2:after {
  content: "";
  display: table;
  clear: both;
}
/* end 2 responsive columns */

/* 5 responsive columns */
.column5 {
  float: left;
  width: 20%;
  padding: 0 5px; border: 0px solid #f09; margin: 0px;
}

.row5 {margin: 0 -5px; padding: 0px; min-width: 100%}

.row5:after {
  content: "";
  display: table;
  clear: both;
}
/* end 5 responsive columns */



.add_inter {width: 100%; margin: 0px 0px 50px 0px; text-align: center; text-transform: uppercase; font-weight: 500; font-size: 1.5em; color: var(--main)}

.table_title {font-weight: 500; font-size: 1.1em; margin: 20px 0px 10px 0px}


/* error messages */
.errorlist li {color: #f09; visibility:hidden; font-size: 0.1em; line-height: 0em; padding: 0px; margin: 0px,}
.errorlist li ul li {color: var(--secondary); visibility:visible!important; font-size: 10em; line-height: 0.1em; top: -1em; position: relative}

/* summary */

.summary td { border-top: 1px solid #ccc; border-right: 1px solid #ccc; padding: 5px 10px; font-size: 1em; line-height: 2em; font-weight: 350}

.summary td:first-child {border-left:1px solid #ccc; font-weight: 450; background: #fafafa; white-space: nowrap}

.summary tr:last-child td {border-bottom:1px solid #ccc; font-weight: 550}

.summary a {color: var(--secondary)}

/* end summary */


/* INVOICE */
.invoice_page {width: 100%; min-height: 100vh; position: relative}

.invoice {width: 70%; height: auto; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%)}

.invoice hr { background: var(--main); height: 2px; margin: 10px 0px ; border: none}
.invoice p { margin: 10px 0px ; border: none; font-size: 0.8em; font-weight: 300; color: #777}
.invoice a {color: var(--main); font-weight: 350}

.invoice_table {width: 100%; padding: 0px; margin: 0px; text-align: left; border: 1px solid #ddd; font-size: 1.em; font-weight: 350;
  border-collapse: collapse;  }

.invoice_table tr {border-bottom: 1px solid #ddd ; margin: 0px; padding: 0px;  }
.invoice_table tr:last-child {border-bottom: none; margin: 0px; padding: 0px;  }

.invoice_table td {padding: 5px 10px}

.invoice_table td:first-child {border-right: 1px solid #ddd; width: 15%; white-space: nowrap; font-weight: 450}

.invoice_logo {display: block; height: 30px; margin: 0px 0px 10px 0px}

/* INVOICE */

.payment_table {width: 50%; padding: 0px; margin: 0px; text-align: left; border: 1px solid #ddd; font-size: 0.9em; font-weight: 350;
  border-collapse: collapse;  }

.payment_table tr {border-bottom: 1px solid #ddd ; margin: 0px; padding: 0px;  }
.payment_table tr:last-child {border-bottom: none; margin: 0px; padding: 0px;  }

.payment_table td {padding: 3px 5px}

.payment_table td:first-child {border-right: 1px solid #ddd; width: 15%; white-space: nowrap; font-weight: 450}


/********************************************general mobile settings**********************************************************/
@media all and (max-width: 64em), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    
.payment_table {width: 100%;  }
    
    
    
/* 4 columns */
.wrapperfour {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 10px 0px;
  width: 100%;
}
.boxfour {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.wrapperfour label {margin: 15px 0px 0px 0px; display: block}

.k1 {grid-row: 1;  grid-column: 1 }     

.k1a {grid-row: 1;  grid-column: 1} 
.k1b {grid-row: 2;  grid-column: 1} 
.k1c {grid-row: 3;  grid-column: 1 } 
.k1d {grid-row: 4;  grid-column: 1 } 

.k1aa {grid-row: 1;  grid-column: 1 } 
.k1bb {grid-row: 3;  grid-column: 1 } 

.k2 {grid-row: 5;  grid-column: 1 }     

.k2a {grid-row: 5;  grid-column: 1} 
.k2b {grid-row: 6;  grid-column: 1} 
.k2c {grid-row: 7;  grid-column: 1} 
.k2d {grid-row: 8;  grid-column: 1} 

.k2aa {grid-row: 5;  grid-column: 1 } 
.k2bb {grid-row: 7;  grid-column: 1 } 

.k2aaa {grid-row: 5;  grid-column: 1 } 
    
.k3 {grid-row: 9;  grid-column: 1 }     

.k3a {grid-row: 9;  grid-column: 1} 
.k3b {grid-row: 10;  grid-column: 1} 
.k3c {grid-row: 11;  grid-column: 1} 
.k3d {grid-row: 12;  grid-column: 1} 

.k3aa {grid-row: 9;  grid-column: 1 } 
.k3bb {grid-row: 11;  grid-column: 1 } 


.k4 {grid-row: 13;  grid-column: 1}     

.k4a {grid-row: 13;  grid-column: 1} 
.k4b {grid-row: 14;  grid-column: 1} 
.k4c {grid-row: 15;  grid-column: 1} 
.k4d {grid-row: 16;  grid-column: 1} 

.k4aa {grid-row: 13;  grid-column: 1} 
.k4bb {grid-row: 15;  grid-column: 1 } 
.k4aaa {grid-row: 13;  grid-column: 1}

.k5 {grid-row: 17;  grid-column: 1}     

.k5a {grid-row: 17;  grid-column: 1} 
.k5b {grid-row: 18;  grid-column: 1} 
.k5c {grid-row: 19;  grid-column: 1} 
.k5d {grid-row: 20;  grid-column: 1} 

.k5aa {grid-row: 17;  grid-column: 1} 
.k5bb {grid-row: 19;  grid-column: 1 } 


.k6 {grid-row: 21;  grid-column: 1}     

.k6a {grid-row: 21;  grid-column: 1} 
.k6b {grid-row: 22;  grid-column: 1} 
.k6c {grid-row: 23;  grid-column: 1} 
.k6d {grid-row: 24;  grid-column: 1} 

.k6aa {grid-row: 21;  grid-column: 1} 
.k6bb {grid-row: 23;  grid-column: 1 } 

.k7 {grid-row: 25;  grid-column: 1}     

.k7a {grid-row: 25;  grid-column: 1} 
.k7b {grid-row: 26;  grid-column: 1} 
.k7c {grid-row: 27;  grid-column: 1} 
.k7d {grid-row: 28;  grid-column: 1} 

.k7aa {grid-row: 25;  grid-column: 1} 
.k7bb {grid-row: 27;  grid-column: 1 } 

.k8 {grid-row: 29;  grid-column: 1}     

.k8a {grid-row: 29;  grid-column: 1} 
.k8b {grid-row: 30;  grid-column: 1} 
.k8c {grid-row: 31;  grid-column: 1} 
.k8d {grid-row: 32;  grid-column: 1} 

.k8aa {grid-row: 29;  grid-column: 1} 
.k8bb {grid-row: 31;  grid-column: 1 } 

.k9 {grid-row: 33;  grid-column: 1}     

.k9a {grid-row: 33;  grid-column: 1} 
.k9b {grid-row: 34;  grid-column: 1} 
.k9c {grid-row: 35;  grid-column: 1} 
.k9d {grid-row: 36;  grid-column: 1} 

.k9aa {grid-row: 33;  grid-column: 1} 
.k9bb {grid-row: 35;  grid-column: 1 } 

.k9aaa {grid-row: 9;  grid-column: 1 / span 2} 


.k10 {grid-row: 37;  grid-column: 1}     

.k10a {grid-row: 37;  grid-column: 1} 
.k10b {grid-row: 38;  grid-column: 1} 
.k10c {grid-row: 39;  grid-column: 1} 
.k10d {grid-row: 40;  grid-column: 1} 

.k10aa {grid-row: 37;  grid-column: 1} 
.k10bb {grid-row: 39;  grid-column: 1 } 


.k40 {grid-row: 81;  grid-column: 1}     

.k40a {grid-row: 81;  grid-column: 1} 
.k40b {grid-row: 82;  grid-column: 1} 
.k40c {grid-row: 83;  grid-column: 1} 
.k40d {grid-row: 84;  grid-column: 1}  

.k40aa {grid-row: 81;  grid-column: 1} 
.k40bb {grid-row: 82;  grid-column: 1 } 




.table_payers {width: 100%}    
    
    /* summary */

.summary td { border-top: 1px solid #ccc; border-right: 1px solid #ccc; padding: 5px 10px; font-size: 0.9em; line-height: 1.5em; font-weight: 350}

.summary td:first-child {border-left:1px solid #ccc; font-weight: 450; background: #fafafa; white-space:normal}

.summary tr:last-child td {border-bottom:1px solid #ccc; font-weight: 550}

.summary a {color: var(--secondary)}

/* end summary */
    
    
/* 2 responsive columns */
.column2 {
  float: left;
  width: 100%;
  padding: 0px 10px 5px 10px; border: 0px solid #f09;
  margin: 5px 0px;
}
.row2 {margin: 0 -10px;}

.row2:after {
  content: "";
  display: table;
  clear: both;
}
/* end 2 responsive columns */
    
    /* 5 responsive columns */
.column5 {
  float: left;
  width: 50%;
  padding: 0px 10px 5px 10px; border: 0px solid #f09; margin: 0px;
}

.row5 {margin: 0 -10px; padding: 0px; min-width: 100%}

.row5:after {
  content: "";
  display: table;
  clear: both;
}
/* end 5 responsive columns */
    
}
