@charset "UTF-8";

/* general */
html {
    color: #CCC;
    background-color: #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

button {
    font-size: larger;
    color: mediumseagreen;
    background-color: #666;
    padding: 0.5em 2em;
    border: 1px solid #555;
    border-radius: 8px;
    cursor: pointer;
    width: max-content;
}
button:hover {
    color: mediumspringgreen;
    background-color: #444;
    border-color: #095;
}
button:active {
    color: #222;
    background-color: seagreen;
    border-color: mediumseagreen;
}

a, a:visited {
    color: cornflowerblue;
    text-decoration: none;
}
a:hover {
    color: lightskyblue;
    text-decoration: solid;
}
a:active {
    color: aqua;
    text-decoration: solid;
}
/* syntax highlight */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;

    /* your custom style here */
}
/* for block of code */
.hljs-ln-code {
    padding-left: 10px;
}
.hljs-ln td {
    padding: 0 4px !important;
}

code[class*=language-], pre[class*=language-] {
    line-height: 1.2 !important;
}
/* my css */
.container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: space-between;
    justify-content: space-around;
    align-items: stretch;
    margin: 1em;
}
.less-gap-top {
    margin-top: 0.2em !important;
}
.less-gap-bottom {
    margin-bottom: 0.2em !important;
    padding-bottom: 0em !important;
}
.more-margin-vert {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}
.more-padding-vert {
    padding-top: 1.5em !important;
    padding-bottom: 1.5em !important;
}
.code {
    white-space: pre-wrap;
    background-color: #222;
    font-family: 'Times New Roman', Times, serif;
}
.codeblock {
    width: 100%;
}
.button,.button:visited {
    border: 1px solid #222;
    background-color: #555;
    border-radius: 8px;
    padding: 0.2em 0.5em;
    margin: 0.1em 0.25em;
    text-decoration: none;
    color: skyblue;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.button:hover {
    background-color: #66a;
    color: aliceblue;
    text-decoration: none;
    border: 1px solid #777;
}
.button:active {
    background-color: #779;
    border: 1px solid #ccf;
    color: royalblue;
    text-decoration: none;
}
.head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
    padding: 1em;
}
.output {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0.5em;
}
.output-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25em;
    border-top: 1px dashed #999;
}
.header {
    display: flex;
    align-content: space-around;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
    padding: 0.25em;
    width: 100%;
}
.header-text {
    display: flex;
    padding: 0 1em;
}
.header-buttons {
    display: flex;
    padding: 0 1em;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    width: max-content;
}
.tail {
    display: flex;
    justify-content: center;
    padding: 0.5em;
}
.curv {
    padding: 0.5em;
    margin: 0.25em;
    border: 1px solid #555;
    border-radius: 12px;
}
.input-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-evenly;
    align-items: center;
}
.feature-block {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    justify-content: space-around;
    align-items: flex-start;
    flex-grow: 1;
}
.flex-column {
    flex-direction: column;
}
#password, .input-text {
    background-color: #444;
    color: #fff;
    font-size: 105%;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 0.25em;
}
#password {
    width: 96ex;
    padding: 0.5em 1em;
}
.input-text:disabled {
    background-color: #433;
    color: #988;
}
.input-drop {
    background-color: #555;
    color: #fff;
    font-size: 102.5%;
    padding: 0.25em 1em;
    border: 1px solid #555;
    border-radius: 8px;
}
.hidden {
    display: none;
}

/* checkbox */
.badge {
	/*background-color: #f2eee0;*/
	display: inline;
	/*padding: 3px 8px;*/
	margin: 0.15em 0.25em;
	border-radius: 4px;
}

.toggler-wrapper {
    display: flex;
    cursor: pointer;
    position: relative;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
}

.toggler-wrapper input[type="checkbox"] {
	display: none;
}

.toggler-wrapper input[type="checkbox"]:checked+.toggler-slider {
	background-color: seagreen;
}

.toggler-wrapper .toggler-slider {
	background-color: #777;
	position: relative;
	border-radius: 100px;
	top: 0;
	left: 0em;
	width: 3em;
	height: 1.33em;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
}

.toggler-wrapper .toggler-knob {
	position: absolute;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
}

