.Color-ramas{
    background-color:#002966;
    color:#fff
}

.Color-ramas i{ 
    color:#fff
}
.skin-blue-light .main-header .navbar{
    background-color:#002966
}
.skin-blue-light .main-header .navbar .nav>li>a{
    color:#fff
}
.skin-blue-light .main-header .navbar .nav>li>a:hover,.skin-blue-light .main-header .navbar .nav>li>a:active,.skin-blue-light .main-header .navbar .nav>li>a:focus,.skin-blue-light .main-header .navbar .nav .open>a,.skin-blue-light .main-header .navbar .nav .open>a:hover,.skin-blue-light .main-header .navbar .nav .open>a:focus{
    background:rgba(0,0,0,0.1);
    color:#f6f6f6
}
.skin-blue-light .main-header .navbar .sidebar-toggle{
    color:#fff
}
.skin-blue-light .main-header .navbar .sidebar-toggle:hover{
    color:#f6f6f6;
    background:rgba(0,0,0,0.1)
}
.skin-blue-light .main-header .navbar .sidebar-toggle{
    color:#fff
}
.skin-blue-light .main-header .navbar .sidebar-toggle:hover{
    background-color:#367fa9
}
@media (max-width:767px){
    .skin-blue-light .main-header .navbar .dropdown-menu li.divider{
        background-color:rgba(255,255,255,0.1)
    }
    .skin-blue-light .main-header .navbar .dropdown-menu li a{
        color:#fff
    }
    .skin-blue-light .main-header .navbar .dropdown-menu li a:hover{
        background:#367fa9
    }
}
.skin-blue-light .main-header .logo{
    background-color:#002966;
    color:#fff;
    border-bottom:0 solid transparent
}
.skin-blue-light .main-header .logo:hover{
    background-color:#3b8ab8
}
.skin-blue-light .main-header li.user-header{
    background-color:#002966
}
.skin-blue-light .content-header{
    background:transparent
}
.skin-blue-light .wrapper,.skin-blue-light .main-sidebar,.skin-blue-light .left-side{
    background-color:#f9fafc
}
.skin-blue-light .content-wrapper,.skin-blue-light .main-footer{
    border-left:1px solid #d2d6de
}
.skin-blue-light .user-panel>.info,.skin-blue-light .user-panel>.info>a{
    color:#444
}
.skin-blue-light .sidebar-menu>li{
    -webkit-transition:border-left-color .3s ease;
    -o-transition:border-left-color .3s ease;
    transition:border-left-color .3s ease
}
.skin-blue-light .sidebar-menu>li.header{
    color:#848484;
    background:#f9fafc
}
.skin-blue-light .sidebar-menu>li>a{
    border-left:3px solid transparent;
    font-weight:600; 
}
.skin-blue-light .sidebar-menu>li:hover>a,.skin-blue-light .sidebar-menu>li.active>a{
    color:#000;
    background:#f4f4f5
}
.skin-blue-light .sidebar-menu>li.active{
    border-left-color:#3c8dbc
}
.skin-blue-light .sidebar-menu>li.active>a{
    font-weight:600
}
.skin-blue-light .sidebar-menu>li>.treeview-menu{
    background:#f4f4f5
}
.skin-blue-light .sidebar a{
    color:#444
}
.skin-blue-light .sidebar a:hover{
    text-decoration:none
}
.skin-blue-light .treeview-menu>li>a{
    color:#777
}
.skin-blue-light .treeview-menu>li.active>a,.skin-blue-light .treeview-menu>li>a:hover{
    color:#000
}
.skin-blue-light .treeview-menu>li.active>a{
    font-weight:600
}
.skin-blue-light .sidebar-form{
    border-radius:3px;
    border:1px solid #d2d6de;
    margin:10px 10px
}
.skin-blue-light .sidebar-form input[type="text"],.skin-blue-light .sidebar-form .btn{
    box-shadow:none;
    background-color:#fff;
    border:1px solid transparent;
    height:35px;
    -webkit-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out
}
.skin-blue-light .sidebar-form input[type="text"]{
    color:#666;
    border-top-left-radius:2px !important;
    border-top-right-radius:0 !important;
    border-bottom-right-radius:0 !important;
    border-bottom-left-radius:2px !important
}
.skin-blue-light .sidebar-form input[type="text"]:focus,.skin-blue-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{
    background-color:#fff;
    color:#666
}
.skin-blue-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{
    border-left-color:#fff
}
.skin-blue-light .sidebar-form .btn{
    color:#999;
    border-top-left-radius:0 !important;
    border-top-right-radius:2px !important;
    border-bottom-right-radius:2px !important;
    border-bottom-left-radius:0 !important
}
@media (min-width:768px){
    .skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{
        border-left:1px solid #d2d6de
    }
}
.skin-blue-light .main-footer{
    border-top-color:#d2d6de
}
.skin-blue.layout-top-nav .main-header>.logo{
    background-color:#3c8dbc;
    color:#fff;
    border-bottom:0 solid transparent
}
.skin-blue.layout-top-nav .main-header>.logo:hover{
    background-color:#3b8ab8
}




.panel-botones{
    padding:15px 30px 15px;
    background-color:#84B6F4;
    border-top:1px solid #ddd;
    border-radius:20px;
}

/* =================================== */
.containerpelotas{   
  display: grid;
    place-content: center;
    height: 100vh;
}
.cargando{
    width: 120px;
    height: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
  margin: 0 auto; 
}
.texto-cargando{ 
  padding-top:20px
}
.cargando span{
    font-size: 20px;
    text-transform: uppercase;
}
.pelotas {
    width: 30px;
    height: 30px;
    background-color: #002966;
    animation: salto .5s alternate
    infinite;
  border-radius: 50%  
}
.pelotas:nth-child(2) {
    animation-delay: .18s;
}
.pelotas:nth-child(3) {
    animation-delay: .37s;
}
@keyframes salto {
    from {
        transform: scaleX(1.25);
    }
    to{
        transform: 
        translateY(-50px) scaleX(1);
    }
}

.containerpelotas_principal{
   display: none;
}

/* =================================== */