@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    height: 100vh;
    background-image: url(../@Logo);
    background-repeat: no-repeat;
    background-size: 15% 15%;
    background-position: center;

    /*background-color: aliceblue;
     background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000);*/
}


:root {
    --cardWidth: 240px;
    --cardHeight: 280px;
    --cardMargin: 0.8px;

    --ColorBlanco:white;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Helvetica;
    width: 100%;
}

h1 {
    margin: 0;
    padding: 8px 48px;
    background: #333;
    color: #fff;
    font-size: 24px;
}


.borderradio
{
    border-radius:10px;
}

.main-section {
    display: flex;
    height: 440px;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: white;
    padding: 0.5px;
    
}

.card {
    width: var(--cardWidth);
    height: var(--cardHeight);
    margin: var(--cardMargin);
    border: 0.5px solid #ccc;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}


.imgGrande .k-icon, .k-icon {
    text-decoration: none;
    font-size: xx-large;
}

.cardizquierda {
    width: var(--cardWidth);
    height: var(--cardHeight*2);
    margin: var(--cardMargin);
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    font-size: x-small;
}


.cardcentro {
    width: var(--cardWidth);
    height: var(--cardHeight*2);
    margin: var(--cardMargin);
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    background-color: white;
}


.carderecha {
    width: var(--cardWidth);
    height: var(--cardHeight);
    margin: var(--cardMargin);
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}


.dir {
    position: relative;
    flex-direction: inherit;
    flex-wrap: nowrap;
    background-color: yellow;
}


.k-panelbar
{
    border:none;
    
}
/*APARTIR DE ESTA LINEA ES LA QUE ESTAMOS UTILIZANDO LO QUE ESTA SOBRE  ESTO DEJAR AHI PUES ES LA PARTE ANTIGUA QUE ESTA EN ALGUNAS PANTALLAS 2023-11-12*/
.noclick {
    pointer-events: none;
}

.maincard {
    display: flex;
    height: 440px;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: white;
    padding: 0.5px;
}

@media Screen and (max-width: 980px) {
    .maincard {
        flex-direction: row;
    }

        .maincard .cardall {
            width: 100%;
            background-color: var(--ColorBlanco);
        }
}

.cardbarra {
    width: 100%;
    height: auto;
    margin: var(--cardMargin);
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    padding-left: 6px;
    padding-right: 6px;
    
}

.cardbarraShadow {
    width: 100%;
    height: auto;
    margin: var(--cardMargin);
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    padding-left: 6px;
    padding-right: 6px;
    box-shadow: 10px 10px 25px 1px gray;
}

.sh {
    box-shadow: 10px 10px 25px 1px gray;
}

    .cardbarra > k-floating-label-container.k-state-focused > .k-label, .k-floating-label-container > .k-label {
        top: 0;
        left: 0;
        transform: scale(1);
        color: darkblue;
        margin-left: 10px;
    }


.k-icon-button.k-button-md > .k-button-icon {
    min-width: 1rem;
    min-height: 1rem;
    font-size: large;
} 


.cardall {
    width: var(--cardWidth);
    height: var(--cardHeight*2);
    margin: var(--cardMargin);
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    font-size: medium;
    font-family:'Segoe UI', Helvetica, Arial, sans-serif;
    
}

.tab
{

    border: 1px solid #ccc;
    border-radius: 10px;


}

.k-icon:focus, .k-icon:hover {
    text-decoration: none;
    background: white;
    color: green;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
        border-bottom-color: transparent;
        background-color:moccasin ;
        border-radius:10% 40% ;
        font-weight:bold;
        color:red
        
}

/*boton buscar*/
.btnbuscar
{
    border-radius:60%;
    float:right
}

.btnbuscar:hover
{
    background-color: #007bff;
    color: white;
    transition:step-start 1s;
    animation-direction:alternate;
    animation-duration:4s;
    animation-delay:4s;
animation-iteration-count:infinite;
    
}

.txtbuscar{
    width: 150px;
    height: auto;
    margin: var(--cardMargin);
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    padding-left: 6px;
    padding-right: 6px;
    visibility:collapse;
}

.txtbuscar > k-floating-label-container.k-state-focused > .k-label, .k-floating-label-container > .k-label {
    top: 0;
    left: 0;
    transform: scale(1);
    color: darkblue;
    margin-left: 10px;
}


.flex-gw-auto {
    width: 100%;
}

.flex-gw-1 {
    flex-grow: 1;
}

    .flex-gw-2 {
        flex-grow: 2;
    }

.flex-gw-3 {
    flex-grow: 3;
}


.flex-gw-4 {
    flex-grow: 4;
}

.flex-gw-5 {
    flex-grow: 5;
}

.flex-gw-6 {
    flex-grow: 6;
}

.flex-gw-7 {
    flex-grow: 7;
}

.flex-gw-8 {
    flex-grow: 8;
}

.flex-gw-9 {
    flex-grow: 9;
}

.flex-gw-10 {
    flex-grow: 10;
}

.flex-gw-11 {
    flex-grow: 11;
}

.flex-gw-12 {
    flex-grow: 12;
}


.flex-sh-1
{
    flex-shrink: 1;
    
}


.flex-sh-2 {
    flex-shrink: 5;
}

.flex-sh-3 {
    flex-shrink: 3;
}

.flex-sh-4 {
    flex-shrink: 4;
}

.bd-0
{
    border:none;
}


.pp-0 {
    padding: 0px;
}

.pp-5 {
    padding:5px;
}

.pp-10 {
    padding: 10px;
}



.hh0 {
    height: auto;
}

.hh5 {
    height: 5vh;
}

.hh6 {
    height: 6vh;
}

.hh7 {
    height: 7vh;
}

.hh8 {
    height: 8vh;
}

.hh9 {
    height: 9vh;
}

.hh10 {
    height: 10vh;
}


.hh15 {
    height: 15vh;
}

.hh20 {
    height: 20vh;
}

.hh25 {
    height: 25vh;
}

.hh30
{
    height: 30vh;
}

.hh35 {
    height: 35vh;
}

.hh40 {
    height: 40vh;
}

.hh45
{
    height: 45vh;
}

.hh50
{
    height: 50vh;
}

.hh55
{
    height: 55vh;
}

.hh60
{
    height: 60vh;
}

.hh65
{
    height: 65vh;
}

.hh70 {
    height: 70vh;
}    
    

.hh75
{
    height: 75vh;
}


.hh80 {
    height: 80vh;
}


.hh85
{
    height: 85vh;
}


.hh90 {
    height: 90vh;
}

.hh100
{
    height: 100vh;
}

.k-grid {
    border-width: 2px;
    border-radius: 3px;
    border-style: solid;
    box-sizing: border-box;
    outline: 0;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 0.8rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.myNumericTextbox .k-input-inner,
.myCombobox .k-input-inner {
    text-align: right;
    font-weight: bold;
    background-color: lightgoldenrodyellow;
    font-size: 18px;

}





.myTextbox .k-input-inner {
    text-align: center;
}


.large-icons .k-icon {
    font-size: 32px;
}


.Resaltado .k-input:not(:-webkit-autofill) {
    -webkit-animation-name: autoFillEnd;
    animation-name: autoFillEnd;
    font-size: 20px;
    font-weight: bold;
}


.k-wizard .k-wizard-buttons .k-wizard-pager {
    vertical-align: middle;
    font-size: 0;
}

.k-stepper .k-step-label .k-step-text {
    max-width: calc(10em - 16px - 0.5rem);
    flex-grow: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transform: rotate(-8deg);
    width: auto;
    height: auto;
}



/*implementando el sistema grid*/


/*grid de 12 columnas*/
.maingrid {
    display: grid;
    height: 440px;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: white;
    padding: 0.5px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(24,1fr);
    border-color: red;
    grid-template-areas:
        "C1-1 C2-1 C3-1 C4-1 C5-1 C6-1 C7-1 C8-1 C9-1 C10-1 C11-1 C12-1"
        "C1-2 C2-2 C3-2 C4-2 C5-2 C6-2 C7-2 C8-2 C9-2 C10-2 C11-2 C12-2"
        "C1-3 C2-3 C3-3 C4-3 C5-3 C6-3 C7-3 C8-3 C9-3 C10-3 C11-3 C12-3"
        "C1-4 C2-4 C3-4 C4-4 C5-4 C6-4 C7-4 C8-4 C9-4 C10-4 C11-4 C12-4"
        "C1-5 C2-5 C3-5 C4-5 C5-5 C6-5 C7-5 C8-5 C9-5 C10-5 C11-5 C12-5"
        "C1-6 C2-6 C3-6 C4-6 C5-6 C6-6 C7-6 C8-6 C9-6 C10-6 C11-6 C12-6"
        "C1-7 C2-7 C3-7 C4-7 C5-7 C6-7 C7-7 C8-7 C9-7 C10-7 C11-7 C12-7"
        "C1-8 C2-8 C3-8 C4-8 C5-8 C6-8 C7-8 C8-8 C9-8 C10-8 C11-8 C12-8"
        "C1-9 C2-9 C3-9 C4-9 C5-9 C6-9 C7-9 C8-9 C9-9 C10-9 C11-9 C12-9"
        "C1-10 C2-10 C3-10 C4-10 C5-10 C6-10 C7-10 C8-10 C9-10 C10-10 C11-10 C12-10"
        "C1-11 C2-11 C3-11 C4-11 C5-11 C6-11 C7-11 C8-11 C9-11 C10-11 C11-11 C12-11"
        "C1-12 C2-12 C3-12 C4-12 logo logo C7-12 C8-12 C9-12 C10-12 C11-12 C12-12"
        "C1-13 C2-13 C3-13 C4-13 logo logo C7-13 C8-13 C9-13 C10-13 C11-13 C12-13"
        "C1-14 C2-14 C3-14 C4-14 C5-14 C6-14 C7-14 C8-14 C9-14 C10-14 C11-14 C12-14"
        "C1-15 C2-15 C3-15 C4-15 C5-15 C6-15 C7-15 C8-15 C9-15 C10-15 C11-15 C12-15"
        "C1-16 C2-16 C3-16 C4-16 C5-16 C6-16 C7-16 C8-16 C9-16 C10-16 C11-16 C12-16"
        "C1-17 C2-17 C3-17 C4-17 C5-17 C6-17 C7-17 C8-17 C9-17 C10-17 C11-17 C12-17"
        "C1-18 C2-18 C3-18 C4-18 C5-18 C6-18 C7-18 C8-18 C9-18 C10-18 C11-18 C12-18"
        "C1-19 C2-19 C3-19 C4-19 C5-19 C6-19 C7-19 C8-19 C9-19 C10-19 C11-19 C12-19"
        "C1-20 C2-20 C3-20 C4-20 C5-20 C6-20 C7-20 C8-20 C9-20 C10-20 C11-20 C12-20"
        "C1-21 C2-21 C3-21 C4-21 C5-21 C6-21 C7-21 C8-21 C9-21 C10-21 C11-21 C12-21"
        "C1-22 C2-22 C3-22 C4-22 C5-22 C6-22 C7-22 C8-22 C9-22 C10-22 C11-22 C12-22"
        "C1-23 C2-23 C3-23 C4-23 C5-23 C6-23 C7-23 C8-23 C9-23 C10-23 C11-23 C12-23"
        "C1-24 C2-24 C3-24 C4-24 C5-24 C6-24 C7-24 C8-24 C9-24 C10-24 C11-24 C12-24"
}


.logogridcenter {
    grid-area: logo;
    animation: rotar 10s linear infinite;
}

.logogridcenter:hover {
 cursor:move;
}

@keyframes rotar {
    from {
        transform: rotateY(-180deg);
    
} to {
        transform: rotateY(180deg);
    }
}