/*

Palette Colors
--------------
navy blue:         #112e51
red:               #cd2026
gray:              #5b616b
gray-light:        #aeb0b5
gray-lighter:      #d6d7d9
gray-lightest:     #f1f1f1
gray-warm-light:   #e4e2e0

light salmon:      #ffd1d0
medium salmon:     #b86563

light teal:        #99babc
medium-light teal: #679496
medium teal:       #417c7e

base teal:         #236467
base salmon:       #d16d6b
base green:        #7a9e35

*/


body {
   background-color: #fff;
   color: #000;
   font-size: 1.1rem;
}

h3, h4, h5 {
   font-family: "Arial", sans-serif;
   }

h3 {
   font-size: 2.2rem;
    min-width: 350px;
}

h4: {
   font-size: 2rem;
}

h5: {
   font-size: 1.8rem;
}

a:link,
a:visited,
a:hover {
   color: blue;
}

mark {
   background-color: #d6d7d9;
}

mark.secondary {
   background-color: #d6d7d9;
}

mark.mark3 {
   background-color: #ffd1d0;
}

mark.mark4 {
    background-color: aliceblue;
}

mark.mark5 {
    background-color: aquamarine;
}
/* Style the header */
.header {
    padding: 5px 15px;
    background: #112e51;
    color: #f1f1f1;
    margin-bottom: 20px;
}

/* Page content */
.content {
    padding: 16px;
}
.col-md-3 {
    /*background-color: #112e51;*/
}
.nav {
   background-color: #f2f2f2;
   padding-top: 8px;
   border-radius: 5px;
   font-size: 1rem;
   text-align: right;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}

.nav a:hover {
   background-color: #d6d7d9;
   color: #fff;
}

.nav a.active {
   background-color: #cd2026;
   color: #fff;
}

.nav-item {
   border: 0.5px solid white;
}

.nav-item ul {
   padding-left: 8px;
}

.page-item a:link,
.page-item a:visited {
   background-color: #c4c3c3;
   color: blue;
   font-weight: 500;
}

.page-item a:hover,
.page-item a.active {
   background-color: #236467;
   color: blue;
}

.card, .btn {
   margin-bottom: 1rem;
}

.card-theme {
    background-color: #112e51;
    color: #fff;
}
.card-theme1 {
   background-color: #f1f1f1;
   color: #000;
}

.card-text a:link,
           a:visited,
           a:active {
    color: blue;
}

.card-theme2 {
   background-color: #f1f1f1;
}

.card-theme2-dk {
   background-color: #f1f1f1;
}

.card-theme3 {
   background-color: #d6d7d9;
}

.card-theme3-dk {
   background-color: #f1f1f1;
}

.card-text {
   padding-left: 20px;
}

.card-unresponsive {
    min-width: 500px;
}
.text-dark a {
   color: #151515;
   font-weight: 500;
}

.title-ex, .subtitle-ex, .text-ex {
   font-family: "Courier New", Courier;
   font-size: 1rem;
   color: black;
}

.text-ex p {
  margin-top: 0px;
  margin-bottom: 0px;
}

.added {
  text-decoration: underline;
}

.added a {
   text-decoration: underline black;
}

.added a:hover {
   text-decoration: underline white;
}

.deleted {
  text-decoration: line-through;
}

.indent1 {
   padding-left: 2rem;
}

.indent2 {
   padding-left: 4rem;
}

.indent3 {
   padding-left: 6rem;
}

.indent4 {
   padding-left: 8rem;
}

.table {
   background-color: #d6d7d9;
   border-radius: 10px;
   }

.table th, .table td {
   padding-left: 15px;
}

.table th {
   border-top: none;
}

.btn-ex {
   background-color: #112E51;
   color: #fff;
   border: #c4c3c3;
}

.btn-theme1 {
   background-color: #cd2026;
   color: #fff;
}

.btn-theme2 {
   background-color: #aeb0b5;
   color: #fff;
}

.btn-theme3 {
   background-color: #cd2026;
   color: #fff;
}

.blockquote {
   background-color: #d5d4d4;
   padding: 10px;
   border-radius: 5px;
}

.popover {
   background-color: #99babc;
}

.carousel-indicators {
   margin-bottom: .75rem;
   padding-bottom: 0;
}

.carousel-card {
   margin: 0 0 .5rem 0;
   height: 430px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
   background-color: #bbb;
   opacity: .5;
}

#example1,
#example2,
#example3 {
   margin: 2rem 0;
}

#examples-instr {
   padding: 1.1rem;
   border-radius: .8rem;
   width: 50%;
   background-color: #e4e2e0;
   color: #3a3a3a;
   text-align: center;
}

@media (max-width: 800px){
    .col-md-3, .col-sm-3 {
    flex:1 0 100px;
    max-width: 100%;
    }
    .col-md-9 {
    flex:1 0 300px;
    max-width: 100%;
    }
}
@media (max-width: 576px){
    .col-md-3, .col-sm-3 {
    flex:1 0 200px;
    max-width: 100%;
    }   
    .col-md-9 {
    flex:1 0 300px;
    max-width: 100%;
    }
}