#statusbar { margin-bottom: 10px; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;}
#statusbar .itembox {padding: 0; margin: 0;display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

#topcontrols {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; }

.namewrap {display: inline-block;}
.namewrap.loggedin {color: yellow; margin-right: 20px; font-size: 1.1em; text-transform: capitalize;}

.container {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}



#gametemplates {width:  calc(20% - 10px); padding: 5px 10px;}

#connectiondetails {width: 40%;}
.connectioncontrols {opacity: 0; height: 0; overflow: hidden; transition: all .5s; border-bottom: 1px dotted #cccccc; padding-bottom: 5px; margin-bottom: 10px; box-sizing: border-box;}
.connectioncontrols.active {opacity: 1; height: unset;}

.connectionbox {line-height: 1.1em;}

#chatdisplay {width: calc(40% - 10px); overflow-y: auto; height: calc(100vh - 30px - 70px - 32px); overflow: hidden; }
#chat-messages {overflow-y: scroll; height: calc(100vh - 30px - 70px - 32px - 50px); margin-right: -10px; padding-top: 100%; position: relative; }
#overlayfade {position: absolute; top: 0; left: 0; width: 100%; height: 80px; background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 2%, rgba(255, 255, 255, 0) 100%); pointer-events: none; opacity: 0; transition: all 0.5s;}
#overlayfade.active {opacity: 1;}

.relativebox {position: relative;}

.displaybox {background: #2e3035; padding: 10px; box-sizing: border-box;}

.button {background: transparent; border: 1px solid #cccccc; color: #cccccc; transition: all 0.3s; padding: 5px 20px; margin: 5px; border-radius: 0 6px 0 6px; cursor: pointer; text-decoration: none; display: inline-block; position: relative;transition: all 0.3s;}
.button:hover {background-color: teal; border-color:white; color: #ffffff;}

.toggle.platform {background: transparent; border: 1px solid #cccccc; margin: 5px; padding: 5px 20px 5px 10px; height: 40px; cursor: pointer; border-radius: 0; transition: all 0.3s; display: flex; justify-content: flex-start; align-items: center;}
.toggle.platform.active {background-color: #5c96bc; color: white; }
.toggle.platform.youtube.active {background-color: #ff0000; color: white; }
.toggle.platform.twitch.active {background-color: #6441a5; color: white; }
.toggle.platform.X.active {background-color: #000000; color: white; }


.statusicons {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.iconbox {font-family: "dashicons"; display: inline-block; margin-right: 10px;}
.iconbox:before {font-size: 22px; line-height: 1em;}

.toggle.addtype .iconbox {width: 24px; margin-right: 0px; display: flex; align-items: center; justify-content: space-around;}
.toggle.addtype .iconbox:before {position: relative; margin-top: 4px;}
.toggle.addtype .iconbox:hover:before {color: yellow;}

.toggle.removetype {transition: all 0.5s; position: absolute; left: 0px;}
.toggle.removetype .iconbox {width: 24px; margin-right: 0px; display: flex; align-items: center; justify-content: space-around;}
.toggle.removetype .iconbox:before {position: relative; margin-top: 2px; font-size: 24px}
.toggle.removetype .iconbox:hover:before {color: yellow;}
.toggle.removetype.active .iconbox:before {color: red;}

.toggle.platform.youtube .iconbox:before {font-size: 32px;}
.toggle.platform.twitch .iconbox:before {font-size: 24px;}

.toggle.platform.X {padding: 5px 20px;}
.toggle.platform.X .iconbox {display: flex; justify-content: space-around; align-items: center; margin-right: 0;}
.toggle.platform.X .iconbox svg {fill: #dbdee1;}
.toggle.platform.X.active .iconbox svg {fill: #ffffff;}


.button.contenttype {background: #cccccc; color: #1b1b1b; display: block; margin: 5px 0; padding: 5px; width: 100%; border: none; border-radius: 0; cursor: pointer; text-align: center; transition: all 0.3s; position: relative;}
.button.contenttype.active {background-color: teal; color: #ffffff;}
.button.contenttype:hover {background-color: teal; color: #ffffff;}
.button.contenttype .iconbox.remove {position: absolute; left: 0px; transition: all 0.4s; width: 0px; padding-left: 0px; padding-right: 0px; overflow: hidden;}
.button.contenttype .iconbox.remove.active {width: initial; padding-left: initial; padding-right: initial; left: 2px; transition: all 0.5s} 
.button.contenttype .iconbox.remove.active:hover:before {color: red; }

.button.contenttype .iconbox.save {position: absolute; right: -5px; top: 50%; transform: translateY(-50%); transition: all 0.4s; width: 0px; padding-left: 0px; padding-right: 0px; overflow: hidden;}
.button.contenttype .iconbox.save svg {fill: #ffffff;}
.button.contenttype.active .iconbox.save {width: 24px; padding-left: initial; padding-right: initial; transition: all 0.5s} 
.button.contenttype.active .iconbox.save:hover svg {fill: orange;}




.message {background: #000000;  margin: 5px 0; display: flex; justify-content: space-between; align-items: stretch;}
.message .iconbox {width: 39px; padding: 5px; border-right: 5px solid #2e3035; display: flex; justify-content: space-around; align-items: center; margin: 0;}
.message .iconbox:before {color: #ffffff;}
.message .mcontent {width: calc(100% - 49px);padding: 5px; }
.message.youtube .iconbox {background-color: #ff0000; }
.message.twitch .iconbox {background-color: #6441a5; color: white;}
.message.x .iconbox {background-color: #000000; color: white;}
.message.x .iconbox svg {fill: #ffffff}

.prestagebox {margin-bottom: 10px;}
.headerbar {font-size: 12px; width: 100%; padding: 3px 5px;}
.padbox {padding: 5px; line-height: 0;}
.formbox {margin-top: 5px; padding-top: 10px; border-top: 1px dotted #cccccc; width: 100%; display: inline-block;}



.prestagebox.youtube {border: 1px solid #ff0000; }
.prestagebox.youtube .headerbar {background: #ff0000; color: #ffffff;}
.prestagebox.youtube .iconbox {width: 20px; height: 20px; display: flex; justify-content: space-around; align-items: center;}
.prestagebox.youtube .iconbox svg {fill: #ffffff; width: 20px; height: 20px;}
.prestagebox.youtube .iconbox.red svg {fill: red;}
.prestagebox.youtube .iconbox.yellow svg {fill: yellow;}
.prestagebox.youtube .iconbox.green svg {fill: green;}







.prestagebox.twitch {border: 1px solid #6441a5; }
.prestagebox.twitch .headerbar {background: #6441a5; color: #ffffff;}

.prestagebox.x {border: 1px solid #000000; }
.prestagebox.x .headerbar {background: #000000; color: #ffffff;}


.addtypewrap {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 5px 0 10px; position: relative;}
.addtypewrap input { width: 0px; transition: all 0.5s; padding-left: 0px; padding-right: 0px;}
.addtypewrap.active input {width: 100%; padding-left: 5px; padding-right: 5px; }

.addtypewrap.active .toggle.addtype .iconbox:before {color: yellow;}
.addtypewrap.active .toggle.addtype .iconbox:hover:before {color: red;}


.addtypewrap.active .toggle.removetype  {width: 0px; padding-left: 0px; padding-right: 0px; overflow:hidden; }