* {margin:0; padding:0;}
body {background: #fafafa; color:000;}
#content {display: flex; justify-content: center; flex-direction: column; align-items: center;}
#statusContainer {margin-top: 50px;}
#statusContainer .spinner.hidden{display: none;}
#statusContainer .spinner .spinner-layer{border-color: #FCD535;}
#statusContainer #statusIcons {text-align: center;}
#statusContainer #statusIcons .hidden{display: none;}
#statusContainer #statusIcons .success{color: #1bd18e}
#statusContainer #statusIcons .error{color: #f84d4c}

#errorDetails {width: 70%}
#errorDetails.hidden{display: none;}
#errorDetails input[type='checkbox'] { display: none; }
#errorDetails .wrap-collabsible { margin-top: 15px;}
#errorDetails .lbl-toggle { color: #9e9e9e; display: block; font-size: 1.0rem; text-align: right; padding: 1rem; cursor: pointer; transition: all 0.25s ease-out; }
#errorDetails .lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; }
#errorDetails .toggle:checked+.lbl-toggle::before { transform: rotate(90deg) translateX(-3px); }
#errorDetails .collapsible-content { max-height: 0px; overflow: hidden; transition: max-height .25s ease-in-out; }
#errorDetails .toggle:checked + .lbl-toggle + .collapsible-content { max-height: 350px; overflow: scroll; }
#errorDetails .collapsible-content .content-inner { padding: 0 15px; color: #9e9e9e; }

#errorDetails .wrapper{margin-top:5px;}
#errorDetails .wrapper:first{margin-top: 0;}
#errorDetails .title{padding: 2px 5px; background:#ccc; color:#666; font-weight: 600;}
#errorDetails .content {padding-left: 10px;}
#errorDetails ul li span{color:#666; font-weight: 600; padding-right:5px}

@media only screen and (max-width: 600px) {
    #errorDetails {width: 100%}
}