.topnav {
  overflow: hidden;
  /*background-color: #333;*/
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 10px 16px 5px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  /*background: black;*/
  display: block;
  position: absolute;
  right: 0px;
  top: 0;
  height: 50px;
  width: 50px;
}

.topnav a:hover {
  /*background-color: #ddd;*/
  /*color: black;*/
}


.login{
        background: white;
        padding: 16px;
        position: fixed;
        width: 600px;
        margin: auto;
        display: table;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        box-shadow: 0px 0px 16px #0000003d;
        border-radius: 8px;
        padding-top: 0;
        /*margin-top: 16%!important;*/
        background-image: -webkit-linear-gradient(
    57deg , #88cd60 0%, #cbd7c4 100%, rgb(54 154 60) 100%);
    }
/* The popup form - hidden by default */
.form-container-content
{
    padding: 10px;
    /*padding-top:55px;*/
}
.form-container-close{
    text-align: right;
    margin-top: -10px;
    margin-right: -10px;
    height: 10px;
}
.form-close{
    background: #ff000000;
    border: none;
    color: #d7c319;
    border-radius: 3px;
    font-weight: bold;
    padding: 3px 12px;
    z-index: 10000;
    width: 50px;
    font-size: 30px;
    position: relative;
    top: -2px;
    right: -9px;
    cursor:pointer;
}
.form-popup {
    display: none;
    z-index: 999999;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgb(0 0 0 / 74%);
    top: 0px;
    left: 0px;
    overflow: auto;
}
/* Add styles to the form container */
.form-container {
    margin: auto;
    width: 450px;
    margin-top: 7%;
    border-radius: 10px;
    background-color: white;
    padding: 10px;
}
    /* Full-width input fields */
    .form-container input[type=text], .form-container input[type=password] {
        width: 100%;
        padding: 7px 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
    }
        /* When the inputs get focus, do something */
        .form-container input[type=text]:focus, .form-container input[type=password]:focus {
            background-color: #ddd;
            outline: none;
        }
    /* Set a style for the submit/login button */
    .form-container .btn {
        background-color: #FFC107;
        color: #171717;
        padding: 7px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom: 10px;
        opacity: 0.8;
        font-weight: bold;
    }
    /* Add a red background color to the cancel button */
    .form-container .cancel {
        background-color: red;
    }
    /* Add some hover effects to buttons */
    .form-container .btn:hover, .open-button:hover {
        opacity: 1;
    }

#vqContainer {
    /* width: 1285px; */
    margin-left: auto;
    padding-top: 0 !important;
    margin-right: auto;
}

#vqLeft {
    height: 100vh;
    padding-top: 5px;
    float: left;
    box-sizing: border-box;
}

.btn-chiTietTheLe{
    clear: both;
    color: white;
    background: #1f8bda;
    position: absolute;
    padding:10px;
    line-height: 15px;
    margin-top: 5px;
    /* margin: auto; */
    text-decoration: none;
    border-radius: 7px;
    text-shadow: 1px 1px #a7a7a7;
    font-weight: bold;
    box-shadow: 1px 2px 4px #00000052;
    text-transform: uppercase;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 40px;
}

#tenChuongTrinh {
    float: right;
    width: 50%;
}

#vql1 {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    height: 455px;
}

#thele_container {
    overflow-y: scroll;
    height: 400px;
    width: 100%;
    border-radius: 4px;
}

/*#vql1 > p {
    margin-bottom: 10px;
    width: 100%;
    height: 10px;
    display: block;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    /* margin-left: 2px; */
font-size: 24px;
/* font-style: oblique; */
letter-spacing: 1px; text-shadow: 1px 1px 0px #797979; line-height: 0px;
}

*/ #vql1 > input {
    float: left;
    width: 330px;
    height: 38px;
    border-radius: 5px;
    outline: none;
    border: none;
    padding-left: 5px;
    font-size: 19px;
    text-transform: uppercase;
    margin-right: 10px;
}

#vql1 > #checkBtn {
    float: left;
    position: relative;
    cursor: pointer;
    background: #1E1E1E;
    border-radius: 5px;
    padding: 10px 0px;
    font-size: 20px;
    width: 119px;
    text-align: center;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: inset 1px 1px 0px white;
}

    #vql1 > #checkBtn:active {
        box-shadow: 1px 1px 0px white, inset 2px 3px 1px black;
    }

    #vql1 > #checkBtn:hover {
    }

.spin-icon-check {
    position: absolute;
    left: 45px;
    visibility: hidden;
}

.vql2 {
    width: 100%;
    padding-top: 0px !important;
    box-sizing: border-box;
}

    .vql2 > p {
        padding-top: 10px;
        padding-left: 25px;
        font-size: 20px;
        color: #5e8d49;
        letter-spacing: 1px;
        /* text-shadow: 1px 1px #e6e6e6; */
        line-height: 25px;
        color: #ffffff;
        margin-left: 2px;
        font-size: 24px;
        font-style: normal !important;
        letter-spacing: 1px;
        text-shadow: none;
    }

#btn_luu_tt {
    background: #BB1627;
    color: white;
    margin-left: 5px;
    margin-top: 25px;
}

#congras {
    padding: 25px 0;
    padding-top: 10px;
    visibility: hidden;
}

    #congras > p {
        animation-duration: 1200ms;
    }

#btn_luu_tt:active {
    box-shadow: 1px 1px 0px white, inset 2px 2px 1px #282828;
}

#btn_luu_tt:hover {
}

#vqRight {
    width: 620px;
    height: auto;
    float: right;
}

    #vqRight > #canvasCt {
        margin-left: auto;
        margin-right: auto;
        width: 700px;
        height: 582px;
        background-position: center;
        position: relative;
        background-repeat: no-repeat;
    }

        #vqRight > #canvasCt > canvas {
            position: absolute;
            top: -28px;
            z-index: 12;
            left: 0;
        }

        #vqRight > #canvasCt > #quayBtn {
            position: absolute;
            box-sizing: border-box;
            width: 122px;
            height: 122px;
            top: 238px;
            line-height: 140px;
            left: 268px;
            z-index: 5;
            text-transform: uppercase;
            border-radius: 50%;
            border-radius: 50%;
            /* box-shadow: rgba(0,0,0,0.1) 0px 3px 0px; */
            z-index: 13;
            /* background: #ffbd49; */
            cursor: pointer;
            font-family: 'Exo 2', sans-serif;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }

#quayBtn:after {
    content: "QUAY";
    text-align: center;
    line-height: 127px;
    color: #ffffff;
    font-size: 23px;
    text-shadow: -1px 0px 0 #fff, 3px 2px 0 rgba(193, 193, 193, 0.3);
    position: relative;
    z-index: 13;
    font-weight: bold;
    width: 122px;
    height: 122px;
    display: block;
}

