@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root {
    --body: #F9F9F9;
    --a-color: #444444;
    --title-color: #333333;
    --desc-color: #888888;
    --step-color: #9BADBC;
    --border-color: #9BADBC;
    --white: #FFFFFF;
    --blue: #28487f;
    --orange: #eb6e26;
    --green: #14aa46;
    --radius: 22px;
    --border: #CCCCCC;
}
@media only screen and (max-width: 600px) {
 section.steps div.top {height: 26px; width:250%; background-color: #EEEEEE !important; margin-bottom: 20px;}
}

body {font-family:Montserrat,sans-serif; font-size: 15px; font-weight: 600; background-color: var(--body);}
a {color: var(--a-color); font-size: 14px !important;}
a:hover {text-decoration: none;}
a.btn {background-color: var(--orange) !important; color: var(--white) !important; border-radius: var(--radius) !important; border: none !important; padding: 8px 16px !important;}

h5.title {color: var(--title-color);}
p.desc {color: var(--desc-color);}

section.steps {padding: 20px 0px; background-color: var(--white); position: fixed; bottom: 0px; left: 50%; transform: translate(-50%, 00%); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); border-top: solid 1px var(--border); border-left: solid 1px var(--border); border-right: solid 1px var(--border); overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none;}
section.steps div.top {height: 26px; width:100%; background-color: #EEEEEE !important; margin-bottom: 20px;}
@media only screen and (max-width: 600px) {
 section.steps div.top {height: 26px; width:250%; background-color: #EEEEEE !important; margin-bottom: 20px;}
}
section.steps div.top span {width: 115px; height: 26px; background-color: var(--orange); color: var(--white); display: inline-block; text-align: center; position: relative;}
section.steps div.top span::after {content: ""; width: 0; height: 0; top: 26px; left: 59px; position: absolute; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #ff803d;}
section.steps ul {text-align: center;}
section.steps ul li {list-style: none; display: inline-block;}
section.steps ul li a img {width: 50px; margin: 0px 25.9px;}
section.steps ul li a span {display: block; font-weight: bold; margin-top: 8px; color: var(--step-color);}

div.content {padding: 50px 0px 200px 20px;}

ul.gender {text-align: center}
ul.gender li {list-style: none; display: inline-block;}
ul.gender li:first-child a {background-color: var(--orange);}
ul.gender li:last-child a {background-color: var(--blue);}
ul.gender li a {width: 100px; height: 100px; display: flex; align-items: center; flex-direction: column; justify-content: center; border-radius: var(--radius); margin: 0px 10px;}
ul.gender li a img  {height: 60px;}
ul.gender li a span {color: var(--white);}

ul.target {text-align: center}
ul.target li {list-style: none; display: inline-block; margin: 20px 0px;}
ul.target li a {padding: 12px 25px; border: solid 2px var(--blue); border-radius: 10px; margin: 0px 5px; color: var(--blue);}
ul.target li a:hover {border: solid 2px var(--blue); background-color: var(--blue); color: var(--white);}
ul.target li a.active {border: solid 2px var(--blue); background-color: var(--blue); color: var(--white);}
ul.target li:nth-child(4) {margin-top: 35px; display: none;}
ul.target li:nth-child(4) input {max-width: 250px; margin: 0px auto;}
ul.target li:nth-child(5) {display: block; margin-top: 25px;}
/*  */

div.body {max-width: 320px;}
div.body span.input-group-text {background-color: #28487f; color: var(--white); border-radius: var(--radius);}
div.body input {border-radius: var(--radius);}

div.weight {max-width: 720px;}
div.illness {max-width: 460px;}
div.day {max-width: 610px;}
div.activity {max-width: 800px;}

div.meal {margin: 0px 10px}
div.meal ul {text-align: center;}
div.meal ul li {max-width: 460px; min-height: 100px; list-style: none; display: block; margin: 0px auto 20px auto; padding: 20px 0px; background-color: var(--white); border: solid 1px var(--border); border-radius: var(--radius);}
div.meal ul li div.wrapper {display: flex; align-items: center; flex-direction: column;}
div.meal ul li div.wrapper img {width: 40px;}
div.meal ul li div.wrapper span {font-size: 20px; margin-left: 5px;}
div.meal ul li div.wrapper > div:nth-child(2) {margin: 20px 0px 0px 0px;}
div.meal ul li div.wrapper > div:nth-child(2) a {margin: 0px 5px; font-size: 15px !important;}
div.meal ul li div.wrapper > div:nth-child(2) a.active {background-color: var(--orange); color: var(--white); padding: 8px 15px; border-radius: var(--radius);}
div.meal ul li div.wrapper > div:nth-child(3) {width: 100%; margin: 20px 0px 0px 0px; display: none; justify-content: space-around;}
div.meal ul li div.wrapper > div:nth-child(3) div {display: inline-block; background-color: var(--body); border: solid 1px var(--border); text-align: center; border-radius: 5px; padding: 5px 10px 5px 5px; cursor: pointer;}
div.meal ul li div.wrapper > div:nth-child(3) div span {display: block; font-size: 16px;}
div.meal ul li div.wrapper > div:nth-child(3) div.active {background-color: var(--green);}
div.meal ul li div.wrapper > div:nth-child(3) div.active span {color: var(--white);}

div.habits {max-width: 400px;}
div.contact {max-width: 400px;}
div.thanks {max-width: 400px; display: flex; align-items: center}
div.thanks img {max-width: 200px; margin: 10px auto;}
div.thanks2 {max-width: 400px;}
div.thanks2 img {max-width: 100px; margin: 0px auto 10px auto;}
div.thanks2 div.box {margin-bottom: 15px; background-color: var(--white); border: solid 1px var(--border); border-radius: var(--radius);}
div.thanks2 div.box img {width: 60px; margin-top: 18px;}

div.loader {width: 100%; height: 100%; position: fixed; z-index: 999; background-color: rgba(255, 255, 255, 0.85); top: 0px; left: 0px; background-image: url(../images/loader.gif); background-size: 120px; background-repeat: no-repeat; background-position: center; padding-top: 110px; color: var(--a-color); font-size: 20px; display: flex; align-items: center; justify-content: center;}

div.list-diets {padding: 20px;}
div.list-diets table tbody span {font-weight: normal !important;}
div.list-diets div.logo {text-align: center}
div.list-diets div.logo img {max-width: 200px;}
div.list-diets div.detail {margin: 20px auto;}

div.pagination {margin: 25px 0px; height: 40px; text-align: center;}
div.pagination strong {margin: 3px; background-color: #8c5d30; border: solid 1px #CCCCCC; border-radius: var(--radius); padding: 5px 13px; color: var(--white); font-weight: bold;}
div.pagination a {margin: 3px; display: inline-block; background-color: #333333; border-radius: var(--radius);  border: solid 1px #CCCCCC; padding: 5px 13px; color: var(--white); font-weight: bold;}
div.pagination a:hover {background-color: #333333;}