body{
     padding: 0 !important;
     margin: 0 !important;
     font-family: 'SanFranciscoDisplay-Light';
}
 a:hover , a:focus {
     outline: none;
     text-decoration: none;
}
 a:focus {
     outline:0 !important;
     text-decoration: none;
}
 *:focus {
     outline:none !important;
     box-shadow: none;
}
/*******Fonts*****/
 @font-face {
     font-family: 'SanFranciscoDisplay-Semibold';
     src: url('../fonts/SanFranciscoDisplay-Semibold.woff2') format('woff2'), url('../fonts/SanFranciscoDisplay-Semibold.woff') format('woff');
     font-weight: 600;
     font-style: normal;
}
 @font-face {
     font-family: 'SanFranciscoDisplay-Thin';
     src: url('../fonts/SanFranciscoDisplay-Thin.woff2') format('woff2'), url('../fonts/SanFranciscoDisplay-Thin.woff') format('woff');
     font-weight: 100;
     font-style: normal;
}
 @font-face {
     font-family: 'SanFranciscoDisplay-Medium';
     src: url('../fonts/SanFranciscoDisplay-Medium.woff2') format('woff2'), url('../fonts/SanFranciscoDisplay-Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
}
 @font-face {
     font-family: 'SanFranciscoDisplay-Black';
     src: url('../fonts/SanFranciscoDisplay-Black.woff2') format('woff2'), url('../fonts/SanFranciscoDisplay-Black.woff') format('woff');
     font-weight: 900;
     font-style: normal;
}
 @font-face {
     font-family: 'SanFranciscoDisplay-Bold';
     src: url('../fonts/SanFranciscoDisplay-Bold.woff2') format('woff2'), url('../fonts/SanFranciscoDisplay-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
}
 @font-face {
     font-family: 'SanFranciscoDisplay-Heavy';
     src: url('../fonts/SanFranciscoDisplay-Heavy.woff2') format('woff2'), url('../fonts/SanFranciscoDisplay-Heavy.woff') format('woff');
     font-weight: 900;
     font-style: normal;
}
 @font-face {
     font-family: 'SanFranciscoDisplay-Regular';
     src: url('../fonts/SanFranciscoDisplay-Regular.woff2') format('woff2'), url('../fonts/SanFranciscoDisplay-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'SanFranciscoDisplay-Light';
     src: url('../fonts/SanFranciscoDisplay-Light.woff2') format('woff2'), url('../fonts/SanFranciscoDisplay-Light.woff') format('woff');
     font-weight: 300;
     font-style: normal;
}
/*******Fonts*****/
 .quiz-header {
     float: left;
     width: 100%;
     padding: 25px 25px 25px 25px;
     text-align: left;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
     background: #fff;
     position: fixed;
     z-index: 9;
}
 .quiz-header a {
     float: left;
     width: auto;
     position: relative;
     z-index: 1;
}
 .quiz-header a img {
     width: 200px;
}
 .quiz-header h1 {
     float: left;
     margin: 0;
     padding: 0;
     width: 100%;
     text-align: center;
     position: absolute;
     left: 0;
     font-family: 'SanFranciscoDisplay-Thin';
     font-size: 36px;
     line-height: 36px;
     color: #115592;
}
 .quizcontainer{
     float: left;
     width: 100%;
     padding: 130px 0 0 0;
     background: #eee;
}
 .quizcontainer .container{
     width: 896px;
}
 .quizblock {
     float: left;
     width: 100%;
     padding: 50px 60px;
     background: #fff;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
     transition: .5s ease;
     border: 2px solid #fff;
     border-radius: 3px;
     margin-bottom: 40px;
     background-image: url(../images/svt-graphics.png);
     background-repeat: no-repeat;
     background-position: right bottom;
}
 .quiz-question {
     float: left;
     width: 100%;
     font-family: 'SanFranciscoDisplay-Thin';
     font-size: 22px;
     line-height: 36px;
     color: #194f90;
     margin-bottom: 20px;
}
 .quiz-result{
     position: fixed;
     bottom: 25px;
     right: 25px;
     background: #eee;
     padding: 20px;
     /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);*/
     transition: .5s ease;
     border-radius: 3px;
     width: 230px;
     border: 1px solid #ccc;
}
 .quiz-result p {
     float: left;
     width: 100%;
    font-size: 16px;
    font-family: 'SanFranciscoDisplay-Thin';
     margin-bottom: 5px;
}
 .quiz-result p strong {
     font-weight: normal;
    font-family: 'SanFranciscoDisplay-Bold';
     color: #194f90;
}
 .progress {
     width: 100%;
     margin: 0;
     background: #fff;
     height: 8px;
}
 .progress-bar {
     height: 8px;
     padding: 0;
}
 .quiz-answer{
     float: left;
     width: 100%;
}
 .answer-block{
     float: left;
     width: 100%;
     margin: 10px 0 0 0;
}
 .answer-block input.form-control {
     float: left;
     width: 60%;
     /*border: 1px solid #ced4da;*/
     height: 42px;
     font-size: 17px;
     color: #000;
     font-family: 'SanFranciscoDisplay-Regular';
}
div#selectedStore{width:60%;}
 .answer-block .form-control:focus {
     color: #495057;
     background-color: #fff;
     border-color: #ced4da;
     outline: 0;
     box-shadow: none;
}
 .quiz-error{
     float: left;
     width: 100%;
     font-size: 15px;
     color: #d02c2f;
     padding-left: 5px;
     padding-top: 3px;
}
 .submitbutton{
     float: left;
     width: 100%;
}
 .submitbutton button{
     float: left;
     width: 60px;
     height: 40px;
     line-height: 36px;
     text-align: center;
     padding: 0;
     font-size: 16px;
     font-family: 'SanFranciscoDisplay-Medium';
     margin-top: 20px;
     background: #115592;
     border:2px solid #115592;
}
 .submitbutton button:hover {
     background: transparent;
     color: #115592;
}
 .progress .progress-bar.bg-primary {
     background-color: #115592 !important;
}
 .quiz-question span.star {
     font-size: 16px;
     vertical-align: top;
     line-height: 24px;
     color: #d02c2f;
}
 .quiz-checkbox{
     float: left;
     width: 47%;
     margin-bottom: 10px;
     margin-right: 37px;
}
 .quiz-checkbox .custom-control-label::before {
     position: absolute;
     top: 0.25rem;
     left: -1.5rem;
     display: block;
     width: 1.3rem;
     height: 1.3rem;
     pointer-events: none;
     content: "";
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     background-color: #cdcdcd;
}
 .quiz-checkbox .custom-control-label::after {
     position: absolute;
     top: 0.25rem;
     left: -1.5rem;
     display: block;
     width: 1.3rem;
     height: 1.3rem;
     content: "";
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 50% 50%;
}
 .quiz-checkbox p {
     margin: 2px 0 0 10px;
     font-size: 16px;
     color: #333;
}
 .quiz-checkbox .custom-control-input {
     position: absolute;
     z-index: -1;
     opacity: 0;
     left: 0;
     top: 0.25rem;
     width: 1.3rem;
     height: 1.3rem;
}
 .quiz-checkbox .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
     background-color: #115592;
}
 .quiz-checkbox-container{
     float: left;
     width: 100%;
}
 .quiz-radio-container{
     float: left;
     width: 100%;
}
.quiz-textarea-container {
     float: left;
     width: 100%;
 }
 .custom-control-textarea {
     width: 100%;
     float: left;
 }
 .quiz-radiobutton p {
     margin: 2px 0 0 10px;
     font-size: 16px;
     color: #333;
     line-height: 28px;
}
 .quiz-radiobutton .custom-control-label::before {
     position: absolute;
     top: 0.5rem;
     left: -1.5rem;
     display: block;
     width: 1.3rem;
     height: 1.3rem;
     pointer-events: none;
     content: "";
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     background-color: #cdcdcd;
}
 .quiz-radiobutton .custom-control-label::after {
     position: absolute;
     top: 0.5rem;
     left: -1.5rem;
     display: block;
     width: 1.3rem;
     height: 1.3rem;
     content: "";
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 50% 50%;
}
 .quiz-radiobutton .custom-control-input {
     position: absolute;
     z-index: -1;
     opacity: 0;
     left: 0;
     top: 0.5rem;
     width: 1.3rem;
     height: 1.3rem;
}
 .quiz-radiobutton .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
     background-color: #115592;
}
 .quiz-radiobutton{
     float: left;
     width: 47%;
     margin-bottom: 15px;
     margin-right: 37px;
}
 .quiz-radiobutton:nth-child(2n) {
     float: left;
     margin-right: 0;
}
 .quiz-checkbox:nth-child(2n) {
     float: left;
     margin-right: 0;
}
 .mb-3, .my-3 {
     margin-bottom: 0 !important;
}
 .quizimage {
     float: left;
     width: 100%;
     margin: 20px 0;
}
.quizimage img {
     width: 49%;
     float: left;
     height: 250px;
     object-fit: cover;
     border: 1px solid #ccc;
     margin-bottom: 10px;
     padding: 5px;
}
.quizimage img:nth-child(2n) {
     float: left;
     margin-right: 0;
}
.answerarea {
     display: inline-block;
     border-bottom: 1px solid #194f90;
     min-width: 100px;
     
}

