html, body{
   padding:0px;
   margin:0px;
   background:#222;
   font-family: 'Raleway', sans-serif;
   color:#FFF;
   height:100%;
   overflow:hidden;
   font-weight:100;
}
body{
   *{
      box-sizing:border-box;
      padding:0px;
      margin:0px;
   }
   display:block;
   padding:0px 20px;
}

.window{
   max-width:600px;
   min-width:420px;
   margin:40px auto 0px auto;
}
.microsoft{
   font-family: 'Raleway', sans-serif;
   box-shadow:0px 4px 10px rgba(0, 0, 0, 0.5);
   .header{
      display:flex;
      color:rgba(255, 255, 255, 0.85);
      line-height:40px;
      font-weight:100;
      height:40px;
      background:#449;
      position:relative;
      z-index:1;
      box-shadow:0px 2px 2px rgba(0, 0, 0, 0.25);
      .title{
         flex:1;
         width:100%;
         height:100%;
         padding:0px 10px;
         display:flex;
         user-select:none;
         .icon{
            width:30px;
            position:relative;
            display:inline-block;
            top:6px;
         }
         .text{
            flex:1;
            height:25px;
            top:7px;
            position:relative;
            padding:0px 8px;
            line-height:25px;
            border-left:1px solid rgba(0, 0, 0, 0.2);
            white-space:nowrap;
            text-overflow:ellipsis;
         }
      }
      .buttons{
         display:flex;
         width:160px;
         height:30px;
         .btn{
            flex:1;
            text-align:center;

            &:hover{
               &.minus{ background:rgba(0, 0, 0, 0.25); }
               &.expand{ background:rgba(0, 0, 0, 0.25); }
               &.close{ background:rgba(150, 0, 0, 0.5); }
               cursor:pointer;
            }
            i{
               position:relative;
               display:inline-block;
               top:-1px;
               font-size:20px;
            }
         }
      }
   }
   .form{
      min-height:60px;
      background:#333;
      
      .top{
         padding:10px;
         display:flex;
         .icon{
            width:50px;
            padding:0px 10px 0px 0px;
            .amd{
               background:#333;
               box-shadow:none;
               .amd-border, .amd-border:after, .amd-top:after{background:#333;}
            }
         }
         .loader{
            flex:1;
            
            .text{
               font-size:12px;
               margin-bottom:5px;
            }
            .bar{
               min-height:20px;
               background:#019966;
               width:100%;
               transition:0.2s all;
               animation:0.4s opacitize;
            }
         }
      }
   }
   .middle{
      padding:0px 10px 10px 10px;
      .display{
         height:200px;
         background:rgba(0, 0, 0, 0.25);
         padding:5px;
         font-size:12px;
         color:rgba(50, 200, 50, 1);
         font-weight:300;
         overflow-y:auto;
         box-shadow:inset 0px 0px 4px rgba(0, 0, 0, 0.5);
      }
   }
   .bottom{
      min-height:40px;
      display:flex;
      font-size:12px;
      color:rgba(255, 255, 255, 0.8);
      padding:0px 10px;
      line-height:30px;
      .btn{
         width:80px;
         &:not(:first-child){margin-left:4px;}
         text-align:center;
         height:30px;
         position:relative;
         background:#444;
         box-shadow:0px 2px 4px rgba(0, 0, 0, 0.25);
         cursor:pointer;
         transition:all 0.2s;
         user-select:none;
         &:active{
            box-shadow:none;
         }
      }
      .text{
         color:rgba(255, 255, 255, 0.1);
         flex:1;
         text-align:center;
      }
   }
   animation: openwindows 0.2s;
   transform-origin:bottom center;
}

.amd{
   display:inline-block;
   width:100%;
   padding:5%;
   background:#000;
   box-shadow:0px 2px 4px rgba(0, 0, 0, 0.25);
   border-radius:2px;
   .amd-border{
      width:100%;
      background:#000;
      position:relative;
      overflow:hidden;
      padding-bottom:100%;
      &:after{
         content: '';
         width:45%;
         height:45%;
         background:#000;
         position:absolute;
         top:50%;
         left:50%;
         transform:translateX(-50%) translateY(-50%);
      }
      .amd-top{
         position:absolute;
         background:#019966;
         top:0%;
         left:0%;
         width:200%;
         height:200%;

         transform:rotateZ(-45deg);
         transform-origin:top left;
      }
      .amd-bottom{
         position:absolute;
         bottom:0px;
         left:0px;
         width:100%;
         height:55%;
         background:#019966;
         transform:rotateZ(-45deg) translateX(-30%) translateY(-30%);

      }
   }
}

@keyframes opacitize{
   0%{ opacity:0; }
   50%{ opacity: 0; }
   100%{ opacity:1; }
}