/*********** Fonts **********************************/
/* Font Lato from: https://fonts.googleapis.com/css2?family=Lato */
/* lato-100 - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100;
    src: local('Lato Hairline'), local('Lato-Hairline'),
         url('fonts/lato-v16-latin-100.woff2') format('woff2'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* lato-100italic - latin */
  @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 100;
    src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'),
         url('fonts/lato-v16-latin-100italic.woff2') format('woff2'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* lato-300 - latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: local('Lato Light'), local('Lato-Light'),
         url('fonts/lato-v16-latin-300.woff2') format('woff2'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* lato-300italic - latin */
  @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 300;
    src: local('Lato Light Italic'), local('Lato-LightItalic'),
         url('fonts/lato-v16-latin-300italic.woff2') format('woff2'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* lato-regular - latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'),
         url('fonts/lato-v16-latin-regular.woff2') format('woff2'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* lato-italic - latin */
  @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: local('Lato Italic'), local('Lato-Italic'),
         url('fonts/lato-v16-latin-italic.woff2') format('woff2'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* lato-700 - latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local('Lato Bold'), local('Lato-Bold'),
         url('fonts/lato-v16-latin-700.woff2') format('woff2'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* lato-700italic - latin */
  @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
         url('fonts/lato-v16-latin-700italic.woff2') format('woff2'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* lato-900 - latin */
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    src: local('Lato Black'), local('Lato-Black'),
         url('fonts/lato-v16-latin-900.woff2') format('woff2'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* lato-900italic - latin */
  @font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 900;
    src: local('Lato Black Italic'), local('Lato-BlackItalic'),
         url('fonts/lato-v16-latin-900italic.woff2') format('woff2'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* Post-It */
  @font-face {
    font-family: 'Reenie Beanie';
    font-style: normal;
    font-weight: 400;
    src: local('Reenie Beanie'), local('ReenieBeanie'), url(fonts/reenie-beanie.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
/*********** Generic ********************************/
body { 
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,ＭＳ Ｐゴシック,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
    color: #37474f;
}
    
*,
*::before,
*::after {
    box-sizing: border-box;   
}

fieldset {
    border: 1px solid #dae4e9;
}

.txtcenter {
    text-align: center;
}

.just-height-space {
    height: 3rem;
}

.no-pointer[droppable=true] * {
    pointer-events: none;
}

.hide {
    display: none;
}

.non-border {
    border: none;
}

.subform-non-border .mui-jsonform-subform {
    border: none;
}

.subform-non-border .mui-jsonform-subform .mui-jsonform-field {
    margin: 0px;
}

/*********** Scrollbar (only Chrome) *********************/

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: #ccc; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

/*********** MobileUI Overwrite *********************/
#mui-screen {
    position: fixed;
}
#mui-viewport > .mui-page {
    position: absolute;
}
#mui-screen > .mui-page > .mui-page-body {
  	top: 3.6rem;
}
#mui-screen > .mui-page > .mui-page-header {
    height: 3.6rem;
}
.mui-panel .mui-panel-body {
    width: 100%;
}
#mui-viewport > .mui-page > .mui-page-body {
    top: 3rem;
    padding: 1rem;
}
#mui-viewport > .not-header > .mui-page-body {
    top: 0px;
}
#mui-viewport > .not-padding > .mui-page-body {
    padding: 0px;
}
#mui-viewport > .not-padding-top > .mui-page-body {
    padding-top: 0px;
}

#mui-viewport > .mui-page > .mui-page-header {
    height: 3rem;
    padding: 1rem;
    border-bottom: 1px solid #dae4e9;
}
#mui-viewport .mui-page-header .mui-page-title {
    font-weight: bold;
    padding: 0px;
    margin: 0px;
   
}
.mui-page-body > div {
    min-height: 100%;
}

/*
@media screen and (max-width: 980px) {
    #mui-viewport > .mui-page > .mui-page-body {
        padding: .5rem;
    }
}
*/
/*********** Login page *********************/
#init-page {
    background-color: #2a3542;
}
#login-page {
    z-index: 11!important;
}

#login-page .login-box {
    max-width: 29rem;
    width: 100%;
    margin: auto;
    margin-top: 7%;
}

#login-page .login-logo {
    text-align: center;
    margin: 1rem;
} 
#login-page .login-logo img {
    width: 50%;
}
#login-page .login-form {
    background-color: white;
    padding: 40px;
    border: 2px solid white;
    border-radius: 20px;
    position: relative;
}

#login-page .login-field {
    margin-top: 1.5rem;
}
#login-page .login-button {
    text-align: center;
} 

/*********** Leftpanel *********************/
#left-panel {
    width: 13.75rem;
	overflow: hidden;	
}

