@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body,
html {
    height: 100%;
    font-family: Roboto, sans-serif;
    background-color: hsla(216, 33%, 97%, 1);
}
.dark-moodcontent,.dark-moodcontent .filterbox,.dark-moodcontent .modal-body,.dark-moodcontent .modal-footer,.dark-moodcontent .viewreasonbox,.dark-moodcontent .ausgabeBgcolor,.dark-moodcontent .box3,.dark-moodcontent .multiple_list_container,.dark-moodcontent .multiple_list_submit,.dark-moodcontent .swal2-popup  {
    background-color: #001737 !important;
    }
    .dark-moodcontent,.dark-moodcontent .apexcharts-legend-text,.dark-moodcontent .activity-body,.dark-moodcontent h6,.dark-moodcontent h3,.dark-moodcontent h4,.dark-moodcontent .nav-tabs .nav-link.active,.dark-moodcontent .box-total-tickets,.dark-moodcontent .box .box-number,.dark-moodcontent .box .box-title,.dark-moodcontent .report-box::before,.dark-moodcontent .card,.dark-moodcontent .box,.dark-moodcontent .form-control,.dark-moodcontent .input-group-text,.dark-moodcontent .ticket-list .item-ticket,.dark-moodcontent .ticket-list .item-ticket span:not(.total-tickets),.dark-moodcontent .ticket-list .selected ,.dark-moodcontent .adduserdetailmodal,.dark-moodcontent .card-title,.dark-moodcontent .viewreasonbox ,.dark-moodcontent .ticket-model-section h2,.dark-moodcontent .uppy-Dashboard-dropFilesHereHint,.dark-moodcontent table,.dark-moodcontent .dropdown-list,.dark-moodcontent  .list-group-item,.dark-moodcontent .analytics-list-value h5,.dark-moodcontent .ticket-list .item-ticket.ticket-duplicate span ,.dark-moodcontent  .ticket-list .item-ticket.ticket-deleted span,.dark-moodcontent .ticket-list .item-ticket.selected span,.dark-moodcontent .ausgabeInputBox,.dark-moodcontent .ticket-model-section,.dark-moodcontent .uppy-Dashboard-AddFiles-title,.dark-moodcontent .ticketheadicon {
        color: rgb(255 255 255 / 1) !important;
    }

:root {
    --p1: 0.25rem;
    /* 4px */
    --p2: 0.5rem;
    /* 8px */
    --p3: 0.75rem;
    /* 12px */
    --p4: 1rem;
    /* 16px */
    --p5: 1.25rem;
    /* 20px */
    --p6: 1.5rem;
    /* 24px */
    --p8: 2rem;
    /* 32px */
    --p10: 2.5rem;
    /* 40px */
    --form-control-border: 1px solid #FF6D6D;
    --form-control-padding: 4px;

    --danger-100: hsla(0, 100%, 94%, 1);
    --danger-500: #FF6D6D;

    --color-success-100: hsla(152, 68%, 96%, 1);
    --color-text: black;
    --color-header: var(--color-text);

    --color-accent-500: #FF6D6D;

    --color-accent-500: hsla(211, 91%, 42%, 1);
    --color-accent-700: #004d91;

    --color-gray-100: hsla(216, 33%, 97%, 1);
    --color-gray-500: hsla(210, 27%, 70%, 1);
    --color-gray-900: hsla(244, 17%, 28%, 1);

    --font-family: 'Nunito', sans-serif;
    --color-text-100: var(--color-gray-100);
    --color-text: var(--color-gray-500);
    --color-header: var(--color-gray-900);

    --form-control-border: none;
    --form-control-padding: var(--p2) var(--p4);
    --form-control-radius: 12px;
    --form-control-background: white;
    --shadow-color: var(--color-gray-300);
}

/*---------------------------------------------*/
input {
    outline: none !important;
    border: none;
}

.form-group {
    margin-bottom: var(--p4);
    background: white;
    background: var(--form-control-background);
    border-radius: 12px;
    border-radius: var(--form-control-radius);
    transition: box-shadow 0.3s;
    border: 1px solid white;
    border: 1px solid var(--form-control-background);
}

