*{
    box-sizing: border-box;
    font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    /* font-family: 'Open Sans', sans-serif; */
    /* -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;  */
    /* height: 100%; */
}
.swal2-backdrop-show{
    backdrop-filter: blur(50px);
}
.swal2-confirm{
    background: black !important;
}
#btnRegistrar:active{
    background: black;
}
html{
    height: 100%;
}

body{
    height: 100%;
}

/* configuracion de las validaciones */
.form-group{
    margin-bottom: 35px;
      /* padding-bottom: 20px; */
    position: relative;
  }
.form-group small { 
	color: #e74c3c;
	position: absolute;
	bottom: 0;
	left: 0;
    margin-bottom: -23px;
    margin-left: 10px;
	visibility: hidden;
}

.form-group.errors small {  
	visibility: visible;
}

.form-group.success small {
    /* border: 3px solid #2ecc71; */
    /* border-color: #2ecc71; */
    visibility: hidden;
  }


#content-addOrg{
    overflow: hidden;
    /* width: 100vh; */
    height: 100vh;
    /* background-image: radial-gradient(ellipse farthest-corner at 1450px 20px , #fff 80%, rgba(0, 255, 0, 0) 0%, #ff0000 50%); */
}

/* Contenedor general (login y carousel) */
#content-login{
    overflow: hidden;
}

/* Configuración del carousel */
#carouselExampleFade img{
    min-height: 100vh;
    /* object-fit: cover; */
    /* filter: brightness(0.7) saturate(190%) blur(1.5px); */
    filter: brightness(0.9) saturate(190%) blur(.2px);
    object-position: center center;
    width: 100%;
    
}

#container-description-login{
    opacity: 0.97;
    /* filter: brightness(0.4) saturate(190%) blur(0.2px); */
    object-position: center center;
    object-fit: cover;
    backdrop-filter: saturate(1.5) brightness(0.8);
    background: linear-gradient(45deg, #000000ba, #000312);
}

#loginCarousel{
    background-image: url(../img/bg7.jpg);
    background-size: 100% 110%;
    /* opacity: .9;
    filter: saturate(150%) blur(10px); */
}

.carousel-item {
    height: 100vh;
    min-height: 500px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.carousel-caption{
    width: 70%;
    height: 16.5%;
    display: flex;
    color: white;
    /* box-shadow: 0px 10px 20px -10px #0044c1b3; */
    overflow: hidden;    
    border-radius: 15px;
    -webkit-backdrop-filter: blur(20px);
    -moz-background-filter: blur(20px);
    -o-background-filter: blur(20px);
    backdrop-filter: blur(20px);
    /* background-color: rgb(1, 42, 119, .6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(16px);  */
    
}  
.carousel-caption .letrero{
    width: 79%; 
    height: -7%;
    color: white;
    margin: 0; 
    float: right;  
    /*background:  linear-gradient(100deg, rgb(63, 129, 253, .5),   rgb(63, 129, 253), rgb(63, 129, 253),rgba( 93, 173, 226 ), rgba( 93, 173, 226 ), rgba( 93, 173, 226 )); */   
    /* background:  linear-gradient(100deg, rgb(93, 173, 226,.2),   rgb( 93, 173, 226,.4), rgba( 52, 152, 219  ), rgba(  52, 152, 219  ), rgba( 93, 173, 226 )); */
    /* background:linear-gradient(100deg, rgb(  27, 79, 114,.7), rgba( 52, 152, 219,.7), rgba(  52, 152, 219,.7), rgba( 93, 173, 226,.7)); */
    /* -webkit-backdrop-filter: blur(4px); */
    /* backdrop-filter: blur(20px);  */
}
.carousel-caption  .icono{
    background-color: rgb(1, 42, 119, .7);
    /* backdrop-filter: blur(25px); */
}

.carousel-caption h5{
    margin-left: 5%;
    padding-top: 3%;
    margin-bottom: 10px;
    font-size: 1.2rem;
    text-align: left;
    
}
.carousel-caption p{
    margin-left: 5%;
    padding-bottom: 3%;
    margin-bottom: 1px;
    font-size: 1rem;
    text-align: left;
}
/* Fin Configuración del carousel */

/* Estilos del logo */
.logoSensanet{
    
    margin-right: 20px;
    border-radius: 15px;
    display: flex;
    justify-content: flex-end;
    width: 50px;
    height: 50px;
    filter: saturate(2);
    /* box-shadow: 0px 5px 15px -10px #0044c1b3; */
    box-shadow: 5px 5px 0px 0px #f1f5fb;
    /* background: linear-gradient(120deg, rgb(255, 252, 252),  rgb(250, 250, 250,.1), rgba(145, 223, 247, 0.1), rgba(145, 223, 247, 0.3)); */
    /* background: linear-gradient(to bottom right, rgb(255, 252, 252), rgb(250, 250, 250), rgba(145, 223, 247, 0.562)); */

}

.logoSensanet img{
    /* padding-top: 9px; */
    width: 50px;
}

/* Form del login */
#loginBox{
    min-height: 90vh;
}