#quayBtn:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 15px 28px 15px;
    border-color: transparent transparent #fe0c03 transparent;
    top: -18px;
    left: 45px;
}

#inner-spin {
    width: 132px;
    height: 132px;
    position: absolute;
    left: 10px;
    top: 10px;
    position: absolute;
    border-radius: 50%;
    z-index: 13;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%);
    /* box-shadow: rgba(255,255,255,1) 0px -3px 0px inset, rgba(255,255,255,1) 0px 3px 0px inset, rgba(0,0,0,0.4) 0px 0px 6px; */
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
    /* background: -webkit-radial-gradient(center, ellipse cover, #fff3ec 0%,#ffa500 100%); */ /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#quayBtn:active #inner-spin {
}

#quayBtn:active:after {
}



#vqRight > #canvasCt > #quayBtn:active {
    transform: scale(1.1,1.1);
}

#border_outside {
    background: transparent;
    width: 485px;
    height: 485px;
    /* box-shadow: inset 0px 0px 0px 12px #0000000f, 0px 0px 5px 1px #aeaeae, inset 0px 0px 51px 55px #62626205; */
    /* box-shadow: inset 0px 0px 11px 20px black; */
    position: absolute;
    border-radius: 50%;
    top: 56px;
    z-index: 12;
    left: 85px;
    box-sizing: border-box;
    /* border: 5px solid #ffffff; */
}

#title_box {
    /* width: 1285px; */
    height: 65px;
    /* padding-top: 5px; */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    border-radius: 5px;
    margin-top: 0;
}

.text_title {
    line-height: 45px;
    float: right;
    font-size: 25px;
    background: transparent;
    padding: 10px 0;
    border-radius: 4px;
    /* box-shadow: 0px 0px 4px #cdcdcd; */
    font-weight: bold;
    margin: 25px 0px;
    text-align: center !important;
    letter-spacing: 2px;
    text-shadow: 1px 1px #7f7f7f;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}


.text_main {
    line-height: 45px;
    font-size: 25px;
    background: transparent;
    padding: 10px 0;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 1px 1px #464646;
    text-transform: uppercase;
    color: #ffffff;
}

#bottom_nav {
    list-style-type: none;
    width: 1150px;
    height: 55px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    border: 3px dotted #ff9393;
    border-radius: 5px;
    margin-top: 10px;
    background: #de6161;
}

.specialText {
    color: #f53434;
    font-weight: bold;
    font-size: 24px;
    text-shadow: 1px 1px #00000096;
    text-transform: uppercase;
}

#thongbao {
    visibility: hidden;
}

#bottom_nav > li {
    border-radius: 5px;
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    text-transform: uppercase;
    color: white;
    margin: 5px;
    opacity: 0.9;
    transition: background 300ms ease-in-out;
    cursor: pointer;
}

    #bottom_nav > li:hover {
        opacity: 1;
        background: #b12b2b;
    }

    #bottom_nav > li:active {
        opacity: 1;
        box-shadow: inset 0px 0px 10px #810303;
    }

#footer_container {
    width: 100%;
    height: 100px;
    background: #1E1E1E;
    margin-top: 10px;
}

.btn_qv {
    cursor: pointer;
    border-radius: 5px;
    padding: 10px 0px;
    font-size: 20px;
    width: 215px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: inset 1px 1px 0px white;
}


main {
    align-self: center;
    background-color: #fefefe;
    border: 1px solid #f2f2f2;
    border-radius: 3px;
    position: fixed;
    z-index: 11;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
    min-width: 350px;
    max-width: 450px;
    width: 40vw;
    padding: 2rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.main-box {
    visibility: visible !important;
    align-self: center;
    background-color: #fefefe;
    border: 1px solid #f2f2f2;
    border-radius: 3px;
    position: fixed;
    z-index: 100;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
    min-width: 350px;
    max-width: 450px;
    width: 40vw;
    padding: 2rem;
    top: 100px;
    left: 177px;
    transform: translate(-50%,-50%) !important;
}

main .form-buttons {
    display: flex;
    justify-content: flex-end;
    padding: 1em 0 0 0;
}

    main .form-buttons button {
        margin-left: 16px;
    }

.form-field {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: .5em;
}

    .form-field:last-child {
        margin-bottom: 0;
    }

    .form-field .icon {
        align-self: center;
        fill: #2980b9;
        padding: .5em .5em;
    }

    .form-field label {
        align-self: center;
        flex-shrink: 0;
        flex-basis: 100%;
        width: 100%;
    }

@media (min-width: 768px) {
    .form-field label {
        flex-basis: 80px;
        width: 80px;
    }
}

.form-field > section {
    border: 1px solid #aaa;
    border-radius: 3px;
    display: flex;
    flex: 1;
}

    .form-field > section input {
        border: 0;
        border-left: 1px solid #ccc;
        flex-grow: 1;
        font-size: 1.1rem;
        font-weight: 300;
        padding: .35em .5em;
    }

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.a-btn, .a-btn--filled {
    padding: .35em 1em;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    border: 1px solid #3498db;
    background-color: #fff;
    transition: all 146ms ease;
    font-size: 1.2rem;
    border-radius: 3px;
    color: #333;
}

    .a-btn:enabled:hover, .a-btn--filled:enabled:hover {
        background-color: #3498db;
        color: #fff;
        box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
    }

.a-btn--filled {
    background-color: #3498db;
    border-color: #3498db;
    color: #fff;
}

    .a-btn--filled:enabled:hover {
        background-color: #2980b9;
        border-color: #2980b9;
    }

    .a-btn:disabled, .a-btn--filled:disabled {
        background-color: #ecf0f1;
        border-color: #bdc3c7;
        color: #6a6a6a;
    }

.label--required:after {
    content: '*';
    color: red;
    margin-left: 5px;
}

#xcm {
    font-size: 28px;
    top: -26px;
    left: 100px;
    position: absolute;
    font-style: italic;
    height: 1px;
    display: block;
}

#title {
    top: -6px;
    left: -7px;
    display: block;
    font-style: italic;
    font-size: 36px;
    opacity: 1;
    margin-top: 0px;
    padding-left: 0px;
}

#congrats {
    height: 125px;
    border: 3px solid #ffffff;
    line-height: 108px;
    box-shadow: 0px 0px 2px #00000052;
    box-sizing: border-box;
    border-radius: 2px;
    background: white;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
}

