/*===========RESET CSS=============*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}


/*===============GENERAL STYLES============*/
body{
font-family: Arial, Helvetica, sans-serif;
}
/* .wrapper{
width: 100%;
} */

a{
text-decoration: none;
}
/*===============================RESET PREVIOUS CLASS START===================*/
.oi-left{width: 650px;float: left;}
.oi-right{width: 300px;float: right;}
.oi-article-container{margin-top: 40px;}
/*=========OI-BREADCRUMB==========*/

.oi-breadcrumb {
    font-size:16px;
    color:#8F99A3;
    line-height:24px;
    font-weight:normal;
    margin-bottom:12px;
}
.oi-breadcrumb a {
    color:#8F99A3;
}
.oi-breadcrumb span {
    font-weight:bold;
    /*color:#FF4BB3;*/
    font-size:16px;
    line-height:21px;
}
/*=========AD============*/
.oi-adblock {
    background:none;
}
.oi-adimg {
    padding-bottom:0;
}
/*===========QUIZ HEADING=========*/
.oi-quiz-heading {
    font-size:24px;
    font-weight:400;
    line-height:23.59px;
    color:#FAE63C!important;
}
.dots {
    text-align:left!important;
}
.dot.active {
    background:#C2C2C2!important;
}
/*=============TRENDING WRAPPER==========*/
.oi-trending-wrapper {
    margin-bottom:36px !important;
}
/*====================================END=================================================*/