#loginBoxSize{
    width: 78%;
    border: 1px solid #ebebeb;
    border-radius: 20px;
    padding: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
}

#login-email{
    border: 1.5px;
    border-style: solid;
    border-color: white;
    border-radius: 15px;
    background-color: #f2f5fc;
    height: 45px;
    font-weight: 600;
    font-size: 1.1em;
    padding-top: 25px;
    padding-bottom: 25px;
}


#login-email:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

#login-password{
    border: 1.5px;
    border-style: solid;
    border-color: white;
    border-radius: 18px;
    background-color: #f2f5fc;
    height: 45px;
    font-weight: 600;
    font-size: 1.1em;
    border-end-end-radius: unset;
    border-start-end-radius: unset;
    padding-top: 25px;
    padding-bottom: 25px;
}

#login-password:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.eyePass{
    background-color: #f2f5fa;
    border-bottom-right-radius: 18px ;
    border-top-right-radius:  18px;
    height: 50px;
    padding-right: 10px;
}

/* Form resetPass */
#ResetPassBox{
    min-height: 90vh;
}

#ResetPassBoxSize{
    width: 80%;
}

#recover-email{
    border: 0px;
    border-radius: 15px;
    background-color: #f2f5fa;
    height: 45px;
}

#recover-email:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
#resetPass-password{
    border: 1.5px;
    border-style: solid;
    border-color: #dedfe2;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color: #f2f5fa;
    height: 45px;
}

#resetPass-password:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
#conf-pass-password{
    border: 1.5px;
    border-style: solid;
    border-color: #dedfe2;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color: #f2f5fa;
    height: 45px;
}

#conf-pass-password:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}


/* Botón para ingresar */
#btnIngresar{
    background-color: black;
    border: 0px;
    border-radius: 15px;
    color: white; 
    height: 55px;
    font-weight: 700;
    outline: none !important;
}

#btnIngresar:hover{
    background-color: rgb(32, 32, 32);
    color: white;
}
#btnIngresar:focus{
    background-color: rgb(14, 14, 14);
    color: white;
    border: 0;
}

#btnIngresar2{
    background-color: black;
    border: 0px;
    border-radius: 15px;
    box-shadow: 0px 10px 20px -10px #0044c1b3;
    color: white; 
    height: 55px;
}

#btnIngresar2:hover{
    background-color: black;
    color: white;
}

#btnIngresar2:focus{
    background-color: black;
    color: white;
    border: 4px solid #64b5f6;
}
#btnIngresarPass{
    background-color: black;
    border: 0px;
    border-radius: 15px;
    box-shadow: 0px 10px 20px -10px #0044c1b3;
    color: white; 
    height: 55px;
}

#btnIngresarPass:hover{
    background-color: black;
    color: white;
}


/******************/
/* form Registrar */
#register-name {
    border: 1.5px;
    border-style: solid;
    border-color: #dedfe2;
    border-radius: 15px;
    background-color: #f9f9f9;
    height: 40px;
    width: 15px;
    
}

#register-lastName{
    border: 1.5px;
    border-style: solid;
    border-color: #dedfe2;
    border-radius: 15px;
    background-color: #f9f9f9;
    height: 40px;
}

#register-email{
    border: 1.5px;
    border-style: solid;
    border-color: #dedfe2;
    border-radius: 15px;
    background-color: #f9f9f9;
    height: 40px;
}

#register-name:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

#register-lasteName:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

#register-email:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

#register-pass{
    border: 1.5px;
    border-style: solid;
    border-color: #dedfe2;
    border-radius: 15px;
    background-color: #f9f9f9;
    height: 40px;
}

#register-confirmPass{
    border: 1.5px;
    border-style: solid;
    border-color: #dedfe2;
    border-radius: 15px;
    background-color: #f9f9f9;
    height: 40px;
}

