@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;900&display=swap');

*{
  -webkit-transition: 200ms;
  -moz-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

body{
  background-color: #faf5f2;
  font-family: 'Montserrat', sans-serif;
}

  header{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    padding: 50px 75px;
  }
  
    header div{
      width: 12.5%;
      height: 25px;
      padding: 5px 0px;
      float: left;
    }
    
      header div img{
        height: 25px;
      }
    
    header nav{
      width: calc(70% - 175px);
      height: 25px;
      padding: 2px 100px;
      float: left;
    }
  
      header nav ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
    
        header nav ul li{
          float: left;
          font-size: 18px;
          font-weight: 700;
          margin-right: 25px;
        }
      
          header nav ul li a{
            float: left;
            color: #000;
            font-size: 16px;
            font-weight: 700;
            text-decoration: none;
            padding: 4px 10px 8px 10px;
            border-radius: 5px;
          }
        
          header nav ul li a img{
            height: 20px;
            margin-right: 8px;
            position: relative;
            top: 4px;
          }
        
            header nav ul li a:hover{
              color: #fff;
              background-color: #000;
              box-shadow: 0px 0px 10px #e9e4e1;
            }
        
              header nav ul li a:hover img{
                filter: invert(1);
              }
    
    header aside{
      width: 15%;
      height: 25px;
      float: left;
    }

      header aside input[type="text"]{
        width: 100%;
        padding: 10px;
        text-align: center;
        border: 1px solid #f1edea;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #e9e4e1;
      }
        
        header aside input[type="text"]:hover{
          cursor: pointer;
          transform: scale(1.1);
          box-shadow: 0px 0px 15px #ccc;
        }
          
        header aside input[type="text"]:focus{
          cursor: text;
          transform: scale(1.1);
          box-shadow: 0px 0px 15px #ccc;
        }
  
      header aside input[type="submit"]{
        display: none;
      }
    
  /* MAIN */
      
  main{
    margin: 150px 65px 0px 65px;
  }
  
    main h1{
      padding: 0;
      font-weight: 300;
      margin: 0 0 10px 0;
    }
    
    main h2{
      padding: 0;
      font-weight: 300;
      margin: 0 0 10px 0;
    }
    
      main h2 > img{
        height: 20px;
      }
      
    main > p{
      padding: 0;
      margin: -25px 0 0 0;
      color: #666;
      font-size: 12px;
    }
      
    main div.favoritepanel{
      width: 13%;
      float: left;
      height: 130px;
      padding: 40px 15px;
      text-align: center;
      margin: 0px 10px 10px 0px;
      border-radius: 10px;
      background-color: #fff;
      border: 1px solid #f1edea;
      box-shadow: 0px 0px 10px #e9e4e1;
    }
      
      main div.favoritepanel.disabled:hover{
        transform: scale(0.9);
        opacity: 0.5;
        filter: grayscale(1);
      }
      
      main div.favoritepanel:not(.disabled):hover{
        z-index: 100;
        border: 1px solid #ffdb13;
        transform: scale(1.1);
        background: rgb(255,219,19);
   		box-shadow: 0px 0px 10px #ccc;
        background: -moz-linear-gradient(15deg, rgba(255,219,19,1) 0%, rgba(254,244,183,1) 100%);
        background: -webkit-linear-gradient(15deg, rgba(255,219,19,1) 0%, rgba(254,244,183,1) 100%);
        background: linear-gradient(15deg, rgba(255,219,19,1) 0%, rgba(254,244,183,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffdb13",endColorstr="#fef4b7",GradientType=1);
      }
      
      main div.favoritepanel:hover{
        cursor: pointer;
        box-shadow: 0px 0px 15px #ccc;
      }
        
      main div.favoritepanel > i{
        font-size: 60px;
      }
        
      main div.favoritepanel > img{
        height: 60px;
      }
        
      main div.favoritepanel > p.favoritename{
        font-size: 20px;
        font-weight: 600;
        margin: 20px 0px 5px 0px;
      }
        
      main div.favoritepanel > p.favoritepath{
        font-size: 14px;
        font-weight: 300;
        margin: 0px;
      }
    
    main div.pluginpanel{
      width: 36%;
      float: left;
      height: 170px;
      padding: 15px;
      margin: 0px 10px 0px 0px;
      border-radius: 10px;
      color: #888;
      background-color: #e2dedc;
      border: 1px solid #f1edea;
      box-shadow: 0px 0px 10px #e9e4e1;
      position:relative;
    }
      
      main div.pluginpanel:hover{
        cursor: default;
        box-shadow: 0px 0px 0px #fff;
      }
        
      main div.pluginpanel[data-plugin="privervplay"] > img.watermark{
        position: absolute;
        bottom: 10px;
        right: 10px;
        height: 20px;
        filter: invert(1);
        opacity: 0.2;
      }
        
      main div.pluginpanel[data-plugin="skipperposten"] > img.watermark{
        position: absolute;
        bottom: 10px;
        right: 10px;
        height: 20px;
        filter: grayscale(1);
        opacity: 0.2;
      }
      
    main aside{
      width: 290px;
      float: right;
    }
    
      main aside p{
        color: #666;
        font-size: 12px;
      }
      
      main aside div.statuspanel{
        width: calc(100% - 35px);
        height: 20px;
        padding: 20px 15px 30px 15px;
        margin-bottom: 10px;
        font-weight: 600;
        background-color: #fff;
        border: 1px solid #f1edea;
        border-left: 5px solid #ccc;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #e9e4e1;
      }
        
        main aside div.statuspanel:hover{
          cursor: pointer;
          box-shadow: 0px 0px 15px #ccc;
        }
        
        main aside div.statuspanel img{
          width: 40px;
          height: 40px;
          float: left;
          border-radius: 20px;
          margin-right: 15px;
          position: relative;
          top: -5px;
        }
          
        main aside div.statuspanel > i{
          float: right;
          font-size: 20px;
          position: relative;
          top: -28px;
        }
          
        main aside div.statuspanel > span{
          color: #999;
          font-size: 10px;
          display: block;
          margin-top: 2px;
        }
        
        main aside div.statuspanel.checking{
          border-left: 5px solid #33b4eb;
          -webkit-animation: checkingBlink 3s cubic-bezier(1,0,0,1) infinite;
          animation: checkingBlink 3s cubic-bezier(1,0,0,1) infinite
        }
        
          main aside div.statuspanel.checking span{
            color: #33b4eb;
          }
        
          @-webkit-keyframes checkingBlink{
            0% { border-left: 5px solid #33b4eb; }
            25% { border-left: 5px solid #33b4eb; }
            50% { border-left: 5px solid #559bb5; }
            75% { border-left: 5px solid #699eb2; }
            100% { border-left: 5px solid #ccc; }
          }

          @keyframes checkingBlink {
            0% { border-left: 5px solid #33b4eb; }
            25% { border-left: 5px solid #33b4eb; }
            50% { border-left: 5px solid #559bb5; }
            75% { border-left: 5px solid #699eb2; }
            100% { border-left: 5px solid #ccc; }
          }
          
        main aside div.statuspanel.online{
          border-left: 5px solid #36d576;
        }
        
          main aside div.statuspanel.online:hover{
            transform: scale(1.1);
          }
          
          main aside div.statuspanel.online span{
            color: #36d576;
          }
          
        main aside div.statuspanel.offline{
          border-left: 5px solid #f12e45;
          -webkit-animation: offlineBlink 1s cubic-bezier(1,0,0,1) infinite;
          animation: offlineBlink 1s cubic-bezier(1,0,0,1) infinite
        }
        
          main aside div.statuspanel.offline:hover{
            transform: scale(0.9);
            opacity: 0.4;
          }
        
          @-webkit-keyframes offlineBlink{
            0% { border-left: 5px solid #f12e45; }
            100% { border-left: 5px solid #ccc; }
          }

          @keyframes offlineBlink {
            0% { border-left: 5px solid #f12e45; }
            100% { border-left: 5px solid #ccc; }
          }
          
          main aside div.statuspanel.offline span{
            color: #f12e45;
          }
            
          main aside div.statuspanel.offline > i{
            color: #ccc;
          }