@font-face {
    font-family: "Gotham";
    src: url("../fonts/gotham_black_regular.eot");
    src: url("../fonts/gotham_black_regular.woff") format("woff"),
    url("../fonts/gotham_black_regular.woff2") format("woff2");
}


:root {
    color-scheme: light dark;
    scroll-behavior: smooth;
    --text-color-light: #000;
    --text-color-inverted-light: #fff;    
    --bkg-color-light: #fff;
    --text-color-dark: #eee;
    --text-color2-dark: #fff;       
    --bkg-color-dark: #121212;
    --bkg-title: #F5F5F3;
    --bkg-title2: #ebebeb; 
    --bkg-title3: #f9f9f9;
    --bkg-title-dark: #2a2a2a;  
    --bkg-title-dark2: #212121;    
    --acent-color: #1f768a;
    --acent-color-dark:#5E8897;
    --acent-color-gold:#97887a;
    --input-bkg-dark: #202020;
    --imput-border-dark: #424242;    
    --family: Arial, Helvetica, Sans-serif;
    --family2: Gotham, Arial, Sans-serif;
    --family3: "Arial Black";
    --btn-hover: #437587;
    --error-txt: red;
    --btn-admin-gold: #97887a;
    --btn-admin-gold-hover: #C2A159;
    --input-counter-bg: #E7E7E7;
    --input-counter-bg-dark: #181818;
    --links-inv: #c9c9c9;
    --bkg-bar: #e1e1e1;
    --menu-sep-dark: #101010;
    --menu-sep-light: #e1e1e1;    
}
* {
    font-family: Arial, Helvetica, sans-serif;
}

/* SCROLL BAR */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bkg-color-light); }
::-webkit-scrollbar-thumb { background: var(--bkg-bar); }
::-webkit-scrollbar-thumb:hover { background: var(--btn-hover); }
/*::-webkit-resizer{ background: var(--acent-color); color: var(--text-color-inverted-light)}*/
/* SCROLL BAR */

    
body{
    font-family: var(--family);
    padding: 0px 0px 0px 0px;
    margin: 0;
    background-color: var(--bkg-color-light);
    color: var(--text-color-light);

}
a{
    color: var(--text-color-light);
    text-decoration: none;
}
a:hover{
    color:var(--acent-color);
}
a.inv:hover{
    color:var(--links-inv);
}
a.dwl{text-decoration: underline;font-weight: bold}
header{
    width:100%;
    height: auto;
    background-color: var(--bkg-color-light);
}


.logo{width:490px}
h1 {
    font-family: var(--family); 
    font-weight: 500; 
    font-size: 33px; 
    line-height: normal; 
    color:var(--text-color-light);
    margin-top: 10px;
    margin-bottom: -31px;
}
h3{
    font-family: var(--family); 
    font-weight: 700; 
    font-size: 22px; 
    line-height: normal; 
    color:var(--text-color-light);
}
h3.tbl{
    font-family: var(--family2); 
    font-weight: 700; 
    font-size: 22px; 
    line-height: normal; 
    color:var(--text-color-light);
    text-transform: uppercase;
    margin: 0px 0px 0px 0px;
    display: inline-flex;
}
h3.tbl2{
    font-family: var(--family2); 
    font-weight: 700; 
    font-size: 24px; 
    line-height: normal; 
    color:var(--text-color-light);
    text-transform: uppercase;
    margin: 0px 0px 21px 0px;
    display: inline-flex;    
}
h3.tbl3{
    font-family: var(--family2); 
    font-weight: 700; 
    font-size: 24px; 
    line-height: normal; 
    color:var(--text-color-light);
    text-transform: uppercase;
    margin: 0px 0px 20px 0px;
    display: inline-flex;    
}
#id02 h3.tbl2, #id03 h3.tbl2, #id02 h3.tbl3, #id03 h3.tbl3{
    color: var(--acent-color-gold);
}
h3.inv{
    font-family: var(--family); 
    font-weight: 700; 
    font-size: 24px; 
    line-height: normal; 
    color:var(--text-color-inverted-light);    
}
h4{
    font-family: var(--family2); 
    font-weight: 700; 
    font-size: 18px; 
    line-height: normal; 
    color:var(--text-color-light);    
}
h4.fl_{margin:-15px 0px 0px 0px}

/* BOTONES */

.login{
    background-color: var(--acent-color);
    color:#fff;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    border:0;
    font-weight: bold;
}
.logout{
    background-color: var(--btn-admin-gold);
    color:#fff;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    border:0;
    font-weight: bold;
    float: right;
    width: auto;
}

.btn_ed{
    display: inline-flex;
    width: auto;
    padding: 8px 15px;
    background-color: var(--btn-admin-gold);
    color: #fff;
}
.btn_ed_g{
    width: auto;
    padding: 10px 35px;
    background-color: var(--btn-admin-gold);
    color: #fff;
    font-size: 18px;
}

