@font-face {
    font-family: '3OF9';
    src: url('../font/3OF9.TTF') format('truetype');
}

  
html {
    width: 100%;
    height: 100%;
    min-height: 100%;
}


body {
  background-color: #f3f3f3;
   
       
}


 .statusbar{
       background:#4285F4;   
 
border-style:none;  color: white;
margin-bottom:10px;
        }
         
          .statusbar a
         {
             color: white!important;
         }

         .statusbar .dropdown-menu a
           {
             color: black!important;
         }
              
       
 
    
  .gradient-1{
 background: rgb(254,254,254);
background: linear-gradient(101deg, rgba(254,254,254,1) 0%, rgba(248,250,250,1) 35%, rgba(243,243,243,1) 100%); 
        }
   .gradient-4{
background: rgb(254,254,254);
background: linear-gradient(263deg, rgba(254,254,254,1) 0%, rgba(248,250,250,1) 39%, rgba(243,243,243,1) 100%);
        }
   .gradient-2{
      background: rgb(254,254,254);
background: linear-gradient(180deg, rgba(254,254,254,1) 0%, rgba(248,250,250,1) 35%, rgba(243,243,243,1) 100%);
  }
   .gradient-3{
       background: rgb(254,254,254);
background: linear-gradient(0deg, rgba(254,254,254,1) 0%, rgba(248,250,250,1) 35%, rgba(243,243,243,1) 100%);
  }
 

.gradient-5 {
    background: rgb(255,230,129);
    background: linear-gradient(70deg, rgba(255,230,129,1) 0%, rgba(255,255,255,1) 100%);
}


