﻿#passwordContainer { position:relative; }
    #passwordContainer svg {
        position: absolute;
        right: 6px;
        top: 1px;
        cursor: pointer;
        color: #5b5b5b;
    }

.hvr-outline-in:before {
    pointer-events: none;
    content: '';
    position: absolute;
    border: #FF00FF solid 4px;
    border-radius: 6px;
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
    opacity: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: top, right, bottom, left;
    transition-property: top, right, bottom, left;
}

.hvr-outline-in:hover:before, .hvr-outline-in:focus:before, .hvr-outline-in:active:before {
    top: -7px;
    right: -7px;
    bottom: -7px;
    left: -7px;
    opacity: 1;
}


 .click-shrink:active {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

.click-shrink {
    transition-property: transform;
}

/*[class^="hvr-"] {
    margin: .4em;
    padding: 1em;
    cursor: pointer;
    background: #e1e1e1;
    text-decoration: none;
    color: #666;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}*/

.hvr-outline-in {   
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);   
    position: relative;
}

.square {
    font-family: 'Open Sans';
    border-radius: 6px;
    border: 1px solid Gray;
    cursor: pointer;
    box-shadow: 1px 1px 1px #888888;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 15px 15px;
}

.square.col-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 31.333333%;
    max-width: 31.33333333%;
}

.square .row {
    line-height: 30px;
}

.template_105 {
    /* yellow */
    background-image: url('/images/buttons/105.png')
}

.template_182 {
    /* green */
    background-image: url('/images/buttons/182.png')
}

.template_186 {
    /* blue */
    background-image: url('/images/buttons/186.png')
}

.template_96 {
    /* orange */
    background-image: url('/images/buttons/96.png')
}

.template_193 {
    /* black */
    background-image: url('/images/buttons/193.png')
}

.template_113 {
    /* purple */
    background-image: url('/images/buttons/113.png')
}

.template_143 {
    /* brown */
    background-image: url('/images/buttons/143.png')
}

.template_16 {
    /* grey */
    background-image: url('/images/buttons/16.png')
}

.template_2 {
    /* red */
    background-image: url('/images/buttons/2.png')
}

.template_151 {
    /* white */
    background-image: url('/images/buttons/151.png')
}

.nkod-number {
    font-size: 2em;
    line-height: 0.75em;
}

.full_template {
    font-size: 1.4em;
    color: #5b5b5b;
}

    .full_template img {
        width: 1em;
        height: 1em;
    }




@media only screen and (min-width: 576px) {
    .full_template {
        font-size: 2em;
    }

        .full_template img {
            width: 1.25em;
            height: 1.25em;
        }

    .nkod-number {
        font-size: 2em;
        line-height: 0.75em;
    }
}





@media only screen and (max-width: 1199px) {
    .square {
        padding: 10px 15px;
    }

        .square .row {
            line-height: 26px;
        }
}

@media only screen and (max-width: 991px) {
    .square {
        padding: 21px 15px;
    }

       
}

@media only screen and (max-width: 767px) {
    .square {
        padding: 10px 15px;
    }

        .square .row {
            line-height: 29px;
        }
}


@media only screen and (min-width: 768px) {
    .full_template {
        font-size: 2.5em;
    }
    .modal-body .full_template{ font-size:2em}

        .full_template img {
            width: 1.25em;
            height: 1.25em;
        }

   
}


@media only screen and (min-width: 992px) {
    .full_template {
        font-size: 2em;
    }

        .full_template img {
            width: 1em;
            height: 1em;
        }

    .nkod-number {
        font-size: 2em;
        line-height: 1em;
    }
}

@media only screen and (min-width: 1140px) {
    .full_template {
        font-size: 2em;
    }

        .full_template img {
            width: 1em;
            height: 1em;
        }

    
}