.toggler-wrapper.style-1 input[type="checkbox"]:checked+.toggler-slider .toggler-knob {
	left: calc(100% - 1.3em);
    background-color: lightgreen;
}

.toggler-wrapper.style-1 .toggler-knob {
	width: calc(1.1em);
	height: calc(1.1em);
	border-radius: 50%;
	left: 0.2em;
	top: 0.1em;
	background-color: #ccc;
}
/* deploys github */
[id*=codeblock_deploy] {
    background-color: #465 !important;
}
[id*=code_deploy] {
    background-color: #2d302d !important;
}
[id*=headertext_deploy] {
    color: #efe;
}
[id*=headertext_deploy]::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f09b";
    display: inline;
    padding-right: 0.5em;
    font-size: x-large;
}
[id*=button_deploy] {
    color: #cec !important;
    background-color: #465 !important;
}
[id*=button_deploy]::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f09b";
    display: inline;
    padding-right: 0.5em;
    margin-top: 0.15em;
}

/* composes docker */
[id*=codeblock_docker]:not([id*=db]) {
    background-color: #446 !important;
}
[id*=code_docker]:not([id*=db]) {
    background-color: #2d2d33 !important;
}
[id*=headertext_docker]:not([id*=db]) {
    color: #eef;
}
[id*=headertext_docker]:not([id*=db])::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f395";
    display: inline;
    padding-right: 0.5em;
    font-size: x-large;
}
[id*=button_docker]:not([id*=db]) {
    color: #bdf !important;
    background-color: #346 !important;
}
[id*=button_docker]:not([id*=db])::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f395";
    display: inline;
    padding-right: 0.25em !important;
}

/* composes database */
[id*=codeblock_docker][id*=db] {
    background-color: #554 !important;
}
[id*=code_docker][id*=db] {
    background-color: #30302d !important;
}
[id*=headertext_docker][id*=db] {
    color: #fee;
}
[id*=headertext_docker][id*=db]::before {
    font-family: "Font Awesome 6 Free";
    content: "\f1c0";
    display: inline;
    padding-right: 0.25em;
    font-size: x-large;
}
[id*=button_docker][id*=db] {
    color: #fdd !important;
    background-color: #654 !important;
}
[id*=button_docker][id*=db]::before {
    font-family: "Font Awesome 6 Free";
    content: "\f1c0";
    display: inline;
    padding-right: 0.25em;
}
/* dockerfiles */
[id*=codeblock_][id*=Dockerfile] {
    background-color: #456 !important;
}
[id*=code_][id*=Dockerfile] {
    background-color: #2d2d33 !important;
}
[id*=headertext_][id*=Dockerfile] {
    color: #def;
}
[id*=headertext_][id*=Dockerfile]::before {
    font-family: "Font Awesome 6 Free";
    content: "\f15c";
    display: inline;
    padding-right: 0.25em;
    font-size: x-large;
}
[id*=button_][id*=Dockerfile] {
    color: #cdf !important;
    background-color: #456 !important;
}
[id*=button_][id*=Dockerfile]::before {
    font-family: "Font Awesome 6 Free";
    content: "\f15c";
    display: inline;
    padding-right: 0.25em;
}


