/*-- reset --*/

body,
html {
    height: 100%;
    margin: 0;
    font-family: "SegoeUI", "MathFont", Arial, sans-serif;
    background-image: url('../../../img/bg.png');
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

@font-face {
    font-family: 'MathFont';
    src: url('../fonts/CambriaMath.ttf');
}

@font-face {
    font-family: 'SegoeUI';
    src: url('../fonts/SegoeUISymbol.ttf');
}

.leftSideArea {
    float: left;
    width: calc(12vw);
}

.rightSideArea {
    float: right;
    width: calc(85vw);
}

.compLogo {
    width: calc(5vh + 50px);
    height: 100%;
    position: relative;
    top: 0;
    border: 3px solid #FFF;
    padding: 5px;
    box-shadow: 0px 0px 10px #000;
    border-top: none;
    margin-right: 10px;
}

.compLogo img {
    padding: 0;
    margin: 0;
    bottom: 0;
    position: absolute;
    width: 90%;
}

.coverLogo {
    position: absolute;
    bottom: 0;
    max-width: calc(12vh + 50px);
}

.bookNoArea {
    width: 100px;
    height: 100%;
    color: #FFF;
    text-align: center;
    font-weight: bold;
    font-size: calc(2vh + 2px);
    float: right;
    line-height: calc(4vh);
}

.roundNoArea {
    background-color: #FFF176;
    width: calc(5vh + 25px);
    height: calc(5vh + 25px);
    border-radius: 100%;
    margin: 25px auto auto auto;
    font-size: calc(3vh + 16px);
    overflow: hidden;
}

.roundNoDarkArea {
    width: 91%;
    height: 91%;
    border-radius: 100%;
    margin: 4px auto;
    text-shadow: 0px 0px 2px #fff;
    color: #575d29;
    box-shadow: 0px 0px 62px #daa830;
    line-height: calc(7vh);
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    margin: 0px;
    padding: 0px;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*-- end reset --*/

h4,
h5,
h6,
h1,
h2,
h3 {
    margin: 0;
}

ul,
ol {
    margin: 0;
    margin-left: 30px;
}

p {
    margin-top: 5px;
    margin-left: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
}

ul,
label {
    margin: 0;
    padding: 0;
}

.li-post-group {
    margin-top: 5px;
}

.post-data-list {
    max-height: 374px;
    overflow-y: auto;
}

#previewPage li {
    border: 1px solid #a7d4d2;
    cursor: move;
    margin-top: 10px;
}

#previewPage li.ui-state-highlight {
    padding: 20px;
    background-color: #eaecec;
    border: 1px dotted #ccc;
    cursor: move;
    margin-top: 12px;
}

.window .window-content {
    top: 0;
}


/* .answerArea::before {
    content: "Answer : ";
    float: left;
    margin-right: 10px;
} */

.optionArea {
    margin-left: 51px;
}

.answerAreaRight {
    text-align: right;
    width: 40%;
}

.contentBox {
    position: relative;
    margin: 16px 0;
    padding: 30px 10px 5px;
    width: 100%;
    border-radius: 3px;
    background: #fff;
}

.answerBox {
    padding-top: 0px;
    font-weight: 500;
    margin: 10px;
    display: inline-flex;
}

.content {
    margin-bottom: 5px;
    display: flow-root;
    text-align: justify;
}


/* Document
         ************************** */

#wrapper {
    text-align: center;
}

.imgbox {
    width: 100%;
    max-width: 60%;
    margin: 7% auto 0;
}


/* Preloader
         ************************** */

.spinner-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 999999;
    display: none;
    background: rgba(255, 255, 255, 0.41);
}

.spinner {
    position: absolute;
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -60%);
    -moz-transform: translate(-50%, -60%);
    -webkit-transform: translate(-50%, -60%);
    -webkit-transition: all .37s ease;
    -moz-transition: all .37s ease;
    -ms-transition: all .37s ease;
    -o-transition: all .37s ease;
    transition: all .37s ease;
}

.spinner>div {
    background: linear-gradient(to right, #cc4f27, #311005 51%, #cc4f27) var(--x, 0) / 200%;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4)
    }
    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}


/* Remover
         ************************** */

.none {
    transition: all 1.7s ease;
    opacity: 0;
}

.txt_center {
    text-align: center;
    margin: 2px;
}