.finalsubmit .submitbutton {
     float: none;
     display: inline-block;
     margin: auto;
     width: auto;
}

.finalsubmit {
     float: none;
     width: 100%;
     text-align: center;
     display: inline-block;
     margin: 50px auto 80px auto;
}

.finalsubmit .submitbutton button {
     float: none;
     margin: 0;
     width: 100px;
     height: 50px;
     font-size: 20px;
}

span.MainTitle {
     float: left;
     width: 100%;
     color: #194f90;
     font-family: 'SanFranciscoDisplay-Regular';
     font-size: 28px;
     text-transform: uppercase;
     margin-bottom: 10px;
}

.MainTitleTop{ margin-top: 30px; }

.vgt-responsive thead tr th {
     background: #fff !important;
}

.vgt-table th.filter-th {
    padding: .75em .75em .75em .75em;
    border-bottom: 20px solid #f5f5f5 !important;
}
.admin-content-area .page-header-top-container .page-name.quiz-page-name {
    width: 100%;
}

.vgt-responsive button .fa.fa-edit {
     color: #098de1;
}

.vgt-responsive button {
     background: transparent;
     border: none;
     padding: 0.275rem 0.45rem;
}

.vgt-responsive button .fa.fa-edit {
     margin: 4px 0 0 0;
}
.vgt-responsive button:hover { background: transparent; }

