.wp-site-blocks {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}
/* .contact-spacer-container{
    display: flex;
    width: 100%;
    min-height: 100vh !important;
    flex-direction: column;
} */
.bottom-page-spacer {
    flex: 1;
}
.toggle-displayed{
    opacity: 0 !important;
    display: none !important;
}
.toggle-displayed.displayed{
    opacity: 1 !important;
    display: block !important;
}
#right-text-h2{
	font-family: Beiruti, Oxanium, Verdana, Geneva, Tahoma, sans-serif !important;
}
.dropdown-toggles{
    display: none;
    flex: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
}
.dropdown-toggles.displayed{
    display: flex;
}


#metadata-dump-ctr{
    display: none; 
    flex-direction: column; 
    flex: 1;
    width: 100%;
}
.centertextclass{
    display: flex;
    justify-content: center;
    align-items: center;
}
.filecompletemessage{
    font-size: 2rem;
    text-align: center;
    color: black;
    font-family: rajdhani, Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 700;

}
#convert-btn-ctr{
    display: none;
    width: 100%;
    height: 40px;
}
#convert-button{
    display: block;
    flex: 1;
    font-size: 1.4rem;
    font-family: Oxanium, Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 700;
    border: none;
    border-top: 4px solid black;
    background-color: rgba(219,149,68,0.88);
    outline: none;
    /* border-left: 2px solid black; */
}
#convert-button:hover{
    border: 2px solid grey;
    cursor: pointer;
}
#convert-button:active{
    border: 4px solid grey;
    background-color: rgba(233, 174, 106, 0.88);
}
#convert-button:focus{
    outline: none;
}
.format-quality-style:hover{
    border: 2px solid grey;
    cursor: pointer;
}
.format-quality-style:active{
    border: 4px solid grey;
    background-color: rgba(233, 174, 106, 0.88);
}
.format-quality-style:focus{
    outline: none;
}

#left-metadata{
    display: none;
    flex: 1;
    width: 100%;
}


.form-container{
    display: flex;
    justify-content: center;
    padding-bottom: 35px;
    width: 100%;
}
.format-rowcontain{
    display: none   ;
    flex-direction: row;
    width: 100%;
    height: 40px;
    /* margin-top: 10px !important;
    margin-bottom: 10px !important;
    gap: 5px !important;
    font-family: Oxanium, Verdana, Geneva, Tahoma, sans-serif !important;
    font-weight: 400 !important; */
    
}
.left-text{
    flex: 1;
}
.format-quality-style:focus {
    outline: none;
}
.format-quality-style{
    display: block;
    height: 40px;
    flex: 1;
    text-align: center;
    font-family: Oxanium, Verdana, Geneva, Tahoma, sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.2rem;
    border: none;
    outline: none;
    border-top: 4px solid black;
    background-color: rgba(219,149,68,0.88);
}
/* .format-rowcontain.active{
    display: flex !important;
} */
.wpforms-field-container input, .wpforms-field-container textarea {
    background: linear-gradient(180deg,rgb(220,149,69) 0%,rgb(216, 179, 136) 100%) !important;

}
.color-gradiant-background-container input:focus{
    border-color: black !important;
} 
.break-word-class{
    word-wrap: break-word !important;    
    overflow-wrap: break-word !important; 
    white-space: normal !important;
}
.mainfront-container{
    animation: uncombine 0.5s ease forwards!important;
    flex-wrap: wrap !important;
    margin-left: 0px !important;
}
.mainfront-container.displayed{
    animation: combine 0.5s ease forwards!important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}
.bothmain-containers{
    min-width: 0 !important; 
}
.left-container{
    border: 5px solid black;
    animation: border-rad-leftReverse 0.5s ease forwards !important;

    /* margin-bottom: 0 !important; */
}
.left-container.displayed{
    animation: border-rad-leftBox 0.5s ease forwards !important;
}
.right-container{
    border: 5px solid black;
    animation: border-rad-rightReverse 0.5s ease forwards !important;

    /* margin-top: 0 !important; */
}
.right-container.displayed{
    animation: border-rad-rightBox 0.5s ease forwards !important;
}