@media screen and (min-width: 980px) {
    #mui-screen-page {
        left: 13.75rem !important;
        right: 0px;
        width: auto;
        transition: left 0.5s;
    }
    #left-panel {
        left: 0px !important;
        visibility: visible !important;
        transition: left 0.5s;
    }
}

/*Soporte para el javascript de apertura/cierre del panel izquierdo*/
.colpaseleft #mui-screen-page {
    left: 0px !important;
}
.colpaseleft #left-panel {
    left: -13.75rem !important;
}

/*********** RightPanel *********************/
#right-panel {
    top: 0px;
    width: 13.75rem;
    padding: 10px;
    overflow: hidden;
}
.right-panel-version {
    bottom: 1px;
    position: absolute;
    right: 1px;
    font-size: 6pt;
    color: #bbbbbb;
}

@media screen and (min-width: 980px) {
    #mui-viewport {
        right: 13.75rem !important;
        width: auto;
        transition: right 0.5s;
    }
    #right-panel {
        top: 3.6rem !important;
        left: auto!important;
        right: 0px !important;
        width: 13.75rem !important;
        visibility: visible !important;
        transition: right 0.5s;
    }
}

.colpaseright  #mui-viewport {
    right: 0rem !important;
}
.colpaseright #right-panel {
    right: -13.75rem !important;
}

/*********** keen-ui fix *******************/

.ui-button {
    cursor: pointer;
}

#mui-screen > .mui-page > .mui-page-header .ui-toolbar__body {
    margin-left: -0.3rem;

}
#mui-screen > .mui-page > .mui-page-header .ui-toolbar {
    font-size: 1rem !important;
}
.ui-toolbar .ui-icon-button {
    cursor: pointer;
}
.ui-switch {
    z-index: 1;
}
#channel-members .ui-switch {
    justify-content: center;
}
.app-alert-dialog .ui-confirm__footer button:last-child {
    display: none;
}
.app_alert-bottomlegend {
    font-size: 0.8rem;
    color: #aba9a9;
    margin: .3rem 0;
}
.ui-modal-mvcontmodal .ui-checkbox__label-text {
    font-size: .875rem;
}
.ui-calendar-week--has-square-cells td:before {
    min-height: inherit;
}
/*
.ui-autocomplete-modal ul.ui-autocomplete__suggestions {
    position: relative !important;
    transition: max-height 0.5s ease;
    display:block;
    max-height: 0px;
    overflow: hidden;
}
.ui-autocomplete-modal ul.ui-autocomplete__suggestions.open {
    max-height: 300px !important;    
    transition: max-height 0.5s ease;
}
*/
.ui-popover.is-raised {
    border-radius: 5px;
    overflow: hidden;
}
.tippy-tooltip.ui-popover-theme {
    border-radius: 5px;
}
.ui-modal {
    font-family: Lato, Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica,Arial,sans-serif;
}
.ui-modal * {
    -webkit-overflow-scrolling: touch;
}
.ui-modal__header-text {
    font-weight: bold;
}
/*********** end keen-ui fix *******************/
.fix_auto_in_tabla {
    margin-bottom: 0px;
}
.fix_auto_in_tabla input {
    border-bottom: none;
}
.td_center_flex {
    justify-content: center;
}

@media screen and (max-width: 480px) {
    .ui-toolbar .ui-icon-button--color-custom {
        width: 2.5rem;
    }
    .content-edition .ui-toolbar .ui-icon-button--color-custom {
        width: 2.3rem;
    }
    .ui-toolbar .mui-badge {
        left: 15px !important;
    }
    
    #mui-screen > .mui-page > .mui-page-header .ui-icon-button--color-custom {
        width: 2rem;
    }
}

/*********** Utils ********************************/
#login-page {
    background-color: #2a3542;
}
.ui-toolbar__nav-icon > div {
    display: flex;
    align-content: center;
}
#logointra, #logologin {
    background-image: url('/custom/images/logo.png');
}
#logologin {  
    margin: auto;
    background-size: cover;
    background-position: center;
    width: 216px;
    height: 88px;
  }
#logointra {
    max-height: 2.7rem;
    margin-left: 1rem;
}
#mainsnack {
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 3rem;
    z-index: 52;
    pointer-events: none;
}
.dlg-button-place {
    width: 100%;
    text-align: right;
    margin-top: 0.5rem;
}
.dlg-button-center {
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
}
.dlg-button-center button,
.dlg-button-place button {
    margin: 0 0.5rem;
}
.mui-pick-navtree-check {
    border-top: solid 1px rgba(0,0,0,.16);
    padding: 1rem 0 0 0;
}
.blink {
    animation: blinker 2s linear infinite;
}
@keyframes blinker {  
    50% { opacity: 0; }    
}

