* {

    box-sizing: border-box;

    outline: none;

}

body {

    background-color: #26262B;

    font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;

    margin: 0;

    overflow-x: hidden;

    padding-bottom: 70px;

}

label {

    color: #8A8E93;

    font-size: 14px;

    display: block;

    margin-bottom: 5px

}

.input-styling {

    border: solid 1px #222428;

    padding: 9px 12px;

    background: #303339;

    border-radius: 4px;

    color: #C7C8CA;

    font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;

    font-weight: 500;

    font-size: 14px;

}

input[type="text"], textarea, .locked-inputtextfield, input[type="email"],input[type="date"] {

    width: 440px;

    transition: border 0.3s;

    height: 36px;

    max-width: 440px;

    min-width: 440px;

    margin-bottom: 15px;

}

textarea {

    min-height: 140px;

    height: 140px;

    display: block;

}

input[type="text"]:hover, textarea:hover, input[type="email"]:hover {

    border: solid 1px #040405;

}

input[type="text"]:focus, textarea:focus, input[type="email"]:focus {

    border: solid 1px #7289DA;

}

a {

    text-decoration: none;

}

input[type="submit"], .input-submit-style {

    border: 0;

    text-align: center;

    padding: 9px 12px;

    background-color: #7289da;

    color: #ffffff;

    width: 440px;

    border-radius: 4px;

    height: 36px;

    transition: background-color 0.3s;

    cursor: pointer;

}

input[type="submit"]:hover {

    background-color: #677BC4;

}

input[type="submit"]:active {

    background-color: #5B6EAE;

}

.locked-inputProfileImage {

    background-image: url("https://discordapp.com/assets/1cbd08c76f8af6dddce02c5138971129.png?size=32");

    width: 23px;

    height: 23px;

    background-size: cover !important;

    border-radius: 50%;

    float: left;

    margin-top: -2px;

}

.logout:after {

    opacity: 0;

    transition: opacity 0.2s;

    display: inline-block;

    content: "Uitloggen";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #e05454;

}

.logout:hover:after {

    opacity: 1;

}

.locked-inputUserName {

    margin-left: 31px;

    margin-top: 1px;

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

    height: 16px;

}

.form-container {

    width: 480px;

}

.greyContainer-center {

    padding: 20px;

    margin: auto;

}

.greyContainer-style-center {

    background-color: rgb(54, 57, 63);

    border-radius: 6px;

    color: #8A8E93;

    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 10px 0;

}

.container-center {

    width: 830px;

    float: center;

}

.container {

    margin: 105px auto auto auto;

    width: 830px;

}

.container-left {

    float: left;

}

.container-right {

    float: right;

    width: 300px;

}

.container-title {

    color: #C7C8CA;

    font-size: 30px;

    font-weight: 700;

    display: block;

    margin-bottom: 10px;

}



.container-title-center {

    color: #C7C8CA;

    font-size: 30px;

    font-weight: 700;

    display: block;

    margin-bottom: 10px;

    text-align: center;

}

.vertical-center {

    margin: 0;

    position: absolute;

    top: 50%;

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    width: 100%;

}

.welcome-container {

    width: 1020px;

    margin: auto;

}

.welcome-container h1 {

    color: #fff;

    font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;

}

.welcome-container h1, .welcome-container .welcome-description {

    text-align: center;

    line-height: 24px;

}

.welcome-description {

    width: 920px;

    margin: auto;

}

.highlighted-text {

    color: #C7C8CA;

}

.obscure-text {

    color: #8A8E93;

}

.button-style-burble .obscure-text {

    color: #d8d8d8;

}

.button-style-burble .locked-inputProfileImage {

    display: inline-block;

    float: none;

    margin-top: 11px;

    vertical-align: -7px;

    margin-right: 3px;

}

.punishment-container table {

    width: 100%;

    border-spacing: 0;

    margin: 0 0 13px 0;

    padding-top: 16px;

}

.punishment-container td {

    padding: 0 0 8px 0;

}

.punishment-staffProfileImage {

    width: 30px;

    height: 30px;

    background: url('https://cdn.discordapp.com/avatars/463646369337311232/26793ec051f1b05bf0a9298d17c379e1.webp?size=32');

    background-size: cover !important;

    border-radius: 50%;

    float: left;

}

.punishment-staffProfileName {

    margin-left: 13px;

    height: 18px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    margin-top: 6px;

    float: left;

}

.greyContainer {

    padding: 20px;

    margin: auto;

}

.greyContainer-style {

    background-color: rgb(54, 57, 63);

    border-radius: 6px;

    color: #8A8E93;

    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 10px 0;

}

.welcome-description-buttonContainer {

    margin: 35px auto auto auto;

    width: 530px;

    height: 45px;

}

.welcome-description-buttonContainer .button-style-burble {

    float: right;

}

.welcome-description-buttonContainer .button-style-white {

    float: left;

}

