.activity{display: none;}
html, body, .pages{overflow-y: scroll; overflow-anchor: none; width: 100%; -webkit-text-size-adjust: 100%; touch-action: manipulation; background-color: #181818;}
.pagcnt{margin: 0em; text-align: left; padding-left: 0.625em; padding-right: 0.625em; padding-top: 4em; padding-bottom: 1.25em; background: transparent; font-family: Arial;}
div{color: #ffffff!important;}
.law{font-size: 1.25rem; font-weight: 400; text-align: center; margin-top: 5em;}
.law:first-child{margin-top: 2rem!important;}
.book{font-size: 1.175rem; font-weight: 400; text-align: center; margin-top: 3em;}
.title{font-size: 1.15rem; font-weight: 300; text-align: center; margin-top: 3em;}
.allverse{text-align: left;}
.subtopic{font-size: 1.041667rem; font-weight: 450; text-align:left;}
.chapter{font-size: 1.10rem; font-weight: 400; text-align: center; padding-top: 0em; margin-top: 0em; margin-bottom: 0em;}
.section{font-size: 1rem; font-weight: 400; text-align: center; padding-top: 0em; margin-top: 0em; margin-bottom: 0em;}
.paragraph{font-size: 1.15rem; font-weight: 500; text-align: left; padding-top: 0.5em; margin-top: 2em;}
.chapter2{font-size: 2.916667em; font-weight: bold; font-style: italic; float: left; padding-left: 0.46875em; padding-right: 0.46875em;}
.number{font-size: 0.9583333rem; font-weight: bold; font-style: italic;}
.versetitle{font-size: 1.075rem; font-weight: 500; margin-top: 2em;}
.verse{font-size: 1.05rem; font-weight: 200; padding-bottom: 0.5em;}
.subverse{font-size: 1rem; font-weight: 100; margin-top: 1em; margin-bottom: 1.5em;}
.comment{font-size: 1rem; font-weight: lighter; font-style: italic;}
.reference{font-size: 0.875em; font-weight: 360; font-style: italic;}
.annotation{font-size: 0.8541667em; font-weight: bold; font-style: italic;}
.word{font-size: 0.8333333em; font-weight: 340; font-style: italic;}
.description{font-size: 0.8333333em; font-weight: 320; font-style: italic;}
.important{font-size: 0.9166667em; font-weight: 400; text-align:left;}
.center{width: 100%; height: 50%;}
.iconmenulistcontainer{padding: 0em;  margin: 0em; list-style: none;}
.iconmenucontainer{margin: 0em;}
.iconmenuitemlink{display:block; font-size: 1.000em; font-family: Arial; font-weight: 50; padding: 0.875em 0.500em 0.875em;}
.iconmenuimgarrowcontainer{float:right;  padding: 0.438em 0.625em 0.438em; vertical-align: middle;}
.iconmenuimgarrow{border: none; max-width: 100%; vertical-align: middle;  width: 0.625em;}
.iconmenutitle{font-size: 1.000em; font-weight: lighter; float:left;  padding: 0.500em 0.312em 0.438em; margin: 0em;}
.lyric{font-size: 0.9166667em; font-weight: 300; margin: 0em; text-align: left; padding-left: 0.625em; padding-right: 0.625em; padding-top: 0.625em; padding-bottom: 2.500em;}
.image, video, iframe{width: 100%; height: 70%;}

/*/Tweaks/*/
iframe{border: hidden;}
a{text-decoration: none; color: inherit;}
a:visited{font-weight: lighter;}
::-moz-selection{background: #848484; text-shadow: none;}
::selection{background: #848484; text-shadow: none;}
* {-webkit-tap-highlight-color: transparent;}
* {box-sizing: border-box; margin: 0; padding: 0;}
* {cursor: pointer; outline: none;}

.tabs .tab a, .tabs .tab a:hover, .tabs .tab a.active, .tabs .tab a:focus, .tabs .tab a:focus.active{background-color: black!important; color: white!important}
.collection.with-header .collection-header, .collection .collection-item{background-color: transparent; color: white!important;}
.collection, .collection.with-header .collection-header{border: none;}
.tabs .indicator{background-color: #eeeeee;}


ul li{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
footer{position: absolute; bottom: 0; margin-left: auto; margin-right: auto; margin: 0 auto;}

@font-face{font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(../woff2/materialicons.woff2) format('woff2');}
.material-icons{font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; color: #ffffff; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;}

#home_container, #search_container{padding-bottom: 7em;}

[type='range']{--range: calc(var(--max) - var(--min)); --ratio: calc((var(--val) - var(--min))/var(--range)); --sx: calc(.5*1.5em + var(--ratio)*(100% - 1.5em)); margin: 0; padding: 0; width: 30vw; height: 1.5em; background: transparent; font: 1em arial, sans-serif;}
[type='range'], [type='range']::-webkit-slider-thumb{-webkit-appearance: none;}
[type='range']::-webkit-slider-thumb{margin-top: -0.400em; box-sizing: border-box; border: none; width: 0.95em; height: 0.95em; border-radius: 50%; background: #212121; z-index: 10;}
[type='range']::-webkit-slider-runnable-track{box-sizing: border-box; border: none; width: 12.5em; height: 0.25em; background: #ccc;}
[type='range']::-webkit-slider-runnable-track{background: linear-gradient(#6d6d6d, #6d6d6d) 0/ var(--sx) 100% no-repeat #ccc;}
[type=range] ~ output{display: inline; position: relative; padding: 0.25em 0.5em; border-radius: 3px; background: #8d8d8d; color: #eee;}
#more_activity{vertical-align: middle; text-align: center; background-color: cyan;}
.settings_activity{margin-left: 0.5em;}
.about_activity{display: inline-block; position: absolute; bottom: 4em; width: 90vw; left: 5vw!important;}
.icontext{text-align: left; display: inline-block; margin-left: 1em;}
.icontext>a>i{margin-top: -0.05em; vertical-align: middle;}
.icontext>span{margin-left: 0.5em;}
.slider>label{margin-right: 1em;}
.slider>input[type='range'] {padding-top: 0.935em;}
.slider>button{margin-left: 1em; padding: 0; vertical-align: middle; padding-top: 0.25em; right: 5vw;}
.slider{width: auto;}

.search{background-color: #212121; height: 2em; width: 20em; border-radius: 2em;}
#search{background-color: transparent; color: white; border: none; outline: none;}
#search:hover{outline: none;}
#search::placeholder{color: white;}
.search_container_child{display: inline-flex; flex: 1 1 300px; position: relative; border: 1px solid #5f6368; border-radius: 5px; overflow: hidden; vertical-align: middle; width: 100%; height: 2.75em; background-color: #202124; margin-top: 1.35em;}
.search_container_child:hover{background-color: #424242; border: solid 2px #212121;}
.searchIcon{padding: 0.5rem;}
.searchBox{border: 0; padding: 0.5rem 0.5rem 0.5rem 0; flex: 1;}
.searchButton{background: #212121; border: 0; color: white; padding: 0.5rem; border-radius: 0;}
#voice_container{margin-top: 0.5em;}
#voice_container > button {margin-left: 1em; padding: 0; vertical-align: middle; padding-top: 0.125em; right: 5vw;}
#voice{width: 44%; height: 2em; margin-left: 1.25em; background: #212121; color: white;}

@media (orientation: portrait) {
::-webkit-scrollbar{width: 0em;}
::-webkit-scrollbar-track{background: transparent;}
::-webkit-scrollbar-thumb{background: transparent;}
::-webkit-scrollbar-thumb:hover{background: gray;}
}

@media (orientation: landscape) {
::-webkit-scrollbar{width: 0.5em;}
::-webkit-scrollbar-track{background: transparent;}
::-webkit-scrollbar-thumb{background: transparent; border-radius: 0.25em;}
::-webkit-scrollbar-thumb:hover{background: gray;}
}

@font-face{font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(../woff2/robotolatinext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(../woff2/robotolatin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{font-family: "Roboto", sans-serif; font-size: 100%;}


main{--color-main: #ea4335; --color-main-light: #ffad42; --color-main-dark: #bb4d00; --color-secondary: #ffc107; --color-background: #fafafa; background-color: var(--color-background); padding-bottom: 56px; min-height: 100vh;}
.bigTable{display: table; position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%;}
.cellInTheMiddle{display: table-cell; vertical-align: middle; text-align: center;}
.smart-grid{width: 100%; height: 100%; display: grid; grid-gap: 8px; padding: 8px;}
.card{background: #ffffff; border-radius: 2px; position: relative; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2); transition: 375ms cubic-bezier(0.4, 0, 0.2, 1);}
.card-title{padding: 24px 16px 16px 16px; font-size: 24px; font-weight: thin; color: rgba(0, 0, 0, 0.9);}
.card-supporting-text{padding: 16px 16px 24px 16px; font-size: 14px; font-weight: 450; opacity: 0.8;}
.card-actions{padding: 8px; border-top: 1px solid rgba(0, 0, 0, 0.1); width: 100%;}

button{border: none;}
.button, .bottom-navigation, i{user-select: none; -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; z-index: 11!important;}
.button{color: var(--color-main); border-radius: 2px; position: relative; height: 36px; margin: 0; min-width: 64px; padding: 0 24px; display: inline-block; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; overflow: hidden; will-change: box-shadow; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); outline: none; cursor: pointer; text-decoration: none; text-align: center; line-height: 36px; vertical-align: middle;}
.button:hover{background-color: rgba(158, 158, 158, 0.2);}
.button:focus:not(:active){background-color: rgba(0, 0, 0, 0.12);}
.button:active{background-color: rgba(158, 158, 158, 0.4);}
.button .flat-button:focus:not(:active){background-color: rgba(0, 0, 0, 0.12);}
.bottom-navigation{overflow: hidden; transition: 375ms; position: fixed; height: 56px; width: 100%; bottom: 0; right: 0; font-size: 24px; box-shadow: 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px rgba(0, 0, 0, 0.2); display: flex; justify-content: space-around;}
.bottom-navigation .bottom-navigation-destination{padding: 16px 0 16px 0; float: left; text-align: center; flex-grow: 1; font-size: 12px; transition: 225ms cubic-bezier(0.4, 0.2, 0, 1); color: rgba(256, 256, 256, 0.87); cursor: pointer;}
.bottom-navigation .bottom-navigation-destination.active{padding: 6px 12px 10px 12px;}
.bottom-navigation-label{opacity: 0; transition: 225ms cubic-bezier(0.4, 0.2, 0, 1);}
.bottom-navigation-destination.active .bottom-navigation-label{font-size: 14px; opacity: 1;}
.bottom-navigation .bottom-navigation-destination .material-icons{font-size: 24px; z-index: 4; margin-bottom: 4px; display: block;}

/*/Breakpoints/*/
@media only screen and (max-width: 384px){
.smart-grid{display: block; padding: 8px;}
.smart-grid>.card{margin-bottom: 8px;}
.activity{margin-left: 6em;}
.activity{margin-right: 6em;}
.bottom-navigation {border-top: gray solid 1px;}
}

@media only screen and (max-width: 671px){
.smart-grid{grid-template-columns: repeat(2, 1fr);}
main{padding-bottom: 56px;}
.activity{margin-left: 1em;}
.activity{margin-right: 1em;}
.bottom-navigation {border-top: gray solid 1px;}
}

@media screen and (min-width: 672px) {
.smart-grid{grid-template-columns: repeat(3, 1fr);}
.bottom-navigation{width: 64px; height: 100vh; left: 0; top: 0; right: initial; box-shadow: 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px rgba(0, 0, 0, 0.2); display: initial;}
.bottom-navigation .bottom-navigation-destination{color: rgba(256, 256, 256, 0.54); padding: 20px;}
.bottom-navigation-label{display: none;}
.bottom-navigation .bottom-navigation-destination.active{color: rgba(256, 256, 256, 0.87); padding: 20px;}
.bottom-navigation .bottom-navigation-destination .material-icons{margin: 0;}
main{margin-left: 64px;}
.activity {margin-left: 6em;}
.activity {margin-right: 1.125em;}
.bottom-navigation {border-right: gray solid 1px;}
}

@media only screen and (min-width: 1080px) {
.smart-grid{padding: 56px; grid-template-columns: repeat(4, 1fr);}
.activity{margin-left: 6em;}
.activity{margin-right: 1.125em;}
.bottom-navigation {border-right: gray solid 1px;}}

.progress{position: relative; height: 6px; display: block; width: 100%; background-color: var(--color-main); background-clip: padding-box; margin: 0 auto; overflow: hidden;}
.progress .indeterminate{background-color: rgba(64, 64, 64, 0.34);}
.progress .indeterminate:before{content: ""; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; -moz-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;}
.progress .indeterminate:after{content: ""; position: absolute; background-color: inherit; top: 0; left: 0; bottom: 0; -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; -moz-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; -webkit-animation-delay: 1.15s; -moz-animation-delay: 1.15s; animation-delay: 1.15s;}

@-webkit-keyframes indeterminate{0% {left: -35%; right: 100%;} 60% {left: 100%; right: -90%;} 100% {left: 100%; right: -90%;}}
@keyframes indeterminate{0% {left: -35%; right: 100%;} 60% {left: 100%; right: -90%;} 100% {left: 100%; right: -90%;}}
@-webkit-keyframes indeterminate-short{0% {left: -200%; right: 100%;} 60% {left: 107%; right: -8%;} 100% {left: 107%; right: -8%;}}
@keyframes indeterminate-short{0% {left: -200%; right: 100%;} 60% {left: 107%; right: -8%;} 100% {left: 107%; right: -8%;}}
.booko{padding-top: 1em; padding-bottom: 1em; border-bottom: solid 0.0625em white; font-size: 1.20em; vertical-align: middle;}
.booko > span{margin-right: 0.5em; font-size: 1.15em;}
@font-face{font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../woff2/poppinslatin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../woff2/poppinslatinext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
*::before, *::after{padding: 0; margin: 0;}
:root{--gray: gray; --dark-gray: darkgray; --softwhite: #f5f5f5; --white: #ffffff; --darkwhite: #cecaca; --pinkshadow: #ffcbdd; --lightbshadow: rgba(0,0,0,0.15);}
/*/body{min-height: 100vh; background: linear-gradient(var(--gray) 0%, var(--dark-gray) 100%); background: black;}/*/
#player_container{box-sizing: border-box; font-family: "Poppins", sans-serif; width: auto; padding-top: 5vh; overflow: hidden; position: relative; border-radius: 15px;
height: 100vh!important; /*/box-shadow: 0px 6px 15px var(--lightbshadow);/*/}
#player_container i{cursor: pointer;}
.top-bar, .progress-area .song-timer, 
.controls, #music-list .header, #music-list ul li{display: flex; align-items: center; justify-content: space-between;}
.top-bar i{font-size: 30px; color: var(--softwhite);}
.top-bar i:first-child{margin-left: -7px;}
.top-bar span{font-size: 18px; margin-left: -3px; color: var(--softwhite);}
.img-area{width: 100%; height: 256px; overflow: hidden; margin-top: 25px; border-radius: 15px; box-shadow: 0px 6px 12px var(--lightbshadow);}
.img-area img{width: 100%; height: 100%; object-fit: cover;}
.song-details{text-align: center; margin: 30px 0;}
.song-details p{color: var(--softwhite);}
.song-details .name{font-size: 21px;}
.song-details .artist{font-size: 18px; opacity: 0.9; line-height: 35px; color: #b3b3b3!important;}
.progress-area{height: 6px; width: 100%; border-radius: 50px; background: #535353; cursor: pointer;}
.progress-area .progress-bar{height: inherit; width: 0%; position: relative; border-radius: inherit; background: linear-gradient(90deg, #b3b3b3 0%, #b3b3b3 100%); color: #b3b3b3;}
.progress-bar::before{content: ""; position: absolute; height: 12px; width: 12px; border-radius: 50%; top: 50%; right: -5px; z-index: 2; opacity: 0; pointer-events: none; transform: translateY(-50%); background: inherit; transition: opacity 0.2s ease;}
.progress-area:hover .progress-bar::before{opacity: 1; pointer-events: auto;}
.progress-bar:hover, .progress-area:hover .progress-bar{background: #9b0000;}
.progress-area .song-timer{margin-top: 2px;}
.song-timer span{font-size: 13px; color: var(--softwhite);}
.controls{margin-top: 5vh; margin-bottom: 1vh; z-index: 1!important;}
.controls i{font-size: 28px; user-select: none; /*/background: linear-gradient(var(--gray) 0%, var(--dark-gray) 100%);/*/ background: #b3b3b3; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.controls i:hover{background-color: white;}
.controls i:nth-child(2),
.controls i:nth-child(4){font-size: 43px;}
.controls #prev{margin-right: -13px;}
.controls #next{margin-left: -13px;}
.controls .play-pause{height: 54px; width: 54px; display: flex; cursor: pointer; align-items: center; justify-content: center; border-radius: 50%; background-color: white; /*/background: linear-gradient(var(--dark-gray) 0%, var(--gray) 100%);/*/ /*/box-shadow: 0px 0px 5px var(--gray);/*/}
.play-pause::before{position: absolute; content: ""; height: 43px; width: 43px; border-radius: inherit; /*/background: linear-gradient(var(--gray) 0%, var(--dark-gray) 100%);/*/ background-color: white;}
.play-pause i{height: 43px; width: 43px; line-height: 43px; text-align: center; background: inherit; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; background-color: black!important;}
.play-pause:hover{box-shadow: 0px 0px 10px var(--gray);}
#music-list{position: relative; width: 100%; left: 0; bottom: 0vh; opacity: 0; pointer-events: none; padding: 15px 30px; border-radius: 15px; box-shadow: 0px -5px 10px rgba(0,0,0,0.1); transition: all 0.15s ease-out;}
#music-list.show{bottom: 85vh; opacity: 1; pointer-events: auto; z-index: 99999999999999!important; height: 65vh; overflow-y: scroll;}
.header .row{display: flex; align-items: center; font-size: 19px; color: var(--softwhite);}
.header .row i{cursor: default;}
.header .row span{margin-left: 5px;}
.header #close{font-size: 22px; color: var(--softwhite);}
#music-list ul{margin: 10px 0; overflow: scroll;}
#music-list ul::-webkit-scrollbar{width: 0px;}
#music-list ul li{list-style: none; display: flex; cursor: pointer; padding-bottom: 10px; margin-bottom: 5px; color: var(--softwhite); border-bottom: 1px solid transparent;}
#music-list ul li:last-child{border-bottom: 0px;}
#music-list ul .course{border-bottom: 1px solid #E5E5E5; margin-top: 1.5em; margin-bottom: 1em;}
#music-list ul li .row span{font-size: 17px;}
#music-list ul li .row p{opacity: 0.9;}
ul li .audio-duration{font-size: 16px;}
ul li.playing{pointer-events: none; color: var(--dark-gray);}


/*/Login-Register/*/
#logo{position: relative; width: 40vw; height: auto; margin-top: 2rem; margin-bottom: 1rem; animation-name: logo; animation:logo 20s linear 60s; animation-delay: 7s;}
@keyframes logo { 100% {-webkit-transform: rotate(360deg); transform:rotate(360deg);}}
.form{background: transparent; width: 100%!important; height: 100%!important; padding-bottom: 25vh}
.form > * + * {margin-top: 1rem;}
#login, #register{margin-top: 1rem; border: 0; border-radius: 200px; width: 100%; padding: 0.85rem; font-size: 1rem; color: white; background: #9b0000!important;}
#login:focus, #register:focus{outline: none;}
.input-holder > p, .header__text > p{text-align: center; color: white; margin: 1.15rem;}
.holder{position: relative; height: auto; width: 70%; padding-top: 1em; margin-left: 15%; display: block;}
.i{position: relative; width: 100%!important;}
.input, .select{width: 100%; height: 3rem; font-size: 16px; padding-left: 13px; border-radius: 4px; border: 1px solid grey; outline: none; background-color: transparent; -webkit-appearance: none;}
.input{color: white;}
.select{color: gray;}
.select:focus{color: white;}
.select:hover{background-color: #212121!important; color: white;}
.input::placeholder{color: gray; opacity: 1;}
.input:focus.input::placeholder{opacity: 0;}
.input:not(:placeholder-shown).input:not(:focus) + .placeholder{color: grey; opacity: 0;}
.input:focus{border-color: white;}
.input + .placeholder{opacity: 0;}
.input:focus + .placeholder{transform: scale(0.75) translateY(-125px) translateX(-10px); color: white; text-align: center; opacity: 1;}
.select:not(:placeholder-shown).select:not(:focus) + .placeholder{color: grey; opacity: 0;}
.select:focus + .placeholder{transform: scale(0.75) translateY(-125px) translateX(-10px); color: white; text-align: center; opacity: 1;}
.placeholder{position: relative; top: 35px; left: 8px; padding: 0 8px; background-color: #181818; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); color: transparent; opacity: 1; width: 29%;}
#id ~ .placeholder{width: 14%;}
#pss ~ .placeholder{width: 26%;}
#userid ~ .placeholder{width: 26%;}
#name ~ .placeholder{width: 35%;}
#lastname ~ .placeholder{width: 35%;}
#username ~ .placeholder{width: 30%;}
#email ~ .placeholder{width: 24%;}
#section ~ .placeholder{width: 30%;}
#password ~ .placeholder{width: 43%;}
#confirm ~ .placeholder{width: 37%;}
#token ~ .placeholder{width: 26%;}
#signup{display: none;}
.registerl, .loginl{cursor: pointer;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance: none; margin: 0;}
/*/Alert/*/
#msgm{width: 100vw; height: 100vh; position: fixed!important; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); transition: 0.1s; opacity: 0;}
#msgco{position: absolute; width: 90vw; background: #151515; border-radius: 2px; box-shadow: 0 4px 42px 6px rgba(0, 0, 0, 0.4); transform: translateX(-50%) translateY(-50%); left: 50vw; top: 50vh; transition: 0.1s; opacity: 0;}
#msgt{padding: 24px; font-size: 20px; font-weight: 500; padding-bottom: 20px; color: white;}
#msgb > p{padding: 0 24px; padding-right: 24px; font-size: 16px; line-height: 24px; color: #f5f5f5;}
#msgb > p:first-child{font-size: 18px!important; margin-top: 10px;}
#msgb > p:last-child{margin-bottom: 10px;}
#msgbtnsc{width: 100%; display: flex;}
#msgbtnsc > * + * {font-family: Roboto;}
#msgbtns{flex: 1 0 auto;}
.msgbtn{cursor: pointer; height: 36px; margin: 8px; margin-left: 0; padding-right: 17px; background: none; border: none; text-transform: uppercase; padding: unset 0; color: #9b0000; font-family: Roboto; font-weight: 500; font-size: 14px; outline: none; border-radius: 2px; transition: 0.2s;}
.msgbtn:hover{background: rgba(243, 33, 33, 0.1);}
.msgbtn:active{background: rgba(243, 33, 33, 0.3);}
#showmsg{margin: 8px;}