﻿body {
    padding-top: 0px;
    padding-bottom: 20px;
}

/* Bootstrap 4 had these, but 5 took these away. Putting them back in*/
.navbar {
 padding: 0.5rem 1rem;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 8px;
    padding-right: 8px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;  Wanting these wider while editing */
}

/* Mandate a max width: */ 
@media (min-width: 1200px) {
    .container {
        width: 970px;
    }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.2rem;  /*Changing this from 0.5*/
    line-height: 1.0;  /*Changing this from 1.2*/
}

/* Some Indent classes*/
.indent_sm {
    padding-left: 5px;
}
.indent_md {
    padding-left: 8px;
}.indent_lg {
    padding-left: 10px;
}
.indent_xl {
    padding-left: 15px;
}
.indent_xxl {
    padding-left: 20px;
}

.errorFont {
    color: red;
}

/* Expand/Collapse Panels*/
.panel-body {
    padding-left: 10px;
}
/* For Panel Heading, I copied the values for an H5.  TODO: I could use LESS to invoke H5 on this possibly*/
.panel-heading {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
    font-size: 1.171875rem;
}
/* For [[BeginBarExpand ]], surrounds with box, puts icon on the right side */
.barExpand {
    padding: 12px;
    background-color: #f4f4f4;
    border: 1px solid #d9d9d9;
    background-position: center;
    margin-bottom: 12px;
}
.barExpandIcon {
    float: right;
    margin-top: 6px;
}


/* Blockquote stuff*/
blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D";
}
blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.3em;
}
blockquote p {
    display: inline;
}
.blockquote {
    font-size: medium;  /* My addition */
}

.dottedUnderline {
    border-bottom: 2px dotted #000;
}

/*---------------------------------------------------------------------------------*/
/*My Uber Hover tooltip stuff*/
.uberHover {
    border-bottom: 2px dotted #000;
}

.uberHoverContent {
    background: #1d1d1d;
    color: #fff;
    padding: 7px;
    border-radius: 5px;
    position: absolute;
    min-width: 50px;
    max-width: 300px;
    display: none;
    z-index: 100;
}

    .uberHoverContent:before {
        content: '';
        height: 3px;
        width: 0;
        border: 7px solid transparent;
        border-bottom-color: #1d1d1d;
        position: absolute;
        top: -12px;  /*If you adjust this, also adjust the javascript*/
        left: 14px;
    }

/*---------------------------------------------------------------------------------*/
/* MISC */
.pageSection {
    padding: 3px 4px 2px 3px;
    /* NOTE: Color is usually found in the sub folders */
}

.bookTitle {
    font-size: 1.4rem;
}

/*Want to bring in the card sides a bit: */ 
.card {
    margin-left: 10px;
    margin-right: 10px;
}

.sourceCodeBorder {
    border: 2px solid #ccc;
}

.socialLoginButtonWithImage {
    padding: 0px;
    margin-bottom: 3px;
}

/*---------------------------------------------------------------------------------*/
/* The switch-sliders */
.switch-label {
    vertical-align: -webkit-baseline-middle;
}

.switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 30px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 21px;
        width: 21px;
        left: 4px;
        bottom: 5px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #446E9B;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 30px;
}

    .slider.round:before {
        border-radius: 50%;
    }


/*---------------------------------------------------------------------------------*/
/*For Live Event questions: */
.newQuestionText {
    color: #0465eb;
    text-shadow: 1px 1px 10px #0465eb;
}

.newQuestionBox {
    box-shadow: 0px 0px 3px #0465eb;
}

.questionAnswerBox {
    font-size: 0.8rem;
    padding: 5px;
    border-width: 2px;
    color: darkblue;
}

.questionUpvoted {
    color: blue;
}

.voteButton {
    font-size: x-large;
}

.voteButton:hover {
    cursor: pointer;
    color: #0c73cd;
}
