@media screen and (min-width: 769px), print {
    .whole-container .columns:not(.is-desktop) {
        display: flex
;
    }
}
.w-container > form > h3{
    width: 100%;
    margin-bottom: 20px;
    font-size: 1.3rem !important;
    text-transform: capitalize;
    margin-top: 0px !important;
    }

.whole-container .columns:not(:last-child) {
    margin-bottom: calc(1.5rem - .75rem);
}
.whole-container form {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: 30px;
}
.whole-container .columns {
    margin-left: -.75rem;
    margin-right: -.75rem;
    margin-top: -.75rem;
}

.whole-container .column {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: .75rem;
}

.whole-container .label:not(:last-child) {
    margin-bottom: .5em;
}

.whole-container .label {
    color: #363636;
    display: block;
    font-size: 1rem;
    font-weight: 700;
}
.whole-container .input, .whole-container .textarea {
    box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
    max-width: 100%;
    width: 100%;
}
.whole-container .input, .whole-container .select select, .whole-container .textarea {
    background-color: #fff;
    border-color: #dbdbdb;
    border-radius: 4px;
    color: #363636;
}
.whole-container .button, .whole-container .file-cta, .whole-container .input, .whole-container .select select, .whole-container .textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: none;
    display: inline-flex;
    font-size: 1rem;
    height: 2.5em;
    justify-content: flex-start;
    line-height: 1.5;
    padding-bottom: calc(.5em - 1px);
    padding-left: calc(.75em - 1px);
    padding-right: calc(.75em - 1px);
    padding-top: calc(.5em - 1px);
    position: relative;
    vertical-align: top;
}

.whole-container .control {
    box-sizing: border-box;
    clear: both;
    font-size: 1rem;
    position: relative;
    text-align: inherit;
}

.whole-container .select {
    display: inline-block;
    max-width: 100%;
    position: relative;
    vertical-align: top;
}

.whole-container .select.is-fullwidth {
    width: 100%;
}

.whole-container .select.is-fullwidth {
    width: 100%;
}

.whole-container .control.has-icons-right .input, .whole-container .control.has-icons-right .select select {
    padding-right: 2.5em;
}

.whole-container .control.has-icons-right .icon.is-right {
    right: 0;
}

.whole-container .control.has-icons-right .icon {
    color: #dbdbdb;
    height: 2.5em;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 2.5em;
    z-index: 4;
}

.whole-container .icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem;
}

.whole-container span {
    font-style: inherit;
    font-weight: inherit;
}

.whole-container .field.has-addons .control:last-child:not(:only-child) .button, .whole-container .field.has-addons .control:last-child:not(:only-child) .input, .whole-container .field.has-addons .control:last-child:not(:only-child) .select select {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.whole-container .select select {
    cursor: pointer;
    display: block;
    font-size: 1em;
    max-width: 100%;
    outline: 0;
}
.whole-container .select select:not([multiple]) {
    padding-right: 2.5em;
}
.whole-container .select:not(.is-multiple):not(.is-loading)::after {
    border-color: #485fc7;
    right: 1.125em;
    z-index: 4;
}
.whole-container .navbar-link:not(.is-arrowless)::after, .whole-container .select:not(.is-multiple):not(.is-loading)::after {
    border: 3px solid transparent;
    border-radius: 2px;
    border-right: 0;
    border-top: 0;
    content: " ";
    display: block;
    height: .625em;
    margin-top: -.4375em;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: rotate(-45deg);
    transform-origin: center;
    width: .625em;
}

.whole-container .input, .whole-container .select select, .whole-container .textarea {
    background-color: #fff;
    border-color: #dbdbdb;
    border-radius: 4px;
    color: #363636;
}

.whole-container .field.has-addons {
    display: flex;
    justify-content: flex-start;
}

.whole-container .field.has-addons .control.is-expanded {
    flex-grow: 1;
    flex-shrink: 1;
}

.whole-container .field.has-addons .control:not(:last-child) {
    margin-right: -1px;
}

.whole-container .buttons.is-centered {
    justify-content: center;
}

.whole-container .buttons.is-centered:not(.has-addons) .button:not(.is-fullwidth) {
    margin-left: .25rem;
    margin-right: .25rem;
}
.whole-container .buttons .button {
    margin-bottom: .5rem;
}
.whole-container .button.is-primary {
    background-color: #00d1b2;
    border-color: transparent;
    color: #fff;
}
.whole-container .button {
    background-color: #fff;
    border-color: #dbdbdb;
    border-width: 1px;
    color: #363636;
    cursor: pointer;
    justify-content: center;
    padding-bottom: calc(.5em - 1px);
    padding-left: 1em;
    padding-right: 1em;
    padding-top: calc(.5em - 1px);
    text-align: center;
    white-space: nowrap;
}
.whole-container .checkbox, .whole-container .radio {
    cursor: pointer;
    display: inline-block;
    line-height: 1.25;
    position: relative;
}
.whole-container .select:not(.is-multiple):not(.is-loading)::after {
    border-color: #485fc7;
    right: 1.125em;
    z-index: 4;
}
.whole-container .select.is-fullwidth select {
    width: 100%;
}
.whole-container .buttons.is-centered {
    justify-content: center;
}

.whole-container .my-0 {
    margin-top: 0!important;
    margin-bottom: 0!important;
}

 .whole-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.whole-container .w-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.whole-container .columns.tabelPreview {
    margin-top: 30px;
    overflow: auto;
    max-height:300px;
    width: 100%;
}
.whole-container .columns.resultedTableHTML {
    width: 100%;
    margin-top: 20px;
}

.whole-container .columns.resultedTableHTML textarea#generatedCode {
    min-height: 350px;
}
.whole-container button.button.is-medium {
    background: linear-gradient(45deg, #b21e1e, #e83434) !important;
    color:#fff;
    transition: 0.3s ease-in-out;
   
}
.whole-container button.button.is-medium:hover {
     background: linear-gradient(45deg, #f11414, #f11414) !important;
}

@media(min-width:992px) and (max-width:1199px){
.whole-container .columns.d-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
    }

@media(max-width:767px){
   .whole-container form {
    width: 100%;
}
.whole-container .w-container {
    max-width: 540px;
    width: 100%;
    padding: 0 15px;
} 
    .whole-container .columns.tabelPreview {
    padding: 0 15px;
    width: 100%;
    max-width: 540px;
}
    .whole-container .columns.tabelPreview > .column{
        overflow:scroll;
    }
}
@media(max-width:767px){
.whole-container .columns.dFlex:not(.d-grid) {
    display: flex;
}
.whole-container p.control.is-expanded {
    margin-bottom: 0;
}
.whole-container .w-container form {
    padding: 15px;
}
    }
@media(max-width:545px){
   .whole-container .columns.dFlex.col6 {
    flex-direction: column;
}
  .whole-container  p.control.has-icons-right {
    margin-bottom: 0;
}
}

@media(max-width:465px){
   .whole-container p.control {
    margin-bottom: 0;
}
.whole-container .columns.dFlex.col3 {
    flex-direction: column;
}
}


@media(max-width:426px){
   .whole-container .columns.dFlex.col4 , .whole-container .columns.dFlex.col5 {
    flex-direction: column;
}
}

.labelCopyDiv {
    display: flex;
    justify-content: space-between;
}
.labelCopyDiv img {
    width: 25px;
    height: 25px;
    cursor: pointer;
}