@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap");
*{box-sizing:border-box}
::selection{background:#1467af;color:white}
html,body{min-height:100%}
body{background-color:#1467af;
background-image: url(/gfx/background_2@2x.png);
    background-size: cover;
    background-attachment: fixed;
	text-align:center;font:18px/1.5 "IBM Plex Mono",monospace}
h1, h1 a{color:white;letter-spacing:-0.03em;margin-bottom:0;text-shadow:0 0.25em 0.5em #02090f;    text-decoration: none;}
.desc{color:white;margin-top:0;text-shadow:0 0.25em 0.5em #02090f}
.generator{background-color:rgba(255,255,255,0.8);border:1px solid #0F4C81;border-radius:2em;box-shadow:0 1em 3em -1.25em #0a3153;margin:0 auto 2em;max-width:50vw;padding:1em 2em;
/*    background-image: url(/gfx/background_3@2x.png);*/
    background-size: cover;
     background-attachment: fixed;
}


@media screen and (max-width:900px){.generator{max-width:67vw}}
@media screen and (max-width:700px){.generator{max-width:75vw}}
@media screen and (max-width:500px){
	.generator{max-width:100%;padding:1em .5em;border-radius: 1em}
	.live-time-container {grid-template-columns: repeat(1, 1fr);}
}
section{padding:0.5em}
label{color:#0F4C81;display:block;font-weight:bold;margin-bottom:0.25em;text-align:left;text-shadow:0 1px rgba(255,255,255,0.5);letter-spacing:0.25px}
.download,button,input,textarea,select{border:1px solid #0F4C81;border-radius:50em;height:2em;font:18px/1.5 "IBM Plex Mono",monospace}
.download:focus,button:focus,input:focus,textarea:focus,select:focus;{outline:none;box-shadow:0 0 4px 2px #1467af}
input,textarea,select{background-color:rgba(255,255,255,0.75);box-sizing:content-box;color:#333;text-indent:0.5em}
input[type=text],textarea[type=text]{text-indent:1em}
input{display:inline-block;width:100%}
textarea{border-radius:1em;height:6.5em;padding:0.25em 0.75em;text-indent:0;width:calc(100% - 1.5em);resize: vertical;}
button{background-color:#0F4C81;color:white;font-weight:bold;margin:0.5em;padding:0 0.75em}
button#reset {
    background-color: unset;
    color: #0f4c81;
}
.hide{display:none}

.date-row {display: grid;grid-template-columns: repeat(6, 1fr);}
.date-row input {width: 90%; text-align: center;}
.live-time-container {}
.live-time{border-bottom: 1px solid black;display: block;}
select{overflow: hidden !important;width: 100%;text-overflow: ellipsis;}
.description{margin-top: 0;}

.grid-2{
display: grid;grid-template-columns: repeat(2, 1fr);align-items: center;justify-items: stretch;
}





label{text-align: center}




/*.desc_in_out_puts {display: flex;}*/

p.desc_input, p.desc_output, small {margin:0 auto;color:#757575;text-align: left;font-size: 0.8rem;}
p.desc_input {}
p.desc_output{}

.d-flex{display: flex;}
.d-flex.space-between{justify-content: space-between}
.d-flex.align-center{align-items: center;}


.d-flex label {text-align: center;}
.d-flex input {width: 90%; text-align: center;}
.input-date {width: 100%;}
.live-time-container h4 {margin-bottom: 0.2rem;}
.btn-sm{
    color: #eb7a45;
    font-weight: 900;
    border-radius: .8rem;
    margin: 0.5em;
    padding: 0 0.75em;
    border: 0.1rem solid #0F4C81;
    font-size: 0.9rem;
    cursor: pointer;
}
.btn-sm:hover{
box-shadow: 0px 0px 2px 2px #a7b5c1;
}
.btn-sm:active{
box-shadow: 0px 0px 2px 2px #fff;
}


.btn-sm.gray {
    color: #75757566;
    font-weight: 900;
    border: 0.2rem solid #75758663;
}
#output_pre, #info p.info {
	font-size: 1rem;
    background-color: #c5d1da5c;
    border: 1px solid #77889945;
    border-radius: 0.5rem;
}
#assist_example{line-height: 1;margin-top: 0.5rem;}
#assist{
/*    display: flex;
    justify-content: space-between;
    align-items: center;*/
}
.o {
	color:#f06d06;
	font-weight: 900;
	-webkit-text-stroke: .01rem #ff7000;
	-webkit-text-fill-color: #f06d06;
}

.b {color:#0F4C81}
.w {color:#fff}




.nox-share-icon{
    background-image: url('//cal.noxrocks.com/gfx/share_sprite.png');
    width: 1.5rem;
    height: 1.5rem;
    background-size: cover;
    background-repeat: no-repeat;

    border: 1px solid #1467af;
    padding: 0.5em;
    border-radius: 0.3em;

}
.nox-share-icon:hover{
    box-shadow: 0px 0px 4px #1467af;
}
.nox-icon-share {
    background-position-x: -1px;
    cursor: alias;
}
.nox-icon-copy {
    background-position-x: -44px;
        cursor: copy;
}
.icon-holder{
    display: flex;
    justify-content: space-evenly;
    width: 4rem;
}