/*generell*/

:root{
    /*Grundfarbe*/
    --grund: #f5f5f5;
    /*--grund: #1b2838;*/
    /*Lichtfarbe*/
    --c1: #ffffff;
    /*--c1: #273a51;*/
    /*Schattenfarbe*/
    --c2: #d9d9d9;
    /*--c2: #0f161f;*/
    /*Hoverfarbe*/
    --c3: #0000FF;

    --disabledColor: #d9d9d9 !important;
    --successColor: #198754 !important;
    --dangerColor: #dc3545 !important;
    --fontColorBasic: #000000 !important;

    /* Schattenvarianten */
    --softShadow: 20px 20px 60px var(--c2), -20px -20px 60px var(--c1);
    --hardShadow: 10px 10px 30px var(--c2), -10px -10px 30px var(--c1);

    --insetBoxShadow: inset 4px 4px 4px var(--c2), inset -4px -4px 4px var(--c1);
    --outsetBoxShadow: 4px 4px 4px var(--c2), -4px -4px 4px var(--c1);

    --inputShadow: inset 2px 2px 4px var(--c2),inset -2px -2px 4px var(--c1);
    --inputShadowFocus: inset 2px 2px 4px var(--c1),inset -2px -2px 4px var(--c2);
    /*--inputShadowFocus: -2px -2px 4px var(--c1), 2px 2px 4px var(--c2), inset -2px -2px 6px var(--c2), inset 2px 2px 6px var(--c1);*/
    --buttonShadow: 3px 3px 6px var(--c2),-3px -3px 6px var(--c1);
    --buttonShadowHover: 2px 2px 2px var(--c2), -2px -2px 2px var(--c1);
    --buttonShadowFocus: inset 3px 3px 6px var(--c2),inset -3px -3px 6px var(--c1);
    --buttonShadowActive: inset 3px 3px 6px var(--c2),inset -3px -3px 6px var(--c1);
    --iconShadowIn: inset 2px 2px 2px var(--c2), inset -2px -2px 2px var(--c1);
    --iconShadowOut: 2px 2px 2px var(--c2), -2px -2px 2px var(--c1);
    --radioShadow: inset 0 0 3px 3px var(--c2), inset 0 0 3px 3px var(--c1);

}

body{
    background-color: var(--grund) !important;
}

.font-color-basic{
    color: var(--fontColorBasic);
}

.bg-grund{
    background-color: var(--grund) !important;
}

.bg-disabled{
    background-color: var(--disabledColor);
}

.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus,
.btn:active:focus, .btn:focus{
    outline: none;
}

[class*="shadow"] {
    transition: all .2s ease-in-out;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

.shadow-soft{
    border-radius: 10px;
    border: none;
    background: var(--grund);
    box-shadow: var(--softShadow);
}

.shadow-hard{
    border-radius: 5px;
    border: none;
    background: var(--grund);
    box-shadow: var(--hardShadow);
}

.profile-image {
    width: 10rem;
    height: 10rem;
}

/* inputs */

.input-shadow{
    border: none;
    box-shadow: var(--inputShadow);
}

[class*= "input-shadow"]:focus{
    box-shadow: var(--inputShadowFocus);
}

.input-group-nm{
    box-shadow: var(--outsetBoxShadow);
    border-radius: 8px;
}

/*buttons*/

.button-shadow{
    border: none !important;
    outline: none !important;
    box-shadow: var(--buttonShadow);
}

[class*= "button-shadow"]:hover{
    box-shadow: var(--buttonShadowHover);
}

[class*= "button-shadow"]:active{
    box-shadow: var(--buttonShadowActive);
}

[class*= "button-shadow"]:focus {
    box-shadow: var(--buttonShadowFocus);
}

.btn-group-nm {
    box-shadow: var(--outsetBoxShadow);
    border-radius: 8px;
}

.btn-group .btn, .btn-group-vertical .btn {
    box-shadow: none;
    border: none;
}

.btn-group .btn:focus, .btn-group-vertical .btn:focus {
    box-shadow: var(--buttonShadowFocus);
}

.btn-group .btn:hover, .btn-group-vertical .btn:hover {
    color: var(--c3);
    box-shadow:  var(--buttonShadowHover);
}

[class*= "button-round"]{
    border-radius: 50%;
    border: 0;
    box-shadow: var(--iconShadowOut);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--disabledColor);
    transition: all .5s ease;
    background: linear-gradient(145deg, var(--c1), var(--c2));
}

