body{font-size: 1em;}
.centerX {  position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    padding: 10px;
}

.mb-0 {margin-bottom: 0px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-20 {margin-bottom: 20px !important;}
.pr0{padding-right: 0em !important;}
.pt1p5 {padding-top: 1.5em;}
.pt20{padding-top: 20px;}
.plr05{padding-left: 0.5em; padding-right: 0.5em;}
.mr2{margin-right: 2em;}

.w100{width: 100%;}
._bold{font-weight:600}

.bullet {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: .5rem;
    border-radius: 50%;
}
.bulletSmall {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: .7rem;
    border-radius: 50%;
}

.dedo, .cursor {cursor: pointer}

.darkGreyB{background-color: #222;}
.lightBlue {color: #94cfde;}
.lightBlueB {background-color: #edf9fd;}
.cream {color: #f8f4e5}
.lightCreamB {background-color: #fffdf5}
.creamB {background-color: #fcefd8}
.creamBi {background-color: #fcefd8 !important; color:#257a94 !important}
.blueB{background-color: #94cfde;}
.blueBi{
    background-color: #59c9e6 !important
}
.lilacB{background-color: #808ec3;}
.lilacBi{background-color: #808ec3 !important;}
.lightlilacB{background-color: #d6dcf4;}
.roseB{background-color: #ffa49b;}
.roseBi{background-color: #ffa49b !important}
.rose{color: #ffa49b;}
.lightRoseB{background-color: #f9e4e2;}
.lightOrange{background-color: #ff8f4b;}
.darkBlueB {background-color: #4753c6;}
.gray{color:#343434;}
.darkPetroleumB{background-color:#15414e}
.darkPetroleum{color:#15414e}
.petroleumB{background-color: #257a94}
.petroleum{color: #38565f}
.lightPetroleumB{background-color:#a1b7b8}
.facebook{background-color: #2c2299}
.wp{background-color: #02d368;}
.instagram{
    background: #833ab4;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/*MATERIALIZE*/
    .card {border-radius: 1em !important;padding: 1em; min-height: 70px !important;}
    .card-panel{padding: 1em; border-radius: 1em !important;margin: .5rem 0 0rem 0;}
    .container {
        padding: 50px 0px;
        max-width: 1280px;
        width: 100%;
    }
    @media only screen and (min-width: 993px) {
        .container {
            width: 50%;
        }
    }
    
    .input-field input[type=text]:focus + label {color: #94cfde;}
    .input-field input,.input-field label,
    textarea,textarea:not(.browser-default):not([readonly]) {color: #f8f4e5;}
    .input-field input[type=text]:focus {
        border-bottom: 1px solid #94cfde;
        box-shadow: 0 1px 0 0 #94cfde;
    }
    [type="checkbox"].filled-in:checked + span:not(.lever)::after {
        top: 0;
        width: 20px;
        height: 20px;
        border: 2px solid #94cfde;
        background-color: #94cfde;
        z-index: 0;
    }
    .input-field .prefix.active {color: #94cfde;}
    input[type="text"]:not(.browser-default):focus:not([readonly]),
    input[type="email"]:not(.browser-default):focus:not([readonly]),
    input[type="password"]:not(.browser-default):focus:not([readonly]),
    textarea:not(.browser-default):focus:not([readonly]){
        border-bottom: 1px solid #94cfde;
        box-shadow: 0 1px 0 0 #94cfde;
    }
    input[type="text"]:not(.browser-default):focus:not([readonly]) + label,
    input[type="email"]:not(.browser-default):focus:not([readonly]) + label,
    input[type="password"]:not(.browser-default):focus:not([readonly]) + label,
    textarea:not(.browser-default):focus:not([readonly]) + label{
        color: #94cfde;
    }
    .input-field .prefix ~ select {width: calc(100% - 3rem); margin-left: 3rem;}
    .datepicker-day-button {color: #343434;}
    .is-disabled .datepicker-day-button {color: #b0b0b0;}
    .datepicker-date-display {background-color: #257a94;}
    .btn:not(.btn-floating), .btn-large:not(.btn-floating), .btn-small:not(.btn-floating) {border-radius: 1em;}
    a {color: inherit} 

/*LOGIN*/
    /*#logo{  padding: 2em;width: 12em;}*/
    .formCream {background-color: #fffcf6 ;}
    .redes {
        height: 100%;
        padding: 6px;
    }

/*HEADER*/
    #header{ 
        padding-bottom: 5px;
        position: fixed;
        width: 100%;
        z-index: 2;
    }

    .logo {width: 60px; position: relative;top: 6px;}
    .avatar {   max-width: 2.5em;
                position: relative;
                top: 5px;
            }
    .iconPosition {position: relative;top: 7px;}
    .init{padding-top: 0.5em;}

/*FOOTER*/
    footer { position: fixed; bottom: 0px; z-index: 999; padding: 0.25em; width: 100%; color: whitesmoke; line-height: 1em;}
    footer a { color: whitesmoke;}
    .pdtb05{padding-top: 0.5em !important; padding-bottom: 0.5em !important;}    

/*ACTION*/
    .imgIconBtn{width: 100%;object-fit: contain;}
    .actionTitle {font-weight: 800; letter-spacing: 0.2em;padding-bottom: 1em !important;}
    .titleBtn{  font-weight: 800;
            font-size: 1em;
            color: #38565f;
            height: 50%;
            display: inline-block;
            padding-top: 40%;
    }
    @media(max-width: 468px){ #dataTitle{padding-top:0px  !important;}}

/*MYDATA*/    
    .newPersonBtn { border: 1px solid #257a94; 
        color: #257a94; 
        text-align: center;
        background-color: #fffdf5;
    }
    #myData .input-field > label {color: #f8f4e5}
    #myData input:not(.select-dropdown){color:#f8f4e5 }
    #myData select {background-color: #257a94;color: #f8f4e5;}
    #myData .datepicker-table td.is-selected {
        background-color: #94cfde;
        color: #257a94 !important;
    }

    #myData .btn:hover, #myData .btn-large:hover, #myData .btn-small:hover {border: 1px solid #257a94;
        color: #257a94;
        text-align: center;
        background-color: #fffdf5;
    }

    #myData .btn:hover.newPersonBtn, #myData .btn-large:hover.newPersonBtn, #myData .btn-small:hover.newPersonBtn {
        background-color: #257a94;
        border: none;
        color: #fffdf5;
    }

    @media(max-width: 386px){ .hideIcon{display: none !important;}}

/*VIEW*/
    #view .btn:hover, #view .btn-large:hover, #view .btn-small:hover {background-color: #59c9e6;}

    .chat{ 
        /*height: calc(100vh - 95px); */
        overflow-y: scroll; 
        overflow-x: hidden;
    }
    .cd-timeline{background-color: #257a94;}
    .cd-timeline__content>h6 {
        display: inline-block;
    }
    .cd-timeline{background-color: #257a94;}
    .cardTimeLine{
        background-color: #257a94;
        top: -15px;
        position: relative;
        margin-bottom: -2em;
    }
    
    .cd-timeline__container::before{left: 15px;}
    .container.max-width-lg {
        width: 95% !important;
        max-width: 95% !important;
    }
    .cd-timeline__img {
        width: 30px;
        height: 30px;
    }
    .cd-timeline__img--picture{background-color: #94cfde;}
    .cd-timeline__block h5 {
        margin:0;
        margin-top: -1px;
        font-size: 1.2rem;
    }
    .cd-timeline__content{padding: 10px 10px; width: 50%;}
    .cd-timeline__content::before {top: 7px;}

    .js-cd-timeline {
        padding: 10px 0px;
    }

/*UPLOAD*/
    body .upload.roseB{background-color:#f9e4e2 ;}
    .galeriaIMG{ 
        padding: 1em 0em 1em 0em;
    }
    .dropzone-contenedor{
        /*height: calc(100vh - 155px);*/
        overflow-y: auto;
        overflow-x: hidden;
    }
    .dropzone {
        min-height: 150px;
        border: 2px dashed #f9e4e2;
        border-radius: 5px;
        background: transparent;
        padding: 20px 20px;
    }
    .dropzone .dz-preview .dz-image{width: 100px;height: 100px;}
    .dropzone .dz-preview.dz-image-preview {background: transparent;}
    @media (max-width:630px) {
        .galeriaIMG{ 
            padding: 1em 0em 1em 0em;
        }
    }
    @media (max-width:600px) {
        .galeriaIMG{ 
            padding: 1em 0em 1em 0em;
        }
        .dropzone-contenedor{
            padding-top: 1em;
            overflow-y: hidden;
            overflow-x: hidden;
            height: 100%;
        }
    }
    #upload .btn:hover, #upload .btn-large:hover, #upload .btn-small:hover {
        background-color: #ffa49b;
        /*border: 1px solid #257a94;
        color: #257a94;*/
    }

    .uploadNameTitle{
        color: white;
    }

/*SHARE*/
    #share .btn:hover, #share .btn-large:hover, #share .btn-small:hover {background-color: #808ec3;}

/* NIGHT / DAY */
    .night-light-label #night-light-checkbox {
        position: absolute;
        visibility: hidden;
    }
      
    .night-light-label {
        display: block;
        margin-top: 3px;
        height: 31px;
        width: 60px;
        border: 2px solid #88b4c1;
        border-radius: 30px;
        position: relative;
        cursor: pointer;
        transform: scale(0.7);
    }
      
    .night-light-label .night-light-ball {
        position: absolute;
        width: 25px;
        height: 25px;
        top: 1px;
        left: 1px;
        border-radius: 50%;
        background: #88b4c1;
        z-index: 99;
        transition: 300ms;
    }
      
    .night-light-label #night-light-checkbox:checked + .night-light-ball {transform: translateX(28px);}
      
    .moon-svg,
    .sun-svg {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
      
    .moon-svg {right: 5px;}      
    .sun-svg {left: 5px;}
    
    /*.dark #moon-svg,
    .dark #sun-svg { fill: #e0e0e0 !important;}*/

    
/*DARK MODE*/
    .first.dark {
        transition: all 0.5s ease;
        background-color: #15414e;
    }
    .dark .bodyLogin{  background-image: url(../../img/login4.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-color: #38565f; 
    }
    .dark .petroleumB{background-color: #38565f}
    .dark #header {background: #38565f;}
    .dark #btnLastDocs {background-color: #38565f;}
    .dark .actionTitle {color: #f8f4e5;}
    .dark #btnMyData {background-color: #ebe5cc;}
    .dark #btnUpload{background-color: #cb9c9b;}
    .dark #btnView{background-color:#94cfde;}
    .dark #btnShare{background-color: #808ec3;}
    .dark #infoShare { background-color: #38565f;}
    .dark #infoCountDocs { background-color: #fffdf5;}
    .dark #infoCountDocs .gray {color:#343434;}
    .dark footer {background-color: #38565f;}
    .filter-yellow{filter: invert(94%) sepia(10%) saturate(404%) hue-rotate(6deg) brightness(98%) contrast(90%);}
    .filter-dark-blue{ filter: invert(19%) sepia(17%) saturate(1865%) hue-rotate(147deg) brightness(95%) contrast(90%);}
    /*myData*/
    .myData.dark {
        transition: all 0.5s ease;
        background-color: #ebe5cc;
    }
    .dark #myData select {background-color: #38565f; color: #f8f4e5}
    .dark #myData .datepicker-table td.is-selected {
        background-color: #94cfde;
        color: #38565f !important;
    }
    .dark .datepicker-date-display {background-color: #38565f;}
    .dark #myData .newPersonBtn {
        border: 1px solid #38565f;
        color: #38565f;
        text-align: center;
        background-color: #ebe5cc;
    }
    .dark #myData .btn:hover, .dark #myData .btn-large:hover, .dark #myData .btn-small:hover {border: 1px solid #38565f;
        color: #38565f;
        text-align: center;
        background-color: #ebe5cc;
    }
    .dark #myData .btn:hover.newPersonBtn, .dark #myData .btn-large:hover.newPersonBtn, .dark #myData .btn-small:hover.newPersonBtn {
        background-color: #38565f;
        color: #f8f4e5;
    }

    /*view*/
    .view.dark {
        transition: all 0.5s ease;
        background-color: #94cfde;
    }
    .dark .cd-timeline{background-color: #38565f;}
    .dark .cardTimeLine{background-color: #38565f;}
    #viewData1 .fixed-action-btn {
        position: absolute;
        right:auto;
        bottom:0px
    }
    #viewData1 .fixed-action-btn .btn-floating {
        border-radius: 50%;
    }
    #viewData1 .floatBtn .btn-floating{
        margin-right: 10px;
    }
    #viewData1 i.right {
        margin-left: -1px;
    }
    #viewData1 .floatBtn .btn-small i {
        font-size: 1.5rem;
    }
    #viewData1 .shareDoc i {
        margin-left: -2px;
    }
    #dialog-share .wappIcon { width: 48px;}
    .fancybox-slide--iframe .fancybox-content {
        width: 90%;
        max-width: calc(100% - 50px);
        height: 90%;
    }

    /*upload*/
    .upload.dark {
        transition: all 0.5s ease;
        background-color: #cb9c9b;
    }
    .dark #upload .btn:hover, .dark #upload .btn-large:hover, .dark #upload .btn-small:hover {
        background-color: #ffa49b;
        /*border: 1px solid #38565f;
        color: #38565f;*/
    }

    /*share*/    
    .share.dark {
        transition: all 0.5s ease;
        background-color: #b3bad4;
    }
    .swiper {
        width: 100%;
    }
    .datepicker-calendar .dropdown-trigger{
        color:black
    }
    .share_content {
        -ms-flex-positive: 1;
        flex-grow: 1;
        position: relative;
        margin-left: 1.25em;
        margin-left: var(--space-md);
        background: hsl(0, 0%, 100%);
        background: var(--color-white);
        border-radius: 0.25em;
        border-radius: var(--radius-md);
        padding: 10px 10px;
        box-shadow: 0 3px 0 hsl(205, 38%, 89%);
        box-shadow: 0 3px 0 var(--cd-color-2);
    }
    .share_content h6 {
        display: contents;
    }
    #shareData i.right {
        margin-left: -1px;
    }
    #shareData .cd-timeline{
        padding: 0;
    }
    #shareData .floatBtn .btn-small i {
        font-size: 1.5rem;
    }
    #shareData .container{
        padding: 25px 0px;
    }
    #dialog-share .input-field input,.input-field label,
    textarea,textarea:not(.browser-default):not([readonly]) {color: #666;}

    #divShareEmail{
        width: 250px;
    }
    .chat .input-field label {
        color: #f2f2f2;
    }
    .chat .input-field input, .input-field label, textarea, textarea:not(.browser-default):not([readonly]) {
        color: #f2f2f2;
    }