@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
body {
    font-family: 'Helvetica';
    background: #fafafa;
    -webkit-font-smoothing: antialiased;
}

hgroup { 
	text-align:center;
	margin-top: 4em;
}


#form {
	width: 380px;
	margin: 2em auto;
	padding: 2em 2em 2em 2em;
	background: #fafafa;
	border: 1px solid #ebebeb;
	box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}

.group { 
	position: relative; 
	margin-bottom: 45px; 
}

input {
	font-size: 18px;
	padding: 10px 10px 10px 5px;
	-webkit-appearance: none;
	display: block;
	background: #fafafa;
	color: #636363;
	width: 100%;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #757575;
}

input:focus { outline: none; }


/* Label */

.labelInput {
	color: #999; 
	font-size: 18px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 5px;
	top: 10px;
	transition: all 0.2s ease;
}


/* active */

input:focus ~ label, input.used ~ label {
	top: -24px;
  transform: scale(0.9); left: 0px;
	/* font-size: 14px; */
	color: #ec1a49;
    font-weight: 600;
}


/* Underline */

.bar {
	position: relative;
	display: block;
	width: 100%;
}

.bar:before, .bar:after {
	content: '';
	height: 2px; 
	width: 0;
	bottom: 1px; 
	position: absolute;
	background: #ec1a49; 
	transition: all 0.2s ease;
}

.bar:before { left: 50%; }

.bar:after { right: 50%; }


/* active */

input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }


/* Highlight */

.highlight {
	position: absolute;
	height: 60%; 
	width: 100px; 
	top: 25%; 
	left: 0;
	pointer-events: none;
	opacity: 0.5;
}


/* active */

input:focus ~ .highlight {
	animation: inputHighlighter 0.3s ease;
}


/* Animations */

@keyframes inputHighlighter {
	from { background: #4a89dc; }
	to 	{ width: 0; background: transparent; }
}


/* Button */

.button {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  margin: .3em 0 1em 0;
  width: 100%;
  vertical-align: middle;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  letter-spacing: 1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid #3160B6;
  cursor: pointer;
  transition: all 0.15s ease;
}
.button:focus { outline: 0; }


/* Button modifiers */

.buttonBlue {
  background: #4a89dc;
  text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}

.buttonBlue:hover { background: #357bd8; }


/* Ripples container */

.ripples {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}


/* Ripples circle */

.ripplesCircle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.ripples.is-active .ripplesCircle {
  animation: ripples .4s ease-in;
}


/* Ripples animation */

@keyframes ripples {
  0% { opacity: 0; }

  25% { opacity: 1; }

  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}

footer { text-align: center; }

footer img {
	width: 100px;
	transition: all .2s ease;
}

.fondoLogin {
    background-repeat: no-repeat;
                background-attachment: fixed;
                background-size: 100% 100%;
    background: linear-gradient(#d8d8d8, #ffffff) !important;
}

.ingresar{
    background-color: #ec1a49;
    color: #ffffff;
}

.ingresar:hover{
    background-color: #ee2f58;
    color: #ffffff;
}

.btnIndividual{
    background-color: #ec1a49;
    color: #ffffff;
}

.btnIndividual:hover{
    background-color: #ffffff;
    color: #ee2f58;
    border-color: #ee2f58;
}

p {
    font-family: 'Helvetica';
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

.user-name {
    color: #333f4f;
    font-weight: bold;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #E5E5E5;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    width: 100%!important;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none!important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh;
    background: #ffffff;
    color: rgb(0, 0, 0);
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

/*#sidebar .sidebar-header {
    padding: 20px;
    background: #004FA8;
}*/

#sidebar ul {
    min-height: 100%;
}

#sidebar ul p {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.1em;
    display: block;
}

#barra ul li a {
    padding: 10px;
    font-size: 1em;
    display: block;
}

#barra ul li a:hover {
    color: #6c6b73;
}

#barra ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
}

#barra ul li.active>a,
a[aria-expanded="true"] {
    color: #eb1c4c;
}

