﻿@media (max-width: 992px) and (min-width: 768px) {
    div.div-ssn div.col-sm-3 {
        width: 31%;
    }
}

@media (max-width: 992px) and (min-width: 768px) {
    div.div-ssn div.col-sm-1 {
        width: 2.333333%;
    }
}

div.border-red {
    border: 1px solid red !important;
}

label {
    margin: 0 0 .25em .25em;
}

p {
    font-size: 16px;
}

.box {
    width: fit-content;
    position: relative;
    top: 45%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%); /* Safari and Chrome */
    -ms-transform: translateY(-50%); /* Edge */
    -moz-transform: translateY(-50%); /* FF */
    -o-transform: translateY(-50%); /* Opera */
}

.scale-up {
    transform: scale(1.5);
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    -ms-transform: scale(1.5); /* Edge */
    -moz-transform: scale(1.5); /* FF */
    -o-transform: scale(1.5); /* Opera */
}


.box-label {
    margin-left: 2rem;
    width: fit-content;
    position: relative;
    top: 30%;
    transform: translateY(-25%);
    -webkit-transform: translateY(-25%); /* Safari and Chrome */
    -ms-transform: translateY(-25%); /* Edge */
    -moz-transform: translateY(-25%); /* FF */
    -o-transform: translateY(-25%); /* Opera */
}

@media screen and (max-width: 767px) {
    .box {
        margin-left: 1rem;
        width: fit-content;
        position: relative;
        top: 45%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%); /* Safari and Chrome */
        -ms-transform: translateY(-50%); /* Edge */
        -moz-transform: translateY(-50%); /* FF */
        -o-transform: translateY(-50%); /* Opera */
    }

    .scale-up {
        transform: scale(1.5);
        -webkit-transform: scale(1.5); /* Safari and Chrome */
        -ms-transform: scale(1.5); /* Edge */
        -moz-transform: scale(1.5); /* FF */
        -o-transform: scale(1.5); /* Opera */
    }

    .box-label {
        margin-left: 3rem;
        width: fit-content;
        position: relative;
        top: 15%;
        transform: translateY(-25%);
        -webkit-transform: translateY(-25%); /* Safari and Chrome */
        -ms-transform: translateY(-25%); /* Edge */
        -moz-transform: translateY(-25%); /* FF */
        -o-transform: translateY(-25%); /* Opera */
    }
}
