/**
 *
 * You can write your CSS code here, DO NOT touch the default JavaScript file
 * because it will make it harder for you to update.
 * 
 */

/*# sourceMappingURL=custom.css.map */

:root {
    --bluesea: rgb(13, 71, 161);
    --lightblack: #212529;
    --firered:#ab0b00;
    --yellow:#ffea00;
}

img {
    width: 16px;
    height: 16px;
}

.sidebar-brand > a:hover{
    cursor: default;
}

.text-blue{
    color: var(--bluesea);
}

.text-orange{
    color: orange;
}

.home{
    content: url("../../img/blue_home.svg");
}

.device{
    content: url("../../img/blue_device.svg");
}

.gateway{
    content: url("../../img/blue_gateway.svg");
}

.main-sidebar .sidebar-menu li.active a, .card .card-header h4{
    box-shadow: none;
    color:  var(--bluesea) ;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a {
    color: var(--bluesea);
    font-weight: 600;
}

body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a {
    background-color: var(--bluesea);
    color: #fff;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover {
    color: var(--bluesea);
    background-color: inherit;
}

.nav-pills .nav-item .nav-link{
    color:  var(--bluesea) ;
}

#sidebar a{
    cursor: pointer;
}

.bg-blue,.nav-pills .nav-item .nav-link.active{
    background-color: var(--bluesea) !important;
}

#header-console{
    color: white !important;
}

.clickable{
    cursor: pointer;
}

.accordion-console .accordion-console-header[aria-expanded="true"]{
    background-color: var(--bluesea);
    color: white;
}

.accordion-console .accordion-header-console{
    background-color: var(--bluesea);
    cursor: pointer;
    transition: all .5s;
    padding: 10px 15px;
}

.accordion-console .accordion-header-console h4{
    color: white;
    line-height: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

#console-body{
    background-color: var(--lightblack);
    height: 300px;
}

.btn-sim{
    border-color:white !important;
    border-width: medium !important;
    border-radius: 0.50rem !important;
}

.btn{
    border-color:var(--bluesea) !important;
    border-width: medium !important;
    border-radius: 0.50rem !important;
}

.btn-play {
    content: url("../../img/white_play.svg");
}

.btn-sim:hover > .btn-play, .btn-sim:active > .btn-play,.btn-sim:focus > .btn-play {
    content: url("../../img/blue_play.svg");
}

.btn-sim:hover > .btn-stop, .btn-sim:active > .btn-stop,.btn-sim:focus > .btn-stop{
    content: url("../../img/blue_stop.svg");
}

.btn-stop {
    content: url("../../img/white_stop.svg");
}

.btn-clean > img {
    content: url("../../img/white_delete.svg");
}

.btn-clean:hover > img, .btn-clean:active > img, .btn-clean:focus > img {
    content: url("../../img/blue_delete.svg");
}

.btn-classic{
    background-color: white;  
    color: var(--bluesea);
}

.btn-classic:hover, .btn-classic:active, .btn-classic:focus{
    background-color:  var(--bluesea)!important;
    color: white !important ;  
}

.btn-edit{
    color: var(--yellow)!important;
    border-color: var(--yellow)!important;
    border-width: medium;
    border-radius: 0.50rem;
}

.btn-edit:hover{
    background-color: var(--yellow) !important;
    color: white !important;
}

.btn-generate > img{
    content: url("../../img/blue_generate.svg");
}

.btn-generate:hover > img, .btn-generate:active > img, .btn-generate:focus > img{
   content: url("../../img/white_generate.svg");
}

.btn-del{
    color: var(--firered)   !important;
    border-color:var(--firered) !important ;
    border-width: medium;
    border-radius: 0.50rem;
}

.btn-del:hover{    
    background-color:var(--firered) !important ;
    color: white !important;
}

.btn-watch > img{
    content: url("../../img/blue_visibility.svg");
}

.btn-watch > img.seeOFF{
    content: url("../../img/blue_visibility_off.svg");
}

.btn-watch:hover > img,.btn-watch:active > img, .btn-watch:focus > img{
    content: url("../../img/white_visibility.svg");
}

.btn-watch:hover > img.seeOFF, .btn-watch:active > img.seeOFF, .btn-watch:focus > img.seeOFF{
    content: url("../../img/white_visibility_off.svg");
}

.btn-group .btn.active {
    background-color: var(--bluesea);
    color: white;
}

.hide{
    display: none;
}

.w-33{
    width: 33.3% !important;
}