/**#################################################################################**/
/** =====                                                                     ===== **/
/** ===== Algemene CSS die voor alle pagina's binnen het dashboard nodig zijn ===== **/
/** =====                                                                     ===== **/
/**#################################################################################**/


/* Standaard/Light layout colors */
:root {
    /** Main colors **/
    --eknip-main-color-1: hsl(225, 55%, 25%);
    --eknip-main-color-2: hsl(22, 90%, 55%);

    /** Background colors **/
    --eknip-background-color-1: hsl(240, 25%, 96%);
    --eknip-background-color-2: hsl(240, 25%, 100%);

    /** SVG colors **/
    --eknip-svg-color-1: invert(100%) sepia(4%) saturate(57%) hue-rotate(247deg) brightness(90%) contrast(89%);
}

/* Dark layout colors */
html[data-theme="dark"] {
    
}

/**##################**/
/** ===== HTML ===== **/
/**##################**/
html {
    scroll-behavior: smooth;
    color: var(--eknip-text-color);
    font-family: 'Avenir', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-size-adjust: none;
  }

/**##################**/
/** ===== Body ===== **/
/**##################**/
body {
    background-color: var(--eknip-background-color-1);
    margin: 0;
    padding: 0 0 0 140px;
    box-sizing: border-box;
    transition: padding 0.25s cubic-bezier(0.75, 0, 0.175, 1);
}

body.small {
    padding-left: 85px;
}

a {
    text-decoration: none;
}

.show-hide {
	display: block;
	width: 24px;
	height: 24px;
	cursor: pointer;
	filter: invert(51%) sepia(54%) saturate(669%) hue-rotate(336deg) brightness(104%) contrast(103%);;
}

/**#########################**/
/** ===== All buttons ===== **/
/**#########################**/
[class^='button-'] {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 48px;
    min-height: 24px;
    background-color: var(--eknip-main-color-2);
    border: none;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px hsl(22, 100%, 40%),
                0 2px 3px -1px hsla(22, 100%, 30%, .6);
    margin: 0;
    padding: 0 2rem;
    box-sizing: border-box;
    color: white;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-shadow: 0px 0px 2px hsl(22, 100%, 40%);
    cursor: pointer;
    outline: none;
    transition: all .2s ease-in-out;
    -webkit-appearance: none;
}

/** ===== button-1 ===== **/
.button-1:hover {
    box-shadow: inset 0 0 0 1px hsl(22, 100%, 40%),
                0 0 0 4px hsla(22, 100%, 60%, .6),
                0 2px 3px -1px hsla(22, 100%, 30%, .6);
}

.button-1:active{
    background-color: hsl(22, 85%, 45%);
    box-shadow: inset 0 0 0 1px hsl(22, 100%, 40%),
                0 0 0 4px hsla(22, 100%, 80%, .4),
                0 2px 3px -1px hsla(22, 100%, 30%, .6);
}

/** ===== button-2 ===== **/
.button-2 {
    background-color: hsl(22, 90%, 90%);
    box-shadow: inset 0 0 0 1px hsl(22, 100%, 55%),
                0 2px 3px -1px hsla(22, 100%, 30%, .6);
    color: hsl(22, 100%, 40%);
    text-shadow: 0px 0px 2px hsl(22, 100%, 80%);
}

.button-2:hover {
    background-color: hsl(22, 90%, 95%);
    box-shadow: inset 0 0 0 1px hsl(22, 100%, 55%),
                0 0 0 4px hsla(22, 100%, 80%, .4),
                0 2px 3px -1px hsla(22, 100%, 30%, .6);
}

/** ===== button-3 ===== **/
.button-3 {
    background-color: transparent;
    padding: 0 1rem;
    box-shadow: none;
    color: hsl(22, 100%, 40%);
    text-shadow: none;
}

.button-3:hover {
    box-shadow: inset 0 0 0 1px hsl(22, 100%, 65%),
                0 0 0 4px hsla(22, 100%, 80%, .4);
}

/**#########################**/
/** ===== Inputs ===== **/
/**#########################**/
input[type='text'],
textarea,
select {
    min-width: 48px;
    min-height: 24px;
    background-color: var(--eknip-background-color-1);
    border: 1px solid hsl(240, 10%, 85%);
    border-radius: 2px;
    box-shadow: inset 0 1px 2px 0 hsl(240, 10%, 85%);
    margin: 0;
    padding: 0 .4rem;
    box-sizing: border-box;
    color: hsl(0, 0%, 20%);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: all .15s ease-in;
    -webkit-appearance: none;
}

select {
    max-width: 180px;
    padding: 0 .4rem;
    text-overflow: ellipsis;
    -webkit-appearance: listbox;
}

input[type='text']::placeholder,
textarea::placeholder {
    color: hsl(0, 0%, 50%);
}
  
input[type='text']:focus,
textarea:focus {
    border-color: var(--eknip-main-color-1);
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen and (max-device-width : 736px) {

	body {
		padding: 0;
	}

	main::after,
	main::before {
		display: none;
	}

}