.btn2_ed{
    width: 41px;
    height: 41px;
    padding: 2px 10px;
    background-color: var(--btn-admin-gold);
    color: #fff;
    font-size: 27px;
    font-weight: 900;
    margin-right: 10px;
    align-self: center;
    line-height: 0px
}
.cr_i{width: auto;font-size: 16px;}
.cr_f{margin-right: 10px}
.cr_f2{margin-left: 10px}
.cr_f div{margin-top: -3px}
.cr_adv{padding: 2px 10px 2px 56px !important}
.btn_adv, .btn_adv2, .btn_adv2m{
    width: auto;
    height: 41px;
    padding: 2px 10px;
    background-color: var(--acent-color);
    color: #fff;
    font-size: 14px;
    line-height: 15px;
    font-weight: 900;
    margin-left: 10px;
    align-self: center;   
}

.login:hover{ background: var(--btn-hover); }
.logout:hover{ background: var(--btn-admin-gold-hover); }
.btn_ed:hover, .btn2_ed:hover, .btn_ed_g:hover{ background-color: var(--btn-admin-gold-hover); }
.tx_gold{ color: var(--acent-color-gold) !important; }
label.tx_gold{ margin-right: 5px; }
.input_gold, .select_gold{ border: 0px solid var(--acent-color-gold); }
.input_gold{font-size: 16px;width:100% !important}
.select_gold{ width: -webkit-fill-available;width: -moz-available; margin-bottom: 20px;font-size: 16px;padding: 20px; background-color: var(--bkg-title); resize: none; }
 #order_by .select_gold{
    background-color: var(--input-counter-bg);
 }
#year1, #year2, #year1m, #year2m{
    padding:8px;border:0;margin:3px 0px 3px 0px;
    background-color: var(--input-counter-bg);
}


/* FIN BOTONES */


.menu ul, .menu_mini ul{list-style: none;}
.menu_mini ul{margin: auto}
.menu ul li, .menu_mini ul li{
    display: inline-grid;
    text-transform: uppercase;
    color: var(--text-color-light);
    font-family: var(--family2);
    font-style: normal;
    font-weight: 900;
    font-size: 14px;
    line-height: 20px;
    margin: 2px 20px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.title, .ctn{width: 100%;height: auto;}
.title div#pagi2{
    margin: 0px 16px 16px 16px;
    background-color: var(--bkg-title);
    padding: 10px 20px;
    transition: all 300ms ease-in-out;
}
.title h2{
    font-family: var(--family2);
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    line-height: 32px;
    text-transform: uppercase;
    color: var(--acent-color);
}

/* CONTAINERS */

.head-left{width:700px;text-align: left;float: left}
.head-right{width:auto;text-align: right;float: right;vertical-align: top}
.menu{width:100%;height: auto; text-align: center;margin-top: -60px;display: inline-grid;}
.menu_mini{width:100%;height: auto; align-self: center;display: inline-flex;}

.container{padding:16px}
.container2{padding:0px 16px;display: -webkit-flex;display: flex;}
.container3{padding:0px 16px 30px 16px;display: -webkit-flex;display: flex;justify-content: center;}
.container4{margin:30px 12%;}
.container5{padding:60px 12%;background-color: var(--bkg-color-light);}
.ctn01{width:40%;float: left;background-color:var(--bkg-title);padding: 0px;}
.ctn02{width:60%;float: right;background-color:var(--bkg-title);margin-left:16px;padding: 100px 7%;}

.ctn_left{width:35%;background-color:transparent;padding: 0px;}
.ctn_center{width:35%;background-color:transparent;margin-left:16px;padding: 10px;}
.ctn_right{width:30%;background-color:transparent;margin-left:16px;margin-right: 10.72%;padding: 10px;}

.ctn_events{
    background-color: var(--bkg-color-light);
    height: auto;
    padding: 30px;
    margin-bottom: 40px;
}
.ctn_comments{
    background-color: var(--bkg-color-light);
    height: auto;
    padding: 30px;
    margin-bottom: 10px;    
}
.ctn_source{
    min-height: 200px;
    padding: 0px;
    margin-bottom: 118px;
}
.min{min-height: 80px;opacity: .5}
.min2{min-height: 200px;opacity: .5}
.min3{min-height: 150px;opacity: .5}
.min4{min-height: 50px;opacity: .5}
.ctn{min-height: 600px}
.ctn_sources{
    background-color: var(--acent-color);
    height: auto;
    padding: 30px;
    color: var(--text-color-inverted-light);
    overflow-x: auto;
    margin-bottom: 10px;
}
.ctn_claras_comments{
    background-color: var(--bkg-color-light);
    height: auto;
    padding: 50px;
    margin-bottom: 20px;
}
.ctn_order{flex-wrap: wrap}
.ctn_claras_comment{margin-bottom: 80px;}
.ctn_rows{display: -webkit-flex;display: flex;margin-bottom: 8px;/*align-items: center;*/}
.ctn_td1{width:30%;padding: 10px;color: var(--acent-color);font-family: var(--family3)}
.ctn_td2{width:70%;background-color:var(--bkg-title);padding: 13px 10px 10px 10px; color: var(--text-color-light);}

.ctn_td3{width:50%;background-color:var(--bkg-color-light);padding: 14px;margin-right:10px; font-weight: 500}
.ctn_td4{width:50%;background-color:var(--acent-color);padding: 14px;vertical-align: top; color: var(--text-color-inverted-light);font-weight: 500 }

.ctn_m2{ display: -webkit-flex;display: flex; }
.ctn_m2_1, .ctn_m2_2{ width:50%;margin:20px;align-self: center; }
.ctn_m3{ width:100%;margin-bottom: 5px }
.ctn_m3_1 .input_gold, .ctn_m3_2 .input_gold { width: 100% }
.ctn_pad01{margin-bottom:80px}

