a { text-decoration:none; }
a:hover { text-decoration:underline; }

.w-33 { width: 33%!important; }
.w-66 { width: 66%!important; }

.fw-600 {font-weight:600;} /* not quite bold */
.fw-500 {font-weight:500;} /* not quite bold */
.fw-unread {font-weight:bold;}

ol.breadcrumbs{list-style-type:none;padding-left:0;}
ol.breadcrumbs li{display:inline;}
ol.breadcrumbs li.classification{display:block;}

.lg-item img { cursor: pointer; } /* cursor for lightgallery clickable images */

/* copy all shadow classes from MDB 3.5.1 CSS to match my intended look -- they changed in later versions */
.shadow-0{-webkit-box-shadow:none!important;box-shadow:none!important}.shadow-1{-webkit-box-shadow:0 2px 10px 0 rgba(0,0,0,.05)!important;box-shadow:0 2px 10px 0 rgba(0,0,0,.05)!important}.shadow-2{-webkit-box-shadow:0 5px 15px 0 rgba(0,0,0,.05)!important;box-shadow:0 5px 15px 0 rgba(0,0,0,.05)!important}.shadow-3{-webkit-box-shadow:0 10px 20px 0 rgba(0,0,0,.05)!important;box-shadow:0 10px 20px 0 rgba(0,0,0,.05)!important}.shadow-4{-webkit-box-shadow:0 15px 30px 0 rgba(0,0,0,.05)!important;box-shadow:0 15px 30px 0 rgba(0,0,0,.05)!important}.shadow-5{-webkit-box-shadow:0 20px 40px 0 rgba(0,0,0,.05)!important;box-shadow:0 20px 40px 0 rgba(0,0,0,.05)!important}.shadow-1-strong{-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.25),0 3px 10px 0 rgba(0,0,0,.2)!important;box-shadow:0 2px 5px 0 rgba(0,0,0,.25),0 3px 10px 0 rgba(0,0,0,.2)!important}.shadow-2-strong{-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.25),0 5px 15px 2px rgba(0,0,0,.2)!important;box-shadow:0 4px 8px 0 rgba(0,0,0,.25),0 5px 15px 2px rgba(0,0,0,.2)!important}.shadow-3-strong{-webkit-box-shadow:0 6px 11px 0 rgba(0,0,0,.25),0 7px 20px 3px rgba(0,0,0,.2)!important;box-shadow:0 6px 11px 0 rgba(0,0,0,.25),0 7px 20px 3px rgba(0,0,0,.2)!important}.shadow-4-strong{-webkit-box-shadow:0 6px 14px 0 rgba(0,0,0,.25),0 10px 30px 4px rgba(0,0,0,.2)!important;box-shadow:0 6px 14px 0 rgba(0,0,0,.25),0 10px 30px 4px rgba(0,0,0,.2)!important}.shadow-5-strong{-webkit-box-shadow:0 6px 20px 0 rgba(0,0,0,.25),0 12px 40px 5px rgba(0,0,0,.2)!important;box-shadow:0 6px 20px 0 rgba(0,0,0,.25),0 12px 40px 5px rgba(0,0,0,.2)!important}

