html {
    overflow: auto;
}

body {
    background-color: #f2f2f2;
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    overflow: auto;
}

::-webkit-input-placeholder { color: #aaaaaa !important; font-weight: 400 !important; }
::-moz-placeholder          { color: #aaaaaa !important; font-weight: 400 !important; }
:-moz-placeholder           { color: #aaaaaa !important; font-weight: 400 !important; }
:-ms-input-placeholder      { color: #aaaaaa !important; font-weight: 400 !important; }


.btn {
    border-radius: 0;
}
.btn:focus {
    outline: none !important;
}
button:focus {
    outline: none !important;
}






#container-background {
    background-image: url("/resources/images/bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    left: 0;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    width: auto;
    z-index: -100;
}


#wrap-main {
    min-height: 100%;
    position: relative;
}

.box-auth,
.box-report {
    margin: 7% auto 0;
    padding-bottom: 80px;
}
@media (min-width: 768px) {
    .box-auth,
    .box-report {
        margin: 7% auto 0;
        padding-bottom: 60px;
    }
}

.box-auth__heading,
.box-report__heading {
    color: #ffffff;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 300;
}
.box-auth__heading h1,
.box-report__heading h1 {
    font-size: 32px;
    font-weight: 400;
    margin: 0;
}
.box-auth__heading p,
.box-report__heading p {
    font-size: 16px;
    font-weight: 400;
    margin: 25px 0 30px;
}

.box-auth__body,
.box-report__body {
    background: #ffffff;
    border-top: 0;
    color: #444444;
    margin: 0 auto;
    width: 470px;
}

.box-auth__body-heading,
.box-report__body-heading {
    padding: 20px;
}
.box-auth__body-heading {
    background: url("/resources/images/job4you.png") right center no-repeat scroll transparent;
    margin-right: 20px;
}
.box-auth__body-heading h2,
.box-report__body-heading h2 {
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 0;
}
.box-auth__body-heading p,
.box-report__body-heading p {
    margin-bottom: 0;
}

.box-auth__body-content,
.box-report__body-content {
    background-color: #eeedf1;
    padding: 20px;
}


#form-generate .input-group-addon {
    background-color: #f5f5f5;
    font-weight: 600;
    max-width: 70px;
    min-width: 70px;
    text-align: left;
}

#form-generate .col-year {
    padding-right: 15px;
}

#form-generate .col-month {
    padding-left: 15px;
}

#form-generate input#reportform-von,
#form-generate input#reportform-bis {
    width: 100%;
}

@media (min-width: 768px) {
    #form-generate .col-year {
        padding-right: 5px;
    }
    #form-generate .col-month {
        padding-left: 5px;
    }
}



/* toastr */
#toast-container > div {
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: default;
    opacity: 1;
    padding: 14px 50px 14px 20px;
    position: relative;
    width: 320px;
}
#toast-container > div:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: default;
    opacity: 1;
}

#toast-container > .toast-error,
#toast-container > .toast-success {
    background-image: none !important;
}

.toast-error {
    background-color: #f44336 !important;
}

.toast-success {
    background-color: #4caf50 !important;
}

.toast-close-button {
    text-shadow: none;
    opacity: 0.4;
    font-size: 0;
    right: 20px;
    top: 16px;
    position: absolute;
}
.toast-close-button:hover,
.toast-close-button:focus,
.toast-close-button:active {
    text-shadow: none;
    opacity: 0.4;
}

.toast-close-button-icon {
    display: inline-block;
    height: 14px;
    position: relative;
    width: 14px;
}
.toast-close-button-icon:before,
.toast-close-button-icon:after {
    background: #ffffff;
    content: "";
    height: 100%;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 2px;
}
.toast-close-button-icon:before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.toast-close-button-icon:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.toast-effect-scale.toast-show {
    animation-duration: 0.25s;
    animation-name: animationToastScale;
    -webkit-animation-duration: 0.25s;
    -webkit-animation-name: animationToastScale;
}

.toast-effect-scale.toast-hide {
    animation-direction: reverse;
    animation-duration: 0.25s;
    animation-name: animationToastScale;
    -webkit-animation-direction: reverse;
    -webkit-animation-duration: 0.25s;
    -webkit-animation-name: animationToastScale;
}

@-webkit-keyframes animationToastScale {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -40px, 0) scale3d(0.1, 0.6, 1)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
    }
}

@keyframes animationToastScale {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -40px, 0) scale3d(0.1, 0.6, 1);
        transform: translate3d(0, -40px, 0) scale3d(0.1, 0.6, 1)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1)
    }
}




/* shorts */
.font-size-12 { font-size: 12px }
.font-size-13 { font-size: 13px }
.font-size-14 { font-size: 14px }
.font-size-15 { font-size: 15px }
.font-size-16 { font-size: 16px }
.font-size-17 { font-size: 17px }
.font-size-18 { font-size: 18px }

.font-style-italic { font-style: italic }

.font-weight-300 { font-weight: 300 }
.font-weight-400 { font-weight: 400 }
.font-weight-500 { font-weight: 500 }
.font-weight-600 { font-weight: 600 }

.overflow-hidden { overflow: hidden; }

.margin-bottom-15 { margin-bottom: 15px }
.margin-bottom-30 { margin-bottom: 30px }

.margin-top-5 { margin-top: 5px }
.margin-top-10 { margin-top: 10px }
.margin-top-15 { margin-top: 15px }