html 
{
    background: white;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    text-rendering: optimizeSpeed !important;
    -webkit-font-smoothing: antialiased !important;
    margin: 0px;
    padding: 0px;
    color: #696969;
    height: 100%;
    overflow: hidden;
}

body 
{
    background: bottom;
    margin: 0px;
    padding: 0px;
    height: 100%;
    overflow: hidden;
}


.placeholder_default
{
    position: absolute;
    width: calc(100vw);
    height: calc(100vh - 38px); /*restar 38px. es el alto del panel de login - ver divheader.css/DivPanelTop.height  */

}
.placeholder_default.fadeout {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    opacity: 0 !important;
}

.placeholder_default.fadein {
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -ms-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
    opacity: 100 !important;
}

.DivBeginWaitCursor 
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    z-index: 50000;
    background-color: #fff;
    vertical-align: middle;
    cursor: progress;
}





/*estilo para el RadPageView que contiene el RadEditor */
.RadPageDesignPreview {
    width:100%!important;
    height:100%!important;
    border:none;
    background-color: transparent!important;
    overflow: hidden;
    font: Bold 1em Calibri;
}

/*Estilo del RadEditor contenido en el RadPageView*/
.RadDesignPreview {
    width: 100% !important;
    font: Bold 1em Calibri;
    background-color: transparent !important;
}


.RadPageDiarios {
    background-color: #fff;
    overflow: hidden;
    font: Bold 1em Calibri;
}


/*estilo para los tabs con todas las pestañas y nombres de los diarios*/
.TabDiarios {
    border-style: none;
    border-bottom: 1px solid #14afca !important;
    font: Bold 1em Calibri;
}

/*estilo para cada uno de los tab con el nombre e imagen del diario*/
.TabDiario {
    font: Bold 1.1em Calibri;
    min-width: 170px;
    max-width: 170px;
    text-align: center;
    height: 20px;
    border-bottom: 35px solid transparent;
}

/*div contenido en el TabDiario, utilizado para fuente y svg */
.DivTabDiario {
    background-color: transparent !important;
    height: 25px;
    position: relative;
    margin-top: -4px;
    margin-left: -2px;
}

/*info de estilo para el texto contenido en el tabdiario*/
.SpanTextTabDiario {
    margin-left: 3px;
    margin-top:4px;
    position: relative;
    text-align: left;
    width:calc(100% - 30px);    
    display:inline-block;
    white-space: nowrap; 
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;   
}

.svgTabDiario:before {
    display: contents;
}