.welcome-banner {

    width: 315px;

    height: 120px;

    background-size: cover;

    display: inline-block;

    transition: margin-top 0.3s, box-shadow 0.3s;

    cursor: pointer;

    color: #fff;

    font-size: 26px;

    font-weight: 600;

    text-align: center;

    line-height: 114px;

}

.welcome-banner:hover {

    margin-top: -8px;

    box-shadow: rgba(0, 0, 0, 0.48) 0 2px 10px 0;

}

.welcome-banner > div {

    background-color: rgba(0, 0, 0, 0.1);

    height: 100%;

}

.button-hoverAnimation {

    transition: margin-top 0.2s, box-shadow 0.2s;

}

.button-hoverAnimation:hover {

    margin-top: -3px;

    box-shadow: rgba(0, 0, 0, 0.35) 0 2px 6px 0;

}

.welcome-banners-container {

    justify-content: space-between;

    display: flex;

    width: 654px;

    margin: 170px auto auto auto;

}

.button-style {

    display: inline-block;

    text-align: center;

    width: 250px;

    line-height: 42px;

    height: 45px;

    border-radius: 3px;

    font-size: 14px;

    cursor: pointer;

    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

    position: relative;



}

.button-style-white {

    background-color: #fff;

    color: #000000;

}

.button-style-burble {

    background-color: #7289DA;

    color: #fff;

    /*animation: pulse 0.7s infinite;*/

}

footer {

    position: fixed;

    bottom: -4px;

    z-index: -1;

    width: 100%;

}

.footersvg {

    height: 337px;

    width: 100%;

    margin-bottom: 0;

    display: block;

}

.background-top {

    background-image: url(assets/top.svg);

    z-index: -1;

    position: fixed;

    top: -47px;

    right: 26px;

    width: 268px;

    height: 320px;

    background-repeat: no-repeat;

    transform: rotateZ(-90deg);

}

.background-left {

    background-image: url(assets/left.svg);

    z-index: -1;

    position: fixed;

    top: 175px;

    left: 0;

    width: 225px;

    height: 492px;

    background-repeat: no-repeat;

    /*transform: rotateZ(-90deg);*/

}

.noselect {

    -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 */

}

.email-icon-holder {

    text-align: center;

}

.email-icon-holder img {

    height: 140px;

}

.email-send-text {

    line-height: 25px;

    text-align: center;

    padding: 10px;

}



.footer-text {

    z-index: 99;

    text-align: center;

    margin: 0;

    padding: 10px;

    background: rgba(26, 28, 30, 0.3);

}



.footer-text-a {

    color: #7289DA;

    opacity: 100%;

}



.footer-text-li {

    display: inline;

    margin: 0 25px 0 0;

}



/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button, input[type=number] {

    -webkit-appearance: none;

    margin: 0;

    -moz-appearance: textfield;

}

/**/

@-webkit-keyframes pulse {

    0% {

        -webkit-box-shadow: 0 0 0 0 rgba(114, 137, 218, 0.9);

    }

    70% {

        -webkit-box-shadow: 0 0 0 10px rgba(114, 137, 218, 0.0);

    }

    100% {

        -webkit-box-shadow: 0 0 0 0 rgba(114, 137, 218, 0);

    }

}

@keyframes pulse {

    0% {

        -moz-box-shadow: 0 0 0 0 rgba(114, 137, 218, 0.9);

        box-shadow: 0 0 0 0 rgba(114, 137, 218, 0.9);

    }

    70% {

        -moz-box-shadow: 0 0 0 10px rgba(114, 137, 218, 0.0);

        box-shadow: 0 0 0 10px rgba(114, 137, 218, 0.0);

    }

    100% {

        -moz-box-shadow: 0 0 0 0 rgba(114, 137, 218, 0);

        box-shadow: 0 0 0 0 rgba(114, 137, 218, 0);

    }

}





/*Scrollbar*/

::-webkit-scrollbar {

    width: 10px;

}

/* Track */

::-webkit-scrollbar-track {

    background-color: rgba(0, 0, 0, 0.19);

    border-radius: 10px;

}

/* Handle */

::-webkit-scrollbar-thumb {

    background: rgba(0, 0, 0, 0.27);

    border-radius: 25px;

}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

    background: rgba(0, 0, 0, 0.34);

}

/**/



/*Datepicker*/

/*::-webkit-datetime-edit { padding: 1em; }*/

/*::-webkit-datetime-edit-fields-wrapper { background: silver; }*/

/*::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }*/

/*::-webkit-datetime-edit-month-field { color: blue; }*/

/*::-webkit-datetime-edit-day-field { color: green; }*/

/*::-webkit-datetime-edit-year-field { color: purple; }*/

/*::-webkit-inner-spin-button { display: none; }*/

::-webkit-calendar-picker-indicator {

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

    cursor: pointer;

}

input::-webkit-clear-button { /* Removes blue cross */

    -webkit-appearance: none;

    margin: 0;

}