/** MAIN **/

html,body {width: 100%; box-sizing: border-box; margin: 0; padding: 0; font-size: 16px; font-family: "Trebuchet MS", sans-serif; overflow-x: hidden;}

body {display: flex; flex-direction: column;}

button, input { font-family: "Trebuchet MS", sans-serif;}

a:hover, .link:hover, a:focus, .link:focus {text-decoration: none;}

#main {display: flex; flex-direction: column; width: 100%; padding-bottom: 5%; justify-content: center; align-items: center; box-sizing: border-box;}

input {border-radius: 3.5px; border: solid 1px #455673; padding: 10px; }

.button { border: 0; padding: 10px; border-radius: 3.5px;box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25), 0 6px 20px 0 rgba(0, 0, 0, 0.19); transition: all .3s ease;cursor: pointer;box-sizing: border-box;background: #e7614b;color: #fff;position: relative;overflow: hidden; z-index: 9;}
.button:hover, .button:focus, button.active {background: #99c3bb;}

.tom {background: #1b2841;}
.spontaan {background: #455673}
.geholpen {background: #5a6c8f}
.general-data {background: #265a99}

.dashboard-banner {background: #ffffff; height: 100px; width: 100%; flex: none;}
.dashboard-banner div {height: 50%; width: 100%;}
.dashboard-banner div:last-child {background: #455673;}
.dashboard-banner img {display: inline-block; width: 70px; height: auto;margin-left: 5%; margin-top: 10px;}
.dashboard-banner form {display: inline-block; margin: 7px 10px 0 0; float: right}

/** LOGIN **/
#login-box {margin: 15% auto;}
#login-box form {display: flex; flex-direction: column;}
#login-box label {display: flex; flex-direction: column; margin-top: 10px;}
#login-box input[type="submit"] {display: block; margin: 10px auto; }

/*INFO & ERRORS*/
.info { margin-top: 20px; position: relative; overflow: hidden; transition: 1s; height: 43px; }
.info .info-content { padding: 5px; height: 32px; line-height: 32px; border-bottom: 1px solid; border-radius: 3px; }
.info .information { background: #76afdc; border-color: #5c8db2; }
.info .success { background: #8ec641; border-color: #80b23a; }
.info .warning { background: #fddb55; border-color: #e8c64e; }
.info .error { background: #F0947B; border-color: #d5684d; }
.info img { height: 32px; width: 32px; border: 0; display: block; position: absolute; }
.info span { font-weight: bold; vertical-align: middle; display: inline-block; font-size: 0.9em; line-height: 32px; padding: 0 30px 0 40px; }
.info .information span,
.info .success span { color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); }
.info .warning span ,
.info .error span { color: #222; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); }
.info .close-info { position: absolute; background: #555; border-bottom: 1px solid #333; height: 18px; width: 18px; line-height: 16px; text-align: center; top: 12px; right: 12px; color: #ddd; font-weight: bold; cursor: pointer; border-radius: 3px; }

.info-small { margin-top: 10px; height: auto; }
.info-small .info-content { padding: 4px 4px 3px; height: auto; line-height: normal; }
.info-small span { font-weight: normal; padding: 0 30px 0 0; }
.info-small .close-info { top: 3px; right: 3px; }

/* INPUTS */
input[type=range]{-webkit-appearance:none;margin:auto;width:250px; height: 50px;}
input[type=range]:focus{outline:none;}
/*WEBKIT*/
input[type=range]::-webkit-slider-runnable-track{width:100%;height:8.4px;cursor:pointer;background:#455673;border-radius:1px;}
input[type=range]::-webkit-slider-thumb{height:20px;width:10px;border-radius:3.5px;background:#e7614b;cursor:pointer;-webkit-appearance:none;margin-top:-6px;}
input[type=range]:focus::-webkit-slider-runnable-track{background:#455673;}
/*FF*/
input[type=range]::-moz-range-track{width:100%;height:8.4px;cursor:pointer;background:#455673;border-radius:1px;}
input[type=range]::-moz-range-thumb{height:20px;width:10px;border-radius:3.5px;background:#e7614b;cursor:pointer;}