/*QUOTES THEME STYLE*/
.theme-light {
    /*=====BACKGROUND COLORS=====*/
--bg-clipboard:#F6F6F6;
    --bg-close:#333;
    --bg-tooltip:#333;
    --bg-view-btn:#0A0E12;
    /*=====FONT COLORS=====*/
--font-color-quotes:#4B4B4B;
    /*#606060*/
--font-color-tooltip:#FFF;
    --font-color-viewbtn:#FFF;
    /*=====BORDER COLORS=====*/
--quotes-border:#D2D2D2;
    --border-tooltip:#333;
    --view-btn-border:#0A0E12;
    /*=====COMMON COLOR======*/
--title-color:#013332;
    /*==========QUOTES ICONS===========*/
--blue-star:url(https://imagesvs.oneindia.com/db-common/images/quotes/lightmode/blue-star.svg);
    --quotes:url(https://imagesvs.oneindia.com/db-common/images/quotes/lightmode/quote.svg);
    --copy:url(https://imagesvs.oneindia.com/db-common/images/quotes/lightmode/quotes-copy.svg);
    --quotes-tick-mark:url(https://imagesvs.oneindia.com/db-common/images/quotes/lightmode/quotes-tick-mark.svg);
    --upload:url(https://imagesvs.oneindia.com/db-common/images/quotes/lightmode/quotes-upload.svg);
    --quotes-facebook:url(https://imagesvs.oneindia.com/db-common/images/quotes/lightmode/quotes-facebook-icon.svg);
    --quotes-instagram:url(https://imagesvs.oneindia.com/db-common/images/quotes/lightmode/quotes-instagram-icon.svg);
    --quotes-whatsapp:url(https://imagesvs.oneindia.com/db-common/images/quotes/lightmode/quotes-whatsapp-icon.svg);
    --quotes-twitter:url(https://imagesvs.oneindia.com/db-common/images/quotes/lightmode/quotes-x-icon.svg);
    --quotes-share:url(https://imagesvs.oneindia.com/db-common/images/quotes/lightmode/share-icon-quotes.svg);
    /* --quotes-close:url(../images/lightmode/header-close.svg);
    */
}
.theme-dark {
    /*=====BACKGROUND COLORS=====*/
--bg-clipboard:#28313A;
    --bg-close:#EDEDED;
    --bg-tooltip:#333;
    --bg-view-btn:#06ADB2;
    /*=====FONT COLORS=====*/
--font-color-quotes:#FFFFFF;
    --font-color-tooltip:#FFF;
    --font-color-viewbtn:#FFF;
    /*=====BORDER COLORS=====*/
--quotes-border:#28313A;
    --border-tooltip:#333;
    --view-btn-border:#06ADB2;
    /*=====COMMON COLOR======*/
--title-color:#ffffff;
    /*==========QUOTES ICONS===========*/
--blue-star:url(https://imagesvs.oneindia.com/db-common/images/quotes/lightmode/blue-star.svg);
    --quotes:url(https://imagesvs.oneindia.com/db-common/images/quotes/darkmode/quote.svg);
    --copy:url(https://imagesvs.oneindia.com/db-common/images/quotes/darkmode/quotes-copy.svg);
    --quotes-tick-mark:url(https://imagesvs.oneindia.com/db-common/images/quotes/darkmode/quotes-tick-mark.svg);
    --upload:url(https://imagesvs.oneindia.com/db-common/images/quotes/darkmode/quotes-upload.svg);
    --quotes-facebook:url(https://imagesvs.oneindia.com/db-common/images/quotes/darkmode/quotes-facebook-icon.svg);
    --quotes-instagram:url(https://imagesvs.oneindia.com/db-common/images/quotes/darkmode/quotes-instagram-icon.svg);
    --quotes-whatsapp:url(https://imagesvs.oneindia.com/db-common/images/quotes/darkmode/quotes-whatsapp-icon.svg);
    --quotes-twitter:url(https://imagesvs.oneindia.com/db-common/images/quotes/darkmode/quotes-x-icon.svg);
    --quotes-share:url(https://imagesvs.oneindia.com/db-common/images/quotes/darkmode/share-icon-quotes.svg);
    /* --quotes-share:url(../images/darkmode/quotes-share-icon.svg);
    */
}
/*===========INFO===============*/
.info {
    margin-bottom:32px;
}
.blue-star {
    background:var(--blue-star) no-repeat 0 0;
    padding:8px 8px 0 12px;
}
.info .oi-main-heading {
    margin-bottom:10px;
    color:var(--title-color)!important;
    font-size:24px;
    /*background:url(https://imagesvs.oneindia.com/db-common/images/quotes/oi-logo-circle-updated.svg) no-repeat 0 0;*/
}
.info p {
    font-size:16px;
    font-weight:400;
    line-height:24px;
    text-align:left;
    color:var(--font-color-quotes);
    /*padding:10px 0;*/
}
.info .hero-image {
    width:650px;
    height:380px;
    border-radius:12px;
    margin-top:10px;
}
*=====================QUOTE SUBHEADING=================*/
.sub-heading {
    padding: 0 0 16px;
    margin-bottom: 5px;
}
.sub-heading h2 {
    font-size:20px;
    font-weight:600;
    line-height:24px;
    text-align:left;
    color: var(--font-color-heading);
    margin-bottom: 24px;  
    padding: 8px 8px 0 0px;
    /*background: url(https://imagesvs.oneindia.com/db-common/images/quotes/oi-logo-circle-updated.svg) no-repeat 0 0;url(https://imagesvs.oneindia.com/db-common/images/quotes/oi-logo-circle-updated.svg) no-repeat 0 0;*/
}
/*=================QUOTES=====================*/
.quote {
    border:1px solid var(--quotes-border);
    border-radius:10px;
    padding:20px 16px 20px 16px;
    margin-bottom:25px;
}
.quote .header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:20px;
}
.quote .header .quotes-image {
    background:var(--quotes) no-repeat 0 0;
    width:20px;
    height:14px;
}
.quote p {
    font-size:16px;
    font-weight:400;
    line-height:24px;
    text-align:left;
    color:var(--font-color-tertiary);
}
.quote .header .copy-clipboard {
    cursor:pointer;
    border-radius:6px;
    /* padding:6px 10px;
    */
background:var(--bg-clipboard);
    display:inline-block;
    margin-right:10px;
    width:30px;
    height:30px;
    vertical-align:middle;
    text-align:center;
    position:relative;
}
.copy-clipboard-icon {
    position:absolute;
    top:8px;
    left:8px;
    display:inline-block;
    vertical-align:middle;
    width:14px;
    height:14px;
    background:var(--copy) no-repeat 0 0;
}
.quotes-tick-icon {
    position:absolute;
    top:6px;
    left:6px;
    display:inline-block;
    vertical-align:middle;
    width:18px;
    height:18px;
    background:var(--quotes-tick-mark) no-repeat 0 0;
    background-size:contain;
    display:none;
}
.quotes-share-icon {
    position:absolute;
    top:6px;
    left:6px;
    display:inline-block;
    vertical-align:middle;
    width:18px;
    height:17px;
    background:var(--quotes-share) no-repeat 0 0;
}
.share-wrapper {
    cursor:pointer;
    border-radius:5px;
    /* padding:6px 10px;
    */
background:var(--bg-clipboard);
    display:inline-block;
    width:30px;
    height:30px;
    text-align:center;
    position:relative;
    vertical-align:middle;
    overflow:hidden;
}
.copy-clipboard.copied .quotes-tick-icon {
    display:inline-block;
}
.copy-clipboard.copied .copy-clipboard-icon {
    display:none;
}
.tooltip {
    position:relative;
}
.tooltip .tooltiptext {
    visibility:hidden;
    width:60px;
    background-color:var(--bg-tooltip);
    color:var(--font-color-tooltip);
    text-align:center;
    border-radius:6px;
    padding:5px 5px;
    font-size:14px;
    /* Position the tooltip */
position:absolute;
    z-index:1;
    top:105%;
    left:50%;
    margin-left:-30px;
}
.tooltip .tooltiptext::after {
    content:" ";
    position:absolute;
    bottom:100%;
    /* At the top of the tooltip */
left:50%;
    margin-left:-5px;
    border-width:5px;
    border-style:solid;
    border-color:transparent transparent var(--border-tooltip) transparent;
}
.tooltip:hover .tooltiptext {
    visibility:visible;
}
.share-wrapper.show-share {
    width:170px;
    white-space:nowrap;
    overflow-x:auto;
    -ms-overflow-style:none;
    scrollbar-width:none;
}
.share-wrapper::-webkit-scrollbar {
    display:none;
}
.quotes-social-share {
    position:absolute;
    right:-200px;
    top:0;
    border-radius:5px;
    padding:6px 0;
    background:var(--bg-clipboard);
    width:170px;
    height:30px;
    text-align:center;
    transition:all 0.8s ease 0s;
    -moz-transition:all 0.8s ease 0s;
    -o-transition:all 0.8s ease 0s;
}
.share-wrapper.show-share .quotes-social-share {
    right:0;
}
.share-wrapper.show-share .quotes-share-icon {
    display:none;
}
.facebook-share-icon {
    display:inline-block;
    vertical-align:middle;
    width:15px;
    height:15px;
    background:var(--quotes-facebook) no-repeat 0 0;
    margin:0 5px;
}
.instagram-share-icon {
    display:inline-block;
    vertical-align:middle;
    width:18px;
    height:18px;
    background:var(--quotes-instagram) no-repeat 0 0;
    margin:0 5px;
}
.x-share-icon {
    display:inline-block;
    vertical-align:middle;
    width:14px;
    height:14px;
    background:var(--quotes-twitter) no-repeat 0 0;
    margin:0 5px;
}
.close-share-icon {
    display:inline-block;
    vertical-align:middle;
    width:14px;
    height:14px;
    margin:0 0 0 15px;
    position:relative;
}
.close-share-icon:before,.close-share-icon:after {
    position:absolute;
    left:5px;
    content:' ';
    height:14px;
    width:2px;
    background-color:var(--bg-close);
}
.close-share-icon:before {
    transform:rotate(45deg);
}
.close-share-icon:after {
    transform:rotate(-45deg);
}
.whatsapp-share-icon {
    display:inline-block;
    vertical-align:middle;
    width:18px;
    height:18px;
    background:var(--quotes-whatsapp) no-repeat 0 0;
    margin:0 5px;
}
/*================VIEW MORE BUTTON===========*/
.oi-view-moreouter {
    margin:0 auto 40px auto;
    text-align:center;
    cursor:pointer;
}
.oi-view-more {
    border:1px solid var(--view-btn-border);
    background:var(--bg-view-btn);
    transition:all 0.3s ease;
    text-align:center;
    font-size:14px;
    z-index:2;
    border-radius:12px;
    font-weight:bold;
    color:var(--font-color-viewbtn);
    line-height:18px;
    padding:10px 16px;
    width:110px;
    position:relative;
    display:inline-block;
}
.oi-view-more::before {
    content:'';
    left:-4px;
    top:-4px;
    right:-2px;
    bottom:-4px;
    border:1px solid var(--view-btn-border);
    border-top-left-radius:12px;
    border-bottom-left-radius:12px;
    border-top-right-radius:4px;
    border-bottom-right-radius:12px;
    position:absolute;
    z-index:-1;
    border-right:none;
}
.oi-view-more-outerborder {
    position:relative;
}
.oi-view-more-outerborder::before {
    position:absolute;
    content:'';
    right:-24px;
    top:-14px;
    border-top:1px solid var(--view-btn-border);
    border-right:1px solid var(--view-btn-border);
    height:45px;
    width:20px;
    border-radius:12px;
    border-bottom-right-radius:12px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
}
.oi-view-more-outerborder::after {
    position:absolute;
    content:'';
    height:15px;
    right:-20px;
    width:20px;
    top:15px;
    border-right:1px solid var(--view-btn-border);
    border-bottom-right-radius:12px;
}
/*================RIGHT AD=============*/
.fix-right-ad {
    position:fixed;
    top:0;
    right:5px;
}
.fix-right-ad .box {
    width:160px;
    height:600px;
}
.predetails-desc{
    height:110px;
    overflow:hidden;
    position:relative;
    padding:6px 0px;
    /*margin-bottom:24px;*/
}
.predetails-desc.show{
    height: auto;
}
.load-more-desc {
    text-align: center;
    cursor: pointer;
    padding: 6px 0;
    font-weight: 700;
    text-decoration: underline;
}
/*=============LIST===========*/
.list-content {
    margin-bottom: 32px;
    width: 100%;
}

/*=============LIST HEADING===========*/
.list-content .heading{
    padding: 0 0 16px;
}

.list-content .heading p{
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    color: #333;;
}

/*=============LIST MAIN CONTAINER===========*/
.list-content .lists-container{
    border: 1px solid #d8d6d6;
    border-radius: 5px;
    padding: 15px;
    background: #FFF;
}

.list-content .lists-container .list{
    padding-bottom: 12px;
    position: relative;
}

.list-content .lists-container .list:last-child{
    padding-bottom: 0;
}

.list-content .lists-container .list::before{
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    left: 0px;
    top: 5px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #233839;
}

.list-content .lists-container .list p{
    padding-left: 18px;
}

.list-content .lists-container .list p a{
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.01em;
    text-align: left;
    color: #333;
}
.quotes-table-content-listing {}
.quotes-table-content-title {font-size: 21px;font-weight: 600;line-height: 24px;text-align: left;color: #1B1B33;margin-bottom: 12px;}
.quotes-table-content-listing ol {padding-left: 0px;counter-reset: item;}
.quotes-table-content-listing ol li {font-size: 16px;font-weight: 400;line-height: 24px;text-align: left;color: #606060;margin: 12px 0 24px 0;display: block;}
.quotes-table-content-listing ol li a {color: #606060;text-decoration: none;}
.quotes-table-content-listing ol li:before { content: counters(item, ".") ". "; counter-increment: item;}
.quotes-table-content-listing ol ol {padding-left: 20px;}
.quotes-table-content-listing ol ol li {font-size: 16px;font-weight: 400;line-height: 24px;text-align: left;color: #606060;margin: 6px 0;}

/*==========================AUTHOR DETAILS CONTAINER======================*/
.author-details-container{
    display: flex;
    align-items: center;
    gap: 40px;
    font-size: 14px;
    color: #28313A;
    font-weight: normal;
    line-height: 21px;
    margin: 15px 0px 5px 0px;
}

.author-details-container .author-name{
    position: relative;
}

.author-details-container .author-name::after {
    position: absolute;
    content: '';
    width: 1px;
    height: 13px;
    background: #8F99A3;
    right: -20px;
    top: 5px;
}

.author-details-container .author-name a{
    color: #28313A;
}

.author-details-container .published-detail{
    display: flex;
    align-items: center;
    gap: 10px;
}