/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    background-color: #FFF;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: var(--grey-colour); 
}

@font-face {
    font-family: 'museo-sans';
    src: url('../../fonts/museosans_100.woff2') format('woff2'),
         url('../../fonts/museosans_100.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display:swap;
}
@font-face {
    font-family: 'museo-sans';
    src: url('../../fonts/museosans_100i.woff2') format('woff2'),
         url('../../fonts/museosans_100i.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display:swap;
}
@font-face {
    font-family: 'museo-sans';
    src: url('../../fonts/museosans_300.woff2') format('woff2'),
         url('../../fonts/museosans_300.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display:swap;
}
@font-face {
    font-family: 'museo-sans';
    src: url('../../fonts/museosans_500.woff2') format('woff2'),
         url('../../fonts/museosans_500.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display:swap;
}
@font-face {
    font-family: 'museo-sans';
    src: url('../../fonts/museosans_700.woff2') format('woff2'),
         url('../../fonts/museosans_700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display:swap;
}
@font-face {
    font-family: 'museo-sans';
    src: url('../../fonts/museosans_900.woff2') format('woff2'),
         url('../../fonts/museosans_900.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
html, body {min-width:320px;position:relative;min-height:100vh;margin:0;padding:0;border:0;font-size:16px;background-color:#373534;font-family: 'museo-sans', sans-serif;}
* {box-sizing: border-box;font-family: 'museo-sans', sans-serif;font-size:16px;}
.login-window {position:absolute;height:100%;width:100%;top:0;left:0;right:0;bottom:0;display:flex;justify-content: center;align-items: center;}
.login-form {display:grid;max-width:400px;width:100%;grid-template-rows: 1fr;overflow:hidden;gap:20px;}
.login-form .logo-panel {padding:0px 30px;display: flex;flex-direction: column;justify-content: center;align-items: center;gap:10px;}
.login-form .logo-panel .logo {height:100px;width:100%;display:block;background-image:url('../../images/logos/HHGroupLogo.svg');background-position: center;background-repeat: no-repeat;background-size:contain;}
.login-form .logo-panel .heading {text-align: center;color:#FFF;font-size:24px;font-weight: 700;}
.login-form .login-panel {padding:30px 40px;background-color:#FFF;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;border-radius:15px;}

.error {padding:5px;margin-bottom:15px;color:red;text-align: center;font-weight: 500;font-size:14px;}
.success {padding:5px;margin-bottom:15px;color:green;text-align: center;font-weight: 500;font-size:14px;}


.login-field {display:flex;flex-direction:column;position:relative;width:100%;margin-bottom:20px;}
.login-field input {height:40px;border:1px solid #EDEDF5;padding-left:14px;border-radius:10px;width:100%;display:block;outline:none;}
.login-field label {display:block;width:100%;color:#6D7278;font-weight: 600;font-size:14px;margin-bottom:10px;padding-left:5px;}

.action-row {display:flex;flex-direction: row;justify-content: space-between;align-items:center;}

.forgot {text-decoration: none;color:#373534;font-size:14px;transition:color .25s ease-in-out;}
.forgot:hover {color:#ED7004;}

.panel-heading {text-align: center;font-weight: 700;margin-bottom:20px;font-size:18px;}
.success-text {text-align: center;}

.login-button {appearance: none;border:0;position:relative;overflow:hidden;background-color:#ED7004;color:#FFF;border-radius:10px;padding:10px 15px 10px 15px;font-weight:700;font-size:16px;}
.login-button .effect {position:absolute;z-index:1;top:0;left:0;right:0;bottom:0;height:100%;width:100%;background-color:#373534;-webkit-mask:url('../../images/effects/button-hover-sprite-min.png');mask:url('../../images/effects/button-hover-sprite-min.png');-webkit-mask-size: 3000% 100%;mask-size: 3000% 100%;-webkit-animation: buttonAnimation2 0.7s steps(29) forwards;animation: buttonAnimation2 0.7s steps(29) forwards;}
.login-button .label {position:relative;z-index:2;}
.login-button:hover {cursor: pointer;}
.login-button:hover .effect {-webkit-animation: buttonAnimation 0.7s steps(29) forwards;animation: buttonAnimation 0.7s steps(29) forwards;}

@-webkit-keyframes buttonAnimation {
    from {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
    }
    to {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
    }
  }
  @keyframes buttonAnimation {
    from {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
    }
    to {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
    }
  }
  @-webkit-keyframes buttonAnimation2 {
    from {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
    }
    to {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
    }
  }
  @keyframes buttonAnimation2 {
    from {
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
    }
    to {
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
    }
  }