.blinkpulse {
    animation: blinkpulsate 1.5s ease-out infinite;
}

@keyframes blinkpulsate {
    0% {
        transform: scale(0.9);
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}


/********** mui-navtree ********************************/

#leftpanel-body > div {
    padding: 15px 0px 15px 10px;
    margin-bottom: 2rem;
}
#rigthpanel-body > div {
    padding: 15px 5px 15px 5px;
    width:100%;
    margin-bottom: 2rem;
}
#leftpanel-body li.unpublished .mui-navtree-text {
    color: #868185;
} 

/********** mui-badge **********************************/

@media screen and (max-width: 981px) {
    
}

/********** content **********************************/

.content .content-head,
.content .content-body {
    padding: 0rem;
}

.content .content-head {
    box-shadow: 0px 10px 34px -37px rgba(0,0,0,0.75);
    padding: 5px 0px;
    margin-bottom: 1rem;
}

.content-head h1 {
    /*font-family: Lora, Roboto, Helvetica,Arial,sans-serif;*/
    font-size: 2.5rem;
    margin: 0rem 0.5rem 1rem 0rem;
    overflow-wrap: break-word;
}
.content-head h2 {
    font-weight: normal;
    margin-left: 0rem;
    overflow-wrap: break-word;
}
.content-head h3 {
    color: #a9a9a9;
    font-weight: normal;
    margin: 0px 0rem;
    overflow-wrap: break-word;
}
.content-text {
    font-size: 1rem;
    /*font-weight: 300;*/
    line-height: 26px;
    margin-bottom: 16px;
    /*border-top: solid 1px #d8d8d8;*/
    margin-top: 1rem;
}
.content-picture img {
    max-width: 100%;
    width: 100%;
}
.content-body img {
    max-width: 100%;
    height: auto;
}

.content-info-table {
    width: 100%;
}
.content-info-table td {    
    border-bottom: solid 1px #80808029;
    padding: 0.3rem;
}   
.content-info-table td span:hover {
    color: black;
    cursor: pointer !important;
}
.content-info-table td.content-info-table-label {
    font-weight: bold;
    width: 30%;
}
.content-info-table td.content-info-table-label ul li {
    font-weight: normal;
    padding: 5px 0;
}

@media screen and (max-width: 736px) {
    /*
    font-size: 1.5rem;
    */
}

/*********** Content Edition ********************************/

.content-edition h1 {
    margin-top: 0px;
}

.content-edition .upload-icon-image {
    border-top: none;
    padding: 0px;
    border-left: none;
    border-right: none;
}
@media screen and (min-width: 736px) {

}
.content-edition .ui-textbox__label-text {
    /*font-size: 1.1rem;*/
    margin-bottom: 10px;
}