#barra ul li a,
a[aria-expanded="true"] {
    color: #000000;
}

#sidebar ul li.activeConf>a,
a[aria-expanded="true"] {
    color: #000000;
    background: #fba51a;
}

a[data-bs-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #004FA8;
}

.fa-power-off {
    font-size: 20px;
}

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}





.pagination_link {
    cursor: pointer;
}






@media(max-width:768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0px;
    }
    #sidebarCollapse span {
        display: none;
    }
}

.border-md {
    border-width: 2px;
}

.form-control:not(select) {
    padding: 1rem 0.5rem;
}

select.form-control {
    height: 52px;
    padding-left: 0.5rem;
}

.form-control::placeholder {
    color: #ccc;
    font-weight: bold;
    font-size: 0.9rem;
}

.form-control:focus {
    box-shadow: none;
}

.logo {
    width: 100%;
}

.btn-registro {
    background-color: #004FA8;
}

.btn-registro-text {
    color: #fff;
}

.card-signin {
    border: 0;
    border-radius: 5px;
    box-shadow: 0 0.1rem 1rem 0 rgba(0, 0, 0, 0.2);
}

.card-signin .card-title {
    margin-bottom: 2rem;
    font-weight: 300;
    font-size: 1.5rem;
}

.card-signin .card-body {
    padding: 2rem;
}

.form-signin {
    width: 100%;
}

.form-signin .btn {
    font-size: 80%;
    border-radius: 5px;
    letter-spacing: .1rem;
    font-weight: bold;
    padding: 1rem;
    transition: all 0.2s;
}

.progress.active .progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}

.bar {
    color: blue;
    background-color: blue;
}

.modal-trash {
    color: red;
    font-size: 100px;
}

#mensaje {
  display: inline-block;
  vertical-align: top;
  /*margin: 0;*/
  /*margin-left: 42%;*/
}

canvas{
    max-width: 500px;
}

.iconoMiCuenta {
    background: #ff7910;
    /*background: linear-gradient(to bottom right, #fba51a 20%, #f37020 80%);*/
}

.iconoOMMenu i {
    transition: all .3s;
}

.iconoOMMenu:hover, .iconoOMMenu:hover i {
    color: #fba51a !important;
}

.iconoVer i, .iconoEditar i, .iconoEliminar i, .iconoCerrarSesion i, .iconoAgregarT i, .iconoEditarT i, .iconoEditarSSID i, .iconoEliminarSSID i, .iconoEditarAPSSSID i, .iconoEliminarAPSSSID i {
    transition: all .3s;
}

.iconoVer, .iconoEditar, .iconoEliminar, .iconoCerrarSesion,  .iconoAgregarT, .iconoEditarT, .iconoEditarSSID, .iconoEliminarSSID, .iconoEditarAPSSSID, .iconoEliminarAPSSSID {
    box-shadow: none !important;
}

.iconoVer:hover, .iconoVer:hover i {
    color: #3358fd !important;
}

.iconoAgregarT:hover, .iconoAgregarT:hover i {
    color: #fff !important;
    border-color: #fba51a !important;
    background-color: #fba51a !important;
}
.iconoEditarT:hover, .iconoEditarT:hover i {
    color: #fff !important;
    border-color: #f36f1e !important;
    background-color: #f36f1e !important;
}
.iconoEliminarT:hover, .iconoEliminarT:hover i {
    color: #fff !important;
    border-color: #ff0d0d !important;
    background-color: #ff0d0d !important;
}

.iconoEditar:hover, .iconoEditar:hover i {
    color: #000000 !important;
}
.iconoEliminar:hover, .iconoEliminar:hover i {
    color: #000000 !important;
}
.iconoCerrarSesion:hover, .iconoCerrarSesion:hover i {
    color: #ee2f58 !important;
}

.iconoEditarSSID:hover, .iconoEditarSSID:hover i {
    color: #000000 !important;
}
.iconoEliminarSSID:hover, .iconoEliminarSSID:hover i {
    color: #000000 !important;
}

