body {
}


/* new triangle image css */


.container {
    position: relative;
    text-align: center;
    /*color: white;*/
    font-size: 30px;
    font-weight: bolder;
}

/*.bottom-left {
            position: absolute;
            bottom: 8px;
            left: 16px;
        }*/

.date1 {
    position: absolute;
    top: 9.5%;
    left: 18%;
    transform: translate( -50%, -50% );
}

.date2 {
    position: absolute;
    top: 9.5%;
    left: 26.7%;
    transform: translate( -50%, -50% );
}

.month1 {
    position: absolute;
    top: 9.5%;
    left: 36.8%;
    transform: translate( -50%, -50% );
}

.month2 {
    position: absolute;
    top: 9.5%;
    left: 45.3%;
    transform: translate( -50%, -50% );
}

.year1 {
    position: absolute;
    top: 9.5%;
    left: 54.5%;
    transform: translate( -50%, -50% );
}

.year2 {
    position: absolute;
    top: 9.5%;
    left: 62.8%;
    transform: translate( -50%, -50% );
}

.year3 {
    position: absolute;
    top: 9.5%;
    left: 73%;
    transform: translate( -50%, -50% );
}

.year4 {
    position: absolute;
    top: 9.5%;
    left: 81.5%;
    transform: translate( -50%, -50% );
}

.top-left1 {
    position: absolute;
    top: 24%;
    left: 24%;
    transform: translate( -50%, -50% );
}

.top-left2 {
    position: absolute;
    top: 24%;
    left: 41%;
    transform: translate( -50%, -50% );
}

.top-right1 {
    position: absolute;
    top: 24%;
    left: 58%;
    transform: translate( -50%, -50% );
}

.top-right2 {
    position: absolute;
    top: 24%;
    left: 75%;
    transform: translate( -50%, -50% );
}

.centered-left {
    position: absolute;
    top: 41%;
    left: 39%;
    transform: translate(-50%, -50%);
}

.centered-right {
    position: absolute;
    top: 41%;
    left: 60%;
    transform: translate(-50%, -50%);
}