@keyframes uncombine {
    from { 
        gap: 0;
    }
    to {
        gap : 5vw;
    }
}
@keyframes combine {
    from { 
        gap: 5vw;
    }
    to {
        gap : 0;
    }
}
@keyframes border-rad-leftBox{
    from { 
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        border-right: 5px solid black;
    }
    to {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-right: 0 solid black;
        
    }
}
@keyframes border-rad-leftReverse{
    from { 
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-right: 0;
    }
    to {
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        border-right: 5px solid black;
    }
}
@keyframes border-rad-rightBox{
    from { 
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
        border-left: 5px solid black;
    }
    to {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-left: 0;
        
    }
}
@keyframes border-rad-rightReverse{
    from { 
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-left: 0;
    }
    to {
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
        border-left: 5px solid black;

    }
}
/* on small screen, changes look of main tool from row, to column, not the best, but its what im able to do */
@media (max-width: 768px){

.mainfront-container{
    flex-direction: column !important;
    padding: 0 15px 0 15px !important;
}
.bothmain-containers{
    flex: 1 !important;
}
.left-container{
    border: 5px solid black;
    animation: border-bottom-leftBoxR 0.5s ease forwards !important;
}

.left-container.displayed{
    animation: border-bottom-leftBox 0.5s ease forwards !important;
}

.right-container{
    border: 5px solid black;
    animation: border-top-rightBoxR 0.5s ease forwards !important;

}

.right-container.displayed{
    animation: border-top-rightBox 0.5s ease forwards !important;
    background: linear-gradient(360deg,rgb(220,149,69) 0%,rgb(235,216,195) 100%) !important;
}

} 
/* bottomborder animation */
@keyframes border-bottom-leftBox{
    from { 
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        border-bottom: 5px solid black;
    }
    to {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom: 0 solid black; 
    }
}
@keyframes border-bottom-leftBoxR{
    from { 
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom: 0 solid black; 
    }
    to {
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        border-bottom: 5px solid black;
    }
}
/* divider */

/* topborder animation */
@keyframes border-top-rightBox{
    from { 
        border-top-right-radius: 25px;
        border-top-left-radius: 25px;
        border-top: 5px solid black;
    }
    to {
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
        border-top: 0px solid black;        
    }
}
@keyframes border-top-rightBoxR{
    from { 
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
        border-top: 0px solid black;        
    }
    to {
        border-top-right-radius: 25px;
        border-top-left-radius: 25px;
        border-top: 5px solid black;
    }
}
/* divider */

.wp-block-search__input {
    padding-top: 0px !important;
    padding-bottom: 0px !important;

    height: auto !important;
    min-height: unset !important;
}

.wp-block-search__button {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    height: auto !important;
}
/* DROPZONE CSS */

.dropzone{
    border: 4px dashed rgb(110, 104, 98)!important;
    margin-top: 25px !important;
    width: 225px !important;
    height: 225px !important;
    background-color: transparent !important;
    font-family: Oxanium, Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 2rem !important;
    font-weight: 400 !important;
    display: flex !important; 
    align-items: center !important;
    justify-content: center !important;
}
.browse-files{
    transition: 0.2s ease !important;
}
.dropzone:hover .browse-files{
    color:white !important;
    transform: scale(1.05) !important; 
}
.form-info-mobile{
    display: none;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media (max-width: 1024px) {
.dropzone{
    width: 200px !important;
    height: 200px !important;
    font-size: 1.5rem !important;
}
 }
 
@media (min-width: 768px) {
.left-container.mobile #quality-preset{
    border-bottom-left-radius: 20px !important; 
}
.right-container.mobile #convert-btn-ctr #convert-button{
    border-bottom-right-radius: 20px !important; 
}
.form-info-desktop.mobile{
    display: flex;
    width: 100%;
    flex-direction: row;
    /* flex-wrap: wrap; */
    min-height: 100px;
}
.form-info-desktop p{
    width: 50%;
    text-align: center;
    text-justify: center;
    font-family: Oxanium, Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    word-break: break-all;
}
.form-info-mobile p{
    width: 100%;
    text-align: center;
    text-justify: center;
    font-family: Oxanium, Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    word-break: break-all;
}
#convert-button{
    border-left: 2px solid black;
}