.ctn_m2_1{opacity: .4}
.ctn_com_ed{ width: 100%;height: auto;margin-bottom: 0px;margin-top: 10px }

.ctn_mini{display: -webkit-flex;display: flex;align-content: center;width: 100%;background-color: var(--bkg-color-light);padding: 0px}
.ctn_mini2{display: inline-flex;align-items: center;margin-left: 16px}
.logo_mini{width: 320px;/*height: fit-content;*//*margin: auto;*/}
h2.mini{font-size: 24px;margin: 7px 20px 0px 20px;color: var(--text-color-light);font-family: var(--family);font-weight: 500;}

.hide{display: none;}
.show{display: -webkit-flex;display: flex}
.show2{display: grid}

.redalert{background-color:#440101;color:red;padding:5px 10px;text-align: center;position: fixed;top: 0;width: 100%;z-index: 1000;margin: auto}
.redalert2{background-color:#440101;color:red;padding:5px 10px;}
.greenalert{background-color:darkgreen;color:lightgreen;padding:5px 10px;text-align: center;position: fixed;top: 0;width: 100%;z-index: 1000;margin: auto}
.title_2{padding: 100px 20%;padding-bottom: 100px;display: -webkit-flex;display: flex;align-items: center;}
.title_2 .txt02{margin: auto}
.pd01{margin-bottom: 60px}
.pd02{padding-top: 2px}

.db{
    background: url(../img/bg-recordings.svg) 0px 360px no-repeat;
    background-size: cover;
}

.ctn_adv_search{ 
    position:absolute;
    top:138px;
    right:16px;
    background-color:var(--bkg-title);
    width:640px;
    height:auto;
    padding:42px; 
    z-index: 2;
    -webkit-box-shadow: -8px 4px 8px 0px rgba(0,0,0,0.13);
    -moz-box-shadow: -8px 4px 8px 0px rgba(0,0,0,0.13);
    box-shadow: -8px 4px 8px 0px rgba(0,0,0,0.13);   
}
.ctn_ord{ 
    position:absolute;
    top:138px;
    right:25%;
    background-color:var(--bkg-title);
    width:270px;height:auto;
    padding:40px; 
    z-index: 2;
    -webkit-box-shadow: -8px 4px 8px 0px rgba(0,0,0,0.13);
    -moz-box-shadow: -8px 4px 8px 0px rgba(0,0,0,0.13);
    box-shadow: -8px 4px 8px 0px rgba(0,0,0,0.13);   
}
form#search_av, form#search_avm, form#search_avm_c, form#search_av_c{ width:100% }
#search_av .search, #search_av_c .search{width:82%}
#search_avm .searchm, #search_avm_c .searchm{width:100%}
.ctn_checks{ padding-left:20px;width:100%;display: inline-flex }
.checks_l{ width:20%;font-size: 13px;display: table-cell}
.checks_r{ width:20%;font-size: 13px;display: table-cell}
.checks_r2{ width:35%;display: -webkit-flex;display: flex;flex-wrap: wrap;align-content: flex-start;justify-content: flex-start;align-items: center;margin-top: -20px;font-size: 14px;}
.checks_r3{ width:25%;display: -webkit-flex;display: flex;flex-wrap: wrap;align-content: flex-start;justify-content: flex-start;align-items: center;margin-top: -20px;font-size: 14px;}
label[for=events]{font-size: 14px;}
.fy1{padding-left:0px;width:50%;margin-top:5px}
.ajw{width: 100%}
.clo, .clo2{    
    width: 20px;
    height: 20px;
    position: absolute;
    top: 45px;
    right: 16px;
    cursor: pointer;
}
.ctn_search{
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;    
}

/* END CONTAINERS */



.img01{ width: 100% }
.txt01{
    font-family: var(--family);
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    text-align: justify;
}
.txt01 a, .txt01 a:visited{
    text-decoration: underline;
}
.txt02{
    font-family: var(--family);
    font-style: normal;
    font-weight: 500;
    font-size: 1em;
    line-height: 1.3em;
    margin-top: 180px;
    text-align: justify;
}    
.btn-svg{
    margin-top:10px;
    margin-bottom: 10px;
}
.btn2-svg{
    margin-top:10px;
    margin-bottom: 10px;
} 
.btn-svg, .btn2-svg{
    width: 450px;       
}
.c_off{
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    opacity: 0;       
}
.card {
    width: 100%;
    position: relative;
    display: -webkit-flex;
    display: flex;
    margin-top:100px;
}
.card2 {
    width: 100%;
    position: relative;
    display: -webkit-flex;
    display: flex;
    margin-top:20px;
}
.card_l{
    width: 50%;
    height: auto;
    align-self: flex-start;
    padding-top: 30px;
}
.card_lb{
    align-self: center;
    background-color: var(--acent-color);
    padding: 5px 38px;
    margin-right: 20px;
}
.card_lc{
    align-self: flex-start;
}
.card_l2{
    width: 60%;
    height: 150px;
    float: left;
    vertical-align: middle;
    text-align: center;
    background-color: var(--acent-color);
    padding-top: 30px;
}
.card_r{
    width:50%;
    height: auto;
    align-self: flex-start;
    padding-top: 30px;
}
.card_rb{
    align-self: center;
    background-color: var(--acent-color);
    padding: 5px 38px;
    margin-right: 0px;
}
.card_rc{
    align-self: flex-start;
}
.card_r2{
    width:40%;
    float:right;
    vertical-align: middle;
    padding-top: 10px;
}
.card_lc ul, .card_rc ul {
  list-style: none; /* Remove default bullets */
}

.card_lc ul li::before, .card_rc ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: var(--acent-color); /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}
.card_lb:hover {
    background-color: var(--btn-hover); 
}
footer{
    width: 100%;
    height: 100px;
    /*position:fixed;
    bottom: 0px;*/
    background-color: #fff;
    padding-top: 80px;
}
#pagi{
    transition: all 500ms ease;    
}
#pagi2{display: -webkit-flex;display: flex;}
.pagi{
    position:fixed;
    top: 0px; 
    z-index: 999;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.13);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.13);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.13);    
    transition: all 500ms ease;    
}
.sticky{
    position:fixed;
    top: 0px; 
    z-index: 999;    
}
.cont-f{
    padding: 20px;
    text-align: center;
    display: flex;
    align-content: center; 
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
}
.img-f{width:200px}


