
.sec1{
	//width:500px;
	margin:auto;
	text-align:center;
}
.theimg{
	background:#fff;
	padding:10px;
	text-align:center;
}
#show-img{
	max-width:160px;
	vertical-align:middle;
}
.newimg {
    max-width:160px;
	vertical-align:middle;
}
.upload{
	display:inline-block;
	position:relative;
	padding:30px;
	margin:0;
    width: 100%;
}
#upload-trigger{
	display:block;
	width:100%;
	padding:5px;
	background:#ca7513;
	border-radius:5px;
	color:#fff;
	transition:0.25s;
    margin: 0 auto;
    font-size:14px;
}
.border {
    border: 5px dashed #fff;
    padding: 10px 0;
    margin: 10px;
}
input#upload-img:hover+#upload-trigger{
	background:#9c5e16;
}
input#upload-img{
	opacity:0;
	cursor:pointer;
	position:absolute;
	top:50px;
	left:50px;
	bottom:50px;
	right:50px;
}
#result{
	background:#5e5e5e2b;
	padding:40px 0;
}
#result-continer{
	width:520px;
	margin:auto;
	overflow:auto;
	text-align:left;
}
#result-continer span{
	margin-bottom:5px;
	display:block;
}
.img-preview{
	float:left;
	padding:10px 0;
	max-width:180px;
}
#img-details{
	text-align:left;
	font-size:12px;
	padding-top:10px;
	max-width:180px;
	line-height:1.4;
	word-break:break-all;
	word-break:break-word;
}
#img-name{
	margin-bottom:5px;
}
.code{
	width:310px;
	padding:10px 0;
	float:right;
}
#base64{
	word-break:break-all;
	padding:10px;
	background:#fff;
	height:150px;
	overflow:auto;
	text-align:left;
	//border:solid 1px #ccc;
	width:250px;
	resize:none;
    overflow-x: hidden;
}

.output.form-horizontal {
    background: #5e5e5e2b;
    padding: 30px;
}

form#img2b64 {
    border-top: 1px solid #e8e8e8;
}

.form-control {
    width: 80%;
    height: 44px;
    border-radius: 10px !important;
    padding: 10px 22px;
}

.btn-default {
    color: #fff !important;
    background: #ca7513 !important;
    border-color: #ccc !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px !important;
    border-radius: 10px !important;
    width: 80%;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    color: #ffffff !important;
    background: #9c5e16 !important;
    border-color: #adadad !important;
}

#upload-trigger .fas, #upload-trigger .fa-solid {
    padding: 5px !important;
    color: #fff !important;
    font-size: 25px;
}

select.form-control, input.form-control {
    background: #ca7512;
    color: #fff;
    font-weight: 700;
}


@media (max-width: 767px) {
    .form-control, .btn-default, .btn {
    width: 100%;
    }
    
    #result-continer {
    width: 100%;
    margin: 0 auto;
    overflow: auto;
    justify-content: center;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}
}