.bottom {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.left1 {
    position: absolute;
    top: 67.2%;
    left: 6.1%;
    transform: translate(-50%, -50%);
}

.left2 {
    position: absolute;
    top: 67.2%;
    left: 21.6%;
    transform: translate(-50%, -50%);
}

.left3 {
    position: absolute;
    top: 67.2%;
    left: 33.4%;
    transform: translate(-50%, -50%);
}

.middle1 {
    position: absolute;
    top: 80.5%;
    left: 42%;
    transform: translate(-50%, -50%);
}

.middle2 {
    position: absolute;
    top: 80.5%;
    left: 57.5%;
    transform: translate(-50%, -50%);
}

.middle3 {
    position: absolute;
    top: 92%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.right1 {
    position: absolute;
    top: 67.2%;
    left: 65.4%;
    transform: translate(-50%, -50%);
}

.right2 {
    position: absolute;
    top: 67.2%;
    left: 77%;
    transform: translate(-50%, -50%);
}

.right3 {
    position: absolute;
    top: 67.2%;
    left: 92.6%;
    transform: translate(-50%, -50%);
}


/* new triangle image css */

/* 5 elements image css*/

.element_1 {
    position: absolute;
    font-size: 15px;
    top: 52%;
    left: 12%;
    transform: translate( -50%, -50% );
}

.element_2 {
    position: absolute;
    font-size: 15px;
    top: 52%;
    left: 31%;
    transform: translate( -50%, -50% );
}

.element_3 {
    position: absolute;
    font-size: 15px;
    top: 52%;
    left: 50%;
    transform: translate( -50%, -50% );
}

.element_4 {
    position: absolute;
    font-size: 15px;
    top: 52%;
    left: 68.5%;
    transform: translate( -50%, -50% );
}

.element_5 {
    position: absolute;
    font-size: 15px;
    top: 52%;
    left: 87%;
    transform: translate( -50%, -50% );
}

.element_1_num {
    position: absolute;
    font-size: 15px;
    top: 72%;
    left: 12%;
    transform: translate( -50%, -50% );
}

.element_2_num {
    position: absolute;
    font-size: 15px;
    top: 72%;
    left: 31%;
    transform: translate( -50%, -50% );
}

.element_3_num {
    position: absolute;
    font-size: 15px;
    top: 72%;
    left: 50%;
    transform: translate( -50%, -50% );
}

.element_4_num {
    position: absolute;
    font-size: 15px;
    top: 72%;
    left: 68.5%;
    transform: translate( -50%, -50% );
}

.element_5_num {
    position: absolute;
    font-size: 15px;
    top: 72%;
    left: 87%;
    transform: translate( -50%, -50% );
}


/* 5 elements image css*/
/* direction image css */
.north {
    position: absolute;
    top: 20%;
    left: 50.4%;
    transform: translate( -50%, -50% );
}

.north_plus {
    position: absolute;
    color: red;
    top: 11%;
    left: 50.4%;
    transform: translate( -50%, -50% );
}

.south {
    position: absolute;
    top: 79.5%;
    left: 50.4%;
    transform: translate( -50%, -50% );
}

.south_plus {
    position: absolute;
    color: red;
    top: 89%;
    left: 50.4%;
    transform: translate( -50%, -50% );
}

.east {
    position: absolute;
    top: 50%;
    left: 78%;
    transform: translate( -50%, -50% );
}

.east_plus {
    position: absolute;
    color: red;
    top: 50%;
    left: 86%;
    transform: translate( -50%, -50% );
}

.west {
    position: absolute;
    top: 50%;
    left: 23%;
    transform: translate( -50%, -50% );
}

.west_plus {
    position: absolute;
    color: red;
    top: 50%;
    left: 14.7%;
    transform: translate( -50%, -50% );
}

.north_east {
    position: absolute;
    top: 28%;
    left: 70%;
    transform: translate( -50%, -50% );
}

.north_east_plus {
    position: absolute;
    color: red;
    top: 22%;
    left: 77%;
    transform: translate( -50%, -50% );
}

.south_east {
    position: absolute;
    top: 72%;
    left: 70%;
    transform: translate( -50%, -50% );
}

.south_east_plus {
    position: absolute;
    color: red;
    top: 78%;
    left: 77%;
    transform: translate( -50%, -50% );
}

.north_west {
    position: absolute;
    top: 28%;
    left: 30%;
    transform: translate( -50%, -50% );
}

.north_west_plus {
    position: absolute;
    color: red;
    top: 22%;
    left: 23.6%;
    transform: translate( -50%, -50% );
}

.south_west {
    position: absolute;
    top: 72%;
    left: 30%;
    transform: translate( -50%, -50% );
}

.south_west_plus {
    position: absolute;
    color: red;
    top: 78%;
    left: 23.6%;
    transform: translate( -50%, -50% );
}

.middle {
    position: absolute;
    top: 50%;
    left: 50.4%;
    transform: translate( -50%, -50% );
}

/* direction image css */

.triangle {
    width: 0;
    height: 0;
    border-width: 200px 0 0 200px;
    border-color: transparent transparent transparent #FF0000;
    border-style: solid;
}


.triangle-up {
    width: 120px;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 0px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

/**,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}*/


html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

.center-xs {
    justify-content: center;
}

.paddingTopBtm {
    padding-top: 15px;
    padding-bottom: 15px;
}

.paddingBtm {
    padding-bottom: 15px;
}

.paddingTop {
    padding-top: 15px;
}

.normalBorder {
    border: 2px black solid;
}

/*.content {
    align-items: center;
    border: 6px;
    padding: 48px 24px;
    background-color: #fff;*/
/*box-shadow: 0 1.5px 4px rgb(0 0 0 / 24%), 0 1.5px 6px rgb(0 0 0 / 12%);*/
/*}*/

.digit-row, .digit-row .digit {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .digit-row .digit {
        background-color: #ffffff;
        font-weight: 800;
        text-align: center;
        width: 50px;
        height: 50px;
        margin: 0 2px;
        border-radius: 6px;
        border: 2px solid #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2em;
    }

    .digit-row .digit-element {
        background-color: #ffffff;
        font-weight: 800;
        text-align: center;
        width: 100px;
        height: 50px;
        margin: 0 2px;
        border-radius: 6px;
        border: 2px solid #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1em;
    }


.digit-group {
    display: flex;
    position: relative;
}

.digit-row .right-20 {
    margin-right: 30px;
}

.digit-row .left-20 {
    margin-left: 30px;
}

.digit-row .digit-group {
    display: flex;
    position: relative;
}

.first-row {
    border: 3px solid #000000;
    background-color: #ccc;
    width: 250px;
    padding: 12px;
    margin: 3px 3px 10px;
    justify-content: center;
}

.second-row {
    border: 3px solid #000000;
    background-color: #ccc;
    width: 200px;
    padding: 12px;
    margin: 3px;
    justify-content: center;
}

.third-row {
    border: 3px solid #000000;
    background-color: #ccc;
    width: 150px;
    /*margin: 0 140px 3px; original */
    /*margin: 0 186px 3px;*/
    margin: 0 145px 3px;
    padding: 12px;
    display: flex;
    justify-content: center;
}

.fourth-row {
    /*margin-top: 20px;*/
    /*border-top: 3px solid #000000;*/
    padding-top: 12px;
    margin-bottom: 10px;
}

.fifth-row {
}

.digit-row .offset-between {
    /*margin: 0 140px;*/
    margin: 0 15px;
}

.digit-row .digit.operator {
    border: none;
    background-color: transparent;
}

.digit-row .digit-group label {
    position: absolute;
    top: -22px;
    left: 4px;
    font-weight: 500;
    font-size: 0.8em;
    text-transform: uppercase;
}

.offset {
    margin-right: 12px;
}

/* 
    iPad and iPad Pro 
    add by me
*/
@media (max-width: 1367px) {

    .first-row {
        margin: 3px 3px 35px;
    }

    .third-row {
        width: 100px;
        margin: 0 94px 3px;
    }

    .second-row {
        width: 100px;
        padding: 6px;
    }

    .digit.right-20 {
        margin-right: 5px;
    }

    .digit.left-20 {
        margin-left: 5px;
    }

    .digit-row .digit {
        width: 50px;
        height: 50px;
    }

    .digit-row .right-20 {
        margin-right: 20px;
    }

    .digit-row .left-20 {
        margin-left: 20px;
    }

    .digit-row .digit-element {
        width: 125px;
        height: 50px;
    }
}

/* 
    iPad and iPad Pro 
    add by me
*/
@media (max-width: 1024px) {

    .first-row {
        margin: 3px 3px 35px;
    }

    #main_code .third-row {
        margin: 0 67px 3px;
    }

    .third-row {
        width: 82px;
        margin: 0 82px 3px;
    }

    .second-row {
        width: 80px;
        padding: 6px;
    }

    .digit.right-20 {
        margin-right: 5px;
    }

    .digit.left-20 {
        margin-left: 5px;
    }

    .digit-row .digit {
        width: 45px;
        height: 45px;
    }

    .digit-row .right-20 {
        margin-right: 15px;
    }

    .digit-row .left-20 {
        margin-left: 15px;
    }

    .digit-row .digit-element {
        width: 90px;
        height: 50px;
    }
}

@media (max-width: 992px) {

    .first-row {
        width: 200px;
    }

    .second-row {
        width: inherit;
        padding: 6px;
    }

    .digit-row .offset-between {
        margin: 0 70px;
    }
}

/* 
    iPhone X 
    add by me
*/
@media only screen and (min-width: 812px) and (max-width: 825px) {

    .third-row {
        margin: 0 60px 3px;
    }

    .digit-row .digit-element {
        width: 90px;
        height: 50px;
    }
}

@media (max-width: 768px) {

    .first-row {
        width: inherit;
        padding: 6px;
    }

    .third-row {
        margin: 0 56px 3px;
        /*margin: 0 40px 3px; original */
        width: inherit;
        padding: 6px;
    }

    .digit-row .digit {
        width: 50px;
        height: 50px;
    }

    .digit-row .digit-element {
        /*width: 68px; original*/
        width: 110px;
        height: 50px;
    }

    .digit-row .offset-between {
        margin: 0 36px;
    }
}

/* 
    add by me
*/
@media only screen and (min-width: 360px) and (max-width: 568px) {

    .digit-row .digit {
        width: 32px;
        height: 32px;
    }

    .digit-row .digit-element {
        width: 62px;
        height: 50px;
    }
}

/* Add by me */
@media (max-width: 320px) {

    .first-row {
        width: inherit;
        padding: 6px;
        margin: 3px 3px 30px; /* add by me */
    }

    .third-row {
        margin: 0 54px 3px;
        width: inherit;
        padding: 6px;
    }

    .digit-row .digit {
        width: 32px;
        height: 32px;
    }

    .digit-row .digit-element {
        width: 54px;
        height: 50px;
    }

    .digit-row .offset-between {
        margin: 0 15px;
    }

    .offset {
        margin-right: 0px;
    }

    .digit-row .right-20 {
        margin-right: 5px;
    }

    .digit-row .left-20 {
        margin-left: 0px;
    }

    .digit.right-20 {
        margin-right: 5px;
    }

    .digit.left-20 {
        margin-left: 5px;
    }
}