.container-prew {
    padding: 50px
}

.clearfix {
    clear: both;
}

.contentBox {
    margin: 0;
}

.answerBox {
    margin: 0;
}

.box {
    margin-left: 5px;
    position: relative;
    margin: 0;
    padding: 5px 40px 0px 10px;
    width: 100%;
    min-height: 20px;
    border-radius: 3px;
    background: #fff;
}

.mchbox {
    margin: 4px;
    padding: 5px;
    min-height: 40px;
    max-height: 100px;
}

.mark {
    margin-top: 0px;
}

.heading {
    font-size: 20px;
    margin-top: 15px;
    margin-bottom: 12px;
    font-weight: 550;
}

.answerArea {
    margin-bottom: 13px;
    margin-top: 5px;
    display: grid;
    text-align: left;
    float: left;
    width: 100%;
}
.answerArea p{
   margin-left: 0px !important; 
}
.optionMcqArea p{
     margin-left: -5px !important;  
}
.optionMcqArea {
    display: block;
    width: 100%;
    position: relative;
    padding: 5px;
}

#prinTrueFalse {
    padding: 45px;
}
.optionMcqArea ol {
    margin-left: 0px !important;
}
#prinTrueFalse ol {
    margin-left: 50px;
}
.optionArea {
    display: block;
    width: 30%;
    float: left;
    position: relative;
    padding: 5px;
}

.answerAreaRight {
    width: 40%;
    float: left;
    margin-left: 70px;
    display: block;
    padding: 5px;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    -webkit-box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
}

.clearfix {
    *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}