/*Estilo para el texto del rad minimizado*/
.SpanTextTabMinimized {
    margin-left: 5px;
    margin-top: -10px;
    position: relative;
    font-size: 1em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    text-rendering: optimizeSpeed !important;
    -webkit-font-smoothing: antialiased !important;

    width:calc(100% - 30px);
    display:inline-block;
    white-space: nowrap; 
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

/*Estilo para la imagen/SVG del rad minimizado*/
.icon-radminimized:before {
    top: -2px !important;
    font-size: 18px !important;
}




.ToolTip {
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    z-index: 20901;
}

.ToolTip .rtClose {
    width:1.6em !important;
    height:1.6em !important;
    background-color:#333333!important;
    border-color:tomato!important;
}
.ToolTip .rtCallout
{
    top:15px!important;
}

.icon-tooltip:before
{
    font-size: 20px !important;
}


.DivToolTip {
    font-size: 1.3em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    text-rendering: optimizeSpeed !important;
    -webkit-font-smoothing: antialiased !important;
    max-width: 300px;
}

.icon-alarm-Task:before {
    content: "\e965";
    font-size: 18px;
    position: relative;
    top: 1px;
    color: orange !important;
}

.label_TotalAlerts {
    background-color: transparent;
    color: orange !important;
    font-weight: bold;
    padding: 2px;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    text-rendering: optimizeSpeed !important;
    -webkit-font-smoothing: antialiased !important;
    font-size: 1em;
}


/*el estilo original pertence a bootstrap4.css, esta modificacion hace menos alta la barra de progreso para los bootstrap-notifiy*/
.alert .progress {
  display: -ms-flexbox;
  display: flex;
  position: relative;
  bottom:-10px;
  margin-left:-15px;
  margin-right:-15px;
  height: 0.4rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}


.alert-success .progress {
    background-color: #F5F5F5;
}

.alert-success .progress-bar {
    background-color: #5CB85C;
}


/*###############################*/
/*Estilo para los indicadores de movimiento entre tabs (Telerik:RadTab)
    Diseñado para los diarios. Al moverlos/reordenarlos telerik muestra:
    1. Botones "superior Inferio" que señalan la nueva posicion del tab.
    2. Panel con el nombre del diario que se está desplazando
*/
.rtsDropClueTop {
  top:42px !important;        
 -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}

.rtsDropClueTop:before  {
    font-size: 20px !important;       
    color: #14afca !important ;     
     position: relative;
     left: -4px !important;
}

.rtsDropClueBottom {
    top:63px !important;
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
.rtsDropClueBottom:before {
    font-size: 20px !important;       
    color: #14afca !important ;     
     position: relative;
     left: -4px !important;
}

/*Div flotante con el svg/nombre del diario que se está desplazando/reordeanando*/
.rtsDetachedTabContainer {
    margin-top: -10px !important;
    margin-left: 10px !important;
    font-size: 13px !important;
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 4px 4px 4px rgba(0, 0, 0, .7));
    font-weight: 600 !important;

    opacity:0 ;
}

/*Este div unicamente se ha diseñado para posicionarse por encima de todos los controles (sobre todo de los diarios).
  Necesario para que, al reordenar los tabs/diario, y mover el diario sobre los diarios no genere errores*/
.DivTop_BeginTabReorder
{
    position: absolute;
    top: 38px !important;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    z-index: 50000;
    background-color: #fff;
    vertical-align: middle;
    /*cursor: progress;*/
}


/*##############################*/
/*Div con los botones (guardar / eliminar) para las preferencias del usuario sobre las posiciones de los tabs/diarios*/
.Div_Preferences_TabDiarios {
    position: absolute;
    display:none ;
    top: 2px !important;
    left: 50% !important;
    
    width:55px !important;
    cursor: pointer;
}
.Div_Preferences_TabDiarios .icon-Save
{
  color: white !important;
  transition: color 1s ;
  transition: color 1s ;
}
.Div_Preferences_TabDiarios .icon-Delete
{
  color: white !important;
  transition: color 1s ;
  transition: color 1s ;  
}
.Div_Preferences_TabDiarios .icon-Delete:before
{
  font-size:15px !important;
  top: -2px !important;
}


.Div_Preferences_TabDiarios .icon-Save:hover
{
  color: #3e824d !important;
  transition: color 1s ;
}
.Div_Preferences_TabDiarios .icon-Delete:hover
{
  color: #dc3545 !important;
  transition: color 1s ;
}
/*##############################*/



/*##############################*/
/*Modificacion del div "ModalAlert". Modifca el ancho y activa el scroll*/
.modal-dialog-scroll
{
  min-width: 600px !important;
}

.modal-dialog-scroll .modal-body
{
  margin-right: 2px !important;
  padding-bottom: 0px !important;
}

.modal-dialog-scroll .col-form-label
{
  height:200px !important;
  overflow:auto ;  
}

.modal-dialog-scroll .svgCritera:before
{
  font-size: 16px;
}
/*##############################*/



/*##############################*/
/*Diseño para el div de arrastrar/soltar de los listados/diarios "slickgrid"*/
.spanDragDrop
{
    position: absolute ;
    display: inline-block ;
    /*padding: 4px 10px;
    background: #e0e0e0;
    border: 1px solid gray;*/
    z-index: 99999;
    /*-moz-border-radius: 8px;
    -moz-box-shadow: 2px 2px 6px silver;*/

    min-width: 300px ; 
    min-height: 150px ; 
    cursor: pointer ;

    opacity: 0 ; 
    /*padding-left:145px !important;
    padding-top: 75px !important;*/
    background-color: transparent ;

    /*Efecto cristal*/
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}


.ddHeader 
{
    text-align: center;
}

.ddspanHeaderSVG:before
{
    top: 5px !important;
}

.ddspanHeaderText
{
  margin-left: 4px ;
  /*text-decoration: underline*/ ;     
  /*font-weight: bold;  */
}

.ddItemRow
{
   display: flex;
   margin:6px;
  
}

.ddSpanItemRow {
    padding-top: 4px;
    padding-left: 2px;
    text-decoration: underline;
    font-weight: bold;
    margin-right: 12px;
    min-width: 20px;
}

.ddSpanItemRowReferece {
    padding-top: 4px; !important;
    margin-left: 8px;
}

.divDrop {
    position: absolute;
    display: inline-block;
    z-index: 99998;
    

    width:100% !important;
    height: 100% !important;

    /*Efecto cristal*/
    /*background: rgb(0 112 0 / 15%);*/
    background: rgb(4 117 224 / 15%);
    
    box-shadow: 0 4px 30px #28a745;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.divDrop.divDropOK:before{
  font-size: 80px;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
}


.divDrop.divDropKO
{
    background: rgb(0 0 0 / 45%);    
    box-shadow: 0 4px 30px #777;  
}

.divDrop.divDropKO:before{
  font-size: 80px;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
}


/*##############################*/