/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 09-02-2023, 15:02:26
    Author     : 204797692
*/
@font-face {
    font-family: calibribolditalic;
    font-style: italic;
    font-weight: bold;
    src: url(../fuentes/CalibriBoldItalic.ttf);
}
@font-face {
    font-family: calibribold;
    font-weight: bold;
    font-style: normal;
    src: url(../fuentes/CalibriBold.TTF);
}
@font-face {
    font-family: calibrilight;
    font-weight: lighter;
    font-style: normal;
    src: url(../fuentes/CalibriLight.ttf);
}
@font-face {
    font-family: calibriregular;
    font-weight: normal;
    font-style: normal;
    src: url(../fuentes/CalibriRegular.ttf);
}
@font-face {
    font-family: DINCondensedBold;
    font-weight: bold;
    font-style: normal;
    src: url(../fuentes/DINCondensedBold.ttf);
}

.calibribolditalic{
    font-family: calibribolditalic !important;
}
.calibribold{
    font-family: calibribold !important;
}
.calibrilight{
    font-family: calibrilight !important;
}
.calibriregular{
    font-family: calibriregular !important;
}
.dinbold{
    font-family: DINCondensedBold !important;
}
.row{
    padding: 0px !important;
    margin : 0px !important;
}
.form-group{
    padding: 7px !important;
}
.imagen{
    z-index: -2;
    background-image:              
         url(../imagenes/fondo.jpg);
    background-image: no-repeat;
    background-image: fixed;
    background-image: center;
    background-size: cover;
    background-position: center center;

}
.imagen2{
    background-image:              
         url(../imagenes/fondo.jpg);

    background-image: no-repeat;
    background-image: fixed;
    background-image: center;
    
    background-position: center center;
    background-size: cover;
    

}
.formulario{
        -ms-flex: 0 0 230px;
        flex: 0 0 500px;
}
.invalidFeedback{
        color: red;
        font-size: 13px;
}
.validFeedback{
        color:#006ae3;
        font-style: italic;
        font-size: 16px;
}
.campos{
            padding: 10px;
}


.barra{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden ;
  //background-color: #2f5078;
  //background-color: #120075;
background: linear-gradient(340deg, #120075, #1349a1)
  
}

.supbarra {
  float: left;
}

.supbarra a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  cursor: pointer;
  user-select: none
}
.supbarra a:hover {
  background-color: #4f86c9;
}


.der{
    float: right;
}
.centro{
    text-align: center
}
.icon {
    
    bottom: 2px;
    right: 5px;
    width: 24px;
    height: 24px;
}
.loader {
    border: 10px solid transparent; /* Light grey */
    border-top: 10px solid #00a6e8; /* Blue */
    border-right: 10px solid #00a6e8; /* Blue */
    border-radius: 100%;
    
    width: 120px;
    height: 120px;
    animation: spin .7s  linear infinite;
}
.anim:hover{
    animation: cubic-bezier;
    transform: scale(1.1, 1.1);
    transition-duration: 0.3s;
}

.anim:not(:hover){
    animation: cubic-bezier;
    transform: scale(1.0, 1.0);
    transition-duration: 0.3s;
}
.addbtn{
    height : 50px; 
    width : 50px ; 
    font-size: 20px;
    border-radius:100%; 
    border:solid #d8d8d8 2px; 
    background: #fff 
}
.addbtn:hover{
  
    border:solid #adb5bd 2px; 
    background: #adb5bd
}
.savebtn{
    height : 60px; 
     
    font-size: 15px;
    border-radius:10px; 
    border:solid #00f684 2px; 
    background: #00f684;
    bottom: 42px;
    right: 122px;
    position: fixed; 
    z-index: 1
}

.savebtn:hover{
  
    border:solid #009d54 2px; 
    background: #009d54
}
.btn-guardar{
    height : 60px; 
     
    font-size: 15px;
    border-radius:10px; 
    border:solid #00f684 2px; 
    background: #00f684;

    z-index: 1
}