.clearfix:after {
    clear: both;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.tgfooter {
    position: absolute;
    bottom: 0;
    height: 5vh;
    z-index: 99;
    text-align: center;
    width: 100%;
    overflow: hidden;
    background-image: linear-gradient(to bottom, #cc4f27, #311005);
}


/*#daa830*/

.btn {
    background: linear-gradient(to right, #cc4f27, #311005)!important;
}

header {
    width: 100%;
    height: calc(10vh + 33px);
    background-image: linear-gradient(to bottom, #cc4f27, #311005);
}

.header-left,
.header-right {
    position: relative;
    color: white;
    float: left;
}

.header-left {
    width: 30%;
    padding: 38px;
}

.header-right label {
    position: absolute;
    top: -3.7em;
    right: 0;
    cursor: pointer;
}

.header-right span {
    position: relative;
    width: 2em;
    height: 2em;
    background: rgba(255, 255, 255, .3);
    -webkit-transition: all .3s ease;
}

.header-right span:hover {
    background: rgba(255, 255, 255, .6);
}

.header-right span:before,
.header-right span:after {
    content: '';
    position: absolute;
    width: 2em;
    height: .5em;
    top: 4px;
    left: 0;
    background: black;
}

.header-right span:after {
    top: 14px;
}

.header-right {
    width: 70%;
    text-align: right;
}

#open {
    display: none;
}

h1 {
    font-weight: 300;
    line-height: 40px;
}

a {
    text-decoration: none;
    color: white;
    font-size: 20px;
}

nav>a {
    position: relative;
    display: inline-block;
    font-size: 13px;
    line-height: 40px;
    padding: 0 2em;
    -webkit-transition: all .3s ease;
}

nav>a:hover {
    background: rgba(255, 255, 255, .9);
    color: black;
}

.hidden-desktop {
    display: none;
}

section {
    width: 100%;
    height: auto;
    /* background-image: -webkit-linear-gradient(#09b7d8 0%, #066da9 100%) */
}

.section-left,
.section-right {
    float: left;
}

.section-left {
    width: 70%;
    padding: 3em 0;
}

.section-right {
    width: 30%;
}

.section-title,
.section-tagline {
    color: white;
    font-weight: 300;
    margin: 0;
    padding: 0;
    -webkit-transition: all .4s ease;
}

.section-title {
    font-size: 4em;
    margin-bottom: .3em;
    text-shadow: 0 3px 0px black, 0 4px 0px rgba(150, 150, 150, .5);
}

.section-tagline {
    font-size: 1em;
}

.learn-more {
    display: table;
    margin: 3em auto 0;
    padding: 1em 6em;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .8);
    background: #EAAF00;
    background-image: -webkit-linear-gradient(#EAAF00 0%, #D78100 100%);
    font-size: 1.2em;
}

.learn-more:hover {
    background: #EAAF00;
}

.learn-more:active {
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, .8);
}


/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 979px) {
    ul li:nth-child(3) .box {
        clear: both;
    }
    ul li:nth-child(2n) .box {
        margin-right: 0;
        clear: right;
    }
}


/* Small monitor */

@media (max-width: 979px) {
    nav>a {
        padding: 0 1.5em;
    }
    .section-left,
    .section-right {
        width: 100%;
    }
    .section-left {
        text-align: center;
    }
    .section-right {
        padding: 0 0 2em;
    }
    .section-title {
        font-size: 4em;
        margin-bottom: .2em;
    }
    .section-tagline {
        font-size: 1.3em;
    }
    .learn-more {
        margin: 0 auto;
    }
}


/* Landscape phone to portrait tablet */

@media (max-width: 767px) {
    .container {
        width: 95%;
    }
    nav>a {
        padding: 0 2em;
    }
    h1 {
        padding: .5em 0;
    }
    .header-left,
    .header-right {
        width: 100%;
        text-align: center;
    }
    .section-left,
    .section-right {
        width: 100%;
    }
    .section-left {
        text-align: center;
        padding: 2em 0;
    }
    .section-right {
        padding: 1em 0 2em;
    }
    .section-title {
        font-size: 3em;
        margin-bottom: .2em;
    }
    .section-tagline {
        font-size: 1.3em;
    }
    .learn-more {
        margin: 0 auto;
    }
}


/* Landscape phones and down */

@media (max-width: 480px) {
    body {
        padding: 0 .5em;
    }
    .container {
        width: 90%;
    }
    nav {
        height: 0;
        overflow: hidden;
        -webkit-transition: all .3s ease;
    }
    input[type="checkbox"]:checked+nav {
        height: 205px;
    }
    nav>a {
        padding: 0 1em;
        display: block;
        border-bottom: solid 1px rgba(255, 255, 255, .1);
    }
    h1 {
        padding: .5em 0;
    }
    .header-left,
    .header-right {
        width: 100%;
        text-align: center;
    }
    .section-left,
    .section-right {
        width: 100%;
    }
    .section-left {
        text-align: center;
        padding: 1em 0;
    }
    .section-right {
        text-align: center;
        padding: 1em 0 2em;
    }
    .section-title {
        font-size: 2.4em;
        margin-bottom: 0;
    }
    .section-tagline {
        font-size: 1em;
    }
    .learn-more {
        display: table;
        margin: 0 auto;
    }
    .hidden-desktop {
        display: block;
    }
}

@media print {
    @page {
        size: A4;
        /* auto is the initial value */
    }
    li {
        top: 0;
    }
    body {
        background-color: #fff!important;
    }
    .save,
    .edit {
        display: none !important;
    }
    .txt_center {
        text-align: center;
        margin: 2px;
    }
    .container-prew {
        padding: 50px
    }
    .clearfix {
        clear: both;
    }
    .contentBox {
        margin: 0;
    }
    .content {
        margin-bottom: 10px;
    }
    .box {
        margin-left: 5px;
        font-size: 18px;
        position: relative;
        margin: 0;
        padding: 5px 10px 0px;
        width: 100%;
        page-break-inside: avoid;
        -webkit-region-break-inside: avoid;
    }
    div.mchOpt {
        display: block;
        page-break-inside: avoid;
        -webkit-region-break-inside: avoid;
    }
    .kldpHC {
        display: flex;
        height: auto;
    }
    .kldpHC>div {
        width: 50%;
        float: left;
    }
    .mark {
        margin-top: 0px;
        float: right;
    }
    .optionArea {
        margin: 0;
    }
    .heading {
        font-size: 20px;
        margin-top: 15px;
        margin-bottom: 12px;
        font-weight: 550;
    }
    .Qtitle {
        font-size: 20px;
        margin-bottom: 13px;
    }
    .answerArea {
        margin-bottom: 13px;
        margin-top: 5px;
        padding: 10px 0px 10px 10px;
    }
    .optionMcqArea {
        display: block;
        width: 100%;
        position: relative;
        padding: 5px;
    }
    .mchbox {
        margin: 5px;
        padding: 5px;
    }
    #prinTrueFalse {
        padding: 15px;
    }
    #prinTrueFalse ol {
        margin-left: 20px;
    }
    .optionArea {
        display: block;
        width: 30%;
        float: left;
        position: relative;
        padding: 5px;
    }
    .answerAreaRight {
        width: 40%;
        float: left;
        margin-left: 70px;
        display: block;
        padding: 5px;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 500;
    }
    .pull-right {
        float: right!important;
        margin-right: 80px;
    }
    .SchoolN {}
}