.dropdown-divider { border-top: 1px solid #f5f5f5 !important; } /* override default 2px thick dividers in MDB 6.4.2 */
.card-body { padding: 16px; } /* override larger card padding in MDB 6.4.2 vs my original design */

/*a.navbar-brand {display:block;position:relative;left:-15px;}*/
nav.navbar {font-size:1.1rem;line-height:1;padding:0.3rem 0;}
/*a.navbar-brand {margin-left:-15px;}*/

.btn.btn-outline-primary.active { border:0; color:#424242; background-color:white;} /* internal nav links on photo pages */
.term-in-list {background:#F6F6FF; width:13rem;} /* for glossary and edit page */

/* Other nice fonts: Lato, Montserrat (used for taxon navigation), Helvetica Neue */

h1, h2, h3, h4, h5, h6 {font-family: Libre Franklin, sans-serif;}
body, .carousel-item .card-text {font-family: Inter, Verdana, sans-serif;}
.font-technical {font-family: IBM Plex Sans, Helvetica, sans-serif;} /* Good to distinguish hatch page descriptions from taxonomic nav etc */
.font-title, .nav-tabs {font-family: Libre Franklin, sans-serif;}
.font-archaic {font:1.2rem EB Garamond, Georgia, serif;}
.font-taxnav {font-family: Montserrat, Verdana, sans-serif;}
.font-open, button, a.btn {font-family: Work Sans, Open Sans, sans-serif;}

.fs-5_6 {font-size:1.125rem !important; } /* custom font size half-way between fs-5 (1.25rem) and fs-6 (1rem) */
.fs-resp-5_6 {font-size:1.25rem !important; } /* custom font size that jumps from fs-6 to fs-5 at medium breakpoint */
@media (max-width: 768px) { .fs-resp-5_6 {font-size:1rem !important; } }

/* body candidates: 'Inter', Verdana, Lato , Roboto (default), Arimo (slightly taller Roboto) */

.key-specimen-carousel {width: 85%;}
@media (max-width: 768px) { .key-specimen-carousel {width: 96%;} }

.carousel-control-next, .carousel-control-prev {width:7.5%;}

.lightblue {color:#a7d2e9;} /* matches the blue mayfly in the logo */
a.lightblue:hover {color: #41bfff;} /* matches the blue mayfly in the logo */

.postedimage {
    display: block;               /* Ensures it behaves like a block element for alignment */
    max-width: 100%;             /* Prevents the image from overflowing its container */
    height: auto;                /* Maintains the image's aspect ratio */
    margin: 0 auto;              /* Optional: Center-align the image within its container */
}

a.stm {display:block; text-decoration:none;} /* subtaxon menu main links, displayed as block divs */
a.stm:hover {background: #e9faff;}
a.stm small {color:black;display:block;}
a.stm div.stn {color:black;}
a.stm:hover span.tn {text-decoration:underline;} /* underline text of actual taxon name when hovered */
.button-as-anchor {outline: none !important; padding: 0; border: 0; vertical-align: baseline;}
.button-as-anchor:hover {background:none;}
.btn { text-transform: unset !important; } /* prevents all-caps buttons */
a.gt {color:#007600; text-decoration:none;} /* gt = glossary term, was 'darkgreen' */
a.gt:hover {color:limegreen; text-decoration:underline; }
div.popover {max-width:450px;max-height:80%;overflow-y:scroll} /* glossary popovers; also set image width in Picture_GlossaryPicture.lib! */

div.taxon-phys-desc {max-height: 50rem; overflow-y:scroll;}
.key-at-a-glance ul {list-style-type: circle; }

div.specimen-desc {max-height: 20rem; overflow-y:scroll;}


.plain-text-inside-link {color:#424242; }
a div.spec-prev-desc {color:#626262;font-size:90%;max-height:10rem;overflow-y:scroll;}
a.box-as-link {background-color:#f3f9ff; }
a.box-as-link:hover {text-decoration: none; background-color:#eaf0ff;}
a.box-as-link:hover div.pil {text-decoration:underline;}

.deleteAnnotation {cursor:pointer; color:red;}

a.btn-outline-primary:hover {background-color:#DDEEFF}

/* h1>a, h1>a:hover {color: inherit; } instead of doing this for all links, set their class to text-body if i don't want color*/
a.text-body:hover {text-decoration: inherit;}
a.plainlink {color: inherit;}

a#inactiveSubtaxaExpander { color:inherit; text-decoration:none; }
a#inactiveSubtaxaExpander:hover { text-decoration:underline; }

.wm { position:absolute; left:0; top:0; pointer-events:none; }
.wm-watermark { border: 2px dashed #00FF00; filter:drop-shadow(0 0 3px black); }
.wm-rectangle { border: 1px solid; filter:drop-shadow(0 0 3px #AAAAAA);}
.wm-text { border: 1px dashed #999999;}
.wm-text-above-rect {position:relative; top: -25px; }
.wm-crop-rect { border: 2px dashed #00FF00; }

span.private { font-style:italic; color:#770000; }

.taxonomic-key-icon-image { width:80%; border-radius:50%; border: 2px solid #0d6efd;}
a.small-key-icon:hover, a.small-key-icon div:hover {background: #e9faff;border-width:2px; border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem;}

a.key-icon-link:hover img {-webkit-filter: brightness(115%); }
a.key-icon-link:hover { text-decoration:none; color: #1111ff;}
a:hover .taxonomic-key-icon-image {border: 2px solid #1111ff;}

.topiclist-image-item { max-width:4.1rem; max-height:4.1rem; overflow:hidden;}

.blink { /* used for the private message indicator */
    animation-duration: 1.5s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-timing-function: steps(2, start);
}
@keyframes blink {
    80% {
        visibility: hidden;
    }
}

/* Patreon subscribe button */

.patreon-button {
    background-image: linear-gradient(-180deg, #37AEE2 0%, #1E96C8 100%);
    border-radius: .5rem;
    box-sizing: border-box;
    color: #FFFFFF;
    display: flex;
    font-size: 1.3rem;
    justify-content: center;
    padding: 1rem 1.4rem;
    text-decoration: none;
    width: 21rem;
    border: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.patreon-button:hover {
    background-image: linear-gradient(-180deg, #1D95C9 0%, #17759C 100%);
}

@media (min-width: 768px) {
    .patreon-button {
        padding: 1rem 1.4rem;
    }
}

/* Badge for new post indicator in top menu */

#new-posts-badge {
    display: none;
    font-size: 0.6em;
    line-height: 1;
    vertical-align: super;
    color: #00ff00;
    border: 1px solid #00ff00;
    border-radius: 4px;
    background-color: transparent;
    margin-left: 4px;
    padding: 0.1em 0.4em;
}

/* Badge for title caveats like 'experimental' */
.title-caveat {
    font-size: 0.8rem;
    line-height: 1;
    vertical-align: super;
    color: #ff0000;
    border: 1px solid #ff0000;
    border-radius: 4px;
    background-color: transparent;
    margin-left: 4px;
    padding: 0.1em 0.4em;
}

/* Styles for AI integrated section suggestions in admin interface for editing taxa */
.ai-suggestion {
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    background-color: #f8f9fa;
}

.ai-suggestion-title {
    font-weight: bold;
    margin-bottom: 5px;
    color: #0d6efd;
}

.ai-suggestion-content {
    padding: 10px;
    background-color: white;
    border-radius: 3px;
    border: 1px solid #e9ecef;
    margin-bottom: 10px;
}

.ai-suggestion-actions {
    display: flex;
    gap: 10px;
}

.ai-suggestion-action {
    padding: 5px 10px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9rem;
}

.ai-suggestion-action:hover {
    background-color: #e0e0e0;
}

/* Image Drop Area Styling */
.imageDropArea {
    width: 100%;
    height: 100%;
    min-height: 200px;
    border: 2px dashed #ccc;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    transition: background-color 0.3s;
}

.imageDropAreaHighlight {
    background-color: #e8f4fd;
    border-color: #007bff;
}

/* Progress bar styling */
.progress {
    width: 100%;
    height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}



/* Blockquote styling adapted from https://codepen.io/Rases/pen/pogVVwp */

.zabove0 { position:relative; z-index:1; } /* used for stuff that might become unclickable due to negative margins of a bqcomponent */

.bqcomponent{
    font-family: "Inter",Helvetica,sans-serif;
    width: 100%;
    margin:0 auto;
    padding: 0rem;
    position:relative;
    z-index:0;
}

.bqcomponent blockquote.quote {
    position: relative;
    text-align: left;
    font-style: italic;
    padding: 1rem 2rem;
    width: 90%;  /* create space for the quotes */
    color: #484748;
    margin: 1rem auto 2rem;
    background:
            linear-gradient(to right, #dbe4ef 4px, transparent 4px) 0 100%,
            linear-gradient(to left, #dbe4ef 4px, transparent 4px) 100% 0,
            linear-gradient(to bottom, #dbe4ef 4px, transparent 4px) 100% 0,
            linear-gradient(to top, #dbe4ef 4px, transparent 4px) 0 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

/* -- create the quotation marks -- */
.bqcomponent blockquote.quote:before,
.bqcomponent blockquote.quote:after{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    color: #dbe4ef;
    font-size: 34px;
}

.bqcomponent blockquote.quote:before{
    content: "\f10d";
    top: -12px;
    margin-right: -20px;
    right: 100%;
}
.bqcomponent blockquote.quote:after{
    content: "\f10e";
    margin-left: -20px;
    left: 100%;
    top: auto;
    bottom: -20px;
}

/* -- Styles for nested dropdown menu for the main navigation */
/* -- From https://bootstrap-menu.com/detail-multilevel.html */

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
    .dropdown-menu li{ position: relative; 	}
    .nav-item .submenu{
        display: none;
        position: absolute;
        left:100%; top:-7px;
    }
    .nav-item .submenu-left{
        right:100%; left:auto;
    }
    /*.dropdown-menu > li:hover{ background-color: #f1f1f1 }*/
    .dropdown-menu > li:hover > .submenu{ display: block; }
}
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
    .dropdown-menu .dropdown-menu{
        margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
    }
}
/* ============ small devices .end// ============ */

/* ============ desktop view .end// ============ */

/* -- styles for the forum -- */

.frpst {background:#F8F8FF}
.frpst-left {background:#F4F7FF;}
.forum-grad {
    /* fallback for old browsers */
    background: #accbee;
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to bottom, #B8ECFF, #7bc8f6);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to bottom, #B8ECFF, #7bc8f6);
    border-top-right-radius:0.25rem;
}

@media (max-width: 768px) { /* medium breakpoint */
    .forum-grad { border-top-left-radius:0.25rem; }
}



a:hover .forum-grad {
    /* fallback for old browsers */
    background: #accbee;
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to bottom, #D2FFFF, #95E2FF);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to bottom, #D2FFFF, #95E2FF)
}

.frpst-sig {margin-left:-12px; margin-right:-12px;}
.frpst-likes {margin-left:-12px; margin-right:-12px; border-top-style:dashed !important;font-size:0.9rem;}

.fr-odd {background:#F4F7FF}
.fr-even {background:#F8F8FF}

.hr {height:1px; background-color:#AAAAAA;} /* for div as horizontal rule separating couplet options */

/* Key table stuff */

#couplet-table {table-layout:fixed;}
#couplet-table tbody {font-size:1.3rem;}
#couplet-table>:not(caption)>*>* {padding:1.2rem 0.45rem;} /* overwrites default excessive padding for key couplet table */
@media (max-width: 768px) { #couplet-table tbody { font-size:1rem; } } /* medium breakpoint */


/* -- Forum ajax stuff -- */

.already-liked { border: 2px solid #007700; border-radius:2px; padding-left:0.3em; padding-right:0.3em; color: #007700; position:relative;bottom:1px;}
a.already-liked:hover { color: #007700;}

/* -- header gradient, for main taxonomic key list page and maybe others */

.header-grad {
    /* fallback for old browsers */
background: #D2FFFF;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to bottom, #FFFFFF, #D2FFFF);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to bottom, #FFFFFF, #D2FFFF)
}

/*.water-header-bg {*/
/*    border-bottom: 2px dotted #7bc8f6;*/
/*}*/

.water-header-bg {
    margin: 1em 0 0.5em 0;
    font-weight: 400;
    position: relative;
    font-size: 1.7rem;
    line-height: 2rem;
    padding: 10px 15px 10px 15px;
    color: #3e4548;
    box-shadow:
            inset 0 0 0 1px rgba(53,86,129, 0.4),
            inset 0 0 5px rgba(53,86,129, 0.5);
    border-radius: 0 10px 0 10px;
}

/* If WebP is supported, use the WebP image */
@supports (background-image: url("https://static.troutnut.com/ui/water-header-bg.webp")) {
    .water-header-bg {
        background-image: url("https://static.troutnut.com/ui/water-header-bg.webp");
        background-repeat: no-repeat;
        background-position: center left;
        background-size: cover; /* Adjust as needed */
    }
}

/* If WebP is NOT supported, use a fallback image (e.g., PNG or JPG) */
@supports not (background-image: url("https://static.troutnut.com/ui/water-header-bg.webp")) {
    .water-header-bg {
        background-image: url("https://static.troutnut.com/ui/water-header-bg.png"); /* Ensure this PNG exists */
        background-repeat: no-repeat;
        background-position: center left;
        background-size: cover; /* Adjust as needed */
    }
}

/* -- styles for the field guide -- */
.caveat {
    font-size: 80%;
    color: #999;
}

.fg-cname{color: #676767; font-size:90%; font-weight:normal; font-family: Work Sans, Open Sans, sans-serif;}

.header-fieldguide {
    /* fallback for old browsers */
    background: #D2FFFF;
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to bottom, rgb(225, 240, 240), rgb(210, 245, 255));
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to bottom, rgb(225, 240, 240), rgb(210, 245, 255))
}

/* Remove native bullets and reset UL spacing */
ul.keypoints_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.keypoints_list li {
    margin-bottom: 1em; /* extra vertical spacing between items */
}

/* Add a stylish horizontal rule after each LI except the last */
ul.keypoints_list li:not(:last-child)::after {
    content: "";
    display: block;
    width: 50%;                /* half the container's width */
    margin: 0.5em auto 0;      /* 0.5em space above, centered horizontally */
    height: 1px;               /* line thickness */
    background: linear-gradient(
            to right,
            transparent,
            #ccc,
            transparent
    ); /* a gradient that tapers at the ends */
}

/* For fishable_rarely: one reel icon */
.fishable_rarely::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    margin-right: 0.3em;
    background: url('https://static.troutnut.com/ui/reel-green.svg') no-repeat center;
    background-size: contain;
    /* For the SVG to be recolored via CSS, update the SVG file so that its paths use fill="currentColor" */
    color: #2E7D32;
}

/* For fishable_sometimes: two reel icons side by side */
.fishable_sometimes::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 2em;
    height: 1em;
    margin-right: 0.3em;
    /* Two icons, one left and one right */
    background: url('https://static.troutnut.com/ui/reel-green.svg') no-repeat left center,
    url('https://static.troutnut.com/ui/reel-green.svg') no-repeat right center;
    background-size: 1em 1em;
    color: #2E7D32;
}

/* For fishable_often: three reel icons side by side */
.fishable_often::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 3em;
    height: 1em;
    margin-right: 0.3em;
    background: url('https://static.troutnut.com/ui/reel-green.svg') no-repeat left center,
    url('https://static.troutnut.com/ui/reel-green.svg') no-repeat center center,
    url('https://static.troutnut.com/ui/reel-green.svg') no-repeat right center;
    background-size: 1em 1em;
}


.fg-atip::before { /* for angling tips */
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    margin-right: 0.1em;
    margin-left:1em;
    margin-bottom:0.6em;
    background: url('https://static.troutnut.com/ui/fg-corner.svg') no-repeat center;
    background-size: contain;
    color: #2E7D32;
}

/* fos fishable_never, faded text and a faded red 'x' icon */
.fishable_never{color:#AAA;}
.fishable_never::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    margin-right: 0.3em;
    background: url('https://static.troutnut.com/ui/red_x.svg') no-repeat center;
    background-size: contain;
}

.image-fg-container { position: relative; }

/* Overlay at top right for the stage – more transparent overall */
.image-fg-stage {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(255, 255, 255, 0.5); /* increased transparency */
    border: 1px solid #666666;
    border-radius: 4px;
    font-family: "Work Sans", "Open Sans", sans-serif;
    font-size: 0.85rem;
    padding: 0.2rem 0.2rem;
    line-height: 1;
    color: #333333;
}

/* Overlay at bottom right for the relative indicator – tasteful red styling */
.image-fg-relative {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(255, 230, 230, 0.5); /* pale red with translucency */
    border: 1px solid #CC3333; /* tasteful red border */
    border-radius: 4px;
    font-family: "Work Sans", "Open Sans", sans-serif;
    font-size: 0.85rem;
    padding: 0.2rem 0.2rem;
    line-height: 1;
    color: #CC3333; /* red text to match */
}

.fg-star {font-size:0.7em; margin-right:0.2rem;}




/* -- styles for the admin interface, move to another file if they grow too much -- */

.key-condensed-text img {max-width:4rem; max-height:4rem;}
.key-condensed-text figcaption { display:none; }

.image-id-overlay {position:relative;top:2.5rem;left:0.5rem;display:inline-block;background-color:rgba(255,255,255,0.75); border: 1px solid #666666; color:#333333;}
.image-id-used {background-color: rgba(255, 88, 97, 0.38); border: 1px solid rgba(101, 80, 80, 0.82); color:#333333;}
.image-id-unused {background-color: rgba(103, 255, 0, 0.75); border: 1px solid #395934; color:#333333;}
.image-sourceid-overlay {position:relative;top:2.5rem;left:0.5rem;display:inline-block;background-color:rgba(200,255,225,0.75); border: 1px solid #666666; color:#333333;}
.image-editlink-overlay {float:right;position:relative;top:2.5rem;right:0.5rem;display:inline-block;background-color:rgba(255,255,255,0.75); border: 1px solid #666666; color:#333333;}

.location-name-container {min-width:425px;}
.location-name {background:#c6fcff !important; min-width:350px;}
.location-state {background:#c6fcff !important; min-width:100px;}
.location-alias {background:#e6feff !important;}
.location-name-dropdown {min-width:350px;}

.imageDropArea {
    border: 2px dashed #39C0ED;
    padding:20px;
    border-radius: 20px;
}

.imageDropAreaHighlight {
    border: 2px dashed #3ab1ff;
    background: #c3ebf8;
}


/* couple cheesy classes for some misbehaving form controls */
.w500px{width:500px;}
.w450px{width:450px;}
.w400px{width:400px;}
.w350px{width:350px;}
.w300px{width:300px;}
.w250px{width:250px;}
.w200px{width:200px;}
.w150px{width:150px;}
.w100px{width:100px;}
.w80px{width:80px;}
.selectalign{margin-bottom:36px;} /* to align text input boxes upward so they're even with form selects */

/* -- styles for videos to fill available space -- */

.video-container {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */
}

.video-container iframe,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
}

/* And set the max-width of the parent element */
.video-wrap {
    width: 100%;
}

/* Prevent long links in the forum from running off the page */

.dont-break-out {

    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;

}