[class*= "button-round"]:hover{
    color: var(--c3)
}

[class*= "button-round"]:active, [class*= "button-round"]:focus {
    background: linear-gradient(145deg, var(--c2), var(--c1));
    box-shadow: var(--iconShadowIn);
    color: var(--c3);
}

.br-5{
    width: 5rem !important;
    height: 5rem !important;
    font-size: 2.5em !important;
}

.br-4{
    width: 4rem !important;
    height: 4rem !important;
    font-size: 2em !important;
}

.br-3{
    width: 3rem !important;
    height: 3rem !important;
    font-size: 1.5em !important;
}

.br-2{
    width: 2rem !important;
    height: 2rem !important;
    font-size: 1em !important;
}

.br-1{
    width: 22px !important;
    height: 22px !important;
    font-size: 0.5em !important;
}


/*icons*/

.icon-shadow-in{
    border: none;
    box-shadow: var(--iconShadowIn);
}

.icon-shadow-out{
    border: none;
    box-shadow: var(--iconShadowOut);
}

[class*= "icon-flat"]{
    width: 32px;
    height: 32px;
    font-size: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--disabledColor);
    transition: all .5s ease;
    border: none !important;
    outline: none !important;
    box-shadow: var(--buttonShadow);
}

[class*= "icon-button"]{
    width: 32px;
    height: 32px;
    font-size: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--disabledColor);
    transition: all .5s ease;
    border: none !important;
    outline: none !important;
    box-shadow: var(--buttonShadow);
}

[class*= "icon-button"]:hover{
    color: var(--c3)
}

[class*= "icon-button"]:active, [class*= "icon-button"]:focus{
    color: var(--c3);
    box-shadow: var(--buttonShadowActive);
}

/*radio*/

[class*= "radio-button"]{
    background-image: none !important;
    border: none;
    outline: none;
    box-shadow: var(--radioShadow);
    margin-bottom: 3px;
}

[class*= "radio-button"]:hover{
    background-color: var(--c3);
}

[class*= "radio-button"]:checked{
    background-color: var(--successColor);
}

[class*= "radio-button"]:focus{
    box-shadow: var(--radioShadow);
}

/*checkbox*/

[class*= "check-button"]{
    background-image: none !important;
    border: none;
    outline: none;
    box-shadow: var(--radioShadow);
    margin-bottom: 3px;
}

[class*= "check-button"]:hover{
    background-color: var(--c3) !important;
}

[class*= "check-button"]:checked{
    background-color: var(--successColor);
}

[class*= "check-button"]:focus{
    box-shadow: var(--radioShadow);
}

[class*="form-check-label"]{
    cursor: pointer;
}

/*toggle*/
[class*= "toggle-button"]{
    border: none;
    outline: none;
    height: 1.25rem !important;
    width: 2.5rem !important;
    box-shadow: var(--radioShadow);
}

[class*= "toggle-button"]:checked{
    background-color: var(--successColor);
}

[class*= "toggle-button"]:focus{
    box-shadow: var(--radioShadow);
}

/*badges*/

[class*= "badget-shadow"]{
    border: none;
    outline: none;
    height: 1.25rem !important;
    box-shadow: var(--radioShadow);
}

/*progress*/

[class*= "progress-shadow"]{
    border: none;
    outline: none;
    border-radius: .5rem;
    height: 1.25rem !important;
    box-shadow: var(--iconShadowIn);
}