body:after {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.0);
}

.sdbr {
    margin-top: 41px;
    margin-bottom: auto;
}

.sdbr_body {
    padding: 0.75rem 0 !important;
    white-space: nowrap;
}

.sdbr_card {
    margin-bottom: 15px !important;
}

.contacts li {
    display: block;
}

@media(max-width: 576px) {
    .sdbr_card {
        margin-bottom: 15px !important;
    }
}

.col-3 {
    float: left;
    width: 100%;
    margin: 18px 0px;
    position: relative;
}

.effect-1,
.effect-2,
.effect-3 {
    border: 0;
    padding: 7px 0;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.effect-1~.focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #26abf5;
    transition: 0.4s;
}

.effect-1:focus~.focus-border {
    width: 100%;
    transition: 0.4s;
}

.selfLaunchBtn {
    position: fixed;
    z-index: 999;
    right: 0;
    bottom: 0
}


/* General button effect style (reset) */

.btn-effect {
    outline: none;
    position: relative;
}


/* General button effect Icon behavior/style */

.btn-effect.btn-xs .icon {
    line-height: 2em;
    font-size: 90%;
}

.btn-effect.btn-sm .icon {
    line-height: 2em;
    font-size: 100%;
}

.btn-effect .icon {
    line-height: 2.5em;
    font-size: 100%;
}

.btn-effect.btn-lg .icon {
    font-size: 100%;
}

.btn-effect.btn-lg .icon {
    line-height: 2.5;
    font-size: 100%;
}

.btn-effect5 {
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
}

.btn-effect5:active {
    background: #9053a9;
    top: 2px;
}

.btn-effect5:active .icon {
    color: #703b87;
}

.btn-effect5:hover span.text {
    -webkit-transform: translateY(300%);
    -moz-transform: translateY(300%);
    -ms-transform: translateY(300%);
    transform: translateY(300%);
}

.btn-effect5 span.text {
    display: inline-block;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.3s;
    -moz-backface-visibility: hidden;
    transition: all 0.3s;
    backface-visibility: hidden;
}

.btn-effect5 .icon {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}


/* Button 5a */

.btn-effect5a .icon {
    left: 0;
    top: -100%;
}

.btn-effect5a:hover .icon {
    top: 0;
}

.btn-effect5b .icon {
    left: -100%;
    top: 0;
}

.btn-effect5b:hover .icon {
    left: 0;
}

.top-btns {
    margin: -59px 15px 0;
    border-radius: 3px;
    padding: 6px;
}

.btn-cen-cust {
    position: absolute;
    bottom: -141px;
    right: 50%;
}

li {
    top: 0px;
}

ul {
    list-style-type: none;
    padding-left: 40px;
}

ul li::before {
    content: '\2022';
    /* Unicode for • character */
    position: absolute;
    left: -0.5em;
    /* Adjust this value so that it appears where you want. */
    font-size: 1.5em;
    /* Adjust this value so that it appears what size you want. */
        padding-left: 40px;
}
.dropdown-menu ul li::before {
    display: none;
}
.pagination li::before {
    display: none;   
    
}
.ln {
    list-style-type: none;
}

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: disc;
}

ul.c {
    list-style-type: square;
}

ol.d {
    list-style-type: armenian;
}

ol.e {
    list-style-type: cjk-ideographic;
}

ol.f {
    list-style-type: decimal;
}

ol.g {
    list-style-type: decimal-leading-zero;
}

ol.h {
    list-style-type: georgian;
}

ol.i {
    list-style-type: hebrew;
}

ol.j {
    list-style-type: hiragana;
}

ol.k {
    list-style-type: hiragana-iroha;
}

ol.l {
    list-style-type: katakana;
}

ol.m {
    list-style-type: katakana-iroha;
}

ol.n {
    list-style-type: lower-alpha;
}

ol.o {
    list-style-type: lower-greek;
}

ol.p {
    list-style-type: lower-latin;
}

ol.q {
    list-style-type: lower-roman;
}