.vgt-responsive button .fa {
     font-size: 20px;
}
.CustomChangeProfile .button-box.outline-button {
     padding: 0;
     border: none;
     box-shadow: none;
     margin-left: 0;
     margin-right: 20px;
     float: left;
}

.QuizButton.button-box.outline-button .btn-primary {
     background: #098de1;
     border: 1px solid #098de1;
     border-radius: 5px;
     border-bottom: 2px solid #076eb0;
     font-size: 15px;
     margin: 15px 0 0 0;
     padding: 8px 25px;
     float: right;
     box-shadow: none;
     color: #fff;
}

.QuizButton .btn.btn-primary.btn-lg { background: #098de1;
     border: 1px solid #098de1;
     border-radius: 5px;
     border-bottom: 2px solid #076eb0;
     font-size: 15px;
     margin: 15px 0 0 0;
     padding: 8px 25px;
     float: left;
     box-shadow: none;
     color: #fff; }

.QuizButton .btn.btn-primary.btn-lg:hover { color: #fff;

background-color: #0069d9;

border-color: #0062cc; }



.QuizButton.button-box.outline-button .btn-primary:hover { color: #fff;

background-color: #0069d9;

border-color: #0062cc; }

.QuizButton.button-box.outline-button .btn-secondary:hover { color: #fff;

background-color: #0069d9;

border-color: #0062cc; }

.QuizButton.button-box.outline-button .btn-secondary {
     background: #098de1;
     border: 1px solid #098de1;
     border-radius: 5px;
     border-bottom: 2px solid #076eb0;
     font-size: 15px;
     margin: 15px 0 0 0;
     padding: 8px 25px;
     float: right;
     box-shadow: none;
     color: #fff;
}

.col-12.forms-block.SelectQuizBlock {
     padding: 0;
     margin-bottom: 25px;
}
.col-12.forms-block.SelectQuizBlock .form-label {
     margin-bottom: 4px;
}

.card-body.card-body-padding-none {
     padding: 0;
}

.QuizLeft{ float: left; }
#sectiongroup , #questiontypegroup{
     margin: 8px 0 0 0;
}
.isRequiredBlock .custom-control.custom-checkbox {
     margin: 8px 0 0 0;
}

.text-danger{ font-size: 14px; }
.EnterAnswerBlock .btn.btn-primary.btn-lg .fa.fa-trash-o {
     color: #f00;
}
.EnterAnswerBlock .btn.btn-primary.btn-lg {
     background: transparent;
     border: none;
     padding: 0;
}
.EnterAnswerBlock .col-2{
     margin-top: 8px;
     text-align: center;
}
.EnterAnswerBlock .col-1 {
     margin-top: 4px;
     text-align: center;
}
.paddingnone{ padding-left: 0 !important; padding-right: 0 !important; }
.dropdown-toggle::after {
     display: inline-block;
     margin-left: 0.255em;
     vertical-align: 0.255em;
     content: "";
     border-top: 0em solid !important;
     border-right: 0em solid transparent !important;
     border-bottom: 0;
     border-left: 0em solid transparent !important;
}
#quiz_add_update .text-danger {
     position: absolute;
     left: 0;
}

.welcomebg {
     background: url(../images/welcomebg.jpg) no-repeat;
     float: left;
     width: 100%;
     height: 100vh;
     background-size: cover;
     text-align: center;
     position: relative;
}

.welcomecontent { position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%); }


.welcomequizcontainer{ width: 450px; background: #fff; border-radius: 5px; padding: 40px; float: none; display: inline-block; }

.welcomelogo{ float: none; width: 100%; margin-bottom: 45px; display: inline-block; }

.welcomequizurl{ display: inline-block; width: 100%; text-align: left; }

.welcomequizurl label { display: inline-block; width: 100%; margin-bottom: 5px; font-size: 15px; }
.welcomequizurl input { display: inline-block; width: 100%; height: 44px; border-radius: 5px; border: 1px solid #bababa; padding: 0 10px;
line-height: 44px; font-size: 16px; }

.enterquizbutton{ display: inline-block; width: 100%; margin-top: 25px; }
.enterquizbutton a {
     background: #098de1;
     display: inline-block;
     border-radius: 5px;
     border: 1px solid #098de1;
     color: #fff;
     padding: 8px 20px;
     font-size: 16px;
     border-bottom: 2px solid #076eb0;
     color: #fff !important;
}

.enterquizbutton a:hover { color: #098de1 !important; background: #fff; }

.vgt-responsive button {
     background: transparent;
     border: none;
     padding: 0.275rem 0.25rem;
}


#list-quiz .fa-file-o::before {
     content: "Q";
     font-weight: bold;
     font-size: 20px;

}

#list-answered-quiz .fa-plus::before {
     content: "A";
     font-weight: bold;
     font-size: 20px;

}

.btn.myButton.btn-secondary .fa.fa-file {
     color: #098de1 !important;
     font-size: 17px !important;
}

.CustomChangeProfile { width:100%;}
.CustomChangeProfile .user-access{
     max-width: unset !important;
}
.CustomChangeProfile .user-access .ti-input{
     border-radius: 0.25rem;
}

.g-recaptcha {
     float: left;
     width: 100%;
}

@media (max-width: 980px) {
.quizcontainer .container {
     width: 100%;
     max-width: 95%;
}
}

@media (max-width: 800px) {
.quiz-header h1 {
     float: left;
     margin: 0;
     padding: 0;
     width: 100%;
     text-align: right;
     position: absolute;
     left: 0;
     font-family: 'SanFranciscoDisplay-Thin';
     font-size: 32px;
     line-height: 32px;
     color: #115592;
     padding-right: 50px;
}
}

@media (max-width: 667px) {

     div#selectedStore {
     width: 100%;
}


div#selectedStore input.form-control { position: absolute; }
.selected.d-center {
     font-size: 15px;
}

.answer-block input.form-control{ font-size: 15px; }

     .welcomequizcontainer{ width: 100%; padding: 30px; }
     .welcomelogo img {
     width: 200px;
}

.welcomecontent{ width: 90%; }

     span.MainTitle {
     float: left;
     width: 100%;
     color: #194f90;
     font-family: 'SanFranciscoDisplay-Regular';
     font-size: 20px;
     text-transform: uppercase;
     margin-bottom: 5px;
}

.quizcontainer .container {
     width: 100%;
}
.quizblock{ padding: 20px; margin-bottom: 20px;}
.quiz-question {
     font-size: 17px;
     line-height: 26px;
}
.quiz-checkbox {
     float: left;
     width: 100%;
     margin-bottom: 15px;
     margin-right: 0;
}
.quiz-radiobutton {
     float: left;
     width: 100%;
     margin-bottom: 10px;
     margin-right: 0;
}
.quiz-header h1 {
     float: left;
     margin: 10px 0 0 0;
     padding: 0;
     width: 100%;
     text-align: center;
     position: relative;
     left: 0;
     font-family: 'SanFranciscoDisplay-Thin';
     font-size: 20px;
     line-height: normal;
     color: #115592;
}
.quiz-header a {
     float: left;
     width: 100%;
     position: relative;
     z-index: 1;
     text-align: center;
}
.quiz-header a img {
     width: 160px;
}
.quiz-radiobutton p {
     margin: 2px 0 0 10px;
     font-size: 15px;
     color: #333;
     line-height: 26px;
}
.quiz-checkbox p {
     margin: 2px 0 0 10px;
     font-size: 15px;
     color: #333;
}
.answer-block input.form-control{ width: 100%; }
.quiz-header {
     padding: 20px 25px 15px 25px;
}
.quizcontainer {
     float: left;
     width: 100%;
     padding: 120px 0 0 0;
     background: #eee;
}
.quiz-result {
     position: relative;
     bottom: 0;
     right: 0;
     background: #fff;
     padding: 20px;
     /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); */
     transition: .5s ease;
     border-radius: 3px;
     width: 90%;
     border: 1px solid #ccc;
     left: 0;
     display: block;
     margin: auto auto 40px auto;
}
.finalsubmit {
     float: none;
     width: 100%;
     text-align: center;
     display: inline-block;
     margin: 20px auto 40px auto;
}
}

@media (max-width: 480px) {
.quizimage img {
     width: 100%;
     float: left;
     height: 200px;
     object-fit: cover;
     
}
}

.message-info {
     float: left;
     width: 100%;
     padding: 30px 50px 0 50px;
}
.message-info-block {
     float: left;
     width: 100%;
     background: #def1cc;
     padding: 20px;
     border-radius: 5px;
     border-bottom: 2px solid #adbc9f;
}