#register-pass:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

#register-confirmPass:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

#eyePassRegister{
    background-color: #f2f5fa;
    border-bottom-right-radius: 15px ;
    border-top-right-radius:  15px;
    height: 45px;
    padding-right: 10px;
}

#eyePassConfirmRegister{
    background-color: #f2f5fa;
    border-bottom-right-radius: 15px ;
    border-top-right-radius:  15px;
    height: 45px;
    padding-right: 10px;
}

/* Botón para ingresar */
#btnRegistrar{
    background-color: black;
    border: 0px;
    border-radius: 15px;
    color: white;
    height: 55px;
    font-weight: 700;
}

#btnRegistrar:hover{
    background-color: rgba(0, 0, 0, 0.945);
    color: white;
}
#btnRegistrar:focus{
    background-color: black;
    color: white;
}
/* /form Registrar */

/* Ajuste del login por tamaño de pantalla */
input::placeholder {
    font-size: .9em;

}



.formTitles{
    font-size: .9em;
}

.formLink {
    font-size: .9em
}

/**********************************************************/
/************/
/* Add Org */
/************/
#addOrg-orgName{
    border: 0px;
    border-radius: 15px;
    background-color: #f2f5fa;
    height: 45px;
}


#addOrg-orgName:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

#addOrg-orgAlias{
    border: 0px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color: #f2f5fa;
    height: 45px;
}

#addOrg-orgAlias:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

/* Buttons to validate its name and create org */
#btnValidar{
    background-color: rgb(109, 204, 96);
    border: 0px;
    border-radius: 15px;
    box-shadow: 0px 10px 20px -10px #0044c1b3;
    color: white; 
    height: 45px;
}

#btnValidar:hover{
    background-color: #538ee0;
    color: white;
}

#btnCrear{
    border: 0px;
    border-radius: 15px;
    color: white; 
    height: 55px;
}

#btnCrear:hover{
    background-color: #538ee0;
    color: white;
}

/* Logo sensanet */
#logoSensanetAddOrg{
    height: 20px;
}

/************/
/* /Add Org */
/************/

/*************/
/* Add Users */
/*************/
#loginBoxAddUserSize{
    width: 80%;
}

#addUser-email{
    border: 0px;
    border-radius: 15px;
    background-color: #f2f5fa;
    height: 45px;
}

#addUser-email:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

#addUser-pass{
    border: 0px;
    border-radius: 15px;
    background-color: #f2f5fa;
    height: 45px;
}

#addUser-pass:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

#addUser-confirm-pass{
    border: 0px;
    border-radius: 15px;
    background-color: #f2f5fa;
    height: 45px;
}

#addUser-confirm-pass:focus{
    outline: none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

/* Buttos */
#btnAddUser{
    background-color: #0064ee;
    border: 0px;
    border-radius: 15px;
    box-shadow: 0px 10px 20px -10px #0044c1b3;
    color: white; 
    height: 55px;
}

#btnAddUser:hover{
    background-color: #538ee0;
    color: white;
}

#btnFinalizar{
    background-color: rgb(109, 204, 96);
    border: 0px;
    border-radius: 15px;
    box-shadow: 0px 10px 20px -10px #a4ff92b3;
    color: white; 
    height: 45px;
}

#btnFinalizar:hover{
    background-color: rgb(176, 235, 168);
    color: white;
}
.msg{
    font-size: 5rem; 

}
#sectionstrsignup{
    font-size: 3rem;
}
/**************/
/* /Add Users */
/**************/
/**********************************************************/
.msg{
   color:white
}
#text-container-description-login{
    height: 70%;
    position: absolute;
    width: 100%;
    left: 0%;
    top: 25%;
    border-radius: 3em;
}
@media screen and (min-width: 300px) and (max-width: 500px){

    #carouselExampleFade {
        display: none;
    }

    #container-description-login{
        display: none;
    }

    #text-container-description-login{
        display: none !important;
    }

    #loginBoxSize{
        background-color: white;
        border-radius: 20px;
        padding: 20px;
        padding-bottom: 5em;
    }

    #loginBox {
        width: 30rem;
        margin-left: auto; 
        margin-right: auto; 
        float: right;
        opacity: 1;
        position: absolute;
        width: 120%;
        padding: 0;
    }
    
    #carus{
        visibility: hidden;
    }

    #loginCarousel{
        visibility: hidden;
    }

    body{
        background-image: url(../img/netmonitor-login.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover; 
    }

    .a-size {
        font-size: .9em;
        color: black;
        font-weight: bolder;
    }
    
    .p-size {
        font-size: .9em;
    }
    
    .formTitles{
        font-size: .9em;
        font-weight: bolder;
    }

    .h1Title {
        color: black;
        font-weight: bolder;
    }
    .col-5{
        flex: 0; 
        max-width: 100%;
        position: absolute;

    }


    
}

