/*
Author       : INOYA
*/

/*============================
 [Table of CSS]

1. Allgemein
2. Login
3. Bestellungen
4. Bestellung bearbeiten
5. Responsive
6. Select2
7. Header
8. Bestellung anlegen
9. Version
10. Accordion

6f9300

========================================*/



/*-----------------
	1. Allgemein
-----------------------*/

body {
    background-color: #f7f7f2;
    padding-top: 0px;
    font-family: 'Nunito';
     background-image: url('../img/pattern.svg');
    background-repeat: repeat;
    background-size: 300px;
}

.table-bordered td, .table-bordered th {
    border-color: #f1f1f1;
}

.page-wrapper {
    padding-top: 20px;
}

.active .nav-link {
    text-decoration: underline;
    text-underline-offset: 4px;
    
}

.offcanvas-collapse.open .active .nav-link {
    background: #fff1c7;
    padding: 12px;
    border-radius: 12px;
    
}

.offcanvas-collapse.open .navbar-nav .nav-link {
    font-size: 22px;
}

.btn-success {
    background-color: #8BC34A;
    border-color: #8BC34A;
    padding: 12px 20px;
    font-weight: 700;
}

.btn {
    border-radius: 999px;
}


.btn-primary {
    background-color: #2596be;
    border-color: #2596be;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
strong, bold, .bold {
    font-family: 'Nunito Bold';
}

.bold {
    font-weight: bold;
}

.button-group a, .button-group button {
    margin-bottom: 15px;
    margin-right: 5px;
}

.form-control {
    height: auto;
    line-height: inherit;
    padding: 10px 20px 10px 20px;
    font-size: 15px;
    color: #192024;
    border-color: rgba(128, 137, 150, 0.2);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background-color: #fff;
    border-bottom: 2px solid #e6e6e6;
}

.card {
  border: none;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
}

.card .card-header {
    border-bottom: 1px solid #FFF8E7;
    padding: 15px 20px;
    background: #fff1c7;
    font-size: 22px;
    font-weight: 800;
}

.card .card-header h3 { 
    padding: 0;
    margin: 0;
    font-size: 24px;
    line-height: 34px;
}

input.disabled,
textarea.disabled,
select.disabled {
  background-color: #f3f4f6;
  color: #6b7280;
  border-color: #d1d5db;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-block {
    width: 100%;
}

.w-20{
    width: 20%;
}

.w-60{
    width: 60%;
}

.mt-50 {
    margin-top: 50px;
}

.mt-10 {
    margin-top: 10px;
}
.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-20 {
    margin-bottom: 20px;
}

.big-font {
    font-size: 20px;
}

.bold {
    font-weight: bold;
}

.section {
	padding: 100px 0;
}

.section-bestellung {
    padding: 100px 150px;
}

.card-table .card-body {
	padding: 0;
}

.card-table .card-body table {
	padding: 0;
	margin: 0;
	border: 0;
}

.card-table .card-body table {
	padding: 0;
	margin: 0;
}

.card-table .card-body table th {
	border-top: 0;
	border-bottom: 0;
}

.card-table .card-body table.table-bordered th {
	border: 1px solid #f1f1f1!important;
}


.table-data-small {
	font-size: 13px;
}

.alert {
    text-align: center;
}

.btn-icon i {
    margin-right: 10px;
}

/*-----------------
	2. Login
-----------------------*/

.login-body {
    display: table;
    height: 100vh;
    min-height: 100vh;
    width: 100%;
    background-image: url('/assets/img/kidsfoodservice-bg.png');
    background-size: cover;
}

.login-wrapper {
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}

.login-wrapper .loginbox {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	display: flex;
    margin: 1.875rem auto;
    max-width: 800px;
    min-height: 500px;
    width: 100%;
}

.login-wrapper .loginbox .login-left {
    align-items: center;
    border-radius: 6px 0 0 6px;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    width: 400px;
    display: flex;
}

.login-wrapper .loginbox .login-right {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 40px;
    width: 400px;
    background-color: #DFF4FF;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.login-wrapper .loginbox .login-right .login-right-wrap {
    max-width: 100%;
    flex: 0 0 100%;
}

.login-wrapper .loginbox .login-right h1 {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
}
.account-subtitle {
    color: #4c4c4c;
    font-size: 17px;
    margin-bottom: 1.875rem;
    text-align: center;
}

.forgotpass {
	margin-top: 20px;
}

.login-wrapper .loginbox .login-right .forgotpass a {
	color: #333;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.login-wrapper .loginbox .login-right .forgotpass a:hover {
	text-decoration: none;
}

.login-wrapper .loginbox .login-right .dont-have {
	color: #a0a0a0;
	margin-top: 1.875rem;
}

.login-wrapper .loginbox .login-right .dont-have a {
	color: #333;
}

.login-wrapper .loginbox .login-right .dont-have a:hover {
	text-decoration: underline;
}

.login-right-wrap img {
    display: none;
}

.login-wrapper .loginbox .login-right .logo {
	display: none;
	text-align: center;
	margin-bottom: 20px;
}

.login-body {
    background-repeat: no-repeat;
    background-size: cover;
	position: relative;
}


.login-body:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom right, #313131, #313131);
    opacity: 0.7;
}

.login-body .login-wrapper {
	position: relative;
	z-index: 1;
}

@media only screen and (max-width: 767.98px) {
	.login-wrapper .loginbox .login-right .logo {
    	display: block;
	}
}

/*-----------------
	3. Bestellungen
-----------------------*/


