@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'damm';
    src: url(fonts/damm.eot?90394520=);
    src: url(fonts/damm.eot?90394520=#iefix) format("embedded-opentype"),url(fonts/damm.woff2?90394520=) format("woff2"),url(fonts/damm.woff?90394520=) format("woff"),url(fonts/damm.ttf?90394520=) format("truetype"),url(/fonts/damm.svg?90394520=#damm) format("svg");
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "damm", sans-serif;
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: auto;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-logo-damm:before {
    content: '\e800';
}
/*colours*/
:root {
  --red: #EB0505; /*216, 38, 46*/
  --red90: #dc3c43; /*220, 60, 67*/
  --red70: #e4676d;  /*228, 103, 109*/
    
  --text: #4A4A4A; /*74, 74, 74*/
  --text90: #5c5c5c; /*92, 92, 92*/
  --text70: #808080;  /*128, 128, 128*/
  --text02: #B2B2B2;  
  --text03: #E1E1E1;  
    
  --error: #FC706C; /*252, 112, 108*/
  --error90: #fc7e7b; /*252, 126, 123*/
  --error70: #fd9b98;  /*253, 155, 152*/
    
  --standby: #FF9854; /*255, 152, 84*/
  --standby90: #ffa265; /*255, 162, 101*/
  --standby70: #ffb787;  /*255, 183, 135*/
    
  --green: #2FE392; /*47, 227, 146*/
  --green90: #44e69d; /*68, 230, 157*/
  --green70: #6debb3;  /*109, 235, 179*/
    
  --greyvlight: #f7f7f7;  /*247, 247, 247*/
  --greylight: #999999;  /*247, 247, 247*/
  --greymenu: #8b8b8b;  /*139, 139, 139*/
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

body, html, table, td, tr, a, ul, ol, li, div, h1, h2, h3, h4, h5, h6, p {margin: 0px; padding: 0px}

body { display:flex; flex-direction:column;min-height: 100vh;}

* {font-family:  Arial, sans-serif; color: var(--text); }
a {color: var(--red); text-decoration: none}
a:hover {text-decoration: underline; }

p { font-size: 0.9em}

input {border-radius: 0px}

.index-body {background: #fff; width: 100vw; height: 100vh; position: relative}

.index-login {width: 370px;  border: 0px solid #f09; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%)}

.index-login .logo {margin: 0px auto; font-size: 3rem; text-align: center;}
.index-login .logo .icon-logo-damm {color: var(--red);}
.index-login .login-form { margin: 50px 30px}

.login_butt {min-width: 99%!important;  margin: 0px auto; padding: 2px 20px!important; white-space: nowrap}

.login_error p {font-size: 0.85em; color: #444; margin: 10px 0px 0px 0px}
.login_error p b {font-size: 1.1em; color: var(--red)!important; line-height: 1.2em; margin: 0px}
.error_box {border: 1px solid var(--error) !important; padding: 0 10px; width: 100%}
.notice_ok {border: 1px solid var(--green); background: var(--green70); padding: 8px 12px; margin: 0px 0px 20px; display: inline-block}

.intro_frame {width: 60%;  border: 0px solid #f09; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%)}

.intro_frame h1 {font-size: 3.5em; color: var(--text); line-height: 2em; text-align: center; font-weight: normal; margin-bottom: 20px}
.intro_frame p {font-size: 1.2em; color: var(--text90); line-height: 1.3em; text-align: left; font-weight: normal; margin: 15px 0px 0px}

.intro_frame h4 {font-size: 1.1em; color: var(--text70)!important; line-height: 1.2em; text-align: center; font-weight: normal; margin-top: 20px; display: none}


.main_body {border: 0px solid #f09; width: calc(100% - 360px); margin: 60px 180px; flex:1;}
.title {font-size: 1.9em;  font-weight: bold; color: #000; letter-spacing: 1px; margin: 0px 0px 30px}
.subtitle {font-size: 70%; font-weight: bold; color: #000}
.subtitle a { font-weight: normal; color: var(--text02)}

.menu_process {font-size: 1.0em; color: #000; margin: 25px 0px 0px}

.menu_process span { color: #000; white-space: nowrap; margin-right: 6px; font-weight: bold}
.menu_process a { color: var(--text02); white-space: nowrap; margin-right: 6px}
.menu_process i {color: var(--red70)!important; font-size: 65%;  position: relative; bottom: 1px; margin: 0px 13px 0px 0px}

.nowrap {display: inline-block}

.small {font-size: 80%; font-weight: lighter}
.red {color: var(--red)}
.black{color: #000}

.inline-block {display: inline-block}
.display-block {display: block}
.inline-form {display: inline}
.is-hidden {display: none}
.normal-weight {font-weight: normal}
.text-uppercase {text-transform: uppercase}
.text-muted {color: #666}
.text-muted-light {color: #888}
.pad-v-5 {padding: 5px 0}
.pad-12 {padding: 12px}
.pt-6 {padding-top: 6px}
.pt-8 {padding-top: 8px}
.mb-8 {margin-bottom: 8px}
.my-8 {margin: 8px 0}
.mt-4 {margin-top: 4px}
.mt-5 {margin-top: 5px}
.mt-10 {margin-top: 10px}
.mt-12 {margin-top: 12px}
.mt-15 {margin-top: 15px}
.mt-16 {margin-top: 16px}
.max-600 {max-width: 600px}
.signature-box {border: 1px solid #ccc; background: #fff}
.signature-canvas {display: block; width: 100%; height: 180px; touch-action: none;}
.signature-image {display: block; width: 100%; height: auto;}
.summary-label-cell {white-space: nowrap; padding-right: 5px; width: 2%}
.row-height-20 {height: 20px}
.file-input-clean {border: none!important; font-size: 90%!important}
.file-link-right {float: right; position: relative; top: -25px}
.inline-select {display: inline-block; width: 120px!important; margin-left: 10px}
.inline-label-spaced {display: inline-block; margin-left: 20px}
.text-small-normal {font-size: 90%; font-weight: normal;}
.cookie-letter {font-weight: bold; font-size: 105%; color: var(--red); display: inline-block;}
.perm-disabled {opacity: 0.45}

span.circle { background: var(--text02);
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;font-size: 0.9em;
        color: #fff;
        display: inline-block;
        line-height: 1.3em;
        margin-right: 5px;
        text-align: center;
        width: 1.3em;
}
.redcircle {background: #000!important;}

.exp {font-size: 1.1em; margin: 70px 0px 0px}

/* forms items */

label { font-size: 1em; margin: 10px 0px 5px 0px; display: block}
.text_input {width: 100%; font-size: 1em; color: var(--text70); padding: 2px 0px; border: none; border-bottom: 1px solid var(--red); margin: 5px 0px; background: #fff; border-radius: 0px; }
.text_area {width: 100%; font-size: 1em; color: var(--text70); padding: 2px 0px; border: none; border: 1px solid var(--red); margin: 5px 0px; background: #fff; border-radius: 0px; resize: none}
.text_area:focus {outline: none!important; border: 1px solid var(--text03)}

.nolabel {margin-top: 30px}
.extra_margin {margin-top: 25px}

*:focus {
    outline: none!important; border-bottom: 1px solid var(--text03)
}

.dropdown {margin-left: 10px; position: relative; top: 8px}


/* 3 columns */
.wrapperthree {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 33.3% 33.3% 33.3% ;
  padding: 0px;
  margin: 30px 0px;
  width: 100%;
}

.boxthree {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
    text-align: left;
}

.t1a {  grid-row: 1;  grid-column: 1;}
.t1b {  grid-row: 1;  grid-column: 2; padding-left: 10px}
.t1c {  grid-row: 1;  grid-column: 3; padding-left: 10px}
.t1aa {grid-row: 1;  grid-column: 1/ span 2;}

.t2a {  grid-row: 2;  grid-column: 1;}
.t2b {  grid-row: 2;  grid-column: 2; padding-left: 10px}
.t2c {  grid-row: 2;  grid-column: 3; padding-left: 10px}

.t3a {  grid-row: 3;  grid-column: 1;}
.t3b {  grid-row: 3;  grid-column: 2; padding-left: 10px}
.t3c {  grid-row: 3;  grid-column: 3; padding-left: 10px}

.t3bb {  grid-row: 3;  grid-column: 2 / span 2; padding-left: 10px}

.t4a {grid-row: 4;  grid-column: 1 ; }
.t4bb {grid-row: 4;  grid-column: 2 ; }

.peu {color: var(--greylight); text-align: right; font-size: 80%}
.peu_left {color: var(--greylight); text-align: left; font-size: 80%}

.supdamm {font-size: 70%; color: var(--text70)}

/* 3 columns */

.pago_keblar {border: 0px solid #0f0; max-width: 50%; display:table; margin: 50px auto 20px; font-size: 0.85em}

/* items cards */
.item_card {  text-align: center; background: var(--red);border-radius: 10px; width: 70%; margin: 30px 15% 10px; padding-top: 30px    }
.card-int {height: 12em}
.item_card img {height: 10em;  filter:drop-shadow(1px 1px 2px rgb(0 0 0 / 0.4)); bottom: 0px}
.nevera {height: 9em!important; margin-top: 0.5em }

.item_card h3 {color: #fff; font-size: 1.4em; margin: 0px 0px 20px; font-weight: lighter; letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2)}
.item_card h3 i  {color: var(--greyvlight); margin: 0px ; font-size: 0.9em; padding: 0px}

.add_product {background: #fff!important; border: 1px solid #efefef}
.add_product img {filter:drop-shadow(1px 1px 2px rgb(0 0 0 / 0.0)); bottom: 0px}


.column3 .actions {text-align: center; margin: 20px 0px 0px}
.column3 .actions i {font-size: 1.2em; margin: 0px 5px; color: var(--red) }
.column3 .actions i:hover { color: var(--red70) }

.extra10 {padding-top:  30px!important}

.text02 {width: 30px!important}

.details {border: 0px solid #f09;width: 100%; margin: 10px 0%; padding: 0px}
.details h5 {color: #000; margin: 0px ; font-weight: lighter; white-space: nowrap; font-size: 1em; padding: 0px}
.details h5 i  {color: var(--text70); margin: 0px ; font-size: 0.9em; padding: 0px}
.details table {margin: 10px 10% 2px; width: 20%; border: 0px solid #f09}
.details table td {padding: 0px}
.details .item_input {color: var(--text70); line-height: 1em; background: none; border: none; border-bottom: 1px solid var(--red); text-align: center; font-size: 0.95em; margin-left: 10px; border-radius: 0px   }
.details .details_input {color: var(--text70); line-height: 1em; background: none; border: none; border-bottom: 1px solid var(--red); text-align: left; font-size: 0.95em; margin: 5px 0px; border-radius: 0px; padding: 2px 0px!important   }

.details .precio {text-align: center!important}

.details .plusminus  {display: inline-block; white-space: nowrap}

.details .plusminus i  {color: var(--text90); margin: 0px 5px }
.details .plusminus input  { margin: 0px!important}

/* end items cards */

.choices {font-size: 1.2em; position: relative; bottom: -5px}
.wrappertwo .choices label {
  margin: 0;
  position: initial;
}

/* edit items */
.edit_product {width: 100%; padding: 30px 0px    }

/* next-prev */
.damm_butt {min-width: 18em; border: none; padding: 4px 20px; font-size: 1.0em; background: var(--red); color: #fff; line-height: 2em; border-radius: 0.8em; cursor: pointer}

.as_a_butt {min-width: 18em; border: none; padding: 8px 40px; font-size: 1.0em; background: var(--red); color: #fff; line-height: 2em; border-radius: 0.8em; cursor: pointer}
.as_a_butt:hover {text-decoration: none; background: var(--red70)}

.damm_butt:hover {background: var(--red70)}
.button_next {float: right}
.button_mid {margin: 0px auto; display: block}
.prev_next {margin: 60px 0px }
.but_right { float: right}

.grey_butt {color: var(--text)!important; background: var(--text03)!important}
.grey_butt:hover {color: #fff!important; background: var(--red)!important}

.small_butt, input::-webkit-file-upload-button {border: none; padding: 4px 30px; font-size: 0.9em; background: var(--red); color: #fff; border-radius: 0.6em; line-height: 1.5em; cursor: pointer}
.small_butt:hover {background: var(--red70)}
.small_butt i {color: #fff;}

.periode_selected {border: none; padding: 4px 30px; font-size: 0.9em; background: var(--red); color: #fff; border-radius: 0.6em; line-height: 1.5em; display: inline-block}
/* end next-prev */

.big_form_wrap {width: 66.6%;border: 0px solid #ee00ee; margin: 30px 0px}
.section {font-size: 1.05em; color: #000; font-weight: bold; margin-top: 30px!important; margin-bottom: 10px!important}

/* 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 10px} 
.k1c {grid-row: 1;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k1d {grid-row: 1;  grid-column: 4; margin: 0px 0px 0px 10px} 

.k1aa {grid-row: 1;  grid-column: 1 / span 2} 
.k1bb {grid-row: 1;  grid-column: 3 /span 2; margin: 0px 0px 0px 10px} 

.k1aaa {grid-row: 1;  grid-column: 1 / span 3} 


.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 10px} 
.k2c {grid-row: 2;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k2d {grid-row: 2;  grid-column: 4; margin: 0px 0px 0px 10px} 

.k2aa {grid-row: 2;  grid-column: 1 / span 2} 
.k2bb {grid-row: 2;  grid-column: 3 /span 2; margin: 0px 0px 0px 10px} 


.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 10px} 
.k3c {grid-row: 3;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k3d {grid-row: 3;  grid-column: 4; margin: 0px 0px 0px 10px} 

.k3aa {grid-row: 3;  grid-column: 1 / span 2} 
.k3bb {grid-row: 3;  grid-column: 3 /span 2; margin: 0px 0px 0px 10px} 

.k3aaa {grid-row: 3;  grid-column: 1 / span 3} 


.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 10px} 
.k4c {grid-row: 4;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k4d {grid-row: 4;  grid-column: 4; margin: 0px 0px 0px 10px} 

.k4aa {grid-row: 4;  grid-column: 1 / span 2} 
.k4bb {grid-row: 4;  grid-column: 3 /span 2; margin: 0px 0px 0px 10px} 

.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 10px} 
.k5c {grid-row: 5;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k5cz {grid-row: 5;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k5d {grid-row: 5;  grid-column: 4; margin: 0px 0px 0px 10px} 
.k5dz {grid-row: 5;  grid-column: 4; margin: 0px 0px 0px 10px} 

.k5aa {grid-row: 5;  grid-column: 1 / span 2} 
.k5bb {grid-row: 5;  grid-column: 3 /span 2; margin: 0px 0px 0px 10px} 


.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 10px} 
.k6c {grid-row: 6;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k6cz {grid-row: 6;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k6d {grid-row: 6;  grid-column: 4; margin: 0px 0px 0px 10px} 
.k6dz {grid-row: 6;  grid-column: 4; margin: 0px 0px 0px 10px} 

.k6aa {grid-row: 6;  grid-column: 1 / span 2} 
.k6bb {grid-row: 6;  grid-column: 3 /span 2; margin: 0px 0px 0px 10px} 


.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 10px} 
.k7c {grid-row: 7;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k7d {grid-row: 7;  grid-column: 4; margin: 0px 0px 0px 10px} 

.k7aa {grid-row: 7;  grid-column: 1 / span 2} 
.k7bb {grid-row: 7;  grid-column: 3 /span 2; margin: 0px 0px 0px 10px} 

.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 10px} 
.k8c {grid-row: 8;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k8d {grid-row: 8;  grid-column: 4; margin: 0px 0px 0px 10px} 

.k8aa {grid-row: 8;  grid-column: 1 / span 2} 
.k8bb {grid-row: 8;  grid-column: 3 /span 2; margin: 0px 0px 0px 10px} 

.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 10px} 
.k9c {grid-row: 9;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k9d {grid-row: 9;  grid-column: 4; margin: 0px 0px 0px 10px} 

.k9aa {grid-row: 9;  grid-column: 1 / span 2} 
.k9bb {grid-row: 9;  grid-column: 3 /span 2; margin: 0px 0px 0px 10px} 

.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 10px} 
.k10c {grid-row: 10;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k10d {grid-row: 10;  grid-column: 4; margin: 0px 0px 0px 10px} 

.k10aa {grid-row: 10;  grid-column: 1 / span 2} 
.k10bb {grid-row: 10;  grid-column: 3 /span 2; margin: 0px 0px 0px 10px} 



.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 10px} 
.k40c {grid-row: 40;  grid-column: 3; margin: 0px 0px 0px 10px} 
.k40d {grid-row: 40;  grid-column: 4; margin: 0px 0px 0px 10px} 

.k40aa {grid-row: 40;  grid-column: 1 / span 2} 
.k40bb {grid-row: 40;  grid-column: 3 /span 2; margin: 0px 0px 0px 10px} 


/* end 4 columns */

.add_mat {text-align: right; margin: 20px 0px 0px; font-size: 1em}
.add_mat i {color: var(--red); margin-right: 5px}
.add_mat a {color: var(--text)}

.personalizar {margin: 0px 0px 0px 10px; position: relative; bottom: -8px}

.noarrow::-webkit-outer-spin-button,
.noarrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.noarrow {
  -moz-appearance: textfield;
}

/* tables */
.event_table {width: 100%; padding: 0px; margin: 10px 0px 0px; text-align: right; font-size: 0.95em; border-spacing: 0; border-collapse: collapse;}
.full_table {width: 100%;}
.full_table .half_col{width: 50%;}

.event_table th {background: var(--greyvlight); padding: 6px 8px 4px; margin: 0px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;
font-weight: bold; color: #000;}

.event_table td {background: #fff; padding: 6px 5px; margin: 0px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 0.9em; width: 12%; color: #666;}
.event_table .name {width: 52%}
.event_table td:first-child {color: #000}
.event_table td:last-child {width: 8%; white-space: nowrap}
.event_table tr:last-child td {border-top: 1px solid #ddd; font-size: 0.95em; color: #000}


.event_table i {color: var(--text70); margin: 0px 2px}
.event_table i:hover {color: var(--red)}

.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; text-align: left}
.event_table td:nth-child(2), .event_table th:nth-child(2), .event_table td:nth-child(3), .event_table th:nth-child(3) {  text-align: center}

.event_table td:last-child, .event_table th:last-child, .sin_total td:last-child, .sin_total th:last-child { text-align: center!important; white-space: nowrap}

.sol_table {width: 30%!important}
.sol_table td:last-child, .sol_table th:last-child  {text-align: right!important; white-space: nowrap}

.sin_total tr:last-child td {border-top: 0px solid #ddd!important} 
.sin_total th, .sin_total td {text-align: left!important}

/* end tables */

/* little table */
.little_table {width: 100%; padding: 0px; margin: 10px 0px 0px 0px; font-size: 0.95em; border-spacing: 0; border-collapse: collapse;}

.little_table td:first-child {background: var(--greyvlight); padding: 6px 8px 4px; margin: 0px; border: 1px solid #ddd; font-weight: bold; color: #000; text-align: left!important; width: 60%}
.little_table td:last-child { padding: 6px 8px 4px; margin: 0px; border: 1px solid #ddd;  color: #000; text-align: center; border-left: none}
.little_table tr:last-child td { border-top: 0px solid #f09!important }



/* foo table */
.foot_table {width: 100%; padding: 0px; margin: 10px 0px 0px 0px; font-size: 0.95em; text-align: left!important}

.foot_table td{ margin: 0px; border: 1px solid #ddd; border-top: none ;padding: 6px 8px 4px; min-width: 25%}

.foot_table th{ margin: 0px; border: 1px solid #ddd;padding: 6px 8px 4px; background: var(--greyvlight);min-width: 25% }


/* new tables */

	
#damm_table  {width: 100%; font-size: 0.95em;padding: 0px; margin: 10px 0px 0px; border-spacing: 0; border-collapse: collapse;}

#damm_table th {background: var(--greyvlight); padding: 6px 5px 4px; margin: 0px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;
font-weight: bold; color: #000; vertical-align: top;}

#damm_table td {background: #fff; padding: 6px 5px; margin: 0px; border-right: 1px solid #ddd; font-size: 0.9em; width: 12%; color: #666; border-bottom: 1px solid #eee;}
#damm_table .name {width: 52%}

#damm_table td:first-child, #damm_table th:first-child { border-left: 1px solid #ddd; text-align: left}


#damm_table td:first-child {color: #000}
#damm_table td:last-child {width: 8%; white-space: nowrap}
#damm_table tr:last-child td {border-top: 0px solid #ddd; font-size: 0.95em;}
 
 
#damm_table tr { border: 1px solid #ccc;}

#damm_table i {margin: 0px 5px}

#damm_table .nowshow {display: table-cell}

.left {text-align: left}
.center {text-align: center}
.center100 {text-align: center; border: 0px solid #f09}
.verycenter {text-align: center!important}
.right {text-align: right}

.top {vertical-align: top!important}

.peds:before {text-align: center!important}  
.peds {text-align: center!important}

.observaciones {background: #fff!important; border-left: none!important; font-size: 0.8em!important; color: #999!important; min-height: 2.5em}

.resumen, .resumen_pedidos {max-width: 66.6%!important;}
.resumen td {width: 50%!important}

/* end new tables */  

.pedidos_sort {border: 0px solid #f09; display: inline-block; float: right; font-size: 0.9em; max-width: 60%}

.pedidos_sort .selection {border: none; background: #fff; margin: 0px 5px 5px; color: #777; border-bottom: 0px solid var(--red); padding: 0px; font-size: 1.01em}

.pedidos_sort i.selected {color: var(--red); font-size: 1.2em}

.pedidos-title {float: left; display: block}
.pedidos-download {float: left; display: inline-block}
.nowrap-text {white-space: nowrap}


/* paginación */

.paginacion {border: 0px solid #f09; display: table; margin: 20px auto;}
.paginacion i, .paginacion p, .paginacion a {display: inline-block}

.paginacion i {font-weight: bold; font-size: 1.05em; color: var(--red); margin: 0px 5px}
.paginacion p {font-weight: bold; font-size: 1.0em; color: var(--text02); margin: 0px 5px}
.paginacion a {font-weight: normal; font-size: 1.0em; color: var(--red); margin: 0px 5px}

/* end paginación */


/* 2 columns */
.wrappertwo {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% ;
  padding: 0px;
  margin: 10px 0px;
  width: 100%;
}

 .wrappertwo_auto {
  display: inline-grid;
  grid-gap: 0px;
  grid-template-columns: auto auto;
  padding: 0px;
  margin: 10px 0px;
  width: auto;
}

.boxtwo {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
  border: 0px solid #ee0000;
}

.r1 {grid-row: 1;  grid-column: 1; margin-right: 10px}   
.r1b {grid-row: 1;  grid-column: 2; margin-left: 10px}  
.r2 {grid-row: 1;  grid-column: 2; margin-left: 10px}  
.r3 {grid-row: 2;  grid-column: 1; margin-right: 10px}   
.r4 {grid-row: 2;  grid-column: 2; margin-left: 10px}   
.r5 {grid-row: 3;  grid-column: 1; margin-right: 10px}   
.r6 {grid-row: 3;  grid-column: 2; margin-left: 10px}   

.rr1 {grid-row: 1;  grid-column: 1; }   
.rr2 {grid-row: 1;  grid-column: 2; text-align: right; position: relative}  

.rr5 {grid-row: 5;  grid-column: 1 / span 2}
.rr6 {grid-row: 6;  grid-column: 1 / span 2}
.rr7 {grid-row: 7;  grid-column: 1 / span 2}

.rr2 h5 {position: absolute; bottom: 0px; font-size: 1.2em; right: 0px; font-weight: normal; color: var(--text70)}

.wrappertwo label {margin: 15px 0px 0px 0px; display: block}

 .bigger  {font-size: 1.1em!important; display: inline-block; white-space: nowrap}
 .descarga  {font-size: 0.9em!important; display: inline-block; white-space: nowrap; margin-left: 15px}

/* end 2 columns */

.total_fact {border: 0px solid #f99; position:absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); text-align: center; white-space: nowrap}
.total_fact p {font-size: 1.4em; font-weight: normal}
.total_fact .amount {color: #000; font-weight: bold}

/* next prev */
.wrappernext {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% ;
  padding: 0px;
  margin: 10px 0px;
  width: 100%;
}
.boxnext {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
}
    
.n1a {grid-row: 1;  grid-column: 1; text-align: center}
.n1b {grid-row: 1;  grid-column: 2; text-align: center}
    
    
.nextbutt {min-width: 12em; border: none; padding: 4px 20px; font-size: 1em; background: var(--red); color: #fff; line-height: 2em; border-radius: 0.8em; cursor: pointer}
.nextbutt:hover {background: var(--red70)}

/* end next prev */

.address_tittle h4 {float: left; display: inline-block; font-size: 1.05em; font-weight: normal}
.address_tittle i {float: right; display: inline-block; font-size: 1.0em; font-weight: bold; top: 4px; position: relative; color: var(--red)}
.address_tittle .r1, .address_tittle .r2 {border-bottom: 0px solid var(--text70); padding-bottom: 4px}
.details_line {border: none; height: 1px; width: 100%; background: var(--text70)}


.condiciones ol {font-size: 0.75em; margin: 15px 0px 15px 1em; list-style-position: inside; }
.condiciones li {padding: 0px; margin: 5px 0px 0px; text-indent: -1em; }

.accept_tc {border: 0px solid #f09; font-size: 0.85em!important; line-height: 2em; margin: 20px 0px 0px}
.accept_tc a {color: var(--red)}
.accept_tc label {position: relative; bottom: -3px}

.accept_tc input[type="checkbox"]  { 
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  margin: 10px 10px 0px 0px;
  font: inherit;
  color: currentColor;
  width: 1.1em;
  height: 1.1em;
  border: 1px solid #ccc;
  transform: translateY(-0.075em);
cursor: pointer;
  display: grid;
  place-content: center;
}

.accept_tc input[type="checkbox"]::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--red);
}

.accept_tc input[type="checkbox"]:checked::before {
  transform: scale(0.75);
}

.disabled1 {opacity: 0.3; cursor: text}
.disabled {opacity: 0.9}  


/* 3 responsive columns */
.column3 {
  float: left;
  width: calc(33.3% - 20px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 10px 0px!important;
}



.row3 {margin: 0px -10px!important; padding: 0px!important; min-width: 100%}

.row3:after {
  content: "";
  display: table;
  clear: both;
}

/* ecommerce grid layout */
.row3.ecommerce-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin: 0px!important;
  padding: 0px!important;
}

.row3.ecommerce-grid:after {
  content: none;
  display: none;
}

.row3.ecommerce-grid .column3 {
  float: none;
  width: auto;
  padding: 0px!important;
  margin: 0px!important;
}

.row3.ecommerce-grid .item_card {
  width: 100%;
  margin: 0px;
  height: 220px;
  display: flex;
  flex-direction: column;
}

.row3.ecommerce-grid .item_card h3 {
  font-size: 1.1em;
  margin: 0px 0px 12px;
}

.row3.ecommerce-grid .item_card img {
  height: 7em;
}

.row3.ecommerce-grid .card-int {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row3.ecommerce-grid .actions {
  margin: 10px 0px 0px;
}

.column1 {
  float: left;
  width: calc(100% - 160px);
  padding: 0px 6%!important; border: 0px solid #f09; margin: 10px 0px!important;
}

/* end 3 responsive columns */

/*radios*/
.terms {background: #fff!important; margin: 0px 5px 0px 0px }
.radiocontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.radiocontainer .checkmark {
  position: relative;
  top: 4px;
  left: 0;
  height: 12px!important;
  width: 12px!important;
  background-color: #eee;
  border-radius: 50%;
  display: block;
    border: 2px solid #ccc;
    margin: 0px 5px 0px 0px
}

/* On mouse-over, add a grey background color */
.radiocontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radiocontainer input:checked ~ .checkmark {
  background: var(--red);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiocontainer:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radiocontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radiocontainer .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white; 
    display: block;
}


.smallertxt {font-size: 0.7em}

.image_input {border: none; background: #f09}

/* accions */

.acciones_drop {border: none; background: #fff; width: 110px; font-size: 0.9em; padding: 0px; margin: 0px}

 .confirmar  {
  font-family:"FontAwesome", sans-serif;
  font-size:194px;
}

.periodo {white-space: nowrap}
/* FAQ */
    

.faq  p { font-size: 1.1em; color: var(--text); line-height: 1.5em; margin: 10px 0px }

.faq_title {font-size: 1.15em; color: #000; font-weight: bold; margin-top: 40px}
.faq h6 {font-size: 1.1em; font-weight: normal; margin: 20px 0px 0px}
.faq ol {margin: 10px 0px 0px; font-size: normal; color: var(--text); list-style-position: outside; margin-left: 1em}
.faq ul {margin: 10px 0px 0px; font-size: normal; color: var(--text); list-style-position: outside; margin-left: 1em}
.faq li span { font-size: 1em; color: var(--text)}
.faq li p { font-size: 1.1em; color: var(--text); display:inline}
.faq .break { font-size: 1em;  line-height: 2em}
.faq li  { font-size: 1em; color: var(--red); margin-bottom: 10px}
.faq .sub  { font-size: 1em!important; color: var(--red); margin-bottom: 0px!important}
.faq  .dark  { font-size: 1em; color: var(--text70); margin-bottom: 5px}

.xtrabr {margin-bottom: 15px}
    
/* end FAQ */

/* FOOTER */

#footer {background: #fff}

.wrapper_foot {
  display: grid;
  grid-gap: 0px;
  grid-template-columns:  auto;
  padding: 20px 180px;
  margin: 20px 0px 0px;
  width: calc(100% - 360px);
    background: var(--red)
}
.box_foot {
  padding: 0px 0px;
  margin: 0px;
  text-align: center;
  border: 0px solid #eeff00;
}

.box_foot a, .box_foot p {text-align: center; display: inline-block; font-size: 0.8em; color: #fff; font-weight: normal}
.box_foot p {color: #fff; font-weight: normal}
.box_foot h6 {float: right; display: inline-block; font-size: 0.8em; color: #fff; font-weight: 300; bottom: -0.2em; position: relative}
.box_foot h5{float: left; display: inline-block; font-size: 0.8em; color: #fff; font-weight: 300; bottom: -0.2em; position: relative}

.fo1 {  grid-row: 1;  grid-column: 1; }
.fo2 {  grid-row: 1;  grid-column: 2; }
.fo3 {  grid-row: 1;  grid-column: 3; }
.fo4 {  grid-row: 1;  grid-column: 4; }
.fo5 {  grid-row: 1;  grid-column: 5; }
.fo6 {  grid-row: 1;  grid-column: 6; }
.fo7 {  grid-row: 1;  grid-column: 7; }

.fo8 {  grid-row: 1;  grid-column: 8;  text-align: right; }
.fo9 {  grid-row: 2;  grid-column: 1 / span 8; text-align: right; margin: 10px 0px 5px}

/* end FOOTER */


/********************************************bigger screen settings**********************************************************/
@media screen and (min-width: 1800px) {
    
.main_body {border: 0px solid #f09; width: calc(100% - 640px); margin: 60px 320px; }

}



/********************************************tablet**********************************************************/
@media screen and (max-width: 1300px) {
    
.main_body {border: 0px solid #f09; width: calc(100% - 20px); margin: 60px 10px; flex:1;}
    
/* 3 responsive columns */
.column3 {
  float: left;
  width: calc(50% - 20px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 10px 0px!important;
}

.row3.ecommerce-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}




.row3 {margin: 0px -10px!important; padding: 0px!important; min-width: 100%}

.row3:after {
  content: "";
  display: table;
  clear: both;
}
/* end 3 responsive columns */

    
}




/********************************************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) {
    
    
.main_body {border: 0px solid #f09; width: calc(100% - 20px); margin: 35px 10px; flex:1;}

.row3.ecommerce-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
    

.title {font-size: 1.5em;  font-weight: bold; color: #000; letter-spacing: 1px}
.subtitle {font-size: 70%; font-weight: bold; color: #000}
.subtitle a { font-weight: normal; color: var(--text02)}
    
.process_item {width: 100%; margin-bottom: 5px}
    
.button_next {display: block; width: 70%; margin: 0px 15%; padding: 0.3em 0.1em!important; font-size: 85%}

.intro_frame {width: 90%;  border: 0px solid #f09; position: relative; top: 0%; left: 5%; transform: none}

.intro_frame h1 {font-size: 3.5em; color: var(--text); line-height: 2em; text-align: center; font-weight: normal; margin-bottom: 20px}
.intro_frame p {font-size: 1.0em; color: var(--text90); line-height: 1.1em; text-align: left; font-weight: normal; margin: 10px 0px 0px}
    

.intro_frame h4 {font-size: 1.05em; color: var(--text70)!important; line-height: 1.2em; text-align: center; font-weight: normal; margin-top: 20px; display: block}
    
/* new tables */
    

/* form items */
    
.text_input {width: 100%; font-size: 1em; color: var(--text02); padding: 2px 0px; border: none; border-bottom: 1px solid var(--red); margin: 5px 0px; background: #fff; border-radius: 0px; display: table-cell}
    

.but_right { float: right; margin: 0px 10px 0px 0px}
	
	/* Force table to not be like tables anymore */
    #damm_table tr 
	#damm_table table, 
	#damm_table thead, 
	#damm_table tbody, 
	#damm_table th, 
	#damm_table td, 
	#damm_table tr { 
		display: block; 
		border: none;
	}
    #damm_table {width: calc(100% - 10px)!important}
 
	/* Hide table headers (but not display: none;, for accessibility) */
#damm_table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
#damm_table tr { border: 0px solid #ccc!important; }
    
    #damm_table .acciones {height: 17px!important}
	#damm_table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ccc!important; 
		position: relative;
		padding-left: 55%; 
		white-space: normal;
        width: 45%;
        height: auto;
        border-right: 1px solid #ccc!important;
	}
 
#damm_table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0px;
		left: 0px;
        padding: 0px 0px 0px 10px;
        line-height: 2.4em;
		white-space: nowrap;
        background: #eee;
        height: 100%;
        width: 45%;
        border-left: 1px solid #ccc!important;
        border-bottom: 1px solid #ccc!important; border-right:1px solid #ccc!important
}
    
.peds:before {width: 85%!important; text-align: left!important; font-weight: bold; background: #ddd!important}  
.peds {width: -15%!important; text-align: right!important;  }
.peds span {margin-right: 7%; font-weight: bold}
    
#damm_table td:first-child:before {background: #ddd!important ; font-weight: bold; border: none!important; border-right:1px solid #ccc!important; width: calc(45% + 1px); border-bottom: 3px solid #f09}
#damm_table td:first-child {background: #f9f9f9!important; width: calc(45% - 1px); font-weight: bold; border: none!important; border-left:1px solid #ccc!important; border-right:1px solid #ccc!important  }
    
    
#damm_table td:last-child {width: 45%; white-space: nowrap; border-bottom: 1px solid #eee}
    
#damm_table  tr:first-child td:first-child  {background: #f9f9f9!important; border-top: 1px solid #ccc!important; border-bottom: 1px solid #ccc!important}

#damm_table thead tr td {background: #f09!important}
    
#damm_table i {margin-right: 10px}
    
#damm_table .bgwhite td:before {background: #fff!important; border: none}

 
/*Label the data*/
#damm_table td:before { content: attr(data-title); white-space: normal!important; }

#damm_table .nowshow {display: none}

.observaciones {background: #fff!important; border-left: none!important; font-size: 0.8em!important; color: #999!important; min-height: 2.2; white-space: normal!important}
.observaciones:before { border-left: none!important; font-size: 1.1em!important; color: #666!important; min-height: 2.5em}


.left {text-align: left; vertical-align: text-top;}
.center {text-align: left}
.right {text-align: left}
    
    .top {vertical-align: top!important}
    
    .resumen, .resumen_pedidos {max-width: 100%!important;}
.resumen td {width: auto}

/* end new tables */   
    
    
.error_box {border: 1px solid var(--error) !important; padding: 0 10px; width: calc(100% - 20px)!important; margin: 0px}
    
/* 3 columns */
.wrapperthree {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 30px 0px;
  width: 100%;
}

.boxthree {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
    text-align: left;
}

.t1a {  grid-row: 1;  grid-column: 1;}
.t1b {  grid-row: 2;  grid-column: 1}
.t1c {  grid-row: 3;  grid-column: 1}
.t1aa {grid-row: 1;  grid-column: 1}

.t2a {  grid-row: 4;  grid-column: 1;}
.t2b {  grid-row: 5;  grid-column: 1}
.t2c {  grid-row: 6;  grid-column: 1}

.t3a {  grid-row: 7;  grid-column: 1;}
.t3b {  grid-row: 8;  grid-column: 1}
.t3c {  grid-row: 9;  grid-column: 1}

.t3bb {  grid-row: 8;  grid-column: 1}

.t4a {grid-row: 10;  grid-column: 1 }
.t4bb {grid-row: 11;  grid-column: 2  }

.peu {color: var(--greylight); text-align: right; font-size: 80%}
.peu_left {color: var(--greylight); text-align: left; font-size: 80%}

/* end 3 columns */

.pago_keblar {border: 0px solid #0f0; max-width: 100%; display:table; margin: 50px auto 20px; font-size: 0.85em}
    
.exp {font-size: 1.1em; margin: 20px 0px 0px}
    
/* items cards */
.item_card {  text-align: center; background: var(--red);border-radius: 10px; width: 100%; margin: 10px 0% 10px; padding-top: 10px    }
.card-int {height: 10em}
.item_card img {height: 9em;  filter:drop-shadow(1px 1px 2px rgb(0 0 0 / 0.4)); bottom: 0px}
.nevera {height: 8em!important; margin-top: 0.5em }

.item_card h3 {color: #fff; font-size: 1em; margin: 0px 0px 20px; font-weight: lighter; letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2)}
.item_card h3 i  {color: var(--greyvlight); margin: 0px ; font-size: 0.9em; padding: 0px}

    
.extra10 {padding-top:  20px!important}

.details {border: 0px solid #f09;width: calc(100% - 40px); margin: 0px 10px 50px; padding: 0px}
.details h5 {color: #000; margin: 0px ; font-weight: lighter; white-space: nowrap; font-size: 1em; padding: 0px}
.details h5 i  {color: var(--text70); margin: 0px ; font-size: 0.9em; padding: 0px}
.details table {margin: 10px 0px 2px; width: 20%; border: 0px solid #f09}
.details table td {padding: 0px}
.details .item_input {color: var(--text70); line-height: 1em; background: none; border: none; border-bottom: 1px solid var(--red); text-align: center; font-size: 0.95em; margin-left: 10px; width: 100%; border-radius: 0px    }

/* end items cards */
    

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

.r1 {grid-row: 1;  grid-column: 1; } 
.r1b {grid-row: 1;  grid-column: 1; } 
    
.r2 {grid-row: 2;  grid-column: 1; }  
.r3 {grid-row: 3;  grid-column: 1; }  
.r4 {grid-row: 4;  grid-column: 1; }  
.r5 {grid-row: 5;  grid-column: 1; }  
.r6 {grid-row: 6;  grid-column: 1; }  



.rr1 {grid-row: 2;  grid-column: 1; }   
.rr2 {grid-row: 1;  grid-column: 1; text-align: left; position: relative}  
    
    
.rr5 {grid-row: 15;  grid-column: 1 }
.rr6 {grid-row: 16;  grid-column: 1 }
.rr7 {grid-row: 17;  grid-column: 1 }

.rr2 h5 {position: absolute; bottom: 10px; font-size: 1.1em; left: 0px; font-weight: normal; color: var(--text70)}
    
/* end 2 columns */
    
.verbutt {margin-top: 20px; width: 50%}

 .descarga  {font-size: 0.9em!important; display: inline-block; white-space: nowrap; margin-left: 0px} 

.total_fact {border: 0px solid #f99; position:absolute; top: 50%; left: auto; transform: translateY(-50%) translateX(0%); text-align: center; white-space:normal; padding-bottom: 30px}
.total_fact p {font-size: 1.3em; font-weight: normal}
.total_fact .amount {color: #000; font-weight: bold; white-space: nowrap}
    
/* next prev */
.wrappernext {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% 50% ;
  padding: 0px;
  margin: 10px 0px;
  width: 100%;
}
.boxnext {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
}
    
.n1a {grid-row: 1;  grid-column: 1; text-align: left}
.n1b {grid-row: 1;  grid-column: 2; text-align: right}
    
    
.nextbutt {min-width: 9em; border: none; padding: 4px 20px; font-size: 0.9em; background: var(--red); color: #fff; line-height: 1.5em; border-radius: 0.8em; cursor: pointer}
.nextbutt:hover {background: var(--red70)}

/* end next prev */

    
.big_form_wrap {width: 100%;border: 0px solid #ee00ee; margin: 30px 0px}
    
.sol_table {width: 100%!important}
    
    /* 4 columns */
.wrapperfour {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 100% ;
  padding: 0px;
  margin: 10px 0px;
  width: 100%;
    position: relative
}
.boxfour {
  padding: 0px 0px;
  margin: 0px;
  text-align: left;
    
}

.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 } 

.k1aaa {grid-row: 1;  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 } 


.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 } 
.k3aaa {grid-row: 9;  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 } 
.k1aaa {grid-row: 1;  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} 
.k5cz {grid-row: 19;  grid-column: 1; width: 49%} 
.k5d {grid-row: 20;  grid-column: 1} 
.k5dz {grid-row: 20;  grid-column: 1; width: 49% ; position: absolute; right: 0px; top: -4.3em; } 

.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} 
.k6cz {grid-row: 23;  grid-column: 1; width: 49%} 
.k6d {grid-row: 24;  grid-column: 1} 
.k6dz {grid-row: 24;  grid-column: 1; width: 49% ; position: absolute; right: 0px; top: -4.3em;} 

.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 } 

.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 } 

/* end 4 columns */
    
/* 3 responsive columns */
.column3 {
  float: left;
  width: calc(100% - 20px);
  padding: 0px 10px!important; border: 0px solid #f09; margin: 10px 0px!important;
}

.column1 {
  float: left;
  width: calc(100% - 60px);
  padding: 0px 6%!important; border: 0px solid #f09; margin: 10px 0px!important;
}

.row3 {margin: 0px -10px!important; padding: 0px!important; min-width: 100%}

.row3:after {
  content: "";
  display: table;
  clear: both;
}
    
/* end 3 responsive columns */
    
    
/* FAQ */
    
.faq_title {font-size: 1.1; color: #000; font-weight: bold}  
    
    
/* end FAQ */
    

    
.pedidos_sort .selection {border: none; background: #fff; width: 45%}
    
.acciones_drop {border: none; background: #fff; min-width: 110px; font-size: 0.9em}
    
/* FOOTER */

#footer {background: #fff}

.wrapper_foot {
  display: grid;
  grid-gap: 0px;
  grid-template-columns:  16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
  padding: 20px 10px;
  margin: 20px 0px 0px;
  width: calc(100% - 20px);
    background: var(--red)
}
.box_foot {
  padding: 0px 0px;
  margin: 0px;
  text-align: center;
  border: 0px solid #000;
}

.box_foot a, .box_foot p {text-align: center; display: inline-block; font-size: 0.8em; color: #fff; font-weight: normal}
.box_foot p {color: #fff; font-weight: normal}
.box_foot h6 {float: right; font-size: 0.8em; color: #fff; font-weight: 300; bottom: -0.2em; position: relative; display: none}
.box_foot h5{float: left; font-size: 0.8em; color: #fff; font-weight: 300; bottom: -0.2em; position: relative;  display: none}

.fo1 {  grid-row: 1;  grid-column: 1 / span 2 ;  text-align: center}
.fo4 {  grid-row: 1;  grid-column: 3  / span 2 ;  text-align: center}
.fo3 {  grid-row: 1;  grid-column: 5  / span 2 ;  text-align: center}
.fo2 {  grid-row: 2;  grid-column: 1 / span 2 ;  text-align: center; margin: 10px 0px 5px}
.fo5 {  grid-row: 2;  grid-column: 5 / span 2 ;  text-align: center ; margin: 10px 0px 5px}
.fo6 {  grid-row: 3;  grid-column: 3  / span 2 ; margin: 20px 0px 0px; }
.fo7 {  grid-row: 3;  grid-column: 7; }

.fo8 {  grid-row: 1;  grid-column: 8;  text-align: right; }
.fo9 {  grid-row: 2;  grid-column: 1 / span 8; text-align: right; margin: 10px 0px 5px}

/* end FOOTER */
    
}

@media screen and (max-width: 640px) {
  .row3.ecommerce-grid {
    grid-template-columns: 1fr;
  }
}

.solicitar_material_nav_btn {
  border: none;
  padding: 0;
  background-color: transparent;
  font-size: 1.0em;
  
}
.solicitar_material_nav_btn:hover {
  cursor: pointer;
}
.solicitar_material_nav_btn span.circle {
  color: #fff;
  font-weight: bold;
}
.solicitar_material_nav_btn span {
  color: var(--text02);
  font-weight: normal;
}