#video-format,#audio-format,#image-format{
    border-right: 2px solid black;
}
#left-metadata{
    display: none;
}
#left-metadata.metadata{
    display: none;
}
#left-metadata2{
    display: none;
    flex: 1;
    width: 100%;
}
#left-metadata2.metadata{
    display: flex !important;
}
.is-layout-flex{
    gap: 1.2rem;
}
.single_dash_display{
    display: inline;
}

}
.file-info-desktop.mobile{
    display: flex;
    flex: 1;
    min-height: 200px;
    
}
.form-info-mobile p span, .form-info-desktop p span {
    font-weight: 700;
    color: black;
    font-size: 1.5rem;
}
p.namesizefix span{
    font-size: 1.1rem;
}
@media (max-width: 768px) {
.single_dash_display{
    display: none !important;
}
.is-layout-flex{
    gap: 0.3rem;
}
#left-metadata{
    display: none;
}
#left-metadata.metadata{
    display: flex;
}
#left-metadata2{
    display: none;
}
#left-metadata2.metadata{
    display: none;
}


#video-format,#audio-format,#image-format{
    border-right: none;
}
#convert-button{
    border-left: none;
}


.file-info-desktop.mobile{
    display: none;
}
.form-info-desktop.mobile{
    display: none;
}

.form-info-mobile{
    display: none;
    width: 100%;
    flex-direction: column;
    /* flex-wrap: wrap; */
    min-height: 100px;
    padding: 15px;
}

.form-info-mobile p{
    width: 100%;
    height: max-content;
    text-align: center;
    text-justify: center;
    font-family: Oxanium, Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    word-break: break-all;
}
.dropzone{
    width: 150px !important;
    height: 150px !important;
    font-size: 1.3rem !important;
}
.form-info-mobile.mobile{
    display: flex;
}
/* .less-height-bandaid{
    min-height: 425px !important;
} */
.mainfront-container{
    flex-direction: column !important;
    padding: 0 15px 0 15px !important;
}
.bothmain-containers{
    min-height: 425px !important;
}
#metadata-dump-ctr{
    display: none !important;  
}

.right-container.mobile{
    min-height: 0 !important;
    border-bottom-right-radius: 30px !important;   
    border-bottom-left-radius: 30px !important;   
}
 .right-container.mobile #convert-btn-ctr #convert-button{
    border-bottom-right-radius: 25px !important;   
    border-bottom-left-radius: 25px !important;   
}
}

 
@media (max-width: 576px){
.headertoppadding{
    padding-top: 5px !important;
}
.bothmain-containers{
    min-height: 350px !important;
}
.headertext{
    border-width: 2px !important;
    line-height: 1.1 !important;
    letter-spacing: 6px !important;
    font-size: 1.5rem !important;
}
.dropzone{
    width: 130px !important;
    height: 110px !important;
    font-size: 1rem !important;
}
#convert-button{
    font-size: 1.2rem;
}
.format-quality-style{
    font-size: 1rem;   
}
.form-container{
padding-bottom: 30px;
}
}
.site-title-in-headertitle a{
text-decoration: none !important;
color: inherit !important;
}
.site-title-in-headertitle:hover, .site-title-in-headertitle a:hover {
text-decoration: underline !important;
color: inherit !important;
transform: scale(1.02) !important;
transition: 0.2s ease !important;
border-color: rgb(67, 67, 67) !important;
}