/* ##

! Magic

## */
body {
    padding-right: unset !important;
}

.appear-on-view {
    /*transition: opacity 1.3s ease-out, transform 1.6s ease-out;*/
    transition: all 0.8s cubic-bezier(0.04, 0.7, 0.29, 0.97);
    /*transform: translateY(6rem);*/
    opacity: 1.0;

}


.parallax {
  perspective: 1px;
  height: calc(100vh - 5rem);
  overflow-x: hidden;
  overflow-y: auto;
  perspective-origin-x: 100%;
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin-x: 100%;
}

.parallax__group {
  position: relative;
  height: calc(100vh - 5rem);
  transform-style: preserve-3d;
}

.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}

.parallax__layer--deep {
    transform: translateZ(-2px) scale(3);
}


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

/* ##

! Spacer

## */

superthinspacer {
    width: 100%;
    height: 0.4rem;
    display: block;
}

thinspacer {
    width: 100%;
    height: 1rem;
    display: block;
}

slimspacer {
    width: 100%;
    height: 2.5rem;
    display: block;
}

spacer {
    width: 100%;
    height: 5rem;
    display: block;
}

bigspacer {
    width: 100%;
    height: 10rem;
    display: block;
}

/* ##

! Backgrounds

## */

.bg-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.overlay-dark-0-1 {
    background-color: rgba(0, 0, 0, 0.1);
}

.overlay-dark-0-2 {
    background-color: rgba(0, 0, 0, 0.2);
}

.overlay-dark-0-3 {
    background-color: rgba(0, 0, 0, 0.3);
}

.overlay-dark-0-4 {
    background-color: rgba(0, 0, 0, 0.4);
}

.overlay-dark-0-5 {
    background-color: rgba(0, 0, 0, 0.5);
}

.overlay-dark-0-6 {
    background-color: rgba(0, 0, 0, 0.6);
}

.overlay-dark-0-7 {
    background-color: rgba(0, 0, 0, 0.7);
}

.overlay-dark-0-8 {
    background-color: rgba(0, 0, 0, 0.8);
}

.overlay-dark-0-9 {
    background-color: rgba(0, 0, 0, 0.9);
}

/* ##

! Sizes

## */

.v-height {
    height: 100vh;
}

img.full-image {
    /*
    max-width: 80rem;
    width: 100%;
    height: auto;
    padding: 2rem;
    */
    width: 100%;
    height: auto;

}

.img-column-9 {
    max-width: 9rem;
    width: 100%;
    height: auto;
    padding: 1rem;
    box-sizing: border-box;
}

.img-column-14 {
    max-width: 14rem;
    width: 100%;
    height: auto;
    padding: 1rem;
    box-sizing: border-box;
}

.img-column-18 {
    max-width: 18rem;
    width: 100%;
    height: auto;
    padding: 1rem;
    box-sizing: border-box;
}

.img-column-27 {
    max-width: 27rem;
    width: 100%;
    height: auto;
    padding: 1rem;
    box-sizing: border-box;
}

img.fill {
    width: 100%;
    height: auto;
}

.width-100-p {
    width: 100%;
}

.whole-height {
    /*min-height: calc(100vh - 6rem);*/
    min-height: calc(100vh - 5rem);
}

/* ##

! Paddings

## */

.content-padding {
    padding: 3rem 2rem;
}

.section-padding-enormous {
    padding-top: 10rem;
    padding-bottom: 10rem;
}

/* ##

! Media Queries

## */

@media (max-width: 549px) {
    .text-center-on-mobile {
        text-align: center;
    }
}


/* ##

! Lists

## */

ul.features li {
    margin: 0;
    list-style: none;
    padding-left: 2.0rem;
}

ul.features li::before {
    content: '';
    margin-left: -2.0rem;
    display: inline-block;
    height: 1.3rem;
    width: 1.3rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 0.7rem;
    vertical-align: middle;

}

ul.features.features-white li::before {
    background-image: url('../imgs/yes-white.svg');
}

ul.included li {
    margin: 0;
    list-style: none;
    padding-left: 2.0rem;
}

ul.included li::before {
    content: '';
    margin-left: -2.0rem;
    display: inline-block;
    height: 1.3rem;
    width: 1.3rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 0.7rem;
    vertical-align: middle;
}

.hover-pointer:hover {
    cursor: pointer;
}

img.max-width {
    width: 100%;
    max-width: 40rem;
    max-width: attr(data-max-width);
}

ul.slim li {
    margin-bottom: 0.3rem;
}


input:not([type='checkbox']).wider {
    width: 100%;
    max-width: 23rem;
}

input[type="password"] {
    padding-right: 30px;
}

button.wider {
    width: 100%;
    max-width: 23rem;
}

