/* Custom Style For Disable Text Selecting */
body {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                            supported by Chrome, Opera and Firefox */
}

/* Show Any Div or Component */
.visible {
    visibility: visible;
}

.hidden{
    visibility: hidden;
}

.show {
    display: block;
}

.hide{
    display: none;
}

/* Set Hover Style on question Panel Component */
.qMoreOption {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
    position: absolute;
    top: -10px;
    right: -10px;
}

.questionPanelComp:hover .qMoreOption {
    visibility: visible; 
    opacity: 1;
}

/* Set Hover Style on question Panel Component */
.qCreatedByChimp {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
    position: absolute;
    top: 12px;
    left: 15px;
}

.questionPanelComp:hover .qCreatedByChimp {
    visibility: visible; 
    opacity: 1;
}

/* Make Position absolute */
.absolute-header {
    position: absolute;
    width: 100vw;
    left: 0;
    top:0;
    z-index: 2;
}

.vvi-toggle-text::after {
    content: "marked as vvi";
}

.verified-toggle-text::after {
    content: "successfully marked as verified.";
}

.visible-toggle-text::after {
    content: "This question will be visible to viewers.";
}

.marked-answer-true-toggle-text::after {
    content: "The answer is marked as true.";
}

.not-vvi-toggle-text::after {
    content: "not marked as vvi";
}

.not-verified-toggle-text::after {
    content: "This question is not yet verified.";
}

.not-visible-toggle-text::after {
    content: "This question will not be visible to viewers.";
}

.not-marked-answer-true-toggle-text::after {
    content: "The answer is marked as false.";
}

/* Some Color Class */
.link-color-1 {
    color: #ff5757;
}

.opacity-4:hover {
    opacity: 0.4;
}

.opacity-6:hover {
    opacity: 0.6;
}

.opacity-8:hover {
    opacity: 0.8;
}

.hover-underline-animation {
    /* display: inline-block; */
    position: relative;
    color: #ff5757;
}
  
.hover-underline-animation:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ff5757;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
  
.hover-underline-animation:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.bold {
    font-weight: bold;
}

/* Text and Background Color Palatte Start */

h3, p{
    font-family: inter;
}

p {
    color: #000000;
}

.text-logo {
    color: #19547b;
}

.text-link {
    color: #ff5757;
}

.text-brown {
    color: #a86878;
}

.text-green {
    color: #00887a;
}

.text-cream {
    color: #fef0e8;
}

.bg-green {
    background-color: #00887a;
    color: white;
}

.bg-brown {
    background-color: #a86878;
}

.bg-sky {
    background-color: #c6ddea;
}

.bg-cream {
    background-color: #fef0e8;
}

.bg-link {
    background-color: #ff5757;
    color: white;
}

/* UNIFORM SECTION TO MAKE OLD LAYOUT COLOR START */
/* ------------------------------SECTION COLOR LAYOUT START ------------------- */

.section-cream {
    background-color: #fef0e8;
    color: #19547b;
}

.section-cream .body {
    padding: 30px 20px;
    color: inherit;
}

.section-lightcyan {
    background-color: mistyrose;
    padding: 30px 20px;
    color: #a5415a;
}

.section-lightcyan .title {
    color: inherit;
    font-size: 18.0pt;
    font-weight: 600;
}

.section-lightcyan .info {
    color: rosybrown;
    font-weight: 400;
    letter-spacing: .01em;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 8px
}

.section-lightcyan .small {
    color: inherit;
    font-weight: 300;
    letter-spacing: .01em;
    font-size: 8.0pt;
    margin-bottom: 8px;
    line-height: 1.3;
}

.section-lightcyan .btn {
    background: #a86878 !important;
    border-color: #a86878 !important;
    color: #ffffff !important;
    /* lightgoldenrodyellow  mistyrose  */
    /* #e0f9eb lightgrey honeydew  */
}

.section-lightcyan .body .link-listview > li a {
    color: #8b394e !important;
}

body.dark-mode-active .section-lightcyan .body .link-listview > li a {
    color: #e18ea3 !important;
}

/* ------------------------------------------------ */

.section-sky {
    background-color: #c6ddea;
    color: #a5415a;
}

.section-sky .body {
    padding: 30px 20px;
    color: inherit;
}

.section-sky .title {
    color: inherit;
    font-size: 18.0pt;
    font-weight: 600;
}