#title {
    transform-origin: 50% 50%;
    font-size: 25px;
    cursor: pointer;
    z-index: 2;
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    padding: 35px 10px;
    padding-bottom: 10px;
    user-select: none;
    -webkit-user-select: none;
}

.particle {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 45%;
    left: 45%;
    z-index: 1;
    font-size: 30px;
}

.star {
    color: #ffcc00;
}

.blob {
    background: #d5f2ff;
    background: rgba(255, 204, 0, 0.25);
    border-radius: 50%;
    display: block;
}

#logo {
    width: fit-content;
    display: inline-block;
    float: left;
}

#title_legend {
text-align: center;
}

#box_inside {
    height: 50px;
    padding-top: 10px;
    z-index: 99999;
}

.box_child_legend {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    float: left;
    border-radius: 3px;
}

.b1 {
    background: red;
    width: 10%;
    color: white;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    line-height: 50px;
}

.b2 {
    background: #008ABC;
    width: 25%;
    padding-left: 20px;
    /* border: 1px solid white !important; */
    /* box-shadow: inset -2px -2px 0px 20px #0000006e, inset 1px 1px 1px #0000002b; */
    font-size: 20px;
    color: white;
    font-weight: bold;
    border: none;
    margin-left: 5px;
}

.b3 {
    background: #be0000;
    box-shadow: inset -2px -2px 0px #00000052, 1px 1px 1px #0000004f;
    width: calc(22%);
    cursor: pointer;
    color: white;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    margin-left: 5px;
    position: relative;
    line-height: 50px;
}

    .b3:hover {
        background: #CD0202;
    }

    .b3:active {
        transform: scale(.9,.9);
    }

#thele_container > img {
    width: 100%;
    padding-top:80px;
    padding-left:80px;
}



/*RESPONSIVE*/
/* Dành cho máy tính bảng */
@media (max-width: 1130px) {


    #tenChuongTrinh {
        float: none;
        width: 100%;
        margin: 10px 0;
        text-align: left !important;
    }

    body {
    }

    .container {
        padding: 20px;
    }

    #vqLeft {
        float: none;
        height: auto;
    }

    #vql1 {
        height: auto;
    }

    #thele_container {
        height: auto;
    }

        #thele_container > img {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

    #vqRight > #canvasCt {
        width: 655px;
    }


    #vqContainer {
        width: 100%;
        padding-bottom: 80px;
    }

    #hoten_input {
        margin-left: 0px;
        margin-top: 5px;
        margin-left: 5px;
    }

    #title_box {
        max-width: 1024px;
        width: 100%;
    }

    .b3 {
        margin-top: 5px;
        width: calc(49%);
    }

    .b2 {
        width: 49%;
    }

    .container {
        overflow: hidden;
        /* max-width: 1024px; */
    }



    #field_ {
        max-width: 1024px;
        width: 100% !important;
        min-width: 728px;
        box-sizing: border-box;
    }

    #congrats {
        margin-top: 15px;
    }

    #thele_container > img {
        width: 100%;
    }

    #xcm {
        line-height: 30px !important;
        top: 0px !important;
        left: 0px !important;
        position: relative !important;
        width: 100% !important;
        text-align: center !important;
    }

    #vqRight {
        float: none;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    #logo {
        float: left;
    }

    #tenChuongTrinh {
        float: none;
    }

    #title_box > .text_title {
        float: none;
    }

    #title_box {
        height: auto;
    }
}


/* Dành cho điện thoại*/
@media all and (max-width: 767px) {
    #vqContainer {
    }

    #kc {
        width: 100px !important;
    }

    #tenChuongTrinh {
        float: none;
        width: calc(100%) !important;
        text-align: left !important;
        margin: 25px 0;
    }

    #vqRight > #canvasCt {
        width: 316px;
    }

    #title_box > .text_title {
        font-size: 17px;
        letter-spacing: 1px;
        line-height: 20px;
    }

    #thele_container > img {
        width: 100%;
    }

    #vqContainer {
        margin-left: 0px;
    }

    #vql1 > p {
        font-size: 20px !important;
    }

    .container {
        padding: 10px;
    }

    #vql1 > p {
        padding-left: 0px !important;
    }

    #xcm {
        font-size: 19px;
    }

    #title {
        top: -6px;
        left: -7px;
        display: block;
        font-style: italic;
        font-size: 23px;
        opacity: 1;
        margin-top: 0px;
        padding-left: 0px;
    }

    #vqRight > #canvasCt > #quayBtn {
        width: 100px;
        height: 100px;
        top: 249px;
        line-height: 140px;
        left: 108px;
    }

    #vqRight > #canvasCt > canvas {
        position: absolute;
        top: -28px;
        z-index: 12;
        left: -169px;
    }



    #field_ {
        min-width: 0px;
        margin-top: 30px;
    }

    .b1 {
        width: 100%;
    }

    .b2 {
        margin-left: 0px;
        margin-top: 5px;
        z-index: 10000000;
        width: 100%;
    }

    .b3 {
        margin-top: 5px;
        width: 100%;
        margin-left: 0px;
    }

    #hoten_input {
        margin-left: 0px;
        margin-top: 5px;
        margin-left: 0;
    }

    #vqRight > #canvasCt {
        margin-top: -160px;
        height: 480px;
    }

    #vqContainer {
        padding-bottom: 0px;
    }
}


/* Dành cho điện thoại*/
@media all and (max-width: 355px) {
    #vqContainer {
    }

    #title_box > .text_title {
        font-size: 14px;
        letter-spacing: 1px;
    }

    #vql1 > p {
        padding-left: 0px;
    }

    #thele_container > img {
        width: 100%;
        margin-left: 0;
    }

    #vqContainer {
        margin-left: 0px;
    }

    #kc {
        width: 80px !important;
    }

    #vql1 > p {
        font-size: 17px !important;
    }

    .container {
        padding: 10px;
    }

    #vqRight > #canvasCt {
        width: 350px;
    }
}

#title_box {
    padding-left: 0px;
}


@media (min-width: 768px) {
    #title_box {
        margin-top: 7.5px;
        display: none;
    }
}

@media screen and (max-width: 1280px) and (min-width: 1132px) {
    #vqLeft {
        width: 500px;
    }

    #thele_container > img {
        width: 100%;
    }

    .container {
        padding: 5px;
    }

    #xcm {
        font-size: 21px;
    }

    #logo {
        width: 100%;
    }

    #tenChuongTrinh {
        width: calc(100% - 315px) !important;
    }
}

html {
    overflow: scroll;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    /* background: #ffffff70; */
}

#tenChuongTrinh {
    display: block;
    clear: both;
}

@media (max-width: 768px) {
    #title_legend {
        font-size: 14px !important;
    }
}