/*************** TEMPLATE - Image Gallery ********************************/
.image-gallery-actions {
    text-align: right;
}
.image-gallery-actions > div {
    font-size: 30px;
    cursor: pointer;
}
.image-gallery-img {
    opacity: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.image-gallery.loaded .image-gallery-img {
    opacity: 1;
    transition: opacity .5s;
}
.image-gallery-img-action {
    /*background: #2a3542;*/
    color: white;
    position: absolute;
    top: 0;
    right: -100%;
    padding: 5px 2px;
    z-index: 1;
    /*cursor: pointer;*/
    transition: all .5s;
    width: 105px;
}
.image-gallery-img-action > .material-icons.down {
    color: white;
    right: 35px;
    position: absolute;
    top: 3px;
    cursor: pointer;
}
.image-gallery-img-action > .material-icons.up {
    color: white;
    right: 70px;
    position: absolute;
    top: 3px;
    cursor: pointer;
}
.image-gallery-img-action > .material-icons.disabled {
    color: #666666;
    pointer-events: none;
}
.image-gallery-img-action-cover {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2a3542;
    position: absolute;
    opacity: 0.9;
    min-height: 30px;
}
.image-gallery-img-action input {
    position: absolute;
    top: 5px;
    right: 5px;
    transform: scale(1.3);
}
.image-gallery.editmode .image-gallery-img-action {
    right: 0;    
}
.app-image-gallery-dropzone {
    width: 100%;
    border: 5px dashed #777;
    position: absolute;
    top: 0;
    bottom: -9999px;
    left: 0;
    right: 0;
    background-color: #eceaea;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: .8;
}

/*!
 * justifiedGallery - v3.7.0
 * http://miromannino.github.io/Justified-Gallery/
 * Copyright (c) 2018 Miro Mannino
 * Licensed under the MIT license.
 */

.justified-gallery {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.justified-gallery>a, .justified-gallery>div, .justified-gallery>figure {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    /* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
    filter: "alpha(opacity=10)";
    opacity: 0.1;
    margin: 0;
    padding: 0;
}

.justified-gallery>a>img, .justified-gallery>div>img, .justified-gallery>figure>img, .justified-gallery>a>a>img, .justified-gallery>div>a>img, .justified-gallery>figure>a>img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    border: none;
    filter: "alpha(opacity=0)";
    opacity: 0;
}

.justified-gallery>a>.caption, .justified-gallery>div>.caption, .justified-gallery>figure>.caption {
    display: none;
    position: absolute;
    bottom: 0;
    padding: 5px;
    background-color: #000000;
    left: 0;
    right: 0;
    margin: 0;
    color: white;
    font-size: 12px;
    font-weight: 300;
    font-family: sans-serif;
}

.justified-gallery>a>.caption.caption-visible, .justified-gallery>div>.caption.caption-visible, .justified-gallery>figure>.caption.caption-visible {
    display: initial;
    filter: "alpha(opacity=70)";
    opacity: 0.7;
    -webkit-transition: opacity 500ms ease-in;
    -moz-transition: opacity 500ms ease-in;
    -o-transition: opacity 500ms ease-in;
    transition: opacity 500ms ease-in;
}

.justified-gallery>.entry-visible {
    filter: "alpha(opacity=100)";
    opacity: 1;
    background: none;
}

.justified-gallery>.entry-visible>img, .justified-gallery>.entry-visible>a>img {
    filter: "alpha(opacity=100)";
    opacity: 1;
    -webkit-transition: opacity 500ms ease-in;
    -moz-transition: opacity 500ms ease-in;
    -o-transition: opacity 500ms ease-in;
    transition: opacity 500ms ease-in;
}

.justified-gallery>.jg-filtered {
    display: none;
}

.justified-gallery>.spinner {
    position: absolute;
    bottom: 0;
    margin-left: -24px;
    padding: 10px 0 10px 0;
    left: 50%;
    filter: "alpha(opacity=100)";
    opacity: 1;
    overflow: initial;
}

.justified-gallery>.spinner>span {
    display: inline-block;
    filter: "alpha(opacity=0)";
    opacity: 0;
    width: 8px;
    height: 8px;
    margin: 0 4px 0 4px;
    background-color: #000;
    border-radius: 6px;
}

/*****   Simple Lightbox  *******************/

body.hidden-scroll {
    overflow: hidden;
}

.sl-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000000de;
    display: none;
    z-index: 1035;
}

.sl-wrapper {
    z-index: 1040;
}

.sl-wrapper button {
    border: 0 none;
    background: transparent;
    font-size: 28px;
    padding: 0;
    cursor: pointer;
}

.sl-wrapper button:hover {
    opacity: 0.7;
}

.sl-wrapper .sl-close {
    display: none;
    position: fixed;
    right: 30px;
    top: 30px;
    z-index: 10060;
    margin-top: -14px;
    margin-right: -14px;
    height: 44px;
    width: 44px;
    line-height: 44px;
    font-family: Arial, Baskerville, monospace;
    color: #fff;
    font-size: 3rem;
}

.sl-wrapper .sl-close:focus {
    outline: none;
}

.sl-wrapper .sl-counter {
    display: none;
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 1060;
    color: #fff;
    font-size: 1rem;
}

.sl-wrapper .sl-navigation {
    width: 100%;
    display: none;
}

.sl-wrapper .sl-navigation button {
    position: fixed;
    top: 50%;
    margin-top: -22px;
    height: 44px;
    width: 22px;
    line-height: 44px;
    text-align: center;
    display: block;
    z-index: 10060;
    font-family: Arial, Baskerville, monospace;
    color: #000;
}

.sl-wrapper .sl-navigation button.sl-next {
    right: 5px;
    font-size: 2rem;
    color: #fff
}

.sl-wrapper .sl-navigation button.sl-prev {
    left: 5px;
    font-size: 2rem;
    color: #fff
}

.sl-wrapper .sl-navigation button:focus {
    outline: none;
}

@media (min-width: 35.5em) {
    .sl-wrapper .sl-navigation button {
        width: 44px;
    }
    .sl-wrapper .sl-navigation button.sl-next {
        right: 10px;
        font-size: 3rem;
    }
    .sl-wrapper .sl-navigation button.sl-prev {
        left: 10px;
        font-size: 3rem;
    }
}

@media (min-width: 50em) {
    .sl-wrapper .sl-navigation button {
        width: 44px;
    }
    .sl-wrapper .sl-navigation button.sl-next {
        right: 20px;
        font-size: 3rem;
    }
    .sl-wrapper .sl-navigation button.sl-prev {
        left: 20px;
        font-size: 3rem;
    }
}

.sl-wrapper .sl-image {
    position: fixed;
    -ms-touch-action: none;
    touch-action: none;
    z-index: 10000;
}

.sl-wrapper .sl-image img {
    margin: 0;
    padding: 0;
    display: block;
    border: 0 none;
    width: 100%;
    height: auto;
}

@media (min-width: 35.5em) {
    .sl-wrapper .sl-image img {
        border: 0 none;
    }
}

@media (min-width: 50em) {
    .sl-wrapper .sl-image img {
        border: 0 none;
    }
}

.sl-wrapper .sl-image iframe {
    background: #000;
    border: 0 none;
}

@media (min-width: 35.5em) {
    .sl-wrapper .sl-image iframe {
        border: 0 none;
    }
}

@media (min-width: 50em) {
    .sl-wrapper .sl-image iframe {
        border: 0 none;
    }
}

.sl-wrapper .sl-image .sl-caption {
    display: none;
    padding: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    font-size: 1rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.sl-wrapper .sl-image .sl-caption.pos-top {
    bottom: auto;
    top: 0;
}

.sl-wrapper .sl-image .sl-caption.pos-outside {
    bottom: auto;
}

.sl-wrapper .sl-image .sl-download {
    display: none;
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #000;
    z-index: 1060;
}

.sl-spinner {
    display: none;
    border: 5px solid #333;
    border-radius: 40px;
    height: 40px;
    left: 50%;
    margin: -20px 0 0 -20px;
    opacity: 0;
    position: fixed;
    top: 50%;
    width: 40px;
    z-index: 1007;
    -webkit-animation: pulsate 1s ease-out infinite;
    -moz-animation: pulsate 1s ease-out infinite;
    -ms-animation: pulsate 1s ease-out infinite;
    -o-animation: pulsate 1s ease-out infinite;
    animation: pulsate 1s ease-out infinite;
}

.sl-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

.sl-transition {
    transition: -moz-transform ease 200ms;
    transition: -ms-transform ease 200ms;
    transition: -o-transform ease 200ms;
    transition: -webkit-transform ease 200ms;
    transition: transform ease 200ms;
}

@-webkit-keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@-moz-keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@-o-keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@-ms-keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0.0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/*************** END TEMPLATE - Image Gallery ********************************/

/*********** PWA install banner ********************************/
#zigly_install_banner {
    display: none;
    padding: 10px 0px;
    bottom: 0px;
    position: absolute;
    z-index: 10;
    background: rgb(238, 242, 244);
    width: 100%;
    min-height: 80px;
    border-top: 1px solid rgb(187, 187, 187);
    text-align: center;
}
#zigly_install_banner div {
    display: inline-block;
    vertical-align: middle;
}
#zigly_install_banner div:first-child {
    width: 20%;
    max-width: 60px;
}
#zigly_install_banner div:nth-child(2) {
    max-width: 70%;
    text-align: center;
    margin-left: 1%;
}
#zigly_install_banner div:nth-child(3) {
    margin-right: 10px;
    max-width: 5%;
    vertical-align: top;
    float: right;
}
#zigly_install_banner div:first-child img {
    width: 100%;
    vertical-align: middle;
}
#zigly_install_banner div:nth-child(2) > span {
    width: 100%;
    font-size: 14px;
    display: block;
}
#zigly_install_banner div:nth-child(2) > button {
    border: 0px;
    padding: 10px;
    color: white;
    background: rgb(42, 53, 66);
    font-weight: bold;
    margin-top: 10px;
    width: 100%;
    cursor: pointer;
}
#zigly_install_banner div:nth-child(2) button i {
    vertical-align: middle;
    font-size: 20px;
}
#zigly_install_banner div:nth-child(2) button span {
    vertical-align:middle;
}

