.row {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.col {
    margin: 20px;
}


#genrator_list .btn {
    width: 100%;
}

.flex.flex-col.md\:flex-row.justify-between.md\:items-end.mb-4.ng-star-inserted {
    display: flex;
    justify-content: space-between;
}
button.copy_text {
background: none;
border: none;
position: absolute;
margin-top: 12px;
margin-left: -50px;
font-size: 27px;
}

/* tooltip */
.copy_text:hover::after, .copy_text:hover::before {
opacity: 1;
}
.copy_text::after, .copy_text::before {
transform: translate3d(-50%,calc(-100% - 16px),0);
}
.tooltip {
position: relative;
display: inline-block;
z-index: 1 !important;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 80px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 6px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left:-35px;

/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}

.btn-outline-dark:hover {
    color: white !important;
}

.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip {
position: relative;
display: inline-block;
}




.tooltip .tooltiptext {
visibility: hidden;
width: 80px;
background-color: black;
color: #fff;
font-size: 14px;
text-align: center;
border-radius: 6px;
padding: 5px 6px;

/* Position the tooltip */
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip{
opacity: 1 !important;
}
.bg-card.shadow.rounded.mb-8.p-4 {
    display: flex;
    background-color: #3079f2;
}
#color_value {
 padding-left: 26px;
}
.form-group {
    margin-bottom: 12px;
    text-align: start;
}
.row {
    margin-bottom: -30px;
}
div#genrator_list {
    margin-bottom: 12px;
}
label{
    width: 100%;
    text-align: start;
}
h1 {
    text-align: center;
    padding-top: 10px;
}
.bg-card.dark.shadow.rounded.mb-4.p-4.ng-star-inserted {
    background-color: #3079f2;
}

h3.font-bold.text-3xl.mt-0.mb-4.ng-star-inserted {
    text-align: start;
}
h3.font-bold.text-3xl.m-0 {
    text-align: start;
    margin-top: 15px !important;
}
input#preview_button {
    margin-top: 8px !important;
}
label#radiolable {
    margin-left: 10px !important;
}.form-control {
    text-align: start;
}
input[type="checkbox"] {
    margin-top: 7px;
}
dialog {
    margin-left: 23px;
    margin-top: -17px;
}
form {
    background: rgba(255, 255, 255, 0.121);
    padding: 60px;
}
.container-fluid{
    background-color: rgba(241, 245, 249, 0.121);
}
#radio_preview {
    display: flex;
}
#header_img{
    width: 30px;
    height: 30px;
}
h2{
    font-weight: 300;
    color: #212121;
    text-align: center;
}
.checkbox_div {
    display: flex;
}
p.md\:mb-0 {
    margin-top: 12px;
}

@media only screen and (max-width: 768px){
    .row {
        display: flex;
        flex-direction: column;
    }
}
@media only screen and (max-width: 666px){
    div#preview_div {
        width: 500px !important;
    }
}
@media only screen and (max-width: 600px){
    div#preview_div {
        width: 200px !important;
    }
}
@media only screen and (max-width: 300px){
    div#preview_div {
        width: 100px !important;
    }
}
.bg-card.dark.shadow.rounded.mb-4.p-4.ng-star-inserted {
    text-align: start;
}