/* MODALS */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000;
    background-color: rgba(31, 118, 138, .28);
    padding-top: 60px;
}
.modal2 {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: -10%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
    padding-top: 0px;
}
.modal2-alt{
    display: none;
    position: fixed;
    z-index: 1000;
    left: -1px;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
    padding-top: 0px;    
}
.modal3{
    display: none;
    position: fixed;
    z-index: 1000;
    right: -50%;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bkg-color-light);
    padding-top: 0px; 
    -webkit-box-shadow: -8px 0px 10px 0px rgba(0,0,0,0.17);
    -moz-box-shadow: -8px 0px 10px 0px rgba(0,0,0,0.17);
    box-shadow: -8px 0px 10px 0px rgba(0,0,0,0.17);    
}
.modal-content {
    background-color: var(--bkg-color-light);
    margin: 15% auto 0 auto;
    border: 1px solid var(--bkg-color-light);
    width: 440px;
    -webkit-box-shadow: 0px 0px 36px 2px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 0px 36px 2px rgba(0,0,0,0.33);
    box-shadow: 0px 0px 36px 2px rgba(0,0,0,0.33);
}
.modal-content2 {
    background-color: var(--bkg-color-light);
    margin: 18% auto 0 auto;
    border: 0;
    width: 720px;
    height: 620px;
    overflow-y: auto;    
    -webkit-box-shadow: 0px 0px 36px 2px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 0px 36px 2px rgba(0,0,0,0.33);
    box-shadow: 0px 0px 36px 2px rgba(0,0,0,0.33);
}
.modal-content2-alt {
    background-color: var(--bkg-color-light);
    margin: 0;
    border: 0;
    width: 565px;
    height: 100%;
    overflow-y: auto;    
    -webkit-box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.33);
    box-shadow: 0px 0px 36px 0px rgba(0,0,0,0.33);
}
.modal-content3 {
    margin: 0;
    border: 0;
    width: 50%;
    height: 100%;
    overflow-y: auto;    
    -webkit-box-shadow: -8px 0px 36px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: -8px 0px 36px 0px rgba(0,0,0,0.33);
    box-shadow: -8px 0px 36px 0px rgba(0,0,0,0.33);
}
/* The close button (x)*/
.close {
    position: absolute;
    right: 25px;
    top: 0px;
    color: var(--text-color-inverted-light);
    font-size: 22px;
    font-weight: bold;
    background-color: var(--acent-color);
    border-radius: 50%;
    padding: 5px;
    width: 25px;
    height: 25px
}
.close_gold {
    position: absolute;
    right: 25px;
    top: 0px;
    color: var(--text-color-inverted-light);
    font-size: 22px;
    font-weight: bold;
    background-color: var(--btn-admin-gold);
    border-radius: 50%;
    padding: 5px;
    width: 25px;
    height: 25px
}
.close:hover, .close:focus { color: var(--text-color-inverted-light); background-color: var(--btn-hover); cursor: pointer; }
.close_gold:hover{ background-color: var(--btn-admin-gold-hover);cursor: pointer; }