[class*= "progress-bar-shadow"]{
    opacity: 0.8;
    box-shadow: var(--iconShadowOut);
}

/*pagination*/
[class*= "pagination-shadow"]{
    border: none;
    outline: none;
    width: inherit;
    border-radius: .5rem;
    box-shadow: var(--buttonShadowHover);
}

[class*= "page-link-shadow"]{
    border: none;
    outline: none;
    color: black;
    background-color: var(--grund);
    box-shadow: var(--buttonShadow);
}

[class*= "page-link-shadow"]:hover, [class*= "page-link-shadow"]:focus {
    color: var(--c3);
    box-shadow: var(--buttonShadowHover);
}

/*listen*/

[class*= "list-group-shadow"]{
    border: none;
    outline: none;
    border-radius: .5rem;
    background-color: var(--grund);
    box-shadow: var(--outsetBoxShadow);
}

[class*= "list-group-item-shadow"]{
    border: none;
    outline: none;
    background-color: var(--grund);
    border: 1px solid var(--disabledColor);
}

[class*= "list-group-item-shadow"]:hover{
    color: var(--c3);
    box-shadow:  var(--buttonShadowHover);
}

/*cards*/

[class*= "card-shadow-out"]{
    border: none;
    outline: none;
    background-color: var(--grund);
    box-shadow: var(--outsetBoxShadow);
}

[class*= "card-shadow-in"]{
    border: none;
    outline: none;
    background-color: var(--grund);
    box-shadow: var(--insetBoxShadow);
}

[class*= "card-footer"]{
    border: none;
    outline: none;
    background-color: var(--grund);
}

[class*= "card-hover"]:hover{
    box-shadow: var(--buttonShadowHover);
}

[class*= "card-link"]{
    cursor: pointer;
    text-decoration: none;
    color: var(--fontColorBasic);
}

[class*= "card-link"]:hover{
    text-decoration: none;
    color: var(--fontColorBasic);
}

/*dropdown*/

[class*= "dropdown-menu-shadow-in"]{
    border: none;
    outline: none;
    background-color: var(--grund);
    box-shadow: var(--insetBoxShadow);
}

[class*= "dropdown-menu-shadow-out"]{
    border: none;
    outline: none;
    background-color: var(--grund);
    box-shadow: var(--outsetBoxShadow);
}

/*collapse*/

[class*= "collapse-shadow-in"]{
    border: none;
    outline: none;
    background-color: var(--grund);
    box-shadow: var(--insetBoxShadow);
}

[class*= "collapse-shadow-out"]{
    border: none;
    outline: none;
    background-color: var(--grund);
    box-shadow: var(--outsetBoxShadow);
}

/*accordion*/

[class*= "accordion-shadow-in"]{
    border: none;
    outline: none;
    background-color: var(--grund);
    box-shadow: var(--insetBoxShadow);
    padding: 0.75rem;
}

[class*= "accordion-shadow-out"]{
    border: none;
    outline: none;
    background-color: var(--grund);
    box-shadow: var(--outsetBoxShadow);
    padding: 0.75rem;
}

[class*= "accordion-collapse"]:hover{
    box-shadow: var(--outsetBoxShadow) !important;
}

[class*= "accordion-collapse"]:focus{
    box-shadow: var(--outsetBoxShadow) !important;
}

[class*= "accordion-collapse div"]:after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: 0 0;
    position: absolute;
    right: 1rem;
    top: 1.2rem;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
}

[class*= "accordion-collapse"].collapsed:after{
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    /*right: 1rem;*/
}

/*tabs*/

[class*= "nav-tabs-nm-out"]{
    border: 0 !important;
    padding: 0.5rem;
    box-shadow: var(--outsetBoxShadow);
}

[class*= "nav-tabs-nm-in"]{
    border: 0 !important;
    padding: 0.5rem;
    box-shadow: var(--insetBoxShadow);
}