@media (max-width: 1024px) {
    #title_legend {
        font-size: 18px;
    }
}

#vqRight > #canvasCt > #quayBtn {
    /* box-shadow: 0px 0px 12px #00000061; */
}

#thele_container {
    border: 3px solid white;
    box-sizing: border-box;
    
}



@media (min-width: 2560px) {
}

@media (max-width: 2560px) {
}

@media (max-width: 9990px) and (min-width: 1568px) {

    #vqLeft {
        margin-right: 0;
    }

    #vqRight {
        margin-bottom: 100px;
    }

    #vqContainer {
        max-width: 1567px !important;
        margin-top: 190px;
    }

    #title_box {
        max-width: 1567px !important;
    }
    #canvasCt{
    }
    #border_outside::after {
        content: '';
        width: 640px;
        top: 16px;
        left: 16px;
        height: 640px;
        position: absolute;
        box-shadow: inset 0px 0px 66px 65px #00000042;
        border-radius: 50%;
    }

    #border_outside {
        /* background: #ffffff; */
        width: 665px;
        height: 665px;
        position: absolute;
        border-radius: 50%;
        top: -33px;
        z-index: 12;
        left: -4px;
        box-sizing: border-box;
        /* border: 5px dotted #ffffff; */
    }

    #field_ {
        max-width: 1567px !important;
        width: 100% !important;
    }
}

@media (min-width: 1367px) and (max-width: 1567px) {
    #vqContainer {
    max-width: 1285px;
    /*height: 100vh;*/
    }



    #title_box {
        max-width: 1280px !important;
    }

    #canvasCt {
        margin-bottom: 35px;
    }

    #border_outside::after {
        content: '';
        width: 455px;
        top: 13px;
        left: 11px;
        height: 455px;
        position: absolute;
        box-shadow: inset 0px 0px 10px 0px #00000042;
        border-radius: 50%;
    }

    #border_outside {
        width: 480px;
        height: 480px;
    }
}


@media (max-width: 1367px) and (min-width: 1281px) {
    #title_box {
        padding: 0 15px !important;
    }

    #vqContainer {
        padding: 0;
        padding-bottom: 0 !important;
    }

    #border_outside::after {
        content: '';
        width: 465px;
        top: 9px;
        left: 11px;
        height: 465px;
        position: absolute;
        box-shadow: inset 0px 0px 9px 0px #00000042;
        border-radius: 50%;
    }

    #vqLeft {
        width: calc(100% - 635px) !important;
    }

    #vqRight > #canvasCt {
        margin-bottom: 35px !important;
    }
}

@media (min-width: 1131px) and (max-width: 1280px) {

    #vqLeft {
        width: 531px !important;
    }

    #title_box {
        width: 1151px !important;
    }

    #vqContainer {
        width: 1151px !important;
    }

    #border_outside::after {
        content: '';
        width: 462px;
        top: 11px;
        left: 8px;
        height: 462px;
        position: absolute;
        box-shadow: inset 0px 0px 10px 0 #00000042;
        border-radius: 50%;
    }
}


@media (max-width: 1130px) {
    #border_outside::after {
        content: '';
        width: 586px;
        top: 17px;
        left: 17px;
        height: 586px;
        position: absolute;
        box-shadow: inset 0px 0px 11px 0px #00000042;
        border-radius: 50%;
    }



    #field_ {
        width: 90% !important;
    }

    #field_ {
        margin-top: 60px !important;
    }
}

@media (max-width: 1024px) {


    #border_outside::after {
        content: '';
        width: 586px;
        top: 17px;
        left: 17px;
        height: 586px;
        position: absolute;
        box-shadow: inset 0px 0px 11px 0px #00000042;
        border-radius: 50%;
    }
}

@media (max-width: 767px) {


    #field_ {
        margin-top: 150px !important;
    }

    #quayBtn:after {
        content: "QUAY";
        text-align: center;
        line-height: 92px;
        color: #fff;
        font-size: 22px;
        text-shadow: -1px 0px 0 #fff, 3px 2px 0 rgba(0,0,0,0.3);
        position: relative;
        z-index: 13;
        font-weight: bold;
        width: 92px;
        height: 92px;
        display: block;
    }

    #inner-spin {
        visibility: hidden;
        width: 86px;
        height: 86px;
        position: absolute;
        left: 3px;
        top: 3px;
        position: absolute;
        border-radius: 50%;
        z-index: 13;
    }

    #border_outside {
        /* background: #900e0e; */
        width: 320px;
        height: 320px;
        position: absolute;
        border-radius: 50%;
        top: 139px;
        z-index: 3;
        left: -3px;
        box-sizing: border-box;
        /* border: 5px dotted #fffb00; */
    }

    #quayBtn:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        z-index: -1;
        border-style: solid;
        border-width: 0 10px 17px 10px;
        border-color: transparent transparent #080000 transparent;
        top: -13px;
        left: 37px;
    }

    #border_outside {
        /* background: #ffffff; */
        width: 585px;
        height: 585px;
        position: absolute;
        border-radius: 50%;
        top: 7px;
        z-index: 12;
        left: -135px;
        box-sizing: border-box;
        /* border: 5px dotted #ffffff; */
    }

        #border_outside::after {
            content: '';
            width: 552px;
            top: 16px;
            left: 16px;
            height: 552px;
            position: absolute;
            box-shadow: inset 0px 0px 20px 1px #00000042;
            border-radius: 50%;
        }
}


@media (max-width: 650px) {


    #field_ {
        margin-top: 0px !important;
    }

    #quayBtn:after {
        content: "QUAY";
        text-align: center;
        line-height: 92px;
        color: #fff;
        font-size: 22px;
        text-shadow: -1px 0px 0 #fff, 3px 2px 0 rgba(0,0,0,0.3);
        position: relative;
        z-index: 13;
        font-weight: bold;
        width: 92px;
        top: 5px;
        left: 5px;
        height: 92px;
        display: block;
    }

    #inner-spin {
        width: 86px;
        height: 86px;
        position: absolute;
        left: 3px;
        top: 3px;
        position: absolute;
        border-radius: 50%;
        z-index: 13;
    }

    #border_outside {
        /* background: #900e0e; */
        width: 320px;
        height: 320px;
        position: absolute;
        border-radius: 50%;
        top: 139px;
        z-index: 3;
        left: -3px;
        box-sizing: border-box;
        /* border: 5px dotted #fffb00; */
    }

    #quayBtn:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        z-index: 0;
        border-style: solid;
        border-width: 0 10px 14px 10px;
        border-color: transparent transparent #fe230f transparent;
        top: -7px;
        left: 40px;
    }

    #border_outside {
        /* background: #ffffff; */
        width: 430px;
        height: 430px;
        position: absolute;
        border-radius: 50%;
        top: 84px;
        z-index: 12;
        left: -58px;
        box-sizing: border-box;
        /* border: 5px dotted #ffffff; */
    }

        #border_outside::after {
            content: '';
            width: 408px;
            top: 11px;
            left: 11px;
            height: 408px;
            position: absolute;
            box-shadow: inset 0px 0px 16px 0px #00000030;
            border-radius: 50%;
        }
}



