@import url(http://fonts.googleapis.com/css?family=Raleway:400,700,500);

body {
  padding-top: 100px;
  background: #e0aacd;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  color: #282828;
  line-height: 26px;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  font-family: 'Raleway', sans-serif;
}

a {
  color: #45aed6;
  transition: color 400ms, background-color 400ms;
}

a:hover, a:focus {
  text-decoration: none;
  color: #2a95be;
}

hr {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #fff;
}

.btn {
  border-width: 0;
  border-radius: 0;
}

.btn.btn-primary {
  background: #652D90;
}

.btn.btn-primary:hover, .btn.btn-primary:focus {
  background: #652D90;
}

.navbar-toggle {
  border-radius: 0;
}

.navbar-nav>li>a {
  text-transform: uppercase;
}

#main-nav.navbar-default {
  background: #FFFFFF;
}

#main-nav.navbar-default .navbar-nav > li.active > a,
#main-nav.navbar-default .navbar-nav > li.open > a,
#main-nav.navbar-default .navbar-nav > li:hover > a {
  background: rgb(101, 45, 144);
  color: #FFFFFF;
}

.navbar.navbar-default {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}

.navbar.navbar-default .navbar-toggle {
  margin-top: 32px;
}

.navbar.navbar-default .navbar-brand {
  height: auto;
  padding: 10px 15px 1px;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #652D90;
  background: transparent;
}

.navbar-default .navbar-nav>li>a {
  color: #020202;
}

#home {
  margin-top: 50px;
  padding-top: 20px;
}

#home h2, #home h3 {
  color: #333;
}
 /* CSS untuk halaman waktu tidur */
        #waktu-tidur {
            padding-top: 40px;
            background-color: #e0aacd; /* Warna latar belakang */
        }

        #waktu-tidur .container {
            background-color: #fff; /* Warna form putih */
            padding: 20px 30px;
            border-radius: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        #waktu-tidur h2 {
            margin-bottom: 20px;
            font-size: 24px;
            color: #652D90;
            font-weight: bold; /* Membuat teks tebal */
            font-family: 'Arial', sans-serif; /* Contoh: Arial */
            padding-bottom: 10px;
        }

        #waktu-tidur .form-group {
            margin-bottom: 20px;
            text-align: left;
        }

        #waktu-tidur .form-inline .form-group label {
            display: block;
            margin-bottom: 10px;
            /* font-weight: bold; */
        }

        #notification {
          margin-bottom: 25px;
        }

        #waktu-tidur .form-group input[type="time"] {
            display: block;
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        #waktu-tidur .form-group input[type="submit"] {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #652D90;
            border: none;
            color: #fff;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
        }

        #waktu-tidur .form-group input[type="submit"]:hover {
            background-color: #4b2068;
        }



/* CSS untuk form analisis tidur dan mood */
#analisis-tidur-mood {
    padding-bottom: 20px;
    background-color: #e0aacd;
}

#analisis-tidur-mood .container {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

#analisis-tidur-mood h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #652D90;
    font-weight: bold; /* Membuat teks tebal */
    font-family: 'Arial', sans-serif; /* Contoh: Arial */
    padding-bottom: 20px;
}

#analisis-tidur-mood h3 {
  font-size: 22px;
  color: #07b1ff;
  font-weight: bold; /* Membuat teks tebal */
  font-family: 'Arial', sans-serif; /* Contoh: Arial */
}

#analisis-tidur-mood p {
    margin-bottom: 30px;
    color: #666;
    font-weight: BOLD;
}

#analisis-tidur-mood .form-group {
    margin-bottom: 20px;
    text-align: left;
}

#analisis-tidur-mood .form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
}

#analisis-tidur-mood .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

#analisis-tidur-mood .form-check-input {
    margin-right: 10px;
}

#analisis-tidur-mood .form-check-label {
    margin: 0;
    color: #333;
}

#analisis-tidur-mood .btn {
    margin-top: 20px;
    background-color: #652D90;
    border-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    text-align: center;
}

#analisis-tidur-mood .btn:hover {
    background-color: #4b2068;
    border-color: #004085;
}

#analisis-tidur-mood img {
    height: 250px;
    border-radius: 20px;
}

#advice {
  min-height: 400px;
}

.site-footer
{
  /* background-color:#26272b; */
  background-color:#d3d3d3;
  padding:20px 0 20px;
  font-size:14px;
  line-height:20px;
  color:#737373;
}
.site-footer hr
{
  /* border-top-color:#bbb; */
  border-top-color:#000000;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#4a4646;
  font-size:14px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#652D90;
  text-decoration:none;
}

.site-footer img {
  height: 60px;
  width: auto;
}

*{ box-sizing: border-box; }

.collumn1 {
  float: right;
  width: 33,33%;
  padding: 13px 5px;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.collumn {
  float: right;
  width: 33,33%;
  padding: 5px;
}



.footer-links
{ 
  padding-left:0;
  list-style:none

}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#652D90;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:10px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:10px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#652D90
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.instagram:hover
{
  background-color:#652D90
}

@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}

@media only screen and (min-width: 768px) {
  #main-nav.navbar-default {
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
  }
  #main-nav.navbar-default .navbar-nav > li > a {
    padding-top: 30px;
    padding-bottom: 24px;
    border-bottom: 4px solid transparent;
  }
  .navbar-default .navbar-nav>li>a {
    color: #0E0E0E;
  }
  #main-nav.navbar-default .navbar-nav > li.active > a,
  #main-nav.navbar-default .navbar-nav > li.open > a,
  #main-nav.navbar-default .navbar-nav > li:hover > a {
    background: transparent;
    color: #652D90;
  }
  #main-nav.navbar-default .dropdown-menu {
    padding: 0 20px;
    min-width: 220px;
    background-color: rgba(26, 28, 40, 0.9);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-clip: inherit;
  }
  #main-nav.navbar-default .dropdown-menu > li {
    border-left: 3px solid transparent;
    margin-left: -20px;
    padding-left: 17px;
    transition: border-color 400ms;
  }
  #main-nav.navbar-default .dropdown-menu > li > a {
    padding: 15px 0;
    color: #A8A8A8;
  }
  #main-nav.navbar-default .dropdown-menu > li.active,
  #main-nav.navbar-default .dropdown-menu > li.open,
  #main-nav.navbar-default .dropdown-menu > li:hover {
    border-left-color: #45aed6;
  }
  #main-nav.navbar-default .dropdown-menu > li.active > a,
  #main-nav.navbar-default .dropdown-menu > li.open > a,
  #main-nav.navbar-default .dropdown-menu > li:hover > a {
    color: #45aed6;
    background-color: transparent;
  }
}

@media only screen and (max-width: 768px) {
  .navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #A3A3A3;
    padding: 20px 0;
  }
}