.section-sky .info {
    color: rosybrown;
    font-weight: 400;
    letter-spacing: .01em;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.section-sky .small {
    color: inherit;
    font-weight: 300;
    letter-spacing: .01em;
    font-size: 8.0pt;
    margin-bottom: 8px;
    line-height: 1.3;
}

.section-sky .btn {
    background: #a86878 !important;
    border-color: #a86878 !important;
    color: #ffffff !important;
    /* lightgoldenrodyellow  mistyrose  */
    /* #e0f9eb lightgrey honeydew  */
}

.section-sky .body .link-listview > li a {
    color: #8b394e !important;
} 

body.dark-mode-active .section-sky .body .link-listview > li a {
    color: #e18ea3 !important;
}

/* --------------------------------------------- */

.section-darkcyan {
    background-color: #e0f9eb;
    color: #027777;
}

.section-darkcyan .body {
    padding: 30px 20px;
    color: inherit;
}

.section-darkcyan .title {
    color: inherit;
    font-size: 18.0pt;
    font-weight: 600;
}

.section-darkcyan .info {
    color: cadetblue;
    font-weight: 400;
    letter-spacing: .01em;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.section-darkcyan .small {
    color: inherit;
    font-weight: 300;
    letter-spacing: .01em;
    font-size: 8.0pt;
    margin-bottom: 8px;
    line-height: 1.3;
}

.section-darkcyan .btn {
    background: darkcyan !important;
    border-color: darkcyan !important;
    color: #fff !important;
    /* # lightgrey honeydew  */
}

.section-darkcyan .body .link-listview > li a {
    color: #056161 !important;
}

body.dark-mode-active .section-darkcyan .body .link-listview > li a {
    color: #0abdbd !important;
}

/* ----------------------------------------------------- */

.section-cream-light {
    background-color: #fff6f2;
    color: #19547b;
}

.section-cream-light .body {
    padding: 30px 20px;
    color: inherit;
}

.section-cream-light .title {
    color: inherit;
    font-size: 18.0pt;
    font-weight: 600;
}

.section-cream-light .info {
    color: #3c7499;
    font-weight: 400;
    letter-spacing: .01em;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.section-cream-light .small {
    color: inherit;
    font-weight: 300;
    letter-spacing: .01em;
    font-size: 8.0pt;
    margin-bottom: 8px;
    line-height: 1.3;
}

.section-cream-light .btn {
    background: #19547b !important;
    border-color: #19547b !important;
    color: #fff !important;
}

.section-cream-light .body .link-listview > li a {
    color: #19547b !important;
}

body.dark-mode-active .section-cream-light .body .link-listview > li a {
    color: #6db1de !important;
}

/* ------------------------------SECTION COLOR LAYOUT END ------------------- */

/* UNIFORM SECTION TO MAKE OLD LAYOUT COLOR END */

body.dark-mode-active .bg-sky, body.dark-mode-active .section-lightcyan, body.dark-mode-active .section-sky {
    background-color: #0F1C2F;
    border-bottom: 1px solid #262242;
    color: whitesmoke; 
}

body.dark-mode-active .section-cream-light, body.dark-mode-active .section-darkcyan {
    background-color: #0b1c33;
    border-bottom: 1px solid #262242;
    color: ghostwhite; 
}



body.dark-mode-active
    p {
        color: #ffffff;   
}

body.dark-mode-active
    .text-logo {
        color: #ffffff;   
}



/* Text and Background Color Palatte End */

/* Validity Plan Show Expire Notice Start */
.validity-expire-value {
    font-size: 3.7vw;
}


/* My Profile Header Image Start */
.my-profile-header {
    position: relative;
}

.my-profile-header .name {
    position: absolute;
    margin-left: 12%;
    margin-top: -45%;
    max-width: 34%;
    font-size: 5vw;
}

.card .name {
    font-size: 3.2vw;
}

@media screen and (min-width: 800px) {

    .my-profile-header .name {
        position: absolute;
        margin-left: 4.6%;
        margin-top: -22%;
        max-width: 27%;
        font-size: 3.5vw;
    }

    .card .name {
        font-size: 2.3vw;
    }

    
}

@media screen and (min-width: 768px) {
    .validity-expire-value {
        font-size: 200%;
    }
}


/* My Profile Header Image End */

body.dark-mode-active .background-color {
    background-color: #6C7C94;
}

body.dark-mode-active .filter-img, body.dark-mode-active img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}


/* PRINT OF WEBVIEW OF APP: We are stopping user from printing our webpage */
    @media print {
        .appHeader{
            display: none;
        };
        html,
        body {

            /* Hide the whole page */
            display: none;
        }
    };