@media (max-width: 420px) {

    #quayBtn:after {
        content: "QUAY";
        text-align: center;
        line-height: 92px;
        color: #fff;
        font-size: 22px;
        text-shadow: -1px 0px 0 #fff, 3px 2px 0 rgba(0,0,0,0.3);
        position: relative;
        z-index: 13;
        font-weight: bold;
        width: 98px;
        top: 4px;
        left: 1px;
        height: 98px;
        display: block;
    }

    #inner-spin {
        width: 86px;
        height: 86px;
        position: absolute;
        left: 3px;
        top: 3px;
        position: absolute;
        border-radius: 50%;
        z-index: 13;
    }

    #border_outside {
        /* background: #900e0e; */
        width: 320px;
        height: 320px;
        position: absolute;
        border-radius: 50%;
        top: 139px;
        z-index: 3;
        left: -3px;
        box-sizing: border-box;
        /* border: 5px dotted #fffb00; */
    }

    #quayBtn:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 10px 14px 10px;
        border-color: transparent transparent #fe0e01 transparent;
        top: -6px;
        left: 40px;
    }

    #border_outside {
        /* background: #ffffff; */
        width: 325px;
        height: 325px;
        position: absolute;
        border-radius: 50%;
        top: 137px;
        z-index: 12;
        /* box-shadow: 1px 1px 1px black; */
        left: -6px;
        box-sizing: border-box;
        /* border: 5px dotted #ffffff; */
    }

        #border_outside::after {
            content: '';
            width: 307px;
            top: 9px;
            left: 9px;
            height: 307px;
            position: absolute;
            box-shadow: inset 0px 0px 14px 0px #0000003d;
            border-radius: 50%;
        }
}

#canvas {
    /*pointer-events: none;*/
}

div, a, strong, footer {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

:focus {
    outline: 0;
}

footer {
    display: block;
}

a:focus {
    outline: thin dotted;
}

a:active, a:hover {
    outline: 0;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    /* background: #b3d4fc; */
    /* text-shadow: none; */
}
/*! CSS Used from: http://localhost:7431/Css/mainCss.css */
.myfooter {
    background: #e4e4e4;
    padding: 15px;
    color: #4CAF50;
    border-top: 1px solid #d2d6de;
    font-family: -webkit-body;
    margin-bottom: 0px;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 12px;
}

a {
    background-color: transparent;
    color: #337ab7;
    text-decoration: none;
}

    a:hover, a:focus {
        color: #005580;
        text-decoration: underline;
    }


    
        #vqContainer {
            margin-left: auto;
            margin-right: auto;
            max-width: 1285px;
        }

        #vqLeft {
            height: auto;
            padding-top: 0;
            float: left;
            box-sizing: border-box;
        }

        .spin-icon-check {
            position: absolute;
            left: 45px;
            visibility: hidden;
        }

        .vql2 {
            width: 100%;
            padding-top: 0px !important;
            box-sizing: border-box;
            display: table;
            padding: 0;
            float: left;
            border-radius: 2px !important;
            margin-top: 20px;
            border-radius: inherit;
            padding: 0 !important;
            box-shadow: crimson;
            border-radius: 7px;
            background: white;
            padding: 15px 5px !important;
        }

            .vql2 > p {
                padding-top: 0;
                font-size: 20px;
                padding: 5px 15px;
                margin-top: 5px;
                padding-bottom: 5px;
                color: #5e8d49;
                margin: 0;
                letter-spacing: 1px;
                line-height: 25px;
                color: #424242 !important;
                margin-left: 0;
                font-size: 18px;
                font-weight: normal;
                font-style: normal !important;
                letter-spacing: 1px;
                text-transform: none;
            }

        #congras {
            padding: 25px 0;
            padding-top: 10px;
            background: white;
            padding: 0 !important;
        }

            #congras > p {
                animation-duration: 1200ms;
            }

        #vqRight {
            /*float: right;*/
            float:left;
        }

            #vqRight > #canvasCt {
                margin-left: auto;
                margin-right: auto;
                width: 700px;
                height: 582px;
                background-position: center;
                position: relative;
                background-repeat: no-repeat;
            }

                #vqRight > #canvasCt > canvas {
                    position: absolute;
                    top: 0;
                    z-index: 12;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: 98%;
                    height: 98%;
                    margin: auto;
                }
