/*
Theme Name: Matory Fitness
Version: 1.0
Author: Joar Staab
URL: members.matory-fitness.de;
Template: enfold
*/

:root {
	/*Colors*/
	--black:#000;
	--white:#fff;
	--grey: rgba(255,255,255,.62);
	--primary:#29d9d5;
	--secondary:#98c223;
	--tertiary:#e7226e;
	--orange:#ffa500;
	--lightdark:#262629;
	--default:#121214;
	/*Backgrounds*/
	--bg-primary:#29d9d5;
	--bg-secondary:#98c223;
	--bg-secondary-50:#788947;
	--bg-tertiary:#e7226e;
	--bg-tertiary-50:#ad5979;
	--bg-default:#121214;
	--bg-dark:#171719;
	--bg-lightdark:#262629;
	--bg-black:#000;
	/*Shadow*/
	--sd-dark: 2px 2px 5px 2px rgba(0,0,0,.37);
}

/*--- TEXT ALIGN ---*/
.left {text-align:left !important;}
.right {text-align:right !important;}
.center {text-align:center !important;}
.justify {text-align:justify !important;}
.hidden {visibility: hidden;}

/*--- FONT COLOR ---*/
.white {color:#fff !important;}
.black {color:#000 !important;}
.primary {color: var(--primary) !important; background-image: linear-gradient(45deg,var(--primary),#98c223) !important; text-shadow: none; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.secondary {color: var(--bg-secondary)!important;}
.tertiary {color: #e7226e !important;}
.grey {color: #d5d5d5 !important;}

/* --- BACKGROUND COLOR --- */ 
.bg-black {background-color:var(--bg-default) !important}
.bg-white {background-color:var(--white) !important;}
.bg-primary {background:var(--primary) !important;}
.bg-secondary {background: var(--bg-secondary)!important}
.bg-tertiary {background: var(--bg-tertiary) !important;}
.bg-default{background: var(--bg-default) !important}
.bg-gradient {background: linear-gradient(to top,#fff 0,#f7f7f7 100%) center center no-repeat fixed;}

/*--- FONT STYLING ---*/
body {font-family:'Poppins','-apple-system','BlinkMacSystemFont','Segoe UI','Helvetica Neue','Arial','Noto Sans',sans-serif !important; box-sizing:border-box; color:var(--white); font-weight:400 !important; font-style:normal; font-size:16px ; line-height:1.5;}
a {color: var(--primary); font-weight: 400; text-decoration: underline; text-decoration-color: var(--primary); text-underline-position: under; font-weight: 500; word-break: break-word; cursor:pointer;}
a:hover,
a:focus {color: var(--primary); text-decoration-color: var(--primary) !important; text-underline-position: under; font-weight: 500; word-break: break-word;}

p {font-family:'Poppins','-apple-system','BlinkMacSystemFont','Segoe UI','Helvetica Neue','Arial','Noto Sans',sans-serif !important; font-size:16px ; line-height:1.33; margin:20px 0; font-weight:400 !important;}
small,
.small {font-size:12px !important; line-height:1.3 !important}

* {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}

/*---All - Headlines---*/
h1,
.hl-xl,
h2,
.hl-l {font-family:'Poppins','-apple-system','BlinkMacSystemFont','Segoe UI','Helvetica Neue','Arial','Noto Sans',sans-serif !important; font-weight:normal !important; font-style:normal !important; text-transform:none !important; letter-spacing:0px !important}

h3,
.hl-m,   
h4,
.hl-s,
h5,
.hl-xs,
h6,
.hl-xxs {font-family:'Poppins','-apple-system','BlinkMacSystemFont','Segoe UI','Helvetica Neue','Arial','Noto Sans',sans-serif !important; font-weight:normal !important; font-style:normal !important; text-transform:none !important; letter-spacing:0px !important}

h1,
.hl-xl {font-size:67px; line-height:1.33;}
h2,
.hl-l {font-size:50px; line-height:1.33;}
h3,
.hl-m {font-size:37px; line-height:1.33}   
h4,
.hl-s {font-size:28px; line-height:1.33;}
h5,
.hl-xs {font-size:21px; line-height:1.33}
h6,
.hl-xxs {font-size:16px; line-height:1.33}

h1.underline {width: 200px; margin: 0 auto; border-bottom: 4px solid var(--primary); padding: 0 0 20px 0;}


/*---All - Font Styles---*/
b,
strong {font-weight:600 !important}
.normal {font-weight:400 !important; font-style:normal !important; text-transform:none !important}
.light {font-weight:200 !important}
.semi-light {font-weight:300 !important}
.regular {font-weight:400 !important}
.medium {font-weight:600 !important}
.bold {font-weight:900 !important;}
.heavy {font-weight:900 !important}
.italic {font-style:italic}
.upper {text-transform:uppercase !important}

#top a.content-link {color: var(--white); text-decoration: underline; text-decoration-color: currentcolor; -webkit-text-decoration-color: rgba(255,255,255,.25); text-decoration-color: rgba(255,255,255,.25); text-underline-position: under; font-weight: 500; word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
#top a.content-link:hover,
#top a.content-link:focus {-webkit-text-decoration-color: var(--primary); text-decoration-color: var(--primary); color: var(--primary);}

/*---All - Text Alignment---*/
.align-left {text-align:left !important}
.align-right {text-align:right !important}
.align-center {text-align:center !important}
.align-justify {text-align:justify !important; text-justify:inter-word !important}

/*---All - Floats---*/
.float-left {float:left !important}
.float-right {float:right !important}
.float-none {float:none !important}

/*---All - Padding---*/
#top .no-padding {padding: 0px !important}
.padding-5 {padding:5px !important}
.padding-10 {padding:10px !important}
.padding-20 {padding:20px !important}
.padding-25 {padding:25px !important}
.padding-head {padding-right: 15px !important;}
.margin-top-30 {padding-top: 30px;}

/*---All - Lists---*/
#top ul {margin:0}
#top ul.borderlist-not {list-style:square inside !important}
#top ul li {padding:0; margin:0 !important; font-size:14px !important; color: var(--white); -webkit-text-fill-color: initial !important;}       
#top ul.square {list-style-type:square; margin-left:15px; line-height:24px !important}
#top ul.disc {list-style-type:disc; margin-left:15px; line-height:24px !important}
#top ul.disc.primary li::marker {color:var(--primary) !important}
#top ul.none {list-style-type:none}
#top ul.hidden {list-style-type:disc}
#top ul.icon-list {list-style-type:none}
#top ul.icon-list::before {content:''; display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; }
#top ul.icon-list li::before {display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased;}

/*---All - Hide content---*/
.desktop-hidden {display:block !important}
.mobile-hidden {display:none !important}
.long {display: initial !important;}
.short {display: none !important;}
.hidden {display:none !important}

/*--- LOGO STYLES ---*/
#top .logo, 
#top .logo a {height: 100% !important;}
#top .logo img {height: 50px; top: 50%; transform: translateY(-50%);}

/*--- Content ---*/
#top #main .container {max-width: 100%; padding: 0;}
#top #main .container .content {width: calc(100% - 300px) !important; max-width: calc(100% - 300px) !important; margin-left: 300px !important; min-height: 88vh; padding: 20px !important; margin-top: 0 !important; box-sizing: border-box; border: 0;}

/*--- BREADCRUMBS ---*/
ul.breadcrumb {margin-bottom: 10px !important; margin-top: -10px !important; padding: 5px 8px; list-style: none; background-color: #f7f7f7; }
ul.breadcrumb li {display: inline; font-size: 18px !important; color:#ebebeb;}
ul.breadcrumb li+li:before {padding: 4px; color: #000; content: "\f105"; font-family: 'Font Awesome 5 Free'; font-weight: 600; font-size: 14px !important;}
ul.breadcrumb li a {color: var(--primary) !important; text-decoration: none; font-size: 18px !important;}
ul.breadcrumb li a:hover {color: #000 !important; text-decoration: underline; font-size: 18px !important;} 

/*--- BREADCRUMBS ---*/
ul.breadcrumb-post {margin-bottom: 10px !important; margin-top: -10px !important; padding: 10px 16px; list-style: none; background-color: transparent; }
ul.breadcrumb-post li {display: inline; font-size: 18px; color:var(--grey);}
ul.breadcrumb-post li+li:before {padding: 0 4px; color: var(--grey); content: "\f105"; font-family: 'Font Awesome 5 Free'; font-weight: 600; font-size: 14px;}
ul.breadcrumb-post li a {color: var(--primary) !important; text-decoration: none;}
ul.breadcrumb-post li a:hover {color: var(--grey) !important; text-decoration: underline;} 

/*---All - Breadcrumb---*/
.breadcrumb {min-height:0 !important; padding:10px 0 0}
#breadcrumbs a::after {margin:0 5px 0 10px; content:"\f105"; display:inline-block; font-family:'Font Awesome 5 Free'; font-style:normal; font-weight:900; color:var(--grey); font-size:12px; line-height:12px; text-align:center}

/*--- BUTTON STYLES --- */
#top button.v1,
#top .button {text-align:center; min-height:30px; height:auto; margin-top:20px}
#top button.v1,
#top .button a,
#top .button button {border-radius:10px; padding:8px 22px; text-decoration:none !important; font-size:16px; line-height:18px; cursor:pointer; display:inline-block; text-align:center; transition: ease-in 0.3s;}
#top .button a:hover,
#top .button a:focus,
#top .button button:hover,
#top .button button:focus {text-decoration:none; border-radius:0}
#top button.v1,
#top .button.v1 a,
#top .button.v1 button {border:1px solid #98c223; border-radius:10px; color:#fff; background:#98c223; font-size: 14px; font-weight: bold !important; text-transform: uppercase; transition: ease-in 0.3s;}
#top button.v1:hover,
#top button.v1:focus,
#top .button.v1 a:hover,
#top .button.v1 a:focus,
#top .button.v1 button:hover,
#top .button.v1 button:focus {border:1px solid #405f38; background:#405f38}
#top .button.v2 a,
#top .button.v2 button {border: none; border-radius:10px; color:#fff; background:linear-gradient(45deg, var(--primary), #98c223) !important; text-transform: uppercase; font-weight: 700;}
#top .button.v2 a:hover,
#top .button.v2 a:focus,
#top .button.v2 button:hover,
#top .button.v2 button:focus {box-shadow: 0 20px 20px -15px rgba(0, 0, 0, 0.39), 0 20px 20px -20px rgba(0, 0, 0, 0.48);}
/*Buttons New*/
#top .button.btn-primary {background: var(--bg-primary) !important; color: var(--white); border-radius: 5px; margin-top: 0; font-size: 12px !important;}
#top .button.btn-primary:hover {opacity: 0.67; transition: 0.34s ease-in-out;}

/*--- All - Button - Additional Classes --- */ 
#top .slim-btn a {padding:6px 16px; font-size:14px; line-height:18px}
#top .large-btn a {padding:12px 24px}
#top .xlarge-btn a {padding: 24px 48px; font-size:22px !important;}
#top .xlarge-btn a:hover,
#top .xlarge-btn a:focus {letter-spacing: 10px !important;}
#top .extreme-btn a {padding:36px 48px; font-size:36px; line-height:40px;}
#top .round-btn a,
#top .round-btn a:hover,
#top .round-btn a:focus {border-radius:5px}

/*--- ICONS ---*/
.icon::before,
.icon::after {font: var(--fa-font-solid); font-weight: 900; display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased;}
.av-icon-char:hover::before{color: var(--white) !important;}

.icon.clock::before {content: '\f017' !important;  font-size: 20px; color:var(--grey) !important; margin-right: 5px; position: relative; top: 2px;}
.icon.fire::before {content: '\f46a' !important; font-size: 20px; color:var(--grey) !important; margin-right: 5px; position: relative; top: 2px;}
.icon.user::before {content: '\f007' !important; font-size: 20px; color:var(--primary) !important; margin-right: 5px; position: relative;top: 3px;}
.icon.users::before {content: '\f0c0' !important; font-size: 20px; margin-right: 5px; position: relative; top: 3px;}
.icon.cross::before {content: '\f00d' !important; font-size: 20px; color:#E6001E !important; margin-right: 5px; position: relative;top: 3px;}
.icon.recipe::before {content: '\f02d' !important; font-size: 20px; color:var(--primary) !important; position: relative;top: 3px;}
.icon.chat::before {content: '\f232' !important; font: var(--fa-font-brands); font-size: 20px; color:var(--primary) !important; position: relative;top: 3px;}
.icon.drive::before {content: '\f3aa' !important; font: var(--fa-font-brands); font-size: 20px; color:var(--primary) !important; position: relative;top: 3px;}
.icon.appointment::before {content: '\f086' !important; font-size: 20px; position: relative; margin-right: 5px;}
.icon.countdown::before {content: '\f017' !important; font-size: 20px; color:var(--primary) !important; position: relative; margin-right: 5px;}
.icon.activity::before {content: '\e4fc' !important; font-size: 20px; color:var(--primary) !important; position: relative; margin-right: 5px;}
.icon.options::before {content: '\f013' !important; font-size: 20px; position: relative; margin-right: 5px;}
.icon.logout::before {content: '\f011' !important; font-size: 20px; position: relative; margin-right: 5px;}
.icon.calender::before {content: '\f073' !important; font-size: 20px; position: relative; margin-right: 5px;}
.icon.heart::before {content: '\f004' !important; font-size: 20px; position: relative; margin-right: 5px;}
.icon.home::before {content: '\f015' !important; font-size: 20px; position: relative; margin-right: 5px;}
.icon.food::before {content: '\e4c6' !important; font-size: 20px; position: relative; margin-right: 5px;}
.icon.list::before {content: '\f46d' !important; font-size: 20px; position: relative; margin-right: 5px;}
.icon.add::before {content: '\f055' !important; font-size: 20px; position: relative; margin-right: 5px;}
.icon.trash::before {content: '\f1f8' !important; font-size: 20px; position: relative; margin-right: 5px;}
.icon.rotate-left::before {content: '\f2ea' !important; font-size: 20px; position: relative; margin-right: 5px;}
.icon.link::after {content: '\f08e' !important; font-size: 20px; position: relative; margin-left: 5px;}
.icon.open::after {content: '\f0c8' !important; font: var(--fa-font-regular); font-size: 20px; position: relative; }
.icon.finished::after {content: '\f14a' !important; font-size: 20px; position: relative; }
.icon.avgheartrate::before {content: '\f21e' !important; font-size: 20px; position: relative; }
.icon.maxheartrate::before {content: '\e4fc' !important; font-size: 20px; position: relative; }
.icon.amrap::before {content: '\f363' !important; font-size: 20px; position: relative; }
.icon.weight::before {content: '\f44b' !important; font-size: 20px; position: relative; }

/* Old*/
.user-logout a::before {content: '\f2f5'; font-weight: 900; font-size: 20px; position: relative; margin-right: 5px; color: var(--primary); line-height: 24px; display: inline-block; top: 5px; transition: ease-in 0.3s; padding: 0 0 10px 0;}
.user-profil a::before {content: '\f2bd'; font-weight: 900; font-size: 30px; position: relative; margin-right: 5px; color: var(--primary); line-height: 30px; display: inline-block; top: 5px; transition: ease-in 0.3s; padding: 0 0 10px 0;}
.ps-link a {margin-right: 10px;}


/*--- KONTAKT ---*/
.contact.icon-phone,
.contact.icon-e-mail {font-size:18px; color:#d1df8e;}
.contact.icon-phone a::before {content: '\f10b'; font-family: 'Font Awesome 5 Free'; font-weight: 600; font-size: 20px; position: relative; margin-right: 10px; color: #d1df8e; line-height: 24px; display: inline-block; transition: ease-in 0.3s;}
.contact.icon-e-mail a::before {content: '\f0e0'; font-family: 'Font Awesome 5 Free'; font-weight: 600; font-size: 20px; position: relative; margin-right: 10px; color: #d1df8e; line-height: 24px; display: inline-block; transition: ease-in 0.3s;}

/*--- BOX DESIGN ---*/ 
.box-design {box-shadow:0 10px 40px 0 rgba(47,47,47,.1); border-radius:10px !important; background:#fff; position:relative; overflow:hidden; padding:0 !important; transition: 0.25s;}
.box-design2 {box-shadow:0 10px 40px 0 rgba(47,47,47,.1); border-radius:10px !important; border: 2px solid #444 !important; background:#fff; position:relative; overflow:hidden; transition: 0.25s;}
.box-design2:hover,
.box-design2:active,
.box-design2:focus {scale: 1.05; transition: 0.25s;}
.box-design .av_textblock_section,
.box-design2 .av_textblock_section,
.box-design4 {padding:25px 20px}
.box-design4 {box-shadow: 0 10px 40px 0 rgba(47,47,47,.1); border-radius: 10px !important; border: 2px solid #444 !important; background: #f7f7f7; position: relative; overflow: hidden; transition: 0.25s; width: 80% !important; margin: auto !important; float: none !important; min-width:350px !important}
.box-design.padding-20 {padding: 25px 20px !important;}

/*--- Scroll-Top-Link ---*/ 
#scroll-top-link {display:none; box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.15); position: fixed; border-radius: 10px !important;  border:2px solid #fff !important;  background-color: #fff !important; color: #575757 !important; height: 50px; width: 35px; line-height: 50px; text-decoration: none; text-align: center; opacity: 1 !important; right: 35px; bottom: 50px; z-index: 1030; visibility: hidden;}
#scroll-top-link:hover {border: 2px solid #fff !important; background-color: #fff !important; color: var(--primary) !important; }
.toggle_content {color:var(--primary) !important}

/*--- MODULE ---*/ 
/*--- KACHEL ---*/ 
.modul-abstand .column-top-margin {margin-top: 20px !important;}
#kategorie-uebersicht {box-shadow:0 10px 40px 0 rgba(47,47,47,.1); border-radius:10px !important; background:#ebebeb; position:relative; overflow:hidden; padding:0 !important; transition: all 0.3s cubic-bezier(.25,.8,.25,1)}
#kategorie-uebersicht .avia-image-container {width: 24%; float: left; margin: 0 !important; padding:10px !important}
#kategorie-uebersicht .av_textblock_section {width: 76%; float: right; padding:20px 20px !important}
#kachel-secondary {box-shadow:0 4px 18px rgba(0,0,0,0.07), 0 10px 10px rgba(0,0,0,0.09); border-radius:10px !important; background:#ebebeb; position:relative; overflow:hidden; padding:0 !important; transition: all 0.3s cubic-bezier(.25,.8,.25,1); padding:20px 20px !important}

/*Messages*/
#top #message.updated {background: var(--tertiary); padding: 4px 12px; border-radius: 5px;}
#top #message.updated p {padding: 0; margin: 0; font-weight: 500 !important;}
#top #message.updated p::before {content: '\f05a' !important; font: var(--fa-font-solid); font-size: 16px; color: var(--white) !important; margin-right: 5px; position: relative; top: 1px;}

/*--- GOOGLE RECAPTCHA ---*/
.grecaptcha-badge {visibility: hidden !important;}

/*ACF-FIELDS*/
/*Delete Row Icon*/
#top .acf-repeater .acf-row-handle .acf-icon.-minus {display: block; width: 30px; height: 30px; top: 8px; background: transparent; border: 0; margin: 0;}
#top .acf-repeater .acf-row-handle .acf-icon.-minus::before {content: '\f00d' !important; font: var(--fa-font-solid); font-size: 18px; color:  var(--grey) !important; position: relative; top: 100%; left: -8px; transform: translateY(0%);}
#top .acf-repeater .acf-row-handle .acf-icon.-minus:hover::before {color: #E6001E !important;}

/*--- KUNDENUEBERSICHT ---*/
#top.page-template-client .customer-overview h5 {font-size: 28px;font-weight: 700 !important;text-align: left !important;}
#top.page-template-client .customer-overview .client-list {display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 20px;}
#top.page-template-client .customer-overview .client-list div {width: calc(25% - 5px); background: var(--bg-lightdark); border-radius: 5px; overflow: hidden;}
#top.page-template-client .customer-overview .client-list div h2 {padding-left: 10px; width: 100%; background: var(--primary); color: var(--white);}
#top.page-template-client .customer-overview .client-list ul.icon-list {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: space-between;}
#top.page-template-client .customer-overview .client-list ul.icon-list li.user {flex: 0 0 95%; padding: 8px 12px; background: var(--bg-default); margin: 5px 2.5% !important; border-radius: 5px;}

/*--- CREATE NEW OBJECT FORM ---*/
#top .template-page.form {background: var(--bg-default) !important;}
#top .template-page.form .flex {display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px; margin-bottom: 20px;}
#top .template-page.form .flex .column-one-half {width: calc(50% - 10px); background: var(--bg-lightdark);padding: 10px; border-radius: 5px; box-shadow: var(--sd-dark);}
#top .template-page.form .flex .column-one-half h2 {width: 100%; font-size: 24px;font-weight: 800 !important;; color: var(--white); margin-bottom: 15px; text-align: left;}
#top .template-page.form .flex .column-one-half label { display: block; font-weight: 600; margin: 10px 0 5px; color: var(--white);}
#top .template-page.form .flex input,
#top .template-page.form .flex select {width: 100%;border: 1px solid var(--bg-default); border-radius: 5px;padding: 10px; vertical-align: middle; color: var(--white); font-size: 16px; transition: all 0.3s ease-in-out; background: var(--bg-default);}
#top .template-page.form .flex input:focus,
#top .template-page.form .flex  select:focus {border-color: var(--primary); outline: none;}
#top .template-page.form button[type="submit"] {color: var(--grey) !important; border: 1px solid var(--primary) !important; border-radius: 20px !important; padding: 20px 20px !important;margin-top: 10px !important; background: transparent; width: 100%; font-size: 20px; font-weight: 700; cursor:pointer}
#top .template-page.form button[type="submit"]:hover,
#top .template-page.form button[type="submit"]:focus {color: var(--white) !important; background: var(--primary) !important; border-color: var(--primary) !important;transition: all .3s;}
/*Multi-Selection*/
#top .template-page.form .flex .select2 .selection {background: var(--bg-default);}
#top .template-page.form .flex .select2 .selection .select2-selection {background: var(--bg-default); border: 0; border-radius: 5px; padding: 5px 0 0;}
#top .template-page.form .flex .select2 .selection .select2-selection .select2-search textarea {background: var(--bg-default); border-radius: 5px; border: 1px solid var(--bg-default);}
#top .template-page.form .flex .column-one-half .select2.select2-container--open .selection .select2-selection .select2-search textarea {border-color: var(--primary);}

#top .template-page.form .flex .select2 .select2-selection__clear {color: var(--white);font-size: 20px !important;}
#top .template-page.form .flex .select2 .select2-selection__choice {background: var(--bg-primary); margin-right: 5px !important; border: 0; padding: 4px; border-radius: 5px; vertical-align: middle;}
#top .template-page.form .flex .select2 .select2-selection__choice button {border: 0;color: var(--white);position: relative;padding: 0 4px; font-size: 16px;}
#top .template-page.form .flex .select2 .select2-selection__choice button:hover {background: transparent !important;color: #e43939 !important;}
#top .template-page.form .flex .select2 .select2-selection__rendered { padding: 5px !important; position: relative;}
#top .template-page.form .flex .select2 .select2-search {width: 100% !important; display: block !important;}
#top .template-page.form .flex .select2 .select2-search .select2-search__field {width: 100% !important;margin-top: 5px;}
#top .template-page.form .flex input[type="file"] {opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer;}
#top .template-page.form .flex .upload-wrapper { position: relative; border: 2px dashed var(--grey); padding: 60px 40px; text-align: center; margin: 10px 0 20px;background: var(--bg-default); border-radius: 5px;}
#top .template-page.form .flex .upload-wrapper::before { content: "Datei hierher ziehen oder klicken (1024x1024px)"; position: absolute; width: 100%; top: 50%; left: 0; transform: translateY(-50%); color: var(--white); pointer-events: none;}
#top .template-page.form .flex .upload-wrapper #beitragsbild-preview { font-size: 16px; color: var(--grey); position: absolute; bottom: 10px; width: calc(100% - 80px); line-height: 20px; height: 20px; text-align: center; font-weight: 600;}
#top .template-page.form .flex .upload-wrapper #beitragsbild-preview::before { content: 'Hochgeladen: '; color: var(--white);}

/* --- Fehler-Message --- */
#top .template-page.form #error-message,
#top .template-page.form .message.error {background: var(--tertiary); color: var(--white) !important; padding: 10px; border-radius: 5px; text-align: left; margin-bottom: 15px;}
#top .template-page.form .message.success {background: var(--bg-secondary); color: var(--white) !important; padding: 10px; border-radius: 5px; text-align: left; margin-bottom: 15px;}

/*CUSTOM ALERT*/
#top #custom-alert {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000;}
#top #custom-alert.hidden {display: none;}
#top .custom-alert-content {background: var(--bg-lightdark); padding: 20px 10px; border-radius: 5px; box-shadow: 5px 5px 26px 5px rgba(0,0,0,.77); text-align: center;}
#top .custom-alert-content p {margin: 0 0 10px;}
#top .custom-alert-content button {color: var(--grey); border: 1px solid var(--primary); background-color: transparent; border-radius: 20px; padding: 10px 20px; margin-top: 10px !important; cursor:pointer}
#top .custom-alert-content button:hover {background-color: var(--primary) !important; color: var(--white) !important;}

/*CUSTOM RESPONSE*/
#top #custom-confirm {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000;}
#top #custom-confirm.hidden {display: none;}
#top .custom-confirm-content {background: var(--bg-lightdark); padding: 20px 10px; border-radius: 5px; box-shadow: 5px 5px 26px 5px rgba(0,0,0,.77); text-align: center;}
#top .custom-confirm-content p {margin: 0 0 10px;}
#top .custom-confirm-content button {color: var(--grey); border: 1px solid var(--primary); background-color: transparent; border-radius: 20px; padding: 10px 20px; margin-top: 10px !important; cursor:pointer}
#top .ccustom-confirm-content button:hover {background-color: var(--primary) !important; color: var(--white) !important;}

/*CUSTOM TOASTS*/
#toast-message {position: fixed; bottom: 30px; right: 20px; background: var(--bg-tertiary); color: var(--white); padding: 10px 20px; box-shadow: var(--sd-dark); border-radius: 5px; z-index: 1000; display: none;}

/*--- RESPONSIVE DESIGN---*/
@media only screen and ( max-width: 5000px ) { 
	
}
@media only screen and ( max-width: 1920px ) { 
	
	/*--- REZEPTE ---*/
	.portions-angabe {float: right; padding: 20px 5px 0px;}

	
}

@media only screen and ( max-width: 1280px ) { 
	/*--- TAB SECTION ---*/ 
	.av-tab-section-tab-title-container {margin-left: 4%;}

	
	/*--- TRAININGSKONZEPTE ---*/
	.trainings-ueberschrift,
	.trainings-info {margin-bottom:10px}
	.trainings-ueberschrift {float:left; width:70%}
	.trainings-info {float:right; width:30%;}

	.title-training {float:right; font-size:14px; width:100% !important}

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

	/*--- CONTAINER ---*/
	.responsive .container {max-width: 100% !important; padding: 0 25px !important;}
	.modul-abstand .flex_cell {padding: 40px 2.5% 40px 2% !important;}

	/*--- FONT STYLING---*/
	p, 
	body {font-size:14px;}

	/*--- HEADLINE ---*/
	.headline-width {width: 100% !important;}

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

	html {min-width: 0 !important;}

	/*--- Content ---*/
	.responsive #top #wrap_all .container {width: 100% !important; max-width: 100% !important; padding: 0 !important;}
  	.responsive #top #wrap_all .container .content {width: 100% !important; max-width: 100% !important; margin-left: initial !important; min-height: initial; padding: 10px 10px 100px 10px !important;}

	/*---All - Hide content---*/
	.desktop-hidden,
	.long {display:none !important}
	.mobile-hidden {display:block !important}
	.short {display: initial !important;}

	/*--- CONTAINER ---*/
	.responsive #top .sidebar_left .content {width: 100% !important; max-width: 100%;}

	.responsive #top #wrap_all .container.personalspace {width: 100% !important; max-width: 100% !important; padding:0 !important}
	
	/*--- Header Meta ---*/
	.responsive #top .phone-info {text-align: right;}
	.responsive #top .phone-info .user-logout a::before {font-size: 16px; line-height: 22px; top: 2px;}

	/*--- MENU ---*/
	.responsive #top .user-profil a::before {font-size: 22px; line-height: 20px; top: 1px;}

	/*#menu-overlay {display: block;}*/
	body.ld-in-focus-mode, 
	body.ld-in-focus-mode .learndash-wrapper {max-width: 100vw;}

	/*--- EINKAUFSLISTE -----------------------------------------------------------------------------------------------------------------------------------*/
	/*ACCORDION*/
	.responsive #top #einkaufsliste .einkaufsliste-container h1 {text-align: center;}
	.responsive .page-id-1689 main.content {padding-top: 10px !important;}

	/*--- KUNDENUEBERSICHT ---*/
	.responsive #top.page-template-client .customer-overview .client-list div {width: 100%;}

	/*--- CREATE NEW OBJECT FORM ---*/
	#top .template-page.form .flex .column-one-half {width: 100%;}

	/*CUSTOM TOASTS*/
	#toast-message {bottom: 85px; right: 10px; background: var(--bg-tertiary);}


}
@media only screen and ( max-width: 834px )   {   
	/*--- ALL HEADLINES ---*/ 
	h1,
	.hl-xl {font-size:40px; line-height:1.1;}
	h2,
	.hl-l {font-size:35px; line-height:1.1;}
	h3,
	.hl-m {font-size:29px; line-height:1.1}   
	h4,
	.hl-s {font-size:25px; line-height:1.1;}
	h5,
	.hl-xs {font-size:23px; line-height:1.1}
	h6,
	.hl-xxs {font-size:21px; line-height:1.1}

	/*--- TAB SECTION ---*/ 
	.av-tab-section-tab-title-container {margin-left: 6%;}

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

	/*--- LOGO ---*/
	.responsive #top .logo {width: max-content; margin:auto;}
	.responsive #top .logo img {height: 50px !important; top: 35%; transform: translateY(-50%); width: auto; max-width: 100%; display: block; max-height: 50px;}

	/*--- ALL HEADLINES ---*/ 
	h1,
	.hl-xl {font-size:40px; line-height:1.1;}
	h2,
	.hl-l {font-size:35px; line-height:1.1;}
	h3,
	.hl-m {font-size:29px; line-height:1.1}   
	h4,
	.hl-s {font-size:25px; line-height:1.1;}
	h5,
	.hl-xs {font-size:23px; line-height:1.1}
	h6,
	.hl-xxs {font-size:21px; line-height:1.1}

	/*--- DASHBOARD ---*/
	#modul-uebersicht .avia-image-container {width: 100%; float: left;}
	#modul-uebersicht .av_textblock_section {width: 100%; float: left;}

	/*--- MODULE ---*/ 
	/*--- KACHEL ---*/ 
	#kategorie-uebersicht .avia-image-container {width: 100%; float: left; margin: 0 !important; padding:10px !important}
	#kategorie-uebersicht .av_textblock_section {width: 100%; float: right; padding:20px 20px !important}

	#post-fitnesskonzepte .post-entry .blog-meta {display:none !important; width: 100% !important;}
	#post-fitnesskonzepte .post-entry .entry-content-wrapper {width: 100% !important; float: right !important;}
	#performance-rezepte #post-fitnesskonzepte .post-entry .blog-meta {display: block !important;width: 100% !important;}

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

	/*--- CONTAINER ---*/
	.responsive .container {max-width: 100% !important; padding: 0 10px !important;}

	/*--- ALL HEADLINES ---*/ 
	h1,
	.hl-xl {font-size:38px; line-height:1.2;}
	h2,
	.hl-l {font-size:32px; line-height:1.2;}
	h3,
	.hl-m {font-size:28px; line-height:1.2}   
	h4,
	.hl-s {font-size:24px; line-height:1.2;}
	h5,
	.hl-xs {font-size:18px; line-height:1.2}
	h6,
	.hl-xxs {font-size:16px; line-height:1.2}

	/*--- POPUP STYLE ---*/
	#top .mfp-content {max-width: 100% !important;}
	
}