/* #e1007a   #365779   */ 



@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300&display=swap');

:root {
  --pink: #e1007a;
  --blue: #365779;
  --lblue: #5e7994;
  --vlblue: #90abc6;
  --svlblue: #aec9e4;
  --main: #365779;
}

.left {text-align: left}
.center {text-align: center}
.right {text-align: right}


.ticket_table {border: 1px solid #ddd; margin: 20px 0px}
.ticket_table th {background: #fefefe; font-size: 0.9em; font-weight: 600!important; padding: 5px 5px; border-left: 1px solid #ddd; border-bottom: 1px solid #bbb; color: var(--blue)}
.ticket_table td {background: #fff; font-size: 0.9em; font-weight: 400!important; padding: 3px 5px; border-left: 1px solid #ddd;}


.ticket_table td i {color: var(--pink); margin: 0px 5px}
.ticket_table:hover {border: 1px solid #ddd}

.ticket_table .td_edicion {padding: 20px 0px!important; border: none!important}

.xtra_table .xtra {background: #fff; font-size: 0.9em; font-weight: 400!important; padding: 3px 5px; border-left: 1px solid #ddd; border-bottom: 1px solid #eee}
.xtra_table .xtra td { padding: 8px 5px; }
.xtra_table {min-width: 50%!important}

.xtra_table .select_bt {background: var(--pink); color: #fff; text-decoration: none; padding: 3px 10px; text-align: center; margin: 5px; font-weight: 300; border-radius: 4px}

.select-idiomas button i {color: #fff; margin-right: 5px}

.explanation3000 {font-size: 80%; font-weight: 100; transform: translateY(-10px); text-align: right}

.maineventbg {border: 0px solid #f70; background: #fff}
textarea {resize:none!important}

/*************** microsite event ****************/
.mainphoto {width: 100%; height: 350px; border: 0px solid #f90; background-position: center center!important; background-size: contain!important; background-repeat: no-repeat!important; margin: 0px 0px 30px}

.mainphoto_t2 {width: 100%; height: 350px; border: 0px solid #f90; background-position: center center!important; background-size: contain!important; background-repeat: no-repeat!important; margin: 0px 0px 30px}

.mainphoto_t1 {width: auto; height: 100%; border: 0px solid #f90; background-position: left  top!important; background-size: contain!important; background-repeat: no-repeat!important; margin: 0px 0px 30px}

.ministe_nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; z-index: 9909;  margin-bottom: 30px
}

.menuminisite {
  display: flex;border: 0px; padding: 0px;
    justify-content: space-around;
  list-style-type: none;
  margin: 0px;
    width: 100%
}

.menuminisite > li {
  margin: 0px 1px; border: 0px solid #222;
  overflow: hidden;flex-grow: 1; text-align: center; background: var(--lblue);
}
.menuminisite  .active {
  margin: 0px 1px; border: 0px solid #222;
  overflow: hidden;flex-grow: 1; text-align: center; background: var(--blue)!important;
}

.menuminisite >:first-child {margin-left: 0px!important}
.menuminisite >:last-child {margin-right: 0px!important}

.menuminisite > li a {color: #fff; text-decoration: none; width: 100%; display: block; padding: 5px 10px; font-size: 1.0em; font-weight: 500}
.menuminisite > li a:hover {text-decoration: none;}

.menuminisite-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menuminisite-toggle {  display: none;}

.menuminisite-button {
  display: block;
  position: absolute;
width: calc(100% - 10px); left: 0px; border: 0px solid #f89; 
    text-align: left;
    height: 40px; top: 0px;
    line-height: 40px;
    padding-left: 10px; color: #fff
}

.minisite_edit md-tabs-wrapper  {border: 0px solid #f90!important}
.minisite_t md-tab-item {cursor: pointer}

.minisite_edit [id^=tab-item-] {cursor: pointer}
.minisite_edit  md-tabs .md-tab {background: #ccc!important; margin-left: 1px!important; color: #222}

.minisite_edit  md-tabs .md-tab:hover {background: var(--pink); margin-left: 1px!important; color:#fff!important}

.minisite_edit .next_button {background: #efefef!important; height: 28px; width: 28px; border: none; border-radius: 28px; text-align: center; line-height: 22px; color: var(--pink)}

.minisite_edit .edit_event {border: 1px solid #ccc!important; margin-right: 10px}

.minisite_edit .smaller {font-size: 80%; color: #444; line-height: 1.2em; margin: 0px; padding: 0px; display: block}
.smaller {font-size: 80%}
.minisite_edit  md-tabs .md-tab b i {color: var(--pink)}
.minisite_edit  md-tabs .md-tab b  {color: #111; font-weight: 600}

.btn-blue {background: var(--blue)!important; color: #fff!important}


/* 2 columns */
.wrappertwo {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% ;
  padding: 0px;
  margin: 0px;
  width: 100%;
}
.wrappertwo_auto {
  display: inline-grid;
  grid-gap: 0px;
  grid-template-columns: auto auto;
  padding: 0px;
  margin: 0px;
  width: auto;
}
.boxtwo {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.k1aa {grid-row: 1;  grid-column: 1 / span 2} 
.k1a {grid-row: 1;  grid-column: 1; padding-right: 10px} 
.k1b {grid-row: 1;  grid-column: 2; padding-left: 10px} 

.k2aa {grid-row:2;  grid-column: 1 / span 2} 
.k2a {grid-row: 2;  grid-column: 1; padding-right: 10px} 
.k2b {grid-row: 2;  grid-column: 2; padding-left: 10px} 

.k3aa {grid-row: 3;  grid-column: 1 / span 2} 
.k3a {grid-row: 3;  grid-column: 1; padding-right: 10px} 
.k3b {grid-row: 3;  grid-column: 2; padding-left: 10px} 

.k4aa {grid-row: 4;  grid-column: 1 / span 2} 
.k4a {grid-row: 4;  grid-column: 1; padding-right: 10px} 
.k4b {grid-row: 4;  grid-column: 2; padding-left: 10px} 

.k5aa {grid-row: 5;  grid-column: 1 / span 2} 
.k5a {grid-row: 5;  grid-column: 1; padding-right: 10px} 
.k5b {grid-row: 5;  grid-column: 2; padding-left: 10px} 

.k6aa {grid-row: 6;  grid-column: 1 / span 2} 
.k6a {grid-row: 6;  grid-column: 1; padding-right: 10px} 
.k6b {grid-row: 6;  grid-column: 2; padding-left: 10px} 
/* end 2 columns */

.new_form h5 {font-size: 1.1em; font-weight: 500!important; margin: 20px 0px 5px!important; padding: 0px!important}
.new_form .form-control, .new_form .form-control:hover, .new_form .form-control:active {border-radius: 0px!important; border: none!important}

.new_form .form-control.ng-invalid {  border: 1px solid red !important;}

/* segmentacion */

:root {
  --level0: #c1c1c1;
  --level1: #cccccc;
  --level2: #dddddd;
  --level3: #eeeeee;
  --level4: #fefefe;
  --border: #bbbbbb;
}

.segmentation .box_wrapper {
    border: 1px solid var(--border);
    border-radius: 0px;
    padding: 0px;
    margin: 0px!important;
    border-top: none; border-right: none;
}
.segmentation .box_wrapper:last-child, .segmentation .modalidad_wrapper .inner:last-child, .segmentation .categoria_wrapper .inner:last-child, .segmentation .competicion_wrapper .inner:last-child {
    border-bottom: none!important;
}

.segmentation .box_wrapper .inner {padding: 9px; text-align: center}
.segmentation .box_wrapper .inner .trash {background: #fff; width: 26px; height: 26px; border-radius: 26px; border: none; text-align: center; color: var(--pink); display: inline-block}
.segmentation .add, .segmentation .add:hover, .segmentation .add:active {width: calc(95% - 40px)!important; display: inline-block; border: 1px solid var(--border)!important}

.segmentation .box_wrapper .inner .colour {display: inline-block; margin-top: 10px}
.segmentation .box_wrapper .inner input[type="color"] {display: inline-block; margin-top: 10px; width: 30px!important; border: 1px solid var(--border); height: 30px; }
.segmentation .box_wrapper .inner input[type="color"]:hover {border: 1px solid var(--border)}

.segmentation .modalidad_wrapper {
    display: grid;
    grid-template-columns: 1fr 4fr;
    border-right: 1px solid var(--border)
}
.segmentation .competicion_wrapper {
    display: grid;
    grid-template-columns: 1fr 3fr;
}
.segmentation .categoria_wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.segmentation .grupo_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.segmentation .modalities_header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin: 5px 0px 0px; padding: 0px!important; border-top: 1px solid var(--border)
}

.segmentation .modalities_titles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin: 30px 0px 0px; padding: 0px!important;
    text-align: center
}

.segmentation .modalities_header div {
    text-align: center;
    font-weight: bold;
    border: 1px solid var(--border);
    border-radius: 0px;
    height: 35px; line-height: 35px;
    border-top: none;
}
.segmentation .top_butt {width: 100%; border: none!important; background: none}

.segmentation .modalidad_background {
    background-color: var(--level0);
}
.segmentation .competicion_background {
    background-color: var(--level1);
}
.segmentation .categoria_background {
    background-color: var(--level2);
}
.segmentation .grupo_background {
    background-color: var(--level3);
}
.segmentation .lvl4_background {
    background-color: var(--level4);
}
.segmentation .season_add_button button {
    color: #000;
    background-color: #f2f2f2;
    border: none;
    width: 80%;
    margin: 5px 10%;
    height: 28px; line-height: 28px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1) 
}

.upf_name {display: inline-block; font-size: 1em; font-weight: 300; margin-left: 5px}
.upf_person_box, .upf_perfil_box {border: none; padding: 5px 10px; display: inline-block; background: #777; color: #fff; font-size: 0.75em; border-radius: 2px; text-transform: uppercase; cursor: pointer}

.upf_person_box.selected, .upf_perfil_box.selected {background: #c8102e;}

.container_org h3 {font-size: 1.2em!important; margin: 15px 0px 5px!important}
.container_org .selector {border: none!important; font-size: 1rem!important;font-weight: 400!important;line-height: 1.5em!important; padding: 4px!important; background: #F4F1F0!important; width: 40%}

.container_org h4 {font-size: 1.1em!important; margin: 15px 0px 5px!important; display: inline-block}
.container_org .delete {border: none!important; background: none!important; color: var(--red); font-size: 1.2em; display: inline-block}
.container_org .another {border: none!important; color: #333; font-size: 1.1em; display: inline-block; background: none!important; margin: 15px 0px 5px}

/* 3 columns */
.wrapperthree {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 33.3% 33.4% 33.3% ;
  padding: 0px;
  margin: 0px;
  width: 100%;
}
.boxthree {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.h1aa {grid-row: 1;  grid-column: 1 / span 2} 
.h1a {grid-row: 1;  grid-column: 1; padding-right: 10px} 
.h1b {grid-row: 1;  grid-column: 2; padding-left: 10px} 
.h1c {grid-row: 1;  grid-column: 3; padding-left: 10px} 

.h2aa {grid-row:2;  grid-column: 1 / span 2} 
.h2a {grid-row: 2;  grid-column: 1; padding-right: 10px} 
.h2b {grid-row: 2;  grid-column: 2; padding-left: 10px} 
.h2bb {grid-row: 2;  grid-column: 2 / span 2; padding-left: 10px} 
.h2c {grid-row: 2;  grid-column: 3; padding-left: 10px} 

.h3aa {grid-row: 3;  grid-column: 1 / span 2} 
.h3a {grid-row: 3;  grid-column: 1; padding-right: 10px} 
.h3b {grid-row: 3;  grid-column: 2; padding-left: 10px} 
.h3c {grid-row: 3;  grid-column: 3; padding-left: 10px} 

.h4aa {grid-row: 4;  grid-column: 1 / span 2} 
.h4a {grid-row: 4;  grid-column: 1; padding-right: 10px} 
.h4b {grid-row: 4;  grid-column: 2; padding-left: 10px} 
.h4c {grid-row: 4;  grid-column: 3; padding-left: 10px} 

/* end 3 columns */

/* 4 cols responsive */

.row4 {margin: 0px -10px!important; padding: 0px!important; min-width: calc(100% + 20px); border: 0px solid #f99}

.row4:after {
  content: "";
  display: table;
  clear: both;
}
.column4 {
  float: left;
  width: calc(25% - 40px); 
  padding: 0px 20px!important; border: 0px solid #f09; margin: 0px 
}

.column4 select {margin: 0px 0px 10px; display: block}
.column4 label {color: #fff!important; font-weight: bold}

.col4 {
  float: left;
  width: calc(25% - 20px); 
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px
}

/* end 4 cols responsive */

/* 5 cols responsive */

.row5 {margin: 0px -10px!important; padding: 0px!important; min-width: calc(100% + 20px); border: 0px solid #f99}

.row5:after {
  content: "";
  display: table;
  clear: both;
}
.col5 {
  float: left;
  width: calc(20% - 20px); 
  padding: 0px 10px!important; border: 0px solid #f09; margin: 0px; 
}

/* end 5 cols responsive */


/* QR reader */

.qr_scanner {}
.qr_scanner #reader {border: none!important}
.qr_scanner button {border: 1px solid var(--pink)!important; background: #fff; padding: 5px 10px; margin: 10px 0px; color: var(--pink)}
.qr_scanner #reader__dashboard_section_swaplink {margin: 10px 0px; color: var(--blue); text-decoration: none!important; display: block}
.qr_scanner #result a { background: var(--blue); padding: 5px 10px; margin: 10px auto; color: #fff; display: table}


/* end QR reader */

.mng_book_butt {border: none; position: absolute; z-index: 300; transform: translateY(30px) translateX(30px); background: #fff; color: var(--pink); padding: 5px 20px; box-shadow: 2px 2px 3px rgba(0,0,0,0.2)}
.mng_book_butt:hover {background: #fff; color: var(--pink);  box-shadow: 2px 2px 3px rgba(0,0,0,0.2)}

.table_button {border: none; background: none; margin-left: 5px; color: var(--pink)}

.pda_img {float: right; height: 350px; margin: 0px 0px 20px 40px}

.event_name {font-size: 2em!important; margin: 0px!important; padding: 0px!important} 

 /******************************************************************************************************/
@media all and (max-width: 768px), 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) {
    
 .xtra_table {min-width: 100%!important}   
    
/*************** microsite event ****************/
.mainphoto, .mainphoto_t1 {width: 100%; height: 220px!important; background-position: center center!important; margin: 0px 0px 30px;}

.mainphoto_t2 {width: 100%; height: 30vw; border: 0px solid #f90; background-position: center center!important; background-size: contain!important; background-repeat: no-repeat!important; margin: 0px 0px 10px}
    
.event_name {font-size: 1.8em!important; margin: 0px!important; padding: 0px!important}  
    
    
}

@media all and (max-width: 1268px) {
.ministe_nav {
background: var(--main); height: 40px; margin: 0px 0px 20px; padding: 0px; position: relative;
}
    
  .menuminisite-button-container {
    display: flex;
  }

  .menuminisite {
    position: absolute;
    top: 41px;
    margin: 0px 0px 0px;
    left: 0;
    flex-direction: column;
    width: calc(100%)    ;
    justify-content: center;
    align-items: center; background: var(--lblue)
  }

  #menuminisite-toggle ~ .menuminisite li {
    height: 0px;
    margin: 0;
    padding: 0px ;
    border: 0;
    width: 100%;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
    

  #menuminisite-toggle:checked ~ .menuminisite li {
    border-bottom: 1px solid #fff;
    height: 40px;
    padding: 0px;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); 
  }

  .menuminisite > li {
    display: flex;
    justify-content: center; text-align: left;
    margin: 0;
    padding: 0px 5px;
    width: 100%;
    background: var(--lblue); line-height: 40px; 
  }
    .menuminisite  .active {text-align: left; background: var(--lblue)!important}
    .menuminisite  .active::before {content: ">"; color: #fff; font-size: 0.8em;font-weight: 600; padding-left: 10px}

    
.menuminisite > li a {background: none; line-height: 30px; }

  .menuminisite > li:not(:last-child) {
    border-bottom: 0px solid #444;
  }
    
/* new elemuents */
.new_els h5 { font-size: 1em; font-weight: 400!important}    
.new_els .boxtwo .input_text, .new_els input[type=text] {border-radius: unset!important; width: 100%!important; background: red!important; box-sizing: border-box}

    
/* 2 columns */
.wrappertwo {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 0px;
  width: 100%;
}
    
.wrappertwo_auto {
  display: inline-grid;
  grid-gap: 0px;
  grid-template-columns: 100%;
  padding: 0px;
  margin: 0px;
  width: auto;
}
.boxtwo {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.k1aa {grid-row: 1;  grid-column: 1 } 
.k1a {grid-row: 1;  grid-column: 1} 
.k1b {grid-row: 2;  grid-column: 1} 

.k2aa {grid-row:3;  grid-column: 1 } 
.k2a {grid-row: 3;  grid-column: 1} 
.k2b {grid-row: 4;  grid-column: 1} 

.k3aa {grid-row: 5;  grid-column: 1 } 
.k3a {grid-row: 5;  grid-column: 1} 
.k3b {grid-row: 6;  grid-column: 1} 

.k4aa {grid-row: 6;  grid-column: 1 } 
.k4a {grid-row: 6;  grid-column: 1} 
.k4b {grid-row: 7;  grid-column: 1} 

.k5aa {grid-row: 8;  grid-column: 1 } 
.k5a {grid-row: 8;  grid-column: 1} 
.k5b {grid-row: 9;  grid-column: 1} 

.k6aa {grid-row: 10;  grid-column: 1 } 
.k6a {grid-row: 10;  grid-column: 1} 
.k6b {grid-row: 11;  grid-column: 1} 
/* end 2 columns */
    
    
/* 3 columns */
.wrapperthree {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 0px;
  width: 100%;
}
.boxthree {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.h1aa {grid-row: 1;  grid-column: 1 } 
.h1a {grid-row: 1;  grid-column: 1; padding-right: 0px} 
.h1b {grid-row: 2;  grid-column: 1; padding-left: 0px} 
.h1c {grid-row: 3;  grid-column: 1; padding-left: 0px} 

.h2aa {grid-row:4;  grid-column: 1 } 
.h2a {grid-row: 4;  grid-column: 1; padding-right: 0px} 
.h2b {grid-row: 5;  grid-column: 1; padding-left: 0px} 
.h2bb {grid-row: 5;  grid-column: 1; padding-left: 0px} 
.h2c {grid-row: 6;  grid-column: 1; padding-left: 0px} 
    
.h3aa {grid-row: 7;  grid-column: 1 } 
.h3a {grid-row: 7;  grid-column: 1; padding-right: 0px} 
.h3b {grid-row: 8;  grid-column: 1; padding-left: 0px} 
.h3c {grid-row: 9;  grid-column: 1; padding-left: 0px} 
    
.h4aa {grid-row: 10;  grid-column: 1 } 
.h4a {grid-row: 10;  grid-column: 1; padding-right: 0px} 
.h4b {grid-row: 11;  grid-column: 1; padding-left: 0px} 
.h4c {grid-row: 12;  grid-column: 1; padding-left: 0px} 

/* end 3 columns */
    
.row4 {margin: 0px -10px!important; padding: 0px!important; min-width: calc(100% + 20px); border: 0px solid #f99}
    
.column4 {
  float: left;
  width: calc(50% - 20px); 
  padding: 0px  20px!important; border: 0px solid #f09; margin: 0px 
}
    
}

.modal-backdrop.show {
    z-index: -1;
}