.iconoEditarAPSSSID:hover, .iconoEditarAPSSSID:hover i {
    color: #ffffff !important;
}
.iconoEliminarAPSSSID:hover, .iconoEliminarAPSSSID:hover i {
    color: #ffffff !important;
}

.cardResumen {
    border-color: #585d62;
}

.divTituloCardRes {
    z-index: 1;
}

.tituloCardRes {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    height: auto;
    text-align: center;
    background: #585d62;
}

.cuerpoCard {
    background-color: #f3f3f3;
}

.sweet-alert{
    margin-left: -239px !important;
}

.scrollResumen {
    height:660px;
    overflow-y: scroll;
}

.scrollISP {
    height:460px;
    overflow-y: scroll;
}

.scrollNAS {
    height:500px;
    overflow-y: scroll;
}

.scrollFirewall {
    height:800px;
    overflow-y: scroll;
}

.scrollVPN {
    height:670px;
    overflow-y: scroll;
}

.scrollServidores {
    height:450px;
    overflow-y: scroll;
}

.scrollSoftware {
    height:800px;
    overflow-y: scroll;
}

.scrollConmutadores {
    height:800px;
    overflow-y: scroll;
}

.scrollCatalagosImportacion {
    height:200px;
    overflow-y: scroll;
}

.scrollImportacion {
    height:600px;
    overflow-y: scroll;
}

.scrollVlans {
    height:120px;
    overflow-y: scroll;
}

.border {
    border: 3px solid #dee2e6!important;
    border-radius: 5px;;
}

.accordionPadre:not(.collapsed) {
    box-shadow: none !important;
}

.btnAP:not(.collapsed) {
    box-shadow: none !important;
}

.accordionPadre:focus, .btnAP:focus, .btn:focus, .btn-close:focus {
    box-shadow: none !important;
}

.accordionPadre:not(.collapsed)::after {
    filter: brightness(0%) invert(100%);
}

.accordionPadre:is(.collapsed)::after {
    filter: brightness(0%) invert(100%);
}



.btnAgregarEditar {
    background-color: #df9216;
}
.btnAgregarEditar:hover {
    background-color: #ce8715;
}

.btnImportar {
    color: #ce8715;
    background-color: #fff;
    border: 1px solid #ce8715;
}
.btnImportar:hover {
    background-color: #ce8715;
    color: #fff;
}

.fondoOscuro2 {
    background-color: rgba(0,0,0,0.2);
}
.dropdown-item:active {
    background-color: #ee7523 !important;
}

#ip1C, #ip2C, #ip3C, #ip4C, #ip1CAct, #ip2CAct, #ip3CAct, #ip4CAct, #ipSFGA1C, #ipSFGA2C, #ipSFGA3C, #ipSFGA4C, #ipSFGA1CAct, #ipSFGA2CAct, #ipSFGA3CAct, #ipSFGA4CAct, #ip1C::placeholder, #ip2C::placeholder, #ip3C::placeholder, #ip4C::placeholder, #ip1CAct::placeholder, #ip2CAct::placeholder, #ip3CAct::placeholder, #ip4CAct::placeholder, #ipSFGA1C::placeholder, #ipSFGA2C::placeholder, #ipSFGA3C::placeholder, #ipSFGA4C::placeholder, #ipSFGA1CAct::placeholder, #ipSFGA2CAct::placeholder, #ipSFGA3CAct::placeholder, #ipSFGA4CAct::placeholder {
    text-align: center;
}

.btnVerCatalogo {
    background-color: #fba51a;
}


/* CAMBIO BLANCO Y NEGRO */
#cambioBN:hover, #cambioBN:hover i {
    color: #1e1afb !important;
}
.navbarBN{
    background: #313131;
}
.textoBN{
    color: #fafafa !important;
}
.bodyB{
    background: #fafafa;
}
.bodyN{
    background: #666666;
}
.bgInputBN{
    background-color: #f5f5f5;
}
.borde{
    border: 1px solid #585d62;
}
.borderBN{
    border: 1px solid #ffffff;
}
.bodyNCatalogos{
    background: #858585;
}