@media(min-width: 780px){
     #vqRight > #canvasCt > #quayBtn {
                    position: absolute;
                    box-sizing: border-box;
                    width: 20vh;
                    top: 36vh !important;
                    }
}
                #vqRight > #canvasCt > #quayBtn {
                    position: absolute;
                    box-sizing: border-box;
                    width: 20vh;
                    top: 32vh;
                    line-height: 140px;
                    left: 0;
                    right: 0;
                    margin: auto;
                    z-index: 5;
                    text-transform: uppercase;
                    border-radius: 50%;
                    border-radius: 50%;
                    z-index: 13;
                    cursor: pointer;
                    font-family: 'Exo 2', sans-serif;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    -o-user-select: none;
                    user-select: none;
                }

        #quayBtn:after {
            content: "QUAY";
            text-align: center;
            line-height: 152px;
            color: #ffffff;
            font-size: 35px;
            text-shadow: -1px 0px 0 #fff, 3px 2px 0 rgba(193, 193, 193, 0.3);
            position: relative;
            z-index: 13;
            font-weight: bold;
            width: 152px;
            display: none !important;
            height: 152px;
            display: block;
        }

        #quayBtn:before {
            content: "";
            display: none;
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 15px 28px 15px;
            border-color: transparent transparent #fe0c03 transparent;
            top: -17px;
            left: 60px;
        }

        #inner-spin {
            width: 132px;
            height: 132px;
            position: absolute;
            left: 10px;
            top: 10px;
            display: none;
            position: absolute;
            border-radius: 50%;
            z-index: 13;
            background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%);
            background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%);
            background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1)));
            background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);
            background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 );
        }

        #vqRight > #canvasCt > #quayBtn:active {
            transform: scale(1.1,1.1);
        }

        #border_outside {
            background: transparent;
            width: 615px;
            height: 615px;
            position: absolute;
            border-radius: 50%;
            top: -10px;
            z-index: 12;
            left: 19px;
            box-sizing: border-box;
        }

        #title_box {
            height: 65px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 10px;
            border-radius: 5px;
            margin-top: 0;
        }

        .text_main {
            line-height: 35px;
            font-size: 25px;
            background: transparent;
            padding: 0;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #353535;
        }

        .specialText {
            color: #3e3e3e;
            font-weight: bold;
            font-size: 24px;
            text-shadow: 0px 0px 0px #00000096;
            text-transform: uppercase;
        }

        #title {
            top: -6px;
            left: -7px;
            display: block;
            font-style: italic;
            font-size: 36px;
            opacity: 1;
            margin-top: 0px;
            padding-left: 0px;
        }

        #congrats {
            height: fit-content;
            display: table !important;
            border: 3px solid #ffffff;
            line-height: 108px;
            box-shadow: 0px 0px 2px #00000052;
            box-sizing: border-box;
            border-radius: 2px;
            background: white;
            text-align: center;
            margin: 0 auto;
            left: 0;
            right: 0;
            float: left;
            /*width: 100%;*/
        }

        @media (min-width: 1080px) {
            #congrats {
                width: 522px !important;
            }
        }

        #title {
            font-size: 25px;
            cursor: pointer;
            z-index: 2;
            width: 300px;
            position: absolute;
            top: 0;
            background: transparent;
            text-align: center;
            width: 327px;
            margin: auto;
            display: block;
            padding: 98px 10px;
            padding-bottom: 10px;
            user-select: none;
            -webkit-user-select: none;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            color: white;
        }

        @media (max-width: 991px) {
            #title {
                font-size: 27px !important;
            }
        }

        .particle {
            height: 50px;
            width: 50px;
            position: absolute;
            top: 45%;
            left: 45%;
            z-index: 1;
            font-size: 30px;
        }

        .star {
            color: #ffcc00;
        }

        .blob {
            background: #d5f2ff;
            background: rgba(255, 204, 0, 0.25);
            border-radius: 50%;
            display: block;
        }

        #logo {
            width: fit-content;
            display: inline-block;
            float: left;
        }

        #title_legend {
            text-align: center;
        }

        @media (max-width: 1130px) {
            .container {
                padding: 28px;
            }

            #vqLeft {
                float: none;
                /*height: 325px;*/
            }

            #vqRight > #canvasCt {
                width: 655px;
            }

            #vqContainer {
                width: 100%;
                padding-bottom: 80px;
            }

            #title_box {
                max-width: 1024px;
                width: 100%;
            }

            .container {
                overflow: hidden;
            }

            #field_ {
                max-width: 1024px;
                width: 100% !important;
                min-width: 728px;
                box-sizing: border-box;
            }

            #congrats {
                margin-top: -40px;
            }

            #vqRight {
                float: none;
                width: auto;
                margin-left: auto;
                margin-right: auto;
            }

            #logo {
                float: left;
            }

            #title_box {
                height: auto;
                display: none !important;
            }
        }

        @media (max-width: 768px) {
            #vqRight > #canvasCt {
                width: 100%;
            }

            #vqContainer {
                margin-left: 0px;
            }

            .container {
                padding: 0 !important;
            }

            #title {
                height: 100%;
                display: flex;
                font-style: italic;
                font-size: 18px !important;
                height: 100%;
                opacity: 1;
                justify-content: center;
                flex-direction: column;
                padding: 0;
                width: 60%;
                margin-top: 0px;
                position: relative;
            }

            #vqRight > #canvasCt > #quayBtn {
                width: 100px;
                height: 100px;
                top: 15vh !important;
                line-height: 140px;
                left: 0;
                right: 0;
                margin: auto;
            }

            #vqRight > #canvasCt > canvas {
                position: absolute;
                z-index: 12;
                left: 0;
                width: 95%;
                height:95%;
                right: 0;
                top: 0;
                margin: auto;
                bottom: 0;
            }

            #field_ {
                min-width: 0px;
                margin-top: 30px;
            }

            #vqRight > #canvasCt {
                height: 480px;
                bottom: 45px;
                left: 0;
                right: 0;
                position: fixed;
            }

            #vqContainer {
                padding-bottom: 0px;
            }
        }

        @media all and (max-width: 355px) {
            #vqContainer {
                margin-left: 0px;
            }

            .container {
                padding: 10px;
            }

            #vqRight > #canvasCt {
                width: 350px;
            }
        }

        #title_box {
            padding-left: 0px;
        }

        @media (min-width: 768px) {
            #title_box {
                margin-top: -40px;
            }
        }

        @media screen and (max-width: 1280px) and (min-width: 1132px) {
            #vqLeft {
                width: 500px;
            }

            .container {
                padding: 5px;
            }

            #logo {
                width: 100%;
            }
        }

        html {
            overflow: auto;
            overflow-x: auto;
        }

        ::-webkit-scrollbar {
            width: 0;
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #ffffff70;
        }

        @media (max-width: 768px) {
            #title_legend {
                font-size: 14px !important;
            }
        }

        @media (max-width: 1024px) {
            #title_legend {
                font-size: 18px;
            }
        }

        @media (max-width: 620px) {
            #vqRight > #canvasCt > #quayBtn {
                width: 21.5vw;
                top: 24vw;
                left: 0;
                right: 0;
                margin: auto;
            }
        }

        @media (max-width: 9990px) and (min-width: 1568px) {
            #vqRight {
                margin-bottom: 0;
                height: 100vh;
            }

            #vqContainer {
                max-width: 100vw;
                margin-top: 0;
                min-height: 100vh;
            }

            #title_box {
                max-width: 1567px !important;
                display: none;
            }

            #border_outside::after {
                content: '';
                width: 640px;
                top: 16px;
                left: 16px;
                height: 640px;
                position: absolute;
                box-shadow: inset 0px 0px 66px 65px #00000042;
                border-radius: 50%;
            }

            #border_outside {
                width: 665px;
                height: 665px;
                position: absolute;
                border-radius: 50%;
                top: -33px;
                z-index: 12;
                left: -4px;
                box-sizing: border-box;
            }

            #field_ {
                max-width: 1567px !important;
                width: 100% !important;
            }
        }

        @media (min-width: 1367px) and (max-width: 1567px) {
            #title_box {
                max-width: 1280px !important;
            }

            #canvasCt {
                margin-bottom: 35px;
            }

            #border_outside::after {
                content: '';
                width: 584px;
                top: 17px;
                left: 17px;
                height: 584px;
                position: absolute;
                box-shadow: inset 0px 0px 37px 30px #00000042;
                border-radius: 50%;
            }

            #border_outside {
                width: 618px;
                height: 618px;
            }
        }

        @media (max-width: 1367px) and (min-width: 1281px) {
            #title_box {
                padding: 0 15px !important;
                display: none;
            }

            #vqContainer {
                padding: 0;
                /*height: 100vh;*/
            }

            #border_outside::after {
                content: '';
                width: 581px;
                top: 17px;
                left: 17px;
                height: 581px;
                position: absolute;
                box-shadow: inset 0px 0px 40px 34px #00000042;
                border-radius: 50%;
            }

            #vqLeft {
                width: calc(47%) !important;
            }

            #vqRight > #canvasCt {
                margin-bottom: 35px !important;
            }
        }

        @media (min-width: 1131px) and (max-width: 1280px) {
            #vqLeft {
                width: 531px !important;
            }

            #title_box {
                width: 1151px !important;
            }

            #vqContainer {
                width: 1151px !important;
            }

            #border_outside::after {
                content: '';
                width: 586px;
                top: 17px;
                left: 17px;
                height: 586px;
                position: absolute;
                box-shadow: inset 0px 0px 35px 28px #00000042;
                border-radius: 50%;
            }
        }

        @media (max-width: 1130px) {
            #border_outside::after {
                content: '';
                width: 586px;
                top: 17px;
                left: 17px;
                height: 586px;
                position: absolute;
                box-shadow: inset 0px 0px 32px 28px #00000042;
                border-radius: 50%;
            }

            #field_ {
                width: 90% !important;
            }

            #field_ {
                margin-top: 0;
            }
        }

        @media (max-width: 1024px) {
            #border_outside::after {
                content: '';
                width: 586px;
                top: 17px;
                left: 17px;
                height: 586px;
                position: absolute;
                box-shadow: inset 0px 0px 40px 40px #00000042;
                border-radius: 50%;
            }
        }

        @media (max-width: 767px) {
            #field_ {
                margin-top: 0;
            }

            #quayBtn:after {
                content: "QUAY";
                text-align: center;
                line-height: 92px;
                color: #fff;
                font-size: 22px;
                text-shadow: -1px 0px 0 #fff, 3px 2px 0 rgba(0,0,0,0.3);
                position: relative;
                z-index: 13;
                font-weight: bold;
                width: 92px;
                height: 92px;
                display: block;
            }

            #inner-spin {
                visibility: hidden;
                width: 86px;
                height: 86px;
                position: absolute;
                left: 3px;
                top: 3px;
                position: absolute;
                border-radius: 50%;
                z-index: 13;
            }

            #border_outside {
                width: 320px;
                height: 320px;
                position: absolute;
                border-radius: 50%;
                top: 139px;
                z-index: 3;
                left: -3px;
                box-sizing: border-box;
            }

            #quayBtn:before {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                z-index: -1;
                border-style: solid;
                border-width: 0 10px 17px 10px;
                border-color: transparent transparent #FF0702 transparent;
                top: -10px;
                left: 40px;
            }

            #border_outside {
                width: 585px;
                height: 585px;
                position: absolute;
                border-radius: 50%;
                top: 7px;
                z-index: 12;
                left: -135px;
                box-sizing: border-box;
            }

                #border_outside::after {
                    content: '';
                    width: 552px;
                    top: 16px;
                    left: 16px;
                    height: 552px;
                    position: absolute;
                    box-shadow: inset 0px 0px 32px 23px #00000042;
                    border-radius: 50%;
                }
        }

        @media (max-width: ) {
            #field_ {
                margin-top: 60px !important;
            }

            #quayBtn:after {
                content: "QUAY";
                text-align: center;
                line-height: 92px;
                color: #fff;
                font-size: 22px;
                text-shadow: -1px 0px 0 #fff, 3px 2px 0 rgba(0,0,0,0.3);
                position: relative;
                z-index: 13;
                font-weight: bold;
                width: 92px;
                top: 5px;
                left: 5px;
                height: 92px;
                display: block;
            }

            #inner-spin {
                width: 86px;
                height: 86px;
                position: absolute;
                left: 3px;
                top: 3px;
                position: absolute;
                border-radius: 50%;
                z-index: 13;
            }

            #border_outside {
                width: 320px;
                height: 320px;
                position: absolute;
                border-radius: 50%;
                top: 139px;
                z-index: 3;
                left: -3px;
                box-sizing: border-box;
            }

            #quayBtn:before {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                z-index: 0;
                border-style: solid;
                border-width: 0 10px 14px 10px;
                border-color: transparent transparent #fe230f transparent;
                top: -7px;
                left: 40px;
            }

            #border_outside {
                width: 430px;
                height: 430px;
                position: absolute;
                border-radius: 50%;
                top: 84px;
                z-index: 12;
                left: -58px;
                box-sizing: border-box;
            }

                #border_outside::after {
                    content: '';
                    width: 408px;
                    top: 11px;
                    left: 11px;
                    height: 408px;
                    position: absolute;
                    box-shadow: inset 0px 0px 16px 0px #00000030;
                    border-radius: 50%;
                }
        }

        @media (max-width: 620px) {
            #quayBtn:after {
                content: "QUAY";
                text-align: center;
                line-height: 92px;
                color: #fff;
                font-size: 17px;
                text-shadow: -1px 0px 0 #fff, 3px 2px 0 rgba(0,0,0,0.3);
                position: relative;
                z-index: 13;
                font-weight: bold;
                width: 98px;
                top: 0px;
                left: -3px;
                height: 98px;
                display: block;
            }

            #inner-spin {
                width: 86px;
                height: 86px;
                position: absolute;
                left: 3px;
                top: 3px;
                position: absolute;
                border-radius: 50%;
                z-index: 13;
            }

            #border_outside {
                width: 320px;
                height: 320px;
                position: absolute;
                border-radius: 50%;
                top: 139px;
                z-index: 3;
                left: -3px;
                box-sizing: border-box;
            }

            #quayBtn:before {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 10px 14px 10px;
                border-color: transparent transparent #fe0e01 transparent;
                top: -6px;
                left: 34px;
            }

            #border_outside {
                width: 284px;
                height: 284px;
                position: absolute;
                border-radius: 50%;
                top: 157px;
                z-index: 12;
                left: 16px;
                box-sizing: border-box;
            }

                #border_outside::after {
                    content: '';
                    width: 270px;
                    top: 6px;
                    left: 7px;
                    height: 270px;
                    position: absolute;
                    box-shadow: inset 0px 0px 20px 20px #0000003d;
                    border-radius: 50%;
                }
        }

        #canvas {
            /*pointer-events: none;*/
        }

        @media (max-width: 768px) {
            #congrats {
                margin-top: 135px !important;
                min-height: 320px!important;
            }
        }

        .minRemove {
            min-height: 0px !important;
            height: 0px !important;
        }

        @media (min-width: 990px) {
            #vqRight > #canvasCt {
                margin-left: auto;
                margin-right: auto;
                width: 95vh;
                height: 95vh;
                top: 50%;
                left: 25px;
                position: absolute;
                right: 0;
                background-repeat: no-repeat;
            }
        }

        @media (max-width: 989px) {
            #vqRight > #canvasCt {
                margin-left: auto;
                margin-right: auto;
                width: 100% !important;
                height: 100% !important;
                background-position: center;
                top: 0;
                left: 0;
                position: absolute;
                bottom: 60px;
                right: 0;
                margin: auto;
                background-repeat: no-repeat;
            }
        }

        @media (max-width: 989px){
            div#vqRight {
            height: fit-content;
            position: relative;
            height: 700px;
            margin: 0;
            width: 700px;
            margin: auto;
            margin-top: 15px;
        }
         @media (max-width: 768px){
            div#vqRight {
            height: fit-content;
            position: relative;
            height: 98vw;
            margin: 0;
            width: 98vw;
            margin: auto;
            margin-top: 15px;
        }
        /*@media (max-width: 376px){
            div#vqRight {
            height: fit-content;
            position: relative;
            height: 98vw;
            margin: 0;
            width: 98vw;
            margin: auto;
            margin-top: -50px;
        }*/

    #vqLeft {
    padding: 0 5px;
    padding-top: 5px;
}
}