@media screen and (min-width: 501px) and (max-width: 770px){

    #carouselExampleFade {
        display: none;
    }

    #container-description-login{
        display: none;
    }

    #text-container-description-login{
        display: none !important;
    }

    #loginBoxSize{
        background-color: white;
        border-radius: 20px;
        padding: 20px;
        width: 70%;
        left: 8%;
        position: absolute;
    }

    #loginBox {
        width: 30rem;
        margin-left: auto; 
        margin-right: auto; 
        float: right;
        opacity: 1;
        position: absolute;
        width: 100%;
        padding: 0;
    }
    #carus{
        visibility: hidden;
    }

    #loginCarousel{
        visibility: hidden;
    }

    body{
        background-image: url(../img/netmonitor-login.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover; 
    }

    .formTitles{
        font-size: .9em;
        font-weight: bolder;
    }

    .h1Title {
        color: black;
        font-weight: bolder;
    }
    .col-5{
        flex: 0; 
        max-width: 100%;
        position: absolute;

    }
    #login-box{
        position: absolute !important;
        width: 100% !important;
        padding: 0 !important;
    }


}

@media screen and (min-width: 1051px) and (max-width: 1850px){
    .msg{
        padding-top: 40px;
        font-size: 4rem; 
    
    }
    #c{
        margin-top: 0em;
    }
    #showpswrd{

        margin-top: -20px;

    }
    #sectionstrsignup{
        font-size: 2.5rem;
    }
    .user label, .user p{
        font-size: 0.8rem;
        color:#313745
    }
    #lesspadding .mb-4{
        margin-bottom: 0.5em !important;
        padding-bottom: 0.5em;
    }
    .col-5{
        

    }
    #loginBox {
        width: 30rem;
        margin-left: auto; 
        margin-right: auto; 
        float: right;
        opacity: 1;
        position: absolute;
        width: 120%;
        padding: 0;
        left: 0;
        top:2em
    }
    
}
@media screen and (min-width: 771px) and (max-width: 1050px){
    #carouselExampleFade {
        display: none;
    }

    #container-description-login{
        display: none;
    }

    #text-container-description-login{
        display: none !important;
    }

    #loginBox {
        width: 30rem;
        margin-left: auto; 
        margin-right: auto; 
        float: right;
        opacity: 1;
        position: absolute;
        width: 100%;
        padding: 0;
    }

    #loginBoxSize{
        background-color: white;
        border-radius: 20px;
        padding: 20px;
        position: absolute;
        width: 70%;
        left: 5%;
    }

    #carouselExampleFade{
        width: 30rem;
        margin-left: auto; 
        margin-right: 45%;
        float: right;
    }
    #carus{
        visibility: hidden;
    }

    #loginCarousel{
        visibility: hidden;
    }

    body{
        background-image: url(../img/netmonitor-login.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover; 
    }

    .formTitles{
        font-size: .9em;
        font-weight: bolder;
    }

    .h1Title {
        color: black;
        font-weight: bolder;
    }
    .col-5{
        flex: 0; 
        max-width: 100%;
        position: absolute;

    }
    #login-box{
        position: absolute !important;
        width: 100% !important;
        padding: 0 !important;
    }
    

}

/* Timeline */
ul.timeline {
    list-style-type: none;
    position: relative;
}
ul.timeline p{
    color: gray;
}
.modal-body img{
    height: 250px;
    width: 300px;
}
ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
    width: 500px;
}
ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

@media screen and (min-width: 500px) and (max-width: 1000px){
    body{
        background: white;
    }
    .col-5{
        flex: 0; 
        max-width: 100%;
        position: absolute;

    }
    #loginBox {
        width: 30rem;
        margin-left: auto; 
        margin-right: auto; 
        float: right;
        opacity: 1;
        position: absolute;
        width: 100%;
        padding: 0;
    }
}

@media (min-width: 576px){
.container, .container-sm {
    max-width: 100%;
}
}