/* Add zoom animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s;
}
.animate2{
    -webkit-animation: animateleft 0.6s;
    animation: animateleft 0.6s;    
}
.animate3{
    -webkit-animation: animateleft3 0.4s;
    animation: animateleft3 0.4s;    
}

@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0);}
to {-webkit-transform: scale(1);}
}
@keyframes animatezoom {
from {transform: scale(0);}
to {transform: scale(1);}
} 

@-webkit-keyframes animateleft {
    from{-webkit-transform: translateX(-100%);}
    to{-webkit-transform: translateX(0%);}    
}
@keyframes animateleft {
    from{transform: translateX(-100%);}
    to{transform: translateX(0%);}
}
@-webkit-keyframes animateleft3 {
    from{-webkit-transform: translateX(100%);}
    to{-webkit-transform: translateX(0%);}    
}
@keyframes animateleft3 {
    from{transform: translateX(100%);}
    to{transform: translateX(0%);}
}



/* Full width input fields */
input[type=text]:not(.input_c), input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 0px solid var(--acent-color);
    box-sizing: border-box;
    background-color: var(--bkg-title);
}
#id02 input[type=text]:not(.input_c), #id03 input[type=text]{
    width:60%;
    border: 0px solid var(--acent-color-gold);
}
/* Set a style for all buttons */
button {
    font-family: var(--family); 
    font-weight: 900;
    background-color: var(--acent-color);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
button:hover {
    /*opacity: 0.7;*/
    background-color: var(--btn-hover);
}
/* For the cancel button */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}
img.avatar {
    width: 40%;
    border-radius: 50%;
}
.container-modal {
    padding: 40px;
}
.container-modal label b{
    font-family: var(--family2);
    text-transform: uppercase;
    font-weight: 900;
    font-size:14px;
}
.container-modal button{ margin-top:26px }
span.psw {
    float: right;
    padding-top: 16px;
}  
.thin{font-weight: 500}
.error{color:var(--error-text);font-size: 16px}
.error_x{color:var(--error-text);font-size: 14px}
.l_in{ display: -webkit-flex;display: flex; }
.user{float: left; margin-right: 10px;width: 37px}

.bar1_db{ width: 35%;margin-right: 20px}
.bar11_db{flex-wrap: wrap}
.bar2_db{ justify-content: flex-start;width: 55%;display: inline-flex; }
.bar3_db{ padding:20px;/*margin-right:50px;*/width: 126px;align-self: center; }
.bar4_db{ width: 65%;display: flex;display: -webkit-flex;justify-content: flex-end;align-items: center;}
.b1{margin: 0px 0px 0px 0px}

.opc{opacity: .2}
.input_c{background-color: var(--input-counter-bg);width: 100px;color: var(--acent-color);font-weight: bold;font-size: 16px;padding: 10px 20px;margin-right: 20px;border: 0}

.source_s{margin-bottom: 10px}
.container4 {font-size: 18px; color:var(--acent-color);}
.source_s2{height: 150px}
.source_u{margin: 0;padding: 0px 0px 0px 18px;}

.tb01_head td{
    background-color: var(--acent-color) !important;
    padding: 12px;
    color: var(--text-color-inverted-light);
    border-bottom: 0px solid var(--text-color-inverted-light);
    font-weight: 900;
    line-height: 18px;
}
.tb01_rows td{background-color: var(--bkg-title);padding: 10px;border-bottom: 0px solid var(--text-color-inverted-light);}
.tb01{width:100%;border: 0}
.extra td{padding: 20px; opacity: .4}

#paginate li{display: table-cell;padding: 5px}
.temp{width:95%;overflow-x: scroll}

.ant{margin-right: 10px}
.ant:hover, .sig:hover{cursor: pointer}

#search{ 
    width: 260px;  
    margin: 0;
    padding: 0;
    height: 58px;
    align-self: center;
    display: inline-grid;
}
.search, .searchm{
    padding: 11px 50px 11px 11px;
    margin: 8px 0;
    width: 260px;
    border: 0px solid var(--acent-color);
    box-sizing: border-box;
    background-color: var(--input-counter-bg);
    color: var(--text-color-light);
    font-size: 16px;
}
.lupa{
    margin-top: -40px;
    margin-left: 88%;
}
.lupa:hover{cursor: pointer}
input:focus, textarea:focus, select:focus, select:hover, select:active {
    outline: none;
    border-color: var(--input-counter-bg);
}
select{
    /*border:0px solid var(--bkg-title) !important;*/
    outline:none !important;
    /*-webkit-tap-highlight-color: transparent;*/
    box-sizing: content-box;
    box-shadow: inset 0 0 0 1px var(--bkg-title) !important; 
    -webkit-box-shadow: inset 0 0 0 1px var(--bkg-title) !important;
}
select:focus{
    outline: none !important;    
    box-shadow: inset 0 0 0 5px #fff ; 
    -webkit-box-shadow: inset 0 0 0 5px #fff ; 
}
*:focus {
    outline: none !important;    
}
select:active, select option:checked{
    border: 0 !important;
    outline: none !important;  
    box-sizing: content-box;
}
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
/*.ant_lp:before{
    content: url('../img/lupa1_w.png');
    position: absolute;
    right: 134px;
    top: 102px;
}*/
.ant_lp img{width:18px;margin-right: 5px;}
.ant_lp{padding: 0;display: inline-flex;}

/* CORRECCIONES */  
.cr02{padding: 10px}
.cr03{margin: 0 !important}
.cr04{margin-right: 10px;display: inline-grid}
.cr05{margin-top: 5px;width: -webkit-fill-available; background-color: var(--bkg-color-light);margin-bottom: 0;}
.cr06{display: flex !important;flex-wrap: none;width: -webkit-fill-available;}
/*.cr07{display:-webkit-flex;display: flex; flex-wrap: wrap;align-items: flex-start;justify-content: flex-end; }*/
.cr07{height: 187px;overflow-y: auto;overflow-x: hidden;}