/*! CSS Used from: https://vqmm.xspin.vn/css/resetcss.css */
div,span,p,i{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
.noSelectedColor{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
/*! CSS Used from: https://vqmm.xspin.vn/css/main.css */
.spin-icon-check{position:absolute;left:45px;visibility:hidden;}
.text_main{line-height:35px;font-size:25px;background:transparent;padding:0;font-weight:bold;letter-spacing:2px;text-shadow: none;text-transform:uppercase;color: #353535 !important;}
#title_legend{text-align:center;}
#box_inside{padding-top:0;z-index:99999;display:table;}
.box_child_legend{display:inline-block;height:50px;box-sizing:border-box;float:left;border-radius:3px;}
.b1{background:red;width:10%;color:white;font-weight:bold;font-size:30px;text-align:center;line-height:50px;}
.b2{background:white;width:calc(50% - 15px);padding-left:20px;font-size:20px;font-weight:normal;border:1px solid #cbcbcb!important;margin-left:15px;margin-top:15px;color:#242424;}
.b3{background:#be0000;box-shadow:inset -2px -2px 0px #00000052, 1px 1px 1px #0000004f;min-width:calc(22%);padding:0px 22px;cursor:pointer;color:white;font-weight:bold;font-size:24px;text-align:center;margin-left:5px;position:relative;line-height:50px;margin-top:5px;float:none;margin:auto;display:inline-block;}
.b3:hover{background:#CD0202;}
.b3:active{transform:scale(.9,.9);}
::placeholder{color:black;opacity:1;}
:-ms-input-placeholder{color:black;}
::-ms-input-placeholder{color:black;}
@media (max-width: 1130px){
.b3{margin-top:5px;width:calc(49%);}
.b2{width:49%;}
#field_{max-width:1024px;width:100%!important;min-width:728px;box-sizing:border-box;}
}
@media all and (max-width: 767px){
#field_{min-width:0px;margin-top:30px;}
.b1{width:100%;}
.b2{margin-left:0px;margin-top:5px;z-index:10000000;width:100%;}
.b3{margin-top:5px;width:100%;margin-left:0px;}
}
::-webkit-scrollbar{width:0;background:transparent;}
::-webkit-scrollbar-thumb{background:#ffffff70;}
@media (max-width: 768px){
#title_legend{font-size:14px!important;}
}
@media (max-width: 1024px){
#title_legend{font-size:18px;}
}
@media (max-width: 9990px) and (min-width: 1568px){
#field_{max-width:1567px!important;width:100%!important;}
}
@media (max-width: 1130px){
#field_{width:90%!important;}
#field_{margin-top:0;}
}
@media (max-width: 767px){
#field_{margin-top:0;}
}
@media (max-width: ){
#field_{margin-top:60px!important;}
}
/*! CSS Used from: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css */
input{margin:0;font:inherit;color:inherit;}
input::-moz-focus-inner{padding:0;border:0;}
input{line-height:normal;}
@media print{
*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important;}
p{orphans:3;widows:3;}
}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
input{font-family:inherit;font-size:inherit;line-height:inherit;}
p{margin:0 0 10px;}
/*! CSS Used from: Embedded */
@media (min-width: 1130px) and (max-width: 1220px){
#field_{width:1185px!important;}
}
@media all and (min-width: 1130px){
#field_{width:100%!important;}
}
@media (min-width: 991px){
#checkBtn_2{margin-left:10px;}
#title_legend{margin:20px 20px 5px 20px!important;}
}






















@media (max-width: 1130px){
.b3{margin-top:5px;width:calc(49%);}
.b2{width:49%;}
#field_{max-width:1024px;width:100%!important;min-width:728px;box-sizing:border-box;}
}
@media all and (max-width: 767px){
#field_{min-width:0px;margin-top:30px;}
.b1{width:100%;}
.b2{margin-left:0px;margin-top:5px;z-index:10000000;width:100%;}
.b3{margin-top:5px;width:100%;margin-left:0px;}
}
::-webkit-scrollbar{width:0;background:transparent;}
::-webkit-scrollbar-thumb{background:#ffffff70;}
@media (max-width: 768px){
#title_legend{font-size:14px!important;}
}
@media (max-width: 1024px){
#title_legend{font-size:18px;}
}
@media (max-width: 9990px) and (min-width: 1568px){
#field_{max-width:1567px!important;width:100%!important;}
}
@media (max-width: 1130px){
#field_{width:90%!important;}
#field_{margin-top:0;}
}
@media (max-width: 767px){
#field_{margin-top:0;}
}
@media (max-width: 767px){
#field_{margin-top:60px!important;}
}

@media (min-width: 1130px) and (max-width: 1220px){
#field_{width:1185px!important;}
}
@media all and (min-width: 1130px){
#field_{width:100%!important;}
}
@media (min-width: 991px){
#checkBtn_2{margin-left:10px;}
#title_legend{margin:20px 20px 5px 20px!important;}
}
p#title > span {
    height: 24px;
    display: block;
}