@media screen{



  body{

    overflow-x: hidden;

    padding: 0;

    margin: 0;

    background: url('../img/vladstudio_first_flight_1600x1200_signed.jpg');

    background: #fcfcfc;

  }



  .wrapper{

    text-align: center;

    margin: 0 auto;

  }


  .logo{
    background: url('../../img/logo.png') no-repeat;
    background-position: center;
    background-size: 100%;
    width: 93px;
    height: 77px;
    display: inline-block;
    opacity: .5;
  }

  .loginbox{

    display: inline-block;

    -webkit-animation-duration: 300ms;

    animation-duration: 300ms;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

    opacity: 0;

    position: fixed;

    top: 50%;

    left: 50%;

    padding: 20px;

  }

  .loginbox h1{

    font-size: 36px;

  }

  .loginbox small{

    color: rgba(255, 255, 255, .5);

    padding: 4px;

    display: inline-block;

  }

  @-webkit-keyframes loginbox-animation {

    0% {

      -webkit-transform: scale3d(0.8, 0.8, 0.8);

      opacity: 0;

    }

    100% {

      -webkit-transform: scale3d(1, 1, 1);

      opacity: 1;

    }

  }

  @keyframes loginbox-animation {

    0% {

      transform: scale3d(0.8, 0.8, 0.8);

      opacity: 0;

    }

    100% {

      transform: scale3d(1, 1, 1);

      opacity: 1;

    }

  }

  .loginbox.animate{

    -webkit-animation-name: loginbox-animation;

    animation-name: loginbox-animation;

  }

  .loginbox .textbox{
    border: none;

  }

  .loginbox .textbox input{

    text-align: center;
    background: rgba(0, 0, 0, .8);
    border: none;
    color: #fff;

  }

  .loginbox .footer{

    margin-top: 16px;

  }

  .loginbox .footer small{

    font-size: 10px;

  }

  .box-register{

    padding: 10px;

  }



  .sidebar{

    position: fixed;

    z-index: 4;

    left: 0;

    top: 0;

    bottom: 0;

    width: 40px;

    border-right: solid 1px #eee;

    background: #434A54;

    overflow: hidden;
    box-shadow: inset -2px 0 6px rgba(0, 0, 0, .3);

  }

  .sidebar.on{

    width: 200px;

  }

  .sidebar .head{

    position: fixed;

    top: 0;

    left: 0;

    width: 40px;

    height: 64px;

    overflow: hidden;
    background: rgba(0, 0, 0, .1);

    border-bottom: solid 1px rgba(255, 255, 255, .1);

  }

  .sidebar.on .head{
    width: 200px;
  }

  .sidebar .head *{

    color: rgba(255, 255, 255, .4);

  }
  
  .sidebar .profile_photo{

    display: inline-block;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, .2);
    overflow: hidden;
    border-radius: 24px;
    
  }

  .sidebar .body{

    position: fixed;

    top: 65px;

    bottom: 48px;

    width: 40px;

    overflow-x: hidden;

    overflow-y: hidden;

  }

  .sidebar.on .body{
    width: 200px;
    overflow-y: auto;
  }

  .sidebar .menulist{

    padding: 0;

  }

  .sidebar.on .menulist{

    padding: 0 10px;

  }

  .sidebar .menulist .title{

    padding: 5px 10px;

    color: #777;

    font-family: OpenSansLight;

  }

  .sidebar .menuitem{

    padding: 0 10px;

    position: relative;

    display: block;

    white-space: nowrap;
    border: 4px solid transparent;
    border-radius: 4px;

  }
  .sidebar .menuitem.indent-1{

    margin-left: 10px;

  }

  .sidebar .menuitem label{

    padding: 5px;

  }

  .sidebar .menuitem:hover{

    background: rgba(255, 255, 255, .1);

  }

  .sidebar .menuitem *{

    color: #999;

  }

  .sidebar .menuitem.active{
    background: rgba(0, 0, 0, .1);
    background: #4A89DC;
  }
  .sidebar .menuitem.active *{
    color: #fff;
  }
  .sidebar .menuitem.active {
    position: relative;
    background: #4a89dc;
    border: 4px solid #4a89dc;
  }
  .sidebar .menuitem.active:after, .sidebar .menuitem.active:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .sidebar .menuitem.active:after {
    border-color: rgba(74, 137, 220, 0);
    border-left-color: #4a89dc;
    border-width: 2px;
    margin-top: -2px;
  }
  .sidebar .menuitem.active:before {
    border-color: rgba(74, 137, 220, 0);
    border-left-color: #4a89dc;
    border-width: 8px;
    margin-top: -8px;
  }

  .sidebar .menuitem small{

    font-size: .8em;

    margin-left: 33px;

    padding: 0px;

  }

  .sidebar .foot{

    position: fixed;

    bottom: 0;

    left: 0;

    width: 40px;

    height: 48px;

    border-top: solid 1px rgba(255, 255, 255, .1);

    overflow: hidden;

  }

  .sidebar.on .foot{
    width: 200px;
  }

  .sidebar .foot .debugarea p{

    white-space: nowrap;

    font-size: .8em;

  }

  .sidebar .foot .debugarea p b{

    color: #1C75BC;

    font-weight: normal;

  }

  .sidebar .foot button{
    padding: 8px;
  }

  .sidebar .foot .fa{

    font-size: 1.2em;
    color: #aaa;

  }



  .sidebar-toggler{

    display: none;

  }



  .content{

    margin-left: 40px;
    -webkit-transition: margin 200ms;
    transition: margin 200ms;

  }

  .content.sidebar-on{

    margin-left: 201px;
  }


  .reportoption{



  }

  .reportoption .presetlist{

    vertical-align: top;

    background: #fff;

    border-right: solid 1px rgba(0, 0, 0, .1);

  }

  .reportoption .presetlist .head{

    padding: 5px;

  }

  .reportoption .presetlist .body{

    padding: 5px;

  }

  .reportoption .presetlist .head button{

  }

  .reportoption .presetlist .head button:hover{



  }

  .reportoption .presetlist .head .fa{

    padding: 8px;

    margin: 0;

    color: #6C7A89;

  }

  .reportoption .presetlist .scrollable{

    width: 260px;

    height: 360px;

  }

  .reportoption .presetdetail{

    vertical-align: top;

  }

  .reportoption .presetdetail .scrollable{

    width: 580px;

    height: 340px;

    padding: 10px;

  }

  .reportoption .toolbar{

    border-top: solid 1px rgba(0, 0, 0, .1);

  }

  .reportoption .menulist{

   }

  .reportoption .menuitem{

    position: relative;
    white-space: nowrap;
    overflow: hidden;

  }

  .reportoption .menuitem label{
    display: block;
  }

  .reportoption .menuitem .sect2{

  }

  .reportoption .menuitem .sect2 .fa{

    cursor: pointer;

  }

  .reportoption .menuitem *{

    color: #6C7A89;

  }

  .reportoption .menuitem.active{

    background: #ddd;
    position: relative;

  }

  .reportoption .tabcolumns .scrollable{

    height: 320px;

  }

  .reportoption .tabcolumns .columnlist{

    vertical-align: top;

  }

  .reportoption .tabcolumns .columnlist .scrollable{

    width: 240px;

    height: 280px;

  }

  .reportoption .tabcolumns .columnlist .columnitem{
    white-space: nowrap;
  }

  .reportoption .tabcolumns .columnlist .columnitem.active{

    background: rgba(0, 0, 0, .05);

  }

  .reportoption .tabcolumns .columndetail{

    width: 240px;

    vertical-align: top;

  }

  .reportoption .tabhead .tabitem.active{

  }



  .reportoption .sortlist{



  }

  .reportoption .sortlist .sortitem{

    padding: 4px;

  }

  .reportoption .sortlist .sortitem.active{

    background: #eee;

  }



  .reportoption .grouplist{

    display: inline-block;

    vertical-align: top;

  }

  .reportoption .grouplist .scrollable{

  }

  .reportoption .grouplist .scrollable .groupitem.active{

    background: #ddd;

  }



  .reportdetail{

    width: 600px;

  }

  .reportdetail .scrollable{

    height: 300px;

    padding: 10px;

  }







  .spinner {

    margin: 100px auto 0;

    width: 70px;

    text-align: center;

  }



  .spinner > div {

    width: 18px;

    height: 18px;

    background-color: #1C75BC;



    border-radius: 100%;

    display: inline-block;

    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;

    animation: bouncedelay 1.4s infinite ease-in-out;

    /* Prevent first frame from flickering when animation starts */

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

  }



  .spinner .bounce1 {

    -webkit-animation-delay: -0.32s;

    animation-delay: -0.32s;

  }



  .spinner .bounce2 {

    -webkit-animation-delay: -0.16s;

    animation-delay: -0.16s;

  }



  @-webkit-keyframes bouncedelay {

    0%, 80%, 100% { -webkit-transform: scale(0.0) }

    40% { -webkit-transform: scale(1.0) }

  }



  @keyframes bouncedelay {

    0%, 80%, 100% {

      transform: scale(0.0);

      -webkit-transform: scale(0.0);

    } 40% {

        transform: scale(1.0);

        -webkit-transform: scale(1.0);

      }

  }

}



@media screen and (max-width:640px){



  .sidebar{

    display: none;

  }



  .sidebar.on{

    display: block;

  }



  .content{

    margin-left: 0;

  }



  .sidebar-toggler{

    display: block;

    position: fixed;

    left: 0;

    bottom: 0;

    background: #434A54;

    font-family: FontAwesome;

    padding: 15px;

    z-index: 4;

    color: #aaa;

  }

  .sidebar-toggler:before{

    content:"\f0c9";

  }


}