﻿.voucher-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
     padding: 15px;
}

.voucher-container {
    width: 100%;
    max-width: 960px;
    height: 100%;
    border: 1px solid #696969;
    padding: 10px;
    display: grid;
    grid-template-rows: 1fr;
    align-items: center;
}

.voucher-header {
    display: flex;
    justify-content: end;
    gap: 10px;
    align-items: center;
    padding-bottom: 8px;
    padding-right: 10px;
}

.voucher-cancel-btn {
    width: 65px;
    height: 35px;
    border-radius: 5px;
    background-color: #696969;
    font-size: 11px;
    color: #fff;
    border: none;
}

.voucher-save-btn {
    width: 65px;
    height: 35px;
    border-radius: 5px;
    background-color: #FFB606;
    font-size: 11px;
    color: #000;
    border: none;
}

.voucher-content {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 25px auto auto auto;
    align-items: center;
}

    .voucher-content h3 {
        margin-left: 5px;
        font-weight: bolder;
        align-self: start;
    }

.voucher-form {
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    margin-top: 15px;
}

.voucher-input-cont {
    display: grid;
    grid-template-rows: 25px 1fr;
    align-items: center;
}

    .voucher-input-cont label {
        font-size: 12px;
        text-transform: uppercase;
    }

    .voucher-input-cont input {
        border: 1px solid #DCDCDC;
        padding: 5px;
        transition: all .5s ease;
        text-transform: uppercase;
        width: 100%;
    }

        .voucher-input-cont input:hover {
            border: 1px solid #696969;
        }

.voucher-display-cont {
    width: 100%;
    height: 100%;
    margin-top: 25px;
    /*margin-bottom: 10%;*/
    padding-bottom: 15px;
    border-bottom: 1px dashed #696969;
}

.voucher-display-info {
    display: grid;
    grid-template-columns: 1fr 150px;
    border: 1px solid #696969;
}

.voucher-description-cont {
    width: 100%;
    height: 100%;
    align-items: center;
    display: grid;
    grid-template-rows: 35px 1fr;
}

    .voucher-description-cont:first-child {
        border-right: 1px solid #696969;
    }

.voucher-description-header-cont {
    width: 100%;
    height: 100%;
    background-color: #DCDCDC;
    display: flex;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    align-items: end;
    padding-bottom: 8px;
}

.voucher-description-body {
    width: 100%;
    /* height:85px;*/
    /*margin-bottom:15px;*/
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-top: 5px;
}

    .voucher-description-body small {
        font-size: 12px;
    }

    .voucher-description-body span {
        font-weight: 600;
        font-size: 15px;
    }

.in-words {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 15px;
}

    .in-words h5 {
        font-size: 11px;
    }

    .in-words span {
        font-style: italic;
        font-size: 13px;
    }

.voucher-footer-cont {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 155px;
}

.voucher-prepared-approved-cont {
    display: grid;
    grid-template-rows: 25px 1fr;
    width: auto;
}

    .voucher-prepared-approved-cont .user-name {
        border-bottom: 1px solid #696969;
        font-size: 12px;
        width: 185px;
        text-align: center;
        padding: 0 5px;
    }

    .voucher-prepared-approved-cont span {
        font-size: 13px;
        font-weight: 600;
        text-align: center;
    }

.image-frame {
    height: 150px;
    background: #e7e7e7;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
}

.attachment-file {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

    .attachment-file img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .attachment-file label {
        font-size: 12px;
        color: #696969;
    }

.entry-item-time {
    font-size: 11px;
    color: #999 !important;
    margin: 0;
}


@media screen and (max-width: 767px) {
    .voucher-display-info {
        grid-template-columns: 2fr 1fr;
    }

}