.z-depth-0 {
 
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

 .Menubox {
               background-color: rgba(255, 255, 255, 5);
               -webkit-backdrop-filter: blur(1px) contrast(0.1);
               backdrop-filter: blur(1px) contrast(0.1);
           }

           .MenuboxHead {
               background-color: rgba(255, 255, 255, 0.3);
               -webkit-backdrop-filter: blur(15px) contrast(.8);
               backdrop-filter: blur(10px) contrast(0.5) !important;
               border-style: none;
           }

           .box {
                background-color: rgba(255, 255, 255, 0.3);
            -webkit-backdrop-filter: blur(15px) contrast(.8);
            backdrop-filter: blur(10px) contrast(0.5) !important;
            border-style: none;
           }

.z-depth-1  {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

    .z-depth-1-half, .btn:hover, .btn-floating:hover {
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    }

.z-depth-2 {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-3 {
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-4 {
    box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}

.z-depth-5 {
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}


.hoverable:hover {
     
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.tile12 {
    color: white !important;
    background-color: #009688 !important;
}
 

.tile1 {
    color: white !important;
    background-color: #2196F3 !important;
}

    

.tile2 { /*Red A700*/
    color: white !important;
    background-color: #607D8B !important;
}

   

.tile3 { /*Pink A700*/
    color: white !important;
    background-color: #E91E63 !important;
}
 

.tile4 { /*Purple 500*/
    color: white !important;
    background-color: #3F51B5 !important;
} 

.tile5 { /*Cyan 800*/
    color: white !important;
    background-color: #00BCD4 !important;
}

    
.tile6 { /*Lime 800*/
    color: white !important;
    background-color: #FF5722 !important;
}
 

.tile7 { /*Brown 500*/
    color: white !important;
    background-color: #795548 !important;
}

     
.tile8 { /*Grey 500*/
    color: white !important;
    background-color: #9E9E9E !important;
}
 
.tile9 {
    color: white !important;
    background-color: #00c6ff !important;
}
 


.tile10  { /*Pink 900*/
    background: #003265 !important;
    color: white !important;
}
 


.tile11  { /* 50 shades of grey */
    background: #f0ca28 !important;
    color: white !important;
    cursor: pointer;
}
 

    .tile13  { /* 50 shades of grey */
    background: #7c3a2d !important;
    color: white !important;
    cursor: pointer;
} 
    .tile14 { /* 50 shades of grey */
    background: #5f6c72 !important;
    color: white !important;
    cursor: pointer;
} 
    .tile15  { /* 50 shades of grey */
    background: #376db6 !important;
    color: white !important;
    cursor: pointer;
}

    
    .tile16  { /* 50 shades of grey */
    background: #00363d !important;
    color: white !important;
    cursor: pointer;
}

     
    .tile17  { /* 50 shades of grey */
    background: #004851 !important;
    color: white !important;
    cursor: pointer;
}
     
    .tile18  { /* 50 shades of grey */
    background: #9d0a0e !important;
    color: white !important;
    cursor: pointer;
}
     
    .tile19  { /* 50 shades of grey */
    background: #e60000 !important;
    color: white !important;
    cursor: pointer;
}
 
    .tile20  { /* 50 shades of grey */
    background: #694d88 !important;
    color: white !important;
    cursor: pointer;
}
     
    .tile21  { /* 50 shades of grey */
    background: #00274c !important;
    color: white !important;
    cursor: pointer;
}
     
    .tile22 { /* 50 shades of grey */
    background: #51e898 !important;
    color: white !important;
    cursor: pointer;
}
     
    .tile23  { /* 50 shades of grey */
    background: #998542 !important;
    color: white !important;
    cursor: pointer;
}
     
    .tile24 { /* 50 shades of grey */
    background: #f24c7c !important;
    color: white !important;
    cursor: pointer;
}
     
   
      .blue-hover:hover {
            border-style: none !important;
            background-color: #0d47a1 !important;
             box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        }
body, html {
    margin: 0px;
}




.padding-xs { padding: .25em; }
.padding-sm { padding: .5em; }
.padding-md { padding: 1em; }
.padding-lg { padding: 1.5em; }
.padding-xl { padding: 3em; }

.padding-x-xs { padding: .25em 0; }
.padding-x-sm { padding: .5em 0; }
.padding-x-md { padding: 1em 0; }
.padding-x-lg { padding: 1.5em 0; }
.padding-x-xl { padding: 3em 0; }

.padding-y-xs { padding: 0 .25em; }
.padding-y-sm { padding: 0 .5em; }
.padding-y-md { padding: 0 1em; }
.padding-y-lg { padding: 0 1.5em; }
.padding-y-xl { padding: 0 3em; }

.padding-top-xs { padding-top: .25em; }
.padding-top-sm { padding-top: .5em; }
.padding-top-md { padding-top: 1em; }
.padding-top-lg { padding-top: 1.5em; }
.padding-top-xl { padding-top: 3em; }

.padding-right-xs { padding-right: .25em; }
.padding-right-sm { padding-right: .5em; }
.padding-right-md { padding-right: 1em; }
.padding-right-lg { padding-right: 1.5em; }
.padding-right-xl { padding-right: 3em; }

.padding-bottom-xs { padding-bottom: .25em; }
.padding-bottom-sm { padding-bottom: .5em; }
.padding-bottom-md { padding-bottom: 1em; }
.padding-bottom-lg { padding-bottom: 1.5em; }
.padding-bottom-xl { padding-bottom: 3em; }

.padding-left-xs { padding-left: .25em; }
.padding-left-sm { padding-left: .5em; }
.padding-left-md { padding-left: 1em; }
.padding-left-lg { padding-left: 1.5em; }
.padding-left-xl { padding-left: 3em; }

.margin-xs { margin: .25em; }
.margin-sm { margin: .5em; }
.margin-md { margin: 1em; }
.margin-lg { margin: 1.5em; }
.margin-xl { margin: 3em; }

.margin-x-xs { margin: .25em 0; }
.margin-x-sm { margin: .5em 0; }
.margin-x-md { margin: 1em 0; }
.margin-x-lg { margin: 1.5em 0; }
.margin-x-xl { margin: 3em 0; }

.margin-y-xs { margin: 0 .25em; }
.margin-y-sm { margin: 0 .5em; }
.margin-y-md { margin: 0 1em; }
.margin-y-lg { margin: 0 1.5em; }
.margin-y-xl { margin: 0 3em; }

.margin-top-xs { margin-top: .25em; }
.margin-top-sm { margin-top: .5em; }
.margin-top-md { margin-top: 1em; }
.margin-top-lg { margin-top: 1.5em; }
.margin-top-xl { margin-top: 3em; }

.margin-right-xs { margin-right: .25em; }
.margin-right-sm { margin-right: .5em; }
.margin-right-md { margin-right: 1em; }
.margin-right-lg { margin-right: 1.5em; }
.margin-right-xl { margin-right: 3em; }

.margin-bottom-xs { margin-bottom: .25em; }
.margin-bottom-sm { margin-bottom: .5em; }
.margin-bottom-md { margin-bottom: 1em; }
.margin-bottom-lg { margin-bottom: 1.5em; }
.margin-bottom-xl { margin-bottom: 3em; }

.margin-left-xs { margin-left: .25em; }
.margin-left-sm { margin-left: .5em; }
.margin-left-md { margin-left: 1em; }
.margin-left-lg { margin-left: 1.5em; }
.margin-left-xl { margin-left: 3em; }


 
.modal.left .modal-dialog,
    .modal.right .modal-dialog {
        position: fixed;
        margin: auto;
        width: 440px;
        height: 100%;
        -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
        -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }

    .modal.right_big .modal-dialog {
        position: fixed;
        margin: auto;
        width: 1100px;
        height: 100%;
        -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
        -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }

    .modal.right_big .modal-content,
    .modal.left .modal-content,
    .modal.right .modal-content {
        height: 100%;
        overflow-y: auto;
    }

    .modal.right_big .modal-body,
    .modal.left .modal-body,
    .modal.right .modal-body {
        padding: 15px;
        overflow: hidden;
    }

    .modal-body {
        overflow: auto;
    }
    /*Left*/
    .modal.left.fade .modal-dialog {
        left: -320px;
        -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
        -o-transition: opacity 0.3s linear, left 0.3s ease-out;
        transition: opacity 0.3s linear, left 0.3s ease-out;
    }

    .modal.left.fade.in .modal-dialog {
        left: 0;
    }

    /*Right*/

    .modal.right.fade .modal-dialog {
        right: -320px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
        -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right_big.fade .modal-dialog {
        right: -1100px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
        -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    .modal.right_big.fade.in .modal-dialog {
        right: 0;
    }
    /* ----- MODAL STYLE ----- */
    .modal-content {
        border-radius: 0;
        border: none;
    }