@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body{
    margin:0;
  }
  
  header{
    color:#50CAFA;
    font-family: 'Open Sans', sans-serif;
    text-align:center;

  }

  
  .container-control   {
    height: 630px;
    width: 155px;
    margin:50px 0px 0px;
    margin:auto;
    border-radius:20px;
    background-color:#F6F6F8;
    border: 0.4px solid rgb(182, 182, 182);
    box-shadow: inset 95px 0px 10px -95px rgba(163,159,161,1), inset -95px 0px 10px -95px rgba(163,159,161,1), inset 0px 100px 23px -91px rgba(255,255,255,1), 16px 25px 99px -16px rgba(94,94,94,1);

}

.container-btn-logo{
    display:flex;
    justify-content: space-between;
}
.logo-rc{
  width:35px;
  height:auto;
  margin-right:10px;
  margin-top:-5px;
}
  
  .btn {
      background-color:#F6F6F8;
      border:1px solid grey;
      height:25px;
      width:25px;
      border-radius:50%;
      margin:12px 20px;
      display:flex;
      align-items: center;
      justify-content: center;
      padding-bottom:1px;
      border:none;
      cursor:pointer;
      box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.1), inset 0 -2.5px 0 rgba(0, 0, 0, 0.25);
      
  }

 .fa-power-off{

    color: #CC2B37;
 }

 .des-power{
     color:#A8A7AD;
     font-size:9px;
     font-family: 'Open Sans', sans-serif;
     margin-left:18px;
     margin-top:-8px;
 }

 .controlpad{
     width:20px;
     height:65px;
     background-color: #F6F6F8;
     position:relative;
     margin:auto;
     border-radius:10%;
     box-shadow: inset -2px 1px 2px -10px rgba(250, 250, 250, 0.5), inset -1.5px 0 5px -1.5px rgba(0, 0, 0, 0.5);
 }

 .controlpad::after{
    content: " ";
    position:absolute;
    top:24px;
    left:-22px;
    width:65px;
    height:20px;
    background-color: #F6F6F8;
    border-radius:10%;
    border:0.5px solid transparent;
    box-shadow:  inset -2px 0px 2px -2px rgba(250, 250, 250, 0.5), -2px 0px 2px -1px rgba(0, 0, 0, 0.2), inset -2px -1.5px 2px -1px rgba(0, 0, 0, 0.2);
 }

 .btnA{
     height:50px;
     width: 50px;
     background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(229, 229, 225) 100%);
     border-radius:50%;
     margin: 0 auto;
     margin-top:35px;
     box-shadow: inset -4px 2px 2px -10px rgba(250, 250, 250, 0.5), inset 1.75px 0 3.5px 0 rgba(0, 0, 0, 0.5);
     font-size: 20px;
     color:#A8A7AD;
     font-family: 'Open Sans', sans-serif;
     display:flex;
     justify-content: center;
     align-items: center;
    }


    .container-center{
        display:flex;
        width: 155px;
        justify-content: space-around;
        margin-top: 40px;

    }
    .home{
        margin:0;
        padding:0;  
    }
    .fa-home{
    color: #50CAFA;
    }
    .des-home{
    color:#A8A7AD;
     font-size:9px;
     font-family: 'Open Sans', sans-serif;
     margin: 0 auto;
     margin-top:5px;
    }

    .sust , .sum{
    color:#A8A7AD;
     margin:0;
     font-size:19px;
    }

    .speaker{
        margin-top:30px;

    }
   .speaker1, .speaker2, .speaker3, .speaker4, .speaker5, .speaker6{
       margin:0 auto;
       display:flex;
       justify-content: space-around;
       width:50px;
       margin-bottom:9px;
   }

  
   
    .s1, .s2, .s3, .s16, .s17, .s18 {
        width: 3px;
        height: 3px;
        background: black;
       border-radius: 10px;
  
    }
    

    
    
    .s4, .s5, .s6, .s13, .s14, .s15 {
        width: 4px;
        height: 4px;
        background: black;
      border-radius: 50%;
  
    }
    

    
    .s7, .s8, .s9,  .s10, .s11, .s12 {
        width: 5px;
        height: 5px;
        background: black;
      border-radius: 50%;
   
    }
    

   
    .b1, .b2{
        height:31px;
        width:31px;
        margin: 0 auto;
        margin-top: 20px;
        color:#A8A7AD;
        font-size:16px;
        font-family: 'Open Sans', sans-serif;
        cursor: pointer;
        box-shadow: inset 1.2px 1px 3px 1px rgba(0, 0, 0, 0.5);
    }

    .b1{
        margin-top:35px;
    }
    
    .lights{
        display:flex;
        justify-content: space-around;
        width:130px;
        margin: 0 auto;
        margin-top:25px;
    }

    .square1, .square2, .square3, .square4{
        width: 7px;
        height: 7px;
        background-color: #4F7279;
    }

     .square1{
        opacity: 1;
        box-shadow: 2px 5px 24px 4px rgba(0, 217, 255, 0.75);
        background: rgb(80, 202, 250);
     }
  .logo{
      width:50px;
      height:auto;
      margin-left:10px;
      margin-top:10px;
  }