$primary_color: #122e51 ;
$primary_color_dark:darken($primary_color, 5);
$primary_color_light:lighten($primary_color, 10) ;
$primary_color_shadow: transparentize($primary_color, 0.9);



.btn-primary {
    background: $primary_color;
    border-color: $primary_color;

    &:hover, &:focus {
        background: $primary_color_dark;
        border-color: $primary_color_dark;
    }

    &:active {
        background: $primary_color_light !important;
        border-color: $primary_color_light;
    }
}


.btn-outline-primary {
    color:$primary_color;
    border-color: $primary_color;

    &:hover, &:focus {
        color:white;
        background: $primary_color_dark;
        border-color: $primary_color_dark;
    }

    &:active {
        background: $primary_color_light !important;
        border-color: $primary_color_light;
    }
}

header {
    background: $primary_color;
}

.form-control:focus {
    border-color: $primary_color;
    box-shadow: 0 0 0 0.2rem rgba(19, 46, 81, 0.08);
    box-shadow: 0 0 0 0.2rem $primary_color_shadow;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: $primary_color_light;
    background-color: $primary_color_light;
}
.site-container {
    max-width: 840px;
    margin: auto
}


.page-search {
    span {
        top: 12px;
        left: 15px;
    }

    input {
        padding-left: 40px
    }
}

body {
    padding-bottom: 74px
}

.bg-info-soft {
    background-color: rgba(23, 162, 184, 0.12941176470588237)
}
.search-head {
    h2 {
        font-size: 20px;
       
    }

    .time-stamp {
        font-size: 14px;
    }
}
.search-content {
    margin-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}
.comment-head {
    h2 {
        font-size: 21px;
       
    } 
    
}
.comment-post {
    h3 {
        font-size: 21px;
        margin-bottom: 7px;
    }
}
@media (max-width:640px) {
    .sticky-button {
        width: 100%
    }
}


/*Login Page*/
.login-wraper {
    max-width: 400px
}
.back-link {
    text-decoration: none !important;
}
/*custom scrollbar*/
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar {
    width: 0.5em;
}
::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
img{
max-width: 100%;
height: auto;
}
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 9999;
}



.site-container {
    max-width: 840px;
    margin: auto;
}

header {
    background-color: #4b6cb7;
}