/*Botones*/
/******************************************** INICIO BOTONES ********************************************/

.btn-general {
    padding: 4px 5px;
    cursor: pointer;
    transition: all 0.5s ease; /*Transición*/
    border-radius: 8px;
    border: 1px solid var(--gray-90);
    box-shadow: 0px 0px 10px 3px rgba(235, 235, 235, 1);
    font-weight: bold;
    background: linear-gradient(0deg, rgba(221,232,246,1) 0%, rgba(221,232,246,1) 40%, rgba(244,248,250,1) 60%, rgba(244,248,250,1) 100%);
    transition: all 0.3s ease-in-out;
}

.btn-general:hover {
    box-shadow: 0px 0px 5px 0px var(--gray-90);
}

.btn-verde {
    border: 2px inset var(--green-90) !important;
}

.btn-verde:hover {
    box-shadow: 0px 0px 5px 0px silver !important;
    background: var(--green-30) !important;
    color: white !important;
    border: 2px outset var(--green-50) !important;
}

.btn-naranja {
    border: 2px inset var(--orange-90) !important;
}

.btn-naranja:hover {
    box-shadow: 0px 0px 5px 0px silver !important;
    background: var(--orange-30) !important;
    border: 2px outset var(--orange-50) !important;
}

.btn-azul {
    border: 1px inset var(--blue-40) !important;
    color: var(--gray-80);
}

.btn-azul:hover {
    box-shadow: 0px 0px 5px 0px silver !important;
    background: linear-gradient(0deg, var(--blue-30) 0%, var(--blue-30) 40%, rgba(244,248,250,1) 60%, rgba(244,248,250,1) 100%);
    color: var(--gray-90);
}

.btn-rojo {
    border: 2px inset var(--red-90) !important;
}

.btn-rojo:hover {
    box-shadow: 0px 0px 5px 0px silver !important;
    background: var(--red-30) !important;
    color: white;
    border: 2px outset var(--red-50) !important;
}

.btn-azul2 {
    box-shadow: 0px 0px 5px 0px silver !important;
    background: var(--blue-30) !important;
    color: white;
    border: 2px outset var(--blue-60) !important;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}

.btn-azul2:hover {
    background: var(--blue-40) !important;
}


.btn-naranja2 {
    box-shadow: 0px 0px 5px 0px silver !important;
    background: var(--orange-50) !important;
    color: white;
    border: 2px outset var(--orange-70) !important;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}

.btn-naranja2:hover {
    background: var(--orange-70) !important;
}

.btn-rojo2 {
    box-shadow: 0px 0px 5px 0px silver !important;
    background: var(--red-30) !important;
    color: white;
    border: 2px outset var(--red-50) !important;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}

.btn-rojo2:hover {
    background: var(--red-50) !important;
}

.btn-verde2 {
    box-shadow: 0px 0px 5px 0px silver !important;
    background: var(--green-30) !important;
    color: white !important;
    border: 2px outset var(--green-50) !important;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}

.btn-verde2:hover {
    background: var(--green-50) !important;
}


/******************************************** FIN BOTONES ********************************************/

/******************************************** INICIO MARCOS ********************************************/
.bradius0 {
    border-radius: 0px !important;
}

.bradius3 {
    border-radius: 3px !important;
}

.bradius5 {
    border-radius: 5px !important;
}

.bradius7 {
    border-radius: 7px !important;
}

.bradius10 {
    border-radius: 10px !important;
}

.bradius15 {
    border-radius: 15px !important;
}

.bradius20 {
    border-radius: 20px !important;
}

.marcoGris {
    position: relative;
    border: 1px solid silver;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    border-radius: 0.35rem;
}

.marcoGrisSombraOscura {
    position: relative;
    border: 1px solid silver;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 0px var(--gray-80);
    position: relative;
    border-radius: 0.35rem;
}

.marcoGrisSombraClara {
    position: relative;
    border: 1px solid silver;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 0px var(--gray-30);
    position: relative;
    border-radius: 0.35rem;
}

.marcoTransparente {
    position: relative;
    border: 1px solid transparent;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    border-radius: 0.35rem;
}

.marcoTransparenteSombraOscura {
    position: relative;
    border: 1px solid transparent;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 0px var(--gray-80);
    position: relative;
    border-radius: 0.35rem;
}

.marcoTransparenteSombraClara {
    position: relative;
    border: 1px solid transparent;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 0px var(--gray-30);
    position: relative;
    border-radius: 0.35rem;
}

.marcoVerde {
    position: relative;
    border: 1px solid var(--green-50);
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    border-radius: 0.35rem;
}

.marcoVerdeSombraOscura {
    position: relative;
    border: 1px solid var(--green-50);
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 0px var(--green-90);
    position: relative;
    border-radius: 0.35rem;
}

.marcoVerdeSombraClara {
    position: relative;
    border: 1px solid var(--green-50);
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 0px var(--green-30);
    position: relative;
    border-radius: 0.35rem;
}

.marcoAzul {
    position: relative;
    border: 1px solid var(--blue-menu);
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    border-radius: 0.35rem;
}

.marcoAzulSombraOscura {
    position: relative;
    border: 1px solid var(--blue-menu);
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 0px var(--blue-80);
    position: relative;
    border-radius: 0.35rem;
}

.marcoAzulSombraClara {
    position: relative;
    border: 1px solid var(--blue-menu);
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 0px var(--blue-40);
    position: relative;
    border-radius: 0.35rem;
}


.tltMarcoGris::after {
    position: absolute;
    content: attr(title);
    background-color: white;
    padding: 3px 8px;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 1px;
    font-weight: 500;
    transform: translate(-50%, 0);
    top: -14px;
    left: 50%;
}

