.demo-style-switch { position: fixed; z-index: 99999; top: 150px; left: -220px; background: #FFFFFF; } .demo-style-switch:hover { opacity: 1 !important; } .demo-style-switch .switched-options { position: relative; width: 220px; text-align: left; padding: 20px; -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); } .demo-style-switch .config-title { text-transform: uppercase; font-weight: 700; font-size: 16px; color: #000; border-bottom: 1px dotted #CCCCCC; border-top: 1px dotted #CCCCCC; margin-bottom: 5px; } .demo-style-switch ul { margin-bottom: 10px; padding: 0; list-style: none; } .demo-style-switch ul .active { color: #005885; font-weight: 700; } .demo-style-switch ul .p { font-weight: 400; font-size: 12px; color: #CCC; margin-top: 10px; } .demo-style-switch ul li a { font-size: 14px; font-weight: 400; line-height: 24px; color: #808080; } .demo-style-switch ul li a:hover { color: #008ed6; } .demo-style-switch ul.styles { margin-top: 15px; } .demo-style-switch ul.styles li { display: inline-block; margin-right: 5px; } .demo-style-switch ul.styles li .blue, .demo-style-switch ul.styles li .blue-munsell, .demo-style-switch ul.styles li .green, .demo-style-switch ul.styles li .orange, .demo-style-switch ul.styles li .purple, .demo-style-switch ul.styles li .red, .demo-style-switch ul.styles li .slate, .demo-style-switch ul.styles li .yellow { width: 35px; height: 35px; } .demo-style-switch ul.styles li .blue { background: #008ed6; } .demo-style-switch ul.styles li .blue-munsell { background: #0196a7; } .demo-style-switch ul.styles li .green { background: #00ab66; } .demo-style-switch ul.styles li .orange { background: #ea8825; } .demo-style-switch ul.styles li .purple { background: #8600c8; } .demo-style-switch ul.styles li .red { background: #f25454; } .demo-style-switch ul.styles li .slate { background: #6b798f; } .demo-style-switch ul.styles li .yellow { background: #e5c41a; } .demo-style-switch .switch-button { opacity: 1 !important; background: #F5F5F5; padding: 10px; font-size: 24px; color: #272727; position: absolute; overflow: hidden; right: -50px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .demo-style-switch .switch-button:hover { color: #008ed6; cursor: pointer; text-decoration: none; } .demo-style-switch button{ display: inline-block; padding: 3px 10px; background-color: var(--main-color); color: #ffffff; -webkit-transition: all 0.3s; transition: all 0.3s; border: 1px solid transparent; border-radius: 20px; margin: 0 10px 0 5px; width: 90%; text-align: center; font-size: 17px; } .demo-style-switch button i{ margin: 1px 6px 2px 8px; height: 29%; width: 10px; font-size: 26px; padding: 4px 23px 5px 0; } .demo-style-switch button:hover { background-color: transparent; border-color: var(--main-color); color: var(--main-color); }