.cr08{height: 240px;overflow-y: auto;padding-right: 20px}
.cr08b{height: 465px;overflow-y: auto;padding-right: 20px}
.cr08c{height: 450px;overflow-y: auto;padding-right: 20px}
.cr08d{height: 220px;overflow-y: auto;padding-right: 20px}
.cr09{margin-bottom: 0;width: -webkit-fill-available; }
.cr09b{margin-bottom: 0;width: -webkit-fill-available; background-color: var(--bkg-color-light) !important;}
.cr10{margin-top: 10px}
.cr11{border-radius: 50%}
.cr12{width: 33%}
.cr13{margin-bottom: 40px;}
.cr14{padding: 20px 20px;}
.cr15{
    float: right;
    margin-left: 5px
}
.cr16{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.cr17{display: none}
.cr18{margin-top:80px}
.cr19{display: flex;display: -webkit-flex;flex-wrap: wrap;}
.cr20{margin:0 !important}
.cr21{width: 100%}
.cr22{display: inline-flex;align-items: flex-start;margin-right: 50px;margin-bottom: 0}
.cr23{display: flex;display: -webkit-flex;overflow-x: auto;}
.cr24{width: 300px;margin-bottom: 5px;}
.cr25{width:130px !important;}
.cr26{margin:0px 8px}
.cr27{flex-wrap: wrap}
.cr28{margin: 0 0 5px 0;}
.cr29 td{background-color: var(--acent-color-gold) !important;}
.cr30{margin-bottom: 20px}
.cr31{margin-bottom: 5px}
.cr32{margin-top: 80px !important;}
.cr35{width:30%}
.cr36{width:30%}
.cr37{width:40%}
.cr38{margin-bottom: 80px;min-height: 220px;}
.cr39{margin-bottom: 0px}
.cr40{min-height:inherit}
.cr41{background-color: var(--acent-color) !important;}
.cr42{min-height: 220px}
.cr42b{min-height: 220px; background-color: var(--bkg-color-light); padding: 0px 1px 1px 1px}
.cr43{padding:60px 18%;}
.cr44{margin:30px 0 0 0;padding: 10px 20px}
.cr45{padding: 10px 20px}
.cr46{padding: 0px 0px 60px 0px}
.cr47{height: 380px;overflow-y: auto;overflow-x: hidden;padding-right: 10px}
.cr48{height: 240px;overflow-y: auto;overflow-x: hidden;padding-right: 10px;margin-bottom: 80px;}
.cr50{margin-bottom:80px}
.tb01_head.cr49 td, .tb01_rows.cr49 td{width:33.33%}

h3.tbl2.cr46{margin-top:80px}

.ord{width: 41px;margin-right: 10px;cursor: pointer}
.ord:hover{ content: url('../img/order_by_hover.svg'); }
.sch1{flex-wrap: wrap;}

.highlight{
    /*background-color: green !important;
    color: lightgreen !important;*/
    color: #1f768a !important;    
}
h2.sch2{font-size: 24px}

.n_res{
    width: 800px;
    margin: 0px auto;
    text-align: center;
    padding: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}
.n_res h2{z-index: 1;}
.n_res_img{
    width: 50%;
    z-index: 1;
}

.tb01 tr:nth-child(odd) td{
    background-color: var(--bkg-title2);
}
.tb01 tr:nth-child(even) td{
    background-color: var(--bkg-title3);
}
.edt{width: 41px;margin-right: 10px; cursor: pointer}
.edt2{width: 41px;margin-left: 10px; cursor: pointer}
.edt:hover, .edt2:hover{ content: url('../img/edit-hover.svg'); }
.tle{display: flex;display: -webkit-flex;margin-bottom: 20px;align-items: center;}
#search_av .search, #search_avm .searchm, #search_avm_c .searchm, #search_av_c .search{padding: 11px 11px 11px 11px;}

/* nav mobile menu */
.container_mov, .container_mov_m{display: none;width: 100%;}
.menu_m{width: 41px;cursor: pointer}
.menu_m2{width: 41px;cursor: pointer}
.cr_{display: flex;display: -webkit-flex;width: 100%}
.cr_m1{display: flex;display: -webkit-flex;flex-wrap: wrap;width:40%;margin-left: 0}
.cr_m1b{margin-left:10px}
.cr_m2b{margin-left:10px}
.cr_m2{display: flex;display: -webkit-flex;flex-wrap: wrap; width:60%;margin-top: 0px;}
.cr_m3{margin-top:15px}
.cr_m3 .search{padding: 11px 11px 11px 11px;}
#search_avm .cr_m3 .search, #search_avm_c .cr_m3 .search{width: 100%;margin-bottom: 15px;}
h3.tbl2.cr_m4{font-size: 20px;margin-bottom: 0;}
.cr_m5{margin-left: 0}

.container-modal.cr_m6 ul li{
    margin: 0px 0px 0px -40px;
    display: list-item;
    font-size: 18px;
    border-bottom: 1px solid var(--menu-sep-light);
    padding: 20px 2px;    
}
.ed_{display: flex;display: -webkit-flex;background-color: var(--bkg-title);}

/* media */
@media (prefers-color-scheme: dark) {
      /* defaults to dark theme */
  body, header, footer, .modal-content, .modal-content2, .ctn_events, .modal-content2-alt {
    background-color: var(--bkg-color-dark);
    color: var(--text-color-dark);
  }
  .modal3{ background-color: var(--bkg-title-dark); }
  .container5{
    background-color: var(--bkg-color-dark);
  }
  .title div#pagi2, .ctn01, .ctn02, .tb01_rows td, .ctn_td3, .cr40{
    background-color: var(--bkg-title-dark);
  } 
  .tb01 tr:nth-child(odd) td{
    background-color: var(--bkg-title-dark2);
  }
  .tb01 tr:nth-child(even) td{
    background-color: var(--bkg-title-dark);
  }    
  .menu ul li, .menu_mini ul li, .close, a{ color: var(--text-color-dark); } 
  .close:hover, .close:focus{ color: var(--text-color2-dark); }    
  footer img{
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    filter: invert(100%);
  }
  .logo, .lupa, .logo_mini{
    -webkit-filter: brightness(100);
    -moz-filter: brightness(100);
    filter: brightness(100);            
  }
  .lupa{
    -webkit-filter: brightness(70);
    -moz-filter: brightness(70);
    filter: brightness(70);
    opacity: .3;
  }    
  input[type=text], input[type=password], .search, .searchm, input[type=text]:not(.input_c) {
    border: 0px solid var(--imput-border-dark);
    background-color: var(--input-bkg-dark);
  } 
  .select_gold:not(.select_gold.cr45), .input_gold, .input_c{
    background-color: var(--input-bkg-dark) !important;    
  }
    
  .modal-content{
    border: 1px solid var(--imput-border-dark);
  }
  #id02 input[type=text], #id03 input[type=text]{ border: 0px solid var(--imput-border-dark) }    
  .ctn_td2, .ctn_comments, .ctn_claras_comments{ background-color: var(--bkg-title-dark) }    
   h1, h4, h3.tbl, h3.tbl2, .ctn_td2, .search, .searchm, .select_gold, h2.mini{
    color: var(--text-color-dark);
  } 
  #id02 h3.tbl2, #id03 h3.tbl2{ color: var(--acent-color-gold); }
  /*.title h2, .ctn_td1, a:hover{color: var(--acent-color);}    */
  .db{
    background: url(../img/bg-recordings-dark.svg) 0px 360px no-repeat;
    background-size: cover;
  }  
  .title div#pagi2 {
    margin: 0px 16px 16px 16px;
    background-color: var(--bkg-title-dark);
    padding: 10px 20px;
  }
  .input_c, .search, .searchm{background-color: var(--input-counter-bg-dark) !important;} 
  .tb01_head td, .tb01_rows td{
    border-bottom: 0px solid var(--bkg-color-dark);
  } 
  .container4 { color:var(--text-color-dark);}
    
  input:focus, textarea:focus, select:focus, select:hover; select:active {
    outline: none;
    border-color: var(--input-bkg-dark);
  }
  select{
    box-shadow: inset 0 0 0 1px var(--bkg-title-dark) !important; 
    -webkit-box-shadow: inset 0 0 0 1px var(--bkg-title-dark) !important;        
  }
  #year1, #year2, #year1m, #year2m{
    background-color: var(--input-counter-bg-dark);      
  }
  #order_by .select_gold{
    background-color: var(--input-counter-bg-dark);    
  }
  .ctn_mini{ background-color: var(--bkg-color-dark); } 
    
  .min{min-height: 80px;opacity: .3}
  .min2{min-height: 200px;opacity: .3}
  .min3{min-height: 150px;opacity: .3}
  .min4{min-height: 50px;opacity: .3} 
  .extra td{padding: 20px; opacity: .3}
    
  .modal-content2{
    border: 1px solid var(--acent-color-gold);
    /*background-color: #161616;*/
  }
  .modal-content2-alt{
    border-right: 1px solid var(--acent-color-gold);        
  }    
  .ctn_adv_search, .ctn_ord{ background-color: var(--bkg-title-dark); }  
  .cr09b{background-color: var(--input-bkg-dark) !important;}
  .cr42b{background-color: transparent; }  
  .container-modal.cr_m6 ul li{border-bottom: 1px solid var(--menu-sep-dark);}   
  .ed_{background-color: var(--bkg-title-dark);}    
    
  ::-webkit-scrollbar { width: 12px; }
  ::-webkit-scrollbar-track { background: var(--bkg-color-dark); }
  ::-webkit-scrollbar-thumb { background: var(--bkg-title-dark); }
  ::-webkit-scrollbar-thumb:hover { background: var(--btn-hover); } 
  ::-webkit-resizer{ background: var(--acent-color-gold); }    
      
}

