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

.col {
    margin: 2%;
}

#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: #ffffff1f;
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;
}

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

.tooltip .tooltiptext {
visibility: hidden;
width: 80px;
background-color: black;
color: #ffffff1f;
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: #ffffff1f;
}
#color_value {
 padding-left: 26px;
}
.form-group {
    margin-bottom: 12px;
}
.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: #ffffff1f;
}

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;
}
#preview_button{
    color: #212121 !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: #ffffff1f;
    padding: 60px;
}
.container-fluid{
    background-color: #ffffff32;
}
#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;
}

.form-control{
    background-color: #3d3d3d;
}
.form-control:focus{
    background-color: #292929;
}
#date_time_value{
    color: #212121 !important;
}