/* all other */
[id*=codeblock_] {
    background-color: #667 !important;
}
[id*=code_] {
    background-color: #2d2d2d !important;
}
[id*=headertext_] {
    color: #ccc;
}
[id*=headertext_]::before {
    font-family: "Font Awesome 6 Free";
    content: "\f1c9";
    display: inline;
    padding-right: 0.25em;
    font-size: x-large;
}
[id*=button_] {
    color: #ccc;
    background-color: #556;
}
[id*=button_]::before {
    font-family: "Font Awesome 6 Free";
    content: "\f1c9";
    display: inline;
    padding-right: 0.25em;
}
[id*=button_]:hover {
    filter:brightness(1.2) saturate(1.3) !important;
}
[id*=button_]:active {
    filter:brightness(0.8) saturate(0.7) !important;
}
.invis {
    opacity: 0;
    font-size: 1%;
}
.opossum {
    background-image: url('opossum.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 6em;
    height: 6em;
    opacity: 0.1;
}
.opossum:hover {
    opacity: 1;
}
.red {
    background-color: #711;
    color: #e31;
    border: 2px solid #922;
    padding: 1em 1em;
}
.red::before,
.red::after {
    font-family: "Font Awesome 6 Free";
    content: "\f071";
    /* display: flex; */
    font-size: 1.5em;
    padding: 1em;
}
.version {
    color:#555;
    font-size: small;
    padding: 2em;
}
.version:hover {
    color: #7af;
}
.zip {
    color:palegoldenrod;
    background-color: #775;
}
.zip:hover {
    color: #ffc;
    background-color: #997;
    border-color: #cc9;
}
.zip:active {
    color: goldenrod;
    background-color: #552;
    border-color: #ff9;
}
.zip::before {
    font-family: "Font Awesome 6 Free";
    content: "\f1c6";
    display: flex;
    font-size: 2em;
    padding-right: 0.5em;
}
.alist {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: stretch;
    flex-basis: 75%;
}
.aitem {
    display: flex;
    flex: 1 1 0px;
    flex-grow: 1;  
    flex-basis: 20%;
}
.block-button {
    width: 9ch;
}
.block-button:active {
    color: mediumseagreen;
    background-color: seagreen;
}
.top {
    width: 9ch;
}
.top::before {
    font-family: "Font Awesome 6 Free";
    content: "\f106";
    display: flex;
    font-size: 1.5em;
    padding-right: 0.5em;
    opacity: 0.5;
    width: 2ch;
}
.top:active::before {
    font-family: "Font Awesome 6 Free";
    content: "\f102";
    display: flex;
    font-size: 1.5em;
    padding-right: 0.5em;
    opacity: 1;
    width: 2ch;
    color: palegreen;
}
.bottom {
    width: 9ch;
}
.bottom::before {
    font-family: "Font Awesome 6 Free";
    content: "\f107";
    display: flex;
    font-size: 1.5em;
    padding-right: 0.5em;
    opacity: 0.5;
    width: 2ch;
}
.bottom:active::before {
    font-family: "Font Awesome 6 Free";
    content: "\f103";
    display: flex;
    font-size: 1.5em;
    padding-right: 0.5em;
    opacity: 1;
    width: 2ch;
    color: palegreen;
}
.download {
    width: 32ch;
}
.download::before {
    font-family: "Font Awesome 6 Free";
    content: "\f56d";
    display: flex;
    font-size: 1.5em;
    padding-right: 0.5em;
    opacity: 0.5;
    width: 2ch;
}
.download:active::before {
    font-family: "Font Awesome 6 Free";
    content: "\e5a0";
    display: flex;
    font-size: 1.5em;
    padding-right: 0.5em;
    opacity: 1;
    width: 2ch;
    color: palegreen;
}
.copy {
    width: 12ch;
}
.copy::before {
    font-family: "Font Awesome 6 Free";
    content: "\f0c5";
    display: flex;
    font-size: 1.5em;
    padding-right: 0.5em;
    opacity: 0.5;
    width: 2ch;
}
.copy:active::before {
    font-family: "Font Awesome 6 Free";
    content: "\f14a";
    display: flex;
    font-size: 1.5em;
    padding-right: 0.5em;
    opacity: 1;
    width: 2ch;
    color: palegreen;
}
.back {
    align-self: center;
    background-color: #731 !important;
    color: #e71 !important;
}
.back:hover {
    background-color: #942 !important;
    color: #f94 !important;
    border-color: #f83 !important;
}
.back:active {
    background-color: #510 !important;
    color: #841 !important;
    border-color: #fa5 !important;
}
.back::before {
    font-family: "Font Awesome 6 Free";
    content: "\f04a";
    display: flex;
    font-size: 2em;
    padding-right: 0.5em;
}
.logout::before {
    content: '';
}
.logout::after {
    font-family: "Font Awesome 6 Free";
    content: "\f2f5";
    display: flex;
    font-size: 2em;
    padding-left: 0.5em;
}
.login::before {
    content: '';
}
.login::after {
    font-family: "Font Awesome 6 Free";
    content: "\f2f6";
    display: flex;
    font-size: 2em;
    padding-left: 0.5em;
}
.save::before {
    content: '';
}
.save::after {
    font-family: "Font Awesome 6 Free";
    content: "\f0c7";
    display: flex;
    font-size: 2em;
    padding-left: 0.5em;
}