ul.fixed_topic_menu {position:fixed;bottom:32px;right:32px;margin:0;padding:0;list-style-type: none;background-color:#2E313A;border-radius:16px;overflow:hidden;box-shadow:8px 8px 16px rgba(0,0,0,0.4)}
ul.fixed_topic_menu li {display:flex;padding:8px;color:#97989D;border-top:1px solid #97989D;justify-content:space-between;align-items:center;cursor:pointer}

ul.fixed_topic_menu li:first-of-type {border-top:none}
ul.fixed_topic_menu li.active {color:#FFFFFF}
ul.fixed_topic_menu div.text {padding:8px}
ul.fixed_topic_menu div.subtext {margin-top:4px;font-size:12px}
ul.fixed_topic_menu div.icon {background-color:#888888;border-radius:32px;color:#FFFFFF;padding:8px;font-size:24px;margin-left:32px;opacity:0.9;width:44px;text-align:center}
ul.fixed_topic_menu div.icon_orange {background-color:#DA7036}
ul.fixed_topic_menu div.icon_red {background-color:red}
ul.fixed_topic_menu div.icon_yellow {background-color:yellow;color:#000000}
ul.fixed_topic_menu div.icon_green {background-color:#6FBB7C}
ul.fixed_topic_menu div.icon_blue {background-color:#3F9AF7}
ul.fixed_topic_menu div.icon_lighter {background-color:rgba(255,255,255,0.3)}
ul.fixed_topic_menu div.icon_darker {background-color:rgba(0,0,0,0.3)}
ul.fixed_topic_menu li:hover {background-color:#3E414A}
ul.fixed_topic_menu li:hover div.text {color:#C7C8CD}
ul.fixed_topic_menu li:hover div.icon {opacity:1}

ul.fixed_topic_menu_read {background-color:#6FBB7C}
ul.fixed_topic_menu_read li {color:#FFFFFF}
ul.fixed_topic_menu_read li:hover {background-color:#7FCB8C}
ul.fixed_topic_menu_read li:hover div.text {color:#FFFFFF}

ul.fixed_topic_menu li.submode div.icon {background-color:#888888;border-radius:16px;color:#FFFFFF;padding:4px;font-size:16px;margin-left:32px;opacity:0.9;width:22px;text-align:center}
ul.fixed_topic_menu li.submode div.text {padding-left:32px;font-size:12px}

div.hidden_div {opacity:0;pointer-events:none}
div#topic_backdrop {position: fixed;height: 100%;width: 100%;top: 0;left: 0;background: url(images/gray_opacity_50.png);background: rgba(46,49,59,0.5);cursor:pointer;z-index:3}
div#topic_overlay {position:absolute;top:0;left:0;width:950px;z-index:4}
div.overlay_header {font-size:20px;font-weight:bold;margin-bottom:12px}
div.overlay_header_deprecated {position:absolute;top:-28px;left:0;text-transform:uppercase;letter-spacing:0.1em;font-size:20px;color:#FFFFFF;opacity:0.5;font-weight:bold}
div.visible {opacity:1;pointer-events:all}
div.topic img {width:100%}
div.topic video {width:100%}

div#fixed_topic_menu_container {z-index:4}
ul.fixed_topic_menu {z-index:4}

div.compare_topics_container {display:flex;align-items:stretch;height:100%}
div.compare_topics_one {flex:1;background-color:rgba(247, 247, 247, 1);display:flex;flex-direction:column;border-right:1px solid rgba(213, 214, 216, 1);padding:32px}
div.compare_topics_two {width:718.4px;display:flex;flex-direction:column;padding:32px}
div.compare_topics_two_fullwidth {width:1000px}

div.compare_top {flex:1}
div.compare_topics_grow {flex:10}
div.compare_topics_bottom {display:flex;justify-content:flex-end;padding-top:24px}
div.compare_topics_container div.section_text {font-family:Fira Sans;line-height: 1.5;font-size:16px}

input.section_header {margin-bottom:12px;border-radius:5px;font-family:fira sans;box-sizing: border-box;padding:4px;font-size:24px;font-weight:bold;width:100%;border:1px solid #DDDDDD;-webkit-transition: all 0.30s ease-in-out;transition: all 0.30s ease-in-out;}
input.section_header:focus  {border:1px solid #166BDA}

div.width20vw {width:20vw}
div.width76vw {width:76vw}

div.section_column {display:flex;flex-direction:column;padding:24px;height:100%}
div.section_column div.row_top {flex:1;margin-top:8px}
div.section_column div.row_middle {flex:20}
div.section_column div.row_bottom {flex:1;display:flex;justify-content:flex-end;padding-top:24px}

div.source_section {flex:1;overflow-y:auto;max-width:634.5px}
div.topic_edit_element_container {border-radius:4px;border:1px solid #D5D6D8;padding:24px;margin-bottom:32px;background-color:rgb(22, 107, 218, 0.05)}
div.topic_edit_element_container div.header_container {display:flex;width:100%;justify-content:space-between;border-bottom:1px solid #D5D6D8;margin-bottom:16px;padding-bottom:16px;gap:16px}
div.topic_edit_element_container div.header {font-size:18px;font-weight:600}

div.keywords {display:flex;gap:8px;flex-wrap:wrap}
div.keywords div.keyword {padding:8px;background-color:rgba(0,0,0,0.05);border-radius:100px;font-family:Fira Mono}
textarea.keywords_edit {font-family:Fira Mono;width:100%;height:200px;padding:8px;font-size:16px}

div.edit_title_icon {position:absolute;right:8px;top:8px}

textarea.section_raw {height:50vh;width:100%;font-family:'Fira Mono';box-sizing: border-box;padding:4px;;border:1px solid #DDDDDD;-webkit-transition: all 0.30s ease-in-out;transition: all 0.30s ease-in-out;}
textarea.section_raw :focus  {border:1px solid #166BDA}

@media only screen and (max-device-width: 480px) {
	ul.fixed_topic_menu {bottom:4px;right:4px}
	ul.fixed_topic_menu li {padding:4px}
	ul.fixed_topic_menu div.text {font-size:10px}
	ul.fixed_topic_menu div.subtext {font-size:9px}
	ul.fixed_topic_menu div.icon {border-radius:16px;padding:4px;font-size:16px;margin-left:4px;width:26px}
	div#topic_overlay {width:100%;z-index:3}
	div#topic_overlay div.topic {background-color:#FFFFFF;padding-top:16px}
	ul.fixed_topic_menu li.submode div.text {padding-left: 24px;font-size: 10px;}

	div.compare_topics_container {display:block}
	div.compare_topics_one {height:33vh;width:100%}
	div.compare_topics_two {height:63vh;width:100%}
}