.js_table_bestellungen tr td,
.js_table_bestellungen tr th {
	font-size: 14px;
}


.js_table_bestellungen tr td ul,
.card_wochentag ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.js_table_bestellungen tr td ul li,
.card_wochentag ul li {
	margin-bottom: 5px;
}

.js_table_bestellungen .btn-sm,
.card_wochentag .btn-sm {
	font-size: 13px;
	padding: 6px 12px;
}

.sonstige-list {
    margin: 0 0 0 20px;
}

.sonstige-list li {
    font-size: 14px;
    margin-bottom: 10px;
}

.js_delete_sonstige_allergie {
    margin-left: 5px;
}

.table .actions a,
.table .actions button {
    margin-bottom: 10px;
    margin-right: 5px;
}

/*-----------------
	4. Bestellung bearbeiten
-----------------------*/

.js_bestellung_bearbeiten_wrapper .card_wochentag {
    margin-bottom: 20px;
}

/*-----------------
	5. Responsive
-----------------------*/

@media (max-width: 1600px) { 
    .section-bestellung {
        padding: 50px 20px;
    }
}


@media only screen and (max-width: 767.98px) {
    .loginbox .login-left {
		display: none!important;
	}
    .loginbox .login-right {
        width: 100%!important;
    }
    .loginbox .login-right img {
        display: inline;
    }
    .user-menu-desktop {
        display: none!important;
    }

    .page-wrapper {
        padding-top: 40px;
    }
}


@media (min-width: 767.98px) { 
    .user-menu-mobile {
        display: none!important;
    }
}

/*-----------------
	6. Select2
-----------------------*/

.select2-container .select2-selection--single {
	height: 50px;
}

.select2-container--default .select2-selection--single {
	height: 50px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 48px;
	right: 7px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-style: solid;
	border-width: 6px 6px 0;
	height: 0;
	left: 50%;
	margin-left: -10px;
	margin-top: -2px;
	position: absolute;
	top: 50%;
	width: 0;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-width: 0 6px 6px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
	padding-right: 30px;
	padding-left: 15px;
    border: 2px solid #e6e6e6 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	font-size: 15px;
	font-weight: normal;
	line-height: 48px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #e2a606;
}
.select2-container--default .select2-results__option {
	background-color: #ffffff;
}

.select2-container--default .select2-selection--multiple {
	min-height: 50px;
	border: 2px solid #e6e6e6 !important;
}
.select2-container--default .select2-selection--multiple{
    border-radius: 4px;
    cursor: text;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;
}

/*-----------------
	7. Header
-----------------------*/

.navbar {
      background: white;
  border-bottom: 4px solid #9bd66f;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.navbar-brand img {
    height: 50px;
    margin-right: 30px;
}

.navbar img {
    width: 200px;
    height: auto;
}

.navbar a {
    color: #333;
}

.navbar .navbar-toggler-icon{
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

.navbar .user-menu .dropdown-menu {
    padding-top: 0px;
    padding-bottom: 0px;
    position: absolute;
    top: 48px;
    right: 0;
    left: auto;
    min-width: max-content;
}

.navbar .user-menu .user-header {
    padding: 15px;
    background-color: #f1f1f1;    
}

.navbar .user-menu .user-text h6 {
    margin-bottom: 0px;
}

.navbar .user-menu .dropdown-menu .dropdown-item {
    padding: 10px;
    border-top: solid 1px #f1f1f1;
}

.navbar .user-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.navbar .user-menu .dropdown {
    position: relative;
}

/*-----------------
	8. Bestellung anlegen
-----------------------*/

.js_speiseplaene ul li {
    margin-bottom: 6px;
}

/*-----------------
	9. Version
-----------------------*/

.section_version img {
    width: 200px;
    margin-bottom: 20px;
}

.section_version a {
    color: #333;
    text-decoration: underline;
    text-underline-offset: 4px;
}


.section_version .realisiert {
    margin-top: 100px;
    background-color: #F8F8F8;
    padding: 25px;
    border-radius: 6px;
}

.section_version a:hover {
    text-decoration: none;
}

/*-----------------
	10. Accordion
-----------------------*/

ul.accordion {
    list-style: none;
    margin: 0;
    padding: 0;
}

.accordion-item .accordion-panel h1,
.accordion-item .accordion-panel h2,
.accordion-item .accordion-panel h3 {
	margin-bottom: 20px;
}

.accordion-thumb {
	margin: 0;
	padding: 20px;
	cursor: pointer;
	position: relative;
    background: #fff1c7;
}

.accordion-thumb h3 {
	font-size: 22px;
	line-height: 32px;
    margin: 0;
}

.accordion-panel {
	padding: 35px;
}

.accordion-thumb:hover,
.accordion-item.is-active {
	background-color: #fff1c7;	
}

  
.accordion-item .accordion-thumb:after,
.accordion-item.is-active .accordion-thumb:after {
	font: normal normal normal 14px / 1 FontAwesome;
	font-weight: 300; 
	content: "\f063";
	position: absolute;
	font-size: 1rem;
	top: 22px;
	right: 3px;
}
  
.accordion-item .accordion-thumb:after,
.accordion-item.is-active .accordion-thumb:after {
	font-size: 1rem;
	top: 26px;
	right: 20px;
}
  
.accordion-item.is-active .accordion-thumb:after {
	content: "\f062";
}
  
.accordion-item {
	background-color: transparent;
	border: 1px solid #e5e5e5;
	margin-bottom: 20px;
	border-radius: 8px;
}