textarea.wider {
    width: 100%;
    max-width: 23rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

select.wider {
    width: 100%;
    max-width: 23rem;
}

ul {
    padding-left: 1rem;
    list-style-position: outside;
}

/* fixing anchor for index page */

.pw-headline {
    display: block;
}

/* tooltip box for password */
/* Tooltip container*/
.tooltip {
    position: relative;
    display: inline;
    border-bottom: none;
    margin-left: 10px;
    opacity: 1;
}

/* Tooltip text*/
.tooltip .tooltiptext {
    visibility: hidden;
    width: 340px;
    background-color: black;
    color: #fff;
    text-align: left;
    padding: 15px 0;
    border-radius: 6px;
    margin-left: 0.5em;
    max-width: 60vw;
}

.tooltiptext ul {
    margin-bottom: 0;
}

.tooltip .position_left {
    position: absolute;
    z-index: 100;

    top: -5px;
    left: 105%;

    padding-left: 20px;
    padding-right: 20px;
}

.tooltip .position_bottom {
    position: absolute;
    z-index: 100;

    top: 20px;
    right: -10%;

    padding-left: 10px;
    padding-right: 10px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.wordBreak {
    word-break: break-all;
}

.field-icon {
    /*float: right;*/
    margin-left: -35px;
    margin-top: -25px;
    /*position: relative;*/
    z-index: 2;
}

.fa-eye {
    font-size: 20px;
    color: rgb(178, 178, 178);
}

.fa-eye-activated {
    color: #5bc0de;
}

@media (min-width: 769px) {
    [data-tooltip] {
        display: inline-block;
        position: relative;
        cursor: help;
        padding: 4px;
    }
    /* Tooltip styling */
    [data-tooltip]:before {
        content: attr(data-tooltip);
        display: none;
        position: absolute;
        background: #000;
        color: #fff;
        padding: 4px 8px;
        font-size: 14px;
        line-height: 1.4;
        min-width: 140px;
        text-align: center;
        border-radius: 4px;
    }

    /* Dynamic horizontal centering */
    [data-tooltip-position="top"]:before,
    [data-tooltip-position="bottom"]:before {
        left: 50%;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    /* Dynamic vertical centering */
    [data-tooltip-position="right"]:before,
    [data-tooltip-position="left"]:before {
        top: 50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    [data-tooltip-position="top"]:before {
        bottom: 100%;
        margin-bottom: 6px;
    }

    [data-tooltip-position="right"]:before {
        left: 100%;
        margin-left: 6px;
    }

    [data-tooltip-position="bottom"]:before {
        top: 100%;
        margin-top: 6px;
    }

    [data-tooltip-position="left"]:before {
        right: 100%;
        margin-right: 6px;
    }

    /* Tooltip arrow styling/placement */
    [data-tooltip]:after {
        content: '';
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }

    /* Dynamic horizontal centering for the tooltip */
    [data-tooltip-position="top"]:after,
    [data-tooltip-position="bottom"]:after {
        left: 50%;
        margin-left: -6px;
    }

    /* Dynamic vertical centering for the tooltip */
    [data-tooltip-position="right"]:after,
    [data-tooltip-position="left"]:after {
        top: 50%;
        margin-top: -6px;
    }

    [data-tooltip-position="top"]:after {
        bottom: 100%;
        border-width: 6px 6px 0;
        border-top-color: #000;
    }

    [data-tooltip-position="right"]:after {
        left: 100%;
        border-width: 6px 6px 6px 0;
        border-right-color: #000;
    }

    [data-tooltip-position="bottom"]:after {
        top: 100%;
        border-width: 0 6px 6px;
        border-bottom-color: #000;
    }

    [data-tooltip-position="left"]:after {
        right: 100%;
        border-width: 6px 0 6px 6px;
        border-left-color: #000;
    }

    /* Show the tooltip when hovering */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        display: block;
        z-index: 50;
    }

    .showpasswordcorrection {
        margin-left: -5px;
    }
}

@media (max-width: 768px) {
    .showpasswordcorrection {
        margin-left: -10px;
    }
}

.prio-high {
    text-color: red;
}

/*@media (min-width: 769px) {*/
@media (min-width: 550px) {
    .align-right {
        text-align:right;
    }
}


.icon.play {
    width: 8px;
    height: 13px;
    border-style: solid;
    box-sizing: border-box;
    border-width: 8px 0px 8px 13px;
    border-color: transparent transparent transparent #5bc0de;
}

.edit-pencil {
	position: absolute;
	display: inline-block;
	width: 25px;
	height: 36px;
    margin-top: -7px;
    padding: 0 7px;
	font-size: 0;
	vertical-align: middle;
	cursor: pointer;
}
.edit-pencil:before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-2px, -3px) rotate(-45deg);
	width: 3px;
	height: 5px;
	background-color: #707070;
	box-shadow: 1px 0px 0px #707070, 2px 0px 0px #707070, 3px 0px 0px #707070, -1px 0px 0px #707070, -2px 0px 0px #707070, -3px 0px 0px #707070, -3.3px 0px 0px #707070, 7px 0px 0px #707070;
	transition: all 300ms;
	content: '';
}
.edit-pencil:after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-9px, 3px) rotate(-45deg);
	font-size: 1px;
	border: solid 3em transparent;
	border-left-width: 0;
	border-right-width: 5em;
	border-right-color: #707070;
	transition: all 300ms;
	content: '';
}
.edit-pencil:hover:before {
	background-color: #D80074;
	box-shadow: 1px 0px 0px #D80074, 2px 0px 0px #D80074, 3px 0px 0px #D80074, -1px 0px 0px #D80074, -2px 0px 0px #D80074, -3px 0px 0px #D80074, -3.3px 0px 0px #D80074, 7px 0px 0px #D80074;
}
.edit-pencil:hover:after {
	border-right-color: #D80074;
}

.success {
    color: green;
}
.warning {
    color: blue;
}
.error {
    color: red;
}
.red {
    color: red!important;
}
.button {
    border-radius: 0.33rem;
    border-width: 1px;
    border-style: solid;
    font-size: 1rem;
    outline: none;
    background-color: rgb(237, 237, 237);
    border-color: rgb(178, 178, 178);
    color: rgb(0, 0, 0);
    padding: 0.2rem;
    width: 25px;
    height: min-content;
    margin-top: auto;
    text-align: center;
}

form#editCronExpression {
    display: inline flex;
}
form#editCronExpression input:not([type="checkbox"]) {
    width: 10rem;
    padding: 0.2rem;
}
form#editCronExpression button {
    padding: 0.2rem;
    width: 25px;
    height: min-content;
    margin-top: auto;
}