.btn-guardar:hover{
  
    border:solid #009d54 2px; 
    background: #009d54
}
.deletbtn{
    height : 50px; 
    
    font-size: 20px;
    border-radius:10px; 
    border:solid #ffd5d5 2px; 
    background: #ffd5d5 
}
.deletbtn:hover{
  
    border:solid red 2px; 
    background: red
}  
@keyframes spin {
    
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.btnrojo{
    background-color: #ff6666;
    border-color: #ff6666;
    color: white;
    
}
.btnrojo:hover, .btnrojo:focus, .btnrojo:active, btnrojo.active, .open>.dropdown-toggle.btnrojo {
    color: #fff;
    background-color:  #ff3333;
    border-color: #ff0033; /*set the color you want here*/
}

.btnazul{
    background-color: #2F6197;
    border-color: #2F6197;
    color: white;
    
}
.btnazul:hover, .btnazul:focus, .btnazul:active, btnazul.active, .open>.dropdown-toggle.btnazul {
    color: #fff;
    background-color:   #2f96dc;
    border-color:  #2f96dc; /*set the color you want here*/
}
.seleccionado{
    background-color: #4f73b5;
    
}
.btnrojodisabled,.btn.disabled, .btn:disabled, fieldset:disabled .btn{
    background-color:  lightgray;
    border-color: lightgray;
    color: black;
}
/*.card{

    background: linear-gradient(340deg, #091b38, #1349a1) !important;
    color: #fff;

}
.gradiente{

    background: linear-gradient(340deg, #091b38, #1349a1) !important;
    color: #fff;

}*/

.gradient{

    background: linear-gradient(340deg, #091b38, #1349a1) !important;
    color: #fff;

}
table.dataTable {
    color: white;
}
.page-item .page-link {
    background-color: #091b38 !important;
    border: 0px solid gray;
}

p {
   margin: 0px  !important;
   padding: 0px  !important;
}
.imgconv{
    border: darkgray solid 2px;
    margin :  0!important;
    border-radius: 10px;
  
    z-index: 0;
    aspect-ratio: 1/1;
    width:  150px !important;
}
.conv{
    background-color: white;
    
    padding:0;
    margin :  auto!important;
    border-radius: 10px;
    width:  150px;
    height: 150px;
    z-index: 0;
    
}
.conv:hover{ 
    
    transform: scale(1.1,1.1);
    z-index: 1;
    transition: all 0.3s ease;
}
.conv:not(:hover) .opciones{
    opacity: 0;
    transform: translate(0px,0px);
    transition: all 0.3s ease;

}
.conv:hover  .opciones{ 
    opacity: 1;
    transform: translate(100px,0px);
    transition: all 0.3s ease;
}

.menu-btn{
    border-style: solid;
    border-radius: 5px;
    background: transparent;
    border-color: white;
}

.menu-btn:hover{
    background-color: #0061cf
}
.menu-btn:active{
    background-color: #012f63;
    transform: scale(1 , 1);
}

.menu-sub{
     user-select: none;
    
     border-bottom: 1px #ec8c00 solid;
}
.menu-sub a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  cursor: pointer;
 
}
.menu-sub a:hover {
  background-color: #d64502;//#ec8c00;
}



.opciones{
    opacity: 0;
    border-color: #d8d8d8;
    border-style: solid;
    
    background-color:white;
   
    font-size:20px;
    height: 50px;
    width: 50px;
    position: absolute;
    left:50px;
    top:20px;
    z-index: -1
}
.opciones:hover{
    background-color:lightgrey;
    border: lightgrey solid; 
}
.opciones:active{
    background-color:gray;
    border: gray solid; 
}


@media (max-width:481px) {
    .fondocp{
    
    background-image: url(../imagenes/diseno_interior_acceso_03.png);
    background-repeat: no-repeat;
    background-image: fixed;
/*    background-image: center;*/
    background-size: 100%;
    background-position: 105% center;
    }
    .restext{
        width: 90%;
        margin: 5% auto auto auto !important;
    }
    
    
}
@media only screen and (min-width:481px) and (max-width:800px){
  .fondocp{
    
    background-image: url(../imagenes/diseno_interior_acceso_03.png);
    background-repeat: no-repeat;
    background-image: fixed;
    background-image: center;
    background-size: 100%;
    background-position: 105% center;
    }  
    .restext{
        width: 70%;
        margin: 5% auto auto auto !important;
    }
    
}
@media only screen and (min-width:801px)and (max-width:1200px)  {
  .fondocp{
    
        background-image: url(../imagenes/diseno_interior_acceso_002.png);
        background-repeat: no-repeat;
        background-image: fixed;
        background-image: center;
        background-size: 150%;
        background-position: 90% bottom;
    }  
    .restext{
        width: 50%;
        margin: 5% 40% auto auto !important;
    }
    
}

@media  (min-width:1201px)  {
  .fondocp{
        background-image: url(../imagenes/diseno_interior_acceso_002.png);
        background-repeat: no-repeat;
        background-image: fixed;
        background-image: center;
        background-size: 100%;
        background-position: 105% bottom;
    } 
    .restext{
        width: 50%;
        margin: 5% 40% auto auto !important;
    }
}