/*********** Tasks ********************************/
#task-panel {
    top: 0px;
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: hidden;
    background-color: white;
    box-shadow: -5px 0 5px -5px #333;
}

#task-panel .mui-panel-body {
    padding: 1rem;
}

/*********** Miscelaneas ********************************/
.join-table tr {
    cursor: pointer;
}
.join-table tr:first-child {
    background-color: #fff;
    height: 2.5rem;
}
.join-table td p {
    margin: 5px;
}
.join-table td p:first-child {
    font-size: 1.1rem;
}
.file-versions-table td {
    padding: 0.5rem;
}
.file-versions-table td .filevername span:first-child {
    font-weight: bold;
}
.file-versions-table div {
    padding: 0.2rem 0;
}

.file-versions-table div.fileverextra {
    font-size: 0.8rem;
    color: #777777;
} 

.file-versions-table td a {
    text-decoration: none;
    color: inherit
}

.mui-card-v .mui-card-content .mui-card-media {
    overflow: hidden;
}
.mui-card-v .mui-card-content .mui-card-media img {
    transition: transform 1.5s;
    -webkit-transition: -webkit-transform 1s;
}
.mui-card-v .mui-card-content .mui-card-media img:hover {
    transform: rotate(2deg) scale(1.1,1.1);
    -ms-transform: rotate(2deg) scale(1.1,1.1); /* IE 9 */
    -webkit-transform: rotate(2deg) scale(1.1,1.1); 
}

