.videoFrameQr {
    width: 400px;
    position: absolute;
}

.columnCard {
    float: left;
    padding: 0 0px;
}

.rowCard {
    display: table;
    width: 100%;
}

.cardInTableMedium {
    width: 100%;
    display: grid;
}

.cardInTableFull {
    width: 100%;
    display: grid;
}

.rowCard:after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 600px) {
    .columnCard {
        display: block;
        margin-bottom: 20px;
    }
}

@media(max-width: 488px) {
    .videoFrameQr {
        width: 320px;
    }

    .qrScannerContainer {
        width: 320px !important;
        height: 240px !important;
    }

    .responsiveVideo {
        width: 320px !important;
        height: 240px !important;
        border-left: 43px solid rgb(0 0 0 / 44%) !important;
        border-right: 43px solid rgb(0 0 0 / 44%) !important;
        border-top: 48px solid rgb(0 0 0 / 44%) !important;
        border-bottom: 48px solid rgb(0 0 0 / 44%) !important;
    }

    div.innerCorners {
        width: 242px !important;
        height: 152px !important;
        margin-top: -4px !important;
        margin-left: -4px !important;
    }
}

@media(max-width: 400px) {
    .videoFrameQr {
        width: 250px;
    }

    .qrScannerContainer {
        width: 250px !important;
        height: 188px !important;
        margin-left: 65%;
    }

    .responsiveVideo {
        width: 250px !important;
        height: 188px !important;
        border-left: 43px solid rgb(0 0 0 / 44%) !important;
        border-right: 43px solid rgb(0 0 0 / 44%) !important;
        border-top: 30px solid rgb(0 0 0 / 44%) !important;
        border-bottom: 30px solid rgb(0 0 0 / 44%) !important;
    }

    div.innerCorners {
        width: 172px !important;
        height: 136px !important;
        margin-top: -4px !important;
        margin-left: -4px !important;
    }
}

@media(max-width: 320px) {
    .videoFrameQr {
        width: 200px;
    }

    .qrScannerContainer {
        width: 200px !important;
        height: 151px !important;
    }

    .responsiveVideo {
        width: 200px !important;
        height: 151px !important;
        border-left: 31px solid rgb(0 0 0 / 44%) !important;
        border-right: 31px solid rgb(0 0 0 / 44%) !important;
        border-top: 22px solid rgb(0 0 0 / 44%) !important;
        border-bottom: 22px solid rgb(0 0 0 / 44%) !important;
    }

    div.innerCorners {
        width: 146px !important;
        height: 115px !important;
        margin-top: -4px !important;
        margin-left: -4px !important;
    }
}

div.innerCorners {
    width: 220px;
    height: 190px;
    background: linear-gradient(to right, white 3px, transparent 4px) 0 0, linear-gradient(to right, white 4px, transparent 4px) 0 100%, linear-gradient(to left, white 4px, transparent 4px) 100% 0, linear-gradient(to left, white 4px, transparent 4px) 100% 100%, linear-gradient(to bottom, white 4px, transparent 4px) 0 0, linear-gradient(to bottom, white 4px, transparent 4px) 100% 0, linear-gradient(to top, white 4px, transparent 4px) 0 100%, linear-gradient(to top, white 4px, transparent 4px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    margin-top: -5px;
    margin-left: -5px;
}

.qrScannerContainer {
    width: 400px;
    height: 301px;
}

.noDisplay {
    display: none;
}

.responsiveVideo {
    z-index: 9999;
    width: 400px;
    height: 301px;
    border-left: 90px solid rgb(0 0 0 / 44%);
    border-right: 100px solid rgb(0 0 0 / 44%);
    border-top: 60px solid rgb(0 0 0 / 44%);
    border-bottom: 60px solid rgb(0 0 0 / 44%);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box;
}
.elementsForm {
    width: 25%;
}

.elementsFormCheck {
    width: 10%;
}

@media(max-width: 1000px) and (min-width: 700px) {
    .elementsForm {
        width: 25%;
    }

    .elementsFormCheck {
        width: 15%;
    }
}

@media(max-width: 740px) {
    .elementsForm {
        width: 33.33%;
    }

    .elementsFormCheck {
        width: 22.22%;
    }
}