/*  Style for the tool page */

.toolMain{
    display: flex;
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
}

/*  center and pad the main title */
.toolMain h2{
    display: flex;
    justify-content: center;
    padding: 2%;
    width: 100%;
}

/*  ----------------------------------------- */
/*  ----------------------------------------- */
/*  TOP ROW */
#toolTopRow{
    display: flex;
    width: 100%;
    justify-content: space-around;
    flex-direction: row;
}

/*  ----------------------------------------- */
/*  Conversion Card*/
/*  Width  */
#conversionCard{
    width: 20%;
}

/*  center parts of card-body */
#conversionCard .card-body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}


/*  ----------------------------------------- */
/*  control dropzone layout and alignment */
#dropZone {
    border: 2px dashed #2170ad;
    border-radius: 25px;
    background-color: rgb(218, 237, 243);

    width: 20%;
    height: 200px;
    padding: 8px;
    text-align: center;
    font-size: 18px;

    display: flex;
    justify-content: space-around;
    flex-direction: column;

}

/*  no display file input */
.file-input {
    display: none;
}

/*  color for first part of drop zone label */
.file-input-label{
    color: #2170ad;
    text-decoration: none;
}

/*  color for link in drop zone */
.file-input-link {
    color: #2170ad;
    text-decoration: underline;
    cursor: pointer;
}

/*  width for div holding img in drop zone */
#dropZoneImg{
    width: 100%;  
}

/* set img width comparted to zone width  */
#dropZoneImg img{
    width: 30%;
}
/*  ----------------------------------------- */

/*  information panel styling  */
#informationPanel{
    width: 50%;
}

/*   */






/*  ----------------------------------------- */