/* responsive */
@media(min-width:1025px){
    #nav_m{display: none !important}
}
@media(max-width: 1520px){
    .card{flex-wrap: wrap}
    .card_l, .card_r{width:100%}
    .card_lb{margin-right: 0}
}

@media(max-width: 1480px){
    #pagi2{ flex-wrap: wrap; }
    .hi01{display: none}
    .bar1_db{display: inline-flex;width: 100%;margin-right: 0}
    .bar4_db{width:100%;}
    .bar2_db{width:66.5%}
    h4.fl_{margin: 7px 0px 0px 20px}
    .ctn_right{margin-right: 0}
}
@media(max-width: 1280px){
    .ctn_left{display: none}
    .ctn_center{width:45%;padding-left: 0;margin-left:0}
    .ctn_right{width: 55%;padding-right:0}
    .ctn_events{padding-left:0}
    .container4 {margin: 30px 16px;}
    .container5 {padding: 60px 16px;margin: 30px 0px;}
    .menu_mini ul li{margin: 2px 10px}
}
@media(max-width:1200px){
    .container_mov_m{display: inline-flex}
    .container_mov_m{display: inline-flex}
    .ctn_mini2, .menu_mini, .cr16{display: none}
    .h-left-m{
        display: inline-flex;align-items: center;width:50%;justify-content: flex-start;margin-left: 16px
    }
    .h-right-m{
        display: inline-flex;
        width:50%;
        justify-content: flex-end;
        align-items: flex-start;
        margin: 10px;
    } 
    .bar1_db{flex-wrap: wrap;margin-bottom: 10px}
    .b1{width: 100%}
    h4.fl_ { margin: 0px 0px 0px 0px; }    
}
@media(max-width: 1024px){
    .container2{flex-wrap: wrap;padding: 0px 16px}
    .ctn01, .ctn02{width:100%}
    .ctn02{margin-left: 0px;margin-top:16px}
    .title_2{padding: 100px 16px;}
    .title h2:not(h2.mini){font-size: 26px;line-height: 28px;}
    .card{flex-wrap: no-wrap}
    .card_l, .card_r{width:50%}
    .card_lb{margin-right: 20}    
    .title div#pagi2{ margin: 0 !important; }
    .container_mov{display: inline-flex}
    .container{display: none}
    .container3, .container2{margin-top:16px}
    .ctn_desk_mini{display: none}
    .h-left{
        width:80%;
        display: table;
        margin-left: 16px;
        margin-bottom: 25px;
        margin-top: 10px;
    }
    .h-right{
        width:20%;
        display: inline-flex;
        justify-content: flex-end;
        align-items: flex-start;
        margin-top: 10px;
        margin-right: 16px;
    }
    h1{
        margin-top: 10px;
        margin-bottom: 0px;
    }
    .container-modal ul{list-style-type: none;margin-top: -40px;margin-bottom: 80px}
    .container-modal button { margin-bottom: 30px; }
    .l_in{margin-top:-66px;margin-bottom: 80px;}
    .login{top:-66px;position: relative}
    .ctn_audio_docs{overflow-x: auto}
    input[type=checkbox], input[type=radio] { transform: scale(1.3);margin-bottom:10px }
    .cr_m6{padding: 40px 20px 40px 30px}
    .tb01_head td{padding: 8px 50px;}
}
@media(max-width: 980px){
    /*.h-left-m{flex-wrap: wrap;align-items: flex-start;}
    h2.mini{margin: 0px;}*/
}
@media(max-width: 941px){
    .card{flex-wrap: wrap}
    .card_l, .card_r{width:100%}
    .card_lb{margin-right: 0}
    .container3{flex-wrap: wrap}
    .ctn_center{width: 100%;margin-right: 0;padding: 0}
    .ctn_right{width:100%;margin-left: 0;padding: 40px 0 0 0}
    .ctn_events { padding-left: 30px; }
    .ctn_source{ min-height: unset}
    #search, .btn_adv{display: none}
    .ord{margin-right: 0}
    .bar2_db { width:94%;margin-right:10px }
    .bar1_db{margin-bottom: 10px}
    .title div#pagi2{padding:10px}
    .bar4_db { justify-content: center;/*flex-direction: row-reverse;*/ }
    .ctn_claras_comments{padding: 30px}
    .ctn_ord{right: 0 !important;}
    #adv_s{display: none !important}
    .cr47, .cr48{height: auto;overflow-y: inherit;overflow-x: inherit;}
}
@media(max-width:862px){
    .cr_{flex-wrap: wrap}
    .cr_m1, .cr_m2, .cr_m1b{width: 100%}
}
@media(max-width:768px){
    .modal-content{width: 95%;margin: 35% auto 0 auto;}
}
@media(max-width: 640px){
    .logo{ width: 100% }
}
@media(max-width: 580px){
    .modal3{ right: -30%; }
    .modal-content3 { width: 70%; }
    .ctn02{ padding: 40px 25px; }
    .h-left-m{flex-wrap: wrap}
    h2.mini{margin: 7px 0px 0px 0px;}
    .cr37{overflow-x: auto}
    .modal-content2-alt{width: 100%}
}
@media(max-width: 480px){
    .container2{padding: 0px 16px}
    .ctn02{margin-top:16px;}
    .title_2{padding: 100px 16px;} 
    .title div#pagi2{ margin: 0px 16px 16px 16px; }  
    .h-left{ margin-left: 16px; }
    .h-right{ margin-right: 16px; }
    .ctn_events{padding: 0}
    .card_lb{text-align: center;padding: 5px 15px;}
    .ed_{position: fixed;bottom: 0;right: 0;width: 100%;justify-content: flex-end;}
}
@media(max-width:414px){
    .ctn_ord{top: 118px !important;}    
}
@media(max-width:412px){
    .modal-content{width: 95%;margin: 45% auto 0 auto;}
    .title h2:not(h2.mini) {
        font-size: 24px;
        line-height: 26px;
    }
}
@media(max-width: 390px){
    .modal3{ right: -20%; }
    .modal-content3 { width: 80%; }
    .logo_mini{width:100%;}
    .h-left-m{width:80%}
    .h-right-m{width:20%}
}
@media(max-width:360px){
    .input_c{margin-right: 10px;width: 60px}
    .cr_m6{padding: 40px 20px 40px 20px}
    .ctn_ord{width: 81%}
}