/************** APP-WINDOW (Meetings) *******************/
.app-window-wrapper {
    background: #000000;
    width: 600px;
    height: 500px;
    z-index: 9998;
    position: absolute;
    bottom: 0;
    max-width: 100%;
    right: 0;
}
.app-window-header {
    width: 100%;
    height: 42px;
    cursor: move;
    background: #2a3542;
    color: #fff;
    padding: 10px;
    z-index: 9998;
}
.app-window-header > span {
    max-width: 53%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.app-window-body {
    bottom: 0;
    top: 42px;
    position: absolute;
    width: 100%;
}    
.app-window-header-controls > div {
    position: absolute;
    top: 0;
    padding: 10px 5px;
    color: #fff;
    cursor: pointer;
    z-index: 9999;
}
.app-window-header-controls > div:nth-child(1) {
    right: 0;
}
.app-window-header-controls > div:nth-child(2) {        
    right: 34px;
}
.app-window-header-controls > div:nth-child(3) {        
    right: 68px;        
}
.app-window-wrapper.minimized {
    width: 200px;
    height: 42px;
    top: auto;
    left: auto;
}
.app-window-wrapper.maximized {
    width: 100%;
    height: 100%;
    top: 0 !important;
    left: 0 !important;
}

/************** APP-WEBRTC *********************************/
.webrtc-wrapper {
    background: #eef2f4;
}
.webrtc-wrapper .window-call {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
}
.webrtc-wrapper-body {
    height: 100%;
}
.webrtc-main-src {
    max-width: 100%;
}
.webrtc-me-src {
    position: absolute;
    right: 0;
    width: 30%;
    top: 42px;
    background: #757575;
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}
.webrtc-incoming-popup {
    width: 300px;
    background: #2a3542;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
    ;z-index: 999;
    text-align: center;
    padding: 20px 0;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}
.webrtc-incoming-popup h4 {
    width: 100%;
    margin: 0 0 21px 0;
    color: #ffffff;
}
.btn-mute-small {
    margin: 5px auto;
    background: #d8d8d8;
    color: white;
}
.btn-end-small {
    margin: 5px auto;
    background: #fd1111;
    color: white;
}
.webrtc-wrapper .mui-card-h {
    width: 50%;
}
.webrtc-wrapper .mui-card-h > .mui-card {
    width: 100%;
    position: relative;
}
.webrtc-wrapper .mui-card video,
.webrtc-wrapper .mui-card img {
    width: 100%;
    border: 3px solid #2a3542;
}
.webrtc-wrapper .mui-card .avatar {
    font-size: 10em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    text-align: center;
}
.webrtc-wrapper .mui-card .avatar {
    width: 100%;
}
.material-icons.audio-call {
    width: 100%;
    color: rgb(196, 196, 196);
    text-align: center;
    font-size: 10em;
    top: 55%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute;
}
.action-btns {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 50px;
    text-align: center;
}
.portable-call-window {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    height: 100%;
}
.portable-call-window iframe {
    overflow:hidden;
    height:100%;
    width:100%
}
.portable-call-window .subject-text {
    display: none;
}
.portable-call-window .action-btns {
    top: 0px;
}
.portable-call-calling-msg {
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;
    font-size: 1rem;
    z-index: 2;
    font-weight: bold;
}
.action-btns button {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}
.webrtc-incoming-popup > div {
    display: flex;
}
.incoming-popup-btns {
    width: 50%;
    text-align: center;
    color: #fff;
}
.ui-fab__icon {
    width: auto;
}

/****************** ATTACH MODAL ****************************/
/*
.attach-modal-body {
    
}
*/

.attach-modal-body .single-file > div {
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 20%;
    background-position: center;
    position: relative;
}
.attach-modal-body .single-file > div > span {
    position: absolute;
    background: white;
    font-size: .6rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 200px;
    text-align: center;
}
.attach-modal-body .multi-file,
.attach-modal-body .single-file {
    padding-bottom: 20px;
}
.attach-modal-body .single-file > div {
    max-width: 100%;
    max-height: 200px;
    margin: auto;
}
.attach-modal-body .multi-file > div {
    width: 18%;
    overflow: hidden;
    display: inline-block;
    background-position: center;
    background-size: cover;
    background-origin: content-box;
    background-repeat: no-repeat;
    margin: 1%;
    border-radius: 5px;
    position: relative;
}
.attach-modal-body .multi-file > div:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.attach-modal-body .multi-file > div > span {
    position: absolute;
    bottom: 0;
    background: white;
    font-size: .6rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.attach-modal-body .multi-file > div.default {
    background-size: 80%; 
    background-position: top; 
}

/********************* MESSAGE FILE DELETE COUNTDOWN ***************************************/
.message-del-countdown {
    position: absolute;
    bottom: 14px;
    right: 15px;
    border-radius: 10px;
    min-width: 100px;
    color: #8e8e8e;
}
.message-del-countdown > div {
    display: flex;
    justify-content: flex-end;
}
.message-del-countdown .countdown-icon {
    font-size: 1.2rem;
}
.message-del-countdown .days {
    display: none;
}
.message-del-countdown .days,
.message-del-countdown .hours,
.message-del-countdown .minutes,
.message-del-countdown .seconds {
    font-size: .8rem;
    text-align: center;
    align-self: center;
}
.message-del-countdown .days-text,
.message-del-countdown .hours-text,
.message-del-countdown .minutes-text,
.message-del-countdown .seconds-text {
    display: block;
}
.message-del-countdown .days-label,
.message-del-countdown .hours-label,
.message-del-countdown .minutes-label,
.message-del-countdown .seconds-label {
    display: none;
    font-size: 0.6rem;
}
.message-del-countdown .days-text::after,
.message-del-countdown .hours-text::after,
.message-del-countdown .minutes-text::after {
    content: ':';
}

/*********** Pruebas ********************************/

/* CUARENTENA 15/7
.full-panel {
    width: 100%;
    height: 100%;
    top: 0px;
}
.nextpanel {
    width: 100%;
    height: 200px;
    background-color: #1e262f;
}
*/
.notaudio {
    display: none;
}
.callaudio,
.dialaudio {
    display: none;
}

.contact_present {
    color: green;
}
/* Call icon in right panel */
#rigthpanel-body li.in-call span.ui-icon.mui-navtree-icon.material-icons {
    color: #ff0000;
    animation:blinkingIcon 1.6s infinite;
}
#rigthpanel-body li.mui-navtree-haschild:first-child li.in-call > div > div.mui-navtree-toogle {
    display: none;
}
@keyframes blinkingIcon {
    0%{     color: #ff0000;    }
    49%{    color: #ff0000; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #ff0000;    }
}

#topalertband {
    background-color: red;
    color: white;
    width: 100%;
    font-size: .9rem;
    font-weight: bold;
    height: 1.5rem;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
/*
#mui-screen {
    top: 1.5rem;
}
*/

/*********** book-type-form-exceptions ********************************/

.book-type-form-hour {
    border: none;
}

.book-type-form-hour .mui-jsonform-partfieldset {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
.book-type-form-hour .ui-textbox__counter {
    display: none;
}

/*********** mui-calendar ********************************/

.mui-calendar {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: auto;
}

.mui-calendar .calendar-nav {
    height: 3.5rem;
    border-bottom: solid 1px #e0e0e0;
}

.mui-calendar .day-header,
.mui-calendar .week-header {
    width: 100%;
    height: 5rem;;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow-y: scroll;
}

.mui-calendar .day-header .day-day-col div,
.mui-calendar .week-header .week-day-col div {
    color: #70757a;
    padding-top: .25rem;
    padding-left: .7rem;
    position: absolute;
}
.mui-calendar .day-header .day-day-col div:first-child
.mui-calendar .week-header .week-day-col div:first-child {
    -select: none;
    position: absolute;
}
.mui-calendar .day-header .day-day-col div:last-child,
.mui-calendar .week-header .week-day-col div:last-child {
    font-size: 2.5rem;
    line-height: 2.25rem;
    position: absolute;
    top: 1.5rem;

}
.mui-calendar .day,
.mui-calendar .week {
    color: #70757a;
}
.mui-calendar .day-hour-col,
.mui-calendar .week-hour-col {
    width: 2.75rem;

}
.mui-calendar .day-header .day-hour-col,
.mui-calendar .week-header .week-hour-col {
    border-right: solid 1px #e0e0e0; 
}
.mui-calendar .day-day-col,
.mui-calendar .week-day-col {
    flex-grow: 1;
    position: relative;
}
.mui-calendar .day-header .day-day-col,
.mui-calendar .week-header .week-day-col {
    border-right: solid 1px #e0e0e0;    
}

.mui-calendar .day-body,
.mui-calendar .week-body {
    position: absolute;
    top: 8.5rem;
    bottom: 0rem;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.mui-calendar .day-body .day-day:first-child,
.mui-calendar .week-body .week-day:first-child {
    border-top: solid 1px #e0e0e0;
}

.mui-calendar .day-body .day-hour-col,
.mui-calendar .week-body .week-hour-col {
    width: 2.75rem;
    border-right: solid 1px #e0e0e0;
}

.mui-calendar .day-body .day-hour-col .day-hour,
.mui-calendar .week-body .week-hour-col .week-hour {
    height: 2.5rem;
    font-size: .7rem;    
    text-align: right;
    padding-top: 2rem;
    padding-right: 0.3125rem;
    border-right: solid 1px #e0e0e0; 
}

.mui-calendar .day-body .day-hour-col .day-hour:first-child,
.mui-calendar .week-body .week-hour-col .week-hour:first-child {
    display: none;
}

.mui-calendar .day-body .day-day-col .day-day,
.mui-calendar .week-body .week-day-col .week-day {
    height: 2.5rem;
    border-right: solid 1px #e0e0e0;
    border-bottom: solid 1px #e0e0e0;
}

.mui-calendar .day-body .day-day-col .day-day:first-child,
.mui-calendar .week-body .week-day-col .week-day div {
    width: 100%;
    height: 1.25rem;
}

.mui-calendar .day-body .day-day-col .day-day div:hover,
.mui-calendar .week-body .week-day-col .week-day:hover {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}

.mui-calendar-appt {
    position: absolute;
    width: 95%;
    z-index: 1;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);   
    background: rgb(249, 161, 154);
    color: white;
    overflow: hidden;
    font-size: 0.7rem;
    cursor: pointer;
}
.mui-calendar-appt div {
    padding: 3px 0px 0px 5px ;
    white-space: nowrap;
}
.mui-calendar-appt:hover {
    z-index: 2;
}
.mui-calendar-appt .mui-calendar-appt-summary {
    font-size: 0.8rem;
    font-weight: bold;
}

.mui-calendar-test {
    position: absolute;
    top: 204px;
    height: 5rem;
    border: solid 1px red;
    background: steelblue;
    color: white;
}
.mui-calendar-test2 {
    background: red;
    margin-left: 1rem;
}

/****************** MES ***************/

.mui-calendar .month {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc( 100% - 3.5rem );
}
  
.mui-calendar  .month .month-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
  
.mui-calendar .month .month-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr; /* Cada fila ocupa la misma fracción del espacio */
    flex-grow: 1;
    overflow: hidden; /* Evita que la grid se expanda por el contenido */
    min-height: 0; /* Fundamental para que el overflow interno funcione correctamente */
}
  
.mui-calendar .month .month-body .month-day {
    box-sizing: border-box;
    border-right: solid 1px #e0e0e0;
    border-bottom: solid 1px #e0e0e0;
    overflow: auto; /* Permite que el contenido haga scroll sin modificar la celda */
    min-height: 0; /* Evita que el contenido extienda la altura de la celda */
    padding: 0.25rem .7rem .25rem .7rem;
    position: relative;
}

  
.mui-calendar .month-header .month-day-label {
    color: #70757a;
    padding-top: .25rem;
    padding-left: .7rem;
    border-right: solid 1px #e0e0e0;
}
  
.mui-calendar .month .mui-calendar-appt-month {
    width: 100%;
    z-index: 1;
    border-radius: 5px;
    color: white;
    overflow: hidden;
    font-size: 0.7rem;
    cursor: pointer;
    margin: 0.2rem 0;
}

.mui-calendar .month .mui-calendar-appt-month .mui-calendar-appt-dtrange {
    text-overflow: ellipsis;
    overflow: hidden;
    height: 1.3rem;
    display: flex;
    align-items: center;
    padding-left: 5px;
    width: 100%;
    white-space: nowrap;
}


/*

.mui-calendar .month-header {
    width: 100%;
    height: 1.5rem;;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;
}


.mui-calendar .month-body {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
}

.mui-calendar .month-body .month-day {
    height: 2.5rem;
    border-right: solid 1px #e0e0e0;
    border-bottom: solid 1px #e0e0e0;
    width: 14.285714285714286%;
}
*/

/*********** app-calendar ********************************/

.app-calendar {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: auto;
}
.app-calendar-panel {    
    position: absolute;
    top: 3.5rem;
    bottom: 0px;
    left: -100%;
    width: 35%;
    max-width: 22rem;
    background: white;
    z-index: 3;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    transition: left .5s;
    overflow-y: auto;
}
.app-calendar-panel-show {
    left: 0px;
}




/*********** Breadcrumb ********************************/

.mui-breadcrumb {
    font-size: 0.8rem;
    margin: .2rem 0 .5rem 0;
    color: #3a3a3a
}

.mui-breadcrumb a {
    color: #6c757d;
    text-decoration: none;
    font-weight: 350;
    cursor: pointer;
}
.mui-user-toolbar-name {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}