/*
`width:auto` was rendering 0px wide for .svg files
https://stackoverflow.com/questions/59215996/how-to-add-a-logo-to-my-readthedocs-logo-rendering-at-0px-wide
*/
.wy-side-nav-search .wy-dropdown > a img.logo, .wy-side-nav-search > a img.logo {
    width: 200px;
}

/* ReadTheDocs theme colors */

.wy-nav-top { background-color: #f07e44 }

.wy-side-nav-search { background-color: transparent}
.wy-side-nav-search input[type="text"] { border-width: 0 }

.wy-nav-content {
    max-width: 1200px;
    background: #ffffff;
}

.wy-body-for-nav {
    background: #ffffff;
}

/* toctree menu caption colors */
.wy-menu-vertical header, .wy-menu-vertical p.caption {
    color: #8655ea;
}

/* toctree menu background colors */
.wy-nav-side {
    background: #f8f8f8;
}

/* toctree menu item colors */
.wy-menu-vertical a {
    color: #231F20;
}

.wy-menu-vertical a:hover {
    background-color: #d0beff;
}

.wy-menu-vertical a:hover button.toctree-expand {
    color: #d9d9d9
}

.rst-content code.literal, .rst-content tt.literal {
    color: #8655ea;
}

html.writer-html4 .rst-content dl:not(.docutils)>dt,html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple)>dt {
    display: table;
    margin: 6px 0;
    font-size: 90%;
    line-height: normal;
    background: rgba(240, 231, 250, 0.73);
    color: #8655ea;
    border-top: 3px solid #6726ec;
    padding: 6px;
    position: relative
}

.wy-nav-content-wrap {
    background: rgb(255 255 255 / 5%);
}

/* before-after slider */

html {
	 box-sizing: border-box;
}
 *, *:before, *:after {
	 box-sizing: inherit;
}
 body {
	 margin: 0;
	 height: 100vh;
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
 .befaft_container {
	 position: relative;
	 width: 500px;
	 height: 436px;
	 border: 2px solid white;
}
 .befaft_container .img {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background-size: 500px 100%;
}
 .befaft_container .background-img {
	 background-image: url('../images/before.png');
}
 .befaft_container .foreground-img {
	 background-image: url('../images/after.png');
	 width: 50%;
}
 .befaft_container .slider {
	 position: absolute;
	 -webkit-appearance: none;
	 appearance: none;
	 width: 100%;
	 height: 100%;
	 background: rgba(255, 255, 255, 0);
	 outline: none;
	 margin: 0;
	 transition: all 0.2s;
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
 .befaft_container .slider:hover {
	 background: rgba(242, 242, 242, .1);
}
 .befaft_container .slider::-webkit-slider-thumb {
	 -webkit-appearance: none;
	 appearance: none;
	 width: 6px;
	 height: 436px;
	 background: #ffffff;
	 cursor: pointer;
}
 .befaft_container .slider::-moz-range-thumb {
	 width: 6px;
	 height: 436px;
	 background: white;
	 cursor: pointer;
}
 .befaft_container .slider-button {
	 pointer-events: none;
	 position: absolute;
	 width: 30px;
	 height: 30px;
	 border-radius: 50%;
	 background-color: #ede8ff;
	 left: calc(50% - 17.5px);
	 top: calc(50% - 18px);
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
 .befaft_container .slider-button:after {
	 content: '';
	 padding: 3px;
	 display: inline-block;
	 border: solid #5d5d5d;
	 border-width: 0 2px 2px 0;
	 transform: rotate(-45deg);
}
 .befaft_container .slider-button:before {
	 content: '';
	 padding: 3px;
	 display: inline-block;
	 border: solid #5d5d5d;
	 border-width: 0 2px 2px 0;
	 transform: rotate(135deg);
}