:root {
--ColorStandarTitle:#386f96;
--ColorStandarTitleFont:#ffffff;
--ColorStandarTitle2:#225982;
--ColorStandarTitleFont2:#e6e6e6;
--ColorStandarTitle3:#214369;
--ColorStandarTitleFont3:#ffffff;
--ColorBackCards:#FFF;
--ColorColorFontCards:#333;
--ColorBackMenuG:#1A5784;
--ColorMenuSelectedOver:#069;
--ColorMenuSelectedOverFont:#FFF;
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background:#FFF;
font-family:Tahoma, Geneva, sans-serif;
font-size:15px;
}
.contenedor{
width: 100%;
margin:auto;
display:grid;
grid-gap: 1px;
grid-template-columns:200px 1fr;
grid-template-areas:"logo header"
"menu content"
"menu footer";
}
hr{
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
margin:3px;
}
.contenedor .header{
background:#FFF !important;
display:grid;
grid-template-columns:0.2fr 1fr;
grid-area: header;
height:3em;
border-bottom:1px solid #FC3;
}
.contenedor .header .header_left{
visibility:hidden;
display:flex;
align-items:center;
margin-left:5px;
}
.contenedor .header_right{
display:flex;
align-items:center;
justify-content:right;
margin-right:10px;
font-size:0.8em;
font-weight:bold;
}
.contenedor  .logo{
grid-area: logo;
background:#333;
height:3em;
z-index:10500;
display:flex;
align-items:center;
justify-content:center;
}
.contenedor .content{
grid-area: content;
padding:5px;
}
.contenedor .menu{
grid-area: menu;
z-index:1500;
background:var(--ColorBackMenuG);
width:200px;
position: absolute;
top: 3em;
bottom: 0;
}
.contenedor .footer{
grid-area: footer;
position:fixed;
bottom:0px;
height:30px;
width:100%;
background:#333;
padding-left:210px;
font-size:0.8em;
color:#CCC;
}
.contenedor .menu ul{
list-style:none;
}
.contenedor .menu ul li{
display:block;
line-height:30px;
}
.contenedor .menu ul li a{
text-decoration:none;
color:#CCC;
border-bottom:1px dotted #999;
padding:8px;
display:block;
}
.contenedor .menu ul li a:hover{
background:var(--ColorMenuSelectedOver);
color:var(--ColorMenuSelectedOverFont);
}
.card{
display:flex;
background:#333;
width:30%;
height:250px;
margin:12em auto;
border-radius:20px;
opacity:0.9;
}
.card .card_left{
width:30%;
display:flex;
align-items:center;
justify-content:center;
background:#000;
}
.card .card_right{
width:70%;
padding: 0.5em;
border-radius:20px;
}
.card .card_title{
font-weight:bold;
text-align:center;
opacity:1 !important;
color:#CCC;
font-size:1em;
border-bottom:1px dotted #CCC;
}
.card .form_field{
display:flex;
padding:0.5em;
}
.card .form_field .input-append{
display:flex;
justify-content:center;
align-items:center;
color:#666;
background:#FFF;
margin-left:-22px;
height:28px !important;
margin-top:4px;
}
.card input{
border-radius: 0.4rem;
font-size:1em;
border:1px solid #999;
line-height:1.5em;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding:0.3em 2em 0.3em 0.8em;
background:#FFF;
width:100%;
}
input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
line-height: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
select {
word-wrap: normal;
}
select.form-control[size],
select.form-control[multiple] {
height: auto;
}
textarea.form-control {
height: auto;
}
textarea {
overflow: auto;
resize: vertical;
}
@media screen and (min-width: 788px){
body{
}
.contenedor .menu{
display:block !important;
}
}
@media screen and (max-width: 768px){
body{
background:#FFF;
}
.contenedor{
width: 100%;
margin:auto;
display:grid;
grid-gap: 2px;
grid-template-columns:200px 1fr;
grid-template-areas:"header header"
"content content"
"footer footer";
}
.contenedor .header .header_left{
visibility:visible;
}
.contenedor .header #link_sh_1{
visibility:hidden;
}
.contenedor .content{
grid-area: content;
}
.contenedor .footer{
grid-area: footer;
}
.contenedor .header{
grid-area: header;
}
.contenedor .menu{
grid-area: menu;
display:none;
}
.contenedor .logo{
position:fixed;
left:-100%;
grid-area: logo;
}
.card{
width:80%;
}
.card .card_left{
display:none;
}
.card .card_right{
width:100%;
}
.wcard{
width:80% !important;
margin:auto;
}
}
.form_general {
padding:2px;
}
.form_general .row-row{
display:grid;
grid-gap: 1px;
grid-template-columns:auto 70%;
padding:2px;
}
.form_general label{
margin-top:5px;
border-bottom:1px dotted #999;
font-weight:bold;
}
.form_general .nobold{
font-weight:normal !important;
}
.form_general label span{
font-style:italic;
display:block;
color:#666;
font-weight:normal;
}
.form_general label .oblig{
font-style:normal;
display:inline;
color:#F00;
font-weight:bold;
position:relative;
}
.form_general .row-col{
display:grid;
grid-gap: 1px;
padding:2px;
align-items:center;
}
.form_general .row-col label{
border:none;
}
.form_general .row-gen{
display:flex;
justify-content:center;
padding:2px;
}
.form_general .row-cont{
display:flex;
flex-direction:row;
align-items:flex-end;
padding:5px;
}
.form_general .row-cont .col{
height:auto;
flex: 1 1 auto;
padding-right:5px;
padding-left:2px;
font-weight:bold;
}
.form_general input{
width:100%;
}
.form_general p{
font-weight:normal;
text-align:justify;
padding:2px;
}
.form_general fieldset{
border:1px solid #999;
padding:4px;
border-radius:8px;
}
.form_general fieldset legend{
color:#06C;
}
.inicon {
position: relative;
}
.inicon .fa {
position: absolute;
padding: 10px;
pointer-events: none;
}
.ileft .fa  { left:  0px;}
.iright .fa { right: 0px;}
.ileft input  { padding-left:  30px; }
.iright input { padding-right: 30px; }
.wcard{
width:100%;
margin:auto;
border:1px solid #666;
border-radius:8px 8px 0 0;
padding:5px;
-webkit-box-shadow: 10px 10px 7px -7px rgba(0,0,0,0.51);
-moz-box-shadow: 10px 10px 7px -7px rgba(0,0,0,0.51);
box-shadow: 10px 10px 7px -7px rgba(0,0,0,0.51);
}
.wcard.width20{
width:20%;
}
.wcard.width30{
width:30%;
}
.wcard.width40{
width:40%;
}
.wcard.width50{
width:50%;
}
.wcard.width60{
width:60%;
}
.wcard.width70{
width:70%;
}
.wcard.width80{
width:80%;
}
.wcard .wtitle{
font-weight:bold;
text-align:center;
background:#06C;
padding:0.5em;
color:#FFF;
border-radius:6px 6px 0 0;
margin:-5px -5px 5px;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 0.9rem;
line-height: 1.2;
border-radius: 0.25rem;
}
.btn:hover {
color: #212529;
text-decoration: none;
}
.btn:focus,
.btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
}
.btn.disabled,
.btn:disabled {
opacity: 0.65;
}
a.btn.disabled,
fieldset:disabled a.btn {
pointer-events: none;
}
.btn-primary {
color: #fff;
background-color: #3490dc;
border-color: #3490dc;
}
.btn-primary:hover {
color: #fff;
background-color: #227dc7;
border-color: #2176bd;
}
.btn-primary:focus,
.btn-primary.focus {
color: #fff;
background-color: #227dc7;
border-color: #2176bd;
box-shadow: 0 0 0 0.2rem rgba(82, 161, 225, 0.5);
}
.btn-primary.disabled,
.btn-primary:disabled {
color: #fff;
background-color: #3490dc;
border-color: #3490dc;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #2176bd;
border-color: #1f6fb2;
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(82, 161, 225, 0.5);
}
.btn-success {
color: #fff;
background-color: #38c172;
border-color: #38c172;
}
.btn-success:hover {
color: #fff;
background-color: #2fa360;
border-color: #2d995b;
}
.btn-success:focus,
.btn-success.focus {
color: #fff;
background-color: #2fa360;
border-color: #2d995b;
box-shadow: 0 0 0 0.2rem rgba(86, 202, 135, 0.5);
}
.btn-success.disabled,
.btn-success:disabled {
color: #fff;
background-color: #38c172;
border-color: #38c172;
}
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
color: #fff;
background-color: #2d995b;
border-color: #2a9055;
}
.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(86, 202, 135, 0.5);
}
.btn-warning {
color: #212529;
background-color: #ffed4a;
border-color: #ffed4a;
}
.btn-warning:hover {
color: #212529;
background-color: #ffe924;
border-color: #ffe817;
}
.btn-warning:focus,
.btn-warning.focus {
color: #212529;
background-color: #ffe924;
border-color: #ffe817;
box-shadow: 0 0 0 0.2rem rgba(222, 207, 69, 0.5);
}
.btn-warning.disabled,
.btn-warning:disabled {
color: #212529;
background-color: #ffed4a;
border-color: #ffed4a;
}
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
color: #212529;
background-color: #ffe817;
border-color: #ffe70a;
}
.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(222, 207, 69, 0.5);
}
.btn-danger {
color: #fff;
background-color: #e3342f;
border-color: #e3342f;
}
.btn-danger:hover {
color: #fff;
background-color: #d0211c;
border-color: #c51f1a;
}
.btn-danger:focus,
.btn-danger.focus {
color: #fff;
background-color: #d0211c;
border-color: #c51f1a;
box-shadow: 0 0 0 0.2rem rgba(231, 82, 78, 0.5);
}
.btn-danger.disabled,
.btn-danger:disabled {
color: #fff;
background-color: #e3342f;
border-color: #e3342f;
}
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
color: #fff;
background-color: #c51f1a;
border-color: #b91d19;
}
.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(231, 82, 78, 0.5);
}
.btn-outline-primary {
color: #3490dc;
border-color: #3490dc;
}
.btn-outline-primary:hover {
color: #fff;
background-color: #3490dc;
border-color: #3490dc;
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.5);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
color: #3490dc;
background-color: transparent;
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
color: #fff;
background-color: #3490dc;
border-color: #3490dc;
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.5);
}
.btn-outline-success {
color: #38c172;
border-color: #38c172;
}
.btn-outline-success:hover {
color: #fff;
background-color: #38c172;
border-color: #38c172;
}
.btn-outline-success:focus,
.btn-outline-success.focus {
box-shadow: 0 0 0 0.2rem rgba(56, 193, 114, 0.5);
}
.btn-outline-success.disabled,
.btn-outline-success:disabled {
color: #38c172;
background-color: transparent;
}
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
color: #fff;
background-color: #38c172;
border-color: #38c172;
}
.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(56, 193, 114, 0.5);
}
.btn-outline-warning {
color: #ffed4a;
border-color: #ffed4a;
}
.btn-outline-warning:hover {
color: #212529;
background-color: #ffed4a;
border-color: #ffed4a;
}
.btn-outline-warning:focus,
.btn-outline-warning.focus {
box-shadow: 0 0 0 0.2rem rgba(255, 237, 74, 0.5);
}
.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
color: #ffed4a;
background-color: transparent;
}
.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
color: #212529;
background-color: #ffed4a;
border-color: #ffed4a;
}
.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 237, 74, 0.5);
}
.btn-outline-danger {
color: #e3342f;
border-color: #e3342f;
}
.btn-outline-danger:hover {
color: #fff;
background-color: #e3342f;
border-color: #e3342f;
}
.btn-outline-danger:focus,
.btn-outline-danger.focus {
box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.5);
}
.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
color: #e3342f;
background-color: transparent;
}
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
color: #fff;
background-color: #e3342f;
border-color: #e3342f;
}
.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.5);
}
.form-control {
display: block;
width: 100%;
height: calc(1.6em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-weight: 400;
line-height: 1.6;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #a1cbef;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
}
select.form-control[size],
select.form-control[multiple] {
height: auto;
}