ol.r {
    list-style-type: upper-alpha;
}

ol.s {
    list-style-type: upper-greek;
}

ol.t {
    list-style-type: upper-latin;
}

ol.u {
    list-style-type: upper-roman;
}

ol.v {
    list-style-type: none;
}

ol.w {
    list-style-type: inherit;
}

.editable {
    border-color: #bd0f18;
    box-shadow: inset 0 0 10px #555;
    background: #f2f2f2;
}

.text {
    outline: none;
}

.edit,
.save {
    display: block;
    position: absolute;
    top: 40px;
    right: 0px;
    padding: 4px 10px;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 10px;
    text-align: center;
    cursor: pointer;
    box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.edit {
    background: linear-gradient(to right, #cc4f27, #311005 51%, #cc4f27) var(--x, 0) / 200%;
    color: #f0f0f0;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.save {
    display: none;
    background: #bd0f18;
    color: #f0f0f0;
}

.box:hover .edit {
    opacity: 1;
}

label.btn span {
    font-size: 1.5em;
}

label input[type="radio"]~i.fa.fa-circle-o {
    color: #c8c8c8;
    display: inline;
}

label input[type="radio"]~i.fa.fa-dot-circle-o {
    display: none;
}

label input[type="radio"]:checked~i.fa.fa-circle-o {
    display: none;
}

label input[type="radio"]:checked~i.fa.fa-dot-circle-o {
    color: #7AA3CC;
    display: inline;
}

label:hover input[type="radio"]~i.fa {
    color: #7AA3CC;
}

label input[type="checkbox"]~i.fa.fa-square-o {
    color: #c8c8c8;
    display: inline;
}

label input[type="checkbox"]~i.fa.fa-check-square-o {
    display: none;
}

label input[type="checkbox"]:checked~i.fa.fa-square-o {
    display: none;
}

label input[type="checkbox"]:checked~i.fa.fa-check-square-o {
    color: #7AA3CC;
    display: inline;
}

label:hover input[type="checkbox"]~i.fa {
    color: #7AA3CC;
}

div[data-toggle="buttons"] label.active {
    color: #7AA3CC;
}

div[data-toggle="buttons"] label {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 2em;
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
    cursor: pointer;
    background-color: none;
    border: 0px solid #c8c8c8;
    border-radius: 3px;
    color: #c8c8c8;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

div[data-toggle="buttons"] label:hover {
    color: #7AA3CC;
}

div[data-toggle="buttons"] label:active,
div[data-toggle="buttons"] label.active {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.mchL {
    width: 40%;
}

.mchR {
    width: 40%;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background: linear-gradient(to right, #cc4f27, #311005 51%, #cc4f27) var(--x, 0) / 200%;
    color: #FFFFFF;
    box-shadow: 0 4px 5px 0 rgba(10, 10, 10, 0.14), 0 1px 10px 0 rgba(10, 10, 10, 0.12), 0 2px 4px -1px rgba(6, 6, 6, 0.2);
}

.card [data-background-color="rose"] {
    background: linear-gradient(to right, #cc4f27, #311005 51%, #cc4f27) var(--x, 0) / 200%;
    box-shadow: 0 4px 20px 0px rgba(20, 20, 21, 0.2), 0 7px 10px -5px rgba(6, 6, 6, 0.02);
}

.navbar .navbar-nav>li>a.btn.btn-success:hover {
    box-shadow: 0 14px 26px -12px rgb(101, 36, 92), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgb(173, 164, 164);
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus,
.dropdown-menu li a:active {
    background: linear-gradient(to right, #cc4f27, #311005 51%, #cc4f27) var(--x, 0) / 200%;
    color: #FFFFFF;
}

.notifi {
    position: absolute;
    z-index: 9999999;
    width: 50px;
    height: 50px;
    background: linear-gradient(to right, #cc4f27, #311005 51%, #cc4f27) var(--x, 0) / 200%;
    top: -29px;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    color: #fff;
    padding: 14px;
    font-weight: bold;
    right: -26px;
}

a:hover,
a:focus {
    color: #daa830;
    ;
    text-decoration: none;
}

.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary:active:focus,
.btn.btn-primary:active:hover,
.btn.btn-primary.active:focus,
.btn.btn-primary.active:hover,
.open>.btn.btn-primary.dropdown-toggle,
.open>.btn.btn-primary.dropdown-toggle:focus,
.open>.btn.btn-primary.dropdown-toggle:hover,
.navbar .navbar-nav>li>a.btn.btn-primary,
.navbar .navbar-nav>li>a.btn.btn-primary:hover,
.navbar .navbar-nav>li>a.btn.btn-primary:focus,
.navbar .navbar-nav>li>a.btn.btn-primary:active,
.navbar .navbar-nav>li>a.btn.btn-primary.active,
.navbar .navbar-nav>li>a.btn.btn-primary:active:focus,
.navbar .navbar-nav>li>a.btn.btn-primary:active:hover,
.navbar .navbar-nav>li>a.btn.btn-primary.active:focus,
.navbar .navbar-nav>li>a.btn.btn-primary.active:hover,
.open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle,
.open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle:focus,
.open>.navbar .navbar-nav>li>a.btn.btn-primary.dropdown-toggle:hover {
    background: linear-gradient(to right, #cc4f27, #311005 51%, #cc4f27) var(--x, 0) / 200%;
    color: #FFFFFF;
}

.btn.btn-warning,
.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:active,
.btn.btn-warning.active,
.btn.btn-warning:active:focus,
.btn.btn-warning:active:hover,
.btn.btn-warning.active:focus,
.btn.btn-warning.active:hover,
.open>.btn.btn-warning.dropdown-toggle,
.open>.btn.btn-warning.dropdown-toggle:focus,
.open>.btn.btn-warning.dropdown-toggle:hover,
.navbar .navbar-nav>li>a.btn.btn-warning,
.navbar .navbar-nav>li>a.btn.btn-warning:hover,
.navbar .navbar-nav>li>a.btn.btn-warning:focus,
.navbar .navbar-nav>li>a.btn.btn-warning:active,
.navbar .navbar-nav>li>a.btn.btn-warning.active,
.navbar .navbar-nav>li>a.btn.btn-warning:active:focus,
.navbar .navbar-nav>li>a.btn.btn-warning:active:hover,
.navbar .navbar-nav>li>a.btn.btn-warning.active:focus,
.navbar .navbar-nav>li>a.btn.btn-warning.active:hover,
.open>.navbar .navbar-nav>li>a.btn.btn-warning.dropdown-toggle,
.open>.navbar .navbar-nav>li>a.btn.btn-warning.dropdown-toggle:focus,
.open>.navbar .navbar-nav>li>a.btn.btn-warning.dropdown-toggle:hover {
    background: linear-gradient(to right, #cc4f27, #311005 51%, #cc4f27) var(--x, 0) / 200%;
    color: #FFFFFF;
}

.navbar .navbar-nav>li>a.btn.btn-success.dropdown-toggle:hover {
    background-color: #ffffff;
    color: #014524;
    border: 1px solid #dcdede;
}

.kldpHC {
    display: flex;
    height: auto;
}

.kldpHC>div {
    width: 50%;
    float: left;
}

.kldpHC {
    display: flex;
    height: auto;
}

.sp {
    width: auto;
    min-width: 25%;
    float: left;
    margin-right: 10px;
    margin-top: 13px;
    margin-left: 15px;
}

.sp1 {
    width: auto;
    min-width: 25%;
    float: left;
    margin-right: 10px;
    margin-top: 13px;
    margin-left: 15px;
}

.spn {
    margin-left: 4px;
    display: inline-block;
}

#modal-body>div>#prinTrueFalse {
    max-height: calc(45vh);
    overflow: auto;
}

@media (max-width:768px) {
    #modal-body>div>#prinTrueFalse {
        max-height: calc(30vh);
    }
}

@media (min-width:769px) and (max-width:992px) {
    #modal-body>div>#prinTrueFalse {
        max-height: calc(20vh);
    }
}


/** Custom Code **/

sup {
    top: -0.7em;
    font-size: 10px;
}

.imgfinal {
    width: auto;
    height: 250px ! important;
    vertical-align: middle;
}

.opt {
    float: left;
    margin-top: 46px;
    margin-right: 6px;
}

em {
    font-style: italic;
}

.Qtitle p:first-child {
    margin-top: -5px!important;
    margin-left: 0px!important;
	text-align: left;
}

.imgMCH {
    vertical-align: middle;
}
#datatables p{
    margin-left: 0px !important;
}