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

p {
    font-family: 'Roboto', sans-serif;
    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;
}

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

#sidebar ul li a:hover {
    color: #ee7523;
    background: #fff;
}

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

#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, .iconoAgregarT i, .iconoEditarT i, .iconoEditarSSID i, .iconoEliminarSSID i, .iconoEditarAPSSSID i, .iconoEliminarAPSSSID i {
    transition: all .3s;
}

.iconoVer, .iconoEditar, .iconoEliminar, .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: #ff7910 !important;
}
.iconoEliminar:hover, .iconoEliminar:hover i {
    color: #ff0d0d !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;
}