[class*= "nav-link-nm-in"]{
    border: 0 !important;
    outline: none;
    text-decoration: none;
    color: var(--fontColorBasic);
    box-shadow: var(--insetBoxShadow);
}

[class*= "nav-link-nm-out"]{
    border: 0 !important;
    outline: none;
    text-decoration: none;
    color: var(--fontColorBasic) !important;
    box-shadow: var(--outsetBoxShadow);
    padding-left: 8px !important;
}

.nav-link-nm-in.active, .nav-link-nm-out.active{
    color: var(--c3) !important;
    background-color: var(--grund) !important;
    box-shadow: var(--radioShadow);
}

[class*= "nav-link-nm"]:hover{
    color: var(--c3);
}

[class*= "nav-link-nm"]:focus{
    color: var(--c3) !important;
    box-shadow: var(--radioShadow);
}

[class*= "nav-link-nm"]:active{
    color: var(--c3) !important;
    box-shadow: var(--radioShadow);
}

[class*= "nav-content-nm-out"]{
    padding: 0.5rem;
    box-shadow: var(--outsetBoxShadow);
}

[class*= "nav-content-nm-in"]{
    padding: 0.5rem;
    box-shadow: var(--insetBoxShadow);
}

[class*= "nav-pane-nm-in"]{
    padding: 0.5rem;
    box-shadow: var(--insetBoxShadow);
}

[class*= "nav-pane-nm-out"]{
    padding: 0.5rem;
    box-shadow: var(--outsetBoxShadow);
}

/*navbar*/

[class*= "navbar-shadow"]{
    border: 0 !important;
    box-shadow: var(--outsetBoxShadow);
}

/* datatable */

.dataTables_filter input{
    border: none !important;
    box-shadow: var(--inputShadow);
}

.dataTables_filter input:focus{
    box-shadow: var(--inputShadowFocus);
}

.dataTables_length select{
    background: var(--grund);
    color: var(--fontColorBasic);    
    border: none !important;
    outline: none !important;
    box-shadow: var(--buttonShadow);
}

.dataTables_length select:focus{
    box-shadow: var(--buttonShadowFocus);
}

.dataTables_paginate .pagination .page-link{
    border: none;
    outline: none;
    color: black;
    background-color: var(--grund);
    box-shadow: var(--buttonShadow);
    margin-right: .25rem !important;
}

.dataTables_paginate .pagination .page-link:hover, .dataTables_paginate .pagination .page-link:focus, .dataTables_paginate .pagination .page-link:active{
    color: var(--c3);
    box-shadow: var(--buttonShadowHover);
}

.dataTables_paginate .pagination .page-item.disabled .page-link{
    background-color: var(--disabledColor) !important;
}

[class*="dataTables_length"]{
    color: var(--fontColorBasic);
}

[class*="dataTables_filter"]{
    color: var(--fontColorBasic);
}

[class*="dataTables_info"]{
    color: var(--fontColorBasic);
}

/* bootstrap-select */

.bootstrap-select .dropdown-menu{
    border: none;
    outline: none;
    background-color: var(--grund);
    box-shadow: var(--outsetBoxShadow);
}

.bootstrap-select .dropdown-menu input{
    border: none;
    box-shadow: var(--inputShadow);
}

.bootstrap-select .dropdown-menu input:focus{
    box-shadow: var(--inputShadowFocus);
}

.bootstrap-select .dropdown-menu.inner .dropdown-item:hover{
    background-color: var(--c3);
    color: var(--c1);
}

.bootstrap-select .dropdown-menu.inner .dropdown-item.selected.active{
    background-color: var(--successColor);
    color: var(--c1);
}

.bootstrap-select.form-control{
    background-color: transparent;
}

/* Toast */

.toast-header{
    background-color: transparent !important;
}


.organic-radius {
    border-radius: 63% 37% 30% 70%/50% 45% 55% 50%;
}