.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    border: 1px solid red;
    border: var(--form-control-border);
    padding: 4px;
    padding: var(--form-control-padding);
    border-radius: var(--form-control-radius);
    text-align: center;
    display: inline-block;
    min-width: 48px;
}

.input-group-prepend .input-group-text {
    padding-right: 0.5rem;
    padding-right: var(--p2);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0 !important;
}

.input-group-prepend .input-group-text svg,
.input-group-append .input-group-text svg {
    fill: currentColor;
}

.form-control {
    height: auto;
    border: 1px solid red;
    border: var(--form-control-border);
    padding: 4px;
    padding: var(--form-control-padding);
    border-radius: var(--form-control-radius);
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-control,
.input-group-text {
    color: black;
    color: var(--color-text);
    background: transparent;
}

.input-group .input-group-prepend+.form-control {
    border-left: 0 !important;
    padding-left: 0.25rem;
    padding-left: var(--p1);
}

.input-group .input-group-prepend+.form-control {
    padding-left: 0.5rem;
    padding-left: var(--p2);
}

input:focus {
    border-color: transparent !important;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder {
    color: transparent;
}

textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

textarea:focus:-moz-placeholder {
    color: transparent;
}

textarea:focus::-moz-placeholder {
    color: transparent;
}

textarea:focus:-ms-input-placeholder {
    color: transparent;
}

input::-webkit-input-placeholder {
    color: #999999;
}

input:-moz-placeholder {
    color: #999999;
}

input::-moz-placeholder {
    color: #999999;
}

input:-ms-input-placeholder {
    color: #999999;
}

textarea::-webkit-input-placeholder {
    color: #999999;
}

textarea:-moz-placeholder {
    color: #999999;
}

textarea::-moz-placeholder {
    color: #999999;
}

textarea:-ms-input-placeholder {
    color: #999999;
}

input {
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/*---------------------------------------------*/

body>.row {
    height: 100vh;
    width: 100%;
    margin: auto;
    padding: 0;
}

body>.row>div {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

body>.row>div>form {
    width: 36%;
}

body>.row>div.col-6 {
    background-image: url(../images/login-bg.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

body>.row>div.col-6>img {
    width: 30%;
}








.btn.btn-primary {
    border: 0;
    background-color: red;
    background-color: var(--color-accent-500);
}

.btn.btn-primary:hover {
    background-color: var(--color-accent-700);
}

h4 {
    color: black;
    color: var(--color-header);
    font-weight: 700;
    margin-bottom: 1rem;
    margin-bottom: var(--p4);
}

.form-control {
    height: auto;
    border: 1px solid red;
    border: var(--form-control-border);
    padding: 4px;
    padding: var(--form-control-padding);
    border-radius: var(--form-control-radius);
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    border: 1px solid red;
    border: var(--form-control-border);
    padding: 4px;
    padding: var(--form-control-padding);
    border-radius: var(--form-control-radius);
    text-align: center;
    display: inline-block;
    min-width: 48px;
}

.input-group-prepend .input-group-text svg,
.input-group-append .input-group-text svg {
    fill: currentColor;
}

.input-group .input-group-prepend+.form-control {
    border-left: 0 !important;
    padding-left: 0.25rem;
    padding-left: var(--p1);
}

.input-group .input-group-append+.form-control {
    border-right: 0;
    padding-right: 0.25rem;
    padding-right: var(--p1);
}

.alert-danger {
    background-color: hsla(0, 100%, 94%, 1);
    background-color: var(--danger-100);
    color: hsla(4, 69%, 53%, 1);
    color: var(--danger-500);
}

.has-error .form-control,
.has-error .input-group-append .input-group-text,
.has-error .input-group-prepend .input-group-text {
    border-color: hsla(4, 69%, 53%, 1);
    border-color: var(--danger-500);
    outline-color: hsla(4, 69%, 53%, 1);
    outline-color: var(--danger-500);
    box-shadow: none;
}

.has-error .form-control,
.has-error .input-group-prepend .input-group-text {
    color: hsla(4, 69%, 53%, 1);
    color: var(--danger-500);
}

.has-error {
    background: hsla(0, 100%, 94%, 1);
    background: var(--danger-100);
}

.has-error .form-control::-webkit-input-placeholder {
    color: hsla(4, 69%, 53%, 1);
    color: var(--danger-500);
}

.has-error .form-control::-moz-placeholder {
    color: hsla(4, 69%, 53%, 1);
    color: var(--danger-500);
}

.has-error .form-control:-ms-input-placeholder {
    color: hsla(4, 69%, 53%, 1);
    color: var(--danger-500);
}

.has-error .form-control::-ms-input-placeholder {
    color: hsla(4, 69%, 53%, 1);
    color: var(--danger-500);
}

.has-error .form-control::placeholder {
    color: hsla(4, 69%, 53%, 1);
    color: var(--danger-500);
}

.has-error .form-control,
.has-error .input-group-text,
.has-error input:-webkit-autofill,
.has-error input:-webkit-autofill:hover,
.has-error input:-webkit-autofill:focus,
.has-error input:-webkit-autofill:active {
    box-shadow: 0 0 0 30px hsla(0, 100%, 94%, 1) inset !important;
    box-shadow: 0 0 0 30px var(--danger-100) inset !important;
    border-color: hsla(4, 69%, 53%, 1);
    border-color: var(--danger-500);
    color: hsla(4, 69%, 53%, 1);
    color: var(--danger-500);
}

.is-valid,
.is-valid input:-webkit-autofill,
.is-valid input:-webkit-autofill:hover,
.is-valid input:-webkit-autofill:focus,
.is-valid input:-webkit-autofill:active {
    background-color: hsla(152, 68%, 96%, 1);
    background-color: var(--color-success-100);
    box-shadow: 0 0 0 30px hsla(152, 68%, 96%, 1) inset !important;
    box-shadow: 0 0 0 30px var(--color-success-100) inset !important;
}

.form-group.focused:not(.has-error) {
    background: white;
    border-color: var(--color-text-100);
}

.form-control,
.input-group-text {
    color: black;
    color: var(--color-text);
    background: transparent;
}

.form-control::-webkit-input-placeholder {
    color: black;
    color: var(--color-text);
}

.form-control::-moz-placeholder {
    color: black;
    color: var(--color-text);
}

.form-control:-ms-input-placeholder {
    color: black;
    color: var(--color-text);
}

.form-control::-ms-input-placeholder {
    color: black;
    color: var(--color-text);
}

.form-control::placeholder {
    color: black;
    color: var(--color-text);
}

.forny-container .custom-control-input:checked~.custom-control-label::before {
    border-color: red;
    border-color: var(--color-accent-500);
    background-color: red;
    background-color: var(--color-accent-500);
}

/* INPUT ADDONS */

.form-group .input-group-append .input-group-text {
    padding-left: 0.5rem;
    padding-left: var(--p2);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0 !important;
}

.form-group .input-group-append .input-group-text:hover {
    color: red;
    color: var(--color-accent-500);
}

.input-group-prepend .input-group-text {
    padding-right: 0.5rem;
    padding-right: var(--p2);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0 !important;
}

/* ALERTS */

.alert {
    margin-bottom: 1rem;
    margin-bottom: var(--p4);
}

.password-field .form-control {
    border-right: 0 !important;
}

.btn-icon {
    margin-right: 8px;
}

button {
    outline: none !important;
    border: none !important;
    background: transparent;
    display: block !important;
    width: 10rem;
    margin: auto !important;
    border-radius: var(--form-control-radius) !important;
}

button:hover {
    cursor: pointer;
}

/* ====================================  RESPONSIVE ==================================== */
@media only screen and (max-width:1550px) {
}

@media only screen and (max-width:1441px) {
}

@media only screen and (max-width:1280px) {}

@media only screen and (max-width:1140px) {
}

@media only screen and (max-width:1024px) {}

@media only screen and (max-width:769px) {
}

@media only screen and (max-width:680px) {}

@media only screen and (max-width:480px) {
    body>.row>div>form {
        width: 80%;
    }

    body>.row>div.col-6:last-of-type {
        display: none;
    }
}

@media only screen and (max-width:425px) {}

@media only screen and (max-width:380px) {}

@media only screen and (max-width: 320px) {}