.tltMarcoVerde::after {
    position: absolute;
    content: attr(title);
    background-color: white;
    padding: 3px 8px;
    border-left: 1px solid var(--green-50);
    border-right: 1px solid var(--green-50);
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 1px;
    font-weight: 500;
    transform: translate(-50%, 0);
    top: -14px;
    left: 50%;
}

.tltMarcoAzul::after {
    position: absolute;
    content: attr(title);
    background-color: white;
    padding: 3px 8px;
    border-left: 1px solid var(--blue-60);
    border-right: 1px solid var(--blue-60);
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 1px;
    font-weight: 500;
    transform: translate(-50%, 0);
    top: -14px;
    left: 50%;
}

.tltMarcoTransparente::after {
    position: absolute;
    content: attr(title);
    background-color: white;
    padding: 3px 8px;
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 1px;
    font-weight: 500;
    transform: translate(-50%, 0);
    top: -14px;
    left: 50%;
}

.btn_esquina_azul {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: white;
    border: 1px solid var(--blue-menu);
    padding: 3px;
    box-shadow: 0px 0px 10px 0px var(--blue-40);
}

.btn_esquina_azul .accordion-button::after {
    margin-right: auto;
    margin-left: auto;
}

.accordion-item button.btn-link i {
    transition: 0.3s all ease;
    font-size: 16px;
}

.accordion-item button.btn-link.collapsed i {
    transform: rotate(180deg);
    transition: 0.5s all ease-in-out
}

.accordion-item button.btn-link:hover {
    color: #224abe;
    text-decoration: none;
}

/******************************************** FIN MARCOS ********************************************/
/******************************************** INICIO TEXTOS ********************************************/

.text-break {
    word-break: break-word !important;
    word-wrap: break-word !important;
}


.saltoLinea1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.saltoLinea2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


.saltoLinea3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/******************************************** FIN TEXTOS ********************************************/
/******************************************** INICIO ANIMACION  ****************************************/
.scale1:hover {
    transition: all 0.5s ease;
    transform: scale(1.05);
}

hr {
    padding: 0 !important;
    margin: 0 auto 1rem !important;
}

/******************************************** FIN ANIMACION  ****************************************/

/******************************************** INICIO AJUSTES SKIN TELERIK MASTER  ****************************************/

/*Para el contenido de la cuadricula, incluye NestedView */
.RadGrid {
    color: var(--black-alpha-90) !important;
}

/* Link Button en NestedView */
.RadGrid .rgEditForm a {
        color: var(--black-alpha-90) !important;
    }
/* Para ListBox */
.RadListBox .rlbItem {
    color: var(--black-alpha-90) !important;
}


/** colocar color encabezado en Bounfield*/
.RadGrid .rgHeader a {
    color: var(--black-alpha-90) !important;
    font-weight: bold !important;
}

/** colocar color encabezado en Template*/
.RadGrid .rgHeader {
    color: var(--black-alpha-90) !important;
    font-weight: bold !important;
}

/** colocar color a las filas del grid*/
.RadGrid .rgRow, .RadGrid .rgAltRow {
    color: var(--black-alpha-90) !important;
}

/* Para cuando hay GridButtonColumn en encabezado */
.RadGrid .rgHeader:first-child {
    color: var(--black-alpha-90) !important;
    font-weight: bold !important;
}

/* Para cuando hay GridButtonColumn en filas */
.RadGrid .rgRow a, .RadGrid .rgAltRow a {
    color: var(--black-alpha-90) !important;
}

/* Color al texto del Radio Button*/
.RadButton .rbText {
    color: var(--black-alpha-90) !important;
}

/** Color de letra fecha calendario (cuadro texto) **/
.RadInput .riTextBox {
    color: var(--black-alpha-90) !important;
}
/* Color del mes en la parte superior del calendario */
.RadCalendar .rcTitlebar .rcTitle {
    color: var(--black-alpha-90) !important;
}

/* Color letra Tab */
.RadTabStrip .rtsLevel1 .rtsLink {
    color: var(--black-alpha-90) !important;
}

/******************************************** FIN AJUSTES SKIN TELERIK MASTER  ****************************************/
/******************************************** INICIO CONTROLES PERSONALIZADOS  ****************************************/

div.bootstrapInputCustom tr span input[type="text"], div.listaAyudaBootrap input[type="text"] {
    display: block !important;
    width: 100% !important;
    height: calc(1.5em + 0.5rem + 2px) !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #6e707e !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #d1d3e2 !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    line-height: 1.5 !important;
    border-radius: 0.2rem !important;
    appearance: none !important;
}

div.bootstrapInputCustom tr span input[type="text"]:disabled, div.listaAyudaBootrap input[type="text"]:disabled {
    background-color: #eaecf4 !important;
    opacity: 1 !important;
}

div.bootstrapInputCustom tr span input[type="text"]:hover, div.listaAyudaBootrap input[type="text"]:hover {
    border-color: #858796;
    box-shadow: 0 0 0 0.2rem rgba(69, 77, 88, 0.35);
}

div.bootstrapInputCustom tr span input[type="text"]:focus, div.listaAyudaBootrap input[type="text"]:focus {
    color: #6e707e;
    background-color: #fff;
    border-color: #bac8f3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

/*Bloquea el crecimiento de un text area*/
.textArea-block {
    resize: none;
}
.box-sizing-border {
    box-sizing: border-box;
}

/******************************************** FIN CONTROLES PERSONALIZADOS  ****************************************/