:root {
  --color-primary:        #337ab7;
  --color-primary-border: #2e6da4;
  --color-primary-hover:  #286090;
  --color-primary-dark:   #204d74;

  --color-danger:         #d9534f;
  --color-danger-border:  #d43f3a;
  --color-danger-hover:   #c9302c;
  --color-danger-dark:    #ac2925;

  --color-success:        #5cb85c;
  --color-success-border: #4cae4c;
  --color-success-hover:  #449d44;
  --color-success-dark:   #398439;

  --color-warning:        #f0ad4e;
  --color-warning-border: #eea236;
  --color-warning-hover:  #ec971f;
  --color-warning-dark:   #d58512;

  --color-info:           #5bc0de;
  --color-info-border:    #46b8da;
  --color-info-hover:     #31b0d5;
  --color-info-dark:      #269abc;

  --color-info-panel-bg:  #d9edf7;
  --color-info-panel-border: #bce8f1;
  --color-info-panel-text: #31708f;
}

html {
  font-size: 14px;
}

.navbar {
  --bs-navbar-nav-link-padding-x: 1rem;
}

.card {
  margin-bottom: 20px;
}

.card.border-danger  { --bs-card-border-color: var(--color-danger-border); }
.card.border-info    { --bs-card-border-color: var(--color-info-panel-border); border-color: var(--color-info-panel-border) !important; }
.card.border-success { --bs-card-border-color: var(--color-success-border); }
.card.border-warning { --bs-card-border-color: var(--color-warning-border); }

.card.border-danger .card-header  { background-color: var(--color-danger);  border-color: var(--color-danger-border);  color: #fff; }
.card.border-info .card-header    { background-color: var(--color-info-panel-bg); border-color: var(--color-info-panel-border); color: var(--color-info-panel-text); }
.card.border-success .card-header { background-color: var(--color-success); border-color: var(--color-success-border); color: #fff; }
.card.border-warning .card-header { background-color: var(--color-warning); border-color: var(--color-warning-border); color: #333; }

h3 {
  margin-top: 20px;
}

label {
  font-weight: 600;
}

.btn-primary {
  --bs-btn-bg:                var(--color-primary);
  --bs-btn-border-color:      var(--color-primary-border);
  --bs-btn-hover-bg:          var(--color-primary-hover);
  --bs-btn-hover-border-color:var(--color-primary-dark);
  --bs-btn-active-bg:         var(--color-primary-hover);
}

.btn-danger {
  --bs-btn-bg:                var(--color-danger);
  --bs-btn-border-color:      var(--color-danger-border);
  --bs-btn-hover-bg:          var(--color-danger-hover);
  --bs-btn-hover-border-color:var(--color-danger-dark);
  --bs-btn-active-bg:         var(--color-danger-hover);
}

.btn-success {
  --bs-btn-bg:                var(--color-success);
  --bs-btn-border-color:      var(--color-success-border);
  --bs-btn-hover-bg:          var(--color-success-hover);
  --bs-btn-hover-border-color:var(--color-success-dark);
  --bs-btn-active-bg:         var(--color-success-hover);
}

.btn-warning {
  --bs-btn-bg:                var(--color-warning);
  --bs-btn-border-color:      var(--color-warning-border);
  --bs-btn-hover-bg:          var(--color-warning-hover);
  --bs-btn-hover-border-color:var(--color-warning-dark);
  --bs-btn-active-bg:         var(--color-warning-hover);
}

.btn-info {
  --bs-btn-bg:                var(--color-info);
  --bs-btn-border-color:      var(--color-info-border);
  --bs-btn-hover-bg:          var(--color-info-hover);
  --bs-btn-hover-border-color:var(--color-info-dark);
  --bs-btn-active-bg:         var(--color-info-hover);
}

.btn-secondary {
  --bs-btn-bg:                #fff;
  --bs-btn-border-color:      #ccc;
  --bs-btn-color:             #333;
  --bs-btn-hover-bg:          #e6e6e6;
  --bs-btn-hover-border-color:#adadad;
  --bs-btn-hover-color:       #333;
  --bs-btn-active-bg:         #d4d4d4;
  --bs-btn-active-color:      #333;
}

/* Space out content a bit */

body {
  padding-bottom: 20px;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-right: 15px;
  padding-left: 15px;
}

/* Custom page header */
.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
}

/* Custom page footer */
.footer {
  text-align: center;
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

/* Customize container */
@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}
.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
  padding: 14px 24px;
  font-size: 21px;
}

/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}