/* custom manul style */
.bg-green { background-color: #058248; }
.green-color { color: #058248; }
.input-bg { background-color: #DAFDEC; border: none; }
.custom-font-size { font-size: 15px; }
.font-weight-bold { font-weight: 600; }

/**
    Login Style Blog
**/
body {
    font-family: 'Inria Serif';
    background-color: #DAFDEC;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px;
}
.customer-camdigikey-instruction-container {
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
    background-color: #058248;
    border-radius: 10px 10px 6px 6px;
}
.customer-camdigikey-wrapper {
    margin-top: 5px;
    background-color: #ffff;
    border-radius: 6px;
}
.col-md-6-left-custom{
    padding: 10px 10px 15px 10px;
}
.col-md-6-side-custom{
    background-color: #DAFDEC;
    border-radius: 0px 0px 6px 6px;
}

/* 
    Left side control blog 
*/
.title-text {
    font-size: 18px;
    font-weight: 600;
    color: #2B2A2A;
}
.image-left-side-content-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    margin: auto;
}
.image-left-side-content-wrapper img { width: 100%; }

/* 
    Right side control blog 
*/
.customer-main-right-side-container{
    background-color: rgba(255, 255, 255, 0.4);
    padding: 10px 10px 15px 10px;
    border-radius: 6px;
    height: 100%;
}
.customer-header-logo-wrapper{
    display: flex;
    flex-wrap: wrap;
}
.customer-custom-col-left{
    width: 55%;
    max-width: 55%;
}
.customer-custom-col-right{
    width: 45%;
    max-width: 45%;
}
.customer-custom-col-left>.logo-image-wrapper>img{ width: 40px; }
.customer-content-wrapper>.green-color{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}
.customer-content-wrapper>a{
    color: white;
    text-decoration: none;
    background-color: #058248;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 15px;
    padding: 5px;
    width: 150px;
}
.customer-content-wrapper>a>.text{ 
    font-size: 14px;
    margin-left: 10px;
} 
.customer-content-wrapper>.customer-camdigikey-instruction{
    background-color: #058248;
    color: white;
    padding: 10px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 14px;
}
.customer-content-wrapper>.customer-camdigikey-instruction>.title{ font-size: 18px; }

/* generate qr page */
.camdigikey-title-text-wrapper{
    display: flex;
    align-items: center;
}
.camdigikey-title-text-wrapper>.camdigikey-logo-image-wrapper>img{ width: 23px; }
.camdigikey-title-text-wrapper>.text-description{
    margin-left: 10px;
    color: #2F5AE2;
    font-size: 17px;
    font-weight: 600;
}
.camdigikey-body-content-wrapper>.customer-camdigikey-title{
    font-size: 19px;
    font-weight: 600;
}
.camdigikey-body-content-wrapper>.customer-camdigikey-description{
    font-size: 14px;
    margin-top: 12px;
}
.camdigikey-body-content-wrapper>.camdigikey-qr-wraper{
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    margin: auto;
    margin-top: 12px;
    width: 180px;

}
.camdigikey-body-content-wrapper>.camdigikey-qr-wraper>img{ width: 100%; }
.camdigikey-body-content-wrapper>.customer-input-check-remember{ 
    margin-top: 12px;
    color: #717171;
    font-size: 14px;
}
.camdigikey-body-content-wrapper>.text-description-wrapper{ 
    margin-top: 12px;
    font-size: 14px;
}

/* ################
    Media Query
################### */
/* =====  Large Laptop View (!) Width ( 768px <-> 1024px ) (!) ===== */
@media only screen and ( min-width: 768px ) {
    body { height: 100vh; padding: 0; }
    .col-md-6-left-custom{ padding: 15px 20px 20px; }
    .col-md-6-side-custom{ border-radius: 0px 6px 6px 0px; }
    .customer-main-right-side-container { padding: 15px 20px 20px; }
    .customer-camdigikey-instruction-container { width: 700px; }
    .image-left-side-content-wrapper { width: 100%; height: 100%; }
    .customer-custom-col-left>.logo-image-wrapper>img{ width: 50px; }
    .row-custom{
        display: flex;
        justify-content: space-between;
    }
    .customer-content-wrapper>.customer-camdigikey-instruction>.title{ font-size: 20px; }
    .title-text { font-size: 22px; }
    .customer-content-wrapper>.customer-camdigikey-instruction,
    .camdigikey-body-content-wrapper>.customer-camdigikey-description,
    .camdigikey-body-content-wrapper>.customer-input-check-remember,
    .camdigikey-body-content-wrapper>.text-description-wrapper{ font-size: 16px; }
    .customer-content-wrapper>a{
        padding: 8px;
        width: 180px;
    }
    .customer-content-wrapper>.customer-camdigikey-instruction{padding: 10px 20px 15px 20px; }
    .customer-content-wrapper>.green-color,
    .camdigikey-body-content-wrapper>.customer-camdigikey-title{ font-size: 22px; }

    /* generate qr page */
    .camdigikey-title-text-wrapper>.text-description{ font-size: 20px; }
    .camdigikey-body-content-wrapper>.customer-camdigikey-description{ margin-top: 5px; }
}

/* =====  Large Laptop View (!) Width ( 1024px <-> 1920px ) (!) ===== */
@media only screen and ( min-width: 1024px ) {
    /* with of login container */
    .customer-camdigikey-instruction-container{ width: 850px; }
    .customer-content-wrapper{ margin-top: 15px; }
    .customer-content-wrapper>.customer-camdigikey-instruction{ margin-top: 50px; }
    .customer-content-wrapper>a{ margin-top: 35px; }
}